/*首页*/

/*vh: 相对于视窗的高度, 视窗被均分为100单位的vh;
vw: 相对于视窗的宽度, 视窗被均分为100单位的vw;*/
#intro{background:url('/static/image/timg.jpg') center top no-repeat;background-size: cover;width: 100%;height: 100vh;position: relative;}
/*calc 属性计算函数  align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
flex-direction 属性规定灵活项目的方向*/
#intro .intro-text{position: absolute;left: 0;top: 200px;right: 0;height: calc(50% - 60px);display: flex;align-items: center;justify-content: center;text-align: center;flex-direction: column;}
#intro h2{font-family: mySecondFont;margin: 30px 0 10px 0;padding: 0 15px;font-size: 48px;font-weight: 400;line-height: 56px;color: #1f4dbf;}
#intro p {font-family: mySecondFont;color: #1f4dbf;margin-bottom: 20px;padding: 0 15px;font-size: 24px;}
/*开始按钮属性以及悬停动画*/
#intro .btn-get-started{position:relative;z-index:1;text-decoration: none;font-family: mySecondFont;font-weight: 400;font-size: 16px;letter-spacing:1px;display: inline-flex;padding: 1rem 3rem;border-radius: 100px;margin: 10px;border: 2px solid #1f4dbf;color: #1f4dbf;overflow: hidden}
#intro .btn-get-started:hover{color: #fff;}
#intro .btn-get-started:hover .home_icon {fill: #fff}
#intro .btn-get-started::before {content: '';position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: #1f4dbf;z-index: -1;transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);transform-origin: 0 100%;transition: transform 0.8s;}
#intro .btn-get-started:hover::before {transform: rotate3d(0, 0, 1, 0deg);transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);}

#intro .product-screens{position: absolute;left: 0;right: 0;bottom: 0;overflow: hidden;text-align: center;width: 100%;height: 50%;}
#intro .product-screens .product-screen-1{position: absolute;z-index: 30;left: calc(50% + 54px);bottom: 0;top: 400px;transition-property:top;transition-duration:0.5s ;transition-timing-function:ease-out;transition-delay:0.4s;}
#intro .product-screens .product-screen-2{position: absolute;z-index: 20;left: calc(50% - 154px);bottom: 0;top: 390px;transition-property:top;transition-duration:0.5s ;transition-timing-function:ease-out;transition-delay:0.2s;}
#intro .product-screens .product-screen-3{position: absolute;z-index: 10;left: calc(50% - 374px);bottom: 0;top: 450px;transition-property:top;transition-duration:0.5s ;transition-timing-function:ease-out;transition-delay:0s;}
#intro .product-screens img{box-shadow: 0 -2px 19px 4px rgba(0,0,0,0.29);}
#about {padding:60px 0;overflow: hidden;background: #eff5f5;transition: all 0.5s;}
.section-header .section-title {font-size:32px;color: #111;text-align: center;font-weight: 400;}
h3{font-family: mySecondFont;margin: 0 0 20px 0;padding: 0;}
.section-header .section-divider{display: block;width: 60px;height: 3px;background: linear-gradient(0deg,#1dc8cd 0%,#55fabe 100%);margin: 0 auto;margin-bottom: 20px}
.section-header .section-description{font-family: mySecondFont;text-align: center;padding-bottom: 40px;font-style:inherit;}
#about .about-img{height: 310px;overflow: hidden}
#about .content{height: 350px;overflow: hidden}
#about .about-img img{margin-left:115px;max-width: 100%;}
/*定义左侧内容的平移动画*/
@keyframes fadeInLeft { 0%{left:-600px} 100%{left: 0} }
@-webkit-keyframes fadeInLeft { 0%{left:-600px} 100%{left: 0} }
@-o-keyframes fadeInLeft { 0%{left:-600px} 100%{left: 0} }
@-moz-keyframes fadeInLeft { 0%{left:-600px} 100%{left: 0} }
/*定义右侧内容的平移动画*/
@keyframes fadeInRight { 0%{right:-600px} 100%{right: 0}}
@-webkit-keyframes fadeInRight { 0%{right:-600px} 100%{right: 0}}
@-o-keyframes fadeInRight { 0%{right:-600px} 100%{right: 0}}
@-moz-keyframes fadeInRight { 0%{right:-600px} 100%{right: 0}}
#about h6 {font-family: myFirstFont;line-height: 26px;font-style: inherit}
#about .content ul{list-style: none;padding:0}
#about .content ul li {padding-bottom:10px}
#about .content p{line-height: 26px;font-family: myFirstFont;}
/*底部*/
#footer{background: #fff;box-shadow: 0 0 12px 0 rgba(0,0,0,0.1);padding: 30px 0;color: #333;font-size: 14px;}
#footer .credits{font-size: 13px;color: #888;}
#footer .credits a{color: #1dc8cd;}
/*回到顶部按钮以及悬停动画*/
.back-to-top {position: fixed;background: linear-gradient(45deg,#1de099,#1dc8cd);color: #fff;padding: 2px 20px 8px 20px;font-size: 16px;border-radius: 4px 4px 0 0;right: 15px;bottom: 0;display: none;overflow: hidden;}
.back-to-top::before {content: '';position: absolute;width: 150%;height: 100%;top: 0;left: 0;background: #fff;z-index: -1;transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);transform-origin: 0 100%;transition: transform 0.8s;}
.back-to-top:hover {color: #1dc8cd;
    border:2px solid #1dc8cd;}
.back-to-top:hover::before {transform: rotate3d(0, 0, 1, 0deg);transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);}

@media (max-width: 768px) {
    #intro .product-screens .product-screen-2,
    #intro .product-screens .product-screen-3{display: none;}
    #intro .product-screens .product-screen-1{left: calc(50% - 154px);}
    #about .about-img img{margin-left: 0;}
    .text-lg-right {text-align: center;}
    #footer_content {text-align: center}
    #about .content {height: 700px}
}

#contact{box-shadow: 0 0 12px 0 rgba(0,0,0,0.1);padding: 60px 0;overflow: hidden;}
#contact .info {color: #333333;padding-top: 20px;padding-left: 60px}
#contact .info > div {padding-bottom: 10px}
#contact .info p{width: 255px;height: 30px;padding: 0 0 10px 42px;line-height: 28px;font-size: 14px;}
/*边框去圆角*/
#contact .form input, #contact .form textarea{border-radius: 0;box-shadow: none;font-size: 14px;}
/*按钮样式 以及悬停动画效果*/
#contact .form button[type="button"] {z-index: 1;background: linear-gradient(45deg,#1de099,#1dc8cd);border: 0;border-radius: 20px;padding: 8px 30px;color: #fff;outline: none;position: relative;overflow: hidden}
#contact .form button[type="button"]::before {content: '';position: absolute;width: 150%;height: 100%;top: 0;left: 0;background: #fff;z-index: -1;transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);transform-origin: 0 100%;transition: transform 0.8s;}
#contact .form button[type="button"]:hover::before {transform: rotate3d(0, 0, 1, 0deg);transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);}
#contact .form button[type="button"]:hover{cursor: pointer;color: #1dc8cd;border: 2px solid #1dc8cd;}

#location_map{width: 350px;height: 228px;}
@media (max-width: 768px) {  #location_map {width: 330px;} }

.icon,.home_icon {width: 2em; height: 2em;vertical-align: -0.6em;fill: #1dc8cd;overflow: hidden;}
/*了解更多按钮上的手机图标*/
.home_icon {fill: #1f4dbf;}
/*联系我们的图标,鼠标悬停的样式*/
.info > div p:hover {width: 255px;height: 30px;background: #1dc8cd;border-radius: 50px;color: #fff;}
.info > div  p:hover .icon {fill: #fff;}


/*产品介绍->物联网报警*/
/*物联网 header下面的第一个可视窗口*/
#interthing {background:url('/static/image/interthing.jpg') center center no-repeat;background-size: cover;width: 100%;height: 474px;}
#interthing .intro-text{position: absolute;left: 0;top: 50px;right: 0;height: calc(50% - 60px);display: flex;align-items: center;justify-content: center;text-align: center;flex-direction: column;}
#interthing h2{font-family: mySecondFont;margin: 30px 0 10px 0;padding: 0 15px;font-size: 48px;font-weight: 400;line-height: 56px;color: #fff;}
#interthing p {font-family: mySecondFont;color: #fff;margin-bottom: 20px;padding: 0 15px;font-size: 24px;}
.interfont {padding-left:125px}
@media (max-width: 768px) {
    .interfont {padding-left: 50px}
}

/*主内容,物联网报警*/
#inter_warning {padding:60px 0;overflow: hidden;background: #eff5f5;transition: all 0.5s;}
/*产品图片下面的名称*/
.smoking  h5, .temperature h5, .gas h5{margin-left: 50px;font-size: 20px;font-family: myFirstFont;font-weight: bold;margin-top: 10px;}
.gas h5 {margin-left: 0;}

/*查看详情按钮*/
.smoke_more,.temperature_more,.gas_more{margin-left: 60px;margin-top: 10px;text-align: center;line-height: 30px;}
.smoke_more a,.temperature_more a,.gas_more a{display: block;text-decoration: none;outline: none;width: 100px;height: 35px;border-radius: 35px;color: #fff;border:1px solid #1dc8cd;background: #1dc8cd;position: relative;overflow: hidden;}

/*查看详情按钮 鼠标悬停效果*/
.smoke_more a:hover, .temperature_more a:hover, .gas_more a:hover{color: #1dc8cd;background: #fff;border: 1px solid #1dc8cd;}
.look_details::before,
.look_details::after {content: '查看详情';position: absolute;width: 100%;height: 50%;left: 0;background: #1dc8cd;color: #fff;transition: transform 0.3s;transition-timing-function: cubic-bezier(0.2,1,0.3,1); /*规定过渡效果的速度曲线  cubic-bezier(x1,y1,x2,y2)*/}
.look_details::before {top: 0;padding-top: 1em;}
.look_details::after {bottom: 0;line-height: 0;}
.look_details > span {display: block;transform: scale3d(0.2, 0.2, 1); /*三维空间缩放(x,y,z)*/opacity: 0;transition: transform 0.3s, opacity 0.3s;transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);}
.look_details:hover::before {transform: translate3d(0, -100%, 0);}
.look_details:hover::after {transform: translate3d(0, 100%, 0);}
.look_details:hover > span {opacity: 1;transform: scale3d(1, 1, 1);}
/*产品图片 鼠标悬停效果*/
.smoking > img:hover, .temperature > img:hover, .gas > img:hover {transform: scale(1.2);}


/*产品介绍->无线网络*/
/*无线网络header 背景部分*/
#wireless {width: 100%;height: 474px;background: url('/static/image/wireless_inter.jpg') center top no-repeat;background-size: cover;}
#wireless .intro-text{position: absolute;left: 0;top: 100px;right: 0;height: calc(50% - 60px);display: flex;align-items: center;justify-content: center;text-align: center;flex-direction: column;}
#wireless h2{font-family: mySecondFont;margin: 30px 0 10px 0;padding: 0 15px;font-size: 48px;font-weight: 400;line-height: 56px;color: #000;}
#wireless p {font-family: mySecondFont;color: #000;margin-bottom: 20px;padding: 0 15px;font-size: 24px;}
#smallcell,#cpe {padding:60px 0;overflow: hidden;background: #eff5f5;transition: all 0.5s;}

/*查看详情按钮*/
.fg_more {margin-left: 120px;margin-top: 10px;text-align: center;line-height: 30px;}
.fg_more a {display: block;text-decoration: none;outline: none;width: 100px;height: 35px;border-radius: 35px;color: #1dc8cd;background: #fff;position: relative;overflow: hidden;}
.cpetcg4_b > .fg_more {margin-left: 160px;}
.cpetcg4_z > .fg_more {margin-left: 80px;}
.super_wifi_1 > .fg_more {margin-left: 200px;}

/*产品图片鼠标悬停 效果*/
.fgls500 img:hover, .fg8110 img:hover, .fg8112 img:hover, .fg8120 img:hover, .cpetcg4_b img:hover, .cpetcg4_z img:hover{transform: scale(1.2);}

/*产品名称*/
.fgls500  h5{margin-left: 120px;font-size: 20px;font-family: myFirstFont;font-weight: bold;}
.fg8110 h5,.fg8112 h5,.fg8120 h5 {margin-left: 65px;font-size: 20px;font-family: myFirstFont;font-weight: bold;}
.cpetcg4_b h5{margin-left: 105px;font-size: 20px;font-family: myFirstFont;font-weight: bold;}
.cpetcg4_z h5{margin-left: 25px;font-size: 20px;font-family: myFirstFont;font-weight: bold;}
.super_wifi_1 h5{margin-left: 50px;font-size: 20px;font-family: myFirstFont;font-weight: bold;}

/*解决方案 header 背景部分*/
#solution_info {width: 100%;height: 474px;background: url('/static/image/solution.jpg') center top no-repeat;background-size: cover;}
/*解决方案 header 文字部分*/
#solution_info .intro-text{position: absolute;left: 0;top: 80px;right: 0;height: calc(50% - 60px);display: flex;align-items: center;justify-content: center;text-align: center;flex-direction: column;}
#solution_info h2{font-family: mySecondFont;margin: 30px 0 10px 0;padding: 0 15px;font-size: 48px;font-weight: 400;line-height: 56px;color: #fff;}
#solution_info p {font-family: mySecondFont;color: #fff;margin-bottom: 20px;padding: 0 15px;font-size: 24px;}
/*解决方案正文部分*/
#solution {padding:60px 0;overflow: hidden;background: #eff5f5;transition: all 0.5s;}
/*平安城市、专网、无线定位 三种解决方案的图片和文字*/
.city, .network, .wireless{width: 350px;height: 350px;border: 2px solid #fff;overflow: hidden;}
.city > img:hover, .network > img:hover, .wireless > img:hover {transform:scale(1.2);transition: all 0.5s ease-out;}
.city > p, .network > p, .wireless > p {font-size: 16px;font-family: myFirstFont;font-weight: bold;margin-top: 20px;padding-left: 10px;}
.city > span, .network > span, .wireless > span {font-size: 12px;font-family: mySecondFont;display:inline-block;padding-left: 10px;}


/*软件平台网页 header部分的背景*/
#datamanage {width: 100%;height: 87vh;background: url('/static/image/page1_3.png') center top no-repeat;background-size: cover;}
/*软件平台 header 部分的文字*/
#datamanage .intro-text{position: absolute;left: 0;top: 180px;right: 0;height: calc(50% - 60px);display: flex;align-items: center;justify-content: center;text-align: center;flex-direction: column;}
#datamanage h3{font-family: 幼圆;margin: 30px 0 10px 0;padding: 0 15px;font-size: 48px;font-weight: 400;line-height: 56px;color: #fff;}
#datamanage p {font-family: 幼圆;color: #fff;margin-bottom: 20px;padding: 0 15px;font-size: 20px;}

/*安全、稳定、极速的图片样式以及动画效果*/
.img3 {margin-top: -400px}
.img1,.img2 {margin-top: -170px}
.img0 {transform:rotateY(240deg) translateZ(150px) scale(.925);animation:rotate_0 10s linear .5s infinite;}
.img1 {transform:rotateY(0deg) translateZ(150px);animation:rotate_1 10s linear .5s infinite;}
.img2 {transform:rotateY(120deg) translateZ(150px) scale(.925);animation:rotate_2 10s linear .5s infinite}
@keyframes rotate_0{
0%{transform:rotateY(240deg) translateZ(150px) scale(.85);z-index:1}
12.4%{z-index:1}
12.5%{transform:rotateY(285deg) translateZ(150px) scale(.9);	z-index:2}
37.5%{transform:rotateY(375deg) translateZ(150px) scale(1);z-index:2}
62.5%{transform:rotateY(465deg) translateZ(150px) scale(.9);	z-index:2}
62.6%{z-index:1}
87.5%{transform:rotateY(555deg) translateZ(150px) scale(.8)}
100%{transform:rotateY(600deg) translateZ(150px) scale(.85)}
}
@keyframes rotate_1{
0%{transform:rotateY(0deg) translateZ(150px) scale(1);z-index:2}
25%{transform:rotateY(90deg) translateZ(150px) scale(.9);z-index:2}
25.1%{transform:rotateY(91deg) translateZ(150px) scale(.9);z-index:1}
50%{transform:rotateY(180deg) translateZ(150px) scale(.8)}
74.9%{transform:rotateY(269deg) translateZ(150px) scale(.9);z-index:1}
75%{transform:rotateY(270deg) translateZ(150px) scale(.9);z-index:2}
100%{transform:rotateY(360deg) translateZ(150px) scale(1);z-index:2}
}
@keyframes rotate_2{
0%{transform:rotateY(120deg) translateZ(150px) scale(.85);z-index:1}
12.5%{transform:rotateY(165deg) translateZ(150px) scale(.8)}
37.4%{z-index:1}
37.5%{transform:rotateY(255deg) translateZ(150px) scale(.9);z-index:2}
62.5%{transform:rotateY(345deg) translateZ(150px) scale(1);z-index:2}
87.5%{transform:rotateY(435deg) translateZ(150px) scale(.9);z-index:2}
100%{transform:rotateY(480deg) translateZ(150px) scale(.85);z-index:1}
}

/*网页底部样式*/
.bottom_li {display: inline-block;float: left;border-bottom: 1px solid black;}
.bottom_li li{float: left;padding-right: 10px;font-family: myFirstFont;font-size: 13px;font-weight: bold;}
.leftnav {width: 60%;font-size: 12px;display: inline-block;vertical-align: middle;}
.leftnav ul {width: 80%;border-bottom: 1px solid black;}
.leftnav ul li {float: left;line-height: 40px;}
.leftnav a{color: #000;}
.leftnav a:hover {color: #000;text-decoration: none;}
.rightchat img {border:1px solid black;}
/*vertical-align 属性设置元素的垂直对齐方式  middle()把此元素放置在父元素的中部*/
.righttext {display: inline-block;vertical-align: middle;}
.righttext h5 {font-size: 14px;font-weight:bold;}
.line {border-top: 1px solid #000;overflow: hidden;margin: 10px 0;}

@media (max-width: 768px) {
    .leftnav {width: 100%;margin-left: 50px}
    .leftnav ul {width:100%;}
    .rightchat {width: 100%;margin-left: 50px;margin-top: 20px}
}

/*选择语言的下拉框样式 背景色为无色*/
.form-inline {color: black;font-weight: 800;background-color: transparent;outline: none;}
.mobile-form-inline {color: #fff;background-color: transparent;outline: none;}