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

.bg {width: 100%; height: 100%; background: #000000; opacity: 0; visibility: hidden; z-index: 3; transition: all 0.5s;}
.bg.on {opacity: 0.2; visibility: visible;}

/* header */
#header {width: 100%; height: 11rem; padding: 2.7rem 9rem; transition: all 0.5s; z-index: 999;}
#header .in_header {width: 100%; gap: 37.9rem;}
#header .logo {width: 27.6rem; height: 5.6rem; background-image: url('../img/logo.png'); background-repeat: no-repeat; background-size: 100%; transition: all 0.5s;}
#header nav {gap: 6rem;}
#header nav a {text-shadow: 0 0.3rem 0.6rem rgba(0,0,0,0.16); transition: all 0.5s;}
#header.act {background: #fff;}
#header.act .logo {background-image: url('../img/logo_on.png');}
#header.act nav a {color: #202020; text-shadow: none;}

@media screen and (max-width: 880px) {
    #header {height: 7rem; padding: 1.9rem 3rem;}
    #header .in_header {gap: 0; justify-content: space-between;}
    #header .logo {width: 15.8rem; height: 3.2rem; background-image: url('../img/logo_mo.png');}
    #header .mo_menu {width: 3rem; height: 2rem; background-image: url('../img/mo_menu.png'); background-repeat: no-repeat; background-size: 100%;}
    #header nav {display: block; position: fixed; top: 7rem; right: -30rem; width: 30rem; height: calc(100vh - 7rem); background: #fff; padding: 2.5rem 2.5rem 0 2.9rem; transition: all 0.5s; z-index: 999;}
    #header nav.on {right: 0;}
    #header nav a, #header nav a {display: block; color: #343434; text-shadow: none; margin-bottom: 3rem;}
    #header nav .mo_close {margin-bottom: 1.85rem;}
    #header nav .mo_close img {width: 1.8rem;}
    #header nav .mo_logo {width: 15.8rem; margin-bottom: 4.8rem;}
    #header.act .logo {background-image: url('../img/logo_on_mo.png');}
    #header.act .mo_menu {background-image: url('../img/mo_menu_on.png');}
}
/* header */

/* footer */
#footer {background: #2B2B2B; padding: 4.8rem 0;}
#footer .inner {gap: 4.4rem;}
#footer .text_bx .tit {margin-bottom: 1rem;}
#footer .text_bx .txt {line-height: 2.6rem; margin-bottom: 1.9rem;}
#footer .text_bx .list {gap: 1.8rem;}
#footer .pc_view {display: inline-block;}

@media screen and (max-width: 880px) {
    #footer {padding: 5.9rem 0 6.4rem 0;}
    #footer img {width: 25.5rem;}
    #footer .inner {flex-direction: column; gap: 4.3rem; text-align: center;}
    #footer .text_bx .tit {margin-bottom: 1.6rem;}
    #footer .text_bx .txt {margin-bottom: 2.6rem;}
    #footer .text_bx .list {justify-content: center;}
    #footer .pc_view {display: none;}
}
/* footer */

/* side */
#side {bottom: 5.5rem; right: 5.2rem; z-index: 999;}
#side .side_list {margin-bottom: 1.7rem; width: 9rem; height: 48rem; padding: 5rem 0; border-radius: 5rem; background: #00A7EB; display: none;}
#side .side_list.on {display: block;}
#side .side_list li:not(:last-child) {margin-bottom: 3rem;}
#side .side_list img {margin: 0 auto 0.6rem auto;}
#side .side_btn {display: block; margin-bottom: 1.2rem;}
#side .top_btn {display: block; width: 9rem; border-radius: 50%; box-shadow: 0 0.3rem 0.6rem rgba(0,0,0,0.16);}

@media screen and (max-width: 880px) {
    #side {bottom: 4rem; right: 2.2rem; z-index: 998;}
    #side .side_list {width: 6rem; height: 26rem; padding: 2.6rem 0;}
    #side .side_list li:not(:last-child) {margin-bottom: 1.2rem;}
    #side .side_list img {margin-bottom: 0; width: 3.2rem;}
    #side .side_btn {margin-bottom: 0.8rem; width: 6rem;}
    #side .side_btn img {width: 100%;}
    #side .top_btn {width: 6rem;}
    #side .top_btn img {width: 100%;}
}
/* side */



/** applyBar *****************/
#applyBar {position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 134rem; padding: 3rem 0; border-radius: 3rem 3rem 0 0; background: #224499; 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: #224499; 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: 22rem;}
#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: #224499; 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;}
}