#mtkContainer { background:url(../images/bg-repeat-1.jpg) top center repeat-y; }


.base { background:url(../images/bg-header-pc.jpg) top center no-repeat; }
header.header { height: 858px; text-align: center;}
header.header h1 { display: none; }
.header-time { padding-top:546px }
.header-time p { display: inline-block; padding: 8px 20px; font: bold 16px/1 "微軟正黑體"; color: #fff; background:#413936; border-radius: 99em; }
.header-start { transition: .5s; }
.header-start:hover { transform: translateY(-10px); }


.game {padding: 80px 0 8% 0; background:url(../images/bg-book.png) top center no-repeat; }

.index-note-title { margin: 2% 0; }
.index-note-title h2 {padding-top: 0;  text-align: center;  color: #fff;  letter-spacing: 2px; }
.index-note-title h2 p { display: inline-block; font: bold 40px/1.6 "微軟正黑體"; border-bottom:1px solid #fff; }

.index-note-content  { margin: 0 auto ; padding: 0 15px; max-width: 1400px; }
.index-note-content  ul { position: relative; height: 250px; overflow: hidden; transition: .5s; }
.index-note-content  ul li { font: 17px/1.8 "微軟正黑體"; text-align: left; color: #fff; }
.index-note-content  ul::after { content: ""; position: absolute; bottom:0; left: 0; width: 100%; height: 70px; z-index: 2;
background: linear-gradient(90deg, rgba(32, 107, 127, 1)0%, rgba(32, 107, 127, 0)100%);
background: -moz-linear-gradient(90deg, rgba(32, 107, 127, 1)0%, rgba(32, 107, 127, 0)100%);
background: -webkit-linear-gradient(90deg, rgba(32, 107, 127, 1)0%, rgba(32, 107, 127, 0)100%);
background: -o-linear-gradient(90deg, rgba(32, 107, 127, 1)0%, rgba(32, 107, 127, 0)100%);
 }
.index-note-content  ul.open { height: auto; }
.index-note-content  ul.open::after { display: none; background: none; }

.index-note-content  ul li a { display: inline-block; padding: 3px 3px; color: #21697f; text-align: center;
border-radius: 99em; background:#fff; }

.overshow { margin: 20px auto; padding: 0px; width: 280px; border-radius: 20px; background: #d3533d; transition: .5s;  }
.overshow  a {display: block; width: 100%; font: bold 24px/1.8 "微軟正黑體"; text-align: center; color: #fff;  }
.overshow:hover { transform: translateY(-10px); }


.topLine { position: fixed; top:0; left: 0; width: 100%; height: 20px;z-index: 102; background:#c98d50; border-bottom: 10px solid #5c3814;  }
.topLine.bottom { top: calc(100% - 20px); }

.rotate1 { position: fixed; top:-20px; right: -25px; width: 100px; height: 100px; z-index: 103; background:url(../images/dec-1.png) center center; background-size: 100%;  }
.rotate2 { position: fixed; top:-20px; left: -25px; width: 100px; height: 100px; z-index: 103; background:url(../images/dec-1.png) center center; background-size: 100%;  }

.rotate1.bottom,
.rotate2.bottom { top:calc( 100% - 80px); }


.index-ruleIO { display: inline-block; position: fixed; top:30%; right: 0; width: 50px; height: auto;
border-top:solid 2px #5c3814;border-left:solid 2px #5c3814;border-bottom:solid 2px #5c3814;
background:#c98d50; z-index: 100; }
.index-ruleIO a { display: inline-block; padding: 5px 10px; font: bold 30px/1.8 "微軟正黑體"; color: #fff;
text-align: center;   }

.index-ruleIO a img { display: inline-block; width: 80%; }
.index-ruleIO a img.re { transform: scaleX(-1); }

.index-rule {  display:none; position: fixed; top:30%; right: 0; width: 300px; height: auto;
border-top:solid 2px #5c3814;border-left:solid 2px #5c3814;border-bottom:solid 2px #5c3814;
background:#c98d50; z-index: 90; }
.index-rule { padding: 10px 40px 10px 10px; font: 16px/1.8 "微軟正黑體"; color: #fff;  }
.index-rule .title { font-weight: bold; font-size: 22px; }



@media only screen and (max-width: 1366px) {
.index-ruleIO a { font: bold 22px/1.8 "微軟正黑體";   }
}



@media only screen and (max-width: 1024px) {
.base { background-size: 180%; }
}

@media only screen and (max-width: 768px) {
.base {  background:none; }
header.header { height: auto; }
header.header h1 { display: block; }
header.header h1 img {  width: 100%; }
.header-time { padding-top: 0; }
}

@media only screen and (max-width: 500px) {
.topLine { position: fixed; top:0; left: 0; width: 100%; height: 10px;z-index: 102; background:#c98d50; border-bottom: 5px solid #5c3814;  }
.topLine.bottom { top: calc(100% - 10px); }

.rotate1 { width: 60px; height: 60px;  }
.rotate2 {  width: 60px; height: 60px;  }

.rotate1.bottom,
.rotate2.bottom { top:calc( 100% - 60px); }


.index-ruleIO { top:65%;  width: 50px; height: auto; }
.index-ruleIO a { font: bold 16px/1.8 "微軟正黑體"; color: #fff; }
.index-ruleIO img { width: 50% }

.index-rule { top: 65%; }
}