@charset "utf-8";

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

/* m-visual */
.m-visual {padding: 0;}
.m-visual .visual {width: 100%; height: 940px; position: relative; }
.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 .slide02 .backdrop {background-image: url(../images/main/m-visual02.jpg);}
.m-visual .visual .swiper-wrapper .slide03 .backdrop {background-image: url(../images/main/m-visual03.jpg);} 
.m-visual .visual .swiper-wrapper .swiper-slide-active .backdrop {transform: scale(1.1);}

.controls {position: absolute; display: flex; justify-content: space-between; align-items: center; bottom: 60px; left: 50%; transform: translateX(-50%); width: 200px; height: 20px; z-index: 5;}
.controls .btn-area {width: 130px; height: 100%; display: flex; align-items: center; gap: 30px;}
.controls .btn-area .visual-pagination {width: 92px;}
.swiper-pagination-bullets {align-items: center; display: flex; gap: 30px;}
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 !important;}
.controls .swiper-pagination-bullet {width: 8px; height: 8px; border-radius: 50%; background-color: #fff; opacity: .5; margin: 0;}
.controls .swiper-pagination-bullet.swiper-pagination-bullet-active {width: 16px; height: 16px; background-color: transparent; border: 2px solid #fff; opacity: 1;}
.controls .btn-area .btn-controls {width: 9px; height: 10px; background: url(../images/main/ico_pause.png) 50% 50% no-repeat; background-size: auto;}
.controls .btn-area .btn-controls.play {background-image: url(../images/main/ico_play.png);}
.controls .btns {width: 9px; height: 14px; background: url() 50% 50% no-repeat; background-size: auto;}
.controls .btns.visual-prev {background-image: url(../images/main/prev.png);}
.controls .btns.visual-next {background-image: url(../images/main/next.png);} 

/* sec2 */
/* .sec2 {padding: 465px 0 245px; width: 100%; background: url(../images/main/bg_sec2.jpg) 50% 50% no-repeat; background-size: cover; border-bottom-left-radius: 100px;}
.sec2 > .container {display: flex; align-items: flex-start; gap: 203px; max-width: 1225px !important;}
.sec2 h3 {max-width: 410px; width: 100%; font-size: 66px; font-weight: 700; font-family: 'Poppins'; color: #fff; line-height: normal; letter-spacing: -1.32px; padding-top: 153px;} */
.sec2 {padding: 250px 0 245px; width: 100%; background: url(../images/main/bg_sec2.jpg) 50% 50% no-repeat; background-size: cover; border-bottom-left-radius: 100px;}
.sec2 > .container {display: flex; align-items: flex-start; gap: 150px; max-width: 1225px !important;}
.sec2 h3 {width: 100%; font-size: 60px; font-weight: 700; color: #fff; line-height: 1.3; letter-spacing: -.6px; padding-top: 0; margin-bottom: 30px;}
.sec2 h3 > span {display: inline-block; position: relative;}
.sec2 h3 > span::after {position: absolute; content: ''; width: 21.5px; height: 25px; clip-path: polygon(41% 0%, 100% 0%, 59% 100%, 0% 100%); background-color: #f3b920; top: 8px; right: -11px;}
.sec2 .txt {position: relative; width: 100%; max-width: 700px; margin-left: auto;}
.sec2 .txt p {font-size: 28px; font-weight: 400; line-height: 1.8; letter-spacing: -.46px; color: #fff; /* word-break: break-all; */}
/* .sec2 .txt p:nth-of-type(1) {font-size: 26px; letter-spacing: -.52px; line-height: 1.6;} */
.sec2 .txt p ~ p {margin-top: 54px;}
.sec2 .txt > a {display: block; position: absolute; width: 62px; height: 62px; bottom: -24px; right: -35px; background: url(../images/main/ico_arrow.png) 50% 50% no-repeat; background-size: auto; transition: all .2s linear;}
.sec2 .txt > a:hover {background-image: url(../images/main/ico_arrow_on.png); bottom: -14px; right: -55px;}
.sec2 .txt figure {margin-top: 70px;}
.sec2 .txt figure img {display: block; max-width: 100%;}
.sec2 .txt figure figcaption {display: flex; align-items: center; font-size: 26px; color: #fff; font-weight: 500; line-height: 1.6; letter-spacing: -.52px; margin-top: 10px;}
.sec2 .txt figure figcaption > span {font-size: 36px; font-weight: 600; display: inline-block; margin-left: 10px;}

/* sec3 */
.sec3 {padding: 215px 0 175px;}
/* .sec3 .inner {width: 100%; display: flex;} */
.sec3 .inner {width: 100%;}
/* .sec3 .inner .left {position: relative; max-width: 604px; width: 100%; padding-right: 118px; background-color: #fff; z-index: 2; padding-top: 80px;} */
.sec3 .inner .left {position: relative;width: 100%; background-color: #fff; z-index: 2;}
/* .sec3 .inner .left::before {position: absolute; content: ''; width: 240px; height: 100%; left: -240px; background-color: #fff; top: 0; z-index: 1;} */
.sec3 .inner .txt small {display: block; font-size: 20px; font-weight: 700; line-height: normal; letter-spacing: -.4px; color: #31964c;}
.sec3 .inner .txt h4 {font-size: 40px; color: #111; font-weight: 400; line-height: 1.6; /* margin-top: 14px; */ letter-spacing: -.8px; font-family: "JalnanGothic";}
.sec3 .inner .txt p {font-size: 23px; color: #767676; font-weight: 400; line-height: 1.8; letter-spacing: -.46px; margin-top: 26px;}
.sec3 .inner .left a {display: block; max-width: 310px; position: absolute; top: 0; right:200px; width: 100%; line-height: 80px; padding: 0 47px; font-size: 22px; color: #fff; font-weight: 600; letter-spacing: -.44px; background: url(../images/main/ico_view.png) calc(100% - 47px) 50% no-repeat; background-size: auto; background-color: #31964c; border-radius: 52px; transition: all .2s linear; z-index: 2;}
.sec3 .inner .left a:hover {background-color: #f3b920;}
.sec3 .inner .left .control {position: absolute; top: 0; right: 0; display: flex; gap: 8px; align-items: center; justify-content: right; width: 100%; max-width: 168px;}
.sec3 .inner .left .control .field-btns {width: 80px; height: 80px; border-radius: 50%; border: 1px solid #31964c; background: url() 50% 50% no-repeat; background-size: auto; cursor: pointer; transition: all .2s linear;}
.sec3 .inner .left .control .field-prev {background-image: url(../images/main/ico_prev.png);}
.sec3 .inner .left .control .field-next {background-image: url(../images/main/ico_next.png);}
.sec3 .inner .left .control .field-prev:hover {background-color: #31964c; background-image: url(../images/main/ico_prev_on.png);}
.sec3 .inner .left .control .field-next:hover {background-color: #31964c; background-image: url(../images/main/ico_next_on.png);}

/* .sec3 .inner .busi-field {width: 1%; flex: 1 1 auto; overflow: visible;} */
.sec3 .inner .busi-field {width: 100%; margin-top: 60px;}
.sec3 .inner .busi-field .swiper-slide {position: relative; display: block; width: 100%; border-radius: 30px; overflow: hidden;}
.sec3 .inner .busi-field .swiper-slide::after {position: absolute; content:''; width: 100%; height: 100%; background-color: rgba(0,0,0, .2); top: 0; left: 0; z-index: 2; opacity: 1; transition: all .3s linear;}
.sec3 .inner .busi-field .swiper-slide > p {position: absolute; top: 60px; left: 50px; width: calc(100% - 100px); font-size: 22px; color: #fff; font-weight: 400; line-height: 1.8; letter-spacing: -.46px; z-index: 3; opacity: 1; transition: all .3s linear;}
.sec3 .inner .busi-field .swiper-slide > p > strong {font-size: 44px; display: block; margin-bottom: 20px; font-weight: 700; letter-spacing: -.88px; line-height: 1.2;}
/* .sec3 .inner .busi-field .swiper-slide:hover::after {opacity: 1;}
.sec3 .inner .busi-field .swiper-slide:hover > p {opacity: 1;} */

.field-paging.swiper-pagination-bullets {gap: 20px; margin-top: 40px; justify-content: center;}
.field-paging.swiper-pagination-bullets .swiper-pagination-bullet {width: 12px; height: 12px; background-color: #D9D9D9; opacity: 1;}
.field-paging.swiper-pagination-bullets .swiper-pagination-bullet-active {background-color: #F3B920;}

/* 
.sec3 .inner .txt {display: none;}
.sec3 .inner .txt.active {display: block;} */

.sec4 {width: 100%; position: relative; padding: 80px 0; margin-bottom: 245px;}
.sec4 .section-header small {font-size: 20px; font-weight: 700; color: #31964c; display: block; line-height: normal; letter-spacing: -.4px;}
.sec4 .section-header h4 {font-size: 50px; font-weight: 700; color: #222; line-height: normal; letter-spacing: -1px; margin-top: 14px; font-family: 'Poppins';}
.sec4 .section-header p {margin-top: 26px; font-size: 23px; color: #767676; line-height: 1.8; font-weight: 400; letter-spacing: -.46px;}

.sec4 .inquiry {position: absolute; top: 0px; right: 0; background-color: #f3b920; border-radius: 192px 0 0 192px; max-width: 1076px; width: 100%; padding: 110px 240px 110px 127px;}
.sec4 .inquiry ul {width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 105px;}
.sec4 .inquiry ul li {width: 1%; flex: 1 1 auto; position: relative;}
.sec4 .inquiry ul li ~ li::before {position: absolute; content: ''; width: 2px; height: 79px; background-color: rgba(255,255,255, .5); top: 24px; left: -53px; transform: rotate(30deg);}
.sec4 .inquiry ul li a {display: block; width: 100%;}
.sec4 .inquiry ul li a dl dt {width: 76px; height: 76px; margin: 0 auto; background: url() 50% 50% no-repeat; background-size: auto; transition: all .2s linear;}
.sec4 .inquiry ul li:nth-of-type(1) a dl dt {background-image: url(../images/main/ico_sec401.png);}
.sec4 .inquiry ul li:nth-of-type(2) a dl dt {background-image: url(../images/main/ico_sec402.png);}
.sec4 .inquiry ul li:nth-of-type(3) a dl dt {background-image: url(../images/main/ico_sec403.png);}
.sec4 .inquiry ul li:nth-of-type(1) a:hover dl dt {background-image: url(../images/main/ico_sec401_on.png);}
.sec4 .inquiry ul li:nth-of-type(2) a:hover dl dt {background-image: url(../images/main/ico_sec402_on.png);}
.sec4 .inquiry ul li:nth-of-type(3) a:hover dl dt {background-image: url(../images/main/ico_sec403_on.png);}
.sec4 .inquiry ul li a dl dd {font-size: 18px; color: #fff; text-align: center; margin-top: 55px; line-height: 1.8; letter-spacing: -.36px; font-weight: 700;}

/* sec5 */
.sec5 {width: 100%; padding: 135px 0; background: url(../images/main/bg_sec5.jpg) 50% 50% no-repeat; background-size: cover; border-radius: 0 100px 0 0;}
.sec5 h4 {text-align: center; font-size: 36px; font-weight: 400; line-height: 1.6; letter-spacing: -.72px; color: #fff; font-family: 'JalnanGothic';}
.sec5 .btns {margin-top: 52px; display: flex; gap: 30px; align-items: center; justify-content: center;}
.sec5 .btns > a {display: flex; font-size: 23px; color: #fff; font-weight: 400; letter-spacing: -.46px; max-width: 348px; width: 100%; border-radius: 10px; line-height: 65px; border: 1px solid #fff;  background-color: rgba(255,255,255, .2); backdrop-filter: blur(5.5px); padding:0 63px; align-items: center; justify-content: space-between; transition: all .2s linear;}
.sec5 .btns > a > i {display: flex; align-items: center; width: 37px; height: 37px; border-radius: 50%; background-color: transparent; justify-content: right; transition: all .2s linear;}
.sec5 .btns > a > i img {display: block; margin: 0 auto;}
.sec5 .btns > a:hover {background-color: transparent;}
.sec5 .btns > a:hover > i {background-color: #f3b920;}