@charset "utf-8";
/* CSS reset */
*{box-sizing:border-box;-moz-box-sizing:border-box; -webkit-box-sizing:border-box; border:0; margin:0; padding:0; font-weight:normal;}
html { -webkit-text-size-adjust:none; -webkit-appearance: none;}
input,select,textarea {-webkit-appearance: none; appearance: none; outline:none; font-family: "Microsoft YaHei"; border-radius: 0;  resize:none;  -webkit-appearance: none; -webkit-tap-highlight-color:rgba(0,0,0,0); }
table { border-collapse: collapse; border-spacing:0;}
a{ text-decoration:none; cursor:pointer; -webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent;outline: none;}
ul,ol,li{list-style:none;}
video::-webkit-media-controls-fullscreen-button {display: none !important;}
.pr{ position: relative;}
.pa{ position:absolute;}
.w100{ width:100%;}
.h100{ height: 100%; }
.wh100{ width:100%; height:100%;}
.vh100{ height: 100vh;}
.fl{float:left;}
.fr{float:right;}
.i-b{ display:inline-block;}
.hide{display: none;}
.bold{ font-weight: bold;}
.w-b{ white-space: normal; word-break: break-all; }
.as-c{ align-self: center;}
.ai-c { align-items: center;}
.grid{ display: grid;}
.flex{ display: flex;}
.flex1{ flex: 1;}
.column{ flex-direction: column;}
.flex-wrap{ display: flex; flex-wrap: wrap;}
.flex-column{ display: flex; flex-direction: column;}
.flex-cc{ display: flex; align-items: center;}
.flex-auto{ flex: 1; overflow: auto;}
.jc-c{ justify-content: center; }
.jc-s{ justify-content:flex-start;}
.jc-e{ justify-content:flex-end;}
.jc-b{ justify-content: space-between;}
.t0{ top: 0;}
.l0{ left: 0;}
.lt0{ left:0; top:0;}
.text-left{ text-align:left;}
.text-right{ text-align:right;}
.fz0{ font-size:0;}
.h100{ height: 100%;}
.m-a{ margin: 0 auto;}
.oh{ overflow: hidden;}
.mr0{ margin-right:0 !important; }
.yuan{ border-radius:50%; overflow:hidden;}
.fzs50 span{float:left; width:200%; margin-left:-50%;  -webkit-transform:scale(0.5);  transform:scale(0.5); }
.hoverOp,.hoverS,.img-hover img{-webkit-transition: all 0.2s ease;   transition: all 0.2s ease;}
.hoverS2{-webkit-transition: all 0.4s ease; transition: all 0.4s ease;}
.hoverOp:active,.hoverOp:hover{filter:alpha(Opacity=90);opacity:.9; text-decoration:none;}
.td-u:hover{ text-decoration: underline;}
.boxCb{box-sizing:content-box;-moz-box-sizing:content-box; -webkit-box-sizing:content-box; }
.cssddd{overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
.lt_center {  left: 50%;  top: 50%;  transform: translate(-50%,-50%);}
.pop_win{ z-index:900; width:100%; height:100%; position:fixed; _position:absolute; left:0px; top:0px; display:none; }
.pop_win .pwin_bg{width: 100%;height: 100%; background: #000; opacity: .7; filter: alpha(opacity=70); }
.pop_win .pwin_box{ position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);}
.gray{
	filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
	filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
}
:root{
	--web-color:#000;
	--web-color1:#fff;
	--web-color2:#f7f8fc;
	--web-color3:rgb(126, 194, 30);
	--web-color4:rgb(255, 133, 0);
	--web-color5:rgb(255, 0, 0);
	--web-color6:#ebebeb;
	--web-color7:#888;
	--web-color8:#9A9A9A;
	--web-color9:#E5E5E5;
	--web-color10:#E3E3E3;
	--web-color11:#F5F5F5;
	--web-size-h1:50px;
	--web-size-h2:30px;
	--web-size-h3:24px;
	--web-size-h4:22px;
	--web-size-h5:28px;
	--web-size-h6:36px;
	--web-size-max:20px;
	--web-size:18px;
	--web-size-small:16px;
	--web-size-min:14px;
}
@font-face {
	font-family: 'Open Sans';
	src: url('/static/plugins/font/opensans.ttf') format('truetype');
	font-weight: normal;
  	font-style: normal;
}
body{ margin: 0 auto; font-family:'Open Sans'; text-align:center; font-weight:400; font-size: var(--web-size); color: var(--web-color);}
a{ color: var(--web-color); }
#web-main{width:100%; position:relative; margin:auto; height:auto; overflow:hidden; padding-top: 100px; }
.m-block{
	display: none !important;
}
h1,.h1{
	font-size: var(--web-size-h1);
}
h2,.h2{
	font-size: var(--web-size-h2);
}
h3,.h3{
	font-size: var(--web-size-h3);
}
h4,.h4{
	font-size: var(--web-size-h4);
}
h5,.h5{
	font-size: var(--web-size-h5);
}
h6,.h6{
	font-size: var(--web-size-h6);
}
h1,h2,h3,h4,h5,h6{
	font-weight: bold;
}
.pd-c{
	padding-left: 12.5%!important;
	padding-right: 12.5%!important;
}
.web-pc .web-button:hover,
.web-mobile .web-button:active{
    transform: scale(1.01);
}
.swiper-button{
	width: 1.3vw;
	max-width: 64px;
	min-width: 48px;
	top: 50%;
	margin-top: -2vw !important;
	background: none !important;
}
.swiper-button.swiper-button-prev{
	left: calc(-48px - 1.3vw);
}
.swiper-button.swiper-button-next{
	right: calc(-48px - 1.3vw);
}
.max-swiper-button .swiper-button.swiper-button-prev{
	left: 8%;
}
.max-swiper-button .swiper-button.swiper-button-next{
	right: 8%;
}
.swiper-pagination{
	bottom: 1.77vw !important;
}
.swiper-pagination .swiper-pagination-bullet{
	width: 2.5vw;
	min-width: 38px;
	max-width: 48px;
	height: 0.4vw;
	max-height: 8px;
	min-height: 4px;
	height: 8px;
	background: var(--web-color1);
	border-radius: 0;
	margin: 0 4px;
	opacity: 1;
}
.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
	background: var(--web-color3);
}

.web-pc .img-hover:hover img,
.web-mobile .img-hover:active img{
	transform: scale(1.1);
}
.button,.b-more{
	width: 11.46vw;
	height: 2.5vw;
	min-width: 162px;
    min-height: 36px;
	border-radius: 1.25vw;
}
.b-more{
    background: var(--web-color4);
    box-shadow: 0px 0px 8px 0px var(--web-color4);
    color: var(--web-color1);
    font-size: var(--web-size-small);
}
.main-container .main-container-box:nth-child(even) .b-more,
.b-more2{
    background: var(--web-color3);
    box-shadow: 0px 0px 8px 0px var(--web-color3);
}

.button{
    margin: 32px 0;
    background: var(--web-color1);
    border: 2px solid var(--web-color3);
    color: var(--web-color3);
}
.web-pc .button:hover,
.web-mobile .button:active{
    box-shadow: 0 0 6px var(--web-color3);
}

.button2{
    border: 2px solid var(--web-color4);
    color: var(--web-color4);
}
.web-pc .button2:hover,
.web-mobile .button2:active{
    box-shadow: 0 0 6px var(--web-color4);
}
.button img,.b-more img{
	padding-left: 7%;
}

.wp-icon a{
	 width: 2.1vw;
	 margin-right: 0.8vw;
	 max-width: 40px;
	 min-width: 30px;
 }
 .wen-pc .wp-icon a:hover,
 .web-mobile .wp-icon a:active{
	 transform: scale(1.06);
 }

.nav{
    height: 100px;
    background-color: var(--web-color1);
	position: fixed;
	left: 0;
	top: 0;
	box-shadow: 0 0 6px rgba(0,0,0,.3);
	z-index: 30;
}
.nav .logo{
    height: 49%;
    margin-right: 3vw;
}
.nav .item a{
    position: relative;
    height: 100%;
    color: var(--web-color);
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    padding: 0 1vw;
}
.nav .item a::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 4px;
    background: var(--web-color4);
    border-radius: 2px;
    bottom: -4px;
    left: 0;
    transition: all 0.2s;
}
.web-pc .nav .item a:hover,
.web-mobile .nav .item a:active,
.nav .item a.active{
    color: var(--web-color4);
}
.web-pc .nav .item a:hover::before,
.web-mobile .nav .item a:active::before,
.nav .item a.active::before{
    bottom: 0;
}
.nav .ContactUs{
    max-width: 220px;
    width: 11.5vw;
    min-width: 140px;
    height: 48%;
    background: var(--web-color3);
    border-radius: 6px;
    color: var(--web-color1);
}
.nav .ContactUs img{
    padding-left: 8px;
}
.blogs-page .nav{
	background: var(--web-color);
}
.blogs-page .nav .item a{
	color: var(--web-color1);
}

@media (min-width: 1921px) {
    :root{
		--web-size-h1:2.6vw;
		--web-size-h2:1.56vw;
		--web-size-h3:1.25vw;
		--web-size-h4:1.14vw;
		--web-size-h5:1.45vw;
		--web-size-h6:1.87vw;
		--web-size-max:1.04vw;
		--web-size:.94vw;
		--web-size-small:.83vw;
		--web-size-min:.73vw;
    }
}

@media (max-width: 1680px) {
	:root{
		--web-size-h1:44px;
        --web-size-h2:28px;
        --web-size-h3:24px;
        --web-size-h4:20px;
		--web-size-h5:26px;
		--web-size-h6:32px;
        --web-size-max:18px;
        --web-size:16px;
        --web-size-small:14px;
        --web-size-min:12px;
    }
    #web-main{
        padding-top: 80px;
    }
	.nav{
        height: 80px;
    }
	.nav .pc-nav-menu{
		top: 80px;
	}
    .nav .item a{
        padding: 0 .8vw;
    }
    .nav .logo{
        height: 49%;
        margin-right: 3vw;
    }
	.max-swiper-button .swiper-button.swiper-button-prev{
		left: 3%;
	}
	.max-swiper-button .swiper-button.swiper-button-next{
		right: 3%;
	}
    
}