/***
 *** MAIN STRUCTURE CSS Document
 ***
 ***
 *** - CSS RESET
 *** - GLOBAL SETUP
 *** - MAIN STRUCTRUE
 *** - FONT TYPE
 *** - TEMPLATE MAIN COMPONENT
 *** - -- HEADER
 *** - -- CONTAINTER
 *** - -- TABLE
 *** - -- INPUT UI
 *** - -- FOOTER
 ***
 ***/


/***
 *** BEGIN CSS RESET
 ***/


/***
 *** BEGIN GLOBAL SETUP
 ***/

@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+TC');

* {
    margin: 0;
    padding: 0;
}
html {
    height: 100%;
}
body {
    width: 100%;
    height: 100%;
    background: #FFF;
    font-size: 16px;
    font-family: Noto Sans TC, Microsoft JhengHei, Apple LiGothic, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}
a:link, a:visited, a:hover {
    text-decoration: none;
}


/***
 *** BEGIN MAIN STRUCTURE
 ***/

#wraper {
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    padding: 0;
}
#header {
    /*position: relative;*/
    z-index: 999;
    width: 100%;
    background-color: #FFF;
    margin: 0 auto;
    padding: 0;
}
#header-hanyu-app-intro {
    position: absolute;
    z-index: 999;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}
#container {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    padding: 0;
}
#footer {
    width: 100%;
    overflow: hidden;
    background: url(../image/bg_footer.png) 0 0 repeat;
    background-size: 100%;
    margin: 0 auto;
    padding: 0;
}
.content-position-01 {
    clear: both;
    /*width: 960px;*/
    width: 1180px;
    /*overflow: hidden;*/
    margin: 0 auto;
}


/***
 *** FONT TYPE
 ***/


/***
 *** BEGIN TEMPLATE MAIN COMPONENT
 ***/

/*** BEGIN TEMPLATE MAIN COMPONENT -- HEADER ***/
#cookie-collect-inform {
    position: fixed;
    z-index: 9999;
    bottom: 0;
    width: 100%;
    overflow: hidden;
    /*background: #F8AE01;*/
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f8ae01+0,fcdea1+75,fcdea1+100 */
    background: #f8ae01; /* Old browsers */
    background: -moz-linear-gradient(top,  #f8ae01 0%, #fcdea1 85%, #fcdea1 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #f8ae01 0%,#fcdea1 85%,#fcdea1 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #f8ae01 0%,#fcdea1 85%,#fcdea1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8ae01', endColorstr='#fcdea1',GradientType=0 ); /* IE6-9 */
    color: #333;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 150%;
    margin: 0 auto;
    padding: 1.25% 0 0.75%;
    border-top: #FFF 1px solid;
    box-shadow: #333 0 -3px 9px;
}
    #cookie-collect-inform .cookie-accept-btn {
        display: inline-block;
        width: 8%;
        overflow: hidden;
        background: #FCDEA1;
        color: #333;
        font-size: 0.813em;
        font-weight: 500;
        letter-spacing: 0.05em;
        text-align: center;
        margin: 0.5% 0 0 1.15%;
        padding: 0.527% 0;
        border: #888 1px solid;
        border-radius: 6px;
        vertical-align: middle;
    }
#header.sticky{
    position: fixed;
    top: 0;
    border-bottom: #025EAD 2px solid;
    box-shadow: RGBA( 0, 0, 0, 0.25 ) 0 6px 12px;
}
.main-nav {
    position: relative;
    /*z-index: 1999;
    overflow: hidden;*/
}
.mobile-menu-btn {
    display: none;
    float: left;
    width: 5%;
    overflow: hidden;
    margin: 3.5% 2.5% 0 0;
    padding: 0;
}
    .mobile-menu-btn img {
        width: 100%;
    }
    .mmb-trans {
        margin-top: 2%;
        transition: margin 1s;
    }
#logo {
    float: left;
    display: inline-block;
    width: 8.813%;
    margin: 3.058% 0;
}
    #logo img {
        width: 100%;
    }
#logo-text {
    float: left;
    display: inline-block;
    width: 53%;
    height: 55px;
    overflow: hidden;
    color: #000;
    font-size: 3.375rem;
    font-weight: 600;
    line-height: 100%;
    text-align: left;
    margin: 1rem 0 1.75rem;
    padding: 0;
}
    #logo-text.trans {
        width: 25%;
        transition: width 1s;
        font-size: 1.15em;
        transition: font-size 1s;
        margin: 1.400% 0;
        transition: margin 1s;
    }
    #logo-text a:link, #logo-text a:visited, #logo-text a:hover {
        color: #000;
    }

/*** BEGIN TEMPLATE MAIN COMPONENT -- MAIN MENU FOR HOME ***/
#nav_buttons {
    position: relative;
    z-index: 999;
    float: right;
    width: 55%;
    overflow: hidden;
    margin: 3.23% 0 0;
    padding: 0;
}	
    #nav_buttons ul {
        clear: both;
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    #nav_buttons li {
        float: right;
        width: auto;
        text-align: left;
        color: #FFF;
        font-size: 0.938em;
        letter-spacing: 1px;
        margin: 0;
        padding: 0 2.75%;
    }
        #nav_buttons li a:link, #nav_buttons li a:visited, #nav_buttons li a:hover {
            color: #FFF;
        }

/*** nsysu ***/
#nav-language {
    /*position: relative;
    z-index: 999;*/
    width: 100%;
    overflow: hidden;
    background-color: #284fa9;
    margin: 0 auto;
    padding: 0;
}
#nav-language ul {
    width: 100%;
    /*height: 63px;*/
    overflow: hidden;
    margin: 0 auto;
    padding: 0;
}
#nav-language li{
    float: right;
    width: auto;
    color: #FFF;
    font-size: 0.9375rem;
    list-style: none;
    /* padding: 1rem; */
    margin: 1.7% 1.2% 1%;
}
    #nav-language li a:link, #nav-language li a:visited, #nav-language li a:hover {
        color: #FFF;
    }
    #nav-language li.li-on-language-mode {
        border-bottom: 1px solid #FFF;
    }
        #nav-language li.li-on-language-mode a {
            position: relative;
            top: -3px;
        }
    #nav-language li.li-fb {
        width: 2.3%;
    }
        #nav-language li.li-fb img {
            width: 100%;
        }
    
#logo-nsysu {
    width: 100%;
    overflow: hidden;
    margin: 1rem 0 0;
    padding: 0;
}
    #logo-nsysu ul {
        display: inline-block;
        vertical-align: middle;
    }
        #logo-nsysu ul.logo-nsysu-ul-01 {
            width: 5.5%;
        }
        #logo-nsysu ul.logo-nsysu-ul-02 {
            width: auto;
            margin: 0 0 0 0.8%;
        }
    #logo-nsysu li {
        list-style: none;
    }
    #logo-nsysu img {
        width: 100%;
    }
    #logo-nsysu .nsysu-chinese {
        color: #000;
        font-size: 1.6875rem;
        font-weight: 600;
        letter-spacing: 0.1rem;
    }
    #logo-nsysu .nsysu-red {
        color: #ab4443;
    }
    #logo-nsysu .nsysu-english {
        color: #808080;
        font-size: 0.9375rem;
    }

/*** BEGIN TEMPLATE MAIN COMPONENT -- MAIN MENU FOR CONTENT PAGE ***/
#nav-buttons-cp {
    position: relative;
    z-index: 3333;
    float: right;
    width: 47%;
    /*overflow: hidden;*/
    margin: 3% 0 0;
    padding: 0;
}   
    #nav-buttons-cp.trans {
        margin: 1.40% 0 0;
        transition: margin 1s;
    }
    #nav-buttons-cp ul.drop-down-menu {
        clear: both;
        width: 100%;
        height: 33px;
        overflow: hidden;
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    #nav-buttons-cp ul.drop-down-menu li {
        float: right;
        width: auto;
        height: 28px;
        text-align: left;
        color: #000;
        font-size: 1.0625rem;
        font-weight: 600;
        margin: 1% 3% 0;
        /*padding: 0 0.85rem;*/
    }
        /*#nav-buttons-cp li.trans {
            font-size: 0.90em;
            transition:font-size 1s;
            letter-spacing: 0.7px;
            transition:letter-spacing 1s;
            margin: 0.7% 0 0;
            transition:margin 1s;
            padding: 0 2.25%;
            transition:padding 1s;
        }*/
        #nav-buttons-cp li a:link, #nav-buttons-cp li a:visited, #nav-buttons-cp li a:hover {
            color: #000;
        }


        /*** BEGIN COURSES DROP-DOWN MENU ***/
        #nav-buttons-cp ul.drop-down-menu ul {
            display: none;   /*隱藏次選單*/
            border: #ccc 1px solid;
            position: absolute;
            z-index: 99;
            top: 33px;
            left: 36%;
            width: 180px;
            background: #FFF;
            border-radius: 6px;
        }
        #nav-buttons-cp ul.drop-down-menu li:hover>ul {
          /* 滑鼠滑入展開次選單*/
          display: block;
        }
            #nav-buttons-cp ul.drop-down-menu ul li {
                width: 96%;
                font-size: 0.938rem;
                font-weight: 500;
                text-align: center;
                margin: 0 auto;
                padding: 6% 2%;
                border-bottom: #ccc 1px solid;
                list-style: none;
            }
                #nav-buttons-cp li.li-sub-option a:hover {
                    color: #FFF;
                }
                #nav-buttons-cp ul.drop-down-menu ul li.li-sub-option:hover {
                    background: #284fa9;
                }
                #nav-buttons-cp ul.drop-down-menu ul li:first-child {
                    border-bottom: none;
                    border-top-right-radius: 6px;
                    border-top-left-radius: 6px;
                }
                #nav-buttons-cp ul.drop-down-menu ul li:last-child {
                    border-bottom: none;
                    border-bottom-right-radius: 6px;
                    border-bottom-left-radius: 6px;
                }
                    /*第三層以後的選單出現位置與第二層不同*/
                    /*#nav-buttons-cp ul.drop-down-menu ul ul {
                        z-index: 999;
                        top: 10px;
                        left: 90%;
                        background: #FFF;
                    }*/
        /*** END COURSES DROP-DOWN MENU ***/


        #nav-buttons-cp li.li-login-btn {
            height: 23px !important;
            background: #a33030;
            color: #FFF;
            font-size: 0.938rem !important;
            font-weight: 500 !important;
            margin: 0 0 0 2.5% !important;
            padding: 0.85% 3% !important;
            border-radius: 22px;
        }
            #nav-buttons-cp li.li-login-btn.trans {
                font-size: 0.85em;
                transition:font-size 1s;
                margin: 0 2.25%;
                transition:margin 1s;
                padding: 0.7% 2.1%;
                transition:padding 1s;
            }
        /*#nav-buttons-cp li:not(.li-login-btn) a{
            display: inline-block;
            transform: translateY(0px);
            transition: .3s
        }
        #nav-buttons-cp li:not(.li-login-btn) a:hover{
            transform: translateY(-5px);
        }*/
            #nav-buttons-cp li.li-login-btn a:link, #nav-buttons-cp li.li-login-btn a:visited, #nav-buttons-cp li.li-login-btn a:hover {
                color: #FFF;
            }
        #nav-buttons-cp li.li-language-switch, #nav-buttons-cp li.li-language-switch a:link, #nav-buttons-cp li.li-language-switch a:visited, #nav-buttons-cp li.li-language-switch a:hover {
            color: #005ead;
        }
        .icon-language-switch-arrow {
            float: right;
            display: inline-block;
            width: 25%;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }
            .icon-language-switch-arrow img {
                width: 100%;
                vertical-align: middle;
            }
    .member-setting-menu {
        position: absolute;
        z-index: 999;
        top: 142px;
        right: -35px;
        display: none;
        width: 120px;
        overflow: hidden;
        background: #FFF;
        padding: 0;
        border: #025EAD 1px solid;
        border-radius: 6px;
    }
        .member-setting-menu ul.ul-msm {
            width: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }
        .member-setting-menu li.li-msm {
            width: 100%;
            overflow: hidden;
            color: #025EAD;
            font-size: 0.813em;
            text-align: center;
            /*margin: 0;
            padding: 8% 0;*/
            border-bottom: #025EAD 1px solid;
            list-style: none;
        }
            .member-setting-menu li.li-msm a:link, .member-setting-menu li.li-msm a:visited {
                display: block;
                width: 100%;
                color: #025EAD;
                text-decoration: none;
                margin: 0;
                padding: 8% 0;
            }
            .member-setting-menu li.li-msm a:hover {
                display: block;
                width: 100%;
                background: #025EAD;
                color: #FFF;
                text-decoration: none;
                margin: 0;
                padding: 8% 0;
            }
        
/*** BEGIN TEMPLATE MAIN COMPONENT -- MAIN MENU FOR SCREEN SIZE UNDER 480px ***/
#main-nav-area-for-su480px {
    clear: both;
    position: fixed;
    z-index: 9999;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #025EAD;
    background: RGBA( 2, 94, 173, 0.96 );
    margin: 0;
    padding: 0;
    border-top: #F8AE01 3px solid;
}
	#main-nav-area-for-su480px ul {
            width: 100%;
            overflow: hidden;
            margin: 3% auto;
            padding: 0;
	}
            #main-nav-area-for-su480px li {
                list-style: none;
            }
            #main-nav-area-for-su480px li.li-mobile-menu-close {
                float: right;
                width: 3%;
                margin: 1% 7% 1% 0;
            }
                #main-nav-area-for-su480px li.li-mobile-menu-close img {
                    width: 100%;
                }
            #main-nav-area-for-su480px li.li-mo {
                clear: both;;
                width: 85%;
                overflow: hidden;
                color: #FFF;
                font-size: 0.875em;
                text-align: center;
                margin: 3% auto 1%;
                padding: 1.5% 0;
                border: #FFF 1px solid;
            }
                #main-nav-area-for-su480px li.li-mo a:link, #main-nav-area-for-su480px li.li-mo a:visited, #main-nav-area-for-su480px li.li-mo a:hover {
                    color: #FFF;
                }
            #main-nav-area-for-su480px li.li-mo-sub {
                clear: both;;
                width: 85%;
                overflow: hidden;
                color: #FFF;
                font-size: 0.875em;
                text-align: center;
                margin: 1.5% auto 1%;
                padding: 1.5% 0;
                border-bottom: #FFF 1px dotted;
            }
                #main-nav-area-for-su480px li.li-mo-sub a:link, #main-nav-area-for-su480px li.li-mo-sub a:visited, #main-nav-area-for-su480px li.li-mo-sub a:hover {
                    color: #FFF;
                }
            #main-nav-area-for-su480px li.li-so {
                clear: both;;
                width: 50%;
                overflow: hidden;
                color: #FFF;
                font-size: 0.75em;
                letter-spacing: 1px;
                text-align: center;
                margin: 2.5% auto;
                /*padding: 0 2.3%;*/
                padding: 0;
            }
                #main-nav-area-for-su480px li.li-so a:link, #main-nav-area-for-su480px li.li-so a:visited, #main-nav-area-for-su480px li.li-so a:hover {
                    color: #FFF;
                }
    

/*** BEGIN TEMPLATE MAIN COMPONENT -- CONTAINER ***/
#facebox .popup {
    border: none !important;
}
#facebox .content {
    width: auto !important;
    padding: 0 !important;
}
.page-title {
    color: #31867e;
    font-size: 1.8em;
    font-weight: 500;
    margin: 6% auto 4.6%;
    padding: 0 0 1.3%;
    border-bottom: #DCDCDD 1px solid;
}
    .page-title .seperator-01 {
        color: #DDD;
        font-size: 0.875em;
        font-weight: 100;
        vertical-align: text-top;
    }


/*** BEGIN TEMPLATE MAIN COMPONENT -- TABLE ***/
.row {
    clear: both;
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    padding: 1.35% 0;
    border-bottom: #DCDCDD 1px dotted;
}
.column {
    float: left;
    display: inline-block;
    overflow: hidden;
    margin: 0;
    padding: 0.75% 0;
}

/*** BEGIN TEMPLATE MAIN COMPONENT -- INPUT UI ***/
.input-ui-text-01 {
    display: block;
    width: 90%;
    font-size: 1em;
    color: #000;
    margin: 6% auto 0;
    padding: 2% 3%;
    border: #999 1px solid;
    border-radius: 6px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2) inset;
}
    .input-ui-text-01:focus {
        box-shadow: 0 0 3px #4cbfbf;
    }
.input-ui-text-02 {
    display: block;
    width: 90%;
    font-size: 1em;
    color: #000;
    margin: 0 auto 6%;
    padding: 2% 3%;
    border: #999 1px solid;
    border-radius: 6px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2) inset;
}
    .input-ui-text-02:focus {
        box-shadow: 0 0 3px #4cbfbf;
    }
.input-ui-text-03 {
    display: block;
    width: 88%;
    overflow: hidden;
    color: #333;
    font-size: 0.938rem;
    font-weight: 300;
    margin: 0 0 1.25rem;
    padding: 0.75rem;
    border: #333 1px solid;
    border-radius: 6px;
}
.input-ui-textarea-01 {
    display: block;
    width: 90%;
    font-size: 1em;
    color: #000;
    margin: 6% auto 0;
    padding: 2% 3%;
    border: #999 1px solid;
    border-radius: 6px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2) inset;
}
    .input-ui-textarea-01:focus {
        box-shadow: 0 0 3px #4cbfbf;
    }
.input-ui-btn-01 {
    display: block;
    width: 96%;
    background: #025EAD;
    font-size: 1em;
    color: #FFF;
    margin: 6% auto 0;
    padding: 2% 3%;
    border: none;
    border-radius: 6px;
}

/*** BEGIN TEMPLATE MAIN COMPONENT -- FOOTER ***/
#footer .footer-info-block {
    clear: both;
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    padding: 1.85rem 0;
}
    #footer .footer-info {
        float: left;
        display: inline-block;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }
        #footer .footer-info ul {
            width: 100%;
            overflow: hidden;
            margin: 0 auto;
            padding: 0;
        }
            #footer .footer-info li {
                width: 100%;
                overflow: hidden;
                color: #FFF;
                font-size: 0.875rem;
                font-weight: 300;
                letter-spacing: 0.1rem;
                margin: 0 auto 0.5rem;
                padding: 0;
            }
            #footer .footer-info li.li-copyright {
                margin: 1.25rem auto 0;
                color: #b8c5e3;
            }
                #footer .footer-info li.li-mail a:link, #footer .footer-info li.li-mail a:visited, #footer .footer-info li.li-mail a:hover {
                    color: #FFF;
                }
    #footer .footer-nav-links {
        float: right;
        width: 48%;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }   
        #footer .footer-nav-links ul {
            width: 100%;
            overflow: hidden;
            margin: 0 8% 0 0;
            padding: 0;
            list-style-type: none;
        }
        #footer .footer-nav-links li {
            display: inline-block;
            overflow: hidden;
        }
            #footer .footer-nav-links li.li-nav-main {
                width: 100%;
                color: #b8c5e3;
                font-size: 1.0625rem;
                font-weight: 400;
                letter-spacing: 1px;
                margin: 0;
                padding: 0;
            }
                #footer .footer-nav-links li.li-nav-main a:link, #footer .footer-nav-links li.li-nav-main a:visited, #footer .footer-nav-links li.li-nav-main a:hover {
                    color: #FFF;
                }
            #footer .footer-nav-links li.li-nav-sub {
                /*width: 17%;*/
                color: #FFF;
                font-size: 1.85rem;
                font-weight: 500;
                text-align: left;
                margin: 0 1.65rem 0 0;
                padding: 0;
                vertical-align: middle;
            }
                #footer .footer-nav-links li.li-nav-sub a:link, #footer .footer-nav-links li.li-nav-sub a:visited, #footer .footer-nav-links li.li-nav-sub a:hover {
                    color: #FFF;
                }
                #footer .footer-nav-links li.li-nav-sub.sub-01 {
                    /*width: 20%;
                    margin: 1% 0 0;*/
                }
                #footer .footer-nav-links li.li-nav-sub.sub-02 {
                    width: 6.6%;
                    margin-top: 0.75rem;
                }
                    #footer .footer-nav-links li.li-nav-sub.sub-02 img {
                        width: 100%;
                    }
                #footer .footer-nav-links li.li-nav-sub.sub-03 {
                    /*width: 18%;
                    margin: 1% 0 0;*/
                }
                #footer .footer-nav-links li.li-nav-sub.sub-04 {
                    /*width: 22%;
                    position: relative;
                    top: -0.8rem;*/
                }
                    #footer .footer-nav-links li.li-nav-sub.sub-04 img {
                        width: 100%;
                    }
                #footer .footer-nav-links li.li-nav-sub.sub-05 {
                    /*width: 20%;*/
                }
                    #footer .footer-nav-links li.li-nav-sub.sub-05 img {
                        width: 100%;
                    }
#footer .footer-copyright-block {
    clear: both;
    width: 100%;
    background: url(../image/bg_copyright.png) 0 0 repeat;
    background-size: 100%;
    overflow: hidden;
    color: #808fb6;
    font-size: 0.875rem;
    font-weight: 300;
    text-align: center;
    margin: 0 auto;
    padding: 1.5rem 0;
}
    #footer .footer-copyright-block a:link, #footer .footer-copyright-block a:visited, #footer .footer-copyright-block a:hover {
        color: #808fb6;
        font-weight: 500;
        text-decoration: underline;
        margin-left: 0.25rem;
    }

/*** BEGIN TEMPLATE MAIN COMPONENT -- FACEBOX UI ***/
#facebox .content {
    margin-top: 0 !important;
    padding: 3% 0 !important;
}
#facebox .close {
    display: none !important;
}