/**
手機--------------------
 */
@media screen and (max-width: 1200px){
    .slidshow1{
        display: none;
    }

    .slidshow2{
        margin-top: 78px;
        overflow: hidden;
    }
    .slidshow2 > .top{
        background-image: url("../image/banner_bg3@2x.png");
        background-repeat: no-repeat;
        background-size: 160%;
        background-position-x: -50px;
        position: relative;
        width: 100%;
        overflow: hidden;
        z-index: 1;
    }
    .slidshow2 > .top .swiper-box{
        width: 287px;
        margin: 40px auto 0;
        position: relative;
    }
    .slidshow2 > .top .swiper-box >img{
        width: 100%;
        z-index: 2;
        position: relative;
        pointer-events:none;
        outline: none;
    }
    .slidshow2 > .top .swiper-box .swiper-container{
        position: absolute;
        top: 15px;
        left: 24px;
        width: 240px;
        z-index: 1;
    }
    .slidshow2 > .top .swiper-box .swiper-container img{
        width: 100%;
    }
    .slidshow2 > .top .swiper-box .swiper-container .swiper-slide{
        position: relative;
    }
    .slidshow2 > .top .swiper-box .swiper-container .swiper-slide span{
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        top: 60%;
        width: 80%;
        height: 50px;
        border-radius: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: rgba(230, 32, 71, 1);
        background: linear-gradient(138deg,rgb(251, 234, 164) 0%,rgb(255, 181, 0) 100%);
        animation: invite 0.5s;
        animation-iteration-count:infinite;
        animation-timing-function:linear;
        animation-direction:alternate;
    }
    @keyframes invite {
        /*0% {transform: scale(1)}*/
        0% {transform: scale(1.1)}
        100% {transform: scale(0.9)}
    }
    .slidshow2 > .bottom{
        background-image: url("../image/appbanner.png");
        background-repeat: no-repeat;
        background-size: 100%;
        margin-top: -170px;
        position: relative;
        z-index: 2;
        padding: 70px 0;
    }
    .slidshow2 > .bottom h1,.slidshow2 > .bottom h3{
        font-size: 22px;
        color: rgba(9, 11, 39, 1);
        text-align: center;
        margin-bottom: 5px;
    }
    .slidshow2 > .bottom h1 strong{
        font-size: 40px;
        color: rgba(9, 11, 39, 1);
        margin-top: 2px;
    }
    .slidshow2 > .bottom > p{
        color: rgba(91, 93, 126, 1);
        font-size: 12px;
        margin-bottom: 10px;
        text-align: center;
    }
    .slidshow2 > .bottom > .peration{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .slidshow2 > .bottom > .peration img{
        height: 36px;
        background: #fff;
        margin-right: 10px;
        border: 10px solid #fff;
        border-bottom: 2px;
        border-top: 2px;
        box-shadow:0px 2px 4px 0px rgba(0,0,0,0.22);
        border-radius:6px;
    }

    .content1{
        text-align: center;
        margin-top: 40px;
        position: relative;
        margin-bottom: 135px;
    }
    .content1 > h3,.content1 > p{
        display: none;
    }
    .content1 >.banner{
        display: flex;
        align-items: center;
        height: 300px;
        overflow-x: scroll;
    }
    .content1 >.banner>.left{
        height: 290px;
        margin-left: 20px;
    }
    .content1 >.banner>.left img{
        height: 100%;
    }
    .content1 >.banner>.right{
        width: 75%;
        padding-left: 5px;
        box-sizing: border-box;
        text-align: left;
    }
    .content1 >.banner>.right .top{
        height: 143px;
        display: flex;
        align-items: center;
    }
    .content1 >.banner>.right .top label,.content1 >.banner>.right .bottom label{
        height: 100%;
        margin-right: 5px;
    }
    .content1 >.banner>.right .top img{
        height: 100%;
        /*margin-right: 5px;*/
    }
    .content1 >.banner>.right .bottom{
        height: 143px;
        margin-top: 5px;
        display: flex;
        align-items: center;
    }
    .content1 >.banner>.right .bottom img{
        height: 100%;
        /*margin-right: 5px;*/
    }
    .content1-bg{
        background: linear-gradient(45deg,rgba(243,243,252,1) 0%,rgba(243,243,252,0) 100%);
        font-size: 24px;
        color: rgba(9, 11, 39, 1);
        position: absolute;
        left: 0;
        width: 100%;
        top: 35px;
        height: 390px;
        z-index: -1;
        border-radius: 0 0 0 100px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }
    .content1-bg h3{
        margin-bottom: 40px;
    }
    .content1-bg strong{
        font-size: 32px;
        text-align: center;
        margin-right: 5px;
    }
    .filler{
        width: 20px;
        height: 140px;
        background: #fff;
        color: #fff;
    }

    .content2{
        display: flex;
        flex-direction: column;
    }
    .content2 .left{

    }
    .content2 .left img{
        width: 100%;
    }
    .content2 .right{
        display: flex;
        flex-direction: column;
        margin-top: -70px;
    }
    .content2 .right h1{
        display: flex;
        align-items: center;
        padding: 0 10px;
        box-sizing: border-box;
    }
    .content2 .right h1 p{
        font-size: 20px;
        color: rgba(9, 11, 39, 1);
        font-weight: bold;
    }
    .content2 .right h1 img{
        width: 60px;
    }
    .content2 .right h3{

    }
    .content2 .right > p{
        color: rgba(91, 93, 126, 1);
        font-size: 13px;
        line-height: 25px;
        padding: 0 20px;
        box-sizing: border-box;
    }
    .web{
        display: none;
    }

    .content3{
        background:linear-gradient(151deg,rgba(249,214,127,0.5) 0%,rgba(243,243,252,0) 40%);
        border-radius:0px 120px 0px 0px;
        padding: 0 15px;
        box-sizing: border-box;
        margin-top: 40px;
        overflow: hidden;
    }
    .content3 h1{
        font-size: 20px;
        color: rgba(9, 11, 39, 1);
        margin: 40px 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .content3 h1 img{
        width: 30px;
    }
    .content3 .shop{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between;
        height: 542px;
        padding: 24px 5px 0;
        overflow: hidden;
        box-sizing: border-box;
    }
    .content3 .shop .box{
        width: 47%;
        height: 100px;
        background:rgba(255,255,255,1);
        box-shadow:0px 2px 5px 0px rgba(0,0,0,0.18);
        border-radius: 10px;
        padding: 0 10px;
        box-sizing: border-box;
        margin-bottom: 38px;
    }
    .content3 .shop .box:last-child{
        margin-bottom: 10px;
    }
    .content3 .shop .box .img{
        display: flex;
        align-items: flex-end;
        font-size: 14px;
        color: rgba(91, 93, 126, 1);
        margin-top: -18px;
        font-weight: bold;
    }
    .content3 .shop .box .img img{
        width: 48px;
        height: 48px;
        border: 2px solid #fff;
        box-shadow:0px -3px 5px 0px rgba(0,0,0,0.18);
        border-radius: 50%;
        margin-right: 7px;
    }
    .content3 .shop .box .img h3{
        margin-bottom: 5px;
        white-space: nowrap;

    }
    .content3 .shop .box p{
        color: RGBA(137, 139, 162, 1);
        font-size: 11px;
        margin-top: 10px;
    }
    .content3 > .wap > button{
        padding: 0 5px;
        box-sizing: border-box;
        border: none;
        background: #fff;
        outline: none;
        width: 100%;
        margin-bottom: 20px;
    }
    .content3 > .wap > button span{
        display: inline-block;
        margin: 20px 0;
        background:rgba(255,255,255,1);
        box-shadow:0px 2px 5px 0px rgba(0,0,0,0.18);
        border-radius:10px;
        height: 40px;
        font-size: 14px;
        color: rgba(91, 93, 126, 1);
        line-height: 40px;
        text-align: center;
        width: 100%;
    }



}






/**
電腦---------------------
 */
@media screen and (min-width: 1200px){
    .slidshow2{
        display: none;
    }
    .slidshow1{
        display: flex;
        align-items: center;
    }
    .slidshow1 > .left{
        width: 40%;
        white-space: nowrap;
    }
    .slidshow1 > .left h3{
        font-size: 35px;
        color: rgba(9, 11, 39, 1);
        margin-bottom: 0;
        font-weight: unset;
    }
    .slidshow1 > .left h3 strong{
        font-weight: bold;
        font-size: 55px;
    }
    .slidshow1 > .left h1{
        color: rgba(9, 11, 39, 1);
        font-size: 55px;
        margin-bottom: 0;
        margin-top: 15px;
        font-weight: unset;
    }
    .slidshow1 > .left .qrcode{
        margin-top: 20px;
        width: 250px;
        height: 250px;
        box-shadow:-2px 2px 6px 0px rgba(58,70,93,0.12),0px 2px 4px 0px rgba(0,0,0,0.11);
        border-radius:10px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .slidshow1 > .left .qrcode img{
        width: 180px;
        margin-top: 20px;
    }
    .slidshow1 > .left .qrcode span{
        width:200px;
        height:35px;
        background:linear-gradient(90deg,rgba(255,184,0,1) 0%,rgba(255,153,0,1) 100%);
        box-shadow:0px 4px 8px 0px rgba(0,0,0,0.1);
        border-radius:30px;
        color: #fff;
        font-size: 14px;
        line-height: 35px;
        text-align: center;
    }
    .slidshow1 > .left >p{
        color: rgba(91, 93, 126, 1);
        font-size: 16px;
        margin-top: 20px;
    }
    .slidshow1 > .left .peration{
        display: flex;
        align-items: center;
    }
    .slidshow1 > .left .peration img{
        height: 56px;
    }
    .slidshow1 > .left .peration strong{
        font-size: 20px;
        color: rgba(91, 93, 126, 1);
        margin: 0 20px;
    }



    .slidshow1 > .right{
        width: 50%;
    }
    .slidshow1 > .right .right-bg{
        /*height: 700px;*/
        width: 120%;
        background-image: url("../image/banner_bg3@2x.png");
        background-repeat: no-repeat;
        background-size: 100%;
        position: relative;
        overflow: hidden;
    }
    .slidshow1 .right-bg .swiper-box{
        width: 322px;
        /*height: 702px;*/
        position: relative;
        margin-left: 155px;
        margin-top: 33px;
    }
    .slidshow1 .right-bg .swiper-box >img{
        width: 100%;
        position: relative;
        /*top: 0;*/
        /*left: 0;*/
        z-index: 2;
    }
    .slidshow1 .right-bg .swiper-container{
        width: 268px;
        position: absolute;
        top: 15px;
        left: 28px;
        z-index: 1;
    }
    .slidshow1 .right-bg .swiper-container img{
        width: 100%;
    }

    .filler,.content1-bg{
        display: none;
    }


    .content1{
        padding: 0 60px;
        text-align: center;
        margin-top: 100px;
    }
    .content1 > h3{
        font-size: 30px;
        color: rgba(9, 11, 39, 1);
        margin-bottom: 20px;
    }
    .content1 > p{
        color: rgba(169, 172, 186, 1);
        font-size: 16px;
    }
    .content1 >.banner{
        display: flex;
        align-items: center;
        height: 650px;
        margin-top: 50px;
    }
    .content1 >.banner>.left{
        height: 650px;
    }
    .content1 >.banner>.left label,.content1 >.banner>.right .top label,.content1 >.banner>.right .bottom label{
        height: 100%;
        display: inline-block;
        overflow: hidden;
        margin-right: 10px;
    }
    .content1 >.banner>.left img{
        height: 100%;
    }
    .content1 >.banner>.right{
        width: 75%;
        /*padding-left: 10px;*/
        box-sizing: border-box;
        text-align: left;
    }
    .content1 >.banner>.right .top{
        height:320px;
        display: flex;
    }
    .content1 >.banner>.right .top img{
        height: 100%;

    }
    .content1 >.banner>.right .bottom{
        height: 320px;
        margin-top: 10px;
        display: flex;
    }
    .content1 >.banner>.right .bottom img{
        height: 100%;
        /*margin-right: 5px;*/
    }
    .content1 img{
        transition: all 0.5s;
        cursor: pointer;
    }
    .content1 img:hover{
        transform: scale(1.2);
    }

    .content2{
        display: flex;
        align-items: center;
    }
    .content2 .left{
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .content2 .left img{
        width: 80%;
    }
    .content2 .right{
        display: flex;
        flex-direction: column;
    }
    .content2 .right h1{
        display: flex;
        flex-direction: column;
    }
    .content2 .right h1 p{
        font-size: 40px;
        color: rgba(9, 11, 39, 1);
        margin: 30px 0 50px;
    }
    .content2 .right h1 img{
        width: 75px;
    }
    .content2 .right h3{

    }
    .content2 .right p{
        color: rgba(91, 93, 126, 1);
        font-size: 15px;
        line-height: 25px;
    }
    .wap{
        display: none;
    }

    .content3{
        height:880px;
        position: relative;
        background-image: url("../image/bg8@2x.png");
        background-size: 100%;
        background-repeat: no-repeat;
    }
    .content3 h1{
        position: absolute;
        left: 0;
        right: 0;
        top: 90px;
        font-size: 30px;
        margin: 0 auto;
        text-align: center;
        width: 370px;
    }
    .content3 h1 span{
        font-size: 12px;
        color: rgba(169, 172, 186, 1);
    }
    .content3 .shop{
        position: absolute;
        width: 1200px;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
        background: rgba(0,0,0,0);
    }
    .content3 .shop label{
        position: absolute;
        top: 150px;
        left: 500px;
        border-radius: 50%;
        transition: all 0.5s;
    }
    .content3 .shop label p{
        position: relative;
        box-shadow:0px 10px 14px 0px rgba(69,73,91,0.08);
        border-radius: 50%;
        transition: all 0.5s;
        width: 116px;
        height: 116px;
    }
    .content3 .shop label img{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: 8px solid #fff;
        opacity: 1;
        transition: all 0.5s;
    }
    .content3 .shop label span{
        position: absolute;
        top: 0;
        left: 0;
        width: 116px;
        height: 116px;
        background: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        opacity: 0;
        transform: rotateY(-180deg);
        transition: all 0.5s;
    }
    .content3 .shop label p:before{
        content: '';
        position: absolute;
        bottom: -10px;
        left: 0;
        right: 0;
        margin: 0 auto;
        border: 18px solid;
        border-color: rgba(0,0,0,0) rgba(0,0,0,0) rgba(255,255,255,1) rgba(255,255,255,1);
        width: 0;
        height: 0;
        border-radius: 5px 10px 5px 10px;
        transform: rotate(-45deg);
        z-index: 1;
    }
    .content3 .shop label:hover p{
        transform: rotateY(180deg);
    }
    .content3 .shop label:hover span{
        opacity: 1;
        transform: rotateY(0deg);
    }
    .content3 .shop label:hover img{
        opacity: 0;
    }

    .content4{
        background-image: url("../image/footer-bg.png");
        background-size: 100%;
        background-repeat: no-repeat;
    }
    .content4 .container{
        height:430px;
        color: rgba(255, 255, 255, 1);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .content4 .container h3{
        font-size: 40px;
        /*margin-top: 45px;*/
    }
    .content4 .container h1{
        font-size: 50px;
        margin: 10px 0;
    }
    .content4 .container p{
        font-size: 13px;
    }
    .content4 .container .qrcode{
        height: 200px;
        width: 200px;
        background: #fff;
        border-radius: 10px;
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-top: 30px;
    }
    .content4 .container .qrcode > img{
        width: 140px;
        height: 140px;
        margin:15px 0 0;
    }
    .content4 .container .qrcode p{
        display: flex;
        align-items: center;
        font-size: 18px;
        color: rgba(43, 76, 54, 1);
    }
    .content4 .container .qrcode p img{
        width: 40px;
        height: 40px;
        margin-right:5px;
    }
    .content4 .footer-wap{
        display: none;
    }
}