@charset "utf-8";
/* CSS Document */

* {
    -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: '微軟正黑體', sans-serif;
    background-image: url(../images/bg.jpg);
}
/* 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;
}

.top {
    z-index: 99;
    position: relative;
}
*/

.wapper {
    overflow: auto;
}
/* BANNER區 */
.banner {
    position: relative;
}

/*BANNER*/
/*人*/
.banner002 {
}
/*105年*/
.banner003 {
    -webkit-animation-delay: 0.3s; /* Chrome, Safari, Opera */
    animation-delay: 0.3s;
}
/*五大輔助*/
.banner004 {
    -webkit-animation-delay: 0.5s; /* Chrome, Safari, Opera */
    animation-delay: 0.5s;
}
/*小字*/
.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;
}
/*方塊5*/
.banner010 {
    -webkit-animation-delay: 1.8s; /* Chrome, Safari, Opera */
    animation-delay: 1.8s;
}








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

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

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

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

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

.fill .statement {
    color: #333;
    line-height: 40px;
    font-size: 18px;
}

.fill .swordbook {
    color: #333;
    line-height: 40px;
    font-size: 18px;
}

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

.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: #c72833;
}

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

    .method_width h4 {
        color: #FFF;
        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;
    }

/*全方位日語學習計劃*/
.plan_width {
    max-width: 1280px;
    min-width: 280px;
    margin: 0 auto;
    padding-top: 25px;
    padding-bottom: 25px;
    text-align: center;
}

    .plan_width h3 {
        color: #005691;
    }

    .plan_width h2 {
        color: #005691;
    }

    .plan_width p {
        color: #363636;
    }

/*  ↓↓↓↓    螢幕尺寸大於960時頁面顯示效果↓↓↓↓     */
@media (min-width: 960px) {
    /*BANNER*/
    /*背景*/
    .banner001 {
        width: 100%;
        /* max-width: 1920px; */
        min-width: 781px;
        height: auto;
    }
    /*背景min*/
    .banner001_1 {
        display: none;
    }
    /*人*/
    .banner002 {
        width: 27.3vw;
        height: auto;
        position: absolute;
        z-index: 11;
        display: block;
        top: 8.9%;
        left: 1%; /* max-width: 525px; */
    }
    /*105年*/
    .banner003 {
        width: 28vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 8%;
        left: 28%;
        max-width: 745px;
    }
    /*五大輔助*/
    .banner004 {
        width: 53vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 20%;
        left: 27.8%;
        max-width: 1330px;
    }
    /*小字*/
    .banner005 {
        width: 64vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 38%;
        left: 28%;
        max-width: 1330px;
    }

    .banner005_1 {
        display: none;
    }
    /*方塊1*/
    .banner006 {
        width: 14vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 62%;
        left: 27.5%;
        max-width: 290px;
    }
    /*方塊2*/
    .banner007 {
        width: 14vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 62%;
        left: 41.5%;
        max-width: 290px;
    }
    /*方塊3*/
    .banner008 {
        width: 14vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 62%;
        left: 55.5%;
        max-width: 290px;
    }
    /*方塊4*/
    .banner009 {
        width: 14vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 62%;
        left: 69.5%;
        max-width: 290px;
    }
    /*方塊5*/
    .banner010 {
        width: 14vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 62%;
        left: 83.5%;
        max-width: 290px;
    }
    /*綠色*/
    .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: 900px;
        min-width: 600px;
        width: 100%;
        height: auto;
    }

    .fill_width img.fill_title001_1 {
        display: none
    }

    .fill_width img.free {
        top: 40%;
        left: 70%;
        width: 135px;
        height: auto;
    }


    /*你該學好日語的三大理由*/
    .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;
        font-weight: 600;
    }

    .reason_width h3 {
        font-size: 24px;
        font-weight: 600;
    }

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

    /*全方位日語學習計劃*/
    .plan_width h3 {
        font-size: 40px;
        margin-top: 0px;
        font-weight: 600;
    }

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

    .plan_width p {
        font-size: 18px;
    }
}
/* ↓↓↓↓ pad 豎屏時, 頁面顯示尺寸 300 < x <1023 時,顯示效果 ↓↓↓↓  */

@media (max-width: 959px) and (min-width: 300px) {
    /*BANNER*/
    /*背景*/
    .banner001 {
        display: none;
    }
    /*背景min*/
    .banner001_1 {
        width: 100%;
        max-width: 960px;
        min-width: 280px;
        height: auto;
    }
    /*人*/
    .banner002 {
        width: 52.3vw;
        height: auto;
        position: absolute;
        z-index: 11;
        display: block;
        top: 22.9%;
        left: -13%;
        max-width: 525px;
    }
    /*105年*/
    .banner003 {
        width: 58vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 3%;
        left: 23%;
        max-width: 745px;
    }
    /*五大輔助*/
    .banner004 {
        width: 93vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 12%;
        left: 2.8%;
        max-width: 1330px;
    }
    /*小字*/
    .banner005 {
        display: none;
    }

    .banner005_1 {
        width: 59vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 24%;
        left: 34%;
        max-width: 630px;
    }
    /*方塊1*/
    .banner006 {
        width: 25.5vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 47%;
        left: 50.5%;
        max-width: 290px;
    }
    /*方塊2*/
    .banner007 {
        width: 25.5vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 47%;
        left: 74.5%;
        max-width: 290px;
    }
    /*方塊3*/
    .banner008 {
        width: 25.5vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 61%;
        left: 50.5%;
        max-width: 290px;
    }
    /*方塊4*/
    .banner009 {
        width: 25.5vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 61%;
        left: 74.5%;
        max-width: 290px;
    }
    /*方塊5*/
    .banner010 {
        width: 25.5vw;
        height: auto;
        position: absolute;
        z-index: 10;
        display: block;
        top: 75%;
        left: 61.5%;
        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;
    }


    /*表單區*/
    .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 {
        top: 48%;
        left: 70%;
        width: 110px;
        height: auto;
    }

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

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

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

    /*全方位日語學習計劃*/
    .plan_width h3 {
        font-size: 30px;
    }

    .plan_width h2 {
        font-size: 24px;
    }

    .plan_width p {
        font-size: 18px;
        padding-bottom: 25px;
    }
}

/*========================================================*/
@media only screen and (max-width: 1280px) {
    .top, .footer {
        display: block;
    }
}
/*↓↓↓↓ *螢幕尺寸【大於於】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) {
    .top, .footer {
        display: block;
    }
}