/*――――――――――――――――
  메인
――――――――――――――――――*/
#main {overflow: hidden;}
#main .main_btn {width: 24rem; height: 5.8rem; border-radius: 10rem; background: #1E2124; gap: 0.4rem; padding-right: 0.6rem; transition: all 0.3s; border: 1px solid transparent;}
#main .main_btn p {width: 16rem; text-align: center; transition: all 0.3s;}
#main .main_btn:hover {background: #fff; border: 1px solid #ddd;}
#main .main_btn:hover p {color: #1E2124;}

@media screen and (max-width: 880px) {
    #main {}
    #main .main_btn {}
    #main .main_btn p {}
    #main .main_btn img {width: 4rem;}
}


#main .visual {height: 100vh; overflow: hidden;}
#main .visual .text_bx {z-index: 99;}
#main .visual .count {display: flex; align-items: center; justify-content: center; width: 21.5rem; height: 3.8rem; margin-bottom: 2.4rem; border-radius: 10rem; border: 1px solid rgba(255,255,255,0.5);}
#main .visual .tit {line-height: 9.2rem; margin-bottom: 2rem;}
#main .visual .txt {line-height: 3.6rem; margin-bottom: 3.6rem;}
#main .visual .slide_bx,
#main .visual .visual_slide {height: 100%;}
#main .visual .page {position: absolute; display: flex; justify-content: center; gap: 0.8rem; bottom: 16rem;}
#main .visual .swiper-slide img {width: 100%; height: 100%; object-fit: cover;}
#main .visual .swiper-pagination-bullet {width: 1rem; height: 1rem; background: none; opacity: 1; border: 1px solid #FFFFFF99;}
#main .visual .swiper-pagination-bullet-active {background: #FFFFFF99; border-radius: 2rem;}
#main .visual .scroll {bottom: 2.8rem; z-index: 1; animation: scrollBounce 2s ease-in-out infinite;}
#main .visual .scroll p {color: #FFFFFFCC; margin-top: 0.4rem;}

@keyframes scrollBounce {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(10px); /* 아래로 이동할 거리 */
  }
}

@media screen and (max-width: 880px) {
    #main .visual {height: 100vh;}
    #main .visual .text_bx {width: 100%;}
    #main .visual .count {width: 17.3rem; margin-bottom: 1.6rem; font-size: 1.4rem;}
    #main .visual .tit {font-size: 3.2rem; line-height: 4.4rem; margin-bottom: 1.2rem;}
    #main .visual .txt {font-size: 1.6rem; line-height: 2.2rem; margin-bottom: 4.8rem;}
    #main .visual .swiper-slide {height: 100%}
    #main .visual .swiper-slide img {width: 100%;}
    #main .visual .page {top: auto; bottom: 3.2rem; transform: translate3d(0,0,0);}
    #main .visual .swiper-pagination-bullet {width: 0.8rem; height: 0.8rem; margin: 0 0 1.2rem 0;}
    #main .visual .scroll {bottom: 14%; }
    #main .visual .scroll img {width: 3.2rem;}
}


#main .s1 {height: 89.8rem; background-color: #17191C; background-image: url('../img/main/s1_bg.png'); background-repeat: no-repeat; background-size: cover;}
#main .s1 .inner {gap: 9.6rem;}
#main .s1 .text_bx .tit {margin-bottom: 2rem;}
#main .s1 .text_bx .txt {line-height: 3.2rem; color: #EDEFF2;}
#main .s1 .list_bx {gap: 2.4rem;}
#main .s1 .list_bx li {width: 41.67rem;}
#main .s1 .list_bx li .txt {margin-bottom: 0.8rem; line-height: 3rem;}
#main .s1 .list_bx li .tit {line-height: 9.2rem;}

@media screen and (max-width: 880px) {
    #main .s1 {height: 81.2rem; background-image: url('../img/main/s1_bg_mo.png');}
    #main .s1 .inner {gap: 5.2rem;}
    #main .s1 .text_bx .tit {font-size: 3.6rem; margin-bottom: 1.2rem;}
    #main .s1 .text_bx .txt {font-size: 1.6rem; line-height: 2.4rem;}
    #main .s1 .list_bx {flex-direction: column; align-items: center;}
    #main .s1 .list_bx li {width: 100%;}
    #main .s1 .list_bx li .txt {font-size: 1.5rem; line-height: 2.4rem;}
    #main .s1 .list_bx li .tit {font-size: 4.8rem; line-height: 6.4rem;}
}


#main .s2 {padding: 14rem 0;}
#main .s2 .title_bx {margin-bottom: 6rem;}
#main .s2 .title_bx .tit {margin-bottom: 2rem;}
#main .s2 .slide_bx .swiper-slide {width: 38.4rem !important; margin-right: 2rem;}
#main .s2 .slide_bx .img_bx {margin-bottom: 2.4rem;}
#main .s2 .slide_bx .text_bx .tit {margin-bottom: 0.8rem;}

@media screen and (max-width: 880px) {
    #main .s2 {padding: 6rem 0;}
    #main .s2 .title_bx {margin-bottom: 3.2rem;}
    #main .s2 .title_bx .tit {font-size: 2.8rem; margin-bottom: 1.2rem;}
    #main .s2 .slide_bx {width: 26.6rem; margin: 0 auto;}
    #main .s2 .slide_bx .swiper-slide {width: 26.6rem !important; margin-right: 1.6rem;}
    #main .s2 .slide_bx .swiper-slide img {width: 100%;}
    #main .s2 .slide_bx .img_bx {margin-bottom: 1.6rem;}
    #main .s2 .slide_bx .text_bx .tit {font-size: 1.7rem; margin-bottom: 0.6rem;}
    #main .s2 .slide_bx .text_bx .txt {font-size: 1.4rem;}
}


#main .s3 .cont_bx {background: #17191C;}
#main .s3 .cont_bx .img_bx {width: 50%;}
#main .s3 .cont_bx .img_bx img {object-fit: cover; width: 100%;}
#main .s3 .cont_bx .text_bx {padding-left: 20rem; width: 50%;}
#main .s3 .cont_bx .text_bx .txt {margin-bottom: 1.6rem;}
#main .s3 .cont_bx .text_bx .tit {margin-bottom: 1.6rem;}
#main .s3 .cont_bx .text_bx .txt2 {line-height: 3.2rem; margin-bottom: 4.4rem;}

@media screen and (max-width: 880px) {
    #main .s3 .cont_bx {flex-direction: column;}
    #main .s3 .cont_bx:nth-child(2n-1) {flex-direction: column-reverse;}
    #main .s3 .cont_bx .img_bx {width: 100%;}
    #main .s3 .cont_bx .img_bx img {width: 100%;}
    #main .s3 .cont_bx .text_bx {width: 100%; padding: 6rem 2rem;}
    #main .s3 .cont_bx .text_bx .txt {font-size: 1.5rem; margin-bottom: 1.2rem;}
    #main .s3 .cont_bx .text_bx .tit {font-size: 2.8rem; margin-bottom: 1.2rem;}
    #main .s3 .cont_bx .text_bx .txt2 {font-size: 1.6rem; line-height: 2.4rem;}
    #main .s3 .cont_bx .text_bx a img {width: 4.8rem;}
}


#main .s4 {padding: 14rem;}
#main .s4 .title_bx {margin-bottom: 6rem;}
#main .s4 .title_bx .tit {margin-bottom: 2rem;}
#main .s4 .title_bx .txt {margin-bottom: 3.6rem;}
#main .s4 .title_bx .s4_btn {display: block; width: 24rem;}
#main .s4 .title_bx .s4_btn img {width: 100%;}
#main .s4 .slide_bx {width: 156rem; margin: 0 auto;}
#main .s4 .swiper-slide {width: 156rem !important;}
#main .s4 .page {bottom: 4.8rem; left: 50%; transform: translateX(-50%);}
#main .s4 .swiper-pagination-bullet {width: 1rem; height: 1rem; background: none; opacity: 1; border: 1px solid rgba(255, 255, 255, 0.8); margin: 0 1.6rem 0 0;}
#main .s4 .swiper-pagination-bullet:last-child {margin-right: 0;}
#main .s4 .swiper-pagination-bullet-active {width: 6rem; background: rgba(255,255,255,0.8); border-radius: 2rem;}
#main .s4 .btn {margin-top: 0; width: 4.8rem; height: 4.8rem; color: transparent;}
#main .s4 .btn.prev {left: 6rem;}
#main .s4 .btn.prev::after {display: none;}
#main .s4 .btn.next {right: 6rem; left: auto;}
#main .s4 .btn.next::after {display: none;}

@media screen and (max-width: 880px) {
    #main .s4 {padding: 6rem 0;}
    #main .s4 .title_bx {margin-bottom: 3.2rem;}
    #main .s4 .title_bx .tit {font-size: 2.6rem; margin-bottom: 1.2rem;}
    #main .s4 .title_bx .txt {font-size: 1.6rem; margin-bottom: 3.2rem;}
    #main .s4 .slide_bx {width: calc(100% - 4rem); overflow: hidden;}
    #main .s4 .swiper-slide {width: 100% !important; margin-right: 0;}
    #main .s4 .swiper-slide img {width: 100%;}
    #main .s4 .page {bottom: 1.2rem;}
    #main .s4 .swiper-pagination-bullet {width: 0.6rem; height: 0.6rem; margin-right: 0.4rem;}
    #main .s4 .swiper-pagination-bullet-active {width: 3.6rem;}
    #main .s4 .btn {width: 3.2rem; height: 3.2rem; top: 50%; transform: translateY(-50%);}
    #main .s4 .btn img {width: 100%;}
    #main .s4 .btn.prev {left: 2rem;}
    #main .s4 .btn.next {right: 2rem;}
}


#main .s5 {padding: 14rem 0; background: #17191C;}
#main .s5 .title_bx {margin-bottom: 6rem;}
#main .s5 .title_bx .tit {margin-bottom: 2rem;}
#main .s5 .swiper-wrapper {transition-timing-function: linear !important;}
#main .s5 .swiper-slide {width: 40rem !important; margin-right: 4rem; padding: 3.6rem 2.4rem; background: linear-gradient(180deg, rgba(153, 153, 153, 0.08) 0%, rgba(255, 255, 255, 0.08) 100%); box-shadow: 2.4rem 2.4rem 5.8rem 0px #143F8E0F;}
#main .s5 .user_info {margin-bottom: 1.7rem; gap: 2.2rem;}
#main .s5 .pro_bx {gap: 1.1rem;}
#main .s5 .pro_bx .img_bx {border-radius: 50%; width: 3.8rem; height: 3.8rem; overflow: hidden;}
#main .s5 .pro_bx .img_bx img {width: 100%; display: block;}
#main .s5 .pro_bx .name::before {content: ''; position: absolute; top: 50%; right: -1.1rem; transform: translateY(-50%); width: 1px; height: 1rem; background: #CDD0D4;}
#main .s5 .swiper-slide .txt {line-height: 2.6rem;}

@media screen and (max-width: 880px) {
    #main .s5 {padding: 6rem 0 4.4rem 0;}
    #main .s5 .title_bx {margin-bottom: 3.2rem;}
    #main .s5 .title_bx .tit {font-size: 2.8rem; margin-bottom: 1.2rem;}
    #main .s5 .title_bx .txt {font-size: 1.6rem; line-height: 2.4rem;}
    #main .s5 .slide_bx {width: 26rem; margin: 0 auto;}
    #main .s5 .swiper-slide {width: 34rem !important; padding: 3.6rem 1.8rem;}
    #main .s5 .user_info {margin-bottom: 1.6rem;}
    #main .s5 .user_info .tit {font-size: 1.6rem;}
    #main .s5 .pro_bx .name {font-size: 1.6rem;}
    #main .s5 .swiper-slide .txt {font-size: 1.5rem; line-height: 2.4rem;}
}

#main .s6 {padding: 22.1rem 0; background-image: url('../img/main/s6_bg.png'); background-repeat: no-repeat; background-size: cover; background-position: center;}
#main .s6 .title_bx .tit {margin-bottom: 2rem; line-height: 8rem;}
#main .s6 .title_bx .txt {line-height: 3.2rem;}

@media screen and (max-width: 880px) {
    #main .s6 {padding: 6rem 0; background-image: url('../img/main/s6_bg_mo.png');}
    #main .s6 .title_bx .tit {font-size: 2.8rem; line-height: 3.8rem;}
    #main .s6 .title_bx .txt {font-size: 1.6rem; line-height: 2.4rem;}
}