@font-face {
    font-family: SST-Medium;
    /* 自訂義*/
    src: url(fonts/SST-Medium.otf);
}

@font-face {
    font-family: SST-Roman;
    /* 自訂義*/
    src: url(fonts/SST-Roman.otf);
}

html,
body {
    font-family: "SST-Roman", "微軟正黑體";
}

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;200;300;400;500;600;700;800;900&display=swap');

@font-face {
    font-family: SST-Medium;
    /* 自訂義*/
    src: url(fonts/SST-Medium.otf);
}

@font-face {
    font-family: SST-Roman;
    /* 自訂義*/
    src: url(fonts/SST-Roman.otf);
}

@font-face {
    font-family: SST-Bold;
    /*    自訂義 */
    src: url(fonts/SST-Bold.otf);
}


html,
body {
    font-family: "SST-Bold", "微軟正黑體";
}

header {
    width: 100%;
}

.frame_bg {
    background-image: url(../img/all/bg.png);
    background-color: #b86281;
    background-repeat: repeat;
    padding: 70px;
    margin-top: -3px;
}

a.gosony {
    display: table;
}

img.logo {
    width: 140px;
    padding-top: 11px;
    float: left;
    padding-left: 17px;
}

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

.ac01 {
    width: 130px;
    height: 130px;
    position: absolute;
    opacity: 1;
    left: 8%;
    top: 40%;
    transform: translate(-50%, -50%);
    animation: change 1s;
    -moz-animation: change 1s;
    -webkit-animation: change 1s;
    -o-animation: change 1s;
}


@keyframes change {
    from {
        width: 50px;
        height: 50px;
        opacity: 1;
    }

    to {
        width: 130px;
        height: 130px;
        opacity: 1;
    }
}

.ac02 {
    width: 90px;
    height: 90px;
    position: absolute;
    opacity: 0;
    left: 30%;
    top: 48%;
    transform: translate(-50%, -50%);
    animation: change02 1s;
    -moz-animation: change02 1s;
    -webkit-animation: change02 1s;
    -o-animation: change02 1s;
    animation-delay: .2s;
    animation-fill-mode: forwards;
}

@keyframes change02 {
    from {
        width: 20px;
        height: 20px;
        opacity: 1;
    }

    to {
        width: 90px;
        height: 90px;
        opacity: 1;
    }
}

.ac03 {
    width: 120px;
    height: 120px;
    left: 58%;
    top: 46%;
    animation: change03 1s;
    -moz-animation: change03 1s;
    -webkit-animation: change03 1s;
    -o-animation: change03 1s;
}

@keyframes change03 {
    from {
        width: 50px;
        height: 50px;
        opacity: 1;
    }

    to {
        width: 120px;
        height: 120px;
        opacity: 1;
    }
}



.ac04 {
    width: 90px;
    height: 90px;
    position: absolute;
    opacity: 0;
    left: 70%;
    top: 49%;
    transform: translate(-50%, -50%);
    animation: change04 1s;
    -moz-animation: change04 1s;
    -webkit-animation: change04 1s;
    -o-animation: change04 1s;
    animation-delay: .4s;
    animation-fill-mode: forwards;
}

@keyframes change04 {
    from {
        width: 0px;
        height: 0px;
        opacity: 1;
    }

    to {
        width: 80px;
        height: 80px;
        opacity: 1;
    }
}

.ac05 {
    width: 130px;
    height: 130px;
    position: absolute;
    opacity: 0;
    left: 95%;
    top: 40%;
    transform: translate(-50%, -50%);
    animation: change05 1s;
    -moz-animation: change05 1s;
    -webkit-animation: change05 1s;
    -o-animation: change05 1s;
    animation-delay: .6s;
    animation-fill-mode: forwards;
}

@keyframes change05 {
    from {
        width: 0px;
        height: 0px;
        opacity: 1;
    }

    to {
        width: 130px;
        height: 130px;
        opacity: 1;
    }
}


.pagetitle {
    width: 650px;
    margin: 0 auto 20px;
}

.pagetitle img {
    width: 100%;
}

a.goregester_y {
    background-color: #fdd000;
    color: #000;
    width: 180px;
    height: 52px;
    border-radius: 37px;
    display: table;
    margin: auto;
    text-align: center;
    line-height: 52px;
    font-size: 21px;
    font-weight: bold;
    box-shadow: 3px 5px 10px #7fa4b3;
}

.page_pointbar {
    /*    background: linear-gradient(to bottom, #b36480 0%, #856180 100%);*/
    background: #869173;
    width: 100%;
    height: 65px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    line-height: 57px;
    font-size: 40px;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 30px;
    font-family: "SST-Medium", "微軟正黑體";
    max-width: 1200px;
    /*border-radius: 50px;*/
    border: 3px solid #869173;
    box-shadow: inset 0px 23px 15px -17px #a8b890,inset 0px -16px 18px -10px #7a816a;
    -webkit-box-shadow: inset 0px 23px 15px -17px #a8b890,inset 0px -16px 18px -10px #7a816a;
}


footer {
    width: 100%;
    background-color: #000000;
    font-size: 12px;
    line-height: 18px;
    color: #fff;
    padding: 20px 10px;
	}

footer p,
footer a {
    color: white;
    text-decoration: none;
    text-align: center;
}



@media screen and (max-width: 1400px) {
    .ac01 {
        top: 31%;
    }

    .ac02 {
        top: 40%;
        left: 34%;
    }

    @keyframes change02 {
        from {
            width: 0px;
            height: 0px;
            opacity: 1;
        }

        to {
            width: 50px;
            height: 50px;
            opacity: 1;
        }
    }

    .ac03 {
        top: 39%;
    }

    .ac04 {
        top: 42%;
    }

    .ac05 {
        top: 30%;
    }
}

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

    .ac02 {
        top: 37%;
        left: 34%;
    }

    .ac03 {
        top: 37%;
        width: 100px;
        height: 100px;
    }

    @keyframes change03 {
        from {
            width: 0px;
            height: 0px;
            opacity: 1;
        }

        to {
            width: 100px;
            height: 100px;
            opacity: 1;
        }
    }

    .ac04 {
        top: 39%;
        width: 60px;
        height: 60px;
    }

    @keyframes change04 {
        from {
            width: 0px;
            height: 0px;
            opacity: 1;
        }

        to {
            width: 60px;
            height: 60px;
            opacity: 1;
        }
    }

    .ac05 {
        top: 30%;
    }
}





@media screen and (max-width: 1200px) {
    .banner_wg_bk img.tv {
        margin-top: 100px;
        width: 29%;
    }

    .ac03 {
        top: 34%;
        width: 80px;
        height: 80px;
    }

    @keyframes change03 {
        from {
            width: 0px;
            height: 0px;
            opacity: 1;
        }

        to {
            width: 80px;
            height: 80px;
            opacity: 1;
        }
    }

    .ac02 {
        top: 35%;
        width: 50px;
        height: 50px;
    }

    @keyframes change02 {
        from {
            width: 0px;
            height: 0px;
            opacity: 1;
        }

        to {
            width: 50px;
            height: 50px;
            opacity: 1;
        }
    }

    .ac04 {
        top: 37%;
        width: 50px;
        height: 50px;
    }

    @keyframes change04 {
        from {
            width: 0px;
            height: 0px;
            opacity: 1;
        }

        to {
            width: 50px;
            height: 50px;
            opacity: 1;
        }
    }

    .ac05 {
        top: 28%;
        width: 100px;
        height: 100px;
    }

    @keyframes change05 {
        from {
            width: 0px;
            height: 0px;
            opacity: 1;
        }

        to {
            width: 100px;
            height: 100px;
            opacity: 1;
        }
    }

}

@media screen and (max-width: 1100px) {
    .ac01 {
        top: 25%;
        width: 100px;
        height: 100px;
    }

    @keyframes change {
        from {
            width: 0px;
            height: 0px;
            opacity: 1;
        }

        to {
            width: 100px;
            height: 100px;
            opacity: 1;
        }
    }

    .ac03 {
        top: 30%;
        width: 70px;
        height: 70px;
    }

    @keyframes change03 {
        from {
            width: 0px;
            height: 0px;
            opacity: 1;
        }

        to {
            width: 70px;
            height: 70px;
            opacity: 1;
        }
    }
}

@media screen and (max-width: 850px) {
    .ac01 {
        top: 23%;
        width: 70px;
        height: 70px;
        left: 5%;
    }

    @keyframes change {
        from {
            width: 0px;
            height: 0px;
            opacity: 1;
        }

        to {
            width: 70px;
            height: 70px;
            opacity: 1;
        }
    }

    .ac02 {
        top: 29%;
        width: 40px;
        height: 40px;
    }

    @keyframes change02 {
        from {
            width: 0px;
            height: 0px;
            opacity: 1;
        }

        to {
            width: 40px;
            height: 40px;
            opacity: 1;
        }
    }

    .ac03 {
        left: 65%;
        top: 9%;
    }

    .ac04 {
        top: 26%;
        width: 30px;
        height: 30px;
        left: 64%;
    }

    @keyframes change04 {
        from {
            width: 0px;
            height: 0px;
            opacity: 1;
        }

        to {
            width: 30px;
            height: 30px;
            opacity: 1;
        }
    }

    .ac05 {
        top: 26%;
        left: 97%;
        width: 70px;
        height: 70px;
    }

    @keyframes change05 {
        from {
            width: 0px;
            height: 0px;
            opacity: 1;
        }

        to {
            width: 70px;
            height: 70px;
            opacity: 1;
        }
    }

}

@media screen and (max-width: 650px) {
    .ac01 {
        top: 20%;
        width: 85px;
        height: 85px;
        left: 4%;
    }

    @keyframes change {
        from {
            width: 0px;
            height: 0px;
            opacity: 1;
        }

        to {
            width: 85px;
            height: 85px;
            opacity: 1;
        }
    }

    .ac03 {
        left: 65%;
        top: 9%;
        width: 130px;
        height: 130px;
    }

    @keyframes change03 {
        from {
            width: 0px;
            height: 0px;
            opacity: 1;
        }

        to {
            width: 130px;
            height: 130px;
            opacity: 1;
        }
    }

    .ac04 {
        top: 27%;
        width: 60px;
        height: 60px;
        left: 64%;
    }

    @keyframes change04 {
        from {
            width: 0px;
            height: 0px;
            opacity: 1;
        }

        to {
            width: 60px;
            height: 60px;
            opacity: 1;
        }
    }

    .ac02 {
        display: none;
    }

    .ac05 {
        top: 16%;
        left: 97%;
        width: 85px;
        height: 85px;
    }

    @keyframes change05 {
        from {
            width: 0px;
            height: 0px;
            opacity: 1;
        }

        to {
            width: 85px;
            height: 75px;
            opacity: 1;
        }
    }
}

@media screen and (max-width: 450px) {
    .ac01 {
        top: 20%;
        width: 80px;
        height: 80px;
    }

    @keyframes change {
        from {
            width: 0px;
            height: 0px;
            opacity: 1;
        }

        to {
            width: 80px;
            height: 80px;
            opacity: 1;
        }
    }

    .ac03 {
        top: 9%;
        width: 98px;
        height: 86px;
    }

    @keyframes change03 {
        from {
            width: 0px;
            height: 0px;
            opacity: 1;
        }

        to {
            width: 98px;
            height: 86px;
            opacity: 1;
        }
    }

    .ac04 {
        top: 22%;
        width: 50px;
        height: 50px;
        left: 62%;
    }

    @keyframes change04 {
        from {
            width: 0px;
            height: 0px;
            opacity: 1;
        }

        to {
            width: 50px;
            height: 50px;
            opacity: 1;
        }
    }

    .ac05 {
        top: 24%;
        left: 78%;
        width: 40px;
        height: 40px;
    }

    @keyframes change05 {
        from {
            width: 0px;
            height: 0px;
            opacity: 1;
        }

        to {
            width: 40px;
            height: 40px;
            opacity: 1;
        }
    }
}