@charset "utf-8";

/* common */
body.fixed { overflow: hidden; }
.inner { width: calc(100% - 60px); max-width: 1600px; margin: 0 auto; }
.font-ox {font-family: var(--font-Oxanium); letter-spacing: 0;}
.button__wrap { display: flex; justify-content: center; align-items: center; }
.btn { display: flex; justify-content: center; align-items: center; }
.btn-bracket { position: relative; width: 270px; height: 70px; border: none; font-family: var(--font-Oxanium); font-size: 22px; font-weight: 700; letter-spacing: 0; color: #AAAAAA; transition: 0.3s ease-out; background-color: transparent; }
.btn-bracket::before { content: ""; position: absolute; left: 0; top: 0; display: block; width: 22px; height: calc(100% - 16px); border: 8px solid #DDDDDD; border-right: none; transition: 0.3s ease-out; }
.btn-bracket::after { content: ""; position: absolute; right: 0; top: 0; display: block; width: 22px; height: calc(100% - 16px); border: 8px solid #DDDDDD; border-left: none; transition: 0.3s ease-out; }
.btn-bracket:hover {  color: var(--main-color2); }
.btn-bracket:hover::before { border-color: var(--main-color2); transform: translateX(-40px); }
.btn-bracket:hover::after { border-color: var(--main-color2); transform: translateX(40px); }
.btn-bracket.size-s { width: 240px; }
.btn-box-03 { width: fit-content; column-gap: 19px; height: 60px; padding: 0 37px; font-size: 18px; font-weight: 500; text-align: left; color: #fff; border: 3px solid var(--main-color3); background-color: var(--main-color3); transition: 0.3s ease-out; }
.btn-box-03::after { content: ""; display: block; width: 8px; height: 14px; background: url("/img/common/icon_more_w.svg") no-repeat center center/contain; transition: 0.3s ease-out; }
.btn-box-03:hover { color: var(--main-color3); background-color: #fff; }
.btn-box-03:hover::after { background-image: url("/img/common/icon_more_dark.svg"); } 
.mo-br { display: none; }

/* header */
.header{ position: fixed; width: 100%; height: var(--header-H); left: 0; top: 0; background-color: #fff; z-index: 900; transition: height 0.3s ease-out, transform 0.3s ease-out; }
/* .header::after { content: ""; position: absolute; left: 0; bottom: 0; display: none; width: 100%; height: 1px; background-color: #DDDDDD; } */
.header.scroll { transform: translateY(-100%); }
.header__inner { position: relative; display: flex; justify-content: space-between; align-items: center; width: calc(100% - 320px); height: 100%; margin: 0 auto; }
.header .logo { width: 190px; }
.logo a { display: block; }
.header .right { display: flex; align-items: center; }
.gnb { margin-right: 30px; }
.gnb .gnb__list { display: flex; align-items: center; }
.gnb .gnb__item { position: relative; height: var(--header-H); }
.gnb .gnb__item > a { display: flex; align-items: center; height: 100%; padding: 0 30px; font-family: var(--font-Mix); font-size: 20px; font-weight: 500; color: #111; }
.gnb .gnb__item > a.font-ox { font-size: 22px;}
.gnb .lnb { visibility: hidden; opacity: 0; transition: 0.3s ease-out; }
.gnb .gnb__item.no-lnb .lnb { display: none; }
.gnb .lnb__list { position: absolute; left: 50%; top: 100%; min-width: fit-content; padding: 20px; background-color: #F5F5F5; transform: translateX(-50%); }
.gnb .lnb__item + .lnb__item { margin-top: 10px; }
.gnb .lnb__item > a { display: block; font-size: 18px; font-weight: 300; color: #333; text-align: center; white-space: nowrap; }
.gnb .lnb__item > a.font-ox { font-size: 18px; font-weight: 300; color: #070505; }
.gnb .gnb__item:hover, .gnb .gnb__item:focus { overflow: visible; }
.gnb .gnb__item:hover .lnb, .gnb .gnb__item:focus .lnb { visibility: visible; opacity: 1; }

.header-btn__area { display: flex; align-items: center; column-gap: 15px; }
.btn-lang__box { overflow: hidden; position: relative; width: 50px; height: var(--header-H); }
.btn-lang__box .btn-lang { width: 100%; height: 100%; border: none; background: url("/img/common/icon_global.svg") no-repeat center center/25px; }
.btn-lang__box .lang__list { position: absolute; left: 50%; top: 100%; background-color: #F5F5F5; padding: 15px; transform: translateX(-50%); visibility: hidden; opacity: 0; transition: 0.3s ease-out; }
.btn-lang__box .lang__list > li + li { margin-top: 10px; }
.btn-lang__box .lang__list a { font-family: var(--font-Oxanium); font-size: 18px; font-weight: 300; letter-spacing: 0; color: #333; white-space: nowrap; }
.btn-lang__box:hover, .btn-lang__box:focus { overflow: visible; }
.btn-lang__box:hover .lang__list, .btn-lang__box:focus .lang__list { overflow: visible; visibility: visible; opacity: 1; }
.btn-mo-menu { position: relative; width: 50px; height: 50px; border: none; background-color: transparent; transition: 0.3s ease-out;}
.btn-mo-menu > span { position: absolute; left: 50%; top: calc(50% - 1px); display: inline-block; width: 30px; height: 3px; background-color: #000; transform: translateX(-50%); transition: 0.3s ease-out; }
.btn-mo-menu > span:nth-child(1) { transform: translateX(-50%) translateY(-10px); }
.btn-mo-menu > span:nth-child(2) { transition: 0s; transition-delay: 0.15s; }
.btn-mo-menu > span:nth-child(3) { transform: translateX(-50%) translateY(10px); }
.btn-mo-menu.on { transform: rotate(45deg); transition-delay: 0.33s; }
.btn-mo-menu.on > span:nth-child(1) { transform: translateX(-50%) translateY(0px) rotate(90deg); }
.btn-mo-menu.on > span:nth-child(2) { opacity: 0; }
.btn-mo-menu.on > span:nth-child(3) { transform: translateX(-50%) translateY(0px); }

#allMenu { position: fixed; right: 60px; top: var(--header-H); background-color: #F5F5F5; transform: translateX(calc(100% + 60px)); z-index: 900; transition: transform 0.6s ease-out;}
#allMenu.on { transform: translateX(0); }
#allMenu .menu__inner { overflow-y: auto; width: 100%; height: 100%; padding: 60px; scrollbar-width: none;}
#allMenu .gnb__list { width: 340px; }
#allMenu .gnb__item { position: relative; text-align: right; padding-bottom: 15px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); transition: 0.3s ease-out; }
#allMenu .gnb__item + .gnb__item { margin-top: 15px; }
#allMenu .gnb__item > a { position: relative; display: inline-block; font-family: var(--font-Mix); font-size: 46px; font-weight: 600; color: #AAAAAA; transition: 0.3s ease-out; }
#allMenu .gnb__item > a::before { content: attr(data-index); position: absolute; left: -31px; top: 0; font-family: var(--font-Oxanium); font-size: 18px; font-weight: 500; letter-spacing: 0; color: #AAAAAA; pointer-events: none; transition: 0.3s ease-out; }
#allMenu .lnb { display: none; }
#allMenu .lnb__list { display: flex; flex-wrap: wrap; margin-top: 10px; justify-content: right; gap: 5px 10px; padding-bottom: 15px;}
#allMenu .gnb__item.on { border-color: #000; }
#allMenu .gnb__item.on > a, #allMenu .gnb__item.on > a::before { color: #111; }
#allMenu .lnb__item > a { font-size: 20px; font-weight: 300; color: #666; }

/* footer */
.footer { position: relative; height: 170px; border-top: 1px solid #DDDDDD; }
.footer .btn-top { position: absolute; right: 60px; top: -90px; width: 60px; height: 60px; border: none; font-family: var(--font-Oxanium); font-size: 17px; font-weight: 500; letter-spacing: 0; color: #fff; background-color: var(--main-color2); }
.footer__inner { display: flex; justify-content: space-between; align-items: center; width: calc(100% - 60px); max-width: 1800px; height: 100%; margin: 0 auto; }
.footer .logo { width: 252px; } 
.footer .logo img { -o-filter: grayscale(1); -moz-filter: grayscale(1); -webkit-filter: grayscale(1); filter: grayscale(1); opacity: 0.4; }
.footer .left { display: flex; align-items: center; column-gap: 120px; }
.f-menu__list { display: flex; align-items: center; column-gap: 30px; }
.f-menu__list > li { text-align: center; }
.f-menu__list > li:first-child a{ font-weight: 600; }
.f-menu__list a { font-size: 18px; font-weight: 500; color: #333; }
.footer .right { display: flex; align-items: center; column-gap: 60px; }
.footer .right .copyright { font-size: 18px; color: #AAAAAA; }
.footer .right .copyright > span { font-family: var(--font-Oxanium); font-size: inherit; letter-spacing: 0; color: inherit; vertical-align: -0.1em; }
.f-site { position: relative; }
.f-site .btn-f-site { position: relative; width: 240px; height: 50px; border: none; text-align: left; padding: 0 20px; font-family: var(--font-Oxanium); font-size: 17px; font-weight: 500; letter-spacing: 0; color: #333; background-color: #EEEEEE; }
.f-site .btn-f-site::after { content: ""; position: absolute; right: 19px; top: 50%; display: block; width: 14px; height: 9px; margin-top: -4.5px; background: url("/img/common/select_arrow.svg") no-repeat center center/contain; transition: 0.3s; }
.f-site .f-site__list { display: none; position: absolute; left: 0; bottom: 100%; width: 100%; z-index: 10; }
.f-site .f-site__list { border: 1px solid #DDDDDD; }
.f-site .f-site__list > li { background-color: #fff; }
.f-site .f-site__list > li > a { display: block; padding: 0 20px; font-family: 'Oxanium', 'Pretendard',sans-serif; font-size: 16px; line-height: 40px; }
.f-site .f-site__list > li > a:hover { text-decoration: underline; }
.f-site .btn-f-site.on::after { transform: rotateX(180deg); } 

/* privacy */
.privacy { color:#666; width: 100%; overflow: hidden; box-sizing:border-box; font-size:18px; font-weight: 300; word-break:break-all; }
.privacy h2 { font-size:18px; font-weight:bold; color:#000; text-align: left; margin:50px 0 30px; }
.privacy h2:first-child { margin-top: 0; }
.privacy > p { margin:15px 0; }
.privacy > dl { margin-top: 60px; }
.privacy > dl > dt{ font-size:20px;color:#222; }
.privacy > dl > dd{ margin-top: 15px; padding-bottom:10px; line-height: 1.67;}
.privacy > dl > dd ul{ padding:10px; }
.privacy > dl > dd ul li{ line-height:120%; margin-top: 10px; }
.privacy > dl > dd ul li:first-child { margin-top: 0; }
.privacy > dl > dd ul li p { margin:0 10px 5px; line-height: 140%; }
.sTxt h3 { font-size:16px; color: #333; font-weight: 700; margin: 20px 0 10px; }
.sTxt p { margin-top: 10px; }
.sTxt dt { margin-top: 10px; }
.sTxt dd { margin:0 8px; }
.privacy ol > li { list-style-type: decimal; margin-left: 22px; } 
.privacy ol > li > ol > li { list-style-type: lower-alpha; }
.privacy ol > li > ul > li { position: relative; margin-left: 8px; padding-left: 16px; }
.privacy ol > li > ol > li { margin-left: 22px; padding-left: 0; }
.privacy ol > li > ul > li::before { content: "•"; position: absolute; left: 0; top: 0; display: inline-block; }
.privacy .version { margin-top: 60px; margin-bottom: 0; font-size: 20px; line-height: 1.3; color: #111; }
.privacy .box + .box { margin-top: 60px; }
.privacy .box + dl { margin-top: 60px; }
.privacy .box h3 { font-size: 40px; font-weight: 500; color: #111; }
.privacy .box p { font-size: 20px; line-height: 1.7; color: #333; }
.privacy .box h3 + p { margin-top: 20px; } 
.privacy .box dl { margin-top: 30px; }
.privacy .box dt { font-size: 20px; color: #222; }
.privacy .box dd { margin-top: 15px; font-size: 18px; line-height: 1.67; font-weight: 300; color: #666; }
.privacy .box dd li { font-size: 18px; line-height: 1.67; }

/* modal */
.modal { position: fixed; left: 0; top: 0; display: none; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 900;}
.modal-layer { position: absolute; left: 50%; top: 50%; width: calc(100% - 60px); transform: translate(-50%, -50%); background-color: #fff; }
#imgModal .modal-layer { overflow-y: auto; max-width: 530px; max-height: calc(100% - 100px); }
#imgModal .modal-layer::-webkit-scrollbar{ width: 3px; }
#imgModal .modal-layer::-webkit-scrollbar-thumb { border-radius: 3px; background-color: #AAAAAA; }
#imgModal .img-box img { width: 100%; }
#imgModal .img-box.bg { display: flex; justify-content: center; align-items: center; max-width: 530px; aspect-ratio: 0.72/1; background-color: #F5F5F5; }
#imgModal .img-box.bg img { width: auto; }

@media screen and (max-width:1660px) {
    .header__inner { width: calc(100% - 60px); }
    #allMenu { right: 30px; transform: translateX(calc(100% + 30px));}
    .privacy > dl > dd .pc-br { display: none; }
}
@media screen and (max-width:1400px) {
    .gnb .gnb__item > a { font-size: 18px; padding: 0 24px; }
    .gnb .gnb__item > a.font-ox { font-size: 20px; }
    .gnb .lnb__item > a { font-size: 16px; }
    .gnb .lnb__item > a.font-ox { font-size: 16px; }

    .footer .logo { width: 200px; }
    .footer .left { column-gap: 60px; }
    .f-menu__list a { font-size: 16px; }
    .footer .right .copyright { font-size: 16px; }
}
@media screen and (max-width:1200px) {
    #allMenu { right: 0;}
    .gnb { display: none; }

    .footer { height: auto; padding: 40px 0; }
    .footer .left { flex-direction: column; align-items: flex-start; row-gap: 40px; }
    .footer .right { flex-direction: column-reverse; row-gap: 30px; }

    .privacy .box h3 { font-size: 30px; } 
    .privacy { font-size: 16px; }
    .privacy .box p { font-size: 16px; }
    .privacy .box dt { font-size: 18px; }
    .privacy .box dd, .privacy .box dd li { font-size: 16px; } 
}
@media (min-width:1025px) and (max-height:800px) {
    #allMenu { height: calc(100vh - var(--header-H));}
}
@media screen and (max-width:1024px) {
    :root {
        --header-H: 60px;
    }
    .btn-box-03 { padding: 0 24px; height: 50px; border-width: 2px; font-size: 16px; }
    .header.scroll { transform: translateY(0); }
    .header .logo { width: 120px; }
    .btn-lang__box { width: 40px; }
    .btn-lang__box .btn-lang { background-size: 20px; }
    #allMenu { width: 100%; max-width: 500px; height: calc(100vh - var(--header-H));}
    #allMenu .menu__inner { padding: 50px 30px; }
    #allMenu .gnb__list { width: 100%; } 
    #allMenu .gnb__item { padding-bottom: 10px; }
    #allMenu .gnb__item > a { font-size: 32px; }
    #allMenu .gnb__item > a::before { left: -24px; font-size: 14px; }
    #allMenu .lnb__item > a { font-size: 16px; }
    .btn-mo-menu { width: 24px; height: 24px; }
    .btn-mo-menu > span { width: 24px; height: 2px; }
    .btn-mo-menu > span:nth-child(1) { transform: translateX(-50%) translateY(-8px); }
    .btn-mo-menu > span:nth-child(3) { transform: translateX(-50%) translateY(8px); }

    .footer .btn-top { right: 20px; top: -70px; width: 50px; height: 50px; font-size: 14px; }

    .privacy { font-size: 14px; }
    .privacy > dl { margin-top: 30px; }
    .privacy > dl > dt { font-size: 18px; }
    .privacy ol > li { margin-left: 16px; }
    .privacy .box h3 { font-size: 24px; }
    .privacy .box h3 + p, .privacy > dl > dd { margin-top: 10px; }
    .privacy .box p { font-size: 14px; }
    .privacy .box + dl{ margin-top: 40px; }
    .privacy .box dl { margin-top: 20px; }
    .privacy .box dt { font-size: 16px; }
    .privacy .box dd { margin-top: 10px; }
    .privacy .box dd, .privacy .box dd li { font-size: 14px; }
    .privacy ol > li > ul > li { margin-left: 4px; padding-left: 8px; }
    .privacy .version { margin-top: 30px; font-size: 16px; }

    @supports (height: 100dvh) {
        #allMenu { height: calc(100dvh - var(--header-H));}
    }
    
}

@media screen and (max-width:768px) {
    .footer__inner { flex-direction: column; }
    .footer .left { row-gap: 40px; align-items: center; }
    .footer .right { margin-top: 20px; row-gap: 20px; }
    .f-site .btn-f-site { width: 200px; height: 40px; font-size: 16px; }
    .f-menu__list { column-gap: 20px; }

    .mo-br { display: inline;}

    .btn-bracket, .btn-bracket.size-s { width: 180px; height: 47px; font-size: 16px; }
    .btn-bracket::before,.btn-bracket::after { width: 20px; height: calc(100% - 8px); border-width: 4px; }
    .btn-bracket:hover::before { transform: translateX(-20px); }
    .btn-bracket:hover::after { transform: translateX(20px); }

    #productModal .modal-layer { max-height: 540px; }
    #productModal .modal__content { padding: 20px 10px; }
}