@charset "utf-8";
/*通用*/
body, ol, ul, li, i, h1, h2, h3, h4, h5, h6, p, th, td, dl, dd, form, fieldset, legend, input, textarea, select, button { margin: 0; padding: 0; }
img { border: 0; vertical-align: top }
ol, ul, li { list-style: none; }
iframe { border: none }
html { height: 100%; font-size: 16px; -webkit-text-size-adjust: none; -webkit-font-smoothing: antialiased; background-color: #ffffff; }
body { height: 100%; font: 400 1em/1.8 'Microsoft YaHei','微软雅黑','\5FAE\8F6F\96C5\9ED1'; }
a { color: #212121; text-decoration: none }
a:hover { color: #c00 }
em { font-style: normal; }
h1, h2, h3, h4, h5 { font-size: 100%; font-weight: normal }



.w-icon { display: inline-block; width: 250px; height: 69px; background-image: url(ico-wpo-w.png); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; filter: brightness(100%); }

.w-icon-wpo { display: inline-block; width: 230px; height: 69px; background-image: url(ico-wpo-w.png); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; filter: brightness(100%); }
.w-icon-wpc { display: inline-block; width: 230px; height: 69px; background-image: url(ico-wpc-w.png); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; filter: brightness(100%); }

.b-icon-wpo { display: inline-block; width: 230px; height: 69px; background-image: url(ico-wpo-b.png); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; filter: brightness(100%); }
.b-icon-wpc { display: inline-block; width: 230px; height: 69px; background-image: url(ico-wpc-b.png); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; filter: brightness(100%); }


.w-icon-b { display: inline-block; width: 450px; height: 80px; background-image: url(ico-b2.png); background-size: 386px 69px; background-repeat: no-repeat; background-position: 0px center; }


.w-1860 { width: 1860px; }
.w-1680 { width: 1680px; }
.w-1550 { width: 1550px;   }

.w-1250 { width: 1250px;  }
.w-700 { width: 700px; }

.h-99 { height: 99px; overflow-y: hidden }
.h-550 { height: 950px; overflow-y: hidden }
.h-200 { height: 200px; }
.cn-55 { height: 80px; line-height: 80px; font-size: 55px; font-weight: 550; font-family: 'Microsoft YaHei','微软雅黑' }
.cn-36 { height: 50px; line-height: 50px; font-size: 36px; font-weight: 100; font-family: 'Microsoft YaHei','微软雅黑' }


.color-w { color: #ffffff }

.b-b { background-color: #ffffff }

.r-20-right { border-radius: 0px 0px 20px 0px; }
.r-30-right { border-radius: 0px 0px 30px 0px; }

.r-20-left { border-radius: 0px 0px 0px 20px; }
.r-30-left { border-radius: 0px 0px 0px 30px; }

.p-20 { padding: 20px; }

.p-top-90 { padding-top: 90px; }
.p-top-66 { padding-top: 66px; }
.p-top-45 { padding-top: 45px; }

.f-w-550 { font-weight: 500; }

.f-s-18 { font-size: 18px; }
.f-s-22 { font-size: 22px; }


.f-left { float: left }
.t-left { text-align: left }
.m-b-50 { margin-bottom: 50px }



/*顶部及导航*/
.top { width: 100%; height: 828px; overflow: hidden; text-align: center; position: relative; background-image: url(bg.jpg); background-size: 100% 100%; background-repeat: no-repeat; background-position: top top; transition: background-image 1.5s ease-in-out; /* 背景图片渐变效果 */ }

.top .p { margin: auto; float: none; z-index: 10; }
.top .p .top-left { float: left; padding-top: 15px; }
.top .p .top-right { float: right; width: calc(1550px - 508px); text-align: right; }
.top .p .top-right p a { min-width: 60px; text-align: center; padding-left: 16px; padding-right: 16px; display: inline-block; font-size: 21px; color: #f3edcb; background-color: #2285d800; line-height: 88px; transition: color 0.9s ease,background-color 0.9s ease; font-family: 'Microsoft YaHei','微软雅黑'; }
.top .p .top-right p a:hover {  color: #ffffff; background-color: #0061b2cc; transition: color 0.9s ease,background-color 0.9s ease; }
.top .p .top-right p .cn { padding-left: 12px; padding-right: 12px; color: #bcb06d; background-color: #ffffff00; transition: all 0.9s ease; }
.top .p .top-right p .en { padding-left: 12px; padding-right: 12px; color: #bcb06d; background-color: #ffffff00; transition: all 0.9s ease; }
.top .p .top-right p .cn:hover { color: #d50000; background-color: #ffffff00; transition: all 0.9s ease; }
.top .p .top-right p .en:hover { color: #002f7b; background-color: #ffffff00; transition: all 0.9s ease; }

.top-p { width: 100%; height: 160px; overflow: hidden; text-align: center; position: relative; }
.top-p .p { margin: auto; float: none; z-index: 10; }
.top-p .p .top-left { float: left; width: 508px; padding-top: 15px; }
.top-p .p .top-right { float: right; text-align: center; }
    .top-p .p .top-right p a { color: #002f7b; min-width: 60px; text-align: center; padding-left: 16px; padding-right: 16px; display: inline-block; font-size: 21px; background-color: #2285d800; line-height: 88px; transition: color 0.9s ease,background-color 0.9s ease; font-family: 'Microsoft YaHei','微软雅黑'; }
.top-p .p .top-right p a:hover, .top-p .p .top-right p .cho { color: #ffffff; background-color: #002f7b; transition: color 0.9s ease,background-color 0.9s ease; }
.top-p .p .top-right p .cn { color: #bcb06d; background-color: #ffffff00; transition: all 0.9s ease; }
.top-p .p .top-right p .en { color: #bcb06d; background-color: #ffffff00; transition: all 0.9s ease; }
    .top-p .p .top-right p .cn:hover { color: #002f7b; background-color: #a2000000; transition: all 0.9s ease; }
.top-p .p .top-right p .en:hover { color: #a70000; background-color: #00216400; transition: all 0.9s ease; }
/*.top-p .p .top-right p .lang { color: #bcb06d; background-color: #ffffff00; transition: all 0.9s ease; }
.top-p .p .top-right p .lang:hover { color: #ffffff; background-color: #00216400; transition: all 0.9s ease; }*/


/*底部及版权*/
.bot { clear: both; display: inline-block; width: 100%; text-align: center; background-color: #002f7b; color: #796651; padding-bottom: 25px; padding-top: 25px; }
.bot ul { margin: auto; float: none; z-index: 10; width: 1550px; display: inline-block; }
.bot ul li { display: inline-block; width: calc(100% / 7); float: left }
.bot ul a { display: inline-block; width: 80%; float: left; line-height: 22px; padding-bottom:15px;  text-align: left; font-size: 18px; color: #ffffff; transition: all 0.9s ease; }
.bot ul a:hover { color: #cbab89; transition: all 0.9s ease; }
.bot ul a:nth-child(1) { color: #ffffff; font-weight:bold; }


.copyright { clear: both; display: inline-block; width: 100%; text-align: center; background-color: #002765; color: #b0a79d; }
.copyright ul { margin: auto; float: none; z-index: 10; width: 1550px; padding: 20px; display: inline-block; }
.copyright a { color: #b0a79d; transition: all 0.9s ease; cursor: pointer }
.copyright a:hover { color: #ffe553; transition: all 0.9s ease; }


.b-a .con .rigt ul li .flv { text-align: left; padding-left: 66px; padding-top: 60px; }
.b-a .con .rigt ul li .flv li { display: block; font-weight: 550; color: #ffffff; }
.b-a .con .rigt ul li .flv li:nth-child(1) { font-size: 55px; }
.b-a .con .rigt ul li .flv li:nth-child(2) { font-size: 30px; font-weight: 300; margin-top: 35px; }
.b-a .con .rigt ul li .flv li:nth-child(3) { font-size: 35px; font-weight: 500; margin-top: 15px; }
.b-a .con .rigt .rigt-tit-txt { font-weight: normal; color: #808080; font-size: 20px; line-height:35px; text-align: left; padding: 16px; padding-left: 66px; padding-right: 218px; }


.bot-go { width: 100%; position: relative; margin-bottom: 25px; }
.bot-go ul { min-width: 1366px; margin: auto; float: none; z-index: 10; position: relative; display: block; text-align: right }
.bot-go ul li:nth-child(1) { height: 1px; background-color: darkblue; }
.bot-go ul li:nth-child(2) a { padding: 10px; font-size: 18px; display: inline-block; }

.by { clear: both; width: 100%; height: 720px; overflow: hidden; text-align: center; z-index: 999; position: relative; background-image: url(bot-bg.jpg); background-size: 100% 728px; background-repeat: no-repeat; background-position: top top; }
.by .con { width: 1550px; margin: auto; float: none; z-index: 10; position: relative; display: block; }
.by .mask { background-color: #ffffff; position: absolute; display: block; height: 128px; width: 88%; }
.by .con .icons { position: absolute; right: 55px; top: 360px; width: 400px; height: 40px; display: block; }
.by .con .icons a { color: #ffffff; margin: 5px; transition: all 0.9s ease; }
.by .con .icons a i { font-size: 35px }
.by .con .icons a:hover { color: #b5ff43; transition: all 0.9s ease; }


.center { margin: auto; float: none; z-index: 10; position: relative; display: block; }

/*屏幕超宽 2K 4K 处理*/
@media screen and (min-width: 2000px) {
    .b-a .con .rigt ul li .flv { padding-top: 120px; }
}


/*渐变动画背景*/
@keyframes t1_Left {
    from { background-position: 50px 0px; filter: brightness(0%) }
    to { background-position: 0px 0px; filter: brightness(100%) }
}

.EffectBg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0; }
.Section__cap { width: 100vw; height: 100px; border-radius: 0 50px 0 0; position: absolute; right: 50px; bottom: 0px; background-color: #fff; }

@keyframes slide-bg {
    0% { left: 0; }
    100% { left: -200%; }
}

.EffectBg__slider { position: absolute; top: 0; left: 0; width: 400%; height: 100%; animation: 8s linear 0s infinite running slide-bg; &::before, &::after
{ content: ''; width: 50%; height: 100%; position: absolute; top: 0; display: block; background: linear-gradient(90deg, rgba(25,166,173,1) 15%, rgba(0,111,255,1) 50%, rgba(25,166,173,1) 87%); }
&::before { left: 0; }
&::after { left: 50%; }
}