@charset "utf-8";.border-box{box-sizing:border-box;-webkit-box-sizing:border-box}.img_scale{overflow:hidden}.img_scale img{transition:transform 1s;-ms-transition:transform 1s;-o-transition:transform 1s;-webkit-transition:transform 1s;-moz-transition:transform 1s}.img_scale:hover img{transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);-webkit-transform:scale(1.1);-moz-transform:scale(1.1)}@keyframes go{0%{-webkit-transform:rotate(15deg);-webkit-transform-origin:0 0;-moz-transform:rotate(15deg);-moz-transform-origin:0 0;transform:rotate(15deg);transform-origin:0 0}100%{-webkit-transform:rotate(-15deg);-webkit-transform-origin:0 0;-moz-transform:rotate(-15deg);-moz-transform-origin:0 0;transform:rotate(-15deg);transform-origin:0 0}}@keyframes go2{0%{-webkit-transform:rotate(2deg);-webkit-transform-origin:0 0;-moz-transform:rotate(2deg);-moz-transform-origin:0 0;transform:rotate(2deg);transform-origin:0 0}100%{-webkit-transform:rotate(-2deg);-webkit-transform-origin:0 0;-moz-transform:rotate(-2deg);-moz-transform-origin:0 0;transform:rotate(-2deg);transform-origin:0 0}}@keyframes go3{0%{-webkit-transform:rotate(1deg);-webkit-transform-origin:0 0;-moz-transform:rotate(1deg);-moz-transform-origin:0 0;transform:rotate(1deg);transform-origin:0 0}100%{-webkit-transform:rotate(-1deg);-webkit-transform-origin:0 0;-moz-transform:rotate(-1deg);-moz-transform-origin:0 0;transform:rotate(-1deg);transform-origin:0 0}}@keyframes sunrise{0%{background:url(../images/background1.jpg) no-repeat bottom right}100%{background:url(../images/background2.jpg) no-repeat bottom right}}@keyframes drums{0%{background:url(../images/drums1.png) no-repeat}100%{background:url(../images/drums2.png) no-repeat}}@-webkit-keyframes birdFly{0%{background:url(../images/bird1.png);background-size:100% 100%}25%{background:url(../images/bird2.png);background-size:100% 100%}50%{background:url(../images/bird3.png);background-size:100% 100%}75%{background:url(../images/bird4.png);background-size:100% 100%}100%{background:url(../images/bird1.png);background-size:100% 100%}}@-moz-keyframes birdFly{0%{background:url(../images/bird1.png);background-size:100% 100%}25%{background:url(../images/bird2.png);background-size:100% 100%}50%{background:url(../images/bird3.png);background-size:100% 100%}75%{background:url(../images/bird4.png);background-size:100% 100%}100%{background:url(../images/bird1.png);background-size:100% 100%}}@-o-keyframes birdFly{0%{background:url(../images/bird1.png);background-size:100% 100%}25%{background:url(../images/bird2.png);background-size:100% 100%}50%{background:url(../images/bird3.png);background-size:100% 100%}75%{background:url(../images/bird4.png);background-size:100% 100%}100%{background:url(../images/bird1.png);background-size:100% 100%}}@keyframes birdFly{0%{background:url(../images/bird1.png);background-size:100% 100%}25%{background:url(../images/bird2.png);background-size:100% 100%}50%{background:url(../images/bird3.png);background-size:100% 100%}75%{background:url(../images/bird4.png);background-size:100% 100%}100%{background:url(../images/bird1.png);background-size:100% 100%}}@keyframes boatMove{0%{opacity:1;left:15%;bottom:15px}100%{opacity:0;transform:scale(.3);-ms-transform:scale(.3);-o-transform:scale(.3);-webkit-transform:scale(.3);-moz-transform:scale(.3);left:40%;bottom:15%}}@keyframes titMove{0%{-webkit-clip-path:circle(0 at -50% 0);clip-path:circle(0 at -50% 0)}100%{-webkit-clip-path:circle(200% at -50% 0);clip-path:circle(200% at -50% 0)}}@keyframes flowerMove{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes flowerMove{0%{opacity:0}100%{opacity:1}}@keyframes titMove2{0%{-webkit-clip-path:inset(0 0 100% 0);clip-path:inset(0 0 100% 0)}100%{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@keyframes rightMove{0%{opacity:0;-webkit-transform:translate3d(5%,0,0);transform:translate3d(5%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@-webkit-keyframes fade{0%{opacity:1}95%{opacity:1}100%{opacity:0}}@-webkit-keyframes drop{0%{-webkit-transform:translate(30px,-50px)}100%{-webkit-transform:translate(-200px,650px)}}@-webkit-keyframes clockwiseSpin{0%{-webkit-transform:rotate(-50deg)}100%{-webkit-transform:rotate(50deg)}}@-webkit-keyframes counterclockwiseSpinAndFlip{0%{-webkit-transform:scale(-1,1) rotate(50deg)}100%{-webkit-transform:scale(-1,1) rotate(-50deg)}}@-moz-keyframes fade{0%{opacity:1}95%{opacity:1}100%{opacity:0}}@-moz-keyframes drop{0%{-moz-transform:translate(30px,-50px)}100%{-moz-transform:translate(-200px,650px)}}@-moz-keyframes clockwiseSpin{0%{-moz-transform:rotate(-50deg)}100%{-moz-transform:rotate(50deg)}}@-moz-keyframes counterclockwiseSpinAndFlip{0%{-moz-transform:scale(-1,1) rotate(50deg)}100%{-moz-transform:scale(-1,1) rotate(-50deg)}}@-o-keyframes fade{0%{opacity:1}95%{opacity:1}100%{opacity:0}}@-o-keyframes drop{0%{-o-transform:translate(30px,-50px)}100%{-o-transform:translate(-200px,650px)}}@-o-keyframes clockwiseSpin{0%{-o-transform:rotate(-50deg)}100%{-o-transform:rotate(50deg)}}@-o-keyframes counterclockwiseSpinAndFlip{0%{-o-transform:scale(-1,1) rotate(50deg)}100%{-o-transform:scale(-1,1) rotate(-50deg)}}@keyframes fade{0%{opacity:1}95%{opacity:1}100%{opacity:0}}@keyframes drop{0%{transform:translate(30px,-50px)}100%{transform:translate(-200px,650px)}}@keyframes clockwiseSpin{0%{transform:rotate(-50deg)}100%{transform:rotate(50deg)}}@keyframes counterclockwiseSpinAndFlip{0%{transform:scale(-1,1) rotate(50deg)}100%{transform:scale(-1,1) rotate(-50deg)}}@keyframes lineMove{0%{-webkit-clip-path:inset(0 0 0 100%);clip-path:inset(0 0 0 100%)}100%{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}}@-webkit-keyframes fadeInRight20{0%{opacity:0;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@-moz-keyframes fadeInRight20{0%{opacity:0;-webkit-transform:translate3d(20px,0,0);-moz-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:1;-webkit-transform:none;-moz-transform:none;transform:none}}@-o-keyframes fadeInRight20{0%{opacity:0;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:1;-webkit-transform:none;-o-transform:none;transform:none}}@keyframes fadeInRight20{0%{opacity:0;-webkit-transform:translate3d(20px,0,0);-moz-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:1;-webkit-transform:none;-moz-transform:none;-o-transform:none;transform:none}}@-webkit-keyframes fadeInLeft20{0%{opacity:0;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@-moz-keyframes fadeInLeft20{0%{opacity:0;-webkit-transform:translate3d(-20px,0,0);-moz-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}100%{opacity:1;-webkit-transform:none;-moz-transform:none;transform:none}}@-o-keyframes fadeInLeft20{0%{opacity:0;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}100%{opacity:1;-webkit-transform:none;-o-transform:none;transform:none}}@keyframes fadeInLeft20{0%{opacity:0;-webkit-transform:translate3d(-20px,0,0);-moz-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}100%{opacity:1;-webkit-transform:none;-moz-transform:none;-o-transform:none;transform:none}}@-webkit-keyframes fadeInUp20{0%{opacity:0;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@-moz-keyframes fadeInUp20{0%{opacity:0;-webkit-transform:translate3d(0,20px,0);-moz-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}100%{opacity:1;-webkit-transform:none;-moz-transform:none;transform:none}}@-o-keyframes fadeInUp20{0%{opacity:0;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}100%{opacity:1;-webkit-transform:none;-o-transform:none;transform:none}}@keyframes fadeInUp20{0%{opacity:0;-webkit-transform:translate3d(0,20px,0);-moz-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}100%{opacity:1;-webkit-transform:none;-moz-transform:none;-o-transform:none;transform:none}}@keyframes musicRotate{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes musicRotate{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes rotateY{0%{opacity:0;transform:rotateY(-90deg);-ms-transform:rotateY(-90deg);-o-transform:rotateY(-90deg);-webkit-transform:rotateY(-90deg);-moz-transform:rotateY(-90deg)}100%{opacity:1;transform:rotateY(0);-ms-transform:rotateY(0);-o-transform:rotateY(0);-webkit-transform:rotateY(0);-moz-transform:rotateY(0)}}@keyframes rotateY2{0%{opacity:0;transform:rotateY(65deg) translateY(60px);-ms-transform:rotateY(65deg) translateY(60px);-o-transform:rotateY(65deg) translateY(60px);-webkit-transform:rotateY(65deg) translateY(60px);-moz-transform:rotateY(65deg) translateY(60px)}100%{opacity:1;transform:rotateY(0) translateY(0);-ms-transform:rotateY(0) translateY(0);-o-transform:rotateY(0) translateY(0);-webkit-transform:rotateY(0) translateY(0);-moz-transform:rotateY(0) translateY(0)}}@keyframes rotateY3{0%{opacity:0;transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg)}100%{opacity:1;transform:rotateY(0);-ms-transform:rotateY(0);-o-transform:rotateY(0);-webkit-transform:rotateY(0);-moz-transform:rotateY(0)}}body{width:100%;position:relative;min-height:100vh;max-height:1080px;background:url(../images/comic/bg.jpg) no-repeat left bottom;background-size:cover}.back{position:absolute;width:136px;bottom:40px;right:21.25%}.decorate1{position:absolute;width:57.3958%;bottom:0;left:0}.decorate2{position:absolute;width:18.59375%;right:0;bottom:0}.decorate3{position:absolute;width:20%;right:0;top:45px}.tit{position:absolute;width:15.78125%;top:6.5%;left:5%}.swiper-container{width:871px;margin:0 auto;position:relative}.swiper-slide>ul>li{width:130px;height:816px;float:right;padding-top:175px;padding-left:35px;padding-right:35px;box-sizing:border-box;-webkit-box-sizing:border-box;border-left:1px solid #dcd2b8;background:url(../images/comic/li-icon.png) no-repeat left top;position:relative;cursor:pointer;transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);-webkit-transform:translateZ(0);-moz-transform:translateZ(0);transition:all .7s ease;-ms-transition:all .7s ease;-o-transition:all .7s ease;-webkit-transition:all .7s ease;-moz-transition:all .7s ease;overflow:hidden}.swiper-slide .comic-tit{font-size:36px;color:#1a1a18;font-family:"宋体";line-height:1;width:36px;margin-bottom:10px}.swiper-slide .comic-tit:after{content:"";width:19px;height:25px;background:url(../images/comic/comic-icon.png) no-repeat;margin-left:40px;display:block;margin-top:-10px}.swiper-slide .comic-shrink{opacity:1;transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease;-webkit-transition:all .3s ease;-moz-transition:all .3s ease}.swiper-slide .comic-txt{margin-right:10px}.swiper-slide .comic-txt p{color:#777;font-size:16px;width:16px;float:right;margin-right:5px}.swiper-slide .comic-txt span{display:block;transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg)}.swiper-slide>ul>li.show{background:0 0;width:611px;transition:all .7s ease;-ms-transition:all .7s ease;-o-transition:all .7s ease;-webkit-transition:all .7s ease;-moz-transition:all .7s ease}.swiper-slide>ul>li.show .comic-shrink{opacity:0}.swiper-slide>ul>li.show .comic-open{width:611px;opacity:1;transition:all 1s cubic-bezier(.42,0,.44,1.36) 0s;-ms-transition:all 1s cubic-bezier(.42,0,.44,1.36) 0s;-o-transition:all 1s cubic-bezier(.42,0,.44,1.36) 0s;-webkit-transition:all 1s cubic-bezier(.42,0,.44,1.36) 0s;-moz-transition:all 1s cubic-bezier(.42,0,.44,1.36) 0s}.comic-open{position:absolute;width:0;right:0;top:175px;opacity:0;transition:all .5s cubic-bezier(.42,0,.44,1.36) 0s;-ms-transition:all .5s cubic-bezier(.42,0,.44,1.36) 0s;-o-transition:all .5s cubic-bezier(.42,0,.44,1.36) 0s;-webkit-transition:all .5s cubic-bezier(.42,0,.44,1.36) 0s;-moz-transition:all .5s cubic-bezier(.42,0,.44,1.36) 0s}.comic-open .comic-warp{width:611px;position:relative}.comic-open .comic-tit{display:inline-block}.comic-open .comic-txt2{color:#777;font-size:16px;display:inline-block;margin-left:45px}.comic-open .open-top{padding-left:40px;background:url(../images/comic/open-icon.png) no-repeat right bottom;border-bottom:1px solid #e3d8be}.comic-list{margin-top:45px}.comic-list ul li{float:left;width:33.3333%;margin-bottom:30px;padding-left:20px;box-sizing:border-box;-webkit-box-sizing:border-box}.comic-list ul li a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;font-size:18px}.swiper-warp{position:relative;width:1039px;margin:0 auto}.swiper-button-next,.swiper-button-prev{width:35px;height:56px;margin-top:-28px}.swiper-button-prev{left:0;background:url(../images/comic/prev.jpg) no-repeat}.swiper-button-next{right:0;background:url(../images/comic/next.jpg) no-repeat}@media (max-width:1440px){.swiper-slide>ul>li{width:110px;padding-left:25px;padding-right:25px;padding-top:120px;height:600px;background-size:95px auto}.comic-open .comic-warp,.swiper-slide>ul>li.show,.swiper-slide>ul>li.show .comic-open{width:550px}.swiper-container{width:770px}.swiper-warp{width:900px}.comic-open .open-top{padding-left:30px}.swiper-slide .comic-txt{margin-right:15px}.comic-open{top:120px}.swiper-button-next,.swiper-button-prev{top:60%}.comic-list ul li a{font-size:16px}}@media (max-width:1280px){.tit{top:2.5%;left:2.5%}.swiper-slide>ul>li{width:100px;padding-left:20px;padding-right:20px;padding-top:100px;height:550px;background-size:80px auto}.comic-open .comic-warp,.swiper-slide>ul>li.show,.swiper-slide>ul>li.show .comic-open{width:500px}.swiper-container{width:700px}.swiper-warp{width:800px}.comic-open{top:100px}.comic-open .open-top{padding-left:20px}.comic-open .comic-txt2{margin-left:35px}.swiper-slide .comic-tit{font-size:32px}.comic-list ul li a{font-size:15px}.comic-list ul li{margin-bottom:25px;padding-left:15px}.comic-list{margin-top:35px}.comic-open .comic-txt2{font-size:14px}}