/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  padding-bottom: 0px;
  color: #5a5a5a;
  background-color:#000000;
  background-image:url("../imgg/bgloop.jpg");
  background-size:100%;
  line-height:1.3em;
  font-family:"Arial","微軟正黑體","新細明體";
  overflow-x:hidden;
}

a{
color:#fff;
}
a:hover,a:focus{
color:#ffd800;

}
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */

/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
}

/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
  padding-right: 0;
  padding-left: 0;

}
.navbar-wrapper .navbar {
  padding-right: 15px;
  padding-left: 15px;
}
.navbar-wrapper .navbar .container {
  width: auto;
}





/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-sm-4 {
  margin-bottom: 0px;
  text-align:center;
 }
.marketing h2 {
  font-weight: normal;
}
.marketing .col-sm-4 p {
  margin-right: 10px;
  margin-left: 10px;
}
.marketing {
position:relative;
display:block;
top: 0px;

}

.container{
max-width:1024px;
}


.mainlink{
position: absolute;
display: block;
top:0px;
width:100%;
height:300px;
}


.topbox{
position: absolute;
display: block;
top:320px;
width:685px;
height:223px;
left:720px;
z-index:1000;
}

.videoin{
position:relative;
display:inline-block;
width:396px;
height:223px;
background-color:#000;
}

.dlboxin{
position:relative;
display:inline-block;
margin-left:4px;
width:134px;
height:223px;
background-image:url("../imgg/dlbox.png");
}

.mobilehide{
display:block;
}

.pic{
position:relative;
display:block;
width:100%;
height:auto;
}

.paddingL{
padding-left:20px;
}
.paddingR{
padding-right:20px;
}
.padding{
padding:20px;
}
/* Featurettes
------------------------- */

.featurette-divider {
  margin: 80px 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1px;
}




/* RESPONSIVE CSS
-------------------------------------------------- */



@media (min-width: 790px) {  /* mobile or pad size */
	
  /* Navbar positioning foo */
  .navbar-wrapper {
    margin-top: 20px;
  }
  .navbar-wrapper .container {
    padding-right: 15px;
    padding-left: 15px;
  }
  .navbar-wrapper .navbar {
    padding-right: 0;
    padding-left: 0;
  }
  
  /* The navbar becomes detached from the top, so we round the corners */
  .navbar-wrapper .navbar {
    border-radius: 4px;
  }

  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}


/* Self added
------------------------- */

.titlemid{
width:100%;
height:81px;
background-repeat:repeat-x;
background-image: url("../imgg/titlebg.png");
text-align:center;


}
.titlemid2 {
  background-image: url("../imgg/titlebg.png");
  background-size: 100% 81px;
  background-repeat:no-repeat;
  height: 108px;
  width: 100%;
}

.mobileshow{
display:none;

position:relative;
}

.boxA2{
position:relative;
display:block;


color:#331800;
min-width:320px;
padding:5px;
padding-top:36px;
padding-bottom:20px;
margin-bottom:22px;
min-height:100px;
background-image:url("../imgg/boxbg.jpg");
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;

border-style:solid;
border-color:#fff;
border-width:1px;
-moz-box-shadow:1px 1px 8px #414141;
-webkit-box-shadow:1px 1px 8px #414141;
box-shadow:1px 1px 8px #414141;
}


.boxA{
min-width:320px;
position:relative;
display:block;
width:100%;
top:-90px;
margin-bottom:10px;
min-height:170px;
height:100%;
margin-left:auto;
margin-right:auto;

border-style: solid;


border-top-width:88px;border-right-width:63px;
border-bottom-width:88px;border-left-width:63px;
border-image-slice:9;

-webkit-border-image: url("../imgg/box1.png") 88 63 88 63 stretch repeat;
-moz-border-image: url("../imgg/box1.png") 88 63 88 63 stretch repeat;
-o-border-image: url("../imgg/box1.png") 88 63 88 63 stretch repeat;
border-image: url("../imgg/box1.png") 88 63 88 63 stretch repeat;

}

.boxAin{
width:100.1%;
height:100%;
min-height:74px;
position:relative;
display:block;
background-image:url("../imgg/bg2.png");
padding:10px;
padding-top:0px;
padding-bottom:0px;
}

.boxAinfooter{
width:100.1%;
height:100%;
min-height:0px;
position:relative;
display:block;

padding:0px;

padding-top:0px;
padding-bottom:0px;
}

.newsbox{
position:relative;
display:block;
width:100%;
height:535px;
padding:8px;
font-size:1.1em;
text-align:left;
margin-top:0px;

overflow:hidden;
}


.apkbs{
position:absolute;
display:block;
width:100%;
height:7%;
top:71%;
z-index:10003;

}


.iosbs{
position:absolute;
display:block;
width:100%;
height:5%;
top:78%;
z-index:10003;
}


.andbs{
position:absolute;
display:block;
width:100%;
height:6%;
top:83%;
z-index:10003;

}

.titleSD{
position:position;
display:block;
font-size:1.4em;
color:#ffba00;
height:20px;
padding-left:40px;
background-repeat:no-repeat;
background-image:url("../imgg/lili.png");
}

.wordmin{
padding-top:8px;
max-width:420px;
}

.titleM{
position:relative;
display:block;
width:100%;
color:#000;
top:-2px;
font-size:1.9em;
font-weight:700;
line-height:1em;

text-shadow:1px 1px 2px #e8ba7b;

}

.logomin{
padding-top:8px;
}

.maxA{
position:relative;
display:block;
max-width:235px;
top:-5px;
}

.newsbox2{position:relative;
display:block;
width:100%;
height:50px;
background-image:url("../imgg/barbg.png");
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
border-width:2px;
border-color:#000;
text-align:center;
border-style:solid;
color:#fff;
}
.itemNbb{
position:relative;
width:100%;
height:30px;
position:relative;
display:block;
background-color:#ffba00;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;

border-width:2px;
border-color:#482506;
border-style:solid;

-moz-box-shadow:1px 1px 1px #000;
-webkit-box-shadow:1px 1px 1px #000;
box-shadow:1px 1px 1px #000;
margin-bottom:20px;
}

.pagination {
    
    margin: 0px 0;
    
}

/* overwrite */

.pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus {
    background-color: #ffba00;
  border-color: #4a2504;
  border-width:1px;
  color: #f9eab5;
}

.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
  background-color: #361c00;
  border-color: #4a2504;
  border-width:1px;
  color: #f9eab5;
  cursor: default;
  z-index: 2;
}

.pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus {
  background-color: #8c5b17;
  border-color: #4a2504;
  border-width:1px;
  color: #fff;
  cursor: not-allowed;
}

.pagination > li > a, .pagination > li > span {
 background-color: #8c5b17;
  border-color: #4a2504;
  color: #fff;
  float: left;
  border-width:1px;
  line-height: 1.42857;
  margin-left: -1px;
  padding: 6px 12px;
  position: relative;
  text-decoration: none;
}
.pagination > li > a:hover, .pagination > li > span:hover {
  background-color: #ffbf5a;
  border-color: #4a2504;
  color: #000;
  float: left;
  border-width:1px;
  line-height: 1.42857;
  margin-left: -1px;
  padding: 6px 12px;
  position: relative;
  text-decoration: none;
}

.offb{
opacity:0.4;
cursor:initial;
}

.linesT{
position:relative;
display:block;
width:100%;
height:8px;
margin-top:16px;
margin-bottom:16px;
background-size:100%;
background-image:url("../imgg/lines.png");
background-repeat:no-repeat;
}
.linesTsp{
position:relative;
display:block;
width:360px;
left:-40px;
height:8px;
top:22px;
margin-top:6px;
margin-bottom:16px;
background-size:100%;
background-image:url("../imgg/lines.png");
background-repeat:no-repeat;
}
.boxA4{
position:relative;
display:block;
width:100%;
min-width:320px;
padding:20px;
padding-top:30px;
padding-bottom:30px;
margin-bottom:22px;
min-height:100px;
background-image:url("../imgg/boxbg.jpg");
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;

color:#331800;
border-style:solid;
border-color:#fff;
border-width:1px;
-moz-box-shadow:1px 1px 8px #414141;
-webkit-box-shadow:1px 1px 8px #414141;
box-shadow:1px 1px 8px #414141;
}

.minbox2 {
    display: block;
   
    margin-left: auto;
    margin-right: auto;
    max-width: 460px;
    position: relative;
}

.boxA3{
position:relative;
display:block;
width:100%;
padding-top:0px;
padding-bottom:0px;
margin-bottom:0px;
min-height:65px;
}

.boxA3s{
position:relative;
display:block;
width:100%;
padding-top:0px;

padding-bottom:0px;
margin-bottom:0px;
min-height:75px;

top:0px;
color: #c2c2c2;
font-size: 0.8em;
}

.boxA3r{
position:relative;
display:block;
width:100%;
padding-top:0px;
padding-bottom:0px;
margin-bottom:0px;
min-height:65px;

}
.box500{
position:relative;
display:block;
width:500px;
height:500px;
background-color:#999;
color:#fff;
text-align:center;
}

.w100t{
position:relative;
display:block;
width:60%;

margin-left:auto;
margin-right:auto;
}

.menubb{
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
margin-top:10px;
background-image:url("../imgg/menubn.png");
width:120px;
height:35px;
top:0px;
background-repeat:no-repeat;
background-position:below;
opacity:0.8;

-moz-transition:opacity 0.2s ease-in-out;
-o-transition:opacity 0.2s ease-in-out;
-webkit-transition:opacity 0.2s ease-in-out;
-ms-transition:opacity 0.2s ease-in-out;
transition:opacity 0.2s ease-in-out;
}
.menubb:hover{
opacity:1;
}

.w100p{
position:relative;
display:block;
width:100%;
max-width:253px;
top:-2px;
margin-left:auto;
margin-right:auto;
}

.w100p2{
position:relative;
display:block;
width:104%;
max-width:253px;
top:-5px;
margin-left:auto;
margin-right:auto;
}

.w100p3{
position:relative;
display:block;
width:100%;
max-width:550px;
top:0px;
margin-left:auto;
margin-right:auto;

-moz-box-shadow:0px 2px 3px #666;
-webkit-box-shadow:0px 2px 3px #666;
box-shadow:0px 2px 3px #666;
}

.widthcit{
position:relative;
display:block;
width:100%;
max-width:400px;
margin-left:auto;
margin-right:auto;
margin-top:8px;
}
.widthcit2{
position:relative;
display:block;
width:100%;
max-width:500px;
margin-left:auto;
margin-right:auto;
margin-top:8px;
}
.itemLeft{
position:relative;
display:inline-block;
height:28px;
width:70%;
overflow:hidden;
line-height:1.5em;
}

.itemRight{
position:absolute;
display:inline-block;
height:30px;
width:30%;
float:right;
overflow:hidden;
text-align:right;
font-weight:700;
line-height:1.5em;
}


.itemN a{
color:#fff0b6;
}
.newN a{
color:#fff0b6;
}
.itemN a:hover{
color:#ffba00;
text-decoration:none;
}

.itemN{
position:relative;
display:inline-block;
width:100%;
height:40px;
border-bottom-style:dotted;
border-bottom-color:#57380d;
margin-bottom:10px;
}

#newA{
display:none;
}
#actA{
display:none;
}
#refreshA{
display:none;
}
#systemA{
display:none;
}

#dlm{
position:absolute;
display:block;
width:100%;
max-width:322px;

}

#pnews{
position:relative;
display:block;
height:55px;
max-width:455px;
text-align:center;
font-size:1.25em;
font-weight:100;
line-height:3em;
color:#fff;
width:100%;
margin-left:auto;
margin-right:auto;
background-image:url("../imgg/newmenu.png");
background-size:100% 55px ;
background-repeat:no-repeat;
}

#pnews a{

text-decoration:none;
}
#pnews a:hover{

text-decoration:none;
}
.activeO{
color:#ffba00;
}

.cit{
position:relative;
display:block;
width:1px;
height:1px;
margin-left:auto;
margin-right:auto;
}
.cith{
position:relative;
display:block;
width:1px;

margin-left:auto;
margin-right:auto;
}
.citinside{
position:relative;
display:block;
width:1920px;
left:-960px;
}

.cits2{
position:relative;
display:block;
width:100%;
margin-top:10px;
}

.cits3{
position:relative;
display:block;
width:100%;
margin-top:10px;
top:240px;
}

.titlepp{
left:-3px;
top:-102px;
position:absolute;

width:100%;
height:81px;
}

.w100p2inin{
position:absolute;
display:block;
left:22px;
top:-3px;
}


.picpic{
width:100%;

margin-left:auto;
margin-right:auto;
margin-top:2px;
}
.picpic2{
width:50%;
max-width:180px;
margin-left:auto;
margin-right:auto;
}


.cits3in{
position:relative;
display:block;
width:317px;
height:96px;
margin-left:auto;
margin-right:auto;
}

.cits2in{
position:relative;
display:block;
width:236px;
height:70px;
margin-left:auto;
margin-right:auto;
}
.cits2in:hover{
opacity:0.9;
}
.colorTd{
font-size:1.3em;
color:#fff;
margin-top:10px;
margin-bottom:5px;
text-shadow:2px 2px 2px #000;
}
.colorTd2{
font-size:1em;
color:#00fffc;
margin-top:10px;
margin-bottom:5px;
text-shadow:2px 2px 2px #000;
}
.colorGd{
font-size:1.3em;
color:#00fffc;
margin-top:10px;
margin-bottom:5px;
text-shadow:2px 2px 2px #000;
}

.helpbn{
position:absolute;
display:none;
width:257px;
height:56px;
top:170px;
left:2px;
background-image:url("../imgg/dlboxExp.png");
}

.iosbn{
position:relative;
display:block;
width:100%;
margin-top:100px;
height:34px;
}

.andbn{
position:relative;
display:block;
width:100%;
height:42px;
}

.apkbn{
position:relative;
display:block;
width:100%;
height:40px;
}
.w100m{
width:100%;
min-width:320px;
display:none;
z-index:9003;
}

.line2{
position:relative;
display:block;
width:100%;
height:48px;
background-size:100%;
background-repeat:no-repeat;
background-position:bottom;
background-image:url("../imgg/line2.png");
}

.line3{
position:relative;
display:block;
width:100%;
height:8px;
background-size:100%;
background-repeat:no-repeat;

background-image:url("../imgg/line2.png");
}

.line8{
position:relative;
display:block;
width:100%;
height:14px;
background-size:100%;
background-repeat:no-repeat;
background-position:bottom;
background-image:url("../imgg/line2.png");
}

.leftbx{
position:relative;
display:inline-block;
width:33%;
}
.midbx{
position:relative;
display:inline-block;
width:33%;
}
.rightbx{
position:relative;
display:inline-block;
width:33%;
}

.city{
position:relative;
display:block;
margin-top:10px;
width:240px;
margin-left:auto;
margin-right:auto;
height:40px;

}

.topbars{
position:relative;
display:block;
top:-350px;
left:-540px;
width:1092px;
height:246px;

background-repeat:no-repeat;
background-position:center;
background-image:url("../imgg/bar.png");
}
.fbbox{
position:relative;
display:block;
height:130px;
width:290px;
margin-left:auto;
margin-right:auto;
background-color:#564454;
}


.AllO{
  position: relative;
  display:inline-block;
  width:92px;
  height:48px;
  padding-top:15px;
  font-size:1.4em;
  font-weight:700;
  background-image:url("../imgg/new.png");
}


.buttonNno{
position:relative;
display:block;
width:100%;
height:70px;

}
.buttonNn{
position:relative;
display:block;
width:100%;
height:50px;
background-image:url("../imgg/barbg.png");
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;

border-width:2px;
border-color:#000;
border-style:solid;
}
.buttonNn:hover{
background-image:url("../imgg/barbg2.png");
}




.ppm{
position:absolute;
display:block;
width:100%;
min-width:320px;
}
.ppmin{
position:absolute;
display:none;
width:100%;
min-width:320px;
}
.pp{
position:absolute;
display:block;
width:100%;
max-width:1920px;
}
.ppin{
position:absolute;
display:block;
width:100%;
top:-10px;
}
.wordW{
color:#fff;
}

.height50{
height:30px;
}

.lines{
position:relative;
display:block;
width:100%;
height:1px;
text-shadow:3px 3px 8px #000;
background-color:#fff;
}


.height480{
position:relative;
display:block;
height:480px;
width:1px;
}



.logopos{
position:relative;
display:block;
top:-35px;
}

.midpageNo{
position:relative;
display:block;
width:100%;
height:30px;
margin-top:26px;
text-align:center;
}

.alignR{
text-align:right;
}
.alignL{
text-align:left;
}
.alignC{
text-align:center;
}

.paddT{
padding-top:20px;
position:absolute;
display:block;
height:100px;
width:100%;
}
.topa{
position:relative;
display:block;
width:100%;
}
.topb{
position:relative;
width:100%;
}
.paddT2{
padding-top:0px;
position:relative;
display:block;
top:0px;
}

#div1{
text-align:right;
}
#div3{
text-align:left;
}

.overfh{
overflow:hidden;
}

.centerit{
text-align:center;
margin-left:auto;
margin-right:auto;
display:block;
max-width:574px;
width:30%;
min-width:130px;

}

.widpic{
position:absolute;
display:block;
width:100%;
}

.belowbox{
position:absolute;
display:block;
width:100%;
height:60px;
padding-top:5px;
}

.coverM{
position:relative;
display:block;

top:230px;
width:307px;
height:217px;
margin-left:auto;
margin-right:auto;

}
.coverMon{
position:relative;
display:block;

width:307px;
height:217px;

background-image:url("../imgg/coverM.png");
}

.left1barA{
position:absolute;
display:block;
overflow:hidden;
width:92px;
height:193px;
left:10px;
top:10px;

background-color:#324236;
}

.left2barA{
position:absolute;
display:block;
width:92px;
height:193px;
overflow:hidden;
left:106px;
top:10px;

background-color:#324236;
}

.left3barA{
position:absolute;
display:block;
overflow:hidden;
width:92px;
height:193px;
left:204px;
top:10px;

background-color:#324236;
}
.left1bar{
position:absolute;
display:block;
background-image:url("../imgg/line1.jpg");
width:92px;
height:1143px;
left:0px;
top:-925px;
}

.left2bar{
position:absolute;
display:block;
background-image:url("../imgg/line2.jpg");
width:92px;
height:1143px;
left:0px;
top:-906px;
}

.left3bar{
position:absolute;
display:block;
background-image:url("../imgg/line3.jpg");
width:92px;
height:1143px;
left:0px;
top:-902px;
}

.off{
display:none;
}

.centerit2{
position:relative;
text-align:center;
margin-left:auto;
margin-right:auto;
display:block;
max-width:374px;
width:30%;
min-width:130px;
}

.flo{
position:relative;
display:block;
top:0px;
}

#picmenu1{
	width:100%;
	max-height: 132px;
}
#picmenu2{
	width:100%;
	max-height: 152px;
}
#picmenu3{
	width:100%;
	max-height: 132px;
}


/* in 1920 */
@media (max-width: 1920px) {
	.marketing {
	position:relative;
	display:block;
	}
	.toparea{
	position:relative;
	display:block;
	height: 0px;
	}
	.centerit{
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	display:block;
	max-width:574px;
	width:50%;
	min-width:130px;

	}
	.centerit2{
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	display:block;
	max-width:374px;
	width:50%;
	min-width:130px;
	}
	
	.boxA4{
position:relative;
display:block;

}	
	
}

/* in 1680 */
@media (max-width: 1680px) {

.minbox2 {
    display: block;
   
    margin-left: auto;
    margin-right: auto;
    max-width: 260px;
    position: relative;
}




	.marketing {
	position:relative;
	display:block;
	
	}

.boxA4{
position:relative;
display:block;

}	
	.widpic{

width:100%;

margin-left:auto;
margin-right:auto;
}
	.centerit{
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	display:block;
	max-width:574px;
	width:40%;
	min-width:220px;
	}
	.centerit2{
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	display:block;
	max-width:374px;
	width:40%;
	min-width:220px;
	}
	
	
}

/* in 1400 */
@media (max-width: 1400px) {
.topbox{
position: absolute;
display: block;
top:260px;
width:685px;
height:223px;
left:720px;
}

	.marketing {
	position:relative;
	display:block;
	
	}

	.boxA4{
position:relative;
display:block;
	
}	

}

/* in 1200 (default size)*/
@media (max-width: 1200px) {

	#div1{
	text-align:center;
	}
	#div3{
	text-align:center;
	}
	.marketing {
	position:relative;
	display:block;
	
	}

	.boxA4{
position:relative;
display:block;
	
}	

}



/* in 992 (default size)*/
@media (max-width: 1024px) {

.wordmin{
padding-top:8px;

}

.logomin{
padding-top:0px;
min-height:20px;
}

.warnmin{
padding-bottom:20px;

}

.picpic2{
width:50%;
max-width:150px;
margin-left:auto;
margin-right:auto;
}
.mspec2{
position:relative;
display:block;

}
.boxA{
min-height:320px;
}
.boxAin2{
min-height:250px;
}

.videobox{
position:relative;
display:block;
width:100%;
max-width:800px;
padding:20px;
margin-left:auto;
margin-right:auto;
}

.lineUp{
position:relative;
display:block;
width:100%;
max-width:740px;
margin-left:auto;
margin-right:auto;
margin-bottom:8px;
}

.pic{
width:100%;
height:51px;
}
.picV{
width:100%;
height:40px;
margin-top:10px;
}
.w100m{
width:100%;
min-width:320px;
display:block;
z-index:9003;
}
.w100md{
width:60%;
max-width:322px;
margin-left:auto;
margin-right:auto;
display:block;
position:relative;
z-index:9003;

}
.w100{
display:none;
}

.topbars{
	display:none;
}
.toparea{
	display:none;
}
	.boxA4{
position:relative;
display:block;

}	



.ppm{
position:absolute;
	display:block;
	width:100%;
}
.ppmin{
position:absolute;
	display:block;
	width:100%;
}
.pp{
position:absolute;
	display:none;
}
.ppin{
position:absolute;
	display:none;
}
.mobilehide{
display:none;
}
.mobileshow{
display:block;
}


	
.marketing {
	position:relative;
	display:block;
	
}


}





/* in 790 (default size)*/
@media (max-width: 790px) {

.titleM{
position:relative;
display:block;
width:100%;
color:#000;
font-size:1.4em;
font-weight:700;
line-height:1em;
}

.mobilehide{
display:none;
}
.mobileshow{
display:block;
}

.apkbs{display:none;}
.iosbs{display:none;}
.andbs{display:none;}
.pp{
	position:absolute;
	display:block;
	width:100%;
}

	
.marketing {
	position:relative;
	display:block;
	
}

}

/* in 900 (default size)*/
@media (max-width: 520px) { /* Just for adjust top background */
.boxA{
min-height:320px;
border-width: 88px 33px;
}
.titleM{
position:relative;
display:block;
width:100%;
color:#000;
font-size:1.2em;
font-weight:700;
line-height:1.2em;
top:-3px;

text-shadow:1px 1px 2px #e8ba7b;
}

#pnews{
font-size:1.15em;
line-height:3.4em;
}

.titlemid{
min-width:150px;
width:100%;
height:81px;
background-size:100% 81px;
background-image: url("../imgg/titlebg.png");
text-align:middle;
}



.itemN a .itemRight{
color:#6a3e00;
font-weight:700;
}



.itemLeft{
position:relative;
display:inline-block;
height:30px;
font-size:0.8em;
width:70%;
overflow:hidden;
line-height:2em;
}
.itemRight{
position:relative;
display:inline-block;
height:30px;
width:28%;
float:right;
overflow:hidden;
font-size:0.8em;
text-align:right;
line-height:2em;
}

.itemN{
position:relative;
display:inline-block;
width:100%;
height:30px;
border-bottom-style:dotted;
border-bottom-color:#331800;
}


.newsbox{
padding:10px;
padding-top:0px;
height:455px;
}

}

@media (max-width: 420px) { /* Just for adjust top background */


.boxAin {
    padding: 0;
}

#pnews{
font-size:1.1em;
line-height:3.4em;
letter-spacing:-0.1em;
}


.buttonNno{
height:50px;
}
.mspec{
position:relative;
display:block;
margin-top:0px;
}
.mspec2{
position:relative;
display:block;

}
.w100p{
position:relative;
display:block;
width:120%;
min-width:150px;
left:-16px;
max-width:293px;
}
}

@media (max-width: 340px) { /* Just for adjust top background */
.titlepp{
left:-18px;
}

.w100p{
position:relative;
display:block;
width:130%;
left:-20px;
max-width:293px;
}

#pnews{
font-size:1.1em;
line-height:3.4em;
letter-spacing:-0.1em;
}



.picpic{
width:100%;

margin-left:auto;
margin-right:auto;
margin-top:2px;
}



.picpic2{
width:50%;
max-width:140px;
margin-left:auto;
margin-right:auto;
}
.mspec{
position:relative;
display:block;

}

.mspec2{
position:relative;
display:block;

}


}

/* End of media query */


/* Overlap */
.navbar-inverse {
	background-color:#000;
    background-image:url("../imgg/bar.png");
	background-repeat:no-repeat;
	background-position:center top;
    border-color: #000;
}

.navbar-inverse .navbar-nav > li > a {
    color: #ddd;
	 font-size:1.1em;
   font-weight:700;
}


.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
   background-image:url("../imgg/bar.png");
   background-position:top center;
   color: #ff8e00;
   font-size:1em;
   font-weight:700;
   font-family:"Arial","微軟正黑體","新細明體";
}

.navbar-inverse .navbar-toggle {
    border-color: #000;
}

.navbar-toggle {
    background-color: transparent;
    background-image: none;
    border: 0px solid transparent;
    border-radius: 0px;
    float: right;
    margin-bottom: 0px;
    margin-right: 0px;
    margin-top: 8px;
    padding: 0px 0px;
    position: relative;
}
.navbar-toggle:hover {
    background-color: #000;
    
}

.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
  background-color: #000;
}
.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 0px;
    padding-right: 0px;
}
/* Overlap End */


/* Self added */
.citf{
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
}

.linkfb{
position:absolute;

display:block;
left:221px;
top:8px;
width:54px;
height:54px;

}
.yout{
position:absolute;

display:block;
left:265px;
top:48px;
width:40px;
height:40px;
}
.garena {
    display: block;
    height: 50px;
    left: 145px;
    position: absolute;
    top: 0px;
    width: 100px;

}

.logoR{
position:relative;
display:block;
width:268px;
height:81px;
background-image:url("../imgg/cpr.png");
background-repeat:no-repeat;
margin-left:auto;
margin-right:auto;
}

.logoL{
position:relative;
display:block;
width:245px;
height:48px;
background-repeat:no-repeat;
margin-left:auto;
margin-right:auto;

background-image:url("../imgg/logoi.png");
}




#eye1{
opacity:0;
}

#eyem{
opacity:0;
}

.w100{
width:100%;
min-width:320px;
z-index:9003;
}


/* menu desktop*/

#bindex{
position:absolute;
display:block;
width:530px;
height:210px;
top:-180px;
left:229px;
z-index:5000;
}
#bspec{
position:absolute;
display:block;
width:110px;
height:122px;
top:66px;
left:124px;
z-index:5000;

background-image:url("../imgg/mspec.png");
opacity:0;
-moz-transition:opacity 0.2s ease-in-out;
-o-transition:opacity 0.2s ease-in-out;
-webkit-transition:opacity 0.2s ease-in-out;
-ms-transition:opacity 0.2s ease-in-out;
transition:opacity 0.2s ease-in-out;
}
#bspec:hover{
opacity:1;
background-image:url("../imgg/mspec.png");
}


#bindex {
  position:absolute;
	display:block;
	width:160px;
	height:142px;
	top:66px;
	left:464px;
}

#bdiscuss{
position:absolute;
display:block;
width:137px;
height:124px;
top:66px;
left:828px;
z-index:5000;

background-image:url("../imgg/mvideo.png");
opacity:0;
-moz-transition:opacity 0.2s ease-in-out;
-o-transition:opacity 0.2s ease-in-out;
-webkit-transition:opacity 0.2s ease-in-out;
-ms-transition:opacity 0.2s ease-in-out;
transition:opacity 0.2s ease-in-out;
}
#bdiscuss:hover{
opacity:1;
background-image:url("../imgg/mdiscuss.png");
}


#bshop{
position:absolute;
display:block;
width:111px;
height:103px;
top:85px;
left:310px;
z-index:5000;

background-image:url("../imgg/mshop.png");
opacity:0;
-moz-transition:opacity 0.2s ease-in-out;
-o-transition:opacity 0.2s ease-in-out;
-webkit-transition:opacity 0.2s ease-in-out;
-ms-transition:opacity 0.2s ease-in-out;
transition:opacity 0.2s ease-in-out;
}
#bshop:hover{
opacity:1;
background-image:url("../imgg/mshop.png");
}


#bcust{
position:absolute;
display:block;
width:111px;
height:103px;
top:85px;
left:666px;
z-index:5000;

background-image:url("../imgg/mservice.png");
opacity:0;
-moz-transition:opacity 0.2s ease-in-out;
-o-transition:opacity 0.2s ease-in-out;
-webkit-transition:opacity 0.2s ease-in-out;
-ms-transition:opacity 0.2s ease-in-out;
transition:opacity 0.2s ease-in-out;
}
#bcust:hover{
opacity:1;
background-image:url("../imgg/mservice.png");
}

#bdownloadg{
position:absolute;
display:block;
width:110px;
height:38px;
top:52px;
left:523px;
z-index:5000;

}


#bdownloada{
position:absolute;
display:block;
width:110px;
height:38px;
top:92px;
left:523px;
z-index:5000;

}

#bdownloadi{
position:absolute;
display:block;
width:110px;
height:38px;
top:132px;
left:523px;
z-index:5000;

}



.footerA >.col-md-1, 
.footerA >.col-md-2, 
.footerA >.col-md-3,
.footerA >.col-md-4, 
.footerA >.col-md-5, 
.footerA >.col-md-6, 
.footerA >.col-md-7, 
.footerA >.col-md-8, 
.footerA >.col-md-9, 
.footerA >.col-md-10, 
.footerA >.col-md-11, 
.footerA >.col-md-12 
{
  min-height: 1px;
  padding-left: 0px;
  padding-right: 0px;
  position: relative;
}

#footers{
position:relative;
display:block;
top:-40px;
}

.w100left{
position:relative;
width:100%;
left:0px;
padding:0px;
padding-left:0px;
margin-top:0px;
margin-bottom:0px;
text-align:right;
display:inline-block;
}

.w100leftb{
position:relative;
width:100%;
left:0px;
padding:0px;
padding-left:0px;
margin-top:0px;
margin-bottom:0px;
text-align:right;
display:inline-block;
}


.w33left{
position:relative;
width:33%;
left:0px;

padding-top:0px;
padding-left:0px;
padding-bottom:0px;
padding-right:2px;
text-align:right;
display:inline-block;
}

.w34mid{
position:relative;
width:33%;
left:0px;

padding-top:0px;
padding-left:0px;
padding-bottom:0px;
padding-right:2px;
text-align:right;
display:inline-block;
}


.w33right{
position:relative;
width:32%;
left:0px;
float:right;
padding-top:0px;
padding-left:0px;
padding-bottom:0px;
padding-right:2px;
text-align:right;
display:inline-block;
}

.fullwidth{
position:relative;
width:100%;

height:59px;
}

.w50left{
position:relative;
width:50%;
left:0px;

padding-top:0px;
padding-left:0px;
padding-bottom:0px;
padding-right:2px;
text-align:right;
display:inline-block;
}
.w50right{
position:relative;
float:right;
width:49%;
right:0px;
padding-top:0px;
padding-bottom:0px;
padding-right:0px;
padding-left:2px;
text-align:left;
display:inline-block;
}


.buttonN8{
position:relative;
display:block;
width:100%;
height:54px;
margin-bottom:50px;
background-color:hsla(0, 100%, 0%, 0.5);
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;

border-width:2px;
border-color:#ff5a00;
border-style:solid;

-moz-box-shadow:1px 1px 8px #414141;
-webkit-box-shadow:1px 1px 8px #414141;
box-shadow:1px 1px 8px #414141;
}


.buttonN8:hover{
background-color:hsla(15, 100%, 50%, 0.7);
}

.buttonN{
position:relative;
display:block;
width:90%;
max-height:71px;
min-height:46px;
margin-bottom:3px;
background-image:url("../imgg/bnbn.png");
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;


}
.buttonNL{
position:relative;
display:block;
width:90%;
max-height:71px;
min-height:46px;
right:5px;
margin-bottom:3px;
float:right;
background-image:url("../imgg/bnbn.png");
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;


}

.buttonN:hover{
background-color:hsla(41, 100%, 50%, 0.8);
}


.active{
background-color:hsla(41, 100%, 50%, 0.8);
}


.buttonN3{
position:relative;
display:block;
width:100%;
height:54px;
background-image:url("../imgg/barbg3.png");
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;

border-width:3px;
border-color:#fbc929;
border-style:solid;

-moz-box-shadow:1px 1px 8px #414141;
-webkit-box-shadow:1px 1px 8px #414141;
box-shadow:1px 1px 8px #414141;
}


.buttonN3:hover{
border-color:#fff;
}



.buttonN2{
position:relative;
display:block;
width:100%;
height:54px;
background-image:url("../imgg/barbg2.png");
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;

border-width:3px;
border-color:#fbc929;
border-style:solid;

-moz-box-shadow:1px 1px 8px #414141;
-webkit-box-shadow:1px 1px 8px #414141;
box-shadow:1px 1px 8px #414141;
}


.buttonN2:hover{
border-color:#fff;
}

.mspec{
position:relative;
display:block;
padding-left:5px;
padding-right:5px;
padding-top:5px;
text-align:center;
vertical-align:middle;

margin-left:auto;
margin-right:auto;
top:0px;
}
.mspec2{
position:relative;
display:block;
padding-left:5px;
padding-right:5px;
padding-top:0px;
text-align:center;
vertical-align:middle;
max-height:67px;
margin-left:auto;
margin-right:auto;
top:0px;
padding-top:5px;
}

#pdownload5{
position:relative;
display:block;
background-image:url("../imgg/mdownload2.png");
width:107px;
height:32px;
margin-left:auto;
margin-right:auto;
top:7px;

}



#pdownload{
position:relative;
display:block;
background-image:url("../imgg/pdownload.png");
width:219px;
height:97px;
margin-left:auto;
margin-right:auto;
top:-24px;
}
#ptalk{
position:relative;
display:block;
background-image:url("../imgg/mtalk.png");
width:252px;
height:89px;
margin-left:auto;
margin-right:auto;
top:-28px;
}

.container-fluid {
    margin-left: auto;
    margin-right: auto;
    padding-left: 0px;
    padding-right: 0px;
}



.upb{
position:relative;
display:block;
width:100%;
max-width:495px;
height:42px;
margin-left:auto;
margin-bottom:8px;
top:0px;
margin-right:auto;
background-size:100%;
background-image:url("../imgg/upb.png");
}

.nextb{
position:relative;
display:block;
width:100%;
max-width:495px;
height:42px;
margin-left:auto;
margin-bottom:8px;
top:0px;
margin-right:auto;
background-size:100%;
background-image:url("../imgg/downb.png");
}
.citin{
position:relative;
display:block;
width:100%;
margin:0px;
text-align:center;
}

.bannerN{
position:relative;
display:block;
width:380px;
height:224px;
margin-left:auto;
margin-right:auto;
border-width:0px;
border-style:solid;


left:-51px;
}



.bannerB{
position:relative;
display:block;
width:380px;
height:224px;
background-color:#fff
}

.specpadd{
padding-left:0px;
}

.slick-dots li button:before {
 
    content: "●";
	font-size:20px;
	color:#792e18;
	opacity:1;
}

.slick-dots li.slick-active button::before {
    color: #ffcaba;
    opacity: 0.75;
}

.width96{
position:relative;
display:block;
width:360px;
left:-44px;
top:10px;
}

.width96b{
position:relative;
display:block;
width:90%;
max-width:280px;
margin-left:auto;
margin-right:auto;
margin-top:5px;
}


#fbarea{
position:relative;
display:block;
left:-51px;
width:380px;
height:256px;
margin-left:auto;
margin-right:auto;
background-color:#121212;}

.topsize{
position:relative;
display:block;
top:26px;
}



.titleHigh{
color:#980032;
font-weight:700;
font-size:20px;
}

.titleAf{
position:relative;
display:block;
width:100%;
text-align:center;
}



.widthcenter{
position:relative;
display:block;
width:100%;
max-width:432px;
margin-left:auto;
margin-right:auto;
}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  min-height: 1px;
  padding-left: 0px;
  padding-right: 0px;
  position: relative;
}





.titleleft{
float:left;
width:70px;
height:81px;
background-image: url("../imgg/titlepp.png");
}

.titleright{
float:right;
width:70px;
height:81px;
background-position:70px;
background-image: url("../imgg/titlepp.png");
}

.pic100s{
  position: relative;
  display:block;
  width:100%;
   opacity:0.8;
}
.pic100s:hover{
  opacity:1;
  -moz-transition:opacity 0.2s ease-in-out;
  -o-transition:opacity 0.2s ease-in-out;
  -webkit-transition:opacity 0.2s ease-in-out;
  -ms-transition:opacity 0.2s ease-in-out;
  transition:opacity 0.2s ease-in-out;
}
.minbox {
    display: block;
   
    margin-left: auto;
    margin-right: auto;
    max-width: 260px;
    position: relative;
}

.dlall{
position: relative;
display: block;
max-width:259px;
margin-left:auto;
margin-right:auto;
width:100%;
}

.content{

padding:6px;
padding-top:0px;
color:#c8bb8a;
font-size:1em;
line-height:1.5em;
}

.backbb{
position: relative;
display: inline-block;
margin-top:8px;
width:74px;
height:21px;
background-image:url("../imgg/backbb.png");
background-repeat:no-repeat;
}

.dateT{
float:right;
color:#c97510;
font-family:"Arial";
margin-top:10px;
font-size:1.2em;
font-weight:100;
}

.dateTm{
float:right;
color:#c97510;
font-family:"Arial";
margin-top:10px;
font-size:1.2em;
font-weight:100;
}

h3{
color:#ff6700;
font-size:1em;
position: relative;
display: inline-block;
}

.later{
position: relative;
display: block;
padding-top:8px;
text-align:center;
width:100%;
height:100%;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
background-color:#c6c6c6;
color:#fff;
text-shadow:1px 1px 3px #444;
}
.later:hover{
text-decoration:none;
}


.laterm{
position: relative;
display: block;
padding-top:8px;
text-align:center;
width:100%;
height:98%;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
background-color:#c6c6c6;
color:#fff;
text-shadow:1px 1px 3px #444;
}
.laterm:hover{
text-decoration:none;
}

.newb{
position: relative;
display: inline-block;
top:3px;
margin-right:2px;
width:41px;
height:17px;
background-image:url("../imgg/top.png");
}


.updateb{
position: relative;
display: inline-block;
top:3px;
margin-right:2px;
width:41px;
height:17px;
background-image:url("../imgg/update.png");
}


.systemb{
position: relative;
display: inline-block;
top:3px;
margin-right:2px;
width:41px;
height:17px;
background-image:url("../imgg/system.png");
}


.actb{
position: relative;
display: inline-block;
top:3px;
margin-right:2px;
width:41px;
height:17px;
background-image:url("../imgg/act.png");
}

.widthbn{
position: relative;
display:block;
width:176px;
margin-right:auto;
margin-left:auto;
margin-bottom:5px;
}

.midmid{
position: relative;
display:block;
margin-right:auto;
margin-left:auto;
border:8px;
margin-top:15px;
border-color:#000;
border-style:solid;
width:100%;
}