﻿/*基础样式*/
body:after {content: url("https://www.theveganpunk.com/images/kule/loading.jpg");display: none;}
html {overflow-y: scroll; -webkit-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding: 0;}
body,button,input,select,textarea{font-family: Helvetica, Arial, sans-serif;color: #3f3f3f;font-size:1em;}
input,select,textarea{	font-size:100%;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:500;}
.hidden {display:none;}
ul, li {list-style-type:none;}
a,.morejoin,.more,.brand_nav li{text-decoration:none;-webkit-text-size-adjust:auto;-webkit-tap-highlight-color: rgba(0,0,0,0);}

/*首页*/
.columnleft,.columnright {width:50%;position: relative;margin:2em auto;}
.columnleft {float:left;}
.columnright {float:right;}
.columnleft li, .columnright li {text-align:center;padding-bottom:16px;}

.columnright li:first-child {padding-top:20%; }
.columnleft li:last-child{padding-bottom:24.3%;}

.columnleft li {border-right:solid 1px #008FD6;}
.columnright li {border-left:solid 1px #008FD6;}
.columnleft li a,.columnright li a {position:relative;width:100%;height:100%;display:block;color:#666666;}
.columnleft li a:visited, .columnright li a:visited {color:#666666;}
.columnleft li a label {position:absolute;left:5px;bottom:10px;font-size: .9em; }
.columnright li a label {position:absolute;right:5px;bottom:10px;font-size: .9em;  }

.columnleft img {margin-left: 20%;}
.columnright img {margin-right: 20%;}
.columnleft img,.columnright img {z-index:2;position:relative;width:50%;}
.columnleft .line {float:right;height:2px;background-color:#008FD6;width:50%;position:absolute;right:0;top:50%;z-index:1;}
.columnleft .line:after {width:16px;height:16px;position:absolute;right:-10px;top:-9px;content:"";background-color:#fff;border-radius:16px;border:solid 2px #008FD6;}

.columnright .line {float:left;height:2px;background-color:#008FD6;width:50%;position:absolute;left:0;top:50%;z-index:1;}
.columnright .line:after {width:16px;height:16px;position:absolute;left:-10px;top:-9px;content:"";background-color:#fff;border-radius:16px;border:solid 2px #008FD6;}



.ul_list {position: relative;width:2px;background-color:#008FD6;margin:0 auto;height:800px;}
.ul_list li {position:absolute;text-align:center;}
.ul_list li.about {right:0;top:50px;width:360px;height:185px; }

/*关于我们*/

.logo{position: absolute;top: -10%;left: 50%;display: block;width: 26%;height: 10em;border-radius: 10%;margin-left: -13%;z-index:2;}
.logo:after {content:"";display:block;background-size:100%;position:absolute;left:0; top:-4.5em; width:100%; height:100%;border-radius:50%;border:1px solid #CCCCCC;z-index:1;background-color:#fff;box-shadow: 0 5px 10px #7A6F6F;}


/*轮播*/
header{position:relative;max-width:740px;margin:0 auto;}
header a{display:block;}
header nav{position:absolute; left:0; bottom:0;width:100%;filter:alpha(opacity=50);opacity:0.5;background: #696666;}
header nav #position {text-align: center;list-style: none;margin: 0;padding: 0;}
header nav #position li {display: inline-block; width: 10px;height: 10px;border-radius: 10px; margin: 0 2px;cursor: pointer;background-color:#fff;}
header nav #position li.on {background-color: #FF6E00;}
.swipe {overflow: hidden;visibility: hidden;position: relative;}
.swipe-wrap {overflow: hidden;position: relative;}
.swipe-wrap figure {float: left;width: 100%;position: relative;font-size:0;line-height:0;}
.swipe-wrap figure img {width:100%;}



/*主容器*/
.main {max-width:740px;margin:0 auto;background-color:#FFE4B7;}
.main p {line-height:22px;margin-top:10px;margin-bottom:10px;text-align:justify;    }

.w97 {width:97%;margin:0 auto;zoom:1;overflow:hidden;}
.w100{width:100%;margin:0 auto;zoom:1;position:relative;}




/*主要内容*/
.inner {margin:10px 0;padding:10px;border: 1px solid #dadada;background-color:#fff;border-radius:8px;}
.inner div {line-height:26px;}
.inner .product li{ width:30.33333333%; float:left; margin:1.5%;}
.inner .product li img{ width:100%;}
.inner .product li span{ width:100%; line-height:22px; height:22px; text-align:center; color:#333; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.inner .product .p_more{ width:100%; margin-top:10px; text-align:center; display:inline-block;}
.inner .product .p_more a{ color:#333; width:80%; height:30px; line-height:30px; background:#f2f2f2; text-align:center; display:inline-block;}



/*版权信息*/
.copyright {line-height:30px;text-align:center;font-size:12px;width:100%;padding:8px 0;}

/*企业资讯*/
.newlist {}
.newlist ul li {background-color: #fff;margin: 10px 0;padding: 10px;border-radius: 5px;border: 1px solid #d6d7d7;-webkit-tap-highlight-color:#BEB9B6;line-height: 1.6;overflow: hidden;}
.newlist ul li:first-child {margin-top:0;}
.newlist ul li a{-webkit-tap-highlight-color: rgba(0,0,0,0);color: #000;}
.newlist ul {zoom: 1;clear: both;overflow: hidden;}
.newlist ul li:active {background: #F5F4F4;}
.newlist ul li a:active { background-color:none;}
.newlist ul li a:visited {color:#727E80;}
.newlist ul li a:focus {outline:none;-moz-outline-style:none; background-color:none;}
/*.newlist ul li:last-child {border:none;}*/
.newlist a:link {text-decoration: none!important;    }
.newlist li img {float: left;max-height: 9em;max-width: 9em;border-radius: 5px;margin: 5px 5px 0 0;position: relative;overflow: hidden;}
.newlist li h2 {width: 100%;display:block;font-size: 14px;line-height: 1.2;margin: 5px 0;font-weight: 200;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;font-family: proxima-nova,sans-serif;text-shadow: 0 1px 0 #f3f3f3;}
.newlist p {font-weight: 400;color: #4B4743; display: block;margin:0.1em .2em .5em .2em;overflow: hidden;white-space: pre-wrap;word-break: break-all;text-align: left;text-align:justify;}

/*更多*/
.more {width:30%;display:block;border-radius:10px; text-align:center;font-size:12px;color:#fff; background-color:#0064B4;height:32px;margin:10px auto;line-height:32px;box-shadow: 1px 2px 5px rgb(75, 56, 56);}
.more a {display:block;width:100%;height:100%;color:#7574aa;}
.morejoin {width:40%; padding: 6px 0;border: 1px solid #adadab;color: #000000;background-color: #e8e8e8;background-image: linear-gradient(to top, #E9E9E9, #ffffff);text-align: center;border-radius: 3px;margin:0 auto 30px auto;display:none;}



/*合作客户产品列表*/
.product {overflow:hidden;margin-bottom:20px;}



/*弹出框样式*/
.lightboxOverlay {position: absolute;top: 0;left: 0;z-index: 9999;background-color: black;filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);opacity: 0.8;display: none;}
.lightbox {position: absolute;left: 0;width: 100%;z-index: 10000;text-align: center;line-height: 0;font-weight: normal;}
.lightbox .lb-image {display: block;height: auto;-webkit-border-radius: 3px;-moz-border-radius: 3px;-ms-border-radius: 3px;-o-border-radius: 3px;border-radius: 3px;}
.lightbox a img {border: none;}
.lb-outerContainer {position: relative;background-color: white;*zoom: 1;width: 250px;height: 250px;margin: 0 auto;-webkit-border-radius: 4px;-moz-border-radius: 4px;-ms-border-radius: 4px;-o-border-radius: 4px;border-radius: 4px;}
.lb-outerContainer:after {content: "";display: table;clear: both;}
.lb-container {padding: 4px;}
.lb-loader {position: absolute;top: 43%;left: 0%;height: 25%;width: 100%;text-align: center;line-height: 0;}
.lb-cancel {display: block;width: 32px;height: 32px;margin: 0 auto;background: url("https://www.theveganpunk.com/images/loading.gif") no-repeat;}
.lb-nav {position: absolute;top: 0;left: 0;height: 100%;width: 100%;z-index: 10;}
.lb-container > .nav {  left: 0;}
.lb-nav a {  outline: none;}
.lb-prev, .lb-next {width: 49%;height: 100%;cursor: pointer;display: block;}
.lb-prev {left: 0;float: left;}
.lb-prev:hover {background: url("https://www.theveganpunk.com/images/prev.png") left 48% no-repeat;}
.lb-next {right: 0;float: right;}
.lb-next:hover {background: url("https://www.theveganpunk.com/images/next.png") right 48% no-repeat;}
.lb-dataContainer {margin: 0 auto;padding-top: 5px;*zoom: 1;width: 100%;-moz-border-radius-bottomleft: 4px;-webkit-border-bottom-left-radius: 4px;border-bottom-left-radius: 4px;-moz-border-radius-bottomright: 4px;-webkit-border-bottom-right-radius: 4px;border-bottom-right-radius: 4px;}
.lb-dataContainer:after {content: "";display: table;clear: both;}
.lb-data {padding: 0 4px;color: #bbbbbb;}
.lb-data .lb-details {width: 85%;float: left;text-align: left;line-height: 1.1em;}
.lb-data .lb-caption {font-size: 13px;font-weight: bold;line-height: 1em;}
.lb-data .lb-number {display: block;clear: left;padding-bottom: 1em;font-size: 12px;color: #999999;}
.lb-data .lb-close {display: block;float: right;width: 30px;height: 30px;background: url("https://www.theveganpunk.com/images/close.png") top right no-repeat;text-align: right;outline: none;filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);opacity: 0.7;}
.lb-data .lb-close:hover {cursor: pointer;  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity: 1;}

/*加盟留言*/
.join {position: relative;min-height:200px;text-align:left;}
.join:before {content:"";position:absolute;top:0;width:2px;background-color:#ADADAD;height:100%;z-index:1;left:15px;}
.join .addjoin {z-index:2;position:relative;margin-top:10px;margin-bottom:10px;}
.join .addjoin .joinico {width:30px; height:30px; background-color:#fff;border:2px solid #757B75;border-radius:15px;float:left;margin-right:3px;background:url("https://www.theveganpunk.com/images/pen.gif") no-repeat center center #fff;background-size:18px auto;}
.join .addjoin h2 {color:#828080;font-size:20px;line-height:32px;}
.join ul {margin-left:7px;margin-top:30px;margin-bottom:30px;}
.join ul li {position: relative;margin-top:30px;margin-bottom:30px; padding-left:24px;color:#9E9C9C;}
.join ul li:before {content: "";width: 14px;height: 14px;border:2px solid #757B75;position:absolute;left:0;top:0;background-color:#fff;z-index:1;}
.join ul li:after {content: "";display: block;width: 4px;height: 4px;position: absolute;background: #ADADAD;left:7px;top:7px;z-index:2;}
.join ul li .jointimetype {margin-top:8px;height:15px;line-height:15px;}
.join ul li .jointime, .join ul li .jointype {font-size:12px;float:left;}
.join ul li .jointype {margin-left:3px;}
.join ul li .joininfo {background-color: #FFFFFF;color: #666666;line-height:22px;margin-top:8px; display: block;font-size: 12px;padding: 10px;position: relative;border-radius: 5px;box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.15);-webkit-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.15);}
.join .end:before {content: "";width: 14px;height: 14px;border:2px solid #757B75; position:absolute;left:7px;bottom:0;background-color:#fff;z-index:1;}
.join .end:after {content: "";display: block;width: 4px;height: 4px; position: absolute;background: #ADADAD;left:14px;bottom:7px;z-index:2;}


#join1 {zoom:1;overflow:hidden;}
.joinform {display:none;}
.join dl {display:block;zoom:1;overflow:hidden;margin-left:7px;padding-left:24px;font-size:14px;}
.join dl dt {width:80%;display:block;height:20px; line-height:20px; padding-left:18px;margin:5px 0 3px 0;}
.join dl dd span{color:#FF0030;float:left;line-height:30px; margin-top:5px;margin-left:3px;}
.join .warn {color:#A5A2A2;background:url("https://www.theveganpunk.com/images/tips.png") no-repeat -100px -100px;}
.join .success { background-position:0 -43px;}
.join .err { background-position:0 -22px;}
.join .tip {background-position:0 0;}

.join .inputs,.join .selects {border:1px solid #e7e7e7;color:#999999; display:block;margin-top:5px;outline: none;border-radius:5px;}
/*.join .selects {-webkit-appearance: none; background:url("https://www.theveganpunk.com/images/semin.jpg") center right no-repeat; }*/
.join .inputs {float:left;width:80%;padding:8px; }
.join .selects {width:86%;height:34px;line-height:34px;-webkit-appearance: none; background:url("https://www.theveganpunk.com/images/semin.jpg") center right no-repeat; background-size:auto 34px;}

.join .stip {height:16px;min-width:16px; padding-left:20px;display:inline-block;}
.join .loading {background:url("https://www.theveganpunk.com/images/042.gif") no-repeat 0 0;}
.join .err {background:url("https://www.theveganpunk.com/images/tips.png") no-repeat 0 -22px;}
.join .success {background:url("https://www.theveganpunk.com/images/tips.png") no-repeat 0 -43px;}



.join .btn{padding: 6px 6px;border: 1px solid #adadab;color: #000000;background-color: #e8e8e8;background-image: linear-gradient(to top, #E9E9E9, #ffffff);text-align: center;border-radius: 3px;margin:0 auto 30px auto;font-size:12px;margin-left:0.5em;}
.join .booksub {text-align:center;margin-top:1em;}


/*关于我们*/
.about img {width:100%;}
.about div{line-height:28px;}

/*专卖形象*/

.imglist{border:2px solid #fff;margin:10px auto;border-radius:8px;font-size:0;line-height:0;}
.imglist img{width:100%;border-radius:8px;height:auto;}


/*品牌中心*/
.brand_nav {border-bottom:1px solid #CBCBCB;border-top:1px solid #E2E2E0;height:30px;background:-webkit-gradient(linear,0 0,0 100%,from(#FDFEFF),to(#F0F0F0));}
.brand_nav li {float:left;width:25%;line-height:36px;text-align:center;color:#000;font-size:16px;position:relative;}

.brand_nav li .arrow-down,.brand_nav li .arrow-up{display:none;background-repeat:no-repeat;background-position:center center; width:24px;height:14px;position:absolute;bottom:-16px;left:50%;margin-left:-12px; }
.brand_nav li .arrow-up {background-image:url("https://www.theveganpunk.com/images/kule/cur2.png");}
.brand_nav li .arrow-down {background-image:url("https://www.theveganpunk.com/images/kule/cur.png");}
.brand_nav li.active .arrow-down,.brand_nav li.active .arrow-up{display:block;}


.brand_content {margin:20px auto 0 auto;}
.brand_content_item {background-color:#fff; padding:15px; display:none;width:90%;text-align:center;margin:0 auto;border:1px solid #DCDEDB;border-radius:10px;}
.brand_content_item img {width:99%;}


/*加盟留言*/
#join1 {zoom:1;overflow:hidden;}
.joinform {display:none;}

/*产品*/
.productCate {float:left;width:20%;background:-webkit-gradient(linear,90% 0%, 100% 0%, from(#F1F1F1), to(#E4E4E4));}
.productCate a {padding:10px;display: block;text-align:center;color:#030303;}
.productCate a.active {background-color:#E2E2E2;position:relative;}
.productCate a.active:after {content: "";width:0px; height:0px; border-bottom:10px solid transparent;border-top:10px solid transparent;border-right:10px solid #FFE4B7;font-size:0px;line-height:0px;position:absolute;right:0;top:50%;margin-top:-5px;}
.productCate .line {width:95%;height:1px;background-color:#D4D4D4;}
.productCate a.tel {background:url("https://www.theveganpunk.com/images/kule/tel.png") no-repeat center  0;background-size:50%;padding-top:1em;padding-bottom:2em;margin-top:10px; }

.productlist {float:right;width:76%;margin:10px 2% 10px 2%;}
.list {background-color:#FFFFFF;border-radius:10px;overflow:hidden;width:100%;}
.list .img {float:left;margin: 4%;width:42%;display:inline-block;}
.list .img a{display:inline-block;box-shadow: 0 1px 0 #bbb; width:100%;background-color:#FFFFFF;border:1px solid #E7E8D8; border-radius:5px;}
.list .img a img {width: 100%;vertical-align:middle;}
.list .img label {font-size:14px;width:100%;text-align:center;overflow:hidden;}

.productlist .tip {position:relative;margin-right:10px;margin-bottom:14px;font-size:14px;text-align:center; float:right; line-height:30px; width: 220px;height: 30px;background-color: #F3F3F3;border-radius: 6px;box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.4);}
.productlist .tip:before {content: '';position: absolute;right: 14px;top: 28px;border-style: solid;border-width: 0 14px 14px 14px;border-color: rgba(0, 0, 0, 0) #f3f3f3 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);}

/*产品详细*/
.productdetial { clear: both;margin:8px;text-align: center;padding:40px 0;}
 .productdetial img {width:100%;}
.pname {text-align:center;line-height:30px;}


/*正在加载*/
.bodyshim {display:none;background-color:#DCDCDC;left:0;top:0; opacity:.5;z-index:1;width:100%;height:100%;position:absolute;}
.loading {display:none;padding-top:10px;margin-left: -50px;z-index:2; position:absolute;top:0; left:50%;width:100px;height:100px;overflow:hidden;vertical-align:middle;text-align:center;}
.loading .load {background-color: rgba(0,0,0,0);border:5px solid rgba(0,183,229,0.9);opacity:.9;border-right:5px solid rgba(0,0,0,0);border-left:5px solid rgba(0,0,0,0);border-radius:50px;box-shadow: 0 0 35px rgba(0,183,229,0.9);width:50px;height:50px;margin:0 auto;-webkit-animation:spinPulse 1s infinite linear;}
.loading .load1 {background-color: rgba(0,0,0,0);border:5px solid rgba(0,183,229,0.9);opacity:.9;border-left:5px solid rgba(0,0,0,0);	border-right:5px solid rgba(0,0,0,0);border-radius:50px;box-shadow: 0 0 15px rgba(0,183,229,0.9); width:30px;height:30px;margin:0 auto;position:relative;top:-50px;-webkit-animation:spinoffPulse 1s infinite linear;}


/*分享按钮*/
.zo {zoom:1;overflow:hidden}
.share {margin:15px 0;width:100%;}
.share img {width: 22px!important;height: 22px!important;vertical-align: top;border: 0;}
.btn1 {float:left;width:40%;padding: 8px 0;border: 1px solid #adadab;color: #000000;background-color: #e8e8e8;background-image: linear-gradient(to top, #dbdbdb, #f4f4f4);text-align: center;border-radius: 3px;margin-left:20px;}
.btn2 {float:right;width:40%;margin-right:20px;padding: 8px 0;border: 1px solid #adadab;color: #000000;background-color: #e8e8e8;background-image: linear-gradient(to top, #dbdbdb, #f4f4f4);text-align: center;border-radius: 3px;}

/*返回顶部*/

.gotop {height:35px;position:relative;background:#0064B4;margin:0 auto;}
.gotop a {float:left;font-size:12px;display:block;text-align:center;line-height:35px;}
.gotop a,.gotop a:visited,.gotop a:hover {color:#fff;}

.gotop a.top {width:20%;border-left:1px solid #FFF;}
.gotop a.home {width:79%;}
/*背景变暗*/
#bgshare {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.7);display: none;z-index: 20000;}
#bgshare img {position: fixed;right: 18px;top: 5px;width: 260px!important;height: 180px!important;z-index: 20001;}

@-moz-keyframes spinPulse {
0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7;}
50% { -moz-transform:rotate(145deg); opacity:1; }
100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes spinoffPulse {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg);  }
}
@-webkit-keyframes spinPulse {
0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgba(0,183,229,0.9); }
50% { -webkit-transform:rotate(145deg); opacity:1;}
100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes spinoffPulse {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg); }
}
@-webkit-keyframes move{
0%{-webkit-transform: scale(1.2);opacity:1;}
100%{-webkit-transform: scale(0.7);opacity:0.1;}
}





@media screen and (min-width:360px) and (max-width:360px){
.logo{height: 5.4em;}
.logo:after { top:-3.5em; }
.columnleft li:last-child {padding-bottom: 29%;}
 .brand_content_item {width:85%;    }

}
@media screen and (min-width:320px) and (max-width:320px){
.logo{height: 5em;}
.logo:after { top:-3em; }

.columnleft li:last-child {padding-bottom: 30%;}
 .brand_content_item {width:85%;    }
}

@media screen and (min-width:540px) and (max-width:540px) {
  }
@media screen and (min-width:640px) and (max-width:640px) {

}
@media screen and (min-width:740px) {
    .logo:after {top: -7.5em;}
    .productCate a.tel {padding-bottom:4.3em;}
}