body
{
    padding-top: 5em;
}
#accesskey_c, .accesskey {
color: transparent!important;
}
*:focus {
    outline: 4px dotted red !important;
}
.blockDiv table th{
    border: solid 1px #333;
}
.blockDiv table td{
    border: solid 1px #333;
}

#main{
    text-transform:none !important;
}
#main a{
    color:#1414ff;
}
#main a:hover{
    color:#006165;
}
#header {
    height:5.5em;
}
#header nav {
    top: 2em;
}
#otherNav{
    position:absolute;
    top:0;
    right:1.5em;
    font-size: 1em;
    font-weight: 300;
}

#footer a{
    color:#1414ff;
}
#footer a:hover{
    color:#006165;
}
table th {
    text-transform:none !important;
}
body, input, select, textarea {
    font-family: 'Noto Sans TC', sans-serif;
}
#d700{
    height:700px;
}
.inner hr{
    border-bottom-color: #737373;
}
#innerBlocks > .inner {
    margin: 0 auto;
    max-width: 90em;
    width: 90%;
}
#headerDiv{
    position:absolute; top:0; z-index:100; width:100%
}
#headerH1
{
    display:none;
}
#header.reveal {
    height: auto;   
    background: #fff;
}
#header.alt {
    height: 3.5em;   
}
#header.alt {
    -moz-animation: none;
    -webkit-animation: none;
    -ms-animation: none;
    animation: none;
    background-color: transparent;
    box-shadow: none;
    overflow: hidden;
    position: absolute;
    top: 0;
    box-shadow: none;
    background: linear-gradient(to top, rgba(255,255,255,0.7) 0, rgba(255,255,255,1) 100%);
}
#header.alt a{
    color:#444;   
}
#smallLogo
{
    height:100px;
}
.reveal nav {
    top:auto !important;
    bottom:0.5em !important;
}
.alt nav {
    top:0 !important;
}

#ran
{
    margin-left:9%;
}
.tb
{
    display: table;
    width:90%;
}
.tDate
{
    float:left;
    width:100px;
    color:#B55DC0;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight:500;
}
.tTitle
{
    font-family: 'Noto Sans TC', sans-serif;
    display: table-cell;
    width:100%;
    vertical-align: top;
    font-weight:300;
}

.bookDiv{
    /* padding:2em; */
    padding-top:2em;
    padding-bottom:2em;
    border-radius: 25px;
    background-color: #fff;
    position:relative;
    z-index:0;
}

.mySwiper
{
    padding-left:50px;
    padding-right:50px;
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 1.125em;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    max-width:180px;
    height: 100%;
    object-fit: cover;
}

#footer
{
    border-top:none;
    padding:0;
}
.jq_skywheel li {
    /* border: 1px solid #fff; */
    padding:0;
    padding-top:2em;
    box-shadow:0px 0px 9px #fff;
}
.tbHead
{
    position: relative;
    width:100%;
}
.tbHead:after
{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1.3em;
    border-top: 1px solid #5FB7E5;
    z-index: -1;
}



.tTitle span
{
    background-color: white;
    padding-left:0.5em;
    padding-right:0.5em;
}

.center sapn
{
    background-color:#fff !important;
}

.tbContent
{
    padding:2em;
}

.center>.tb 
{
    position: relative;
    width:100%;
}
.center>.tb:after
{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0.5em;
    border-top: 1px solid #5FB7E5;
    z-index: -1;
}

#footerLogos
{
    margin-top: -150px;
}
#footerLogos img
{
    margin-left:1em;
    margin-right:1em;
}
a
{
    border-bottom:none;
}
#topLabel
{
    text-align:center; 
    margin-top:-192px;
    font-size:1.5em;
}
#topLabel2
{
    text-align:center; 
    font-size:1.5em;
    margin-top:40px;
}

#innerBlock
{    
    margin-top: 381px;
}
.blockDiv{
    /* padding:2em; */
    padding-top:2em;
    padding-bottom:2em;
    border-radius: 25px;
    background-color: #fff;
    position:relative;
    z-index:0;

    width:100%;
    margin:auto;
    margin-top:50px;
}
.blockDiv .tbContent
{
    padding-left:6em;
    padding-right:6em;

}
#ranDiv{
    width:100%;
    margin:auto;
    /*margin-top: 550px;*/
    margin-top:28.5vw;
}
p {
    margin: 0 0 1em 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: normal;
    line-height: 1em;
    margin: 0 0 0.5em 0;
    padding-bottom: 0;
    position: relative;
    text-transform: none;
}
.tTitle h2{
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 2.25em; 
    /* color:#4C98C8; */
    color:#333;
    font-weight:700;
    margin: 0;
    line-height:1.3em;
}
.piSec
{
    background-color:transparent;
}
.square{

    z-index:50;
    width:7%; 
    padding-bottom:7%; 
    text-align:center;
    background-color:#e5ca6e;
    border-radius:25px; 
    color:#fff;
    position: relative; 
}
.left-square{
    float:left; 
    margin-top:-500px; 
    margin-left:1%;
}
.right-square{
    float:right;
    margin-top:-400px; 
    margin-right:1%;
}
.square-text{
    position: absolute; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    top: 0; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-size:1.4em;
}
.square:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    border-top: 1px solid #fff;
    z-index: -1;
}

#frontInnerBlocks{
    display:none;
}

.700d{
    height:700px;
}

.tbContent table{
    width: 100% !important;
}
#bigPhoto{
    display:block;
}
#piContentDiv{
    flex-basis:75%;
}
#smallPhoto{
    display:none;
}

#tab-nav ul{
    margin:0;
}
#tab-nav ul li{
    border-radius:30px;
    list-style:none;
    display: inline-block;
    padding: 13px 35px;
    margin:10px;
    font-size:1.5em;
    /*color:#e5ca6e;*/
    cursor:pointer;
    position:relative;
    z-index:2;
    transition: color 0.5s;
}
#tab-nav ul li::after{
    content:'';
    background:#e5ca6e;
    width:100%;
    height:100%;
    border-radius:30px;
    position:absolute;
    top:100%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:-1;
    opacity:0;
    transition: top 0.5s, opacity 0.5s;
}
#tab-nav ul li:hover{
    /* color:#fff; */
    color:#000;
}
#tab-nav ul li:hover::after{
    top:50%;
    opacity:1;
}
.tcell
{
    display: table-cell;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight:300;
    text-align:center;
}
.cell50
{
    width:50%;
}

#myCanvas{
    width:100vw; height:auto; z-index:11000; position:absolute;
}
.piN{
    font-size:1em;
}
/*
@media screen and (max-width: 1280px) {
    #ranDiv{
    margin-top: 400px;
}
}

@media screen and (max-width: 1080px) {
    #ranDiv{
    margin-top: 400px;
}
}
*/

@media screen and (max-width: 736px) {
    #header{
        height:4em;
    }
    #headerH1 {
        /*display: block; */
    }
    #headerH1 img{
        height:100%;
        width:auto;
    }
    #headerDiv{
        padding-top:3em;
    }
    #ranDiv {
        display:none;  
    }
    #frontInnerBlocks{
        display:block;  
        /* margin-top:300px;  */
    }
    #d700 {
       height:0px; 
    }
    #innerBlock{
        /*padding:1em;*/
        padding:0em;
    }
    .blockDiv .tbContent {
        padding-left: 1em;
        padding-right: 1em;
    }
    .700d{
        height:0px;
    }
    .tTitle h2 {
        font-size: 1.75em;
    }
    .blockDiv {
        margin-top:1em;   
    }
    .wrapper > .inner {
        /*padding: 1em;*/
        padding: 0em;
    }
    #footerLogos{
        margin-top:-1px;
        background-color: #f0f0f0;
    }
    #topLabel2{
        display:none;
    }
    #bigPhoto{
        display:none;
    }
    #piPhotoDiv{
        display:none;
    }
    #piContentDiv{
        flex-basis:100%;
    }
    #smallPhoto{
        display:block;
    }
    #tab-nav ul li {
        margin: 5px;
        font-size: 1em;
        padding: 13px 28px !important;
    }

    .trow {
        display: block;
    }
    .tcell {
        display:inline-block;
        line-height: 1.2em !important;
        font-size: 1.2em !important;
    }
    .cell50
    {
        width:100%;
    }
    .piN{
        font-size:0.8em !important;
    }
    #otherNav{
        display:none;
    }
}