/***
 *** RESPONSIVE CSS Document
 ***
 ***/

@media (max-width: 1920px) {

	/*** BEGIN HOME CSS SETTING ***/
    .home-slide-faq {
        height: 398px;
    }

}

@media (max-width: 1680px) {

    /*** BEGIN TEMPLATE MAIN COMPONENT -- FOOTER CSS SETTING ***/
    #footer .footer-nav-links li.li-nav-sub.sub-05 {
        width: 21%;
    }

    /*** BEGIN HOME CSS SETTING ***/
    .home-slide-banner {
        height: 449px;
    }
    .home-slide-banner-text {
        width: 70%;
        margin: 9.5rem 0 0 1.8rem;
    }
        .home-slide-banner-text h2 {
            font-size: 5.0625rem;
        }
    .home-slide-faq {
        height: 333px;
    }

    /*** BEGIN COURSE INTRO CSS SETTING ***/
    .course-intro-banner{
        height: 230px;
        background: url(../image/bg_course_intro_banner.png) 100% 0 no-repeat;
        background-size: 105%;
    }

    /*** BEGIN NEWS CSS SETTING ***/
    .main-visual-subscriptions-news {
        height: 310px;
        background: url(../image/bg_news_banner.png) center 0 no-repeat;
        background-size: 105%;
    }

    /*** BEGIN ABOUT CSS SETTING ***/
    .main-visual-subscriptions-about {
        height: 294px;
        background: url(../image/bg_news_banner.png) center 0 no-repeat;
        background-size: 105%;
    }
    .about-area .about-slide-desc-block-06 ul.ul-join-05 {
        width: 32.9%;
    }
}
@media (max-width: 1440px) {

    /*** BEGIN TEMPLATE MAIN COMPONENT -- FOOTER CSS SETTING ***/
    #footer .footer-info-block {
        width: 1180px;
    }
    #footer .footer-nav-links {
        margin: 0 0 0 6%;
    }

    /*** BEGIN HOME CSS SETTING ***/
    .home-slide-banner {
        height: 385px;
    }
    .home-slide-banner-text {
        width: 62%;
        margin: 7.5rem 0 0 2.5rem;
    }
        .home-slide-banner-text h2 {
            font-size: 4.809375rem;
        }
    .home-slide-faq {
        height: 268px;
    }

    /*** BEGIN COURSE INTRO CSS SETTING ***/
    .course-intro-banner{
        height: 206px;
        background: url(../image/bg_course_intro_banner.png) 90% 0 no-repeat;
        background-size: 110%;
    }

    /*** BEGIN NEWS CSS SETTING ***/
    .main-visual-subscriptions-news {
        height: 290px;
        background-size: 110%;
    }
    .main-visual-subscriptions-news .page-title{
        margin: 6% 0 0 6%;
    }
    .news-area .content-position-01 {
        width: 92%;
    }

    /*** BEGIN NEWS CONTENT CSS SETTING ***/
    .news-content-area .content-position-01{
        width: 92%;
    }
    .news-content-area .news-content-left-column .content-06 ul.f-03 li.li-fee-02, .news-content-area .news-content-left-column .content-06 ul.f-04 li.li-fee-02{
        display: none;
    }
    .news-content-area .news-content-left-column .content-06 ul.f-03 li.li-fee-06, .news-content-area .news-content-left-column .content-06 ul.f-04 li.li-fee-06{
        width: 73%;
    }

    /*** BEGIN ABOUT CSS SETTING ***/
    .main-visual-subscriptions-about {
        height: 264px;
        background-size: 110%;
    }
    .main-visual-subscriptions-about .page-title {
        font-size: 5.0625rem;
        margin: 7% 0 0 3%;
    }
    .about-area .about-slide-desc-block-06 .content-position-01 {
        width: 1180px;
    }
    .about-area .about-slide-desc-block-06 li {
        width: 95%;
    }
    .about-area .about-slide-desc-block-06 li.li-join-01 {
        font-size: 2.025rem;
    }
    .about-area .about-slide-desc-block-06 li.li-join-02 {
        margin: 15% 0 15% 33%;
        height: 4rem;
    }
    .about-area .about-slide-desc-block-06 li.li-join-03 {
        font-size: 1.18125rem;
    }
    .about-area .about-slide-desc-block-06 ul.ul-join-01 li.li-join-02{
        margin: 21% 0 9% 33%;
    }
    .about-area .about-slide-desc-block-06 ul.ul-join-05 {
        width: 28.7%;
    }
    .about-area .about-slide-desc-block-06 ul.ul-join-05 li.li-join-02{
        margin: 11% 0 7% 40%;
    }

    /*** BEGIN MEMBER RENEW PASSWORD CSS SETTING ***/
    .account-info-area ul.ul-renew-pw-content {
        float: right;
        width: 88%;
    }

    /*** BEGIN MEMBER ACCOUNT INFO CSS SETTING ***/
    .account-info-area ul.ul-account-info-content {
        float: right;
        width: 88%;
    }

    /*** BEGIN MEMBER MY COURSES CSS SETTING ***/
    .account-info-area ul.ul-account-main-menu {
        width: 15%;
    }
    .account-info-area ul.ul-my-courses-content {
        float: right;
        width: 88%;
    }

    /*** BEGIN MEMBER MY HOMEWORK CSS SETTING ***/
    .account-info-area ul.ul-my-homework-content {
        float: right;
        width: 88%;
    }

    /*** BEGIN MEMBER MY QA LIST CSS SETTING ***/
    .account-info-area ul.ul-my-courses-qa {
        float: right;
        width: 88%;
    }

    /*** BEGIN MEMBER MY QA INSERT CSS SETTING ***/
    .account-info-area ul.ul-my-courses-qa-insert {
        float: right;
        width: 88%;
    }

    /*** BEGIN MEMBER MY PAYMENT CSS SETTING ***/
    .account-info-area ul.ul-my-payment-content {
        float: right;
        width: 88%;
    }


}

@media (max-width: 1360px) {

    /*** BEGIN TEMPLATE MAIN COMPONENT -- FOOTER CSS SETTING ***/
    #footer .footer-nav-links {
        margin: 0 0 0 6.4%;
    }

    /*** BEGIN HOME CSS SETTING ***/
    .home-slide-banner {
        height: 363px;
    }
    .home-slide-banner-text {
        margin: 6.5rem 0 0 2.5rem;
    }
    .home-slide-faq {
        height: 245px;
    }

    /*** BEGIN COURSE INTRO CSS SETTING ***/
    .course-intro-banner{
        height: 195px;
    }
    
    /*** BEGIN NEWS CSS SETTING ***/
    .main-visual-subscriptions-news {
        height: 280px;
        background-size: 115%;
    }
        .main-visual-subscriptions-news .page-title{
            margin: 5.5% 0 0 6%;
        }
    .news-area .news-right-column {
        width: 29.0%;
    }

    /*** BEGIN ABOUT CSS SETTING ***/
    .main-visual-subscriptions-about {
        height: 261px;
        background-size: 115%;
    }
    .about-area .about-slide-desc-block-06 ul.ul-join-05 {
        width: 28.6%;
    }

    /*** BEGIN MEMBER RENEW PASSWORD CSS SETTING ***/
    .account-info-area ul.ul-renew-pw-content {
        float: right;
        width: 85%;
    }

    /*** BEGIN MEMBER ACCOUNT INFO CSS SETTING ***/
    .account-info-area ul.ul-account-info-content {
        float: right;
        width: 85%;
    }

    /*** BEGIN MEMBER MY COURSES CSS SETTING ***/
    .account-info-area ul.ul-account-main-menu {
        width: 18%;
    }
        .account-info-area li.li-amm-item {
            margin: 12% auto;
        }
        .account-info-area .div_sub_menu {
            width: 75%;
            margin: -3% 0 6%;
            padding: 2.5% 0 5% 10%;
        }
    .account-info-area ul.ul-my-courses-content {
        float: right;
        width: 85%;
    }
    

    /*** BEGIN MEMBER MY HOMEWORK CSS SETTING ***/
    .account-info-area ul.ul-my-homework-content {
        float: right;
        width: 85%;
    }

    /*** BEGIN MEMBER MY QA LIST CSS SETTING ***/
    .account-info-area ul.ul-my-courses-qa {
        float: right;
        width: 85%;
    }

    /*** BEGIN MEMBER MY QA INSERT CSS SETTING ***/
    .account-info-area ul.ul-my-courses-qa-insert {
        float: right;
        width: 85%;
    }

    /*** BEGIN MEMBER MY PAYMENT CSS SETTING ***/
    .account-info-area ul.ul-my-payment-content {
        float: right;
        width: 85%;
    }

}

@media (max-width: 1280px) {
    /*** BEGIN TEMPLATE MAIN COMPONENT -- FOOTER CSS SETTING ***/
    #footer .footer-nav-links {
        margin: 0 0 0 6.4%;
    }

    /*** BEGIN HANYU APP INTRO CSS SETTING ***/
    .slide-01 {
    	width: 100%;
    	height: 737px;
    }
    .slide-02 {
    	width: 100%;
    	height: 630px;
    }
    /*.slide-03 {
    	width: 100%;
    }*/
    .slide-03-svg-01 {
        background-size: cover;
    }
    .slide-03-svg-02 {
        background-size: cover;
    }
    .slide-04 {
    	width: 100%;
    }
    .slide-05 {
    	width: 100%;
    	height: 642px;
    }
    .slide-06 {
    	width: 100%;
    	height: 635px;
    }
    .slide-07 {
    	width: 100%;
    	height: 643px;
    }
    .slide-08 {
    	width: 100%;
    	height: 856px;
    }
    .slide-09 {
    	width: 100%;
    	height: 463px;
    }
    .slide-10 {
    	width: 100%;
    }
    	.slide-10-right {
    		margin-top: 9.6%;
    	}

    /*** BEGIN HOME CSS SETTING ***/
    .home-slide-banner {
        height: 359px;
        background: url(../image/bg_index_03.jpg) center 0 no-repeat;
        background-size: 105%;
    }
    .home-slide-banner-text {
        /* width: 62%; */
        margin: 5.5rem 0 0 2.5rem;
    }
    .home-slide-faq {
        height: 225px;
    }

    /*** BEGIN COURSE INTRO CSS SETTING ***/
    .course-intro-banner{
        height: 192px;
        background: url(../image/bg_course_intro_banner.png) 80% 0 no-repeat;
        background-size: 115%;
    }

    /*** BEGIN NEWS CSS SETTING ***/
    .main-visual-subscriptions-news {
        height: 265px;
    }
    .main-visual-subscriptions-news .page-title{
        margin: 5.5% 0 0 7%;
    }
    .news-area .news-left-column .news-list li.li-title{
        width: 91%;
        font-size: 1.51875rem;
    }
    .news-area .news-left-column .news-list li.li-content{
        font-size: 1.18125rem;
    }
    .news-area .news-right-column {
        overflow: visible;
    }
    .news-area .news-right-column li.li-news-latest-updated, .news-area .news-right-column li.li-categories{
        width: 93%;
        font-size: 1.18125rem;
    }

    /*** BEGIN ABOUT CSS SETTING ***/
    .main-visual-subscriptions-about {
        height: 245px;
    }
    .main-visual-subscriptions-about .page-title {
        font-size: 4.55625rem;
        margin: 6% 0 0 3%;
    }

    /*** BEGIN MEMBER RENEW PASSWORD CSS SETTING ***/
    .account-info-area ul.ul-renew-pw-content {
        float: right;
        width: 82%;
    }

    /*** BEGIN MEMBER ACCOUNT INFO CSS SETTING ***/
    .account-info-area ul.ul-account-info-content {
        float: right;
        width: 82%;
    }

    /*** BEGIN MEMBER MY COURSES CSS SETTING ***/
    .account-info-area ul.ul-account-main-menu {
        width: 20%;
    }
    .account-info-area ul.ul-my-courses-content {
        float: right;
        width: 82%;
    }
    

    /*** BEGIN MEMBER MY HOMEWORK CSS SETTING ***/
    .account-info-area ul.ul-my-homework-content {
        float: right;
        width: 82%;
    }

    /*** BEGIN MEMBER MY QA LIST CSS SETTING ***/
    .account-info-area ul.ul-my-courses-qa {
        float: right;
        width: 82%;
    }

    /*** BEGIN MEMBER MY QA INSERT CSS SETTING ***/
    .account-info-area ul.ul-my-courses-qa-insert {
        float: right;
        width: 82%;
    }

    /*** BEGIN MEMBER MY PAYMENT CSS SETTING ***/
    .account-info-area ul.ul-my-payment-content {
        float: right;
        width: 82%;
    }

}

@media (max-width: 1024px) {

    /*** BEGIN MAIN STRUCTURE CSS SETTING ***/
    .content-position-01 {
        width: 92%;
        padding-bottom: 8%;
    }
    #nav-language > .content-position-01 {
        padding-bottom: 0;
    }
    #cookie-collect-inform > .content-position-01 {
        padding-bottom: 0;
    }
    #footer > .content-position-01 {
        padding-bottom: 0;
    }

    /*** BEGIN TEMPLATE MAIN COMPONENT -- HEADER CSS SETTING ***/
    #logo-nsysu .nsysu-chinese{
        font-size: 1.51875rem;
        letter-spacing: 0.1rem;
    }
    #logo-nsysu .nsysu-english{
        font-size: 0.84375rem;
    }
    #logo-text {
        width: 53%;
        font-size: 2.4738rem;
        margin: 1% 0 2%;
    }
    #nav-buttons-cp {
        width: 47%;
        margin: 2% 0 0;
    }
        #nav-buttons-cp li {
            margin: 1% 2.5% 0;
        }
        #nav-buttons-cp li.li-login-btn {
            margin: 0 0 0 3.75%;
            padding: 1.3% 5%;
        }

    /*** BEGIN TEMPLATE MAIN COMPONENT -- FOOTER CSS SETTING ***/
    #footer .footer-info-block {
        width: 100%;
    }
    #footer .footer-info li {
        font-size: 0.95625rem;
    }
    #footer .footer-nav-links {
        width: 35%;
        margin: 0 0 0 12%;
    }
        #footer .footer-nav-links li.li-nav-main {
            font-size: 0.938rem;
        }
        #footer .footer-nav-links li.li-nav-sub {
            font-size: 2.025rem;
            vertical-align: middle;
        }
            #footer .footer-nav-links li.li-nav-sub.sub-02 {
                width: 11%;
            }

    /*** BEGIN HOME CSS SETTING ***/
    .home-slide-banner {
        height: 301px;
        background-size: 110%;
    }
    .home-slide-banner-text {
        width: 64%;
        margin: 5rem 0 0 1.5rem;
    }
    .home-slide-banner-text h2 {
        font-size: 3.89559375rem;
    }
    .home-slide-about-us {
        padding: 2.0rem 0 2.5rem;
    }
    .home-slide-about-us .content-position-01{
        width: 92%;
    }
    .home-slide-about-us h2 {
        font-size: 3rem;
        margin: 0 0 2.0rem;
    }
    .home-slide-about-us .desc-block-07-desc{
        /* padding-left: 1.5%;
        margin: 0 0 3%; */
        font-size: 1.18125rem;
        /* letter-spacing: 0.015rem; */
        /* line-height: 170%; */
    }
    .home-slide-about-us ul {
        clear: both;
        width: 100%;
        overflow: hidden;
        margin: 0 auto 4%;
        padding: 0;
    }
    .home-slide-about-us li.li-q-text {
        width: 100%;
        font-size: 0.927rem;
        /* letter-spacing: 0.015rem; */
        /* line-height: 170%; */
    }
    .home-slide-course-lists {
        padding: 2rem 0 4rem;
    }
    .home-slide-course-lists h2 {
        font-size: 3rem;
        margin-bottom: 3rem;
    }
    .home-slide-course-lists ul {
        height: 27rem;
        /* width: 31.1%;
        margin: 0 2% 2% 0;
        padding: 0; */
    }
    .home-slide-course-lists img {
        margin-bottom: 0.8rem;
    }
    .home-slide-course-lists li {
        width: 81%;
        padding: 0;
    }
    .home-slide-course-lists li.li-course-01 {
        font-size: 1.366875rem;
        line-height: normal;
        margin: 0 auto 1.15rem;
    }
    .home-slide-course-lists li.li-course-02 {
        font-size: 0.95625rem;
        margin: 0 auto 1.5rem;
    }
    .home-slide-course-lists li.li-course-03 {
        /* height: 5rem; */
        overflow: hidden;
        color: #b3b3b3;
        font-size: 1.18125rem;
        line-height: normal;
        margin: 0 auto;
    }
    .home-slide-course-lists li.li-more-btn {
        font-size: 0.95625rem;
        line-height: normal;
        margin: 1.8rem auto 0;
        padding: 3% 0;
    }
    .home-slide-course-lists .course-lists-more{
        /* width: 25%;
        font-size: 1.51875rem; */
        margin: 3rem 0 0 21.5rem;
        /* padding: 1% 0; */
    }
    .home-slide-join-class {
        padding: 2rem 0 0;
    }
        .home-slide-join-class h2{
            font-size: 3rem;
            margin-bottom: 2rem;
        }
        .home-slide-join-class .join-class .item-title {
            font-size: 2.08125rem;
        }
        .home-slide-join-class .join-class .item-title.title-05 {
            font-size: 2.025rem;
        }
        .home-slide-join-class .join-class .item-sub-title {
            font-size: 1.0925rem;
        }
        .home-slide-join-class .join-class .item-content {
            font-size: 0.875rem;
        }

    /* .home-slide-join-class ul {
        height: 29rem;
    }
    .home-slide-join-class li {
        width: 90%;
    }
    .home-slide-join-class li.li-step {
        font-size: 2.08125rem;
        margin: 0 auto 1.15rem;
    }
    .home-slide-join-class li.li-join-01 {
        font-size: 1.125rem;
    }
    .home-slide-join-class li.li-join-02 {
        margin: 3.3rem 0 0 3.3rem;
        height: 7rem;
    }
    .home-slide-join-class li.li-join-03 {
        font-size: 0.95625rem;
    }
    .home-slide-join-class ul.join-arrow li{
        margin: 11.5rem 0 0;
    }
    .home-slide-join-class ul.ul-join-03 li.li-join-02{
        margin: 4rem 0 0 3.0rem;
        height: 6.3rem;
    }
    .home-slide-join-class ul.ul-join-05 li.li-join-01 {
        font-size: 2.025rem;
        margin: 0 auto 1.15rem;
    }
    .home-slide-join-class ul.ul-join-05 li.li-join-02 {
        margin: 4rem 0 0 2rem;
        height: 8.2rem;
    } */

    .home-slide-news {
        margin: 0 auto;
        padding: 2rem 0 0;
        background: url(../image/bg_index_news.png) 0 0 repeat;
        background-size: 100%;
    }
        .home-slide-news h2 {
            font-size: 3rem;
            margin-bottom: 2rem;
        }
        .home-slide-news ul {
            width: 30%;
        }
            .home-slide-news ul.ul-news-01 {
                margin: 0 3% 0 0;
            }
            .home-slide-news ul.ul-news-02 {
                margin: 0 3% 0 0;
            }
            .home-slide-news img {
                width: 100%;
            }
            .home-slide-news li.li-news-01 {
                height: 2.5rem;
                font-size: 0.938rem;
                margin: 0.25rem 0 1rem 0.6rem;
            }
            .home-slide-news li.li-news-02 {
                font-size: 0.875rem;
                margin: 0 0 1rem 0.6rem;
                /* padding: 0 0 0 0.5rem; */
            }
    .home-slide-faq {
        height: 156px;
    }
        .home-slide-faq ul {
            width: 29.8%;
        }
        /* .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 4rem;
        }
        .home-slide-faq ul.ul-faq-02 {
            width: 23.8%;
            margin: 0 11.9% 0 0;
        }
        .home-slide-faq .ul-faq-02 li.li-faq-01{
            font-size: 2rem;
            margin: 0 0 0.5rem 0;
        }
        .home-slide-faq .ul-faq-02 li.li-faq-02{
            font-size: 0.95625rem;
        }
        .home-slide-faq .ul-faq-03{
            font-size: 0.95625rem;
        }
        .home-slide-faq ul.ul-faq-04 {
            width: 52%;
            margin: 3rem 0 0 0rem;
        }
        .home-slide-faq .ul-faq-04 li.li-faq-01{
            font-size: 2.7rem;
        }
        .home-slide-faq .ul-faq-04 li.li-faq-02{
            font-size: 2.7rem;
            margin: 0 1.5rem 0 0;
        }
        .home-slide-faq ul.ul-faq-05 {
            width: 42%;
            margin: 3rem 0 0 3rem;
        }
        .home-slide-faq .ul-faq-05 li.li-faq-01{
            font-size: 2.7rem;
        }

    /*** BEGIN FEATURE CSS SETTING ***/
    .features-area .feature-slide-desc-block-03 .desc-block-03-left {
        margin: 0;
    }

    /*** BEGIN HANYU APP INTRO CSS SETTING ***/
    .home-slide-01 .home-slide-01-desc-block-01 .desc-block-01-left {
        margin: 0;
    }
    .home-slide-02 .home-slide-02-desc-block-02 li.li-more-btn {
        display: none;
    }

    /*** BEGIN HANYU APP INTRO CSS SETTING ***/
    /*.content-position-01 {
    	width: 92%;
    }*/
    .slide-01 {
    	height: 589px;
    }
    	.slide-01-right {
    		margin: 25% 8% 0 0;
    	}
		    .slide-01-right .main-slogan {
		    	font-size: 1.5em;
		    }
		    .slide-01-right .btn-get-started {
		    	font-size: 1.15em;
		    }
    .slide-02 {
    	height: 530px;
    }
	    .slide-02-left .main-slogan {
	    	font-size: 1.5em;
	    }
	    .slide-02-left .sub-slogan {
	    	font-size: 1.15em;
	    }
    /*.slide-03 {
    	height: 292px;
    }
	    .slide-03-center {
	    	margin: 5% auto 0;
	    }
		    .slide-03-center .main-slogan {
		    	font-size: 1.5em;
		    }
		    .slide-03-center .sub-slogan {
		    	font-size: 1.15em;
		    }
		    .slide-03-center .btn-see-how-it-works {
		    	font-size: 1.15em;
		    }*/
    .slide-03-svg-01 {
        height: 501px;
        background-color: #0360ae;
        background-size: 100%;
    }
        .slide-03-svg-01-right .main-slogan {
            font-size: 1.5em;
        }
        .slide-03-svg-01-right .sub-desc {
            font-size: 1em;
        }
    .slide-03-svg-02 {
        height: 559px;
        background-color: #f6b503;
        background-size: 100%;
    }
        .slide-03-svg-02-left .main-slogan {
            font-size: 1.5em;
        }
        .slide-03-svg-02-left .sub-desc {
            font-size: 1em;
        }
    .slide-04 {
    	height: 826px;
    }
    	.slide-04-center {
    		font-size: 1.5em;
    	}
    	.slide-04-inline-block .main-slogan {
    		font-size: 1.5em;
    	}
    .slide-05 {
    	height: 514px;
    }
    	.slide-05-right .main-slogan {
    		font-size: 1.5em;
    	}
    .slide-06 {
    	height: 520px;
    }
    	.slide-06-left .main-slogan {
    		font-size: 1.5em;
    	}
	.slide-07 {
    	height: 516px;
    }
    	.slide-07-right .main-slogan {
    		font-size: 1.5em;
    	}
    	.slide-07-right .sub-desc {
    		position: absolute;
    		top: 120px;
    	}
	.slide-08 {
    	height: 779px;
    }
    	.slide-08-center .main-slogan {
    		font-size: 1.5em;
    	}
    	.slide-08-table li.li-tb-title-text {
    		font-size: 1.15em;
    	}
	.slide-09 {
		height: 371px;
	}
    	.slide-09-center {
    		font-size: 1.5em;
    	}
    	.slide-09-inline-block .customer-name {
    		font-size: 1.15em;
    	}
	.slide-10 {
		height: 425px;
	}
		.slide-10-left {
			width: 30%;
			margin: 7% 0 0 10%;
		}
		.slide-10-right {
			margin: 8.6% 6.633% 0 0;
		}
			.slide-10-right .main-slogan {
				font-size: 1.5em;
			}

    /*** BEGIN COURSE INTRO CSS SETTING ***/
    .course-switch > .content-position-01 {
        margin: 3% auto 6%;
        padding: 0;
    }
    .course-intro-area {
        margin: 0 auto;
    }
    .course-intro-banner{
        height: 174px;
        background: url(../image/bg_course_intro_banner.png) 35% 0 no-repeat;
        background-size: 130%;
    }
    .course-switch li{
        font-size: 1.9125rem;
    }
    .course-intro-area .cia-left-column h2 {
        font-size: 1.9125rem;
    }
    .course-intro-area .cia-left-column li{
        font-size: 1.063125rem;
    }
    .course-intro-area .cia-left-column .desc-block-title li{
        font-size: 1.18125rem;
        padding: 0.5rem 0rem 0.5rem 2rem;
    }
    .course-intro-area .cia-left-column .desc-block-title img.rotate {
        top: 1rem;
    }
    .course-intro-area .cia-left-column .desc-block-title img {
        padding: 1rem 1.25rem 0 0;
    }
    .course-intro-area .cia-right-column h3 {
        font-size: 1.18125rem;
    }
    .course-intro-area .cia-right-column li {
        font-size: 1.18125rem;
    }
    .course-intro-area .cia-course h3{
        font-size: 1.9125rem;
        margin-bottom: 2.5rem;
    }
    .course-intro-area .cia-course li{
        font-size: 1.224rem;
        padding: 2.448rem 0;
    }
    .title-fs {
        font-size: 1.035rem !important;
        padding: 2.604rem 0 !important;
    }
    .content-tl {
        padding: 1.729rem 0 !important;
    }
    .course-intro-area .cia-course .course-list ul.ul-block-buy a {
        padding: 9% 21.5%;
    }
    .cia-enroll-class {
        padding: 3.5% 0;
    }
    .cia-enroll-class h2{
        font-size: 1.9125rem;
        margin-bottom: 3.5%;
    }
    .cia-enroll-class ul {
        height: 28rem;
    }
    .cia-enroll-class li.li-step {
        font-size: 2.08125rem;
    }
    .cia-enroll-class li.li-enroll-img {
        margin: 15% 15%;
    }
    .cia-enroll-class li.li-enroll-desc {
        font-size: 0.95625rem;
    }
    .cia-enroll-class li.li-enroll-desc-02 {
        font-size: 0.84375rem;
    }
    .course-intro-area .cia-central-qa-column {
        padding: 3.5% 0;
    }
    .course-intro-area .cia-central-qa-column .div-title-block {
        margin: 0 auto;
    }
    .course-intro-area .cia-central-qa-column .div-title-block h3 {
        font-size: 1.9125rem;
        margin: 0;
        padding: 0 0 3.5%;
    }
    .course-intro-area .cia-central-qa-column .div-left-qa-list-block .faq-user-photo-block {
        width: 155px;
        height: 155px;
    }
    .course-intro-area .cia-central-qa-column .div-left-qa-list-block .faq-type-block {
        width: 57%;
        font-size: 0.95625rem;
        margin: 5.5% 0 0 5%;
    }
    .course-intro-area .cia-central-qa-column .div-left-qa-list-block .faq-title-block {
        width: 57%;
        font-size: 1.18125rem;
    }
    .course-intro-area .cia-central-qa-column .div-left-qa-list-block .faq-user-info-block {
        width: 57%;
        font-size: 0.95625rem;
    }
    .course-intro-area .cia-central-qa-column .div-left-qa-list-block .icon-faq-arrow {
        margin: 9% 0 0 0;
    }
    .course-intro-area .cia-central-qa-column .div-right-qa-ui-block {
        margin: 0 0 8.055% 0;
    }
    .course-intro-area .cia-central-qa-column .div-right-qa-ui-block h3 {
        font-size: 1.8rem;
        margin: 0 auto;
    }
    .course-intro-area .cia-central-qa-column .div-right-qa-ui-block h2 {
        font-size: 6.75rem;
    }
    .course-intro-area .cia-central-qa-column .div-right-qa-ui-block .login-btn {
        font-size: 1.18125rem;
        margin: 0 auto;
        padding: 1rem 0;
    }
    .world {
        padding: 3.5% 0;
    }
    .world li {
        font-size: 2.7rem;
    }
    .world ul.ul-world-01 {
        width: 50%;
        margin: 0 0 0 2%;
    }
    .world .ul-world-01 li.li-world-02{
        margin: 0 3% 0 0;
    }
    .world ul.ul-world-02 {
        margin: 0 0 0 4%;
    }
    .world .ul-world-02 li.li-world-01{
        letter-spacing: 0;
    }

    /*** BEGIN COURSE INTRO 02 CSS SETTING ***/
    .course-intro-02-area .ci02-slide-desc-block-01 .content-position-01 {
        width: 92%;
    }
    .course-intro-02-area .ci02-slide-desc-block-02 .content-position-01 {
        width: 92%;
    }
        .course-intro-02-area .ci02-slide-desc-block-02 li.li-desc-text {
            margin: 0;
        }
    .course-intro-02-area .ci02-slide-desc-block-03 .content-position-01 {
        width: 92%;
    }
    .course-intro-02-area .ci02-slide-desc-block-04 .content-position-01 {
        width: 92%;
    }
    .course-intro-02-area .ci02-slide-desc-block-05 .content-position-01 {
        width: 92%;
    }
    .course-intro-02-area .ci02-slide-desc-block-06 .content-position-01 {
        width: 92%;
    }
    .course-intro-02-area .ci02-slide-desc-block-07 .content-position-01 {
        width: 92%;
    }

    /*** BEGIN COURSES_01 CSS SETTING ***/
    .courses-01-area {
        padding: 4.9rem 0;
    }
    .courses-01-area h2{
        font-size: 3.7rem;
    }
    .courses-01-area ul {
        height: 35.6rem;
    }
        /* .courses-01-area li.li-course-name-eng {
            height: 52px;
        } */
        .courses-01-area li.li-more-btn {
            margin: 1.5rem auto 0;
        }
        .courses-01-area li.li-more-btn .div-btn {
            width: 49.6%;
        }

	/*** BEGIN SUBSCRIPTIONS CSS SETTING ***/
	.subscription-info-table li.li-sit-small {
		width: 2.65%;
	}
	.subscription-info-table .btn-sign-up {
		font-size: 0.875em;
	}

    /*** BEGIN BLOG CSS SETTING ***/
    .blog-area .blog-left-column .blog-list iframe {
        width: 231px;
        height: 140px;
    }
    .blog-area .blog-left-column li.li-post-tag {
        width: 65%;
    }

    /*** BEGIN MEMBER MY QA INSERT CSS SETTING ***/
    .account-info-area ul.ul-my-courses-qa-insert div.div-qa-select-area .div-qa-select-block {
        width: 65%;
        margin-bottom: 0.75rem;
    }
        .account-info-area ul.ul-my-courses-qa-insert div.div-qa-select-area label {
            margin: 0 0.25rem 0 0 !important;
        }
        .account-info-area ul.ul-my-courses-qa-insert div.div-qa-select-area select {
            width: 66%;
        }
    
    /*** BEGIN NEWS CSS SETTING ***/
    .main-visual-subscriptions-news {
        height: 220px;
        background: url(../image/bg_news_banner.png) 39% 0 no-repeat;
        background-size: 118%;
    }
    .main-visual-subscriptions-news .page-title{
        font-size: 4.55625rem;
        margin: 5% 0 0 6%;
    }
    .news-area .news-left-column .news-list li.li-title{
        width: 100%;
        font-size: 1.29853125rem;
    }
    .news-area .news-left-column .news-list li.li-content{
        font-size: 0.9568125rem;
    }
    .news-area .news-left-column li.li-post-time {
        float: none;
        font-size: 0.84375rem;
    }
        .news-area .news-left-column li.li-post-time img {
            width: 6%;
        }
    .news-area .news-left-column li.li-post-tag {
        float: none;
        display: inline-block;
        font-size: 0.84375rem;
    }
    .news-area .news-left-column li.li-post-tag.tag-03 {
        display: inline-block;
        width: auto;
        margin: 3% 0 0;
    }
    .news-area .news-left-column li.li-post-tag img {
        margin: 0 0.25rem 0 0.5rem;
    }
    .news-area .news-left-column li.li-post-tag.tag-01 img {
        margin: 0 0.25rem 0 0;
    }
    .news-area .news-right-column h3 {
        font-size: 1.25rem;
    }
    .news-area .news-right-column li.li-news-latest-updated, .news-area .news-right-column li.li-categories{
        font-size: 0.938rem;
    }

    /*** BEGIN NEWS CONTENT CSS SETTING ***/
    .news-content-area .news-content-left-column h3 {
        font-size: 2.025rem;
    }
    .news-content-area .news-content-left-column li.li-post-time, .news-content-area .news-content-left-column li.li-post-tag{
        font-size: 0.95625rem;
    }
    .news-content-area .news-content-left-column li.li-post-time img {
        margin: 0 0.25rem 0 0;
    }
    .news-content-area .news-content-left-column li.li-post-tag img {
        margin: 0 0.25rem 0 0.5rem;
    }
    .news-content-area .news-content-left-column li, .news-content-area .news-content-left-column li.content{
        font-size: 1.18125rem;
    }
    .news-content-area .news-content-left-column .content-06 ul {
        width: 100%;
    }
    .news-content-area .news-content-left-column .content-06 ul.fee li {
        font-size: 0.95625rem;
    }
    .news-content-area .news-content-left-column .content-06 ul.f-02{
        width: 21.995%;
    }
    .news-content-area .news-content-left-column .content-06 ul.f-02 li.li-fee-01{
        padding: 30.65% 0;
    }
    .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: 78%;
    }
    .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: 22%;
    }
    .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: 9%;
    }
    .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-right-column {
        overflow: visible;
    }
    .news-content-area .news-content-right-column h3 {
        font-size: 1.25rem;
    }
    .news-content-area .news-content-right-column li.li-news-content-latest-updated, .news-content-area .news-content-right-column li.li-categories{
        font-size: 0.938rem;
    }

    /*** BEGIN ABOUT CSS SETTING ***/
    .main-visual-subscriptions-about {
        height: 201px;
        background: url(../image/bg_news_banner.png) 39% 0 no-repeat;
        background-size: 118%;
    }
    .main-visual-subscriptions-about .page-title {
        font-size: 4.100625rem;
        margin: 6% 0 0 3%;
    }
    .about-area h2{
        font-size: 3.6rem;
    }
    .about-area .about-slide-desc-block-01 .content-position-01 {
        width: 92%;
        padding-bottom: 0;
    }
    .about-area .about-slide-desc-block-01 .desc-block-01-desc{
        font-size: 1.18125rem;
    }
    .about-area .about-slide-desc-block-02 .content-position-01, .about-area .about-slide-desc-block-03 .content-position-01, .about-area .about-slide-desc-block-04 .content-position-01, .about-area .about-slide-desc-block-05 .content-position-01 {
        width: 92%;
    }
    .about-area .about-slide-desc-block-03 p, .about-area .about-slide-desc-block-04 p, .about-area .about-slide-desc-block-05 p {
        font-size: 1.404rem;
        line-height: 150%;
    }
    .about-area .about-slide-desc-block-03 .desc-block-03-left {
        padding: 5.3% 2%;
    }
    .about-area .about-slide-desc-block-04 .desc-block-04-right {
        padding: 5.3% 2%;
    }
    .about-area .about-slide-desc-block-05 .desc-block-05-left {
        padding: 8.8% 2%;
    }
    .about-area .about-slide-desc-block-06 .content-position-01 {
        width: 92%;
        padding-bottom: 3%;
    }
    .about-area .about-slide-desc-block-06 .why_us .item-title, .about-area .about-slide-desc-block-06 .why_us .item-photo, .about-area .about-slide-desc-block-06 .why_us .item-content {
        flex: 0 1 35%;
    }
    .about-area .about-slide-desc-block-06 .why_us .order-02{
        margin: 3% 0;
    }
    .about-area .about-slide-desc-block-06 .why_us .order-03{
        margin: 0;
    }
    .about-area .about-slide-desc-block-06 .why_us .rwd-order-03{
        margin: 0 0 8%;
    }
    .about-area .about-slide-desc-block-06 .why_us .rwd-order-04{
        order: 4;
    }
    .about-area .about-slide-desc-block-06 .why_us .rwd-order-05{
        order: 5;
        margin: 3% 0;
    }
    .about-area .about-slide-desc-block-06 .why_us .rwd-order-06{
        order: 6;
        margin: 0 0 8%;
    }
    .about-area .about-slide-desc-block-06 .why_us .rwd-order-07{
        order: 7;
    }
    .about-area .about-slide-desc-block-06 .why_us .rwd-order-08{
        order: 8;
        margin: 3% 0;
    }
    .about-area .about-slide-desc-block-06 .why_us .rwd-order-09{
        order: 9;
    }
    .about-area .about-slide-desc-block-06 .why_us .title-04, .about-area .about-slide-desc-block-06 .why_us .content-04{
        margin-left: 0;
    }
    .about-area .about-slide-desc-block-06 .why_us .photo-04{
        margin: 3% 0%;
    }
    .about-area .about-slide-desc-block-06 .why_us .title-05, .about-area .about-slide-desc-block-06 .why_us .content-05{
        margin-right: 0;
        margin: 0 16%;
    }
    .about-area .about-slide-desc-block-06 .why_us .photo-05{
        margin: 3% 0;
    }

    /*** BEGIN MEMBER RENEW PASSWORD CSS SETTING ***/
    .account-info-area ul.ul-renew-pw-content {
        float: right;
        width: 78%;
    }

    /*** BEGIN MEMBER ACCOUNT INFO CSS SETTING ***/
    .account-info-area ul.ul-account-info-content {
        float: right;
        width: 78%;
    }

    /*** BEGIN MEMBER MY COURSES CSS SETTING ***/
    .account-info-area ul.ul-account-main-menu {
        width: 23%;
    }
    .account-info-area ul.ul-my-courses-content {
        float: right;
        width: 78%;
    }
    

    /*** BEGIN MEMBER MY HOMEWORK CSS SETTING ***/
    .account-info-area ul.ul-my-homework-content {
        float: right;
        width: 78%;
    }

    /*** BEGIN MEMBER MY QA LIST CSS SETTING ***/
    .account-info-area ul.ul-my-courses-qa {
        float: right;
        width: 78%;
    }

    /*** BEGIN MEMBER MY QA INSERT CSS SETTING ***/
    .account-info-area ul.ul-my-courses-qa-insert {
        float: right;
        width: 78%;
    }

    /*** BEGIN MEMBER MY PAYMENT CSS SETTING ***/
    .account-info-area ul.ul-my-payment-content {
        float: right;
        width: 78%;
    }

    /*** BEGIN MEMBER MY VIDEOS CSS SETTING ***/
    .account-info-area ul.ul-my-video {
        float: right;
        width: 78%;
    }
        .account-info-area ul.ul-my-video .div-video-block li.li-video-title {
            font-size: 0.875rem;
        }
        .account-info-area ul.ul-my-video .div-video-block li.li-video-date {
            font-size: 0.813rem;
            padding: 0 0 0 0.25rem;
            border-left: 0.45rem solid #ab4443;
        }

}

@media (max-width: 960px) {
    /*** BEGIN TEMPLATE MAIN COMPONENT -- HEADER CSS SETTING ***/
    #logo-nsysu .nsysu-chinese{
        font-size: 1.366875rem;
    }
    #logo-nsysu .nsysu-english{
        font-size: 0.759375rem;
    }
    #logo-text {
        width: 53%;
        font-size: 2.22642rem;
        margin: 1% 0 1.5%;
    }
    #nav-buttons-cp {
        width: 47%;
        margin: 2% 0 0;
    }
    #nav-buttons-cp li {
        margin: 1% 2.5% 0;
    }
    #nav-buttons-cp li.li-login-btn {
        margin: 0 0 0 3.75%;
    }
    
    /*** BEGIN TEMPLATE MAIN COMPONENT -- FOOTER CSS SETTING ***/
    #footer .footer-nav-links {
        margin: 0 0 0 9%;
    }
    #footer .footer-nav-links li.li-nav-sub {
        font-size: 1.8225rem;
    }

    /*** BEGIN HOME CSS SETTING ***/
    .home-slide-banner {
        height: 295px;
        background-size: 115%;
    }
    .home-slide-banner-text h2 {
        font-size: 3.506rem;
    }
    .home-slide-course-lists ul {
        height: 25.5rem;
    }
    .home-slide-course-lists li.li-course-01 {
        font-size: 1.2301875rem;
    }
    .home-slide-course-lists li.li-course-02 {
        font-size: 0.95625rem;
    }
    .home-slide-course-lists li.li-course-03 {
        font-size: 1.063125rem;
    }
    .home-slide-course-lists .course-lists-more{
        margin: 2rem 0 0 20rem;
    }


    .home-slide-join-class .join-class .item-sub-title {
        font-size: 1.0125rem;
    }
    /* .home-slide-join-class ul.ul-join-05 li.li-join-01 {
        font-size: 1.92375rem;
        margin: 0 auto 1.15rem;
    }
    .home-slide-join-class ul.ul-join-05 li.li-join-02 {
        margin: 4rem 0 0 1.5rem;
        height: 8.4rem;
    } */
    .home-slide-news {
        margin: 0 auto;
        padding: 2rem 0 3rem;
    }
        .home-slide-news > .content-position-01 {
            padding-bottom: 0;
        }
        .home-slide-news li.li-news-01 {
            font-size: 0.860625rem;
        }
        .home-slide-news li.li-news-02 {
            font-size: 0.759375rem;
        }
        .home-slide-news ul.news-lists-more {
            width: 23%;
            font-size: 1.5rem;
            margin: 2.75rem auto 0;
            padding: 0.75% 0;
        }
    .home-slide-faq {
        height: 136px;
    }
        .home-slide-faq .ul-faq-04 li.li-faq-01{
            font-size: 2.43rem;
        }
        .home-slide-faq .ul-faq-04 li.li-faq-02{
            font-size: 2.43rem;
            margin: 0 1.5rem 0 0;
        }
        .home-slide-faq ul.ul-faq-05 {
            width: 42%;
            margin: 3rem 0 0 2rem;
        }
        .home-slide-faq .ul-faq-05 li.li-faq-01{
            font-size: 2.43rem;
        }

    /*** BEGIN HANYU APP INTRO CSS SETTING ***/
    .slide-01 {
        height: 553px;
    }
	    .slide-01-right {
	        margin: 30% 4.37% 0 0;
	    }
    .slide-02-left {
        width: 37.085%;
    }
        .slide-02-left .download-link-area li {
            margin-top: 10%;
        }
    .slide-03-svg-01 {
        height: 470px;
    }
    .slide-03-svg-02 {
        height: 524px;
    }
    .slide-04 {
        height: 790px;
    }
    .slide-05 {
        height: 481px;
    }
    .slide-07 {
        height: 482px;
    }

    /*** BEGIN COURSES CSS SETTING ***/
    .courses-area li.li-course-name {
        font-size: 1.75em;
    }

    /*** BEGIN COURSE INTRO CSS SETTING ***/
    .course-intro-area {
        margin: 0 auto;
    }
    .course-intro-area .content-position-01.cia-01{
        margin: 4% auto;
    }
    .course-intro-banner{
        height: 169px;
        background-size: 135%;
    }
    .course-intro-area .cia-left-column h2{
        font-size: 1.72125rem;
    }
    .course-intro-area .cia-course .course-list .flex-info .item-course-title, .course-intro-area .cia-course .course-list .flex-info .item-course-content{
        font-size: 0.9rem;
    }
    /* .course-intro-area .cia-course li{
        padding: 2.2032rem 0;
    } */
    /* .title-fs {
        padding: 1.61rem 0 !important;
    }
    .content-tl {
        padding: 1.485rem 0 !important;
    } */
    .course-intro-area .cia-central-qa-column .div-left-qa-list-block .faq-type-block {
        margin: 5.8% 0 0 5%;
    }
    .course-intro-area .cia-central-qa-column .div-left-qa-list-block .icon-faq-arrow {
        margin: 10% 0 0 0;
        width: 38.4px;
    }
    .world li {
        font-size: 2.43rem;
    }

    /*** BEGIN COURSES_01 CSS SETTING ***/
    .courses-01-area ul {
        height: 37.45rem;
    }
        .courses-01-area li.li-course-price-info {
            height: 39px;
        }

    /*** BEGIN SUBSCRIPTIONS CSS SETTING ***/
    .subscription-info-table li.li-sit-small {
    	width: 2.85%;
    }
    .subscription-info-table .plans-desc {
    	font-size: 0.875em;
    }

    /*** BEGIN BLOG CSS SETTING ***/
    .blog-area .blog-left-column .blog-list a.img-main{
        width: 50%;
    }
    .blog-area .blog-left-column .blog-list iframe {
        width: 193px;
    }

    /*** BEGIN BLOG CONTENT CSS SETTING ***/
    .blog-content-area .blog-content-left-column .blog-content-image iframe {
        height: 338px;
    }
        
    /*** BEGIN COURSES_01 CSS SETTING ***/
    .courses-01-area {
        padding: 4.8rem 0;
    }
    .courses-01-area h2{
        font-size: 3.45rem;
    }
    .courses-01-area img {
        margin-bottom: 2.185rem;
    }
    .courses-01-area li.li-course-name-eng {
        margin: 0 auto 1.5rem;
    }

    /*** BEGIN MEMBER MY QA LIST CSS SETTING ***/
    .account-info-area ul.ul-my-courses-qa .div-qa-list-block li.li-faq-desc .qa-upload-img {
        width: 96%;
    }

    /*** BEGIN NEWS CSS SETTING ***/
    .main-visual-subscriptions-news {
        height: 210px;
    }
    .news-area .news-left-column {
        width: 75%;
    }
    .news-area .news-right-column {
        width: 24.5%;
    }

    /*** BEGIN ABOUT CSS SETTING ***/
    .main-visual-subscriptions-about {
        height: 189px;
    }
    .about-area h2{
        font-size: 3.24rem;
    }
    .about-area .about-slide-desc-block-03 p, .about-area .about-slide-desc-block-04 p, .about-area .about-slide-desc-block-05 p {
        font-size: 1.2636rem;
    }
    .about-area .about-slide-desc-block-03 .desc-block-03-left {
        padding: 5.6% 2%;
    }
    .about-area .about-slide-desc-block-04 .desc-block-04-right {
        padding: 7.2% 2%;
    }
    .about-area .about-slide-desc-block-05 .desc-block-05-left {
        padding: 8.9% 2%;
    }
    .about-area .about-slide-desc-block-06 .why_us .item-title {
        font-size: 1.8rem;
    }

    /*** BEGIN MEMBER MY VIDEOS CSS SETTING ***/
    .account-info-area ul.ul-my-video .div-video-block {
        width: 30%;
        margin: 0 0 3.406% 2.85%;
    }
        .account-info-area ul.ul-my-video .div-video-block li.li-video-title {
            margin: 1rem 0 0.75rem 1rem;
        }

}

@media (max-width: 800px) {

    /*** BEGIN MAIN STRUCTURE CSS SETTING ***/
    .main-nav {
        width: 94%;
        padding: 0 3%;
    }
    #facebox {
    	z-index: 9999 !important;
    }

    /*** BEGIN TEMPLATE MAIN COMPONENT -- HEADER CSS SETTING ***/
    #cookie-collect-inform {
        padding: 1% 0 1% 3%;
    }
    #nav-language li.li-fb {
        width: 3%;
    }
    #logo-nsysu .nsysu-chinese{
        font-size: 1.23rem;
    }
    #logo-nsysu .nsysu-english{
        font-size: 0.683rem;
    }
    #logo-text {
        margin: 1% 0 2.5%;
        font-size: 2rem;
    }
    #nav-buttons-cp {
        margin: 2.5% 0 0;
    }
        #nav-buttons-cp li {
            margin: 1% 2.0% 0;
            font-size: 0.95625rem;
        }
            #nav-buttons-cp li.li-login-btn {
                font-size: 1.063125rem;
                font-weight: 400;
                margin: 0 0 0 3.75%;
            }
    .member-setting-menu {
        top: 98px;
        right: 0;
    }
    
    /*** BEGIN TEMPLATE MAIN COMPONENT -- FOOTER CSS SETTING ***/
    #footer .footer-info li, #footer .footer-nav-links li.li-nav-main, #footer .footer-copyright-block {
        font-size: 0.875rem;
    }
    #footer .footer-nav-links {
        width: 100%;
        margin: 0 0 0 4%;
    }
        #footer .footer-nav-links li.li-nav-main {
            font-size: 1.15rem !important;
            margin-top: 2rem;
            letter-spacing: 0.25rem;
        }
        #footer .footer-nav-links li.li-nav-sub.sub-02 {
            width: 6%;
        }
        #footer .footer-nav-links li.li-nav-sub.sub-04 {
            width: 12%;
        }
        #footer .footer-nav-links li.li-nav-sub.sub-05 {
            width: 14%;
        }

    /*** BEGIN HOME CSS SETTING ***/
    .home-slide-banner {
        height: 289px;
        background-size: 135%;
    }
    .home-slide-banner-text {
        width: 68%;
        margin: 5.5rem 0 0 1.5rem;
    }
    .home-slide-banner-text h2 {
        font-size: 3.1554rem;
    }
    .home-slide-about-us {
        padding: 1.5rem 0 2.5rem;
    }
    .home-slide-about-us .desc-block-07-desc{
        font-size: 1.063125rem;
    }
    .home-slide-about-us ul {
        margin: 0 auto 0;
    }
    .home-slide-about-us li.li-q-text {
        font-size: 0.8343rem;
    }
    .home-slide-course-lists {
        padding: 2rem 0 2rem;
    }
        .home-slide-course-lists h2 {
            font-size: 2.75rem;
            margin-bottom: 3.6rem;
        }
        .home-slide-course-lists ul {
            height: 35rem;
            width: 48%;
        }
            .home-slide-course-lists ul:nth-of-type(2n-1):not(.course-lists-more){
                margin: 0 4% 3% 0;
            }
            .home-slide-course-lists ul:nth-of-type(2n){
                margin: 0 0 3% 0;
            }
            .home-slide-course-lists li.li-course-01 {
                font-size: 1.6875rem;
            }
            .home-slide-course-lists li.li-course-02 {
                font-size: 1.0625rem;
            }
            .home-slide-course-lists li.li-course-03 {
                font-size: 1.18125rem;
            }
            .home-slide-course-lists .course-lists-more{
                margin: 1rem 0 0 17.1rem;
            }
    .home-slide-join-class {
        padding: 2rem 0 0rem;
    }
    .home-slide-join-class .join-class .item-title {
        flex: 0 1 35%;
        /* font-size: 2.3125rem; */
        margin: 0 0 2%;
    }
    .home-slide-join-class .join-class .item-title img{
        margin: 4% 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 16%;
    }
    .home-slide-join-class .join-class .item-sub-title {
        flex: 0 1 35%;
        justify-content: left;
        font-size: 1.25rem;
        margin: 0 0 4%;
    }
    .home-slide-join-class .join-class .item-sub-title.sub-title-05 {
        display: none;
    }
    .home-slide-join-class .join-class .item-photo{
        display: flex;
        flex: 0 1 35%;
        justify-content: center;
    }
    .home-slide-join-class .join-class .item-photo.photo-01{
        margin: 0;
    }
    .home-slide-join-class .join-class .item-photo.photo-02{
        margin: 0;
    }
    .home-slide-join-class .join-class .item-photo.photo-03{
        margin: 2% 0 0;
    }
    .home-slide-join-class .join-class .item-photo.photo-04{
        margin: 0;
    }
    .home-slide-join-class .join-class .item-photo.photo-05{
        margin: 4% 16% 0;
    }
    .home-slide-join-class .join-class .item-arrow{
        display: none;
    }
    .home-slide-join-class .join-class .item-content {
        flex: 0 1 35%;
        font-size: 0.875rem;
        margin: 4% 2% 5%;
    }
    .home-slide-join-class .join-class .rwd-order-01{
        order: 1;
    }
    .home-slide-join-class .join-class .rwd-order-02{
        order: 2;
    }
    .home-slide-join-class .join-class .rwd-order-03{
        order: 3;
    }
    .home-slide-join-class .join-class .rwd-order-04{
        order: 4;
    }
    .home-slide-join-class .join-class .rwd-order-05{
        order: 5;
    }
    .home-slide-join-class .join-class .rwd-order-06{
        order: 6;
    }
    .home-slide-join-class .join-class .rwd-order-07{
        order: 7;
    }
    .home-slide-join-class .join-class .rwd-order-08{
        order: 8;
    }
    .home-slide-join-class .join-class .rwd-order-09{
        order: 9;
    }
    .home-slide-join-class .join-class .rwd-order-10{
        order: 10;
    }
    .home-slide-join-class .join-class .rwd-order-11{
        order: 11;
    }
        /* .home-slide-join-class ul {
            height: 27rem;
            width: 29.5%;
        }
        .home-slide-join-class li {
            width: 100%;
            padding: 0;
        }
        .home-slide-join-class li.li-join-01 {
            margin: 0;
            height: 44px;
        }
        .home-slide-join-class li.li-join-02 {
            margin: 3.3rem 0 0 4.3rem;
        }
        .home-slide-join-class ul.ul-join-02 li.li-join-02{
            margin: 3.3rem 0 0 5.3rem;
        }
        .home-slide-join-class ul.ul-join-03{
            width: 29.5%;
        }
        .home-slide-join-class ul.ul-join-03 li.li-join-02{
            margin: 4rem 0 0 4.8rem;
        }
        .home-slide-join-class ul.ul-join-04 li.li-join-02{
            margin: 3.3rem 0 0 5.0rem;
        }
        .home-slide-join-class ul.ul-join-05 li.li-join-01 {
            font-size: 1.92375rem;
            margin: 0 auto 1.15rem;
            height: 76px;
        }
        .home-slide-join-class ul.ul-join-05 li.li-join-02 {
            margin: 4rem 0 0 4rem;
            height: 8.4rem;
        } */
    .home-slide-faq {
        height: 92px;
    }
        .home-slide-faq .ul-faq-01 li.li-faq{
            margin: 0 0 0 2rem;
        }
        .home-slide-faq ul.ul-faq-02 {
            width: 28.8%;
            margin: 0 7.9% 0 0;
        }
        .home-slide-faq .ul-faq-04 li.li-faq-01{
            font-size: 2.187rem;
        }
        .home-slide-faq .ul-faq-04 li.li-faq-02{
            font-size: 2.187rem;
            margin: 0 0.75rem 0 0;
        }
        .home-slide-faq .ul-faq-05 li.li-faq-01{
            font-size: 2.187rem;
        }

    /*** BEGIN FEATURES CSS SETTING ***/
    .features-area .feature-slide-desc-block-01 p {
        font-size: 1.15em;
    }
    .features-area .feature-slide-desc-block-02 .desc-block-02-left {
        margin: 7.933% 0 0;
    }
    .features-area .feature-slide-desc-block-02 .desc-block-02-right h2 {
        font-size: 1.5em;
    }
    .features-area .feature-slide-desc-block-02 .desc-block-02-right p {
        font-size: 1.15em;
    }
    .features-area .feature-slide-desc-block-03 .desc-block-03-left {
        margin: 6% 0 0;
    }
        .features-area .feature-slide-desc-block-03 .desc-block-03-left h2 {
            font-size: 1.5em;
        }
        .features-area .feature-slide-desc-block-03 .desc-block-03-left p {
            font-size: 1.15em;
        }
    .features-area .feature-slide-desc-block-07 h2 {
        font-size: 1.5em;
    }
    .features-area .feature-slide-desc-block-07 p {
        font-size: 1.15em;
    }
    .features-area .feature-slide-desc-block-06 .desc-block-06-right h2 {
        font-size: 1.5em;
    }
    .features-area .feature-slide-desc-block-06 .desc-block-06-right p {
        font-size: 1.15em;
    }

    /*** BEGIN HOW TO JOIN CSS SETTING ***/
    .how-to-join-area .htj-slide-desc-block-01 .desc-block-01-right {
        margin: 0;
    }
        .how-to-join-area .htj-slide-desc-block-01 .desc-block-01-right h2 {
            font-size: 1.5em;
        }
        .how-to-join-area .htj-slide-desc-block-01 .desc-block-01-right p {
            font-size: 1.15em;
        }
    .how-to-join-area .htj-slide-desc-block-02 .desc-block-02-left {
        margin-top: 3%;
    }
        .how-to-join-area .htj-slide-desc-block-02 .desc-block-02-left h2 {
            font-size: 1.5em;
        }
        .how-to-join-area .htj-slide-desc-block-02 .desc-block-02-left p {
            font-size: 1.15em;
        }
    .how-to-join-area .htj-slide-desc-block-03 .desc-block-03-right {
        margin-top: 3%;
    }
        .how-to-join-area .htj-slide-desc-block-03 .desc-block-03-right h2 {
            font-size: 1.5em;
        }
        .how-to-join-area .htj-slide-desc-block-03 .desc-block-03-right p {
            font-size: 1.15em;
        }
    .how-to-join-area .htj-slide-desc-block-04 .desc-block-04-left h2 {
        font-size: 1.5em;
    }
    .how-to-join-area .htj-slide-desc-block-04 .desc-block-04-left p {
        font-size: 1.15em;
    }
    .how-to-join-area .htj-slide-desc-block-04 .desc-block-04-right {
        width: 48.5%;
    }

    /*** BEGIN HANYU APP INTRO CSS SETTING ***/
    .slide-01 {
    	height: 737px;
        background-size: 160%;
    }
    .slide-01-right {
        float: none;
        display: block;
        width: 45%;
        margin: 50% auto 0;
    }
        .slide-01-right .main-slogan {
            text-align: center;
        }
        .slide-01-right .btn-get-started {
            display: block;
            margin: 11.853% auto 0;
        }
    .slide-02 {
        background: url(../image/bg_home_section_02.jpg) 60% 0 no-repeat;
        background-size: 150%;
    }
        .slide-02-left {
            width: 44.5%;
            margin: 11.618% 0 0 7.2%;
        }
    /*.slide-03 {
        height: 226px;
    }
        .slide-03-center .btn-see-how-it-works {
            width: 32%;
            letter-spacing: 0.05em;
            margin: 3.3% auto 0;
        }*/
    .slide-03-svg-01 {
        height: 391px;
    }
    .slide-03-svg-02 {
        height: 437px;
    }
    .slide-04 {
        height: 675px;
    }
    	.slide-04-deco-line {
    		height: 500px;
    	}
    .slide-05 {
        height: 401px;
    }
        .slide-05-left {
            margin: 8.383% 0 0 11.5%;
        }
        .slide-05-right {
        	margin: 20.81% 10% 0 0;
        }
    .slide-07 {
        height: 407px;
    }
        .slide-07-right {
            margin: 13.3% 8.236% 0 0;
        }
    .slide-08 {
        height: 699px;
    }
    	.slide-08-table li.li-tb-title-text {
    		width: 15%;
    	}
	    	.title-text-format-actel {
	        	width: 25% !important;
	        	padding: 0 1.5% !important;
	        }
    	.slide-08-table li.li-tb-content-text {
    		width: 15%;
    	}
	    	.text-format-actel {
	    		width: 25% !important;
	    	}
    .slide-09 {
        height: 331px;
        background-size: 150%;
    }
    	.slide-09-inline-block {
    		width: 33%;
    		margin: 4.633% 8% 0;
    	}
    .slide-10 {
    	height: 365px;
    }
    	.slide-10-right {
    		margin-top: 7%;
    	}
		    .slide-10-right .btn-get-started {
		        width: 42%;
		    }

    /*** BEGIN COURSES CSS SETTING ***/
    .courses-area {
        width: 93%;
    }
        .courses-area ul {
            width: 42%;
            margin: 0 2% 4.055%;
        }

    /*** BEGIN COURSES_01 CSS SETTING ***/
    .courses-01-area {
        padding: 4.75rem 0;
    }
    .courses-01-area h2{
        font-size: 4.25rem;
    }
    .courses-01-area ul {
        width: 45.5%;
        height: 39rem;
        margin: 0 2% 4.055%;
    }
    .courses-01-area img {
        margin-bottom: 1.8rem;
    }
    .courses-01-area li.li-course-name-eng {
        margin: 0 auto 1.25rem;
    }
    .courses-01-area li.li-more-btn {
        margin: 1.25rem auto 0;
    }

    /*** BEGIN COURSE INTRO CSS SETTING ***/
    .course-intro-area .content-position-01.cia-01{
        margin: 4% auto;
    }
    .course-intro-banner{
        height: 151px;
        background: url(../image/bg_course_intro_banner.png) 36% 0 no-repeat;
        background-size: 145%;
    }
    .course-switch li{
        font-size: 1.72125rem;
    }
    .course-intro-area .cia-left-column h2{
        font-size: 1.549125rem;
    }
        .course-intro-area .cia-left-column .course-title {
            font-size: 1.25rem;
        }
    .course-intro-area .cia-left-column li{
        font-size: 0.9568125rem;
    }
    .course-intro-area .cia-left-column .desc-block-title li {
        padding: 0.5rem 0rem 0.5rem 1.6rem;
    }
    .course-intro-area .cia-left-column .desc-block-title li, .course-intro-area .cia-right-column h3, .course-intro-area .cia-right-column li{
        font-size: 1.063125rem;
    }
    .course-intro-area .cia-left-column .desc-block-title img.rotate {
        top: 0.9rem;
    }
    .course-intro-area .cia-left-column .desc-block-title img {
        padding: 0.9rem 1.25rem 0 0;
    }
    .course-intro-area .cia-course h3{
        font-size: 1.72125rem;
        margin-bottom: 3.5%;
    }
    .course-intro-area .cia-course .course-list .flex-info .item-course-title, .course-intro-area .cia-course .course-list .flex-info .item-course-content{
        font-size: 0.81rem;
    }
    /* .course-intro-area .cia-course li{
        font-size: 0.99144rem;
        padding: 1.98288rem 0;
    }
    .title-fs, .content-tl {
        font-size: 0.99144rem !important;
        padding: 1.264rem 0 !important;
    } */
    .cia-enroll-class h2{
        font-size: 1.72125rem;
    }
    .cia-enroll-class ul {
        height: 25rem;
    }
    .cia-enroll-class li.li-step {
        font-size: 1.873125rem;
    }
    .cia-enroll-class li.li-enroll-img {
        margin: 15% 11%;
    }
    .cia-enroll-class li.li-enroll-img img{
        width: 100%;
    }
    .cia-enroll-class li.li-enroll-desc {
        font-size: 0.860625rem;
    }
    .cia-enroll-class li.li-enroll-desc-02 {
        font-size: 0.759375rem;
    }
    .course-intro-area .cia-central-qa-column .div-title-block h3 {
        font-size: 1.72125rem;
    }
    .course-intro-area .cia-central-qa-column .div-left-qa-list-block .faq-user-photo-block {
        width: 135px;
        height: 135px;
    }
    .course-intro-area .cia-central-qa-column .div-left-qa-list-block .faq-type-block {
        font-size: 0.860625rem;
        margin: 5.8% 0 0 3%;
    }
    .course-intro-area .cia-central-qa-column .div-left-qa-list-block .faq-title-block {
        width: 59%;
        font-size: 1.063125rem;
        margin: 1.5% 0 0 3%;
    }
    .course-intro-area .cia-central-qa-column .div-left-qa-list-block .faq-user-info-block {
        font-size: 0.860625rem;
        margin: 1.5% 0 0 3%;
    }
    .course-intro-area .cia-central-qa-column .div-left-qa-list-block .icon-faq-arrow {
        width: 34.56px;
    }
    .course-intro-area .cia-central-qa-column .div-right-qa-ui-block {
        margin: 0 0 8.055% 0;
    }
    .course-intro-area .cia-central-qa-column .div-right-qa-ui-block h3 {
        width: 80%;
        font-size: 1.62rem;
    }
    .course-intro-area .cia-central-qa-column .div-right-qa-ui-block h2 {
        font-size: 6.075rem;
    }
    .course-intro-area .cia-central-qa-column .div-right-qa-ui-block .login-btn {
        font-size: 1.063125rem;
        padding: 0.7rem 0;
    }
    .world li {
        font-size: 2.187rem;
    }
    .world ul.ul-world-01 {
        width: 51%;
        margin: 0 0 0 2%;
    }

    /*** BEGIN COURSE INTRO 02 CSS SETTING ***/
    .main-visual-subscriptions .page-title {
        font-size: 1.65rem;
    }
    .course-intro-02-area .ci02-slide-desc-block-01 .desc-block-01-left {
        margin: 0;
    }
        .course-intro-02-area .ci02-slide-desc-block-01 .desc-block-01-left h2 {
            font-size: 1.35rem;
        }
        .course-intro-02-area .ci02-slide-desc-block-01 .desc-block-01-left p {
            font-size: 1rem;
        }
    .course-intro-02-area .ci02-slide-desc-block-02 h2 {
        font-size: 1.35rem;
    }
    .course-intro-02-area .ci02-slide-desc-block-02 li.li-desc-text {
        font-size: 0.875rem;
    }
    .course-intro-02-area .ci02-slide-desc-block-03 h2 {
        font-size: 1.35rem;
    }
    .course-intro-02-area .ci02-slide-desc-block-03 li.li-desc-text {
        font-size: 0.875rem;
    }
    .course-intro-02-area .ci02-slide-desc-block-04 h2 {
        font-size: 1.35rem;
    }
    .course-intro-02-area .ci02-slide-desc-block-04 li.li-q-title {
        font-size: 1rem;
    }
    .course-intro-02-area .ci02-slide-desc-block-04 li.li-q-text {
        font-size: 0.875rem;
    }
    .course-intro-02-area .ci02-slide-desc-block-05 .desc-block-05-left {
        margin: 0;
    }
        .course-intro-02-area .ci02-slide-desc-block-05 .desc-block-05-left h2 {
            font-size: 1.35rem;
        }
        .course-intro-02-area .ci02-slide-desc-block-05 .desc-block-05-left p {
            font-size: 1rem;
        }
    .course-intro-02-area .ci02-slide-desc-block-06 .desc-block-06-right h2 {
        font-size: 1.35rem;
        text-align: left;
    }
    .course-intro-02-area .ci02-slide-desc-block-06 .desc-block-06-right p {
        font-size: 1rem;
    }
    .course-intro-02-area .ci02-slide-desc-block-07 ul {
        margin: 0 1.95% 4.055% 0;
    }
        .course-intro-02-area .ci02-slide-desc-block-07 li.li-course-name {
            font-size: 1.35rem;
        }
            .course-intro-02-area .ci02-slide-desc-block-07 .course-name-eng {
                font-size: 1rem;
            }
        .course-intro-02-area .ci02-slide-desc-block-07 li.li-course-level {
            font-size: 1.15rem;
        }
        .course-intro-02-area .ci02-slide-desc-block-07 li.li-more-btn {
            font-size: 1.15rem;
        }

    /*** BEGIN SUBSCRIPTIONS CSS SETTING ***/
    .main-visual-subscriptions .page-title {
        margin-left: 3%;
    }
    .main-visual-subscriptions .deco-pic {
        margin-right: 5% !important;
    }
    .subscription-info-table .btn-sign-up {
    	font-size: 0.75em;
    	letter-spacing: 0;
    }

    /*** BEGIN PRIVACY POLICY CSS SETTING ***/
    .pp-info-table p.pp-info-desc {
    	width: 92%;
    }
    .pp-info-table .pp-info-sub-title {
    	width: 92%;
    }

    /*** BEGIN FAQ CSS SETTING ***/
    .faq-area {
        /*width: 92%;*/
    }
        .faq-area .faq-left-column {
            clear: both;
            float: none;
            display: block;
            width: 100%;
            margin: 0 auto;
        }
            .faq-area .faq-left-column li.li-faq-title {
                margin-bottom: 1.25rem;
                padding: 1.5% 3.862%;
                border-radius: 12px;
            }
        .faq-area .faq-right-column {
            display: none;
        }

    /*** BEGIN BLOG CSS SETTING ***/
    .blog-area {
        width: 92%;
    }
        .blog-area .blog-left-column {
            clear: both;
            display: block;
            width: 100%;
            margin: 0 auto;
        }
            .blog-area .blog-left-column .blog-list iframe {
                width: 219px;
                height: 140px;
            }
        .blog-area .blog-right-column {
            /*display: none;*/
            clear: both;
            display: block;
            width: 100%;
            margin: 2rem auto 0;
        }
            .blog-area .blog-right-column h3 {
                margin: 0 0 1rem;
                padding: 0 0 0 1rem;
            }
            .blog-area .blog-right-column ul {
                margin: 0 auto 2rem;
            }
            .blog-area .blog-right-column li.li-blog-latest-updated {
                font-size: 1.125rem;
                font-weight: 300;
                margin: 0 0 0.75rem 2.299%;
                padding: 0 0 0 1.15rem;
            }
            .blog-area .blog-right-column ul.ul-courses-recommended {
                padding: 0.75rem 0 0;
            }
                .blog-area .blog-right-column li.li-courses-recommended{
                    font-size: 1.125rem;
                    font-weight: 300;
                    line-height: 180%;
                    margin: 0 0 0.75rem 1rem;
                }
                    .blog-area .blog-right-column li.li-courses-recommended img {
                        width: 3%;
                        margin-right: 0.35rem;
                    }

    /*** BEGIN BLOG CONTENT CSS SETTING ***/
    .blog-content-area {
        width: 92%;
    }
        .blog-content-area .blog-content-left-column {
            clear: both;
            display: block;
            width: 100%;
            margin: 0 auto;
        }
            .blog-content-area .blog-content-left-column .blog-content-image iframe {
                height: 380px;
            }
            .blog-content-area .blog-content-left-column .blog-content-desc {
                font-size: 1.125rem;
            }
        .blog-content-area .blog-content-right-column {
            /*display: none;*/
            clear: both;
            display: block;
            width: 100%;
            margin: 3.5rem auto 0;
        }
            .blog-content-area .blog-content-right-column h3 {
                margin: 0 0 1rem;
                padding: 0 0 0 1rem;
            }
            .blog-content-area .blog-content-right-column ul {
                margin: 0 auto 2rem;
            }
                .blog-content-area .blog-content-right-column li.li-blog-content-latest-updated {
                    font-size: 1.125rem;
                    font-weight: 300;
                    margin: 0 0 0.75rem 2.299%;
                    padding: 0 0 0 1.75rem;
                }
                .blog-content-area .blog-content-right-column ul.ul-courses-recommended {
                    padding: 0.75rem 0 0;
                }
                    .blog-content-area .blog-content-right-column li.li-courses-recommended{
                        font-size: 1.125rem;
                        font-weight: 300;
                        margin: 0 0 0.75rem 1rem;
                    }
                        .blog-content-area .blog-content-right-column li.li-courses-recommended img {
                            width: 3%;
                            margin-right: 0.35rem;
                        }

    /*** BEGIN MEMBER MY QA LIST CSS SETTING ***/
    .account-info-area ul.ul-my-courses-qa .div-qa-list-block .faq-type-block {
        width: 80%;
    }
    .account-info-area ul.ul-my-courses-qa .div-qa-list-block li.li-faq-desc .qa-upload-img {
        width: 92%;
    }

    /*** BEGIN NEWS CSS SETTING ***/
    .main-visual-subscriptions-news {
        height: 180px;
        background: url(../image/bg_news_banner.png) 40% 0 no-repeat;
        background-size: 121%;
    }
    .main-visual-subscriptions-news .page-title{
        font-size: 4.100625rem;
    }
    .news-area .news-left-column {
        width: 100%;
    }
    .news-area .news-right-column {
        width: 100%;
    }
    .news-area .news-right-column h3 {
        width: 100%;
        text-align: left;
    }
    .news-area .news-right-column ul {
        margin: 0 auto 5%;
    }

    /*** BEGIN NEWS CONTENT CSS SETTING ***/
    .news-content-area .news-content-left-column {
        width: 100%;
        margin-bottom: 8%;
    }
        .news-content-area .news-content-left-column h3 {
            width: 100%;
            font-size: 2.025rem;
        }
        .news-content-area .news-content-left-column .news-content-desc {
            margin: 0 0 5%;
        }
    .news-content-area .news-content-right-column {
        width: 100%;
        margin: 0;
    }
        .news-content-area .news-content-right-column h3 {
            text-align: left;
        }
        .news-content-area .news-content-right-column ul, .news-content-area .news-content-right-column ul{
            margin: 0 auto 5%;
        }
        .news-content-area .news-content-right-column li.li-news-content-latest-updated, .news-content-area .news-content-right-column li.li-categories {
            margin: 0 0 4.552% 0;
            padding: 0 0 0 3%;
        }

    /*** BEGIN ABOUT CSS SETTING ***/
    .main-visual-subscriptions-about {
        height: 161px;
        background: url(../image/bg_news_banner.png) 40% 0 no-repeat;
        background-size: 121%;
    }
    .main-visual-subscriptions-about .page-title {
        font-size: 3.69rem;
    }
    .about-area h2{
        font-size: 2.75rem;
    }
    .about-area .about-slide-desc-block-01 .desc-block-01-desc{
        font-size: 1.063125rem;
    }
    .about-area .about-slide-desc-block-03 p, .about-area .about-slide-desc-block-04 p, .about-area .about-slide-desc-block-05 p {
        font-size: 1.13724rem;
    }
    .about-area .about-slide-desc-block-03 .desc-block-03-left {
        padding: 4.9% 2%;
    }
    .about-area .about-slide-desc-block-04 .desc-block-04-right {
        padding: 4.9% 2%;
    }
    .about-area .about-slide-desc-block-05 .desc-block-05-left {
        padding: 6.7% 2%;
    }
    .about-area .about-slide-desc-block-06 .why_us .item-title {
        font-size: 1.62rem;
    }
    .about-area .about-slide-desc-block-06 .why_us .item-content {
        font-size: 0.9rem;
    }

    /*** BEGIN MEMBER MY VIDEOS CSS SETTING ***/
    .account-info-area ul.ul-my-video .div-video-block {
        width: 47%;
        margin: 0 0 4.6% 2.75%;
    }

    /*** BEGIN MEMBER MY VIDEOS POP-UP UI CSS SETTING ***/
    .account-info-area ul.ul-my-video iframe {
        width: 100% !important;
        height: 323px !important;
    }

}

@media (max-width: 720px) {

	/*** BEGIN MAIN STRUCTURE CSS SETTING ***/
    .main-nav {
    	padding: 0;
    }
    
    /*** BEGIN TEMPLATE MAIN COMPONENT -- HEADER CSS SETTING ***/
    .mobile-menu-btn {
        display: block;
        width: 3.5%;
        margin: 1.5% 3.5% 0 0;
    }
    #nav-buttons-cp {
        display: none;
    }
    #logo-nsysu {
        width: 92%;
        margin: 1% 0 0.5% 5%;
    }
    #logo-text {
        width: 92%;
        margin: 0.5% 0 0.5% 7%;
        font-size: 2.15rem;
    }

    /*** BEGIN TEMPLATE MAIN COMPONENT -- FOOTER CSS SETTING ***/
    #footer .footer-info li, #footer .footer-nav-links li.li-nav-main, #footer .footer-copyright-block {
        font-size: 0.7745625rem;
    }
    #footer .footer-nav-links li.li-nav-sub {
        font-size: 1.64025rem;
    }

    /*** BEGIN HOME CSS SETTING ***/
    .home-slide-banner {
        height: 269px;
        background-size: 140%;
    }
    .home-slide-banner-text {
        width: 69%;
    }
    .home-slide-banner-text h2 {
        font-size: 2.83986rem;
    }
    .home-slide-about-us {
        padding: 1rem 0 2rem;
    }
        .home-slide-about-us h2 {
            font-size: 2.5rem;
        }
        .home-slide-about-us .desc-block-07-desc{
            font-size: 0.9568125rem;
        }
        .home-slide-about-us li.li-q-text {
            font-size: 0.75087rem;
        }
    .home-slide-course-lists {
        padding: 1rem 0 2rem;
    }
        .home-slide-course-lists h2 {
            font-size: 2.5rem;
        }
        .home-slide-course-lists ul {
            height: 28rem;
        }
        .home-slide-course-lists li.li-course-01 {
            font-size: 1.51875rem;
        }
        .home-slide-course-lists .course-lists-more{
            margin: 1rem 0 0 15.5rem;
            font-size: 1.366875rem;
        }
    .home-slide-join-class {
        padding: 1rem 0 0rem;
    }
        .home-slide-join-class h2 {
            font-size: 2.5rem;
        }
        .home-slide-join-class .join-class .item-title {
            flex: 0 1 40%;
        }
        .home-slide-join-class .join-class .item-sub-title {
            flex: 0 1 40%;
        }
        .home-slide-join-class .join-class .item-content {
            flex: 0 1 40%;
        }

        /* .home-slide-join-class ul {
            height: 23rem;
            width: 46%;
        }
        .home-slide-join-class li {
            width: 100%;
            padding: 0;
        }
        .home-slide-join-class li.li-join-01 {
            height: auto;
        }
        .home-slide-join-class li.li-join-02 {
            margin: 0;
        }
        .home-slide-join-class ul.join-arrow li {
            margin: 10rem 0 0;
        }
        .home-slide-join-class ul.ul-join-01 li.li-join-02 {
            margin: 3rem 0 0 7rem;
            height: 6.0rem;
        }
        .home-slide-join-class ul.ul-join-02 li.li-join-02 {
            margin: 3rem 0 0 7rem;
            height: 6.0rem;
        }
        .home-slide-join-class ul.ul-join-03 {
            width: 46%;
        }
        .home-slide-join-class ul.ul-join-03 li.li-join-02 {
            margin: 4rem 0 0 7rem;
            height: 6.0rem;
        }
        .home-slide-join-class ul.ul-join-04 li.li-join-02 {
            margin: 3rem 0 0 7rem;
            height: 6.0rem;
        }
        .home-slide-join-class ul.ul-join-05 {
            height: 20rem;
        }
        .home-slide-join-class ul.ul-join-05 li.li-join-01 {
            font-size: 2.375rem;
            height: auto;
        }
        .home-slide-join-class ul.ul-join-05 li.li-join-02 {
            margin: 3rem 0 0 6rem;
            height: 8rem;
        } */
    .home-slide-news {
        padding: 1rem 0 1rem;
    }
        .home-slide-news h2 {
            font-size: 2.5rem;
        }
        .home-slide-news ul {
            width: 48%;
        }
        .home-slide-news ul:nth-of-type(2n-1){
            margin: 0 3% 3% 0;
        }
        .home-slide-news ul:nth-of-type(2n){
            margin: 0 0 3% 0;
        }
        .home-slide-news ul.news-lists-more {
            margin: 2rem auto 1.25rem;
        }
        .home-slide-news li.li-news-01 {
            font-size: 1.0625rem;
        }
        .home-slide-news li.li-news-02 {
            font-size: 0.9375rem;
        }
    .home-slide-faq {
        height: 70px;
    }
        .home-slide-faq img {
            width: 100%;
        }
        .home-slide-faq ul.ul-faq-01 {
            margin: 0 8.9% 0 0;
        }
        .home-slide-faq ul.ul-faq-02 {
            margin: 0 4.9% 0 0;
        }
        .home-slide-faq .ul-faq-04 li.li-faq-01{
            font-size: 1.9683rem;
        }
        .home-slide-faq .ul-faq-04 li.li-faq-02{
            font-size: 1.9683rem;
        }
        .home-slide-faq .ul-faq-05 li.li-faq-01{
            font-size: 1.9683rem;
        }

    /*** BEGIN FEATURES CSS SETTING ***/
    .features-area .feature-slide-desc-block-02 {
    	width: 92%;
    }
    .features-area .feature-slide-desc-block-03 {
    	width: 92%;
    }
	    .features-area .feature-slide-desc-block-03 .desc-block-03-left {
	    	margin: 3% 0 0;
	    }
    .features-area .feature-slide-desc-block-05 li.li-desc-title {
    	font-size: 1.35rem;
    }
    .features-area .feature-slide-desc-block-05 li.li-desc-text {
    	font-size: 1rem;
    }
    .features-area .feature-slide-desc-block-06 {
    	width: 92%;
    }
    	.features-area .feature-slide-desc-block-06 .desc-block-06-left {
    		margin: 12% 0 0;
    	}

    /*** BEGIN HANYU APP INTRO CSS SETTING ***/
    .slide-01 {
        height: 664px;
    }
    .slide-03-svg-01 {
        height: 352px;
        background-image: none;
    }
        .slide-03-svg-01-right {
            width: 43%;
        }
            .slide-03-svg-01-right .main-slogan {
                color: #FFF;
                border-left: #f8b500 8px solid;
            }
            .slide-03-svg-01-right .sub-desc {
                color: #FFF;
            }
    .slide-03-svg-02 {
        height: 393px;
    }
        .slide-03-svg-02-left {
            width: 43%;
        }
    .slide-05 {
        height: 361px;
    }
        .slide-05-left {
            margin: 8.383% 0 0 8.5%;
        }
    .slide-06-left {
        width: 42%;
        margin: 8.383% 0 0 9%;
    }
    .slide-06-right {
        width: 36%;
        margin: 12% 8% 0 0;
    }
    .slide-07 {
        height: 361px;
    }
    .slide-08 {
        height: 639px;
    }

    /*** BEGIN COURSES CSS SETTING ***/
    .courses-area ul {
    	width: 45%;
    	margin: 0 2.35% 4.055%;
    }
	    .courses-area li.li-course-name {
	    	font-size: 1.5rem;
	    }
	    .courses-area li.li-course-level {
	    	font-size: 1.35rem;
	    }
	    .courses-area li.li-more-btn {
	    	font-size: 1.15rem;
	    }

    /*** BEGIN COURSES_01 CSS SETTING ***/
    .courses-01-area {
        padding: 4.51rem 0;
    }
    .courses-01-area h2{
        font-size: 4.03rem;
    }
    .courses-01-area ul {
        height: 37.63rem;
    }
    .courses-01-area img {
        margin-bottom: 1.71rem;
    }
    .courses-01-area li.li-course-name-eng {
        margin: 0 auto 1.35rem;
    }
    .courses-01-area li.li-more-btn {
        margin: 1.25rem auto 0;
    }

    /*** BEGIN COURSE INTRO CSS SETTING ***/
    .course-intro-banner{
        height: 141px;
        background: url(../image/bg_course_intro_banner.png) 34% 0 no-repeat;
        background-size: 150%;
    }
    .course-switch li{
        width: 32.97%;
        font-size: 1.549125rem;
        padding: 1.5% 0;
    }
    .course-intro-area .cia-left-column h2{
        font-size: 1.3942125rem;
    }
    .course-intro-area .cia-course h3{
        font-size: 1.549125rem;
    }
    .course-intro-area .cia-course .course-list .flex-info .item-course-title, .course-intro-area .cia-course .course-list .flex-info .item-course-content{
        font-size: 0.729rem;
    }
    /* .course-intro-area .cia-course li{
        font-size: 0.892296rem;
        padding: 1.784592rem 0;
    }
    .title-fs, .content-tl {
        font-size: 0.892296rem !important;
        padding: 1.128rem 0 !important;
    } */
    .cia-enroll-class h2{
        font-size: 1.549125rem;
    }
    .course-intro-area .cia-central-qa-column .div-title-block h3 {
        font-size: 1.549125rem;
    }
    .course-intro-area .cia-central-qa-column .div-left-qa-list-block .faq-user-photo-block {
        width: 120px;
        height: 120px;
    }
    .course-intro-area .cia-central-qa-column .div-left-qa-list-block .faq-type-block {
        font-size: 0.7745625rem;
    }
    .course-intro-area .cia-central-qa-column .div-left-qa-list-block .faq-title-block {
        width: 60%;
        font-size: 0.9568125rem;
    }
    .course-intro-area .cia-central-qa-column .div-left-qa-list-block .faq-user-info-block {
        font-size: 0.7745625rem;
    }
    .course-intro-area .cia-central-qa-column .div-left-qa-list-block .icon-faq-arrow {
        width: 31.104px;
    }
    .course-intro-area .cia-central-qa-column .div-right-qa-ui-block h3 {
        width: 80%;
        font-size: 1.458rem;
    }
    .course-intro-area .cia-central-qa-column .div-right-qa-ui-block h2 {
        font-size: 5.4675rem;
    }
    .course-intro-area .cia-central-qa-column .div-right-qa-ui-block .login-btn {
        font-size: 0.9568125rem;
        padding: 0.7rem 0;
    }
    .world li {
        font-size: 1.9683rem;
    }
    .world ul.ul-world-01 {
        width: 51%;
        margin: 0 0 0 2%;
    }

    /*** BEGIN COURSE INTRO 02 CSS SETTING ***/
    .course-intro-02-area .ci02-slide-desc-block-03 li.li-desc-title {
        overflow: visible;
        font-size: 1.15rem;
    }
    .course-intro-02-area .ci02-slide-desc-block-03 .num-circle-icon {
        width: 1.75rem;
        height: 1.45rem;
        padding: 0.25rem 0 0;
    }
    .course-intro-02-area .ci02-slide-desc-block-07 ul {
        width: 31%;
    }

    /*** BEGIN SUBSCRIPTIONS CSS SETTING ***/
    #logo {
    	width: 12%;
    }
    .subscription-info-table .btn-sign-up {
    	width: 98%;
    }

    /*** BEGIN BLOG CSS SETTING ***/
    .blog-area .blog-left-column .blog-list iframe {
        width: 196.45px;
    }
    .blog-area .blog-right-column ul.ul-courses-recommended {
        padding: 0;
    }
    .blog-area .blog-right-column li.li-courses-recommended img {
        width: 3%;
    }

    /*** BEGIN BLOG CONTENT CSS SETTING ***/
    .blog-content-area .blog-content-left-column .blog-content-image iframe {
        height: 343px;
    }

    /*** BEGIN MEMBER MY QA LIST CSS SETTING ***/
    .account-info-area ul.ul-my-courses-qa .div-qa-list-block .faq-type-block {
        width: 76%;
    }
    .account-info-area ul.ul-my-courses-qa .div-qa-list-block .faq-title-block {
        float: right;
    }
    .account-info-area ul.ul-my-courses-qa .div-qa-list-block .faq-user-info-block {
        float: right;
    }
    .account-info-area ul.ul-my-courses-qa .div-qa-list-block li.li-faq-desc .qa-upload-img {
        width: 88%;
    }

    /*** BEGIN MEMBER MY QA INSERT CSS SETTING ***/
    .account-info-area ul.ul-my-courses-qa-insert div.div-qa-select-area .div-qa-select-block {
        width: 100%;
    }

    /*** BEGIN NEWS CSS SETTING ***/
    .main-visual-subscriptions-news {
        height: 146px;
        background: url(../image/bg_news_banner.png) 41% 0 no-repeat;
        background-size: 122%;
    }
    .main-visual-subscriptions-news .page-title{
        font-size: 3.6905625rem;
    }

    /*** BEGIN ABOUT CSS SETTING ***/
    .main-visual-subscriptions-about {
        height: 146px;
        background: url(../image/bg_news_banner.png) 41% 0 no-repeat;
        background-size: 122%;
    }
    .main-visual-subscriptions-about .page-title {
        font-size: 3.321rem;
        margin: 5% 0 0 3%;
    }
    .about-area h2{
        font-size: 2.493rem;
    }
    .about-area .about-slide-desc-block-01 .desc-block-01-desc{
        font-size: 0.9568125rem;
    }
    .about-area .about-slide-desc-block-03 p, .about-area .about-slide-desc-block-04 p, .about-area .about-slide-desc-block-05 p {
        font-size: 1.023516rem;
    }
    .about-area .about-slide-desc-block-06 ul {
        height: 26rem;
    }
    .about-area .about-slide-desc-block-06 li.li-join-01 {
        font-size: 1.3286025rem;
    }
    .about-area .about-slide-desc-block-06 li.li-join-03 {
        font-size: 0.9568125rem;
    }
    .about-area .about-slide-desc-block-06 ul.ul-join-01 li.li-join-02{
        margin: 17% 0 7% 32%;
    }
    .about-area .about-slide-desc-block-06 ul.ul-join-02 li.li-join-02{
        margin: 12% 0 12% 37%;
    }
    .about-area .about-slide-desc-block-06 ul.ul-join-03 li.li-join-02, .about-area .about-slide-desc-block-06 ul.ul-join-04 li.li-join-02{
        margin: 12% 0 12% 31%;
    }
    .about-area .about-slide-desc-block-06 ul.ul-join-04, .about-area .about-slide-desc-block-06 ul.ul-join-05 {
        height: 24rem;
    }
    .about-area .about-slide-desc-block-06 ul.ul-join-05 li.li-join-02{
        margin: 7% 0 5% 40%;
    }

    /*** BEGIN MEMBER MY VIDEOS POP-UP UI CSS SETTING ***/
    .account-info-area ul.ul-my-video iframe {
        height: 291px !important;
    }

}

@media (max-width: 640px) {

    /*** BEGIN TEMPLATE MAIN COMPONENT -- HEADER CSS SETTING ***/
    #cookie-collect-inform {
        font-size: 0.875rem;
        font-weight: 400;
        padding: 1% 0 1% 3%;
    }
    	#cookie-collect-inform .cookie-accept-btn {
    		width: 12%;
        }
    #nav-language li{
        font-size: 0.84375rem;
    }

    /*** BEGIN TEMPLATE MAIN COMPONENT -- FOOTER CSS SETTING ***/
    #footer .footer-info-block {
        padding: 2.5rem 0;
    }
    #footer .footer-info li, #footer .footer-nav-links li.li-nav-main, #footer .footer-copyright-block {
        font-size: 0.875rem;
    }
    #footer .footer-nav-links li.li-nav-sub {
        font-size: 1.25rem;
    }

    /*** BEGIN HOME CSS SETTING ***/
    .home-slide-banner {
        height: 240px;
    }
    .home-slide-banner-text {
        margin: 5.0rem 0 0 1.5rem;
    }
    .home-slide-banner-text h2 {
        font-size: 2.3002866rem;
    }
    .home-slide-about-us .desc-block-07-desc{
        font-size: 0.9568125rem;
        margin: 0 0 4%;
    }
    .home-slide-about-us li.li-q-text {
        font-size: 0.75087rem;
    }
    .home-slide-course-lists {
        padding: 1rem 0 2rem;
    }
        .home-slide-course-lists h2 {
            font-size: 2rem;
            margin: 0.75rem auto 2rem;
        }
        .home-slide-course-lists ul {
            height: 29rem;
        }
        .home-slide-course-lists li.li-course-01 {
            height: 3.2rem;
            font-size: 1.15rem;
            margin: 0 auto 1rem;
        }
        .home-slide-course-lists li.li-course-02 {
            font-size: 0.938rem;
            margin: 0 auto 1rem;
        }
        .home-slide-course-lists li.li-course-03 {
            font-size: 1rem;
        }
        .home-slide-course-lists .course-lists-more{
            font-size: 1.15rem;
            margin: 1rem 0 0 13.8rem;
        }
    .home-slide-join-class .join-class .item-title {
        flex: 0 1 40%;
        font-size: 1.873125rem;
    }
    .home-slide-join-class .join-class .item-title.title-05 {
        font-size: 2.025rem;
    }
    .home-slide-join-class .join-class .item-sub-title {
        flex: 0 1 40%;
        font-size: 1.125rem;
    }
    .home-slide-join-class .join-class .item-content {
        flex: 0 1 40%;
    }
    /* .home-slide-join-class ul.ul-join-01 li.li-join-02{
        margin: 3rem 0 0 6rem;
    }
    .home-slide-join-class ul.ul-join-02 li.li-join-02{
        margin: 3rem 0 0 6rem;
    }
    .home-slide-join-class ul.ul-join-03 li.li-join-02{
        margin: 4rem 0 0 6rem;
    }
    .home-slide-join-class ul.ul-join-04 li.li-join-02{
        margin: 3rem 0 0 6rem;
    }
    .home-slide-join-class ul.ul-join-05 li.li-join-02 {
        margin: 3rem 0 0 5.5rem;
    } */
    .home-slide-news li.li-news-pic {
        height: 158px;
    }
    .home-slide-news li.li-news-01 {
        font-size: 0.938rem;
        margin: 0.75rem 0 1rem 0.6rem;
    }
    .home-slide-news li.li-news-02 {
        font-size: 0.875rem;
    }
    .home-slide-news ul.news-lists-more {
        font-size: 1.25rem;
    }
    .home-slide-faq {
        height: 50px;
    }
        .home-slide-faq .ul-faq-04 li.li-faq-01{
            font-size: 1.77147rem;
        }
        .home-slide-faq .ul-faq-04 li.li-faq-02{
            font-size: 1.77147rem;
            margin: 0 0.5rem 0 0;
        }
        .home-slide-faq ul.ul-faq-05 {
            width: 43%;
            margin: 3rem 0 0 1rem;
        }
        .home-slide-faq .ul-faq-05 li.li-faq-01{
            font-size: 1.77147rem;
        }

    /*** BEGIN HOW TO JOIN CSS SETTING ***/
    .how-to-join-area .htj-slide-desc-block-01 .desc-block-01-left {
        margin-top: 16%;
    }
    .how-to-join-area .htj-slide-desc-block-02 .desc-block-02-right {
        margin-top: 10%;
    }
    .how-to-join-area .htj-slide-desc-block-03 .desc-block-03-left {
        margin-top: 12%;
    }
    .how-to-join-area .htj-slide-desc-block-04 .desc-block-04-right {
        margin-top: 12%;
    }

    /*** BEGIN COURSES CSS SETTING ***/
    .courses-area ul {
    	width: 44.95%;
    }

    /*** BEGIN COURSES_01 CSS SETTING ***/
    .courses-01-area {
        padding: 4.2845rem 0;
    }
    .courses-01-area h2{
        font-size: 3.62rem;
    }
    .courses-01-area ul {
        height: 36.65rem;
    }
    .courses-01-area img {
        margin-bottom: 1.15rem;
    }
    .courses-01-area li.li-course-name {
        font-size: 1.56rem;
    }
    .courses-01-area li.li-course-name-eng {
        font-size: 1.045rem;
    }
    .courses-01-area li.li-course-level {
        font-size: 1.254rem;
    }
    .courses-01-area li.li-course-desc {
        height: 6rem;
        font-size: 1.045rem;
    }
    .courses-01-area li.li-more-btn {
        font-size: 1.045rem;
        margin: 0.75rem auto 0;
    }

    /*** BEGIN COURSE INTRO CSS SETTING ***/
    .course-intro-banner{
        height: 125px;
    }
    .course-switch .course-direct-enroll-btn {
        display: inline-block;
    }
    .course-switch li{
        width: 32.92%;
        font-size: 1.3942125rem;
    }
    .course-intro-area .cia-left-column {
        width: 100%;
    }
        .course-intro-area .cia-left-column h2{
            font-size: 1.3942125rem;
            margin: 0 0 4% 0;
        }
    .course-intro-area .cia-right-column {
        width: 100%;
        margin: 4% 0;
        padding: 0;
    }
        .course-intro-area .cia-right-column .course-direct-enroll-btn {
            display: none;
        }
        .course-intro-area .cia-right-column h3 {
            margin: 0 0 4%;
        }
        .course-intro-area .cia-right-column li.li-teacher-photo {
            width: 50%;
            margin: 0 2% 0 0;
        }
        .course-intro-area .cia-right-column li.li-teacher-name {
            width: 48%;
        }
        .course-intro-area .cia-right-column li.li-teacher-desc {
            width: 48%;
        }
    .course-intro-area .cia-course {
        padding: 3.5% 0 0;
    }
    .course-intro-area .cia-course h3{
        font-size: 1.3942125rem;
    }
    .course-intro-area .cia-course .course-list{
        margin: 0 0 5%;
    }
    .course-intro-area .cia-course .course-list .flex-info .item-course-title {
        flex: 0 1 33.33%;
        font-size: 1rem;
        padding: 3.5% 0;
        background-color: #f2f2f2;
    }
    .course-intro-area .cia-course .course-list .flex-info .item-course-content {
        flex: 0 1 33.33%;
        font-size: 1rem;
        padding: 2.5% 0;
        background-color: #fafafa;
    }
    .course-intro-area .cia-course .course-list .flex-info .flex-buy{
        flex: 0 1 100%;
        background-color: #f2f2f2;
    }
    .course-intro-area .cia-course .course-list .flex-info .flex-buy a{
        width: 92%;
        padding: 1% 0;
    }
    .course-intro-area .cia-course .course-list .flex-info .order-01{
        order: 1;
    }
    .course-intro-area .cia-course .course-list .flex-info .order-02{
        order: 2;
    }
    .course-intro-area .cia-course .course-list .flex-info .order-03{
        order: 3;
    }
    .course-intro-area .cia-course .course-list .flex-info .order-04{
        order: 4;
    }
    .course-intro-area .cia-course .course-list .flex-info .order-05{
        order: 5;
    }
    .course-intro-area .cia-course .course-list .flex-info .title-07{
        display: none;
    }
    .course-intro-area .cia-course .course-list.list-rwd .flex-info .rwd{
        display: block;
    }
    .course-intro-area .cia-course .course-list.list-rwd .flex-info .title-07.rwd{
        display: none;
    }
    .course-intro-area .cia-course .course-list .flex-info .item-course-title.title-03{
        border-radius: 0 8px 0 0;
    }
    .course-intro-area .cia-course .course-list .flex-info .flex-buy{
        border-radius: 0 0 8px 8px;
    }
    .course-intro-area .cia-course .course-list:last-child .flex-info .item-course-content.content-01{
        border-radius: 0;
    }
    /* .course-intro-area .cia-course .course-list {
        height: 15rem;
    }
    .course-intro-area .cia-course .course-list:nth-of-type(2n) li.li-course-content {
        background-color: #fafafa;
    }
    .course-intro-area .cia-course li{
        font-size: 0.99144rem;
        padding: 3% 0;
    }
    .title-fs {
        font-size: 0.99144rem !important;
        padding: 3% 0 !important;
    }
    .content-tl {
        font-size: 0.99144rem !important;
        padding: 0.165rem 0 !important;
    }
    .course-intro-area .cia-course .course-list ul.ul-block-info {
        width: 80%;
    }
    .course-intro-area .cia-course .course-list ul.ul-block-buy {
        width: 20%;
        padding: 14.86% 0 ;
        background-color: #fafafa;
        position: relative;
        top: -6.4rem;
        border-radius: 0 8px 8px 0;
    }
    .course-intro-area .cia-course .course-list ul.ul-block-buy a{
        padding: 15% 21.5%;
    }
    .course-intro-area .cia-course .course-list ul.ul-block-buy li.li-course-content{
        background-color: #fafafa;
    }
    .course-intro-area .cia-course .course-list:last-child ul.ul-block-info.info-01 li.content-01{
        border-radius: 0;
    }
    .course-intro-area .cia-course .course-list ul.ul-block-info.info-02 li.content-01{
        border-radius: 0 0 0 8px;
    }
    .course-intro-area .cia-course .course-list ul.ul-block-buy li.li-course-title{
        border-radius: 0;
    }
    .course-intro-area .cia-course .course-list:last-child ul.ul-block-buy li.li-course-content{
        border-radius: 0;
    } */

    .cia-enroll-class h2{
        font-size: 1.3942125rem;
    }
    .cia-enroll-class ul {
        height: 25rem;
    }
    .cia-enroll-class li.li-step {
        font-size: 1.6858125rem;
    }
    .cia-enroll-class li.li-enroll-img {
        margin: 15% 10%;
    }
    .course-intro-area .cia-central-qa-column .div-title-block h3 {
        font-size: 1.3942125rem;
    }
    .course-intro-area .cia-central-qa-column .div-left-qa-list-block .faq-user-photo-block {
        width: 100px;
        height: 100px;
    }
    .course-intro-area .cia-central-qa-column .div-left-qa-list-block .faq-type-block {
        margin: 1.8% 0 0 3%;
    }
    .course-intro-area .cia-central-qa-column .div-left-qa-list-block .icon-faq-arrow {
        width: 28px;
    }
    .course-intro-area .cia-central-qa-column .div-right-qa-ui-block h3 {
        width: 81%;
        font-size: 1.3122rem;
    }
    .course-intro-area .cia-central-qa-column .div-right-qa-ui-block h2 {
        font-size: 4.92075rem;
    }
    .course-intro-area .cia-central-qa-column .div-right-qa-ui-block .login-btn {
        font-size: 0.86113125rem;
        padding: 0.7rem 0;
    }
    .world li {
        font-size: 1.77147rem;
    }
    .world ul.ul-world-02 {
        width: 43%;
    }
    .world ul.ul-world-02 {
        margin: 0 0 0 2%;
    }
    .course-direct-enroll-btn {
        width: 98%;
        margin: 0 auto 8%;
        padding: 2% 0;
    }

    /*** BEGIN COURSE INTRO 02 CSS SETTING ***/
    .course-intro-02-area {
        margin-top: 3rem;
    }
        .course-intro-02-area .ci02-slide-desc-block-01 {
            margin-bottom: 3rem;
        }
            .course-intro-02-area .ci02-slide-desc-block-01 .desc-block-01-left h2 {
                font-size: 1.15rem;
            }
            .course-intro-02-area .ci02-slide-desc-block-01 .desc-block-01-left p {
                font-size: 0.875rem;
            }
        .course-intro-02-area .ci02-slide-desc-block-02 {
            margin: 0 auto 3rem;
            padding: 3rem 0;
        }
            .course-intro-02-area .ci02-slide-desc-block-02 h2 {
                font-size: 1.15rem;
                margin-bottom: 2rem;
            }
            .course-intro-02-area .ci02-slide-desc-block-02 li.li-deco-pic {
                float: none;
                display: block;
                width: 45%;
                margin: 0 auto 9.32%;
            }
            .course-intro-02-area .ci02-slide-desc-block-02 li.li-desc-text {
                float: none;
                display: block;
                width: 92%;
                font-size: 0.813rem;
                margin: 0 auto;
            }
        .course-intro-02-area .ci02-slide-desc-block-03 {
            margin-bottom: 3rem;
        }
            .course-intro-02-area .ci02-slide-desc-block-03 h2 {
                font-size: 1.15rem;
            }
            .course-intro-02-area .ci02-slide-desc-block-03 .remind-text {
                width: 75%;
            }
        .course-intro-02-area .ci02-slide-desc-block-04 {
            /*margin-bottom: 3rem;*/
            padding: 3rem 0 2.5rem;
        }
            .course-intro-02-area .ci02-slide-desc-block-04 h2 {
                font-size: 1.15rem;
            }
            .course-intro-02-area .ci02-slide-desc-block-04 li.li-q-title {
                font-size: 0.938rem;
            }
        .course-intro-02-area .ci02-slide-desc-block-05 .desc-block-05-left h2 {
            font-size: 1.15rem;
        }
        .course-intro-02-area .ci02-slide-desc-block-05 .desc-block-05-left p {
            font-size: 0.875rem;
        }
        .course-intro-02-area .ci02-slide-desc-block-06 {
            margin-bottom: 3rem;
        }
            .course-intro-02-area .ci02-slide-desc-block-06 .desc-block-06-right h2 {
                font-size: 1.15rem;
            }
            .course-intro-02-area .ci02-slide-desc-block-06 .desc-block-06-right p {
                font-size: 0.875rem;
            }
        .course-intro-02-area .ci02-slide-desc-block-07 {
            padding: 3rem 0;
        }
            .course-intro-02-area .ci02-slide-desc-block-07 h2 {
                font-size: 1.35rem;
                margin-bottom: 2rem;
            }
            .course-intro-02-area .ci02-slide-desc-block-07 ul {
                width: 45%;
                margin: 0 2.25% 4.055%;
            }
                .course-intro-02-area .ci02-slide-desc-block-07 li.li-course-name {
                    font-size: 1.15rem;
                    margin: 2rem auto 1.25rem;
                }
                    .course-intro-02-area .ci02-slide-desc-block-07 .course-name-eng {
                        line-height: 180%;
                    }
                .course-intro-02-area .ci02-slide-desc-block-07 li.li-course-level {
                    margin: 0 auto 1.25rem;
                }
                .course-intro-02-area .ci02-slide-desc-block-07 li.li-course-desc {
                    font-size: 0.875rem;
                }
                .course-intro-02-area .ci02-slide-desc-block-07 li.li-more-btn {
                    font-size: 1rem;
                }


    /*** BEGIN SUBSCRIPTIONS CSS SETTING ***/
    .subscription-info-table li.li-sit-large {
    	width: 36%;
    }
    .subscription-info-table li.li-sit-mid {
    	width: 16%;
    	margin: 0 1.5%;
    }
    .subscription-info-table .plans-title {
    	font-size: 1.15em;
    }

    /*** BEGIN PRIVACY POLICY CSS SETTING ***/
    .pp-info-table .pp-info-sub-title {
    	font-weight: 500;
    	margin: 4.5% auto 1.8%;
    }

    /*** BEGIN BLOG CSS SETTING ***/
    .blog-area .blog-left-column .blog-list {
        align-items: normal;
    }
        .blog-area .blog-left-column .blog-list iframe {
            width: 173px;
            height: 123px;
        }
        .blog-area .blog-left-column .blog-list .div-pic-replacement {
            height: 10.5rem;
        }
        .blog-area .blog-left-column li.li-post-time {
            display: block;
            width: 100%;
        }
            .blog-area .blog-left-column li.li-post-time img {
                width: 8%;
            }
        .blog-area .blog-left-column li.li-post-tag {
            display: block;
            width: 100%;
            text-align: left;
        }
            .blog-area .blog-left-column li.li-post-tag img {
                width: 6%;
                margin: 0.75rem 1% 0;
            }

    /*** BEGIN BLOG CONTENT CSS SETTING ***/
    .blog-content-area .blog-content-left-column .blog-content-image iframe {
        height: 305px;
    }

    /*** BEGIN MEMBER MY QA LIST CSS SETTING ***/
    .account-info-area ul.ul-my-courses-qa .div-qa-list-block .faq-title-block {
        width: 80%;
    }
    .account-info-area ul.ul-my-courses-qa .div-qa-list-block .faq-user-info-block {
        width: 80%;
    }

    /*** BEGIN FREE COURSE SURVEY CSS SETTING ***/
    .fc-survey-area {
        width: 100%;
    }

    /*** BEGIN NEWS CSS SETTING ***/
    .main-visual-subscriptions-news {
        height: 150px;
    }
    .main-visual-subscriptions-news .page-title{
        font-size: 3.32150625rem;
    }
    .news-area .news-left-column .news-list li.li-title{
        font-size: 1.168rem;
    }
    .news-area .news-left-column .news-list li.li-content{
        font-size: 0.861rem;
    }
    .news-area .news-left-column li.li-post-time {
        font-size: 0.759375rem;
    }
    .news-area .news-left-column li.li-post-tag {
        font-size: 0.759375rem;
    }
    .news-area .news-left-column li.li-post-tag img {
        margin: 0 0.25rem 0 0.25rem;
    }
    .news-area .news-right-column h3 {
        font-size: 1.5582375rem;
    }
    .news-area .news-right-column li.li-news-latest-updated, .news-area .news-right-column li.li-categories{
        font-size: 0.861rem;
    }

    /*** BEGIN NEWS CONTENT CSS SETTING ***/
    .news-content-area .news-content-left-column h3 {
        font-size: 1.8225rem;
    }
    .news-content-area .news-content-left-column li.li-post-time, .news-content-area .news-content-left-column li.li-post-tag{
        font-size: 0.860625rem;
    }
    .news-content-area .news-content-left-column li, .news-content-area .news-content-left-column li.content{
        font-size: 1.063125rem;
    }
    .news-content-area .news-content-left-column .content-06 ul.fee li {
        font-size: 0.860625rem;
    }
    .news-content-area .news-content-right-column h3 {
        font-size: 1.8225rem;
    }
    .news-content-area .news-content-right-column li.li-news-content-latest-updated, .news-content-area .news-content-right-column li.li-categories{
        font-size: 1.063125rem;
    }

    /*** BEGIN ABOUT CSS SETTING ***/
    .main-visual-subscriptions-about {
        height: 130px;
    }
    .main-visual-subscriptions-about .page-title {
        font-size: 2.9889rem;
        margin: 5.5% 0 0 3%;
    }
    .about-area h2{
        font-size: 2.2437rem;
    }
    .about-area .about-slide-desc-block-03 p, .about-area .about-slide-desc-block-04 p, .about-area .about-slide-desc-block-05 p {
        font-size: 0.9211644rem;
    }
    .about-area .about-slide-desc-block-03 .desc-block-03-left {
        padding: 4.7% 2%;
    }
    .about-area .about-slide-desc-block-04 .desc-block-04-right {
        padding: 4.7% 2%;
    }
    .about-area .about-slide-desc-block-05 .desc-block-05-left {
        padding: 6.6% 2%;
    }

    /*** BEGIN MEMBER MY VIDEOS POP-UP UI CSS SETTING ***/
    .account-info-area ul.ul-my-video iframe {
        height: 258px !important;
    }

}

@media (max-width: 480px) {

    /*** BEGIN MAIN STRUCTURE CSS SETTING ***/
    #facebox_overlay {
        z-index: 999;
        opacity: 0.85 !important;
    }
    #facebox {
        left: 10px !important;
    }

    /*** BEGIN TEMPLATE MAIN COMPONENT -- HEADER CSS SETTING ***/
    #logo-text {
        font-size: 1.998rem;
    }
    #nav-language li {
        margin: 1.7% 0.95rem 1% 0;
    }
        #nav-language li.li-fb {
            width: 4.5%;
        }

    /*** BEGIN TEMPLATE MAIN COMPONENT -- FOOTER CSS SETTING ***/
    #footer .footer-info-block{
        padding: 1.85rem 0 1rem;
    }
        #footer .footer-info li, #footer .footer-nav-links li.li-nav-main, #footer .footer-copyright-block {
            font-size: 0.813rem;
        }
        #footer .footer-nav-links {
            width: 100%;
            margin: 5% 0 0;
        }
            #footer .footer-nav-links li.li-nav-main {
                margin-top: 0;
            }
        #footer .footer-info li.li-copyright {
            margin: 5% auto 0;
        }
        
        #footer .footer-copyright-block .copyright-none-02{
            display: none;
        }

    /*** BEGIN HOME CSS SETTING ***/
    .home-slide-banner {
        height: 212px;
        background-size: 165%;
    }
        .home-slide-banner-text {
            width: 80%;
            margin: 4.5rem 0 0 0.5rem;
        }
        .home-slide-banner-text h2 {
            font-size: 2rem;
        }
    .home-slide-about-us .about-more {
        font-size: 1.15rem;
        margin-top: 2rem;
    }
    .home-slide-course-lists > .content-position-01 {
        padding-bottom: 0;
    }
        .home-slide-course-lists ul {
            height: 25rem;
        }
            .home-slide-course-lists li {
                width: 88%;
            }
            .home-slide-course-lists li.li-course-01 {
                font-size: 1.05rem;
            }
            .home-slide-course-lists li.li-course-02 {
                font-size: 0.860625rem;
            }
            .home-slide-course-lists li.li-course-03 {
                font-size: 0.908971875rem;
            }
            .home-slide-course-lists .course-lists-more{
                float: none;
                display: block;
                width: 33%;
                margin: 1rem auto 0;
            }

    .home-slide-join-class .join-class .item-title {
        flex: 0 1 45%;
    }
    .home-slide-join-class .join-class .item-title img{
        height: 32.4px;
        margin: 5% 0 0 5%;
    }
    .home-slide-join-class .join-class .item-sub-title {
        flex: 0 1 45%;
        font-size: 1.0125rem;
    }
    .home-slide-join-class .join-class .item-content {
        flex: 0 1 45%;
    }
    /* .home-slide-join-class ul {
        width: 44%;
    }
        .home-slide-join-class li.li-step {
            font-size: 1.6858125rem;
        }
        .home-slide-join-class li.li-join-01 {
            height: 44px;
        }
        .home-slide-join-class ul.join-arrow li {
            margin: 9.5rem 0 0;
        }
        .home-slide-join-class ul.ul-join-01 li.li-join-02{
            margin: 2rem 0 0 4rem;
            height: 5rem;
        }
        .home-slide-join-class ul.ul-join-02 li.li-join-02{
            margin: 2rem 0 0 4rem;
            height: 5rem;
        }
        .home-slide-join-class ul.ul-join-03{
            width: 44%;
        }
            .home-slide-join-class ul.ul-join-03 li.li-join-02{
                margin: 2.8rem 0 0 3rem;
                height: 4.2rem;
            }
        .home-slide-join-class ul.ul-join-04 li.li-join-02{
            margin: 2rem 0 0 3.7rem;
            height: 5rem;
        }
        .home-slide-join-class ul.ul-join-05{
            height: 23rem;
        }
            .home-slide-join-class ul.ul-join-05 li.li-join-02 {
                margin: 2rem 0 0 3.2rem;
                height: 7rem;
            } */
    .home-slide-faq {
        height: 72px;
        background-position: 0 0;
        background-size: 150%;
    }
        .home-slide-faq ul.ul-faq-01 {
            margin: 0 5.9% 0 0;
        }
        .home-slide-faq .ul-faq-01 li.li-faq{
            margin: 0 0 0 0.5rem;
        }
        .home-slide-faq ul.ul-faq-02 {
            width: 35.8%;
            margin: 0 2.9% 0 0;
        }
        .home-slide-faq ul.ul-faq-04 {
            width: 52%;
            margin: 1rem 0 0 0rem;
        }
        .home-slide-faq .ul-faq-04 li.li-faq-01{
            font-size: 1.29140163rem;
        }
        .home-slide-faq .ul-faq-04 li.li-faq-02{
            font-size: 1.29140163rem;
            margin: 0 0.5rem 0 0;
        }
        .home-slide-faq ul.ul-faq-05 {
            width: 43%;
            margin: 1rem 0 0 1rem;
        }
        .home-slide-faq .ul-faq-05 li.li-faq-01{
            font-size: 1.29140163rem;
        }
    .home-slide-news li.li-news-pic {
        height: 120px;
    }

    /*** BEGIN FEATURES CSS SETTING ***/
    .main-visual-subscriptions .page-title {
    	font-size: 1.5rem;
    }
    .features-area .feature-slide-desc-block-01 {
    	width: 92%;
    }
	    .features-area .feature-slide-desc-block-01 p {
	    	font-size: 0.938rem;
	    }
    .features-area .feature-slide-desc-block-02 .desc-block-02-left {
    	float: none;
    	display: block;
    	width: 50%;
    	margin: 0 auto;
    }
    .features-area .feature-slide-desc-block-02 .desc-block-02-right {
    	float: none;
    	display: block;
    	width: 100%;
    	margin: 3% auto;
    }
	    .features-area .feature-slide-desc-block-02 .desc-block-02-right h2 {
	    	width: 100%;
	    	font-size: 1.15rem;
	    	text-align: center;
	    }
	    .features-area .feature-slide-desc-block-02 .desc-block-02-right p {
	    	width: 100%;
	    	font-size: 0.938rem;
	    }
    .features-area .feature-slide-desc-block-03 .desc-block-03-left {
    	float: none;
    	display: block;
    	width: 100%;
    	margin: 3% auto;
    }
    	.features-area .feature-slide-desc-block-03 .desc-block-03-left h2 {
    		width: 100%;
	    	font-size: 1.15rem;
	    	text-align: center;
    	}
    	.features-area .feature-slide-desc-block-03 .desc-block-03-left p {
    		width: 100%;
	    	font-size: 0.938rem;
    	}
    .features-area .feature-slide-desc-block-03 .desc-block-03-right {
    	float: none;
    	display: block;
    	width: 50%;
    	margin: 0 auto;
    }
    .features-area .feature-slide-desc-block-04 {
    	margin: 3% auto 0;
    }
	    .features-area .feature-slide-desc-block-04 h2 {
	    	font-size: 1.15rem;
	    }
	    .features-area .feature-slide-desc-block-04 p {
	    	font-size: 0.938rem;
	    }
    .features-area .feature-slide-desc-block-05 li.li-desc-title {
    	font-size: 1.15rem;
    }
    .features-area .feature-slide-desc-block-05 li.li-desc-text {
    	font-size: 0.813rem;
    }
    .features-area .feature-slide-desc-block-06 .desc-block-06-left {
    	float: none;
    	display: block;
    	width: 50%;
    	margin: 0 auto;
    }
    .features-area .feature-slide-desc-block-06 .desc-block-06-right {
    	float: none;
    	display: block;
    	width: 100%;
    	margin: 3% auto;
    }
    	.features-area .feature-slide-desc-block-06 .desc-block-06-right h2 {
    		width: 100%;
	    	font-size: 1.15rem;
	    	text-align: center;
    	}
    	.features-area .feature-slide-desc-block-06 .desc-block-06-right p {
    		width: 100%;
	    	font-size: 0.938rem;
    	}

    /*** BEGIN HOW TO JOIN CSS SETTING ***/
    .how-to-join-area {
        margin: 8.11% auto;
    }
        .how-to-join-area .htj-slide-desc-block-01 .desc-block-01-left {
            float: none;
            display: block;
            width: 50%;
            margin: 0 auto;
        }
        .how-to-join-area .htj-slide-desc-block-01 .desc-block-01-right {
            float: none;
            display: block;
            width: 100%;
            margin: 3% auto;
        }
            .how-to-join-area .htj-slide-desc-block-01 .desc-block-01-right h2 {
                width: 100%;
                font-size: 1.15rem;
                text-align: center;
            }
            .how-to-join-area .htj-slide-desc-block-01 .desc-block-01-right p {
                width: 100%;
                font-size: 0.938rem;
            }
        .how-to-join-area .htj-slide-desc-block-02 .desc-block-02-right {
            float: none;
            display: block;
            width: 50%;
            margin: 0 auto;
        }
        .how-to-join-area .htj-slide-desc-block-02 .desc-block-02-left {
            float: none;
            display: block;
            width: 100%;
            margin: 3% auto;
        }
            .how-to-join-area .htj-slide-desc-block-02 .desc-block-02-left h2 {
                width: 100%;
                font-size: 1.15rem;
                text-align: center;
            }
            .how-to-join-area .htj-slide-desc-block-02 .desc-block-02-left p {
                width: 100%;
                font-size: 0.938rem;
            }
        .how-to-join-area .htj-slide-desc-block-03 .desc-block-03-left {
            float: none;
            display: block;
            width: 50%;
            margin: 0 auto;
        }
        .how-to-join-area .htj-slide-desc-block-03 .desc-block-03-right {
            float: none;
            display: block;
            width: 100%;
            margin: 3% auto;
        }
            .how-to-join-area .htj-slide-desc-block-03 .desc-block-03-right h2 {
                width: 100%;
                font-size: 1.15rem;
                text-align: center;
            }
            .how-to-join-area .htj-slide-desc-block-03 .desc-block-03-right p {
                width: 100%;
                font-size: 0.938rem;
            }
        .how-to-join-area .htj-slide-desc-block-04 .desc-block-04-right {
            float: none;
            display: block;
            width: 50%;
            margin: 0 auto;
        }
        .how-to-join-area .htj-slide-desc-block-04 .desc-block-04-left {
            float: none;
            display: block;
            width: 100%;
            margin: 3% auto;
        }
            .how-to-join-area .htj-slide-desc-block-04 .desc-block-04-left h2 {
                width: 100%;
                font-size: 1.15rem;
                text-align: center;
            }
            .how-to-join-area .htj-slide-desc-block-04 .desc-block-04-left p {
                width: 100%;
                font-size: 0.938rem;
            }

    /*** BEGIN HANYU APP INTRO CSS SETTING ***/
    .slide-01 {
    	height: 553px;
    	background: url(../image/bg_home_section_01.jpg) 40% 0 no-repeat;
        background-size: 200%;
    }
	    .slide-01-right {
	        width: 100%;
	        margin: 73% auto 0;
	    }
    .slide-02 {
    	background-size: 210%;
    }
	    .slide-02-left {
	        width: 60%;
	    }
	        .slide-02-left .download-link-area li {
                width: 75%;
	            margin-top: 3%;
	        }
	            .slide-02-left .download-link-area li.btn-google-play {
	                margin-top: 12%;
	            }
    /*.slide-03 {
        background-size: 180%;
    }*/
    .slide-03-svg-01 {
        height: auto;
        background: url(../image/bg_home_section_03_svg_01.jpg) 50% 0 no-repeat;
        background-color: #0360ae;
        background-size: 100%;
    }
        .slide-03-svg-01-left {
            float: none;
            display: block;
            width: 45%;
            margin: 12% auto 0;
        }
        .slide-03-svg-01-right {
            float: none;
            display: block;
            width: 92%;
            margin: 3% auto 0;
        }
            .slide-03-svg-01-right .main-slogan {
                text-align: center;
                margin: 0 0 3.5%;
                border: none;
            }
            .slide-03-svg-01-right .sub-desc {
                text-align: center;
            }
    .slide-03-svg-02 {
        height: auto;
        padding-bottom: 12%;
    }
        .slide-03-svg-02-left {
            float: none;
            display: block;
            width: 92%;
            margin: 3% auto 0;
        }
            .slide-03-svg-02-left .main-slogan {
                text-align: center;
                margin: 0 0 3.5%;
                border: none;
            }
            .slide-03-svg-02-left .sub-desc {
                text-align: center;
            }
        .slide-03-svg-02-right {
            float: none;
            display: block;
            width: 45%;
            margin: 12% auto 0;
        }
    .slide-04 {
        height: auto;
    }
        .slide-04-inline-block {
            float: none;
            display: block;
            width: 75%;
            margin: 4.633% auto 12%;
        }
            .slide-04-inline-block ul.ul-desc {
                width: 65%;
                margin: 0 auto 5.21%;
            }
        .slide-04-deco-line {
            display: none;
        }
    .slide-05 {
        height: auto;
        background-size: 400%;
    }
        .slide-05-left {
            float: none;
            display: block;
            width: 75%;
            margin: 8.383% auto 0;
        }
        .slide-05-right {
            float: none;
            display: block;
            margin: 12% auto 18%;
        }
    .slide-06 {
        height: auto;
    }
        .slide-06-left {
            float: none;
            display: block;
            width: 85%;
            margin: 12% auto 0;
        }
        .slide-06-right {
            float: none;
            display: block;
            width: 55.5%;
            margin: 8% auto 12%;
        }
    .slide-07 {
        height: auto;
        background-size: 500%;
    }
        .slide-07-left {
            float: none;
            display: block;
            width: 52%;
            margin: 7.5% auto 0;
        }
        .slide-07-right {
            float: none;
            display: block;
            width: 100%;
            margin: 3% auto 12%;
        }
            .slide-07-right .deco-illustration {
                display: none;
            }
            .slide-07-right .main-slogan {
                float: none;
                display: block;
                margin: 0 auto 3.6%;
            }
            .slide-07-right .sub-desc {
                position: relative;
                top: 0;
                float: none;
            }
    .slide-08 {
        height: auto;
    }
        .slide-08-center {
            width: 92%;
        }
            .slide-08-center .main-slogan {
                font-size: 1.25em;
            }
        .slide-08-table {
            width: 85%;
        }
            .slide-08-table li.li-tb-title-text {
	    		width: 11%;
	    	}
		    	.title-text-format-actel {
		        	width: 32% !important;
		        	padding: 0 1.5% !important;
		        }
	    	.slide-08-table li.li-tb-content-text {
	    		width: 11%;
	    		font-size: 0.938em;
	    	}
		    	.text-format-actel {
		    		width: 32% !important;
		    	}
    .slide-09 {
        height: auto;
        background-size: 400%; 
    }
        .slide-09-inline-block {
            float: none;
            display: block;
            width: 65%;
            margin: 6% auto 12%;
        }
    .slide-10 {
        height: auto;
    }
        .slide-10-left {
            float: none;
            display: block;
            width: 50%;
            margin: 10.883% auto 0;
        }
        .slide-10-right {
            float: none;
            display: block;
            width: 85%;
            margin: 6% auto 12%;
        }
            .slide-10-right .btn-get-started {
                display: block;
                margin: 3% auto 0;
            }

    /*** BEGIN COURSES CSS SETTING ***/
    .courses-area ul {
        width: 46%;
    	margin: 0 1.5% 4.055%;
    }
    	.courses-area li.li-course-name {
    		height: 60px;
    		font-size: 1.15rem;
    		line-height: 150%;
    	}
    	.courses-area li.li-course-level {
    		font-size: 1rem;
    	}
    	.courses-area li.li-course-desc {
    		font-size: 0.875rem;
    		height: 85px;
    	}
    	.courses-area li.li-more-btn {
    		font-size: 1rem;
    	}

    /*** BEGIN COURSES_01 CSS SETTING ***/
    .courses-01-area {
        padding: 3rem 0;
    }
        .courses-01-area h2{
            font-size: 2.7rem;
        }
        .courses-01-area ul {
            height: 31.5rem;
        }
            .courses-01-area img {
                margin-bottom: 0.75rem;
            }
            .courses-01-area li.li-course-name {
                font-size: 1.125rem;
                margin: 0 auto 0.5rem;
            }
            .courses-01-area li.li-course-name-eng {
                font-size: 1rem;
                margin: 0 auto 0.75rem;
            }
            .courses-01-area li.li-course-level {
                font-size: 1rem;
                margin: 0 auto 0.75rem;
            }
            .courses-01-area li.li-course-desc {
                font-size: 0.9rem;
            }
            .courses-01-area li.li-more-btn {
                font-size: 1rem;
                margin: 0.75rem auto 0;
            }
                .courses-01-area li.li-more-btn .div-btn {
                    width: 49.5%;
                    font-size: 1rem;
                }

	/*** BEGIN COURSE INTRO CSS SETTING ***/
    .course-intro-banner{
        height: 100px;
        background: url(../image/bg_course_intro_banner.png) 31% 0 no-repeat;
        background-size: 160%;
    }
    .course-switch li{
        width: 32.79%;
        font-size: 1.25479125rem;
    }
    .course-intro-area .cia-left-column h2{
        font-size: 1.25479125rem;
    }
        .course-intro-area .cia-left-column .course-title {
            font-size: 1rem;
        }
    .course-intro-area .cia-left-column li{
        font-size: 0.8611rem;
    }
    .course-intro-area .cia-left-column .desc-block-title li {
        padding: 0.5rem 0rem 0.5rem 1.3rem;
    }
    .course-intro-area .cia-left-column .desc-block-title li, .course-intro-area .cia-right-column h3, .course-intro-area .cia-right-column li{
        font-size: 0.9568rem;
    }
    .course-intro-area .cia-left-column .desc-block-title img.rotate {
        top: 0.8rem;
    }
    .course-intro-area .cia-left-column .desc-block-title img {
        padding: 0.8rem 1.25rem 0 0;
    }
    .course-intro-area .cia-right-column {
        margin: 5% 0;
    }
        .course-intro-area .cia-right-column li.li-teacher-photo {
            width: 50%;
            margin: 0 3% 0 0;
        }
        .course-intro-area .cia-right-column li.li-teacher-name {
            width: 47%;
        }
        .course-intro-area .cia-right-column li.li-teacher-desc {
            width: 47%;
            margin: 2.275% 0 0;
        }
    .course-intro-area .cia-course h3{
        font-size: 1.25479125rem;
    }
    .course-intro-area .cia-course .course-list .flex-info .item-course-title, .course-intro-area .cia-course .course-list .flex-info .item-course-content {
        font-size: 0.9rem;
    }
    .cia-enroll-class h2{
        font-size: 1.25479125rem;
    }
    .cia-enroll-class ul {
        width: 49.5%;
        height: 26rem;
    }
    .cia-enroll-class ul.ul-enroll-03, .cia-enroll-class ul.ul-enroll-04 {
        height: 22rem;
    }
    .cia-enroll-class li.li-step {
        margin: 0 auto;
    }
    .cia-enroll-class li.li-enroll-img {
        margin: 12% 10%;
    }
    .course-intro-area .cia-central-qa-column .div-title-block h3 {
        font-size: 1.25479125rem;
    }
    .course-intro-area .cia-central-qa-column .div-left-qa-list-block {
        width: 100%;
    }
    .course-intro-area .cia-central-qa-column .div-left-qa-list-block .faq-user-photo-block {
        width: 100px;
        height: 100px;
    }
    .course-intro-area .cia-central-qa-column .div-left-qa-list-block .faq-type-block {
        margin: 3.8% 0 0 3%;
    }
    .course-intro-area .cia-central-qa-column .div-left-qa-list-block .faq-title-block {
        width: 62%;
    }
    .course-intro-area .cia-central-qa-column .div-left-qa-list-block .icon-faq-arrow {
        margin: 8% 0 0 0;
    }
    .course-intro-area .cia-central-qa-column .div-right-qa-ui-block {
        width: 100%;
    }
    .world li {
        font-size: 1.291rem;
    }
    .world ul.ul-world-01 {
        width: 51%;
        margin: 0;
    }
    .course-intro-area .cia-course {
        padding: 3.5% 0;
    }
    .course-intro-area .cia-course .world-time-clock-link {
        font-size: 1rem;
    }
    .course-intro-area .cia-course .world-time-clock-link .div-clock-icon {
        width: 5.5%;
    }

    /*** BEGIN COURSE INTRO :: ASYNC CSS SETTING ***/
    .course-intro-area .cia-left-column .async > li > span.async-desc-title {
        font-size: 0.875rem;
    }


    /*** BEGIN COURSE INTRO 02 CSS SETTING ***/
    .course-intro-02-area .ci02-slide-desc-block-01 .desc-block-01-right {
        float: none;
        display: block;
        width: 88%;
        margin: 0 auto 1.5rem;
    }
    .course-intro-02-area .ci02-slide-desc-block-01 .desc-block-01-left {
        float: none;
        display: block;
        width: 88%;
        margin: 0 auto;
    }
    .course-intro-02-area .ci02-slide-desc-block-03 {
        margin-bottom: 1.5rem;
    }
        .course-intro-02-area .ci02-slide-desc-block-03 ul {
            width: 45%;
            height: 275px;
            margin: 0 2% 1.5rem;
        }
    .course-intro-02-area .ci02-slide-desc-block-04 ul {
        margin-bottom: 1rem;
    }
    .course-intro-02-area .ci02-slide-desc-block-05 .desc-block-05-right {
        float: none;
        display: block;
        width: 88%;
        margin: 0 auto 1.5rem;
    }
    .course-intro-02-area .ci02-slide-desc-block-05 .desc-block-05-left {
        float: none;
        display: block;
        width: 88%;
        margin: 0 auto;
    }
    .course-intro-02-area .ci02-slide-desc-block-06 .desc-block-06-left {
        float: none;
        display: block;
        width: 88%;
        margin: 0 auto 1.5rem;
    }
    .course-intro-02-area .ci02-slide-desc-block-06 .desc-block-06-right {
        float: none;
        display: block;
        width: 88%;
        margin: 0 auto;
    }
    .course-intro-02-area .ci02-slide-desc-block-07 li.li-course-desc {
        height: 5.5rem;
        margin: 0 auto 1.15rem;
    }
    .course-intro-02-area .ci02-slide-desc-block-07 li.li-course-fee {
        margin: 0 auto 1.15rem;
    }

    /*** BEGIN COURSE INTRO VIDEO CSS SETTING ***/
    #course-video {
        width: 100%;
        margin: 0 auto;
    }
        #course-video iframe {
            width: 450px;
            height: 254px;
        }

    /*** BEGIN SUBSCRIPTIONS CSS SETTING ***/
    .subscription-info-table ul.ul-si-visibility {
        display: block;
    }
    .subscription-info-table ul.ul-action-now {
    	margin-top: 10%;
    }
    	.subscription-info-table ul.ul-action-now li {
    		height: auto !important;
    	}
    .subscription-info-table .column-computer-show {
        display: none !important;
    }
    .subscription-info-table .column-mobile-show {
        display: inline-block !important;
    }
    .subscription-info-table .column-mobile-hide {
        display: none !important;
    }
    .subscription-info-table li.li-sit-large {
    	width: 58%;
    }
    .subscription-info-table li.li-sit-mid {
    	width: 30%;
    }
    .subscription-info-table li.li-sit-small {
    	width: 4.5%;
    }
    .subscription-info-table .plans-desc-icon-check img {
    	width: 15%;
    }

    /*** BEGIN PRIVACY POLICY CSS SETTING ***/
    .pp-info-table .pp-info-sub-title {
    	letter-spacing: 0.03em;
    }
    .pp-info-table p.pp-info-desc {
    	letter-spacing: 0;
    }

    /*** BEGIN FAQ CSS SETTING ***/
    .faq-area {
        margin: 2.15rem auto 1.15rem;
    }
        .faq-area .faq-left-column {
            width: 100%;
        }
            .faq-area .faq-left-column li.li-faq-title {
                border-radius: 0.5rem;
            }

    /*** BEGIN BLOG CSS SETTING ***/
    .blog-area .blog-left-column .blog-list {
        display: block;
        overflow: hidden;
    }
        .blog-area .blog-left-column .blog-list:not(#blog-list-last) {
            margin: 1.5rem auto 0;
        }
        .blog-area .blog-left-column .blog-list a.img-main {
            display: block;
            width: 100%;
            overflow: hidden;
            margin: 0 auto;
        }
        .blog-area .blog-left-column .blog-list iframe {
            width: 406px;
            height: 228px;
        }
        .blog-area .blog-left-column .blog-list .div-pic-replacement {
            height: 8.5rem;
        }
        .blog-area .blog-left-column .blog-list ul {
            margin: 1rem auto 0;
            padding: 0;
        }
            .blog-area .blog-left-column .blog-list li.li-title{
                font-size: 1.125rem;
            }
            .blog-area .blog-left-column .blog-list li.li-content {
                font-size: 0.938rem;
            }
        .blog-area .blog-left-column .blog-list .div-sub-info {
            margin: 0.5rem 0 1rem;
            padding: 0.5rem 0 0;
        }
    .blog-area .blog-right-column {
        margin: 3rem auto 0;
    }

    /*** BEGIN BLOG CONTENT CSS SETTING ***/
    .blog-content-area .blog-content-left-column h3 {
        font-size: 1.3025em;
    }
    .blog-content-area .blog-content-left-column .blog-content-image iframe {
        height: 228px;
    }
    .blog-content-area .blog-content-left-column .blog-content-author-time img{
        height: 18px;
        width: 18px;
    }
    .blog-content-area .blog-content-left-column .blog-content-author-intro img{
        height: 110px;
        width: 110px;
    }

    /*** BEGIN MEMBER RENEW PASSWORD CSS SETTING ***/
    .member-ui-add-margin > .content-position-01 {
        width: 96%;
        min-height: 300px;
        margin-top: 6%;
    }
    .account-info-area ul.ul-renew-pw-content {
        float: none;
        display: block;
        width: 94%;
        margin: 0 auto;
    }
        .account-info-area li.li-rpc-item {
            float: none;
            display: block;
            width: 94%;
            margin: 0 auto 5%;
        }
            .account-info-area li.li-rpc-item label {
                margin-bottom: 3%;
            }
            .account-info-area li.li-rpc-item .input-ui-text-01 {
                width: 94%;
                padding: 2% 3%;
            }
            .account-info-area li.li-rpc-item .input-ui-btn-01 {
                width: 96%;
                margin: 6% auto 0;
                padding: 2% 3%;
            }

    /*** BEGIN MEMBER ACCOUNT INFO CSS SETTING ***/
    #member-account-info {
        display: none;
    }
    .account-info-area ul.ul-account-info-content {
        float: none;
        display: block;
        width: 94%;
        margin: 0 auto;
    }
        .account-info-area li.li-aic-item {
            float: none;
            display: block;
            width: 94%;
            margin: 0 auto 5%;
        }
        .account-info-area li.li-aic-item-02 {
            float: none;
            display: block;
            width: 94%;
            margin: 0 auto 5%;
        }

    /*** BEGIN MEMBER MY COURSES CSS SETTING ***/
    .account-info-area {
        margin: 0 auto;
    }
        .account-info-area ul.ul-account-main-menu {
            display: none;
        }
        .account-info-area ul.ul-account-sub-menu {
            float: none;
            display: block;
            width: 100%;
            min-height: auto;
            margin: 0 auto;
            padding: 5.406% 0 3%;
        }
            .account-info-area li.li-asm-item {
                width: 97%;
                margin: 0 0 3% 3%;
                padding: 0;
            }
        .account-info-area ul.ul-my-courses-content {
            float: none;
            display: block;
            width: 94%;
            min-height: auto;
            margin: 0 auto;
        }
            .account-info-area li.li-mcc-for-mobile-ui {
                display: block;
            }
            .account-info-area li.li-mcc-no-data-pic {
                width: 80%;
                margin: 0 auto;
                padding: 0;
            }
            .account-info-area li.li-mcc-no-data-text {
                width: 80%;
                margin: 6% auto 3%;
                padding: 0;
            }
            .height-setting-for-no-data {
                height: auto;
            }
            .span-m-course-title {
                display: block !important;
                font-size: 1rem !important;
                font-weight: 500;
                margin: 8% 0  7% !important;
            }
                .span-m-course-title img {
                    width: 8%;
                    margin: 0 0 0 5%;
                    vertical-align: middle;
                }
            .span-m-course-teacher {
                display: block !important;
            }
            .span-m-course-time {
                display: block !important;
            }
            .span-course-teacher {
                display: none !important;
            }
            .span-course-date {
                width: 30%;
            }
            .span-course-time {
                display: none !important;
            }
            .span-course-attendance {
                width: 25%;
            }
            .span-course-link {
                width: 25%;
            }

    /*** BEGIN MEMBER MY QA LIST CSS SETTING ***/
    .account-info-area ul.ul-my-courses-qa {
        float: none;
        display: block;
        width: 94%;
        margin: 0 auto;
    }

    /*** BEGIN MEMBER MY QA INSERT CSS SETTING ***/
    .account-info-area ul.ul-my-courses-qa-insert {
        float: none;
        display: block;
        width: 94%;
        margin: 0 auto;
    }

    /*** BEGIN MEMBER MY HOMEWORK CSS SETTING ***/
    .account-info-area ul.ul-my-homework-content {
        float: none;
        display: block;
        width: 94%;
        min-height: auto;
        margin: 0 auto;
    }
        .account-info-area ul.ul-my-homework-content .sh-assign-date {
            display: none;
        }
        .account-info-area ul.ul-my-homework-content .sh-recommend {
            width: 18% !important;
        }
        .span-homework-link {
            width: 12%;
        }

    /*** BEGIN NEWS CSS SETTING ***/
    .main-visual-subscriptions-news {
        height: 130px;
        background: url(../image/bg_news_banner.png) 0 0 no-repeat;
        background-size: 144%;
    }
    .main-visual-subscriptions-news .page-title{
        font-size: 3.32150625rem;
    }
    .news-area .news-left-column .news-list {
        display: block;
        margin: 0 0 8%;
    }
    .news-area .news-left-column .news-list a.img-main{
        width: 100%;
    }
    .news-area .news-left-column .news-list ul{
        width: 100%;
    }
    .news-area .news-left-column .news-list li.li-title{
        margin: 2% 0;
    }
    .news-area .news-right-column li.li-news-latest-updated, .news-area .news-right-column li.li-categories{
        margin: 0 0 4.552% 1%;
        padding: 0 0 0 3%;
    }

    /*** BEGIN NEWS CONTENT CSS SETTING ***/
    .news-content-area .news-content-left-column h3 {
        font-size: 1.64025rem;
    }
    .news-content-area .news-content-left-column li.li-post-time, .news-content-area .news-content-left-column li.li-post-tag{
        font-size: 0.7745625rem;
    }
    .news-content-area .news-content-left-column li, .news-content-area .news-content-left-column li.content{
        font-size: 0.9568125rem;
    }
    .news-content-area .news-content-left-column .content-06 ul.fee li {
        font-size: 0.7745625rem;
    }
    .news-content-area .news-content-left-column .content-06 ul:not(.f-02) li.li-fee-01, .news-content-area .news-content-left-column .content-06 ul.f-01 li.li-fee-04, .news-content-area .news-content-left-column .content-06 ul.f-01 li.li-fee-05 {
        width: 17.92%;
    }
    .news-content-area .news-content-right-column h3 {
        font-size: 1.64025rem;
    }
    .news-content-area .news-content-right-column li.li-news-content-latest-updated, .news-content-area .news-content-right-column li.li-categories{
        width: 99%;
        font-size: 0.9568125rem;
    }

    /*** BEGIN ABOUT CSS SETTING ***/
    .main-visual-subscriptions-about {
        height: 115px;
        background: url(../image/bg_news_banner.png) 0 0 no-repeat;
        background-size: 144%;
    }
    .main-visual-subscriptions-about .page-title {
        font-size: 2.69001rem;
        margin: 6.5% 0 0 3%;
    }
    .about-area h2{
        font-size: 1.745rem;
    }
    .about-area .about-slide-desc-block-01 .desc-block-01-desc{
        font-size: 0.86113125rem;
    }
    .about-area .about-slide-desc-block-03 p, .about-area .about-slide-desc-block-04 p, .about-area .about-slide-desc-block-05 p {
        font-size: 0.9211644rem;
    }
    .about-area .about-slide-desc-block-03 .desc-block-03-left {
        float: none;
        display: block;
        width: 100%;
        padding: 4.7% 2% 6.7%;
    }
    .about-area .about-slide-desc-block-03 .desc-block-03-right {
        float: none;
        display: block;
        width: 100%;
    }
    .about-area .about-slide-desc-block-04 .desc-block-04-left {
        float: none;
        display: block;
        width: 100%;
    }
    .about-area .about-slide-desc-block-04 .desc-block-04-right {
        float: none;
        display: block;
        width: 100%;
        padding: 4.7% 2% 6.7%;
    }
    .about-area .about-slide-desc-block-05 .desc-block-05-left {
        float: none;
        display: block;
        width: 100%;
        padding: 4.7% 2% 6.7%;
    }
    .about-area .about-slide-desc-block-05 .desc-block-05-right {
        float: none;
        display: block;
        width: 100%;
    }
    .about-area .about-slide-desc-block-06 .why_us .item-title {
        font-size: 1.458rem;
    }
    .about-area .about-slide-desc-block-06 .why_us .item-content {
        font-size: 0.81rem;
    }

    /*** BEGIN MEMBER MY VIDEOS CSS SETTING ***/
    .account-info-area ul.ul-my-video {
        float: none;
        display: block;
        width: 100%;
        min-height: auto;
        margin: 0 auto;
        padding-top: 6%;
    }
        .account-info-area ul.ul-my-video .div-video-block {
            height: 265px;
        }
            .account-info-area ul.ul-my-video a img {
                width: 4.75%;
            }
                .account-info-area ul.ul-my-video .div-video-block li.li-video-title {
                    width: 95%;
                    margin: 0.25rem 0 0.75rem 0.5rem;
                }
            .video-watched-status {
                bottom: 4.25%;
                left: 4.25%;
                width: 45%;
            }

    /*** BEGIN MEMBER MY VIDEOS POP-UP UI CSS SETTING ***/
    .account-info-area ul.ul-my-video iframe {
        height: 233px !important;
        margin: 3% 0 6%;
    }

    /*** BEGIN MEMBER MY PAYMENT CSS SETTING ***/
    .account-info-area ul.ul-my-payment-content {
        float: none;
        display: block;
        width: 98%;
    }

}

@media (max-width: 414px) {

    /*** BEGIN TEMPLATE MAIN COMPONENT -- HEADER CSS SETTING ***/
    #cookie-collect-inform {
        font-size: 0.813rem;
    }
    .mobile-menu-btn {
        width: 4.5%;
        margin: 1.5% 3% 0 0;
    }
    	.mmb-trans {
	        margin-top: 1.4%;
	        transition: margin 0.1s;
	    }
    #nav-language li {
        font-size: 0.759375rem;
    }
        #nav-language li.li-fb {
            width: 5%;
        }
    #logo-nsysu .nsysu-chinese {
        font-size: 1.107rem;
    }
    #logo-nsysu .nsysu-english {
        font-size: 0.6147rem;
    }
    #logo-text {
        font-size: 1.7982rem;
    }

    /*** BEGIN TEMPLATE MAIN COMPONENT -- FOOTER CSS SETTING ***/
    #footer .footer-info li, #footer .footer-nav-links li.li-nav-main, #footer .footer-copyright-block {
        font-size: 0.75rem;
    }
    #footer .footer-nav-links li.li-nav-sub {
        font-size: 1.3286025rem;
        margin: 0 1.35rem 0 0;
    }
        #footer .footer-nav-links li.li-nav-sub.sub-02 {
            width: 8%;
        }
    #footer .footer-copyright-block .copyright-none{
        display: none;
    }

    /*** BEGIN HOME CSS SETTING ***/
    .home-slide-banner {
        height: 188px;
        background-size: 170%;
    }
    .home-slide-banner-text {
        width: 81%;
        margin: 4rem 0 0 0;
    }
    .home-slide-banner-text h2 {
        font-size: 1.8rem;
    }
    .home-slide-about-us h2 {
        font-size: 1.75rem;
    }
        .home-slide-about-us .desc-block-07-desc{
            font-size: 0.908971875rem;
            margin: 0 0 4.5%;
        }
    .home-slide-course-lists h2{
        font-size: 1.75rem;
    }
    .home-slide-course-lists ul {
        height: 23.3rem;
    }
    .home-slide-course-lists li {
        width: 90%;
    }
    .home-slide-course-lists li.li-course-01 {
        font-size: 0.938rem;
    }
    .home-slide-course-lists li.li-course-02 {
        font-size: 0.813rem;
    }
    .home-slide-course-lists li.li-course-03 {
        font-size: 0.813rem;
    }
    .home-slide-course-lists li.li-more-btn {
        font-size: 0.875rem;
        border-radius: 0.5rem;
    }
    .home-slide-course-lists .course-lists-more{
        margin: 1rem 0 0 8.9rem;
        font-size: 1.10716875rem;
    }
    .home-slide-join-class h2{
        font-size: 1.75rem;
    }
    .home-slide-join-class .join-class .item-title {
        font-size: 1.6858125rem;
    }
    .home-slide-join-class .join-class .item-title img{
        height: 29.16px;
    }
    .home-slide-join-class .join-class .item-title.title-05 {
        font-size: 1.8225rem;
    }
    .home-slide-join-class .join-class .item-sub-title {
        font-size: 0.8525rem;
    }
    .home-slide-join-class .join-class .item-content {
        font-size: 0.7875rem;
    }
    .home-slide-news h2{
        font-size: 1.75rem;
    }
    .home-slide-news li.li-news-pic img {
        width: 120%;
    }
    .home-slide-news li.li-news-01 {
        font-size: 0.860625rem;
    }
    .home-slide-news li.li-news-02 {
        font-size: 0.759375rem;
    }
    .home-slide-news ul.news-lists-more {
        font-size: 1rem;
    }
    .home-slide-faq {
        height: 43px;
    }
        .home-slide-faq .ul-faq-02 li.li-faq-01{
            font-size: 1.063125rem;
            margin: 0 0 0.5rem 0;
        }
        .home-slide-faq .ul-faq-02 li.li-faq-02{
            font-size: 0.860625rem;
        }
        .home-slide-faq .ul-faq-03{
            font-size: 0.860625rem;
        }
        .home-slide-faq .ul-faq-04 li.li-faq-01{
            font-size: 1.162261467rem;
        }
        .home-slide-faq .ul-faq-04 li.li-faq-02{
            font-size: 1.162261467rem;
        }
        .home-slide-faq ul.ul-faq-05 {
            margin: 1rem 0 0 0.5rem;
        }
        .home-slide-faq .ul-faq-05 li.li-faq-01{
            font-size: 1.162261467rem;
        }

    /*** BEGIN FEATURES CSS SETTING ***/
    .main-visual-subscriptions .page-title {
        font-size: 1.25rem;
        margin-left: 4%;
    }
    .features-area .feature-slide-desc-block-01 p {
        font-size: 0.813rem;
    }
    .features-area .feature-slide-desc-block-02 .desc-block-02-right h2 {
        font-size: 0.938rem;
    }
    .features-area .feature-slide-desc-block-02 .desc-block-02-right p {
        font-size: 0.813rem;
    }
    .features-area .feature-slide-desc-block-03 .desc-block-03-left h2 {
        font-size: 0.938rem;
    }
    .features-area .feature-slide-desc-block-03 .desc-block-03-left p {
        font-size: 0.813rem;
    }
    .features-area .feature-slide-desc-block-04 h2 {
        font-size: 0.938rem;
    }
    .features-area .feature-slide-desc-block-04 p {
        font-size: 0.813rem;
    }
    .features-area .feature-slide-desc-block-05 li.li-desc-title {
        font-size: 0.938rem;
    }
    .features-area .feature-slide-desc-block-06 .desc-block-06-right h2 {
        font-size: 0.938rem;
    }
    .features-area .feature-slide-desc-block-06 .desc-block-06-right p {
        font-size: 0.813rem;
    }
    
    /*** BEGIN HANYU APP INTRO CSS SETTING ***/
    .slide-01 {
        height: 478px;
    }
        .slide-01-right {
            margin: 65% auto 45%;
        }
    .slide-02 {
        background-size: 245%;
    }
    .slide-03-center .btn-see-how-it-works {
        width: 48%;
    }
    .slide-08-table li.li-tb-title-text {
        font-size: 0.938em;
        margin: 2.82% 2.85% 0;
    }
    .slide-08-table li.li-tb-content-text {
        font-size: 0.813em;
        font-weight: 300;
        margin: 1.2% 2.85%;
    }

    /*** BEGIN COURSES CSS SETTING ***/
    .courses-area li.li-course-name {
        font-size: 1em;
        margin: 11% 0 8%;
    }
    	.courses-area .course-name-eng {
    		font-size: 0.875rem;
    	}
    .courses-area li.li-course-level {
        font-size: 0.875em;
    }
    .courses-area li.li-course-desc {
        font-size: 0.813em;
        margin-bottom: 6%;
    }
    .courses-area li.li-more-btn {
        font-size: 0.875em;
    }

    /*** BEGIN COURSES_01 CSS SETTING ***/
    .courses-01-area {
        padding: 3.66rem 0;
    }
        .courses-01-area h2{
            font-size: 2.3rem;
        }
        .courses-01-area ul {
            height: 30.3rem;
        }
            .courses-01-area li {
                padding: 0;
            }
            .courses-01-area li.li-course-name {
                height: 5rem;
                font-size: 1.15rem;
                margin: 0 auto 0.75rem;
            }
            .courses-01-area li.li-course-name-eng {
                font-size: 0.855rem;
                margin: 0 auto 0.75rem;
            }
            .courses-01-area li.li-course-level {
                font-size: 0.95rem;
            }
            .courses-01-area li.li-course-desc {
                height: 5.25rem;
                font-size: 0.855rem;
            }
            .courses-01-area li.li-more-btn {
                font-size: 0.855rem;
                margin: 0.75rem auto 0;
            }
                .courses-01-area li.li-more-btn .div-btn {
                    width: 49.4%;
                    font-size: 0.938rem;
                }
    
    /*** BEGIN COURSE INTRO CSS SETTING ***/
    .course-intro-banner{
        height: 98px;
        background: url(../image/bg_course_intro_banner.png) 22% 0 no-repeat;
        background-size: 181%;
    }
    .course-switch .course-direct-enroll-btn {
        width: 33%;
        font-size: 1rem;
        font-weight: 400;
        margin-top: 2%;
        padding: 0.35rem 0;
    }
    .course-switch li{
        width: 32.7%;
        font-size: 1.129rem;
    }
    .course-intro-area .cia-left-column h2{
        font-size: 1.129rem;
    }
    .course-intro-area .cia-right-column li.li-teacher-name {
        margin: 0;
    }
    .course-intro-area .cia-course h3{
        font-size: 1.129rem;
    }
    .course-intro-area .cia-course .world-time-clock-link {
        margin: 0 auto 1.5rem;
    }
    .course-intro-area .cia-course .course-list .flex-info .item-course-title, .course-intro-area .cia-course .course-list .flex-info .item-course-content {
        font-size: 0.81rem;
    }
    .cia-enroll-class h2{
        font-size: 1.129rem;
    }
    .cia-enroll-class ul {
        height: 25rem;
    }
    .cia-enroll-class ul.ul-enroll-03, .cia-enroll-class ul.ul-enroll-04 {
        height: 18rem;
    }
    .course-intro-area .cia-central-qa-column .div-title-block h3 {
        font-size: 1.129rem;
    }
    .course-intro-area .cia-central-qa-column .div-left-qa-list-block .faq-user-photo-block {
        width: 85px;
        height: 85px;
    }
    .course-intro-area .cia-central-qa-column .div-left-qa-list-block .faq-type-block {
        width: 65%;
        margin: 2.8% 0 0 2%;
    }
    .course-intro-area .cia-central-qa-column .div-left-qa-list-block .faq-title-block {
        width: 66%;
        margin: 1.5% 0 0 2%;
    }
    .course-intro-area .cia-central-qa-column .div-left-qa-list-block .faq-user-info-block {
        width: 65%;
        font-size: 0.7745625rem;
        margin: 1.5% 0 0 2%;
    }
    .course-intro-area .cia-central-qa-column .div-left-qa-list-block .icon-faq-arrow {
        width: 25.2px;
    }
    .world li {
        font-size: 1.1619rem;
    }
    .world .ul-world-01 li.li-world-02{
        margin: 0 1% 0 0;
    }
    .course-direct-enroll-btn {
        font-size: 1.15rem;
        font-weight: 500;
    }

    /*** BEGIN COURSE INTRO 02 CSS SETTING ***/
    .course-intro-02-area .ci02-slide-desc-block-04 {
        padding: 3rem 0 2rem;
    }
    .course-intro-02-area .ci02-slide-desc-block-07 ul {
        float: none;
        display: block;
        width: 85%;
        margin: 0 auto 1.5rem;
    }
        .course-intro-02-area .ci02-slide-desc-block-07 li.li-course-desc {
            height: 3.85rem;
        }

    /*** BEGIN COURSE INTRO VIDEO CSS SETTING ***/
    #course-video iframe {
        width: 398px;
        height: 225px;
    }

    /*** BEGIN SUBSCRIPTIONS CSS SETTING ***/
    #nav-buttons-cp li {
    	font-size: 0.813em;
    }
    .main-visual-subscriptions .page-title {
    	font-size: 1.5em;
    }

    /*** BEGIN PRIVACY POLICY CSS SETTING ***/
    .pp-info-table p.pp-info-desc {
    	font-size: 0.813em;
    }

    /*** BEGIN FAQ CSS SETTING ***/
    .faq-area .faq-left-column li.li-faq-title {
        font-size: 0.938rem;
        font-weight: 400;
        border-radius: 0.35rem;
    }

    /*** BEGIN BLOG CSS SETTING ***/
    .blog-area .blog-left-column .blog-list iframe {
        width: 350px;
        height: 197px;
    }
    .blog-area .blog-left-column .blog-list .div-pic-replacement {
        height: 6rem;
    }
    .blog-area .blog-left-column .blog-list li.li-title{
        font-size: 0.9725em;
    }
    .blog-area .blog-left-column .blog-list li.li-content, .blog-area .blog-left-column .blog-list li.li-author-time{
        font-size: 0.9125em;
    }
    .blog-area .blog-left-column .blog-list li.li-author-time img{
        height: 15px;
        width: 15px;
    }
    .blog-area .blog-left-column li.li-post-time {
        display: none;
    }

    /*** BEGIN BLOG CONTENT CSS SETTING ***/
    .blog-content-area .blog-content-left-column .blog-content-image iframe {
        height: 197px;
    }
    .blog-content-area .blog-content-left-column li.li-post-tag {
        width: 65%;
    }

    /*** BEGIN MEMBER MY COURSES CSS SETTING ***/
    .account-info-area li.li-mcc-no-data-text {
        width: 100%;
    }
    .span-m-course-time {
        display: inline-block !important;
    }
    .span-course-no {
        width: 15%;
    }
    .span-course-date {
        width: 28%;
    }
    .span-course-time {
        display: none !important;
    }
    .span-course-attendance {
        width: 25%;
    }
    .span-course-link {
        width: 26%;
    }

    /*** BEGIN FREE COURSE SURVEY CSS SETTING ***/
    .fc-survey-area .fcs-copyright-area {
        padding: 5% 0;
    }

    /*** BEGIN BLOG CONTENT CSS SETTING ***/
    .blog-content-area .blog-content-left-column h3 {
        font-size: 1.25rem;
    }
    .blog-content-area .blog-content-left-column .blog-content-desc {
        font-size: 1rem;
    }
    .blog-content-area .blog-content-right-column li.li-blog-content-latest-updated {
        font-size: 1rem;
    }
    .blog-content-area .blog-content-right-column li.li-courses-recommended {
        font-size: 1rem;
    }

    /*** BEGIN MEMBER MY QA LIST CSS SETTING ***/
    .account-info-area ul.ul-my-courses-qa .div-qa-list-block .faq-title-block {
        width: 78%;
    }
    .account-info-area ul.ul-my-courses-qa .div-qa-list-block .faq-user-info-block {
        width: 78%;
    }
    .account-info-area ul.ul-my-courses-qa .div-qa-list-block li.li-faq-desc {
        margin: 0.25rem 0 0.25rem 5rem;
    }

    /*** BEGIN MEMBER MY HOMEWORK CSS SETTING ***/
    .account-info-area .lmi-content {
        padding-bottom: 0 !important;
        border-bottom: #DCDDDD 1px solid !important;
    }
        .account-info-area li.li-mhc-item .div-as-span {
            padding: 3% 0 !important;
        }
            .span-homework-no {
                width: 9%;
            }
            .sh-m-title-padding {
                padding: 4.5% 1.049%;
            }
            .sh-m-title-disable {
                display: none !important;
            }
            .sh-m-deco-line {
                border-bottom: #DCDDDD 1px dotted;
            }
            .span-homework-date {
                width: 42% !important;
            }
            .span-homework-homework-name {
                width: 45% !important;
            }
            .span-homework-link {
                width: 25%;
            }

    /*** BEGIN MEMBER COURSE MATERIAL CSS SETTING ***/
    .span-cm-filename {
        width: 66%;
    }

    /*** BEGIN NEWS CSS SETTING ***/
    .main-visual-subscriptions-news {
        height: 120px;
        background: url(../image/bg_news_banner.png) 10% 0 no-repeat;
        background-size: 153%;
    }
    .main-visual-subscriptions-news .page-title{
        font-size: 2.989rem;
    }
    .news-area .news-left-column .news-list iframe {
        width: 365px;
        height: 178px;
    }
    .news-area .news-right-column li.li-news-latest-updated, .news-area .news-right-column li.li-categories{
        font-size: 0.861rem;
    }

    /*** BEGIN NEWS CONTENT CSS SETTING ***/
    .news-content-area .news-content-left-column h3 {
        font-size: 1.476225rem;
    }
    .news-content-area .news-content-left-column li.li-post-time, .news-content-area .news-content-left-column li.li-post-tag{
        font-size: 0.69710625rem;
    }
    .news-content-area .news-content-left-column li, .news-content-area .news-content-left-column li.content{
        font-size: 0.86113125rem;
    }
    .news-content-area .news-content-left-column .content-06 ul.fee li {
        font-size: 0.69710625rem;
    }
    .news-content-area .news-content-left-column .content-06 ul.fee li.li-fee-03 {
        width: 10%;
    }
    .news-content-area .news-content-left-column .content-06 ul.f-01 li.li-fee-04{
        width: 14%;
    }
    .news-content-area .news-content-left-column .content-06 ul.f-01 li.li-fee-05{
        width: 20%;
    }
    .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: 24%;
    }
    .news-content-area .news-content-right-column h3 {
        font-size: 1.476225rem;
    }
    .news-content-area .news-content-right-column li.li-news-content-latest-updated, .news-content-area .news-content-right-column li.li-categories{
        width: 99%;
        font-size: 0.86113125rem;
    }

    /*** BEGIN ABOUT CSS SETTING ***/
    .main-visual-subscriptions-about {
        height: 106px;
        background: url(../image/bg_news_banner.png) 10% 0 no-repeat;
        background-size: 153%;
    }
    .main-visual-subscriptions-about .page-title {
        font-size: 2.421rem;
        margin: 7% 0 0 3%;
    }
    .about-area h2{
        font-size: 1.5rem;
    }
    .about-area .about-slide-desc-block-06 {
        padding-top: 0;
    }
        .about-area .about-slide-desc-block-06 ul {
            height: 19rem;
        }
        .about-area .about-slide-desc-block-06 li.li-join-01 {
            font-size: 1.1358rem;
        }
        .about-area .about-slide-desc-block-06 li.li-join-03 {
            font-size: 0.8172rem;
        }
        .about-area .about-slide-desc-block-06 ul.ul-join-01 li.li-join-02{
            margin: 17% 0 7% 30%;
        }
        .about-area .about-slide-desc-block-06 ul.ul-join-02 li.li-join-02{
            margin: 12% 0 12% 34%;
        }
        .about-area .about-slide-desc-block-06 ul.ul-join-03 li.li-join-02, .about-area .about-slide-desc-block-06 ul.ul-join-04 li.li-join-02{
            margin: 12% 0 12% 28%;
        }
        .about-area .about-slide-desc-block-06 ul.ul-join-03, .about-area .about-slide-desc-block-06 ul.ul-join-04{
            height: 22rem;
        }
        .about-area .about-slide-desc-block-06 ul.ul-join-05 {
            height: 21rem;
        }
        .about-area .about-slide-desc-block-06 ul.ul-join-05 li.li-join-02{
            margin: 7% 0 5% 38%;
        }

    /*** BEGIN MEMBER MY VIDEOS CSS SETTING ***/
    .account-info-area ul.ul-my-video .div-video-block {
        width: 96%;
        height: 325px;
        margin: 0 auto 6%;
    }
        .account-info-area ul.ul-my-video .div-video-block li.li-video-title {
            width: 92%;
            margin-left: 1rem;
        }
    .video-watched-status {
        width: 25%;
    }

    /*** BEGIN MEMBER MY VIDEOS POP-UP UI CSS SETTING ***/
    .account-info-area ul.ul-my-video iframe {
        height: 201px !important;
    }

    /*** BEGIN MEMBER MY PAYMENT CSS SETTING ***/
    .account-info-area li.li-mpc-item {
        margin: 5% auto;
        padding: 2% 0 3.6%;
    }
        .account-info-area li.li-mpc-item .div-as-span {
            overflow: hidden;
            vertical-align: top;
        }
        .span-row-count {
            width: 15%;
            text-align: left !important;
        }
        .span-course-title {
            width: 55%;
            font-weight: 500;
            line-height: 150% !important;
            text-align: left !important;
            margin-left: 2% !important;
        }
        .span-teach-name {
            width: 25%;
        }
        .span-enroll-date {
            width: 30%;
            text-align: left !important;
            margin-top: 5% !important;
        }
        .span-course-toll {
            width: 12%;
            margin-top: 5% !important;
        }
        .span-payment-status {
            width: 45%;
            text-align: left !important;
            line-height: 100% !important;
            margin-top: 5% !important;
            margin-left: 5% !important;
        }

}

@media (max-width: 375px) {
    
    /*** BEGIN TEMPLATE MAIN COMPONENT -- HEADER CSS SETTING ***/
    #cookie-collect-inform {
        font-size: 0.75rem;
        font-weight: 300;
    }
        #cookie-collect-inform .cookie-accept-btn {
            width: 14.5%;
            font-size: 0.75rem;
        }
    .main-nav {
        width: 100%;
    }
    .mobile-menu-btn {
        margin: 0 0.75rem 0 0.75rem;
    }
    #logo-nsysu {
        width: 88%;
    }
        #logo-nsysu ul.logo-nsysu-ul-01 {
            display: none;
        }
        #logo-nsysu .nsysu-chinese{
            font-size: 0.9963rem;
        }
        #logo-nsysu .nsysu-english{
            font-size: 0.55323rem;
        }
    #logo-text {
        width: 88%;
        font-size: 1.5rem;
        margin: 0.5% 0 0.5% 11%;
    }

    /*** BEGIN TEMPLATE MAIN COMPONENT -- FOOTER CSS SETTING ***/

    /*** BEGIN HOME CSS SETTING ***/
    .home-slide-banner {
        height: 170px;
    }
    .home-slide-banner-text {
        width: 90%;
        margin: 3.5rem 0 0 0;
    }
    .home-slide-banner-text h2 {
        font-size: 1.62rem;
    }
    .home-slide-about-us .desc-block-07-desc{
        margin: 0 0 6.5%;
    }
    .home-slide-about-us .about-more {
        width: 28%;
    }
    .home-slide-course-lists ul {
        height: 20.35rem;
    }
        .home-slide-course-lists li.li-course-01 {
            margin: 0 auto 0.5rem;
        }
        .home-slide-course-lists li.li-course-02 {
            margin: 0 auto 0.5rem;
        }
        .home-slide-course-lists li.li-more-btn {
            margin: 1rem auto 0;
        }
    .home-slide-news ul:nth-of-type(2n-1) {
        margin: 0 2% 3% 0;
    }
    .home-slide-news li.li-news-pic img {
        width: 130%;
    }
    .home-slide-news li.li-news-01 {
        font-size: 0.7745625rem;
    }
    .home-slide-news li.li-news-02 {
        font-size: 0.6834375rem;
    }
    .home-slide-faq {
        /*padding: 1.5rem 0 1.5rem;*/
        height: 28px;
    }
        .home-slide-faq .ul-faq-04 li.li-faq-01 {
            font-size: 1.0460353203rem;
        }
        .home-slide-faq .ul-faq-04 li.li-faq-02 {
            font-size: 1.0460353203rem;
        }
        .home-slide-faq .ul-faq-05 li.li-faq-01 {
            font-size: 1.0460353203rem;
        }

    /*** BEGIN FEATURES CSS SETTING ***/
    .features-area .feature-slide-desc-block-01 {
        margin-top: 4%;
    }
    .features-area .feature-slide-desc-block-02 {
        margin-bottom: 6%;
    }
    .features-area .feature-slide-desc-block-03 {
        margin-bottom: 6%;
    }
    .features-area .feature-slide-desc-block-05 ul {
        float: none;
        display: block;
        width: 100%;
        margin: 0 auto 5%;
    }
        .features-area .feature-slide-desc-block-05 li.li-deco-pic {
            width: 50%;
            margin: 5% auto 0;
        }
        .features-area .feature-slide-desc-block-05 li.li-desc-title {
            margin: 2.5% auto;
        }

    /*** BEGIN HANYU APP INTRO CSS SETTING ***/
    .slide-01 {
        height: 433px;
    }
    .slide-02 {
        background-size: 270%;
    }
    .slide-03 {
    	height: 221px;
        background-size: 210%;
    }
    .slide-04-inline-block {
        width: 85%;
    }
    .slide-08-table li.li-tb-title-text {
		width: 11%;
		margin: 2.82% 2% 0;
	}
    	.title-text-format-actel {
        	width: 36% !important;
        	padding: 0 1.5% !important;
        }
	.slide-08-table li.li-tb-content-text {
		width: 11%;
		margin: 2.82% 2% 0;
	}
    	.text-format-actel {
    		width: 36% !important;
    	}

    /*** BEGIN COURSES CSS SETTING ***/
    .courses-area li.li-course-name {
        height: 72px;
    }
    	.courses-area .course-name-eng {
    		display: block;
    		width: 92%;
    		font-size: 0.813rem;
    		line-height: 150%;
    		margin: 3% auto 0;
    	}

    /*** BEGIN COURSE INTRO CSS SETTING ***/
    .course-intro-banner{
        height: 88px;
    }
    .course-switch li{
        width: 32.644%;
        font-size: 1.0161rem;
    }
    .course-intro-area .cia-left-column h2{
        font-size: 1.0161rem;
    }
        .course-intro-area .cia-left-column .course-title {
            font-size: 0.875rem;
        }
    .course-intro-area .cia-left-column li{
        font-size: 0.77499rem;
        padding: 1rem;
    }
    .course-intro-area .cia-left-column .desc-block-title li {
        padding: 0.5rem 0rem 0.5rem 1rem;
    }
    .course-intro-area .cia-left-column .desc-block-title li, .course-intro-area .cia-right-column h3, .course-intro-area .cia-right-column li{
        font-size: 0.86112rem;
    }
    .course-intro-area .cia-left-column .desc-block-title img.rotate {
        top: 0.7rem;
    }
    .course-intro-area .cia-left-column .desc-block-title img {
        padding: 0.7rem 1.25rem 0 0;
    }
    .course-intro-area .cia-course h3{
        font-size: 1.0161rem;
    }
        .course-intro-area .cia-course h3 span {
            font-size: 0.875rem !important;
        }
    .course-intro-area .cia-course .course-list .flex-info .item-course-title, .course-intro-area .cia-course .course-list .flex-info .item-course-content {
        font-size: 0.729rem;
    }
    .cia-enroll-class h2{
        font-size: 1.0161rem;
    }
    .cia-enroll-class ul {
        width: 49%;
        height: 24rem;
    }
    .cia-enroll-class ul.ul-enroll-03, .cia-enroll-class ul.ul-enroll-04 {
        height: 17rem;
    }
    .cia-enroll-class li.li-step {
        font-size: 1.51723125rem;
    }
    .cia-enroll-class li.li-enroll-img {
        margin: 10% 10%;
    }
    .course-intro-area .cia-central-qa-column .div-title-block h3 {
        font-size: 1.0161rem;
    }
    .course-intro-area .cia-central-qa-column .div-left-qa-list-block .faq-user-photo-block {
        width: 70px;
        height: 70px;
    }
    .course-intro-area .cia-central-qa-column .div-left-qa-list-block .faq-type-block {
        width: 72%;
        margin: 1.8% 0 0 1%;
    }
    .course-intro-area .cia-central-qa-column .div-left-qa-list-block .faq-title-block {
        width: 72%;
        margin: 1% 0 0 1%;
    }
    .course-intro-area .cia-central-qa-column .div-left-qa-list-block .faq-user-info-block {
        width: 72%;
        margin: 1% 0 0 1%;
    }
    .course-intro-area .cia-central-qa-column .div-left-qa-list-block .icon-faq-arrow {
        margin: 7.5% 0 0 0;
        width: 18px;
    }
    .world li {
        font-size: 1.04571rem;
    }
    .world .ul-world-01 li.li-world-02{
        margin: 0 1% 0 0;
    }

    /*** BEGIN COURSE INTRO :: ASYNC CSS SETTING ***/
    .course-intro-area .cia-left-column .async > li > span.async-deco-line {
        font-size: 0.813rem;
        margin: 0 2%;
    }
    .course-intro-area .cia-left-column .async > li > span.async-desc-title {
        font-size: 0.813rem;
    }

    /*** BEGIN COURSES_01 CSS SETTING ***/
    .courses-01-area {
        padding: 2.5rem 0;
    }
        .courses-01-area h2{
            font-size: 2.2rem;
        }
        .courses-01-area ul {
            float: none;
            display: block;
            width: 92%;
            height: 30rem;
            margin: 0 auto 1.75rem;
        }
            .courses-01-area li {
                padding: 0;
            }
                .courses-01-area li.li-course-name {
                    height: 2.5rem;
                    font-size: 1rem;
                }
                .courses-01-area li.li-course-name-eng {
                    font-size: 0.813rem;
                }
                .courses-01-area li.li-course-level {
                    font-size: 0.813rem;
                }
                .courses-01-area li.li-course-desc {
                    height: 3rem;
                    font-size: 0.813rem;
                }
                .courses-01-area li.li-course-price-info {
                    height: auto;
                }
                .courses-01-area li.li-more-btn {
                    font-size: 0.813rem;
                }

    /*** BEGIN COURSE INTRO 02 CSS SETTING ***/
    .main-visual-subscriptions .page-title {
        font-size: 1.35rem;
    }
    .course-intro-02-area .ci02-slide-desc-block-03 ul {
        float: none;
        display: block;
        width: 65%;
        height: 265px;
        margin: 0 auto 2rem;
    }
        .course-intro-02-area .ci02-slide-desc-block-03 li.li-deco-pic {
            margin: 0 auto;
        }
        .course-intro-02-area .ci02-slide-desc-block-03 li.li-desc-text {
            text-align: center;
            margin: 0.75rem auto 0;
        }
    .course-intro-02-area .ci02-slide-desc-block-04 h2 {
        margin: 0 0 2rem;
    }
    .course-intro-02-area .ci02-slide-desc-block-07 {
        padding: 2rem 0 1rem;
    }

    /*** BEGIN COURSE INTRO VIDEO CSS SETTING ***/
    #course-video iframe {
        width: 350px;
        height: 198px;
    }

    /*** BEGIN FAQ CSS SETTING ***/
    .faq-area .faq-left-column li.li-faq-title {
        font-size: 0.875rem;
        margin-bottom: 1rem;
    }
    .faq-area .faq-left-column li.li-faq-desc {
        font-size: 0.813rem;
        font-weight: 300;
        line-height: 180%;
    }

    /*** BEGIN BLOG CSS SETTING ***/
    .blog-area .blog-left-column .blog-list iframe {
        width: 317px;
        height: 185px;
    }

    /*** BEGIN BLOG CONTENT CSS SETTING ***/
    .blog-content-area .blog-content-left-column h3 {
        font-size: 1.2025em;
    }
    .blog-content-area .blog-content-left-column .blog-content-image {
        height: 178px;
    }
        .blog-content-area .blog-content-left-column .blog-content-image iframe {
            height: 178px;
        }
    .blog-content-area .blog-content-left-column li.li-post-time {
        display: none;
    }
    .blog-content-area .blog-content-left-column li.li-post-tag {
        float: left;
        width: 100%;
        text-align: left;
    }
        .blog-content-area .blog-content-left-column li.li-post-tag img {
            margin: 0 0.25rem 0 0;
        }
    .blog-content-area .blog-content-right-column {
        margin: 2rem auto 0;
    }

    /*** BEGIN MEMBER MY QA LIST CSS SETTING ***/
    .account-info-area ul.ul-my-courses-qa .div-qa-list-block .faq-type-block {
        width: 73%;
    }
    .account-info-area ul.ul-my-courses-qa .div-qa-list-block .faq-title-block {
        width: 77%;
    }
    .account-info-area ul.ul-my-courses-qa .div-qa-list-block .faq-user-info-block {
        width: 77%;
    }

    /*** BEGIN NEWS CSS SETTING ***/
    .main-visual-subscriptions-news {
        height: 110px;
    }
    .main-visual-subscriptions-news .page-title{
        margin: 4% 0 0 6%;
    }
    .news-area .news-left-column .news-list iframe {
        width: 330px;
        height: 186px;
    }

    /*** BEGIN NEWS CONTENT CSS SETTING ***/
    .news-content-area .news-content-left-column h3 {
        font-size: 1.3286025rem;
    }
    .news-content-area .news-content-left-column li.li-post-time {
        width: 100%;
    }
    .news-content-area .news-content-left-column li, .news-content-area .news-content-left-column li.content{
        font-size: 0.775018125rem;
    }
    .news-content-area .news-content-left-column .content-06 ul.fee li.li-fee-03 {
        width: 11%;
    }
    .news-content-area .news-content-left-column .content-06 ul.f-01 li.li-fee-04{
        width: 14%;
        padding: 2% 1.5%;
    }
    .news-content-area .news-content-left-column .content-06 ul.f-01 li.li-fee-05{
        width: 20%;
        padding: 2% 1.5% 2% 0.5%;
    }
    .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: 23%;
    }
    .news-content-area .news-content-right-column h3 {
        font-size: 1.3286025rem;
    }
    .news-content-area .news-content-right-column li.li-news-content-latest-updated, .news-content-area .news-content-right-column li.li-categories{
        font-size: 0.775018125rem;
    }

    /*** BEGIN ABOUT CSS SETTING ***/
    .main-visual-subscriptions-about {
        height: 96px;
    }
    .main-visual-subscriptions-about .page-title {
        font-size: 2.1789rem;
        margin: 7% 0 0 3%;
    }
    .about-area h2{
        font-size: 1.75rem;
    }
    .about-area .about-slide-desc-block-01 {
        padding: 2.5rem 0;
    }
        .about-area .about-slide-desc-block-01 h2 {
            margin: 0 0 1.5rem;
        }
        .about-area .about-slide-desc-block-01 .desc-block-01-desc{
            font-size: 0.775rem;
        }
    .about-area .about-slide-desc-block-03 > .content-position-01 {
        padding-bottom: 3%;
    }
        .about-area .about-slide-desc-block-03 p, .about-area .about-slide-desc-block-04 p, .about-area .about-slide-desc-block-05 p {
            font-size: 0.8289rem;
        }
        .about-area .about-slide-desc-block-03 .desc-block-03-left {
            padding: 2.7% 2% 6.7%;
        }
    .about-area .about-slide-desc-block-04 > .content-position-01 {
        padding-bottom: 3%;
    }
        .about-area .about-slide-desc-block-04 .desc-block-04-right {
            padding: 2.7% 2% 6.7%;
        }
    .about-area .about-slide-desc-block-05 > .content-position-01 {
        padding-bottom: 3%;
    }
        .about-area .about-slide-desc-block-05 .desc-block-05-left {
            padding: 2.7% 2% 6.7%;
        }
    .about-area .about-slide-desc-block-06 h2 {
        margin-bottom: 2.5rem;
    }
    .about-area .about-slide-desc-block-06 .why_us .item-title {
        font-size: 1.3122rem;
    }
    .about-area .about-slide-desc-block-06 .why_us .item-content {
        font-size: 0.729rem;
    }

    /*** BEGIN MEMBER MY VIDEOS CSS SETTING ***/
    .account-info-area ul.ul-my-video .div-video-block {
        width: 98%;
        height: 300px;
    }
    .account-info-area ul.ul-my-video a img {
        width: 5.75%;
    }

    /*** BEGIN MEMBER MY VIDEOS POP-UP UI CSS SETTING ***/
    .account-info-area ul.ul-my-video iframe {
        height: 182px !important;
    }

}

@media (max-width: 360px) {

    /*** BEGIN TEMPLATE MAIN COMPONENT -- HEADER CSS SETTING ***/
    #cookie-collect-inform .cookie-accept-btn {
        display: block;
        width: 17.5%;
        margin: 2% 0;
    }
    .mobile-menu-btn {
        margin: 0 0.5rem 0 0.5rem;
    }
    #nav-language li{
        font-size: 0.6834375rem;
    }
    #logo-text {
        margin: 1% 0 2.5% 5%;
    }

    /*** BEGIN TEMPLATE MAIN COMPONENT -- FOOTER CSS SETTING ***/
    #footer .footer-nav-links li.li-nav-sub {
        margin: 0 1.15rem 0 0;
    }

    /*** BEGIN HOME CSS SETTING ***/
    .home-slide-banner {
        height: 164px;
    }
    .home-slide-banner-text h2 {
        font-size: 1.458rem;
    }
    .home-slide-course-lists ul {
        height: 17rem;
    }
        .home-slide-course-lists li {
            width: 94%;
        }
            .home-slide-course-lists li.li-course-01 {
                font-size: 0.8505rem;
                margin: 0 auto 0.75rem;
            }
            .home-slide-course-lists li.li-course-02 {
                font-size: 0.69710625rem;
                margin: 0 auto 0.75rem;
            }
            .home-slide-course-lists li.li-course-03 {
                font-size: 0.662640496875rem;
            }
            .home-slide-course-lists .course-lists-more{
                margin: 1rem 0 0 7.8rem;
                font-size: 0.8968066875rem;
            }
    /* .home-slide-join-class ul {
        width: 42%;
    }
        .home-slide-join-class ul.ul-join-03{
            width: 42%;
        }
        .home-slide-join-class ul.ul-join-05{
            height: 19rem;
        }
        .home-slide-join-class ul.ul-join-05 li.li-join-02 {
            margin: 2rem 0 0 1.6rem;
        } */
    .home-slide-news li.li-news-pic img {
        width: 136%;
    }
    .home-slide-news ul.news-lists-more {
        width: 33%;
    }
    .home-slide-faq {
        background-size: 160%;
    }
        .home-slide-faq .ul-faq-04 li.li-faq-01{
            font-size: 0.94143178827rem;
        }
        .home-slide-faq .ul-faq-04 li.li-faq-02{
            font-size: 0.94143178827rem;
        }
        .home-slide-faq .ul-faq-05 li.li-faq-01{
            font-size: 0.94143178827rem;
        }
    
    /*** BEGIN HANYU APP INTRO CSS SETTING ***/
    .slide-01 {
        height: 414px;
    }
    .slide-02 {
        height: 530px;
        background-size: 300%;
    }
    .slide-03 {
        background-size: 250%;
    }
        .slide-03-center {
            margin: 5% auto;
        }
    .slide-08-table li.li-tb-title-text {
        width: 12%;
    }

    /*** BEGIN COURSES_01 CSS SETTING ***/
    .courses-01-area {
        padding: 3.30rem 0;
    }
        .courses-01-area h2{
            font-size: 2rem;
        }
        .courses-01-area ul {
            height: 29.7rem;
        }
            .courses-01-area img {
                margin-bottom: 0.9396rem;
            }
            .courses-01-area li.li-course-name {
                height: 2.5rem;
                font-size: 0.938rem;
                margin: 0 auto 0.85rem;
            }
            .courses-01-area li.li-course-desc {
                height: 2.85rem;
                letter-spacing: -0.02rem;
            }

    /*** BEGIN COURSE INTRO CSS SETTING ***/
    .course-intro-banner{
        height: 85px;
    }
    .course-switch li{
        width: 32.614%;
        font-size: 0.91449rem;
    }
    .course-intro-area .cia-left-column h2{
        font-size: 0.91449rem;
        margin: 0 0 3% 0;
    }
    .course-intro-area .cia-course h3{
        font-size: 0.91449rem;
    }
    /* .course-intro-area .cia-course li {
        padding: 3.57% 0;
    }
    .course-intro-area .cia-course .course-list ul.ul-block-buy {
        padding: 18.405% 0;
        top: -4.5rem;
    } */
    .course-intro-area .cia-central-qa-column .div-title-block h3 {
        font-size: 0.91449rem;
    }
    .course-intro-area .cia-central-qa-column .div-left-qa-list-block .faq-type-block {
        width: 65%;
        margin: 1% 0 0 1%;
    }
    .course-intro-area .cia-central-qa-column .div-left-qa-list-block .faq-title-block {
        width: 67%;
        margin: 1% 0 0 1%;
    }
    .course-intro-area .cia-central-qa-column .div-left-qa-list-block .faq-user-info-block {
        width: 75%;
        margin: 1% 0 0 1%;
    }
    .course-intro-area .cia-central-qa-column .div-left-qa-list-block .icon-faq-arrow {
        margin: 2% 0 0 0;
    }
    .world li {
        font-size: 0.941139rem;
    }


    /*** BEGIN MEMBER MY COURSES CSS SETTING ***/
    .account-info-area li.li-mcc-no-data-text {
        width: 85%;
    }

    /*** BEGIN FREE COURSE SURVEY CSS SETTING ***/
    .fc-survey-area .fcs-survey-content-area ul {
        margin: 5% auto 8%;
    }

    /*** BEGIN BLOG CSS SETTING ***/
    .blog-area .blog-left-column .blog-list iframe {
        width: 304px;
        height: 185px;
    }
    .blog-area .blog-left-column .blog-list li.li-title{
        font-size: 0.938rem;
    }
    .blog-area .blog-left-column .blog-list li.li-content, .blog-area .blog-left-column .blog-list li.li-author-time{
        font-size: 0.813em;
    }
    .blog-area .blog-left-column .blog-list li.li-author-time img{
        height: 13px;
        width: 13px;
    }

    /*** BEGIN BLOG CONTENT CSS SETTING ***/
    .blog-content-area .blog-content-left-column h3 {
        font-size: 1.1525em;
    }
    .blog-content-area .blog-content-left-column .blog-content-image {
        height: 171px;
    }
        .blog-content-area .blog-content-left-column .blog-content-image iframe {
            height: 171px;
        }

    /*** BEGIN MEMBER MY QA LIST CSS SETTING ***/
    .account-info-area ul.ul-my-courses-qa .div-qa-list-block .faq-title-block {
        width: 75%;
    }
    .account-info-area ul.ul-my-courses-qa .div-qa-list-block .faq-user-info-block {
        width: 75%;
    }
    .account-info-area ul.ul-my-courses-qa .div-qa-list-block li.li-faq-desc .qa-upload-img {
        width: 85%;
    }
    
    /*** BEGIN NEWS CSS SETTING ***/
    .main-visual-subscriptions-news {
        height: 105px;
    }

    /*** BEGIN NEWS CONTENT CSS SETTING ***/
    .news-content-area .news-content-left-column li, .news-content-area .news-content-left-column li.content{
        font-size: 0.6975163125rem;
    }
    .news-content-area .news-content-left-column .content-06 ul:not(.f-02) li.li-fee-01{
        width: 16%;
    }
    .news-content-area .news-content-left-column .content-06 ul.f-01 li.li-fee-02{
        width: 16%;
    }
    .news-content-area .news-content-left-column .content-06 ul.fee li.li-fee-03 {
        padding: 2% 0.5% 2% 1.5%;
    }
    .news-content-area .news-content-left-column .content-06 ul.f-01 li.li-fee-04{
        width: 15%;
        padding: 2% 1.5%;
    }
    .news-content-area .news-content-left-column .content-06 ul.f-02 {
        width: 19.99%;
    }
    .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: 80%;
    }
    .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: 5.435% 2%;
    }
    .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: 24%;
    }
    .news-content-area .news-content-right-column li.li-news-content-latest-updated, .news-content-area .news-content-right-column li.li-categories{
        font-size: 0.6975163125rem;
    }

    /*** BEGIN ABOUT CSS SETTING ***/
    .main-visual-subscriptions-about {
        height: 92px;
    }
    .about-area h2{
        font-size: 1.3rem;
    }
    .about-area .about-slide-desc-block-06 ul {
        height: 19rem;
    }
    .about-area .about-slide-desc-block-06 ul.ul-join-01 li.li-join-02{
        margin: 17% 0 7% 27%;
    }
    .about-area .about-slide-desc-block-06 ul.ul-join-02 li.li-join-02{
        margin: 12% 0 12% 31%;
    }
    .about-area .about-slide-desc-block-06 ul.ul-join-03 li.li-join-02, .about-area .about-slide-desc-block-06 ul.ul-join-04 li.li-join-02{
        margin: 12% 0 12% 25%;
    }
    .about-area .about-slide-desc-block-06 ul.ul-join-03, .about-area .about-slide-desc-block-06 ul.ul-join-04{
        height: 22rem;
    }
    .about-area .about-slide-desc-block-06 ul.ul-join-05 {
        height: 21rem;
    }
    .about-area .about-slide-desc-block-06 ul.ul-join-05 li.li-join-02{
        margin: 7% 0 5% 37%;
    }

    /*** BEGIN MEMBER MY VIDEOS POP-UP UI CSS SETTING ***/
    .account-info-area ul.ul-my-video iframe {
        height: 171px !important;
    }

}