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

/* ******************  메인 레이아웃(Fullpage) ********************** */
#fullpage #mainVisual{height:100vh}
@media all and ( min-width: 1025px ) and (max-height: 750px) {
	#fullpage .section{min-height:750px;}
	#fullpage .section .fp-tableCell{height:100% !important;}
}

/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:100vh; position:relative; }	/* 비주얼높이값 이미지에맞게 수정 */
#mainVisual .main-visual-inner{height:100%; position:relative; max-width:1720px; margin:0 auto; padding:0 4.6%;}
#mainVisual .main-visual-inner .visual-wrap{position:relative; height:100%}

/* 메인 비주얼 :: 슬라이드 */
.main-visual-slide{background:#000; height:calc(100% - 160px); max-height:calc(100vh - 317px); position:relative; }
.main-visual-con{max-height:calc(100vh - 317px); overflow:hidden}
.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{
	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;}

/* 메인 비주얼 :: 슬라이드 :: 텍스트 */
.cm-word-split-JS.splitting .word{line-height:1.1}
.main-visual-item .main-visual-txt-con{
	position:absolute; 
	left:0px; top:0;
	width:100%; 
	height:100%;
}
.main-visual-item .main-visual-txt-box{
	display:flex;
	align-items:center;
	height:100%;
}
.main-visual-item .main-visual-txt-box .main-visual-txt-inner{padding:2% 3% 0 4.5%}
.main-visual-item .main-visual-txt-con .main-visual-txt1{display:block; font-size:58px; font-weight:700; letter-spacing:-0.1px; color:#fff; margin-bottom:25px;}
.main-visual-item .main-visual-txt-con .main-visual-txt2{font-size:18px; letter-spacing:-0.75px; color:#fff; margin-bottom:50px; font-weight:500; line-height:1.83}
/* 버튼 오버효과 */
.main-visual-item .main-visual-txt-con .main-visual-more-btn{display:block; overflow:hidden}
.main-visual-item .main-visual-txt-con .main-visual-more-btn a{position:relative; display:inline-block; width:220px; height:57px; line-height:57px; text-align:center; font-weight:700; font-size:12px; letter-spacing:0.6px; color:#fff; border:1px solid #fff}
.main-visual-item .main-visual-txt-con .main-visual-more-btn a span{position:relative; display:block; width:100%; height:100%; -webkit-transition:all 0.4s; transition:all 0.4s}
.main-visual-item .main-visual-txt-con .main-visual-more-btn a:before,
.main-visual-item .main-visual-txt-con .main-visual-more-btn a:after{display:inline-block; content:""; position:absolute; -webkit-transition:all 0.4s; transition:all 0.4s; top:-1px; bottom:-1px; width:1px; background-color:#fff; opacity:0}
.main-visual-item .main-visual-txt-con .main-visual-more-btn a span:before,
.main-visual-item .main-visual-txt-con .main-visual-more-btn a span:after{display:inline-block; content:""; position:absolute; -webkit-transition:all 0.4s; transition:all 0.4s; top:-1px; bottom:-1px; border-top:2px solid #fff; border-bottom:2px solid #fff; width:12px; opacity:0}
.main-visual-item .main-visual-txt-con .main-visual-more-btn a span:before,
.main-visual-item .main-visual-txt-con .main-visual-more-btn a:before{left:0;}
.main-visual-item .main-visual-txt-con .main-visual-more-btn a span:after,
.main-visual-item .main-visual-txt-con .main-visual-more-btn a:after{right:0;}

@media all and (min-width:801px){
	.main-visual-item .main-visual-txt-con .main-visual-more-btn a:hover{letter-spacing:3px;}
	.main-visual-item .main-visual-txt-con .main-visual-more-btn a:hover span:before,
	.main-visual-item .main-visual-txt-con .main-visual-more-btn a:hover span:after{width:50%; opacity:1}
	.main-visual-item .main-visual-txt-con .main-visual-more-btn a:hover:before,
	.main-visual-item .main-visual-txt-con .main-visual-more-btn a:hover:after{opacity:1}
}



/* 메인 비주얼 :: 슬라이드 :: active효과 */
.main-visual-item.active-item .main-visual-pc-img{
    -webkit-transform: scale(1.0,1.0) rotate(0.002deg);
     transform: scale(1.0,1.0) rotate(0.002deg);
}

.main-visual-item.active-item .txt-cm-effect.splitting .char,
.main-visual-item.active-item .main-visual-txt-con .main-visual-more-btn a{
	-webkit-animation: text-active-animation 1s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes text-active-animation {
	from {
		transform: translate3d(0, 100px, 0);
	}
	to {
		 transform: translate3d(0, 0, 0);
	}
}

.main-visual-txt-con{opacity:0}
#mainVisual.active .main-visual-txt-con{opacity:1}

.main-visual-item.active-item .main-visual-txt-con .main-visual-txt1 .char{ -webkit-animation-delay:0.3s; animation-delay:0.3s;}
.main-visual-item.active-item .main-visual-txt-con .main-visual-txt2 .char{ -webkit-animation-delay:0.4s; animation-delay:0.4s;}
.main-visual-item.active-item .main-visual-txt-con .main-visual-more-btn a{-webkit-animation-delay:0.8s; animation-delay:0.8s;}


/* 메인 비주얼 :: 슬라이드 :: 컨트롤러 */
.main-visual-control{position:absolute; right:0; bottom:-54px; z-index:9; background-color:#ee7400; width:350px; height:100px}
/* 진행바 */
.main-visual-control .main-progress{position:relative; display:block; width:100%; height:4px; top:-4px; background-color:rgba(255,255,255,0.3)}
.main-visual-control .main-progress em{position:absolute; top:0; left:0; height:100%; background-color:#ee7400}
/* 카운터,화살표 */
.main-visual-control .main-visual-conuter{position:absolute; top:50%; left:0; transform:translateY(-50%); text-align:center; width:100%}
.main-visual-control .main-visual-conuter > .count-arrow{position:relative; display:inline-block; vertical-align:middle; }
.main-visual-control .main-visual-conuter > .count-arrow:first-child{margin-right:50px}
.main-visual-control .main-visual-conuter > .count-arrow:first-child:after{position:absolute; content:""; width:1px; height:18px; background:#fff; opacity:0.3; right:-26px; top:4px}
.main-visual-control .main-visual-conuter > .count-arrow a{font-size:24px; color:#fff; display:inline-block !important; vertical-align:middle}
.main-visual-control .main-visual-conuter > .count-arrow a.prev{margin-right:20px}
.main-visual-control .main-visual-conuter > .count-arrow a.next{margin-left:20px}
.main-visual-control .main-visual-conuter > .count-arrow .num{position:relative; display:inline-block; font-weight:700; font-size:13px; color:#fff; top:1px}
.main-visual-control .main-visual-conuter > .count-arrow .num:before{position:relative; content:"0"; padding-right:1px}

/* 메인 비주얼 :: Notice 슬라이드 */
.main-notice-slide-con{position:absolute; bottom:0; left:0; width:100%; height:160px; background-color:#fff; border-bottom:1px solid #e5e5e5; padding:56px 25% 0 0; box-sizing:border-box}
.main-notice-slide-con:before{position:absolute; content:""; width:calc(3% + 245px); height:3px; background-color:#ee7400; bottom:-1px; left:0; }
.main-notice-slide-con .notice-tit{float:left; width:115px; font-weight:700; font-size:30px; letter-spacing:-0.25px; color:#333; text-transform:uppercase}
.main-notice-slide-con .notice-control{float:left; width:130px; font-size:24px; padding:0 5%}
.main-notice-slide-con .notice-control a{color:#000}
.main-notice-slide-con .notice-control .slide-arrow{}
.main-notice-slide-con .notice-control .slide-arrow.prev{margin-right:20px}
.main-notice-slide-con .notice-control .slide-arrow.next{margin-left:20px}
.main-notice-slide-con .notice-control .list-btn{opacity:0.3}
.main-notice-slide-con .notice-slide-wrap.mb-slide{display:none}
.main-notice-slide-con .main-notice-slide{float:left; width:calc(100% - 115px)}
.main-notice-slide-con .main-notice-slide .notice-slide{margin:0 -20px; float:left; width:calc(100% - 208px)}
.main-notice-slide-con .main-notice-slide .notice-slide li.slick-slide{margin:0 20px}
.main-notice-slide-con .main-notice-slide .notice-slide li a{}
.main-notice-slide-con .main-notice-slide .notice-slide li a .tit{font-weight:500; font-size:16px; letter-spacing:-0.75px; color:#333; line-height:1.3; transition:all 0.3s}
.main-notice-slide-con .main-notice-slide .notice-slide li a .date{display:block; font-weight:700; font-size:13px; letter-spacing:-0.25px; color:#333; opacity:0.5; margin-top:20px}
@media all and (min-width:801px){	
	.main-notice-slide-con .main-notice-slide .notice-slide li a:hover .tit{color:#ee7400}
}

/* 메인 비주얼 :: Задать вопрос 버튼 */
.customer-inquiry-btn{position:absolute; right:0; top:0; background-color:#fff; z-index:9; width:4.6vw; height:100%; }
.customer-inquiry-btn a{display:block; width:100%; height:100%; position:relative}
.customer-inquiry-btn a span{position:absolute; top:35%; left:50%; transform:translateX(-50%) rotate(90deg); font-weight:700; font-size:14px; letter-spacing:2px; color:#333; text-transform:uppercase; width:220px; transition:color 0.4s}
.customer-inquiry-btn a span i{font-size:26px; margin-right:15px; vertical-align:middle; position:relative; left:0; transition:left 0.4s}
@media all and (min-width:801px){		
	.customer-inquiry-btn a:hover span{color:#ee7400}
	.customer-inquiry-btn a:hover span i{left:4px}
}


/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box.center{text-align:center}
.main-tit-box .main-tit{color:#333; font-size:58px; font-weight:700; line-height:1.03; letter-spacing:-0.25px}
.main-tit-box .up-effect-txt.splitting .char{
	transform: translate3d(0, 100px, 0);
	transition:opacity 0.8s, transform 0.8s;
}
.up-effect-con{display:block; overflow:hidden}
.up-effect-con .up-effect-inner{display:inline-block; transform: translate3d(0, 100px, 0);}
 /* animation일때 */ 
 .aos-animate .main-tit-box .up-effect-txt.splitting .char,
 .aos-animate .main-tit-box .up-effect-con .up-effect-inner,
#visual.active .up-effect-con .up-effect-inner{
	-webkit-animation: text-active-animation 1s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1s cubic-bezier(0.4, 0, 0.2, 1) both;
} 
 /* transition일때 */ 
 /*
.active-section .main-tit.splitting .char,
.aos-animate .main-tit.splitting .char{
	opacity:1.0;
	transform:translateY(0);
}*/


/* -------- 메인 컨텐츠 :: 컨텐츠1(Brand Story) -------- */
#mainBrandStory{margin:143px 0 185px; position:relative}
#mainBrandStory:after{position:absolute; content:""; width:50px; height:452px; background-color:#ee7400; right:0; top:50%; transform:translateY(-50%)}
.main-brand-con{display:table; width:100%; box-sizing:border-box}
.main-brand-con > div{display:table-cell; vertical-align:middle; width:50%}
/* 왼쪽 :: 이미지 */
.main-brand-con .lf-img{padding-right:2%}
.main-brand-con .lf-img span{display:inline-block}
.main-brand-con .lf-img span img{/*max-width:100%*/width:100%}
/* 오른쪽 :: 텍스트 */
.main-brand-con .rt-txt{padding:0 90px 0 2.9%}
.main-brand-con .rt-txt .main-brand-tit .en-tit{display:inline-block; text-transform:uppercase; font-size:16px; font-weight:700; color:#ee7400;  margin-bottom:30px}
.main-brand-con .rt-txt .main-brand-tit .en-tit span{display:inline-block; padding-bottom:10px; border-bottom:3px solid #ee7400;}
.main-brand-con .rt-txt .main-brand-tit .main-sub-tit{display:block; font-weight:500; font-size:18px; letter-spacing:-0.75px; color:#333; line-height:1.83; margin-top:30px}
/* 버튼  */
.main-brand-con .rt-txt .main-brand-tit .more-btn{margin-top:60px}
.main-brand-con .rt-txt .main-brand-tit .more-btn a{position:relative; display:inline-block; width:220px; height:57px; line-height:57px; text-align:center; font-weight:700; font-size:12px; letter-spacing:0.6px; color:#000; border:1px solid #000;}
.main-brand-con .rt-txt .main-brand-tit .more-btn a span{position:relative; display:block; width:100%; height:100%; -webkit-transition:all 0.4s; transition:all 0.4s; font-weight:700}
.main-brand-con .rt-txt .main-brand-tit .more-btn a:before,
.main-brand-con .rt-txt .main-brand-tit .more-btn a:after{display:inline-block; content:""; position:absolute; -webkit-transition:all 0.4s; transition:all 0.4s; top:-1px; bottom:-1px; width:1px; background-color:#000; opacity:0}
.main-brand-con .rt-txt .main-brand-tit .more-btn a span:before,
.main-brand-con .rt-txt .main-brand-tit .more-btn a span:after{display:inline-block; content:""; position:absolute; -webkit-transition:all 0.4s; transition:all 0.4s; top:-1px; bottom:-1px; border-top:2px solid #000; border-bottom:2px solid #000; width:12px; opacity:0}
.main-brand-con .rt-txt .main-brand-tit .more-btn a span:before,
.main-brand-con .rt-txt .main-brand-tit .more-btn a:before{left:0;}
.main-brand-con .rt-txt .main-brand-tit .more-btn a span:after,
.main-brand-con .rt-txt .main-brand-tit .more-btn a:after{right:0;}

@media all and (min-width:801px){
	.main-brand-con .rt-txt .main-brand-tit .more-btn a:hover{letter-spacing:3px;}
	.main-brand-con .rt-txt .main-brand-tit .more-btn a:hover span:before,
	.main-brand-con .rt-txt .main-brand-tit .more-btn a:hover span:after{width:50%; opacity:1}
	.main-brand-con .rt-txt .main-brand-tit .more-btn a:hover:before,
	.main-brand-con .rt-txt .main-brand-tit .more-btn a:hover:after{opacity:1}
}


/* -------- 메인 컨텐츠 :: 컨텐츠2(Product) -------- */
#mainProduct{
	background-color:#ededed;
	padding:110px 0 0;
	position:relative;
	z-index:0;
	min-height:300px;
	background-image: url("/static/goldenbooster/images/common/BackSlide.png");
	background-position: center;
    background-size: cover;
}
#mainProduct:after{position:absolute; content:""; width:100%; height:90px; background-color:#000; bottom:0; left:0}
.prd-slide-con{padding:0 7%; margin-top:90px; position:relative; z-index:1}
.prd-slide-con .main-prd-slide{margin:0 -6px}
.prd-slide-con .main-prd-slide li{background-color:#fff; margin:0 6px; text-align:center; border:1px solid #cfcfcf; box-sizing:border-box}
.prd-slide-con .main-prd-slide li a{display:block; padding:19px 15px 19.5%; position:relative; }
.prd-slide-con .main-prd-slide li a:after{position:absolute; content:""; width:calc(100% + 2px); height:calc(100% + 2px); border:0px solid #ee7400; box-sizing:border-box; top:-1px; left:-1px; box-sizing:border-box; z-index:9; transition:border-width 0.2s, opacity 0.35s}
.prd-slide-con .main-prd-slide li a .prd-img{position:relative; height:0; padding-top:96%}
.prd-slide-con .main-prd-slide li a .prd-img img{position:absolute; top:0; left:0; right:0; bottom:0; max-width:100%; max-height:100%; margin:auto}
.prd-slide-con .main-prd-slide .slick-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:9; font-size:40px; color:#000}
.prd-slide-con .main-prd-slide .slick-arrow.slick-prev{left:-70px}
.prd-slide-con .main-prd-slide .slick-arrow.slick-next{right:-70px}
.prd-slide-con .main-prd-slide li a .prd-txt{padding-top:15px}
.prd-slide-con .main-prd-slide li a .prd-txt .tit{font-weight:500; display:block; font-size:20px; letter-spacing:-0.75px; color:#000; line-height:1.3}
.prd-slide-con .main-prd-slide li a .prd-txt .explain{font-weight:400; font-size:16px; letter-spacing:-0.75px; color:#666; line-height:1.625; margin-top:20px; height:3.25em; overflow:hidden}
.prd-slide-con .main-prd-slide li a .new-cate{position:absolute; top:20px; left:20px; z-index:9; width:70px; height:70px; text-align:center; font-weight:700; font-size:15px; letter-spacing:-0.35px; color:#fff; background-color:#ee7400; line-height:70px; box-shadow:7px 7px 15px 2px rgba(0,0,0,0.2)}
.prd-slide-con .main-prd-slide li a:hover:after{border-width:8px; }



.fade-up{transform:translate3d(0,30px,0); opacity:0; transition:all 1s}
.fade-up.delay200{transition-delay:0.2s}
.fade-up.delay300{transition-delay:0.3s}
.aos-animate .fade-up{transform:translate3d(0,0,0); opacity:1}