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


/* ******************  메인 비주얼 ********************** */
/* html{overflow-x: hidden;} */
#mainVisual{overflow:hidden; width:100%; height:500px; position:relative; background-color: #000;}	/* 비주얼높이값 이미지에맞게 수정 */
#mainVisual.full-height{height:1030px;}
.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;}
.main-visual-item .main-visual-pc-img{
	position: absolute;left: 0;top: 0;
	width:100%;
	height:100%;
	/*background-size:cover !important;*/
	-webkit-transition: transform 2s ease-in-out, opacity 2s ease-in-out;
	-moz-transition: transform 2s ease-in-out, opacity 2s ease-in-out;
	-ms-transition: transform 2s ease-in-out, opacity 2s ease-in-out;
	-o-transition: transform 2s ease-in-out, opacity 2s ease-in-out;
	transition: transform 2s ease-in-out, opacity 2s ease-in-out;	
    transform: scale(1.2) rotate(0.003deg);
    opacity: 0.4;
}
.main-visual-item .main-visual-m-img{display:none;}

/* 메인 비주얼 :: 텍스트 */
.main-visual-item .main-visual-txt-con{position:absolute; top:50%; margin-top: -230px; left:0px; width:100%; z-index: 1; text-align: center;} /* margin-top은 조정 (텍스트영역 높이의 반) */
.main-visual-item .main-visual-txt-con .main-visual-txt-inner{position: relative; -ms-word-break: keep-all; word-break: keep-all;}
.main-visual-item .main-visual-txt-con .main-visual-txt1,
.main-visual-item .main-visual-txt-con .main-visual-txt2{
	opacity:0;filter:Alpha(opacity=0);
	-ms-transform: translateY(50px); 
    -o-transform: translateY(50px); 
    -moz-transform: translateY(50px);
    -webkit-transform: translateY(50px); 
     transform: translateY(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-item .main-visual-txt-con .main-visual-txt1{font-size:50px; line-height: 70px; color:#fff; font-weight: 600; margin-bottom: 20px;}
.main-visual-item .main-visual-txt-con .main-visual-txt2{font-size:18px; line-height: 1.2; color:rgba(255,255,255,0.7); font-weight: 300; -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-item .main-visual-txt-con .main-visual-txt2 .m-br{display: none;}

/* 메인 비주얼 :: active효과 */
.main-visual-item.active-item .main-visual-pc-img, .main-visual-item.active-item .main-visual-m-img{
	-ms-transform: scale(1) rotate(0.003deg);
	-o-transform: scale(1) rotate(0.003deg);
	-moz-transform: scale(1) rotate(0.003deg);
	-webkit-transform: scale(1) rotate(0.003deg);
	transform: scale(1) rotate(0.003deg);
    opacity: 1;
}
.main-visual-item.active-item .main-visual-txt1,
.main-visual-item.active-item .main-visual-txt2,
.main-visual-item.active-item .main-visual-more-btn{
	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-con .slick-dots{position:absolute; width:100%; text-align:center; bottom:6%;}
.main-visual-con .slick-dots li{display:inline-block; margin:0 5px;}
.main-visual-con .slick-dots li button{
	cursor:pointer; margin:0px; padding:0px; background:none; font-size:0; width:8px; height:8px; background-color:rgba(255,255,255,0.7); 
	-webkit-border-radius:8px;-moz-border-radius:8px;-o-border-radius:8px;border-radius:8px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;
}
.main-visual-con .slick-dots li.slick-active button{width: 28px; background-color:#0c1015;}		/* 버튼 active */


/* ******************  메인 비주얼 :: 효과 ********************** */
.plus-icon-m{display: none !important;}
/* 메인 비주얼 오버시 이미지 */
.main-visual-item .main-visual-over-bx > div {opacity:0;filter:Alpha(opacity=0); -webkit-transition: all 0.3s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;}
.main-visual-item.active-item .main-visual-over-bx > div {opacity:1;filter:Alpha(opacity=100);}

.main-visual-item.active-item .main-visual-over-bx > div:first-child {-webkit-transition-delay: 1.3s;
-moz-transition-delay: 1.3s;
-ms-transition-delay: 1.3s;
-o-transition-delay: 1.3s;
transition-delay: 1.3s;}
.main-visual-item.active-item .main-visual-over-bx > div:nth-child(2) {-webkit-transition-delay: 2s;
-moz-transition-delay: 2s;
-ms-transition-delay: 2s;
-o-transition-delay: 2s;
transition-delay: 2s;}
.main-visual-item.active-item .main-visual-over-bx > div:nth-child(3) {-webkit-transition-delay: 2.5s;
-moz-transition-delay: 2.5s;
-ms-transition-delay: 2.5s;
-o-transition-delay: 2.5s;
transition-delay: 2.5s;}
.main-visual-item.active-item .main-visual-over-bx > div:nth-child(4) {-webkit-transition-delay: 3s;
-moz-transition-delay: 3s;
-ms-transition-delay: 3s;
-o-transition-delay: 3s;
transition-delay: 3s;}
.main-visual-item.active-item .main-visual-over-bx > div:nth-child(5) {-webkit-transition-delay: 3.5s;
-moz-transition-delay: 3.5s;
-ms-transition-delay: 3.5s;
-o-transition-delay: 3.5s;
transition-delay: 3.5s;}
.main-visual-item.active-item .main-visual-over-bx > div:nth-child(6) {-webkit-transition-delay: 4s;
-moz-transition-delay: 4s;
-ms-transition-delay: 4s;
-o-transition-delay: 4s;
transition-delay: 4s;}
.main-visual-item.active-item .main-visual-over-bx > div:nth-child(7) {-webkit-transition-delay: 4.5s;
-moz-transition-delay: 4.5s;
-ms-transition-delay: 4.5s;
-o-transition-delay: 4.5s;
transition-delay: 4.5s;}

.main-visual-over-bx {position:relative; width:1000px; height:100%; /* left:0; top:0; */margin: 0 auto;}

.main-visual-over-bx > div{position:absolute; /* z-index:999; */}


/* 东风公司 */
.main-visual-01 .v-list01{top: 50%; left: 50%; margin-top: 150px; margin-left: -380px;}
.main-visual-01 .v-list02{top: 50%; left: 50%; margin-top: 195px; margin-left: -235px;}
.main-visual-01 .v-list03{top: 50%; right: 40%; margin-top: 230px; margin-left: -205px;}
.main-visual-01 .v-list04{top: 60%; right: 55%; margin-top: 105px; margin-right: -400px;}
.main-visual-01 .v-list05{top: 28%; right: 67%; margin-top: 195px; margin-right: -280px;}



/* 康明斯 */
.main-visual-01 .v-list011{top: 11%; left: 75%; margin-top: 150px; margin-left: -380px;}
.main-visual-01 .v-list021{top: 23%; left: 39%; margin-top: 195px; margin-left: -235px;}
.main-visual-01 .v-list031{top: 32%; right: 46%; margin-top: 230px; margin-left: -205px;}
.main-visual-01 .v-list041{top: 57%; right: 103%; margin-top: 105px; margin-right: -400px;}
.main-visual-01 .v-list051{top: 0%; right: 54%; margin-top: 195px; margin-right: -280px;}
.main-visual-01 .v-list061{top: 22%; left: 103%; margin-top: 150px; margin-left: -380px;}
.main-visual-01 .v-list071{top: 17%; left: 98%; margin-top: 195px; margin-left: -235px;}
.main-visual-01 .v-list081{top: 23%; left: 97%; margin-top: 230px; margin-left: -205px;}
.main-visual-01 .v-list091{top: 50%; left: 75%;  margin-top: 105px; margin-right: -400px;}
.main-visual-01 .v-list101{top: 54%; right: 52%; margin-top: 195px; margin-right: -280px;}
.main-visual-01 .v-list111{top: 50%; right: 56%; margin-top: 195px; margin-right: -280px;}
.main-visual-01 .v-list121{top: 47%; right: 52%; margin-top: 195px; margin-right: -280px;}
.main-visual-01 .v-list131{top: 61%; right: 67%; margin-top: 195px; margin-right: -280px;}




/* 메인 비주얼02:: circle 각각 위치 */
.main-visual-02 .v-list01{top: 50%; left: 50%; margin-top: 150px; margin-left: -305px;}
.main-visual-02 .v-list02{top: 50%; left: 50%; margin-top: 195px; margin-left: -235px;}
.main-visual-02 .v-list03{top: 50%; right: 50%; margin-top: 155px; margin-left: -95px;}
.main-visual-02 .v-list04{top: 50%; right: 50%; margin-top: 195px; margin-right: -140px;}
.main-visual-02 .v-list05{top: 50%; right: 50%; margin-top: 195px; margin-right: -280px;}


/* @media all and (max-width:1220px){
	.main-visual-over-bx {display:none;}
} */


/* 애니메이션 영역구분 */
.circle-animation{height:80px; width:80px; margin:0px auto;}
.circle-animation:after{
	position:absolute; left:50%; bottom:50%;
	-moz-transition:height 0.5s, opacity 1.0s;
	-ms-transition:height 0.5s, opacity 1.0s;
	-webkit-transition:height 0.5s, opacity 1.0s;
	-o-transition:height 0.5s, opacity 1.0s;
	transition:height 0.5s, opacity 1.0s;
}
.circle-animation > .list-box{display:block; position:relative; width:100%; height:100%;
	opacity:0;filter:Alpha(opacity=0);
	-moz-transition:all 0.5s, opacity 1.0s;
	-ms-transition:all 0.5s, opacity 1.0s;
	-webkit-transition:all 0.5s, opacity 1.0s;
	-o-transition:all 0.5s, opacity 1.0s;
	transition:all 0.5s, opacity 1.0s;
	line-height: 80px; text-align:center;
}

/* circle 애니메이션 css */
.ball-scale-multiple {position: relative; opacity:0;filter:Alpha(opacity=0);
	-moz-transition:all 0.7s, opacity 1.0s;
	-ms-transition:all 0.7s, opacity 1.0s;
	-webkit-transition:all 0.7s, opacity 1.0s;
	-o-transition:all 0.7s, opacity 1.0s;
	transition:all 0.7s, opacity 1.0s;
}
.ball-scale-multiple > div:nth-child(2) {
    -webkit-animation-delay: -2s;
    animation-delay: -2s; 
}
.ball-scale-multiple > div {
    border-radius: 100%;
    position: absolute;
    top: -3px;
	left:-3px;
    opacity: 0;
    margin: 0;
    width: 74px;
    height: 74px;
	border:3px solid #ffab00;
	background-color: #ffab00;
    -webkit-animation: ball-scale-multiple 3s 0s linear infinite;
    animation: ball-scale-multiple 3s 0s linear infinite;
}

@keyframes ball-scale-multiple {
	0% {
		-webkit-transform: scale(0.33);
        transform: scale(0.33);
		opacity: 0.3; 
	}
	5% {
		opacity: 0.8; 
	}
	100% {
		-webkit-transform: scale(1);
        transform: scale(1);
		opacity: 0; 
	}  
}

@-webkit-keyframes ball-scale-multiple {
	0% {
		-webkit-transform: scale(0.33);
        transform: scale(0.33);
		opacity: 0.3; 
	}
	5% {
		opacity: 0.8; 
	}
	100% {
		-webkit-transform: scale(1);
        transform: scale(1);
		opacity: 0; 
	}  
}

/* 고정 circle css */
.list-txt-thum{width:100%; height:100%; text-align:center; z-index:2; display:table;}

.circle-animation{width:80px; height:80px;}
.ball-scale-multiple > div{width:80px; height:80px;}

/* 고정 circle :: 중앙 circle 보더 */
.list-txt-thum{position: absolute; top: 50%; margin-top: -16px; left: 50%; margin-left: -16px; display:block; line-height:32px; width:32px; height:32px; border-radius:50%; background-color: #ffab00;}
/* 고정 circle :: 중앙 dot */
.list-txt-thum i {font-size: 20px; color: #fff; text-align: center; line-height: 32px;}



/* 东风汽车*/
.list-bg{position:absolute; top:0; margin-top: -25.5px; left:50%; z-index:11; line-height: 20px; margin-left:-90.5px; visibility:hidden; opacity:0;filter:Alpha(opacity=0); width:380px; height:181px; border-radius:100%; -moz-border-radius:100%; -webkit-border-radius:100%; -webkit-transform: scale(0.33); -moz-transform: scale(0.33); -ms-transform: scale(0.33); -o-transform: scale(0.33); transform: scale(0.33);}
.list-bg:before, .list-bg:after{position: absolute; top: 50%; left: 50%; display: block; content: ''; width: 100%; height: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%;}
.list-bg:before{margin-left: -104.5px; margin-top: -104.5px; /* border: 14px solid rgba(151, 26, 26, 0.5); */}
.list-bg:after{margin-left: -98.5px; margin-top: -98.5px; /* border: 8px solid rgba(151, 26, 26, 0.5); */}
.list-bg img{width:100%; height:100%;}



/* 康明斯 */
.list-bg{position:absolute; top:0; margin-top: -25.5px; left:50%; z-index:11; line-height: 20px; margin-left:-90.5px; visibility:hidden; opacity:0;filter:Alpha(opacity=0); width:180px; height:181px; border-radius:100%; -moz-border-radius:100%; -webkit-border-radius:100%; -webkit-transform: scale(0.33); -moz-transform: scale(0.33); -ms-transform: scale(0.33); -o-transform: scale(0.33); transform: scale(0.33);}
.list-bg:before, .list-bg:after{position: absolute; top: 50%; left: 50%; display: block; content: ''; width: 100%; height: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%;}
.list-bg:before{margin-left: -104.5px; margin-top: -104.5px; /* border: 14px solid rgba(151, 26, 26, 0.5); */}
.list-bg:after{margin-left: -98.5px; margin-top: -98.5px; /* border: 8px solid rgba(151, 26, 26, 0.5); */}
.list-bg img{width:100%; height:100%;}











/* hover후 이미지 */
.list-box.hover .list-bg{opacity:1.0;filter:Alpha(opacity=100); visibility:visible; transform:scale(1);}
@media all and (min-width:800px){
	.list-box:hover .list-bg{opacity:1.0;filter:Alpha(opacity=100); visibility:visible; transform:scale(1);} 
}
/* dot및 이미지 opacity */
.main-visual-item .ball-scale-multiple,
.main-visual-item .circle-animation > .list-box{opacity:1.0;filter:Alpha(opacity=100);}









/* ******************  메인컨텐츠 :: rightBar ********************* */
#fp-nav.right.right {opacity: 1; right:3%; -webkit-transition: right 0.3s, opacity 1s; -moz-transition: right 0.3s, opacity 1s; -ms-transition: right 0.3s, opacity 1s; -o-transition: right 0.3s, opacity 1s; transition: right 0.3s, opacity 1s;}
#fp-nav.right.right ul li, .fp-slidesNav ul li{width:42px; height:25px; margin:25px 0px;}
#fp-nav.right.right ul li:last-child, .fp-slidesNav ul li:last-child{display: none !important;}
#fp-nav.right ul li a, .fp-slidesNav ul li a {position: relative; display:block; width:25px; height: 25px; float:right;}
#fp-nav.right ul li a:before, .fp-slidesNav ul li a:before{position: absolute; top: 0; left: 0; display: block; content: ''; width:25px; height: 25px; border:1px solid transparent; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;}
#fp-nav.right ul li a.active:before, .fp-slidesNav ul li a.active:before{
	border-color: #fff;
	-webkit-animation: ball-scale-multiple 1s 0s linear infinite;
    animation: ball-scale-multiple 1s 0s linear infinite;
}
#fp-nav.right ul li a span, .fp-slidesNav ul li a span{background-color:#fff;}
#fp-nav.right ul li .fp-tooltip.right{top:0px; right:40px;}
#fp-nav.right ul li .fp-tooltip{width:70px; height:24px; font-weight: 400; line-height:24px; font-size:12px; text-align:right; color: rgba(255,255,255,0.5);	
	-webkit-transition: width .3s ease 0s;
	transition: width .3s ease 0s;
}
#fp-nav.right ul li a.active .fp-tooltip{color: #fff;}
#fp-nav.right ul li .fp-tooltip span{
	opacity:1;filter:Alpha(opacity=100);
	-webkit-transition: opacity .3s ease 0s;
	transition: opacity .3s ease 0s;
}
#fp-nav.right ul li a.active, .fp-slidesNav ul li a.active{border-color:#fff;}
#fp-nav.right ul li:hover .fp-tooltip,
#fp-nav.right a.active + .fp-tooltip {
    width: 70px;
	opacity:1.0;filter:Alpha(opacity=100);
	-webkit-transition: width .7s ease 0s;
	transition: width .7s ease 0s;
}
#fp-nav.right ul li:hover .fp-tooltip span,
#fp-nav.right a.active + .fp-tooltip span{
	opacity:1.0;filter:Alpha(opacity=100);
	-webkit-transition: opacity .7s ease 0s;
	transition: opacity .7s ease 0s;
}

/* header black ver */
#fp-nav.black.right ul li .fp-tooltip{color: rgba(74,74,74,0.5);}
#fp-nav.black.right ul li a span, #fp-nav.black .fp-slidesNav ul li a span{background-color:#454545;}
#fp-nav.black.right ul li a.active, #fp-nav.black fp-slidesNav ul li a.active {border-color: rgba(0,0,0,0.5);}
#fp-nav.black.right ul li a.active:before, #fp-nav.black .fp-slidesNav ul li a.active:before {border-color: #000;}

@media all and ( max-width: 1570px ){
	#fp-nav {display: none !important;}
}

/* ******************  메인 컨텐츠 ********************** */
/* 공통사항 */
.main-sec-con-bg-wrapper{position:absolute; top:0px; left:0px; width: 100%; height: 100%; overflow: hidden;}
.main-sec-con-bg{position:absolute; top:0px; left:0px; width: 100%; height: 100%; -webkit-background-size: cover !important; background-size: cover !important;
	-ms-transform: scale(1.1,1.1);
    -o-transform: scale(1.1,1.1); 
    -moz-transform: scale(1.1,1.1); 
    -webkit-transform: scale(1.1,1.1); 
     transform: scale(1.1,1.1);
	-webkit-transition:transform 2000ms  ease-in-out ;
	-moz-transition:transform 2000ms ease-in-out ;
	-o-transition:transform 2000ms ease-in-out ;
	-ms-transition:transform 2000ms ease-in-out ;
    transition:transform 2000ms ease-in-out ;}

.main-tit-con{margin-top: 50px; color: #fff; text-align: center;}
.main-tit-con .inner{
	opacity:0;filter:Alpha(opacity=0);
	-ms-transform: translateY(50px); 
    -o-transform: translateY(50px); 
    -moz-transform: translateY(50px);
    -webkit-transform: translateY(50px); 
    transform: translateY(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-tit-con .tit{font-size: 60px; font-weight: 700;}
.main-tit-con .txt{margin-top: 30px; font-size: 22px; font-weight: 300; letter-spacing: -0.5px; opacity: 0.7;}
.view-more{margin-top: 70px; position:relative; display:inline-block; width:170px; height:58px; text-align: center; line-height:58px; border-top:1px solid #fff; border-bottom: 1px solid #fff; color:#fff; font-size:14px;}
.view-more:before{
    display:inline-block; position:absolute; bottom:0px; content:""; 
    -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;
}
.view-more:before{left:0; width:100%; height:0; background-color:#fff}
.view-more span{position:relative; z-index:1; display: inline-block; vertical-align: middle; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;}
.view-more .arrow{margin-left: 5px; font-size: 16px;}

@media all and ( min-width: 800px ){
	.view-more:hover:before{height: 58px;}
	.view-more:hover span{color: #0a090a;}
}



/* ****************** 메인 컨텐츠 :: 02 ********************** */
#mainSection02{height: 100%;}
.main-sec-con02{width: 100%; height: 100%;}

/* bg */
.main-sec-con02-bg{position: absolute; top: 0; left: 0; display: block; width: 100%; height: 0; overflow: hidden; -webkit-transition: height 1.5s; -moz-transition: height 1.5s; -ms-transition: height 1.5s; -o-transition: height 1.5s; transition: height 1.5s;}
.main-sec-con02-bg img{position: absolute; top: 0; left: 50%; margin-left: -960px; width: 1920px; height: 970px;}
#mainSection02.active-start .main-sec-con02-bg{height: 100%;}

.main-prd-con{margin-top: 50px; position: absolute; width: 100%; height: calc(100% - 50px); left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #fff; text-align: center;}
/* 제품 설명 */
.prd-ori-txt{margin-top: 50px; width:460px; height: calc(100% - 50px); text-align: left;
	opacity:0;filter:Alpha(opacity=0);
	-ms-transform: translateY(100px); 
    -o-transform: translateY(100px); 
    -moz-transform: translateY(100px);
    -webkit-transform: translateY(100px); 
    transform: translateY(100px);
	-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;}
#mainSection02.active-start .prd-ori-txt{
	transition-delay:0.5s;
	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);
}
ul.prd-ori-txt-list{width: 100%; position: absolute; left: 0; top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%);}
ul.prd-ori-txt-list li{-ms-word-break: keep-all; word-break: keep-all;}
ul.prd-ori-txt-list li .tit{margin-bottom: 40px; font-size: 60px; font-weight: 700; color: #0c1015;}
ul.prd-ori-txt-list li .info{margin-bottom: 50px; font-size: 20px; font-weight: 300; line-height: 32px; color: #585858; letter-spacing: -0.5px; width:100%; height:94px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.view-more.black{margin-top: 0; border-color: #040f16; color: #484848;}
.view-more.black:before{background-color:#040f16;}
@media all and ( min-width: 800px ){
	.view-more.black:hover span{color: #fff;}
}
ul.prd-ori-txt-list .slick-dots{position: absolute; top: -75px; left: 0;}
ul.prd-ori-txt-list .slick-dots li{margin: 0 5px; display: inline-block;}
ul.prd-ori-txt-list .slick-dots li:first-child{margin-left: 0;}
ul.prd-ori-txt-list .slick-dots li button{font-size: 0; border: 0; width: 8px; height: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; background-color: #b3b7b9; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
ul.prd-ori-txt-list .slick-dots li.slick-active button{width: 26px; background-color: #0c1015;}
/* 제품 이미지 */
.prd-ori-img{width: 420px; height: 420px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
	opacity:0;filter:Alpha(opacity=0);
	-webkit-transition:opacity 1.0s;
	-moz-transition:opacity 1.0s;
	-o-transition:opacity 1.0s;
	-ms-transition:opacity 1.0s;
	transition:opacity 1.0s}
#mainSection02.active-start .prd-ori-img{
	transition-delay:0.9s;
	opacity:1.0;filter:Alpha(opacity=100);
}
ul.prd-ori-img-list{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
ul.prd-ori-img-list li{float: left; width: 100%; height: 100%;}
ul.prd-ori-img-list li span{display: block; position: relative; width: 100%; height: 0; padding-top: 100%;}
ul.prd-ori-img-list li span img{position: absolute; top: 0; left: 0; max-height: 100%; max-width: 100%; width: 100%; height: 100%;}
/* dot */
ul.prd-ori-img-list .slick-dots{position: absolute; right: -440px; top: 50%; margin-top: -240px; width: 85px; height: 480px;
	opacity:0;filter:Alpha(opacity=0);
	-ms-transform: translateY(-100px); 
    -o-transform: translateY(-100px); 
    -moz-transform: translateY(-100px);
    -webkit-transform: translateY(-100px); 
    transform: translateY(-100px);
	-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;
}
#mainSection02.active-start .prd-ori-img-list .slick-dots{
	transition-delay:1.0s;
	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);
}
ul.prd-ori-img-list .slick-dots li{width: 100%; margin: 6px 0; height: auto;}
ul.prd-ori-img-list .slick-dots li a{position: relative; display: block; width: 100%; height: 0; padding-top: 100%; background-color: #fff; cursor: pointer;}
ul.prd-ori-img-list .slick-dots li a:before{position: absolute; top: 0; left: 0; display: block; content: ''; width: calc(100% - 6px); height: calc(100% - 6px); border: 3px solid transparent;}
ul.prd-ori-img-list .slick-dots li.slick-active a:after{position: absolute; top: 50%; margin-top: -10.5px; left: -18px; display: block; content: ''; width: 18px; height: 21px; background: url("../images/icon/icon_tri.png") 0 0 no-repeat;}
ul.prd-ori-img-list .slick-dots li.slick-active a:before{border-color: #0c1015;}
ul.prd-ori-img-list .slick-dots li a img{position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 80%; max-height: 80%; width: 100%; height: 100%;}



/* ****************** 메인 컨텐츠 :: 03 ********************** */
#mainSection03{height: 100%;}
#mainSection03.active-start .main-sec-con-bg{
	-ms-transform: scale(1.0,1.0) rotate(0.002deg);
    -o-transform: scale(1.0,1.0) rotate(0.002deg);
    -moz-transform: scale(1.0,1.0) rotate(0.002deg);
    -webkit-transform: scale(1.0,1.0) rotate(0.002deg);
    transform: scale(1.0,1.0) rotate(0.002deg);
}
#mainSection03.active-start .main-tit-con .inner{
	transition-delay:0.7s;
	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);
}
/* ****************** 메인 컨텐츠 :: 04 ********************** */
#mainSection04{height: 100%;}
#mainSection04.active-start .main-sec-con-bg{
	-ms-transform: scale(1.0,1.0) rotate(0.002deg);
    -o-transform: scale(1.0,1.0) rotate(0.002deg);
    -moz-transform: scale(1.0,1.0) rotate(0.002deg);
    -webkit-transform: scale(1.0,1.0) rotate(0.002deg);
    transform: scale(1.0,1.0) rotate(0.002deg);
}
#mainSection04.active-start .main-tit-con .inner{
	transition-delay:0.7s;
	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);
}

/* ****************** 메인 컨텐츠 :: 05 ********************** */
#mainSection05{height: 100%;}
#mainSection05.active-start .main-sec-con-bg{
	-ms-transform: scale(1.0,1.0) rotate(0.002deg);
    -o-transform: scale(1.0,1.0) rotate(0.002deg);
    -moz-transform: scale(1.0,1.0) rotate(0.002deg);
    -webkit-transform: scale(1.0,1.0) rotate(0.002deg);
    transform: scale(1.0,1.0) rotate(0.002deg);
}
#mainSection05.active-start .main-tit-con .inner{
	transition-delay:0.7s;
	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);
}

/* 세로가 680 보다 낮아질 경우 */
@media all and ( max-height: 680px )and ( min-width: 801px ) {
	.section, .fp-tableCell{height: 930px !important;}

	.main-sec-con02-bg img {height: 930px;}
}


/* ******************* 200331 메인비주얼 수정 css******************* */
.main-video-con{width: 100%; height: 100%; background-color: #000; overflow: hidden;}
/* 비디오 영역 Start */
.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:after{position:absolute; top:0px; left:0px; right:0px; bottom:0px; content:""; background-color:#000; z-index:111;}
.background-video.start:after{opacity:0;filter:Alpha(opacity=0); -webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s; }
@media all and ( min-width: 801px ) {
	.background-video iframe{
		width: 100vw;
		height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
		min-height: 100vh;
		min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
		position: absolute;
		top: 50%;
		left: 50%;
		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;}
/* 메인 비주얼 :: 텍스트 */
.background-video-alternative .main-visual-txt-con{position:absolute; top:50%; margin-top: -230px; left:0px; width:100%; z-index: 1; text-align: center;} /* margin-top은 조정 (텍스트영역 높이의 반) */
.background-video-alternative .main-visual-txt-con .main-visual-txt-inner{position: relative; -ms-word-break: keep-all; word-break: keep-all;}
.background-video-alternative .main-visual-txt-con .main-visual-txt1{font-size:60px; line-height: 70px; color:#fff; font-weight: 600; margin-bottom: 20px;}
.background-video-alternative .main-visual-txt-con .main-visual-txt2{font-size:22px; line-height: 1.2; color:rgba(255,255,255,0.7); font-weight: 300;}

@media all and ( max-width: 1220px ) {
	.background-video-alternative .main-visual-txt-con .main-visual-txt1{font-size:52px; line-height: 1.1;}
	.background-video-alternative .main-visual-txt-con .main-visual-txt2{font-size:20px; line-height: 1.2;}
}
@media all and ( max-width: 1024px ) {
	.background-video-alternative .main-visual-txt-con .main-visual-txt1{font-size:48px;}
	.background-video-alternative .main-visual-txt-con .main-visual-txt2{font-size:18px;}
}
@media all and ( max-width: 1620px ){
	.background-video-alternative .main-visual-txt-con .main-visual-txt-inner{width: calc(100% - 30px);}
}
@media all and ( max-width: 800px ){
	/* 메인 비주얼 :: 텍스트 */
	.background-video-alternative .main-visual-txt-con{margin-top:-118px}
	.background-video-alternative .main-visual-txt-con .main-visual-txt1{font-size:19px; line-height: 24px; margin-bottom:10px}
	.background-video-alternative .main-visual-txt-con .main-visual-txt2{font-size:14px; line-height: 19px; margin-bottom:0;}
	.background-video-alternative .main-visual-txt-con .main-visual-txt2 .m-br{display: block;}
}

/* ******************* 200401 메인비주얼 수정 css******************* */
@media all and ( min-width: 801px ){
	#mainVisualVideo {position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);}
}