@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 CSS
 * date : 2021-03-29
******************************************************** */
#mainVisual{overflow:hidden; width:100%; height:500px; position:relative;}	/* 비주얼높이값 이미지에맞게 수정 */
#mainVisual.full-height,#fullpage #mainVisual, .safari-browser:not #mainVisual.full-height,#fullpage #mainVisual{height:1000px;}
.main-visual-con .slick-track,.main-visual-con .slick-list {-webkit-perspective: 2000;-webkit-backface-visibility: hidden;}
.main-visual-con, .main-visual-con .slick-list,  .main-visual-con .slick-track, 
.main-visual-item{height:100%;}
.main-visual-con{z-index:1; background: #14181f;}
.main-visual-item{position:relative;}

/*메인 비주얼 이팩트 효과*/
.main-visual-item .effect_box{width:100%; height:100%; overflow:hidden; box-sizing:border-box; position:relative; top:0; left:0; bottom:0; right:0}
.main-visual-item .effect_box> img{ position:absolute; left:50%;}
.main-visual-item .effect_box .effect1{opacity:1;bottom:-429px;margin-left:-1700px;-webkit-transform:translate(-650px,650px);transform:translate(-650px,650px)}
.main-visual-item .effect_box .effect2{opacity:1;top:-799px;margin-left:-432px;-webkit-transform:translate(650px,-650px);transform:translate(650px,-650px)}
.main-visual-item .effect_box .effect3{opacity:1;top:-777px;margin-left:-734px;-webkit-transform:translate(650px,-650px);transform:translate(650px,-650px)}
.main-visual-item .effect_box .effect4{opacity:1;bottom:-825px;margin-left:-55px;-webkit-transform:translate(-650px,650px);transform:translate(-650px,650px)}
.main-visual-item .effect_box .product_img{text-align: center;position: absolute; right: 20%;top: 55%;
transform: translate(0,-50%); -webkit-transform: translate(0,-50%);-moz-transform: translate(0,-50%);-o-transform: translate(0,-50%);-ms-transform: translate(0,-50%);z-index: 5; opacity:0;filter:Alpha(opacity=0);}
.main-visual-item .effect_box .product_img > img{ display:inline-block!important}
.main-visual-item.item03 .effect_box .product_img, .main-visual-item.item04 .effect_box .product_img{right: 15%;}
.main-visual-item.active-item .effect_box .effect1{opacity:1;-webkit-transform:translate(0,0);transform:translate(0,0);-webkit-transition:all 0.5s;transition:all 0.5s;-webkit-transition-delay:0.8s;transition-delay:0.8s}
.main-visual-item.active-item .effect_box .effect2{opacity:1;-webkit-transform:translate(0,0);transform:translate(0,0);-webkit-transition:all 0.5s;transition:all 0.5s;-webkit-transition-delay:0.8s;transition-delay:0.8s}
.main-visual-item.active-item .effect_box .effect3{opacity:1;-webkit-transform:translate(0,0);transform:translate(0,0);-webkit-transition:all 0.5s;transition:all 0.5s;-webkit-transition-delay:1.1s;transition-delay:1.1s}
.main-visual-item.active-item .effect_box .effect4{opacity:1;-webkit-transform:translate(0,0);transform:translate(0,0);-webkit-transition:all 0.5s;transition:all 0.5s;-webkit-transition-delay:1.1s;transition-delay:1.1s}
.main-visual-item.active-item .effect_box .product_img{animation: img-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}

/* 메인 비주얼 :: 화살표 및 번호 */
.main-util-box {position: absolute;z-index: 9;bottom: 50px; left: 50%;transform: translateX(-50%);text-align: center;}
#mainVisual .main-slick-btn{ position:absolute; bottom:-2px; width:24px; height:60px; line-height: 60px; text-align: center; cursor:pointer; border:0; cursor:pointer; z-index:999; font-size: 24px; color: #fff;}
#mainVisual .main-slick-prev{left: -30px;}
#mainVisual .main-slick-next{right: -30px;}
#mainVisual .main-slide-paging {position:absolute; top:0px; left:0px;font-size:13px; width:54px; height:54px; line-height:54px;color: #fff; font-weight: 600; display:block; text-align:center;}

/* 메인 비주얼 :: 로딩circle */
.visual-circle-box{display:inline-block;}
.visual-circle-box .circle-box{position:relative; width:60px; height:60px; border:3px solid #fff; border-color:rgba(255, 255, 255, 0.2); border-radius: 50%; z-index:11; box-sizing:border-box;}
.visual-circle-box .circle-box svg{overflow: visible; position:absolute;top:2px;left:-2px;width:54px;height:54px;fill:none; stroke:#fff;transform:rotate(-90deg);}
.visual-circle-box .circle-box svg circle { transform-origin: center; stroke: #fff; stroke-dasharray: 360; stroke-dashoffset: 360; stroke-width: 6px; }

/* 메인 비주얼 :: 텍스트 */
.main-visual-txt-con{position:absolute; top:50%; left:0px; width:100%; margin-top:-150px; z-index:11;} /* margin-top은 조정 (텍스트영역 높이의 반) */
.main-visual-txt-con .main-visual-txt1,.main-visual-txt-con .main-visual-txt2,.main-visual-txt-con .main-visual-txt3{opacity:0;filter:Alpha(opacity=0);-ms-transform: translateX(-50px); -o-transform: translateX(-50px); -moz-transform: translateX(-50px);-webkit-transform: translateX(-50px); transform: translateX(-50px);-webkit-transition:opacity 1.0s, transform 1.0s;-moz-transition:opacity 1.0s, transform 1.0s;-o-transition:opacity 1.0s, transform 1.0s;-ms-transition:opacity 1.0s, transform 1.0s;transition:opacity 1.0s, transform 1.0s;}
.main-visual-txt-con .main-visual-txt1{display:block; font-size:25px; font-weight:400; letter-spacing:-0.25px; color:#fff; margin-bottom:35px;}
.main-visual-txt-con .main-visual-txt2{font-size:70px; color:#fff; margin-bottom:25px; -webkit-transition-delay:0.3s;-moz-transition-delay:0.3s;-o-transition-delay:0.3s;-ms-transition-delay:0.3s;transition-delay:0.3s;}
.main-visual-txt-con .main-visual-txt3{font-size:19px; letter-spacing:-0.25px; color:#bfbfbf; line-height:1.6; -webkit-transition-delay:0.5s;-moz-transition-delay:0.5s;-o-transition-delay:0.5s;-ms-transition-delay:0.5s;transition-delay:0.5s;}
.main-visual-txt-con .main-visual-txt3 > span{ display:block;}
.main-visual-item .main-visual-txt-con .main-visual-btn-box{overflow:hidden; margin-top:4.2em; }
.main-visual-item .main-visual-txt-con .main-visual-btn{overflow:hidden; width:185px; border:0; text-align:left; border-bottom:1px solid #fff; padding:22px 0; text-align:left; transform:translateY(100%); position:relative;opacity: 0; filter: Alpha(opacity=0);}
.main-visual-item .main-visual-txt-con .main-visual-btn:before{background-color:#fff;}
.main-visual-item .main-visual-txt-con .main-visual-btn em{display:inline-block; font-size:15px; font-weight:700; letter-spacing:0.25px; color:#fff; }
.main-visual-item .main-visual-txt-con .main-visual-btn i{position:absolute; top:50%; right:0px; margin-top:-10px; color:#fff; font-size:20px; transition:all 0.3s}

@keyframes img-active-animation {
from {
	opacity:0;filter:Alpha(opacity=0);
	transform:translate(0, -50%) scale(1.3); 
}
to {
	opacity:1.0;filter:Alpha(opacity=100);
	transform: translate(0, -50%) scale(1);
}
}
/* =====================****************** 
* 미디어 쿼리 시작 
==================********************** */
@media all and (min-width: 1921px ){
.main-visual-txt-con .main-visual-txt1{font-size:35px}
.main-visual-txt-con .main-visual-txt1 b{font-size:80px}
.main-visual-txt-con .main-visual-txt2{font-size:23px}
.main-visual-txt-con .main-visual-txt3{font-size:18px}
}
.main-visual-item.active-item .main-visual-txt1,
.main-visual-item.active-item .main-visual-txt2,
.main-visual-item.active-item .main-visual-txt3{
	opacity:1.0;filter:Alpha(opacity=100);
	-ms-transform: translateX(0px); 
    -o-transform: translateX(0px); 
    -moz-transform: translateX(0px);
    -webkit-transform: translateX(0px); 
     transform: translateX(0px);
}
.main-visual-item.active-item .main-visual-btn-box .main-visual-btn{opacity:1;filter:Alpha(opacity=100); transform: translate3d(0px, 0px, 0px); transition:all 0.4s; transition-delay: 1.5s;}
.main-visual-item.active-item .main-visual-txt-con .main-visual-img{animation: img-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}

@media all and ( min-width: 1025px ){
.main-visual-item .main-visual-txt-con .main-visual-btn:hover em,
.main-visual-item .main-visual-txt-con .main-visual-btn:hover i{color:#222;}
.main-visual-item .main-visual-txt-con .main-visual-btn:hover em{text-indent:20px; letter-spacing:0.75px}
.main-visual-item .main-visual-txt-con .main-visual-btn:hover i{right:20px;}
}
@media (max-width: 1850px){
}
@media all and (max-width:1536px){
.main-visual-item .effect_box .product_img img{transform: scale(0.8); max-width:100%; text-align:right}	
.main-visual-item .effect_box .product_img{ right:10%}
.main-visual-item.item03 .effect_box .product_img, .main-visual-item.item04 .effect_box .product_img {right:0;}	
.main-visual-item .main-visual-txt-con .main-visual-more-btn{ left:30px}
.main-visual-item .main-visual-txt-con .main-visual-txt-inner{ margin:0 60px}	
.main_visual_control .area{ margin:0 90px}
}

@media all and (max-width:1224px){
.main-visual-item .main-visual-txt-con .main-visual-txt-inner {margin: 0 30px;}
.main-visual-item .effect_box .product_img{right:0}
.main_visual_control{ top:60%}
.main_visual_control .area{ margin:0 60px}
.main-visual-txt-con .main-visual-txt1{ font-size:22px}
.main-visual-txt-con .main-visual-txt2{ font-size:55px}
.main-visual-txt-con .main-visual-txt3{ font-size:16px}
}

@media all and (max-width:1024px){
.main-visual-item .effect_box .effect1{bottom: -700px;margin-left: -1500px;}	
.main-visual-item .effect_box .effect2{top: -1000px; margin-left: -350px;}
.main-visual-item .effect_box .effect3{ top: -820px; margin-left: -510px;}
.main-visual-item .effect_box .effect4{bottom: -500px;margin-left: -100px;}
.main-visual-item .effect_box .product_img { }
.main-visual-item .effect_box .product_img  img{}
.main-visual-txt-con{top: 22%; margin:0}
.main-visual-item .main-visual-txt-con .main-visual-more-btn{ left:15px}
.main-visual-item .main-visual-txt-con .main-visual-more-btn img{position: absolute;bottom: 0;right: auto;left: 0;}
.main-visual-item .effect_box .product_img{ top:70%}
.main-visual-item.item03 .effect_box .product_img, .main-visual-item.item04 .effect_box .product_img{/* top:70%; *//* right:15px; */}
.main_visual_control {top: 45%;}
.main_visual_control .area {margin: 0 40px;}
}
@media all and (max-width:800px){
.main-visual-item .effect_box .product_img img{transform: scale(0.8); max-width:100%;}
.visual-circle-box .circle-box{transform:scale(0.7)}	
.main-visual-item .main-visual-txt-con .main-visual-more-btn { transform: scale(0.6);margin-left: -10px;}
.main-visual-txt-con{ top:17%}
.main-visual-item .main-visual-txt-con .main-visual-txt-inner {margin: 0 15px;}
.main_visual_control .area {margin: 0 25px;}
.main-visual-txt-con .main-visual-txt1{ font-size:16px; margin-bottom:15px} 
.main-visual-txt-con .main-visual-txt2{ font-size:36px}
.main-visual-txt-con .main-visual-txt3 {font-size: 14px;}
.main-visual-item .main-visual-txt-con .main-visual-btn-box{ margin-top:2.2em}
.main-visual-item .main-visual-txt-con .main-visual-btn{ width:150px}
.main-visual-item .main-visual-txt-con .main-visual-btn em{ font-size:13px}
.main-visual-item .main-visual-txt-con .main-visual-btn i{ font-size:16px}
.main_visual_control { top: 35%;}
}
@media all and (max-width:600px){
.main-visual-item .effect_box .effect2{ top: -1100px;}	
.main-visual-item .effect_box .effect1{margin-left: -1350px;}
.main-visual-item .effect_box .effect3 {top: -870px;margin-left: -330px;}
.main-visual-item .effect_box .effect4 {bottom: -300px;margin-left: -55px;}
.main-visual-item .main-visual-txt-con .main-visual-txt-inner {margin: 0;}	
.main_visual_control .area {margin: 0 15px;}
.main-visual-txt-con .main-visual-txt2 {font-size: 32px;}
.main-visual-txt-con .main-visual-txt3{ word-break:keep-all}
.main-visual-txt-con .main-visual-txt3 br{ display:none}
.main-visual-item .effect_box .product_img {top: 73%;width:80%; right: -40px;}
.main-visual-item.item03 .effect_box .product_img, .main-visual-item.item04 .effect_box .product_img{/* width:90%; */}
.main-visual-item .effect_box .product_img img{transform: scale(0.7);}

}
@media all and (max-width:480px){
.main-visual-item .effect_box .effect2 { top: -1050px;}
.main-visual-item .effect_box .effect3 {margin-left: -250px;}	
}
@media all and (max-height:800px) and (min-width:1080px) {
.main-visual-item .effect_box .product_img {top: 65%;}
.main-visual-item.item03 .effect_box .product_img, .main-visual-item.item04 .effect_box .product_img{ top:70%}
}

@media screen and (max-height:640px) and (max-width:1024px) {
#mainVisual{ min-height:800px}	
.main-visual-txt-con {top: 15%;}
.main-visual-txt-con .main-visual-txt1{ font-size:18px; margin-bottom:15px}
.main_visual_control {top: 38%;}
}