@charset "UTF-8";
* {margin: 0;padding: 0;border: none;outline: none; }
body,html {height: 100%; width: 100%; background: #bd0610 none repeat scroll; color: #ffffff;}

body {font-size: 0.875rem; font-weight: normal;font-family: "微软雅黑",-apple-system,"微软雅黑 Light",Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
    letter-spacing: 0.05em; overflow-x: hidden;	line-height: 1.8; }
img{max-width: 100%;}
ul,li,ol{list-style: none;}
p{margin-bottom:0.5rem;}
.p-1{ padding: 1rem;}
.pb-1{ padding-bottom:1rem;}
.pt-1{ padding-top:1rem;}
.mt-1{ margin-top:1rem;}
.mt-2{ margin-top:2rem;}
.mt-3{ margin-top:3rem;}
.mt-4{ margin-top:4rem;}
.mt-5{ margin-top:5rem;}
.mb-1{ margin-bottom:1rem;}
.position-relative{ position: relative;}
.text-center{ text-align: center;}
.clearfix{clear:both;}
.banner{ line-height:0; width: 100%;}
.wrap{width: 100%; background: url("image/bg.jpg") top center no-repeat; background-size: 100% 100%;padding-bottom: 3rem;}
.container{width: 1200px; margin: 0 auto;}
.service{ display: flex; flex-wrap: wrap; justify-content: center; }
.service .li{ width: 20%; text-align: center;margin-top: 2rem;}
.service .li .txt{color: #f6dc8d; font-size: 16px; width: 80%; margin: 1rem auto 0; line-height: 1.4;}
.mokuai h1{ background: url("image/title.png") center center no-repeat; background-size: auto 100%; text-align: center; color: #ffd672; padding: 1rem 0 2rem;}
.mokuai .title{ text-align: center; font-size: 1.8rem;color: #ffd672; font-weight: 600; position: relative;}
.mokuai .title span::after{content: ""; position: absolute; bottom: -1rem; width: 30%; left: 35%; height: 1px; border-top:2px #ffd672 solid;}
.mokuai .ul{ display: flex; flex-wrap: wrap;}
.mokuai .ul .li{width: 20%; padding:1rem 1.5%; display: flex; align-items: center;  margin-right: 2%; margin-bottom: 2%; background-color: #920004; border-radius: 1rem;}
.mokuai .ul .li:nth-child(4n){margin-right: 0;}
.mokuai .ul .li .name{ width: 24px; font-size: 24px; line-height: 1.4; color: #ffd672; position: relative; margin-right: 1rem;}
.mokuai .ul .li .name::after{ content: ""; position: absolute; right:-1.5rem; top:3%;width: 1px; height: 94%; border-left: 1px #ffd672 solid;}
.mokuai .ul .li .txt{ flex: 1; width: 100%; text-align: center; line-height: 2; color: #e1d2d3; font-size: 1rem;}
.fm-box .title{ font-size: 2rem; text-align: center;}
.fm-box .title span::before{ content: ""; position: absolute; top:-1rem; left: -150%; width: 400%; height: 2px; background: linear-gradient(to right,rgba(193,39,30,1),rgba(255,255,208,1),rgba(193,39,30,1));}
.fm-box .title span::after{ content: ""; position: absolute; bottom:-1rem; left: -150%; width: 400%; height: 2px; background: linear-gradient(to right,rgba(193,39,30,1),rgba(255,255,208,1),rgba(193,39,30,1));}
.fm-box .fm-input{ width: 400px; padding: 0.5rem 0; margin-bottom: 2rem; background-color: transparent; color: #fff; border-bottom: 1px #df6c46 solid;}
.fm-box .fm-input::-webkit-input-placeholder,.fm-box1 .fm-input::-webkit-input-placeholder{
    color: #da666c;
    font-size: 1rem;
}
.fm-box .fm-input:-moz-placeholder,.fm-box1 .fm-input:-moz-placeholder{
    color: #da666c;
    font-size: 1rem;
}

.fm-box .fm-input::-moz-placeholder,.fm-box1 .fm-input::-moz-placeholder{
    color: #da666c;
    font-size: 1rem;
}

.fm-box .fm-input:-ms-input-placeholder,.fm-box1 .fm-input:-ms-input-placeholder{
    color: #da666c;
    font-size: 1rem;
}
.fm-box .btn{ background-color: #9d0008; color: #ffe56a; padding: 0.8rem 2rem; border-radius: 0.5rem; font-size: 1rem; cursor: pointer; transition: all 0.6s;}
.fm-box .btn:hover{ background-color:#ffd672; color: #000; }
.fm-box1{ display: flex; justify-content: center; align-items: center;}
.fm-box1 .fm-input{ width: 400px; padding: 1rem 1rem; line-height: 1;  background-color: #a00007; color: #fff; }
.fm-box1 .btn{ background-color: #e4ba55; color: #a00007; padding: 0.8rem 3rem; border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; font-size: 2rem; font-weight: bold; cursor: pointer; transition: all 0.6s;}
.fm-box1 .btn:hover{ background-color:#00ba61; color: #fff; }

footer .about{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
footer .about .qr{ width: 10%; margin-right: 4rem; position: relative; line-height: 0;}
footer .about .qr::after{content: ""; position: absolute; right:-2rem; top:0; width: 1px; height: 100%; border-left:1px #fdd470 solid;}
footer .about .ab{ width: 45%; margin-right: 5%;}
footer .about .contact{width: 30%;}
footer .about .title{ font-size:1.2rem; color: #fdd470; font-weight: 600; margin-bottom: 0.5rem;}
.copyright{ text-align: center; margin-top: 3rem; padding-bottom: 2rem; color: #ff737a; position: relative;}
.copyright::before{content: ""; position: absolute; left: 0; top:-1rem; width: 100%; height: 1px; border-top:1px #df6c46 solid;}

.fixnav{ position: fixed; bottom: 0; left: 0;width: 100%; text-align: center; background-color:#e4ba55; padding: 1rem; display: flex; justify-content: center;}
.fixnav a{ color: #a00007; text-decoration: none; margin-right: 1.5rem; font-size: 1.2rem;}
.fixnav a:hover{color: #fd482c;}

@media only screen and (max-width:1200px)
{
    .container{ width: 98%; padding: 0 1%;}
}
@media only screen and (max-width:980px){
    .service .li{width: 25%;}
    .service .li .img img{width: 90%;}
    .mokuai h1{ background-size: 100% auto;}
    .mokuai .ul .li{width: 29%;}
    .mokuai .ul .li:nth-child(4n){ margin-right: 2%;}
    .mokuai .ul .li:nth-child(3n){ margin-right: 0;}
}
@media only screen and (max-width:768px){
    .container{width: 96%; padding: 0 2%;}
    .service .li{ width: 33.33333%;}
    .service .li .img img{width: 80%;}
    .mokuai h1{ font-size: 1.2rem;}
    .fixnav a{font-size: 0.75rem;}
}
@media only screen and (max-width:480px){
    .container{width: 92%; padding: 0 4%;}
    .service .li{ width: 50%;}
    .service .li .img img{width: 50%;}
    .service .li .txt{ font-size: 0.75rem;}
    .mokuai h1{ font-size: 0.825rem; padding: 1.2rem 0 1.5rem;}
    .mokuai .ul .li{ width: 46%;}
    .mokuai .ul .li:nth-child(3n){ margin-right:2%;}
    .mokuai .ul .li:nth-child(2n){ margin-right:0;}
    .mokuai .ul .li .name{ font-size: 20px;}
    .mokuai .ul .li .name::after{ right: -0.8rem;}
    .fm-box1 .fm-input{width: 300px;}
    .fm-box1 .btn{ padding: 0.5rem 2rem;}
    footer .about .qr{ margin-right: 0; width: 100%; text-align: center;}
    footer .about .ab,footer .about .contact{width: 100%; margin-right: 0;}
    .fixnav a{font-size: 0.5rem;}
}