/* 메인 비주얼 */
#visual .bg1{ background: url("/img/main/visual01.jpg") no-repeat center center / cover; }
#visual .bg2{ background: url("/img/main/visual02.jpg") no-repeat center center / cover; }
#visual .bg3{ background: url("/img/main/visual03.jpg") no-repeat center center / cover; }



/* intro */
#intro{
	--before: 80px;
	--leftB: 0;
	--leftA: 50%;
	--transformB: tranaslateX(0);
}
#intro{ width: 100%; height: 100%; background: #111; position: fixed; top: 0; left: 0; z-index: 1000; }
#intro .inner{ width: 100%; height: 100%; }
#intro h1{ width: max-content; height: var(--before); display: flex; margin: 0 auto; position: relative; top: 50%; transform: translateY(-50%); overflow: hidden; animation: intro02 1s 1.5s both; will-change: height, top; }
#intro h1 > div{ height: 100%; position: relative; left: 0; transform: translateX(0); animation: intro01 1s 0.5s both; will-change: opacity, transform; }
#intro h1 .symbol{ --opacity: 1; --transformA: translateX(-50%); }
#intro h1 .text{ --opacity: 0; --transformA: translateX(0); }
#intro h1 img{ width: auto; height: 100%; }

@media screen and (max-width: 1800px){
	#intro{
		--before: 70px;
	}
}

@media screen and (max-width: 1280px){
	#intro{
		--before: 60px;
	}
}

@media screen and (max-width: 1200px){
	#intro{
		--before: 80px;
		--leftB: 50%;
		--leftA: 0;
		--transformB: translateX(-50%);
	}
	#intro h1{ width: 100%; }
	#intro h1 .symbol{ --transformA: translateX(0); }
	#intro h1 .text{ display: none; }
}


/* common */
:root{
	--baseBg: #111;
	--btnW: 70px;
	--btnH: 40px;
}
html, body{ background: var(--baseBg); }
#footer{ background: none; }
#main{ color: #FFF; }
.gradient{ background: linear-gradient(to bottom, transparent, #040404); position: relative; }
.gradient::before{ content: ""; width: 100%; height: 100%; background: url("/img/main/main_bg.png") no-repeat center bottom / contain; position: absolute; top: 0; left: 0; }
.gradient section{ position: relative; z-index: 10; }

@media screen and (max-width: 1200px){
	.gradient::before{ background-size: auto; }
}


/* sec-title */
.sec-title{ text-align: center; margin-bottom: 60px; opacity: 1 !important; }
.sec-title h4,
.sec-title p{ transform: translateY(var(--aosPlus)); opacity: 0; transition: transform var(--aosT), opacity var(--aosT); }
.sec-title span{ display: block; font-family: var(--engFont); font-size: 24px; font-weight: 300; color: rgba(255, 255, 255, 0.8); margin-bottom: 20px; opacity: 0; letter-spacing: 2px; transition: opacity var(--aosT), letter-spacing var(--aosT); }
.sec-title h4{ font-family: var(--pointFont); font-size: 8rem; font-weight: 400; }
.sec-title p{ font-size: 20px; font-weight: 200; color: rgba(255, 255, 255, 0.6); line-height: 1.8; margin-top: 30px; }

.sec-title.aos-animate span{ opacity: 1; letter-spacing: -0.02em; } 
.sec-title.aos-animate h4,
.sec-title.aos-animate p{ transform: translateY(0); opacity: 1; }


/* tab-menu */
.tab-menu{ margin-bottom: 80px; }
.tab-menu ul{ display: flex; flex-wrap: wrap; justify-content: center; }
.tab-menu ul li{ border: 1px solid transparent; border-radius: 5px; font-size: 20px; font-weight: 300; color: rgba(255, 255, 255, 0.3); padding: 10px 30px; transition: border-color 0.3s, color 0.3s; cursor: pointer; }
.tab-menu ul li.on{ font-weight: 400; border-color: #FFF; color: #FFF; }


/* btns */
.btns{ display: flex; justify-content: flex-end; }
.btns > *:not(:last-child){ margin-right: 10px; }
.btns button{ width: var(--btnW); height: var(--btnH); background: transparent; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 5px; transition: background 0.4s, border-color 0.4s; }
.btns button::before{ content: ""; display: block; height: 14px; filter: unset; -webkit-filter: unset; transition: filter 0.4s; }
.btns button.prev::before{ background: url("/img/main/slide_prev.svg") no-repeat center center / contain; }
.btns button.next::before{ background: url("/img/main/slide_next.svg") no-repeat center center / contain; }

@media screen and (hover: hover){
	.btns button:hover{ background: #FFF; }
	.btns button:hover::before{ filter: invert(1); -webkit-filter: invert(1); }
}


/* viewmore */
.viewmore{ width: 115px; height: var(--btnH); display: flex; justify-content: center; align-items: center; background: transparent; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 5px; font-family: var(--baseFont); font-size: 16px; font-weight: 300; color: rgba(255, 255, 255, 0.8) !important; position: relative; z-index: 10; transition: background 0.4s, color 0.4s; }

.viewmore.red::before{ content: ""; width: calc(100% + 2px); height: calc(100% + 2px); background: var(--mainColor); clip-path: inset(0 0 100% 0 round 5px); -webkit-clip-path: inset(0 0 100% 0 round 5px); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; transition: clip-path 0.4s; }

@media screen and (hover: hover){
	.viewmore:not(.red):hover{ background: #FFF; color: rgba(17, 17, 17, 0.8) !important; }

	.viewmore.red:hover::before{ clip-path: inset(0 0 0 0 round 5px); -webkit-clip-path: inset(0 0 0 0 round 5px); }
}

@media screen and (max-width: 1800px){
	/* sec-title */
	.sec-title{ margin-bottom: 40px; }
	.sec-title span{ font-size: 18px; }
	.sec-title p{ font-size: 18px; margin-top: 20px; }

	/* tab-menu */
	.tab-menu{ margin-bottom: 60px; }
	.tab-menu ul li{ font-size: 18px; padding: 10px 25px; }
}

@media screen and (max-width: 1280px){
	:root{
		--btnW: 60px;
	}

	/* sec-title */
	.sec-title{ margin-bottom: 30px; }
	.sec-title span{ font-size: 16px; margin-bottom: 10px; }
	.sec-title p{ font-size: 17px; margin-top: 15px; }

	/* tab-menu */
	.tab-menu{ margin-bottom: 40px; }
	.tab-menu ul li{ font-size: 17px; padding: 8px 20px; }

	/* viewmore */
	.viewmore{ width: 105px; }
}


/* visual */
#visual{ width: 100%; text-align: center; overflow: hidden; }
#visual .visual{ position: relative; }
#visual .visual::before,
#visual .visual::after{ content: ""; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.5); transform: scaleX(0); opacity: 1; position: absolute; top: 0; left: 0; z-index: 10; pointer-events: none; }
#visual .visual::before{ transform-origin: left; }
#visual .visual::after{ transform-origin: right; }
#visual .visual .bg{ height: var(--resizeVH); transform: scale(1.2); transition: transform 2s; }
#visual .visual .text{ position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); }
#visual .visual .text h2{ font-family: var(--pointFont); font-size: 8rem; font-weight: 400; color: #FFF; }
#visual .visual .text h2 span{ display: inline-block; filter: blur(15px); -webkit-filter: blur(15px); opacity: 0; will-change: filter, opacity; }
#visual .visual .text p{ font-family: var(--engFont); font-size: 24px; font-weight: 400; color: rgba(255, 255, 255, 0.8); margin-top: 35px; }

#visual .dots{ padding-bottom: 120px; position: absolute; bottom: 0; left: 0; right: 0; } 
#visual .dots ul{ display: flex !important; justify-content: center; } 
#visual .dots ul li{ width: 140px; }
#visual .dots ul li:not(:last-of-type){ margin-right: 30px; }
#visual .dots button{ width: 100%; display: flex; justify-content: center; background: none; border: none; font-family: var(--engFont); font-size: 20px; font-weight: 400; color: rgba(255, 255, 255, 0.5); outline: none; padding: 0 0 15px; transition: color 0.4s; }
#visual .dots button em{ display: inline-block; padding-right: 8px; }
#visual .dots .bar{ height: 2px; background: rgba(255, 255, 255, 0.2); }
#visual .dots .bar div{ width: 0; height: 100%; background: #FFF; }

/* slick-active */
#visual .visual.slick-active::before,
#visual .visual.slick-active::after{ animation: visualCover 1s both; }
#visual .visual.slick-active .bg{ transform: scale(1); }
#visual .visual.slick-active .text h2 span{ animation: textBlur 1s both; }
#visual .visual.slick-active .text p{ animation: textClip 1s both; }

#visual .dots .slick-active button{ color: #FFF; }

@media screen and (max-width: 1800px){
	#visual .visual .text p{ font-size: 20px; margin-top: 20px; }
	
	#visual .dots{ padding-bottom: 80px; }
	#visual .dots ul li{ width: 130px; }
	#visual .dots button{ font-size: 18px; }
}

@media screen and (max-width: 1280px){
	#visual .visual .text p{ font-size: 18px; margin-top: 10px; }

	#visual .dots{ padding-bottom: 70px; }
	#visual .dots ul li{ width: 120px; }
	#visual .dots ul li:not(:last-of-type){ margin-right: 20px; }
	#visual .dots button{ font-size: 17px; padding: 0 0 10px; }
}

@media screen and (max-width: 900px){
	#visual .visual .text h2{ font-size: 9rem; }
}


/* guide */
#guide{
	--gapR: 40px;
	--before: 52.381%;
	--after: 79.76%;
	--padding: 30px;
}
#guide{ background: url("/img/main/guide_bg.jpg") no-repeat bottom right / cover; padding: 120px 0 130px; }
#guide .tab-content .tab:not(:first-of-type){ display: none; }
#guide .tab{ position: relative; }

#guide .guide-wrap .slick-list{ margin-right: calc(var(--gapR) * -1); }
#guide .guide{ margin-right: var(--gapR); }
#guide .guide::after{ content: ""; display: block; padding-bottom: calc(var(--after) - var(--before)); transition: padding 0.5s; }
#guide .guide figure{ width: 100%; padding-bottom: var(--before); position: relative; overflow: hidden; border-radius: 9px; transition: padding 0.5s; }
#guide .guide figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#guide .guide dl{ background: transparent; border: 1px solid transparent; border-radius: 10px; padding: var(--padding) 0; margin-top: 15px; transition: background 0.5s, border-color 0.5s, padding 0.5s, margin 0.5s; }
#guide .guide dl dt,
#guide .guide p{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
#guide .guide dl dt{ font-size: 24px; font-weight: 500; color: #FFF; margin-bottom: 20px; }
#guide .guide dl dd{ padding-left: 35px; position: relative; opacity: 0.8; }
#guide .guide dl dd:not(:last-of-type){ margin-bottom: 12px; }
#guide .guide dl dd::before{ content: ""; width: 23px; height: 23px; position: absolute; top: calc(1.3em / 2); left: 0; transform: translateY(-50%); }
#guide .guide dl dd.artist::before{ background: url("/img/main/artist_icon.svg") no-repeat center center / cover; }
#guide .guide dl dd.date::before{ background: url("/img/main/date_icon.svg") no-repeat center center / cover; }
#guide .guide p{ font-size: 17px; font-weight: 200; color: rgba(255, 255, 255, 0.8); }

#guide .guide.now::after{ padding-bottom: 0; }
#guide .guide.now .img{ margin-bottom: 0; }
#guide .guide.now figure{ padding-bottom: var(--after); }
#guide .guide.now dl{ background: rgba(0, 0, 0, 0.8); border-color: rgba(255, 255, 255, 0.15); padding: var(--padding); }

#guide .guide.slick-current::after{ padding-bottom: 0; }
#guide .guide.slick-current .img{ margin-bottom: 0; }
#guide .guide.slick-current figure{ padding-bottom: var(--after); }
#guide .guide.slick-current dl{ background: rgba(0, 0, 0, 0.8); border-color: rgba(255, 255, 255, 0.15); padding: var(--padding); }

#guide .slide-info{ width: calc(100% - ((100% - (var(--gapR) * 3)) / 4) - var(--gapR)); position: absolute; bottom: 0; right: 0; }
#guide .slide-info .bar{ height: 2px; background: rgba(255, 255, 255, 0.15); margin-bottom: 30px; }
#guide .slide-info .bar div{ width: 0; height: 100%; background: #FFF; }

@media screen and (max-width: 1800px){
	#guide{
		--padding: 25px;
	}
	#guide{ padding: 100px 0; }
	#guide .guide dl dt{ font-size: 20px; margin-bottom: 15px; }
}

@media screen and (max-width: 1280px){
	#guide{
		--gapR: 30px;
		--padding: 20px;
	}
	#guide{ padding: 70px 0; }
	#guide .guide dl dt{ font-size: 18px; }
	#guide .guide dl dd{ padding-left: 27px; }
	#guide .guide dl dd::before{ width: 20px; height: 20px; top: calc((1.3em / 2) - 1px); }
	#guide .guide p{ font-size: 16px; }
}

@media screen and (max-width: 1200px){
	#guide .slide-info{ width: calc(100% - ((100% - (var(--gapR) * 2)) / 3) - var(--gapR)); }
}

@media screen and (max-width: 1000px){
	#guide .slide-info{ width: calc(100% - ((100% - (var(--gapR) * 1)) / 2) - var(--gapR)); }
}

@media screen and (max-width: 750px){
	#guide .guide{ width: 350px; }
	#guide .guide::after{ padding-bottom: 0; }
	#guide .guide .img{ margin-bottom: 0; }
	#guide .guide figure{ padding-bottom: var(--after); }
	#guide .guide dl{ background: rgba(0, 0, 0, 0.8); border-color: rgba(255, 255, 255, 0.15); padding: var(--padding); }

	#guide .slide-info{ width: 100%; position: relative; margin-top: 20px; }
	#guide .slide-info .bar{ margin-bottom: 20px; }
}


/* overview */
#overview{ padding: 80px 0 200px; }
#overview .mobile{ display: none !important; }

#overview .flex-box{ display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: flex-end; }
#overview .flex-box > div:nth-of-type(odd){ width: 550px; }
#overview .flex-box > div:nth-of-type(even){ width: 700px; padding-left: 40px; }
#overview .flex-box .content02{ margin: -225px 0; }
#overview .flex-box .content02 > div{ margin: 225px 0; }

#overview .text .title{ text-align: right; opacity: 1 !important; }
#overview .text span, 
#overview .text h3 em{ transform: translateY(100%); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); transition: transform  var(--aosT), clip-path var(--aosT); }
#overview .text span{ display: block; font-family: var(--engFont); font-size: 22px; font-weight: 300; color: rgba(255, 255, 255, 0.8); margin-bottom: 40px; }
#overview .text h3{ font-family: var(--engFont); font-size: 14rem; font-weight: 400; line-height: 1.1; margin-bottom: 100px; }
#overview .text h3 em{ display: block; line-height: inherit;  }
#overview .text p{ font-size: 20px; font-weight: 200; color: rgba(255, 255, 255, 0.7); line-height: 1.8; }
#overview .text a{ margin-top: 30px; }

#overview .text span.aos-animate, 
#overview .text h3.aos-animate em{ transform: translateY(0); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }


#overview .img{ position: relative; opacity: 1 !important; }
#overview .img figure{ width: 100%; position: relative; overflow: hidden; clip-path: inset(100% 0 0 0 round 10px); -webkit-clip-path: inset(100% 0 0 0 round 10px); transition: clip-path var(--aosT); }
#overview .img.aos-animate figure{ clip-path: inset(0 0 0 0 round 10px); -webkit-clip-path: inset(0 0 0 0 round 10px); }
#overview .img figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#overview .img i{ width: 240px; height: 240px; background: #FFF; border-radius: 50%; padding: 20px; position: absolute; bottom: 0; right: 0; transform: translate(50%, 50%); cursor: pointer; }
#overview .img i::before{ content: ""; display: block; height: 100%; background: url("/img/main/overview_text.svg") no-repeat center center / contain; animation: rotate360 30s linear infinite; }

#overview .img01{ max-width: 420px; }
#overview .img01 figure{ padding-bottom: 142.86%; }

#overview .img02{ max-width: 640px; }
#overview .img02 figure{ padding-bottom: 146.875%; }

@media screen and (hover: hover){
	#overview .img i:hover::before{ animation-play-state: paused; }
}

@media screen and (max-width: 1800px){
	#overview{ padding: 80px 0 160px; }
	#overview .flex-box > div:nth-of-type(odd){ width: 40%; }
	#overview .flex-box > div:nth-of-type(even){ width: 60%; padding-left: 0; padding-right: 150px; }
	#overview .flex-box .content02{ margin: -160px 0; }
	#overview .flex-box .content02 > div{ margin: 160px 0; }

	#overview .text span{ font-size: 20px; margin-bottom: 30px; }
	#overview .text h3{ margin-bottom: 70px; }
	#overview .text p{ font-size: 18px; }

	#overview .img i{ width: 200px; height: 200px; padding: 15px; }
}

@media screen and (max-width: 1280px){
	#overview{ padding: 70px 0 100px; }
	#overview .flex-box .content02{ margin: -120px 0; }
	#overview .flex-box .content02 > div{ margin: 120px 0; }

	#overview .text span{ font-size: 18px; margin-bottom: 20px; }
	#overview .text h3{ margin-bottom: 40px; }
	#overview .text p{ font-size: 17px; }

	#overview .img i{ width: 170px; height: 170px; }
}

@media screen and (max-width: 1000px){
	#overview .img i{ width: 150px; height: 150px; padding: 10px; }

	#overview .pc .flex-box{ flex-direction: column; }
	#overview .pc .flex-box > div{ width: 100% !important; }
	#overview .pc .flex-box > div:not(:last-of-type){ margin-bottom: 20px; }
	#overview .pc .flex-box > div:nth-of-type(even){ padding-right: 0; }
	#overview .pc .img{ display: none; }

	#overview .mobile{ display: block !important; padding-top: 60px; }
	#overview .mobile .flex-box{ align-items: flex-start; }
	#overview .img01{ transform: translateY(-80px); }
}

@media screen and (max-width: 900px){
	#overview .img i{ width: 100px; height: 100px; padding: 7px; }

	#overview .flex-box > div:nth-of-type(even){ padding-right: 30px; }
}

@media screen and (max-width: 650px){
	#overview .img i{ width: 80px; height: 80px; padding: 7px; }
}



/* banner */
#banner{ /* padding: 125px 0 60px; */ position: relative; z-index: 100; opacity: 1 !important; clip-path: inset(0 100% 0 0); -webkit-clip-path: inset(0 100% 0 0); transition: clip-path var(--aosT); }
#banner.aos-animate{ clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); }
#banner .bg{ width: 100%; padding-bottom: 28.399%; overflow: hidden; position: relative; /* position: absolute; top: 0; left: 0; z-index: -1; */ }
#banner .bg::before,
#banner .bg::after{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 10; opacity: 0.5; transition: opacity 2s; }
#banner .bg::before{ background: linear-gradient(to bottom, #060606, transparent); }
#banner .bg::after{ background: linear-gradient(to top, #060606, transparent); }
#banner .bg img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); transition: transform 2s; }

#banner .title{ padding-bottom: 140px; }
#banner .title span{ display: block; font-size: 20px; font-weight: 200; margin-bottom: 25px; }
#banner .title h3{ font-size: 9rem; font-weight: 500; } 

#banner .bottom{ border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 20px; }
#banner .dl{ display: flex; flex-wrap: wrap; justify-content: space-between; margin: -5px -30px; }
#banner .dl > div{ display: flex; flex-wrap: wrap; }
#banner .dl dl{ display: flex; font-size: 18px; color: rgba(255, 255, 255, 0.8); padding: 5px 30px; }
#banner .dl dl dt{ font-weight: 500; padding-right: 22px; }
#banner .dl dl dd{ font-weight: 200; }
#banner .dl ul{ display: flex; margin: -5px -10px; }
#banner .dl ul li{ padding: 5px 10px; position: relative; }
#banner .dl ul li::after{ content: ""; width: 1px; height: 12px; background: rgba(255, 255, 255, 0.8); position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
#banner .dl ul li:last-of-type::after{ display: none; }

@media screen and (hover: hover){
	#banner:hover .bg::before, 
	#banner:hover .bg::after{ opacity: 0.15; }
	#banner:hover .bg img{ transform: translate(-50%, -50%) scale(1.05); }
}

@media screen and (max-width: 1800px){
	#banner .title{ padding-bottom: 100px; }
	#banner .title span{ font-size: 18px; margin-bottom: 15px; }

	#banner .dl{ margin: -5px -20px; }
	#banner .dl dl{ padding: 5px 20px; }
}

@media screen and (max-width: 1280px){
	/* #banner{ padding: 100px 0 40px; } */

	#banner .title{ padding-bottom: 60px; }
	#banner .title span{ font-size: 16px; margin-bottom: 5px; }

	#banner .bottom{ padding-top: 15px; }
	#banner .dl{ margin: -5px -15px; }
	#banner .dl dl{ font-size: 17px; }
	#banner .dl dl dt{ padding-right: 15px; }
	#banner .dl dl{ padding: 5px 15px; }
}

@media screen and (max-width: 900px){
	/* #banner{ padding: 80px 0 30px; } */
	#banner .title{ padding-bottom: 40px; }
	#banner .title h3{ font-size: 8rem; }
}

@media screen and (max-width: 750px){
	/* #banner{ padding: 60px 0 30px; } */
	#banner .dl > div{ flex-direction: column; }
}


/* stream */
#stream{ background: url("/img/main/stream_bg.jpg") no-repeat center center / cover; padding: 160px 0; }
#stream .sec-title{ margin-bottom: 45px; }
#stream .btns{ margin-bottom: 20px; }

#stream .stream-wrap .slick-list{ margin-right: -40px; }
#stream .stream{ margin-right: 40px; }
#stream .stream a{ display: block; position: relative; }
#stream .stream figure{ display: block; position: relative; padding-bottom: 56.478%; overflow: hidden; border-radius: 10px; }
#stream .stream figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#stream .stream i{ width: 80px; height: 80px; background: rgba(255, 255, 255, 0.4); border-radius: 50%; backdrop-filter: blur(5px); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: background 0.4s; }
#stream .stream i{ 
	mask: url("/img/main/play_icon.svg") no-repeat center center / contain;
	-webkit-mask: url("/img/main/play_icon.svg") no-repeat center center / contain;
}

@media screen and (hover: hover){
	#stream .stream:hover i{ background: #FFF; }
}

@media screen and (max-width: 1800px){
	#stream{ padding: 120px 0; }
	#stream .stream i{ width: 70px; height: 70px; }
}

@media screen and (max-width: 1280px){
	#stream{ padding: 80px 0; }
	#stream .sec-title{ margin-bottom: 30px; }
	#stream .stream i{ width: 60px; height: 60px; }
}

@media screen and (max-width: 1000px){
	#stream .stream-wrap{ width: calc(100% + 20px); }
	#stream .stream-wrap .slick-list{ margin-right: -20px; }
	#stream .stream{ margin-right: 20px; }
	#stream .stream{ width: 370px; }
}


/* review */
#review{ overflow: hidden; padding: 100px 0 320px; }
#review .btns{ margin-bottom: 40px; }

#review .review-wrap{ width: calc(100% + ((100vw - 100%) / 2)); }
#review .review-wrap .slick-list{ margin-right: -40px; }
#review .review{ width: 540px; margin-right: 40px; }
#review .review figure{ display: block; position: relative; padding-bottom: 66.668%; border-radius: 10px; overflow: hidden; }
#review .review figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#review .review h6{ height: 3.2em; font-size: 22px; font-weight: 400; color: #FFF; line-height: 1.6; text-overflow: ellipsis; overflow: hidden; word-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-top: 30px;  }
#review .review p{ font-size: 17px; font-weight: 200; color: rgba(255, 255, 255, 0.6); }

#review .bar{ height: 2px; background: rgba(255, 255, 255, 0.15); margin-top: 60px; }
#review .bar div{ width: 0; height: 100%; background: #FFF; }

@media screen and (max-width: 1800px){
	#review{ padding: 100px 0 260px; }
	#review .review{ width: 500px; }
	#review .review h6{ font-size: 20px; }
}

@media screen and (max-width: 1280px){
	#review{ padding: 80px 0 200px; }
	#review .sec-title{ margin-bottom: 40px; }
	#review .btns{ margin-bottom: 20px; }

	#review .review{ width: 450px; }
	#review .review h6{ font-size: 18px; margin-top: 25px; }
	#review .review p{ font-size: 16px; }

	#review .bar{ margin-top: 40px; }
}

@media screen and (max-width: 1200px){
	#review .review{ width: 400px; }
}

@media screen and (max-width: 1000px){
	#review .review-wrap .slick-list{ margin-right: -20px; }
	#review .review{ width: 350px; margin-right: 20px; }
}

@media screen and (max-width: 900px){
	#review{ padding: 80px 0 160px; }
}

@media screen and (max-width: 800px){
	#review .sec-title em{ display: block; }
}


/* support */
#support{ padding-bottom: 240px; }
#support .sec-title{ margin-bottom: 0; }
#support .sec-title p{ line-height: 1.8; }
#support .sec-title a{ margin: 0 auto; margin-top: 40px; }

@media screen and (max-width: 1800px){
	#support{ padding-bottom: 200px; }
}

@media screen and (max-width: 1280px){
	#support{ padding-bottom: 160px; }
}

@media screen and (max-width: 900px){
	#support{ padding-bottom: 120px; }
}

@media screen and (max-width: 600px){
	#support br{ display: none; }
}