* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html{font-size:4.8vw;}
#audioPlayer{
	display:none;
}

.page {
  position: fixed;
  top: 0;
  left: 0;
  right:0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(100%);
  transition: transform 0.4s ease-in-out;
  z-index: 1;
  background: #fff;
  max-width:750px;
  margin:auto;
}

.page.active {
  transform: translateY(0);
  z-index: 10;
}

.page.prev {
  transform: translateY(-100%);
  z-index: 5;
}

/* Page 1 */
#page1 {
  background: url('../img/poster.jpg') center top no-repeat;
  background-size:cover;
  position: relative;
  overflow:hidden;
}

.audio-btn {
  position: fixed;
  top: 0rem;
  right: 0rem;
  width: 4rem;
  height: 4rem;
  cursor: pointer;
  z-index: 100;
  background: url('../img/audio.png') center center / contain no-repeat;
  transition: opacity 0.3s;
}
.backBtn{
	position: fixed;
  top: .8rem;
  left: 1.5rem;
  width: 3.4rem;
  height: 3.4rem;
  cursor: pointer;
  z-index: 100;
  background: url('../img/back.png') center center / contain no-repeat;
  transition: opacity 0.3s;
  display:none;
}

.audio-btn:hover {
  opacity: 0.8;
}

.audio-btn.playing {
  animation: rotate 2s linear infinite;
}

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

.next-btn {
  position: absolute;
  bottom: 3rem;
  left: 0;
  right: 0;
  margin:auto;
  width: 2.5rem;
  height: 2.5rem;
  cursor: pointer;
  z-index: 100;
  background: url('../img/next.png') center center / contain no-repeat;
  animation: float-bounce 2.8s ease-in-out infinite;
}

.next-btn:hover {
  transform: translateX(-50%) scale(1.1);
  opacity: 0.8;
}

.next-btn:active {
  transform: translateX(-50%) scale(0.95);
}
video{display:block;width:100%;background:#ccc;border-radius:.8rem;margin-bottom:.4rem}
/* Page 2 */
#page2,#page3,#page4,#page5,#page6 {
  background: url('../img/bg.jpg') center top;
  background-size:100% 100%;
  padding: 1.5rem 1rem 0;
  overflow:hidden;
}
#page2{
	padding:4vh;
}

.section {
  padding: 15vh 7vw 15vh;
  position:relative;
  margin-bottom:3vh;
  background:url(../img/bg5.png) no-repeat;
  background-size:100% 100%;
}
/* .section:nth-of-type(1){
  background:url(../img/bg1.png) no-repeat;
  background-size:100% 100%;
}
.section:nth-of-type(2){
  background:url(../img/bg2.png) no-repeat;
  background-size:100% 100%;
  padding:5vh 5vw 0 10vw;
}
.section:nth-of-type(3){
  background:url(../img/bg3.png) no-repeat;
  background-size:100% 100%;
  padding:10vh 8vw 0;
} */

.section-item {
    padding-top:.2rem;
    margin:0 0 1.5vh;
}
.ip{
	position:absolute;
	right:-8vw;
	bottom:-10vh;
	width:45%;
}


.item-image {
	width:96%;
    height:auto;
}
/* .section-item:nth-of-type(1){
	left:46%;
	top:18%;
}
.section-item:nth-of-type(1):before,.section-item:nth-of-type(2):before{
    content:'';
    position:absolute;
    right:.4rem;
    top:0;
    width:.5rem;
    height:.5rem;
    background:url(../img/point2.png);
    background-size:100% 100%;
}
.section-item:nth-of-type(2){
	left:7%;
	top:38%;
}
.section-item:nth-of-type(3){
	right:6%;
	top:43%;
}
.section-item:nth-of-type(4){
	height:2.8rem;
	left:10%;
	top:66%;
} */


.item-title {
  font-size: .8rem;
  font-weight: 500;
  margin-bottom: 4px;
  float:left;
  color:#6299A3;
  min-width:50%;
  line-height:6vh;
  padding-left:.8rem;
  position:relative;

}
.item-title:before{
	content:'';
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	margin:auto;
	width:.3rem;
	height:.3rem;
	border-radius:50%;
	background:#FFAC57;
}
.item-title span{
	border-bottom:1px solid #6299A3;
}
.item-title:nth-of-type(1){
	width:58%;
	float:right;
}
.item-title2{
	background:url(../img/titBg.png) no-repeat;
	background-size:100% 100%;
	text-align:center;
	margin-bottom:1vh;
	line-height:5vh;
	height:6vh;
	color:#72A6AF;
	font-size:.9rem;
}


/* Page 3  */
#page3,#page6{
	overflow-y:auto;
	padding-bottom:6vh;
}
#page3>div,.list-container,#page6>div {
  background: linear-gradient(to bottom, rgba(201,225,222,.6) 0%, #fff 30%, #fff 100%);
  background-size:100% 100%;
  padding:1.4rem .5rem 1rem;
  min-height:88vh;
  border-radius:.8rem;
  display:flex;
  flex-direction:column;
}
#page3>div>div,#page6>div>div{
	text-align:center;
	margin-bottom:2vh;
}
.page-header {
  background: url('../img/titBg2.png') center no-repeat;
  background-size:100% 100%;
  padding:.9vh 1.8rem;
  text-align:center;
  margin-bottom:.5rem;
  font-size:1.1rem;
  font-weight: bold;
  color: #161616;
  display:inline-block;
}

.page-title {
  font-size:1rem;
  font-weight: bold;
  color: #161616;
}

#page3 div.detail-content,#page6 .detail-content {
  border:1px solid #bfd5d9;
  background: linear-gradient(to bottom,#fff 0%, #eaeeef 100%);
  border-radius: 1rem;
  padding: 1rem;
  margin-bottom: 0;
  flex:1;
}
.list-box{
  border:1px solid #bfd5d9;
  background: linear-gradient(to bottom,#fff 0%,#fff 40%, #e6f1f1 100%);
  border-radius: 1rem;
  overflow:hidden;
  padding-bottom:1rem;
}
.detail-item {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid #abd5d1;
}

.detail-item:last-child {
  border-bottom: none;
}

.detail-label {
  width: 100px;
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.detail-value {
  flex: 1;
  font-size: 14px;
  color: #333;
}

.detail-description {
  font-size: .9rem;
  line-height: 1.8;
  color: #72A6AF;
  margin-top: 1rem;
  text-align:left;
}



/* Page 4 & 5  */
#page4,#page5{
	overflow-y:auto;
	padding-bottom:1rem;
}
.list-container {
  height:auto;
  padding-top:.5rem
}

.list-item {
  padding: 1rem .6rem 0;
}

.list-item:first-child {
  border-radius:8px 8px 0 0;
}
.list-item:last-child {
  border-radius:0 0 8px 8px;
}

.list-image {
  width: 6rem;
  height: 4.5rem;
  border-radius: 8px;
  object-fit: cover;
  margin-left: .6rem;
  background: #dee2e6;
}

.list-content {
  line-height:1.6;
  color:#161616;
  flex:1;
}

.list-title {
  font-size:.9rem;
  font-weight: 500;
  color: #292929;
}

.list-time {
  font-size:.7rem;
  color: #999;
}

.list-source {
  font-size:.7rem;
  color: #999;
}
#page5 .list-item{
	display:flex;
}
.page::-webkit-scrollbar {
  width: 6px;
}

.page::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}

.page::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
}

.page::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.5);
}

#page6>div{
	height:auto;
}
#page6 .contents{
	width:100%;
	height:auto;
	display:block;
	margin:0 auto 2vh;
}
#page6 .detail-content{
	padding:1rem .2rem 8vh;
	position:relative;
}
#page6 p{
    list-style:none;
    color:#666;
    line-height:1.6;
    padding:1.6vh 0;
    font-size:.9rem;
    text-align:left;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
}
#page6 p span{
	color:#106C7C;
	border-bottom:1px solid #106C7C;
}
.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 16px;
  color: #999;
}

* {
  -webkit-tap-highlight-color: transparent;
}

@keyframes float-bounce {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}
@media screen and (min-width: 500px) {
	
	
}
@media screen and (min-width: 810px) {
	html{font-size:20px;}

}