@charset "UTF-8";

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, rem, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, figure {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    line-height: 1
}

body {
    line-height: 1
}

ol, ul {
    list-style: none
}

blockquote, q {
    quotes: none
}

    blockquote:before, blockquote.clear:after, .body blockquote.container:after, #index blockquote.container:after, blockquote:after, q:before, q.clear:after, .body q.container:after, #index q.container:after, q:after {
        content: '';
        content: none
    }

:focus {
    outline: 0
}

ins {
    text-decoration: none
}

del {
    text-decoration: line-through
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

address {
    display: inline;
    font-style: normal
}

a {
    display: block;
    text-decoration: none;
    transition: all .3s ease-out;
    color: #000;
    border: 1px dotted transparent;
    box-sizing: border-box
}

@media screen and (max-width:768px) {
    a {
        border: none
    }
}

a:active, a:focus, a:hover {
    color: #888
}

@media screen and (max-width:768px) {
    a:active, a:focus, a:hover {
        color: #000
    }
}

a:focus {
    border: 1px dotted #2a2a2a
}

@media screen and (max-width:768px) {
    a:focus {
        border: none
    }
}

.non, nav td a, header .row-1 ul a, footer li a, #top a, #studentsArea a, #col_4 a {
    border: none
}

    .non:focus, nav td a:focus, header .row-1 ul a:focus, footer li a:focus, #top a:focus, #studentsArea a:focus, #col_4 a:focus {
        border: none
    }

@media screen and (max-width:768px) {
    body .pc {
        display: none
    }
}

body .pad {
    display: none
}

@media screen and (max-width:768px) {
    body .pad {
        display: block
    }
}

body .mobile {
    display: none
}

@media screen and (max-width:640px) {
    body .mobile {
        display: block
    }
}

.clear:before, .clear:after, .body .container:after, nav:after, #index .container:after, #studentsArea dl:after, .body .container:before, nav:before, #index .container:before, #studentsArea dl:before {
    content: "";
    display: table
}

.clear:after, .body .container:after, nav:after, #index .container:after, #studentsArea dl:after {
    clear: both
}

.c {
    clear: both
}

img {
    width: 100%;
    height: auto;
    display: block
}

iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

.wrapper .hide {
    display: none
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

@-webkit-keyframes opac {
    0% {
        opacity: 1
    }

    50% {
        opacity: .4
    }

    100% {
        opacity: 1
    }
}

@keyframes opac {
    0% {
        opacity: 1
    }

    50% {
        opacity: .4
    }

    100% {
        opacity: 1
    }
}

.loading {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    text-align: center;
    z-index: 9999
}

    .loading .box {
        margin: 5rem auto;
        font-size: .3em;
        color: #9d876a;
        position: relative;
        font-family: Arial,Verdana,Helvetica,sans-serif;
        -webkit-animation: opac 2s linear infinite;
        animation: opac 2s linear infinite
    }

    .loading span {
        width: 1.5rem;
        height: 1.5rem;
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -.8rem auto auto -.8rem;
        border: 2px solid;
        border-color: #9d876a transparent;
        border-radius: 5rem;
        -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite
    }

table {
    width: 100%
}

    table th, table td {
        vertical-align: middle
    }

.table, .fillTable {
    width: 100%;
    display: table
}

    .table > .tr, .fillTable > .tr {
        display: table-row
    }

        .table > .tr > .th, .fillTable > .tr > .th, .table > .tr > .td, .fillTable > .tr > .td {
            display: table-cell;
            vertical-align: middle;
            position: relative
        }

    .table > .th, .fillTable > .th, .table > .td, .fillTable > .td {
        display: table-cell;
        vertical-align: middle;
        position: relative
    }

.fillTable {
    height: 100%
}

.inblock, header .row-1 ul, footer ul, #kv .dot, #entries ul, #top dl, #col_4 dl, #fontBtn, .breadcrumb, #pageNum {
    font-size: 0;
    letter-spacing: 0
}

    .inblock > *, header .row-1 ul > *, footer ul > *, #kv .dot > *, #entries ul > *, #top dl > *, #col_4 dl > *, #fontBtn > *, .breadcrumb > *, #pageNum > * {
        display: inline-block;
        vertical-align: middle;
        letter-spacing: 1px
    }

html, body {
    width: 100%;
    height: auto;
    font-family: "微軟正黑體","蘋果儷黑體","新細明體",Arial,Verdana,Helvetica,sans-serif;
    color: #2a2a2a;
    font-size: 50px;
    position: relative;
    background: #510000
}

@media screen and (max-width:1024px) {
    html, body {
        font-size: 45px
    }
}

@media screen and (max-width:768px) {
    html, body {
        font-size: 50px
    }
}

@media screen and (max-width:480px) {
    html, body {
        font-size: 45px
    }
}

@media screen and (max-width:320px) {
    html, body {
        font-size: 40px
    }
}

.wrapper {
    width: 100%;
    height: auto;
    line-height: 1;
    position: relative;
    overflow: hidden;
    font-size: .32rem
}

@media screen and (max-width:768px) {
    .wrapper {
        height: auto
    }
}

@media screen and (max-width:480px) {
    .wrapper {
        font-size: .36rem
    }
}

.container {
    width: 91.40625%;
    max-width: 25.6rem;
    position: relative;
    margin: auto
}

.body {
    background: #fff;
    line-height: 1.4;
    padding-top: 1rem;
    padding-bottom: 1rem;
    position: relative
}

@media screen and (max-width:480px) {
    .body {
        padding-top: .68rem;
        padding-bottom: .68rem
    }
}

.body .accesskey {
    position: absolute;
    top: 0;
    right: 100%
}

aside {
    width: 20%;
    float: left;
    position: relative
}

@media screen and (max-width:768px) {
    aside {
        display: none
    }
}

aside .aside-menu {
    width: 80%;
    color: #990309;
    margin-bottom: 1rem;
    text-align: center
}

aside dt {
    font-size: .4rem;
    margin-bottom: .4rem;
    padding-bottom: .3rem;
    font-weight: 700;
    border-bottom: 2px solid #990309
}

aside dd {
    font-size: .34rem
}

    aside dd a {
        color: #000;
        position: relative;
        padding-top: .2rem;
        padding-bottom: .2rem
    }

        aside dd a:hover, aside dd a:focus {
            color: #fff;
            background: #990309
        }

    aside dd.select a {
        color: #fff;
        background: #990309
    }

article {
    width: 75%;
    float: right;
    position: relative
}

@media screen and (max-width:768px) {
    article {
        width: auto;
        float: none
    }
}

h1 {
    font-size: .66rem;
    font-weight: 400
}

h2 {
    font-size: .44rem
}

h3 {
    font-size: .4rem;
    font-weight: 400
}

h4 {
    font-size: .36rem;
    margin-bottom: .2rem;
    font-weight: 400
}

h6 {
    font-size: .34rem;
    font-weight: 400;
    margin-bottom: .08rem
}

@media screen and (max-width:480px) {
    h6 {
        font-size: .38rem
    }
}

p {
    line-height: 1.8;
    margin-bottom: .5rem
}

@font-face {
    font-family: FontAwesome;
    src: url(../fonts/fontawesome-webfont.eot?v=4.2.0);
    src: url(../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0) format("embedded-opentype"),url(../fonts/fontawesome-webfont.woff?v=4.2.0) format("woff"),url(../fonts/fontawesome-webfont.ttf?v=4.2.0) format("truetype"),url(../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular) format("svg")
}

i {
    font-style: normal
}

a:hover i:before, a:hover i.clear:after, a:hover .body i.container:after, .body a:hover i.container:after, a:hover #index i.container:after, #index a:hover i.container:after {
    color: inherit
}

.icon {
    display: inline-block
}

    .icon:before, .icon.clear:after, .body .icon.container:after, nav.icon:after, #index .icon.container:after, #studentsArea dl.icon:after {
        font-family: FontAwesome;
        color: inherit;
        font-size: inherit;
        speak: none;
        display: block
    }

.icon_font:before, .icon_font.clear:after, .body .icon_font.container:after, nav.icon_font:after, #index .icon_font.container:after, #studentsArea dl.icon_font:after {
    content: "\f031"
}

.icon_font:after {
    font-family: FontAwesome;
    color: inherit;
    font-size: .24rem;
    speak: none;
    display: block;
    -webkit-transform: scale(.5);
    -ms-transform: scale(.5);
    transform: scale(.5);
    position: absolute;
    top: .25em;
    right: .1em
}

.icon_font.plus:after {
    content: "\f067"
}

.icon_font.minus:after {
    content: "\f068"
}

.icon_sitemap:before, .icon_sitemap.clear:after, .body .icon_sitemap.container:after, nav.icon_sitemap:after, #index .icon_sitemap.container:after, #studentsArea dl.icon_sitemap:after {
    content: "\f0e8"
}

.icon_fb:before, .icon_fb.clear:after, .body .icon_fb.container:after, nav.icon_fb:after, #index .icon_fb.container:after, #studentsArea dl.icon_fb:after {
    content: "\f082";
    color: #3b5998
}

.icon_member:before, .icon_member.clear:after, .body .icon_member.container:after, nav.icon_member:after, #index .icon_member.container:after, #studentsArea dl.icon_member:after {
    content: "\f007"
}

.icon_home:before, .icon_home.clear:after, .body .icon_home.container:after, nav.icon_home:after, #index .icon_home.container:after, #studentsArea dl.icon_home:after {
    content: "\f015"
}

.icon_print:before, .icon_print.clear:after, .body .icon_print.container:after, nav.icon_print:after, #index .icon_print.container:after, #studentsArea dl.icon_print:after {
    content: "\f02f"
}

.icon_download:before, .icon_download.clear:after, .body .icon_download.container:after, nav.icon_download:after, #index .icon_download.container:after, #studentsArea dl.icon_download:after {
    content: "\f019"
}

@media screen and (max-width:768px) {
    nav {
        display: none
    }
}

nav table {
    width: auto;
    float: right;
    margin-right: .6rem;
    position: relative;
    top: .25rem
}

nav td {
    position: relative
}

    nav td a {
        font-size: .34rem;
        padding-top: .2rem;
        padding-bottom: .2rem;
        padding-left: .4rem;
        padding-right: .4rem;
        background: transparent;
        color: #fff
    }

        nav td a:focus, nav td a:hover {
            color: #fff;
            background: #410103
        }

    nav td ul {
        width: 3.19rem;
        position: absolute;
        top: 100%;
        left: 0;
        transition: opacity .6s ease-out,-webkit-transform .5s cubic-bezier(.165,.84,.44,1);
        transition: transform .5s cubic-bezier(.165,.84,.44,1),opacity .6s ease-out;
        transition: transform .5s cubic-bezier(.165,.84,.44,1),opacity .6s ease-out,-webkit-transform .5s cubic-bezier(.165,.84,.44,1);
        -webkit-transform: translateY(-25px);
        -ms-transform: translateY(-25px);
        transform: translateY(-25px);
        opacity: 0;
        visibility: hidden;
        padding-top: .56rem
    }

        nav td ul li {
            position: relative;
            border-bottom: 1px solid #5b0f0f
        }

            nav td ul li:first-child a {
                padding-top: .32rem
            }

            nav td ul li:last-child a {
                padding-bottom: .32rem
            }

        nav td ul a {
            padding-top: .2rem;
            padding-bottom: .2rem;
            padding-left: .4rem;
            padding-right: .4rem;
            background: #510000
        }

            nav td ul a:focus, nav td ul a:hover {
                background: #410103
            }

    nav td:hover ul, nav td.activate ul {
        opacity: 1;
        visibility: visible;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }

#m-nav {
    display: none;
    width: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    font-size: .36rem;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    background: #510000
}

@media screen and (max-width:768px) {
    #m-nav {
        display: block
    }
}

#m-nav a {
    color: #fff9f9;
    line-height: 3;
    padding: 0 4.296875%;
    box-sizing: border-box;
    position: relative
}

#m-nav dl {
    background: #410103
}

#m-nav ul {
    padding-top: 1.4rem
}

#m-nav li {
    border-top: 1px solid rgba(255,255,255,.2)
}

#m-nav dd {
    border-top: 1px solid rgba(255,255,255,.1)
}

#m-nav .cross {
    display: block;
    width: .36rem;
    height: 2px;
    background: #c78686;
    position: absolute;
    right: 4.296875%;
    top: 50%;
    margin-top: -1px;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    transition: all .5s ease-out
}

    #m-nav .cross:before, #m-nav .cross.clear:after, #m-nav .body .cross.container:after, .body #m-nav .cross.container:after, #m-nav nav.cross:after, #m-nav #index .cross.container:after, #index #m-nav .cross.container:after, #m-nav #studentsArea dl.cross:after, #studentsArea #m-nav dl.cross:after {
        content: '';
        width: 100%;
        height: 100%;
        background: #c78686;
        position: absolute;
        left: 0;
        top: 0;
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        transition: all .5s ease-out
    }

#m-nav .active .cross {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

    #m-nav .active .cross:before, #m-nav .active .cross.clear:after, #m-nav .active .body .cross.container:after, .body #m-nav .active .cross.container:after, #m-nav .active nav.cross:after, #m-nav .active #index .cross.container:after, #index #m-nav .active .cross.container:after, #m-nav .active #studentsArea dl.cross:after, #studentsArea #m-nav .active dl.cross:after {
        -webkit-transform: rotate(-180deg);
        -ms-transform: rotate(-180deg);
        transform: rotate(-180deg)
    }

header {
    width: 100%;
    position: relative;
    z-index: 2
}

    header .container {
        width: 91.40625%;
        margin: auto
    }

    header .row-1 {
        padding-top: .26rem;
        padding-bottom: .26rem
    }

@media screen and (max-width:768px) {
    header .row-1 {
        display: none
    }
}

header .row-1 ul {
    text-align: right
}

    header .row-1 ul li {
        font-size: .28rem;
        margin-left: 1rem
    }

        header .row-1 ul li:first-child {
            margin-left: 0
        }

    header .row-1 ul a {
        color: #fff;
        opacity: .6
    }

        header .row-1 ul a:hover, header .row-1 ul a:focus {
            opacity: 1
        }

header .row-1 .icon {
    margin-right: .1rem
}

header .row-2 {
    padding-top: .32rem;
    padding-bottom: .32rem;
    background: #990309
}

@media screen and (max-width:768px) {
    header .row-2 {
        padding-top: .2rem;
        padding-bottom: .2rem
    }
}

header .row-2 .container {
    padding-bottom: .46rem;
    border-bottom: 2px solid #c5292b
}

@media screen and (max-width:768px) {
    header .row-2 .container {
        padding-bottom: 1rem;
        border-bottom: none
    }
}

header .row-2 .container:before, header .row-2 .container.clear:after, header .row-2 .body .container:after, .body header .row-2 .container:after, header .row-2 nav.container:after, header .row-2 #index .container:after, #index header .row-2 .container:after, header .row-2 #studentsArea dl.container:after, #studentsArea header .row-2 dl.container:after {
    content: '';
    width: 3.14rem;
    height: 100%;
    display: block;
    background: url(../images/header_bg.jpg) no-repeat left bottom;
    background-size: 100% auto;
    position: absolute;
    bottom: -2px;
    left: 0
}

@media screen and (max-width:768px) {
    header .row-2 .container:before, header .row-2 .container.clear:after, header .row-2 .body .container:after, .body header .row-2 .container:after, header .row-2 nav.container:after, header .row-2 #index .container:after, #index header .row-2 .container:after, header .row-2 #studentsArea dl.container:after, #studentsArea header .row-2 dl.container:after {
        width: 4.8rem;
        background: url(../images/header_bg_m.jpg) no-repeat left bottom;
        background-size: 100% auto
    }
}

header .row-2 .container:after {
    content: '';
    width: .24rem;
    height: .6rem;
    border-top: 2px solid #c5292b;
    border-right: 2px solid #c5292b;
    position: absolute;
    bottom: 0;
    right: 0
}

@media screen and (max-width:768px) {
    header .row-2 .container:after {
        display: none
    }
}

header .row-2 .accesskey {
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    margin: 0;
    color: #fff;
    opacity: .6
}

    header .row-2 .accesskey:focus {
        border: 1px dotted #fff;
        color: #fff
    }

    header .row-2 .accesskey:hover {
        color: #fff
    }

header #mainLogo {
    width: 4.8rem;
    position: absolute;
    top: .1rem;
    left: .4rem
}

@media screen and (max-width:768px) {
    header #mainLogo {
        top: 0
    }
}

#hamburger {
    width: .7rem;
    padding: .25rem 0;
    position: absolute;
    right: 0;
    top: .2rem;
    z-index: 99
}

    #hamburger span {
        display: block;
        height: .06rem;
        border-radius: 1rem;
        background-color: #fff;
        position: relative;
        top: 0;
        transition: all .4s ease-out
    }

        #hamburger span:before, #hamburger span.clear:after, #hamburger .body span.container:after, .body #hamburger span.container:after, #hamburger #index span.container:after, #index #hamburger span.container:after, #hamburger span:after {
            content: '';
            display: block;
            width: 100%;
            height: .06rem;
            border-radius: 1rem;
            background-color: #fff;
            position: absolute;
            left: 0;
            transition: all .4s ease-out
        }

        #hamburger span:before, #hamburger span.clear:after, #hamburger .body span.container:after, .body #hamburger span.container:after, #hamburger #index span.container:after, #index #hamburger span.container:after {
            top: -.2rem
        }

        #hamburger span:after {
            top: .2rem
        }

    #hamburger.select span {
        background-color: transparent
    }

        #hamburger.select span:before, #hamburger.select span.clear:after, #hamburger.select .body span.container:after, .body #hamburger.select span.container:after, #hamburger.select #index span.container:after, #index #hamburger.select span.container:after {
            top: 0;
            -webkit-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg)
        }

        #hamburger.select span:after {
            top: 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg)
        }

footer {
    position: relative;
    background: #8c1515;
    padding-top: .56rem;
    padding-bottom: .56rem;
    text-align: center
}

    footer ul {
        margin-bottom: .6rem
    }

@media screen and (max-width:480px) {
    footer ul {
        margin-bottom: .4rem
    }
}

footer li {
    padding-left: .6rem;
    padding-right: .6rem
}

@media screen and (max-width:480px) {
    footer li {
        padding-left: .2rem;
        padding-right: .2rem
    }
}

footer li a {
    color: #fff;
    font-size: .32rem;
    position: relative
}

    footer li a:before, footer li a.clear:after, footer li .body a.container:after, .body footer li a.container:after, footer li #index a.container:after, #index footer li a.container:after {
        content: '';
        width: 0;
        height: 1px;
        background: #fff;
        position: absolute;
        bottom: -.1rem;
        left: 50%;
        transition: all .4s ease-out
    }

    footer li a:hover, footer li a:focus {
        color: #fff
    }

        footer li a:hover:before, footer li a.clear:hover:after, footer li .body a.container:hover:after, .body footer li a.container:hover:after, footer li #index a.container:hover:after, #index footer li a.container:hover:after, footer li a:focus:before, footer li a.clear:focus:after, footer li .body a.container:focus:after, .body footer li a.container:focus:after, footer li #index a.container:focus:after, #index footer li a.container:focus:after {
            width: 100%;
            left: 0
        }

footer li:first-child {
    width: 1.76rem
}

@media screen and (max-width:480px) {
    footer li:first-child {
        display: none
    }
}

footer span {
    font-size: .28rem;
    color: #fff;
    opacity: .7;
    letter-spacing: 1px
}

footer .accesskey {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0
}

    footer .accesskey:focus {
        border: 1px dotted #9d876a;
        color: #9d876a;
        background: transparent
    }

    footer .accesskey:hover {
        color: #9d876a;
        background: transparent
    }

#kv .container {
    width: 100%;
    max-width: 25.6rem
}

#kv .viewbox {
    position: relative;
    overflow: hidden
}

#kv .banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

    #kv .banner li {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
    }

#kv .dot {
    position: absolute;
    bottom: .4rem;
    left: 0;
    width: 100%;
    height: auto;
    text-align: center
}

    #kv .dot li {
        width: .26rem;
        height: .26rem;
        border-radius: .5rem;
        background: #aeadad;
        transition: background .4s ease-out;
        margin-right: .2rem;
        cursor: pointer
    }

        #kv .dot li:last-child {
            margin-right: 0
        }

        #kv .dot li:hover, #kv .dot li.select {
            background: #8c1515
        }

#kv a {
    border: none
}

    #kv a:hover, #kv a:focus {
        border: none
    }

.arrow_l, .arrow_r {
    width: 1rem;
    height: 1rem;
    position: absolute;
    top: 50%;
    margin-top: -.5rem;
    opacity: .6;
    transition: opacity .4s ease-out;
    cursor: pointer
}

@media screen and (max-width:480px) {
    .arrow_l, .arrow_r {
        width: .6rem;
        height: .6rem;
        margin-top: -.3rem;
        opacity: 1
    }
}

.arrow_l:hover, .arrow_r:hover {
    opacity: 1
}

.arrow_l {
    left: .44rem;
    background: url(../images/arrow_l.png) no-repeat left top;
    background-size: 100% auto
}

.arrow_r {
    right: .44rem;
    background: url(../images/arrow_r.png) no-repeat left top;
    background-size: 100% auto
}

#index .col_l {
    width: 65.64102564102564%;
    float: left
}

@media screen and (max-width:768px) {
    #index .col_l {
        width: 100%;
        float: none
    }
}

#index .col_r {
    width: 31.45299145299145%;
    float: right
}

@media screen and (max-width:768px) {
    #index .col_r {
        width: 100%;
        float: none
    }
}

#entries {
    margin-top: .64rem
}

@media screen and (max-width:768px) {
    #entries {
        margin-top: .3rem
    }
}

#entries ul li {
    width: 19%;
    margin-right: 1.25%;
    border: 1px solid #dedede;
    box-sizing: border-box;
    margin-bottom: .3rem;
    background: url(../images/bg.png) repeat left top
}

    #entries ul li:nth-child(5n) {
        margin-right: 0
    }

    #entries ul li a {
        transition: background .2s ease-out
    }

        #entries ul li a:hover {
            background: #990309;
            color: #fff
        }

            #entries ul li a:hover h3 {
                border-left: 2px solid #fff
            }

@media screen and (max-width:768px) {
    #entries ul li {
        width: 49%;
        margin-right: 2%
    }

        #entries ul li:nth-child(5n) {
            margin-right: 2%
        }

        #entries ul li:nth-child(2n) {
            margin-right: 0
        }

        #entries ul li a:hover {
            background: none;
            color: #000
        }

            #entries ul li a:hover h3 {
                border-left: 2px solid #990309
            }
}

@media screen and (max-width:480px) {
    #entries ul li {
        width: 100%;
        margin-right: 0
    }
}

#entries .title {
    padding-left: .32rem;
    padding-right: .32rem;
    padding-top: .32rem;
    padding-bottom: .32rem
}

#entries h3 {
    transition: all .2s ease-out;
    border-left: 2px solid #990309;
    padding-left: .16rem
}

#top dl dd, #top dl dt {
    width: 31.62393162393163%;
    margin-left: 2.564102564102564%;
    border: 1px solid #dedede;
    box-sizing: border-box;
    margin-bottom: .9rem
}

@media screen and (max-width:480px) {
    #top dl dd, #top dl dt {
        width: 100%;
        margin-left: 0;
        margin-bottom: .5rem
    }
}

#top dl dt {
    margin-left: 0
}

#top a:hover .pic:before, #top a:hover .pic.clear:after, #top a:hover .body .pic.container:after, .body #top a:hover .pic.container:after, #top a:hover nav.pic:after, #top a:hover #index .pic.container:after, #index #top a:hover .pic.container:after, #top a:hover #studentsArea dl.pic:after, #studentsArea #top a:hover dl.pic:after, #top a:focus .pic:before, #top a:focus .pic.clear:after, #top a:focus .body .pic.container:after, .body #top a:focus .pic.container:after, #top a:focus nav.pic:after, #top a:focus #index .pic.container:after, #index #top a:focus .pic.container:after, #top a:focus #studentsArea dl.pic:after, #studentsArea #top a:focus dl.pic:after {
    background: rgba(255,255,255,.4)
}

#top .pic {
    border-bottom: 1px solid #dedede;
    -webkit-filter: brightness(1);
    filter: brightness(1);
    position: relative
}

    #top .pic:before, #top .pic.clear:after, #top .body .pic.container:after, .body #top .pic.container:after, #top nav.pic:after, #top #index .pic.container:after, #index #top .pic.container:after, #top #studentsArea dl.pic:after, #studentsArea #top dl.pic:after {
        content: '';
        width: 100%;
        height: 100%;
        background: rgba(255,255,255,0);
        position: absolute;
        top: 0;
        left: 0;
        transition: background .4s ease-out
    }

#top .title {
    padding-left: .32rem;
    padding-right: .32rem;
    padding-top: .32rem;
    padding-bottom: .32rem
}

#top h3 {
    border-left: 2px solid #990309;
    padding-left: .16rem
}

.main figure {
    margin-bottom: .8rem
}

.main table {
    text-align: center;
    margin-bottom: .6rem
}

@media screen and (max-width:480px) {
    .main table {
        display: block;
        text-align: left
    }
}

.main table thead {
    border-bottom: 2px solid #990309;
    color: #990309
}

@media screen and (max-width:480px) {
    .main table thead {
        display: block
    }
}

@media screen and (max-width:480px) {
    .main table tbody {
        display: block
    }
}

.main table tbody tr {
    border-bottom: 1px solid rgba(0,0,0,.05)
}

@media screen and (max-width:480px) {
    .main table tbody tr {
        display: block;
        padding-top: .2rem;
        padding-bottom: .2rem
    }
}

.main table th, .main table td {
    padding-left: .2rem;
    padding-right: .2rem;
    padding-top: .3rem;
    padding-bottom: .3rem
}

@media screen and (max-width:480px) {
    .main table th {
        display: none
    }
}

.main table td {
    line-height: 1.6
}

@media screen and (max-width:480px) {
    .main table td {
        display: block;
        padding-top: .14rem;
        padding-bottom: .14rem
    }
}

.main table ul {
    list-style: disc;
    list-style-position: inside
}

.main table li {
    line-height: 1.6;
    text-indent: -1.05em;
    margin-left: 1.05em
}

#qa h1 {
    color: #990309;
    margin-bottom: .6rem
}

#qa h2 {
    font-size: .36rem
}

#qa dd {
    padding-top: .3rem;
    padding-bottom: .3rem
}

    #qa dd * {
        line-height: 1.8
    }

#qa a {
    display: inline;
    color: #990309;
    border-bottom: 1px solid #990309;
    transition: all .2s ease-out
}

    #qa a:hover {
        border-bottom: 1px solid transparent
    }

#qa p {
    text-overflow: inherit;
    overflow: inherit;
    white-space: normal
}

#qa span {
    display: block;
    font-size: .32rem
}

.list {
    margin-bottom: .9rem
}

@media screen and (max-width:480px) {
    .list {
        margin-bottom: .5rem
    }
}

.list dl {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative
}

    .list dl:after {
        content: '';
        width: 100%;
        height: 1px;
        background: url(../images/dotted.gif) repeat-x left top;
        position: absolute;
        bottom: 0;
        left: 0
    }

.list dt {
    -webkit-flex: none;
    -ms-flex: none;
    flex: none
}

    .list dt .tag {
        width: 1.76rem;
        text-align: center;
        padding-top: .1rem;
        padding-bottom: .1rem;
        font-size: .32rem;
        color: #fff;
        background: #cf2930
    }

.list dd {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 80%;
    padding-left: .36rem;
    padding-top: .16rem;
    padding-bottom: .16rem
}

    .list dd span {
        font-size: .26rem;
        line-height: 1.4;
        color: #737373
    }

    .list dd p {
        font-size: .32rem;
        line-height: 1.5;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        margin-bottom: 0
    }

@media screen and (max-width:480px) {
    .list dd p {
        font-size: .36rem;
        text-overflow: inherit;
        white-space: inherit;
        overflow: inherit
    }
}

.titlebar {
    border: 1px solid #e4e3e3;
    border-left: 3px solid #990309;
    background: #ecebeb;
    padding-top: .2rem;
    padding-bottom: .2rem;
    padding-left: .2rem;
    padding-right: .2rem;
    box-sizing: border-box;
    position: relative
}

    .titlebar .more {
        position: absolute;
        right: .36rem;
        top: .26rem
    }

    .titlebar h1, .titlebar h2 {
        font-size: .44rem;
        font-weight: 400
    }

@-webkit-keyframes more {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    50% {
        -webkit-transform: translateX(-4px);
        transform: translateX(-4px)
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes more {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    50% {
        -webkit-transform: translateX(-4px);
        transform: translateX(-4px)
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

.more {
    font-size: .3rem
}

    .more:before, .more.clear:after, .body .more.container:after, nav.more:after, #index .more.container:after, #studentsArea dl.more:after {
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        right: 100%;
        top: 50%;
        border-color: transparent transparent transparent #990309;
        border-style: solid;
        border-width: .08rem;
        margin-top: -.04rem
    }

    .more:hover:before, .more.clear:hover:after, .body .more.container:hover:after, nav.more:hover:after, #index .more.container:hover:after, #studentsArea dl.more:hover:after {
        -webkit-animation: more .8s infinite linear;
        animation: more .8s infinite linear
    }

    .more a:hover, .more a:focus {
        color: #000
    }

#download h1 {
    color: #990309;
    margin-bottom: .6rem
}

#download .list dt {
    width: 1rem
}

#download .list .tag {
    width: 1rem;
    text-align: center;
    padding-top: .04rem;
    padding-bottom: .04rem;
    font-size: .28rem;
    color: #fff;
    background: #cf2930
}

#download .list i {
    margin-left: .2rem
}

.slide {
    margin-bottom: .9rem
}

@media screen and (max-width:480px) {
    .slide {
        margin-bottom: .5rem
    }
}

.slide dl {
    position: relative
}

    .slide dl:after {
        content: '';
        width: 100%;
        height: 1px;
        background: url(../images/dotted.gif) repeat-x left top;
        position: absolute;
        bottom: 0;
        left: 0
    }

.slide dt {
    border: 1px solid #e4e3e3;
    border-left: 3px solid #990309;
    background: #ecebeb;
    padding-top: .2rem;
    padding-bottom: .2rem;
    padding-left: .2rem;
    padding-right: .2rem;
    box-sizing: border-box;
    position: relative;
    cursor: pointer
}

    .slide dt h2 {
        font-size: .44rem;
        font-weight: 400
    }

.slide dd {
    padding-left: .3rem;
    padding-top: .16rem;
    padding-bottom: .16rem
}

    .slide dd span {
        font-size: .26rem;
        line-height: 1.4;
        color: #737373
    }

    .slide dd p {
        font-size: .32rem;
        line-height: 1.5;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        margin-bottom: 0
    }

@media screen and (max-width:480px) {
    .slide dd p {
        font-size: .36rem;
        text-overflow: inherit;
        white-space: inherit;
        overflow: inherit
    }
}

.imgCenter {
    width: 100%;
    position: absolute;
    top: 0;
    bottom: auto;
    left: 0;
    right: auto;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    transition: -webkit-transform 6s cubic-bezier(.165,.84,.44,1);
    transition: transform 6s cubic-bezier(.165,.84,.44,1);
    transition: transform 6s cubic-bezier(.165,.84,.44,1), -webkit-transform 6s cubic-bezier(.165,.84,.44,1)
}

    .imgCenter:hover {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1)
    }

@media screen and (max-width:1024px) {
    .imgCenter:hover {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

.accesskey {
    font-size: .26rem;
    margin-right: .4rem
}

    .accesskey:focus {
        border: 1px dotted #9d876a;
        color: #9d876a
    }

@media screen and (max-width:768px) {
    .accesskey {
        display: none
    }
}

.video, .map {
    position: relative;
    margin-bottom: .5rem
}

@media screen and (max-width:768px) {
    #studentsArea {
        display: block
    }
}

#studentsArea dt, #studentsArea dd {
    position: relative;
    border: 1px solid #cfcec9;
    box-sizing: border-box;
    padding: 0
}

@media screen and (max-width:768px) {
    #studentsArea dt, #studentsArea dd {
        width: 49%;
        float: left
    }
}

@media screen and (max-width:480px) {
    #studentsArea dt, #studentsArea dd {
        width: auto;
        float: none;
        margin-bottom: .4rem
    }
}

#studentsArea dt {
    margin-bottom: .4rem
}

@media screen and (max-width:768px) {
    #studentsArea dt {
        margin-right: 2%
    }
}

@media screen and (max-width:480px) {
    #studentsArea dt {
        margin-right: 0
    }
}

#studentsArea .title {
    width: 61.5%;
    position: absolute;
    bottom: 1.2rem;
    right: .28rem;
    z-index: 2
}

    #studentsArea .title.t4 {
        width: 79.75%
    }

#studentsArea .btn {
    position: absolute;
    bottom: .4rem;
    right: .44rem;
    font-size: .32rem;
    line-height: .6rem;
    padding-left: .6rem;
    padding-right: .6rem;
    border-radius: .5rem;
    background: url(../images/btn_bg.jpg) repeat-x left top;
    background-size: auto 100%;
    color: #fff;
    z-index: 2;
    transition: background .3s ease-out
}

@media screen and (max-width:480px) {
    #studentsArea .btn {
        font-size: .36rem;
        line-height: .7rem
    }
}

#studentsArea a {
    padding-top: 0;
    padding-bottom: 0
}

    #studentsArea a:before, #studentsArea a.clear:after, #studentsArea .body a.container:after, .body #studentsArea a.container:after, #studentsArea #index a.container:after, #index #studentsArea a.container:after {
        content: '';
        width: 100%;
        height: 100%;
        background: transparent;
        position: absolute;
        top: 0;
        left: 0;
        transition: background .6s ease-out;
        cursor: pointer;
        z-index: 1
    }

    #studentsArea a:hover .btn, #studentsArea a:focus .btn {
        background: url(../images/btn_bg_hover.jpg) repeat-x left top;
        background-size: auto 100%
    }

    #studentsArea a:hover:before, #studentsArea a.clear:hover:after, #studentsArea .body a.container:hover:after, .body #studentsArea a.container:hover:after, #studentsArea #index a.container:hover:after, #index #studentsArea a.container:hover:after, #studentsArea a:focus:before, #studentsArea a.clear:focus:after, #studentsArea .body a.container:focus:after, .body #studentsArea a.container:focus:after, #studentsArea #index a.container:focus:after, #index #studentsArea a.container:focus:after {
        background: rgba(0,0,0,.4)
    }

#col_4 {
    margin-top: .64rem
}

@media screen and (max-width:768px) {
    #col_4 {
        margin-top: 0
    }
}

#col_4 dd {
    width: 23.07692307692308%;
    margin-right: 2.564102564102564%;
    position: relative;
    border: 1px solid #cfcec9;
    box-sizing: border-box;
    padding: 0
}

    #col_4 dd:nth-child(4n) {
        margin-right: 0
    }

@media screen and (max-width:768px) {
    #col_4 dd {
        width: 49%;
        margin-right: 2%;
        margin-bottom: .4rem
    }

        #col_4 dd:nth-child(2n) {
            margin-right: 0
        }
}

@media screen and (max-width:480px) {
    #col_4 dd {
        width: 100%;
        margin-right: 0
    }
}

#col_4 .title {
    width: 61.5%;
    position: absolute;
    bottom: 1.2rem;
    right: .28rem;
    z-index: 2
}

#col_4 .btn {
    position: absolute;
    bottom: .4rem;
    right: .44rem;
    font-size: .32rem;
    line-height: .6rem;
    padding-left: .6rem;
    padding-right: .6rem;
    border-radius: .5rem;
    background: url(../images/btn_bg.jpg) repeat-x left top;
    background-size: auto 100%;
    color: #fff;
    z-index: 2;
    transition: background .3s ease-out
}

@media screen and (max-width:480px) {
    #col_4 .btn {
        font-size: .36rem;
        line-height: .7rem
    }
}

#col_4 a {
    padding-top: 0;
    padding-bottom: 0
}

    #col_4 a:before, #col_4 a.clear:after, #col_4 .body a.container:after, .body #col_4 a.container:after, #col_4 #index a.container:after, #index #col_4 a.container:after {
        content: '';
        width: 100%;
        height: 100%;
        background: transparent;
        position: absolute;
        top: 0;
        left: 0;
        transition: background .6s ease-out;
        cursor: pointer;
        z-index: 1
    }

    #col_4 a:hover .btn, #col_4 a:focus .btn {
        background: url(../images/btn_bg_hover.jpg) repeat-x left top;
        background-size: auto 100%
    }

    #col_4 a:hover:before, #col_4 a.clear:hover:after, #col_4 .body a.container:hover:after, .body #col_4 a.container:hover:after, #col_4 #index a.container:hover:after, #index #col_4 a.container:hover:after, #col_4 a:focus:before, #col_4 a.clear:focus:after, #col_4 .body a.container:focus:after, .body #col_4 a.container:focus:after, #col_4 #index a.container:focus:after, #index #col_4 a.container:focus:after {
        background: rgba(0,0,0,.4)
    }

#fontBtn {
    position: absolute;
    right: 0;
    top: 0;
    line-height: 1;
    margin: 0
}

@media screen and (max-width:480px) {
    #fontBtn {
        position: relative;
        text-align: right;
        margin-bottom: .3rem
    }
}

#fontBtn ul {
    margin: 0
}

#fontBtn li {
    width: .56rem;
    margin-right: .12rem
}

    #fontBtn li a {
        padding-top: .12rem;
        padding-bottom: .12rem;
        border-radius: 1rem;
        font-size: .32rem;
        text-align: center;
        position: relative;
        background-color: #888;
        color: #fff;
        border: none;
        display: block
    }

        #fontBtn li a:focus, #fontBtn li a:hover {
            border: none;
            background-color: #fff;
            color: #888
        }

    #fontBtn li:last-child a {
        padding-top: .1rem;
        padding-bottom: .1rem;
        font-size: .38rem
    }

.breadcrumb {
    margin-bottom: 1rem
}

@media screen and (max-width:480px) {
    .breadcrumb {
        display: none
    }
}

.breadcrumb li {
    font-size: .3rem;
    color: #2a2a2a;
    margin-right: .2rem
}

    .breadcrumb li:after {
        content: '>';
        margin-left: .2rem
    }

    .breadcrumb li:last-child:after {
        display: none
    }

.breadcrumb a {
    display: inline;
    color: #2a2a2a
}

    .breadcrumb a:active, .breadcrumb a:focus, .breadcrumb a:hover {
        color: #9d876a
    }

#pageNum {
    padding-top: 1.1rem;
    text-align: center
}

    #pageNum li {
        font-size: .28rem;
        margin-right: .6rem
    }

@media screen and (max-width:640px) {
    #pageNum li {
        margin-right: .2rem
    }
}

#pageNum li:last-child {
    margin-right: 0
}

#pageNum li a {
    color: #990309;
    width: auto;
    padding-top: .08rem;
    padding-bottom: .08rem;
    padding-left: .12rem;
    padding-right: .12rem;
    border: 1px solid transparent;
    box-sizing: border-box;
    font-size: .3rem;
    line-height: 1;
    transition: all .6s ease-out
}

    #pageNum li a:hover {
        border: 1px solid #990309
    }

#pageNum li.select a {
    border: 1px solid #990309
}