/**
 * @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:40px; background:#c5d87f url("../images/main/visual_bg.jpg"); }

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

.visual .visual_item {position:relative; height:712px; }
.visual .visual_item .visual_background {display:block; position:absolute; bottom:0; left:0; width:100%; height:100%; 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:15%; left: calc(50% - 680px); width:auto; height:auto;}
.visual .visual_item .visual_txt .big_title {font-size:55px; line-height:1; font-family:'TwayAir'; color:#282828; margin-bottom:30px; letter-spacing:-1px; }
.visual .visual_item .visual_txt .small_text {font-size:26px; line-height:36px; font-family: 'SCoreDream'; font-weight:400; letter-spacing:-1px; color:#444; margin-left: 24px;}


@media screen and (max-width: 1280px) {
	.visual .visual_item {height:550px; padding-top:76px;}
	.visual .visual_item .visual_background {bottom:0; left:0; width:100%; height:100%; background-size: cover;}
	.visual .visual_item .visual_txt {left:2%;}	
}

@media all and (max-width: 1024px) {
	.visual .visual_item {height:500px;}
	.visual .visual_item .visual_txt {left:6%;}
	.visual .visual_item .visual_txt .big_title {font-size: 46px; margin-bottom: 26px; }
	.visual .visual_item .visual_txt .small_text {font-size: 21px; line-height: 28px; }	
}

@media all and (max-width: 820px) {
	.visual .visual_item {height:450px;}
	.visual .visual_item .visual_txt .big_title {font-size: 42px; margin-bottom: 22px; }
	.visual .visual_item .visual_txt .small_text {font-size: 20px; line-height: 28px; margin-left: 20px;}		
}

@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;}
	.visual .visual_item .visual_txt .small_text {font-size: 18px; line-height: 24px;  margin-left: 18px;}	
}	

@media all and (max-width: 540px) {
	.visual {padding-top:40px;}
	.visual .visual_item {height:300px;}
	.visual .visual_item .visual_txt {top:20px;}
	.visual .visual_item .visual_txt .big_title {font-size: 30px; margin-bottom: 10px;}
	.visual .visual_item .visual_txt .small_text {font-size: 16px; line-height: 24px;  margin-left: 14px;}	
}	

@media all and (max-width: 480px) {	
	.visual .visual_item {height:250px;}
	.visual .visual_item .visual_txt {top:10px;}	
	.visual .visual_item .visual_txt .big_title {font-size: 24px; margin-bottom: 10px;}
	.visual .visual_item .visual_txt .small_text {font-size: 15px; line-height: 24px; margin-left: 12px; text-shadow: 0 0 20px rgba(255, 255, 255, 0.6); }	
}

/****** 공지사항 ******/
.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:600; font-size: 3.2rem; 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;}

/* 교육자료 바로가기 영역 */
ul.row {display:flex;gap:40px;flex-wrap: wrap;}
ul.row > li {width: calc((100% - 120px) / 4);}
ul.row > li:nth-child(2n) {margin-top:52px;}
ul.row > li .qv_inbox {position:relative; display:block; text-decoration:none; min-height:345px; padding:54px 80px 54px 40px ; border-radius:40px 40px 40px 120px; box-sizing:border-box; background-color:#ffe8e8;}
ul.row > li .qv_inbox:before {content:''; display:block; position:absolute; bottom:10px; right:25px; width:100px; height:100px; transition:.3s; background:url(../images/main/main_quick_icon.png) no-repeat;}
ul.row > li .qv_inbox.qv01:before {background-position:-100px 0px;} 
ul.row > li .qv_inbox.qv02:before {background-position:-200px 0px;}
ul.row > li .qv_inbox.qv03:before {background-position:-300px 0px;}

ul.row > li:nth-child(2n+1) .qv_inbox {border-radius:40px 120px 40px 40px;  background-color:#e2ecbf;}
ul.row > li .qv_inbox .tit {display: block; margin-bottom:15px; color:#474747; font-size:2.6rem;  font-family: 'SCoreDream'; line-height:36px; font-weight: 600; }
ul.row > li .qv_inbox .txt {font-size:1.6rem;  font-family: 'SCoreDream'; color:#474747; line-height:26px; font-weight: 400; margin-bottom:25px; }


.b1.more {position:relative; display:block; padding:0px 18px; width:102px; line-height:36px; box-sizing:border-box; border-radius:18px; font-size:1.4rem; font-family: 'SCoreDream'; font-weight:500; background-color:#fff;  color:#474747;}
.b1.more:after {position:absolute; content:""; display:block; top:50%; right:20px; margin-top:-7px; width:8px; height:12px; background:url(../images/main/main_arrow.png) no-repeat;}

@media screen and (max-width: 1024px) {
	ul.row {gap:30px;}
	ul.row > li {width: calc((100% - 30px) / 2);}
	ul.row > li:nth-child(2n) {margin-top: 0;}
}	

@media screen and (max-width: 540px) {
	ul.row > li {width: 100%;}
	ul.row > li .qv_inbox  {min-height: 245px; border-radius:40px; padding: 54px 40px 54px 40px;}	
	ul.row > li:nth-child(2n+1) .qv_inbox {border-radius:40px; }
	ul.row > li .qv_inbox .tit {margin-bottom: 10px;  font-size: 2.2rem; line-height: 28px; }
	ul.row > li .qv_inbox .txt {font-size: 1.3rem; line-height: 22px; margin-bottom: 20px;}
}