body::-webkit-scrollbar{display: none;} #wrap {overflow:clip;} .w_custom{position: relative; width: calc(100% - 60px); max-width: 1600px; margin-inline: auto;} .bullet-list{display: flex;flex-direction: column;gap:6px;} .bullet-list > li{position: relative;display: flex;align-items: baseline;gap: var(--row-gap10);font-size: var(--text-18);font-weight:400;color:var(--black-color05);} .bullet-list > li::before{display: inline-flex;content:'';width: clamp(3px, 0.5vw, 4px);aspect-ratio: auto 1;flex-shrink: 0;background: var(--black-color08);translate: 0 clamp(-5px, -0.3vw, -3px);border-radius:100%;} .bullet-list > li em{font-weight: 700; color: var(--point-color04);} .bullet-list > li > em{display: contents;} .link{position: absolute; inset: 0; z-index: 3;} #wrap [class*="swiper-butto"]::after{display: none;} .ft_en{font-family: var(--font-type02);} main{padding-block:var(--row-gap90) var(--row-gap160);} main:has(.pt-dn){padding-top: 0;} main:has(.pb-dn){padding-bottom: 0;} main:has(.full-sec){width: 100%; max-width: 100%;} #wrap .dn{display: none;} .ofc{overflow:hidden;} .ofc img{width:100% !important;height:100% !important;object-fit:cover !important;} .bg-sec{background:var(--point-color05);} .hide{display: none !important;} @media (max-width:1600px) { br.for_pc{display: none;} } @media (max-width:1024px) { br.for_pct{display: none;} } @media (max-width:860px) { .w_custom{width: calc(100% - 30px);} } @media (max-width:479px) { br.for_pcm{display: none;} } @media (max-width:320px) { .w_custom{width: calc(100% - 20px);} } /* ======================================== 빠른 상담문의 (Quick Inquiry) ======================================== */ #dbQuickInquiry{display: none;} /* ── 공통 ── */ .db-qi-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; } .db-qi-title { font-size: 1rem; font-weight: 700; color: var(--qi-text, #fff); } .db-qi-close { background: none; border: none; color: var(--qi-text, #fff); font-size: 1.5rem; cursor: pointer; opacity: 0.7; line-height: 1; } .db-qi-close:hover { opacity: 1; } .db-qi-input { display: block; width: 100%; padding: 0.5rem 0.75rem; border: 1px solid rgba(255,255,255,0.3); border-radius: 0.375rem; background: rgba(255,255,255,0.15); color: var(--qi-text, #fff); font-size: 0.875rem; outline: none; transition: border-color 0.2s; } .db-qi-input::placeholder { color: rgba(255,255,255,0.6); } .db-qi-input:focus { border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.25); } .db-qi-privacy { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--qi-text, #fff); opacity: 0.85; cursor: pointer; flex-shrink: 0; } .db-qi-privacy input[type="checkbox"] { width: 14px; height: 14px; flex-shrink: 0; } .db-qi-privacy-link { color: var(--qi-text, #fff); text-decoration: underline; opacity: 0.8; margin-left: 0.25rem; } .db-qi-privacy-link:hover { opacity: 1; } .db-qi-btn { padding: 0.5rem 1.5rem; background: rgba(255,255,255,0.95); color: var(--qi-bg, #1e40af); border: none; border-radius: 0.375rem; font-weight: 700; font-size: 0.875rem; cursor: pointer; transition: background 0.2s; white-space: nowrap; flex-shrink: 0; } .db-qi-btn:hover { background: #fff; } .db-qi-msg { text-align: center; font-size: 0.8rem; padding: 0.5rem; color: var(--qi-text, #fff); } .db-qi-form { display: flex; flex-direction: column; gap: 0.5rem; padding: 0 1rem 1rem; } /* ── 하단 고정 바 ── */ .db-qi-bottom { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9980; } .db-qi-bottom-tab { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 0.75rem; background: var(--qi-bg, #1e40af); color: var(--qi-text, #fff); border: none; cursor: pointer; font-size: 0.9rem; font-weight: 600; } .db-qi-bottom-tab:hover { filter: brightness(1.1); } .db-qi-bottom-panel { background: var(--qi-bg, #1e40af); border-top: 1px solid rgba(255,255,255,0.1); } .db-qi-bottom-inner { max-width: 1200px; margin: 0 auto; } .db-qi-form-row { flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .db-qi-form-row .db-qi-input { width: auto; flex: 1 1 150px; min-width: 120px; } /* 캡차 영역 */ .db-qi-captcha { flex: 0 0 auto; display: flex; align-items: center; } .db-qi-captcha img { height: 40px !important; border-radius: 6px; } .db-qi-captcha input[name="captcha_answer"] { height: 40px; padding: 0 10px; border: 1px solid #d1d5db; border-radius: 6px; width: 110px; font-size: 13px; color: #111; background: #fff; } @media (max-width: 768px) { .db-qi-captcha { width: 100%; justify-content: flex-start; } } /* ── 우측 패널 ── */ .db-qi-right { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 9980; display: flex; align-items: flex-start; } .db-qi-right-tab { writing-mode: vertical-rl; text-orientation: mixed; padding: 1rem 0.5rem; background: var(--qi-bg, #1e40af); color: var(--qi-text, #fff); border: none; border-radius: 0.5rem 0 0 0.5rem; cursor: pointer; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.05em; } .db-qi-right-tab:hover { filter: brightness(1.1); } .db-qi-right-panel { display: none; width: 280px; background: var(--qi-bg, #1e40af); border-radius: 0.5rem 0 0 0.5rem; box-shadow: -4px 0 20px rgba(0,0,0,0.15); } /* ── 반응형 ── */ @media (max-width: 768px) { .db-qi-form-row { flex-direction: column !important; } .db-qi-form-row .db-qi-input { width: 100%; flex: none; } .db-qi-right { right: 0; top: auto; bottom: 0; transform: none; left: 0; flex-direction: column; } .db-qi-right-tab { writing-mode: horizontal-tb; text-orientation: initial; border-radius: 0; width: 100%; text-align: center; } .db-qi-right-panel { width: 100%; border-radius: 0; } } /*──────────────────────────────────────────────────────────── header ────────────────────────────────────────────────────────────*/ #header{position:sticky;top:0;width: 100%;height: clamp(60px, 9vw, 100px);z-index: 100;transition: all 0.4s;transform: translateZ(0);will-change: transform;isolation: isolate;background: var(--point-white);} #header.off{opacity: 0; pointer-events: none;} #header.up{transform: translateY(calc(clamp(60px, 9vw, 100px) * -1)) translateZ(0);} #header .w_custom{display: flex;align-items: center;justify-content: space-between;height: 100%;gap: 15px;max-width:1720px;} #header .logo{height: 100%;max-width: clamp(90px, 12vw, 120px);} #header .logo a{display: flex; align-items: center; height: 100%;} #header .logo img{height: auto;} #header .gnb{position: absolute; top:0; left:50%; translate: -50%; width: calc(100% - 250px); height: 100%; display: flex; justify-content: center; text-align: center;} #header .gnb > li{position: relative;height: 100%;font-size: var(--text-20);font-weight:600;color: var(--black-color00);font-family:var(--font-type02);transition: all 0.4s;} #header .gnb > li > a{display: flex;align-items: center;justify-content: center;height: 100%;padding-inline: clamp(20px, 2vw, 60px);letter-spacing:0;} #header .gnb .dep02{position: absolute;top: 80%;left: 50%;width: max-content;max-width: 300px;min-width: 180px;translate: -50%;background: var(--point-color01);border-radius: var(--radius-20);padding-block: 18px;opacity: 0;pointer-events: none;transition: inherit;} #header .gnb .dep02 > li{font-size: 90%;filter: var(--filter-white); transition: inherit;} #header .gnb .dep02 > li > a{display: block;padding: 10px 25px;} #header .utility{display: flex; align-items: center; gap: clamp(15px, 3vw, 30px);} #header .allCate{flex-direction: column;justify-content: space-between;width: clamp(20px, 2vw, 26px);aspect-ratio: auto 1;position: relative;} #header .allCate{&::before, &::after{content:"";background:var(--black-color00);position: absolute;top:50%;left:50%;translate:-50% -50%;}} #header .allCate:before{width:100%;height:2px;} #header .allCate:after{width:2px;height:100%;} /*on*/ #header.on{box-shadow: inset 0 -1px 0 var(--border-color01);} /* over */ @media (hover:hover) and (pointer:fine) { #header:hover{box-shadow: inset 0 -1px 0 var(--border-color01);} #header .gnb > li:hover .dep02{opacity: 1; pointer-events: auto;} #header .gnb .dep02:has(> li:hover) > li:not(:hover){opacity: 0.4;} } @media (max-width:1023px) { #header .gnb{display: none;} #header .logo{padding-block:5px;} } /*─────────────────────────────────────────────────────────── Aside ───────────────────────────────────────────────────────────*/ #aside{position: fixed;top: 0;left:0;width: 100%;height: 100%;z-index: 999;background: rgba(255,255,255,0.8);backdrop-filter:blur(10px);display: flex;flex-direction: column;overflow: hidden;overflow-y: auto;padding-block: 10vh;box-sizing: border-box;opacity: 0;transition: all 0.6s;clip-path: inset(0 0 100% 0);} #aside.on{opacity: 1;clip-path: inset(0);} body:has(#aside.on){overflow: clip; touch-action: none;} #aside .w_custom{flex-shrink: 0;max-width: 1800px;min-height: 100%;display: flex;align-items: center;} #aside .gnb{width: 100%;display: grid;align-items: start;justify-content: center;grid: auto / repeat(5, 1fr);gap: clamp(15px, 2.2vw, 40px);} #aside .gnb > li{color: var(--black-color01);font-size: var(--text-20);text-align: center;} @media (min-width:861px) { #aside .gnb > li{opacity:0;translate:0 100px;transition:all 0.8s 0.3s;} #aside.on .gnb > li{opacity:1;translate:0;} #aside.on .gnb > li:nth-child(2){transition-delay:0.4s;} #aside.on .gnb > li:nth-child(3){transition-delay:0.5s;} #aside.on .gnb > li:nth-child(4){transition-delay:0.6s;} #aside.on .gnb > li:nth-child(5){transition-delay:0.7s;} #aside.on .gnb > li:nth-child(6){transition-delay:0.8s;} } #aside .gnb > li > a{position: relative;display: block;font-size: var(--text-30);font-weight: 700;line-height: 1.4;padding-block: 30px;transition: all 0.4s;letter-spacing: 0;} #aside .gnb > li > a:before{position: absolute;content: '';top: 0;left: 50%;translate: -50%;width:12px;height: 0;opacity:0;border-radius:100%;background: var(--point-color01);transition:all 0.3s;} #aside .gnb .dep02{position: relative;} #aside .gnb .dep02 > li > a{display: block;font-weight: 400;padding-block: clamp(7px, 1.7vw, 13px);color: var(--black-color06);line-height: 1.6;transition: all 0.4s;} #aside .gnb .dep03 > li > a{display: block;font-size:var(--text-16);font-weight: 400;padding-block: clamp(3px, 0.5vw, 5px);color: var(--black-color08);line-height: 1.6;transition: all 0.4s;} #aside .utility{position: absolute;top: clamp(30px, 2.8vw, 34px);right: clamp(30px, 5vw, 90px);display: flex;align-items: center;gap: clamp(20px, 1.6vw, 30px);z-index:2;} #aside .close_btn{position: relative;width: clamp(30px, 4vw, 40px);height: clamp(30px, 4vw, 40px);z-index: 9;} #aside .close_btn span{position: absolute;top:50%;left:50%;transform: translate(-50%, -50%) rotate(45deg);width: 100%;height: 2px;background: var(--black-color01);} #aside .close_btn span + span{transform: translate(-50%, -50%) rotate(-45deg);} /* over */ @media (hover:hover) and (pointer:fine){ #aside .gnb > li:hover > a{color: var(--point-color01);} #aside .gnb > li:hover > a:before{height:12px;opacity:1;} #aside .gnb .dep02 > li:hover a{color: var(--point-color02);} } @media (max-width:1023px){ #aside{padding-block: clamp(80px, 12vw, 120px);} } @media (max-width:860px){ #aside{display: block;} #aside .w_custom{align-items:flex-start;} #aside .gnb{grid-template: auto / repeat(1, 1fr);gap:0;} #aside .gnb > li{padding-block: clamp(20px, 3vw, 25px);text-align:left;border-bottom: 1px solid rgba(0,0,0,0.15);} #aside .gnb > li > a{padding-block: 0;} #aside .gnb > li > a:before{display: none;} #aside .gnb .dep02{display: grid;gap: 0 20px;grid-template: auto / repeat(2, 1fr);margin-top: clamp(10px, 1.8vw, 15px);justify-content: flex-start;} #aside .gnb .dep03{display: flex;flex-wrap:wrap;gap:5px 10px;} #aside .utility{top:15px; right: 15px;} } @media (max-width:479px){ #aside .gnb .dep02{grid-template: auto / repeat(1, 1fr);} } /*─────────────────────────────────────────────────────────── Main ───────────────────────────────────────────────────────────*/ /*공통*/ .main_content{position: relative;z-index: 1;transform-style: flat;} .main_title{display: flex;flex-direction: column;gap:var(--row-gap30);text-align: center;align-items: center;} .main_title.tal{align-items: flex-start;text-align: left;} .main_title span{font-size:var(--text-24);color:var(--black-color03);font-weight:500;line-height:1.4;font-family:var(--font-type02);} .main_title h3{font-size:var(--text-54);color:var(--black-color00);font-weight:800;line-height:1.4;font-family:var(--font-type02);} .main_title p{font-size:var(--text-20);color:var(--black-color00);font-weight:400;line-height:1.6;} /*visual*/ .main_visual{position: relative;} .main_visual .visual_obj{position: absolute;top:0;left:0;width:100%;height:100vh;display: flex;align-items: center;justify-content: center;z-index:10;pointer-events:none;} .main_visual .visual_obj img{rotate:-15deg;scale:1.1;translate:0 -32%;max-width:clamp(27%, 50vw, 100%);} .main_visual .w_custom{max-width:1720px;} .main_visual .visual_sec_box{position: relative;z-index:10;} .main_visual .visual_sec_box > section{height:100vh;width:100%;} .main_visual .vis_section01{padding-block:var(--row-gap90) var(--row-gap30);display: flex;flex-direction: column;gap:var(--row-gap30);justify-content: space-between;text-align: center;} .main_visual .vis_section01 .txt{display: flex;flex-direction: column;align-items: flex-start;gap:var(--row-gap30);text-align: left;} .main_visual .vis_section01 .txt p{font-size:var(--text-22);color:var(--black-color00);font-weight:400;line-height:1.6;} .main_visual .vis_section01 .txt strong{font-size:var(--text-46);color:var(--black-color00);font-weight:700;line-height:1.4;} .main_visual .vis_section01 h2{font-size:clamp(40px, 10vw, 170px);color:var(--black-color00);font-weight:700;line-height:1.4;letter-spacing:0;transition-delay:0.5s;} .main_visual .vis_section02{display: flex;flex-direction: column;justify-content: flex-end;padding-bottom:180px;} .main_visual .vis_section02 .main_title h3{background: linear-gradient(to right, var(--black-color00) 50%, var(--black-color08) 50%);background-size: 200% 100%;background-position: 100% 0;-webkit-background-clip: text;background-clip: text;color: transparent;} .main_visual .visual_sec_box > section.vis_section03{padding-block:var(--row-gap50) 0;height:auto;} .virtuous_box{max-width:1420px;position: relative;margin:0 auto;} .virtuous_box {&::before, &::after{content:"";position: absolute;top:51%;left:50%;translate:-50% -50%;width:0;border:2px dashed var(--black-color05);opacity:0;border-radius:100%;transition:all 0.6s;transition-delay:0.6s;;}} .virtuous_box.aos-animate:before{width:622px;aspect-ratio:auto 1;opacity:0.2;} .virtuous_box.aos-animate:after{width:872px;aspect-ratio:auto 1;opacity:0.2;} .virtuous_box .arw_box{width:872px;aspect-ratio:auto 1;position: absolute;top:50%;left:50%;translate:-50% -50%;z-index:3;} .virtuous_box .arw_box .arw{width:clamp(50px,6vw, 60px);aspect-ratio:auto 1;display: flex;align-items: center;justify-content: center;border-radius:100%;background:var(--point-white);box-shadow:clamp(2px, 0.2vw, 4px) clamp(2px, 0.2vw, 4px) clamp(10px, 2vw, 20px) 0 rgba(0, 0, 0, 0.10);position: absolute;opacity:0;position: absolute;} .virtuous_box.aos-animate .arw_box .arw{opacity:1;} .virtuous_box .arw_box .arw:nth-child(1){top:calc(clamp(50px,6vw, 60px) / 2 * -1);left:50%;translate:-50%;} .virtuous_box .arw_box .arw:nth-child(2){right:calc(clamp(50px,6vw, 60px) / 2 * -1);top:50%;translate:0 -50%;} .virtuous_box .arw_box .arw:nth-child(3){bottom:calc(clamp(50px,6vw, 60px) / 2 * -1);left:50%;translate:-50%;scale:-1 -1;} .virtuous_box .arw_box .arw:nth-child(4){left:calc(clamp(50px,6vw, 60px) / 2 * -1);top:50%;translate:0 -50%;scale:-1 -1;} .virtuous_box .arw_box .arw:before{width:10px;aspect-ratio:auto 1;content:"";border:2px solid var(--black-color08);border-width:2px 2px 0 0;display: inline-block;translate:-2px;} .virtuous_box .arw_box .arw:nth-child(1):before, .virtuous_box .arw_box .arw:nth-child(3):before{rotate:45deg;} .virtuous_box .arw_box .arw:nth-child(2):before, .virtuous_box .arw_box .arw:nth-child(4):before{rotate:135deg;translate:0 -2px;} .virtuous_box ul{display: flex;flex-wrap:wrap;gap:212px 0;position: relative;z-index:3;} .virtuous_box ul li{width:50%;display: flex;margin:0 auto;position: relative;} .virtuous_box ul li:nth-child(2n){justify-content: flex-end;} .virtuous_box ul li:nth-child(1){padding-left:200px;} .virtuous_box ul li:nth-child(2){padding-right:200px;} .virtuous_box .virtuous_cont{width:340px;border-radius:var(--radius-10);padding:var(--row-gap20) var(--row-gap20) var(--row-gap30) var(--row-gap20);background:var(--point-white);display: flex;flex-direction:column;gap:var(--row-gap20);box-shadow:var(--shadow-01);} .virtuous_box .virtuous_cont .img{width:100%;border-radius:var(--radius-10);aspect-ratio:auto 2.2;} .virtuous_box .virtuous_cont dl{display: flex;flex-direction: column;gap:var(--row-gap10);} .virtuous_box .virtuous_cont dl dt{font-size:var(--text-30);color:var(--black-color00);font-weight:600;line-height:1.4;font-family:var(--font-type02);} .virtuous_box .virtuous_cont dl dd{font-size:var(--text-20);color:var(--black-color05);font-weight:400;line-height:1.6;} @media (max-width:1500px){ .virtuous_box.aos-animate:before{width:42vw;} .virtuous_box.aos-animate:after, .virtuous_box .arw_box{width:58vw;} } @media (max-width:1200px){ .virtuous_box.aos-animate:before{width:50vw;} .virtuous_box.aos-animate:after, .virtuous_box .arw_box{width:70vw;} .virtuous_box ul{gap:140px 0;} .virtuous_box ul li:nth-child(1){padding-left:10%;} .virtuous_box ul li:nth-child(2){padding-right:10%;} .virtuous_box .virtuous_cont{width:300px;} } @media (max-width:1023px){ .main_visual .visual_sec_box > section{height:auto;} .main_visual .vis_section02{padding-block:var(--row-gap140);} .main_visual .visual_sec_box > .vis_section01, .main_visual .visual_obj{height:clamp(350px, 80vw, 940px);} .main_visual .visual_obj{justify-content: flex-end;} .main_visual .visual_sec_box > .vis_section01{padding-top:var(--row-gap40);} .virtuous_box{&::before, &::after{display:none;}} .virtuous_box.aos-animate:before{width:65%;} .virtuous_box.aos-animate:after, .virtuous_box .arw_box{width:100%;} .virtuous_box .arw_box{display: none;} .virtuous_box ul{gap:60px 20px;} .virtuous_box ul li{width:calc(50% - 10px);} .virtuous_box ul li:nth-child(1){padding-left:0;} .virtuous_box ul li:nth-child(2){padding-right:0;} .virtuous_box .virtuous_cont{width:100%;} } @media (max-width:479px){ .main_visual .visual_sec_box > .vis_section01{height:auto;gap:73vw;} .main_visual .visual_obj{top:60vw;} .main_visual .visual_obj img{width:100%;max-width:100%;} .virtuous_box ul{gap:30px;} .virtuous_box ul li{width:100%;} .virtuous_box .virtuous_cont{width:100%;} .vis_section02{padding-block:100px;} } @media (max-width:320px){ .main_visual .visual_obj{top:70vw;} } /*transform*/ .main_transform{margin-top:clamp(100px, 20vw, 230px);background:var(--black-color11);padding-block:var(--row-gap140);position: relative;overflow:hidden;} .main_transform{&::before,&::after{width:clamp(250px, 50vw, 600px);aspect-ratio:auto 1;content:"";background:var(--point-color01);position: absolute;filter:blur(150px);opacity:0.6;}} .main_transform:before{bottom:-13%;left:-6%;} .main_transform:after{top:-11%;right:-9.5%;} .main_transform .main_title{filter:var(--filter-white);text-align:left;align-items: flex-start;} .main_transform .transform_box{display: flex;gap:var(--row-gap40);position: relative;} .main_transform .thumb{width:calc(50% - var(--row-gap40) / 2);flex-shrink:0;padding:var(--row-gap20);background:var(--point-white);border-radius:var(--radius-20);display: flex;flex-direction: column;gap:var(--row-gap30);} .main_transform .thumb .img_box{position: relative;border-radius:var(--radius-15);overflow:hidden;} .main_transform .thumb .img_box .img{width:100%;aspect-ratio:auto 2.06;} .main_transform .thumb .img_box .logo{position: absolute;top:var(--row-gap30);left:var(--row-gap30);} .main_transform .thumb .info_box{display: flex;flex-direction: column;gap:clamp(10px, 2vw, 23px);} .main_transform .thumb .info_box .title_box{display: flex;flex-direction: column;gap:5px;} .main_transform .thumb .info_box .title{font-size:var(--text-40);color:var(--black-color01);font-weight:700;line-height:1.4;} .main_transform .thumb .info_box .des{font-size:var(--text-26);color:var(--black-color01);font-weight:500;line-height:1.4;} .main_transform .thumb .info{padding-top:var(--row-gap30);border-top:1px solid var(--border-color01);display: flex;flex-direction:column;gap:var(--row-gap20);} .main_transform .thumb .info dl{display: flex;flex-direction:column;gap:var(--row-gap10);} .main_transform .thumb .info dl dt{font-size:var(--text-22);color:var(--point-color01);font-weight:700;line-height:1.4;} .main_transform .thumb .info dl dd{font-size:var(--text-20);color:var(--black-color03);font-weight:400;line-height:1.6;} .main_transform .list_box{width:calc(50% - var(--row-gap40) / 2)} .main_transform .list_box ul{display: flex;flex-wrap:wrap;gap:var(--row-gap20);} .main_transform .list_box ul li{width:calc(50% - var(--row-gap20) / 2);height:auto;border-radius:var(--radius-15);border: 1px solid rgba(255, 255, 255, 0.15);position: relative;} .main_transform .list_box ul li:before{width:100%;height:100%;content:"";border:2px solid var(--point-white);border-radius:var(--radius-15);position: absolute;top:0;left:0;opacity:0;pointer-events:none;transition:all 0.3s;} .main_transform .list_box ul li.on:before{opacity:1;} .main_transform .list_box ul li button{padding:var(--row-gap20) var(--row-gap20) var(--row-gap30) var(--row-gap20);display: flex;flex-direction: column;gap:var(--row-gap20);cursor:pointer;width:100%;} .main_transform .list_box .img_box{border-radius: 7.5px;background: rgba(255, 255, 255, 0.05);display: flex;align-items: center;justify-content: center;width:100%;aspect-ratio:auto 2.27;padding:10px;} .main_transform .list_box .info_box{display: flex;flex-direction: column;gap:clamp(20px, 3vw, 36px);align-items: flex-start;} .main_transform .list_box .title_box{display: flex;flex-direction: column;gap:4px;align-items: flex-start;} .main_transform .list_box .info_box .title{font-size:var(--text-24);color:var(--point-white);font-weight:700;line-height:1.6;} .main_transform .list_box .info_box .en{font-size:var(--text-17);color:var(--point-white);font-weight:400;line-height:1.6;font-family:var(--font-type02);opacity:0.8;} .main_transform .list_box .info_box .cate{display: inline-flex;border-radius:5px;border: 1px solid rgba(255, 255, 255, 0.15);background: rgba(255, 255, 255, 0.05);backdrop-filter: blur(5px);font-size:var(--text-16);color:var(--point-white);font-weight:500;font-family:var(--font-type02);padding:3px 13px;} .main_transform .list_box :where(.img_box .img, .info_box .des, .info_box .info){display: none;} @media (max-width:1023px) { .main_transform .transform_box{flex-direction:column;} .main_transform .transform_box > section{width:100%;} .main_transform .thumb .img_box .logo{max-width:clamp(120px, 20vw, 200px);} } @media (max-width:640px) { .main_transform .transform_box{flex-direction: column-reverse;} .main_transform .list_box{width:100%;} .main_transform .list_box ul{flex-wrap:nowrap;gap:0;} .main_transform .list_box ul li{width:60%;} } @media (max-width:479px) { .main_transform .list_box ul li{width:37%;} .main_transform .list_box .info_box{display: none;} } /*core*/ .main_core{padding-block:var(--row-gap160);scroll-margin-top: clamp(60px, 9vw, 100px);position: relative;z-index: 0;isolation: isolate;background:var(--point-white);} .coreSwiper{margin-top:var(--row-gap60);position: relative;z-index: 1;transform-style: flat;overflow: visible;width: 100%;isolation: isolate;} .coreSwiper .swiper-wrapper{overflow: visible;will-change: transform;} .coreSwiper .swiper-slide{width:clamp(250px, 50vw, 500px);border-radius:var(--radius-20);overflow:hidden;} .coreSwiper .swiper-slide:has(+ .swiper-slide.swiper-slide-active) {translate:clamp(-90px, -8vw, -20px);} .coreSwiper .swiper-slide.swiper-slide-active + .swiper-slide{translate:clamp(20px, 8vw, 90px);} .coreSwiper dl{position: absolute;bottom:var(--row-gap60);display: flex;flex-direction: column;align-items: center;text-align: center;gap:var(--row-gap20);width:100%;padding-inline:var(--row-gap10);left:0;} .coreSwiper dl dt{font-size:var(--text-40);color:var(--point-white);font-weight:700;line-height:1.4;font-family:var(--font-type02);} .coreSwiper dl dd{font-size:var(--text-20);color:var(--point-white);font-weight:400;line-height:1.6;width:100%;} .coreSwiper dl dd span{display: block;opacity:0.8;font-size:var(--text-18);} @media (max-width:479px) { .coreSwiper dl dd br{display: none;} } /*excell*/ .main_excell{padding-block:var(--row-gap80)} .main_excell > ul{display: grid;gap:var(--row-gap40);grid-template-columns:repeat(2, 1fr);} .main_excell > ul li{border-radius:var(--row-gap20);border:1px solid var(--border-color01);padding:var(--row-gap40);display: flex;flex-direction: column;gap:var(--row-gap30);} .main_excell .title{display: flex;align-items: flex-start;justify-content: space-between;gap:var(--row-gap20);} .main_excell .title dl{display: flex;flex-direction: column;gap:var(--row-gap20);} .main_excell .title dl dt{font-size:var(--text-40);color:var(--black-color00);font-weight:800;line-height:1.4;font-family:var(--font-type02);} .main_excell .title dl dd{display: flex;flex-direction: column;font-size:var(--text-18);color:var(--black-color03);font-weight:500;line-height:1.6;} .main_excell .title dl dd strong{font-size:var(--text-24);color:var(--black-color00);font-weight:600;} .main_excell .title .logo{width:clamp(50px, 8vw, 80px);flex-shrink:0;} .main_excell .des{padding-top:var(--row-gap30);border-top:1px solid var(--border-color01);display: flex;flex-direction: column;gap:var(--row-gap10);font-size:var(--text-17);color:var(--black-color05);font-weight:400;line-height:1.6;} .main_excell .des dt{color:var(--black-color03);font-weight:600;} @media (max-width:640px) { .main_excell > ul{grid-template-columns:repeat(1, 1fr);} } /*wave*/ .main_wave{padding-block:var(--row-gap50);} .waveSwiper .swiper-wrapper{transition-timing-function: linear;} .waveSwiper .swiper-slide{width:clamp(150px, 20vw, 200px);height:clamp(60px, 8vw, 80px);aspect-ratio: 0.733;margin-right:var(--row-gap20);} .waveSwiper .swiper-slide img{image-rendering: -moz-crisp-edges;image-rendering: -o-crisp-edges;image-rendering: -webkit-optimize-contrast;image-rendering: crisp-edges;transform: translateZ(0);backface-visibility: hidden;} /*insight*/ .main_news{padding-block:var(--row-gap100) var(--row-gap160)} .main_news .title_box{display: flex;align-items: flex-end;justify-content: space-between;} .main_news .title_box a{width:clamp(18px, 2vw, 24px);display: inline-block;aspect-ratio:auto 1;position: relative;} .main_news .title_box a{&::before, &::after{content:"";background:var(--black-color00);position: absolute;top:50%;left:50%;translate:-50% -50%;}} .main_news .title_box a:before{width:100%;height:2px;} .main_news .title_box a:after{width:2px;height:100%;} .main_news .main_gallery{display:grid;gap:var(--row-gap60) clamp(20px, 3vw, 32px);grid-template-columns:repeat(4, 1fr);} .main_news .main_gallery a{display: flex;flex-direction: column;gap:var(--row-gap30);} .main_news .main_gallery .thumb{border-radius:var(--radius-10);aspect-ratio:auto 1.5;} .main_news .main_gallery .thumb img{transition:all 0.3s;} .main_news .main_gallery .info{display: flex;flex-direction: column;gap:var(--row-gap20);} .main_news .main_gallery .info strong{font-size:var(--text-22);color:var(--black-color03);font-weight:500;line-height:1.6;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp:1;} .main_news .main_gallery .info p{font-size:var(--text-18);color:var(--black-color06);font-weight:400;line-height:1.6;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp:2;} /* over */ @media (hover:hover) and (pointer:fine){ .main_news .main_gallery li:hover .thumb img{scale:1.1;} } @media (max-width:640px) { .main_news .main_gallery{grid-template-columns:repeat(2, 1fr);} } /*banner*/ .ft_bnr{padding-block:clamp(80px, 15vw, 196px);display: flex;align-items: center;justify-content: center;position: relative;} .ft_bnr .bg{width:100%;height:100%;position: absolute;top:0;left:0;} .ft_bnr .txt_box{position: relative;display: flex;flex-direction: column;align-items: center;justify-content: center;gap:clamp(20px, 3vw, 36px);text-align: center;} .ft_bnr .txt_box h3{font-size:var(--text-80);color:var(--point-white);font-weight:800;line-height:1.4;font-family:var(--font-type02);} .ft_bnr .txt_box p{font-size:var(--text-22);color:var(--point-white);font-weight:500;line-height:1.6;} .ft_bnr .txt_box a{margin-top:clamp(10px, 2vw, 24px);display: inline-flex;position: relative;width:clamp(150px, 20vw, 200px);height:clamp(50px, 6vw, 64px);border-radius:var(--radius-10);border:1px solid var(--point-white);align-items: center;justify-content: center;gap:clamp(8px, 1vw, 14px);font-size:var(--text-20);color:var(--point-white);font-weight:500;transition:all 0.4s;} .ft_bnr .txt_box a:before{width:100%;height:0;content:"";background:var(--point-white);border-radius:var(--radius-10);background:var(--point-white);position: absolute;bottom:0;left:0;transition:height 0.4s;} .ft_bnr .txt_box a span{position: relative;} .ft_bnr .txt_box a:after{width:clamp(7px, 0.8vw, 9px);aspect-ratio:auto 1;content:"";border:2px solid var(--point-white);border-width:2px 2px 0 0;rotate:45deg;display: inline-block;transition:all 0.4s;} /* over */ @media (min-width:1024px) { .ft_bnr .txt_box a{gap:0;} .ft_bnr .txt_box a:after{width:0;border-color:var(--black-color00);} .ft_bnr .txt_box a:hover{color:var(--black-color00);gap:14px;} .ft_bnr .txt_box a:hover:before{height:100%;} .ft_bnr .txt_box a:hover:after{width:9px;} } /*─────────────────────────────────────────────────────────── Footer ───────────────────────────────────────────────────────────*/ #footer .ft_top_box{padding-block:var(--row-gap100);border-bottom:1px solid var(--border-color01);} #footer .ft_top_box .w_custom{display: flex;justify-content: space-between;flex-wrap:wrap;gap:var(--row-gap40);max-width:1600px} #footer .logo_box{display: flex;gap:var(--row-gap100);} #footer .logo{width:clamp(90px, 9vw, 120px);flex-shrink:0;} #footer .info_box{display: flex;flex-direction: column;gap:var(--row-gap30);} #footer .info_box > strong{font-size:var(--text-18);color:var(--black-color00);font-weight:500;line-height:1.3;} #footer .addr-list{display:flex;flex-direction:column;gap:var(--row-gap20)} #footer .addr-list li{display: flex;flex-wrap:wrap;gap:var(--row-gap20) var(--row-gap60);} #footer .addr-list .desc{display: flex;align-items: baseline;gap:var(--row-gap20);font-size:var(--text-17);color:var(--black-color00);font-weight:400;line-height:1.3;font-family:var(--font-type02);} #footer .addr-list .desc dt{flex-shrink: 0;font-weight:500;} #footer .addr-list .desc dd{opacity:0.8;} #footer .menu_box{display: flex;gap:clamp(30px, 10vw, 160px);} #footer .menu_box .gnb{display: flex;flex-direction: column;gap:var(--row-gap20);} #footer .menu_box .gnb > li > a{font-size:var(--text-18);color:var(--black-color00);font-weight:500;line-height:1.4;font-family:var(--font-type02);} #footer .menu_box .gnb .dep02{display: none;} #footer .ft_menu{display: flex;flex-direction: column;gap:var(--row-gap20);} #footer .ft_menu li{display: flex;align-items: center;} #footer .ft_menu a{font-size: var(--text-18);color: var(--black-color05);font-weight:500;line-height:1.4;opacity:1;} #footer .ft_menu li.policy a{color:var(--black-color00);} #footer .ft_menu li:hover a{text-decoration: none;} #footer .ft_copy_box{display: flex;align-items: center;justify-content:center;padding:clamp(15px, 3vw, 29px) var(--row-gap20);} #footer .copy{font-size:var(--text-16);color:var(--black-color10);font-weight:400;line-height:1.4;display: inline-flex;align-items: center;justify-content: center;flex-wrap:wrap;gap:var(--row-gap10) var(--row-gap20);font-family:var(--font-type02);} .ft_quick{position: fixed;right:10px;top:45%;z-index:100;opacity:0;pointer-events:none;transition:all 0.3s;background:var(--point-grad01);border-radius:4px;} .ft_quick.on{opacity:1;pointer-events:initial;} .ft_quick a{width:clamp(50px, 6vw ,60px);padding-block:clamp(10px, 1.5vw, 23px);display: flex;flex-direction: column;gap:clamp(6px, 1vw, 15px);align-items: center;} .ft_quick a .ico{width:clamp(18px, 2vw, 24px);} .ft_quick a span{font-size:var(--text-18);color:var(--point-white);font-weight:600;line-height:1.4;writing-mode:vertical-rl;} .ft_top{width:clamp(50px, 6vw, 60px);aspect-ratio:auto 1;border-radius:100%;background:var(--black-color02);display: flex;align-items: center;justify-content: center;box-shadow:var(--shadow-02);border-radius:var(--radius-04);position: fixed;right:10px;bottom:var(--row-gap30);opacity:0;pointer-events:none;transition:all 0.3s;z-index:100;} .ft_top.on{opacity:1;pointer-events:initial;} @media (max-width:1300px) { #footer .logo_box{gap:3vw;max-width:65vw;} #footer .menu_box{gap:5vw;} } @media (max-width:1023px) { #footer .logo_box{max-width:100%;} #footer .menu_box .gnb{display: none;} #footer .ft_menu{flex-direction: row;flex-wrap:wrap;} } @media (max-width:640px) { #footer .ft_top_box{padding-block:var(--row-gap70);} #footer .logo_box{flex-direction: column;align-items: flex-start;} } /*───────────────────────────────────────────────────────── 게시판 ─────────────────────────────────────────────────────────*/ /* 인풋 */ :where([type="text"], [type="password"], [type="tel"], [type="email"], [type="number"], textarea, select){position: relative;width: 100%;padding-inline: clamp(15px, 2vw, 20px);height: clamp(45px, 6.5vw, 60px);background: var(--point-white);border: 1px solid var(--border-color01);color: var(--black-color03);font-size: var(--text-20);overflow: hidden;text-overflow:ellipsis;white-space:nowrap;border-radius: var(--radius-08);} :where([type="text"], [type="password"], [type="tel"], [type="email"], [type="number"], textarea)::placeholder{color: var(--black-color08);} :where([type="text"], [type="password"], [type="tel"], [type="email"], [type="number"], textarea, select):focus{border-color:var(--black-color03);} textarea{height: clamp(130px, 20vw, 200px);padding-block: clamp(15px, 2vw, 20px);overflow: visible;text-overflow:unset;white-space:unset;resize: vertical;resize: none;} textarea{ scrollbar-gutter: stable;} textarea::-webkit-scrollbar {width: clamp(3px, 0.6vw, 4px);} textarea::-webkit-scrollbar-track {box-shadow:-10px 0 0 var(--border-color01); margin: 10px;} textarea::-webkit-scrollbar-thumb {box-shadow:-10px 0 0 var(--black-color10);} select{appearance: none;background: var(--point-white) url('/images/sel-arw.svg') no-repeat calc(100% - 16px) 50% / clamp(11px, 1.5vw, 13px) auto;padding-right: 45px;} label:has([type="checkbox"], [type="radio"]){display:inline-flex;align-items:center;gap: var(--row-gap10);font-size: var(--text-20);font-weight: 500;line-height: clamp(20px, 2.8vw, 26px);color: var(--black-color03);cursor:pointer;} [type="checkbox"], [type="radio"]{width: clamp(20px, 2.8vw, 26px);height: clamp(20px, 2.8vw, 26px);flex-shrink:0;accent-color: var(--point-color01);appearance:auto;cursor:pointer;} [type="checkbox"]{appearance: none;background: var(--point-white);border: 1px solid var(--border-color01);display: flex;align-items: center;justify-content: center;border-radius: 2px;} [type="checkbox"]::before{display: inline-flex;content: '';mask:url('/images/chk-i.svg') no-repeat center / 100% auto;background: var(--border-color01);width: clamp(10px, 1.4vw, 12px);aspect-ratio: auto 1.33;} [type="checkbox"]:checked{background: var(--point-color01);border-color: var(--point-color01);} [type="checkbox"]:checked::before{background: var(--point-white);} label:has([type="checkbox"], [type="radio"]) em{font-weight: 500;color: var(--point-color12);display: contents;} /* 검색 */ .search-from{display: flex;align-items: center;justify-content: center;flex-wrap: wrap;gap: 15px;margin-bottom: var(--row-gap60);} .search-from .keywords-box{width: 100%;display: flex;justify-content: center;align-items: center;gap: 10px;} .search-from .inp-box{position: relative;width: min(600px, 100%);} .search-from [type="text"]{width: 100%;height: clamp(50px, 7.3vw, 68px);padding-inline: clamp(15px, 3vw, 30px) clamp(45px, 7.7vw, 75px);border-color: var(--black-color03);} .search-from button{position: absolute;top: 0;right: clamp(15px, 3vw, 30px);width: clamp(18px, 2.5vw, 23px);height: 100%;mask: url('/images/search-i.svg') no-repeat right center / 100% auto;font-size: 0;background: var(--black-color02); border-radius: var(--radius-10);} /* 말머리 */ .com-tab{display: flex;justify-content: center;flex-wrap: wrap;gap: clamp(10px, 2vw, 20px);margin-bottom: var(--row-gap40);} .com-tab > li{position: relative;font-size: var(--text-19);font-family: var(--font-type02);color: var(--black-color03);display: flex;transition: all 0.4s;} .com-tab > li > a{display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;border: 1px solid var(--border-color01);border-radius: 50px;background: var(--point-white);padding: clamp(10px, 1.7vw, 12px) clamp(15px, 2vw, 20px);min-height: clamp(42px, 6.5vw, 60px);transition: inherit;} .com-tab > li.on > a{border-color: var(--point-color03);background: var(--point-color03);color: var(--point-white);-webkit-text-stroke: 0.1px var(--point-white);} @media (hover:hover) and (pointer: fine) { .com-tab > li:not(.on):hover > a{border-color: var(--point-color03);} } /* 일반 게시판 */ .list-table{width: 100%;border-top: 1px solid var(--black-color01);table-layout: fixed;} .list-table.cen{text-align: center;} .list-table :where(th, td){font-size: var(--text-18);font-weight: 500;color: var(--black-color00);padding: clamp(20px, 2.4vw, 24px) 10px;border-bottom: 1px solid var(--border-color01);text-align: center;font-family: var(--font-type02);} .list-table .noti-tr{background: var(--gray-bg01);} .list-table tr{transition: all 0.4s;} .list-table td{font-weight: 400;color: var(--black-color05);} .list-table td em{font-weight: 500; color: var(--point-color01);} .list-table .title{text-align: left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break: break-all;padding-inline: 0;color: var(--black-color03);font-family: var(--font-type01);} .list-table .noti-tr{background: var(--gray-bg01);} .no-data{text-align: center; font-size: var(--text-16); color: var(--black-color09); padding-block: var(--row-gap50);} @media (hover:hover) and (pointer: fine) { .list-table tbody tr:hover{background: var(--point-color05);} } /* gallery-list */ .no-data{text-align: center; font-size: var(--text-16); color: var(--black-color09); padding-block: var(--row-gap50);} .gallery-list{position: relative;display: grid;grid: auto / repeat(4, 1fr);gap: var(--row-gap60) clamp(15px, 1.7vw, 32px);} .gallery-list > li{position: relative;display: flex;flex-direction: column;gap: var(--row-gap30);} .gallery-list .thumb{position: relative;aspect-ratio: auto 1.45;overflow: hidden;width: 100%;border-radius: var(--radius-10);flex-shrink: 0;} .gallery-list .thumb img{width: 100%;height: 100%;object-fit: cover; transition: all 0.4s;} .gallery-list .cont{display: grid;gap: var(--row-gap30);} .gallery-list .desc{display: grid;gap: var(--row-gap20);} .gallery-list .desc :where(dt, dd){line-height: 1.6;white-space:normal;overflow:hidden;text-overflow:ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;} .gallery-list .desc dt{font-size: var(--text-22);font-weight: 500;color: var(--black-color03);line-height: 1.6;-webkit-line-clamp: 1;word-break: break-all;} .gallery-list .desc dt em{display:inline-flex;align-items: center;justify-content: center;text-align: center;font-size: var(--text-18);font-weight: 400;color: var(--point-white);padding: 2px 5px;min-width: clamp(45px, 6.5vw, 55px);background: var(--black-color10);border-radius: var(--radius-04);vertical-align: middle;margin-right: clamp(10px, 1.2vw, 12px);translate: 0 -1px;} .gallery-list .desc dt em.on{background: var(--point-color03);} .gallery-list .desc dd{font-size: var(--text-18);color: var(--black-color06);line-height: 1.6;} .gallery-list .regdate{font-size: var(--text-18);color: var(--black-color08);display: none;} @media (hover:hover) and (pointer: fine) { .gallery-list > li:hover .thumb img{scale: 1.08;} } @media (max-width:1024px) { .gallery-list{grid: auto / repeat(2, 1fr);} } @media (max-width:360px) { .gallery-list{grid: auto / repeat(1, 1fr);} } /* 페이징 */ .pagination{display: flex;align-items: center;justify-content: center;text-align: center;flex-wrap: wrap;margin-top: var(--row-gap60);gap: clamp(8px, 1vw, 10px);} .pagination li{font-size: var(--text-20);color: var(--black-color06);font-family: var(--font-type02);} .pagination a{display: flex;align-items: center;justify-content: center;min-width: clamp(30px, 4.2vw, 40px);min-height: clamp(30px, 4.2vw, 40px);padding: 4px;border-radius: 100%;} .pagination a.arw{font-size: 0;background: url('/images/pagination-last.svg') no-repeat center / auto clamp(8px, 1.2vw, 10px);padding: 0;} .pagination a:is(.prev, .next){background-image: url('/images/pagination-prev.svg');} .pagination a.prev{margin-right: clamp(5px, 1vw, 10px);} .pagination a.next{margin-left: clamp(5px, 1vw, 10px);} .pagination a.first{margin-right:-5px;} .pagination a.last{margin-left:-5px;} .pagination a.disabled{display: none;} .pagination a.on{font-weight: 500;color: var(--point-white);background: var(--black-color00);} .pagination a.scale{scale: -1 -1;} /* 상세 */ .board-view .detail-hd{border-bottom: 1px solid var(--black-color00);padding-bottom: clamp(20px, 4vw, 40px);display: grid;gap: var(--row-gap20);text-align: center;} .board-view .detail-hd .desc{display: grid;gap: var(--row-gap10);} .board-view .detail-hd .desc dt{font-size: var(--text-40);font-weight: 600;color: var(--black-color03);line-height: 1.6;} .board-view .detail-hd .desc dt em{display: inline-flex;align-items: center;justify-content: center;text-align: center;font-size: var(--text-18);font-weight: 400;color: var(--point-white);padding: 2px 5px;min-width: clamp(45px, 6.5vw, 55px);background: var(--black-color10);border-radius: var(--radius-04);vertical-align: middle;margin-right: clamp(10px, 1.2vw, 12px);translate: 0 clamp(-2px, -0.3vw, -1px);} .board-view .detail-hd .desc dt em.on{background: var(--point-color03);} .board-view .detail-hd .desc dd{font-size: var(--text-22);color: var(--black-color06);} .board-view .detail-hd .exp{font-size: var(--text-20);color: var(--black-color08);display: flex;justify-content: center;align-items: center;flex-wrap: wrap;gap: 10px clamp(30px, 4vw, 40px);font-family: var(--font-type02);} .board-view .detail-hd .exp span{display:flex;align-items: baseline;gap: 12px;} .board-view .detail-hd .exp em{font-weight: 500;color: var(--black-color06);display: none;} .board-view .detail-cont{padding-block: clamp(30px, 8.8vw, 88px) clamp(30px, 4vw, 40px);border-bottom: 1px solid var(--border-color01);font-size: var(--text-20);font-weight: 400;color: var(--black-color03);line-height: 1.6;min-height: clamp(300px, 40vw, 400px);display: flex;flex-direction: column; justify-content: space-between; gap: clamp(20px, 3vw, 30px);} .board-view .db-user-content{font-size: inherit;font-weight: inherit;color: inherit;line-height: inherit;} .board-view .file-desc{display: flex;align-items: center;background: var(--gray-bg01);padding: clamp(18px, 2.1vw, 21px) clamp(20px, 4vw, 40px);border-radius: var(--radius-10);margin-top: clamp(20px, 5.8vw, 58px);} .board-view .file-desc dt{position: relative;font-size: var(--text-18);font-weight: 500;color: var(--black-color03);display: flex;align-items: center;justify-content: center;flex-shrink: 0;} .board-view .file-desc dt::after{display: inline-flex;content:'';width: 1px;height: clamp(10px, 1.4vw, 12px);background: var(--border-color01);margin-inline: clamp(20px, 4vw, 40px);} .board-view .file-desc dd{width: 100%;font-size: var(--text-17);color: var(--black-color08);} .board-view .item-desc{display: flex; align-items: baseline; gap: 4px;} .board-view .item-desc dt{flex-shrink: 0;color: var(--black-color01);display: none;} .board-view .item-desc dd{width: 100%;} /* 문의 레이아웃 */ .contact-wrap{position: relative;display: flex;align-items: flex-start;gap: var(--row-gap40) clamp(40px, 4.2vw, 80px);} .contact-wrap .sticky-box{position: sticky;top: 150px;width: min(520px, 33%);flex-shrink: 0;padding: clamp(30px, 6vw, 60px) clamp(25px, 5vw, 50px);border-radius: var(--radius-20);overflow: hidden;display: flex;flex-direction: column;justify-content: space-between;min-height: clamp(400px, 66.2dvh, 603px);gap: var(--row-gap40);} .contact-wrap .sticky-box .bg{position: absolute; inset: 0; overflow: hidden;} .contact-wrap .sticky-box .bg img{width: 100%; height: 100%; object-fit: cover;} .contact-wrap .sticky-box .title{position: relative;filter: var(--filter-white);display: grid;gap: var(--row-gap30);} .contact-wrap .sticky-box .title h4{font-size: var(--text-60);font-weight: 600;line-height: 1.3;} .contact-wrap .sticky-box .title h5{font-size: var(--text-22);font-weight: 400;line-height: 1.6;} .contact-wrap .sticky-box .exp{position: relative;display: grid;gap: clamp(12px, 1.6vw, 16px);} .contact-wrap .sticky-box .exp-desc{filter: var(--filter-white);font-family: var(--font-type02);display: flex;align-items: baseline;font-size: var(--text-20);font-weight: 500;gap: clamp(15px, 2vw, 20px);} .contact-wrap .sticky-box .exp-desc dt{flex-shrink: 0;} .contact-wrap .sticky-box .exp-desc dd{opacity: 0.8;} .contact-wrap #contactForm{width: 100%;} @media (max-width:1024px) { .contact-wrap{flex-wrap: wrap;} .contact-wrap .sticky-box{position: relative;inset: auto;width: 100%;flex-shrink: unset;min-height: clamp(300px, 50vw, 500px);} } /* 문의 */ .write-form{position: relative;display: flex;flex-wrap: wrap;gap: clamp(20px, 3vw, 30px) clamp(30px, 2.1vw, 40px);} .write-form .desc{display:flex;flex-direction: column;gap: 10px 16px;width: calc(100% / 2 - clamp(30px, 2.1vw, 40px) / 2);} .write-form .desc:has(textarea, [name="captcha_answer"], #attachment, [type="radio"], [type="checkbox"]){width:100%;} .write-form .desc dt{font-size: var(--text-20);font-weight: 500;color: var(--black-color03);} .write-form .desc dt label{cursor: pointer;} .write-form .desc dt em{color: var(--point-color12);} .write-form .desc dd{position: relative;display: flex; align-items: center; gap: 5px;flex-wrap: wrap;color: var(--black-color08);font-size: var(--text-18); width: 100%;} .write-form .desc dd:has(.noti-txt){column-gap: clamp(15px, 2vw, 20px);} .write-form :where([type="text"], [type="password"], [type="tel"], [type="email"], [type="number"], textarea, select){width: 100%;} .write-form select{width: min(260px, 100%);} .bf-file-wrap{position: relative;display: flex;align-items: center;width: min(480px, 100%);padding-left: clamp(15px, 2vw, 20px);height: clamp(45px, 5.7vw, 52px);background: var(--point-white);box-shadow: inset 0 0 0 1px var(--border-color01);border-radius: var(--radius-06);color: var(--black-color01);font-size: var(--text-18);gap: 20px;} .bf-file-enhanced{display: none;} .bf-file-btn{display: flex;align-items: center;justify-content: center;min-width: clamp(90px, 12vw, 110px);height: 100%;text-align: center;background: var(--point-white);font-size: var(--text-18);font-weight: 400;color: var(--black-color00);border: 1px solid var(--black-color00);padding: 10px 20px;cursor: pointer;order: 1;flex-shrink: 0;border-radius: var(--radius-06);} .bf-file-name{font-size: var(--text-18);font-weight: 400;color: var(--black-color05);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 100%;} .inp-list{display: flex;flex-wrap: wrap;gap: clamp(15px, 2vw ,20px) clamp(30px, 4vw, 40px);width: min(1100px, 100%);} .inp-list > li{position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 10px;} .inp-list [type="text"]{width: 280px;} .captcha-box{display: flex;align-items: center;gap: 10px;width: 100%;} .captcha-box .controller{display: flex;flex-shrink: 0;gap: 10px;width: clamp(200px, 27vw, 270px);} .captcha-box .controller img{border: 1px solid var(--border-color01);border-radius: var(--radius-06);width: 100%;object-fit: cover;} .captcha-box .controller button{position: relative;width: clamp(45px, 6.5vw, 60px);aspect-ratio: auto 1;border: 1px solid var(--border-color02);display: flex;align-items: center;justify-content: center;border-radius: var(--radius-06);flex-shrink: 0;} .captcha-box .controller button::before{display: inline-flex;content: '';mask: url('/images/reset-i.svg') no-repeat center / 100% auto;background: var(--black-color00);width: clamp(18px, 2.2vw, 20px);aspect-ratio: auto 1;} .agree-desc{margin-top: var(--row-gap50);display: grid;gap: var(--row-gap30);} .agree-desc dt{position: relative;} .agree-desc textarea{font-size: var(--text-15);font-weight: 400;color: var(--black-color07);line-height: 1.73;height: clamp(130px, 16vw, 160px);} .agree-list > li{display: flex;flex-direction: column;gap: clamp(15px, 2vw, 20px);} .agree-list .detail-view{position: relative;font-size: var(--text-17);font-weight: 400;color: var(--black-color03);display: flex;align-items: center;gap: 5px;} .agree-list .detail-view::before{position:absolute;content:'';width: 100%;height: 1px;background: currentColor;left: 0;bottom: 0;} .agree-list .detail-view::after{display: inline-flex;content:'';inline-size: clamp(9px, 1.4vw, 12px);aspect-ratio: auto 1;clip-path: var(--clip-poly02);border: 2px solid currentColor;rotate: -45deg;border-radius: 2px;translate: 0 clamp(-1px, -0.2vw , 0px);} @media (min-width:1025px) { .write-form:has(#categories[class*="hidden"]) .desc:has(#inquiry-type){margin-right: 1px;} } @media (max-width:1024px) { .write-form .desc{width:100%;} } @media (max-width:640px) { .write-form .desc{flex-wrap: wrap;} .write-form .desc dt{width: 100%; flex-shrink: unset;} } @media (max-width:479px) { .captcha-box{flex-wrap: wrap;} .captcha-box [type="text"]{width:100%;} } /*─────────────────────────────────────────────────────────── Sub ───────────────────────────────────────────────────────────*/ /* sub-visual */ body:has(.sub-visual) #header{position: fixed;} body:has(.sub-visual) #header:not(.on){background: none;} body:has(.sub-visual) #header:not(.on) :where(.logo, .gnb > li > a, .utility){filter: var(--filter-white);} .sub-visual{position: relative;overflow: hidden;min-height: clamp(620px, 98vw, 980px);display: flex;flex-direction: column;justify-content: center;padding-block: var(--row-gap150);} .sub-visual .thumb{position: absolute;inset: 0;overflow: hidden; scale: 1.1; transition: all 5s;} .sub-visual.on .thumb{scale: 1;} .sub-visual .thumb :where(img, video){width: 100%;height: 100%;object-fit: cover;} .sub-visual .thumb:has(video)::before{position: absolute; content:''; inset: 0; background: rgb(0 0 0 / 50%);} .sub-visual .cont{position: relative;} .sub-visual .title{position: relative;filter: var(--filter-white);display: grid;gap: var(--row-gap20);} .sub-visual .title h2{font-size: var(--text-24);font-weight: 600;} .sub-visual .title h2 + h3{margin-top: var(--row-gap20);} .sub-visual .title h3{font-size: var(--text-76);font-weight: 700;line-height: 1.3;} .sub-visual .title h3 + h4{margin-top: var(--row-gap20);} .sub-visual .title h4{font-size: var(--text-24);font-weight: 400;} .sub-visual .title h4 strong{font-weight: 600;} .sub-visual .title h5{font-size: var(--text-22);font-weight: 700;} .sub-visual .circle-list{display: flex;flex-wrap: wrap;gap: clamp(10px, 2vw, 20px);margin-top: var(--row-gap40);} .sub-visual .circle-list > li{display: flex;align-items: center;justify-content: center;text-align: center;inline-size: clamp(100px, 14vw, 140px);aspect-ratio: auto 1;border: 1px solid rgb(255 255 255 / 30%);border-radius: 100%;font-size: var(--text-22);font-weight: 400;padding: 10px;overflow: hidden;} /* btn-box */ .btn-box{position: relative;display: flex;justify-content: center; margin-top: var(--row-gap80);} .btn-box.left{justify-content:flex-start;} .btn-box.right{justify-content:flex-end;} .btn-box :where(button, a){position: relative;display: flex;align-items: center;justify-content: center;text-align: center;min-width: clamp(135px, 21vw, 200px);min-height: clamp(46px, 6.9vw, 64px);background: var(--point-white);border: 1px solid var(--black-color03);border-radius: var(--radius-10);font-size: var(--text-20);font-weight: 600;padding: 10px clamp(20px, 3vw, 30px);} .btn-box :where(button, a).wh{border-color: var(--point-white);} .btn-box :where(button, a) span{display: flex;align-items: center;transition: all 0.4s;} .btn-box :where(button, a) span::after{display: inline-flex;content:'';inline-size: clamp(10px, 1.4vw, 12px);aspect-ratio: auto 1;border: 2px solid currentColor;clip-path: var(--clip-poly02);rotate: -45deg;border-radius: 2px;margin-left: clamp(-11px, -1.3vw, -10px);opacity: 0;transition: inherit;} .btn-box.sm :where(button, a){min-width: clamp(135px, 17vw, 160px);} .btn-box :where(button, a).pt01{background: var(--point-color02);border-color: var(--point-color02);color: var(--point-white);font-weight: 500;} @media (hover:hover) and (pointer: fine) { .btn-box :where(button, a):hover span{translate: -5px;} .btn-box :where(button, a):hover span::after{translate: 12px;opacity: 1;} } /* sec-cate */ .sec-cate{position: sticky;top:0;background: var(--point-white);box-shadow: inset 0 -1px var(--border-color01);z-index: 50;} .sec-cate .item-list{width: 100%;display: flex; scrollbar-width: none;} .sec-cate .item-list::-webkit-scrollbar {display: none; } .sec-cate .item-list > li{position:relative;width: 100%;display: flex;text-align: center;font-size: var(--text-18);color: var(--black-color06);line-height: 1.6;transition: all 0.4s;} .sec-cate .item-list > li > a{display: flex;align-items: center;justify-content: center;width: 100%;min-height: clamp(55px, 7.5vw, 70px);padding: 10px 15px;} .sec-cate .item-list > li.on:not(:has(~ .on)){color: var(--point-color02);-webkit-text-stroke: clamp(0.2px, 0.04vw, 0.4px) var(--point-color02);box-shadow: inset 0 -2px var(--point-color01);} @media (max-width:767px) { .sec-cate .item-list{overflow: hidden;overflow-x: auto;gap: 5px;scroll-behavior: smooth;} .sec-cate .item-list > li{width: auto; flex-shrink: 0;} } /* info-title */ .info-title{position: relative;display: flex;flex-direction: column;gap: var(--row-gap30);} .info-title.hd{margin-bottom: var(--row-gap80);} .info-title.hd-m{margin-bottom: var(--row-gap60);} .info-title.hd-s{margin-bottom: var(--row-gap30);} .info-title.cen{text-align: center; text-wrap: balance;} .info-title h2{font-size: var(--text-20);font-weight: 500;line-height: 1.6;} .info-title h2 em{font-weight: 600;font-family: var(--font-type02);background: var(--point-grad02);background-clip: text;color: var(--trans-color);} .info-title h3{font-size: var(--text-46);font-weight: 300;color: var(--black-color00);line-height: 1.3;} .info-title h3 strong{font-weight: 600;} .info-title h4{font-size: var(--text-20); font-weight: 400; line-height: 1.6; color: var(--black-color03);} .info-title h4 em{font-weight:600; color: var(--point-color02);} .info-title h4.lg{font-size: var(--text-22);} /* vision-meta */ .vision-meta{display: flex;gap: var(--row-gap40) clamp(50px, 5.21vw, 100px);} .vision-meta .thumb{width: min(787px, 50%);flex-shrink: 0;border-radius: var(--radius-20);overflow: hidden;} .vision-meta .thumb img{width:100%;height: 100%;object-fit: cover;} .vision-meta .title{position: relative;width: 100%;display: flex;flex-direction: column;justify-content: center;gap: var(--row-gap35);padding-block: 20px;} .vision-meta .title h4{font-size: var(--text-30);font-weight: 500;color: var(--black-color00);line-height: 1.5;} .vision-meta .title h5{font-size: var(--text-18);font-weight: 400;color: var(--black-color05);line-height: 1.6;} @media (max-width:1024px) { .vision-meta{flex-wrap:wrap;} .vision-meta .thumb{width:100%;} .vision-meta .title{padding-block:0;} } /* txtSwiper */ .txtSwiper{position: relative;} .txtSwiper .swiper-wrapper{transition-timing-function: linear;} .txtSwiper .swiper-slide{position: relative;width: auto;height: auto;font-size: clamp(50px, 14vw, 140px);font-weight: 700;color: var(--border-color01);opacity: 0.5;} /* archite-meta */ .archite-meta{position: relative;} .archite-meta .step-list{position: relative;counter-reset: step-list -1;display: grid;grid: auto / repeat(6, 1fr);gap: var(--col-gap20);padding-bottom: calc(clamp(25px, 4.2vw, 40px) + 28px);} .archite-meta .step-list > li{position: relative;text-align: center;border: 2px dashed var(--point-color03);border-radius: var(--radius-20);padding: clamp(15px, 2vw, 20px);background: var(--point-white);} .archite-meta .step-list > li::before{position: absolute;content:'';width: calc(100% + var(--col-gap20) + 5px);height: calc(clamp(25px, 4.2vw, 40px) + 1px);border: 1px solid var(--border-color02);top: calc(100% + 20px + clamp(8px, 1.2vw, 10px) + 2px);margin-top: -2px;left: 50%;clip-path: inset(2px -10px -10px -10px);} .archite-meta .step-list > li:first-child::before{border-radius: 0 0 0 var(--radius-20);} .archite-meta .step-list > li:has(+ :last-child)::before{border-radius: 0 0 var(--radius-20);} .archite-meta .step-list > li:last-child::before{display: none;} .archite-meta .step-list > li::after{position: absolute;content:'';inline-size: clamp(8px, 1.2vw, 10px);aspect-ratio: auto 1;border: 1px solid var(--border-color02);border-radius: 100%;background: var(--point-color04);top: calc(100% + 22px);left: 50%;translate: -50%;} .archite-meta .step-list .desc{display: grid;gap: var(--row-gap20);} .archite-meta .step-list .desc dt{font-size: var(--text-25);font-weight: 600;color: var(--point-color02);display: grid;gap: var(--row-gap10);} .archite-meta .step-list .desc dt::before{content: counter(step-list, decimal-leading-zero);counter-increment: step-list;font-size: var(--text-18);font-weight: 400;color: var(--black-color05);font-family: var(--font-type02);} .archite-meta .step-list .desc dd{font-size: var(--text-18);font-weight: 400;color: var(--black-color03);line-height: 1.6;display: grid;gap: 10px;} .archite-meta .step-list .desc dd span{display: flex;align-items: center;justify-content: center;background: var(--gray-bg01);border-radius: 50px;padding: 6px 15px;} .archite-meta .step-list .desc dd span.pt01{color: var(--point-color04); font-weight: 600; background: var(--point-color05);} .archite-meta .step-list > li.pt01{border:2px solid var(--point-color04); box-shadow: var(--shadow-03);} .archite-meta .step-list > li.pt01 .desc dt{color: var(--point-color04);} .archite-meta .result{position: relative;background: var(--point-grad03);padding: clamp(20px, 3vw, 30px);border-radius: var(--radius-20);text-align: center;display: grid;gap: var(--row-gap20);margin-top: clamp(25px, 4vw, 40px);} .archite-meta .result::before{position: absolute;content:'';width: 1px;height: clamp(26px, 4vw, 40px);background: var(--border-color02);left: 50%;bottom: 100%;margin-left: -0.5px;} .archite-meta .result .title-desc{filter: var(--filter-white);display: grid;gap: 4px;} .archite-meta .result .title-desc dt{font-size: var(--text-20);font-weight: 500;} .archite-meta .result .title-desc dd{font-size: var(--text-30);font-weight: 700;} .archite-meta .result .item-list{display: grid;grid: auto / repeat(3, 1fr);gap: var(--col-gap20);} .archite-meta .result .item-list > li{position: relative;background: var(--point-white);border-radius: var(--radius-20);padding: 20px;font-size: var(--text-18);font-weight: 400;color: var(--black-color03);display: flex;flex-direction: column;gap: var(--row-gap10);} .archite-meta .result .item-list em{font-size: var(--text-18);font-weight: 600;color: var(--point-color04);border: 1px solid var(--point-color04);border-radius: 50px;width: fit-content;margin-inline: auto;padding: 2px 10px;} @media (min-width:1025px) { .archite-meta .step-list .desc dt{font-size: clamp(20px, 1.4vw, 25px);} .archite-meta .step-list .desc dd{font-size: clamp(13px, 1vw, 18px);} } @media (max-width:1024px) { .archite-meta .step-list{grid: auto / repeat(3, 1fr);} .archite-meta .step-list > li:nth-child(n+1):nth-child(-n+3)::before{width: 1px;height: 17px;top: calc(100% + 2px);} .archite-meta .step-list > li:nth-child(4)::before{border-radius: 0 0 0 var(--radius-20);} } @media (max-width:479px) { .archite-meta .step-list{grid: auto / repeat(2, 1fr);} .archite-meta .step-list > li:nth-child(n+1):nth-child(-n+4)::before{width: 1px;height: 17px;top: calc(100% + 2px);} .archite-meta .step-list > li:nth-child(5)::before{border-radius: 0 0 var(--radius-20) var(--radius-20);} .archite-meta .result .item-list{grid: auto / repeat(2, 1fr);} } /* streng-meta */ .streng-meta{position: relative; background: url('/images/streng-meta.jpg') no-repeat center / cover; padding-block: var(--row-gap140) 187px;} .streng-meta .info-title{filter: var(--filter-white);} .streng-meta .circle-wrap{position: relative;inline-size: min(800px, 100%);aspect-ratio: auto 1;margin-inline: auto;margin-top: -34px;border: 1px solid rgb(255 255 255 / 10%);border-radius: 100%;display: flex;align-items: center;justify-content: center;} .streng-meta .circle{position: relative;width: min(500px, 100%);aspect-ratio: auto 1;border: 2px dashed rgb(255 255 255 / 30%);border-radius: 100%;display: flex;align-items: center;justify-content: center;} .streng-meta .circle .inr{width: calc(100% - clamp(25px, 3.5vw, 35px) * 2);aspect-ratio: auto 1;background: var(--point-color06);border-radius: inherit;display: flex;align-items: center;justify-content: center;} .streng-meta .circle .title{position: relative;background: var(--point-color02);width: min(240px, 85%);height: min(240px, 85%);border-radius: inherit;display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;padding: 20px;} .streng-meta .circle .title h4{position: relative;font-size: var(--text-46);font-weight: 500;color: var(--point-white);} .streng-meta .bullet{position: absolute;inline-size: 16px;aspect-ratio: auto 1;border-radius: 100%;background: var(--point-color02);border: 2px solid var(--point-white);top: 50%;left: 50%;translate: -50% -50%;transform: translateY(-250px);rotate: 280deg;} .streng-meta .item-list > li{position: absolute;top: 13%;right: 50%;margin-right: 274px;border: 2px solid var(--point-color02);border-radius: var(--radius-20);background: var(--point-color07);width: clamp(250px, 22vw, 420px);padding: clamp(25px, 3vw, 30px);} .streng-meta .item-list .desc{position: relative;filter: var(--filter-white);display: grid;gap: var(--row-gap10);} .streng-meta .item-list .desc dt{font-size: var(--text-30);font-weight: 600;line-height: 1.6;display: flex;flex-wrap: wrap;align-items: center;gap: 10px;} .streng-meta .item-list .desc dt small{font-size: max(14px, 66.7%);} .streng-meta .item-list .desc dd{font-size: var(--text-18);line-height: 1.6;} .streng-meta .bullet.nth02{rotate: 60deg;} .streng-meta .bullet.nth03{rotate: 97deg;} .streng-meta .bullet.nth04{rotate: 162deg;} .streng-meta .bullet.nth05{rotate: 234deg;} .streng-meta .item-list > li:nth-child(2){top: 12%;right: auto;left: 50%;margin-inline: 260px 0;} .streng-meta .item-list > li:nth-child(3){top: 53%; right: auto; left: 50%; margin-inline: 280px 0;} .streng-meta .item-list > li:nth-child(4){top: 84%; right: auto; left: 50%; margin-inline: 100px 0;} .streng-meta .item-list > li:nth-child(5){top: 68%;margin-right: 235px;} @media (min-width:1101px) { .streng-meta .item-list .desc dt{font-size: clamp(20px, 1.6vw, 30px);} .streng-meta .item-list .desc dd{font-size: clamp(16px, 1vw, 18px);} } @media (max-width:1100px) { .streng-meta .circle-wrap{border:0;flex-direction: column;gap: var(--row-gap40);margin-top: var(--row-gap80);width: 100%;} .streng-meta .bullet{display: none;} .streng-meta .item-list{width: 100%;display: grid;gap: var(--row-gap20);} .streng-meta .item-list > li{position: relative;inset: auto !important;margin-inline: 0 !important;width: 100%;} } /* realize-meta */ .realize-meta{position: relative;} .realize-meta .line{position: absolute;top: 260px;left: 0;width: 100%;height: 1px;background: var(--gray-bg05);overflow: hidden;} .realize-meta .line em{position: absolute;top: 0;left: 0;width: 10%;height: 100%;background: var(--point-color02);} .realize-meta .item-list{display: grid;grid: auto / repeat(5, 1fr);gap: var(--row-gap60) var(--col-gap60);} .realize-meta .item-list > li{position: relative;text-align: center;display: flex;flex-direction: column;gap: var(--row-gap30);} .realize-meta .item-list .icon{inline-size: min(clamp(100px, 16vw, 160px), 100%);aspect-ratio: auto 1;border-radius: 100%;background: var(--gray-bg01);display: flex;align-items: center;justify-content: center;margin-inline: auto;padding: 25px;overflow: hidden;} .realize-meta .item-list .desc{display: grid;gap: 72px;} .realize-meta .item-list .desc dt{font-size: var(--text-26);font-weight: 500;color: var(--black-color00);line-height: 1.3;} .realize-meta .item-list .desc dd{position: relative; font-size: var(--text-20);color: var(--black-color05);line-height: 1.6;} .realize-meta .item-list .desc dd::before{position: absolute;content:'';width: 12px;aspect-ratio: auto 1; background: var(--black-color10); border-radius: 100%;left: 50%;bottom: calc(100% + 36px);translate: -50% 50%;} .realize-meta .item-list > li.on .desc dd::before{background: var(--point-color02);box-shadow: 0 0 0 8px var(--point-color08);} @media (min-width:1025px) { .realize-meta .item-list .desc dd{font-size: clamp(16px, 1.1vw, 20px);} } @media (max-width:1024px) { .realize-meta .line{display: none;} .realize-meta .item-list{grid: auto / repeat(3, 1fr);} .realize-meta .item-list .desc{gap: var(--row-gap30);} .realize-meta .item-list .desc dd{border-top: 1px solid var(--gray-bg05); padding-top: var(--row-gap30);} .realize-meta .item-list .desc dd::before{display: none;} } @media (max-width:640px) { .realize-meta .item-list{grid: auto / repeat(2, 1fr);} } /* solution-meta */ .solution-meta{position: relative;padding-block: var(--row-gap160) 260px;} .solution-meta .bg{position: absolute;inset: 0;clip-path: inset(0);} .solution-meta .bg img{position: fixed;inset: 0;width: 100%;height: 100%;object-fit: cover;} .solution-meta .cont{display: flex;align-items: flex-start;gap: var(--row-gap80);} .solution-meta .info-title{position: sticky;top: 150px;filter: var(--filter-white);width: 100%;} .solution-meta .item-list{position: relative;width: min(844px, 55%);flex-shrink: 0;display: grid;grid: auto / repeat(2, 1fr);gap: clamp(15px, 2.4vw, 44px);} .solution-meta .item-list > li{position: relative;background: var(--point-white);padding: clamp(25px, 3vw, 30px);border-radius: var(--radius-20);display: flex;flex-direction: column;gap: clamp(20px, 3.4vw, 34px);justify-content: space-between;} .solution-meta .item-list > li:nth-child(2n){translate:0 100px;} .solution-meta .item-list .desc{display: grid;gap: var(--row-gap20);} .solution-meta .item-list .desc dt{font-size: var(--text-34);font-weight: 600;color: var(--black-color03);line-height: 1.3;display: grid;gap: var(--row-gap20);} .solution-meta .item-list .desc dt em{font-size: var(--text-20);font-weight: 600;color: var(--point-color02);line-height: 1.6;font-family: var(--font-type02);} .solution-meta .item-list .desc dd{font-size: var(--text-20);color: var(--black-color05);} .solution-meta .item-list .thumb{display: block;border-radius: var(--radius-20);overflow: hidden;aspect-ratio: auto 1.63;} .solution-meta .item-list .thumb img{width: 100%;height: 100%;object-fit: cover;} @media (min-width:1025px) { .solution-meta .info-title h3{font-size: clamp(32px, 2.4vw, 46px);} .solution-meta .item-list .desc dt{font-size: clamp(22px, 1.9vw, 34px);} .solution-meta .item-list .desc dt em{font-size: clamp(16px, 1.1vw, 20px);} .solution-meta .item-list .desc dd{font-size: clamp(16px, 1.1vw, 20px);} } @media (max-width:1024px) { .solution-meta{padding-block: var(--row-gap160);} .solution-meta .cont{flex-wrap: wrap;} .solution-meta .info-title{position: relative; inset: auto;} .solution-meta .item-list{width: 100%; flex-shrink: unset;} .solution-meta .item-list > li:nth-child(2n){translate: 0;} } @media (max-width:640px) { .solution-meta .item-list{grid: auto / repeat(1, 1fr);} } /* why-list */ .why-list{display: grid;grid: auto / repeat(3, 1fr);gap: var(--col-gap50);padding-top: 60px;} .why-list > li{position: relative;border: 1px solid var(--border-color01);border-radius: var(--radius-20);background: var(--point-white);padding: clamp(35px, 2.61vw, 50px);display: flex;flex-direction: column;justify-content: space-between;gap: var(--row-gap40);} .why-list > li:nth-child(1){translate: 0 -30px;} .why-list > li:nth-child(2){translate: 0 -80px;} .why-list .desc{display: grid;gap: var(--row-gap20);} .why-list .desc dt{font-size: var(--text-34);font-weight: 600;color: var(--black-color00);line-height: 1.6;} .why-list .desc dd{font-size: var(--text-22);color: var(--black-color03);line-height: 1.6;} .why-list .icon{display: flex;justify-content: flex-end;width: 50%;margin-left: auto;} .why-list.type02{grid: auto / repeat(4, 1fr);gap: clamp(15px, 1.7vw, 32px);} .why-list.type02 > li{translate: 0 !important;padding: var(--row-gap40);gap: clamp(20px, 4vw, 40px);} .why-list.type02 .desc{gap: var(--row-gap10);} .why-list.type02 .desc dt{font-size: var(--text-30);} .why-list.type02 .desc dd{font-size: var(--text-20);color: var(--black-color04);} .why-list.type02 .icon{width: clamp(70px, 14.5vw, 140px);} .why-list.type02.opposite > li{flex-direction: column-reverse;text-align: center;gap: var(--row-gap20);justify-content: center;padding: clamp(20px, 5vw, 50px);} .why-list.type02.opposite .icon{margin-inline: auto;} @media (min-width:1025px) { .why-list.type02.array03{grid: auto / repeat(3, 1fr);} } @media (max-width:1200px) { .why-list.type02{grid: auto / repeat(2, 1fr);} } @media (max-width:1024px) { .why-list{grid: auto / repeat(2, 1fr);} .why-list > li{translate: 0 !important;padding: clamp(25px, 5vw, 50px);} } @media (max-width:640px) { .why-list{grid: auto / repeat(1, 1fr);} .why-list.type02{grid: auto / repeat(1, 1fr);} } /* btm-bnr */ .btm-bnr{position: relative;min-height: clamp(400px, 60vw, 600px);display: flex;flex-direction: column;justify-content: center;padding-block: var(--row-gap160);} .btm-bnr .bg{position: absolute;inset: 0;overflow: hidden;} .btm-bnr .bg img{width: 100%;height: 100%;object-fit: cover;} .btm-bnr .title{position: relative;filter: var(--filter-white);text-align: center;display: grid;gap: var(--row-gap20);} .btm-bnr .title h2{font-size: var(--text-22);font-weight: 600;line-height: 1.6;} .btm-bnr .title h3{font-size: var(--text-60);font-weight: 700;} /* sec-title */ .sec-title{position: relative;text-align: center;display: grid;gap: var(--row-gap20);text-wrap: balance;} .sec-title.hd{margin-bottom: var(--row-gap80);} .sec-title.hd-m{margin-bottom: var(--row-gap60);} .sec-title h2{font-size: var(--text-60);font-weight: 600;color: var(--black-color00);line-height: 1.3;} .sec-title h2 em{background: var(--point-grad02);background-clip: text;color: var(--trans-color);font-weight: 800;display: inline-block;} .sec-title h3{font-size: var(--text-22);font-weight: 400;color: var(--black-color03);line-height: 1.6;} /* img-shadow */ .img-shadow{position: relative;border-radius: var(--radius-20);box-shadow: var(--shadow-04);overflow: hidden;width:min(1000px, 100%);margin-inline: auto;} .img-shadow::before{position: absolute;content: '';inset: 0;border: clamp(2px, 0.6vw, 4px) solid var(--gray-bg01);border-radius: inherit;} .img-pd{padding: clamp(25px ,3vw, 30px);border-radius: var(--radius-20);background: var(--gray-bg01);overflow: hidden;} .img-pd img{border-radius: var(--radius-10);box-shadow: var(--shadow-04);} .bg-wrap{position: relative;padding-bottom: var(--row-gap120);} .bg-wrap::before{position: absolute;content:'';width: min(1600px, 110vw);height: clamp(180px, 30vw, 300px);background: var(--gray-bg01);left: 50%;bottom: 0;translate: -50%;border-radius: var(--radius-20);} .bg-wrap.h460::before{height: clamp(180px, 46vw, 460px);} .imgsha-list{width:min(1000px, 100%);margin-inline: auto; display: grid; grid: auto / repeat(3, 1fr); gap: var(--col-gap20);} .img-shadow +.imgsha-list{margin-top: var(--col-gap20);} /* feature-step */ .feature-step{counter-reset: item;display: grid;grid: auto / repeat(3, 1fr);gap: clamp(15px, 1.7vw, 32px);} .feature-step > li{position: relative;border: 1px solid var(--border-color01);border-radius: var(--radius-20);padding: var(--row-gap40);display: flex;flex-direction: column;gap: clamp(20px, 4vw, 40px);align-items: flex-start;} .feature-step > li::before{content: counter(item, decimal-leading-zero);counter-increment: item;font-size: var(--text-22);font-weight: 400;color: var(--point-white);display: inline-flex;align-items: center;justify-content: center;min-width: clamp(36px, 5.5vw, 50px);min-height: clamp(36px, 5.5vw, 50px);border-radius: var(--radius-10);background: var(--point-color04);text-align: center;padding: 5px;padding-top: 6px;} .feature-step .desc{display: grid;gap: var(--row-gap20);width: 100%;} .feature-step .desc dt{font-size: var(--text-32);font-weight: 600;color: var(--black-color00);line-height: 1.6;} .feature-step .desc dd{font-size: var(--text-22);color: var(--black-color03);line-height: 1.6;} @media (max-width:860px) { .feature-step{grid: auto / repeat(2, 1fr);} } @media (max-width:479px) { .feature-step{grid: auto / repeat(1, 1fr);} } /* rel-bg */ .rel-bg{position: relative; padding-block: var(--row-gap180);} .rel-bg.type02{border-radius: var(--radius-20); overflow: hidden;} .rel-bg .bg{position: absolute; inset: 0; overflow: hidden;} .rel-bg .bg img{width: 100%; height: 100%; object-fit: cover;} .rel-bg .info-title{filter: var(--filter-white);} /* feature-list */ .feature-list{display: grid;grid: auto / repeat(4, 1fr);overflow: hidden; gap: var(--row-gap60) 0;} .feature-list > li{position: relative;text-align: center;display: flex;flex-direction: column;gap: clamp(20px, 4vw, 40px);box-shadow: 1px 0 rgb(255 255 255 / 20%);padding: 30px 15px;text-wrap: balance;} .feature-list .icon{position: relative;display: flex;align-items: center;justify-content: center;inline-size: clamp(55px, 7.2vw, 70px);aspect-ratio: auto 1;overflow: hidden;padding: 13px;border-radius: var(--radius-16);background: rgb(255 255 255 / 20%);margin-inline: auto;} .feature-list .icon::before{position: absolute;content:'';inset: 0;padding: 1px;border-radius: inherit;background: linear-gradient(240deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 60%) 45%, rgb(255 255 255 / 60%) 55%, rgb(255 255 255 / 0%) 100%);mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);mask-composite: exclude;pointer-events: none;} .feature-list .desc{filter: var(--filter-white);display: grid;gap: var(--row-gap20);} .feature-list .desc dt{font-size: var(--text-30);font-weight: 600;line-height: 1.6;} .feature-list .desc dd{font-size: var(--text-20);line-height: 1.6;} .feature-list.array05{grid: auto / repeat(5, 1fr);} @media (max-width:1300px) { .feature-list.array05{grid: auto / repeat(3, 1fr);} } @media (max-width:1024px) { .feature-list{grid: auto / repeat(2, 1fr);} } @media (max-width:640px) { .feature-list.array05{grid: auto / repeat(2, 1fr);} } @media (max-width:479px) { .feature-list{grid: auto / repeat(1, 1fr);gap: 0;} .feature-list.array05{grid: auto / repeat(1, 1fr);} .feature-list > li + li{border-top: 1px solid rgb(255 255 255 / 20%);} .feature-list > li:last-child{padding-bottom:0;} } /* chk-items */ .chk-items{display: grid;grid: auto / repeat(3, 1fr);gap: clamp(15px, 1.6vw, 28px);} .chk-items > li{position: relative;border: 1px solid var(--border-color01);border-radius: var(--radius-10);background: var(--point-white);padding: clamp(25px, 3vw, 30px);font-size: var(--text-18);font-weight: 400;color: var(--black-color06);line-height: 1.6;display: flex;flex-direction: column;gap: clamp(12px, 1.6vw, 16px);text-wrap: balance;} .chk-items > li::before{display: inline-flex;content:'';width: clamp(22px, 3vw, 28px);aspect-ratio: auto 1;border-radius: 100%;background: var(--point-color04) url('/images/chk-i.svg') no-repeat center / clamp(10px, 1.4vw, 12px) auto;} .chk-items .exp-desc{display: grid;gap: var(--row-gap10);} .chk-items .exp-desc dt{font-size: var(--text-22);font-weight: 500;color: var(--black-color00);} .chk-items .exp-desc dd{position: relative;} .chk-items.type02{grid: auto / repeat(2, 1fr);} .chk-items.type02 > li::before{display: none;} .chk-items.type02 .exp-desc dt{display: flex;align-items: center;gap: 10px;} .chk-items.type02 .exp-desc dt::before{display: inline-flex;content:'';width: clamp(22px, 3vw, 28px);aspect-ratio: auto 1;border-radius: 100%;background: var(--point-color04) url('/images/chk-i.svg') no-repeat center / clamp(10px, 1.4vw, 12px) auto;flex-shrink: 0;} @media (max-width:860px) { .chk-items{grid: auto / repeat(2, 1fr);} } @media (max-width:479px) { .chk-items.type02{grid: auto / repeat(1, 1fr);} .chk-items{grid: auto / repeat(1, 1fr);} } /* key-anchor */ .key-anchor{position: relative;display: flex;align-items: flex-start;clip-path: inset(0 -200%);gap: clamp(50px, 5.21vw, 100px);} .key-anchor::before{position:absolute;content:'';width: 150vw;height: 1px;background: var(--border-color01);top: 0;left: 50%;translate: -50%;} .key-anchor .sticky-list{position: sticky;top: 0;padding-block: var(--row-gap140);width: clamp(250px, 25%, 400px);flex-shrink: 0;display: grid;gap: var(--row-gap30);padding-right: 50px;} .key-anchor .sticky-list::before{position:absolute;content:'';width: 1px;height: 100dvh;top: 0;right: 0;background: var(--border-color01);} .key-anchor .sticky-list > li{position: relative;font-size: var(--text-30);font-weight: 600;color: var(--black-color08);line-height: 1.3;display: flex;align-items: center;gap: 20px;transition: all 0.4s;cursor: pointer;} .key-anchor .sticky-list > li::after{display:inline-flex;content:'';inline-size: 18px;aspect-ratio: auto 1;border: 2px solid currentColor;clip-path: var(--clip-poly02);rotate: -45deg;border-radius: 2px;flex-shrink: 0;opacity: 0;transition: inherit;} .key-anchor .sticky-list > li.on:not(:has(~ .on)){font-size: var(--text-40);color: var(--point-color02);-webkit-text-stroke: 0.2px var(--point-color02);} .key-anchor .sticky-list > li.on:not(:has(~ .on))::after{opacity:1;} .key-anchor .info{position: relative;width: 100%;padding-block: var(--row-gap140) var(--row-gap180);display: flex;flex-direction: column;gap: var(--row-gap120);} .key-anchor .info article{position: relative;display: grid;gap: var(--row-gap30);} .key-anchor .title-desc{display: flex;align-items: center;flex-wrap: wrap;gap: clamp(15px, 2vw, 20px); margin-bottom: var(--row-gap10);} .key-anchor .title-desc dt{font-size: var(--text-36);font-weight: 600;color: var(--black-color00);line-height: 1.3;display: flex;align-items: center;gap: inherit;} .key-anchor .title-desc dt i{display: flex;align-items: center;justify-content: center;inline-size: clamp(45px, 6.2vw, 60px);aspect-ratio: auto 1;border-radius: var(--radius-10);background: var(--point-color02);overflow: hidden;flex-shrink: 0;padding: 10px;} .key-anchor .title-desc dd{font-size: var(--text-18);font-weight: 500;color: var(--point-color04);font-family: var(--font-type02);line-height: 1.3;} @media (max-width:1024px) { .key-anchor .sticky-list{display: none;} } /* flow-step */ .flow-step{counter-reset: flow-step;display: grid;grid: auto / repeat(4, 1fr);} .flow-step > li{position: relative;aspect-ratio: auto 1;box-shadow: inset 0 0 0 2px var(--border-color01);border-radius: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;margin-inline: -1px;gap: var(--row-gap20);padding: 15px;overflow: hidden;} .flow-step > li:before{content: counter(flow-step, decimal-leading-zero);counter-increment: flow-step;font-size: var(--text-18);font-weight: 500;color: var(--point-color04);line-height: 1.6;} .flow-step > li::after{position: absolute;content:'';inset: 0;border: 2px solid var(--point-color04);border-radius: inherit;clip-path: inset(50% 0 0);z-index: 1;pointer-events: none;} .flow-step > li:nth-child(2n)::after{clip-path: inset(0 0 50%);} .flow-step .desc{display: grid;gap: var(--row-gap25);} .flow-step .desc dt{font-size: var(--text-34);font-weight: 500;color: var(--black-color02);} .flow-step .desc dd{font-size: var(--text-18);color: var(--black-color02);line-height: 1.6;opacity: 0.9;} @media (min-width:1025px) { .flow-step > li{gap: clamp(10px, 1.1vw, 20px);} .flow-step > li:before{font-size: clamp(13px, 1vw, 18px);} .flow-step .desc{gap: clamp(15px, 1.4vw, 25px);} .flow-step .desc dt{font-size: clamp(25px, 1.8vw, 34px);} .flow-step .desc dd{font-size: clamp(13px, 1vw, 18px);} .flow-step.array03{grid: auto / repeat(3, 1fr);} .flow-step.array03 > li{aspect-ratio: auto 1.41;border-radius: 200px;} .flow-step.array05{grid: auto / repeat(5, 1fr);} .flow-step.array05 > li{aspect-ratio: auto 0.76;border-radius: 200px;gap: clamp(5px, 0.6vw, 10px);} .flow-step.array05 .desc{gap: clamp(10px, 1.1vw, 20px);} .flow-step.array05 .desc dt{font-size: clamp(18px, 1.6vw, 30px);} } @media (max-width:1024px) { .flow-step{grid: auto / repeat(2, 1fr);} } @media (max-width:500px) { .flow-step{grid: auto / repeat(1, 1fr);} .flow-step > li{width: min(300px, 100%);margin:-1px auto;} .flow-step > li::after{clip-path: inset(0 50% 0 0);} .flow-step > li:nth-child(2n)::after{clip-path: inset(0 0 0 50%);} } /* study-list */ .study-list{display: grid;grid: auto / repeat(3, 1fr);gap: clamp(15px, 2.1vw, 38px);} .study-list > li{position: relative;border: 1px solid var(--border-color01);background: var(--point-white);border-radius: var(--radius-20);padding: clamp(15px, 2vw, 20px);display: flex;flex-direction: column;gap: clamp(15px, 2vw, 20px);} .study-list .thumb{display: block;border-radius: var(--radius-15);overflow: hidden;aspect-ratio: auto 1.93;} .study-list .thumb img{width: 100%;height: 100%;object-fit: cover;} .study-list .cont{display: grid;gap: var(--row-gap30);padding: 10px;} .study-list .title-desc{display: grid;gap: var(--row-gap10);} .study-list .title-desc dt{font-size: var(--text-30);font-weight: 700;color: var(--black-color01);} .study-list .title-desc dd{font-size: var(--text-20);font-weight: 500;color: var(--black-color01);} .study-list .title-desc + .info{border-top: 1px solid var(--border-color01);padding-top: var(--row-gap30);} .study-list .info{display: grid;gap: var(--row-gap20);} .study-list .info-desc{display: grid;gap: var(--row-gap10);} .study-list .info-desc dt{font-size: var(--text-22);font-weight: 700;color: var(--point-color02);} .study-list .info-desc dd{font-size: var(--text-18);color: var(--black-color03);line-height: 1.6;} .study-list :where(.title-desc, .info-desc) :where(dt, dd){white-space:normal; overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} @media (max-width:1024px) { .study-list{grid: auto / repeat(2, 1fr);} } @media (max-width:640px) { .study-list{grid: auto / repeat(1, 1fr);} } /* take-list */ .take-list{display: grid;grid: auto / repeat(2, 1fr);gap: var(--col-gap40);} .take-list > li{position: relative;border-radius: var(--radius-20);overflow: hidden;padding: clamp(30px, 4vw, 40px) clamp(30px, 6vw, 60px);min-height: clamp(300px, 40vw, 400px);display: flex;flex-direction: column;justify-content: center;} .take-list .thumb{position: absolute;inset: 0;} .take-list .thumb img{width: 100%;height: 100%;object-fit: cover;} .take-list .desc{position: relative;filter: var(--filter-white);display: grid;gap: var(--row-gap10);} .take-list .desc dt{font-size: var(--text-40);font-weight: 700;line-height: 1.6;display: grid;gap: var(--row-gap20);} .take-list .desc dt small{font-size: var(--text-22);font-weight: 400;font-family: var(--font-type02);} .take-list .desc dd{font-size: var(--text-22);line-height: 1.6;} .take-list .btn-box{margin-top: var(--row-gap40);} @media (max-width:1024px) { .take-list{grid: auto / repeat(1, 1fr);} } /* compare-meta */ .compare-meta{position: relative;display: grid;grid: auto / repeat(2, 1fr);width: min(1400px, 100%);margin-inline: auto;gap: var(--col-gap20);} .compare-meta article{position: relative;background: var(--point-color10);border-radius: var(--radius-20);padding: clamp(30px, 6vw, 60px) clamp(25px, 6vw, 60px);display: flex;flex-direction: column;gap: clamp(20px, 4vw, 40px);} .compare-meta .title{position: relative;filter: var(--filter-white);text-align: center;display: grid;gap: var(--row-gap10);} .compare-meta .title h4{font-size: var(--text-20);font-weight: 600;line-height: 1.3;opacity: 0.8;} .compare-meta .title h5{font-size: var(--text-46);font-weight: 600;line-height: 1.3;} .compare-meta .item-list{display: grid;gap: 10px;} .compare-meta .item-list > li{position: relative;font-size: var(--text-20);font-weight: 300;color: var(--point-white);line-height: 1.6;display: flex;align-items: center;gap: clamp(12px, 1.6vw, 16px);background: rgb(0 0 0 / 50%);padding: clamp(18px, 2vw, 20px);border-radius: var(--radius-20);} .compare-meta .item-list > li::before{display: inline-flex;content:'';width: clamp(22px, 3.2vw, 30px);aspect-ratio: auto 1;background: rgb(255 255 255 / 20%) url('/images/chk-i02.svg') no-repeat center / clamp(10px, 1.6vw, 14px) auto;border-radius: 100%;flex-shrink: 0;} .compare-meta .item-list > li::after{position: absolute;content: '';inset: 0;padding: 1px;border-radius: inherit;background: linear-gradient(20deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 60%) 45%, rgb(255 255 255 / 60%) 55%, rgb(255 255 255 / 0%) 100%);mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);mask-composite: exclude;pointer-events: none;} .compare-meta .vs{position: absolute;top: 50%;left: calc(100% + var(--col-gap20) / 2);translate: -50% -50%;font-size: var(--text-20);font-weight: 300;color: var(--point-white);inline-size: clamp(42px, 7.2vw, 70px);aspect-ratio: auto 1;border-radius: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;z-index: 1;background: rgb(0 0 0 / 50%);} .compare-meta .vs::before{position: absolute;content: '';inset: 0;border: 1px dashed rgb(255 255 255 / 30%);pointer-events: none;border-radius: inherit;} .compare-meta .vs::after{position: absolute;content: '';inset: 0;padding: 1px;border-radius: inherit;background: linear-gradient(45deg, rgb(255 255 255 / 0%) 20%, rgb(255 255 255 / 100%) 40%, rgb(255 255 255 / 100%) 50%, rgb(255 255 255 / 0%) 80%);mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);mask-composite: exclude;pointer-events: none;} .compare-meta article:nth-child(2n){background: var(--point-color02);} .compare-meta article:nth-child(2n) .title h4{opacity: 1;} .compare-meta article:nth-child(2n) .item-list > li{background: var(--point-color11);} .compare-meta article:nth-child(2n) .item-list > li::before{background-image:url('/images/chk-i03.svg');} @media (max-width:1024px) { .compare-meta{grid: auto / repeat(1, 1fr);} .compare-meta .vs{top: calc(100% + var(--col-gap20) / 2);left: 50%;} } /* keyfeat-step */ .keyfeat-step{position: relative;counter-reset: keyfeat-step;display: grid;gap: var(--row-gap100);} .keyfeat-step > li{position: relative;display: flex;align-items: center;gap: var(--row-gap40) clamp(50px, 5.21vw, 100px);} .keyfeat-step .thumb{width: min(740px, 50%);flex-shrink: 0;border-radius: var(--radius-10);overflow: hidden;box-shadow: var(--shadow-04);aspect-ratio: auto 1.6;} .keyfeat-step .thumb :where(video, img){width: 100%;height: 100%;object-fit: cover;object-position: 0;} .keyfeat-step .desc{width: 100%;display: flex;flex-direction: column;gap: var(--row-gap30);} .keyfeat-step .desc dt{font-size: var(--text-40);font-weight: 600;color: var(--black-color01);line-height: 1.3;display: grid;gap: clamp(20px, 4vw, 40px);} .keyfeat-step .desc dt::before{content:'FEATURE ' counter(keyfeat-step, decimal-leading-zero);counter-increment: keyfeat-step;font-size: var(--text-18);font-weight: 500;color: var(--point-color02);font-family: var(--font-type02);background: var(--point-color09);display: flex;align-items: center;justify-content: center;text-align: center;width: fit-content;padding: 7px 16px;border-radius: 50px;} .keyfeat-step .desc dd{font-size: var(--text-20);font-weight: 400;color: var(--black-color04);line-height: 1.6;} @media (max-width:1024px) { .keyfeat-step > li{flex-wrap: wrap;} .keyfeat-step .thumb{width: auto; flex-shrink: unset;} } /* case-meta */ .case-meta{display: flex;align-items: center;gap: var(--row-gap40) clamp(40px, 3.2vw, 60px);border: 1px solid var(--border-color01);border-radius: var(--radius-20);background: var(--point-white);padding: var(--row-gap40);} .case-meta .thumb{position: relative;width: min(700px, 48%);aspect-ratio: auto 1.52;flex-shrink: 0;border-radius: var(--radius-20);overflow: hidden;} .case-meta .thumb :where(img, video){width: 100%;height: 100%;object-fit: cover;object-position: 0;} .case-meta .title{position: relative;width: 100%;display: flex;flex-direction: column;gap: var(--row-gap30);} .case-meta .title h4{font-size: var(--text-30);font-weight: 600;color: var(--black-color01);} .case-meta .title h5{font-size: var(--text-20);font-weight: 400;color: var(--black-color05);line-height: 1.6;} .case-meta .title h5.noti{color: var(--black-color08);margin-top: var(--row-gap30);} @media (max-width:1024px) { .case-meta{flex-wrap: wrap;} .case-meta .thumb{width: 100%; flex-shrink: unset;} } /* studies-exp */ .studies-exp{position: relative;background: var(--point-color02);padding-block: var(--row-gap50); margin-bottom: var(--row-gap30);} .studies-exp .cnt-list{display: grid;grid: auto / repeat(3, 1fr);overflow: hidden;width: 100%;} .studies-exp .cnt-list > li{position: relative;text-align: center;box-shadow: 1px 0 rgb(255 255 255 / 20%);padding-inline: 10px;} .studies-exp .cnt-list .desc{filter: var(--filter-white);gap: var(--row-gap10);display: flex;flex-direction: column;justify-content: center;height: 100%;} .studies-exp .cnt-list .desc dt{font-size: var(--text-40);display: flex;align-items: center;justify-content: center;flex-wrap: wrap;gap: 0 11px;font-family: var(--font-type03);letter-spacing: 0.04em;} .studies-exp .cnt-list .desc dt strong{font-size: var(--text-70);font-weight: 700;} .studies-exp .cnt-list .desc dd{font-size: var(--text-22);font-weight: 600;} .studies-exp.type02{background: none;margin-bottom: 0;padding-block: 0;} .studies-exp.type02 .cnt-list{background: none;grid: auto / repeat(4, 1fr);overflow: visible;gap: var(--row-gap60) 0;} .studies-exp.type02 .cnt-list > li{box-shadow: none;display: flex;flex-direction: column;gap: var(--row-gap30);padding: 0;border: 0;} .studies-exp.type02 .cnt-list h4{font-size: var(--text-22);font-weight: 600;color: var(--black-color00);letter-spacing: 0;} .studies-exp.type02 .cnt-list .desc{filter: none;gap: var(--row-gap20);justify-content: flex-start;} .studies-exp.type02 .cnt-list .desc dt{font-size: var(--text-32);color: var(--black-color00);font-family: var(--font-type02);letter-spacing: inherit;} .studies-exp.type02 .cnt-list .desc dt strong{color: var(--point-color02);} .studies-exp.type02 .cnt-list .desc dd{font-size: var(--text-18);font-weight: 400;color: var(--black-color06); line-height: 1.6;} @media (max-width:640px) { .studies-exp.type02 .cnt-list{grid: auto / repeat(2, 1fr);} } @media (max-width:479px) { .studies-exp .cnt-list{grid: auto / repeat(1, 1fr);gap: 20px;} .studies-exp .cnt-list > li + li{padding-top: 20px;border-top: 1px solid rgb(255 255 255 / 20%);} } @media (max-width:360px) { .studies-exp.type02 .cnt-list{grid: auto / repeat(1, 1fr);} } /* history-meta */ .history-meta{position: relative;} .history-meta .line{position: absolute; top:0; left:50%; margin-left: -0.5px; width: 1px; height: 100%; background: var(--border-color01);} .history-meta .line em{position: absolute; top:0; left:0; width: 100%; height: 5px; background: var(--point-color02);} .history-meta .line em::before{position: absolute;content:'';width: clamp(8px, 1.1vw, 9px);aspect-ratio: auto 1;border-radius: 100%;background: inherit;left:50%;bottom:0;translate: -50%;} .history-meta section{position: relative;display: flex;align-items: flex-start;padding-bottom: clamp(70px, 20vw, 200px);gap: var(--row-gap40) 0;} .history-meta section:last-child{padding-bottom: 0;} .history-meta .year-info{position: sticky;top: 150px;width: 50%;flex-shrink: 0;padding-right: clamp(50px, 8.34vw, 160px);display: flex;flex-direction: column;gap: clamp(30px, 5.21vw, 100px);} .history-meta .year-desc{display: grid;gap: clamp(10px, 1.7vw, 17px);} .history-meta .year-desc dt{font-size: var(--text-30);font-weight: 500;color: var(--black-color03);line-height: 1.6;font-family: var(--font-type02);} .history-meta .year-desc dd{font-size: var(--text-70);font-weight: 600;color: var(--trans-color);background: var(--point-grad02);background-clip: text;width: fit-content;} .history-meta .thumb{position: relative;height: clamp(250px, 46.2dvh, 420px);overflow: hidden;border-radius: var(--radius-20);} .history-meta .thumb img{width:100%;height: 100%;object-fit: cover;} .history-meta .cont{position: relative;padding-left: clamp(50px, 6.25vw, 120px);display: flex;flex-direction: column;gap: clamp(40px, 10vw, 100px);width: 100%;} .history-meta .item{position: relative;} .history-meta .exp-desc{display: grid;gap: var(--row-gap30);} .history-meta .exp-desc dt{font-size: var(--text-40);font-weight: 500;color: var(--black-color01);font-family: var(--font-type02);} .history-meta .exp-desc dd{position: relative;} .history-meta .bullet-list{gap: var(--row-gap20);} .history-meta .bullet-list > li{font-size: var(--text-20);line-height: 1.6;color: var(--black-color03);font-weight: 300;letter-spacing: -0.03em;} @media (max-width:1024px) { .history-meta{padding-left: clamp(30px, 6vw, 60px);} .history-meta .line{left:0;margin-left: 0;} .history-meta section{flex-wrap: wrap;} .history-meta .year-info{position: relative;inset: auto;width: 100%;flex-shrink: unset;padding-right: 0;gap: var(--row-gap30);} .history-meta .thumb{height:auto;} .history-meta .cont{padding-left:0;} } /* photoSwiper */ .photoSwiper{position: relative;} .photoSwiper .swiper-slide{height: auto;aspect-ratio: auto 1.53;overflow: hidden;border-radius: var(--radius-20);} .photoSwiper .swiper-slide img{width:100%;height: 100%;object-fit: cover;} /* arw-view */ .arw-view{font-size: var(--text-18);font-weight: 400;color: var(--black-color03);line-height: 1.6;display: flex;align-items: center;gap: clamp(6px, 0.9vw, 7px);} .arw-view::after{display:inline-flex;content:'';inline-size: clamp(9px, 1.3vw, 11px);aspect-ratio: auto 1;border-radius: 2px;clip-path: var(--clip-poly02);border: 2px solid currentColor;opacity: 0.8;rotate: -45deg;translate: 0 clamp(-1px, -0.1vw, 0px);} /* interview-list */ .interview-list{display: grid;grid: auto / repeat(3, 1fr);gap: clamp(15px, 2.1vw, 38px);} .interview-list > li{position: relative;border: 1px solid var(--border-color01);border-radius: var(--radius-20);background: var(--point-white);padding: var(--row-gap40);transition: all 0.4s;} .interview-list .title-desc{display: grid;gap: var(--row-gap20);} .interview-list .title-desc dt{display: flex;align-items: center;justify-content: center;text-align: center;width: fit-content;font-size: var(--text-18);font-weight: 500;color: var(--point-color02);font-family: var(--font-type02);background: var(--point-color09);border-radius: 50px;padding: 6px 16px;} .interview-list .title-desc dd{font-size: var(--text-30);font-weight: 600;color: var(--black-color00);line-height: 1.3;} .interview-list .info{position: relative;margin-top: clamp(20px, 3vw, 30px);padding-top: clamp(20px, 3vw, 30px);border-top: 1px solid var(--border-color01);display: grid;gap: clamp(20px, 4vw, 40px);} .interview-list .info-desc{display: grid;gap: var(--row-gap10);} .interview-list .info-desc dt{font-size: var(--text-22);font-weight: 500;line-height: 1.6;} .interview-list .info-desc dt em{color: var(--point-color02);} .interview-list .info-desc dd{font-size: var(--text-18);color: var(--black-color04);line-height: 1.6;} @media (hover:hover) and (pointer: fine) { .interview-list > li:hover{border-color: var(--point-color02);box-shadow: var(--shadow-05);} } @media (max-width:1024px) { .interview-list{grid: auto / repeat(2, 1fr);} } @media (max-width:640px) { .interview-list{grid: auto / repeat(1, 1fr);} } /* career-list */ .career-list{display: grid;grid: auto / repeat(4, 1fr);gap: var(--row-gap60) var(--col-gap20);} .career-list > li{position: relative;text-align: center;display: flex;flex-direction: column;gap: var(--row-gap20);} .career-list .thumb-desc{display: grid;gap: var(--row-gap30);} .career-list .thumb-desc dt{overflow: hidden;aspect-ratio: auto 2.03;border-radius: var(--radius-20);} .career-list .thumb-desc dt img{width: 100%;height: 100%;object-fit: cover;} .career-list .thumb-desc dd{font-size: var(--text-36);font-weight: 500;color: var(--black-color00);} .career-list .info-desc{display: grid;gap: var(--row-gap20);} .career-list .info-desc dt{font-size: var(--text-20);font-weight: 500;color: var(--point-color04);} .career-list .info-desc dd{font-size: var(--text-18);color: var(--black-color06);line-height: 1.6;} .career-list .info-desc dd strong{font-weight: 600;color: var(--black-color03);} @media (max-width:1024px) { .career-list{grid: auto / repeat(2, 1fr);} } @media (max-width:479px) { .career-list{grid: auto / repeat(1, 1fr);} } /* benefit-list */ .benefit-list{position: relative;display: grid;gap: var(--row-gap120);} .benefit-list > li{position: relative;display: flex;gap: var(--row-gap40) clamp(40px, 4.2vw, 80px);} .benefit-list .thumb{width: min(580px, 37%);flex-shrink: 0;overflow: hidden;border-radius: var(--radius-20);} .benefit-list .thumb img{width: 100%;height: 100%;object-fit: cover;} .benefit-list .cont{width: 100%;display: flex;flex-direction: column;justify-content: center;gap: var(--row-gap80);padding-block: 30px;} .benefit-list .title-desc{display: grid;gap: var(--row-gap20);} .benefit-list .title-desc dt{font-size: var(--text-46);font-weight: 500;color: var(--black-color00);line-height: 1.3;font-family: var(--font-type02);display: grid;gap: var(--row-gap20);} .benefit-list .title-desc dt em{font-size: var(--text-24);font-weight: 500;line-height: 1.6;color: var(--point-color04);} .benefit-list .title-desc dd{font-size: var(--text-20);color: var(--black-color03);line-height: 1.6;} .benefit-list .item-list{display: grid;grid: auto / repeat(2, 1fr);gap: var(--row-gap40) var(--col-gap30);} .benefit-list .item-list > li{position: relative;display: flex;align-items: center;gap: clamp(15px, 2vw, 20px);} .benefit-list .item-list .icon{display: flex;align-items: center;justify-content: center;padding: 10px;inline-size: clamp(60px, 8.2vw, 80px);aspect-ratio: auto 1;border-radius: var(--radius-10);background: var(--gray-bg01);overflow: hidden;flex-shrink: 0;} .benefit-list .item-list .desc{display: flex;flex-direction: column;gap: 8px;} .benefit-list .item-list .desc dt{font-size: var(--text-24);font-weight: 500;color: var(--black-color03);} .benefit-list .item-list .desc dd{font-size: var(--text-18);color: var(--black-color06);} @media (max-width:1100px) { .benefit-list > li{flex-wrap: wrap;} .benefit-list .thumb{width: min(580px, 100%);flex-shrink: unset;} .benefit-list .cont{padding-block:0;} } @media (max-width:640px) { .benefit-list .item-list{grid: auto / repeat(1, 1fr);} } /* recruitment-step */ .recruitment-step{display: grid;grid: auto / repeat(4, 1fr);gap: clamp(50px, 5.42vw, 104px);} .recruitment-step > li{position: relative;text-align: center;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: var(--row-gap20);background: var(--point-white);border-radius: 100%;aspect-ratio: auto 1;} .recruitment-step > li::before{position: absolute;content:'';border: 2px solid var(--border-color01);border-radius: inherit;inset: 0;pointer-events: none;} .recruitment-step > li::after{position: absolute;content:'';background: var(--point-white) url('/images/more-arw.svg') no-repeat center / clamp(6px, 0.5vw, 8px) auto;inline-size: clamp(30px, 2.1vw, 40px);aspect-ratio: auto 1;border: 1px dashed var(--point-color14);border-radius: 100%;top: 50%;left: calc(100% + clamp(50px, 5.42vw, 104px) / 2);translate: -50% -50%;} .recruitment-step > li:nth-child(2)::before{border: 2px solid var(--point-color13);} .recruitment-step > li:nth-child(3)::before{border: 4px solid var(--point-color02);} .recruitment-step > li:last-child::before{border: 0;} .recruitment-step > li:last-child{background: var(--point-color02);} .recruitment-step > li:last-child :where(.icon, .desc){filter: var(--filter-white);} .recruitment-step > li:last-child::after{display: none;} .recruitment-step .icon{display: flex;inline-size: clamp(46px, 7.2vw, 70px);margin-inline: auto;} .recruitment-step .desc{display: grid;gap: 8px;} .recruitment-step .desc dt{font-size: var(--text-26);font-weight: 600;color: var(--black-color03);} .recruitment-step .desc dd{font-size: var(--text-17);color: var(--black-color05);line-height: 1.5;} @media (min-width: 1025px) { .recruitment-step .icon{width: clamp(50px, 3.7vw, 70px);} .recruitment-step .desc dt{font-size: clamp(20px, 1.4vw, 26px);} .recruitment-step .desc dd{font-size: clamp(14px, 1vw, 17px);} } @media (max-width:1024px) { .recruitment-step{grid: auto / repeat(2, 1fr);width: min(700px, 100%);margin-inline: auto;} .recruitment-step > li:nth-child(2n)::after{opacity: 0;} } @media (max-width:479px) { .recruitment-step{grid: auto / repeat(1, 1fr);width: min(250px, 100%);} .recruitment-step > li::after{top: calc(100% + clamp(50px, 5.42vw, 104px) / 2);left: 50%;rotate: 90deg;} .recruitment-step > li:nth-child(2n)::after{opacity: 1;} } /* gray-txt */ .gray-txt{position: relative;font-size: clamp(25px, 9.3vw, 178px);font-weight: 800;text-align: center;color: var(--border-color01);font-family: var(--font-type02);opacity: 0.5;letter-spacing: 0.09em;white-space: nowrap;} /* sticky-obj */ .sticky-obj{position: sticky;z-index: -1;bottom: 200px;display: flex;justify-content: center;rotate: -15deg;margin-inline: auto;--p: 0;--from: min(725px, 100%);--to: min(clamp(120px, 25.5vw, 255px), 100%);width: calc(var(--from) + (var(--to) - var(--from)) * var(--p));} /* circle-value */ .circle-value{position: relative;display: grid;grid: auto / repeat(2, 1fr);} .circle-value > li{position: relative;display: flex;align-items: center;flex-direction: row-reverse;gap: clamp(20px, 2.1vw, 40px);text-align: right;} .circle-value .img-desc{position: relative;inline-size: clamp(320px, 21vw, 400px);aspect-ratio: auto 1;border-radius: 100%;border: 1px solid var(--border-color01);display: flex;align-items: center;justify-content: center;flex-direction: column;text-align: center;flex-shrink: 0;} .circle-value .img-desc dt{position: absolute;width: calc(100% - clamp(40px, 8vw, 80px));height: calc(100% - clamp(40px, 8vw, 80px));border-radius: inherit;overflow: hidden;top: 50%;left: 50%;translate: -50% -50%;} .circle-value .img-desc dt img{width:100%;height: 100%;object-fit: cover;} .circle-value .img-desc dd{position: relative;width: calc(100% - clamp(40px, 8vw, 80px));height: calc(100% - clamp(40px, 8vw, 80px));font-size: var(--text-30);font-weight: 600;font-family: var(--font-type02);display: flex;flex-direction: column;align-items: center;justify-content: center;filter: var(--filter-white);padding: 15px;} .circle-value .title{position: relative;width: 100%;} .circle-value .title p{font-size: var(--text-20);color: var(--black-color03);line-height: 1.6;} .circle-value .title p em{color: var(--point-color02);font-weight: 600;} .circle-value > li:nth-child(2n){flex-direction: row;text-align: left;translate: -20px;} @media (max-width:1400px) { .circle-value{grid: auto / repeat(1, 1fr);gap: var(--row-gap60);} .circle-value > li{flex-direction:row;text-align: left;gap: clamp(20px, 4vw, 40px);} .circle-value > li:nth-child(2n){translate: 0 clamp(-20px, -2vw, -10px);} .circle-value .img-desc{width: clamp(200px, 40vw, 400px);} } @media (max-width:479px) { .circle-value > li{flex-wrap: wrap;justify-content: center;text-align: center !important;translate: 0 !important;} } /* wedo-list */ .wedo-list{display: flex;gap: 20px;} .wedo-list > li{position: relative;min-height: clamp(300px, 54vw, 540px);flex-grow: 1;display: flex;flex-direction: column;justify-content: flex-end;border-radius: var(--radius-20);overflow: hidden;--on-w: clamp(400px, 40vw, 760px);transition: all 0.6s;cursor: pointer;} .wedo-list > li::before{position: absolute;content:attr(title);font-size: clamp(25px, 1.7vw, 32px);font-weight: 700;font-family: var(--font-type02);padding: clamp(25px, 2.1vw, 40px);filter: var(--filter-white);z-index: 1;text-align: center;display: flex;flex-direction: column;justify-content: flex-end;transition: inherit;pointer-events: none;width: min(260px, 100%);translate: -50%;bottom: 0;left: 50%;} .wedo-list .thumb{position: absolute;inset: 0;overflow: hidden;} .wedo-list .thumb img{width: 100%;height: 100%;object-fit: cover;} .wedo-list .desc{position: relative;padding: clamp(25px, 5vw, 50px);filter: var(--filter-white);display: grid;gap: var(--row-gap10);transition: inherit;} .wedo-list .desc dt{font-size: var(--text-46);font-weight: 700;font-family: var(--font-type02);letter-spacing: 0;} .wedo-list .desc dd{font-size: var(--text-20);} @media (min-width:1025px) { .wedo-list > li.on{width: var(--on-w);flex-shrink: 0;} .wedo-list .desc{opacity: 0; padding: clamp(25px, 2.7vw, 50px); width: var(--on-w);} .wedo-list .desc dt{font-size: clamp(30px, 2.4vw, 46px);} .wedo-list .desc dd{font-size: clamp(18px, 1.1vw, 20px);} .wedo-list > li.on::before{opacity: 0;} .wedo-list > li.on .desc{opacity: 1;} } @media (max-width:1024px) { .wedo-list{flex-wrap: wrap;} .wedo-list > li{width: 100%;} .wedo-list > li::before{opacity: 0;} } /* key-step */ .key-wrap{position: relative; height:400dvh;} .key-step{position: sticky;top: 70px;counter-reset: key-step;display: flex;align-items: flex-end;justify-content: center;width: min(1260px, 100%);margin-inline: auto;aspect-ratio: 63 / 40;gap: var(--row-gap60) 0;} .key-step > li{position: relative;display: flex;align-items: flex-start;gap: clamp(20px, 4vw, 40px);height: 100%; } .key-step > li:last-child{margin-right: 0;} .key-step .thumb-box{position: relative;width: 100%;height: 100%;border-radius: var(--radius-20);overflow: hidden;} .key-step .thumb{position: absolute;top: 100%; left:0; transform:translate(0px, -100%);aspect-ratio: auto 1;overflow: hidden;width: 100%;border-radius: inherit;} .key-step .thumb img{width: 100%;height: 100%;object-fit: cover;} .key-step .desc{position: absolute;display: flex;flex-direction: column;gap: var(--row-gap30);top: var(--row-gap120);left: calc(100% + 40px);width: max-content;opacity: 0;transition: all 0.4s;} .key-step .desc::before{content:'STEP ' counter(key-step);counter-increment: key-step;font-size: var(--text-20);font-weight: 600;font-family: var(--font-type02);line-height: 1.6;background: var(--point-grad02);background-clip: text;color: var(--trans-color);width: fit-content;} .key-step .desc dt{font-size: var(--text-40);font-weight: 600;line-height: 1.3;} .key-step .desc dd{font-size: var(--text-22);font-weight: 300;color: var(--black-color00);line-height: 1.6;} @media (min-width:1025px) { .key-step > li{width: 0; margin-right: 3.17%;} .key-step > li.on{width: 55.56%; } .key-step > li.on + li{width: 19.05%;} .key-step > li.on ~ li{margin-right: 0;} .key-step > li:has(+ .on){width: 19.05%;} .key-step > li.on .thumb{aspect-ratio: 7 / 8;} .key-step > li:has(+ .on) .thumb{top:0;translate: 0;} .key-step > li.on .desc{opacity: 1;} .key-step .desc{left:calc(100% + var(--col-gap40));} .key-step .desc::before{font-size: clamp(13px, 1.1vw, 20px);} .key-step .desc dt{font-size: clamp(20px, 2.1vw, 40px);} .key-step .desc dd{font-size: clamp(13px, 1.2vw, 22px);} } @media (max-width:1024px) { .key-wrap{height: auto;} .key-step{position: relative; inset: auto; aspect-ratio: unset; flex-wrap: wrap;} .key-step > li{width:100%;display: flex;align-items: center;} .key-step > li:empty{display: none;} .key-step .thumb-box{width: 45%;flex-shrink: 0;} .key-step .thumb{position: relative; inset: auto; transform: none;} .key-step .desc{position:relative;inset: auto;width: 100%;opacity: 1;} } @media (max-width:479px) { .key-step > li{flex-wrap: wrap;} .key-step .thumb-box{width: 100%;flex-shrink: unset;} .key-step .desc{position:relative;inset: auto;width: 100%;opacity: 1;} } /* partnership-list */ .partnership-list{display: grid;grid: auto / repeat(4, 1fr);gap: var(--row-gap60) var(--col-gap40);} .partnership-list > li{position: relative;text-align: center;} .partnership-list .desc{display: grid;gap: var(--row-gap20);} .partnership-list .desc dt{display: flex;align-items: center;justify-content: center;} .partnership-list .desc dd{font-size: var(--text-22);color: var(--black-color03);line-height: 1.6;} @media (max-width:1024px) { .partnership-list{grid: auto / repeat(2, 1fr);} } @media (max-width:479px) { .partnership-list{grid: auto / repeat(1, 1fr);} }