﻿@charset "utf-8";
/* CSS Document */
.headbx{
	position:relative;
	width:100%;
	padding-bottom:50.4%;/*1008*/
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-image: url(../images/index.jpg);
	background-size:100% auto;
	overflow:hidden;
	}
.logo{
	position:absolute;
	width:17.3%;/*346*/
	padding-bottom:7.8%;/*156*/
	display:block;
	cursor:pointer;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-image: url(../images/logo.png);
	background-size:100% auto;
	top:0;
	left:0;
	z-index:1;
	}
.mlogo{
	position:relative;
	width:100%;	
	padding-bottom:49.35897435897436%;/*385*/
	display:none;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image: url(../images/mlogo.png);
	background-size:90% auto;
	}
.lantern_l,.lantern_r{
	position:absolute;
	pointer-events:none;
	display:block;
	}
.lantern_l > div,.lantern_r > div,
.lantern_l > div::before,.lantern_r > div::before{
	position:relative;
	width:100%;
	display:block;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-size:100% auto;
	}
.lantern_l > div::before,.lantern_r > div::before{content:'';}
.lantern_l > div{background-image: url(../images/lantern_l.png);}
.lantern_l > div::before{
	padding-bottom:152.91%;/*578*/
	background-image: url(../images/lantern_l_1.png);
	/**/
	-moz-animation:fin2 2.5s linear infinite;
	-webkit-animation:fin2 2.5s linear infinite;
	-o-animation:fin2 2.5s linear infinite;
	-ms-animation:fin2 2.5s linear infinite;
	animation:fin2 2.5s linear infinite;
	}
.lantern_r > div{background-image: url(../images/lantern_r.png);}
.lantern_r > div::before{
	padding-bottom:204.4334975369458%;/*830*/
	background-image: url(../images/lantern_r_1.png);
	/**/
	-moz-animation:fin2 2.2s linear infinite;
	-webkit-animation:fin2 2.2s linear infinite;
	-o-animation:fin2 2.2s linear infinite;
	-ms-animation:fin2 2.2s linear infinite;
	animation:fin2 2.2s linear infinite;
	}
.lantern_l{
	width:18.9%;/*378*/
	left:9.45%;/*189*/
	top:-5%;
	/**/
	-webkit-animation:ma1 4s linear infinite;
	-o-animation:ma1 4s linear  infinite;
	animation:ma1 4s linear  infinite;
	}
.lantern_r{
	width:20.3%;/*406*/
	right:6.3%;/*126*/
	top:-11.5%;
	/**/
	-webkit-animation:ma2 3.8s linear infinite;
	-o-animation:ma 3.8s linear infinite;
	animation:ma2 3.8s linear infinite;
	}
.allbg{
	position: relative;
	width: 100%;
	display:block;
	background-attachment:scroll;
	background-repeat:repeat-y;
	background-position:50% 0%;
	background-image:url(../images/cbxhbg.png);
	background-size:100% auto;
	}
.allbg::after{
	position: relative;
	width: 100%;
	content:'';
	display:block;
	}
.cbxh{
	position:absolute;
	width:100%;
	padding-bottom:25.65%;/*513 25.65*/
	display:block;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-image: url(../images/cbxh.png);
	background-size:100% auto;
	bottom: 0;
	left: 0;
	}
.cbxh::before{
	position:absolute;
	width: 100%;
	height: 100%;
	content:'';
	display:block;
	pointer-events: none;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-image: url(../images/cbxh_1.png);
	background-size:100% auto;
	top: 0;
	left: 0;
	z-index: 4;
	}
.money{
	position:absolute;
	width: 100%;
	padding-bottom:8.4%;/*168*/
	display:block;
	pointer-events:none;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-image: url(../images/cbxh_2.png);
	background-size:100% auto;
	bottom:0;
	left: 0;
	z-index: 2;
	}
.gobtbx,.allbg.on .gobtbx{
	position:relative;
	width:100%;
	display: none;
	padding-bottom:50%;
	}
.fireworks,.fireworks2,.fireworks3,.fireworks4{
	position:absolute;
	display:block;
	pointer-events:none;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;	
	background-size:100% auto;
	z-index:1;
	}
.fireworks,.fireworks2{
	width:10.3%;/*206*/
	padding-bottom:10.3%;
	}
.fireworks{
	background-image: url(../images/fireworks0.png);
	background-size:100% auto;
	top:7.3vw;/*146 14.3%*/
	left:7.5%;/*150*/
	}
.fireworks2{
	background-image: url(../images/fireworks1.png);
	top:56%;
	left:85.5%;
	}
.fireworks3{
	width:8.5%;
	padding-bottom:8.5%;
	background-image: url(../images/fireworks2.png);
	background-size:100% auto;
	top:62%;
	left:8%;
	}
.fireworks4{
	width:7.5%;
	padding-bottom:7.5%;
	background-image: url(../images/fireworks3.png);
	background-size:100% auto;
	top:.8%;
	left:63%;
	}
/**/
.mubx{
	position:absolute;
	width:100%;
	display:block;
	left:0;
	top:22vw;
	z-index:4;
	}
.mbg{
	/*position:relative;*/
	width:100%;
	display:block;
	}

.adbx{
	position: relative;
	width:7.5%;/*150*/
	margin:1.68vw 0 0 72.65%;
	overflow: hidden;
	-webkit-filter: drop-shadow(0 15px 85px rgba(29, 6, 2, 1));
	filter: drop-shadow(0 15px 85px rgba(29, 6, 2, 1));
  	transition: all .5s;
	}
.adbx a{
	position: relative;
	width:50%;/*75*/
	padding-bottom:46.66666666666667%;/*70*/
	display:block;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;	
	background-size:100% auto;
	}
.adbx a::before{
	position: absolute;
	width:100%;
	height:100%;
	display:block;
	content:"";
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;	
	background-size:100% auto;
	opacity: 0;
	transition: all .5s;
	}
.adbx a:hover::before{opacity:1;}
.adbx a.acc{
	float: left;
	background-image: url(../images/acc_dwn_01.png);
	}
.adbx a.acc::before{
	background-image: url(../images/acc_dwn_01a.png);
	}
.adbx a.dwn{
	float:right;
	background-image: url(../images/acc_dwn_02.png);
	}
.adbx a.dwn::before{
	background-image: url(../images/acc_dwn_02a.png);
	}
#reset_password2{ display:none;}
.fbbx{
	position: absolute;
	display: block;
	text-align:right;
	top:-21.33vw;
	right: 1.1%;
	z-index:1;
	}
.fbbx a{
	position: relative;
	width:2.5vw;/*50*/
	padding-bottom:2.5vw;
	display:inline-block;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;	
	background-size:100% auto;
	margin: 0 5px;
	}
.fbbx a.fb1{background-image: url(../images/f_bt.png);}
.fbbx a.fb2{background-image: url(../images/f_bt2.png);}

.r_mubx{
	position:fixed;
	width:2px;/*2*/
	height:63.5vh;
	display:block;
	background-attachment:scroll;
	background-repeat:repeat-y;
	background-position:0% 0%;	
	background-image: url(../images/rms.jpg);
	background-size:100% 100%;
	top:0;
	right:3.5%;/*65*/
	-webkit-filter: drop-shadow(0 0 25px rgba(29, 6, 2, .8));
	filter: drop-shadow(0 0 25px rgba(29, 6, 2, .8));
	z-index:1;
	}
.r_mb2{
	position:absolute;
	width:6vw;/*120*/
	height:12.9vw;/*258*/
	display:block;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;	
	background-image: url(../images/r_mubg.png);
	background-size:100% auto;
	left:50%;
	top:90%;
	transform: translateX(-50%);
	}
.r_mb2::before{
	position:relative;
	width:100%;
	padding-bottom:33.5%;/*39 32.5*/
	display:block;
	content:"";

	}
.r_mb2 a{
	position:relative;
	width:100%;
	padding-bottom:28.33%;/*34*/
	display:block;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;	
	background-size:100% auto;
	opacity:.8;
	transition: all .5s;
	}
.r_mb2 a:hover{opacity:1;}
.r_mb2 a#new_hero{background-image: url(../images/r_mu1.png);}
.r_mb2 a#hero_return{background-image: url(../images/r_mu2.png);}
.r_mb2 a#reset_password{background-image: url(../images/r_mu_04.png);}
.topbt{
	position: relative;
	width:100%;
	padding-bottom:35%;/*42*/
	display:block;
	cursor:pointer;
	}
.topbx2{
	position: absolute;
	height: 100%;
	display: none;
	right:1%;
	top:0;
	z-index: 2;
	}
.topbt2{
	position: sticky;
    width:55px;
    height:40px;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 100%;	
	background-image: url(../images/top2.png);
	background-size:100% auto;
    top:50%;
	right:0;
	display:block;
	cursor:pointer;
	}

/**/
.mubx2{
	position:absolute;
	width: 100%;
	display: block;
	text-align:center;
	top:14.5vw;
	left: 0;
	}
.mubx2 li{
	position: relative;
	width:6.2%;/*124*/
	height:13vw;/*260*/
	display:inline-block;
	margin: 0 0.25%;
	}

	
.mubx2 li a{
	position:absolute;
	width:100%;
	height:100%; 
	display:block;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;	
	background-size:100% auto;
	top:0;
	left:0;
	z-index:1;
	transition: all .5s;
	}
.mubx2 li:hover a ,.mubx2 li.on a{
	height:107%;
	top:-15%;
	}
	
.mubx2 li::before{
	position:absolute;
	width: 140%;/*174*/
	padding-bottom:253.448%;/*315*/
	display:block;
	content:"";
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-image: url(../images/shadow.png);
	background-size:100% auto;
	left:50%;
	top:-6%;
	transform: translateX(-50%);
	transition: all .5s;
	}
.mubx2 li a::before{
	position:absolute;
	width:85%;
	padding-bottom:85%;
	display:block;
	content:"";
	background-image: url(../images/circle.png);
	background-size:auto 100%;
	top:2.6%;
	left: 5.2%;
	/*
	mix-blend-mode:multiply;*/
	}
.mubx2 li.on a::before{
		-webkit-animation: py .25s steps(4) forwards;
		animation: py .25s steps(4) forwards;
	}
.mubx2 li a::after{
	position:absolute;
	width: 100%;
	padding-bottom:14.51612903225806%;/*18*/
	display:block;
	content:"";
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 100%;
	background-image: url(../images/mb.png);
	background-size:100% auto;
	left: 0;
	bottom:0;
	}
.mu1{background-image: url(../images/mu1.png);}
.mu2{background-image: url(../images/mu2.png);}
.mu3{background-image: url(../images/mu3.png);}
.mu4{background-image: url(../images/mu4.png);}
.mu5{background-image: url(../images/mu5.png);}
.mu6{background-image: url(../images/mu6.png);}
.mu7{background-image: url(../images/mu7.png);}
.mu8{background-image: url(../images/mu8.png);}
.mu9{background-image: url(../images/mu9.png);}
.mu10{background-image: url(../images/mu10.png);}

/* 三明治 */
.menut{
	position:fixed;
 	width:55px;
 	height:55px;
	display:none;
	z-index:5;
	top:0;
	right:0;
	}
.menut::before{
	position:absolute;
	width:85%;
	height:85%;
	display:block;
	content:"";
	border-radius:99px;
	background-image: url(../images/mbg.jpg);
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	opacity:0;
	transition: all .5s;
	}
.menut.on::before{opacity:1;}

.mubx.on .menut.on::before{opacity:0;}	
	
.menu-trigger{
	position:absolute;
 	width:100%;
 	height:100%;
 	cursor:pointer;
 	flex-direction:column;
 	display:flex;
 	align-items:center;
 	justify-content:center;
	top:0;
	left:0;
 	} 
.menu-trigger>.line{
	width:50%;
 	height:3px;
 	border-radius:5px;
 	background-color:#f7e3be; 
 	transition: all .3s;
 	-moz-transition: all .3s;
 	-webkit-transition: all .3s;
 	-o-transition: all .3s;
 	}
.menu-trigger>.line:first-child{margin-bottom:8.77%;}
.menu-trigger>.line:last-child{margin-top:8.77%;}
.mubx.on .menu-trigger >.line{opacity:0;transform:rotate(45deg)}
.mubx.on .menu-trigger >.line:first-child{
 	opacity:1;
 	margin-bottom:-3.5%;
 	transform:rotate(-45deg);
 	}
.mubx.on .menu-trigger >.line:last-child{opacity:1;margin-top:-7.01%;}

/**/
.cnbx{
	position:relative;
	width: 100%;
	display:none;
	margin:0 auto;
	}
.allbg.on .cnbx{display: block;}

.cnbx::after,.cnbx::before{
	width: 100%;
	display:block;
	content:"";
	}
.cnbx::before{
	position:relative;
	padding-bottom:1.2%;
	}
.cnbx::after{
	position: absolute;
	padding-bottom:12.75%;/*255*/
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 100%;
	background-image: url(../images/cbxh_3.png);
	background-size:100% auto;
	left: 0;
	bottom:-2.8vw;
	z-index:2;
	}
.dwbx{
	position:relative;
	width: 100%;
	padding-bottom:8.5%;
	display:block;
	}
.cobx2{
	position:relative;
	width:1500px;
	margin:0 auto;
	z-index:3;
	}
.cobx2 .tit{
	position:absolute;
	width:39%;/*586*/
	padding-bottom:6.255972696245734%;/*94*/
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-image: url(../images/tit.png);
	background-size:100% auto;
	top:6px;/**/
	left:50%;
	transform: translateX(-50%);
	transition: all .5s;
	}
.cobx2 .con{
	position:relative;
	width: 100%;
	min-height:100px;/**/
	background-attachment:scroll;
	background-repeat:repeat-y;
	background-position:50% 50%;
	background-image: url(../images/cnbx_02.png);
	background-size:100% auto;
	}
.cobx2::after,.cobx2::before{
	position:relative;
	width: 100%;
	display:block;
	content:"";
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-size:100% auto;
	}
.cobx2::before{
	padding-bottom:12.13333333333333%;/*182*/
	background-position:50% 100%;
	background-image: url(../images/cnbx_01.png);
	}
.cobx2::after{
	padding-bottom:11%;/*165*/
	background-position:50% 0%;
	background-image: url(../images/cnbx_03.png);
	}
.clos{
	position: absolute;
	width:6.1%;/*6.6*/
	display:block;
	cursor: pointer;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-image: url(../images/clos.png);
	background-size:100% auto;
	top:-2px;
	right:10.5%;
	z-index: 3;
	}
.clos::before{
	position:relative;
	width:100%;
	padding-bottom:130%;/*130*/
	display:block;
	content:"";
	}
#content{
	position:relative;
	width:85%;
	margin:0 auto;
	}
.gb{
	position: absolute;
	width: 50px;
	height: 50px;
	display: block;
	pointer-events: none;
	z-index:1;
	left: 0;
	bottom:13.5vw;
	}

@media only screen and (max-width:1500px){
/**/
.cobx2{width:100%;}
.cobx2 .tit{top:0.4vw;/*6*/}	
	
}
@media only screen and (max-width:1400px){
/**/

}
@media only screen and (max-width:1000px){	
/**/

}
@media only screen and (max-width:900px){
/**/

}
@media only screen and (max-width:780px){
/**/
.headbx{
	padding-bottom:155.1538461538462%;/*1140 146.1538461538462*/
	background-image: url(../images/index_m.jpg);
	}
.logo{
	width:44.358%;/*346*/
	padding-bottom:19.99956%;/*156*/
	top:-.5%;
	left:-3.2%;
	}
.mlogo{display:block;}
	
	
.lantern_l > div{background-image: url(../images/lantern_l_m.png);}
.lantern_l > div::before{
	padding-bottom:166.6666666666667%;/*620*/
	background-image: url(../images/lantern_l_m_1.png);
	}
.lantern_r > div{background-image: url(../images/lantern_r_m.png);}
.lantern_r > div::before{
	padding-bottom:237.9204892966361%;/*778*/
	background-image: url(../images/lantern_r_m_1.png);
	}
.lantern_l{
	width:47.69230769230769%;/*372*/
	left:-13%;
	top:0%;
	}
.lantern_r{
	width:41.92307692307692%;/*327*/
	right:-17%;
	top:0%;
	}
.allbg{background-image:url(../images/cbxhbg_m.png);}
.allbg::after{padding-bottom:15%;}/*20*/
.cbxh{
	padding-bottom:61.48717948717949%;/*425 54.48717948717949*/
	background-image: url(../images/cbxh_m_1.png);
	}
.cbxh::before{
	background-image: url(../images/cbxh_m_1a.png);}
.money{
	padding-bottom:32%;/*350 44.87179487179487*/
	background-image: url(../images/cbxh_2_m.png);
	}
	
.gobtbx{
	display:block;
	padding-bottom:13%;
	z-index: 2;
	}
.allbg.on .gobtbx{display:none;}
.gobtbx a{
	position: absolute;
	width:34.61538461538462%;/*270*/
	padding-bottom:34.61538461538462%;
	display:block;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image: url(../images/gobt_1.png);
	background-size:100% auto;
	top: -1.9vw;
	left: 50%;
	transform: translate(-50%,-50%);
	}
.gobtbx a::before{
	position: absolute;
	width:100%;
	height:100%;
	content:'';
	display:block;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image: url(../images/gobt_2.png);
	background-size:100% auto;
	opacity: .5;
	top: 0;
	left: 0;
	animation: rotate 10s linear infinite;
	
	}
.fireworks{
	width:17%;
	padding-bottom:17%;
	top:auto;
	bottom: -3vw;
	left:81.5%;
	z-index:2;
	}
.fireworks2{
	width:22%;
	padding-bottom:22%;
	top:62.5%;
	left:90.5%;
	}
.fireworks3{
	width:22%;
	padding-bottom:22%;
	top:62.5%;
	left:-13%;
	}
.fireworks4{
	width:20.5%;
	padding-bottom:20.5%;
	top:1.8%;
	left:63%;
	}
/**/
.mubx{
	position:fixed;
	width:100%;
	display:block;
  	top: 0;
	}
.mbg{
	position:relative;
	width:100%;
	height:100vh;
	display:none;
	background-attachment:scroll;
	background-repeat:repeat-y;
	background-position:50% 50%;
	background-image: url(../images/mbg.jpg);
	background-size:100% auto;
	overflow:auto;
	}
.mbg::after{
	position:relative;
	width:100%;
	padding-bottom:10%;
	content:'';
	display: block;
	}
	
.mubx.on .mbg{display:block;}
.adbx{
	width:90%;
	margin:0 auto 25px;/*15*/
	text-align: center;
	overflow: hidden;
	-webkit-filter: drop-shadow(0 0 0 rgba(29, 6, 2, 0));
	filter: drop-shadow(0 0 0 rgba(29, 6, 2, 0));
	}
.adbx::before{
	position:absolute;
	width:1px;
	height:50%;
    content:'';
    background-color:#f0d49d;
    left:50%;
    top:25%;
	transform: translateX(-50%);
    opacity:.5;
	}
.adbx a{
	position:relative;
	width:50%;
	padding-bottom:0;
	display:inline-block;
	text-align:center;
	margin:0 -2px;
	/**/
	font-size:5.76923vw;/*45*/
	line-height:10.25641vw;/*80*/
	color: #f0d49d;
	}
.adbx a::before{
	position:relative;
	width:100%;
	height:auto;
	opacity:1;
	}
#download{display:none;}
#reset_password2{display:inline-block;}
.adbx a.acc{
	float:none;
	background-image:none;
	}
.adbx a.acc::before{content:"帳號申請";background-image:none;}
.adbx a.dwn{
	float:none;
	background-image:none;
	}
.adbx a#reset_password2::before{content:"找回密碼";background-image:none;}	
	
.fbbx{
	position:relative;
	text-align:center;
	top:0;
	right:0;
	margin:25px auto 0;/*15*/
	}
.fbbx a{
	position: relative;
	width:80px;
	padding-bottom:80px;
	margin: 0 3.5%;
	}
.r_mubx{
	position:relative;
	width:100%;
	height:auto;
	background-image:none;
	right:0;
	-webkit-filter: drop-shadow(0 0 0 rgba(29, 6, 2, 0));
	filter: drop-shadow(0 0 0 rgba(29, 6, 2, 0));
	}
.r_mb2{
	position:relative;
	width:85%;
	height:auto;
	background-image:none;
	text-align:center;
	left:0;
	top:0;
	transform: translateX(0);
	margin:0 auto;
	}
.r_mb2::before{
	padding-bottom:11px;
	margin:8px auto;
	content:"";
	background-attachment:scroll;
	background-repeat:no-repeat,no-repeat,repeat-x;
	background-position:0% 50%,100% 50%,50% 50%;
	background-image:url(../images/ms_2a.png),url(../images/ms_2a.png),url(../images/ms_2.png);
	background-size:auto 11px, auto 11px, auto 2px; 
	}
.r_mb2 a{
	position:relative;
	width:100%;
	padding-bottom:0;
	display:block;
	opacity:1;
	}
.r_mb2 a::before{
	position:relative;
	display:block;
	}
	
.r_mb2 a#new_hero::before{content:'英雄崛起';}
.r_mb2 a#hero_return::before{content:'英雄回歸';}
.r_mb2 a:hover{opacity:1;}
.r_mb2 a#new_hero{
	background-position:50% 100%;
	background-image: url(../images/ms_1.png);
	background-size:100% 2px;
	}
.r_mb2 a#hero_return{background-image:none;}
.r_mb2 a#reset_password{background-image:none; display:block;}
.topbt{display:none;}
.topbx2{display:block;}
	
	
.mbk{
	position: relative;
	width:85%;
	margin:0 auto;
	padding: 15px 0;
	background-attachment:scroll;
	background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,repeat-x,repeat-y,repeat-x,repeat-y;
	background-position:0% 0%,100% 0%,100% 100%,0% 100%,50% 0%,100% 50%,50% 100%,0% 50%;
	background-image:url(../images/mb2_1.png),url(../images/mb2_2.png),url(../images/mb2_3.png),url(../images/mb2_4.png),url(../images/mb2_5.png),url(../images/mb2_6.png),url(../images/mb2_5.png),url(../images/mb2_6.png);
	/**/
	font-size:5vw;
	line-height:11.5vw;
	color: #c5a86e;
	}
.mbk a{
	font-size:5vw;
	line-height:12.5vw;
	color: #c5a86e;
	}
.mubx2{
	position: relative;
	width:85%;
	top: 0;
	left: 0;
	margin:0 auto;
	}
.mubx2 li{
	position: relative;
	width:100%;
	height:auto;
	display:block;
	margin:0;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 100%;
	background-image: url(../images/ms_1.png);
	background-size:100% 2px;
	}
.mubx2 li:last-child{background-image: none;}
	
.mubx2 li a{
	position:relative;
	width:100%;
	height:auto;
	text-align:center;
	}
.mubx2 li.on a::before {
  	width: 13%;
  	padding-bottom: 13%;
  	background-image: url(../images/circle.png);
  	top: 11.4%;
  	left: 14.2%;
	}
	
.mubx2 li.on a{color:#fa0;}
.mubx2 li:hover a,.mubx2 li.on a{
	height:auto;
	top:0;
	}
.mubx2 li::before{display:none;}
.mubx2 li a::after{
	position:relative;
	width:100%;
	padding-bottom:0;
	display: block;
	background-image:none;
	background-size:100% auto;
	}
.mubx2 li .mu1::after{content:"登入即送 • 有鉗花";}
.mu1{background-image:none;}
.mubx2 li .mu2::after{content:'福幣盈財 • 珍寶坊';}	
.mu2{background-image:none;}
.mubx2 li .mu3::after{content:'蛇序呈祥 • 兌好禮';}
.mu3{background-image:none;}
.mubx2 li .mu4::after{content:'瑞氣盈門 • 轉新機';}
.mu4{background-image:none;}
.mubx2 li .mu5::after{content:'福至春歸 • 辭舊歲';}
.mu5{background-image:none;}
.mubx2 li .mu6::after{content:'盛世豐年 • 迎財神';}
.mu6{background-image:none;}
.mubx2 li .mu7::after{content:'瑞象芳華 • 展宏圖';}
.mu7{background-image:none;}
.mubx2 li .mu8::after{content:'福韻春風 • 慶元宵';}
.mu8{background-image:none;}
.mubx2 li .mu9::after{content:'財福商城 • 購喜慶';}
.mu9{background-image:none;}
.mubx2 li .mu10::after{content:'新春迎福 • 馬上來';}
.mu10{background-image:none;}
	
/* 三明治 */
.menut{display:block;}
/**/
.cnbx::after{ display:none;}
.cobx2{top:-8vw;}
.cobx2 .tit{
	width:65.1%;/*586*/
	padding-bottom:10.44266211604096%;/*94*/
	top:0.6666666666666667vw;/*6*/
	}	
.cobx2 .con{background-image: url(../images/cnbx_m_02.png);}
.cobx2::before{
	padding-bottom:20.22222222222222%;/*182*/
	background-image: url(../images/cnbx_m_01.png);
	}
.cobx2:after{
	padding-bottom:18.33333333333333%;/*165*/
	background-image: url(../images/cnbx_m_03.png);
	}
.clos{
	width:11%;/*6.6*/
	background-image: url(../images/clos_m.png);
	top:-12.6vw;
	right:auto;
	left:50%;
	transform:translateX(-50%);
	}
.clos::before{
	width:100%;
	padding-bottom:100%;
	}
#content{width:88%;}
.gb{bottom:21vw;}	
}
@media only screen and (max-width:685px){ 
/**/

}
@media only screen and (max-width:580px){
/**/	
		
}
@media only screen and (max-width:560px){
/**/
.adbx{margin:0 auto 4.46vw;/*25*/}
.fbbx{margin:4.46vw auto 0;/*25*/}
.r_mb2::before{
	padding-bottom:9px;
	margin:6px auto;
	background-size:auto 9px, auto 9px, auto 2px; 
	}	
.fbbx a{
	width:60px;
	padding-bottom:60px;
	}
/**/
.cobx2 .tit{
	width:76%;/*586 73.25*/
	padding-bottom:12.19112627986348%;/*94 11.75*/
	top:0.65vw;/*6 1.071428571428571*/
	}	
.cobx2 .con{background-image: url(../images/cnbx_m2_02.png);}
.cobx2::before{
	padding-bottom:22.75%;/*182*/
	background-image: url(../images/cnbx_m2_01.png);
	}
.cobx2::after{
	padding-bottom:20.625%;/*165*/
	background-image: url(../images/cnbx_m2_03.png);
	}
	
}
@media only screen and (max-width:470px){
/**/
.topbt2{
    width:40px;
    height:29px;
	}	
}
@media only screen and (max-width:380px){
/**/

}
@media only screen and (max-width:360px){
/**/
}
@media only screen and (max-width:340px){
/**/
	
}
/**/
@keyframes fin2 {
   0% {opacity:.6;}
   30% {opacity:1;}
   60% {opacity:1;}
   100% {opacity:.6;}
	}
@keyframes ma1{
	0% {
  	transform:rotate(2.2deg);
  	transform-origin: 50% 0%;
	}
	50% {
  	transform:rotate(-1.3deg);
  	transform-origin:50% 0%;
	}
	100% {
  	transform:rotate(2.2deg);
  	transform-origin:50% 0%;
	}
}
@keyframes ma2{
	0% {
  	transform: rotate(-2deg);
  	transform-origin: 50% 0;
	}
	50% {
  	transform: rotate(1.6deg);
  	transform-origin: 50% 0;
	}
	100% {
  	transform: rotate(-2deg);
  	transform-origin: 50% 0;
	}
}
/**/
@-webkit-keyframes py {
   from { background-position: 0%; }
     to { background-position: -400%; }
}

@keyframes py {
   from { background-position: 0%; }
     to { background-position: -400%; }
}
/**/
@-webkit-keyframes py2 {
   from { background-position: 0%; }
     to { background-position: -500%; }
}

@keyframes py2 {
   from { background-position: 0%; }
     to { background-position: -500%; }
}