@import "common.css";

/* 首页轮播 */
.banner{width: 100%; height: 100vh; margin: 0 auto;}
.banner .video-cover{width: 100%; height: 100%; object-fit: cover;}
.banner .video{top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; background-color: transparent; z-index: 1;}
.banner .video-mask{width: 100%; height: 100%; background:url(https://nurmai.oss-cn-hangzhou.aliyuncs.com/video/video-mask.png) repeat top left rgba(0, 0, 0, .3); z-index: 2;}
.banner .video-text{width: 100%; z-index: 3; left: 50%; transform: translateX(-50%);}
.banner .video-text p{font-size: 24px;}
.banner .video-text b{font-size: 68px;}
.banner .video-text a{width: 190px;font-size: 18px; line-height: 58px;border-radius: 6px; display: inline-block; color: #FFFFFF;}
.banner .message{bottom: 50px; z-index: 3; left: 50%; transform: translateX(-50%);}
.banner .message i{font-size: 25px;animation: jump 1.5s linear infinite;}

/* 数据统计 */
.statistics{padding: 60px 158px;}
.statistics li h2{font-size: 45px; line-height: 45px;}
.statistics li h3{font-size: 18px;}

/* 关于我们 - 介绍 */
.about .company dt{width: 430px; height: 300px;}
.about .company dt .cent{width: 198px; height: 198px;}
.about .company dt .cent:before,.about .company dt .cent:after{width: 98px; height: 98px; border-radius: 50%; position: absolute; content: '';}
.about .company dt .cent:before{background:rgba(22,108,255,0.08); left: 0; transform: translateX(-50%);animation: cent-before 15s linear infinite;}
.about .company dt .cent:after{background:rgba(98,218,158,0.08); right: 0; transform: translateX(50%);animation: cent-after 15s linear infinite;}
.about .company dt .cent .info{z-index: 1;}
.about .company dt .cent .info h2{font-size: 22px;}
.about .company dt .cent .info:before{width: 258px; height: 258px; background: url("https://nurmai.oss-cn-hangzhou.aliyuncs.com/index/about-border.png") no-repeat; background-size: 100% 100%; position: absolute; content: ''; animation:borderFrames 10s linear 0s infinite normal both running;}
.about .company dt .trans{width: 208px; height: 208px; z-index: 3; animation: trans 15s ease infinite;}
.about .company dt .trans .cri{width: 98px; height: 98px; border-radius: 50%;}
.about .company dt .trans .cri.left-cri{left: -108px; background:#1668FF; animation: left-cri 15s ease infinite;}
.about .company dt .trans .cri.right-cri{right: -108px; background:#5ED698; animation: left-cri 15s ease infinite;}
@keyframes borderFrames{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg)}
}
@-webkit-keyframes cent-before {
    0%   {transform: translateX(-58%);}
    20%  {transform: translateX(-58%);}
    25%  {transform: translateX(0);}
    30%  {transform: translateX(0);}
    35%  {transform: translateX(-58%);}
    70%  {transform: translateX(-58%);}
    75%  {transform: translateX(0);}
    80%  {transform: translateX(0);}
    85%  {transform: translateX(-58%);}
    100% {transform: translateX(-58%);}
}
@-webkit-keyframes cent-after {
    0%   {transform: translateX(58%);}
    20%  {transform: translateX(58%);}
    25%  {transform: translateX(0);}
    30%  {transform: translateX(0);}
    35%  {transform: translateX(58%);}
    70%  {transform: translateX(58%);}
    75%  {transform: translateX(0);}
    80%  {transform: translateX(0);}
    85%  {transform: translateX(58%);}
    100% {transform: translateX(58%);}
}
@-webkit-keyframes trans {
    0%   {transform:rotate(0deg);}
    20%  {transform:rotate(0deg);}
    30%  {transform:rotate(180deg);}
    70%  {transform:rotate(180deg);}
    80%  {transform:rotate(360deg);}
    100% {transform:rotate(360deg);}
}
@-webkit-keyframes left-cri {
    0%   {transform:rotate(0deg);}
    20%  {transform:rotate(0deg);}
    30%  {transform:rotate(-180deg);}
    70%  {transform:rotate(-180deg);}
    80%  {transform:rotate(-360deg);}
    100% {transform:rotate(-360deg);}
}
.about .company dd{width: calc(100% - 500px);}
.about .company dd .title{z-index: 2;}
.about .company dd .title h2{font-size: 30px;}
.about .company dd .title h3{font-size: 118px; color: rgba(22,108,255,0.03); line-height: 98px; left: 0; top: -2px; z-index: -1; }
.about .company dd .texts{line-height: 36px; font-size: 18px;}

/* 方案 */
.plan .plan-bg{width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0; transition: all .3s; opacity: 0;}
.plan .plan-bg.on{opacity: 1;}
.plan .plan-box{height: 370px; z-index: 1;}
.plan .plan-box .plan-left{width: 300px; height: 100%; padding: 15px; box-sizing: border-box; border-radius: 8px; background-color: #202124;}
.plan .plan-box .plan-left li{width: 100%; height: 70px; padding: 15px; box-sizing: border-box; border-radius: 4px; transition: all .3s;}
.plan .plan-box .plan-left li > *{color: hsla(0,0%,100%,.6);}
.plan .plan-box .plan-left li.on{background-color: #1668FF;}
.plan .plan-box .plan-left li.on > *{color: #FFFFFF;}
.plan .plan-box .plan-left li:not(:last-child){margin-bottom: 20px;}
.plan .plan-box .plan-left li b{width: 40px; height: 40px; font-size: 38px; font-weight: 600; line-height: 36px;}
.plan .plan-box .plan-left li .info{width: 158px; height: 40px; align-items: flex-start;}
.plan .plan-box .plan-left li .info h4{width: 100%; height: 18px;}
.plan .plan-box .plan-left li .info h4 i{width: 16px; height: 16px; font-size: 16px;}
.plan .plan-box .plan-left li i{width: 10px; height: 16px;}
.plan .plan-box .plan-right{width: calc(100% - 380px); height: 100%; position: relative; visibility: hidden;}
.plan .plan-box .plan-right dl{width: 100%; height: 100%; position: absolute; left: 0; top: 0; align-items: flex-start; transition: all .3s; opacity: 0;}
.plan .plan-box .plan-right dl h4{font-size: 25px; line-height: 25px; margin-top: 15px; transform: translateX(100px); opacity: 0;}
.plan .plan-box .plan-right dl h5{line-height: 36px; color: hsla(0,0%,100%,.6); transform: translateX(100px); opacity: 0; }
.plan .plan-box .plan-right dl ul{width: 100%; height: 68px; padding: 35px 0; border-bottom: 1px solid hsla(0,0%,100%,.06); transform: translateX(100px); opacity: 0;}
.plan .plan-box .plan-right dl ul li{height: 100%;}
.plan .plan-box .plan-right dl ul li i{width: 36px; height: 36px; font-size: 36px;}
.plan .plan-box .plan-right dl .more-button{transform: translateX(100px); opacity: 0;}
.plan .plan-box .plan-right dl .logos{width: 100%; height: 68px; transform: translateX(100px); opacity: 0; visibility: hidden;}
.plan .plan-box .plan-right dl .logos img{width: 148px; height: 100%;margin-right: 30px; background-color: #FFFFFF; border-radius: 4px;}
.plan .plan-box .plan-right dl .logos img:nth-child(5n){margin-right: 0;}
.plan .plan-box .plan-right dl.on{opacity: 1; visibility: visible;}
.plan .plan-box .plan-right dl.on h4{transform: translateX(0); transition-delay: 80ms; transition-duration: 300ms; opacity: 1;}
.plan .plan-box .plan-right dl.on h5{transform: translateX(0); transition-delay: 160ms; transition-duration: 300ms; opacity: 1;}
.plan .plan-box .plan-right dl.on ul{transform: translateX(0); transition-delay: 240ms; transition-duration: 300ms; opacity: 1;}
.plan .plan-box .plan-right dl.on .more-button{transform: translateX(0); transition-delay: 320ms; transition-duration: 300ms; opacity: 1;}

/* 新闻 */
.new ul{border-left: #F2F2F2 1px solid;}
.new ul li{width: calc(100% / 4); margin-top: 30px; padding:30px; border-right: #F2F2F2 1px solid;}
.new ul li:before{width: 0; height: 3px; background-color: #1668FF; position: absolute; bottom: 0; content: '';transition: all 0.4s ease;}
.new ul li em{font-size: 45px; line-height: 45px;}
.new ul li .image{width: 100%; height: 0; padding-bottom: 68%;}
.new ul li .image img{width: 100%;}
.new ul li h2{font-size: 20px; line-height: 20px;}
.new ul li p{font-size: 15px; line-height: 30px; height: 60px;}
.new ul li i{width: 50px; height: 50px;}
.new ul li:hover{box-shadow: 0 20px 20px rgba(0, 0, 0, 0.1);}
.new ul li:hover:before{width: 100%;}
.new ul li:hover h2,.new ul li:hover h2 a{color: #1668FF;}
.new ul li:hover .image img{transform: scale(1.08);}
.new ul li:hover i{background-color: #1668FF; color: #FFFFFF; transform: rotate(45deg);}

/* 响应式 */
@media (max-width: 1680px) {
    .statistics{padding: 60px 108px;}
}
@media (max-width: 1440px) {
    .statistics{padding: 60px 80px;}
    .plan .plan-box .plan-right{width: calc(100% - 360px);}
    .plan .plan-box .plan-right dl ul li i{font-size: 28px;}
    .new ul li{width: calc(100% / 3);}
    .new ul li:nth-child(4){display: none;}
    .new ul li p{font-size: 14px;}
}
@media (max-width: 1280px) {
    .statistics{padding: 60px 50px;}
    .about .company dd .texts{line-height: 36px; font-size: 15px;}
}