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

/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:800px; position:relative;}	/* 비주얼높이값 이미지에맞게 수정 */
#mainVisual.full-height,
#fullpage #mainVisual{height:1000px;}

.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, .main-visual-img-con-m{position:relative; height:100%; width:100%; background-size:cover !important; background-repeat:no-repeat; background-position:60% 50%;}
.slider-item1 .main-visual-img-con{ background-image:url(../../img/main_visual_01.jpg);}
.slider-item2 .main-visual-img-con{ background-image:url(../../img/main_visual_02.jpg);}
.slider-item3 .main-visual-img-con{ background-image:url(../../img/main_visual_03.jpg);}
.main-visual-img-con-m img{ width:100%;}
.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;}

/* 메인 비주얼 :: 텍스트 */
#mainVisual .main-visual-txt-con{position:absolute;/*bottom:250px; */ bottom:25vh; left:0px; width:100%; z-index:1000}
#mainVisual .main-visual-txt-con .main-visual-txt1{display:block; font-size:35px; font-weight:600; letter-spacing:-0.35px; color:#fff; margin-bottom:8px; padding-bottom:5px}
#mainVisual .main-visual-txt-con .main-visual-txt2{font-size:24px; letter-spacing:-0.35px;  color:#fff; margin-bottom:25px; }
#mainVisual .main-visual-txt-con .main-visual-txt2 b{font-size:80px; line-height:90px; color:#fff; margin-bottom:25px; display:block; letter-spacing:-0.7px}
#mainVisual .main-visual-txt-con .main-visual-txt2 b br.m_only{ display:none}
#mainVisual .main-visual-txt-con .main-visual-txt3{font-size:18px; line-height:1.85em; letter-spacing:-0.25px; color:rgba(255,255,255,0.6); }

/*국문 css*/
body.lang_kor #mainVisual .main-visual-txt-con .main-visual-txt2 b{font-size: 73px;line-height: 1.5;}

/* VIEW MORE 버튼 */
.main-more-btn{ opacity:0}
.main-more-btn,
.main-more-btn span{-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
.main-more-btn{position:relative; overflow:hidden; display:inline-block; vertical-align:middle; width:153px; height:55px;  line-height:55px; border:1px solid rgba(255,255,255,0.75); font-weight:700; font-size:12px; letter-spacing:0; color:#e0e0e0; text-align:center; transition:all 0.3s; border-radius:50px; margin-top:50px}
.main-more-btn:before{
    display:block; position:absolute; left:-130%; bottom:0; content:""; width:120%; height:150%; background:#c71c22; /* opacity:0;filter:Alpha(opacity=0); */
    transform:skew(-20deg); 
    -webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s
}
.main-more-btn span{position:relative; left:0px; z-index:1; display:block; }
.main-more-btn span i{vertical-align: middle;display: inline-block; margin-left: 10px;}
.main-more-btn:hover{border-color:#c71c22}
.main-more-btn:hover span{color:#fff; left:3px;}
.main-more-btn:hover:before{left:-10%; opacity:1.0;filter:Alpha(opacity=100);}

/* 메인 비주얼 :: 컨트롤 */
.main-visual-control-box{position:absolute; bottom:0; left:0; right:0; z-index:11; margin-bottom:4.5%}
/* Arrow */
.main-visual-arrow{display:inline-block}
.main-visual-arrow > div{position:relative; right:0; left:0; display:inline-block; height:10px; margin:0; border:0; outline:0}
.main-visual-arrow .swiper-button-prev{margin-left:40px}
.main-visual-arrow .swiper-button-prev:after, .main-visual-arrow .swiper-button-next:after{content:""; width:21px; height:10px; background:url("../../img/main_arrow_icon.png"); display:inline-block; background-size:cover !important}
.main-visual-arrow .swiper-button-prev:after{transform:rotate(180deg)}
.main-visual-arrow .swiper-button-prev:before{position:absolute; display:inline-block; content:""; width:1px; height:11px; background:rgba(255,255,255,0.5); left:-23px; top:0}

/* bar */
.main-visual-num{position:relative; font-size:0; display:inline-block; width:245px; margin-left:30px; bottom:4px}
.main-visual-num .main-visual-conuter span{position:absolute; display:inline-block; font-size:14px; font-weight:400; color:#fff; padding-left:8px; top:0}
.main-visual-num .main-visual-conuter span.cur-num{left:0}
.main-visual-num .main-visual-conuter span.total-num{right:0}
.main-visual-loading-bar{width:186px; height:3px; display:inline-block; background:rgba(255,255,255,0.3); margin:6px 0 0 33px}
.main-visual-loading-bar span{display:block; width:0; height:3px; background-color: #fff}

/* 메인 비주얼 :: active효과 */
.main-visual-txt-con .title-line{display: block;/*  padding-bottom: 0.1em; */ overflow-y: hidden;}
.main-visual-txt-con .title-line span {position:relative; display:inline-block;}
.main-visual-txt-con .main-visual-txt2 > span,  .main-visual-txt-con .main-visual-txt3 span{opacity:0;filter:Alpha(opacity=0); transition:all 0.4s; transition-delay:1s }
/*
#mainVisual.on .main-visual-txt-con .title-line span{animation: text-up 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
#mainVisual.on .main-visual-txt-con .main-visual-txt2 > span, #mainVisual.on .main-visual-txt-con .main-visual-txt3 span{opacity:1;filter:Alpha(opacity=100); }
#mainVisual.on .main-more-btn{
	-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	-webkit-animation-delay: 1.1s;
    animation-delay: 1.1s;
}
*/
.main-slider-item.swiper-slide-active .main-visual-txt-con .title-line span{animation: text-up 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
.main-slider-item.swiper-slide-active .main-visual-txt-con .main-visual-txt2 > span, .main-slider-item.swiper-slide-active .main-visual-txt-con .main-visual-txt3 span{opacity:1;filter:Alpha(opacity=100); }
.main-slider-item.swiper-slide-active .main-more-btn{-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;-webkit-animation-delay: 1.1s;animation-delay: 1.1s;}
@keyframes text-up {
  from {
    transform: translate3d(0, 150%, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(50px); 
		transform: translateY(50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
}
@keyframes text-fade-out {
	from {
		opacity:1.0;filter:Alpha(opacity=100);
	}
	to {
		opacity:0;filter:Alpha(opacity=0);
	}
}

/* 메인 비주얼 :: 스크롤아이콘 */
.main-scroll-icon{position:absolute; bottom:55px; left:50%; margin-left:-6.5px; text-align:center; z-index:9}	/* width값에 맞게 margin-left수정 */
.main-scroll-icon span{display:block; text-align:center;}

@media all and ( max-width: 1024px ){
/* 메인 비주얼 :: 텍스트 */
#mainVisual .main-visual-txt-con{ bottom:15vh;}
#mainVisual .main-visual-txt-con .main-visual-txt1{font-size:20px; margin-bottom:14px}
#mainVisual .main-visual-txt-con .main-visual-txt2 {font-size:15px; margin-bottom:14px}
#mainVisual .main-visual-txt-con .main-visual-txt2 b, body.lang_kor #mainVisual .main-visual-txt-con .main-visual-txt2 b {font-size:50px; margin-bottom:14px;  line-height: 1.3;}
#mainVisual .main-visual-txt-con .main-visual-txt3{font-size:15px; margin-bottom:20px; }
#mainVisual .main-visual-txt-con .main-visual-more-btn{font-size:12px; padding:8px 15px;}	
.main-scroll-icon {display: none;}

}

@media all and (max-width:800px){
.main-visual-img-con{display:none}
.main-visual-img-con-m{ display:block;}

.slider-item1 .main-visual-img-con-m{ background-image:url(../../img/main_visual_01_m.jpg);}
.slider-item2 .main-visual-img-con-m{ background-image:url(../../img/main_visual_02_m.jpg);}
.slider-item3 .main-visual-img-con-m{ background-image:url(../../img/main_visual_03_m.jpg);}
/* 메인 비주얼 :: 컨트롤 */
.main-visual-control-box{margin-bottom:5vh;}
/* Arrow */
.main-visual-arrow .swiper-button-prev{margin-left:20px}
.main-visual-arrow .swiper-button-prev:before{left:-18px;}
.main-visual-arrow .swiper-button-prev:after, .main-visual-arrow .swiper-button-next:after{width:15px; height:7px;}
/* bar */
.main-visual-num{width:190px; margin-left:10px}
.main-visual-loading-bar{margin:6px 0 0 40px}
.main-visual-loading-bar{width:120px}

/* 메인 비주얼 :: 텍스트 */
.main-visual-item .main-visual-txt-con{bottom:10.9%;}
/*국문 css*/
body.lang_kor #mainVisual .main-visual-txt-con .main-visual-txt2 { width:85%;}
body.lang_kor #mainVisual .main-visual-txt-con .main-visual-txt2 br{ display:none}

/* VIEW MORE 버튼 */
.main-more-btn{width:125px; height:40px; line-height:40px; margin-top:35px}
}

@media all and (max-width:600px){
#mainVisual .main-visual-txt-con .main-visual-txt2 b, body.lang_kor #mainVisual .main-visual-txt-con .main-visual-txt2 b{ font-size:42px}	
#mainVisual .main-visual-txt-con .main-visual-txt2 b br.m_only, #mainVisual .main-visual-txt-con .main-visual-txt2 b br{ display:block;}	
#mainVisual .main-visual-txt-con .main-visual-txt3{ font-size:13px}

body.lang_kor #mainVisual .main-visual-txt-con .main-visual-txt2 { width:92%;}

}
@media all and (max-width:480px){
#mainVisual .main-visual-txt-con .main-visual-txt3 br{ display:none}	
.slider-item3 .main-visual-img-con-m{background-position: 90% 50%;}
#mainVisual .main-visual-txt-con .main-visual-txt2 b, body.lang_kor #mainVisual .main-visual-txt-con .main-visual-txt2 b{ font-size:36px; letter-spacing:-0.7px}
}
@media all and (max-width:420px){

}