@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2020-11-25
******************************************************** */

/* ******************  메인 레이아웃(Fullpage) ********************** */
#fullpage #mainVisual{height:100vh}
@media all and ( min-width: 1025px ) and (max-height: 750px) {
	#fullpage .section:not(#mainVisual,#mainFooter){min-height:750px;}
	#fullpage .section .fp-tableCell{height:100% !important;}
}

/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:1000px; position:relative;}	
.main-slider-wrapper {
	position: relative;
	width: 100%;
	height: 100vh;
}
.main-slider-item {
	overflow: hidden;
	position: relative;
	height:100% !important;
}
.main-slider-item .slide-inner {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

/* 이미지 영역 */
.main-visual-img-con{position:relative; height:100%; width:100%; background-size:cover !important;}
.main-visual-prd-item{position:absolute; bottom:0px; left:0px; width:21.56%}
.main-visual-prd-item.right{left:auto; right:0; text-align:right;}
.main-visual-prd-item img{max-width:100%;}
.main-visual-img-con-m{display:none;}

/* 텍스트영역 */
.main-visual-txt-con{position:absolute; top:50%; left:0; right:0; transform:translateY(-50%);}
.main-visual-txt-con .main-visual-txt1{display:block; font-weight:700; font-size:58px; letter-spacing:-0.1px; color:#fff; }
.main-visual-txt-con .main-visual-txt2{font-weight:400; font-size:18px; letter-spacing:-0.75px; color:#fff; line-height:1.83; margin:27px 0 63px}
.main-visual-txt-con .main-visual-more-btn{overflow:hidden; line-height:1.1; padding-bottom:1px}
/* 텍스트영역 :: Lean More 버튼, 오버효과 */
.main-visual-txt-con .main-visual-more-btn a{position:relative; display:inline-block; width:220px; height:57px; line-height:57px; text-align:center; font-weight:700; font-size:12px; letter-spacing:0.6px; color:#fff; border:1px solid #fff}
.main-visual-txt-con .main-visual-more-btn a span{position:relative; display:block; width:100%; height:100%; -webkit-transition:all 0.4s; transition:all 0.4s}
.main-visual-txt-con .main-visual-more-btn a:before,
.main-visual-txt-con .main-visual-more-btn a:after{display:inline-block; content:""; position:absolute; -webkit-transition:all 0.4s; transition:all 0.4s; top:-1px; bottom:-1px; width:1px; background-color:#fff; opacity:0}
.main-visual-txt-con .main-visual-more-btn a span:before,
.main-visual-txt-con .main-visual-more-btn a span:after{display:inline-block; content:""; position:absolute; -webkit-transition:all 0.4s; transition:all 0.4s; top:-1px; bottom:-1px; border-top:2px solid #fff; border-bottom:2px solid #fff; width:12px; opacity:0}
.main-visual-txt-con .main-visual-more-btn a span:before,
.main-visual-txt-con .main-visual-more-btn a:before{left:0;}
.main-visual-txt-con .main-visual-more-btn a span:after,
.main-visual-txt-con .main-visual-more-btn a:after{right:0;}

@media all and (min-width:801px){
	.main-visual-txt-con .main-visual-more-btn a:hover{letter-spacing:3px;}
	.main-visual-txt-con .main-visual-more-btn a:hover span:before,
	.main-visual-txt-con .main-visual-more-btn a:hover span:after{width:50%; opacity:1}
	.main-visual-txt-con .main-visual-more-btn a:hover:before,
	.main-visual-txt-con .main-visual-more-btn a:hover:after{opacity:1}
}



@keyframes text-active-animation {
	from {
		transform: translate3d(0, 100px, 0);
	}
	to {
		 transform: translate3d(0, 0, 0);
	}
}


#mainVisual.active-page .main-slider-item.swiper-slide-active .main-visual-txt-con .txt-cm-effect.splitting .char,
#mainVisual.active-page .main-slider-item.swiper-slide-active .main-visual-txt-con .main-visual-more-btn a{
	-webkit-animation: text-active-animation 1s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1s cubic-bezier(0.4, 0, 0.2, 1) both;
} 

#mainVisual.active-page .main-slider-item.swiper-slide-active .main-visual-txt-con .main-visual-txt1.txt-cm-effect.splitting .char{ -webkit-animation-delay:0.3s; animation-delay:0.3s;}
#mainVisual.active-page .main-slider-item.swiper-slide-active .main-visual-txt-con .main-visual-txt2.txt-cm-effect.splitting .char{ -webkit-animation-delay:0.4s; animation-delay:0.4s;}
#mainVisual.active-page .main-slider-item.swiper-slide-active .main-visual-txt-con .main-visual-more-btn a{ -webkit-animation-delay:0.8s; animation-delay:0.8s;}

#mainVisual .main-slider-item.swiper-slide-active .main-visual-txt-con{opacity:0}
#mainVisual.active-page .main-slider-item.swiper-slide-active .main-visual-txt-con{opacity:1}
#mainVisual.active-page .main-slider-item.swiper-slide-active .main-visual-txt-con.active .main-visual-txt1.txt-cm-effect.splitting .char,
#mainVisual.active-page .main-slider-item.swiper-slide-active .main-visual-txt-con.active .main-visual-txt2.txt-cm-effect.splitting .char,
#mainVisual.active-page .main-slider-item.swiper-slide-active .main-visual-txt-con.active .main-visual-more-btn a{-webkit-animation-delay:0s; animation-delay:0s;}

/* 메인 비주얼 :: 컨트롤러 */
.main-visual-control{position:absolute; left:0; right:0; bottom:120px; width:100%; z-index:9; transform:translateY(30px); /*opacity:0; transition:opacity 1s 1.2s, transform 1s 1.2s*/}
/*.active-page .main-visual-control{opacity:1; transform:translateY(0);}*/
.main-visual-control .main-visual-arrow,
.main-visual-control .pause-btn,
.main-visual-control .main-visual-loading-bar{display:inline-block; vertical-align:middle; margin:0 -1px}
/* 화살표 */
.main-visual-control .main-visual-arrow{position:relative;}
.main-visual-control .main-visual-arrow:after{position:absolute; content:""; width:2px; height:10px; background-color:rgba(255,255,255,0.2); top:7.5px; right:63px}
.main-visual-control .main-visual-arrow button{}
.main-visual-control .main-visual-arrow button .main-visual-conuter{display:inline-block; vertical-align:middle; font-weight:700; font-size:14px; letter-spacing:-0.65px; color:#fff}
.main-visual-control .main-visual-arrow button i{display:inline-block; vertical-align:middle; font-size:24px; color:#fff; opacity:0.5}
.main-visual-control .main-visual-arrow button.main-slide-prev{position:relative; margin-right:40px;}
.main-visual-control .main-visual-arrow button.main-slide-prev i{transform:rotate(-90deg); margin-right:5px}
.main-visual-control .main-visual-arrow button.main-slide-next i{transform:rotate(90deg); margin-left:5px}
/* 재생버튼 */
.main-visual-control .pause-btn{font-size:20px; color:#fff; margin:0 20px 0 10px; position:relative; width:20px; height:20px}
.main-visual-control .pause-btn button{cursor:pointer; position:absolute; top:0; left:0; font-size:20px; color:#fff}
.main-visual-control .pause-btn button.main-visual-play-btn{display:none}
/* 진행바 */
.main-visual-control .main-visual-loading-bar{position:relative; height:3px; width:calc(100% - 183px); background:rgba(255,255,255,0.4)}
.main-visual-control .main-visual-loading-bar span{position:absolute; top:0; left:0; height:100%; background-color:#fff}

/* 메인 비주얼 :: 스크롤아이콘 */
.main-scroll-icon{position:absolute; bottom:35px; right:40px;}
.scroll-icon{text-align:center; z-index:9; }
.scroll-icon span{display:block; color:#fff; padding-bottom:15px; letter-spacing:0; font-weight:700; text-transform:uppercase; font-size:10px}
.scroll-icon .arrow{display:inline-block}
.scroll-icon .arrow i{display:block; font-size:15px; color:#fff; opacity:0.25; position:relative}
.scroll-icon .arrow i.down-01{animation: ani_arrowfade 1.5s ease infinite;}
.scroll-icon .arrow i.down-02{animation: ani_arrowfade 1.5s ease infinite; animation-delay:0.2s; top:-9px}
.scroll-icon .arrow i.down-03{animation: ani_arrowfade 1.5s ease infinite; animation-delay:0.3s; top:-17px}
@keyframes ani_arrowfade {
	10% {opacity: 0.25;}
	20% {opacity: 0.5;}
	30% {opacity: 1;}
}



/* 메인 비주얼 :: 페이지 로딩됐을때 효과 */
.load-bk-bg{position:absolute; width:100%; height:100vh; right:0; top:0; background-color:#000;  z-index:99999; opacity:1}
.main-visual-wrap{top:150px; /*transition:top 0.8s cubic-bezier(.08,.045,.35,1) 0.4s;*/ position:relative;}
.active-page .load-bk-bg{animation: loadingBg 0.6s ease-out both; animation-delay:0.2s}
.active-page .main-visual-wrap{top:0; animation: loadingMain 0.6s ease-out both; animation-delay:0.2s}
@keyframes loadingBg {
	0% {top:0}
	100% {top:-100%}
}
@keyframes loadingMain {
	0% {top:150px;}
	100% {top:0;}
}

/* 텍스트 나타나는 효과 */
#header.main .fade-effect{overflow:hidden;}
#header.main .fade-effect .ef{display:inline-block; transform: translate3d(0, 100px, 0);}
#header.main.active .fade-effect .ef{	
	-webkit-animation: text-active-animation 1s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1s cubic-bezier(0.4, 0, 0.2, 1) both;
} 




/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
@media all and ( min-width: 1025px ) and (min-height: 750px) {	
	/* 공통 :: 레이아웃 */
	.main-cm-wrap{margin-top:7%}
}
/* 공통 :: 레이아웃 */
.main-cm-wrap > div{display:inline-block; vertical-align:middle; margin:0 -1px; box-sizing:border-box}
.main-cm-wrap .main-tit-box{width:35.3%}
.main-cm-wrap .main-cm-slide{width:64.7%}
.main-cm-wrap .cm-slide-arrow{position:relative; z-index:9}
.main-cm-wrap .cm-slide-arrow li{display:inline-block; background-color:#fff; width:70px; height:70px; margin-right:10px}
.main-cm-wrap .cm-slide-arrow li a{display:block; width:100%; height:100%; text-align:center}
.main-cm-wrap .cm-slide-arrow li a i{font-size:26px; color:#000; line-height:70px}
.main-cm-wrap .cm-slide-arrow .slick-arrow.slick-hidden{display:block; }
/* 공통 :: 타이틀 */
.main-tit-box .main-tit{font-weight:700; font-size:58px; letter-spacing:0; color:#fff;}
.main-tit-box .main-sub-tit{font-weight:500; font-size:18px; letter-spacing:-0.75px; color:rgba(255,255,255,0.4); line-height:1.83; margin-top:20px}
.main-tit-box.bk .main-tit{color:#000}
.main-tit-box.bk .main-sub-tit{color:#333}
.main-tit-box .txt-cm-effect.splitting .char,
.txt-cm-effect.splitting .cm-slide-arrow{transform: translate3d(0, 100px, 0);}
.up-effect-con .up-effect-inner{display:inline-block; transform: translate3d(0, 100px, 0);}
 /* animation일때 */ 
.active-section .main-tit-box .txt-cm-effect.splitting .char,
.active-section .txt-cm-effect.splitting .cm-slide-arrow,
#visual.active .up-effect-con .up-effect-inner{
	-webkit-animation: text-active-animation 1s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1s cubic-bezier(0.4, 0, 0.2, 1) both;
} 



/* -------- 메인 컨텐츠 :: 컨텐츠1(Partners) -------- */
#mainPartners{background:url("/images/main/main_partners_bg.jpg") no-repeat 50% 0; background-size:cover; position:relative; z-index:2}
#mainPartners .main-cm-wrap .main-tit-box{padding-right:2.5%}
.partners-slide-arrow{margin-top:75px}
.main-partners-slide{}
.main-partners-slide .partners-slide{margin:0 -6px}
.main-partners-slide .partners-slide li{margin:0 6px; position:relative; padding-top:55.6%; height:0; overflow:hidden;}
.main-partners-slide .partners-slide li a{position:absolute; top:0; left:0; width:100%; height:100%;  clip:rect(1000px, 1000px, 1000px, 0); transition:clip 1s 0s}
.main-partners-slide .partners-slide li a .partners-img{position:absolute; top:0; left:0; width:100%; height:100%; transition:all 0.5s; background-size:cover !important}
.main-partners-slide .partners-slide li a .partners-img span{position:absolute; top:0; left:0; width:100%; height:100%; transition:all 0.5s; background-size:cover !important}
.main-partners-slide .partners-slide li a .partners-img span.on{opacity:0; transition:all 0.7s; }
/*.main-partners-slide .partners-slide li a:hover .partners-img span.off{opacity:0}*/
.main-partners-slide .partners-slide li a:hover .partners-img span.on{opacity:1}
/*.main-partners-slide .partners-slide li.partners-01 a .partners-img{background:url("/images/main/main_partner_01_off.jpg")}
.main-partners-slide .partners-slide li.partners-01 a:hover .partners-img{background:url("/images/main/main_partner_01_on.jpg")}
.main-partners-slide .partners-slide li.partners-02 a .partners-img{background:url("/images/main/main_partner_02_off.jpg")}
.main-partners-slide .partners-slide li.partners-02 a:hover .partners-img{background:url("/images/main/main_partner_02_on.jpg")}
.main-partners-slide .partners-slide li.partners-03 a .partners-img{background:url("/images/main/main_partner_03_off.jpg")}
.main-partners-slide .partners-slide li.partners-03 a:hover .partners-img{background:url("/images/main/main_partner_03_on.jpg")}*/
.main-partners-slide .partners-slide li a .partners-tit{position:absolute; bottom:7%; left:9%; z-index:9; font-weight:700; font-size:24px; letter-spacing:-0.25px; color:#fff; text-transform:uppercase}
.main-partners-slide .partners-slide li a:after{content: ""; width: 100%; height: 100%; background-color: #1d2088; position: absolute; top: 0; left: 0; transition: all .5s ease-in-out 0.9s; z-index:9;}
.active-section .main-partners-slide .partners-slide li a:after{top:-100%;}
.active-section .main-partners-slide .partners-slide li a{clip:rect(0, 1000px, 1000px, 0)}
.active-section .main-partners-slide .partners-slide li a .partners-img img{transform:scale(1.0)}
/* 스크롤다운 */
.partners-scroll{overflow:hidden; line-height:1.1; margin-top:50px; }
.partners-scroll-icon{display:inline-block; transform: translate3d(0, 100px, 0); opacity:0}
.partners-scroll-ico.scroll-icon .arrow{position:relative; left:-1px}
.active-section .partners-scroll-icon{
	-webkit-animation: text-active-animation 1s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1s cubic-bezier(0.4, 0, 0.2, 1) both; opacity:1; transition:opacity 0.1s
} 




/* -------- 메인 컨텐츠 :: 컨텐츠2(Notice) -------- */
#mainNotice{position:relative; background-color:#eee}
#mainNotice:after{position:absolute; content:""; width:984px; height:100%; background:url("/images/main/main_notice_bg.png") no-repeat; background-size:100% 100% !important; left:0; top:0}
#mainNotice .main-cm-wrap .main-tit-box{padding-left:12.2%}
.notice-slide-arrow{margin-top:50px}
.main-notice-slide{position:relative; z-index:9}
.main-notice-slide .notice-slide{margin:0 -5px}
.main-notice-slide .notice-slide li{margin:0 5px;}
.main-notice-slide .notice-slide li .notice-slide-inner{position:relative; height:465px}
.main-notice-slide .notice-slide li a{position:absolute; top:0; left:0; width:100%; height:100%; background-color:#fff; padding:14% 9%; box-sizing:border-box; clip:rect(1000px, 1000px, 1000px, 0); transition:clip 1s 0s}
.main-notice-slide .notice-slide li a .hover-bd{position:absolute; content:""; width:100%; height:100%; border:0px solid #1d2088; box-sizing:border-box; top:0; left:0; opacity:0; transition:border-width 0.15s, opacity 0.5s}
.main-notice-slide .notice-slide li a .tit{font-weight:700; font-size:26px; letter-spacing:-0.65px; color:#333; line-height:1.53; height:3.06em}
.main-notice-slide .notice-slide li a .txt{font-size:16px; letter-spacing:-0.65px; color:#333; opacity:0.6; line-height:1.875; height:9.375em; margin-top:20px}
.main-notice-slide .notice-slide li a .date{display:block; position:absolute; font-weight:700; font-size:13px; letter-spacing:-0.4px; color:#333; left:9%; right:9%; bottom:12.5%; width:auto}
.main-notice-slide .notice-slide li a .date .new{position:absolute; right:0; bottom:0; font-size:14px; letter-spacing:-0.65px; color:#1d2088; font-weight:700;}
.main-notice-slide .notice-slide li a:hover .hover-bd{border-width:7px; opacity:1}

.main-notice-slide .notice-slide li a:after{content: ""; width: 100%; height: 100%; background-color: #1d2088; position: absolute; top: 0; left: 0; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; transition-delay:0.9s; z-index:9}
.active-section .main-notice-slide .notice-slide li a{clip:rect(0, 1000px, 1000px, 0)}
.active-section .main-notice-slide .notice-slide li a:after{top:-100%;}



/* ******************  메인 오른쪽 퀵메뉴 (Fullpage) ********************** */
#fp-nav{
	position: fixed;
    z-index: 100;
    margin-top: -32px;
    top: 50%;
	right:60px;
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
}
#fp-nav ul li{position:relative; margin:62px 0; opacity:0; transform:translateX(-20px); transition:all 0.8s}
.active-page #fp-nav ul li{opacity:1; transform:translateX(0); transition-delay:1s}
.active-page #fp-nav ul li:nth-child(2){transition-delay:1.2s}
.active-page #fp-nav ul li:nth-child(3){transition-delay:1.4s}
/*#fp-nav ul li:first-child{margin-top:0}*/
#fp-nav ul li:last-child{display:none} /* 마지막 섹션이 footer일경우 */
#fp-nav ul li a{display:block; position:relative; width:100%; box-sizing:border-box;  }
#fp-nav ul li a span{position:relative; display:block; width:5px; height:5px; background-color:#fff; border-radius:50%; }
#fp-nav ul li a span:after{position:absolute; content:""; width:23px; height:23px; background:rgba(255,255,255,0.1); border-radius:50%; top:-9px; left:-9px; opacity:0; transition:all 0.3s;}
#fp-nav ul li .fp-tooltip{display:none}
#fp-nav ul li .fp-tooltip span{display:block; transform:translateX(100%);}
#fp-nav ul li a.active span:after{opacity:1}

/* Black Style */
#fp-nav.black ul li a span{background-color:#000}
#fp-nav.black ul li a span:after{background-color:rgba(0,0,0,0.1)}