@charset "UTF-8";

*{
    padding: 0;
    margin: 0;
    outline: none;
    -webkit-tap-highlight-color: transparent;/*清除移动端点击高亮效果*/
    -webkit-box-sizing: border-box;/*兼容移动端主流浏览器*/
    box-sizing: border-box;
}
@font-face {
    font-family: "Anton";
    src: url('../font/Anton/Anton-Regular.ttf') format('truetype');
    url("../font/Anton/Anton-Regular.woff2") format("woff2"),
    url("../font/Anton/Anton-Regular.woff") format("woff"),
    /*url("../font/Anton/Anton-Regular.otf") format("opentype"),*/
    url("../font/Anton/Anton-Regular.eot") format("embedded-opentype"),
    url("../font/Anton/Anton-Regular.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}
@font-face{
    font-family: "Antonio";
    src: url("../font/Antonio/Antonio-Regular.otf") format("opentype"),
    url('../font/Antonio/Antonio-Regular.ttf') format('truetype'),
    url('../font/Antonio/Antonio-Regular.woff') format('woff'),
    url("../font/Antonio/Antonio-Regular.eot") format("embedded-opentype"),
    url('../font/Antonio/Antonio-Regular.woff2') format('woff2'),
    url('../font/Antonio/Antonio-Regular.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face{
    font-family: "siyuan";
    src: url("../font/siyuan/siyuan-Normal.otf") format("opentype"),
    url('../font/siyuan/siyuan-Normal.ttf') format('truetype');
    url('../font/siyuan/siyuan-Normal.eot') format("embedded-opentype"),
    url('../font/siyuan/siyuan-Normal.woff') format('woff'),
    url('../font/siyuan/siyuan-Normal.woff2') format('woff2'),
    url('../font/siyuan/siyuan-Normal.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

body{
    font-family: "siyuan","Antonio","Arial","Helvetica","Microsoft YaHei","微软雅黑","微軟雅黑","宋体";
    color: #262626;
    background-color: #F8F8F8;
    font-size: 16px;
    text-transform: uppercase;
}
i,em{font-style: normal;}
a{text-decoration: none;color: #030000;}
ul,ol{list-style: none;}
section{position: relative;}
input{background-color: transparent;border: none;}
input::-webkit-input-placeholder { /* WebKit browsers */
    color:    #ccc;
    letter-spacing: 1px;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #ccc;
    letter-spacing: 1px;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #ccc;
    letter-spacing: 1px;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #ccc;
    letter-spacing: 1px;
}
.f18{font-size: 18px;}
.f24{font-size: 24px;}
.f28{font-size: 28px;}
.f36{font-size: 36px;}
.f48{font-size: 48px;}
.animate{opacity: 0;}
@keyframes TtoB {
    0%{
        opacity: 0;
        -webkit-transform: translateY(-50px);
        -moz-transform: translateY(-50px);
        -ms-transform: translateY(-50px);
        -o-transform: translateY(-50px);
        transform: translateY(-50px);
    }
    100%{
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes BtoT {
    0%{
        opacity: 0;
        -webkit-transform: translateY(50px);
        -moz-transform: translateY(50px);
        -ms-transform: translateY(50px);
        -o-transform: translateY(50px);
        transform: translateY(50px);
    }
    100%{
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes LtoR {
    0%{
        opacity: 0;
        -webkit-transform: translateX(-50px);
        -moz-transform: translateX(-50px);
        -ms-transform: translateX(-50px);
        -o-transform: translateX(-50px);
        transform: translateX(-50px);
    }
    100%{
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes RtoL {
    0%{
        opacity: 0;
        -webkit-transform: translateX(50px);
        -moz-transform: translateX(50px);
        -ms-transform: translateX(50px);
        -o-transform: translateX(50px);
        transform: translateX(50px);
    }
    100%{
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes MINtoMAX {
    0%{
        opacity: 0;
        -webkit-transform: scale(.8);
        -moz-transform: scale(.8);
        -ms-transform: scale(.8);
        -o-transform: scale(.8);
        transform: scale(.8);
    }
    100%{
        opacity: 1;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes MAXtoMIN {
    0%{
        opacity: 0;
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
        transform: scale(1.2);
    }
    100%{
        opacity: 1;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes W0toW30 {
    0%{width: 0}
    100%{width: 30%;}
}
@keyframes W30toW100 {
    0%{width: 30%}
    100%{width: 100%;}
}
@keyframes W0toW50 {
    0%{width: 0}
    100%{width: 50%;}
}
@keyframes W0toW100 {
    0%{width: 0}
    100%{width: 100%;}
}
@keyframes H0toH100 {
    0%{height: 0}
    100%{height: 100%;}
}


/*头部导航--------------- 头部导航--------------- 头部导航--------------- 头部导航---------------*/
@media screen and (max-width:600px){
	.miLogoImg{
		width: 333px;
		position: relative;
		right: 76px
	}
}
@media screen and (min-width:600px){
	.miLogoImg{
		width: 400px;
		position: relative;
		right: 80px
	}
}
header{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 35px 30px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}
header h1 a{
    display: block;
}
header nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header nav>ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header nav>ul li{
    padding: 0 15px;
}
header nav>ul li>a{
    color: #fff;
    /*margin: 0 15px;*/
    padding: 0 0 10px 0;
    position: relative;
}
header nav>ul li.active>a::after{
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #030000;
}
header nav>ul li:hover>a::after{
    -webkit-animation: W0toW100 ease .5s both;
    -o-animation: W0toW100 ease .5s both;
    animation: W0toW100 ease .5s both;
}
header nav>div{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 15px;
}
header nav>div a{
    margin: 0 8px;
}
header nav>div a img{
    display: block;
    width: 100%;
}


header .btn{
    display: none;
    width: 6vw;
}
header .btn img{
    display: block;
    width: 100%;
}
header .sideslipMask{
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0,0,0,0.5);
    display: none;
}
header .sideslipMask .sideslip{
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    right: -50%;
    bottom: 0;
    background-color: #1C1F2A;
    /*-webkit-transition: all ease 0.5s;*/
    /*-moz-transition: all ease 0.5s;*/
    /*-ms-transition: all ease 0.5s;*/
    /*-o-transition: all ease 0.5s;*/
    /*transition: all ease 0.5s;*/
}
header .sideslipMask .sideslip ul{
    margin-top: 10px;
}
header .sideslipMask .sideslip ul li{
    border-bottom: 1px solid #282B39;
    position: relative;
}
header .sideslipMask .sideslip ul li>a{
    /*display: flex;*/
    /*justify-content: space-between;*/
    /*align-items: center;*/
    display: block;
    padding: 0 20px;
    letter-spacing: 1px;
    color: #fff;
    height: 45px;
    line-height: 45px;
    text-align: left;
}
header .sideslipMask .sideslip ul li.active>a{
    color: #E1251B;
}


/*头图 ------------------头图 ------------------头图 ------------------头图 ------------------*/
.headImg{
    position: relative;
}
.headImg>img{
    display: block;
    width: 100%;
}
.headImg div{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
    color: #fff;
}
.headImg div p{
    font-size: 28px;
}
.headImg div h2{
    font-size: 48px;
    display: flex;
    align-items: center;
    position: relative;
}
.headImg div h2 i{
    color: #030000;
}
.headImg div h2::after{
    content: '';
    position: absolute;
    bottom: -10%;
    left: 50%;
    margin-left: -15%;
    /*width: 30%;*/
    height: 3px;
    background-color: #030000;
    -webkit-animation: W0toW30 .5s ease 1.1s both;
    -o-animation: W0toW30 .5s ease 1.1s both;
    animation: W0toW30 .5s ease 1.1s both;
}
.headImg .bom{
    position: absolute;
    bottom: 0;
    left: 0;
    /*width: 100%;*/
    background-color:#e2e2e2;
}
.headImg .bom span{
    display: block;
    /*width: 50%;*/
    height: 10px;
    background-color: #030000;
    -webkit-transform: skewX(-40deg) translateX(-5px);
    -moz-transform: skewX(-40deg) translateX(-5px);
    -ms-transform: skewX(-40deg) translateX(-5px);
    -o-transform: skewX(-40deg) translateX(-5px);
    transform: skewX(-40deg) translateX(-5px);
}


footer{
    background-color: #262626;
    color: #5d5d5d;
}
footer .contain{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 82%;
    margin: 0 auto;
    height: 160px;
}
footer .contain>div{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

footer .contain>div .address{
    display: flex;
    justify-content: center;
    flex-flow: column nowrap;
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid #5d5d5d;
    font-size: 14px;
}
footer .contain>div:last-child a{
    margin: 0 10px;
}
footer .contain>div:last-child a img{
    filter: brightness(50%);
}
footer .contain>div:last-child a img:hover{
    filter: brightness(100%);
}

footer .copyR{
    font-size: 14px;
    text-align: center;
    padding: 18px 0;
    border-top: 1px solid #2d2d2d;
    text-transform: none;
}






/*媒体查询 ------------------ 媒体查询 ------------------ 媒体查询 ------------------*/
@media screen and (max-width: 1500px) {
    body{
        font-size: 14px;
    }
    header{
        padding: 25px 30px;
    }
    header h1 a img{
        /*width: 150px;*/
        width: 350px;
    }
    header nav ul li{
        padding: 0 10px;
    }
    footer .contain{
        /*width: 1080px;*/
        height: 120px;
    }
    .headImg .bom span{
        height: 8px;
    }
}
@media screen and (max-width: 1280px){
    .f18{font-size: 16px;}
    .f24{font-size: 22px;}/*f24*/
    .f28{font-size: 20px;}
    .f36{font-size: 30px;}
    .f48{font-size: 36px;}
    header{
        padding: 20px 30px;
    }
    .headImg div p{
        font-size: 20px;
    }
    .headImg div h2{
        font-size: 36px;
    }
}
@media screen and (max-width: 1080px) {
    .f18{font-size: 14px;}
    .f24{font-size: 22px;}
    .f28{font-size: 18px;}
    .f36{font-size: 26px;}
    .f48{font-size: 32px;}
    body{
        font-size: 12px;
    }
    header{
        padding: 16px 30px;
    }
    header h1 a img{
        /*width: 150px;*/
        width: 350px;
    }
    header nav ul li>a{
        padding: 0 0 8px 0;
    }
    header nav>ul li{
        padding: 0 8px;
    }
    header nav>ul li.active>a::after{
        height: 2px;
    }
    header nav>div a img{
        width: 15px;
    }
    .headImg div p{
        font-size: 18px;
    }
    .headImg div h2{
        font-size: 32px;
    }
    .headImg .bom span{
        height: 5px;
    }
    footer .contain{
        height: 90px;
    }
    footer .contain>div .address{
        font-size: 12px;
    }
    footer .contain>div>img{
        width: 150px;
    }
    footer .copyR{
        font-size: 12px;
    }
}
@media screen and (max-width: 800px) {
    .f18{font-size: 13px;}
    .f24{font-size: 20px;}
    .f28{font-size: 14px;}
    .f36{font-size: 22px;}
    .f48{font-size: 26px;}
    header{
        padding: 14px 25px;
    }
    header h1 a img{
        /*width: 120px;*/
        width: 200px;
    }
    header nav ul li>a{
        padding: 0 0 6px 0;
    }
    header nav>ul li{
        padding: 0 5px;
    }
    header nav>div a img{
        width: 13px;
    }
    .headImg div p{
        font-size: 14px;
    }
    .headImg div h2{
        font-size: 26px;
    }
}
@media screen and (max-width: 650px) {
    .f18{font-size: 13px;}
    .f24{font-size: 18px;}
    .f28{font-size: 14px;}
    .f36{font-size: 22px;}
    .f48{font-size: 26px;}
    body{
        font-size: 10px;
    }
    footer .contain>div .address{
        font-size: 10px;
    }
    footer .contain>div:last-child a{
        margin: 0 5px;
    }
    footer .contain>div a img{
        display: block;
        width: 75%;
    }
    footer .copyR{
        font-size: 10px;
    }
}
@media screen and (max-width: 440px) {
    .f18{font-size: 0.18rem;}
    .f24{font-size: 0.24rem;}
    .f28{font-size: 0.28rem;}
    .f36{font-size: 0.36rem;}
    .f48{font-size: 0.48rem;}
    /*header nav ul li>a{*/
        /*font-size: 0.1rem;*/
        /*margin: 0 0.05rem;*/
        /*padding: 0 0 0.1rem 0;*/
    /*}*/
    header{
        padding: 0.2rem 0.25rem;
    }
    header h1{
        margin-top: -0.05rem;
    }
    header h1 a img{
        /*width: 1.2rem;*/
        width: 1.6rem;
    }
    header nav>div a{
        margin: 0 0.4rem;
    }
    header nav>div a img{
        width: 0.36rem;
    }
    header nav>ul,header nav>div a:last-child{
        display: none;
    }
    header .btn{
        display: block;
    }
    /*header nav>div{*/
        /*margin-left: 0.15rem;*/
    /*}*/
    /*header nav>div a{*/
        /*margin: 0 0.08rem;*/
    /*}*/
    /*header nav>div a img{*/
        /*width: 0.15rem;*/
    /*}*/
    /*header nav ul li.active>a{*/
        /*border-bottom: 1px solid #b01f23;*/
    /*}*/
    .headImg div{
        top: 60%;
    }
    .headImg div p{
        font-size: 0.18rem;
    }
    .headImg div h2{
        font-size: 0.26rem;
    }
    .headImg div h2::after{
        height: 1px;
    }
    .headImg .bom span{
        height: 2px;
    }
    footer .contain{
        width: 90%;
        height: 1.6rem;
    }
    footer .contain>div>img{
        width: 1.9rem;
    }
    footer .contain>div .address{
        font-size: 0.14rem;
    }
    footer .copyR{
        font-size: 0.14rem;
    }
}