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

* {
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
    -ms-transition: all 0.6s;
    -o-transition: all 0.6s;
    transition: all 0.6s;
}

body {
    background-repeat: repeat;
    font-family: "微軟正黑體";
    background-color: #d5892e;
}

.NO {
    display: none;
}
/* wow進場後額外繼續輪播的動畫 */
.myAni {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

    .myAni.infinite {
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
    }

    .myAni.hinge {
        -webkit-animation-duration: 2s;
        animation-duration: 2s;
    }

    .myAni.infinite.pulse {
        /*animation-delay: 2s;*/
        -webkit-animation-name: pulse !important;
        animation-name: pulse !important;
    }
/*頁首頁尾CSS共用----------------請勿砍*/
.top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 280px;
    margin-bottom: -256px;
    z-index: 9999999999999;
}

.top iframe {
    height: 280px;
}

.top + * {
    margin-top: 65px;
}

.footer {
    width: 100%;
    height: 290px;
    z-index: 9999999999999;
}

.footer iframe {
    height: 319px;
}

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

    .top {
        height: 65px;
        /*margin-bottom: 405px;*/
    }

    .top iframe {
        height: 65px;
    }
  
    .footer, .footer iframe {
        height: 624px;
    }
}
/*
.top, .footer {
    line-height: 0px;
    width: 100%;
}

.top {
    z-index: 99;
    position: relative;
}
*/
.wapper {
    overflow: hidden;
}
/* BANNER區 */
.banner {
    position: relative;
}

/*BANNER*/
/*人*/
.banner002 {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}
/*105年*/
.banner003 {
    -webkit-animation-delay: 0.3s; /* Chrome, Safari, Opera */
    animation-delay: 0.3s;
}
/*小字*/
.banner005 {
    -webkit-animation-delay: 0.8s; /* Chrome, Safari, Opera */
    animation-delay: 0.8s;
}

.banner005_1 {
    -webkit-animation-delay: 0.8s; /* Chrome, Safari, Opera */
    animation-delay: 0.8s;
}
/*方塊1*/
.banner006 {
    -webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
    animation-delay: 1s;
    ;
}

/*方塊2*/
.banner007 {
    -webkit-animation-delay: 1.2s; /* Chrome, Safari, Opera */
    animation-delay: 1.2s;
    ;
}

/*方塊3*/
.banner008 {
    -webkit-animation-delay: 1.4s; /* Chrome, Safari, Opera */
    animation-delay: 1.4s;
    ;
}

/*方塊4*/
.banner009 {
    -webkit-animation-delay: 1.6s; /* Chrome, Safari, Opera */
    animation-delay: 1.6s;
    ;
}

/*很多物件通用*/
.BRR {
    height: 0px;
}



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

/*表單區*/
.fill {
    background-color: #d5892e;
    text-align: center;
}

.Yellow_background {
    background-image: url(../images/Yellow_background.jpg);
}

.fill_width {
    display: block;
    max-width: 950px;
    min-width: 280px;
    margin: 30px auto;
    position: relative;
}

.width1280 h2 {
    margin-bottom: 0px;
    font-size: 40px;
    font-weight: bold;
    color: #000000;
}

.width1280 .important {
    font-size: 30px;
    font-weight: bold;
    color: #052bb9;
    line-height: 0.3em;
    margin-top: 20px;
    margin-bottom: 20px;
}

.statement-txt {
    margin-top: 20px;
}

.statement a {
    color: #000;
    text-decoration: none;
}

.fill_width .form-control {
    margin-top: 5px;
    color: #d5892e;
}

.formarea {
    margin-top: 50px;
}

img.book {
    max-width: 414px;
    width: 98%;
    height: auto;
}

/*.fill_width img.book{ max-width:410px; min-width:260px; width:100%; height:auto;}
.fill_width img.free{ position:absolute; -webkit-animation-duration: 2s; * Chrome, Safari, Opera*
    animation-duration: 2s;}*/

.share {
    display: block;
    margin: 0 auto;
}

    .share ul.share-buttons {
        overflow: auto;
        display: block;
        width: 280px;
        margin: 0 auto;
    }

        .share ul.share-buttons li {
            float: left;
            padding-left: 10px;
            list-style: none;
        }
/*你該學好日語的三大理由*/
.reason {
    background-image: url(../images/city.jpg);
    background-size: cover;
    background-position: center bottom;
}

.reason_width {
    max-width: 1280px;
    min-width: 280px;
    margin: 0 auto;
    text-align: center;
}

    .reason_width .arrow {
    }

    .reason_width h2 {
        color: #9b0c1a;
    }

    .reason_width h3 {
        color: #af292c;
    }

    .reason_width p {
        color: #000
    }
/*你該用更好的方法學好日文*/
.method {
    background-color: #128ac3;
}

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

    .method_width h4 {
        color: #ffffff;
        text-align: center;
        s
    }

    .method_width img.photo {
        border: 15px #aaaaaa solid;
        display: block;
        margin: 0 auto;
    }

    .method_width h2 {
        color: #FC0;
    }

    .method_width p {
        color: #FFF;
    }


/*  ↓↓↓↓    螢幕尺寸大於2580時頁面顯示效果↓↓↓↓    */
@media (min-width: 2560px) {
    /*BANNER*/
    /*背景*/
    .banner001 {
        width: 100vw;
        height: auto;
    }

    /*背景min*/
    .banner001_1 {
        display: none;
    }
    /*人*/
    .banner002 {
        width: 21.5vw;
        height: auto;
        position: absolute;
        z-index: 11;
        display: block; /* top: 0%; */
        left: 5%;
        max-width: 750px;
        bottom: 0%;
    }

    .banner003 {
        width: 46vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 13%;
        left: 32%;
        max-width: 904px;
    }

    /*小字*/
    .banner005 {
        width: 63vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 28%;
        left: 29.2%;
        max-width: 1259px;
    }

    .banner005_1 {
        display: none;
    }

    /*方塊1*/
    .banner006 {
        width: 13vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 55%;
        left: 27%;
        max-width: 290px;
    }

    /*方塊2*/
    .banner007 {
        width: 13vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 55%;
        left: 40%;
        max-width: 290px;
    }

    /*方塊3*/
    .banner008 {
        width: 13vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 55%;
        left: 53%;
        max-width: 290px;
    }

    /*方塊4*/
    .banner009 {
        width: 13vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 55%;
        left: 66%;
        max-width: 290px;
    }


    /*綠色*/
    .banner011 {
        bottom: 0;
        width: 100%;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        right: 0;
        max-width: 1920px;
    }

    .banner011_1 {
        display: none;
    }

    /*表單區*/
    .Yellow_background {
        width: 98%;
        -webkit-border-top-right-radius: 200px;
        -webkit-border-bottom-right-radius: 200px;
        -moz-border-radius-topright: 200px;
        -moz-border-radius-bottomright: 200px;
        border-top-right-radius: 200px;
        border-bottom-right-radius: 200px;
    }

    .fill_width img.fill_title001 {
        max-width: 764px;
        min-width: 600px;
        width: 100%;
        height: auto;
    }

    .fill_width img.fill_title001_1 {
        display: none
    }

    .fill_width img.free {
        display: none;
    }


    /*你該學好日語的三大理由*/
    .reason_width .arrow {
        margin-top: 80px;
        transform: rotate(0deg);
        -ms-transform: rotate(0deg); /* IE 9 */
        -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
    }

    .reason_width h2 {
        font-size: 40px;
    }

    .reason_width h3 {
        font-size: 28px;
    }

    .reason_width p {
        font-size: 18px;
    }

    /*你該用更好的方法學好日文*/
    .method_width {
        padding-top: 25px;
        padding-bottom: 25px;
    }

        .method_width h4 {
            font-size: 40px;
            line-height: 45px;
            margin-bottom: 25px;
        }

        .method_width h2 {
            font-size: 28px;
            text-align: left;
        }

        .method_width p {
            font-size: 18px;
            text-align: left;
        }
}


/*  ↓↓↓↓    螢幕尺寸大於960時頁面顯示效果↓↓↓↓     */
@media (min-width: 960px) and (max-width:2559px) {
    /*BANNER*/
    /*背景*/
    .banner001 {
        width: 100%;
        /* max-width: 1920px; */
        min-width: 781px;
        height: auto;
    }
    /*背景min*/
    .banner001_1 {
        display: none;
    }
    /*人*/
    .banner002 {
        width: 21.5vw;
        height: auto;
        position: absolute;
        z-index: 11;
        display: block; /* top: 0%; */
        left: 5%;
        max-width: 750px;
        bottom: 0%;
    }
    /*105年*/
    .banner003 {
        width: 46vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 13%;
        left: 27%;
        max-width: 904px;
    }

    /*小字*/
    .banner005 {
        width: 63vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 28%;
        left: 24.2%;
        max-width: 1259px;
    }

    .banner005_1 {
        display: none;
    }
    /*方塊1*/
    .banner006 {
        width: 13vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 55%;
        left: 27%;
        max-width: 290px;
    }

    /*方塊2*/
    .banner007 {
        width: 13vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 55%;
        left: 40%;
        max-width: 290px;
    }

    /*方塊3*/
    .banner008 {
        width: 13vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 55%;
        left: 53%;
        max-width: 290px;
    }

    /*方塊4*/
    .banner009 {
        width: 13vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 55%;
        left: 66%;
        max-width: 290px;
    }


    /*綠色*/
    .banner011 {
        width: 100%;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        bottom: 0;
        right: 0%;
        max-width: 1920px;
    }

    .banner011_1 {
        display: none;
    }

    /*表單區*/
    .Yellow_background {
        width: 98%;
        -webkit-border-top-right-radius: 200px;
        -webkit-border-bottom-right-radius: 200px;
        -moz-border-radius-topright: 200px;
        -moz-border-radius-bottomright: 200px;
        border-top-right-radius: 200px;
        border-bottom-right-radius: 200px;
    }

    .fill_width img.fill_title001 {
        max-width: 764px;
        min-width: 600px;
        width: 100%;
        height: auto;
    }

    .fill_width img.fill_title001_1 {
        display: none
    }

    .fill_width img.free {
        display: none;
    }


    /*你該學好日語的三大理由*/
    .reason_width .arrow {
        margin-top: 80px;
        transform: rotate(0deg);
        -ms-transform: rotate(0deg); /* IE 9 */
        -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
    }

    .reason_width h2 {
        font-size: 40px;
    }

    .reason_width h3 {
        font-size: 28px;
    }

    .reason_width p {
        font-size: 18px;
    }

    /*你該用更好的方法學好日文*/
    .method_width {
        padding-top: 25px;
        padding-bottom: 25px;
    }

        .method_width h4 {
            font-size: 40px;
            line-height: 45px;
            margin-bottom: 25px;
        }

        .method_width h2 {
            font-size: 28px;
            text-align: left;
        }

        .method_width p {
            font-size: 18px;
            text-align: left;
        }
}
/* ↓↓↓↓ pad 豎屏時, 頁面顯示尺寸 481 < x <959 時,顯示效果 ↓↓↓↓  */

@media (min-width: 481px) and (max-width:959px) {
    /*BANNER*/
    /*背景*/
    .banner001 {
        display: none;
    }
    /*背景min*/
    .banner001_1 {
        width: 100%;
        max-width: 960px;
        min-width: 280px;
        height: auto;
    }
    /*人*/
    .banner002 {
        width: 44vw;
        height: auto;
        position: absolute;
        z-index: 11;
        display: block;
        top: 20%;
        left: 0%;
        max-width: 770px;
    }
    /*105年*/
    .banner003 {
        width: 99vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 3%;
        left: 0.6%;
        max-width: 904px;
    }

    /*小字*/
    .banner005 {
        display: none;
    }

    .banner005_1 {
        width: 58vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 15%;
        left: 37%;
        max-width: 542px;
    }
    /*方塊1*/
    .banner006 {
        width: 26vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 58%;
        left: 41%;
        max-width: 290px;
    }

    /*方塊2*/
    .banner007 {
        width: 26vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 58%;
        left: 68%;
        max-width: 290px;
    }

    /*方塊3*/
    .banner008 {
        width: 26vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 74%;
        left: 41%;
        max-width: 290px;
    }

    /*方塊4*/
    .banner009 {
        width: 26vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 74%;
        left: 68%;
        max-width: 290px;
    }

    /*綠色*/
    .banner011 {
        display: none;
    }

    .banner011_1 {
        width: 100vw;
        height: auto;
        position: absolute;
        z-index: 13;
        display: block;
        /* top: 90%; */
        left: 0%;
        max-width: 960px;
        width: 100%;
        bottom: 0px;
    }


    /*表單區*/
    .Yellow_background {
        width: 100%;
        -webkit-border-top-right-radius: 0px;
        -webkit-border-bottom-right-radius: 0px;
        -moz-border-radius-topright: 0px;
        -moz-border-radius-bottomright: 0px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    .fill_width img.fill_title001 {
        display: none;
    }

    .fill_width img.fill_title001_1 {
        max-width: 480px;
        min-width: 280px;
        width: 100%;
        height: auto;
    }

    .fill_width img.free {
        display: none;
    }



    /*你該學好日語的三大理由*/
    .reason_width .arrow {
        -ms-transform: rotate(90deg); /* IE 9 */
        -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
        transform: rotate(90deg);
    }

    .reason_width h2 {
        font-size: 28px;
    }

    .reason_width h3 {
        font-size: 22px;
    }

    .reason_width p {
        font-size: 18px;
    }

    /*你該用更好的方法學好日文*/
    .method_width {
        padding-top: 0px;
        padding-bottom: 0px;
    }

        .method_width h4 {
            font-size: 30px;
            margin-bottom: 25px;
        }

        .method_width h2 {
            font-size: 22px;
            text-align: center;
        }

        .method_width p {
            font-size: 18px;
            text-align: center;
            padding-bottom: 25px;
        }
}

@media (min-width: 300px) and (max-width:480px) {
    /*BANNER*/
    /*背景*/
    .banner001 {
        display: none;
    }
    /*背景min*/
    .banner001_1 {
        width: 100%;
        max-width: 960px;
        min-width: 280px;
        height: auto;
    }
    /*人*/
    .banner002 {
        width: 44vw;
        height: auto;
        position: absolute;
        z-index: 11;
        display: block;
        top: 20%;
        left: 0%;
        max-width: 770px;
    }
    /*105年*/
    .banner003 {
        width: 99vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 3%;
        left: 0.6%;
        max-width: 904px;
    }

    /*小字*/
    .banner005 {
        display: none;
    }

    .banner005_1 {
        width: 58vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 15%;
        left: 37%;
        max-width: 542px;
    }
    /*方塊1*/
    .banner006 {
        width: 26vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 58%;
        left: 41%;
        max-width: 290px;
    }

    /*方塊2*/
    .banner007 {
        width: 26vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 58%;
        left: 68%;
        max-width: 290px;
    }

    /*方塊3*/
    .banner008 {
        width: 26vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 74%;
        left: 41%;
        max-width: 290px;
    }

    /*方塊4*/
    .banner009 {
        width: 26vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 74%;
        left: 68%;
        max-width: 290px;
    }

    /*綠色*/
    .banner011 {
        display: none;
    }

    .banner011_1 {
        width: 100vw;
        height: auto;
        position: absolute;
        z-index: 13;
        display: block;
        /* top: 90%; */
        left: 0%;
        max-width: 960px;
        width: 100%;
        bottom: 0px;
    }

    /*表單區*/
    .Yellow_background {
        width: 100%;
        -webkit-border-top-right-radius: 0px;
        -webkit-border-bottom-right-radius: 0px;
        -moz-border-radius-topright: 0px;
        -moz-border-radius-bottomright: 0px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    .fill_width img.fill_title001 {
        display: none;
    }

    .fill_width img.fill_title001_1 {
        max-width: 480px;
        min-width: 280px;
        width: 100%;
        height: auto;
    }

    .fill_width img.free {
        display: none;
    }

    .block {
        display: block;
    }

    /*你該學好日語的三大理由*/
    .reason_width .arrow {
        -ms-transform: rotate(90deg); /* IE 9 */
        -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
        transform: rotate(90deg);
    }

    .reason_width h2 {
        font-size: 28px;
    }

    .reason_width h3 {
        font-size: 22px;
    }

    .reason_width p {
        font-size: 18px;
    }

    /*你該用更好的方法學好日文*/
    .method_width {
        padding-top: 0px;
        padding-bottom: 0px;
    }

        .method_width h4 {
            font-size: 30px;
            margin-bottom: 25px;
        }

        .method_width h2 {
            font-size: 22px;
            text-align: center;
        }

        .method_width p {
            font-size: 18px;
            text-align: center;
            padding-bottom: 25px;
        }

    /*手機板的FOOTER------別刪除*/
    .FOOTER_frame {
        height: 450px;
    }
}

/*========================================================*/
@media only screen and (max-width: 1280px) {
}
/*↓↓↓↓ *螢幕尺寸【大於於】768時頁面顯示效果 ↓↓↓↓ */
@media (max-width: 768px) {
}

/*↓↓↓↓  螢幕尺寸【大於】481時頁面顯示效果  ↓↓↓↓ */
@media (min-width: 481px) {
}


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

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

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

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