@charset "utf-8";
/* 比例版 */
html, body{background:#FFF;}
#inbody{position:fixed;height:100%;width:600px;top:0;left:calc(50% - 300px);margin:0 auto;overflow:hidden;}
#inbody.style2{background:#e9550d;}
#topmenu{position:absolute;width:600px;top:0;left:calc(50% - 300px);z-index:99;height:84px;}
#topmenu .centerwrap{height:100%;}
#menubg{position:absolute;z-index:0;height:100%;width:100%;top:0;left:0;background:rgba(0,0,0,0.5);opacity:0;}
#incontent{position:relative;margin-top:90px;z-index:9;height:calc(100% - 170px);overflow-y: auto;}
#footer{position:absolute;left:0;bottom:0;width:100%;z-index:97;background:#1544af;padding:10px 0;text-align:center;text-align:center;}
#footer.type2{background:none;}
.show400{display:none!important;}
.hide400{display:block;}
.cutblock{position:relative;text-align: center;}
.fbbold{font-weight:900;}
.fbold{font-weight:700;}
.fnormal{font-weight:400;}
.fullbg{position:absolute;top:0;left:0;width:100%;height:100%;}
.w100{width:100%;}
.h100{height:100%;}
.w50{width:50%;}
.w40{width:40%;} 
.mw100{max-width:100%;}
.mw40center{max-width:40%;margin:0 auto;}
.mw100center{max-width:100%;margin:0 auto;}
/* z-index  */
.z001{z-index:1;}
.z000{z-index:0;}
/* f color */
.fcolorfff{color:#fff;}
.fcolor875936{color:#875936;}
.fcolor000{color:#000;}
.fcolor666{color:#666;}
.fcolorlink{color:#960f0f;}
.fcolorerr{color:#875936;font-weight:bold;}
.fcolorerr1{color:#875936;font-weight:bold;}
/* BG */
.bg001{z-index:0;position:absolute;top:0;left:0;width:100%;height:100%;}
.bgcolorfff{background:#fff;}
/* ## margin ############## */
.mu05{margin-top:0.5vw;}
.mu1{margin-top:1vw;}
.mu2{margin-top:2vw;}
.mu3{margin-top:3vw;}
.mu4{margin-top:4vw;}
.mb2{margin-bottom:2vw;}
/* padding */
.padv1{padding:10px 0;}
.padv2{padding:20px 0;}

/* 字體 尺寸設定  */
.fsize10{font-size:15px;line-height:21px;}
.fsize12{font-size:18px;line-height:27px;}
.fsize14{font-size:21px;line-height:31px;}
.fsize16{font-size:24px;line-height:36px;}
.fsize18{font-size:27px;line-height:40px;}
.fsize20{font-size:30px;line-height:45px;}
.fsize22{font-size:33px;line-height:50px;}
.fsize24{font-size:36px;line-height:54px;}
.fsize28{font-size:42px;line-height:63px;}
.fsize32{font-size:48px;line-height:72px;}
.fsize36{font-size:54px;line-height:81px;}

/* 正中間物件  */
.h100in{position:absolute;left:0;top:50%;transform: translateY(-50%);z-index:2;}
/* 框架  */
.centerwrap{position:relative;width:90%;margin:0 auto;text-align: left;}

/* frame */
.frame1{border:3px solid #875936;background:#ffffd6;}
.frame1in{margin:15px;padding:25px 20px;border:1px solid #875936;}
.frame1.style2{margin:15px;border-radius: 16px;background:#fff;}
.frame1.style2 .frame1in{border-radius: 12px;padding:15px;}
/* btn */
.btn1{width:60%;}
.btn2{width:50%;}
/* menu */
.logo{height:48px;margin-top:18px;}
.sidemenuicon,i.sidemenuicon{font-size:40px;line-height:84px;color:#fff;float:right;}
.sidemenuicon i{font-size:36px;line-height:84px; margin-right:5px;}
.headmlist{position: absolute;top:0;right:-100%;height:100%;width:100%;background:#e9550d;z-index:98;transition: all 1s;}
.headmlist.on{right:0;}
.headmlistin{position:absolute;min-height:70%;max-height:85%;width:100%;top:50%;transform: translateY(-50%);}
.headmlist .aitem{display:block;padding:7px 0;font-weight:bold;text-align: center;}
.headmlist a.aitem{text-decoration: none;font-weight:bold;}
.headmlist .aitem.on{border-bottom:0.3vw solid #903e84;color:#000;}
.headmlist .aitem:hover{color:#000;}
.menuline{margin:20px 0;border-bottom:1px solid #fff;}
.headmfooter{position: absolute;bottom:0;left:0;width:100%;padding-bottom:10px;}
.headmbimg{}
.headmbimg img{display:inline;width:38%;margin:0 3%;}
.fbicon{width:10%;}
/* list */
.list{position:relative;padding:5px 0;}
.listline{position:relative;margin:10px 0;border-bottom:1px solid #000;}
.listline2{position:relative;margin:10px 0;border-bottom:1px solid #875936;}
.list.style1{padding:5px 0;}
.list.style1 span{display: inline;}
.list.style1 span:first-child{margin-right:10px;}
.list.style2{padding:5px 0;}
.list.style2 span{display:inline-block;float:left;}
.list.style2 span:first-child{width:40%;}
.list.style2 span:nth-child(2){width:60%;}
.list.style4{padding:20px 0;}
.list.style5{padding:25px 0;}
.list.style3{padding:10px 0;}
.list.style3  span{display: inline-block;float:left;}
.list.style3 span:nth-child(3n+1){width:40%;}
.list.style3 span:nth-child(3n+2){width:60%;}
.list.style6{padding:5px 0;}
.list.style6 span{display: inline;float:left;}
.list.style6 span:nth-child(1){width:10%;}
.list.style6 span:nth-child(2){width:20%;}
.list.style6 span:nth-child(2) img{width:100%;}
.list.style6 span:nth-child(3){width:65%;margin-left:5%;}
.list.style7{padding:15px 20px;}
.list.style8{padding:10px 20px;}
.faqwrap .a{display:none;opacity:0;transition: all 0.5s;}
.faqwrap.on .a{display:block;opacity:1;}
/* news */
.newslistwrap{margin:0 20px;padding:15px 0;border-bottom:1px solid #000;}
.newslistwrap.rank{margin:0;}
.newslistwrap.rank .newslistdate img{position:absolute;top:-25px;width:100%;left:50%;transform: translateX(-50%);}
.newslistdate{position:relative;display: inline-block;float:left;margin-right: 10px;border:1px solid #000;padding:5px;}
.newslistdate p{font-weight:bold;}
.newslistwrap.rank .newslistdate{padding:5px 5px;background:#c20000;border-radius: 5px; width:70px;}
.newslistwrap.rankn{margin:0;}
.newslistwrap.rankn span{display:inline-block;float:left;}
.newslistwrap.rankn span:nth-child(1){width:35%;}
.newslistwrap.rankn span:nth-child(2){width:20%;}
.newslistwrap.rankn span:nth-child(3){width:44.9%;}


/* index */
.indextopwrap{position:absolute;left:0;top:0;width:100%;text-align:center;}
.indextimewrap{margin-top:10px;}
.indextime{position:absolute;left:30%;bottom:0;width:48%;text-align:center;font-size:70px;line-height: 105px;font-weight:bold;}
.indexbtnwrap{position:absolute;left:0;bottom:0;width:100%;text-align:center;}
/* profile */
.profileimgwrap{position:relative;}
.profileimgbox{position:relative;width:394px;height:394px;border:3px solid #999;border-radius: 200px;overflow: hidden;margin:20px 70px;z-index:1;}
.profileimgbtn{position:absolute;width:80px;height:80px;border:3px solid #999;right:50px;bottom:20px;z-index:2;border-radius: 43px;overflow: hidden;}
/* 角色選擇 */
.stagewrap{position:relative;}
.stageselectbox{position:relative;width:70%;margin: 0 15%;height:1000px;overflow:hidden;}/* 70%=420 */
.stageselectboxin{position:relative;width:4200px;height:1000px;transition: all 0.6s;}/*容許十個 */
.ssitem{position:relative;width:420px;float:left;height:1000px;}
.stageimg{width:420px;}
.starbox{display:inline-block;;height:36px;}
.stars{height:calc(100% - 10px);margin-top:5px;margin-left:5px;float:left;}
.stagearr{position:absolute;top:300px;width:30px;}
.stagearr.L{left:30px;}
.stagearr.R{right:30px;}
/* 提示香菇 */
.light1{height:36px;float:left;}
.light2{height:54px;float:left;}
/* form */
input[type=text].formtype1,input[type=password].formtype1{font-size: 24px;    line-height: 48px;    border: 1px solid #cccccc;    color:#444;height: 48px;    background: #fff;    margin:0 auto;		padding:0 8px; width:calc(100% - 18px);}
select.formtype1{font-size: 24px;    line-height: 48px;    border: 1px solid #cccccc;    color:#444;height: 48px;    background: #fff;    margin:0 auto;		padding:0 8px; width:calc(100% - 18px);}
/* pop */
#pop{position:fixed;top:0;left:50%;transform: translateX(-50%);;width:600px;max-width:100%;height:100%;z-index:999998;background:rgba(0,0,0,0.7);}
#pop.style2{background:#e9550d;}
#popin{position:absolute;top:50%;margin-left:5%;transform:translateY(-50%);z-index:1;padding:0;width:90%;background:rgba(255,255,255,1);border-radius: 10px;max-height:80%;overflow-y: auto;}
#pop.style2 #popin{width:100%;background:none;}
#popincontent{margin:15px;border:1px solid #875936;padding:20px;border-radius: 8px;}
.popclosebtn{position:absolute;top:10px;right:5%;height:40px;width:90%;text-align:right;z-index:99; font-size:30px;line-height:44px;}
.popclosebtn i{font-size:34px;line-height:44px;color:#fff;}
.popbtn{display: inline-block;text-decoration:none; width:30%;margin:10px 3%;font-size:16px;line-height:32px;color:#000;text-align:center;border-radius: 10px; border:1px solid #000;}
.poptimewrap{position:relative;margin:20px 0;}
.poptime{position:absolute;left:25%;bottom:0;width:50%;text-align:center;font-size:70px;line-height: 105px;font-weight:bold;}


/*  切換在 980   */
@media screen and (max-width: 600px) {
  #inbody{position:fixed;height:100%;width:100%;top:0;left:0;margin:0;}
  #incontent{margin-top:15vw;height:calc(100% - 24vw);}
  #topmenu{height:14vw;width:100%;left:0;}
  i.sidemenuicon{font-size:8vw;line-height:14vw;}
  .logo{height:8vw;margin-top:3vw;}
  .show400{display:block!important;}
  .hide400{display:none!important;}
  .fsize10{font-size:2.5vw;line-height:3.7vw;}
  .fsize12{font-size:3vw;line-height:4.5vw;}
  .fsize14{font-size:3.5vw;line-height:5.2vw;}
  .fsize16{font-size:4vw;line-height:6vw;}
  .fsize18{font-size:4.5vw;line-height:6.8vw;}
  .fsize20{font-size:5vw;line-height:7.5vw;}
  .fsize22{font-size:5.5vw;line-height:8.25vw;}
  .fsize24{font-size:6vw;line-height:9vw;}
  .fsize28{font-size:7vw;line-height:10.5vw;}
  .fsize32{font-size:8vw;line-height:12vw;}
  .fsize36{font-size:9vw;line-height:13.5vw;}
  /* 一般內容 */
  /* index */
  .indextime{font-size:11.5vw;line-height: 17vw;}
  .poptimewrap{margin:5vw 0;}
  .poptime{font-size:11.5vw;line-height: 17vw;}
  /* profile */
  .profileimgbox{width:calc(40vw - 6px);height:calc(40vw - 6px);border:3px solid #999;border-radius:20vw;overflow: hidden;margin:5vw 24vw;}
  .profileimgbtn{position:absolute;width:12vw;height:12vw;border:3px solid #999;right:20vw;bottom:4vw;z-index:2;border-radius: calc(6vw + 3px);}
  /* 角色選擇 */
  .stageselectbox{height:166vw;}/* 70%=420 */
  .stageselectboxin{height:166vw;}/*容許十個 */
  .ssitem{width:70vw;height:166vw;}
  .stageimg{width:70vw;}
  .starbox{display:inline-block;;height:6vw;}
  .stars{height:3vw;margin-top:1.5vw;margin-left:1vw;float:left;}
  .stagearr{position:absolute;top:45vw;width:6vw;}
  .stagearr.L{left:5vw;}
  .stagearr.R{right:5vw;}
  /* 提示香菇 */
  .light1{height:6.8vw;}
  input[type=text].formtype1,input[type=password].formtype1{font-size: 4vw;    line-height: 8vw;   height: 8vw;   padding:0 1vw; width:calc(100% - 3vw);}
  select.formtype1{font-size: 4vw;    line-height: 8vw;    height: 8vw;    padding:0 1vw; width:calc(100% - 3vw);}
  .newslistwrap.rank .newslistdate{padding:1vw 1vw;background:#c20000;border-radius: 5px; width:12vw;}
  .newslistwrap.rank .newslistdate img{top:-5vw;}
  #footer{padding:2vw 0;}
  .newslistwrap.rankn{padding:3vw 0;}
  .newslistwrap.rankn span{line-height: 6.8vw;}
}