/*공통*/

:root {
    --headerH : 80px;
    --headerWrap : calc(var(--headerH) + var(--gap-24));
    --snbH : 70px;
    --logoW : 182px;
    --logoH : 25px;
    --footerLogoW : 255px;
    --footerLogoH : 34px;
}
@media screen and (max-width: 768px) {
    :root {
        --headerH : 70px;
        --logoW : 146px;
        --logoH : 20px;
        --footerLogoW : 225px;
        --footerLogoH : 30px;
    }
}
@media screen and (max-width: 480px) {
    :root {
        --headerH : 60px;
        --logoW : 131px;
        --logoH : 18px;
        --footerLogoW : 195px;
        --footerLogoH : 26px;
    }
}

html.hide,
body.hide {height:var(--nvh); overflow:hidden !important; touch-action:none;}

body {width:100%;}

.scroll-disable {height:var(--nvh); overflow:hidden !important; touch-action:none;}


#wrap {width:100%; min-width:320px; min-height:var(--nvh); overflow:hidden; position:relative; background:var(--begie);}
#wrap.visible {overflow:visible !important;}

header {width:90%; min-width:250px; max-width:var(--max-w); height:var(--headerH); background:var(--white); display:flex; align-items:center; position:fixed; left:50%; top:var(--gap-24); transform:translateX(-50%); padding:0 var(--gap-40); box-sizing:border-box; z-index:100;}
header > .wrap {width:100%; display:flex; align-items:center; justify-content:space-between;}
header .logo {width:var(--logoW); height:var(--logoH); font-size:0; display:block; background:url(/img/com/logo.svg) center no-repeat; background-size:cover;}
header .rt-box {display:flex; align-items:center; gap:var(--gap-32);}
header .language .language-wrap {position:relative; display:flex; padding-left:28px; align-items:center;}
header .language .language-wrap:before {content:""; width:28px; height:28px; background:url(/img/com/icon_globe.svg) center no-repeat; background-size:cover; position:absolute; left:0; top:50%; transform:translateY(-50%);}
header .language .language-wrap a {font-size:var(--font-18); line-height:100%; padding:0 10px; position:relative; font-weight:700;}
header .language .language-wrap a:before {content:""; width:1px; height:10px; background:var(--gray-c); position:absolute; right:0; top:50%; transform:translateY(-50%);}
header .language .language-wrap a:last-child:before {display:none;}
header .language .language-wrap a.on,
header .language .language-wrap a:hover {color:var(--key-color);}
header .gnb-wrap .gnb-box {display:flex; align-items:center; justify-content:center;}
header .gnb-wrap .gnb-box .gnb {position:relative;}
header .gnb-wrap .gnb-box .gnb .gnb-link {height:var(--headerH); display:flex; align-items:center; justify-content:center; font-size:var(--font-18); font-weight:700; padding:0 var(--gap-24); transition:color 0.2s ease-in-out;}
header .gnb-wrap .gnb-box .gnb:hover .gnb-link {color:var(--key-color);}
header .gnb-wrap .snb-wrap {width:fit-content; height:calc(var(--snbH) + var(--gap-24)); position:absolute; left:50%; top:100%; transform:translateX(-50%); display:none; z-index:10;}
header .gnb-wrap .snb-wrap.active {display:flex; align-items:flex-end;}
header .gnb-wrap .snb-wrap .snb-inner {width:100%; height:var(--snbH); display:flex; align-items:center;}
header .gnb-wrap .snb-wrap .snb-box {width:fit-content; display:flex; align-items:center; justify-content:center; gap:var(--gap-50); padding:0 var(--gap-24);}
header .gnb-wrap .snb-wrap .snb-box .snb .snb-link {white-space:nowrap; font-size:var(--font-16); font-weight:600; color:var(--white); background-image:linear-gradient(var(--white), var(--white)); background-position:left bottom; background-repeat:no-repeat; background-size:0% 1px; transition:background-size 0.3s linear;}
header .gnb-wrap .snb-wrap .snb-box .snb:hover .snb-link {background-size:100% 1px;}
header .btn-sitemap {width:30px; height:30px; background-color:var(--gray-3); font-size:0; position:relative; cursor:pointer; display:none;}
header .btn-sitemap:before {content:''; width:100%; height:100%; background:url(/img/com/icon_menu.svg) center no-repeat; background-size:cover; position:absolute; left:0; top:0;}
header .btn-sitemap.active:before {background-image:url(/img/com/icon_menu_close.svg);}


header .snb-bg {width:100%; height:var(--snbH); background:var(--gray-3); position:absolute; left:0; top:calc(100% + var(--gap-24)); z-index:1; opacity:0; visibility:hidden; transition:0.3s ease-in-out;}
header .snb-bg.active {opacity:1; visibility:visible;}

@media screen and (max-width: 1440px) {
    header .gnb-wrap .gnb-box .gnb .gnb-link {padding:0 18px;}
}

@media screen and (max-width: 1320px) {
    header .gnb-wrap .gnb-box .gnb .gnb-link {font-size:calc(var(--font-18) * 0.9);}
}

@media screen and (max-width: 1280px) {
    header .gnb-wrap {display:none;}
    header .btn-sitemap {display:block;}
    header .language .language-wrap a.on {display:none}
    header .rt-box {gap:var(--gap-16);}
}

@media screen and (max-width: 648px) {
    header .rt-box {gap:var(--gap-10);}
    header .language .language-wrap {padding-left:22px;}
    header .language .language-wrap:before {width:22px; height:22px;}
    header .language .language-wrap a {padding:0 5px;}
}


header .mo-nav {width:100%; height:0; background:var(--white); position:fixed; left:50%; top:var(--headerH); transform:translateX(-50%); transition:0.5s ease-in-out;}
header .mo-nav.active {height:calc(var(--nvh) - var(--headerH) - (var(--gap-24) * 2)); visibility:visible; opacity:1;}
header .mo-nav .nav-inner {height:100%; overflow-y:auto;}
header .mo-nav .nav-inner::-webkit-scrollbar {width:5px; background:transparent;}
header .mo-nav .nav-wrap {width:100%; min-height:100%; display:flex; flex-direction:column; justify-content:space-between; gap:var(--gap-24); padding-bottom:var(--gap-40);}
header .mo-nav .mo-gnb-wrap {width:100%; border-top:1px solid var(--line-color-f4);}
header .mo-nav .mo-gnb-wrap .mo-gnb-box {width:100%;}
header .mo-nav .mo-gnb-wrap .mo-gnb-box .mo-gnb {width:100%; position:relative;} 
header .mo-nav .mo-gnb-wrap .mo-gnb-box .mo-gnb .btn-mo-gnb {width:100%; height:60px; display:flex; align-items:center; justify-content:flex-start; padding:0 var(--gap-40); font-size:var(--font-20); font-weight:700; position:relative; border-bottom:1px solid var(--line-color-f4);}
header .mo-nav .mo-gnb-wrap .mo-gnb-box .mo-gnb .btn-mo-gnb:after {content:""; width:14px; height:100%; background:url(/img/com/arrow_mo_nav.svg) center no-repeat; background-size:100% auto; position:absolute; right:var(--gap-40); top:0; transition:transform 0.3s ease;}
header .mo-nav .mo-gnb-wrap .mo-gnb-box .mo-gnb .btn-mo-gnb.active:after {transform:scaleY(-1);}
header .mo-nav .mo-gnb-wrap .mo-snb-wrap {padding:10px 0; width:100%; display:none;}
header .mo-nav .mo-gnb-wrap .mo-snb-wrap .mo-snb-box {width:100%;}
header .mo-nav .mo-gnb-wrap .mo-snb-wrap .mo-snb-box .mo-snb {width:100%; height:40px;}
header .mo-nav .mo-gnb-wrap .mo-snb-wrap .mo-snb-box .mo-snb a {width:100%; height:100%; display:flex; align-items:center; justify-content:flex-start; padding:0 calc(var(--gap-40) + (var(--gap-40) * 0.3)); font-size:var(--font-18); font-weight:600;}

@media screen and (max-width: 480px) {
    header .mo-nav .mo-gnb-wrap .mo-gnb-box .mo-gnb .btn-mo-gnb {height:52px;}
    header .mo-nav .mo-gnb-wrap .mo-gnb-box .mo-gnb .btn-mo-gnb:after {width:12px;}
    header .mo-nav .mo-gnb-wrap .mo-snb-wrap .mo-snb-box .mo-snb {height:36px;}
}

header .mo-nav .mo-nav-menu {padding:0 var(--gap-40);}
header .mo-nav .mo-nav-menu .family-site {width:100%;}
header .mo-nav .mo-nav-menu .family-site ul li {margin-top:var(--gap-10);}
header .mo-nav .mo-nav-menu .family-site ul li:first-child {margin-top:0;}
header .mo-nav .mo-nav-menu .family-site ul li a {width:fit-content; height:35px; padding:0 30px 0 10px; background:var(--gray-3); display:flex; align-items:center; font-size:var(--font-18); color:var(--white); font-weight:600; position:relative;}
header .mo-nav .mo-nav-menu .family-site ul li a span {display:block; width:10px; height:10px; position:absolute; right:10px; top:50%; transform:translateY(-50%);}
header .mo-nav .mo-nav-menu .family-site ul li a span:after {content:''; width:100%; height:100%; background:url(/img/com/icon_dir_up.svg) center no-repeat; background-size:cover; position:absolute; left:0; top:0; transform:translate(0,0); opacity:1; transform-origin:right top;}
header .mo-nav .mo-nav-menu .family-site ul li a:hover span:after {animation:dirUpAni 0.5s ease-in-out;}

header .mo-nav .mo-nav-menu .mo-quick {width:100%; margin-top:var(--gap-32); display:flex; align-items:center; gap:var(--gap-10); flex-wrap:wrap;}
header .mo-nav .mo-nav-menu .mo-quick a {width:50px; height:50px; display:flex; align-items:center; justify-content:center; background:var(--white); border:1px solid var(--line-color-e8);}
header .mo-nav .mo-nav-menu .mo-quick a i {display:block; width:100%;}
header .mo-nav .mo-nav-menu .mo-quick a i img {display:block; max-width:100%;}
header .mo-nav .mo-nav-menu .mo-quick a p {display:none;}
header .mo-nav .mo-nav-menu .mo-quick a.kakao {background:var(--key-color); border-color:var(--key-color);}


@keyframes dirUpAni {
    0% {opacity:1; transform:translate(0, 0);}
    35% {opacity:0; transform:translate(50%, -50%);}
    70% {opacity:0; transform:translate(-50%, 50%);}
    100% {opacity:1; transform:translate(0, 0);}
}

@media screen and (max-width: 1024px) {
    header .mo-nav .mo-nav-menu .family-site ul li a:hover span:after {animation:none;}
}

@media screen and (max-width: 480px) {
    header .mo-nav .mo-nav-menu .family-site ul li a {height:32px;}
    header .mo-nav .mo-nav-menu .mo-quick a {width:42px; height:42px;}
}



footer {width:100%; background:var(--gray-3); padding:calc(var(--gap-50) * 2) 0; color:var(--gray-e); position:relative;}
footer > .wrap {width:90%; max-width:var(--max-w); margin:0 auto;}
footer .footer-conts {width:100%; display:flex; justify-content:space-between;}
footer .footer-conts .lf-box {width:calc(100% - 450px);}
footer .footer-conts .rt-box {width:450px;}
footer .footer-conts.top {padding-bottom:calc(var(--gap-80) * 2); border-bottom:1px solid #444; margin-bottom:var(--gap-60);}

footer .footer-conts .logo {width:var(--footerLogoW); height:var(--footerLogoH); background:url(/img/com/logo_w.svg) center no-repeat; background-size:cover; font-size:0;}
footer .footer-conts .info-wrap {width:100%; margin-top:var(--gap-40);}
footer .footer-conts .company-info {display:flex; flex-direction:column;}
footer .footer-conts .company-info span {font-size:var(--font-18); line-height:160%;}
footer .footer-conts .contact-info {--contact-info-gap:5px; --contact-info-head:70px; margin-top:var(--gap-32);}
footer .footer-conts .contact-info ul li {display:flex; gap:var(--contact-info-gap);}
footer .footer-conts .contact-info ul li .head {width:var(--contact-info-head);}
footer .footer-conts .contact-info ul li .conts {width:clac(100% - var(--contact-info-gap) - var(--contact-info-head)); display:flex; align-items:center; gap:0 var(--gap-24); flex-wrap:wrap;}
footer .footer-conts .contact-info ul li .conts span {position:relative;}
footer .footer-conts .contact-info ul li .conts span:after {content:""; width:1px; height:8px; background:#666; position:absolute; right:calc((var(--gap-24) / 2) * -1); top:50%; transform:translateY(-50%);}
footer .footer-conts .contact-info ul li .conts span:last-child:after {display:none;}
footer .footer-conts .contact-us {width:100%;}
footer .footer-conts .contact-us .title {width:100%; font-size:var(--font-20); font-weight:800; margin-bottom:var(--gap-32);}
footer .footer-conts .family-site {margin-top:var(--gap-50);}
footer .footer-conts .family-site ul li {width:100%; margin-top:var(--gap-16);}
footer .footer-conts .family-site ul li:first-child {margin-top:0;}
footer .footer-conts .fnb-wrap {display:flex; align-items:center; gap:var(--gap-50);}
footer .footer-conts .fnb-wrap a {font-size:var(--font-18); font-weight:800; color:var(--gray-c);}
footer .footer-conts .fnb-wrap a:first-child {display:none;}
footer .footer-conts .copyright {font-size:var(--font-16); font-weight:600; color:#aaa; letter-spacing:0;}

@media screen and (max-width: 1024px) {
    footer .footer-conts {flex-direction:column;}
    footer .footer-conts.top {gap:var(--gap-60); margin-bottom:var(--gap-32); padding-bottom:var(--gap-60);}
    footer .footer-conts.bottom {gap:var(--gap-24);}
    footer .footer-conts .lf-box,
    footer .footer-conts .rt-box {width:100%;}
    footer .footer-conts .info-wrap {background:var(--white); padding:var(--gap-24); padding-right:calc(var(--gap-16) + 20px); position:absolute; left:50%; width:90%; margin-top:0; z-index:50; transform:translateX(-50%); color:var(--gray-3); letter-spacing:-1px; display:none;}
    footer .footer-conts .info-wrap .btn-close {width:20px; height:20px; background:url(/img/com/icon_close_black.svg) center no-repeat; background-size:cover; position:absolute; right:var(--gap-24); top:var(--gap-24); cursor:pointer; font-size:0;}
    footer .footer-conts .info-wrap.active {display:block;}
    footer .footer-conts .fnb-wrap a:first-child {display:block;}
}

@media screen and (max-width: 768px) {
    footer .footer-conts .contact-info {--contact-info-head:65px;}
    footer .footer-conts .company-info span:last-child {padding-left:calc((var(--font-18) * 2) + 3px); text-indent:calc(((var(--font-18) * 2) + 3px) * -1);}
}

@media screen and (max-width: 480px) {
    footer .footer-conts .contact-us .title {font-size:calc(var(--font-20) * 0.95);}
    footer .footer-conts .contact-info {--contact-info-head:45px;}
    footer .footer-conts .fnb-wrap {gap:var(--gap-32);}
}




.button {display:flex; align-items:center;}

.com-button {width:fit-content; background:var(--white); padding:0 var(--gap-24); font-weight:800; color:var(--white); position:relative; overflow:hidden;}
.com-button p {position:relative; z-index:10;}
.com-button:after {content:""; width:100%; height:100%; background:var(--gray-3); position:absolute; left:0; top:0; z-index:0; transform-origin:left; transition:transform 0.3s;}
.com-button:hover {color:var(--gray-3);}
.com-button:hover:after {transform:scaleX(0); transform-origin:right;}
.com-button.basic {min-width:250px; height:60px; font-size:var(--font-16);}
.com-button.arrow span {display:block; position:absolute; top:50%; transform:translateY(-50%); background:var(--key-color); z-index:10;}
.com-button.arrow span:after {content:""; width:100%; height:100%; background:url(/img/com/arrow_right_black.svg) center no-repeat; background-size:46% auto; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.com-button.basic.arrow {padding-right:calc(var(--gap-24) + 40px);}
.com-button.basic.arrow span {width:30px; height:30px; right:var(--gap-24);}

.com-button.white {background:var(--gray-3); color:var(--gray-3);}
.com-button.white:after {background:var(--white);}
.com-button.white:hover {color:var(--white);} 


@media screen and (max-width: 768px) {
    .com-button.basic {min-width:220px; height:52px;}
    .com-button.basic.arrow span {width:26px; height:26px;}
}

@media screen and (max-width: 480px) {
    .com-button.basic {min-width:160px; height:46px;}
    .com-button.basic.arrow span {width:23px; height:23px;}
}



.btn-dir {--btn-dir-w:250px; --btn-dir-h:60px; --btn-dir-symbol-w:30px; --btn-dir-symbol-h:30px; min-width:var(--btn-dir-w); width:fit-content; height:var(--btn-dir-h); background:#222; padding:0 var(--gap-24); font-size:var(--font-16); font-weight:800; color:var(--white); position:relative;}
.btn-dir:after {content:""; width:var(--btn-dir-symbol-w); height:var(--btn-dir-symbol-h); background:url(/img/com/icon_dir.svg) center no-repeat; background-size:50% auto; background-color:var(--key-color); position:absolute; right:var(--gap-24); top:50%; transform:translateY(-50%);}

@media screen and (max-width: 1024px) {
    .btn-dir {--btn-dir-w:220px; --btn-dir-h:54px; --btn-dir-symbol-w:24px; --btn-dir-symbol-h:24px;}
}

@media screen and (max-width: 768px) {
    .btn-dir {--btn-dir-w:200px; --btn-dir-h:50px; --btn-dir-symbol-w:20px; --btn-dir-symbol-h:20px;}
}

@media screen and (max-width: 480px) {
    .btn-dir {--btn-dir-w:180px; --btn-dir-h:46px; --btn-dir-symbol-w:18px; --btn-dir-symbol-h:18px;}
}


.btn-dir-up {width:fit-content; height:30px; font-size:var(--font-18); font-weight:600; color:var(--white); position:relative; padding-right:20px; display:flex; align-items:center;}
.btn-dir-up span {width:12px; height:12px; display:block; position:absolute; right:0; top:50%; transform:translateY(-50%);}
.btn-dir-up span:after {content:""; width:100%; height:100%; background:url(/img/com/icon_dir_up.svg) center no-repeat; background-size:cover; position:absolute; left:0; top:0; transform-origin:right top;}
.btn-dir-up:hover span:after {animation:dirUpAni 0.5s ease-in-out;}

@media screen and (max-width: 1024px) {
    .btn-dir-up:hover span:after {animation:none;}
}

@media screen and (max-width: 768px) {
    .btn-dir-up {padding-right:16px;}
    .btn-dir-up span {width:10px; height:10px;}
}


.btn-basic-arrow {width:50px; height:50px; background:var(--gray-3); font-size:0; cursor:pointer; overflow:hidden;}
.btn-basic-arrow span {display:block; width:100%; height:100%; position:relative;}
.btn-basic-arrow span:before,
.btn-basic-arrow span:after {content:""; width:24px; height:24px; background-position:center; background-repeat:no-repeat; background-size:cover; position:absolute; left:calc(50% - 12px); top:calc(50% - 12px); will-change:transform;}
.btn-basic-arrow.lf span:after {transform:translateX(calc(-100% - 12px));}
.btn-basic-arrow.lf span:before,
.btn-basic-arrow.lf span:after {background-image:url(/img/com/icon_arrow_right_white.svg);}
.btn-basic-arrow.rt span:after {transform:translateX(calc(100% + 12px));}
.btn-basic-arrow.rt span:before,
.btn-basic-arrow.rt span:after {background-image:url(/img/com/icon_arrow_left_white.svg);}

.btn-basic-arrow.lf:hover span:before {transform:translateX(calc(100% + 12px)); transition:transform 0.2s ease-in-out;}
.btn-basic-arrow.lf:hover span:after {transform:translateX(0%); transition:transform 0.2s 0.2s ease-in-out;}
.btn-basic-arrow.rt:hover span:before {transform:translateX(calc(-100% - 12px)); transition:transform 0.2s ease-in-out;}
.btn-basic-arrow.rt:hover span:after {transform:translateX(0%); transition:transform 0.2s 0.2s ease-in-out;}

@media screen and (max-width: 480px) {
    .btn-basic-arrow {width:40px; height:40px;}
    .btn-basic-arrow span:before,
    .btn-basic-arrow span:after {width:20px; height:20px; left:calc(50% - 10px); top:calc(50% - 10px);}
    .btn-basic-arrow.lf span:after {transform:translateX(calc(-100% - 10px));}
    .btn-basic-arrow.rt span:after {transform:translateX(calc(100% + 10px));}
    .btn-basic-arrow.lf:hover span:before {transform:translateX(calc(100% + 10px));}
    .btn-basic-arrow.rt:hover span:before {transform:translateX(calc(-100% - 10px));}
}


.button.gradient {color:var(--white); background-color:var(--gray-3); transition:0.3s ease-in-out;}
.button.gradient.basic {width:fit-content; min-width:130px; height:60px; font-size:var(--font-16); font-weight:800; padding:0 var(--gap-16); text-align:center; justify-content:center;}

.button.gradient:hover {color:var(--gray-3); background-color:var(--key-color);}

@media screen and (max-width: 768px) {
    .button.gradient.basic {min-width:115px; height:52px;}
}

@media screen and (max-width: 480px) {
    .button.gradient.basic {min-width:100px; height:46px;}
}






.dim {width:100%; height:var(--nvh); background:rgba(0,0,0,0.5); position:fixed; left:0; top:0; z-index:99; visibility:hidden; opacity:0; transition:0.3s ease-in-out;}
.dim.active {visibility:visible; opacity:1;}
.modal-dim {width:100%; height:var(--nvh); background:rgba(0,0,0,0.5); position:fixed; left:0; top:0; z-index:1999; visibility:hidden; opacity:0; transition:0.3s ease-in-out;}
.modal-dim.active {visibility:visible; opacity:1;}


.floating {position:fixed; right:var(--gap-40); bottom:var(--gap-40); z-index:98;}
.floating > * {margin-top:var(--gap-10); display:block;}
.floating > *:first-child {margin-top:0;}
.floating .quick a {display:flex; align-items:center; justify-content:center; width:60px; height:60px; position:relative; margin-top:var(--gap-10); background:var(--white); border:1px solid var(--line-color-e8); box-sizing:border-box;}
.floating .quick a:first-child {margin-top:0;}
.floating .quick a i {display:block; width:100%; height:100%; position:relative; transition:0.3s ease-in-out;}
.floating .quick a i img {display:block; width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); object-fit:cover;}
.floating .quick a p {width:60px; height:60px; position:absolute; right:-1px; top:-1px; visibility:hidden; opacity:0; transform-origin:right center; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; text-align:center; transition:all 0.3s ease-in-out; background:var(--white); border:1px solid var(--line-color-e8); font-size:var(--font-18); font-weight:700; padding:0 10px; box-sizing:border-box;}
.floating .quick a p span {max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.floating .quick a:hover i {visibility:hidden; opacity:0;}
.floating .quick a:hover p {width:150px; visibility:visible; opacity:1;}
.floating .quick a.kakao,
.floating .quick a.kakao p {background:#FEBF31; border-color:#FEBF31;}
.floating button {width:60px; height:60px; box-sizing:border-box; position:relative; cursor:pointer; background:var(--white); border:1px solid var(--line-color-e8);}
.floating button:after {content:""; width:100%; height:100%; background-repeat:no-repeat; background-size:cover; background-position:center; position:absolute; left:0; top:0;}
.floating button.btn-quick {display:none;}
.floating button.btn-quick:after {background-image:url(/img/com/icon_quick_plus.svg);}
.floating button.btn-quick.active:after {background-image:url(/img/com/icon_quick_close.svg);}
.floating button.btn-top {background:#111; border-color:#111;}
.floating button.btn-top:after {background-image:url(/img/com/icon_top.svg);}

@media screen and (max-width: 1024px) {
    .floating .quick {height:0; visibility:hidden; opacity:0; transform-origin:left bottom; transition:all 0.3s ease-in-out;}
    .floating .quick.active {height:100%; visibility:visible; opacity:1;}
    .floating .quick a,
    .floating .quick a p,
    .floating button {width:50px; height:50px;}
    .floating .quick a:hover i  {visibility:visible; opacity:1;}
    .floating .quick a:hover p {width:0; visibility:hidden; opacity:0;}
    .floating button.btn-quick {display:block;}
}

@media screen and (max-width: 648px) {
    .floating .quick a,
    .floating .quick a p,
    .floating button {width:42px; height:42px;}
}

@media screen and (max-width: 480px) {
    .floating .quick a,
    .floating .quick a p,
    .floating button {width:36px; height:36px;}
}



.select-box {position:relative;}
.select-box select {visibility:hidden; opacity:0; height:0; width:0; position:absolute; left:0; top:0;}
.select-box .selected-box {width:100%; height:60px; display:flex; align-items:center; background:var(--light-yellow); padding:0 var(--gap-24); font-size:var(--font-18); font-weight:700; cursor:pointer;}
.select-box .selected-box p {width:calc(100% - 27px); padding-right:var(--gap-8);}
.select-box .selected-box .arrow {width:27px; height:27px; background:var(--key-color); position:relative;}
.select-box .selected-box .arrow:after {content:""; width:100%; height:100%; background:url(/img/com/arrow_down.svg) center no-repeat; background-size:50% auto; position:absolute; left:0; top:0; transition:transform 0.3s ease-in-out;}
.select-box .option-list-wrap {width:100%; position:absolute; left:0; top:calc(100% + var(--gap-10)); background:var(--light-yellow); padding:var(--gap-16) var(--gap-24); z-index:50; display:none;}
.select-box .option-list-wrap .option-list {width:100%;}
.select-box .option-list-wrap .option-list .option {width:100%; margin-top:var(--gap-10);}
.select-box .option-list-wrap .option-list .option:first-child {margin-top:0;}
.select-box .option-list-wrap .option-list .option .select-option {width:100%; font-size:var(--font-18); font-weight:700; text-align:left;}
.select-box .option-list-wrap .option-list .option .select-option:hover {color:var(--key-color);}

.select-box.active .selected-box .arrow:after {transform:scaleY(-1);}

@media screen and (max-width: 768px) {
    .select-box .selected-box {height:56px;}
}

@media screen and (max-width: 480px) {
    .select-box .selected-box {height:42px;}

    .select-box .selected-box p {width:calc(100% - 20px);}
    .select-box .selected-box .arrow {width:20px; height:20px;}
}


.check-box {position:relative; overflow:hidden;}
.check-box input[type='checkbox'],
.check-box input[type='radio'] {width:0; height:0; position:absolute; left:0; top:0; visibility:hidden; opacity:0;}
.check-box label {display:block; width:100%; min-height:30px; position:relative; padding-left:calc(var(--gap-16) + 30px); display:flex; align-items:center; font-size:var(--font-18); font-weight:700; cursor:pointer;}
.check-box label p {width:100%;}
.check-box label:before {content:""; width:30px; height:30px; background:var(--light-yellow); position:absolute; left:0; top:0;}
.check-box label:after {content:""; width:30px; height:30px; background:url(/img/conts/icon_check.svg) center no-repeat; background-size:53% auto; position:absolute; left:0; top:0; display:none;}
.check-box input[type='checkbox']:checked + label:after,
.check-box input[type='radio']:checked + label:after {display:block;}

@media screen and (max-width: 480px) {
    .check-box label {min-height:25px;}
    .check-box label:before,
    .check-box label:after {width:25px; height:25px;}
}












@media screen and (max-width: 1024px) {}
@media screen and (max-width: 768px) {}
@media screen and (max-width: 648px) {}
@media screen and (max-width: 480px) {}
