/***
 *** PAGE LEVEL LAYOUT COMPONENT CSS Document
 ***
 ***
 *** - Home
 *** - Features
 *** - How to Join
 *** - Hanyu App Intro
 *** - Courses
 *** - Course Intro
 *** - Course Intro :: Async
 *** - Course Intro 02
 *** - Course Intro Video
 *** - Course Filter
 *** - Trial Lesson Pop-up UI
 *** - Subscriptions
 *** - Privacy Policy
 *** - FAQ
 *** - Blog
 *** - Blog Content
 *** - About
 *** - Member Renew Password
 *** - Member Account Info
 *** - Member My Courses
 *** - Member My Courses Pop-up UI
 *** - Member My Videos
 *** - Member My Videos Pop-up UI
 *** - Member My QA List
 *** - Member My QA Insert
 *** - Member My QA Insert 02
 *** - Member My Payment
 *** - Member Course Material
 *** - Free Course Survey
 *** - News
 *** - News Content
 ***/


/***
 *** BEGIN Home
 ***/

.feature-slide {
    position: relative;
    width: 100%;
    height: 485px;
    overflow: hidden;
    margin: 0 auto;
    padding: 0;
}
.home-desc-slide {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    padding: 0;
}
    .home-slide-banner {
        width: 100%;
        height: 508px;
        background: url(../image/bg_index_03.jpg) 0 0 no-repeat;
        background-size: 100%;
    }
        .home-slide-banner-text {
            display: none;
            width: 79%;
            overflow: hidden;
            margin: 11.0rem 0 0 1.8rem;
            padding: 0;
        }
            .home-slide-banner-text h2 {
                color: #fff;
                font-size: 5.625rem;
                font-weight: 600;
                line-height: 117%;
                letter-spacing: 0.2rem;
            }
    .home-slide-about-us {
        width: 100%;
        background: #FAFAFA;
        margin: 0 auto;
        padding: 3rem 0 3.6rem;
    }
        .home-slide-about-us h2 {
            width: 100%;
            overflow: hidden;
            color: #2850a9;
            font-size: 3.6rem;
            font-weight: 700;
            line-height: 100%;
            text-align: center;
            margin: 0 0 2.6rem;
            padding: 0;
        }
        .home-slide-about-us .desc-block-07-desc {
            color: #000;
            font-size: 1.25rem;
            font-weight: 300;
            letter-spacing: 0.015rem;
            line-height: 180%;
            margin: 0 0 3%;
            padding-left: 1.5%;
            border-left: 0.5rem solid #a33030;
        }
        .home-slide-about-us ul {
            clear: both;
            width: 100%;
            overflow: hidden;
            margin: 0 auto 4%;
            padding: 0 0 1rem;
        }
        .home-slide-about-us li {
            list-style: none;
        }
            .home-slide-about-us li.li-q-text {
                width: 88%;
                overflow: hidden;
                color: #666;
                font-size: 1.03rem;
                letter-spacing: 0.015rem;
                line-height: 170%;
            }
        .home-slide-about-us .about-more {
            width: 25%;
            height: auto;
            overflow: hidden;
            background: #284fa9;
            color: #FFF;
            font-size: 1.6875rem;
            font-weight: 500;
            text-align: center;
            margin: 3.5rem auto 0;
            padding: 1% 0;
            border-radius: 32px;
        }
            .home-slide-about-us .about-more li{
                width: 100%;
                padding: 0;
            }
            .home-slide-about-us .about-more a:link, .home-slide-about-us .about-more a:visited, .home-slide-about-us .about-more a:hover {
                color: #FFF;
            }
    .home-slide-course-lists {
        width: 100%;
        background: url(../image/bg_index_02.png) 0 0 repeat;
        background-size: 100%;
        overflow: hidden;
        margin: 0 auto;
        padding: 3rem 0 3.6rem;
    }
        .home-slide-course-lists h2 {
            color: #005ead;
            font-size: 3.6rem;
            font-weight: 700;
            line-height: 100%;
            text-align: center;
            margin: 0 0 3.3rem;
        }
        .home-slide-course-lists ul {
            float: left;
            display: inline-block;
            width: 23%;
            height: 33rem;
            overflow: hidden;
            background: RGBA( 255, 255, 255, 0.88 );
            text-align: left;
            margin: 0 2% 2% 0;
            padding: 0;
            border-radius: 6px;
        }
            .home-slide-course-lists ul a:link, .home-slide-course-lists ul a:visited, .home-slide-course-lists ul a:hover {
                text-decoration: none;
            }
        .home-slide-course-lists img {
            width: 100%;
            margin-bottom: 2.3rem;
        }
        .home-slide-course-lists li {
            list-style: none;
            width: 80%;
            padding: 0 0 0 0.5rem;
        }
            .home-slide-course-lists li.li-course-01 {
                height: 4.5rem;
                /*overflow: hidden;*/
                color: #284fa9;
                font-size: 1.6875rem;
                font-weight: 700;
                line-height: 135%;
                margin: 0 auto 1.15rem;
            }
            .home-slide-course-lists li.li-course-02 {
                height: 3rem;
                color: #000;
                font-size: 1rem;
                font-weight: 500;
                margin: 0 auto 1.15rem;
            }
            .home-slide-course-lists li.li-course-03 {
                /* height: 5rem; */
                overflow: hidden;
                color: #666;
                font-size: 1.3125rem;
                font-weight: 300;
                line-height: 150%;
                text-align: left;
                margin: 0 auto;
            }
            .home-slide-course-lists li.li-more-btn {
                overflow: hidden;
                background: #a33030;
                color: #FFF;
                font-size: 1.0625rem;
                font-weight: 400;
                line-height: 180%;
                text-align: center;
                margin: 2.3rem auto 0;
                padding: 3% 0;
                border-radius: 24px;
            }
                .home-slide-course-lists li.li-more-btn a:link, .home-slide-course-lists li.li-more-btn a:visited, .home-slide-course-lists li.li-more-btn a:hover {
                    color: #FFF;
                }
        .home-slide-course-lists .course-lists-more{
            width: 25%;
            height: auto;
            overflow: hidden;
            background: #284fa9;
            color: #FFF;
            font-size: 1.6875rem;
            font-weight: 500;
            text-align: center;
            margin: 3.5rem 0 0 27rem;
            padding: 1% 0;
            border-radius: 32px;
        }
            .home-slide-course-lists .course-lists-more li{
                width: 100%;
                padding: 0;
            }
            .home-slide-course-lists .course-lists-more a:link, .home-slide-course-lists .course-lists-more a:visited, .home-slide-course-lists .course-lists-more a:hover {
                color: #FFF;
            }
    .home-slide-join-class {
        width: 100%;
        overflow: hidden;
        margin: 0 auto;
        padding: 3rem 0 3.6rem;
    }
        .home-slide-join-class h2 {
            color: #005ead;
            font-size: 3.6rem;
            font-weight: 700;
            line-height: 100%;
            text-align: center;
            margin: 0 auto 3%;
        }

        .home-slide-join-class .join-class {
            width: 100%;
            overflow: hidden;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-evenly;
            align-items:flex-start
        }
        .home-slide-join-class .join-class .item-title {
            display: flex;
            flex: 0 1 18%;
            justify-content: left;
            text-align: center;
            overflow: hidden;
            color: #284fa9;
            font-size: 2.3125rem;
            margin: 0 0 0 2% ;
        }
        .home-slide-join-class .join-class .item-title img{
            height: 36px;
            margin: 5% 0 0 5%;
        }
        .home-slide-join-class .join-class .item-title.title-05 {
            color: #a33030;
            font-size: 2.25rem;
            font-weight: 600;
            line-height: 125%;
            margin: 0 auto;
        }
        .home-slide-join-class .join-class .item-sub-title {
            display: flex;
            flex: 0 1 16%;
            justify-content: center;
            text-align: left;
            overflow: hidden;
            color: #284fa9;
            font-size: 1.25rem;
            font-weight: 600;
            line-height: 125%;
            margin: 0 2% 2%;
        }
        .home-slide-join-class .join-class .item-photo{
            display: flex;
            flex: 0 1 11%;
            justify-content: left;
        }
        .home-slide-join-class .join-class .item-photo.photo-01{
            margin: 2% 0 0 5%;
        }
        .home-slide-join-class .join-class .item-photo.photo-02{
            margin: 2% 0 0 4%;
        }
        .home-slide-join-class .join-class .item-photo.photo-03{
            margin: 3% 0 0 4%;
        }
        .home-slide-join-class .join-class .item-photo.photo-04{
            margin: 2% 0 0 4%;
        }
        .home-slide-join-class .join-class .item-photo.photo-05{
            margin: 0 1.5% 0 4%;
        }
        .home-slide-join-class .join-class .item-arrow{
            display: flex;
            flex: 0 1 2%;
            justify-content: center;
            margin: 4% 0 0;
        }
        .home-slide-join-class .join-class .item-content {
            display: flex;
            flex: 0 1 15%;
            justify-content: left;
            overflow: hidden;
            color: #666;
            font-size: 0.875rem;
            font-weight: 300;
            line-height: 165%;
            text-align: left;
            margin: 4% 2% 0;
        }
        .home-slide-join-class .join-class .order-01{
            order: 1;
        }
        .home-slide-join-class .join-class .order-02{
            order: 2;
        }
        .home-slide-join-class .join-class .order-03{
            order: 3;
        }
        .home-slide-join-class .join-class .order-04{
            order: 4;
        }
        .home-slide-join-class .join-class .order-05{
            order: 5;
        }
        .home-slide-join-class .join-class .order-06{
            order: 6;
        }



        /* .home-slide-join-class ul {
            display: inline-block;
            height: 34rem;
            width: 17.4%;
            overflow: hidden;
            background: RGBA( 255, 255, 255, 0.88 );
            text-align: left;
            margin: 0;
            padding: 0;
        }
        .home-slide-join-class img {
            width: auto;
        }
        .home-slide-join-class li {
            list-style: none;
            width: 80%;
            padding: 0 0 0 0.5rem;
        }
            .home-slide-join-class li.li-step {
                overflow: hidden;
                color: #284fa9;
                font-size: 2.3125rem;
                margin: 0 auto 1.15rem;
            }
            .home-slide-join-class li.li-step img{
                margin: 0 0 0 0.8rem;
                vertical-align: middle;
            }
            .home-slide-join-class li.li-join-01 {
                overflow: hidden;
                color: #284fa9;
                font-size: 1.25rem;
                font-weight: 600;
                line-height: 125%;
                margin: 0 auto 1.15rem;
            }
            .home-slide-join-class li.li-join-02 {
                margin: 3.3rem 0 0 4.3rem;
                height: 8rem;
            }
            .home-slide-join-class li.li-join-03 {
                overflow: hidden;
                color: #666;
                font-size: 0.875rem;
                font-weight: 300;
                line-height: 165%;
                text-align: left;
                margin: 0 auto;
            }
        .home-slide-join-class ul.join-arrow {
            width: auto;
        }
        .home-slide-join-class ul.join-arrow li{
            margin: 12rem 0 0;
            width: auto;
            padding: 0;
        }
        .home-slide-join-class ul.ul-join-03{
            width: 18.4%;
        }
        .home-slide-join-class ul.ul-join-03 li.li-join-02{
            margin: 3.7rem 0 0 4.3rem;
            height: 7.6rem;
        }
        .home-slide-join-class ul.ul-join-05 li.li-join-01 {
            overflow: hidden;
            color: #a33030;
            font-size: 2.25rem;
            font-weight: 600;
            line-height: 125%;
            margin: 0 auto 1.15rem;
            text-align: center;
        }
        .home-slide-join-class ul.ul-join-05 li.li-join-02 {
            margin: 4rem 0 0 3.3rem;
            height: 9.2rem;
        } */
    .home-slide-news {
        width: 100%;
        overflow: hidden;
        background: url(../image/bg_index_news.png) 0 0 repeat;
        background-size: 100%;
        margin: 0 auto;
        padding: 3rem 0 3.6rem;
    }
        .home-slide-news h2 {
            color: #fff;
            font-size: 3.6rem;
            font-weight: 700;
            line-height: 100%;
            text-align: center;
            margin-bottom: 2.6rem;
        }
        .home-slide-news ul {
            /* float: left; */
            display: inline-block;
            /* height: 25rem; */
            width: 29.8%;
            overflow: hidden;
            background: RGBA( 255, 255, 255, 0.88 );
            /* text-align: left; */
            margin: 0;
            padding: 0;
            border-radius: 10px;
        }
            .home-slide-news ul.ul-news-01 {
                margin: 0 1.65%;
            }
            .home-slide-news ul.ul-news-02 {
                margin: 0 1.65%;
            }
            .home-slide-news ul .div-pic-replacement {
                display: inline-block;
                width: 100%;
                height: 11.55rem;
                overflow: hidden;
                background: #E6E6E6;
                margin: 0;
                padding: 0;
                border-radius: 6px;
            }
        .home-slide-news img {
            width: auto;
        }
        .home-slide-news li {
            width: auto;
            list-style: none;
        }
            .home-slide-news li.li-news-pic {
                width: 100%;
                height: 11.55rem;
                overflow: hidden;
                margin: 0 auto;
                padding: 0;
            }
                .home-slide-news li.li-news-pic img {
                    width: 100%;
                }
                .home-slide-news li.li-news-pic iframe {
                    width: 100%;
                    height: 11.55rem;
                }
            .home-slide-news li.li-news-01 {
                color: #4d4d4d;
                font-size: 1rem;
                font-weight: 500;
                line-height: 125%;
                margin: 1.25rem 0 0.75rem 1rem;
            }
                .home-slide-news li.li-news-01 a:link, .home-slide-news li.li-news-01 a:visited, .home-slide-news li.li-news-01 a:hover {
                    color: #4d4d4d;
                }
            .home-slide-news li.li-news-02 {
                color: #808080;
                font-size: 0.9375rem;
                margin: 0 0 1.25rem 1rem;
                padding: 0 0 0 0.5rem;
                border-left: 0.5rem solid #ab4443;
            }
        .home-slide-news ul.news-lists-more{
            float: none !important;
            display: block !important;
            width: 25%;
            height: auto;
            overflow: hidden;
            background: #FFF;
            color: #284fa9;
            font-size: 1.6875rem;
            font-weight: 500;
            text-align: center !important;
            margin: 3.5rem auto 0;
            padding: 1% 0;
            border-radius: 32px;
        }
            .home-slide-news .news-lists-more li{
                width: 100%;
                padding: 0;
            }
            .home-slide-news .news-lists-more a:link, .home-slide-news .news-lists-more a:visited, .home-slide-news .news-lists-more a:hover {
                color: #284fa9;
            }
    .home-slide-faq {
        width: 100%;
        overflow: hidden;
        /*background: #FAFAFA;*/
        background: url(../image/deco_footer_03.jpg) 50% 0 no-repeat, #3F5FAD;
        background-size: 100%;
        margin: 0 auto;
        padding: 3rem 0 4.8rem;
    }
        .home-slide-faq ul {
            float: right;
            overflow: hidden;
            margin: 0;
            padding: 0;
            vertical-align: middle;
        }
            .home-slide-faq li {
                width: auto;
                list-style: none;
                /* padding: 0 0 0 0.5rem; */
            }
            .home-slide-faq ul.ul-faq-01 {
                margin: 0 3.9% 0 0;
            }
                .home-slide-faq .ul-faq-01 li.li-faq{
                    margin: 0 0 0 6rem;
                }
            .home-slide-faq ul.ul-faq-02 {
                width: 23%;
                text-align: right;
                margin: 0;
            }
                .home-slide-faq .ul-faq-02 li.li-faq-01 {
                    color: #284fa9;
                    font-size: 3rem;
                    font-weight: 600;
                    margin: 0 0 0.75rem;
                }
                .home-slide-faq .ul-faq-02 li.li-faq-02 {
                    color: #666;
                    font-size: 1rem;
                    font-weight: 300;
                    line-height: 180%;
                }
                .home-slide-faq .ul-faq-02 .btn-faq-more {
                    float: right;
                    width: 35%;
                    height: auto;
                    overflow: hidden;
                    background: #284fa9;
                    color: #FFF;
                    font-size: 1.0625rem;
                    font-weight: 500;
                    text-align: center;
                    margin: 0;
                    padding: 1% 0;
                    border-radius: 18px;
                }
                    .home-slide-faq .ul-faq-02 .btn-faq-more a:link, .home-slide-faq .ul-faq-02 .btn-faq-more a:visited, .home-slide-faq .ul-faq-02 .btn-faq-more a:hover {
                        color: #FFF;
                    }
            .home-slide-faq .ul-faq-03{
                width: 23%;
                height: auto;
                overflow: hidden;
                background: #284fa9;
                color: #FFF;
                font-size: 1.0625rem;
                font-weight: 500;
                text-align: center;
                margin: 0;
                padding: 1% 0;
                border-radius: 18px;
            }
                .home-slide-faq .ul-faq-03 a:link, .home-slide-faq .ul-faq-03 a:visited, .home-slide-faq .ul-faq-03 a:hover {
                    color: #FFF;
                }
            .home-slide-faq ul.ul-faq-04 {
                width: 47%;
                border-right: 0.15rem solid #e6e6e6;
                margin: 5rem 0 0 3rem;
            }
                .home-slide-faq .ul-faq-04 li.li-faq-01{
                    color: #000;
                    font-family: 'Noto Serif TC';
                    font-size: 3.2rem;
                    font-weight: 400;
                    /* margin: 1rem 0 0.5rem 0; */
                }
                .home-slide-faq .ul-faq-04 li.li-faq-02{
                    color: #000;
                    font-family: 'Noto Serif TC';
                    font-size: 1.75rem;
                    font-weight: 300;
                    letter-spacing: 0.5rem;
                    text-align: right;
                    margin: 1.5rem 2.5rem 0 0;
                }
            .home-slide-faq ul.ul-faq-05 {
                width: 42%;
                margin: 5rem 0 0 3rem;
            }
                .home-slide-faq .ul-faq-05 li.li-faq-01{
                    font-size: 3rem;
                    font-weight: 700;
                    background: -webkit-gradient(linear,left top,right top,from(#4869B9),to(#008E2E));
                    background: linear-gradient( to right, #4869B9, #008E2E );
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    -webkit-box-decoration-break: clone;
                    box-decoration-break: clone;
                }
/***
 *** BEGIN Trial Lesson Pop-up UI
 ***/

.home-course-price-info-area {
    position: relative;
    width: 87%;
    /*max-width:640px;
    min-width: 360px;*/
    margin: 0 auto;
    padding: 2rem 0;
}
    .home-course-price-info-area h2 {
        color: #025EAD;
        font-size: 1.15rem;
        line-height: 100%;
        margin: 0 0 1.25rem;
        padding: 0 0 0 3%;
    }
        .home-course-price-info-area .eng-course-title {
            font-size: 0.938rem;
            font-weight: 400;
            margin-left: 0.25rem;
        }
    .home-course-price-info-area .timezone-desc {
        width: 88%;
        color: #727171;
        font-size: 0.813rem;
        font-weight: 300;
        line-height: 100%;
        margin: 0 0 1.25rem;
        padding: 3%;
        border: #999 1px solid;
        border-radius: 6px;
    }
        .home-course-price-info-area .timezone-desc img {
            width: 5%;
            margin-right: 1% !important;
        }
    .home-course-price-info-area ul {
        width: 94%;
        overflow: hidden;
        margin: 0.5rem auto 0;
        padding: 0.75rem 3%;
        border-bottom: #CCC 1px dotted;
    }
        .home-course-price-info-area li.li-course-list-desc {
            float: left;
            display: inline-block;
            overflow: hidden;
            color: #727171;
            font-size: 0.938rem;
            font-weight: 300;
            line-height: 100%;
            list-style: none;
        }
            .home-course-price-info-area .trial-student-limit {
                width: 12%;
                margin: 0.5rem 0 0;
                padding: 0;
            }
            .home-course-price-info-area .trial-total-hours {
                width: 35%;
                margin: 0.5rem 0 0;
                padding: 0;
            }
            .home-course-price-info-area .trial-lesson-price {
                width: 26%;
                margin: 0.5rem 0 0;
                padding: 0;
            }
                .lesson-info-emphasized {
                    color: #C30D23 !important;
                    font-weight: 500 !important;

                }
            .home-course-price-info-area .trial-lesson-from {
                width: 12%;
                color: #025EAD !important;
                font-weight: 0.75rem !important;
                font-weight: 300 !important;
                margin: 1rem 0 0;
                padding: 0;
            }
            .home-course-price-info-area .trial-lesson-date {
                width: 28%;
                margin: 1rem 0 0;
                padding: 0;
            }
            .home-course-price-info-area .trial-lesson-time {
                width: 30%;
                margin: 1rem 0 0;
                padding: 0;
            }
            .home-course-price-info-area .trial-lesson-subscribe-btn {
                float: right;
                display: inline-block;
                width: 23%;
                background: #F8AE01;
                font-size: 1em;
                color: #FFF;
                text-align: center;
                margin: 0 3% 0 0;
                padding: 0.25rem 0;
                border: none;
                border-radius: 6px;
            }


/***
 *** BEGIN Features
 ***/

.features-area {
    width: 100%;
    overflow: hidden;
    margin: 3.537% auto;
    padding: 0;
}
    .features-area .feature-slide-desc-block-01 {
        width: 82.5%;
        overflow: hidden;
        text-align: justify;
        margin: 0 auto 8.11%;
        padding: 0;
    }
        .features-area .feature-slide-desc-block-01 p {
            width: 100%;
            overflow: hidden;
            color: #727171;
            font-size: 1.3125em;
            font-weight: 300;
            margin: 0;
            padding: 0;
        }
    .features-area .feature-slide-desc-block-02 {
        width: 82.5%;
        overflow: hidden;
        margin: 0 auto 8.11%;
        padding: 0;
    }
        .features-area .feature-slide-desc-block-02 .desc-block-02-left {
            float: left;
            display: inline-block;
            width: 49.18%;
            overflow: hidden;
            margin: 3.933% 0 0;
            padding: 0;
        }
            .features-area .feature-slide-desc-block-02 .desc-block-02-left img {
                width: 100%;
            }
        .features-area .feature-slide-desc-block-02 .desc-block-02-right {
            float: right;
            display: inline-block;
            width: 48%;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }
            .features-area .feature-slide-desc-block-02 .desc-block-02-right h2 {
                width: 100%;
                overflow: hidden;
                color: #025EAD;
                font-size: 2em;
                font-weight: 400;
                margin: 0 0 3.413%;
                padding: 0;
            }
            .features-area .feature-slide-desc-block-02 .desc-block-02-right p {
                width: 100%;
                overflow: hidden;
                color: #727171;
                font-size: 1.3125em;
                font-weight: 300;
                margin: 0;
                padding: 0;
            }
    .features-area .feature-slide-desc-block-03 {
        width: 82.5%;
        overflow: hidden;
        margin: 0 auto;
        padding: 0;
    }
        .features-area .feature-slide-desc-block-03 .desc-block-03-left {
            float: left;
            display: inline-block;
            width: 48%;
            overflow: hidden;
            margin: 12.5% 0 0;
            padding: 0;
        }
            .features-area .feature-slide-desc-block-03 .desc-block-03-left h2 {
                width: 100%;
                overflow: hidden;
                color: #025EAD;
                font-size: 2em;
                font-weight: 400;
                margin: 0 0 3.413%;
                padding: 0;
            }
            .features-area .feature-slide-desc-block-03 .desc-block-03-left p {
                width: 100%;
                overflow: hidden;
                color: #727171;
                font-size: 1.3125em;
                font-weight: 300;
                margin: 0;
                padding: 0;
            }
        .features-area .feature-slide-desc-block-03 .desc-block-03-right {
            float: right;
            display: inline-block;
            width: 49.18%;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }
            .features-area .feature-slide-desc-block-03 .desc-block-03-right img {
                width: 100%;
            }
    .features-area .feature-slide-desc-block-04 {
        width: 82.5%;
        overflow: hidden;
        text-align: center;
        margin: 8.11% auto 0;
        padding: 0;
    }
        .features-area .feature-slide-desc-block-04 h2 {
            width: 100%;
            overflow: hidden;
            color: #025EAD;
            font-size: 2em;
            font-weight: 400;
            margin: 0 0 3.413%;
            padding: 0;
        }
        .features-area .feature-slide-desc-block-04 p {
            width: 100%;
            overflow: hidden;
            color: #727171;
            font-size: 1.3125em;
            font-weight: 300;
            margin: 0;
            padding: 0;
        }
    .features-area .feature-slide-desc-block-05 {
        width: 100%;
        overflow: hidden;
        text-align: center;
        margin: 4.055% auto 0;
        padding: 0;
    }
        .features-area .feature-slide-desc-block-05 ul {
            float: left;
            display: inline-block;
            width: 29%;
            overflow: hidden;
            text-align: center;
            margin: 0 2%;
            padding: 0;
        }
        .features-area .feature-slide-desc-block-05 li {
            list-style: none;
        }
            .features-area .feature-slide-desc-block-05 li.li-deco-pic {
                width: 100%;
                overflow: hidden;
                text-align: center;
                margin: 0 0 9.32%;
                padding: 0;
            }
                .features-area .feature-slide-desc-block-05 li.li-deco-pic img {
                    width: 100%;
                }
            .features-area .feature-slide-desc-block-05 li.li-desc-title {
                width: 100%;
                overflow: hidden;
                color: #F8AE01;
                font-size: 1.625em;
                font-weight: 400;
                text-align: center;
                margin: 0 0 9.32%;
                padding: 0;
            }
            .features-area .feature-slide-desc-block-05 li.li-desc-text {
                width: 100%;
                overflow: hidden;
                color: #727171;
                font-size: 1.125em;
                font-weight: 300;
                line-height: 150%;
                text-align: center;
                margin: 0;
                padding: 0;
            }
    .features-area .feature-slide-desc-block-06 {
        width: 82.5%;
        overflow: hidden;
        margin:  8.11% auto 0;
        padding: 0;
    }
        .features-area .feature-slide-desc-block-06 .desc-block-06-left {
            float: left;
            display: inline-block;
            width: 49.18%;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }
            .features-area .feature-slide-desc-block-06 .desc-block-06-left img {
                width: 100%;
            }
        .features-area .feature-slide-desc-block-06 .desc-block-06-right {
            float: right;
            display: inline-block;
            width: 48%;
            overflow: hidden;
            margin: 2.95% 0 0;
            padding: 0;
        }
            .features-area .feature-slide-desc-block-06 .desc-block-06-right h2 {
                width: 100%;
                overflow: hidden;
                color: #025EAD;
                font-size: 2em;
                font-weight: 400;
                margin: 0 0 3.413%;
                padding: 0;
            }
            .features-area .feature-slide-desc-block-06 .desc-block-06-right p {
                width: 100%;
                overflow: hidden;
                color: #727171;
                font-size: 1.3125em;
                font-weight: 300;
                margin: 0;
                padding: 0;
            }


/***
 *** BEGIN How to Join
 ***/

.how-to-join-area {
    width: 100%;
    overflow: hidden;
    margin: 3.537% auto;
    padding: 0;
}
    .how-to-join-area .htj-slide-desc-block-01 {
        width: 82.5%;
        overflow: hidden;
        margin: 0 auto 8.11%;
        padding: 0;
    }
        .how-to-join-area .htj-slide-desc-block-01 .desc-block-01-left {
            float: left;
            display: inline-block;
            width: 45.865%;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }
            .how-to-join-area .htj-slide-desc-block-01 .desc-block-01-left img {
                width: 100%;
            }
        .how-to-join-area .htj-slide-desc-block-01 .desc-block-01-right {
            float: right;
            display: inline-block;
            width: 48%;
            overflow: hidden;
            margin: 5% 0 0;
            padding: 0;
        }
            .how-to-join-area .htj-slide-desc-block-01 .desc-block-01-right h2 {
                width: 100%;
                overflow: hidden;
                color: #025EAD;
                font-size: 2em;
                font-weight: 400;
                margin: 0 0 3.413%;
                padding: 0;
            }
            .how-to-join-area .htj-slide-desc-block-01 .desc-block-01-right p {
                width: 100%;
                overflow: hidden;
                color: #727171;
                font-size: 1.3125em;
                font-weight: 300;
                margin: 0;
                padding: 0;
            }
    .how-to-join-area .htj-slide-desc-block-02 {
        width: 82.5%;
        overflow: hidden;
        margin: 0 auto 8.11%;
        padding: 0;
    }
        .how-to-join-area .htj-slide-desc-block-02 .desc-block-02-left {
            float: left;
            display: inline-block;
            width: 48%;
            overflow: hidden;
            margin: 7% 0 0;
            padding: 0;
        }
            .how-to-join-area .htj-slide-desc-block-02 .desc-block-02-left h2 {
                width: 100%;
                overflow: hidden;
                color: #025EAD;
                font-size: 2em;
                font-weight: 400;
                margin: 0 0 3.413%;
                padding: 0;
            }
            .how-to-join-area .htj-slide-desc-block-02 .desc-block-02-left p {
                width: 100%;
                overflow: hidden;
                color: #727171;
                font-size: 1.3125em;
                font-weight: 300;
                margin: 0;
                padding: 0;
            }
        .how-to-join-area .htj-slide-desc-block-02 .desc-block-02-right {
            float: right;
            display: inline-block;
            width: 45.865%;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }
            .how-to-join-area .htj-slide-desc-block-02 .desc-block-02-right img {
                width: 100%;
            }
    .how-to-join-area .htj-slide-desc-block-03 {
        width: 82.5%;
        overflow: hidden;
        margin: 0 auto 8.11%;
        padding: 0;
    }
        .how-to-join-area .htj-slide-desc-block-03 .desc-block-03-left {
            float: left;
            display: inline-block;
            width: 45.865%;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }
            .how-to-join-area .htj-slide-desc-block-03 .desc-block-03-left img {
                width: 100%;
            }
        .how-to-join-area .htj-slide-desc-block-03 .desc-block-03-right {
            float: right;
            display: inline-block;
            width: 48%;
            overflow: hidden;
            margin: 7% 0 0;
            padding: 0;
        }
            .how-to-join-area .htj-slide-desc-block-03 .desc-block-03-right h2 {
                width: 100%;
                overflow: hidden;
                color: #025EAD;
                font-size: 2em;
                font-weight: 400;
                margin: 0 0 3.413%;
                padding: 0;
            }
            .how-to-join-area .htj-slide-desc-block-03 .desc-block-03-right p {
                width: 100%;
                overflow: hidden;
                color: #727171;
                font-size: 1.3125em;
                font-weight: 300;
                margin: 0;
                padding: 0;
            }
    .how-to-join-area .htj-slide-desc-block-04 {
        width: 82.5%;
        overflow: hidden;
        margin: 0 auto;
        padding: 0;
    }
        .how-to-join-area .htj-slide-desc-block-04 .desc-block-04-left {
            float: left;
            display: inline-block;
            width: 48%;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }
            .how-to-join-area .htj-slide-desc-block-04 .desc-block-04-left h2 {
                width: 100%;
                overflow: hidden;
                color: #025EAD;
                font-size: 2em;
                font-weight: 400;
                margin: 0 0 3.413%;
                padding: 0;
            }
            .how-to-join-area .htj-slide-desc-block-04 .desc-block-04-left p {
                width: 100%;
                overflow: hidden;
                color: #727171;
                font-size: 1.3125em;
                font-weight: 300;
                margin: 0;
                padding: 0;
            }
        .how-to-join-area .htj-slide-desc-block-04 .desc-block-04-right {
            float: right;
            display: inline-block;
            width: 45.865%;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }
            .how-to-join-area .htj-slide-desc-block-04 .desc-block-04-right img {
                width: 100%;
            }


/***
 *** BEGIN Hanyu App Intro
 ***/

.app-intro-desc-slide {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    padding: 0;
}
    .slide-01 {
        width: 100%;
        background: url(../image/bg_hanyu_app_intro_section_01.jpg) 50% 0 no-repeat;
        background-size: 100%;
    }
        .slide-01-right {
            float: right;
            display: inline-block;
            /*width: 48.5%;*/
            overflow: hidden;
            margin: 25% 5.37% 0 0;
            padding: 0;
        }
            .slide-01-right .main-slogan {
                color: #FFF;
                font-size: 2em;
                font-weight: 500;
                letter-spacing: 1px;
                line-height: 180%;
                text-align: left;
                /*margin: 26.5% 0 0;*/
                padding: 0;
            }
            .slide-01-right .btn-get-started {
                display: inline-block;
                width: 50.367%;
                overflow: hidden;
                background: #ffba00;
                color: #FFF;
                font-size: 1.5em;
                font-weight: 400;
                letter-spacing: 1px;
                text-align: center;
                margin: 11.853% 1% 0 0;
                padding: 3% 0;
                border-radius: 40px;
                vertical-align: middle;
            }
                .slide-01-right .btn-get-started a:link, .slide-01-right .btn-get-started a:visited, .slide-01-right .btn-get-started a:hover  {
                    color: #FFF;
                }
    .slide-02 {
        width: 100%;
        background: url(../image/bg_hanyu_app_intro_section_02.jpg) 95% 0 no-repeat;
        background-size: 100%;
    }
        .slide-02-left {
            float: left;
            display: inline-block;
            width: 26.177%;
            overflow: hidden;
            margin: 11.618% 0 0 10.368%;
            padding: 0;
        }
            .slide-02-left .app-logo {
                width: 100%;
                overflow: hidden;
                color: #333;
                font-size: 2em;
                font-weight: 500;
                margin: 0 0 10.313%;
                padding: 0;
            }
                .slide-02-left .app-logo img {
                    width: 37.925%;
                    margin-right: 5%;
                    vertical-align: middle;
                }
            .slide-02-left .sub-slogan {
                color: #333;
                font-size: 1.5em;
                font-weight: 300;
                letter-spacing: 1px;
                text-align: left;
                margin: 0 0 1.31%;
                padding: 0;
            }
            .slide-02-left .main-slogan {
                color: #333;
                font-size: 2em;
                font-weight: 500;
                letter-spacing: 1px;
                text-align: left;
                margin: 0;
                padding: 0;
            }
            .slide-02-left .download-link-area {
                width: 100%;
                overflow: hidden;
                margin: 0;
                padding: 0;
            }
                .slide-02-left .download-link-area ul {
                    width: 100%;
                    overflow: hidden;
                    margin: 0;
                    padding: 0;
                }
                .slide-02-left .download-link-area li {
                    display: inline-block;
                    float: left;
                    width: 50%;
                    overflow: hidden;
                    margin: 15.55% 0 0;
                    padding: 0;
                }
                    .slide-02-left .download-link-area li img {
                        width: 100%;
                    }
    /*.slide-03 {
        width: 100%;
        background: url(../image/bg_hanyu_app_intro_section_03.jpg) 50% 0 no-repeat;
        background-size: 100%;
    }
        .slide-03-center {
            width: 100%;
            overflow: hidden;
            margin: 8.089% auto 0;
            padding: 0;
        }
            .slide-03-center .main-slogan {
                color: #333;
                font-size: 2em;
                font-weight: 500;
                letter-spacing: 1px;
                text-align: center;
                margin: 0 auto;
                padding: 0;
            }
            .slide-03-center .sub-slogan {
                color: #808080;
                font-size: 1.5em;
                font-weight: 300;
                text-align: center;
                margin: 1.471% 0 0;
                padding: 0;
            }
            .slide-03-center .btn-see-how-it-works {
                width: 18.75%;
                overflow: hidden;
                background: #005ead;
                color: #FFF;
                font-size: 1.5em;
                font-weight: 300;
                letter-spacing: 1px;
                text-align: center;
                margin: 4.3% auto 0;
                padding: 0.65% 0;
                border-radius: 40px;
                vertical-align: middle;
            }
                .slide-03-center .btn-see-how-it-works a:link, .slide-03-center .btn-see-how-it-works a:visited, .slide-03-center .btn-see-how-it-works a:hover  {
                    color: #FFF;
                }*/
    .slide-03-svg-01 {
        width: 100%;
        background: url(../image/bg_hanyu_app_intro_section_03_svg_01.jpg) 50% 0 no-repeat;
        background-color: #0360ae;
        background-size: 100%;
    }
        .slide-03-svg-01-left {
            float: left;
            display: inline-block;
            width: 20.956%;
            background: url(../image/deco_home_section_03_svg_01_02.png) 50% 0 no-repeat;
            background-size: 100%;
            overflow: hidden;
            margin: 4.853% 0 0 18.015%;
            padding: 0;
        }
            .slide-03-svg-01-left img {
                width: 100%;
            }
        .slide-03-svg-01-right {
            float: right;
            display: inline-block;
            width: 38%;
            overflow: hidden;
            margin: 13.457% 9.192% 0 0;
            padding: 0;
        }
            .slide-03-svg-01-right .main-slogan {
                color: #333;
                font-size: 2em;
                font-weight: 400;
                letter-spacing: 1px;
                line-height: 150%;
                text-align: left;
                margin: 0 0 6.5%;;
                padding: 0 0 0 5.225%;
                border-left: #0360ae 8px solid;
            }
            .slide-03-svg-01-right .sub-desc {
                color: #333;
                font-size: 1.15em;
                font-weight: 300;
                letter-spacing: 1px;
                text-align: left;
                margin: 0 0 1.31%;
                padding: 0;
            }
        #lottie{
            width:100%;
            height:100%;
            display:block;
            overflow: hidden;
            transform: translate3d(0,0,0);
            text-align: center;
            opacity: 1;
        }
    .slide-03-svg-02 {
        width: 100%;
        background: url(../image/bg_hanyu_app_intro_section_03_svg_02.jpg) 50% 0 no-repeat;
        background-color: #f6b503;
        background-size: 100%;
    }
        .slide-03-svg-02-left {
            float: left;
            display: inline-block;
            width: 38%;
            overflow: hidden;
            margin: 13.236% 0 0 8.31%;
            padding: 0;
        }
            .slide-03-svg-02-left .main-slogan {
                color: #FFF;
                font-size: 2em;
                font-weight: 400;
                letter-spacing: 1px;
                line-height: 150%;
                text-align: left;
                margin: 0 0 6.5%;;
                padding: 0 0 0 5.225%;
                border-left: #f8b500 8px solid;
            }
            .slide-03-svg-02-left .sub-desc {
                color: #FFF;
                font-size: 1.15em;
                font-weight: 300;
                letter-spacing: 1px;
                text-align: left;
                margin: 0 0 1.31%;
                padding: 0;
            }
        .slide-03-svg-02-right {
            float: right;
            display: inline-block;
            width: 20.956%;
            overflow: hidden;
            margin: 4.853% 18.383% 0 0;
            padding: 0;
        }
            .slide-03-svg-02-right img {
                width: 100%;
            }
    .slide-04 {
        width: 100%;
        background: #FFF;
    }
        .slide-04-center {
            width: 100%;
            overflow: hidden;
            color: #333;
            font-size: 2em;
            font-weight: 500;
            letter-spacing: 1px;
            text-align: center;
            margin: 8.456% auto 0;
            padding: 0;
        }
        .slide-04-inline-block {
            float: left;
            display: inline-block;
            width: 35.295%;
            overflow: hidden;
            margin: 4.633% 7.206% 0;
            padding: 0;
        }
            .slide-04-inline-block .deco-pic-teacher {
                width: 42.085%;
                overflow: hidden;
                margin: 0 auto 4.795%;
                padding: 0;
            }
                .slide-04-inline-block .deco-pic-teacher img {
                    width: 100%;
                }
            .slide-04-inline-block .deco-pic-student {
                width: 62.292%;
                overflow: hidden;
                margin: 0 auto 4.795%;
                padding: 0;
            }
                .slide-04-inline-block .deco-pic-student img {
                    width: 100%;
                }
            .slide-04-inline-block ul.ul-title {
                width: 70%;
                overflow: hidden;
                text-align: center;
                margin: 0 auto 6.46%;
                padding: 0;
            }
                .slide-04-inline-block .li-block-title {
                    display: inline-block;
                    color: #005ead;
                    font-size: 2em;
                    font-weight: 400;
                    letter-spacing: 1px;
                    text-align: center;
                    margin: 0 2.98% 0 0;
                    padding: 0;
                }
                .slide-04-inline-block .li-block-desc {
                    display: inline-block;
                    color: #808080;
                    font-size: 1em;
                    font-weight: 300;
                    text-align: center;
                    margin: 5.36% 0 0;
                    padding: 0;
                }
            .slide-04-inline-block ul.ul-desc {
                width: 70%;
                overflow: hidden;
                text-align: center;
                margin: 0 0 5.21% 27%;
                padding: 0;
            }
                .slide-04-inline-block .li-deco-icon {
                    display: inline-block;
                    float: left;
                    width: 14.29%;
                    overflow: hidden;
                    margin: 0 10.715% 0 0;
                    padding: 0;
                    vertical-align: middle;
                }
                    .slide-04-inline-block .li-deco-icon img {
                        width: 100%;
                    }
                .slide-04-inline-block .li-feature-desc {
                    display: inline-block;
                    float: left;
                    color: #808080;
                    font-size: 1.15em;
                    font-weight: 300;
                    text-align: center;
                    margin: 2% 0 0;
                    padding: 0;
                }
            .slide-04-inline-block .main-slogan {
                color: #333;
                font-size: 2em;
                font-weight: 400;
                letter-spacing: 1px;
                text-align: center;
                margin: 0 0 3.163%;
                padding: 0;
            }
        .slide-04-deco-line {
            float: left;
            display: inline-block;
            overflow: hidden;
            margin: 4.633% 0 0;
            padding: 0;
        }
    .slide-05 {
        width: 100%;
        background: url(../image/bg_hanyu_app_intro_section_05.jpg) 50% 0 no-repeat;
        background-color: #f9bc19;
        background-size: 100%;
    }
        .slide-05-left {
            float: left;
            display: inline-block;
            width: 26.471%;
            overflow: hidden;
            margin: 8.383% 0 0 15.736%;
            padding: 0;
        }
            .slide-05-left img {
                width: 100%;
            }
        .slide-05-right {
            float: right;
            display: inline-block;
            /*width: 48.5%;*/
            overflow: hidden;
            margin: 20.81% 10.736% 0 0;
            padding: 0;
        }
            .slide-05-right .deco-icon {
                width: 10.115%;
                overflow: hidden;
                margin: 0 auto 5.69%;
                padding: 0;
            }
                .slide-05-right .deco-icon img {
                    width: 100%;
                }
            .slide-05-right .main-slogan {
                color: #FFF;
                font-size: 2em;
                font-weight: 400;
                letter-spacing: 1px;
                text-align: center;
                margin: 0 0 3.163%;
                padding: 0;
            }
            .slide-05-right .sub-desc {
                color: #FFF;
                font-size: 1em;
                font-weight: 300;
                letter-spacing: 1px;
                text-align: center;
                margin: 0 0 1.31%;
                padding: 0;
            }
    .slide-06 {
        width: 100%;
        background: #f9bc19;
    }
        .slide-06-left {
            float: left;
            display: inline-block;
            width: 30.221%;
            overflow: hidden;
            margin: 8.383% 0 0 13.971%;
            padding: 0;
        }
            .slide-06-left .deco-icon {
                width: 65.453%;
                overflow: hidden;
                margin: 0 auto 9.735%;
                padding: 0;
            }
                .slide-06-left .deco-icon img {
                    width: 100%;
                }
            .slide-06-left .main-slogan {
                color: #FFF;
                font-size: 2em;
                font-weight: 400;
                letter-spacing: 1px;
                text-align: center;
                margin: 0 0 3.163%;
                padding: 0;
            }
            .slide-06-left .sub-desc {
                color: #FFF;
                font-size: 1em;
                font-weight: 300;
                letter-spacing: 1px;
                text-align: center;
                margin: 0 0 1.31%;
                padding: 0;
            }
        .slide-06-right {
            float: right;
            display: inline-block;
            width: 23.971%;
            overflow: hidden;
            margin: 9.927% 16.912% 0 0;
            padding: 0;
        }
            .slide-06-right img {
                width: 100%;
            }
    .slide-07 {
        width: 100%;
        background: url(../image/bg_hanyu_app_intro_section_07.jpg) 50% 0 no-repeat;
        background-size: 100%;
    }
        .slide-07-left {
            float: left;
            display: inline-block;
            width: 23.603%;
            overflow: hidden;
            margin: 7.5% 0 0 8.236%;
            padding: 0;
        }
            .slide-07-left img {
                width: 100%;
            }
        .slide-07-right {
            position: relative;
            float: right;
            display: inline-block;
            width: 55%;
            overflow: hidden;
            margin: 15.442% 8.236% 0 0;
            padding: 0;
        }
            .slide-07-right .deco-illustration {
                display: inline-block;
                float: right;
                width: 46.793%;
                overflow: hidden;
                margin: 0 auto 5.69%;
                padding: 0;
            }
                .slide-07-right .deco-illustration img {
                    width: 100%;
                }
            .slide-07-right .main-slogan {
                float: left;
                color: #FFF;
                font-size: 2em;
                font-weight: 400;
                letter-spacing: 1px;
                text-align: center;
                margin: 4.413% 0 3.343% 8.29%;
                padding: 0;
            }
            .slide-07-right .sub-desc {
                float: left;
                color: #FFF;
                font-size: 1em;
                font-weight: 300;
                letter-spacing: 1px;
                text-align: center;
                margin: 0;
                padding: 0;
            }
    .slide-08 {
        width: 100%;
        background: #FFF;
    }
        .slide-08-center {
            width: 100%;
            overflow: hidden;
            margin: 8.75% auto 3.75%;
            padding: 0;
        }
            .slide-08-center .main-slogan {
                color: #333;
                font-size: 2em;
                font-weight: 400;
                letter-spacing: 1px;
                text-align: center;
                margin: 0 0 2.206%;
                padding: 0;
            }
            .slide-08-center .sub-desc {
                color: #808080;
                font-size: 1em;
                font-weight: 300;
                letter-spacing: 1px;
                text-align: center;
                margin: 0;
                padding: 0;
            }
        .slide-08-table {
            width: 81.764%;
            overflow: hidden;
            margin: 0 auto 8.824%;
            padding: 0;
        }
            .slide-08-table ul.ul-tb-title {
                width: 100%;
                overflow: hidden;
                background: #f9ad00;
                margin: 0 auto;
                padding: 0;
                border-top-right-radius: 30px;
                border-top-left-radius: 30px;
            }
                .slide-08-table li.li-tb-title-text {
                    display: inline-block;
                    width: 18%;
                    overflow: hidden;
                    color: #FFF;
                    font-size: 1.5em;
                    font-weight: 400;
                    text-align: center;
                    margin: 1.62% 3%;
                    padding: 0;
                }
                .title-text-format-actel {

                }
            .slide-08-table ul.ul-tb-content {
                width: 100%;
                overflow: hidden;
                margin: 0 auto;
                padding: 0;
            }
                .slide-08-table li.li-tb-content-text {
                    display: inline-block;
                    width: 18%;
                    overflow: hidden;
                    color: #808080;
                    font-size: 1em;
                    font-weight: 400;
                    text-align: center;
                    margin: 1.2% 3%;
                    padding: 0;
                    vertical-align: middle;
                }
                    .tb-content-actel-text-main {
                        display: inline-block;
                        float: left;
                        overflow: hidden;
                        margin: 0;
                        padding: 0;
                        vertical-align: middle;
                    }
                    .tb-content-actel-text-sub {
                        display: inline-block;
                        float: left;
                        overflow: hidden;
                        font-size: 0.875em;
                        margin: 0 0 0 8%;
                        padding: 0;
                        vertical-align: middle;
                    }
                    .text-format-actel {
                        width: 15% !important;
                        text-align: left !important;
                        padding-left: 3% !important;
                    }
            .slide-08-table .bg-lighter-gray {
                background: #fafafa;
            }
            .slide-08-table .bg-gray {
                background: #f2f2f2;
            }
    .slide-09 {
        width: 100%;
        background: url(../image/bg_hanyu_app_intro_section_09.jpg) 50% 0 no-repeat;
        background-size: 100%;
    }
        .slide-09-center {
            width: 100%;
            overflow: hidden;
            color: #333;
            font-size: 2em;
            font-weight: 400;
            letter-spacing: 1px;
            text-align: center;
            margin: 8.162% auto 0;
            padding: 0;
        }
        .slide-09-inline-block {
            float: left;
            display: inline-block;
            width: 35.295%;
            overflow: hidden;
            margin: 4.633% 7.206% 0;
            padding: 0;
        }
            .slide-09-inline-block .deco-pic {
                display: inline-block;
                float: left;
                width: 15.572%;
                overflow: hidden;
                margin: 0 7.543% 4.795% 0;
                padding: 0;
            }
                .slide-09-inline-block .deco-pic img {
                    width: 100%;
                }
            .slide-09-inline-block .customer-name {
                display: inline-block;
                float: left;
                color: #333;
                font-size: 1.5em;
                font-weight: 400;
                letter-spacing: 1px;
                text-align: center;
                margin: 4.625% 0 0;
                padding: 0;
            }
            .slide-09-inline-block .customer-desc {
                clear: both;
                color: #808080;
                font-size: 0.813em;
                font-weight: 300;
                line-height: 150%;
                text-align: left;
                margin: 0 0 1.31%;
                padding: 0;
            }
        .slide-09-deco-line {
            float: left;
            display: inline-block;
            overflow: hidden;
            margin: 4.633% 0 0;
            padding: 0;
        }
    .slide-10 {
        width: 100%;
        background: #FFF;
    }
        .slide-10-left {
            float: left;
            display: inline-block;
            width: 25.736%;
            overflow: hidden;
            margin: 10.883% 0 0 10.515%;
            padding: 0;
        }
            .slide-10-left img {
                width: 100%;
            }
        .slide-10-right {
            float: right;
            display: inline-block;
            width: 48%;
            overflow: hidden;
            margin: 10.662% 9.633% 0 0;
            padding: 0;
        }
            .slide-10-right .main-slogan {
                color: #333;
                font-size: 2em;
                font-weight: 400;
                letter-spacing: 1px;
                text-align: left;
                margin: 0 0 5.056%;
                padding: 0;
            }
            .slide-10-right .sub-desc {
                color: #333;
                font-size: 1em;
                font-weight: 300;
                letter-spacing: 1px;
                text-align: left;
                margin: 0 0 1.31%;
                padding: 0;
            }
            .slide-10-right .btn-get-started {
                display: inline-block;
                width: 30.638%;
                overflow: hidden;
                background: #005ead;
                color: #FFF;
                font-size: 1em;
                font-weight: 400;
                letter-spacing: 1px;
                text-align: center;
                margin: 1.84% 0 0;
                padding: 1.84% 0;
                border-radius: 40px;
                vertical-align: middle;
            }
                .slide-10-right .btn-get-started a:link, .slide-10-right .btn-get-started a:visited, .slide-10-right .btn-get-started a:hover  {
                    color: #FFF;
                }


/***
 *** BEGIN Courses
 ***/

.courses-area {
    width: 100%;
    overflow: hidden;
    margin: 6.316% auto;
    padding: 0;
}
    .courses-area ul {
        float: left;
        display: inline-block;
        width: 31.1%;
        overflow: hidden;
        background: RGBA( 255, 255, 255, 0.88 );
        text-align: center;
        margin: 0 2% 4.055% 0;
        padding: 0;
        border: #B5B5B6 1px solid;
        border-radius: 12px;
    }
        .courses-area ul a:link, .courses-area ul a:visited, .courses-area ul a:hover {
            text-decoration: none;
        }
    .courses-area li {
        list-style: none;
    }
        .courses-area li.li-course-name {
            width: 96%;
            height: 56px;
            overflow: hidden;
            color: #025EAD;
            font-size: 1.65rem;
            font-weight: 500;
            line-height: 100%;
            text-align: center;
            margin: 13.98% 0 9.32%;
            padding: 0;
        }
            .courses-area .course-name-eng {
                color: #025EAD;
                font-size: 1.25rem;
                font-weight: 400;
            }
        .courses-area li.li-course-level {
            width: 96%;
            overflow: hidden;
            color: #F8AE01;
            font-size: 1.35rem;
            font-weight: 400;
            line-height: 100%;
            text-align: center;
            margin: 0 0 9.32%;
            padding: 0;
        }
        .courses-area li.li-course-desc {
            width: 92%;
            overflow: hidden;
            color: #727171;
            font-size: 1em;
            font-weight: 300;
            line-height: 150%;
            text-align: left;
            margin: 0 auto 9.32%;
            padding: 0;
        }
        .courses-area li.li-more-btn {
            width: 41.66%;
            overflow: hidden;
            background: #025EAD;
            color: #FFF;
            font-size: 1.3125em;
            font-weight: 300;
            line-height: 100%;
            text-align: center;
            margin: 0 auto 13.98%;
            padding: 3% 0;
            border-radius: 8px;
        }
            .courses-area li.li-more-btn a:link, .courses-area li.li-more-btn a:visited, .courses-area li.li-more-btn a:hover {
                color: #FFF;
            }


/***
 *** BEGIN Courses_01
 ***/

 .courses-01-area {
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    padding: 5rem 0;
    background: url(../image/bg_courses_01.png) 0 0 repeat;
    background-size: 100%;
}
    .courses-01-area h2{
            color: #005ead;
            font-size: 4.5rem;
            margin-bottom: 3.5rem;
            font-weight: 800;
            text-align: center;
        }
        .courses-01-area ul {
            float: left;
            display: inline-block;
            width: 23%;
            height: 33rem;
            overflow: hidden;
            background: RGBA( 255, 255, 255, 0.88 );
            text-align: left;
            margin: 0 2% 2% 0;
            padding: 0;
            border-radius: 6px;
        }
            .courses-01-area ul a:link, .courses-01-area ul a:visited, .courses-01-area ul a:hover {
                text-decoration: none;
            }
        .courses-01-area img {
            width: 100%;
            margin-bottom: 2.3rem;
        }
        .courses-01-area li {
            list-style: none;
            width: 80%;
            padding: 0 0 0 0.5rem;
        }
            .courses-01-area li.li-course-01 {
                height: 4.5rem;
                /*overflow: hidden;*/
                color: #284fa9;
                font-size: 1.6875rem;
                font-weight: 700;
                line-height: 135%;
                margin: 0 auto 1.15rem;
            }
            .courses-01-area li.li-course-02 {
                height: 3rem;
                color: #000;
                font-size: 1rem;
                font-weight: 500;
                margin: 0 auto 1.15rem;
            }
            .courses-01-area li.li-course-03 {
                /* height: 5rem; */
                overflow: hidden;
                color: #666;
                font-size: 1.3125rem;
                font-weight: 300;
                line-height: 150%;
                text-align: left;
                margin: 0 auto;
            }
            .courses-01-area li.li-more-btn {
                overflow: hidden;
                background: #a33030;
                color: #FFF;
                font-size: 1.0625rem;
                font-weight: 400;
                line-height: 180%;
                text-align: center;
                margin: 2.3rem auto 0;
                padding: 3% 0;
                border-radius: 24px;
            }
                .courses-01-area li.li-more-btn a:link, .courses-01-area li.li-more-btn a:visited, .courses-01-area li.li-more-btn a:hover {
                    color: #FFF;
                }


/***
 *** BEGIN Course Intro
 ***/
.course-intro-banner{
    width: 100%;
    height: 250px;
    overflow: hidden;
    background: url(../image/bg_course_intro_banner.png) 0 0 no-repeat;
    background-size: 100%;
    margin: 0 auto;
    padding: 0;
}
.course-switch{
    background-color: #fafafa;
    box-shadow: 0px 5px 10px 0px #eeeeee;
}
    .course-switch li{
        width: 30%;
        display: inline-block;
        list-style: none;
        color: #666;
        font-size: 2.125rem;
        font-weight: 700;
        text-align: center;
        padding: 1.5%;
    }
        .course-switch li.li-switch-01 {
            color: #284fa9;
            border-bottom: 0.35rem solid #284fa9;
        }
        .course-switch li.li-switch-02 a:link, .course-switch li.li-switch-02 a:visited, .course-switch li.li-switch-02 a:hover {
            color: #666;
        }
        .course-switch li.li-switch-03 a:link, .course-switch li.li-switch-03 a:visited, .course-switch li.li-switch-03 a:hover {
            color: #666;
        }
    .course-switch .course-direct-enroll-btn {
        display: none;
        float: right;
        width: 26%;
        font-size: 1.15rem;
        margin: 1.25% 0 0;
        padding: 0.65rem 0;
        border-radius: 10px;
    }
.course-intro-area {
    width: 100%;
    overflow: hidden;
    margin: 3% auto 0;
    padding: 0;
}
.course-intro-area .content-position-01.cia-01{
    margin: 0 auto 5%;
}
.course-intro-area .cia-left-column {
    /*float: left;*/
    display: inline-block;
    width: 71.25%;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
    .course-intro-area .cia-left-column h2 {
        color: #025EAD;
        font-size: 2.125rem;
        font-weight: 800;
        margin: 0 0 6% 0;
        padding: 0;
    }
        .course-intro-area .cia-left-column .course-title {
            font-size: 1.5rem;
            font-weight: 500;
        }
    .course-intro-area .cia-left-column li{
        color: #000;
        font-size: 1rem;
        font-weight: 300;
        line-height: 180%;
        list-style: none;
        padding: 1.5rem 0;
    }
    .course-intro-area .cia-left-column .desc-block-title li{
        color: #fff;
        font-size: 1.3125rem;
        font-weight: 500;
        margin: 1.5rem 0 0 0;
        padding: 0.5rem 0rem 0.5rem 2.6rem;
        border-radius: 20px 20px 0 0;
        transition:border-radius .8s;
        background-color: #284fa9;
    }
        .course-intro-area .cia-left-column .desc-block-title li.trans{
            border-radius: 20px;
            transition:border-radius .8s;
            transition-delay: 0.2s;
        }
        .course-intro-area .cia-left-column .desc-block-title img{
            float: right;
            padding: 1.1rem 1.25rem 0 0;
        }
        .course-intro-area .cia-left-column .desc-block-title img.rotate{
            transform: rotateX(180deg);
            position: relative;
            top: 1.1rem;
        }
        .course-intro-area .cia-left-column .desc-block-title img.arrow-down{
            display: none;
        }
    .course-intro-area .cia-left-column .desc-block-content{
        background-color: #f2f2f2;
        border-radius: 0 0 20px 20px;
    }
        .course-intro-area .cia-left-column .desc-block-content li{
            width: 90%;
            margin: 0 auto;
        }
        .course-intro-area .cia-left-column .desc-block-content.features li:not(:last-child){
            border-bottom: 1px solid #e6e6e6;
        }
        .course-intro-area .cia-left-column .desc-block-content.desc li{
            padding: 1.5rem 0 0;
        }
            .course-intro-area .cia-left-column .desc-block-content.desc li:last-child{
                padding: 1.5rem 0;
            }

.course-intro-area .cia-right-column {
    float: right;
    width: 24.75%;
    overflow: hidden;
    margin: 0;
    padding: 9.35% 0 0 3%;
}
    .course-intro-area .cia-right-column .course-direct-enroll-btn {
        width: 100%;
        font-size: 1.15rem;
        margin: 3% 0 25%;
        padding: 0.7rem 0;
        border-radius: 12px;
    }
    .course-intro-area .cia-right-column h3 {
        width: 100%;
        /*overflow: hidden;*/
        color: #a33030;
        font-size: 1.3125rem;
        font-weight: 600;
        line-height: 100%;
        margin: 0 0 8%;
        padding: 0;
    }
    .course-intro-area .cia-right-column ul {
        width: 100%;
        overflow: hidden;
    }
    .course-intro-area .cia-right-column li {
        list-style: none;
        font-size: 1.3125rem;
    }
        .course-intro-area .cia-right-column li.li-coming-soon-desc {
            color: #000;
            font-size: 1rem;
            font-weight: 300;
            line-height: 180%;
            margin: 2.275% 0 10%;
            padding: 0;
        }
        /*.course-intro-area .cia-right-column li.li-teacher-photo {
            float: left;
            width: 100%;
            margin: 0;
            padding: 0;
        }
            .course-intro-area .cia-right-column li.li-teacher-photo img {
                width: 100%;
            }
        .course-intro-area .cia-right-column li.li-teacher-name {
            float: left;
            color: #4d4d4d;
            font-weight: 600;
            margin: 2.55% 0 0;
        }
        .course-intro-area .cia-right-column li.li-teacher-desc {
            float: left;
            color: #727171;
            font-weight: 300;
            margin: 2.275% 0 10%;
        }*/
.crc-for-async {
    padding-top: 0 !important;
}
.course-direct-enroll-btn {
    width: 65%;
    overflow: hidden;
    background: #a33030;
    color: #FFF;
    font-size: 1.5rem;
    text-align: center;
    margin: 0 0 0 3%;
    padding: 1.15rem 0;
    border-radius: 18px;
}
    .course-direct-enroll-btn a:link, .course-direct-enroll-btn a:visited, .course-direct-enroll-btn a:hover {
        color: #FFF;
        text-decoration: none;
    }
.course-intro-area .cia-course {
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    padding: 3% 0 5%;
    background: url(../image/bg_course_intro_04.png) 0 0 repeat;
    background-size: 100%;
}
    .course-intro-area .cia-course h3{
        color: #fff;
        font-size: 2.125rem;
        margin-bottom: 2rem;
        font-weight: 800;
        text-align: center;
    }
    .course-intro-area .cia-course .course-list {
        width: 100%;
        overflow: hidden;
    }
        .course-intro-area .cia-course .course-list .flex-info {
            display: inline-flex;
            flex-direction: row;
            flex-wrap: wrap;
            /* justify-content: center;
            align-items: center; */
            width: 100%;
        }
        .course-intro-area .cia-course .course-list .flex-info .item-course-title {
            display: flex;
            flex: 0 1 14.28%;
            justify-content: center;
            align-items: center;
            color: #000;
            font-size: 1rem;
            font-weight: 700;
            text-align: center;
            padding: 3.5% 0;
            background-color: #f2f2f2;
        }
        .course-intro-area .cia-course .course-list .flex-info .item-course-title.title-01{
            border-radius: 8px 0 0 0;
        }
        .course-intro-area .cia-course .course-list .flex-info .item-course-title.title-07{
            border-radius: 0 8px 0 0;
        }
        .course-intro-area .cia-course .course-list:last-child .flex-info .flex-buy{
            border-radius: 0 0 8px 0;
        }
        .course-intro-area .cia-course .course-list:last-child .flex-info .item-course-content.content-01{
            border-radius: 0 0 0 8px;
        }
        .course-intro-area .cia-course .course-list .flex-info .item-course-content {
            display: flex;
            flex: 0 1 14.28%;
            justify-content: center;
            align-items: center;
            font-size: 1rem;
            text-align: center;
            padding: 2.5% 0;
            background-color: #fafafa;
        }
        .course-intro-area .cia-course .course-list .flex-info .flex-buy a{
            background: #a33030;
            color: #FFF;
            padding: 9% 26.5%;
            border-radius: 8px;
        }
        .course-intro-area .cia-course .course-list .flex-info .flex-buy a:link, .course-intro-area .cia-course .course-list .flex-info .flex-buy a:visited, .course-intro-area .cia-course .course-list .flex-info .flex-buy a:hover {
            color: #FFF;
        }
        .course-intro-area .cia-course .course-list.list-rwd .flex-info .rwd{
            display: none;
        }
    .course-intro-area .cia-course .world-time-clock-link {
        width: 100%;
        overflow: hidden;
        color: #FFF;
        font-size: 1.15rem;
        font-weight: 300;
        text-align: center;
        margin: 0 auto 2rem;
        padding: 0;
    }
        .course-intro-area .cia-course .world-time-clock-link a:link, .course-intro-area .cia-course .world-time-clock-link a:visited {
            color: #FFF;
        }
        .course-intro-area .cia-course .world-time-clock-link a:hover {
            color: #FFF;
            text-decoration: underline;
        }
        .course-intro-area .cia-course .world-time-clock-link .div-clock-icon {
            display: inline-block;
            width: 2.25%;
            margin-right: 0.25%;
            vertical-align: middle;
        }
            .course-intro-area .cia-course .world-time-clock-link .div-clock-icon img {
                width: 100%;
            }


    /* .course-intro-area .cia-course ul{
        float: left;
        display: inline-block;
        margin: 0;
        padding: 0;
    }
    .course-intro-area .cia-course li{
        float: left;
        color: #000;
        font-size: 1rem;
        list-style: none;
        text-align: center;
        padding: 2.72rem 0;
    }
        .course-intro-area .cia-course li.li-course-title{
            background-color: #f2f2f2;
            font-weight: 700;
        }
        .course-intro-area .cia-course li.li-course-content{
            background-color: #fafafa;
        } */
        /* .course-intro-area .cia-course .course-list:nth-of-type(2n-1) li.li-course-content{
            background-color: #fafafa;
        }
        .course-intro-area .cia-course .course-list:nth-of-type(2n) li.li-course-content{
            background-color: #f2f2f2;
        } */
    /* .course-intro-area .cia-course .course-list ul.ul-block-info{
        width: 42.85%;
    }
        .course-intro-area .cia-course .course-list ul.ul-block-info li{
            display: inline-block;
            width: 33.33%;
        }
            .course-intro-area .cia-course .course-list ul.ul-block-info.info-01 li.content-01, .course-intro-area .cia-course .course-list ul.ul-block-info.info-01 li.content-03, .course-intro-area .cia-course .course-list ul.ul-block-info.info-02 li.content-02{
                color: #000;
            }
            .course-intro-area .cia-course .course-list ul.ul-block-info.info-01 li.title-01{
                border-radius: 8px 0 0 0;
            }
            .title-fs {
                font-size: 1rem !important;
                padding: 1.97rem 0 !important;
            }
            .content-tl {
                font-size: 1rem !important;
                padding: 1.97rem 0 !important;
            }
    .course-intro-area .cia-course .course-list ul.ul-block-buy{
        width: 14.28%;
    }
        .course-intro-area .cia-course .course-list ul.ul-block-buy li{
            width: 100%;
        }
        .course-intro-area .cia-course .course-list ul.ul-block-buy li.li-course-title{
            border-radius: 0 8px 0 0;
        }
        .course-intro-area .cia-course .course-list ul.ul-block-buy a{
            background: #a33030;
            color: #FFF;
            padding: 9% 26.5%;
            border-radius: 8px;
        }
        .course-intro-area .cia-course .course-list ul.ul-block-buy a:link, .course-intro-area .cia-course .course-list ul.ul-block-buy a:visited, .course-intro-area .cia-course .course-list ul.ul-block-buy a:hover {
            color: #FFF;
        }
    .course-intro-area .cia-course .course-list:last-child ul.ul-block-info.info-01 li.content-01{
        border-radius: 0 0 0 8px;
    }
    .course-intro-area .cia-course .course-list:last-child ul.ul-block-buy li.li-course-content{
        border-radius: 0 0 8px 0;
    } */

    .cia-enroll-class {
        width: 100%;
        overflow: hidden;
        margin: 0 auto;
        padding: 3.5rem 0;
        border-top: #27448D 2px solid;
    }
        .cia-enroll-class h2{
            color: #284fa9;
            font-size: 2.125rem;
            margin-bottom: 3.5rem;
            font-weight: 800;
            text-align: center;
        }
        .cia-enroll-class ul {
            /* float: left; */
            display: inline-block;
            height: 30rem;
            width: 24.5%;
            overflow: hidden;
            text-align: left;
            margin: 0;
            padding: 0;
        }
        .cia-enroll-class img {
            width: auto;
        }
        .cia-enroll-class li {
            list-style: none;
            width: 80%;
        }
            .cia-enroll-class li.li-step {
                overflow: hidden;
                color: #284fa9;
                font-size: 2.3125rem;
                text-align: center;
                margin: 0 auto 1.15rem;
            }
                .cia-enroll-class li.li-step img{
                    margin: 0 0 0 0.8rem;
                    vertical-align: middle;
                }
            .cia-enroll-class li.li-enroll-img {
                margin: 15% 20%;
            }
            .cia-enroll-class li.li-enroll-desc {
                overflow: hidden;
                color: #000;
                font-size: 1.0625rem;
                text-align: center;
                margin: 0 auto;
            }
            .cia-enroll-class li.li-enroll-desc-02 {
                width: 95%;
                overflow: hidden;
                color: #666;
                font-size: 0.9375rem;
                text-align: center;
                margin: 10% auto 0;
            }

    .course-intro-area .cia-central-qa-column {
        width: 100%;
        overflow: hidden;
        margin: 0 auto;
        background: url(../image/bg_index_02.png) 0 0 repeat;
        background-size: 100%;
    }
        .course-intro-area .cia-central-qa-column .div-title-block {
            width: 100%;
            overflow: hidden;
            margin: 4% auto;
        }
            .course-intro-area .cia-central-qa-column .div-title-block h3 {
                color: #284fa9;
                font-size: 2.125rem;
                font-weight: 600;
                margin: 2% 0 0;
            }
        .course-intro-area .cia-central-qa-column .div-left-qa-list-block {
            float: left;
            width: 66%;
            min-height: 2rem;
            overflow: hidden;
            margin: 0 0 4.055%;
            padding: 0;
        }
        	.course-intro-area .cia-central-qa-column .div-left-qa-list-block ul {
        		width: 100%;
	            overflow: hidden;
	            margin: 0 auto 1.25rem;
	            padding: 0;
	            border:  1px solid#E8E8E8;
                border-radius: 0 12px 0 0;
                box-shadow: 1px 1px 6px #DDD;
        	}
	        	.course-intro-area .cia-central-qa-column .div-left-qa-list-block li.li-faq-title {
	                width: 100%;
	                overflow: hidden;
	                background-color: #FFF;
	                font-weight: 500;
	                margin: 0;
                    padding: 0;
                    list-style: none;
	            }
	                .course-intro-area .cia-central-qa-column .div-left-qa-list-block li.li-faq-title:hover {
	                    background-color: #F9F9F9;
	                }
	                .course-intro-area .cia-central-qa-column .div-left-qa-list-block .faq-user-photo-block {
	                    float: left;
	                    display: inline-block;
	                    width: 180px;
	                    height: 180px;
	                    overflow: hidden;
	                }
                        .course-intro-area .cia-central-qa-column .div-left-qa-list-block .faq-user-photo-block img {
                            width: 100%;
                        }
	                .course-intro-area .cia-central-qa-column .div-left-qa-list-block .faq-type-block {
                        float: left;
                        display: inline-block;
                        width: 60%;
                        overflow: hidden;
                        color: #4c4c4c;
                        font-size: 1.0625rem;
                        margin: 5% 0 0 5%;
                        padding: 0;
                    }
	                .course-intro-area .cia-central-qa-column .div-left-qa-list-block .faq-title-block {
	                    float: left;
	                    display: inline-block;
	                    width: 60%;
                        overflow: hidden;
                        color: #005ead;
                        font-size: 1.3125rem;
                        font-weight: 700;
	                    margin: 1.5% 0 0 5%;
	                    padding: 0;
	                }
                    .course-intro-area .cia-central-qa-column .div-left-qa-list-block .faq-user-info-block {
                        float: left;
                        display: inline-block;
                        width: 60%;
                        overflow: hidden;
                        color: #808080;
                        font-size: 1.0625rem;
                        /* font-weight: 500; */
                        margin: 1.5% 0 0 5%;
                        padding: 0;
                    }
	                .course-intro-area .cia-central-qa-column .div-left-qa-list-block .icon-faq-arrow {
	                    display: inline-block;
	                    width: 48px;
	                    overflow: hidden;
	                    margin: 4.25rem 0 0 0;
	                    /* -webkit-transition: -webkit-transform .8s ease-in-out;
	                    transition: transform .8s ease-in-out; */
	                }
	                    .course-intro-area .cia-central-qa-column .div-left-qa-list-block .icon-faq-arrow img {
	                        width: 100%;
	                        vertical-align: middle;
	                    }
	                .course-intro-area .cia-central-qa-column .div-left-qa-list-block .icon-arrow-switch {
	                    -webkit-transform: rotate(180deg);
	                    transform: rotate(180deg);
	                }
	            /* .course-intro-area .cia-central-qa-column .div-left-qa-list-block li.li-faq-desc {
	                display: none;
	                width: 82%;
	                overflow: hidden;
	                color: #333;
	                font-size: 0.875rem;
	                line-height: 180%;
	                margin: 0.25rem 0 1rem 6rem;
	                padding: 0;
	            }
                    .course-intro-area .cia-central-qa-column .div-left-qa-list-block li.li-faq-desc .qa-upload-img {
                        width: 100%;
                        margin: 1.5rem 0 1rem;
                    }
		            .course-intro-area .cia-central-qa-column .div-left-qa-list-block .div-reply-desc {
		                width: 100%;
		                overflow: hidden;
		                color: #333;
		                font-size: 0.875rem;
		                line-height: 180%;
		                margin: 0.5rem 0 1rem;
		                padding: 1.0625rem 0 0;
		                border-top: #DDD 1px dotted;
		            }
		            	.course-intro-area .cia-central-qa-column .div-left-qa-list-block .div-reply-user-photo {
		            		float: left;
		                    display: inline-block;
		                    width: 60px;
		                    height: 60px;
		                    overflow: hidden;
		                    background: #FFF;
		                    margin: 0 1rem 0 0;
		                    padding: 0;
		                    border: #CCC 1px solid;
		                    border-radius: 99em;
		            	}
                            .course-intro-area .cia-central-qa-column .div-left-qa-list-block .div-reply-user-photo img {
                                width: 110%;
                                vertical-align: middle;
                            }
                            .course-intro-area .cia-central-qa-column .div-left-qa-list-block .div-reply-user-photo .sys-defualt-user-pic {
                                width: 75%;
                                vertical-align: middle;
                            }
		            	.course-intro-area .cia-central-qa-column .div-left-qa-list-block .div-reply-user-info {
		                    color: #999;
		                    font-size: 1.0625rem;
		                    font-weight: 300;
		                    margin: 0 0 0 2.5%;
		                    padding: 0;
		                }
                            .course-intro-area .cia-central-qa-column .div-left-qa-list-block .qa-reply-img {
                                margin: 1.5rem 0 1rem;
                            } */
        .course-intro-area .cia-central-qa-column .div-right-qa-ui-block {
            float: right;
            width: 24%;
            overflow: hidden;
            text-align: center;
            margin: 0 0.5% 13.055% 0;
            padding: 1.5rem 0;
            border: #E8E8E8 1px solid;
            border-radius: 12px;
            box-shadow: 1px 1px 6px #DDD;
            background-color: #fff;
        }
        	.course-intro-area .cia-central-qa-column .div-right-qa-ui-block h3 {
                width: 75%;
                overflow: hidden;
                color: #284fa9;
                font-size: 2rem;
                font-weight: 600;
                text-align: center;
                margin: 1rem auto 0;
                padding: 0;
            }
            .course-intro-area .cia-central-qa-column .div-right-qa-ui-block h2 {
                width: 75%;
                color: #284fa9;
                font-size: 7.5rem;
                font-weight: 800;
                overflow: hidden;
                margin: 0 auto;
                padding: 0;
            }
            .course-intro-area .cia-central-qa-column .div-right-qa-ui-block .login-btn {
                width: 75%;
                background: #a33030;
	            color: #FFF;
	            font-size: 1.3125rem;
	            margin: 1rem auto 0.5rem;
	            padding: 1.5rem 0;
	            border-radius: 12px;
            }
            	.course-intro-area .cia-central-qa-column .div-right-qa-ui-block .login-btn a:link, .course-intro-area .cia-central-qa-column .div-right-qa-ui-block .login-btn a:visited, .course-intro-area .cia-central-qa-column .div-right-qa-ui-block .login-btn a:hover {
            		color: #FFF;
            	}
    .world {
        width: 100%;
        overflow: hidden;
        margin: 0 auto;
        padding: 3rem 0;
        background: url(../image/bg_world.png) 0 0 repeat;
        background-size: 100%;
    }
        .world ul {
            display: inline-block;
            overflow: hidden;
            margin: 0;
            padding: 0;
            vertical-align: middle;
        }
        .world img {
            width: auto;
        }
        .world li {
            width: auto;
            list-style: none;
            font-size: 3rem;
            font-weight: 600;
            /* padding: 0 0 0 0.5rem; */
        }
            .world ul.ul-world-01 {
                width: 47%;
                border-right: 0.15rem solid #CCC;
                margin: 0 0 0 3rem;
            }
                .world ul.ul-world-01 li.li-world-01 {
                    color: #000;
                    font-family: 'Noto Serif TC';
                    font-size: 3.2rem;
                    font-weight: 400;
                }
                .world ul.ul-world-01 li.li-world-02 {
                    color: #000;
                    font-family: 'Noto Serif TC';
                    font-size: 1.75rem;
                    font-weight: 300;
                    letter-spacing: 0.5rem;
                    text-align: right;
                    margin: 1.5rem 2.5rem 0 0;
                }
            .world ul.ul-world-02 {
                width: 42%;
                margin: 0 0 0 3rem;
            }
                .world ul.ul-world-02 li.li-world-01 {
                    font-size: 3rem;
                    font-weight: 700;
                    background: -webkit-gradient(linear,left top,right top,from(#4869B9),to(#008E2E));
                    background: linear-gradient( to right, #4869B9, #008E2E );
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    -webkit-box-decoration-break: clone;
                    box-decoration-break: clone;
                }

/***
 *** BEGIN Course Intro :: Async
 ***/

.course-intro-area .cia-left-column .async > li {
    background: #538135;
}
.course-intro-area .cia-left-column .async > li > span.async-deco-line {
    font-size: 1rem;
    margin: 0 1%;
    vertical-align: top;
}
.course-intro-area .cia-left-column .async > li > span.async-desc-title {
    font-size: 0.938rem;
    letter-spacing: 0.25rem;
}
     
/***
 *** BEGIN Course Intro 02
 ***/

.main-visual-course-intro-02 {
    width: 100%;
    overflow: hidden;
    /*background: url(../image/bg_course_intro_01.png) 50% 63% repeat-x;*/
    background-color: #015EAE;
    /*background-size: 125%;*/
    margin: 0 auto;
    padding: 0;
}
    .main-visual-course-intro-02 .page-title {
        float: left;
        display: inline-block;
        overflow: hidden;
        color: #F8AE01;
        font-size: 2em;
        font-weight: 500;
        letter-spacing: 1px;
        margin: 9.174% 0 9.443%;
        padding: 0;
        border-bottom: none;
    }
    .main-visual-course-intro-02 .deco-pic {
        float: right;
        width: 27.878%;
        overflow: hidden;
        margin: 3.45% 0 0;
        padding: 0;
    }
        .main-visual-course-intro-02 .deco-pic img {
            width: 100%;
            vertical-align: bottom;
        }
.course-intro-02-area {
    width: 100%;
    overflow: hidden;
    margin: 4.5rem auto 0;
    padding: 0;
}
    .course-intro-02-area .ci02-slide-desc-block-01 {
        width: 100%;
        overflow: hidden;
        margin: 0 auto 4.5rem;
        padding: 0;
    }
        .course-intro-02-area .ci02-slide-desc-block-01 .content-position-01 {
            width: 1180px;
        }
            .course-intro-02-area .ci02-slide-desc-block-01 .desc-block-01-right {
                float: right;
                display: inline-block;
                width: 49.18%;
                overflow: hidden;
                margin: 0;
                padding: 0;
            }
                .course-intro-02-area .ci02-slide-desc-block-01 .desc-block-01-right img {
                    width: 100%;
                }
            .course-intro-02-area .ci02-slide-desc-block-01 .desc-block-01-left {
                float: left;
                display: inline-block;
                width: 48%;
                overflow: hidden;
                margin: 3% 0 0;
                padding: 0;
            }
                .course-intro-02-area .ci02-slide-desc-block-01 .desc-block-01-left h2 {
                    width: 100%;
                    overflow: hidden;
                    color: #025EAD;
                    font-size: 1.65rem;
                    font-weight: 400;
                    text-align: center;
                    margin: 0 0 3.413%;
                    padding: 0;
                }
                .course-intro-02-area .ci02-slide-desc-block-01 .desc-block-01-left p {
                    width: 100%;
                    overflow: hidden;
                    color: #727171;
                    font-size: 1.15rem;
                    font-weight: 300;
                    line-height: 180%;
                    margin: 0;
                    padding: 0;
                }
    .course-intro-02-area .ci02-slide-desc-block-02 {
        width: 100%;
        overflow: hidden;
        background: #fafafa;
        margin: 0 auto 4.5rem;
        padding: 4.5rem 0;
    }
        .course-intro-02-area .ci02-slide-desc-block-02 .content-position-01 {
            width: 1180px;
        }
            .course-intro-02-area .ci02-slide-desc-block-02 h2 {
                width: 100%;
                overflow: hidden;
                color: #025EAD;
                font-size: 1.65rem;
                font-weight: 400;
                text-align: center;
                margin: 0 0 3.413%;
                padding: 0;
            }
            .course-intro-02-area .ci02-slide-desc-block-02 ul {
                float: left;
                display: inline-block;
                width: 29%;
                overflow: hidden;
                text-align: center;
                margin: 0 2%;
                padding: 0;
            }
            .course-intro-02-area .ci02-slide-desc-block-02 li {
                list-style: none;
            }
                .course-intro-02-area .ci02-slide-desc-block-02 li.li-deco-pic {
                    float: left;
                    display: inline-block;
                    width: 34.45%;
                    overflow: hidden;
                    text-align: center;
                    margin: 0 0 9.32%;
                    padding: 0;
                }
                    .course-intro-02-area .ci02-slide-desc-block-02 li.li-deco-pic img {
                        width: 100%;
                    }
                .course-intro-02-area .ci02-slide-desc-block-02 li.li-desc-text {
                    float: right;
                    display: inline-block;
                    width: 50%;
                    overflow: hidden;
                    color: #727171;
                    font-size: 1rem;
                    font-weight: 300;
                    line-height: 150%;
                    text-align: left;
                    margin: 1.25rem 0 0;
                    padding: 0;
                }
    .course-intro-02-area .ci02-slide-desc-block-03 {
        width: 100%;
        overflow: hidden;
        margin: 0 auto 4.5rem;
        padding: 0;
    }
        .course-intro-02-area .ci02-slide-desc-block-03 .content-position-01 {
            width: 1180px;
        }
            .course-intro-02-area .ci02-slide-desc-block-03 h2 {
                width: 100%;
                overflow: hidden;
                color: #025EAD;
                font-size: 1.65rem;
                font-weight: 400;
                text-align: center;
                margin: 0 0 1rem;
                padding: 0;
            }
            .course-intro-02-area .ci02-slide-desc-block-03 .remind-text {
                width: 100%;
                overflow: hidden;
                color: #AAA;
                font-size: 0.875rem;
                font-weight: 300;
                line-height: 150%;
                text-align: center;
                margin: 0 auto 2.5rem;
                padding: 0;
            }
            .course-intro-02-area .ci02-slide-desc-block-03 ul {
                float: left;
                display: inline-block;
                width: 20.5%;
                overflow: hidden;
                text-align: center;
                margin: 0 2%;
                padding: 0;
            }
            .course-intro-02-area .ci02-slide-desc-block-03 li {
                list-style: none;
            }
                .course-intro-02-area .ci02-slide-desc-block-03 li.li-desc-title {
                    width: 100%;
                    overflow: hidden;
                    color: #F8AE01;
                    font-size: 1.25rem;
                    font-weight: 400;
                    text-align: center;
                    margin: 0 0 9.32%;
                    padding: 0;
                }
                    .course-intro-02-area .ci02-slide-desc-block-03 .num-circle-icon {
                        display: inline-block;
                        width: 2rem;
                        height: 1.55rem;
                        overflow: hidden;
                        background: #F8AE01;
                        color: #FFF;
                        font-size: 1rem;
                        font-weight: 400;
                        line-height: 100%;
                        margin: 0 0 0 1.5%;
                        padding: 0.45rem 0 0;
                        border-radius: 99em;
                        vertical-align: middle;
                    }
                .course-intro-02-area .ci02-slide-desc-block-03 li.li-deco-pic {
                    width: 65%;
                    overflow: hidden;
                    text-align: center;
                    margin: 0 auto 9.32%;
                    padding: 0;
                }
                    .course-intro-02-area .ci02-slide-desc-block-03 li.li-deco-pic img {
                        width: 100%;
                    }
                .course-intro-02-area .ci02-slide-desc-block-03 li.li-desc-text {
                    width: 100%;
                    overflow: hidden;
                    color: #727171;
                    font-size: 1rem;
                    font-weight: 300;
                    line-height: 150%;
                    text-align: left;
                    margin: 1.25rem auto 0;
                    padding: 0;
                }
    .course-intro-02-area .ci02-slide-desc-block-04 {
        width: 100%;
        background: url(../image/bg_course_intro_02.png) 50% 0 no-repeat;
        background-color: #015EAE;
        background-size: 100%;
        margin: 0 auto;
        padding: 4.5rem 0;
    }
        .course-intro-02-area .ci02-slide-desc-block-04 .content-position-01 {
            width: 1180px;
        }
            .course-intro-02-area .ci02-slide-desc-block-04 h2 {
                width: 100%;
                overflow: hidden;
                color: #FFF;
                font-size: 1.65rem;
                font-weight: 400;
                text-align: center;
                margin: 0 0 3.413%;
                padding: 0;
            }
            .course-intro-02-area .ci02-slide-desc-block-04 ul {
                clear: both;
                width: 100%;
                overflow: hidden;
                background: #FFF;
                margin: 0 auto 2%;
                padding: 0 0 1rem;
                border-radius: 0.75rem;
            }
            .course-intro-02-area .ci02-slide-desc-block-04 li {
                list-style: none;
            }
                .course-intro-02-area .ci02-slide-desc-block-04 li.li-q-title {
                    width: 94%;
                    overflow: hidden;
                    background: #F8AE01;
                    color: #025EAD;
                    font-size: 1.25rem;
                    font-weight: 500;
                    margin: 0 auto 1rem;
                    padding: 1.5% 3%;
                }
                .course-intro-02-area .ci02-slide-desc-block-04 li.li-q-text {
                    width: 88%;
                    overflow: hidden;
                    color: #727171;
                    font-size: 1rem;
                    font-weight: 300;
                    line-height: 150%;
                    text-align: left;
                    margin: 0 auto;
                    padding: 1.5% 2%;
                    border-bottom: #D8D8D8 1px solid;
                }
                    .course-intro-02-area .ci02-slide-desc-block-04 li.li-q-text a:link, .course-intro-02-area .ci02-slide-desc-block-04 li.li-q-text a:visited {
                        color: #025EAD;
                        font-weight: 400;
                    }
                    .course-intro-02-area .ci02-slide-desc-block-04 li.li-q-text a:hover {
                        color: #025EAD;
                        font-weight: 400;
                        text-decoration: underline;
                    }
                .course-intro-02-area .ci02-slide-desc-block-04 .q-text-link-icon {
                    width: 1.15rem;
                    overflow: hidden;
                    margin: 0 0 0 0.75%;
                    vertical-align: middle;
                }
                .course-intro-02-area .ci02-slide-desc-block-04 li.border-none {
                    border: none;
                }
    .course-intro-02-area .ci02-slide-desc-block-05 {
        width: 100%;
        overflow: hidden;
        margin: 0 auto 2.25rem;
        padding: 0;
    }
        .course-intro-02-area .ci02-slide-desc-block-05 .content-position-01 {
            width: 1180px;
        }
            .course-intro-02-area .ci02-slide-desc-block-05 .desc-block-05-right {
                float: right;
                display: inline-block;
                width: 49.18%;
                overflow: hidden;
                margin: 0;
                padding: 0;
            }
                .course-intro-02-area .ci02-slide-desc-block-05 .desc-block-05-right img {
                    width: 100%;
                }
            .course-intro-02-area .ci02-slide-desc-block-05 .desc-block-05-left {
                float: left;
                display: inline-block;
                width: 48%;
                overflow: hidden;
                margin: 3% 0 0;
                padding: 0;
            }
                .course-intro-02-area .ci02-slide-desc-block-05 .desc-block-05-left h2 {
                    width: 100%;
                    overflow: hidden;
                    color: #025EAD;
                    font-size: 1.65rem;
                    font-weight: 400;
                    text-align: center;
                    margin: 0 0 3.413%;
                    padding: 0;
                }
                .course-intro-02-area .ci02-slide-desc-block-05 .desc-block-05-left p {
                    width: 100%;
                    overflow: hidden;
                    color: #727171;
                    font-size: 1.15rem;
                    font-weight: 300;
                    line-height: 180%;
                    margin: 0;
                    padding: 0;
                }
    .course-intro-02-area .ci02-slide-desc-block-06 {
        width: 100%;
        overflow: hidden;
        margin: 0 auto 4.5rem;
        padding: 0;
    }
        .course-intro-02-area .ci02-slide-desc-block-06 .content-position-01 {
            width: 1180px;
        }
            .course-intro-02-area .ci02-slide-desc-block-06 .desc-block-06-left {
                float: left;
                display: inline-block;
                width: 49.18%;
                overflow: hidden;
                margin: 0;
                padding: 0;
            }
                .course-intro-02-area .ci02-slide-desc-block-06 .desc-block-06-left img {
                    width: 100%;
                }
            .course-intro-02-area .ci02-slide-desc-block-06 .desc-block-06-right {
                float: right;
                display: inline-block;
                width: 48%;
                overflow: hidden;
                margin: 3% 0 0;
                padding: 0;
            }
                .course-intro-02-area .ci02-slide-desc-block-06 .desc-block-06-right h2 {
                    width: 100%;
                    overflow: hidden;
                    color: #025EAD;
                    font-size: 1.65rem;
                    font-weight: 400;
                    text-align: center;
                    margin: 0 0 3.413%;
                    padding: 0;
                }
                .course-intro-02-area .ci02-slide-desc-block-06 .desc-block-06-right p {
                    width: 100%;
                    overflow: hidden;
                    color: #727171;
                    font-size: 1.15rem;
                    font-weight: 300;
                    line-height: 180%;
                    margin: 0;
                    padding: 0;
                }
    .course-intro-02-area .ci02-slide-desc-block-07 {
        position: relative;
        width: 100%;
        overflow: hidden;
        background: url(../image/bg_course_intro_03.png) 50% 0 repeat;
        background-color: #015EAE;
        background-size: 100%;
        margin: 0 auto 4.5rem;
        padding: 4.5rem 0;
    }
        .course-intro-02-area .ci02-slide-desc-block-07 .content-position-01 {
            /*width: 88%;
            max-width: 1280px;*/
            width: 1180px;
        }
            .course-intro-02-area .ci02-slide-desc-block-07 h2 {
                width: 100%;
                overflow: hidden;
                color: #FFF;
                font-size: 1.65rem;
                font-weight: 400;
                text-align: center;
                margin: 0 auto 3.413%;
                padding: 0;
            }
            .course-intro-02-area .ci02-slide-desc-block-07 .btn-left {
                float: left;
                display: inline-block;
                width: 5%;
                overflow: hidden;
                margin: 0 auto;
                padding: 0;
            }
                .course-intro-02-area .ci02-slide-desc-block-07 .btn-left img {
                    width: 100%;
                }
            .course-intro-02-area .ci02-slide-desc-block-07 .btn-right {
                float: right;
                display: inline-block;
                width: 5%;
                overflow: hidden;
                margin: 0 auto;
                padding: 0;
            }
                .course-intro-02-area .ci02-slide-desc-block-07 .btn-right img {
                    width: 100%;
                }
            .course-intro-02-area .ci02-slide-desc-block-07 ul {
                float: left;
                display: inline-block;
                width: 31.1%;
                overflow: hidden;
                background: RGBA( 255, 255, 255, 0.88 );
                text-align: center;
                margin: 0 2% 4.055% 0;
                padding: 0;
                border: #B5B5B6 1px solid;
                border-radius: 12px;
            }
                .course-intro-02-area .ci02-slide-desc-block-07 ul a:link, .course-intro-02-area .ci02-slide-desc-block-07 ul a:visited, .course-intro-02-area .ci02-slide-desc-block-07 ul a:hover {
                    text-decoration: none;
                }
            .course-intro-02-area .ci02-slide-desc-block-07 li {
                list-style: none;
            }
                .course-intro-02-area .ci02-slide-desc-block-07 li.li-course-name {
                    width: 96%;
                    height: 56px;
                    overflow: hidden;
                    color: #025EAD;
                    font-size: 1.65rem;
                    font-weight: 500;
                    line-height: 100%;
                    text-align: center;
                    margin: 2rem 0 1.5rem;
                    padding: 0;
                }
                    .course-intro-02-area .ci02-slide-desc-block-07 .course-name-eng {
                        color: #025EAD;
                        font-size: 1.25rem;
                        font-weight: 400;
                    }
                .course-intro-02-area .ci02-slide-desc-block-07 li.li-course-level {
                    width: 96%;
                    overflow: hidden;
                    color: #F8AE01;
                    font-size: 1.35rem;
                    font-weight: 400;
                    line-height: 100%;
                    text-align: center;
                    margin: 0 0 1rem;
                    padding: 0;
                }
                .course-intro-02-area .ci02-slide-desc-block-07 li.li-course-desc {
                    width: 92%;
                    overflow: hidden;
                    color: #727171;
                    font-size: 1em;
                    font-weight: 300;
                    line-height: 150%;
                    text-align: left;
                    margin: 0 auto 1.5rem;
                    padding: 0;
                }
                .course-intro-02-area .ci02-slide-desc-block-07 li.li-course-fee {
                    width: 92%;
                    overflow: hidden;
                    color: #025EAD;
                    font-size: 1.35em;
                    font-weight: 400;
                    line-height: 100%;
                    text-align: center;
                    margin: 0 auto 2rem;
                    padding: 0;
                }
                .course-intro-02-area .ci02-slide-desc-block-07 li.li-more-btn {
                    width: 41.66%;
                    overflow: hidden;
                    background: #025EAD;
                    color: #FFF;
                    font-size: 1.3125em;
                    font-weight: 300;
                    line-height: 100%;
                    text-align: center;
                    margin: 0 auto 2rem;
                    padding: 3% 0;
                    border-radius: 8px;
                }
                    .course-intro-02-area .ci02-slide-desc-block-07 li.li-more-btn a:link, .course-intro-02-area .ci02-slide-desc-block-07 li.li-more-btn a:visited, .course-intro-02-area .ci02-slide-desc-block-07 li.li-more-btn a:hover {
                        color: #FFF;
                    }


/***
 *** BEGIN Course Intro Video
 ***/

#course-video iframe {
    width: 560px;
    height: 315px;
}

/***
 *** BEGIN Course Filter
 ***/

.course-filter-area {
    position: relative;
    width: 50%;
    max-width:450px;
    min-width: 320px;
    background-color: #f8f8f8;
    text-align: center;
    margin: 0 auto;
    padding: 40px 10px;
    border: #D5D5D5 1px solid;
    box-shadow: 1px 1px 16px #E5E5E5;
}
    .course-filter-area h4 {
        color: #025EAD;
        font-size: 1.5rem;
        font-weight: 500;
        letter-spacing: 0.05em;
        line-height: 1.2;
        margin-bottom: 0.5rem;
    }
    .course-filter-area form {
        margin: 5% auto;
        padding: 1% 5%;
    }
        .course-filter-area .input-group {
            position: relative;
            width: 100%;
            overflow: hidden;
            background: #FFF;
            margin: 0 auto 4.445%;
            border: #E2E2E2 1px solid;
            border-radius: 40px;
        }
            .course-filter-area .input-group .select-lable-text {
                float: left;
                width: 33%;
                color: #025EAD;
                font-size: 1rem;
                text-align: center;
                padding: 0.375rem 0.75rem;
                border-right: #E2E2E2 1px solid;
                border-top-left-radius: 40px;
                border-bottom-left-radius: 40px;
            }
            .course-filter-area .input-group .select-main-ui {
                float: right;
                width: 56%;
                color: #495057;
                font-size: 1rem;
                margin-right: 2%;
                padding: 0.375rem 0.75rem;
                border: none;
            }
            .course-filter-area .btn-course-filter {
                width: 100%;
                background: #025EAD;
                color: #FFF;
                font-size: 1rem;
                font-weight: 400;
                line-height: 1.5;
                padding: 0.375rem 0.75rem;
                border: 1px solid transparent;
                border-radius: 40px;
            }


/***
 *** BEGIN Trial Lesson Pop-up UI
 ***/

.trial-lesson-area {
    position: relative;
    width: 87%;
    max-width:640px;
    min-width: 320px;
    margin: 0 auto;
    padding: 2rem 2.5%;
}
    .trial-lesson-area h2 {
        color: #025EAD;
        font-size: 1.15rem;
        line-height: 100%;
        margin: 0 0 1.25rem;
        padding: 0 0 0 3%;
    }
        .trial-lesson-area .eng-course-title {
            font-size: 0.938rem;
            font-weight: 400;
            margin-left: 0.25rem;
        }
    .trial-lesson-area .timezone-desc {
        width: 88%;
        color: #727171;
        font-size: 0.813rem;
        font-weight: 300;
        line-height: 100%;
        margin: 0 0 1.25rem;
        padding: 3%;
        border: #999 1px solid;
        border-radius: 6px;
    }
        .trial-lesson-area .timezone-desc img {
            width: 5%;
            margin-right: 1% !important;
        }
    .trial-lesson-area ul {
        width: 94%;
        overflow: hidden;
        margin: 0.5rem auto 0;
        padding: 0.75rem 3%;
        border-bottom: #CCC 1px dotted;
    }
        .trial-lesson-area li.li-course-list-desc {
            float: left;
            display: inline-block;
            overflow: hidden;
            color: #727171;
            font-size: 1rem;
            font-weight: 300;
            line-height: 100%;
            list-style: none;
        }
            .trial-lesson-area .trial-lesson-date {
                width: 32%;
                margin: 0.5rem 0 0;
                padding: 0;
            }
            .trial-lesson-area .trial-lesson-time {
                width: 36%;
                margin: 0.5rem 0 0 0.5rem;
                padding: 0;
            }
            .trial-lesson-area .trial-lesson-subscribe-btn {
                float: right;
                display: inline-block;
                width: 23%;
                background: #F8AE01;
                font-size: 1em;
                color: #FFF;
                text-align: center;
                margin: 0 3% 0 0;
                padding: 0.25rem 0;
                border: none;
                border-radius: 6px;
            }


/***
 *** BEGIN Subscriptions
 ***/

.main-visual-subscriptions {
    width: 100%;
    overflow: hidden;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#102b51+0,1b5889+50,102b51+100 */
    background: #102b51; /* Old browsers */
    background: url(../image/bg_home_section_03.png) 0 0 repeat, -moz-linear-gradient(left,  #102b51 0%, #1b5889 50%, #102b51 100%); /* FF3.6-15 */
    background: url(../image/bg_home_section_03.png) 0 0 repeat, -webkit-linear-gradient(left,  #102b51 0%,#1b5889 50%,#102b51 100%); /* Chrome10-25,Safari5.1-6 */
    background: url(../image/bg_home_section_03.png) 0 0 repeat, linear-gradient(to right,  #102b51 0%,#1b5889 50%,#102b51 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#102b51', endColorstr='#102b51',GradientType=1 ); /* IE6-9 */
    box-shadow: inset 0 1px 18px #333;
    background-size: 88%;
    margin: 0 auto;
    padding: 0;
}
    .main-visual-subscriptions .page-title{
        float: left;
        display: inline-block;
        overflow: hidden;
        color: #FFF;
        font-size: 3rem;
        font-weight: 500;
        letter-spacing: 1px;
        margin: 3% 0 3% 4.5%;
        padding: 0;
        border-bottom: none;
    }
    .main-visual-subscriptions .deco-pic {
        /*position: absolute;
        right: 0;
        bottom: 0;*/
        float: right;
        width: 27.878%;
        overflow: hidden;
        margin: 9.11% 0 0;
        padding: 0;
    }
        .main-visual-subscriptions .deco-pic img {
            width: 100%;
            vertical-align: bottom;
        }
.main-visual-subscriptions-about-us{
    width: 100%;
    overflow: hidden;
    background: url(../image/bg_about_banner_01.jpg) 50% 63% repeat-x;
    background-size: 93%;
    margin: 0 auto;
    padding: 0;
}
    .main-visual-subscriptions-about-us .page-title{
        float: left;
        display: inline-block;
        overflow: hidden;
        color: #FFF;
        font-size: 3.65em;
        font-weight: 700;
        letter-spacing: 3.75px;
        margin: 3% 0;
        padding-left: 3.5%;
        border-bottom: none;
    }
.subscription-info-table {
    width: 100%;
    overflow: hidden;
    margin: 4.412% auto 8.824%;
    padding: 0;
}
    .subscription-info-table ul {
        width: 100%;
        overflow: hidden;
        margin: 0 auto;
        padding: 0;
        border-bottom: #E6E6E6 1px solid;
    }
    .subscription-info-table ul.ul-si-visibility {
        display: none;
    }
    .subscription-info-table ul.ul-action-now {
        
    }
        .subscription-info-table li.li-sit-large {
            float: left;
            display: inline-block;
            width: 38.04%;
            overflow: hidden;
            margin: 0;
            padding: 1.65% 0;
        }
        .subscription-info-table li.li-sit-mid {
            float: left;
            display: inline-block;
            width: 14.3%;
            overflow: hidden;
            margin: 0 2%;
            padding: 1.65% 0;
        }
        .subscription-info-table li.li-sit-small {
            float: left;
            display: inline-block;
            width: 2.24%;
            overflow: hidden;
            margin: 0 2%;
            padding: 1.65% 0;
        }
            .subscription-info-table li.li-sit-small img {
                width: 100%;
            }
            .subscription-info-table .column-computer-show {
                display: inline-block;
            }
            .subscription-info-table .column-mobile-show {
                display: none !important;
            }
            .subscription-info-table .column-mobile-hide {
                display: none !important;
            }
            .subscription-info-table .btn-sign-up {
                display: inline-block;
                width: 96%;
                overflow: hidden;
                background: #FFF;
                color: #005ead;
                font-size: 1em;
                font-weight: 400;
                letter-spacing: 1px;
                text-align: center;
                margin: 0 auto;
                padding: 3% 0;
                border: #005ead 1px solid;
                border-radius: 40px;
                transition: background 0.3s linear;
            }
                .subscription-info-table .btn-sign-up:hover {
                    background: #005ead;
                }
                .subscription-info-table .btn-sign-up a:link, .subscription-info-table .btn-sign-up a:visited  {
                    color: #005ead;
                }
                .subscription-info-table .btn-sign-up a:hover  {
                    color: #FFF;
                    text-decoration: none;
                }
            .subscription-info-table .plans-title {
                width: 96%;
                overflow: hidden;
                color: #333;
                font-size: 1.5em;
                font-weight: 500;
                letter-spacing: 1px;
                text-align: center;
                margin: 0 auto;
                padding: 0;
            }
            .subscription-info-table .plans-payment-info {
                width: 96%;
                overflow: hidden;
                color: #333;
                font-size: 0.813em;
                font-weight: 300;
                letter-spacing: 1px;
                text-align: center;
                margin: 0 auto;
                padding: 0;
            }
            .subscription-info-table .plans-desc {
                width: 96%;
                overflow: hidden;
                color: #808080;
                font-size: 1em;
                font-weight: 300;
                text-align: center;
                margin: 0 auto;
                padding: 0;
            }
            .subscription-info-table .plans-desc-icon-q {
                width: 96%;
                overflow: hidden;
                text-align: center;
                margin: 0 auto;
                padding: 0;
            }
            .subscription-info-table .plans-desc-icon-check {
                width: 96%;
                overflow: hidden;
                text-align: center;
                margin: 0 auto;
                padding: 0;
            }


/***
 *** BEGIN Privacy Policy
 ***/

.pp-info-table {
    width: 100%;
    overflow: hidden;
    margin: 3.537% auto;
    padding: 0;
}
    .pp-info-table .pp-info-title {
        width: 100%;
        overflow: hidden;
        color: #000;
        font-size: 1.5em;
        font-weight: 500;
        letter-spacing: 1px;
        margin: 0 auto 3%;
        padding: 0;
    }
    .pp-info-table .pp-info-sub-title {
        width: 100%;
        overflow: hidden;
        color: #000;
        font-size: 1.15em;
        font-weight: 700;
        text-decoration: underline;
        margin: 2.4% auto 1.2%;
        padding: 0;
    }
    .pp-info-table p.pp-info-desc {
        width: 100%;
        overflow: hidden;
        color: #000;
        font-size: 0.875em;
        font-weight: 300;
        line-height: 180%;
        text-align: justify;
        margin: 0 auto;
        padding: 0;
    }
        .pp-info-table p.pp-info-desc a:link, .pp-info-table p.pp-info-desc a:visited, .pp-info-table p.pp-info-desc a:hover {
            color: #005ead;
            font-weight: 400;
        }
    .pp-info-table ul {
        width: 97%;
        margin: 0 auto;
        padding: 0 0 0 3%;
    }
    .pp-info-table li {
        width: 100%;
        color: #333;
        font-size: 0.875em;
        font-weight: 300;
        line-height: 180%;
        margin: 1.2% auto 0;
        padding: 0;
    }


/***
 *** BEGIN FAQ
 ***/

.faq-area {
    width: 100%;
    overflow: hidden;
    margin: 3.6rem auto;
    padding: 0;
}
    .faq-area .faq-left-column {
        clear: both;
        display: block;
        width: 96%;
        overflow: hidden;
        margin: 0 auto;
        padding: 0;
    }
        .faq-area .faq-left-column ul {
            width: 100%;
            margin: 0 auto;
        }
        .faq-area .faq-left-column li {
            list-style: none;
        }
            .faq-area .faq-left-column li.li-faq-title {
                width: 90.6%;
                overflow: hidden;
                background-color: #FFF;
                color: #025EAD;
                font-size: 1em;
                font-weight: 500;
                margin: 0 auto 2%;
                padding: 1.25% 2.5%;
                border: #D8D8D8 1px solid;
                border-radius: 8px;
                box-shadow: 1px 1px 6px #B6B6B6;
            }
                .faq-area .faq-left-column li.li-faq-title:hover {
                    background-color: #F9F9F9;
                }
                .faq-area .faq-left-column .faq-title-block {
                    float: left;
                    display: inline-block;
                    width: 92%;
                    overflow: hidden;
                    margin: 0;
                    padding: 0;
                }
                .faq-area .faq-left-column .icon-faq-arrow {
                    float: right;
                    display: inline-block;
                    width: 1.5%;
                    overflow: hidden;
                    margin: 0;
                    -webkit-transition: -webkit-transform .8s ease-in-out;
                    transition: transform .8s ease-in-out;
                }
                    .faq-area .faq-left-column .icon-faq-arrow img {
                        width: 100%;
                        vertical-align: middle;
                    }
                .faq-area .faq-left-column .icon-arrow-switch {
                    -webkit-transform: rotate(180deg);
                    transform: rotate(180deg);
                }
            .faq-area .faq-left-column li.li-faq-desc {
                display: none;
                width: 90.6%;
                overflow: hidden;
                color: #000;
                font-size: 0.875em;
                line-height: 200%;
                margin: 0 0 3.862%;
                padding: 0 3.862%;
            }
                .faq-area .faq-left-column li.li-faq-desc a:link, .faq-area .faq-left-column li.li-faq-desc a:visited, .faq-area .faq-left-column li.li-faq-desc a:hover {
                    text-decoration: underline;
                }
                .faq-area .faq-left-column li.li-faq-desc .img-payment-sop {
                    width: 100%;
                    margin: 0.5rem auto;
                    border-radius: 6px;
                }
    .faq-area .faq-right-column {
        float: right;
        display: inline-block;
        width: 29.72%;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }
        .faq-area .faq-right-column h3 {
            width: 96%;
            overflow: hidden;
            color: #025EAD;
            font-size: 1.3125em;
            font-weight: 500;
            margin: 0 0 4.552%;
            padding: 0 3.862%;
        }
        .faq-area .faq-right-column ul {
            width: 99%;
            margin: 0 auto 9.095%;
        }
            .faq-area .faq-right-column ul.ul-courses-recommended {
                padding: 4.552% 0 0;
            }
        .faq-area .faq-right-column li {
            list-style: none;
        }
            .faq-area .faq-right-column li.li-courses-recommended {
                width: 92%;
                overflow: hidden;
                background: url(../image/icon_circle_01.png) 2% 25% no-repeat;
                color: #000;
                font-size: 0.875em;
                line-height: 180%;
                margin: 0 auto 4.552%;
                padding: 2.299% 0 2.299% 7.35%;
                border: #E8E8E8 1px solid;
                border-radius: 8px;
            }
                .faq-area .faq-right-column li.li-courses-recommended:hover {
                    background-color: #F9F9F9;
                }
                .faq-area .faq-right-column li.li-courses-recommended a:link, .faq-area .faq-right-column li.li-courses-recommended a:visited, .faq-area .faq-right-column li.li-courses-recommended a:hover {
                    color: #000;
                }
                .faq-area .faq-right-column li.li-courses-recommended .course-grade {
                    width: 95%;
                    color: #999 !important;
                    font-size: 0.75rem;
                    font-weight: 300;
                    margin-top: 0.35rem;
                    padding-top: 0.35rem;
                    border-top: #E8E8E8 1px dotted;
                }


/***
 *** BEGIN Blog
 ***/

 .blog-area {
    width: 100%;
    overflow: hidden;
    margin: 3.537% auto;
    padding: 0;
}
    .blog-area .blog-left-column {
        float: left;
        display: inline-block;
        width: 68%;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }
        .blog-area .blog-left-column h1 {
            width: 100%;
            overflow: hidden;
            color: #0061A1;
            font-size: 1.5rem;
            font-weight: 400;
            line-height: 150%;
            margin: 0 auto 1.25rem;
            padding: 0;
        }
        .blog-area .blog-left-column .blog-list {
            width: 100%;
            display: flex;
            align-items: center;
        }
            .blog-area .blog-left-column .blog-list iframe {
                width: 246px;
                height: 152px;
                border-radius: 6px;
            }
        .blog-area .blog-left-column .blog-list:not(#blog-list-last){
            margin: 0 0 4.552%;
        }
            .blog-area .blog-left-column .blog-list a.img-main{
                width: 380px;
            }
                .blog-area .blog-left-column .blog-list a.img-main img{
                    width: 100%;
                    border-radius: 6px;
                }
                .blog-area .blog-left-column .blog-list .div-pic-replacement {
                    display: inline-block;
                    width: 100%;
                    height: 11.55rem;
                    overflow: hidden;
                    background: #E6E6E6;
                    margin: 0;
                    padding: 0;
                    border-radius: 6px;
                }
            .blog-area .blog-left-column .blog-list ul{
                width: 100%;
                margin: 0 auto;
                padding-left: 20px;
            }
                .blog-area .blog-left-column .blog-list li{
                    list-style: none;
                }
                .blog-area .blog-left-column .blog-list li.li-title{
                    color: #025EAD;
                    font-size: 1.125rem;
                    font-weight: 500;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
                    .blog-area .blog-left-column .blog-list li.li-title a:link, .blog-area .blog-left-column .blog-list li.li-title a:visited, .blog-area .blog-left-column .blog-list li.li-title a:hover{
                        color: #025EAD;
                    }
                .blog-area .blog-left-column .blog-list li.li-content{
                    font-size: 1rem;
                    font-weight: 300;
                    color: #727171;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 3;
                    -webkit-box-orient: vertical;
                }
                    .blog-area .blog-left-column .blog-list li.li-content a:link, .blog-area .blog-left-column .blog-list li.li-content a:visited, .blog-area .blog-left-column .blog-list li.li-content a:hover{
                        color: #727171;
                    }
                .blog-area .blog-left-column .blog-list li.li-content, .blog-area .blog-left-column .blog-list li.li-author-time{
                    padding-top: 10px;
                }
                .blog-area .blog-left-column .blog-list li.li-author-time{
                    font-size: 1.0125em;
                    color: #727171;
                }   
                    .blog-area .blog-left-column .blog-list li.li-author-time img{
                        /* width: 5.25%; */
                        height: 25px;
                        width: 25px;
                    }
                    .blog-area .blog-left-column .blog-list li.li-author-time .img-time{
                        padding-left: 15px;
                    }
                .blog-area .blog-left-column .blog-list .div-sub-info {
                    float: left;
                    display: inline-block;
                    width: 95%;
                    overflow: hidden;
                    margin: 0.5rem 0;
                    padding: 0.5rem 0;
                    border-top: #CCC 1px dotted;
                }
                    .blog-area .blog-left-column li.li-post-tag {
                        float: right;
                        width: 50%;
                        color: #4D4D4D;
                        font-size: 0.875rem;
                        font-weight: 300;
                        text-align: right;
                    }
                        .blog-area .blog-left-column li.li-post-tag a:link, .blog-area .blog-left-column li.li-post-tag a:visited, .blog-area .blog-left-column li.li-post-tag a:hover {
                            color: #4D4D4D;
                        }
                        .blog-area .blog-left-column li.li-post-tag img {
                            width: 8%;
                            /*vertical-align: middle;*/
                            margin: 0 0 0 0.75rem;
                        }
                    .blog-area .blog-left-column li.li-post-time {
                        float: left;
                        width: 30%;
                        color: #4D4D4D;
                        font-size: 0.875rem;
                        font-weight: 300;
                    }
                        .blog-area .blog-left-column li.li-post-time img {
                            width: 18%;
                            vertical-align: middle;
                            margin: 0;
                        }
    .blog-area .blog-right-column {
        float: right;
        display: inline-block;
        width: 29.72%;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }
        .blog-area .blog-right-column h3 {
            width: 96%;
            overflow: hidden;
            color: #025EAD;
            font-size: 1.3125em;
            font-weight: 500;
            margin: 0 0 4.552%;
            padding: 0 3.862%;
        }
        .blog-area .blog-right-column ul {
            width: 99%;
            margin: 0 auto 9.095%;
        }
            .blog-area .blog-right-column ul.ul-blog-latest-updated {
                padding: 4.552% 0 0;
                border: #E8E8E8 1px solid;
                border-radius: 8px;
            }
            .blog-area .blog-right-column ul.ul-courses-recommended {
                padding: 4.552% 0 0;
            }
        .blog-area .blog-right-column li {
            list-style: none;
        }
            .blog-area .blog-right-column li.li-blog-latest-updated {
                width: 92%;
                overflow: hidden;
                background: url(../image/icon_circle_01.png) 0 50% no-repeat;
                color: #727171;
                font-size: 0.875em;
                line-height: 180%;
                margin: 0 0 4.552% 2.299%;
                padding: 0 0 0 6.125%;
            }
                .blog-area .blog-right-column li.li-blog-latest-updated a:link, .blog-area .blog-right-column li.li-blog-latest-updated a:visited, .blog-area .blog-right-column li.li-blog-latest-updated a:hover {
                    color: #727171;
                }
            .blog-area .blog-right-column li.li-courses-recommended {
                width: 92%;
                overflow: hidden;
                /*background: url(../image/icon_circle_01.png) 2% 50% no-repeat;*/
                color: #727171;
                font-size: 0.875em;
                line-height: 100%;
                margin: 0 auto 1.5rem;
                padding: 0;
                /*border: #E8E8E8 1px solid;
                border-radius: 8px;*/
            }
                .blog-area .blog-right-column li.li-courses-recommended a:link, .blog-area .blog-right-column li.li-courses-recommended a:visited, .blog-area .blog-right-column li.li-courses-recommended a:hover {
                    color: #727171;
                }
                .blog-area .blog-right-column li.li-courses-recommended img {
                    width: 5%;
                    margin-right: 1.25%;
                    vertical-align: middle;
                }

/***
 *** BEGIN Blog Content
 ***/

 .blog-content-area {
    width: 100%;
    overflow: hidden;
    margin: 3.537% auto;
    padding: 0;
}
    .blog-content-area .blog-content-left-column {
        float: left;
        display: inline-block;
        width: 68%;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }
        .blog-content-area .blog-content-left-column h3 {
            width: 96%;
            overflow: hidden;
            color: #025EAD;
            font-size: 1.4125em;
            font-weight: 500;
            margin: 0 0 4.552%;
        }
        .blog-content-area .blog-content-left-column .blog-content-author-time {
            font-size: 1.0125em;
            margin: 0 0 4.552%;
        }
            .blog-content-area .blog-content-left-column .blog-content-author-time img{
                padding-left: 15px;
                /* width: 3.25%; */
                height: 25px;
                width: 25px;
            }
        .blog-content-area .blog-content-left-column .blog-content-image {
            width: 100%;
            margin: 0 0 1.5rem;
            border-radius: 6px;
        }
            .blog-content-area .blog-content-left-column .blog-content-image img {
                width: 100%;
                border-radius: 6px;
            }
        .blog-content-area .blog-content-left-column .blog-content-desc {
            color: #727171;
            font-weight: 300;
            font-size: 1.0725em;
            line-height: 180%;
            text-align: justify;
            margin: 0 0 1.5rem;
        }
            .blog-content-area .blog-content-left-column .blog-content-desc a:link, .blog-content-area .blog-content-left-column .blog-content-desc a:visited, .blog-content-area .blog-content-left-column .blog-content-desc a:hover {
                color: #025EAD;
            }
            .blog-content-area .blog-content-left-column .blog-content-desc p {
                margin: 0.5rem auto 1.5rem;
            }
        .blog-content-area .blog-content-left-column ul {
            width: 100%;
            overflow: hidden;
            margin: 1rem auto 0;
            padding: 1rem 0 0;
            border-top: #808080 1px dotted;
        }
            .blog-content-area .blog-content-left-column li {
                display: inline-block;
                color: #4D4D4D;
                font-size: 0.875rem;
                font-weight: 300;
                line-height: 100%;
            }
                .blog-content-area .blog-content-left-column li.li-post-tag {
                    float: right;
                    width: 50%;
                    text-align: right;
                }
                    .blog-content-area .blog-content-left-column li.li-post-tag a:link, .blog-content-area .blog-content-left-column li.li-post-tag a:visited, .blog-content-area .blog-content-left-column li.li-post-tag a:hover {
                        color: #4D4D4D;
                    }
                    .blog-content-area .blog-content-left-column li.li-post-tag img {
                        width: 5.5%;
                        margin: 0 0 0 0.75rem;
                        border-radius: 0;
                        vertical-align: middle;
                    }
                .blog-content-area .blog-content-left-column li.li-post-time {
                    float: left;
                    width: 25%;
                }
                    .blog-content-area .blog-content-left-column li.li-post-time img {
                        width: 15%;
                        margin: 0;
                        border-radius: 0;
                        vertical-align: middle;
                    }
        .blog-content-area .blog-content-left-column .blog-content-author-intro{
            display: flex;
            align-items: center;
            line-height: 200%;
        }
            .blog-content-area .blog-content-left-column .blog-content-author-intro img{
                height: 130px;
                width: 130px;
                border: 1px solid #025EAD;
                border-radius: 50%;
            }
            .blog-content-area .blog-content-left-column .blog-content-author-intro ul{
                width: 100%;
                margin: 0 auto;
                padding-left: 20px;
            }
                .blog-content-area .blog-content-left-column .blog-content-author-intro li{
                    list-style: none;
                }
                .blog-content-area .blog-content-left-column .blog-content-author-intro li.li-author{
                    color: #FFAA33;
                    font-size: 0.7725em;
                    padding-left: 2px;
                }
                .blog-content-area .blog-content-left-column .blog-content-author-intro li.li-name{
                    font-size: 1.1125em;
                    /* letter-spacing: 2px; */
                }
                .blog-content-area .blog-content-left-column .blog-content-author-intro li.li-intro{
                    font-size: 0.9125em;
                }
    .blog-content-area .blog-content-right-column {
        float: right;
        display: inline-block;
        width: 29.72%;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }
        .blog-content-area .blog-content-right-column h3 {
            width: 96%;
            overflow: hidden;
            color: #025EAD;
            font-size: 1.3125em;
            font-weight: 500;
            margin: 0 0 4.552%;
            padding: 0 3.862%;
        }
        .blog-content-area .blog-content-right-column ul {
            width: 99%;
            margin: 0 auto 9.095%;
        }
            .blog-content-area .blog-content-right-column ul.ul-blog-content-latest-updated {
                padding: 4.552% 0 0;
                border: #E8E8E8 1px solid;
                border-radius: 8px;
            }
            .blog-content-area .blog-content-right-column ul.ul-courses-recommended {
                padding: 4.552% 0 0;
            }
        .blog-content-area .blog-content-right-column li {
            list-style: none;
        }
            .blog-content-area .blog-content-right-column li.li-blog-content-latest-updated {
                width: 90%;
                overflow: hidden;
                background: url(../image/icon_circle_01.png) 0 50% no-repeat;
                color: #727171;
                font-size: 0.813em;
                line-height: 180%;
                margin: 0 0 4.552% 2.299%;
                padding: 0 0 0 6.125%;
            }
                .blog-content-area .blog-content-right-column li.li-blog-content-latest-updated a:link, .blog-content-area .blog-content-right-column li.li-blog-content-latest-updated a:visited, .blog-content-area .blog-content-right-column li.li-blog-content-latest-updated a:hover {
                    color: #727171;
                }
            .blog-content-area .blog-content-right-column li.li-courses-recommended {
                width: 92%;
                overflow: hidden;
                /*background: url(../image/icon_circle_01.png) 2% 50% no-repeat;*/
                color: #727171;
                font-size: 0.813em;
                line-height: 180%;
                margin: 0 auto 4.552%;
                padding: 0;
                /*border: #E8E8E8 1px solid;
                border-radius: 8px;*/
            }
                .blog-content-area .blog-content-right-column li.li-courses-recommended a:link, .blog-content-area .blog-content-right-column li.li-courses-recommended a:visited, .blog-content-area .blog-content-right-column li.li-courses-recommended a:hover {
                    color: #727171;
                }


/***
 *** About
 ***/
 .main-visual-subscriptions-about {
    width: 100%;
    height: 320px;
    overflow: hidden;
    background: url(../image/bg_news_banner.png) center 0 no-repeat;
    background-size: 100%;
    margin: 0 auto;
}
.main-visual-subscriptions-about .page-title{
    overflow: hidden;
    color: #FFF;
    font-size: 5.625rem;
    font-weight: 600;
    letter-spacing: 1px;
    margin: 7.5% 0 0 3%;
    border-bottom: none;
}
.about-area {
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    padding: 0;
}
    .about-area h2{
        color: #2850a9;
        font-size: 3.6rem;
        font-weight: 600;
        line-height: 100%;
        text-align: center;
    }
    .about-area .about-slide-desc-block-01 {
        width: 100%;
        overflow: hidden;
        background-color: #fafafa;
        margin: 0 auto 0;
        padding: 3rem 0 3.6rem;
    }
        .about-area .about-slide-desc-block-01 h2 {
            margin: 0 0 2.6rem;
            padding: 0;
        }
        .about-area .about-slide-desc-block-01 .desc-block-01-desc{
            color: #000;
            font-size: 1.25rem;
            font-weight: 300;
            line-height: 180%;
            margin: 0 0 3%;
            padding-left: 1.5%;
            border-left: 8px solid #a33030;
        }
    .about-area .about-slide-desc-block-02-05 {
        background: url(../image/deco_about_06.png) 0% 0% repeat-x;
        background-size: 100%;
    }
    .about-area .about-slide-desc-block-02 {
        width: 100%;
        overflow: hidden;
        padding: 2% 0;
    }
        .about-area .about-slide-desc-block-02 .content-position-01 {
            width: 1180px;
        }
    .about-area .about-slide-desc-block-03 {
        width: 100%;
        overflow: hidden;
        margin: 0 auto;
        padding: 0;
    }
        .about-area .about-slide-desc-block-03 .content-position-01 {
            width: 1180px;
        }
            .about-area .about-slide-desc-block-03 .desc-block-03-left {
                float: left;
                display: inline-block;
                width: 46%;
                overflow: hidden;
                margin: 0;
                padding: 4.7% 2%;
            }
            .about-area .about-slide-desc-block-03 .desc-block-03-right {
                float: right;
                display: inline-block;
                width: 50%;
                overflow: hidden;
                margin: 0;
                padding: 0;
            }
            .about-area .about-slide-desc-block-03 img {
                width: 100%;
            }
            .about-area .about-slide-desc-block-03 p {
                width: 100%;
                overflow: hidden;
                color: #000;
                font-size: 1.25rem;
                font-weight: 300;
                line-height: 180%;
                margin: 0;
                padding: 0;
            }
    .about-area .about-slide-desc-block-04 {
        width: 100%;
        overflow: hidden;
        margin: 0 auto;
        padding: 0;
    }
        .about-area .about-slide-desc-block-04 .content-position-01 {
            width: 1180px;
        }
            .about-area .about-slide-desc-block-04 .desc-block-04-left {
                float: left;
                display: inline-block;
                width: 50%;
                overflow: hidden;
                margin-left: 0;
                padding-top: 0;
            }
            .about-area .about-slide-desc-block-04 .desc-block-04-right {
                float: right;
                display: inline-block;
                width: 46%;
                overflow: hidden;
                margin: 0;
                padding: 6.6% 2%;
            }
            .about-area .about-slide-desc-block-04 img {
                width: 100%;
            }
            .about-area .about-slide-desc-block-04 p {
                width: 100%;
                overflow: hidden;
                color: #000;
                font-size: 1.25rem;
                font-weight: 300;
                line-height: 180%;
                margin: 0;
                padding: 0;
            }
    .about-area .about-slide-desc-block-05 {
        width: 100%;
        overflow: hidden;
        margin: 0 auto;
        padding: 0;
    }
        .about-area .about-slide-desc-block-05 .content-position-01 {
            width: 1180px;
        }
            .about-area .about-slide-desc-block-05 .desc-block-05-left {
                float: left;
                display: inline-block;
                width: 46%;
                overflow: hidden;
                margin: 0;
                padding: 8.5% 2%;
            }
            .about-area .about-slide-desc-block-05 .desc-block-05-right {
                float: right;
                display: inline-block;
                width: 50%;
                overflow: hidden;
                margin: 0;
                padding: 0;
            }
            .about-area .about-slide-desc-block-05 img {
                width: 100%;
            }
            .about-area .about-slide-desc-block-05 p {
                width: 100%;
                overflow: hidden;
                color: #000;
                font-size: 1.25rem;
                font-weight: 300;
                line-height: 180%;
                margin: 0;
                padding: 0;
            }
    .about-area .about-slide-desc-block-06 {
        width: 100%;
        overflow: hidden;
        text-align: center;
        margin: 0 auto;
        padding: 3rem 0 3.6rem;
        background-color: #f9f9f9;
    }
        .about-area .about-slide-desc-block-06 h2 {
            margin-bottom: 4rem;
        }

        .about-area .about-slide-desc-block-06 .why_us {
            width: 100%;
            overflow: hidden;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-evenly;
            align-items: flex-start;
        }
        .about-area .about-slide-desc-block-06 .why_us .item-title {
            display: flex;
            flex: 0 1 28%;
            justify-content: center;
            /* align-items: center; */
            color: #2850a9;
            font-size: 2rem;
            font-weight: 500;
            line-height: 120%;
            text-align: center;
        }
        .about-area .about-slide-desc-block-06 .why_us .item-photo{
            display: flex;
            flex: 0 1 28%;
            justify-content: center;
            /* align-items: center; */
        }
        .about-area .about-slide-desc-block-06 .why_us .item-content {
            display: flex;
            flex: 0 1 28%;
            justify-content: center;
            /* align-items: center; */
            color: #000;
            font-size: 1rem;
            font-weight: 300;
            line-height: 180%;
            text-align: left;
        }
        .about-area .about-slide-desc-block-06 .why_us .order-01{
            order: 1;
        }
        .about-area .about-slide-desc-block-06 .why_us .order-02{
            order: 2;
            margin: 3% 0;
        }
        .about-area .about-slide-desc-block-06 .why_us .order-03{
            order: 3;
            margin: 0 0 8%;
        }
        .about-area .about-slide-desc-block-06 .why_us .order-04{
            order: 4;
        }
        .about-area .about-slide-desc-block-06 .why_us .order-05{
            order: 5;
        }
        .about-area .about-slide-desc-block-06 .why_us .order-06{
            order: 6;
        }
        .about-area .about-slide-desc-block-06 .why_us .title-04, .about-area .about-slide-desc-block-06 .why_us .content-04{
            margin-left: 10%;
        }
        .about-area .about-slide-desc-block-06 .why_us .photo-04{
            margin: 3% 0 3% 10%;
        }
        .about-area .about-slide-desc-block-06 .why_us .title-05, .about-area .about-slide-desc-block-06 .why_us .content-05{
            margin-right: 10%;
        }
        .about-area .about-slide-desc-block-06 .why_us .photo-05{
            margin: 3% 10% 3% 0;
        }

        /* .about-area .about-slide-desc-block-06 ul {
            display: inline-block;
            width: 30%;
            height: 23rem;
            overflow: hidden;
            text-align: left;
            margin: 0 1.5% 3%;
            padding: 0;
        }
        .about-area .about-slide-desc-block-06 img {
            width: auto;
        }
        .about-area .about-slide-desc-block-06 li {
            width: 90%;
            list-style: none;
            margin: 0 auto;
        }
            .about-area .about-slide-desc-block-06 li.li-join-01 {
                height: 5rem;
                overflow: hidden;
                color: #2850a9;
                font-size: 2rem;
                font-weight: 500;
                line-height: 120%;
                text-align: center;
            }
            .about-area .about-slide-desc-block-06 li.li-join-02 {
                width: 21%;
                height: 4rem;
                margin: 12% auto;
            }
            .about-area .about-slide-desc-block-06 li.li-join-03 {
                color: #000;
                font-size: 1rem;
                font-weight: 300;
                line-height: 180%;
            } */


/***
 *** BEGIN Member Renew Password
 ***/

.account-info-area {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    margin: 3.537% auto;
    padding: 0;
}
    .account-info-area ul.ul-account-main-menu {
        position: absolute;
        top: 0;
        left: 0;
        width: 13.5%;
        min-height: 600px;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }
        .account-info-area li.li-amm-item {
            width: 67%;
            color: #9FA0A0;
            font-size: 1em;
            line-height: 100%;
            margin: 8% auto;
            padding: 0 0 0 3%;
            border-left: #FFF 5px solid;
            list-style: none;
        }
            .account-info-area li.li-amm-item:first-child {
                margin-top: 0;
            }
            .account-info-area li.li-amm-item a:link, .account-info-area li.li-amm-item a:visited, .account-info-area li.li-amm-item a:hover {
                color: #9FA0A0;
            }
            .account-info-area li.li-amm-item .icon-arrow {
                float: right;
                display: inline-block;
                width: 8%;
                overflow: hidden;
                margin: 0 5% 0 0;
                padding: 0;
                -webkit-transition: -webkit-transform .8s ease-in-out;
                transition: transform .8s ease-in-out;
            }
                .account-info-area li.li-amm-item .icon-arrow img {
                    width: 100%;
                }
            .account-info-area li.li-amm-item .icon-arrow-switch {
                -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
            }
        .account-info-area ul.ul-account-main-menu li.itme-on-page {
            color: #025EAD;
            border-left: #025EAD 5px solid;
        }
            .account-info-area ul.ul-account-main-menu li.itme-on-page a:link, .account-info-area ul.ul-account-main-menu li.itme-on-page a:visited, .account-info-area ul.ul-account-main-menu li.itme-on-page a:hover {
                color: #025EAD;
            }
        .account-info-area .div_sub_menu {
            display: none;
            width: 90%;
            overflow: hidden;
            background: #ECECEC;
            margin: 0 0 6%;
            padding: 3% 0 2% 10%;
            /*border-top: #9FA0A0 1px solid;
            border-bottom: #999 1px solid;*/
        }
    .account-info-area ul.ul-account-sub-menu {
        float: left;
        display: inline-block;
        width: 18.2%;
        min-height: 600px;
        overflow: hidden;
        background: #F7F8F8;
        margin: 0;
        padding: 5.406% 0;
    }
        .account-info-area li.li-asm-item {
            width: 80%;
            color: #333;
            font-size: 0.938rem;
            font-weight: 300;
            line-height: 150%;
            margin: 5% auto;
            padding: 0;
            list-style: none;
        }
            .account-info-area li.li-asm-item a:link, .account-info-area li.li-asm-item a:visited, .account-info-area li.li-asm-item a:hover {
                color: #333;
            }
            .account-info-area li.li-asm-item .asm-item-grade {
                display: block;
                background: #E3E3E3;
                color: #020999;
                font-size: 0.75rem;
                font-weight: 300;
                /*letter-spacing: 0.2rem;*/
                margin: 0 3% 1% 0;
                padding: 1.5% 3%;
                border-radius: 5px;
            }
            .account-info-area li.li-asm-item .asm-item-teacher-name {
                color: #9FA0A0;
                font-size: 0.813rem;
                font-weight: 300;
                /*letter-spacing: 0.2rem;*/
                margin: 3% 0 0;
                padding: 1% 0 0;
                border-top: #D8D8D8 1px dotted;
            }
            .account-info-area li.li-asm-item .asm-teacher-on-page {
                color: #f9ad00;
            }
        .account-info-area li.asm-on-page {
            color: #025EAD;
            font-weight: bold;
        }
            .account-info-area li.asm-on-page a:link, .account-info-area li.asm-on-page a:visited, .account-info-area li.asm-on-page a:hover {
                color: #025EAD;
            }
        .account-info-area ul.ul-account-sub-menu li.itme-on-page {
            color: #025EAD;
            font-size: 1rem;
            font-weight: 500;
        }
            .account-info-area ul.ul-account-sub-menu li.itme-on-page a:link, .account-info-area ul.ul-account-sub-menu li.itme-on-page a:visited, .account-info-area ul.ul-account-sub-menu li.itme-on-page a:hover {
                color: #025EAD;
            }
    .account-info-area ul.ul-renew-pw-content {
        float: left;
        display: inline-block;
        width: 100%;
        min-height: 600px;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }
        .account-info-area li.li-rpc-item {
            width: 92%;
            color: #9FA0A0;
            font-size: 1em;
            line-height: 100%;
            margin: 0 0 1.931% 7.723%;
            padding: 0;
            list-style: none;
        }
            .account-info-area li.li-rpc-item label {
                display: block;
                color: #666;
                font-size: 0.813em;
                line-height: 100%;
                margin: 0 0 1.12%;
            }
            .account-info-area li.li-rpc-item .input-ui-text-01 {
                width: 65%;
                margin: 0;
                padding: 1%;
            }
            .account-info-area li.li-rpc-item .input-ui-btn-01 {
                width: 20%;
                margin: 5% 0 0;
                padding: 1% 0;
            }
            .account-info-area li.li-rpc-item .input-ui-textarea-01 {
                width: 65%;
                margin: 0;
                padding: 1%;
            }


/***
 *** BEGIN Member Account Info
 ***/

.account-info-area ul.ul-account-info-content {
    float: left;
    display: inline-block;
    width: 100%;
    overflow: hidden;
    margin: 0 0 0 3.406%;
    padding: 0;
}
    .account-info-area li.li-aic-item {
        float: left;
        display: inline-block;
        width: 45%;
        color: #9FA0A0;
        font-size: 1em;
        line-height: 100%;
        margin: 0 3% 2.146% 0;
        padding: 0;
        list-style: none;
    }
        .account-info-area li.li-aic-item label {
            display: block;
            color: #666;
            font-size: 0.813rem;
            line-height: 100%;
            margin: 0 0 2.545%;
        }
        .account-info-area li.li-aic-item .input-ui-text-01 {
            width: 92%;
            margin: 0;
            padding: 2.27%;
        }
    .account-info-area li.li-aic-item-02 {
        clear: both;
        float: none;
        display: block;
        width: 92%;
        color: #9FA0A0;
        font-size: 1em;
        line-height: 100%;
        margin: 0 3% 2.146% 0;
        padding: 0;
        list-style: none;
    }
        .account-info-area li.li-aic-item-02 label {
            display: block;
            color: #666;
            font-size: 0.813rem;
            line-height: 100%;
            margin: 0 0 1.245%;
        }
        .account-info-area li.li-aic-item-02 .input-ui-textarea-01 {
            width: 97.5%;
            margin: 0;
            padding: 1%;
        }
        .account-info-area li.li-aic-item-02 .input-ui-btn-01 {
            width: 20%;
            margin: 5% 0 0;
            padding: 1% 0;
        }


/***
 *** BEGIN Member My Courses
 ***/

.account-info-area ul.ul-my-courses-content {
    float: left;
    display: inline-block;
    width: 100%;
    min-height: 600px;
    overflow: hidden;
    margin: 0 0 0 3.406%;
    padding: 0;
}
    .account-info-area li.li-mcc-for-mobile-ui {
        display: none;
        width: 98%;
        overflow: hidden;
        margin: 0;
        padding: 0 1.049% 5%;
        list-style: none;
    }
        .account-info-area li.li-mcc-for-mobile-ui .div-as-span {
            display: inline-block;
            color: #025EAD;
            font-size: 0.813em;
            line-height: 100%;
            margin: 3% 0 0;
            padding: 0;
        }
        .span-m-course-title {
            display: none !important;
        }
        .span-m-course-teacher {
            display: none !important;
        }
        .span-m-course-time {
            display: none !important;
        }
    .account-info-area li.li-mcc-table-title {
        width: 100%;
        background: #025EAD;
        overflow: hidden;
        margin: 0;
        padding: 2.097% 1.049%;
        list-style: none;
    }
        .account-info-area li.li-mcc-table-title .div-as-span {
            display: inline-block;
            color: #FFF;
            font-size: 0.875em;
            line-height: 100%;
            text-align: center;
            margin: 0;
            padding: 0;
        }
    .account-info-area li.li-mcc-item {
        width: 100%;
        background: #FFF;
        overflow: hidden;
        margin: 0;
        padding: 2.097% 1.049%;
        list-style: none;
        /*border-bottom: #DCDDDD 1px solid;*/
    }
        .account-info-area li.li-mcc-item:hover {
            background: #F3F3F3;
        }
        .account-info-area li.li-mcc-item  .div-as-span {
            display: inline-block;
            color: #666;
            font-size: 0.875em;
            line-height: 100%;
            text-align: center;
            margin: 0;
            padding: 0;
        }
    .account-info-area li.li-mcc-item-selected {
        width: 100%;
        background: #ACCBE6;
        overflow: hidden;
        margin: 0;
        padding: 2.097% 1.049%;
        /*border-radius: 12px;*/
        list-style: none;
    }
        .account-info-area li.li-mcc-item-selected .div-as-span {
            display: inline-block;
            color: #FFF;
            font-size: 0.875em;
            line-height: 100%;
            text-align: center;
            margin: 0;
            padding: 0;
        }
    .account-info-area li.li-mcc-no-data-pic {
        width: 55%;
        overflow: hidden;
        margin: 0 auto;
        padding: 0 0 0 3%;
        list-style: none;
    }
        .account-info-area li.li-mcc-no-data-pic img {
            width: 100%;
        }
    .account-info-area li.li-mcc-no-data-text {
        width: 60%;
        overflow: hidden;
        color: #025EAD;
        font-size: 1.15rem;
        font-weight: 500;
        text-align: center;
        margin: 3% auto 0;
        padding: 0 0 0 3%;
        list-style: none;
    }
    .height-setting-for-no-data {
        height: 400px;
    }
    .span-course-no {
        width: 7%;
    }
    .span-course-teacher {
        width: 12%;
    }
    .span-course-date {
        width: 25%;
    }
        .span-holiday-info {
            font-size: 0.75rem;
            margin-left: 2.5%;
        }
    .span-course-time{
        width: 27%;
    }
    .span-course-attendance {
        width: 13%;
    }
    .span-attendance-green {
        color: #A4BF7C;
    }
    .span-attendance-red {
        color: #D9908E;
    }
    .span-course-link {
        width: 13%;
    }
        .span-course-link img {
            width: auto;
        }


/***
 *** BEGIN Member My Courses Pop-up UI
 ***/

.div-my-courses-list-pop-up {
    width: 94%;
    overflow: hidden;
    background: #FFF;
    margin: 0 auto;
    padding: 3%;
    border-radius: 6px;
}
    .div-my-courses-list-pop-up ul {
        width: 100%;
        overflow: hidden;
        margin: 0 auto;
        padding: 0;
    }
        .div-my-courses-list-pop-up li.li-asm-item {
            width: 92%;
            color: #333;
            font-size: 0.938rem;
            font-weight: 300;
            line-height: 150%;
            margin: 6% auto 8%;
            padding: 0 0 6%;
            border-bottom: #999 1px dotted;
            list-style: none;
        }
            .div-my-courses-list-pop-up li.li-asm-item:last-child {
                border-bottom: none;
            }
            .div-my-courses-list-pop-up li.li-asm-item a:link, .div-my-courses-list-pop-up li.li-asm-item a:visited, .div-my-courses-list-pop-up li.li-asm-item a:hover {
                color: #333;
            }
            .div-my-courses-list-pop-up li.li-asm-item .asm-item-grade {
                display: block;
                background: #E3E3E3;
                color: #020999;
                font-size: 0.75rem;
                font-weight: 300;
                /*letter-spacing: 0.2rem;*/
                margin: 0 3% 1% 0;
                padding: 1.5% 3%;
                border-radius: 5px;
            }



/***
 *** BEGIN Member My Homework
 ***/

.account-info-area ul.ul-my-homework-content {
    float: left;
    display: inline-block;
    width: 100%;
    min-height: 600px;
    overflow: hidden;
    margin: 0 0 0 3.406%;
    padding: 0;
}
    .account-info-area li.li-mcc-for-mobile-ui {
        display: none;
        width: 98%;
        overflow: hidden;
        margin: 0;
        padding: 0 1.049% 5%;
        list-style: none;
    }
        .account-info-area li.li-mcc-for-mobile-ui .div-as-span {
            display: inline-block;
            color: #025EAD;
            font-size: 0.813em;
            line-height: 100%;
            margin: 3% 0 0;
            padding: 0;
        }
        .span-m-course-teacher {
            display: none !important;
            /*float: left;*/
        }
        .span-m-course-time {
            display: none !important;
            /*float: right;*/
        }
    .account-info-area li.li-mhc-table-title {
        width: 100%;
        background: #025EAD;
        overflow: hidden;
        margin: 0;
        padding: 2.097% 1.049%;
        list-style: none;
    }
        .account-info-area li.li-mhc-table-title .div-as-span {
            display: inline-block;
            color: #FFF;
            font-size: 0.875em;
            line-height: 100%;
            text-align: center;
            margin: 0;
            padding: 0;
        }
    .account-info-area li.li-mhc-item {
        width: 100%;
        background: #FFF;
        overflow: hidden;
        margin: 0;
        padding: 2.097% 1.049%;
        list-style: none;
        /*border-bottom: #DCDDDD 1px solid;*/
    }
        .account-info-area li.li-mhc-item:hover {
            background: #F3F3F3;
        }
        .account-info-area li.li-mhc-item  .div-as-span {
            display: inline-block;
            color: #B5B5B6;
            font-size: 0.875em;
            line-height: 100%;
            text-align: center;
            margin: 0;
            padding: 0;
        }
    .account-info-area li.li-mhc-item-selected {
        width: 100%;
        background: #ACCBE6;
        overflow: hidden;
        margin: 0;
        padding: 2.097% 1.049%;
        /*border-radius: 12px;*/
        list-style: none;
    }
        .account-info-area li.li-mhc-item-selected .div-as-span {
            display: inline-block;
            color: #FFF;
            font-size: 0.875em;
            line-height: 100%;
            text-align: center;
            margin: 0;
            padding: 0;
        }
    .account-info-area li.li-mhc-no-data-pic {
        width: 60%;
        overflow: hidden;
        margin: 0;
        padding: 0 0 0 3%;
        list-style: none;
    }
        .account-info-area li.li-mhc-no-data-pic img {
            width: 100%;
        }
    .account-info-area li.li-mhc-no-data-text {
        width: 60%;
        overflow: hidden;
        color: #025EAD;
        font-size: 1.15rem;
        font-weight: 500;
        text-align: center;
        margin: 3% 0 0;
        padding: 0 0 0 3%;
        list-style: none;
    }
    .height-setting-for-no-data {
        height: 400px;
    }
    .span-homework-no {
        width: 5%;
    }
    .span-homework-date {
        width: 16%;
    }
    .span-homework-homework-name {
        width: 25%;
    }
    .span-uploaded-green {
        color: #A4BF7C;
    }
    .span-uploaded-red {
        color: #D9908E;
    }
    .span-homework-link {
        width: 8%;
    }
        .span-homework-link img {
            width: auto;
        }


/***
 *** BEGIN Member My Homework Insert
 ***/

.homework-insert-area {
    width: 92%;
    overflow: hidden;
    margin: 0 auto;
    padding: 5.406% 0;
}
    .homework-insert-area h2 {
        color: #015EAE;
        font-size: 1.15em;
        font-weight: 500;
        line-height: 155%;
        text-align: center;
        margin: 0 0 1.15rem;
    }
    .homework-insert-area div {
        width: 100%;
        text-align: center;
        margin: 0 auto 1.15rem;
        padding: 0;
    }
    .homework-insert-area .btn-homework-submit {
        width: 38%;
        overflow: hidden;
        background: #025EAD;
        color: #FFF;
        font-size: 1rem;
        font-weight: 400;
        text-align: center;
        margin: 1rem auto 0;
        padding: 1% 0;
        border: none;
        border-radius: 6px;
    }


/***
 *** BEGIN Member My Homework Check Suggest From Teacher
 ***/

.homework-csft-area {
    width: 96%;
    overflow: hidden;
    margin: 0 auto;
    padding: 5% 0;
}
    .homework-csft-area h2 {
        color: #015EAE;
        font-size: 1.15em;
        font-weight: 500;
        line-height: 155%;
        margin: 0 0 3%;
        padding: 0 3% 3%;
        border-bottom: #CCC 1px solid;
    }
    .homework-csft-area div {
        width: 100%;
        text-align: center;
        margin: 0 auto 1.15rem;
        padding: 0;
    }
    .homework-csft-area p {
        width: 100%;
        color: #333;
        font-size: 0.938rem;
        line-height: 180%;
        margin: 0 auto;
        padding: 0 3% 3%;
    }

/***
 *** BEGIN Member My Video
 ***/

.account-info-area ul.ul-my-video {
    float: left;
    display: inline-block;
    width: 100%;
    min-height: 600px;
    overflow: hidden;
    margin: 0 0 0 3.406%;
    padding: 0;
}
    .account-info-area ul.ul-my-video .div-video-block {
        float: left;
        display: inline-block;
        position: relative;
        width: 29%;
        height: 300px;
        overflow: hidden;
        margin: 0 0 3.406% 3.406%;
        padding: 0;
        border-radius: 6px;
        box-shadow: 3px 3px 9px #AAA;
    }
        .account-info-area ul.ul-my-video .div-video-block ul {
            display: block;
            width: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }
            .account-info-area ul.ul-my-video .div-video-block ul li.li-video-embedded {
                width: 100%;
                overflow: hidden;
            }
                .account-info-area ul.ul-my-video .div-video-block ul li.li-video-embedded iframe {
                    display: block;
                    width: 100%;
                    height: 11.55rem;
                    overflow: hidden;
                    margin: 0;
                    padding: 0;
                    list-style: none;
                }
                .account-info-area ul.ul-my-video .div-video-block ul li.li-video-embedded img {
                    width: 100%;
                    list-style: none;
                }
            .account-info-area ul.ul-my-video .div-video-block li.li-video-title {
                color: #4d4d4d;
                font-size: 0.938rem;
                font-weight: 500;
                line-height: 160%;
                margin: 0.25rem 0 0.75rem 1rem;
                list-style: none;
            }
            .account-info-area ul.ul-my-video .div-video-block li.li-video-date {
                color: #808080;
                font-size: 0.9375rem;
                margin: 0 0 1.25rem 1rem;
                padding: 0 0 0 0.5rem;
                border-left: 0.5rem solid #ab4443;
                list-style: none;
            }
        .video-watched-status {
            position: absolute;
            bottom: 3.6%;
            left: 3.6%;
            width: 20%;
            overflow: hidden;
            color: #333;
            background: #FFFEA9;
            font-size: 0.75rem;
            font-weight: 500;
            text-align: center;
            padding: 1% 0;
            border-radius: 6px;
        }

/***
 *** BEGIN Member My Videos
 ***/

.account-info-area ul.ul-my-video h3 {
    color: #025EAD;
    margin: 0 0 3.406% 3.406%;
}

/***
 *** BEGIN Member My Videos Pop-up UI
 ***/

.container-fluid {
    background: #FFF;
}
    .container-fluid .video-ui-area {
        width: 97.5%;
        overflow: hidden;
        margin: 0 auto;
        padding: 0 1.25%;
        border: #999 1px solid;
        border-radius: 3px;
    }
        .container-fluid .video-ui-area ul {
            width: 100%;
            overflow: hidden;
            margin: 0 auto;
            padding: 0;
        }
            .container-fluid .video-ui-area li {
                float: left;
                display: inline-block;
                width: 6%;
                overflow: hidden;
                margin: 0 2% 0 0;
            }
                .container-fluid .video-ui-area li img {
                    width: 100%;
                }

.account-info-area ul.ul-my-video a {
    display: block;
    font-size: 0.938rem;
    margin-bottom: 2.3%;
}
    .account-info-area ul.ul-my-video a:link, .account-info-area ul.ul-my-video a:visited, .account-info-area ul.ul-my-video a:hover {
        color: #333;
    }
.account-info-area ul.ul-my-video a img {
    width: 1.75%;
    vertical-align: middle;
}

/***
 *** BEGIN Member My QA List
 ***/

.account-info-area ul.ul-my-courses-qa {
    float: left;
    display: inline-block;
    width: 100%;
    min-height: 600px;
    overflow: hidden;
    margin: 0 0 0 3.406%;
    padding: 0;
}
	.account-info-area ul.ul-my-courses-qa .div-qa-list-block {
        width: 100%;
        min-height: 2rem;
        overflow: hidden;
        margin: 0 0 4.055%;
        padding: 0;
    }
    	.account-info-area ul.ul-my-courses-qa .div-qa-list-block ul {
    		width: 99%;
            overflow: hidden;
            margin: 0 auto 1.25rem;
            padding: 0;
            border: #D8D8D8 1px solid;
            border-radius: 8px;
            box-shadow: 1px 1px 6px #B6B6B6;
    	}
    	   .account-info-area ul.ul-my-courses-qa .div-qa-list-block li.li-faq-title {
                width: 95%;
                overflow: hidden;
                background-color: #FFF;
                color: #025EAD;
                font-size: 1rem;
                font-weight: 500;
                margin: 0;
                padding: 0.5rem 2.5% 0.75rem;
            }
                .account-info-area ul.ul-my-courses-qa .div-qa-list-block li.li-faq-title:hover {
                    background-color: #F9F9F9;
                }
                .account-info-area ul.ul-my-courses-qa .div-qa-list-block .faq-user-photo-block {
                    float: left;
                    display: inline-block;
                    width: 60px;
                    height: 60px;
                    overflow: hidden;
                    background: #FFF;
                    line-height: 60px;
                    text-align: center;
                    margin: 0.45rem 0 0;
                    padding: 0;
                    border: #CCC 1px solid;
                    border-radius: 99em;
                }
                    .account-info-area ul.ul-my-courses-qa .div-qa-list-block .faq-user-photo-block img {
                        width: 110%;
                        vertical-align: middle;
                    }
                    .account-info-area ul.ul-my-courses-qa .div-qa-list-block .faq-user-photo-block .sys-defualt-user-pic {
                        width: 75%;
                        vertical-align: middle;
                    }
                .account-info-area ul.ul-my-courses-qa .div-qa-list-block .faq-type-block {
                    float: left;
                    display: inline-block;
                    width: 82%;
                    overflow: hidden;
                    color: #F8AE01;
                    font-size: 0.75rem;
                    font-weight: 300;
                    margin: 0.5rem 0 0 2.5%;
                    padding: 0;
                }
                .account-info-area ul.ul-my-courses-qa .div-qa-list-block .faq-title-block {
                    float: left;
                    display: inline-block;
                    width: 82%;
                    overflow: hidden;
                    margin: 0.25rem 0 0 2.5%;
                    padding: 0;
                }
                .account-info-area ul.ul-my-courses-qa .div-qa-list-block .faq-user-info-block {
                    float: left;
                    display: inline-block;
                    width: 82%;
                    overflow: hidden;
                    color: #000;
                    font-size: 0.75rem;
                    font-weight: 300;
                    margin: 0.25rem 0 0 2.5%;
                    padding: 0;
                }
                .account-info-area ul.ul-my-courses-qa .div-qa-list-block .icon-faq-arrow {
                    float: right;
                    display: inline-block;
                    width: 2.5%;
                    overflow: hidden;
                    margin: 0.25rem 0 0 0;
                    -webkit-transition: -webkit-transform .8s ease-in-out;
                    transition: transform .8s ease-in-out;
                }
                    .account-info-area ul.ul-my-courses-qa .div-qa-list-block .icon-faq-arrow img {
                        width: 100%;
                        vertical-align: middle;
                    }
                .account-info-area ul.ul-my-courses-qa .div-qa-list-block .icon-arrow-switch {
                    -webkit-transform: rotate(180deg);
                    transform: rotate(180deg);
                }
            .account-info-area ul.ul-my-courses-qa .div-qa-list-block li.li-faq-desc {
                display: none;
                width: 82%;
                overflow: hidden;
                color: #333;
                font-size: 0.875rem;
                line-height: 180%;
                margin: 0.25rem 0 1rem 6rem;
                padding: 0;
            }
                .account-info-area ul.ul-my-courses-qa .div-qa-list-block li.li-faq-desc .qa-upload-img {
                    width: 100%;
                    margin: 1.15rem 0 1rem;
                }
	            .account-info-area ul.ul-my-courses-qa .div-qa-list-block .div-reply-desc {
	                width: 100%;
	                overflow: hidden;
	                color: #333;
	                font-size: 0.875rem;
	                line-height: 180%;
	                margin: 0.5rem 0 1rem;
	                padding: 0.75rem 0 0;
	                border-top: #DDD 1px dotted;
	            }
	            	.account-info-area ul.ul-my-courses-qa .div-qa-list-block .div-reply-user-photo {
	            		float: left;
	                    display: inline-block;
	                    width: 60px;
	                    height: 60px;
	                    overflow: hidden;
                        text-align: center;
                        line-height: 60px;
	                    background: #FFF;
	                    margin: 0 1rem 0 0;
	                    padding: 0;
	                    border: #CCC 1px solid;
	                    border-radius: 99em;
	            	}
                        .account-info-area ul.ul-my-courses-qa .div-qa-list-block .div-reply-user-photo img {
                            width: 110%;
                            vertical-align: middle;
                        }
                        .account-info-area ul.ul-my-courses-qa .div-qa-list-block .div-reply-user-photo .sys-defualt-user-pic {
                            width: 75%;
                            vertical-align: middle;
                        }
	            	.account-info-area ul.ul-my-courses-qa .div-qa-list-block .div-reply-user-info {
	                    color: #999;
	                    font-size: 0.75rem;
	                    font-weight: 300;
	                    margin: 0 0 0 2.5%;
	                    padding: 0;
	                }
                        .account-info-area ul.ul-my-courses-qa .div-qa-list-block .div-reply-user-info .qa-reply-img {
                            width: 100%;
                            margin: 1.5rem 0 1rem;
                        }


/***
 *** BEGIN Member My QA Insert
 ***/

.account-info-area ul.ul-my-courses-qa-insert {
    float: left;
    display: inline-block;
    width: 100%;
    overflow: hidden;
    margin: 0 0 0 3.406%;
    padding: 0;
}
	.account-info-area ul.ul-my-courses-qa-insert div {
		width: 96%;
		margin: 0 auto;
		padding: 0 0 0 4%;
	}
		.account-info-area ul.ul-my-courses-qa-insert div.div-qa-select-area {
			color: #333;
			font-size: 0.938rem;
			font-weight: 300;
			padding-left: 5%;
			padding-bottom: 1rem;
		}
            .account-info-area ul.ul-my-courses-qa-insert div.div-qa-select-area .div-qa-select-block {
                display: inline-block;
                width: 43.5%;
                padding: 0;
            }
    			.account-info-area ul.ul-my-courses-qa-insert div.div-qa-select-area label {
    				margin-right: 0.25rem;
    			}
                .account-info-area ul.ul-my-courses-qa-insert div.div-qa-select-area select {
                    width: 66%;
                }
	.account-info-area ul.ul-my-courses-qa-insert textarea {
		width: 88%;
		overflow: hidden;
		margin: 0 auto;
		padding: 0.75rem;
		border-radius: 6px;
	}
	.account-info-area ul.ul-my-courses-qa-insert .btn-qa-submit {
	    width: 26%;
	    overflow: hidden;
	    background: #025EAD;
	    color: #FFF;
	    font-size: 1rem;
	    font-weight: 400;
	    text-align: center;
	    margin: 1rem auto 0;
	    padding: 1% 0;
	    border: none;
	    border-radius: 12px;
	}


/***
 *** BEGIN Member My QA Insert 02
 ***/

.qa-insert-area {
    width: 100%;
    overflow: hidden;
    margin: 2.5rem auto;
    padding: 0;
}
    .qa-insert-area ul.ul-my-courses-qa-insert {
        width: 85%;
        overflow: hidden;
        margin: 0 auto;
        padding: 0;
    }
        .qa-insert-area ul.ul-my-courses-qa-insert div {
            width: 100%;
            margin: 0 auto;
            padding: 0;
        }
            .qa-insert-area ul.ul-my-courses-qa-insert div.div-qa-select-area {
                color: #333;
                font-size: 0.938rem;
                font-weight: 300;
                padding-left: 5%;
                padding-bottom: 1rem;
            }
                .qa-insert-area ul.ul-my-courses-qa-insert div.div-qa-select-area label {
                    margin-right: 0.25rem;
                }
        .qa-insert-area ul.ul-my-courses-qa-insert textarea {
            width: 88%;
            overflow: hidden;
            margin: 0 auto;
            padding: 0.75rem;
            border-radius: 6px;
        }
        .qa-insert-area ul.ul-my-courses-qa-insert .btn-qa-submit {
            width: 26%;
            overflow: hidden;
            background: #025EAD;
            color: #FFF;
            font-size: 1rem;
            font-weight: 400;
            text-align: center;
            margin: 1rem auto 0;
            padding: 1% 0;
            border: none;
            border-radius: 12px;
        }


/***
 *** BEGIN Member My Payment
 ***/

.account-info-area ul.ul-my-payment-content {
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    padding: 0 0 5.406%;
}
    .account-info-area li.li-mpc-table-title {
        width: 100%;
        background: #025EAD;
        overflow: hidden;
        margin: 0;
        padding: 2.097% 1.049%;
        list-style: none;
    }
        .account-info-area li.li-mpc-table-title .div-as-span {
            display: inline-block;
            color: #FFF;
            font-size: 0.875em;
            line-height: 100%;
            text-align: center;
            margin: 0;
            padding: 0;
        }
    .account-info-area li.li-mpc-item {
        width: 100%;
        background: #FFF;
        overflow: hidden;
        margin: 0;
        padding: 2.097% 1.049%;
        list-style: none;
        border-bottom: #DCDDDD 1px solid;
    }
        .account-info-area li.li-mpc-item:hover {
            background: #F3F3F3;
        }
        .account-info-area li.li-mpc-item  .div-as-span {
            display: inline-block;
            color: #000;
            font-size: 0.875em;
            line-height: 100%;
            text-align: center;
            margin: 0;
            padding: 0;
        }
    .account-info-area li.li-mpc-no-data-pic {
        width: 60%;
        overflow: hidden;
        margin: 0;
        padding: 0 0 0 3%;
        list-style: none;
    }
        .account-info-area li.li-mpc-no-data-pic img {
            width: 100%;
        }
    .account-info-area li.li-mpc-no-data-text {
        width: 60%;
        overflow: hidden;
        color: #025EAD;
        font-size: 1.15rem;
        font-weight: 500;
        text-align: center;
        margin: 3% 0 0;
        padding: 0 0 0 3%;
        list-style: none;
    }
    .height-setting-for-no-data {
        height: 400px;
    }
    .span-row-count {
        width: 10%;
    }
    .span-course-title {
        width: 28%;
    }
    .span-teach-name {
        width: 20%;
    }
    .span-enroll-date {
        width: 15%;
    }
    .span-course-toll {
        width: 10%;
    }
    .span-payment-status {
        width: 13%;
        line-height: 165% !important;
    }


/***
 *** BEGIN Member Course Material
 ***/

.span-cm-filename {
    width: 35%;
}
.span-cm-link {
    width: 15%;
}
.span-cm-download {
    width: 15%;
}
.span-cm-recommend {
    width: 25%;
}


/***
 *** BEGIN Free Course Survey
 ***/

.fc-survey-area {
    width: 660px;
    height: auto;
    overflow: hidden;
    margin: 2.3% auto;
    padding: 0;
}
    .fc-survey-area .fcs-logo-area {
        width: 100%;
        height: auto;
        overflow: hidden;
        background: #FFF;
        margin: 0 auto;
        padding: 3% 0 3% 3%;
    }
    .fc-survey-area .fcs-banner-area {
        width: 100%;
        height: auto;
        overflow: hidden;
        background: #FFF;
        margin: 0 auto;
        padding: 0;
    }
    .fc-survey-area .fcs-desc-area {
        width: 90%;
        height: auto;
        overflow: hidden;
        background: #FFF;
        color: #727171;
        font-size: 0.938rem;
        font-weight: 400;
        line-height: 180%;
        margin: 0 auto;
        padding: 5% 5% 0;
    }
        .fc-survey-area .fcs-desc-area a:link, .fc-survey-area .fcs-desc-area a:visited, .fc-survey-area .fcs-desc-area a:hover {
            color: #025EAD;
            font-weight: 500;
            text-decoration: underline;
        }
    .fc-survey-area .fcs-survey-content-area {
        width: 100%;
        height: auto;
        overflow: hidden;
        background: #FFF;
        margin: 0 auto;
        padding: 0;
    }
        .fc-survey-area .fcs-survey-content-area ul {
            width: 90%;
            height: auto;
            overflow: hidden;
            margin: 5% auto;
            padding: 0;
        }
        .fc-survey-area .fcs-survey-content-area li.li-fcs-item {
            float: left;
            display: inline-block;
            width: 100%;
            color: #9FA0A0;
            font-size: 0.938em;
            line-height: 180%;
            margin: 1.5% 3% 3% 0;
            padding: 0;
            list-style: none;
        }
            .fc-survey-area .fcs-survey-content-area li.li-fcs-item label {
                display: block;
                color: #025EAD;
                font-size: 0.875rem;
                font-weight: 500;
                line-height: 150%;
                margin: 0 0 1.5% 1.5%;
            }
                .fc-survey-area .fcs-survey-content-area .red-star-mark {
                    color: red;
                    font-size: 0.75rem;
                    font-weight: 500;
                }
            .fc-survey-area .fcs-survey-content-area li.li-fcs-item .input-ui-text-01 {
                width: 96%;
                margin: 0;
                padding: 2.27%;
                border: #CCC 1px solid;
                box-shadow: none;
            }
            .fc-survey-area .fcs-survey-content-area li.li-fcs-item .input-ui-text-02 {
                display: inline-block;
                width: 75%;
                margin: 0;
                padding: 1% 0 0;
                border-top: none;
                border-right: none;
                border-bottom: #CCC 1px solid;
                border-left: none;
                border-radius: 0;
                box-shadow: none;
            }
            .fc-survey-area .fcs-survey-content-area li.li-fcs-item .input-ui-datepicker-01 {
                display: inline-block;
                width: 45%;
                color: #9FA0A0;
                font-size: 1em;
                margin: 0;
                padding: 2.27%;
                border: #CCC 1px solid;
                border-radius: 6px;
                box-shadow: none;
            }
            .fc-survey-area .fcs-survey-content-area li.li-fcs-item .input-ui-radio-01 {
                margin: 0 1% 0 1.5%;
                border: #CCC 1px solid;
            }
            .fc-survey-area .fcs-survey-content-area li.li-fcs-item .input-ui-select-01 {
                display: inline-block;
                width: 45%;
                color: #9FA0A0;
                font-size: 1em;
                margin: 0 0 0 2%;
                padding: 2.27%;
                border: #CCC 1px solid;
                border-radius: 6px;
                box-shadow: none;
            }
            .fc-survey-area .fcs-survey-content-area li.li-fcs-item .input-ui-btn-01 {
                margin: 3% 0 0;
                padding: 2% 0;
            }
            .fc-survey-area .fcs-survey-content-area li.li-fcs-item table {
                width: 100%;
                border-collapse: collapse;
            }
                .fc-survey-area .fcs-survey-content-area li.li-fcs-item tr {
                    background: #F6F6F6;
                    border-bottom: #FFF 3px solid;
                }
                .fc-survey-area .fcs-survey-content-area li.li-fcs-item td {
                    color: #333;
                    font-size: 0.875rem;
                    text-align: center;
                    padding: 1.5% 0;
                }
            .fc-survey-area .fcs-survey-content-area li.li-fcs-item div.course-time-choose {
                width: 92%;
                overflow: hidden;
                margin: 2.5% 0 0 3%;
                padding: 0;
            }
                .fc-survey-area .fcs-survey-content-area li.li-fcs-item div.course-time-choose ul {
                    float: left;
                    width: 38%;
                    overflow: hidden;
                    margin: 0 0 0.5rem;
                    padding: 0;
                }
    .fc-survey-area .fcs-footer-area {
        width: 100%;
        height: auto;
        overflow: hidden;
        background: #FFF;
        margin: 0 auto;
        padding: 5% 6%;
        border-top: #999 1px dotted;
    }
        .fc-survey-area .fcs-footer-area p {
            font-size: 0.875rem;
            line-height: 180%;
        }
            .fc-survey-area .fcs-footer-area p a:link, .fc-survey-area .fcs-footer-area p a:visited, .fc-survey-area .fcs-footer-area p a:hover {
                color: #025EAD;
                text-decoration: none;
            }
    .fc-survey-area .fcs-copyright-area {
        width: 100%;
        height: auto;
        overflow: hidden;
        color: #666;
        font-size: 0.813rem;
        text-align: center;
        margin: 0 auto;
        padding: 2% 0;
    }


/***
 *** BEGIN News
 ***/
 .main-visual-subscriptions-news {
    width: 100%;
    height: 320px;
    overflow: hidden;
    background: url(../image/bg_news_banner.png) center 0 no-repeat;
    background-size: 100%;
    margin: 0 auto;
}
.main-visual-subscriptions-news .page-title{
    overflow: hidden;
    color: #FFF;
    font-size: 5.625rem;
    font-weight: 600;
    letter-spacing: 1px;
    margin: 7.5% 0 0 3%;
    border-bottom: none;
}
 .news-area {
    width: 100%;
    /* overflow: hidden; */
    margin: 3% auto;
    padding: 0;
}
    .news-area .news-left-column {
        float: left;
        width: 68%;
        overflow: hidden;
        margin: 2% 0 0;
        padding: 0;
    }
        .news-area .news-left-column h1 {
            width: 100%;
            overflow: hidden;
            color: #0061A1;
            font-size: 1.5rem;
            font-weight: 400;
            line-height: 150%;
            margin: 0 auto 1.25rem;
            padding: 0;
        }
        .news-area .news-left-column .news-list {
            width: 96%;
            display: flex;
            margin: 0 0 4.552%;
            /* align-items: center; */
        }
            .news-area .news-left-column .news-list iframe {
                width: 246px;
                height: 152px;
                border-radius: 6px;
            }
            .news-area .news-left-column .news-list a.img-main {
                width: 246px;
            }
                .news-area .news-left-column .news-list a.img-main img {
                    width: 100%;
                    border-radius: 6px;
                }
                .news-area .news-left-column .news-list .div-pic-replacement {
                    display: inline-block;
                    width: 100%;
                    height: 11.55rem;
                    overflow: hidden;
                    background: #E6E6E6;
                    margin: 0;
                    padding: 0;
                    border-radius: 6px;
                }
            .news-area .news-left-column .news-list ul{
                width: 66%;
                margin: 0 auto;
                padding-left: 20px;
            }
                .news-area .news-left-column .news-list li{
                    list-style: none;
                }
                .news-area .news-left-column .news-list li.li-title{
                    width: 90%;
                    color: #284fa9;
                    font-size: 1.125rem;
                    font-weight: 500;
                    /* text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical; */
                }
                    .news-area .news-left-column .news-list li.li-title a:link, .news-area .news-left-column .news-list li.li-title a:visited, .news-area .news-left-column .news-list li.li-title a:hover{
                        color: #284fa9;
                    }
                .news-area .news-left-column .news-list li.li-content{
                    color: #666;
                    font-size: 1rem;
                    font-weight: 300;
                    /* text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 3;
                    -webkit-box-orient: vertical; */
                }
                    .news-area .news-left-column .news-list li.li-content a:link, .news-area .news-left-column .news-list li.li-content a:visited, .news-area .news-left-column .news-list li.li-content a:hover{
                        color: #666;
                    }
                .news-area .news-left-column .news-list li.li-content{
                    padding: 1% 0 4%;
                }
                .news-area .news-left-column .news-list .div-sub-info {
                    overflow: hidden;
                }
                    .news-area .news-left-column li.li-post-time {
                        float: left;
                        color: #666;
                        font-size: 0.875rem;
                        font-weight: 300;
                    }
                        .news-area .news-left-column li.li-post-time img {
                            width: 18%;
                            vertical-align: middle;
                            margin: 0 2% 0 0;
                        }
                    .news-area .news-left-column li.li-post-tag {
                        float: right;
                        color: #666;
                        font-size: 0.875rem;
                        font-weight: 300;
                    }
                    .news-area .news-left-column li.li-post-tag.tag-03 {
                        width: 100%;
                        text-align: right;
                        margin: 1% 0 0;
                    }
                        .news-area .news-left-column li.li-post-tag a:link, .news-area .news-left-column li.li-post-tag a:visited, .news-area .news-left-column li.li-post-tag a:hover {
                            color: #666;
                        }
                        .news-area .news-left-column li.li-post-tag img {
                            width: 18%;
                            vertical-align: middle;
                            margin: 0 0.5rem 0 0.75rem;
                        }
    .news-area .news-right-column {
        float: right;
        width: 29.5%;
        overflow: hidden;
        margin: 0;
        padding: 0;
        vertical-align: top;
    }
        .news-area .news-right-column h3 {
            font-size: 1.35rem;
            font-weight: 500;
            text-align: left;
            margin: 0 0 6% 3.6%;
        }
            .news-area .news-right-column .h3-01 {
                color: #a33030;
            }
            .news-area .news-right-column .h3-02 {
                color: #284fa9;
            }
        .news-area .news-right-column ul {
            width: 100%;
            margin: 3% auto 12%;
        }
        .news-area .news-right-column li {
            list-style: none;
        }
            .news-area .news-right-column li.li-news-latest-updated {
                width: 90%;
                overflow: hidden;
                color: #666;
                font-size: 0.875rem;
                font-weight: 300;
                margin: 0 0 4.552% 2.299%;
                padding: 0 0 0 3%;
                border-left: 5px solid #a33030;
            }
                .news-area .news-right-column li.li-news-latest-updated a:link, .news-area .news-right-column li.li-news-latest-updated a:visited, .news-area .news-right-column li.li-news-latest-updated a:hover {
                    color: #666;
                }
            .news-area .news-right-column li.li-categories {
                width: 90%;
                overflow: hidden;
                color: #666;
                font-size: 0.875rem;
                font-weight: 300;
                margin: 0 0 4.552% 2.299%;
                padding: 0 0 0 3%;
                border-left: 5px solid #284fa9;
            }
                .news-area .news-right-column li.li-categories a:link, .news-area .news-right-column li.li-categories a:visited, .news-area .news-right-column li.li-categories a:hover {
                    color: #666;
                }


/***
 *** BEGIN News Content
 ***/
 .news-content-area {
    width: 100%;
    overflow: hidden;
    margin: 3.6rem auto;
    padding: 0;
}
    .news-content-area .news-content-left-column {
        float: left;
        width: 66%;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }
        .news-content-area .news-content-left-column h3 {
            width: 85%;
            overflow: hidden;
            color: #025EAD;
            font-size: 1.65rem;
            font-weight: 600;
        }
        .news-content-area .news-content-left-column .div-sub-info {
            overflow: hidden;
            margin: 3% 0;
        }
            .news-content-area .news-content-left-column li.li-post-time {
                float: left;
                color: #808080;
                font-size: 0.875rem;
            }
                .news-content-area .news-content-left-column li.li-post-time img {
                    width: 21%;
                    vertical-align: middle;
                    margin: 0 0.5rem 0 0;
                }
            .news-content-area .news-content-left-column li.li-post-tag {
                float: right;
                color: #808080;
                font-size: 0.875rem;
            }
                .news-content-area .news-content-left-column li.li-post-tag a:link, .news-content-area .news-content-left-column li.li-post-tag a:visited, .news-content-area .news-content-left-column li.li-post-tag a:hover {
                    color: #808080;
                }
                .news-content-area .news-content-left-column li.li-post-tag img {
                    width: 21%;
                    vertical-align: middle;
                    margin: 0 0.25rem 0 1.5rem;
                }
        .news-content-area .news-content-left-column .news-content-image {
            width: 100%;
        }
            .news-content-area .news-content-left-column .news-content-image img {
                width: 100%;
            }
        .news-content-area .news-content-left-column .news-content-desc {
            width: 100%;
            overflow: hidden;
            color: #000;
            font-size: 1rem;
            font-weight: 300;
            line-height: 180%;
            text-align: justify;
            margin: 1.5rem 0;
        }
        .news-content-area .news-content-left-column ul {
            width: 100%;
            overflow: hidden;
        }
            .news-content-area .news-content-left-column li {
                font-size: 1.3125rem;
                list-style: none;
            }
            .news-content-area .news-content-left-column li.title {
                color: #284fa9;
                font-weight: 600;
                margin: 3% 0 1%;
            }
            .news-content-area .news-content-left-column li.content {
                font-size: 1.3125rem;
                color: #808080;
            }
            .news-content-area .news-content-left-column li.content.c-04 {
                margin: 0 0 0 2.5%;
            }
        .news-content-area .news-content-left-column .content-06 ul{
            width: 87%;
            overflow: hidden;
        }
        .news-content-area .news-content-left-column .content-06 ul span.eng {
            color: #808080;
        }
        .news-content-area .news-content-left-column .content-06 ul.f-01 span.eng {
            color: #94a8d4;
        }
        .news-content-area .news-content-left-column .content-06 ul.fee li {
            display: inline-block;
            font-size: 1.0625rem;
            padding: 2% 2%;
            color: #4c4c4c;
        }
        .news-content-area .news-content-left-column .content-06 ul.f-01 li {
            color: #fff;
        }
        .news-content-area .news-content-left-column .content-06 li{
            text-align: center;
            vertical-align: middle;
        }
        .news-content-area .news-content-left-column .content-06 ul.fee li.li-fee-01,.news-content-area .news-content-left-column .content-06 ul.fee li.li-fee-04, .news-content-area .news-content-left-column .content-06 ul.fee li.li-fee-05{
            width: 18%;
        }
        .news-content-area .news-content-left-column .content-06 ul.fee li.li-fee-02{
            width: 14%;
        }
        .news-content-area .news-content-left-column .content-06 ul.fee li.li-fee-03{
            width: 9%;
        }
        .news-content-area .news-content-left-column .content-06 ul.fee li.li-fee-06{
            width: 55%;
        }
        .news-content-area .news-content-left-column .content-06 ul.fee li.li-fee-07{
            width: 73%;
        }
        .news-content-area .news-content-left-column .content-06 ul.f-02{
            float: left;
            width: 18%;
        }
        .news-content-area .news-content-left-column .content-06 ul.f-02-02, .news-content-area .news-content-left-column .content-06 ul.f-02-03{
            width: 69%;
        }
        .news-content-area .news-content-left-column .content-06 ul.f-02-02 li, .news-content-area .news-content-left-column .content-06 ul.f-02-03 li{
            padding: 4.323% 2%;
        }
        .news-content-area .news-content-left-column .content-06 ul.f-02 li.li-fee-01{
            width: 100%;
            padding: 33.15% 0;
        }
        .news-content-area .news-content-left-column .content-06 ul.f-02-02 li.li-fee-02, .news-content-area .news-content-left-column .content-06 ul.f-02-03 li.li-fee-02{
            width: 23%;
        }
        .news-content-area .news-content-left-column .content-06 ul.f-02-02 li.li-fee-03, .news-content-area .news-content-left-column .content-06 ul.f-02-03 li.li-fee-03{
            width: 8%;
        }
        .news-content-area .news-content-left-column .content-06 ul.f-02-02 li.li-fee-04, .news-content-area .news-content-left-column .content-06 ul.f-02-03 li.li-fee-04{
            width: 28%;
        }
        .news-content-area .news-content-left-column .content-06 ul.f-02-02 li.li-fee-05, .news-content-area .news-content-left-column .content-06 ul.f-02-03 li.li-fee-05{
            width: 20%;
        }
        .news-content-area .news-content-left-column .content-06 ul.f-01 {
            background-color: #2850a9;
        }
        .news-content-area .news-content-left-column .content-06 ul.f-02 {
            background-color: #ededed;
        }
        .news-content-area .news-content-left-column .content-06 ul.f-02-02 {
            background-color: #f2f2f2;
        }
        .news-content-area .news-content-left-column .content-06 ul.f-02-03 {
            background-color: #fafafa;
        }
        .news-content-area .news-content-left-column .content-06 ul.f-03, .news-content-area .news-content-left-column .content-06 ul.f-05{
            background-color: #f2f2f2;
        }
        .news-content-area .news-content-left-column .content-06 ul.f-04, .news-content-area .news-content-left-column .content-06 ul.f-06{
            background-color: #fafafa;
        }
    .news-content-area .news-content-right-column {
        float: right;
        width: 29.72%;
        overflow: hidden;
        margin: 0 0 0 3%;
        padding: 0;
        vertical-align: top;
    }
        .news-content-area .news-content-right-column h3 {
            width: 96%;
            overflow: hidden;
            font-size: 1.35rem;
            text-align: left;
            margin: 0 0 6% 3.6%;
        }
        .news-content-area .news-content-right-column .h3-01 {
            color: #a33030;
        }
        .news-content-area .news-content-right-column .h3-02 {
            color: #284fa9;
        }
        .news-content-area .news-content-right-column ul {
            width: 100%;
            margin: 0 auto 18%;
        }
        .news-content-area .news-content-right-column li {
            list-style: none;
        }
            .news-content-area .news-content-right-column li.li-news-content-latest-updated {
                width: 90%;
                overflow: hidden;
                color: #666;
                font-size: 0.875rem;
                font-weight: 300;
                margin: 0 0 4.552% 2.299%;
                padding: 0 0 0 3%;
                border-left: 5px solid #a33030;
            }
                .news-content-area .news-content-right-column li.li-news-content-latest-updated a:link, .news-content-area .news-content-right-column li.li-news-content-latest-updated a:visited, .news-content-area .news-content-right-column li.li-news-content-latest-updated a:hover {
                    color: #666;
                }
            .news-content-area .news-content-right-column li.li-categories {
                width: 90%;
                overflow: hidden;
                color: #666;
                font-size: 0.875rem;
                font-weight: 300;
                margin: 0 0 4.552% 2.299%;
                padding: 0 0 0 3%;
                border-left: 5px solid #284fa9;
            }
                .news-content-area .news-content-right-column li.li-categories a:link, .news-content-area .news-content-right-column li.li-categories a:visited, .news-content-area .news-content-right-column li.li-categories a:hover {
                    color: #666;
                }





/***
 *** 輪播
 ***/
 #slide{
    position: relative
}
#slide img{
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    /* display: block; */
    width: 100%;
    opacity: 0;
    /* visibility: hidden; */
    transition: .8s;
}
#slide img:first-child{
    position: static;
}
#slide img.show{
    opacity: 1;
    /* visibility: visible; */
    display: block;
}

#slide .prev, #slide .next{
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    transition: .4s;
    background-color: rgba(0,0,0,.12);
    padding: 14px 12px;
}
#slide .prev:hover, #slide .next:hover{
    background-color: rgba(0,0,0,.24)
}
#slide .prev::after, #slide .next::after{
    display: block;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}
#slide .prev{
    left: 0;
}
#slide .prev::after{
    transform: rotate(-135deg);
    margin-left: 4px;
}
#slide .next{
    right: 0;
}
#slide .next::after{
    transform: rotate(45deg);
    margin-right: 4px;
}

/***
 *** 圖文輪播
 ***/
 /* #slide{
    position: relative;
}
#slide .slide-item{
    width: 100%;
    display: none;
}
#slide .slide-photo{
    display: inline-block;
    width: 46.5%;
    margin: 0 0 0 3%;
}
#slide .slide-content{
    display: inline-block;
    vertical-align: top;
    width: 46.5%;
    margin: 0 3% 0 0;
}
#slide img{
    width: 80%;
}
#slide img:first-child{
    position: static;
}
#slide .show{
    display: block;
}

#slide .prev, #slide .next{
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    transition: .4s;
    background-color: rgba(0,0,0,.12);
    padding: 14px 12px;
}
#slide .prev:hover, #slide .next:hover{
    background-color: rgba(0,0,0,.24)
}
#slide .prev::after, #slide .next::after{
    display: block;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}
#slide .prev{
    left: 0;
}
#slide .prev::after{
    transform: rotate(-135deg);
    margin-left: 4px;
}

#slide .next{
    right: 0;
}
#slide .next::after{
    transform: rotate(45deg);
    margin-right: 4px;
} */