html,
body {
    color: #333;
    background-color: #efebd9;
    font-family: "SST-Roman", "微軟正黑體" !important;
    overflow-x: hidden !important;
}

.banner_wg {
    background-image: url(../img/index/bg.png);
    height: 1000px;
    background-position: top center;
    background-size: cover;
    position: relative;
    width: 100%;
    overflow: clip;
}

.protext {
    font-size: 14px;
    color: #727272;
    text-align: left;
    margin-bottom: 5px;
    line-height: 1.4;
    margin-left: 6px;
}

.protext_first {
    margin-top: 10px;
}

.info_01 {
    margin-top: 30px;
}

.banner_wg_bk {
    width: 75%;
    max-width: 1700px;
    margin: 50px auto 0 auto;
    top: 0;
    transform: none;
    display: table;


}

.banner_wg_bk img.pagett {
    width: 80%;
    position: relative;
    margin: auto;
    margin-top: 60px;
    float: none;
}

.banner_wg_bk img.tv {
    width: 32%;
    position: relative;
    margin: 20px auto;
    float: none;
    right: inherit;
}




.bt {
    margin: 5px auto 30px auto;
    width: 220px;
    display: table;
    position: relative;
    z-index: 1;
}

.saleBox {
    width: 100%;
    margin: auto;
    padding: 0px 0 80px 0;
}

.adbox {
    width: 85%;
    margin: 0 auto 30px auto;
}

.adbox img {
    width: 100%;
    vertical-align: bottom;
}

@keyframes warn {
    0% {
        -moz-transform: scale(0.7);
        transform: scale(0.7);
        left: 30%;
        opacity: 1;
        top: 40px;
        margin-left: -130px;
    }

    100% {
        -moz-transform: scale(.4);
        transform: scale(.4);
        left: 10%;
        opacity: 1;
        top: 5px;
        margin-left: -100px;
    }

}

.bird01 {
    -webkit-animation: warn 6s linear;
    -moz-animation: warn 6s linear;
    animation: warn 6s linear;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    background: url("../img/all/bird01.png") no-repeat;
    background-size: 100% 100%;
    margin-left: 0;
    position: absolute;
    animation-iteration-count: infinite;

}

@keyframes warn2 {
    0% {
        -moz-transform: scale(0.5);
        transform: scale(0.5);
        right: 15%;
        opacity: 1;
        top: 100px;
    }

    100% {
        -moz-transform: scale(.7);
        transform: scale(.7);
        right: 5%;
        opacity: 1;
        top: 5px;
    }

}

.bird02 {
    -webkit-animation: warn2 6s ease;
    -moz-animation: warn2 6s ease;
    animation: warn2 6s ease;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    background: url("../img/all/bird02.png") no-repeat;
    background-size: 100% 100%;
    margin-left: 0;
    position: absolute;
    animation-iteration-count: infinite;

}



/*船3*/
div.man {
    position: absolute;
    left: 0;
    animation-name: manboat;
    animation-duration: 6s;
    animation-iteration-count: 1;
    /*    animation-iteration-count: infinite;*/
    margin-top: 160px;
    animation-fill-mode: forwards;
    -webkit-animation: manboat 6s linear;
    -moz-animation: manboat 6s linear;
    animation: manboat 6s linear;
    animation-iteration-count: infinite;
}

.man img {
    width: 180px;
}

@keyframes manboat {
    from {
        left: 17%;
    }

    to {
        left: 20%;
    }
}







@media screen and (max-width: 1920px) {
    .banner_wg {
        height: 970px;
        background-size: contain;
    }


    div.man {
        top: 310px;
    }





    /*船3*/
    @keyframes manboat {
        0% {
            -moz-transform: scale(0.9);
            transform: scale(0.9);
            left: 17%;
            opacity: 1;
            bottom: -200px;
        }

        100% {
            -moz-transform: scale(.9);
            transform: scale(.9);
            left: 25%;
            opacity: 1;
            bottom: -200px;
        }
    }

}

@media screen and (max-width: 1700px) {
    .banner_wg {
        height: 860px;
        background-size: contain;
    }

    /*船3*/
    @keyframes manboat {
        0% {
            -moz-transform: scale(0.9);
            transform: scale(0.9);
            left: 17%;
            opacity: 1;
            top: 300px;
        }

        100% {
            -moz-transform: scale(.9);
            transform: scale(.9);
            left: 25%;
            opacity: 1;
            top: 300px;
        }
    }
}



@media screen and (max-width: 1600px) {
    banner_wg {
        height: 700px;
    }

    .banner_wg_bk img.pagett {
        width: 73%;
        margin-top: 40px;
    }

    .banner_wg_bk {
        width: 75%;
    }
}


@media screen and (max-width: 1500px) {
    .banner_wg_bk {
        width: 75%;
    }

    .banner_wg {
        height: 770px;
        background-size: contain;
    }

    .banner_wg_bk img.tv {
        width: 29%;
    }



    /*船3*/
    @keyframes manboat {
        0% {
            -moz-transform: scale(0.9);
            transform: scale(0.9);
            left: 15%;
            opacity: 1;
            bottom: 140px;
        }

        100% {
            -moz-transform: scale(.9);
            transform: scale(.9);
            left: 20%;
            opacity: 1;
            bottom: 140px;
        }
    }
}



@media screen and (max-width: 1400px) {

    div.man {
        margin-top: 140px;
    }

    .banner_wg {
        height: 710px;
    }

    .saleBox {
        margin-top: 30px;
    }




    /*船3*/
    @keyframes manboat {
        0% {
            -moz-transform: scale(0.9);
            transform: scale(0.9);
            left: 17%;
            opacity: 1;
            bottom: 180px;
        }

        100% {
            -moz-transform: scale(.9);
            transform: scale(.9);
            left: 25%;
            opacity: 1;
            bottom: 180px;
        }
    }


}


@media screen and (max-width: 1300px) {
    .banner_wg {
        height: 657px;
    }


    /*船3*/
    @keyframes manboat {
        0% {
            -moz-transform: scale(0.7);
            transform: scale(0.7);
            left: 17%;
            opacity: 1;
            bottom: 200px;
        }

        100% {
            -moz-transform: scale(.7);
            transform: scale(.7);
            left: 25%;
            opacity: 1;
            bottom: 200px;
        }
    }

}

@media screen and (max-width: 1200px) {
    .banner_wg_bk {
        width: 80%;
    }


    .saleBox {
        margin-top: -30px;
    }


    .adbox {
        width: 90%;
    }



    /*船3*/
    @keyframes manboat {
        0% {
            -moz-transform: scale(0.7);
            transform: scale(0.7);
            left: 15%;
            opacity: 1;
            bottom: 350px;
        }

        100% {
            -moz-transform: scale(.7);
            transform: scale(.7);
            left: 23%;
            opacity: 1;
            bottom: 350px;
        }
    }






}

@media screen and (max-width: 1100px) {
    /*
    .banner_wg {
    height: 720px;
}
*/

    .banner_wg_bk img.pagett {
        margin-top: 40px;
    }

    .banner_wg_bk img.tv {
        width: 31%;
        margin-top: 41px;
    }


    .adbox {
        margin-top: 30px;
    }

    .banner_wg {
        height: 610px;
    }

    @keyframes manboat {
        from {
            left: 17%;
            -moz-transform: scale(.7);
            transform: scale(.7);
            bottom: 500px;
        }

        to {
            left: 23%;
            -moz-transform: scale(.7);
            transform: scale(.7);
            bottom: 500px;
        }
    }

}

@media screen and (max-width: 992px) {
    .banner_wg {
        height: 735px;
    }



    .banner_wg {
        height: 520px;
    }


    .man img {
        width: 140px;
    }

    /*左邊鳥*/
    @keyframes warn {
        0% {
            -moz-transform: scale(0.6);
            transform: scale(0.6);
            left: 25%;
            opacity: 1;
            top: 40px;
            margin-left: -130px;
        }

        100% {
            -moz-transform: scale(.4);
            transform: scale(.4);
            left: 10%;
            opacity: 1;
            top: 5px;
            margin-left: -100px;
        }

    }

    /*船3*/
    @keyframes manboat {
        from {
            left: 17%;
            -moz-transform: scale(.7);
            transform: scale(.7);
            top: 20%;
        }

        to {
            left: 23%;
            -moz-transform: scale(.7);
            transform: scale(.7);
            top: 20%;
        }
    }

    /*熱氣球*/
    @keyframes warn2 {
        0% {
            -moz-transform: scale(0.5);
            transform: scale(0.5);
            right: 10%;
            opacity: 1;
            top: 50px;
        }

        100% {
            -moz-transform: scale(.6);
            transform: scale(.6);
            right: 5%;
            opacity: 1;
            top: 5px;
        }

    }





}

@media screen and (max-width: 850px) {
    .banner_wg_bk {
        width: 78%;
        margin-top: 0;
    }


    .banner_wg {
        height: 430px;
    }


    .banner_wg_bk img.tv {
        margin-top: 15px;
    }


    .bt {
        margin: 0px auto 0px auto;
        width: 165px;
    }

    .saleBox {
        padding: 0px 0 50px 0;
    }



}

@media screen and (max-width: 768px) {

    .banner_wg_bk img.pagett {
        margin-top: 55px;
    }

    .man img {
        width: 105px;
    }

    .adbox {
        margin-top: 0px;
        width: 95%;

    }


    .banner_wg {
        height: 390px;
    }

    .saleBox {
        margin-top: 0;
    }


    .protext {
        font-size: 12px;
    }

}

@media screen and (max-width: 700px) {
    .banner_wg {
        height: 354px;
    }
}

@media screen and (max-width: 650px) {

    .banner_wg_bk img.pagett {
        margin-top: 20px;
        width: 85%;
    }

    .bt {
        margin: 0px auto 0px auto;
        width: 130px;
    }

    .banner_wg {
        height: 323px;
    }

    .banner_wg_bk img.tv {
        width: 45%;
    }

    /*左邊鳥*/
    @keyframes warn {
        0% {
            -moz-transform: scale(0.4);
            transform: scale(0.4);
            left: 20%;
            opacity: 1;
            top: 40px;
            margin-left: -80px;
        }

        100% {
            -moz-transform: scale(.3);
            transform: scale(.3);
            left: 5%;
            opacity: 1;
            top: 5px;
            margin-left: -50px;
        }

    }

    /*船3*/
    @keyframes manboat {
        from {
            left: 17%;
            -moz-transform: scale(.7);
            transform: scale(.7);
            top: 20px;
        }

        to {
            left: 23%;
            -moz-transform: scale(.7);
            transform: scale(.7);
            top: 20px;
        }
    }

    /*熱氣球*/
    @keyframes warn2 {
        0% {
            -moz-transform: scale(0.3);
            transform: scale(0.3);
            right: 5%;
            opacity: 1;
            top: 30px;
        }

        100% {
            -moz-transform: scale(.4);
            transform: scale(.4);
            right: 2%;
            opacity: 1;
            top: 0;
        }

    }


}

@media screen and (max-width: 600px) {



    .banner_wg {
        height: 303px;
    }

    .saleBox {
        margin-top: 10px;
        padding: 0px 0 20px 0;
    }

    /*船3*/
    @keyframes manboat {
        from {
            left: 17%;
            -moz-transform: scale(.7);
            transform: scale(.7);
            top: 10px;
        }

        to {
            left: 23%;
            -moz-transform: scale(.7);
            transform: scale(.7);
            top: 10px;
        }
    }

    .protext {
        font-size: 11px;
    }




}

@media screen and (max-width: 500px) {
    .banner_wg_bk {
        width: 85%;
    }

    .banner_wg_bk img.pagett {
        width: 90%;
    }

    .bt {
        margin: -21px auto 30px auto;
        width: 120px;
    }

    .protext {
        font-size: 11px;
    }


    .banner_wg {
        height: 280px;
    }


    .adbox {
        margin-top: -10px;
    }

    .saleBox {
        margin-top: 20px;
    }

}

@media screen and (max-width: 450px) {


    .banner_wg_bk {
        margin: 65px auto 0 auto;
    }

    .banner_wg_bk img.pagett {
        margin-top: 25px;
    }

    .banner_wg_bk img.tv {
        margin-top: 13px;
    }

    .saleBox {
        padding: 10px 0 1px 0;
    }


    .protext {
        font-size: 10px;
        letter-spacing: 0;
        word-wrap: break-word;
        word-break: break-all;
    }

    .banner_wg {
        height: 300px;
        margin-top: -20px;
        background-size: cover;
    }


    .bt {
        margin: -19px auto 30px auto;
        width: 110px;
    }

    /*熱氣球*/
    @keyframes warn2 {
        0% {
            -moz-transform: scale(0.5);
            transform: scale(0.5);
            right: 20px;
            opacity: 1;
            top: 30px;
        }

        100% {
            -moz-transform: scale(.6);
            transform: scale(.6);
            right: 0;
            opacity: 1;
            top: 0;
        }

    }





}

@media screen and (max-width: 400px) {


    .bt {
        width: 95px;
    }

    .protext {
        font-size: 9px;
        margin-left: 0;
    }
}

@media screen and (max-width: 370px) {
    .protext {
        font-size: 9px;
        margin-left: 0;
    }

    .banner_wg {
        height: 265px;
    }
}