@charset "UTF-8";
/* reset */
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{font:12px/1.14 'Microsoft YaHei',sans-serif;color:#333;outline:0;}
body{ font-family: -apple-system, BlinkMacSystemFont, 'Microsoft YaHei', sans-serif; line-height:1.75; color: #333;}
a,a:hover,a:active,a:visited,a:focus{color:#333; text-decoration: none;}
@media (min-width:641px){body{width:640px;margin:auto; font-size: 16px;}}
img{ display: block;}


.eye_show{cursor:pointer;animation:eyeAnimation 2s infinite linear;-moz-animation:eyeAnimation 2s infinite linear;-webkit-animation:eyeAnimation 2s infinite linear;-o-animation:eyeAnimation 2s infinite linear}
@keyframes eyeAnimation{0%{opacity:1}
50%{opacity:.2}
100%{opacity:1}
}
@-moz-keyframes eyeAnimation{0%{opacity:1}
50%{opacity:.2}
100%{opacity:1}
}
@-webkit-keyframes eyeAnimation{0%{opacity:1}
50%{opacity:.2}
100%{opacity:1}
}
@-o-keyframes eyeAnimation{0%{opacity:1}
50%{opacity:.2}
100%{opacity:1}
}


.nav{ width: 100%; height: 0; overflow: hidden; position: fixed; bottom: 0; left: 0; background: rgba(0,0,0,0.9); z-index: 9; transition: all 0.5s;}
.nav span.close{ padding: 5px 15px; display: block; position: absolute; bottom: 15px; right: 15px; color: #fff; font-size: 150%; cursor: pointer;}
.navbox{ height: 80%; display: flex; align-items: center; overflow: hidden; border-top: 1px solid #008aff; padding: 15px; box-sizing: border-box;}
.navbox ul li{ width: 100%; float: left; line-height: 2.5; padding-left: 30%;}
.navbox ul li a{ width: 60%; box-sizing: border-box; color: #008aff; font-size: 20px; padding-left: 40px; position: relative; display: inline-block;}
.navbox ul li a::before{ content: ""; display: block; position: absolute; left: 0; top: 50%; margin-top: -10px; background: #fff; width: 20px; height: 20px; border-radius: 50%;}
.navbox ul li:nth-child(1) a::before{ background: #008aff;}
.navbox ul li:nth-child(2) a::before{ background: #90fffa;}
.navbox ul li:nth-child(3) a::before{ background: #99b4de;}
.navbox ul li:nth-child(4) a::before{ background: #b5b5b6;}
.navbox ul li:nth-child(5) a::before{ background: #e4007f;}
.navbox ul li:nth-child(6) a::before{ background: none; border: 1px solid #fff; box-sizing: border-box;}

.btn-nav{background:0 0;border:none;padding-left:5px;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-ms-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;cursor:pointer;z-index:999}
.btn-nav:focus{outline:0}
.icon-bar{display:block;margin:8px 0;width:32px;height:3px;background-color:#008aff}
.btn-nav:hover .icon-bar{-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-ms-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease;background-color:#008aff}
.animated{display:block;margin:0 auto}
.animated:focus .icon-bar,.animated:hover .icon-bar{background-color:#008aff}
.animated:focus{cursor:pointer;z-index:9999}
.middle{margin:0 auto}
.icon-bar{-webkit-transition:all .7s ease;-moz-transition:all .7s ease;-ms-transition:all .7s ease;-o-transition:all .7s ease;transition:all .7s ease;z-index:999999}
.animated .icon-bar{z-index:999999;background-color:#008aff}
.animated .top{-webkit-transform:translateY(12px) rotateZ(45deg);-moz-transform:translateY(12px) rotateZ(45deg);-ms-transform:translateY(12px) rotateZ(45deg);-o-transform:translateY(12px) rotateZ(45deg);transform:translateY(12px) rotateZ(45deg)}
.animated .bottom{-webkit-transform:translateY(-10px) rotateZ(-45deg);-moz-transform:translateY(-10px) rotateZ(-45deg);-ms-transform:translateY(-10px) rotateZ(-45deg);-o-transform:translateY(-10px) rotateZ(-45deg);transform:translateY(-10px) rotateZ(-45deg)}
.animated .middle{width:0}
.oheight{ height: 100%; transition: all 0.5s;}

.navbar{display: flex; justify-content: end; align-items: center; font-size: 120%; color: #008aff;}
.submenu{ position: fixed; z-index: 2; width: 100%; height: 110px; background: #fff; overflow: hidden; float: left; padding-top: 60px; box-sizing: border-box;}

.submenu .swiper-container{ z-index: 999; position: relative; background: #008aff; padding-left: 10px; box-sizing: border-box}
.submenu a{ position: relative; width: auto; line-height: 50px; padding:0 20px; box-sizing: border-box; color: #fff; font-size: 120%;}
.submenu a:last-child{ padding-right: 50px;}
.submenu a::before{ position: absolute; left: 0; top: 19px; content: ""; display: block; width: 10px; height: 10px; border: 2px solid #fff; background: none; border-radius: 50%;}
.submenu a.on::before{ background: #fff;}
.submenu span.rbg{ position: absolute; display: block; width: 50px; height: 100%; z-index: 1; background:linear-gradient(to right, rgba(0,138,255,0),rgba(0,138,255,1)); right: 0; top: 0;}

.main{ width: 100%; padding-top: 60px; float: left; height: 100%; overflow-y: scroll; overflow-x: hidden;box-sizing: border-box;}
.main img{ max-width: 100%;}
.product_nav{ width: 100%; padding-top: 60px; height: auto; display: flex; justify-content: space-between; flex-wrap: wrap;}
.product_nav a{ display: block; width: 100%; text-align: center; padding:40px 25%; box-sizing: border-box; background: #002746;}
.product_nav a:nth-child(2n){ background: #000000;}
.product_nav .img{ width: 100%; padding: 0 30px; box-sizing: border-box; display: flex; justify-content: center;}
.product_nav .img img{ display: block; max-width: 100%; height: auto;}
.product_nav .txt{ line-height: 1.2;}
.product_nav .txt p{ color: #008aff;}
.backpage{ width: 100%; text-align: center;}

.content_list{ padding: 0; height: auto; overflow: hidden;}
.content_list ul li{ padding: 5px 10px; float: left; width: 100%; box-sizing: border-box; margin: 5px 0; background: #008aff; }
.content_list ul li a{color: #fff; font-size: 150%;}

		
.service{ padding-top: 60px; }
.service img{ max-width: 100%; display: inline-block; margin: auto;}
.case{ width: 100%;height: auto; overflow: hidden; padding-top: 60px }
.case img{ max-width: 100%; display:block; margin: auto;}
.case a.item{ position: relative; display: block; float: left; width: 100%;}
.case .item p{ position: absolute; left: 0; bottom: 0; z-index: 1; width: 100%; height: 50px; font-size: 140%; padding: 5px 15px; box-sizing: border-box; line-height: 40px; color: #fff; background: rgba(0,0,0,0.5);}
.case h3{ padding: 15px; font-size: 18px; text-align: center; color: #008aff;}
.video video{ background: #000;}
.new{ padding-top:60px; }
.new_img img{ max-width: 100%;}
.new_box{ padding: 10px;}
.new_box ul li{ width: 100%; padding: 15px 0; float: left; border-bottom: 1px dotted #ddd;}
.new_box ul li a{ display: flex; align-items: center;}
.new_box ul li .img{ width: 30%; float: left;}
.new_box ul li img{ max-width: 100%;}
.new_box ul li .txt{ width: 70%; float: left; padding-left: 15px; box-sizing: border-box;}
.new_box .tit{ font-size: 140%; text-align: center; line-height: 1.3; padding: 15px 0; border-bottom: 1px dotted #ddd;}
.new_box .content{ padding: 10px 0;}
.new_box .content img{ max-width: 100%;}

.join{ padding-bottom: 30px;}
.join_tit{ position: relative; padding-top: 60px}
.join_tit img{ max-width: 100%;}
.join_tit p{ position: absolute; left: 0; bottom: 0; line-height: 2.4; text-align: center; width: 100%; color: #fff; font-size: 150%;}
.join_txt{ padding: 10px; font-size: 120%;}
.join_box{ padding: 10px; height: auto; overflow: hidden;}
.join_box .item{ margin: 5px 0; width: 100%; float: left;}
.join_box .item h3{ width: 100%; height: 40px; line-height: 40px; padding: 0 10px; box-sizing: border-box; background: #222; color: #fff; cursor: pointer; position: relative;}
.join_box .item h3::after{ display: block; content: "+"; position: absolute; right: 10px; z-index: 1; top: 0;}
.join_box .item p{ height: 0; overflow: hidden; background: #f0f0f0; padding:0 10px; box-sizing: border-box;}
.join_box .item.on p{ height: auto; padding: 10px; }
.join_box .item.on h3{ background: #008aff;}
.join_box .item.on h3::after{content: "－";}
.join_bot{ text-align: left; padding:0 15px; font-size: 150%;}

.foot_txt{ padding: 15px; width: 100%; box-sizing: border-box; padding-bottom: 80px; float: left;}
.foot_txt p{ font-size: 60%; color: #fff; text-indent: 2em; line-height:12px;}
.foot_txt span{ color: #008aff;}
.foot_txt_ny p{ color: #666;}
.copyright{ width: 100%; height: auto; float: left; line-height: 1.5; padding: 10px; box-sizing: border-box; background: #222; color: #fff; text-align: center;
    position: fixed;
    bottom: 0;
    z-index: 1;
}
.copyright a{ color: #fff;}

.subnav{ text-align: center; padding: 10px }
.subnav a{ display: inline-block; padding: 5px 30px; background: #008aff; color: #fff; }
.about_box .swiper-button-next,.about_box .swiper-button-prev{ top: 50%;margin-top: -20px; border-radius: 50%; background: rgba(0,138,255,0.3); text-align: center; color: #fff; line-height: 40px; width: 40px; height: 40px; font-weight: bold; font-size: 14px;}
.about_box .swiper-button-next:hover,.about_box .swiper-button-prev:hover{ background: rgba(0,138,255,0.3);}


.video .tit{ line-height: 50px;height: 50px; font-size: 20px; font-weight: bold; background: #008aff;color: #fff; padding:0 15px; box-sizing: border-box; }
.video .list{ padding:30px; }
.video .list a{ display: inline-block; width: 100%; font-size: 16px; line-height: 40px; border-bottom: 1px solid #ddd }

@media screen and (max-width: 350px) {
.copyright{font-size:10px}
}