@charset "utf-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);

@font-face {
    font-family: 'Noto Sans TC';
    font-style: normal;
    font-weight: 100;
    /*src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.otf) format('opentype');*/
}

@font-face {
    font-family: 'Noto Sans TC';
    font-style: normal;
    font-weight: 300;
    /*src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.otf) format('opentype');*/
}

@font-face {
    font-family: 'Noto Sans TC';
    font-style: normal;
    font-weight: 400;
    /*src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.otf) format('opentype');*/
}

@font-face {
    font-family: 'Noto Sans TC';
    font-style: normal;
    font-weight: 500;
    /*src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.otf) format('opentype');*/
}

@font-face {
    font-family: 'Noto Sans TC';
    font-style: normal;
    font-weight: 700;
    /*src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.otf) format('opentype');*/
}

@font-face {
    font-family: Arial, 'Noto Sans TC';
    font-style: normal;
    font-weight: 900;
    /*src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.otf) format('opentype');*/
}

body {
    background-repeat: repeat;
    font-family: arial, "Noto Sans TC", "sans", "sans-serif" ! important;
}


/* 這是設定所有放大縮小的物件是使用移動方式變化 */
.tra {
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
    -ms-transition: all 0.6s;
    -o-transition: all 0.6s;
    transition: all 0.6s;
}

.wapper {
    width: 100%;
    overflow: hidden;
}

.width1280 {
    max-width: 1280px;
    min-width: 280px;
    height: auto;
    margin: 0 auto;
}

/*	↓↓↓↓	螢幕尺寸大於960時頁面顯示效果↓↓↓↓	 */
@media (min-width: 960px) {
    .analysis {
        background-color: #efefef;
        width: 100%;
        height: auto;
        padding-top: 50px;
    }

    .orange_top {
        background-color: #fff;
        width: 100%;
        height: 100px;
        border-bottom: #009ade 10px solid;
    }

    .orange_bottom {
        width: 100%;
        height: auto;
    }

    img.footer {
        display: block;
        width: 100%;
        height: auto;
        margin: 0 auto;
    }

    img.footer_mb {
        display: none;
    }

    .logo {
        display: block;
        width: 300px;
        height: auto;
        margin: 0 auto;
    }

    .big_title h1 {
        text-align: center;
        font-size: 3.5em;
        letter-spacing: 0.15em;
        font-weight: bold;
        padding-bottom: 25px;
    }

    img.box_title {
        display: block;
        margin: 0 auto;
        width: 50vw;
        height: auto;
    }

    img.box_title_mb {
        display: none;
    }

    img.box_footer {
        display: block;
        margin: 0 auto;
        width: 50vw;
        height: auto;
        margin-bottom: 50px;
    }

    .box_inner {
        background-image: url(../images/box_inner_bg.png);
        background-repeat: repeat-y;
        background-size: contain;
        width: 50vw;
        height: auto;
        padding-top: 50px;
        margin: 0 auto;
        text-align: center;
    }

    img.exclusive {
        width: 138px;
        height: auto;
        margin-right: 45%;
    }

    .inner {
        padding-right: 75px;
        padding-left: 75px;
        margin-top: 50px;
        margin-bottom: 50px;
    }

    .inner2 {
        padding-right: 75px;
        padding-left: 75px;
        margin-top: 50px;
    }

    .box_inner h1 span {
        background-image: linear-gradient(-100deg, rgba(255, 255, 255, 0), yellow 85%, rgba(255, 255, 255, 0));
        font-size: 0.95em;
    }

    .box_inner h2 {
        text-align: center;
    }

    .box_inner p {
        text-align: center;
        font-size: 1.5em;
        line-height: 1em;
    }

    .math_rectangle {
        width: 200px;
        height: 10px;
        background-color: #f96a66;
        margin: 0 auto;
    }

    .science_rectangle {
        width: 200px;
        height: 10px;
        background-color: #fed36b;
        margin: 0 auto;
    }

    .english_rectangle {
        width: 200px;
        height: 10px;
        background-color: #1954a0;
        margin: 0 auto;
    }
}

/* ↓↓↓↓ pad 豎屏時, 頁面顯示尺寸 300 < x <1023 時,顯示效果 ↓↓↓↓  */
@media (min-width: 300px) and (max-width:960px) {
    .orange_top {
        background-color: #fff;
        width: 100%;
        height: 100px;
        border-bottom: #009ade 10px solid;
        padding-top: 0.9%;
    }

    .logo {
        display: block;
        width: 600px;
        height: auto;
        margin: 0 auto;
    }

    .analysis {
        background-color: #efefef;
        width: 100%;
        height: auto;
        padding-top: 10px;
    }

    .orange_bottom {
        width: 100%;
        height: auto;
    }

    img.footer {
        display: none;
    }

    img.footer_mb {
        display: block;
        width: 100%;
        height: auto;
    }

    .big_title h1 {
        text-align: center;
        font-size: 3.5em;
        letter-spacing: 0.075em;
        font-weight: bold;
    }

    img.box_title {
        display: none;
    }

    img.box_title_mb {
        display: block;
        margin: 0 auto;
        width: 85vw;
        height: auto;
    }

    img.box_footer {
        display: block;
        margin: 0 auto;
        width: 85vw;
        height: auto;
        margin-bottom: 50px;
    }

    .box_inner {
        background-image: url(../images/box_inner_bg.png);
        background-repeat: repeat-y;
        background-size: contain;
        width: 85vw;
        height: auto;
        padding-top: 30px;
        margin: 0 auto;
        text-align: center;
    }

    .inner {
        padding-right: 60px;
        padding-left: 60px;
        margin-top: 25px;
        margin-bottom: 10px;
        margin-top: 50px;
    }

    .inner2 {
        padding-right: 45px;
        padding-left: 45px;
        margin-top: 10px;
    }

    .box_inner h1 span {
        background-image: linear-gradient(-100deg, rgba(255, 255, 255, 0), yellow 85%, rgba(255, 255, 255, 0));
        font-size: 1em;
    }

    img.exclusive {
        width: 150px;
        height: auto;
        margin-right: 50%;
        margin-bottom: -3%;
    }

    .box_inner h2 {
        text-align: center;
        font-size: 2.5em;
    }

    .box_inner p {
        text-align: center;
        font-size: 2em;
        line-height: 1em;
    }

    img.exclusive_pdf {
        width: 25vw;
        height: auto;
    }

    .box_inner h3 {
        text-align: center;
        font-size: 2em;
    }

    img.pdf_icon {
        width: 15vw;
        height: auto;
    }

    .math_rectangle {
        width: 250px;
        height: 8px;
        background-color: #f96a66;
        margin: 0 auto;
        margin-bottom: 40px;
    }

    .science_rectangle {
        width: 250px;
        height: 8px;
        background-color: #fed36b;
        margin: 0 auto;
        margin-bottom: 40px;
    }

    .english_rectangle {
        width: 250px;
        height: 8px;
        background-color: #1954a0;
        margin: 0 auto;
        margin-bottom: 50px;
    }
}

/*========================================================*/
@media only screen and (max-width: 1280px) {}

/*↓↓↓↓ *螢幕尺寸【大於於】768時頁面顯示效果	↓↓↓↓ */
@media (max-width: 768px) {
    .orange_top {
        background-color: #fff;
        width: 100%;
        height: 100px;
        border-bottom: #009ade 10px solid;
        padding-top: 0.9%;
    }

    .logo {
        display: block;
        width: 600px;
        height: auto;
        margin: 0 auto;
    }

    .analysis {
        background-color: #efefef;
        width: 100%;
        height: auto;
        padding-top: 10px;
    }

    .orange_bottom {
        width: 100%;
        height: auto;
    }

    img.footer {
        display: none;
    }

    img.footer_mb {
        display: block;
        width: 100%;
        height: auto;
    }

    .big_title h1 {
        text-align: center;
        font-size: 3.5em;
        letter-spacing: 0.075em;
        font-weight: bold;
    }

    img.box_title {
        display: none;
    }

    img.box_title_mb {
        display: block;
        margin: 0 auto;
        width: 85vw;
        height: auto;
    }

    img.box_footer {
        display: block;
        margin: 0 auto;
        width: 85vw;
        height: auto;
        margin-bottom: 50px;
    }

    .box_inner {
        background-image: url(../images/box_inner_bg.png);
        background-repeat: repeat-y;
        background-size: contain;
        width: 85vw;
        height: auto;
        padding-top: 30px;
        margin: 0 auto;
        text-align: center;
    }

    .inner {
        padding-right: 60px;
        padding-left: 60px;
        margin-top: 25px;
        margin-bottom: 10px;
        margin-top: 50px;
    }

    .inner2 {
        padding-right: 45px;
        padding-left: 45px;
        margin-top: 10px;
    }

    .box_inner h1 span {
        background-image: linear-gradient(-100deg, rgba(255, 255, 255, 0), yellow 85%, rgba(255, 255, 255, 0));
        font-size: 1em;
    }

    img.exclusive {
        width: 150px;
        height: auto;
        margin-right: 50%;
        margin-bottom: -3%;
    }

    .box_inner h2 {
        text-align: center;
        font-size: 2.5em;
    }

    .box_inner p {
        text-align: center;
        font-size: 2em;
        line-height: 1em;
    }

    img.exclusive_pdf {
        width: 25vw;
        height: auto;
    }

    .box_inner h3 {
        text-align: center;
        font-size: 2em;
    }

    img.pdf_icon {
        width: 15vw;
        height: auto;
    }

    .math_rectangle {
        width: 250px;
        height: 8px;
        background-color: #f96a66;
        margin: 0 auto;
        margin-bottom: 40px;
    }

    .science_rectangle {
        width: 250px;
        height: 8px;
        background-color: #fed36b;
        margin: 0 auto;
        margin-bottom: 40px;
    }

    .english_rectangle {
        width: 250px;
        height: 8px;
        background-color: #1954a0;
        margin: 0 auto;
        margin-bottom: 50px;
    }
}

/*↓↓↓↓ 	螢幕尺寸【大於】481時頁面顯示效果	↓↓↓↓ */
@media (min-width: 481px) {
    .orange_top {
        background-color: #fff;
        width: 100%;
        height: 85px;
        border-bottom: #009ade 10px solid;
        padding: 20px;
    }

    .logo {
        display: block;
        width: 250px;
        height: auto;
        margin: 0 auto;
    }

    .analysis {
        background-color: #efefef;
        width: 100%;
        height: auto;
        padding-top: 100px;
    }

    .orange_bottom {
        width: 100%;
        height: auto;
    }

    img.footer {
        display: none;
    }

    img.footer_mb {
        display: block;
        width: 100%;
        height: auto;
    }

    .big_title h1 {
        text-align: center;
        font-size: 3.5em;
        letter-spacing: 0.075em;
        font-weight: bold;
    }

    img.box_title {
        display: none;
    }

    img.box_title_mb {
        display: block;
        margin: 0 auto;
        width: 85vw;
        height: auto;
    }

    img.box_footer {
        display: block;
        margin: 0 auto;
        width: 85vw;
        height: auto;
        margin-bottom: 50px;
    }

    .box_inner {
        background-image: url(../images/box_inner_bg.png);
        background-repeat: repeat-y;
        background-size: contain;
        width: 85vw;
        height: auto;
        padding-top: 30px;
        margin: 0 auto;
        text-align: center;
    }

    .inner {
        padding-right: 60px;
        padding-left: 60px;
        margin-top: 25px;
        margin-bottom: 10px;
        margin-top: 50px;
    }

    .inner2 {
        padding-right: 45px;
        padding-left: 45px;
        margin-top: 10px;
    }

    .box_inner h1 span {
        background-image: linear-gradient(-100deg, rgba(255, 255, 255, 0), yellow 85%, rgba(255, 255, 255, 0));
        font-size: 1em;
    }

    img.exclusive {
        width: 150px;
        height: auto;
        margin-right: 50%;
        margin-bottom: -3%;
    }

    .box_inner h2 {
        text-align: center;
        font-size: 2.5em;
    }

    .box_inner p {
        text-align: center;
        font-size: 2em;
        line-height: 1em;
    }

    img.exclusive_pdf {
        width: 25vw;
        height: auto;
    }

    .box_inner h3 {
        text-align: center;
        font-size: 2em;
    }

    img.pdf_icon {
        width: 15vw;
        height: auto;
    }

    .math_rectangle {
        width: 250px;
        height: 8px;
        background-color: #f96a66;
        margin: 0 auto;
        margin-bottom: 40px;
    }

    .science_rectangle {
        width: 250px;
        height: 8px;
        background-color: #fed36b;
        margin: 0 auto;
        margin-bottom: 40px;
    }

    .english_rectangle {
        width: 250px;
        height: 8px;
        background-color: #1954a0;
        margin: 0 auto;
        margin-bottom: 50px;
    }
}


/*↓↓↓↓ 	螢幕尺寸【小於】480時頁面顯示效果	↓↓↓↓ */
@media (max-width: 480px) {
    .analysis {
        background-color: #efefef;
        width: 100%;
        height: auto;
        padding-top: 85px;
    }

    .orange_top {
        background-color: #fff;
        width: 100%;
        height: 50px;
        border-bottom: #009ade 10px solid;
        padding: 10px;
    }

    .logo {
        display: block;
        width: 150px;
        height: auto;
        margin: 0 auto;
    }

    .orange_bottom {
        width: 100%;
        height: auto;
    }

    img.footer {
        display: none;
    }

    img.footer_mb {
        display: block;
        width: 100%;
        height: auto;
    }

    .big_title h1 {
        text-align: center;
        font-size: 28px;
        letter-spacing: 0.075em;
        font-weight: bold;
        padding-bottom: 10px
    }

    img.box_title {
        display: none;
    }

    img.box_title_mb {
        display: block;
        margin: 0 auto;
        width: 85vw;
        height: auto;
    }

    img.box_footer {
        display: block;
        margin: 0 auto;
        width: 85vw;
        height: auto;
        margin-bottom: 50px;
    }

    .box_inner {
        background-image: url(../images/box_inner_bg.png);
        background-repeat: repeat-y;
        background-size: contain;
        width: 85vw;
        height: auto;
        padding-top: 20px;
        margin: 0 auto;
        text-align: center;
    }

    .inner {
        padding-right: 20px;
        padding-left: 20px;
        margin-top: 25px;
        margin-bottom: 10px;
    }

    .inner2 {
        padding-right: 30px;
        padding-left: 30px;
        margin-top: 10px;
    }

    .box_inner h1 span {
        background-image: linear-gradient(-100deg, rgba(255, 255, 255, 0), yellow 85%, rgba(255, 255, 255, 0));
        font-size: 0.55em;
    }

    img.exclusive {
        width: 100px;
        height: auto;
        margin-right: 50%;
        margin-bottom: -8%;
    }

    .box_inner h2 {
        text-align: center;
        font-size: 1.25em;
    }

    .box_inner p {
        text-align: center;
        font-size: 0.95em;
        line-height: 1em;
    }

    img.exclusive_pdf {
        width: 25vw;
        height: auto;
    }

    .box_inner h3 {
        text-align: center;
        font-size: 1.25em;
    }

    img.pdf_icon {
        width: 20vw;
        height: auto;
    }

    .math_rectangle {
        width: 150px;
        height: 8px;
        background-color: #f96a66;
        margin: 0 auto;
        margin-bottom: 15px;
    }

    .science_rectangle {
        width: 150px;
        height: 8px;
        background-color: #fed36b;
        margin: 0 auto;
        margin-bottom: 15px;
    }

    .english_rectangle {
        width: 150px;
        height: 8px;
        background-color: #1954a0;
        margin: 0 auto;
    }
}

/*↓↓↓↓ 螢幕尺寸【大於】1024時頁面顯示效果	↓↓↓↓ */
@media (min-width:1024px) {
    .analysis {
        background-color: #efefef;
        width: 100%;
        height: auto;
        padding-top: 120px;
    }

    .orange_top {
        background-color: #fff;
        width: 100%;
        height: 100px;
        border-bottom: #009ade 10px solid;
    }

    .orange_bottom {
        width: 100%;
        height: auto;
    }

    img.footer {
        display: block;
        width: 100%;
        height: auto;
        margin: 0 auto;
    }

    img.footer_mb {
        display: none;
    }

    .logo {
        display: block;
        width: 300px;
        height: auto;
        margin: 0 auto;
    }

    .big_title h1 {
        text-align: center;
        font-size: 3.5em;
        letter-spacing: 0.15em;
        font-weight: bold;
    }

    img.box_title {
        display: block;
        margin: 0 auto;
        width: 50vw;
        height: auto;
    }

    img.box_title_mb {
        display: none;
    }

    img.box_footer {
        display: block;
        margin: 0 auto;
        width: 50vw;
        height: auto;
        margin-bottom: 50px;
    }

    .box_inner {
        background-image: url(../images/box_inner_bg.png);
        background-repeat: repeat-y;
        background-size: contain;
        width: 50vw;
        height: auto;
        padding-top: 50px;
        margin: 0 auto;
        text-align: center;
    }

    img.exclusive {
        width: 138px;
        height: auto;
        margin-right: 45%;
    }

    .inner {
        padding-right: 75px;
        padding-left: 75px;
        margin-top: 50px;
        margin-bottom: 50px;
    }

    .inner2 {
        padding-right: 75px;
        padding-left: 75px;
        margin-top: 50px;
    }

    .box_inner h1 span {
        background-image: linear-gradient(-100deg, rgba(255, 255, 255, 0), yellow 85%, rgba(255, 255, 255, 0));
        font-size: 0.95em;
    }

    .box_inner h2 {
        text-align: center;
    }

    .box_inner p {
        text-align: center;
        font-size: 1.5em;
        line-height: 1em;
    }

    .math_rectangle {
        width: 200px;
        height: 10px;
        background-color: #f96a66;
        margin: 0 auto;
    }

    .science_rectangle {
        width: 200px;
        height: 10px;
        background-color: #fed36b;
        margin: 0 auto;
    }

    .english_rectangle {
        width: 200px;
        height: 10px;
        background-color: #1954a0;
        margin: 0 auto;
    }

    img.exclusive_pdf {
        width: 10vw;
        height: auto;
    }

    img.pdf_icon {
        width: 8vw;
        height: auto;
    }

}

/*	↓↓↓↓ 螢幕尺寸【小於】1024時頁面顯示效果	↓↓↓↓ */
@media (max-width: 1023px) {}

@media only screen and (max-width: 1280px) {}