/* sc-visual */
.sc-visual{ position: relative; height: 400vh; }
.sc-visual .sticky-wrapper{ height: 500vh; }
.sc-visual .sticky{ position: sticky; top: 0; height: 100vh; }
.sc-visual .video{ height: 100vh; }
.sc-visual .video video{ object-fit: cover; width: 100%; height: 100%; }
.sc-visual .group-text{ position: absolute; top: 0; left: 0; width: 50%; height: 100vh; will-change: transform; transform: translateX(-100%); }
.sc-visual .group-text .area1{ display: flex; justify-content: center; flex-direction: column; align-items: flex-start; height: 100%; background: rgba(0, 0, 0, .5); border-right: 1px solid rgba(255, 255, 255, 0.1); color: #fff; gap: 25px; padding: 125px 100px 25px; }
.sc-visual .area1 .text1{ font-size: 15px; line-height: 15px; font-weight: 300; }
.sc-visual .area1 .text2{ font-size: 70px; line-height: 70px; font-weight: 300; }
.sc-visual .area1 .text2 span{ display: inline; font-family: "Boska Variable", sans-serif; font-weight: 300; transition: all .3s ease-in-out; font-style: italic; }
.sc-visual .area1 .btn-contact{ display: flex; justify-content: center; align-items: center; border: 1px solid #fff; border-radius: 100px; padding: 15px 25px; }
.sc-visual .area1 .btn-contact:hover{ background: #fff; color: #000; }


[data-bg="1"]{ position: relative; background-color: #000; height: 600vh; transition: .3s; }
[data-bg="1"].on{ background-color: #fff; }


/* sc-intro */
.sc-intro{ position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; }
.sc-intro .text-wrap{ display: flex; flex-direction: column; align-items: center; gap: 25px; padding: 100px 5%; line-height: 3vw; color: #ecdbd1; text-align: center; }
.sc-intro .text-wrap .title{ font-size: 2.5vw; line-height: 3vw; font-weight: 400; }
.sc-intro .text-wrap .font{ color: #fbbc04; }
.sc-intro .text-wrap .btn-select{ display: flex; align-items: center; cursor: pointer; padding: 0; transition:.4s; border-radius: 100px; padding: 0 25px; background-color: #202124; }
.sc-intro .text-wrap .btn-select:hover{ background-color: #3A3E41; }


/* sc-work */
.sc-work{ position: sticky; top: 0; margin-top: 100vh; height: 400vh; }
.sc-work .area{ position: sticky; top: 10rem; height: 100vh; width: 55%; margin-left: auto; margin-right: auto; }
.sc-work .area .wrap{ display: flex; align-items: center; justify-content: space-between; width: 100%; height: 30rem; border-radius: 25px; box-shadow: 0 10px 20px rgba(0, 0, 0, .2); padding: 5%; }
.sc-work .area1 .wrap{ background-color: #304c95; }
.sc-work .area2 .wrap{ background-color:#e75f4f ; }
.sc-work .area3 .wrap{ background-color:#2a7f62 ; }
.sc-work .area4 .wrap{ background-color:#262626 ; }
.sc-work .area2{ top: 13rem; }
.sc-work .area3{ top: 16rem; }
.sc-work .area4{ top: 0; }
.sc-work .area img{ border-radius: 25px; }
.sc-work .area .video{ position: relative; width: 60%; overflow: hidden; border-radius: 25px; }
.sc-work .area .video::before{ position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; border-radius: 20px; z-index: 1; }
.sc-work .area .control-playbtn{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; }
.sc-work .area .btn-play{ display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background-color: rgba(51, 51, 51, .5); border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(5px); }
.sc-work .area .btn-play svg{margin-left: 8px;}
.sc-work .wrap:hover .control-playbtn{ opacity: 1; }

.sc-work .area .text{ display: flex; flex-direction: column; gap: 25px; color: #ecdbd1; width: 35%; font-weight: 300; }
.sc-work .area .text .title{ font-size: 2.5vw; line-height: 1; font-weight: 400; font-family: "Satoshi Variable", sans-serif; text-transform: uppercase; }
.sc-work .area .paragraph em{ font-weight: 500; font-size: 1rem; text-transform: uppercase; }
.sc-work .area .paragraph .blue-line{ display: inline-block; color: #1a73e8; text-decoration: underline; text-transform: capitalize; font-weight: 400; }
.sc-work .area .text .gosite{ display: flex; align-items: center; gap: 10px; font-weight: 400; }
.sc-work .area .text .gosite path{ fill: #fff; }


/* sc-cooperation */
.sc-cooperation{ display: flex; flex-direction: column; align-items: center; gap: 75px; overflow: hidden; font-size: 50px; font-weight: 300; color: #262626; padding-bottom: 100px; }
.sc-cooperation .headline{ line-height: 55px; font-family: 'Google Sans'; font-weight: 700; letter-spacing: -.25px; color: #202124; }
.sc-cooperation .cooper-wrapper{ display: flex; flex-direction: column; gap: 25px; max-width: 1300px; transition: .3s; }
.sc-cooperation .logos{ display: flex; justify-content: center; gap: 25px; will-change: transform; }
.sc-cooperation .logo-item{ display: flex; justify-content: center; align-items: center; width: 207px; height: 207px; border: 1px solid #dadce0; border-radius: 2000px; padding: 10px; }
.sc-cooperation .logo-item img{ width: 185px; padding: 30px; }
.sc-cooperation .logos:nth-child(3) .logo-item:nth-child(1) img{ padding: 20px; }
.sc-cooperation .logos:nth-child(3) .logo-item:nth-child(3) img{ margin-top: 15px; }
.sc-cooperation .move-right{ transform: translateX(10%); }
.sc-cooperation .move-left{ transform: translateX(-10%); }


/* sc-testimonials */
.sc-testimonials{ position: sticky; top: 0; background-color: rgb(248,249,250); color: rgb(32,33,36); font-family: 'Google Sans'; font-weight: 700; padding: 80px 0; }
.sc-testimonials .text-wrap{ display: flex; justify-content: space-between; max-width: 1500px; margin: 0 auto; padding: 0 25px; }
.sc-testimonials .text-wrap .headline{ font-size: 36px; line-height: 44px; letter-spacing: -.25px; flex: 0 0 calc(50% - 95px); }
.sc-testimonials .text-wrap p{ font-size: 20px; line-height: 28px; flex: 0 0 calc(50% - 95px); font-weight: 400; }
.sc-testimonials .goodthing-slide{ position: relative; max-width: 1300px; margin: 100px auto 0; padding: 0 20px; }
.sc-testimonials .goodthing-slide .swiper-slide{width: 300px;}
.sc-testimonials .goodthing-slide .pagination{ position: absolute; top: auto; bottom: 0px; left: 50%; transform: translateX(-50%); background: rgb(232,234,237); width: 400px; height: 3px; z-index: 1; }
.sc-testimonials .goodthing-slide .swiper-pagination-progressbar-fill{ background: rgb(26,115,232); }
.sc-testimonials .goodthing-slide li{ height: 308px; border: 1px solid rgb(218,220,224); background-color: #fff; border-radius: 10px; padding: 24px; margin-bottom: 50px; }
.sc-testimonials .business-icon img{ width: 50px; height: 50px; }
.sc-testimonials .text{ padding-top: 24px; word-break: break-word; line-height: 24px; }
.sc-testimonials .text .title{ font-size: 20px; line-height: 28px; margin-bottom: 8px; }
.sc-testimonials .text .desc{ color: rgb(95,99,104); font-weight: 400; }
.sc-testimonials .text strong{ font-weight: bold; }


/* sc-contact */
.sc-contact{ position: sticky; top: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 80vh; background-color: #304c95; transition: .5s; }
.sc-contact .text-wrap{ display: flex; flex-direction: column; align-items: center; gap: 60px; text-align: center; color: #fff; font-weight: 500; font-size: 2.5vw; line-height: 1.3; }
.sc-contact .text-wrap .btn-select{ display: flex; align-items: center; cursor: pointer; font-size: 15px; border: 1px solid #fff; border-radius: 4px; padding: 0 24px; height: 48px; }