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

/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:980px; position:relative; background-color: #f1f1f1;}	/* 비주얼높이값 이미지에맞게 수정 */
#mainVisual.full-height{height:1030px;}
/* 메인 왼쪽 주황 배경 */
.orange-bg{position: absolute; top: 0; left: 0; width: 28%; height: 100%;/* height: 0; -webkit-transition: height 0.5s; -moz-transition: height 0.5s; -ms-transition: height 0.5s; -o-transition: height 0.5s; transition: height 0.5s; */ background-color:#ff5919; background:linear-gradient(45deg,#ff4700,#fad000); background-size: 400% 400%; -webkit-animation: Gradient 10s ease infinite; -moz-animation: Gradient 10s ease infinite; animation: Gradient 10s ease infinite;}
/* #mainVisual.active .orange-bg{height: 100%;} */
@-webkit-keyframes Gradient {
	0% {background-position: 0% 50%}
	50% {background-position: 100% 50%}
	100% {background-position: 0% 50%}
}
@-moz-keyframes Gradient {
	0% {background-position: 0% 50%}
	50% {background-position: 100% 50%}
	100% {background-position: 0% 50%}
}
@keyframes Gradient {
	0% {background-position: 0% 50%}
	50% {background-position: 100% 50%}
	100% {background-position: 0% 50%}
}
/* 메인 오른쪽 회색 배경 */
.gray-bg{position: absolute; bottom: 0; right: 0; width: 72%; height: 100%; /* height: 0; -webkit-transition: height 0.5s; -moz-transition: height 0.5s; -ms-transition: height 0.5s; -o-transition: height 0.5s; transition: height 0.5s; transition-delay:0.2s; */overflow: hidden;}
.gray-bg img{width: 100%; height: 980px;}
/* #mainVisual.active .gray-bg{height: 100%;} */
.main-area{max-width: 1620px; width: 84%; height: 100%; position: absolute; top: 0; right: 0; opacity: 1;/* opacity: 0; -webkit-transition: opacity 0.7s; -moz-transition:opacity 0.7s; -ms-transition: opacity 0.7s; -o-transition: opacity 0.7s; transition: opacity 0.7s; transition-delay:0.6s; */}
/* #mainVisual.active .main-area{opacity: 1;} */
/* 제품 :: 리스트 */
.main-prd-list-wrapper{position:absolute; top:50%; left:0; width:100%; margin-top:-40px}
.main-prd-list{height:80px; padding:0 130px; position:relative; z-index:99; border-top:1px solid rgba(255,255,255,0.05); border-bottom:1px solid rgba(255,255,255,0.05);}
.main-prd-list .slick-list{overflow:visible; z-index: 1;}
.main-prd-list .main-prd-item{position:relative;width:574px; height:80px; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; transition: opacity 0.5s;}
.main-prd-list .main-prd-item.slick-active{opacity: 1;}
.main-prd-list .main-prd-item.slick-current + .main-prd-item.slick-active{opacity: 0;}
.main-prd-list .main-prd-item .circle-wrapper{position:absolute; left:50%; top:50%; width:6px; height:6px; border:8px solid rgba(255,255,255,0.1); -webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%; -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition:all 0.5s 0s; -moz-transition:all 0.5s 0s; -o-transition:all 0.5s 0s; -ms-transition:all 0.5s 0s; transition:all 0.5s 0s;}
.main-prd-list .main-prd-item .circle-wrapper .circle-icon{overflow:hidden; display:block; width:6px; height:6px; background-color:#000;position:absolute; top:50%; left:50%; -webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%; -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition:width 0.5s 0s, height 0.5s 0s, background-color 3s 0s; -moz-transition:width 0.5s 0s, height 0.5s 0s, background-color 3s 0s; -o-transition:width 0.5s 0s, height 0.5s 0s, background-color 3s 0s; -ms-transition:width 0.5s 0s, height 0.5s 0s, background-color 3s 0s; transition:width 0.5s 0s, height 0.5s 0s, background-color 3s 0s;}
.main-prd-list .main-prd-item .circle-wrapper .circle-icon img{position:absolute; top:0; left:0; right:0; bottom:0; max-width:100%; max-height:100%; margin:auto; 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;}
.main-prd-list .main-prd-item .circle-wrapper .circle-more-btn{position:absolute; left:10px; bottom:30px; width:110px; height:110px; line-height:110px; text-align:center; background-color:#333;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;transform:scale(0); opacity:0;filter:Alpha(opacity=0);}
.main-prd-list .main-prd-item .circle-wrapper .circle-more-btn img{position:absolute; top:0px; right:0px; bottom:0px; left:0px; max-width:100%; max-height:100%; margin:auto;}
@media all and ( max-width: 1024px ){
	.main-prd-list .main-prd-item .circle-icon{background-color: #fff;}
	.main-prd-list .main-prd-item.slick-current .circle-icon{background-color: #fff; -webkit-transition: all 0s 0s; -moz-transition: all 0s 0s; -ms-transition: all 0s 0s; -o-transition: all 0s 0s; transition: all 0s 0s;}
}
@media all and ( min-width: 1221px ){
	.main-prd-list .main-prd-item.slick-current .circle-wrapper,
	.main-prd-list .main-prd-item.slick-current .circle-icon{background-color: #fff; width: 400px; height: 400px; -webkit-transition:width 1s 0.4s, height 1s 0.4s; -moz-transition:width 1s 0.4s, height 1s 0.4s; -o-transition:width 1s 0.4s, height 1s 0.4s; -ms-transition:width 1s 0.4s, height 1s 0.4s; transition:width 1s 0.4s, height 1s 0.4s;}
	.main-prd-list .main-prd-item.slick-current .circle-wrapper .circle-icon img{opacity:1.0;filter:Alpha(opacity=100);}
	.main-prd-list .main-prd-item.slick-current .circle-wrapper .circle-more-btn{opacity:1.0;filter:Alpha(opacity=100); transform:scale(1); -webkit-transition:opacity 1.0s 0.5s, transform 1.0s; -moz-transition:opacity 1.0s 0.5s, transform 1.0s; -o-transition:opacity 1.0s 0.5s, transform 1.0s; -ms-transition:opacity 1.0s 0.5s, transform 1.0s; transition:opacity 1.0s 1s, transform 1.0s 0.7s;}
}
@media all and ( min-width: 1440px ){
	.main-prd-list .main-prd-item.slick-current .circle-wrapper,
	.main-prd-list .main-prd-item.slick-current .circle-icon{width: 574px; height: 574px;}
}

/* 제품 :: 텍스트 */
.main-prd-txt-wrapper{position:absolute; left:130px; right:130px; top:50%; z-index:2; color:#333;}
.main-prd-txt-inner{position:relative; margin-left:450px;}
.main-prd-txt-inner .slick-list{overflow:visible;}
.prd-name-box{position:absolute; bottom:50%; left:0; margin-bottom:95px}
.prd-name-box .prd-top-line{display:block; width: 25px; height: 6px; background-color: #f37a20; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;}
.prd-name-box .prd-name{margin-top: 25px; font-size:50px; color:#333; font-weight:900;}
.prd-name-box .prd-name b{color:#333; font-weight:900; display:inline-block; vertical-align:middle}
.prd-name-box .prd-name em{display:inline-block; font-weight:600; vertical-align:middle}
.prd-name-box .prd-category{margin-top: 25px; display: inline-block; font-size: 18px; line-height: 1.3; font-weight: 500; letter-spacing: -0.25px; color: #333; opacity: 0.5;}
.prd-name-box .m-br{display: none;}
.prd-detail-txt{position:absolute; top:50%; left:0; margin-top:95px; opacity:0;filter:Alpha(opacity=0); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); -moz-transform: translateX(-20px); -webkit-transform: translateX(-20px); transform: translateX(-20px); -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; -webkit-transition-delay:0.8s;-moz-transition-delay:0.8s;-o-transition-delay:0.8s;-ms-transition-delay:0.8s;transition-delay:0.8s;}
.prd-detail-txt dt{font-size:20px; font-weight:500; color: #333; margin-bottom:20px;}
.prd-detail-txt dd{font-size:16px; line-height:1.5; color: rgba(51,51,51,0.5);}
.prd-detail-txt dd a{margin-top: 35px; display: block; display:block; width: 245px; height: 40px; line-height: 40px; background-color: #f38c21; -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px; font-size: 15px; font-weight: 500; letter-spacing: -0.35px; color: #fff; text-align: center;}
.active-item .prd-detail-txt{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-prd-controls{position:absolute; bottom:0; right:0; width: 235px; height: 110px; background-color: #fff; margin-top:-11px; z-index:12;}
.main-prd-controls.m-dis-block{display: none;}
.main-prd-controls.m-dis-none{display: block;}
.main-prd-controls .main-prd-controls-inner{position:relative; width:100%;}
.main-prd-controls button{position:absolute; top: 0; width: 50%; height:110px; cursor: pointer;}
.main-prd-controls .main-prd-prev-btn{left: 0;}
.main-prd-controls .main-prd-next-btn{right: 0;}
.main-prd-controls .main-prd-next-btn:before{position: absolute; top: 50%; margin-top: -11.5px; left: 0; display: block; content: ''; width: 1px; height: 23px; background-color: #e5e5e5;}
/* dot cover */
.dot-cover-bg{position: absolute; top: 0; left: -110%; z-index: 99; display: block; width: 100%; height: 100%; background-color: #eee;}
/* 슬라이드 로딩바 */
.main-prd-list .slick-dots{position:absolute; height:1px; background:#dadada; top:50%; max-width: 1370px; width: 100%; left: 14.3%; list-style-type:none;}
.main-prd-list .slick-dots li{float:left; width:0px; height:1px; background:#000; position:absolute; left:0px; bottom:0px;}
.main-prd-list .slick-dots li button{font-size: 0; border: none;}
.main-prd-list .slick-dots li.slick-active{width:100%; animation:ProgressDots 4s both; animation-timing-function:ease-in-out;}

@-webkit-keyframes ProgressDots{from{width:0px;}to{width:100%;}}
@keyframes ProgressDots{from{width:0px;}to{width:100%;}}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-cm-tit{text-align:center; margin-bottom:35px;}
.main-cm-tit strong{display:block; font-size:35px; font-weight:500; letter-spacing:-0.25px; color:#333;}

/* -------- 메인 컨텐츠 :: 컨텐츠1(PRODUCTS) -------- */
#mainContent1{padding:100px 0 120px;}
.main-product-wrapper > ul{margin:0 -1%}
.main-product-wrapper .gallery-over-list-item {float:left; width:23%; margin:0 1%;}
.main-product-wrapper .gallery-over-list-item a {display:block; }
.main-product-wrapper .gallery-img-box {position:relative; text-align:center;}
.main-product-wrapper .gallery-img-box .img-wrap {display:block; height:0; padding-top:53%;}
.main-product-wrapper .gallery-img-box .img-wrap img{position:absolute; top:0px; right:0px; bottom:0px; left:0px; width:100%; height:100%;}
.main-product-wrapper .gallery-img-box .broad-bg {position:absolute; width:100%; height:100%; left:0; top:0; overflow:hidden;}
.main-product-wrapper .gallery-img-box .broad-bg span{position:relative; display:block; width:0; height:0; left:50%; top:50%; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;  border-radius:100%;}
.main-product-wrapper .gallery-img-box .gallery-btn {position:absolute; width:50px; height:50px; right:20px;bottom:-25px; border-radius:100%; color:#fff;  overflow:hidden; background-color:#f39221; box-shadow:5px 5px 15px rgba(0, 0, 0, 0.2); -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;}
.main-product-wrapper .gallery-img-box .gallery-btn i{line-height: 50px; font-size: 24px; vertical-align:middle;}
.main-product-wrapper .gallery-info {padding: 35px 0 0;}
.main-product-wrapper .gallery-info .gallery-info-tit {font-size:20px; line-height: 1.3; letter-spacing: -0.25px; color:#333; font-weight: 500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.main-product-wrapper .gallery-info p {font-size:15px; line-height: 24px; letter-spacing: -0.75px; color:#666; margin:20px 0 0; width:100%; height:96px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;}
/* @media all and ( min-width: 801px ){
    .main-product-wrapper .gallery-over-list-item a:hover .gallery-btn {background-color:transparent; right:50%; margin-right: -22.5px; box-shadow:none; bottom:50%; margin-bottom: -22.5px;}
    .main-product-wrapper .gallery-over-list-item a:hover .broad-bg span {background-color:#f39221; width:500px; height:500px; left:50%; top:50%; transform:translate(-50%, -50%); opacity:0.9;filter:Alpha(opacity=90); transition-delay:0.2s;}
} */

/* -------- 메인 컨텐츠 :: 컨텐츠2(배너) -------- */
#mainContent2{}
ul.main-bnr-list{}
ul.main-bnr-list li{width: 50%; float: left;}
ul.main-bnr-list li .inner{display: block; position: relative; height: 0; padding-top: 530px; overflow: hidden;}
ul.main-bnr-list li .inner .img-con{position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transform: scale(1.01,1.01); -moz-transform: scale(1.01,1.01); -ms-transform: scale(1.01,1.01); -o-transform: scale(1.01,1.01); transform: scale(1.01,1.01); -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.main-bnr-list li.li-01 .inner .img-con{background: url("/images/main/main_con02_bg01.png") 50% 50% no-repeat; -webkit-background-size: cover; background-size: cover;}
ul.main-bnr-list li.li-02 .inner .img-con{background: url("/images/main/main_con02_bg02.png") 50% 50% no-repeat; -webkit-background-size: cover; background-size: cover;}
ul.main-bnr-list li .inner .txt-con{position: absolute; left: 60px; right: 60px; top: 60px;}
ul.main-bnr-list li .inner .txt-con h5{font-size: 30px; font-weight: 600; letter-spacing: 0.25px; color: #fff; text-shadow: 0px 0px 6px rgba(255,255,255,0.56);}
ul.main-bnr-list li .inner .txt-con p{margin-top: 40px; font-size: 16px; line-height: 26px; font-weight: 400; letter-spacing: -0.25px; color: #fff;}
ul.main-bnr-list li .inner .txt-con span{margin-top: 60px; display: block; width: 237px; line-height: 48px; text-align: center; border: 2px solid #fff; text-align: center; font-size: 16px; font-weight: 400; letter-spacing: -0.25px; color: #fff; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
/* @media all and ( min-width: 801px ){
	ul.main-bnr-list li .inner:hover .img-con{-ms-transform: scale(1.1,1.1) rotate(0.002deg);
    -o-transform: scale(1.1,1.1) rotate(0.002deg);
    -moz-transform: scale(1.1,1.1) rotate(0.002deg);
    -webkit-transform: scale(1.1,1.1) rotate(0.002deg);
    transform: scale(1.1,1.1) rotate(0.002deg);}
	ul.main-bnr-list li .inner:hover .txt-con span{background-color: #fff; color: #000;}
} */

/* -------- 메인 컨텐츠 :: 컨텐츠3(PR VIDEO) -------- */
#mainBrandCon{padding:140px 0 130px;}
.main-brand-video-con{position:relative; max-width:1037px; margin:0px auto; overflow:hidden;}
.video-iframe-box{position:relative; padding-top:48.11%; height:0; background-color:#000}
.video-iframe-box iframe{position:absolute; top:0px; left:0px; width:100%; height:100%;}
.video-cover-box{position:absolute; top:0px; left:0px; width:100%; height:100%; cursor:pointer ; }
.video-cover-box .thumb{display:block; width:100%; height:100%; opacity: 0.3; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;}
/* .video-cover-box:hover .thumb{-ms-transform: scale(1.1) rotate(0.002deg); -o-transform: scale(1.1) rotate(0.002deg); -moz-transform: scale(1.1) rotate(0.002deg); -webkit-transform: scale(1.1) rotate(0.002deg); transform: scale(1.1) rotate(0.002deg);} */
.video-cover-box .icon{position:absolute; top:0px; left:0px; width:100%; height:100%; background:url("/images/main/video_play_cover.png") 50% 50% no-repeat }

/* ******************  메인 오른쪽 퀵메뉴 ********************** */
#rightBar{
	position:fixed; top: 130px; right:2.6%; z-index:99; 
	visibility:visible; opacity:1.0;filter:Alpha(opacity=100);
	transition:all 0.5s cubic-bezier(0.47, 0, 0.745, 0.715); 
	-webkit-transition:all 0.5s cubic-bezier(0.47, 0, 0.745, 0.715);  
	-oz-transition:all 0.5s cubic-bezier(0.47, 0, 0.745, 0.715); 
	-ms-transition:all 0.5s cubic-bezier(0.47, 0, 0.745, 0.715);
}
#rightBar > ul {width:70px; text-align: center; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; overflow: hidden; -webkit-box-shadow: 5px 2px 43px -5px rgba(0,0,0,0.21);
-moz-box-shadow: 5px 2px 43px -5px rgba(0,0,0,0.21);
box-shadow: 5px 2px 43px -5px rgba(0,0,0,0.21);}
#rightBar > ul > li{border-top:1px solid #e5e5e5;}
#rightBar > ul > li:first-child{border-top:0;}
#rightBar > ul > li > a{display:block; width:100%; padding-top: 15px; height:64px; background-color:#fff; text-align:center;}
#rightBar > ul > li > a i{display: inline-block; font-size: 27px; color: #333;}
#rightBar > ul > li > a span{margin-top: 7px; display: block; width: 100%; font-size: 13px; font-weight: 500; letter-spacing: -0.25px; color: #333;}

#rightBar .sns-btn{display: block; margin: 0 auto; width: 36px; height: 36px; text-align: center; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -webkit-box-shadow: 5px 2px 43px -5px rgba(0,0,0,0.21);
-moz-box-shadow: 5px 2px 43px -5px rgba(0,0,0,0.21);
box-shadow: 5px 2px 43px -5px rgba(0,0,0,0.21);}
#rightBar .sns-btn.fcb{margin-top: 17px; background-color: #3c5b9b;}
#rightBar .sns-btn.ytb{margin-top: 13px; background-color: #e21c1c;}
#rightBar .sns-btn i{font-size: 24px; line-height: 36px; color: #fff;}

/* ****************** 글자효과 ********************** */
.glow-text-wrapper{opacity:0; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; -o-transition:all 0.3s; -ms-transition:all 0.3s; transition:all 0.3s;}
.active-item .glow-text-wrapper{opacity:1.0;filter:Alpha(opacity=100);}
.glow-text {white-space: pre;}
.glow-text span {display:inline-block;}
.active-item .glow-text span {-webkit-animation: letter-glow 0.7s 0s ease both; animation: letter-glow 1.2s 0s ease both;}
@-webkit-keyframes letter-glow {
  0% {opacity: 0; transform: translateY(20%) translateX(100%)  rotate(10deg);}
  77% {opacity: 1; transform: translateY(0px) translateX(0%)  rotate(0);}
  100% {opacity: 1;transform: translateY(0px)  translateX(0%) rotate(0);}
}
@keyframes letter-glow {
   0% {opacity: 0; transform: translateY(20%) translateX(100%)  rotate(10deg);}
  77% {opacity: 1; transform: translateY(0px) translateX(0%)  rotate(0);}
  100% {opacity: 1; transform: translateY(0px) translateX(0%)  rotate(0);}
}