@charset "utf-8";

.pop {font-family: "Poppins", sans-serif;}
.cor {font-family: 'Cormorant', serif;}
.mo {display: none;}
.main {overflow: hidden;}

.section-header {margin-top: 115px; width: 100%; text-align: center;}
.section-header span {display: block; font-size: 20px; color: #01443a; font-weight: 600;}
.section-header h3 {font-size: 40px; color: #111; padding-top: 20px; line-height: 1; font-weight: 400;}
.section-header p {font-size: 18px; color: #666; line-height: 28px; padding-top: 35px;}

/* m-visual */
.m-visual {padding: 0;}
.m-visual .visual {width: 100%; height: 860px; position: relative; overflow: hidden;}
.m-visual .visual .swiper-wrapper .swiper-slide .backdrop {width: 100%; height: 100%; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; transition: all 2s ease;}
.m-visual .visual .swiper-wrapper .slide01 .backdrop {background-image: url(../images/main/m-visual01.jpg);}
.m-visual .visual .swiper-wrapper .swiper-slide-active .backdrop {transform: scale(1.1);}
.m-visual .visual .swiper-wrapper .swiper-slide .container {width: 100%; height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); text-align: right;}
.m-visual .visual .swiper-wrapper .swiper-slide .container p {position: absolute; bottom: 290px; right: 15px; font-size: 28px; line-height: 40px; color: #fff; font-weight: 600; width: 100%; opacity: 0; transition: all 1.2s ease .1s;}
.m-visual .visual .swiper-wrapper .swiper-slide .container h2{position: absolute; bottom: 200px; right: 15px; font-size: 60px; line-height: 75px; color: #fff; font-weight: 400;  width: 100%; opacity: 0; transition: all 1.2s ease .5s;}
.m-visual .visual .swiper-wrapper .swiper-slide-active .container p {bottom: 240px; opacity: 1;}
.m-visual .visual .swiper-wrapper .swiper-slide-active .container h2 {bottom: 150px; opacity: 1;}

.sec2 {padding-bottom: 195px;}
.sec2 .inner {width: 100%; margin-top: 75px;}
.sec2 .inner ul {display: flex; width: calc(100% + 40px); margin: 0 -20px;}
.sec2 .inner ul li {width: 33.3333%; padding: 0 20px;}
.sec2 .inner ul li figure {width: 100%;}
.sec2 .inner ul li figure img {display: block; margin: 0 auto; width: 100%;}
.sec2 .inner ul li figure figcaption {min-height: 180px; height: 100%; text-align: center; padding: 35px 15px 0; background-color: #f6f5f4;}
.sec2 .inner ul li figure figcaption span {display: block; font-size: 20px; font-weight: 600; color: #666;}
.sec2 .inner ul li figure figcaption p {font-size: 18px; line-height: 30px; padding-top: 20px; color: #666;}
.sec2 .banner {width: 100%; margin-top: 140px; height: 620px; position: relative; background: url(../images/main/bg_sec2.jpg) 50% 50% no-repeat; background-size: cover;}
.sec2 .banner .txt-box {position: absolute; bottom: 0; right: 0; width: 535px; padding: 65px; background-color: rgba(1,68,58, .95);}
.sec2 .banner .txt-box small {display: block;font-size: 20px; color: #fff; font-weight: 600;}
.sec2 .banner .txt-box h4 {font-size: 40px; color: #fff; font-weight: 400; padding-top: 20px; line-height: 1;}
.sec2 .banner .txt-box p {font-size: 18px; color: #fff; line-height: 30px; padding-top: 35px;}
.sec2 .banner > h3 {position: absolute; font-size: 120px; font-weight: 600; color: rgba(1,1,1, .1); z-index: 2; bottom: -55px; right: -160px; line-height: 80px;}

.sec3 {padding: 140px 0; background-color: #857c75; overflow: hidden;}
.slide-wrapper {position: relative;max-width: 1120px; width: 100%; margin: 0 auto !important;}
.slick-list {overflow: visible !important; width: 100%;}
.slick-slide {width: 100%;}
.slick-slide img {max-width: 960px; width: 100%; display: block; margin: 0 auto;}
.slick-arrow {position: absolute; top: 50%; transform: translateY(-50%); font-size: 0; background: url() 50% 50% no-repeat; width: 60px; height: 60px; border-radius: 50%; border: 1px solid rgba(255,255,255, .5); z-index: 2; transition: all .2s linear;}
.slick-arrow.op0 {opacity: 0;}
.slick-arrow:hover {background-color: #fff; border-color: #857c75;}
.slick-prev {background-image: url(../images/main/ico_prev.png); left: -30px;}
.slick-next {background-image: url(../images/main/ico_next.png); right: -30px;}
.slick-prev:hover {background-image: url(../images/main/ico_prev_on.png);}
.slick-next:hover {background-image: url(../images/main/ico_next_on.png);}
.slick-dots {margin: 29px auto 0;  display: flex; max-width: 64px; gap: 20px; justify-content: center; align-items: center; align-items: flex-start;}
.slick-dots li button {font-size: 0; width: 8px; height: 8px; border: 1px solid rgba(255,255,255, .5); background-color: transparent; border-radius: 50%; cursor: default;}
.slick-dots li.slick-active button {background-color: #fff;}

.sec4 .bg  {width: 100%; margin-top: 75px; height: 640px; background: url(../images/main/bg_sec4.jpg) 50% 50% no-repeat; background-size: cover;}