html,body,.swiper{ width: 100%; height: 100%;  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);box-sizing: border-box;}
*{ outline: none;}
.lnbn_bg1{ width: 100%; height: 100%; background: url(../images/bn_1.jpg) no-repeat; background-size: cover; position: relative;}
.lnbn_bg2{ width: 100%; height: 100%; background: url(../images/bn_2.gif) no-repeat,url(../images/bn_2.jpg) no-repeat; background-size: cover; position: relative;}
.lnbn_bg5{ width: 100%; height: 100%; background: url(../images/bn_25.png) no-repeat,url(../images/bn_2.gif) no-repeat,url(../images/bn_2.jpg) no-repeat; background-size: cover; position: relative;}
.lnbn_p1_1{ position: absolute; left: 5vw; top: 5vw; width: 30vw;}
.lnbn_p1_2{ position: absolute; left: 8.5vw; top: 20vw; width: 83vw;}
.lnbn_p1_3{ position: absolute; left: 0; top: 100vw; width: 100vw;}
.lnbn_p1_4{ font-size: 0.875rem; position: absolute; left: 0; bottom: 10px; letter-spacing: 20px; line-height: 2; width: 100vw; text-align: center; color: #fff;}
.lnbn_p1_5{position: absolute;left: 0;top: 0;width: 100vw; height: 100vh; z-index: 99; background: url(../images/bn_1.gif) center center no-repeat; background-size: 27vw;} 

.lnbn_p1_6{ position: absolute; right: 0; top: 3vw; width: 25vw;}

.lnbn_p2_1{ position: absolute; left: 15vw; top: 20vw; width: 70vw;  animation: shake1 5s linear infinite;}
.lnbn_p2_2{ position: absolute; left: 22.5vw; top: 135vw; width: 55vw;/*animation: bounce1 3s linear infinite;*/}

@keyframes bounce1 {
    0%, 7%, 17.7%, 26.7%, 33.3% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    13.3%, 14.3% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }

    23.3% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }

    30% {
        -webkit-transform: translate3d(0,-2px,0);
        transform: translate3d(0,-2px,0);
    }
}

@keyframes shake1 {
    0%, 25% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    2.5%, 7.5%, 12.5%, 17.5%, 22.5% {
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg);
    }

    5%, 10%, 15%, 20% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
    }
}




.lnbn_p3_1{ position: absolute; left: 25.625vw; top: 7vw; width: 48.75vw; z-index: 9;}
.lnbn_p3_2{position: absolute;left: 7vw;top: 36.5vw;width: 86vw;display: flex;flex-wrap: wrap;justify-content: space-around; z-index: 9;}
.lnbn_p3_2 .cell{width: 30%; height: 34.375vw; margin-bottom: 4vw; background-image: linear-gradient(to top,#fffcf1,#ffecc2);}
.lnbn_p3_2 .cell img{ width: 100%; }
.lnbn_p3_3{ position: absolute; left: 20vw; top: 156vw; width: 59.5vw; z-index: 9;}
.lnbn_p3_4{ position: absolute; left: 0; top: 0; width: 100vw; height: 100vh; background-color: rgba(0,0,0,0.5); z-index: 10; display: none;}
.lnbn_p3_4.on_in{ display: block;}
.lnbn_p3_4 .bk{width: 25.8%; height: 34.375vw;background-image: linear-gradient(to top,#fffcf1,#ffecc2); position: absolute; }
.lnbn_p3_4 .bk.on_in{ display: block;}
.lnbn_p3_4 .bk img{ width: 100%;}
.lnbn_p3_4 .bk{
    transform: translate(0) scale(1);
    animation: on_in 2s .1s linear forwards paused;
}
.on_in .bk {
    animation-play-state: running
}
@keyframes on_in{
    30% {
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%) scale(2);
    }
	70% {
	    left: 50%;
	    top: 50%;
	    transform: translate(-50%,-50%) scale(2);
	}
	100%{
		left: 50%;
		top: -50%;
		transform: translate(-50%,-50%) scale(2);
	}
}

.lnbn_p4_1{ position: absolute; left: 14.95vw; top: 10vw; width: 71vw; z-index: 9;}
.lnbn_p4_2{position: absolute;left: 7vw;top: 30vw;width: 86vw;height: 65vh;z-index: 9;overflow: auto;}
.lnbn_p4_2 .img_box{ width: 56.25vw;  height: 8vw; margin-bottom: 2vw; text-align: center; border: 3px solid #f9b782; background-color: #fff; border-radius:8vw;}
.lnbn_p4_2 .img_box:nth-child(2){ margin-left: 23.75vw;}
.lnbn_p4_2 .img_box:nth-child(3){ margin-left: 7.75vw;}
.lnbn_p4_2 .img_box:nth-child(4){ margin-left: 23.75vw;}
.lnbn_p4_2 .img_box:nth-child(5){ margin-left: 0vw;}
.lnbn_p4_2 .img_box:nth-child(6){ margin-left: 7.75vw;}
.lnbn_p4_2 .img_box:nth-child(7){ margin-left: 23.75vw;}
.lnbn_p4_2 .img_box:nth-child(8){ margin-left: 4.75vw;}
.lnbn_p4_2 .img_box:nth-child(9){ margin-left: 23.75vw;}
.lnbn_p4_2 .img_box:nth-child(10){ margin-left: 7.75vw;}
.lnbn_p4_2 .img_box:nth-child(11){ margin-left: 23.75vw;}
.lnbn_p4_2 .img_box:nth-child(12){ margin-left: 3vw;}
.lnbn_p4_2 .img_box:nth-child(13){ margin-left: 17.75vw;}
.lnbn_p4_2 .img_box img{ width: 85%; vertical-align: middle;}
.lnbn_p4_2 .img_box.on{ background-color: #fdd485;}
.lnbn_p4_3{position: absolute; left: 0; bottom: 0; width: 100vw; height: 100vh; background: url(../images/bn_24.png) center bottom no-repeat; background-size: 100%; z-index: 9; pointer-events: none;}
.lnbn_p4_3 a{ display: block; width: 22vw; height: 22vw; position: absolute; bottom: 8.6vw; left: 39vw; }
.swiper-slide-active .lnbn_p4_3 a{pointer-events: all;}

.lnbn_p5_1{ width: 81.56vw; height: 151vw; position: absolute; top: 15vw; left: 9.22vw; background: url(../images/bn_27.png) no-repeat; background-size: 100%; text-align: center; z-index: 9;}
.lnbn_p5_1 input{ width: 56vw; padding: 0 3vw; border-radius: 1.5vw; border: 3px solid #ffecdc; height: 8vw; margin-bottom: 5vw; font-size: 1rem; color: #a26100;  }
.lnbn_p5_1 label{ color: #f00;}
.lnbn_p5_name{ margin-top: 46.875vw;}
.lnbn_p5_dec{}
.lnbn_p5_tj{ width: 54.84vw;}

.lnbn_p5_2{position: absolute;left: 0;top: calc(100vh - 45.47vw); width: 100vw; pointer-events: none; z-index: 8;}

.lnbn_p6_1{position: absolute; left: 0; top: 0; width: 100vw;}
.lnbn_p6_1 .img1{position: absolute; left: 0; top: 0; width: 100%; z-index: 8;}
.lnbn_p6_1 .img2{position: absolute;left: 9vw;top: 157vw;width: 65vw;z-index: 9;}
.lnbn_p6_1 .img4{position: absolute;right: 1vw;top: 130vw;width: 20vw;z-index: 9;}
.lnbn_p6_1 .img3{position: absolute;left: 10vw;top: 10vw;width: calc(80vw - 10px);border: 5px solid #ebc88c;box-shadow: 0 0 10px #00000073;}
.lnbn_p6_1 .lnbn_p6_text1{position: absolute;left: 6vw;top: 133vw;font-size: 1.8rem;color: #fff;z-index: 9;font-weight: bold;text-shadow: 1px 2px 4px #00000085;}
.lnbn_p6_1 .lnbn_p6_text2{position: absolute;left: 6vw;top: 143vw;font-size: 1rem;color: #fff;z-index: 9;text-shadow: 1px 2px 4px #00000085;}
.lnbn_p6_2{ position: absolute; left: 10vw; top: 163vw; width: 80vw; z-index: 9;}
.lnbn_p6_3{ position: absolute; left: 22.5vw; top: 170vw; width: 55vw; z-index: 9;}



.swiper-slide-active .fIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

.swiper-slide-active .fInY {
    -webkit-animation-name: flipInY;
    animation-name: flipInY;
}

.swiper-slide-active .fzInDown {
    -webkit-animation-name: zoomInDown;
    animation-name: zoomInDown;
}

.swiper-slide-active .shake2 {
    -webkit-animation-name: shake;
    animation-name: shake;
}


.swiper-slide-active .fzIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
}

.swiper-slide-active .fUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

.swiper-slide-active .fLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

.swiper-slide-active .fRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

.swiper-slide-active .fDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

.del_1{ animation-delay: 0.3s;}
.del_2{ animation-delay: 0.6s;}
.del_3{ animation-delay: 0.9s;}
.del_4{ animation-delay: 1.2s;}
.del_5{ animation-delay: 1.5s;}


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



.music.play {
    width: 27px;
    height: 27px;
    background: url(../images/music-play.png) no-repeat;
    background-size: 27px auto;
    position: fixed;
    right: 10px;
    top: 10px;
    z-index: 100;
}
.music.pause {
    width: 27px;
    height: 27px;
    display: block;
    background: url(../images/music-pause.png) no-repeat;
    background-size: 27px auto;
    position: fixed;
    right: 10px;
    top: 10px;
    z-index: 100;
}