/*util*/
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
overflow-x: hidden;
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
tap-highlight-color: rgba(0, 0, 0, 0);
}
a,
a:active,
a:hover,
a:focus,
a:visited {
text-decoration: none;
}
ul,
li {
list-style: none;
}
.text-center {
text-align: center;
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
.hide {
display: none;
}
.clearfix:after {
content: '';
display: block;
visibility: visible;
overflow: hidden;
clear: both;
}
/*head nav*/
/*缁熶竴澶撮儴鏍峰紡*/
.fixed_top_menu {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 100;
height: 2rem;
background: linear-gradient(#fff, #ededed);
border-bottom: 1px solid #535353;
}
.igo_logo {
width: 100%;
float: left;
background: url(/uploads/image/zkaimages/logo.jpg) no-repeat center center;
background-size: 4.5rem;
height: 2rem;
}
.go_back {
float: left;
margin-left: -100%;
width: 2rem;
height: 2rem;
line-height: 2rem;
text-align: center;
color: #535353;
display: block;
font-size: 0.65rem;
-webkit-transform: scaley(2);
transform: scaley(2);
}
.phone_pic {
float: left;
margin-left: -2rem;
width: 2rem;
height: 2rem;
display: block;
background: url(/uploads/image/zkaimages/phone.png) no-repeat center center;
background-size: 0.8rem;
}
/*start*/
body {
background-color: #121b49;
font-family: 'microsoft yahei';
}
.boundary {
margin-left: 0.65rem;
margin-right: 0.65rem;
}
.imgtitle {
display: block;
position: relative;
width: 100%;
z-index: 10;
}
.header {
margin-top: 2rem;
position: relative;
}
.header img {
display: block;
width: 100%;
}
.header p {
font-size: 0.675rem;
color: #fff;
font-weight: normal;
position: absolute;
right: 0.8rem;
bottom: 3rem;
}
.section {
margin-top: 0.5rem;
}
.xt-content {
position: relative;
}
.sbg {
position: absolute;
}
.sbg:nth-of-type(1) {
width: 2.75rem;
height: 8rem;
top: 19.6rem;
right: 0;
}
.sbg:nth-of-type(2) {
width: 2rem;
height: 5rem;
top: 37.75rem;
left: 0;
}
.sbg:nth-of-type(3) {
width: 3.5rem;
height: 12.5rem;
top: 62.9rem;
left: 0;
}
.sbg:nth-of-type(4) {
width: 3.5rem;
height: 6.25rem;
top: 85.4rem;
right: 0;
}
.section1 ul {
padding: 0 0.875rem;
position: relative;
top: -0.46rem;
}
.section1 ul li {
border-radius: 2px;
margin-bottom: 0.5rem;
}
.section1 ul li h2 {
height: 1.5rem;
background-color: #e0eafe;
font-size: 0.6rem;
color: #ff6300;
font-weight: bold;
line-height: 1.5rem;
padding-left: 0.7rem;
border-radius: 2px;
position: relative;
}
.section1 ul li h2:after {
content: '';
width: 0;
height: 0;
border: 0.2rem solid transparent;
border-top: 0.25rem solid #ff6300;
position: absolute;
right: 1rem;
top: 0.6rem;
}
.section1 ul li p {
font-size: 0.6rem;
color: #000;
font-weight: normal;
padding: 0.7rem;
background-color: #fff;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
display: none;
}
.section1 ul li p a {
color: #ff6207;
text-decoration: underline;
}
.section1 ul li.liactive h2 {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
background-color: #ff6207;
color: #fff;
}
.section1 ul li.liactive h2:after {
border: 0.2rem solid transparent;
border-bottom: 0.25rem solid #fff;
top: 0.4rem;
}
.section2 {
margin-top: 2rem;
}
.section2 .panel2 {
background: no-repeat center center;
background-size: contain;
margin-left: 0.9rem;
width: 13rem;
height: 10.6rem;
position: relative;
top: -0.65rem;
border-radius: 2px;
}
.section2 .panel2 .infobox {
width: 5rem;
position: absolute;
}
.section2 .panel2 .infobox:nth-of-type(1) {
top: 0.75rem;
left: 1rem;
}
.section2 .panel2 .infobox:nth-of-type(2) {
top: 0.75rem;
left: 7.5rem;
}
.section2 .panel2 .infobox:nth-of-type(3) {
top: 4.65rem;
left: 1rem;
}
.section2 .panel2 .infobox:nth-of-type(4) {
top: 4.65rem;
left: 7.5rem;
}
.section2 .panel2 .infobox img {
width: 1.25rem;
height: 1.25rem;
float: left;
}
.section2 .panel2 .infobox h2 {
font-size: 0.65rem;
color: #000;
font-weight: bold;
line-height: 1.25rem;
}
.section2 .panel2 .infobox p {
font-size: 0.6rem;
color: #333333;
font-weight: normal;
line-height: 0.85rem;
margin-top: 0.2rem;
}
.section2 .panel2 .abtnbox2 {
padding-top: 8.5rem;
}
.abtnbox {
display: block;
text-align: center;
}
.abtnbox .abtn {
display: inline-block;
height: 1.25rem;
background-color: #ff6207;
font-size: 0.6rem;
color: #fff;
font-weight: normal;
padding: 0 0.6rem;
line-height: 1.25rem;
border-radius: 2rem;
}
.smalltitle {
font-size: 0.625rem;
color: #000;
font-weight: bold;
position: relative;
text-align: center;
}
.smalltitle:before {
content: '';
width: 0.8rem;
height: 1px;
position: absolute;
background-color: #000;
bottom: 0.4rem;
left: -1.2rem;
}
.smalltitle:after {
content: '';
width: 0.8rem;
height: 1px;
position: absolute;
background-color: #000;
bottom: 0.4rem;
right: -1.2rem;
}
.section3 {
margin-top: 2rem;
}
.section3 .panel3 {
position: relative;
top: -0.71rem;
}
.section3 .panel3 .infobox3 {
float: left;
width: 11.2rem;
height: 9.25rem;
background-color: #fff;
margin-left: 2.2rem;
border-radius: 2px;
position: relative;
z-index: 3;
text-align: center;
}
.section3 .panel3 .infobox3 h2 {
line-height: 1rem;
}
.section3 .panel3 .infobox3 ul.leftnav {
margin: 0.4rem 0.45rem 0.5rem;
}
.section3 .panel3 .infobox3 ul.leftnav li {
font-size: 0.55rem;
color: #ff6300;
font-weight: normal;
line-height: 0.675rem;
border: 1px solid #ff6300;
float: left;
width: 3.25rem;
height: 1.15rem;
box-sizing: border-box;
margin-right: 0.27rem;
text-align: center;
line-height: 1.1rem;
}
.section3 .panel3 .infobox3 ul.leftnav li:last-child {
margin-right: 0;
}
.section3 .panel3 .infobox3 ul.leftnav li.active1 {
background-color: #ff6207;
color: #fff;
position: relative;
}
.section3 .panel3 .infobox3 ul.leftnav li.active1:after {
content: '';
width: 0;
height: 0;
border: 0.4rem solid transparent;
border-top: 0.4rem solid #ff6207;
position: absolute;
bottom: -0.7rem;
left: 1.25rem;
}
.section3 .panel3 .infobox3 .infocontent {
height: 4.65rem;
margin: 0 0.45rem;
background-color: #e6eefe;
font-size: 0.575rem;
color: #000;
font-weight: normal;
line-height: 0.9rem;
padding: 0.75rem 0.5rem 0;
}
.section3 .panel3 .rightnav {
height: 9.25rem;
width: 1.75rem;
float: left;
position: relative;
z-index: 2;
}
.section3 .panel3 .rightnav li {
width: 1.5rem;
font-size: 0.625rem;
color: #fff;
font-weight: bold;
border: 0.05rem solid #fff;
padding: 0.4rem;
box-sizing: border-box;
margin-left: 0.4rem;
line-height: 0.7rem;
text-align: center;
position: absolute;
}
.section3 .panel3 .rightnav li:nth-of-type(1) {
top: 0;
right: 0;
}
.section3 .panel3 .rightnav li:nth-of-type(2) {
bottom: 0;
right: 0;
}
.section3 .panel3 .rightnav li.active2 {
background-color: #ff6207;
color: #fff;
width: 1.75rem;
margin-left: 0;
border: none;
}
.section3 .abtnbox3 {
position: relative;
top: -0.4rem;
}
.section4 {
margin-top: 2rem;
}
.section4 .wrapperbox4 {
position: relative;
width: 14.25rem;
height: 14.25rem;
border-radius: 50%;
margin: auto;
overflow: hidden;
transition: -webkit-transform 1s;
transition: transform 1s;
transition: transform 1s, -webkit-transform 1s;
}
.section4 .wrapperbox4:after {
content: '';
color: red;
position: absolute;
left: 50%;
top: 50%;
width: 2px;
height: 2px;
background-color: red;
}
.section4 .wrapperbox4 ul {
position: relative;
}
.section4 .wrapperbox4 ul li {
position: absolute;
font-size: 0.6rem;
width: 10rem;
height: 10rem;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
left: 50%;
top: 50%;
margin-top: -2.875rem;
margin-left: -10rem;
overflow: hidden;
box-sizing: border-box;
}
.section4 .wrapperbox4 ul li p {
background: no-repeat;
background-position: center -0.1rem;
background-size: 46%;
display: block;
height: 14rem;
width: 14rem;
position: absolute;
bottom: -7rem;
right: -7rem;
text-decoration: none;
color: white;
-webkit-transform: skew(-30deg) rotate(-60deg) scale(1);
transform: skew(-30deg) rotate(-60deg) scale(1);
border-radius: 50%;
text-align: center;
padding-top: 0.4rem;
box-sizing: border-box;
}
.section4 .wrapperbox4 ul li p.active {
background: no-repeat;
background-position: center -0.1rem;
background-size: 46%;
}
.section4 .wrapperbox4 ul li:nth-of-type(1) {
-webkit-transform: rotate(60deg) skew(30deg);
transform: rotate(60deg) skew(30deg);
}
.section4 .wrapperbox4 ul li:nth-of-type(2) {
-webkit-transform: rotate(120deg) skew(30deg);
transform: rotate(120deg) skew(30deg);
}
.section4 .wrapperbox4 ul li:nth-of-type(3) {
-webkit-transform: rotate(180deg) skew(30deg);
transform: rotate(180deg) skew(30deg);
}
.section4 .wrapperbox4 ul li:nth-of-type(4) {
-webkit-transform: rotate(240deg) skew(30deg);
transform: rotate(240deg) skew(30deg);
}
.section4 .wrapperbox4 ul li:nth-of-type(5) {
-webkit-transform: rotate(300deg) skew(30deg);
transform: rotate(300deg) skew(30deg);
}
.section4 .wrapperbox4 ul li:nth-of-type(6) {
-webkit-transform: rotate(0deg) skew(30deg);
transform: rotate(0deg) skew(30deg);
}
.section4 .contentbox4 {
width: 10.25rem;
height: 10.25rem;
background-color: #fff;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin-left: -5.125rem;
margin-top: -5.125rem;
padding-top: 0.8rem;
box-sizing: border-box;
transition: opacity 0.5s;
background: no-repeat center center;
background-size: 100%;
}
.section4 .contentbox4 h2 {
text-align: center;
line-height: 1.4rem;
}
.section4 .contentbox4 p {
font-size: 0.55rem;
color: #000;
font-weight: normal;
text-align: center;
line-height: 0.8rem;
padding: 0 1rem;
}
.section4 .contentbox4 p:nth-of-type(1) {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
height: 2.4rem;
}
.section4 .contentbox4 p:nth-of-type(2) {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.section4 .contentbox4 .abtnbox4 {
position: absolute;
width: 100%;
bottom: 0.6rem;
}
.section5 {
margin-top: 2rem;
margin-bottom: 2rem;
}
.section5 .panel5 {
background-color: #fff;
border-radius: 2px;
width: 12.95rem;
margin-left: 0.875rem;
height: 12.2rem;
position: relative;
top: -0.7rem;
}
.section5 .panel5 .list-container {
height: 100%;
overflow: hidden;
position: relative;
}
.section5 .panel5 .list-container .list {
position: absolute;
height: 100%;
width: 51.8rem;
transition: left 0.3s;
left: 0;
}
.section5 .panel5 .list-container .list .item {
float: left;
height: 100%;
width: 12.95rem;
position: relative;
}
.section5 .panel5 img {
width: 100%;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
.section5 .panel5 h2 {
font-size: 0.7rem;
color: #000;
font-weight: bold;
padding: 0.65rem 0 0.2rem;
text-align: center;
}
.section5 .panel5 p {
font-size: 0.6rem;
color: #4d4d4d;
font-weight: normal;
line-height: 0.9rem;
padding: 0.25rem 1rem 0;
}
.section5 .panel5 p label {
color: #000;
}
.section5 .panel5 .abtnbox5 {
position: absolute;
bottom: 0.4rem;
width: 100%;
}
.section5 .panel5 .nextbtn {
width: 1.1rem;
height: 1.1rem;
background-color: #ff6207;
color: #fff;
border-radius: 50%;
line-height: 1.1rem;
text-align: center;
position: absolute;
right: -0.4rem;
top: 5.3rem;
}
.section5 .panel5 .nextbtn img {
width: 0.5rem;
height: 0.75rem;
display: block;
margin: 0.175rem 0.3rem;
}
.section5 .panel5 .prebtn {
width: 1.1rem;
height: 1.1rem;
background-color: #ff6207;
color: #fff;
border-radius: 50%;
line-height: 1.1rem;
text-align: center;
position: absolute;
left: -0.4rem;
top: 5.3rem;
}
.section5 .panel5 .prebtn img {
width: 0.5rem;
height: 0.75rem;
display: block;
margin: 0.175rem 0.3rem;
}
.pop_form {
position: fixed;
left: 0;
right: 0;
bottom: 2.5rem;
background-color: #ff6207;
color: #fff;
height: 1.6rem;
line-height: 1.6rem;
text-align: center;
font-size: 0.6rem;
z-index: 990;
}
.sec_pop_form{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 999;
opacity: 0;
-webkit-transform:scale(0);
transform:scale(0);
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.sec_pop_form.active{
opacity: 1;
-webkit-transform:scale(1);
transform:scale(1);
}
.close_box{
position: absolute;
right: 1.25rem;
top: -2rem;
width: 1.25rem;
height: 1.25rem;
border-radius: 50%;
line-height: 1rem;
z-index: 99999;
text-align: center;
background: url(/uploads/image/zkaimages/close_a_btn.png) no-repeat center center;
background-size: 0.55rem .5rem;
border: 1px solid #fff;
}
.close_box:after{
content: '';
position: absolute;
top: 1.25rem;
left: 50%;
width: 1px;
height: .75rem;
background-color: #fff;
display: block;
}
.sec_pop_mask{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.7)
}
.sec_pop_content{
position: absolute;
left: 50%;
top: 50%;
width: 12rem;
padding: 1rem;
background-color: #fff;
-webkit-box-sizing:border-box;
box-sizing:border-box;
-webkit-transform: translate3d(-50%,-50%,0);
-moz-transform: translate3d(-50%,-50%,0);
-ms-transform: translate3d(-50%,-50%,0);
-o-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
.sec_tit{
position: relative;
margin-bottom: 1.2rem;
font-size: .9rem;
color: #000;
text-align: center;
}
.sec_tit:after{
content: '';
position: absolute;
left: 50%;
top: 1.5rem;
width: 2.5rem;
height: 1px;
-webkit-transform: translate3d(-50%,0,0);
-moz-transform: translate3d(-50%,0,0);
-ms-transform: translate3d(-50%,0,0);
-o-transform: translate3d(-50%,0,0);
transform: translate3d(-50%,0,0);
background-color: #243e4c;
}
.value_item{
width: 10rem;
height: 1.6rem;
line-height: 1.6rem;
margin: 0.6rem auto;
color: #606060;
position: relative;
}
.value_item span{
float: left;
display: block;
width: 2.7rem;
font-size: .65rem;
text-align: center;
color: #606060;
}
.value_box{
border:1px solid #e1e1e1;
border-radius: 5px;
padding: 3px 5px;
height: 1.5rem;
-webkit-box-sizing:border-box;
box-sizing:border-box;
background: transparent;
width: 7rem;
font-size: .65rem;
color: #777;
}
.sec_button_form{
width: 8rem;
height: 1.6rem;
display: block;
margin: 1.2rem auto 0;
background-color: #ff6207;
color: #fff;
line-height: 1.6rem;
text-align: center;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
font-size: .7rem;
letter-spacing: 3px;
text-decoration: none;
}
.sec_button_form:link,.sec_button_form:visited,.sec_button_form:active{color: #fff};