#sub_visual {height: 100vh;}
#sub_visual .txt_a {}
#sub_visual .txt_a .prg {margin-bottom: 6.2rem; letter-spacing: 0.9rem;}
#sub_visual .txt_a .subt {}
#sub_visual .txt_a .tit {margin-bottom: 8.4rem}
#sub_visual .txt_a .ico {}
#sub_visual .txt_b {max-width: 71%;}
#sub_visual .txt_b .prg {margin-bottom: 9.2rem; letter-spacing: 0.9rem; text-transform: uppercase;}
#sub_visual .txt_b .subt {}
#sub_visual .txt_b .tit {margin-bottom: 11.8rem}
#sub_visual .txt_b .ico {}
#sub_visual .cate {background: rgba(0,0,0,0.2);}
#sub_visual .cate ul {}
#sub_visual .cate ul li {width: 24.2rem; transition: 0.2s}
#sub_visual .cate ul li.on {}
#sub_visual .cate ul li:hover {color: #7AFFCA}
#sub_visual .cate ul li a {display: block; padding: 3.9rem 0; text-align: center}


#sub_visual.sv11 {background: url('../img/sub/sub_visual_11_bg.jpg') no-repeat center/cover;}
#sub_visual.sv12 {background: url('../img/sub/sub_visual_12_bg.jpg') no-repeat center/cover;}
#sub_visual.sv13 {background: url('../img/sub/sub_visual_13_bg.jpg') no-repeat center/cover;}
#sub_visual.sv14 {background: url('../img/sub/sub_visual_14_bg.jpg') no-repeat center/cover;}
#sub_visual.sv21 {background: url('../img/sub/sub_visual_21_bg.jpg') no-repeat center/cover;}
#sub_visual.sv22 {background: url('../img/sub/sub_visual_22_bg.jpg') no-repeat center/cover;}
#sub_visual.sv23 {background: url('../img/sub/sub_visual_23_bg.jpg') no-repeat center/cover;}
#sub_visual.sv24 {background: url('../img/sub/sub_visual_24_bg.jpg') no-repeat center/cover;}
#sub_visual.sv31 {background: url('../img/sub/sub_visual_31_bg.jpg') no-repeat center/cover;}
#sub_visual.sv41 {background: url('../img/sub/sub_visual_41_bg.jpg') no-repeat center/cover;}
#sub_visual.sv42 {background: url('../img/sub/sub_visual_42_bg.jpg') no-repeat center/cover;}
#sub_visual.sv43 {background: url('../img/sub/sub_visual_43_bg.jpg') no-repeat center/cover;}
#sub_visual.sv51 {background: url('../img/sub/sub_visual_51_bg.jpg') no-repeat center/cover;}
#sub_visual.sv52 {background: url('../img/sub/sub_visual_52_bg.jpg') no-repeat center/cover;}
#sub_visual.sv61 {background: url('../img/sub/sub_visual_61_bg.jpg') no-repeat center/cover;}

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

    #sub_visual .txt_b {max-width: 84%; text-align: left; top: 42%;}
    #sub_visual .txt_b .prg {font-size: 1.4rem; margin-bottom: 4.5rem; letter-spacing: 0.1rem;}
    #sub_visual .txt_b .subt {font-size: 3.6rem; margin-bottom: 0.7rem;}
    #sub_visual .txt_b .tit {font-size: 4.8rem;}

    #sub_visual.sv11 {background: url('../img/sub/sub_visual_11_bg_mo.jpg') no-repeat center/cover;}
    #sub_visual.sv12 {background: url('../img/sub/sub_visual_12_bg_mo.jpg') no-repeat center/cover;}
    #sub_visual.sv13 {background: url('../img/sub/sub_visual_13_bg_mo.jpg') no-repeat center/cover;}
    #sub_visual.sv14 {background: url('../img/sub/sub_visual_14_bg_mo.jpg') no-repeat center/cover;}
    #sub_visual.sv21 {background: url('../img/sub/sub_visual_21_bg_mo.jpg') no-repeat center/cover;}
    #sub_visual.sv22 {background: url('../img/sub/sub_visual_22_bg_mo.jpg') no-repeat center/cover;}
    #sub_visual.sv23 {background: url('../img/sub/sub_visual_23_bg_mo.jpg') no-repeat center/cover;}
    #sub_visual.sv24 {background: url('../img/sub/sub_visual_24_bg_mo.jpg') no-repeat center/cover;}
    #sub_visual.sv31 {background: url('../img/sub/sub_visual_31_bg_mo.jpg') no-repeat center/cover;}
    #sub_visual.sv41 {background: url('../img/sub/sub_visual_41_bg_mo.jpg') no-repeat center/cover;}
    #sub_visual.sv42 {background: url('../img/sub/sub_visual_42_bg_mo.jpg') no-repeat center/cover;}
    #sub_visual.sv43 {background: url('../img/sub/sub_visual_43_bg_mo.jpg') no-repeat center/cover;}
    #sub_visual.sv51 {background: url('../img/sub/sub_visual_51_bg_mo.jpg') no-repeat center/cover;}
    #sub_visual.sv52 {background: url('../img/sub/sub_visual_52_bg_mo.jpg') no-repeat center/cover;}
    #sub_visual.sv61 {background: url('../img/sub/sub_visual_61_bg_mo.jpg') no-repeat center/cover;}

}

/** ------------------------Sub Components------------------------ **/
.compLIne {width: 800px; height: 1px; background: red; margin: 10rem auto}

/** ---Sub Comp 1--- **/
.comp1 {}
.comp1 .inner {height: 172rem}
.comp1 .txtArea {position: sticky; top: 17%; left: 0}
.comp1 .txtArea::before {content: ''; display: block; position: absolute; height: 4px; width: 12.2rem; background: #56E2AA; left: 0; top: -5.8rem;}
.comp1 .txtArea .tit {margin-bottom: 6.4rem}
.comp1 .txtArea .wrt {}
.comp1 .txtArea .lst {margin-top: 16.8rem;}
.comp1 .txtArea .lst li {max-width: 60rem; border-top: 1px solid #C9CDD2; padding-top: 2.4rem; gap: 1.6rem;}
.comp1 .txtArea .lst li + li {margin-top: 3.4rem;}
.comp1 .lstArea {width: 60.6rem;}
.comp1 .lstArea ul {}
.comp1 .lstArea li {box-shadow: 2px 2px 2rem rgba(0,0,0,0.1); border-radius: 20px; min-width: 100%; padding: 4rem 0 5.4rem 5.6rem;}
.comp1 .lstArea li + li {margin-top: 3.2rem;}
.comp1 .lstArea li .ico {max-width: 5rem; filter: brightness(0); transition: 0.2s}
.comp1 .lstArea li .tit {margin: 4.6rem 0 2.4rem; transition: 0.2s}
.comp1 .lstArea li .wrt {transition: 0.2s}

.comp1 .lstArea li:hover .ico {filter: none}
.comp1 .lstArea li:hover .tit {color: #7AFFCA;}
.comp1 .lstArea li:hover .wrt {color: #7AFFCA;}

.comp1 .lstArea li:nth-child(1):hover {background: url('../img/sub/sub11_comp1_bg1.png') center/cover}
.comp1 .lstArea li:nth-child(2):hover {background: url('../img/sub/sub11_comp1_bg2.png') center/cover}
.comp1 .lstArea li:nth-child(3):hover {background: url('../img/sub/sub11_comp1_bg3.png') center/cover}
.comp1 .lstArea li:nth-child(4):hover {background: url('../img/sub/sub11_comp1_bg4.png') center/cover}
.comp1 .lstArea li:nth-child(5):hover {background: url('../img/sub/sub11_comp1_bg5.png') center/cover}

@media all and (max-width: 880px){
    .comp1 .inner {max-width: 83.5%; height: auto;}
    .comp1 .txtArea {position: relative; top: 0; margin-bottom: 4.8rem}
    .comp1 .txtArea::before {width: 5.4rem; top: -3.9rem;}
    .comp1 .txtArea .tit {font-size: 3.6rem; margin-bottom: 3.8rem;}
    .comp1 .txtArea .wrt {font-size: 1.8rem; line-height: 2.8rem}
    .comp1 .txtArea .lst {margin-top: 4rem; font-size: 1.8rem;}
    .comp1 .txtArea .lst li {padding-top: 1.6rem;}
    .comp1 .txtArea .lst li + li {margin-top: 1.6rem;}
    .comp1 .txtArea .lst li img {max-width: 2.2rem;}
    .comp1 .lstArea {width: 100%; position: relative; max-height: 58vh; overflow: hidden; overflow-y: scroll;}
    .comp1 .lstArea::-webkit-scrollbar {display: none}
    .comp1 .lstArea li {padding: 1.6rem 0 2.6rem 3.2rem; box-shadow: none;}
    .comp1 .lstArea li + li {margin-top: 1.2rem;}
    .comp1 .lstArea li .ico {max-width: 2.8rem;}
    .comp1 .lstArea li .tit {font-size: 2.4rem; margin: 1.2rem 0 0.8rem;}
    .comp1 .lstArea li .wrt {font-size: 1.4rem;}

    .comp1 .lstArea li:nth-child(1) {background: url('../img/sub/sub11_comp1_bg1_mo.png') center/cover}
    .comp1 .lstArea li:nth-child(2) {background: url('../img/sub/sub11_comp1_bg2_mo.png') center/cover}
    .comp1 .lstArea li:nth-child(3) {background: url('../img/sub/sub11_comp1_bg3_mo.png') center/cover}
    .comp1 .lstArea li:nth-child(4) {background: url('../img/sub/sub11_comp1_bg4_mo.png') center/cover}
    .comp1 .lstArea li:nth-child(5) {background: url('../img/sub/sub11_comp1_bg5_mo.png') center/cover}
}

/** ---Sub Comp 2--- **/
.comp2 {overflow: hidden;}
.comp2 .inner {width: calc(150.4rem + ((100% - 150.4rem) / 2)); margin-left: auto;}
.comp2 .inner::before {content: ''; display: block; position: absolute; bottom: 0; width: 132rem; background: #F6F7F9; height: 33.6rem; right: 0}
.comp2 .txt {}
.comp2 .txt .tit {line-height: 6.4rem; margin-bottom: 3.2rem;}
.comp2 .txt .tit::before {content: ''; display: block; position: absolute; height: 4px; background: #56E2AA; width: 12rem; left: 0; top: -3.2rem;}
.comp2 .txt .wrt {line-height: 2.6rem;}
.comp2 .comp2_swiper {max-width: 93.2rem; overflow: hidden; padding-bottom: 12rem;}
.comp2 .comp2_swiper .img {}
.comp2 .comp2_swiper .img span {display: inline-block; width: 15rem; text-align: center; padding: 1.5rem 0; z-index: 1}
.comp2 .comp2_swiper .img span.before {}
.comp2 .comp2_swiper .img span.after {top: 50%}
.comp2 .comp2_swiper .img .lock {height: 50%; bottom: 0; backdrop-filter: blur(8px); background: rgba(255,255,255,0.1);}
.comp2 .comp2_swiper .tit {margin: 4rem 0 0.8rem;}
.comp2 .comp2_swiper .wrt {}
.comp2 .swiper-option {width: 19rem; bottom: 20%;}
.comp2 .comp2_prev,
.comp2 .comp2_next {z-index: 99}
.comp2 .comp2_prev::after,
.comp2 .comp2_next::after {color: #C9CDD2; font-size: 2.6rem; font-weight: bold}
.comp2 .comp2_prev {left: 0;}
.comp2 .comp2_next {right: 0;}
.comp2 .comp2_page {top: 50%; transform: translateY(-50%); bottom: auto; font-size: 3.2rem; font-weight: bold; color: #454C53}

@media all and (max-width: 880px){
    .comp2 .inner {width: 87%; margin: 0 auto; flex-direction: column; gap: 12rem;}
    .comp2 .inner::before {display: none;}
    .comp2 .txt .tit {font-size: 4rem; line-height: 5.2rem;}
    .comp2 .comp2_swiper {max-width: 100%}
    .comp2 .comp2_swiper .img span {font-size: 1.4rem; width: 10rem; padding: 1rem 0;}
    .comp2 .comp2_swiper .img .lock {font-size: 1.2rem; gap: 1rem;}
    .comp2 .comp2_swiper .tit {margin-top: 2.5rem; font-size: 2.4rem;}
    .comp2 .comp2_swiper .wrt {font-size: 1.4rem;}
    .comp2 .swiper-option {width: 12rem; bottom: 68%}
    .comp2 .comp2_page {font-size: 1.8rem;}
    .comp2 .comp2_prev::after, .comp2 .comp2_next::after {font-size: 1.6rem;}
}

/** ---Sub Comp 3--- **/
.comp3 {padding: 21.5rem 0 8rem;}
.comp3::before {content: ''; display: block; position: absolute; left: 50%; top: 0; width: 2px; height: 0; background: #56E2AA; transition: 1.4s}
.comp3 .txtArea {}
.comp3 .txtArea .tit {margin-bottom: 2rem;}
.comp3 .txtArea .wrt {line-height: 2.3rem;}
.comp3 .txtArea .prg {margin-top: 11.2rem; letter-spacing: 0.5rem;}

.sub11 .comp3 {background: url('../img/sub/sub11_comp3_bg.jpg') center/cover;}
.sub13 .comp3 {background: url('../img/sub/sub13_comp3_bg.jpg') center/cover;}

.comp3.trigger_hit_on::before {height: 17.5rem;}

@media all and (max-width: 880px){
    .comp3 {padding: 17.5rem 0 14rem;}
    .comp3 .txtArea .tit {font-size: 3.3rem; margin-bottom: 4.8rem;}
    .comp3 .txtArea .prg {font-size: 1.4rem; margin-top: 2.5rem;}

    .comp3.trigger_hit_on::before {height: 14.5rem;}
}

/** ---Sub Comp 4--- **/
.comp4 {}
.comp4 .inner {}
.comp4 .ico {max-width: 4rem}
.comp4 .title {margin: 2.4rem 0 4.8rem;}
.comp4 .lst {gap: 3.2rem}
.comp4 .lst li {background: #F6F7F9; width: calc((100% - 6.4rem) / 3); transition: 0.2s;}
.comp4 .lst li a { padding: 2.8rem 4rem;}
.comp4 .lst li .txt {}
.comp4 .lst li .tit {}
.comp4 .lst li .wrt {}
.comp4 .lst li .more {padding: 0.8rem 2.8rem; border: 1px solid #C9CDD2; transition: 0.2s;}
.comp4 .lst li:hover {background: #4A9F7D; color: #fff;}
.comp4 .lst li:hover .more {border: 1px solid #fff;}

@media all and (max-width: 880px){
    .comp4 .inner {max-width: 87.5%}
    .comp4 .title {text-align: center;}
    .comp4 .lst {flex-direction: column; gap: 1.6rem;}
    .comp4 .lst li {width: 100%}
    .comp4 .lst li a {padding: 3.8rem 3rem;}
}

/** ---Sub Comp 5--- **/
.comp5 {}
.comp5 .txtArea {margin-bottom: 9rem;}
.comp5 .txtArea .line {width: 12.2rem; background: #56E2AA; height: 4px}
.comp5 .txtArea .tit {margin: 4rem 0; line-height: 6.4rem}
.comp5 .txtArea .wrt {line-height: 2.8rem;}
.comp5 .comp5_swiper {overflow: hidden; padding-bottom: 9rem;}
.comp5 .comp5_swiper .swiper-slide {width: auto !important; text-align: center;}
.comp5 .comp5_page {max-width: 53.6rem; bottom: 0; top: auto; left: 50%; transform: translateX(-50%); height: 0.8rem; background: #EEF0F3; border-radius: 10px; overflow: hidden;}
.comp5 .comp5_page span {background: #4A9F7D !important}

@media all and (max-width: 880px){
    .comp5 .txtArea .line {width: 5.4rem;}
    .comp5 .txtArea {max-width: 87.5%; margin-bottom: 6.5rem;}
    .comp5 .txtArea .tit {font-size: 3.2rem; margin: 3.8rem 0 4.5rem; line-height: 4.4rem;}
    .comp5 .comp5_swiper {max-width: 80%; margin: 0 auto;}
    .comp5 .comp5_swiper .swiper-slide {width: 40vw !important}
}

/** ---Sub Comp 6--- **/
.comp6 {}
.comp6 .txtArea {margin-bottom: 27.7rem}
.comp6 .txtArea .title {}
.comp6 .txtArea .subt {}
.comp6 .txtArea .tit {line-height: 10.4rem; padding-top: 1rem}
.comp6 .txtArea .tit span::after {content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 30%; background: #7AFFCA;}
.comp6 .txtArea .tit i {position: relative; z-index: 1}
.comp6 .txtArea .wrt {width: 67.4rem; line-height: 2.8rem;}

@media all and (max-width: 880px){
    .comp6 .txtArea {flex-direction: column; max-width: 87.5%; gap: 3.6rem; margin-bottom: 9.5rem;}
    .comp6 .txtArea .subt {font-size: 2.4rem;}
    .comp6 .txtArea .tit {font-size: 4.8rem; line-height: 6.4rem; padding-top: 1.2rem}
}

/** ---Sub Comp 7--- **/
.comp7 {}
.comp7 .txtArea {gap: 15.4rem; padding: 7rem 0}
.comp7 .txtArea .tit {}
.comp7 .txtArea .cont {}
.comp7 .txtArea .cont b {}
.comp7 .txtArea .cont p {padding: 0.8rem 0 1.6rem;}
.comp7 .txtArea .cont a {text-decoration: underline;}

@media all and (max-width: 880px){
    .comp7 .txtArea {flex-direction: column; align-items: baseline; gap: 2.8rem; padding: 8.5rem 2.4rem 6rem;}
    .comp7 .txtArea .tit {font-size: 3.2rem;}
    .comp7 .txtArea .cont {font-size: 1.4rem; line-height: 2.2rem;}
    .comp7 .txtArea .cont b {font-size: 2rem;}
    .comp7 .txtArea .cont a {font-size: 1.6rem;}
}

/** ---Sub Comp 8--- **/
.comp8 {}
.comp8 .txtArea {padding-bottom: 5rem; padding-top: 4rem}
.comp8 .txtArea .line {width: 12.2rem; background: #56E2AA; height: 4px}
.comp8 .txtArea .tit {margin: 4rem 0; line-height: 6.4rem}
.comp8 .txtArea .wrt {line-height: 2.8rem;}
.comp8 .comp8_swiper {overflow: hidden;}
.comp8 .comp8_swiper .cont {}
.comp8 .comp8_swiper .cont .txt {padding: 7.4rem 4rem 0; right: 10%; width: 43.8rem;}
.comp8 .comp8_swiper .cont .txt .tit {padding-bottom: 3.2rem; margin-bottom: 3.2rem; border-bottom: 1px solid #C9CDD2;}
.comp8 .comp8_swiper .cont .txt .wrt {line-height: 3.2rem;}
.comp8 .comp8_swiper .cont .txt .lst {}
.comp8 .comp8_swiper .cont .txt .lst li {gap: 0.8rem}
.comp8 .comp8_swiper .cont .txt .lst li + li {margin-top: 1.2rem}
.comp8 .comp8_swiper .btnArea {width: 10rem; height: 3rem; right: 37%; bottom: 5rem; z-index: 1}
.comp8 .comp8_swiper .btnArea span {width: 2px; background: #C9CDD2; height: 3rem; left: 50%}
.comp8 .comp8_swiper .comp8_prev {left: 0}
.comp8 .comp8_swiper .comp8_next {right: 0}
.comp8 .comp8_swiper .comp8_prev,
.comp8 .comp8_swiper .comp8_next {}
.comp8 .comp8_swiper .comp8_prev::after,
.comp8 .comp8_swiper .comp8_next::after {font-size: 2.4rem; color: #454C53; font-weight: bold}

@media all and (max-width: 880px){
    .comp8 .txtArea {max-width: 87.5%; padding-top: 0;}
    .comp8 .txtArea .ico {max-width: 13.2rem; right: 6%; top: -1rem;}
    .comp8 .txtArea .line {width: 5.4rem;}
    .comp8 .txtArea .tit {font-size: 3.2rem; line-height: 5.2rem; margin: 3.8rem 0; z-index: 1;}
    .comp8 .txtArea .tit b {font-size: 4rem;}
    .comp8 .comp8_swiper .cont .txt {right: 0; width: 90%; padding: 3rem 1rem 7.2rem 2rem; height: auto; top: auto; bottom: 0;}
    .comp8 .comp8_swiper .cont .txt .tit {font-size: 2.4rem; padding-bottom: 1.1rem; margin-bottom: 1.1rem}
    .comp8 .comp8_swiper .cont .txt .tit .subt {font-size: 1.4rem;}
    .comp8 .comp8_swiper .cont .txt .wrt {font-size: 1.4rem; line-height: 2.2rem;}
    .comp8 .comp8_swiper .cont .txt .lst {font-size: 1.4rem}
    .comp8 .comp8_swiper .cont .txt .lst li img {max-width: 1.4rem;}
    .comp8 .comp8_swiper .cont .txt .lst li + li {margin-top: 0.8rem;}
    .comp8 .comp8_swiper .btnArea {right: 52%; bottom: 2.5rem;}
    .comp8 .comp8_swiper .btnArea span {height: 2rem; top: 0.6rem;}
    .comp8 .comp8_swiper .comp8_prev::after,
    .comp8 .comp8_swiper .comp8_next::after {font-size: 1.8rem}
}

/** ---Sub Comp 9--- **/
.comp9 {}
.comp9 .cont {padding: 23rem 0; background: url('../img/sub/comp9_bg.jpg') center/cover; gap: 7.4rem;}
.comp9 .cont .txt i {line-height: 2.6rem; display: block; padding-top: 1.5rem}
.comp9 .cont .tit {padding-bottom: 1.6rem;}
.comp9 .cont .wrt {line-height: 2.6rem;}
.comp9 .cont .wrt.aa {margin-top: 2rem;}
.comp9 .cont .ico1 {max-width: 4.9rem;}
.comp9 .cont .ico2 {max-width: 1.5rem;}
.comp9 .cont.typeA {gap: 7.4rem}

@media all and (max-width: 880px){
    .comp9 .cont {flex-direction: column; gap: 4rem; padding: 12rem 0;}
    .comp9 .cont .txt {font-size: 3.2rem;}
    .comp9 .cont .ico1 {max-width: 3.4rem;}
    .comp9 .cont .ico2 {transform: rotate(90deg);}
    .comp9 .cont.typeA {gap: 4rem}
}

/** ---Sub Comp 10--- **/
.comp10 {}
.comp10 .inner {}
.comp10 .txtArea {margin-bottom: 14.4rem;}
.comp10 .txtArea .subt {}
.comp10 .txtArea .tit {gap: 2rem; line-height: 1;}
.comp10 .txtArea .tit span {}
.comp10 .txtArea .wrt {line-height: 3.6rem; margin-top: 4.8rem}
.comp10 .lstArea {}
.comp10 .lstArea ul {}
.comp10 .lstArea li {width: calc((100% - 22.5rem) / 4); border-top: 4px solid #56E2AA;}
.comp10 .lstArea li .tit {padding: 4rem 0 5.7rem; line-height: 4.4rem;}
.comp10 .lstArea li .wrt {line-height: 2.2rem}
.comp10 .imgArea {margin-top: 16rem;}
.comp10 .imgArea .tit {margin-bottom: 1.6rem}

@media all and (max-width: 880px){
    .comp10 .inner {padding-top: 7.5rem;}
    .comp10 .txtArea {max-width: 87.5%; margin: 0 auto;}
    .comp10 .txtArea .subt {font-size: 3.6rem; margin-bottom: 1rem;}
    .comp10 .txtArea .tit {font-size: 7rem;}
    .comp10 .txtArea .tit span {font-size: 7rem;}
    .comp10 .txtArea .wrt {margin-top: 4rem; font-size: 1.8rem; line-height: 2.8rem;}
    .comp10 .lstArea {max-width: 87.5%; margin: 0 auto; padding-top: 8rem;}
    .comp10 .lstArea ul {flex-direction: column; gap: 6rem;}
    .comp10 .lstArea li {width: 100%;}
    .comp10 .lstArea li .tit {padding: 2.4rem 0; font-size: 3.2rem; line-height: 4.4rem;}
    .comp10 .imgArea {margin-top: 10rem;}
    .comp10 .imgArea .txt {width: 100%}
}

/** ---Sub Comp 11--- **/
.comp11 {}
.comp11 .inner {}
.comp11 .title {margin-bottom: 6rem;}
.comp11 .title .subt {}
.comp11 .title .tit {}
.comp11 .lst {}
.comp11 .lst li {width: calc((100% - 8rem) / 3); padding: 37.7rem 0 9.7rem; border-radius: 40px; overflow: hidden;}
.comp11 .lst li .txt {}
.comp11 .lst li .txt .tit {margin-bottom: 1.8rem;}
.comp11 .lst li .txt .wrt {line-height: 2.6rem; letter-spacing: -1px}
.comp11 .lst li:nth-child(1) {background: url('../img/sub/comp11_bg1.png') center/cover;}
.comp11 .lst li:nth-child(2) {background: url('../img/sub/comp11_bg2.png') center/cover; border: 0.8rem solid #56E2AA;}
.comp11 .lst li:nth-child(3) {background: url('../img/sub/comp11_bg3.png') center/cover;}

@media all and (max-width: 880px){
    .comp11 .inner {max-width: 85%;}
    .comp11 .title .subt {font-size: 2.4rem; margin-bottom: 5px;}
    .comp11 .title .tit {font-size: 3.6rem;}
    .comp11 .lst {flex-direction: column; gap: 2.4rem;}
    .comp11 .lst li {width: 100%; padding: 27.7rem 0 6.7rem;}
    .comp11 .lst li:nth-child(1) {padding: 1.6rem 2.5rem; min-height: 14.4rem; display: flex; justify-content: center; align-items: center;}
    .comp11 .lst li:nth-child(3) {padding: 1.6rem 2.5rem; min-height: 14.4rem; display: flex; justify-content: center; align-items: center;}
    .comp11 .lst li .txt .tit {font-size: 2.4rem; margin: 0}
    .comp11 .lst li .txt .wrt {font-size: 1.4rem; line-height: 2.2rem}
}

/** ---Sub Comp 12--- **/
.comp12 {padding-bottom: 8rem}
.comp12::before {content: ''; display: block; position: absolute; width: 100%; bottom: 0; background: #F6F7F9; height: 40%}
.comp12 .inner {}
.comp12 .txtArea {margin-bottom: 8rem;}
.comp12 .txtArea .line {width: 12.2rem; background: #56E2AA; height: 4px}
.comp12 .txtArea .tit {margin: 4rem 0; line-height: 6.4rem}
.comp12 .txtArea .wrt {line-height: 2.8rem;}
.comp12 .lstArea {}
.comp12 .lstArea ul {}
.comp12 .lstArea li {padding: 1.6rem 2rem 4.2rem;}
.comp12 .lstArea li .step {margin: 2.4rem 0 1.6rem}
.comp12 .lstArea li .tit {margin-bottom: 1.6rem}
.comp12 .lstArea li .wrt {line-height: 2.8rem;}

@media all and (max-width: 880px){
    .comp12::before {height: 80%;}
    .comp12 .inner {max-width: 87.5%;}
    .comp12 .txtArea {margin-bottom: 7.5rem;}
    .comp12 .txtArea .line {width: 5.4rem;}
    .comp12 .txtArea .tit {font-size: 3.2rem; margin: 3.8rem 0; line-height: 4.4rem;}
    .comp12 .txtArea .tit b {font-size: 4rem;}
    .comp12 .lstArea ul {flex-direction: column; gap: 4rem;}
}

/** ---Sub Comp 13--- **/
.comp13 {}
.comp13 .inner {}
.comp13 .cont {gap: 19.7rem;}
.comp13 .txtArea {}
.comp13 .txtArea .line {width: 12.2rem; background: #56E2AA; height: 4px}
.comp13 .txtArea .tit {margin: 4rem 0; line-height: 6.4rem}
.comp13 .txtArea .wrt {line-height: 2.8rem;}
.comp13 .lstArea {width: 67.4rem;}
.comp13 .lstArea li {padding: 2.1rem 3.2rem; gap: 0.8rem; display: flex;}
.comp13 .lstArea li + li {margin-top: 0.8rem;}

@media all and (max-width: 880px){
    .comp13 .inner {max-width: 87.5%;}
    .comp13 .cont {flex-direction: column; gap: 3.5rem;}
    .comp13 .txtArea .line {width: 5.4rem;}
    .comp13 .txtArea .tit {margin: 3.8rem 0; font-size: 3.2rem; line-height: 4.4rem;}
    .comp13 .txtArea .tit b {font-size: 3.6rem;}
    .comp13 .lstArea {width: 100%; font-size: 1.6rem;}
    .comp13 .lstArea li {padding: 1.8rem 2.2rem; align-items: baseline;}
    .comp13 .lstArea li + li {margin-top: 1rem;}
}

/** ---Sub Comp 14--- **/
.comp14 {}
.comp14 .txtArea {margin-bottom: 9rem}
.comp14 .txtArea .ico {width: 100%; max-width: 7.5rem;}
.comp14 .txtArea .subt {margin: 4rem 0 2rem}
.comp14 .txtArea .tit i {position: relative; z-index: 1}
.comp14 .txtArea .tit::after {content: ''; display: block; position: absolute; bottom: 0; width: 100%; height: 30%; background: #7AFFCA}
.comp14 .comp14_swiper {overflow: hidden;}
.comp14 .swiper-slide {}
.comp14 .swiper-slide img {}
.comp14 .swiper-slide .txt {left: 10%;}
.comp14 .swiper-slide .txt .subt {}
.comp14 .swiper-slide .txt .tit {margin: 1.6rem 0 5.6rem; line-height: 6.4rem;}
.comp14 .swiper-slide .txt .wrt {line-height: 2.6rem; margin-bottom: 6.4rem}
.comp14 .swiper-slide .txt .more {color: #fff; padding: 0.9rem 3.5rem; border: 1px solid #A4AAB1; transition: 0.4s;}
.comp14 .swiper-slide .txt .more::before {content: ''; display: block; position: absolute; left: 0; height: 100%; top: 0; width: 0; background: #A4AAB1; transition: 0.4s}
.comp14 .swiper-slide .txt .more:hover::before {width: 100%;}
.comp14 .swiper-option {bottom: 0; right: 6.7%; width: 29.2rem; height: 11.5rem; z-index: 1; border-radius: 40px 0;}
.comp14 .swiper-button-next,
.comp14 .swiper-button-prev {z-index: 99; color: #fff}
.comp14 .swiper-button-next::after,
.comp14 .swiper-button-prev::after {font-size: 2rem; font-weight: bold;}
.comp14 .swiper-button-next {right: 20%}
.comp14 .swiper-button-prev {left: 20%;}
.comp14 .swiper-pagination {top: 50%; transform: translateY(-50%); bottom: auto}
.comp14 .swiper-pagination-current {font-size: 3.6rem; font-weight: bold;}
.comp14 .pointArea {margin-top: 11rem;}
.comp14 .pointArea .point {width: 100%; max-width: 34.5rem;}
.comp14 .pointArea .point + .point {margin-left: 7.4rem; padding-left: 7.4rem; border-left: 1px solid #C9CDD2; }
.comp14 .pointArea .point .tit {margin-bottom: 1.6rem;}

@media all and (max-width: 880px){
    .comp14 .txtArea {max-width: 87.5%; margin: 0 auto; text-align: center; margin-bottom: 7.3rem;}
    .comp14 .txtArea .ico {max-width: 4.8rem;}
    .comp14 .txtArea .subt {font-size: 3.6rem; margin: 4.5rem 0 2rem;}
    .comp14 .swiper-slide .txt {left: 50%; transform: translate(-50%,-50%); width: 90%; top: 60%;}
    .comp14 .swiper-slide .txt .subt {font-size: 2.4rem;}
    .comp14 .swiper-slide .txt .tit {font-size: 3.2rem; line-height: 4rem; margin: 1.4rem 0;}
    .comp14 .swiper-slide .txt .wrt {font-size: 1.4rem; line-height: 2.2rem; margin-bottom: 0;}
    .comp14 .swiper-option {right: 8.5%; width: 19.2rem; height: 7.5rem; z-index: 1; border-radius: 35px 0;}
    .comp14 .swiper-pagination {font-size: 1.5rem;}
    .comp14 .swiper-pagination-current {font-size: 2.3rem;}
    .comp14 .swiper-button-prev {left: 10%}
    .comp14 .swiper-button-next {right: 10%}
    .comp14 .pointArea {flex-direction: column; max-width: 70%; margin: 0 auto; padding-top: 7rem;}
    .comp14 .pointArea .point {max-width: 100%}
    .comp14 .pointArea .point + .point {padding: 0; margin: 0; border: 0; padding-top: 4rem; margin-top: 4rem; border-top: 1px solid #C9CDD2}
    .comp14 .pointArea .point .wrt {font-size: 2.4rem; line-height: 3.6rem;}
}

/** ---Sub Comp 15--- **/
.comp15 {}
.comp15 .inner {}
.comp15 .txtArea {margin-bottom: 12rem}
.comp15 .txtArea .line {width: 12.2rem; background: #56E2AA; height: 4px}
.comp15 .txtArea .tit {margin-top: 4rem}
.comp15 .txtArea .tit.aa {margin-top: 2rem}
.comp15 .txtArea .tit b {}
.comp15 .txtArea .wrt {line-height: 2.8rem; padding-top: 3.2rem;}
.comp15 .lstArea {}
.comp15 .lstArea ul {gap: 2.4rem;}
.comp15 .lstArea li {border-radius: 20px; overflow: hidden; width: calc((100% - 2.4rem) / 2); gap: 4.4rem}
.comp15 .lstArea li .img {width: 100%; max-width: 26.1rem}
.comp15 .lstArea li .txt {padding: 4.8rem 4.2rem 0 0; width: 100%}
.comp15 .lstArea li .tit {margin-bottom: 1.6rem;}
.comp15 .lstArea li .wrt {margin-bottom: 4.1rem; line-height: 2.6rem;}
.comp15 .lstArea li .link {display: block; text-align: right;}

@media all and (max-width: 880px){
    .comp15 .inner {max-width: 87.5%;}
    .comp15 .txtArea {margin-bottom: 5rem;}
    .comp15 .txtArea .line {width: 5.4rem;}
    .comp15 .txtArea .tit {font-size: 3.2rem; margin-top: 3.8rem;}
    .comp15 .lstArea ul {flex-direction: column; gap: 1.6rem;}
    .comp15 .lstArea li {width: 100%; gap: 2.4rem; border-radius: 10px; align-items: center;}
    .comp15 .lstArea li .img {max-width: 13rem;}
    .comp15 .lstArea li .txt {padding: 0 1rem 0 0;}
    .comp15 .lstArea li .tit {font-size: 1.4rem; margin-bottom: 1rem;}
    .comp15 .lstArea li .wrt {font-size: 1.4rem; line-height: 2.2rem; margin-bottom: 1.8rem;}
    .comp15 .lstArea li .link {font-size: 1.2rem;}
}

/** ---Sub Comp 16--- **/
.comp16 {}
.comp16 .inner {}
.comp16 .title {}
.comp16 .title .subt {margin-bottom: 1rem}
.comp16 .title .tit {}
.comp16 .title .tit b::after {content: ''; display: block; position: absolute; width: 100%; height: 40%; background: #7AFFCA; bottom: 0; left: 0}
.comp16 .title .tit i {position: relative; z-index: 1;}
.comp16 .lst {}
.comp16 .lst li + li {padding-top: 3.2rem; margin-top: 3rem; border-top: 1px solid #C9CDD2; width: 65rem;}
.comp16 .lst li .tit {margin-bottom: 1.4rem}
.comp16 .lst li .wrt {line-height: 2.8rem;}

@media all and (max-width: 880px){
    .comp16 .inner {flex-direction: column; max-width: 87.5%; gap: 8rem;}
    .comp16 .title .subt {font-size: 2.8rem;}
    .comp16 .title .tit {font-size: 4.8rem;}
    .comp16 .lst li .tit {font-size: 2rem}
    .comp16 .lst li .wrt {font-size: 1.4rem; line-height: 2.2rem;}
    .comp16 .lst li + li {width: 100%; padding-top: 2.5rem; margin-top: 2.5rem;}
}

/** ---Sub Comp 17--- **/
.comp17 {overflow: hidden;}
.comp17 .inner {}
.comp17 .title {}
.comp17 .title .subt {margin-bottom: 1rem}
.comp17 .title .tit {}
.comp17 .title .tit b::after {content: ''; display: block; position: absolute; width: 100%; height: 40%; background: #7AFFCA; bottom: 0; left: 0}
.comp17 .title .tit i {position: relative; z-index: 1;}
.comp17 .title .wrt {line-height: 2.8rem; margin-top: 3.4rem}
.comp17 .box {width: 60.6rem; border-radius: 33px; padding: 8.3rem 5.6rem; }
.comp17 .box .tit {margin-bottom: 3.4rem}
.comp17 .box .wrt {line-height: 2.8rem}

@media all and (max-width: 880px){
    .comp17 .inner {flex-direction: column; max-width: 87.5%; gap: 5.5rem;}
    .comp17 .title .subt {font-size: 2.4rem;}
    .comp17 .title .tit {font-size: 4.8rem;}
    .comp17 .box {width: 100%; padding: 6rem 2rem;}
    .comp17 .box .wrt {font-size: 1.6rem;}
}

/** ---Sub Comp 18--- **/
.comp18 {}
.comp18 .inner {}
.comp18 .txtArea {}
.comp18 .txtArea .ico {}
.comp18 .txtArea .tit {margin: 6.4rem 0 5.2rem}
.comp18 .txtArea .wrt {line-height: 2.8rem;}
.comp18 .lstArea {margin-top: 15.8rem;}
.comp18 .lstArea .lst {gap: 1.6rem}
.comp18 .lstArea .lst li {width: calc((100% - 4.8rem) / 4); padding: 0 2.9rem; min-height: 66.7rem;}
.comp18 .lstArea .lst li::before {content: ''; display: block; position: absolute; width: 100%; height: 70%; bottom: 0; background: #F6F7F9}
.comp18 .lstArea .lst li img {max-width: 22.7rem;}
.comp18 .lstArea .lst li .step {margin: 4.7rem 0 1rem;}
.comp18 .lstArea .lst li .tit {}
.comp18 .lstArea .lst li .subt {line-height: 2.6rem; margin: 2.4rem 0;}
.comp18 .lstArea .lst li .wrt {line-height: 2.2rem; padding-top: 2.4rem; border-top: 1px solid #C9CDD2;}
.comp18 .lineArea {margin-top: 6rem}
.comp18 .lineArea .line {gap: 2.2rem; width: 100%}
.comp18 .lineArea .line::after,
.comp18 .lineArea .line::before {content: ''; display: block; position: absolute; top: 50%; transform: translateY(-50%); height: 4px;}
.comp18 .lineArea .line1 {width: 38%;}
.comp18 .lineArea .line1::after {left: 0; width: 40%; background: #56E2AA;}
.comp18 .lineArea .line1::before {right: 0; width: 40%; background: #56E2AA;}
.comp18 .lineArea .line2 {width: 38%;}
.comp18 .lineArea .line2::after {left: 0; width: 27%; background: #56AB89;}
.comp18 .lineArea .line2::before {right: 0; width: 27%; background: #56AB89;}
.comp18 .lineArea .line3 {width: 24%;}
.comp18 .lineArea .line3::after {left: 0; width: 21%; background: #0D3A1F;}
.comp18 .lineArea .line3::before {right: 0; width: 21%; background: #0D3A1F;}

.comp18 .lstArea.aa .lst li {min-height: 45.7rem;}
.comp18 .lstArea.aa .lst li img {max-width: 29rem}
.comp18 .lineArea.aa .line1 {width: 25%;}
.comp18 .lineArea.aa .line1::after,
.comp18 .lineArea.aa .line1::before {width: 30%}
.comp18 .lineArea.aa .line2 {width: 25%;}
.comp18 .lineArea.aa .line2::after,
.comp18 .lineArea.aa .line2::before {width: 30%}
.comp18 .lineArea.aa .line3 {width: 50%;}
.comp18 .lineArea.aa .line3::after,
.comp18 .lineArea.aa .line3::before {width: 40%}

@media all and (max-width: 880px){
    .comp18 .inner {max-width: 87.5%;}
    .comp18 .txtArea .ico {max-width: 4.8rem;}
    .comp18 .txtArea .tit {margin: 5rem 0 3.7rem; font-size: 2.4rem;}
    .comp18 .txtArea .tit b {font-size: 3.6rem;}
    .comp18 .txtArea .wrt {font-size: 1.6rem; line-height: 2.4rem;}
    .comp18 .lstArea {margin-top: 4.8rem;}
    .comp18 .lstArea .lst {flex-direction: column;}
    .comp18 .lstArea .lst li {width: 100%; background: #F6F7F9; flex-direction: row; min-height: auto; padding: 2.7rem 2.4rem; gap: 2.2rem; border-radius: 20px;}
    .comp18 .lstArea .lst li::before {display: none;}
    .comp18 .lstArea .lst li img {max-width: 12.4rem;}
    .comp18 .lstArea .lst li .txt {text-align: left; align-items: baseline;}
    .comp18 .lstArea .lst li .step {margin: 0 0 0.4rem 0;}
    .comp18 .lstArea .lst li .tit {font-size: 1.8rem;}
    .comp18 .lstArea .lst li .subt {font-size: 1.4rem; margin: 1.2rem 0 1.4rem; line-height: 2rem;}
    .comp18 .lstArea .lst li .wrt {padding-top: 1.5rem;}

    .comp18 .lstArea.aa .lst li {min-height: auto;}
    .comp18 .lstArea.aa .lst li img {max-width: 12rem;}
}

/** ---Sub Comp 19--- **/
.comp19 {}
.comp19 .inner {}
.comp19 .txtArea {margin-bottom: 11rem}
.comp19 .txtArea .line {width: 12.2rem; background: #56E2AA; height: 4px}
.comp19 .txtArea .tit {margin-top: 4rem}
.comp19 .txtArea .wrt {margin-top: 4.8rem; line-height: 3.6rem;}
.comp19 .lstArea {}
.comp19 .lstArea li {padding-top: 4rem; border-top: 4px solid #56E2AA; width: calc((100% - 15.2rem) / 3);}
.comp19 .lstArea li .tit {line-height: 4.4rem; margin-bottom: 5.7rem;}
.comp19 .lstArea li .wrt {line-height: 2.2rem;}
.comp19 .lstArea li .prg {padding: 0.5rem 1.6rem; background: #307B61; bottom: 26%;}

@media all and (max-width: 880px){
    .comp19 .inner {max-width: 87.5%;}
    .comp19 .txtArea {margin-bottom: 8rem;}
    .comp19 .txtArea .line {max-width: 5.4rem;}
    .comp19 .txtArea .tit {font-size: 3.2rem}
    .comp19 .txtArea .tit b {font-size: 3.6rem;}
    .comp19 .txtArea .wrt {font-size: 1.8rem; line-height: 2.8rem; margin-top: 3.8rem;}
    .comp19 .lstArea {flex-direction: column; gap: 4rem;}
    .comp19 .lstArea li {width: 100%;}
    .comp19 .lstArea li .tit {margin-bottom: 2.3rem;}
    .comp19 .lstArea li .tit.aa {margin-bottom: 5rem;}
    .comp19 .lstArea li .prg {bottom: 29%;}
}

/** ---Sub Comp 20--- **/
.comp20 {}
.comp20 .inner {}
.comp20 .txtArea {margin-bottom: 10rem}
.comp20 .txtArea .ico {}
.comp20 .txtArea .tit {margin: 4.8rem 0 2.9rem;}
.comp20 .txtArea .wrt {line-height: 2.8rem;}
.comp20 .txtArea .wrt2 {line-height: 2.8rem; margin-top: 2.9rem}
.comp20 .txtArea .prg {border: 1px solid #fff; padding: 0.4rem 5rem; border-radius: 20px;}
.comp20 .txtArea .prg2 {border: 1px solid #C9CDD2; padding: 0.4rem 5rem; border-radius: 20px;}
.comp20 .imgArea {gap: 1.6rem;}
.comp20 .imgArea .img {}
.comp20 .imgArea .ico {}
.comp20 .lstArea {margin: 2.8rem 0 0; border-radius: 20px; padding: 3rem 3.2rem;}
.comp20 .lstArea li {gap: 0.8rem; flex: 1;}
.comp20 .lstArea li + li {border-left: 1px solid #C9CDD2;}
.comp20 .lstArea img {}
.comp20 .lstArea .txt {line-height: 2.6rem;}
.comp20 .prg {margin-top: 3.2rem}

@media all and (max-width: 880px){
    .comp20 .inner {max-width: 87.5%;}
    .comp20 .txtArea {margin-bottom: 5.2rem;}
    .comp20 .txtArea .ico {max-width: 4.8rem;}
    .comp20 .txtArea .tit {font-size: 3.2rem;}
    .comp20 .txtArea .tit b {font-size: 4.8rem;}
    .comp20 .txtArea .prg {margin-top: 0}
    .comp20 .txtArea .prg2 {font-size: 1.4rem; padding: 1.2rem 0; border-radius: 70px; width: 80%;}
    .comp20 .imgArea {flex-direction: column; gap: 1.4rem;}
    .comp20 .imgArea .ico {max-width: 4rem; transform: rotate(90deg); left: 46%; top: 48%;}
    .comp20 .lstArea {flex-direction: column; padding: 5.4rem 3.2rem;}
    .comp20 .lstArea li {gap: 1.7rem;}
    .comp20 .lstArea li + li {border: 0; padding-top: 4rem; margin-top: 4rem; border-top: 1px solid #C9CDD2;}
    .comp20 .lstArea img {max-width: 2.4rem;}
    .comp20 .prg {font-size: 1.4rem;}

}

/** ---Sub Comp 21--- **/
.comp21 {overflow: hidden;}
.comp21 .inner {justify-content: space-between; max-width: 171.2rem; margin-left: auto;}
.comp21 .txtArea {}
.comp21 .txtArea .line {width: 12.2rem; background: #56E2AA; height: 4px}
.comp21 .txtArea .tit {margin: 3.2rem 0; line-height: 6.4rem}
.comp21 .txtArea .wrt {line-height: 2.6rem;}
.comp21 .img {padding-top: 3.6rem;}

@media all and (max-width: 880px){
    .comp21 .inner {max-width: 87%; gap: 3.5rem; flex-direction: column; margin: 0 auto;}
    .comp21 .txtArea .line {width: 5.4rem;}
    .comp21 .txtArea .tit {font-size: 4rem; margin: 3.8rem 0; line-height: 5.2rem;}
}

/** ------------------------//Sub Components------------------------ **/