@charset "utf-8";
body.gray-bg{ background:#f2f2f2}
/* font icon */
@font-face {
    font-family: 'iconfont';
    src: url('./fonts/iconfont.eot');
    src: url('./fonts/iconfont.eot?#iefix') format('embedded-opentype'),
    url('./fonts/iconfont.woff') format('woff'),
    url('./fonts/iconfont.ttf') format('truetype'),
    url('./fonts/iconfont.svg#iconfont') format('svg');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    vertical-align: -3px;}
.btn .iconfont{ font-size: 26px;}

/* style1: 1200px */
.wrap{ width:100%; min-width:1200px;}
.area{ width:1200px; margin:0 auto}
.area:after,.news-list li:after{content:"."; display:block; height:0; clear:both; visibility:hidden;}
/* style2: 1000px */
body.w1000 .wrap{ width:100%; min-width:1000px;}
body.w1000 .area{ width: 1000px;}

@media screen and (max-width: 1044px){
    .wrap{ width:100%; min-width:100%; }
    .wrap .area{ width:auto!important; margin:0 auto;}
    .wrap .area img.wimg{ max-width: 100%;}
    body.w1000 .wrap{ width:100%; min-width:100%;}
    body.w1000 .area{ width: 100%;}
}

.hide{ display:none}

/* header */
.wrap-header{ background:rgba(0, 0, 0, .8)}
header .logo{ float:left; line-height:24px; padding:10px 10px 10px 0;}
header .logo img{ width:30px; height:24px;}
header .logo span{ color:#999; margin-left:6px; vertical-align:-2px;}
header .nav-list{ float:right; line-height:46px;}
header .nav-list li{ float:left; color:#999;}
header .nav-list li a{ color:#fff; text-decoration: none; font-size:14px; padding:0 10px; display:inline-block;}
header .nav-list li a:hover{ color: #bbb}
header .nav-list li .li a{ color: #0077bb;}
header .nav-list li a.iconfont-user:hover{border-bottom:none; color:#0077bb;}
header .nav-list li.user-menu, header .nav-list li.login-actions{ float: right; padding:0 10px;}
header .user-menu:hover .dropDown-menu{ display: block}
header .user-menu a{ color:#666;}
header .user-menu .headpic{ width:30px; border-radius:100%; vertical-align: -9px;}
header .user-menu .dropDown-menu{ width:180px; padding:10px 20px;}
header .user-menu .dropDown-menu .li a{ height: 36px; line-height: 36px}
header .user-menu .dropDown-menu .li a:hover{ text-decoration: underline; background: none}
header .user-menu .dropDown-menu .li.triangle{ border-bottom:10px solid  #fff;}
/* subnav */
.wrap-subnav{ padding: 10px 0; background: #fff; border-bottom: 1px solid #ddd;}
.wrap-subnav h3{ font-size:14px; margin-left:6px;}
.wrap-subnav ul{ float: right; margin-right:6px;}
.wrap-subnav ul>li{ float:left;}
.wrap-subnav ul>li a{ margin-left:25px; text-decoration:none}
.wrap-subnav ul>li a.active{color:#0077bb;}
.wrap-subnav ul>li a:hover{ color:#0077bb;}

.wap-nav-more{ display:none; cursor:pointer; padding: 6px 0 0 6px;}
.wap-nav-more i.iconfont{ font-size:34px; line-height:1.1; color: #fff;}
@media screen and (max-width: 769px){
    .wap-nav-more{ display:block; float:left;}
    .mainNav{ display:none; position:fixed; left:0; right:0; top:0; bottom:0; z-index: 1000; background:rgba(0,0,0,.4);}
    .mainNav .nav-list{ float: inherit; width:150px; height:100%; box-sizing:border-box; padding-top:30px;  background:#fff; box-shadow:1px 0 16px #333; position:relative;}
    header .logo{ float: right;}
    header .nav-list li{ float: inherit; width: 100%;text-align: center;}
    header .nav-list li a{ color: #333;}
    header .nav-list li.user-menu, header .nav-list li.login-actions{padding:0; margin-bottom: 30px;}
    header .user-menu .headpic{ width: 100px;}
    header .user-menu .dropDown-menu{ width: 90px;}
    header .user-menu .dropDown-menu .li.triangle{ border-bottom-color: #cdcdcd; left: 42%;}
}

/* footer */
.wrap-footer{ background:#f2f2f2}
.wrap-footer footer{ padding:20px 0;color:#888; text-transform:uppercase; position:relative; border-top: 1px solid #ddd;}
footer a{margin-left: 10px; color:#888;}
footer .strip-icon{ width:100%; position:absolute; left:0; top:-2px;}
footer .strip-icon li{ height:2px; float:left;}
footer .strip-icon li:nth-child(1){ width:3%; background:#0077bb;}
footer .strip-icon li:nth-child(2){ width:3%; background:#0077bb;}
footer .strip-icon li:nth-child(3){ width:3%; background:#bad04b;}
footer .strip-icon li:nth-child(4){ width:6%; background:#6aac57;}
footer .strip-icon li:nth-child(5){ width:3%; background:#edeb50;}
footer .strip-icon li:nth-child(6){ width:3%; background:#fa61ad;}
footer .strip-icon li:nth-child(7){ width:3%; background:#a17895;}
footer .strip-icon li:nth-child(8){ width:6%; background:#c64236;}

@media screen and (max-width: 769px){
    .wrap-footer footer{text-align:center; font-size: 10px;}
}


/* index focus */
/* pc height  */
.swiper-container{ height: 620px;}
.swiper-container .swiper-pagination-bullet{ width: 50px; height: 3px; border-radius: 0}
.swiper-container .swiper-pagination-bullet-active{ background: #0077bb;}

/* wap height */
@media screen and (max-width: 1044px){
    .swiper-container{ height: 540px;}
    .swiper-container .swiper-pagination-bullet{ width: 10px; height: 10px;  border-radius: 10px}
}
@media screen and (max-width: 769px){
    .swiper-container{ height: 300px;}
    .swiper-container .swiper-pagination-bullet{ width: 10px; height: 10px;  border-radius: 10px}
    .swiper-container .swiper-button{ display: none}
}


/* news focus */
/* pc height  */
.news-swiper-container{ height: 460px;}

/* wap height */
@media screen and (max-width: 1044px){
    .news-swiper-container{ height: 420px;}
}
@media screen and (max-width: 769px){
    .news-swiper-container{ height: 240px;}
}

/* index news */
.wrap-n .tab-t{ padding:30px 0 5px 0; line-height: 28px; font-size: 14px;}
.wrap-n .tab-t .more{ float: right; color: #bbb;}
.wrap-n .tab-t .more:hover{ color: #0077bb;}
.wrap-n .news-list{ border-bottom: 1px solid #ddd;}
.wrap-n .news-list li{ float: left; width: 50%; padding: 20px 0;}
.wrap-n .news-list li h2{ font-size: 20px; padding:5px 20px 0 0;}
.wrap-n .news-list li .summary{ padding:10px 20px 0 0;}
.wrap-n .news-list li a{ text-decoration: none;}
.wrap-n .news-list li a:hover{ color:#0077bb;}
.ndate{ float:left; margin-right:24px; width:60px; height:60px; font-size:14px; padding:24px; text-align:center; background:#f2f2f2; color: #666;}
.ndate h5{ font-size:30px; line-height: 1; margin-bottom: 4px; font-weight:600; color:#0077bb; }

@media screen and (max-width: 1044px){
    .wrap-n .news-list{ padding:0 10px 20px 10px;}
    .wrap-n .news-list li{ float:none; width: 100%;}
    .wrap-n .news-list li h2{ padding: 0}
    .wrap-n .news-list li .summary{ display: none;}
    .wrap-n .ndate{ padding: 6px; font-size: 12px;}
    .wrap-n .ndate h5{ font-size: 20px; margin-top:10px;}
}


/* index goods1 */
.wrap-magic1{ margin-top:40px;}
.wrap-magic1 .ad{ width:220px; height:540px; margin-right:25px; float:left;}
.wrap-magic1 .ad img{width:220px; height:540px; }
.wrap-magic1 li{ width:245px; height:270px; float:left; padding:20px; position:relative; box-sizing:border-box}
.wrap-magic1 li a{ color:#333; font-size:14px;}
.wrap-magic1 li a:hover{ text-decoration:none; }
.wrap-magic1 li a:hover .title{color: red;}
.wrap-magic1 li:nth-child(1){ border-bottom:1px solid #e9e9e9;}
.wrap-magic1 li:nth-child(2){ width:465px; height:540px; border-right:1px solid #e9e9e9; border-left:1px solid #e9e9e9;}
.wrap-magic1 li:nth-child(2) a{ font-size:18px;}
.wrap-magic1 li:nth-child(2) img{width:350px; height:350px}
.wrap-magic1 li:nth-child(3){ border-bottom:1px solid #e9e9e9;}
.wrap-magic1 li:nth-child(5){ margin:-270px 0 0 245px;}
.wrap-magic1 li:nth-child(6){ display:none;}
.wrap-magic1 .price{ margin-top:15px; font-family:helvetica,"Microsoft YaHei";}
.wrap-magic1 .price span{ font-weight:700;}
.wrap-magic1 .img{ position:absolute; bottom:15px; right:15px; width:138px; height:138px;transition: all .3s ease-out;}
.wrap-magic1 a:hover .img{right: 24px;}

@media screen and (max-width: 1044px) and (min-width: 769px){
    .wrap-magic1 { width: 1044px;}
    .wrap-magic1 .ad{ display:none}
    .wrap-magic1 li{width: 278px;}
    .wrap-magic1 li:nth-child(5){ margin:-270px 0 0 0;}
}
@media screen and (max-width: 769px){
    .wrap-magic1 .ad{ display:none}
    .wrap-magic1 li{width:50%}
    .wrap-magic1 li:nth-child(1){ border-right:1px solid #e9e9e9;}
    .wrap-magic1 li:nth-child(2){width:50%; height:270px; border:none; border-bottom:1px solid #e9e9e9;}
    .wrap-magic1 li:nth-child(2) a{ font-size:14px;}
    .wrap-magic1 li:nth-child(2) img{width:138px; height:138px;}
    .wrap-magic1 li:nth-child(3){ border-right:1px solid #e9e9e9;}
    .wrap-magic1 li:nth-child(4){ border-bottom:1px solid #e9e9e9;}
    .wrap-magic1 li:nth-child(5){ border-right:1px solid #e9e9e9; margin: 0}
    .wrap-magic1 li:nth-child(6){ display:inline-block;}
}

/* index goods2 */
.wrap-magic2{ margin-top:50px;}
.wrap-magic2 li{float:left; width: 460px; text-align: right; height: 170px; margin:0 30px 30px 0; position: relative; overflow: hidden;}
.wrap-magic2 li .band-img{ height: 170px; transition: transform .3s ease-in; margin-right: -10px;}
.wrap-magic2 li .band-info{ float:left; position: absolute; left: 0; top: 0; z-index: 1; width: 35%; height: 170px; text-align: left; padding: 30px 20px 0 20px; box-sizing: border-box; background: #66B687; color: #fff; font-size: 14px;}
.wrap-magic2 li .band-info h3{ line-height: 40px; font-size: 22px; text-align: center; border-top: 2px solid #fff; border-bottom: 2px solid #fff; margin-bottom: 10px;}
.wrap-magic2 li:nth-child(2),.wrap-magic2 li:nth-child(4){ margin-right:0}
.wrap-magic2 li:nth-child(2) .band-info{ background: #27676f;}
.wrap-magic2 li:nth-child(3) .band-info{ background: #734d38;}
.wrap-magic2 li:nth-child(4) .band-info{ background: #5d526b;}
.wrap-magic2 li:nth-child(1){background:#c5d9e0;}
.wrap-magic2 li:nth-child(2){background:#dde9e2;}
.wrap-magic2 li:nth-child(3){background:#d2c1b9;}
.wrap-magic2 li:nth-child(4){background:#afabb9;}
.wrap-magic2 li:hover .band-img{ transform: translateX(-10px);}
@media screen and (max-width: 1044px) and (min-width: 769px){
    .wrap-magic2{ width: 1044px;}
    .wrap-magic2 .ad{ display: none;}
    .wrap-magic2  li{ width: 50%; margin-right: 0}
}

@media screen and (max-width: 769px){
    .wrap-magic2 .ad{ display: none;}
    .wrap-magic2  li{ width: 100%; float: left; margin-right: 0}
}

/* -- login page -- */
.wrap-login{ padding:40px 0 100px 0;}
.wrap-login .area{ background:#fff; position:relative; height:600px; box-shadow:rgba(0,0,0,.3) 0 1px 3px}
.wrap-login .show{ height:100%;text-align:center; margin-right:330px; border-right:1px solid #ddd;}
.wrap-login .show img{ margin-top:180px;}
.wrap-login .content .tit{ border-bottom:1px solid #ddd; padding:15px 40px;}
.wrap-login .box{ width:330px; position:absolute; right:0; top:0;}
.wrap-login .group .hd{border-top:1px solid #ddd; border-bottom:1px solid #ddd; margin-top:-1px; cursor:pointer; padding:10px 0 10px 25px}
.wrap-login .group .hd h4{ line-height: 32px; font-weight: 600; color:#999;}
.wrap-login .group .items{ height:0; overflow:hidden; transition:all .4s ease-in-out;}
.wrap-login .group.active .items{ height: 496px;}
.wrap-login .group.active .hd{ cursor:default;}
.wrap-login .group.active .hd h4{ color:#0077bb;}
.wrap-login .item{ padding:20px 25px 0 0; margin-left: 25px; position: relative; clear: both;}
.wrap-login .item.pt-10{ padding-top: 10px}
.wrap-login .item .input-text{ font-size:14px; height:41px; padding:8px; line-height:1.42857; border-radius:3px;}
.wrap-login .item.item-x .input-text{ float:left; width:110px;}
.wrap-login .item.item-x img{ width:100px; height:39px; margin-left:10px; display:inline-block; cursor: pointer;}
.wrap-login .item .login_submit{ margin-top:10px}

/* forget page */
.wrap-forget .box{ position: inherit; width: 330px; margin: 0 auto}

@media screen and (max-width: 769px){
    .wrap-login{padding:20px 10px 50px 10px; box-sizing: border-box;}
    .wrap-login .area{ height:480px;}
    .wrap-login .show{ display:none}
    .wrap-login .box{ width:100%;}
    .wrap-login .group.active .items{ height:calc(480px - 104px)}
}

/* help page */
.qa-title-list{padding:10px 30px; border-bottom:1px solid #ddd;}
.qa-title-list li{ position:relative; padding-left:10px;}
.qa-title-list li:before{ content: "";position: absolute;width: 3px;height: 3px;background-color: #4285f4;left: 0;top: 10px;}
.qa-title-list li a{ color:#0077bb}
.qa-answer-list{ padding:10px 30px;}
.qa-answer-list strong,.qa-answer-list .answer{ position:relative; padding-left:30px;}
.qa-answer-list strong{ padding-bottom:10px; display:block;}
.qa-answer-list strong:before{content: "Q:"; position:absolute;top:0; left:0; font-weight:400}
.qa-answer-list .answer:before{content: "A:"; position:absolute;top:0; left:0; font-weight:400}

/* account page */
.wrap-account{ padding:40px 0 100px 0}
.wrap-account .area{ position:relative;}
.wrap-account .side{ position:absolute; left:0; top:0; width:200px; border-right:1px solid #ddd;}
.wrap-account .side .uimg{ width:180px; height:180px; padding:10px; background:#fff;}
.wrap-account .side .uimg img{ width:100%; height:100%; border-radius: 100%;}
.wrap-account .menu-list{ padding:10px 0; margin-top:10px; background:#fff;}
.wrap-account .menu-list li{ line-height:34px;}
.wrap-account .menu-list span{ display:block; font-size:14px; color:#999; padding-left:38px;}
.wrap-account .menu-list span i.iconfont{ margin-right:5px;}
.wrap-account .menu-list a{ display:block; font-size:14px; color: #333; padding-left:60px; text-decoration:none;}
.wrap-account .menu-list a.active{ color:#fff; background:#666;}
.wrap-account .menu-list a:hover{ background:#eee;}
.wrap-account .menu-list a.active:hover{background:#666;}
.wrap-account .main{ width:100%;}
.wrap-account .content{ margin-left:210px;}
.wrap-account .form{  display:none; min-height:450px; padding:40px 0 80px 0; background:#fff;}
.wrap-account .form.show{ display:block;}
.wrap-account .form .item{ padding:20px 0 0 0; position: relative}
.wrap-account .form .item-desc{ padding:4px 0 0 175px; color:#999; font-size:13px;}
.wrap-account .form .item .valid_message{ position: inherit;}
.wrap-account .form .input-text {width: 320px;color: #666;display: inline-block; padding: 4px 12px;}
.wrap-account .form .inline-block{ display: inline-block}
.wrap-account .form label.th {width: 160px;padding-right: 15px;line-height:38px; font-size: 14px;text-align: right;display: inline-block;}
.wrap-account .form label.th span{ color: #ff0000; vertical-align: middle; margin-right: 4px;}
.wrap-account .form label.radio{ display:inline-block; margin-right:20px;}
.wrap-account .form .item .select{ width: 80px; display: inline-block; margin-right: 10px;}
/*.wrap-account .form .item .togglePassword{ position: absolute; top:23px;left:450px;}*/
.wrap-account .form .submit {height: 34px;padding: 4px 14px;font-size: 14px; background: #428bca;color: white;margin-top: 20px;cursor: pointer;border: 1px solid #357ebd;}

/* account upload img */
.wrap-account .cropperContainer{width:504px; margin:20px 0 0 110px}
.wrap-account .canvas-box{position:relative;height:302px;}
.wrap-account .cropper-hd{ padding-bottom:20px;}
.wrap-account .cropper-bd{ padding-top:20px;}
.wrap-account #cropper{ position:absolute; left:0; top:0; border:1px solid #ddd;}
.wrap-account .previewContainer{ position:absolute; left:320px;}
.wrap-account .previewContainer .text-c{ font-size:12px; padding:4px 0 20px 0; color:#666;}
.wrap-account .preview{ box-shadow:0 0px 10px 2px rgba(0,0,0,.1);border:1px solid #ddd; border-radius:100%; overflow:hidden;}
.wrap-account .p180-box{ width:180px; height:180px; }
.wrap-account .p50-box{ width:50px; height:50px; margin:0 auto;}

@media screen and (max-width: 769px){
    .wrap-account .side{ width: 100%; position: inherit; padding: 0 20px; box-sizing: border-box;}
    .wrap-account .side .uimg{ width: 120px; height: 120px; margin: 0 auto; background: none;}
    .wrap-account .content{margin:20px 0 0 0; padding: 0 20px;}
    .wrap-account .form label.th{ text-align: left; display: block;}
    .wrap-account .form .item{ padding:0 20px}
    .wrap-account .form .item-desc{padding:0 0 0 20px;}
    .wrap-account .form .input-text{ width:auto;}
    .wrap-account .form .submit{width: 100%;}

    .wrap-account .cropperContainer{ width: auto; padding-top: 300px; margin: 0;}
    .wrap-account .cropper-hd{ text-align: center;}
    .wrap-account .cropper-bd{ text-align: center;}
    .wrap-account .previewContainer{ top: -375px; left: 50%; margin-left: -90px;}
    .wrap-account #cropper{ top: 50%; left: 50%; margin: -150px 0 0 -150px;}
}


/* -- about page -- */
.about-us-bg{ height: 210px; background:url(../img/about/about-us.jpg) no-repeat center center;}
.about-disclaimer-bg{ height: 210px; background:url(../img/about/about-disclaimer.jpg) no-repeat center center;}
.about-contact-bg{ height: 210px; background:url(../img/about/about-contactUs.jpg) no-repeat center center;}
.about-business-bg{ height: 210px; background:url(../img/about/about-businessCooperation.jpg) no-repeat center center;}
.wrap-about .area{ width: 1000px;}
.wrap-about .content{ margin: 40px 0 100px 0; min-height: 220px; padding:40px 0; background:#fff;}
.wrap-about .content .disclaimer { padding:0 50px}
.wrap-about .content p{ line-height:2;}
.wrap-about .content .inner{ padding:0 50px; font-size: 16px;}
.wrap-about .content .inner span.lp{ margin-right:10px; display: inline-block; text-align: right; color: #0077bb;}
.wrap-about .disclaimer{ padding: 20px 0 40px 0;}
.wrap-about .disclaimer h3{ font-size:14px; padding-left:30px; line-height:34px; font-weight:700; margin:25px 0 5px 0; background:#f2f2f2; box-shadow:rgba(0,0,0,.2) 0px 1px 0px inset;}
.wrap-about .disclaimer h3:nth-child(1){ margin-top:0; text-align: center; font-size: 16px;}
.wrap-about .disclaimer p{ text-indent:2em;}
.wrap-about .disclaimer .happen{ padding-left:24px;}
.wrap-about .disclaimer .happen p{ color:#999;}
.wrap-about .protocal{ padding-top: 50px;}
.wrap-about .niceScroll{height:330px; padding: 0 50px; margin-top: 50px; overflow: hidden}

@media screen and (max-width: 769px){
    .about_bg{ background-position: 66%;}
    .wrap-about{ padding:0 10px; box-sizing: border-box}
    .wrap-about .content{ margin:25px 0 50px 0; min-height:250px;}
    .wrap-about .content .show{padding-bottom:20px;}
    .wrap-about .content .inner{padding:0 20px;}
    .wrap-about .niceScroll{ padding:0 20px;}
}

/* -- tech page -- */
.wrap-tech{ padding:40px 0; min-height: 650px;}
.wrap-tech .area{ width: 1000px;}
.tech-list{ float: left; width:640px;}
.tech-list li{ background: #fff; margin-bottom: 40px; border-radius: 2px; box-shadow:0 1px 6px rgba(1,1,1,.2); -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in;}
.tech-list li:hover{
    -webkit-box-shadow: 0 0 30px rgba(0,0,0,0.1); box-shadow: 0 0 30px rgba(0,0,0,0.15);
    -webkit-transform: translate3d(0, 0px, -2px); transform: translate3d(0, 1px, -2px);
}
.tech-list .dt{padding: 10px 20px; line-height: 40px;}
.tech-list .dt .author img{ float: left; width:40px; height: 40px; margin-right: 15px; border-radius: 40px;}
.tech-list .dt .author h4{ font-size:16px; font-weight: 600; display: inline;}
.tech-list .dt .author span{ color: #888; margin-left: 10px;}
.tech-list .dd{ padding: 0 20px 10px  20px;}
.tech-list .dd a:hover{ text-decoration: none;}
.tech-list .dd h2{ font-size:18px; margin-bottom: 10px;}
.tech-list .dd .summary{ color:#888; font-size: 14px; text-indent: 2em;}
.tech-list .im{ position: relative; min-height: 45px;}
.tech-list .im img{ width:100%; height: 220px; background-size:cover; background-position: center center; background-repeat: no-repeat;}
.tech-list .im .option{ position: absolute; bottom: 0; width: 100%; padding: 10px 0; background: rgba(1,1,1,.4)}
.tech-list .im .meta{ padding-right: 20px;}
.tech-list .im .meta span{margin-left: 20px; color: #fff;}
.tech-list .im .meta i.iconfont{vertical-align: -2px; margin-right: 4px;color: #fff }
.tech-list .im .link-btn-a{ padding-left: 20px;}
.tech-list .im .link-btn-a a{ color: #fff; border: 1px solid #fff;}
.tech-list .im .link-btn-a a:hover{ background:rgba(54, 149, 224, 0.4); border:1px solid rgba(54, 149, 224, 1)}
.tech-list .bm{padding:10px 20px}
.tech-list .bm i.iconfont{ float: right;}
.tech-list .pages{margin-top:100px ;}
.link-btn-a a{ color: #0077bb;  padding:2px 12px; margin-right:10px; text-decoration:none; border:1px solid rgba(54, 149, 224, 0.55); border-radius:5px; display:inline-block;}
.link-btn-a a:hover{ background:rgba(54, 149, 224, 0.1); border:1px solid rgba(54, 149, 224, 1)}
.tech-right{ float: right; width: 320px;}
.tech-module{ margin-bottom: 20px; background: #fff;}
.tech-module h4{ padding:20px 0; font-weight: 600; border-bottom: 1px solid #e7ecee;}
.tech-module h4 p{height: 20px;line-height: 20px; font-size: 16px; border-left: 3px solid #333; padding-left: 20px;}
.tech-module .md{ padding: 20px;}

.module-tag .link-btn-a a{ padding: 5px; margin: 5px 5px 5px 0}
.module-recommend li{ padding: 5px 0;}
.module-recommend li i.iconfont{ color: #0077bb}
.module-recommend li a{ font-size:14px;}

@media screen and (max-width: 1044px) and (min-width: 769px){
    .wrap-tech .area{ width: auto;  padding: 0 10px; box-sizing: border-box;}
    .module-recommend li .report-time{ float: right; padding: 0;}
    .tech-list{ float: none; margin: 0 auto}
    .tech-right{ width: 100%;}
}
@media screen and (max-width: 769px){
    .wrap-tech .area{ width: auto;  padding: 0 10px; box-sizing: border-box;}
    .module-recommend li .report-time{ float: right; padding: 0;}
    .tech-list{width:100%;}
    .tech-list .dm img{height: 180px;}
    .tech-list .dd h2{ font-weight:300;}
    .tech-list .dd .summary{ display:none;}
    .tech-right{ width: 100%;}
}

/* tech detail page */
.wrap-tech .article{ width: 600px; padding:40px 20px; background: #fff; margin-bottom: 20px;}
.wrap-tech .article h1{ font-size:30px; font-weight: 600;  line-height:1.5em;}
.wrap-tech .article-bar{ color:#999; padding:50px 0 30px 0;}
.wrap-tech .article-bar span{ line-height:14px; display: inline-block; font-size: 14px; margin-right: 10px;}
.wrap-tech .article-bar span i{ margin:0 5px; font-size: 20px; color: #bbb; vertical-align:-2px;}
.wrap-tech .article-bar .author{ color: #0077bb; text-transform:uppercase; border-right: 1px solid #ddd;padding-right: 18px;}
.wrap-tech .article-tag a{ padding:2px 12px; margin:0 10px 20px 0; text-decoration:none; background:#f2f2f2; border-radius:10px; display:inline-block;}
.wrap-tech .article-tag a:hover{ color:#fff; background:#0077bb;}
.wrap-tech .article-intro{ border:1px solid #ddd; padding:25px; font-size:14px; position:relative;}
.wrap-tech .article-intro .decoration{ position:absolute; left:-3px; top:50%; width:6px; height:40px; background-color:#666; margin-top:-20px; overflow:hidden;}
.wrap-tech .article-content{ margin-top:25px; color:#333; font-size:16px;}
.wrap-tech .article-content p{ min-height: 1em; clear: both; word-wrap:break-word;}
.wrap-tech .article-content img{max-width:100%!important; box-sizing: border-box; margin: 10px 0;}
.wrap-tech .article-operate{ padding: 20px; text-align: center;}
.wrap-tech .article-operate .btn-like{ padding: 15px 10px; background:#fff;  cursor: pointer; font-size: 18px; color: #0077bb; border-radius: 40px; border: 0; border: 1px solid #0077bb;}
.wrap-tech .article-operate .btn-like i{ display: inline-block; padding: 0 5px 0 15px; border-radius: 100%; color: #0077bb; font-size: 22px;}
.wrap-tech .article-operate .btn-like p{ display: inline-block;  margin-left: 16px; padding: 0 15px; border-left: 1px solid #0077bb;}
.wrap-tech .article-operate .btn-like:hover,.wrap-tech .article-operate .btn-like.disabled{ background:rgba(54, 149, 224, 0.1);}
.wrap-tech .article-copyright{ padding:40px 0; color:#888;}

.animat-img{ width:200px; height:200px; overflow:hidden;}
.animat-img img{ width:100%; height:100%; max-width:100%; max-height:100%; -webkit-transition: all .5s ease-out; transition: all .5s ease-out}
.animat-img img:hover{-webkit-transform: matrix(1.04,0,0,1.04,0,0); transform: matrix(1.04,0,0,1.04,0,0)}
@media screen and (max-width: 1044px){
    .wrap-tech .article{ width: auto;}
}

/* -- goods -- step1 list page */
.wrap-goods .filter-bar a.filter{ margin:0 13px 0 5px}
.wrap-goods .filter-bar a.active{ color:#ee3531}
.wrap-goods .goods-list{ margin-top:20px;}
.wrap-goods .goods-list li{ width:25%;background:#fff; padding:15px; border:1px solid #e4e4e4; margin:0 0 -1px -1px; box-sizing:border-box;  float:left}
.wrap-goods .goods-list li a:hover{ text-decoration:none;}
.wrap-goods .goods-list .animat-img{ width: 198px; height: 198px; margin: 0 auto}
.wrap-goods .goods-list .title{ font-size:14px; padding-top:20px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.wrap-goods .goods-list .bd{ padding-top:10px; line-height:15px;}
.wrap-goods .goods-list .star{height: 15px;width: 95px;display: inline-block;font-size: 12px;color: #999}
.wrap-goods .goods-list .star.star-5 {background:url(../img/goods/star.png) no-repeat 0 0}
.wrap-goods .goods-list .star.star-4 {background:url(../img/goods/star.png) no-repeat 0 -15px}
.wrap-goods .goods-list .star.star-3 {background:url(../img/goods/star.png) no-repeat 0 -30px}
.wrap-goods .goods-list .star.star-2 {background:url(../img/goods/star.png) no-repeat 0 -45px}
.wrap-goods .goods-list .star.star-1 {background:url(../img/goods/star.png) no-repeat 0 -60px}
.wrap-goods .goods-list .commit{ vertical-align:2px;}
.wrap-goods .goods-list .price{ float:right; font-family:helvetica,"Microsoft YaHei";}
.wrap-goods .goods-list .price span{ font-weight:700; font-family:Verdana;}

@media screen and (max-width: 769px){
    .wrap-goods .goods-list li{ width:50%;}
    .wrap-goods .goods-list .animat-img{width: 128px; height: 128px;}
}

/* goods step2 detail page */
.wrap-goods .detail-img{ float:left; width:470px; min-height:470px;}
.wrap-goods .detail-img img{ width:100%;}
.wrap-goods .detail{ float:right; width:470px;}
.wrap-goods .detail .title{ font-size:30px;}
.wrap-goods .detail .star{height: 15px;width: 95px;display: inline-block;font-size: 12px;color: #999}
.wrap-goods .detail .star.star-5 {background:url(../img/goods/star.png) no-repeat 0 0}
.wrap-goods .detail .star.star-4 {background:url(../img/goods/star.png) no-repeat 0 -15px}
.wrap-goods .detail .star.star-3 {background:url(../img/goods/star.png) no-repeat 0 -30px}
.wrap-goods .detail .star.star-2 {background:url(../img/goods/star.png) no-repeat 0 -45px}
.wrap-goods .detail .star.star-1 {background:url(../img/goods/star.png) no-repeat 0 -60px}
.wrap-goods .detail .commit{ display:inline-block; vertical-align:2px; margin-left:8px;}
.wrap-goods .detail .commit .count{ margin:0 3px;}
.wrap-goods .detail .tip{ padding:10px 0 30px 0}
.wrap-goods .detail .item{ padding-top:20px;}
.wrap-goods .detail .label{ float:left; width:70px; height:30px; line-height:30px; padding: 0; overflow:hidden;}
.wrap-goods .detail .group{ float:left; line-height:30px;}
.wrap-goods .detail .price{ font-size:18px; color:#EE3533; font-family:helvetica,"Microsoft YaHei";}
.wrap-goods .detail .price span{ font-weight:700; font-family:Verdana;}
.wrap-goods .detail .unit a{ float:left; padding:0 10px; margin:0 6px 6px 0; border:2px solid #666;}
.wrap-goods .detail .unit a:hover{ text-decoration:none;border:2px solid #be0106; color: #be0106;}
.wrap-goods .detail .unit a.active{border:2px solid #be0106;}
.wrap-goods .detail .btn-box{ padding-top:50px;}
.wrap-goods .detail .btn{ width:140px; height:45px; border-radius: 2px; font-size:16px; cursor:pointer;}
.wrap-goods .detail .btn-buy{ background:#EE3533; color: #fff; border:1px solid #EE3533;}
.wrap-goods .detail .btn-buy:hover{ background:#CE2C29;}
.wrap-goods .detail .btn-cart{ color:#EE3533; background:#ffeded; border:1px solid #EE3533; margin-left:20px;}
.wrap-goods .detail .btn-cart:hover{ background:#FBDBDB;}
.wrap-goods .detail-tab{width:100%; background:#F2F2F2;}
.wrap-goods .tabBar {height:50px; text-align:center;}
.wrap-goods .tabBar span { width:150px;height:50px;line-height:50px; cursor: pointer; display:inline-block; font-size:16px;}
.wrap-goods .tabBar span.current{ background:#ececec; border-bottom:2px solid #4f7ddb;}
.wrap-goods .area{ padding:40px 0;}
.wrap-goods .tabCon {display:none; text-align: center;}
.wrap-goods .tabCon img{ max-width:1200px;}
.num-amount{ display:inline-block; vertical-align: middle;  border:1px solid #ccc; }
.num-amount span{ float:left; width:30px; height:30px; line-height:30px; font-size:16px; background:#f5f5f5;  text-align:center; cursor:pointer;}
.num-amount span.disabled{ color:#ccc; cursor:default}
.num-amount .num-increase{border-right:1px solid #ccc; }
.num-amount .num-decrease{ border-left: 1px solid #ccc;}
.num-amount .num-input{ float:left; width:40px; height:30px; line-height:30px; color: #333; border-radius: 0; border:0; text-align:center; overflow:hidden;}

@media screen and (max-width: 769px){
    .wrap-goods .area{ padding:20px 10px;}
    .wrap-goods .detail-img{ float:none; width: 100%; min-height:auto;}
    .wrap-goods .detail{ float:none; width: 100%; padding: 0 10px; box-sizing: border-box;}
    .wrap-goods .detail .btn-box{ text-align: center}
    .wrap-goods .tabCon img{ max-width:100%;}
    .wrap-goods .tabBar span{width:25%;}
}

/* Cart step3 page */
.wrap-cart{ margin:40px 0 200px 0;}

.cart-table{ display: table; width: 100%; border: 1px solid #ddd; border-top: 0;}
.cart-table .cart-head{ display:table-header-group; text-align:center; font-size: 14px;  background: #616161; color: #fff; font-size: 16px;}
.cart-table .cart-head ul{display: table-row; }
.cart-table .cart-head ul>li{ display: table-cell; width: 50%; box-sizing: border-box; height: 50px; line-height: 50px;}
.cart-table .cart-head ul>li:not(:first-child){ width: 15%}
.cart-table .cart-body{ display:table-row-group;}
.cart-table .cart-body li{ display: table-row;}
.cart-table .cart-body .cart-item{ display:table-cell; padding: 20px 0; border-top: 1px solid #ddd;; vertical-align: middle; text-align: center;}
.cart-table .cart-body .cart-item:nth-child(1){ text-align: left;}
.cart-foot{ padding: 10px 0; font-size: 14px;  height: 50px; line-height: 50px;}
.cart-foot .gopay-btn{ float: right;  width: 180px; height: 50px; font-size:16px; background:#EE3533; color:#fff; border:1px solid #EE3533; margin-left: 20px; letter-spacing:.25em;}
.cart-foot .gopay-btn:hover{ background:#d8454c;}
.cart-foot .total-price{ color:#bf363d}
.cart-table .item-price-total{color: #d8454c;}
.cart-table .goods-msg img.img{ width:50px; height:50px; float:left; margin-right:10px}
.cart-table .goods-msg .title{line-height: normal}
.cart-table .goods-msg .title a{ color:#333; font-size:14px; }
.cart-table .goods-msg .title p{ color:#999; padding-top: 2px; font-size: 12px;}

.check-btn{float: left;  display:block; width:16px; height:16px;  line-height: normal; margin:15px 30px; border: 1px solid #ccc;border-radius: 50%; }
.check-btn .icon-ok {display: none;width: 100%;height: 100%;fill: #fff;
    -ms-transform: scale(0.8);
    transform: scale(0.8); }
.check-btn.checked {background: #EE7A23;border: 1px solid #EE7A23;}
.check-btn.checked .icon-ok {display: inline-block;}
.icon-btn {display: inline-block;width: 16px;height: 20px; }
.icon-btn:hover .icon{ fill: #666;}
.icon-btn .icon-del {width: 100%;height: 100%;fill: #999; }
.cart-title {position: relative;margin:40px 0;text-align: left; }
.cart-title span {position: relative;padding-right:1em;background-color: #fff; font-family: "moderat", sans-serif;font-weight: bold;font-size: 20px; z-index: 1; }
.cart-title:before {position: absolute; top: 50%;left: 0;content: "";width: 100%;height: 1px;background: #ddd; z-index: 0; }
.cart-title .back-cart{ position: absolute; right: 0; padding-left: 20px; line-height: 32px; font-family:'serif'; background: #fff;}

@media screen and (max-width: 769px){
    .check-btn{ margin: 15px; }
    .cart-table{background: #f0f0f0;}
    .cart-table .cart-head{ display: none; }
    .cart-table .cart-body .cart-item{ display: block; padding: 10px 0; border-top: 1px solid #f0f0f0;}
    .cart-table .cart-body li{ display: block; padding: 0 10px; background: #fff; margin-bottom: 10px;}
    .cart-foot{padding: 0 10px;}
    .cart-foot .f-r{float: none; text-align: center;}
    .cart-foot .gopay-btn{float: none; width: 100%; margin: 10px 0; }
    .cart-title{ text-align: center;}
    .cart-title span{ padding: 0 1em;}
}


/* order step4 page */
.wrap-order{  margin:40px 0 200px 0;}
.wrap-order .cart-table .goods-msg{ margin-left: 30px;}
.wrap-order .cart-title{ margin: 40px 0 20px 0}

/* 收货地址 */
.addr-list li {position: relative;float: left;width: 23.5%;height: 162px;box-sizing: border-box;margin: 10px 2% 10px 0;padding: 20px 20px 40px 20px;background: #fff;border: 2px solid #e9e9e9;overflow: hidden;cursor: pointer; }
.addr-list li dt { margin-bottom: 10px; font-size: 18px; }
.addr-list li dd { margin-bottom: 6px; line-height: 20px; }
.addr-list li .address { height: 40px; overflow: hidden; }
.addr-list li .tel { color: #605F5F; }
.addr-list li .addr-opration { position: absolute; }
.addr-list li .addr-opration .icon { width: 100%;height: 100%; }
.addr-list li .addr-opration:hover .icon { fill: #EE7A23; }
.addr-list li .addr-edit { display: none;top: 20px;right: 20px;width: 20px;height: 20px; }
.addr-list li .addr-del { display: none;bottom: 20px;right: 20px;width: 20px;height: 20px; }
.addr-list li .addr-set-default, .addr-list li .addr-default { bottom: 15px;left: 20px; color: #EE7A23; }
.addr-list li .addr-set-default {display: none;}
.addr-list li:nth-child(4n) { margin-right: 0; }
.addr-list li:hover { border-color: #EE7A23; }
.addr-list li.addr-new { color: #333;text-align: center; }
.addr-list li.addr-new .add-new-inner { padding-top: 20px; }
.addr-list li.addr-new .add-new-inner .icon-add { display: inline-block;width: 50px; height: 50px; }
.addr-list li.addr-new .add-new-inner .icon-add .icon-add { width: 50px; height: 50px;fill: #605F5F; }
.addr-list li.addr-new .add-new-inner p { margin-top: 10px; }
.addr-list li.check { border-color: #EE7A23; border-width: 2px; }
.addr-list li.check .addr-opration { display: block; }
.md-input{padding-top: 15px;}
.md-input label{ float: left; width: 20%; padding-right: 10px; box-sizing: border-box;  line-height: 31px; text-align: right;}
.md-input .el-input{ float: left; width: 80%; }
.md-input .el-input .input-text{ height: 36px; padding: 4px 10px; border: 1px solid #bbb;}
.addr-more { margin-top: 20px; text-align: center; }

@media screen and (max-width: 769px){
    .wrap-order .md-panel{ width: 350px;}
    .wrap-order .md-panel .panel-header{padding-top: 25px;}
    .wrap-order .md-panel .panel-body{padding: 0 25px;}
    .wrap-order .md-panel .panel-footer{ padding:30px 25px;}
    .wrap-order .md-input{padding-top: 5px;}
    .wrap-order .md-input label{ width: 80%; text-align: left;}
    .wrap-order .md-input .el-input{width: 100%;}
    .addr-list{padding: 0 10px}
    .addr-list li{width: 100%; margin: 5px 0;}
    .wrap-order .summary{width: 100%;}
    .wrap-order .order-btn{width: 100%;}
}

/* order 发票信息 */
.wrap-order .invoice{ padding:6px 18px; background:#f6f6f6; border:1px solid #e9e9e9;}
.wrap-order .invoice span{ margin-right:24px;}
.wrap-order .invoice .invoice-btn{ color:#333; font-size:12px; border:1px solid #999; vertical-align:1px;}

/* order 优惠码/优惠券 */
.wrap-order .coupon{ border-bottom:1px solid #ddd;}
.wrap-order .coupon .title{ padding:15px 0;}
.wrap-order .coupon .coupon-btn{ width:20px; height:20px; line-height:20px; display:inline-block; margin-right:6px; border:1px solid #ddd; text-align:center; background:#fff; font-weight:700; cursor:pointer; font-size:14px; border-radius:3px;}
.wrap-order .coupon .coupon-box{ display:none; height:0}
.wrap-order .coupon .ticket .no-coupon{ font-size:14px;}
.wrap-order .coupon .coupon-button{ height:30px; border:1px solid #999; background-color:#fff; color:#333; cursor:pointer; padding:0 10px; font-weight:700;}
.wrap-order .coupon .code{ margin-top:30px;}
.wrap-order .coupon .code label{ float:left; line-height:30px;}
.wrap-order .coupon .code-group{ height:70px; display:inline-block}
.wrap-order .coupon .code-input{ display:inline-block; width:200px; height:28px; padding:0 10px; border:1px solid #ddd;}
.wrap-order .coupon .code-sumbit{display:inline-block;}
.wrap-order .coupon .code-tip{ line-height:30px; color:#ee3531; padding-left: 10px;}

/* order 商品信息(结算) */
.wrap-order .summary{ float:right; margin-top:10px; text-align: right;}
.wrap-order .summary .s-item span{ margin-right:40px;}
.wrap-order .summary .s-item span em{ color: #EE3533; margin: 0 2px;}
.wrap-order .summary .s-item .figure{ float: right; min-width: 120px; font-family: helvetica,"Microsoft YaHei";}
.wrap-order .summary .s-item .figure em{font-weight: 600; margin-left: 2px;}
.wrap-order .summary .s-item .c-red{color:#EE3533}
.wrap-order .summary .s-item.s-price{ line-height: 50px;}
.wrap-order .summary .s-item.s-price .figure{ font-size:24px;}
.wrap-order .summary .s-item.s-price .figure em{ font-weight: 300;}
.wrap-order .order-btn{ width:180px; height:50px; font-size:16px; color: #fff; margin-top:20px; border:1px solid #EE3533; background-color:#EE3533; letter-spacing:.1em;}
.wrap-order .order-btn:hover{ background-color:#d8454c;}


/* 合格的 */
.wrap-regular{background:rgba(0, 0, 0, .8); margin-bottom: 100px;}
.wrap-regular .regular-list li{ float:left; width:25%; line-height:80px; font-size:16px; color:#fff;  }
.wrap-regular .regular-list li i.iconfont{ font-size:35px; vertical-align: top; margin:0 10px 0 50px; color: #fff;}

@media screen and (max-width: 769px){
    .wrap-regular .regular-list li{ width:50%; }
    .wrap-regular .regular-list li i.iconfont{ margin-left:25px;}
}

/* module */
/* index page */
.wrap-notification{ background:#333; line-height:75px; color:#fff;font-size:14px; margin-top:40px;}
.wrap-notification a{ color:#0077bb}

.wrap-circle{padding: 80px 0; box-sizing:border-box;font-size:24px; margin-bottom: 40px; background-image: radial-gradient(circle farthest-side at center bottom, #fff, #fbfbfb 125%); }
.wrap-circle-bg1{ background-image: radial-gradient(circle farthest-side at center bottom, #3FBAEF, #2F71E8 125%); }

@media screen and (max-width: 769px){
    .wrap-circle{padding:20px 0;}
    .wrap-circle a.btn-link{padding:5px 30px; margin-top:10px;}
}

/* 面板-遮罩 */
.md-overlay{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 500; background: rgba(1,1,1,.5);}

/* 面板-内容 */
.md-panel{ width: 550px; position:fixed; top: 50%; left: 50%; z-index: 510; -webkit-transform:translate(-50%,-50%); transform: translate(-50%,-50%); visibility: hidden; }
.md-panel .panel-header{ padding:50px 50px 20px 50px;  position:relative;}
.md-panel .panel-body{ padding:0 50px; text-align: center; font-size: 14px;}
.md-panel .panel-footer{ padding:50px;}

.md-panel .panel-footer button{ width: 48%; height: 45px; line-height: 45px; -webkit-transition:all .3s ease-out; transition: all .3s ease-out; border: 1px solid #d8454c; cursor: pointer;}
.md-panel .panel-footer .btn-confirm{ float: left; background: #fff; color: #d8454c;}
.md-panel .panel-footer .btn-cancel{ float: right; background: #d8454c; color:#fff;}
/* 面板-关闭 */
.panel-close {position: absolute;top: 7px;right: 7px;width: 34px;height: 34px; text-indent: -8000px;cursor: pointer;
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
}
.panel-close:before {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.panel-close:before, .panel-close:after { position: absolute; top: 16px; left: -4px; content: ""; width: 44px; height: 3px; background: #605f5f;
    -webkit-transition: -webkit-transform .5s ease-out;
    transition: -webkit-transform .5s ease-out;
    transition: transform .5s ease-out,
    -webkit-transform .5s ease-out;
}
.panel-close:after {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.panel-close:hover:before, .panel-close:hover:after {
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out,
    -webkit-transform .3s ease-out;
}
.panel-close:hover:before {
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg);
}
.panel-close:hover:after {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.md-show{ visibility: visible;}
.md-show .md-inner { opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: all .5s ease-out;
    transition: all .5s ease-out;
}
.md-inner {background: #fff; opacity: 0;
    -webkit-transform: translateY(20%);
    -ms-transform: translateY(20%);
    transform: translateY(20%);
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
}


/* 信息验证 */
.code-box{ max-width:330px; margin:0 auto; padding-top:50px;}
.ValidCodeForm .size-l{ font-size:14px; height: 41px;}
.ValidCodeForm .item{ margin: 30px 0 0 0; padding: 0}

/* 验证样式 */
.item.active .input-text { border: 1px solid #0077bb;} /* 鼠标active 样式 */
/* 错误 样式 */
.item.error .input-text,.item.error .select,.item .error .input-text{ border: 1px #f00 solid;}
.item .valid_message {display:inline-block; padding:2px 8px; position:absolute; top:100%; left:0; color: #0077bb; font-size:12px;}
.item.error .valid_message{ color:#b92219; }

/* backTop */
.backTop{ position:fixed; bottom:0; right:0;width:40px; height:40px; line-height: 40px; text-align:center; background-color:#f2f2f2; z-index:3000; border-radius:2px 0 0 0;}
.backTop:hover{background-color:#ddd; text-decoration:none;}

/* pages */
.pages {  margin: 50px 0 50px auto;  overflow: hidden;  clear: both;  text-align: center;  font:14px/1.5 "PingFang SC",Helvetica,"Helvetica Neue","微软雅黑";  }
.pages a {  color: #4d555d;  text-decoration: none;  -webkit-transition: border-color .2s;  -moz-transition: border-color .2s;  transition: border-color .2s;  }
.pages a:hover{ background: #eee;}
.pages a, .pages span{  padding: 0 12px; border: 1px solid #ddd;  border-radius: 3px; background: #fff;  margin: 0 4px; line-height: 32px;  display: inline-block;  text-align: center;  }
.pages span{ color: #c8cdd2;}
.pages a.page-num:hover { color: #4d555d;  text-decoration: none  }
.pages a.active {background: #0077bb;color: #fff; border-color: #0077bb; }
.pages .remark{ color: #4d555d}
.pages .remark b{ margin: 0 2px;}
/* group style */
.pages span{ border:1px solid #ddd;}
.pages a, .pages span{ margin:0 0 0 -1px; border-radius:0}
.pages span:first-child,.pages a:first-child{ border-radius:4px 0 0 4px}
.pages span:last-child,.pages a:last-child{border-radius:0 4px 4px 0}


/* show effeic */
header .user-menu .animated,
.open .animated {
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    z-index: 100;
}

header .user-menu .animated,
.open .fadeInRight {  animation-name: fadeInRight;  }
@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(20%, 0, 0);
        transform: translate3d(20%, 0, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(20%, 0, 0);
        transform: translate3d(20%, 0, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.open .fadeInLeft {  animation-name: fadeInLeft;  }
@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}