@charset "utf-8"; body { margin: 0; font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif; } ul { margin: 0; padding-left: 0; list-style: none; } input{ outline: none; } input::-ms-clear{ display:none; } input::-ms-reveal{ display:none; } .common-header, .common-header * { box-sizing: content-box; -moz-box-sizing: content-box; /* Firefox */ -webkit-box-sizing: content-box; /* Safari */ } .common-header li { display: inline-block; margin: 0 3px; font-size: 0; font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif; } .common-header a { text-decoration: none; color: #333; } .common-header { width: 100%; height: 62px; box-shadow: 0 0 8px 0 rgba(0, 0, 0, .1); /* box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .04); */ /* border-bottom: 1px solid #f2f2f2; */ position: relative; z-index: 101; } .common-header a:hover { text-decoration: none; } .common-nav { margin: 0 auto; width: 985px; height: 100%; position: relative; z-index: 101; background-color: #fff; } .pull-right { float: right; } .h-clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden} .h-clearfix{ clear: both; } /* logo */ .common-navbar-header-new { display: inline-block; vertical-align: middle; } .common-navbar-brand { margin-left: 0; padding: 0 10px 0 0; } .common-icon-logo { display: inline-block; width: 59px; height: 42px; background-image: url('https://cdn.coolguang.com/public/main-site/header/logo_new.png?t=2020050310'); background-position: left center; background-repeat: no-repeat; background-size: 59px auto; } /* 导航 */ .common-navbar-nav { display: inline-block; } .common-navbar-nav a { display: inline-block; } /* 导航左部 */ .common-navbar-left { margin-left: 12px; } .common-navbar-left>li a { padding: 10px 9px; font-size: 14px; line-height: 42px; position: relative; } .common-navbar-left>li .nav.active, .common-navbar-left>li>a:hover, .common-navbar-left>li .active.home { color: #1970e3; } .common-navbar-left>li a.home.active:after { position: absolute; content: ''; display: block; width: 90%; height: 3px; background-color: #1970e3; left: 5%; bottom: 0; z-index: 108; } .common-navbar-left>li .nav.active .common-caret-down, .common-navbar-left>li.home.active .common-caret-down, .common-navbar-left li:hover .common-caret-down, .common-navbar-left li.hover .common-caret-down{ background-position: 0 -6px; } .common-caret-down { vertical-align: text-bottom; background-image: url('https://cdn.coolguang.com/public/main-site/header/arrow-icon.png?t=2020050310'); background-repeat: no-repeat; display: inline-block; margin-left: 5px; margin-right: 0 !important; width: 8px; height: 10px !important; background-position: 0 3px; vertical-align: middle !important; -webkit-transition: transform 0.3s ease 0.1s; transition: transform 0.3s ease 0.1s; background-size: 8px 13px; } .common-dropdown.hover .common-caret-down, .common-dropdown:hover .common-caret-down { /* background-position:0 -404px; */ -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: transform 0.3s; transition: transform 0.3s; } .common-dropdown .common-dropdown-menu a { margin: 5px 0; padding: 0px 12px; font-size: 13px; line-height: 28px; border-radius: 2px; color: #fff; background: inherit; } .common-dropdown .common-dropdown-menu a:hover { background: #505050; } /*下拉菜单*/ .common-dropdown { position: relative; display: inline-block; } .pop-up-row { position: absolute; top: 62px; left: 0; padding-bottom: 10px; z-index: 101; display: none; width: 155px; box-shadow: 0 8px 24px 0 rgba(0, 0, 0, .08); background-color: #fff; border-radius: 0 0 8px 8px; } .menu-news-main { width: 100%; z-index : 101; left: 0; box-sizing: border-box; padding: 11px 10px 11px 10px !important; display: inline-block; vertical-align: top; } .pop-up-row.two { width: 360px; } .pop-up-row.two .menu-news-main { width: 180px; } .menu-news-main li { margin: 0; vertical-align: top; width: 100%; } .menu-news-main li .menu-title{ font-size: 14px; color: #999; margin: 0; margin-bottom: 10px; } .menu-news-main li h4 { font-weight:600 !important; margin: 0; } .menu-news-main li h4, .menu-news-main li a { font-size: 13px; color: #333; padding: 0; line-height: 32px; padding-left: 10px !important; position: relative; display: block; } .menu-news-main li a.active, .menu-news-main li a:hover { color: #1970e3; } .menu-news-main li a.active:after, .menu-news-main li a:hover:after { width: 4px; height: 4px; background-color: #1970e3; border-radius: 50%; position: absolute; left: 0; top: 50%; margin-top: -2px; content: ''; display: block; } .common-dropdown.hover .pop-up-row, .common-dropdown:hover .pop-up-row, .pop-up-row.hover{ display: block; } .common-dropdown:hover .nav { color: #1970e3; } /*.right-col*/ .right-col { float: right; height: 62px; } .common-navbar-right { text-align: right; font-size: 0; vertical-align: top; } .common-navbar-right li { /* padding: 0 8px; */ line-height: 34px; font-size: 14px; margin: 0; padding: 0; } .common-navbar-right .common-btn-group { margin-top: 14px; color: #5a5a5a; margin-right: -4px; } .common-navbar-right .common-btn-group a { line-height: 34px; text-align: center; display: inline-block;; } .common-navbar-right .common-btn-group .btn-login { padding: 0 24px; } .common-navbar-right .common-btn-group .btn-login:hover { color: #1970e3; } .common-navbar-right .common-btn-group .btn-regist { width: 100px; height: 34px; background-image: url('https://cdn.coolguang.com/public/main-site/header/regist.png?t=2020050310'); background-position: center; background-repeat: no-repeat; background-size: cover; color: #fff; } .common-navbar-right .common-btn-group .btn-regist:hover { background-image: url('https://cdn.coolguang.com/public/main-site/header/registhover.png?t=2020050310'); } .common-navbar-right .search-item { width: 224px; height: 32px; line-height: 30px; border: 1px solid #ddd; display: inline-block; vertical-align: top; position: relative; padding-left: 50px; padding-right: 35px; box-sizing: border-box; border-radius: 20px; margin-top: 16px; } .search-line { width: 1px; height: 15px; background-color: #ddd; left: 44px; top: 8px; position: absolute; } .search-input { width: 100%; text-align: left; font-size: 0; height: 16px; padding: 7px 0; } .search-input input { line-height: 16px; border: none; font-size: 12px; color: #333; margin: 0; padding: 0; vertical-align: top; } .header-icon-search { width: 22px; height: 100%; position: absolute; right: 10px; top: 0; background-image: url('https://cdn.coolguang.com/public/main-site/header/search-icon.png?t=2020050310'); background-position: center; background-repeat: no-repeat; cursor: pointer; background-size: 18px auto; } /*search-choose-list*/ .search-choose-list { width: 44px; height: 60px; position: absolute; left: 0; top: 0; cursor: pointer; } .search-choose-list .device-type-head { height: 22px; width: 100%; padding-top: 2px; line-height: 22px; position: relative; cursor: pointer; text-align: center; } .search-choose-list .icon-device { background: url('https://cdn.coolguang.com/public/main-site/header/device@2x.png?t=2020050310') no-repeat center; background-size: 27px 84px; width: 13px; height: 18px; display: inline-block; vertical-align: middle; vertical-align: middle; } .device-type-head .icon-arrow { width: 8px; height: 4px; display: inline-block; vertical-align: middle; position: absolute; right: 6px; top: 14px; background-image: url('https://cdn.coolguang.com/public/main-site/header/arrow-icon.png?t=2020050310'); background-position: 0 0; background-repeat: no-repeat; background-size: 8px 13px; } .search-choose-list:hover .device-type-head .icon-arrow { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .device-type-list { position: absolute; width: 155px; box-shadow: 0 8px 24px 0 rgba(0, 0, 0, .08); top: 44px; z-index: 1000; box-sizing: border-box; padding: 11px 0 !important; overflow-x: hidden; border-radius: 0 0 8px 8px; display: none; background-color: #fff; } .device-type-list li { line-height: 32px; height: 32px; font-size: 13px; color: #5a5a5a; margin: 0; text-align: left; padding-left: 25px; cursor: pointer; display: flex; align-items: center; } .device-type-list li .icon-device { margin-right: 12px; } .device-type-head .icon-device-0, .device-type-list .icon-0 { background-position: 0px 2px; } .device-type-head .icon-device-1, .device-type-list .icon-1{ background-position: 0 -15px; } .device-type-head .icon-device-2, .device-type-list .icon-2 { background-position: 0 -32px; } .device-type-head .icon-device-3, .device-type-list .icon-3 { background-position: 0 -50px; } .device-type-head .icon-device-4, .device-type-list .icon-4 { background-position: 0 -68px; } .device-type-list li:hover, .device-type-list li.active { color: #1970e3; } .device-type-list li:hover .icon-0, .device-type-list li.active .icon-0 { background-position: -13.5px 2px; } .device-type-list li:hover .icon-1, .device-type-list li.active .icon-1 { background-position: -13.5px -15px; } .device-type-list li:hover .icon-2, .device-type-list li.active .icon-2 { background-position: -13.5px -32px; } .device-type-list li:hover .icon-3, .device-type-list li.active .icon-3 { background-position: -13.5px -50px; } .device-type-list li:hover .icon-4, .device-type-list li.active .icon-4 { background-position: -13.5px -68px; } .h_search-result-container { width: 300px; position: absolute; top: 45px; left: 0; background: #fff; padding-top: 10px; z-index: 10; box-shadow: 0px 8px 24px rgba(8, 1, 2, 0.12); display: none; } .h_search-result-container .s_search-result-item{ padding: 0 12px; cursor: pointer; display: block; margin: 0; text-align: left; } .h_search-result-container .s_search-result-item:hover{ background: #f8f8f8; } .h_search-result-container .s_search-result-item a { display: block; } .h_search-result-container .s_search-result-item-con{ padding:10px 0; overflow: hidden; border-bottom: 1px solid #eee; } .h_search-result-container .s_search-result-item:last-child .s_search-result-item-con{ border-bottom: none; } .h_search-result-container .s_search-result-item-left{ float: left; width: 40px; height: 40px; background: #f7f7f7; margin-right: 12px; border-radius: 8px; overflow: hidden; } .h_search-result-container .s_search-result-item-left img{ width: 100%; } .h_search-result-container .s_search-result-item-right{ width: 80%; float: left; } .h_search-result-container .s_search-result-item-right p { line-height: 21px; margin: 0; margin-bottom: 0px; } .h_search-result-container .s_app_title{ color: #333; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; } .h_search-result-container .s_app_desc{ color:#666; font-size: 12px; width: 90%; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; text-align: left; } .common-navbar-right>li a.s_search-more-btn{ color:#357ce5; display: block; font-size: 12px; padding: 3px 0; } .common-navbar-right .user-menu { height: 72px; line-height: 62px; margin-right: 0; margin-left: 14px; font-size: 14px; float: right; margin-right: -8px; } .user-menu .head-avatar { /* overflow: hidden; */ display: block; position: relative; top: 23px; cursor: pointer; padding: 0 8px; } .user-menu .head-avatar-message:before { content: ''; width: 6px; height: 6px; position: absolute; display: block; background-color: #ff3f3f; right: 14px; top: -1px; border-radius: 100%; } .head-avatar .head-avatar-img { display: block; width: 22px; height: 18px; background: url('https://cdn.coolguang.com/public/main-site/header/avatar@2x.png?t=2020050310') no-repeat center; background-size: cover; background-position: center; background-repeat: no-repeat; } /*个人导航*/ .user-menu .pop-up { /* -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transform-origin: 90% 0; -ms-transform-origin: 90% 0; transform-origin: 90% 0; visibility: hidden; -webkit-transition: all 0.3s cubic-bezier(0.31, 0.57, 0.68, 1.36) 0.5s; transition: all 0.3s cubic-bezier(0.31, 0.57, 0.68, 1.36) 0.5s; */ visibility: hidden; position: absolute; min-width: 300px; right: 0; top: 62px; background: #fff; background-clip: padding-box; padding:0 16px; box-shadow: 0 8px 24px 0 rgba(0, 0, 0, .08); background-color: #fff; border-radius: 0 0 8px 8px; box-sizing: border-box; text-align: left; font-size: 13px; color: #333; line-height: inherit; } .user-menu.hover .pop-up, .user-menu:hover .pop-up { visibility: visible; /* opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); */ z-index: 1000; position: absolute; } .user-menu .menu-wrap-footer li.free a, .user-menu .menu-wrap-footer li.message-read a { position: relative; } .user-menu .menu-wrap-footer li.message-read a:after { content: ''; width: 8px; height: 8px; position: absolute; display: block; background-color: #ff3f3f; right: 6px; top: 0; border-radius: 100%; } .user-menu .menu-wrap-footer li .coupon-num, .user-menu .menu-wrap-footer li .unread-num { width: 16px; height: 16px; background-color: #ff3f3f; display: block; font-size: 12px; color: #fff; font-style: normal; text-align: center; line-height: 16px; border-radius: 8px; top: 0; right: 3px; position: absolute; display: none; } .user-menu .menu-wrap-footer li.free a:before { content: ''; width: 85px; height: 23px; position: absolute; background-image: url(http://cdn.coolguang.com/public/main-site/images/free.png); background-position: center; background-repeat: no-repeat; background-size: 100%; bottom: 30px; left: -6px; } .user-menu .menu-wrap-head { width: 100%; height: 40px; margin: 15px 0; display: flex; } .user-menu .menu-wrap-head .avatar { width: 40px; height: 40px; background: url('https://cdn.coolguang.com/public/main-site/header/avatar.png?t=2020050310') no-repeat center; background-size: cover; background-position: center; background-repeat: no-repeat; } .user-menu .menu-wrap-head .info { padding-left: 7px; line-height: 21px; flex: 1; } .user-menu .menu-wrap-head .info .user-name { line-height: 18px; margin-bottom: 3px; display: block; font-weight: 700; } .user-menu .menu-wrap-head .info .user-vip { padding: 0; margin: 0; background: url('https://cdn.coolguang.com/public/main-site/images/user-vip.png?t=2020050310') no-repeat center; background-position: center; background-repeat: no-repeat; width: 18px; height: 18px; vertical-align: middle; margin-left: 3px; margin-top: -1px; display: none; } .user-menu .menu-wrap-head .info .user-vip.user-vip-show { display: inline-block; } .user-menu .menu-wrap-head .info #user-money { padding: 0; margin: 0; } .user-menu .menu-wrap-head .info a { float: right; color: #1970e3; margin-left: 8px; } .user-menu .menu-wrap-main-item { height: 24px; line-height: 24px; margin-bottom: 8px; color: #5a5a5a; } .user-menu .menu-wrap-main-item .icon { background: url('https://cdn.coolguang.com/public/main-site/header/header-icon.png?t=2020050310') no-repeat center; background-position: center; background-repeat: no-repeat; background-size: 102px 56px; width: 18px; height: 18px; display: block; float: left; margin-right: 7px; margin-top: 2px; } .user-menu .menu-wrap-main-item .icon-upload { background-position: 0 0; } .user-menu .menu-wrap-main-item .icon-and-right { background-position: 0px -18px; } .user-menu .menu-wrap-main-item .icon-ios-right { background-position: 0px -37px; } .user-menu .menu-wrap-main-item .menu-wrap-main-item-value { display: inline-block; min-width: 75px; vertical-align: top; margin-left: 5px; margin-right: 10px; font-size: 12px; color: #999; } .user-menu .menu-wrap-main-item a { color: #1970e3; float: right; border: 1px solid #1970e3; height: 22px; line-height: 22px; width: 66px; text-align: center; border-radius: 4px; } .user-menu .menu-wrap-main-item a:hover { text-decoration: none; background-color: #1970e3; color: #fff; } .user-menu .menu-wrap-footer { display: flex; justify-content: space-around; margin-top: 20px !important; margin-bottom: 20px !important; } .user-menu .menu-wrap-footer li { padding: 0 10px; display: inline-block; cursor: pointer; text-align: center; height: 64px; font-size: 12px; color: #5a5a5a; margin: 0; width: 60px; } .user-menu .menu-wrap-footer li a:hover { color: #1970e3; } .user-menu .menu-wrap-footer li a { padding: 0; width: 100%; position: relative; font-size: 0; } .menu-wrap-footer li .classify-icon { margin: 0 auto; width: 40px; height: 32px; border-radius: 20px; line-height: 40px; text-align: center; background-color: #e8f0fc; margin-bottom: 7px; padding-top: 8px; } .menu-wrap-footer li .icon-small { background-image: url('https://cdn.coolguang.com/public/main-site/header/header-icon.png?t=2020050310'); background-position: center; background-repeat: no-repeat; background-size: 102px 56px; width: 24px; height: 24px; display: block; margin: 0 auto; } .menu-wrap-footer li .icon1 { background-position: -20px -2px; } .menu-wrap-footer li .icon2 { background-position: -47px -2px; } .menu-wrap-footer li .icon3 { background-position: -76px -2px; } .menu-wrap-footer li .icon4 { background-position: -20px -27px; } .menu-wrap-footer li .icon5 { background-position: -47px -29px; } .menu-wrap-footer li .icon6 { background-position: -76px -29px; } .user-menu .menu-wrap-footer li span { color: inherit; line-height: 12px; font-size: 12px; } .menu-wrap-footer li:hover .icon { background-color: rgb(200, 220, 250); } .logout { display: block !important; line-height: 40px; text-align: center; border-top: 1px solid #eee; font-size: 13px; color: #5a5a5a; margin: 0 -15px; } .logout:hover { color: #1970e3; }