#header {position: fixed; z-index: 9999; width: 95%; left: 0; right: 0; top: 0; margin: auto; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;}
#header .Inner {max-width: 1720px; width: 100%; padding: 0 2rem; margin: auto; display: flex; align-items: center; justify-content: space-between;}
#header .Menu {display: flex; align-items: center; gap:2rem;}
#header .Menu a {color:#fff; padding: 1.2rem 2rem; display: block; font-size: 16px;}

#header .blind {overflow: hidden; display: inline-block; position: absolute; z-index: -1; border: 0; width: 1px; height: 1px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);}
#header .Logo img {height: 2.5rem;}
 
.nav_btn {display: none; position: absolute;}


#header.sticky, #header.board {backdrop-filter: blur(50px); width: 95%; top:.5rem; background-color: rgba(3, 110, 184, .7); border-radius: 5px; transition: all ease-in .3s;}
#header.hide {
    transform: translateY(-120%);
   
  }


@media(max-width:768px) {
    #header .nav_btn {display: block; position: relative;}

    #header .ham {display: block; width: 30px; padding: 1rem 0; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 400ms; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;}
    #header .hamRotate.active {transform: rotate(45deg);}
    #header .hamRotate180.active {transform: rotate(180deg);}
    #header .line {fill:none; transition: stroke-dasharray 400ms, stroke-dashoffset 400ms; stroke:#fff; stroke-width:2; stroke-linecap:round;}

    #header .ham .top {stroke-dasharray: 40 82;}
    #header .ham .middle {stroke-dasharray: 40 111;}
    #header .ham .bottom {stroke-dasharray: 40 161;}
    #header .ham.active .top {stroke-dasharray: 17 82; stroke-dashoffset: -62px;}
    #header .ham.active .middle {stroke-dashoffset: 23px;}
    #header .ham.active .bottom {stroke-dashoffset: -83px;}

    #header .Menu {display: none; position: absolute; backdrop-filter: blur(50px); border-radius: 50px 0; flex-direction: column; padding: 2rem; background-color: rgba(3, 110, 184, .9); top:0; right: 0;}
    #header .Menu.on {display: block;} 
    #header .Menu a {width: 35vw; color:#fff;}
}


/* quick */
#quick {position: fixed; z-index: 9997; top:50%; transform: translateY(-50%); right:0}
#quick ul {display: flex; align-items: center; justify-content: center; flex-direction: column;}
#quick ul li:first-child {background-color: var(--subcolor); padding: 1rem 0; width: 100%;}
#quick a {padding: 1rem .8rem; display: block; width: 4.5rem; background-color: #333; text-align: center; display: flex; flex-direction: column; gap: .4rem; align-items: center; justify-content: center; color: #fff;}
#quick a.Top {background-color: #005796;}
#quick a img {width: 1.6875rem;}
#quick ul li:first-child img {width: 2.1875rem;}
@media(max-width:500px) {
    #quick a img, #quick ul li:first-child img {width: 24px;}
}
/* #quick a:hover {color: #0d619c;} */
/* @media(max-width:500px) {
    #quick {bottom: 1rem; right: 0; left: 0; margin: auto; width: fit-content;}
    #quick ul {flex-direction: row; padding: 0 1.5rem;}   
    #quick a {width: 6.5rem; height: 6.5rem;}
    #quick a img {width: 2.7rem;}
} */


/* modal */
.modal_overlay {position: fixed; inset: 0; z-index: 9998; background: rgba(0,0,0,.55); opacity: 0; visibility: hidden; transition: .3s ease;}

.modal {position: fixed; left: 50%; top: 50%; z-index: 9999; width: calc(100% - 40px); max-width: 900px; max-height: 80vh; padding: 2rem; background: #fff; transform: translate(-50%, -45%); opacity: 0; visibility: hidden; overflow-y: auto; transition: .3s ease; color: #000;}
.modal.on, .modal_overlay.on {opacity: 1; visibility: visible;}
.modal.on {transform: translate(-50%, -50%);}

.modal-title {margin-bottom: 20px; font-weight: 700;}

.close-icon {position: sticky; top: -1.875rem; float: right; width: 36px; height: 36px; margin: -20px -20px 20px 20px; border: 0; border-radius: 50%; cursor: pointer;}
.close-icon::before,
.close-icon::after {content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; background: #000;}
.close-icon::before {transform: translate(-50%, -50%) rotate(45deg);}
.close-icon::after {transform: translate(-50%, -50%) rotate(-45deg);}

html.modal-open {overflow: hidden;}






/* 빠른상담 */
#Form {background-image: linear-gradient(45deg, #0E2054, #080D1B) ; position: fixed; bottom: 1rem; max-width: 100%; left: 0; right: 0; bottom: 0; margin: auto; z-index: 999; backdrop-filter: blur(5px);  transition: ease-in .3s;}
/* #Form.on {bottom: 0; max-width: 100%; transition: ease-in .3s; border-radius: 0;} */
#Form .Inner {display: flex; align-items: center; gap: 1rem; padding: .5rem 5%;}
#Form .Inner > div {flex: 1;}

#Form .inputTit {position: relative; padding-left: 1rem; display: flex; flex-direction: column; width: 40%;}
#Form .inputTit .Num {color: var(--sub2color); font-weight: 900; font-size: 3rem; line-height: 1;}

#Form .inputTit:after  {content:''; width: .5rem; height: .5rem; border-radius: 50%; background-color: #e00000; position: absolute; top: 0; bottom:0; left: 0; animation: inputTitBlink 1.2s ease-in-out infinite;}
@keyframes inputTitBlink {
    0%, 100% {opacity: 1; transform: scale(1);}
    50% {opacity: .2; transform: scale(.7);}
}

#Form .input_box input[type='text'], #Form .input_box select {background-color: rgba(255,255,255,.95); color: #000; font-size: 1rem; padding: .6rem 1rem; width: 100%; border: .7px solid #fff; border-radius: .625rem;}
#Form .input_box input::placeholder, #Form #value {color: var(--gray); font-size: 1rem;}

#Form .checkbox {cursor: pointer;}
#Form .checkbox input[type="checkbox"] {display: none;}
#Form .checkbox label {position: relative; padding-left: 1.75rem; cursor: pointer; display: inline-block; line-height: 1rem;}

#Form .checkbox label::before {content: ''; position: absolute; left: 0; bottom: 0; width: 1rem; height: 1rem; border: 1px solid #000; border-radius: 0; background: #fff;}
#Form .checkbox input:checked + label::before {border-color: #fff; background: #fff;}
#Form .checkbox input:checked + label::after {content: ''; position: absolute; left: .375rem; bottom: .3125rem; width: .3125rem; height: .625rem; border: .125rem solid #000; border-top: none; border-left: none; transform: rotate(45deg);}

#Form select {-webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-block; border:none; appearance:none; background:url('/img/main/select_arrow.svg') no-repeat right 1.2rem center; background-size: .7rem;}
#Form select option {background-color: rgba(255,255,255,.95); padding: .3rem 0;}

input[type=text]:focus, input[type=password]:focus, input[type='email'], textarea:focus, select:focus {box-shadow: none; background-color: #fff;}

#Form .submit {color: #fff; padding:.5rem 1.3rem; background-color: var(--pointcolor); font-size: 18px; transition: ease .3s;}
#Form .submit:hover {background-color: #000; transition: ease .3s;}

body.modal-open {overflow: hidden;}

.agreeTxt {display: none; position: fixed; inset: 0; width: 100%; height: 100dvh; z-index: 999999;}
.agreeTxt.on {display: block;}

.agreeTxt .agreeBg {position: absolute; inset: 0; background: rgba(0, 0, 0, .65);}

.agreeTxt .agreeBox {position: absolute; left: 50%; top: 50%; width: min(90%, 600px); max-height: calc(100dvh - 4rem); padding: 2.5rem; background: #fff; color: #000; border-radius: 20px; transform: translate(-50%, -50%); overflow: hidden;}
.agreeTxt .agreeCont {max-height: calc(100dvh - 12rem); overflow-y: auto; padding-right: 1rem; line-height: 1.7;}
.agreeTxt .agreeClose {position: absolute; right: 1.5rem; top: 1.2rem; z-index: 2; border: 0; background: none; font-size: 2rem; cursor: pointer;}


@media(max-width:768px) {
    #Form .inputTit {flex-direction: row; align-items: center; gap: .5rem;}
    #Form.on .inputTit {display: flex; cursor: pointer; font-size: 18px;}
    #Form.on:not(.open) .Inner > *:not(.inputTit):not(.agreeTxt) {display: none;}
    #Form.on.open .Inner > *:not(.agreeTxt) {display: block;}
    #Form.on .Inner {height: auto;}

    #Form .Inner {flex-wrap: wrap; }
    #Form .Inner > div {flex: auto;}
    #Form .inputTit {width: 100%; font-size: 1.625rem; position: relative;}
    #Form .inputTit > img {opacity: 0; position: absolute; right: 2rem; top: 0; bottom: 0; margin: auto; filter: invert(1);}
    #Form.on .inputTit > img {opacity: 1; transform: rotate(180deg); }
    #Form.open .inputTit > img {opacity: 1; transform: rotate(0deg); }

    #Form .input_box {width: calc(50% - 1rem);}

    #Form .submit {width: 100%;}

    .agreeTxt .agreeBox {width: calc(100% - 2rem); max-height: calc(100dvh - 2rem); padding: 2rem 1.5rem;}
    .agreeTxt .agreeCont {max-height: calc(100dvh - 9rem);}
}