#s1 {}
#s1 .main_visual {overflow: hidden;}
#s1 .main_visual .swiper_bg {height: 100vh}
#s1 .main_visual .swiper_bg .inner {position: absolute; width: 100%; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff}
#s1 .main_visual .swiper_bg .sub_tit {font-size: 18px; letter-spacing: 4px;}
#s1 .main_visual .swiper_bg .tit {font-size: 50px; padding: 6px 0 20px;}
#s1 .main_visual .swiper_bg .text {font-size: 20px; display: block;}
#s1 .main_visual .swiper_bg .bg_text {opacity: 0.3; font-size: 80px; transform: rotate(-20deg); display: inline-block; position: absolute;}
#s1 .main_visual .swiper-slide:nth-child(1) .swiper_bg {background: url('../img/main_visual_1.jpg') center; background-size: cover;}
#s1 .main_visual .swiper-slide:nth-child(2) .swiper_bg {background: url('../img/main_visual_2.jpg') center; background-size: cover;}
#s1 .main_visual .swiper-slide:nth-child(3) .swiper_bg {background: url('../img/main_visual_3.jpg') center; background-size: cover;}
#s1 .main_visual .swiper-slide:nth-child(1) .swiper_bg .bg_text {top: 33%; left: 22%;}
#s1 .main_visual .swiper-slide:nth-child(2) .swiper_bg .bg_text {top: 26%; left: 18%;}
#s1 .main_visual .swiper-slide:nth-child(3) .swiper_bg .bg_text {top: 30%; left: 22%;}
#s1 .main_visual .swiper-pagination {max-width: 1320px; top: 62%; bottom: auto; left: 50%; transform: translateX(-50%); text-align: left;}
#s1 .main_visual .swiper-pagination-bullet {margin: 0 5px 0 0 !important; width: 100px; height: 3px; background: transparent; opacity: 1;}
#s1 .main_visual .swiper-pagination-bullet .timeline {background: rgba(255,255,255,0.3);  width: 100px; height: 3px;}
#s1 .main_visual .swiper-pagination-bullet-active .bar {display: block; width: 0; height: 3px; background-color: #ffffff; animation: timeline 3.2s linear infinite;}
#s1 .main_visual .swiper_play {position: absolute; z-index: 10; width: 100%; max-width: 1320px; left: 50%; top: 62.5%; transform: translateX(-50%); margin-left: 340px; box-sizing: border-box; cursor: pointer;}
#s1 .main_visual .swiper_play.swiper-start {display: none}
#s1 .main_visual .swiper_play.swiper-stop {}

.main_title {text-align: center; margin-bottom: 80px}
.main_title .sub_tit {font-size: 18px; letter-spacing: 3px; color: #363636;}
.main_title .tit {font-size: 40px; padding: 6px 0 20px; color: #333;}
.main_title .text {font-size: 18px; color: #666; line-height: 1.7;}

@keyframes timeline{
    0%{ width: 0%; }
    100%{ width: 100%;}
}


#s2 {padding: 150px 0}
#s2 .main_cont {justify-content: space-between;}
#s2 .cont1 {width: 64.85%; flex-direction: column;}
#s2 .cont2 {width: 32.2%; }
#s2 .box_img img {transition: 0.3s}
#s2 .box_img:hover img {-webkit-transform:scale(1.08); -moz-transform:scale(1.08); -ms-transform:scale(1.08); -o-transform:scale(1.08); transform: scale(1.08);}
#s2 .box_txt {padding-top: 30px}
#s2 .box_txt .sub_tit {color: #FF616B; font-size: 16px; letter-spacing: 0.3px; display: block;}
#s2 .box_txt .tit {font-weight: bold; font-size: 25px; color: #212121; padding: 2px 0 7px;}
#s2 .box_txt .text {font-size: 16px; color: #939393; font-weight: 400;}
#s2 .box_list {cursor: pointer;}
#s2 .box2 {align-items: end; justify-content: space-between; margin-top: -70px;}
#s2 .box2 .box_list:nth-child(1) {width: 51%;}
#s2 .box2 .box_list:nth-child(2) {width: 45.8%}
#s2 .box3 .box_list {position: relative;}
#s2 .box3 .box_txt {position: absolute; top: 20%; text-align: center; left: 50%; transform: translateX(-50%); z-index: 1; width: 100%;}
#s2 .box3 .box_txt .sub_tit {color: #666666; transition: 0.1s}
#s2 .box3 .box_txt .tit {line-height: 1; padding: 10px 0 23px;}
#s2 .box3 .box_txt .text {color: #212121; line-height: 1.7;}
#s2 .box3 .box_txt .tit span {letter-spacing: 11px; display: block; margin-right: -13px;}
#s2 .box3 .box_txt:hover + .box_img img {-webkit-transform:scale(1.08); -moz-transform:scale(1.08); -ms-transform:scale(1.08); -o-transform:scale(1.08); transform: scale(1.08);}
#s2 .box3 .box_plus {position: relative; width: 30px; height: 30px; display: inline-block; margin: 0 auto; transition: 0.5s; margin-top: 60px;}
#s2 .box3 .box_plus::before {content: ''; display: block; position: absolute; width: 100%; height: 1px; background: #000; top: 50%; transform: translateY(-50%);}
#s2 .box3 .box_plus::after {content: ''; display: block; position: absolute; width: 1px; height: 100%; background: #000; left: 50%; transform: translateX(-50%);}
#s2 .box3:hover .box_txt .sub_tit {color: #FF616B}
#s2 .box3:hover .box_plus {transform: rotate(180deg);}
#s2 .box3:hover .box_plus::before {background: #FF616B}
#s2 .box3:hover .box_plus::after {background: #FF616B}

#s3 {background: url('../img/main_banner.jpg') center; background-size: cover;}
#s3 .inner {color: #fff; font-size: 35px; padding: 155px 0 150px; text-shadow: 0 0 8px rgba(132,23,45,0.18)}

#s4 {padding: 150px 0; background: url('../img/main_story_bg.jpg') center; background-size: cover;}
#s4 .story_swiper {overflow: hidden;  padding-bottom: 60px;}
#s4 .story_swiper .swiper-wrapper {align-items: end; transition-duration: 1s !important}
#s4 .story_swiper .swiper-slide > div  {width: 82%; margin: 0 auto;}
#s4 .story_swiper .swiper-slide > div a {display: block; overflow: hidden;}
#s4 .story_swiper .swiper-slide > div a img {margin-top: -1px;}
#s4 .story_swiper .swiper-slide-active > div {width: 100%; margin: 0 auto;}
#s4 .story_swiper .swiper-pagination-bullet {width: 72px; height: 1px; background: #b7b7b7; margin: 0 !important; opacity: 1; border-radius: 0}
#s4 .story_swiper .swiper-pagination-bullet-active {height: 3px; background: #FF616B; margin-bottom: -1px !important}


@media all and (max-width: 1320px){
    #s3 {background: url('../img/main_banner_mo.png') center; background-size: cover;}
    #s3 .inner {font-size: 37px; text-align: center; padding: 115px 0 190px;}
}


@media all and (max-width: 768px){
    #s1 .main_visual .swiper_bg {height: 100vh;}
    #s1 .main_visual .swiper_bg .inner {top: 45%}
    #s1 .main_visual .swiper-slide:nth-child(1) .swiper_bg {background: url('../img/main_visual_1_mo.jpg') center; background-size: cover;}
    #s1 .main_visual .swiper-slide:nth-child(2) .swiper_bg {background: url('../img/main_visual_2_mo.jpg') center; background-size: cover;}
    #s1 .main_visual .swiper-slide:nth-child(3) .swiper_bg {background: url('../img/main_visual_3_mo.jpg') center; background-size: cover;}
    #s1 .main_visual .swiper_bg .sub_tit {font-size: 23px;}
    #s1 .main_visual .swiper_bg .text {font-size: 24px}
    #s1 .main_visual .swiper-slide:nth-child(1) .swiper_bg .bg_text {left: 44%;}
    #s1 .main_visual .swiper-slide:nth-child(2) .swiper_bg .bg_text {left: 30%;}
    #s1 .main_visual .swiper-slide:nth-child(3) .swiper_bg .inner {color: #fff}
    #s1 .main_visual .swiper-slide:nth-child(3) .swiper_bg .sub_tit {text-shadow: 0 0 5px rgb(0 0 0 / 30%);}
    #s1 .main_visual .swiper-slide:nth-child(3) .swiper_bg .tit {text-shadow: 0 0 5px rgb(0 0 0 / 30%);}
    #s1 .main_visual .swiper-slide:nth-child(3) .swiper_bg .text {text-shadow: 0 0 5px rgb(0 0 0 / 30%);}
    #s1 .main_visual .swiper-slide:nth-child(3) .swiper_bg .bg_text {left: 31%}
    #s1 .main_visual .swiper-pagination {max-width: 88%; top: 66%;}
    #s1 .main_visual .swiper-pagination-bullet {height: 5px;}
    #s1 .main_visual .swiper_play {max-width: 88%; top: 66.5%;}

    #s2 {padding: 100px 0}
    #s2 .cont1 {width: 61.85%;}
    #s2 .cont2 {width: 35.2%;}
    #s2 .box_txt {padding-top: 15px;}
    #s2 .box_txt .sub_tit {font-size: 14px;}
    #s2 .box_txt .tit {font-size: 20px; padding: 0}
    #s2 .box_txt .text {font-size: 12px;}
    #s2 .box2 {margin-top: -40px}
    #s2 .box3 .box_txt {padding: 15px 10px 0; box-sizing: border-box;}
    #s2 .box3 .box_txt .text {line-height: 1.2}

    #s3 .inner {font-size: 30px; text-align: center; padding: 115px 0 190px;}

    #s4 {padding: 100px 0}
    #s4 .story_swiper .swiper-slide > div  {width: 100%; margin: 0 auto;}
    #s4 .story_swiper .swiper-pagination-bullet {width: 52px;}
}

@media all and (max-width: 480px){
    #s1 .main_visual .swiper_bg {height: 70vh}
    #s1 .main_visual .swiper_bg .sub_tit {letter-spacing: 2px; font-size: 11px}
    #s1 .main_visual .swiper_bg .tit {font-size: 25px; padding: 6px 0 20px;}
    #s1 .main_visual .swiper_bg .text {font-size: 11px}
    #s1 .main_visual .swiper_bg .bg_text {font-size: 43px}
    #s1 .main_visual .swiper-slide:nth-child(1) .swiper_bg .bg_text {left: 44%; top: 42%;}
    #s1 .main_visual .swiper-slide:nth-child(2) .swiper_bg .bg_text {left: 32%; top: 36%;}
    #s1 .main_visual .swiper-slide:nth-child(3) .swiper_bg .bg_text {left: 32%; top: 37%;}
    #s1 .main_visual .swiper-pagination {top: 62%;}
    #s1 .main_visual .swiper-pagination-bullet {width: 50px; height: 2px;}
    #s1 .main_visual .swiper-pagination-bullet .timeline {width: 50px; height: 2px;}
    #s1 .main_visual .swiper-pagination-bullet-active .bar {height: 2px;}
    #s1 .main_visual .swiper_play {top: 63.2%; margin-left: 190px;}
    #s1 .main_visual .swiper_play img {width: 10px}

    .main_title {margin-bottom: 40px}
    .main_title .sub_tit {letter-spacing: 1px; font-size: 11px;}
    .main_title .tit {font-size: 21px; padding: 3px 0 10px;}
    .main_title .text {font-size: 11px; line-height: 1.5}

    #s2 {padding: 40px 0}
    #s2 .main_cont {flex-direction: column;}
    #s2 .cont1 {width: 100%}
    #s2 .box2 {margin: 20px 0;}
    #s2 .cont2 {width: 100%}
    #s2 .box_list {border-radius: 20px; overflow: hidden; box-shadow: 0 6px 13px rgba(0,0,0,0.12) }
    #s2 .box_list .box_img {border-radius: 0}
    #s2 .box_txt {padding: 15px 10px;}
    #s2 .box_txt .sub_tit {font-size: 11px;}
    #s2 .box_txt .tit {font-size: 13px; padding: 3px 0 5px;}
    #s2 .box_txt .text {font-size: 10px; font-weight: 300;}

    #s2 .box2 .box_list:nth-child(1) {width: calc((100% - 10px) / 2);}
    #s2 .box2 .box_list:nth-child(2) {width: calc((100% - 10px) / 2);}
    #s2 .box3 .box_txt {top: auto; bottom: 0; left: 0; transform: none; text-align: left; padding: 10px;}
    #s2 .box3 .box_txt .tit {padding: 5px 0 8px; font-size: 18px;}
    #s2 .box3 .box_txt .tit span {letter-spacing: 7.5px;}
    #s2 .box3 .box_plus {width: 20px; height: 20px; margin-top: 20px;}

    #s3 .inner {font-size: 15px; padding: 70px 0 100px;}

    #s4 {padding: 40px 0}
    #s4 .story_swiper .swiper-pagination-bullet {width: 30px;}
}