/* KISSY CSS Reset
理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
特色：1. 适应中文；2. 基于最新主流浏览器。
维护：玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com> */
/** 清除内外边距 **/
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {margin: 0;padding: 0;}
/** 设置默认字体 **/
body,button,input,select,textarea {font: 14px/1.5 tahoma, arial, sans-serif;}
h1,h2,h3,h4,h5,h6 {font-size: 100%;}
address,cite,dfn,em,var {font-style: normal;}
/* 将斜体扶正 */
code,kbd,pre,samp {font-family: courier new, courier, monospace;}
/* 统一等宽字体 */
small {font-size: 12px;}
/* 小于 12px 的中文很难阅读，让 small 正常化 */
/** 重置列表元素 **/
ul,ol {list-style: none;}
/** 重置文本格式元素 **/
a {text-decoration: none;}
a:hover {text-decoration: none;}
/** 重置表单元素 **/
legend {color: #000;}
/* for ie6 */
fieldset,img {border: 0;}
/* img 搭车：让链接里的 img 无边框 */
button,input,select,textarea {font-size: 100%;}
/* 使得表单元素在 ie 下能继承字体大小 */
/* 注：optgroup 无法扶正 */
/** 重置表格元素 **/
table {border-collapse: collapse;border-spacing: 0;}
.fl {float: left;}
.fr {float: right;}
.cl {clear: both;}
.text-left {text-align: left;}
.text-right {text-align: right;}
.text-center {text-align: center;}
.center_v {
  /* Center vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  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;
}
.single_text {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
@keyframes animation-rotate {
  from {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);}
  to {
    transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
}
@-moz-keyframes animation-rotate {
  from {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
}
@-webkit-keyframes animation-rotate {
  from {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
}
@-o-keyframes animation-rotate {
  from {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
}
@keyframes animation-rotate-un {
  from {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
  }
}
@-moz-keyframes animation-rotate-un {
  from {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
  }
}
@-webkit-keyframes animation-rotate-un {
  from {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
  }
}
@-o-keyframes animation-rotate-un {
  from {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
  }
}

html,body {width: 100%;max-width: 800px;margin: 0 auto; height: 100%;font: 14px/1.5 "Microsoft Yahei", tahoma, arial, sans-serif;overflow: hidden;}
body {background-color: #fff;}
img {width: 100%;}
.page {width: 100%;height: 100%;position: relative;}

.fn-audio {position: fixed; z-index: 100;left: 2%;top: 1%;}
.fn-audio .btn {border: none;}
.fn-audio .btn_audio span {display: inline-block;width: 30px;height: 30px;}
.fn-audio .btn_audio .audio_open {
  animation: animation-rotate-un 2s linear infinite normal forwards;
  -ms-animation: animation-rotate-un 2s linear infinite normal forwards;
  -moz-animation: animation-rotate-un 2s linear infinite normal forwards;
  -webkit-animation: animation-rotate-un 2s linear infinite normal forwards;
  -o-animation: animation-rotate-un 2s linear infinite normal forwards;
}
.fn-audio .btn_audio .audio_close {display: none;}
#loading {
  width: 100%;
  height: 100%;
  background:#ebebeb url(http://p0.ifengimg.com/l/2018/25/cf7f00177957afb/lodbg.jpg) no-repeat center center;
  background-size: 100% 100%;
  text-align: center;
  /* Center vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  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;
}
#loading .content {width: 80%;text-align: center;}
#loading .content .title {width: 70%;margin: 20% auto;}
#loading .content .title2 {width: 80px;margin: 0 auto 75%;position: relative;}
#loading .content .logo {
	position: absolute;
	left: 5px;
	top: 40px;
  width: 30px;
  line-height: 0;
  font-size: 0;
  display: inline-block;
  animation: animation-rotate-un 1600ms linear infinite normal forwards;
  -webkit-animation: animation-rotate-un 1600ms linear infinite normal forwards;
  transform-origin: center center;
  -webkit-transform-origin: center center;
}
#loading .content .logo_text {width: 80px;margin: 0 auto;}
#main {display: none;width: 100%;height: 100%;overflow: hidden;background-color: #D8EDC8;}
#main .page {width: 100%;height: 100%;overflow: hidden;}
.delay1{
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
}
.delay2{
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
}

@keyframes tipmovo {
  0%,100% {transform: translateY(0px);-webkit-transform: translateY(0px);}
  50% {transform: translateY(5px);-webkit-transform: translateY(5px);}
}
@-webkit-keyframes tipmovo {
  0%,100% {transform: translateY(0px);-webkit-transform: translateY(0px);}
  50% {transform: translateY(5px);-webkit-transform: translateY(5px);}
}

@keyframes cloudmovo {
  0%,100% {transform: translateX(0px);-webkit-transform: translateX(0px);}
  50% {transform: translateX(30px);-webkit-transform: translateX(30px);}
}
@-webkit-keyframes cloudmovo {
  0%,100% {transform: translateX(0px);-webkit-transform: translateX(0px);}
  50% {transform: translateX(30px);-webkit-transform: translateX(30px);}
}

.tipmovo1{
	animation: tipmovo 3s linear 1s infinite normal forwards;
  -webkit-animation: tipmovo 3s linear 1s infinite normal forwards;
}
.tipmovo2{
	animation: tipmovo 3.5s linear 1.5s infinite normal forwards;
  -webkit-animation: tipmovo 3.5s linear 1.5s infinite normal forwards;
}
.tipmovo3{
	animation: tipmovo 4s linear 2s infinite normal forwards;
  -webkit-animation: tipmovo 4s linear 2s infinite normal forwards;
}

.cloudmovo1{
	animation: cloudmovo 5s linear 1s infinite normal forwards;
  -webkit-animation: cloudmovo 5s linear 1s infinite normal forwards;
}
.cloudmovo2{
	animation: cloudmovo 8s linear 1s infinite normal forwards;
  -webkit-animation: cloudmovo 8s linear 1s infinite normal forwards;
}
.cloudmovo3{
	animation: cloudmovo 10s linear 1s infinite normal forwards;
  -webkit-animation: cloudmovo 10s linear 1s infinite normal forwards;
}

.page1 {/*display: none;*/}
.page1 .content {width: auto;height: 100%;overflow: scroll;-webkit-overflow-scrolling: touch; font-size: 0; position: relative;}
.page1 .content .mapbox {width: 312%; height: 100%; position: relative;}
.page1 .content .mapimg {width: 100%; height: 100%;}
.page1 .content .tipbox,.page1 .content .car,.page1 .content .cloud {position: absolute;}

.page1 .content .car {width: 3.8%; left: 3.9%;top: 60.6%;}
.page1 .content .cloud1 {width: 8%; left: 3.8%;top: 77.3%;}
.page1 .content .cloud2 {width: 4.3%; left: 25.6%;top: 75%;}
.page1 .content .cloud3 {width: 7.7%; left: 31%;top: 76.8%;}
.page1 .content .cloud4 {width: 5.7%; left: 36.6%;top: 59.6%;}
.page1 .content .cloud5 {width: 9.4%; left: 40.3%;top: 79.1%;}

.page1 .content .mark1 {width: 5.3%; left: 42.6%;top: 68.2%;}
.page1 .content .mark2 {width: 3.5%; left: 35.1%;top: 12.7%;}
.page1 .content .mark3 {width: 7.3%; left: 56.7%;top: 1.6%;}
.page1 .content .mark4 {width: 7.5%; left: 41.1%;top: 93.4%;}
.page1 .content .mark5 {width: 8.7%; right: 0%;top: 65.5%;}
.page1 .content .mark6 {width: 4.8%; left: 38.4%;top: 36%;}
.page1 .content .mark7 {width: 4.3%; left: 47.2%;top: 59.3%;}
.page1 .content .mark8 {width: 7%; left: 58.1%;top: 34.4%;}
.page1 .content .mark9 {width: 4.1%; left: 59.8%;top: 66.6%;}
.page1 .content .mark10 {width: 4%; left: 30.4%;top: 12.5%;}
.page1 .content .mark11 {width: 4.7%; left: 35.7%;top: 66.1%;}
.page1 .content .mark12 {width: 3.9%; left: 49.2%;top: 12%;}
.page1 .content .mark13 {width: 6%; left: 2.5%;top: 66.5%;}
.page1 .content .mark14 {width: 3.8%; left: 31.2%;top: 21.2%;}
.page1 .content .mark15 {width: 7.9%; left: 63.8%;top: 49.6%;}
.page1 .content .mark16 {width: 5.3%; left: 3%;top: 24.3%;}
.page1 .content .mark17 {width: 5%; left: 20.8%;top: 70.2%;}
.page1 .content .mark18 {width: 5.2%; left: 15.3%;top: 21.2%;}
.page1 .content .mark19 {width: 4.7%; left: 28.6%;top: 63.4%;}
.page1 .content .mark20 {width: 4.1%; left: 20.9%;top: 54.3%;}
.page1 .content .mark21 {width: 6.2%; left: 36%;top: 77%;}
.page1 .content .mark22 {width: 6%; left: 59.7%;top: 76.5%;}
.page1 .content .mark23 {width: 6.4%; left: 61.7%;top: 9.1%;}
.page1 .content .mark24 {width: 6.8%; left: 49.7%;top: 38.1%;}

.page1 .content .vodeolist {position: absolute;left: 0;top: 0;width: 160px; background-color: #D8EDC8;padding: 5px;border-radius: 5px;z-index: 20; display: none;}
.page1 .content .vodeolist li {font-size: 14px;padding: 5px;padding-left: 20px;background: url(http://p1.ifengimg.com/l/2018/25/cf7f00177957afb/play.png) no-repeat 2px 8px;background-size: 15px;}
.page1 .content .mark4 .vodeolist {top: -100%;}
.page1 .content .mark5 .vodeolist {left: -100%;}

.page1 .content .sharebox {position: absolute;right: 3%;bottom: 3.1%;background-color: #1c6a8b;border: 1px solid #cdd9c7; padding: 5px; border-radius: 10px;z-index: 20;}
.page1 .content .sharebox p {font-size: 14px; display: block;color: #fff;}

.videolayer {position: fixed;left: 0;top: 0; width: 100%;height: 100%;background: rgba(0,0,0,.8);z-index: 999;
  
 display: none;
}
.videocont {width: 80%;height: 120px; position: absolute;left: 10%;top:50%;margin-top: -50%; background: #000;}
.closebtn {position: absolute;right: 0;top: -20px;width: 20px;height: 20px;background: url(http://p0.ifengimg.com/l/2018/25/cf7f00177957afb/closebtn.png) no-repeat 0 0;background-size: 100%;cursor: pointer;}







.share {
    width: 100%;
    height: 100%;
    display: none;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    text-align: right;
    z-index: 1100;
}
.share img {
    width: 70%;
}



@media all and (orientation : landscape) { /*　　这是匹配横屏的状态，横屏时的css代码　　*/
    .page1 .content {width: 100%;height: 100%;overflow: hidden; font-size: 0; position: relative;}
    .page1 .content .mapbox {width: 100%; height: 100%; position: relative;}
    .page1 .mapimg {width: 100%; height: 100%;}
    .page1 .content .vodeolist {width: 140px;padding: 3px;}
    .page1 .content .vodeolist li {font-size: 12px;padding: 3px;padding-left: 20px;}
    .videocont {width: 60%;height: 120px;left: 20%;margin-top: -70px;}
    .share img {width: 40%;}
}
@media all and (orientation : portrait){ /*　　这是匹配竖屏的状态，竖屏时的css代码　　*/
    
}