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

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인  :: 공통 -------- */
#fp-nav ul li, .fp-slidesNav ul li{position:relative; width:15px; height:11px; margin-top:75px;}
#fp-nav ul li:last-child{display:none !important;}
#fp-nav ul li:first-child, .fp-slidesNav ul li:first-child{margin-top:0;}
#fp-nav ul li a{display:block;}
#fp-nav ul li a span, .fp-slidesNav ul li a span{display:block; width:15px; height:11px; background:url(/images/icon/bullet1.png) no-repeat}
#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span{background:url(/images/icon/line1.png) no-repeat}
#fp-nav ul li .fp-tooltip{	
	background-color:#b10418; padding:5px 24px; font-size:12.5px; top:-7px; right:
	 -ms-transform:skewX(-45deg); -webkit-transform:skewX(-45deg); -moz-transform:skewX(-45deg); -o-transform:skewX(-45deg); transform:skewX(-45deg);
}
#fp-nav ul li .fp-tooltip span{
	display:block; -ms-transform:skewX(45deg); -webkit-transform:skewX(45deg); -moz-transform:skewX(45deg); -o-transform:skewX(45deg); transform:skewX(45deg);
}


/* -------- 메인 :: 비주얼 -------- */
#mainVisual{position:relative; padding: 93px 0px 0 0; height: calc( 100% - 93px ); }
.main-scoll-icon{position:absolute; bottom:18%; left:-40px; }
#mainVisual .main-visual-box, #mainVisual .slick-list, #mainVisual .slick-track, #mainVisual .visual-item, #mainVisual .visual-item-box, #mainVisual .visual-item-photo{/* min-height:750px; */}
#mainVisual .main-visual-box, #mainVisual .slick-list, #mainVisual .slick-track{/* width:100% !important; */ height:100%; overflow:visible; }
#mainVisual .visual-item{position:relative; width:100%; height:100%;}
#mainVisual .visual-item-box, #mainVisual .visual-item-photo{display:block; width:100%; height:100%; }
#mainVisual .visual-item-box{overflow:hidden;}
#mainVisual .visual-item-photo{
	-ms-transform: scale(1.2,1.2); /* IE 9 */
    -o-transform: scale(1.2,1.2); /* IE 9 */
    -moz-transform: scale(1.2,1.2); /* IE 9 */
    -webkit-transform: scale(1.2,1.2); /* Chrome, Safari, Opera */
     transform: scale(1.2,1.2);
	-webkit-transition:transform 5000ms  ease-in-out ; /* Safari */
	-moz-transition:transform 5000ms ease-in-out ; /* Safari */
	-o-transition:transform 5000ms ease-in-out ; /* Safari */
	-ms-transition:transform 5000ms ease-in-out ; /* Safari */
    transition:transform 5000ms ease-in-out ;
}
#mainVisual .visual-txt-con{position:absolute; top:25%; left:0px; width:100%;}
#mainVisual .visual-tit,
#mainVisual .visual-more-btn{
	-moz-transition:all 0.7s;
	-ms-transition:all 0.7s;
	transition:all 0.7s;
}
#mainVisual .visual-tit{
	padding-left:88px; color:#fff; font-size:65px; font-weight:500; line-height:75px; letter-spacing:-0.25px; text-shadow:2px 2px 1px rgba(0, 0, 0, 0.5);
	opacity:0;filter:Alpha(opacity=0);
	transform:translateX(-40px);
}
#mainVisual .visual-more-btn{position:relative; display:block; width:50px; height:99px; margin:30px 0 0 -60px; background:url(/images/main/main_visual_more_bg.png) no-repeat 0 50%; opacity:0;filter:Alpha(opacity=0);}
#mainVisual .visual-more-btn span{
	position:absolute; left:148px; top:0px; width:300px; color:#fff; line-height:95px; font-size:16px; letter-spacing:-0.25px; opacity:0;filter:Alpha(opacity=0);
	-moz-transition:all 1s; 	-ms-transition:all 1s; 	transition:all 1s;
}
#mainVisual .slick-arrow{position:absolute; bottom:40px; width:15px; height:9px; font-size:0;z-index:9}
#mainVisual .slick-prev{left:35px; background:url(/images/button/main_visual_prev_btn.jpg) no-repeat}
#mainVisual .slick-next{left:195px; background:url(/images/button/main_visual_next_btn.jpg) no-repeat}
.main-visual-nav-box{position:absolute; bottom:0px; left:0px; width:250px; height:92px; line-height:92px; color:#525252; font-size:13px; text-align:center; background-color:#fff;}
.main-visual-nav-box *{vertical-align:middle;}
.main-visual-nav-box .cur-visual-num{color:#b71628; font-weight:500;}
.main-visual-nav-box .visual-nav-bar{margin:0 13px}

/* active */
#mainVisual .active-item .visual-item-photo{
	-ms-transform: scale(1,1)  rotate(0.02deg);;
    -o-transform: scale(1,1) rotate(0.02deg);; 
    -moz-transform: scale(1,1) rotate(0.02deg);;
    -webkit-transform: scale(1,1) rotate(0.02deg);; /* Chrome, Safari, Opera */
    transform: scale(1,1) rotate(0.02deg);;
}
#mainVisual .active-item .visual-tit{
	opacity:1.0;filter:Alpha(opacity=0);
	transform:translateX(0);
}
#mainVisual .active-item .visual-more-btn{
	width:451px; opacity:1.0;filter:Alpha(opacity=0);
}
#mainVisual .active-item .visual-more-btn span{
	opacity:1.0;filter:Alpha(opacity=0);
}
@media all and (max-height:850px){
	.main-scoll-icon{bottom:5%;}
}
@media all and (max-width:1220px){
	#mainVisual{/* padding-top:0; */}
	.main-scoll-icon{display:none;}
	.visual-item-photo{background-size:cover !important}
	#mainVisual .visual-tit{font-size:42px; line-height:50px; padding-left:40px;}
	#mainVisual .visual-more-btn{height:50px; background-size:70% 50px}
	#mainVisual .visual-more-btn span{left:100px; font-size:15px;  line-height:50px; }

	.main-visual-nav-box{height:50px; line-height:50px; width:150px;}
	.main-visual-nav-box .visual-nav-bar{margin:0 8px}
	#mainVisual .slick-arrow{display:none !important;}
}
@media all and (max-width:768px){
	#mainVisual{ height: calc( 100% - 71px ); padding-top:0; }
	#mainVisual .visual-txt-con{top:50%; margin-top:-76px;}
	#mainVisual .visual-tit{font-size:28px; line-height:34px; padding-left:20px;}
	#mainVisual .visual-more-btn{height:34px; background-size:60% 38px}
	#mainVisual .visual-more-btn span{left:80px; font-size:11px;  line-height:34px; }
	.main-visual-nav-box{display:none; height:30px; line-height:30px; width:100px; font-size:12px;}
	.main-visual-nav-box .visual-nav-bar{margin:0 4px}
	.main-visual-nav-box .visual-nav-bar img{height:7px}
}
/* -------- 메인 :: 비디오영역 -------- */
#vedioBox{overflow:hidden; margin:0 6%;}
#vedioBox .video-large-thumb{position:relative; float:left; width:82%;}
#vedioBox .video-large-thumb .large-thumb{position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:99}
#vedioBox .video-large-thumb .large-thumb img{width:100%; /* height:100%; */}
#vedioBox .video-large-thumb .video-cover-con{
	position:absolute; top:0px; left:0px; width:100%; height:100%; cursor:pointer;  z-index:99;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+1,000000+24,000000+99&0+0,0.65+99 */
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.01) 1%, rgba(0,0,0,0.16) 54%, rgba(0,0,0,0.65) 99%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.16) 54%,rgba(0,0,0,0.65) 99%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.16) 54%,rgba(0,0,0,0.65) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
}
#vedioBox .video-large-thumb .video-cover-con img{position:absolute; top:50%; left:50%; margin:-77px 0 0 -77px}
#vedioBox .video-large-thumb .video-cover-con .video-tit{position:absolute; bottom:30px; left:0px; width:100%;text-indent:50px; color:#fff; font-size:32px; letter-spacing:-0.5px; font-weight:300;}
.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#vedioBox .video-small-thumb-list{float:right; width:14%; height:100%;;}
#vedioBox .video-small-thumb-list li{height:20%; margin-top:12%;}
#vedioBox .video-small-thumb-list li:first-child{margin-top:0;}
#vedioBox .video-small-thumb-list li a{position:relative; display:block; overflow:hidden;}
#vedioBox .video-small-thumb-list li a:before{
	content:""; position:absolute; top:0px; left:0px; bottom:0px; right:0px; border:5px solid transparent; 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
}
#vedioBox .video-small-thumb-list li img{width:100%;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
#vedioBox .video-small-thumb-list li a:hover img{transform:scale(1.1);}
#vedioBox .video-small-thumb-list li a:hover:before, #vedioBox .video-small-thumb-list li.on a:before{border-color:#b10418}
@media all and (max-width:1220px){
	#vedioBox{max-width:790px; margin:15% auto; margin-top:5%;}
	#vedioBox .video-large-thumb{float:none; width:100%;}
	#vedioBox .video-large-thumb .video-cover-con img{width:96px; margin:-48px 0 0 -48px}
	#vedioBox .video-large-thumb .video-cover-con .video-tit{font-size:24px; text-indent:15px; bottom:15px;}
	#vedioBox .video-small-thumb-list{float:none; width:100%;}
	#vedioBox .video-small-thumb-list ul{overflow:hidden; margin:1% -0.5% 0;}
	#vedioBox .video-small-thumb-list ul li{float:left; height:auto; width:19%; margin:0 0.5%;}
	#vedioBox .video-small-thumb-list li a:before{border-width:3px;}

}
@media all and (max-width:768px){
	#vedioBox .video-large-thumb .video-cover-con img{width:45px; margin:-28px 0 0 -28px}
	#vedioBox .video-large-thumb .video-cover-con .video-tit{font-size:18px; text-indent:10px; bottom:10px;}
}

/* -------- 메인 :: 제품소개 -------- */
#productItemList .main-prd-intro-tit{text-align:center; padding-bottom:50px;}
#productItemList ul{overflow:hidden; padding:0 5%; max-width:1558px; margin:0px auto;}
#productItemList ul li{float:left; width:21%; padding:0 2% 30px 2%;}
#productItemList ul li a{position:relative; display:block; overflow:hidden; box-shadow:13px 14px 20px 0px rgba(100, 100, 100, .4)}
#productItemList ul li a img{width:100%; -webkit-transition:all 0.2s;-moz-transition:all 0.2s;-o-transition:all 0.2s;-ms-transition:all 0.2s;transition:all 0.2s}
#productItemList ul li a:hover img{ transform:scale(1.1)  rotate(0.02deg);}
#productItemList ul li .main-prd-item-tit{
	position:absolute; top:8%; left:0px; width:100%; height:99px; line-height:96px;  background:url(/images/main/main_prd_tit_bg1.png) no-repeat; background-size:100% 99px;
	 -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s
}
#productItemList ul li.prd-intro2 .main-prd-item-tit{background-image:url(/images/main/main_prd_tit_bg2.png)}
#productItemList ul li.prd-intro3 .main-prd-item-tit{background-image:url(/images/main/main_prd_tit_bg3.png)}
#productItemList ul li.prd-intro4 .main-prd-item-tit{background-image:url(/images/main/main_prd_tit_bg4.png)}
#productItemList ul li a:hover .main-prd-item-tit{width:180%;}
#productItemList ul li .main-prd-item-tit span{display:block; color:#fff; font-weight:300; font-size:0.8rem; letter-spacing:-0.5px; text-indent:5%; text-transform:uppercase}

@media all and (max-width:1220px){
	#mainProductCon{padding:15% 0; }
	#productItemList .main-prd-intro-tit{padding-bottom:30px;}
	#productItemList .main-prd-intro-tit img{height:40px;}

	#productItemList ul{padding:0 15px;}
	#productItemList ul li .main-prd-item-tit{height:65px; line-height:62px; background-size:120% 65px !important;}
	#productItemList ul li .main-prd-item-tit span{font-size:0.6rem}
}
@media all and (max-width:768px){
	#mainProductCon{margin:0 -15px; width: calc(100% + 30px); box-sizing:content-box}
	#productItemList{width:100%; margin:0px auto;}
	#productItemList .main-prd-intro-tit img{height:30px;}
	#productItemList ul{max-width:500px; margin:0px auto; padding:0 8px;}
	#productItemList ul li {width:46%;}
	#productItemList ul li .main-prd-item-tit span{font-size:0.9rem}
}
@media all and (max-width:480px){
	#productItemList .main-prd-intro-tit img{height:24px;}
	#productItemList ul li .main-prd-item-tit span{font-size:1.0rem}
}
/* -------- 메인 :: 하단 -------- */
#mainBottomList{position:relative}
#mainBottomList .tablet-img,#mainBottomList  .m-img{display:none;}
#mainBottomList .main-left-con{
	position:relative; width:882px;
}
.kr-round-ani{position:absolute; top:50%; left:50%; width:70px; height:70px; margin:-99px 0 0 165px;
	transform:rotate(90deg) ;
	-webkit-transform:rotate(90deg);
}
.kr-round-ani span{
	display:block; position:absolute; top:0px; left:0px; width:200px; height:200px;  opacity: 0;
	-webkit-border-radius:100em;-moz-border-radius:100em;-o-border-radius:100em;border-radius:100em; background:#fff;
	-webkit-animation: ball-scale-multiple 3s 0s linear infinite;
    animation: ball-scale-multiple 3s 0s linear infinite;
}
.kr-round-ani b{width:6px; height:6px; -webkit-border-radius:100em;-moz-border-radius:100em;-o-border-radius:100em;border-radius:100em; position:absolute; top:0; left:13px; z-index:99;}

@keyframes ball-scale-multiple {
	0% {
		width:5px;
		height:5px;
		opacity: 0; 
	}
	50% {
		opacity: 0.3; 
	}
	100% {
		width:120px;
		height:120px;
		opacity: 0; 
	} 
}
#mainBottomList .main-right-con{position:absolute; top:0px; right:0px; margin-left:882px; width:calc( 100% - 882px ) ;height:100%;}
#mainBottomList .main-right-con ul{height:100%;}
#mainBottomList .main-right-con ul li{height:50%; width:100%; display:table; }
#mainBottomList .main-right-con ul .certification-item{background:#e7e7e7 url(/images/main/main_cerfi_bg.png) no-repeat 100% 100%; background-size:contain}
#mainBottomList .main-right-con ul .contact-item{background:#a30215 url(/images/main/main_contact_bg.png) no-repeat 100% 100%; background-size:contain}
#mainBottomList .main-right-con ul li .item-inner-box{display:table-cell; vertical-align:middle; padding:0 8%;}
#mainBottomList .main-right-con ul li .item-tit{font-size:2.0rem; letter-spacing:-0.25px; color:#4c4c4c; font-weight:500; }
#mainBottomList .main-right-con ul li .item-txt{font-size:18.5px; letter-spacing:-0.25px; color:#4c4c4c; display:block; padding:33px 0 65px;}
#mainBottomList .main-right-con ul li .item-more-btn{position:relative; display:inline-block; width:170px; height:56px;  text-indent:30px; line-height:56px; border:1px solid #4c4c4c; color:#4c4c4c; font-size:16.5px;}
#mainBottomList .main-right-con ul li .item-more-btn:before,
#mainBottomList .main-right-con ul li .item-more-btn:after{
	display:inline-block; position:absolute; top:-2px; 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
}
#mainBottomList .main-right-con ul li .item-more-btn:before{left:-2px;width:2px; height:60px; background-color:#4c4c4c}
#mainBottomList .main-right-con ul li .item-more-btn:after{left:0; width:70px; height:56px; border-top:2px solid #4c4c4c; border-bottom:2px solid #4c4c4c }
#mainBottomList .main-right-con ul li .item-more-btn:hover:before{width:174px}
#mainBottomList .main-right-con ul li .item-more-btn:hover:after{width:172px}
#mainBottomList .main-right-con ul li .item-more-btn span{position:relative; z-index:1;}
#mainBottomList .main-right-con ul li .item-more-btn .arrow{position:absolute; top:50%; right:30px; line-height:20px; margin-top:-10px;}
#mainBottomList .main-right-con ul li .item-more-btn:hover span{color:#fff;}
#mainBottomList .main-right-con ul li.contact-item *{color:#fff;}
#mainBottomList .main-right-con ul li.contact-item .item-more-btn{border-color:#fff; color:#fff;}
#mainBottomList .main-right-con ul li.contact-item .item-more-btn:before{background-color:#fff;}
#mainBottomList .main-right-con ul li.contact-item .item-more-btn:after{border-color:#fff;}
#mainBottomList .main-right-con ul li.contact-item .item-more-btn:hover span{color:#910011}


@media all and (max-width:1500px){
	#mainBottomList .main-right-con ul li .item-tit{font-size:1.3rem}
	#mainBottomList .main-right-con ul li .item-txt{font-size:15px; line-height:20px; padding:20px 0 30px}
	#mainBottomList .main-right-con ul li .item-more-btn{width:140px; height:42px; line-height:42px; font-size:14px;}
	#mainBottomList .main-right-con ul li .item-more-btn:before{height:46px;}
	#mainBottomList .main-right-con ul li .item-more-btn:after{height:42px;}
	#mainBottomList .main-right-con ul li .item-more-btn:hover:before{width:144px}
	#mainBottomList .main-right-con ul li .item-more-btn:hover:after{width:142px}
}

@media all and (max-width:1220px){
	#mainBottomList .main-left-con{width:100%;}
	#mainBottomList .pc-img,#mainBottomList  .m-img{display:none;}
	#mainBottomList .tablet-img{display:block;}
	#mainBottomList .main-left-con img{width:100%;}
	#mainBottomList .kr-round-ani{display:none}
	#mainBottomList .main-right-con{position:static; margin-left:0; width:100%;}
	#mainBottomList .main-right-con ul{overflow:hidden;}
	#mainBottomList .main-right-con ul li{float:left; display:block; width:50%; padding:30px 0;}
	#mainBottomList .main-right-con ul li .item-inner-box{display:block; width:auto; padding:0 20px}
	#mainBottomList .main-right-con ul li .item-tit{height:74px; font-size:24px}
	#mainBottomList .main-right-con ul li .item-txt{height:40px;}
	#mainBottomList .main-right-con ul li .item-more-btn{max-width:140px;}
}

@media all and (max-width:768px){
	#mainBottomList .pc-img,#mainBottomList  .tablet-img{display:none;}
	#mainBottomList .m-img{display:block;}
	#mainBottomList .main-right-con ul li{text-align:center;}
	#mainBottomList .main-right-con ul li .item-tit{font-size:1.5rem; line-height:1.2em}
	#mainBottomList .main-right-con ul li .item-txt{font-size:11px; padding:0; padding-bottom:10px;}
	#mainBottomList .main-right-con ul li .item-more-btn{width:100%; height:30px; line-height:30px; text-align:left; font-size:11px;}
	#mainBottomList .main-right-con ul li .item-more-btn:before,
	#mainBottomList .main-right-con ul li .item-more-btn:after{display:none;}
}


/* -------- 메인 :: FOOTER -------- */
#mainFooter.fp-auto-height.fp-section,
#mainFooter.fp-auto-height .fp-slide,
#mainFooter.fp-auto-height .fp-tableCell{
		height:auto !important;
	}