@charset "utf-8";

#main {overflow: hidden;}
.main-visual {position: relative; height: 730px; overflow: hidden;}
.main-visual .item {position: relative; height: 730px;}
.main-visual .item .img-box {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; z-index: -1;}
.main-visual .item:nth-child(1) .img-box {background-image: url('../img/main/main_visual01.jpg');}
.main-visual .item:nth-child(2) .img-box {background-image: url('../img/main/main_visual02.jpg');}
.main-visual .item:nth-child(3) .img-box {background-image: url('../img/main/main_visual03.jpg');}
.main-visual .item.slick-active .img-box {transform: scale(1.07); transition: all 4.5s;}
.main-visual .item .text-box {position: relative; display: flex; justify-content: center; align-items: center; max-width: 1430px; width: 100%; height: 100%; padding: 30px 15px 0; margin: 0 auto; z-index: 3;}
.main-visual .item .text-box h2 {text-align: center;}
.main-visual .item.slick-active .text-box h2 {animation: text-up 1s both 0.5s;}
@keyframes text-up {0% {transform: translateY(30px); opacity: 0;} 100% {transform: translateY(0px); opacity: 1;}}
.main-visual .arrows {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; justify-content: space-between; max-width: 1830px; width: 100%; padding: 110px 15px 0; margin: 0 auto; z-index: 2;}
.main-visual .slick-arrow {width: 50px; height: 82px; background-repeat: no-repeat; font-size: 0; border: 0; background-color: transparent;}
.main-visual .slick-prev {background-position: left center; background-image: url('../img/main/main_visual_btn_prev.png');}
.main-visual .slick-next {background-position: right center; background-image: url('../img/main/main_visual_btn_next.png');}

.banner .wrap {display: flex; margin: -100px -20px 100px;}
.banner .box {width: 33.3333%; height: 320px; padding: 0 20px;}
.banner .box a {position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; border-radius: 8px; overflow: hidden; transition: all 0.4s;}
.banner .box:nth-child(1) a {background-image: url('../img/main/main_banner_img01.jpg');}
.banner .box:nth-child(2) a {background-image: url('../img/main/main_banner_img02.jpg');}
.banner .box:nth-child(3) a {background-image: url('../img/main/main_banner_img03.jpg');}
.banner .box a:after {opacity: 0; position: absolute; bottom: 0; left: 0; content: ''; width: 490px; height: 370px; background: url('../img/main/main_banner_active_bg2.png') no-repeat center center/cover; z-index: 3; transition: all 0.4s;}
.banner .box a:hover:after {opacity: 0.88; bottom: -50px; left: -50px;}
.banner .box h3 {position: relative; font-size: 26px; font-weight: 600; line-height: 1.5em; color: #fff; text-align: center; z-index: 5;}

.sec01 {background: url('../img/main/sec01_bg.jpg') no-repeat center center/cover; background-attachment: fixed; padding: 93px 0 120px;}
.sec01 .wrap {display: flex; justify-content: space-between;}
.sec01 .text-box {margin-top: 11px;}
.sec01 .text-box h3 {font-size: 40px; font-weight: 700; line-height: 1.4em; color: #fff; margin-bottom: 37px;}
.sec01 .text-box p {font-size: 18px; line-height: 1.55em; color: rgba(255,255,255,0.7);}
.sec01 .programs {max-width: 380px; width: 100%;}
.sec01 .programs h4 {font-size: 26px; font-weight: 600; line-height: 1.4em; color: #fff; margin-bottom: 17px;}
.sec01 .programs .box:not(:last-child) {margin-bottom: 8px;}
.sec01 .programs .box a {position: relative; display: flex; justify-content: space-between; align-items: center; padding: 24px 30px; background: rgba(28,130,201,0.7); backdrop-filter: blur(10px); border-radius: 8px; overflow: hidden; z-index: 2; transition: all 0.4s;}
.sec01 .programs .box a:after {opacity: 0; position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; background: url('../img/main/sec01_active_bg.png') no-repeat center center/cover; transition: all 0.4s;}
.sec01 .programs .box a:hover:after {opacity: 1; transform: scale(1.05);}
.sec01 .programs .box .text {position: relative; z-index: 5;}
.sec01 .programs .box b {display: block; font-size: 16px; font-weight: 600; line-height: 1.4em; color: rgba(255,255,255,0.4); margin-bottom: 3px;}
.sec01 .programs .box p {font-size: 18px; font-weight: 600; line-height: 1.5em; color: #fff;}
.sec01 .programs .box p span {font-size: 14px; font-weight: 400;}
.sec01 .programs .box .icon {position: relative; width: 10px; height: 10px; background: url('../img/main/btn_more_small.png') no-repeat center center; z-index: 5; transition: all 0.4s;}
.sec01 .programs .box a:hover .icon {transform: rotate(270deg);}

.sec02 {padding: 80px 0 100px;}
.sec02 .wrap {display: flex; margin: 0 -20px;}
.sec02 .wrap > div {padding: 0 20px;}
.sec02 .left-box {width: 62%;}
.sec02 .box {border-radius: 10px; overflow: hidden;}
.sec02 .box-title {background-repeat: no-repeat; background-position: center center; background-size: cover;}
.sec02 .left-box .box-title {background-image: url('../img/main/sec02_news_bg.jpg');}
.sec02 .partnership .box-title {background-image: url('../img/main/sec02_partnerships_bg.jpg');}
.sec02 .box-title a {display: flex; justify-content: space-between; align-items: center; padding: 26px 57px;}
.sec02 .box-title h3 {font-size: 26px; font-weight: 600; line-height: 1.5em; color: #fff;}
.sec02 .box-title .icon {width: 18px; height: 18px; background: url('../img/main/btn_more_large.png') no-repeat center center; transition: all 0.4s;}
.sec02 .box-title a:hover .icon {transform: rotate(270deg);}
.sec02 .news ol {padding: 25px 57px 39px; border: 1px solid #ddd; border-radius: 0 0 10px 10px;}
.sec02 .news ol li {padding: 20px 0;}
.sec02 .news ol li:not(:last-child) {border-bottom: 1px solid #ddd;}
.sec02 .news ol li a {display: flex; justify-content: space-between;}
.sec02 .news ol li .title {position: relative; font-size: 18px; line-height: 1.5em; color: #666; padding-left: 20px; transition: all 0.4s; height:calc(1.5em * 1 * 1); overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;}
.sec02 .news ol li a:hover .title {font-weight: 600; color: #003678;}
.sec02 .news ol li .title:before {position: absolute; top: 12px; left: 3px; content: ''; width: 4px; height: 4px; background: #003678;}
.sec02 .news ol li .date {font-size: 18px; line-height: 1.5em; color: #666; padding: 0 10px; margin-left: 20px;}
.sec02 .right-box {width: 38%;}
.sec02 .partnership {margin-bottom: 20px ;}
.sec02 .faq a {position: relative; width: 100%; height: 385px; transition: all 0.4s;}
.sec02 .faq .img-box {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('../img/main/sec02_faq_bg.jpg') no-repeat center center/cover; transition: all 0.6s; z-index: -1;}
.sec02 .faq a:hover .img-box {transform: scale(1.08);}
.sec02 .faq .text-box {position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 60px 60px 60px 50px; z-index: 2;}
.sec02 .faq .icon {width: 66px; height: 60px; background: url('../img/main/sec02_faq_icon.png') no-repeat right top; margin: 0 0 0 auto;}
.sec02 .faq .box-title h3 {font-size: 28px;}
.sec02 .faq .more-box {position: relative; width: 165px; line-height: 45px; font-size: 16px; font-weight: 600; color: #fff; background: #003678; padding: 0 20px; border-radius: 5px; margin-top: 17px;}
.sec02 .faq .more-box:after {position: absolute; top: 50%; right: 20px; margin-top: -6px; content: ''; width: 12px; height: 12px; background: url('../img/main/btn_more_small.png') no-repeat right center; transition: all 0.4s;}
.sec02 .faq a:hover .more-box:after {transform: rotate(270deg);}

.sec03 {background: url('../img/main/sec03_bg.jpg') no-repeat center center/cover; padding: 120px 0;}
.sec03 .wrap {display: flex; margin: 0 -10px;}
.sec03 .box {width: 25%; padding: 0 10px;}
.sec03 .box a {border-radius: 8px; overflow: hidden;}
.sec03 .box .logo-box {height: 120px; align-content: center; text-align: center; background: #fff; padding: 5px;}
.sec03 .box .text-box {height: 80px ; font-size: 16px; font-weight: 600; line-height: 1.37em; color: #fff; align-content: center; text-align: center; background: rgba(255,255,255,0.2); backdrop-filter: blur(5px); padding: 5px; transition: all 0.4s;}  
.sec03 .box a:hover .text-box {background: #003678;}