@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,500;0,900;1,400&display=swap');

@keyframes stroke-offset{
    0% { stroke:#d81b0d; stroke-width: 3px; stroke-dashoffset: 326px; } 
    70% { fill: transparent; } 
    98% { stroke:#d81b0d; stroke-width: 2px; } 
    100% { fill: #d81b0d; stroke-dashoffset: 0px; }
}

/* common */
.landing-pc__wrap {width: 100%;}
.landing-pc__wrap .inner {width: 1200px; margin: 0 auto;}
.landing-pc__wrap section .flex-wrap {display: flex; align-items: center;}
.landing-pc__wrap section .flex-wrap .left-wrap {width: 50%; margin-right: auto;}
.landing-pc__wrap section .flex-wrap .right-wrap {width: 50%; margin-left: auto;}
.landing-pc__wrap section .h2 {width: 100%; font-size: 38px; font-weight: 300; line-height: 50px; letter-spacing: -5%;}
.landing-pc__wrap section .h2 strong {font-size: 38px; line-height: 50px; letter-spacing: -5%;}
.landing-pc__wrap section .h2 span {display: block; margin-bottom: 20px; font-family: 'Roboto', sans-serif; font-size: 24px; font-weight: 400;}
.landing-pc__wrap section .title-sub {margin-top: 50px; color: #555; font-size: 18px; line-height: 30px; letter-spacing: 5%;}
.landing-pc__wrap section .contents-bottom__desc {margin-top: 0px; color: #999; font-size: 12px; line-height: 22px; letter-spacing: -5%;}

/* 최상단 */
.landing-pc__wrap .first-section {height: 800px; text-align: center; background-color: #f3f3f3;}
.landing-pc__wrap .first-section .inner {height: 800px; padding:100px 0; background-image: url(https://image.serybox.com/common/brand/pc_s1_bg.png); background-position: 100% 100%; background-size: 100% auto; background-repeat: no-repeat;}
.landing-pc__wrap .first-section .logo {width: 200px; margin: auto;}
.landing-pc__wrap .first-section .animation-text__top span, .first-section .animation-text__top strong {display: block; font-size: 36px; line-height: 1.3em;}
.landing-pc__wrap .first-section .animation-text__top {margin: 30px 0 40px;  font-size: 36px; letter-spacing: -5%;}
.landing-pc__wrap .first-section .animation-text__bottom span, .landing-pc__wrap .first-section .animation-text__bottom strong {font-size: 18px; letter-spacing: -5%;}
.landing-pc__wrap .first-section .animation-text .animation-delay__01, .landing-pc__wrap .first-section .animation-text .animation-delay__02,
.landing-pc__wrap .first-section .animation-text .animation-delay__03, .landing-pc__wrap .first-section .animation-text .animation-delay__04 {opacity: 0; transform: translateY(30px); -webkit-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); -moz-transform: translateY(30px);}
.landing-pc__wrap .first-section .animation-text.active .animation-delay__01, .landing-pc__wrap .first-section .animation-text.active .animation-delay__02,
.landing-pc__wrap .first-section .animation-text.active .animation-delay__03, .landing-pc__wrap .first-section .animation-text.active .animation-delay__04 {opacity: 1; transform: translateY(0); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); -moz-transform: translateY(0);}
.landing-pc__wrap .first-section .animation-text.active .animation-delay__01 {transition: .3s 0s;}
.landing-pc__wrap .first-section .animation-text.active .animation-delay__02 {transition: .3s .2s;}
.landing-pc__wrap .first-section .animation-text.active .animation-delay__03 {transition: .3s .4s;}
.landing-pc__wrap .first-section .animation-text.active .animation-delay__04 {transition: .3s .6s;}

/* 세리박스 시작해보세요  */
.landing-pc__wrap .start-section {height: 800px; text-align: center; background-color: #f0f0f0;}
.landing-pc__wrap .start-section .inner {width: 1000px; height: 800px; padding: 100px 0 0; background-image: url(https://image.serybox.com/common/brand/pc_s2_bg.png); background-position: 100% 50%; background-repeat: no-repeat;}
.landing-pc__wrap .start-section .animation-text span {display: block; line-height: 1.3em;}
.landing-pc__wrap .start-section .animation-text .animation-text__top span {color: #555; font-size: 18px; letter-spacing: -5%;}
.landing-pc__wrap .start-section .animation-text .animation-text__center {margin: 40px 0 500px;}
.landing-pc__wrap .start-section .animation-text .animation-text__center strong {color: #000; font-size: 36px; letter-spacing: -5%;}
.landing-pc__wrap .start-section .animation-text .animation-text__bottom {padding-bottom: 50px;}
.landing-pc__wrap .start-section .animation-text .animation-text__bottom span {color: #999; font-size: 18px; letter-spacing: -5%;}
.landing-pc__wrap .start-section .animation-text .animation-delay__01, .landing-pc__wrap .start-section .animation-text .animation-delay__02,
.landing-pc__wrap .start-section .animation-text .animation-delay__03, .landing-pc__wrap .start-section .animation-text .animation-delay__04 {opacity: 0; transform: translateY(30px); -webkit-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); -moz-transform: translateY(30px);}
.landing-pc__wrap .start-section .animation-text.active .animation-delay__01, .landing-pc__wrap .start-section .animation-text.active .animation-delay__02,
.landing-pc__wrap .start-section .animation-text.active .animation-delay__03, .landing-pc__wrap .start-section .animation-text.active .animation-delay__04 {opacity: 1; transform: translateY(0); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); -moz-transform: translateY(0);}
.landing-pc__wrap .start-section .animation-text.active .animation-delay__01 {transition: .3s 0s;}
.landing-pc__wrap .start-section .animation-text.active .animation-delay__02 {transition: .3s .2s;}
.landing-pc__wrap .start-section .animation-text.active .animation-delay__03 {transition: .3s .4s;}
.landing-pc__wrap .start-section .animation-text.active .animation-delay__04 {transition: .3s .6s;}

/* 넘버1 브랜드 */
.landing-pc__wrap .no1-section .inner {height: 800px; padding: 287px 0;}
.landing-pc__wrap .no1-section .no1-section__number {overflow: hidden; display: flex; height: 255px; align-items: flex-end; justify-content: center;}
.landing-pc__wrap .no1-section .no1-section__number ul li {height: 255px; color: #d81b0d; font-family: 'Roboto', sans-serif; font-weight: 800; font-size:300px; text-align: right; letter-spacing: -3px; line-height: 1;}
.landing-pc__wrap .no1-section .no1-section__number strong {color: #d81b0d; font-family: 'Roboto', sans-serif; font-size: 80px; font-weight: 800;}
.landing-pc__wrap .no1-section .animation-contents .animation-delay__01 {opacity: 0; transform: translateY(30px); -webkit-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); -moz-transform: translateY(30px);}
.landing-pc__wrap .no1-section .animation-contents.active .animation-delay__01 {opacity: 1; transition: .3s .0s; transform: translateY(0); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); -moz-transform: translateY(0);}
.landing-pc__wrap .no1-section .animation-contents .animation-delay__02 {transform: translateY(2040px); -webkit-transform: translateY(2040px); -ms-transform: translateY(2040px); -o-transform: translateY(2040px); -moz-transform: translateY(2040px);}
.landing-pc__wrap .no1-section .animation-contents.active .animation-delay__02 {transition: 1s .3s;transform: translateY(0); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); -moz-transform: translateY(0);}
.landing-pc__wrap .no1-section .animation-contents .animation-delay__03 {opacity: 0; transform: translateY(30px); -webkit-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); -moz-transform: translateY(30px);}
.landing-pc__wrap .no1-section .animation-contents.active .animation-delay__03 {opacity: 1; transition: .4s .6s; transform: translateY(0); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); -moz-transform: translateY(0);}

/* best diet */
.landing-pc__wrap .bestdiet-section {background-color: #f3f3f3;}
.landing-pc__wrap .bestdiet-section .inner {height: 800px; padding: 287px 0;}
.landing-pc__wrap .bestdiet-section .bestdiet-section__number {color: #d81b0d; font-weight: 500;}
.landing-pc__wrap .bestdiet-section .bestdiet-section__number strong {font-family: 'Roboto', sans-serif; font-weight: 800; font-size: 300px; letter-spacing: -3px;}
.landing-pc__wrap .bestdiet-section .bestdiet-section__number span {font-size: 80px; letter-spacing: -3px;}

.landing-pc__wrap .bestdiet-section svg {display: block;width: 550px;height: 320px;font-family: 'Roboto', sans-serif;font-size: 300px;font-weight: 800;}
.landing-pc__wrap .bestdiet-section svg text {width: 100%;height: 100%;}
.landing-pc__wrap .bestdiet-section .text-copy {fill: #d81b0d;stroke: #fff;stroke-dasharray: 326px;stroke-width: 3px;stroke-dashoffset: 0%;animation: stroke-offset 3s infinite linear;animation-delay: -1;}
.landing-pc__wrap .bestdiet-section .pos_wrap {position: relative; width: 550px; margin: 0 auto;}
.landing-pc__wrap .bestdiet-section .pos_wrap span {position: absolute; bottom: 30px;}
.landing-pc__wrap .bestdiet-section .pos_wrap .span_1 {left: 190px;}
.landing-pc__wrap .bestdiet-section .pos_wrap .span_2 {right: 50px;}

/* Million Seller */
.landing-pc__wrap .millionseller-section .inner {height: 800px; padding: 230px 0 206px;}
.landing-pc__wrap .millionseller-section__graph {display: flex; width: 475px; justify-content: space-between;}
.landing-pc__wrap .millionseller-section__graph li {position: relative; width: 70px; height: 320px;}
.landing-pc__wrap .millionseller-section__graph li .graph_rod {display: block; position: absolute; left: 0; bottom: 0; width: 70px; height: 10%; background-color: #d4d4d4;  border-radius: 35px 35px 0 0;}
.landing-pc__wrap .millionseller-section__graph li:nth-child(4) .graph_rod {background-color: #d81b0d;}
.landing-pc__wrap .millionseller-section__graph.active li:nth-child(1) .graph_rod {height: 20%; transition: .7s .1s;}
.landing-pc__wrap .millionseller-section__graph.active li:nth-child(2) .graph_rod {height: 40%; transition: .7s .1s;}
.landing-pc__wrap .millionseller-section__graph.active li:nth-child(3) .graph_rod {height: 80%; transition: .7s .1s;}
.landing-pc__wrap .millionseller-section__graph.active li:nth-child(4) .graph_rod {height: 100%; transition: .7s .1s;}
.landing-pc__wrap .millionseller-section__graph .count-text {position: absolute; right: -20px; top:250px; width: 110px; color: #d81b0d; font-size: 30px; text-align: center;}
.landing-pc__wrap .millionseller-section__graph.active .count-text {top:-50px; transition: .7s .1s;}
.landing-pc__wrap .millionseller-section__graph .fireworks {position: absolute;}
.landing-pc__wrap .millionseller-section__graph .fireworks.fire_1 {top: -120px;}
.landing-pc__wrap .millionseller-section__graph .fireworks.fire_2 {top:-33px; left:90px;}
.landing-pc__wrap .millionseller-section__graph .fireworks.fire_3 {top:-95px; left:-113px;}
.landing-pc__wrap .millionseller-section__graph .fireworks.fire_4 {top:-97px; left:60px;}
.landing-pc__wrap .millionseller-section__graph .fireworks.fire_1 .drop {color: slateblue;}
.landing-pc__wrap .millionseller-section__graph .fireworks.fire_2 .drop {color: palevioletred;}
.landing-pc__wrap .millionseller-section__graph .fireworks.fire_3 .drop {color: steelblue;}
.landing-pc__wrap .millionseller-section__graph .fireworks.fire_4 .drop {color: orange;}

/* diet solution */
.landing-pc__wrap .dietsolution-section {background-color: #f3f3f3; background-image: url(https://image.serybox.com/common/brand/pc_s6_bg.png); background-position: 100% 100%; background-repeat: no-repeat;}
.landing-pc__wrap .dietsolution-section .h2 {position: relative;}
.landing-pc__wrap .dietsolution-section .h2:after {position: absolute; left: 0; bottom: -20px; width: 370px; height: 1px; background-color: #000; content: '';}
.landing-pc__wrap .dietsolution-section .inner {height: 800px; padding: 240px 0;}

/* Global Collaboration */
.landing-pc__wrap .global-section .inner {height: 800px; padding: 40px 0;}
.landing-pc__wrap .global-section .animation-contents .animation-delay__01 {opacity: 0; transform: translateY(30px); -webkit-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); -moz-transform: translateY(30px);}
.landing-pc__wrap .global-section .animation-contents.active .animation-delay__01 {opacity: 1; transition: .3s .1s; transform: translateY(0); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); -moz-transform: translateY(0);}
.landing-pc__wrap .global-section .video-wrap video {width: 100%;}

/* SERYBOX’s Ingredients */
.landing-pc__wrap .ingredients-section {background-color: #ebebeb;  background-color: #EBEBEB; background-image: url(https://image.serybox.com/common/brand/pc_s8_bg.png); background-position: 100% 0; background-repeat: no-repeat;}
.landing-pc__wrap .ingredients-section .inner {height: 800px; padding: 245px 0;}
.landing-pc__wrap .ingredients-section .animation-contents .animation-delay__01 {opacity: 0; transform: translateY(30px); -webkit-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); -moz-transform: translateY(30px);}
.landing-pc__wrap .ingredients-section .animation-contents.active .animation-delay__01 {opacity: 1; transition: .3s .1s; transform: translateY(0); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); -moz-transform: translateY(0);}

/* BEST & NEW */
.landing-pc__wrap .new-section {background-color: #f3f3f3;}
.landing-pc__wrap .new-section .inner {width: 1050px;}
.landing-pc__wrap .new-section .flex-wrap {flex-wrap: wrap;}
.landing-pc__wrap .new-section .flex-wrap .left-wrap, .new-section .flex-wrap .right-wrap {width: 497px;}
.landing-pc__wrap .new-section .h2 {width: 100%; text-align: center; margin: 100px auto 40px;}
.landing-pc__wrap .new-section h3 {position: relative; font-family: 'Roboto', sans-serif; font-size: 22px; font-weight: 300; text-align: center;}
.landing-pc__wrap .new-section h3::before, .new-section h3::after {position: absolute; top: 50%; width: 165px; height: 1px; background-color: #000; content: '';}
.landing-pc__wrap .new-section h3::before {position: absolute; left: 0;}
.landing-pc__wrap .new-section h3::after {position: absolute; right: 0;}


.landing-pc__wrap .new-section ul {display: flex; justify-content: space-between; align-items: flex-end; margin-top: 82px;}
.landing-pc__wrap .new-section ul li {position: relative; height: 250px;}
.landing-pc__wrap .new-section ul li:after {position: absolute;top: -35px; right: 0; width: 110px; height: 110px; background-size: cover; content: '';}
.landing-pc__wrap .new-section ul li .product {position: absolute; bottom: 0; left: 0;}

.landing-pc__wrap .new-section .best-list ul li:nth-child(1) {width: 163px;}
.landing-pc__wrap .new-section .best-list ul li:nth-child(2) {width: 161px;}
.landing-pc__wrap .new-section .best-list ul li:nth-child(3) {width: 173px;}
.landing-pc__wrap .new-section .best-list ul li:nth-child(1) .product {width: 116px;}
.landing-pc__wrap .new-section .best-list ul li:nth-child(2) .product {width: 117px;}
.landing-pc__wrap .new-section .best-list ul li:nth-child(3) .product {width: 125px;}
.landing-pc__wrap .new-section .best-list ul li:nth-child(1):after {background-image: url(https://image.serybox.com/common/brand/best_01_1.png);}
.landing-pc__wrap .new-section .best-list ul li:nth-child(2):after {background-image: url(https://image.serybox.com/common/brand/best_02_1.png);}
.landing-pc__wrap .new-section .best-list ul li:nth-child(3):after {background-image: url(https://image.serybox.com/common/brand/best_03_1.png);}

.landing-pc__wrap .new-section .new-list ul li:nth-child(1) {width: 197px;}
.landing-pc__wrap .new-section .new-list ul li:nth-child(2) {width: 147px;}
.landing-pc__wrap .new-section .new-list ul li:nth-child(3) {width: 170px;}
.landing-pc__wrap .new-section .new-list ul li:nth-child(1) .product {width: 160px;}
.landing-pc__wrap .new-section .new-list ul li:nth-child(2) .product {width: 92px;}
.landing-pc__wrap .new-section .new-list ul li:nth-child(3) .product {width: 145px;}
.landing-pc__wrap .new-section .new-list ul li:nth-child(1):after {background-image: url(https://image.serybox.com/common/brand/new_01_1.png);}
.landing-pc__wrap .new-section .new-list ul li:nth-child(2):after {background-image: url(https://image.serybox.com/common/brand/new_02_1.png);}
.landing-pc__wrap .new-section .new-list ul li:nth-child(3):after {background-image: url(https://image.serybox.com/common/brand/new_03_1.png);}

.landing-pc__wrap .new-section ul li p {margin-top: 15px; font-size: 16px; text-align: center; letter-spacing: -1.4px;}
.landing-pc__wrap .new-section .contents-bottom__desc {width: 100%; text-align: center; padding: 50px 0 50px;}


.landing-pc__wrap .new-section .best-list ,
.landing-pc__wrap .new-section .new-list  {opacity: 0; transform: translateY(30px); -webkit-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); -moz-transform: translateY(30px);}
.landing-pc__wrap .new-section .best-list.active {opacity: 1; transition: .3s .1s; transform: translateY(0); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); -moz-transform: translateY(0);}
.landing-pc__wrap .new-section .new-list.active  {opacity: 1; transition: .3s .4s; transform: translateY(0); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); -moz-transform: translateY(0);}

.l2:after { left: 85px; }

/* Worldwide */
.landing-pc__wrap .world-section.first .inner {height: 800px; padding: 40px 0;}
.landing-pc__wrap .world-section.first .video-wrap video {width: 100%;}
.landing-pc__wrap .world-section.last {background-color: #EDEAE7;}
.landing-pc__wrap .world-section.last .inner {padding: 120px 0 438px; background-image: url(https://image.serybox.com/common/brand/pc_s10_bg.png); background-position: 50% 110%; background-size: 620px auto; background-repeat: no-repeat;}
.landing-pc__wrap .world-section.last .h2 {width: 100%; text-align: center;}
.landing-pc__wrap .world-section.last .title-sub {text-align: center;}
.landing-pc__wrap .world-section.last .title-sub em {font-size: 18px; font-weight: 800; text-decoration:underline; font-style: normal;}

/* Let’s together! */
.landing-pc__wrap .together-section {background-color: #f3f3f3;}
.landing-pc__wrap .together-section .inner {width: 1002px; padding: 110px 0 134px;}
.landing-pc__wrap .together-section .h2 {width: 100%; margin-bottom: 95px; text-align: center;}
.landing-pc__wrap .together-section .flex-wrap {flex-wrap: wrap;}
.landing-pc__wrap .together-section .flex-wrap .left-wrap, .together-section .flex-wrap .right-wrap {width: 48%;}
.landing-pc__wrap .together-section .video-wrap {position: relative;}
.landing-pc__wrap .together-section .video-wrap video {width: 481px; height: 270px;}
.landing-pc__wrap .together-section .video-wrap .btn-wrap {display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.landing-pc__wrap .together-section .video-wrap .btn-wrap button {width: 80px; height: 80px; background-color: rgba(255,255,255,0);}
.landing-pc__wrap .together-section h4 {margin-top: 20px; font-size: 18px; font-weight: 300;}

/* bottom benefits button */
.landing-pc__wrap .bottom-fixde_btn__benefits {position: fixed; left: 50%; bottom: 50px; width: 380px; height: 75px; padding-right:25px; margin-left: 300px; color: #fff; font-size: 22px; font-weight: 600; background-color: #000; background-image: url(https://image.serybox.com/common/brand/m_btn_arrow.png); background-position: 85% 50%; background-size: 12px auto; background-repeat: no-repeat; border-radius: 27.78vw; box-shadow: 0.00vw 1.11vw 2.22vw 0.00vw rgba(0, 0, 0, 0.4); z-index: 1000;}
.landing-pc__wrap .bottom-fixde_btn__benefits {opacity: 0; transform: translateY(50px); -webkit-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); -moz-transform: translateY(50px);}
.landing-pc__wrap .bottom-fixde_btn__benefits.active {opacity: 1; transition: .3s .6s; transform: translateY(0); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); -moz-transform: translateY(0);}
.landing-pc__wrap .bottom-fixde_btn__benefits.on {bottom: 800px;}

/* footer */
.landing-pc__wrap .landing_footer {background-color: #E7E7E7;}
.landing-pc__wrap .landing_footer .inner {display: flex; padding: 95px 0; align-items: center;}
.landing-pc__wrap .landing_footer img {width: 190px; margin-right: 30px;}
.landing-pc__wrap .landing_footer p {color: #999; font-size: 18px; line-height: 30px; letter-spacing: -5%;}