@charset "utf-8";

/* ----- searchZone ----- */
.searchZone {
	float:right;
}
.searchZone .lookBtn {
	position:absolute;
	top:0;
	right:66px;
	width:66px;
	height:66px;
	z-index:2;
	background:#fff;
}
.searchZone .lookBtn a {
	display:block;
	width:66px;
	height:66px
}
.searchZone .lookBtn a img {
	margin-top:18px;
	margin-left:18px;
}
.searchZone .search {
	display:none;
	position:absolute;
	right:132px;
	top:8px;
	width:350px;
	height:50px;
	background:#F2F2F2;
	z-index:50;
	border-radius: 50px;
}
.searchZone .box {
	width:320px;
	height:32px;
	margin:7px 15px;
	background:none;
}
.searchZone .box.active {
	border-bottom: 2px dotted #000;
}
.searchZone .box input {
	border:none;
}
.searchZone .box .search-txt {
	float:left;
	width:270px;
	height:32px;
	color:#000;
	font-family:"微軟正黑體", Helvetica, sans-serif;
	font-size:15px;
	font-size:1.5em;
	line-height:36px;
	margin:0;		
	outline:none;
	background:none;
}
.searchZone .box .search-btn {
	float:right;
	display:block;
	width:36px;
	height:36px;
	background:url(../images/btn-input-search-mobile.png) no-repeat 50% 50%;
	margin:0;		
	text-indent:-9999px;
	cursor:pointer;
}
.searchZone .box .search-btn:hover {
	background:url(../images/btn-input-search-hover-mobile.png) no-repeat 50% 50%;
}
@media screen and (max-width:568px) {
	.searchZone .lookBtn {
		top:51px;
		right:51px;		
		width:51px;
		height:51px;
	    background:#000;		
	}	
	.searchZone .lookBtn a {
		width:51px;
		height:51px
	}
	.searchZone .lookBtn a img {
		margin-top:10px;
		margin-left:11px;
	}
	.searchZone .search {
		top:51px;		
		right:102px;
		width:220px;
		height:51px;
		border-radius: 0;		
	}
	.searchZone .box {
		width:200px;
		height:31px;
		margin:10px;
	}
	.searchZone .box .search-txt {
		width:160px;
		height:31px;
		line-height:31px;
	}	
}


@media screen and (max-width:990px) {

	head{
		font-family: sp;
	}
	
/** header **/
	#header {
		position: relative;
		top:0;
		width:100%;
		z-index:300;
	}
	#header .container {
		width: 100%;
		height: 66px;
		margin: 0 auto;
	}
	.logo {
		float:left;
		margin:8px 0 0 10px;
	}
	.logo img {
		width:auto;
		height:50px;
	}
		
/* ----- addon ----- */
	#header .addon{
		position: relative;
		float: right;
		margin: 18px 130px 0 0;
	}	
	#header .addon ul {
		list-style:none;
		overflow:hidden;
	}
	#header .addon li{
		float: left;
		font-size: 1.6em;
	}
	#header .addon li.userName{ 
		color: #ec3943;
		margin-top: 8px; 
	}	
	#header .addon li.sla, #header .addon li.btn2 a, #header .addon li.btn2 a, #header .addon li.btn3 a {
		display:none;
	}
	#header .addon li.btn4 a {
		float:left;		
		font-size: 1.2em;
		color: #FFF;
		background: #ec3943;
		text-align: center;
		display: block;
		padding: 6px 10px;
		margin: 2px 5px 0 0;
		border-radius: 30px;
	}
	#header .addon li.btn4 a:hover, #header .addon li.btn5 a:hover, #header .addon li.btn6 a:hover {
		background: #c00;				
	}
	#header .addon li.btn5 a {
		display:none;
	}
	#header .addon li.btn6 a {
		float:left;		
		color: #FFF;
		background: #ec3943;
		text-align: center;
		display: block;
		padding: 6px 15px;
		margin: 2px 15px 0 0;
		border-radius: 30px;
	}			
}

@media screen and (max-width:568px) {
/** header **/
	#header .container {
		height: 102px;
		background: url(../images/head-480bg.gif) repeat-x left bottom;
	}
	.logo {
		float:left;
		margin:5px 0 0 5px;
	}
	.logo img {
		width:auto;
		height:40px;
	}
	#header .addon{
		margin: 12px 0 0 0;
	}		
}


@media screen and ( min-width: 991px) {
	head {
		font-family: pc;
	}
	html{
		overflow-y: scroll;
	}
	
/** header **/
	#header {
		width:100%;
		z-index:999;
	}
	#header .container {
		width: 990px;
		height: 116px;
		margin: 0 auto;
	}
	.logo {
		float:left;
		margin:14px 0 0 16px;
	}
	.logo img {
		width:auto;
		height:87px;
	}

/* ----- addon ----- */
	#header .addon{
		position: relative;
		float: right;
		margin-top: 12px;
	}	
	#header .addon ul {
		list-style:none;
		overflow:hidden;
	}
	#header .addon li{
		float: left;
		font-size: 1.6em;
	}
	#header .addon li.userName{ 
		color: #ec3943;
		margin-top: 8px; 
	}
	.member-coin{
		padding-right:24px;
		background:url(../images/member-coin.png) right center no-repeat;
		display:inline-block;
		line-height:18px;
	}
	#header .addon li.sla{
		color: #d2d2d2;
		margin: 8px;
	}
	#header .addon li.btn1 a {		
		float:left;
		display:block;
		width:30px;
		height:30px;
		background:url(../images/addon.png) 0 0;
		text-indent:-9999px;
		margin: 0 10px 0 120px; 
	}
	#header .addon li.btn1 a:hover {		
		background-position: 0 -30px;
	}
	#header .addon li.btn2 a {
		float:left;
		display:block;
		width:30px;
		height:30px;
		background:url(../images/addon.png) 60px 0;
		text-indent:-9999px;
		margin: 0 10px;
	}
	#header .addon li.btn2 a:hover {		
		background-position: 60px -30px;
	}
	#header .addon li.btn3 {
		float:left;
		display:block;
		width:30px;
		height:30px;
		margin: 0 10px;
		text-indent:-9999px;
	}	
	#header .addon li.btn3 a {
		background:url(../images/addon.png) 30px 0;
	}
	#header .addon li.btn3 a:hover {		
		background-position: 30px -30px;
	}
	#header .addon li.btn4 a {
		float:left;		
		font-size: 1.2em;
		color: #FFF;
		background: #ec3943;
		text-align: center;
		display: block;
		padding: 6px 10px;
		margin: 1px 0 0 5px ;
		border-radius: 30px;
	}
	#header .addon li.btn4 a:hover, #header .addon li.btn5 a:hover, #header .addon li.btn6 a:hover {
		background: #c00;				
	}
	#header .addon li.btn5 a {
		float:left;		
		color: #FFF;
		background: #ec3943;
		text-align: center;
		display: block;
		padding: 6px 15px;
		margin: 2px 5px 0 0;
		border-radius: 30px;
	}
	#header .addon li.btn6 a {
		float:left;		
		color: #FFF;
		background: #ec3943;
		text-align: center;
		display: block;
		padding: 6px 15px;
		margin: 2px 0 0 0;
		border-radius: 30px;
	}			
	
	
/* ----- searchZone ----- */
	.searchZone {
		position:relative;
		float:right;
	}
	.searchZone .lookBtn {
		position:absolute;
		top:0;
		right:0;
		width:32px;
		height:32px;
		z-index:2;
		background:#fff;
	}
	.searchZone .lookBtn a {
		display:block;
		width:32px;
		height:32px
	}
	.searchZone .lookBtn a img {
		margin-top:25px;
		margin-left:25px;
	}
	.searchZone .search {
		position:absolute;
		right:35px;
		top:0;	
		width:250px;
		height:32px;
		background:#000;
		border-radius: 30px;
		z-index:50;
	}
	.searchZone .box {
		width:230px;
		height:32px;
		margin:0 10px;
		background:none;
	}
	.searchZone .box.active {
        border-bottom: 2px dotted #000;
	}
	.searchZone .box .search-txt {
		float:left;
		width:180px;
		height:32px;
		color:#ccc;
		font-family:"微軟正黑體", Helvetica, sans-serif;
		font-size:1px;
		font-size:1em;
		line-height:32px;
		margin:0;		
		outline:none;
		background:none;
	}
	.searchZone .box .search-btn {
		float:right;
		display:block;
		width:32px;
		height:32px;
		background:url(../images/btn-input-search.png) no-repeat 50% 50%;
		background-size:80%;
		margin:-3px 0 0 0;		
		text-indent:-9999px;
		cursor:pointer;
	}
	.searchZone .box .search-btn:hover {
		background:url(../images/btn-input-search-hover.png) no-repeat 50% 50%;
		background-size:80%;
	}
}	


@media screen and ( min-width: 1100px) {
/** header **/
	#header {
		position: fixed;
		top:0;
		width:100%;
		z-index:9;
		background-color:#ffffff;
	}
	#header .container {
		position: relative;
		width: 1100px;
		height: 116px;
		margin: 0 auto;
	}
	.logo {
		float:left;		
		margin:14px 0 0 10px;
	}
	.logo img {
		width:198px;
		height:87px;
	}
}


/* ----- venus menu ----- */
#header .container .topMenu{
	position: absolute;	
	top: 60px;
	right: 0;
}
.venus-menu{
	position:relative;
	float:left;	
	width:100%;
	margin:0;
	padding:0;
	list-style:none;
}
.venus-menu li{
	position:relative;
	float:left;	
	margin:0;
	padding:0;
	line-height:20px;
	display:inline-block;	
}
.venus-menu > li > a.pcHide{ 
	display:none;
}	
.venus-menu > li > a{
	padding: 15px 12px 23px 12px;
	font-size: 2em;
	font-weight: bold;	
	color: #000;	
	text-decoration: none;
	display: block;
	-webkit-transition: color 0.2s linear, background 0.2s linear;
	-moz-transition: color 0.2s linear, background 0.2s linear;
	-o-transition: color 0.2s linear, background 0.2s linear;
	transition: color 0.2s linear, background 0.2s linear;
    border-radius: 2px 2px 0 0;
    -webkit-border-radius: 2px 2px 0 0;
    -moz-border-radius: 2px 2px 0 0;		
}

@media screen and ( min-width: 991px) {.venus-menu > li > a{padding: 15px 10px 23px 10px;}}
@media screen and ( min-width: 1100px) {.venus-menu > li > a{padding: 15px 15px 23px 15px;}}
.venus-menu li:hover > a, .venus-menu li.active a{
	color:#ec3943;
}
.venus-menu li .unit-now{
	color: #fff;
}
.venus-menu li .unit-now:hover, .venus-menu li > a:hover .unit-now:hover{
	color: #fff;
}
.venus-menu li .unit-now#m1{
	background-color: #5371c2;
}
.venus-menu li .unit-now#m2{
	background-color: #5496e0;
}
.venus-menu li .unit-now#m3{
	background-color: #3ac0d0;
}
.venus-menu li .unit-now#m4{
	background-color: #5bcf90;
}
.venus-menu li .unit-now#m5{
	background-color: #8484d0;
}
.venus-menu li .unit-now#m6{
	background-color: #e0547f;
}
.venus-menu li .unit-now#m7{
	background-color: #a2c85d;
}
.venus-menu li .unit-now#m8{
	background-color: #00afc5;
}
.venus-menu li .unit-now#m9{
	background-color: #f58f6e;
}
.venus-menu li .unit-now#m10{
	background-color: #ea6552;
}
.venus-menu > li > a i{
	color:#bababa;
}
.venus-menu > li:hover > a i, .venus-menu li.active a i{
	color:#fff;
}
.venus-menu ul, .venus-menu ul li ul{
	list-style:none;
	margin:0;
	padding:0;
	display:none;
	position:absolute;
	z-index:99;
	width:205px;
}
.venus-menu ul{
	top:56px;
	left:0;
	padding-top:10px;
}
.venus-menu > li > ul > li:first-child a:before{
	content:'';
	position:absolute;
	bottom:48px;
	left:45%;
	margin-left:-48px;
	width:0;
	height:0;
	border-left:8px solid rgba(255, 255, 255, 0);
	border-right:8px solid rgba(255, 255, 255, 0);
	border-bottom:8px solid #000;
}
.venus-menu > li > ul > li ul li:first-child a:before{
	content:'';
	position:absolute;
	bottom:16px;
	left:45%;
	margin-left:-71px;
	width:0;
	height:0;
	border-top:8px solid rgba(255, 255, 255, 0);
	border-right:8px solid rgba(0,0,0,0.8);
	border-bottom:8px solid rgba(255, 255, 255, 0);
}
.venus-menu ul li ul{
	top:0;
	left:100%;
	padding-left:10px;
}
.venus-menu ul li{
	clear:both;
	width:100%;
	border:none;
}
.venus-menu ul li a{
	padding:14px 20px;
	width:100%;
	color:#fff;
	font-size:1.8em;
	text-decoration:none;
	display:inline-block;
	float:left;
	clear:both;
	background:rgba(0,0,0,0.8);
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-webkit-transition:background 0.2s linear;
	-moz-transition:background 0.2s linear;
	-o-transition:background 0.2s linear;
	transition:background 0.2s linear;
}
.venus-menu ul li:hover > a{ background-color: #ec3943; color:#FFF;}
.venus-menu > li > ul > li:first-child:hover a:before{
	border-bottom-color:#ec3943;
}
.venus-menu > li > ul > li ul li:first-child:hover a:before{
	border-right-color:#ec3943;
}
.venus-menu > li .indicator{
	position:absolute;
	color:#bababa;
	top:19px;
	right:8px;
	font-size:20px;
	-webkit-transition:color 0.2s linear;
	-moz-transition:color 0.2s linear;
	-o-transition:color 0.2s linear;
	transition:color 0.2s linear;
}
.venus-menu > li:hover > .indicator{
	color:#fff;
}
.venus-menu ul > li .indicator{
	top: 14px;
	right: 8px;
	color: #fff;
}
.venus-menu i{
	line-height:20px !important;
	margin-right:6px;
	font-size:2em;
	float:left;
}
.venus-menu > li.showhide{
	display:none;
	width:100%;
	height:66px;
	cursor:pointer;
	color:#ec3943;
	margin-top:-51px;
}
.venus-menu > li.showhide span.icon{	
	margin:20px 18px;
	float:right;

}
.venus-menu > li.showhide .icon em{
	margin-bottom:7px;
	display:block;
	width:30px;
	height:4px;
	background:#ec3943;
}
.zoom-out{
	-webkit-animation:zoomOut 600ms ease both;
	-moz-animation:zoomOut 600ms ease both;
	-o-animation:zoomOut 600ms ease both;
	animation:zoomOut 600ms ease both;
}

@-webkit-keyframes zoomOut{
	0%{
		-webkit-transform:scale(.6);
	}
	100%{
		-webkit-transform:scale(1);
	}
}
@-moz-keyframes zoomOut{
	0%{
		-moz-transform:scale(.6);
	}
	100%{
		-moz-transform:scale(1);
	}
}
@-o-keyframes zoomOut{
	0%{
		-o-transform:scale(.6);
	}
	100%{
		-o-transform:scale(1);
	}
}
@keyframes zoomOut{
	0%{
		transform:scale(.6);
	}
	100%{
		transform:scale(1);
	}
}
@media only screen and (min-width:1101px){
	#header .container .topMenu{	
		right: 0;
	}	
	.venus-menu > li > a{
		padding: 15px 12px 23px 12px;
	}
}
@media only screen and (max-width:990px){
	#header .container .topMenu{
		top: 51px;
		right:0;
	}	
	.venus-menu li{				
		display: block;
		width: 100%;
	}
	.venus-menu > li > a{
		color: #FFF;		
		padding: 13px 0 14px 20px;	
		background: url(../images/icon-open.png) no-repeat right center rgba(0,0,0,0.9);	
	}
	.venus-menu > li > a.pcHide{
		display: inherit;
	}		
	.venus-menu > li.brand{
		display:none !important;
	}
	.venus-menu a{
		width:100%;
		box-sizing:border-box;
		-moz-box-sizing:border-box;
		-webkit-box-sizing:border-box;	
	}
	.venus-menu ul, .venus-menu ul li ul{
		width:100%;
		padding:0;
		left:0;
		border:none;
		position:static;
		box-sizing:border-box;
		-moz-box-sizing:border-box;
		-webkit-box-sizing:border-box;
	}
	.venus-menu > li > ul > li:first-child a:before, .venus-menu > li > ul > li ul li:first-child a:before{
		border:none;
	}
	.venus-menu ul li{
		border-left:none;
		border-right:none;
	}
	.venus-menu ul li a{
		padding-top:10px;
		padding-bottom:10px;
		background: url(../images/icon_arrow2.png) no-repeat 30px center rgba(255,255,255,0.95);
		color: #333;			
	}
	.venus-menu ul > li > a{
		padding-left: 40px !important;
	}
	.venus-menu > li .indicator{
		top:14px;
		right:20px;
		font-size:20px;
	}
	.venus-menu ul > li .indicator{
		top:10px;
		right:20px;
	}
	.venus-menu > li > ul > li > a{
		padding-left:40px !important;
	}
	.venus-menu > li > ul > li > ul > li > a{
		padding-left:60px !important;
	}
	.venus-menu > li > ul > li > ul > li > ul > li > a{
		padding-left:80px !important;
	}
}

@media only screen and (max-width:568px){
	.venus-menu > li.showhide{
		height:51px;
		color:#fff;
		background:#000;
	    margin-top:0;				
	}
	.venus-menu > li.showhide span.icon{	
		margin:14px 13px;
	}
	.venus-menu > li.showhide .icon em{
		margin-bottom:7px;
		width:25px;
		height:3px;
	    background:#fff;		
	}		
}


/*側邊選單-新手村*/
/* ----- nav -----  */
.nav_newbie { position:fixed; right:10px; top:65%; width:108px; height:204px; text-indent:-9999px; background:url(../images/nav-newbie.png) no-repeat; z-index:100; cursor:pointer;}
.nav_newbie:hover { background-position:-109px 0;}


@media only screen and (max-width: 480px) {
	.nav_newbie { top:55%; width:100px; height:102px; text-indent:-9999px; background:url(../images/nav-newbie-s.png) no-repeat;}
	.nav_newbie:hover { background-position:-100px 0;}
}