#main {overflow: hidden;}

/* s1 */
#s1 {padding: 26.2rem 0 29.4rem 0; justify-content: flex-end; background: #F6F7F9;}
#s1::before {content: ''; position: absolute; top: 7.6rem; left: 51.2rem; width: 89.7rem; height: 64.2rem; background-image: url('../img/main/s1_bg.png'); background-repeat: no-repeat; background-size: 100%;}
#s1 .inner {width: calc(100% - 20.8rem);}
#s1 .inner .title img {margin: 4.7rem 0 11.2rem;}
#s1 .inner .title .txt {margin-top: 2.4rem; line-height: 3.2rem;}
#s1 .inner .swiper_wrap {width: 96rem; overflow: hidden;}
#s1 .inner .swiper_wrap img {width: 100%;}
#s1 .inner .swiper_wrap .slide_bg {width: 100%; height: 100%; background: rgba(0,0,0,0.7);}
#s1 .inner .swiper_wrap .slide_text {display: none; width: 100%; height: 100%; justify-content: flex-end; padding-bottom: 5.8rem;}
#s1 .inner .swiper_wrap .slide_text::before {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 33.1rem; background: linear-gradient(to top, #33383C, transparent);}
#s1 .inner .swiper_wrap .slide_text .fs18 {margin-top: 2rem; line-height: 2.8rem;}
#s1 .inner .swiper_wrap .swiper-slide-active .slide_bg {display: none;}
#s1 .inner .swiper_wrap .swiper-slide-active .slide_text {display: flex;}

@media screen and (max-width: 880px) {
    #s1 {padding: 12.2rem 0 8.8rem 0;}
    #s1::before {width: 25.2rem; height: 31.7rem; top: 12.2rem; left: auto; right: 0; background-image: url('../img/main/s1_bg_mo.png');}
    #s1 .inner {width: 100%;}
    #s1 .inner .title {width: calc(100% - 4.8rem); margin: 0 auto 7.1rem auto;}
    #s1 .inner .title img {width: 38.2rem; margin: 4.49rem 0 5.95rem 0;}
    #s1 .inner .title .co {font-size: 1.6rem;}
    #s1 .inner .title .tit {font-size: 2.4rem;}
    #s1 .inner .title .txt {font-size: 1.8rem; line-height: 2.8rem; margin-top: 2.1rem;}
    #s1 .inner .swiper_wrap .swiper-slide {width: 31.4rem !important; margin: 0 1rem;}
    #s1 .inner .swiper_wrap .swiper-slide-active .slide_text {display: none;}
}

/* s2 */
#s2 {padding: 19rem 0 14.7rem 0;}
#s2 .inner {width: 150.4rem;}
#s2 .inner .title {margin-bottom: 7.2rem;}
#s2 .inner .title .fs28 {margin: 3.2rem 0 1.2rem 0;}
#s2 .inner .list {gap: 3.2rem;}
#s2 .inner .list li {position: relative; width: 48rem; height: 70.8rem;}
#s2 .inner .list li a {display: block; width: 100%; height: 100%;}
#s2 .inner .list li a .text_area {z-index: 2; transition: all 0.3s;}
#s2 .inner .list li a .text_area .fs48 {margin-bottom: 0.2rem; transition: all 0.3s;}
#s2 .inner .list li a .img_area .off {opacity: 1; transition: all 0.3s}
#s2 .inner .list li a .img_area .on {opacity: 0; transition: all 0.3s}
#s2 .inner .list li a .view_more {bottom: 7.9rem; gap: 1.6rem; z-index: 2;}
#s2 .inner .list li:hover a .text_area {transform: translateY(14.6rem);}
#s2 .inner .list li:hover a .text_area .fs48 {color: #1C87CA;}
#s2 .inner .list li:hover a .img_area .off {opacity: 0;}
#s2 .inner .list li:hover a .img_area .on {opacity: 1;}

@media screen and (max-width: 880px) {
    #s2 {padding: 9.6rem 0 10rem 0;}
    #s2 .inner {width: 100%;}
    #s2 .inner .title {margin-bottom: 6.1rem;}
    #s2 .inner .title img {width: 6.6rem;}
    #s2 .inner .title .fs28 {margin: 3.1rem 0 1.5rem 0; font-size: 2rem;}
    #s2 .inner .title .fs62 {font-size: 4.2rem; line-height: 5.2rem;}
    #s2 .inner .list {flex-wrap: wrap; gap: 0;}
    #s2 .inner .list li {width: 100%; height: 24.5rem;}
    #s2 .inner .list li .img_area img {width: 100%;}
}