/* 弹出搜索 begin */ .searchBar-m {display:none;width:100%;height:100%;position:fixed;left:0;top:0;z-index:9999;text-align:center} .searchBar-m .mask {position:absolute;left:0;right:0;width:100%;height:100%;background:#000;opacity:0.9;} .searchBar-m a {color:#3f94ef;display:block;position:absolute;right:40px;top:20px;font-size:36px;z-index:9999;} .searchBar-m a:hover{color:#2f7cce} .searchBar-m .form-group {width:80%;max-width:720px;position:absolute;left:50%;top:40%;transform:translate(-50%,-200%);} .searchBar-m .remen{ width:80%;max-width:720px;position:absolute;left:50%;top:65%;transform:translate(-50%,-150%);height:210px; } .searchBar-m .remen h1 { font-size:18px;font-weight:600;line-height:24px;margin:20px 0; color: #ffffff; } .searchBar-m .remen a{ display: inline-block; font-size: 14px; color: #ffffff; background: #6e6e6e91; padding: 4px 10px; border-radius: 3px; margin: 5px; position: unset; } .searchBar-m .remen a:hover{ background: #878787; } .searchBar-m .input{width:90%;height:52px;line-height:50px;background:#0006;border:2px solid rgba(255,255,255,.6);border-right:0;color:rgba(255,255,255,.6);float:left;padding:0;text-indent:20px;border-radius: 30px 0 0 30px;} .searchBar-m .button {width:10%;padding:0;height:52px;border:2px solid rgba(255,255,255,.6);font-size:20px;border-left:0;display:block;float:left;background:#0006;border-radius: 0 30px 30px 0;} .searchBar-m .button i{color:#fff;line-height:50px;} /* 顶头搜索 */ .searchBar-pc{margin-top:19px;} .searchBar-pc .form-group{box-shadow: 0 0 5px 0 rgba(43,35,179,0.15);border-radius:30px;padding:0} .searchBar-pc .input {height:42px;background:#fff;color:#8C9096;padding:0 0 0 20px;border-radius:30px 0 0 30px;} .searchBar-pc .input-group .addbtn {padding:0px;} .searchBar-pc .button {height:42px;width:50px;background:#FFCC00;color:#fff;border-radius:0 30px 30px 0;} /* PC导航 */ #pc-header .logo h1 a{height:90px;font-size:0;display:block;} #pc-header .logo-description{color:#fff;margin:0 auto;padding:0;border-left:0px solid #efefef;display:block;} #pc-header .navbar{background:#FFF;-webkit-box-shadow:0px 3px 5px rgba(0, 0, 0, 0.05); box-shadow:0px 3px 5px rgba(0, 0, 0, 0.05);z-index:9999} #pc-header .navbar .logo-description strong {color:#999;line-height:90px;display: block;font-weight:normal} #pc-header .nav li a{line-height:90px;color:#6A6262;position:relative;padding:0 25px;font-size:16px;font-weight:500} #pc-header .nav li a:hover,#pc-header .nav li.active a{color:#3f94ef} #pc-header .nav li.active ul li a{color:#666} #pc-header .nav li ul li a {font-size:16px;line-height:40px;margin:0;padding:0 20px;background:#fff;color:#666;font-weight:normal;display:block;width:100%;text-align:left;} #pc-header .nav li ul li a:hover{color:#434C5A;background:#F8F8F8;font-weight:400} #pc-header .nav li ul{top:100%;padding:0 0 3px 0;background:#fff;transition: 0.3s;border-radius:0 0 5px 5px;} /*#pc-header .nav li ul:after{position: absolute;top: -8px;left:4em;display:inline-block;border-right:8px solid transparent;border-bottom:8px solid #3f94ef;border-left:8px solid transparent;content: ''; }*/ #pc-header .nav li ul li a {background:#fff;color:#6A6262;font-size:14px;line-height:40px;font-weight:normal;display:block;width:100%;text-align:center;padding: 0px;} #pc-header .nav li ul a:hover{color:#6A6262;} /* pc搜索图标 */ #pc-header a.search-ico i {position:absolute;line-height:90px;right:50px;font-size:22px;color:#666;} #pc-header a.shop-ico i {position:absolute;top:29px;right:50px;font-size:18px;color:#666} #pc-header a.user-ico i{font-size:18px;color:#666;} /* 购物车图标 */ #pc-header .shopBar{position:absolute;top:30px;right:70px;height:30px;} #pc-header a.shop-ico i{font-size:22px;color:#666;line-height:30px} /* 信息图标 */ #pc-header .msgBar{position:absolute;top:30px;right:60px;height:30px;} #pc-header a.msg-ico i{font-size:22px;color:#666;line-height:30px} /* 状态图标 */ #pc-header .nav span.hot { position: absolute; width: 26px; height: 19px; top: 12px; right: 38%; background: url(../images/tyweb-hot.png) no-repeat; z-index: 1; -webkit-animation: upDown 6s ease-in-out infinite; animation: upDown 6s ease-in-out infinite; } #pc-header .nav span.new { position: absolute; width: 26px; height: 19px; top: 12px; right: 38%; background: url(../images/tyweb-new.png) no-repeat; z-index: 1; -webkit-animation: upDown 6s ease-in-out infinite; animation: upDown 6s ease-in-out infinite; } /*绝对定位下：上下微悬浮*/ @keyframes upDown{0%{transform: translateY(5px);} 25%{transform: translateY(0px);} 50%{transform: translateY(5px);} 75%{transform: translateY(0px);} 100%{transform: translateY(5px);}} /* 电话图标 */ #pc-header .call{position:absolute;top:30px;right:110px;height:30px;line-height:30px;font-size:22px;color:#666;} #pc-header .call i em{margin-left:10px;} /* 充值图标 */ #pc-header .vippay{position:absolute;top:30px;} #pc-header .vippay a.vip{color:#fff;line-height:20px;font-size:16px;margin-left:15px} #pc-header .vippay a.vip i{vertical-align: middle;width:20px;height:20px;display:inline-block;background: url(../images/vip.svg) no-repeat left / 100%;} /* 登入后状态 */ .log-in{position:absolute;top:27px;right:0;height:36px;} .log-in .drop-menu {margin:27px 0 0;min-width:100px;border-radius:5px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.075); box-shadow:0 6px 12px rgba(0,0,0,.075) } .log-in .drop-menu li a{position:relative;padding:8px 20px;display:block} .log-in .drop-menu li a:hover,.drop-menu a:focus {color:#2D2D2D;background: unset;} .log-in .button-group span {display:inline-block;line-height:24px;height:24px;width:24px} .log-in .button-group ul:before {position:absolute;top:-6px;left:50px;display:inline-block;border-right:6px solid transparent;border-bottom:6px solid #fff;border-left:6px solid transparent;content:'';} /* .log-in .button-group ul:after {position:absolute;top:-6px;left:50px;display:inline-block;border-right:6px solid transparent;border-bottom:6px solid #e9e8e8;border-left:6px solid transparent;content:'';} */ .log-in .button-group .button {padding:0;line-height:18px;font-size:20px} .log-in .button-group .drop-menu {border-radius:5px;border-bottom-left-radius:5px;border-bottom-right-radius:5px;padding: 10px 0;left: -40px;border-top:0px;-webkit-box-shadow: 0px 0px 0px rgba(0,0,0,.075);box-shadow: 0px 8px 10px rgba(0,0,0,.05);} .log-in a.user-ico{width:36px;height:36px;line-height:36px;display:block;} .log-in a.user-ico i{color:#666} .log-in a.user-head{width:36px;height:36px;overflow:hidden;display:block;} .log-in a.user-head img{width:36px;height:36px;} /* 登入后状态 end*/ #pc-header .loginbar {position:absolute;line-height:90px;right:10px;padding:0;margin:0;} #pc-header .loginbar .drop-menu {min-width:100px;border-radius:5px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.075); box-shadow:0 6px 12px rgba(0,0,0,.075) } #pc-header .loginbar .drop-menu a {padding:10px 20px;line-height:normal;} #pc-header .loginbar .drop-menu a:hover,.drop-menu a:focus {color:#6A6262} #pc-header .loginbar .button-group span {display:inline-block;line-height:24px;height:24px;width:24px} #pc-header .loginbar .button-group ul:before {position:absolute;top:-8px;left:40px;display:inline-block;border-right:8px solid transparent;border-bottom:8px solid #fff;border-left:8px solid transparent;content:'';} #pc-header .loginbar .button-group ul:after {position:absolute;top:-8px;left:40px;display:inline-block;border-right:8px solid transparent;border-bottom:8px solid #fff;border-left:8px solid transparent;content:'';} #pc-header .loginbar .button-group .button {padding:0;line-height:18px;font-size:20px} #pc-header .loginbar .button-group .drop-menu { left: -40px;border-top:0px solid #4095f1;-webkit-box-shadow: 0px 0px 0px rgba(0,0,0,.075);box-shadow: 0px 0px 8px 1px rgba(0,0,0,.165);border-radius:4px;} #pc-header .loginbar .button-group .drop-menu.ul{margin-top: 10px;} /* 注册登录切换 */ .register{padding:10%} .register .tab{font-size:0} .register .tab li{cursor:pointer;display:inline-block;position:relative;font-size:20px;width:60px;color:#666;margin:0 0 40px 0} .register .tab li::before{background:#ccc;content:'';position:absolute;bottom:-10px;left:0;width:100%;height:3px;border-radius:3px;transition:transform .3s;} .register .tab li.cur{color:#3f94ef} .register .tab li.cur::before{background:#3f94ef;content:'';position:absolute;bottom:-10px;left:0;width:100%;height:3px;border-radius:3px;transition:transform .3s;} .register .line{margin:0px;padding:0;position: relative; text-align: center;} .register .line span{display: inline-block; padding: 0 20px; position: relative; z-index: 200;} .register .line hr{-moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; border-color: #E2E2E2 -moz-use-text-color -moz-use-text-color; border-image: none; border-style: solid none none; margin-top:10px; position: absolute; top:0; width: 100%;} .register .bnt-login{margin:0 auto;text-align:center} .register .bnt-login a{display:inline-block;color:#fff;font-size:22px;width:48px;height:48px;text-align:center;line-height:48px;margin-right:10px;border-radius:30px} .register .bnt-login a:hover{opacity:0.8} .register .bnt-login a.weixin{background:#38B624} .register .bnt-login a.qq{background:#1F92DF} .register .bnt-login a.weibo{background:#FF6000} /* 注册登录切换 end*/ /*手机导航 begin */ #mobile-mask {position:relative;z-index:1;overflow-x:hidden;overflow-y:hidden;} .offcanvas-visible #mobile-mask {-moz-transform:translateX(-275px);-webkit-transform:translateX(-275px);-ms-transform:translateX(-275px);-o-transform:translateX(-275px);transform:translateX(-275px);} #mobile-header {background:#000;display:none;height:100%;right:0;overflow-y:auto;position:relative;position:fixed;z-index:1;top:0;width:275px;border:0;} #mobile-header ul li{width:100%;margin:0} #mobile-header ul li:hover,#mobile-header ul li.current {background:#000} #mobile-header ul li a {line-height:49px;border-bottom:1px solid #111;font-size:18px;color:#ccc;font-weight:normal;display:block;position:relative;padding-left:50px;margin:0;text-align:left;} #mobile-header ul li a:hover,#mobile-header ul li.current a {color:#ccc;} #mobile-header ul li ul {padding:0;z-index:1999;position:relative;width:100%;} #mobile-header ul li ul li a,#mobile-header ul li.current ul li a {background:#000;color:#6E6E6E;font-size:16px;line-height:36px;padding:5px 50px;display:block;} #mobile-header ul li ul li a:hover {background:#111;} #mobile-header ul li ul li a::before,#mobile-header ul li ul li a::after {background:none;height:0;padding:0} /* 手机导航面包ico begin */ .mobile-toggle {position:relative;cursor:pointer;text-decoration:none;position:absolute;top:50%;right:20px;z-index:99999;display:block;margin:-11px auto 0;display:none;cursor:pointer;} .mobile-toggle.active i::before,.mobile-toggle.active i::after {} .mobile-toggle:hover,.mobile-toggle:focus,.mobile-toggle:active {outline:none;border-bottom:none !important;} .mobile-toggle i{position:relative;top:0;display:-moz-inline-stack;width:24px;height:2px;display:inline-block;zoom:1;*display:inline;color:#fff;text-transform:uppercase;text-indent:-55px;transition:all .3s ease-out;} .mobile-toggle i::before,.mobile-toggle i::after {content:'';width:24px;height:2px;position:absolute;left:0;-webkit-transition:0.3s;-o-transition:0.3s;transition:0.3s;} .mobile-toggle i::before {top:-9px;} .mobile-toggle i::after {bottom:-9px;} .mobile-toggle.active i {background:transparent;} .mobile-toggle.active i::before {top:0;-webkit-transform:rotateZ(45deg);-o-transform:rotateZ(45deg);transform:rotateZ(45deg);} .mobile-toggle.active i::after {bottom:0;-webkit-transform:rotateZ(-45deg);transform:rotateZ(-45deg);} .mobile-toggle i,.mobile-toggle i::before, .mobile-toggle i::after,.mobile-toggle.active i::before, .mobile-toggle.active i::after{background: #818181;} #pc-header .navbar.fixed.fixed-top .call {color:#666} @media screen and (max-width:1680px) { /* #pc-header .logo h1 a {background-size:auto 36px;} */ #pc-header .nav li a{line-height:80px;} #pc-header .logo h1 a{height:80px;font-size:0;display:block;} #pc-header a.search-ico i {line-height:80px;} #pc-header .loginbar {line-height:80px;} #pc-header .navbar .logo-description strong{line-height:80px;} } @media screen and (max-width:1000px) { .searchBar-m .remen{ top:70%; } .searchBar-m .button{ margin-left:-1px; } .nav-navicon {display:none} } @media screen and (max-width:760px) { .register{ padding: 30px 10px 10px 10px; } .dialog-win{ width: 90%!important; } .nav-navicon {display:none} .itags { display:block!important; } #mobile-mask {background:#fff;} .mobile-toggle,#mobile-header,#mobile-header .nav {display:block;border:none} /* 弹出搜索 */ .searchBar-m .mask {background:#000;opacity:0.92;} .searchBar-m .form-group {top:50%;} .searchBar-m .remen{ top:90%; overflow: hidden; } .searchBar-m .input,.searchBar-m .button {height:52px;margin-left:-1px;} /* 弹出搜索 */ #pc-header {height:50px;} #pc-header .logo h1 a {height:50px;background-size:auto 45px!important;} #pc-header a.search-ico i {right: 60px;line-height:50px;} #pc-header .loginbar {right:60px;line-height:50px;} .js-mobile-toggle i{position:relative;display:-moz-inline-stack;width:24px;height:2px;display:inline-block;zoom:1;*display:inline;color:#fff;text-transform:uppercase;text-indent:-55px;transition:all .3s ease-out;} #pc-header .loginbar .drop-menu {margin:25px 0 0} }