/* ========== */
/* = RESET = */
/* ========== */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

@font-face {
    font-family: 'Bebas';
    src: url('../fonts/Bebas-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Regular.otf') format('opentype'),
       url('../fonts/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-SemiBold.otf') format('opentype'),
       url('../fonts/Montserrat-SemiBold.ttf') format('truetype');
  font-weight: 600;
}
:after,
:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

html {
    overflow-x: hidden;
    -webkit-text-size-adjust: none;
    /*cursor: url(../images/home/hand_ico.ico),auto;*/
}

body {
    min-width: 320px;
    font-size: 14px;
    color: #666666;
    font-family: "PingFang SC","Microsoft Yahei", -apple-system,  "Helvetica Neue", STHeiti, Tahoma, Simsun, sans-serif;
    -webkit-overflow-scrolling: touch;
}

body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
em,
img,
strong,
b,
small,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
sub,
sup,
tt,
var,
del,
dfn,
ins,
kbd,
q,
s,
samp,
strike,
applet,
object,
iframe,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
mark,
audio,
video,
input,
textarea,
select {
    margin: 0;
    padding: 0;
}

ul,
ol,
li,
dl {
    list-style: none;
}

/*RESET A*/
* {
    text-decoration: none !important;
}

a,
a:visited,
a:active,
a:hover,
a:focus {
    text-decoration: none !important;
    outline: none;
}

a {
    color: #666666;
}

/* HTML5 RESET THE OLD BROWERS*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*CLEAR the FLOAT*/
.clear {
    clear: both
}

.clearfix {
    zoom: 1;
}

.clearfix:after {
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
    line-height: 0;
    content: '\20';
}

.bgFull {
    background-size: cover;
    background-position: center center;
    background-repeat: nno-repeat
}

/*RESET the FORM*/
fieldset {
    border: 0 !important;
}

input,
button,
textarea,
select {
    font-size: 100%;
    outline: none;
    resize: none;
    font-family: "Microsoft Yahei", -apple-system, "PingFang SC", "Helvetica Neue", STHeiti, Tahoma, Simsun, sans-serif;
}

input[type="button"] {
    cursor: pointer;
    border: 0
}

input[type="submit"] {
    cursor: pointer;
    border: 0
}

input[type="reset"] {
    cursor: pointer;
    border: 0
}

input[type="button"],
input[type="text"],
textarea {
    -webkit-appearance: none;
}

input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"]>input[type="button"]::-moz-focus-inner {
    border: none;
    padding: 0;
}

input::-webkit-input-placeholder {
    color: #999999;
}

input:-moz-placeholder {
    color: #999999;
}

input::-moz-placeholder {
    color: #999999;
}

input:-ms-input-placeholder {
    color: #999999;
}

textarea::-webkit-input-placeholder {
    color: #999999;
}

textarea:-moz-placeholder {
    color: #999999;
}

textarea::-moz-placeholder {
    color: #999999;
}

textarea:-ms-input-placeholder {
    color: #999999;
}

/*RESET IMAGES*/
img {
    display: block;
    max-width: 100%;
    border: 0;
    margin: 0 auto;
}


.top {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    display: flex;
    justify-content: space-between;
    z-index: 99;
    transition: all linear .2s;
}
.top.active {
    background-color: #fff;
    box-shadow: 0 0 10px #ccc;
}

.top h1 {
    /* width: 112px; */
    width: 7.8125vw;
    margin-left: 100px;
    padding: 10px 0;
}
.top h1 .logo2 {
    display: none;
}
.top.active h1 .logo1 {
    display: none;
}

.top.active h1 .logo2 {
    display: block;
}

.top .right {
    display: flex;
    align-items: center;
}

.top .right ul {
    display: flex;
}

.top .right ul li {
    padding: 0 1.6vw;
    font-size: 18px;
    line-height: 80px;
    position: relative;
}

.top .right ul li .mb {
    display: none;
}

.top .right ul li>a {
    color: #fff;
    transition: all linear .2s;
    position: relative;
}

.top .right ul li>a::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #fff;
    left: 0;
    bottom: -18px;
    opacity: 0;
    transition: all linear .2s;
}
.top .right ul li:hover>a {
    color: #fff;
}
.top .right ul li:hover>a::after {
    opacity: 1;
}
.top.active .right ul li.current>a{
    color: #7D0076;
}
.top.active .right ul li>a {
    color: #222;
}
.top.active .right ul li>a::after{
    background-color: #7D0076;
}
.top.active .right ul li:hover>a {
    color: #7D0076;
}
.active .cont-btn{
    border-color: #222;
    color: #222;
}
.top .right ul li.current>a {
    color: #fff;
}
.top .right ul li.current>a::after {
    opacity: 1;
}

.sub_nav {
    display: none;
}
.sub_nav_en {
    flex-direction: column;
    border-radius: 5px;
    justify-content: space-between;
}
.search {
    width: 20px;
    margin: 0 100px 0 50px;
}
.top .search .search2 {
    display: none;
}
.top.active .search .search1 {
    display: none;
}
.top.active .search .search2 {
    display: block;
}
.top .search .lang2 {
    display: none;
  }
.top .search .lang1 {
    display: block;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    margin-left: 5px;
    font-weight: 350;
}
.top.active .search .lang1 {
    display: none;
}
.top.active .search .lang2 {
    display: block;
    color: #222222;
    font-size: 22px;
    line-height: 1;
    margin-left: 5px;
    font-weight: 350;
}
.header {
    position: relative;
}

.banner {
    position: relative;
}

.banner .swiper-slide {
    position: relative;
}

.banner1 {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translateX(-50%);
    width: 32.5%;
}

.banner1 .btn {
    width: 220px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #7D0076;
    margin: 85px auto 0;
    transition: all linear .2s;
}

.banner1 .btn a {
    font-size: 16px;
    color: #7D0076;
    line-height: 1;
    display: block;
    padding-right: 14px;
    background: url('../images/right3.png') no-repeat right center;
    background-size: 6px 10px;
    transition: all linear .2s;
}

.banner1 .btn:hover {
    background-color: #7D0076;
}
.banner1 .btn:hover a {
    color: #fff;
    background: url('../images/right4.png') no-repeat right center;
    background-size: 6px 10px;
}


.swiper-container {
    width: 100%;
}


.banner2 .other .fz18{
    font-size: 18px;
}
.banner2 .other p {
    text-transform: uppercase;
    font-size: 30px;
    color: #fff;
    text-align: center;
    font-family: 'Bebas';
}

.banner2 .other h2 {
    font-size: 72px;
    color: #fff;
    margin-top: 20px;
    text-align: center;
}

.banner2 {
    position: relative;
}
.banner2 >img{
    width: 100%;
}
.banner2 .other,
.banner2 .other2 {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    text-align: center;
}

.banner2 .other2 p {
    font-size:48px;
    color: rgba(255,255,255,.5);
    font-family: 'Montserrat'; 
}

.banner2 .other2 h2 {
    font-size: 48px;
    color: #fff;
    text-align: center;
}

.banner3 {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 2;
    transform: translateY(-50%);
}
.banner3 p {
    color: #fff;
    font-size: 60px;
    font-weight: bold;
    line-height: 84px;
}
.banner3-en p{
    font-size: 76px;
    font-family: 'Montserrat'; 
    font-weight: 600;
}
.banner3 p sup{
    font-size: 24px;
    font-weight: normal;
}
.banner3 b {
    font-weight: normal;
    display: block;
    color: #fff;
    margin-top: 20px;
    font-size: 30px;
}

.banner3 .btn {
    width: 220px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #fff;
    margin-top: 85px;
    margin-left: auto;
    margin-right: auto;
    transition: all linear .2s;
}

.banner3 .btn a {
    font-size: 16px;
    color: #fff;
    line-height: 1;
    display: block;
    padding-right: 14px;
    background: url('../images/right4.png') no-repeat right center;
    background-size: 6px 10px;
    transition: all linear .2s;
}

.banner3 .btn:hover {
    background-color: #7D0076;
    border: 1px solid #7D0076;
}

.crumbs {
    position: absolute;
    left: 100px;
    bottom: 40px;
    color: #fff;
    font-size: 16px;
    display: flex;
    align-items: center;
    z-index: 10;
}

.crumbs a {
    color: #fff;
    font-size: 16px;
    line-height: 1;
    opacity: .8;
}

.crumbs span {
    display: block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotateZ(45deg);
    margin: 0 18px;
    opacity: .8;
}

.footer {
    background-color: #222;
    padding-top: 80px;
}

.footer .main {
    display: flex;
    justify-content: space-between;
    padding-left: 100px;
    padding-right: 100px;
}
.footer .main .left{
    width: 35%;
    flex-shrink: 0;
}
.footer .main .left h1 {
    width: 125px;
    margin-bottom: 40px;
}

.footer .main .left p {
    font-size: 18px;
    color: #ccc;
    line-height: 30px;
}
.footer .main .left .encell {
    display: flex;
    flex-direction: row;
    margin-top: 10px;
  }
  
.footer .main .left .encell img {
    height: 24px;
    width: auto;
    margin-left: 0;
    margin-right: 5px;
}
  
.footer .main .left .encell p {
    font-size: 16px;
    color: #ccc;
    line-height: 1.5;
    margin-left: 0;
    margin-right: auto;
    width: 70%;
}
.footer_nav {
    display: flex;
    flex:1;
    justify-content: space-between;
    padding-top: 22px;
}

.footer_nav dl {
    font-size: 18px;
    color: #fff;
}

.footer_nav dl a {
    color: #fff;
    transition: all linear .3s;
}

.footer_nav dl dt {
    margin-bottom: 20px;
    font-weight: bold;
}

.footer_nav dl dd {
    font-size: 16px;
    line-height: 40px;
}

.footer_nav dl a:hover {
    opacity: .8;
}

.copyright {
    height: 60px;
    line-height: 59px;
    padding-left: 100px;
    color: #999;
    font-size: 14px;
    border-top: 1px solid #4D4D4D;
    margin-top: 90px;
    box-sizing: border-box;
}
.copyright a{
    color: #999;
}


.title {
    text-align: center;
    display: flex;
    justify-content: center;
    flex-flow: column;
    align-items: center;
}

.title h2 {
    font-size: 48px;
    color: #333;
    display: flex;
    text-align: center;
}

.title h2 div {
    font-size: 24px;
}

.title p {
    color: #808080;
    font-size: 24px;
    margin-top: 20px;
}

.title2 {
    font-size: 30px;
    font-weight: bold;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.title2 span a {
    display: flex;
    color: #808080;
    font-size: 16px;
    font-weight: normal;
    align-items: center;
    line-height: 1;
}

.title2 span img {
    width: 8px;
    margin-left: 8px;
}

.nav-list {
    display: none;
}
.nav-lang {
    display: none;
  }

.top .right ul li div{/* display: none; */position: absolute;top:80px;left:50%;transform: translateX(-50%); background: rgba(255,255,255,.8); white-space: nowrap; padding: 0 20px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,.05);box-shadow:0 5px 10px rgba(0,0,0,.05);padding: 30px 40px;}
.top .right ul li div a{ display: inline-block; line-height:30px; font-size: 16px;margin: 0 10px;}
.top .right ul li .mb{
    display: none;
}

.cont-btn{
    display: flex;
    align-items: center;
    border-radius: 4px;
    background: rgba(255,255,255,.2);
height: 46px;
line-height: 44px;
padding: 0 24px;
margin-top: 17px;
}
.cont-btn .i{
    width: 20px;
    margin-right: 8px;
}
.cont-btn .i svg{
    width: 20px;
    height: 20px;
    margin-bottom: -4px;
}

@media screen and (min-width: 1001px) {
    .top .right ul li div a:hover{ color: #880081;}
    .top .right ul li:hover div{ display: flex; }
}
.page.sty1{
    text-align: left;
}
.page.sty1 a{
    border: none;
}
.page.sty1 .left a{
    display: inline;
    padding: 0;
    line-height: 1.5;
}
.page{ text-align: center; font-size:0; justify-content: center;}
.page li{ display: inline-block; vertical-align: middle; }
.page a,
.page span{ min-width: 40px; text-align: center; margin: 5px; background: #FFFFFF; display: inline-block; vertical-align: middle; border: 1px solid #E5E5E5; font-size: 16px; line-height: 38px; padding: 0 10px;border-radius: 4px;}
.page a:hover{ color: #880081;}
.page .active a,
.page .active span{ background: #880081; border: 1px solid #880081; color: #FFFFFF;}
.page a.prev,
.page a.next{ padding:0 18px; position: relative;}
.page a.prev:before,
.page a.next:before{ content: ""; position: absolute; top:50%;transform: translateY(-50%); -webkit-transform: translateY(-50%);  width: 20px; height: 20px; display: block;}
.page a.prev{ padding-left: 32px;}
.page a.prev:before{ left: 12px; background-image: url(../images/page_prev.png);}
.page a.next{ padding-right: 32px;}
.page a.next:before{ right: 12px; background-image: url(../images/page_next.png);}


.msg{ display: none; position: fixed; top:50%; left:50%; width:50%; max-width: 250px; background: rgba(0,0,0,.7); border-radius: 20px; padding: 35px; transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%);}
.msg .close{ position: absolute; top:5px; right:5px; width: 40px; height: 40px; background-image: url(../images/close.png); background-size: cover; cursor: pointer;}
.msg p{ margin-top: 10px; color: #FFFFFF; font-size: 16px; text-align:center;} 
.top .h1-en {
    width: 17vw;
    margin-left: 100px;
}
.footer .main .left .h1-en {
    width: 25vw;
}
@media screen and (max-width: 1200px) {
    .top h1{
        margin-left: 50px;
    }
    .top .h1-en {
        width: 30vw;
        margin-left: 20px;
    }
    .footer .main .left .h1-en {
        width: 30vw;
    }
    .search{
        margin-right: 50px;
    }

    .footer .main{
        padding-left: 50px;
        padding-right: 50px;
    }
}