@charset "utf-8";
/* CSS Document */

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0;  /*-webkit-appearance:none; -moz-appearance:none;*/}
body{ font-size:32px;margin: 0 auto; -webkit-text-size-adjust:100%; background-color: #fff;}
a{ color:#333;text-decoration:none}
a:hover{color:#000;text-decoration:none;}
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word; color:#777;}

/*通用定义*/
.clearfix:after {clear:both; height:0; overflow:hidden; display:block; visibility:hidden; content:"."; }
.fl{ float:left;}
.fr{ float:right;}
.clearer{clear:both; height:0; display:block; font-size:1px;overflow:hidden;}

.pad2{ padding: 0.2rem;}
.padS2{ padding: 0 0.2rem;}
.marB2{ margin-bottom: 0.2rem;}
.marB3{ margin-bottom: 0.3rem;}
.marB4{ margin-bottom: 0.4rem;}
.bgf{ background-color: #fff;}

html{ height: 100%; overflow: hidden;}
body{ width: 7.5rem; height: 100%; margin: 0 auto;}

#bgm_control{ position:absolute; top:0.5rem; left:0.5rem; width:0.48rem; height:0.48rem; background-image:url(au.png); background-position: center; background-repeat: no-repeat; background-size:0.4rem 0.4rem; z-index:999;}

#swiper-container1{ height: 100%; margin-bottom: 0; overflow: visible;}
#swiper-container1 .swiper-slide{ display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;}
.p1{ position: relative; width: 100%; height: 100%; background-image: url(bg1.jpg); background-size: 100% 100%;}
.fj{ position: absolute; top: 0.5rem; right: 0.5rem; width: 1.44rem; height: 0.6rem; background-image: url(i_fj.png); background-size: 100% 100%;}
.fj a{ width: 40%; height: 0.6rem;}
a#btn_jt{ float: left;}
a#btn_ft{ float: right;}
.p1_tit{ position: absolute; top: 1rem; left: 50%; width: 6.29rem; height: 4.33rem; margin-left: -3.145rem;}

.p1 .arr{ position: absolute; left: 50%; bottom: 0.2rem; width: 0.3rem; height: 0.34rem; margin-left: -0.15rem; background-image: url(arr.png); background-size: 100% 100%;}
.p1_bot{ position: absolute; left: 0.6rem; bottom: 0.3rem; width: 6.3rem;}
.p1_bot_des{ float: left;  width: 4.8rem; font-size: 0.24rem; line-height: 0.36rem; color: #fff; text-align: left;}
.p1_qrcode{ float: right; width: 1.3rem;}
.p1_qrcode img{ width: 1.3rem; height: 1.3rem;}
.p1_qrcode p{ font-size: 0.2rem; line-height: 0.3rem; color: #fff; text-align: center;}


.p2{ position: relative; width: 100%; height: 100%; background-image: url(bg2.jpg); background-size: 100% 100%; overflow: hidden;}
#swiper-container2{ position: absolute; left: 0; bottom: 3rem; width: 100%; height: 4.34rem; /*margin-top: 5.7rem;*/ overflow: visible;}
#swiper-container2 .swiper-slide{ display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    width:3.05rem; height: 4.34rem;}
.i_city{ width:3.05rem; height: 4.34rem; background-size: 100% 100%;}
.i_guangdong{ background-image: url(i_guangdong.png);}
.i_guangzhou{ background-image: url(i_guangzhou.png);}
.i_shenzhen{ background-image: url(i_shenzhen.png);}
.i_zhuhai{ background-image: url(i_zhuhai.png);}
.i_huizhou{ background-image: url(i_huizhou.png);}
.i_foshan{ background-image: url(i_foshan.png);}
.i_zhongshan{ background-image: url(i_zhongshan.png);}
.i_dongguan{ background-image: url(i_dongguan.png);}
.i_zhaoqing{ background-image: url(i_zhaoqing.png);}
.i_jiangmen{ background-image: url(i_jiangmen.png);}
/*.icon_map{ position: absolute; top: 0.3rem; left: 50%; width: 5.55rem; height: 4.32rem; margin-left: -2.16rem; background-image: url(map.png); background-size: 100% 100%;}*/
.icon_map{ position: absolute; top: 0; left: 50%; width: 7.5rem; height: 6rem; margin-left: -3.75rem; }
.map_tem{ display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: 100% 100%; background-repeat: no-repeat;}
.map_tem.active{ display: block;}
.map_guangdong{ background-image: url(map_guangdong.png);}
.map_guangzhou{ background-image: url(map_guangzhou.png);}
.map_shenzhen{ background-image: url(map_shenzhen.png);}
.map_zhuhai{ background-image: url(map_zhuhai.png);}
.map_huizhou{ background-image: url(map_huizhou.png);}
.map_foshan{ background-image: url(map_foshan.png);}
.map_zhongshan{ background-image: url(map_zhongshan.png);}
.map_dongguan{ background-image: url(map_dongguan.png);}
.map_zhaoqing{ background-image: url(map_zhaoqing.png);}
.map_jiangmen{ background-image: url(map_jiangmen.png);}

.icon_perspon{ position: absolute; bottom: 0; left: 50%; width: 4.65rem; height: 4.03rem; margin-left: -2.015rem;}
.person_city{ background-image: url(person_city.png); background-size: 100% 100%;}
.person_content{ background-image: url(person_content.png); background-size: 100% 100%;}

/*.city_tem{ display: none;}*/
.city_tem{ display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10;}
.city_tem.active{ display: block;}
.city_c_select{ width: 100%; height: 100%; background-image: url(bg2.jpg); background-size: 100% 100%; overflow: hidden;}
.city_c_select .btn{ display: block; width: 5.08rem; height: 3.8rem; margin: 10% auto 0;}
.btn.btn_zcsd{ background-image: url(icon_zcsd.png); background-size: 100% 100%;}
.btn.btn_jdjs{ background-image: url(icon_jdjs.png); background-size: 100% 100%;}
.btn_back{ position: absolute; bottom: 0.3rem; right: 0.3rem; width: 1rem; height: 1rem; background-image: url(btn_back.png); background-size: 100% 100%;}

.zcsd, .jdjs{ display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(bg2.jpg); background-size: 100%; overflow: hidden;}
.bg_grid{ width: 6.5rem; height: 85%; margin: 15% auto 0; background: url(bg_grid.jpg) repeat left top; background-size: 0.1rem 0.1rem; border: 0.01rem solid #fff; border-radius: 0.04rem;}
.zcsd_city{ position: relative; width: 3.28rem; height: .6rem; margin: -0.3rem auto 0.3rem; font-weight: bold; font-size: 0.3rem; line-height: 0.6rem; color: #fff; text-indent: 0.7rem; background-color: #2f4ccc; border-radius: 0.3rem;}
#zcsd_gd{ width: 6.4rem; font-size: 0.3rem; line-height: 0.3rem;}
#zcsd_gd span{ margin-left: 0.7rem;}
.zcsd_city:before{ position: absolute; top: 0.08rem; left: 0.26rem; width: 0.34rem; height: 0.5rem; background-image: url(icon_loc.png); background-size: 0.34rem 0.5rem; content: "";}
.zcsd_city span{ margin-left: 0.2rem; font-weight: normal;}

.con_wrap{ height: 90%; padding: 0 0.34rem; overflow-y: scroll;}
.con_tem{ margin-bottom: 0.4rem;}
.con_tit{ position: relative; height: 0.36rem; /*padding-left: 0.44rem;*/ margin-bottom: 0.2rem; font-weight: bold; font-size: 0.34rem; line-height: 0.36rem; color: #2f4ccc; /*background-image: url(icon_tit.png); background-repeat: no-repeat; background-size: 0.36rem 1.8rem;*/}
/*.con_tit.icon_zjzc{ background-position: 0 0;}
.con_tit.icon_rcfz{ background-position: 0 -0.36rem;}
.con_tit.icon_jdzc{ background-position: 0 -0.72rem;}
.con_tit.icon_blsh{ background-position: 0 -1.08rem;}
.con_tit.icon_lxfs{ background-position: 0 -1.44rem;}*/
.con_tem p{ margin-bottom: 0.2rem; font-size: 0.3rem; line-height: 0.48rem; color: #333; text-align: justify;}
.con_tem p a{ color: #637cec;}

.jdjs_city{ position: relative; width: 2rem; height: 0.6rem; margin: -0.3rem auto 0.3rem; font-weight: bold; font-size: 0.3rem; line-height: 0.6rem; color: #fff; text-indent: 0.94rem; background-color: #2f4ccc; border-radius: 0.3rem;}
.jdjs_city:before{ position: absolute; top: 50%; left: 0.46rem; width: 0.34rem; height: 0.5rem; margin-top: -0.25rem; background-image: url(icon_loc.png); background-size: 0.34rem 0.5rem; content: "";}
.jdjs_city.jdjs_city_jm{ width: 7rem; margin-left: -0.25rem; text-indent: 0; text-align: center;}
.jdjs_city.jdjs_city_jm:before{ display: none;}
.jdjs_intro{ padding-bottom: 0.3rem; border-bottom: 0.02rem solid #b5c2d4;}
.jdjs_name{ width: 6rem; height: 0.82rem; padding-left: 0.95rem; margin: 0 0 0.3rem -0.1rem; font-weight: bold; font-size: 0.3rem; line-height: 0.8rem; color: #333;  background-image: url(bg_tit.png); background-size: 100% 100%; box-sizing:border-box;}
.jdjs_name.tem2{ font-size: 0.3rem; line-height: 0.4rem;}
.con_tem .jdjs_des{ margin-bottom: 0.3rem; font-size: 0.3rem; line-height: 0.48rem; color: #375eac; text-align: justify;}
.jdjs_intro img{ width: 100%; height: auto;}

.qrcode{ box-sizing: border-box; width: 5.8rem; height: 2.32rem; padding: 0.3rem; background-image: url(bg_qrcode.png); background-size: 100% 100%; overflow: hidden;}
.qrcode img{ float: left; width: 1.7rem; height: 1.7rem;}
.qrcode p{ float: right; margin-top: 0.25rem; font-size: 0.26rem; line-height: 0.48rem; color: #fff;}

@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@-webkit-keyframes rotate {
  from {
    -webkit-transform:rotate(0);
  }

  to {
    -webkit-transform:rotate(360deg)
  }
}

@keyframes rotate {
  from {
    transform:rotate(0);
  }

  to {
    transform:rotate(360deg);
  }
}

.rotate {
  -webkit-animation-name: rotate;
  animation-name: rotate;
}


.animated {
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}