@charset "UTF-8";

:root {
    --color-bg:#02010D;
    --color-txt:#ffffff;
    --color-sub:#C7C7D7; 

    --border:1px solid #373641;

    --ease-in-out-cubic:cubic-bezier(.645,.045,.355,1); 

}


/* ====================================
    공통
==================================== */
body {font-size:16px; line-height:1.5; color:var(--color-txt); font-family: "Pretendard", sans-serif; word-break:break-word; background:url('../img/bg.png') repeat center center; }
#wrap {background:url('../img/bg.png') repeat center center; }

img {display:block; }

/* scrollbar */
::-webkit-scrollbar {width:7px; }
::-webkit-scrollbar-thumb {border:1px solid var(--color-bg); background:var(--color-sub); border-radius:4px; }
::-webkit-scrollbar-thumb:hover {background:var(--color-txt); }
::-webkit-scrollbar-track {background:var(--color-bg); }

.italiana {font-family: "Italiana", sans-serif; }

.grid_inner {display:grid; grid-template-columns:repeat(12,1fr); gap:22px; padding:0 40px; }

@media all and (min-width:768px){
    .grid_s_1 {grid-column-start:1; }
    .grid_s_2 {grid-column-start:2; }
    .grid_s_3 {grid-column-start:3; }
    .grid_s_4 {grid-column-start:4; }
    .grid_s_5 {grid-column-start:5; }
    .grid_s_6 {grid-column-start:6; }
    .grid_s_7 {grid-column-start:7; }
    .grid_s_8 {grid-column-start:8; }
    .grid_s_9 {grid-column-start:9; }
    .grid_s_10 {grid-column-start:10; }
    .grid_s_11 {grid-column-start:11; }
    .grid_s_12 {grid-column-start:12; }
    
    .grid_e_1 {grid-column-end:1; }
    .grid_e_2 {grid-column-end:2; }
    .grid_e_3 {grid-column-end:3; }
    .grid_e_4 {grid-column-end:4; }
    .grid_e_5 {grid-column-end:5; }
    .grid_e_6 {grid-column-end:6; }
    .grid_e_7 {grid-column-end:7; }
    .grid_e_8 {grid-column-end:8; }
    .grid_e_9 {grid-column-end:9; }
    .grid_e_10 {grid-column-end:10; }
    .grid_e_11 {grid-column-end:11; }
    .grid_e_12 {grid-column-end:12; }
}

@media all and (max-width:767px){
    .grid_inner {display:block; padding:0 20px; }
}


/* ====================================
    header
==================================== */
header {z-index:200; position:fixed; top:0; left:0; width:100%; }
header::before {content:''; position:absolute; inset:0; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 30%,rgba(0,0,0,0) 100%); mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 30%,rgba(0,0,0,0) 100%); }
header h1 {z-index:2; position:relative; padding:28px 0; }
header h1 img {margin:0 auto; }
header .lang_link {z-index:3; position:absolute; top:24px; right:40px; display:flex; align-items:center; justify-content:center; min-width:44px; height:34px; padding:0 14px; border:1px solid rgba(255,255,255,0.45); border-radius:50px; background:rgba(2,1,13,0.35); color:#fff; font-size:13px; font-weight:600; letter-spacing:0; transition:all var(--ease-in-out-cubic) 0.35s; }
header .lang_link:hover {border-color:#fff; background:rgba(255,255,255,0.14); }

@media all and (max-width:767px){
    header h1 {padding:21px 0; }
    header h1 img {height:18px; }
    header .lang_link {top:15px; right:20px; min-width:40px; height:30px; padding:0 11px; font-size:12px; }
}

#gnb_bg {z-index:-1; visibility:hidden; opacity:0; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(22, 27, 29, 0.30); transition:all var(--ease-in-out-cubic) 0.5s;}
#gnb_bg.show {z-index:100; visibility:visible; opacity:1; }
.gnb_box {z-index:101; position:fixed; left:50%; bottom:67px; transform:translateX(-50%); }
.gnb_box .gnb_quick {position:relative; overflow:hidden; width:272px; height:60px; background-color:var(--color-txt); border-radius:30px; transition:all var(--ease-in-out-cubic) 0.5s; transition-delay:0.2s; }
.gnb_box .gnb_quick .open,
.gnb_box .gnb_quick .close {position:absolute; left:0; top:0; width:100%; height:100%; transition:all var(--ease-in-out-cubic) 0.5s; transition-delay:0.2s; }
.gnb_box .gnb_quick .open {z-index:1; display:flex; align-items:center; justify-content:center; }
.gnb_box .gnb_quick .close {z-index:2; top:100%; transition:all var(--ease-in-out-cubic) 0.5s; transition-delay:0.2s; }
.gnb_box .gnb_quick .open > * {opacity:1; position:relative; height:100%; transition:all var(--ease-in-out-cubic) 0.5s; transition-delay:0.2s; }
.gnb_box .gnb_quick .open a,
.gnb_box .gnb_quick .open .menu_btn {flex-shrink:0; display:flex; align-items:center; justify-content:center; width:60px; }
.gnb_box .gnb_quick .open .title {position:relative; top:0; width:100%; color:var(--color-bg); white-space:nowrap; transition-delay:0.3s; }
.gnb_box .gnb_quick .close button {display:flex; align-items:center; justify-content:center; width:100%; height:100%; }

.gnb_box .gnb_quick.fold {width:60px; }
.gnb_box .gnb_quick.fold .open > * {transition:all cubic-bezier(.77,0,.175,1) 0.5s; }
.gnb_box .gnb_quick.fold .open a,
.gnb_box .gnb_quick.fold .open .menu_btn {opacity:0; }
.gnb_box .gnb_quick.fold .open .title {top:-100%; transition-delay:0s; }
.gnb_box .gnb_quick.fold .close {top:0; }

.gnb_box .gnb {position:absolute; left:50%; bottom:calc(100% + 20px); overflow-x:hidden; overflow-y:auto; width:430px; max-width:90dvw; max-height:70dvh; padding:60px; background:rgba(2, 1, 13, 0.90); backdrop-filter:blur(2px); transform:translateX(-50%) scale(0); transform-origin:bottom; transition:all cubic-bezier(.77,0,.175,1) 0.5s; transition-delay:0.3s;}
.gnb_box .gnb.open {transform:translateX(-50%) scale(1); transition-delay:0s;}
.gnb_box .gnb .gnb_area {opacity:0; display:flex; flex-direction:column; gap:40px; transform:translateX(-50%); transition:all cubic-bezier(.77,0,.175,1) 0.5s; transition-delay:0s; }
.gnb_box .gnb.open .gnb_area {opacity:1; transform:translateX(0); transition-delay:0.3s;}
.gnb_box .gnb h2 {font-size:15px; font-weight:300; color:rgba(255, 255, 255, 0.80); }
.gnb_box .gnb ul li a {display:block; font-size:36px; font-weight:500; color:#fff; line-height:1; }
.gnb_box .gnb ul li + li {margin-top:20px; }
.gnb_box .gnb .link {display:flex; align-items:center; justify-content:center; gap:4px; height:52px; border:1px solid var(--color-sub); font-size:20px; border-radius:50px; } 
.gnb_box .gnb p {font-size:20px; color:rgba(255, 255, 255, 0.80); text-align:center; }

@media all and (max-width:767px){
    .gnb_box {bottom:30px; }
    .gnb_box .gnb_quick {width:222px; height:50px; }
    .gnb_box .gnb_quick.fold {width:50px; }

    .gnb_box .gnb {padding:40px; }
    .gnb_box .gnb .gnb_area {gap:30px; }
    .gnb_box .gnb ul li a {font-size:32px; }
    .gnb_box .gnb .link {font-size:16px; }
    .gnb_box .gnb .link img {width:16px; }
    .gnb_box .gnb p {font-size:18px; }
}


/* ====================================
    footer
==================================== */
#topBtn {z-index:300; position:fixed; right:75px; bottom:-100px; display:flex; align-items:center; justify-content:center; width:60px; height:60px; cursor:pointer; background-color:rgba(2, 1, 13, 0.90); border-radius:50%; transition:all var(--ease-in-out-cubic) 0.5s; }
#topBtn.on {bottom:15px; }
#topBtn img {max-width:50%; }

@media all and (max-width:767px){
    #topBtn {right:15px; width:40px; height:40px; }
}

footer {padding:120px 0 60px; border-top:var(--border); background:url('../img/bg.png') repeat center center; }
footer .logo img {height:20px; }
footer .fnb {display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
footer .fnb a {display:block; font-size:22px; }
footer .fnb a + a {margin-top:22px; }
footer .fnb a img {display:inline-block; margin-left:4px; margin-bottom:-2px; }
footer .address dl + dl {margin-top:22px; }
footer .address dl dt {font-size:16px; }
footer .address dl dd {margin-top:10px; font-size:16px; line-height:1.2; color:var(--color-sub); }
footer .address dl dd b {font-size:22px; font-weight:700; color:var(--color-txt); }
footer .copy {margin-top:120px; font-size:16px; color:var(--color-sub); text-align:center; }

@media all and (max-width:1024px){
    footer .fnb {grid-template-columns:repeat(1,1fr); }
}
@media all and (max-width:767px){
    footer {padding:80px 0 100px; }
    footer .fnb {margin-top:50px; }
    footer .address {margin-top:60px; }
    footer .copy {margin-top:60px; }
}


/* ====================================
    common
==================================== */
.sub_visual {overflow:hidden; position:relative; display:flex; align-items:flex-end; width:100%; height:clamp(240px,40vw,480px); }
.sub_visual:before {content:''; z-index:2; position:absolute; left:0; top:0; width:100%; height:100%; background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%); }
.sub_visual video {z-index:1; position:absolute; left:0; bottom:0; width:100%; height:200%; object-fit:cover; }
.sub_visual div {width:100%; }
.sub_visual .title {z-index:10; position:relative; }
.sub_visual .title h3 {font-size:clamp(70px,10vw,120px); font-weight:400; letter-spacing:2.4px; }

.sub_visual.contact video {height:140%; }


.sub_tit {display:flex; align-items:flex-start; gap:8px; }
.sub_tit img {padding-top:5px; }
.sub_tit p {font-size:clamp(16px,2vw,20px); color:#fff; letter-spacing:0.4px; word-break:break-word; }

.prod_layout {display:grid; grid-template-columns:repeat(3,1fr); gap:50px; }
.prod_layout li .img_box img {opacity:1; aspect-ratio: 758 / 937; object-fit:cover; transition:all var(--ease-in-out-cubic) 0.5s; }
.prod_layout li:hover img {opacity:0.8; }
.prod_layout li.is-disabled {cursor:default; }
.prod_layout li.is-disabled:hover img {opacity:1; }
.prod_layout li .tit {margin-top:24px; font-size:clamp(20px,1.2vw,24px); letter-spacing:0.48px; }
.prod_layout li .desc {margin-top:24px; font-size:clamp(15px,1.2vw,16px); color:var(--color-sub); letter-spacing:0.32px; }

@media all and (max-width:767px){
    .prod_layout {grid-template-columns:repeat(1,1fr); }
}

.pagination {display:flex; align-items:center; justify-content:flex-end; gap:20px; margin-top:100px; }
.pagination a {display:flex; align-items:center; justify-content:center; width:54px; height:54px; border-radius:50%; transition:all var(--ease-in-out-cubic) 0.5s; }
.pagination a.prev,
.pagination a.next {border:1px solid var(--color-sub); }
.pagination a.prev:hover,
.pagination a.next:hover {box-shadow:0 0 10px rgba(255,255,255,0.5); }
.pagination a.prev img ,
.pagination a.next img {width:24px; max-width:50%; }
.pagination a.prev img {transform:rotate(135deg); }
.pagination a.next img {transform:rotate(-45deg); }
.pagination a.num:hover {background-color:rgba(255,255,255,0.1); }
.pagination a.num.active {background-color:rgba(255,255,255,0.2); }

@media all and (max-width:767px){
    .pagination {justify-content:space-between; gap:0; }
    .pagination a {width:40px; height:40px; }
}

.contact_form {display:flex; flex-direction:column; gap:80px; }
.contact_form .submit button {display:inline-flex; align-items:center; gap:4px; padding:14px 24px; border:1px solid var(--color-sub); font-size:clamp(16px,2vw,20px); color:#fff; border-radius:50px; transition:all var(--ease-in-out-cubic) 0.5s; }
.contact_form .submit button img {transform:rotate(-45deg); }
.contact_form .submit button span {line-height:1; }
.contact_form .submit button:hover {box-shadow:0 0 10px rgba(255,255,255,0.5); }
.form_box .tit {margin-bottom:16px; font-size:clamp(16px,2vw,20px); font-weight:500; }
.form_box .tit br {display:none; }
.form_box input,
.form_box textarea {width:100%; padding:12px 0; border:0 none; border-bottom:1px solid #373641; font-size:clamp(16px,2vw,20px); color:#fff; font-weight:400; background-color:transparent; font-family: "Pretendard", sans-serif; transition:all var(--ease-in-out-cubic) 0.5s; }
.form_box input:focus,
.form_box textarea:focus {outline:0 none; border-bottom-color:#fff; }
.form_box input::placeholder,
.form_box textarea::placeholder {color:var(--color-sub); }
.form_box textarea {resize:none; height:250px; }
.form_box .form_part {display:grid; grid-template-columns:repeat(2,1fr); gap:40px; }
.form_box.contact_privacy label {display:flex; align-items:center; gap:10px; color:var(--color-sub); font-size:16px; }
.form_box.contact_privacy input {width:auto; }

@media all and (max-width:767px){
    .contact_form {gap:50px; }
    .form_box .tit br {display:block; }
    .form_box .form_part {grid-template-columns:repeat(1,1fr); gap:40px; }
    
}
/* ====================================
    main
==================================== */
.main_visual {display:grid; grid-template-columns:repeat(12,1fr); grid-template-rows:repeat(6,minmax(0,1fr)); width:100%; height:100dvh; padding:5dvh 40px 0; background:url('../img/main/main_visual.png') no-repeat center center / cover; }
.main_visual .tit {position:relative; display:flex; font-size:clamp(100px,10vw,188px); line-height:0.8; color:#fff; animation: floating 3.5s ease-in-out infinite; }
.main_visual .tit_1 {grid-column:4 / 8; grid-row:2; align-items:flex-start; animation-delay: 1.2s;}
.main_visual .tit_2 {z-index:3; grid-column:9 / 11; grid-row:3; align-items:flex-end; animation-delay: 0.4s;}
.main_visual .tit_3 {z-index:3; grid-column:4 / 8; grid-row:4; align-items:flex-end; animation-delay: 0.8s;}
.main_visual .desc {z-index:3; position:relative; display:flex; align-items:center; justify-content:center; font-size:clamp(14px,5vw,16px); text-align:center; animation: floating 4s ease-in-out infinite; }
.main_visual .desc_1 {grid-column:8 / 10; grid-row:2; animation-delay: 0.3s;}
.main_visual .desc_2 {grid-column:3 / 5; grid-row:3; animation-delay: 0.9s;}
.main_visual .img_box {z-index:2; position:relative; grid-column:1 / 13; grid-row:2 / 6; display:flex; align-items:flex-end; justify-content:center; animation: floating 3s ease-in-out infinite; }
.main_visual .img_box img {max-height:100%; }
.main_visual .img_box .mo {display:none; }

@media all and (max-width:767px){
    .main_visual {grid-template-columns:repeat(6,1fr); padding:0 20px; }
    .main_visual .tit {font-size:80px; }
    .main_visual .tit_1 {grid-column:1 / 7; align-items:flex-end; }
    .main_visual .tit_2 {font-size:68px; grid-column:5 / 7; grid-row:4; align-items:center; justify-content:center; }
    .main_visual .tit_3 {font-size:68px; grid-column:1 / 5; grid-row:5; align-items:center; justify-content:center; }
    .main_visual .desc {font-size:14px; text-shadow:0 0 5px rgba(0,0,0,0.5); }
    .main_visual .desc_1 {grid-column:5 / 7; grid-row:3; align-items:flex-start; }
    .main_visual .desc_2 {grid-column:1 / 3; grid-row:4; align-items:flex-start; }
    .main_visual .img_box {grid-column:1 / 7; }
    .main_visual .img_box .pc {display:none; }
    .main_visual .img_box .mo {display:block; max-width:95%; }
}

@keyframes floating {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.main_con01 {padding-bottom:60px; }
.main_con01 .title {padding-bottom:80px; text-align:center; }
.main_con01 .title p {font-size:clamp(70px,16vw,188px); line-height:0.75; background:linear-gradient(180deg, #FFF 5.05%, rgba(153, 153, 153, 0.00) 100%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.main_con01 .element {max-width:30%; margin:0 auto; }
.main_con01 .sub_tit {justify-content:center; margin:40px 0; }
.main_con01 .desc {font-size:clamp(16px,2vw,24px); line-height:1.6; letter-spacing:0.48px; text-align:center; }


.main_con02 {padding:40px 0; border-top:var(--border); }
.main_con02 .marquee {width:100%; overflow:hidden; white-space:nowrap; }
.main_con02 .marquee + .marquee {margin-top:40px; }
.main_con02 .marquee_track {display:inline-flex; animation:marquee 22s linear infinite; }
.main_con02 .marquee_track.type02 {animation:marquee2 19s linear infinite; }
.main_con02 .marquee_track span {flex-shrink:0; font-size:clamp(40px,10vw,100px); font-weight:700; line-height:0.71; letter-spacing:2px; }

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes marquee2 {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

@media all and (max-width:767px){
    .main_con02 {padding:30px 0; }
    .main_con02 .marquee + .marquee {margin-top:20px; }
    .main_con02 .marquee_track span {letter-spacing:0.8px; }
}


.main_con03 {padding:120px 0; border-top:var(--border); }
.main_con03 .tit {font-size:15px; color:var(--color-sub); letter-spacing:0.3px; }
.main_con03 .desc p {font-size:clamp(28px,2vw,44px); font-weight:500; line-height:1.3; }
.main_con03 .desc p + p {margin-top:5px; }
.main_con03 .desc p br {display:none; }
.main_con03 .desc a {display:inline-flex; gap:4px; margin-top:80px; padding:10px 24px; border:1px solid #C7C7D7; font-size:clamp(16px,1.5vw,20px); border-radius:50px; transition:all var(--ease-in-out-cubic) 0.5s; }
.main_con03 .desc a img {transform:rotate(-90deg); }
.main_con03 .desc a:hover {box-shadow:0 0 10px rgba(255,255,255,0.5); }

@media all and (max-width:767px){
    .main_con03 {padding:60px 0 80px; }
    .main_con03 .desc {margin-top:22px; }
    .main_con03 .desc p br {display:block; }
}

.main_con04 {padding:60px 0 120px; border-top:var(--border); }
.main_con04 .prod_layout {grid-template-columns:repeat(2,1fr); }
.main_con04 .link a {display:inline-flex; gap:4px; margin-top:80px; padding:10px 24px; border:1px solid #C7C7D7; font-size:clamp(16px,1.5vw,20px); border-radius:50px; transition:all var(--ease-in-out-cubic) 0.5s; }
.main_con04 .link a img {transform:rotate(-225deg); }
.main_con04 .link a:hover {box-shadow:0 0 10px rgba(255,255,255,0.5); }

@media all and (max-width:1024px){
    .main_con04 .prod_layout {grid-template-columns:repeat(1,1fr); }
}

@media all and (max-width:767px){
    .main_con04 {padding:60px 0; }
    .main_con04 .prod_layout {margin-top:20px; }

}



/* ====================================
    sub
==================================== */

/* works */
.work_list {padding:120px 0; }

@media all and (max-width:767px){
    .work_list {padding:60px 0; }
}

.work_detail img {width:100%; }
.work_detail .pc_img {display:block; }
.work_detail .mo_img {display:none; }

@media all and (max-width:1024px){
    .work_detail .pc_img {display:none; }
    .work_detail .mo_img {display:block; }
}


/* about */
.about_con01 {padding:120px 0; border-top:var(--border); }
.about_con01 .txt_box {display:grid; grid-template-columns:repeat(2,1fr); gap:80px 40px; }
.about_con01 .txt_box li img {height:clamp(50px,5vw,60px); }
.about_con01 .txt_box li .tit {margin-top:10px; font-size:clamp(28px,3vw,36px); font-weight:500; }
.about_con01 .txt_box li .desc {margin-top:30px; }
.about_con01 .txt_box li .desc p {font-size:clamp(18px,3vw,20px); }
.about_con01 .txt_box li .desc p + p {margin-top:5px; }

@media all and (max-width:1024px){
    .about_con01 .txt_box {grid-template-columns:repeat(1,1fr); gap:40px; }
}
@media all and (max-width:767px){
    .about_con01 {padding:60px 0 80px; }
    .about_con01 .txt_box {margin-top:50px; }
}


.about_con02 {padding:120px 0; border-top:var(--border); }
.about_con02 .txt_box img {height:clamp(40px,3vw,50px); }
.about_con02 .txt_box .tit {margin-top:40px; font-size:clamp(34px,3vw,48px); line-height:1.1; font-weight:700; }
.about_con02 .txt_box .tit br {display:none; }
.about_con02 .txt_box .desc {margin-top:40px; }
.about_con02 .txt_box .desc p {font-size:clamp(17px,3vw,20px); color:var(--color-sub); line-height:1.6; }
.about_con02 .txt_box .desc p + p {margin-top:20px; }
.about_con02 dl {display:grid; grid-template-columns:repeat(2,1fr); gap:40px; margin-top:80px; }
.about_con02 dl dt {font-size:clamp(30px,2.5vw,44px); line-height:1.3; font-weight:500; }
.about_con02 dl dd {font-size:clamp(15px,1.5vw,20px); line-height:1.6; color:var(--color-sub); }

@media all and (max-width:767px){
    .about_con02 {padding:60px 0 80px; }
    .about_con02 .txt_box {margin-top:50px; }
    .about_con02 .txt_box .tit br {display:block; }
    .about_con02 dl {grid-template-columns:repeat(1,1fr); margin-top:50px; }
}


.about_con03 {padding:120px 0; border-top:var(--border); }
.about_con03 .client_list {display:grid; grid-template-columns:repeat(4,1fr); margin-top:40px; }
.about_con03 .client_list li {display:flex; align-items:center; justify-content:center; min-height:100px; padding:15px 0; }
.about_con03 .client_list li img {max-width:70%; max-height:70%; }

@media all and (max-width:767px){
    .about_con03 {padding:60px 0 80px; }
    .about_con03 .client_list {grid-template-columns:repeat(3,1fr); }
    .about_con03 .client_list li {min-height:80px; }
}


/* contact */
.contact_box {padding:120px 0; border-top:var(--border); }
.contact_box .grid_inner {row-gap:0;}
.contact_box .title {margin-bottom:100px; }
.contact_box .title img {height:clamp(40px,3vw,50px); }
.contact_box .title p {margin-top:40px; font-size:clamp(34px,4vw,48px); line-height:1.2; font-weight:700; word-break: break-word; }


@media all and (max-width:767px){
    .contact_box {padding:60px 0 80px; }
    .contact_box .title {margin-bottom:50px; }
}