#wrap{position: relative; overflow: clip;} .w_custom{position: relative; width: calc(100% - 60px); max-width: 1500px; margin-inline: auto;} .w_custom.main{max-width: 1680px;} #container{padding-block:var(--row-gap140);} #container:has(.visualSwiper){padding:0;background:var(--point-white);} #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;} .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;} .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); height: clamp(3px, 0.6vw, 4px);} .dragscroll::-webkit-scrollbar-track {background: #eee; border-radius: 10px;} .dragscroll::-webkit-scrollbar-thumb {background: #aaa; border-radius: 10px;} br.for_m{display: none;} @media (max-width:1600px) { br.for_pc{display: none;} } @media (max-width:1023px) { br.for_tm{display: none;} br.for_m{display:inline;} } @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-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-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-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-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-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); } /* hover */ @media (hover:hover) and (pointer:fine){ .db-qi-close:hover { opacity: 1; } .db-qi-privacy-link:hover { opacity: 1; } .db-qi-btn:hover { background: #fff; } .db-qi-bottom-tab:hover { filter: brightness(1.1); } .db-qi-right-tab:hover { filter: brightness(1.1); } } /* ── 반응형 ── */ @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;} #header .w_custom{display: flex;align-items: center;justify-content: space-between;height: 100%;gap: 15px;max-width:1680px;} #header .logo{height: 100%;max-width: clamp(120px, 12vw, 135px);position:relative;z-index:3;} #header .logo a{display: flex; align-items: center; height: 100%;} #header .logo img{height:auto;} .gnb_wrap{display:contents;} #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: var(--text-18);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(20px, 2vw, 40px);letter-spacing:0;} #header .gnb > li.active > 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;} .utility{display: flex; align-items: center; gap:var(--row-gap60);position: relative;z-index:3;} .allCate{display: flex;flex-direction: column;justify-content: space-between;width: clamp(24px, 3vw, 32px);aspect-ratio: auto 1.45;position: relative;background:none;border:none;padding:0;-webkit-tap-highlight-color:transparent;} .allCate span{display: inline-block;width:100%;height:2px;content:"";background:var(--black-color00);transition:width 0.3s;} /* 언어 선택 */ .hd_lang{display:flex;align-items:center;position:relative;} .hd_lang_toggle{display:flex;align-items:center;gap:6px;background:none;border:none;font-size:var(--text-16);color:var(--black-color00);font-weight:500;cursor:pointer;} .hd_lang_ico{width:clamp(18px, 2vw, 24px);height:clamp(18px, 2vw, 24px);flex-shrink:0;} .hd_lang_arrow{display:inline-block;flex-shrink:0;width:6px;height:6px;border:2px solid var(--black-color00);border-width:2px 2px 0 0;rotate:135deg;translate:3px -1px;} .hd_lang_toggle[aria-expanded="true"] .hd_lang_arrow{rotate:-45deg;} .hd_lang_toggle:focus-visible{outline:2px solid var(--point-color01);outline-offset:3px;} .hd_lang_list{position:absolute;top:100%;right:0;margin-top:10px;min-width:76px;background:var(--point-white);border:1px solid var(--border-color01);border-radius:var(--radius-06);box-shadow:var(--shadow-04);padding:6px;z-index:10;} .hd_lang_list a{display:block;padding:6px 10px;border-radius:var(--radius-04);font-size:var(--text-16);font-weight:500;color:var(--black-color03);text-align:center;transition:background 0.2s, color 0.2s;} .hd_lang_list a[aria-current="true"]{color:var(--point-color01);font-weight:700;background:var(--gray-bg02);} #header :where(.logo, .gnb > li > a, .hd_lang, .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;} #header.on .hd_lang_toggle{color:var(--black-color00);} #header.on .hd_lang_ico{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, .hd_lang, .allCate){filter:none;} #header .gnb > li:hover > a{color:var(--point-color01);} #header .gnb .dep02 > li:hover > a{color:var(--black-color03);text-decoration: underline;} #header .gnb > li:hover .dep02{opacity: 1; pointer-events: auto;} #header .gnb .dep02:has(> li:hover) > li:not(:hover){opacity: 0.4;} .allCate:hover span{width:100%;} .hd_lang_list a:hover{background:var(--gray-bg01);} } @media (max-width:1250px) { #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 .utility .hd_btn a{background:var(--point-white);border-color:var(--point-color04);color:var(--point-color04);} #aside .utility .hd_btn a:after{filter: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-color03);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;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-color03);line-height: 1.6;transition: all 0.4s;} #aside .gnb .dep03{display: none;} #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-color03);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;background:none;border:none;padding:0;-webkit-tap-highlight-color:transparent;} #aside .close_btn span{position: absolute;top:50%;left:50%;transform: translate(-50%, -50%) rotate(45deg);width: 100%;height: 2px;background: var(--point-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);font-weight:600;} } @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);} } /*─────────────────────────────────────────────────────────── Footer ───────────────────────────────────────────────────────────*/ #footer{background:var(--black-color00);padding-block:var(--row-gap70) clamp(30px, 5vw, 52px);} #footer .ft_top{display: flex;align-items: center;justify-content: space-between;gap:var(--row-gap30);} #footer .ft_top .logo{width:clamp(100px, 13vw, 135px);filter:var(--filter-white);opacity:0.6;} #footer .ft_top .logo img{height:auto } #footer .ft_menu{display: flex;align-items: center;} #footer .ft_menu > li{display: flex;align-items: center;font-size:var(--text-15);color:var(--point-white);font-weight:400;} #footer .ft_menu > li.policy{font-weight: 600;} #footer .ft_menu > li + li:before{display: inline-block;width:clamp(2px, 0.2vw, 4px);aspect-ratio:auto 1;content:"";border-radius:100%;background:var(--point-white);opacity:0.4;margin-inline:var(--row-gap20);} #footer .ft_body{margin-top:var(--row-gap40);padding-top:var(--row-gap30);border-top:1px solid rgba(255,255,255,0.2);display: flex;flex-direction: column;gap:var(--row-gap40);} #footer .addr-list{display: flex;flex-direction: column;gap:clamp(8px, 1.2vw, 14px);} #footer .addr-list li{display: flex;flex-wrap:wrap;gap:clamp(8px, 1.2vw, 14px) var(--row-gap30);} #footer .addr-list .desc{display: flex;gap:var(--row-gap20);font-size:var(--text-15);color:var(--point-white);font-weight:400;} #footer .addr-list .desc dt{font-weight: 500;flex-shrink:0;} #footer .addr-list .desc dd{opacity:0.8;} #footer .copy{display: flex;flex-wrap:wrap;gap:var(--row-gap20);font-size:var(--text-14);color:rgba(255,255,255,0.4);font-weight:400;} .ft_quick{position: fixed;bottom:var(--row-gap30);right:var(--row-gap30);opacity:0;pointer-events:none;transition:all 0.3s;z-index:15;} .ft_quick.on{opacity:1;pointer-events:initial;;} .ft_quick button{width:clamp(50px, 6vw, 60px);aspect-ratio:auto 1;display: flex;align-items: center;justify-content: center;background:var(--point-color01);border-radius:var(--radius-10);box-shadow: 0 0 clamp(10px, 2vw, 20px) 0 rgba(27, 33, 132, 0.15);} /*───────────────────────────────────────────────────────── Main ─────────────────────────────────────────────────────────*/ /* 비주얼 */ .visualSwiper{position: relative; background: var(--black-color01);} .visualSwiper .swiper-slide{position: relative;height: auto; min-height: clamp(400px, 92vw, 920px); overflow: hidden;display: flex;flex-direction: column;justify-content: flex-end;padding-bottom:clamp(80px, 19vw, 193px);} .visualSwiper .thumb{position: absolute;inset: 0;overflow: hidden;} .visualSwiper .thumb :where(img, video, iframe){width:100%; height:100%; object-fit:cover;} .visualSwiper .title{display: flex;flex-direction: column;gap:clamp(15px, 3vw, 34px);color: var(--point-white);} .visualSwiper .title h2{font-size: var(--text-100);font-weight: 800;line-height: 1.1;letter-spacing:0;} .visualSwiper .title p{font-size: var(--text-22);font-weight:400;line-height: 1.66;} .visualSwiper .txt-ani{opacity: 0; translate: 70px;} .visualSwiper .swiper-slide.on .txt-ani{opacity: 1; translate: 0; transition: all 1.2s 0.2s;} .visualSwiper .swiper-slide.on .txt-ani:nth-child(2){transition-delay: 0.4s;} .visualSwiper .controller{position: absolute;left:50%;bottom: clamp(3px, 6vw, 80px);display: flex;align-items: center;gap:15px clamp(10px, 2vw, 20px);z-index: 5;translate: -50%;} .visualSwiper .prog-bar{position: relative;width: min(500px, 100%);height: 1px; background:rgba(217, 217, 217, 0.4);} .visualSwiper .prog-bar em{position: absolute;top: 0;left: 0;background: var(--point-white);height: 100%;} .visualSwiper.on .prog-bar em{animation: prog-bar 8s forwards linear; } @keyframes prog-bar {0% {width:0;}100% {width:100%;}} .visualSwiper .nav-box{display: flex;align-items: center;flex-wrap: wrap;gap: 5px;flex-shrink: 0;} .visualSwiper .arw-box{display: flex;align-items: center;flex-wrap: wrap;gap: clamp(5px, 1vw, 10px);} .visualSwiper .swiper-arw{position: relative;inset: auto;margin: 0;width: clamp(20px, 2.6vw, 24px);height: auto;aspect-ratio: auto 1;} .visualSwiper .swiper-arw::before{position: absolute;content:'';width: 60%;aspect-ratio: auto 1;border: 2px solid var(--point-white);clip-path: var(--clip-poly02);rotate: 135deg;top: 50%;left: 70%;translate: -50% -50%;border-radius: 2px;} .visualSwiper .swiper-arw.next{scale: -1 -1;} .visualSwiper .swiper-pagination-num{position: relative;width: auto;inset: auto;font-size: var(--text-13);font-weight:400;color:rgba(255,255,255,0.6);} .visualSwiper .swiper-pagination-num .swiper-pagination-current{color: var(--point-white);min-width: 20px;display: inline-block;} @media (max-width:1023px){ .visualSwiper .title h2{font-size:var(--text-70);} } @media (max-width:479px){ .visualSwiper .title br{display: none;} .visualSwiper .title h2{font-size:var(--text-60);} } /*main*/ .main_flex{display: flex;align-items: flex-start;gap:var(--row-gap70);} .main_flex .flex_l{width:100%;} .main_flex .flex_r{width:clamp(900px, 76vw, 1210px);flex-shrink:0;} .en_title{display: flex;gap:var(--row-gap10);font-size:var(--text-32);color:var(--black-color00);font-weight:600;align-items: flex-start;} .en_title .dot{flex-shrink:0;width:clamp(8px, 1vw, 12px);aspect-ratio:auto 1;border-radius:100%;background:var(--point-color01);} .en_title .dot.point02{background:var(--point-color02);} .main_title{display: flex;flex-direction: column;align-items: flex-start;gap:clamp(15px, 3vw, 34px);margin-bottom:var(--row-gap60);} .main_title h2{font-size:var(--text-52);color:var(--black-color00);font-weight:600;line-height:1.2;} .main_title p{font-size:var(--text-18);color:var(--black-color06);font-weight:400;line-height:1.6;} .main_more{display: inline-flex;align-items: center;gap:var(--row-gap10);font-size:var(--text-18);color:var(--point-white);font-weight:500;} .main_more .ico{display: flex;align-items: center;justify-content: center;width:clamp(24px, 3vw, 30px);aspect-ratio:auto 1;background:var(--point-white);border-radius:3px;transition:all 0.3s;} .main_more .ico img{width:clamp(10px, 1vw, 13px);transition:all 0.3s;} .main_more.dark .ico{background:var(--point-color01);border:1px solid var(--point-color01);} .main_more.dark .ico img{filter:var(--filter-white);} @media (hover:hover) and (pointer:fine){ .main_more:hover .ico{background:var(--point-color01);} .main_more:hover .ico img{filter:var(--filter-white);} .main_more.dark:hover .ico{background:var(--point-white);} .main_more.dark:hover .ico img{filter:none;} } @media (max-width:1200px){ .main_flex{flex-direction: column;gap:var(--row-gap60);} .main_flex .flex_r{width:100%;} } /* Philosophy */ .philosophy{padding-block:var(--row-gap140) var(--row-gap180);} .philosophy-head{display:flex;align-items:center;flex-wrap:wrap;gap:var(--row-gap30);font-size:clamp(54px, 4.86vw, 72px);font-weight:700;color:var(--black-color00);} .philosophy-thumb{display:inline-block;width:0;height:clamp(60px, 10vw, 100px);flex-shrink:0;border-radius:100px;transition:width 0.5s;} .philosophy-head.aos-animate .philosophy-thumb {width:clamp(100px, 20vw, 254px);} .philosophy-quote{margin-top:var(--row-gap40);font-size:var(--text-34);font-weight:500;color:var(--black-color00);} .philosophy-list{margin-top:var(--row-gap50);counter-reset:phNum;} .philosophy-list li{display:flex;align-items:center;gap:var(--col-gap40);padding:var(--row-gap50) var(--col-gap30);border-bottom:1px solid var(--border-color01);transition:all 0.3s;padding-left:var(--row-gap20);position: relative;counter-increment:phNum;} .philosophy-list li:nth-child(1){border-top:1px solid var(--border-color01);} .philosophy-title{flex:0 0 auto;font-size:var(--text-36);font-weight:800;color:var(--black-color00);letter-spacing:0;display: flex;align-items: center;} .philosophy-title span{display: inline-block;width:clamp(140px, 16vw, 260px);} .philosophy-title:before{content:counter(phNum, decimal-leading-zero);width:clamp(30px, 6vw, 80px);font-size:var(--text-20);font-weight:700;color:var(--point-color02);display: inline-block;} .philosophy-desc{display:flex;flex-direction:column;gap:6px;} .philosophy-desc-tit{font-size:var(--text-20);font-weight:600;color:var(--black-color03);line-height:1.2;} .philosophy-desc-txt{font-size:var(--text-18);font-weight:400;line-height:1.6;color:var(--black-color06);} /* 강조(on)가 3초마다 바뀔 때 목록 높이가 변해 아래 영역(지도 등)이 덜컹거리던 것 보정: 테두리 두께는 그대로 두고 강조선은 안쪽 그림자로, 왼쪽 여백이 늘어난 만큼 오른쪽 여백을 줄여 글 폭(줄바꿈) 고정 */ .philosophy-list li{padding-right:calc(var(--col-gap30) + var(--row-gap50) - var(--row-gap20));} .philosophy-list li.on, .philosophy-list li:focus-within{padding-left:var(--row-gap50);padding-right:var(--col-gap30);border-radius:var(--radius-20);border-color:transparent;box-shadow:inset 0 0 0 2px var(--point-color02), 0 0 50px 0 rgba(178, 210, 54, 0.15);} .philosophy-list li:has(+ li.on){border-bottom-color:transparent;transition:none;} @media (max-width:767px){ .philosophy-head{font-size:40px;} } @media (max-width:640px){ .philosophy-list li{flex-direction: column;align-items: flex-start;} .philosophy-title span{width:auto;} } @media (max-width:479px){ .philosophy-head{flex-direction: column;align-items: flex-start;gap:var(--row-gap20);} } /* Products */ .main_products{padding-bottom:var(--row-gap180);} .main_products .main_title{position:sticky;top:120px;} .main_products .main_more .ico{width:clamp(50px, 6vw, 60px);border-radius:5px;} .main_products .main_more img{width:clamp(14px, 2vw, 20px);} .main_products .db-expose-grid{display: grid;grid-template-columns: repeat(2, 1fr);gap:clamp(60px, 13vw, 153px) var(--row-gap50);padding-bottom:clamp(100px, 20vw, 220px);} .main_products .db-expose-grid .item:nth-child(even){translate:0 clamp(100px, 20vw, 220px);} .main_products .thumb{border-radius:var(--radius-30);width:100%;aspect-ratio:auto 1.28;} .main_products .info{margin-top:var(--row-gap50);display: flex;flex-direction: column;align-items: flex-start;gap:6px;} .main_products .info .title{font-size:var(--text-32);color:var(--black-color00);font-weight:600;line-height:1.6;} .main_products .info .desc{font-size:var(--text-16);color:var(--black-color06);font-weight:600;line-height:1.6;} /* 배너 방식 썸네일: {{BANNER}} 는 로 출력되므로 카드 크기에 맞춤. 이미지 없을 땐 회색 카드로 자리 유지 */ .main_products .thumb{background:#f5f5f5;} .main_products .thumb > a{display:block !important;width:100%;height:100%;} .main_products .thumb img{width:100% !important;height:100% !important;max-width:none !important;object-fit:cover;display:block;transition:scale 0.4s;} @media (hover:hover) and (pointer:fine){ .main_products .thumb > a:hover img{scale:1.03;} } @media (max-width:1700px){ .main_products.main_flex .flex_r{width:60vw;} } @media (max-width:1200px){ .main_products .main_title{position: static;} .main_products.main_flex .flex_r{width:100%;} } @media (max-width:479px){ .main_products .db-expose-grid{grid:auto / repeat(1, 1fr);padding-bottom:0;gap:var(--row-gap80);} .main_products .db-expose-grid .item:nth-child(even){translate:0;} } /* Manufacturing */ .main_mfg{padding-bottom:var(--row-gap180);} .main_mfg .en_title{margin-bottom: var(--row-gap50);} .main_mfg .list{display:flex;gap:var(--row-gap15);height:clamp(360px, 40vw, 640px);} .main_mfg .item{position:relative;flex:0.68;overflow:hidden;border-radius:var(--radius-15);transition:flex 0.6s cubic-bezier(.4,0,.2,1);} .main_mfg .item:before{width:100%;height:100%;content:"";background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 50%, #000 100%);position: absolute;top:0;left:0;pointer-events:none;z-index:2;} .main_mfg .toggle{position:absolute;inset:0;width:100%;height:100%;background:none;border:none;padding:0;margin:0;cursor:pointer;z-index:1;-webkit-tap-highlight-color:transparent;} .main_mfg .thumb{position:absolute;inset:0;transition: all 0.3s;} .main_mfg .info{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:var(--row-gap60) var(--row-gap50);color:var(--point-white);pointer-events:none;z-index:3;display: flex;flex-direction: column;align-items: flex-start;gap:clamp(10px, 1.3vw, 16px);} .main_mfg .info > *{pointer-events:auto;} .main_mfg .info .title{font-size:var(--text-34);font-weight:700;line-height:1.2;} .main_mfg .info .desc{font-size:var(--text-20);font-weight:300;line-height:1.6;color:rgba(255,255,255,0.8);} .main_mfg .info .main_more{margin-top:clamp(10px, 1.5vw, 18px);} @media (hover:hover) and (pointer:fine){ .main_mfg .item:hover .thumb{scale:1.05;} } @media (min-width:1024px){ .main_mfg .info{display: none;} .main_mfg .item.is-active{flex:4;} .main_mfg .item.is-active .info{display:flex;animation:mfgInfoIn 0.5s 0.3s cubic-bezier(.4,0,.2,1) both;} /* 펼쳐지는 동안 텍스트 줄바꿈이 바뀌지 않도록 .info 폭을 펼쳐진 카드의 최종 폭으로 고정 (4 / (4 + 0.68*3)) */ .main_mfg .list{container-type:inline-size;} @supports (width:1cqw){ .main_mfg .info{right:auto;width:calc((100cqw - var(--row-gap15) * 3) * 0.6623);} } } @keyframes mfgInfoIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}} @media (prefers-reduced-motion:reduce){ .main_mfg .item.is-active .info{animation:none;} } @media (max-width:1023px){ .main_mfg .list{flex-direction:column;height:auto;} .main_mfg .list .item{min-height:clamp(300px, 50vw, 500px);display: flex;flex-direction: column;justify-content: flex-end;} .main_mfg .item:before{background:linear-gradient(180deg, rgba(0, 0, 0, 0.00) 5%, #000 100%);} .main_mfg .info{position: relative;padding:var(--row-gap100) var(--row-gap30);} } /* Global DongSung */ .main_global{padding-bottom:var(--row-gap180);} .main_global .global-map{position:relative;width:100%;} /* 지도 대비 보정: 원본 대륙색 #f1f1f1 이 일부 모니터에서 흰색과 구분되지 않음 → 바탕 흰색 유지, 대륙만 약 #dadada (밝기→대비 순서 중요) */ .main_global .global-map .map img{filter:brightness(0.612) contrast(4.546);transform:translateZ(0);backface-visibility:hidden;} .main_global .anchor-list li{position: absolute;} .main_global .anchor-list li:nth-child(1){top:27.5%;left:13.5%;} .main_global .anchor-list li:nth-child(2){bottom:50%;left:19%;} .main_global .anchor-list li:nth-child(3){bottom:25%;left:41%;} .main_global .anchor-list li:nth-child(4){top:31%;right:27%;} .main_global .anchor-list li span{position: absolute;font-size:clamp(10px, 1.2vw, 18px);color:var(--black-color03);font-weight:800;display: inline-block;box-shadow: 0 0 clamp(15px, 3vw, 30px) 0 rgba(0, 0, 0, 0.10);background:var(--point-white);border-radius:100px;padding:clamp(2px, 1vw, 14px) clamp(6px, 2vw, 24px);width:max-content;left:50%;translate:-50%;} .main_global .anchor-list li:nth-child(1) span, .main_global .anchor-list li:nth-child(3) span{bottom:calc(100% + clamp(3px, 1vw, 12px));} .main_global .anchor-list li:nth-child(2) span, .main_global .anchor-list li:nth-child(4) span{top:calc(100% + clamp(3px, 1vw, 12px));} .main_global .anchor-list li img{width:clamp(10px, 2vw, 22px);} /* 휴대폰 폭: UAE 이름표와 Australia 이름표가 겹쳐 Australia 이름표를 핀 아래로, UAE 이름표는 조금 왼쪽으로 */ @media (max-width:539px){ .main_global .anchor-list li:nth-child(3) span{bottom:auto;top:calc(100% + clamp(3px, 1vw, 12px));} .main_global .anchor-list li:nth-child(2) span{translate:-55%;} } .main_global .logo{width:clamp(8px, 1vw, 12px);aspect-ratio:auto 1;border-radius:100%;background:var(--point-color02);position: absolute;left:39.5%;top:41%;} .main_global .logo:before{--ring-w:clamp(32px, 4vw, 48px);width:var(--ring-w);scale:0;will-change:scale;aspect-ratio:auto 1;border-radius:100%;content:"";background:rgba(255, 201, 25, 0.4);position: absolute;top:50%;left:50%;translate:-50% -50%;animation:global-logo-ring-before 3s linear infinite;} .main_global .logo:after{--ring-w:clamp(50px, 10vw, 100px);width:var(--ring-w);scale:0;will-change:scale;aspect-ratio:auto 1;border-radius:100%;content:"";background:rgba(255, 201, 25, 0.2);position: absolute;top:50%;left:50%;translate:-50% -50%;animation:global-logo-ring-after 3s linear infinite;} .main_global .logo img{width:clamp(50px, 12vw, 150px);position: absolute;max-width:initial;height:auto;max-height:initial;left:50%;translate:-50%;bottom:calc(100% + clamp(50px, 10vw, 100px) / 2);} /* 링: width 대신 scale 로 (매 프레임 레이아웃·지도 다시 그리기 → 지도 떨림 방지) */ @keyframes global-logo-ring-before{ 0%{scale:0;} 50%{scale:1;} 100%{scale:1;} } @keyframes global-logo-ring-after{ 0%{scale:0;} 20%{scale:0;} 100%{scale:1;} } @media (prefers-reduced-motion: reduce){ .main_global .logo:before, .main_global .logo:after{animation:none;scale:1;} } /* Contact Us */ .main_contact{position:relative;overflow:hidden;padding-block:var(--row-gap160);} .main_contact .contact-bg{position:absolute;inset:0;z-index:0;} .main_contact .contact-bg:before{content:"";position:absolute;inset:0;background:rgba(0,0,0,0.5);z-index:1;} .main_contact .w_custom{position:relative;z-index:2;} .main_contact .en_title{color:var(--point-white);} .main_contact .main_title h2{color:var(--point-white);} .main_contact .contact-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2, 1fr);gap:var(--row-gap40);margin-top:var(--row-gap60);} .main_contact .card a{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:var(--col-gap20);padding:var(--row-gap50);border-radius:var(--radius-20);background:rgba(255, 255, 255, 0.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background 0.3s;} .main_contact .card-info{display:flex;flex-direction:column;align-items:flex-start;justify-content: space-between;gap:var(--row-gap70);height:100%;} .main_contact .card .desc{display: flex;flex-direction: column;align-items: flex-start;gap:clamp(10px, 1.2vw, 16px);} .main_contact .card .title{font-size:var(--text-28);font-weight:700;color:var(--black-color00);filter:var(--filter-white)} .main_contact .card .desc span{font-size:var(--text-18);font-weight:300;color:var(--black-color06);line-height:1.6;filter:var(--filter-white)} .main_contact .card .main_more{margin-top:clamp(10px, 1.5vw, 20px);} .main_contact .card-ico{flex-shrink:0;width:clamp(60px, 10vw, 100px);} .main_contact .card-ico img{width:100%;filter:var(--filter-white);} /* 두 카드 높이 통일 (설명 줄 수가 달라도 박스·버튼 위치 맞춤) */ .main_contact .card{display:flex;} .main_contact .card > a{flex:1 1 auto;width:100%;} @media (hover:hover) and (pointer:fine){ .main_contact .card:hover a{background:var(--point-white);} .main_contact .card:hover :is(.title, .desc span, .card-ico img){filter:none;} .main_contact .card:hover .main_more{color:var(--black-color00);} .main_contact .card:hover .main_more .ico{background:var(--point-color01);} .main_contact .card:hover .main_more .ico img{filter:var(--filter-white);} } @media (max-width:767px){ .main_contact .contact-cards{grid-template-columns:1fr;} } /*───────────────────────────────────────────────────────── 서브 공통 ─────────────────────────────────────────────────────────*/ /* 서브 비주얼 (layout/main.php 공통) */ .sub_visual{position:relative;display:flex;align-items:center;justify-content:center;height:clamp(220px, 40vw, 540px);} .sub_visual .thumb{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--black-color02);} .sub_visual .sv_title{position: relative;z-index: 3;} .sub_visual .sv_title h2{font-size:var(--text-70);font-weight:700;line-height:1;color:var(--point-white);text-align:center;letter-spacing:0;} /* 서브 2차 메뉴 (layout/main.php 공통) */ .sub_nav{position:relative;z-index:1;background:var(--point-white);border-bottom:1px solid var(--border-color01);} .sub_nav ul{display:flex;align-items:stretch;width:calc(100% - 60px);max-width:1500px;margin-inline:auto;padding:0;list-style:none;} .sub_nav li{flex:1 1 0;min-width:0;} .sub_nav li a{display:block;height:70px;padding-top:22px;box-sizing:border-box;font-size:var(--text-22);font-weight:500;line-height:normal;letter-spacing:-0.03em;color:var(--black-color08);text-align:center;border-bottom:2px solid transparent;} .sub_nav li.on a{font-weight:600;color:var(--black-color00);border-bottom-color:var(--black-color00);} .sub_nav li a:focus-visible{outline:2px solid var(--point-color01);outline-offset:-2px;} @media (hover:hover) and (pointer:fine){ .sub_nav li:not(.on) a:hover{color:var(--black-color00);} } /* 서브 타이틀 */ .sub_tit{display:flex;flex-direction:column;gap:34px;} .sub_tit .eng{display:flex;gap:10px;align-items:flex-start;font-size:var(--text-32);font-weight:600;line-height:1.4;color:var(--black-color00);} .sub_tit .dot{display:block;width:12px;height:12px;margin-top:15px;border-radius:50%;background:var(--point-color02);} .sub_tit h3{font-size:var(--text-52);font-weight:600;line-height:1.2;color:var(--black-color00);} @media (max-width:860px){ .sub_nav ul{width:calc(100% - 30px);} .sub_nav li a{height:56px;padding-top:16px;} .sub_tit{gap:20px;} .sub_tit .dot{margin-top:0.5em;} } /*───────────────────────────────────────────────────────── ceo ─────────────────────────────────────────────────────────*/ .ceo_msg{position:relative;display:flex;flex-direction:column;gap:var(--row-gap60);} .ceo_msg .ceo_cont{position:relative;z-index:1;display:flex;align-items:flex-start;gap:var(--row-gap80);} .ceo_msg .ceo_photo{flex-shrink:0;width:400px;height:560px;margin:0;border-radius:var(--radius-30);} .ceo_msg .ceo_txt{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--row-gap60);} .ceo_msg .ceo_quote{margin:0;font-size:var(--text-40);font-weight:400;line-height:1.4;letter-spacing:-0.04em;color:var(--black-color01);} .ceo_msg .ceo_body{display:flex;flex-direction:column;gap:1.6em;font-size:var(--text-18);font-weight:400;line-height:1.6;color:var(--black-color06);} .ceo_msg .ceo_body p{margin:0;} .ceo_msg .ceo_sign{display:flex;align-items:flex-end;gap:14px;margin:0;font-family:'Pretendard', var(--font-type01);font-size:var(--text-24);font-weight:500;line-height:1.4;letter-spacing:-0.04em;color:var(--black-color03);} .ceo_msg .ceo_sign img{width:clamp(120px, 15vw, 160px);object-fit:cover;} .ceo_msg .ceo_wm{position:absolute;right:calc(-1 * (100vw - 100%) / 2);bottom:0;z-index:0;width:536px;max-width:40vw;height:auto;pointer-events:none;} @media (max-width:1023px){ .ceo_msg .ceo_cont{flex-direction:column;gap:40px;} .ceo_msg .ceo_photo{width:100%;max-width:400px;height:auto;aspect-ratio:5 / 7;} } /*───────────────────────────────────────────────────────── about ─────────────────────────────────────────────────────────*/ #container:has(.about_greet){display:flex;flex-direction:column;gap:var(--row-gap120);} .about_greet,.about_loc{display:flex;flex-direction:column;gap:var(--row-gap60);} .about_cont{display:flex;align-items:center;gap:var(--col-gap60);} .about_img,.about_map{flex-shrink:0;margin:0;} .about_map iframe{display:block;width:100%;height:100%;border:0;} .about_img{width:min(700px, 50%);aspect-ratio:700 / 640;border-radius:var(--radius-30);} .about_map{width:min(800px, 54%);aspect-ratio:800 / 520;border-radius:var(--radius-20);} .about_txt,.about_info{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--row-gap40);} .about_lead{display:flex;flex-direction:column;font-size:var(--text-44);line-height:1.4;letter-spacing:-0.04em;color:var(--black-color01);} .about_lead span{font-weight:400;} .about_lead strong{font-weight:600;color:var(--point-color01);} .about_desc{display:flex;flex-direction:column;gap:var(--row-gap20);font-size:var(--text-18);line-height:1.6;color:var(--black-color06);} .about_desc p{margin:0;} .about_addr{display:flex;flex-direction:column;gap:var(--row-gap20);padding-bottom:var(--row-gap40);border-bottom:1px solid var(--border-color01);} .about_addr .name{margin:0;font-size:var(--text-34);font-weight:600;line-height:1.2;letter-spacing:-0.02em;color:var(--black-color00);} .about_addr address{font-style:normal;font-size:var(--text-20);line-height:1.6;letter-spacing:-0.02em;color:var(--black-color06);} .about_contact{display:flex;flex-direction:column;gap:var(--row-gap20);margin:0;font-size:var(--text-20);line-height:1.6;letter-spacing:-0.03em;} .about_contact > div{display:flex;align-items:flex-start;} .about_contact dt{position:relative;flex-shrink:0;width:136px;padding-left:13px;font-weight:700;line-height:1.4;padding-top:2px;color:var(--black-color03);} .about_contact dt:before{content:"";position:absolute;left:0;top:13px;width:3px;height:3px;border-radius:100px;background:var(--black-color05);} .about_contact dd{margin:0;color:var(--black-color06);} @media (max-width:1023px){ .about_cont{flex-direction:column;align-items:stretch;gap:var(--row-gap40);} .about_img,.about_map{width:100%;} } @media (max-width:479px){ .about_contact dt{width:90px;} } /*───────────────────────────────────────────────────────── process ─────────────────────────────────────────────────────────*/ .process{display:flex;flex-direction:column;gap:var(--row-gap60);} .process_list{display:flex;flex-direction:column;gap:var(--row-gap120);} .process_team{display:flex;flex-direction:column;gap:var(--row-gap60);} .process_team.team01 .team_photo{margin-top:calc(var(--row-gap20) * -1);} .process .team_head{display:flex;flex-direction:column;align-items:center;gap:var(--row-gap30, 30px);padding:var(--row-gap40) var(--col-gap60);border-radius:var(--radius-20);background:var(--gray-bg01);text-align:center;} .process .team_head .badge{margin:0;padding:10px 20px;border-radius:50px;background:var(--point-color01);font-size:var(--text-20);font-weight:600;line-height:1.4;color:var(--point-white);} .process .team_head h4{margin-top:-10px;font-size:var(--text-40);font-weight:700;line-height:1.2;color:var(--black-color00);} .process .team_head .desc{margin:0;font-size:var(--text-18);line-height:1.6;color:var(--black-color03);} .process .team_photo{display:grid;grid-template-columns:repeat(3, 1fr);gap:var(--col-gap30, 30px);margin:0;padding:0;list-style:none;} .process .team_photo figure{display:flex;flex-direction:column;align-items:center;gap:var(--row-gap20);margin:0;} .process .team_photo .img{width:100%;aspect-ratio:480 / 243;border-radius:var(--radius-15);} .process .team_photo figcaption{font-size:var(--text-22);font-weight:600;line-height:1.2;color:var(--black-color00);text-align:center;} .process .team_feature{display:flex;gap:var(--col-gap20, 20px);margin:0;padding:0;list-style:none;} .process .team_feature li{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:30px;padding:var(--row-gap40) 20px;border:1px solid var(--border-color01);border-radius:var(--radius-20);text-align:center;} .process .team_feature .circle{display:flex;align-items:center;justify-content:center;width:80px;height:80px;border-radius:50%;background:var(--gray-bg01);} .process .team_feature .circle img{width:35.2px;height:35.2px;} .process .team_feature strong{display:block;font-size:var(--text-24);font-weight:600;line-height:1.2;color:var(--black-color00);} .process .team_feature p{margin:0;font-size:var(--text-18);line-height:1.6;color:var(--black-color06);} .process .team_feature strong + p{margin-top:-18px;} @media (max-width:1023px){ .process .team_feature{flex-wrap:wrap;} .process .team_feature li{flex:1 1 calc(33.333% - 20px);} } @media (max-width:767px){ .process .team_photo{grid-template-columns:1fr;} .process .team_feature li{flex-basis:calc(50% - 10px);} } @media (max-width:479px){ .process .team_feature li{flex-basis:100%;} } /*───────────────────────────────────────────────────────── quality (process 구조 재사용) ─────────────────────────────────────────────────────────*/ .process .team_head .body{display:flex;flex-direction:column;align-items:center;gap:10px;} .process .team_head .body .lead{margin:0;font-size:var(--text-28);font-weight:500;line-height:1.6;color:var(--black-color03);} .process .team_head .body .desc{color:var(--black-color06);} .process .team_photo.col4{grid-template-columns:repeat(4, 1fr);} .process .team_photo.col4 .img{aspect-ratio:352 / 230;} .process .team_feature.col3{flex-wrap:wrap;} .process .team_feature.col3 li{flex:0 0 calc((100% - 40px) / 3);} .process .team_notice{display:flex;align-items:center;gap:var(--col-gap30);padding:var(--row-gap40);border-radius:var(--radius-20);background:var(--point-color01);} .process .team_notice .ico{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:80px;height:80px;border-radius:50%;background:var(--point-white);} .process .team_notice .ico img{width:44px;height:44px;} .process .team_notice .body{display:flex;flex-direction:column;gap:10px;color:var(--point-white);} .process .team_notice .lead{margin:0;font-size:var(--text-28);font-weight:500;line-height:1.6;} .process .team_notice .desc{margin:0;font-size:var(--text-18);line-height:1.6;} @media (max-width:1023px){ .process .team_photo.col4{grid-template-columns:repeat(2, 1fr);} .process .team_feature.col4 li,.process .team_feature.col3 li{flex:1 1 calc(50% - 10px);} } @media (max-width:767px){ .process .team_notice{flex-direction:column;align-items:flex-start;} } @media (max-width:479px){ .process .team_photo.col4{grid-template-columns:1fr;} .process .team_feature.col4 li,.process .team_feature.col3 li{flex-basis:100%;} } /*───────────────────────────────────────────────────────── equip (process 구조 재사용) ─────────────────────────────────────────────────────────*/ .process .team_photo figcaption:has(strong){display:flex;flex-direction:column;align-items:center;gap:12px;} .process .team_photo figcaption strong{display:block;font-size:var(--text-22);font-weight:600;line-height:1.2;color:var(--black-color00);} .process .team_photo figcaption p{margin:0;font-size:var(--text-18);font-weight:400;line-height:1.6;color:var(--black-color06);} /*───────────────────────────────────────────────────────── product list (제품 분류 페이지) ─────────────────────────────────────────────────────────*/ #container:has(.prd_list){padding-top:var(--row-gap140);} .prd_list{display:flex;flex-direction:column;align-items:center;gap:var(--row-gap40);} .prd_head{display:flex;flex-direction:column;align-items:center;gap:var(--row-gap20);margin-bottom:var(--row-gap10, 10px);text-align:center;} .prd_head .eng{font-size:var(--text-20);font-weight:600;line-height:normal;letter-spacing:-0.03em;color:var(--point-color01);} .prd_head h2{font-size:var(--text-60);font-weight:700;line-height:1.2;color:var(--black-color00);} .prd_tab ul{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin:0;padding:0;list-style:none;} .prd_tab a{display:flex;align-items:center;justify-content:center;height:54px;padding:0 30px;border-radius:800px;background:var(--gray-bg01);font-size:var(--text-20);font-weight:600;line-height:normal;color:var(--black-color07);} .prd_tab li.on a{background:var(--point-color02);color:var(--black-color00);} .prd_tab a:focus-visible{outline:2px solid var(--point-color01);outline-offset:2px;} .prd_desc{max-width:100%;margin:0;font-size:var(--text-20);line-height:1.6;color:var(--black-color03);text-align:center;} .prd_body{display:flex;flex-direction:column;gap:var(--row-gap60);width:100%;margin-top:var(--row-gap20);} .prd_bar{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;} .prd_total{margin:0;font-size:var(--text-18);line-height:1.6;color:var(--black-color06);} .prd_total strong{font-weight:600;color:var(--black-color03);} .prd_search{position:relative;width:min(440px, 100%);height:60px;} .prd_search input{width:100%;height:100%;padding:0 64px 0 24px;border:1px solid var(--border-color01);border-radius:var(--radius-10);background:var(--point-white);font-size:var(--text-18);letter-spacing:-0.03em;color:var(--black-color03);} .prd_search input::placeholder{color:var(--black-color06);} .prd_search input:focus-visible{outline:2px solid var(--point-color01);outline-offset:-1px;} .prd_search button{position:absolute;top:50%;right:24px;display:flex;width:24px;height:24px;padding:0;border:0;background:none;transform:translateY(-50%);cursor:pointer;} .prd_search button img{width:100%;height:100%;} .prd_grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:var(--col-gap20);margin:0;padding:0;list-style:none;} .prd_item{display:flex;flex-direction:column;align-items:center;gap:var(--row-gap20);height:100%;padding:var(--row-gap40);border-radius:var(--radius-20);background:var(--gray-bg01);} .prd_item .img{display:block;width:100%;height:clamp(200px, 20.8vw, 300px);border-radius:var(--radius-20);background:var(--point-white);overflow:hidden;} .prd_item .img img{width:100%;height:100%;object-fit:contain;object-position:center;transition:transform 0.4s;} .prd_item .name{font-size:var(--text-20);font-weight:600;line-height:1.2;color:var(--black-color00);text-align:center;} .prd_item:focus-visible{outline:2px solid var(--point-color01);outline-offset:2px;} @media (hover:hover) and (pointer:fine){ .prd_item:hover .img img{transform:scale(1.05);} } .prd_empty{padding:var(--row-gap80) 0;margin:0;font-size:var(--text-18);color:var(--black-color09);text-align:center;} .pager{margin-top:var(--row-gap60);} :is(.prd_pager, .pager) ul{display:flex;align-items:center;justify-content:center;gap:10px;margin:0;padding:0;list-style:none;} :is(.prd_pager, .pager) li > a,:is(.prd_pager, .pager) li > span{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;font-size:var(--text-18);font-weight:600;line-height:normal;color:var(--black-color08);} :is(.prd_pager, .pager) li.on > a{background:var(--black-color02);font-weight:700;color:var(--point-white);} :is(.prd_pager, .pager) li.next img,:is(.prd_pager, .pager) li.last img{transform:rotate(180deg);} :is(.prd_pager, .pager) li.disabled{opacity:0.3;} :is(.prd_pager, .pager) a:focus-visible{outline:2px solid var(--point-color01);outline-offset:2px;} @media (hover:hover) and (pointer:fine){ :is(.prd_pager, .pager) li:not(.on):not(.disabled) > a:hover{background:var(--gray-bg01);} } @media (max-width:1023px){ .prd_grid{grid-template-columns:repeat(2, 1fr);} } @media (max-width:767px){ .prd_tab a{height:46px;padding:0 20px;} .prd_bar{flex-direction:column;align-items:stretch;} .prd_search{width:100%;height:52px;} } @media (max-width:560px){ .prd_grid{grid-template-columns:1fr;} :is(.prd_pager, .pager) ul{gap:4px;} } /*───────────────────────────────────────────────────────── product view (제품 상세 페이지) ─────────────────────────────────────────────────────────*/ #container:has(.pv){padding-top:var(--row-gap140);} .pv{display:flex;flex-direction:column;gap:var(--row-gap160);} .pv_top{display:flex;align-items:center;gap:var(--col-gap100, 100px);} .pv_gallery{flex-shrink:0;width:min(642px, 45%);} .pv_main{width:100%;aspect-ratio:1 / 1;border:1px solid var(--border-color01);border-radius:var(--radius-20);background:var(--point-white);} .pv_main img, .pv_main.ofc > img{width:100% !important;height:100% !important;object-fit:contain !important;} .pv_thumbs{margin:var(--row-gap30) 0 0;} .pv_thumbs .swiper-slide{height:auto;} .pv_thumbs.swiper-horizontal > .swiper-scrollbar{position:relative;inset:auto;width:100%;height:4px;margin-top:var(--row-gap20);border-radius:4px;background:var(--border-color01);} .pv_thumbs .swiper-scrollbar-drag{border-radius:4px;background:var(--black-color00);} .pv_thumbs button{display:block;width:100%;aspect-ratio:150 / 140;padding:0;border:1px solid var(--border-color01);border-radius:19px;background:var(--point-white);overflow:hidden;cursor:pointer;} .pv_thumbs button.on{border-color:var(--black-color00);} .pv_thumbs button img{width:100%;height:100%;object-fit:contain;} .pv_thumbs button:focus-visible{outline:2px solid var(--point-color01);outline-offset:2px;} .pv_info{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--row-gap60);} .pv_title{font-size:var(--text-64);font-weight:700;line-height:1.03;letter-spacing:-0.03em;color:var(--black-color01);} .pv_fields{display:flex;flex-direction:column;gap:var(--row-gap60);} .pv_desc,.pv_fields .cf-content-1,.pv_fields .pf-text{margin:0;font-size:var(--text-24);font-weight:500;line-height:1.7;letter-spacing:-0.03em;color:var(--black-color05);} .pv_fields .cf-content-1 p{margin:0;} /* 특성 (추가필드 #2) —