@charset "utf-8";

html,
body {
    user-select: none;
    overflow-x: hidden;
}

img {
    display: block;
}

::-webkit-scrollbar {
    width: 5px;
    /*设定滚动条宽度*/
}

::-webkit-scrollbar-track {
    background-color: #f5f5f5;
    /*设定滚动条轨道颜色*/
}

::-webkit-scrollbar-thumb {
    background-color: #888;
    /*设定滚动条手柄颜色*/
}

::-webkit-scrollbar-thumb:hover {
    background-color: #555;
    /*设定滚动条手柄在悬停时的颜色*/
}

@keyframes bigSmall {
	0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
}
@keyframes opc {
	0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes swing {
	0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}

@keyframes flwSwing {
	0% {
        transform: rotate(-15deg);
    }
    100% {
        transform: rotate(15deg);
    }
}
@keyframes fog {
    	0% {
	box-shadow:0 0 0 0em rgba(255,255,255,0.4),0 0 0 1em rgba(255,255,255,0.4)
}
100% {
	box-shadow:0 0 0 1em rgba(255,255,255,0.4),0 0 0 2em rgba(255,255,255,0)
}

}

@keyframes rotation {
	0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes updown {
	0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(10%);
    }
}
@keyframes arr {
	0% {
		 opacity: 1;
        transform: translateX(0);
    }
    100% {
		 opacity: 0;
        transform: translateX(100%);
    }
}
@keyframes move01 {
	0% {
        transform: translateX(-10%);
    }
    100% {
        transform: translateX(10%);
    }
}

@keyframes butter{
    0%{
        background-position:0 0;
    }
    100%{ 
        background-position:100% 0;
    }
}
@keyframes remind{
    0%{
        transform: translate(0,0);
    }
    100%{ 
        transform: translate(50%,50%);
    }
}
.container {
    position: relative;
    width: 1390vh;
    height: 100vh;
}

.progress {
    position: fixed;
    left: 0;
    top: 0;
    width: 0;
    height: 3px;
    background-color: #ff0;
    opacity: 0.6;
}

.book {
  width: 100px;
  height: 150px;
  perspective: 1000px;
  position: relative;
  margin: 50px;
}
 
.page {
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: absolute;
  backface-visibility: hidden;
  transition: transform 1s;
  transform-origin: left;
}
 
.book:hover .page {
  transform: rotateY(-180deg);
} 


/*弹层视频播放*/
.video_pop{display: none;position:fixed;top: 0; left: 0; width:100vw;height:100vh;overflow: hidden;z-index:10000;background-color: rgba(0,0,0,0.8);}
.video_pop .playBox{position:absolute;top:15%;left: 50%; width:60vw;height:auto;margin-left: -30vw; z-index:999;}
.video_pop .btn{display: block;position:absolute;top:-2vh; right:-6vh;width:5vh;height:5vh; z-index: 100001;}
.video_pop .btn a.close{cursor:pointer;display:block;width:5vh;height:5vh;overflow: hidden; font-size:4vh;color: #f1f1f1;line-height:5vh;text-align: center;transition: 1s ease; }
.video_pop .btn a.close:hover{ transform: rotate(360deg);}
img.expand-cover-img{width:1000px !important; }

 


section {
    position: absolute;
    height: 100vh;
}

section>div {
    position: absolute;
}

section>.wrap {
    top: 0;
    height: 100vh;
    /* background-color: #88888863; */
}

section>.wrap>div {
    position: absolute;
}

section>.wrap>div img {
    width: 100%;
}

section>div>img {
    height: 100%;
}

section .bg {
    display: flex;
    width: 100%;
    height: 100%;
}

section .bg img {
    height: 100vh;
    margin-left: -1px;
}

.s1 {
    left: 0;
    top: 0;
    width: 198.6vh;
    z-index: -1;
}

.s2 {
    left: 198vh;
    width: 199vh;
}


.s3 {
    left: 397.0vh;
    width: 185.4vh;
}

.s4 {
    left: 582.4vh;
    width: 195.6vh;
}


.s5 {
    left: 778.1vh;
    width: 202vh;
}

.s6 {
    left: 980.2vh;
    width: 215.3vh;
}
.s7 {
    left: 1195.5vh;
    width: 194.4vh;
}
.s8 {
    left: 1340.6vh;
    width: 200vh;
}
.audio_ctr{ position:fixed;right:3%;top: 5%; z-index:1000;display: block; width: 3.1vw;height:3vw;background: url(../images/audio.png) no-repeat; background-size: contain;cursor: pointer;transition: all linear .25s;}
.audio_ctr.muted{background: url(../images/muted.png) no-repeat;background-size: contain; }

.volBtv{ position: absolute;width: 4vh; height: 4vh; cursor: pointer; }
.volBtv::before{ position: absolute;right: -1vh;  bottom: 0.5vh; content: " ";  width: 1vh; height: 3vh; background: url(../images/vol1.png) no-repeat; background-size: contain; animation: arr  1s ease infinite;}
.volBtv::after{  position: absolute;right: -2vh;  bottom: 0vh; content: " ";  width: 1vh; height: 4vh;  background: url(../images/vol2.png) no-repeat; background-size: contain; animation: arr  1s ease infinite 0.5s;}
.vBtn{ cursor: pointer;}

/* 片头 */

.s1 .name { width: 20vh;height: 15vh;   left: 33vh;   top: 20vh;}
.s1 .tit { width: 80vh;height: 78vh;  left: 33vh;  top:12vh; z-index: 111; }
.s1 .flw01 {  width: 30vh;height: 30vh;   left: 0;   top: 0; }
.s1 .flw02 {  width: 35vh;height: 40vh;   left: 0;   bottom: 0; }
.s1 .flw03 {  height: 77vh; left: 2vh;   top:2vh; }
.s1 .bird01 {  width: 15vh;  left: 120vh;   top: 19vh; }

/* p2 */
.s2 .bg { left: 0vh;  }
.s2 .w1 { left: 29vh;  width: 150vh;}
.s2 .videoBg2 { left: 0vh; top:10vh;  width: 154vh; z-index: -4;}
.s2 .letter01 { left: 116vh;  bottom: 25vh; width: 23vh;z-index: 10; }
.s2 .oBtn2 { display: none;left: 116vh;  bottom: 25vh;  width: 23vh;height: 15vh; z-index: 25; cursor: pointer;}
.s2 .tip2 { display: none;left: 124vh;  bottom: 28vh; width: 4vh;z-index: 20;animation: remind 1s ease infinite alternate;}
.s2 .tip02 {  left: 30vh;  bottom:50vh; width: 4vh;z-index: 20;animation: remind 1s ease infinite alternate;}
.s2 .letter02 { left: 113vh;  bottom: 24vh; width: 22vh;z-index: 9;opacity: 0;}
.s2 .coverpic2 { left: -12vh;  top:15vh; width: 143vh;z-index: -3;opacity: 0;}
.s2 .picbg { left: 0vh;  top:12vh; width: 146.1vh;z-index: -5;}
.s2 .door01 { left: 0vh; bottom: 0; width: 70vh;z-index: 5;}
.s2 .hill01 { left: 128vh; bottom: 22vh; width: 16.5vh;z-index: 11;}
.s2 .hill02 { left: 192.6vh; bottom: 13.5vh; width: 45vh;z-index: 10;pointer-events: none;}
.s2 .hill03 { left: 221.5vh; bottom: 45vh; width: 21vh;z-index: 7;}
.s2 .people01 { left: -80vh; bottom: 0; width: 25vh;z-index: 6;}
.s2 .people01:hover ~ .msg01{  bottom: 26vh; opacity: 1;transition: all linear .3s;}
.s2 .msg01 { left: -84vh; bottom: 20vh; width: 25vh; opacity: 0; z-index: 5;}
.s2 .people02 { left: 98vh; bottom: 13.2vh; width: 28vh;z-index: 12;}
.s2 .people02:hover ~ .msg02{  bottom: 23vh; opacity: 1;transition: all linear .3s;}
.s2 .msg02 { left: 94vh; bottom: 18vh; width: 23vh; opacity: 0; z-index: 10;}
.s2 .cloud01 { left: 78vh; top: 0; width: 68vh;z-index: 4;}
/*.s2 .cloud01:hover ~ .coverpic{ transform: translateX(-10%) translateY(-5%); transition: all linear .5s;}*/
.s2 .cloud02 { left: 150vh; top: 0; width: 115.3vh; z-index: 5;}
/*.s2 .cloud02:hover ~ .coverpic{ transform: translateX(20%) translateY(10%); transition: all linear 1s;}*/
.s2 .flower01 { left: -47vh; bottom: 0; width: 75vh; z-index: 4;}
.s2 .flower02 { left: -60vh; bottom: 0; width: 28vh; z-index: 7;}
.s2 .flower03 { left: 202vh; bottom: 0; width: 50vh; z-index: 3;}
.s2 .bird01 { left: -49vh;   top: 5vh; width: 90vh; z-index: 10; }
.s2 .key01 { left: 40vh;   top: 25vh; width: 13vh; z-index: 12; transform-origin: 0 0; animation: swing 2s linear infinite alternate;}
.s2 .bird02 { left: 212vh;   bottom: 0vh; width: 32vh; z-index: 15;pointer-events: none;}
.s2 .bird03 { left: 227vh;   bottom: 35vh; width: 27vh; z-index: 11;}
.s2 .flw{ left: 6vh;  bottom: 12vh;  width: 15vh; height: 15vh;}
/*.s2 .oBtn{ left: 66vh;   bottom: 12vh;  width: 6vh;  height: 6vh;  border-radius: 50%;  animation: fog 1.5s linear infinite; opacity: 1;}*/
 
/* p3 */
.s3 .w1 { left: 0vh;  width: 186vh;}
.s3 .people01 { left: -21vh; bottom: 14vh; width: 21vh;z-index: 4;}
.s3 .people02 { left: 4vh; bottom: 11vh; width: 16vh; z-index: 5;}
.s3 .people02:hover ~ .msg02{  bottom: 32vh; opacity: 1;transition: all linear .5s;}
.s3 .msg02 { left: 3vh; bottom: 15vh; width:20vh; opacity: 0; z-index: 3;}
.s3 .people03 { left: 15vh; bottom: 0vh; width: 29vh; z-index: 10;}
.s3 .people03:hover ~ .msg03{  bottom: 10vh; opacity: 1;transition: all linear .5s;}
.s3 .msg03 { left: 34.5vh; bottom: 0; width:15vh; opacity: 0; z-index: 3;}
.s3 .people04 { left: 129vh; bottom: 5vh; width: 56vh; z-index: 16;animation: updown 1.5s linear infinite alternate; }
.s3 .people04:hover ~ .msg04{  top: 5vh; opacity: 1;transition: all linear .3s;}
.s3 .msg04 { left: 132vh; top: 20vh; width:18vh; opacity: 0; z-index: 12;}
.s3 .speakers { left: 5vh; bottom: 0vh; width:18vh; z-index: 7; }
.s3 .oBtn3 { left: 3vh; bottom: 0vh; width:18vh; height: 26vh; z-index: 12; display: none; cursor: pointer;}
.s3 .tip3 { display: none;  left: 12vh;  bottom: 10vh; width: 4vh;z-index: 10;animation: remind 1s ease infinite alternate;}
.s3 .note { left: -8vh; bottom: 3vh; width:59vh; }
.s3 .star1 { left: 155vh; top: 5vh; width:8vh;  animation: bigSmall 2s linear infinite ; }
.s3 .star2 { left: 165vh; top: 15vh; width:4vh;  animation: bigSmall 2s linear infinite 1s; }
.s3 .tip {  left: 167vh;  top: 50vh; width: 4vh;z-index: 20;animation: remind 1s ease infinite alternate;}
.s3 .videoBg3 { left: 8vh; top:12vh;  width: 157vh; z-index: -2;}
.s3 .coverpic3 { left: 8vh;  top:6vh; width: 147vh;z-index: -1;opacity: 0;}
.s3 .picbg { left: 7vh;  top:11vh; width: 157vh;z-index: -5;}

/* p4 */
.s4 .w1 { left: 0; width: 200vh;}
.s4 .people01 { left: 0vh; bottom: 13.3vh; width: 25vh; z-index: 5;}
.s4 .people01:hover ~ .msg01{  bottom: 29vh; opacity: 1;transition: all linear .3s;}
.s4 .msg01 { left: 5vh; bottom: 20vh; width:20vh; opacity: 0; z-index: 3;}
.s4 .people02 { left: 18vh; bottom: 0vh; width: 41vh; z-index: 10;}
.s4 .people02:hover ~ .msg02{  bottom: 12vh; opacity: 1;transition: all linear .3s;}
.s4 .msg02 { left: 20vh; bottom: 5vh; width:20vh; opacity: 0; z-index: 8;}
.s4 .people03 { left: 138.3vh; bottom: 32.4vh; width: 40vh;  z-index: 10;}
.s4 .people03:hover ~ .msg03{ left: 170vh; bottom: 75vh; opacity: 1;transition: all linear .3s;}
.s4 .msg03 { left: 165vh; bottom: 65vh; width:20vh; opacity: 0; z-index: 8;}
.s4 .people04 { left: 133vh; bottom:0vh; width: 50vh;  z-index: 15;}
.s4 .people04-1 { left: 144.6vh; bottom:16vh; width: 6.6vh;  z-index: 25;}
.s4 .people04-2 { left: 139vh; bottom:18vh; width: 9vh;  z-index: 20; transform-origin: right bottom; animation: swing 2s linear infinite alternate;}
.s4 .imageCircle { left: 175vh; bottom: 16vh; width: 17vh; z-index: 13; }
.s4 .tip {  left: 160vh;  bottom: 23vh; width: 4vh;z-index: 20;animation: remind 1s ease infinite alternate;}
.s4 .videoBg4 { left: 19vh; top:19vh;  width: 129vh; z-index: -2;transform: rotate(4deg);}
.s4 .coverpic4 { left: 21vh;  top:18.5vh; width: 137vh;z-index: -1;opacity: 0;}
.s4 .picbg { left: 20vh;  top:19vh; width: 127vh;z-index: -5;}
.s4 .oBtn4 { left: 18vh; bottom: 0vh; width:41vh; height: 20vh; z-index: 12; display: none; cursor: pointer;}
.s4 .tip4 { display: none;  left: 58vh;  bottom: 5vh; width: 4vh;z-index: 11;animation: remind 1s ease infinite alternate;}
/* p5 */
.s5 .w1 { left: 0; width: 94.53704vh;}
.s5 .people01 {  left: 2vh;  bottom: 0;  width: 56vh;z-index: 20;}
.s5 .people01:hover ~ .msg01{  bottom: 17vh; opacity: 1;transition: all linear .5s;}
.s5 .msg01 { left: 12vh; bottom: 0; width:20vh; opacity: 0; z-index: 15;}
.s5 .hill { left: 36vh; bottom: 0; width:170vh; z-index: 10;}
.s5 .people02 {  left: 140vh;  bottom: 0vh;  width: 38vh;  z-index: 4;}
.s5 .people03 {  left: 153vh;  bottom: 0vh;  width: 42vh;  z-index: 6;}
.s5 .people03:hover ~ .msg03{ left: 172vh;  bottom: 70vh; opacity: 1;transition: all linear .5s;}
.s5 .msg03 { left: 155vh; bottom:50vh; width:16vh; opacity: 0; z-index: 3;}
.s5 .gear {  left: 131vh;  bottom: -13vh;  width: 40vh;z-index: 8; animation: rotation 15s linear infinite;}
.s5 .tip {  left: 188vh;  bottom: 44vh; width: 4vh;z-index: 20;animation: remind 1s ease infinite alternate;}
.s5 .videoBg5 { left: 9vh; top:12vh;  width: 155vh; z-index: -2;}
.s5 .coverpic5 { left: 13vh;  top:15.5vh; width: 145vh;z-index: -1;opacity: 0;}
.s5 .picbg { left: 33vh;  top:15.5vh; width: 143vh;z-index: -5;}
.s5 .oBtn5 { left: 2vh; bottom: 0vh; width:56vh; height: 27vh; z-index: 25; display: none; cursor: pointer;}
.s5 .tip5 { display: none;  left: 58vh;  bottom: 5vh; width: 4vh;z-index: 22;animation: remind 1s ease infinite alternate;}
/* p6 */
.s6 .w1 { left: 0; width: 150vh;}
.s6 .people01 {  left: 38vh;  bottom:4vh;  width: 36vh;z-index: 10;}
.s6 .people01:hover ~ .msg01{  bottom: 23vh; opacity: 1;transition: all linear .5s;}
.s6 .msg01 { left: 29vh; bottom: 15vh; width:18vh; opacity: 0; z-index: 5;}
.s6 .people02 {  left: 148vh;  bottom:0vh;  width: 41vh;  z-index: 20;}
.s6 .people02:hover ~ .msg02{  bottom: 65vh; opacity: 1;transition: all linear .5s;}
.s6 .msg02 { left: 170vh; bottom: 40vh; width:25vh; opacity: 0; z-index: 5;}
.s6 .flw1 {  left: 144vh;  bottom:-1vh;  width: 17vh;z-index: 10; transform-origin: center bottom; animation: flwSwing 2s linear infinite alternate; }
.s6 .flw2 {  left: 177vh;  bottom:-1vh;  width: 25vh;z-index: 12; transform-origin: center bottom; animation: flwSwing 2s linear infinite alternate ;}
.s6 .flw3 {  left: 196vh;  bottom:-1vh;  width: 15vh;z-index: 15; transform-origin: center bottom; animation: flwSwing 2s linear infinite alternate ;}
.s6 .tip {  left: 183vh;  bottom: 27vh; width: 4vh;z-index: 25;animation: remind 1s ease infinite alternate;}
.s6 .videoBg6 { left: 25vh; top:15vh;  width: 140vh; z-index: -2;}
.s6 .coverpic6 { left: 25vh;  top:13vh; width: 140vh;z-index: -1;opacity: 0;}
.s6 .picbg { left: 25vh;  top:14vh; width: 138vh;z-index: -5;}
.s6 .oBtn6 { left: 38vh; bottom: 4vh; width:36vh; height: 30vh; z-index: 15; display: none; cursor: pointer;}
.s6 .tip6 { display: none;  left: 69vh;  bottom: 6vh; width: 4vh;z-index: 22;animation: remind 1s ease infinite alternate;}

/* p7 */
.s7 .w1 { left: 0;  width: 194.4vh;overflow: hidden;}
.s7 .photoWall {  left: 8vh;   top: 0;  width: 160vh;}
.s7 .heart {  left: 49.5vh;   top: 13.7vh;  width: 77vh; z-index: 10;transition: all ease 2s; transform: scale(1)}
.s7 .t75 {  left: 46.9vh;   top: 13.9vh;  width: 88.8vh; z-index: 15; transform: scale(1); opacity: 0; transition: all ease 2s;}
.s7 .love {  left: 62vh;   bottom: 10vh;  width: 52vh; z-index: 20; cursor: pointer;}
.s7 .tip {  left: 82vh;  bottom: 14vh; width: 4vh;z-index: 25;animation: remind 1s ease infinite alternate;}
.s7 .more {  left: 120vh;   bottom: 14vh;  width: 14vh; text-align: center; z-index: 25;  }
.s7 .more a{display: block; width: 14vh;  height: 5vh;  font-size: 2.5vh;   color: #ffe0bb;  line-height: 5vh;  border-radius: 3vh;  background: #ed1c24; }