* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
font: 14px/1 "寰蒋闆呴粦";
}
a { text-decoration: none; color: #333; }
img { border: 0; max-width: 100% }
ul,
li {
list-style: none;
}
i { font-style: none;}
.mt15 {
margin-top: 15px;
}
#nav-bar {
height: 60px;
background-color: #fff;
width: 100%;
transition: all .5s linear;
}
#nav-bar.hover .top-menu li {
color: #333;
}
.nav-top {
height: 60px;
position: fixed;
z-index: 3;
left: 0;
right: 0;
top: 0;
background-color: #fff;
transition: all .5s linear;
}
.nav-top.scroll {
background-color: rgba(99, 99, 99, .8);
}
.nav-menu .top-menu p a {
transition: all .5s linear;
}
.nav-top.scroll .nav-menu .top-menu li,
.nav-top.scroll .nav-menu .top-menu p a
{
color: #fff;
}
.nav-top.scroll .menu-pos-cont {
background-color: #fff;
}
.nav-top.scroll .menu-pos-cont .l-box .links a {
color: #666;
}
.nav-top .wrapper {
height: 100%;
}
.nav-top .logo {
float: left;
height: 100%;
}
.nav-top .logo .white-logo {
display: none;
}
.nav-top.scroll .logo img {
display: none;
}
.nav-top.scroll .logo img.white-logo {
display: block;
}
.nav-top .logo img {
height: 40px;
margin-top: 10px;
}
.nav-menu ul.top-menu {
float: right;
cursor: pointer;
}
.nav-menu .top-menu li {
float: left;
color: #333;
font-size: 15px;
line-height: 60px;
height: 60px;
width: 100px;
text-align: center;
transition: all .5s linear;
}
.nav-menu .top-menu li:hover {
/* color: #bc9f5f; */
/* font-size: 20px; */
}
.nav-menu .top-menu li:hover p a {
/* color: #bc9f5f; */
}
.nav-menu .top-menu li.more:hover .menu-pos-cont {
height: 60px;
}
.nav-menu .top-menu li.more:hover .menu-pos-cont .border-side {
left: 0;
right: 0;
}
.menu-pos-cont {
position: fixed;
top: 60px;
left: 0;
right: 0;
background-color: #fff;
background-color: rgba(99, 99, 99, .8);
height: 0px;
transition: all .2s linear;
overflow: hidden;
}
.menu-pos-cont .box {
padding: 0px 0;
overflow: hidden;
}
.menu-pos-cont .l-box {
color: #333;
line-height: 60px;
text-align: right;
}
.menu-pos-cont .l-box .title {
font-weight: bold;
font-size: 25px;
line-height: 25px;
padding-bottom: 50px;
}
.menu-pos-cont .l-box .links a {
display: inline-block;
padding-left: 20px;
position: relative;
margin-right: 15px;
color: #fff;
}
/* .menu-pos-cont .l-box .links a:hover {
color: #bc9f5f;
} */
/* .menu-pos-cont .l-box .links a::before {
content: '';
display: inline-block;
width: 15px;
height: 4px;
background: #bc9f5f;
position: absolute;
top: 50%;
left: 0;
margin-top: -2px;
border-radius: 2px;
} */
.menu-pos-cont img {
float: right;
width: 320px;
height: 220px;
}
.menu-pos-cont .border {
height: 2px;
position: relative;
}
.menu-pos-cont .border .border-side {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
right: 50%;
background-color: #bc9f5f;
transition: all .2s linear;
}
.wrapper {
max-width: 1600px;
margin: 0 auto;
padding: 0 10px;
}
#footer .footer-top {
height: 320px;
background: url(../images/footer-top.png) no-repeat center center;
background-size: cover;
}
#footer .footer-top .footer-box {
height: 160px;
margin-top: 80px;
}
#footer .footer-top .box {
width: 100%;
height: 160px;
background-color: rgba(196, 210, 228, .5);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 25px;
color: #fff;
}
#footer .footer-top .box .title {
margin-bottom: 15px;
}
#footer .footer-bottom {
background-color: #000;
padding: 80px 0 60px;
color: #fff;
}
#footer .footer-bottom .content {
/* height: 300px; */
}
#footer .footer-bottom .wape-box {
width: 100%;
}
.footer-bottom .box,
.footer-bottom .nav-box {
overflow: hidden;
}
.footer-bottom .nav-box {
float: left;
width: 720px;
}
.footer-bottom .nav-item {
float: left;
width: 140px;
}
.footer-bottom .nav-item .title {
line-height: 30px;
margin-bottom: 20px;
position: relative;
font-size: 18px;
color: #FFFFFF;
transition: all 220ms
}
.footer-bottom .nav-item .nav-link {
font-size: 14px;
line-height: 30px;
line-height: 30px;
color: #7f7f7f;
transition: all 320ms ease-in;
display: block;
}
.footer-bottom .nav-item .nav-link:hover {
color: #fff;
font-size: 16px;
}
.footer-bottom .code-box {
float: right;
overflow: hidden;
}
.footer-bottom .code-box .code {
width: 140px;
float: left;
text-align: center;
font-size: 0;
}
.footer-bottom .code-box .code p {
font-size: 18px;
padding-top: 8px;
}
.footer-bottom p.text {
font-size: 15px;
padding-top: 20px;
text-align: center;
color: #fff;
}
.scale-animate {
position: relative;
overflow: hidden;
}
.scale-animate .img {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.mark-box {
position: relative;
}
.mark-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(125, 125, 125, .5);
display: none;
}
.mark-box.mark-show .mark-bg {
display: block;
}
.pos-mark {
overflow: hidden;
}
.pos-parent {
position: relative;
height: 100%;
}
.pos-parent .pos-animate {
/* position: absolute;
left: 0;
top: 0; */
/*opacity: 0;*/
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap>div {
float: left;
width: 100%;
position: relative;
}
.text-over {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.text-left {
text-align: left!important;
}
.floor-header {
/* padding: 25px 0; */
padding-top: 45px;
padding-bottom: 35px;
text-align: center;
color: #666;
}
.floor-header .en {
font-size: 20px;
}
.floor-header .zh {
font-size: 30px;
padding-top: 8px;
}
.floor-header .border {
width: 60px;
height: 4px;
border-radius: 2px;
background-color: #136eff;
margin: 10px auto 0;
}
.floor-header.text-left .border {
margin-left: 0;
}
#m-nav {
float: right;
width: 60px;
height: 60px;
display: none;
}
#m-nav .menu-btn {
width: 100%;
height: 100%;
background: url(../images/menu.png) center center no-repeat;
cursor: pointer;
}
#m-nav .menu-pos {
position: fixed;
z-index: 3;
top: 60px;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
max-height: 0px;
overflow: hidden;
transition: all .3s linear;
}
#m-nav.open .menu-pos {
max-height: 2000px;
}
#m-nav .menu-box {
background-color: #fff;
}
.m-menus .nav-link {
display: block;
height: 50px;
line-height: 50px;
padding: 0 15px;
color: #000;
border-bottom: 1px solid #ddd;
}
.m-menus .nav-parent {
border-bottom: 1px solid #ddd;
}
.m-menus .nav-parent .title {
height: 50px;
line-height: 50px;
padding: 0 15px;
cursor: pointer;
}
.m-menus .nav-parent .title .icon {
float: right;
width: 50px;
height: 50px;
background: url(../images/close.png) center center no-repeat;
transform: rotateZ(45deg);
-webkit-transform: rotateZ(45deg);
transition: all .3s linear;
}
.m-menus .nav-parent .sub {
height: 0px;
overflow: hidden;
}
.m-menus .nav-parent.open .title .icon {
transform: rotateZ(0deg);
-webkit-transform: rotateZ(0deg);
}
.m-menus .nav-parent .sub-link {
display: block;
line-height: 40px;
color: #000;
padding-left: 40px;
}
@media screen and (max-width: 1000px) {
#nav-bar,
#nav-bar .nav-top {
height: 60px;
}
#nav-bar .nav-menu {
display: none;
}
#m-nav {
display: block;
}
.footer-bottom .nav-box {
float: none;
margin: 0 auto;
}
.footer-bottom .code-box {
float: none;
padding-top: 15px;
display: flex;
justify-content: center;
}
}
.footer-m-menus {
display: none
}
.footer-m-menus.m-menus .nav-parent,
.footer-m-menus.m-menus .nav-link {
color: #fff;
border-bottom: 1px solid #eee;
/* border: 0; */
}
.footer-m-menus.m-menus .nav-parent .sub-link {
color: #fff;
}
.footer-m-menus.m-menus .nav-parent .title .icon {
background-image: url(../images/close-white.png);
}
@media screen and (max-width: 750px) {
.footer-bottom .nav-box {
display: none;
}
.footer-m-menus {
display: block;
}
}
@media screen and (max-width: 440px) {
.animate-banner {
display: none;
}
.floor-header {
padding: 15px 0;
}
.floor-header .en {
font-size: 13px;
}
.floor-header .zh {
font-size: 18px;
}
}
.pager {
padding: 10px 0;
text-align: center;
}
.pager a,
.pager span {
display: inline-block;
margin-left: 5px;
border: 1px solid #ddd;
height: 30px;
line-height: 30px;
width: 30px;
text-align: center;
border-radius: 2px;
}
.pager .a1 {
width: auto;
padding: 0 8px;
}
.pager span {
background-color: #0e6eb8;
color: #fff;
border-color: #0e6eb8;
}
.pager .next,
.pager .prev {
width: 60px;
}
.animate-banner {
height: 500px;
overflow: hidden;
}
.animate-banner .banner-box {
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
transform: scale(1.2);
-webkit-transform: scale(1.2);
animation: bannerAnimateScale 35s infinite;
-webkit-animation: bannerAnimateScale 35s infinite linear;
}
@keyframes bannerAnimateScale {
0% {
transform: scale(1.2);
-webkit-transform: scale(1.2);
}
50% {
transform: scale(1);
-webkit-transform: scale(1);
}
100% {
transform: scale(1.2);
-webkit-transform: scale(1.2);
}
}
@-webkit-keyframes bannerAnimateScale {
0% {
transform: scale(1.2);
-webkit-transform: scale(1.2);
}
50% {
transform: scale(1);
-webkit-transform: scale(1);
}
100% {
transform: scale(1.2);
-webkit-transform: scale(1.2);
}
}
@media screen and (max-width: 1400px) {
.sm-code {
display: none;
}
}