﻿.content{width:1200px;margin: 0 auto;}

.header{background: url("/_vivi/source/aHR0cHM6Ly9lbmVyZ3kubmFua2FpLmVkdS5jbg/Site/english/theme/img/headBg.jpg") top right no-repeat;background-position:55.1vw 0}
.header .logoBox{display:flex;justify-content:space-between;flex-wrap: wrap;}
.header .logoBox .logo{line-height: 80px;padding: 40px 0 15px;display: block;color: #000;}
.header .logoBox .logo img{height: 80px;}
.header .logoBox .logo span{margin-left:20px}
/* .header .logoBox .logo span{font-size: 30px;color: #000;margin-left: 25px;line-height: 40px;display: inline-block;vertical-align: middle;} */
.search{float:right;margin-top:78px;display:flex}
.search form input[type=text]{width:110px;height:24px;float:left;box-sizing: border-box;padding: 0 5px;line-height: 24px;border:1px solid #d6d6d6;border-right:0}
.search form input[type=submit]{width:34px;height:24px;border:0;background:#00a0e9 url("/_vivi/source/aHR0cHM6Ly9lbmVyZ3kubmFua2FpLmVkdS5jbg/Site/english/theme/img/search.png") center center no-repeat;}
.search>a.english{width:55px;height:24px;display:block;text-align: center;line-height: 24px;font-size: 16px;color: #fff;background:#00a0e9;margin-left:5px}
.nav ul{display:flex;}
.nav ul li{width:20%;height:67px;line-height:67px;text-align:center;font-size:20px;color:#fff;background:#00a0e9;border-right: 1px solid #5ec3f1;}
.nav ul li a{color:#fff;display:block;position:relative;overflow: hidden;transition:all .1s ease-in-out;}
.nav ul li a:after{content:"";width:100%;height:100%;background:rgba(255,255,255,0.2);position:absolute;right:-100%;transition:all .5s ease-in-out;top: 0;}
.nav ul li.active a,.nav ul li:hover a{font-weight:bold;}
.nav ul li.active a:after,.nav ul li:hover a:after{right:0;}
.nav .english{display:none}

.links .head{margin-bottom: 0;}
.linksSwiper{position:relative;margin-bottom:27px}
.linksSwiper .swiper-container{padding: 30px 0 30px;}
.linksSwiper .swiper-slide{width: 20%;height: 93px;text-align: center;line-height: 93px;border: 1px solid #cac6c6;box-sizing: border-box;}
.linksSwiper .swiper-slide img{max-width: 100%;max-height: 100%;}
.linksSwiper .swiper-slide:hover{border: 0;box-shadow: 0px 0px 24px 0px rgba(141, 141, 141, .22);}
.linksSwiper .swiper-button-next,.linksSwiper .swiper-button-prev{width: 15px;height: 30px;background-color: #00a0e9;background-size:6px 10px;margin-top: -15px;left: 0;}
.linksSwiper .swiper-button-next{right:0;left:auto}
.linksSwiper  .swiper-button-prev.swiper-button-disabled,.linksSwiper  .swiper-button-next.swiper-button-disabled{background-color: #cac6c6;opacity: 1;}

.footer{padding:40px 0;background:#505357;border-top: 5px solid #00a0e9;}
.footer .footNav{text-align:center;}
.footer .footNav ul{display:inline-block}
.footer .footNav ul li{float:left;width:100px;border-left:1px solid #ebedee;line-height: 15px;}
.footer .footNav ul li:last-child{border-right:1px solid #ebedee}
.footer .footNav ul li:hover a{color:#00a0e9}
.footer .footNav ul li a{color:#ebedee;font-size:14px}
.copyright{font-size:12px;text-align:center;color:rgba(255,255,255,0.65)}

@media screen and (max-width: 880px){
    .content{width:100%}
    .header{width:100%;background-size: 70%;position:relative;background: url("/_vivi/source/aHR0cHM6Ly9lbmVyZ3kubmFua2FpLmVkdS5jbg/Site/english/theme/img/headBgM.jpg") top right no-repeat;background-size: cover;position:fixed;top:0;z-index:11;left: 0;}
    .header .logoBox .logo{width:100%;line-height: 10vw;height: 19.7vw;padding: 4vw 0;padding: 4vw 22vw;box-sizing: border-box;}
    .header .logoBox .logo span{font-size: 14px!important;display: block;line-height: 16px;margin-left: 2vw;}
    .header .logoBox .logo img{height:auto;max-height: 19.7vw;}
    .header .logoBox .menu{width:19.7vw;height:19.7vw;position:absolute;background: url("/_vivi/source/aHR0cHM6Ly9lbmVyZ3kubmFua2FpLmVkdS5jbg/Site/english/theme/img/menu.png") center center no-repeat;background-size: 5vw;}
    .header .logoBox .menu.close{background: url("/_vivi/source/aHR0cHM6Ly9lbmVyZ3kubmFua2FpLmVkdS5jbg/Site/english/theme/img/close.png") center center no-repeat;background-size: 5vw;}
    .searchA{margin-top: 0;position:absolute;width: 19.7vw;height: 19.7vw;background: url("/_vivi/source/aHR0cHM6Ly9lbmVyZ3kubmFua2FpLmVkdS5jbg/Site/english/theme/img/searchG.png") center center no-repeat;right: 0;top: 0;background-size: 4.5vw;z-index: 99;}
    .searchA.close{background:url("/_vivi/source/aHR0cHM6Ly9lbmVyZ3kubmFua2FpLmVkdS5jbg/Site/english/theme/img/close.png") center center no-repeat;background-size: 5vw;}
    .search.active{display:block;width:100%;height:19.7vw;position:fixed;top:0;left:0;background: #fff;border-bottom: 1px solid #f0f8fb;margin-top: 0;}
    .search{display:none}
    .search.active form{display: flex;flex-direction: row-reverse;width:100%;padding: 5vw 5vw;justify-content: flex-end;}
    .search form input[type=text]{width: 79%;float: none;height: 9.7vw;line-height: 9.7vw;border: 0;font-size: 16px;}
    .search form input[type=submit]{width:10vw;height:9.7vw;background:url("/_vivi/source/aHR0cHM6Ly9lbmVyZ3kubmFua2FpLmVkdS5jbg/Site/english/theme/img/searchG.png") center center no-repeat;background-size:5vw}
    .search>a.english{display:none}
/*     .closeSearch{display:block;width: 9.7vw;height: 9.7vw;position:absolute;right:6vw;top: 5vw;background:url(../img/close.png) center center no-repeat;background-size: 5vw;} */

    .nav{position:fixed;width: 77.9vw;min-height: calc(100% + 20px);z-index:11;top: -10px;background: #fff url("/_vivi/source/aHR0cHM6Ly9lbmVyZ3kubmFua2FpLmVkdS5jbg/Site/english/theme/img/navM.png") left bottom no-repeat;background-size: 40%;left: -79vw;}
    .nav ul{display:block;padding-top: calc(19.7vw + 10px);background:#f1f8fc;width: 100%;}
    .nav ul li{width:100%;height: 15vw;line-height: 15vw;background: #fff;text-align: left;padding: 0 6vw;box-sizing: border-box;border-right: 0;border-bottom: 1px solid #c5c5c5;font-size: 16px;}
    .nav ul li a{color:#000}

    .nav .english{font-size:16px;line-height: 8vw;padding:0 6vw;margin:4vw 6vw;background:#00a0e9;color:#fff;box-sizing:border-box;display: inline-block;}

    body.active{box-shadow: -1px 0px 5px 0px #d6d6d6;overflow:unset;position: fixed;}
    body.active .wrap{height:100vh;overflow:hidden}
    
    .linksSwiper{margin-bottom:0}
    .linksSwiper .swiper-container{padding:4vw 0 6vw}
    .linksSwiper .swiper-slide{height:22vw;line-height:21vw}
    .linksSwiper .swiper-slide img{max-height:90%}

    .footer{padding:6vw 5vw;border-width: 3px;}
    .footer .footNav ul li{width:auto;padding:0 2vw;line-height:12px;margin-bottom:2vw}
    .footer .footNav ul li a{font-size:12px}
    .copyright{text-align:left;line-height:15px}

}

