@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */

/* Product */
.background-video video {position:fixed; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:-1;}

.product-visual {position:relative; height:100dvh; background:#fff; overflow:hidden;}
.product-visual .inner {position:relative; width:430px; aspect-ratio:1/1; margin:0 auto;}
.product-visual .circle {position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); width:100%; height:100%; border-radius:100%; border:2px dotted #c9caca;}
.product-visual .circle .dot {position:absolute; width:16px; height:16px; background:#b5b5b6; border-radius:100%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); transition:all 0.3s ease;}
.product-visual .circle .dot.active {background:var(--color-primary);}
.product-visual .circle .dot.n1 {top:20%; left:10%;}
.product-visual .circle .dot.n2 {top:20%; right:6%;}
.product-visual .circle .dot.n3 {bottom:0%;left:50%; -webkit-transform:translate(-50%, 50%); transform:translate(-50%, 50%);}
.product-visual .item {position:absolute; width:265px; z-index:2;}
.product-visual .item h2 {margin-bottom:var(--space-20); font-size:var(--font-size-40); font-weight:800; line-height:1.3em; letter-spacing:-.03em; color:#878787; transition:all 0.3s ease;}
.product-visual .item p {font-size:var(--font-size-23); line-height:1.5em; letter-spacing:-.03em; color:#cccccc; transition:all 0.3s ease;}
.product-visual .item.active h2 {color:var(--color-primary);}
.product-visual .item.active p {color:#121212;}
.product-visual .item.n1 {right:100%; bottom:80%;}
.product-visual .item.n2 {left:101%; bottom:80%;}
.product-visual .item.n3 {left:50%; top:100%; margin-top:var(--space-30); text-align:center; -webkit-transform:translate(-50%, 0); transform:translate(-50%, 0);}

.product-lineup .inner {position:relative; height:100%; margin:var(--space-100) var(--space-container) 0;}
.product-lineup .back-logo {position:absolute; top:50%; left:0; width:100%; -webkit-transform:translate(0, -50%); transform:translate(0, -50%);}
.product-lineup .back-logo svg {display:block; width:100%;}
.product-lineup .item {position:absolute; width:13%; max-width:189px; z-index:2;}
.product-lineup .item img {display:block; width:100%;}
.product-lineup .item.n1 {left:18%; top:40%;}
.product-lineup .item.n1 img { -webkit-transform:rotate(-12deg) translate(-50%, -50%); transform:rotate(-12deg) translate(-50%, -50%);}
.product-lineup .item.n2 {left:30%; top:64%;}
.product-lineup .item.n2 img { -webkit-transform:rotate(8.6deg) translate(-50%, -50%); transform:rotate(8.6deg) translate(-50%, -50%);}
.product-lineup .item.n3 {left:52%; top:40%;}
.product-lineup .item.n3 img { -webkit-transform:rotate(-11.2deg) translate(-50%, -50%); transform:rotate(-11.2deg) translate(-50%, -50%);}
.product-lineup .item.n4 {left:70%; top:60%;}
.product-lineup .item.n4 img { -webkit-transform:rotate(-10deg) translate(-50%, -50%); transform:rotate(-10deg) translate(-50%, -50%);}
.product-lineup .item.n5 {left:81%; top:43%;}
.product-lineup .item.n5 img { -webkit-transform:rotate(10deg) translate(-50%, -50%); transform:rotate(10deg) translate(-50%, -50%);}

.product-info .wrap {display:flex; align-items:center; justify-content:space-between; gap:var(--space-60); padding-top:var(--space-100);}
.product-info .wrap.reverse {flex-direction:row-reverse;}
.product-info .img-area {width:40%; text-align:center;}
.product-info .cnt-area {width:50%;}
.product-info .cnt-area .logo-img {margin-bottom:var(--space-70);}
.product-info .cnt-area .info-table {margin:0 auto; width:90%; max-width:630px;}
.product-info .cnt-area .info-table table {width:100%; border-collapse:collapse; border-spacing:0px; font-size:var(--font-size-25); line-height:1.3em; letter-spacing:-.03em;}
.product-info .cnt-area .info-table table th {width:165px; border-top:2px solid #ddd; padding:15px 5px; text-align:center; font-weight:500; color:#878787;}
.product-info .cnt-area .info-table table th .space {display:inline-block; width:1.6em;}
.product-info .cnt-area .info-table table td {border-top:2px solid #ddd; padding:15px 5px; text-align:left; font-weight:500;}
.product-info .cnt-area .info-table table td small {color:#878787; font-size:var(--font-size-18); line-height:inherit; letter-spacing:-.03em;}

/* Technology */
.technology-pdlla {position:relative;}
.technology-pdlla:before {content:""; position:absolute; top:-70%; left:-18%; z-index:-1; width:78.65vw; aspect-ratio:1/1;border:1px solid #dcdddd; border-radius:100%; opacity:.6;}
.technology-pdlla:after {content:""; position:absolute; top:15%; left:30%; z-index:-1; width:78.65vw; aspect-ratio:1/1;border:1px solid #dcdddd; border-radius:100%; opacity:.6;}
.technology-pdlla .wrap {position:relative; z-index:2; display:flex; align-items:flex-end; justify-content:space-between; padding-top:var(--space-80);}
.technology-pdlla .img-area {width:50%; display:flex; flex-direction: column; gap:var(--space-30);}
.technology-pdlla .img-area img { border-radius:clamp(32px, calc(86 / var(--inner) * 100vw), 86px); box-shadow: 0px 0px 9.1px 3.9px rgba(5, 0, 1, 0.15);}
.technology-pdlla .img-area .img.n1 {text-align:right;}
.technology-pdlla .img-area .img.n1 img {width:70%; max-width:543px;}
.technology-pdlla .img-area .img.n2 img {width:66%; max-width:514px;}
.technology-pdlla .cnt-area {width:45%; max-width:582px;}
.technology-pdlla .cnt-area h2 {margin-bottom:var(--space-20); font-size:clamp(42px, calc(78 / var(--inner) * 100vw), 78px); font-weight:800; line-height:1.2em; letter-spacing:-.03em; color:#505050;}
.technology-pdlla .cnt-area p {font-size:var(--font-size-25); line-height:1.5em; letter-spacing:-.03em; color:#878787;}

.technology-certificate  {position:relative;}
.technology-certificate:before {content:""; position:absolute; top:18%; left:8%; z-index:-1; width:78.65vw; aspect-ratio:1/1;border:1px solid #dcdddd; border-radius:100%; opacity:.6;}
.technology-certificate .wrap {position:relative; z-index:2; display:flex; align-items:flex-end; justify-content:space-between; padding-top:var(--space-100);}
.technology-certificate .img-area {width:59%; display:flex;  gap:var(--space-50);}
.technology-certificate .img-area img {display:block; width:100%; box-shadow: 0px 0px 9.1px 3.9px rgba(5, 0, 1, 0.15);}
.technology-certificate .cnt-area {width:45%; max-width:410px;}
.technology-certificate .cnt-area h2 {margin-bottom:var(--space-20); font-size:clamp(42px, calc(78 / var(--inner) * 100vw), 78px); font-weight:800; line-height:1.2em; letter-spacing:-.03em; color:#505050;}
.technology-certificate .cnt-area p {font-size:var(--font-size-25); line-height:1.5em; letter-spacing:-.03em; color:#878787;}

@media (max-width: 1920px) {
    .technology-pdlla .img-area .img.n1 img {max-width:500px;}
    .technology-pdlla .img-area .img.n2 img {max-width:480px;}
}

/* FAQ */
.faq-wrap {display:flex; align-items:center; min-height:100dvh; padding:143px 0 90px; text-align:center;}
.faq-wrap .inner {width:100%;}
.faq-wrap h2 {margin-bottom:var(--space-80);}
.faq-wrap dl {max-width:600px; margin:0 auto;}
.faq-wrap dl:not(:last-child) {margin-bottom:var(--space-50);}
.faq-wrap dt {padding-bottom:10px; margin-bottom:10px; border-bottom:2px solid #e6e6e6; color:#505050; font-size:var(--font-size-28); font-weight:700; line-height:1.3em; letter-spacing:-.03em;}
.faq-wrap dd {color:#878787; font-size:var(--font-size-20); font-weight: 300; line-height:1.33em; letter-spacing:-.03em;}

/* PR/Media */
.board-wrap {min-height:100dvh; padding:160px 0 150px;}
.board-wrap .board-inner {width:100%;}


/* Event */
.event {font-family: 'Paperlogy', 'Pretendard', sans-serif;}
.event img, .event video {-webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden;}
.event .color {color: #6bc1ae;}
.event .sec1 {padding: var(--space-200) 0 0 0;background: url('/images/sub/event-bg1.png') repeat-x center top / cover; position: relative; display: flex; align-items: flex-start; height:100%;}
.event .sec1 .tit {text-align: center;}
.event .sec1 .tit h3 {
    color: var(--color-primary);
    font-size: var(--font-size-70);
    font-weight: 700;
    line-height: 1.3em;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-10);
}
.event.en .sec1 .tit h3 {
    font-size: var(--font-size-40);
}
.event .sec1 .tit p {
    color: #2a2a2a;
    font-size: var(--font-size-30);
    font-weight: 400;
    line-height: 1.35em;
    letter-spacing: -0.02em;
}
.event.en .sec1 .tit p {
    font-size: var(--font-size-20);
}
@keyframes event-scroll {
	0% {margin-bottom: 20px; opacity: 1;}
	100% {margin-bottom: 15px; opacity: 1;}
}

/* .event .sec2 {padding: var(--space-100) 0;} */
.event .sec2 {
    overflow: hidden; 
    position: relative; 
    padding-top: var(--space-100);
}
.event.en .sec2 {
    padding-top: var(--space-140);
}
.event .sec2 .contain,
.event .sec2 .fp-scroller {
    height: 100%;
}
.event .sec2 .tit {text-align: center;}
.event .sec2 .tit h3 {color: var(--color-primary); font-size: var(--font-size-50); font-weight: 600; line-height: 1.2em; letter-spacing: -0.02em; margin-bottom: var(--space-20);}
.event.en .sec2 .tit h3 {
    font-size: var(--font-size-35);
}
.event .sec2 .tit p {color: #2a2a2a; font-size: var(--font-size-20); font-weight: 400; line-height: 1.35em; letter-spacing: -0.02em;}
.event.en .sec2 .tit p {font-size: var(--font-size-18)}
.event .sec2 .img {
    position: relative;
    max-width: 700px;
    width: 100%;
    margin: var(--space-30) auto 0 auto;
}
.event .sec2 .img img {
    width: 100%;
} 
.event .sec2 .txt {
    margin-top: var(--space-30);
    text-align: center;
    color: #2a2a2a;
    font-size: var(--font-size-12);
    font-weight: 500; 
    line-height: 1.3em; 
    letter-spacing: -0.02em
}

.event .sec3 {
    background-color: var(--color-primary); padding-top: var(--space-120);
}
.event .sec3 .tit {text-align: center;}
.event .sec3 .tit h3 {color: #ffffff; font-size: var(--font-size-50); font-weight: 600; line-height: 1.3em; letter-spacing: -0.02em; margin-bottom: var(--space-30);}
.event.en .sec3 .tit h3 {
    font-size: var(--font-size-35);
}
.event .sec3 .youtube {
    overflow: hidden;
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-15);
    background: #717171;
}
.event .sec3 .youtube-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    color: #ffffff;
    font-size: var(--font-size-30);
    font-weight: 600;
}
.event .sec3 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.event .sec3 .step-list ol {
    display: flex;
    justify-content: center;
    align-items: center;
}
.step-section {
    position: relative;
    max-width: 1130px;
    margin: var(--space-40) auto 0 auto;
}
.step-line {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 855px;
    height: 2px;
    background: #d9d9d9;
    z-index: 0;
}
.step-list {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
    list-style: none;
}
.step-item {
    width: 25%;
    text-align: center;
    color: #fff;
}
.step-item .dot {
    width: 12px;
    height: 12px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #fff;
}
.step-item .step-num {
    margin-bottom: var(--space-10);
    color: #b9dbff;
    font-size: var(--font-size-25);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}
.step-item .step-txt {
    color: #ffffff;
    font-size: var(--font-size-20);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.02em;
    word-break: break-all;
}
.event.en .sec3 .step-item .step-txt {
    font-size: var(--font-size-18);
}

.step-item .step-txt sup {
    font-size: 10px;
    vertical-align: super;
}

@media (max-width: 991px) {
    .stepList {
        gap: 20px;
    }

    .step-item .step-num {
        font-size: 18px;
    }

    .step-item .step-txt {
        font-size: 14px;
    }
}

@media (max-width: 767px) {
    .stepSection {
        padding-top: 20px;
    }

    .stepLine {
        display: none;
    }

    .stepList {
        flex-direction: column;
        gap: 25px;
    }

    .step-item {
        width: 100%;
    }

    .step-item .dot {
        margin-bottom: 12px;
    }
}
.event .sec4 {
    background-color: #ffffff;
}
.event .sec4 .certified-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-100);
    gap: 0 var(--space-100);
}
.event .sec4 .contain {
    max-width: 1470px;
    padding: 0;
}
.event .sec4 .right-cont {
    width: 38%;
    max-width: 550px;
}
.event .sec4 .row1 {
    margin-bottom: var(--space-50);
}
.event .sec4 .row .label {
    display: inline-block;
    height: 32px;
    line-height: 32px;
    padding: 0 var(--space-15);
    background-color: var(--color-primary);
    border-radius: 15px;
}
.event .sec4 .row .label span {
    color: #ffffff;
    font-size: var(--font-size-20);
    font-weight: 600;
    letter-spacing: -0.02em;
}
.event .sec4 .row strong {
    display: block;
    margin-top: var(--space-15);
    margin-bottom: var(--space-10);
    color: #2a2a2a;
    font-size: var(--font-size-30);
    font-weight: 500;
    letter-spacing: -0.02em;
}
.event .sec4 .row p {
    color: #2a2a2a;
    font-size: var(--font-size-20);
    font-weight: 400;
    letter-spacing: -0.02em;
}
.event.en .sec4 .row p {
    font-size: var(--font-size-18);
}
.event .sec4 .btn-area {
    margin-top: var(--space-80);
}
.event .sec4 .btn-area input {
    width: 100%;
    height: clamp(70px, calc(90 / var(--inner) * 100vw), 90px);
    margin-bottom: var(--space-30);
    border: 3px solid #e6e6e6;
    border-radius: 45px;
    font-size: var(--font-size-25);
    font-weight: 500;
    line-height: 1.5em;
    letter-spacing: -0.02em;
    text-align: center;
}
.event.en .sec4 .btn-area input {
    font-size: var(--font-size-25);
}
.event .sec4 .btn-area input::placeholder {
    color: #979797;
    font-size: var(--font-size-25);
    font-weight: 500;
    line-height: 1.5em;
    letter-spacing: -0.02em;
}
.event.en .sec4 .btn-area input::placeholder {
    font-size: var(--font-size-20);
}
.event .sec4 .btn-area button {
    width: 100%;
    height: clamp(70px, calc(90 / var(--inner) * 100vw), 90px);
    background-color: var(--color-primary);
    border: 0;
    border-radius: 45px;
    color: #ffffff;
    font-size: var(--font-size-25);
    font-weight: 500;
    line-height: 1.5em;
    letter-spacing: -0.02em;
    text-align: center;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;;
}
.event.en .sec4 .btn-area button {
    font-size: var(--font-size-25);
}
.event .sec4 .btn-area button:hover {
    background: transparent;
    border: 3px solid var(--color-primary);
    color: var(--color-primary);
}

.event .sec5 {
    background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(230, 230, 230, 1) 100%);padding-top: var(--space-100);
}
.event .sec5 .tit {text-align: center;}
.event .sec5 .tit h3 {color: #2a2a2a; font-size: var(--font-size-35); font-weight: 600; line-height: 1.5em; letter-spacing: -0.02em; margin-bottom: var(--space-50);}
.event .sec5 .tit h3 strong {
    font-size: var(--font-size-55);
}
.event .sec5 .benefit-area {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1300px;
    gap: 0 var(--space-15);
    margin: 0 auto;
}
.event .sec5 .benefit-area .left-cont,
.event .sec5 .benefit-area .right-cont {
    width: calc(50% - (var(--space-15) / 2));
}
.event .sec5 .benefit-area .txt-area {
    position: relative;
    padding: var(--space-40) var(--space-20) var(--space-20) var(--space-20);
    background-color: #ffffff;
    border: 1px solid #cfcfcf;
    border-radius: var(--radius-32);
    text-align: center;
    min-height: 240px;
}
.event .sec5 .benefit-area .txt-area .label {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    height: 45px;
    line-height: 45px;
    padding: 0 var(--space-20);
    background-color: var(--color-primary);
    border-radius: 27px;
}
.event .sec5 .benefit-area .txt-area .label span {
    color: #ffffff;
    font-size: var(--font-size-25);
    font-weight: 500;
    letter-spacing: -0.02em;
}
.event .sec5 .benefit-area .txt-area h4 {
    color: var(--color-primary); font-size: var(--font-size-30); font-weight: 700; line-height: 1.3em; letter-spacing: -0.02em; margin-bottom: var(--space-20);
}
.event .sec5 .benefit-area .txt-area p {
    color: #000000; font-size: var(--font-size-20); font-weight: 400; line-height: 1.3em; letter-spacing: -0.02em; margin-bottom: var(--space-20);
}
.event .sec5 .benefit-area .txt-area .cof {
    display: block; color: #8e8e8e; font-size: var(--font-size-15); font-weight: 500; line-height: 1.1em; letter-spacing: -0.02em; 
}
.event .sec5 .benefit-area .img-area {
    overflow: hidden;
    position: relative;
    width: 100%;
    aspect-ratio: 640/355;
    background-color: var(--color-primary);
    border-radius: var(--radius-32);
}
.event .sec5 .benefit-area .img-area img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 0;
}

.event .sec6 {
    padding: var(--space-100) 0;
    background-color: #e6e6e6;
}
.event .notice {color: #717171; font-size: var(--font-size-20); line-height: 1.5em; letter-spacing: -0.02em; font-family: 'Pretendard', sans-serif;}
.event .notice .subtit {font-weight: 600;}
.event .notice-list {font-weight: 300; margin-bottom: var(--space-30);}
.policy h3 {
    margin: var(--space-20) 0 var(--space-10);
    color: #2a2a2a;
    font-size: var(--font-size-16);
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.02em;
}
.policy h3:first-of-type {
    margin-top: 0;
}
.policy2 h3:first-of-type {
    margin-top: var(--space-20);
}
.policy p,
.policy li {
    font-size: var(--font-size-16);
    font-weight: 400;
    line-height: normal;
}
.policy .ol2 {
    padding-left: var(--space-20);
}