@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인(index) 레이아웃 CSS
 * date : 2021-08-19
******************************************************** */
.main-area {max-width:1450px; margin:0px auto; padding-top:82px; box-sizing:border-box}
.full-section-wrap {position: relative;width: 100%;height: 100%;}
.main_tit-area{ width:100%; box-sizing:border-box; position:relative;}
.main_tit-area .tit{ font-size:60px; color:#101010; font-family: "Ubuntu", sans-serif;}
.main_tit-area .tit.splitting .char, .main_tit-area .txt.splitting .char{opacity:0;transform:translateY(100%);transition:opacity 0.8s, transform 0.8s;}
.main_tit-area .bg_tit{font-size: 130px;color: #ddd;opacity: 0.3;filter: Alpha(opacity="30"); position: absolute;width: 100%;left: 0; top: -6vh; font-family: "Play", sans-serif;}
.main_tit-area .txt{ margin-top:15px; font-size:18px; line-height:1.8; color:#222; font-weight: 500;}
.main_tit-area .txt i{display: block;}
 /* transition일때 */ 
.aos-animate .main_tit-area .tit.splitting .char, .aos-animate .main_tit-area .txt.splitting .char{opacity:1.0;transform:translateY(0);}
.main-page-btn{position:absolute; right:0; top:50%; transform:translateY(0); color:#3d3d3d; letter-spacing:0; font-size:12px; font-weight:700; transition:opacity 0.8s 0.3s, transform 0.8s 0.3s, color 0.3s; opacity:0;}
.aos-animate .main-page-btn{opacity:1; transform:translateY(-50%); }
.main-page-btn .arrow{display:inline-block; width:27px; height:27px; background-color:#303030; text-align:center; border-radius:50%; color:#fff; vertical-align:middle; margin-left:9px; transition:all 0.3s}
.main-page-btn .arrow i{line-height:27px; font-size:19px; position:relative; left:1px}
@media all and ( min-width: 801px ){	
	.main-page-btn:hover{color:var(--main-color)}
	.main-page-btn:hover .arrow{background-color:var(--main-color)}
}

/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:800px; position:relative;}	/* 비주얼높이값 이미지에맞게 수정 */
#mainVisual.full-height{height:1000px;}
/* 메인 비주얼 :: 영상 */
.main-visual-video { position:absolute; top:0; left:0; width:100%;  height:100%; z-index:999; background-color:#000;}
.background-video-wrapper {position:relative; overflow:hidden; height:100%; width:100%; }
.background-video{position:absolute; top:0; left:0px; width:100%; height:100%; transform:scale(1.01)}
.background-video iframe{width: 100vw;height: 200vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */ /* 유튜브 일시정지시 동영상 더보기 안나오게 ->200vw */min-height: 200vh;min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */position: absolute;top: 50%;left: 50%;opacity:0.6;filter:Alpha(opacity=60);transform: translate(-50%, -50%);pointer-events:none;}
.background-video-alternative{display:none; position:absolute; top:0; left:0px; width:100%; height:100%; background-size:cover !important;}
/* 메인비주얼 :: 영상 :: 컨트롤바 */
.main-video-control {position:absolute; width:100%; top:50%; transform:translateY(-50%); }
.main-video-control .area-box {position:relative; height:228px;}
.main-video-control .control-box {position:absolute; display:flex; align-items:center; transform:rotate(-90deg); left:0; top:0; margin:114px 0 0 -114px; }
.main-video-control .txt {font-size: 12px; color: rgba(255,255,255,0.8); }
.main-video-control .loading-bar {position:relative; width:132px; height:3px; background-color: rgba(255,255,255,0.2); margin:0 20px;}
.main-video-control .loading-bar span { display:block;width:0; height:3px; background-color: #fff;   }
.main-video-control .play-btn {height:24px; font-size: 24px; color:rgba(255,255,255,0.7); }
.main-video-control .play-btn.pause i:before {content:"\ea3f"; }

/* 메인 비주얼 :: 슬라이드 */
.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;}
/* 메인 비주얼 :: 슬라이드 ::이미지 */
.main-visual-item {position:relative;}
#mainVisualSlide.swiper-container,
#mainVisualSlide .swiper-wrapper{z-index:auto; min-height: 100vh;}
#mainVisualSlide.swiper-container {z-index:100;}
#mainVisualSlide .swiper-slide{background:#fff; height:100%; overflow:hidden; }
#mainVisualSlide .slide-inner {position:relative;width: 100%;height: 100%;background-size: cover !important;background-position: center; }    
.main-visual-item .visual-img { position:absolute; top:0px; left:0px; bottom:0px; right:0px; width:1920px; height:100%; width:100%;  background-size:cover !important;background-repeat:no-repeat; background-position:80% 50%}
.main-visual-item .visual-img img {display:none;}
.main-visual-item .main-visual-pc-img{width:100%;height:100%;background-size:cover !important; -webkit-transform: scale(1.05,1.05);transform: scale(1.05,1.05);-webkit-transition:transform 5000ms  ease-in-out ;transition:transform 5000ms ease-in-out ;	}
.main-visual-item .main-visual-m-img{display:none;}

/* 메인 비주얼 :: 슬라이드 :: 카운터 */
.main-visual-conuter {position:absolute; width:100%; top:50%; transform:translateY(-50%); z-index:11; font-size:18px; color:rgba(255,255,255,0.8); letter-spacing:-0.5px; }
.main-visual-conuter .area-box {position:relative; height:248px;}
.main-visual-conuter .inner {position:absolute; transform:rotate(-90deg); left:0; top:0; margin:120px 0 0 -120px; }
.main-visual-conuter span,
.main-visual-conuter .loading-line-wrap {display:inline-block; vertical-align:middle;}
.main-visual-conuter .loading-line-wrap {margin:0 30px; width:132px; height:3px; background-color: rgba(255,255,255,0.2);}
.main-visual-conuter .loading-line-wrap .loading-line {display:block; background-color: #fff; width:0; height:100%;}
.main-visual-conuter .cur-num {font-size:16px;   font-family: "Ubuntu", sans-serif;}
/* 메인비주얼 :: 텍스트 */
.main-video-txt {position:absolute; width:100%; top:50%; transform:translateY(-50%); }
.main-video-txt .inner-box {max-width:1440px; margin:auto; color:#fff}
.main-video-txt .main-txt, .main-video-txt .inner-box .main-visual-more-btn{opacity:0; }
.main-video-txt .main-visual-txt1{font-size:20px; margin-bottom:20px; display:block; font-family: "Ubuntu", sans-serif;}
.main-video-txt .main-visual-txt2{display:block; font-size:80px; font-weight:700; letter-spacing:-0.35px; color:#fff; margin-bottom:0; line-height:1;font-family: "Ubuntu", sans-serif; }
.main-video-txt .main-visual-txt3{display:block; font-size:25px}
.main-video-txt .main-visual-txt{font-size:24px; line-height:1.6; margin-top:20px; }
.main-video-txt .main-visual-txt span { }
.main-video-txt .inner-box .main-visual-more-btn {position:relative; display:inline-block; width:160px; font-size:16px; line-height:50px; color:#000; padding:0 20px;  border-radius:50px; background-color:#fff; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; margin-top: 5vh;}
.main-video-txt .inner-box .main-visual-more-btn i {position:absolute; right:20px; top:0; font-size:24px; line-height:50px; vertical-align:top; }
/* 메인 비주얼 :: active효과 */
#mainVisual.active .main-visual-txt1, #mainVisual.active .main-visual-txt2, #mainVisual.active .main-visual-txt3, #mainVisual.active .main-visual-txt,
#mainVisual.active .main-visual-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;}
#mainVisual.active .main-visual-txt1, #mainVisual.active .main-visual-txt{-webkit-animation: text-active-animation2 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;animation: text-active-animation2 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
#mainVisual.active .main-visual-txt1{-webkit-animation-delay:0.1s; animation-delay:0.1s;}
#mainVisual.active .main-visual-txt2{-webkit-animation-delay:0.3s; animation-delay:0.3s;}
#mainVisual.active .main-visual-txt3{-webkit-animation-delay:0.7s; animation-delay:0.7s;}
#mainVisual.active .main-visual-txt{-webkit-animation-delay:0.9s; animation-delay:0.9s;}
#mainVisual.active .main-visual-more-btn{-webkit-animation-delay:1.1s; animation-delay:1.1s;}
.main-video-txt .inner-box .main-visual-txt2.splitting .char{-webkit-animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
#mainVisual.active .main-video-txt .inner-box .main-visual-txt2.splitting .char{-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;}
@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-active-animation2 {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(50px); 
		transform: translateY(50px); 
	}
	to {
		opacity:0.85;filter:Alpha(opacity=85);
		-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);
	}
}
/* 메인 비주얼 :: 로딩circle */
.visual-circle-box {position:absolute; display:inline-block;vertical-align:middle; top:50%; left:50%; margin-left:38.33%; z-index:1000;}
.visual-circle-box .circle-box {position:relative; margin:0 0 0 auto; width:100px; height:100px; text-align:center; border:3px solid rgba(255, 255, 255, 0.2); border-radius: 50%; z-index:11; box-sizing:border-box; cursor:pointer;}
.visual-circle-box .circle-box .txt{line-height:94px; font-size: 15px; color:#fff;}
.circle {position:absolute;z-index:1;top:-3px;left:-3px;display:block; width:100px;height:100px;  border-radius:100px; overflow:hidden;}
.circle span{position:absolute;width:50%;height:100%;overflow:hidden}
.circle span em{position:absolute;border-radius:100px; width:100%;height:100%; border:3px solid #fff; transition:transform .25s linear; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;box-sizing: border-box; }
.circle span:first-child{left:0%}
.circle span:first-child em{left:100%;border-top-left-radius:0;border-bottom-left-radius:0;transform-origin:0% 50%;  border-left-color: transparent; border-left-width:0;}
.circle span:last-child{left:50%}
.circle span:last-child em{left:-100%;border-top-right-radius:0;border-bottom-right-radius:0;transform-origin:100% 50%;transition-delay:.25s; border-right-color: transparent; border-right-width:0;}
.circle-box .circle:hover span:first-child em{transform:rotate(180deg);transition:transform .5s ease-out;transition-delay:.25s}
.circle-box .circle:hover span:last-child em{transform:rotate(180deg);transition:transform .25s linear}

/* 메인 비주얼 :: 페이징 */
#mainVisualSlide + .main-visual-pagination {display:none !important;}
#mainVisualSlide.start + .main-visual-pagination {display:block !important;}
#mainVisual .main-visual-pagination {bottom:50px; left:85.5%; z-index:1000;}
.main-visual-pagination .swiper-pagination-bullet {width:60px; height:6px; border:1px solid #fff;  background:none; border-radius:0; margin:0 3px; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;box-sizing: border-box; }
.main-visual-pagination .swiper-pagination-bullet-active {background-color:#fff;}


/* ******************  메인 제품 ********************** */
#mainProduct{ padding-top:30px; padding-bottom:100px}
.main-pro-con{position:relative; left:50%; margin-left:100%; padding-top:40px; z-index:2; transition:margin-left 1.8s 0.3s !important; padding-bottom:80px}
.main-pro-con .main-pro-slide{}
.main-pro-con .main-pro-slide li{width:417px; margin-right:20px; border: 1px solid #ccc;}
.main-pro-con .main-pro-slide li a{display:block; backface-visibility:hidden}
.main-pro-con .main-pro-slide li a .new-thum{position:relative}
.main-pro-con .main-pro-slide li a .new-thum:after{ content:""; display:block; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.02);}
.main-pro-con .main-pro-slide li a .new-thum .thum-img{position:relative; display:block; padding-top:66%}
.main-pro-con .main-pro-slide li a .new-thum .thum-img img{position:absolute; top:0; left:0; width:100%; height:100%}
.main-pro-con .main-pro-slide li a .new-thum .new-cate{position:absolute; top:-18px; left:17px; width:55px; height:56px; line-height:56px; text-align:center; font-weight:700; font-size:11px; letter-spacing:-0.25px; color:#ececea; background-color:#ed1c24}
.main-pro-con .main-pro-slide li a .pro-txt{ position:absolute; left:0; bottom:0; width:100%; box-sizing:border-box; padding:15px 20px; color:#fff; background:rgba(0,0,0,0.6)}
.main-pro-con .main-pro-slide li a .pro-txt .category{font-weight:500; font-size:15px; line-height:1.5;overflow:hidden; font-family: "Ubuntu", sans-serif;}
.main-pro-con .main-pro-slide li a .pro-txt .tit{font-size:20px; letter-spacing:-0.25px; line-height:1.91;overflow:hidden;}
#mainProduct.aos-animate .main-pro-con{margin-left:-720px}
/* 슬라이드 콘트롤 */
#mainProduct .sub-slide-control{ position:relative; z-index:10}
#mainProduct .sub-slide-control > div > div{box-sizing:border-box}
#mainProduct .sub-slide-control .progress{background: linear-gradient(to right, black, black) 0% 0% / 0% 100% no-repeat rgb(245, 245, 245);display: block;width:calc(100% - 230px); height:4px; overflow: hidden;transition: background-size 0.4s ease-in-out 0s; float:left;position: absolute;transform: translateY(-50%);top: 50%;}
#mainProduct .sub-slide-control .arrow_box{display: -ms-flexbox;display: flex;z-index: 1; width: 160px; float:right}
#mainProduct .sub-slide-control .sub-slide-arrow{display: block;position: relative;width: 80px;height: 80px;outline: none;background-color: #999; transition: all .4s ease-in-out; cursor:pointer}
#mainProduct .sub-slide-control .sub-slide-arrow span{position: absolute;top: 36px;width: 29px; height: 7px;transition: all .2s ease-in-out;}
#mainProduct .sub-slide-control .sub-slide-arrow.prev span{ right:26px}
#mainProduct .sub-slide-control .sub-slide-arrow.next span{ left:26px}
#mainProduct .sub-slide-control .sub-slide-arrow span:before{content: ""; position: absolute;right: 0;bottom: 0; left: 3px; height: 1px;background-color: #fff;}
#mainProduct .sub-slide-control .sub-slide-arrow span i{ position:absolute; top:0; display:inline-block;width:30px; height:8px; background:url(../img/sprite_arrow.png) no-repeat}
#mainProduct .sub-slide-control .sub-slide-arrow.prve span i{left: -1px;}
#mainProduct .sub-slide-control .sub-slide-arrow.next span i{right: -1px;transform: rotate(0deg); -moz-transform: scaleX(-1);-o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1);}
@media all and ( min-width: 801px ){	
/*hover active*/
#mainProduct .sub-slide-control .sub-slide-arrow:hover{ background-color:#666}
#mainProduct .sub-slide-control .sub-slide-arrow:hover span{ width:80px;}
#mainProduct .sub-slide-control .sub-slide-arrow:hover span i{ background-position:right top;transform: rotate(0deg); -moz-transform: scaleX(-1);-o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1);}
#mainProduct .sub-slide-control .sub-slide-arrow.next:hover span i{transform: rotate(0deg); -moz-transform: scaleX(1);-o-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1);}
#mainProduct .sub-slide-control .sub-slide-arrow:hover span:before{ background-color:#ccc}
}

/* ******************  메인 비즈니스 ********************** */
#mainBusiness{width:100%;  height: 740px; background:#000; overflow: hidden}
.main_tit-area.busi_tit{ display: inline-block;width: 20%; box-sizing:border-box; position:absolute; top:13vh}
.main_tit-area.busi_tit .tit,.main_tit-area.busi_tit .txt{ color:#fff;}
.main_tit-area.busi_tit .tit .whitespace{ display:block}
.main_tit-area.busi_tit .cm-word-split-JS.splitting .word{ line-height:1.2}
.main-bs-con{position:relative; overflow:hidden; /*background-color:#fff;*/ z-index:99}
.main-bs-con .main-bs-wrap{width:100%; height:100%; padding:0}
.main-bs-con .main-bs-wrap .main-bs-slide{height:100%; display:flex; -webkit-display:flex; position:relative;width: 100%;box-sizing: border-box;-webkit-box-sizing: border-box; padding-left: 30%;}
.main-bs-con .main-bs-wrap .main-bs-item{position:relative; height:100%; /*border-left:1px solid rgba(255,255,255,0.1);*/ box-sizing:border-box; width:33.333%; -webkit-display:flex; -ms-display:flex; display:flex; -webkit-flex-align:end; -ms-flex-align: end;align-items: flex-end; padding-bottom:8%; padding-right:40px}
.main-bs-con .main-bs-wrap .main-bs-item .main-bs-item-area{display:block; height:100%; position:relative}
.main-bs-con .main-bs-wrap .main-bs-item .main-bs-item-area .main-bs-item-inner{height:100%; position:relative;}
.main-bs-control{position:absolute; bottom:32px; left:0; width:100%; text-align:center; z-index:999; backface-visibility:hidden; transform: translateZ(0)}
.main-bs-control .main-bs-conuter{display:none}
.main-bs-control .main-bs-arrow{display:none}
.main-bs-con .main-bs-wrap .main-bs-item .mb-img{}

/* 타이틀 */
.main-bs-con .main-bs-wrap .main-bs-item .bs-thumb{color: #fff;display: flex; align-items: flex-end; height: 100%;}
.main-bs-con .main-bs-wrap .main-bs-item .bs-thumb .default-txt{transition: all .4s ease-in-out; position:relative}
.main-bs-con .main-bs-wrap .main-bs-item .bs-thumb .tit-en{display:block; font-weight:400; font-size:26px; letter-spacing:-0.33px; color:#fff; opacity:0.8; margin-bottom:20px; }
.main-bs-con .main-bs-wrap .main-bs-item .bs-thumb .tit-kr{display:block; font-weight:600; font-size:45px; letter-spacing:0; color:#fff; opacity:1}
.main-bs-con .main-bs-wrap .main-bs-item .bs-thumb .txt{position:relative; margin-top:26px; font-weight:400; font-size:15px; color:#fff; line-height:1.66; transition:all 0.3s; opacity:0; margin-bottom: -48px;}
.main-bs-con .main-bs-wrap .main-bs-item .bs-thumb .txt i{display: block;}
.main-bs-con .main-bs-wrap .main-bs-item .bs-thumb .view-detail{display:inline-block; position:absolute; bottom:0; left:3px; }
.main-bs-con .main-bs-wrap .main-bs-item .bs-thumb .view-detail span{position:relative; display:inline-block; font-weight:500; font-size:12px; color:#fff; letter-spacing:0; padding-right:24px}
.main-bs-con .main-bs-wrap .main-bs-item .bs-thumb .view-detail span:after{position:absolute; content:""; width:17px; height:1px; background-color:#fff; right:0; bottom:4px}
.main-bs-con .main-bs-wrap .main-bs-item .bs-thumb .tit-en,
.main-bs-con .main-bs-wrap .main-bs-item .bs-thumb .tit-kr,
.main-bs-con .main-bs-wrap .main-bs-item .bs-thumb .txt,
.main-bs-con .main-bs-wrap .main-bs-item .bs-thumb .view-detail{backface-visibility:hidden; transform: translateZ(0); z-index:99}
.main-bs-con .main-bs-wrap .main-bs-item .plus-icon{ display:none}

/* 오버 시 */
.main-bs-con .main-bs-bg{position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden}
.main-bs-con .main-bs-bg ul{}
.main-bs-con .main-bs-bg ul .bg{position:absolute; top:0; left:0; width:100%; height:100%}
.main-bs-con .main-bs-bg ul .bg > div{width:100%; height:100%; opacity:0;filter:Alpha(opacity=0); visibility:hidden; transition: opacity 2.5s cubic-bezier(.23,1,.32,1), visibility 2.5s cubic-bezier(.23,1,.32,1); background-size: cover !important;}
.ie-browser .main-bs-con .main-bs-bg ul .bg > div{transition: opacity 1s, visibility 1s}
.main-bs-con .main-bs-bg ul .bg.bg-active > div{visibility:visible; opacity:1.0;filter:Alpha(opacity=100);}
.main-bs-con .main-bs-wrap .main-bs-item.active .bs-thumb .default-txt, .main-bs-con .main-bs-wrap .main-bs-item:hover .bs-thumb .default-txt{padding-bottom:150px}
.main-bs-con .main-bs-wrap .main-bs-item .bs-thumb .txt,
.main-bs-con .main-bs-wrap .main-bs-item .bs-thumb .view-detail{opacity:0; transition:opacity 0.2s; transition-delay:0s}
.main-bs-con .main-bs-wrap .main-bs-item.active .bs-thumb .txt,.main-bs-con .main-bs-wrap .main-bs-item:hover .bs-thumb .txt,
.main-bs-con .main-bs-wrap .main-bs-item.active .bs-thumb .view-detail,.main-bs-con .main-bs-wrap .main-bs-item:hover .bs-thumb .view-detail{opacity:1; transition:opacity 0.4s; transition-delay:0.1s}

@media all and ( min-width: 1081px ){	
  .main-bs-con .main-bs-wrap .main-bs-item:before, .main-bs-con .main-bs-wrap .main-bs-item:after{content: "";position: absolute;left: 0;width: 1px; background-color: #fff;opacity: .25;transition: all .4s ease-in-out; display: block;}
  .main-bs-con .main-bs-wrap .main-bs-item:before{ top: 0; height: 100%}	
  .main-bs-con .main-bs-wrap .main-bs-item.active:before{ top:-53%}
  .main-bs-con .main-bs-wrap .main-bs-item.active:after{bottom: 0;height: 8%;}	
}
.main-bs-con .main-bs-wrap .main-bs-item .bs-thumb .view-detail:before{position: absolute; top: 0;left: 0;width: 100%; height: 100%; content: "";background: url(../img/view-detail_btn_line.png) no-repeat; animation: spin 5s linear infinite;-webkit-animation: spin 5s linear infinite;}
@keyframes spin { 
	100% { transform:rotate(360deg); } 
}


/* ******************  메인 브랜드 ********************** */
#mainBrand{ margin-bottom:130px}
#mainBrand > div{padding-top: 125px;}
.information{ margin-top:40px}
.information .info_txt_area {position: absolute; top: 0; left: 0; display: inline-block; height: 100%; color: #fff; z-index: 90; padding: 9% 0 0 50px; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s; -ms-transition:all 0.5s; transition:all 0.5s; width:42%; box-sizing:border-box}
.information .info_img_area {overflow: hidden;width: 100%;height: auto;padding-top: 44%;}
.information .left_area img, .information .right_area img{width:auto; height: 100%; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -moz-transition:all 0.5s; -o-transition:all 0.5s; -ms-transition:all 0.5s; transition:all 0.5s; position:absolute; left:50%; top:0; margin-left:-50%;}
.information .info_txt_area .information_bg {position: absolute; top: 0; left: 0; height: 100%; width:100%; background-color: #222; opacity: 0.9; z-index: -1; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; -o-transition:all 0.3s; -ms-transition:all 0.3s;transition:all 0.3s;}
.information .info_txt_area h2 {font-size: 22px; font-weight: 500; margin-bottom:17px; letter-spacing: -0.5px;}
.information .info_txt_area p {font-size: 16px; font-weight: 300; width: 101px; line-height: 1.4; opacity: 0.8; letter-spacing: -0.5px; width:95%; min-width:200px}
.information .info_txt_area .detail_btn {position: relative; display: inline-block; font-weight: 500; font-size: 15px; color: #fff;letter-spacing: 0;padding-right: 24px; margin-top:50px}
.information .info_txt_area .detail_btn:after{position: absolute;content: ""; width: 17px; height: 1px; background-color: #fff;right: 0; bottom: 4px;}
.information .left_area {position: relative; width: 48%; margin: 0 1%; float: left; overflow: hidden;}
.information .right_area {position: relative; width: 48%; margin: 0 1%; float: right; overflow: hidden;}

@media all and ( min-width: 801px ){
	.information>a:hover .info_txt_area .information_bg {width: 285px; background: #000;}
	.information>a:hover .info_txt_area {padding-left: 67px;}
	.information>a:hover .info_img_area img {-webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1);}
}



/* *******************************************************
 * 미디어쿼리 시작
******************************************************** */
/* ******************  메인 레이아웃 :: 공통 ********************** */
@media all and (max-width:1580px){
	.main-area {padding:80px 30px;}
}
@media all and (max-width:1024px){
	.main-area {padding:60px 15px}
}
@media all and (max-width:800px){
	.main-area {padding:50px 15px}
	.main_tit-area .tit{ font-size:36px}
	.main_tit-area .txt{ font-size:14px; margin-top: 0}
	/* 버튼 */
	.main-page-btn .arrow{width:22px; height:22px; margin-left:5px}
	.main-page-btn .arrow i{font-size:17px; line-height:22px}
}
@media all and (max-width:620px){
	.main_tit-area .tit{ font-size:26px}
}
@media all and (max-width:480px){
	/* 버튼 */
	.main-page-btn{ font-size:10px; top: 40%;}
	.main-page-btn .arrow{width:16px; height:16px; margin-left:5px}
	.main-page-btn .arrow i{font-size:13px; line-height:18px}
}
/* ****************** 메인 컨텐츠 :: 메인 비주얼 ********************** */
@media all and (max-width:1750px){
	#mainVisual .area-box {padding:0 30px;}
	/* 메인비주얼 :: 영상 :: 컨트롤바 */
	.main-video-control {width:auto; z-index:9;}
	.main-video-control .control-box {margin:100px 0 0 -80px;}
	/* 메인 비주얼 :: 슬라이드 :: 카운터 */
	.main-visual-conuter .inner {margin: 110px 0 0 -90px;}
	/* 메인비주얼 :: 텍스트 */
	.main-video-txt .inner-box {max-width:none; padding-left: 70px;}
	/* 메인 비주얼 :: 로딩circle */
	.visual-circle-box {left:auto; margin-left:0; right:0;}
	/* 메인 비주얼 :: 페이징 */
	#mainVisual .main-visual-pagination {right:30px; left:auto;}
}

@media all and (max-width:1024px){
	#mainVisual .area-box {padding:0 15px;}
	/* 메인비주얼 :: 텍스트 */
	.main-video-txt .main-visual-txt2{ font-size:48px}
	.main-video-txt .main-visual-txt3{ font-size:20px}
	.main-video-txt .main-visual-txt{ font-size:20px}
	/* 메인 비주얼 :: 페이징 */
	#mainVisual .main-visual-pagination {right:15px; }
}
@media all and ( max-width: 800px ){
	/* 메인비주얼 :: 영상 :: 컨트롤바 */
	.main-video-control {position:absolute; width:100%; top:auto; transform:none;  bottom:60px; left:0;}
	.main-video-control .area-box {position:relative; height:auto;}
	.main-video-control .control-box {position:static; transform:none; margin:0; justify-content: center; }
	/*메인 비주얼 :: 이미지*/
	.main-visual-item.item1 .visual-img{ background-position:50% 50%}
	.main-visual-item.item2 .visual-img{ background-position:40% 50%}
	.main-visual-item.item3 .visual-img{ background-position:20% 50%}
	/* 메인 비주얼 :: 슬라이드 :: 카운터 */
	.main-visual-conuter {position:absolute; width:100%; top:auto; transform:none;  bottom:60px; left:0; font-size:14px;}
	.main-visual-conuter .area-box { height:auto;}
	.main-visual-conuter .inner {position:static; transform:none; margin:0; text-align: center; }
	.main-visual-conuter .cur-num {font-size: 23px;}
	/* 메인 비주얼 :: 텍스트 */
	.main-video-txt { padding:0 30px; box-sizing:border-box; top:42%}
	.main-video-txt .inner-box {padding-left:0;}
	.main-video-txt .main-visual-txt1{ font-size:20px;}
	.main-video-txt .main-visual-txt2{ font-size:40px}
	.main-video-txt .main-visual-txt3{ font-size:20px}
	.main-video-txt .main-visual-txt{ font-size:20px;}
	.main-video-txt .txt {font-size:20px; margin-top: 20px;}
	.main-video-txt img {height:40px;}
	.main-video-txt .inner-box .main-visual-more-btn{font-size:13px; width:130px; height:40px; line-height:40px; padding:0 15px;}
	.main-video-txt .inner-box .main-visual-more-btn i {right:15px; line-height:40px;}	
	/* 메인 비주얼 :: 로딩circle */
	.visual-circle-box {top:auto; bottom: 120px; left:50%; margin-left:-45px; right:auto;}
	.visual-circle-box .circle-box {width:60px; height:60px; margin:auto;}
	.visual-circle-box .circle-box .txt{line-height:54px; font-size: 10px; }
	.circle { width:60px;height:60px;  border-radius:60px; }
	/* 메인 비주얼 :: 페이징 */
	#mainVisual .main-visual-pagination {bottom:30px; width:100%; right:0;}
	#mainVisual .main-visual-pagination .swiper-pagination-bullet {width:20px; height:3px; }
}
@media all and ( max-width: 480px ){
	/* 메인 비주얼 :: 텍스트 */
	.main-video-txt { padding:0 15px;}
	.main-video-txt .main-visual-txt1{ font-size:14px; margin-bottom: 10px;}
	.main-video-txt .main-visual-txt2{ font-size:30px}
	.main-video-txt .main-visual-txt3 {font-size: 15px;}
	.main-video-txt .main-visual-txt{margin-top: 10px; font-size: 16px;}
}
@media (orientation: landscape) and (max-height:700px){
	#mainVisual.full-height{height:650px!important;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠1(PRODUCT) -------- */
@media all and ( max-width: 1580px ){	
	#mainProduct{padding: 0}
}
@media all and ( max-width: 1450px ){	
	#mainProduct.aos-animate .main-pro-con{left:0; margin-left:0}
}
@media all and ( max-width: 1024px ){		
	#mainProduct{ padding-top:0;  padding-bottom: 20px;}
	.main-pro-con .main-pro-slide li{width:380px}
}
@media all and ( max-width: 800px ){	
	.main-pro-con{left:1000px; transition:left 1.8s 0.3s !important; margin-left:0; padding: 30px 0 50px;}
	.main-pro-con .main-pro-slide{margin:0 -5px}
	.main-pro-con .main-pro-slide li{margin:0 5px;}
	.main-pro-con .main-pro-slide li a .new-thum .new-cate{width:42px; height:42px; line-height:42px; left:10px}
	.main-pro-con .main-pro-slide li a .pro-txt{ padding:10px;}
	.main-pro-con .main-pro-slide li a .pro-txt .tit{font-size:15px;}
	#mainProduct.aos-animate .main-pro-con{left:0;}
	#mainProduct .sub-slide-control{}
	#mainProduct .sub-slide-control .progress{width: calc(100% - 180px);}
	#mainProduct .sub-slide-control .arrow_box{ width:120px}
	#mainProduct .sub-slide-control .sub-slide-arrow{ width:60px; height:60px;}
	#mainProduct .sub-slide-control .sub-slide-arrow span{ top:26px}
	#mainProduct .sub-slide-control .sub-slide-arrow.prev span{ right:14px}
	#mainProduct .sub-slide-control .sub-slide-arrow.next span {left: 14px;}
	
}
@media all and ( max-width:620px ){	
	#mainProduct{ padding-bottom:0px}
	.main-pro-con .main-pro-slide li a .pro-txt{position:inherit}
	.main-pro-con .main-pro-slide li a .pro-txt .category{ font-size:11px}
	.main-pro-con .main-pro-slide li a .pro-txt .tit{font-size:14px;}
}
@media all and ( max-width:480px ){
	.main-pro-con{ padding-bottom:30px}
	.main-pro-con .main-pro-slide li a .pro-txt .category{ font-size:10px}	
	.main-pro-con .main-pro-slide li a .pro-txt .tit{font-size:13px;}
	#mainProduct .sub-slide-control .progress{width: calc(100% - 150px);}
	#mainProduct .sub-slide-control .arrow_box{ width:100px}
	#mainProduct .sub-slide-control .sub-slide-arrow{ width:50px; height:50px;}
	#mainProduct .sub-slide-control .sub-slide-arrow span{ top:19px;width: 20px;}
	#mainProduct .sub-slide-control .sub-slide-arrow span i{ width:22px}
}

/* ******************  메인 비즈니스 ********************** */
@media all and (max-width:1580px){
	#mainBusiness .full-section-wrap {padding:0 30px; box-sizing: border-box}
}
@media all and (max-width:1240px){
	.main_tit-area.busi_tit{width:25%}
}
@media all and (max-width:1080px){
	#mainBusiness{margin-bottom: 10px; height: 780px;}
	#mainBusiness .full-section-wrap{ padding:80px 30px}
	.main_tit-area.busi_tit{ position:inherit; width:100%}
	.main_tit-area.busi_tit .tit .whitespace{ display:inline-block; margin-left: 10px}
	.main-bs-con .main-bs-wrap .main-bs-slide{display: block;width: 100%;height: auto;padding: 0;margin-top: 40px;}
	.main-bs-con .main-bs-wrap .main-bs-item{display: block;width: 100% !important;height: auto; margin-top: 10px;padding: 0;position: relative;overflow: hidden;}
	.main-bs-con .main-bs-wrap .main-bs-item:first-child{ margin-top:0}
	.main-bs-con .main-bs-wrap .main-bs-item .main-bs-item-area{margin: 0; cursor: pointer; background-color: rgba(0,0,0,0.6);}
	.main-bs-con .main-bs-wrap .main-bs-item .bs-thumb{ display:block; box-sizing: border-box; padding:25px 45px;}
	.main-bs-con .main-bs-wrap .main-bs-item .bs-thumb .tit-en{ font-size:14px; margin-bottom:12px}
	.main-bs-con .main-bs-wrap .main-bs-item .bs-thumb .tit-kr{ font-size:26px}
	.main-bs-con .main-bs-wrap .main-bs-item .bs-thumb .txt{ width:60%; margin-top: 12px}
	.main-bs-con .main-bs-wrap .main-bs-item .bs-thumb .view-detail{ transform: scale(0.6);margin-left: -10px;}	
	.main-bs-con .main-bs-wrap .main-bs-item.active .bs-thumb .default-txt, .main-bs-con .main-bs-wrap .main-bs-item:hover .bs-thumb .default-txt{ padding-bottom: 120px}
	.main-bs-con .main-bs-wrap .main-bs-item .plus-icon{position: absolute;top:50%; right: 45px;z-index: 9;color: #fff;font-size: 17px; margin-top: -8.5px; display:block}
	.main-bs-con .main-bs-wrap .main-bs-item.active .plus-icon{display:none}
	
}
@media all and (max-width:800px){
	#mainBusiness{ height:620px; margin-bottom: 0}
	#mainBusiness .full-section-wrap{ padding:50px 15px}
	.main-bs-con .main-bs-wrap .main-bs-item .bs-thumb{ padding:20px;}
	.main-bs-con .main-bs-wrap .main-bs-item .bs-thumb .txt{ width:80%}
	.main-bs-con .main-bs-wrap .main-bs-item .bs-thumb .txt{ font-size:12px}
	.main-bs-con .main-bs-wrap .main-bs-item .bs-thumb .tit-en{ font-size:11px}
	.main-bs-con .main-bs-wrap .main-bs-item .bs-thumb .tit-kr{ font-size:19px}
	.main-bs-con .main-bs-wrap .main-bs-item .main-bs-item-area .main-bs-item-inner{padding-bottom: 10px;}
}
@media all and (max-width:480px){
	#mainBusiness{ height:auto;}
	.main-bs-con .main-bs-wrap .main-bs-slide{margin-top:20px}
	.main-bs-con .main-bs-wrap .main-bs-item .bs-thumb .txt{ width:90%}
	.main-bs-con .main-bs-wrap .main-bs-item .plus-icon{right:20px; font-size:14px}
}

/* ******************  메인 브랜드 ********************** */
@media all and (max-width:1580px){
	#mainBrand{ margin-bottom:20px}
}
@media all and (max-width:1240px){
	#mainBrand > div{ padding-top:95px}
	.information .info_txt_area{ padding-left:32px;width:47%}
	.information .info_img_area{ padding-top:53%}
	.information .left_area img, .information .right_area img{margin-left: -57%;}
}
@media all and (max-width:1240px) and (min-width:801px){
	.information>a:hover .info_txt_area {padding-left: 42px;}
}
@media all and (max-width:1024px){
	.information{ margin-top:20px}
	.information .info_txt_area{ width:55%;}
	.information .info_txt_area h2{ font-size:20px}
	.information .info_txt_area p{ font-size:13px}
	.information .info_txt_area .detail_btn{ font-size:12px;}	
}

@media all and (max-width:800px){
	.main_tit-area .bg_tit{ font-size:12vw}
	#mainBrand .information >a{ width:100%; box-sizing:border-box; float:none; display:block}
	.information .left_area{margin: 0;}
	.information .right_area{ margin: 0; margin-top:15px;}
	.information .info_img_area{ padding:inherit;}
	.information .left_area img, .information .right_area img{ position:inherit; padding:0; margin:0; left: 0;width: 100%; max-width: 100%;}
	.information .info_txt_area{ width:100%; padding: 5% 4%;}
	.information .info_txt_area p br{display:none}
	.information .info_txt_area .information_bg{ background-color:#000; opacity:0.25;}
	.information .info_txt_area h2{ font-size:23px}
	.information .info_txt_area p { font-size: 15px; width: 60%;}
	
}
@media all and (max-width:540px){
	#mainBrand{ margin-bottom:0;}
	#mainBrand > div{ padding-top:65px}
	.main_tit-area .bg_tit{ top: -2vh;}
	.information .info_txt_area h2 {font-size: 18px; margin-bottom: 10px;}
	.information .info_txt_area p{ font-size:12px; line-height: 1.65;}
}
@media all and (max-width:480px){
	#mainBrand > div{ padding-top:45px}
	.information .info_txt_area p{ width:85%}
	.information .info_txt_area .detail_btn{margin-top: 20px;}
}