@import url(../../File/icon/css/icon-all.min.css);
@import url(../../File/css/BodyHeader_rwd.css);

/* css reset 歸0 */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,blockquote,p,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption,tfoot,thead{margin:0;padding:0;border:0;outline:0;font-size:100%;line-height:1.5em}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
:focus{outline:0}
ins{text-decoration:none}
del{text-decoration:line-through}
ul,li{list-style:none}
body{margin:0 auto;padding:0;font-family:"Microsoft JhengHei"}
#BodyContainer,#BodyContentMain{width:100%;margin:0 auto}
#billboard{width:100%;margin:0 auto;font-family:'Noto Sans TC',sans-serif}
#billboard a:hover{position:relative;top:2px;text-decoration:none;left:2px}
#billboard i{margin-right:3px}
.row100{width:100%}
.rowFlex{display:flex;flex-wrap:wrap;display:-ms-flexbox;-ms-flex-wrap:wrap}
.bgcolor0{background:#f9db59 url(../images/0907047_bg.jpg) no-repeat fixed center/cover}
#BodyContent_billboard h1,h2{text-align:center}
#BodyContent_billboard h1{font-size:2.7rem;line-height:1.3em;color:#C00}
#BodyContent_billboard h2{font-size:2.2rem;line-height:1.55em;color:#1483b9}
/*主圖*/
#billboard>header>picture img{width:100%;display:block}
.bannerlink{margin:0 auto;background:#ca0607;padding:7px 0;text-align:center}
.bannerlink li{font-size:2rem;line-height:1.3em;display:inline}
.bannerlink li:after{content:"‧"}
.bannerlink li:nth-last-of-type(1):after{content:""}
.bannerlink,.bannerlink a{color:#FFF}

/*榜單內容*/
.billboard_content{width:100%;padding: 3% 0 0;margin:0 auto;padding: 30px;}
.billboard_detail{width:82%;margin:.5% auto 1%}
.top{font-size:2rem;text-align:center;color:#ff514b;font-weight:bold}
.degree{position:absolute;top:0;left: 0;;border-radius: 0px 0 25px 0;background-color: #fee277;padding: .5rem 2.5rem;color: #000;font-size: 1.5rem;}
#KP .goodgrade{padding:5% 3% 1.5%;}
.goodgrade{background: #fffcf1;border: 7px #fee277 solid;border-radius: 12px;padding:1.5% 3%;margin: 0 auto;width:94%;position: relative;}
.goodgrade .txt-center{justify-content:center}
.goodgrade ul{margin:auto;justify-content:flex-start}
.goodgrade li{font-size:1.7rem;line-height:1.8em}
.goodgrade li:after{content:"．"}
.goodgrade ul li:nth-last-of-type(1):after,.after-hidden:after{content:none !important;}
.billboard_ps{font-size:1.25em;text-align:center;padding:1% 0}
.billboard_note{text-align:center;background:#ca0607;color:#FFF;font-size:1.5em;padding:1% 0}
.billboard_note a{color:#fff700;}
.navlink{width:100%;padding:1% 0;text-align:center;position:fixed;bottom:0;background:#ff3e3e;opacity:.9}
.navlink li{font-size:1.3em;line-height:1.55em;color:#FFF;display:inline;margin:0 1%}
.navlink a{color:#FFF}
.board_event{position:fixed;right:0;top:50%;border-radius:10px 0 0 10px;background:rgba(202, 6, 7, 0.8);padding:10px 15px;box-shadow:2px 1px 2px #333, 0px 0px 3px #333, 0px 0px 4px #333}
.board_event>ul>li{font-size:1.2rem;line-height:2em}
.board_event>ul>li,.board_event>ul>li>a{color:#fae53c}
.br_pc{display: block;}
.br_mb{display: block;}
.center{text-align: center;margin-top: 1rem;font-size: 1.2rem;}
/*ask*/
.askarea *{font-family:"Microsoft JhengHei";font-size:1.15rem}
.askarea{background:#1274a5;width:100%;text-align:left;padding:1.5% 0}
.asktitle{font-size:1.5em;color:#FFF;text-align:center}
#formlist{width:70%;margin:2% auto 1%;font-size:1.2em;color:#FFF}
#formlist p{margin:2% auto}
#formlist p:nth-last-of-type(1){margin:2% auto 0}
#formlist SELECT,#formlist input{border-radius:7px;background:#FFF;border:#FFF;padding:.5%;margin:auto 1% 0 auto}
#formlist SELECT{width:18%}
#formlist input{color:#585858}
#formlist input[name="sContent"]{width:78%!important}
#formlist input[name="sRandomCode"]{width:15%!important}
#formlist input[type="text"]{width:39%}
#formlist input[type="submit"],#formlist input[type="reset"]{color:#fff;background-color:#ca0607;padding:.5em}
/*EventFooter*/
#EventFooter_rwd a{color:#000}
#EventFooter_rwd ul{text-align:center}
.Eventfooter_inline{width:90%;margin:0 auto 1%;padding:2% 0 1%;border-bottom:thin solid #666} 
.Eventfooter_inline li{font-size:1.1rem;line-height:2.2em;margin:0 1%;display:inline}
.Eventfooter_inline li img{width:20%;height:auto;vertical-align:middle}
.Eventfooter_address li{font-size:.9em;line-height:2em}

/*--------PC--------*/
@media all and (min-width: 1201px){
#topbutton,#BodyHeader_rwd,#Bodymenunav,.mb{display:none}
#BodyHeader #header-share{width:100%;margin:0 auto;text-align:center;font-size:1.1em;line-height:2em;color:#000}
#BodyHeader a{color:#000;text-decoration:underline}
#EventFooter_rwd{padding-bottom:65px}
.md\:block {display: block;}
}

@media (min-width:1500px){
.billboard_detail{width:76%}
.goodgrade{width:84%}
.askarea #formlist{width:54%}
.navlink{padding:.6% 0}
}

/*Mobile*/
@media all and (min-width:1px) and (max-width:767px){

#EventFooter_rwd{padding-bottom:90px}
.br_pc{display: inline;}
.br{display:block}
.bannerlink{padding:2%}
.bannerlink li{font-size:1.3em;display:inline-block}
#BodyContent_billboard h1{font-size:1.5em;word-break:keep-all;overflow-wrap:anywhere;}
#BodyContent_billboard h1 strong{font-size:1.8rem}
#BodyContent_billboard h1 strong, #BodyContent_billboard h2 span{display:block}
#BodyContent_billboard h2{font-size:1.3em}
.billboard_content{width:96%;padding:4% 2% 0}
.billboard_content:nth-child(n+2){padding-top: 60px;margin-top: -60px;}
.billboard_detail{width:100%;margin:2% auto}
.degree {padding: .5rem 2rem;font-size: 1rem;}
#KP .goodgrade{padding: 12% 3% 1.5%;}
.goodgrade{width:90%;padding:3%;border:3px #fee277 solid}
.top{font-size:1rem}
.top:nth-child(2){margin-top: 2.5em;}
.goodgrade li{font-size:1.05rem}
.billboard_ps{font-size:1em;padding:4% 0}
.billboard_note{font-size:1.1em;padding:4% 10%}
.navlink{padding:2% 0}
.navlink ul{width:94%;margin:0 auto}
.navlink li{font-size:1.1em;display:inline-block;margin:1% 2%}
.board_event{bottom:90px;top:auto;padding:8px 10px}
.board_event>ul>li{font-size:1rem}


 */
/*ask*/
.askarea *{font-size:1rem}
.askarea{padding:6% 0 4%}
#formlist{width:90%;margin:6% auto 0}
#formlist p{margin:0 auto}
#formlist p:nth-last-of-type(3){margin:0 auto 7%}
#formlist SELECT,#formlist input{width:98%;padding:1.5% 1%;margin:auto auto 7% auto}
#formlist input[type="text"]{width:98%}
#formlist input[name="sContent"]{width:98%!important}
#formlist input[name="sRandomCode"]{width:22%!important;margin:auto 2% 7% 1%}
#formlist input[type="submit"], #formlist input[type="reset"]{width:auto;margin-right:2%}
/*EventFooter*/
#EventFooter_rwd{width:96%}
.Eventfooter_inline{width:100%;margin:0 auto 3%;padding:4% 0 3%}
.Eventfooter_inline li{display:block;font-size:1rem;line-height:2em}
.Eventfooter_inline li img{width:63%;margin-bottom:3%}
.Eventfooter_address li{font-size:.8rem;line-height:1.8em}
}

@media all and (min-width: 1px) and (max-width: 1200px){
#BodyHeader,.pc{display:none}
.goodgrade ul{justify-content:center}
#BodyContent_billboard {padding-top: 45px;}
.billboard_content{width:90%;}
.center{font-size: 0.9rem;}
/*Footer*/
#EventFooter_rwd{width:100%;background:#FFF;padding-top:1%}
#EventFooter_rwd a{color:#000}
#Eventfooter_inline{width:90%;margin:0 auto 2%;padding:3% 0 2%;border-bottom:thin solid #333} 
#Eventfooter_inline ul,#Eventfooter_address ul{width:100%;margin:0 auto}
#Eventfooter_inline ul li{font-size:1.05em;line-height:2.1em;margin:0 auto;display:block;clear:both}
#Eventfooter_inline ul li img{max-width:70%}
#Eventfooter_address{width:100%;margin:0 auto;text-align:center}
#Eventfooter_address ul li{width:100%;font-size:.8em;line-height:2em;text-align:center}
/*TOP*/
#topbutton{width:50px;height:50px;color:#FFF;border-radius:50%;background-color:#000;opacity:.4;right:1%;bottom:5% !important;position:fixed;line-height:50px;font-size:2em;text-align:center;z-index:98}
#topbutton a{color:#FFF;text-decoration:none}
}

@media all and (min-width:768px) and (max-width:991px){
/*EventFooter*/
#EventFooter_rwd{padding-bottom:60px}
.Eventfooter_inline li{font-size:.95rem;margin:0 .5%}
.Eventfooter_inline li img{width:30%}
.Eventfooter_address li{font-size:.8rem}
}
@media all and (min-width:992px) and (max-width:1200px){
#EventFooter_rwd{padding-bottom:70px}
}

@media all and (min-width:768px) and (max-width:1200px){
h1{font-size:2em}
h2{font-size:1.6em}
.bannerlink{padding:1% 2%}
.bannerlink li{font-size:1.6rem}
.billboard_detail{width:90%}
.top{font-size:1.6rem}
#KP .goodgrade{padding: 10% 3% 1.5%;}
.goodgrade li{font-size:1.4rem}
.billboard_ps{padding:3% 2%}
.billboard_note{padding:2% 0}
.navlink{padding:1.5% 0}
.navlink li{font-size:1.2em;margin:0 1.5%}
.askarea *{font-size:1.05rem}
.askarea{padding:3% 0}
.asktitle{font-size:1.4em}
#formlist{width:90%;margin:3% auto 2%}
#formlist SELECT{width:15%}
#formlist input[type="text"]{width:37%}
.Eventfooter_inline{width:96%;margin:0 auto 2%;padding:2% 0}
}