﻿
#Web_show_menu{ position: fixed; margin: 0 auto; max-width: 720px; top: 0; width: 100%;z-index: 9;}
.webHeaderBg {
	color:#fff;
	position:relative;
	-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2);
	-ms-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2);
	-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2);
	-o-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2);
	box-shadow:inset 0 1px 0 rgba(255,255,255,0.2)
}
.header{padding-left: 0;}
/*.edit #Web_show_menu{ position: absolute; z-index: 2;}*/
.edit #Web_show_menu{ position: absolute!important;}
.design .navbar {
    position: absolute;
    z-index: -9;
    height: 0!important;
    bottom: 0!important;
    max-width: 720px;
    width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 300ms;
    -ms-transition: all 300ms;
    -moz-transition: all 300ms;
    -o-transition: all 300ms;
    transition: all 300ms;
    background-color: #4c4242;
    top: 100%;
    opacity: 0.5;
    
}
.design .navbar .navItem a {
	overflow:hidden;
	font-size:1.4rem;
	text-decoration:none;
	text-align:center;
	display:block;
	position:relative;
	word-break:keep-all;
	white-space:nowrap;
	width:auto;
	min-width:80px;
	max-width:none;
	font-family:"微軟雅黑";
}

.design .navbar .navbarList {
	padding-top: 6rem;
	-webkit-backface-visibility:hidden;
	-ms-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	-o-backface-visibility:hidden;
	backface-visibility:hidden;
	height: 70%;
	overflow-y: scroll;
	overflow-x: hidden;
}

.design .navbar .navbarList > ul > li > a {
	height: 100%;
	color: #fff;
	text-align:left;
	display:block;
	font-size:1.6rem;
	white-space:nowrap;
	text-overflow:ellipsis;
	text-decoration:none;
	font-weight:normal;
	overflow:hidden;
	width:100%;
	position:static;
}
.design .navbar .navbarList > ul > li{
	bottom: -20rem;  
	float: left;
	width: 33.33%;
	margin: 1rem 0rem;
	position:relative;
	opacity: 0;
	transition:all .4s;
}
.openNav .design .navbar .navbarList > ul > li {
	bottom: 0rem;
	opacity: 1;	
}
.openNav .design .navbar .navbarList > ul > li:nth-child(1){
	transition-delay:100ms;
}
.openNav .design .navbar .navbarList > ul > li:nth-child(2){
	transition-delay:180ms;
}
.openNav .design .navbar .navbarList > ul > li:nth-child(3){
	transition-delay:260ms;
}
.openNav .design .navbar .navbarList > ul > li:nth-child(4){
	transition-delay:340ms;
}
.openNav .design .navbar .navbarList > ul > li:nth-child(5){
	transition-delay:420ms;
}
.openNav .design .navbar .navbarList > ul > li:nth-child(6){
	transition-delay:500ms;
}
.openNav .design .navbar .navbarList > ul > li:nth-child(7){
	transition-delay:580ms;
}
.openNav .design .navbar .navbarList > ul > li:nth-child(8){
	transition-delay:640ms;
}
.openNav .design .navbar .navbarList > ul > li:nth-child(9){
	transition-delay:720ms;
}
.openNav .design .navbar .navbarList > ul > li:nth-child(10){
	transition-delay:760ms;
}
.openNav .design .navbar .navbarList > ul > li:nth-child(11){
	transition-delay:800ms;
}
.openNav .design .navbar .navbarList > ul > li:nth-child(12){
	transition-delay:840ms;
}
.openNav .design .navbar .navbarList > ul > li:nth-child(13){
	transition-delay:880ms;
}
.openNav .design .navbar .navbarList > ul > li:nth-child(14){
	transition-delay:920ms;
}
.openNav .design .navbar .navbarList > ul > li:nth-child(15){
	transition-delay:960ms;
}
.openNav .design .navbar .navbarList > ul > li:nth-child(15){
	transition-delay:1000ms;
}

.design .navbar .navbarList > ul > li > a span.navItemIcon,
.design .navbar .navbarList > ul > li > a span.iconfont,
.design .navbar .navbarList > ul > li > a img{
	font-size: 3rem;
	display: block;
	width: 3.5rem;
	height: 3.5rem;
	vertical-align: middle;
	display: block;
	color: rgb(255,255,255);
	border-radius: 100%;
	border: 2px solid #ffffff;
	text-align: center;
	line-height: 3.4rem;
	margin: 0 auto;
}
.design .navbar .navItem:after{ display: none }
.design .navbar .navbarList > ul > li > a[data-cname="index.html"] span.navItemIcon:before {content: '\e686' }
.design .navbar .navbarList > ul > li > a[data-cname="product.html"] span.navItemIcon:before {content: '\e6a9' }
.design .navbar .navbarList > ul > li > a[data-cname="news.html"] span.navItemIcon:before {content: '\e607' }
.design .navbar .navbarList > ul > li > a[data-cname="login.html"] span.navItemIcon:before {content: '\e640' }
.design .navbar .navbarList > ul > li > a[data-cname="register.html"] span.navItemIcon:before {content: '\e660' }
.design .navbar .navbarList > ul > li > a[data-cname="msg.html"] a span.navItemIcon:before {content: '\e6b5' }
.design .navbar .navbarList > ul > li > a span.navItemIcon:before {content: '\e725' }

/*導航欄選中背景*/
.design .navbar .navbarList > ul > li.itemSelected{
	border:none;
}
.design .navbar .navbarList > ul > li.itemSelected > a {
	/* background:#de3838; */
	border-radius:3rem 0 0 3rem;
	color: #fff;
}

.design .navItem .navItemName {
	margin: 0.8rem 0.5rem;
	display: block;
	text-align: center;
}
.navBaseIcon .navItemIcon {
	width:2rem;
	display:inline-block;
	vertical-align:middle;
	margin-right:1rem;
	margin-left:2rem
}
.navBaseIcon .navItem a {
	line-height:4.6rem;
	text-align:left;
}
.navButton {
	position:fixed;
	height:4rem;
	width:4rem;
	z-index:99;
	bottom:70px;
	margin-left: 0.6rem;
	-webkit-transition:all 350ms;
	transition: all 350ms;
	transform-origin:50% 50%;
	-webkit-transform-origin:50% 50%;
	box-sizing: border-box;
}
body.edit .navButton{
	position:absolute;
	top: 520px;
	transition: all 350ms;
	transform-origin:50% 50%;
	-webkit-transform-origin:50% 50%;
}
.navButton .menuNav .menuNavTip {
	width: 4rem;
	height: 4rem;
	text-align:center;
	border-radius:50%;
	cursor: pointer;
	background: #de3838;
	border: 2px solid #ffffff;
	box-shadow: 0 0 4px rgba(0,0,0,.5);
	-webkit-box-shadow: 0 0 4px rgba(0,0,0,.5);
	box-sizing: border-box;
}

.openNav .design .navbar{
    visibility: visible;
    opacity: 0.8;
    width: 100%;
    height: 101%!important;
    -webkit-transition: all 300ms;
    -ms-transition: all 300ms;
    -moz-transition: all 300ms;
    -o-transition: all 300ms;
    transition: all 300ms;
    z-index: 6;
    position: absolute;
    top: -4px;
    /* overflow-y: hidden!important; */
}
.navButton .menuNav .icon-menuNavTip:before {
	content:"\e6b0";
	font-size: 3.5rem;
	color:#fff;
	line-height: 3.7rem;
	text-align:center;
}
.openNav .menuNav .icon-menuNavTip:before {
	content: '\e66f'
}
.openNav .navButton {
	-webkit-transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-o-transform:rotate(90deg);
	transform:rotate(90deg)
} 

/*導航欄遮罩*/
#mob_nav_mask {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 5;
	background: #333;
	opacity: 0.5;
	cursor: pointer;
	display: none;
}


/*全局默認效果*/
.webAnimation {
	-webkit-transform:translate(0,0);
	-ms-transform:translate(0,0);
	-moz-transform:translate(0,0);
	-o-transform:translate(0,0);
	transform:translate(0,0);
	-webkit-transition:all 350ms;
	-ms-transition:all 350ms;
	-moz-transition:all 350ms;
	-o-transition:all 350ms;
	transition:all 350ms;
}
/*全局移動效果*/
/* .marginAnimation {
	-webkit-transform:translate(50%,0);
	-ms-transform:translate(50%,0);
	-moz-transform:translate(50%,0);
	-o-transform:translate(50%,0);
	transform:translate(50%.design .navItem .navItemName,0);
} */

/*組件欄目標題*/
.skin_title{  position: relative; height: 3.3rem; line-height: 3.3rem; padding-left:15px;}
.skin_title > h4{font-weight: normal;font-size: 1.4rem;position: absolute;left:.6rem;top:0;margin:0;padding-left:0.8rem;padding-right:0.8rem;line-height:3.34rem;}
.skin_title > .skin_t_icon{  width:0.3rem; height: 1.8rem; position: absolute; left: 0; top:0.7rem;}
.skin_title > a{text-decoration:none}
.skin_title > a.skin_t_more{ position: absolute; right: 0; top:0;font-size:1.2rem; font-family:'icomoon'; font-size: 2.5rem;
	color: #fff;}
.skin_title > a.skin_t_more:before{content: "\e913";visibility:visible;font-size: 3.5rem;}
.skin_title > a > span.skin_t_b{ display:none; }

/*當前位置*/
#webLocaltion{background: white;}
#localNavbar{top:5rem;}
#localNavbar ul{background: #ffffff;}
#localNavbar ul li{border-bottom: 1px solid #f2f2f2;}
#localNavbar ul li a{border:none; color:#494949; line-height:5rem;height:5rem; padding-left: 3rem;border-bottom: 1px solid #d0d0d0;}
#localNavbar ul li.itemSelected a{background:#de3838; color:#fff;border:none; margin-left:1rem; padding-left:2rem;border-radius:3rem 0 0 3rem}
.localNavTip{margin-top:-6px;/* margin-right: 13px; */}
.localNavTip.icon-menuNavTip:before{font-size: 3.5rem;line-height: 4.6rem;content: "\e913";content: "\e6b0";}

.design .navbar .navbarList > ul > li.itemSelected > a span.navItemIcon{background:#ffffff !important;}
.design .navbar .navbarList > ul > li.itemSelected > a span.iconfont{background:#ffffff !important;}
