
.no-scroll {overflow: hidden; height: 100%;}

/* header */
#header {z-index: 9999; transition: all 0.5s;}
#header .inner {padding: 0 13.1rem 0 20.8rem; box-sizing: border-box; height: 10rem;}
#header .inner .logo {width: 21.5rem; height: 6rem; background-size: 100%; background-repeat: no-repeat; background-image: url('../img/header_logo.png');}
#header .inner .nav {width: 74.9rem; margin-right: 14.3rem;}
#header .inner .call {display: block; width: 18.9rem; height: 3rem; background-size: cover; background-repeat: no-repeat; background-image: url('../img/header_call.png');}
#header.act {background: #fff;}
#header.act .inner .logo {background-image: url('../img/header_logo_on.png');}
#header.act .inner .nav a {color: #000000;}
#header.act .inner .call {background-image: url('../img/header_call_on.png');}

@media screen and (max-width: 880px) {
    #header {background: #fff;}
    #header .inner {height: 5.8rem; justify-content: center; padding: 0;}
    #header .inner .logo,
    #header.act .inner .logo {width: 13.7rem; height: 4rem; background-image: url('../img/header_logo_mo.png');}
}

/* footer */
#footer {background: #222527;}
#footer .inner {width: 144rem; padding: 14.2rem 0 8.5rem 0;}
#footer .inner .ft_top {margin-bottom: 8.7rem;}
#footer .inner .ft_bottom {gap: 3rem;}
#footer .inner .ft_bottom .text .fs20 {margin-bottom: 1.1rem;}
#footer .inner .ft_bottom .text .fs14:not(:last-of-type) {margin-bottom: 0.6rem;}
#footer .inner .sns {margin-top: 3.8rem;}
#footer .inner .kakao_map {width: 708px; height: 453px;}
#footer .inner .kakao_map .cont {display: none !important;}
#footer .inner .root_daum_roughmap .wrap_map {height: 100% !important;}

@media screen and (max-width: 880px) {
    #footer {background: #000000;}
    #footer .inner {width: 100%; padding: 0 0 11.2rem 0;}
    #footer .inner .ft_top {width: 100%; flex-direction: column-reverse;}
    #footer .inner .ft_top .text {margin-top: 6.1rem;}
    #footer .inner .ft_top .text img {width: 34.2rem;}
    #footer .inner .sns {margin-top: 6rem; gap: 1.6rem;}
    #footer .inner .ft_bottom {width: 34.2rem; margin: 0 auto;}
    #footer .inner .ft_bottom .logo {gap: 1.6rem;}
    #footer .inner .ft_bottom .logo img {width: 8rem;}
    #footer .inner .ft_bottom .text {width: 100%;}
    #footer .inner .ft_bottom .text .fs14:not(:last-of-type) {margin-bottom: 1.9rem;}
    #footer .inner .ft_bottom .text .fs14 {line-height: 2.2rem;}
    #footer .inner .kakao_map {width: 100%; height: 29.7rem;}
}

/* floting */
#floting {position: fixed; bottom: 9.6rem; right: 9.6rem; z-index: 99;}
#floting .list {gap: 3.9rem; width: 10.4rem; height: 10.4rem; background: #89BD44; border-radius: 50%;}
#floting .list a img {display: block; margin: 0 auto; width: 3.2rem; height: 3.2rem;}
#floting .list a.sideBtn img {width: 10.4rem; height: 10.4rem;}
#floting .list a .fs14 {line-height: 2.2rem; margin-top: 0.5rem;}
#floting .list a:not(.sideBtn) {display: none;}
#floting .list.on {height: 52rem; border-radius: 6rem;}
#floting .list.on a:not(.sideBtn) {display: block;}
#floting .list.on a.sideBtn {display: none;}

#floting .topBtn {display: block; margin-top: 1.6rem;}
#floting .topBtn img {width: 10.4rem; height: 10.4rem; border-radius: 50%; box-shadow: 0 3px 6px rgba(0,0,0,.16);}

@media screen and (max-width: 880px) {
    #floting {right: 0; bottom: 4rem;}
    #floting .list {gap: 1.6rem; border-radius: 2rem 0 0 2rem; width: 6.4rem; height: 26rem;}
    #floting .list.on {height: 26rem;}
    #floting .topBtn {display: none;}
    #floting .list a:not(.sideBtn) {display: block;}
}

/* popup */
.popArea {display: none; z-index: 999999; position: fixed; width: 100%; height: 100%; top: 0; left: 0; }
.popArea .popBg {background: rgba(0,0,0,0.7); position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.popArea .popBox {width: 65%; transform: translate(-50%, -50%) scale(0); transition: 0.8s; left: 50%; top: 50%; position: absolute;}
.popArea .popBox.on {transform: translate(-50%, -50%) scale(1);}
.popArea .popBox .popImg {display: none;}
.popArea .popBox .popImg img {width: 100%; display: block;}
.popArea .popBox .cancelIco {position: absolute; max-width: 5rem; top: 6%; right: 2.5%; height: 40px; width: 55px; cursor: pointer;}

@media all and (max-width: 880px){
    .popArea .popBox {width: 80%; height: 90vh; overflow: auto;}
    .popArea .popBox .cancelIco {max-width: 2rem; top: 3.5%; right: 8%;}
}

/** applyBar *****************/
#applyBar {position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 134rem; padding: 3rem 0; border-radius: 3rem 3rem 0 0; background: #017CC6; display: flex; justify-content: center; align-items: center; z-index: 99; transition: transform .35s ease; transform: translate(-50%, 100%);}
#applyBar .barBtn {font-size: 1.6rem; font-weight: bold; background: #017CC6; color: #fff; display: flex; align-items: center; position: absolute; bottom: 100%; padding: 1.1rem 3.4rem; gap: 1rem; border-radius: 2rem 2rem 0 0; cursor: pointer}
#applyBar .barBtn img {transition: 0.3s;}
#applyBar .logo {margin-right: 3rem;}
#applyBar .logo img {max-width: 21rem;}
#applyBar .formWrap {margin-right: 6rem; display: flex; gap: 1rem;}
#applyBar .formWrap .inputArea {display: flex; flex-wrap: wrap; gap: 1rem; width: min-content;}
#applyBar .formWrap .inputArea .list {display: flex; gap: 1rem;}
#applyBar .formWrap .inputArea .list li {width: 17rem;}
#applyBar .formWrap .inputArea .list input {display: block; width: 100%; height: auto; padding: 1rem; box-sizing: border-box; font-size: 1.4rem; border: none; background: #fff; border-radius: 5px; font-family: inherit;}
#applyBar .formWrap .inputArea .list input:focus {outline: none; border: 0 !important; box-shadow: none;}
#applyBar .formWrap .inputArea .list select {display: block; width: 100%; height: auto; padding: 1rem; box-sizing: border-box; font-size: 1.4rem !important; border: none; border-radius: 5px; appearance: none; -webkit-appearance: none; -moz-appearance: none; background: #fff url('../img/apply_ic_slide.svg') right 10% center no-repeat; font-family: inherit;}
#applyBar .formWrap .inputArea .list select:focus {outline: none; border: 0 !important; box-shadow: none;}
#applyBar .formWrap .inputArea .list li:last-child {width: 20rem;}
#applyBar .formWrap .inputArea .check {display: flex; align-items: center; color: #fff;}
#applyBar .formWrap .inputArea .check input {background: #fff; border: none; width: 1.5rem; height: 1.5rem; margin-top: -0.3rem; margin-right: 0.6rem;}
#applyBar .formWrap .inputArea .check a {margin-left: 0.6rem; color: #fff;}
#applyBar .formWrap .applyBtn {flex-shrink: 0; width: 10rem; display: flex; align-items: center; justify-content: center; background: #fff; height: 6.8rem; border-radius: 5px; color: #017CC6; font-family: inherit; font-weight: bold;}
#applyBar .formWrap .applyBtn i {display: none; font-style: normal;}
#applyBar .callWrap {color: #fff;}
#applyBar .callWrap .txt {margin-bottom: 0.3rem;}
#applyBar .callWrap .tit {}

#applyBar.active .barBtn img {transform: rotate(180deg);}

#applyBar.open {transform: translate(-50%, 0);}

@media all and (max-width: 880px) {
    #applyBar {width: 100%; padding: 3rem 2rem 2.5rem 2rem; box-sizing: border-box; border-radius: 0; z-index: 99999;}
    #applyBar .formWrap {flex-wrap: wrap; gap: 2rem; margin-right: 0;}
    #applyBar .formWrap .inputArea {width: 100%; flex-wrap: wrap; row-gap: 1.6rem;}
    #applyBar .formWrap .inputArea .list {flex-wrap: wrap; gap: 0.8rem; margin-bottom: 0;}
    #applyBar .formWrap .inputArea .list li {width: 100%;}
    #applyBar .formWrap .inputArea .list li:last-child {width: 100%;}
    #applyBar .formWrap .inputArea .list input {font-size: 1.6rem;}
    #applyBar .formWrap .inputArea .list select {font-size: 1.6rem !important; background-position: right 5% center;}
    #applyBar .formWrap .inputArea .check {font-size: 1.8rem;}
    #applyBar .formWrap .inputArea .check input {width: 1.4rem; height: 1.4rem; margin-right: 0.4rem;}
    #applyBar .formWrap .inputArea .check label {font-size: 1.1rem}
    #applyBar .formWrap .inputArea .check a {font-size: 1.1rem; margin-left: 0.2rem;}
    #applyBar .formWrap .applyBtn {width: auto; height: auto; font-size: 1.4rem; padding: 0.6rem 2.3rem; border-radius: 23px; position: absolute; font-weight: 800; bottom: -0.7rem; right: 0;}
    #applyBar .formWrap .applyBtn i {display: inline;}
}
