 @charset "utf-8";

/* **************************************** *
 * Main Visual
 * **************************************** */
#mainVisual{overflow:hidden; height:969px; /* height:100vh; */ min-height:700px; position:relative; background:#fff;} 
.main-visual-wrapper{position:relative; height:100%; margin-left:255px; }
/* 메인비주얼 :: 이미지 */
.main-visual-slider {
	overflow:hidden;
	width:100%;
	height:100%;
	background-color:#000;
}
.main-visual-slider .swiper-slide {
	overflow: hidden;
	color: #fff;
}
.main-visual-slider .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 1;
    background: -moz-linear-gradient(top, black 0, transparent 50%, transparent 63%, rgba(0, 0, 0, 1) 100%);
    background: -webkit-linear-gradient(top, black 0, transparent 50%, transparent 63%, rgba(0, 0, 0, 1) 100%);
    background: linear-gradient(to bottom, black 0, transparent 50%, transparent 63%, rgba(0, 0, 0, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#c9000000', GradientType=0);
    transition: all 2.5s ease;
}
.main-visual-slider .swiper-slide-duplicate-active .overlay,
.main-visual-slider .swiper-slide-active .overlay {
    opacity: .7;
}
.main-visual-slider .swiper-slide .visual-img{position:absolute; top:0px; left:0px; bottom:0px; right:0px; width:1649px; height:969px;; width:100%; /* background-size:cover !important; */}
.main-visual-slider .swiper-container {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}
.main-visual-slider .slide-inner {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	background-size: cover;
	background-position: center;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: left;
}

/* 메인비주얼 :: 텍스트 */
.main-visual-item .visual-txt-con{position:absolute; bottom:35%; left:10%; z-index:11; color:#fff; font-size:20px;}
.main-visual-item .visual-txt-con span{display:block; transform:translateY(100%)}
.main-visual-item .visual-txt-con .main-visual-tit{overflow:hidden; font-size:2.2em; letter-spacing:2px; font-weight:700; margin-bottom:0.58em; line-height:1.5}
.main-visual-item .visual-txt-con .main-visual-tit.test{font-weight:400;}
.main-visual-item .visual-txt-con .main-visual-txt{overflow:hidden; font-size:1em; font-weight:300; letter-spacing:-0.7px; opacity:0.5;}
.main-visual-item .visual-txt-con .main-visual-btn-box{overflow:hidden; margin-top:2.2em; }
.main-visual-item .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%); background:none}
.main-visual-item .visual-txt-con .main-visual-btn:before{background-color:#fff;}
.main-visual-item .visual-txt-con .main-visual-btn em{display:inline-block; font-size:15px; font-weight:700; letter-spacing:0.25px; text-indent:20px; color:#fff; }
.main-visual-item .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}
@media all and ( min-width: 1921px ) , ( min-height: 969px ), ( max-width: 1366px) {
	.main-visual-slider .swiper-slide .visual-img{height:100%; background-size:cover !important;
	}
	.main-visual-slider .swiper-slide .visual-img img{display:none}
}
@media all and ( min-width: 1025px ){
	.main-visual-item .visual-txt-con .main-visual-btn:hover em,
	.main-visual-item .visual-txt-con .main-visual-btn:hover i{color:#222;}
	.main-visual-item .visual-txt-con .main-visual-btn:hover em{/*text-indent:20px; letter-spacing:0.75px*/}
	.main-visual-item .visual-txt-con .main-visual-btn:hover i{right:20px;}
}
/* -------- 사이드 -------- */
/* 메인 비주얼 :: 사이드 :: 텍스트 */
.main-visual-side-con{position:absolute; top:170px;bottom:0px; left:0px; width:255px; }
.main-visual-side-con .main-visual-side-txt { font-family:play; position:absolute; bottom:240px; left:50%; width:400px; margin-left:-8px; color:rgba(0,0,0,0.5); font-size:14px; letter-spacing:0px; font-weight:bold; transform:rotate(-90deg); transform-origin:0% 0%;}
.main-visual-side-con .main-visual-side-txt em{}

/* 메인 비주얼 :: 스크롤아이콘 */
.main-scroll-icon{overflow:hidden; position:absolute; bottom:0; left:50%; margin-left:-1px; width:2px; height:180px; z-index:9; background-color:#cfcfcf;}
.main-scroll-icon::after {
  display: block;
  content: "";
  width: 100%;
  height: 28px;
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
  animation:  scroll_ani 2s infinite;
}

@keyframes scroll_ani {
    0%, 20% {
        top: -28px;
    }
	100% {
        top: 100%;
    }
}

/* 메인 비주얼 :: 버튼, 카운터, 로딩바 */
.main-visual-controls{position:absolute; width:165px; height:94px; right:0; bottom:0px; padding:0 45px; background-color:#fff; z-index:11; text-align:center;}
.main-visual-control-btns{margin:40px 0 20px; }
.main-visual-control-btns button{width:34px; height:11px;}
.main-visual-control-btns .slide-prev-btn{
	float:left;
	background: url("../_images/icon/cm_prev_arrow.svg") no-repeat;
}
.main-visual-control-btns .slide-next-btn{
	float:right;
	background:url("../_images/icon/cm_next_arrow.svg") no-repeat
}
.main-visual-control-btns .main-visual-conuter{display:inline-block; position:relative; top:-2px; vertical-align:middle; line-height:11px; font-size:12px; color:#000; }
.main-visual-control-btns .main-visual-conuter .total-num{position:relative; margin-left:20px; color:rgba(0,0,0,0.5)}
.main-visual-control-btns .main-visual-conuter .total-num:before{position:absolute; left:-10px; width:1px; height:13px; background-color:#e5e5e5; content:"";}
.main-visual-loading-bar{width:100%; height:2px; background-color:#eee;}
.main-visual-loading-bar span{display:block; width:0; height:100%; background-color: #000}

/* 메인 비주얼 :: Custom Bullet */
.main-visual-pagination{position:absolute; bottom:53px; left:-32px; z-index:11; }
.main-visual-pagination .main-visual-paging-item{float:left; filter: grayscale(100%); margin-left:23px; cursor:pointer; background-color:#000;}
.main-visual-pagination .main-visual-paging-item:focus{outline:none;}
.main-visual-pagination .main-visual-paging-item:first-child{margin-left:0}
.main-visual-pagination span{display:block; overflow:hidden; width:179px; height:102px; border:1px solid #9a9a9a;}
.main-visual-pagination img{width:100%; height:100%; transition:all 1s; transform:scale(1.1)}
.main-visual-pagination .swiper-pagination-bullet-active{filter: grayscale(0); }
.main-visual-pagination .swiper-pagination-bullet-active span{border-color:#fff}
.main-visual-pagination .swiper-pagination-bullet-active img{transform:scale(1.0)}
body.ie-browser .main-visual-pagination .main-visual-paging-item img{opacity:0.3}
body.ie-browser .main-visual-pagination .swiper-pagination-bullet-active img{opacity:1}


/* **************************************** *
 * Main Content
 * **************************************** */

/* ******************  메인 제품영역 ********************** */
#mainProductContent{position:relative; padding:107px 0 195px}
/* -------- 제품영역 :: 왼쪽 -------- */
.main-prd-wrapper{position:relative; max-width:1602px; margin:0 auto}
/* 제품영역 :: 왼쪽 */
.main-prd-wrapper .main-prd-left-box{position:relative;}
.main-prd-wrapper .main-visual-controls{right:auto; left:59%; transform:translateX(-100%); }
.main-prd-item .main-prd-photo-con{overflow:hidden; /* float:left; */ position:relative; width:54%; /* height:747px; */ }
.main-prd-item .main-prd-photo-con:after{position:absolute; top:0px; width:100%; height:100%; background-color:#FFF; content:""; transition:height 1s cubic-bezier(0.22, 0.16, 0, 0.91); z-index:1;}
.main-prd-item .main-prd-photo-con span{display:block; height:0; padding-top:86.05%; position:relative; opacity:0; transition:all 1s; transform:scale(1.2) }
.main-prd-item .main-prd-photo-con img{position:absolute; bottom:0px; left:0px; width:100%; transition:all 1s; }
[data-aos=prd-img-bg].aos-animate .main-prd-item .main-prd-photo-con:after{
	height:0;
}
[data-aos=prd-img-bg].aos-animate .main-prd-item .main-prd-photo-con span{
	opacity:1.0;
	transform:scale(1)
}
/* 제품영역 :: 우측정보 */
.main-prd-item .main-prd-info-con{position:relative; /* float:right; width:46%; height:747px; */ position:absolute; top:0px; right:60px; bottom:0px; width:50%; font-size:16px;color:#1b1b1b; box-sizing:border-box; padding-left:161px; }
.main-prd-item .main-prd-info-con span{display:inline-block;}
.main-prd-item .main-prd-info-con .main-prd-cate{overflow:hidden; font-size:1.25em; margin-bottom:2em;}
.main-prd-item .main-prd-info-con .main-prd-cate span{font-weight:700; padding-bottom:10px; border-bottom:3px solid #1b1b1b; }
.main-prd-item .main-prd-info-con .main-prd-name{overflow:hidden; font-size:2.5em; letter-spacing:-0.5px; font-weight:300; line-height:1.2; margin-bottom:0.825em;}
.main-prd-item .main-prd-info-con .main-prd-name b{font-weight:700;}
.main-prd-item .main-prd-info-con .main-prd-txt{overflow:hidden; color:#666; font-size:1em; line-height:1.5; margin-bottom:4.125em}
.main-prd-item .main-prd-info-con .main-prd-more-btn-box{overflow:hidden;}
.main-prd-item .main-prd-info-con .main-prd-more-btn{width:228px; height:58px; line-height:58px; }

/* 제품영역 :: Deco :: 라인 */
.main-prd-deco-line-box{position:absolute; top:180px; left:54%; z-index:11;}
.main-prd-deco-line-box span{position:relative; display:block !important; height:12px; width:80px; margin-bottom:14px; transition:transform 0.7s; transform:scaleX(0)}
.main-prd-deco-line-box .deco-line1{margin-left:20px; background-color:#0b1c3e; transform-origin:right center;}
.main-prd-deco-line-box .deco-line2{width:214px; margin-left:-34px; background-color:#7fb278; transform-origin:left center;}
.main-prd-deco-line-box .deco-line3{background-color:#9dd7e1; transform-origin:center center; }
/* 제품영역 :: Deco :: Circle */
.main-prd-deco-circle-box{position:absolute; top:0; left:54%; transform:translate(-50%); z-index:11;}
.main-prd-deco-circle-box span{display:inline-block; opacity:0; transition:opacity 1.2s 0.5s}
[data-aos=decoline].aos-animate span{
	transform:scaleX(1);
}
[data-aos=decocircle].aos-animate span{
	 opacity:1.0;
	 animation: spin 15s linear infinite;
	-webkit-animation: spin 15s linear infinite;
}


/* -------- 제품영역 :: 오른쪽 -------- */
.main-prd-copy-wrapper{position:absolute; top:180px; /* right:0px;  */ left:1602px; width:867px; display:none }
.main-prd-copy-wrapper .main-prd-deco-circle-box{top:auto; bottom:0px; left:0; right:auto; transform:translate(-50%,50%); z-index:0}
.main-prd-copy-wrapper .main-prd-copy-item{position:relative; overflow:hidden; height:670px; background-color:#000;}
.main-prd-copy-wrapper .main-prd-copy-item img{position:absolute; bottom:0px; left:0px; opacity:0.3}

/* ******************  메인 CompanyInfo/News ********************** */
#mainInfoNewsContent{position:relative; padding:183px 0 0;}
/* -------- Company Info -------- */
#mainCompanyContent{position:relative; padding-bottom:90px; border-bottom:1px solid #fff; border-bottom-color:rgba(255,255,255,0.2);}
.main-company-top-box{position:relative; color:#fff; font-size:16px; letter-spacing:-0.35px; }
.main-company-top-box .fade-up{display:inline-block; transform:translateY(100%); transition:all 1s}
.main-company-top-box .main-company-en-txt{display:block; overflow:hidden; color:#fff; font-size:1.25em; font-weight:700;}
.main-company-top-box .main-company-en-txt em{display:inline-block; }
.main-company-top-box .main-company-txt{overflow:hidden; font-size:2.5em; font-weight:300; letter-spacing:-0.65px; line-height:1.4; margin:0.65em 0 1em;}
.main-company-top-box .main-company-txt .fade-up{transition-delay:0.2s; transition-duration:1.5s}
.main-company-top-box .main-company-txt b{font-weight:600;}
.main-company-top-box .main-company-txt2{overflow:hidden; color:#a1b1ba; font-size:1em;}
.main-company-top-box .main-company-txt2 .fade-up{transition-delay:0.7s;}
/* 우측 more 버튼 */
.main-company-more-btn{
	position:absolute; 
	top:45px; left:605px;
	width:92px;
	height:92px;
	border:3px solid #fff;
	border-color:rgba(255,255,255,0.5);
	border-radius:50%;
	opacity:0;
	transition:transform 0.5s 1s, opacity 0.5s 1s;
	transform:translateY(30px);
}
.main-company-more-btn .arrow-icon{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
.main-company-more-btn .arrow-icon svg{
	width:35px;
	height:35px;
}
.main-company-more-btn .arrow-icon path{
	fill:#eff5f7;
}
.main-company-top-box .circle-icon svg{
	overflow: visible; 
	position:absolute;
	top:0px;
	left:-1px;
	fill:none; 
	stroke:#fff;
	transform:rotate(-90deg);
}
.main-company-top-box .circle-icon svg circle { 
	transform-origin: center; 
	stroke: #fff; 
	stroke-dasharray: 360; 
	stroke-dashoffset: 360; 
	stroke-width: 3px; 
}
.main-company-more-btn:hover .circle-icon svg circle{animation:circleAni  ease 1s alternate forwards;}
.main-company-more-btn:hover .arrow-icon path{fill:#fff;}
/* Circle 데코 */
.main-company-deco-circle-box{position:absolute; top:0px; left:0px; transform:translate(-50%,-50%)}
.main-company-deco-circle-box .deco-circle{display:block; opacity:0;}
/* Section Active */
[data-aos=company-fade-up].aos-animate .fade-up{
	transform:translateY(0);
}
[data-aos=company-fade-up].aos-animate .deco-circle{
	display:inline-block;
	 opacity:1.0;
	-webkit-animation: spin 15s linear infinite;
	 animation: spin 15s linear infinite;
}
[data-aos=company-fade-up].aos-animate .main-company-more-btn{
	opacity:1.0;
}
@media all and ( min-width: 801px ){
	[data-aos=company-fade-up].aos-animate .main-company-more-btn{
		transform:translateY(0);
	}
}

/* -------- 뉴스 -------- */
#mainNewsContent{position:relative;}
#mainNewsContent .main-news-inner{overflow:hidden; overflow:hidden; padding:70px 0 }
/* 뉴스 :: 타이틀박스 */
.main-news-tit-inner{transition:all 1s; transform:translateY(100%)}
.main-news-tit-box{overflow:hidden; margin-bottom:54px;}
.main-news-tit-box h3{float:left; color:#fff; font-size:40px; font-weight:700}
.main-news-tit-box .main-news-controls{float:left; margin-left:90px;}
.main-news-tit-box .main-news-controls i{font-size:28px; color:#fff;}
.main-news-tit-box .main-news-controls button{opacity:.5; display:inline-block; vertical-align:middle; transition:all 0.5s}
.main-news-tit-box .main-news-controls a{display:inline-block; vertical-align:middle; margin:0 25px;}
.main-news-tit-box .main-news-controls button:hover{opacity:1.0}
.main-news-tit-box .main-news-controls .news-prev-btn:hover{transform:translateX(-5px)}
.main-news-tit-box .main-news-controls .news-next-btn:hover{transform:translateX(5px)}
/* 뉴스 :: 리스트 */
.main-news-list-con{margin:0 -29px;}
.main-news-list-con .bbs-basic-gallery-con{margin:0}
.main-news-list-con .bbs-basic-gallery-con li {margin:0 30px;}
.main-news-list-con .bbs-basic-gallery-con li a .gallery-txt-con{padding-bottom:0}
.main-news-list-con .bbs-basic-gallery-con li a .gallery-txt-con .gal-tit{color:#fff;}
body:not(.ie-browser)  .main-news-list-con .bbs-basic-gallery-con li a {opacity:0; transition:all 0.5s;}
body:not(.ie-browser) .main-news-list-con .bbs-basic-gallery-con .gallery-thum-box:after{position:absolute; top:0px; left:0px; width:100%; height:100%;  background-color:#eee; content:""; transition:height 1s cubic-bezier(0.22, 0.16, 0, 0.91); z-index:1;}
body:not(.ie-browser) .main-news-list-con .bbs-basic-gallery-con .gallery-thum{opacity:0; transition:all 1s; transform:scale(1.2) }
/* 뉴스 :: Active */
[data-aos=news-fade-up].aos-animate .main-news-tit-inner{
	transform:translateY(0)
}
body:not(.ie-browser) [data-aos=news-fade-up].aos-animate .bbs-basic-gallery-con a{
	opacity:1.0;
}
body:not(.ie-browser) [data-aos=news-fade-up].aos-animate .bbs-basic-gallery-con .gallery-thum-box:after{
	height:0;
}
body:not(.ie-browser) [data-aos=news-fade-up].aos-animate .bbs-basic-gallery-con .gallery-thum{
	opacity:1.0;
	transform:scale(1)
}

/* -------- 하단 BG -------- */
.main-bottom-bg-con {
	position: absolute;
	left:0;
	top:0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #051a2b;
}
.main-bottom-bg-con .bg-img{
	position: absolute;
	width: 120%;
	height: 120%;
	top: -10%;
	left: -10%;
	background:url(../_images/main/main_company_news_bg.jpg) no-repeat 50% 50%;
	background-size:cover;
}
