/* 폼 컨트롤 공통 높이 — select / input / 검색버튼 / 초기화버튼이 한 줄에서 어긋나지 않도록 한 곳에서 관리 */ :root{--form-h:clamp(48px, 6vw, 60px);} #wrap{position: relative; overflow: clip;} .w_custom{position: relative; width: calc(100% - 60px); max-width: 1280px; margin-inline: auto;} .w_custom.main{width:100%;max-width:100%;} #container{padding-bottom:var(--row-gap140);} #container:has(.site-main){padding:0;} #container:has(.full-sec){width: 100%; max-width:100%;} #container:has(.pd-dn){padding-bottom:0;} /* body::-webkit-scrollbar {display: none; } */ body [class*="swiper-button"]:after{display: none;} .swiper{min-width:0;}/* flex/grid 자식일 때 min-width:auto 로 컨테이너가 늘어나는 것 방지 */ .link{position: absolute; inset: 0; z-index: 5;} .blind{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;} .\!hidden{display:none !important;}/* 게시판 뷰가 쓰는 숨김 클래스 — Tailwind CDN 이 안 떠도 동작하도록 */ .site-main{display:block;} :where(a, button, input, select, textarea):focus-visible{outline:3px solid var(--point-color04);outline-offset:3px;} .ofc{overflow:hidden;} .ofc img{width:100% !important;height:100% !important;object-fit:cover !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;} .bullet_list{display:flex;flex-direction:column;gap:8px;} .bullet_list li{display:flex;align-items:flex-start;gap:12px;font-size:var(--text-18);font-weight:400;line-height:1.5;color:var(--black-color03);font-family:var(--font-type02);} .bullet_list li:before{width:4px;content:"";aspect-ratio:auto 1;box-sizing:border-box;border-radius:100%;background:var(--black-color08);translate:0 12px;flex-shrink:0;} .bullet_list li p{font-size:inherit;color:inherit;} .bullet_list li > strong{font-weight:600;} .btn_view{display:inline-flex;align-items:center;flex-shrink:0;font-size:var(--text-18);color:var(--black-color03);font-weight:600;letter-spacing:-0.02em;line-height:1;white-space:nowrap;font-family:var(--font-type01);} /* 텍스트 배경이 원의 왼쪽 호를 덮어 끊어 보이게 (시안 기준 7px = 0.4em) */ .btn_view .txt{position:relative;z-index:1;background:var(--point-white);} .btn_view .ico{position:relative;margin-left:-0.4em;width:clamp(44px, 4.7vw, 60px);aspect-ratio:auto 1;flex-shrink:0;} .btn_view .ico .circle{position:absolute;inset:0;box-sizing:border-box;border:1px solid var(--border-color01);border-radius:100%;background:var(--trans-color);transition:all 0.3s;} .btn_view .ico:before, .btn_view .ico:after{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;background:var(--point-color01);transition:background 0.3s;z-index:1;} .btn_view .ico:before{width:clamp(10px, 1.2vw, 12px);height:2px;} .btn_view .ico:after{width:2px;height:clamp(10px, 1.2vw, 12px);} @media (hover:hover) and (pointer:fine){ .btn_view:hover .ico .circle{scale:0.5;border-color:var(--trans-color);background:var(--point-color01);} .btn_view:hover .ico:before, .btn_view:hover .ico:after{background:var(--point-white);} } /* 마우스 없이도 동일한 상태를 노출 */ .btn_view:focus-visible .ico .circle{scale:0.5;border-color:var(--trans-color);background:var(--point-color01);} .btn_view:focus-visible .ico:before, .btn_view:focus-visible .ico:after{background:var(--point-white);} /* 채움형 공통 버튼 — 메인 문의 제출 / 서브 CTA 공용 */ .main_more{display:flex;align-items:center;justify-content:space-between;gap:var(--row-gap20);width:auto;min-width:clamp(190px, 20vw, 260px);height:clamp(50px, 6vw, 64px);padding-inline:clamp(18px, 2.3vw, 30px);box-sizing:border-box;border:0;border-radius:10px;background:var(--point-grad01);box-shadow:0 0 15px rgba(0, 0, 0, 0.15);font-size:var(--text-20);color:var(--point-white);font-weight:600;letter-spacing:-0.02em;font-family:var(--font-type02);} .main_more:after{content:"";width:12px;aspect-ratio:auto 1;flex-shrink:0;background:url('/images/ico_plus.svg') no-repeat center / 100% auto;} .view_btn .main_more:after{display: none;} @media (hover:hover) and (pointer:fine){ .main_more:hover{background:var(--point-color04);} } @media (max-width:1600px) { 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);} } /* ======================================== 빠른 상담문의 (Quick Inquiry) ======================================== */ #dbQuickInquiry{display: none;} /* ── 공통 ── */ .db-qi-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; } .db-qi-title { font-size: 1rem; font-weight: 700; color: var(--qi-text, #fff); } .db-qi-close { background: none; border: none; color: var(--qi-text, #fff); font-size: 1.5rem; cursor: pointer; opacity: 0.7; line-height: 1; } .db-qi-close:hover { opacity: 1; } .db-qi-input { display: block; width: 100%; padding: 0.5rem 0.75rem; border: 1px solid rgba(255,255,255,0.3); border-radius: 0.375rem; background: rgba(255,255,255,0.15); color: var(--qi-text, #fff); font-size: 0.875rem; outline: none; transition: border-color 0.2s; } .db-qi-input::placeholder { color: rgba(255,255,255,0.6); } .db-qi-input:focus { border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.25); } .db-qi-privacy { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--qi-text, #fff); opacity: 0.85; cursor: pointer; flex-shrink: 0; } .db-qi-privacy input[type="checkbox"] { width: 14px; height: 14px; flex-shrink: 0; } .db-qi-privacy-link { color: var(--qi-text, #fff); text-decoration: underline; opacity: 0.8; margin-left: 0.25rem; } .db-qi-privacy-link:hover { opacity: 1; } .db-qi-btn { padding: 0.5rem 1.5rem; background: rgba(255,255,255,0.95); color: var(--qi-bg, #1e40af); border: none; border-radius: 0.375rem; font-weight: 700; font-size: 0.875rem; cursor: pointer; transition: background 0.2s; white-space: nowrap; flex-shrink: 0; } .db-qi-btn:hover { background: #fff; } .db-qi-msg { text-align: center; font-size: 0.8rem; padding: 0.5rem; color: var(--qi-text, #fff); } .db-qi-form { display: flex; flex-direction: column; gap: 0.5rem; padding: 0 1rem 1rem; } /* ── 하단 고정 바 ── */ .db-qi-bottom { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9980; } .db-qi-bottom-tab { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 0.75rem; background: var(--qi-bg, #1e40af); color: var(--qi-text, #fff); border: none; cursor: pointer; font-size: 0.9rem; font-weight: 600; } .db-qi-bottom-tab:hover { filter: brightness(1.1); } .db-qi-bottom-panel { background: var(--qi-bg, #1e40af); border-top: 1px solid rgba(255,255,255,0.1); } .db-qi-bottom-inner { max-width: 1200px; margin: 0 auto; } .db-qi-form-row { flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .db-qi-form-row .db-qi-input { width: auto; flex: 1 1 150px; min-width: 120px; } /* 캡차 영역 */ .db-qi-captcha { flex: 0 0 auto; display: flex; align-items: center; } .db-qi-captcha img { height: 40px !important; border-radius: 6px; } .db-qi-captcha input[name="captcha_answer"] { height: 40px; padding: 0 10px; border: 1px solid #d1d5db; border-radius: 6px; width: 110px; font-size: 13px; color: #111; background: #fff; } @media (max-width: 768px) { .db-qi-captcha { width: 100%; justify-content: flex-start; } } /* ── 우측 패널 ── */ .db-qi-right { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 9980; display: flex; align-items: flex-start; } .db-qi-right-tab { writing-mode: vertical-rl; text-orientation: mixed; padding: 1rem 0.5rem; background: var(--qi-bg, #1e40af); color: var(--qi-text, #fff); border: none; border-radius: 0.5rem 0 0 0.5rem; cursor: pointer; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.05em; } .db-qi-right-tab:hover { filter: brightness(1.1); } .db-qi-right-panel { display: none; width: 280px; background: var(--qi-bg, #1e40af); border-radius: 0.5rem 0 0 0.5rem; box-shadow: -4px 0 20px rgba(0,0,0,0.15); } /* ── 반응형 ── */ @media (max-width: 768px) { .db-qi-form-row { flex-direction: column !important; } .db-qi-form-row .db-qi-input { width: 100%; flex: none; } .db-qi-right { right: 0; top: auto; bottom: 0; transform: none; left: 0; flex-direction: column; } .db-qi-right-tab { writing-mode: horizontal-tb; text-orientation: initial; border-radius: 0; width: 100%; text-align: center; } .db-qi-right-panel { width: 100%; border-radius: 0; } } /*──────────────────────────────────────────────────── Header ────────────────────────────────────────────────────*/ #header{position:sticky;height:clamp(65px, 10vw, 120px);top: 0;z-index: 100;width:100%;transition:all 0.3s;background:var(--point-white);box-shadow: inset 0 -1px 0 var(--border-color01);} body:has(.site-main) #header{position:fixed;box-shadow:none;background:none;} #header .w_custom{height: 100%;max-width:1760px;display: flex;align-items: center;justify-content: space-between;gap: 15px;} #header .logo{height: 100%;flex-shrink:0;} #header .logo a{display: flex;align-items: center;height: 100%;padding-block: 10px;} #header .logo a img{height:clamp(45px, 5vw, 60px);} #header .gnb{display: flex;justify-content: center;height: 100%;text-align: center;} #header .gnb > li{position: relative;font-size:var(--text-20);font-weight: 600;color: var(--black-color03);line-height: 1.4;letter-spacing: 0;transition: all 0.4s;} #header .gnb > li > a{display: flex;align-items: center;justify-content: center;height: 100%;position: relative;padding-inline:clamp(20px, 2vw, 40px);} #header .gnb > li.on > a{color: var(--point-color01);} #header .gnb .dep02{position: absolute;top: 80%;left: 50%;width: max-content;max-width: 300px;min-width: 180px;translate: -50%;background: var(--point-color01);padding-block: 18px;opacity: 0;pointer-events: none;transition: inherit;border-radius:var(--radius-10);} #header .gnb .dep02 > li{font-size: 90%;filter: var(--filter-white); transition: inherit;} #header .gnb .dep02 > li > a{display: block;padding: 10px 25px;} #header .gnb .dep03{display: none;} #header .utility{position: relative;display: flex;align-items: center;gap:var(--row-gap40);flex-shrink:0;} #header .allCate{display:flex;flex-direction: column;align-items: center;justify-content:space-between;width: clamp(30px, 4vw, 40px);aspect-ratio: auto 1.9;} #header .allCate span{display: inline-block;width:100%;height:3px;background:var(--black-color01);transition:width 0.3s;} #header .allCate span:nth-child(1){align-self: flex-end;width:50%;background:var(--point-color03);} #header .allCate span:nth-child(3){align-self: flex-start;width:50%;} /* 언어 선택 */ .lang-select{position: relative;flex-shrink: 0;} .lang-select .langToggle{display: flex;align-items: center;gap: 8px;width: 140px;height: 45px;padding-inline: 16px;box-sizing: border-box;border: 1px solid var(--point-color03);border-radius: 10px;background: var(--trans-color);color: var(--point-color03);font-size: var(--text-17);font-weight: 600;line-height: 1;letter-spacing: -0.02em;cursor: pointer;transition: all 0.3s;} .lang-select .lang-globe{width: 16px;height: 16px;flex-shrink: 0;fill: none;stroke: currentColor;stroke-width: 1.4;} .lang-select .lang-current{margin-right: auto;} .lang-select .lang-arrow{width:9px;height:6px;flex-shrink: 0;background: currentColor;clip-path:var(--clip-poly01);transition: rotate 0.3s;} .lang-select .langToggle.on{background: var(--point-color02);} .lang-select .langToggle.on .lang-arrow{rotate: 180deg;} .lang-select .lang-list{position: absolute;top: calc(100% + 6px);left: 0;width: 100%;padding-block: 6px;border: 1px solid var(--point-color03);border-radius: 10px;background: var(--point-white);box-shadow: 0 6px 20px rgba(16, 59, 115, 0.12);opacity: 0;visibility: hidden;translate: 0 -6px;transition: all 0.3s;z-index: 10;} .lang-select .langToggle.on + .lang-list{opacity: 1;visibility: visible;translate: 0;} .lang-select .lang-list > li{font-size: var(--text-17);font-weight: 500;color: var(--black-color03);line-height: 1;letter-spacing: -0.02em;} .lang-select .lang-list > li > a{display: block;padding: 10px 16px;transition: all 0.2s;} .lang-select .lang-list > li > a[aria-current]{color: var(--point-color03);font-weight: 600;background: var(--point-color02);} /*on*/ body:has(.site-main) #header.on{box-shadow: inset 0 -1px 0 var(--border-color01);background:var(--point-white);} /* hover */ @media (hover:hover) and (pointer: fine) { body:has(.site-main) #header:hover{box-shadow: inset 0 -1px 0 var(--border-color01);background:var(--point-white);} #header .gnb > li:hover{color: var(--point-color01);} #header .gnb > li:hover > a{color: var(--point-color01);} #header .gnb > li:hover .dep02{opacity: 1; pointer-events: auto;} #header .gnb .dep02:has(> li:hover) > li:not(:hover){opacity: 0.4;} .lang-select .langToggle:hover{background: var(--point-color02);} .lang-select .lang-list > li > a:hover{color: var(--point-color03);background: var(--point-color02);} #header .allCate:hover span{width:100%;} } @media (max-width:1400px) { #header .utility{gap:var(--row-gap20);} .lang-select .langToggle{width: 120px;height: 40px;padding-inline: 12px;gap: 6px;} } @media (max-width:1200px) { #header .gnb > li{font-size:var(--text-18)} #header .gnb > li > a{padding-inline:2vw;} } @media (max-width:1023px) { #header .gnb{display: none;} .lang-select .langToggle{width: 105px;height: 36px;padding-inline: 10px;border-radius: 8px;} .lang-select .lang-list{border-radius: 8px;} .lang-select .lang-list > li > a{padding: 9px 12px;} } @media (max-width:375px) { .lang-select .langToggle{width: auto;gap: 5px;} .lang-select .lang-current{display: none;} .lang-select .lang-list{left: auto;right: 0;width: max-content;min-width: 90px;} } /*─────────────────────────────────────────────────────────── 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(6, 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-40);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{display: none;} #aside .utility{position: absolute;top: clamp(30px, 2.8vw, 50px);right: clamp(30px, 2.8vw, 50px);display: flex;align-items: center;gap: clamp(15px, 1.6vw, 30px);z-index:2;} #aside .close_btn{position: relative;width: clamp(30px, 4vw, 40px);aspect-ratio:auto 1;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-color01);} } @media (max-width:1300px){ #aside .gnb{grid: auto / repeat(3, 1fr);} } @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 .utility{top:15px; right: 15px;} } @media (max-width:479px){ #aside .gnb .dep02{grid-template: auto / repeat(1, 1fr);} } /*─────────────────────────────────────────────────────────── Main ───────────────────────────────────────────────────────────*/ /*visual*/ .main_visual{position: relative;} .visualSwiper{position: relative;} .visualSwiper .swiper-slide{position:relative;height:clamp(800px, 55vw, 980px);display:flex;flex-direction:column;justify-content:center;overflow:hidden;} .visualSwiper .swiper-slide > .w_custom{display: flex;flex-direction: column;align-items: flex-start;gap:var(--row-gap80);padding-top:clamp(50px, 6vw, 176px);} .visualSwiper .cont{display:flex;align-items:center;flex-shrink:0;width:100%;} .visualSwiper .txt_box{display: flex;flex-direction: column;align-items: flex-start;gap:var(--row-gap30);text-align:left;} .visualSwiper .txt_box .logo{width:clamp(150px, 16vw, 180px);} .visualSwiper .txt_box h3{font-size:clamp(34px, 7.4vw, 74px);color:#051326;font-weight:600;line-height:1.2;letter-spacing:-0.01em;} .visualSwiper .txt_box .des{display: flex;flex-direction: column;gap:var(--row-gap10);align-items: flex-start;} .visualSwiper .txt_box .lead{font-size:var(--text-24);color:var(--point-color01);font-weight:600;line-height:1.5;letter-spacing:-0.02em;margin-top:var(--row-gap10);} .visualSwiper .txt_box .keyword{display: flex;align-items: center;flex-wrap:wrap;gap:var(--row-gap20);} .visualSwiper .txt_box .keyword li{position: relative;font-size:var(--text-20);color:var(--black-color01);font-weight:400;line-height:1.7;letter-spacing:-0.02em;font-family:var(--font-type02);} .visualSwiper .txt_box .keyword li + li:before{position: absolute;left:calc((var(--row-gap20) + 1px) / -2);top:50%;translate:0 -50%;width:1px;height:14px;content:"";background:var(--black-color10);} .visualSwiper .btn_more{display: flex;align-items: center;justify-content: space-between;gap:20px;width:clamp(160px, 17vw, 220px);height:clamp(48px, 5vw, 60px);padding-inline:clamp(20px, 2.4vw, 30px);box-sizing:border-box;border-radius:10px;background:var(--point-grad01);box-shadow:0 0 15px rgba(0, 0, 0, 0.15);font-size:var(--text-18);color:var(--point-white);font-weight:600;letter-spacing:-0.02em;transition:all 0.3s;margin-top:var(--row-gap30);} .visualSwiper .btn_more img{width:12px;height:12px;flex-shrink:0;} .visualSwiper .thumb{position:absolute;z-index:0;inset:0;left:50%;width:100vw;translate:-50% 0;} .visualSwiper .thumb > div,.visualSwiper .thumb > div > *{width:100%;height:100%;} .visualSwiper .thumb img{display:block;width:100% !important;height:100% !important;object-fit:cover !important;object-position:center bottom;} .visualSwiper .txt_box{position:relative;z-index:2;} .visualSwiper .thumb_m{display:none;} .visualSwiper .txt-ani{opacity: 0; translate:0 40px;} .visualSwiper .swiper-slide-active .txt-ani{opacity: 1; translate: 0; transition: all 1s 0.2s;} .visualSwiper .swiper-slide-active .txt-ani:nth-child(2){transition-delay: 0.4s;} .visualSwiper .swiper-slide-active .txt-ani:nth-child(3){transition-delay: 0.6s;} .visualSwiper .controller{position: absolute;left:0;right:0;bottom:14.5vw;display: flex;align-items: center;gap:10px;z-index:3;justify-content: center;} .visualSwiper [class*="swiper-button"]{position: relative;inset: auto;margin: 0;display: flex;align-items: center;justify-content: center;transition: all 0.4s;} .visualSwiper [class*="swiper-button"].play-btn{gap:4px;width:30px;height:30px;} .visualSwiper [class*="swiper-button"].play-btn::before, .visualSwiper [class*="swiper-button"].play-btn::after{display: inline-flex;content: '';width:2.5px;height:14px;background: var(--black-color05);} .visualSwiper [class*="swiper-button"].play-btn.paused::before{width:12px;height: auto;aspect-ratio: auto 1.3;clip-path: var(--clip-poly01);rotate: 90deg;} .visualSwiper [class*="swiper-button"].play-btn.paused::after{display: none;} .visualSwiper .swiper-pagination{position: relative;inset: auto;width:auto;display: flex;align-items: center;gap:10px;} .visualSwiper .swiper-pagination .swiper-pagination-bullet{width:30px;height:30px;margin:0;display: flex;align-items: center;justify-content: center;border-radius:100%;background:var(--trans-color);opacity:1;transition:all 0.3s;} .visualSwiper .swiper-pagination .swiper-pagination-bullet:before{width:8px;content:"";aspect-ratio:auto 1;border-radius:100%;background:var(--black-color10);transition:inherit;} .visualSwiper .swiper-pagination .swiper-pagination-bullet-active{background:rgba(16, 59, 115, 0.1);} .visualSwiper .swiper-pagination .swiper-pagination-bullet-active:before{background:var(--point-color03);} .visualSwiper .arw{position: absolute;left:clamp(10px, 2vw, 40px);right:clamp(10px, 2vw, 40px);top:50%;translate:0 -50%;display: flex;align-items: center;justify-content: space-between;z-index:3;pointer-events:none;} .visualSwiper .arw [class*="swiper-button"]{width:clamp(36px, 4vw, 60px);height:clamp(36px, 4vw, 60px);pointer-events:auto;} .visualSwiper .arw [class*="swiper-button"] img{width:clamp(16px, 1.6vw, 27px);height:auto;} .visualSwiper .arw .swiper-button-prev img{scale:-1 1;} .main_visual .vis_ico{position: relative;z-index:3;margin-top:clamp(20px, 3vw, 30px);padding:clamp(14px, 3vw, 30px);box-sizing:border-box;border:2px solid var(--point-color01);border-radius:10px;background:rgba(255, 255, 255, 0.4);backdrop-filter:blur(5px);width:100%;} .main_visual .vis_ico > ul{display: flex;align-items: center;justify-content: center;flex-wrap:wrap;gap:clamp(10px, 2vw, 20px) clamp(16px, 4vw, 40px);} .main_visual .vis_ico li{display: flex;align-items: center;gap:clamp(6px, 1.2vw, 12px);font-size:var(--text-18);color:var(--black-color01);font-weight:500;line-height:1.6;font-family:var(--font-type02);} .main_visual .vis_ico li .ico{position: relative;width:clamp(20px, 3vw, 30px);aspect-ratio:auto 1;flex-shrink:0;border-radius:100%;background:var(--point-white);display: flex;align-items: center;justify-content: center;} .main_visual .vis_ico li .ico:before{width:13px;height:clamp(7px, 1vw, 10px);content:"";background:url('/images/chk_ov.png')no-repeat center / auto 100%;} .main_visual .vis_ico.vis_logo > ul{gap:20px;} .main_visual .vis_ico.vis_logo li{max-height:20px;justify-content:center;} .main_visual .vis_ico.vis_logo li img{display:block;width:100%;height:100%;object-fit:contain;} .main_visual .vis_ico p{display: none;} @media (max-width:1600px){ .visualSwiper .arw{display: none;} } @media (max-width:1400px){ .visualSwiper .controller{bottom:32%;justify-content: flex-start;} } @media (max-width:1023px){ .visualSwiper .swiper-slide > .w_custom{gap:120px;} .main_visual .vis_ico.vis_logo li{width:auto;height:auto;} } @media (max-width:860px){ .visualSwiper .btn_more{margin-top:0;} .visualSwiper .controller{bottom:40%;} } @media (max-width:640px){ .visualSwiper .swiper-slide{height:100vh;padding-block:100px;box-sizing:border-box;justify-content: flex-start;} .visualSwiper .swiper-slide > .w_custom{gap:30px;padding:0;height:100%;justify-content: space-between;} .visualSwiper .cont{align-items:flex-start;} .visualSwiper .txt_box{gap:18px;} .visualSwiper .txt_box h3{font-size:clamp(36px, 11vw, 54px);} .visualSwiper .txt_box .keyword{gap:6px 20px;} .visualSwiper .btn_more{height:50px;} .visualSwiper .thumb{width:100vw;} .visualSwiper .thumb_pc{display:none;} .visualSwiper .thumb_m{display:block;} .visualSwiper .controller{bottom:30px;justify-content: center;} .visualSwiper .arw{display:none;} .main_visual .vis_ico{width:100%;margin-top:0;padding:15px;} .main_visual .vis_ico > ul{gap:8px 16px;} .main_visual .vis_ico li{font-size:14px;} .main_visual .vis_ico.vis_logo > ul{gap:10px 14px;} .main_visual .vis_ico.vis_logo li{width:calc((100% - 42px) / 4);height:24px;} } @media (max-width:479px){ .visualSwiper .swiper-slide{padding-block:100px 75px;} } /* over */ @media (hover:hover) and (pointer:fine){ .visualSwiper .btn_more:hover{box-shadow:0 0 20px rgba(0, 78, 179, 0.35);translate:0 -2px;} .visualSwiper .arw [class*="swiper-button"]:hover{opacity:0.6;} .visualSwiper .swiper-pagination .swiper-pagination-bullet:hover:before{background:var(--point-color03);} } /*공통*/ .site-main .bg{width:100%;height:100%;position: absolute;top:0;left:0;} .main_content > section{padding-block:var(--row-gap120);position: relative;} .main_tit{display:flex;align-items: flex-end;justify-content: space-between;gap:var(--row-gap30);width:100%;} .main_title{display:flex;flex-direction:column;gap:var(--row-gap20);align-items: flex-start;text-align:left;} .main_title h2{font-size:var(--text-50);color:var(--black-color01);font-weight:700;line-height:1.5;letter-spacing:-0.02em;font-family: var(--font-type02);} .main_title h2 strong{color:var(--point-color01);font-weight:inherit;} .main_title p{font-size:var(--text-20);color:var(--black-color03);font-weight:400;line-height:1.7;letter-spacing:-0.02em;font-family:var(--font-type02);} .main_slide_arw{display:flex;align-items: center;gap:10px;flex-shrink:0;} .main_slide_arw [class*="swiper-button"]{position: relative;inset: auto;margin:0;display:flex;align-items: center;justify-content: center;width:clamp(40px, 4.5vw, 60px);aspect-ratio:auto 1;border:1px solid var(--border-color01);border-radius:100%;background:var(--point-white);transition:all 0.3s;height:auto;} .main_slide_arw [class*="swiper-button"] img{width:8px;height:14px;} .main_slide_arw .swiper-button-prev img{scale:-1 1;} .main_slide_arw [class*="swiper-button"].swiper-button-disabled{opacity:0.35;cursor:default;} .main_arw{position: relative;width:16px;aspect-ratio:auto 1;display: flex;align-items: center;justify-content: center;flex-shrink:0;transition:all 0.3s;} .main_arw:before{content:"";width:7px;aspect-ratio:auto 1;border: 2px solid var(--black-color01);border-width:1px 1px 0 0;rotate: 45deg;display: inline-block;} .main_arw:after{content:"";width: 13px;height:1px;background: var(--black-color01);translate:-65%;left:50%;position: absolute;top:47%;} /*partner*/ .main_partner{display:flex;flex-direction:column;gap:var(--row-gap50);} .partnerSwiper{--partner-cols:5;width:100%;padding:10px;width: calc(100% + 20px);margin-left: -10px;} .partnerSwiper .swiper-slide{height:auto;min-width:0;} .partnerSwiper .partner_list{display:grid;grid-template-columns:repeat(var(--partner-cols), minmax(0, 1fr));gap:clamp(10px, 2vw, 20px);min-width:0;} .partnerSwiper .partner_list > li{aspect-ratio:24 / 10;display:flex;align-items: center;justify-content: center;box-sizing:border-box;border-radius:15px;background:var(--point-white);box-shadow:0 0 15px rgba(0, 0, 0, 0.06);overflow:hidden;} .partnerSwiper .partner_list img{width:100%;height:100%;object-fit:contain;} .partnerSwiper .partner_list p{display:none;} .bullet-list{display:flex;flex-direction:column;gap:var(--row-gap10);} .bullet-list li{display: flex;align-items: flex-start;font-size:var(--text-18);color:var(--black-color03);font-weight:400;gap:var(--row-gap10);} .bullet-list li:before{width:3px;aspect-ratio:auto 1;background:var(--point-color02);content:"";display:inline-block;flex-shrink:0;translate:0 clamp(8px, 1vw, 12px);} /* over */ @media (hover:hover) and (pointer:fine){ .main_slide_arw [class*="swiper-button"]:not(.swiper-button-disabled):hover{border-color:var(--point-color01);background:var(--point-color01);} .main_slide_arw [class*="swiper-button"]:not(.swiper-button-disabled):hover img{filter:var(--filter-white);} } @media (max-width:640px){ .main_tit{flex-direction:column;align-items: flex-start;gap:var(--row-gap20);} .main_slide_arw{align-self: flex-end;} } /*wave*/ .main_content > section.main_wave{padding-block:0;} .main_wave .waveSwiper .swiper-wrapper{position: relative;transition-timing-function:linear;} .main_wave .waveSwiper .swiper-slide{width:auto;} .main_wave .waveSwiper p{font-size:clamp(40px, 6.77vw, 130px);color:var(--point-color02);font-weight:700;line-height:1;font-family:var(--font-type01);font-variation-settings:"GRAD" 0, "ROND" 0, "wdth" 100;text-transform:uppercase;white-space:nowrap;} /*product*/ .main_content > section.main_product{padding-bottom:0;} .main_product .prd_inner{margin-inline:clamp(15px, 4.16vw, 80px);padding-bottom:var(--row-gap120);border-radius:clamp(15px, 1.56vw, 30px);background:var(--point-grad02);} .main_product .main_tit{margin-bottom:var(--row-gap40);} .prd_list{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:clamp(10px, 1.6vw, 20px);} .prd_list > li{position:relative;display:flex;flex-direction:column;gap:var(--row-gap20);padding-bottom:var(--row-gap35);border-radius:clamp(10px, 1.56vw, 20px);background:var(--point-white);box-shadow:0 30px 30px rgba(0, 0, 0, 0.05);} .prd_list > li:before{content:"";position:absolute;inset:0;border:3px solid var(--point-color01);border-radius:inherit;opacity:0;transition:opacity 0.3s;pointer-events:none;z-index:6;} .prd_list .img{display:flex;align-items:center;justify-content:center;aspect-ratio:auto 1;min-height:0;padding:clamp(12px, 13.8%, 42px);box-sizing:border-box;}/* min-height:0 이 없으면 flex 자동 최소 크기가 aspect-ratio 를 밀어냄 */ .prd_list .img img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;} .prd_list .txt{display:flex;flex-direction:column;gap:var(--row-gap10);padding-inline:clamp(15px, 2.4vw, 30px);} .prd_list .name{font-size:var(--text-26);color:var(--black-color01);font-weight:600;line-height:1.4;font-family:var(--font-type01);} .prd_list .desc{font-size:var(--text-18);color:var(--black-color05);font-weight:400;line-height:1.6;letter-spacing:-0.02em;font-family:var(--font-type02);} /* over */ @media (hover:hover) and (pointer:fine){ .prd_list > li:hover:before{opacity:1;} } .prd_list > li:has(.link:focus-visible):before{opacity:1;} @media (max-width:1023px){ .prd_list{grid-template-columns:repeat(2, minmax(0, 1fr));} } @media (max-width:640px){ .main_product .prd_inner{margin:0;border-radius:0;} } /*board — 공지사항 / 기술자료실*/ .main_board{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--row-gap40);} .board_col{display:flex;flex-direction:column;gap:var(--row-gap30);min-width:0;} .board_tit{display:flex;align-items: center;justify-content: space-between;gap:var(--row-gap20);} .board_tit h2{font-size:var(--text-40);color:var(--black-color01);font-weight:700;line-height:1.5;letter-spacing:-0.02em;font-family:var(--font-type02);} .board_list{display:flex;flex-direction:column;gap:var(--row-gap20);} .board_list > li{position: relative;display:flex;align-items: center;gap:var(--row-gap20);padding:var(--row-gap25) var(--row-gap30) var(--row-gap25) var(--row-gap25);box-sizing:border-box;border:1px solid var(--border-color01);border-radius:10px;background:var(--point-white);transition:all 0.3s;} .board_list .date{display:flex;flex-direction:column;align-items: center;justify-content: center;gap:8px;width:clamp(56px, 6.2vw, 80px);padding-block:var(--row-gap10);flex-shrink:0;color:var(--point-color03);text-align:center;line-height:1.2;font-family:var(--font-type01);transition:color 0.3s;} .board_list .date .day{font-size:var(--text-32);font-weight:600;} .board_list .date .ym{font-size:var(--text-16);font-weight:500;} .board_list .txt{display:flex;flex-direction:column;gap:var(--row-gap10);flex:1 1 0;min-width:0;} .board_list .tit{font-size:var(--text-22);color:var(--black-color03);font-weight:500;line-height:1.4;letter-spacing:-0.02em;font-family:var(--font-type02);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .board_list .desc{font-size:var(--text-18);color:var(--black-color05);font-weight:400;line-height:1.6;letter-spacing:-0.02em;font-family:var(--font-type02);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} @media (hover:hover) and (pointer:fine){ .board_list > li:hover{border-color:var(--point-color01);box-shadow:0 0 15px rgba(0, 0, 0, 0.1), inset 0 0 0 1px var(--point-color01);} .board_list > li:hover .date{color:var(--point-color01);} } .board_list > li:has(.link:focus-visible){border-color:var(--point-color01);box-shadow:0 0 15px rgba(0, 0, 0, 0.1), inset 0 0 0 1px var(--point-color01);} .board_list > li:has(.link:focus-visible) .date{color:var(--point-color01);} .board_list .db-expose-empty{justify-content: center;color:var(--black-color06);font-size:var(--text-18);}/* 게시물 없음 */ @media (max-width:860px){ .main_board{grid-template-columns:minmax(0, 1fr);gap:var(--row-gap60);} } /*faq*/ .faq_box{border-top:2px solid var(--black-color03);} .faq_box ul{display: flex;flex-direction: column;} .faq_box .faq-toggle{border-bottom:1px solid var(--border-color01);padding:clamp(15px, 2.2vw, 25px) var(--row-gap30);display: flex;align-items: center;gap:var(--row-gap20);width:100%;position: relative;} .faq_box .mark{display: inline-flex;border-radius:100%;width:clamp(30px, 4vw, 40px);aspect-ratio:auto 1;align-items: center;justify-content: center;background:var(--point-white);border:1px solid var(--point-color01);font-size:var(--text-20);color:var(--point-color01);font-weight:500;text-align: center;flex-shrink:0;} .faq_box .a_box .mark{border-color:var(--point-white);} .faq_box .faq-toggle:after{width:clamp(7px, 1vw, 10px);aspect-ratio:auto 1;content:"";border:2px solid var(--black-color06);border-width:2px 2px 0 0;rotate:135deg;display: inline-block;position: absolute;right:var(--row-gap30);top:47%;translate:0 -50%;} .faq_box .faq-toggle p{font-size:var(--text-20);color:var(--black-color03);font-weight:400;max-width:calc(100% - var(--row-gap80));text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp:1;text-align:left;} .faq_box .faq-toggle.on .mark{background:var(--point-color01);color:var(--point-white);} .faq_box .faq-toggle.on p{font-weight:500;} .faq_box .faq-toggle.on:after{scale:-1 -1;top:53%;border-color:var(--point-color01);} .faq_box .a_box{display: none;} .faq_content{background:var(--gray-bg01);border-bottom:1px solid var(--border-color01);padding:var(--row-gap30);display: flex;align-items: flex-start;gap:var(--row-gap20);} .faq_content div{font-size:var(--text-18);color:var(--black-color04);font-weight:400;line-height:1.8;margin-top:5px;} /*inquiry*/ .main_inquiry .w_custom{display:grid;grid-template-columns:minmax(0, 500fr) minmax(0, 700fr);gap:clamp(30px, 6.25%, 80px);align-items: start;} .inq_left{display:flex;flex-direction:column;gap:var(--row-gap60);} .inq_info{display:flex;flex-direction:column;gap:var(--row-gap20);padding:var(--row-gap30);box-sizing:border-box;border:2px solid var(--point-white);border-radius:var(--radius-10);background:rgba(255, 255, 255, 0.4);backdrop-filter:blur(5px);} .inq_info > div{display:flex;align-items: center;gap:var(--row-gap20);} .inq_info > div:last-child{align-items: flex-start;} .inq_info dt{display:flex;align-items: center;gap:12px;flex-shrink:0;font-size:var(--text-18);color:var(--point-color03);font-weight:600;letter-spacing:-0.02em;font-family:var(--font-type02);} .inq_info .ico{width:clamp(28px,3.6vw, 36px);aspect-ratio:auto 1;flex-shrink:0;display: flex;align-items: center;justify-content: center;border-radius:100%;background:var(--point-white);box-shadow:var(--shadow-02);} .inq_info dt .lb{min-width:clamp(60px, 7.8vw, 100px);white-space:nowrap;} .inq_info dd{font-size:var(--text-18);color:var(--black-color01);font-weight:400;line-height:1.6;font-family:var(--font-type01);min-width:0;} .board_form{padding:var(--row-gap30);box-sizing:border-box;border-radius:20px;background:var(--point-white);box-shadow:0 30px 30px rgba(0, 0, 0, 0.05);} .inq_form .sec-title{display:none;} .board_form .write-form{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--row-gap20);} .board_form .desc{grid-column:span 2;display:flex;align-items: center;gap:var(--row-gap20);min-height:64px;padding-inline:clamp(14px, 1.9vw, 24px);box-sizing:border-box;border:1px solid var(--border-color01);border-radius:5px;background:var(--point-white);transition:border-color 0.3s;} .board_form .desc:has(#author_name), .board_form .desc:has(#author_phone){grid-column:span 1;} .board_form .desc:focus-within{border-color:var(--point-color01);} .board_form .desc > dt{flex-shrink:0;min-width:clamp(74px, 7.8vw, 100px);white-space:nowrap;font-size:var(--text-19);color:var(--black-color03);font-weight:500;line-height:1.4;letter-spacing:-0.03em;font-family:var(--font-type02);} .board_form .desc > dd{flex:1 1 0;min-width:0;} .board_form .desc > dt.req label:after, .board_form .desc:has([required]) > dt label:after{content:"*";margin-left:4px;color:var(--point-color01);font-family:var(--font-type01);font-weight:400;} #wrap .board_form .desc :is(input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], select, textarea){height:auto;min-height:0;padding:0;border:0;border-radius:0;background:var(--trans-color);font-size:var(--text-18);color:var(--black-color01);letter-spacing:-0.02em;font-family:var(--font-type02);width:100%;} #wrap .board_form .desc :is(input, select, textarea)::placeholder{color:var(--black-color09);} #wrap .board_form .desc :is(input, select, textarea):focus{background:var(--trans-color);} .board_form .desc:has(textarea){flex-direction:column;align-items: flex-start;gap:var(--row-gap10);height:clamp(160px, 21vw, 200px);min-height:0;padding:clamp(14px, 1.9vw, 24px);} .board_form .desc:has(textarea) > dt{min-width:0;} .board_form .desc:has(textarea) > dd{display:flex;width:100%;flex:1 1 auto;min-height:0;} #wrap .board_form .desc textarea{flex:1 1 auto;height:auto;min-height:0;line-height:1.6;white-space:pre-wrap;overflow:auto;} .board_form .desc .bf-help{font-size:var(--text-15);line-height:1.4;letter-spacing:-0.02em;font-family:var(--font-type02);margin-top:4px;} .board_form .desc:has(.bf-help:not([style*="none"])){padding-block:clamp(10px, 1.4vw, 14px);} #wrap .board_form .desc input[type="file"]{width:100%;font-size:var(--text-16);color:var(--black-color05);font-family:var(--font-type02);} .board_form .desc .bf-options{display:flex;flex-wrap:wrap;gap:var(--row-gap10) var(--row-gap20);} #wrap .board_form .desc .bf-options label{font-size:var(--text-18);} .board_form .prefix-list{display:flex;flex-wrap:wrap;gap:var(--row-gap10) var(--row-gap20);margin-bottom:var(--row-gap20);font-size:var(--text-18);color:var(--black-color03);font-family:var(--font-type02);} #wrap .board_form .desc select{width:100%;height:auto;cursor:pointer;} .board_form .captcha_box{display: flex;padding-block:12px;gap:var(--row-gap20);} .board_form .captcha_box .captcha_wrap{width:150px;flex-shrink:0;display: flex;gap:var(--row-gap10);} .board_form .desc .db-captcha-img{height:40px !important;width:auto !important;min-width:100px;border:0 !important;border-radius:5px !important;} .board_form .desc .db-captcha-refresh{width:40px !important;height:40px !important;flex-shrink:0;display: flex;align-items: center;justify-content: center;background:var(--point-color04);border-radius:5px;} .board_form .desc .db-captcha-refresh svg{filter:var(--filter-white);} .board_form .desc:has([name="captcha_answer"]){padding-inline:12px;} .board_form .desc:has([name="captcha_answer"]) > dt{position: absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;} .board_form .desc:has([name="captcha_answer"]) > dd > div{gap:10px;} #wrap .board_form .desc [name="captcha_answer"]{margin-left:10px;width:100% !important;padding:0 !important;letter-spacing:normal !important;} .board_form .contact-btn-box{display:flex;align-items: center;justify-content: space-between;gap:var(--row-gap20);flex-wrap:wrap;margin-top:var(--row-gap20);} .board_form .policy{display:flex;align-items: center;gap:12px;flex-wrap:wrap;} #wrap .board_form .policy label{gap:12px;align-items: center;font-size:var(--text-19);color:var(--black-color03);font-weight:500;line-height:1.4;letter-spacing:-0.02em;font-family:var(--font-type02);} #wrap .board_form .policy label strong{color:var(--point-color01);font-weight:600;} .board_form .policy > button{padding:0;border:0;background:none;font-size:var(--text-17);color:var(--black-color07);font-weight:500;line-height:1.4;letter-spacing:-0.02em;font-family:var(--font-type02);text-decoration:underline;text-underline-offset:2px;transition:color 0.3s;} /* over */ @media (hover:hover) and (pointer:fine){ .board_form .policy > button:hover{color:var(--point-color01);} } @media (max-width:1023px){ .main_inquiry .w_custom{grid-template-columns:minmax(0, 1fr);gap:var(--row-gap50);} } @media (max-width:640px){ .board_form .write-form{grid-template-columns:minmax(0, 1fr);} .board_form .desc, .board_form .desc:has(#author_name), .board_form .desc:has(#author_phone){grid-column:span 1;}/* 1열에서 span 2 는 암시적 열을 만듦 */ .board_form .contact-btn-box{flex-direction:column;align-items: stretch;} .board_form .contact-btn-box .main_more{width:100%;} } :is([type="text"], [type="password"], [type="email"], [type="tel"]){height: clamp(40px, 5vw, 50px);border:1px solid var(--border-color01);font-size: var(--text-17);font-weight: 400;color: var(--black-color01);border-radius:var(--radius-10);overflow: hidden;text-overflow:ellipsis;white-space:nowrap;padding:clamp(10px, 1.6vw, 16px);} :is([type="text"], [type="password"], [type="email"], [type="tel"])::placeholder{color:var(--black-color10);} #wrap textarea{width: 100%;border: 1px solid var(--border-color01);height:clamp(120px, 16vw, 160px);font-size: var(--text-17);font-weight: 400;color: var(--black-color01);padding:clamp(10px, 1.6vw, 16px);line-height: 1.6;border-radius:var(--radius-10);resize:none;} #wrap textarea::placeholder{color:var(--black-color10);} label{cursor: pointer;} label:has([type="checkbox"]){display: flex;width: fit-content;align-items: flex-start;gap:var(--row-gap10);font-size: var(--text-19);font-weight: 500;color: var(--black-color03);line-height:clamp(20px, 2.4vw, 24px);} label:has([type="checkbox"]) strong{color:var(--point-color01);font-weight:600;} [type="checkbox"]{appearance: none;cursor: pointer;width:clamp(20px, 2.4vw, 24px);height: clamp(20px, 2.4vw, 24px);flex-shrink: 0;border: 1px solid var(--border-color01);display: flex;align-items: center;justify-content: center;border-radius:5px;} [type="checkbox"]::before{display: inline-flex;content:'';width: 10px;aspect-ratio: auto 1.25;background: url('/images/ico_chk.svg') no-repeat center / 100% auto;opacity: 0.5;} [type="checkbox"]:checked{background: var(--point-color04);border-color:var(--point-color04);} [type="checkbox"]:checked::before{opacity: 1;filter: var(--filter-white);} /* === complete === */ #wrap .complete_box {width:100%;box-sizing:border-box;border:1px solid var(--border-color01);text-align: center;padding:var(--row-gap60);border-radius:var(--radius-15);} #wrap .complete_box .chk_ico{width: var(--row-gap70); height: var(--row-gap70); margin: 0 auto; background-color: var(--gray-bg01);} #wrap .complete_box .chk_ico .text-green-600 {color: var(--point-color01);} #wrap .complete_box h4 {font-size:var(--text-28);color:var(--black-color03);font-weight:600;margin-top: var(--row-gap30);} #wrap .complete_box p {font-size:var(--text-20);color:var(--black-color05);margin-top: var(--row-gap20);} #wrap .complete_box .view_btn {margin-top: var(--row-gap50);} @media (max-width:1023px) { #wrap .complete_box .chk_ico {width: var(--row-gap95); height: var(--row-gap95);} } /*─────────────────────────────────────────────────────────── Footer ───────────────────────────────────────────────────────────*/ #footer{background:var(--point-color04);padding-block:var(--row-gap60) var(--row-gap70);}/* --point-color06 은 정의돼 있지 않아 배경이 깔리지 않았음 */ #footer .w_custom{display: flex;flex-direction:column;gap:var(--row-gap50);} /* 상단 — 로고 + 대표번호 */ #footer .ft_top_info{display: flex;align-items: center;justify-content: space-between;gap:var(--row-gap30);flex-wrap:wrap;padding-bottom:var(--row-gap50);border-bottom:1px solid rgba(255, 255, 255, 0.2);} #footer .logo{height:clamp(26px, 2.7vw, 34px);filter:var(--filter-white);} #footer .logo img{width:auto;height:100%;} #footer .ft_tel{display: flex;align-items: center;gap:var(--row-gap20);flex-wrap:wrap;} #footer .ft_tel .ico{width:clamp(32px, 3.4vw, 40px);aspect-ratio:auto 1;flex-shrink:0;border-radius:100%;border:1px solid rgba(255,255,255,0.4);display: flex;align-items: center;justify-content: center;} #footer .ft_tel .ico img{width:clamp(8px, 1.2vw, 12px);filter:var(--filter-white);} #footer .ft_tel .num{font-size:var(--text-28);color:var(--point-white);font-weight:500;line-height:1;font-family:var(--font-type01);} #footer .ft_tel .time{font-size:var(--text-18);color:var(--point-white);font-weight:400;line-height:1.4;letter-spacing:-0.02em;font-family:var(--font-type02);opacity:0.8;} /* 하단 — 사업자정보 + 정책메뉴 + 카피라이트 */ #footer .ft_info_box{display: flex;flex-direction:column;gap:var(--row-gap40);} #footer .ft_txt{display: flex;align-items: flex-start;justify-content: space-between;gap:var(--row-gap30);} .addr-list{display: flex;flex-direction:column;gap:clamp(8px, 1.4vw, 14px);} .addr-list > li{display: flex;flex-wrap:wrap;gap:clamp(8px, 1.4vw, 14px) var(--row-gap30);} .addr-list dl{display: flex;align-items: center;gap:var(--row-gap20);font-size:var(--text-18);color:var(--point-white);line-height:1.4;letter-spacing:-0.02em;font-family:var(--font-type02);} .addr-list dt{font-weight:500;flex-shrink:0;} .addr-list dd{font-weight:400;opacity:0.8;} #footer .ft_menu{display: flex;align-items: center;gap:clamp(20px, 4vw, 44px);flex-shrink:0;} #footer .ft_menu > li{position: relative;font-size:var(--text-18);color:var(--point-white);font-weight:400;line-height:1.4;letter-spacing:-0.02em;font-family:var(--font-type02);white-space:nowrap;} #footer .ft_menu > li + li:before{content:"";position: absolute;top:50%;left:calc(clamp(20px, 4vw, 44px) / 2 * -1);translate:-50% -50%;width:4px;aspect-ratio:auto 1;border-radius:100%;background:var(--point-white);opacity:0.4;} #footer .ft_menu > li.policy a{font-weight:600;} #footer .copy{font-size:var(--text-16);color:var(--point-white);font-weight:400;line-height:1.4;letter-spacing:-0.02em;font-family:var(--font-type01);opacity:0.4;} @media (max-width:1023px) { #footer .ft_txt{flex-direction:column;gap:var(--row-gap25);} } @media (max-width:640px) { #footer .ft_top_info{flex-direction: column;align-items: flex-start;gap:var(--row-gap25);} .addr-list > li{flex-direction:column;} } /* 퀵 */ .quick-list{position: fixed;left: 50%;bottom: clamp(15px, 5vw, 50px);translate: -50%;max-width: 1880px;display: flex;flex-direction: column;align-items: flex-end;gap: clamp(5px, 2vw, 10px);z-index: 50; opacity: 0; pointer-events: none; transition: all 0.4s;} body:has(#header.on:not(.end)) .quick-list{opacity: 1;} body:has(#header.on:not(.end)) .quick-list > li{pointer-events: all;} .quick-list > li{position: relative;width: clamp(50px, 6vw, 60px);aspect-ratio: auto 1;background: var(--point-color04);box-shadow:var(--shadow-03);border-radius:100%;} .quick-list > li a{display: flex;align-items: center;justify-content: center;} @media (min-width:861px) { .quick-list{width: calc(100% - 80px);} } /*───────────────────────────────────────────────────────── Sub ─────────────────────────────────────────────────────────*/ /* 비주얼 */ .sub-visual{padding-block:clamp(40px, 6vw, 80px) var(--row-gap80);} .sub-visual .cont{display: flex;align-items:flex-end;justify-content: space-between;gap:var(--row-gap30);flex-wrap:wrap;} .page_title{color: var(--black-color00);font-weight: 700;font-size:clamp(28px, 4vw, 50px);line-height: 1.14;letter-spacing: 0;} .sec-cate{display: flex;justify-content: center;align-items: center;gap:var(--row-gap10);font-size: var(--text-18);color:var(--black-color07);font-weight:600;flex-wrap:wrap;} .sec-cate a{display: flex;padding:clamp(10px, 2vw, 15px) clamp(15px, 2vw, 25px);border-radius: 100px;background:var(--gray-bg04);} .sec-cate a.on{background:var(--point-color01);color:var(--point-white);} .sub_content > section + section{margin-top:var(--row-gap120);} @media (max-width:1023px) { .sub-visual{padding-bottom: var(--row-gap80);} } /* 목록 공통 (.list_*) — 제품 / 게시판 / 대리점 공용*/ .list_title{margin-bottom:var(--row-gap40);font-size:var(--text-40);color:var(--black-color01);font-weight:700;line-height:1.3;letter-spacing:-0.02em;font-family:var(--font-type02);} .list_tabs{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(6px, 0.8vw, 10px) var(--row-gap30);margin-bottom:var(--row-gap60);padding-bottom:var(--row-gap25);border-bottom:1px solid var(--border-color01);} .list_tab{display:inline-flex;align-items:center;justify-content:center;font-size:var(--text-20);color:var(--black-color05);font-weight:600;line-height:1;letter-spacing:-0.02em;white-space:nowrap;font-family:var(--font-type02);cursor:pointer;transition:all 0.3s;} .list_tab.is-active{color:var(--point-color01);} @media (hover:hover) and (pointer:fine){ .list_tab:not(.is-active):hover{border-color:var(--point-color01);color:var(--point-color01);} } .list_bar{display:flex;align-items:center;justify-content:space-between;gap:var(--row-gap20);flex-wrap:wrap;margin-bottom:var(--row-gap25);} .list_count{font-size:var(--text-17);color:var(--black-color05);font-family:var(--font-type02);} .list_count strong{color:var(--point-color01);font-weight:700;} /* 검색폼 (.srch) — 게시판 / 제품 공용 컴포넌트 */ .srch{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--row-gap15);margin-left:auto;} .srch .srch-field{display:flex;align-items:stretch;} #wrap .srch .srch-input{width:clamp(200px, 26vw, 330px);height:var(--form-h);padding-inline:18px;box-sizing:border-box;border:1px solid var(--border-color01);border-right:0;border-radius:var(--radius-10) 0 0 var(--radius-10);background:var(--point-white);font-size:var(--text-17);color:var(--black-color01);font-family:var(--font-type02);outline:none;transition:border-color 0.3s;} #wrap .srch .srch-input::placeholder{color:var(--black-color09);} #wrap .srch .srch-input:focus{border-color:var(--point-color01);} .srch .srch-btn{flex-shrink:0;height:var(--form-h);padding-inline:clamp(22px, 3vw, 36px);border:0;border-radius:0 var(--radius-10) var(--radius-10) 0;background:var(--point-color04);color:var(--point-white);font-size:var(--text-17);font-weight:700;letter-spacing:-0.02em;line-height:1;font-family:var(--font-type02);cursor:pointer;transition:background 0.3s;} @media (hover:hover) and (pointer:fine){ .srch .srch-btn:hover{background:var(--point-color01);} } /* 검색어 칩 (결과내 재검색) */ .srch .srch-terms{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--font-type02);} .srch .srch-label{font-size:var(--text-15);color:var(--black-color07);} .srch .srch-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:100px;background:var(--point-color02);font-size:var(--text-15);color:var(--point-color01);font-weight:600;} .srch .srch-chip-remove{line-height:1;color:inherit;} .srch .srch-clear{font-size:var(--text-15);color:var(--black-color08);text-decoration:underline;} .srch .srch-within{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-15);color:var(--black-color05);cursor:pointer;} @media (max-width:640px){ .srch{width:100%;margin-left:0;} #wrap .srch select{width:100%;} #wrap .srch .srch-field{width:100%;} #wrap .srch .srch-input{width:100%;} } .sub_sec{display:grid;grid-template-columns:clamp(120px, 18vw, 240px) minmax(0, 1fr);column-gap:clamp(20px, 4vw, 60px);align-items:start;padding-top:var(--row-gap40);border-top:2px solid var(--black-color01);} .sub_sec + .sub_sec{margin-top:var(--row-gap120);} .sub_sec > .cate{display:flex;align-items:center;gap:10px;font-size:var(--text-17);color:var(--black-color03);font-weight:600;line-height:1.2;letter-spacing:0.08em;text-transform:uppercase;font-family:var(--font-type01);} .sub_sec > .cate:before{content:"";width:8px;aspect-ratio:auto 1;background:var(--point-color01);flex-shrink:0;} .sub_sec > .cate:has(img), .sub_sec > .cate:has(.img_box){display:block;} .sub_sec > .cate:has(img):before, .sub_sec > .cate:has(.img_box):before{display:none;} .sub_sec > .cate img, .sub_sec > .cate .img_box{display:block;width:100%;height:100%;} .sub_sec > .cate img{object-fit:contain;object-position:left center;} .sub_sec > .cate .img_box{box-sizing:border-box;border-radius:var(--radius-10);background:var(--point-color02);} .sub_sec > .sec_body{min-width:0;} .sub_sec .sec_body > h3{font-size:var(--text-40);color:var(--black-color01);font-weight:700;line-height:1.45;letter-spacing:-0.02em;font-family:var(--font-type02);} @media (max-width:860px){ .sub_sec{grid-template-columns:minmax(0, 1fr);row-gap:var(--row-gap30);} } #container > .sub_sec:first-child{margin-top:var(--row-gap80);} .sub_sec .sec_body > h3 strong{color:var(--point-color01);font-weight:inherit;} .ab_head{position:relative;margin-bottom:var(--row-gap40);} .ab_head h3{display:flex;align-items:flex-start;gap:var(--row-gap15);font-size:var(--text-36);color:var(--black-color01);font-weight:700;line-height:1.3;letter-spacing:-0.02em;font-family:var(--font-type02);} .ab_head h3:before{display:inline-flex;content:'';width:clamp(6px, 1vw, 10px);aspect-ratio:auto 1;background:var(--point-color01);border-radius:100%;flex-shrink:0;translate:0 clamp(11px, 1.7vw, 18px);} .ab_head h3 strong{color:var(--point-color01);font-weight:inherit;} .ab_head .desc{margin-top:var(--row-gap20);font-size:var(--text-18);color:var(--black-color05);font-weight:400;line-height:1.8;letter-spacing:-0.03em;font-family:var(--font-type02);} .ab_head.type_lg{margin-bottom:var(--row-gap60);} .ab_head.type_lg h3{display:block;font-size:var(--text-50);line-height:1.35;letter-spacing:-0.03em;} .ab_head.type_lg h3:before{display:none;} @media (max-width:860px){ .ab_head.type_lg{margin-bottom:var(--row-gap40);} } /* 기업소개 (about) */ .overview-meta{position: relative;display: grid;gap: var(--row-gap60);} .overview-meta .bnr-desc{position: relative;min-height: clamp(300px, 42vw, 420px);display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;padding: var(--row-gap120) 20px;} .overview-meta .bnr-desc dt{position: absolute;inset: 0;overflow: hidden;border-radius:var(--radius-20);} .overview-meta .bnr-desc dt img{width:100%;height: 100%;object-fit: cover;} .overview-meta .bnr-desc dd{position: relative;font-size: var(--text-40);font-weight: 500;color: var(--point-white);line-height: 1.4;} .overview-meta .title{position: relative;} .overview-meta .title h3{font-size: var(--text-32);font-weight: 600;color: var(--black-color01);line-height: 1.6;letter-spacing: -0.03em;} .overview-meta .exp{display: grid;gap: var(--row-gap20);} .overview-meta .exp::before{display: flex;content:'';background: linear-gradient(90deg,rgb(0, 78, 179) clamp(50px, 10vw, 100px), rgba(221, 221, 221, 1) clamp(50px, 10vw, 100px));width: 100%;height: 2px;margin-block: var(--row-gap50) var(--row-gap20);} .overview-meta .exp p{font-size: var(--text-20);color: var(--black-color03);line-height: 1.8;letter-spacing: -0.03em;} .overview-meta .exp p strong{font-weight: 600;} .overview-meta .exp p em{font-weight: 600;color: var(--point-color01);} .ab_core{background:var(--point-white);} .ab_core .core_grid{display:grid;gap:var(--row-gap100);} .ab_core .core_grid > li{display:flex;align-items:center;gap:clamp(60px, 6vw, 80px);min-width:0;} .ab_core .core_grid > li:nth-child(even){flex-direction:row-reverse;} .ab_core .core_visual{display:flex;align-items:center;justify-content:center;width:50%;overflow:hidden;border-radius:var(--radius-20);background:linear-gradient(135deg, var(--point-color02), var(--gray-bg04));} .ab_core .core_grid .ico{display:flex;align-items:center;justify-content:center;width:clamp(110px, 13vw, 170px);aspect-ratio:auto 1;border-radius:100%;background:var(--point-white);box-shadow:0 25px 50px rgba(0, 78, 179, 0.12);} .ab_core .core_grid .ico img{width:46%;height:auto;} .ab_core .core_text{width:calc(50% - clamp(60px, 6vw, 80px));padding-block:var(--row-gap40);box-sizing:border-box;} .ab_core .core_grid .en{display:block;font-size:var(--text-15);color:var(--point-color01);font-weight:600;line-height:1.2;letter-spacing:0.08em;text-transform:uppercase;font-family:var(--font-type01);} .ab_core .core_grid h4{margin-top:10px;padding-bottom:var(--row-gap40);border-bottom:1px solid var(--border-color01);font-size:var(--text-28);color:var(--black-color01);font-weight:700;line-height:1.4;letter-spacing:-0.02em;font-family:var(--font-type02);} .ab_core .core_grid p{margin-top:var(--row-gap20);font-size:var(--text-17);color:var(--black-color05);font-weight:400;line-height:1.75;letter-spacing:-0.02em;font-family:var(--font-type02);} @media (max-width:860px){ .ab_core .core_grid{gap:var(--row-gap80);} .ab_core .core_grid > li, .ab_core .core_grid > li:nth-child(even){flex-direction:column;gap:var(--row-gap40);} .ab_core .core_visual, .ab_core .core_text{width:100%;padding-block:0;} .ab_core .core_grid h4{padding-bottom:var(--row-gap35);} } /* CEO 인사말 (greeting) */ .greet_sec .ab_head.type_lg h3{font-size:clamp(24px, 3vw, 36px);} .sub_sec.greet_msg{border-top:0;padding-top:0;display: flex;align-items: flex-start;} .sub_sec.greet_msg .cate{width:clamp(300px, 40vw, 520px);flex-shrink:0;} .sub_sec.greet_msg .cate .img_box{aspect-ratio:auto 0.9;} .greet_msg .greet_txt{display:grid;gap:var(--row-gap20);} .greet_msg .greet_txt p{font-size:var(--text-18);color:var(--black-color03);font-weight:400;line-height:1.9;letter-spacing:-0.03em;font-family:var(--font-type02);} .greet_msg .greet_txt p em{color:var(--point-color01);font-weight:600;} .greet_msg .greet_txt p.lead{font-size:var(--text-22);color:var(--black-color01);font-weight:600;line-height:1.7;} .greet_msg .greet_txt p.thanks{margin-top:var(--row-gap10);} .greet_msg .greet_sign{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--row-gap10);margin-top:var(--row-gap40);padding-top:var(--row-gap30);border-top:1px solid var(--border-color01);} .greet_msg .greet_sign .corp, .greet_msg .greet_sign .pos{font-size:var(--text-18);color:var(--black-color05);font-weight:400;letter-spacing:-0.02em;font-family:var(--font-type02);} .greet_msg .greet_sign .name{font-size:var(--text-26);color:var(--black-color01);font-weight:700;letter-spacing:-0.02em;font-family:var(--font-type02);} @media (max-width:767px){ .sub_sec.greet_msg{flex-direction: column;} .sub_sec.greet_msg .cate{width:100%;} } @media (max-width:479px){ .greet_msg > .cate .img_box{aspect-ratio:auto 0.8;} } /* 비전 & 목표 (vision) */ .slogan_list{display:grid;gap:clamp(12px, 1.6vw, 20px);} .slogan_list > li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--row-gap15);padding:clamp(30px, 4.5vw, 60px) clamp(20px, 3vw, 40px);box-sizing:border-box;border:1px solid var(--border-color01);border-radius:var(--radius-20);background:var(--point-white);text-align:center;} .slogan_list .en{font-size:var(--text-32);color:var(--black-color01);font-weight:700;line-height:1.3;letter-spacing:-0.02em;font-family:var(--font-type01);} .slogan_list .ko{font-size:var(--text-18);color:var(--black-color05);font-weight:500;line-height:1.6;letter-spacing:-0.03em;font-family:var(--font-type02);} .slogan_list > li.type_main{border-color:var(--point-color01);background:var(--point-color01);} .slogan_list > li.type_main .en{font-size:var(--text-32);color:var(--point-white);} .slogan_list > li.type_main .ko{font-size:var(--text-18);color:rgba(255, 255, 255, 0.8);} .slogan_list > li:not(.type_main){border-color:var(--point-color01);} .slogan_list > li:not(.type_main) .en, .slogan_list > li:not(.type_main) .ko{color:var(--point-color01);} .vs_mv .mv_list{display: flex;flex-direction: column;gap:var(--row-gap20);} .vs_mv .mv_row{display:grid;grid-template-columns:clamp(110px, 16vw, 220px) minmax(0, 1fr);align-items:stretch;border:1px solid var(--border-color01);border-radius:var(--radius-20);overflow:hidden;} .vs_mv .mv_row + .mv_row{border-top:1px solid var(--border-color01);} .vs_mv .mv_row > dt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:var(--row-gap30) 10px;background:var(--point-color01);text-align:center;} .vs_mv .mv_row + .mv_row > dt{background:var(--point-color03);} .vs_mv .mv_row > dt .lb{font-size:var(--text-26);color:var(--point-white);font-weight:700;line-height:1.2;letter-spacing:-0.02em;font-family:var(--font-type02);} .vs_mv .mv_row > dt .en{font-size:var(--text-15);color:rgba(255, 255, 255, 0.75);font-weight:600;line-height:1.2;letter-spacing:0.08em;text-transform:uppercase;font-family:var(--font-type01);} .vs_mv .mv_row > dd{padding:var(--row-gap30) clamp(20px, 3.5vw, 45px);} .vs_mv .mv_row .stat{font-size:var(--text-26);color:var(--black-color01);font-weight:700;line-height:1.45;letter-spacing:-0.02em;font-family:var(--font-type02);} .vs_mv .mv_row .stat strong{color:inherit;font-weight:inherit;} .vs_mv .mv_row .en_sub{margin-top:10px;font-size:var(--text-17);color:var(--point-color01);font-weight:600;line-height:1.4;letter-spacing:0.02em;font-family:var(--font-type01);} .vs_mv .mv_row .txt{margin-top:var(--row-gap20);padding-top:var(--row-gap20);border-top:1px solid var(--border-color01);font-size:var(--text-17);color:var(--black-color05);font-weight:400;line-height:1.8;letter-spacing:-0.02em;font-family:var(--font-type02);} .vs_flow{display:flex;justify-content:center;margin-block:var(--row-gap30);} .vs_flow img{height:clamp(60px, 10vw, 124px);} .vison_core{background:var(--point-color02);padding-block:var(--row-gap100);} .vison_core .core_grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:clamp(10px, 1.6vw, 20px);} .vison_core .core_grid > li{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(24px, 2.6vw, 36px) clamp(20px, 2.4vw, 30px) clamp(30px, 3vw, 40px);box-sizing:border-box;border-radius:clamp(10px, 1.56vw, 20px);background:var(--point-white);box-shadow:0 30px 30px rgba(0, 0, 0, 0.05);} .vison_core .core_grid > li:before{content:"";position:absolute;inset:0;border:3px solid var(--point-color01);border-radius:inherit;opacity:0;transition:opacity 0.3s;pointer-events:none;z-index:6;} .vison_core .core_grid .no{position:absolute;top:clamp(24px, 2.6vw, 36px);right:clamp(20px, 2.4vw, 30px);font-size:var(--text-18);color:var(--black-color10);font-weight:600;line-height:1;font-family:var(--font-type01);} .vison_core .core_grid .ico{display:flex;align-items:center;justify-content:center;width:clamp(52px, 5.5vw, 68px);aspect-ratio:auto 1;border-radius:100%;background:var(--point-color02);} .vison_core .core_grid .ico img{width:46%;height:auto;} .vison_core .core_grid .en{margin-top:var(--row-gap30);font-size:var(--text-15);color:var(--point-color01);font-weight:600;line-height:1.2;letter-spacing:0.08em;text-transform:uppercase;font-family:var(--font-type01);} .vison_core .core_grid h4{margin-top:10px;font-size:var(--text-22);color:var(--black-color01);font-weight:700;line-height:1.4;letter-spacing:-0.02em;font-family:var(--font-type02);} .vison_core .core_grid p{margin-top:var(--row-gap20);font-size:var(--text-17);color:var(--black-color05);font-weight:400;line-height:1.75;letter-spacing:-0.02em;font-family:var(--font-type02);} @media (hover:hover) and (pointer:fine){ .vison_core .core_grid > li:hover:before{opacity:1;} } @media (max-width:1023px){ .vison_core .core_grid{grid-template-columns:repeat(2, minmax(0, 1fr));} } @media (max-width:640px){ .vison_core .core_grid{grid-template-columns:minmax(0, 1fr);} } @media (max-width:640px){ .vs_mv .mv_row{grid-template-columns:minmax(0, 1fr);} .vs_mv .mv_row > dt{flex-direction:row;gap:10px;padding-block:var(--row-gap15);} } /* 찾아오시는 길 (location) */ .loca-meta{border:1px solid var(--border-color01);border-radius:var(--radius-20);overflow:hidden;background:var(--point-white);} .loca-meta .import{position:relative;width:100%;aspect-ratio:16 / 7;background:var(--gray-bg04);} .loca-meta .import iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;} .loca-meta .info{padding:0;border-top:1px solid var(--border-color01);background:var(--point-white);} .loca-meta .loca_inq_info{gap:0;padding:clamp(22px, 3vw, 36px) clamp(24px, 4vw, 50px);border:0;border-radius:0;background:var(--point-color02);backdrop-filter:none;} .loca-meta .loca_inq_info > div{display:grid;grid-template-columns:clamp(100px, 15vw, 150px) minmax(0, 1fr);gap:var(--row-gap20);align-items:center;padding-block:clamp(6px, 1vw, 10px);} .loca-meta .loca_inq_info dt{gap:12px;color:var(--point-color03);} .loca-meta .loca_inq_info dt .lb{min-width:0;} .loca-meta .loca_inq_info dd{color:var(--black-color01);font-weight:500;overflow-wrap:anywhere;} .loca-meta .info .title h4{display:flex;align-items:center;font-size:var(--text-26);color:var(--black-color01);font-weight:700;line-height:1.4;letter-spacing:-0.02em;font-family:var(--font-type02);} .loca-meta .info .title a{display:inline-flex;align-items:center;max-width:100%;} /* {{SITE_LOGO}} 가 붙이는 Tailwind h-10(40px 고정)을 덮어써 반응형으로 만든다 */ .loca-meta .info .title img{width:auto;height:clamp(38px, 4.4vw, 56px);max-width:100%;object-fit:contain;object-position:left center;} .loca-meta .info .cont{display:grid;gap:var(--row-gap15);} .loca-meta .desc{display:grid;grid-template-columns:clamp(100px, 11vw, 130px) minmax(0, 1fr);gap:var(--row-gap15);align-items:start;} .loca-meta .desc dt{display:flex;align-items:center;gap:10px;font-size:var(--text-17);color:var(--black-color01);font-weight:600;letter-spacing:-0.02em;font-family:var(--font-type02);} .loca-meta .desc dt i{display:flex;align-items:center;justify-content:center;width:clamp(28px, 3vw, 36px);aspect-ratio:auto 1;border-radius:var(--radius-06);background:var(--point-color02);flex-shrink:0;} .loca-meta .desc dt i img{width:52%;height:auto;} .loca-meta .desc dd{font-size:var(--text-17);color:var(--black-color05);font-weight:400;line-height:1.7;letter-spacing:-0.02em;font-family:var(--font-type02);} .loca-meta .desc dd a{color:inherit;} .loc_info .info_list{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));border-top:2px solid var(--black-color01);} .loc_info .info_list > li{display:grid;grid-template-columns:clamp(110px, 13vw, 170px) minmax(0, 1fr);gap:var(--row-gap15);align-items:start;min-width:0;padding:var(--row-gap25) clamp(14px, 2vw, 25px);border-bottom:1px solid var(--border-color01);} .loc_info .info_label{font-size:var(--text-17);color:var(--black-color01);font-weight:600;letter-spacing:-0.02em;font-family:var(--font-type02);} .loc_info .info_value{min-width:0;font-size:var(--text-17);color:var(--black-color05);font-weight:400;line-height:1.7;letter-spacing:-0.02em;overflow-wrap:anywhere;font-family:var(--font-type02);} .loc_info .info_value a{color:inherit;} @media (max-width:860px){ .loca-meta .import{aspect-ratio:4 / 3;} .loca-meta .info{grid-template-columns:minmax(0, 1fr);align-items:start;} .loc_info .info_list{grid-template-columns:minmax(0, 1fr);} .loc_info .info_list > li:last-child{display: none;} } @media (max-width:640px){ .loca-meta .desc{grid-template-columns:minmax(0, 1fr);gap:8px;} .loc_info .info_list > li{grid-template-columns:minmax(0, 1fr);gap:8px;} .loca-meta .loca_inq_info{padding:18px 20px;} .loca-meta .loca_inq_info > div{grid-template-columns:minmax(0, 1fr);gap:8px;padding-block:16px;} .loca-meta .loca_inq_info dd{padding-left:40px;} } /* 제품안내 (product) — 목록 */ /* 카드 그리드 — 시안 기준 4열 */ .pf-page .pf-list-grid{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:clamp(12px, 1.6vw, 20px);} .pf-page .pf-card{position:relative;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box;border:0;border-radius:var(--radius-20);background:var(--point-white);box-shadow:0 30px 30px rgba(0, 0, 0, 0.05);} .pf-page .pf-card:before{content:"";position:absolute;inset:0;border:3px solid var(--point-color01);border-radius:inherit;opacity:0;transition:opacity 0.3s;pointer-events:none;z-index:2;} .pf-page .pf-card-thumb{position:relative;width:100%;aspect-ratio:auto 1;overflow:hidden;} .pf-page .pf-card-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:clamp(20px, 2.8vw, 34px);box-sizing:border-box;} .pf-page .pf-card-img--empty{display:flex;align-items:center;justify-content:center;color:var(--black-color09);} .pf-page .pf-card-img--empty svg{width:clamp(38px, 4.5vw, 56px);height:auto;padding:0;} /* 본문 — 시리즈 라벨 / 제품명 / 설명 을 가운데 정렬 */ .pf-page .pf-card-body{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:clamp(18px, 2.2vw, 26px) clamp(16px, 2vw, 22px) clamp(24px, 2.8vw, 32px);text-align:left;} .pf-page .pf-card-badge{display:inline-flex;margin-bottom:2px;font-size:var(--text-15);color:var(--point-color01);font-weight:600;line-height:1.2;letter-spacing:-0.01em;font-family:var(--font-type01);} .pf-page .pf-card-title{font-size:var(--text-26);color:var(--black-color01);font-weight:600;line-height:1.4;font-family:var(--font-type01);} .pf-page .pf-card-desc{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:var(--text-18);color:var(--black-color05);font-weight:400;line-height:1.6;letter-spacing:-0.02em;font-family:var(--font-type02);} .pf-page .pf-list-empty{padding-block:var(--row-gap80);text-align:center;font-size:var(--text-18);color:var(--black-color08);font-family:var(--font-type02);} @media (hover:hover) and (pointer:fine){ .pf-page .pf-card:hover:before{opacity:1;} } .pf-page .pf-card:focus-visible:before{opacity:1;} @media (prefers-reduced-motion:reduce){ .pf-page .pf-card:before{transition:none;} } @media (max-width:1023px){ .pf-page .pf-list-grid{grid-template-columns:repeat(3, minmax(0, 1fr));} } @media (max-width:860px){ .pf-page .pf-list-grid{grid-template-columns:repeat(2, minmax(0, 1fr));} } @media (max-width:480px){ .pf-page .pf-list-grid{grid-template-columns:minmax(0, 1fr);} } /* 제품안내 (product) — 상세 */ .pf-page--view .pf-top{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:clamp(24px, 3.8vw, 50px);align-items:start;margin-bottom:var(--row-gap60);} .pf-page--view .pf-gallery{overflow:hidden;box-sizing:border-box;border:0;border-radius:var(--radius-20);padding:clamp(24px, 3.4vw, 44px);} .pf-page--view .pf-thumbnail, .pf-page--view .pf-main-image img{border-radius:var(--radius-10);} .pf-page--view .pf-gallery-empty{display:flex;align-items:center;justify-content:center;aspect-ratio:4 / 3;border-radius:var(--radius-10);background:var(--point-white);color:var(--black-color09);} .pf-page--view .pf-thumb{border-radius:var(--radius-06);overflow:hidden;} /* 분류 태그 — 목록 카드의 시리즈 라벨과 동일한 연블루 알약 */ .pf-page--view .pf-group-badge{display:inline-flex;margin-bottom:var(--row-gap15);border-radius:100px;font-size:var(--text-15);color:var(--point-color01);font-weight:600;font-family:var(--font-type01);} .pf-page--view .pf-title{margin-bottom:var(--row-gap20);font-size:var(--text-36);color:var(--black-color01);font-weight:700;line-height:1.35;letter-spacing:-0.03em;font-family:var(--font-type02);} /* 스펙 표 — 첫 행이 '제품 설명'(.pf-field--desc), 이후가 추가필드 */ .pf-page--view .pf-fields{margin-top:var(--row-gap25);padding-top:var(--row-gap40);border-top:1px solid var(--black-color01);} .pf-page--view .pf-description{white-space:pre-line;} .pf-page--view .pf-field{display:grid;grid-template-columns:35% minmax(0, 1fr);gap:var(--row-gap15);align-items:baseline;padding-block:14px;} .pf-page--view .pf-label{font-size:var(--text-17);color:var(--black-color06);font-weight:500;font-family:var(--font-type02);} .pf-page--view .pf-value{text-align:right;font-size:var(--text-17);color:var(--black-color01);font-weight:700;font-family:var(--font-type02);} .pf-page--view .pf-buttons{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--row-gap25);} .pf-page--view .pf-btn{flex:1 1 160px;display:flex;align-items:center;justify-content:center;height:clamp(46px, 5vw, 56px);padding-inline:20px;box-sizing:border-box;border-radius:var(--radius-10);font-size:var(--text-17);font-weight:700;font-family:var(--font-type02);} .pf-page--view .pf-btn--primary{border:0;background:var(--point-color04);color:var(--point-white);} .pf-page--view .pf-btn--common{border:1px solid var(--point-color01);background:var(--point-white);color:var(--point-color01);} /* 하단 : 제품 상세 정보 */ /* 하단 : '제품정보' 헤더 + 1px 룰, 본문은 박스 없이 가운데 */ .pf-page--view .pf-bottom{margin-top:var(--row-gap80);} .pf-page--view .pf-bottom-title{padding-bottom:var(--row-gap20);margin-bottom:var(--row-gap50);border-bottom:1px solid var(--border-color01);font-size:var(--text-26);color:var(--black-color01);font-weight:700;letter-spacing:-0.02em;font-family:var(--font-type02);} .pf-page--view .pf-content{text-align:center;} .pf-page--view .pf-content p{margin-inline:auto;max-width:860px;font-size:var(--text-17);color:var(--black-color05);line-height:1.8;letter-spacing:-0.02em;font-family:var(--font-type02);} .pf-page--view .pf-content img{max-width:100%;height:auto;border-radius:var(--radius-10);} /* 목록으로 버튼 */ .pf-page--view .pf-actions, .board-view-actions{display:flex;justify-content:center;margin-top:var(--row-gap60);} .pf-page--view .pf-btn-list, .board-view-actions .pf-btn-list{display:inline-flex;align-items:center;justify-content:center;min-width:clamp(150px, 16vw, 200px);height:clamp(46px, 4.8vw, 56px);padding-inline:clamp(24px, 3vw, 36px);box-sizing:border-box;border:1px solid var(--point-color04);border-radius:var(--radius-10);background:var(--point-color04);font-size:var(--text-17);color:var(--point-white);font-weight:700;letter-spacing:-0.02em;line-height:1;font-family:var(--font-type02);transition:all 0.3s;} @media (hover:hover) and (pointer:fine){ .pf-page--view .pf-btn-list:hover, .board-view-actions .pf-btn-list:hover{background:var(--point-color01);border-color:var(--point-color01);} } .pf-page--view .pf-attachments{margin-top:var(--row-gap30);} .pf-page--view .pf-attachments-title{margin-bottom:var(--row-gap15);font-size:var(--text-20);color:var(--black-color01);font-weight:700;font-family:var(--font-type02);} .pf-page--view .pf-attachment{display:flex;align-items:center;gap:8px;padding-block:10px;border-bottom:1px solid var(--border-color01);font-size:var(--text-17);color:var(--black-color03);font-family:var(--font-type02);} .pf-page--view .pf-attachment-icon{width:16px;height:16px;flex-shrink:0;color:var(--black-color08);} @media (max-width:860px){ .pf-page--view .pf-top{grid-template-columns:minmax(0, 1fr);} .pf-page--view .pf-field{grid-template-columns:minmax(90px, 38%) minmax(0, 1fr);} } /* 대리점 (branch) — 게시판형 목록 + 지도 레이어 팝업 */ /* 지역 셀렉트는 전역 #wrap select 를 그대로 사용 (별도 .br-select 없음) */ .br-filter{gap:8px;} .br-btn-reset{height:var(--form-h);padding-inline:clamp(18px, 2.2vw, 26px);box-sizing:border-box;border:1px solid var(--border-color01);border-radius:var(--radius-10);background:var(--point-white);font-size:var(--text-17);color:var(--black-color05);font-weight:600;font-family:var(--font-type02);cursor:pointer;transition:all 0.3s;} @media (hover:hover) and (pointer:fine){ .br-btn-reset:hover{border-color:var(--point-color01);color:var(--point-color01);} } @media (max-width:640px) { .br-btn-reset{width:100%;} } /* 목록 표 */ /* 지점명 셀은 .bbs_table td.left 보다 진하게 (선택자 우선순위로 덮음 — !important 불필요) */ #wrap .bbs_table td.br-name{color:var(--black-color01);font-weight:600;} .br-name .br-badge{display:inline-flex;margin-left:8px;padding:4px 10px;border-radius:100px;background:var(--point-color02);font-size:var(--text-15);color:var(--point-color01);font-weight:600;vertical-align:middle;} .br-map-btn{display:inline-flex;align-items:center;justify-content:center;width:clamp(38px, 4vw, 44px);aspect-ratio:auto 1;border:1px solid var(--border-color01);border-radius:100%;background:var(--point-white);color:var(--point-color01);cursor:pointer;transition:all 0.3s;} .br-map-btn svg{width:56%;height:auto;} @media (hover:hover) and (pointer:fine){ .br-map-btn:hover{border-color:var(--point-color01);background:var(--point-color01);color:var(--point-white);} } /* 지도 레이어 팝업 */ body.br-modal-open{overflow:hidden;} .br-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box;} .br-modal[hidden]{display:none;} .br-modal-dim{position:absolute;inset:0;background:rgba(0,0,0,0.5);} .br-modal-box{position:relative;z-index:1;width:min(720px, 100%);max-height:90vh;overflow-y:auto;box-sizing:border-box;border-radius:var(--radius-20);background:var(--point-white);box-shadow:0 30px 60px rgba(0, 0, 0, 0.25);} .br-modal-head{display:flex;align-items:center;justify-content:space-between;gap:var(--row-gap15);padding:clamp(18px, 2.2vw, 26px) clamp(20px, 2.6vw, 30px);border-bottom:1px solid var(--border-color01);} .br-modal-title{font-size:var(--text-22);color:var(--black-color01);font-weight:700;letter-spacing:-0.02em;font-family:var(--font-type02);} .br-modal-close{display:inline-flex;align-items:center;justify-content:center;width:36px;aspect-ratio:auto 1;flex-shrink:0;border:0;border-radius:100%;background:var(--gray-bg04);color:var(--black-color03);cursor:pointer;transition:all 0.3s;} .br-modal-close svg{width:16px;height:16px;} @media (hover:hover) and (pointer:fine){ .br-modal-close:hover{background:var(--point-color04);color:var(--point-white);} } .br-modal-map{position:relative;width:100%;aspect-ratio:16 / 10;background:var(--gray-bg04);} .br-map-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;text-align:center;font-size:var(--text-17);color:var(--black-color07);font-family:var(--font-type02);} .br-modal-info{display:grid;gap:var(--row-gap15);padding:clamp(18px, 2.2vw, 26px) clamp(20px, 2.6vw, 30px);} .br-modal-info > div{display:grid;grid-template-columns:clamp(70px, 8vw, 90px) minmax(0, 1fr);gap:var(--row-gap15);align-items:start;} .br-modal-info dt{font-size:var(--text-17);color:var(--black-color01);font-weight:600;font-family:var(--font-type02);} .br-modal-info dd{font-size:var(--text-17);color:var(--black-color05);line-height:1.6;font-family:var(--font-type02);} .br-modal-info dd a{color:inherit;} @media (max-width:860px){ .br-filter{width:100%;margin-left:0;} .br-filter .srch-input{width:100%;} /* 표를 카드형으로 — 주소/연락처는 라벨을 붙여 세로로 */ } /*input*/ #wrap [type="checkbox"]{display: inline-flex;align-items: center;justify-content: center;width: clamp(22px, 3.1vw, 25px);height: clamp(22px, 3.1vw, 25px);border: 1px solid var(--border-color01);flex-shrink: 0;cursor: pointer;appearance:none;border-radius:var(--radius-04);} #wrap [type="checkbox"]::before{display: inline-flex;content:'';width: clamp(10px, 1.7vw, 12px);aspect-ratio: auto 1.33;background: url('/images/chk_icon.svg') no-repeat center / 100% auto;filter: var(--filter-black) opacity(0.2);} #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: 500;color: var(--black-color03);line-height: clamp(22px, 3.1vw, 25px);cursor: pointer;} #wrap label:has([type="checkbox"]) em{font-weight: 600; color: var(--point-red02); display: contents;} #wrap :is(input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="email"], input[type="tel"], textarea) { height:var(--form-h); line-height: 1.5; width: 100%; border:1px solid var(--border-color01);color: var(--black-color05); font-weight: 400; font-size: var(--text-18); font-family: var(--font-type02); padding: 0 clamp(10px, 2vw, 20px); text-indent: 0; margin: 0; box-sizing: border-box; vertical-align: middle; text-align: left; outline: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;box-sizing: border-box;border-radius:var(--radius-10)} #wrap textarea {min-height: 250px; resize: none; padding: 20px;} #wrap :is(input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="email"], input[type="tel"], textarea)::placeholder { color: var(--black-color08); font-weight: 400; } #wrap :is(input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="email"], input[type="tel"], textarea):focus {background: var(--point-white); border-color: var(--point-color01);} #wrap select{width: clamp(100px, 18vw, 180px);height: var(--form-h);box-sizing:border-box;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(35px, 5.5vw, 55px) 0 clamp(15px, 2vw, 20px);font-size: var(--text-18);font-weight:500;color: var(--black-color03);line-height: normal;appearance: none;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing: -0.03em;vertical-align: middle;cursor: pointer;} /* === paging === */ #wrap .paging {position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: flex; justify-content: center; align-items: center; width: max-content; text-align:center;} #wrap .paging span {display:inline-block;vertical-align:top;} #wrap .paging a {box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;font-size:var(--text-17);font-weight: 500;color:var(--black-color08);padding:0;border:0;box-sizing:border-box;width:clamp(30px, 4vw, 40px);height:clamp(30px, 4vw, 40px);line-height:1;min-width:auto;text-align:center;vertical-align:top;margin:0 5px;} #wrap .paging :is(.on a, a.on){background:var(--black-color01);color:var(--point-white);font-weight:600;} #wrap .paging .arrow a {font-size:0;width:clamp(20px, 3vw, 30px); background:no-repeat center; } #wrap .paging .arrow.first a {background-image:url("/images/paging_first.svg");} #wrap .paging .arrow.prev a {background-image:url("/images/paging_prev.svg"); margin-right: 10px;} #wrap .paging .arrow.next a {background-image:url("/images/paging_prev.svg"); margin-left: 10px;scale:-1 -1;} #wrap .paging .arrow.last a {background-image:url("/images/paging_first.svg");scale:-1 -1;} @media (max-width:860px) { #wrap .paging {position: relative; left: inherit; top: inherit; translate: 0; width: 100%;} #wrap .paging + .btn_wrap {margin-top: var(--row-gap40);} } /* === list === */ /* 일반 */ #wrap .nodata {width: 100% !important; text-align:center !important; min-height: clamp(140px, 14.58vw, 280px);} #wrap .bbs_table {position: relative; width: 100%; table-layout: fixed; font-size: var(--text-20); border-top: 1px solid var(--black-color01);} #wrap .bbs_table :where(th, td){line-height: 1.3;border-bottom: 1px solid var(--border-color01);padding: 26px 10px;text-align: center;} #wrap .bbs_table th{font-size:100%; font-weight: 500; color: var(--black-color01);} #wrap .bbs_table td{font-size:90%;font-weight: 400; color: var(--black-color08);} #wrap .bbs_table td.left{font-size:100%;text-align: left; padding-inline: var(--row-gap20); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-break: break-all;color:var(--black-color03);font-weight:400;} #wrap .bbs_table .notice td.left{font-weight:500;} #wrap .bbs_table .notice .tag{display: inline-flex;align-items: center;justify-content: center;box-sizing:border-box;font-size:var(--text-16);color:var(--point-white);font-weight:600;background:var(--point-color01);padding:10px 20px 9px;line-height:1;} #wrap .bbs_table .for_t {display: none;} /* over */ @media (hover:hover) and (pointer:fine) { #wrap .bbs_table tbody tr:not(:has(.nodata)):hover {background: var(--gray-bg01);} } @media (max-width:1023px) { #wrap .bbs_table .notice .tag{padding:6px 14px 5px;} } @media (max-width:860px) { #wrap .bbs_table{display: block;} #wrap .bbs_table thead{display: none;} #wrap .bbs_table :where(tbody, tr, th, td){display: block; width: 100%; border:0; padding:0; text-align: left;} #wrap .bbs_table tr{padding:var(--row-gap25);display: flex;flex-wrap: wrap;gap: var(--row-gap10) var(--row-gap20);border-bottom: 1px solid var(--border-color01);} #wrap .bbs_table td{width: auto;} #wrap .bbs_table td.left{width: 100%; padding: 0;} #wrap .bbs_table td.num{display: none;} #wrap .bbs_table .for_t {display: inline-block;} } /* === view === */ #wrap .bbs_view .view_tit{display: flex;flex-direction: column;gap:var(--row-gap30);box-sizing:border-box;padding-bottom:var(--row-gap40);border-bottom:1px solid var(--border-color01);align-items: flex-start;} #wrap .bbs_view .view_tit h4{display: flex;align-items:center;gap:var(--row-gap20);} #wrap .bbs_view .view_tit h4 .tag{display: inline-flex;align-items: center;justify-content: center;box-sizing:border-box;font-size:var(--text-16);color:var(--point-white);font-weight:600;background:var(--point-color01);padding:clamp(6px, 1vw, 10px) clamp(10px, 2vw, 20px) clamp(5px, 0.5vw, 9px);border-radius:6px;line-height:1;} #wrap .bbs_view .view_tit h4 strong{color:var(--black-color03);font-weight:600;line-height:1.4;font-size:var(--text-34);} #wrap .bbs_view .view_tit .name_box{display: flex;align-items: center;gap:var(--row-gap40);} #wrap .bbs_view .view_tit .name_box dl{display: flex;align-items: center;gap:clamp(10px, 1.2vw, 16px);position: relative;} #wrap .bbs_view .view_tit .name_box dl + dl:before{width:1px;height:clamp(8px, 1vw, 12px);content:"";background:var(--border-color01);display: inline-block;position: absolute;left:-20px;top:50%;translate:0 -50%;} #wrap .bbs_view .view_tit .name_box :where(dt, dd) {font-size:var(--text-18);font-weight:500;font-family:var(--font-type03);} #wrap .bbs_view .view_tit .name_box dt{color:var(--black-color06);} #wrap .bbs_view .view_tit .name_box dd{color:var(--black-color08);} #wrap .bbs_view div.view_cont{border-bottom:1px solid var(--border-color01);padding:clamp(25px, 4vw, 40px) 0;text-align: center;} #wrap .bbs_view .extra_editor_wrap{display: flex;box-sizing:border-box;border-radius:var(--radius-10);background:var(--gray-bg01);align-items: center;padding:clamp(12px, 2.2vw, 27px) 0;border:none;margin-top:40px;} #wrap .bbs_view .extra_editor_wrap h5 {text-align: center;font-size:var(--text-18);color:var(--black-color03);font-weight:500;width:clamp(100px, 15vw, 180px);flex-shrink:0;background:none;} #wrap .bbs_view .extra_editor_wrap > div.extra_cont{box-sizing:border-box;padding-inline:var(--row-gap60) clamp(12px, 3vw, 30px);position: relative;} #wrap .bbs_view .extra_editor_wrap > div.extra_cont:before{width:1px;height:clamp(8px, 1vw, 12px);content:"";background:var(--border-color01);display: inline-block;position: absolute;left:0;top:50%;translate:0 -50%;} #wrap .bbs_view .extra_editor_wrap > div.extra_cont a{font-size:var(--text-18);color:var(--black-color06) !important;font-weight:400;} #wrap .view_btn {position: relative; margin-top: var(--row-gap60);text-align: center;} .main_more{display: inline-flex;align-items: center;justify-content:center;width:clamp(160px, 20vw, 200px);height:clamp(46px, 5vw, 56px);background:var(--point-color01);border:1px solid var(--point-color01);font-size:var(--text-18);color:var(--point-white);font-weight:600;transition:all 0.3s;border-radius:var(--radius-10);} /* === write === */ #wrap .bbs_write { box-sizing: border-box; display: flex; flex-direction: column; flex-wrap: wrap; gap: var(--row-gap30); padding-block: var(--row-gap40); border-top: 1px solid var(--black-color00); border-bottom: 1px solid var(--border-color01); } #wrap .bbs_write .line2 { gap: var(--row-gap60); } #wrap .bbs_write dl { display: flex; flex-wrap: wrap; width: 100%; align-items: center; box-sizing: border-box; } #wrap .bbs_write dl dt { width: clamp(140px, 12vw, 180px); box-sizing: border-box; padding-right: 15px; padding-left: 2px; color: var(--black-color03); font-weight: 500; font-size: var(--text-20); letter-spacing: -0.03em; } #wrap .bbs_write dl dd { width: calc(100% - clamp(140px, 12vw, 180px)); display: flex; align-items: center; gap: 10px; } #wrap .req .require_dot { color: var(--point-color02); } #wrap dl dt:not(.req) .require_dot{display: none;} #wrap .bbs_write .bbs_file dd{flex-direction: column;align-items: flex-start;} #wrap .bbs_file input[type="file"]{display: none;} #wrap .bbs_file .file_box{display: flex;align-items: center;gap:var(--row-gap10);} #wrap .bbs_file .file_btn{display: inline-flex;align-items: center;justify-content: center;height:clamp(48px, 6vw, 60px);border:1px solid var(--border-color01);font-size:var(--text-18);color:var(--black-color03);font-weight:500;cursor:pointer;width:clamp(100px, 13vw, 130px);} #wrap .captcha_wrap {display: flex; gap: 10px; padding: 10px; width: 170px;box-shadow: inset 0 0 0 1px var(--border-color01);box-sizing: border-box;border-radius:var(--radius-10);} #wrap .captcha input[type="text"] {width: calc(100% - 180px);} #wrap .db-captcha-img {width:100px;} #wrap .db-captcha-refresh {display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; background: var(--black-color08);border-radius:var(--radius-06)} #wrap .db-captcha-refresh svg, .db-captcha-refresh path {stroke: #fff;} #wrap .policy_wrap {padding-block: var(--row-gap40) 0;margin:0;} #wrap .policy_wrap button {text-decoration: underline; text-underline-offset: 4px;} @media (max-width:1023px) { #wrap .captcha dd {flex-wrap: wrap;} #wrap .captcha input[type="text"] {width: 100%;} } @media (max-width:860px) { #wrap .captcha_wrap {width: 151px; height: 50px; padding: 6px; gap: 6px;} #wrap .db-captcha-refresh {width: 38px; height: 38px;} #wrap .bbs_write .line2 {gap: var(--row-gap30); grid-template-columns: var(--grid-array01);} #wrap .bbs_write dl dt { width: clamp(120px, 17.58vw, 180px);} #wrap .bbs_write dl dd { width: calc(100% - clamp(120px, 17.58vw, 180px));} } @media (max-width:479px) { #wrap .bbs_write {gap: var(--row-gap35);} #wrap .bbs_write dl {align-items: flex-start; flex-direction: column; gap: 10px;} #wrap .bbs_write dl dt, #wrap .bbs_write dl dd {width: 100%;} } /* === complete === */ #wrap .complete_box {width:100%;box-sizing:border-box;border:1px solid var(--border-color01);text-align: center;padding:var(--row-gap60);border-radius:var(--radius-15);} #wrap .complete_box .chk_ico{width: var(--row-gap70); height: var(--row-gap70); margin: 0 auto; background-color: var(--gray-bg01);} #wrap .complete_box .chk_ico .text-green-600 {color: var(--point-color01);} #wrap .complete_box h4 {font-size:var(--text-28);color:var(--black-color03);font-weight:600;margin-top: var(--row-gap30);} #wrap .complete_box p {font-size:var(--text-20);color:var(--black-color05);margin-top: var(--row-gap20);} #wrap .complete_box .view_btn {margin-top: var(--row-gap50);} @media (max-width:1023px) { #wrap .complete_box .chk_ico {width: var(--row-gap95); height: var(--row-gap95);} }