/*
 *  style.css by 453883682@qq.com
 */
 /* loading */
 .loading{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 10; overflow: hidden; pointer-events: none;}
 .loading svg{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: block; width: 200%; height: 200%; shape-rendering: geometricPrecision;}

 /* banner */
.banner{  position: relative; height: 100vh; background-color: #FFFFFF;}
.banner::before{ display: block; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(to bottom,rgba(0,0,0,0.5) 0%, rgba(0,0,0,0));}
.banner video{ display: block; width: 100%; height: 100%; object-fit: cover;}
.mouse{ position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); width: 37px; height: 52px; border: 3px solid #FFFFFF; border-radius: 18px;}
.mouse span{ display: block; position: absolute; left: 0; right: 0; top: 10%; width: 5px; height: 12px; margin: 0 auto; background: #ee7700; border-radius: 2px; animation: aniMouse 1.4s linear infinite;}
.ban-text{ position: absolute; left: 0; right: 0; bottom: 15%; z-index: 1;}
.ban-text .cn{ color: #ffb96e;}
.ban-text .en{ line-height: 1.2; font-family: 'BaiJamjuree-SemiBold'; font-weight: normal;}

.index-type{ position: relative; line-height: 1.1; padding-left: 26px; margin-bottom: .2rem; text-transform: uppercase; font-family: 'BaiJamjuree-SemiBold';}
.index-type::before{ display: block; content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; border-radius: 50%; background: var(--main-color);}
.index-type.color-f::before{ background-color: #FFFFFF; opacity: .5;}
.index-title{ line-height: 1.1; margin-bottom: .2rem; font-family: 'OPPOSans-B'; font-weight: normal;}
.index-more{ display: block; width: fit-content; padding: .1rem 0; border-bottom: 1px solid #FFFFFF;}
.index-more i{ display: inline-block; vertical-align: middle; margin-left: 5px; transform: rotate(-45deg); transition: all .3s;}
.index-more:hover i{ transform: rotate(0);}
.index-more.main-color{ border-bottom-color: var(--main-color);}

/* index-suning */
.box1-bg{ position: relative; padding: 1.5rem 0; background-color: #FFFFFF; overflow: hidden;}
.box1-text{ width: 55%; max-width: 700px;}
.box1-des{ margin: .4rem 0; text-align: justify;}
.box1-des p{ opacity: .6;}
.box1-line{ position: relative; display: block; width: 100%; height: 3px; margin: .6rem 0; background: #C7C7C7;}
.box1-line::before{ display: block; content: ""; position: absolute; left: 30%; top: 50%; margin-top: -7px; width: 14px; height: 14px; background-color: var(--main-color); border-radius: 50%;}
.box1-line::after{ display: block; content: ""; position: absolute; left: 0; top: 0; width: 30%; height: 100%; background-color: var(--main-color);}
.box1-type{ position: relative; margin: .4rem 0; opacity: .6;}
.box1-list{ justify-content: space-between; margin-top: 1rem;}
.box1-num{ position: relative; color: var(--main-color);}
.box1-num strong{ line-height: 1; font-family: 'BaiJamjuree-SemiBold'; font-weight: bold;}
.box1-num span{ vertical-align: text-bottom;}
.box1-num sup{ position: absolute; left: 100%; top: 0;}
.box1-video{ position: absolute; right: 0; top: 0; width: 42%; max-width: 815px; height: 100%; z-index: 1;}
.box1-video-bg{ position: absolute; right: 0; top: 0; width: 100%; height: 100%; background: url(../images/box1-video.png) left center no-repeat; background-size: cover; z-index: -1;}
.box1-video-title{ position: absolute; right: 12%; top: 10%; bottom: 10%; height: 80%;}
.box1-video-title img{ height: 100%;}
.box1-video-play{ position: absolute; left: 50%; top: 40%; transform: translateY(-50%); width: 1rem; height: 1rem; cursor: pointer; z-index: 2;}
.box1-video-play span{ display: block; width: 100%; height: 100%; border-radius: 50%; background: url(../images/icon-paly.png) center center #FFFFFF no-repeat; background-size: contain;}
.box1-video-play::before,
.box1-video-play::after{ display: block; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; background-color: rgba(255, 255, 255, 0.3); z-index: -1; animation: aniLight 1s linear infinite;}
.box1-video-play::after{ animation-delay: 0.3s;}

/* index-Industry */
.box2-bg{ position: relative; background: #F4F7FC; z-index: 1;}
.box2-img li{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; opacity: 0; visibility: hidden; overflow: hidden; transition: all .6s linear;}
.box2-img li img{ display: block; width: 100%; height: 100%; object-fit: cover;}
.box2-img li.active{ opacity: 1; visibility: visible; transition: all .3s linear;}

.box2-box{ align-items: flex-start;}
.box2-left{ width: 50%; padding: 1.5rem 0; position: sticky; position: -webkit-sticky; top: 0;}
.box2-des{ max-width: 426px; margin: 0.6rem 0 1rem;}
.box2-des p{ opacity: .7;}
.box2-right{ width: 50%;}
.box2-list{ height: 100%; border-right: 1px solid rgba(255, 255, 255, 0.2);}
.box2-list li{ width: 50%; height: 50%; height: 580px; border-left: 1px solid rgba(255, 255, 255, 0.2); border-top: 1px solid rgba(255, 255, 255, 0.2);}
.box2-link{ position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; height: 100%; padding: 0 .34rem;}
.box2-icon{ position: relative; width: 40px; height: 40px; border-radius: 50%; margin: 0 0 .1rem; transition: all .3s;}
.box2-icon::before{ display: block; content: ""; position: absolute; left: -.34rem; top: 50%; margin-top: -7px; margin-left: -7px; width: 14px; height: 14px; background-color: var(--main-color); border-radius: 50%; transform: scale(0); transition: all .3s;}
.box2-icon img{ max-width: 40px; max-height: 40px;}
.box2-icon img.active{ display: none;}
.box2-title{ margin-bottom: .3rem; font-weight: normal;}
.box2-info{ height: 0; interpolate-size: allow-keywords; margin-bottom: .3rem; font-family: 'OPPOSans-R'; transition: all .3s;}
.box2-text{ height: 0; interpolate-size: allow-keywords; opacity: .6; transition: all .3s linear;}
.box2-more{ position: absolute; right: 0; bottom: 0; width: 120px; height: 120px; padding: 20px 0 0 20px; border-radius: 120px 0 0 0; color: #FFFFFF; background-color: var(--main-color); transform: scale(0); transform-origin: right bottom; transition: all .3s;}

.box2-list li.active .box2-icon{ width: 65px; height: 65px; margin: 0 0 .3rem; background-color: #FFFFFF;}
.box2-list li.active .box2-icon::before{ transform: scale(1);}
.box2-list li.active .box2-icon .default{ display: none;}
.box2-list li.active .box2-icon .active{ display: block;}
.box2-list li.active .box2-info{ height: auto;}
.box2-list li.active .box2-text{ height: auto; margin-bottom: 1rem;}
.box2-list li.active .box2-more{ transform: scale(1);}

.box2-bot{ position: relative; width: 100%; height: 198px; margin-top: -0; height: 0; background: url(../images/box3-top.png) center bottom no-repeat; pointer-events: none; z-index: 1; background-size: 100% 100%;}

/* index-news */
.box3-bg{ position: relative; padding-bottom: 1.3rem; background-color: #F4F7FC; overflow: hidden; z-index: 1;}
.box3-top{ margin-bottom: .4rem;}
.box3-title .index-title{ margin-bottom: 0;}
.box3-sort li{ margin-left: .28rem;}
.box3-sort li:not(:last-child) a,
.box3-sort li:not(:last-child) span{ display: block; color: #000000; line-height: 36px; padding: 0 .25rem; border: 1px solid #CDCDCD; border-radius: 20px; transition: all .3s; cursor: pointer;}
.box3-sort li.active a,
.box3-sort li.active span,
.box3-sort li:not(:last-child) a:hover,
.box3-sort li:not(:last-child) span:hover{ border-color: var(--main-color); background-color: var(--main-color); color: #FFFFFF;}
.box3-sort li:last-child a{ display: block; color: var(--main-color); padding-bottom: .1rem; border-bottom: 1px solid var(--main-color);}
.box3-sort li:last-child a i{ display: inline-block; vertical-align: middle; transform: rotate(-45deg); margin-left: 4px; transition: all .3s;}
.box3-sort li:last-child a:hover i{ transform: rotate(0);}

.box3-left{ flex-shrink: 0; width: 46%;}
.box3-line{ width: 1px; margin-left: 4%; background-color: #000000; opacity: .2;}
.box3-right{ flex: auto; overflow: hidden;}
.box3-item{ display: none;}
.box3-link{ display: block;}
.box3-left .box3-img{ padding-bottom: 42.48%; border-radius: .2rem;}
.box3-type{ width: fit-content; min-width: 126px; line-height: 44px; margin: .3rem 0 .2rem; background: #E7EAF1; border-radius: .22rem; text-align: center;}
.box3-name{ line-height: 1.5; margin-bottom: .5rem; -webkit-line-clamp: 2; transition: all .3s;}
.box3-time span{ font-family: 'BaiJamjuree-SemiBold';}
.box3-link:hover .box3-img .imgBg{ transform: scale(1.05);}
.box3-link:hover .box3-name{ color: var(--main-color);}
.box3-link:hover .index-more i{ transform: rotate(0);}

.box3-list li + li{ border-top: 1px solid rgba(0, 0, 0, 0.2);}
.box3-list li:first-child .box3-link{ padding-top: 0;}
.box3-list li:last-child .box3-link{ padding-bottom: 0;}
.box3-list .box3-link{ display: flex; flex-direction: row-reverse; padding: .5rem 0; padding-left: .36rem;}
.box3-list .box3-img{ flex-shrink: 0; width: 218px; border-radius: .2rem; margin-left: .4rem; overflow: hidden;}
.box3-list .box3-img .imgBg{ padding-bottom: 100%; transition: all 1s;}
.box3-list .box3-text{ flex: auto; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;}
.box3-list .box3-type{ margin-top: 0;}
.box3-list .box3-name{ line-height: 1.6; margin-bottom: 0;}
.box3-list .box3-time{ margin-top: auto;}


.box4-bg{ position: relative; padding-bottom: 1.5rem; background-color: #F4F7FC; overflow: hidden; z-index: 1;}
.box4-bg .box3-sort li{ margin-left: .2rem;}
.box4-list{ gap: .19rem;}
.box4-list li{ position: relative; flex: 0 0 25%; border-radius: .2rem; overflow: hidden; transition: all .3s linear;}
.box4-list .box4-img .imgBg{ height: 605px;}
.box4-mask{ position: absolute; left: 0; bottom: 0; width: 100%; height: 40%; background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);}
.box4-text{ position: absolute; left: .5rem; bottom: .3rem; width: calc(100% - 2.2rem); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .3s;}
.box4-list li.active{ flex: 0 0 75%;}
.box4-list li.active .box4-text{ opacity: 1; visibility: visible; transform: translateY(0); transition: all .3s linear .2s;}
.box4-list li.active .box2-more{ transform: scale(1); transition: all .3s linear .3s;}

.box5-bg{ position: relative; padding: 1.6rem 0 3rem; background: url(../images/box5-img.png) center center no-repeat; background-size: cover;}
.box5-text{ max-width: 695px;}
.box5-title{ margin-top: 1.2rem; margin-bottom: .4rem; font-weight: normal;}
.box5-des{ line-height: 1.7; text-align: justify; margin-bottom: .5rem;}
.box5-btn{ gap: .2rem;}
.box5-btn a{ display: block; min-width: 210px; line-height: 38px; padding: .15rem; color: #FFFFFF; border-radius: .34rem; background-color: var(--main-color); text-align: center; transition: all .3s;}
.box5-btn a i{ display: inline-block; vertical-align: middle; margin-left: .26rem; transition: all .3s;}
.box5-btn a:hover{ box-shadow: 0 0 .2rem rgba(255, 255, 255, 0.2);}
.box5-btn a:hover i{ transform: rotate(-45deg);}
.box5-bot{ position: absolute; left: 0; bottom: 0; width: 100%; height: 96px; height: 0; background: url(../images/box5-bot.png) center bottom no-repeat; pointer-events: none; z-index: 1; background-size: 100% 100%;}

.box6-bg{ position: relative; margin-top: -1px; margin-bottom: -60px; background: #FFFFFF; overflow: hidden;}
.box6-join{ padding: 2.5rem 0; opacity: 0; transform: scale(0); text-align: center;}
.box6-join img{ max-width: 100%; height: auto;}

.box6-box{ position: relative; margin: 1.5rem 0 0; margin-top: 2rem; z-index: 1;}
.box6-title{ position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-75%); z-index: -1;}
.box6-title img{ max-width: 100%; height: auto;}
.box6-img{ position: relative; z-index: 1;}
.box6-img::before{ display: block; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--main-color); border-radius: 50%; overflow: hidden; z-index: -1;}
.box6-img .imgBg{ padding-bottom: 100%; border-radius: 50%; overflow: hidden;}
.box6-img:hover::before{ transform: translate(0,0);}
.box6-left{ width: 47%;}
.box6-left .box6-img{ max-width: 366px;}
.box6-left .box6-img::before{ transform: translate(-10px,-20px);}
.box6-left .box6-text{ margin-top: 1.7rem;}

.box6-right{ position: relative; width: 63%; margin-right: -10%;}
.box6-right .box6-img{ max-width: 878px;}
.box6-right .box6-img::before{ transform: translate(20px,60px);}

.join-circle{ position: absolute; left: -60px; top: 50%; width: 152px; height: 152px; border-radius: 50%; background: var(--main-color); z-index: 1;}
.join-circle::before{ display: block; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../images/join-circle.png) center center no-repeat; background-size: 100%; height: 100%; animation: aniCircle 10s linear infinite;}

.box6-circle{ position: absolute; border-radius: 50%; background-color: var(--main-color); animation: aniUp 1s linear infinite;}
.box6-circle1{ left: 30%; top: 20%; width: 50px; height: 50px; animation-duration: 2s;}
.box6-circle2{ left: 40%; top: -10%; width: 204px; height: 204px; animation-duration: 3s;}
.box6-circle3{ left: 110%; top: -10%; width: 52px; height: 52px; animation-duration: 2.5s;}

.box6-bot{ position: absolute; left: 0; bottom: 60px; width: 100%; height: 96px; height: 0; background: url(../images/box6-bot.png) center bottom no-repeat; pointer-events: none; z-index: 1; background-size: 100% 100%;}

.box7-bg{ position: relative; background-color: #F4F7FC; padding-bottom: 96px; z-index: 2; overflow: hidden;}
.box7-title{ margin: .6rem 0 .6rem; font-weight: normal;}

.box7-swiper .swiper-slide{ position: relative; width: 90%; max-width: 1030px;}
.box7-swiper .box7-img{ padding-bottom: 58.74%; border-radius: .2rem;}
.box7-swiper .box7-text{ position: absolute; left: 6%; top: 15%;}
.box7-swiper .box7-name{ font-weight: normal;}
.box7-swiper .box7-en{ opacity: .16; text-transform: uppercase; font-family: 'BaiJamjuree-SemiBold';}
.box7-page{ position: relative; max-width: 700px; height: 3px; background-color: #C7C7C7; margin: 1rem auto;}
.box7-page span{ position: relative; display: block; height: 100%; background-color: var(--main-color);}
.box7-page span::before{ display: block; content: ""; position: absolute; left: 100%; top: 50%; margin-top: -7px; width: 14px; height: 14px; border-radius: 50%; background-color: var(--main-color);}

.box7-bot{ position: absolute; left: 0; bottom: 0; width: 100%; height: 96px; height: 0; background: url(../images/box7-bot.png) center bottom no-repeat; pointer-events: none; z-index: 1; background-size: 100% 100%;}