@charset "utf-8";

/* frame */
a { transition:all 0.5s;}
body{min-width: 1400px;font-weight:400;background: #fff;}
.clear{clear: both;}
#content{zoom: 1;width: 100%;}
.row{width: 1400px; margin: auto; position: relative;}
.row:after { content:""; clear:both; display:block; overflow:hidden;}

#header { display: none;}
#headerMedia{ position:relative; width:100%; height: 760px; background:#f8f8f8 url(../img/banner.jpg) no-repeat center center; background-size: cover; }
#headerMedia .logo{display:block;width:300px;height:50px;float: left;overflow:visible;margin: 41px 0 100px;}
#headerMedia .logo img { height:100%; width:auto;}
#headerMedia .links {height: 36px;position: absolute;top: 48px;right: 0;}
#headerMedia .links a { height:36px;background-color: rgb(0 0 0 / 34%);border-radius: 18px;line-height: 36px;text-align: center;color: #fff;font-size: 16px; float:left; padding:0 1.5em; box-shadow: 0 5px 5px rgb(0 0 0 / 10%); margin-left:10px;}
#headerMedia .links a:hover {background: #ccc; color: #22468c}

#headerMedia .con { position: absolute; left: 0; top: 290px; line-height: 1.5; color: #fff; }
#headerMedia .con h1 { font-size: 80px; text-shadow: 0px 4px 0 rgba(0, 0, 0, 0.25); font-weight: bold; }
#headerMedia .con h3 { font-size: 18px; }
#headerMedia .pics { position: absolute; right: -100px; top: 197px; width: 719px; height: 540px; }
#headerMedia .p-01 { position: absolute; left: 193px; top: 0; }
#headerMedia .p-01::before { display: block; content: ''; animation: rotate 10s linear infinite; width: 166px; height: 166px; background: url(../img/pic-01.png) no-repeat; }
#headerMedia .p-02 { position: absolute; right: 0; bottom: 0; width: 719px; height: 435px; background: url(../img/pic-02.png) no-repeat; }
#headerMedia .p-03 { position: absolute; right: 98px; bottom: 23px; width: 222px; height: 135px; background: url(../img/pic-03.png) no-repeat; }
#headerMedia .p-04 { position: absolute; z-index: 1; right: 160px; top: 4px; width: 89px; height: 184px; background: url(../img/pic-04.png) no-repeat; }
#headerMedia .p-05 { position: absolute; left: 157px; top: 145px; width: 412px; height: 213px; background: url(../img/pic-05.png) no-repeat; }

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


.featuresList { padding: 50px 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; }
.featuresList li { position: relative; top: 0; transition: all ease 0.5s; display: flex; gap: 80px; width: 685px; padding: 20px 40px; box-sizing: border-box; border: 1px solid #D9EFFB; border-radius: 20px; background: linear-gradient(180deg, #f5fafd 0%, #fff 45%, #fff 100%); overflow:hidden; }
.featuresList li:hover { top: -10px; box-shadow: 0px 4px 0 rgba(29, 50, 89, 0.1); }
.featuresList li .bg { position: absolute; right: 0; bottom: 0; width: 354px; height: 208px; background: url(../img/bg-01.png) no-repeat; }
.featuresList .pic { position: relative; margin-top: 30px; width: 180px; height: 153px; background-repeat: no-repeat; background-size: contain; background-position: center center; }
.featuresList .con { flex: 1 0 0%; position: relative; padding: 25px 0 0; }
.featuresList .title { font-size: 32px; font-weight: bold; color: #2f508c; line-height: 42px; }
.featuresList .intro { position: relative; margin-top: 17px; font-size: 16px; color: #666; line-height: 30px; text-align: justify; padding-left: 2em; }
.featuresList .intro .fa { position: absolute; top: 8px; left: 0; width: 16px; height: 16px; font-size: 7px; vertical-align: middle; background: #B4DAF6; color: #fff; line-height: 16px; text-align: center; border-radius: 50%; margin-right: 16px; }

.featuresList .li1 { width: 100%; gap: 70px; padding-right: 50px; }
.featuresList .li1 .pic { margin: 0; width: 650px; height: 391px; background-image: url(../img/pic-06.png); }
.featuresList .li1 .con { padding-top: 76px; }

.featuresList .li2 .pic { background-image: url(../img/pic-07.png); }
.featuresList .li3 .pic { background-image: url(../img/pic-08.png); }
.featuresList .li4 .pic { background-image: url(../img/pic-09.png); }
.featuresList .li5 .pic { background-image: url(../img/pic-10.png); }
.featuresList .li6 .pic { background-image: url(../img/pic-11.png); }
.featuresList .li7 .pic { background-image: url(../img/pic-12.png); }