@charset "utf-8";

a.web:link {
	color: #000;
  
	text-decoration: none;
}
a.web:visited {
	color: #000;
    

	text-decoration: none;

}
a.web:active {
    color: #000;
		
	
		text-decoration: none;
}

a.web:hover {
	color: #6f6f70;
	
	
	text-decoration: none;
}
/*--------------------------------------------------------------
>>> 目录：
----------------------------------------------------------------
1.0 加载文件
	1.1 加载定义字体
2.0 全局规范
	2.1 html5块化
	2.2 重置基础
4.0 格式支持
	4.1 浮动对齐
	4.2 文本对齐
	4.3 清除浮动
5.0 UI框架
	5.1 主框架
	5.2 头部
	5.3 尾部 
9.0 兼容终端（PC端）
10.0 终端兼容（移动端）
--------------------------------------------------------------*/

/*--------------------------------------------------------------
1.0 加载文件
--------------------------------------------------------------*/

/* 1.1 加载定义字体 */
@font-face {
  font-family: 'CiscoSans';
  src: url(fonts/CiscoSansTTLight.woff2) format("woff2");
  }

/*--------------------------------------------------------------
2.0 全局规范
--------------------------------------------------------------*/
html,body{ margin:0; padding:0;}
html{ font-size:100px;}
body{ font-size:.16rem; line-height:.22rem; font-family:CiscoSans, Arial !important;}
h1,h2,h3{ font-weight:normal; margin:1em 0;}
h2{ font-size:.22rem;}
h3{ font-size:.16rem;}

/* 2.1 html5块化 */
main,
article,
aside,
footer,
header,
nav,
section {
	display: block;
}

/* 2.2 重置基础 */
video{object-fit: fill;/*满屏显示*/ width:100%; height:auto;}
html {
  -webkit-text-size-adjust: 100%;
  box-sizing: border-box;/*设置的边框和内边距的值是包含在 width 内*/
}
*,
*:before,
*:after {
  box-sizing: border-box;
}
hr {
  height: 0;
  overflow: visible;
}
a {
  background-color: transparent;
  text-decoration:none;
}
a:hover,
a:active {
  text-decoration: none;
}
a,
a:focus,
a:active{outline:none;}
img {
  border-style: none;
  max-width:100%;
  height:auto;
}
/*防图片缩放模糊*/
img{
	image-rendering:-moz-crisp-edges;
	image-rendering:-o-crisp-edges;
	image-rendering:-webkit-optimize-contrast;
	image-rendering: crisp-edges;
	-ms-interpolation-mode:nearest-neighbor;
}
/*--------------------------------------------------------------
4.0 格式支持
--------------------------------------------------------------*/
/* 4.1 浮动对齐 */
.floatleft {
  float: left;
  margin-right: 2em;
}
.floatright {
  float: right;
  margin-left: 2em;
}
.floatcenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* 4.2 文本对齐 */
.aligncenter{ text-align:center;}
.alignright{ text-align:right;}
/* 4.3 清除浮动 */
.clear{ clear:both;}
.clear:before,
.clear:after,
article:before,
article:after,
section:before,
section:after,
.site-main:before,
.site-main:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after,
.box:before,
.box:after {
  content: "";
  display: table;
  table-layout: fixed;
  clear:both;
}

/*--------------------------------------------------------------
5.0 UI框架
--------------------------------------------------------------*/

/* 5.1 主框架 */
#page{ width:100%; overflow:hidden;}
.site-main{}
.box{
    width: 12.30rem;
    margin:0 auto;
}

/* 5.2 头部 */
.site-header{ height:1.2rem; display:flex; flex-wrap:wrap;align-items: center;}
.site-header .box{ padding:0 .6rem;}
.logo{
    width: 1.79rem;
    height: .62rem;
    background-image: url(images/sictech2.svg); 
}
.site-header .logo{float: left;}
.site-navigation{
    width: calc(100% - 2.5rem);
    float: right;
}
.site-navigation .wx-ico{ display:none;}
.site-navigation ul{ margin:0; padding:0; list-style:none;}
.site-navigation li{ float:right; line-height:.62rem; padding:0 1em;}

/* 5.3 尾部 */
.site-footer{background-color: #000000;margin-top:.3rem; padding:.8rem 0;}
.site-footer .logo{float: right; margin-right: .6rem;}
.footer-contact {color: #fff; float: left;width: calc(100% - 3rem);}
/*--------------------------------------------------------------
7.0 内容模块
--------------------------------------------------------------*/
/* 7.1 列表：4列 */
.col-4{ margin:0; padding:0; list-style:none;display:flex; flex-wrap:wrap;}
.col-4 > li,
.col-4 > div{ float:left; width:25%; padding:0 3%;}
/* 7.1 横幅图 */
.banner {
  height: 7.5rem;
  padding: 0 8%;
  /*background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("images/aff.jpg");*/
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  background-position: center;
  display:flex;
  align-items: center;
  position:relative;
}
.banner:before{ content:""; display:block; position:absolute; z-index:2; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,.3);}
.banner .box h2,
.banner .box .text{ position:relative; z-index:3;}
.banner h2 {
    color: #FFF;
    font-size: .44rem;
	line-height: .36rem;
    text-align: center;
}
.banner .text {
    color: #fff;
    font-size: .24rem;
    text-align: center;
    line-height: .32rem;
    margin-top: .2rem;
}
.banner img{ position:relative; display:none;}
.banner img{ display:block; width:100%; height:auto; position:absolute; top:50%; left:50%; transform: translate( -50%, -50%);}
/* 7.1 首页 */
#zuida .box{ border-top:solid #ddd 1px; padding:.8rem 0;}
#zuida li{ padding:0 3%; text-align:center; margin-top:.4rem;}
#zuida li h3{ font-weight:bold;}

#midd {}
#midd .box{ padding:.8rem 0; border-top:solid #ddd 1px; padding-bottom:1rem;}
#midd .text{ float:left; width:7rem; margin-left:1rem; margin-top:.3rem;}
#midd h3{ font-size:.22rem; line-height:.26rem;}
#midd .img {
    height: 3.25rem;
    width: 3.25rem;
    float: right;
   
    margin-top: .3rem;
    margin-right: .3rem;
}

#a22top {text-align: center; padding-bottom: 0rem;}
#a22top li{ text-align:center;}
#a22top li h3{ font-weight:bold;}
#a22top li .img{ height:1.62rem; overflow:hidden;}
#aboutus { padding:.8rem 0;}
#aboutus .box{  border-top:solid #ddd 1px; padding-top:.75rem;padding-bottom:.2rem;}
#aboutus .text { width:8rem; margin:0 auto; }

#areaareax .box{ padding:.8rem 0; border-top:solid #ddd 1px; padding-bottom:1rem;}
#areaareax .text{ line-height:.26rem;}

.contact-from .box{ padding:.8rem 1.6rem; border-top:solid #ddd 1px;}
.contact-from h2{
    font-size: .2rem;
}
.contact-from iframe{
    width: 100%;
    margin-top: .4rem;
    height: 5.3rem;
	
}
#address label{ float:left; width:1.9rem;}
#address input[type="text"],
#address textarea,
#address select{ float:left; width:calc(100% - 1.9rem);}
#address > form > div{ min-height:.4rem; line-height:.26rem; overflow:hidden; }
#address input[type="text"]{height:.26rem; border:solid #ddd 1px; border-radius:0;}
#address textarea{height:1.5rem; border:solid #ddd 1px; border-radius:0;}
#address select{ height:.26rem; border:solid #ddd 1px; border-radius:0;}
.msg{ margin-top:.2rem; color:#f00; margin-left:1.9rem;}
.submit { margin-left:1.9rem;}
.submit input{ background-color:#007cc8; color:#fff; line-height:.4rem;height:.4rem; border:none; padding:0 2em; cursor:pointer;  font-size:.16rem;  font-family: 'CiscoSans'; -webkit-appearance:none;}
.submit input:first-of-type ~ input{ margin-left:.5em;}

/*--------------------------------------------------------------
9.0 终端兼容（PC端）
--------------------------------------------------------------*/
@media screen and (max-width: 1680px) {
.banner{ height:calc(7.5rem * 0.875); }
}
@media screen and (max-width: 1600px) {
.banner{ height:calc(7.5rem * 0.833); }
}
@media screen and (max-width: 1530px) {
.banner{ height:calc(7.5rem * 0.8); }
}
@media screen and (max-width: 1440px) {
.site-header{ height:1.2rem; }
.banner{ height:calc(7.5rem * 0.75); }
}
@media screen and (max-width: 1366px) {
.banner{ height:calc(7.5rem * 0.71); }
}
@media screen and (max-width: 1280px) {
.banner{ height:calc(7.5rem * 0.66); }
.box{
    width: 100%;
	padding:0 .5rem;
}
#midd .text { width:calc(100% - 4.5rem); margin-left:.5rem; margin-top:.5rem;}
#aboutus .text{ width:100%;}
.contact-from .box{ padding:.8rem .5rem;}
}
@media screen and (max-width: 1024px) {
.banner{ height:calc(7.5rem * 0.53); }
#a22top li .img{ height:calc(1.62rem * 0.73)}
}
/*--------------------------------------------------------------
10.0 终端兼容（移动端）
--------------------------------------------------------------*/
/*平板*/
@media screen and (max-width: 962px) {
.col-4 > li,
.col-4 > div{padding:0 2%;}
.site-footer .logo{ margin:0;}
.site-header .box{ padding:0 .5rem;}
.footer-contact{ width:calc(100% - 2rem);}
.banner{ height:calc(7.5rem * 0.5); }
}

@media screen and (max-width: 820px) {
.banner{ height:calc(7.5rem * 0.42); }
}

@media screen and (max-width: 768px) {
.banner{ height:calc(7.5rem * 0.4); }
}

@media screen and (max-width: 640px) {
#midd .text { float:none; width:100%; margin-left:0; padding:0 .5rem;}
#midd .img{ float:none; margin:0 auto;}
#a22top li .img{ height:calc(1.62rem * 0.45)}
#address label{ float:left; width:1rem;}
#address input[type="text"],
#address textarea,
#address select{ float:left; width:calc(100% - 1rem);}
.msg,
.submit { margin-left:1rem;}

.site-navigation{ position:relative; z-index:9; width:.5rem; height:.62rem;}
.site-navigation .wx-ico{ width:100%; height:100%; display:block;}
.site-navigation .wx-ico svg{ fill:#333; width:5vw; height:5vw; position:relative; top:50%; left:50%; transform:translate(-50%,-50%);}
.site-navigation li:first-of-type{ text-align:right; padding-top: .1rem; padding-right: .2rem;}
.site-navigation .close{display:inline-block;}
.site-navigation .close::before{ content:"\2715"; display:block; width:.5rem; height:.5rem; text-align:center; line-height:.5rem;font-size:.2rem; }
.site-navigation .wx-ico:hover > svg{ fill:#007CC8;}
.site-navigation ul{ opacity:0; background-color:rgba(100%,100%,100%,.99); position:fixed; z-index:99; top:0; right:-100%; width:100%; height:100vh;  transition:all .6s; overflow-y:scroll;}
.site-navigation li{ float:none; padding:0 1em;}
.site-navigation li:last-of-type{ border-bottom:none;}
.site-navigation li a{ display:block; position:relative; font-size:1.5em; text-align:left; line-height:2.3em;}
.site-navigation li a:hover:after{content:"\276F"; display:block; position:absolute; top:50%; right:0; transform:translate(0,-50%); font-size:.2rem;}
}

@media screen and (max-width: 540px) {
.box{padding:0 .3rem;}
.site-header .box{ padding:0 .3rem;}
.banner{ padding:0; height:calc(7.5rem * 0.35); }
#zuida .box,
#midd .box,
#a22top .box,
#areaareax .box,
.contact-from .box{ padding:.5rem .3rem;}
.col-4 > li,
.col-4 > div{ width:50%;}
#midd .text { padding:0;}
#a22top li .img{ height:calc(1.62rem * 0.94)}
}

/*手机*/
@media screen and (max-width: 428px) {
#page{ padding-bottom:.6rem;}
.col-4 > li,
.col-4 > div{ width:100%;}
.banner{ background-color:#111; height:7rem;}
.banner .box{ padding:0 .3rem;}
.banner .box h2,
.banner .box .text{ position:relative; z-index:3;}
.banner .box h2{ font-size:.36rem;}
.banner img{ display:block; width:100%; height:auto; position:absolute; top:50%; left:50%; transform: translate( -50%, -50%);}
#midd .img{ width:100%; background-repeat:no-repeat; background-position:center center;}
#a22top li .img{ height:calc(1.62rem * 0.68)}
.site-header{ height:.8rem; }
.logo{ width:1.2rem; background-size:1.2rem auto;background-repeat:no-repeat; background-position:center center;}
.footer-contact { width:calc(100% - 1.5rem);}
#a22top li .img{ height:auto;}
.footer-contact { width:100%; float:none;}
.site-footer .logo{ float:none;}
.contact-from iframe{ height:5.5rem;}
#address label,
#address input[type="text"],
#address textarea,
#address select{ float:none; width:100%;}
#address input[type="text"],
#address select{ height:.36rem;}
.msg,
.submit { margin-left:0;}
}
@media screen and (max-width: 400px) {
.banner{height:calc(7rem * 0.93);}
}
@media screen and (max-width: 375px) {
.banner{height:calc(7rem * 0.87);}
.site-header .box{ padding:0 .2rem;}
}
@media screen and (max-width: 360px) {
.banner{height:calc(7rem * 0.84);}
#midd .img{ background-size:100% auto; height:calc(3.4rem * 0.69);}
}
@media screen and (max-width: 320px) {
.banner{height:calc(7rem * 0.75);}
}
@media screen and (max-width: 280px) {
#zuida .box,
#midd .box,
#a22top .box,
#areaareax .box,
.contact-from .box{ padding:.3rem .2rem;}
.banner{height:calc(7rem * 0.65);}
}