@charset "utf-8";

.fullpage {transform:none !important; transition:none !important;}
.fp-section {position:absolute; top:0; left:0; width:100%; z-index:0; opacity:0; visibility:hidden; transition:all 0.7s ease-in-out; background:#fff; overflow:hidden;}
.fp-section.active {visibility:visible; opacity:1; z-index:1;}
.fp-scroller {transition-duration: 1s !important;}

.section {min-height:100vh;}

/* common */
.sub-title {margin-top:var(--header-height); padding:0 16px var(--space-50); text-align:center;}
.sub-title h2 {font-size:30px; line-height:1.3em; color:var(--color-primary);}
.sub-title .title {margin-top:var(--space-20); font-family:'Paperlogy', sans-serif; font-size:48px; line-height:1.3em; color:#222;}
.sub-title .text {margin-top:var(--space-20); font-size:24px; font-weight:500; line-height:1.3em; letter-spacing:-.02em; color:#252525;}

/* MAIN */
.main {position:relative; height:100dvh; overflow:hidden; background:#000; color:#fff;}
.main .swiper-slide {position:relative; height:100dvh; overflow:hidden; background:#000;}
.main .swiper-slide img,
.main .swiper-slide video {position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.main .swiper-slide video {opacity:0.7;}
.main .controls {position:absolute; top:21%; left:150px; z-index:50; opacity:0.48; display:flex; align-items:center; gap:4px;}
.main .controls .button {width:30px; height:30px; background:url('/images/main/slide-prev.svg') no-repeat 50% 50%/contain; cursor:pointer;}
.main .controls .button.next {background-image:url('/images/main/slide-next.svg');}
.main .controls .pager {display:flex; align-items:center; justify-content:center; gap:6px; width:auto; font-family:'Paperlogy', sans-serif; font-size:24px; font-weight:500; line-height:1em; text-align:center;}
.main .controls .pager span {width:1em;}
.main .caption {position:absolute; top:28%; left:150px; z-index:50; font-family:"S-CoreDream",sans-serif;}
.main .caption .large-text {display:flex; flex-direction:column; gap:34px; font-size:90px; font-weight:700; line-height:1.1em;}
.main .caption .typing {display:flex; align-items:center; gap:10px;}
.main .caption .typing:before {content:''; width:30px; height:108px; border:10px solid #fff; border-right:0;}
.main .caption .typing:after {content:''; width:30px; height:108px; border:10px solid #fff; border-left:0;}
.main .caption .typing .typing-text {width:5em; text-align:center;}
.main .caption .typing .typing-text .ani {display:inline-block;}
.main .caption .typing .typing-text .ani:after {content:''; display:inline-block; width:1px; height:.8em; background:#fff; animation:blink-caret .75s step-end infinite; margin-left:5px;}
.main .caption .vline {width:1px; height:10vh; margin:28px 0 28px 30px; background:rgba(255, 255, 255, 0.48);}
.main .caption .small-text {font-size:36px; font-weight:600; line-height:1.3em;}
.main .progress {position:absolute; bottom:0; left:0; width:100%; height:15px; z-index:50;}
.main .progress-bar {position:absolute; top:0; left:0; width:0%; height:100%; background:var(--color-primary); z-index:50;}

@keyframes blink-caret {
    from, to { opacity: 1 }
    50% { opacity: 0 }
}

/* PARTNER */
#section2 {position:relative;}
#section2 .sub-title {position:absolute; top:4%; left:0; width:100%; z-index:5;}

.partner-wrap {position:relative; width:100%; height:100dvh; overflow:hidden;}

.partners {position:absolute; bottom:0; left:0; width:100%; height:auto; opacity:0; transition:2s; -webkit-transform:translateY(100%); transform:translateY(100%);}
.partners.active {opacity:1; -webkit-transform:translateY(0); transform:translateY(0);}
.partners .swiper {height:auto; overflow:visible;}
.partners .swiper-wrapper {}
.partners .swiper-slide {height:auto !important;}

.partner {position:relative;}
.partner .title {position:relative; z-index:2; display:flex; align-items:flex-end; height:14vh; padding:var(--space-15) var(--space-50) ; opacity:0; -webkit-transform:translateY(100%); transform:translateY(100%); transition:2s;}
.partner .title h2 {-webkit-text-stroke-width:2px; -webkit-text-stroke-color:#fff; font-family: "S-Core Dream",sans-serif; font-size:64px; font-weight:800; line-height:1em; color:transparent; letter-spacing:-.04em; transition:2s;}
.partner .content {position:relative; overflow:hidden;}
.partner .content .imgs {display:flex;}
.partner .content .imgs .img {position:relative; width:100%; height:60vh; background:#aaa; overflow:hidden;}
.partner .content .imgs .img img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:2s; -webkit-transform:scale(1.2); transform:scale(1.2);}
.partner .content .caption {position:absolute; bottom:0; left:0; width:100%; padding:var(--space-50); color:#fff; transition:2s; opacity:0; -webkit-transform:translateX(30px); transform:translateX(30px);}
.partner .content .caption .text-1 {display:inline-block; padding:8px 30px; border-radius:40px; background:var(--color-primary); font-size:15px; font-weight:700; line-height:1.5em;}
.partner .content .caption .text-2 {margin-top:var(--space-20); font-size:40px; font-weight:600; line-height:1.125em;}
.partner.st2 {text-align:right;}
.partner.st2 .title {justify-content:flex-end;}
.partner.st2 .content .caption {-webkit-transform:translateX(-30px); transform:translateX(-30px);}

.partners .n1 .partner .content .imgs .img img {opacity:0;}
.partners .n1.active .partner .content .imgs .img img {opacity:1;}

.partners .active .partner .title {-webkit-transform:translateY(0); transform:translateY(0); opacity:1;}
.partners .active .partner .title h2 {-webkit-text-stroke-color:#222; transition-delay:.2s;}
.partners .active .partner .content .caption {-webkit-transform:translateX(0); transform:translateX(0); opacity:1;}

.partners .show .content .imgs .img img {opacity:1 !important; -webkit-transform:scale(1); transform:scale(1);}

/* ONE-ID */
.oneid-cover {position:absolute; top:0; left:0; width:100%; height:100dvh; z-index:10; overflow:hidden; pointer-events:none; transition:1s;}
.oneid-cover .circle {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%) scale(0); width:100vw; aspect-ratio:1/1; background:var(--color-primary); border-radius:100%;}
.oneid-cover .text {position:absolute; top:50%; left:0; width:100%; transform:translateY(-50%); text-align:center; font-size:48px; font-weight:700; line-height:1.125em; font-family:'Paperlogy', sans-serif; color:#fff;}
.oneid-cover .text div:last-child {margin-top:var(--space-30);}

.oneid-wrap {width:100%; height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center;}

.oneid-items-wrap {padding:0 var(--space-container); width:100%;}
.oneid-items {display:flex;}
.oneid-item {display:flex; flex-direction:column; justify-content:space-between; width:100%; height:auto; gap:var(--space-24); background:#F5F5F5; border-radius:var(--radius-16); padding:var(--space-40) var(--space-30);}
.oneid-item .text-area {display:flex; flex-direction:column; gap:15px;}
.oneid-item .text-area h3 {font-size:28px; line-height:1.3em; color:#222;}
.oneid-item .text-area p {font-size:18px; font-weight:600; line-height:1.5em; color:#717171;}
.oneid-item .cont-1 {display:grid; grid-template-columns:repeat(2, 1fr); gap:10px;}
.oneid-item .cont-1 .img {position:relative; border-radius:8px; overflow:hidden;}
.oneid-item .cont-1 .img:after {content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0, 0, 0, 0.00) 70%, #000 100%);}
.oneid-item .cont-1 .img img {width:100%;}
.oneid-item .cont-1 .img video {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:right center;}
.oneid-item .cont-1 .img img {width:100%;}
.oneid-item .cont-1 .img span {position:absolute; bottom:0; left:0; z-index:2; width:100%; padding:6px 16px; color:#fff; font-size:14px; font-weight:600; line-height:1.3em;}
.oneid-item .cont-1 .img.n1 {grid-column: 1 / -1;}
.oneid-item .cont-1 .img.n2 {grid-row: 2 / 4;}

.oneid-item .cont-2 {display:grid; grid-template-columns:repeat(2, 1fr); gap:14px 10px; text-align:center;}
.oneid-item .cont-2 .img {display:flex; flex-direction:column; align-items: center; gap:10px 0;}
.oneid-item .cont-2 .img img {display:block; border-radius:8px;}
.oneid-item .cont-2 .img span {width:80%; background:#0E86FF; color:#fff; font-size:14px; font-weight:700; line-height:1.4em; padding:6px 16px; border-radius:40px;}

/* PRODUCT */
.product-tabs {display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-25); margin-top:var(--space-30); text-align:center;}
.product-tabs li a {display:block; padding:var(--space-10) var(--space-30); border-radius:40px; font-size:24px; font-weight:700; line-height:1.2em; color:var(--color-primary);}
.product-tabs li.active a {background:var(--color-primary); color:#fff;}

.product-wrap {display:flex; padding-right:var(--space-container); min-height:515px;}
.product-wrap .image {position:relative; width:46%; padding:0 var(--space-container); display:flex; flex-direction:column; justify-content:flex-end; align-items:center;}
.product-wrap .image:before {content:''; position:absolute; bottom:0; left:0; width:100%; height:86px; background: linear-gradient(0deg, #FFF 0%, #EAEAEA 100%);}
.product-wrap .image .inner {position:relative; z-index:2;}
.product-wrap .items {display:grid; width:54%; padding:var(--space-30); gap:10px; border-radius:var(--radius-32); background:#F5F5F5;}
.product-wrap .item {display:flex; padding:var(--space-30); border-radius:var(--radius-24); background:#fff;}
.product-wrap .item .txt {display:flex; flex-direction:column; gap:7px; margin-top:-.4em; margin-bottom:-.4em;}
.product-wrap .item .txt h3 {font-size:26px; line-height:1.3em; color:#222;}
.product-wrap .item .txt p {font-size:18px; font-weight:400; line-height:1.5em; letter-spacing:-.025em; color:#848E97;}

#p1 .product-wrap .items {grid-template-columns:repeat(2, 1fr);}
#p1 .product-wrap .item {justify-content:space-between; gap:var(--space-10); min-height:222px;}
#p1 .product-wrap .item .txt {flex:1;}
#p1 .product-wrap .item .img {width:30%; max-width:160px; display:flex; flex-direction:column; justify-content:flex-end;}
#p1 .product-wrap .item.st2 {flex-direction:column;}
#p1 .product-wrap .item.st2 .img {width:100%; max-width:100%; align-items:flex-end;}
#p1 .product-wrap .item.st2 .img img {width:50%; max-width:188px;}

#p2 .product-wrap .image .inner {margin-bottom:6%; width:80%; max-width:680px; mix-blend-mode:multiply;}
#p2 .product-wrap .image video {width:100%;}
#p2 .product-wrap .item  {gap:var(--space-60); padding:0 var(--space-60); min-height:145px;}
#p2 .product-wrap .item .txt {flex:1; padding:var(--space-30) 0;}
#p2 .product-wrap .item .img {width:160px; display:flex; flex-direction:column; justify-content:flex-end;}
#p2 .product-wrap .item.st2 .img {order:-1;}

#p3 .product-wrap .image {padding:0;}
#p3 .product-wrap .image:before {display:none;}
#p3 .product-wrap .image img {width:100%;}
#p3 .product-wrap .items {grid-template-columns:repeat(4, 1fr);}
#p3 .product-wrap .item {flex-direction:column; align-items:center; justify-content:space-between; gap:var(--space-30); padding:var(--space-30);}
#p3 .product-wrap .item .txt {align-items:center; text-align:center;}

#p4 .product-wrap .image .inner {margin-bottom:8%; width:80%; max-width:490px;}
#p4 .product-wrap .image .imgs {display:flex; align-items:flex-end; justify-content:center;}
#p4 .product-wrap .image .imgs img {width:100%;}
#p4 .product-wrap .image .imgs .img1 {position:relative; z-index:2; width:72%; max-width:350px;}
#p4 .product-wrap .image .imgs .img1:after {content:''; position:absolute; top:19%; left:9.2%; z-index:3; width:8.5%; height:6.8%; background:linear-gradient(175deg, #757586 10.7%, #5C5C70 174.23%);}
#p4 .product-wrap .image .imgs .img2 {position:relative; z-index:1; width:36%; max-width:170px; margin-left:-6%;}
#p4 .product-wrap .items {grid-template-columns:repeat(2, 1fr);}
#p4 .product-wrap .item {justify-content:space-between; gap:var(--space-20);}
#p4 .product-wrap .item:nth-child(1) {grid-row: 1 / 3;}
#p4 .product-wrap .item .txt {flex:1;}
#p4 .product-wrap .item .img {width:30%; max-width:145px; display:flex; flex-direction:column; justify-content:flex-end; align-items:center;}


/* INTERVIEW */
#section5.fp-section {background:transparent;}

.interview-wrap {position:relative; width:100%; height:100dvh; overflow:hidden; display:flex; align-items:center; justify-content:center; gap:var(--space-30); padding:0 var(--space-container); color:#fff; text-align:center;}
.interview-wrap .background {position:absolute; inset:0; z-index:1; background:#000 url('/images/sub/interview-bg.png') no-repeat 50% 50%/contain;}
.interview-wrap .cover {position:absolute; inset:0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.70) 100%); z-index:2; pointer-events:none;}
.interview-wrap .row {position:relative; z-index:3; display:flex; gap:var(--space-40); max-width:1426px;}
.interview-wrap .col {display:flex; flex-direction:column; gap:var(--space-40);}
.interview-wrap .col.n1 {justify-content:center; padding-top:6.5%;}
.interview-wrap .col.n4 {justify-content:flex-end;}
.interview-wrap .col.n5 {justify-content:center; padding-top:3%;}
.interview-wrap .img-item {position:relative; font-size:16px; font-weight:600; line-height:1.875em; letter-spacing:-.025em;}
.interview-wrap .img-item:after {content:''; position:absolute; inset:0; z-index:1; background:rgba(0, 0, 0, 0.5); border-radius:var(--radius-16);}
.interview-wrap .img-item img {display:block; width:100%; border-radius:var(--radius-16);}
.interview-wrap .img-item span {position:absolute; top:50%; left:-5%; right:-5%; z-index:10;  webkit-transform:translate(0, -50%); transform:translate(0, -50%);}
.interview-wrap .center {position:absolute; top:50%; left:0; width:100%; z-index:5; padding:var(--space-30); display:flex; flex-direction:column; align-items:center; gap:var(--space-30); -webkit-transform:translateY(-50%); transform:translateY(-50%); font-family:'Paperlogy', sans-serif; font-size:55px; font-weight:700; line-height:1.36em; text-align:center;}
.interview-wrap .center img {display:block; height:49px;}

/* CONTACT US */
.contact-wrap {height:100dvh; padding:calc(var(--header-height) + var(--space-50)) var(--space-container) var(--space-50); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;}
.contact-wrap .icon {width:254px; margin-bottom:50px;}
.contact-wrap .text-1 {margin-bottom:15px; font-family:'Paperlogy', sans-serif; font-size:30px; font-weight:600; line-height:1.5em; color:#222;}
.contact-wrap .text-2 {margin-bottom:70px; font-family:'Paperlogy', sans-serif; font-size:72px; font-weight:700; line-height:1.3em;}
.contact-wrap .text-2 span {display:inline-block; background:linear-gradient(93deg, #534DFF 0.34%, #00D0FF 101.66%); background-clip:text; -webkit-background-clip: text; -webkit-text-fill-color:transparent;}
.contact-wrap .btn {display:inline-block; padding:18px 48px; border-radius:50px; font-size:24px; font-weight:600; line-height:1.2em; color:#fff; background: linear-gradient(95deg, #3480FF 25.79%, #05C9FF 99.83%);}

/* popup */
.modal .btn {display:flex; justify-content:center; align-items:center; width:100%; height:60px; background:var(--color-primary); border:0; border-radius:5px; color:#fff; font-size:20px; font-weight:700; line-height:1.3em;}
.pop-close {position:absolute; top:30px; right:30px; z-index:10; width:40px; height:40px; background:url('/images/sub/close.svg') no-repeat 50% 50%/contain; cursor:pointer;}

.pop-cs {padding:40px 80px 50px;}

.pop-cs-title {margin-bottom:20px; text-align:center;}
.pop-cs-title .icon {margin-bottom:10px;}
.pop-cs-title h2 {font-family:'Paperlogy', sans-serif; font-size:23px; line-height:1.4em; color:#222;}
.pop-cs-title h2 em {font-style:normal; color:var(--color-primary);}

.pop-cs-form {color:#484848;}
.pop-cs-form .required {color:var(--color-primary);}
.pop-cs-form .form-group {margin-bottom:15px;}
.pop-cs-form .form-group .title {display:block; margin-bottom:8px; font-size:18px; font-weight:600; line-height:1.3em;}
.pop-cs-form .form-group .title small {font-size:14px; font-weight:500; line-height:1.3em;}
.pop-cs-form .form-group .input {display:block; width:100%; height:55px; padding:10px 14px; background:#f5f5f5; border:1px solid #ddd; border-radius:5px; font-size:18px; line-height:1.3em; outline:none; transition:.2s;}
.pop-cs-form .form-group .input:focus {border-color:var(--color-primary);}
.pop-cs-form .form-group .check-list {display:grid; grid-template-columns:repeat(3, auto); justify-content:space-between; gap:15px 10px; margin-top:18px; font-size:15px; line-height:1.3em; letter-spacing:-.03em;}
.pop-cs-form .form-group .check-list .checkbox.wide {grid-column:span 2;}
.pop-cs-form .form-group .check-list .checkbox label {display:flex; align-items:flex-start;}
.pop-cs-form .form-group .check-list .checkbox label:before {margin-top:-.1em !important; min-width:20px;}
.pop-cs-form .form-agree {margin-top:30px; border-radius:5px; background:#F5F5F5; padding:13px; font-size:15px; line-height:1.3em; text-align:center;}
.pop-cs-form .form-agree .link {font-weight: 700;}
.pop-cs-form .form-agree .checkbox label:before {margin-top:-.1em !important;}
.pop-cs-form .form-submit {margin-top:9px;}

.pop-privacy {position:absolute; top:0; left:0; width:100%; height:100%; background:#fff; border-radius:30px;}
.pop-privacy .inner-wrap {position:relative; width:100%; height:100%; padding:80px 80px 50px; display:flex; flex-direction:column; gap:27px;}
.pop-privacy .title {text-align:center;}
.pop-privacy .title h2 {font-family:'Paperlogy', sans-serif; font-size:23px; line-height:1.5em; color:#222;}
.pop-privacy .content {flex:1 1 auto; min-height:0; height:1%; line-height:1.875em; color:#484848;}

.pop-complete {display:flex; flex-direction:column; gap:30px; padding:47px 25px 25px;}
.pop-complete .text {text-align:center; font-family:'Paperlogy', sans-serif; font-size:23px; font-weight:700; line-height:1.5em; color:#222;}