/* common */
body{ background: #000; }
#main section{ overflow: hidden; }
#main section:not(#visual){ color: #fff; }
.text-box h2{ font-family: var(--Space); font-size: 8rem; font-weight: 400; color: #fff; letter-spacing: -0.01em; text-transform: uppercase; line-height: 1.125; }
.text-box p{ font-size: 2.3rem; font-weight: 400; letter-spacing: -0.02em;  padding-top: 40px; padding-bottom: 90px; }
a.rounding{ display: flex; justify-content: center; align-items: center; width: 175px; height: 60px; font-family: var(--Space); font-size: 1.6rem; font-weight: 400; color: #fff; text-transform: uppercase; border-radius: 100px; border: 1px solid #fff; position: relative; z-index: 5; overflow: hidden; transition: color 0.4s; }
a.rounding::before{ content: ""; width: 110%; height: 110%; background: #fff; position: absolute; top: 50%; left: 50%; z-index: -1; transform: translate(-50%, -50%) scaleY(0); transform-origin: bottom; transition: all 0.4s; }
a.rounding:hover{ color: #000; font-weight: 500; }
a.rounding:hover::before{ transform: translate(-50%, -50%) scaleY(1); }
.overflow{ overflow: hidden; }

@media screen and (max-width: 1500px){
	.text-box h2{ font-size: 7.5rem; } 
}

@media screen and (max-width: 1200px){
	.text-box h2{ font-size: 6.5rem; }
	a.rounding{ width: 150px; height: 55px; }
}

@media screen and (max-width: 1000px){
	#areas a.rounding{ font-size: 1.5rem; width: 120px; height: 50px; }
}

@media screen and (max-width: 750px){
	.text-box h2{ font-size: 5rem; } 
	.text-box p{ font-size: 1.8rem; }
}

/* visual */
#visual{ background: #fff; }
#visual .scroll-box{ height: 100vh; overflow: hidden; }
#visual .padding{ padding-bottom: 740px; }  

#visual .absolute{ line-height: 1.13; text-align: center; } 
#visual .relative h2.light{ font-size: 6.4rem; font-weight: 200; letter-spacing: -0.02em; }
#visual .relative h2.bold{ font-family: var(--Space); font-size: 9.2rem; font-weight: 500; text-transform: uppercase; }
#visual .black h2.light{ color: #333; }
#visual .black h2.bold{ color: #111; }
#visual .white{ opacity: 0; animation: fade-in 1.5s ease forwards; }
#visual .white h2{ color: #fff; }  

#visual .video-wrap{ height: 100vh; position: relative; }
#visual .relative{ width: 100%; height: 100%; position: absolute; left: 0; right: 0; pointer-events: none; } 
#visual .absolute{ position: absolute; top: -165px; left: 0; right: 0; transform: translateY(-100%); z-index: 20; }
#visual .absolute.black{ z-index: -5; }
#visual .absolute.white{ z-index: 10; }  
#visual .absolute .margin{ margin-top: 30px; }  

#visual .video-box{ width: 90%; margin: 0 auto; height: 100vh; position: relative; overflow: hidden; opacity: 0; animation: fade-in 1.5s ease forwards; }
#visual .video-box .video{ width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#visual .video-box .video video{ width: 100%; height: 100%; object-fit: cover; /* object-position: center; */  }

#visual .absolute h2.light{ transform: translateX(-10%); opacity: 0; animation: text-rtl 1s 0.2s ease forwards; }
#visual .absolute h2.bold{ transform: translateX(10%); opacity: 0; animation: text-ltr 1s 0.2s ease forwards; }
#visual .absolute .margin img{ opacity: 0; animation: fade-in 1s 0.2s ease forwards; }


@keyframes text-rtl{
	0%{ transform: translateX(-10%); opacity: 0; }
	100%{ transform: translateX(0); opacity: 1; }
}

@keyframes text-ltr{
	0%{ transform: translateX(10%); opacity: 0; }
	100%{ transform: translateX(0); opacity: 1; }
}

@keyframes fade-in{
	0%{ opacity: 0; }
	100%{ opacity: 1; }
}

@media screen and (max-width: 1500px){
	#visual .padding{ padding-bottom: 620px; }
	#visual .relative h2.light{ font-size: 5rem; }
	#visual .relative h2.bold{ font-size: 7.5rem; }
}

@media screen and (max-width: 1200px){
	#visual .padding{ padding-bottom: 450px; }
	#visual .relative h2.light{ font-size: 4rem; }
	#visual .relative h2.bold{ font-size: 6rem; }
	#visual .absolute{ top: -115px; transform: translateY(-100%); }
	#visual .absolute.black{ z-index: 10; }
}

@media screen and (max-width: 1030px){
	#visual .relative h2.light{ font-size: 3.5rem; }
	#visual .relative h2.bold{ font-size: 5.5rem; }
}

@media screen and (max-width: 900px){
	#visual .padding{ padding-bottom: 550px; }
}

@media screen and (max-width: 700px){
	#visual .relative h2.light{ font-size: 3rem; }
	#visual .relative h2.bold{ font-size: 5rem; }
	#visual .absolute{ top: -90px; }
}

/* Our Key Therapeutic Areas */
#areas{ padding: 240px 0; overflow: hidden; }
#areas .flex-box{ display: flex; justify-content: space-between; position: relative; }
#areas .text-box h2::after{ content: url("/img/main/arrow_icon.svg"); margin-left: 25px; position: relative; top: -5px; }

#areas .slide-box{ width: 100%; position: absolute; top: 17px; left: 760px; }
#areas .slide-box .circle{ width: 150px; height: 150px; position: absolute; top: -75px; left: -75px; z-index: 10; background: #fff; border-radius: 50%; }
#areas .slide-box .circle img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#areas .slide-box .circle img.animation{ animation: rotate-image 10s linear infinite; transform-origin: center center; }
#areas .slide-box .circle a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }
#areas .area-wrap .slick-list{ margin-right: -40px; }
#areas .area{ width: 360px; margin-right: 40px; border-radius: 20px; overflow: hidden; border: 2px solid var(--mainColor); position: relative; }
#areas .area figure{ width: 100%; overflow: hidden; position: relative; padding-bottom: 141%; margin-bottom: -5px; clip-path: circle(27% at 50% 35%); transition: all 0.5s; }
#areas .area figure::after{ content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.5s; transition-delay: 0.5s; }
#areas .area figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#areas .text{ width: 100%; position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); text-align: center; padding: 0 25px; }
#areas .text *{ word-break: break-word; }
#areas .text h4{ height: 2.5332em; font-family: var(--Noto); font-size: 2.8rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2666; margin-bottom: 5px; }
#areas .text p{ font-size: 1.8rem; font-weight: 300; letter-spacing: -0.02em; line-height: 1.5777; opacity: 0; transform: translateY(30px); transition: all 0.3s; }
#areas .area a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 20; }

#areas .button-box{ position: absolute; bottom: 0; left: -115px; display: flex; align-items: center; }
#areas .button-box button{ border: none; background: none; padding: 0 10px; }
#areas .button-box ul { display: flex; align-items: center; margin-top: -2px; }
#areas .button-box ul li{ font-family: var(--Poppins); font-size: 1.4rem; letter-spacing: -0.02em; }
#areas .button-box ul li.index{ font-weight: 600; color: var(--mainColor); }
#areas .button-box ul li.length{ font-weight: 400; color: #aaa; position: relative; padding-left: 15px; }
#areas .button-box ul li.length::before{ content: "/"; position: absolute; top: 50%; left: 5px; transform: translateY(-50%); }

@keyframes rotate-image{
	0%{ transform: translate(-50%, -50%) rotate(0deg); }
	100%{ transform: translate(-50%, -50%) rotate(360deg); }
}

#areas .slide-box .circle:hover img.animation{ animation-play-state: paused; }
#areas .area:hover figure{ clip-path: circle(100% at 50% 35%); }
#areas .area:hover figure::after{ opacity: 1; transition-delay: unset; }
#areas .area:hover .text p{ opacity: 1; transform: translateY(0); transition: all 0.5s; }

@media screen and (max-width: 1500px){
	#areas .slide-box{ left: 660px; }
}

@media screen and (max-width: 1250px){
	#areas{ padding: 150px 0; }
	#areas .text h4{ font-size: 2.8rem; }
	#areas .slide-box{ left: 560px; }
	#areas .slide-box .circle{ width: 120px; height: 120px; }
	#areas .slide-box .circle img.animation{ width: 85%; }
}

@media screen and (max-width: 1200px){
	#areas .text-box h2::after{ display: inline-block; transform: scale(0.8); top: 5px; margin-left: 10px; }
}

@media screen and (max-width: 1000px){
	#areas{ padding: 100px 0; }
	#areas .flex-box{ flex-direction: column; }
	#areas .text-box{ padding-bottom: 40px; }
	#areas .text-box br:first-of-type{ display: none; }
	#areas .text-box p{ padding-top: 20px; padding-bottom: 20px; }
	#areas .text-box > div{ display: flex; justify-content: flex-end; }
	#areas .slide-box{ position: relative; top: 0; left: 0; }
	#areas .slide-box .circle{ display: none; }
	#areas .button-box{ position: static; justify-content: flex-end; padding-top: 20px; margin-right: -10px; }
}

@media screen and (max-width: 600px){
	#areas .text-box br{ display: none; }
}


/* PRESS RELEASE */
#release{ padding-bottom: 220px; }
#release .text-box{ display: flex; justify-content: space-between; align-items: center; padding-bottom: 105px; }
#release .text-box a{ display: flex; justify-content: center; align-items: center; width: 65px; height: 65px; border-radius: 50%;  font-size: 4rem; font-weight: 300; letter-spacing: -0.01em; color: #fff; border: 1px solid #fff; }

#release ul{ display: flex; margin-left: -30px; }
#release ul li{ width: calc(100% / 3); padding: 60px 30px; border-right: 1px solid rgba(255, 255, 255, 0.2); position: relative; }
#release ul li:last-of-type{ border-right: none; }
#release ul li .text h4{ width: 100%; font-size: 3rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 35px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
#release ul li .text p{ display: -webkit-box; width: 100%; height: 8.333em; font-size: 1.8rem; font-weight: 400; letter-spacing: -0.02em; line-height: 1.6666; opacity: 0.9; text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 5; -webkit-box-orient: vertical; }

#release ul li .flex{ display: flex; justify-content: space-between; align-items: center; margin-top: 135px; }
#release ul li .flex span{ font-family: var(--Space); font-size: 1.6rem; font-weight: 400; letter-spacing: 0.01em; opacity: 0.7; }
#release ul li a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

@media screen and (max-width: 1500px){
	#release .text-box{ padding-bottom: 50px; }
	#release ul li{ padding: 30px; } 
	#release ul li .text h4{ font-size: 2.5rem; }
}

@media screen and (max-width: 1250px){
	#release{ padding-bottom: 150px; }
}

@media screen and (max-width: 1200px){
	#release ul li .text h4{ font-size: 2rem; }
	#release ul li .text p{ font-size: 1.6rem; }
	#release ul li .flex span{ font-size: 1.5rem; }
}

@media screen and (max-width: 1000px){
	#release{ padding-bottom: 100px; }
	#release .text-box a{ width: 55px; height: 55px; }
	#release ul{ flex-direction: column; margin-left: 0; } 
	#release ul li{ width: 100%; border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
	#release ul li:last-of-type{ border-bottom: none; }
	#release ul li .flex{ margin-top: 50px; }
}

@media screen and (max-width: 750px){
	#release .text-box{ padding-bottom: 20px; }
	#release .text-box a{ width: 45px; height: 45px; }
	#release ul li{ padding: 30px 15px; }
}


/* Join the Team */
#join .video-box{ position: relative; overflow: hidden; }
#join .video-box video{ position: absolute; top: 0; right: 0; width: 100%; }
#join .video-box .text-box{ padding: 150px 0 255px; }
#join .video-box .text-box p{ padding-top: 30px; padding-bottom: 70px; }

@media screen and (min-width: 1921px){ 
	#join .video-box video{ height: 100%; object-fit: cover; } 
}

@media screen and (max-width: 1250px){
	#join .video-box .text-box{ padding: 100px 0 150px; }
	#join .video-box .text-box p{ padding-top: 15px; padding-bottom: 40px; }
}

@media screen and (max-width: 900px){
	#join .video-box video{ height: 100%; object-fit: cover; } 
}


/* contact us */
#main section#contact{ background: #111; padding: 135px 0 125px; }
#contact .flex-box{ display: flex; justify-content: space-between; align-items: center; }
#contact .text-box{ width: 30%; }  
#contact .text-box p{ padding-top: 20px; padding-bottom: 0; }

#contact .info-box{ width: 65%; display: flex; margin-right: -70px; }  
#contact .info-box dl{ width: calc(100% / 3); border-left: 1px solid rgba(255, 255, 255, 0.15); padding-left: 30px; padding-right: 70px; }
#contact .info-box dl dt{ font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; }
#contact .info-box dl dd, #contact .info-box dl dd p{ font-size: 1.5rem; font-weight: 300; letter-spacing: -0.02em; line-height: 1.6333; opacity: 0.5; }
#contact .info-box dl dd p:not(.no-indent){ padding-left: 1em; text-indent: -1em; }

@media screen and (max-width: 1880px){
	#contact .info-box{ margin-right: 0; }
}

@media screen and (max-width: 1720px){
	#contact .info-box dl{ padding: 0 30px; } 
	#contact .info-box dl{ width: calc(100% / 3); }
}

@media screen and (max-width: 1500px){
	#contact .flex-box{ flex-direction: column; align-items: flex-start; }
	#contact .text-box{ width: 100%; padding-bottom: 50px; }
	#contact .info-box{ width: 100%; justify-content: space-between; }
	#contact .info-box dl{ width: calc((100% - 60px) / 3); border-left: none; border-right: 1px solid rgba(255, 255, 255, 0.15); padding: 0; }
	#contact .info-box dl:first-of-type{ border-left: none; }
	#contact .info-box dl:last-of-type{ border-right: none; }
}

@media screen and (max-width: 1250px){
	#main section#contact{ padding: 100px 0; }
}

@media screen and (max-width: 1000px){
	#main section#contact{ padding: 60px 0; }
	#contact .info-box{ flex-direction: column; }  
	#contact .info-box dl{ width: 100%; display: flex; align-items: center; border-right: none; }
	#contact .info-box dl dt{ font-size: 1.8rem; margin: 0; width: 120px; border-right: 1px solid rgba(255, 255, 255, 0.15); padding: 30px 0; text-align: center; padding-right: 15px;}
	#contact .info-box dl dd{ width: calc(100% - 120px); padding-left: 30px; }
	#contact .info-box dl:not(:last-of-type){ padding-bottom: 30px; }
}