@charset "UTF-8";
*{
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
html{
    font-size:16px;
}
body{
    margin:0 auto;
    padding:0;
    font-size:100%;
    font-weight:400;
    font-family:微軟正黑體, "Microsoft JhengHei", sans-serif;
    letter-spacing:1px;
    line-height:1.5;
    /* background:url(../img/noise.png); */
}
h1{
    font-size:2rem;
    font-family: 微軟正黑體, "Microsoft JhengHei", sans-serif;
    margin-bottom:1.5rem;
    font-weight: bold;
}
@media (max-width:50rem){
    h1{
        font-size:1.625rem;
        padding:0;
    }
}
@media (max-width:24rem){
    h1{
        font-size:1.5rem;
    }
}
@media (max-width:20rem){
    h1{
        padding:0;
    }
}
h2{
    font-size:1.4rem;
    font-weight:600;
    font-family: 微軟正黑體, "Microsoft JhengHei", sans-serif;
    color:#232323;
    margin-bottom:1rem;
}
.h2wrap{
    padding:0rem 10rem 0rem 9rem;
    padding-top: 60px;
} 
.h3wrap,.h3wrap2{padding: 0rem 10rem 0rem 9rem;}
.h2wrap span{
    font-weight: bold;
    font-size: 1.5rem;
    color: rgb(118, 165, 175)
}
/* .h2wrap img{vertical-align: inherit;padding-right: 5px;} */
.h3wrap img,.h3wrap2 img{vertical-align: inherit;padding-right: 5px;}
article .h2bg{
    /* background: left url("../img/tag.svg") no-repeat; */
    color: #3B798C;
    /* width: 200px;
    height: 56px; */
    display: inline-block;
    /* align-items: center;
    justify-content: center; */
    font-size: 22px;
    margin-bottom: -8px;
  }
  article .h3bg{
    display: inline-block;
    margin-bottom: -10px;
  }
/* article .bottomline{

    background-color: #000;
}  */
article .wrapbg{
    background: bottom / contain no-repeat url("../img/Light-04.png"), #BFDBE2;
    /* margin-bottom: -18px; */
    /* z-index: -1; */
    position: relative;
    padding-bottom: 10px;
}
article .wrapbg2{
    display: block;
    background-size: cover;
    background:url(../img/pic-bg.png) 100% no-repeat;
    box-shadow: 0px 7px 8px rgba(116, 171, 182,0.9);
    -moz-box-shadow: 0px 7px 8px rgba(116, 171, 182,0.9);
    position: relative;
    z-index: 1;
}
article .mb-wrapbg2, article .mb-wrapbg3{
    display: none;
}
h2 a{
    color:#232323;
    border-bottom:1px dotted;
}

@media (max-width:56rem){
    article .wrapbg2{display: none;}
    article .mb-wrapbg2{
        display: block;
        background:url(../img/pic-bg-mb.png) 100% no-repeat;
        box-shadow: 0px 7px 8px rgba(116, 171, 182,0.9);
        -moz-box-shadow: 0px 7px 8px rgba(116, 171, 182,0.9);
        position: relative;
        z-index: 1;
    }
}
@media (max-width:50rem){
.h2wrap {
    padding: 3rem 2rem 0rem 1rem;
  }
  /* article .wrapbg{
    margin-bottom: 0px;
}   */
}

@media (max-width:37.5rem){

    article .mb-wrapbg2{
        display: none;
    }
    article .mb-wrapbg3{
        display: block;
        background:url(../img/pic-bg-mb2.png) 100% no-repeat;
        box-shadow: 0px 7px 8px rgba(116, 171, 182,0.9);
        -moz-box-shadow: 0px 7px 8px rgba(116, 171, 182,0.9);
        position: relative;
        z-index: 1;
    }
}

@media (max-width:24rem){
    h2{
        font-size:1.25rem;
    }
}
h3{
    font-size:1.125rem;
    font-weight:600;
    font-family: 微軟正黑體, "Microsoft JhengHei", sans-serif;
    color:#3B798C;
;
}
.h3wrap2 h3{
    margin: 0px;
    padding-top: 80px
}
@media (max-width:37.5rem){
    h3{
        font-size:1.125rem;
    }
}
@media (max-width:24rem){
    h3{
        font-size:1rem;
    }
}
p{
    font-size:1.125rem;
    line-height:1.8;
}
p a{
    color:#232323;
    font-weight:bold;
    border-bottom:1px dotted;
}
ul li{
    font-size: 1.125rem;
    line-height: 1.8;
    list-style:disc;
    margin-left: 1.2rem;
    padding-bottom: 0.5rem;
    /* padding-left: 1em;
    text-indent: -1em; */
    
}
@media (max-width:24rem){
    p,ul li{
        font-size:1rem;
    }
}

a{
    text-decoration:none;
}
a:hover{
    opacity:0.9;
    -webkit-transition:all .3s ease;
    -o-transition:all .3s ease;
    transition:all .3s ease;
}
.btn_FB span,.cnalogo span{
    display:none;
}
img{
    max-width:90%;
    height:auto;
    display:initial;
    vertical-align:middle;
}
figure{
    text-align:center;
}
figcaption{
    font-size:0.875rem;
}
@media (max-width:40rem){
    .pcshow{
        display:none;
    }
}

.mshow{
    display:none;
}
@media (max-width:40rem){
    .mshow{
        display:inline-block;
        overflow:hidden;
    }
}
.hidden{
    display:none;
}
.b-padding,.listbox,article p{
    padding:0 10rem 3rem 10rem;
}
ul{
    padding:0 10rem 0rem 10rem;
}
article p{
    padding:0 10rem 0.5rem 10rem;
}
article .ultitle{
    font-size: 1.125rem;
    font-weight: bold;
    padding: 1.5rem 10rem 0.5rem 10rem;
    color: #3B798C;
}
article .list li{
    padding-bottom: 0.5rem ;
}

@media (max-width:50rem){
    .b-padding,.listbox{
        padding:0 2rem 3rem 2rem;
    }
    ul,article .ultitle{
        padding:0 2rem 1.5rem 2rem;
    }
    article p, .h3wrap,.h3wrap2{
        padding:0 2rem 0.5rem 2rem;   
    }
}
@media (max-width:40rem){
    .b-padding,.listbox{
        padding:0 2rem 3rem 2rem;
    }
    ul{
        padding:0 2rem 0rem 2rem;
    }
    article .ultitle{
        padding:1.25rem 2rem 0.85rem 2rem;
    }
    article .end{
        padding:0 2rem 3rem 2rem;
    }
    .h3wrap,.h3wrap2{
        padding:0 2rem 0rem 2rem;   
    }
}
@media (max-width:24rem){
    .b-padding,.listbox{
        padding:0 2rem 2.5rem 2rem;
    }
}
.s-pdbottom{
    padding-bottom:1.5rem;
}
.open{
    overflow:hidden;
}
header{
    display:table;
    width:100%;
    vertical-align:middle;
}
@media (max-width:480px){
    header{
        padding:0;
    }
}
.logo_box{
    color:#FAFAFA;
    font-weight:bold;
    float:left;
    margin-top:2px;
    padding:5px 0;
    position: absolute;
    z-index: 9;
}
.logo_box span{
    font-size:1.5rem;
    vertical-align:middle;
}
.logo_box span a{
    color:#FAFAFA;
    -webkit-filter:drop-shadow(0px 0px 4px rgba(35, 35, 35, 0.8));
    filter:drop-shadow(0px 0px 4px rgba(35, 35, 35, 0.8))
}
@media (max-width:480px){
    .logo_box span{
        font-size:1.375rem;
    }
}
.icon-cnalogo{
    fill:#FAFAFA;
    width:50px;
    height:50px;
    margin:0 5px 0 0;
    vertical-align:middle;
    -webkit-filter:drop-shadow(0px 0px 4px rgba(35, 35, 35, 0.8));
    filter:drop-shadow(0px 0px 4px rgba(35, 35, 35, 0.8));
}
@media (max-width:480px){
    .icon-cnalogo{
        width:46px;
        height:46px;
    }
}
.wrapper{
    max-width:960px;
    margin:0 auto;
    clear:both;
}
.wrapper-m{
    max-width:1200px;
    margin:0 auto;
    text-align:center;
    clear:both;
}
@media (max-width:64rem){
    .wrapper, .wrapper-m{
        padding:0 0.938rem;
    }
}

.wrapper-lg{
    max-width:1080px;
    margin:0 auto;
    clear:both;
}
.wrapper-lg .imgtitle{
    max-width:656px;
    padding:0 0 0.5rem 0;
    margin:0 auto;
}
@media (max-width:50rem){
    .wrapper-lg .imgtitle{
        padding:0 0 0.5rem 0;
    }
}
@media (max-width:40rem){
    .wrapper-lg .imgtitle{
        padding:0 2rem 0.5rem 2rem;
    }
}
.wrapper-lg .imgblock,.wrapper-lg .media,.wrapper-lg .tablebox{
    padding:0 0 3rem 0;
}
@media (max-width:64rem){
    .wrapper-lg{
        padding:0;
    }
}
/* .visualbox{
    width:100%;
    height:72vh;
    position:relative
}
.visualbox:before{
    content:"";
    min-height:72vh;
    position:absolute;
    top:0;
    left:0;
    right:0;
    background:center center url("../img/Keyvisual_ .png") no-repeat;
    background-size:cover; 
    z-index:0;
}  */
video {
    width: 100%;
    height: auto;
  } 
#myVideo {
    position: relative;
    right: 0;
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
    display: block;
    overflow:hidden;
  }
  #myVideo-m {
    display: none;
  }
.visualbox .wrapper{
    height:100%;
    position:relative;
}
@media (max-width:64rem){
    .visualbox{
        height:56vh;
    }
}
@media (max-width:50rem){
    #myVideo{display: none;}
    #myVideo-m {
        position: relative;
        right: 0;
        bottom: 0;
        min-width: 100%; 
        min-height: 100%;
        display: block;
      }
}

/* @media (max-width:50rem){
    .visualbox:before{
        background:center center url("../img/Keyvisual_m.png") no-repeat;
        background-size:cover;
    }
}
@media (max-width:37.5rem){
    .visualbox:before{
        content:"";
        min-height:58vh;
}
} */
.source{
    font-size:0.75rem;
    color:#FAFAFA;
    left:0;
    bottom:1rem;
    position:absolute;
    text-shadow:0px 0px 4px #232323;
}
@media (max-width:64rem){
    .source{
        margin-left:1rem;
    }
}
.infobox{
    width:100%;
    position:relative;
    background-color: #BFDBE2;
}
.info{
    color:#3B798C;
    /* background-color:#03153A; */
    padding:3rem 0;
    position:relative;
}

.info h1{color:#3B798C;}
.info a{
    color:#3B798C;
    font-weight: bold;
}
.info .wrapper{
    text-align:center;
}
.info p{
    text-align: left;
}
.hr{
    width: 100%;

}
/*
@media (max-width:64rem){
    .info{
        padding:11rem 0 1rem;
    }
}
 @media (max-width:55rem){
    .info{
        padding:5rem 0 1rem;
    }
}
@media (max-width:50rem){
    .info{
        padding:11rem 0 1rem;
    }
} */
@media (max-width:37.5rem){
    .info{
        padding:2.5rem 0;
    }
}
.staff{
    color:#000;
    font-size:0.875rem;
    margin-bottom:0.5rem
}
.date{
    font-size:0.875rem;
    opacity:0.85
}
.border{
    content:'';
    display:inline-block;
    width:20px;
    height:1px;
    background-color:#333;
    vertical-align:middle;
}
.scrollhint{
    width:1px;
    height:96px;
    position:relative;
    bottom:0.5rem;
    left:0;
    right:0;
    margin:0 auto;
    overflow:hidden;
}
.scrollhint .sline{
    width:100%;
    height:100%;
    display:block;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(50%, #6a6969), color-stop(50%, rgba(255, 255, 255, 0)));
    background:-webkit-linear-gradient(top, #6a6969 50%, rgba(255, 255, 255, 0) 50%);
    background:-o-linear-gradient(top, #6a6969 50%, rgba(255, 255, 255, 0) 50%);
    background:linear-gradient(to bottom, #6a6969 50%, rgba(255, 255, 255, 0) 50%);
    background-position:0 -96px;
    background-size:100% 200%;
    -webkit-animation:scrolldown 2.2s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite;
    animation:scrolldown 2.2s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite;
}
@media (max-width:40rem){
    .scrollhint .sline{
        width:100%;
        height:100%;
        display:block;
        background:-webkit-gradient(linear, left top, left bottom, color-stop(50%, #6a6969), color-stop(50%, rgba(255, 255, 255, 0)));
        background:-webkit-linear-gradient(top, #6a6969 50%, rgba(255, 255, 255, 0) 50%);
        background:-o-linear-gradient(top, #6a6969 50%, rgba(255, 255, 255, 0) 50%);
        background:linear-gradient(to bottom, #6a6969 50%, rgba(255, 255, 255, 0) 50%);
        background-position:0 -72px;
        background-size:100% 200%;
        -webkit-animation:scrolldown2 2.2s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite;
        animation:scrolldown2 2.2s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite;
    }
}
@media (max-width:40rem){
    .scrollhint{
        height:72px;
    }
}
@-webkit-keyframes scrolldown{
    0%{
        background-position:0 -96px
    }
    75%{
        background-position:0 0
    }
    to{
        background-position:0 96px
    }
}
@keyframes scrolldown{
    0%{
        background-position:0 -96px
    }
    75%{
        background-position:0 0
    }
    to{
        background-position:0 96px
    }
}
@-webkit-keyframes scrolldown2{
    0%{
        background-position:0 -72px
    }
    75%{
        background-position:0 0
    }
    to{
        background-position:0 72px
    }
}
@keyframes scrolldown2{
    0%{
        background-position:0 -72px
    }
    75%{
        background-position:0 0
    }
    to{
        background-position:0 72px
    }
}
.main{
    height:100%;
    position:relative;
    -webkit-overflow-scrolling:touch;
}
article{
    color:#333333;
    font-weight: 400;
}

@media (max-width:40rem){
    article .wrapper{
        padding:0;
    }
}
/* article h2{
    padding:0 10rem 1rem 10rem;
    margin-bottom:0;
} */
@media (max-width:50rem){
    article h2{
        margin-bottom:1rem;
    }
}

.supbox {
    max-width: 650px;
    margin: 0 auto;
    border: 1px solid #74ABB6;
    padding: 40px;
    position: relative;
    background-color: #fff;
    opacity: 0.8;
}
.supbox .ultitle{
    font-size: 1.25rem;
    font-weight: bold;
    padding: 1.5rem 0rem 0.5rem 0rem;
}
.supbox ul{
    padding:0rem;
}
.supbox ul li{
    color: #3B798C;
}
.supbox .green{ color: #5aa3af; padding: 0rem 0rem 0.5rem 0rem;}
.imgblock,.media,.tablebox{
    width:100%;
    /* padding:0 5rem 0.5rem 5rem; */
    position:relative;
    padding:0rem 5rem 0rem 5rem;
}
.imgbg{
    /* background-color: #fff; */
    background-size: cover;
    background:url(../img/bg.png) 100% no-repeat;
    margin-bottom: -2.5rem;
    box-shadow: 0px 7px 8px rgb(116 171 182 / 90%);
    position: relative;
    z-index: 1;
}
.imgblock-tw{
    max-width: 800px;
    position: relative;
    margin: 0 auto 40px;
}
/* @media (max-width:50rem){
    .imgblock,.media,.tablebox{
        padding:0 2rem 3rem 2rem;
    }
} */
@media (max-width:50rem){
    .media,.tablebox{
        padding:0 2rem 3rem 2rem;
    }
}
@media (max-width:40rem){
    .imgblock,.media,.tablebox{
        padding:0 0 3rem 0;
    }
    .supbox {
        max-width: 450px;
        padding: 30px;
        margin: 1.25rem;
    }
}
@media (max-width:24rem){
    .imgblock,.media,.tablebox{
        padding:0 0 2.5rem 0;
    }
    .supbox {
        max-width: 350px;
    }
}
.imgtitle{
    font-size:1.375rem;
    font-weight:bold;
    padding:0 5rem 0.5rem 5rem;
}
@media (max-width:50rem){
    .imgtitle{
        padding:0 0 0.5rem 0;
    }
}
@media (max-width:40rem){
    .imgtitle{
        padding:0 1.95rem 0.5rem 1.95rem;
    }
}
.imgbox{
    width:100%;
    height:100%;
    position:relative;
    text-align: center;
}
.xscroll{
    max-width:100vw;
    overflow-y:auto;
    background:#FAFAFA;
}
.imgcaption{
    padding:0.5rem 5rem;
    font-size:0.875rem;
    margin-bottom: 50px;
    text-align: left;
}
.imgcaption a{
    color:#232323;
    font-weight:bold;
    border-bottom:#232323 dotted 1px;
}
@media (max-width:50rem){
    .imgcaption{
        padding:0.5rem 0;
    }
}
@media (max-width:40rem){
    .imgcaption{
        padding:0.5rem 1.95rem;
        margin-bottom: 0px;
    }
}
.incresehover{
    max-width:800px;
    width:100%;
    height:100%;
    position:absolute;
    z-index:1;
}
.incresehover:hover .increse{
    opacity:1;
    -webkit-transition:all .3s ease;
    -o-transition:all .3s ease;
    transition:all .3s ease;
}
.increse{
    top:50%;
    left:50%;
    width:60px;
    height:60px;
    -webkit-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    transform:translate(-50%, -50%);
    position:absolute;
    display:inline-block;
    background:rgba(0, 0, 0, 0.8);
    padding:1rem;
    border-radius:100%;
    opacity:0;
    cursor:pointer;
}
.increse-btn{
    width:28px;
    height:28px;
}
.intro{
    margin-bottom:3rem;
}
.intro p{
    font-size:1.25rem;
    padding:1rem 5rem;
}
.intro p:last-child{
    padding-bottom:0
}
@media (max-width:50rem){
    .intro p{
        padding:0 2rem 3rem 2rem;
    }
}
@media (max-width:40rem){
    .intro p{
        padding:0 2rem 3rem 2rem;
    }
}
@media (max-width:24rem){
    .intro p{
        padding:0 2rem 2.5rem 2rem;
    }
}
@media (max-width:24rem){
    .intro p{
        font-size:1.125rem;
    }
}
.firstblock{
    position:relative
}
.firstblock .wrapper{
    padding:3rem 10rem 0 10rem;
}
@media (max-width:50rem){
    .firstblock .wrapper{
        padding:3rem 2rem 0 2rem;
    }
}
@media (max-width:40rem){
    .firstblock .wrapper{
        padding:3rem 2rem 0 2rem;
    }
}
@media (max-width:24rem){
    .firstblock .wrapper{
        padding:3rem 2rem 0 2rem;
    }
}
.firstblock:before{
    content:'';
    position:absolute;
    z-index:-1;
    top:0;
    right:50%;
    bottom:-8rem;
    left:0;
    background:#DBE2EC;
}
@media (max-width:40rem){
    .firstblock:before{
        right:0;
    }
}
.firstblock h2,.firstblock p{
    padding:0;
    margin-bottom:3rem;
}
@media (max-width:50rem){
    .firstblock h2,.firstblock p{
        padding:0;
    }
}
.resoltblock{
    position:relative;
    font-size:1.125rem;
    line-height:1.8;
}
.resoltblock .wrapper{
    padding:1rem 5rem 2rem 5rem;
    margin:0 auto;
    clear:both;
}
@media (max-width:50rem){
    .resoltblock .wrapper{
        padding:0 3rem;
    }
}
@media (max-width:40rem){
    .resoltblock .wrapper{
        padding:0 1rem 1rem 1rem;
    }
}
.resoltblock h2,.resoltblock p{
    font-size:1.125rem;
    color:#03153A;
    padding:0;
}
@media (max-width:50rem){
    .resoltblock h2,.resoltblock p{
        padding:0;
    }
}
.resoltblock h2{
    font-size:1.25rem;
    font-family:微軟正黑體, "Microsoft JhengHei", sans-serif;
}
.resoltblock ol{
    padding:1rem 2.5rem;
}
.resoltblock ol li{
    list-style-type:decimal;
    list-style-position:inside;
}
@media (max-width:50rem){
    .resoltblock ol{
        padding:0 1rem 1rem 1rem;
    }
}
.infomation,.result{
    margin:0 auto;
    padding:2rem 5rem;
    background:#fff;
    border-radius:16px;
    -webkit-box-shadow:20px 20px 40px #d2d2d2;
    box-shadow:20px 20px 40px #d2d2d2;
    position:relative;
    top:-1rem;
}
@media (max-width:40rem){
    .infomation,.result{
        padding:2rem;
    }
}
@media (max-width:37.5rem){
    .infomation,.result{
        border-radius:0;
    }
}
.infomation{
    max-width:41rem;
    padding:2rem 2.5rem;
    margin-bottom:2.5rem;
    z-index:1;
}
.infomation h2{
    font-size:1.25rem;
    color:#03153A;
    padding:0 0 1.125rem 0;
}
@media (max-width:40rem){
    .infomation h2{
        padding:0;
    }
}
.infomation p{
    font-size:1rem;
    color:#03153A;
    padding:0 0 1.125rem 0;
    text-align:left;
}
@media (max-width:50rem){
    .infomation p{
        padding:0 0 0.5rem 0;
    }
}
@media (max-width:37.5rem){
    .infomation{
        margin-bottom:1rem;
    }
}
.notice{
    font-size:1rem;
    font-weight:700;
    color:#03153A;
}
.notice:after{
    z-index:2
}
.quotebox{
    padding:2rem 10rem 3rem 10rem;
}
@media (max-width:50rem){
    .quotebox{
        padding:0 2rem 3rem 2rem;
    }
}
.textbox{
    display:table;
    position:relative;
    margin-bottom:0.5rem;
}
.textbox .tleft{
    display:table-cell;
    vertical-align:top;
    padding-right:1rem;
}
.textbox .tright{
    color:#03153A;
    display:table-cell;
    font-size:1.25rem;
    font-weight:bold;
    text-align:justify;
    vertical-align:top;
}
.quote_b,.quote_t{
    fill:#03153A;
    width:32px;
    height:22px;
    vertical-align:top;
    position:relative;
    z-index:1;
}
.quote_t{
    margin:0 5px 0 0
}
.quote_b{
    margin:10px 0 0 0;
    float:right;
    top:-2rem;
}
.from{
    width:100%;
    position:relative;
    text-align:right;
}
.from span{
    display:inline-block;
    font-size:0.875rem;
}
.fline{
    width:48px;
    height:1px;
    background-color:#03153A;
    vertical-align:middle;
    display:inline-block;
    margin-right:0.5rem;
}
.sharwrap{
    padding-top: 1.5rem;
    text-align: center;
    background-color:#BFDBE2;
}
.sharebox{
    display:inline;
    position:relative;
    padding:2rem 10rem;
}
.sharebox div{
    display:inline-block;
    cursor:pointer;
    padding:0 0.5rem
}
.sharebox div:first-child{
    padding:0 0.5rem 0 0
}
.sharebox div:last-child{
    padding:0 0 0 0.5rem
}
.sharebox div a{
    display:block
}
@media (max-width:50rem){
    .sharebox{
        padding:0 2rem 3rem 2rem;
        /* top:-2rem; */
    }
}
.fb-btn{
    fill:#3B798C;
    width:32px;
    height:50px;
    vertical-align:middle;
}
.line-btn{
    fill:#3B798C;
    width:32px;
    height:50px;
    vertical-align:middle;
}
.twitter-btn{
    fill:#3B798C;
    width:32px;
    height:50px;
    vertical-align:middle;
}
.divide{
    width:320px;
    height:10px;
    background:url(../img/wave.svg) repeat-x;
    margin:3rem auto;
}
@media (max-width:50rem){
    .divide{
        margin:0 auto 3rem auto;
    }
}
@media (max-width:37.5rem){
    .divide{
        margin:0 auto 3rem auto;
    }
}
@media (max-width:24rem){
    .divide{
        width:240px;
    }
}
.editorbox{
    position:relative;
    margin:3rem auto;
}
.otherinfo{
    position:relative;
    background:#FAFAFA;
    border-radius:8px;
    margin:0 10rem 3rem 10rem;
    overflow:hidden
}
.otherinfo p{
    padding:1.5rem;
    font-size:1rem;
}
@media (max-width:50rem){
    .otherinfo{
        margin:0 2rem 3rem 2rem;
    }
}
.related-cards{
    /* margin:2rem auto 0 auto;
    background:rgb(26, 110, 128); */
    background-color: #BFDBE2;
    padding:2.5rem 0;
}
@media (max-width:37.5rem){
    .related-cards{
        padding:2rem;
    }
    .related-cards .wrapper{
        padding:0;
    }
}
.related-title{
    font-size:1.25rem;
    font-weight:bold;
    font-family:'Noto Serif TC', serif;
    color:#333;
    text-align:center;
    margin-bottom:2rem;
}
.morecards{
    position:relative;
    text-align:center
}
@media (max-width:40rem){
    .morecards{
        text-align:left;
    }
}
.card{
    width:260px;
    display:inline-block;
    margin-right:1rem;
    margin-left:1rem;
    margin-bottom:2rem;
    vertical-align:top;
}
.card:nth-child(3n){
    margin-right:0;
}
.card .img-container{
    width:100%;
    height:100%;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
}
.card .img-container .featured-image{
    max-width:100%;
    height:100%;
    -o-object-fit:cover;
    object-fit:cover;
}
@media (max-width:860px){
    .card:nth-child(3n){
        margin-right:1.875rem;
    }
}
@media (max-width:50rem){
    .card{
        width:calc(33.33% - 1.875rem)
    }
    .card:nth-child(3n){
        margin-right:1.875rem;
    }
    .card:nth-child(5){
        margin-right:1.875rem;
    }
    .card:last-child{
        margin-right:0;
    }
}
@media (max-width:40rem){
    .card{
        width:100%;
    }
    .card:nth-child(2n){
        margin-right:0;
    }
    .card:nth-child(3n){
        margin-right:1.875rem;
    }
    .card:nth-child(5){
        margin-right:1.875rem;
    }
    .card:last-child{
        margin-right:0;
    }
    .card div{
        display:inline-block;
        vertical-align:top;
    }
}
@media (max-width:37.5rem){
    .card{
        width:100%;
        margin-right:0;
        margin-bottom:1.25rem;
        margin-left: 0;
    }
    .card:nth-child(2n){
        margin-right:0;
    }
    .card:nth-child(3n){
        margin-right:0;
    }
    .card:nth-child(5){
        margin-right:0;
    }
    .card:last-child{
        margin-right:0;
        margin-bottom:0;
    }
}
.fixheight img{
    max-width:initial;
    max-height:96vh;
}
.scrollhint2{
    width:100%;
    height:96vh;
    position:absolute;
    z-index:3;
    background:rgba(0, 0, 0, 0.8);
}
.scrollhint2 p{
    color:#FAFAFA;
    position:relative;
}
.hintbox{
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    transform:translate(-50%, -50%);
    position:absolute;
    display:inline-block;
    padding:1rem;
    width:100%;
    text-align:center;
}
.hintbox span{
    color:#FAFAFA;
    position:relative;
    top:3rem;
    font-size:1.25rem;
}
.scrollicon{
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    transform:translate(-50%, -50%);
    position:absolute;
    display:inline-block;
    padding:1rem;
}
.scroll{
    width:56px;
    height:56px;
    fill:#FAFAFA
}
.scalebox{
    height:96vh;
    position:absolute;
}
.scale{
    position:relative;
    top:0;
    left:0;
    z-index:2;
}
.scale img{
    height:96vh;
}
.topbox{
    width:100vw;
    position:absolute;
    z-index:2;
}
.topbox img{
    display:block;
    margin:0 auto;
    padding:0.5rem 0;
}
.bottombox{
    width:100vw;
    position:absolute;
    bottom:2rem;
    z-index:2;
}
.bottombox img{
    display:block;
    margin:0 auto;
    padding:0.5rem 0;
}
.maskbox{
    width:100%;
    height:96vh;
    max-width:800px;
    position:relative;
    z-index:1;
}
.pic{
    width:100%;
    height:195px;
    position:relative;
}
.pic a{
    display:block;
    width:100%;
    height:100%;
}
.pic:hover .relatedmask{
    opacity:1;
    -webkit-transition:all .3s ease;
    -o-transition:all .3s ease;
    transition:all .3s ease;
}
@media (max-width:50rem){
    .pic{
        height:160px;
    }
}
@media (max-width:40rem){
    .pic{
        width:120px;
        height:90px;
    }
}
@media (max-width:37.5rem){
    .pic:hover .relatedmask{
        opacity:0;
    }
}
.cardtitle{
    font-size:1rem;
    font-weight:bold;
    margin-top:0.938rem;
    text-align:left;
}
.cardtitle a{
    color:#333;
}
@media (max-width:40rem){
    .cardtitle{
        margin-top:0;
        margin-left:0.75rem;
        width:calc(100% - 150px - 20px)
    }
}
@media (max-width:37.5rem){
    .cardtitle{
        margin-top:0;
        margin-left:0.75rem;
    }
}
@media (max-width:37.5rem){
    .cardtitle{
        width:calc(100% - 120px - 20px)
    }
}
.relatedmask{
    width:100%;
    height:100%;
    position:absolute;
    background:rgba(0, 0, 0, 0.6);
    cursor:pointer;
    opacity:0;
    z-index:1;
}
.maskbtn{
    width:100px;
    height:40px;
    text-align:center;
    line-height:40px;
    background-color:#000;
    color:#fff;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    transform:translate(-50%, -50%);
    position:absolute;
}
.annotation{
    background-color:#dbe2ec;
    text-decoration-skip-ink:none;
    cursor:help;
    position:relative;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
.annotation:hover{
    background-color:#c2d7f7;
}
.annotation.active{
    background-color:#424ebb;
    color:#FAFAFA;
}
.annotation .annotation-icon{
    display:inline-block;
    width:1.5rem;
    text-align:center;
    font-size:1.2rem;
    line-height:1;
    height:1.5rem;
    font-weight:bold;
    border-radius:50%;
    -webkit-transform:scale(0.65);
    -ms-transform:scale(0.65);
    transform:scale(0.65);
    vertical-align:baseline;
    border:2px solid currentColor;
    position:relative;
}
.annotation .annotation-icon:before{
    content:"";
    display:none;
    position:absolute;
    top:100%;
    left:50%;
    -webkit-transform:translateX(-50%);
    -ms-transform:translateX(-50%);
    transform:translateX(-50%);
    width:0;
    height:0;
    border-style:solid;
    border-width:0 16px 16px 16px;
    border-color:transparent transparent #ffffff transparent;
    z-index:1;
}
.annotation .annotation-icon:after{
    content:attr(data-annotation);
    position:absolute;
    background:white;
    width:auto;
    max-width:300px;
    min-width:300px;
    top:calc(100% + 16px);
    left:5%;
    -webkit-transform:translateX(-50%);
    -ms-transform:translateX(-50%);
    transform:translateX(-50%);
    padding:2rem;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    font-size:1.4rem;
    text-align:left;
    line-height:1.5;
    -webkit-box-shadow:1px 1px 8px rgba(0, 0, 0, 0.14);
    box-shadow:1px 1px 8px rgba(0, 0, 0, 0.14);
    display:none;
    z-index:2;
}
@media (max-width:37.5rem){
    .annotation .annotation-icon:after{
        -webkit-transform:translateX(-90%);
        -ms-transform:translateX(-90%);
        transform:translateX(-90%);
    }
}
@media (max-width:24rem){
    .annotation .annotation-icon:after{
        -webkit-transform:translateX(-90%);
        -ms-transform:translateX(-90%);
        transform:translateX(-90%);
    }
}
@media (max-width:374px){
    .annotation .annotation-icon:after{
        -webkit-transform:translateX(-1%);
        -ms-transform:translateX(-1%);
        transform:translateX(-1%);
    }
}
.annotation.active .annotation-icon{
    color:#03153a;
    background:white;
    border:2px solid #03153a;
}
.annotation.active .annotation-icon:after,.annotation.active .annotation-icon:before{
    display:inline-block;
}
.timeline{
    max-width:41rem;
    width:100%;
    margin:0 auto;
    padding:0 0 3rem 0;
}
@media (max-width:37.5rem){
    .timeline{
        width:88%;
    }
}
.timeline-item{
    margin:0 0 0 10px;
    padding:1.35rem 0 0 1.35rem;
    position:relative;
    border-left:1px solid #F1A194;
}
.timeline-item h3{
    font-size:1.25rem;
    color:#03153A;
    padding-bottom:0.5rem;
}
@media (max-width:24rem){
    .timeline-item h3{
        font-size:1.125rem;
    }
}
.timeline-item p{
    font-size:1.125rem;
    padding:0;
}
@media (max-width:24rem){
    .timeline-item p{
        font-size:1rem;
    }
}
.timeline-item:before{
    content:attr(date-is);
    position:absolute;
    left:2em;
    font-weight:bold;
    top:2em;
    display:block;
    color:#03153A;
}
.timeline-item:after{
    width:8px;
    height:8px;
    display:block;
    top:2em;
    position:absolute;
    left:-7px;
    border-radius:8px;
    content:'';
    border:2px solid #03153A;
    background:#03153A;
}
footer{
    font-size:0.875rem;
    color:#232323;
    text-align:center;
    position:relative;
    padding:1.25rem;
    z-index:1;
    background:#FAFAFA;
}
@media (max-width:20rem){
    footer{
        text-align:left;
    }
}
.cd-top{
    color:#FAFAFA;
    font-size:1.2rem;
    display:block;
    width:45px;
    height:45px;
    line-height:48px;
    text-align:center;
    position:fixed;
    bottom:20px;
    right:10px;
    -webkit-box-shadow:0 0 10px rgba(0, 0, 0, 0.05);
    box-shadow:0 0 10px rgba(0, 0, 0, 0.05);
    overflow:hidden;
    background:rgba(35, 35, 35, 0.9) no-repeat center 50%;
    visibility:hidden;
    opacity:0;
    -webkit-transition:all 0.3s;
    -o-transition:all 0.3s;
    transition:all 0.3s;
    border-radius:100%;
    z-index:99;
}
@media only screen and (min-width:64rem){
    .cd-top{
        right:30px;
        bottom:20px;
    }
}
@media only screen and (min-width:40rem){
    .cd-top{
        right:20px;
        bottom:20px;
    }
}
@media (max-width:37.5rem){
    .cd-top{
        width:32px;
        height:32px;
        line-height:32px;
    }
}
.cd-top.cd-is-visible{
    visibility:visible;
    opacity:1;
}
.cd-top.cd-fade-out{
    opacity:.5;
}
.no-touch .cd-top:hover{
    opacity:1;
}
.back2top{
    fill:#FAFAFA;
    width:20px;
    height:20px;
}
@media (max-width:40rem){
    .back2top{
        width:16px;
        height:16px;
    }
}
.tablebox{
    margin:0 auto;
    max-width:60rem;
}
@media (max-width:40rem){
    .tablebox{
        max-width:100%;
    }
}
.tablehint{
    display:none;
}
@media (max-width:40rem){
    .tablehint{
        display:block;
        text-align:center;
        font-weight:700;
        padding:0.5rem;
        background-color:#e5f4ff;
    }
    .tablehint span{
        vertical-align:middle;
    }
}
.scrollbox{
    width:100%;
}
@media (max-width:40rem){
    .scrollbox{
        overflow-x:scroll;
    }
}
.scroll{
    fill:#232323;
    width:32px;
    height:32px;
    margin-right:0.5rem;
    vertical-align:middle;
}
@media (max-width:37.5rem){
    .scroll{
        width:24px;
        height:24px;
    }
}
.rwd-table{
    width:100%;
    background-color:#fff;
}
.rwd-table tr{
    border-top:1px solid #ddd;
    border-bottom:1px solid #ddd;
}
.rwd-table th{
    display:none;
}
.rwd-table td{
    display:block;
}
.rwd-table td:first-child{
    font-weight:700;
}
@media (max-width:40rem){
    .rwd-table td:first-child{
        background-color:#03153A;
        color:#FAFAFA;
    }
}
.rwd-table td:before{
    font-weight:bold;
    width:6.5em;
    display:inline-block;
}
@media (min-width:40rem){
    .rwd-table td:before{
        display:none;
    }
}
.rwd-table td,.rwd-table th{
    text-align:left;
}
@media (min-width:40rem){
    .rwd-table td,.rwd-table th{
        display:table-cell;
        padding:.25em .5em;
    }
}
@media (max-width:40rem){
    .rwd-table td.greybg:first-child{
        background-color:#fff;
        color:#4d4d4d;
        font-weight:400;
    }
}
.tabletitle{
    font-size:1.375rem;
    font-weight:bold;
    padding:0 0 0.5rem 0;
}
.tabletitle a{
    color:#03153A;
    font-weight:bold;
}
.tabletitle a:after{
    border-bottom:1px solid #03153A;
}
@media (max-width:50rem){
    .tabletitle{
        padding:0 2rem 0rem 2rem;
        margin-bottom:1rem;
    }
}
.rwd-table{
    color:#fff;
    overflow:hidden;
}
.rwd-table tr{
    border-color:#ddd;
    color:#4d4d4d;
}
.rwd-table td,.rwd-table th{
    padding:1rem 1.5rem;
}
@media (min-width:40rem){
    .rwd-table td,.rwd-table th{
        padding:1.125rem 1.25rem;
    }
}
.rwd-table td:before,.rwd-table th{
    color:#fff;
}
.rwd-table th{
    min-width:7rem;
    background-color:#03153A;
}
.none-table{
    width:100%;
    background-color:#fff;
}
.none-table tr{
    border-color:#ddd;
    color:#4d4d4d;
    border-top:1px solid #ddd;
    border-bottom:1px solid #ddd;
}
.none-table td:first-child{
    width:9.5rem;
    font-weight:700;
    text-align:left;
    padding:1rem 0.5rem 1rem 1.5rem;
}
.none-table td:nth-of-type(3){
    width:8rem;
}
.none-table td,.none-table th{
    padding:1rem 0.5rem;
    text-align:center;
}
.none-table th{
    min-width:5.5rem;
    background-color:#03153A;
}
.none-table:before{
    font-weight:bold;
    display:inline-block;
}
.none-table .tw{
    color:#FAFAFA;
    background-color:#03153A;
}
.none-table td:before,.none-table th{
    color:#fff;
}
.listbox{
    padding:0 12rem 3rem 12rem;
}
@media (max-width:50rem){
    .listbox{
        padding:0 2rem 3rem 2rem;
    }
}
@media (max-width:40rem){
    .listbox{
        padding:0 2rem 3rem 2rem;
    }
}
@media (max-width:24rem){
    .listbox{
        padding:0 2rem 2.5rem 2rem;
    }
}
.listbox ol li{
    list-style-type:decimal;
    list-style-position:inside;
    padding-bottom:.5rem;
}
.video-container{
    position:relative;
    padding-bottom:56.25%;
    padding-top:0px;
    height:0;
    overflow:hidden;
    margin:0 auto;
}
.video-container embed,.video-container iframe,.video-container object{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:0 none;
}
/* .stem {
    padding-top: 3rem;
} */
.stem p{
font-size: 0.875rem;
color: #333;
}
.stem a{

}