/* 푸터 */
#footer {color:#fff;background-color: rgba(0,0,0,0.8);}
#footer ul {gap: 6rem;}
#footer .logo img {filter: brightness(0) invert(100); transition: 0.45s;}

@media(max-width:990px) {
    .font-16 {font-size: 1.500rem;}

    #footer .flex-between {flex-direction: column;}
    #footer .box.logo {order: -1; margin-bottom: 3.75rem;}

    #footer ul.flex {flex-wrap: wrap; row-gap: 1.25rem;}
    #footer ul.flex li:last-child {width: 100%;}
}

/* 퀵메뉴 */
#quick {position: fixed; right: 5%; bottom: 20%; z-index: 9; width: auto; height: auto;}
#quick li {width: 5.625rem; height: 5.625rem; border-radius: 50%; margin-top: 1rem;}
#quick li.quick-menu { background: var(--pointcolor);}
#quick li.quick-menu img {transition: 0.45s;}
#quick li.quick-menu.on img {transform: rotate(45deg);}
#quick li.scroll-top {background: #000; margin-top: 0;}

#quick li a {width: 100%; height: 100%;}

#quick .quick-wrap {height: 0; transition: 0.6s ease-in-out; width: 100%;}
#quick .quick-wrap.on {height: 13.25rem;}
#quick .quick-wrap:not(.on) {transition-delay: 1.2s;}
#quick .quick-wrap li {background: #e9f0f7; position: relative; transform: translateX(80%); opacity: 0; transition: 0.6s; transition-delay: 0.6s; visibility: hidden;}
#quick .quick-wrap.on li {transform: translateX(0); opacity: 1; visibility: visible;}
#quick .quick-wrap li:nth-child(2) {transition-delay: 1s;}

@media(max-width:990px) {
    #quick {bottom: 10%;}
    #quick li {width: 6.25rem; height: 6.25rem;}
    #quick .quick-wrap.on {height: 14.5rem;}
    #quick li img {transform: scale(0.6);}
    #quick li.quick-menu.on img {transform: scale(0.6) rotate(45deg);}
    #quick li span.mt-5 {margin-top: 0;}
}

/* 문의하기 */
/* #counsel {position: fixed; bottom: 0; left: 0; width: 100%; background: url("/img/main/counsel_bg.jpg") no-repeat; background-size: cover !important; color: #fff; padding: 1.5rem 0; z-index: 9;} */
#counsel {position: fixed; bottom: 0; left: 0; width: 100%; background: rgba(56,115,162,0.9) linear-gradient(50deg, rgb(56,115,162), transparent); color: #fff; padding: 1.5rem 0; z-index: 11;}
#counsel .wrap {max-width:1220px; width: 100%; margin: auto; gap: 1.5rem; align-items: flex-start; cursor: pointer;}
#counsel form {display: flex; align-items: flex-start; gap: 1.5rem;}
#counsel .box {background: rgb(56,115,162); border-radius: 15px; padding: 0 2rem;}
#counsel input[type=text],
#counsel input[type=tel] {background:rgb(56,115,162); border: none; color: #fff; padding: 1rem 0 1rem 1rem; width: 17rem;}
#counsel input[type=text]:focus, #counsel input[type=password]:focus, #counsel textarea:focus, #counsel select:focus {box-shadow: none; border: none !important;}
#counsel input::placeholder {color: rgba(255,255,255,0.3);}
#counsel button {background: var(--pointcolor); padding: 1rem 2rem; border-radius: 20px;}
#counsel .chk_box label {margin-left: 25px; color: #fff !important;}
#counsel .chk_box span.more{color: #fff !important; border-bottom: 1px solid #fff; margin-left: 10px; cursor: pointer;  width: fit-content; display: inline; line-height: 1;}

/* checkbox 커스텀 */
.selec_chk {position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; outline: 0; z-index: -1; overflow: hidden;}
.chk_box input[type="checkbox"] + label span { position:absolute; top:1px;left:0; width:16px; height:16px; display:block; background:transparent;border:1px solid #fff; cursor: pointer;}
.chk_box input[type="checkbox"]:checked + label span {background: url("/img/chk.png") no-repeat 50% 50%;}

#counsel input:-webkit-autofill,
#counsel input:-webkit-autofill:hover,
#counsel input:-webkit-autofill:focus,
#counsel input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-transition: background-color 9999s ease-out;
    -webkit-box-shadow: 0 0 0px 1000px #336fb3 inset !important;
    -webkit-text-fill-color: #fff !important;
}

/* 모달 */
#modal, #price_modal, #counsel_modal,#success_modal {background: #fff; /* border-radius: 50px; */ padding: 5rem 3.5rem; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0); border-radius: 50%; z-index: 11; transition: 0.45s; opacity: 0;}
#modal.on, #price_modal.on, #counsel_modal.on, #success_modal.on {transform: translate(-50%, -50%) scale(1); border-radius: 50px; opacity: 1;}
#modal .close, #price_modal .close, #counsel_modal .close, #success_modal .close {position: absolute; right: 2.5rem; top: 2rem; content: url("/img/main/cancel.png"); width: 22px; height: 22px; cursor: pointer;}
#modal button, #price_modal button, #counsel_modal button, #success_modal button {background: var(--pointcolor); border-radius: 15px; padding: 1rem; width: 8rem; display: flex; justify-content: center;}
#price_modal button, #counsel_modal button  {width:50%;}
#modal ul li span:first-child {width: 10rem;}
#modal ul li span:last-child {width: calc(100% - 10rem);}


@media(max-width:990px) {
    /* #counsel {bottom: -19rem; transition: 0.8s; background: url("/img/main/counsel_bgm.jpg") no-repeat;} */
    #counsel {bottom: -18rem; transition: 0.6s; background: rgba(120,135,188,0.9) linear-gradient(50deg, rgb(20,135,188), transparent);}
    #counsel.on {bottom: 0;}
    #counsel .wrap {max-width: 100%; width: 80%; margin: auto; flex-direction: column; align-items: center;}
    #counsel h3 {width: 100%;}
    #counsel h3 span {position: relative;  transition: 0.25s; transform: rotate(180deg);}
    #counsel.on h3 span {transform: rotate(0);}
    #counsel form {flex-direction: column; gap: 1rem; width: 100%;}
    #counsel form > div {width: 100%;}
    #counsel .box {width: 100%;}
    #counsel .box label {width: 7rem;}
    #counsel .box input {width: calc(100% - 7rem);}
    #counsel button  {width: 100%;}

    #modal, #price_modal, #counsel_modal {width: 90%; padding: 6rem 3.5rem;}
    #modal button, #price_modal button, #counsel_modal button {width: 100%;}
    #modal ul li span:first-child {width: 14.5rem;}
    #modal ul li span:last-child {width: calc(100% - 14.5rem);}

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

}
@media(max-width:420px) {
    #counsel {bottom: -19rem;}
    .chk_box input[type="checkbox"] + label span {top: 0;}
    #counsel .box label {width: 5rem;}
    #counsel .box input {width: calc(100% - 5rem);}
    #modal ul li span:first-child {width: 11.5rem;}
    #modal ul li span:last-child {width: calc(100% - 11.5rem);}
}