/**
 * @file	: _style/main.css
 * @author	: (주)스토리
 * @brief	: 기본 메인 레이아웃 CSS 파일
 **/

@import url(font.css);
@import url(common.css);
@import url(calendar.css);
/* @import url(button.css); */
@import url(table.css.php);


/********************************
 rowgroup1 (상단 비쥬얼 영역)
 *******************************/ 
.rowgroup1{position:relative;margin-bottom:78px;background: linear-gradient(135deg, #006285 60%, #ffffff 40%);}

/* 비주얼 */
.visual {position:relative; top:0; max-width:1920px; overflow:hidden; margin:0 auto;}

.visual .visual_item {position:relative; height:714px; padding-top:129px; }
.visual .visual_item .visual_background {display:block; position:absolute; bottom:0; left:0; width:100%; height:100%; border-bottom-right-radius:300px; background-position-x:center; }
.visual .visual_item .visual_background.Bg01 {background-image: url("../images/main/visual_background01.jpg");}

.visual .visual_item .visual_txt {display: block; position:absolute; top:20%; left: calc(50% - 680px); width:auto; height:auto;}
.visual .visual_item .visual_txt .big_title {font-size:60px; line-height:1; font-family:'TwayAir'; color:#282828; margin-bottom:30px; letter-spacing:-1px; color:#fff;}
.visual .visual_item .visual_txt .small_text {font-size:26px; line-height:36px; font-family: 'SCoreDream'; font-weight:400; letter-spacing:-1px; color:#fff;}
.visual .visual_item .visual_txt .small_text span {display:block;}

@media screen and (max-width: 1400px) {
	.visual .visual_item .visual_background {border-bottom-right-radius:0px;}
	.visual .visual_item .visual_txt {left:2%;}
}

@media all and (max-width: 1024px) {
	.visual .visual_item {height:500px; padding-top:76px;}
	.visual .visual_item .visual_txt {left:6%;}
	.visual .visual_item .visual_background {bottom:0; left:0; width:100%; height:100%; background-size: cover;}	
	
	.visual .visual_item .visual_txt .big_title {font-size: 48px; margin-bottom: 30px; }
	.visual .visual_item .visual_txt .small_text {font-size: 22px; line-height: 28px; }	
}

@media all and (max-width: 768px) {
	.visual .visual_item {height:400px;}	
	.visual .visual_item .visual_txt {left:4%;}
	.visual .visual_item .visual_txt .big_title {font-size: 36px; margin-bottom: 20px; text-shadow: 2px 2px 4px #333;}
	.visual .visual_item .visual_txt .small_text {font-size: 18px; line-height: 24px; text-shadow: 2px 2px 10px #000;}	

}	

@media all and (max-width: 400px) {
	.visual .visual_item {height:300px;}	
	.visual .visual_item .visual_txt .big_title {font-size: 30px; margin-bottom: 20px;}
	.visual .visual_item .visual_txt .small_text {font-size: 16px; line-height: 24px; }
}

/****** 바로가기 ******/
.favorite_wrap {display:block;  overflow:hidden; position:absolute; bottom:100px; left: calc(50% - 720px); width: calc(100% - 874px);}
.favorite_link {display: inline-block; text-align: center;}
.shortcut_item {display: inline-block; width:191px; margin-top:20px;}
.shortcut_item .link {display: block; width: 100%; padding: 0 10px;}
.shortcut_item .link .link_inner{display: block;width: 100%;text-align: center;}
.shortcut_item .link .link_inner .icon_box {display: inline-block;overflow: hidden;position: relative;top: 0;width: 116px;height: 116px;border-radius: 100%;transition: top 0.3s;}
.shortcut_item .link .link_inner .icon_box:before {content: ''; display: block; position: absolute;left: 0;top: 0; width: 400%; height: 100%; background:#fff;}
.shortcut_item .link .link_inner .icon_box .icon {display: block;position: relative; left: calc(50% - 40px);top: calc(50% - 35px); width:80px; height:70px; background-image: url(../images/main/favorite_item.png);background-size: 500%;}
.shortcut_item .link .link_inner .icon_box .icon.type1 {background-position-x: -123%;}
.shortcut_item .link .link_inner .icon_box .icon.type2 {background-position-x: -90%;}
.shortcut_item .link .link_inner .icon_box .icon.type3 {background-position-x: -184%;}
.shortcut_item .link .link_inner .icon_box .icon.type4 {background-position-x: -152%;}

.shortcut_item .link .link_inner .text_box {display: block; height: 42px; margin-top: 8px;}
.shortcut_item .link .link_inner .text_box .text {position: relative; top: 50%; font-weight: 400; font-size:17px; line-height: 24px; color: #fff; letter-spacing: 0; transform: translateY(-50%);}

.shortcut_item .link:hover .link_inner .icon_box {top:-10px;}
.shortcut_item .link:hover .link_inner .icon_box:before {animation: rolling 3s linear infinite;}

@media screen and (max-width:1680px) {
	.favorite_wrap {width: auto;}
}

@media screen and (max-width:1400px) {
	.favorite_wrap {left: 2%;}	
}

@media screen and (max-width:1024px) {
	.favorite_wrap {width: 100%;bottom: 5%;}
	.shortcut_item {width: 24vw;}
}

@media screen and (max-width:768px) {	
	.shortcut_item .link .link_inner .icon_box {width: 96px; height: 96px;}
	.shortcut_item .link .link_inner .text_box {height: 32px;}
	.shortcut_item .link .link_inner .text_box .text {font-size: 15px;}
	.shortcut_item .link .link_inner .icon_box .icon  {left: calc(50% - 32px); top: calc(50% - 30px); width: 64px; height: 60px;}
}

@media screen and (max-width:480px) {
	.rowgroup1 {margin-bottom: 248px;}
	.favorite_wrap {width: 96%; bottom: -50%; left: 0; background: #006285; padding: 0 0 30px; border-radius: 30px; margin: 0 2%;}
	.shortcut_item {width: 38vw;}
}

@media screen and (max-width:400px) {
	.rowgroup1 {margin-bottom: 288px;}
	.favorite_wrap {width: 96%; bottom: -80%; left: 0; background: #006285; padding: 0 0 30px; border-radius: 30px; margin: 0 2%;}
	.shortcut_item {width: 38vw;}
}	

/****** 공지사항 ******/
.notice_wrap {position: relative; z-index: 1; padding:0px;}
.notice_wrap .notice_box {display: inline-block; position: relative; width: calc(100% - 544px); vertical-align: top;}
.notice_wrap .notice_box .title_box .section_title {display: inline-block; font-family: 'SCoreDream'; font-weight:500; font-size: 34px; line-height:55px; color: #252b32;}
.notice_wrap .notice_box .title_box .desc {margin-left:20px; font-weight:500; font-size:18px; line-height:40px; color:#4d4d4d;}

.notice_wrap .notice_box .notice_list {position: relative; width: 100%; padding-top:35px; font-size:0;}
.notice_wrap .notice_box .notice_list .notice_item {display: inline-block; width: calc((100% - 45px) / 3); height:240px;}
.notice_wrap .notice_box .notice_list .notice_item + .notice_item {margin-left: 18px;}
.notice_wrap .notice_box .notice_list .notice_item .link {display:block; position:relative; width:100%; height:100%;}
.notice_wrap .notice_box .notice_list .notice_item .link .link_inner {display: block; overflow: hidden; position: relative; top: 0; width: 100%; height: 100%; padding: 1px; border-radius:20px; border:1px solid #c9c9c9; background-color: #fff; letter-spacing: 0; transition: top 0.3s;}

.notice_wrap .notice_box .notice_list .notice_item .link .link_inner:before {content: ''; display: block; position: absolute; left: 0; top: 100%; width: 100%; height: 100%; background-image: linear-gradient(#22b69d, #4265cf); transition: top 0.3s; }
.notice_wrap .notice_box .notice_list .notice_item .link .link_inner .link_box {display: block; position: relative; width: 100%; height: 100%; padding: 30px; border-radius: 19px; background-color: #fff;}
.notice_wrap .notice_box .notice_list .notice_item .link .link_inner .link_box .date {position: absolute; right: 30px;bottom: 30px; font-family: 'Montserrat'; font-weight:600; font-size: 18px; line-height: 26px; color:#ef5454;}
.notice_wrap .notice_box .notice_list .notice_item .link .link_inner .link_box .notice_title {display: -webkit-box; overflow: hidden; height:96px; padding:10px 4px 10px; font-family: 'SCoreDream'; font-weight: 500; font-size: 20px; line-height: 28px; color: #4c4c4c; letter-spacing:-1px; word-break: keep-all; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}

.notice_wrap .notice_box .notice_list .notice_item .link:hover {text-decoration: none;}
.notice_wrap .notice_box .notice_list .notice_item .link:hover .link_inner:before {top:0;}
.notice_wrap .notice_box .notice_list .notice_item .link:hover .link_inner {top: -10px;}

.notice_wrap .notice_box .more_box {position: absolute; right: 0; top: 0;}
.notice_wrap .notice_box .more_box .more {display: block; position: relative; width:54px; height:54px; border-radius:50%; background-color:#151515; }
.notice_wrap .notice_box .more_box .more:before {content: ''; display: block; position: absolute; left: 50%; top: 50%; margin: -9px; width: 19px; height: 19px; background: url(../images/main/icon_more.png) no-repeat; }


@media screen and (max-width: 1500px) {
	.notice_wrap .notice_box .notice_list .notice_item .link .link_inner .link_box .notice_title {font-size:18px; margin-bottom:10px; }
}

@media screen and (max-width: 1200px) {
	.notice_wrap .notice_box {width:100%;}
}

@media screen and (max-width: 900px) {
    .notice_wrap .notice_box .notice_list .notice_item {width:100%; height:auto;}
    .notice_wrap .notice_box .notice_list .notice_item + .notice_item {margin-top:15px; margin-left:0; }
}

@media screen and (max-width: 840px) {
	.notice_wrap {padding-top:70px;}
}

@media screen and (max-width: 540px) {
	.notice_wrap .notice_box .title_box .section_title {font-size:30px; line-height:48px;}	
	.notice_wrap .notice_box .more_box .more {width:45px; height:45px;}
	.notice_wrap .notice_box .notice_list {padding-top:20px;}
}

@media screen and (max-width: 480px) {
	.notice_wrap {padding-top:50px; padding-bottom:70px;}
}

/****** 팝업존 ******/
.notice_wrap .mainPopup {position:relative; float: right; width:500px;}
.mainPopup .slider {display:block; position:relative; height:330px; border-radius:30px; overflow:hidden; background-color:#f9f9f9; }
.mainPopup li > a {overflow:hidden; display:block; position:relative; height:330px; background-color:#f9f9f9;}
.mainPopup li > a img {display:block; width:100%; height:100%;}

.mainPopup .control {display:flex;justify-content:flex-start;align-items: center;}
.mainPopup .control {position:absolute;bottom:0;right:0;padding: 0 15px;background:rgba(0,0,0,.5);border-radius:30px 0 30px 0;z-index:30;}

.mainPopup .control [class^='btn_'] {position:relative; width:28px; height:28px; background-image:url(../images/main/pager_ir.png); background-repeat:no-repeat; text-indent:-9999px;}
.mainPopup .control .btn_prev {background-position:-3px -3px}
.mainPopup .control .btn_next {background-position:-70px -3px;}
.mainPopup .control .btn_stop {background-position:-38px -3px;}
.mainPopup .control .btn_play {background-position:-105px -3px;}

.mainPopup .page_num {width:fit-content;font-size:18px;margin: 14px 15px;color:#fff;}
.mainPopup .page_num .current {display:inline-block;width:30px;text-align:center;font-family:'Montserrat';font-weight:600;margin-right: 14px;} 
.mainPopup .page_num .total {display:inline-block; width:30px; text-align:center; font-family:'Montserrat'; font-weight:400;}

.mainPopup .progress_bar {top:inherit; bottom:3px; left:50%; transform:translateX(-50%); background-color:#dfe5eb;}
.mainPopup .popup_bar {position: absolute; left:64px; top:50%; transform:none; display:inline-block; width:10px; height:3px;}

@media screen and (max-width: 1200px) {
	 .notice_wrap .mainPopup {float: none; display: block; width: 500px; margin:30px auto;}
}

@media screen and (max-width: 540px) {
	.notice_wrap .mainPopup {width:100%;}
	.mainPopup .slider {height: auto;}
	.mainPopup li > a {height: auto;}
	.mainPopup li > a img {width:100%;display:block;margin:0 auto;}
}	

.sec_left {float: left;}
.sec_right {float: right;}

/* 교육자료 바로가기 영역 */
.edudata_box_wrap {position: relative; width: calc(100% - 360px); z-index: 1; padding:0px;}
.edudata_box_wrap .edudata_box {display:flex; flex-wrap:nowrap; justify-content:space-between; gap:40px; font-size:0;}
.edudata_box_wrap .column {width:50%; border-radius:15px;}
.edudata_box_wrap .column:nth-child(1) {background-color: #dadbc6;}
.edudata_box_wrap .column:nth-child(2) {background-color: #ffe8e8;}

.edudata_box_wrap .edudata_box .bg01:before {content:''; display:block; position:absolute; bottom:0px; right:0; width:250px; height:218px; background:url(../images/main/edudata_bg01.png) no-repeat;}
.edudata_box_wrap .edudata_box .bg02:before {content:''; display:block; position:absolute; top:0px; right:0; width:192px; height:173px; background:url(../images/main/edudata_bg02_01.png) no-repeat;}
.edudata_box_wrap .edudata_box .bg02:after {content:''; display:block; position:absolute; bottom:20px; right:20px; width:210px; height:150px; background:url(../images/main/edudata_bg02_02.png) no-repeat;}

.edudata_inbox {position:relative; display:block; text-decoration:none; min-height:320px; padding:50px; box-sizing:border-box;}
.edudata_inbox .title {font-size:42px; line-height:48px; font-family: "GmarketSans"; font-weight:600; color:#333;}
.bg02 .title span {display:block;}
.edudata_box_wrap .column:nth-child(2) .edudata_inbox .title {font-size:36px; line-height:40px;}

.b1.more {position:relative; display:block; padding:10px; margin-top:40px; text-align:center; text-decoration: none; width:200px; line-height:34px; border:1px solid #4d4d4d; box-sizing:border-box; border-radius:5px; font-size:18px; font-weight:500; color:#333; z-index:9;}

/*이용 정보 안내*/
.info_box_wrap {position: relative; width:320px; z-index: 1; padding:0px; background-color: #32ab98; border-radius:15px;}
.info_inbox {position:relative; display:block; text-decoration:none; min-height:320px; padding:50px 40px; box-sizing:border-box; text-align:center;}
.info_tit {position: relative;color:#fff;font-family: "GmarketSans";font-size:28px;font-weight:500;line-height: 40px;margin-bottom:20px;padding-left: 40px;letter-spacing: -1px;}
.info_tit:before {content:'';display:block;position:absolute;top:0px;left: -10px;width:40px;height:40px;background:url(../images/main/Tel_icon.png) no-repeat;}
.Tel_nb {color:#e4ff00; font-size:30px; font-family: "GmarketSans"; font-weight:400; line-height:34px; margin-bottom:30px;}
.info_inbox ul {display:block;width:100%;font-size:0;line-height:0;box-sizing:border-box;text-align:left;}
.info_inbox ul li {display:block;position:relative;width:100%;margin-top:0;padding-left:12px; font-size:18px; color:#fff; line-height:30px; font-weight:500; font-family: 'SCoreDream'; word-break:keep-all;box-sizing:border-box;}
.info_inbox ul li:before {display:block;position:absolute;top:12px;left:0;width:5px;height:5px;background-color:#f8b62d;border:none;border-radius:50%;content:'';box-sizing:border-box;}

@media screen and (max-width: 1300px) {
	.sec_left {float:none;}
	.sec_right {float:none;}
	.edudata_box_wrap {width:100%;}	
	.info_box_wrap {width:500px; margin: 30px auto;}
	
	.info_inbox {min-height: auto; padding:40px;}
}	

@media screen and (max-width: 980px) {
	.edudata_box_wrap .edudata_box {flex-wrap: wrap;}
	.edudata_box_wrap .column {width:100%;}
	.edudata_inbox {min-height:250px;}
		
	.info_box_wrap {width:100%;}
	.Tel_nb {display: block;}
}	

@media screen and (max-width: 768px) {	
	.edudata_inbox .title {font-size:36px; line-height:40px;}
}	

@media screen and (max-width: 540px) {
	.edudata_inbox .title {font-size:34px; line-height:40px;}	
}	
@media screen and (max-width: 500px) {
	.edudata_inbox {padding:50px 30px;}
	.edudata_box_wrap .column:nth-child(2) .edudata_inbox .title {font-size:30px; line-height:34px;}
	.b1.more {padding:8px; width:180px; line-height:30px; font-size:16px;}
}

@media screen and (max-width: 480px) {
	.edudata_box_wrap .edudata_box .bg01:before {bottom: 1px;right: -6px;width:225px;height:196px;background-size: 100%;}
	.edudata_box_wrap .edudata_box .bg02:before {top:0px; right:0; width:175px; height:158px; background-size: 100%;}
	.edudata_box_wrap .edudata_box .bg02:after {bottom:20px; right:20px; width:182px; height:130px; background-size: 100%;}	
}

@media screen and (max-width: 420px) {
	.edudata_inbox .title {font-size:30px; line-height:36px;}
	.edudata_box_wrap .column:nth-child(2) .edudata_inbox .title {font-size:28px; line-height:32px;}
	.edudata_box_wrap .edudata_box .bg01:before {bottom: -19px; right: -28px; background-size: 90%;}
	.edudata_box_wrap .edudata_box .bg02:after {bottom:26px; right:-16px; background-size: 85%;}	
	.b1.more {width:160px;}
}

@media screen and (max-width: 360px) {	
	.edudata_box_wrap .column:nth-child(2) .edudata_inbox .title {font-size:24px; line-height:30px;}
	.edudata_box_wrap .edudata_box .bg01:before {bottom: -39px; right: -50px; background-size: 80%;}
	.edudata_box_wrap .edudata_box .bg02:before {top:0px; right:-35px;background-size: 80%;}
	.b1.more {margin-top:30px;  font-size:15px;}
	
	.info_tit {font-size: 25px;}
}