@charset "utf-8";

/********************************************************
	Common
********************************************************/

#wrap .inner-wrap {background:transparent;}
#m_conts {background:url(../img/main/bak_section01.png) no-repeat top 0 left 50%, linear-gradient(180deg,rgba(255, 255, 255, 1) 0%,rgba(248, 248, 248, 1) 115.7rem,rgba(248, 248, 248, 1) 231.5rem,rgba(255, 255, 255, 1) 100%);}


.mainSection {padding:5.5rem 4rem;}
.mainSection .inner {max-width:156.4rem;}

@media all and (max-width:1024px) {
	.mainSection {padding-left:2rem; padding-right:2rem; padding-top:4rem; padding-bottom:4rem;}
}

.btnSearch {display:block; position:relative; width:8rem; height:7.8rem; text-indent:-999px; overflow:hidden; background:url(../img/main/btn_search_off.svg) no-repeat 50% 50%; background-size:contain;}
.btnSearch:hover,
.btnSearch:focus {background-image:url(../img/main/btn_search_on.svg);}

.mainSection .control {display:flex!important; flex-wrap:nowrap; align-items:center;}
.mainSection .pager {width:auto; margin-right:1.9rem;}
.mainSection .pager .swiper-pagination-bullet + .swiper-pagination-bullet {margin-left:1.9rem;}
.mainSection .swiper-pagination-bullet {width:1rem; height:4.4rem; background:url(../img/main/spr_slider_control.svg) no-repeat 0 0; background-size:auto 100%; text-indent:-999px; overflow:hidden; opacity:1 !important; border-radius:0;}
.mainSection .swiper-pagination-bullet-active {width:1.6rem; background-position-x:-5.8rem;}
.mainSection .control .stop,
.mainSection .control .play {display:block; position:relative; width:2.4rem; height:4.4rem;  background:url(../img/main/spr_slider_control.svg) no-repeat 0 0; background-size:auto 100%; text-indent:-999px; overflow:hidden;}
.mainSection .control .stop {background-position-x:-18.1rem;}
.mainSection .control .play {background-position-x:-14.8rem; display:none;}

.mainSection .sec-title {display:flex; flex-wrap:nowrap; align-items:end; -ms-flex-align:end;}
.mainSection .sec-title > * {display:block; position:relative;}
.mainSection .sec-title strong {font-weight:900; font-size:5rem; margin-right:3.5rem; padding-right:8rem;}
.mainSection .sec-title strong i {display:block; position:absolute; width:6rem; height:6rem; background:no-repeat 50% 50%; background-size:contain; right:0; top:50%; margin-top:-3rem;}
.mainSection .sec-title span {font-size:2rem; color:#555555; font-family:'GmarketSans','Malgun gothic', '맑은고딕', sans-serif;}

@media all and (max-width:1024px) {
	.mainSection .sec-title {display:block; text-align:center;}
	.mainSection .sec-title strong {display:inline-block; margin-right:0; margin-bottom:2rem; padding-top:5rem; padding-right:0;}
	.mainSection .sec-title strong i {right:auto; left:50%; top:0; margin:-3rem 0 0 -3rem;}
}

@media all and (max-width:640px) {
	.mainSection .sec-title strong {font-size:4rem;}
}

.mainSection .more {display:block; position:relative; width:11.8rem; height:4.4rem; text-indent:-999px; overflow:hidden; background:url(../img/main/spr_slider_control.svg) no-repeat 100% 0; background-size:auto 100%;}
.mainSection .control .more {margin-left:3rem;}
.mo-control-more {margin-top:2rem; text-align:center;}
.mo-control-more .more {margin:0 auto;}

.ani-rotate {animation:rotate360 5s linear infinite; -webkit-animation:rotate360 5s linear infinite;}
.ani-bounce {animation:hop 0.8s ease-in-out infinite; -webkit-animation:hop 0.8s ease-in-out infinite; transform-origin:bottom; -webkit-transform-origin:bottom;}



/********************************************************
	Section01
********************************************************/

.mainIntroWrap {padding-top:8.6rem;}
.mainIntroWrap .inner {display:flex; flex-wrap:end; flex-wrap:nowrap; justify-content:space-between; flex-direction:row-reverse;}

@media all and (max-width:1024px) {
	.mainIntroWrap {padding-top:6rem;}
	.mainIntroWrap .inner {display:block;}
}

.mainSearch {display:block; position:relative; width:93.4rem; max-width:calc(100% - 53rem);}
.mainSearch h3 {display:block; position:relative; padding-top:3.9rem; margin-bottom:4.5rem;}
.mainSearch h3 > * {display:block; position:relative; word-break:keep-all;}
.mainSearch h3 span {font-size:3rem; margin-bottom:2.2rem;}
.mainSearch h3 strong {font-size:5.4rem;}
.mainSearch h3 strong em {font-weight:900; color:inherit;}
.mainSearch .form {display:flex; flex-wrap:nowrap; justify-content:space-between; align-items:center; margin-bottom:3.7rem; max-width:78.8rem;}
.mainSearch .form input[type="text"] {display:block; position:relative; width:calc(100% - 9rem); height:7.6rem; background:#fff; border:2px solid #222; border-radius:1rem; padding:0 3.7rem; font-size:1.8rem;}
.mainSearch .form input[type="text"]::placeholder {color:#666;}

@media all and (max-width:1024px) {
	.mainSearch {width:auto; max-width:100%;}
	.mainSearch h3 {padding-top:0; text-align:center;}
	.mainSearch .form {margin:0 auto 3rem;}
	.mainSearch .control {justify-content:center; margin-bottom:2rem;}
}

.mainPopup {display:block; position:relative; width:48.4rem;}
.mainPopup:before {content:""; display:block; position:absolute; top:1rem; left:1rem; right:-1rem; bottom:-1rem; border-radius:2rem; background:rgba(0,0,0,.05); z-index:0;}
.mainPopup .slider {position:relative; overflow:hidden; border-radius:2rem; border:2px solid #222; z-index:1;}
.mainPopup .slider .swiper-slide > * {display:block; position:relative; background:#F9F9F9; overflow:hidden;}
.mainPopup .slider .swiper-slide > *:after {content:""; display:block; position:relative; padding-top:95.83%;}
.mainPopup .slider .swiper-slide > * img {display:block; position:absolute; width:100%; top:50%; left:0; transform:translateY(-50%); -webkit-transform:translateY(-50%);}

@media all and (max-width:1024px) {
	.mainSearch h3 strong {font-size:4.5rem; line-height:5.5rem;}
	
	.mainPopup {width:auto; margin:0;}
	.mainPopup:before {display:none;}
	.mainPopup .slider {border-radius:0; border:none; overflow:visible;}
	.mainPopup .swiper-container {overflow:visible;}
	.mainPopup .swiper-slide {padding:0; width:48rem; max-width:100%; margin:0 auto!important;}
	.mainPopup .swiper-slide:before {content:""; display:block; position:absolute; top:1rem; left:1rem; right:-1rem; bottom:-1rem; border-radius:2rem; background:rgba(0,0,0,.05); z-index:0;}
	.mainPopup .swiper-slide > * {border-radius:2rem; border:2px solid #222;}
}


/********************************************************
	Section02
********************************************************/

.mainAppWrap {position:relative;}
.mainAppWrap:before {content:""; display:block; position:absolute; width:44.5rem; height:36.2rem; background:url(../img/main/bak_section02.png) no-repeat 50% 50%; background-size:contain; left:50%; margin-left:-2.5rem; top:0;}
.mainAppWrap:before {-webkit-animation:orbit 5s linear infinite; animation:orbit 5s linear infinite; display:inline-block;}

.mainAppWrap .inner {position:relative;}
.mainAppWrap .sec-title {margin-bottom:5rem;}
.mainAppWrap .sec-title strong i {background-image:url(../img/main/img_title_obj01.svg);}
.mainAppWrap .control {position:absolute; top:.3rem; right:0; left:72rem; -ms-flex-pack:end; justify-content:end;}


.mainApply .slider {margin-right:-1rem;}
.mainApply .swiper-slide {width:37rem; height:47.2rem; padding-right:1rem;}
.mainApply .swiper-slide > a {display:block; position:absolute !important; bottom:1rem; left:0; right:1rem; top:17.7rem; background:linear-gradient(to bottom, #FAF4EE 0%, #FAF4EE 50%, #FFFFFF 50%, #FFFFFF 100%); border-radius:1rem; border:2px solid #222; transition:.3s top, .3s background; -webkit-transition:.3s top, .3s background;}
.mainApply .swiper-slide > a:after {content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.05); border-radius:1rem; z-index:-1; transition:.3s all; -webkit-transition:.3s all;}

.mainApply .swiper-slide .thumb {display:block; position:absolute; bottom:0; width:30rem; height:40rem; left:50%; margin-left:-15rem; background:#F9F9F9; border:1px solid rgba(0,0,0,.2); overflow:hidden; transition:.3s all; -webkit-transition:.3s all; z-index:0;}
.mainApply .swiper-slide .thumb img {display:block; position:absolute; left:0; top:0; width:100%;}

.mainApply .swiper-slide .thumb .cate {display:block; position:absolute; top:2rem; left:2rem; z-index:1; color:#222 !important; font-weight:400; background:#fff; border:2px solid #222; font-size:1.5rem; padding:.3rem 1.5rem 0; line-height:1.4em; border-radius:.5rem;}
.mainApply .swiper-slide .thumb .cate.ty1 {color:#00AB4E !important; border-color:#00AB4E;}
.mainApply .swiper-slide .thumb .cate.ty2 {color:#3F98D9 !important; border-color:#3F98D9;}
.mainApply .swiper-slide .thumb .cate.ty3 {color:#E91672 !important; border-color:#E91672;}
.mainApply .swiper-slide .thumb .cate.ty4 {color:#16469E !important; border-color:#16469E;}
.mainApply .swiper-slide .thumb .cate.ty5 {color:#F55050 !important; border-color:#F55050;}

.mainApply .swiper-slide .desc {position:absolute; left:0; right:0; height:19.6rem; bottom:0; padding:10.2rem 2rem 2.5rem; overflow:hidden; transition:.3s all; -webkit-transition:.3s all;}
.mainApply .swiper-slide .desc:before,
.mainApply .swiper-slide .desc:after {content:""; display:block; position:absolute; z-index:0;}
.mainApply .swiper-slide .desc:before {left:0; right:0; height:10rem; top:0; background:url(../img/main/img_apply_item_deco.png) no-repeat top center; background-size:100% 100%;}
.mainApply .swiper-slide .desc:after {left:1rem; right:1rem; top:9rem; bottom:0; background:#fff;}
.mainApply .swiper-slide .desc > * {display:block; position:relative; text-align:center; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; z-index:1;}
.mainApply .swiper-slide .desc .state {display:block; position:absolute; top:.9rem; right:1.7rem; width:8.3rem; height:4.8rem; line-height:4.5rem; background:url(../img/main/ico_end.svg) no-repeat 50% 50%; background-size:contain; color:#fff; font-weight:800;}
.mainApply .swiper-slide .desc .subj {font-size:2rem; font-weight:400; color:#222; margin-bottom:1.5rem;}
.mainApply .swiper-slide .desc .date {font-size:1.6rem; color:#888;}
.mainApply .swiper-slide .desc .date em {position:relative; font-weight:400; color:#666; padding-left:2.8rem; margin-right:1rem;}
.mainApply .swiper-slide .desc .date em:before {content:""; display:block; position:absolute; left:0; top:50%; width:2rem; height:2rem; margin-top:-1rem; background:url(../img/main/ico_date.svg) no-repeat 50% 50%; background-size:contain;}
.mainApply .swiper-slide .desc .detail {display:flex; flex-wrap:nowrap; align-items:center; justify-content:center; height:5.5rem; position:absolute; border-top:1px solid rgba(0,0,0,.2); text-align:center; bottom:0; left:0; right:0; opacity:0; visibility:hidden; transform:translateY(100%); -webkit-transform:translateY(100%); transition:.3s all; -webkit-transition:.3s all;}
.mainApply .swiper-slide .desc .detail:after {content:""; display:block; position:relative; width:1.8rem; height:1.8rem; margin-top:-.2rem; background:url(../img/main/ico_arrow_left.png) no-repeat 50% 0; background-size:contain; margin-left:1.2rem;}

.mainApply .swiper-slide > a:hover,
.mainApply .swiper-slide > a:focus {top:14.2rem; background:linear-gradient(to bottom, #FFECF4 0%, #FFECF4 50%, #FFFFFF 50%, #FFFFFF 100%);}
.mainApply .swiper-slide > a:hover:after,
.mainApply .swiper-slide > a:focus:after {top:1rem; left:1rem;}
.mainApply .swiper-slide > a:hover .thumb,
.mainApply .swiper-slide > a:focus .thumb {bottom:6rem;}
.mainApply .swiper-slide > a:hover  .desc,
.mainApply .swiper-slide > a:focus  .desc {height:21.8rem; padding-top:8.1rem;}
.mainApply .swiper-slide > a:hover  .desc .detail,
.mainApply .swiper-slide > a:focus  .desc .detail {transform:translateY(0); -webkit-transform:translateY(0); opacity:1; visibility:visible;}
.mainApply .swiper-slide > a:hover  .desc .subj,
.mainApply .swiper-slide > a:focus  .desc .subj {font-weight:800;}


@media all and (max-width:1024px) {
	.mainAppWrap .control {position:relative; top:auto; right:auto; left:auto; justify-content:center;}
	.mainAppWrap .slider .swiper-container {margin-left:-2rem; margin-right:-2rem; padding:0 2rem;}
}


/********************************************************
	Section02-2
********************************************************/

.mainCustomWrap {position:relative; z-index:1;}
.mainCustomWrap .inner {display:flex; justify-content:space-between; align-items:center;}
.mainCustomWrap h3 {display:block; position:relative; padding-right:7.5rem; margin-right:2.5rem;}
.mainCustomWrap h3:after {content:""; display:block; position:absolute; top:50%; right:0; margin-top:-3rem; width:6rem; height:6rem; background:url(../img/main/img_title_obj04.svg) no-repeat 50% 50%; background-size:contain; -webkit-animation:float 2s ease-in-out infinite; animation:float 2s ease-in-out infinite;}
.mainCustomWrap h3 strong {display:block; position:relative; border-radius:9em; border:.2rem solid #222; font-size:2rem; color:#222; font-weight:800; padding:2rem 4.5rem;}
.mainCustomWrap .dash {width:18rem; max-width:calc(100% - 93rem - 25rem); height:2px; background:rgba(0,0,0,.1);}
.mainCustomSearch fieldset {display:flex; align-items:center;}
.mainCustomSearch fieldset select {width:40rem; height:8rem; margin-right:2.5rem; border:1px solid rgba(0,0,0,.1); border-radius:1rem; padding:0 5.3rem 0 3.3rem; font-size:2rem; -webkit-appearance:none; -moz-appearance:none; appearance:none; background:url(../img/main/ico_arrow_down.svg) no-repeat top 50% right 3.3rem; background-size:2rem auto; background-color:#fff;}
.mainCustomSearch fieldset select::-ms-expand{display:none;}

@media all and (max-width:1620px) {
	.mainCustomWrap .dash {display:none;}
}
@media all and (max-width:1024px) {
	.mainCustomWrap .inner {display:block;}
	.mainCustomWrap h3 {margin-right:0; margin-bottom:2rem; border:2px solid #222; border-radius:1rem; padding:2.5rem 3rem;}
	.mainCustomWrap h3 strong {border-radius:0; border:none; padding:0;}
	.mainCustomSearch fieldset {justify-content:space-between;}
	.mainCustomSearch fieldset select {width:calc(48% - 4rem); padding:0 3rem 0 2rem; background-position:top 50% right 1rem;}
}
@media all and (max-width:640px) {
	.mainCustomSearch fieldset {flex-wrap:wrap;}
	.mainCustomSearch fieldset select {width:100%; margin:0 0 1rem;}
	.mainCustomSearch fieldset select ~ select {width:calc(100% - 9rem); margin:0;}

}


/********************************************************
	Section03 : Calendar
********************************************************/

.mainCalendarWrap {position:relative; z-index:0;}
.mainCalendarWrap:before {content:""; display:block; position:absolute; width:35.6rem; height:38.2rem; background:url(../img/main/bak_section03.png) no-repeat 50% 50%; background-size:contain; top:0; right:50%; margin-right:-78.2rem; z-index:-1;}
.mainCalendarWrap:before {-webkit-animation:orbit 5s linear infinite; animation:orbit 5s linear infinite; display:inline-block;}
.mainCalendarWrap:after {content:""; display:block; position:absolute; top:-15.6rem; left:0; right:0; height:123.4rem; background:url(../img/main/bak_section03_pattern.png) no-repeat top center; z-index:-2;}
.mainCalendarWrap .sec-title {margin-bottom:7.5rem;}
.mainCalendarWrap .sec-title strong i {background-image:url(../img/main/img_title_obj02.svg);}

.mainCalnedar {display:block; position:relative; margin:0 -4rem; z-index:0;}
.mainCalnedar:before {content:""; display:block; position:absolute; top:1.4rem; right:-1.4rem; bottom:-1.4rem; left:1.4rem; background:rgba(0,0,0,.1);border-radius:2rem;}
.mainCalnedar:after {content:""; display:block; position:absolute; left:6rem; right:6rem; top:-2.5rem; height:5.9rem; background:url(../img/main/img_calendar_deco.svg) no-repeat top left, url(../img/main/img_calendar_deco.svg) no-repeat top right; background-size:auto 100%;  z-index:2;}
.mainCalnedar .inside {display:block; position:relative; background:#F8F8F8; z-index:1; border-radius:2rem; border:2px solid #222; padding:6rem 3rem 3.4rem; overflow:auto;}
.mainCalnedar .inside .cal {display:block; position:relative;}
.mainCalnedar .inside table {width:100%; table-layout:fixed; border-collapse:separate; border-spacing:1rem 0; position:relative; z-index:1;}
.mainCalnedar .inside table thead th {position:relative; width:calc(100% / 6); height:5rem; border:1px solid #333; background:#fff; border-radius:1rem; padding-top:.3rem; vertical-align:middle;}
.mainCalnedar .inside table thead th span {display:block; position:absolute; font-size:1.2rem; color:#999999; top:1rem; right:.7rem; width:2rem; text-align:center;}
.mainCalnedar .inside table thead th strong {font-family:'Montserrat'; font-size:1.6rem; font-weight:600;}
.mainCalnedar .inside table thead tr > th.on {background:#222222; border-color:#222222; color:#fff;}
.mainCalnedar .inside table tbody {margin:2rem 0;}
.mainCalnedar .inside table tbody td {padding:.5rem 1.7rem;}
.mainCalnedar .inside table tbody td.blank {height:3.2rem;}
.mainCalnedar .inside table tbody td a {display:block; position:relative; border-radius:.5rem; padding:.5rem 1rem; line-height:1.4; word-break:keep-all; font-size:1.4rem; color:#333; font-family:'NanumSquareNeo','Malgun gothic', '맑은고딕', sans-serif; text-align:center; background:#ccc;}
.mainCalnedar .inside table tbody td a + a {margin-top:1rem;}

.mainCalnedar .inside table tbody td a.ty1 {background:#F4EAED;}
.mainCalnedar .inside table tbody td a.ty2 {background:#F0F2DB;}
.mainCalnedar .inside table tbody td a.ty3 {background:#FFE8CC;}

.mainCalnedar .inside .bak-box {display:flex; justify-content:space-between; padding:6.2rem 1rem 1rem; position:absolute; top:0; left:0; right:0; bottom:0;}
.mainCalnedar .inside .bak-box > * {display:block; position:relative; height:100%; width:calc((100% / 6) - 1rem); background:#fff; border-radius:1rem;}


@media all and (max-width:1760px) {
	.mainCalnedar {margin:0;}
}
@media all and (max-width:1024px) {
	.mainCalnedar .inside {padding:5rem 2rem 2rem;}
	.mainCalnedar .inside table tbody td {padding:.5rem 1rem;}
	.mainCalnedar .inside table tbody td.blank {height:2rem;}
}
@media all and (max-width:680px) {
	.mainCalendarWrap .sec-title {margin-bottom:5rem;}
	.mainCalnedar .inside {padding:5rem 1rem 1rem;}
	.mainCalnedar .inside .cal {min-width:70rem;}
	.mainCalnedar:after {left:2rem; right:2rem; height:3rem; top:-1.3rem;}
}


/********************************************************
	Section04 : Board
********************************************************/

.mainBoardWrap {position:relative; z-index:0;}
.mainBoardWrap .sec-title {margin-bottom:5rem;}
.mainBoardWrap .sec-title strong i {background-image:url(../img/main/img_title_obj03.svg);}

.mainBoardWrap .inner {position:relative;}
.mainBoardWrap .more {position:absolute; top:0; right:0;}

.mainBoardWrap .list {display:flex; flex-wrap:wrap; justify-content:space-between;}
.mainBoardWrap .list > * {display:block; position:relative; width:calc(50% - 2rem); margin-bottom:3rem;}

.mainBoardWrap .list a {display:block; position:relative; padding:4rem 12rem 4rem 6rem; border-radius:1rem; z-index:0;}
.mainBoardWrap .list a:before,
.mainBoardWrap .list a:after {content:""; display:block; top:0; left:0; position:absolute; width:100%; height:100%; border-radius:1rem;}
.mainBoardWrap .list a:before {background:url(../img/main/ico_link.svg) no-repeat top 50% right 4rem #fff; z-index:-1; box-shadow:1rem 1rem 3rem 0 rgba(0,0,0,.04);}
.mainBoardWrap .list a:after {opacity:0; background:rgba(0,0,0,.1); transition:.3s all; -webkit-transition:.3s all; z-index:-2;}

.mainBoardWrap .list a .subj {display:block; position:relative; white-space:nowrap; line-height:1.5; margin-bottom:2rem; overflow:hidden; text-overflow:ellipsis; font-size:2rem; font-weight:400; color:#333;}
.mainBoardWrap .list a .subj .new {display:inline-block; position:relative; width:7.3rem; height:3rem; background:url(../img/main/ico_new.svg) no-repeat 50% 50%; background-size:contain; text-indent:-999px; vertical-align:middle;}
.mainBoardWrap .list a .date {display:block; position:relative; font-size:1.6rem; color:#888888; padding-left:3rem; font-family:'Montserrat';}
.mainBoardWrap .list a .date:before {content:""; display:block; position:absolute; width:2rem; height:2rem; background:url(../img/main/ico_date.svg) no-repeat 50% 50%; background-size:contain; left:0; top:50%; margin-top:-1rem;}

.mainBoardWrap .list a:focus:before,
.mainBoardWrap .list a:hover:before {border:2px solid #222; box-shadow:none;}
.mainBoardWrap .list a:focus:after,
.mainBoardWrap .list a:hover:after {top:1rem; left:1rem; opacity:1;}

.mainBoardWrap .list a:focus .subj,
.mainBoardWrap .list a:hover .subj {font-weight:800; color:#222;}

.mainBoardWrap .no-data {width:100%; text-align:center; border-radius:1em; border:1px dashed #ddd; padding:2em 1em;}
.mainBoardWrap .no-data p {margin-top:1em; color:#666}

@media all and (max-width:1024px) {
	.mainBoardWrap .list  {display:block;}
	.mainBoardWrap .list > * {width:auto;}
	.mainBoardWrap .list a {padding:2.5rem 9rem 2.5rem 2.5rem;}
	.mainBoardWrap .list a:before {background-position:top 50% right 2.5rem; background-size:5rem auto;}
	.mainBoardWrap .list a .subj {margin-bottom:1.2rem;}
	.mainBoardWrap .more {position:relative; margin:2rem auto 0;}
}
@media all and (max-width:460px) {
	.mainBoardWrap .list a {padding:2.5rem;}
	.mainBoardWrap .list a:before {background:#fff;}
}