/********* 서브 공통 **********/ .subMenu {} .subMenu .inner {padding: 3rem 0; min-height: 20rem;} .subMenu .mtit {margin-bottom: 2rem; gap: 1rem;} .subMenu .mtit .tit {} .subMenu .mtit .ico {cursor: pointer} .subMenu .mtit .mgnb {display: none; top: 100%; z-index: 99; left: 20%;} .subMenu .mtit .mgnb .menu {background: var(--fcp); padding: 2.2rem 2.6rem; border-radius: 0.9rem; display: flex; flex-direction: column; gap: 1.6rem;} .subMenu .mtit .mgnb .menu li {transition: 0.1s;} .subMenu .mtit .mgnb .menu li.on {color: #5E1603; font-weight: bold;} .subMenu .mtit .mgnb .menu li:hover {color: #5E1603;} .subMenu .mlst {gap: 2.4rem 6rem;} .subMenu .mlst li {color: #BDBDBD; transition: 0.1s;} .subMenu .mlst li.on {color: var(--fcp)} .subMenu .mlst li:hover {color: var(--fcp)} @media all and (max-width: 880px){ .subMenu {} .subMenu .inner {max-width: var(--innerMo); margin: 0 auto; padding: 2.2rem 0; min-height: auto} .subMenu .mtit {font-size: 2.2rem; margin-bottom: 1.5rem;} .subMenu .mtit .tit {} .subMenu .mtit .ico {width: 2rem;} .subMenu .mtit .mgnb {left: 0; top: 120%;} .subMenu .mtit .mgnb .menu {font-size: 1.4rem; gap: 1rem; padding: 2rem;} .subMenu .mtit .mgnb .menu li {} .subMenu .mlst {gap: 1rem 1.2rem; font-size: 1.6rem;} .subMenu .mlst li {} } .visual {} .visual .title {padding: 26rem 0 34rem} .visual .txtArea {padding: 23.5rem 0 30rem;} .visual .txtArea .tit {} .visual .txtArea .subt {padding: 3rem 0 2rem;} .visual .txtArea .wrt {line-height: 2.6rem;} .visual .imgArea {bottom: 0; right: 2rem;} .visual.sv11 {background: url('../img/visual/visual_1_1.jpg') center/cover;} .visual.sv12 {background: url('../img/visual/visual_1_2.jpg') center/cover;} .visual.sv13 {background: url('../img/visual/visual_1_3.jpg') center/cover;} .visual.sv14 {background: url('../img/visual/visual_1_4.jpg') center/cover;} .visual.sv21 {background: url('../img/visual/visual_2_1.jpg') center/cover;} .visual.sv22 {background: url('../img/visual/visual_2_2.jpg') center/cover;} .visual.sv23 {background: url('../img/visual/visual_2_3.jpg') center/cover;} .visual.sv24 {background: url('../img/visual/visual_2_4.jpg') center/cover;} .visual.sv25 {background: url('../img/visual/visual_2_5.jpg') center/cover;} .visual.sv26 {background: url('../img/visual/visual_2_6.jpg') center/cover;} .visual.sv27 {background: url('../img/visual/visual_2_7.jpg') center/cover;} .visual.sv28 {background: url('../img/visual/visual_2_8.jpg') center/cover;} .visual.sv29 {background: url('../img/visual/visual_2_9.jpg') center/cover;} .visual.sv31 {background: url('../img/visual/visual_3_1.jpg') center/cover;} .visual.sv41 {background: url('../img/visual/visual_4_1.jpg') center/cover;} .visual.sv42 {background: url('../img/visual/visual_4_2.jpg') center/cover;} .visual.sv43 {background: url('../img/visual/visual_4_3.jpg') center/cover;} .visual.sv44 {background: url('../img/visual/visual_4_4.jpg') center/cover;} .visual.sv51 {background: url('../img/visual/visual_5_1.jpg') center/cover;} .visual.sv61 {background: url('../img/visual/visual_6_1.jpg') center/cover;} .visual.sv62 {background: url('../img/visual/visual_6_2.jpg') center/cover;} .visual.sv63 {background: url('../img/visual/visual_6_3.jpg') center/cover;} .visual.sv64 {background: url('../img/visual/visual_6_4.jpg') center/cover;} .visual.sv65 {background: url('../img/visual/visual_6_5.jpg') center/cover;} .visual.sv66 {background: url('../img/visual/visual_6_6.jpg') center/cover;} .visual.sv71 {background: url('../img/visual/visual_7_1.jpg') center/cover;} @media all and (max-width: 880px){ .visual {} .visual .title {font-size: 2.8rem; padding: 12rem 0; line-height: 4rem;} .visual .txtArea {text-align: center; max-width: var(--innerMo); padding: 8rem 0 22rem;} .visual .txtArea .tit {font-size: 2.8rem;} .visual .txtArea .subt {font-size: 1.6rem; padding: 1.6rem 0 1rem; line-height: 2.2rem;} .visual .txtArea .wrt {font-size: 1.4rem; line-height: 2rem;} .visual .imgArea {right: 0;} } .commLstArea {max-width: 116rem; width: 100%} .commLstArea li {padding: 2.2rem 0;} .commLstArea li + li {margin-top: 3rem;} .commLstArea li:nth-child(2n-1) {background: var(--fcp); color: #fff;} .commLstArea li:nth-child(2n) {background: #EDEDED;} @media all and (max-width: 880px){ .commLstArea {font-size: 1.6rem;} .commLstArea li {padding: 1rem 1.4rem; line-height: 2.2rem;} .commLstArea li + li {margin-top: 1.2rem;} .commLstArea li:nth-child(2n-1) {} .commLstArea li:nth-child(2n) {} } .caseWrap {max-width: 132.4rem; width: 100%} .caseWrap .caseSwiper {overflow: hidden; max-width: 119.6rem; margin: 0 auto} .caseWrap .caseSwiper .slide {} .caseWrap .caseSwiper .caseImg {} .caseWrap .caseSwiper .caseTxt {padding: 1.5rem 0; margin-top: 4.5rem; background: #EEF0F3;} .caseWrap .caseSwiper .caseTxt .t1 {padding-bottom: 0.7rem} .caseWrap .casePrev, .caseWrap .caseNext {width: 2.2rem; height: 4.4rem; margin: 0} .caseWrap .casePrev {background: url('../img/case_prev.png') center/cover no-repeat; left: 0} .caseWrap .caseNext {background: url('../img/case_next.png') center/cover no-repeat; right: 0} .caseWrap .casePrev::after, .caseWrap .caseNext::after {display: none;} @media all and (max-width: 880px){ .caseWrap {} .caseWrap .caseSwiper {} .caseWrap .caseSwiper .slide {} .caseWrap .caseSwiper .caseImg {} .caseWrap .caseSwiper .caseTxt {padding: 1.5rem 1rem; margin-top: 1.5rem;} .caseWrap .caseSwiper .caseTxt .t1 {font-size: 1.4rem; padding-bottom: 0.6rem} .caseWrap .caseSwiper .caseTxt .t2 {font-size: 1.2rem; line-height: 1.8rem;} .caseWrap .casePrev, .caseWrap .caseNext {top: 38%; height: 2.4rem;} .caseWrap .casePrev {left: 3%} .caseWrap .caseNext {right: 3%} } .commTxt {} .commTxt .ico {margin-bottom: 2rem;} .commTxt .t1 {padding-bottom: 2rem;} .commTxt .t2 {padding-bottom: 2rem;} .commTxt .t3 {padding-bottom: 3rem; line-height: 2.8rem;} .commTxt .t4 {line-height: 2.8rem;} @media all and (max-width: 880px){ .commTxt {} .commTxt .ico {width: 2.8rem; margin-bottom: 1.2rem;} .commTxt .t1 {font-size: 2rem; padding-bottom: 1rem;} .commTxt .t2 {font-size: 2.8rem; padding-bottom: 1.2rem;} .commTxt .t3 {font-size: 1.6rem; padding-bottom: 1.2rem; line-height: 2.4rem;} .commTxt .t4 {font-size: 1.6rem; line-height: 2.4rem;} } /********* sub11 **********/ #sub11 {overflow: hidden;} #sub11 .s1 {background: url('../img/01/01_1_ico.png') center bottom / 69rem no-repeat;} #sub11 .s1 .inner {padding: 22rem 0 1.5rem;} #sub11 .s1 .t1 {padding-bottom: 20.8rem; line-height: 7.6rem; margin-bottom: 11rem} #sub11 .s1 .t1::before {content: ''; display: block; position: absolute; width: 3px; height: 14rem; background: var(--fcp); left: calc(50% - 1px); bottom: 0;} #sub11 .s1 .t2 {line-height: 7.6rem} #sub11 .s2 {} #sub11 .s2 .inner {padding: 22.5rem 0 15rem; max-width: 135.2rem;} #sub11 .s2 .tit {margin-bottom: 6rem;} #sub11 .s2 .lst {gap: 4rem;} #sub11 .s2 .lst li {width: calc((100% - 8rem) / 3); height: 17.4rem; border-radius: 4rem; display: flex; flex-direction: column; justify-content: center; background: #EEF0F3} #sub11 .s2 .lst li:nth-child(2n) {background: var(--fcp); color: #fff} #sub11 .s2 .prg {margin-top: 4rem; background: var(--fcp); border-radius: 4rem; padding: 3.9rem 0;} #sub11 .s3 {} #sub11 .s3 .inner {padding: 0 0 15rem 0} #sub11 .s4 {} #sub11 .s4 .inner {padding: 0 0 19.5rem 0} #sub11 .comm .titArea {margin-bottom: 4rem;} #sub11 .comm .titArea .tit {padding-bottom: 2rem;} #sub11 .comm .titArea .wrt {} #sub11 .comm .cont {max-width: 136rem; margin: 0 auto;} #sub11 .comm .facSwiper {overflow: hidden;} #sub11 .comm .facSwiper .txt {background: rgba(0,0,0,0.47); padding: 1.5rem 0} #sub11 .comm .facSwiper .facPg {position: relative; bottom: 0; margin: 3.4rem 0 1.4rem; display: flex;} #sub11 .comm .facSwiper .swiper-pagination-bullet {margin: 0; border-radius: 0; height: 0.8rem; background: #EDEDED; opacity: 1; flex: 1;} #sub11 .comm .facSwiper .swiper-pagination-bullet-active {background: var(--fcp)} #sub11 .comm .facSwiper .txtLst {} #sub11 .comm .facSwiper .txtLst li {flex: 1; text-align: center;} #sub11 .comm .facPrev, #sub11 .comm .facNext {width: 2.4rem; height: 4rem; margin: 0; top: 42%;} #sub11 .comm .facPrev {background: url('../img/01/01_prev.svg') center/contain no-repeat; left: auto; right: calc(100% + 2.4rem);} #sub11 .comm .facNext {background: url('../img/01/01_next.svg') center/contain no-repeat; right: auto; left: calc(100% + 2.4rem);} #sub11 .comm .facPrev::after, #sub11 .comm .facNext::after {display: none} #sub11 .comm .eqiSwiper {overflow: hidden;} #sub11 .comm .eqiSwiper .txt {background: rgba(0,0,0,0.47); padding: 1.5rem 0} #sub11 .comm .eqiSwiper .eqiPg {position: relative; bottom: 0; margin: 3.4rem 0 1.4rem; display: flex;} #sub11 .comm .eqiSwiper .swiper-pagination-bullet {margin: 0; border-radius: 0; height: 0.8rem; background: #EDEDED; opacity: 1; flex: 1;} #sub11 .comm .eqiSwiper .swiper-pagination-bullet-active {background: var(--fcp)} #sub11 .comm .eqiSwiper .txtLst {} #sub11 .comm .eqiSwiper .txtLst li {flex: 1; text-align: center;} #sub11 .comm .eqiPrev, #sub11 .comm .eqiNext {width: 2.4rem; height: 4rem; margin: 0; top: 42%;} #sub11 .comm .eqiPrev {background: url('../img/01/01_prev.svg') center/contain no-repeat; left: auto; right: calc(100% + 2.4rem);} #sub11 .comm .eqiNext {background: url('../img/01/01_next.svg') center/contain no-repeat; right: auto; left: calc(100% + 2.4rem);} #sub11 .comm .eqiPrev::after, #sub11 .comm .eqiNext::after {display: none} @media all and (max-width: 880px){ #sub11 {} #sub11 .s1 {background: url(../img/01/01_1_ico.png) center bottom 15% / 24rem no-repeat;} #sub11 .s1 .inner {padding: 10rem 0 0;} #sub11 .s1 .t1 {font-size: 2rem; line-height: 3.4rem; padding-bottom: 10rem; margin-bottom: 3rem;} #sub11 .s1 .t1::before {height: 7rem; width: 2px} #sub11 .s1 .t2 {font-size: 2.2rem; line-height: 3.4rem;} #sub11 .s2 {} #sub11 .s2 .inner {padding: 10rem 0; max-width: var(--innerMo); margin: 0 auto;} #sub11 .s2 .tit {font-size: 3rem; margin-bottom: 2rem;} #sub11 .s2 .lst {gap: 1rem; justify-content: center; font-size: 1.6rem;} #sub11 .s2 .lst li {width: 100%; padding: 1rem; height: 8rem; border-radius: 1.4rem;} #sub11 .s2 .lst li:last-child {width: 100%} #sub11 .s2 .lst li:nth-child(2n) {} #sub11 .s2 .prg {font-size: 2.2rem; margin-top: 3rem; padding: 3rem; border-radius: 2rem;} #sub11 .s3 {} #sub11 .s3 .inner {max-width: var(--innerMo); margin: 0 auto; padding: 0 0 10rem 0;} #sub11 .s4 {} #sub11 .s4 .inner {max-width: var(--innerMo); margin: 0 auto; padding: 0 0 10rem 0;} #sub11 .comm .titArea {margin-bottom: 2.8rem;} #sub11 .comm .titArea .tit {font-size: 3rem; padding-bottom: 1.2rem;} #sub11 .comm .titArea .wrt {font-size: 1.6rem;} #sub11 .comm .cont {} #sub11 .comm .facSwiper {} #sub11 .comm .facSwiper .txt {position: relative; font-size: 1.6rem; padding: 1rem 0; background: rgba(0, 0, 0, 0.7);} #sub11 .comm .facSwiper .facPg {margin: 2.8rem 0 0;} #sub11 .comm .facSwiper .swiper-pagination-bullet {height: 0.6rem} #sub11 .comm .facSwiper .txtLst {display: none} #sub11 .comm .facPrev, #sub11 .comm .facNext {height: 2rem; top: 33%;} #sub11 .comm .facPrev {right: calc(100% - 2.4rem);} #sub11 .comm .facNext {left: calc(100% - 2.4rem);} #sub11 .comm .eqiSwiper {} #sub11 .comm .eqiSwiper .txt {position: relative; font-size: 1.6rem; padding: 1rem 0; background: rgba(0, 0, 0, 0.7);} #sub11 .comm .eqiSwiper .eqiPg {margin: 2.8rem 0 0;} #sub11 .comm .eqiSwiper .swiper-pagination-bullet {height: 0.6rem} #sub11 .comm .eqiSwiper .txtLst {display: none} #sub11 .comm .eqiPrev, #sub11 .comm .eqiNext {height: 2rem; top: 33%;} #sub11 .comm .eqiPrev {right: calc(100% - 2.4rem);} #sub11 .comm .eqiNext {left: calc(100% - 2.4rem);} } #sub12 {} #sub12 .inner {padding: 20rem 0 25rem;} #sub12 .docArea {} #sub12 .docArea + .docArea {margin-top: 17.5rem;} #sub12 .docArea .txtArea {width: 50%} #sub12 .docArea .txtArea .pos {padding: 0.5rem 1.2rem; background: var(--fcp)} #sub12 .docArea .txtArea .name {gap: 1.8rem; margin: 1.6rem 0 5rem;} #sub12 .docArea .txtArea .name span {} #sub12 .docArea .txtArea .lst {gap: 4rem} #sub12 .docArea .txtArea .t1 {line-height: 4rem;} #sub12 .docArea .txtArea .t2 {margin: 2rem 0 5rem; line-height: 2.8rem;} #sub12 .docArea .txtArea .t3 {line-height: 3rem;} #sub12 .docArea .imgArea {width: 50%} #sub12 .docArea:nth-child(2n) {flex-direction: row-reverse;} #sub12 .docArea:nth-child(2n) .txtArea {padding-left: 7.5rem;} @media all and (max-width: 880px){ #sub12 {} #sub12 .inner {max-width: var(--innerMo); padding: 10rem 0 15rem;} #sub12 .docArea {flex-direction: column-reverse; gap: 4rem} #sub12 .docArea + .docArea {margin-top: 10.5rem;} #sub12 .docArea .txtArea {width: 100%} #sub12 .docArea .txtArea .pos {font-size: 1.6rem; padding: 0.5rem 0.8rem;} #sub12 .docArea .txtArea .name {font-size: 3.2rem; margin: 1.6rem 0;} #sub12 .docArea .txtArea .name span {font-size: 2.2rem;} #sub12 .docArea .txtArea .lst {flex-direction: column; gap: 0.6rem;} #sub12 .docArea .txtArea .t1 {font-size: 1.8rem; line-height: 2.8rem;} #sub12 .docArea .txtArea .t2 {font-size: 1.5rem; margin: 2rem 0; line-height: 2.4rem;} #sub12 .docArea .txtArea .t3 {font-size: 1.4rem; line-height: 2.6rem;} #sub12 .docArea .imgArea {width: 100%} #sub12 .docArea:nth-child(2n) {flex-direction: column-reverse;} #sub12 .docArea:nth-child(2n) .txtArea {padding: 0} } /********* sub13 **********/ #sub13 {} #sub13 .s1 {} #sub13 .s1 .inner {padding: 20rem 0 24rem;} #sub13 .s1 .titArea {margin-bottom: 3.8rem; gap: 2rem;} #sub13 .s1 .titArea .ico {} #sub13 .s1 .imgArea {max-width: 142.4rem;} #sub13 .s2 {background: #EEF0F3} #sub13 .s2 .inner {padding: 9rem 0 10rem;} #sub13 .s2 .title {margin-bottom: 4rem} #sub13 .s2 .cont {} #sub13 .s2 .cont .imgArea {width: 50%} #sub13 .s2 .cont .imgArea .img {max-width: 47.4rem; margin: 0 auto;} #sub13 .s2 .cont .txtArea {width: 50%} #sub13 .s2 .cont .txtArea .ico {} #sub13 .s2 .cont .txtArea .tit {padding: 2rem 0;} #sub13 .s2 .cont .txtArea .lst {} #sub13 .s2 .cont .txtArea .lst li {} #sub13 .s2 .cont .txtArea .lst li + li {margin-top: 6rem;} #sub13 .s2 .cont .txtArea .lst li .ltit {padding-bottom: 2rem;} #sub13 .s2 .cont .txtArea .lst li .lwrt {line-height: 2.8rem;} @media all and (max-width: 880px){ #sub13 {} #sub13 .s1 {} #sub13 .s1 .inner {max-width: var(--innerMo); padding: 6rem 0 8rem;} #sub13 .s1 .titArea {gap: 1rem; font-size: 2.2rem; margin-bottom: 2.8rem;} #sub13 .s1 .titArea .ico {width: 2.8rem;} #sub13 .s1 .imgArea {} #sub13 .s2 {} #sub13 .s2 .inner {max-width: var(--innerMo); padding: 4rem 0 7rem;} #sub13 .s2 .title {font-size: 2.4rem; line-height: 3.8rem; margin-bottom: 2rem;} #sub13 .s2 .cont {flex-direction: column; gap: 2rem;} #sub13 .s2 .cont .imgArea {width: 100%} #sub13 .s2 .cont .imgArea .img {max-width: 50%;} #sub13 .s2 .cont .txtArea {width: 100%} #sub13 .s2 .cont .txtArea .ico {width: 2.8rem;} #sub13 .s2 .cont .txtArea .tit {font-size: 2.1rem; padding: 1.4rem 0;} #sub13 .s2 .cont .txtArea .lst {} #sub13 .s2 .cont .txtArea .lst li {} #sub13 .s2 .cont .txtArea .lst li + li {margin-top: 3rem;} #sub13 .s2 .cont .txtArea .lst li .ltit {font-size: 2.6rem; padding-bottom: 1rem;} #sub13 .s2 .cont .txtArea .lst li .lwrt {font-size: 1.4rem; line-height: 2.2rem;} } /********* sub14 **********/ #sub14 {} #sub14 .s5 {} #sub14 .s5 .inner {padding: 28rem 0; justify-content: space-between; max-width: 171.2rem; margin-left: auto;} #sub14 .s5 .txtArea {} #sub14 .s5 .txtArea .ico {} #sub14 .s5 .txtArea .subt {padding: 2rem 0;} #sub14 .s5 .txtArea .tit {margin-bottom: 2.8rem;} #sub14 .s5 .txtArea .nav {gap: 2.5rem} #sub14 .s5 .txtArea .nav .mutPrev, #sub14 .s5 .txtArea .nav .mutNext {width: 5.2rem; height: 5.2rem; left: auto; right: auto; margin: 0; position: relative;} #sub14 .s5 .txtArea .nav .mutPrev {background: url('../img/01/04_prev.png') center/contain no-repeat;} #sub14 .s5 .txtArea .nav .mutNext {background: url('../img/01/04_next.png') center/contain no-repeat;} #sub14 .s5 .txtArea .nav .mutPrev::after, #sub14 .s5 .txtArea .nav .mutNext::after {display: none} #sub14 .s5 .mutSwiper {max-width: 114.2rem; overflow: hidden; width: 100%;} #sub14 .s5 .mutSwiper .img {} @media all and (max-width: 880px){ #sub14 {} #sub14 .s5 {} #sub14 .s5 .inner {max-width: var(--innerMo); flex-direction: column; margin: 0 auto; padding: 12rem 0; gap: 3rem;} #sub14 .s5 .txtArea {} #sub14 .s5 .txtArea .ico {width: 2.8rem;} #sub14 .s5 .txtArea .subt {font-size: 2rem; padding: 1.2rem 0;} #sub14 .s5 .txtArea .tit {font-size: 2.8rem; margin-bottom: 1.8rem} #sub14 .s5 .txtArea .nav {gap: 1rem;} #sub14 .s5 .txtArea .nav .mutPrev, #sub14 .s5 .txtArea .nav .mutNext {width: 3.2rem; height: 3.2rem;} #sub14 .s5 .mutSwiper {} #sub14 .s5 .mutSwiper .img {} } /********* sub21 **********/ #sub21 {overflow: hidden;} #sub21 .s1 {} #sub21 .s1 .inner {padding: 20rem 0 30rem; gap: 14.4rem;} #sub21 .s1 .txtArea {} #sub21 .s1 .txtArea .tit {} #sub21 .s1 .txtArea .subt {padding: 3.4rem 0 1rem} #sub21 .s1 .txtArea .wrt {margin-bottom: 3.8rem;} #sub21 .s1 .txtArea .prg {padding: 1.6rem 4rem; border-radius: 2rem; display: inline-block; line-height: 2.8rem;} #sub21 .s1 .lstArea {max-width: 66.6rem; gap: 2.6rem 3.2rem;} #sub21 .s1 .lstArea .lst {width: calc((100% - 3.2rem) / 2); box-shadow: 0 0 0.6rem rgba(0,0,0,0.16); border-radius: 2rem; line-height: 3.4rem; padding: 3.8rem 0;} #sub21 .s2 {} #sub21 .s2 .inner {padding-bottom: 20rem} #sub21 .s2 .lstArea {} #sub21 .s2 .lstArea .lst {} #sub21 .s2 .lstArea .lst + .lst {margin-top: 23rem;} #sub21 .s2 .lstArea .lst .img {width: 50%;} #sub21 .s2 .lstArea .lst .txts {width: 50%;} #sub21 .s2 .lstArea .lst .txts .tit {} #sub21 .s2 .lstArea .lst .txts .subt {padding: 1.4rem 0 4.2rem; line-height: 4.4rem;} #sub21 .s2 .lstArea .lst .txts .wrt {line-height: 4.4rem;} #sub21 .s2 .lstArea .lst:nth-child(2n-1) .txts {padding-left: 6.6rem} @media all and (max-width: 880px){ #sub21 {} #sub21 .s1 {} #sub21 .s1 .inner {flex-direction: column; max-width: var(--innerMo); gap: 4rem; padding: 10rem 0 14rem;} #sub21 .s1 .txtArea {text-align: center; width: 100%;} #sub21 .s1 .txtArea .tit {font-size: 3.2rem;} #sub21 .s1 .txtArea .subt {font-size: 1.6rem; padding: 2.4rem 0;} #sub21 .s1 .txtArea .wrt {font-size: 1.4rem; line-height: 2.1rem; margin-bottom: 2rem;} #sub21 .s1 .txtArea .prg {font-size: 1.6rem; line-height: 2.2rem; width: 100%;} #sub21 .s1 .lstArea {gap: 1.4rem; font-size: 1.6rem;} #sub21 .s1 .lstArea .lst {width: calc((100% - 1.4rem) / 2); line-height: 2.4rem; padding: 2.6rem 0;} #sub21 .s2 {} #sub21 .s2 .inner {max-width: var(--innerMo); padding-bottom: 10rem} #sub21 .s2 .lstArea {} #sub21 .s2 .lstArea .lst {flex-direction: column; gap: 2rem;} #sub21 .s2 .lstArea .lst:nth-child(2n) {flex-direction: column-reverse;} #sub21 .s2 .lstArea .lst + .lst {margin-top: 8rem;} #sub21 .s2 .lstArea .lst .img {width: 100%} #sub21 .s2 .lstArea .lst .txts {width: 100%; padding-left: 0 !important} #sub21 .s2 .lstArea .lst .txts .tit {font-size: 2.6rem;} #sub21 .s2 .lstArea .lst .txts .subt {font-size: 1.8rem; padding: 0.8rem 0 1.6rem; line-height: 1.4;} #sub21 .s2 .lstArea .lst .txts .wrt {font-size: 1.4rem; line-height: 2.4rem;} } /********* sub23 **********/ #sub23 {overflow: hidden;} #sub23 .s1 {} #sub23 .s1 .inner {padding: 20rem 0;} #sub23 .s1 .txtArea {} #sub23 .s1 .imgArea {} #sub23 .s2 {} #sub23 .s2 .inner {gap: 6rem; padding-bottom: 27.6rem;} #sub23 .s2 .txtArea {} #sub23 .s2 .imgArea {max-width: 88rem;} #sub23 .s3 {} #sub23 .s3 .inner {gap: 6rem; padding-bottom: 27.6rem;} #sub23 .s3 .txtArea {} #sub23 .s3 .imgArea {} #sub23 .s4 {} #sub23 .s4 .inner {gap: 2rem; padding-bottom: 20rem;} #sub23 .s4 .txtArea {} #sub23 .s4 .lstArea {} @media all and (max-width: 880px){ #sub23 {} #sub23 .s1 {} #sub23 .s1 .inner {flex-direction: column; max-width: var(--innerMo); gap: 4rem; padding: 10rem 0} #sub23 .s1 .txtArea {text-align: center;} #sub23 .s1 .imgArea {} #sub23 .s2 {} #sub23 .s2 .inner {max-width: var(--innerMo); gap: 4rem; padding-bottom: 10rem} #sub23 .s2 .txtArea {} #sub23 .s2 .imgArea {} #sub23 .s3 {} #sub23 .s3 .inner {max-width: var(--innerMo); gap: 4rem; padding-bottom: 10rem} #sub23 .s3 .txtArea {} #sub23 .s3 .imgArea {} #sub23 .s4 {} #sub23 .s4 .inner {max-width: var(--innerMo); padding-bottom: 10rem; gap: 1rem;} #sub23 .s4 .txtArea {} #sub23 .s4 .lstArea {} } /********* sub24 **********/ #sub24 {overflow: hidden;} @media all and (max-width: 880px){ #sub24 {} } /********* sub25 **********/ #sub25 {overflow: hidden;} #sub25 .s1 {max-width: 171.2rem; margin-left: auto} #sub25 .s1 .inner {padding: 20rem 0 23.6rem} #sub25 .s1 .txtArea {} #sub25 .s1 .imgArea {} #sub25 .s2 {} #sub25 .s2 .inner {padding: 0 0 30rem 0;} #sub25 .s2 .txtArea {margin-bottom: 2rem;} #sub25 .s2 .lstArea {gap: 3.8rem;} #sub25 .s2 .lstArea li {flex: 1;} #sub25 .s3 {} #sub25 .s3 .inner {padding: 0 0 20rem 0;} #sub25 .s3 .txtArea {margin-bottom: 2rem;} #sub25 .s3 .lstArea {max-width: 116rem; margin: 0 auto} @media all and (max-width: 880px){ #sub25 {} #sub25 .s1 {margin: 0 auto} #sub25 .s1 .inner {max-width: var(--innerMo); padding: 10rem 0; margin: 0 auto; flex-direction: column; gap: 4rem;} #sub25 .s1 .txtArea {} #sub25 .s1 .imgArea {} #sub25 .s2 {} #sub25 .s2 .inner {max-width: var(--innerMo); padding: 0 0 10rem 0;} #sub25 .s2 .txtArea {margin-bottom: 1rem;} #sub25 .s2 .lstArea {flex-direction: column; gap: 1.2rem;} #sub25 .s2 .lstArea li {} #sub25 .s3 {} #sub25 .s3 .inner {max-width: var(--innerMo); padding: 0 0 10rem 0;} #sub25 .s3 .txtArea {margin-bottom: 1rem;} #sub25 .s3 .lstArea {} } /********* sub26 **********/ #sub26 {} #sub26 .commTxt {} #sub26 .commTxt .ico {margin-bottom: 2rem;} #sub26 .commTxt .t1 {padding: 0 0 2rem 0;} #sub26 .commTxt .t2 {padding: 0 0 1.6rem 0;} #sub26 .commTxt .t3 {margin-bottom: 2rem; padding: 0.6rem 1.2rem; gap: 0.8rem;} #sub26 .commTxt .t4 {line-height: 2.8rem} #sub26 .s1 {} #sub26 .s1 .inner {padding: 20rem 0 22.5rem; gap: 6rem;} #sub26 .s1 .txtArea {} #sub26 .s1 .imgArea {max-width: 101.4rem;} #sub26 .s2 {} #sub26 .s2 .inner {padding: 0 0 22.5rem; gap: 6rem;} #sub26 .s2 .txtArea {} #sub26 .s2 .imgArea {max-width: 101.4rem;} #sub26 .s3 {} #sub26 .s3 .inner {padding: 0 0 30rem; gap: 7rem;} #sub26 .s3 .txtArea {} #sub26 .s3 .imgArea {max-width: 139.6rem;} #sub26 .s4 {} #sub26 .s4 .inner {padding: 0 0 20rem 0; gap: 4rem;} #sub26 .s4 .txtArea {} #sub26 .s4 .lstArea {} @media all and (max-width: 880px){ #sub26 {} #sub26 .commTxt {} #sub26 .commTxt .ico {width: 2.8rem; margin-bottom: 1.2rem;} #sub26 .commTxt .t1 {font-size: 2rem; padding: 0 0 1rem 0;} #sub26 .commTxt .t2 {font-size: 2.8rem; padding: 0 0 1.2rem 0;} #sub26 .commTxt .t3 {margin-bottom: 1rem; font-size: 1.4rem; gap: 0.2rem; font-weight: 500; padding: 0.4rem 0.6rem;} #sub26 .commTxt .t3 img {width: 1.4rem} #sub26 .commTxt .t4 {font-size: 1.4rem; line-height: 2.2rem;} #sub26 .s1 {} #sub26 .s1 .inner {padding: 10rem 0; max-width: var(--innerMo); gap: 2.8rem;} #sub26 .s1 .txtArea {} #sub26 .s1 .imgArea {} #sub26 .s2 {} #sub26 .s2 .inner {padding: 0 0 10rem 0; max-width: var(--innerMo); gap: 2.8rem;} #sub26 .s2 .txtArea {} #sub26 .s2 .imgArea {} #sub26 .s3 {} #sub26 .s3 .inner {padding: 0 0 10rem 0; max-width: var(--innerMo); gap: 2.8rem;} #sub26 .s3 .txtArea {} #sub26 .s3 .imgArea {} #sub26 .s4 {} #sub26 .s4 .inner {padding: 0 0 10rem 0; max-width: var(--innerMo); gap: 1.2rem;} #sub26 .s4 .txtArea {} #sub26 .s4 .lstArea {} } /********* sub27 **********/ #sub27 {overflow: hidden;} #sub27 .s1 {} #sub27 .s1 .inner {padding: 20rem 0; gap: 4rem;} #sub27 .s1 .txtArea {} #sub27 .s1 .imgArea {} #sub27 .s2 {} #sub27 .s2 .inner {padding: 0 0 20rem 0; gap: 6rem;} #sub27 .s2 .txtArea {} #sub27 .s2 .imgArea {} #sub27 .s2 .prgArea {margin-top: 20rem; padding: 8.6rem 0; background: #EEF0F3; line-height: 6.3rem; width: 100%} #sub27 .s3 {} #sub27 .s3 .inner {gap: 2rem; padding: 0 0 26rem 0;} #sub27 .s3 .txtArea {} #sub27 .s3 .imgArea {} #sub27 .s4 {} #sub27 .s4 .inner {gap: 2rem; padding: 0 0 20rem 0;} #sub27 .s4 .txtArea {} #sub27 .s4 .caseWrap {} @media all and (max-width: 880px){ #sub27 {} #sub27 .s1 {} #sub27 .s1 .inner {padding: 10rem 0; max-width: var(--innerMo); gap: 2.8rem;} #sub27 .s1 .txtArea {} #sub27 .s1 .imgArea {} #sub27 .s2 {} #sub27 .s2 .inner {max-width: var(--innerMo); gap: 2.8rem; padding: 0 0 10rem 0} #sub27 .s2 .txtArea {} #sub27 .s2 .imgArea {} #sub27 .s2 .prgArea {font-size: 1.8rem; line-height: 2.8rem; margin-top: 0; padding: 2rem;} #sub27 .s3 {} #sub27 .s3 .inner {max-width: var(--innerMo); padding: 0 0 10rem 0} #sub27 .s3 .txtArea {} #sub27 .s3 .imgArea {} #sub27 .s4 {} #sub27 .s4 .inner {max-width: var(--innerMo); padding: 0 0 10rem 0} #sub27 .s4 .txtArea {} #sub27 .s4 .caseWrap {} } /********* sub28 **********/ #sub28 {overflow: hidden;} #sub28 .s1 {} #sub28 .s1 .inner {padding: 20rem 0 0 0;} #sub28 .s1 .titArea {margin-bottom: 7.5rem;} #sub28 .s1 .titArea .ico {margin-bottom: 2rem;} #sub28 .s1 .titArea .tit {} #sub28 .s1 .lstArea {gap: 5.4rem;} #sub28 .s1 .lstArea .img {} #sub28 .s1 .lstArea .txt {padding-top: 3.6rem; line-height: 2.8rem} #sub28 .s2 {} #sub28 .s2 .inner {padding: 22rem 0 32rem; justify-content: space-between; max-width: 171.2rem; margin-left: auto;} #sub28 .s2 .txtArea {} #sub28 .s2 .txtArea .ico {} #sub28 .s2 .txtArea .subt {padding: 2rem 0;} #sub28 .s2 .txtArea .tit {margin-bottom: 2.8rem;} #sub28 .s2 .txtArea .nav {gap: 2.5rem; margin-top: 0.8rem;} #sub28 .s2 .txtArea .nav .mutPrev, #sub28 .s2 .txtArea .nav .mutNext {width: 5.2rem; height: 5.2rem; left: auto; right: auto; margin: 0; position: relative;} #sub28 .s2 .txtArea .nav .mutPrev {background: url('../img/01/04_prev.png') center/contain no-repeat;} #sub28 .s2 .txtArea .nav .mutNext {background: url('../img/01/04_next.png') center/contain no-repeat;} #sub28 .s2 .txtArea .nav .mutPrev::after, #sub28 .s2 .txtArea .nav .mutNext::after {display: none} #sub28 .s2 .mutSwiper {max-width: 114.2rem; overflow: hidden; width: 100%;} #sub28 .s2 .mutSwiper .img {} #sub28 .s3 {} #sub28 .s3 .inner {padding: 0 0 20rem 0;} #sub28 .s3 .txtArea {margin-bottom: 4rem;} #sub28 .s3 .txtArea .ico {} #sub28 .s3 .txtArea .subt {padding: 2rem 0;} #sub28 .s3 .txtArea .tit {} #sub28 .s3 .lstArea {} @media all and (max-width: 880px){ #sub28 {} #sub28 .s1 {} #sub28 .s1 .inner {max-width: var(--innerMo); padding: 10rem 0 0 0} #sub28 .s1 .titArea {margin-bottom: 3rem;} #sub28 .s1 .titArea .ico {width: 2.8rem;} #sub28 .s1 .titArea .tit {font-size: 2.8rem;} #sub28 .s1 .lstArea {flex-direction: column; gap: 3.2rem;} #sub28 .s1 .lstArea .img {} #sub28 .s1 .lstArea .txt {font-size: 1.6rem; padding-top: 1.4rem;} #sub28 .s2 {} #sub28 .s2 .inner {max-width: var(--innerMo); flex-direction: column; margin: 0 auto; padding: 12rem 0; gap: 3rem;} #sub28 .s2 .txtArea {} #sub28 .s2 .txtArea .ico {width: 2.8rem;} #sub28 .s2 .txtArea .subt {font-size: 2rem; padding: 1.2rem 0;} #sub28 .s2 .txtArea .tit {font-size: 2.8rem; margin-bottom: 1.8rem} #sub28 .s2 .txtArea .nav {gap: 1rem; margin-top: 0.4rem;} #sub28 .s2 .txtArea .nav .mutPrev, #sub28 .s2 .txtArea .nav .mutNext {width: 3.2rem; height: 3.2rem;} #sub28 .s2 .mutSwiper {} #sub28 .s2 .mutSwiper .img {} #sub28 .s3 {} #sub28 .s3 .inner {max-width: var(--innerMo); padding: 0 0 14rem 0;} #sub28 .s3 .txtArea {margin-bottom: 3rem;} #sub28 .s3 .txtArea .ico {width: 2.8rem;} #sub28 .s3 .txtArea .subt {font-size: 1.8rem; padding: 1rem 0;} #sub28 .s3 .txtArea .tit {font-size: 2.8rem;} #sub28 .s3 .lstArea {} } /********* sub42 **********/ #sub42 {overflow: hidden;} #sub42 .s1 {max-width: 171.2rem; margin-left: auto} #sub42 .s1 .inner {padding: 20rem 0 23.6rem} #sub42 .s1 .txtArea {} #sub42 .s1 .imgArea {} #sub42 .s2 {} #sub42 .s2 .inner {padding: 0 0 25rem 0} #sub42 .s2 .txtArea {margin-bottom: 6rem;} #sub42 .s2 .contArea {} #sub42 .s2 .contArea .img {} #sub42 .s2 .contArea .txt {margin-top: 6rem; background: #EEF0F3; padding: 2.2rem 0;} #sub42 .s2 .contArea .txt .tit {padding-bottom: 1rem;} #sub42 .s2 .contArea .txt .wrt {line-height: 2.2rem;} #sub42 .s3 {} #sub42 .s3 .inner {padding: 0 0 25rem 0} #sub42 .s3 .txtArea {margin-bottom: 6rem;} #sub42 .s3 .contArea {} #sub42 .s3 .contArea .img {} #sub42 .s3 .contArea .txt {margin-top: 6rem; background: #EEF0F3; padding: 2.2rem 0;} #sub42 .s3 .contArea .txt .tit {padding-bottom: 1rem;} #sub42 .s3 .contArea .txt .wrt {line-height: 2.2rem;} #sub42 .s4 {} #sub42 .s4 .inner {padding: 0 0 20rem 0;} #sub42 .s4 .txtArea {margin-bottom: 2rem} #sub42 .s4 .lstArea {} @media all and (max-width: 880px){ #sub42 {} #sub42 .s1 {margin: 0 auto} #sub42 .s1 .inner {max-width: var(--innerMo); padding: 10rem 0; margin: 0 auto; flex-direction: column; gap: 4rem;} #sub42 .s1 .txtArea {} #sub42 .s1 .imgArea {} #sub42 .s2 {} #sub42 .s2 .inner {max-width: var(--innerMo); padding: 0 0 10rem 0;} #sub42 .s2 .txtArea {margin-bottom: 2.8rem;} #sub42 .s2 .contArea {} #sub42 .s2 .contArea .img {} #sub42 .s2 .contArea .txt {margin-top: 2.8rem;} #sub42 .s2 .contArea .txt .tit {font-size: 1.4rem; padding-bottom: 0.6rem;} #sub42 .s2 .contArea .txt .wrt {font-size: 1.2rem; line-height: 1.8rem;} #sub42 .s3 {} #sub42 .s3 .inner {max-width: var(--innerMo); padding: 0 0 10rem 0;} #sub42 .s3 .txtArea {margin-bottom: 2.8rem;} #sub42 .s3 .contArea {} #sub42 .s3 .contArea .img {} #sub42 .s3 .contArea .txt {margin-top: 2.8rem;} #sub42 .s3 .contArea .txt .tit {font-size: 1.4rem; padding-bottom: 0.6rem;} #sub42 .s3 .contArea .txt .wrt {font-size: 1.2rem; line-height: 1.8rem;} #sub42 .s4 {} #sub42 .s4 .inner {max-width: var(--innerMo); padding: 0 0 10rem 0;} #sub42 .s4 .txtArea {margin-bottom: 1rem;} #sub42 .s4 .lstArea {} } /********* sub43 **********/ #sub43 {overflow: hidden;} #sub43 .s1 {} #sub43 .s1 .inner {padding: 20rem 0 0 0; gap: 2rem;} #sub43 .s1 .txtArea {} #sub43 .s1 .lstArea {} #sub43 .s2 {} #sub43 .s2 .inner {padding: 22rem 0 32rem; justify-content: space-between; max-width: 171.2rem; margin-left: auto;} #sub43 .s2 .txtArea {} #sub43 .s2 .txtArea .ico {} #sub43 .s2 .txtArea .subt {padding: 2rem 0;} #sub43 .s2 .txtArea .tit {margin-bottom: 2.8rem;} #sub43 .s2 .txtArea .nav {gap: 2.5rem; margin-top: 0.8rem;} #sub43 .s2 .txtArea .nav .mutPrev, #sub43 .s2 .txtArea .nav .mutNext {width: 5.2rem; height: 5.2rem; left: auto; right: auto; margin: 0; position: relative;} #sub43 .s2 .txtArea .nav .mutPrev {background: url('../img/01/04_prev.png') center/contain no-repeat;} #sub43 .s2 .txtArea .nav .mutNext {background: url('../img/01/04_next.png') center/contain no-repeat;} #sub43 .s2 .txtArea .nav .mutPrev::after, #sub43 .s2 .txtArea .nav .mutNext::after {display: none} #sub43 .s2 .mutSwiper {max-width: 114.2rem; overflow: hidden; width: 100%;} #sub43 .s2 .mutSwiper .img {} #sub43 .s3 {} #sub43 .s3 .inner {padding: 0 0 25rem 0} #sub43 .s3 .txtArea {margin-bottom: 4.5rem;} #sub43 .s3 .contArea {} #sub43 .s3 .contArea .imgArea {gap: 3rem;} #sub43 .s3 .contArea .imgArea .img {} #sub43 .s3 .contArea .txt {margin-top: 6rem; background: #EEF0F3; padding: 2.2rem 0;} #sub43 .s3 .contArea .txt .tit {padding-bottom: 1rem;} #sub43 .s3 .contArea .txt .wrt {line-height: 2.2rem;} @media all and (max-width: 880px){ #sub43 {} #sub43 .s1 {} #sub43 .s1 .inner {max-width: var(--innerMo); padding: 10rem 0 0 0; gap: 1rem;} #sub43 .s1 .txtArea {} #sub43 .s1 .lstArea {} #sub43 .s2 {} #sub43 .s2 .inner {max-width: var(--innerMo); flex-direction: column; margin: 0 auto; padding: 12rem 0; gap: 3rem;} #sub43 .s2 .txtArea {} #sub43 .s2 .txtArea .ico {width: 2.8rem;} #sub43 .s2 .txtArea .subt {font-size: 2rem; padding: 1.2rem 0;} #sub43 .s2 .txtArea .tit {font-size: 2.8rem; margin-bottom: 1.8rem} #sub43 .s2 .txtArea .nav {gap: 1rem; margin-top: 0.4rem;} #sub43 .s2 .txtArea .nav .mutPrev, #sub43 .s2 .txtArea .nav .mutNext {width: 3.2rem; height: 3.2rem;} #sub43 .s2 .mutSwiper {} #sub43 .s2 .mutSwiper .img {} #sub43 .s3 {} #sub43 .s3 .inner {max-width: var(--innerMo); padding: 0 0 10rem 0;} #sub43 .s3 .txtArea {margin-bottom: 0.8rem;} #sub43 .s3 .contArea {} #sub43 .s3 .contArea .imgArea {gap: 1rem;} #sub43 .s3 .contArea .imgArea .img {} #sub43 .s3 .contArea .txt {margin-top: 2.8rem;} #sub43 .s3 .contArea .txt .tit {font-size: 1.4rem; padding-bottom: 0.6rem;} #sub43 .s3 .contArea .txt .wrt {font-size: 1.2rem; line-height: 1.8rem;} } /********* sub44 **********/ #sub44 {overflow: hidden} #sub44 .s1 {max-width: 171.2rem; margin-left: auto} #sub44 .s1 .inner {padding: 20rem 0 23.6rem} #sub44 .s1 .txtArea {} #sub44 .s1 .imgArea {} #sub44 .s2 {} #sub44 .s2 .inner {gap: 2rem;} #sub44 .s2 .txtArea {} #sub44 .s2 .lstArea {} #sub44 .s3 {} #sub44 .s3 .inner {padding: 28rem 0; justify-content: space-between; max-width: 171.2rem; margin-left: auto;} #sub44 .s3 .txtArea {} #sub44 .s3 .txtArea .nav {gap: 2.5rem; margin-top: 0.8rem;} #sub44 .s3 .txtArea .nav .mutPrev, #sub44 .s3 .txtArea .nav .mutNext {width: 5.2rem; height: 5.2rem; left: auto; right: auto; margin: 0; position: relative;} #sub44 .s3 .txtArea .nav .mutPrev {background: url('../img/01/04_prev.png') center/contain no-repeat;} #sub44 .s3 .txtArea .nav .mutNext {background: url('../img/01/04_next.png') center/contain no-repeat;} #sub44 .s3 .txtArea .nav .mutPrev::after, #sub44 .s3 .txtArea .nav .mutNext::after {display: none} #sub44 .s3 .mutSwiper {max-width: 114.2rem; overflow: hidden; width: 100%;} #sub44 .s3 .mutSwiper .img {} #sub44 .s4 {} #sub44 .s4 .inner {padding-bottom: 20rem;} #sub44 .s4 .txtArea {margin-bottom: 4rem;} #sub44 .s4 .case2Swiper {} #sub44 .s4 .case2Swiper .arr {width: auto; left: 97.5%; z-index: 99;} #sub44 .s4 .prg {background: #EEF0F3; padding: 2.2rem 0; max-width: 119.6rem; margin: 0 auto; margin-top: 6rem; } #sub44 .s4 .prg .tit {padding-bottom: 1rem;} #sub44 .s4 .prg .wrt {line-height: 2.2rem;} @media all and (max-width: 880px){ #sub44 {} #sub44 .s1 {margin: 0 auto} #sub44 .s1 .inner {max-width: var(--innerMo); padding: 10rem 0; margin: 0 auto; flex-direction: column; gap: 4rem;} #sub44 .s1 .txtArea {} #sub44 .s1 .imgArea {} #sub44 .s2 {} #sub44 .s2 .inner {max-width: var(--innerMo); gap: 1rem;} #sub44 .s2 .txtArea {} #sub44 .s2 .lstArea {} #sub44 .s3 {} #sub44 .s3 .inner {max-width: var(--innerMo); flex-direction: column; margin: 0 auto; padding: 12rem 0; gap: 3rem;} #sub44 .s3 .txtArea {} #sub44 .s3 .txtArea .nav {gap: 1rem; margin-top: 0.4rem;} #sub44 .s3 .txtArea .nav .mutPrev, #sub44 .s3 .txtArea .nav .mutNext {width: 3.2rem; height: 3.2rem;} #sub44 .s3 .case2Swiper {} #sub44 .s3 .case2Swiper .img {} #sub44 .s4 {} #sub44 .s4 .inner {max-width: var(--innerMo); padding-bottom: 10rem; margin: 0 auto} #sub44 .s4 .txtArea {margin-bottom: 2rem;} #sub44 .s4 .case2Swiper {} #sub44 .s4 .case2Swiper .arr {width: 3.2rem; left: 95%;} #sub44 .s4 .prg {margin-top: 2.8rem;} #sub44 .s4 .prg .tit {font-size: 1.4rem; padding-bottom: 0.6rem;} #sub44 .s4 .prg .wrt {font-size: 1.2rem; line-height: 1.8rem;} } /********* sub51 **********/ #sub51 {overflow: hidden;} #sub51 .s1 {max-width: 171.2rem; margin-left: auto} #sub51 .s1 .inner {padding: 20rem 0;} #sub51 .s1 .leftArea {} #sub51 .s1 .txtArea {margin-bottom: 3rem;} #sub51 .s1 .lstArea {max-width: 61.8rem;} #sub51 .s1 .lstArea .lst {gap: 3rem;} #sub51 .s1 .lstArea .lst + .lst {padding-top: 3rem; margin-top: 3rem; border-top: 1px solid #C9CDD2;} #sub51 .s1 .lstArea .lst .ico {} #sub51 .s1 .lstArea .lst .txt {} #sub51 .s1 .lstArea .lst .ltit {padding-bottom: 1.2rem;} #sub51 .s1 .lstArea .lst .lwrt {line-height: 2.8rem;} #sub51 .s1 .rightArea {} #sub51 .s1 .rightArea .img {} #sub51 .s2 {} #sub51 .s2 .inner {} #sub51 .s2 .txtArea {margin-bottom: 4rem;} #sub51 .s2 .lstArea {gap: 5rem 4rem;} #sub51 .s2 .lstArea .lst {width: 62rem; height: 19.2rem; gap: 5.5rem; background: #F5F5F5; padding-left: 2.8rem;} #sub51 .s2 .lstArea .lst .ico {} #sub51 .s2 .lstArea .lst .txt {} #sub51 .s2 .lstArea .lst .ltit {padding-bottom: 1.9rem; line-height: 3rem;} #sub51 .s2 .lstArea .lst .lwrt {line-height: 2.8rem;} #sub51 .s2 .lstArea .lst .num {right: 5rem;} #sub51 .s3 {} #sub51 .s3 .inner {padding-top: 20rem;} #sub51 .s3 .txtArea {margin-bottom: 4rem;} #sub51 .s3 .lstArea {} #sub51 .s3 .lstArea .lst {} #sub51 .s3 .lstArea .lst + .lst {margin-top: 8rem;} #sub51 .s3 .lstArea .lst:nth-child(2n) {flex-direction: row-reverse;} #sub51 .s3 .lstArea .lst .img {width: 50%} #sub51 .s3 .lstArea .lst .img img {max-width: 57rem;} #sub51 .s3 .lstArea .lst .txt {width: 50%} #sub51 .s3 .lstArea .lst .txt .ltit {padding-bottom: 3.2rem;} #sub51 .s3 .lstArea .lst .txt .lwrt {line-height: 2.8rem;} #sub51 .s4 {} #sub51 .s4 .inner {gap: 2rem; padding: 20rem 0;} #sub51 .s4 .txtArea {} #sub51 .s4 .lstArea {} @media all and (max-width: 880px){ #sub51 {} #sub51 .s1 {} #sub51 .s1 .inner {max-width: var(--innerMo); flex-direction: column; gap: 4rem; padding: 10rem 0; align-items: baseline;} #sub51 .s1 .leftArea {} #sub51 .s1 .txtArea {} #sub51 .s1 .lstArea {} #sub51 .s1 .lstArea .lst {gap: 1.8rem;} #sub51 .s1 .lstArea .lst + .lst {padding-top: 2rem; margin-top: 2rem;} #sub51 .s1 .lstArea .lst .ico {width: 7.2rem;} #sub51 .s1 .lstArea .lst .txt {} #sub51 .s1 .lstArea .lst .ltit {font-size: 1.6rem; padding-bottom: 0.8rem;} #sub51 .s1 .lstArea .lst .lwrt {font-size: 1.4rem; line-height: 2.2rem;} #sub51 .s1 .rightArea {} #sub51 .s1 .rightArea .img {} #sub51 .s2 {} #sub51 .s2 .inner {max-width: var(--innerMo);} #sub51 .s2 .txtArea {margin-bottom: 2rem;} #sub51 .s2 .lstArea {gap: 1rem;} #sub51 .s2 .lstArea .lst {width: 100%; flex-direction: column; gap: 2rem; height: auto; padding: 2rem; align-items: baseline;} #sub51 .s2 .lstArea .lst .ico {width: 8rem;} #sub51 .s2 .lstArea .lst .txt {} #sub51 .s2 .lstArea .lst .ltit {font-size: 1.8rem; line-height: 2.8rem; padding-bottom: 0.8rem;} #sub51 .s2 .lstArea .lst .lwrt {font-size: 1.4rem; line-height: 2.2rem;} #sub51 .s2 .lstArea .lst .num {max-width: 4em; right: 2rem; top: 2rem; transform: none;} #sub51 .s3 {} #sub51 .s3 .inner {max-width: var(--innerMo); padding-top: 10rem;} #sub51 .s3 .txtArea {margin-bottom: 2rem;} #sub51 .s3 .lstArea {} #sub51 .s3 .lstArea .lst {flex-direction: column; gap: 2.2rem;} #sub51 .s3 .lstArea .lst + .lst {margin-top: 4rem;} #sub51 .s3 .lstArea .lst:nth-child(2n) {flex-direction: column;} #sub51 .s3 .lstArea .lst .img {width: 100%} #sub51 .s3 .lstArea .lst .img img {} #sub51 .s3 .lstArea .lst .txt {width: 100%} #sub51 .s3 .lstArea .lst .txt .ltit {font-size: 2.4rem; padding-bottom: 1.2rem;} #sub51 .s3 .lstArea .lst .txt .lwrt {font-size: 1.4rem; line-height: 2.2rem;} #sub51 .s4 {} #sub51 .s4 .inner {max-width: var(--innerMo); gap: 1rem; padding: 10rem 0} #sub51 .s4 .txtArea {} #sub51 .s4 .lstArea {} } /********* sub62 **********/ #sub62 {overflow: hidden;} #sub62 .s1 {} #sub62 .s1 .inner {padding: 20rem 0 25rem; gap: 4rem;} #sub62 .s1 .txtArea {} #sub62 .s1 .imgArea {} #sub62 .s2 {} #sub62 .s2 .inner {padding: 0 0 32rem; justify-content: space-between; max-width: 171.2rem; margin-left: auto;} #sub62 .s2 .txtArea {} #sub62 .s2 .txtArea .ico {} #sub62 .s2 .txtArea .subt {padding: 2rem 0;} #sub62 .s2 .txtArea .tit {margin-bottom: 2.8rem;} #sub62 .s2 .txtArea .nav {gap: 2.5rem; margin-top: 0.8rem;} #sub62 .s2 .txtArea .nav .mutPrev, #sub62 .s2 .txtArea .nav .mutNext {width: 5.2rem; height: 5.2rem; left: auto; right: auto; margin: 0; position: relative;} #sub62 .s2 .txtArea .nav .mutPrev {background: url('../img/01/04_prev.png') center/contain no-repeat;} #sub62 .s2 .txtArea .nav .mutNext {background: url('../img/01/04_next.png') center/contain no-repeat;} #sub62 .s2 .txtArea .nav .mutPrev::after, #sub62 .s2 .txtArea .nav .mutNext::after {display: none} #sub62 .s2 .mutsSwiper {max-width: 114.2rem; overflow: hidden; width: 100%;} #sub62 .s2 .mutsSwiper .img {} #sub62 .s3 {} #sub62 .s3 .inner {gap: 2rem; padding: 0 0 20rem;} #sub62 .s3 .txtArea {} #sub62 .s3 .lstArea {} @media all and (max-width: 880px){ #sub62 {} #sub62 .s1 {} #sub62 .s1 .inner {padding: 10rem 0; max-width: var(--innerMo); gap: 2.8rem;} #sub62 .s1 .txtArea {} #sub62 .s1 .imgArea {} #sub62 .s2 {} #sub62 .s2 .inner {max-width: var(--innerMo); flex-direction: column; margin: 0 auto; padding: 0 0 12rem; gap: 3rem;} #sub62 .s2 .txtArea {} #sub62 .s2 .txtArea .ico {width: 2.8rem;} #sub62 .s2 .txtArea .subt {font-size: 2rem; padding: 1.2rem 0;} #sub62 .s2 .txtArea .tit {font-size: 2.8rem; margin-bottom: 1.8rem} #sub62 .s2 .txtArea .nav {gap: 1rem; margin-top: 0.4rem;} #sub62 .s2 .txtArea .nav .mutPrev, #sub62 .s2 .txtArea .nav .mutNext {width: 3.2rem; height: 3.2rem;} #sub62 .s2 .mutsSwiper {} #sub62 .s2 .mutsSwiper .img {} #sub62 .s3 {} #sub62 .s3 .inner {max-width: var(--innerMo); gap: 1rem; padding: 0 0 10rem} #sub62 .s3 .txtArea {} #sub62 .s3 .lstArea {} } /********* sub64 **********/ #sub64 {overflow: hidden;} #sub64 .s1 {} #sub64 .s1 .inner {padding: 20rem 0;} #sub64 .s1 .txtArea {} #sub64 .s1 .imgArea {} #sub64 .s2 {} #sub64 .s2 .inner {} #sub64 .s2 .txtArea {margin-bottom: 4rem;} #sub64 .s2 .lstArea {gap: 4.2rem; flex-wrap: wrap} #sub64 .s2 .lstArea .lst {width: calc((100% - 12.6rem) / 4);} #sub64 .s3 {} #sub64 .s3 .inner {padding: 26rem 0 20rem; gap: 2rem} #sub64 .s3 .txtArea {} #sub64 .s3 .lstArea {} @media all and (max-width: 880px){ #sub64 {} #sub64 .s1 {} #sub64 .s1 .inner {padding: 10rem 0; max-width: var(--innerMo);} #sub64 .s1 .txtArea {} #sub64 .s1 .imgArea {} #sub64 .s2 {} #sub64 .s2 .inner { max-width: var(--innerMo);} #sub64 .s2 .txtArea {margin-bottom: 2rem;} #sub64 .s2 .lstArea {gap: 1.4rem;} #sub64 .s2 .lstArea .lst {width: calc((100% - 1.4rem) / 2);} #sub64 .s3 {} #sub64 .s3 .inner {padding: 13rem 0 10rem; max-width: var(--innerMo); gap: 1rem} #sub64 .s3 .txtArea {} #sub64 .s3 .lstArea {} } /********* sub65 **********/ #sub65 {overflow: hidden;} #sub65 .s1 {} #sub65 .s1 .inner {padding: 20rem 0;} #sub65 .s1 .txtArea {margin-bottom: 4rem;} #sub65 .s1 .imgArea {} #sub65 .s2 {} #sub65 .s2 .inner {} #sub65 .s2 .txtArea {margin-bottom: 4rem;} #sub65 .s2 .lstArea {gap: 5rem 4rem;} #sub65 .s2 .lstArea .lst {width: 62rem; height: 19.2rem; gap: 5.5rem; background: #F5F5F5; padding-left: 2.8rem;} #sub65 .s2 .lstArea .lst .ico {} #sub65 .s2 .lstArea .lst .txt {} #sub65 .s2 .lstArea .lst .ltit {padding-bottom: 1.9rem; line-height: 3rem;} #sub65 .s2 .lstArea .lst .lwrt {line-height: 2.8rem;} #sub65 .s2 .lstArea .lst .num {right: 5rem;} #sub65 .s3 {} #sub65 .s3 .inner {padding-top: 20rem} #sub65 .s3 .txtArea {margin-bottom: 4rem;} #sub65 .s3 .lstArea {gap: 5rem 4rem;} #sub65 .s3 .lstArea .lst {width: 62rem; height: 19.2rem; gap: 5.5rem; background: #F5F5F5; padding-left: 2.8rem;} #sub65 .s3 .lstArea .lst .ico {} #sub65 .s3 .lstArea .lst .txt {} #sub65 .s3 .lstArea .lst .ltit {padding-bottom: 1.9rem; line-height: 3rem;} #sub65 .s3 .lstArea .lst .lwrt {line-height: 2.8rem;} #sub65 .s3 .lstArea .lst .num {right: 5rem;} #sub65 .s3 .imgArea {gap: 2.6rem; margin-top: 10rem;} #sub65 .s3 .imgArea .img {} #sub65 .s4 {} #sub65 .s4 .inner {padding: 26rem 0 20rem; gap: 2rem} #sub65 .s4 .txtArea {} #sub65 .s4 .lstArea {} @media all and (max-width: 880px){ #sub65 {} #sub65 .s1 {} #sub65 .s1 .inner {padding: 10rem 0; max-width: var(--innerMo);} #sub65 .s1 .txtArea {} #sub65 .s1 .imgArea {} #sub65 .s2 {} #sub65 .s2 .inner {max-width: var(--innerMo);} #sub65 .s2 .txtArea {margin-bottom: 2rem;} #sub65 .s2 .lstArea {gap: 1rem;} #sub65 .s2 .lstArea .lst {width: 100%; flex-direction: column; gap: 2rem; height: auto; padding: 2rem; align-items: baseline;} #sub65 .s2 .lstArea .lst .ico {width: 8rem;} #sub65 .s2 .lstArea .lst .txt {} #sub65 .s2 .lstArea .lst .ltit {font-size: 1.8rem; line-height: 2.8rem; padding-bottom: 0.8rem;} #sub65 .s2 .lstArea .lst .lwrt {font-size: 1.4rem; line-height: 2.2rem;} #sub65 .s2 .lstArea .lst .num {max-width: 4em; right: 2rem; top: 2rem; transform: none;} #sub65 .s3 {} #sub65 .s3 .inner {max-width: var(--innerMo); padding-top: 10rem;} #sub65 .s3 .txtArea {margin-bottom: 2rem;} #sub65 .s3 .lstArea {gap: 1rem;} #sub65 .s3 .lstArea .lst {width: 100%; flex-direction: column; gap: 2rem; height: auto; padding: 2rem; align-items: baseline;} #sub65 .s3 .lstArea .lst .ico {width: 8rem;} #sub65 .s3 .lstArea .lst .txt {} #sub65 .s3 .lstArea .lst .ltit {font-size: 1.8rem; line-height: 2.8rem; padding-bottom: 0.8rem;} #sub65 .s3 .lstArea .lst .lwrt {font-size: 1.4rem; line-height: 2.2rem;} #sub65 .s3 .lstArea .lst .num {max-width: 4em; right: 2rem; top: 2rem; transform: none;} #sub65 .s3 .imgArea {margin-top: 2rem; gap: 0.8rem;} #sub65 .s3 .imgArea .img {} #sub65 .s4 {} #sub65 .s4 .inner {padding: 13rem 0 10rem; max-width: var(--innerMo); gap: 1rem} #sub65 .s4 .txtArea {} #sub65 .s4 .lstArea {} } ..