@charset "utf-8";
html{min-height: 100%; height: 100%;}
body{ font-family:-apple-system,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif; margin:0 auto; padding:0; font-size:14px; background:#fff; position: relative; color: #3e3a39;}
img{max-width:100%; border:0; vertical-align:top; max-height: 100%;}
ul,li{margin:0; padding:0; list-style:none;}
p,h1,h2,h3,h4,h5,dl,dd,dt{margin:0; padding:0;}
.clearfix:after {content:"\200B"; display:block; height:0; clear:both; }
.clearfix { *zoom:1; }
.clear{clear: both;}
.blank{clear: both; height: 20px;}
*{tap-highlight-color: rgba(0,0,0,0); focus-ring-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-focus-ring-color: rgba(0, 0, 0, 0); -moz-tap-highlight-color: rgba(0,0,0,0); -moz-focus-ring-color: rgba(0, 0, 0, 0); }
*:focus {outline: none;}
a{text-decoration:none; color: #3e3a39;}
a:hover{color: #a51e23;}
a:active{color: #a51e23;}
.blank{width: 100%; height: 10px; clear: both;}
.container{ width: 100%; max-width: 1200px; margin: 0 auto;  position: relative;}
.container:after {content:"\200B"; display:block; height:0; clear:both; }
.container { *zoom:1; }

.txt_ellipsis{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

.fl{float: left;}
.fr{float: right;}
.hide{display: none;}
.text-center{text-align: center;}

header{background: #fff; height: 90px; z-index: 99; position: relative; border-bottom: 1px solid #eee;}
.fixhead{position: fixed; left: 0; right:0; top:0; height:90px;background: #fff;border-bottom: 1px solid #eee;}
header .container{height: 100%;}
.logo{width: 200px; height: 90px; text-align: center; line-height: 90px;}
.logo a{display: block; height: 100%; background: url(../images/logo.png) center no-repeat; background-size: auto 56px;}
.logo img{vertical-align: middle; opacity: 0;}
.menuitem{display: inline-block; position: relative;text-transform:uppercase;}
.menuitem a{line-height: 90px; display: inline-block; padding: 0 30px; font-size: 16px;}
.menuitem a.on{color: #a51e23;}
.submenu{position: absolute; left: 50%; top: 75%; border-top: 2px solid #a51e23; background: #fff; box-shadow: 0 10px 10px rgba(105,105,105,.33); display: none; z-index: 99; margin-left: -50%; min-width: 100%;}
.submenu a{line-height: 52px; display: block; padding: 0 10px; text-align: left; white-space: nowrap; font-size: 14px;}
.submenu a.on{background: #a51e23; color: #fff;}
.submenu a.on:hover{color: #fff;}
.submenu a:hover{color: #a51e23;}
.topmenu .menuitem:hover .submenu{display: block;}
.submenu .sm{position: relative;}
.submenu2{position: absolute; left: 100%; top: 10%; border-top: 2px solid #a51e23; background: #fff; box-shadow: 0 2px 10px rgba(105,105,105,.33); display: none; z-index: 100;}
.submenu .sm:hover .submenu2{display: block;}

.menuicon{position: absolute; top: 0; right: -20px; width: 70px; height: 100%;display: none;}
.menuicon .micon{width: 30px; height: 3px; background: #a51e23;  position: absolute;  right: 20px; top: 50%; margin-top: -1px; -webkit-transition: all 0.2s ease-in-out;}
.menuicon .micon::before{content: ""; width: 100%; height: 3px; background: #a51e23; position: absolute; top: -7px; left: 0;-webkit-transition: all 0.2s ease-in-out;}
.menuicon .micon::after{content: ""; width: 100%; height: 3px; background: #a51e23; position: absolute; bottom: -7px; left: 0;-webkit-transition: all 0.2s ease-in-out;}
.menuicon.active .micon{background: none;}
.menuicon.active .micon::before{transform: rotate(45deg); top: 0;}
.menuicon.active .micon::after{transform: rotate(-45deg); bottom: 0;}
.rightmenu{display: none;}
.rightmenu a.on{color:#fff;}

/*icon*/
.icon-left{ display: inline-block; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); height: 10px; width: 10px; border-width: 0 0 1px 1px; border-color: #777; border-style: solid; position: relative;}
.icon-right{ display: inline-block; -webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); height: 10px; width: 10px; border-width: 0 0 1px 1px; border-color: #777; border-style: solid; position: relative;}
.icon-down{ display: inline-block; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); height: 10px; width: 10px; border-width: 0 0 1px 1px; border-color: #777; border-style: solid; position: relative;}
.icon-up{ display: inline-block; transform: rotate(135deg); height: 10px; width: 10px; border-width: 0 0 2px 2px; border-color: #777; border-style: solid; position: relative;}
a:hover .icon-right{border-color: #a51e23;}
.icon-plus{width: 20px; height: 2px; background: #777; display: inline-block; position: relative;}
.icon-plus:after{content: ""; left: 9px; width: 2px; top: -9px; bottom: -9px; background: #777; position: absolute;}
.icon_tel{background: url(../images/icon_tel1.png) center no-repeat; background-size: contain; width: 25px; height: 25px; display: inline-block; vertical-align: middle;}
.icon_facebook{background: url(../images/facebook1.png) center no-repeat; background-size: contain; width: 25px; height: 25px; display: inline-block; vertical-align: middle;}

.banner{height: 500px; position: relative;}
.banner_bg{position: relative; z-index: 1; height: 100%; background-size: cover; background-position: center;}
.banner_bg .swiper-container{height: 100%;}
.banner_bg .swiper-slide{height: 100%; background-size: cover; background-position: center;}
.banner_txt{position: absolute; z-index: 2; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,.2);}
.banner_txt .container{padding-left: 50px; box-sizing: border-box; color: #fff;}
.banner_txt h1{font-size: 58px;text-transform:uppercase;}
.banner_txt h2{font-size: 46px;}
.banner_txt h4{font-size: 20px; font-weight: 300;}
.banner_txt .btn{display: inline-block; border: 1px solid #fff; background: none; line-height: 40px; padding: 0 50px; border-radius: 10px; margin-top: 10px; color: #fff;}
.banner_txt .btn:hover{background: #a51e23; color: #fff; border-color: #a51e23;}

.btn{background: none; border: 1px solid #999; color: #999; display: inline-block; padding: 0 50px; border-radius: 10px; line-height: 50px; -webkit-transition: all 0.5s ease-in-out;}
.btn:hover{color: #fff; background: #a51e23; border-color: #a51e23;}

.flinks{line-height: 30px; margin-top: 30px;}
.flinks .tit{border-top: 1px solid #dedede; border-bottom: 1px solid #dedede; padding: 5px;}
.flinks .txt{padding: 10px;}
.flinks .txt a{padding-right: 15px; font-size: 12px; border-right: 1px solid #ccc; margin-right: 15px; color: #999;}
.flinks .txt a:last-child{border-right: 0; margin-right: 0;}

footer{background: #0b0c20; color: #fff; line-height: 40px; font-size: 14px;}
footer .flogo{padding-top: 20px;}
footer .flogo img{vertical-align: middle;}
footer .addr{float: left; margin-left: 80px;}
footer .follow{float: right;}
.footinfo{ display: flex; justify-content: space-between; align-items: flex-start;}
.footnav{line-height: 30px;text-transform:uppercase;}
.footnav a{color: #ddd;}
.footinfo{padding: 20px 0; line-height: 30px;}
.footinfo h3{font-size: 24px; margin-bottom: 10px;}
footer p{display: inline-block; margin-right: 40px;}
footer a{color: #fff;}
footer a:hover{color: #fff;}
.follow .tel{background: url(../images/icon_tel.png) left center no-repeat; background-size: auto 30px; line-height: 40px; padding-left: 40px; font-size: 32px;margin-top: 10px;}
.follow .sns{margin-top: 15px; padding-left: 50px;}
.follow .sns a{ margin-right: 10px;}
.follow .sns img{height: 30px;}
.copyright{text-align: center; padding: 20px; border-top: 1px solid #2f3041; color: #a3a3a5; font-size: 14px;}


/*分页*/
.pagelist{ text-align:center; padding:10px; background: #f2f2f2;}
.pagelist a{display:inline-block; color:#666; padding: 0 5px;}
.pagelist span{display:inline-block; color:#666; padding: 0 5px;}
.pagelist a.disable,.pagelist a.disable:hover{color: #9fa0a0; cursor: default;}
.pagelist a.on,.pagelist a:hover{color: #c8161d;}

.loadmore{text-align: center; padding: 0 80px 80px; cursor: pointer; color: #8d8d8d;}

.righttool{position: fixed; z-index: 5; right: 20px; top: 50%; width: 50px;}
.righttool a{ background: rgba(165,30,35,.6); width: 50px; height: 50px; line-height: 50px; color: #fff; text-align: center; font-size: 20px; border-radius: 100%; z-index: 99; display: inline-block; margin-top: 10px;}
.righttool .icon-up{border-color: #fff;}

/** iPad **/
@media only screen and (min-width: 768px) and (max-width: 1201px) {
    header{padding: 0 15px;}
    .menuitem a{padding: 0 15px;}
}

@media only screen and (min-width: 320px) and (max-width: 840px) {
    .rightmenu{position: fixed; top: 100px; bottom: 0; right: -66%; width: 66%; text-align: center; -webkit-transition: all 0.2s ease-in-out; background: #a51e23;}
    .menuicon{display: block;}
    .topmenu{display: none;}
    .rightmenu{display: block;}
    .rightmenu.open{display: block; right: 0; -webkit-transition: all 0.2s ease-in-out;}
    .menuitem{display: block; color: #fff; position: relative; z-index: 2;}
    .menuitem>a{display: block; color: #fff; border-bottom: 1px solid #c73137; text-align: left; font-size: 18px;}
    .menuitem a.on{background-color: #c7161e; color: #fff;}
    .menuitem a:on{color: #fff;}
    .rightmenu .menuitem a{line-height: 60px; height: 60px;}
    .rightmenu.open .cover{position: fixed; z-index: 1; left: 0; right: 0; bottom: 0; top: 50px;}
}
/** iPhone **/
@media only screen and (min-width: 320px) and (max-width: 768px) {
	body{font-size: 16px;}
    header{padding: 0 20px; height: 60px;}
    .fixhead{height:60px;padding: 0 20px; box-shadow: 0 2px 10px rgba(105,105,105,.11);}
    .logo{width: 120px; height: 60px; line-height: 60px;  -webkit-transition: all 0.2s ease-in-out;}
    .logo a{background-size: auto 37px;}
    .rightmenu{position: fixed; top: 60px; bottom: 0; right: -66%; width: 66%; text-align: center; -webkit-transition: all 0.2s ease-in-out; background: #a51e23; overflow: auto;}
    .menuicon{display: block;}
    .topmenu{display: none;}
    .rightmenu{display: block;}
    .rightmenu.open{display: block; right: 0; -webkit-transition: all 0.2s ease-in-out;}
    .menuitem{display: block; color: #fff; position: relative; z-index: 2;}
    .menuitem>a{display: block; color: #fff; border-bottom: 1px solid #c73137; text-align: left; font-size: 18px;}
    .menuitem a.on{background-color: #de3036; color: #fff;}
    .menuitem a:on{color: #fff;}
    .rightmenu .menuitem a{line-height: 60px; height: 60px;}
    .rightmenu.open .cover{position: fixed; z-index: 1; left: 0; right: 0; bottom: 0; top: 50px;}
    .submenu{right: auto; left: auto; width: auto; top: 0; display: block; position: relative; display: none; box-shadow: none; border-bottom: 1px solid #e12e36; margin: 0; background: #c12d33;}
    .submenu a{color: #fff; text-align: left; padding: 0 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px;}
    .submenu a:hover,.submenu a:active{color: #fff;}
    .submenu2{ background: #cf3238; left: auto; width: 100%; position: relative; top: auto; border: 0; box-shadow: none;}
    .banner{height: 300px;}
    .banner_txt .container{padding-left: 10%;}
    .banner_txt h1{font-size: 32px; margin-top: 10px;}
    .banner_txt h2{font-size: 28px;}
    .banner_txt h4{font-size: 14px;}
    .banner_txt .btn{line-height: 40px; padding: 0 40px; border-radius: 5px;}
    .rightmenu .submenu{border-top: 0;}
    .flinks{font-size: 14px; line-height: 24px;}
    footer{ line-height: 24px}
    footer .flogo{line-height: 40px; padding: 0; width: 120px; height: 60px; margin-top: 10px;}
    .copy{font-size: 12px;}
    .footnav{line-height: 30px; padding: 5px 0; display: none;}
    .footnav a{padding: 0 10px;}
    .footinfo{padding: 10px 20px; box-sizing: border-box;}
    .follow .tel{background-size: auto 20px; padding-left: 30px; font-size: 22px; margin-top: 0;}
    .follow .sns{margin-top: 0; padding-left: 30px;}
    .follow h3{display: none;}
}