@import "reset.css";
@import "animate.css";

@media (min-width: 640px) {
    .container {
        max-width:640px
    }
}

@media (min-width: 768px) {
    .container {
        max-width:768px
    }
}

@media (min-width: 1024px) {
    .container {
        max-width:1024px
    }
}

@media (min-width: 1280px) {
    .container {
        max-width:1280px
    }
}

@media (min-width: 1536px) {
    .container {
        max-width:1536px
    }
}

.visible {
    visibility: visible
}

.fixed {
    position: fixed
}

.absolute {
    position: absolute
}

.relative {
    position: relative
}

.inset-0 {
    inset: 0px
}

.mt-10 {
    margin-top: 2.5rem
}

.mt-4 {
    margin-top: 1rem
}

.block {
    display: block
}

.flex {
    display: flex
}

.grid {
    display: grid
}

.contents {
    display: contents
}

.hidden {
    display: none
}

.w-full {
    width: 100%
}

.transform {
    transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.grid-cols-2 {
    grid-template-columns: repeat(2,minmax(0,1fr))
}

.grid-cols-3 {
    grid-template-columns: repeat(3,minmax(0,1fr))
}

.grid-cols-4 {
    grid-template-columns: repeat(4,minmax(0,1fr))
}

.grid-rows-2 {
    grid-template-rows: repeat(2,minmax(0,1fr))
}

.grid-rows-3 {
    grid-template-rows: repeat(3,minmax(0,1fr))
}

.\!flex-col {
    flex-direction: column!important
}

.flex-col {
    flex-direction: column
}

.flex-wrap {
    flex-wrap: wrap
}

.justify-center {
    justify-content: center
}

.justify-between {
    justify-content: space-between
}

.gap-10 {
    gap: 2.5rem
}

.gap-4 {
    gap: 1rem
}

.gap-6 {
    gap: 1.5rem
}

.border {
    border-width: 1px
}

.bg-red-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(239 68 68 / var(--tw-bg-opacity))
}

.object-fill {
    -o-object-fit: fill;
    object-fit: fill
}

.p-3 {
    padding: .75rem
}

.text-left {
    text-align: left
}

.text-center {
    text-align: center
}

.\!text-lg {
    font-size: 1.125rem!important;
    line-height: 1.75rem!important
}

.font-bold {
    font-weight: 700
}

.uppercase {
    text-transform: uppercase
}

.\!text-white {
    --tw-text-opacity: 1 !important;
    color: rgb(255 255 255 / var(--tw-text-opacity))!important
}

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity))
}

.transition {
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s
}

:root {
  --main-color: #e30510;
  --main-color-hover: #962c30;
  --main-9-color: rgb(227, 5, 16, 0.9);
  --main-9-color-hover: rgb(150, 44, 48, 0.9);

  --el-color-primary: var(--main-color) !important;
}

.w1400{width: 1400px;overflow: hidden;height: auto;margin: 0 auto;}
.w1200{width: 1200px;height: auto;margin: 0 auto; }
.w1100{width: 1100px;overflow: hidden;height: auto;margin: 0 auto;}
.w1000{width: 1000px;overflow: hidden;height: auto;margin: 0 auto;}



.banner{width: 100%;display: block;overflow: hidden;position: relative;}
.banner h1{font-size: 46px;position: relative;color: #ffffff;font-weight: bold;text-shadow: 2px 2px 3px #444;margin-bottom: 40px;}
.banner h1::before{content: "";width: 93px;height: 8px;background-color: var(--main-color);bottom: -14px;position: absolute;}
.banner p{font-size: 18px;line-height: 30px;color: #fff;text-shadow: 1px 1px 3px #444;}
.banner h3{font-size:13px;color: #fff;letter-spacing: 1.2px;text-shadow: 1px 1px 3px #444;}

.el-divider{margin:10px 0 !important;}



.font15{ font-size:15px !important;}
.font16{ font-size:16px !important;}
.font18{ font-size:18px !important;}
.font20{ font-size:20px !important;}
.font22{ font-size:22px !important;}
.font24{ font-size:24px !important;}
.font26{ font-size:26px !important;}
.font28{ font-size:28px !important;}
.font30{ font-size:30px !important;}
.font32{ font-size:32px !important;}
.font36{ font-size:36px !important;}
.font42{ font-size:42px !important;}
.font48{ font-size:48px !important;}
.fontNormal{ font-weight:normal !important;}
.fontBold{ font-weight:bold !important;}

.clearboth{clear: both;}
.titleEn{font-family:'Oswald', sans-serif,impact; margin-bottom: -15px;}
.clearance{width: 100%;height: 50px; overflow: hidden;}
.clearance30{width: 100%;height: 30px; overflow: hidden;}
.clearance10{width: 100%;height: 10px; overflow: hidden;}
.setion{width: 100%;margin: 0; clear: both;z-index: 111; overflow: hidden;}
.wid94{width: 94%;margin: 0 auto;}
.wid80{max-width: 86%;margin: 0 auto;overflow: hidden;}
.wid1300{max-width: 1300px;margin: 0 auto;overflow: hidden;}


header{
	width: 100%;
	margin: 0;
	height: 100px;
	background: #fff;
    box-shadow: 0 5px 10px rgba(221,221,221,0.35);
    -webkit-box-shadow: 0 5px 10px rgba(221,221,221,0.35);
    background-color: white;
    position: fixed;
    top: 0;
    left:0;
    right: 0;
    z-index: 100;
}
.logo-pic{
	flex: 0 0 auto;
	max-height: 100px;
	overflow: hidden;
	padding-top: 6px;
	
}
   .logo-pic a img{
    max-height: 90px;
    max-width: 100%;
  }

.headermenu{
 flex: 0 0 720px;display:flex;justify-content: right;height: 100px;align-items: center;

}
.headermenu>li{
    padding: 22px 0;
    flex: 1 1 130px;
    font-size: 16px;text-align:center;
    a{font-size: 16px;color:var(--main-color);}
    p{line-height: 30px;cursor: pointer;color:var(--main-color);}
  }
.headermenu>li:hover, .headermenu>li.cur{
    background-color: var(--main-color);
    a,p{color: #fff;}
  }

.headermenu li .submenu{
	/*display: none;*/
  position: absolute;
  top:-2000px;
  width: auto;
  padding:0;
  z-index: 11;
  background: rgba(255,255,255,0.9);
}
.headermenu li:hover .submenu{top:99px;}
.headermenu li:hover .submenu li a{color: #333;display: inline-block;}

.headermenu li:nth-child(3) .submenu li a{font-size:14px;padding:0 20px;}
.headermenu li .submenu li{
	float:none;
	line-height: 35px;
	font-size: 14px;
	min-width: 130px;
	text-align: center;
	border-bottom: 1px solid rgba(0,0,0,.07);
	/*background: rgba(255,255,255,0.9);*/
	/*opacity:0;transform:skew(0deg,10deg) scale(0,1);-webkit-transform:skew(0deg,10deg) scale(0,1); transition:all 0.5s; -webkit-transition:all 0.5s;*/
}
.headermenu li .submenu>li:hover{
	background: var(--main-color);
}

.headermenu li .submenu>li:hover a{color: #fff;}


.footer{background: #f2f2f2; padding-top: 30px;}
.footMenu{
	margin-bottom: 15px; overflow: hidden; width: 48%; float: left;border-right: 1px solid #eae7e7; padding-right: 2%;
}

.footMenu li{
		float: left; width: auto; padding: 0 25px;color: #333;font-weight: bold;
	
	}
	
.footMenu li a{color: #333;}
	
.footMenu ul li ul li{
	clear: both;
	width: auto;
	padding: 0;
	font-size: 13px;
	line-height: 27px;
	font-weight:normal;
}
.footMenu>ul>li>ul>li>a{
	color: #999;
}

.rightfoot{float: right; width:auto;padding-right: 2%;}
.rightfoot img{width: auto;}
.righterwei{width: 10%;float: right;}
.righterwei img{width: 100%;}

.copyright{width: 100%;background: var(--main-color);line-height: 60px; text-align: center;}
.fs-support{width:auto;float: right;margin-top: -60px; margin-right: 10px; color: #fff;}
.copyright,.copyright a{color: #fff; clear: both;}
.copyLeft{width: 80%;}
.contactFoot li{float: left; width: 250px;}



/*---------------------service style-------------*/
.w-service-fixed{position:fixed; top:20%; right:10px; margin-bottom:-160px; z-index:2000; font-size:14px;cursor: pointer;}
.bg_s_default{ background:var(--main-color);}
.color_s_default{color:#363636;}
.w-service-fixed .service-item{width:46px; height:46px; line-height:46px; margin-bottom:2px; position:relative; text-align:center;}
.w-service-fixed .service-item .service-popc{ position:absolute; right:46px; top:0; width:0; overflow:hidden; text-align:left; color:#fff; }
.w-service-fixed .service-item .service-popc .item{text-overflow: ellipsis;white-space: nowrap;word-break: keep-all;overflow: hidden;}
.w-service-fixed .service-item .service-popc a{ color:#fff; text-decoration:none; display:block;text-overflow: ellipsis;white-space: nowrap;word-break: keep-all;overflow: hidden;}
.w-service-fixed .service-item:hover .service-popc{ width:180px;transition: width 0.2s;-moz-transition: width 0.2s;-webkit-transition: width 0.2s; -o-transition: width 0.2s; }
.w-service-fixed .service-item .service-popc a:hover{ opacity:0.75; *filter:alpha(opacity=75); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=75);;}
.w-service-fixed .service-item .service-popc .service-popc-in{padding:10px 13px 11px; line-height:1.5; background: var(--main-color-hover);}

.w-service-fixed .service-item-qrCode .service-popc{ top:auto; bottom:0;}
.w-service-fixed .service-item-qrCode .qrCodeImg img{ max-width:100%;}
.w-service-fixed .icon_service{ display:inline-block; *display:inline; *zoom:1; width:35px; height:35px; background:url("/images/icon_service.png") no-repeat; vertical-align:middle;}
.w-service-fixed .icon_service_qq{ background-position:0 0;} 
.w-service-fixed .icon_service_tel{ background-position:0 -35px;}
.w-service-fixed .icon_service_msn{ background-position:0 -70px;}
.w-service-fixed .icon_service_qrCode{ background-position:0 -105px;}
.w-service-fixed .icon_service_whatsApp{ background-position:0 -70px;}
.w-service-fixed .icon_service_skype{ background-position:0 -175px;}
.w-service-fixed .icon_service_wangWang{ background-position:0 -210px;}
.w-service-fixed .icon_service_email{background-position:0 -245px;}
.w-service-fixed .icon_service_msn{background-position:0 -280px;}
.w-service-fixed .service-item-top{ cursor:pointer; display:none;}
.w-service-fixed .service-item-top .fa-caret-up{ position:absolute; top:-10px; left:18px; font-size:16px; }
.w-service-fixed .service-item-top .top{ color:#fff; font-size:15px;}
.w-service-fixed .ic_s{ display:inline-block; *display:inline; *zoom:1; width:25px; height:25px;vertical-align:middle; margin-right:5px;}
.w-service-fixed .ic_s_qq{ background-position:0 0;} 
.w-service-fixed .ic_s_tel{ background-position:0 -25px;} 
.w-service-fixed .ic_s_msn{ background-position:0 -50px;} 
.w-service-fixed .ic_s_whatsApp{ background-position:0 -50px;}
.w-service-fixed .ic_s_skype{ background-position:0 -125px;}
.w-service-fixed .ic_s_wangWang{ background-position:0 -150px;}
.w-service-fixed .ic_s_email{ background-position:0 -175px;}
.w-service-fixed .ic_s_msn{ background-position:0 -200px;}

.position {
    display: none;
    width: 100%;
    height: auto;
    position: fixed;
    bottom: 0px;
    z-index: 1001;
    background: #323232;
}

.innerWrapper {
    display: block;
    margin: 0 auto;
    width: 100%;
    position: relative;
    padding: 0;
}

.innerWrapper a {
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 33.3333%;
}

.position .innerWrapper a img {
    display: block;
    margin: 0 auto;
}
@media (max-width:990px){
    .position {
        display: block;
        }
.topLogBox{margin-bottom:40px;}
}






/*---------------------service style-------------*/






.menufain-list:hover .menuline,.menufain-list.cur .menuline {
    width: 100%
}

.menufain {
    width: auto;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    left: 0
}

.menufain .menufain1 {
    flex: 0 1 auto;
}

.menufain-list {
    flex: 1 1 auto;
    padding: 0;
    line-height: 56px
}

.menufain-list a {
    color: #fff;
    padding: 0 10px;
}

.menufain-list .menuline {
    clear: both;
    width: 0;
    height: 64px;
    top: -60px;
    margin: 0 auto;
    position: relative;
    z-index: -1;
    background: #652729;
    transition: width 1s
}

.el-icon-loading {
    animation: rotating 2s linear infinite
}

.el-icon--right {
    margin-left: 5px
}

.el-icon--left {
    margin-right: 5px
}

@keyframes rotating {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.el-icon {
    --color: inherit;
    height: 1em;
    width: 1em;
    line-height: 1em;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    fill: currentColor;
    color: var(--color);
    font-size: inherit
}

.el-icon.is-loading {
    animation: rotating 2s linear infinite
}

.el-icon svg {
    height: 1em;
    width: 1em
}