/*** reset ***/
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
*{font-family: 'Noto Sans TC',Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";background-repeat:no-repeat;}

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, em, 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, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption,
footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline; } 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
html, body { margin: 0; padding: 0; width: 100%; font-size:13px;}
ol, ul, li, dl{list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}
legend,caption{visibility:hidden;overflow:hidden;height:0;font-size:0;line-height:0}
a{text-decoration:none}
a:hover,a:active,a:focus{text-decoration:none;}
textarea, input[type="image"],  input[type="text"],  input[type="submit"],  input[type="password"] {-webkit-appearance:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none;}
a, input, button{outline:none;}
.txt_hidden,.event1 h2,.event2 h2,.event2 h3,.event3 h2 caption{display:inline; overflow: hidden; position:absolute; top:0; left:0; width:0; height:0; font-size:0; text-indent:-1000px;}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #7b403c;
    font-size:0.39rem
  }
  ::-moz-placeholder { /* Firefox 19+ */
    color: #7b403c;
    font-size:0.39rem
  }
  :-ms-input-placeholder { /* IE 10+ */
    color: #7b403c;
    font-size:0.39rem
  }
  :-moz-placeholder { /* Firefox 18- */
    color: #7b403c;
    font-size:0.39rem
  }

/*like btn*/

.fbBTN { transform:scale(2.0); -webkit-transform:scale(2.0); }

/*** skipNav ***/
#skipNav{position:relative; z-index:100;}
#skipNav a{display: block; overflow: hidden; position:absolute; top:-40px; left:0; width:150px; text-align:center;}
#skipNav a:hover, #skipNav a:active, #skipNav a:focus{top:0; padding:5px; background:#841200 none; font:bold 12px/18px dotum; color:#fff; text-align:center;}

/*** layout ***/
body{position:relative; background:url("images/bg_bodyM.jpg") no-repeat center 38px; background-size:100%; width:100%;}
.wrap{margin:0 auto;}

/* header */
header{background:url("images/bg_bodyM.jpg") no-repeat center top; background-size:100%; height:17.45rem; width:100%;}
header .rorLogo {position:absolute; left:0.39rem; top:1.2rem; background:url("images/bg_logo.png") no-repeat left top;background-size:100% auto; height:1.39rem; width:2.15rem}
header .rorLogo a{display:inline-block; width:100%; height:100%; }
header h2{width:7.93rem; height:6.72rem; padding-top:9.15rem; margin-left:1.04rem; background:url(images/bg_headerTxt.png) no-repeat left bottom; background-size:100%;}
header .h2Txt {margin:0.33rem 0 0 1.2rem; font-size:0.34rem; color:#a23c34; font-weight:bold;}

/* eventArea1 */
.eventArea1 h3 {font-size:0.78rem; color:#7c3f2f; text-align: center; }
.eventArea1 .eventBox {width:8.46rem; margin:0.18rem auto 0.30rem;background:#854d3f; border-radius:40px; padding-top:0.65rem; padding-bottom:0.85rem; text-align: center; color:#fff; font-size:0.39rem; }
.eventArea1 .eventBox h4 {background:url(images/bg_number01.png) no-repeat; background-size:100% auto;  width:1.59rem; height:1.51rem; margin:0 auto 0.61rem}
.eventArea1 .eventBox h4.number02 {background:url(images/bg_number02.png) no-repeat; background-size:100% auto;  width:1.59rem; height:1.51rem; margin:0 auto 0.61rem}
.eventArea1 .eventBox .btn_facebookLike {display:inline-block; width:1.54rem; height:0.65rem;background-size:100% auto; margin-top:0.39rem;}
.eventArea1 .eventBox p.txt{text-align: left; padding:0 0.80rem; font-size:0.373rem}
.eventArea1 .eventBox p.txt br {display:none;}
.eventArea1 .fontStyle1 {color:#fffb94}
.eventArea1 .fontStyle2 {color:#51ff5d}

/* eventArea2 */
.eventArea2 {margin-top:1.30rem}
.eventArea2 h3 {width:8.96rem; height:1.97rem; margin:0 auto; background:url(images/eventArea2Title.jpg) no-repeat; background-size:100% }
.eventArea2 p.txt {font-size:0.49rem; text-align: center; color:#7b403c; font-weight:bold; margin-top:0.78rem; margin-bottom:0.52rem}
.eventArea2 .form {width:7.92rem; margin:0 auto}
.eventArea2 .form .labelBox:after{clear:both; display:block; content:""}
.eventArea2 .form .labelBox label{float:left; color:#7b403c; font-size:0.39rem; font-weight:bold; line-height:1.3rem; display:inline-block; width:1.61rem; text-align:left;  margin-right:0.3rem; margin-bottom:0.26rem}
.eventArea2 .form .labelBox input {float:left; font-size:0.39rem; color:#7b403c; border:2px solid #7b403c;border-radius:4px; height:1.3rem; width:5.5rem; padding:0 0.2rem; line-height:1.3rem; text-align: center; background:#ffebb9; font-weight:bold;}
.eventArea2 .form .reCaptcha {width:100%; margin-top:0.31rem}
.eventArea2 .form .reCaptcha img {width:100%}
.eventArea2 .form .btn_login {display:block; width:3.52rem; height:1.30rem;background:#63373a; color:#fff; font-size:0.52rem; border-radius:40px; text-align: center; line-height:1.30rem; font-weight:bold; margin:0.39rem auto 0; cursor:pointer;}
.eventArea2 .form.login {position:relative;}
.eventArea2 .form.login br {display:none}
/* eventArea3 */
.eventArea3  {padding: 0 0.26rem}
.eventArea3 .itemBox {padding:0.24rem 0; margin-top:0.91rem; background:#e5c6a1;border:1px solid #c3955e;border-radius:0.13rem;}
.eventArea3 .itemBox:after{clear:both; display:block; content:""}
.eventArea3 .itemBox > div.item { position:relative; width:2.88rem; height: 2.95rem; font-size:0.29rem;padding: 0.26rem 0.13rem 0; background:#fff;border-radius:0.13rem; margin-right:1px; margin-bottom:0.05rem; box-sizing:border-box; float:left;}
.eventArea3 .itemBox > div.item1,.item4,.item7,.item10,.item13{margin-left:0.3rem;}
.eventArea3 .itemBox > div.item3,.item6,.item9,.item12,.item15{margin-right:0 !important;} 
.eventArea3 .itemBox > div.item button {background:url(images/btn_dayCheck.gif) no-repeat; width:1.25rem; height:0.51rem; background-size:100% auto; box-shadow:none; border:none; cursor:pointer; position:absolute; right:0.18rem; top:0.15rem; display:none;}
.eventArea3 .itemBox > div.item .name {padding:0 0.13rem ;font-size:0.27rem; color:#555; text-align: center; display:block;}
.eventArea3 .itemBox > div.item.get {border:none;} 
.eventArea3 .itemBox > div.item.get:after{clear:both ;display:block;content:""; width:0.95rem; height:0.95rem; background:url(images/ico_get.png) no-repeat; background-size:100% auto ; position:absolute; right:0; top:0; right:0.18rem; top:0.15rem; }
.eventArea3 .itemBox > div.item.today{ border:3px solid #008fe0;}
.eventArea3 .itemBox > div.item.today button{display:block;}
.eventArea3 .itemBox > div.item .pic {width:2.06rem; height:1.15rem; margin:0.07rem auto }
.eventArea3 .itemBox > div.item1 .pic { background:url(images/bg_item1.png) no-repeat center; background-size:0.98rem auto; }
.eventArea3 .itemBox > div.item2 .pic { background:url(images/bg_item1.png) no-repeat center; background-size:0.98rem auto; }
.eventArea3 .itemBox > div.item3 .pic { background:url(images/bg_item2.png) no-repeat center #fff; background-size:0.98rem auto; }
.eventArea3 .itemBox > div.item4 .pic { background:url(images/bg_item3.png) no-repeat center; background-size:0.98rem auto; }
.eventArea3 .itemBox > div.item5 .pic { background:url(images/bg_item4.png) no-repeat center; background-size:0.98rem auto; }
.eventArea3 .itemBox > div.item6 .pic { background:url(images/bg_item5.png) no-repeat center; background-size:0.98rem auto; }
.eventArea3 .itemBox > div.item7 .pic { background:url(images/bg_item6.png) no-repeat center; background-size:0.98rem auto; }
.eventArea3 .itemBox > div.item8 .pic { background:url(images/bg_item7.png) no-repeat center; background-size:0.98rem auto; }
.eventArea3 .itemBox > div.item9 .pic { background:url(images/bg_item3.png) no-repeat center; background-size:0.98rem auto; }
.eventArea3 .itemBox > div.item10 .pic { background:url(images/bg_item4.png) no-repeat center; background-size:0.98rem auto; }
.eventArea3 .itemBox > div.item11 .pic { background:url(images/bg_item9.png) no-repeat center; background-size:0.98rem auto; }
.eventArea3 .itemBox > div.item12 .pic { background:url(images/bg_item6.png) no-repeat center; background-size:0.98rem auto; }
.eventArea3 .itemBox > div.item13 .pic { background:url(images/bg_item1.png) no-repeat center; background-size:0.98rem auto; }
.eventArea3 .itemBox > div.item14 .pic { background:url(images/bg_item10.png) no-repeat center; background-size:0.98rem auto; }
.eventArea3 .itemBox > div.item15 .pic { background:url(images/bg_item4.png) no-repeat center; background-size:0.98rem auto; }

/* eventArea4 */
.eventArea4 {background:url(images/bg_notice.jpg) no-repeat left top; background-size:100%; padding:0 1.04rem;margin-top:0.17rem;}
.eventArea4 h3 {font-size:0.78rem; text-align: left; color:#7b403c; padding-top:1.56rem; padding-bottom:0.65rem; }
.eventArea4 p {font-size:0.39rem;color:#7b403c}
.eventArea4 p .fontStyle1{color:#e3596a}
.eventArea4 p .fontStyle2{color:#388c95}

/* eventArea5 */
.eventArea5 {position:relative; margin-top:1.64rem; background: url(images/bg_waveTop.jpg) no-repeat left top #7f4a3c; background-size: 100%; padding: 0 0.98rem 1.04rem;}
.eventArea5 > section:after{clear:both ;display:block; content:""; background:url(images/img_character.png) no-repeat; background-size:100%; position:absolute; left:1.82rem; top:-0.13rem; width:1.78rem; height:2.46rem;}
.eventArea5 h3 {padding-top:1.17rem; padding-left:2.47rem; margin-bottom:0.37rem;font-size:0.78rem; color:#fff; }
.eventArea5 ul li{color:#e1c7c0; position:relative; margin-bottom:0.08rem; font-size:0.36rem;}
.eventArea5 ul li span{position:absolute; left:-15px; top:0; font-size:0.36rem}
.eventArea5 ul li a{color:#e2e04d}

/* sideMenu */
.sideMenu{ background:url(images/bg_sideMenu.png) no-repeat; background-size:100% 1.56rem; width:100%; height:1.56rem; position:fixed; left:0;bottom:0; width:100%}
.sideMenu:after{clear:both ;display:block; content:""}
.sideMenu li {float:left; display:inline-block;}
.sideMenu li a{display:inline-block; color:#fff;line-height:1.56rem; text-align: center; font-size:0.52rem}
.sideMenu li.menu1 a{width:3.18rem; height:1.56rem; }
.sideMenu li.menu2 a{width:2.99rem; height:1.56rem;}
.sideMenu li.menu3 a{width:1.67rem; height:1.56rem; background:url(images/btn_sideMenu3.png) no-repeat; background-size:100% auto}
.sideMenu li.menu4 a{position:absolute; width:2.16rem; height:1.56rem; background:url(images/btn_sideMenu4.png) no-repeat; background-size:100% auto}
/*popup*/

footer iframe{height:5rem;padding-bottom: 1.5rem; background-color:#fff;}

@media (min-width:769px){

  body {background: url(images/bg_bodyW.jpg) no-repeat center 38px; width:100%; margin:0 auto;}
  header {background: none;background-size: 100%; height:570px; width:960px; margin:0 auto; position:relative}
  header h2 {width: 592px;height: 450px; margin-top:105px; margin-left: 0; background: url(images/bg_headerTxtW.png) no-repeat left top; background-size: 100%;}
  header .rorLogo {left:0; top:-30px; background: url(images/bg_logo.png) no-repeat left top; background-size: 100% auto; height: 100px;width:150px;}
  header .h2Txt {display:none;}
  .eventArea1 {width:960px; margin:0 auto}
  .eventArea1 h3 {font-size:0; margin:20px 0 25px 230px; text-align: left; text-indent:-111px; width:160px; height:41px; background:url(images/img_eventArea1H3.png) no-repeat; background-size:100% auto}
  .fbBTN { transform:scale(2.5); -webkit-transform:scale(2.5); }

  /* eventArea1 */
  .eventArea1 .eventBox {background:none; text-align: left; margin:0 0 12px 0; padding:45px 0 17px 157px; position:relative; min-height:120px;  box-sizing:border-box; width:930px; line-height:28px}
  .eventArea1 .eventBox h4 {background:url(images/bg_number01W.png) no-repeat;background-size: 102px 87px; width: 102px; height: 87px;margin:0; position:absolute; left:29px; top:20px}
  .eventArea1 .eventBox h4.number02 {background: url(images/bg_number02W.png) no-repeat; background-size: 100% auto;width: 102px;height: 87px; margin:0;left:29px; top:40px}
  .eventArea1 .eventBox p {font-size:18px;}
  .eventArea1 .eventBox p.txt {font-size:18px; padding-left:0; position:relative;}
  .eventArea1 .eventBox p.txt:after{display:inline-block; width:105px; height:105px; background:url(images/bg_item11.png) no-repeat ; content:""; position:absolute; right:0; top:-5px}
  .eventArea1 .eventBox p.txt br {display:block;}
  .eventArea1 .eventBox .btn_facebookLike {position:absolute; left:470px; top:50px; width:119px; height:50px; margin:0;background-image:none;}
  /* eventArea2 */
  .eventArea2 {width:960px; margin:0 auto; min-height:250px}
  .eventArea2 h3 {width: 650px;height: 152px; margin-top:111px; background:url(images/eventArea2TitleW.jpg) no-repeat;background-size: 100%;}
  .eventArea2 p.txt {font-size:30px; margin-bottom:34px; margin-top:20px}

  .eventArea2 .login p.txt:after{clear:both ;display:block; content:""}
  .eventArea2 .form {width:960px; margin-bottom:0}
  .eventArea2 .form:after{clear:both; display:block; content:""}
  .eventArea2 .form .labelBox {float:left; margin-right:20px;}
  .eventArea2 .form .labelBox label{width:70px; font-size:16px; line-height:38px;}
  .eventArea2 .form .labelBox input{width:200px; height:38px; background:transparent; font-size:16px}
  .eventArea2 .form .reCaptcha {width:215px; height:40px; margin-top:0; float:left;margin-right:20px}
  .eventArea2 .form .reCaptcha img {width:215px; height:40px; }
  .eventArea2 .form .btn_login {width:108px; height:40px; color:#fff; font-size:16px; line-height:40px; margin-top:0}
  .eventArea2 .form.login .btn_login {position:absolute; right:10px; top:70px; }
  .eventArea2 .form.login br {display:block}
  /* eventArea3 */
  .eventArea3 .itemBox {background:url(images/bg_calendar.png) no-repeat; background-size:100% auto ;border:none; width:1081px; height:650px; padding:60px 0 0 80px; margin:10px auto 0;box-sizing: border-box;}
  .eventArea3 .itemBox > div.item {width:190px; height:190px; box-sizing:border-box;padding:20px 20px 0 20px; border-radius:12px; font-size:13px;margin-bottom:1px;}
  .eventArea3 .itemBox > div.item3, .item6, .item9, .item12{
    margin-right: 1px !important;}
  .eventArea3 .itemBox > div.item5, .item10, .item15{
    margin-right: 0 !important;}
  .eventArea3 .itemBox > div.item1,.item4,.item7,.item10,.item13{margin-left:0rem;}
  .eventArea3 .itemBox > div.item .pic { width: 75px; height: 100px; margin: 0 auto 0; background-size:75px auto !important}
  .eventArea3 .itemBox > div.item .name {font-size:14px;}
  .eventArea3 .itemBox > div.item button {width:80px; height:33px; right:10px; top:10px}
  .eventArea3 .itemBox > div.item.get:after { width:60px; height:60px;  background: url(images/ico_get.png) no-repeat; background-size: 100% auto; position: absolute; right:10px; top:10px}
  /* eventArea4 */
  .eventArea4 {width:960px; margin:0 auto; background:none}
  .eventArea4 h3 {font-size:50px; text-align: center; padding-top:80px; padding-bottom:20px;}
  .eventArea4 p {text-align: center;font-size:30px}
  .eventArea4 p br {display:none;}
  .eventArea4 p .fontStyle2 {font-size:18px; display:block;}
  /* eventArea5 */
  .eventArea5 {background: url(images/bg_waveTopW.gif) repeat-x left top #7f4a3c; width:100%; margin:160px auto 50px;text-align: left; max-width:1920px; padding:0 0 80px 0}
  .eventArea5 > section {width:960px; margin:0 auto;position:relative;}
  .eventArea5 ul li {font-size:17px; margin-bottom:8px}
  .eventArea5 ul li ul {margin-top:8px} 
  .eventArea5 ul li span {font-size:17px; left:-18px}
  .eventArea5 h3 {font-size:50px; text-align: center; margin:0 ; padding:90px 0 30px 0}
  .eventArea5 > section:after {width:137px; height:189px; left:242px;top:-25px }

  ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #7b403c;
    font-size:16px
  }
  ::-moz-placeholder { /* Firefox 19+ */
    color: #7b403c;
    font-size:16px
  }
  :-ms-input-placeholder { /* IE 10+ */
    color: #7b403c;
    font-size:16px
  }
  :-moz-placeholder { /* Firefox 18- */
    color: #7b403c;
    font-size:16px
  }
  .sideMenu {background:none; background-size: 100% 1.56rem; width: 150px; height: 180px; position: fixed; left: auto; right:20px; bottom: auto;top:60px;}
  .sideMenu li {width:150px; height:40px; background:url(images/bg_sideMenuW.png) no-repeat; text-align: center; margin-bottom:3px;}
  .sideMenu li a{width:150px !important; height:40px !important; font-size:18px !important; line-height:40px}
  .sideMenu li.menu3 a,.sideMenu li.menu4 a{background:none;}
  .sideMenu li.menu3 a:after{content:"RO粉絲團"}
  .sideMenu li.menu4 a{position:relative;}
  .sideMenu li.menu4 a:after{content:"巴哈姆特討論區";}
  footer iframe{height:200px;padding-bottom:0rem;}

}