﻿/*-------CSS3特效集合--------*/
@keyframes xshow {0% {opacity:0;}25% {opacity:1;}50% {opacity:0;}75% {opacity:1;}100% {opacity:0;}}
@-webkit-keyframes xshow {0% {opacity:0;}25% {opacity:1;}50% {opacity:0;}75% {opacity:1;}100% {opacity:0;}}
@keyframes xshow2 {0% {opacity:0;}20% {opacity:1;}40% {opacity:0;}60% {opacity:1;}80% {opacity:0;}100% {opacity:0;}}
@-webkit-keyframes xshow2 {0% {opacity:0;}25% {opacity:1;}50% {opacity:0;}75% {opacity:1;}100% {opacity:0;}}
@-webkit-keyframes buttonHover{0% {box-shadow:0 0 5px #808080;}50% {box-shadow:0 0 12px #808080;}100%{box-shadow:0 0 5px #808080;}}
@keyframes buttonHover{0% {box-shadow:0 0 5px #808080;}50% {box-shadow:0 0 12px #808080;}100% {box-shadow:0 0 5px #808080;}}



/*Global*/

body { position:relative;}

#wrap { max-width:640px; margin:auto; padding:0 0 3rem; position:relative; overflow:hidden;/*background:url(../images/body_bg.jpg) center top repeat ;*/}

/*头部*/
#page nav { display:none; }
header { position:relative;max-width:640px; margin:0 auto; font-size:2.2rem; color:#fff; text-align:center; line-height:5.3rem; height:5.8rem; background:#ea5493;}
header a { display:inline-block; position: absolute; left:3%;}
header a.navlist { width:2.9rem; height:2.8rem; background:url(../images/icon_01.png) 0px 2px no-repeat; background-size:45px 170.5px; top:2rem;}
header a.back { width:2.9rem; height:2.8rem; background:url(../images/icon_01.png) 0px -94px no-repeat; background-size:45px 170.5px; top:2rem; } 
header a.right { left: auto; right:3%; }

#content{ min-height:5.5rem; max-width:640px; padding:1rem 1rem 2rem; margin:0 auto 3rem auto; box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;-webkit-box-sizing:border-box;}

@media  screen and  (min-width: 500px) {
.menu-right .w-search {width: 500px;}
}

/*移动端主导航*/
#mobileMenu_hide{ display:none;}
/*#mobileMenu{ position:relative; max-width:640px; margin:0 auto; height:3rem;line-height:3rem; text-align:left;  background:#955f21;
background: -webkit-linear-gradient(left, #955f21 , #b98d46 , #955f21); 
background: -o-linear-gradient(right, #955f21 , #b98d46 , #955f21); 
background: -moz-linear-gradient(right, #955f21 , #b98d46 , #955f21); 
background: linear-gradient(to right, #955f21 , #b98d46 , #955f21);
}*/
#mobileMenu{ position:relative; max-width:640px; margin:0 auto; height:3.5rem;line-height:3.5rem; text-align:left;  background:#ea5493; border-top:rgba(255,255,255,0.15) 1px solid;}
#mobileMenu a{display:block;float:left;color:#fff; width:20%;cursor:pointer; cursor:hand; text-align:center; font-size:1.4rem; line-height:250%;background:url(../images/Vline.png) left center no-repeat;}
#mobileMenu a:first-child{background:none;}
#mobileMenu p{ position:absolute; left:0; top:100%; margin:0; background:#ea5493; z-index:999; display:none; line-height:0;}
#mobileMenu p a{ display:inline-block; padding:0 1em; width:100%; white-space:nowrap; line-height:200%; float:none; background:none; box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;-webkit-box-sizing:border-box; border-top:rgba(255,255,255,0.15) 1px solid;}

/*脚部*/
footer { position:relative; width:100%; max-width:640px; margin:0 auto; padding:1rem 0; text-align:center; color:#a3a3a3; font-size:1.3rem; background:#fff; border-top:#eee 1px solid;}
footer a{ color:#a3a3a3;}


/*返回顶部*/
#back-to-top{ position:fixed; bottom:10rem; right:0.7rem; display: block; z-index:999; }
#back-to-top a{ text-align:center; text-decoration:none; color:#d1d1d1; display:block; width:50px; /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/
 -moz-transition:color 1s; -webkit-transition:color 1s; -o-transition:color 1s; }
#back-to-top a:hover{ color:#979797; }
#back-to-top a span{ display:block; height:50px; width:50px; background:url(../images/top.png) no-repeat center center; margin-bottom:5px; -moz-transition:background 1s; -webkit-transition:background 1s; -o-transition:background 1s; }
#back-to-top a:hover span{ background:url(../images/top.png) no-repeat center center; }


/*浮动按钮*/

.floatblock { width:7rem; height:7rem; position:fixed; display:block; right:0.2rem; bottom:4.2rem; z-index:1000;}
.btnfb { width:7rem; height:7rem; display:block; }
.icon_fb{ width:60px;height:57px; position:absolute;bottom:0; right:0; z-index:10;cursor:pointer;}
.icon_fb span{ diplay:none;}
.btn { width:58px;height:54px;background:url(../images/micon.png) no-repeat; background-size:60px 224px; z-index:1;position:absolute;bottom:2px;right:2px; cursor:pointer;}
.btn span{display:block;width:22px;height:24px;font-size:0;position:absolute;top:50%;left:50%;margin-top:-12px;margin-left:-11px;overflow:hidden;   background-size:51px 138px;}
.btn1 {background-position:-0px -0px;}
.btn2 {background-position:-0px -78px;}
.btn3 {background-position:-0px -160px;}
.btn{-webkit-transition:bottom .2s,right .2s;-moz-transition:bottom .2s,right .2s;-o-transition:bottom .2s,right .2s;-ms-transition:bottom .2s,right .2s;transition:bottom .2s,right .2s;}
.btn a { display:block; width:100%; height:100%;}
.btn1.close, .btn2.close, .btn3.close{bottom:4px;right:0;}
.btn1.open{bottom:100px;right:0;}
.btn2.open{bottom:60px;right:60px;}
.btn3.open{bottom:0px;right:100px;}

.lazy { display: none;}

/*页底导航*/
#menuBT{ position:fixed; left:0; top:auto; bottom:0; z-index:9999; width:100%; margin:0 auto; line-height:0;}
#navi{background:#ea5493; box-shadow:0 -2px 4px rgba(234,84,147,0.15);}
#navi li{ float:left; width:25%; padding:0.5em 0 0 0; background:#ea5493; text-align:center;border-right:rgba(255,255,255,0.2) 1px solid; box-sizing:border-box;-moz- box-sizing:border-box;-ms- box-sizing:border-box;-o- box-sizing:border-box;-webkit- box-sizing:border-box;}
#menuBlank,.menuBlank{ height:4.6rem;}

.headIco{ position:relative; display:inline-block; cursor:hand; cursor:pointer; height:4rem; width:4rem; overflow:hidden;}
.headIco i{ display:inline-block; width:80%; height:80%; overflow:hidden;}
.headIco em{display:inline-block; width:100%; height:50%; overflow:hidden; }
.headIco i img,.headIco em img{ position:relative; width:100%;}
.headIco span{ position:absolute; left:0; top:auto; bottom:0; width:100%; text-align:center; line-height:200%; color:#fff;}
#ico_wechat img{ margin-top:-100%;}
#ico_message img{ margin-top:-200%;}
#ico_contact img{ margin-top:-300%;}
#ico_pro img{ margin-top:-400%;}
#ico_album img{ margin-top:-500%;}
#ico_news img{ margin-top:-600%;}
@media screen and (max-width:480px){
	.headIco{ width:3.8rem; height:3.8rem;}
	#menuBlank,.menuBlank{ height:4.4rem;}
}

