

/******** 타이틀 공통  **/
.title {}
.title .icon {width: 49px; padding-bottom: 10px; line-height: 1;}
.title .tit {font-size: 48px; font-weight: bold;}
.title .wrt {font-size: 16px; color: #666666; line-height: 26px;}
.sub_title .tit {font-weight: 500;}

@media all and (max-width: 768px){
    .title .wrt {font-size: 26px; line-height: 44px; padding-top: 25px;}
}

@media all and (max-width: 450px){
    .title .tit {font-size: 32px; text-align: center;}
    .title .wrt {font-size: 16px; color: #666666; line-height: 26px; padding: 15px;}
}

/******** 메인비쥬얼  **/
#mv {height: 110vh; position: relative;}
#mv .mv_swiper {overflow: hidden; height: 100%;}
#mv .mv_swiper .swiper-slide {height: 100%;}
#mv .mv_swiper .swiper-slide:nth-child(1) {background: url('../img/mv_6.jpg') no-repeat; background-size: cover;}
#mv .mv_swiper .swiper-slide:nth-child(2) {background: url('../img/mv_4.png') no-repeat; background-size: cover;}
#mv .mv_swiper .swiper-slide:nth-child(3) {background: url('../img/mv_7.jpg') no-repeat; background-size: cover;}
#mv .mv_swiper .box {height: 100vh;}
#mv .mv_swiper .txt {text-align: center; color: #fff; width: 100%; opacity: 0; transition: 1s; margin-top: 150px}
#mv .mv_swiper .txt .tit {font-size: 81px; font-weight: bold;}
#mv .mv_swiper .txt .tit2 {font-size: 81px; font-weight: normal;}
#mv .mv_swiper .txt .wrt {font-size: 20px; font-weight: 500; padding-top: 34px;}
#mv .mv_swiper .swiper-slide-active .txt {opacity: 1; margin-top: 50px;}

#mv .mv_arrow {width: 78px; height: 78px; z-index: 1; position: absolute; bottom: calc(110vh - 100vh + 5%); left: 50%; transform: translateX(-50%); transition: 0.2s; cursor: pointer;}
#mv .mv_arrow:hover {background: rgba(255,255,255,0.3);}
#mv .mv_arrow span {background: #fff; position: absolute;}
#mv .mv_arrow span:nth-child(2) {top: 0; left: 0; height: 1px; width: 0;}
#mv .mv_arrow span.on:nth-child(2) {width: 100%}
#mv .mv_arrow span:nth-child(3) {top: 0; right: 0; width: 1px; height: 0;}
#mv .mv_arrow span:nth-child(4) {bottom: 0; right: 0; height: 1px; width: 0;}
#mv .mv_arrow span:nth-child(5) {bottom: 0; left: 0; width: 1px; height: 0;}


#mv .mv_swiper .pagination {position: absolute; right: 5%; top: 40%; z-index: 1; align-items: center; flex-direction: column; min-height: 95px}
#mv .mv_swiper .pagination .swiper-pagination {position: relative; display: flex; flex-direction: column; gap: 10px}
#mv .mv_swiper .pagination .swiper-pagination-bullet {background-color: #fff; opacity: 1; width: 10px; height: 10px;}
#mv .mv_swiper .pagination .swiper-pagination-bullet-active {height: 30px; border-radius: 5px; transition: 0.5s;}
#mv .mv_swiper .pagination .play {position: absolute; bottom: 0; cursor: pointer;}
#mv .mv_swiper .pagination .play img {display: none}
#mv .mv_swiper .pagination .play img.on {display: block;}

@media all and (max-width: 768px){
    #mv {height: 100vh;}
    #mv .mv_swiper .txt .tit {font-size: 60px; line-height: 60px;}
    #mv .mv_swiper .txt .tit2 {font-size: 60px; line-height: 60px;}
    #mv .mv_swiper .txt .wrt {font-size: 20px; padding-top: 20px;}
    #mv .mv_swiper .pagination {top: 45%;}
    #mv .mv_arrow {bottom: 10%; width: 48px; height: 48px;}
}

@media all and (max-width: 450px){
    #mv .mv_swiper .box {height: 85vh;}
    #mv .mv_swiper .txt { margin-top: 80px}
    #mv .mv_swiper .txt .tit {font-size: 32px; line-height: 40px;padding-left: 10px;padding-right: 10px}
    #mv .mv_swiper .txt .tit2 {font-size: 32px; line-height: 40px;padding-left: 10px;padding-right: 10px}
    #mv .mv_swiper .txt .wrt {font-size: 20px;padding-left: 35px;padding-right: 35px}

    #mv .mv_swiper .pagination {top: auto; bottom: 35%; flex-direction: row; left: 48%; transform: translateX(-50%); gap: 10px; min-height: auto; justify-content: center;}
    #mv .mv_swiper .pagination .play {bottom: auto; right: 30%;}
    #mv .mv_swiper .pagination .swiper-pagination {flex-direction: row;}
    #mv .mv_swiper .pagination .swiper-pagination-bullet {width: 6px; height: 6px;}
    #mv .mv_swiper .pagination .swiper-pagination-bullet-active {width: 15px;}

}

/******** 섹션1  **/
#s1 {padding-top: 102px}
#s1 .title {}
#s1 .content {margin: 0 auto; padding-top: 63px;}
#s1 .box {align-items: center; gap: 72px; margin-bottom: 30px}
#s1 .box .img {width: 49%; min-width: 49%}
#s1 .box .txt {}
#s1 .box .txt .sm {color: #213B34; font-size: 13px; font-weight: bold; display: block; padding-bottom: 41px; position: relative;}
#s1 .box .txt .sm::before {position: absolute; content: ''; display: block; width: 1px; height: 26px; background: #000; bottom: 15%;}
#s1 .box .txt .tit {font-size: 41px; font-weight: bold}
#s1 .box .txt .wrt {font-size: 16px; line-height: 28px; color: #666666; padding: 21px 0 35px}
#s1 .box .txt .btn a {padding: 24px 44px; border: 1px solid #707070; display: inline-block; font-size: 14px; line-height: 1; position: relative;}
#s1 .box:nth-child(2n) {justify-content: flex-end;}
#s1 .box:nth-child(2n) .txt {margin-right: auto; padding-left: 113px;}
#s1 .box:last-child {margin-bottom: 0;}

@media all and (max-width: 768px){
    #s1 .content {padding-top: 55px;}
    #s1 .box {gap: 60px; flex-direction: column; margin-bottom: 80px;}
    #s1 .box .img {width: 100%; min-width: 100%}
    #s1 .box .txt {text-align: center;}
    #s1 .box .txt .sm {padding-bottom: 60px; font-size: 24px;}
    #s1 .box .txt .sm::before {height: 40px; bottom: 15%; left: 49%;}
    #s1 .box .txt .tit {font-size: 64px;}
    #s1 .box .txt .wrt {padding: 30px 0 40px; font-size: 25px; line-height: 44px;}
    #s1 .box .txt .btn a {font-size: 20px; padding: 30px 72px; font-weight: 500;}
    #s1 .box:nth-child(2n) {flex-direction: column-reverse;}
    #s1 .box:nth-child(2n) .txt {padding-left: 0; margin-right: 0;}
}

@media all and (max-width: 450px){
    #s1 .box {gap: 30px; margin-bottom: 50px;}
    #s1 .box .txt .sm {font-size: 14px; padding-bottom: 20px;}
    #s1 .box .txt .sm::before {height: 15px; bottom: 5%;}
    #s1 .box .txt .tit {font-size: 34px;}
    #s1 .box .txt .wrt {font-size: 15px; padding: 10px 0 20px; line-height: 24px;}
    #s1 .box .txt .btn a {font-size: 12px; padding: 15px 40px;}
}

/******** 섹션2  **/
#s2 {}
#s2 .title {padding-top: 2vw; position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; width: 100%;}
#s2 .s2_wrap {}
#s2 .s2_wrap .enter {background: #fff; margin-top: 30px;}
#s2 .s2_wrap .enter a {padding: 25px 60px; display: inline-block; font-size: 14px; line-height: 1; border: 1px solid #707070;}

@media all and (max-width: 768px){
    #s2 .s2_wrap {background: url('../img/s2_bg_mo.png') no-repeat; margin-top: 120px; min-height: 90vh}
    #s2 .s2_wrap .enter a {font-size: 20px; padding: 30px 72px; font-weight: 500;}
}

@media all and (max-width: 450px){
    #s2 .s2_wrap {margin-top: 60px; background-position: bottom; min-height: 70vh;}
    #s2 .s2_wrap .enter {margin-top: 10px;}
    #s2 .s2_wrap .enter a {font-size: 12px; padding: 15px 40px;}
}

/******** 섹션3  **/
#s3 {background: #153a29; padding: 113px 0 0;}
#s3 .title {color: #fff; font-weight: bold;}
#s3 .title h2 {font-size: 20px;}
#s3 .content {margin: 0 auto; padding-bottom: 260px;}
#s3 .content .txt {padding-left: 60px; z-index: 2;}
#s3 .content .tit {font-size: 224px; color: #fff; line-height: 210px; padding-top: 10px; padding-bottom: 100px;}
#s3 .content .wrt {color: #fff; font-size: 17px; width: 28%; line-height: 28px;}
#s3 .content .wrt span {display: block; margin-bottom: 35px; font-size: 19px;}
#s3 .content .img_area {position: absolute; bottom: 0; right: 0; width: 94%;}
#s3 .content .img_area::before {content: ''; display: block; position: absolute; background: #153a29; height: 100%; z-index: 1}

@media all and (max-width: 768px){
    #s3 .content {padding: 0 4% 180px; background: url('../img/s3_img_mo.png') no-repeat; background-size: 60%; background-position: right bottom}
    #s3 .content .txt {padding-left: 0;}
    #s3 .content .tit {font-size: 150px; line-height: 140px;}
    #s3 .content .wrt {padding-left: 40px; width: 60%; line-height: 32px; font-size: 20px;}
    #s3 .content .wrt span {font-size: 25px; margin-bottom: 15px;}
}

@media all and (max-width: 450px){
    #s3 {padding: 50px 0 0;}
    #s3 .content {padding: 0 4% 80px;}
    #s3 .content .tit {font-size: 70px; line-height: 70px; padding-bottom: 50px;}
    #s3 .content .wrt {padding-left: 10px; font-size: 14px; line-height: 22px;}
    #s3 .content .wrt span {font-size: 16px}
}

/******** 섹션4  **/
#s4 {}
#s4 .s4_wrap {}
#s4 .s4_wrap .box {min-height: 840px;}

#s4 .s4_wrap .box1 {flex: 1 ;background: url('../img/s4_bg.png') no-repeat; background-size: cover;}
#s4 .s4_wrap .box1 .txt { background-color: #ffffff;padding: 50px;background-color: rgba( 255, 255, 255, 0.7 );}
#s4 .s4_wrap .box1 .txt .tit {font-size: 40px; padding-bottom: 25px; font-weight: bold;}
#s4 .s4_wrap .box1 .txt .wrt {font-size: 18px; flex-direction: column; gap: 20px;}
#s4 .s4_wrap .box1 .txt .wrt span {display: flex; align-items: center; transition: 0.8s; cursor: pointer;}
#s4 .s4_wrap .box1 .txt .wrt span:hover {padding-left: 50px}
#s4 .s4_wrap .box1 .txt .wrt span::before {content: ''; display: block; position: absolute; width: 0; height: 14px; background: url('../img/s4_arrow.png') no-repeat; background-size: auto; background-position: right; left: 0; top: 50%; transform: translateY(-50%); transition: 0.8s;}
#s4 .s4_wrap .box1 .txt .wrt span:hover::before {width: 42px}
#s4 .s4_wrap .box1 .txt .wrt span img {margin-right: 5px}

#s4 .s4_wrap .box2 {flex: 1; background-color: #FCFAF3;}
#s4 .s4_wrap .box2 .txt {text-align: center;}
#s4 .s4_wrap .box2 .txt .icon {}
#s4 .s4_wrap .box2 .txt .tit {font-size: 28px; font-weight: bold; padding-bottom: 20px; color: #222222;}
#s4 .s4_wrap .box2 .txt .wrt {font-size: 16px; line-height: 27px;}
#s4 .s4_wrap .box2 .txt .btn {margin-top: 32px;}
#s4 .s4_wrap .box2 .txt .btn a {display: inline-block; padding: 23px 55px; border: 1px solid #707070; font-size: 16px;}

@media all and (max-width: 768px){
    #s4 .s4_wrap {flex-direction: column;}
    #s4 .s4_wrap .box1 .txt .tit {font-size: 64px;}
    #s4 .s4_wrap .box1 .txt .wrt {font-size: 24px;}
    #s4 .s4_wrap .box2 .txt .tit {font-size: 34px;}
    #s4 .s4_wrap .box2 .txt .wrt {font-size: 22px; line-height: 38px;}
    #s4 .s4_wrap .box2 .txt .btn {margin-top: 36px;}
    #s4 .s4_wrap .box2 .txt .btn a {font-size: 20px; padding: 30px 72px; font-weight: 500;}
}

@media all and (max-width: 450px){
    #s4 .s4_wrap .box1 .txt { background-color: #ffffff;padding: 80px;border-radius: 20px;background-color: rgba( 255, 255, 255, 0.7 );}
    #s4 .s4_wrap .box {min-height: 60vh;}
    #s4 .s4_wrap .box1 {background-position: center;}
    #s4 .s4_wrap .box1 .txt .tit {font-size: 34px;}
    #s4 .s4_wrap .box1 .txt .wrt {font-size: 16px; gap: 10px;}
    #s4 .s4_wrap .box1 .txt .wrt span img {width: 15%;}
    #s4 .s4_wrap .box2 .txt .icon img {width: 20%;}
    #s4 .s4_wrap .box2 .txt .tit {font-size: 26px;}
    #s4 .s4_wrap .box2 .txt .wrt {font-size: 15px; line-height: 24px;}
    #s4 .s4_wrap .box2 .txt .btn a {font-size: 12px; padding: 15px 40px;}
}

/******** 섹션5  **/
#s5 {padding: 150px 0}
#s5 .s5_wrap {margin: 0 auto;}
#s5 .s5_wrap .txt_box {margin: 82px 0 125px}
#s5 .s5_wrap .txt_box li {color: #222; text-align: center; width: calc(100% / 3); position: relative;}
#s5 .s5_wrap .txt_box li::after {content: ''; display: block; position: absolute; width: 1px; height: 87%; background: #DFDFDF; right: 0; top: 10px;}
#s5 .s5_wrap .txt_box li:last-child::after {display: none}
#s5 .s5_wrap .txt_box li .icon {width: 140px; margin: 0 auto;}
#s5 .s5_wrap .txt_box li .tit {font-size: 22px; font-weight: bold; padding: 28px 0 32px;}
#s5 .s5_wrap .txt_box li .wrt {font-size: 16px; line-height: 30px;}

#s5 .s5_wrap .img_box {}
#s5 .s5_wrap .box {width: 50%; position: relative;}

#s5 .s5_wrap .box1 .txt {color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; width: 100%;}
#s5 .s5_wrap .box1 .txt .tit {font-size: 60px; font-weight: bold}
#s5 .s5_wrap .box1 .txt .wrt {font-size: 18px; padding-top: 10px;}
#s5 .s5_wrap .box1 .icon {position: absolute; left: 50%; transform: translateX(-50%); bottom: 30%;}

#s5 .s5_wrap .box2 {background: #E9E9E9;}
#s5 .s5_wrap .box2 .box2_bg {background: url('../img/s5_bg_3.jpg') no-repeat; background-size: 0; background-position: right bottom; position: absolute; width: 100%; height: 100%; transition: background 1s;}
#s5 .s5_wrap .box2 .box2_bg.animatedIn {background-size: 115%;}
#s5 .s5_wrap .box2 .txt_wrap {flex-direction: column; height: 100%;}
#s5 .s5_wrap .box2 .txt_wrap .txt {height: 50%; display: flex; flex-direction: column; justify-content: center; padding-left: 110px;}
#s5 .s5_wrap .box2 .txt_wrap .txt:last-child {background: rgba(235,235,235,0.6);}
#s5 .s5_wrap .box2 .txt_wrap .tit {font-size: 60px; font-weight: bold;}
#s5 .s5_wrap .box2 .txt_wrap .wrt {color: #333333;}
#s5 .s5_wrap .box2 .txt_wrap .wrt .tit {font-size: 30px; font-weight: 500}
#s5 .s5_wrap .box2 .txt_wrap .wrt .info {font-size: 18px; line-height: 40px; margin: 15px 0 30px; height: 80px; overflow: hidden;}
#s5 .s5_wrap .box2 .txt_wrap .wrt .info .info_lst {height: 80px;}
#s5 .s5_wrap .box2 .txt_wrap .wrt .icon {}

@media all and (max-width: 768px){
    #s5 .s5_wrap .txt_box {margin: 0 0 100px; flex-direction: column;}
    #s5 .s5_wrap .txt_box li {width: 100%; padding: 55px 0;}
    #s5 .s5_wrap .txt_box li::after {width: 80%; left: 50%; height: 1px; bottom: 0; top: auto;
    transform: translateX(-50%);}
    #s5 .s5_wrap .txt_box li .tit {padding: 30px 0 22px; font-size: 30px;}
    #s5 .s5_wrap .txt_box li .wrt {font-size: 22px; line-height: 38px; font-weight: 400;}

    #s5 .s5_wrap .img_box {flex-direction: column;}
    #s5 .s5_wrap .box {width: 110%; margin-left: -5%;}
    #s5 .s5_wrap .box2 .txt_wrap .txt {padding-left: 90px;}
    #s5 .s5_wrap .box2 .txt_wrap .txt.tit {margin: 100px 0;}
    #s5 .s5_wrap .box2 .txt_wrap .txt:last-child {padding: 80px 0 80px 110px}
}

@media all and (max-width: 450px){
    #s5 {padding: 60px 0;}
    #s5 .s5_wrap .txt_box li {padding: 30px 0;}
    #s5 .s5_wrap .txt_box li .tit {padding: 20px 0 12px; font-size: 20px;}
    #s5 .s5_wrap .txt_box li .wrt {font-size: 15px; line-height: 24px;}
    #s5 .s5_wrap .txt_box li .icon img {}

    #s5 .s5_wrap .box1 .txt {top: 40%;}
    #s5 .s5_wrap .box1 .txt .tit {font-size: 35px;}
    #s5 .s5_wrap .box1 .txt .wrt {font-size: 15px; padding-top: 0}

    #s5 .s5_wrap .box2 .txt_wrap .txt.tit {margin: 50px 0; font-size: 32px; padding-left: 40px;}
    #s5 .s5_wrap .box2 .txt_wrap .txt:last-child {padding: 20px 0 20px 40px;}
    #s5 .s5_wrap .box2 .txt_wrap .wrt .tit {font-size: 20px;}
    #s5 .s5_wrap .box2 .txt_wrap .wrt .info {font-size: 15px; line-height: 20px; height: 60px;}
    #s5 .s5_wrap .box2 .txt_wrap .wrt .info .info_lst {height: 60px;}
}

/******** 섹션6  **/
#s6 {padding-bottom: 150px;}
#s6 .s6_wrap {margin: 0 auto;}
#s6 .s6_wrap .content {padding-top: 45px;}
#s6 .s6_wrap .list {align-items: center; height: 120px; overflow: hidden; margin-bottom: 30px}
#s6 .s6_wrap .list .ticker_list { height: 98px; align-items: center; border-bottom: 1px solid #ddd;padding-top: 10px;padding-bottom: 10px}
#s6 .s6_wrap .list .num_wrap {color: #DDDDDD; text-align: center; padding: 0 23px;}
#s6 .s6_wrap .list .num_wrap .num {font-size: 48px; font-weight: bold; line-height: 1;}
#s6 .s6_wrap .list .num_wrap .day {font-size: 22px;}
#s6 .s6_wrap .list .sbj_wrap {padding-left: 36px;}
#s6 .s6_wrap .list .sbj_wrap .sbj {font-size: 24px; padding-bottom: 10px;}
#s6 .s6_wrap .list .sbj_wrap .wrt {font-size: 16px; color: #666666; display: inline-block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 1050px}
#s6 .s6_wrap .list .icon {margin-left: auto;}
#s6 .s6_wrap .list_btn_wrap {text-align: center; /*padding-top: 43px; border-top: 1px solid #ddd;*/}
#s6 .s6_wrap .list_btn {font-size: 18px; }
#s6 .s6_wrap .list_btn a {gap: 27px; padding: 30px 33px; align-items: center; border: 1px solid #000;}

@media all and (max-width: 768px){
    #s6 .s6_wrap .list {height: 120px}
    #s6 .s6_wrap .list .ticker_list {height: 120px}
    #s6 .s6_wrap .list .sbj_wrap {padding-left: 0; width: 100%;}
    #s6 .s6_wrap .list .sbj_wrap .wrt {font-size: 18px; width: 500px}
    #s6 .s6_wrap .list .sbj_wrap .day {font-size: 18px; font-weight: 300; justify-content: flex-end;}
}

@media all and (max-width: 520px){
    #s6 {padding-bottom: 80px;}
    #s6 .s6_wrap .list .sbj_wrap .sbj {font-size: 16px;}
    #s6 .s6_wrap .list .sbj_wrap .wrt {font-size: 14px; width: 330px;}
    #s6 .s6_wrap .list .sbj_wrap .day {font-size: 14px;}
    #s6 .s6_wrap .list_btn_wrap {padding-top: 23px;}
    #s6 .s6_wrap .list_btn a {padding: 15px 23px; gap: 15px; font-size: 16px;}
}
