#wrap {overflow: clip;} .w_custom{position: relative; width: calc(100% - 60px); max-width: 1400px; 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);text-align: left;} .bullet-list > li > strong{display:contents;font-weight: 500;color: var(--black-color03);} .bullet-list > li > small{display: contents; color: var(--black-color08);} .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.type02{gap: clamp(8px, 1.6vw, 16px);} .bullet-list.type02 > li{font-size: var(--text-20);} .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-gap100) var(--row-gap140);} main:has(.pbDn){padding-bottom: 0;} main:has(.ptDn){padding-top: 0;} main:has(.fullSec){width: 100%; max-width: 100%;} #wrap .dn{display: none;} .ofc img{width:100% !important;height:100% !important;object-fit:cover !important;} .bg-sec{background:var(--point-color05);} .bg-sec.pt01{background:var(--point-color04);} .bg-sec.pt02{background:var(--point-grad07);} .bg-sec.pt03{background:var(--point-grad08);} .hide{display: none !important;} .dragscroll{ scrollbar-gutter: stable;} .dragscroll::-webkit-scrollbar {width: clamp(3px, 0.6vw, 4px);} .dragscroll::-webkit-scrollbar-track {background: #eee; border-radius: 10px;} .dragscroll::-webkit-scrollbar-thumb {background: #aaa; border-radius: 10px;} @media (max-width:1500px) { br.for_pc{display: none;} } @media (max-width:1023px) { br.for_tm{display: none;} } @media (max-width:860px) { .w_custom{width: calc(100% - 30px);} } @media (max-width:320px) { .w_custom{width: calc(100% - 20px);} } /*input*/ #wrap input:where([type="text"], [type="password"], [type="number"], [type="tel"], [type="email"]){height: clamp(40px, 5vw, 50px);border-radius: var(--radius-10);background: var(--point-white);border: 1px solid var(--border-color01);padding: 0 clamp(10px, 1.5vw, 16px);font-size: var(--text-18);font-weight: 400;color: var(--black-color00);line-height: normal;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;min-width: auto;letter-spacing: -0.03em;vertical-align: middle;width:100%;} #wrap input:where([type="text"], [type="password"], [type="number"], [type="tel"], [type="email"])[readonly]{background:var(--gray-bg01);} #wrap input:where([type="text"], [type="password"], [type="number"], [type="tel"], [type="email"])::placeholder{color:var(--black-color08); font-weight:400;} #wrap input:where([type="text"], [type="password"], [type="number"], [type="tel"], [type="email"]):not([readonly]):focus{border-color:var(--point-color02)} #wrap select{width: clamp(100px, 18vw, 180px);height: clamp(40px, 5vw, 50px);background: var(--point-white) url('/images/sel_arw.svg') no-repeat calc(100% - clamp(15px, 2vw, 18px)) 50% / clamp(12px, 1.9vw, 14px) auto;border: 1px solid var(--border-color01);border-radius: var(--radius-10);padding: 0 clamp(20px, 3vw, 35px) 0 clamp(10px, 1.5vw, 16px);font-size: var(--text-18);font-weight:400;color: var(--black-color00);line-height: normal;appearance: none;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing: -0.03em;vertical-align: middle;} #wrap textarea{width: 100%;font-size: var(--text-18);font-weight: 400;color: var(--black-color03);line-height: 1.4;border: 1px solid var(--border-color01);background: var(--point-white);resize: none;padding: clamp(10px, 1.5vw, 16px);border-radius: var(--radius-10);height: clamp(120px, 18vw, 160px);scrollbar-gutter: stable;} #wrap textarea::placeholder{color:var(--black-color09);} #wrap textarea::-webkit-scrollbar {width: clamp(3px, 0.6vw, 4px);} #wrap textarea::-webkit-scrollbar-track {box-shadow:-10px 0 0 var(--border-color01); border-radius: 10px; margin: 10px;} #wrap textarea::-webkit-scrollbar-thumb {box-shadow:-10px 0 0 var(--black-color10); border-radius: 10px;} #wrap [type="checkbox"]{display: inline-flex;align-items: center;justify-content: center;width: clamp(18px, 2vw, 22px);height: clamp(18px, 2vw, 22px);border: 1px solid var(--border-color01);flex-shrink: 0;cursor: pointer;border-radius: 2px;border-radius:100%;appearance: none;} #wrap [type="checkbox"]::before{display: inline-flex;content:'';width: clamp(6px, 0.8vw, 8px);aspect-ratio: auto 1.33;background: url('/images/icon_chk.svg') no-repeat center / 100% auto;border:none;} #wrap [type="checkbox"]:after{display: none;} #wrap [type="checkbox"]:checked{border-color: var(--point-color01);background: var(--point-color01);} #wrap [type="checkbox"]:checked:before{filter: var(--filter-white);} #wrap label:has([type="checkbox"]){display:inline-flex;align-items: flex-start;gap: 10px;font-size: var(--text-18);font-weight:400;color: var(--black-color03);line-height: clamp(18px, 2vw, 22px);cursor: pointer;} #wrap label:has([type="checkbox"]) em{font-weight: 600; color: var(--point-color02); display: contents;} #wrap label:has([type="radio"]){display: flex;align-items:flex-start;gap:6px;font-size: var(--text-18);font-weight: 400;color: var(--black-color05);line-height:clamp(15px, 2vw, 20px);cursor: pointer;padding:0;background:none;} #wrap label [type="radio"]{display: inline-flex;align-items: center;justify-content: center;width:clamp(15px, 2vw, 20px);height:clamp(15px, 2vw, 20px);border-radius: 100%;background: var(--point-white);box-shadow: inset 0 0 0 1px var(--border-color01);cursor: pointer;transition: all 0.4s;flex-shrink: 0;position: static;appearance:none;visibility:visible;z-index:3;;border:none;} #wrap label [type="radio"]:before{content: '';width:clamp(5px, 0.6vw, 8px);aspect-ratio: auto 1;background: var(--black-color12);border-radius: 100%;opacity: 0;transition: all 0.4s;} #wrap label [type="radio"]:checked{box-shadow: inset 0 0 0 1px var(--black-color12);} #wrap label [type="radio"]:checked:before{opacity: 1;} #wrap label [type="radio"]:after{display: none;} /* ======================================== 빠른 상담문의 (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:fixed;top:0;width: 100%;height: clamp(65px, 10vw, 100px);z-index: 100;transition: all 0.4s;border-bottom: 1px solid rgba(255, 255, 255, 0.60);background: rgba(8, 28, 62, 0.60);backdrop-filter: blur(5px);} #header .w_custom{display: flex;align-items: center;justify-content: space-between;height: 100%;gap: 15px;max-width:1800px;} #header .logo{height: 100%;max-width: clamp(120px, 15vw, 156px);} #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% - 300px); height: 100%; display: flex; justify-content: center; text-align: center;} #header .gnb > li{position: relative;height: 100%;font-size: clamp(14px, 1.1vw, 20px);font-weight:500;color: var(--black-color00);transition: all 0.4s;} #header .gnb > li > a{display: flex;align-items: center;justify-content: center;height: 100%;padding-inline: clamp(10px, 1.31vw, 25px);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(24px, 3.5vw, 30px);aspect-ratio: auto 1.36;display:flex;} #header .allCate span{width: 100%;height: 2px;background: var(--black-color02);} #header :where(.logo, .gnb > li > a, .allCate){filter:var(--filter-white);} /*on*/ /* #header.on{box-shadow: inset 0 -1px 0 var(--border-color01);background: var(--point-white);} #header.on :where(.logo, .gnb > li > a, .hd_lang, .allCate){filter:none;} */ /* over */ @media (hover:hover) and (pointer:fine) { /* #header:hover{box-shadow: inset 0 -1px 0 var(--border-color01);background: var(--point-white);} #header:hover :where(.logo, .gnb > li > a, .allCate){filter:none;} */ #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, 50px);right: clamp(30px, 2.8vw, 50px);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 ───────────────────────────────────────────────────────────*/ /*visual*/ .visual_wrapper{position: relative;} .visualSwiper .swiper-slide{position:relative; box-sizing:border-box;height:clamp(500px, 84vw, 840px);overflow:hidden; opacity:0 !important; pointer-events:none;overflow:hidden;} .visualSwiper .swiper-slide.swiper-slide-active{opacity:1 !important; pointer-events:inherit;} .visualSwiper .img{border-radius:0 0 clamp(60px, 12vw, 120px) 0;overflow:hidden;width:100%;height:100%;} .visualSwiper .txt_box{position: absolute;top:50%;left:50%;translate:-50% -50%;display: flex;flex-direction:column;gap:var(--row-gap30);text-align:left;} .visualSwiper .txt_box h2{font-size:var(--text-66);color:var(--point-white);font-weight:400;line-height:1.3;} .visualSwiper .txt_box h2 strong{font-weight:700;} .visualSwiper .txt_box p{font-size:var(--text-22);color:var(--point-white);font-weight:300;line-height:1.6;} .visualSwiper .main_more{margin-top:var(--row-gap20);} .visualSwiper .txtAni{opacity:0;translate:0 100px;pointer-events:none;transition:all 0.8s;} .visualSwiper .swiper-slide-active .txtAni{opacity:1;translate:0;pointer-events:initial;} .visualSwiper .swiper-slide-active .txtAni:nth-child(2){transition-delay:0.3s;} .visualSwiper .swiper-slide-active .txtAni:nth-child(3){transition-delay:0.6s;} /*controller*/ .visual_wrapper .controller{height:clamp(60px, 8vw, 80px);position: absolute;bottom:0;left:50%;translate:-50%;display: flex;align-items: center;gap:var(--row-gap20);font-size:var(--text-16);color:var(--point-white);font-weight:600;z-index:3;} .visual_wrapper .controller:before{width:620px;height:100%;content:"";background:rgba(0,0,0,0.7);border-radius:0 var(--radius-20) 0 0;position: absolute;bottom:0;left:-260px;} .visual_wrapper .controller > span{position: relative;display: inline-block;} .visual_wrapper .controller .total{opacity:0.6;} .visual_wrapper .controller .progress{position: relative;width:120px;height:2px;background:rgba(255,255,255,0.3);} .visual_wrapper .controller .progress-bar{position: absolute;height:100%;background:var(--point-white);} .visual_wrapper .controller .swipe_arw{width:10px;height:14px;position: relative;display: flex;align-items: center;justify-content: center;} .visual_wrapper .controller .swipe_arw:before{width:100%;aspect-ratio:auto 1;content:"";border:2px solid var(--point-white);border-width:2px 2px 0 0;rotate:-135deg;translate:3px;} .visual_wrapper .controller .swipe_arw.next{scale:-1 -1;} .visual_wrapper .controller .swipe_btn{width:14px;aspect-ratio:auto 1;position: relative;display: flex;align-items: center;justify-content:space-around;} .visual_wrapper .controller .swipe_btn{&::before, &::after{width:3px;height:100%;content:"";display: inline-block;background:var(--point-white);}font-size:0;} .visual_wrapper .controller .swipe_btn.stop:before{display: none;} .visual_wrapper .controller .swipe_btn.stop:after{width:100%;clip-path:var(--clip-poly01);rotate: -90deg;height: auto;aspect-ratio: auto 1.37;} @media (max-width:1023px) { .visual_wrapper .controller:before{width:360px;left:-40px;} } @media (max-width:640px) { .visual_wrapper .controller:before{width:310px;} } /*공통*/ /*버튼*/ .main_more{display: inline-flex;width:clamp(150px, 18vw, 180px);height:clamp(50px, 6vw, 60px);border-radius:var(--radius-10);align-items: center;justify-content: space-between;font-size:var(--text-20);color:var(--point-white);font-weight:600;background:var(--point-color01);border:1px solid var(--point-color01);box-shadow:var(--shadow-01);padding-inline:var(--row-gap20);transition:all 0.4s;;} .main_more em{width:clamp(20px, 3vw, 30px);aspect-ratio:auto 1;border-radius:5px;background:var(--point-white);background:var(--point-white);display: flex;align-items: center;justify-content: center;transition: inherit;} .main_more em:before{width:12px;height:clamp(8px, 1vw, 10px);content:"";background:url('/images/main_more.svg')no-repeat center / auto 100%;transition: inherit;} .main_more.wh{background:var(--point-white);color:var(--point-color01);} .main_more.wh em{background:var(--point-color01);} .main_more.wh em:before{filter:var(--filter-white);} .main_more.wh span{transition:inherit;} .main_more.auto{width: auto;height: auto;min-width: clamp(180px, 29vw, 280px);min-height: clamp(50px, 6vw, 60px);padding-block: 8px;gap: clamp(25px, 3.3vw, 33px);} /* over */ @media (hover:hover) and (pointer:fine){ .main_more:hover{background:var(--point-white);color:var(--point-color01);} .main_more:hover em{background:var(--point-color01);} .main_more:hover em:before{filter:var(--filter-white);} .main_more.wh:hover{background:var(--point-color01);} .main_more.wh:hover span{filter: var(--filter-white);} .main_more.wh:hover em{background:var(--point-white);} .main_more.wh:hover em:before{filter:none;} } /*title*/ .main_title{display: flex;flex-direction:column;gap:var(--row-gap20);align-items: center;text-align: center;} .main_title span{font-size:var(--text-16);color:var(--point-color01);font-weight:400;line-height:1.4;font-feature-settings: 'liga' off, 'clig' off;font-family:var(--font-type02);} .main_title h3{font-size:var(--text-50);color:var(--black-color01);font-weight:700;line-height:1.4;width:100%;} .main_title p{font-size:var(--text-22);color:var(--black-color06);font-weight:400;line-height:1.6;} /*case*/ .main_case{padding-block:clamp(100px, 15vw, 190px) var(--row-gap160);display: flex;align-items: flex-start;gap:var(--row-gap80);} .main_case .txt_box{width:460px;flex-shrink:0;display: grid;gap:var(--row-gap50);position:sticky;top:130px;left:0;margin-top:-90px;} .main_case .main_title{gap:var(--row-gap10);text-align:left;align-items: flex-start;} .main_case .main_title h3{font-size:var(--text-40);} .main_case .main_title h3 strong{color:var(--point-color02);font-weight:700;} .main_case .cnt_box{display: grid;gap:var(--row-gap20);} .main_case .cnt_box dl{display: flex;align-items: center;justify-content: space-between;border-radius:var(--radius-10);box-shadow:var(--shadow-01);background:var(--point-white);padding:clamp(10px, 1.5vw, 17px) var(--row-gap30);border:1px solid var(--border-color01);} .main_case .cnt_box dl dt{font-size:var(--text-18);color:var(--black-color04);font-weight:400;line-height:1.1;} .main_case .cnt_box dl dd{display: flex;align-items: flex-end;gap:var(--row-gap10);align-items: baseline;font-size:var(--text-30);color:var(--point-color06);font-weight:500;line-height:1.3;} .main_case .cnt_box dl dd strong{font-size:var(--text-40);font-weight:700;letter-spacing:0;} .main_case .cnt_box dl dd em{translate:0 -3px;} .main_case .btn_box{margin-top:var(--row-gap10);display: flex;gap:var(--row-gap20);} .main_case .btn_box .main_more{width:calc(50% - var(--row-gap20) / 2);} .main_case .img_box{width:100%;} .main_case .img_box .db-banner-group{width:100%;display: grid;gap:var(--row-gap40) var(--row-gap20);grid-template-columns:repeat(4, 1fr);} .main_case .img_box img{border-radius:var(--radius-10);box-shadow:var(--shadow-01);width:100%;} .main_case .img_box img:nth-child(2n){translate:0 calc(var(--row-gap90) * -1);} @media (max-width:1023px) { .main_case{flex-direction:column;padding-top:var(--row-gap100);} .main_case .txt_box{width:100%;margin:0;position:static;} .main_case .img_box{margin-top:var(--row-gap100);} } @media (max-width:479px) { .main_case .btn_box{flex-direction: column;} .main_case .btn_box .main_more{width:100%;} .main_case .img_box{margin-top:var(--row-gap80);} .main_case .img_box .db-banner-group{grid-template-columns:repeat(2, 1fr);} } /*insight*/ .main_insight .title_box{background:var(--point-grad01);display: flex;align-items: center;justify-content: center;padding:var(--row-gap60) var(--row-gap30) var(--row-gap70);position: relative;z-index:3;} .main_insight .title_box h3{font-size:var(--text-50);color:var(--point-white);font-weight:700;line-height:1.4;} .main_insight .title_box .tab{position: absolute;max-width:800px;left:50%;bottom:calc(clamp(42px, 6vw, 60px) / 2 * -1);translate:-50%;background:var(--point-white);border-radius:60px;display: flex;;box-shadow:var(--shadow-02);} .main_insight .title_box .tab a{width:25%;display: inline-flex;align-items: center;justify-content: center;height:clamp(42px, 6vw, 60px);font-size:var(--text-20);color:var(--point-color03);font-weight:600;border-radius:60px;} .main_insight .title_box .tab a.on{background:var(--point-grad02);color:var(--point-white);} .main_insight .insight_box{padding-block:var(--row-gap110) var(--row-gap100);background:var(--point-color04);} .main_insight .insight_box .w_custom > section{display: none;flex-direction: column;gap:var(--row-gap40);align-items: center;} .main_insight .insight_box .w_custom > section.on{display:flex;} .insight_box .cont{padding:var(--row-gap30);background:var(--point-white);border-radius:var(--radius-20);display: flex;gap:var(--row-gap40);width:100%;} .new_insight .video_box{width:53.8%;flex-shrink:0;text-align: center;} .new_insight .main_video .thumb{overflow: hidden;aspect-ratio: auto 1.6;border-radius:var(--radius-15);} .new_insight .main_video .info{text-align: center;margin-top:var(--row-gap30);} .new_insight .main_video .info strong{font-size:var(--text-30);color:var(--black-color01);font-weight:600;line-height:1.4;} .new_insight .video_box .main_more{margin-top:clamp(10px, 1.5vw, 18px);} .new_insight .main_gallery{width:calc(46.2% - var(--row-gap40));display: grid;gap:var(--row-gap20);} .new_insight .main_gallery li + li{padding-top:var(--row-gap20);border-top:1px solid var(--border-color01);} .new_insight .main_gallery li a{display: flex;align-items: center;gap:var(--row-gap30);} .new_insight .main_gallery li .thumb{width:31.1%;aspect-ratio:auto 1.5;overflow:hidden;border-radius:var(--radius-10);flex-shrink:0;} .new_insight .main_gallery li .info{display: grid;gap:var(--row-gap10);} .new_insight .main_gallery li .info span{font-size:var(--text-16);color:var(--point-color02);font-weight:500;line-height:1.4;} .new_insight .main_gallery li .info strong{font-size:var(--text-20);color:var(--black-color01);font-weight:500;line-height:1.5;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp:2;} .new_insight .main_gallery li .info :where(p, .date){display: none;} .insight_box section h3{font-size:var(--text-40);color:var(--black-color01);font-weight:600;line-height:1.4;} .insight_box section:not(.new_insight) .main_gallery{display: grid;gap:var(--row-gap60) var(--row-gap20);grid-template-columns:repeat(4, 1fr);} .insight_box .main_gallery li .thumb {overflow:hidden;border-radius:var(--radius-10);aspect-ratio:auto 1.5;} .insight_box .main_gallery li .info{margin-top:var(--row-gap20);display: flex;flex-direction: column;gap:6px;} .insight_box .main_gallery li .info .cate{display: none;} .insight_box .main_gallery li .info strong{font-size:var(--text-20);color:var(--black-color03);font-weight:500;line-height:1.4;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp:1;} .insight_box .main_gallery li .info p{font-size:var(--text-16);color:var(--black-color05);font-weight:400;line-height:1.4;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp:2;} .insight_box .main_gallery li .info .date{font-size:var(--text-16);color:var(--black-color08);font-weight:400;line-height:1.4;display: block;margin-top: clamp(6px, 1vw, 14px);} @media (max-width:860px) { .new_insight .cont{flex-direction: column;} .new_insight .video_box, .new_insight .main_gallery{width:100%;} .insight_box section:not(.new_insight) .main_gallery{grid-template-columns:repeat(2, 1fr);} } /*list board*/ .list_board{padding-block:var(--row-gap120);} .list_board .w_custom{display:flex;gap:clamp(20px, 2.5vw, 28px);flex-wrap:wrap;} .list_board .list_box{border-radius:var(--radius-20);border:1px solid var(--border-color01);padding:var(--row-gap30);width:calc(50% - clamp(20px, 2.5vw, 28px) / 2);} .list_board .list_box .title{display: flex;align-items: center;justify-content: space-between;} .list_board .list_box .title h3{font-size:var(--text-40);color:var(--black-color01);font-weight:600;line-height:1.4;} .list_board .list_box .title a{display: inline-flex;align-items: center;gap:var(--row-gap10);position: relative;font-size:var(--text-18);color:var(--point-color01);font-weight:600;} .list_board .list_box .title a:before{width:0;height:1px;content:"";background:var(--point-color01);position: absolute;bottom:0;left:0;transition:width 0.3s;} .list_board .list_box .title a:after{width: 12px;height: clamp(8px, 1vw, 10px);content: "";background: url(/images/main_more.svg) no-repeat center / auto 100%;} .list_board .main_board{display:flex;flex-direction:column;gap:clamp(10px, 2vw, 24px);margin-top:var(--row-gap20);} .list_board .main_board li:not(:first-child) .ov_box{display: none;} .list_board .main_board li:not(:first-child) .info{display: flex;align-items: center;justify-content: space-between;gap:var(--row-gap10);} .list_board .main_board li:not(:first-child) .content{display: none;} .list_board .main_board li:not(:first-child) strong{display: flex;align-items: center;gap:var(--row-gap10);max-width:calc(80% - var(--row-gap10))} .list_board .main_board li:not(:first-child) strong:before{width:clamp(3px, 0.3vw, 4px);aspect-ratio:auto 1;content:"";border-radius:100%;background:var(--point-color02);display: inline-block;flex-shrink:0;} .list_board .main_board li:not(:first-child) strong span{font-size:var(--text-18);color:var(--black-color03);font-weight:500;line-height:1.4;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .list_board .main_board li:not(:first-child) .date{font-size:var(--text-16);color:var(--black-color08);font-weight:400;line-height:1.4;flex-shrink:0;} .list_board .main_board li:first-child{background:var(--point-color04);border-radius:var(--radius-10);} .list_board .main_board li:first-child a{display: flex;align-items: center;gap:var(--row-gap30);padding:clamp(15px, 2.2vw, 24px) var(--row-gap30);width:100%;} .list_board .main_board li:first-child .ov_box{display: flex;flex-direction: column;gap:clamp(5px, 0.6vw, 8px);text-align: center;font-size:var(--text-16);color:var(--point-color01);font-weight:500;line-height:1.2;flex-shrink:0;} .list_board .main_board li:first-child .ov_box .day{font-size:var(--text-30);font-weight:700;} .list_board .main_board li:first-child .info{display: flex;flex-direction:column;gap:var(--row-gap10);max-width:80%;} .list_board .main_board li:first-child .info strong{font-size:var(--text-22);color:var(--black-color03);font-weight:500;line-height:1.4;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display: block;;} .list_board .main_board li:first-child .info .content{font-size:var(--text-18);color:var(--black-color05);font-weight:400;line-height:1.4;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display: block;;} .list_board .main_board li:first-child .info .date{display: none;} /* over */ @media (hover:hover) and (pointer:fine){ .list_board .list_box .title a:hover:before{width:100%;} } @media (max-width:860px) { .list_board .list_box{width:100%;} } @media (max-width:350px) { .list_board .main_board li:first-child .info{max-width:70%;} } /*program*/ .main_program{position: relative;padding-block:var(--row-gap140)} .main_program .bg{width:100%;height:100%;position: absolute;top:0;left:0;} .main_program .w_custom .program_box{width:100%;padding:var(--row-gap50);border-radius:var(--radius-30);background:var(--point-white);display: flex;gap:var(--row-gap60);} .main_program .program_box .txt_box{width:500px;flex-shrink:0;display:flex;gap:var(--row-gap30);align-items: flex-start;flex-direction:column;} .main_program .program_box .cate{font-size:var(--text-22);color:var(--point-color01);font-weight:600;line-height:1.4;border:1px solid var(--point-color01);border-radius:60px;padding:7px var(--row-gap20);display: inline-flex;align-items: center;justify-content: center;} .main_program .program_box .title{display: grid;gap:var(--row-gap10)} .main_program .program_box .title h4{font-size:var(--text-46);color:var(--black-color01);font-weight:700;line-height:1.4;} .main_program .program_box .title p{font-size:var(--text-24);color:var(--black-color03);font-weight:500;line-height:1.6;} .main_program .program_box .tag{display: flex;flex-wrap:wrap;gap:var(--row-gap10);} .main_program .program_box .tag li{display: inline-flex;align-items: center;gap:var(--row-gap10);padding:7px var(--row-gap20);background:var(--point-color05);font-size:var(--text-22);color:var(--point-color01);font-weight:600;line-height:1.4;border-radius:60px;} .main_program .program_box .btn_box{margin-top:var(--row-gap20);display: flex;flex-wrap:wrap;width:100%;gap:var(--row-gap20);} .main_program .program_box .btn_box .main_more {width:calc(50% - var(--row-gap20) / 2);} .main_program .program_box .img_box{width:100%;} .main_program .abroad_box .img_box{display: flex;flex-direction: column;gap:var(--row-gap20);align-items: flex-end;} .main_program .abroad_box .img_box .img{overflow:hidden;border-radius:var(--radius-20);aspect-ratio:auto 1.573;width:100%;} .main_program .abroad_box .img_box p{font-size:var(--text-20);color:var(--black-color03);font-weight:400;line-height:1.6;} .main_program .boarding_list{display: grid;gap:var(--row-gap40) clamp(12px, 2vw, 25px);grid-template-columns:var(--grid-array03);} .main_program .boarding_list li .img{overflow:hidden;border-radius:var(--radius-10);aspect-ratio:auto 1.35;width:100%;} .main_program .boarding_list li .info{display: flex;flex-direction: column;gap:6px;margin-top:var(--row-gap20);} .main_program .boarding_list li .info strong{font-size:var(--text-20);color:var(--black-color03);font-weight:500;line-height:1.4;} .main_program .boarding_list li .info p{font-size:var(--text-16);color:var(--black-color05);font-weight:400;line-height:1.4;} @media (max-width:1300px) { .main_program .w_custom .boarding_box .program_box{flex-direction: column;} .main_program .boarding_box .program_box .txt_box{width:100%;} } @media (max-width:1023px) { .main_program .w_custom .program_box{flex-direction: column;} .main_program .program_box .txt_box{width:100%;} .main_program .program_box .tag li .ico{width: clamp(20px, 2vw, 25px);} } @media (max-width:479px) { .main_program .w_custom .program_box{padding:var(--row-gap50) var(--row-gap30);} .main_program .program_box .btn_box .main_more{width:100%;} } /*consult*/ .main_consult{padding-block:var(--row-gap140);} .consult_list{display: grid;gap:var(--row-gap40) clamp(15px, 2.5vw, 28px);grid-template-columns:repeat(3, 1fr);} .consult_list li{border-radius:var(--radius-20);padding:var(--row-gap30) var(--row-gap20);border:1px solid var(--border-color01);display: flex;flex-direction:column;text-align: center;align-items: center;gap:var(--row-gap20);background:var(--point-white);} .consult_list dl{display: flex;flex-direction: column;gap:clamp(4px, 0.8vw, 8px);align-items: center;text-align: center;} .consult_list dl dt{font-size:var(--text-26);color:var(--black-color03);font-weight:600;line-height:1.4;} .consult_list dl dd{font-size:var(--text-20);color:var(--black-color05);font-weight:400;line-height:1.4;} .consult_list .img{width:100%;border-radius:var(--radius-10);aspect-ratio:auto 1.85;overflow:hidden;margin-top:var(--row-gap10);} .consult_list .main_more{width:100%;} @media (max-width:640px) { #wrap .consult_list{grid-template-columns:repeat(1, 1fr);} } /*edu*/ .main_edu{padding-block:var(--row-gap140);} .edu_program{grid-template-columns:repeat(2, 1fr);} .edu_program dl dt{font-size:var(--text-36);} /*employee*/ .main_employee{padding-block:var(--row-gap140);background:var(--point-grad03);} .employee_box{display: flex;gap:var(--row-gap50);align-items: flex-start;} .employee_box .thumb_box{border-radius:var(--radius-20);overflow:hidden;border:1px solid var(--border-color01);width:42.8%;background:var(--point-white);} .employee_box .thumb_box .thumb{position: relative;width:100%;aspect-ratio:auto 1.094;background: var(--point-grad10);overflow: hidden;} .employee_box .thumb_box .thumb::before{position:absolute;content:'';background:url('/images/employee_box.svg') no-repeat center / 100% auto;width: clamp(150px, 30vw, 303px);aspect-ratio: auto 0.987;right: -69px;bottom: -59px;} .employee_box .thumb_box .thumb img{position:relative; z-index:1;} .employee_box .thumb_box .info{border-top:1px solid var(--border-color01);flex-direction:column;gap:var(--row-gap30);padding:var(--row-gap30);display: none;} .employee_box .thumb_box .info.on{display: flex;} .employee_box .thumb_box dl{display: flex;align-items: center;flex-wrap:wrap;justify-content: space-between;padding-bottom:var(--row-gap20);border-bottom:1px solid var(--border-color01);gap:var(--row-gap10);} .employee_box .thumb_box dl dt{font-size:var(--text-40);color:var(--black-color01);font-weight:400;line-height:1.4;font-family:var(--font-type02);} .employee_box .thumb_box dl dd{display: flex;align-items: center;font-size:var(--text-22);color:var(--black-color08);font-weight:400;line-height:1.4;} .employee_box .thumb_box dl dd strong{color:var(--point-color01);font-weight:600;display: flex;align-items: center;} .employee_box .thumb_box dl dd strong:after{width:1px;height:clamp(10px, 1.2vw, 14px);content:"";background:var(--border-color01);display: inline-block;margin:0 clamp(8px, 1vw, 14px);} .employee_box .introduct{display: grid;gap:clamp(8px, 1.2vw, 14px);} .employee_box .introduct > strong{font-size:var(--text-20);color:var(--black-color03);font-weight:500;line-height:1.4;} .employee_box .list{width:calc(57.2% - var(--row-gap50));display: grid;gap:var(--row-gap10);grid-template-columns:var(--grid-array04);} .employee_box .list li{position: relative;border-radius:var(--radius-10);border:1px solid var(--border-color01);overflow:hidden;cursor:pointer;} .employee_box .list li:before{width:100%;height:100%;content:"";border:2px solid var(--point-color01);border-radius:var(--radius-10);position: absolute;top:0;left:0;opacity:0;pointer-events:none;transition:all 0.3s;} .employee_box .list li .img{width:100%;aspect-ratio:auto 1; background: var(--point-grad09);} .employee_box .list li dl{text-align: center;padding:8px 5px;display: flex;flex-direction: column;gap:2px;align-items: center;background:var(--point-white);} .employee_box .list li dl dt{font-size:var(--text-17);color:var(--black-color01);font-weight:400;line-height:1.4;font-family:var(--font-type02);} .employee_box .list li dl dd{font-size:var(--text-16);color:var(--black-color06);font-weight:400;line-height:1.4;} .employee_box .list li.on:before{opacity:1;} .employee_box .list li.on dl{background:var(--point-grad01);} .employee_box .list li.on dl :where(dt, dd){color:var(--point-white);} /* over */ @media (hover:hover) and (pointer:fine){ .employee_box .list li:hover{border-color:var(--point-color01);} } @media (max-width:860px) { .employee_box{flex-direction:column;} .employee_box .thumb_box, .employee_box .list{width:100%;} } @media (max-width:479px) { .employee_box .list{grid-template-columns:repeat(2, 1fr);} } /*inquiry*/ .inquiry_box{background:var(--point-grad01);padding-block:var(--row-gap140);position: relative;} .inquiry_box:before{width:clamp(15vw, 24vw, 460px);aspect-ratio:auto 1.29;content:"";background:url('/images/main_contact_obj.svg')no-repeat center / auto 100%;position: absolute;bottom:0;left:24%;} .inquiry_box .w_custom{display: flex;align-items: flex-start;justify-content: space-between;gap:var(--row-gap50);} .inquiry_box .txt_box{width:400px;position:sticky;top:130px;left:0;display: flex;flex-direction: column;gap:var(--row-gap60);align-items: flex-start;} .inquiry_box .main_title{filter:var(--filter-white);text-align:left;align-items: flex-start;} .inquiry_box .cs_link_box{display: grid;gap:var(--row-gap10);width:100%;} .inquiry_box .cs_link_box li a{display: flex;align-items: center;padding:clamp(10px, 1.4vw, 14px) var(--row-gap30);border-radius:var(--radius-10);border:1px solid rgba(255,255,255,0.4);justify-content: space-between;} .inquiry_box .cs_link_box li .txt{display: flex;flex-direction: column;font-size:var(--text-20);color:var(--point-white);font-weight:400;line-height:1.6;} .inquiry_box .cs_link_box li .txt strong{font-size:var(--text-30);font-weight:600;} .inquiry_box .cs_link_box li em{width:clamp(20px, 3vw, 30px);aspect-ratio:auto 1;border-radius:5px;background:var(--point-white);background:var(--point-white);display: flex;align-items: center;justify-content: center;} .inquiry_box .cs_link_box li em:before{width:12px;height:clamp(8px, 1vw, 10px);content:"";background:url('/images/main_more.svg')no-repeat center / auto 100%;filter:var(--filter-point02);} .contact_form{background:var(--point-white);border-radius:var(--radius-20);padding:var(--row-gap60);width:760px;} .contact_form form{display: flex;flex-wrap:wrap;gap:var(--row-gap30) var(--row-gap20);} .contact_form dl{width:100%;display: flex;flex-direction:column;gap:var(--row-gap10);margin:0;} .contact_form :is(dl[data-field="author_name"], dl[data-field="author_phone"]) {width: calc(50% - var(--row-gap20) / 2);} .contact_form dl dt{font-size:var(--text-20);color:var(--black-color03);font-weight:500;} .contact_form dl dt em{display: none;} .contact_form dl.req dt em{color:var(--point-color02);font-weight:inherit;display: inline;} .contact_form dl .options_box{display: flex;flex-wrap:wrap;gap:var(--row-gap20);} .contact_form dl .input_box:has(input){margin-top:var(--row-gap20);} #wrap .contact_form select{width:100%;} .contact_form .file_box{display: flex;gap:var(--row-gap10);} .contact_form .file_box input[type="file"]{position: absolute;left: -9999px;opacity: 0;} .contact_form .file_box .file_btn{display: inline-flex;border-radius:var(--radius-10);height:clamp(40px, 5vw, 50px);align-items: center;justify-content: center;font-size:var(--text-18);color:var(--point-color01);font-weight:600;border:1px solid var(--point-color01);width:clamp(80px, 12vw, 120px);cursor:pointer;flex-shrink:0;} .contact_form .file_box .file_name{width:100%;display: inline-flex;border-radius:var(--radius-10);height:clamp(40px, 5vw, 50px);align-items: center;border:1px solid var(--border-color01);padding: 0 clamp(10px, 1.5vw, 16px);font-size: var(--text-18);font-weight: 400;color: var(--black-color00);line-height: normal;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;min-width: auto;} .captcha_wrap{display: flex;flex-wrap:wrap;gap:var(--row-gap10);} .captcha_wrap .captcha_box{display: flex;gap:var(--row-gap10);} .captcha_wrap .img{width:140px;height:clamp(40px, 5vw, 50px);border-radius:var(--radius-10);overflow:hidden;position: relative;} .captcha_wrap .img img{width:calc(100% + 2px) !important;height:calc(100% + 2px) !important;position: absolute;top:50%;left:50%;translate:-50% -50%;} .captcha_wrap .refresh_code{width:clamp(40px, 5vw, 50px);aspect-ratio:auto 1;border-radius:var(--radius-10);background:var(--point-white) url('/images/refreshCode.svg')no-repeat center / auto clamp(16px, 1.5vw, 21px);border:1px solid var(--black-color03);} .captcha_wrap #captcha_answer{width:calc(100% - 140px - clamp(40px, 5vw, 50px) - 20px);} .btn_inquiry_box{margin:0;display: flex;align-items: center;justify-content: space-between;width:100%;} .btn_inquiry_box .main_more{width:340px;flex-shrink:0;} /* over */ @media (hover:hover) and (pointer:fine){ .inquiry_box .cs_link_box li:hover em{background:var(--point-color02);} .inquiry_box .cs_link_box li:hover em:before{filter:var(--filter-white);} } @media (max-width:1250px) { .contact_form{width:54%;padding:var(--row-gap60) var(--row-gap30);} .btn_inquiry_box{flex-direction:column;gap:var(--row-gap20);} .btn_inquiry_box .main_more{width:260ox;} } @media (max-width:1023px) { .inquiry_box .w_custom{flex-direction:column;} .inquiry_box .txt_box, .contact_form{width:100%;} .inquiry_box .txt_box{position: static;} .inquiry_box .cs_link_box{grid-template-columns:repeat(3, 1fr);} .btn_inquiry_box{flex-direction:row;} } @media (max-width:640px) { .inquiry_box .cs_link_box{grid-template-columns:repeat(1, 1fr);} .btn_inquiry_box{flex-direction:column;} .contact_form :is(dl[data-field="author_name"], dl[data-field="author_phone"]){width:100%;} } @media (max-width:479px) { .captcha_wrap #captcha_answer{width:100%;} .btn_inquiry_box .main_more{width:100%;} } /*location*/ .main_location{padding-block:var(--row-gap140);} .main_location .w_custom{display: flex;gap:var(--row-gap80);} .main_location .map_box{width:46.44%;aspect-ratio:auto 0.928;border-radius:var(--radius-20);border:1px solid var(--border-color01);position: relative;overflow:hidden;flex-shrink:0;} .main_location .map_box iframe{width:100%;height:100%;position: absolute;top:50%;left:50%;translate:-50% -50%;} .main_location .map_info{width:100%;} .main_location .map_info .main_title{align-items: flex-start;padding-bottom:var(--row-gap50);margin-bottom:var(--row-gap50);border-bottom:1px solid var(--border-color01);text-align:left;} .main_location .map_info .info{display: flex;flex-direction: column;gap:var(--row-gap30);} .main_location .map_info dl{display: flex;align-items: flex-start;gap:var(--row-gap60);font-size:var(--text-18);color:var(--black-color03);font-weight:400;line-height:1.6;} .main_location .map_info dl dt{display: flex;align-items: center;gap:clamp(6px, 1vw, 12px);color:var(--black-color01);font-weight:500;flex-shrink:0;width:clamp(80px, 9vw, 97px);} .main_location .map_info dl dt .ico{width:clamp(16px, 2vw, 24px);} .main_location .map_info dl dd a{font-size:var(--text-30);font-weight:600;} .main_location .traffic{display: grid;gap:var(--row-gap20);} .main_location .traffic > div{display: flex;flex-direction: column;gap:var(--row-gap10);} .main_location .traffic strong{display: inline-flex;align-items: center;justify-content: center;width:clamp(100px, 12vw, 122px);height:30px;background:var(--point-color07);border-radius:30px;text-align: center;font-size:var(--text-16);color:var(--point-white);font-weight:600;line-height:1;} @media (max-width:1023px) { .main_location .w_custom{flex-direction: column;} .main_location .map_box{width:100%;aspect-ratio:auto 1.2;} } @media (max-width:479px) { .main_location .map_info dl{flex-direction: column;gap:var(--row-gap10);} } /*─────────────────────────────────────────────────────────── Footer ───────────────────────────────────────────────────────────*/ #footer{background:var(--black-color01);} #footer .ft_top_box{display: flex;align-items: center;justify-content: space-between;flex-wrap:wrap;gap:var(--row-gap20);padding-block:var(--row-gap70);border-bottom:1px solid rgba(255, 255, 255, 0.20);} #footer .logo_box{display: flex;gap:var(--row-gap80);} #footer .logo{width:clamp(65px, 9vw, 120px);} #footer .info_box{display: flex;flex-direction: column;gap:clamp(20px, 3.5vw, 38px);} #footer .info_box .company{display: grid;gap:var(--row-gap10);font-size:var(--text-18);color:var(--point-white);font-weight:200;line-height:1.4;} #footer .info_box .company p{letter-spacing:-0.02em;} #footer .info_box .company strong{font-size:var(--text-20);font-weight:500;} #footer .addr-list{display:flex;flex-wrap:wrap;gap:var(--row-gap10) var(--row-gap60);} #footer .addr-list .desc{display: flex;align-items: baseline;gap:clamp(8px, 1.4vw, 14px);font-size:var(--text-17);color:var(--black-color10);font-weight:300;position: relative;} #footer .addr-list .desc + .desc:before{width:1px;height:clamp(8px, 1vw, 12px);content:"";background: rgba(255, 255, 255, 0.20);position: absolute;left:calc(var(--row-gap60) / 2 * -1);top:50%;translate:0 -50%;} #footer .addr-list .desc dt{flex-shrink: 0;color:var(--border-color03);} #footer .ft_menu{display: flex;flex-wrap:wrap;flex-direction: column;align-items: flex-end;gap:clamp(10px, 2vw, 24px);translate:0 -7px;} #footer .ft_menu li{display: flex;align-items: center;} #footer .ft_menu a{font-size: var(--text-18);color: var(--point-white);font-weight:300;opacity:1;line-height:1.4;} #footer .ft_menu li:last-child a{font-weight:500;} #footer .ft_menu li:hover a{text-decoration: none;} #footer .ft_copy_box{display: flex;align-items: center;justify-content: space-between;padding:var(--row-gap30) 0 clamp(25px, 4vw, 42px);} #footer .copy{font-size:var(--text-16);color:var(--black-color08);font-weight:300;display: inline-flex;align-items: center;flex-wrap:wrap;gap:var(--row-gap10) var(--row-gap20);font-family:var(--font-type02);} #footer .ft_sns{display: flex;gap:clamp(8px, 1.4vw, 14px);} #footer .ft_sns li a{display: inline-flex;width: clamp(40px, 4.5vw, 48px);aspect-ratio:auto 1;align-items: center;justify-content: center;border:1px solid rgba(255, 255, 255, 0.40);border-radius:100%;} #footer .ft_sns li img{max-width:clamp(16px, 2vw, 20px);} .ft_quick{position: fixed;right:var(--row-gap30);bottom:var(--row-gap30);z-index:10;display: flex;flex-direction: column;align-items: center;gap:var(--row-gap40);opacity:0;pointer-events:none;transition:all 0.3s;} .ft_quick.on{opacity:1;pointer-events:initial;} .ft_quick ul{background:var(--point-color03);border-radius:var(--radius-10);display: flex;flex-direction:column;gap:clamp(10px, 1.5vw, 16px);padding:clamp(12px, 1.6vw, 18px) var(--row-gap10);width:clamp(74px, 10vw, 100px);} .ft_quick ul li + li{padding-top:clamp(10px, 1.5vw, 16px);border-top:1px solid rgba(255,255,255,0.3);} .ft_quick ul li a{display: flex;flex-direction: column;align-items: center;gap:var(--row-gap10);text-align: center;} .ft_quick ul li p{font-size:var(--text-16);color:var(--point-white);font-weight:400;line-height:1.4;} .ft_quick ul li span{font-weight:300;} .ft_top{width:clamp(50px, 6vw, 60px);aspect-ratio:auto 1;border-radius:100%;background:var(--point-color03);display: flex;align-items: center;justify-content: center;} @media (max-width:1250px) { #footer .ft_top_box{gap:var(--row-gap30)} #footer .ft_menu{flex-direction:row;translate:0;} #footer .addr-list{gap:var(--row-gap10) var(--row-gap30);} #footer .addr-list .desc + .desc:before{left:calc(var(--row-gap30) / 2 * -1)} } @media (max-width:860px) { #footer .logo_box{flex-direction:column;gap:var(--row-gap50);} } @media (max-width:640px) { #footer .ft_copy_box{flex-direction:column;align-items: flex-start;gap:var(--row-gap30)} #footer .addr-list .desc + .desc:before{display: none;} } @media (max-width:479px) { #footer .ft_copy_box{padding-bottom:110px;} .ft_quick{position:absolute;} .ft_quick ul{position: fixed;width:100%;bottom:0;left:0;flex-direction: row;gap:0;padding:10px 0;} #wrap .ft_quick ul li{width:25%;padding:0;} #wrap .ft_quick ul li a{height:100%;justify-content: center;} .ft_quick ul li + li{border:none;border-left:1px solid rgba(255,255,255,0.3);} .ft_top{position: fixed;bottom:100px;right:15px;} } /*─────────────────────────────────────────────────────────── Sub ───────────────────────────────────────────────────────────*/ /* 비주얼 */ .sub-visual{position: relative;min-height: clamp(350px, 58vw, 580px);display: flex;flex-direction: column;justify-content: center;background: url('/images/sv_thumb.jpg') no-repeat center / cover;color: var(--point-white);padding-block: clamp(115px, 20vw, 200px) clamp(50px, 10vw, 100px);border-radius: 0 0 clamp(40px, 12vw, 120px);} .sub-visual .title{display: grid;text-align: center;gap: clamp(10px, 1.2vw, 12px);} .sub-visual .title h2{font-size: var(--text-20);font-weight: 300;font-family: var(--font-type02);letter-spacing: 0;} .sub-visual .title h3{font-size: var(--text-60);font-weight: 600;} body:has([data-title="관리형유학"].on) .sub-visual{background-image: url('/images/sv_managed.jpg');} body:has([data-title="초중고유학"].on) .sub-visual{background-image: url('/images/sv_elem.jpg');} body:has([data-title="대학유학"].on) .sub-visual{background-image: url('/images/sv_university.jpg');} body:has([data-title="의대유학"].on) .sub-visual{background-image: url('/images/sv_medical.jpg');} body:has([data-title="동반유학"].on) .sub-visual{background-image: url('/images/sv_together.jpg');} body:has([data-title="보딩스쿨"].on) .sub-visual{background-image: url('/images/sv_boarding.jpg');} body:has([data-title="나무소식"].on) .sub-visual{background-image: url('/images/sv_news.jpg');} body:has(.briefing) .sub-visual{background-image: url('/images/sv_briefing.jpg');} /* 네비 */ .nav-cate{display: none;background: var(--point-white);box-shadow: inset 0 -1px var(--border-color01);} .nav-cate.dep02{display: block;} .nav-cate:not(:has(a:nth-child(2))){display: none;} .nav-cate .lnb{display: flex;width: 100%;} .nav-cate .lnb a{display: flex;align-items: center;justify-content: center;text-align: center;width: 100%;font-size: var(--text-20);color: var(--black-color05);padding: clamp(16px, 2.6vw, 21px) clamp(5px, 1vw, 10px);letter-spacing: -0.03em;transition: all 0.4s;} .nav-cate .lnb a.on{color: var(--point-color02);font-weight: 600;box-shadow: inset 0 -2px var(--point-color02);} @media (hover:hover) and (pointer: fine) { .nav-cate .lnb a:not(.on):hover{color: var(--point-color02); box-shadow: inset 0 -2px var(--point-color02);} } /* page-title */ .page-title{position: relative;margin-bottom: var(--row-gap60);text-align: center;display: flex;flex-direction: column;gap: 10px;text-wrap: balance;} .page-title.left{text-align: left;} .page-title.top-line::before{display: block;content: '';width: 2px;height: clamp(40px, 6.2vw, 60px);background: var(--border-color01);margin: var(--row-gap40) auto var(--row-gap30);} .page-title.btm-line::after{display: block;content: '';width: 2px;height: clamp(40px, 6.2vw, 60px);background: var(--border-color01);margin: var(--row-gap30) auto 0;} .page-title h2{font-size: var(--text-60);font-weight: 700;color: var(--black-color01);line-height: 1.4;} .page-title h2 em{color: var(--point-color09);} .page-title h2 + p{margin-top: var(--row-gap20);} .page-title h3{font-size: var(--text-50);font-weight: 700;color: var(--black-color01);line-height: 1.4;} .page-title h3 + h6{margin-top: var(--row-gap20);} .page-title h3 em{color: var(--point-color02);} .page-title h3.key-pt{position: relative;} .page-title h3.key-pt strong{position: relative;font-weight: inherit;padding-inline: clamp(18px, 2.2vw, 22px);display: inline-block;} .page-title h3.key-pt strong::before{position: absolute;content:'';background: url('/images/key_pt01.svg') no-repeat center / 100% auto;width: calc(100% - 2px);aspect-ratio: auto 2.21;top: 50%;left: 50%;translate: -50% -50%;} .page-title h3.key-pt strong.type02::before{background-image: url('/images/key_pt02.svg')} .page-title h3 + p{margin-top: var(--row-gap20);} .page-title h5{font-size: var(--text-30);font-weight: 500;color: var(--black-color01);line-height: 1.6;} .page-title h5 + p{margin-top: var(--row-gap10);} .page-title h5 em{color: var(--point-color02);} .page-title h6{font-size: var(--text-24);font-weight: 500;color: var(--black-color01);line-height: 1.6;} .page-title h6 + p{margin-top: var(--row-gap10);} .page-title p{font-size: var(--text-20);color: var(--black-color01);line-height: 1.6;letter-spacing: -0.03em;} .page-title p + p{margin-top: var(--row-gap10);} .page-title p strong{font-weight:500;} .page-title p em{color: var(--point-color02);font-weight: 600;} .page-title .line-txt{position: relative;font-size: var(--text-16);color: var(--point-color01);font-family: var(--font-type02);width: 100%;max-width: 461px;margin-inline: auto;} .page-title .line-txt::before{position:absolute;content:'';background: var(--point-color01);top: 50%;left: 0;margin-top: -0.5px;width: 100%;height: 1px;} .page-title .line-txt.op3::before{opacity: 0.3;} .page-title .line-txt em{position: relative;font-weight: inherit;padding-inline: clamp(15px, 3vw, 30px);background: var(--point-white); color: inherit;} .page-title .line-txt + .asterisk-txt{margin-top: var(--row-gap20);} .page-title.left .line-txt{margin-inline: 0;} .page-title.left .line-txt em{padding-left: 0;} .page-title .asterisk-txt{font-size: var(--text-40);font-weight: 600;color: var(--black-color01);line-height: 1.4;display: flex;flex-wrap: wrap;gap: 5px 15px;justify-content: center;letter-spacing: -0.03em;} .page-title .asterisk-txt em{position: relative; color: var(--point-color10);} .page-title .asterisk-txt em::before{position: absolute;content:'';width: calc(100% + 17px);height: 8px;aspect-ratio: auto 1;background: url('/images/asterisk-txt01.svg') no-repeat center / 100% auto;left: -8px;bottom: -1px;} .page-title .asterisk-txt em::after{position: absolute;content:'';width: clamp(18px, 2.6vw, 24px);aspect-ratio: auto 1;background: url('/images/asterisk-txt02.svg') no-repeat center / 100% auto;top: 0;right: 0;translate: 45% -65%;} .page-title .en-pt{font-size: var(--text-16);color: var(--point-color01);line-height: 1.4;font-family: var(--font-type02);} .page-title .en-pt + h3{margin-top: var(--row-gap20);} .page-title .badge{font-size: var(--text-22);font-weight: 600;color: var(--point-color02);display: flex;align-items: center;justify-content: center;gap: 10px;text-align: center;border: 1px solid var(--point-color02);border-radius: 50px;width: fit-content;margin-inline: auto;padding: 5px clamp(15px, 2vw, 20px);} .page-title .badge + .stress{margin-top: var(--row-gap20);} .page-title .badge + h3{margin-top: var(--row-gap20);} .page-title .badge + h5{margin-top: var(--row-gap10);} .page-title .badge img{width: clamp(20px, 2.7vw, 25px);} .page-title .badge.type02{font-size: var(--text-18);color: var(--point-color01);border: 0;background: var(--point-color05);} .page-title .badge.type03{font-size: var(--text-18);} .page-title .stress{font-size: var(--text-40);font-weight: 600;color: var(--black-color01);line-height: 1.4;} .page-title .btn-box{margin-top: var(--row-gap30);} .page-title .under-line::after{display: block;content:'';width: 40px;height: 2px;background: var(--point-color02);margin: var(--row-gap30) auto var(--row-gap10);} /* about-meta */ .about-meta{display: flex;gap: var(--row-gap40) clamp(50px, 5.21vw, 100px);} .about-meta .thumb{border-radius: var(--radius-40);overflow: hidden;width: min(600px, 43%);flex-shrink: 0;} .about-meta .thumb img{width:100%; height:100%; object-fit:cover;} .about-meta .title{position: relative;display: flex;flex-direction: column;justify-content: center;gap: var(--row-gap20);padding-block: 50px; width: 100%;} .about-meta .title h4{font-size: var(--text-30);font-weight: 600;line-height: 1.6;} .about-meta .title h4 + p{margin-top: clamp(10px, 3vw, 30px);} .about-meta .title h4 em{color: var(--point-color01);} .about-meta .title p{font-size: var(--text-19);color: var(--black-color05);line-height: 1.73;letter-spacing: -0.03em;} .about-meta .sign{margin-top: clamp(20px, 4vw, 40px);display: flex;align-items: center;flex-wrap: wrap;gap: 10px 20px;} .about-meta .sign dt{font-size: var(--text-22);color: var(--black-color03);line-height: 1.63;} .about-meta .sign dd{font-size: var(--text-26);font-weight: 500;color: var(--black-color03);line-height: 1.38;} @media (max-width:1023px) { .about-meta{flex-wrap: wrap;} .about-meta .thumb{width: auto;flex-shrink: unset;margin-inline: auto;} .about-meta .title{padding-block: 0;} } /* his-meta */ .his-meta{position: relative;} .his-meta > li{position: relative;display: flex;align-items: flex-start;gap: var(--row-gap40) clamp(50px, 4.2vw, 80px);} .his-meta .title{position: sticky;top: 150px;width: 100%;text-align: right;display: flex;flex-direction: column;gap: clamp(10px, 3vw, 30px);translate: 0 -11px;opacity: 0;translate: 0 70px;transition: all 0.4s;} .his-meta > li:not(:has(~ .on)).on .title{opacity: 1; translate: 0;} .his-meta:not(:has( > li.on)) > li:first-child .title{opacity: 1; translate: 0;} .his-meta .title h4{font-size: var(--text-60);font-weight: 600;line-height: 1.16;} .his-meta .title h4 em{color:var(--point-color02);} .his-meta .title h5{font-size: var(--text-24);font-weight: 400;color: var(--point-color03);line-height: 1.6;} .his-meta .cont{position: relative;width: 50%;flex-shrink: 0;padding-left: clamp(50px, 4.7vw, 89px);padding-bottom: clamp(180px, 30vw, 300px);display: flex;flex-direction: column;gap: clamp(50px, 10vw, 100px);} .his-meta .cont::before{position: absolute;content:'';width: clamp(7px, 1.1vw, 9px);aspect-ratio: auto 1;background: var(--black-color08);top: clamp(10px, 1.8vw, 18px);left: 0;border-radius: 100%;z-index: 1;transition: all 0.4s;} .his-meta > li.on .cont::before{background: var(--point-color02);} .his-meta > li:not(:has(~ .on)).on .cont::before{box-shadow: 0 0 0 clamp(4px, 0.8vw, 6px) var(--point-color08);} .his-meta > li:last-child .cont{padding-bottom: 0;} .his-meta > li:last-child .line{display: none;} .his-meta .desc{display: grid;gap: var(--row-gap30);} .his-meta .desc dt{font-size: var(--text-32);font-weight: 600;color: var(--point-color03);line-height: 1.4;} .his-meta .desc dd{position: relative;} .his-meta .line{position: absolute;top: clamp(15px, 2.3vw, 23px);left: clamp(3px, 0.6vw, 4px);width: 1px;height: 100%;overflow: hidden;background: var(--border-color04);} .his-meta .line em{position: absolute;top: 0;left: 0;width: 100%;background: var(--point-color02);} @media (max-width:640px) { .his-meta{padding-top: 150px;} .his-meta > li{flex-wrap: wrap;} .his-meta .title{text-align: left;translate: 50px;position: absolute;inset: auto;left: 35px;bottom: calc(100% + 15px);width: calc(100% - 70px);} .his-meta > li:has(.aos-animate) .title{translate: 0; opacity: 1;} .his-meta .cont{width: 100%;flex-shrink: unset;padding-left: clamp(35px, 5vw, 50px);} } /* liner-bg */ .liner-bg{position: relative;padding-bottom: var(--row-gap140);} .liner-bg::before{position: absolute;content:'';width: 100%;height: calc(100% + var(--row-gap100));background: url('/images/premium_study.jpg') no-repeat center / cover;top: clamp(-100px, -10vw, -70px);left: 0;} .liner-bg.type02::before{background-image: url('/images/ivyleague01.jpg');} .liner-bg.type03::before{background-image: url('/images/topboarding01.jpg');} .liner-bg.type04::before{background-image: url('/images/boarding01.jpg');} /* manag-compa */ .manag-compa{position: relative;display: flex;gap: clamp(15px, 5vw, 50px) 70px;align-items: flex-start;} .manag-compa .cont{position: relative;width: min(440px, 32%);margin-top: 45px;flex-shrink: 0;} .manag-compa .title{position: relative;background: var(--black-color08);border-radius: var(--radius-20) var(--radius-20) 0 0;text-align: center;color: var(--point-white);padding: clamp(16px, 2.7vw, 22px) 15px;display: flex;flex-direction: column;justify-content: center;gap: 6px;} .manag-compa .title h3{font-size: var(--text-16);font-weight: 300;font-family: var(--font-type02);color: rgb(255 255 255 / 60%);} .manag-compa .title h4{font-size: var(--text-22);font-weight: 600;line-height: 1.2;} .manag-compa .inr{padding: clamp(15px, 1.7vw, 17px);border: 3px solid var(--border-color01);border-top: 0;border-radius: 0 0 var(--radius-20) var(--radius-20);display: grid;gap: var(--row-gap30);} .manag-compa .item-list{position: relative;} .manag-compa .item-list > li{position: relative;} .manag-compa .desc{position: relative;display: flex;align-items: center;gap: clamp(12px, 1.4vw, 14px);padding: 15px 10px;box-shadow: 0 -1px 0 var(--border-color01);} .manag-compa .desc:first-child{padding-top:0;box-shadow: none;} .manag-compa .desc:last-child{padding-bottom:0;} .manag-compa .desc dt{inline-size: clamp(38px, 5.2vw, 50px);aspect-ratio: auto 1;overflow: hidden;display: flex;align-items: center;justify-content: center;padding: 10px;border-radius: 100%;background: var(--gray-bg01);flex-shrink: 0;} .manag-compa .desc dd{font-size: var(--text-18);color: var(--black-color05);line-height: 1.4;width: 100%;} .manag-compa .info-list{position: relative;width: 140px;flex-shrink: 0;display: flex;flex-direction: column;gap: 20px;margin-top: 130px;} .manag-compa .info-list li{position: relative;font-size: var(--text-20);font-weight: 600;color: var(--point-color09);display: flex;align-items: center;justify-content: center;text-align: center;background: var(--point-white);padding: 16px 10px;border-radius: var(--radius-15);box-shadow: var(--shadow-04);} .manag-compa .info-list {& li::before, & span::before{position: absolute;content:'';width: 7px;aspect-ratio: auto 1;background: var(--black-color10);border-radius: 100%;top: 50%;translate: 0 -50%;right: calc(100% + 20px);}} .manag-compa .info-list {& li::after, & span::after{position: absolute;content:'';width: 50px;border-top: 1px dashed var(--black-color10);top: 50%;right: calc(100% + 20px);margin-top: -0.5px;}} .manag-compa .info-list span::before{right: auto;left: calc(100% + 20px);} .manag-compa .info-list span::after{right: auto;left: calc(100% + 20px);} .manag-compa .exp{background: var(--point-color04);padding: clamp(20px, 3vw, 30px);border-radius: var(--radius-10);display: flex;align-items: center;justify-content: center;text-align: center;gap: clamp(20px, 3vw, 1.6px);} .manag-compa .exp{&::before, &::after{display: inline-flex;content:'';width: clamp(26px, 2.1vw, 35px);aspect-ratio: auto 0.5;background: url('/images/leaves.svg') no-repeat center / 100% auto;flex-shrink: 0;}} .manag-compa .exp::after{scale: -1 1;} .manag-compa .exp p{font-size: var(--text-22);font-weight: 500;color: var(--black-color01);line-height: 1.6;letter-spacing: -0.03em;} .manag-compa .exp p em{font-weight:700;color: var(--point-color02);} .manag-compa .cont.pt{width: 100%;flex-shrink: unset;margin-top: 0;} .manag-compa .cont.pt .title{background: var(--point-grad04);padding-inline: clamp(75px, 9.38vw, 180px);max-height: 110px;} .manag-compa .cont.pt .title::before{position: absolute;content:'';width: clamp(50px, 7.3vw, 140px);aspect-ratio: auto 1.077;background: url('/images/badge.png') no-repeat center / 100% auto;filter: drop-shadow(var(--shadow-05));top: 50%;right: clamp(15px, 1.6vw, 30px);translate: 0 -50%;} .manag-compa .cont.pt .title h4{font-size: var(--text-30);} .manag-compa .cont.pt .inr{border-color: var(--point-color09);padding: clamp(15px, 2.7vw, 27px);} .manag-compa .cont.pt .desc{gap: clamp(12px, 2vw, 20px);} .manag-compa .cont.pt .desc dt{background: var(--point-color02);} .manag-compa .cont.pt .desc dd{font-size: var(--text-20);font-weight: 500;color: var(--black-color03);} @media (max-width:1100px) { .manag-compa{flex-wrap: wrap;} .manag-compa .cont{width: 100%;flex-shrink: unset;margin-top: 0;} .manag-compa .info-list{display:none;} .manag-compa .cont.pt .title{max-height: none;} .manag-compa .exp{gap:clamp(15px, 2vw, 20px);} .manag-compa .exp{&::before, &::after{width: clamp(20px, 2.8vw, 26px);}} } /* manag-sys */ .manag-sys{position: relative;padding-block: var(--row-gap140);} .manag-sys .bg{position: absolute;inset: 0;} .manag-sys .bg img{width: 100%;height: 100%;object-fit: cover;} .manag-sys .page-title h3{color: var(--point-white);} .sys-info{display: grid;grid: auto / repeat(3, 1fr);gap: clamp(15px, 1.2vw, 22px);} .sys-info > li{background: var(--point-white);border-radius: var(--radius-20);box-shadow: inset 0 0 0 1px var(--border-color01);padding: clamp(25px, 3vw, 30px);overflow: hidden;display: flex;flex-direction: column;gap: var(--row-gap30);} .sys-info .thumb{display: block;border-radius: var(--radius-10);overflow: hidden;aspect-ratio: auto 1.7;} .sys-info .thumb img{width: 100%;height: 100%;object-fit: cover;} .sys-info .desc{position: relative;} .sys-info .desc dt{font-size: var(--text-30);font-weight: 600;color: var(--black-color03);line-height: 1.5;display: flex;align-items: center;gap: clamp(10px, 1.2vw, 12px);} .sys-info .desc dt img{flex-shrink:0;width: clamp(45px, 6.2vw, 60px);} .sys-info .desc dd{margin-top: clamp(18px, 2.4vw, 24px);padding-top: clamp(18px, 2.4vw, 24px);border-top: 1px solid var(--border-color03);} .sys-info .bullet-list{gap: var(--row-gap10);} @media (max-width:1023px) { .sys-info{grid: auto / repeat(2, 1fr);} } @media (max-width:479px) { .sys-info{grid: auto / repeat(1, 1fr);} } /* dorm-list */ .dorm-list{display: grid;gap: var(--row-gap30);} .dorm-list > li{display: flex;gap: var(--row-gap35) clamp(40px, 3.2vw, 60px);background: var(--point-grad05);border-radius: var(--radius-30);padding: clamp(40px, 2.65vw, 50px);} .dorm-list .cont{width: 100%;display: flex;flex-direction: column;justify-content: center;gap: var(--row-gap30);padding-block: 20px;} .dorm-list .info-desc{position: relative;display: grid;gap: var(--row-gap30);} .dorm-list .info-desc dt{display: flex;align-items: center;justify-content: center;text-align: center;font-size: var(--text-22);font-weight: 600;color: var(--point-color09);width: fit-content;padding: clamp(5px, 1.2vw, 7px) clamp(15px, 2vw, 20px);border: 1px solid var(--point-color09);border-radius: 50px;gap: clamp(8px, 1vw, 10px);} .dorm-list .info-desc dt img{max-width: clamp(18px, 2.7vw, 25px);} .dorm-list .info-desc dd{font-size: var(--text-46);font-weight: 700;color: var(--black-color01);line-height: 1.4;} .dorm-list .exp-desc{display: grid;gap: var(--row-gap20);} .dorm-list .exp-desc dt{position: relative;font-size: var(--text-22);font-weight: 600;color: var(--point-color02);line-height: 1.6;display: flex;align-items: center;gap: clamp(13px, 2vw, 20px);} .dorm-list .exp-desc dt::before{display: flex;content:'';width: clamp(2px, 0.5vw, 3px);height: 85%;background: var(--point-color02);border-radius: 10px;flex-shrink: 0;} .dorm-list .exp-desc dd{font-size: var(--text-20);color: var(--black-color03);line-height: 1.6;} .dorm-list .item{width: min(640px, 50%);flex-shrink: 0;display: flex;flex-direction: column; gap: clamp(15px, 2vw, 20px);} .dorm-list .thumb{position: relative;border-radius: var(--radius-20);overflow: hidden;box-shadow: var(--shadow-04);flex-grow: 1;} .dorm-list .thumb img{width: 100%;height: 100%;object-fit: cover;} .dorm-list .vec-desc{position: absolute;top: clamp(15px, 2vw, 20px);right: clamp(15px, 2vw, 20px);padding: clamp(6px, 1.3vw, 8px) clamp(14px, 1.6vw, 16px);background: var(--point-white);border-radius: 50px;display: flex;align-items: center;justify-content: center;text-align: center;gap: 8px;box-shadow: var(--shadow-04);} .dorm-list .vec-desc dt{max-width: clamp(18px, 2.7vw, 25px);} .dorm-list .vec-desc dd{font-size: var(--text-16);font-weight: 600;color: var(--point-color02);} .dorm-list .score-list{display: grid;grid: auto / repeat(2, 1fr);gap: clamp(40px, 6vw, 60px);} .dorm-list .score-list > li{position: relative;border-radius: var(--radius-10);box-shadow: inset 0 0 0 2px var(--border-color01);text-align: center;padding: clamp(15px, 2vw, 20px) 15px;display: flex;flex-direction: column;justify-content: center;gap: clamp(10px, 1.3vw, 13px);} .dorm-list .score-list > li::before{position: absolute;content:'';width: clamp(28px, 4vw, 40px);aspect-ratio: auto 0.8;clip-path: var(--clip-poly04);background: var(--point-grad06);opacity: 0.3;top: 50%;left: calc(100% + clamp(40px, 6vw, 60px) / 2);translate: -50% -50%;} .dorm-list .score-list > li:last-child{box-shadow: inset 0 0 0 2px var(--point-color09);} .dorm-list .score-list > li:last-child::before{display:none;} .dorm-list .score-list .set-desc{display: grid;gap: clamp(8px, 1.1vw, 11px);} .dorm-list .score-list .set-desc dt{font-size: var(--text-20);font-weight: 500;color: var(--black-color05);line-height: 1.5;} .dorm-list .score-list .set-desc dt em{color: var(--point-color09);} .dorm-list .score-list .set-desc dd{font-size: var(--text-24);font-weight: 500;color: var(--black-color01);line-height: 1.3;display: flex;flex-wrap: wrap;justify-content: center;align-items: center;gap: 4px;} .dorm-list .score-list .set-desc dd strong{font-size: var(--text-40);font-weight: 700;color: var(--black-color01);line-height: 1;} .dorm-list .score-list .tag-box{display: flex;justify-content: center;align-items: center;flex-wrap: wrap;} .dorm-list .score-list .tag-box span{font-size: var(--text-16);color: var(--black-color08);line-height: 1.5;} .dorm-list .score-list .tag-box span::after{display:inline-flex;content:'';width: 1px;height: clamp(8px, 1.2vw, 10px);background: var(--border-color01);margin-inline: 8px;} .dorm-list .score-list .tag-box span:last-child::after{display:none;} .dorm-list > li:nth-child(2n){flex-direction: row-reverse; background: var(--point-white);} .dorm-list > li:nth-child(2n) .vec-desc{right: auto; left: clamp(15px, 2vw, 20px);} @media (max-width:1023px) { .dorm-list > li{flex-wrap: wrap;padding: clamp(25px, 4vw, 40px);} .dorm-list .cont{padding-block:0;} .dorm-list .item{width: auto; flex-shrink: unset;} } @media (max-width:640px) { .dorm-list .score-list{grid: auto / repeat(1, 1fr);} .dorm-list .score-list > li::before{top: calc(100% + clamp(40px, 6vw, 60px) / 2);left: 50%;rotate: 90deg;} } /* img-grid */ .img-grid{display: grid;grid: auto / repeat(3, 1fr);gap: clamp(15px, 1.2vw, 22px);} .img-grid > li{position: relative;padding: 10px;border-radius: var(--radius-10);overflow: hidden;background: var(--point-white);box-shadow: var(--shadow-04);display: flex;align-items: center;justify-content: center;} .img-grid img{border-radius: inherit;} .img-grid.type02{display: flex;justify-content: center;flex-wrap: wrap;gap: clamp(15px, 3.2vw, 60px);} .img-grid.type02 > li{max-width: clamp(240px, 34vw, 340px);} .img-grid.type03{gap: var(--col-gap40);} .img-grid.type03 > li{padding:0;border-radius: var(--radius-20);} @media (max-width:860px) { .img-grid{grid: auto / repeat(2, 1fr);} } @media (max-width:640px) { .img-grid.type02{display: grid; grid: auto / repeat(2, 1fr);} .img-grid.type02 > li{max-width: none;} } @media (max-width:479px) { .img-grid{grid: auto / repeat(1, 1fr);} } /* study-work */ .study-work{position: relative;} .study-work .circle-desc{inline-size: clamp(185px, 25vw, 250px);aspect-ratio: auto 1;border: clamp(10px, 1.7vw, 15px) solid var(--point-color03);border-radius: 100%;background: var(--point-white);display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;gap: clamp(13px, 1.6vw, 16px);padding: 20px;overflow: hidden;margin-inline: auto;} .study-work .circle-desc dt{width: clamp(55px, 8.2vw, 80px);border-radius: 100%;overflow: hidden;} .study-work .circle-desc dd{font-size: var(--text-22);font-weight: 600;color: var(--point-color03);} .study-work .item-list{position: relative;display: grid;grid: auto / repeat(6, 1fr);gap: clamp(10px, 1.15vw, 22px);padding-top: clamp(40px, 6.5vw, 65px);} .study-work .item-list::before{position: absolute;content:'';width: 1px;height: clamp(40px, 6.5vw, 65px);background: var(--border-color01);top: 0;left: 50%;margin-left: -0.5px;} .study-work .item-list > li{position: relative;display: flex;align-items: center;justify-content: center;text-align: center;flex-direction: column;background: var(--point-color03);font-size: var(--text-22);font-weight: 500;color: var(--point-white);border-radius: var(--radius-10);padding: clamp(18px, 3vw, 25px) 10px;margin-top: clamp(30px, 6vw, 60px);line-height: 1.2;} .study-work .item-list > li::before{position:absolute;content:'';width: calc(100% + clamp(10px, 1.15vw, 22px));height: 1px;background: var(--border-color01);left: 50%;bottom: calc(100% + clamp(30px, 6vw, 60px));} .study-work .item-list > li:last-child::before{display:none;} .study-work .item-list > li::after{position:absolute;content:'';inline-size: clamp(9px, 1.2vw, 12px);aspect-ratio: auto 1;border: clamp(2px, 0.5vw, 3px) solid var(--point-color03);background: var(--point-white);border-radius: 100%;left: 50%;bottom: calc(100% + clamp(30px, 6vw, 60px));translate: -50% 50%;} .study-work .item-list > li span::before{position: absolute;content:'';width: 1px;height: clamp(30px, 6vw, 60px);background: var(--border-color01);left: 50%;margin-left: -0.5px;bottom: 100%;} .study-work .item-list > li small{font-size: var(--text-16);font-weight: 300;} @media (max-width:1023px) { .study-work .item-list{grid: auto / repeat(3, 1fr); } .study-work .item-list > li:nth-child(n+4){margin-top: 0;} .study-work .item-list > li:nth-child(n+3)::before{display: none;} .study-work .item-list > li:nth-child(n+4)::after{display: none;} .study-work .item-list > li:nth-child(n+4) span::before{height: clamp(10px, 1.15vw, 22px);} } @media (max-width:479px) { .study-work .item-list{grid: auto / repeat(2, 1fr); } .study-work .item-list > li:nth-child(n+3){margin-top: 0;} .study-work .item-list > li:nth-child(n+2)::before{display: none;} .study-work .item-list > li:nth-child(n+3)::after{display: none;} .study-work .item-list > li:nth-child(n+3) span::before{height: clamp(10px, 1.15vw, 22px);} } /* case-status */ .case-status{display: flex;gap: clamp(50px, 4.2vw, 80px);} .case-status .info{width: 460px;flex-shrink: 0;} .case-status .page-title{position: relative;} .case-status .result-items{display: grid;gap: 20px;} .case-status .result-items .desc{display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;gap: 15px;padding: 23px 30px;box-shadow: inset 0 0 0 1px var(--border-color01), var(--shadow-04);border-radius: var(--radius-10);background: var(--point-white);} .case-status .result-items .desc dt{font-size: var(--text-18);color: var(--black-color04);} .case-status .result-items .desc dd{font-size: var(--text-30);font-weight: 500;color: var(--point-color06);display: flex;align-items: center;gap: 10px;flex-wrap: wrap;} .case-status .result-items .desc dd em{font-size: var(--text-40);font-weight: 700;line-height: 1;} .case-status .attes-list{width: 100%;column-count: 4;column-gap: 20px;} .case-status .attes-list > li{background: var(--point-white);box-shadow: var(--shadow-04);border-radius: var(--radius-10);overflow: hidden;padding: 10px;break-inside: avoid;} /* btn-box */ .btn-box{display: flex;justify-content: center;flex-wrap: wrap;gap: clamp(10px, 2vw, 20px);margin-top: var(--row-gap40);} .icon-btn{display: flex;align-items: center;justify-content: center;gap: clamp(8px, 1.2vw, 10px);text-align: center;padding: 10px clamp(20px, 2.5vw, 25px);border: 1px solid var(--point-color01);border-radius: var(--radius-10);background: var(--point-white);min-width: clamp(250px, 33vw, 320px);min-height: clamp(50px, 6vw, 60px);font-size: var(--text-20);font-weight: 500;color: var(--point-color01);} .icon-btn img{max-height: clamp(20px, 2.9vw, 24px);} .icon-btn.pt01{background: var(--point-color01);color: var(--point-white);font-weight: 400;} .icon-btn.pt01 img{filter: var(--filter-white);} .icon-btn.md{min-width: clamp(200px, 29vw, 280px);} /* btm-inquiry */ .btm-inquiry{position: relative;min-height: clamp(420px, 60vw, 600px);padding-block: var(--row-gap120);display: flex;flex-direction: column;justify-content: center;} .btm-inquiry .bg{position: absolute;inset: 0;overflow: hidden;} .btm-inquiry .bg img{width: 100%;height: 100%;object-fit: cover;} .btm-inquiry .page-title{filter: var(--filter-white);gap: 0;} .btm-inquiry .page-title p{font-size: var(--text-22);font-weight: 300;} /* perfo-graph */ .perfo-graph{position: relative;padding: clamp(40px, 2.65vw, 50px);border-radius: var(--radius-20);background: var(--point-white);display: flex;gap: var(--row-gap120) clamp(50px, 6.25vw, 120px);} .perfo-graph .info{width: min(720px, 56%);flex-shrink: 0;display: flex;flex-direction: column;gap: 64px;} .perfo-graph .btwn{display: flex;align-items: center;justify-content: space-between;gap: 15px 30px;flex-wrap: wrap;} .perfo-graph .title{position: relative;} .perfo-graph .title h4{font-size: var(--text-36);font-weight: 600;color: var(--black-color03);} .perfo-graph .bullet{display: flex;flex-wrap: wrap;gap: 15px 20px;padding: 8px 20px;background: var(--gray-bg01);border-radius: 50px;} .perfo-graph .bullet span{font-size: var(--text-17);color: var(--black-color03);display: flex;align-items: center;gap: clamp(6px, 1vw, 8px);} .perfo-graph .bullet span::before{display:inline-flex;content:'';width: 10px;aspect-ratio: auto 1;background: var(--point-color02);border-radius: 100%;flex-shrink: 0;} .perfo-graph .bullet span.pt01{position: relative;} .perfo-graph .bullet span.pt01::before{background: var(--point-color09);} .perfo-graph .exp{width: 100%;} .graph-wrap{position: relative;height: 255px;display: flex;clip-path: inset(-100% 0 -100% -100%);} .graph-wrap .guide-list{text-align: right;flex-shrink: 0;display: flex;flex-direction: column;justify-content: space-between;margin-block: -11px -13px;} .graph-wrap .guide-list > li{position: relative;font-size: var(--text-16);color: var(--black-color06);padding-right: clamp(10px, 2vw, 20px);background: var(--point-white);} .graph-wrap .guide-list > li::before{position: absolute;content:'';width: 100vw;height: 1px;background: var(--border-color01);top: 50%;left: 100%;margin-top: -0.5px;} .graph-wrap .guide-list > li:last-child::before{display:none;} .graph-wrap .item-list{position: relative;width: 100%;display: grid;grid: auto / repeat(3, 1fr);box-shadow: inset 0 -1px var(--black-color03);} .graph-wrap .item-list > li{position: relative;display: flex;justify-content: center;gap: clamp(10px, 1.5vw, 15px);height: 100%;} .graph-wrap .bar-desc{position: relative;display: flex;flex-direction: column;justify-content: flex-end;gap: clamp(5px, 1vw, 10px);} .graph-wrap .bar-desc dt{font-size: var(--text-20);font-weight: 500;color: var(--black-color03);text-align: center;} .graph-wrap .bar-desc dd{width: clamp(30px, 5.5vw, 50px);background: var(--point-color02);flex-shrink: 0;} .graph-wrap .bar-desc.pt01 dd{background: var(--point-color09);} .graph-wrap .noti{position: absolute;top: calc(100% + clamp(12px, 2vw, 20px));left: 0;width: 100%;text-align: center;font-size: var(--text-18);font-weight: 500;color: var(--black-color03);} .per-grid{display: grid;gap: clamp(10px, 2vw, 20px);} .per-desc{display: flex;align-items: center;justify-content: space-between;background: var(--point-white);border-radius: var(--radius-10);box-shadow: inset 0 0 0 1px var(--border-color01), var(--shadow-04);padding: clamp(15px, 2.5vw, 20px) clamp(20px, 3vw, 30px);gap: 8px 15px;flex-wrap: wrap;} .per-desc dt{font-size: var(--text-18);color: var(--black-color04);} .per-desc dd{font-size: var(--text-30);font-weight: 500;color: var(--point-color06);display: flex;align-items: center;justify-content: center;flex-wrap: wrap;gap: 3px clamp(6px, 1vw, 10px);margin-left: auto;} .per-desc dd strong{font-size: var(--text-40);font-weight: 700;line-height: 1.2;} .per-desc dd small{font-size: var(--text-24);} @media (max-width:1023px) { .perfo-graph{flex-wrap: wrap;padding: clamp(25px, 4vw, 40px);} .perfo-graph .info{width:100%;} } @media (max-width:479px) { .graph-wrap .guide-list > li{font-size: 0;padding-right: 0;} .graph-wrap .bar-desc dt{font-size: 13px;} } /* infra-step */ .infra-step{display: grid;grid: auto / repeat(3, 1fr);gap: clamp(15px, 1.2vw, 22px); counter-reset: infra-step;} .infra-step > li{position: relative;background: var(--point-white);box-shadow: inset 0 0 0 1px var(--border-color01);border-radius: var(--radius-20);padding: clamp(20px, 3vw, 30px);display: flex;flex-direction: column;gap: clamp(20px, 3vw, 30px);} .infra-step .thumb{display: block;aspect-ratio: auto 1.4;border-radius: var(--radius-10);overflow: hidden;} .infra-step .thumb img{width: 100%;height: 100%;object-fit: cover;} .infra-step .desc{position: relative;} .infra-step .desc dt{font-size: var(--text-26);font-weight: 600;color: var(--black-color03);display: flex;align-items: baseline;gap: clamp(12px, 1.6vw, 16px);} .infra-step .desc dt::before{content: counter(infra-step, decimal-leading-zero);counter-increment: infra-step;display: flex;align-items: center;justify-content: center;min-width: clamp(28px, 3.8vw, 36px);min-height: clamp(28px, 3.8vw, 36px);border-radius: var(--radius-05);background: var(--point-color01);font-size: var(--text-16);font-weight: 500;color: var(--point-white);flex-shrink: 0;translate: 0 clamp(-4px, -0.6vw ,-2px);line-height: 1.2;padding: 3px;letter-spacing: 0;} .infra-step .desc dd{margin-top: clamp(17px, 2vw, 20px);padding-top: clamp(18px, 2.4vw, 24px);border-top: 1px solid var(--border-color03);} .infra-step .bullet-list{gap: var(--row-gap10);} .infra-step .bullet-list > li{line-height: 1.5;} @media (max-width:1023px) { .infra-step{grid: auto / repeat(2, 1fr);} } @media (max-width:479px) { .infra-step{grid: auto / repeat(1, 1fr);} } /* linfield-meta */ .linfield-meta{display: flex;align-items: flex-start;gap: 0 50px;} .linfield-meta .page-title{position: sticky;top: 160px;width: 100%;} .linfield-meta .cont{width: min(1000px, 72%);flex-shrink: 0;} .linfield-meta article{display: grid;gap: 20px; grid:auto / minmax(0, 1fr);} .linfield-meta article + article{margin-top: var(--row-gap120); padding-top: var(--row-gap120); border-top: 1px solid var(--border-color01);} .linfield-meta .vec-desc{display: flex;align-items: center;gap: clamp(20px, 3vw, 30px);} .linfield-meta .vec-desc dt{position: relative;inline-size: clamp(75px, 10vw, 100px);aspect-ratio: auto 1;border: 1px solid var(--border-color01);border-radius: 100%;display: flex;align-items: center;justify-content: center;overflow: hidden;padding: 12px;flex-shrink: 0;} .linfield-meta .vec-desc dt::before{position:absolute;content:'';width: 90%;aspect-ratio: auto 1;background: var(--gray-bg01);border-radius: inherit;} .linfield-meta .vec-desc dt img{mix-blend-mode: darken;} .linfield-meta .vec-desc dd{font-size: var(--text-36);font-weight: 600;color: var(--black-color01);width: 100%;} .linfield-meta .linfieldSwiper{position: relative;overflow: hidden;border-radius: var(--radius-20);} .linfield-meta .linfieldSwiper .swiper-slide{overflow: hidden;height: auto;} .linfield-meta .linfieldSwiper .swiper-slide img{min-height: 220px;object-fit: cover;} .linfield-meta .linfieldSwiper .swiper-pagination{position: absolute;inset: auto;left: 50%;bottom: clamp(15px, 4vw, 40px);translate: -50%;margin: 0;display: flex;flex-wrap: wrap;align-items: center;justify-content: center;gap: 12px;background: rgb(0 0 0 / 40%);padding: clamp(7px, 1.5vw, 10px) clamp(15px, 2vw, 20px);width: auto;border-radius: 50px;} .linfield-meta .linfieldSwiper .swiper-pagination span{margin: 0;width: clamp(6px, 1vw, 8px);height: auto;aspect-ratio: auto 1;border-radius: 100%;background: var(--black-color10);opacity: 1;transition: all 0.4s;} .linfield-meta .linfieldSwiper .swiper-pagination .swiper-pagination-bullet-active{background: var(--point-white);} .linfield-meta .bullet-list{gap: var(--row-gap10);} .linfield-meta .bullet-list > li{line-height: 1.5;letter-spacing: -0.03em;} .chk-items{display: grid;grid: auto / repeat(3, 1fr);gap: var(--col-gap20);} .chk-items.array02{grid: auto / repeat(2, 1fr);} .chk-items > li{padding: clamp(20px, 2.5vw, 25px) clamp(20px, 3vw, 30px);background: var(--gray-bg01);border-radius: var(--radius-10);} .chk-items .desc{display: grid;gap: var(--row-gap10);} .chk-items .desc dt{font-size: var(--text-22);font-weight: 600;color: var(--black-color03);line-height: 1.5;display: flex;align-items: baseline;gap: clamp(8px, 1.2vw, 12px);} .chk-items .desc dt::before{display: inline-flex;content: '';width: clamp(12px, 1.7vw, 15px);aspect-ratio: auto 1.25;background: url('/images/chk_i.svg') no-repeat center / 100% auto;translate: 0 clamp(-2px, -0.2vw, 0px);flex-shrink: 0;} .chk-items .desc dd{font-size: var(--text-18);color: var(--black-color05);line-height: 1.6;display: grid;gap: clamp(15px, 2vw, 20px);} .chk-items .desc .noti{background: var(--point-white);padding: clamp(15px, 2vw, 20px);border-radius: var(--radius-05);font-size: var(--text-16);color: var(--black-color08);line-height: 1.5;} .chk-items .desc .noti strong{font-weight:500; color:var(--black-color05)} .chk-items.type02{grid: auto / repeat(4, 1fr);} .chk-items.type02 > li{background: var(--point-white);box-shadow: inset 0 0 0 1px var(--border-color01);padding: clamp(20px, 3vw, 30px);text-align: center;display: flex;flex-direction: column;justify-content: center;} .chk-items.type02 .desc{gap: 4px;} .chk-items.type02 .desc dt{flex-direction: column;align-items: center;font-size: var(--text-24);color: var(--point-color09);gap: clamp(10px, 1.4vw, 14px);} .chk-items.type02 .desc dt::before{width: clamp(24px, 3.4vw, 32px);aspect-ratio: auto 1;border-radius: 100%;background: var(--point-color02) url('/images/chk_i02.svg') no-repeat center / clamp(12px, 1.8vw, 16px) auto;} .chk-items.type02 .desc dd{font-size: var(--text-22);} .chk-items.type03{display:flex;justify-content: center;flex-wrap: wrap;gap: clamp(10px, 1.5vw ,15px) clamp(30px, 4vw, 40px);background: var(--point-white);border-radius: var(--radius-20);box-shadow: var(--shadow-04);padding: clamp(25px, 3.8vw, 40px) clamp(25px, 4vw, 40px);} .chk-items.type03 > li{display:flex;align-items: baseline;background: none;border-radius: 0;padding: 0;gap: clamp(6px, 1.2vw, 12px);font-size: var(--text-22);font-weight: 500;color: var(--black-color05);} .chk-items.type03 > li::before{display:inline-flex;content:'';width: clamp(12px, 1.7vw, 15px);aspect-ratio: auto 1.25;border-radius: 100%;background: url('/images/chk_i.svg') no-repeat center / 100% auto;translate: 0 clamp(-2px, -0.4vw, 0px);flex-shrink: 0;} .chk-items.type04{grid: auto / repeat(1, 1fr);} .chk-items.type05{display: grid;grid: auto / repeat(1, 1fr);} .chk-items.type05 > li{font-size: var(--text-22);color: var(--black-color05);font-weight: 600;line-height: 1.5;gap: clamp(10px, 1.4vw, 14px);background: none;border-radius: 0;padding: 0;display: flex;align-items: center;justify-content: center;letter-spacing: -0.03em;} .chk-items.type05 > li::before{display: inline-flex;content:'';width: clamp(22px, 3.4vw, 32px);aspect-ratio: auto 1;border-radius: 100%;background: var(--point-color02) url('/images/chk_i02.svg') no-repeat center / clamp(10px, 1.8vw, 16px) auto;} @media (max-width:1023px) { .linfield-meta{flex-wrap: wrap;} .linfield-meta .page-title{position: relative; inset: auto;} .linfield-meta .cont{width: 100%; flex-shrink: unset;} .chk-items.type02{grid: auto / repeat(2, 1fr);} } @media (max-width:640px) { .chk-items{grid: auto / repeat(2, 1fr)} } @media (max-width:479px) { .chk-items{grid: auto / repeat(1, 1fr)} .chk-items.array02{grid: auto / repeat(1, 1fr)} } @media (max-width:360px) { .chk-items.type02{grid: auto / repeat(1, 1fr);} } /* 게시판 말머리 */ .prefixes-list{display: flex;justify-content: center;flex-wrap: wrap;background: var(--point-white);box-shadow: var(--shadow-02);width: fit-content;margin-inline: auto;border-radius: clamp(10px, 5vw, 50px);overflow: hidden;margin-bottom: var(--row-gap80);} .prefixes-list a{display: flex;align-items: center;justify-content: center;text-align: center;font-size: var(--text-20);font-weight: 600;color: var(--point-color03);min-width: clamp(120px, 21vw, 200px);min-height: clamp(45px, 6.5vw, 60px);padding: 10px 15px;border-radius: 100px; transition: all 0.4s;} .prefixes-list a.on{background: var(--point-grad02);font-weight: 500;color: var(--point-white);} @media (hover:hover) and (pointer: fine) { .prefixes-list a:not(.on):hover{color: var(--point-color02);} } /* 검색 */ #wrap .search-from{display: flex;align-items: center;justify-content: center;flex-wrap: wrap;gap: 15px;background: var(--point-color04);border-radius: var(--radius-20);padding: clamp(25px, 3.5vw ,35px);margin-bottom: var(--row-gap60);} #wrap .search-from .keywords-box{width: 100%;display: flex;justify-content: center;align-items: center;gap: 10px;} #wrap .search-from .inp-box{position: relative;width: min(461px, 100%);} #wrap .search-from [type="text"]{width: 100%;height: clamp(45px, 6.5vw, 60px);border-color: var(--point-color01);padding-inline: clamp(15px, 2vw, 20px) clamp(60px, 8.5vw, 80px);} #wrap .search-from button{position: absolute;top: 0;right: 0;width: clamp(45px, 6.5vw, 60px);height: 100%;background: url('/images/search_i.svg') no-repeat center / clamp(16px, 2.2vw, 20px) auto;font-size: 0;} #wrap .search-from button::before{position: absolute;content: '';width: 1px;height: clamp(10px, 1.6vw ,14px);background: var(--border-color01);top: 50%;left: 0;translate: 0 -50%;} /* 영상 게시판 */ .video-list{display: grid;grid: auto / repeat(3, 1fr);gap: clamp(30px, 5.6vw, 56px) var(--col-gap40);} .video-list > li{position: relative;display: flex;flex-direction: column;gap: clamp(15px, 2.4vw , 24px);} .video-list .thumb{border-radius: var(--radius-10);overflow: hidden;aspect-ratio: auto 1.76;display: flex;align-items: center;justify-content: center;text-align: center;flex-direction: column;background: var(--gray-bg01);} .video-list .thumb img{width: 100%;height: 100%;object-fit: cover;} .video-list .cont{display: flex;flex-direction: column;justify-content: space-between;gap: clamp(15px, 2.4vw , 24px);flex-grow: 1;} .video-list .no{display:none;} .video-list .desc{display: grid;gap: var(--row-gap10);} .video-list .desc :where(dt, dd){white-space:normal; overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; transition: all 0.4s;} .video-list .desc dt{font-size: var(--text-22);font-weight: 500;color: var(--black-color01);} .video-list .desc dd{font-size: var(--text-18);color: var(--black-color05);} .video-list .regdate{font-size: var(--text-16);color: var(--black-color08);} @media (hover:hover) and (pointer: fine) { .video-list > li:hover .desc dt{color: var(--point-color02);} } @media (max-width:1023px) { .video-list{grid: auto / repeat(2, 1fr);} } @media (max-width:479px) { .video-list{grid: auto / repeat(1, 1fr);} } /* 갤러리 게시판 */ .gallery-list{display: grid;grid: auto / repeat(1, 1fr);border-top: 1px solid var(--black-color01);} .gallery-list > li{position: relative;display: flex;gap: var(--row-gap25) clamp(25px, 2.65vw, 50px);padding: clamp(25px, 3vw, 30px) clamp(20px, 4vw, 40px);border-bottom: 1px solid var(--border-color01);} .gallery-list .thumb{border-radius: var(--radius-10);overflow: hidden;width: min(380px, 30%);aspect-ratio: auto 1.58;display: flex;align-items: center;justify-content: center;text-align: center;flex-direction: column;background: var(--gray-bg01);flex-shrink: 0;} .gallery-list .thumb img{width: 100%;height: 100%;object-fit: cover;} .gallery-list .cont{display: flex;flex-direction: column;justify-content: center;gap: clamp(20px, 2vw , 30px);width: 100%;padding-block: 15px;} .gallery-list .no{display:none;} .gallery-list .desc{display: grid;gap: var(--row-gap10);} .gallery-list .desc :where(dt, dd){white-space:normal;overflow:hidden;text-overflow:ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;transition: all 0.4s;line-height: 1.6;} .gallery-list .desc dt{font-size: var(--text-26);font-weight: 500;color: var(--black-color01);} .gallery-list .desc dd{font-size: var(--text-18);color: var(--black-color05);} .gallery-list .regdate{font-size: var(--text-16);color: var(--black-color08);} @media (hover:hover) and (pointer: fine) { .gallery-list > li:hover .desc dt{color: var(--point-color02);} } @media (max-width:640px) { .gallery-list > li{flex-wrap:wrap;} .gallery-list .thumb{width:auto;margin-inline: auto;flex-shrink: unset;width: 100%;} .gallery-list .cont{padding-block: 0;} } /* 일반 게시판 */ .news-list{display: grid;grid: auto / repeat(1, 1fr);border-top: 1px solid var(--black-color01);} .news-list > li{position: relative;padding-block: clamp(17px, 3.3vw, 28px);border-bottom: 1px solid var(--border-color01);text-align: center;font-size: var(--text-17);color:var(--black-color08);line-height: 1.3;} .news-list .thumb{display: none;} .news-list .thumb img{width: 100%;height: 100%;object-fit: cover;} .news-list .cont{width: 100%;display: flex;align-items: center;gap: clamp(10px, 1.8vw, 18px);} .news-list .no{width: clamp(60px, 14vw, 140px);flex-shrink: 0;} .news-list .no i{display: flex;align-items: center;justify-content: center;width: fit-content;margin-inline: auto;font-size: var(--text-17);font-weight: 600;color: var(--point-color02);line-height: 1.2;border: 1px solid var(--point-color02);padding: clamp(3px, 0.8vw, 6px) clamp(10px, 2vw, 20px);border-radius: 50px;} .news-list .desc{width: 100%;text-align: left;} .news-list .desc :where(dt, dd){white-space:normal;overflow:hidden;text-overflow:ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;transition: all 0.4s;} .news-list .desc dt{font-size: var(--text-18);font-weight: 500;color: var(--black-color03);} .news-list .desc dd{display: none;} .news-list .regdate{flex-shrink: 0;width: clamp(90px, 18vw, 180px);} .news-list > li.noti-item .desc dt{font-size: var(--text-20);} @media (hover:hover) and (pointer: fine) { .news-list > li:hover .desc dt{color: var(--point-color02);} } /* 페이징 */ .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-16);color: var(--black-color08);} .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: var(--radius-05);} .pagination a.arw{font-size: 0;background: url('/images/pagination_last.svg') no-repeat center / auto clamp(8px, 1.2vw, 10px);padding: 0;border: 1px solid var(--border-color01);} .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(--point-color01);} .pagination a.scale{scale: -1 -1;} /* 상세 */ .board-view{position:relative;} .board-view .title-desc{border-top: 1px solid var(--black-color01);border-bottom: 1px solid var(--border-color01);text-align: center;padding-block: clamp(25px, 3.5vw, 35px);display: grid;gap: clamp(20px, 3vw, 30px);} .board-view .title-desc dt{display: grid;gap: var(--row-gap15);font-size: var(--text-30);font-weight: 500;color: var(--black-color01);} .board-view .title-desc dt i{display: flex;align-items: center;justify-content: center;width: fit-content;margin-inline: auto;font-size: var(--text-17);font-weight: 600;color: var(--point-color02);line-height: 1.2;border: 1px solid var(--point-color02);padding: clamp(3px, 0.8vw, 6px) clamp(10px, 2vw, 20px);border-radius: 50px;} .board-view .title-desc dt small{font-size: var(--text-20);font-weight: 400;color: var(--black-color06);} .board-view .title-desc dd{font-size: var(--text-16);color: var(--black-color08);} .board-view .v-cont{font-size: var(--text-16);font-weight: 400;color: var(--black-color03);padding-block: var(--row-gap50);line-height: 1.7;border-bottom: 1px solid var(--border-color01);min-height: 200px;} .submit-act{display:flex;justify-content: center;flex-wrap: wrap;gap: clamp(10px, 2vw, 15px);margin-top: var(--row-gap40);} .submit-act :where(button, a){display:flex;align-items: center;justify-content: center;text-align: center;font-size: var(--text-20);font-weight: 400;color: var(--point-white);border: 1px solid var(--point-color02);min-width: clamp(120px, 19vw, 180px);min-height: clamp(45px, 7vw, 60px);border-radius: 100px;background: var(--point-color02);padding: 10px 20px;} .board-view .btn-box{margin-top:var(--row-gap60);} /* homestay-bg */ .homestay-bg{position: relative; padding-bottom: var(--row-gap140);} .homestay-bg::before{position: absolute;content: '';width: 100%;height: calc(100% + var(--row-gap100));background: url('/images/homestay01.jpg') no-repeat center / cover;top: clamp(-100px, -10vw, -70px);left: 0;} .homestay-bg02{padding-block: var(--row-gap140); background: url('/images/homestay06.jpg') no-repeat center / cover;} /* card-items */ .card-items{display: grid;grid: auto / repeat(4, 1fr);gap: var(--col-gap20);} .card-items > li{position: relative;border-radius: var(--radius-20);box-shadow: var(--shadow-06);background: var(--point-white);padding: 10px;} .card-items .desc{display: grid;gap: var(--row-gap10);} .card-items .desc dt{border-radius: var(--radius-10);overflow: hidden;aspect-ratio: auto 1;} .card-items .desc dt img{width:100%; height:100%; object-fit:cover;} .card-items .desc dd{padding-block: var(--row-gap10);text-align: center;display: flex;align-items: center;justify-content: center;flex-wrap: wrap;gap: 10px;font-size: var(--text-24);color: var(--black-color03);font-family: var(--font-type03);line-height: 1.2;} .card-items .desc dd img{width:clamp(16px, 2.2vw, 20px);} @media (max-width:1023px) { .card-items{grid: auto / repeat(2, 1fr);} } @media (max-width:479px) { .card-items{grid: auto / repeat(1, 1fr);} } /* prog-meta */ .prog-meta{padding: clamp(25px, 5vw, 50px);background: var(--point-white);border-radius: var(--radius-30);display: flex;gap: var(--row-gap35) clamp(40px, 3.2vw, 60px);} .prog-meta .thumb{border-radius: var(--radius-20);overflow: hidden;width: min(640px, 50%);flex-shrink: 0;} .prog-meta .thumb img{width: 100%;height: 100%;object-fit: cover;} .prog-meta .title{width: 100%;display: flex;flex-direction: column;justify-content: center;gap: var(--row-gap20);padding-block: 10px;} .prog-meta .title h6{font-size: var(--text-24);font-weight: 600;line-height: 1.6;} .prog-meta .title h6 em{color: var(--point-color01);} .prog-meta .title h6 + p{margin-top: var(--row-gap10);} .prog-meta .title p{font-size: var(--text-20);font-weight: 300;color: var(--black-color01);line-height: 1.6;} .prog-meta .title p strong{font-weight: 500;text-decoration: underline;text-underline-offset: 4px;} .prog-meta .title p em{font-weight: 600; color:var(--point-color02);} @media (max-width:1023px) { .prog-meta{flex-wrap: wrap;} .prog-meta .thumb{width: auto;margin-inline: auto;flex-shrink: unset;} .prog-meta .title{padding-block: 0;} } /* systematic-list */ .systematic-list{display: grid;grid: auto / repeat(3, 1fr);gap: clamp(15px, 1.2vw, 22px);} .systematic-list > li{position: relative;padding: clamp(25px, 3vw, 30px);box-shadow: inset 0 0 0 1px var(--border-color01);border-radius: var(--radius-20);text-align: center;background: var(--point-white);} .systematic-list .desc{display: grid;gap: clamp(12px, 1.8vw, 18px);} .systematic-list .desc dt{inline-size: clamp(65px, 9.8vw, 98px);aspect-ratio: auto 1;padding: 15px;overflow: hidden;background: var(--gray-bg01);border-radius: 100%;display: flex;align-items: center;justify-content: center;margin-inline: auto;} .systematic-list .desc dd{font-size: var(--text-20);color: var(--black-color01);line-height: 1.6;} .systematic-list .desc dd em{color: var(--point-color01);font-weight: 600;} @media (max-width:1023px) { .systematic-list{grid: auto / repeat(2, 1fr);} } @media (max-width:360px) { .systematic-list{grid: auto / repeat(1, 1fr);} } /* summ-list */ .report-wrap{display: grid;grid: auto / repeat(2, 1fr);gap: var(--col-gap20);} .summ-list{display: grid;grid: auto / repeat(2, 1fr);gap: var(--col-gap20);} .summ-list > li{padding: clamp(25px, 3vw, 30px);background: var(--point-white);border-radius: var(--radius-20);} .summ-list .desc{position: relative;} .summ-list .desc dt{font-size: var(--text-24);font-weight: 600;color: var(--point-color09);display: flex;align-items: center;gap: clamp(10px, 1.4vw, 14px);} .summ-list .desc dt img{flex-shrink:0;width: clamp(16px, 2.4vw, 22px);} .summ-list .desc dd{font-size: var(--text-18);color: var(--black-color05);line-height: 1.5;margin-top: clamp(15px, 2vw, 20px);padding-top: clamp(15px, 2vw, 20px);border-top: 1px solid var(--border-color03);} .summ-list .bullet-list > li::before{background: var(--black-color05);} @media (max-width:1200px) { .report-wrap{grid: auto / repeat(1, 1fr);} } @media (max-width:479px) { .summ-list{grid: auto / repeat(1, 1fr);} } /* situa-list */ .situa-list{display: grid;grid: auto / repeat(4, 1fr);gap: 10px;} .situa-list > li{padding: 10px;background: var(--point-white);border-radius: var(--radius-05);text-align: center;} .situa-list .desc{display: flex;flex-direction: column;gap: 10px;height: 100%;} .situa-list .desc dt{overflow: hidden;border-radius: var(--radius-05);} .situa-list .desc dd{font-size: var(--text-20);font-weight: 500;color: var(--black-color03);padding-block: clamp(3px, 0.8vw, 6px);flex-grow: 1;display: flex;align-items: center;justify-content: center;} @media (max-width:640px) { .situa-list{grid: auto / repeat(2, 1fr);} } /* recom-meta */ .recom-meta{position: relative;display: flex;gap: var(--row-gap35) clamp(40px, 3.2vw, 60px);padding-inline: clamp(30px, 5vw, 50px);} .recom-meta .recomSwiper{position: relative; border-radius: var(--radius-20); overflow: hidden; width: min(680px, 49%);flex-shrink: 0;} .recom-meta .recomSwiper .swiper-slide{position: relative;height: auto; overflow: hidden;} .recom-meta .recomSwiper img{width:100%; height:100%; object-fit:cover;} .recom-meta .recomSwiper .swiper-pagination{position: absolute;inset: auto;left: 0;bottom: 0;display: flex;align-items: center;justify-content: center;padding: clamp(15px, 2vw, 20px);width: 100%;gap: var(--col-gap20); } .recom-meta .recomSwiper .swiper-pagination span{width: clamp(8px, 1.2vw, 10px);aspect-ratio: auto 1;height: auto;margin: 0;background: rgb(255 255 255 / 50%);border-radius: 100%;opacity: 1;} .recom-meta .recomSwiper .swiper-pagination .swiper-pagination-bullet-active{background: var(--point-white);} .recom-meta .descSwiper{width: calc(100% - 48.5% - clamp(40px, 3.2vw, 60px)); overflow: hidden;} .recom-meta .cont{width: 100%;display: flex;flex-direction: column;justify-content: center;padding-block: 30px;} .recom-meta .title{display: grid;gap: var(--row-gap10);} .recom-meta .title h4{font-size: var(--text-38);font-weight: 500;color: var(--black-color01);} .recom-meta .title h4 + p{margin-top: var(--row-gap10);} .recom-meta .title p{font-size: var(--text-17);font-weight: 300;line-height: 1.6;color: var(--black-color05);} .recom-meta .bullet-list{display: grid;grid: auto / repeat(2, 1fr);gap: clamp(12px, 1.6vw, 16px) var(--col-gap20);margin-top: clamp(20px, 3vw, 30px);padding-top: clamp(20px, 3vw, 30px);border-top: 1px solid var(--border-color01);padding-right: 80px;} .recom-meta .bullet-list > li{color: var(--black-color03);} .recom-meta .bullet-list > li::before{background: currentColor;} .recom-meta .swiper-arw{position: absolute;inset: auto;top: 50%;left: clamp(3px, 0.6vw, 6px);aspect-ratio: auto 1;width: clamp(15px, 3vw, 30px);height: auto;border: 2px solid var(--black-color10);border-radius: 2px;clip-path: var(--clip-poly02);rotate: 135deg;} .recom-meta .swiper-arw.next{left: auto;right: clamp(3px, 0.6vw, 6px);scale: -1 -1;} @media (max-width:1023px) { .recom-meta{flex-wrap: wrap;} .recom-meta .recomSwiper{width: 100%; flex-shrink: unset;} .recom-meta .descSwiper{width:100%;} .recom-meta .cont{padding-block: 0;} } @media (max-width:479px) { .recom-meta .bullet-list{padding-right: 0;} } @media (max-width:360px) { .recom-meta .bullet-list{grid: auto / repeat(1, 1fr);} } /* review-items */ .review-items{display: flex;justify-content: center;gap: clamp(15px, 1.2vw, 22px);} .review-items > li{position: relative;padding: 10px;background: var(--point-white);border-radius: var(--radius-20);box-shadow: var(--shadow-04);overflow: hidden;} .review-items > li img{border-radius: var(--radius-20);} @media (max-width:640px) { .review-items{display: grid;grid: auto / repeat(2, 1fr);} } @media (max-width:360px) { .review-items{display: grid;grid: auto / repeat(1, 1fr);} } /* faq-list */ .faq-list{box-shadow: inset 0 0 0 1px var(--border-color01);padding: 10px clamp(25px, 4vw, 40px);background: var(--point-white);border-radius: var(--radius-30);} .faq-list > li{position: relative;border-bottom: 1px solid var(--border-color01);} .faq-list > li:last-child{border-bottom:0;} .faq-list .desc{display: grid;grid-template-rows: auto 0fr;transition: all 0.4s;align-content: start;} .faq-list .desc :where(dt, dd){display: flex;align-items: baseline;gap: clamp(15px, 2vw, 20px);} .faq-list .desc :where(dt, dd)::before{content: 'Q';min-width: clamp(32px, 4.8vw, 46px);min-height: clamp(32px, 4.8vw, 46px);background: var(--point-color01);border-radius: clamp(32px, 4.8vw, 46px);display: flex;align-items: center;justify-content: center;text-align: center;font-size: var(--text-20);color: var(--point-white);line-height: 1.2;padding: 5px;flex-shrink: 0;} .faq-list .desc dt{position: relative;padding-block: clamp(18px, 3.7vw, 32px);padding-right: clamp(40px, 8vw, 80px);font-size: var(--text-22);font-weight: 500;color: var(--black-color03);line-height: 1.6;cursor: pointer;} .faq-list .desc dt::after{position: absolute;content:'';inline-size: clamp(10px, 1.6vw, 14px);aspect-ratio: auto 1;border: 2px solid var(--black-color06);top: 50%;right: clamp(7px, 1.7vw, 17px);clip-path: var(--clip-poly02);rotate: 45deg;translate: 0 -50%;border-radius: 2px;transition: all 0.4s;} .faq-list .desc dt.on::after{border-color: var(--point-color02);scale: -1 -1;top: 55%;} .faq-list .desc dd{background: var(--gray-bg01);border-radius: var(--radius-20);font-size: var(--text-20);color: var(--black-color03);line-height: 1.6;overflow: hidden;padding: clamp(20px, 3vw, 30px);transition: all 0.4s;margin-bottom: 30px;gap: clamp(15px, 3vw, 30px);align-items: flex-start;} .faq-list .desc dd::before{content: 'A';background: var(--point-white);color: var(--point-color02);font-weight: 600;min-width: clamp(32px, 5.2vw, 50px);min-height: clamp(32px, 5.2vw, 50px);border-radius: clamp(32px, 5.2vw, 50px);} .faq-list .desc dd p{display:grid;gap: var(--row-gap10);} .faq-list .desc:has(.on){grid-template-rows: auto 1fr;} .faq-list .desc:not(:has(.on)) dd{padding-block:0;margin-bottom: 0;} /* design-step */ .design-step{counter-reset: design-step;display: grid;grid: auto / repeat(4, 1fr);gap: clamp(36px, 3vw, 56px);} .design-step > li{position: relative;box-shadow: inset 0 0 0 1px var(--border-color01);background: var(--point-white);border-radius: var(--radius-20);padding: clamp(25px, 3vw, 30px);text-align: center;display: flex;flex-direction: column;gap: var(--row-gap20);text-wrap: balance;} .design-step > li::after{position: absolute;content:'';inline-size: clamp(12px, 1.6vw, 14px);aspect-ratio: auto 1;border: 2px solid var(--black-color10);clip-path: var(--clip-poly02);top: 50%;left: calc(100% + clamp(36px, 3vw, 56px) / 2 - 5px);rotate: -45deg;border-radius: 2px;translate: -50% -50%;} .design-step > li:last-child::after{display: none;} .design-step .info-desc{display: grid;gap: var(--row-gap10);} .design-step .info-desc::before{content:'Step ' counter(design-step);counter-increment: design-step;font-size: var(--text-20);font-weight: 500;color: var(--point-color01);} .design-step .info-desc dt{font-size: var(--text-26);font-weight: 600;color: var(--black-color03);} .design-step .info-desc dd{font-size: var(--text-18);font-weight: 500;color: var(--black-color03);} .design-step .icon-desc{display: grid;gap: clamp(12px, 1.8vw, 18px);} .design-step .icon-desc dt{inline-size: clamp(70px, 10vw, 98px);aspect-ratio: auto 1;border-radius: 100%;background: var(--gray-bg01);display: flex;align-items: center;justify-content: center;padding: 15px;overflow: hidden;margin-inline: auto;} .design-step .icon-desc dd{font-size: var(--text-20);color: var(--black-color03);line-height: 1.6;} @media (max-width:1023px) { .design-step{grid: auto / repeat(2, 1fr);} .design-step > li:nth-child(2n)::after{opacity: 0;} } @media (max-width:479px) { .design-step{grid: auto / repeat(1, 1fr);} .design-step > li:nth-child(2n)::after{opacity: 1;} .design-step > li::after{top: calc(100% + clamp(36px, 3vw, 56px) / 2 - 5px);left: 50%;rotate: 45deg;} } /* admiss-meta */ .admiss-meta{display: flex;gap: var(--row-gap50) clamp(50px, 5.25vw, 100px);} .admiss-meta .thumb{width: 50%;flex-shrink: 0;} .admiss-meta .thumb span{display: block;width: calc(100% + 260px);height: 100%;margin-left: -260px;} .admiss-meta .thumb img{width: 100%;height: 100%;object-fit: cover;} .admiss-meta .cont{width: 100%;display: flex;flex-direction: column;justify-content: center;padding-block: 30px;gap: var(--row-gap30);} .admiss-meta .page-title .en-pt + h3{margin-top: var(--row-gap10);} @media (max-width:1023px) { .admiss-meta{flex-wrap: wrap;} .admiss-meta .thumb{width: 100%; flex-shrink: unset;} .admiss-meta .thumb span{width: calc(100% + 60px); margin-left: -30px;} .admiss-meta .cont{padding-block: 0;} } /* core-list */ .core-list{position: relative;border-top: 1px solid var(--border-color01);} .core-list > li{border-bottom: 1px solid var(--border-color01);display: flex;align-items: center;padding-block: 15px;gap: clamp(15px, 2vw, 20px);} .core-list .icon{display: flex;align-items: center;justify-content: center;inline-size: clamp(55px, 7.2vw, 70px);aspect-ratio: auto 1;background: var(--point-color09);flex-shrink: 0;border-radius: 100%;padding: 13px;overflow: hidden;} .core-list .desc{display: flex;flex-direction: column;gap: 2px;} .core-list .desc dt{font-size: var(--text-22);font-weight: 600;line-height: 1.5;color: var(--point-color09);} .core-list .desc dd{font-size: var(--text-18);color: var(--black-color05);line-height: 1.6;} /* strate-list */ .strate-list{display: grid;grid: auto / repeat(3, 1fr);gap: clamp(15px, 1.2vw, 22px);} .strate-list > li{box-shadow: inset 0 0 0 1px var(--border-color01);background: var(--point-white);border-radius: var(--radius-20);padding: clamp(25px, 3vw, 30px);text-align: center;} .strate-list .desc{display: grid;gap: clamp(10px, 1.8vw, 18px);} .strate-list .desc dt{display: flex;align-items: center;justify-content: center;inline-size: clamp(60px, 10vw, 98px);border-radius: 100%;aspect-ratio: auto 1;background: var(--gray-bg01);overflow: hidden;margin-inline: auto;padding: 15px;} .strate-list .desc dd{font-size: var(--text-20);color: var(--black-color01);line-height: 1.6;} .strate-list .desc dd em{color: var(--point-color01);font-weight: 600;} @media (max-width:640px) { .strate-list{grid: auto / repeat(2, 1fr);} } @media (max-width:360px) { .strate-list{grid: auto / repeat(1, 1fr);} } /* activity-list */ .activity-list{display: grid;grid: auto / repeat(4, 1fr);gap: var(--row-gap40) var(--col-gap40);} .activity-list > li{position: relative;text-align: center;} .activity-list .desc{display: grid;gap: clamp(14px, 1.8vw, 18px);} .activity-list .desc dt{padding: 10px;border-radius: 100px;background: var(--point-white);overflow: hidden;} .activity-list .desc dt span{position:relative;display: flex;align-items: center;justify-content: center;} .activity-list .desc dt span::before{position:absolute;content:'';inset: 0;border: 1px solid var(--border-color01);border-radius: 100px;} .activity-list .desc dd{font-size: var(--text-20);font-weight: 500;color: var(--black-color03);} @media (max-width:1023px) { .activity-list{grid: auto / repeat(2, 1fr);} } @media (max-width:479px) { .activity-list{grid: auto / repeat(1, 1fr);} } /* result-items */ .result-items{display: grid;grid: auto / repeat(3, 1fr);gap: clamp(10px, 2vw, 15px);} .result-items > li{background: var(--point-white);border-radius: var(--radius-10);box-shadow: inset 0 0 0 1px var(--border-color01), var(--shadow-04);padding: clamp(20px, 2.5vw, 25px) 10px;text-align: center;display: flex;flex-direction: column;justify-content: center;} .result-items .desc{display: grid;gap: clamp(8px, 1.1vw, 11px);} .result-items .desc dt{font-size: var(--text-18);font-weight: 500;color: var(--black-color02);} .result-items .desc dd{font-size: var(--text-18);color: var(--black-color04);} .result-items .desc .stress{font-size: var(--text-30);font-weight: 500;color: var(--point-color06);display: flex;align-items: center;flex-wrap: wrap;justify-content: center;gap: clamp(5px, 1vw, 10px);} .result-items .desc .stress strong{font-size: var(--text-40);font-weight: 700;line-height: 1;} .result-items .desc .stress small{font-size: var(--text-24);} .result-items .desc .stress em{font-weight: 700;} @media (max-width:479px) { .result-items{grid: auto / repeat(1, 1fr);} } /* top-consult */ .top-consult{display: flex;gap: var(--row-gap40) clamp(50px, 5.25vw, 100px);} .top-consult .cont{width:100%;display: flex;flex-direction: column;gap: var(--row-gap40);} .top-consult .thumb{width: 50%;flex-shrink: 0;border-radius: var(--radius-20);overflow: hidden; box-shadow: var(--shadow-04);} .top-consult .thumb img{width:100%;height: 100%;object-fit: cover;} .top-consult .core-list .icon{background: var(--point-color01);} .top-consult .core-list .desc dt{color: var(--point-color01);} @media (max-width:1023px) { .top-consult{flex-wrap: wrap;} .top-consult .thumb{width:auto;flex-shrink: unset;margin-inline: auto;} } /* leaves-desc */ .leaves-box{display: flex;align-items: center;justify-content: center;text-align: center;gap: clamp(20px, 4vw, 40px);} .leaves-box{&::before, &::after{display: inline-flex;content:'';width: clamp(30px, 4.5vw, 45px);aspect-ratio: auto 0.5;background: url('/images/leaves.svg') no-repeat center / 100% auto;flex-shrink:0;}} .leaves-box::after{scale: -1 1;} .leaves-desc{display: flex;flex-direction: column;gap: var(--row-gap10);} .leaves-desc dt{font-size: var(--text-30);font-weight: 700;line-height: 1.6;} .leaves-desc dt em{color: var(--point-color11);} .leaves-desc dd{font-size: var(--text-22);line-height: 1.6;} /* convent-meta */ .convent-meta{background: url('/images/topboarding03.jpg') no-repeat center / cover; padding-block: var(--row-gap140);} .convent-meta .page-title{filter: var(--filter-white);} .convent-meta .page-title.btm-line::after{opacity: 0.3;} .convent-meta .leaves-desc :where(dt, dd){color: var(--point-white);} .convent-meta .leaves-desc dt{font-weight:600;} .convent-meta .leaves-desc dd{font-weight:300;} /* univer-list */ .univer-list{border-radius: var(--radius-20);border: 1px solid rgb(255 255 255 / 60%);background: var(--point-color12);backdrop-filter: blur(5px);padding: clamp(25px, 5vw, 50px);display: grid;grid: auto / repeat(5, 1fr);gap: clamp(30px, 3.7vw, 37px) 0;} .univer-list > li{padding-inline: 5px;text-align: center;color: var(--point-white);} .univer-list .desc{display: grid;gap: 18px;} .univer-list .desc dt{display: flex;align-items: center;justify-content: center;inline-size: min(150px, 80%);aspect-ratio: auto 1;border-radius: 100%;background: var(--point-white);padding: clamp(15px, 2vw, 20px);margin-inline: auto; overflow: hidden;} .univer-list .desc dd{font-size: var(--text-20);font-weight: 300;} @media (max-width:1023px) { .univer-list{grid: auto / repeat(4, 1fr);} } @media (max-width:640px) { .univer-list{grid: auto / repeat(3, 1fr);} } @media (max-width:479px) { .univer-list{grid: auto / repeat(2, 1fr);} } /* compare-items */ .compare-items{display: grid;grid: auto / repeat(2, 1fr);gap: clamp(60px, 7.3vw, 140px);} .compare-items > li{position: relative;box-shadow: inset 0 0 0 3px var(--border-color01);background: var(--point-white);text-align: center;border-radius: var(--radius-20);} .compare-items > li::before{position: absolute;content:'';background:var(--point-grad06);clip-path: var(--clip-poly04);width: clamp(36px, 3.4vw, 64px);aspect-ratio: auto 0.8;top: 50%;left: calc(100% + clamp(60px, 7.3vw, 140px) / 2);opacity: 0.3;translate: -50% -50%;} .compare-items > li:last-child::before{display: none;} .compare-items .title{position: relative;background: var(--black-color08);color: var(--point-white);padding: clamp(15px, 2.5vw, 20px) 15px;border-radius: var(--radius-20) var(--radius-20) 0 0;} .compare-items .title h6{font-size: var(--text-22);font-weight: 500;letter-spacing: -0.02em;} .compare-items .cont{padding: 20px;display: grid;gap: clamp(15px, 2vw, 20px);} .compare-items .info-list{display: grid;gap: 10px;} .compare-items .info-list > li{font-size: var(--text-18);color: var(--black-color03);background: var(--gray-bg01);border-radius: var(--radius-10);padding: clamp(15px, 2.3vw, 18px) 15px;} .compare-items .desc{display: grid;gap: clamp(7px, 1vw, 9px);} .compare-items .desc dt{font-size: var(--text-20);font-weight: 500;color: var(--black-color05);line-height: 1.5;} .compare-items .desc dd{font-size: var(--text-24);font-weight: 500;color: var(--black-color01);line-height: 1.3;display: flex;align-items: center;flex-wrap: wrap;gap: 5px;justify-content: center;} .compare-items .desc dd strong{font-size: var(--text-40);font-weight: 700;line-height: 1.2;} .compare-items .desc dd small{font-size: var(--text-18);color: var(--black-color08);} .compare-items .prog-list{display: grid;gap: 8px;} .compare-items .prog-desc{display: flex;align-items: center;gap: 10px;text-align: left;} .compare-items .prog-desc dt{min-width: clamp(70px, 9vw, 80px);font-size: var(--text-14);color: var(--black-color05);flex-shrink: 0;} .compare-items .prog-desc dd{width: 100%;display: flex;align-items: center;gap: 10px;font-size: var(--text-14);font-weight: 600;color: var(--black-color03);line-height: 1.5;} .compare-items .prog-desc dd span{min-width: 30px;flex-shrink: 0;text-align: right;} .compare-items progress{appearance: none; width: 100%; height: 10px; border-radius: 10px; overflow:hidden;} .compare-items progress::-webkit-progress-bar{background: var(--border-color03); border-radius: 10px; overflow: hidden;} .compare-items progress::-webkit-progress-value{background: var(--black-color05); border-radius: 10px; overflow: hidden;} .compare-items > li:nth-child(2n){box-shadow: inset 0 0 0 3px var(--point-color09);} .compare-items > li:nth-child(2n) .title{background: var(--point-color09);} .compare-items > li:nth-child(2n) .info-list > li{background: var(--point-color04); color: var(--point-color09); font-weight: 600;} .compare-items > li:nth-child(2n) .desc dt{color: var(--point-color02);} .compare-items > li:nth-child(2n) .prog-desc dd{color: var(--point-color02);} .compare-items > li:nth-child(2n) progress::-webkit-progress-value{background: var(--point-color02);} .compare-items.type02{gap: clamp(40px, 2.85vw, 54px); grid: auto / repeat(2, 1fr);} .compare-items.type02 > li{border-radius: var(--radius-10);box-shadow: inset 0 0 0 2px var(--border-color01);} .compare-items.type02 > li:nth-child(2n){box-shadow: inset 0 0 0 2px var(--point-color09);} .compare-items.type02 > li::before{width: clamp(26px, 1.8vw, 34px);top: 50%;left: calc(100% + clamp(40px, 2.85vw, 54px) / 2);rotate: 0deg;} .compare-items.type02 .title{border-radius: var(--radius-10) var(--radius-10) 0 0;padding-block: 11px;} .compare-items.type02 .title h6{font-size: var(--text-20);} .compare-items.type02 .info-list > li{font-weight: 600;padding-block: 8px;} @media (max-width:1023px) { .compare-items{grid: auto / repeat(1, 1fr);} .compare-items > li::before{top: calc(100% + clamp(60px, 7.3vw, 140px) / 2);left: 50%;rotate: 90deg;} } @media (max-width:640px) { .compare-items.type02{grid: auto / repeat(1, 1fr);} .compare-items.type02 > li::before{top: calc(100% + clamp(40px, 2.85vw, 54px) / 2);left: 50%;rotate: 90deg;} } /* knowhow-list */ .knowhow-list{display: grid;grid: auto /repeat(3, 1fr);gap: clamp(15px, 1.2vw, 22px);} .knowhow-list > li{box-shadow: inset 0 0 0 1px var(--border-color01);border-radius: var(--radius-20);background: var(--point-white);padding: clamp(25px, 3vw, 30px);text-align: center;display: flex;flex-direction: column;} .knowhow-list .desc{display: grid;gap: clamp(12px, 1.7vw, 17px);} .knowhow-list .desc dt{inline-size: min(clamp(70px, 9vw, 87px), 80%);aspect-ratio: auto 1;margin-inline: auto;border-radius: 100%;background: var(--gray-bg01);padding: 10px;overflow: hidden;} .knowhow-list .desc dd{font-size: var(--text-18);font-weight: 500;color: var(--black-color03);display: grid;gap: clamp(10px, 1.4vw, 14px);} .knowhow-list .desc dd strong{font-size: var(--text-36);font-weight: 600;letter-spacing: -0.03em;} .knowhow-list .cont{margin-top: clamp(20px, 3vw, 30px);padding-top: clamp(20px, 3vw, 30px);border-top: 1px solid var(--border-color03);display: flex;flex-direction: column;justify-content: space-between;flex-grow: 1;gap: clamp(20px, 3vw, 30px);font-size: var(--text-18);color: var(--black-color05);line-height: 1.6;} .knowhow-list .bg-box{background: var(--point-color04);border-radius: var(--radius-10);padding: clamp(20px, 2.5vw, 25px) 15px;font-size: var(--text-20);font-weight: 600;color: var(--black-color03);} .knowhow-list .bg-box p em{color: var(--point-color02);} @media (max-width:1023px) { .knowhow-list{grid: auto /repeat(2, 1fr);} } @media (max-width:479px) { .knowhow-list{grid: auto /repeat(1, 1fr);} } /* tag-gallery */ .tag-gallery{display: grid;grid: auto / repeat(3, 1fr);gap: clamp(15px, 1.2vw, 24px);} .tag-gallery > li{position: relative;padding: 10px;border-radius: var(--radius-10);overflow: hidden;background: var(--point-white);box-shadow: var(--shadow-04);text-align: center;display: flex;flex-direction: column;gap: clamp(10px, 1.5vw, 15px);} .tag-gallery .thumb{position: relative;aspect-ratio: auto 1.65;overflow: hidden;border-radius: var(--radius-05);} .tag-gallery .thumb img{width:100%; height:100%; object-fit:cover;} .tag-gallery .label{position: absolute;background: var(--point-color09);top: 10px;left: 10px;max-width: calc(100% - 20px);font-size: var(--text-16);font-weight: 500;color: var(--point-white);padding: clamp(5px, 0.8vw, 6px) clamp(10px, 1.4vw, 14px);border-radius: var(--radius-05);line-height: 1.2;display: flex;align-items: center;justify-content: center;} .tag-gallery .label.pt01{background: var(--point-color14);} .tag-gallery .label.pt02{background: var(--point-color07);} .tag-gallery .desc{display: grid;gap: clamp(8px, 1.4vw, 14px);} .tag-gallery .desc dt{font-size: var(--text-24);font-weight: 600;color: var(--black-color03);display: grid;gap: 5px;} .tag-gallery .desc dt small{font-size: var(--text-16);font-weight: 500;letter-spacing: -0.02em;} .tag-gallery .desc dd{font-size: var(--text-18);color: var(--black-color05);line-height: 1.5; text-wrap:balance;} @media (max-width:860px) { .tag-gallery{grid: auto / repeat(2, 1fr);} } @media (max-width:479px) { .tag-gallery{grid: auto / repeat(1, 1fr);} } /* exclu-list */ .exclu-list{display: grid;grid: auto / repeat(2, 1fr);padding: clamp(25px ,3vw, 30px);border-radius: var(--radius-10);box-shadow: var(--shadow-04);gap: var(--row-gap45) 0;} .exclu-list > li{position: relative;padding-right: clamp(20px, 4vw, 40px);} .exclu-list > li:nth-child(2n){border-left:1px solid var(--border-color01);padding-inline: clamp(20px, 4vw, 40px) 0;} .exclu-list .desc{display: grid;gap: var(--row-gap20);} .exclu-list .desc .icon{display: flex;align-items: center;justify-content: center;inline-size: clamp(40px, 5.2vw, 50px);aspect-ratio: auto 1;border-radius: 100%;background: var(--point-color09);padding: 8px;overflow: hidden;flex-shrink: 0;} .exclu-list .desc dt{font-size: var(--text-22);font-weight: 600;color: var(--point-color09);line-height: 1.5;display: flex;align-items: center;gap: clamp(12px, 2vw, 20px);} .exclu-list .desc dd{line-height: 1.5;} .exclu-list .bullet-list{gap: var(--row-gap10);} .exclu-list .bullet-list > li{line-height: inherit;} @media (max-width:640px) { .exclu-list{grid: auto / repeat(1, 1fr);} .exclu-list > li{padding-right:0;} .exclu-list > li:nth-child(n+2){padding-left:0;padding-top: var(--row-gap45);border-left: 0;border-top: 1px solid var(--border-color01);} } /* sticky-step */ .sticky-step{display: flex;align-items: flex-start;gap: 50px;} .sticky-step .cnt-list{position: sticky;top: 160px;width: 25%;flex-shrink: 0;} .sticky-step .cnt-list > li{position: relative;font-size: var(--text-20);font-weight: 500;color: var(--black-color10);line-height: 1.7;display: flex;align-items: center;gap: 16px;transition: all 0.4s;padding-bottom: 20px; cursor: pointer;} .sticky-step .cnt-list > li::before{display: inline-flex;content:'';width: 9px;aspect-ratio: auto 1;border-radius: 100%;background: var(--black-color10);overflow: hidden;margin: 6px;transition: inherit;z-index: 1;} .sticky-step .cnt-list > li::after{position:absolute;content:'';width: 1px;height: 100%;background: var(--border-color01);top: 17px;left: 10px;} .sticky-step .cnt-list > li.on{color: var(--point-color02);} .sticky-step .cnt-list > li.on::before{background:var(--point-color02);box-shadow: 0 0 0 6px var(--point-color13);} .sticky-step .cnt-list > li:last-child{padding-bottom:0;} .sticky-step .cnt-list > li:last-child::after{display:none;} .sticky-step .cnt-cont{width: 100%; counter-reset: sticky-step; display: flex; flex-direction: column; gap: var(--row-gap30);} .sticky-step .art-box{padding: clamp(25px, 5vw, 50px);background: var(--point-white);box-shadow: var(--shadow-04);border-radius: var(--radius-20);display: flex;flex-direction: column;gap: var(--row-gap30);} .sticky-step .title{position: relative;display: flex;flex-direction: column;gap: var(--row-gap20);} .sticky-step .title h3{width: fit-content;font-size: var(--text-18);font-weight: 600;color: var(--point-color02);box-shadow: inset 0 0 0 1px var(--point-color02);border-radius: 50px;overflow: hidden;display: flex;gap: clamp(15px, 2vw,20px);padding-right: clamp(20px, 3vw, 30px);} .sticky-step .title h3::before{display: inline-flex;align-items: center;content: 'Step ' counter(sticky-step, decimal-leading-zero);counter-increment: sticky-step;padding: 8px clamp(15px, 2vw,20px);background: var(--point-color02);color: var(--point-white);font-size: var(--text-18);font-weight: 400;border-radius: inherit;letter-spacing: 0;flex-shrink: 0;} .sticky-step .title h3 span{display: block;padding-block: 8px;} .sticky-step .title h4{font-size: var(--text-36);font-weight: 600;color: var(--black-color01);} .sticky-step .title h5{font-size: var(--text-20);font-weight: 400;color: var(--black-color03);line-height: 1.6;} .sticky-step .img-grid{gap:clamp(15px, 1.2vw, 24px);} .sticky-step .compare-wrap{display:flex; align-items: flex-end; gap: var(--col-gap20);} .sticky-step .compare-wrap .compare-items{width: min(600px, 68%);flex-shrink: 0;} .sticky-step .situa-list{gap:var(--col-gap20);} .sticky-step .situa-list > li{box-shadow: var(--shadow-04);border-radius: var(--radius-10);} .sticky-step.type02 .art-box{flex-direction: row;} .sticky-step.type02 .title{padding-block:15px; width:50%; flex-shrink:0;} .sticky-step.type02 .title h3{padding: 0;} .sticky-step.type02 .title h3::before{font-weight: 600;color: var(--point-color02);background: none;} .sticky-step.type02 .img-grid{gap:var(--col-gap20); grid: auto / repeat(2, 1fr);} @media (max-width:1200px) { .sticky-step .compare-wrap{flex-wrap: wrap;justify-content: center;} .sticky-step .compare-wrap .compare-items{width: 100%; flex-shrink: unset;} .sticky-step.type02 .title{width:100%; flex-shrink:unset; padding-block: 0;} .sticky-step.type02 .art-box{flex-direction: column;} } @media (max-width:1023px) { .sticky-step{flex-wrap: wrap;} .sticky-step .cnt-list{display: none;} } /* selec-list */ .selec-list{display: grid;grid: auto / repeat(3, 1fr);padding-block: clamp(25px, 4vw, 40px);background: var(--point-white);box-shadow: var(--shadow-04);border-radius: var(--radius-20);gap: var(--row-gap40) 0;} .selec-list > li{position: relative;padding-inline: clamp(30px, 2.65vw, 50px);display: flex;align-items: center;gap: clamp(15px, 2vw, 20px);border-right: 1px solid var(--border-color01);} .selec-list > li:nth-child(3n){border-right:0;} .selec-list > li:last-child{border-right:0;} .selec-list .icon{display: flex;align-items: center;justify-content: center;inline-size: clamp(45px, 7vw, 70px);aspect-ratio: auto 1;padding: 10px;overflow: hidden;background: var(--point-color02);border-radius: 100%;flex-shrink: 0;} .selec-list .desc{display: flex;flex-direction: column;gap: 2px;} .selec-list .desc dt{font-size: var(--text-22);font-weight: 600;color: var(--point-color02);line-height: 1.5;} .selec-list .desc dd{font-size: var(--text-18);color: var(--black-color05);line-height: 1.6;text-wrap: auto;} @media (max-width:1023px) { .selec-list{grid: auto / repeat(2, 1fr);} .selec-list > li{padding-inline: clamp(25px, 3vw, 30px);} .selec-list > li:nth-child(3n){border-right: 1px solid var(--border-color01);} .selec-list > li:nth-child(2n){border-right:0;} } @media (max-width:640px) { .selec-list{grid: auto / repeat(1, 1fr);} .selec-list > li:nth-child(1n){border-right:0;} } /* romarinda-bg */ .romarinda-bg{background: url('/images/romarinda02.jpg') no-repeat center / cover; padding-block: var(--row-gap140);} /* accent-table */ .accent-table{position: relative; padding-block: 10px;} .accent-table .line-bg{position: absolute;top: 0;right: 0;border: 3px solid var(--point-color09);height: 100%;border-radius: var(--radius-20);z-index: 1;pointer-events: none;box-shadow: var(--shadow-04);} .accent-table table{position: relative;text-align: center;} .accent-table th{font-size: var(--text-22);font-weight: 500;color: var(--black-color03);box-shadow: inset 0 1px 0 var(--border-color01);padding: 10px 5px;} .accent-table th:first-child{padding-left:0;} .accent-table th span{display: flex;align-items: center;justify-content: center;background: var(--gray-bg01);border-radius: var(--radius-10);padding: 15px;min-height: clamp(58px, 7.5vw, 70px);} .accent-table th strong{font-weight: 700;display: contents;} .accent-table td{position: relative;font-size: var(--text-19);color: var(--black-color04);line-height: 1.6;box-shadow: inset 0 1px 0 var(--border-color01);padding: 15px;} .accent-table td span{position: relative;} .accent-table tbody th{font-size: var(--text-20);padding-block: clamp(10px, 1.3vw, 13px);} .accent-table tbody th span{min-height: clamp(55px, 7.3vw, 68px);} .accent-table thead th:last-child{padding-inline: 15px 20px;box-shadow: none;} .accent-table thead th:last-child span{background: var(--point-color09);color: var(--point-white);font-weight: 600;} .accent-table tbody td:last-child{font-weight: 500;color: var(--black-color03);box-shadow: none;padding-inline: 25px;} .accent-table tbody td:last-child::before{position:absolute;content:'';width: calc(100% - 25px * 2);height: 1px;background: var(--border-color01);left: 50%;bottom: 0;translate: -50%;} .accent-table tbody tr:last-child td:last-child::before{display:none;} .accent-scroll{width: calc(100% + 60px);padding-inline: 30px;margin-left: -30px;overflow: hidden;overflow-x: auto;} .accent-scroll {-ms-overflow-style: none;scrollbar-width: none; } .accent-scroll::-webkit-scrollbar {display: none;} .accent-scroll .accent-table{min-width: 767px;} /* channel-items */ .channel-items{display: grid;grid: auto / repeat(2, 1fr);gap: clamp(70px, 7.5vw, 144px);} .channel-items > li{position: relative;padding: clamp(25px, 3vw, 30px) 20px;box-shadow: inset 0 0 0 1px var(--border-color01);background: var(--point-white);border-radius: var(--radius-20);display: flex;flex-direction: column;gap: clamp(15px, 2vw, 20px);} .channel-items > li::before{position:absolute;content:'';width: clamp(40px, 3.34vw, 64px);aspect-ratio:auto 1;background: var(--point-color02) url('/images/plus.svg') no-repeat center / clamp(18px , 2.2vw , 20px ) auto;border-radius: 100%;top: 50%;left: calc(100% + clamp(70px, 7.5vw, 144px) / 2);translate: -50% -50%;box-shadow: var(--shadow-07);} .channel-items > li:last-child::before{display:none;} .channel-items .top-sec{text-align: center;display: grid;gap: clamp(10px, 1.4vw, 14px);font-size: var(--text-20);color: var(--black-color05); margin-bottom: var(--row-gap10);} .channel-items .badge{font-size: var(--text-18);font-weight: 600;line-height: 1.2;color: var(--point-color02);border: 1px solid var(--point-color02);border-radius: 50px;padding: clamp(6px, 1.4vw, 9px) clamp(15px, 2vw, 20px);display: flex;align-items: center;justify-content: center;margin-inline: auto;width: fit-content;} .channel-items .title-desc{display: grid;gap: 4px;} .channel-items .title-desc dt{font-size: var(--text-36);font-weight: 600;color: var(--black-color03);} .channel-items .title-desc dd{font-size: var(--text-18);font-weight: 500;color: var(--black-color03);} .channel-items .thumb{border-radius: var(--radius-20);overflow: hidden;aspect-ratio: auto 1.589;} .channel-items .thumb img{width: 100%;height: 100%;object-fit: cover;} @media (max-width:860px) { .channel-items{grid: auto / repeat(1, 1fr);} .channel-items > li::before{top: calc(100% + clamp(70px, 7.5vw, 144px) / 2);left:50%;} } /* circle-items */ .circle-items{padding: clamp(25px, 4vw, 40px);border: 1px dashed var(--point-color02);border-radius: clamp(100px, 20vw, 200px);display: flex;} .circle-items > li{position:relative;inline-size: 100%;aspect-ratio: auto 1;display: flex;align-items: center;justify-content: center;text-align: center;background: var(--point-color09);border-radius: 100%;font-size: var(--text-22);color: var(--point-white);padding: 25px;overflow: hidden;margin-inline: -5px;} .circle-items > li:nth-child(2){background:var(--point-color02);} .circle-items > li:nth-child(3){background:var(--point-color03);} .circle-items > li:nth-child(4){background:var(--point-color02);} .circle-items > li:nth-child(6){background:var(--point-color03);} @media (max-width:1023px) { .circle-items{flex-wrap: wrap;display: grid;grid: auto / repeat(3, 1fr);} .circle-items > li{margin: -5px;width: auto;} .circle-items > li:nth-child(4){background:var(--point-color02);} .circle-items > li:nth-child(5){background:var(--point-color03);} .circle-items > li:nth-child(6){background:var(--point-color09);} } @media (max-width:479px) { .circle-items{grid: auto / repeat(2, 1fr);} .circle-items > li:nth-child(4){background:var(--point-color09);} .circle-items > li:nth-child(5){background:var(--point-color02);} .circle-items > li:nth-child(6){background:var(--point-color03);} } /* term-step */ .term-step{position:relative;counter-reset: term-step;display: grid;grid: auto / repeat(3, 1fr);gap: clamp(15px, 1.2vw, 22px);} .term-step > li{border-radius: var(--radius-20);overflow: hidden;background: var(--point-white);box-shadow: inset 0 0 0 1px var(--border-color01);padding: clamp(25px, 3vw, 30px);} .term-step .desc{position:relative;} .term-step .desc dt{display: flex;align-items: baseline;gap: clamp(12px, 1.6vw, 16px);font-size: var(--text-26);font-weight: 600;color: var(--black-color03);} .term-step .desc dt::before{content: counter(term-step, decimal-leading-zero);counter-increment: term-step;display: flex;align-items: center;justify-content: center;text-align: center;min-width: clamp(30px, 3.8vw, 36px);min-height: clamp(30px, 3.8vw, 36px);padding: 3px;font-size: var(--text-16);font-weight: 500;color: var(--point-white);background: var(--point-color01);border-radius: var(--radius-05);line-height: 1.2;translate: 0 clamp(-3px, -0.5vw, -1px);flex-shrink: 0;} .term-step .desc dd{font-size: var(--text-18);color: var(--black-color05);line-height: 1.5;margin-top: clamp(18px, 2.1vw, 21px);padding-top: clamp(18px, 2.4vw, 24px);border-top: 1px solid var(--border-color03);} @media (max-width:1023px) { .term-step{grid: auto / repeat(2, 1fr);} } @media (max-width:479px) { .term-step{grid: auto / repeat(1, 1fr);} } /* pathway-list */ .pathway-list{display: grid;grid: auto / repeat(3, 1fr);gap: clamp(15px, 1.2vw, 22px);} .pathway-list > li{background: var(--point-white);box-shadow: var(--shadow-04);border: 1px solid var(--point-color02);border-radius: var(--radius-20);padding: clamp(15px, 2vw, 20px);display: flex;flex-direction: column;gap: var(--row-gap30);} .pathway-list .title-desc{text-align: center;background: var(--point-color02);border-radius: var(--radius-10);padding: clamp(18px, 2.9vw, 24px) 15px;color: var(--point-white);display: grid;gap: 4px;} .pathway-list .title-desc dt{font-size: var(--text-26);font-weight: 600;} .pathway-list .title-desc dd{font-size: var(--text-20);color: rgb(255 255 255 / 80%);font-weight: 300;letter-spacing: -0.02em;} .pathway-list .cont{padding-inline: 10px;} .pathway-list .bullet-list{gap: var(--row-gap10);} .pathway-list .bullet-list > li{line-height: 1.5;} .pathway-list .bullet-list > li::before{background: currentColor;} .pathway-list > li:nth-child(2){border-color:var(--point-color09);} .pathway-list > li:nth-child(2) .title-desc{background:var(--point-color09);} .pathway-list > li:nth-child(3){border-color:var(--point-color03);} .pathway-list > li:nth-child(3) .title-desc{background:var(--point-color03);} @media (max-width:1023px) { .pathway-list{grid: auto / repeat(2, 1fr);} } @media (max-width:479px) { .pathway-list{grid: auto / repeat(1, 1fr);} } /* step-details */ .step-details{position: relative; counter-reset: step-details;} .step-details > li{position: relative;padding-left: clamp(40px, 6vw, 60px);display: grid;gap: clamp(20px, 3vw, 30px);padding-bottom: clamp(60px, 10vw, 100px);} .step-details > li:last-child{padding-bottom: 0;} .step-details > li::before{position:absolute;content:'';width: 50px;border-top: 1px dashed var(--black-color10);top: clamp(16px, 2.2vw ,20px);left: 10px;} .step-details > li::after{position:absolute;content:'';width: clamp(7px, 1.1vw, 9px);aspect-ratio: auto 1;background: var(--black-color10);border-radius: 100%;top: clamp(13px, 1.8vw, 16px);left: 0;box-shadow: 0 0 0 clamp(5px, 0.8vw, 8px) rgb(170 170 170 / 10%);margin-inline: clamp(5px, 0.8vw, 8px);transition: all 0.4s;} .step-details .line{position:absolute;top: clamp(16px, 2.2vw ,20px);left: clamp(8px, 1.3vw, 11px);width:1px;height:100%;background: var(--border-color01);overflow: hidden;} .step-details > li:last-child .line{display:none;} .step-details .line em{position:absolute; width:100%; background:var(--point-color02);} .step-details .title{position: relative;display: grid;gap: var(--row-gap20);} .step-details .title h3{font-size: var(--text-18);font-weight: 500;color: var(--black-color10);border: 1px solid var(--black-color10);border-radius: 100px;width: fit-content;padding: clamp(6px, 1vw, 7px) clamp(15px, 2vw, 20px);background: var(--point-white);transition: all 0.4s;} .step-details .title h3::before{content:'Step ' counter(step-details, decimal-leading-zero);counter-increment: step-details;font-weight: 600;transition: inherit;} .step-details .title h3 span{position: relative;} .step-details .title h3 span::before{display:inline-flex;content:'';width: 1px;height: clamp(10px, 1.4vw, 14px);background: var(--border-color01);margin-inline: clamp(12px, 1.4vw, 14px);} .step-details .title h4{font-size: var(--text-36);font-weight: 600;color: var(--black-color02);line-height: 1.3;} .step-details .title h5{font-size: var(--text-20);font-weight: 300;color: var(--black-color03);line-height: 1.6;} .step-details .title h5 strong{font-weight: 500;} .step-details .chk-items .desc{gap:clamp(15px, 2vw, 20px)} .step-details .bullet-list > li{line-height:1.5;} .step-details .bullet-list > li::before{background: currentColor;} .step-details > li.on .title h3{color:var(--point-color02); border-color:var(--point-color02);} .step-details > li.on::before{border-color: var(--point-color02);} .step-details > li.on::after{background: var(--point-color02);box-shadow: 0 0 0 clamp(5px, 0.8vw, 8px) var(--point-color13);} /* together-intro */ .together-intro{padding: clamp(40px, 2.65vw, 50px);border-radius: var(--radius-30);box-shadow: var(--shadow-04);display: flex;gap: var(--row-gap35) clamp(40px, 3.2vw, 60px);border: 1px solid var(--border-color01);} .together-intro .thumb{border-radius: var(--radius-20);overflow: hidden;width: min(640px, 50%);flex-shrink: 0;} .together-intro .thumb img{width: 100%;height: 100%;object-fit: cover;} .together-intro .title{width: 100%;display: flex;flex-direction: column;justify-content: center;gap: clamp(10px, 2vw, 20px);padding-block: 30px;} .together-intro .title h3{font-size: var(--text-40);font-weight: 700;color: var(--point-color01);line-height: 1.6;text-wrap: auto;} .together-intro .title h3 + p{margin-top: var(--row-gap10);} .together-intro .title p{font-size: var(--text-20);font-weight: 300;color: var(--black-color01);line-height: 1.6;letter-spacing: -0.03em;} .together-intro .title p strong{font-weight: 500;text-decoration: underline;text-underline-offset: 3px;} @media (max-width:1023px) { .together-intro{flex-wrap: wrap;padding: clamp(25px, 4vw, 40px);} .together-intro .thumb{width:auto;flex-shrink: unset;margin-inline: auto;} .together-intro .title{padding-block: 0;} } /* fitness-desc */ .fitness-wrap{display: grid;gap: clamp(15px, 2.2vw, 22px);} .fitness-desc{display: flex;gap: clamp(50px, 7.5vw, 144px);} .fitness-desc > :where(dt, dd){background: var(--point-white);border-radius: var(--radius-20);width: 100%;padding: clamp(20px, 3vw, 30px);} .fitness-desc > dt{position: relative; box-shadow: inset 0 0 0 1px var(--border-color01);display: flex;flex-direction: column;align-items: center;justify-content: center;} .fitness-desc > dt::before{position: absolute;content:'';width: clamp(32px, 3.34vw, 64px);aspect-ratio: auto 0.8;background: var(--point-grad06);opacity: 0.3;clip-path: var(--clip-poly04);top: 50%;left: calc(100% + clamp(50px, 7.5vw, 144px) / 2);translate: -50% -50%;} .fitness-desc > dd{border-radius: var(--radius-20);background: var(--point-white);box-shadow: inset 0 0 0 clamp(2px, 0.5vw, 3px) var(--point-color09), var(--shadow-04);width: 100%;} .fitness-desc .bullet-list{gap: var(--row-gap10);} .fitness-desc .bullet-list > li{color: var(--black-color03);letter-spacing: -0.03em;} @media (max-width:1023px) { .fitness-desc{flex-wrap: wrap;} .fitness-desc > dt::before{position: absolute;top: calc(100% + clamp(50px, 7.5vw, 144px) / 2);left: 50%;rotate: 90deg;} } /* visa-step */ .visa-step{position:relative;counter-reset: visa-step;display: grid;grid: auto / repeat(3, 1fr);gap: clamp(36px, 3.34vw, 64px);} .visa-step > li{position:relative;box-shadow: inset 0 0 0 1px var(--border-color01);background: var(--point-white);border-radius: var(--radius-20);padding: clamp(25px, 3vw, 30px);text-align: center;display: flex;flex-direction: column;gap: var(--row-gap20);} .visa-step > li::before{position: absolute;content:'';inline-size: clamp(12px, 0.8vw, 15px);aspect-ratio: auto 1;border: 2px solid var(--black-color10);clip-path: var(--clip-poly02);rotate: -45deg;border-radius: 2px;overflow: hidden;top: 50%;left: calc(100% + clamp(36px, 3.34vw, 64px) / 2 - clamp(3px, 0.21vw, 4px));translate: -50% -50%;} .visa-step > li:last-child::before{display:none;} .visa-step > li.down::before{top: calc(100% + clamp(36px, 3.34vw, 64px) / 2 - clamp(3px, 0.21vw, 4px));left: 50%;rotate: 45deg;} .visa-step > li.reverse::before{left: auto;right: calc(100% + clamp(40px, 3.34vw, 64px) / 2 - clamp(3px, 0.21vw, 4px));scale: -1 -1;translate: 50% -50%;} .visa-step .title{display: grid;gap: var(--row-gap10);} .visa-step .title::before{content:'Step ' counter(visa-step, decimal-leading-zero);counter-increment: visa-step;font-size: var(--text-20);font-weight: 500;color: var(--point-color01);} .visa-step .title p{font-size: var(--text-26);font-weight: 600;color: var(--black-color03);} .visa-step .desc{display: grid;gap: clamp(10px, 1.8vw, 18px);} .visa-step .desc dt{inline-size: clamp(60px, 10vw, 98px);aspect-ratio: auto 1;padding: 15px;border-radius: 100%;overflow: hidden;display: flex;align-items: center;justify-content: center;margin-inline: auto;background: var(--gray-bg01);} .visa-step .desc dd{font-size: var(--text-20);color: var(--black-color03);line-height: 1.6;} .visa-step .bullet-list{gap:var(--row-gap10); margin-top:clamp(5px, 1vw ,10px); padding-top:var(--row-gap30); border-top: 1px solid var(--border-color01);} .visa-step.be_phase .title::before{content: 'Phase ' counter(visa-step);} .visa-step.array04{grid: auto / repeat(4, 1fr);gap: clamp(36px, 2.92vw, 56px);} .visa-step.array04 > li::before{left: calc(100% + clamp(36px, 2.92vw, 56px) / 2 - clamp(3px, 0.21vw, 4px));} .visa-step.array04 > li.down::before{left:50%; top:calc(100% + clamp(36px, 2.92vw, 56px) / 2 - clamp(3px, 0.21vw, 4px));} .visa-step.array04 > li.reverse::before{left:auto; right:calc(100% + clamp(36px, 2.92vw, 56px) / 2 - clamp(3px, 0.21vw, 4px));} /* operat-list */ .operat-list{display: grid;grid: auto / repeat(3, 1fr);gap: clamp(15px, 1.2vw, 22px);} .operat-list > li{position: relative;box-shadow: var(--shadow-04);border-radius: var(--radius-20);padding: clamp(15px, 2vw, 20px);display: flex;flex-direction: column;gap: clamp(15px, 2vw, 20px);} .operat-list > li::before{position: absolute; content:''; inset:0; border: 1px solid var(--point-color02); border-radius:inherit;} .operat-list .title{position: relative;background: var(--point-color02);text-align: center;color: var(--point-white);padding: clamp(15px, 2.5vw, 20px) 15px;border-radius: var(--radius-10);} .operat-list > li:nth-child(2)::before{border-color: var(--point-color09);} .operat-list > li:nth-child(3)::before{border-color: var(--point-color03);} .operat-list > li:nth-child(2) .title{background: var(--point-color09);} .operat-list > li:nth-child(3) .title{background: var(--point-color03);} .operat-list .title h5{font-size: var(--text-22);font-weight: 600;} .operat-list .thumb{border-radius: var(--radius-05);overflow: hidden;} @media (max-width:1023px) { .operat-list{grid: auto / repeat(2, 1fr);} } @media (max-width:479px) { .operat-list{grid: auto / repeat(1, 1fr);} } /* bg-title */ .bg-title{position:relative;width: fit-content;margin-inline: auto;padding: 10px 22px;min-width: 300px;min-height: 70px;background: var(--point-color02);display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;color: var(--point-white);border-radius: 100px;} .bg-title.pt01{background:var(--point-color09);} .bg-title.pt02{background:var(--point-color03);} .bg-title h5{font-size: var(--text-26);font-weight: 600;} /* briefing-info */ .briefing-info{display: flex;align-items: flex-start;gap:var(--row-gap60) 70px;} .briefing-info .page-title{position: sticky;top: 180px;width: 100%; padding-top: 80px; margin-bottom: 0;} .briefing-info .page-title::before{position:absolute;content:'';width: clamp(140px, 15.2vw, 290px);aspect-ratio: auto 0.996;background: url('/images/briefing_i01.svg') no-repeat center / 100% auto;top: 0;left: clamp(-180px, -9.4vw, -90px);} .briefing-info .thumb-list{width: min(640px, 46%);flex-shrink: 0;display: grid;gap: var(--row-gap30);} .briefing-info .thumb-list > li{border-radius: var(--radius-20);overflow: hidden;width: fit-content;} @media (max-width:1023px) { .briefing-info{flex-wrap:wrap;} .briefing-info .page-title{position: relative;inset: auto;padding-top: 0;} .briefing-info .thumb-list{width:100%; flex-shrink:unset;} } /* 문의하기 */ #wrap .contact-form{position: relative;} #wrap .contact-form .field-items{border-top: 1px solid var(--black-color01);border-bottom: 1px solid var(--border-color01);padding: clamp(25px, 4vw, 40px);display:flex;align-items: baseline;flex-wrap: wrap;gap: var(--row-gap30) clamp(40px, 3.2vw, 60px);} #wrap .contact-form .desc{width: calc(100% / 2 - clamp(40px, 3.2vw, 60px) / 2);display: flex;align-items: baseline;gap: var(--row-gap10) clamp(15px, 2vw, 20px);} #wrap .contact-form .desc dt{width: clamp(120px, 7vw, 130px);flex-shrink: 0;font-size: var(--text-20);font-weight: 500;color: var(--black-color03);} #wrap .contact-form .desc dt em{color: var(--point-color02);} #wrap .contact-form .desc dd{width: 100%;font-size: var(--text-20);color: var(--black-color03);display: flex;flex-wrap: wrap;gap: 10px;align-items: center;} #wrap .contact-form :where([type="text"], [type="password"], [type="number"], [type="tel"], [type="email"], select){width: 100%;padding-inline: clamp(15px, 2vw, 20px);} #wrap .contact-form select{padding-right: clamp(35px, 5vw, 50px);} #wrap .contact-form .desc:has(.select-list){width:100%;} #wrap .contact-form .desc:has(.db-captcha-img){align-items: center;} #wrap .contact-form .captcha_wrap{flex-wrap: nowrap;} #wrap .contact-form .select-list{display:flex; flex-wrap:wrap; gap:clamp(15px, 2vw, 20px); width:100%;} #wrap .privacy-box{margin-top: var(--row-gap30);display: grid;gap: clamp(15px, 2vw, 20px);} #wrap .privacy-box .cont{padding: clamp(12px, 2vw, 15px) clamp(15px, 2vw, 20px);border: 1px solid var(--border-color01);border-radius: var(--radius-10);height: clamp(120px, 20vw, 200px);overflow: hidden;overflow-y: auto;font-size: var(--text-15);font-weight: 400;color: var(--black-color08);line-height: 1.7;} #wrap .privacy-box .cont strong{font-weight: 500;} #wrap .privacy-box .cont *{font-size:inherit;} #wrap .privacy-box .info-title h4.bullet::before{width: clamp(5px, 1vw, 8px);} #wrap .privacy-box .cont{ scrollbar-gutter: stable;} #wrap .privacy-box .cont::-webkit-scrollbar {width: clamp(3px, 0.6vw, 4px);} #wrap .privacy-box .cont::-webkit-scrollbar-track {box-shadow:-10px 0 0 var(--border-color03); border-radius: 10px; margin: 10px;} #wrap .privacy-box .cont::-webkit-scrollbar-thumb {box-shadow:-10px 0 0 var(--black-color10); border-radius: 10px;} #wrap .contact-form .addr_box{display: flex;flex-direction:column;gap:var(--row-gap10);width:100%;} #wrap .contact-form .flex_box{display: flex;gap:var(--row-gap10);} #wrap .contact-form .flex_box input{width:100%;} #wrap .contact-form .flex_box #address{width:min(570px, 100%);flex-shrink:0;} #search-address{display: inline-flex;height:clamp(42px, 7.5vw, 60px);width:clamp(80px, 12vw, 120px);justify-content: center;align-items: center;border-radius:var(--radius-06);border:1px solid var(--black-color00);font-size:var(--text-20);color:var(--black-color03);font-weight:600;} #wrap .contact-form .addr_box .zip_box input{width:calc(min(570px, 100%) - clamp(80px, 12vw, 120px) - var(--row-gap10));} #wrap .contact-form .phone_field .flex_box :is(select, input){width:calc(100%/ 3 - var(--row-gap10) * 2 / 3);} #wrap .contact-form .btn-box{margin-top: var(--row-gap60);} @media (max-width:1300px) { #wrap .contact-form .desc{width:100%;} } @media (max-width:1023px) { #wrap .contact-form .desc dt{width: clamp(90px, 13vw, 130px);} } @media (max-width:640px) { #wrap .contact-form .captcha_wrap{flex-wrap:wrap;} } @media (max-width:479px) { #wrap .contact-form .desc{flex-wrap:wrap;} #wrap .contact-form .desc dt{width:100%; flex-shrink:unset;} } /* complete */ #wrap .complete_box {text-align: center;display: grid;gap: var(--row-gap15);} #wrap .complete_box .bf-complete-icon{width: clamp(70px, 8vw, 80px);height: auto;aspect-ratio: auto 1;margin: 0 auto var(--row-gap15);background-color: var(--gray-bg01);} #wrap .complete_box h4 {font-size: var(--text-30);color: var(--black-color01);font-weight: 500;} #wrap .complete_box p {font-size: var(--text-18);color: var(--black-color06);} #wrap .complete_box .view_btn {margin-top: var(--row-gap50);}