@charset "utf-8";
/*
 * Name     : layout.css
 * Version  : 1.1.1
 * Product  : prime05
 * Author   : 1px studio
 * Date     : 2024.07.04
 * Desc     : 일부 스타일 아이폰 대응 수정
---------------------------------------------------
*/
:root {

/* Colors: */
--point: #202020;
--point-middle: #20202060;
--point-light: #2020200d;

/* 
    메인페이지 및 헤더에서 사용할 수 있는 포인트 컬러 조합입니다. 
    각자의 기호에 맞게 직접 색상값을 입력하셔도 되고, 
    아래에 정의된 세트를 주석을 풀어 사용하셔도 됩니다. 
*/

/* 갈색 
--point: #665342;
--point-middle: #665342cf;
--point-light: #6653420d; */

/* 노란색
--point: #ffa100;
--point-middle: #ffa100cf;
--point-light: #ffa1000d; */

/* 연두색
--point: #2ab82f;
--point-middle: #2ab82fcf;
--point-light: #2ab82f0d; */

/* 빨간색
--point: #dc010b;
--point-middle: #dc010bcf;
--point-light: #dc010b0d; */

/* 파란색 
--point: #1b66ff;
--point-middle: #1b66ffcf;
--point-light: #1b66ff0d; */

/* 보라색
--point: #7b29ce;
--point-middle: #7b29cecf;
--point-light: #7b29ce0d; */


/* 
    서브페이지에서 사용되는 포인트컬러는 
    --primary 로 설정되어 있습니다.
    메인에서 사용될 포인트컬러와 다르게 설정할 수 있고, 
    동일하고 설정하고 싶다면 --point 와 동일한 컬러값으로 맞춰주세요. 
 */
--primary: #0d6efd;


--main: #202020;
--white-100: #FFFFFF;
--white-200: #fafafa;

--gray-50: #F4F4F4;
--gray-100: #E3E3E3;
--gray-200: #d7d7d7;
--gray-300: #ccc;
--gray-400: #bbb;
--gray-500: #aaa;
--gray-600: #999; /*200*/
--gray-700: #888;
--gray-800: #7C7C7F; /*300*/
--gray-900: #393939; /*400*/



/* Ease */
--expoOut: cubic-bezier(0.16, 1, 0.3, 1);
--expoInOut: cubic-bezier(0.87, 0, 0.13, 1);
--ease-out: cubic-bezier(0.050, 0.760, 0.380, 1.015);
--ease-in-out: cubic-bezier(0.895, 0.000, 0.180, 1.000);
--ease-power4-out: cubic-bezier(0.22,1,0.36,1);


/* Font */
--font-family-eng: 'Poppins';
--font-family-kor: 'Poppins', 'Pretendard';


/* margin */
--margin-10: 10px;
--margin-20: 20px;
--margin-30: 30px;
--margin-40: 40px;
--margin-50: 50px;
--margin-60: 60px;
--margin-70: 70px;
--margin-space-1: 100px;
--margin-space-2: 140px;
--margin-space-3: 180px;

--header-space: 6.25rem;

--x-padding: 3rem;
}

html {scroll-behavior: smooth;overflow-x: hidden;font-size: 16px;}
body {padding:0;overflow-x: hidden;font-family: var(--font-family-kor);color: var(--main);}
a {text-decoration: none; color: inherit}
a:hover {color: inherit;}
*::selection {background-color: var(--primary);color: var(--white-100);}
div, p, h1, h2, h3, h4, h5, h6 {line-height: 1.6;margin-bottom: 0;}
ul {list-style:none;padding:0;margin:0;}
main img {width:100%}
button, a {color: inherit;}

.lenis.lenis-smooth {scroll-behavior: auto !important;}
.lenis.lenis-smooth [data-lenis-prevent] {overscroll-behavior: contain;}
.lenis.lenis-stopped {overflow: hidden;}

.form-select.line-style {border: none;border-bottom: 1px solid #191919;border-radius: 0;}
.form-select.line-style:focus {box-shadow: none;}
.margin-space-1 {margin-top: var(--margin-space-1);}
.margin-space-2 {margin-top: var(--margin-space-2);}
.margin-space-3 {margin-top: var(--margin-space-3);}
.m-0 {margin: 0 !important;}
.ellipsis-1 {width: 100%;display: -webkit-box;overflow: hidden;text-overflow: ellipsis;white-space: normal;-webkit-line-clamp: 1;-webkit-box-orient: vertical;word-break: normal;}
.ellipsis-2 {width: 100%;display: -webkit-box;overflow: hidden;text-overflow: ellipsis;white-space: normal;-webkit-line-clamp: 2;-webkit-box-orient: vertical;word-break: normal;}
.ellipsis-3 {width: 100%;display: -webkit-box;overflow: hidden;text-overflow: ellipsis;white-space: normal;-webkit-line-clamp: 3;-webkit-box-orient: vertical;word-break: normal;}

.container-xxl {width: 100%;padding: 0 var(--x-padding);}
.container-xxxl {width: 100%;max-width: calc(1600px + 6rem);margin: 0 auto;padding: 0 var(--x-padding);}

/* custom cursor */
.px-cursor {pointer-events: none;}
.px-cursor .cursor-ball {position: fixed;top: 0;left: 0;z-index: 1000;mix-blend-mode: difference;}
.px-cursor .cursor-ball .text {position: absolute; top: 49px; left: 0; width: 100%; right: 0; text-align: center; color: var(--white-100); font-size: 14px; font-weight: 400; letter-spacing: 1px;}
.cursor-inner::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; background: rgba(0,0,0,0.3); border-radius: 100px; z-index: -1; transition: all .3s; transform: scale(0);}
.cursor-inner svg {opacity: 1; transition: all .3s; transform: scale(1);}
.cursor-inner.big::after {transform: scale(1);}
.cursor-inner.big svg {opacity: 0; transform: scale(0);}
.cursor-inner {width: 120px; height: 120px; display: flex; align-items: center; justify-content: center;}
.px-cursor .cursor-ball circle {fill: var(--point);filter: invert(1);}


/* header */
#header {position: fixed;top: 1rem;left: 0;width: 100%;z-index: 1000;transition: all .8s var(--ease-power4-out);}
#header .container-xxxl {height: 4.5rem;transition: all .8s var(--ease-power4-out);background: var(--white-100);border-radius: 4rem;padding: 1rem var(--x-padding);max-width: calc(1600px + 6rem);}
#header .logo {width: 11rem;display: flex;height: 40px;}
#header .logo a {display: flex;width: 100%;align-items: center;}
#header .gnb > ul > li .gnb-top {font-size: 1rem;position: relative;white-space: nowrap;padding: 0.451rem 1rem;display: block;transition: all .3s;margin: 0 0.375rem;z-index: 1;}
#header .gnb > ul > li .gnb-top::after {content: "";position: absolute;top: 1.1rem;right: 0;width: 0;height: 0;border-bottom: 3px solid transparent;border-top: 4px solid var(--point);border-left: 3px solid transparent;border-right: 3px solid transparent;transition: all .3s;}
#header .gnb > ul > li .gnb-top::before {content: '';position: absolute;width: 125%;height: 100%;background: var(--point);opacity:0;border-radius: 2rem;top: 0;left: -5%;z-index: -1;transform: translateY(10%);transition: all .3s;}
#header .gnb > ul > li {position: relative;}
#header .gnb > ul > li:hover .gnb-top {color: var(--white-100);}
#header .gnb > ul > li:hover .gnb-top::before {opacity: 1;transform: translateY(0);}
#header .gnb > ul > li:hover .gnb-top::after {border-top-color: var(--white-100);}
#header .gnb > ul > li .gnb-sub {display: none;padding: 1.2rem 1.25rem;background: var(--white-100);box-shadow: 2px 7px 15px -3px rgba(0,0,0,0.13);border-radius: 1rem;margin-top: 1.25rem;white-space: nowrap;}
#header .gnb > ul > li:hover .gnb-sub {display: block;}
#header .gnb > ul > li .gnb-sub .gnb-sub-text {color: var(--gray-800);padding: 0.5rem 1.7rem;margin: 0.4rem 0;display: block;letter-spacing: -0.03rem;}
#header .gnb > ul > li .gnb-sub .gnb-sub-text:hover {color: var(--main);background: var(--gray-50);border-radius: .5rem;}
#header .header-buttons {display: flex;align-items: center;height: 40px;}
#header .header-buttons .gnb-right {display: flex;}
#header .header-buttons .right-button {border: 1px solid var(--gray-200);border-radius: 1rem;padding: 1px 1.1rem;font-size: 0.9375rem;margin-left: 0.4375rem;height: 1.75rem;overflow: hidden;}
#header .header-buttons .right-button div {transition: transform .8s var(--ease-power4-out);}
#header .header-buttons .right-button:hover div {transform: translateY(-100%);}
#header .header-buttons .right-button-black {border: 1px solid transparent;border-radius: 2rem;padding: 5px 2rem;font-size: 1rem;margin-left: 0.4375rem;height: 2.2rem;overflow: hidden;background: var(--point);color: var(--white-100);transition: all .8s var(--ease-power4-out);letter-spacing: -0.03rem;}
#header .header-buttons .right-button-black div {transition: transform .8s var(--ease-power4-out);}
#header .header-buttons .right-button-black:hover div {transform: translateY(-100%);}

#header .header-buttons .button-hamburger {border: none;background: var(--point);border-radius: 40px;color: var(--white-100);display: none;position: relative;width: 6.75rem;height: 2rem;}
#header .header-buttons .button-hamburger::before {}
#header .header-buttons .button-hamburger .hide-box {overflow: hidden;line-height: inherit;position: absolute;top: 0;right: 0;width: 100%;height: 100%;display: flex;align-items: center;flex-direction: column;transform: translateY(10%);}
#header .header-buttons .button-hamburger .hide-box div {height: 100%;transition: transform .8s var(--ease-power4-out);}
#header .header-buttons .button-hamburger.open .hide-box div {transform: translateY(-100%);}
#header.fixed .container-xxxl {box-shadow: 0 8px 25px -8px rgba(0,0,0,0.15);max-width: calc(1320px + var(--x-padding));width: 100%; transform: translateY(0%);opacity: 1;}
#header.fixed.hide {transform: translateY(-100%);opacity: 0;} /* --스크롤시 header 숨기기 기능을 끄고 싶으면 이 줄(#header.fixed.hide)을 주석하세요.-- */
#header.fixed .gnb > ul > li:hover .gnb-top::before {opacity: 1;transform: translateY(0);}
#header.fixed-important {transform: translateY(0%) !important;opacity: 1 !important;}


/* mobile header */
#header-mb {display: none;background: var(--white-100);position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 100;opacity: 0;transition: opacity .2s var(--ease-power4-out);}
#header-mb .container-xxl {height: 100vh;padding: 0;}
#header-mb .header-mb-head {justify-content: space-between;}
#header-mb .header-mb-head .logo {width: 11rem;}
#header-mb .header-mb-head .close {}
#header-mb .header-mb-head .close button {border: none;background: var(--main);border-radius: 40px;color: var(--white-100);position: relative;width: 6.75rem;height: 2rem;}
#header-mb .header-mb-menu {margin-top: 5rem;display: flex;flex-direction: column;justify-content: space-between;height: calc(100% - 10rem);overflow-y: scroll;padding-top: 1.5rem;}
#header-mb .header-mb-menu nav {padding: 0 var(--x-padding);}
#header-mb .header-mb-menu nav > ul {flex-direction: column;}
#header-mb .header-mb-menu nav > ul > li {}
#header-mb .header-mb-menu nav > ul > li .gnb-top {font-size: 19px;font-weight: 500;padding: 1rem 0.75rem;display: block;position: relative;}
#header-mb .header-mb-menu nav > ul > li .gnb-top.arrow::after {content:'';display: inline-block;position: absolute;top: 1.75rem;margin-left: 1rem;border-bottom: 5px solid transparent;border-top: 6px solid var(--main);border-left: 5px solid transparent;border-right: 5px solid transparent;}
#header-mb .header-mb-menu nav > ul > li .gnb-sub {display: none;overflow: hidden;border: 3px solid var(--point);padding: 1rem 1.2rem;border-radius: 1rem;margin: 0 0.75rem;}
#header-mb .header-mb-menu nav > ul > li .gnb-sub.open {display: block;}
#header-mb .header-mb-menu nav > ul > li .gnb-sub > li {}
#header-mb .header-mb-menu nav > ul > li .gnb-sub > li .gnb-sub-text {display: block;padding: 0.5rem 1rem;margin: 0.5rem 0;font-size: 1.0625rem;font-weight: 600;font-size: 17px;border-radius: 0.5rem;}
#header-mb .header-mb-menu nav > ul > li .gnb-sub > li .gnb-sub-text:hover {background: var(--gray-50);}
#header-mb .header-mb-menu .header-mb-tail {position: absolute;bottom: 0;left: 0;right: 0;height: 3.5rem;margin:0;}
#header-mb .header-mb-menu .header-mb-tail .tail-button {background: var(--point);color: var(--white-100);border: none;font-size: 16px;letter-spacing: -0.03rem;display: flex;justify-content: center;align-items: center;font-weight: 600;}
#header-mb .header-mb-menu .header-mb-tail .tail-button.line {background: #fff;color: var(--main);border-right: 2px solid var(--main);border-top: 2px solid var(--main);}

/* footer */
#footer {padding-top:6.875rem;border-top: 1px solid var(--gray-200);}
#footer .logo {width: 169px;display: block;margin-bottom: 4.375rem;}
#footer .container-xxxl .row .info-box {width: 25%;}
#footer .container-xxxl .row .icon-box {width: 25%;text-align: right;}
#footer .footer-info .info-text {font-size: 1rem;font-weight:400;margin-bottom: 0.75rem;line-height: 1.6;letter-spacing: -0.03rem;}
#footer .footer-nav {display: flex;justify-content: space-between;width: 36vw;max-width: 640px;min-width: 500px;}
#footer .footer-nav .nav-box {display: flex;flex-direction: column;width: 20%;}
#footer .footer-nav .nav-box .top-menu {margin-bottom: 1.5625rem;font-size: 1rem;font-weight: 500;line-height: 1;}
#footer .footer-nav .nav-box .sub-menu {line-height: 1;margin-bottom: 1.25rem;color: var(--gray-600);font-weight: 300;letter-spacing: -0.03rem;}
#footer .footer-nav .nav-box .sub-menu:hover {color: var(--gray-900)}
#footer .footer-sns .sns {width: 2.25rem;height: 2.25rem;display: inline-flex;align-items: center;justify-content: center;border: 1px solid var(--gray-200);border-radius: 2rem;margin-left: 5px;transition: all .8s var(--ease-power4-out);font-size: 19px;color: var(--gray-600);}
#footer .footer-sns .sns:hover {border-color: var(--main);color: var(--main);}
#footer .footer-sns .sns img {width: 1rem;}
#footer .footer-email {display:inline-block;overflow: hidden;border: 1px solid var(--gray-200);border-radius: 2rem;padding: 0.25rem 1rem;margin-top: 1rem;height: 2.25rem;transition: all .8s var(--ease-power4-out);text-align: center;cursor: pointer;}
#footer .footer-email div {transition: transform .8s var(--ease-power4-out);height: 100%;text-decoration: none;}
#footer .footer-email:hover div {transform: translateY(-100%);}
#footer .footer-phone {display: inline-flex;align-items: center;justify-content: center;border: 1px solid var(--gray-200);border-radius: 2rem;padding: 0.32rem 1rem;transition: all .8s var(--ease-power4-out);height: 2.25rem;}
#footer .footer-copy {font-size: 0.9375rem;color: var(--main);}
#footer .footer-terms {font-size: 0.9375rem;}
#footer .footer-terms::after {content:'';position:relative;display:inline-block;height:14px;width:1px;background: var(--main);transform:rotate(20deg);margin: 0 10px;top:2px}
#footer .footer-terms:last-child::after {content: none;}
#footer .footer-terms:hover {text-decoration:underline !important;}
#footer .footer-email:hover, #footer .footer-phone:hover {border-color: var(--main)}
#footer .footer-copy-box {margin-top: 6.4rem;margin-bottom: 4rem;}



/* *********************************************
 * Page loader
 ******************************************** */
#page-loader {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: var(--white-100);z-index: 9990}
#page-loader .loader-stage {position: relative;display: flex;width: 300px;height: 100%;margin: auto;justify-content: center;align-items: center;overflow: hidden}
#page-loader .dot-floating {color: var(--main);background-color: var(--main);}
#page-loader .dot-floating:before, #page-loader .dot-floating:after {color: var(--main);background-color: var(--main);}
 
/* *********************************************
   * Layer popup
   ******************************************** */
.px-layer-popup {display: none; position: fixed; box-shadow: 0 25px 43px -21px rgba(0,0,0,.34); z-index: 1130}
.px-layer-popup .popup-content > a {display: block}
.px-layer-popup .popup-footer {display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;align-items: center;justify-content: space-between;background-color: var(--gray-100);}
.px-layer-popup .popup-footer .inner-grid {width: 100%}
.px-layer-popup .popup-footer button {height: 3.375rem; border: 0; outline: 0}
.px-layer-popup .popup-footer .btn-cookie-close {font-size: 15px; font-weight: 500; letter-spacing: -0.02em; padding: 0 24px; background: none;}
.px-layer-popup .popup-footer .btn-normal-close {padding: 0 16px; background-color: transparent}
.px-layer-popup .popup-footer .btn-normal-close svg {width: 1.25rem; height: 1.25rem}
 
/* quick menu */
#quick-btns {position: fixed;bottom: 50px;right: -60px;z-index: 10;transition: all 0.5s var(--ease-power4-out);}
#quick-btns .mobile {display:none;}
#quick-btns.show {right:60px;}
#quick-btns a {background: var(--gray-900);width: 56px;height: 56px;display: block;box-shadow: 0px 9px 23px -4px rgb(34 35 38 / 60%);text-align: center;color: var(--white-100);font-size: 36px;border-radius: 4rem;display: flex;align-items: center;justify-content: center;}
#quick-btns .kakao-btn {margin-bottom: 10px;background: #ffe600;font-size: 36px;color: var(--main);box-shadow: 0px 5px 25px -2px rgb(247 209 0 / 60%);}
#quick-btns .call-btn {background: #31bf60;;font-size: 28px;margin-bottom: 10px;box-shadow: 0px 5px 25px -2px rgb(62 110 204 / 40%);}
#quick-btns .quick-list {transform: scale(0) translateY(100%);transform-origin: bottom center;transition: all 0.3s ease 0.1s;opacity: 0;/* background: var(--gray-100); */border-radius: 4rem;margin-bottom:10px;height: 0;}
#quick-btns .quick-list a {}
#quick-btns .quick-list.active {opacity: 1;transform: scale(1) translateY(0);height: 100%;}
#quick-btns .quick-more {font-size: 26px;margin-bottom: 6px;background: var(--primary);width: 50px;height: 50px;}
#quick-btns .mobile a {width: 3.5rem;height: 3.5rem;margin-bottom: 10px;box-shadow: none;}


/* 포인트컬러 임시 변경툴 (원픽셀이 상품 전시 목적으로 제작한 기능이니 삭제하셔도 무방합니다.) */
#color-set {position: fixed;bottom: 30px;right: 20px;background: #f7f7f8;z-index: 999;padding: 36px 42px;border-radius: 30px;border-top-left-radius: 0;width: 284px;color: rgba(0, 0, 0, 0.6);transition: transform 400ms cubic-bezier(0.36, 0, 0, 1) 0s;box-shadow: rgba(255, 255, 255, 0.12) 0px 0px 2px 0px inset, rgba(0, 0, 0, 0.25) 0px 12px 40px;}
#color-set h1{font-size: 18px;margin-bottom: 24px;letter-spacing: -0.03px;font-weight: 300;color: #888888;}
#color-set .title {font-size: 16px;letter-spacing: -0.3px;font-weight: 300;margin-bottom: 5px;}
#color-set .color-set-hide {font-size: 30px;position: absolute;left: -58px;top: 0;width: 58px;height: 68px;display: flex;align-items: center;justify-content: center;cursor: pointer;border-top-left-radius: 22px;border-bottom-left-radius: 22px;background: #f7f7f8;transition: background 400ms cubic-bezier(0.36, 0, 0, 1) 0s;box-shadow: rgba(255, 255, 255, 0.12) 0px 0px 2px 0px inset, rgba(0, 0, 0, 0.09) -14px 2px 17px;}
#color-set .color-set-hide:hover {background: #d9d9d9;}
#color-set.hide .color-set-hide {background: #c8c8c8;color:#fff;}
#color-set .color-set-hide i {height: 100%;display: flex;align-items: center;}
#color-set.hide {transform: translateX(305px);box-shadow: none;}
#color-set .color {width: 33px;height: 22px;background: #202020;border-radius: 5px;cursor: pointer;position: relative;border: 2px solid #f7f7f8;}
#color-set .color.no0 {background: #202020;}
#color-set .color.no1 {background: #665342;}
#color-set .color.no2 {background: #ffa100;}
#color-set .color.no3 {background: #2ab82f;}
#color-set .color.no4 {background: #dc010b;}
#color-set .color.no5 {background: #1b66ff;}
#color-set .color.no6 {background: #7b29ce;}
#color-set .color.selected {border-color: #202020;}
#color-set .col-8 .row {gap: 5px;}
#color-set .row {gap: 4px;}
#color-set .header-set {letter-spacing: -0.3px;white-space: nowrap;background: #e8e8e8;color: #202020;border-radius: 6px;width: 54px;display: flex;align-items: center;justify-content: center;font-size: 14px;height: 30px;cursor: pointer;}
#color-set .header-set.point {background: linear-gradient(43deg, rgb(65, 88, 208) 0%, rgb(200, 80, 192) 46%, rgb(255, 204, 112) 100%);color: #fff;}
#color-set .color:hover {scale: 1.2;}
#color-set .header-set {position: relative;border: 2px solid #f7f7f8;}
#color-set .header-set:hover {scale: 1.1;}
#color-set .header-set.selected {border-color: #202020;}
#color-set .header-hide input {display: none;}
#color-set .header-hide input + label {display: inline-block;position: relative;padding-left: 32px;font-size: 15px;letter-spacing: -0.3px;cursor: pointer;font-weight: 300;}
#color-set .header-hide input + label::before {content:'';width: 22px;height: 22px;background: #d9d9d9;position: absolute;left:0;border-radius: 4px;}
#color-set .header-hide input + label::after {content:'\F272';font-family: 'bootstrap-icons';font-size: 16px;width: 22px;height: 22px;text-align: center;position: absolute;left: 0;top:0;color: #ffffff;}
#color-set .header-hide input:checked + label::after {color: #ffffff;}
#color-set .header-hide input:checked + label::before {background: #202020;}


@media (hover:hover) {
    a:hover {text-decoration: none; color: var(--main);color: inherit}
}
@media (min-width: 1280px) {
    /* header 스크롤시 fixed 포인트 컬러 버전 */
    #header.fixed[data-color=point] .container-xxxl {box-shadow: 0 8px 25px -8px rgba(0,0,0,0.15);background: var(--point);}
    #header.fixed[data-color=point] .logo {filter: brightness(0) invert(1);}
    #header.fixed[data-color=point] .gnb-right .right-button {color: var(--white-100);border-color: var(--gray-400);}
    #header.fixed[data-color=point] .gnb > ul > li .gnb-top {color: var(--white-100);}
    #header.fixed[data-color=point] .gnb > ul > li .gnb-top::after {border-top-color: var(--white-100);}
    #header.fixed[data-color=point] .gnb > ul > li:hover .gnb-top {color: var(--main);}
    #header.fixed[data-color=point] .gnb > ul > li:hover .gnb-top::before {background: var(--white-100);}
    #header.fixed[data-color=point] .gnb > ul > li:hover .gnb-top::after {border-top-color: var(--main);}
    #header.fixed[data-color=point] .header-buttons .right-button-black {background: var(--white-100);color: var(--point);}
}
@media (max-width: 1710px) {
    #header .container-xxxl {max-width: calc(1320px + 6rem);}
}
@media (max-width: 1420px) {
    #header.fixed .container-xxxl { max-width: calc(100% - 6rem);}
}
@media (max-width: 1279px) {
    html, body {font-size: 15px;}
    #header .button-hamburger {display: block;}
    #header .gnb {display: none;}
    #header .header-buttons .gnb-right {display: none;}
    #header .container-xxxl {background: transparent;}
    #header.fixed .container-xxxl {box-shadow: none;max-width: 100%;}
    #header .header-buttons .button-hamburger {display: block;}
    #footer .container-xxxl .row .icon-box {width: 20%;}
    #color-set {display: none;}
}
@media (max-width: 1100px) {
    #footer .footer-nav {display: none;}
    #footer .container-xxxl .row .info-box {width: 40%;}
    #footer .container-xxxl .row .icon-box {width: 40%;}
}
@media (pointer:coarse) {
    #quick-btns .mobile {display:block;}
    #quick-btns .pc {display:none;}
    #quick-btns.show {right: 25px;bottom: 40px;}
}
@media (max-width: 991px) or (orientation: portrait) {
    :root {
        --margin-space-1: 50px;
        --margin-space-2: 90px;
        --margin-space-3: 70px;
        --x-padding: 2rem;
        --header-space: 5.5rem;
    }
    #header {top: 0.5rem;}
    #footer {padding-top: 3.875rem;}
}
@media (max-width: 767px) {
    .px-layer-popup {top: 100px !important;left: 50% !important;width: calc(100% - 50px);transform: translateX(-50%)}
    .px-layer-popup .popup-content img {display: block;width: 100%}
    .px-layer-popup .popup-footer .btn-cookie-close {font-size: 14px;padding: 0 16px}
    #footer {padding-top: 2.8rem;}
    #footer .logo {margin-bottom: 2.3rem;}
    #footer .container-xxxl .row .info-box {width: 100%;}
    #footer .container-xxxl .row .icon-box {width:100%;text-align: left;margin-top: 1.5rem;}
    #footer .footer-sns .sns {margin-left: 0;margin-right: 5px;}
    #footer .footer-copy-box {margin: 2.2rem 0;flex-direction: column;}
    #footer .footer-copy {margin-bottom: 1rem;}
    #footer .footer-info .info-text {margin-bottom: 0.5rem;}
}
@media (max-width: 575px) {
    :root {
        --x-padding: 1rem;
    }
}
@media (max-width: 480px) {
    
}