#header {z-index: 9999}
.pc_header {background: #003C81; transition: 0.2s}
.pc_header .inner {padding: 1.3rem 0;}
.pc_header .logo1 {margin-right: 3.4rem; width: 19.6rem;}
.pc_header .logo1 img {opacity: 1;}
.pc_header .logo1 img.on {opacity: 0;}
.pc_header .logo2 {width: 22.9rem;}
.pc_header .logo2 img {opacity: 1;}
.pc_header .logo2 img.on {opacity: 0;}
.pc_header .gnb {margin-left: 6rem}
.pc_header .gnb li {}
.pc_header .gnb li a {display: inline-block; min-width: 13rem}
.pc_header .login {padding: 1rem 2.3rem; border: 1px solid #C9CDD2; border-radius: 20px; margin-left: auto;}
.pc_header .login a {}

.pc_header.on {background: #fff}
.pc_header.on .logo1 img {opacity: 0;}
.pc_header.on .logo1 img.on {opacity: 1;}
.pc_header.on .logo2 img {opacity: 0;}
.pc_header.on .logo2 img.on {opacity: 1;}
.pc_header.on .gnb {color: #000}
.pc_header.on .login {color: #72787F}

@media all and (max-width: 880px){
    .mo_header {z-index: 99; transition: background 0.3s;}
    .mo_header .mo_head {padding: 0.7rem 2.4rem;}
    .mo_header .mo_head .call {filter: brightness(100);}
    .mo_header .mo_head .call img {max-width: 2.2rem;}
    .mo_header .mo_head .logo {width: 41%; filter: brightness(100);}
    .mo_header .mo_head .menu_btn {width: 7%; filter: brightness(100);}
    .mo_header .mo_menu_wrap {display: none;}
    .mo_header .mo_menu_wrap .mo_black_bg {background: rgba(0,0,0,0.4);}
    .mo_header .mo_menu_box {width: 80%; height: 100%; margin-left: auto; background: #fff; right: -100%; transition: 1s;}
    .mo_header .mo_menu_box .menu_logo {padding: 20px 25%;}
    .mo_header .mo_menu_box .menu_login {display: flex; justify-content: center;}
    .mo_header .mo_menu_box .menu_login li {padding: 0 1rem;}
    .mo_header .mo_menu_box .menu_login li a {}
    .mo_header .menu_gnb {padding: 20px;}
    .mo_header .menu_gnb_lst {padding: 8px; border-bottom: 1px solid #e1e1e1;}
    .mo_header .menu_gnb_lst .gnb_name {font-size: 1.6rem; display: block;}
    .mo_header.on {background: #fff;}
    .mo_header.on .mo_head .call {filter: none}
    .mo_header.on .mo_head .logo {filter: none}
    .mo_header.on .mo_head .menu_btn {filter: none}
}

#footer {background: #35383A}
#footer .inner {max-width: 78%; margin: 0 auto; padding: 4rem 0 10rem;}
#footer .info {color: #72787F; line-height: 2.2rem;}
#footer .ftLogo {max-width: 26.4rem;}

#float {right: 8rem; z-index: 9999}
#float .area {background: #222527; border-radius: 20px; padding: 3rem 2.2rem;}
#float .area .lst {}
#float .area .lst li + li {margin-top: 2.3rem;}
#float .area .lst li img {max-width: 2.4rem;}
#float .area .lst li img:hover {filter: brightness(10);}
#float .area .call {gap: 0.8rem; padding-top: 2rem; margin-top: 2.4rem; border-top: 1px solid #454C53; color: #FFDCB9}
#float .area .call img {max-width: 1.4rem;}
#float .consult {margin-top: 2.7rem;}
#float .consult .ico {max-width: 8.8rem; cursor: pointer;}

.consult_modal {z-index: 99999; display: none;}
.modal_bg {background: rgba(0,0,0,0.6)}
.modal_box {border-radius: 30px; box-shadow: 0 3px 6px rgba(0,0,0,0.16); max-width: 48rem;}
.modal_box .title {padding: 2.8rem 3.2rem 2.2rem; border-bottom: 2px solid #E7EBEF;}
.modal_box .title .cancel {cursor: pointer}
.modal_box .form_area {padding: 2.4rem 3.2rem 0}
.modal_box .form_lst {}
.modal_box .form_lst + .form_lst {margin-top: 1.6rem}
.modal_box .form_lst label {margin-bottom: 0.6rem; display: block; line-height: 1}
.modal_box .form_lst input {width: 100%; height: 4.7rem; background: #F4F5F9; border-radius: 10px; border: 0; box-shadow: none}
.modal_box .form_lst input:focus {outline: 0;}
.modal_box .form_lst select {width: 100%; height: 4.7rem; background: #F4F5F9; border-radius: 10px; border: 0; box-shadow: none}
.modal_box .form_agree {margin-top: 2.4rem; gap: 0.5rem;}
.modal_box button.submit {display: inline-block; margin-top: 2.1rem; padding: 1.3rem 8.5rem 1.7rem; border-radius: 20px 20px 0 0;}

@media all and (max-width: 880px){
    #footer .inner {flex-direction: column-reverse; max-width: 88%; margin: 0 auto; padding: 5.6rem 0 9.3rem; gap: 3.4rem;}
    #footer .info {line-height: 2.2rem;}
    #footer .info i {display: none}
    #footer .ftLogo {max-width: 23.7rem; }

    #float {right: 1.5rem; top: auto; transform: none; bottom: 3rem;}
    #float .area_mo {}
    #float .area_mo ul {display: none; padding-bottom: 2px}
    #float .area_mo ul li {}
    #float .area_mo ul li + li {margin-top: 8px}
    #float .area_mo img {max-width: 5.6rem; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.16));}
    #float .top {margin-top: 0.8rem;}
    #float .top img {max-width: 5.6rem; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.16));}
}

#wrap {overflow: hidden;}

#s1 {height: 105vh;}
#s1 .imgArea img {height: 100%; object-fit: cover;}
#s1 .txtArea {max-width: 73.5%}
#s1 .txtArea .txt1 {right: -5%; opacity: 0; transition: 2s}
#s1 .txtArea .txt2 {opacity: 0; transition: 2s; min-width: 57%;}

#s1 .txtArea .txt1.on {opacity: 1}
#s1 .txtArea .txt2.on {opacity: 1}

#s3 {}
#s3 .imgArea {}
#s3 .titArea {z-index: 1; bottom: 10.2%}

#s4 {}
#s4 .imgArea {}
#s4 .imgArea .txt {max-width: 67.4%;}

#s6 {background: #F6F7F9}

#s7 {background: #33383C}

#s8 {background: #33383C;}
#s8 .inner {padding: 14.8rem 0 30.5rem; max-width: 89%; margin-left: auto;}
#s8 .left {}
#s8 .left .tit {line-height: 6.2rem; color: #FFDCB9}
#s8 .left .arr {padding: 5.2rem 0;}
#s8 .left .arr .s8_prev,
#s8 .left .arr .s8_next {width: 5.6rem; height: 5.6rem; bottom: 0; top: auto;}
#s8 .left .arr .s8_prev::after,
#s8 .left .arr .s8_next::after {display: none}
#s8 .left .arr .s8_prev {background: url('../img/s8_left.png') no-repeat center/contain; left: 0;}
#s8 .left .arr .s8_next {background: url('../img/s8_right.png') no-repeat center/contain; left: 8rem; right: auto;}
#s8 .right {max-width: 70%}
#s8 .s8_swiper {overflow: hidden;}

#s9 {background: #304b95}

#s11 {}
#s11 .inner {padding: 15rem 0 29.5rem; max-width: 82%; margin-left: 7%}
#s11 .imgTab {width: 48.8%;}
#s11 .imgTab .imgBox {display: none}
#s11 .imgTab .imgBox.on {display: block}
#s11 .txtArea {width: 44%;}
#s11 .txtArea .title {}
#s11 .txtArea .lst {margin-top: 8rem;}
#s11 .txtArea .lst li {padding: 2.4rem; background: #F6F7F9; border-radius: 8px; cursor: pointer}
#s11 .txtArea .lst li + li {margin-top: 0.8rem;}
#s11 .txtArea .lst li .tit {color: #2088FF;}
#s11 .txtArea .lst li .tit .ico {width: 1rem; transition: 0.2s;}
#s11 .txtArea .lst li .wrt {line-height: 2.8rem; padding-top: 1.6rem; display: none;}
#s11 .txtArea .lst li.on .tit .ico {transform: rotate(180deg);}

#s13 {background: #4b5057}

#s14 {background: #f6f7f9}

#s15 {}
#s15 .inner {padding: 11.3rem 0 30.4rem; background: #F6F7F9}
#s15 .title {max-width: 62.5rem; margin: 0 auto; margin-bottom: 8.1rem;}
#s15 .s15_swiper {overflow: hidden;}
#s15 .s15_prev,
#s15 .s15_next {width: 9.6rem; height: 9.6rem;}
#s15 .s15_prev::after,
#s15 .s15_next::after {display: none}
#s15 .s15_prev {background: url('../img/s15_left.png') no-repeat center/contain; left: 9%;}
#s15 .s15_next {background: url('../img/s15_right.png') no-repeat center/contain; right: 9%;}

#s16 {}
#s16 .inner {}
#s16 .infoBox {width: 100%; background: #222527}
#s16 .infoBox .cont {padding: 14.4rem 0 9.4rem; width: 78%; margin-left: auto}
#s16 .infoBox .txt {margin-bottom: 5.6rem;}
#s16 .infoBox .txt .subt {}
#s16 .infoBox .txt .tit {color: #B9E0FF}
#s16 .infoBox .txt .prg {padding-left: 2rem;}
#s16 .infoBox .txt .prg::before {content: '*'; display: block; position: absolute; left: 0; top: 0}
#s16 .infoBox .infoLst {}
#s16 .infoBox .infoLst + .infoLst {margin-top: 3.2rem;}
#s16 .infoBox .infoLst.map {}
#s16 .infoBox .infoLst.time {}
#s16 .infoBox .infoLst .infoTit {min-width: 13.6rem; gap: 0.8rem;}
#s16 .infoBox .infoLst .infoWrt {line-height: 2.4rem;}
#s16 .infoBox .infoLst ul {}
#s16 .infoBox .infoLst ul li {}
#s16 .infoBox .infoLst ul li + li {margin-top: 1.2rem;}
#s16 .infoBox .infoLst ul li b {min-width: 9.6rem}
#s16 .infoBox .infoLst .prg {margin-top: 2.4rem;}
#s16 .infoBox .infoLst .prg div {line-height: 2.8rem; padding-left: 1.4rem;}
#s16 .infoBox .infoLst .prg div:last-child {color: #B9E0FF}
#s16 .infoBox .infoLst .prg div::before {content: '*'; display: block; position: absolute; left: 0; top: 0}
#s16 .infoBox .btnArea {gap: 2.4rem; margin-top: 2.4rem;}
#s16 .infoBox .btnArea a {padding: 2rem 0; width: 27rem;}
#s16 .infoBox .btnArea a.aa {background: #3D72C2}
#s16 .infoBox .btnArea a.bb {background: #72787F}
#s16 .mapBox {width: 100%}

@media all and (max-width: 880px){
    #s1 {height: 140vh}
    #s1 .txtArea {max-width: 90%; flex-direction: column; justify-content: center; gap: 2.4rem;}
    #s1 .txtArea .txt1 {right: auto; width: 60%}

    #s3 .titArea {bottom: auto; width: 83.5%; top: 35%}

    #s8 .inner {flex-direction: column; max-width: 100%; padding: 5.5rem 0 16rem; gap: 4.8rem;}
    #s8 .left {padding-left: 6%;}
    #s8 .right {max-width: 100%}

    #s11 .inner {max-width: 88%; margin: 0 auto; padding: 12rem 0 8rem; flex-direction: column-reverse; gap: 4.8rem;}
    #s11 .imgTab {width: 100%}
    #s11 .txtArea {width: 100%}
    #s11 .txtArea .title {max-width: 80%;}
    #s11 .txtArea .lst {margin-top: 5.6rem;}

    #s15 .inner {padding: 2rem 0 4rem;}
    #s15 .title {margin-bottom: 6.4rem; max-width: 70%}
    #s15 .s15_prev,
    #s15 .s15_next {width: 3.2rem; height: 3.2rem;}
    #s15 .s15_prev {left: 4%}
    #s15 .s15_next {right: 4%}

    #s16 {}
    #s16 .inner {flex-direction: column-reverse;}
    #s16 .infoBox .cont {max-width: 88%; margin: 0 auto; padding: 7rem 0;}
    #s16 .infoBox .txt {margin-bottom: 3.4rem;}
    #s16 .infoBox .txt .subt {font-size: 3.2rem;}
    #s16 .infoBox .txt .tit {font-size: 4.8rem; margin-bottom: 0.7rem;}
    #s16 .infoBox .txt .prg {font-size: 2rem; line-height: 3.2rem;}
    #s16 .infoBox .infoLst {flex-direction: column; gap: 0.8rem;}
    #s16 .infoBox .infoLst + .infoLst {margin-top: 2.7rem;}
    #s16 .infoBox .btnArea {flex-direction: column; align-items: center; gap: 0.9rem; margin-top: 5rem;}
}

#sub_visual {height: 100vh;}
#sub_visual .txt .prg {margin-bottom: 6.2rem; letter-spacing: 0.9rem;}
#sub_visual .txt .tit {margin-bottom: 8.4rem}
#sub_visual.register_visual {background: url('../img/register_visual.jpg') no-repeat center/cover;}
#sub_visual.login_visual {background: url('../img/login_visual.jpg') no-repeat center/cover;}

@media all and (max-width: 880px){
    #sub_visual .txt .prg {font-size: 1.4rem; margin-bottom: 4.5rem;}
    #sub_visual .txt .tit {font-size: 4.8rem; margin-bottom: 3.7rem;}
    #sub_visual .txt .subt {font-size: 3.6rem; margin-bottom: 0.7rem;}
    #sub_visual .txt .ico {max-width: 3.9rem;}
}

/* trigger */
.top_trigger_off {bottom: -2rem; opacity: 0; transition: 1s;}
.top_trigger_on {bottom: 0; opacity: 1; transition: 1s;}

.left_trigger_off {right: -2rem; opacity: 0; transition: 1s;}
.left_trigger_on {right: 0; opacity: 1; transition: 1s;}

.right_trigger_off {left: -2rem; opacity: 0; transition: 1s;}
.right_trigger_on {left: 0; opacity: 1; transition: 1s;}

.bot_trigger_off {top: -2rem; opacity: 0; transition: 1s;}
.bot_trigger_on {top: 0; opacity: 1; transition: 1s;}

.blur_trigger_off {filter: blur(20px); opacity: 0; transition: 1s;}
.blur_trigger_on {filter: blur(0); opacity: 1; transition: 1s;}

.fillter_blur {filter: blur(20px); opacity: 0; transition: 1.4s}
.fillter_blur.fillter_off {filter: blur(0); opacity: 1; transition: 1.4s}