:root {
    --max-width: 1440px;
}
@media screen and (max-width: 1441px) {
    :root {
        --max-width: 100%;
    }
}

body {background: var(--black);color: var(--white);}
#wrap {padding:68px 0 0;}
.inner {max-width: var(--max-width);margin: 0 auto;padding:140px 0;}

.btn_wrap {display: flex;align-items: center;justify-content: center;gap:var(--card-gap);}
.title {display: flex;gap:var(--card-gap);justify-content: center;flex-direction: column;align-items: center;text-align: center;margin:0 0 60px;}
.title h3 {font-size: var(--heading-1);font-weight: 800;line-height: 130%;color: var(--white);letter-spacing: -0.9px;word-break: keep-all;text-transform: uppercase;}
.title h4 {font-size: var(--heading-4);font-weight: 800;color: var(--white);letter-spacing: -0.36px;word-break: keep-all;}

header {position: fixed;top:0;left:0;width: 100%;height: 96px;z-index: 100;}
header > div {display: flex;justify-content: space-between;align-items: center;}
header .inner {padding: 24px 0;} 
header nav a {display: flex;justify-content: space-between;width: 228px;background: #F40;border-radius: 200px;color: var(--black);padding: 12px 16px;align-items: center;font-weight: 600;font-size: var(--text-16);letter-spacing: -0.288px;}

footer {padding: 24px;color: var(--black);}
footer .copy {font-size: var(--text-14);text-transform: lowercase;text-align: center;}
@media (max-width:1440px) {
    footer .inner {padding: 0 40px;}
}

.mainvisual {height:100vh;overflow: hidden;}
.mainvisual .main_txt {position: relative;display: flex;flex-direction: column;gap:var(--card-gap);padding: 18vh 0 0;word-break: keep-all;max-width: var(--max-width);margin: 0 auto;text-transform: uppercase;z-index: 1;}
.mainvisual .main_txt h2 {font-size: var(--display-hero);font-weight: 700;line-height: 120%;letter-spacing: -1.12px;background: var(--gradient);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;white-space: normal;display: flex;flex-direction: column;min-height:192px;}
.mainvisual .main_txt h3 {font-size: var(--display-hero2);font-weight: 700;letter-spacing: -0.64px;color: var(--primary-900);word-break: keep-all;}
.mainvisual .main_txt h2 .typing_line {display:block; white-space:nowrap;}
.mainvisual .main_txt h2 .typing_line.active::after {content:""; display:inline-block; width:2px; height:.9em; margin-left:6px; background:currentColor; vertical-align:-.08em; animation:typingCursor .8s steps(1) infinite;}
@keyframes typingCursor {
    0%, 49% {opacity:1;}
    50%, 100% {opacity:0;}
}
.mainvisual .sub_txt {display: flex;flex-direction: column;gap:var(--card-gap);padding: 10vh 0;word-break: keep-all;}
.mainvisual .sub_txt h4 {font-size: var(--heading-4);font-weight: 700;color: var(--gray-200);word-break: keep-all;}
.mainvisual .sub_txt p {font-size: var(--text-18);font-weight: 500;color: var(--gray-500);line-height: 150%;word-break: keep-all;}
.mainvisual .hover_txt {position: absolute;right:0;top:0;height:calc( 100vh - 96px );overflow: hidden;}
.mainvisual .hover_txt p {position: relative; font-size: var(--text-20);color: var(--gray-800);word-break: keep-all;height:28px;transition: all 0.5s ease-in-out;width: 240px;;white-space: nowrap;cursor:default}
.mainvisual .hover_txt p span {position: absolute;left:0;top:0;transition: all 0.5s ease-in-out;display: block;}
.mainvisual .hover_txt p:hover span {left:40px;color: var(--primary);font-weight: 700;}
.mainvisual video {position: absolute; top:0;left:50%; width: 100%;height: 100%;object-fit: cover;z-index: 0;transform:translateX(-50%)}
@media (max-width:768px) {
    #main .title {margin:0 0 40px;}
    #main .mainvisual {padding: 0 var(--card-padding) var(--card-padding);}
    #main .mainvisual > div {height:88vh}
}

.section01 {position: relative;background: url('../video/sec01_poster.png') no-repeat center bottom/cover;}
/* .section01::before {content:"";position: absolute; bottom:0;left:0; width: 100%;height: 100%;object-fit: cover;z-index: 0;background: rgba(0,0,0,0.4);} */
.section01 video {position: absolute; bottom:0;left:50%; width: 100%;height: 100%;object-fit: cover;z-index: 0;transform:translateX(-50%)}
.section01 .inner {position: relative;z-index: 2;}
.section01 ul.about_list {display: flex;gap:var(--card-gap-sm)}
.section01 ul.about_list li span {border-radius: var(--rounded-sm);overflow: hidden;aspect-ratio: 714/510;display: block;}
.section01 ul.about_list li p {font-size: var(--heading-4);color: var(--gray-200);margin: var(--card-gap-lg) 0 8px;font-weight: 700;}
.section01 ul.about_list li h5 {font-size: var(--heading-2);color: var(--white);font-weight: 700;}

.section01 .shift_cont {display: flex;gap:var(--card-gap-lg);align-items: center;}
.section01 .shift_cont .shift_box {flex:3;}
.section01 .shift_cont .shift_box h5 {padding: 20px;text-align: center;font-size: var(--text-22);margin:0 0 12px;}
.section01 .shift_cont .shift_box ul {padding: 14px 20px;}
.section01 .shift_cont .shift_box ul li {display: flex;border-bottom: 1px solid #141414;padding: 16px 0;display: flex;justify-content: space-between;color: var(--gray-600);font-size: var(--text-22);font-weight: 600;letter-spacing: -0.396px;}
.section01 .shift_cont .shift_box ul li span {display: block;width: 30px;height: 30px;background: var(--gray-900);color: var(--gray-700);font-weight: 600; border-radius: 50%;font-size: var(--text-18);display: flex;align-items: center;justify-content: center;}
.section01 .shift_cont .shift_box.old > * {border-radius:var(--rounded-sm);border: 1px solid #1E1E1E;background: rgba(1, 1, 1, 0.70);backdrop-filter: blur(25px);}
.section01 .shift_cont .shift_box.old h5 {color: var(--gray-500);}
.section01 .shift_cont .shift_box.new > * {border-radius:var(--rounded-sm);background: var(--primary);}
.section01 .shift_cont .shift_box.new h5 {color: var(--black);}
.section01 .shift_cont .shift_box.new ul li {color: var(--black);}
.section01 .shift_cont .shift_box.new ul li span {background: var(--gray-900);color: var(--primary);}
.section01 .shift_cont .arrow {display: flex;margin-left:22px}
.section01 .shift_cont .arrow svg {margin-left: -22px;}

.section02 {background: url('../images/what.png') no-repeat center bottom/contain;}
.section02 .what_wrap {display: flex;justify-content: space-between;align-items: flex-end;position: relative;}
.section02 .what_wrap > div {display: flex;flex-direction: column;gap: var(--card-gap-xl);}
.section02 .what_box::before {content: "";display: block;position: absolute;top:50%;transform:translateY(-50%); width:135px; height:1px; background:repeating-linear-gradient(to right, #414141 0 2px, transparent 2px 4px);}
.section02 .what_box::after {content:""; display:block; position:absolute; top:50%; transform:translateY(-50%); width:26px; height:26px; border-radius:50%; background:radial-gradient(circle, #F9F8F7 0 2px, rgba(249,248,247,.2) 2px 13px, transparent 13px); animation:dotGlow 3s ease-in-out infinite;}
@keyframes dotGlow {
    0%, 100% {opacity:.7; transform:translateY(-50%) scale(1); filter:drop-shadow(0 0 0 rgba(249,248,247,0));}
    50% {opacity:1; transform:translateY(-50%) scale(1.08); filter:drop-shadow(0 0 10px rgba(249,248,247,.65));}
}
.section02 .what_box.line1::before {height:39px;width: 1px; right:90px;top:auto;transform:translateY(0); bottom:-39px; background:repeating-linear-gradient(to bottom, #414141 0 2px, transparent 2px 4px);}
.section02 .what_box.line2::before {right:-135px;width:135px;}
.section02 .what_box.line3::before {right:-105px;width:105px;}
.section02 .what_box.line4::before {right:-135px;width:135px;}
.section02 .what_box.line5::before {left:-135px;width:135px;}
.section02 .what_box.line6::before {left:-105px;width:105px;}
.section02 .what_box.line7::before {left:-135px;width:135px;}
.section02 .what_box.line1::after {right: 77px;bottom:-66px;top:auto;transform:translateY(0);}
.section02 .what_box.line2::after {right:-148px;}
.section02 .what_box.line3::after {right:-118px;}
.section02 .what_box.line4::after {right:-148px;}
.section02 .what_box.line5::after {left:-148px;}
.section02 .what_box.line6::after {left:-118px;}
.section02 .what_box.line7::after {left:-148px;}
.section02 .what_box {padding: 30px;border-radius: var(--rounded-sm);border: 1px solid #262626;background: rgba(0, 0, 0, 0.20);backdrop-filter: blur(7.5px);width: 500px;word-break: keep-all;min-height:170px;display: flex;flex-direction: column;justify-content: center;}
.section02 .what_box {transition:filter .4s ease, opacity .4s ease, transform .4s ease;}
.section02 .what_wrap:has(.what_box:hover) .what_box:not(:hover) {filter:blur(2px); opacity:.45;}
.section02 .what_wrap:has(.what_box:hover) .what_box:hover {filter:blur(0); opacity:1; transform:translateY(-6px);}
.section02 .what_box.lg {width: 810px;}
.section02 .what_box span {font-size: var(--text-18);color: var(--gray-400);font-weight: 800;letter-spacing: -0.324px;}
.section02 .what_box span.point {color: var(--primary);}
.section02 .what_box h5 {font-size: var(--heading-4);color: var(--white);font-weight: 800;letter-spacing: -0.36px;margin: 12px 0 8px;}
.section02 .what_box p {font-size: var(--text-18);color: var(--gray-300);font-weight: 400;letter-spacing: -0.324px;word-break: keep-all;}

.section03 ul {display: flex;gap: var(--card-gap-sm);}
.section03 ul li {height:400px;display: flex;flex-direction: column; align-items: center;justify-content: center;flex:1;text-align: center;border-radius:var(--rounded-sm);}
.section03 ul li:nth-child(1) {background: #292929;}
.section03 ul li:nth-child(2) {background: var(--primary);}
.section03 ul li:nth-child(3) {background: var(--gray-900);}
.section03 ul li:nth-child(4) {background: url('../images/sec03_01.png') no-repeat center center/cover;}
.section03 ul li h4 {font-size: var(--heading-4);color: var(--gray-50);font-weight: 700;letter-spacing: -0.36px;}
.section03 ul li h5 {font-size: var(--heading-3);color: var(--white);font-weight: 700;letter-spacing: 0.96px;margin: 4px 0 16px;}
.section03 ul li p {font-size: var(--text-18);color: var(--gray-50);font-weight: 500;letter-spacing: -0.324px;}

.section04 h5 {font-size: var(--heading-4);color: var(--gray-200);font-weight: 800;margin:0 0 30px;text-align: center;}
.section04 .partner ul {display: grid;grid-template-columns: repeat(4,1fr);gap: var(--card-gap-sm);}
.section04 .partner ul li {display: flex;align-items: center;justify-content: center;height:100px;border-radius: var(--rounded-sm);background: #101010;}

.section04 .client {padding: 60px 0 140px;}
.section04 .client .client_logo_wrap {display:flex;flex-direction:column;gap:16px;}
.section04 .client .logo_row {width:100%;overflow:hidden;}
.section04 .client .logo_track {display:flex;gap:12px;width:max-content;animation-duration:var(--duration, 60s);animation-timing-function:linear;animation-iteration-count:infinite;will-change:transform;}
.section04 .client .logo_row[data-direction="left"] .logo_track {animation-name:logoRollingLeft;}
.section04 .client .logo_row[data-direction="right"] .logo_track {animation-name:logoRollingRight;}
.section04 .client .logo_item {flex:0 0 auto;width:336px;height:100px;border-radius:8px;background:#111;display:flex;align-items:center;justify-content:center;}
.section04 .client .client_logo_wrap:hover .logo_track {animation-play-state:paused;}

@keyframes logoRollingLeft {
    from {transform:translateX(0);}
    to {transform:translateX(-50%);}
}

@keyframes logoRollingRight {
    from {transform:translateX(-50%);}
    to {transform:translateX(0);}
}

@media (max-width:768px) {
    .client_logo_sec {padding:80px 0;}
    .client_logo_wrap {gap:10px;}
    .logo_item {width:150px;height:56px;border-radius:6px;}
    .logo_item img {max-height:32px;}
}

.section05 {background: url('../images/footer.png') no-repeat center bottom/contain;}

.inquiry_form {max-width: 840px;margin: 0 auto;display: flex;flex-direction: column;gap:60px;}
.inquiry_form .input_flex {display: flex;gap:var(--card-gap-lg)}
.inquiry_form .input_flex > div {flex:1;}

.category_wrap {display: flex;flex-wrap: wrap;gap:8px;}
.category_wrap .category_check span {display: flex;align-items: center;justify-content: center;cursor: pointer;border-radius: var(--rounded-full);padding: 0 16px;height: 40px;color: var(--gray-600);font-size: var(--text-16);font-weight: 600; background: #212121;transition: all 0.3s ease;backdrop-filter: blur(10px);}
.category_wrap .category_check input {display: none;}
.category_wrap .category_check input:checked + span {background: var(--primary);color: var(--black);}
@media (max-width:768px) {
    #contact .category_wrap {flex-direction: column;}
    #contact .category_wrap .category_check span {height: 46px;}
}

input[type="text"], input[type="email"], input[type="tel"] {width: 100%;resize:none;outline:none;border:none; border-bottom: 1px solid var(--border-default);padding: 16px 12px;font-size: var(--text-15);line-height: 160%;background: none;color: var(--white);}
.inquiry_form textarea::placeholder {color: var(--gray-600);}
.inquiry_form .input_title {display: flex;gap:4px;margin:0 0 20px;}
.inquiry_form .input_title p {width: 30px;height: 30px;border-radius: var(--rounded-full);display: flex;align-items: center;justify-content: center;background: var(--gray-900);color: var(--primary);font-size: var(--text-18);}
.inquiry_form .input_title h5 {line-height: 30px;}

.custom_select {position:relative;width:100%;}
.custom_select_btn {display: flex; width: 100%;resize:none;outline:none;border:none; border-bottom: 1px solid var(--border-default);padding: 16px 12px;font-size: var(--text-15);line-height: 160%;background: none;color: var(--gray-600);}
.custom_select_btn::after {content:'';position:absolute;right:20px;top:50%;width:8px;height:8px;border-right:2px solid #999;border-bottom:2px solid #999;transform:translateY(-65%) rotate(45deg);transition:.3s;}
.custom_select.active .custom_select_btn::after {transform:translateY(-35%) rotate(225deg);}
.custom_select_btn.selected {color:var(--white);}
.custom_select_list {display:none;position:absolute;top:calc(100%);left:0;width:100%;margin:0;background:var(--gray-800);list-style:none;z-index:10;}
.custom_select.active .custom_select_list {display:block;}
.custom_select_list li {width:100%;}
.custom_select_list button {width:100%;padding:16px;border:0;background:transparent;font-size:var(--text-15);color: var(--gray-300);text-align:left;cursor:pointer;font-weight: 500;}
.custom_select_list button:hover {background:var(--primary);color: var(--gray-900);}

.agree_wrap {display:flex;justify-content:space-between;position:relative;align-items: center;border-bottom: 1px solid var(--border-default);padding:0 0 16px;}
.agree_check {position:relative;display:flex;align-items:center;gap:8px;cursor:pointer;}
.agree_check input {position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2;}
.agree_check .check_icon {display:block;flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:var(--gray-900) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M8.33335 2.5L3.75002 7.08333L1.66669 5' stroke='%23AAA' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 10px 10px;transition:all .2s ease;} 
.agree_check input:checked + .check_icon {background:var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M8.33335 2.5L3.75002 7.08333L1.66669 5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 10px 10px;}
.agree_check .agree_text {color:var(--white);font-size:var(--text-18);font-weight:700;line-height:1.4;}
.agree_wrap button {display: flex;gap:4px;align-items: center;}
.agree_txt {padding:16px 0;font-size: var(--text-14);color: var(--gray-100);line-height: 150%;;}

.inquiry_form .btn_wrap button {position: relative; width: 228px;margin: 0 auto;background: var(--black);padding: 16px;border-radius: 60px;color: var(--white);font-size: var(--button-lg);font-weight: 600;overflow: hidden;display: flex;justify-content: space-between;transition: all .3s ease;align-items: center;}
.inquiry_form .btn_wrap button:hover {background: var(--primary);}

.modal_wrap {position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9999; display:none; align-items:center; justify-content:center;}
.modal_wrap.active {display:flex;}
.modal_wrap .modal {position:relative; display:flex; flex-direction:column; max-width:720px; width:calc(100% - 40px); height:80vh; margin:0 auto; background:var(--white); border-radius:var(--rounded-sm); overflow:hidden;}
.modal_wrap .modal .modal_title {display:flex; flex:0 0 auto; padding:24px; justify-content:space-between; background:var(--primary-500);}
.modal_wrap .modal .modal_title h3 {color:var(--white); font-size:var(--heading-4); font-weight:600; line-height:150%; letter-spacing:-0.1px;}
.modal_wrap .modal .modal_cont {flex:1; min-height:0; padding:24px;}
.modal_wrap .modal .modal_inner {height:100%; padding:20px; background:var(--gray-50); border-radius:var(--rounded-sm); overflow-y:auto; box-sizing:border-box; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;}
body.modal_open {overflow:hidden;position: fixed;left:0;width: 100%;}

@media (max-width:768px) {
    #wrap {padding-top:72px;}
    header {height:72px;}
    header .inner {padding:16px 20px;}
    header .logo img {max-width:120px;}
    header nav a {width:auto;min-width:150px;padding:10px 14px;font-size:var(--text-14);}
    .inner {padding:80px 20px;}
    .title {margin-bottom:40px;}
    .title h3 {font-size:var(--heading-1);}
    .mainvisual {min-height:720px;}
    .mainvisual .main_txt {padding:10vh 20px 0;max-width:100%;}
    .mainvisual .main_txt h2 {min-height:130px;}
    .mainvisual .sub_txt {padding:6vh 0;}
    .mainvisual .hover_txt {display:none;}
    .section01 ul.about_list,
    .section01 .shift_cont,
    .section03 ul,
    .inquiry_form .input_flex {flex-direction:column;}
    .section01 .shift_cont .arrow {justify-content:center;margin:0;transform:rotate(90deg);}
    .section02 {background-size:1200px auto;background-position:center 45%;}
    .section02 .what_wrap {flex-direction:column;align-items:stretch;gap:var(--card-gap-xl);}
    .section02 .what_wrap > div {gap:var(--card-gap);}
    .section02 .what_box,
    .section02 .what_box.lg {width:100%;min-height:auto;padding:22px;}
    .section02 .what_box::before,
    .section02 .what_box::after {display:none;}
    .section03 ul li {height:auto;min-height:220px;padding:48px 20px;}
    .section04 .partner ul {grid-template-columns:repeat(2, 1fr);}
    .section04 .partner ul li {height:74px;}
    .section04 .client {padding:40px 0 80px;}
    .section04 .client .logo_item {width:180px;height:64px;}
    .section04 .client .logo_item img {max-width:80%;max-height:42px;}
    .inquiry_form {gap:40px;}
    .category_wrap {flex-direction:column;}
    .category_wrap .category_check span {justify-content:flex-start;min-height:44px;height:auto;text-align:left;}
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    .custom_select_btn,
    .custom_select_list button {font-size:16px;}
    .inquiry_form .btn_wrap button {width:100%;max-width:260px;}
}