#header {z-index: 999}
.pc_header {box-shadow: 0 3px 6px rgba(138,138,138,0.16);}
.pc_header .inner {max-width: 140.3rem; margin-left: 24rem; padding: 1.7rem 0;}
.pc_header .logo {}
.pc_header .gnb {}
.pc_header .gnb li {width: 14.4rem;}
.pc_header .gnb li.on {color: #3290B5; width: 24rem}

.mo_header {padding: 1.5rem 2.4rem;}
.mo_header .inner {}

/** 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;}
}

#s1 {}
#s1 .inner {height: 100vh;}
#s1 .inner::before {content: ''; display: block; position: absolute; height: 100%; top: 0; left: 0; background: rgba(0,180,237,0.8); width: 53%; z-index: 1;}
#s1 .inner video {width: 100%; height: 100%; object-fit: cover;}
#s1 .inner .cont {z-index: 2;}
#s1 .inner .cont .img {width: 49%;}
#s1 .inner .bot {z-index: 2}

#s2 {}
#s2 .inner {padding-top: 33.2rem;}
#s2 .inner .cont {}
#s2 .inner .cont .txt {width: 32%; margin-left: 4rem;}
#s2 .inner .cont .bot {margin-top: 4.7rem;}
#s2 .inner .cont .pic {width: 54%; right: -8%;}

#s3 {}
#s3 .inner {padding: 28rem 0; z-index: 1}
#s3 .inner .cont {gap: 3rem;}
#s3 .inner .cont .txt {margin-bottom: 3rem;}
#s3 .inner .cont .pic {}
#s3 .inner .cont2 {flex-direction: row-reverse;}
#s3 .bgImg {max-width: 47%; top: 28%;}

#s4 {padding: 11.5rem 0 14rem; background: #F6F7F9;}
#s4 .inner {gap: 9.5rem;}
#s4 .left {margin-top: 7.8rem;}
#s4 .left .tit {margin-bottom: 3.2rem;}
#s4 .left .blog {box-shadow: 0 0 8px rgba(0,0,0,0.1); max-width: 28rem; transition: 0.2s}
#s4 .left .blog:hover {box-shadow: 0 0 8px rgba(0,0,0,0.3);}
#s4 .right {}
#s4 .right .mainImg {}
#s4 .right .lst {margin-top: 4.2rem; gap: 1.6rem;}
#s4 .right .lst li {}

#s5 {}
#s5::before {content: ''; display: block; position: absolute; width: 100%; background: #222527; top: 0; height: 79%; left: 0;}
#s5 .inner {padding-top: 20rem}
#s5 .inner .txt {width: 57.5%;}
#s5 .inner .lst {margin-top: 12rem; gap: 2rem;}
#s5 .inner .lst li {}

#s6 {}
#s6 .inner {padding-top: 32rem;}
#s6 .inner .tit {width: 73%; margin-bottom: 5.7rem;}
#s6 .s6_swiper {overflow: hidden;}
#s6 .s6_swiper .swiper-wrapper {height: auto;}
#s6 .swiper-option {bottom: 0; right: 6.7%; width: 29.2rem; height: 11.5rem; z-index: 1; border-radius: 40px 0 0 0; background: #00B4ED}
#s6 .swiper-button-next,
#s6 .swiper-button-prev {z-index: 99; color: #fff}
#s6 .swiper-button-next::after,
#s6 .swiper-button-prev::after {font-size: 2rem; font-weight: bold;}
#s6 .swiper-button-next {right: 20%}
#s6 .swiper-button-prev {left: 20%;}
#s6 .swiper-pagination {top: 50%; transform: translateY(-50%); bottom: auto}
#s6 .swiper-pagination-current {font-size: 3.6rem; font-weight: bold;}

#s7 {}
#s7 .inner {padding: 32rem 0 28rem;}
#s7 .cont {}
#s7 .cont .left {width: 32%}
#s7 .cont .right {width: 45%;}

#s8 {background: url('../img/s8_bg.jpg') center/cover;}
#s8 .inner {padding: 42rem 0;}
#s8 .inner .cont {width: 73%;}

#s9 {background: #222527;}
#s9 .inner {padding: 12rem 0 15rem; max-width: 136rem;}
#s9 .box {width: 50%}
#s9 .formBox {background: url('../img/s9_bg_img.png') no-repeat; background-size: 26rem; background-position: right 1rem top 0; padding-top: 4rem;}
#s9 .formBox .title {}
#s9 .formBox .title .subt {color: #C9CDD2}
#s9 .formBox .title .tit {padding: 1.2rem 0;}
#s9 .formBox .title .prg {color: #72787F}
#s9 .formBox .fromArea {gap: 1rem; max-width: 55rem; margin-top: 6rem;}
#s9 .formBox .iptArea {gap: 1rem;}
#s9 .formBox .iptArea input {background: transparent; box-shadow: none; border-radius: 0; border: 1px solid #C9CDD2; width: 43.2rem; height: 5.2rem;}
#s9 .formBox .iptArea textarea {background: transparent; box-shadow: none; border-radius: 0; border: 1px solid #C9CDD2; width: 43.2rem; height: 16.7rem;}
#s9 .formBox .submitBtn {background: #81DCFF; width: 10.8rem; min-width: 10.8rem;}
#s9 .formBox .agree {color: #A4AAB1; margin-top: 1rem}
#s9 .formBox .agree input {margin-right: 9px}
#s9 .formBox .agree a {bottom: -2px}
#s9 .infoBox {padding-left: 5.4rem;}
#s9 .infoBox .infoArea {padding-top: 8rem;}
#s9 .infoBox .infoLst {gap: 3rem;}
#s9 .infoBox .infoLst + .infoLst {margin-top: 3.6rem;}
#s9 .infoBox .infoLst .tit {gap: 6px;}
#s9 .infoBox .infoLst .tit img {max-width: 2.4rem;}
#s9 .infoBox .infoLst .num {color: #81DCFF}
#s9 .infoBox .infoLst .time {}
#s9 .infoBox .infoLst .time li.fst {color: #81DCFF; text-decoration: underline;}
#s9 .infoBox .infoLst .time li + li {margin-top: 1rem}
#s9 .infoBox .infoLst .time li.last {color: #A4AAB1}
#s9 .infoBox .infoLst .time li span {display: inline-block; bottom: -3px; min-width: 8.6rem;}
#s9 .infoBox .infoLst .time li i {font-style: normal;}
#s9 .infoBox .ftArea {color: #72787F;}
#s9 .infoBox .ftArea .lst {}
#s9 .infoBox .ftArea .lst + .lst {}
#s9 .infoBox .ftArea .lst li {display: flex; gap: 1rem;}
#s9 .infoBox .ftArea .lst li + li {margin-top: 0.6rem;}
#s9 .infoBox .ftArea .lst li span {display: inline-block; width: 12.5rem; border-right: 1px solid #72787F;}
#s9 .infoBox .ftArea .lst + .lst span {width: 8.5rem;}
#s9 .infoBox .ftArea .copy {margin-top: 1rem;}

.formModal {z-index: 99999; display: none; max-width: 80rem;}
.formModal .modal_bg {background: rgba(0,0,0,0.6)}
.formModal .modal_box {padding: 2rem; border-radius: 10px; line-height: 2.6rem;}

@media all and (max-width: 880px){
    #wrap {overflow: hidden;}

    #s1 {}
    #s1 .inner::before {width: 100%; top: auto; bottom: 0; height: 43%;}
    #s1 .inner .cont {max-width: 88%; bottom: 5.5rem;}
    #s1 .inner .cont .img {width: 87%;}
    #s1 .inner .bot {position: relative; bottom: auto; top: -3px;}

    #s2 .inner {padding-top: 21rem;}
    #s2 .inner .cont .txt {width: 100%; margin: 0 auto; max-width: 88%;}
    #s2 .inner .cont .txt img {width: 90%;}
    #s2 .inner .cont .pic {width: 100%; right: 0; margin-top: 4.5rem;}

    #s3 .inner {padding: 19rem 0 10rem; max-width: 88%;}
    #s3 .inner .cont {flex-direction: column-reverse; gap: 4.6rem;}
    #s3 .bgImg {max-width: 100%; top: 8%;}

    #s4 {padding: 8rem 0 12.8rem;}
    #s4 .inner {flex-direction: column; max-width: 88%; gap: 4.8rem;}
    #s4 .left {margin: 0}
    #s4 .left .tit {margin: 0; max-width: 63%;}
    #s4 .right .lst {flex-wrap: wrap; gap: 1.6rem; margin-top: 1.6rem;}
    #s4 .right .lst li {width: calc((100% - 1.6rem) / 2);}
    #s4 .blog {box-shadow: 0 0 8px rgba(0,0,0,0.1);}

    #s5::before {display: none}
    #s5 .inner {padding: 13rem 0 6.8rem; background: #222527}
    #s5 .inner .txt {width: 80%;}
    #s5 .inner .lst {padding-top: 8rem; flex-direction: column; gap: 8.4rem; max-width: 94%; margin: 0; margin-left: auto}

    #s6 .inner {padding-top: 12rem; max-width: 88%;}
    #s6 .inner .tit {width: 82%; margin-bottom: 4rem;}
    #s6 .swiper-option {right: 9%; width: 40%; height: 10%; border-radius: 20px 0 0 0;}
    #s6 .swiper-pagination {font-size: 1.4rem}
    #s6 .swiper-pagination-current {font-size: 2.2rem}
    #s6 .swiper-button-next::after,
    #s6 .swiper-button-prev::after {font-size: 1.5rem}
    #s6 .swiper-button-next {right: 10%}
    #s6 .swiper-button-prev {left: 10%}
    #s6 .swiper-slide .txt .more {padding: 0.5rem 1.5rem; font-size: 1.4rem}

    #s7 .inner {padding: 16rem 0; max-width: 88%;}
    #s7 .cont {flex-direction: column; gap: 6.3rem;}
    #s7 .cont .left {width: 78%;}
    #s7 .cont .right {width: 100%;}

    #s8 .inner {padding: 22rem 0;}

    #s9 {}
    #s9 .inner {flex-direction: column; max-width: 88%; padding: 8rem 0 5.4rem;}
    #s9 .box {width: 100%;}
    #s9 .formBox {background-size: 12.6rem; padding: 0;}
    #s9 .formBox .title .subt {font-size: 1.4rem;}
    #s9 .formBox .title .tit {font-size: 2.8rem; padding: 7px 0 1.6rem;}
    #s9 .formBox .title .prg {font-size: 1.8rem;}
    #s9 .formBox .fromArea {margin-top: 2.4rem; flex-direction: column;}
    #s9 .formBox .iptArea input {width: 100%; height: 3rem}
    #s9 .formBox .iptArea textarea {width: 100%; height: 10.8rem;}
    #s9 .formBox .submitBtn {width: 100%; font-size: 1.8rem; padding: 1.2rem 0;}
    #s9 .formBox .agree {justify-content: center;}
    #s9 .infoBox {padding: 0;}
    #s9 .infoBox .infoArea {padding-top: 5.4rem;}
    #s9 .infoBox .infoLst {flex-direction: column; gap: 2.3rem;}
    #s9 .infoBox .infoLst + .infoLst {margin-top: 5.4rem; padding-bottom: 5.8rem; border-bottom: 1px solid #707070;}
    #s9 .infoBox .infoLst .num {padding-left: 3rem}
    #s9 .infoBox .infoLst .time {padding-left: 3rem}
    #s9 .infoBox .infoLst .time li + li {margin-top: 4px}
    #s9 .infoBox .ftArea {padding-top: 4.2rem;}
    #s9 .infoBox .ftArea .lst li span {width: 12.6rem;}
    #s9 .infoBox .ftArea .lst + .lst {margin-top: 0.6rem;}
    #s9 .infoBox .ftArea .lst + .lst span {width: 12.6rem;}

    .formModal .modal_box {max-width: 90%; font-size: 1.2rem; line-height: 2rem;}
}

#float {border-radius: 30px 0 0 30px; background: #fff; box-shadow: 0 3px 6px rgba(0,0,0,0.16); z-index: 9999}
#float ul {padding: 4.4rem;}
#float ul li {}
#float ul li + li {padding-top: 2.5rem; margin-top: 2.5rem; border-top: 1px solid #C9CDD2}
#float ul li a {gap: 1.2rem;}
#float ul li img {}

@media all and (max-width: 880px){
    #float {width: 100%; bottom: 0; top: auto; transform: none; border-radius: 0}
    #float ul {display: flex; padding: 1.8rem 0;}
    #float ul li {flex: 1;}
    #float ul li + li {padding: 0; margin: 0; border: 0; border-left: 1px solid #C9CDD2}
}


.trigger_top_off {bottom: -5rem; opacity: 0; transition: 1.4s}
.trigger_top_on {bottom: 0; opacity: 1; transition: 1.4s}

.trigger_left_off {right: -5rem; opacity: 0; transition: 1.4s;}
.trigger_left_on {right: 0; opacity: 1; transition: 1.4s;}

.trigger_right_off {left: -5rem; opacity: 0; transition: 1.4s;}
.trigger_right_on {left: 0; opacity: 1; transition: 1.4s;}

.trigger_bot_off {top: -5rem; opacity: 0; transition: 1.4s}
.trigger_bot_on {top: 0; opacity: 1; transition: 1.4s}

.trigger_opa_off {opacity: 0; transition: 1.4s}
.trigger_opa_on {opacity: 1; transition: 1.4s}

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

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

.fillter_left {right: -5rem; opacity: 0; transition: 1.4s;}
.fillter_left.fillter_off {right: 0; opacity: 1; transition: 1.4s;}

.fillter_top {bottom: -5rem; opacity: 0; transition: 1.4s;}
.fillter_top.fillter_off {bottom: 0; opacity: 1; transition: 1.4s;}