*{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* 푸터 */
footer {background: #1c1c1c; padding: 60px 0;}
footer .nav a {color: #fff; padding: 0.375rem 1rem; border: 1px solid rgba(255,255,255,0.5); border-radius: 8px; margin-right: .7rem; display: inline-block;}

footer p span {color: var(--pointcolor); padding-right: 0.25rem; display: inline-block;}
footer .line {width: 100%; height: 1px; background: var(--gray); margin: 1.125rem auto;}
footer p.color-gray {letter-spacing: 0;}

@media(max-width:1440px) {
    footer .box.width45 {width: 40%;}
    footer .box.width55 {width: 60%;}
}

@media(max-width:1240px) {
    footer .container > .flex {flex-direction: column;}
    footer .box.width45 {width: 100%;}
    footer .box.width55 {width: 100%; margin-top: 3.125rem;}
}

@media(max-width:768px) {
    footer .nav {margin-top: 1rem;}
    footer .nav a {font-size: 1.75rem; padding: 0.75rem 1.5rem; margin-top: 1.5rem; margin-right: 1.5rem;}
    footer .font-16 {font-size: 1.375rem;}
    footer p.color-gray {font-size: 1rem;}
}

@media(max-width:500px) {
    footer .nav {margin-top: 1.5rem;}
    footer .nav a {font-size: 1.5rem;  margin-top: 1rem; margin-right: 1rem;}
}

/* 해더 */
#header {position: fixed; left: 0; top: 0; z-index: 10; padding-top: 1.5rem; background: #101010; width: 100%; border-bottom: 1px solid rgba(255,255,255,0.5)}
#header .wrap {max-width: 1800px; width: 100%; margin: auto;}
#header a.logo {width: fit-content; margin: auto; display: block;}
#header a.logo img {width: 14.5rem;}

#header .head-bar {display: flex; align-items: center;}

#header .gnb {display: flex; align-items: center; gap: 5rem; width: 67%; justify-content: flex-end; padding: 1.5rem 0;}
#header .gnb > li {position: relative;}
#header .gnb span {color: #fff; font-size: 1.125rem; cursor: pointer;}

#header .lnb {position: absolute; left: 50%; top: 2.5rem; transform: translateX(-50%); background: #fff; width: 11rem; padding: 1.25rem 0; border-radius: 8px; border: 1px solid var(--pointcolor); opacity: 0; visibility: hidden; transition: all 0.3s ease;}
#header .gnb > li:hover .lnb {opacity: 1; visibility: visible;}

#header .lnb li {font-size: 1rem; font-weight: 500; text-align: center; padding: 0.4rem 0;}
#header .lnb li:hover a {color: var(--pointcolor); font-weight: 700;}

#header .snb {width: 33%; display: flex; align-items: center; justify-content: flex-end; gap: 5rem;}
#header .login a,
#header .lng a {color: #fff; display: flex; align-items: center; gap: .8rem;}

#header .snb .login {display: flex; align-items: center; gap: 1.25rem;}
#header .snb .login .line {width: 1px; height: 1.125rem; background: rgba(255,255,255,0.5);}

#header .mo-bar .side {display: none;}

@media(max-width:1880px) {
    #header .wrap {width: 95%;}
}

@media(max-width:1440px) {
    #header .snb {gap: 3.5rem;}
}

@media(max-width:990px) {
    #header .gnb {gap: 3.5rem;}
    #header .snb {gap: 2.5rem;}
    #header .snb img {transform: scale(0.8);}
}

@media(max-width:768px) {
    #header {padding: 2rem 0;}
    #header.on {background: #fff; border-bottom: 1px solid rgba(128,128,128,0.5);}
    #header ::-webkit-scrollbar {display: none;}
    #header .wrap {width: 93.5%;}
    #header .mo-bar {display: flex; justify-content: space-between; width: 100%;}
    #header .mo-bar .side {display: flex; align-items: center; gap: 5rem;}
    
    #header .mo-bar .lng {opacity: 0; visibility: hidden;}
    #header.on .mo-bar .lng {opacity: 1; visibility: visible;}
    #header .snb .lng {display: none;}
    
    #header .lng a {font-size: 1.375rem; color: #101010; font-weight: 500;}
    /* #header .lng img {filter: grayscale(100%) brightness(0);} */

    #header a.logo {margin: 0;}
    #header a.logo img {width: 263px;}
    #header.on a.logo img {filter: grayscale(100%) brightness(0);}
    
    #header .menu img.off {display: none;}

    #header .head-bar {position: absolute; left: 100%; top: 74px; width: 100%; height: calc(100svh - 74px); background: #fff; padding: 5rem 0; display: block; align-items: normal; overflow-y: scroll; opacity: 0; visibility: hidden; transition: left 0.5s;}
    #header .head-bar.on {left: 0; opacity: 1; visibility: visible;}
    #header .gnb {width: 100%; display: block; align-items: normal; padding: 0 10%; border-bottom: 1px solid rgba(128,128,128,0.25);}
    #header .gnb span {color: #101010; font-size: 3rem; font-weight: 500; margin-bottom: 3.75rem; display: block;}

    #header .lnb {position: initial; transform: none; margin-bottom: 3.75rem; opacity: 1; visibility: visible; transition: none; width: 100%; border-radius: 0; border-left: 0; border-right: 0; background: var(--subcolor); padding: 1.5rem 5%; display: none; border-bottom: 2px solid #dedede; border-top: 2px solid var(--pointcolor); }
    #header .lnb li {font-size: 2.5rem; text-align: left; padding: 1.5rem 0;}

    #header .snb {width: 100%; justify-content: flex-start; display: block; padding: 5rem 10%; }
    #header .snb .login {gap: 2.5rem;}
    #header .snb .login a {color: #999999; font-size: 2rem; font-weight: 500;}
    #header .snb .login img {width: 2.5rem;}
    #header .snb .login .line {background: #999999; height: 2rem; opacity: 0.5;}
}

@media(max-width:580px) {
    #header .mo-bar .side {gap: 3.5rem;}
}

@media(max-width:500px) {
    #header a.logo img  {width: 200px;}
    #header .menu img {width: 25px;}
    #header .head-bar {top: 66px; height: calc(100svh - 66px);}
    #header .mo-bar .side {gap: 2rem;}

    #header .gnb span {font-size: 2.5rem;}
    #header .lnb li {font-size: 2rem;}
    #header .snb .login a {font-size: 1.5rem;}
    #header .snb .login img {width: 2rem;}
    #header .snb .login .line {height: 1.5rem;}
}

@media(max-width:365px) {
    #header .mo-bar .lng {display: none !important;}
    #header .snb .lng {display: flex !important; margin-bottom: 2.5rem;}
}

/* 퀵메뉴 _ 수가표에서는 해당 페이지에서 수정하기 */
#quick {position: fixed; right: 5%; top: 55%; transform: translateY(-50%); z-index: 8; pointer-events: none;}
#quick a {display: block; margin-bottom: 12px; pointer-events: auto;}
#quick a.tel {background: var(--pointcolor); padding: 8px 25px; border-radius: 100px; background-image: url("/img/main/quick_bg.png"); background-repeat: no-repeat; background-position: right 20px;}
#quick a.tel span {font-size: 13px; color: #101010; font-weight: 700;}
#quick a.tel p {display: flex; align-items: center; gap: 5px; color: #fff; font-size: 14px; font-weight: 700;}
#quick a.list {width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; margin-left: auto;}
#quick a.list.list01 {background: var(--pointcolor);}
#quick a.list.list02 {background: var(--pointcolor);}
#quick a.list.list03 {background: #ffe600;}
#quick a.list.list04 {background: #00c300;}
#quick a.list.top {background: #626262; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 0; margin-bottom: 0;}

@media(max-width:768px) {
    #quick  {top: auto; transform: none; bottom: 7%;}
    #quick .wrap {max-height: 0; overflow: hidden; transition: max-height 0.8s ease;}
    #quick .wrap.open { max-height: 500px;}
    #quick a.list {width: 5.625rem; height: 5.625rem;}
    #quick a.list.menu {background: var(--pointcolor); display: flex !important;}
    #quick a.list.menu img {transition: 0.3s;}
    #quick a.list.menu.active img {transform: rotate(45deg);}
}

/* 빠른상담 */
#counsel {position: fixed; left: 0; bottom: -6.7rem; width: 100%; z-index: 9; transition: 0.45s;}
#counsel.on {bottom: 0;}
#counsel .toggleBtn {display: flex; align-items: center; justify-content: center; gap: 1rem; background: linear-gradient(to right, #f35500 20%, #ff964f 100%); width: fit-content; margin: auto; padding: 1rem 2rem; border-radius: 1rem 1rem 0 0; cursor: pointer; transform: translateY(1px);}
#counsel.on .toggleBtn {background: #f76d1e;}
#counsel .toggleBtn  .arrow {font-feature-settings: "ss18" 1; -webkit-font-feature-settings: "ss18" 1; transition: 0.3s;}
#counsel.on .toggleBtn  .arrow {transform: rotate(180deg);}
#counsel .wrap {background: linear-gradient(to right, #f35500 20%, #ff964f 100%);}
#counsel form {max-width: 1500px; width: 100%; margin: auto; display: flex; padding: 1.5rem 0; gap: 1rem; align-items: flex-end; justify-content: center;}
#counsel form .list {background: #fff; padding: .8rem 2rem; border-radius: 8px; display: flex; align-items: center; width: 100%;}
#counsel form .list.list01 {width: 18rem;}
#counsel form .list.list02 {width: 24rem;}
#counsel form .list.list03 {width: 24rem;}
#counsel form .list label {padding-right: 1.25rem;}
#counsel form .list input,
#counsel form .list select {border: none; font-size: 1rem; width: 100%;}
#counsel form .list input[type=text]:focus, 
#counsel form .list input[type=tel]:focus, 
#counsel form .list select:focus {box-shadow: none; border: none !important;}
/* #counsel form .list input[type=text] {width: 13rem;}
#counsel form .list input[type=tel] {width: 17.5rem;} */
#counsel form button {background: #101010; border-radius: 8px; color: #fff; padding: 1rem 2rem;}
#counsel form .chk_box {font-size: 14px; color: #fff !important;}
#counsel form .selec_chk {position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; outline: 0; z-index: -1; overflow: hidden;}
#counsel form .chk_box label {padding-left: 25px;}
#counsel form .chk_box span.more {cursor: pointer;}

#counsel form .chk_box input[type="checkbox"] + label {color: #fff;}
#counsel form .chk_box input[type="checkbox"] + label span {position: absolute; top: 2px; left: 0; width: 16px; height: 16px; display: block; background: transparent; border: 1px solid #fff; cursor: pointer;}
#counsel form .chk_box input[type="checkbox"]:checked + label span {background: url("/img/main/chk.png") no-repeat 50% 50%;}
#counsel form .chk_box input[type="checkbox"] + label:hover {color: #fff;}

.custom-select {position: relative; display: inline-block; width: 100%;}
.custom-select.open .select {display: none;}
.custom-select.open .select-options {display: block;}

.select-styled {display: inline-block; cursor: pointer; width: 100%; position: relative;}
.select-styled span {display: inline-block; width: 100%;}
.select-styled img {position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: inline-block; }
.custom-select.open .select-styled img {transform: translateY(-50%) scaleY(-1);}
.select-options {position: absolute; z-index: 1; bottom: 3rem; left: 0; display: none; width: 100%; border-radius: 8px 8px 0 0; overflow: hidden; background: #fff; padding: 1.5rem 0 .5rem;}
.select-options li {padding: 0.5rem 15%; cursor: pointer; font-weight: 500;}
.select-options li:hover {background-color: var(--subcolor); color: var(--pointcolor); font-weight: 700;}

/* 모달 */
#modal.counsel {background: #fff; border-radius: 1.875rem; padding: 5rem 3.5rem 2.5rem; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 12; max-width: 43.75rem; width: 100%; transition: opacity 0.45s; opacity: 0; visibility: hidden;}
#modal.counsel.on {opacity: 1; visibility: visible;}
#modal.counsel .close {position: absolute; right: 2.5rem; top: 2.5rem; content: url("/img/main/cancel.png"); width: 22px; height: 22px; cursor: pointer;}
#modal.counsel button {background:#101010; color: #fff; border-radius: 8px; padding: 1rem; width: 8rem; display: flex; justify-content: center; margin: auto;}

@media(max-width:1580px) {
    #counsel form {width: 95%;}
}

@media(max-width:1440px) {
    #counsel form {flex-wrap: wrap;}
    #counsel form .chk_box input[type="checkbox"] + label span {width: 14px; height: 14px; top: 3px;}
    #counsel form .chk_box label {padding-left: 20px;}
}

@media(max-width:1370px) {
    #counsel {bottom: -9.1rem;}
}

@media(max-width:1240px) {
    #counsel {bottom: -13.6rem;}
    #counsel form button {width: 100%;}
    #counsel form .list.list01 {width: 30%;}
    #counsel form .list.list02 {width: calc(35% - 1rem);}
    #counsel form .list.list03 {width: calc(35% - 1rem);}
}

@media(max-width:990px) {
    #counsel {bottom: -14rem;}
}

@media(max-width:768px) {
    #counsel {bottom: -44.1rem;}
    #counsel .font-20 {font-size: 1.750rem;}
    #counsel .toggleBtn {padding: 1.5rem 2.5rem; border-radius: 1.125rem 1.125rem 0 0; font-size: 2.125rem;}
    #counsel .toggleBtn img {width: 2rem;}
    #counsel form {flex-direction: column; align-items: center; width: 90%; gap: .5rem; padding: 4rem 0;}
    #counsel form h3 {margin-bottom: 2rem;}
    #counsel form .list {padding: 1.5rem 2.5rem;}
    #counsel form .list.list01 {width: 100%;}
    #counsel form .list.list02 {width: 100%;}
    #counsel form .list.list03 {width: 100%;}
    #counsel form .list input,
    #counsel form .list select {font-size: 1.375rem;}
    #counsel form button {width: 100%; margin-top: 1.5rem; padding: 1.5rem;}
    #counsel form .chk_box {margin-top: 1.5rem; font-size: 1.750rem;}
    #counsel form .chk_box input[type="checkbox"] + label span {top: 5px;}
    #counsel form .chk_box label {padding-left: 25px;}

    .select-options {bottom: 5rem; height: 31rem; overflow-y: scroll;}
    .select-options li {padding: 0.8rem 7%;}
    .select-options::-webkit-scrollbar {width: 4px;}


    #modal.counsel {width: 92.5%; max-width: 100%;}
    #modal.counsel .font-16 {font-size: 1.125rem;}
    #modal.counsel .close {transform: scale(0.8);}
}

@media(max-width:500px) {
    #counsel .font-20,
    #counsel form .chk_box  {font-size: 1.5rem;}
    #counsel .font-48 {font-size: 2.50rem;}
    #counsel .font-42 {font-size: 2.50rem;}
    #counsel {bottom: -39.1rem;}
    #counsel .toggleBtn {font-size: 1.8rem; padding: 1.5rem 2.5rem 1rem;}
    #counsel form {padding: 2.5rem 0;}
    #counsel form .chk_box input[type="checkbox"] + label span {top: 3px;}
    .select-options {bottom: 3.5rem; height: 29rem;}
    #modal.counsel .close {top: 2rem; right: 2rem;}
}

@media(max-width: 360px) {
    #modal.counsel li {display: block;}
    #modal.counsel li br {display: none !important;}
}