/* CUSTOM STYLE */
/* PMath2016 Gateway */


/**/
/* Site Default */

html, body {
    height: 100%;
    font-family: "Arial","Helvetica","微軟正黑體","Microsoft JhengHei","黑體","SimHei","儷黑 Pro","LiHei Pro Medium","蘋果儷中黑","Apple LiGothic Medium","新細明體","PMingLiU","細明體","MingLiU","標楷體","DFKai-sb","sans-serif" !important;
    font-size: 16px;
    color: #333333;
}


/**/
/* Background Images */

#ppth_th {
    background: url('../img/pmath/intro_pmath_th.png');
}
#ppth_st {
    background: url('../img/ppth/student/student_web_top_banner.png');
}
#pmath_th {
    background: url('../img/pmath/intro_pmath_th.png');
    xbackground: none, url('../img/pmath/intro_pmath_th.svg');
}
#pmath_st {
    background: url('../img/pmath/intro_pmath_st.png');
    xbackground: none, url('../img/pmath/intro_pmath_st.svg');
}

#pchin_th {
    background: url('../img/pchin/intro_pchin_th.png');
    xbackground: none, url('../img/pchin/intro_pchin_th.svg');
}
#pchin_st {
    background: url('../img/pchin/intro_pchin_st.png');
    xbackground: none, url('../img/pchin/intro_pchin_st.svg');
}

#pcomp_th {
    background: url('../img/pcomp/intro_pcomp_th.png');
    xbackground: none, url('../img/pcomp/intro_pcomp_th.svg');
}
#pcomp_st {
    background: url('../img/pcomp/intro_pcomp_st.png');
    xbackground: none, url('../img/pcomp/intro_pcomp_st.svg');
}

#kg {
    background: url('../img/kg/intro_kg_pg.png');
    xbackground: none, url('../img/kg/intro_kg_pg.svg');
}

#sjhist_th {
    background: url('../img/sjhist/intro_sjhist_th.png');
    xbackground: none, url('../img/sjhist/intro_sjhist_th.svg');
}
#sjhist_th_menu {
    background: url('../img/sjhist/menu_sjhist_th.png');
    xbackground: none, url('../img/sjhist/menu_sjhist_th.svg');
}
#sjhist_st {
    background: url('../img/sjhist/intro_sjhist_st.png');
    xbackground: none, url('../img/sjhist/intro_sjhist_st.svg');
}
#sjhist_st_menu {
    background: url('../img/sjhist/menu_sjhist_st.png');
    xbackground: none, url('../img/sjhist/menu_sjhist_st.svg');
}



/**/
/* Colors */

.color-navbar-bg {
    background-color: rgba(57,189,153,0.3);
}
.color-footer-bg {
    background-color: #39bd99;
}
.color-mers-red {
    color: #f6635c;
}
.color-mers-red-bg {
    background-color: #f6635c;
}
.color-mers-green {
    color: #39bd99;
}
.color-mers-green-bg {
    background-color: #39bd99;
}
.color-menu-fallback-01 {
    background-color: #ff8d4d;
}
.color-menu-fallback-02 {
    background-color: #447bbd;
}

/* PChin */

.color-pchin-th-bg {
    background-color: #f777c5;
}
.color-pchin-st-bg {
    background-color: #33d670;
}
.color-pchin-book2006,.color-pchin-book2006-mo {
    color: rgba(235,109,152,1);
}
.color-pchin-book2006-bg,.color-pchin-book2006-mo-bg {
    background-color: rgba(235,109,152,1);
}
.color-pchin-book2006-light-bg,.color-pchin-book2006-mo-light-bg {
    background-color: rgba(235,109,152,0.6);
}

.color-pchin-book2012,.color-pchin-book2012-mo {
    color: rgba(109,187,90, 1);
}
.color-pchin-book2012-bg,.color-pchin-book2012-mo-bg {
    background-color: rgba(109,187,90, 1);
}
.color-pchin-book2012-light-bg,.color-pchin-book2012-mo-light-bg {
    background-color: rgba(109,187,90, 0.6);
}

.color-pchin-book-hws {
    color: rgba(0,165,185, 1);
}
.color-pchin-book-hws-bg {
    background-color: rgba(0,165,185, 1);
}
.color-pchin-book-hws-light-bg {
    background-color: rgba(0,165,185, 0.6);
}

.color-pchin-book-school {
    color: rgba(97,85,160, 1);
}
.color-pchin-book-school-bg {
    background-color: rgba(97,85,160, 1);
}
.color-pchin-book-school-light-bg {
    background-color: rgba(97,85,160, 0.6);
}


.color-pchin-book2016 {
    color: rgba(250,192,0, 1);
}
.color-pchin-book2016-bg {
    background-color: rgba(250,192,0, 1);
}
.color-pchin-book2016-light-bg {
    background-color: rgba(250,192,0, 0.6);
}

.color-pchin-book2023 {
    color: rgba(243,151,101, 1);
}
.color-pchin-book2023-bg {
    background-color: rgba(243,151,101, 1);
}
.color-pchin-book2023-light-bg {
    background-color: rgba(243,151,101, 0.6);
}

/* PMath */

.color-pmath-th-bg {
    background-color: #00e676;
}
.color-pmath-st-bg {
    background-color: #fc831f;
}
.color-pmath-book2006-eng {
    color: rgba(208,94,153, 1);
}
.color-pmath-book2006-eng-bg {
    background-color: rgba(208,94,153, 1);
}
.color-pmath-book2006-eng-light-bg {
    background-color: rgba(208,94,153, 0.6);
}

.color-pmath-book2006-chi {
    color: rgba(1,178,124, 1);
}
.color-pmath-book2006-chi-bg {
    background-color: rgba(1,178,124, 1);
}
.color-pmath-book2006-chi-light-bg {
    background-color: rgba(1,178,124, 0.6);
}

.color-pmath-book2014-eng {
    color: rgba(0,161,201, 1);
}
.color-pmath-book2014-eng-bg {
    background-color: rgba(0,161,201, 1);
}
.color-pmath-book2014-eng-light-bg {
    background-color: rgba(0,161,201, 0.6);
}

.color-pmath-book2014-ans {
    color: rgba(20,161,52, 1);
}
.color-pmath-book2014-ans-bg {
    background-color: rgba(20,161,52, 1);
}
.color-pmath-book2014-ans-light-bg {
    background-color: rgba(20,161,52, 0.6);
}

.color-pmath-book-school {
    color: rgba(238,137,127, 1);
}
.color-pmath-book-school-bg {
    background-color: rgba(238,137,127, 1);
}
.color-pmath-book-school-light-bg {
    background-color: rgba(238,137,127, 0.6);
}


.color-pmath-book2014-chi {
    color: rgba(239,135,28, 1);
}
.color-pmath-book2014-chi-bg {
    background-color: rgba(239,135,28, 1);
}
.color-pmath-book2014-chi-light-bg {
    background-color: rgba(239,135,28, 0.6);
}


.color-pmath-book2019-chi {
    color: rgba(254,194,58, 1);
}
.color-pmath-book2019-chi-bg {
    background-color: rgba(254,194,58, 1);
}
.color-pmath-book2019-chi-light-bg {
    background-color: rgba(254,194,58, 0.6);
}
.color-pmath-book2019-eng {
    color: rgba(94,149,207, 1);
}
.color-pmath-book2019-eng-bg {
    background-color: rgba(94,149,207, 1);
}
.color-pmath-book2019-eng-light-bg {
    background-color: rgba(94,149,207, 0.6);
}
.color-pmath-book2014-chi-mo {
    color: rgba(142,113,174, 1);
}
.color-pmath-book2014-chi-mo-bg {
    background-color: rgba(142,113,174, 1);
}
.color-pmath-book2014-chi-mo-light-bg {
    background-color: rgba(142,113,174, 0.6);
}
.color-pmath-book2006-chi-mo {
    color: rgba(148,204,121, 1);
}
.color-pmath-book2006-chi-mo-bg {
    background-color: rgba(148,204,121, 1);
}
.color-pmath-book2006-chi-mo-light-bg {
    background-color: rgba(148,204,121, 0.6);
}




/* PComp */

.color-pcomp-th-bg {
    background-color: #00e676;
}
.color-pcomp-st-bg {
    background-color: #fc831f;
}
.color-pcomp-book2014 {
    color: rgba(36,186,191, 1);
}
.color-pcomp-book2014-bg {
    background-color: rgba(36,186,191, 1);
}
.color-pcomp-book2014-light-bg { 
    background-color: rgba(36,186,191, 0.6);
}

.color-pcomp-book-ebookweb {
    color: rgba(250,190,0, 1);
}
.color-pcomp-book-ebookweb-bg {
    background-color: rgba(250,190,0, 1);
}
.color-pcomp-book-ebookweb-light-bg {
    background-color: rgba(250,190,0, 0.6);
}

.color-pcomp-book-mcit {
    color: rgba(0,132,184, 1);
}
.color-pcomp-book-mcit-bg {
    background-color: rgba(0,132,184, 1);
}
.color-pcomp-book-mcit-light-bg {
    background-color: rgba(0,132,184, 0.6);
}

.color-pcomp-book-school {
    color: rgba(255,102,153, 1);
}
.color-pcomp-book-school-bg {
    background-color: rgba(255,102,153, 1);
}
.color-pcomp-book-school-light-bg {
    background-color: rgba(255,102,153, 0.6);
}

.color-pcomp-ebookweb2 {
    color: rgba(0,175,76,1);
}
.color-pcomp-ebookweb2-bg {
    background-color: rgba(0,175,76,1);
}
.color-pcomp-ebookweb2-light-bg {
    background-color: rgba(0,175,76,0.6);
}

/* PPth */

.color-ppth-th-bg {
    background-color: #00e676;
}
.color-ppth-st-bg {
    background-color: #fc831f;
}
.color-ppth-book2007-chi {
    color: rgba(1,178,124, 1);
}
.color-ppth-book2007-chi-bg {
    background-color: rgba(1,178,124, 1);
}
.color-ppth-book2007-chi-light-bg {
    background-color: rgba(1,178,124, 0.6);
}

.color-ppth-book2019-chi {
    color: rgba(0,161,201, 1);
}
.color-ppth-book2019-chi-bg {
    background-color: rgba(0,161,201, 1);
}
.color-ppth-book2019-chi-light-bg {
    background-color: rgba(0,161,201, 0.6);
}

/* SJHist */

.color-sjhist-book-2009 {
    color: rgba(250,190,0, 1);
}
.color-sjhist-book-2009-bg {
    background-color: rgba(250,190,0, 1);
}
.color-sjhist-book-2009-light-bg {
    background-color: rgba(250,190,0, 0.6);
}

.color-sjhist-book-2014 {
    color: rgba(0,175,76,1);
}
.color-sjhist-book-2014-bg {
    background-color: rgba(0,175,76,1);
}
.color-sjhist-book-2014-light-bg {
    background-color: rgba(0,175,76,0.6);
}

.color-sjhist-book-2020 {
    color: rgba(0,132,184, 1);
}
.color-sjhist-book-2020-bg {
    background-color: rgba(0,132,184, 1);
}
.color-sjhist-book-2020-light-bg {
    background-color: rgba(0,132,184, 0.6);
}


/**/
/* Links */

a:link, a:visited {
    color: #39bd99;
}
a:hover, a:active {
    color: #f6635c;
    text-decoration: underline;
}


/**/
/* Titles, Headers and Texts */

.text-eng {
    font-size: 75%;
}
.text-eng-lh {
    line-height: 75%;
}


/**/
/* HR */
.hr-content {
    margin-left: -5px;
    margin-right: -5px;
}


/**/
/* Default */
.vertical-align {
    display: flex;
    flex-direction: row;
}
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
    display: flex;
    align-items: center;     /* Align the flex-items vertically */
    xjustify-content: center; /* Optional, to align inner flex-items horizontally within the column  */
}
/* Navbar */

.navbar {
    border: none !important; /* override bootstrap.css style */
    border-radius: 0;
    height: 30px;
}
.navbar-header {
    width: 100%;
}
.navbar-brand {
    margin: 0 !important;
    padding: 5px;
}
.navbar-brand img {
    height: 100%;
    width: auto;
    margin: 0 auto;
}
.navbar-title {
    display: inline;
    margin-left: 10px;
    font-size: 1.50em;
    line-height: 50px;
    color: black;
}


/**/
/* Footer */

.footer > .col {
    margin: 0;
}

.footer-copyright {
    word-wrap: break-word;
    text-align: center;
    height: 40px;
    font-size: 0.688em;
    line-height: 40px;
    color: #ffffff;
    margin: 0;
    padding: 0;
}
.footer-copyright a,
.footer-copyright a:visited {
    color: #ffffff;
}
.footer-copyright a:hover, 
.footer-copyright a:active,
.footer-copyright a:focus {
    color: #f6635c;
    text-decoration: underline;
}

/* Button Student */

footer .btn {
    border-radius: 0;
}
footer .btn-student {
    xposition: absolute;
    top: 0;
    right: 0;
    margin-left: -10px;
    xmargin-right: 20px;
    xmargin-bottom: 20px;
    border: 1px solid #ffffff;
    background-color: rgba(255,234,57,0.25);
    z-index: 10;
}
footer .btn-student .text {
    font-size: 1em;
    line-height: 24px;
    color: #333333;
}
footer .btn-student .icon {
    text-align: center;
    margin-top: -1px;
    margin-bottom: 1px;
    padding: 8px;
    background-color: #ffea39;
    color: #669d71;
}
footer .btn-student:after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    width: 0;
    height: 100%;
    background-color: #ffea39;
    -webkit-transform-origin: right;
    transform-origin: right;
    -webkit-transition: width 0.25s ease;
    transition: width 0.25s ease;
    z-index: -1;
}
footer .btn-student:hover:after {
    width: 100%;
}
footer .btn-student:hover .text {
    color: black;
}
footer .btn-student .text:active,
footer .btn-student .icon:active,
footer .btn-student .text:focus,
footer .btn-student .icon:focus
footer .btn-student .text:visited,
footer .btn-student .icon:visited {
    outline: none;
    background-image: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: none;
    transition: none;
}

/* Button Teacher */

footer .btn {
    border-radius: 0;
}
footer .btn-teacher {
    xposition: absolute;
    top: 0;
    right: 0;
    margin-left: -10px;
    xmargin-right: 20px;
    xmargin-bottom: 20px;
    border: 1px solid #ffffff;
    background-color: rgba(255,234,57,0.25);
    z-index: 10;
}
footer .btn-teacher .text {
    font-size: 1em;
    line-height: 24px;
    color: #333333;
}
footer .btn-teacher .icon {
    text-align: center;
    margin-top: -1px;
    margin-bottom: 1px;
    padding: 8px;
    background-color: #ffea39;
    color: #669d71;
}
footer .btn-teacher:after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    width: 0;
    height: 100%;
    background-color: #ffea39;
    -webkit-transform-origin: right;
    transform-origin: right;
    -webkit-transition: width 0.25s ease;
    transition: width 0.25s ease;
    z-index: -1;
}
footer .btn-teacher:hover:after {
    width: 100%;
}
footer .btn-teacher:hover .text {
    color: black;
}
footer .btn-teacher .text:active,
footer .btn-teacher .icon:active,
footer .btn-teacher .text:focus,
footer .btn-teacher .icon:focus
footer .btn-teacher .text:visited,
footer .btn-teacher .icon:visited {
    outline: none;
    background-image: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: none;
    transition: none;
}


/**/
/* Content */

.content {
    margin-bottom: 40px;
}


/**/
/* Main */

.main {
    padding: 0;
    margin-bottom: 20px;
}
.main .row [class*='col-'] {
    padding-left: 10px;
    padding-right: 10px;
}


/**/
/* Intro */

.intro {
    position: relative;
    display: inline-block;
    xpadding: 15px;
    height: 100%;
    width: 100%;
    background-size: cover !important;
    background-position: left bottom !important;
    background-repeat: no-repeat !important;
}
.intro hr {
    margin: 0;
    width: 100%;
}
.intro .title {
    display: inline-block;
    margin-top: 15%;
    z-index: 30;
}
.intro-kg .title {
    margin-top: 10%;
}
.intro .title small {
    font-size: 60%;
}
.intro .title .text-chi {
    font-size: 3em;
    line-height: 0px;
    color: #ffffff;
    text-shadow: 2px 2px #666666;
    margin-left: 40px;
    margin-bottom: 30px;
}
.intro .title .text-eng {
    font-size: 1.25em;
    line-height: 0px;
    color: #ffffff;
    text-shadow: 1px 1px #666666;
    margin-left: 40px;
    margin-top: 20px;
}
.intro .title .text-chi small {
    margin-left: 30px;
}
.intro .title .text-eng small {
    float: right;
}

.intro .btn {
    border-radius: 0;
}
.intro .btn-student {
    position: absolute;
    bottom: 0;
    right: 0;
    margin-right: 20px;
    margin-bottom: 20px;
    border: 1px solid #ffffff;
    background-color: rgba(255,234,57,0.25);
    z-index: 10;
}
.intro .btn-student .text {
    font-size: 1.125em;
    line-height: 38px;
    color: #333333;
}
.intro .btn-student .icon {
    text-align: center;
    margin-top: -1px;
    margin-bottom: 1px;
    padding: 15px;
    background-color: #ffea39;
    color: #669d71;
}
.intro .btn-student:after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    width: 0;
    height: 100%;
    background-color: #ffea39;
    -webkit-transform-origin: right;
    transform-origin: right;
    -webkit-transition: width 0.25s ease;
    transition: width 0.25s ease;
    z-index: -1;
}
.intro .btn-student:hover:after {
    width: 100%;
}
.intro .btn-student:hover .text {
    color: black;
}
.intro .btn-student .text:active,
.intro .btn-student .icon:active,
.intro .btn-student .text:focus,
.intro .btn-student .icon:focus
.intro .btn-student .text:visited,
.intro .btn-student .icon:visited {
    outline: none;
    background-image: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: none;
    transition: none;
}
.intro .bg-img {
    position: absolute;
    content: "";
    background-size: cover !important;
    background-position: left bottom !important;
    background-repeat: no-repeat !important;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -20;
}
.xintro .btn-student:hover + .bg-img {
    -webkit-transform: translate3d(5px,0,0);
    transform: translate3d(5px,0,0);
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.intro .bg-overlay {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.25);
    opacity: 0;
    z-index: -10;
}
.intro .btn-student:hover + .bg-img .bg-overlay {
    opacity: 1;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}


/**/
/* App */

.app {
    margin-top: 20px;
}
.app-title {
    padding: 15px !important;
    background-color: #fff4ef;
}
.app-title-name {
    font-size: 1.5em;
    color: #333333;
}
.app-title-info {
    font-size: 1em;
    color: #666666;
}

.app-icon-table {
    padding-top: 20px;
}					  
.app-icon {
    padding: 15px !important;
}
.app-icon-icon {
    display: block;
    margin: auto;
    max-width: 140px;
}
.app-icon-name {
    padding: 10px 0;
    text-align: center;
    font-size: 1.25em;
}
.app-icon-info {
    font-size: 0.875em;
    color: #666666;
}
.app-icon-pic {
    margin-top: 15px;
}
.app-icon#common {
    background-color: #ffdf7a;
}
.app-icon#common .app-icon-name {
    color: #920083;
}
.app-icon#interest {
    background-color: #f1f9ff;
}
.app-icon#interest .app-icon-name {
    color: #3fa2dc;
}
.app-icon-name#common {
    color: #920083;
}
.app-icon-name#interest {
    color: #3fa2dc;
}
.app-icon#ar {
    background-color: #efe9fa;
}
.app-icon#ebook {
    background-color: #e6f0ee;
}
.app-qrcode {
    display: block;
    margin-left: auto;
    max-width: 120px;
}
.app-qrcode-info {
    text-align: right;
    font-size: 0.75em;
    color: #666666;
}

.app-support {
    padding: 15px !important;
    background-color: #fff4ef;
}
.app-support-name {
    font-size: 1.25em;
}
.app-support-info {
}
.app-support-icon img {
    max-height: 50px;
    padding: 5px 15px;
}



/* Intro Animation */

@-webkit-keyframes intro-ani-bg {
    /* Animation 01 - Fishpond */
    0% {
        opacity: 0;
        background: url('../img/kg/ani_01_fishpond.gif') no-repeat 0% 5px;
        background-size: contain;
    }
    5% {
        opacity: 1;
        background: url('../img/kg/ani_01_fishpond.gif') no-repeat 0% 0px;
        background-size: contain;
    }
    15% {
        opacity: 1;
        background: url('../img/kg/ani_01_fishpond.gif') no-repeat 0% 0px;
        background-size: contain;
    }
    19% {
        opacity: 0;
        background: url('../img/kg/ani_01_fishpond.gif') no-repeat 0% 5px;
        background-size: contain;
    }
    /* Animation 02 - Children */
    20% {
        opacity: 0;
        background: url('../img/kg/ani_02_children.gif') no-repeat 50% -5px;
        background-size: contain;
    }
    25% {
        opacity: 1;
        background: url('../img/kg/ani_02_children.gif') no-repeat 50% 0px;
        background-size: contain;
    }
    35% {
        opacity: 1;
        background: url('../img/kg/ani_02_children.gif') no-repeat 50% 0px;
        background-size: contain;
    }
    39% {
        opacity: 0;
        background: url('../img/kg/ani_02_children.gif') no-repeat 50% -5px;
        background-size: contain;
    }
    /* Animation 03 - Bear Bike */
    40% {
        opacity: 0;
        background: url('../img/kg/ani_03_bear_bike.gif') no-repeat 10% 0px;
        background-size: contain;
    }
    45% {
        opacity: 1;
        background: url('../img/kg/ani_03_bear_bike.gif') no-repeat 25% 0px;
        background-size: contain;
    }
    55% {
        opacity: 1;
        background: url('../img/kg/ani_03_bear_bike.gif') no-repeat 75% 0px;
        background-size: contain;
    }
    59% {
        opacity: 0;
        background: url('../img/kg/ani_03_bear_bike.gif') no-repeat 90% 0px;
        background-size: contain;
    }
    /* Animation 04 - Flag */
    60% {
        opacity: 0;
        background: url('../img/kg/ani_04_flag.gif') no-repeat 100% 5px;
        background-size: contain;
    }
    65% {
        opacity: 1;
        background: url('../img/kg/ani_04_flag.gif') no-repeat 100% 0px;
        background-size: contain;
    }
    75% {
        opacity: 1;
        background: url('../img/kg/ani_04_flag.gif') no-repeat 100% 0px;
        background-size: contain;
    }
    79% {
        opacity: 0;
        background: url('../img/kg/ani_04_flag.gif') no-repeat 100% 5px;
        background-size: contain;
    }
    /* Animation 05 - Horse */
    80% {
        opacity: 0;
        background: url('../img/kg/ani_05_horse.gif') no-repeat 50% -5px;
        background-size: contain;
    }
    85% {
        opacity: 1;
        background: url('../img/kg/ani_05_horse.gif') no-repeat 50% 0px;
        background-size: contain;
    }
    95% {
        opacity: 1;
        background: url('../img/kg/ani_05_horse.gif') no-repeat 50% 0px;
        background-size: contain;
    }
    100% {
        opacity: 0;
        background: url('../img/kg/ani_05_horse.gif') no-repeat 50% -5px;
        background-size: contain;
    }
}

@keyframes intro-ani-bg {
    /* Animation 01 - Fishpond */
    0% {
        opacity: 0;
        background: url('../img/kg/ani_01_fishpond.gif') no-repeat 0% 5px;
        background-size: contain;
    }
    5% {
        opacity: 1;
        background: url('../img/kg/ani_01_fishpond.gif') no-repeat 0% 0px;
        background-size: contain;
    }
    15% {
        opacity: 1;
        background: url('../img/kg/ani_01_fishpond.gif') no-repeat 0% 0px;
        background-size: contain;
    }
    19% {
        opacity: 0;
        background: url('../img/kg/ani_01_fishpond.gif') no-repeat 0% 5px;
        background-size: contain;
    }
    /* Animation 02 - Children */
    20% {
        opacity: 0;
        background: url('../img/kg/ani_02_children.gif') no-repeat 50% -5px;
        background-size: contain;
    }
    25% {
        opacity: 1;
        background: url('../img/kg/ani_02_children.gif') no-repeat 50% 0px;
        background-size: contain;
    }
    35% {
        opacity: 1;
        background: url('../img/kg/ani_02_children.gif') no-repeat 50% 0px;
        background-size: contain;
    }
    39% {
        opacity: 0;
        background: url('../img/kg/ani_02_children.gif') no-repeat 50% -5px;
        background-size: contain;
    }
    /* Animation 03 - Bear Bike */
    40% {
        opacity: 0;
        background: url('../img/kg/ani_03_bear_bike.gif') no-repeat 10% 0px;
        background-size: contain;
    }
    45% {
        opacity: 1;
        background: url('../img/kg/ani_03_bear_bike.gif') no-repeat 25% 0px;
        background-size: contain;
    }
    55% {
        opacity: 1;
        background: url('../img/kg/ani_03_bear_bike.gif') no-repeat 75% 0px;
        background-size: contain;
    }
    59% {
        opacity: 0;
        background: url('../img/kg/ani_03_bear_bike.gif') no-repeat 90% 0px;
        background-size: contain;
    }
    /* Animation 04 - Flag */
    60% {
        opacity: 0;
        background: url('../img/kg/ani_04_flag.gif') no-repeat 100% 5px;
        background-size: contain;
    }
    65% {
        opacity: 1;
        background: url('../img/kg/ani_04_flag.gif') no-repeat 100% 0px;
        background-size: contain;
    }
    75% {
        opacity: 1;
        background: url('../img/kg/ani_04_flag.gif') no-repeat 100% 0px;
        background-size: contain;
    }
    79% {
        opacity: 0;
        background: url('../img/kg/ani_04_flag.gif') no-repeat 100% 5px;
        background-size: contain;
    }
    /* Animation 05 - Horse */
    80% {
        opacity: 0;
        background: url('../img/kg/ani_05_horse.gif') no-repeat 50% -5px;
        background-size: contain;
    }
    85% {
        opacity: 1;
        background: url('../img/kg/ani_05_horse.gif') no-repeat 50% 0px;
        background-size: contain;
    }
    95% {
        opacity: 1;
        background: url('../img/kg/ani_05_horse.gif') no-repeat 50% 0px;
        background-size: contain;
    }
    100% {
        opacity: 0;
        background: url('../img/kg/ani_05_horse.gif') no-repeat 50% -5px;
        background-size: contain;
    }
}

.intro-ani {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.intro-ani-bg {
    position: absolute;
    width: 100%;
    height: 50%;
    left: 0px;
    bottom: 0px;
    -webkit-animation: intro-ani-bg 60s infinite;
    animation: intro-ani-bg 60s infinite;
}


/* Menu */

.intro-menu {
    height: 60px;
}
.intro-menu .row {
    height: 100%;
}

.intro-menu .title {
    margin-top: 10px;
}
.intro-menu .title .text-chi {
    font-size: 1.250em;
    margin-left: 40px;
}
.intro-menu .title .text-eng {
    font-size: 0.750em;
    margin-left: 40px;
}
.intro-menu .title .text-chi small {
    margin-left: 80px;
}
.intro-menu .title .text-eng small {
    margin-top: 8px;
}

.intro-menu-welcome {
    min-height: 100%;
    font-size: 0.875em;
}
.intro-menu-welcome div {
    position: absolute;
    top: 5px;
    left: 5px;
}
.intro-menu-welcome a,
.intro-menu-welcome a:visited {
    position: absolute;
    bottom: 5px;
    right: 5px;
    color: #666666;
    text-decoration: none;
}
.intro-menu-welcome a:hover,
.intro-menu-welcome a:focus,
.intro-menu-welcome a:active {
    color: black;
}



/**/
/* Login */

.login {
    height: 100%;
    background-color: #ffffff;
    border: 1px solid #999999;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 6px;
    outline: 0;
    xbox-shadow: 0 3px 9px rgba(0,0,0,0.5);
    padding: 20px 30px;
}
.login a {
    font-size: 0.750em;
    line-height: 10px;
}
.login .title {
    margin-top: -20px;
    margin-bottom: 20px;
    padding-top: 15px;
    padding-bottom: 10px;
    text-align: center;
    font-size: 1.125em;
    line-height: 16px;
    color: #ffffff;
}


/**/
/* Ads */

.ads {
    padding: 0;
    margin-left: 5px;
    margin-right: 5px;
    color: gray;
    font-size: 0.875em;
}
.ads img {
    width: 100%;
}


/**/
/* Prodcuts */

.product {
    xpadding:0;
}
.product .row {
}
.product .row [class*='col-'] {
    display: inline-block;
    float: none;
    margin: 0 -0.125em;
    padding-left: 10px;
    padding-right: 10px;
    vertical-align: top;
}
.product img {
    xwidth: 100%;
    margin-bottom: 20px;
}


/**/
/* Menu */

.menu {
    height: 100%;
}
.menu .row [class*='col-'] {
    text-align: center;
    padding: 0 5px;
}
.menu-img {
    padding: 30px;
    padding-bottom: 10px;
    float: none;
    margin: 0 auto;
    height: 100%;
    max-height: 300px;
}
.menu-text {
    height: 40px;
    font-size: 1.125em;
    line-height: 20px;
    margin-bottom: 10px;
    xcolor: black;
}
.menu-text span {
    position: absolute;
    z-index: 10;
    bottom: 10;
    left: 0;
    right: 0;
}
.menu figcaption {
    display: table-cell;
    font-size: 1.125em;
    line-height: 20px;
    color: white;
    padding: 0 5px;
    padding-top: 10px;
    z-index: 10;
}
.menu-info {
    text-align: left !important;
    padding: 5px 5px !important;
    color: gray;
}
.menu-info .school {
    font-size: 1.25em;
    line-height: 24px;
    margin-bottom: 5px;
    text-align: center;
    color: black;
}
.menu-info .school-year {
    font-size: 0.75em;
    line-height: 18px;
    color: dimgray;
}

.menu-bg-mask {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    opacity: 0.8;
}
.menu-bg-hide {
    opacity: 0;
}

/* Subenu */

.submenu {
    height: 100%;
    padding: 0 10px;
}
.submenu .row [class*='col-'] {
    text-align: center;
    padding: 0 5px;
}
.submenu-img {
    xpadding: 10px;
    padding-bottom: 10px;
    float: none;
    margin: 0 auto;
    max-height: 200px;
    margin-bottom: 0px !important;
}
.submenu-text {
    font-size: 1em;
    line-height: 18px;
    margin-bottom: 10px;
}


/**/
/* MO Transitions */

/* Shake */

.trans-shake:hover {
    -webkit-animation: shake .5s ease-in-out;
    animation: shake .5s ease-in-out;
}
@-webkit-keyframes shake {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    20% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px);
    }
    40% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px);
    }
    60% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px);
    }
    80% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes shake {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    20% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px);
    }
    40% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px);
    }
    60% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px);
    }
    80% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}


/* Trans Push Up */

.trans-push-up .trans-figure {
    position: relative;
    margin: 0;
    overflow: hidden;
}
.trans-push-up .trans-figure img {
    position: relative;
    display: block;
    xmin-width: 100%;
    z-index: 100;
    -webkit-transition: -webkit-transform 0.4s;
    transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
    transition: transform 0.4s, -webkit-transform 0.4s;
}
.trans-push-up .trans-figure:hover img {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
}
.trans-push-up figcaption {
    position: absolute;
    height: 60px;
    width: 100%;
    left: 0;
    top: auto;
    bottom: 0;
    opacity: 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: opacity 0.1s 0.3s, -webkit-transform 0.4s;
    transition: opacity 0.1s 0.3s, -webkit-transform 0.4s;
    transition: transform 0.4s, opacity 0.1s 0.3s;
    transition: transform 0.4s, opacity 0.1s 0.3s, -webkit-transform 0.4s;
}
.trans-push-up .trans-figure:hover figcaption {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition: opacity 0.1s, -webkit-transform 0.4s;
    transition: opacity 0.1s, -webkit-transform 0.4s;
    transition: transform 0.4s, opacity 0.1s;
    transition: transform 0.4s, opacity 0.1s, -webkit-transform 0.4s;
}


/* Trans Move Up */

.trans-move-up .trans-figure {
    position: relative;
    margin: 0;
}
.trans-move-up .trans-figure img {
    position: relative;
    display: block;
    xmin-width: 100%;
    z-index: 100;
    -webkit-transition: -webkit-transform 0.4s;
    transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
    transition: transform 0.4s, -webkit-transform 0.4s;
}
.trans-move-up .trans-figure:hover img {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
}
.trans-move-up figcaption {
    position: absolute;
}



/* Bootstrap 3 MEDIA QUARY */

/**/
/* media quary targets different devices */

/* portrait phones and smaller, xs only */
@media (max-width: 480px) {}

/* landscape phones and portrait tablets, sm and down */
@media (max-width: 767px) {
    .navbar-brand {
        padding: 10px;
    }
    .navbar-title {
        margin-left: 0px;
        font-size: 1.25em;
    }
    
    .main .row [class*='col-'] {
        padding-left: 0px;
        padding-right: 0px;
    }
    
    .intro-xs {
        height: 250px;
    }
    
    .intro .title .text-chi {
        font-size: 2.250em;
        margin-bottom: 25px;
        margin-left: 10px !important;
    }
    .intro .title .text-eng {
        font-size: 1em;
        margin-top: 15px;
        margin-left: 10px !important;
    }
    .intro .title .text-chi small {
        margin-left: 20px !important;
    }
    
    .intro-menu .title .text-chi {
        font-size: 1.250em;
        margin-left: 40px;
    }
    .intro-menu .title .text-eng {
        font-size: 0.625em;
        margin-left: 40px;
    }
    .intro-menu .title .text-chi small {
        margin-left: 40px;
    }
    .intro-menu .title .text-eng small {
        margin-top: 8px;
    }
    
    .intro-menu-welcome {
        font-size: 0.750em;
    }
    .intro-menu-welcome span{
        padding: 5px;
    }

    .login {
        margin: 20px;
        margin-bottom: 0;
    }
    .ads {
        padding: 20px;
    }
    .hr-content {
        margin: 0;
    }
    .product {
        padding: 20px;
    }
    
    .menu-img {
        max-height: 200px;
    }
    .submenu-text {
        font-size: 0.875em;
        line-height: 14px;
    }
}

@media (max-width: 768px) {
    .footer-copyright {
        word-wrap: break-word;
        text-align: left;
        height: 40px;
        font-size: 0.688em;
        line-height: 20px;
    }
    .menu-img {
        padding: 0;
        padding-bottom: 10px;
    }
    .menu-text {
        height: 40px;
        font-size: 1em;
        line-height: 1.25em;
    }
}

/* portrait tablets and small desktops, sm only */
@media (min-width: 768px) and (max-width: 991px) {}

/* landscape tablets and medium desktops, md only */
@media (min-width: 992px) and (max-width:1199px) {}

/* large desktops and laptops, lg and up */
@media (min-width: 1200px) {}


/* media quary targets high resolution screens */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (-webkit-min-device-pixel-radio: 2), (min-moz-device-pixel-radio: 2), (-o-min-device-pixel-radio: 2/1), (min-resolution: 2dppx) {
  
}