@charset "utf-8";

.main {overflow: hidden;}
.mo {display: none;}

@keyframes textAni {
  0% {opacity:0;}
  30% {opacity:0;}
}

.motion .char {animation:textAni 1s both; animation-delay:calc(0.08s * var(--char-index));}

.mont {font-family: 'Montserrat';}
section {padding: 180px 0 200px;}
.section-header h3 {position: relative; padding-top: 48px; font-size: 60px; color: #111; text-align: center; font-weight: 700;}
.section-header h3::before {position: absolute; content: ''; width: 24px; height: 24px; top: 0; left: 50%; transform: translateX(-50%); background: url(../images/main/ico_tit.png) 50% 50% no-repeat; background-size: auto;}
.section-header p {padding-top: 40px; font-size: 22px; color: #333; text-align: center; line-height: 35px;}


/* m-visual */
.m-visual {position: relative; padding: 0; overflow: hidden;}
.m-visual .visual {width: 100%; height: 970px; position: relative;}
.m-visual .visual .swiper-wrapper .swiper-slide .backdrop {width: 100%; height: 100%; background: url() 50% 50% no-repeat; background-size: cover; transition: all 2s ease;}
.m-visual .visual .swiper-wrapper .swiper-slide-active .backdrop {transform: scale(1.1);}
.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 .container {width: 100%; height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.m-visual .visual .swiper-wrapper .swiper-slide .container h3 {position: absolute; top: 370px; left: 15px; font-size: 67px; color: #fff; line-height: 80px; opacity: 0; transition: all 1s ease .3s; font-weight: 600;}
.m-visual .visual .swiper-wrapper .swiper-slide .container p {position: absolute; top: 480px; left: 15px; font-size: 24px; color: #fff; line-height: 40px; transition: all 1s ease .5s; opacity: 0;}
.m-visual .visual .swiper-wrapper .swiper-slide-active .container h3 {top: 395px; opacity: 1;}
.m-visual .visual .swiper-wrapper .swiper-slide-active .container p {top: 515px; opacity: .8;}

.m-visual .container {position: absolute; bottom: 85px; left: 50%; transform: translateX(-50%); z-index: 2;}
.m-visual .controls {width: 320px; height: auto; position: relative;}
.swiper-pagination-bullets.visual-pagination {display: flex; justify-content: space-between; align-items: center; gap: 10px;}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 !important;}
.swiper-pagination-bullets.visual-pagination > span {position: relative; width: 100px; height: 3px; border-radius: 0; background-color: rgba(255,255,255,0.3); /* border: 1px solid #ddd; */  display: block;}
.swiper-pagination-bullets.visual-pagination > span:after{position: absolute; content: '';  width: 100px; height: 3px;background-color: #fff; left: 0; bottom: 0; }

.swiper-pagination-bullets.visual-pagination > .swiper-pagination-bullet.swiper-pagination-bullet-active:after{animation: gbar 5.8s ease infinite;}


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


.swiper-pagination-bullets.visual-pagination > span::before {position: absolute; content: ''; font-size: 16px; color: #fff; font-weight: 500; font-family: 'Montserrat'; top: -22px; left: 0;}
.swiper-pagination-bullets.visual-pagination > span:nth-of-type(1)::before {content: '01';}
.swiper-pagination-bullets.visual-pagination > span:nth-of-type(2)::before {content: '02';}
.swiper-pagination-bullets.visual-pagination > span:nth-of-type(3)::before {content: '03';}
.swiper-pagination-bullets.visual-pagination .swiper-pagination-bullet-active {opacity: 1;}
.m-visual .visual .scroll {position: absolute; display: block; bottom: 85px; right: 92px; width: 64px; height: 59px; background: url(../images/main/scroll.png) 50% 50% no-repeat; background-size: auto; z-index: 2; animation: bounce 1.3s ease infinite;}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0);
    }
  
    40% {
      transform: translateY(-10px);
    }
  
    60% {
      transform: translateY(-5px);
    }
}



/* sec2 */
.sec2 {padding: 150px 0 170px; width: 100%; background: url(../images/main/bg_sec2.jpg) 50% 50% no-repeat; background-size: cover;}
.sec2 .section-header h3 {color: #fff;}
.sec2 .section-header p {color: #fff; padding-top: 50px; font-size: 18px;}
.sec2 .cnt {width: 100%; margin-top: 55px;}
.sec2 .cnt ul {display: flex; width: 100%;}
.sec2 .cnt ul li {width: 25%; border-radius: 20px; overflow: hidden;}
.sec2 .cnt ul li a {position: relative; display: block; width: 100%; padding: 74px 0 75px;}
.sec2 .cnt ul li a::before {position: absolute; width: 100%; height: 100%; top: 0; left: 0; content: ''; background: url(../images/main/banner_on.png) 50% 50% no-repeat; background-size: auto; opacity: 0; transition: all .2s linear;}
.sec2 .cnt ul li a:hover::before {opacity: 1;}
.sec2 .cnt ul li a .ico {position: relative; z-index: 1;}
.sec2 .cnt ul li a .ico img {display: block; margin: 0 auto;}
.sec2 .cnt ul li a dl {margin-top: 40px; text-align: center; position: relative; z-index: 1;}
.sec2 .cnt ul li a dl dt {font-size: 14px; color: #fff; opacity: .7; font-weight: 500;}
.sec2 .cnt ul li a dl dd {margin-top: 15px; color: #fff; font-size: 26px; font-weight: 600;}

/* sec3 - sec4 */
.sec3 {padding-bottom:0;}
.sec4 {padding:160px 0;}
.busi .swiper-wrapper { padding-bottom: 40px;}
.busi .swiper-slide {position: relative; border-radius: 20px; overflow: hidden; height: auto;}
.busi .swiper-slide::before {position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0, .4); opacity: 0; border-radius: 20px; z-index: 0; overflow: hidden; transition: all .2s linear;}
.busi .swiper-slide-prev::before, .busi .swiper-slide-next::before {opacity: 1; z-index: 3;}
.busi .swiper-slide .img-box {display: block; width: 100%; position: relative; border-radius: 20px;}
.busi .swiper-slide .img-box::before {position: absolute; content: ''; display: block; overflow: hidden; width: 100%; height: 100%; bottom: 0; left: 50%; transform: translateX(-50%); background: url(../images/main/img_sec3_bg_b.png) 50% 50% no-repeat; background-size: cover; z-index: 1;border-radius: 20px;}
.busi .swiper-slide .img-box::after {position: absolute; content: ''; display: block; overflow: hidden; width: 100%; height: 0%; bottom: 0; left: 50%; transform: translateX(-50%); /* background: linear-gradient(to top, rgba(0, 78, 162, .8) 1%, transparent 50%); */ background: url(../images/main/img_sec3_bg.png) 50% 50% no-repeat; background-size: cover; z-index: 1; transition: all .2s linear; border-radius: 20px;}
.busi .swiper-slide .img-box .tit-box {position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); width: 100%; height: 60px; z-index: 2;}
.busi .swiper-slide .img-box .tit-box h4 {text-align: center; font-size: 32px; color: #fff; font-weight: 500; line-height: 60px;}
.busi .swiper-slide .img-box .tit-box span {position: absolute; bottom: 0; right: 50px; width: 60px; height: 60px; border-radius: 50%; background: url(../images/main/ico_plus.png) 50% 50% no-repeat; background-size: auto; transition: all .2s linear; opacity: 0;}
.busi .swiper-slide-active:hover {box-shadow: 0px 10px 35px 0px rgba(86, 86, 86, 0.2);}
.busi .swiper-slide-active .img-box .tit-box span {opacity: 1;}
.busi .swiper-slide-active .img-box:hover .tit-box span {background-image: url(../images/main/ico_plus_on.png);}
.busi .swiper-slide-active .img-box:hover:after {height: 100%;}



.btn-box {width: 130px; height: 60px; margin-left: auto; margin-bottom: 30px; display: flex; align-items: center; gap: 10px;}
.btn-box .btns {width: 60px; height: 60px; border: 1px solid #ddd; border-radius: 50%; background: url() 50% 50% no-repeat; background-size: auto; transition: all .15s linear; cursor: pointer;}
.btn-box .slide-prev1 {background-image: url(../images/main/ico_prev.png);}
.btn-box .slide-next1 {background-image: url(../images/main/ico_next.png);}
.btn-box .slide-prev1:hover {background-image: url(../images/main/ico_prev_on.png); border-color: #004ea2;}
.btn-box .slide-next1:hover {background-image: url(../images/main/ico_next_on.png); border-color: #004ea2;}

.btn-box .slide-prev2 {background-image: url(../images/main/ico_prev.png);}
.btn-box .slide-next2 {background-image: url(../images/main/ico_next.png);}
.btn-box .slide-prev2:hover {background-image: url(../images/main/ico_prev_on.png); border-color: #004ea2;}
.btn-box .slide-next2:hover {background-image: url(../images/main/ico_next_on.png); border-color: #004ea2;}


/* sec5 */
.sec5 {width: 100%; background: url(../images/main/bg_sec5.jpg) 50% 50% no-repeat; background-size: cover;}
.sec5 .section-header h3 {color: #fff;}
.sec5 .tab {margin: 60px auto; max-width: 540px; width: 100%;}
.sec5 .tab ul {width: 100%; display: flex; align-items: center; font-size: 0; background-color: #fff; border-radius: 50px;}
.sec5 .tab ul li {width: 100%; max-width: 180px; position: relative;}
.sec5 .tab ul li::after {position: absolute; content: ''; width: 1px; height: 15px; background-color: #ddd; top: 50%; right: -2px; transform: translateY(-50%);}
.sec5 .tab ul li:last-child::after {display: none;}
.sec5 .tab ul li a {position: relative; display: block; width: 100%; font-size: 18px; color: #666; font-weight: 400; text-align: center; transition: all .2s linear; line-height: 60px;}
.sec5 .tab ul li a::before {position: absolute; content: ''; top: 50%; transform: translateY(-50%); left: 0; width: 100%; height: 65px; background: url(../images/main/bg_on.png) 50% 50% no-repeat; background-size: auto; opacity: 0; transition: all .2s linear; z-index: -1; border-radius: 30px;}
.sec5 .tab ul li:nth-of-type(1) a::before {left: -1px;}
.sec5 .tab ul li:nth-of-type(3) a::before {left: 1px;}
.sec5 .tab ul li a:hover {color: #111;}
.sec5 .tab ul li.on::after {display: none;}
.sec5 .tab ul li.on a {font-weight: 600; color: #fff; z-index: 2; position: relative;}  
.sec5 .tab ul li.on a::before {opacity: 1;}

.sec5 .wrap { width: 100%;}
.sec5 .wrap p {text-align: center; font-size: 22px; color: #fff; opacity: .7;}
.sec5 .wrap .cnt {display: block; width: 100%; position: relative; transition: all .2s linear;}
.sec5 .wrap .cnt a {display: block; width: 100%; border-radius: 20px; overflow: hidden; margin-top: 90px;}
.sec5 .wrap .cnt a img {display: block; margin: 0 auto; max-width: 100%;}
.sec5 .wrap .cnt a span {position: absolute; display: block; bottom: 55px; right: 60px; width: 60px; height: 60px; border-radius: 50%; background: url(../images/main/ico_plus.png) 50% 50% no-repeat; background-size: auto; transition: all .2s linear;}
.sec5 .wrap .cnt a:hover span {background-image: url(../images/main/ico_plus_on2.png);}

.sec5 .wrap .cnt {display: none;}
.sec5 .wrap .cnt01 {display: block;}


/* sec6 */
.sec6 .cnt {margin-top: 90px;}
.sec6 .cnt a {position: relative; display: block; width: 100%; height: 530px; background: url(../images/main/bg_sec6.jpg) 50% 50% no-repeat; background-size: cover; border-radius: 20px; transition: all .2s linear;}
.sec6 .cnt a::before {position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 1; transition: all .2s linear; background: url(../images/main/gradi_bg.png) 50% 50% no-repeat; background-size: cover; border-radius: 20px;}
.sec6 .cnt a:hover {box-shadow: 0px 15px 30px 0px rgba(156, 156, 156, 0.2);}
.sec6 .cnt a:hover::before {opacity: 1;}
.sec6 .cnt a .txt {width: 100%; padding: 80px; position: relative; z-index: 2;}
.sec6 .cnt a .txt small {display: block; font-size: 14px; font-weight: 500; color: #fff; opacity: .6;}
.sec6 .cnt a .txt h5 {font-size: 32px; font-weight: 600; color: #fff; padding-top: 25px;}
.sec6 .cnt a .txt p {font-size: 18px; color: #fff; font-weight: 400; line-height: 30px; padding-top: 35px;}
.sec6 .cnt a span {position: absolute; display: block; bottom: 55px; right: 60px; width: 60px; height: 60px; border-radius: 50%; background: url(../images/main/ico_plus.png) 50% 50% no-repeat; background-size: auto; transition: all .2s linear;}
.sec6 .cnt a:hover span {background-image: url(../images/main/ico_plus_on2.png);}


/* sec7 */
.sec7 {background-color: #f6f6f6;}
.sec7 .cnt > a {display: block; width: 60px; height: 60px; border-radius: 50%; background: url(../images/main/ico_plus2.png) 50% 50% no-repeat; background-size: auto; margin-left: auto; transition: all .2s linear;}
.sec7 .cnt > a:hover {background-image: url(../images/main/ico_plus_on2.png);}
.sec7 .cnt .notice {width: 100%; margin-top: 40px;}
.sec7 .cnt .notice ul {display: flex; width: calc(100% + 60px); margin: 0 -30px;}
.sec7 .cnt .notice ul li {width: 25%; padding: 0 30px; min-height: 413px;}
.sec7 .cnt .notice ul li a {display: block; position: relative; padding: 50px 45px 60px; width: 100%; height: 100%; background-color: #fff; border-radius: 20px; transition: all .2s linear; border: 1px solid transparent; text-align: right;}
.sec7 .cnt .notice ul li a:hover {border-color: #004ea2; box-shadow: 0px 0px 40px 0px rgba(156, 156, 156, 0.25);}
.sec7 .cnt .notice ul li a h5 {font-size: 22px; font-weight: 600; color: #111; max-height: 70px; height: 100%; line-height: 35px; display: -webkit-box; word-wrap: break-word;  -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; transition: all .2s linear; word-break: break-all; text-align: left;}
.sec7 .cnt .notice ul li a p {font-size: 18px; color: #666; font-weight: 400; line-height: 32px; padding-top: 35px; display: -webkit-box; word-wrap: break-word;  -webkit-line-clamp: 4; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; transition: all .2s linear; word-break: break-all; text-align: left;}
.sec7 .cnt .notice ul li a span {position: absolute; z-index: 1; bottom: 60px; right: 45px; display: inline-block; font-size: 18px; color: #999; font-weight: 400; padding-left: 20px; background: url(../images/main/ico_date.png) 0% 50% no-repeat; background-size: auto; transition: all .2s linear;}
.sec7 .cnt .notice ul li a:hover h5 {color: #004ea2;}
.sec7 .cnt .notice ul li a:hover p {color: #333;} 
.sec7 .cnt .notice ul li a:hover span {color: #004ea2; background-image: url(../images/main/ico_date_on.png);}


/* sec8 */
.sec8 {width: 100%; background: url(../images/main/bg_sec8.jpg) 50% 50% no-repeat; background-size: cover;}
.sec8 .section-header h3 {color: #fff; padding: 0;}
.sec8 .section-header h3::before {display: none;}
.sec8 .section-header p span {display: block; color: #fff; opacity: .8;}

.sec8 .container > a {display: flex; justify-content: center; align-items: center; position: relative; width: 82px; height: 82px; border-radius: 50%; margin: 60px auto 0;}
.sec8 .container > a::before {position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background: url(../images/main/ico_line.png) 50% 50% no-repeat; background-size: auto; transition: all .2s linear;}
.sec8 .container > a:hover:before {animation: scale 1s 0s linear infinite;}
.sec8 .container > a img {display: block; margin: 0 auto; max-width: 100%;}

@keyframes scale {
  0% {
      transform: scale(1);
      opacity: .2;
  }

  30% {
      opacity: 1;
  }

  100% {
      transform: scale(1.3);
      opacity: 0;
  }
}