body,
html {
    height: 100%;
    background: #d6d6d6;
    overflow: hidden;
}

body {
    padding-top: constant(safe-area-inset-top);
    /* iOS 11.0 */
    padding-top: env(safe-area-inset-top);
    /* iOS 11.2 */
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: constant(safe-area-inset-left);
    padding-left: env(safe-area-inset-left);
    padding-right: constant(safe-area-inset-right);
    padding-right: env(safe-area-inset-right);
}

@supports ((height: constant(safe-area-inset-top)) or (height: env(safe-area-inset-top))) and (-webkit-overflow-scrolling: touch) {
    .wrapper {
        /* 适配齐刘海 */
        padding-top: 20px;
        padding-top: constant(safe-area-inset-top);
        padding-top: env(safe-area-inset-top);

        /* 适配底部小黑条 */
        padding-bottom: 0;
        padding-bottom: costant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

.df {
    display: flex;
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-justify-content: center;
    align-items: center;
    justify-content: center;
}


i {
    font-style: initial;
}

.text-gradient {
    background-image: -webkit-linear-gradient(#fff4c2, #ffb054);
    background-image: linear-gradient(#fff4c2, #ffb054);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}

.wrapper {
    margin: 0 auto;
    height: 100%;
    font-family: "STKaiti", "KaiTi", serif;
    font-size: .36rem;
    color: #F2DEAB;
}

.swiper-container {
    position: relative;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.content-slide {
    height: 100%;
    opacity: 0;
    -webkit-transition: 0.8s cubic-bezier(0.76, 0, 0.24, 1);
    transition: 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}

.swiper-slide-active {
    z-index: 2;
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
}

.front-main {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.slide-section {
    position: relative;
    overflow: hidden;
    width: 100vw;
    height: 100%;
}

.p-slide-section__bg {
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
    /*background-attachment: fixed;*/
    z-index: -1;
    pointer-events: none;
    width: inherit;
    height: inherit;
    background-position: center center;
    /*background-position:center;*/
    -webkit-transition: 15s -webkit-transform;
    transition: 15s -webkit-transform;
    transition: 15s transform;
}

.swiper-slide-active .p-snap-section.active .p-slide-section__bg {
    -webkit-transition: 15s -webkit-transform;
    transition: 15s -webkit-transform;
    transition: 15s transform;
    transition: 15s transform, 15s -webkit-transform;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.content-slide-01 .p-slide-section__bg {
    background-image: url("//png.pookcdn.net/new_net/bydrqp/anniversary/bg.jpg");
}

.bg-answer .p-slide-section__bg {
    background-image: url("//png.pookcdn.net/new_net/bydrqp/anniversary/bg_02.jpg");
}

.bg-info .p-slide-section__bg {
    background-image: url("//png.pookcdn.net/new_net/bydrqp/anniversary/bg_03.jpg");
}

.content-slide-15 .p-slide-section__bg {
    background-image: url("//png.pookcdn.net/new_net/bydrqp/anniversary/bg_04.jpg");
}

@keyframes rotate {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

#videoWrapper {
    position: relative;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

#videoWrapper canvas {
    object-fit: cover;
}

.kAA8SjbHe2 {
    display: none !important;
}

.bg_video {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}

.bg_video video {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.p-slide-section__body {
    position: relative;
    margin: 0 auto;
    width: 7.5rem;
    text-align: center;
    z-index: 1;
    height: inherit;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    z-index: 3;
    -webkit-justify-content: center;
    justify-content: center;
}

.p-slide-section__body--center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.hide-Div {
    display: none;
}

.loading {
    position: relative;
    margin: 0 auto;
    width: 7.5rem;
    height: 100%;
    background: url("//png.pookcdn.net/new_net/bydrqp/anniversary/bg_loading.jpg") no-repeat top center;
    background-size: cover;
    z-index: 9999;
}

.loading-content {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.loading .pic {
    top: 43%;
    left: 50%;
	margin: -.78rem 0 0 -.94rem;
    width: 1.85rem;
    height: 1.55rem;
    background-image: url("//png.pookcdn.net/new_net/bydrqp/anniversary/ico_loading.png");
	-webkit-animation: loadingRotate 2s infinite linear;
	animation: loadingRotate 2s infinite linear;
}
@-webkit-keyframes loadingRotate {
    0% {
       transform: rotate(0deg);
    }
    100% {
		transform: rotate(720deg);
    }
}
@keyframes loadingRotate {
    0% {
       transform: rotate(0deg);
    }
    100% {
		transform: rotate(720deg);
    }
}

.loading .pic-text {
    top: 50%;
    left: 50%;
    width: 100%;
    font-size: .48rem;
    text-align: center;
    -webkit-text-shadow: 0 0 .08rem rgba(233, 169, 95, 0.3);
    text-shadow: 0 0 .08rem rgba(233, 169, 95, 0.3);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.loading .bot-text {
    bottom: 10%;
    left: 0;
    width: 100%;
    font-size: .36rem;
    color: #fff3bd;
    text-align: center;
    -webkit-text-shadow: 0 0 .2rem rgba(233, 169, 95, 0.6);
    text-shadow: 0 0 .2rem rgba(233, 169, 95, 0.6);
}

.progress {
    margin: 1.1rem auto 0;
    width: 6.21rem;
    height: .1rem;
    background: rgba(72, 68, 68, 0.3);
    border: .05rem rgba(255, 255, 255, 0.7) solid;
    -webkit-border-radius: .2rem;
    border-radius: .2rem;
}

.progress-bar {
    position: relative;
    top: -.29rem;
    left: .02rem;
    background: #24a3ba;
    display: inline-block;
    height: .08rem;
    -webkit-border-radius: .2rem;
    border-radius: .2rem;
}

.progress-num {
    color: #24a3ba;
    font-family: 'Mermaid';
    font-size: .75rem;
    font-weight: 600;
    text-align: center;
}

.img-gold {
    margin: 0 .05rem;
    width: .5rem;
}

.topNeg {
    margin-top: -.2rem
}

.topSpace {
    margin-top: .2rem;
}

.topNegBig {
    margin-top: -.6rem
}


.content-slide-01 .pic {
    top: 50%;
    left: 50%;
    margin: 0;
    width: 100%;
    height:  100%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.content-slide-01 #videoWrapper {
    width: 6.77rem;
    z-index: -1;
    pointer-events: none;
    transition: all 2s;
}

.content-slide-01 .pic.show #videoWrapper {
    width: 100%;
}

.content-slide-01 .logo {
    display: none;
    top: 1.5rem;
    left: .1rem;
    width: 2.34rem;
    height: .99rem;
    background-image: url("//png.pookcdn.net/new_net/bydrqp/anniversary/logo.png");
}

.content-slide-01 .banner {
    display: block; 
    top: 2rem;
    left: 50%;
	margin-left: -3.39rem;
    width: 6.79rem;
    height: 3.82rem;
    background-image: url(//png.pookcdn.net/new_net/bydrqp/anniversary/page_01_01.png);
   
}

.content-slide-01 .btn-enter {
    display: none;
    left: 50%;
    bottom: 1.3rem;
	margin-left: -3.58rem;
    width: 7.16rem;
    height: 2.66rem;
    background-image: url("//png.pookcdn.net/new_net/bydrqp/anniversary/page_01_02.png");
}

.content-slide-01 .agree-text {
    display: none;
    left: 50%;
    bottom: 1.3rem;
    margin-top: .2rem;
    font-size: .28rem;
    color: #fff;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.content-slide-01 .agree-text input {
	position: relative;
	top: -.03rem;
    margin-right: .05rem;
    background: #ffffff;
    border: .03rem #3d3d3d solid;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    vertical-align: middle;
}

.content-slide-01 .agree-text a {
    color: #FFF6D1;
}



.bg-answer .pattern {
    top: 1rem;
    left: -120%;
    width: 17.55rem;
    height: 14.15rem;
    background-image: url("//png.pookcdn.net/new_net/bydrqp/anniversary/page_02_01.png");
	opacity: 0;
}

.content-slide-13 .pattern {
    left: -100%;
}

.bg-answer .question {
    top: .5rem;
    width: 6.64rem;
    height: 1.96rem;
    background-image: url("//png.pookcdn.net/new_net/bydrqp/anniversary/page_02_02.png");
}

.bg-answer .answer-01 {
    bottom: 4rem;
    width: 7.02rem;
    height: 2.03rem;
    background-image: url("//png.pookcdn.net/new_net/bydrqp/anniversary/page_02_03.png");
    color: #18494b;
    font-size: .46rem;
    line-height: 1.2;
    font-weight: 600;
	border: none;
	background-color: transparent;
}

.bg-answer .answer-02 {
    bottom: 1.7rem;
    width: 7.02rem;
    height: 2.46rem;
    background-image: url("//png.pookcdn.net/new_net/bydrqp/anniversary/page_02_04.png");
    color: #652317;
    font-size: .46rem;
    line-height: 1.2;
    font-weight: 600;
	border: none;
	background-color: transparent;
}

.bg-info .text {
    top: .96rem;
    left: 50%;
    padding: .8rem .65rem;
    width: 6.36rem;
    height: 0;
    background-image: url("//png.pookcdn.net/new_net/bydrqp/anniversary/page_03_01.png");
    font-weight: 600;
    color: #4b2018;
    line-height: 1.4;
    text-align: left;
    letter-spacing: .02rem;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    box-sizing: border-box;
	background-size: 6.36rem 12.04rem;
}
.bg-info .text.showHeight{
	-webkit-animation: showHeight 1s ease-in-out;
	animation: showHeight 1s ease-in-out;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;

}
@-webkit-keyframes showHeight {
    0% {
       height: 0;
    }
    100% {
		height: 12.04rem;
    }
}
@keyframes showHeight {
	0% {
		height: 0;
	 }
	 100% {
		 height: 12.04rem;
	 }
}

.bg-info .text::before,
.bg-info .text::after {
    content: "";
    position: absolute;
    top: -.6rem;
    left: 50%;
    width: 7.5rem;
    height: 1.16rem;
    background: url("//png.pookcdn.net/new_net/bydrqp/anniversary/page_03_02.png") no-repeat;
    background-size: 100% 100%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.bg-info .text::after {
    top: initial;
    bottom: -.7rem;
}

.bg-info .text.center {
    margin-left: 0;
    text-align: center;
}

.bg-info .text .mb {
    margin-bottom: .5rem;
}

.bg-info .text .center {
    text-align: center;
}

.bg-info .text span {
    margin: 0 .1rem;
    color: #d6471f;
}
/* .bg-info .text p{
	opacity: 0;
} */

.bg-info .ft-b {
    font-size: .68rem;
    font-family: 'CLOUDSONGDA';
    color: #d6471f;
    font-weight: normal;
    line-height: 1;
}

.bg-info .num {
    font-size: .54rem;
    font-family: 'CLOUDSONGDA';
    color: #d6471f;
    font-weight: normal;
}
.bg-info .ft-hw{
	font-family: "STKaiti", "KaiTi", serif;
	font-weight: 600;
}
.bg-info .text-bot {
    left: 50%;
    bottom: .9rem;
    padding: .3rem .2rem 0;
    margin-left: -2.31rem;
    width: 4.62rem;
    background: url("//png.pookcdn.net/new_net/bydrqp/anniversary/page_03_07.png") no-repeat;
    font-family: 'fangzheng';
    font-size: .93rem;
    color: rgba(106, 49, 34, .8);
    letter-spacing: -.1rem;
    font-weight: normal;
    line-height: 1;
    -webkit-flex-flow: column;
    flex-flow: column;
    background-size: 4.62rem .14rem;
    background-position: top center;
    box-sizing: border-box;
}

.bg-info .text-bot p {
    width: 100%;
    text-align: left;
}

.bg-info .text-bot .txt-r {
    text-align: right;
}

.prev,
.next {
    bottom: -1.2rem;
    left: -.55rem;
    width: 2.88rem;
    height: 2.2rem;
    z-index: 3;
}

.prev {
    background-image: url("//png.pookcdn.net/new_net/bydrqp/anniversary/page_03_06.png");
}

.next {
    left: initial;
    right: -.55rem;
    width: 2.92rem;
    background-image: url("//png.pookcdn.net/new_net/bydrqp/anniversary/page_03_05.png");
}

.content-slide-13 .prev,
.content-slide-13 .next {
    left: 0;
    bottom: 1rem;
}

.content-slide-13 .next {
    left: initial;
    right: 0;
}

.bg-info .ribbon-01 {
    top: -1rem;
    left: -.1rem;
    width: 1.03rem;
    height: 2.82rem;
    background-image: url("//png.pookcdn.net/new_net/bydrqp/anniversary/page_03_03.png");
    z-index: 2;
}

.bg-info .ribbon-02 {
    bottom: -1.2rem;
    right: -.3rem;
    width: 2.73rem;
    height: 5.41rem;
    background-image: url("//png.pookcdn.net/new_net/bydrqp/anniversary/page_03_04.png");
    z-index: 2;
}


.bg-info .name {
    margin-bottom: .2rem;
    font-size: .54rem;
    font-family: 'CHAO-WINDGBT-FLASH';
    color: #4b2018;
    font-weight: normal;
}

.bg-info .p-slide-section__body p,
.bg-info .p-slide-section__body a {
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.bg-info .tag {
    top: 50%;
    margin-top: -7.2rem;
    right: .25rem;
}

.bg-info .tag img {
    width: 1.76rem;
}

.content-slide-14 .text-gradient {
    top: 10%;
    font-size: .6rem;
    -webkit-text-shadow: 0 .08rem .3rem rgba(233, 169, .95, .4);
    text-shadow: 0 .08rem .3rem rgba(233, 169, .95, .4);
}

.content-slide-15 .text {
    padding-top: .5rem;
    height: 100%;
    box-sizing: border-box;
}

.content-slide-15 .img-result {
    width: 7.5rem;
    height: 9.26rem;
}

.content-slide-15 .img-result img {
    position: relative;
    margin-top: .2rem;
    width: 7.5rem;
    z-index: 3;
}

.content-slide-15 .img-result .scroll {
    bottom: -2rem;
    left: 0;
    width: 7.5rem;
    height: 6.54rem;
    background-image: url("//png.pookcdn.net/new_net/bydrqp/anniversary/page_04_01.png") ;
}

.content-slide-15 .tips {
    margin: 1.2rem auto 0;
    width: 7.36rem;
    height: .75rem;
    background-image: url("//png.pookcdn.net/new_net/bydrqp/anniversary/page_04_02.png");
    line-height: .75rem;
    z-index: 4;
}
.content-slide-15 .result-tips img{
	height: .34rem;
}

.code-info {
	margin-top: .2rem;
	margin-right: .3rem;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

.code-info img {
    margin-right: .1rem;
    width: 3.91rem;
    height: 1.11rem;
}

.code-info canvas,
.code-info .qrcode-img {
    width: 1.1rem!important;
    height: 1.1rem!important;;
    -webkit-border-radius: .05rem;
    border-radius: .05rem;
}

.btn-list{
	left: 0;
	bottom: .2rem;
	width: 100%;
	z-index: 10;
	gap: .5rem;
 }
.btn-list button{
	display: block;	
	width: 2.73rem;
	height: .92rem;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-color: transparent;
	border: none;
}
.btn-share{
	background-image: url("//png.pookcdn.net/new_net/bydrqp/anniversary/page_04_09.png");
}
.btn-next{
	background-image: url("//png.pookcdn.net/new_net/bydrqp/anniversary/page_04_08.png");
}


.mod-orient-layer {
    display: none;
    position: fixed;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #000;
    z-index: 9997;
}

.mod-orient-layer__content {
    position: absolute;
    width: 100%;
    top: 45%;
    margin-top: -75px;
    text-align: center;
}

.mod-orient-layer__icon-orient {
    display: inline-block;
    width: 1.34rem;
    height: 2.18rem;
    background-image: url(//png.pookcdn.net/bcjh_lobby/fouryear/rotate.png);
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -webkit-animation: rotation infinite 1.5s ease-in-out;
    animation: rotation infinite 1.5s ease-in-out;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
}

.mod-orient-layer__desc {
    margin-top: .2rem;
    font-size: .15rem;
    color: #fff;
}


.btnSize {
    -webkit-animation: bounceIn 2s 3s forwards, btnSize infinite 2s linear;
    animation: bounceIn 2s 3s forwards, btnSize infinite 2s linear;
    opacity: 0;
}

.textSize {
    -webkit-animation: btnSize infinite 1s linear;
    animation: btnSize infinite 1s linear;
}

.bgrotate {
    -webkit-animation: bounceIn .75s both, bgrotate infinite 2s linear;
    animation: bounceIn .75s both, bgrotate infinite 2s linear;
}

.bgfloat {
    -webkit-animation: bounceIn .75s .5s both, bgfloat infinite 3s linear;
    animation: bounceIn .75s .5s both, bgfloat infinite 3s linear;
}

.content-slide-03 .doll01.bgfloat,
.content-slide-03 .doll02.bgfloat {
    -webkit-animation: bounceIn .75s .5s both, bgfloat infinite 3s .5s linear;
    animation: bounceIn .75s .5s both, bgfloat infinite 3s .5s linear;
}


@-webkit-keyframes bgrotate {
    0% {
        transform: rotate(2deg);
        -webkit-transform: rotate(2deg);
    }

    50% {
        transform: rotate(-2deg);
        -webkit-transform: rotate(-2deg);
    }

    100% {
        transform: rotate(2deg);
        -webkit-transform: rotate(2deg);
    }
}

@keyframes bgrotate {
    0% {
        transform: rotate(2deg);
        -webkit-transform: rotate(2deg);
    }

    50% {
        transform: rotate(-2deg);
        -webkit-transform: rotate(-2deg);
    }

    100% {
        transform: rotate(2deg);
        -webkit-transform: rotate(2deg);
    }
}

@-webkit-keyframes bgfloat {
    0% {
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
    }

    25% {
        transform: translate(-.1rem, -.1rem);
        -webkit-transform: translate(-.1rem, -.1rem);
    }

    50% {
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
    }

    75% {
        transform: translate(.1rem, -.1rem);
        -webkit-transform: translate(.1rem, -.1rem);
    }

    100% {
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
    }
}

@keyframes bgfloat {
    0% {
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
    }

    25% {
        transform: translate(-.1rem, -.1rem);
        -webkit-transform: translate(-.1rem, -.1rem);
    }

    50% {
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
    }

    75% {
        transform: translate(.1rem, -.1rem);
        -webkit-transform: translate(.1rem, -.1rem);
    }

    100% {
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
    }
}

@-webkit-keyframes bgLeftRight {
    0% {
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
    }

    50% {
        transform: translateY(-.1rem);
        -webkit-transform: translateY(-.1rem);
    }

    100% {
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
    }
}

@keyframes bgLeftRight {
    0% {
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
    }

    50% {
        transform: translateY(-.1rem);
        -webkit-transform: translateY(-.1rem);
    }

    100% {
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
    }
}

@-webkit-keyframes btnSize {
    0% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }

    50% {
        transform: scale(1.05);
        -webkit-transform: scale(1.05);
    }

    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }
}

@keyframes btnSize {
    0% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }

    50% {
        transform: scale(1.05);
        -webkit-transform: scale(1.05);
    }

    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }
}

@-webkit-keyframes bounceIn {

    0%,
    100%,
    20%,
    40%,
    60%,
    80% {
        -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
        transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }

    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03)
    }

    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97)
    }

    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@keyframes bounceIn {

    0%,
    100%,
    20%,
    40%,
    60%,
    80% {
        -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
        transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        -ms-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        -ms-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }

    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        -ms-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        -ms-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03)
    }

    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        -ms-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97)
    }

    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}


.topBottom {
    -webkit-animation: topBottom infinite 1.5s linear;
    animation: topBottom infinite 1.5s linear;
}

@-webkit-keyframes topBottom {
    0% {
        transform: translateY(-.3rem);
        -webkit-transform: translateY(-.3rem);
    }

    50% {
        transform: translateY(0);
        -webkit-transform: translateY(0);
    }

    100% {
        transform: translateY(-.3rem);
        -webkit-transform: translateY(-.3rem);
    }
}

@keyframes topBottom {
    0% {
        transform: translateY(-.3rem);
        -webkit-transform: translateY(-.3rem);
    }

    50% {
        transform: translateY(0);
        -webkit-transform: translateY(0);
    }

    100% {
        transform: translateY(-.3rem);
        -webkit-transform: translateY(-.3rem);
    }
}

.bgSize {
    -webkit-animation: bgSize 1.5s linear;
    animation: bgSize 1.5s linear;
    transform-origin: center;
    -webkit-transform-origin: center;
}

@-webkit-keyframes bgSize {
    0% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }

    100% {
        transform: scale(1.5);
        -webkit-transform: scale(1.5);
        opacity: 0;
    }
}

@keyframes bgSize {
    0% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }

    100% {
        transform: scale(1.5);
        -webkit-transform: scale(1.5);
        opacity: 0;
    }
}


@-webkit-keyframes rotation {
    10% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg)
    }

    50%,
    60% {
        transform: rotate(0);
        -webkit-transform: rotate(0)
    }

    90% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg)
    }

    100% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg)
    }
}

@keyframes rotation {
    10% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg)
    }

    50%,
    60% {
        transform: rotate(0);
        -webkit-transform: rotate(0)
    }

    90% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg)
    }

    100% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg)
    }
}

@-webkit-keyframes rotateInDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
    }

    100% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

@keyframes rotateInDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        -ms-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
    }

    100% {
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        opacity: 1
    }
}

@-webkit-keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        -ms-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

@-webkit-keyframes fadeInUpBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInUpBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        -ms-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}



@media screen and (max-height: 745px) {
	.content-slide-01 .logo{
		top: 1rem;
	}
	.bg-answer .pattern{
		-webkit-transform: scale(.8);
		transform: scale(.8);
		-webkit-transform-origin: top center;
		transform-origin: top center;
	}
	.bg-answer .answer-01{
		bottom: 3rem;
	}
	.bg-answer .answer-02{
		bottom: .7rem;
	}
	.content-slide-15 .tips{
		margin-top: -1rem;
	}
	.content-slide-15 .img-result{
		-webkit-transform: scale(.8);
		transform: scale(.8);
		-webkit-transform-origin: top center;
		transform-origin: top center;
	}
	.content-slide-13 .prev,
	.content-slide-13 .next,
	.btn-list{
		bottom: .2rem;
	}
    .bg-info .text{
    -webkit-transform: scale(.95) translateX(-52%);
    transform:scale(.95) translateX(-52%);
    -webkit-transform-origin: top center;
    transform-origin: top center;
    }
}

/*iPhone6/7/8*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-device-pixel-ratio: 2) {}

/*iPhone6/7/8 Plus*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-device-pixel-ratio: 3) {
	
}

@media (min-height: 1366px) and (min-width: 1024px) {
	
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.content-slide-15 .text{ padding-top: 0; }
	.content-slide-15 .img-result{
		-webkit-transform: scale(.7);
		transform: scale(.7);
		-webkit-transform-origin: top center;
		transform-origin: top center;
	}
	.content-slide-15 .tips{
		margin-top: -2.8rem;
	}
	.bg-info .text{
		-webkit-transform: scale(.75) translateX(-65%);
		-webkit-transform-origin: top center;
		transform: scale(.75) translateX(-65%);
		transform-origin: top center;
	}

}