@charset "utf-8";
#mcontainer-wrap {position:relative;width:100%;font-size:18px;}
#mcontainer {word-break:keep-all;padding-bottom:0}
#mcontainer img {font-size:0}
h3,h4,h5 {font-weight:500}

@media all and (max-width:999px){
	#mcontainer-wrap {font-size:17px;}
}
@media all and (max-width:768px){
	#mcontainer-wrap {font-size:16px;}
}
@media all and (max-width:599px) {
	#mcontainer-wrap {font-size:15px}
}

/* ==============================
 * 메인비쥬얼
================================= */
/* 메인비쥬얼 */
.msec01 {position:relative;width:100%;}
.msec01:before {display:block;content:'';position:absolute;bottom:0;right: calc(50% - 220px);width:100%;height:150%;background:#066c70;border-radius:0 0 100px 0;z-index:-1;}
.mVisual-wr {position:relative;width:100%;padding-left: calc(50% - 160px);box-sizing:border-box;}

.mVisual-wr #mVisual {padding:70px 0 75px 40px;}
.mVisual-wr .dataList .swiper-slide {}
.mVisual-wr .dataList .swiperBox {width:100%;box-sizing:border-box;}
.mVisual-wr .dataList .imgBox {position:relative;width:100%;height:450px;border-radius:30px;overflow:hidden;box-shadow:0 20px 30px rgba(0,0,0,0.2);}
.mVisual-wr .dataList .imgBox img {position:absolute;top:0;left:50%;width:auto;min-width:100%;height:100%;transform:translateX(-50%);border-radius:30px;}
.mVisual-wr .dataList .txtBox {display:none !important;}
.mVisual-wr .pTxt1 {display:none;}
.mVisual-wr .pTxt2 .t1 {display:block;color:#fff;font-size:16px;font-weight:700;letter-spacing:-0.02em;line-height:1.167em;font-family: "pretendard", sans-serif;opacity:0;transform:translateY(30px);transition:all .3s ease-out;}
.mVisual-wr .pTxt2 .t2 {display:block;color:#fff;font-size:36px;line-height:1.2em;padding-top:20px;font-family: "atoz", sans-serif;opacity:0;transform:translateY(30px);transition:all .3s ease-out .1s; font-weight: 700; }
.mVisual-wr .pTxt2 .t3 {display:block;color:#fff;font-size:24px;line-height:1.2em;padding-top:20px;font-family: "atoz", sans-serif;opacity:0;transform:translateY(30px);transition:all .3s ease-out .2s;}

.mVisual-wr .data-ctrl {position:absolute;top:0;left:50%;width:1400px;height:100%;transform:translateX(-50%);display:flex;flex-direction:column;justify-content:space-between;z-index:2;}
.mVisual-wr .mVisual-txt-box {width:450px;padding-top:135px;}

.mVisual-wr .data-pkgs {display:flex;padding-bottom:115px;}
.mVisual-wr .data-pkgs.hide {display:none;}
.mVisual-wr .data-pkgs button {position:relative;width:56px;height:56px;border:3px solid #313742;background:#313742;border-radius:50%;transition:all .3s ease;}
.mVisual-wr .data-pkgs .btn-prev:before,
.mVisual-wr .data-pkgs .btn-next:before {display:block;content:'';position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;width:25px;height:2px;background:#fff;transition:all .3s ease;}
.mVisual-wr .data-pkgs .btn-prev:after,
.mVisual-wr .data-pkgs .btn-next:after {display:block;content:'';position:absolute;top:0;bottom:0;left:50%;margin:auto 0;width:9px;height:9px;border-bottom:2px solid #fff;border-right:2px solid #fff;transform:rotate(-45deg);transition:all .3s ease;}
.mVisual-wr .data-pkgs .btn-prev:after {margin-left:-13px;transform:rotate(135deg);}
.mVisual-wr .data-pkgs .data-auto {display:flex;padding:0 6px;}
.mVisual-wr .data-pkgs .data-auto button {background:#fff;}
.mVisual-wr .data-pkgs .data-auto button:before {content:"";display:block;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}
.mVisual-wr .data-pkgs .data-auto .btn-stop:before {content:"";display:block;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;border:3px solid #313742;border-top:0;border-bottom:0;width:5px;height:15px;}
.mVisual-wr .data-pkgs .data-auto .btn-play {display:none}
.mVisual-wr .data-pkgs .data-auto .btn-play:before {content:"";display:block;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;border-width:7px 0 7px 10px;border-style:solid;border-color:transparent;border-left-color:#313742;width:0;height:0}

.mVisual-wr .mVisual-txt-box.mvisual-on .pTxt2 .t1,
.mVisual-wr .mVisual-txt-box.mvisual-on .pTxt2 .t2,
.mVisual-wr .mVisual-txt-box.mvisual-on .pTxt2 .t3 {opacity:1;transform:translateY(0)}

@keyframes txtUp {
  from {
    -webkit-transform:translate3d(0, 110%, 0);
    transform:translate3d(0, 110%, 0);
    visibility:visible;
    opacity:0;
  }
  to {
    -webkit-transform:translate3d(0, 0, 0);
    transform:translate3d(0, 0, 0);
    opacity:1;
  }
}

@media all and (max-width:1439px) {
	.mVisual-wr {padding-left:40%;}
	.mVisual-wr #mVisual {padding-left:20px;}
	.mVisual-wr .data-ctrl {left:20px;width: calc(100% - 40px);transform:none;}
	.mVisual-wr .mVisual-txt-box {width: calc(40% - 40px);padding-top:90px;}
	.mVisual-wr .data-pkgs {padding-bottom:75px;}
}
@media all and (max-width:1399px) {
	.mVisual-wr .mVisual-txt-box br {display:none}
}
@media all and (max-width:999px) {
	.mVisual-wr #mVisual {padding:40px 0 40px 0px;}
	.mVisual-wr .dataList .imgBox {height:350px;box-shadow:0 0 20px rgba(0,0,0,0.2);}
	.mVisual-wr .dataList .imgBox img {min-width:initial;}
	.mVisual-wr .pTxt2 .t1 {font-size:16px;;}
	.mVisual-wr .pTxt2 .t2 {font-size:29px;padding-top:15px;}
	.mVisual-wr .pTxt2 .t3 {font-size:19px;padding-top:15px;}
	.mVisual-wr .mVisual-txt-box {padding-top:50px;}
	.mVisual-wr .data-pkgs {padding-bottom:40px;}
}
@media all and (max-width:699px) {
	.mVisual-wr .dataList .imgBox {height:300px;}
	.mVisual-wr .pTxt2 .t1 {font-size:10px;}
	.mVisual-wr .pTxt2 .t2 {font-size:24px;}
	.mVisual-wr .pTxt2 .t3 {font-size:16px;}
	.mVisual-wr .data-pkgs button {width:35px;height:35px;}
	.mVisual-wr .data-pkgs .btn-prev:before,
	.mVisual-wr .data-pkgs .btn-next:before {width:16px;}
	.mVisual-wr .data-pkgs .btn-prev:after,
	.mVisual-wr .data-pkgs .btn-next:after {width:7px;height:7px;}
	.mVisual-wr .data-pkgs .btn-prev:after {margin-left:-8px;}
}
@media all and (max-width:599px) {
	.msec01:before {right:40px;border-radius:0 0 50px 0;}
	.mVisual-wr {padding:20px 0 20px 20px;}
	.mVisual-wr #mVisual {padding:0;}
	.mVisual-wr .dataList .imgBox {height:auto;}
	.mVisual-wr .dataList .imgBox img {position:relative;top:auto;left:auto;width:100%;height:auto;transform:none;border-radius:0;}

	.mVisual-wr .data-ctrl {position:relative;left:auto;top:auto;transform:none;padding:20px 50px 0 0;display:block;}
	.mVisual-wr .mVisual-txt-box {width:auto;padding-top:0px;}
	.mVisual-wr .data-pkgs {padding-top:20px;padding-bottom:0;}
}
@media all and (max-width:399px) {
	.mVisual-wr .pTxt2 .t2 {font-size:18px;}
	.mVisual-wr .pTxt2 .t3 {font-size:15px;}
}

/* ==============================
 * 메인위젯
================================= */

/** -- mIcban1 */
.msec02 {box-sizing:border-box;max-width:1440px;width:100%;padding:100px 20px 90px 20px;margin:0 auto;}
#mIcban1 {width:100%;}
#mIcban1 .dataLst {display:flex;justify-content: space-between}
#mIcban1 .dataLst > li {display:inline-block;width:31.429%;vertical-align:top;}
#mIcban1 .dataLst a {display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;position:relative;padding:0 25px 0 200px;height:200px;background:#f5f5f5;border:3px solid #f5f5f5;border-radius:100px;transition:all .3s ease;}
#mIcban1 .dataLst a .pIco {display:block;position:absolute;width:150px;height:150px;left:22px;top:50%;background-repeat:no-repeat;background-position:0 0;background-size:cover;border-radius:50%;overflow:hidden;transform:translateY(-50%);}
#mIcban1 .dataLst .n1 a .pIco {background-color:#c8eedc;}
#mIcban1 .dataLst .n2 a .pIco {background-color:#d1d9fc;}
#mIcban1 .dataLst .n3 a .pIco {background-color:#d1e18c;}
#mIcban1 .dataLst a .pIco.icon1 {background-image:url(/resources/_Img/MainModule/micban/l9/ico1.png)}
#mIcban1 .dataLst a .pIco.icon2 {background-image:url(/resources/_Img/MainModule/micban/l9/ico2.png)}
#mIcban1 .dataLst a .pIco.icon3 {background-image:url(/resources/_Img/MainModule/micban/l9/ico3.png)}
#mIcban1 .dataLst a .pIco.icon4 {background-image:url(/resources/_Img/MainModule/micban/l9/ico4.png)}
#mIcban1 .dataLst a .pIco.icon5 {background-image:url(/resources/_Img/MainModule/micban/l9/ico5.png)}
#mIcban1 .dataLst a .pIco.icon6 {background-image:url(/resources/_Img/MainModule/micban/l9/ico6.png)}
#mIcban1 .dataLst a .pIco.icon7 {background-image:url(/resources/_Img/MainModule/micban/l9/ico7.png)}
#mIcban1 .dataLst a .pIco.icon8 {background-image:url(/resources/_Img/MainModule/micban/l9/ico8.png)}
#mIcban1 .dataLst a .pIco.icon9 {background-image:url(/resources/_Img/MainModule/micban/l9/ico9.png)}
#mIcban1 .dataLst a .pIco.icon10 {background-image:url(/resources/_Img/MainModule/micban/l9/ico10.png)}
#mIcban1 .dataLst a .pPkg .sTit,
#mIcban1 .dataLst a .pPkg .sTxt {display:block;line-height:1.2;word-wrap:break-word;word-break:keep-all;white-space:normal;transition:all .3s ease}
#mIcban1 .dataLst a .sTit {font-size:1.333em;font-weight:bold;color:#282d38;}
#mIcban1 .dataLst a .sTxt {font-size:0.833em;color:#0d2456;font-weight:300;margin-top:15px;}
#mIcban1 .dataLst a:focus,
#mIcban1 .dataLst a:hover {background:#fff;border-color:#313742;box-shadow:0 25px 40px rgba(147,152,167,0.25)}

@media all and (max-width:1299px) {
	#mIcban1 .dataLst > li {width:32%;}
	#mIcban1 .dataLst a {padding-left:150px;border-radius:90px;height:180px;}
	#mIcban1 .dataLst a .pIco {width:110px;height:110px;left:18px;}
}
@media all and (min-width:500px) and (max-width:999px) {
	.msec02 {padding-top:40px;padding-bottom:40px;}
	#mIcban1 .dataLst a {padding:150px 20px 20px 20px;border-radius:60px;height:100%;text-align:center;justify-content:flex-start;}
	#mIcban1 .dataLst a .pIco {top:15px;left:50%;transform:translateX(-50%);}
	#mIcban1 .dataLst a .sTxt {margin-top:10px;}
}
@media all and (max-width:499px) {
	.msec02 {padding-top:30px;padding-bottom:30px;}
	#mIcban1 .dataLst {display:block}
	#mIcban1 .dataLst > li {width:100%;margin-bottom:10px;}
	#mIcban1 .dataLst > li:last-child {margin-bottom:0;}
	#mIcban1 .dataLst a {padding:15px 20px 15px 110px;border-radius:90px;height:auto;min-height:100px;}
	#mIcban1 .dataLst a .pIco {width:70px;height:70px;left:15px;}
	#mIcban1 .dataLst a .sTxt {margin-top:10px;}
}

/** -- mTabBoard */
.msec03 {position:relative;box-sizing:border-box;width:100%;padding:70px 20px 90px 20px;margin:0 auto;}
.msec03:before {display:block;content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:#f2facd;border-radius:100px 0 0 0;z-index:-1;}
#mTabBoard {position:relative;height:400px;max-width:1400px;width:100%;margin:0 auto;display:flex;justify-content:flex-end;padding-right:135px;box-sizing:border-box;}
#mTabBoard .dataTit {position:absolute;top:24px;left:67px;font-size:2.222em;color:#282d38;font-family: "atoz", sans-serif;}
#mTabBoard dl {display:inline-block;margin:0;vertical-align:middle}
#mTabBoard dl dt {display:inline-block;}
#mTabBoard dl:last-child dt {padding-left:22px;}
#mTabBoard dl dt a {display:block;width:90px;height:90px;padding:9px;box-sizing:border-box;border-radius:50%;position:relative;transition:all .3s ease;background:#fff;}
#mTabBoard dl dt a span {display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:1.111em;color:#313742;line-height:1.2em;font-family: "atoz", sans-serif;text-align:center;border-radius:50%;background:#fff;box-sizing:border-box;position:relative;transition:all .3s ease}
#mTabBoard dl dt a:focus-visible {outline:rgb(255, 0, 0) solid 3px;}
#mTabBoard dl dd {display:none;}
#mTabBoard .swiper-slide a {display:block;position:relative;box-sizing:border-box;height:290px;padding:40px 40px 30px 40px;background:#fff;border-radius:20px;}
#mTabBoard .swiper-slide a .newMark {display:inline-flex;align-items:center;justify-content:center;width:25px;height:25px;margin-bottom:10px;border-radius:50%;background:#1ba9c5;vertical-align:top;text-align:center;position:relative;top:1px}
#mTabBoard .swiper-slide a .newMark:before {content:"N";display:inline-block;color:#fff;font-size:12px;line-height:1;font-family: "pretendard", sans-serif;}
#mTabBoard .swiper-slide a .s-tit {display:block;font-family:"Noto Sans KR", sans-serif;font-size:1.222em;font-weight:500;color:#333333;line-height:1.182em;width:auto;max-width:100%;height:107px;overflow:hidden;word-wrap: break-word;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;white-space:normal;transition:all .3s ease}
#mTabBoard .swiper-slide a span {text-decoration:none;background-image: linear-gradient(rgba(255, 255, 255,0), rgba(255, 255, 255,0)),linear-gradient(#333333, #333333);background-size: 100% 1px, 0 1px; background-position: 100% 100%, 0 100%;background-repeat: no-repeat;transition: background-size .3s linear;}
#mTabBoard .swiper-slide a .s-date {position:absolute;bottom:30px;left:40px;display:inline-block;font-size:13px;color:#555555;background:#e8e8e8;border-radius:15px;padding:8px 12px;}
#mTabBoard .swiper-slide a:focus .s-tit span,
#mTabBoard .swiper-slide a:hover .s-tit span {background-size: 0 1px, 100% 1px;}
#mTabBoard .swiper-slide.nodata {display:block;position:relative;box-sizing:border-box;height:290px;padding:40px 40px 30px 40px;background:#fff;border-radius:20px;width:100% !important;}

#mTabBoard .dataMore {display:block;position:absolute;right:45px;top:-82px;width:33px;height:33px;transition:all .3s ease}
#mTabBoard .dataMore:before,
#mTabBoard .dataMore:after {content:"";display:block;position:absolute;width:33px;height:5px;background:#0d8ba4;border-radius:3px;top:0;right:0;bottom:0;left:0;margin:auto;transition:all .3s ease}
#mTabBoard .dataMore:before {}
#mTabBoard .dataMore:after {transform:rotate(90deg)}
#mTabBoard .dataMore:focus:before,
#mTabBoard .dataMore:hover:before {transform:rotate(180deg)}
#mTabBoard .dataMore:focus:after,
#mTabBoard .dataMore:hover:after {transform:rotate(270deg)}

#mTabBoard dl.isOn dt a span {color:#0d8ba4;}
#mTabBoard dl.isOn dd {display:block;position:absolute;width:100%;left:0;top:110px;padding:0 65px;box-sizing:border-box;}

#mTabBoard dl dd .data-ctrl button {display:inline-block;position:absolute;top:50%;margin-top:-33px;border:0;width:65px;height:60px;transition:all .3s ease-out;background: rgb(49,163,186);background: -moz-linear-gradient(90deg, rgba(49,163,186,1) 0%, rgba(116,186,133,1) 72%, rgba(171,205,5,1) 100%);background: -webkit-linear-gradient(90deg, rgba(49,163,186,1) 0%, rgba(116,186,133,1) 72%, rgba(171,205,5,1) 100%);background: linear-gradient(90deg, rgba(49,163,186,1) 0%, rgba(116,186,133,1) 72%, rgba(171,205,5,1) 100%);}
#mTabBoard dl dd .data-ctrl button:before {display:block;content:'';position:absolute;top:50%;left:50%;margin-top:-5px;margin-left:-8px;width:17px;height:3px;border-radius:3px;background:#fff;transform:rotate(-45deg);}
#mTabBoard dl dd .data-ctrl button:after {display:block;content:'';position:absolute;top:50%;left:50%;margin-top:5px;margin-left:-8px;width:17px;height:3px;border-radius:3px;background:#fff;transform:rotate(225deg);}
#mTabBoard dl dd .data-ctrl .btn-prev {left:0;border-radius:30px 0 0 30px;}
#mTabBoard dl dd .data-ctrl .btn-next {right:0;border-radius:0 30px 30px 0;}
#mTabBoard dl dd .data-ctrl .btn-next:before {transform:rotate(225deg);}
#mTabBoard dl dd .data-ctrl .btn-next:after {transform:rotate(-45deg);}
#mTabBoard dl dd .data-ctrl .data-auto {display:none;}

@media all and (min-width:320px) {
	#mTabBoard dl.isOn dt a {background: rgb(49,163,186);background: -moz-linear-gradient(90deg, rgba(49,163,186,1) 0%, rgba(116,186,133,1) 72%, rgba(171,205,5,1) 100%);background: -webkit-linear-gradient(90deg, rgba(49,163,186,1) 0%, rgba(116,186,133,1) 72%, rgba(171,205,5,1) 100%);background: linear-gradient(90deg, rgba(49,163,186,1) 0%, rgba(116,186,133,1) 72%, rgba(171,205,5,1) 100%);}
}
@media all and (max-width:999px) {
	.msec03 {padding-top:40px;padding-bottom:40px;}
	.msec03:before {border-radius:50px 0 0 0;}
	#mTabBoard {height:320px;padding-right:90px;}
	#mTabBoard .dataTit {top:24px;left:40px;font-size:1.75em;}
	#mTabBoard dl:last-child dt {padding-left:15px;}
	#mTabBoard dl dt a {width:80px;height:80px;padding:5px;}
	#mTabBoard dl dt a span {font-size:1em;padding:5px;}
	#mTabBoard .swiper-slide a {height:230px;padding:25px;}
	#mTabBoard .swiper-slide a .s-tit {font-size:1.15em;height:96px;}
	#mTabBoard .swiper-slide a .s-date {bottom:25px;left:25px;}
	#mTabBoard .swiper-slide.nodata {height:230px;}
	#mTabBoard .swiper-slide.nodata .no-data {padding-top:100px;background-position-y:20px;}

	#mTabBoard .dataMore {right:40px;top:-65px;}

	#mTabBoard dl.isOn dd {top:90px;padding:0 37px;}

	#mTabBoard dl dd .data-ctrl button {margin-top:-33px;width:40px;height:40px;}
	#mTabBoard dl dd .data-ctrl button:before {margin-top:-4px;margin-left:-8px;width:13px;}
	#mTabBoard dl dd .data-ctrl button:after {margin-top:4px;margin-left:-8px;width:13px;}
}
@media all and (max-width:768px) {
	#mTabBoard .swiper-slide a .s-tit {font-size:1.15em;height:88px;}
}
@media all and (max-width:599px) {
	#mTabBoard {justify-content: flex-start;padding-left:30px;padding-right:0}
	#mTabBoard .dataTit {display:none;}
	#mTabBoard dl:last-child dt {padding-left:10px;}
	#mTabBoard .swiper-slide a .s-tit {font-size:1.1em;height:77px;}
}