/* 메인 비주얼 */
#visual .bg1{ background: url("/img/main/visual01.jpg") no-repeat center right 20% / 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 right 30% / cover; }


/* common */
#main{ padding-bottom: 245px; background: url("/img/main/main_bg.svg") no-repeat bottom 90px right -50px / auto; overflow: hidden; }

@media screen and (max-width: 1600px){
	#main{ padding-bottom: 200px; background-size: 600px auto; background-position: bottom 90px right -20px; }
}

@media screen and (max-width: 1280px){
	#main{ padding-bottom: 150px; background-size: 500px auto; background-position: bottom 50px right -10px; }
}

@media screen and (max-width: 900px){
	#main{ background-size: 400px auto; background-position: bottom 70px right -10px; }
}


/* visual */
#visual{ position: relative; }
#visual .overflow{ overflow: hidden; }
#visual .visual-wrap{ animation: bgScale var(--active) both; }
#visual .visual{ max-height: 100svh; height: var(--vh); overflow: hidden; z-index: 997 !important; opacity: 1 !important; }
#visual .visual .bg{ max-height: 100svh; height: var(--vh); transform: scale(1.1); transition: var(--hidden); }

#visual .visual.prev{ z-index: 998 !important; }

#visual .visual.slick-active{ z-index: 999 !important; animation-name: bgClip; animation-fill-mode: both; }
#visual .visual.slick-active .bg, 
#visual .visual.slick-now .bg{ transform: scale(1); transition: var(--active); }


#visual .text{ position: absolute; top: 57%; left: 0; right: 0; z-index: 100; transform: translateY(-50%); }
#visual .text h2{ font-size: 5.4rem; font-weight: 400; color: transparent; letter-spacing: -0.02em; line-height: 1.4; background: linear-gradient(to right, #fff, #fff, #fff, #fff 50%, transparent 50%); background-clip: text; -webkit-background-clip: text; background-size: 200% 100%; background-position: 100%; line-height: 1.4; }
#visual .text h2 strong{ display: inline-block; font-size: 7rem; font-weight: 700; color: #FFF; line-height: inherit; 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); position: relative; }
#visual .text h2 strong.border{ font-weight: 900; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #D6D6D6; top: 3px; }
#visual .text h2 sup{ font-size: medium; font-weight: 500; vertical-align: text-top; }
#visual .text .delay{ animation-delay: 0.5s !important; }
#visual .text .delay2{ animation-delay: 1s !important; }

#visual .text.animated h2{ animation: textBg 3s 1.5s both; }
#visual .text.animated h2 strong{ animation: textClip 0.7s both; }


#visual .scrolldown{ position: absolute; bottom: 0; left: 0; right: 0; pointer-events: none; }
#visual .scrolldown .flex{ display: flex; }
#visual .scrolldown .bar{ width: 1px; height: 170px; background: rgba(255, 255, 255, 0.3); overflow: hidden; }
#visual .scrolldown .bar div{ height: 40px; position: relative; top: 0; left: 0; transform: translateY(0); background: #FFF; animation: scrolldown 2s infinite; }
#visual .scrolldown span{ display: inline-block; font-family: var(--engFont); font-size: 18px; font-weight: 300; color: #FFF; letter-spacing: -0.02em; padding-left: 10px; }

#visual .dots{ width: 295px; height: 130px; display: flex; justify-content: space-between; align-items: center; background: #FFF; padding: 0 40px; position: absolute; bottom: -1px; right: 0; z-index: 100; }
#visual .dots button{ width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; background: none; border: none; padding: 0; }
#visual .dots button img{ width: auto; height: auto; }
#visual .dots ul{ display: flex; }
#visual .dots ul li{ font-family: var(--engFont); font-size: 24px; font-weight: 400; color: #CCC; letter-spacing: -0.01em; padding: 14px; position: relative; }
#visual .dots ul li::after{ content: ""; width: 1px; height: 24px; background: #CCC; position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
#visual .dots ul li:last-of-type::after{ display: none; }
#visual .dots ul li.index{ color: var(--mainColor); padding-left: 0; }
#visual .dots ul li.length{ padding-right: 0; }

@media screen and (max-width: 1600px){
	#visual .scrolldown .bar{ height: 120px;}
	#visual .scrolldown span{ font-size: 17px; }

	#visual .dots{ width: 250px; height: 110px; }
	#visual .dots ul li{ font-size: 22px; }
	#visual .dots ul li::after{ height: 20px; }
	#visual .dots button{ width: 40px; height: 40px; }
	#visual .dots button img{ height: 20px; }
}

@media screen and (max-width: 1280px){
	#visual .scrolldown .bar{ height: 100px;}
	#visual .scrolldown .bar div{ height: 30px; }
	#visual .scrolldown span{ font-size: 16px; }

	#visual .dots{ width: 200px; height: 90px; padding: 0 15px; }
	#visual .dots ul li{ font-size: 22px; }
	#visual .dots ul li::after{ height: 20px; }
	#visual .dots button{ width: 35px; height: 35px; }
	#visual .dots button img{ height: 16px; }
}

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


/* content */
#content{ padding: 140px 0 100px; }
#content .flex-box{ display: flex; flex-wrap: wrap; justify-content: space-between; }
#content .item{ width: calc((100% - 40px) / 2); display: flex; flex-direction: column; justify-content: flex-end; color: #FFF; position: relative; padding-top: 100px; }
#content .item::before{ content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.5s; }
#content .item > div{ padding: 60px; }
#content .item h3{ font-size: 6rem; font-weight: 600; letter-spacing: -0.01em; }
#content .item p{ font-size: 22px; letter-spacing: -0.01em; }
#content .item a{ margin-top: 60px; }
#content .item .top p{ font-weight: 500; padding-top: 20px; }
#content .item .bottom p{ font-weight: 200; color: rgba(255, 255, 255, 0.8); line-height: 1.6; }

#content .absolute{ display: none; position: absolute; bottom: 0; left: 0; right: 0; }
#content .relative{ position: relative; }

#content .item01{ background: url("/img/main/main_img01.jpg") no-repeat center center / cover; }
#content .item01 .bottom p{ padding-top: 25px; }

#content .item02{ background: url("/img/main/main_img02.jpg") no-repeat center center / cover; }
#content .item02 .bottom p{ padding-top: 40px; }

@media (hover: hover) and (pointer: fine) {
	#content .absolute{ display: block; }
	#content .absolute .bottom{ display: none; }
	#content .relative{ opacity: 0; pointer-events: none; }

	#content .item:hover::before{ opacity: 1; }
}

@media screen and (max-width: 1600px){
	#content{ padding: 100px 0; }
	#content .item{ padding-top: 70px; }
	#content .item > div{ padding: 40px; }
	#content .item p{ font-size: 20px; }
	#content .item a{ margin-top: 40px; }

	#content .item01 .bottom p{ padding-top: 20px; }
	#content .item02 .bottom p{ padding-top: 30px; }
}

@media screen and (max-width: 1280px){
	#content{ padding: 80px 0 60px; }
	#content .item{ padding-top: 50px; }
	#content .item > div{ padding: 30px; }
	#content .item p{ font-size: 18px; }
	#content .item a{ margin-top: 20px; }

	#content .item01 .bottom p{ padding-top: 15px; }
	#content .item02 .bottom p{ padding-top: 25px; }
}

@media screen and (max-width: 1000px){
	#content .item{ width: 100%; }
	#content .item:not(:last-of-type){ margin-bottom: 40px; }
	#content .item br{ display: none; }
	#content .item .bottom div{ height: auto !important; }
}