﻿@font-face {
    font-family: 'PingFang Medium';
    src: url('../../../fonts/PingFang Medium.ttf') format('truetype');
}
@font-face {
    font-family: 'PingFang Heavy';
    src: url('../../../fonts/PingFang Heavy.ttf') format('truetype');
}
@font-face {
    font-family: 'Avenir LT 45 Book';
    src: url('../../../fonts/Avenir LT 45 Book.ttf') format('truetype');
}
@font-face {
    font-family: 'Avenir LT 95 Black';
    src: url('../../../fonts/Avenir LT 95 Black.ttf') format('truetype');
}
* { box-sizing: border-box; padding: 0; margin: 0; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-text-size-adjust: none; outline: none; }
a.img { -webkit-touch-callout: none; }

a, a:hover, a:active, a:focus {  text-decoration: none !important; font-weight: normal; }
a{color:#000}
::-webkit-input-placeholder { color: #095da6; }

video::-webkit-media-controls-start-playback-button {

display: none;
}
input:-moz-placeholder { color: #d5b0a2; }
input, button, select, textarea, a, span { outline: none; filter: chroma; }
button, input, optgroup, select, textarea { -webkit-appearance: none; /*去掉webkit默认的表单样式*/ }
::-webkit-input-placeholder { color: #5c5c5c; }
input::-webkit-input-placeholder { color: #5c5c5c; }
　input:-moz-placeholder { color: #5c5c5c; }
　input::-moz-placeholder { color: #5c5c5c; }
　　input:-ms-input-placeholder { color: #5c5c5c; }
header, footer, nav, section { display: block; }


html { width: 100%; overflow-x: hidden; }
body { -webkit-user-select: none; /*禁止选中文本*/ user-select: none; font-size: 16px;  margin: auto; position: relative; width: 100%; overflow-x: hidden; }


.overflowHid { position: absolute; height: 100vh; overflow: hidden; }

p { font-weight: normal; font-size: 1.2rem; line-height: 150%; }


ul, li { list-style: none; padding: 0; margin: 0; }

h1, h2, h3, h4, h5 { font-weight: normal; /* color: #000; */ }

ul, li { list-style: none; padding: 0; margin: 0; }

.clear { clear: both; width: 0; height: 0; }
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: block; }

img { border: none; }
.img-responsive { max-width: 100%; height: auto; display: block; }
.img-full { width: 100%; height: auto; display: block; }
.img-circle { border-radius: 50%; max-width: 100%; }
button{background: transparent;border: 0;}
.button {display: inline-block;width: 10rem;font-size: 1.2rem;color: #000;letter-spacing: 0.1rem;position: relative;text-decoration: none;text-align: center;line-height: 3.1rem;-webkit-transition: 0.3s;-moz-transition: 0.3s;-ms-transition: 0.3s;-o-transition: 0.3s;transition: 0.3s;}
.button:before, .button:after { z-index: -1; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #000; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; }
.button:before { left: -2px; top: -2px; }
.button span { z-index: 2; }

.button:after { left: 2px; top: 2px; }
.button:hover { -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; background: #000; color: #fff; }
.button:hover:before, .button:hover:after { left: -1px; top: -1px; }

.button.white { color: #fff; }
.button.white:before, .button.white:after { border: 1px solid #fff; }
.button.white:hover { background: #fff; color: #000; }



header { height: 4.5rem; width: 100%; background: #e70310; text-align: center; line-height: 6.5rem; position: fixed; z-index: 100;top:0 }
.btnGroup  .waves {position: absolute;top: 50%;left: 50%;width: 4rem;height: 4rem;margin-left: -1rem;margin-top: -2rem;border-radius: 50%;-webkit-backface-visibility: hidden;z-index:-1;}

.btnGroup  .wave, .waves:before, .waves:after {position: absolute;background: white;/* margin-left: 1rem; */margin-top: 1rem;width: 2rem;height: 2rem;content: "";display: block;border-radius: 50%;-webkit-backface-visibility: hidden;}

.btnGroup  .waves:before { animation: wave-animate 3s infinite ease-out; }

.btnGroup  .waves:after { opacity: 0; animation: wave-animate 3s 1.5s infinite ease-out; }
.btnGroup  p{line-height:inherit}
@keyframes wave-animate {
    0% { transform: scale(0); opacity: .5; transform-origin: center; }
    100% { transform: scale(2); opacity: 0; transform-origin: center; }
}
header .btnGroup {width: 8rem;font-size: 1.2rem;color: #ccc;height: 100%;position: absolute;top: 0;left: 0;left: 0;/* opacity:.5; */}
.btnGroup.isOpen {color: #cfab80;}
header .down-icon {display: inline-block;width: 0;height: 0;border-left: 0.5rem solid transparent;border-right: 0.5rem solid transparent;border-top: 0.6rem solid #ccc;margin-left: 0.5rem;}
.btnGroup.isOpen .down-icon{ border-top: 0.6rem solid transparent;  border-bottom: 0.6rem solid #ae9577; }
header .logo { width: 7.5rem; margin: auto; line-height: 6rem; }
.header {text-align:left;}
.header .logo{margin-left:2rem;}
header .logo1 {width: 7.5rem; margin-top: 1.35rem;}
button.btnMenu { border: 0; position: absolute; right: 1.5rem; width: 4rem; z-index: 9; height: 4.5rem; }
button.btnMenu > span { position: absolute; right: 0; top: 45%; color: #fff; font-size: 0.875em; opacity: .5; }
.icon-menu { position: relative; display: block;height: 100%; z-index: 15; }
.icon-menu span, .icon-menu span:before, .icon-menu span:after { content: ''; position: absolute; display: block; cursor: pointer; border-radius: 1px; height: 2px; width: 2rem; background: #fff; right: 0; top: 45%; transition: all 250ms ease-out; -webkit-transition: all 250ms ease-out; }
.icon-menu span{width:1.5rem}
.icon-menu span:before { top: -7px; }
.icon-menu span:after { top: 7px; }
.icon-menu p{color: #fff; position: absolute;bottom: -2px;}
.icon-menu.isOpen span { width: 0; margin-left: 12px; background-color: transparent; }
.icon-menu.isOpen span:before, .icon-menu.isOpen span:after { top: 0; margin-left: -12px; }
.icon-menu.isOpen span:before { transform: rotate(135deg); -webkit-transform: rotate(135deg); }
.icon-menu.isOpen span:after { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); }

.side-main-menu{ display: none; position: fixed; top: 0; width: 100%; height: 100vh;overflow:scroll ;background: #e70310; z-index: 99; transform: translateY(-100%); -ms-transform: translateY(-100%); /* IE 9 */ -moz-transform: translateY(-100%); /* Firefox */ -webkit-transform: translateY(-100%); /* Safari 和 Chrome */ -o-transform: translateY(-100%);  }
.side-main-menu.isOpen { display: block; transform: translateY(0); -ms-transform: translateY(0); /* IE 9 */ -moz-transform: translateY(0); /* Firefox */ -webkit-transform: translateY(0%);  }
.side-main-menu > .side-menu-items {width: 90%;margin-top:9rem;margin-left: 10%;}

.side-menu-items > li {line-height: 4rem;position: relative;transform: translate3d(0px,150px,0);border-bottom: 1px solid #fff;opacity:0}
.side-menu-items > li > a {color: #fff;font-size: 1.5rem;display: block; font-family: 'PingFang Heavy';}
.side-menu-items li.active a { color: #ae9577; }
.side-menu-items li .line-decorate {position: absolute;right:3rem;top: 1.75rem;}
.side-menu-items li .line-decorate span { color: #fff; width: 1rem; height: 1px; float: right; }
.side-menu-items li.active .line-decorate span { border-bottom: 0.1rem solid #ae9577; animation: line-link 0.2s linear; -webkit-animation: line-link 0.2s linear; animation-fill-mode: forwards; }


.side-group-menu{ display: none; position: fixed; top: 0; width: 100%; height: 100vh; background:  #e70310; z-index: 99; transform: translateX(-100%); -ms-transform: translateX(-100%); /* IE 9 */ -moz-transform: translateX(-100%); /* Firefox */ -webkit-transform: translateX(-100%); /* Safari 和 Chrome */ -o-transform: translateX(-100%); -webkit-transition: -webkit-transform 0.25s ease-in-out; transition: transform 0.25s ease-in-out; }
.side-group-menu.isOpen { display: block; transform: translateX(0); -ms-transform: translateX(0); /* IE 9 */ -moz-transform: translateX(0); /* Firefox */ -webkit-transform: translateX(0%); -webkit-transition: -webkit-transform 0.25s ease-in-out; transition: transform 0.25s ease-in-out; }
.side-group-menu > .group-menu-items {width: 60%;top: 15%;position: absolute;left: 20%;}

.group-menu-items > li {line-height:4rem;position: relative;transform: translate3d(-540px,0px,0);}
.group-menu-items > li > a {color: #fff;font-size: 1.2rem;display: block;font-family: "Novum-light";}

.group-menu-items li.active a { color: #ae9577; }
.group-menu-items li .line-decorate { width: 8rem; position: absolute; right: 0; top: 2rem; height: 1px; }
.group-menu-items li .line-decorate span { color: #3e3e3e; border-bottom: 0.1rem solid #3e3e3e; width: 1rem; height: 1px; float: right; }
.group-menu-items li.active .line-decorate span { border-bottom: 0.1rem solid #ae9577; animation: line-link 0.2s linear; -webkit-animation: line-link 0.2s linear; animation-fill-mode: forwards; }

@keyframes line-link {
    0% { width: 0%; }
    100% { width: 100%; }
}

@-webkit-keyframes line-link /*Safari and Chrome*/
{
    0% { width: 0%; }
    100% { width: 100%; }
}



#menu-bg { width: 100%; height: 100%; position: absolute !important; overflow: hidden; z-index: -1; }
#menu-bg > li { width: 100%; height: 100%; }
.lines-1 { background: url('../Images/common/lines-1.png') no-repeat; background-size: 100% 100%; position: absolute; left: 0; top: 0; }

.lines-2 { background: url('../Images/common/lines-2.png') no-repeat; background-size: 100% 100%; position: absolute; left: 0; top: 0; }
.lines-3 { background: url('../Images/common/lines-3.png') no-repeat; background-size: 100% 100%; position: absolute; left: 0; top: 0; }

.side-menu .small-nav { width: 100%; /* margin: 25% auto 0; */ padding-left: 25%; position: absolute; bottom: 10%; }
.side-menu .small-nav > ul { display: block; }
.side-menu .small-nav > ul > li { float: left; /* margin: 0 1em; */ line-height: 1em; }
.side-menu .small-nav > ul > li > a { font-size: 0.875em; color: #fff; opacity: .4; }
.side-menu .small-nav > ul > li > a:hover { color: #ae9577; opacity: 1; }
.side-menu .small-nav > ul > li.devide { color: #fff; text-align: center; width: 4em; opacity: .4; }
.share-box.clearfix { display: block; margin: 2em 0; height: 2.25em; }
.side-menu .share-box > a { float: left; margin-right: 2em; opacity: .4; width: 2.25em; height: 2.25em; position: relative; }
.side-menu .share-box > a:hover { opacity: 1; }
nav .remark {/* font-size: 10px; */color: #a30011;letter-spacing: 0.1em;font-family: 'PingFangSC-Regular';text-align: center;font-size:.3rem;transform: translate3d(0px,150px,0);opacity:0}
nav .remark > span { opacity: .3; font-size: 0.8rem; }
nav .remark > a { color: #fff; opacity: .3; font-size: 0.9rem; }
nav .remark > a:hover { opacity: 1; color: #ae9577; }
nav .slogan{text-align:center;transform: translate3d(0px,150px,0);opacity:0;margin-top: calc(100vh - 50rem);margin-bottom:.5rem}
nav .slogan img{width:15rem;}
.copyright { font-size: .9rem; width: 100%;  position: relative; text-align: center; z-index: 8; }
.copyright > a { color: #fff; opacity: 0.6; }

.show-from-left, .show-delay-from-left { opacity: 0; -o-transform: translateX(-500px); -webkit-transform: translateX(-500px); transform: translateX(-500px); }
.show-from-right, .show-delay-from-right { opacity: 0; -o-transform: translateX(500px); -webkit-transform: translateX(500px); transform: translateX(500px); }
.show-from-bottom, .show-delay-from-bottom { opacity: 0; }
.show-from-top, .show-delay-from-top, .show-delay-fade-in { opacity: 0; }


/*屏幕分辨*/

@media screen and (min-width:320px) and (max-width:359px) {
    html { font-size: 53.31%; }
}

@media screen and (min-width:360px) and (max-width:374px) {
    html { font-size: 60%; }
}

@media screen and (min-width:375px) and (max-width:413px) {
    html { font-size: 75%; }
}

@media screen and (min-width:414px) and (max-width:639px) {
    html { font-size: 80%; }
}

@media screen and (min-width:640px) and (max-width:749px) {
    html { font-size: 106.56%; }
}

@media screen and (min-width:750px) {
    html { font-size: 125%; }
}

@media screen and (orientation:portrait) {
    /*  css[竖向定义样式]  */
    .portrait { width: 100%; display: block; }
    .landscape { display: none; }
}

@media screen and (orientation:landscape) {
    /*   css[横向定义样式]  */
    /*.portrait { display: none; }*/
    .landscape { display: block; background: #000; width: 100%; height: 100vh; z-index: 9999; position: absolute; }
    .landscape img { display: block; width: 206px; height: 117px; position: absolute; top: 50%; left: 50%; margin-left: -103px; margin-top: -76px; z-index: 9999; }
    .landscape p {width:100%; height: 30px; line-height: 30px; color: #fff; font-size: 10px; position: absolute; top: 50%;  text-align: center; margin-top: 42px; }

    .menu_Nva { display: none; }
    .copyright { display: none; }
}

.down-btn { display: block; left: 50%; margin-left: -2rem; position: absolute; bottom: 8rem; width: 4rem; height: 4rem;z-index:10}
.arrow { position: absolute; left: 50%; bottom: 1rem; -webkit-transform-origin: 50% 80%; transform-origin: 50% 80%; -webkit-transform: translate3d(-50%, -20%, 0); transform: translate3d(-50%, -20%, 0); }

.arrow-1 { -webkit-animation: arrow-movement 2s ease-in-out infinite; animation: arrow-movement 2s ease-in-out infinite; }

.arrow-2 { -webkit-animation: arrow-movement 2s 1s ease-in-out infinite; animation: arrow-movement 2s 1s ease-in-out infinite; }

.arrow:before,
.arrow:after { background: #fff; content: ''; display: block; height: 1px; position: absolute; top: 0; left: 0; width: 1.5rem; margin-left: -1rem; }

.arrow:before { -webkit-transform: rotate(45deg) translateX(-23%); transform: rotate(45deg) translateX(-23%); -webkit-transform-origin: top left; transform-origin: top left; }

.arrow:after { -webkit-transform: rotate(-45deg) translateX(23%); transform: rotate(-45deg) translateX(23%); -webkit-transform-origin: top right; transform-origin: top right; }
p.down-txt { color: #fff; position: absolute; bottom: 6rem; font-size: 1rem;width: 20rem; opacity: .7; letter-spacing: 0.1rem; left: 50%; margin-left: -10rem; text-align: center; z-index:10}
@-webkit-keyframes arrow-movement {
    0% {
        opacity: 0;
        bottom: 3em;
    }

    70% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes arrow-movement {
    0% {
        opacity: 0;
        bottom: 3em;
    }

    70% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}
.addBtn {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer;
}
.addBtn::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.5rem;
    margin-left: -.75rem;
    margin-top: -1.5px;
    border-top: 2px solid;
}
.addBtn::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    height: 1.5rem;
    margin-left: -1.5px;
    margin-top: -.75rem;
    border-left:2px solid;
    -webkit-transition: all .25s linear;
    transition: all .25s linear;
      transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
}
.active.addBtn::after {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
}
.child-menu{line-height:2.5rem;margin-bottom:1rem;display:none}
.child-menu a{font-size:1.2rem;color:#fff}
.side-menu-items > li:last-child{border-bottom:none}
footer{color:#fff;background:#e70310;text-align:center;padding:5rem 0 0}
.company {
    width: 20rem;
    margin-bottom: .5rem;
}
.code{width:8rem;margin:3rem 0}
.muse{background:#a30011;margin-top:1.5rem;font-size:.9rem;padding:.25rem 0}
.muse a{color:#c60210}
.call {
    color: #fff;
    margin-top: 1rem;
    display: inline-block;
}
.call img{width:1.5rem;vertical-align:text-top}
.triangle {
    display: inline-block;
    height: 5px;
    width: 5px;
    border-left: 5px solid #fff;
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    margin-bottom: 1px;
}