@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 {
    position: relative;
    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: -65px;
    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 {
}
/*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;
    ;
}




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

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

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

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

    .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)
}

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

    .reason_width .arrow {
    }

    .reason_width h2 {
        color: #c72833;
    }

    .reason_width h3 {
        color: #c72833;
    }

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

.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 #c72833 solid;
        display: block;
        margin: 0 auto;
    }

    .method_width h2 {
        color: #ffdf61;
    }

    .method_width p {
        color: #FFF;
    }

/* ↓↓↓↓ pad 豎屏時, 頁面顯示尺寸 971 < x <1030 時,顯示效果 ↓↓↓↓ 
@media (min-width: 971px) and (max-width:990px) {
    .reason002 {
        max-width:50%;
    }
}*/


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

    /*BANNER*/
    /*背景*/
    .banner001 {
        width: 100%;
        /* max-width: 1920px; */
        min-width: 781px;
        height: auto;
    }
    /*背景min*/
    .banner001_1 {
        display: none;
    }
    /*人*/
    .banner002 {
        width: 28vw;
        height: auto;
        position: absolute;
        z-index: 11;
        display: block; /* top: 0%; */
        left: 5%; /* max-width:565px; */
        bottom: 10%;
    }
    /*106年*/
    .banner003 {
        width: 33vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 14%;
        left: 38%;
        max-width: 711px;
    }

    /*萬元補助輕鬆學*/
    .banner004 {
        width: 40vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 27%;
        left: 38%;
        max-width: 838px;
    }

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

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

    /*紅色*/
    .banner011 {
        width: 100%;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 90%;
        left: 0%;
        /* max-width: 1920px; */
    }

    .banner011_1 {
        display: none;
    }

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

    .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;
    }

    /*你該學好日語的三大理由*/
    .reason002 {
        max-width: 80%;
    }

    .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 豎屏時, 頁面顯示尺寸 300 < x <959 時,顯示效果 ↓↓↓↓  */

@media (min-width: 300px) and (max-width:959px) {
    /*BANNER*/
    /*背景*/
    .banner001 {
        display: none;
    }
    /*背景min*/
    .banner001_1 {
        width: 100%;
        max-width: 960px;
        min-width: 280px;
        height: auto;
    }
    /*人*/
    .banner002 {
        width: 51vw;
        height: auto;
        position: absolute;
        z-index: 11;
        display: block;
        top: 45%;
        left: 2%;
        max-width: 565px;
    }
    /*106年*/
    .banner003 {
        width: 73vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 5%;
        left: 14%;
        max-width: 904px;
    }

    /*萬元補助輕鬆學*/
    .banner004 {
        width: 80vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 14%;
        left: 11%;
        max-width: 838px;
    }


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

    .banner005_1 {
        width: 52vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 24%;
        left: 40%;
        max-width: 542px;
    }
    /*方塊1*/
    .banner006 {
        width: 51vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 62%;
        left: 42%;
        max-width: 594px;
    }

    /*綠色*/
    .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;
    }

    /*你該學好日語的三大理由*/
    .reason002 {
        max-width: 70%;
    }

    .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) {
}