#wrap {overflow: clip;} .w_custom{position: relative; width: calc(100% - 60px); max-width: 1400px; margin-inline: auto;} #container{padding-block:var(--row-gap80) var(--row-gap160)} #container:has(.pbDn){padding-bottom: 0;} #container:has(.ptDn){padding-top: 0;} #container:has(.fullSec){width: 100%; max-width: 100%;} #container:has(.main_content){padding:0;} .bullet-list{display: flex;flex-direction: column;gap: clamp(7px, 1vw, 10px);} .bullet-list > li{position: relative;display: flex;align-items: baseline;gap: var(--row-gap10);font-size: var(--text-16);font-weight:300;} .bullet-list > li::before{display: inline-flex;content:'';width: clamp(3px, 0.5vw, 4px);aspect-ratio: auto 1;flex-shrink: 0;background: var(--black-color03);translate: 0 -3px;border-radius:100%;} .bullet-list .desc{display: flex;align-items: baseline;gap: 10px;} .bullet-list .desc dt{font-weight: 500;flex-shrink: 0;} .bullet-list.type02 > li{font-size: var(--text-18);line-height: 1.4;color: var(--black-color05);gap: clamp(8px, 1.4vw, 14px);} .bullet-list.type02 > li::before{background: var(--black-color05);border-radius: 100%;translate: 0 clamp(-5px, -0.7vw, -4px);} .bullet-list.type03 > li{font-size: var(--text-20);line-height: 1.4;color: var(--black-color05);gap: clamp(8px, 1.4vw, 14px);} .bullet-list.type03 > li::before{background: var(--black-color05);border-radius: 100%;translate: 0 clamp(-5px, -0.7vw, -4px);} .link{position: absolute; inset: 0; z-index: 3;} #wrap [class*="swiper-butto"]::after{display: none;} .ft_en{font-family: var(--font-type02);} /* main{padding-block:var(--row-gap100) var(--row-gap140);} */ .blind{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;} #wrap .dn{display: none;} .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;} @media (max-width:1500px) { br.for_pc{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; } } /* body::-webkit-scrollbar{display: none;} */ /*──────────────────────────────────────────────────────────── header ────────────────────────────────────────────────────────────*/ #header{position:fixed;top:0;width: 100%;height: clamp(65px, 11vw, 112px);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:1800px;} #header .logo{height: 100%;max-width: clamp(150px, 17vw, 233px);position:relative;z-index:3;} #header .logo a{display: flex; align-items: center; height: 100%;} #header .logo .ov{display: none;} #header .logo img{height: auto;} #header .gnb{position: absolute; top:0; left:50%; translate: -50%; width: calc(100% - 300px); height: 100%; display: flex; justify-content: center; text-align: center;} #header .gnb > li{position: relative;height: 100%;font-size: var(--text-19);font-weight: 600;color: var(--black-color00); transition: all 0.4s;} #header .gnb > li > a{display: flex;align-items: center;justify-content: center;height: 100%;padding-inline: clamp(10px, 2vw, 40px);letter-spacing:0;} #header .gnb > li > a span{display: inline-block;width:96px;} #header .gnb > li.active > a{color:var(--point-color01);} #header .gnb .dep02{display: none;position: absolute;top: 80%;left: 50%;width: max-content;translate: -50%;opacity: 0;transition: inherit;display: flex;flex-direction: column;gap:clamp(10px, 2vw, 24px);} #header .w_custom > .gnb .dep02{display: none;} #header .gnb .dep02 > li{font-size: 90%;color:var(--black-color05);font-weight:400;transition: inherit;} #header .gnb .dep02 > li > a{display: block;} #header .utility{display: flex; align-items: center; gap: clamp(15px, 3vw, 30px);position: relative;z-index:3;} .utility{display: flex;align-items: center;gap:var(--row-gap20);} .utility .hd_btn{display: flex;align-items: center;gap:var(--row-gap10);} .utility .hd_btn a{display: inline-flex;align-items: center;justify-content: center;min-width:120px;height:clamp(36px, 4vw, 42px);border:1px solid var(--point-color01);gap:clamp(8px, 1vw, 14px);font-size:var(--text-18);color:var(--point-color01);font-weight:600;padding-inline:clamp(10px, 1.6vw, 16px);} .utility .hd_btn .down_pdf{background:var(--point-white);} .utility .hd_btn .btn_shop{background:var(--point-color01);} .utility .hd_btn .btn_shop img{height:clamp(14px, 1.5vw, 20px);} #header .allCate{flex-direction: column;justify-content: space-between;width: clamp(24px, 3.5vw, 30px);aspect-ratio: auto 1.25;display:none;} #header .allCate span{width: 100%;height: 2px;background: var(--black-color02);} #header .all_menu{background:var(--point-white);padding-block:0 clamp(20px, 3vw, 50px);position: absolute;top:calc(100% - 1px);left:0;width:100%;opacity:0;pointer-events:none;transition:all 0.3s;} #header .all_menu.on{opacity:1;pointer-events:initial;} #header .all_menu .gnb{width:100%;position:static;translate:none;height:auto;} #header .all_menu .gnb > li{padding-inline: clamp(10px, 2vw, 40px);} #header .all_menu .gnb > li > a{display: none;} #header .all_menu .gnb .dep02{position: relative;opacity:1;width:96px;} #header :where(.gnb > li > a, .hd_lang, .allCate){filter:var(--filter-white);} #wrap #header .all_menu .gnb > li > a{filter:none;} /*on*/ #header.on{box-shadow: inset 0 -1px 0 var(--border-color01);background: var(--point-white);} #header.on :where(.gnb > li > a, .hd_lang, .allCate){filter:none;} #header.on .logo .img{display: none;} #header.on .logo .ov{display: block;} /* 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(.gnb > li > a, .hd_lang, .allCate){filter:none;} #header:hover .logo .img{display: none;} #header:hover .logo .ov{display: block;} #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;} */ } @media (max-width:1350px) { #header .gnb > li{font-size:var(--text-17);} #header .gnb > li > a span, #header .all_menu .gnb .dep02{width:86px;} #header .gnb > li > a, #header .all_menu .gnb > li{padding-inline:10px;} .utility .hd_btn a{min-width:100px;} } @media (max-width:1100px) { #header .gnb > li{font-size:var(--text-16);} #header .gnb > li > a span, #header .all_menu .gnb .dep02{width:81px;} } @media (max-width:1023px) { #header .gnb{display: none;} #header .logo{padding-block:5px;} #header .allCate{display: flex;} } @media (max-width:479px) { #header .utility .hd_btn{display: none;} } /*─────────────────────────────────────────────────────────── Aside ───────────────────────────────────────────────────────────*/ #aside{position: fixed;top: 0;left:0;width: 100%;height: 100%;z-index: 999;background: rgba(255,255,255,0.8);backdrop-filter:blur(10px);display: flex;flex-direction: column;overflow: hidden;overflow-y: auto;padding-block: 10vh;box-sizing: border-box;opacity: 0;transition: all 0.6s;clip-path: inset(0 0 100% 0);} #aside.on{opacity: 1;clip-path: inset(0);} body:has(#aside.on){overflow: clip; touch-action: none;} #aside .w_custom{flex-shrink: 0;max-width: 1800px;min-height: 100%;display: flex;align-items: center;} #aside .gnb{width: 100%;display: grid;align-items: start;justify-content: center;grid: auto / repeat(5, 1fr);gap: clamp(15px, 2.2vw, 40px);} #aside .gnb > li{color: var(--black-color01);font-size: var(--text-20);text-align: center;} @media (min-width:861px) { #aside .gnb > li{opacity:0;translate:0 100px;transition:all 0.8s 0.3s;} #aside.on .gnb > li{opacity:1;translate:0;} #aside.on .gnb > li:nth-child(2){transition-delay:0.4s;} #aside.on .gnb > li:nth-child(3){transition-delay:0.5s;} #aside.on .gnb > li:nth-child(4){transition-delay:0.6s;} #aside.on .gnb > li:nth-child(5){transition-delay:0.7s;} #aside.on .gnb > li:nth-child(6){transition-delay:0.8s;} } #aside .gnb > li > a{position: relative;display: block;font-size: var(--text-30);font-weight: 700;line-height: 1.4;padding-block: 30px;transition: all 0.4s;letter-spacing: 0;} #aside .gnb > li > a:before{position: absolute;content: '';top: 0;left: 50%;translate: -50%;width:12px;height: 0;opacity:0;border-radius:100%;background: var(--point-color01);transition:all 0.3s;} #aside .gnb .dep02{position: relative;} #aside .gnb .dep02 > li > a{display: block;font-weight: 400;padding-block: clamp(7px, 1.7vw, 13px);color: var(--black-color06);line-height: 1.6;transition: all 0.4s;} #aside .gnb .dep03 > li > a{display: block;font-size:var(--text-16);font-weight: 400;padding-block: clamp(3px, 0.5vw, 5px);color: var(--black-color08);line-height: 1.6;transition: all 0.4s;} #aside .utility{position: absolute;top: clamp(30px, 2.8vw, 50px);right: clamp(30px, 2.8vw, 50px);display: flex;align-items: center;gap: clamp(20px, 1.6vw, 30px);z-index:2;} #aside .close_btn{position: relative;width: clamp(30px, 4vw, 40px);height: clamp(30px, 4vw, 40px);z-index: 9;} #aside .close_btn span{position: absolute;top:50%;left:50%;transform: translate(-50%, -50%) rotate(45deg);width: 100%;height: 2px;background: var(--black-color01);} #aside .close_btn span + span{transform: translate(-50%, -50%) rotate(-45deg);} /* over */ @media (hover:hover) and (pointer:fine){ #aside .gnb > li:hover > a{color: var(--point-color01);} #aside .gnb > li:hover > a:before{height:12px;opacity:1;} #aside .gnb .dep02 > li:hover a{color: var(--point-color02);} } @media (max-width:1023px){ #aside{padding-block: clamp(80px, 12vw, 120px);} } @media (max-width:860px){ #aside{display: block;} #aside .w_custom{align-items:flex-start;} #aside .gnb{grid-template: auto / repeat(1, 1fr);gap:0;} #aside .gnb > li{padding-block: clamp(20px, 3vw, 25px);text-align:left;border-bottom: 1px solid rgba(0,0,0,0.15);} #aside .gnb > li > a{padding-block: 0;} #aside .gnb > li > a:before{display: none;} #aside .gnb .dep02{display: grid;gap: 0 20px;grid-template: auto / repeat(2, 1fr);margin-top: clamp(10px, 1.8vw, 15px);justify-content: flex-start;} #aside .gnb .dep03{display: flex;flex-wrap:wrap;gap:5px 10px;} #aside .utility{top:15px; right: 15px;} } @media (max-width:479px){ #aside .gnb .dep02{grid-template: auto / repeat(1, 1fr);} } /*─────────────────────────────────────────────────────────── Main ───────────────────────────────────────────────────────────*/ /*visual*/ .visual_wrapper{position: relative;} .visualSwiper .swiper-slide{position:relative; box-sizing:border-box;height:clamp(550px, 96vw, 960px);overflow:hidden; opacity:0 !important; pointer-events:none;overflow:hidden;} .visualSwiper .swiper-slide.swiper-slide-active{opacity:1 !important; pointer-events:inherit;} .visualSwiper .swiper-slide .img{width:100%;height:100%;position: relative;overflow:hidden;} .visualSwiper .swiper-slide .img img{transition:all 6s;} .visualSwiper .txt_box{position: absolute;top:50%;left:50%;translate:-50% -50%;display: flex;flex-direction:column;gap:var(--row-gap20);text-align:center;} .visualSwiper .slide01 .txt_box{top:53%;} .visualSwiper .txt_box h2{font-size:var(--text-68);color:var(--point-white);font-weight:700;line-height:1.3;letter-spacing:0;} .visualSwiper .txt_box p{font-size:var(--text-20);color:var(--point-white);font-weight:300;line-height:1.5;} .visualSwiper .branch_box{display: flex;justify-content: center;gap:var(--row-gap20);margin-top:var(--row-gap100);transition:all 6s;} .visualSwiper .branch_box li{width:320px;position: relative;} .visualSwiper .branch_box .img{width:100%;aspect-ratio:auto 1.6;position: relative;box-shadow:var(--shadow-01);} .visualSwiper .branch_box .img:before{width:100%;height:100%;content:"";background:var(--point-grad01);position: absolute;top:0;left:0;opacity:0.5;pointer-events:none;} .visualSwiper .branch_box p{font-size:var(--text-24);color:var(--point-white);font-weight:600;line-height:1.5;width:100%;padding-inline:var(--row-gap20);bottom:var(--row-gap10);position: absolute;left:0;text-align: left;} .visualSwiper .txtAni{opacity:0;translate:0 100px;pointer-events:none;transition:all 0.8s;} .visualSwiper .swiper-slide-active .txtAni{opacity:1;translate:0;pointer-events:initial;} .visualSwiper .swiper-slide-active .txtAni:nth-child(2){transition-delay:0.3s;} .visualSwiper .swiper-slide-active .txtAni:nth-child(3){transition-delay:0.6s;} .visualSwiper .swiper-slide-active .branch_box{scale:1.1;} .visualSwiper .swiper-slide-active .img img{scale:1.1;} /*controller*/ .visual_wrapper .controller{position: absolute;bottom:clamp(30px, 6vw, 60px);left:50%;translate:-50%;display: flex;align-items: center;justify-content: center;gap:var(--row-gap30);font-size:var(--text-20);color:var(--point-white);font-weight:400;z-index:3;} .visual_wrapper .counter > span{position: relative;display: inline-block;} .visual_wrapper .counter .current{font-weight:700;} .visual_wrapper .controller_box{display: flex;align-items:center;gap:var(--row-gap20);} .visual_wrapper .controller .progress{position: relative;width:clamp(120px, 20vw, 200px);height:3px;background:rgba(255,255,255,0.3);} .visual_wrapper .controller .progress-bar{position: absolute;height:100%;background:var(--point-white);} .visual_wrapper .controller .swipe_arw{width:clamp(12px, 1.2vw, 14px);height:clamp(16px, 2vw, 20px);position: relative;display: flex;align-items: center;justify-content: center;cursor:pointer;opacity:0.8;} .visual_wrapper .controller .swipe_arw:before{width:100%;aspect-ratio:auto 1;content:"";border:2px solid var(--point-white);border-width:2px 2px 0 0;rotate:-135deg;translate:3px;} .visual_wrapper .controller .swipe_arw.next{scale:-1 -1;} .visual_wrapper .controller .swipe_btn{width:clamp(18px, 2vw, 22px);aspect-ratio:auto 1;position: relative;display: flex;align-items: center;justify-content:space-around;opacity:0.8;} .visual_wrapper .controller .swipe_btn{&::before, &::after{width:3px;height:100%;content:"";display: inline-block;background:var(--point-white);}font-size:0;} .visual_wrapper .controller .swipe_btn.stop:before{display: none;} .visual_wrapper .controller .swipe_btn.stop:after{width:100%;clip-path:var(--clip-poly01);rotate: -90deg;height: auto;aspect-ratio: auto 1.37;} /* over */ @media (hover:hover) and (pointer:fine){ .visual_wrapper .controller .swipe_arw:hover{opacity:1;} .visual_wrapper .controller .swipe_btn:hover{opacity:1;} } @media (max-width:1200px){ .visualSwiper .branch_box{padding:0 50px;} .visualSwiper .branch_box li{width:calc(100% / 3 var(--row-gap20) / 2 * 3);} } @media (max-width:640px){ .visualSwiper .branch_box{padding:0 20px;margin-top:var(--row-gap50);} } @media (max-width:479px){ .visualSwiper .slide01 .txt_box{top:50%;} .visualSwiper .branch_box{display: none;} } /*공통*/ .main_title{text-align: center;} .main_title .ico{margin-bottom:var(--row-gap10);width:clamp(60px, 10vw, 104px);margin:0 auto;} .main_title h3{font-size:var(--text-40);color:var(--black-color00);font-weight:300;line-height:1.4;} .main_title h3 strong{font-weight:700;} .main_title p{font-size:var(--text-20);color:var(--black-color02);font-weight:300;line-height:1.6;} .main_content .w_custom{max-width:1720px;} .main_more{display: inline-flex;align-items: center;justify-content:center;width:clamp(100px, 16vw, 160px);height:clamp(36px, 5vw, 56px);background:var(--point-white);border:1px solid var(--border-color01);gap:var(--row-gap20);font-size:var(--text-20);color:var(--black-color00);font-weight:400;transition:all 0.3s;} .main_more:after{width:clamp(12px, 1.2vw, 14px);aspect-ratio:auto 1;content:"";background:var(--black-color00);clip-path:var(--clip-poly03);transition:all 0.3s;} /* over */ @media (hover:hover) and (pointer:fine){ .main_more:hover{background:var(--point-color01);color:var(--point-white);border-color:var(--point-color01);} .main_more:hover:after{background:var(--point-white);rotate:90deg;} } /*about*/ .main_about{padding-block:var(--row-gap140) var(--row-gap20);} .main_about .bnr_box{display: grid;gap:var(--row-gap35);grid-template-columns:repeat(3, 1fr);} .main_about .bnr_box article{background:var(--point-color02);} .main_about .bnr_box article:nth-child(2){background:var(--point-color03);} .main_about .bnr_box article:nth-child(3){background:var(--point-color01);} .main_about .bnr_box article .img{aspect-ratio:auto 1.62;} .main_about .bnr_box article .img img{transition:all 0.3s;} .main_about .bnr_box .info{display: flex;flex-direction: column;gap:var(--row-gap30);align-items: center;padding:var(--row-gap40) var(--row-gap30);} .main_about .bnr_box dl{display: flex;flex-direction: column;gap:var(--row-gap10);align-items: center;text-align: center;font-size:var(--text-20);color:var(--point-white);font-weight:300;line-height:1.6;} .main_about .bnr_box dl dt{font-size:var(--text-36);font-weight:500;line-height:1.4;} .main_about .bnr_box .more{display: inline-block;width:clamp(36px, 5vw, 56px);aspect-ratio:auto 1;position: relative;border:1px solid rgba(255,255,255,0.5);display: flex;align-items: center;justify-content: center;transition:all 0.3s;} .main_about .bnr_box .more:before{width:clamp(12px, 1.2vw, 14px);aspect-ratio:auto 1;content:"";background:var(--point-white);clip-path:var(--clip-poly03);transition:all 0.3s;} /* over */ @media (hover:hover) and (pointer:fine){ .main_about .bnr_box article:hover .img img{scale:1.1;} .main_about .bnr_box article:hover .more{background:var(--point-white);} .main_about .bnr_box article:hover .more:before{background:var(--point-color01);rotate:90deg;} } @media (max-width:640px){ .main_about .bnr_box{grid-template-columns:repeat(1, 1fr);} } /*product*/ .main_prd{display: grid;gap:var(--row-gap40);grid-template-columns:repeat(4, 1fr);} .main_prd .thumb{width:100%;aspect-ratio:auto 1;} .main_prd .info{margin-top:var(--row-gap20);display: flex;flex-direction: column;gap:var(--row-gap30);align-items: center;text-align: center;} .main_prd .info strong{font-size:var(--text-24);color:var(--black-color00);font-weight:400;line-height:1.6;} @media (max-width:640px){ .main_prd{grid-template-columns:repeat(2, 1fr);} } /*wide*/ .main_wide{position: relative;} .main_wide .txt{padding-block:clamp(50px, 10vw, 104px);display: flex;flex-direction: column;align-items: flex-start;gap:clamp(10px, 2vw, 26px);font-size:var(--text-20);color:var(--point-white);font-weight:600;} .main_wide .txt span{font-family:var(--font-type02);} .main_wide .txt h3{font-size:var(--text-46);line-height:1.4;font-weight:500;margin-bottom:4px;} .main_wide .bg{width:100%;height:100%;position: absolute;top:0;left:0;} @media (max-width:640px){ .main_wide .txt h3 br{display: none;} .main_wide .bg img{object-position:right 30% top 0;} .main_wide .bg:before{width:100%;height:100%;content:"";background:rgba(0,0,0,0.3);position: absolute;top:0;left:0;} } /*─────────────────────────────────────────────────────────── Footer ───────────────────────────────────────────────────────────*/ #footer{padding-block:var(--row-gap80) clamp(40px, 7vw, 74px);background:var(--gray-bg01);} #footer .w_custom{max-width:1720px;display: flex;align-items: flex-start;justify-content: space-between;gap:var(--row-gap30);} #footer .ft_info_box{display: flex;gap:var(--row-gap60);} #footer .logo{width: clamp(100px, 10vw, 150px);flex-shrink:0;} #footer .info_box{display: flex;flex-direction: column;gap:var(--row-gap40);} #footer .info_box .addr-list{display:flex;flex-direction: column;gap:clamp(10px, 1.4vw, 14px);} #footer .addr-list li{display: flex;flex-wrap:wrap;gap:clamp(10px, 1.4vw, 14px) clamp(15px, 3vw, 29px);} #footer .desc{display: flex;gap:3px;font-size:var(--text-18);color:var(--black-color05);font-weight:400;line-height:1.4;position: relative;} #footer .desc .hide{display: none;} #footer .desc > dt{flex-shrink:0;} #footer .desc > dd{position: relative;} #footer .desc + .desc:before{width:1px;height:clamp(8px, 1vw, 12px);content:"";background:var(--border-color01);position: absolute;left:calc(clamp(15px, 3vw, 29px) / 2 * -1);top:50%;translate:0 -50%;} #footer .desc:has(.loc){flex-direction:column;} #footer .desc:has(.loc) > dd:before{display: none;} #footer .desc .loc{display: flex;flex-direction: column;gap:var(--row-gap10);} #footer .desc dl{display: flex;gap:3px;} #footer .desc dl dt{flex-shrink:0;} #footer .copy{display: flex;flex-wrap:wrap;gap:var(--row-gap10) clamp(10px, 1.4vw, 14px);font-size:var(--text-16);color:var(--black-color08);font-weight:400;font-family:var(--font-type02);} #footer .ft_cs_box{display: flex;gap:var(--row-gap40) clamp(20px, 4vw, 120px);} #footer .ft_cs_box .logo_box{display: none;} #footer .ft_cs_box > div{display: flex;flex-direction: column;gap:var(--row-gap20);font-size:var(--text-18);color:var(--black-color00);font-weight:500;line-height:1.4;} #footer .cs_info a{font-size:var(--text-28);font-weight:600;font-family:var(--font-type02);} #footer .cs_info p{font-size:var(--text-17);font-weight:400;line-height:1.6;max-width:200px;} #footer .sns_info ul{display: flex;gap:var(--row-gap40);align-items: center;} #footer .sns_info img{height:clamp(16px, 2vw, 20px)} #footer .ft_menu{display: flex;flex-direction: column;gap:var(--row-gap30);} #footer .ft_menu li a{font-size:var(--text-18);color:var(--black-color05);font-weight:400;} #footer .ft_menu .policy a{color:var(--black-color00);font-weight:500;} .ft_quick{position: fixed;bottom:var(--row-gap40);right:var(--row-gap40);display: flex;flex-direction: column;gap:var(--row-gap10);z-index:10;opacity:0;pointer-events:none;transition:all 0.3s;} .ft_quick.on{opacity:1;pointer-events:initial;} .ft_quick :where(a,button){width:clamp(50px, 6vw, 60px);box-shadow:var(--shadow-02);border-radius:clamp(50px, 6vw, 60px);display: flex;align-items: center;justify-content: center;flex-direction: column;gap:var(--row-gap10);} .ft_quick a{background:var(--point-yellow);aspect-ratio:auto 1;} .ft_quick button{background:var(--black-color01);font-size:var(--text-15);color:var(--point-white);font-weight:600;padding-block:var(--row-gap30);text-transform: uppercase;} .ft_quick button img{height:clamp(18px, 2vw, 23px);} @media (max-width:1450px){ #footer .ft_cs_box{flex-wrap:wrap;justify-content: flex-end;} #footer .ft_menu{width:100%;flex-direction:row;justify-content: flex-end;} } @media (max-width:1023px){ #footer .w_custom{flex-direction: column-reverse;} #footer .ft_info_box .logo{display: none;} #footer .ft_cs_box .logo_box{display: block;width:100%;} #footer .ft_cs_box, #footer .ft_menu{justify-content: flex-start;} .ft_quick a img{max-width:48%;} } @media (max-width:640px){ #footer .ft_cs_box{flex-direction: column;} } @media (max-width:479px){ #footer .desc + .desc:before{display: none;} } .db-policy-modal{width:calc(100% - 60px);max-width:600px;background:var(--point-white);padding:var(--row-gap30);} .db-policy-header{margin-bottom:var(--row-gap20);display: flex;align-items: center;justify-content: space-between;} .db-policy-header .db-policy-title{font-size:var(--text-22);color:var(--black-color00);font-weight:600;} .db-policy-header .db-policy-close{width:20px;aspect-ratio:auto 1;position: relative;font-size:0;} .db-policy-header .db-policy-close{&::before, &::after{width:100%;height:2px;content:"";background:var(--black-color03);position: absolute;top:50%;left:0;rotate:45deg;}} .db-policy-header .db-policy-close:after{rotate:-45deg;} #wrap .db-policy-body{font-family:var(--font-type01);max-height:460px;overflow-y:auto;background:var(--gray-bg01);padding:var(--row-gap20);} #wrap .db-policy-body::-webkit-scrollbar{width: 3px;background:transparent;} #wrap .db-policy-body::-webkit-scrollbar-thumb{width:3px;background:var(--black-color08);} @media (max-width:860px) { .db-policy-modal{width:100%;} }