#header {z-index: 9997; background: #fff; transition: 0.2s;}
#header.on {border-bottom: 1px solid #ccc;}
#header .inner {padding: 3.2rem 0;}
#header .logo {}
#header .logo a {}
#header .gnbWrap {}
#header .gnb {gap: 6rem;}
#header .gnb li {}
#header .gnb li a {}
#header .gnb li:hover a {font-weight: bold; color: var(--fcp)}

@media all and (max-width: 880px){
    #header {}
    #header.on {border-bottom: 0; box-shadow: 0 0.4rem 0.8rem rgba(0,0,0,0.24)}
    #header .inner {flex-direction: column; gap: 1.2rem; padding: 2.4rem 0 0 0;}
    #header .logo {}
    #header .logo a {}
    #header .gnbWrap {overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; padding: 1.2rem 2.4rem;}
    #header .gnbWrap::-webkit-scrollbar {display: none;}
    #header .gnbWrap {-ms-overflow-style: none; scrollbar-width: none;}
    #header .gnb {font-size: 1.8rem; flex-wrap: nowrap; white-space: nowrap; gap: 0}
    #header .gnb li {flex-shrink: 0; padding-right: 3.2rem;}
    #header .gnb li a {}
}

#float {z-index: 9996}
#float .lst {}
#float .lst + .lst {margin-top: 0.4rem}
#float .lst .inn {gap: 0.4rem}
#float .lst .txt {padding: 0.4rem 0.8rem 0.2rem; border-radius: 0.4rem; background: #fff; opacity: 0; transition: 0.2s;}
#float .lst .ico {background: rgba(255,255,255,0.8); border-radius: 4rem 0 0 4rem; padding: 1.4rem 1.1rem 1.4rem 1.7rem}
#float .top .ico {background: #E13C55}
#float .lst:hover .txt {opacity: 1;}

@media all and (max-width: 880px){
    #float {right: auto; display: flex; max-width: var(--innerMo); left: 50%; transform: translateX(-50%); width: 100%; padding: 1.2rem 2rem; border-radius: 10rem; justify-content: space-between; gap: 2rem; background: rgba(255,255,255,0.6); backdrop-filter: blur(12px); bottom: 2%; top: auto; align-items: center;}
    #float .lst {}
    #float .lst + .lst {margin: 0}
    #float .lst .inn {flex-direction: row-reverse;}
    #float .lst .txt {opacity: 1; padding: 0; background: transparent; font-size: 1.2rem;}
    #float .lst .ico {padding: 0.6rem; border-radius: 50%;}
    #float .lst .ico img {width: 2rem;}
    #float .top .ico {}
}

#footer {background: #212121;}
#footer .inner {padding: 4rem 0;}
#footer .infoPanel {}
#footer .infoPanel .logo {width: 21rem;}
#footer .infoPanel .info {margin-top: 2.4rem;}
#footer .infoPanel .info .lst {}
#footer .infoPanel .info .lst li {display: flex; gap: 1rem;}
#footer .infoPanel .info .lst li + li {padding-left: 1rem; margin-left: 1rem;}
#footer .infoPanel .info .lst li + li::before {content: ''; display: block; position: absolute; width: 1px; height: 70%; background: #fff; left: 0; top: 50%; transform: translateY(-50%);}
#footer .infoPanel .copy {margin-top: 0.8rem;}
#footer .btnPanel {gap: 1.2rem;}
#footer .btnPanel .ftBtn {padding: 1.2rem 2.4rem; border: 1px solid rgba(255,255,255,0.5); border-radius: 5rem; gap: 1rem; transition: 0.1s;}
#footer .btnPanel .ftBtn img {transition: 0.1s;}
#footer .btnPanel .ftBtn .txt {opacity: 0.9; transition: 0.1s;}
#footer .btnPanel .ftBtn:hover {background: #fff; border: 1px solid #fff;}
#footer .btnPanel .ftBtn:hover img {filter: invert();}
#footer .btnPanel .ftBtn:hover .txt {color: #14141E; opacity: 1;}

@media all and (max-width: 880px){
    #footer {}
    #footer .inner {max-width: var(--innerMo); padding: 4rem 0 10rem; flex-direction: column; gap: 2.4rem;}
    #footer .infoPanel {}
    #footer .infoPanel .logo {}
    #footer .infoPanel .info {}
    #footer .infoPanel .info .lst {flex-direction: column; gap: 0.4rem;}
    #footer .infoPanel .info .lst li {}
    #footer .infoPanel .info .lst li + li {padding: 0; margin: 0}
    #footer .infoPanel .info .lst li + li::before {display: none;}
    #footer .infoPanel .copy {}
    #footer .btnPanel {flex-direction: column; width: 100%;}
    #footer .btnPanel .ftBtn {width: 100%; padding: 0.7rem 2.4rem; height: 4.6rem;}
    #footer .btnPanel .ftBtn img {}
    #footer .btnPanel .ftBtn .txt {font-size: 1.6rem;}
}

#modal {z-index: 9999; display: none;}
#modal .modalBg {background: rgba(0, 0, 0, 0.7);}
#modal .modalBox {background: #fff; border-radius: 0.8rem; display: none}
#modal .modalBox.on {display: block;}
#modal .modalBox .btns {margin-top: 2.4rem;}
#modal .modalBox .btn {font-size: 1.8rem; color: #fff; background: #2C2C2C; border-radius: 0.4rem; padding: 1rem 3.2rem; cursor: pointer;}
#modal .boxA {padding: 2.4rem;}
#modal .boxA .imgs {max-width: 68.2rem;}
#modal .boxB {max-width: 72rem; padding: 3.2rem 2.4rem;}
#modal .boxB .tit {padding-bottom: 2.4rem;}
#modal .boxB .txt {max-height: 33rem; overflow-y: auto; padding: 1.2rem; border: 1px solid #ccc; border-radius: 0.4rem; color: #555; line-height: 1.3}

@media all and (max-width: 880px){
    #modal {}
    #modal .modalBg {}
    #modal .modalBox {width: 100%; max-width: 87.2%;}
    #modal .modalBox .btns {}
    #modal .modalBox .btn {font-size: 1.6rem;}
    #modal .boxA {padding: 1.2rem;}
    #modal .boxA .imgs {max-width: 30.2rem;}
    #modal .boxB {padding: 2.4rem 2rem;}
    #modal .boxB .tit {font-size: 2rem; padding-bottom: 1.6rem;}
    #modal .boxB .txt {font-size: 1.4rem;}
}

#formModal {z-index: 9998; display: none;}
#formModal .modalBg {background: rgba(0, 0, 0, 0.7);}
#formModal .modalBox {background: #fff; border-radius: 0.8rem; width: 100%; max-width: 120rem; border-radius: 1.2rem 1.2rem 0 0;}
#formModal .modalBox .title {background: #E13C55; padding: 2.4rem 4rem; border-radius: 1.2rem 1.2rem 0 0; overflow: hidden;}
#formModal .modalBox .title .tit {letter-spacing: 0.05em}
#formModal .modalBox .title .wrt {padding-top: 0.6rem;}
#formModal .modalBox .title .ico {}
#formModal .modalBox .formBox {background: #F7F7F7; padding: 4rem; max-height: 66rem; overflow: auto;}
#formModal .modalBox .formBox .topArea {gap: 2.4rem}
#formModal .modalBox .formBox .box {width: 100%; background: #fff; padding: 3.2rem 3.2rem 4rem;}
#formModal .modalBox .formBox .aptBox {}
#formModal .modalBox .formBox .adBox {display: none}
#formModal .modalBox .formBox .btit {padding-bottom: 2rem;}
#formModal .modalBox .formBox .iptLine {gap: 1.2rem;}
#formModal .modalBox .formBox .iptLine + .iptLine {margin-top: 1.8rem;}
#formModal .modalBox .formBox .iptLine.ess::before {content: ''; display: block; position: absolute; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: #DC143C; top: 1.2rem; right: 1.2rem; z-index: 1}
#formModal .modalBox .formBox .ipt {width: 100%; border-radius: 0.4rem; padding: 0 1.6rem; height: 5.6rem; box-shadow: none; font-size: 1.6rem; border: 1px solid #CCCCCC; color: #121212; font-family: inherit; text-indent: 0;}
#formModal .modalBox .formBox .ipt::placeholder {color: #aaa}
#formModal .modalBox .formBox .ipt:placeholder-shown {background: #FAFAFA;}
#formModal .modalBox .formBox .ipt:focus-visible {border: 1px solid #2C2C2C; background: #fff; outline: 0;}
#formModal .modalBox .formBox .ipt:focus-visible::placeholder {opacity: 0}
#formModal .modalBox .formBox .adrBtn {font-size: 1.8rem; color: #fff; background: #2C2C2C; border-radius: 0.5rem; padding: 1.5rem 3rem; flex-shrink: 0; font-family: inherit;}
#formModal .modalBox .formBox .chkLine {}
#formModal .modalBox .formBox .chkLine + .chkLine {margin-top: 1.6rem;}
#formModal .modalBox .formBox .chkLine + .iptLine {margin-top: 1.7rem;}
#formModal .modalBox .formBox .chkLine.ess::before {content: ''; display: block; position: absolute; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: #DC143C; top: 0; right: 1.2rem; z-index: 1}
#formModal .modalBox .formBox .chkLine .ctit {margin-right: 2.4rem; flex-shrink: 0;}
#formModal .modalBox .formBox .chkLine .clabel {gap: 1rem 0}
#formModal .modalBox .formBox .chkLine label {display: flex; align-items: center; gap: 0.8rem; min-width: 11.4rem;}
#formModal .modalBox .formBox .contArea {margin: 2.4rem 0;}
#formModal .modalBox .formBox .txtLine {}
#formModal .modalBox .formBox .txtLine textarea {box-shadow: none; width: 100%; border: 1px solid #CCCCCC; font-family: inherit; font-size: 1.6rem; padding: 1.6rem; border-radius: 0.4rem;}
#formModal .modalBox .formBox .txtLine textarea::placeholder {color: #aaa}
#formModal .modalBox .formBox .txtLine textarea:focus-visible {border: 1px solid #2C2C2C; background: #fff; outline: 0;}
#formModal .modalBox .formBox .txtLine textarea:focus-visible::placeholder {opacity: 0}
#formModal .modalBox .formBox .botArea {}
#formModal .modalBox .formBox .chkArea {gap: 0.4rem;}
#formModal .modalBox .formBox .chkArea input {margin-right: 1.2rem; width: 2rem; height: 2rem;}
#formModal .modalBox .formBox .chkArea span {color: #888; cursor: pointer}
#formModal .modalBox .formBox .btnArea {gap: 0.4rem;}
#formModal .modalBox .formBox .closeBtn {padding: 1.8rem 4rem; background: #2c2c2c; border-radius: 0.8rem;}
#formModal .modalBox .formBox .closeBtn:hover {background: #121212}
#formModal .modalBox .formBox .submitBtn {padding: 1.8rem 4rem;}

@media all and (max-width: 880px){
    #formModal {}
    #formModal .modalBg {}
    #formModal .modalBox {width: 100%; max-width: 87.2%; border-radius: 1.2rem; overflow: hidden;}
    #formModal .modalBox .title {padding: 2.4rem;}
    #formModal .modalBox .title .tit {font-size: 2.2rem;}
    #formModal .modalBox .title .wrt {font-size: 1.6rem; padding-top: 1.2rem;}
    #formModal .modalBox .title .ico {display: none;}
    #formModal .modalBox .formBox {padding: 2.4rem 1.2rem; max-height: 70vh;}
    #formModal .modalBox .formBox .topArea {flex-direction: column;}
    #formModal .modalBox .formBox .box {padding: 2rem;}
    #formModal .modalBox .formBox .btit {font-size: 1.8rem; padding-bottom: 1.6rem;}
    #formModal .modalBox .formBox .iptLine {flex-direction: column;}
    #formModal .modalBox .formBox .iptLine + .iptLine {margin-top: 1.2rem;}
    #formModal .modalBox .formBox .ipt {font-size: 1.6rem; height: 4.8rem}
    #formModal .modalBox .formBox .adrBtn {font-size: 1.6rem; padding: 1.6rem 0;}
    #formModal .modalBox .formBox .chkLine {flex-wrap: wrap; font-size: 1.6rem; gap: 1rem 1.4rem;}
    #formModal .modalBox .formBox .chkLine .ctit {width: 100%; font-weight: 500;}
    #formModal .modalBox .formBox .contArea {}
    #formModal .modalBox .formBox .txtLine {}
    #formModal .modalBox .formBox .txtLine textarea {font-size: 1.6rem;}
    #formModal .modalBox .formBox .botArea {flex-direction: column; align-items: baseline; gap: 4rem;}
    #formModal .modalBox .formBox .chkArea {font-size: 1.5rem;}
    #formModal .modalBox .formBox .chkArea input {margin-right: 0.8rem;}
    #formModal .modalBox .formBox .btnArea {width: 100%}
    #formModal .modalBox .formBox .closeBtn {width: 100%; font-size: 1.6rem; padding: 1.7rem 0;}
    #formModal .modalBox .formBox .submitBtn {width: 100%; font-size: 1.6rem; padding: 1.7rem 0;}
}


.btn {}
.btn .txt {}
.btn .arr {}
.btn .arr .dimg {}
.btn .arr .himg {opacity: 0; transition: 0.2s;}
.btn:hover .arr .himg {opacity: 1}
.btnA {background: #2C2C2C; border: 2px solid #2C2C2C; border-radius: 0.8rem; box-sizing: border-box; color: #fff; transition: 0.2s;}
.btnA:hover {background: #fff; color: #2C2C2C;}
.btnB {background: #DC143C; border: 2px solid #DC143C; border-radius: 0.8rem; box-sizing: border-box; color: #fff; transition: 0.2s;}
.btnB:hover {background: #fff; color: #DC143C;}
input[type='checkbox'] {width: 2rem; height: 2rem; top: auto; background: url('../img/ic_check_off.svg') center/contain; appearance: none; margin: 0}
input[type='checkbox']:checked {background: url('../img/ic_check_on.svg') center/contain;}

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

#wrap {overflow: hidden; margin-top: 9.6rem;}
#wrap .commTitle {}
#wrap .commTitle .subt {background: var(--fcp); padding: 1.2rem 2.2rem; border-radius: 0.8rem; margin-bottom: 2.4rem;}
#wrap .commTitle .tit {line-height: 1.4;}
#wrap .commTitle .wrt {padding-top: 2.4rem; line-height: 1.4}

@media all and (max-width: 880px){
    .btn {justify-content: space-between; padding: 1.7rem 2.4rem;}
    .btn .txt {font-size: 1.6rem;}
    .btn .arr {width: 2rem;}
    .btn .arr .dimg {}
    .btn .arr .himg {}
    .btnA {}
    .btnB {}

    #wrap {margin-top: 11.3rem;}
    #wrap .commTitle {}
    #wrap .commTitle .subt {font-size: 1.8rem;}
    #wrap .commTitle .tit {font-size: 4rem; line-height: 1.3}
    #wrap .commTitle .wrt {font-size: 1.8rem; padding-top: 2rem;}

}

#s1 {}
#s1 .inner {padding: 8rem 0 10rem;}
#s1 .commTitle {}
#s1 .commTitle .tit {}
#s1 .commTitle .wrt {}
#s1 .s1Swiper {width: 100%; overflow: visible; margin: 8rem 0 0 0;}
#s1 .s1Swiper .slide {width: 70rem; transition: transform 0.4s ease, z-index 0.4s; z-index: 1; transform: scale(0.75); border-radius: 1.2rem; overflow: hidden; border: 0.05rem solid #000;}
#s1 .s1Swiper .swiper-slide-visible::before {content: ''; display: block; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: #000; background: linear-gradient(270deg,rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 50%); z-index: 1}
#s1 .s1Swiper .swiper-slide-prev,
#s1 .s1Swiper .swiper-slide-next {transform: scale(0.85); z-index: 5}
#s1 .s1Swiper .swiper-slide-next::before {background: #000; background: linear-gradient(90deg,rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 50%);}
#s1 .s1Swiper .swiper-slide-next + .swiper-slide-visible::before {background: #000; background: linear-gradient(90deg,rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 50%);}
#s1 .s1Swiper .swiper-slide-active {z-index: 10; transform: scale(0.97);}
#s1 .s1Swiper .swiper-slide-active::before {display: none}
#s1 .s1Swiper .frame {width: 70rem; height: 40.6rem; border-radius: 1.2rem; z-index: 1; pointer-events: none; border: 1.2rem solid;}
#s1 .bgTxt {white-space: nowrap; overflow: hidden; margin: 10rem 0;}
#s1 .bgTxt .marquee {display: inline-flex; align-items: center; animation: marquee 30s linear infinite; gap: 8rem;}
#s1 .bgTxt .marquee img {height: auto; flex-shrink: 0;}
#s1 .btnArea {gap: 1.2rem;}
#s1 .btnArea .btn {padding: 2.1rem 2rem; display: flex; align-items: center; gap: 1.2rem;}
#s1 .btnArea .btn .txt {}
#s1 .btnArea .btn .arr {}
#s1 .btnArea .btn .arr .dimg {}
#s1 .btnArea .btn .arr .himg {}

@keyframes marquee {
    0% {transform: translateX(0);}
    100% {transform: translateX(-50%);}
}

@media all and (max-width: 880px){
    #s1 {}
    #s1 .inner {padding: 8rem 0 16.5rem;}
    #s1 .commTitle {}
    #s1 .commTitle .tit {}
    #s1 .commTitle .wrt {}
    #s1 .s1Swiper {margin-top: 4.6rem;}
    #s1 .s1Swiper .slide {width: 32.7rem; border-radius: 0}
    #s1 .s1Swiper .slide::before {display: none !important}
    #s1 .s1Swiper .swiper-slide-prev,
    #s1 .s1Swiper .swiper-slide-next {}
    #s1 .s1Swiper .swiper-slide-active {}
    #s1 .s1Swiper .frame {width: 32.7rem; border: 0.6rem solid; height: 19rem; border-radius: 0.6rem;}
    #s1 .bgTxt {margin: 0; position: absolute; bottom: 3.2rem;}
    #s1 .bgTxt .marquee {gap: 5rem;}
    #s1 .bgTxt .marquee img {height: 3.6rem;}
    #s1 .btnArea {max-width: var(--innerMo); margin: 0 auto; flex-direction: column; margin-top: 4rem;}
    #s1 .btnArea .btn {}
    #s1 .btnArea .btn .txt {}
    #s1 .btnArea .btn .arr {}
    #s1 .btnArea .btn .arr .dimg {}
    #s1 .btnArea .btn .arr .himg {}
}

#s2 {}
#s2 .inner {}
#s2 .boxArea {background: var(--fcs);}
#s2 .boxIn {max-width: 160rem; margin: 0 auto; padding: 13.8rem 0;}
#s2 .commTitle {}
#s2 .commTitle .tit {color: #F3CDD2}
#s2 .commTitle .tit span {color: #fff}
#s2 .commTitle .wrt {}
#s2 .lstArea {margin-top: 8rem; gap: 2rem}
#s2 .lstArea .lst {width: calc((100% - 4rem) / 3); gap: 4rem; padding: 3.2rem; background: #FFF; background: linear-gradient(135deg,rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.2) 100%); border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 -1.6rem 3rem rgba(0,0,0,0.1);}
#s2 .lstArea .lst .ico {width: 8rem; margin-left: auto}
#s2 .lstArea .lst .txts {}
#s2 .lstArea .lst .txts .tit {}
#s2 .lstArea .lst .txts .wrt {line-height: 1.4; padding-top: 0.8rem;}

@media all and (max-width: 880px){
    #s2 {}
    #s2 .inner {}
    #s2 .boxArea {border-radius: 0}
    #s2 .boxIn {padding: 10rem 0; max-width: var(--innerMo);}
    #s2 .commTitle {}
    #s2 .commTitle .tit {}
    #s2 .commTitle .wrt {padding-top: 2.4rem;}
    #s2 .lstArea {margin-top: 6rem; flex-direction: column; gap: 2.4rem;}
    #s2 .lstArea .lst {width: 100%; width: 100%; padding: 2.4rem; gap: 2.5rem;}
    #s2 .lstArea .lst .ico {width: 6rem;}
    #s2 .lstArea .lst .txts {}
    #s2 .lstArea .lst .txts .tit {font-size: 2.2rem;}
    #s2 .lstArea .lst .txts .wrt {font-size: 1.7rem;}
}

#s3 {}
#s3 .inner {padding: 28rem 0;}
#s3 .commTitle {margin-bottom: 12rem}
#s3 .commTitle .tit {}
#s3 .commTitle .wrt {}
#s3 .lstArea {width: 100%; max-width: 136rem; margin: 0 auto;}
#s3 .lstArea .lst {flex: 1;}
#s3 .lstArea .lst .per {}
#s3 .lstArea .lst .per span {}
#s3 .lstArea .lst .wrt {padding-top: 1.2rem}
#s3 .bgIll {}
#s3 .bgIll.bgIll01 {left: -10rem}
#s3 .bgIll.bgIll02 {right: -10rem}

@media all and (max-width: 880px){
    #s3 {}
    #s3 .inner {padding: 10rem 0;}
    #s3 .commTitle {margin-bottom: 6rem;}
    #s3 .commTitle .tit {}
    #s3 .commTitle .wrt {font-size: 2rem; padding-top: 2.4rem;}
    #s3 .lstArea {flex-direction: column; gap: 6rem;}
    #s3 .lstArea .lst {}
    #s3 .lstArea .lst .per {font-size: 6rem;}
    #s3 .lstArea .lst .wrt {font-size: 1.6rem; padding-top: 0.8rem;}
    #s3 .bgIll {}
    #s3 .bgIll.bgIll01 {display: none}
    #s3 .bgIll.bgIll02 {display: none}
}

#s4 {}
#s4 .inner {}
#s4 .boxArea {background: #2c2c2c}
#s4 .boxInn {max-width: 156rem; padding: 13.5rem 0;}
#s4 .commTitle {margin-bottom: 10rem}
#s4 .commTitle .tit {}
#s4 .commTitle .wrt {}
#s4 .lstArea {gap: 6rem;}
#s4 .lstArea .lst {opacity: 0.4; transition: 0.4s; width: calc((100% - 12rem) / 3)}
#s4 .lstArea .lst:hover {opacity: 1;}
#s4 .lstArea .lst .img {}
#s4 .lstArea .lst .txt {padding-top: 3.2rem;}

@media all and (max-width: 880px){
    #s4 {}
    #s4 .inner {}
    #s4 .boxArea {border-radius: 0;}
    #s4 .boxInn {padding: 10rem 0; max-width: var(--innerMo);}
    #s4 .commTitle {margin-bottom: 4rem;}
    #s4 .commTitle .tit {}
    #s4 .commTitle .wrt {font-size: 2rem; padding-top: 2.4rem;}
    #s4 .lstArea {flex-direction: column; gap: 4.2rem;}
    #s4 .lstArea .lst {width: 100%; opacity: 1;}
    #s4 .lstArea .lst .img {}
    #s4 .lstArea .lst .txt {font-size: 2rem;}
}

#s5 {}
#s5 .inner {padding: 28rem 0;}
#s5 .commTitle {margin-bottom: 10rem}
#s5 .commTitle .subt {}
#s5 .commTitle .tit {}
#s5 .commTitle .wrt {}
#s5 .lstArea {gap: 2.2rem}
#s5 .lstArea .lst {width: calc((100% - 4.4rem) / 3); background: #121212;}
#s5 .lstArea .lst::before {content: ''; display: block; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: #000000; background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 51%); z-index: 1; border-radius: 1.2rem}
#s5 .lstArea .lst .img {transition: 0.3s;}
#s5 .lstArea .lst .tit {z-index: 1; padding: 3.2rem; bottom: 0; transition: 0.3s;}
#s5 .lstArea .lst .wrt {bottom: 0; padding: 3.2rem; line-height: 1.5; z-index: 1; opacity: 0; transition: 0.6s;}
#s5 .lstArea .lst:hover {}
#s5 .lstArea .lst:hover .img {opacity: 0.25}
#s5 .lstArea .lst:hover .tita {bottom: 22%}
#s5 .lstArea .lst:hover .titb {bottom: 15%;}
#s5 .lstArea .lst:hover .wrt {opacity: 1}

@media all and (max-width: 880px){
    #s5 {}
    #s5 .inner {padding: 10rem 0; max-width: var(--innerMo);}
    #s5 .commTitle {margin-bottom: 6rem;}
    #s5 .commTitle .subt {}
    #s5 .commTitle .tit {}
    #s5 .commTitle .wrt {font-size: 2rem; padding-top: 2.4rem;}
    #s5 .lstArea {flex-direction: column; gap: 6rem;}
    #s5 .lstArea .lst {width: 100%; background: none;}
    #s5 .lstArea .lst::before {display: none;}
    #s5 .lstArea .lst .img {opacity: 1;}
    #s5 .lstArea .lst .tit {position: relative; color: #121212; padding: 2.4rem 0 1.2rem; font-size: 2.4rem;}
    #s5 .lstArea .lst .wrt {opacity: 1; position: relative; color: #121212; padding: 0; line-height: 1.5;}
    #s5 .lstArea .lst:hover .img {opacity: 1;}
}

#s6 {}
#s6 .inner {}
#s6 .commTitle {margin-bottom: 10rem}
#s6 .commTitle .subt {}
#s6 .commTitle .tit {}
#s6 .contArea {gap: 10rem;}
#s6 .bannArea {width: 100%; max-width: 86.8rem; flex-shrink: 0}
#s6 .bannArea .imgs {height: 50.5rem; background: #121212}
#s6 .bannArea .imgs .banImg {position: absolute; top: 0; transition: 0.2s; opacity: 0}
#s6 .bannArea .imgs .banImg.on {z-index: 1; opacity: 1;}
#s6 .bannArea .prg {letter-spacing: -0.02em; margin-top: 2.4rem}
#s6 .lstArea {width: 100%;}
#s6 .lstArea .lst {cursor: pointer;}
#s6 .lstArea .lst + .lst {padding-top: 2.8rem; margin-top: 2.8rem; border-top: 1px solid #D7D7D7}
#s6 .lstArea .lst .txts {}
#s6 .lstArea .lst .txts .subt {color: #DC143C; padding-bottom: 0.4rem; display: none;}
#s6 .lstArea .lst .txts .tit {color: #aaa}
#s6 .lstArea .lst .txts .wrt {padding-top: 1.2rem; display: none;}
#s6 .lstArea .lst .arr {transition: 0.2s; flex-shrink: 0}

#s6 .lstArea .lst.on .txts .subt {}
#s6 .lstArea .lst.on .txts .tit {color: #2C2C2C}
#s6 .lstArea .lst.on .txts .wrt {}
#s6 .lstArea .lst.on .arr {transform: scaleY(-1);}

@media all and (max-width: 880px){
    #s6 {}
    #s6 .inner {max-width: var(--innerMo);}
    #s6 .commTitle {margin-bottom: 6rem;}
    #s6 .commTitle .subt {}
    #s6 .commTitle .tit {}
    #s6 .contArea {gap: 4rem; flex-direction: column;}
    #s6 .bannArea {}
    #s6 .bannArea .imgs {height: 19.5rem;}
    #s6 .bannArea .imgs .banImg {}
    #s6 .bannArea .imgs .banImg.on {}
    #s6 .bannArea .prg {font-size: 1.3rem; margin-top: 1.6rem;}
    #s6 .lstArea {}
    #s6 .lstArea .lst {gap: 2.4rem;}
    #s6 .lstArea .lst + .lst {padding-top: 1.6rem; margin-top: 1.6rem;}
    #s6 .lstArea .lst .txts {}
    #s6 .lstArea .lst .txts .subt {font-size: 1.4rem;}
    #s6 .lstArea .lst .txts .tit {font-size: 2.4rem;}
    #s6 .lstArea .lst .txts .wrt {font-size: 1.6rem;}
    #s6 .lstArea .lst .arr {width: 4rem;}
}


#s7 {}
#s7 .inner {padding: 28rem 0; justify-content: space-between;}
#s7 .txtArea {}
#s7 .commTitle {}
#s7 .commTitle .tit {}
#s7 .commTitle .wrt {}
#s7 .btnArea {margin: 6rem 0 10rem;}
#s7 .btnArea .btn {display: inline-flex; padding: 2.1rem 2.4rem; gap: 1.2rem;}
#s7 .btnArea .btn .txt {transition: 0.2s;}
#s7 .btnArea .btn .arr {}
#s7 .btnArea .btn .arr .dimg {}
#s7 .btnArea .btn .arr .himg {}
#s7 .btnArea .btn:hover .txt {color: var(--fcp)}
#s7 .lstArea {gap: 2.4rem;}
#s7 .lstArea .lst {padding: 3.2rem 2.4rem; border: 1px solid #CCCCCC; border-radius: 0.8rem; width: 36rem; transition: 0.2s;}
#s7 .lstArea .lst .ltit {text-align: center; margin-bottom: 2.4rem;}
#s7 .lstArea .lst .llst {}
#s7 .lstArea .lst .llst li {width: 100%}
#s7 .lstArea .lst .llst li+li::before {content: ''; display: block; position: absolute; width: 1px; height: 85%; background: #D7D7D7; left: 0; top: 50%; transform: translateY(-50%);}
#s7 .lstArea .lst .llst li .ico {}
#s7 .lstArea .lst .llst li .txt {padding-top: 1.2rem;}
#s7 .mapArea {max-width: 62.3rem;}

#s7 .lstArea .lst:hover {box-shadow: 0 1.2rem 1.8rem rgba(0,0,0,0.12); border: 1px solid var(--fcp)}

@media all and (max-width: 880px){
    #s7 {}
    #s7 .inner {padding: 10rem 0; max-width: var(--innerMo); flex-direction: column; gap: 4rem;}
    #s7 .txtArea {width: 100%;}
    #s7 .commTitle {}
    #s7 .commTitle .tit {}
    #s7 .commTitle .wrt {font-size: 2rem; padding-top: 2.4rem;}
    #s7 .btnArea {margin: 4rem 0;}
    #s7 .btnArea .btn {width: 100%; padding: 1.7rem 2.4rem;}
    #s7 .btnArea .btn .txt {}
    #s7 .btnArea .btn .arr {}
    #s7 .btnArea .btn .arr .dimg {}
    #s7 .btnArea .btn .arr .himg {}
    #s7 .lstArea {gap: 1.2rem;}
    #s7 .lstArea .lst {width: calc((100% - 1.2rem) / 2); padding: 2rem 0;}
    #s7 .lstArea .lst .ltit {font-size: 2.2rem; margin-bottom: 1.2rem;}
    #s7 .lstArea .lst .llst {}
    #s7 .lstArea .lst .llst li {}
    #s7 .lstArea .lst .llst li .ico {width: 4.4rem;}
    #s7 .lstArea .lst .llst li .txt {font-size: 1.4rem; padding-top: 0.8rem; text-align: center;}
    #s7 .mapArea {width: 100%;}
}

#s8 {}
#s8 .inner {}
#s8 .commTitle {}
#s8 .commTitle .tit {}
#s8 .commTitle .wrt {}
#s8 .lstArea {justify-content: space-between; margin-top: 10rem;}
#s8 .lstArea .lst {padding: 2.4rem 2.4rem 4rem; border-radius: 1.2rem; transition: 0.2s;}
#s8 .lstArea .lst .thumb {border-radius: 1.2rem; overflow: hidden;}
#s8 .lstArea .lst .tit {padding: 2.4rem 0 1.2rem; transition: 0.2s;}
#s8 .lstArea .lst .wrt {line-height: 1.5; transition: 0.2s;}
#s8 .lstArea .lst:hover {background: var(--fcp); box-shadow: 0 1.2rem 2.4rem rgba(0,0,0,0.24);}
#s8 .lstArea .lst:hover .tit {color: #fff;}
#s8 .lstArea .lst:hover .wrt {color: #fff;}

@media all and (max-width: 880px){
    #s8 {}
    #s8 .inner {max-width: var(--innerMo);}
    #s8 .commTitle {}
    #s8 .commTitle .tit {}
    #s8 .commTitle .wrt {font-size: 2rem; padding-top: 2.4rem;}
    #s8 .lstArea {margin-top: 6rem; flex-direction: column; gap: 3.6rem;}
    #s8 .lstArea .lst {width: 100%; padding: 0}
    #s8 .lstArea .lst .thumb {}
    #s8 .lstArea .lst .tit {font-size: 2.4rem; padding: 1.2rem 0 0.8rem;}
    #s8 .lstArea .lst .wrt {font-size: 1.6rem;}
    #s8 .lstArea .lst:hover {background: #fff; box-shadow: none;}
    #s8 .lstArea .lst:hover .tit {color: inherit;}
    #s8 .lstArea .lst:hover .wrt {color: inherit;}
}

#s9 {}
#s9 .inner {padding: 28rem 0;}
#s9 .commTitle {margin-bottom: 10rem}
#s9 .commTitle .tit {}
#s9 .commTitle .wrt {}
#s9 .s9Swiper {}
#s9 .s9Swiper .slide {width: 44.8rem; transform: scale(0.63); transition: transform 0.4s ease; border-radius: 1.2rem; overflow: hidden;}
#s9 .s9Swiper .swiper-slide-active {transform: scale(1); z-index: 1; box-shadow: 0 1.2rem 2rem rgba(0,0,0,0.24)}
#s9 .s9Swiper .swiper-slide-prev::before {content: ''; display: block; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: #000; background: linear-gradient(270deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 60%); z-index: 1;}
#s9 .s9Swiper .swiper-slide-next::before {content: ''; display: block; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: #000; background: linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 60%); z-index: 1;}
#s9 .s9Swiper .s9Prev,
#s9 .s9Swiper .s9Next {width: 7.2rem; height: 7.2rem; position: absolute; top: 50%; transform: translateY(-50%); transition: 0.2s; z-index: 1; border-radius: 50%; cursor: pointer;}
#s9 .s9Swiper .s9Prev {left: 36.4%}
#s9 .s9Swiper .s9Next {right: 36.4%}
#s9 .s9Swiper .s9Prev .dimg,
#s9 .s9Swiper .s9Next .dimg {transition: 0.2s;}
#s9 .s9Swiper .s9Prev .himg,
#s9 .s9Swiper .s9Next .himg {opacity: 0; transition: 0.2s;}
#s9 .s9Swiper .s9Prev:hover .dimg,
#s9 .s9Swiper .s9Next:hover .dimg {opacity: 0}
#s9 .s9Swiper .s9Prev:hover .himg,
#s9 .s9Swiper .s9Next:hover .himg {opacity: 1; filter: drop-shadow(0 0.4rem 1.2rem rgba(0,0,0,0.24));}

@media all and (max-width: 880px){
    #s9 {}
    #s9 .inner {padding: 10rem 0; max-width: var(--innerMo); margin: 0 auto}
    #s9 .commTitle {margin-bottom: 2rem;}
    #s9 .commTitle .tit {}
    #s9 .commTitle .wrt {font-size: 2rem; padding-top: 2.4rem;}
    #s9 .s9Swiper {}
    #s9 .s9Swiper .slide {}
    #s9 .s9Swiper .swiper-slide-active {transform: scale(0.8);}
    #s9 .s9Swiper .s9Prev,
    #s9 .s9Swiper .s9Next {width: 4rem; height: 4rem;}
    #s9 .s9Swiper .s9Prev {left: 4%;}
    #s9 .s9Swiper .s9Next {right: 4%;}
    #s9 .s9Swiper .moniter {}
}

#s10 {}
#s10 .inner {padding-bottom: 20.5rem;}
#s10 .commTitle {}
#s10 .commTitle .tit {}
#s10 .commTitle .wrt {}
#s10 .tabBtns {margin: 6rem 0 4rem; gap: 1.2rem;}
#s10 .tabBtns .btn {width: 28rem; padding: 2rem 0; color: #DC143C; border: 2px solid #DC143C; text-align: center; cursor: pointer;}
#s10 .tabBtns .btn.on {color: #fff; background: #DC143C}
#s10 .formBox {background: #F7F7F7; padding: 4rem;}
#s10 .formBox .topArea {gap: 2.4rem}
#s10 .formBox .box {width: 100%; background: #fff; padding: 3.2rem 3.2rem 4rem;}
#s10 .formBox .aptBox {}
#s10 .formBox .adBox {display: none}
#s10 .formBox .btit {padding-bottom: 2.4rem;}
#s10 .formBox .iptLine {gap: 1.2rem;}
#s10 .formBox .iptLine + .iptLine {margin-top: 2.4rem;}
#s10 .formBox .iptLine.ess::before {content: ''; display: block; position: absolute; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: #DC143C; top: 1.2rem; right: 1.2rem; z-index: 1}
#s10 .formBox .ipt {width: 100%; border-radius: 0.4rem; padding: 0 1.6rem; height: 5.6rem; box-shadow: none; font-size: 1.8rem; border: 1px solid #CCCCCC; color: #121212; font-family: inherit; text-indent: 0;}
#s10 .formBox .ipt::placeholder {color: #aaa}
#s10 .formBox .ipt:placeholder-shown {background: #FAFAFA;}
#s10 .formBox .ipt:focus-visible {border: 1px solid #2C2C2C; background: #fff; outline: 0;}
#s10 .formBox .ipt:focus-visible::placeholder {opacity: 0}
#s10 .formBox .adrBtn {font-size: 1.8rem; color: #fff; background: #2C2C2C; border-radius: 0.5rem; padding: 1.5rem 3rem; flex-shrink: 0; font-family: inherit;}
#s10 .formBox .chkLine {}
#s10 .formBox .chkLine + .chkLine {margin-top: 1.6rem;}
#s10 .formBox .chkLine + .iptLine {margin-top: 1.7rem;}
#s10 .formBox .chkLine.ess::before {content: ''; display: block; position: absolute; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: #DC143C; top: 0; right: 1.2rem; z-index: 1}
#s10 .formBox .chkLine .ctit {margin-right: 2.4rem;}
#s10 .formBox .chkLine label {display: flex; align-items: center; gap: 0.8rem; min-width: 11.4rem;}
#s10 .formBox .contArea {margin: 2.4rem 0;}
#s10 .formBox .txtLine {}
#s10 .formBox .txtLine textarea {box-shadow: none; width: 100%; border: 1px solid #CCCCCC; font-family: inherit; font-size: 1.8rem; padding: 1.6rem; border-radius: 0.4rem;}
#s10 .formBox .txtLine textarea::placeholder {color: #aaa}
#s10 .formBox .txtLine textarea:focus-visible {border: 1px solid #2C2C2C; background: #fff; outline: 0;}
#s10 .formBox .txtLine textarea:focus-visible::placeholder {opacity: 0}
#s10 .formBox .botArea {}
#s10 .formBox .chkArea {gap: 0.4rem;}
#s10 .formBox .chkArea input {margin-right: 1.2rem;}
#s10 .formBox .chkArea span {color: #888; cursor: pointer}
#s10 .formBox .submitBtn {padding: 1.8rem 4rem;}

@media all and (max-width: 880px){
    #s10 {}
    #s10 .inner {padding-bottom: 3.2rem;}
    #s10 .commTitle {}
    #s10 .commTitle .tit {}
    #s10 .commTitle .wrt {font-size: 2rem; margin-top: 2.4rem;}
    #s10 .tabBtns {margin: 4rem auto; max-width: var(--innerMo);}
    #s10 .tabBtns .btn {width: 100%; font-size: 1.6rem; padding: 1.7rem 0;}
    #s10 .formBox {padding: 4rem 2.4rem 8rem;}
    #s10 .formBox .topArea {flex-direction: column;}
    #s10 .formBox .box {padding: 2rem;}
    #s10 .formBox .btit {font-size: 2rem; padding-bottom: 1.6rem;}
    #s10 .formBox .iptLine {flex-direction: column;}
    #s10 .formBox .iptLine + .iptLine {margin-top: 1.2rem;}
    #s10 .formBox .iptLine.ess::before {}
    #s10 .formBox .ipt {font-size: 1.6rem;}
    #s10 .formBox .adrBtn {font-size: 1.6rem; padding: 1.6rem 0;}
    #s10 .formBox .chkLine {flex-wrap: wrap; font-size: 1.6rem; gap: 1rem 1.4rem;}
    #s10 .formBox .chkLine .ctit {width: 100%; font-weight: 500;}
    #s10 .formBox .contArea {}
    #s10 .formBox .txtLine {}
    #s10 .formBox .txtLine textarea {font-size: 1.6rem;}
    #s10 .formBox .botArea {flex-direction: column; align-items: baseline; gap: 4rem;}
    #s10 .formBox .chkArea {font-size: 1.6rem;}
    #s10 .formBox .chkArea input {margin-right: 0.8rem;}
    #s10 .formBox .submitBtn {width: 100%; font-size: 1.6rem; padding: 1.7rem 0;}
}














/***/