@charset "UTF-8";


a:active,a:hover {outline: 0;}

@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }


/* ------------------------------------------
  BASE STYLES
--------------------------------------------- */
*{ list-style:none; margin:0; padding:0;}

body {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color: #000;
  font-size:14px;
  font-family:Arial, Helvetica, sans-serif, "Gotham Medium";
  background:url(../images/body.jpg) center top no-repeat #FFF; padding-top:376px;
}





img{border:none; border:0;}

.topInfoNew{float:left;width:100%; height:398px;}
.topInfoNew .topInfo{float:right;width:28%;}
.topInfoNew .topInfo p{color:#c71f61; line-height:150%; float:left;width:100%; text-align:center;font-size:18px;font-family: "Microsoft Yahei", sans-serif; font-weight:bold; margin-top:-10px;}



.topHeader .topInfo{float:left;width:80%;}
.topHeader .topInfo p{color:#c71f61; line-height:150%; float:left;width:100%; text-align:center;font-size:18px;font-family: "Microsoft Yahei", sans-serif; font-weight:bold; margin-top:-10px;}
.topHeader .topInfo a{ border-radius:10px; color:#fff; background:#F90; box-shadow:#003; font-size:24px; line-height:200%; text-decoration:none; padding:0 10px; font-family:"Microsoft Yahei",sans-serif; margin-top:20px; float:right;}
.topHeader .topInfo a:hover{ background:#C60;}

.lang{float:right;}
.lang a{float:right; margin:9px 5px; text-align:center;-moz-border-radius:5px; border-radius:5px;-webkit-border-radius:5px; color:#fff; background:#666; line-height:24px; padding:0 5px; text-decoration:none; font-size:12px;}
.lang a:hover{background:#333;}

.social{float:right; clear:both; margin-bottom:10px;}
.social img{width:30px; height:auto;}
.social a{float:right; margin-left:20px;}

.mTop{display:none;}


hr{ hdisplay:block; width:100%; border-width:1px; border-color:#ddd; border-style:double; margin:30px 0;}


a.agree{color:#006600; font-size:14px; line-height:200%;}

.radiu3{-moz-border-radius:3px; border-radius:3px;-webkit-border-radius:3px;}
b{color:#69410a;}

#root { max-width: 1024px; margin: 0 auto; }
#pageWrap{max-width: 1024px; margin: 0 auto;}


.box1 { width: 100%; margin:2% 0; float:left;}
.box2 { width: 48%; padding:1%; float:left;}
.box3 { width: 48%;padding:1%; float:left;}
.box4 { width: 30%; float:left;}
.box5 { width: 30%; float:left;}
.box6 { width: 30%; float:left;}

.span2{ width:24%;float:left; padding-right:1%;}
.span3{ width:29%;float:left;padding-right:1%;}
.span4{ width:40%;float:left;}
.span5{width:49%;float:left;padding-right:1%;}
.span6{width:60%;float:left;}
.span7{width:69%;float:left;padding-right:1%;}
.span8{width:80%;float:left;}
.full{width:100%;}

.left{ float:left;}

img.full, img.span3, img.row, img.box2{ height:auto; border:0;}
img.span3{ width:32.333%!important; padding:0.5%!important; border:0;}



.row{width:100%; float:left; padding:5px 0;}
.box{float:left;}
.box detail{ font-size:17px; display:block; width:98%; padding:1%; line-height:140%;}


section {
  border-bottom: 1px solid #ddd;
  float:left; width:96%;
  padding:2%;
  position:relative;
  font-size:14px;
}

section.rules{background:#eee; border:1px solid #ddd;-moz-border-radius:3px; border-radius:3px;-webkit-border-radius:3px;}
section.rules p{ font-size:12px; padding:5px 20px;}

.clear{ clear:both; height:0px !important; width:100% !important;}

/*heading*/
h1{ font-size:24px; font-family:Arial, Helvetica, sans-serif; padding:5px 0; margin:10px 0; display:block; float:left; width:100%; text-align:left; color:#69410a;margin-bottom:10px;border-bottom:1px solid #ddd; margin-bottom:20px;font-family:"Microsoft Yahei",sans-serif; }
h2{margin-top:0; margin-bottom:20px; font-family:"Microsoft Yahei", "HanHei SC", "PingFang SC", "SimHei", Arial;float:left; width:100%; text-align:left; font-size:20px!important; font-weight:400;}

h3{color:#69410a; padding:5px 0; margin-top:20px; display:block; float:left; width:100%; font-size:18px; margin-bottom:20px;}

h4{text-align:left; color:#930; float:left;width:100%; margin-top:20px; margin-bottom:10px;}
h4.facebook{padding-left:45px; font-size:18px; line-height:35px; background:url(../images/h4icon.gif) #3b5998 no-repeat left center; width:auto; padding-right:20px;}
h4.facebook a{ color:#fff; text-decoration:none;}
h4.facebook a:hover{color:#FC0;}

.indexImg {float:left; width:100%; padding:20px;}
.indexImg img{width:100%; height:auto;}

.sideR{float:left;width:48%; text-align:right; margin-top:50px; padding:1%;}
.sideR a img{ padding-bottom:20px;}

ul.imgRow{float:left; width:100%; list-style:none; padding:0 0 20px; margin:0; font-size:12px;}
ul.imgRow li img{width:100%; height:auto; border:none;}

ul.imgRow2 li{float:left; list-style:none; width:47%; padding:1.5%; margin:0}
ul.imgRow2 li.auto img{width:auto; height:auto;}
ul.imgRow3 li{float:left; list-style:none; width:30%; padding:1.5%; margin:0}
ul.imgRow5 li{float:left; list-style:none; width:18%; padding:1%; margin:0}
ul.imgRow9 li{float:left; list-style:none; width:10%; padding:0.5%; margin:0}

ul.list li, ol.list li{float:left;width:100%; margin-left:20px; padding:5px 0; line-height:150%; font-size:14px;}
ul.list li{ list-style:disc!important;  }
ol.list li{ list-style:decimal!important;}


/* ------------------------------------------
  NAVIGATION STYLES
  (+ responsive-nav.css file is loaded in the <head>)
--------------------------------------------- */
.hidden-desktop{ display:none;}
.visible-desktop{ display:block;}


.fixed {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
}

/*header nav setting*/
nav{float:left;width:100%;}

#topNav{float:left; }
#topNav li {float:left;line-height:39px;}
#topNav li a{text-decoration:none; color:#fff;font-size:14px; font-weight:bold; float:left;padding:0 20px;text-align:center; } 
#topNav li a:hover{ background:#C06;}

#topNav li#cur{ background:#69410a;}
body#album #topNav li.drop{ background:#69410a;}


#topNav li{position:relative;}

#topNav li ul{position:absolute; z-index:100;left:0px;top:42px; background:#666;display:none;margin:0; min-width:100%;} /*if fix the width, then width:100%*/
#topNav li.mouseOver ul{display:block;}
#topNav li ul li{float:none;display:block;clear:both;width:100%; }
#topNav li ul li a,#topNav li.mouseOver ul li a{float:none;display:block;color:#fff;white-space:nowrap;padding:0 10px; }
#topNav li a:hover{background:#900;color:#fff;text-decoration:none;}








#select-menu {
display:none;
border: 1px solid #DDD;
background-color: #e4e4e4;
width: 100%;
height: 30px;
padding: 5px;
margin: 0;
cursor: pointer;
outline: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;}

#select-menu option{ text-indent:10px;}

.topGroup{position:absolute;top:0; right:0;}

/* content*/
.contentBox{float:left;width:98%; background:#fff; padding:1%;}


.imgFullwidth{width:100%; height:auto;}

blockquote{padding:20px; display:block; background:#fff; float:left;}

.content{float:left;width:96%; padding:2%;}
.content p{ font-size:15px;}
.contentEng p{ font-size:12px;}

p{ font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:150%; padding:10px 0; text-align:left; line-height:150%;}

p.note{ font-size:12px; clear:both;}


p.youtube iframe{float:left;width:48%; margin:1%;}

.content p.image2, .content p.image3, .content p.image4{float:left;width:100%;}
.content p.image2 img{width:48%; margin:1%; float:left;}
.content p.image4 img{width:23%; margin:1%;float:left;}
.content p.image3 img{width:31%; margin:1%;float:left;}


footer{padding:20px 0; float:left; background:#111; margin-top:0;width:100%;}
footer .center{max-width: 1000px; margin: 0 auto;}
footer .sponsor div{float:left; width:auto; margin-right:20px;}
div.outlink{float:right; margin:20px 40px 0 0;}

footer p{ font-size:12px; text-align:center; width:100%; color:#fff;}






/*2015 EDIT*/
.conList{list-style:none; float:left;width:100%; padding:0;}
.conList li{list-style:none; float:left;width:18%; padding:1%;}
.conList li img{ float:left; width:100%; text-align:center;}
.conList li p{ font-size:12px; line-height:150%; padding:10px 0;float:left; width:100%; text-align:center;}
.conList li a.iconBlog{ display:block; float:left; width:100%; height:45px; background:url(../images/icon_Mblog.png) no-repeat center center;}

.blogContent{width:100%;}
.blogContent div.conTitle{float:left;width:25%; padding-right:5%;}
.blogContent div.conTitle h4{font-size:18px; color:#333; padding:20px 0 10px;}
.blogContent div.conTitle img{width:98%; height:auto; border:1px solid #ddd;}
.blogContent blockquote{float:left;width:65%;}
.blogContent blockquote h1,.blogContent blockquote p{width:100%;}
.blogContent blockquote p img{height:auto!important; max-width:96%!important;}
div.newslist{ margin-top:20px;}

div.titleRel{font-size:18px; display:block; width:100%; margin:20px 0; padding:5px 0; border-bottom:1px solid #ddd; font-weight:bold; color:#669;}
div.newslist p span{padding-right:20px;}

ul.clipWrap, ul.audioWrap{ list-style:none; float:left; width:100%;}
ul.clipWrap li{ list-style:none; float:left; padding:0 0 10px 0;width:50%; text-align:center;}

ul.clipWrap li img{width:96%; height:auto; padding:2%; margin-bottom:5px; border:0;}
ul.clipWrap li p{ font-size:12px; padding:0; margin:0;}

ul.clipWrap li p{width:100%;} 

ul.audioWrap{ list-style:none; float:left; width:100%;}
ul.audioWrap li{ list-style:none; float:left; padding:0 0 20px 0;width:49%;}
ul.audioWrap p{ font-size:12px; padding:5px 0; margin:0;}

.oneLineAudio ul.audioWrap li{ list-style:none; float:left; padding:0;width:100%; margin-bottom:20px;}


.imgList{float:left;width:100%; margin:1% 0;}
.imgList img{float:left; width:30%; padding:1%; height:auto;}

.imgList4{float:left;width:100%; margin:1% 0;}
.imgList4 img{float:left; width:23%; padding:1%; height:auto;}

img.fullCol{width:100%; height:auto; padding:10px 0; border:none; float:left;}

.nameList{ list-style:none; float:left;width:70%;}
.nameList li{float:left;width:50%; padding:0 0 5px 0; margin:0 0 5px 0; list-style:none; border-bottom:1px solid #ddd;}










ol.gamelist{ list-style:decimal !important;}
ol.gamelist li{ padding:5px; margin-left:10px; list-style:decimal !important;}

.proPhoto{float:left; width:40%; padding-right:5%;}
.proPhoto img{width:100%;}

.profile{float:left;width:55%;}
.profile *{font-size:15px; line-height:150%; color:#666;}
.profile strong{color:#85317d; display:block; padding-bottom:10px; border-bottom:1px solid #ddd; margin-bottom:10px;}
.profile li{ list-style:disc; padding:5px 0; margin-left:20px;}
.profile dl{ float:left;width:100%; margin-bottom:20px;}
.profile dl dt{float:left;width:15%;}
.profile dl dd{float:left;width:85%;}


.performerBox{float:left;width:40%; padding-right:5%;}
h5{float:left; width:100%;}
h5.sponsor{color:#666; border-top:1px solid #906; margin-top:30px; float:left;width:100%; padding-top:20px; font-size:12px;}

h5.date{color:#666; font-size:12px; padding:0 0 30px;}


ul.blogList{float:left; width:100%; padding:0; margin:0; list-style:none;}
ul.blogList li{float:left; width:49%; padding:0 1% 0 0; margin:10px 0; list-style:none;}

ul.blogList li img{float:left;width:16%; height:auto; margin-right:3%;  border-radius: 50%; border:1% solid #F1E6F7;}
ul.blogList li p{float:left; width:80%; font-size:14px;}
ul.blogList li p a{float:left; list-style:disc; width:100%; padding-top:5px; border-top:1px solid #eee; color:#333; text-decoration:none;}
ul.blogList li p a:hover{ color:#900; text-decoration:underline;}
ul.blogList li p strong{float:left; width:100%; padding-bottom:5px; color:#900; font-size:12px; color:#633232;}


/*game*/
div.error{float:left;width:100%;}
div.error p{ font-size:15px; line-height:200%; color:#900!important;}
ol.rules{padding-left:20px; float:left;}
ol.rules li{ list-style:decimal; padding-left:20px; padding-bottom:10px; font-size:12px; float:left; clear:both;}

.gameField label{padding-right:20px;}
blockquote#game ul{width:100%; float:left; padding:0; margin:0;}
blockquote#game ul li{width:18%; padding:1% 2% 1% 0; float:left; font-size:12px; line-height:150%; margin:0;height:288px; overflow:hidden;}

blockquote#game ul li div img{float:left;width:100%; height:auto; margin-bottom:10px;}

/*sponsor*/
.sponsorBox{float:left;width:90%;padding:0 5%;}
.sponsorBox a{float:left; position:relative; text-align:center;}
.sponsorBox a p{font-size:12px; line-height:150%; display:inline; color:#333; text-decoration:none; position:absolute; width:100%; background:#fff; z-index:10; padding:0; text-align:center; left:0;}
.co3 a{float:left; width:30%; margin-bottom:15px;}
.co3 img{width:auto; height:auto; max-width:162px;}
.co5 a{float:left;padding:0 13px;}
.co5 img{width:auto; height:auto; max-width:176px;}
.co6 a{float:left; width:16.6666%; margin-bottom:15px;}
.co6 img{width:auto; height:auto; max-width:160px;}

.co5 p{height:30px; }
.co6 p{height:25px;}



.conMediaList{ list-style:none; float:left;width:100%}
.conMediaList li{float:left;width:30%; margin:1.5%; background:#fff;}
.conMediaList li div.conPhoto{width:96%;float:left; padding:10px 2% 5px;}
.conMediaList li div.conPhoto img{width:15%; height:auto; border-radius:100%;}
.conMediaList li div.conPhoto p{width:80%; height:auto; float:right; font-size:14px;}
.conMediaList li p.conCaption{float:left;width:96%;font-weight:normal; font-size:12px; padding:0 2%;}
.conMediaList li div.conMedia{float:left;width:100%;}
.conMediaList li div.conMedia img{width:100%; height:auto;}

.conMediaList li:nth-child(3n+1){clear:left;}


.pagination{width:100%; text-align:center; display:block; float:left; margin-bottom:20px;}
.pagination li{ width:auto; display:inline; margin:0 10px; }
.pagination li a{color:#000; text-decoration:none; background:#ddd;padding:3px 7px; font-size:12px; line-height:12px; border-radius:50%;}
.pagination li a:hover{background:#666; color:#fff}
.pagination li a:visited{color:#fff;}

@media (max-width:1000px) {

#select-menu{ display:block; font-size:15px; line-height:150%; width:98%; margin:1%;}
#topNav{ font-size:24px; display:none;}
.topInfoNew{display:none;}
.contentBox{ margin-top:0;}
.topGroup{float:left; width:100%; display:block; position:inherit;}
nav{float:left;width:100%;}

.mTop{ display:block;width:100%;float:left;}
.mTop img{float:left;width:100%; height:auto;}
.topHeader{ display:none;}

.lang{ position:absolute; right:5px; top:0px;}	

}
/* 寬度小於 768*/
@media (max-width: 768px) {
	
body{ background-image:none; padding-top:30px;}
.lang{width:100%; background:#000;float:left;}
	
.sponsorBox{width:95%; padding:0 2.5%;float:left;}
.sponsorBox a{float:left; padding:15px 0; text-align:left; width:46%!important; padding:0 2%;}
.sponsorBox a p {float: left;width:100%; text-align:left;}
.sponsorBox a img{width:auto; height:auto;}
.co5 p{height:35px; }
.co6 p{height:25px;}


.sideR img{width:100%;}
.infoCon{width:100%; padding:0;}

blockquote#game ul li{width:48%; padding:1% 2% 1% 0; float:left; font-size:12px; line-height:150%; height:auto;}

.topInfo{float:left; width:100%; position:inherit; left:inherit; top:inherit;}
.topInfo p{ text-align:center; line-height:150%;}

ul.imgRow2 li{float:left;width:100%;}
ul.imgRow2 li img{float:left;width:100%; height:auto;}


p.youtube iframe{width:98%; padding:1%;}
p.image2 img{width:98%!important;}
p.image3 img{width:98%!important;}
p.image4 img{width:98%!important;}

}


@media(max-width: 480px) {


	
.indexImg {width:100%;}
.sideR{width:90%; padding:5%;}
.sideR img{width:100%;}

.imgList img{float:left; width:100%; padding:1% 0;}
#index img.box2{width:100%; float:left;}
#index img{width:100%;}

.content{width:97%; padding:0 1.5%;}

.conLink div{float:left;width:48%; padding:1%;}
.infoPhoto{width:100%; text-align:center;}
.infoPhoto img{width:350px; height:525px;}

ul.dishPhoto li{ list-style:none;width:100%; font-size:12px; padding:1% 0;}

.profile{width:100%;}
.proPhoto{width:100%;}

.photoWrap img{wdith:100%; margin:5px 0;}

ul.imgRow9 li{width:30%;}
blockquote#game ul li{width:100%; padding:1% 0; float:left; font-size:12px; line-height:150%;}

ul.audioWrap li{width:100%;}
}

@media(max-width: 320px) {
.infoPhoto img{width:320px; height:480px;}

.photoWrap img{width:100%!important; margin:5px 0;}
}