342 lines
14 KiB
CSS
Executable File
342 lines
14 KiB
CSS
Executable File
@charset "utf-8";
|
|
|
|
/* CSS Document */
|
|
@media screen and (min-width:960px){
|
|
.header-PC{display: block}
|
|
.header-M{display: none;}
|
|
}
|
|
@media screen and (max-width:959px){
|
|
.header-PC{display: none}
|
|
.header-M{display: block; height: 50px;}
|
|
}
|
|
.icon-country:before {
|
|
font-size: 1.8em;
|
|
}
|
|
.icon-menu:before {
|
|
font-size: 2em
|
|
}
|
|
.icon-close:before {
|
|
font-size: 1.8em;
|
|
}
|
|
|
|
/*搜索框字体颜色*/
|
|
-webkit-input-placeholder { /* WebKit browsers */
|
|
color: #999;
|
|
}
|
|
-moz-placeholder { /* Mozilla Firefox 4 to 18 */
|
|
color: #999;
|
|
}
|
|
-moz-placeholder { /* Mozilla Firefox 19+ */
|
|
color: #999;
|
|
}
|
|
-ms-input-placeholder { /* Internet Explorer 10+ */
|
|
color: #999;
|
|
}
|
|
/*PC端*/
|
|
.header-PC .top{height: 28px; background-color:#002855; color:#FFF;}
|
|
.header-PC .top-L{width:50%; text-align:left; font-size: 0.75em; line-height: 40px; float: left; position: relative;}
|
|
.header-PC .top-L .icon-arrow{
|
|
display: inline-block;
|
|
vertical-align: bottom; line-height:28px; font-size: 14px; margin-left:5px;transform:rotate(180deg);
|
|
-ms-transform:rotate(180deg); /* IE 9 */
|
|
-moz-transform:rotate(180deg); /* Firefox */
|
|
-webkit-transform:rotate(180deg); /* Safari 和 Chrome */
|
|
-o-transform:rotate(180deg);
|
|
cursor: pointer;
|
|
}
|
|
.header-PC .top-L .arrow{
|
|
transform:rotate(360deg);
|
|
-ms-transform:rotate(360deg); /* IE 9 */
|
|
-moz-transform:rotate(360deg); /* Firefox */
|
|
-webkit-transform:rotate(360deg); /* Safari 和 Chrome */
|
|
-o-transform:rotate(360deg);
|
|
vertical-align: bottom; line-height:28px; font-size: 14px; margin-left:5px;
|
|
}
|
|
.header-PC .top-R{width:50%; text-align: right; float: left; font-size: 1em;}
|
|
|
|
.header-PC .logo{width:16%; float: left; position:relative; height: 60px; left:0px; vertical-align:middle; line-height: 60px;}
|
|
.header-PC .logo img{vertical-align: middle;}
|
|
.header-PC .top-country{background-color:#002855; overflow: hidden; display: block; color:#FFF; padding:3% 0; border-top: 1px solid rgba(255,255,255,0.6);}
|
|
.header-PC .top-country li{width:15%; float: left; margin-right:6%;}
|
|
.header-PC .top-country li:last-child{margin-right:0px;}
|
|
.header-PC .top-country dt{font-size: 1.3em; line-height: 2em;}
|
|
.header-PC .top-country dd{width:100%; overflow: hidden;}
|
|
.header-PC .top-country .Left{font-size: 0.875em; line-height: 2em; float: left; text-align: left;}
|
|
.header-PC .top-country .Right{font-size: 0.875em; text-align: right; float: right}
|
|
.header-PC .top-country .Right a{color:#009fdf; border-bottom: 1px solid #009fdf; display: inline-block; line-height: 1.5em;}
|
|
.header-PC .nav .navfl{float:right; width:84%; text-align: right;}
|
|
.header-PC .nav-bg{background-color:#efefef; border-bottom: 1px solid rgba(0,0,0,0.5);}
|
|
/*原样式*/
|
|
.topnav{width:100%;padding:90px 0 104px 0;background:#002855;position:absolute;top:28px;left:0px;z-index:999;display:none;}
|
|
.w1440{max-width:1440px;min-width:320px;margin:0 auto;}
|
|
.nav{width:100%;height:60px;background-color: transparent;position:absolute; z-index: 99;}
|
|
.nav .top{position:absolute;left:24px;}
|
|
.nav .top .zg{font-size:16px;color:#002855;line-height:60px;}
|
|
.nav .top .zg i{display:inline-block;width:23px;height:22px;background:url(../images/china.png);vertical-align:middle;margin-right:6px; ;}
|
|
.navcon{width:990px;margin:0 auto}
|
|
|
|
/*.nav .logo{position:absolute;left:50%;top:19px;transform:translate(-34%,0%);z-index:999;}删除*/
|
|
.nav .navfl{float:left;}
|
|
.nav .navfl .navul{float:left; width:100%; }
|
|
.nav .navfl .navul li{display:inline-block;line-height:60px;}
|
|
@media screen and (min-width:1280px){
|
|
.nav .navfl .navul li{padding-left:50px;}
|
|
}
|
|
@media screen and (max-width:1279px){
|
|
.nav .navfl .navul li:first-child{padding-left:0px;}
|
|
.nav .navfl .navul li{padding-left:30px;}
|
|
}
|
|
.nav .navfl .navul li:first-child{margin-left:0px;}
|
|
.nav .navfl .navul li a{font-size:1em;}
|
|
.nav .navfl .navul .products a{font-size:1em;color:#444;}
|
|
.nav .navfl .navul li span{display: inline-block; }
|
|
.nav .navfl .navul li .arrow{
|
|
vertical-align: bottom; line-height:55px; font-size: 16px; margin-left:5px;transform:rotate(180deg);
|
|
-ms-transform:rotate(180deg); /* IE 9 */
|
|
-moz-transform:rotate(180deg); /* Firefox */
|
|
-webkit-transform:rotate(180deg); /* Safari 和 Chrome */
|
|
-o-transform:rotate(180deg);
|
|
}
|
|
.nav .navfl .navul li .arrow-down{
|
|
transform:rotate(360deg);
|
|
-ms-transform:rotate(360deg); /* IE 9 */
|
|
-moz-transform:rotate(360deg); /* Firefox */
|
|
-webkit-transform:rotate(360deg); /* Safari 和 Chrome */
|
|
-o-transform:rotate(360deg);
|
|
vertical-align: bottom; line-height:55px; font-size: 16px; margin-left:5px;
|
|
}
|
|
.nav .navfl .navul li a:hover{color:#009fdf;}
|
|
.nav .navfl .navul li .menu_a{color:#444;}
|
|
.nav .navfl .navul li .menu_a:hover{color:#009fdf;}
|
|
.nav .navrh .rhlist li.lispan{margin-right:50px;}
|
|
.nav .navfl .navul li.ahover a,.nav .navrh .rhlist li.ahover a{color:#009fdf}
|
|
.nav .navfl .navul li .navlist{width:100%;position:absolute;left:0;right:0;display:none;z-index:9;}
|
|
.nav .navfl .navul li .navlist .listfl{width:55%;height:331px;background:#efefef;float:left;}
|
|
.nav .navfl .navul li .navlist .listfl .navicon{float:right;width:540px;margin-top:69px;}
|
|
.nav .navfl .navul li .navlist .listfl a{display:inline-block;margin-right:75px;text-align:center;line-height:40px; float: left;}
|
|
.nav .navfl .navul li .navlist .listfl a img{display:inline-block;}
|
|
.nav .navfl .navul li .navlist .listfl a p{font-size:14px;color:#444;text-align:center; margin-bottom: 12px;}
|
|
|
|
.nav .navfl .navul li .navlist .listrh{width:45%;height:331px;background:#e3e3e3;float:right;}
|
|
|
|
.nav .navfl .navul li .navlist .listrh .navimg{margin:30px 24px 0;}
|
|
|
|
.nav .navfl .navul li .navlist .listrh .navimg .liimg{float:left;}
|
|
|
|
.nav .navfl .navul li .navlist .listrh .navimg .liimg img{width:281px;}
|
|
|
|
.nav .navfl .navul li .navlist .listrh .navtit{height:118px;float:left;margin-left:20px; text-align: left;}
|
|
|
|
.nav .navfl .navul li .navlist .listrh .navtit p{line-height:normal;}
|
|
|
|
.nav .navfl .navul li .navlist .listrh .navtit .ntit{font-size:14px;color:#444;margin-top:20px; margin-bottom: 16px;}
|
|
|
|
.nav .navfl .navul li .navlist .listrh .navtit .nline{width:23px;height:2px;background:#26a6e1;margin:10px 0 50px 0;}
|
|
|
|
/*头部新增 s*/
|
|
.nav .navfl .navul li .navlist1{background:#efefef;padding:59px 0 56px 0;}
|
|
.nav .navfl .navul li .navlist1 dd{width:520px;margin:0 auto;}
|
|
.nav .navfl .navul li .navlist1 dd .ddfl{float:left;}
|
|
.nav .navfl .navul li .navlist1 dd .ddfl a{display:block;font-size:14px;color:#444;line-height:normal;margin-bottom:18px;}
|
|
.nav .navfl .navul li .navlist1 dd .ddfl a:hover{color:#009fdf;}
|
|
.nav .navfl .navul li .navlist1 dd .ddfl a:first-child{margin-top:15px;}
|
|
.nav .navfl .navul li .navlist1 dd .ddfl a:last-child{margin-bottom:0px;}
|
|
.nav .navfl .navul li .navlist1 dd .ddrh{float:right;}
|
|
|
|
.nav .navfl .navul li .navlist2{background:#efefef;padding:59px 0 56px 0;}
|
|
.nav .navfl .navul li .navlist2 dd{width:520px;margin:0 auto;}
|
|
.nav .navfl .navul li .navlist2 dd .ddfl{float:left;}
|
|
.nav .navfl .navul li .navlist2 dd .ddfl a{display:block;font-size:14px;color:#444;line-height:normal;margin-bottom:18px;}
|
|
.nav .navfl .navul li .navlist2 dd .ddfl a:hover{color:#009fdf;}
|
|
.nav .navfl .navul li .navlist2 dd .ddfl a:first-child{margin-top:15px;}
|
|
.nav .navfl .navul li .navlist2 dd .ddfl a:last-child{margin-bottom:0px;}
|
|
.nav .navfl .navul li .navlist2 dd .ddrh{float:right;}
|
|
|
|
/*头部新增 e*/
|
|
|
|
|
|
.nav .navrh{float:right;}
|
|
|
|
.nav .navrh .rhlist{float:left;}
|
|
|
|
.nav .navrh .rhlist li{display:inline-block;line-height:60px;margin-right:50px;}
|
|
|
|
.nav .navrh .rhlist li:last-child{margin-right:0px;}
|
|
|
|
.nav .navrh .rhlist li a{font-size:16px;color:#002855;}
|
|
|
|
.nav .navrh .rhlist li span{display:inline-block;width:1px;height:24px;background:#002855;line-height:40px;vertical-align:middle;}
|
|
|
|
.nav .navrh .rhlist li:hover a{color:#009fdf;}
|
|
|
|
|
|
|
|
.header-PC .Searchbox{position:absolute;right:56px;top:20px; height: 60px; background-color: #FFF;}
|
|
|
|
.header-PC .Searchbox .icon{cursor:pointer;}
|
|
|
|
.header-PC .Searchbox .icon img{vertical-align:middle;margin:-3px 10px 0 0;}
|
|
|
|
.header-PC .search{display:none;background:#fff;width:100%; height:60px; position:absolute;right:0px;top:28px;z-index:888;}
|
|
|
|
.header-PC .search .ipt{width:80%;height:30px;line-height:30px;text-indent:1em;}
|
|
|
|
.header-PC .search .searchbtn{color:#fff; cursor:pointer; width:70px; height:30px; border-radius:13px; background:#002855; position:absolute; right:0px; top:0px;}
|
|
|
|
#wap-search-in {height: 30px; line-height: 30px; margin-top:15px; border: none; width: 40%; margin-left:30%; }
|
|
#wap-search-btn{}
|
|
.header-PC .search button{color:#444; background-color: transparent; font-size: 24px; line-height: 60px;}
|
|
/*.topnav{width:100%;padding:90px 0 104px 0;background:#002855;position:absolute;top:90px;left:0px;z-index:999;display:none;}删除*/
|
|
|
|
.topul li{width:20%;float:left;margin-right:6.6%;}
|
|
|
|
.topul li:nth-child(4n){margin-right:0px;}
|
|
|
|
.topul li p{font-size:24px;color:#fff;}
|
|
|
|
.topul li dl{margin-top:48px;}
|
|
|
|
.topul li dl dd{margin-bottom:22px;}
|
|
|
|
.topul li dl a{float:left;font-size:18px;color:#fff;}
|
|
|
|
.topul li dl a:nth-child(2n){float:right;font-size:18px;color:#009fdf;padding-bottom:8px;border-bottom:1px solid #008eca;}
|
|
|
|
|
|
|
|
|
|
/*手机端*/
|
|
.header-M .header-fixed{height: 50px; line-height: 50px; position: fixed; top:0px; width:100%; background-color:#FFF; z-index: 9; margin-bottom: 50px;}
|
|
.header-M .logo{width:130px; margin:auto; height: 50px; line-height: 50px;}
|
|
.header-M .logo img{vertical-align: middle; display: inline-block;}
|
|
.header-M .Country{border-radius: 1.5em; position: absolute; top:0px; left:8%; z-index: 1; line-height: 50px; text-align: center; color:#333; margin-left:-3px;}
|
|
.m-Country{width:100%; height: 100%; position: fixed; top:50px; left:0; background-color:#2c5c8f; z-index: 2; line-height: 30px;}
|
|
.m-Menu{width:100%; height: 100%; position: fixed; top:50px; left:0; background-color:#2c5c8f; z-index: 4;}
|
|
.header-M .Menu{position: absolute; top:0px; right:8%; color:#333; margin-right:-3px;}
|
|
.Country img{margin-right:5px;}
|
|
.m-Menu li{border-bottom:1px solid #204f7e; position: relative; opacity: 0}
|
|
.m-Menu li li{line-height: 38px; opacity: 1}
|
|
.m-Menu li li a{margin-top:-1px; padding-left:0px; line-height: 36px; display: inline-block}
|
|
.m-Menu li a{padding-left:8%; color: #FFF; text-decoration: none; line-height: 45px; font-size: 1em; margin-top:-6px;}
|
|
.m-Menu li .arrow, .m-Menu li .arrow-r{ color:#FFF; position: absolute; right:8%; font-size: 1.4em; line-height: 30px;}
|
|
.m-Menu li .arrow{top:7px;}
|
|
.m-Menu li .arrow-r{top:9px;}
|
|
.nav .arrow, .m-Menu li .arrow{
|
|
transform:rotate(180deg);
|
|
-ms-transform:rotate(180deg); /* IE 9 */
|
|
-moz-transform:rotate(180deg); /* Firefox */
|
|
-webkit-transform:rotate(180deg); /* Safari 和 Chrome */
|
|
-o-transform:rotate(180deg);
|
|
}
|
|
.nav .arrow, .m-Menu li .arrow-r{
|
|
transform:rotate(360deg);
|
|
-ms-transform:rotate(360deg); /* IE 9 */
|
|
-moz-transform:rotate(360deg); /* Firefox */
|
|
-webkit-transform:rotate(360deg); /* Safari 和 Chrome */
|
|
-o-transform:rotate(360deg);
|
|
}
|
|
.m-Menu li, .SingIn-button, .search{
|
|
-webkit-animation-name: fadeInUp;
|
|
animation-name: fadeInUp;
|
|
-webkit-animation-duration: 1s;
|
|
animation-duration: 1s;
|
|
animation-fill-mode:forwards ;
|
|
-webkit-animation-fill-mode:forwards ;
|
|
}
|
|
.m-Menu li:nth-child(1){
|
|
animation-delay:0s;
|
|
-webkit-animation-delay: 0s;
|
|
}
|
|
.m-Menu li:nth-child(2){
|
|
animation-delay:0.1s;
|
|
-webkit-animation-delay: 0.1s;
|
|
}
|
|
.m-Menu li:nth-child(3){
|
|
animation-delay:0.2s;
|
|
-webkit-animation-delay: 0.2s;
|
|
|
|
}
|
|
.m-Menu li:nth-child(4){
|
|
animation-delay:0.3s;
|
|
-webkit-animation-delay: 0.4s;
|
|
}
|
|
.m-Menu li:nth-child(5){
|
|
animation-delay:0.4s;
|
|
-webkit-animation-delay: 0.4s;
|
|
}
|
|
.m-Menu li:nth-child(6){
|
|
animation-delay:0.5s;
|
|
-webkit-animation-delay: 0.5s;
|
|
}
|
|
|
|
.S-Menu{width:100%; background-color:#2e6297; overflow: hidden;}
|
|
.S-Menu li{border-bottom: 1px solid #285887; padding-left:10%; padding-top:0; color:#FFF; font-size: 0.9em;}
|
|
.S-Menu li:last-child{border-bottom: none;}
|
|
.S-Menu li{
|
|
-webkit-animation-name: fadeInUp;
|
|
animation-name: fadeInUp;
|
|
-webkit-animation-duration: 0s;
|
|
animation-duration: 0s;
|
|
animation-delay:0s;
|
|
-webkit-animation-delay: 0s;
|
|
}
|
|
.m-Menu .Close{position: absolute; top:5%; right:8%; color:#333; font-size: 20px; border:2px solid #999; width:42px; height: 42px; border-radius: 21px; text-align: center; box-shadow: 0px 0px 2px #999;}
|
|
.m-Menu .SingIn-button a{display: inline-block; width:70px; height: 30px; border:1px solid #FFF; color:#FFF; border-radius: 1.6em; margin-left:5px; margin-right:5px; text-align: center; text-decoration: none; margin-top:30px; line-height: 28px; font-size: 1em}
|
|
.m-Menu .SingIn-button a:hover{border:1px solid #FFF; background-color:#FFF; color: #333;}
|
|
.m-Menu .search{width:84%; margin:30px auto 0; position: relative; opacity: 0;}
|
|
|
|
.m-Menu .search .form-control{width:90%; height: 32px; line-height: 32px; border:1px solid rgba(220,221,221,0.7); vertical-align: middle; border-radius:1.8em; padding-left:5%; padding-right:5%; font-size: 0.9em; background-color:#FFF;}
|
|
.m-Menu .search .updown_search_btn{line-height: 35px; background:none; border:none; position: absolute; right:2%; top:0px; font-size: 1.8em; vertical-align: middle; color:#333;}
|
|
|
|
.m-Menu .SingIn-button{opacity: 0}
|
|
.m-Menu .SingIn-button{
|
|
animation-delay:0.53s;
|
|
-webkit-animation-delay: 0.53s;
|
|
}
|
|
.m-Menu .search{
|
|
animation-delay:0.55s;
|
|
-webkit-animation-delay: 0.55s;
|
|
}
|
|
|
|
.m-Country{padding-top:5%;}
|
|
.m-Country dl{width:90%; margin:auto; overflow: hidden; margin-bottom:8%;}
|
|
.m-Country dt{font-size:14px; color:#FFF; margin-bottom: 2%;}
|
|
.m-Country dd{padding-left:0; margin-left:0; float:left; padding:0px 40px 0 0; line-height: 2em; color:rgba(255,255,255,0.7); font-size: 12px;}
|
|
|
|
@-webkit-keyframes fadeInUp {
|
|
0% {
|
|
top:1000px;
|
|
|
|
-webkit-transform:translate3d(0, 100%, 0);
|
|
transform:translate3d(0, 100%, 0)
|
|
}
|
|
100% {
|
|
opacity:1;
|
|
-webkit-transform:none;
|
|
transform:none
|
|
}
|
|
}
|
|
@keyframes fadeInUp {
|
|
0% {
|
|
opacity:0;
|
|
-webkit-transform:translate3d(0, 100%, 0);
|
|
transform:translate3d(0, 100%, 0)
|
|
}
|
|
100% {
|
|
opacity:1;
|
|
-webkit-transform:none;
|
|
transform:none
|
|
}
|
|
}
|
|
|
|
/*头部导航栏变色*/
|
|
.theme-white .navfl .navul li a{color:#FFF;}
|
|
.theme-white .logo-white{display: block}
|
|
.theme-white .logo-black{display: none; }
|
|
.theme-black .navfl .navul li a{color:#000;}
|
|
.theme-black .logo-white{display: none}
|
|
.theme-black .logo-black{display: block; }
|
|
|
|
/*公共样式*/
|
|
.search input {height: 30px; line-height: 30px; border:none; width:40%;}
|