#header {z-index: 9999}
.pc_header {background: transparent; transition: 0.2s}
.pc_header .inner {padding: 1.7rem 0;}
.pc_header .logo1 {margin-right: 3.4rem}
.pc_header .logo2 {}
.pc_header .gnb {margin-left: 6rem}
.pc_header .gnb li {}
.pc_header .gnb li a {display: inline-block; min-width: 13rem}
.pc_header.on {background: #74B9FF}

.mo_header {z-index: 99; transition: background 0.3s;}
.mo_header .mo_head {padding: 1.4rem 2.4rem;}
.mo_header .mo_head .call {filter: brightness(100); max-width: 2.2rem;}
.mo_header .mo_head .logo {width: 41%; filter: brightness(100);}
.mo_header .mo_head .menu_btn {filter: brightness(100); max-width: 2.4rem}
.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 .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: #33383C;}
#footer .cont {padding: 7rem 0; color: #A4AAB1; text-align: center; gap: 2rem;}
#footer .cont .info {margin-right: 15rem; line-height: 2.2rem}
#footer .cont .ft_logo {max-width: 20.3rem;}
@media all and (max-width: 880px){
    #footer .cont {flex-direction: column; justify-content: center; padding: 3.4rem 0 7rem}
    #footer .cont .info {margin: 0}
    #footer .cont .info i {display: none;}
}

#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: 1.5rem;}
#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;}
#float .consult {margin-top: 2.7rem;}
#float .consult .ico {max-width: 8.8rem; cursor: pointer;}

@media all and (max-width: 880px){
    #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: 2px}
    #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));}
}


.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;}

#wrap {overflow: hidden;}

#s1 {height: 100vh;}
#s1::before {content: ''; display: block; position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 1}
#s1 video {height: 100vh; object-fit: cover;}
#s1 .cont {padding-top: 5rem; opacity: 0; transition: 1.5s; z-index: 1; max-width: 53%}
#s1 .cont.on {padding-top: 0; opacity: 2;}
@media all and (max-width: 880px){
    #s1 .cont {max-width: 88%;}
}

#s2 {}
#s2 .cont {padding: 24rem 0 36rem; max-width: 52.4%;}
@media all and (max-width: 880px){
    #s2 .cont {padding: 14.8rem 0 15.6rem; max-width: 76.5%;}
}

#s3 {}
#s3 .cont {padding-left: 25.6rem;}
#s3 .txt {width: 48rem; min-width: 48rem;}
#s3 .txtImg {max-width: 29rem;}
#s3 .txt .arr {height: 8rem;}
#s3 .txt .arr .s3_prev,
#s3 .txt .arr .s3_next {width: 4rem; height: 4rem; bottom: 0; top: auto;}
#s3 .txt .arr .s3_prev::after,
#s3 .txt .arr .s3_next::after {display: none}
#s3 .txt .arr .s3_prev {background: url('../img/s3_left.png') no-repeat center/contain; left: 0;}
#s3 .txt .arr .s3_next {background: url('../img/s3_right.png') no-repeat center/contain; left: 6rem; right: auto;}
#s3 .slide {width: 118.4rem; overflow: hidden;}
#s3 .s3_swiper {}
#s3 .s3_swiper .swiper-slide span {padding: 2.4rem 0 0 2.4rem; display: inline-block;}
@media all and (max-width: 880px){
    #s3 .cont {padding: 0; max-width: 88%; margin: 0 auto; flex-direction: column; gap: 4.8rem;}
    #s3 .slide {width: 100%}
    #s3 .s3_swiper .swiper-slide span {font-size: 1.8rem;}
}

#s4 {margin-top: 24.6rem;}
#s4 .top {background: url('../img/s4_bg.jpg') center/cover; padding-top: 6.7rem;}
#s4 .top .cont {max-width: 181.2rem; padding-left: 25.6rem;}
#s4 .top .cont .txtImg {max-width: 49.3rem; padding-top: 4rem; z-index: 1}
#s4 .top .cont .imgImg {max-width: 104rem;}
#s4 .top .cont .symbol {max-width: 18.3rem; top: 18%; left: 36%;}
@media all and (max-width: 880px){
    #s4 {margin-top: 14rem;}
    #s4 .top {background: #F6F7F9; padding-top: 11.2rem;}
    #s4 .top .cont {max-width: 100%; flex-direction: column; padding: 0; align-items: center; gap: 3rem;}
    #s4 .top .cont .txtImg {padding: 0; max-width: 86%}
    #s4 .top .cont .symbol {top: -7%; left: 68%; max-width: 12.8rem;}
}

#s5 {}
#s5 .cont {gap: 5rem 7.8rem; padding: 16rem 3.3rem 17rem;}
#s5 .cont .imgArea {width: calc((100% - 7.8rem) / 2);}
#s5 .popArea {display: none; z-index: 9999}
#s5 .popArea .popAreaBg {background: rgba(0,0,0,0.7);}
#s5 .popArea .popAreaBox {max-width: 158.4rem;}
#s5 .popArea .popAreaBox .popLst {display: none;}
@media all and (max-width: 880px){
    #s5 .cont {max-width: 88%; padding: 4.8rem 0 10rem; gap: 1.6rem}
    #s5 .cont .imgArea {width: 100%;}
    #s5 .popArea .popAreaBox {max-width: 80%;}
}

#s6 {}
#s6::before {content: ''; display: block; position: absolute; width: 100%; bottom: 0; height: 50%; background: #F6F7F9}
#s6 .cont {padding-bottom: 23.7rem; z-index: 1}
#s6 .cont .txtImg {max-width: 100.6rem;}
#s6 .cont .imgImg {margin: 8rem 0 5.6rem;}
#s6 .cont .botImg {}
#s6 .symbol_1 {max-width: 46.8rem; top: 5%; left: 6%;}
#s6 .symbol_2 {max-width: 57.8rem; top: 8%; right: 5%;}
@media all and (max-width: 880px){
    #s6 .cont {padding-bottom: 12.4rem;}
    #s6 .cont .txtImg {max-width: 87%;}
    #s6 .cont .imgImg {width: 88%;}
    #s6 .cont .botImg {max-width: 55%;}
    #s6 .symbol_1 {max-width: 40%; top: 9%; left: -7%;}
    #s6 .symbol_2 {max-width: 60%; top: 9%; right: -16%;}
}

#s7 {background: #F6F7F9}
#s7 .cont {padding-bottom: 34rem}
#s7 .cont .txtImg {max-width: 88rem;}
#s7 .cont .lstImg {gap: 3.2rem; margin-top: 9.2rem;}
#s7 .cont .lstImg li {width: calc((100% - 6.4rem) / 3);}
@media all and (max-width: 880px){
    #s7 .cont {max-width: 88%; padding-bottom: 11.3rem}
    #s7 .cont .txtImg {max-width: 100%;}
    #s7 .cont .lstImg {gap: 5.4rem; flex-direction: column;}
    #s7 .cont .lstImg li {width: 100%;}
}

#s8 {}
#s8 .cont {padding: 17rem 4rem 17rem;}
#s8 .cont .leftImg {max-width: 58.4rem;}
#s8 .cont .rightImg {max-width: 66.6rem}
@media all and (max-width: 880px){
    #s8 .cont {padding: 14.2rem 0 11rem; max-width: 88%;}
}

#s9 {background: url('../img/s9_bg.jpg') center/cover;}
#s9 .cont {padding: 19rem 0 13rem; max-width: 132.8rem;}
#s9 .cont .line {width: 4px; background: #FFC93A;}
#s9 .cont .txtImg {max-width: 60.7rem;}
#s9 .cont .lstImg {margin-top: 6.5rem}
#s9 .cont .symbol {max-width: 81.8rem; top: 3%; right: -8%;}
@media all and (max-width: 880px){
    #s9 {background: url('../img/s9_bg_mo.jpg') center/cover;}
    #s9 .cont {padding: 17.2rem 0 6.7rem; max-width: 88%;}
    #s9 .cont .txtImg {max-width: 100%;}
    #s9 .cont .lstImg {margin-top: 4.4rem;}
    #s9 .cont .symbol {max-width: 70%; right: -15%;}
}

#s10 {}
#s10 .cont {padding: 26rem 0 28.3rem;}
#s10 .cont .txtImg {max-width: 92.8rem;}
#s10 .cont .imgImg {margin: 7.2rem 0 5.6rem}
#s10 .cont .lstImg {margin: 0 auto;}
@media all and (max-width: 880px){
    #s10 .cont {max-width: 88%; padding: 12rem 0 16rem;}
    #s10 .cont .txtImg {max-width: 100%;}
    #s10 .cont .imgImg {margin: 4rem 0;}
    #s10 .cont .lstImg {max-width: 88%;}
}

#s11 {margin-bottom: 39rem}
@media all and (max-width: 880px){
    #s11 {margin-bottom: 6.6rem;}
}

#s12 {}
#s12 .cont {z-index: 1}
#s12 .cont .txtImg {max-width: 31.3rem;}
#s12 .cont .imgImg {max-width: 92.65rem;}
#s12 .symbol {bottom: -5%; left: 17%; max-width: 37rem;}
@media all and (max-width: 880px){
    #s12 .cont {flex-direction: column; max-width: 88%; padding-top: 13rem; gap: 4.2rem;}
    #s12 .cont .txtImg {max-width: 82%;}
    #s12 .cont .imgImg {max-width: 100%;}
    #s12 .symbol {bottom: auto; top: 8%; max-width: 59%; left: auto; right: -14%;}
}

#s13 {background: #FFFAF3;}
#s13 .top {background: #FFC93A; padding: 4.8rem 0; margin-top: 38rem}
#s13 .top div {max-width: 84.8rem;}
#s13 .cont {padding: 16rem 0;}
#s13 .cont .txtImg {max-width: 92.8rem}
#s13 .cont .imgImg {margin: 7.2rem 0 5.6rem}
#s13 .cont .lstImg {}
@media all and (max-width: 880px){
    #s13 .cont {max-width: 88%;}
    #s13 .top {padding: 4.4rem 0; margin-top: 9.6rem}
    #s13 .top div {max-width: 52%;}
    #s13 .cont {max-width: 88%; padding: 12rem 0 10rem;}
    #s13 .cont .txtImg {max-width: 100%}
    #s13 .cont .imgImg {margin: 6rem 0 5.6rem;}
    #s13 .cont .lstImg {}
}

#s14 {background: url('../img/s14_bg.jpg') no-repeat top/cover;}
#s14 .cont {padding: 32.7rem 0 15rem;}
#s14 .cont .titImg {max-width: 104.2rem;}
#s14 .cont .box1 {margin-top: 13.8rem; gap: 9rem;}
#s14 .cont .box1 .imgImg {max-width: 66.8rem;}
#s14 .cont .box1 .txtImg {max-width: 59.3rem;}
#s14 .cont .box2 {margin-top: 11.5rem;}
#s14 .cont .box2 .txtImg {max-width: 70.4rem;}
#s14 .cont .box2 .imgImg {max-width: 57.6rem; margin-right: -5%;}
@media all and (max-width: 880px){
    #s14 {background: url('../img/s14_bg_mo.jpg') no-repeat top/cover;}
    #s14 .cont {padding: 24.3rem 0 6.2rem;}
    #s14 .cont .titImg {max-width: 54.5%;}
    #s14 .cont .moImg {max-width: 88%; margin-top: 8rem;}
}

#s15 {}
#s15 .cont {padding: 21.4rem 0 20rem}
#s15 .cont .txtImg {max-width: 72.2rem}
#s15 .cont .imgImg {margin-top: 1rem;}
@media all and (max-width: 880px){
    #s15 .cont {padding: 17.8rem 0 12rem;}
    #s15 .cont .txtImg {max-width: 88%; margin: 0 auto;}
    #s15 .cont .imgImg {margin-top: 6rem}
}

#s16 {background: url('../img/s16_bg.jpg') no-repeat center/cover;}
#s16 .cont {padding: 30rem 0;}
#s16 .cont .txtImg {max-width: 84.6rem;}
@media all and (max-width: 880px){
    #s16 {background: url('../img/s16_bg_mo.jpg') no-repeat center/cover;}
    #s16 .cont {padding: 23rem 0;}
    #s16 .cont .txtImg {max-width: 79%;}
}

#s17 {}
#s17 .cont {}
#s17 .box {width: 50%;}
#s17 .info_box {background: #F6F7F9; padding: 14.4rem 0 12rem}
#s17 .info_box .inner {max-width: 60%; width: 60%; margin-left: auto; padding-right: 7.2rem;}
#s17 .info_box .title {margin-bottom: 6rem;}
#s17 .info_box .title .subt {color: #74B9FF; margin-bottom: 0.6rem;}
#s17 .info_box .title .tit {color: #054E85;}
#s17 .info_box .info {margin-bottom: 5.3rem;}
#s17 .info_box .info .tit {padding-bottom: 0.8rem; margin-bottom: 1.6rem; border-bottom: 1px solid #C9CDD2;}
#s17 .info_box .info .wrt {margin-bottom: 0.9rem;}
#s17 .info_box .info .prg {}
#s17 .info_box .time {margin-bottom: 5rem;}
#s17 .info_box .time .tit {padding-bottom: 0.8rem; margin-bottom: 1.6rem; border-bottom: 1px solid #C9CDD2;}
#s17 .info_box .time .lst {margin-bottom: 1.6rem}
#s17 .info_box .time .lst li + li {padding-top: 0.8rem;}
#s17 .info_box .time .lst li span {width: 7rem; margin-right: 2.6rem}
#s17 .info_box .time .prg {}
#s17 .info_box .parking {}
#s17 .info_box .parking .tit {padding-bottom: 0.8rem; margin-bottom: 1.6rem; border-bottom: 1px solid #C9CDD2; gap: 1.3rem}
#s17 .info_box .parking .link {}
#s17 .info_box .parking .link a {padding: 0.85rem 4.2rem; background: #063C64; display: inline-block;}
#s17 .info_box .parking .link a:hover {background: #033357;}
#s17 .slide_box {overflow: hidden;}
#s17 .slide_box img {height: 100%; object-fit: cover}
@media all and (max-width: 880px){
    #s17 .cont {flex-direction: column-reverse;}
    #s17 .box {width: 100%;}
    #s17 .info_box {padding: 7.8rem 0 5.6rem;}
    #s17 .info_box .inner {max-width: 80%; width: 100%; margin: 0 auto; padding: 0;}
    #s17 .info_box .title {}
    #s17 .info_box .title .subt {}
    #s17 .info_box .title .tit {}
    #s17 .info_box .info {margin-bottom: 4.4rem;}
    #s17 .info_box .info .wrt {font-size: 1.8rem; line-height: 2.8rem}
    #s17 .info_box .info .prg {font-size: 3.6rem; color: #063C64;}
    #s17 .info_box .time .lst {font-size: 1.8rem; margin-bottom: 0.8rem;}
    #s17 .info_box .time .prg {font-size: 1.4rem;}
    #s17 .info_box .parking .tit span {font-size: 1.8rem;}
    #s17 .info_box .parking .link a {width: 100%; text-align: center}
}

#s18 {}
#s18 .cont {margin-bottom: 20rem; padding-top: 15rem;}
#s18 .txtImg {max-width: 100.6rem; margin: 0 auto; padding-bottom: 9rem;}
#s18 .contImg {}
@media all and (max-width: 880px){
    #s18 .cont {margin-bottom: 9.2rem; padding-top: 10rem;}
    #s18 .txtImg {max-width: 88%; padding-bottom: 5.5rem;}
}

#s19 {}
#s19 .cont {margin-bottom: 18rem;}
#s19 .txtImg {max-width: 110.7rem; margin: 0 auto; padding-bottom: 13rem;}
#s19 .contImg {}
@media all and (max-width: 880px){
    #s19 .cont {margin-bottom: 9rem}
    #s19 .txtImg {max-width: 88%; padding-bottom: 6.4rem;}
}

#s20 {}
#s20 .cont {padding: 28rem 0 24rem;}
#s20 .left {width: calc(50% - 10.4rem);}
#s20 .right {width: 50%;}
@media all and (max-width: 880px){
    #s20 .cont {padding: 6.8rem 0 12.3rem; flex-direction: column; max-width: 88%; gap: 6rem;}
    #s20 .left {width: 100%}
    #s20 .right {width: 100%}
}

#s21 {}
#s21 .cont {margin-bottom: 27rem;}
@media all and (max-width: 880px){
    #s21 .cont {margin-bottom: 10rem}
}

#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;}

.line_trigger_off {height: 0; opacity: 0; transition: 1s;}
.line_trigger_on {height: 16rem; 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}

@media all and (max-width: 880px){
    .line_trigger_on {height: 12rem;}
}