/* Website Url:http://www.adminbuy.cn/ */ * { -webkit-tap-highlight-color: transparent; } article, aside, details, figcaption, figure, footer, header, main, nav, section { display: block; } div, html, 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, main, .aiyuanma { margin: 0; padding: 0; } body { background-color: #fff; font: 16px/1.875em 'Arial', 'Microsoft Yahei', 'Verdana', 'Tahoma', 'sans-serif'; color: #222; word-break: break-all; } a { text-decoration: none; outline: none; color: #222; } a:hover { color: #F65E4F; } input, textarea { -webkit-appearance: none; border: none; } input:focus, textarea:focus { outline: none; } li { list-style: none; } a img { border: none; } table { background-color: transparent; border-spacing: 0; border-collapse: collapse; font-size: 16px; width: 100%; border-top: solid 1px #e4e4e4; border-left: solid 1px #e4e4e4; box-sizing: border-box; } table th { background-color: #f9f9f9; text-align: center; box-sizing: border-box; } table td, table th { padding: 10px 1%; border: 1px solid #e4e4e4; box-sizing: border-box; } /*gold*/ .inner { width: 1400px; margin: 0 auto; } .submit { cursor: pointer; } .clear { clear: both; } .mb { margin-bottom: 25px; } /*thumbnail*/ .thumbnail { position: relative; overflow: hidden; } .thumbnail a { display: block; padding-bottom: 75%; position: relative; overflow: hidden; background: no-repeat center center; background-size: cover; } .thumbnail img { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: transform .3s; object-fit: cover; } .thumbnail img:hover { transform: scale(1.1, 1.1); } /*box*/ .boxTitle { border-bottom: 2px solid #e4e4e4; position: relative; margin-bottom: 15px; background-color: #37408e; color: #fff; padding: 5px 15px 3px; border-radius: 5px; } .boxTitle .name { font-size: 16px; line-height: 1.875em; margin-right: 50px; } .boxTitle .name a {color: #fff;} .boxTitle:after { display: block; width: 6px; height: 6px; background-color: #fff; position: absolute; left: -3px; top: 50%; transform: translateY(-50%); border-radius: 50%; } .boxTitle span, .boxTitle .arrow { display: block; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-weight: bold; font-size: 14px; line-height: 24px; overflow: hidden; } .boxTitle i { font-style: normal; font-weight: bold; color: #fff; } .boxTitle span a { font-weight: normal; color: #fff; position: relative; padding-right: 10px; font-size: 12px; } .boxTitle span a:after { width: 6px; height: 6px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; content: ''; display: block; position: absolute; right: 1px; top: 50%; transform: rotate(-45deg); margin-top: -4px; } .boxTitle .slick-arrow { display: block; width: 24px; height: 24px; float: left; border: none; background: none; position: relative; cursor: pointer; } .boxTitle .slick-arrow:before { content: ''; display: block; background: url(../images/icon_arrow.png) no-repeat 0 0; background-size: 100% auto; width: 41.667%; height: 66.667%; position: absolute; left: 50%; top: 50%; margin-left: -20.8335%; transform: translateY(-50%); } .boxTitle .slick-prev:before { background-position: 0 100%; } /*dot*/ .dot { position: relative; padding-left: 13px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dot:before { width: 3px; height: 3px; background-color: #37408e; content: ''; display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } /*line*/ .line { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; } /* Slider */ .slick-load { display: none; overflow: hidden; } .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; font-size: 0; line-height: normal; } [dir='rtl'] .slick-slide { float: right; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; } .slick-arrow.slick-hidden { display: none; } .slick-dots button { display: block; border: none; background-color: transparent; cursor: pointer; } /*topbar*/ #topbar { background-color: #f6f6f6; color: #666; border: 1px solid #eee; border-top: none; overflow: hidden; border-radius: 0 0 6px 6px; } /*welcome*/ #welcome { float: left; padding: 0 15px; } #welcome, #pagelist { line-height: 2em; font-size: 14px; } /*pagelist*/ #pagelist { float: right; } #pagelist ul { overflow: hidden; } #pagelist li { float: left; padding: 0 10px; position: relative; } #pagelist li:after { width: 1px; height: 10px; background-color: #ddd; content: ''; display: block; position: absolute; left: 0; top: 50%; margin-top: -5px; } #pagelist li:first-child:after { display: none; } #pagelist a { color: #666; } #pagelist a:hover { color: #F65E4F; } /*header*/ #header { display: table; table-layout: fixed; width: 100%; z-index: 2; padding: 3.125% 0; } #header .td { display: table-cell; vertical-align: bottom; } #header .clear {width: 0; display: none;} /*logo*/ #logo { position: relative; z-index: 2; width: 250px; } #logo a { display: block; height: 56px; background: url(../images/logo.png) no-repeat left center; background-size: contain; text-indent: -9999em; } /*hotTel*/ #hotTel { width: 250px; font-size: 14px; line-height: 1.5em; color: #666;} #hotTel .tel { float: right; background: url(../images/icon_tel.png) no-repeat left center; background-size: auto 40px; padding-left: 60px; } #hotTel span { font-size: 28px; line-height: 1em; color: #F65E4F; font-weight: bold; } /*search*/ #search { overflow: hidden; display: table-cell; vertical-align: middle; padding: 0 3.5%;} #search form { float: right; overflow: hidden; width: 70%; border-radius: 6px; } #search .submit { float: right; width: 50px; height: 50px; background: #37408e url(../images/search_white.png) no-repeat center center; background-size: 44% auto; } #search .input { border: 2px solid #37408e; margin-right: 50px; display: block; color: #333; border-right: none; border-top-left-radius: 6px; border-bottom-left-radius: 6px; overflow: hidden; } #search .text { height: 28px; line-height: 28px; width: 98%; padding: 9px 2% 9px 0; font-size: 16px; background-color: #fff; text-indent: 15px; } /*topBtn*/ #topBtn { width: 0; } #topBtn .btn { float: left; } #topBtn i { display: block; cursor: pointer; } /*schBtn*/ #schBtn { display: none; } #schBtn i { width: 20px; height: 20px; background: url(../images/search_blue.png) no-repeat 0 0; background-size: 100% auto; } /*navBtn*/ #navBtn { display: none; width: 22px; height: 20px; overflow: hidden; margin-left: 15px; opacity: .85; cursor: pointer;} #navBtn i { display: block; width: 100%; height: 3px; background-color: #37408e; position: relative; float: right; top: 50%; transform: translateY(-50%); transition: width .3s; } #navBtn i:before, #navBtn i:after { width: 130%; height: 3px; background-color: #37408e; content: ''; display: block; position: absolute; right: 0; transition: width .3s; } #navBtn i:before { bottom: 8px; } #navBtn i:after { top: 8px; } #navBtn.active i { width: 100%; } #navBtn.active i:before, #navBtn.active i:after { width: 70%; } /*nav*/ #nav { position: relative; background-color: #37408e; border-radius: 6px; z-index: 3;} #nav ul { font-size: 0; line-height: normal; } #nav li { display: inline-block; line-height: 55px; font-size: 16px; position: relative; font-weight: bold; width: 12.5%; text-align: center; } #nav li a { color: #fff; display: block; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 5px; } #nav li.on > a, #nav li.cur > a, #nav li a:hover { background-color: rgba(255, 255, 255, .15); } #nav li ul { position: absolute; left: 0; top: 100%; width: 100%; background-color: #37408e; box-shadow: 0px 3px 3px rgba(0, 0, 0, .2); padding: 10px 0; display: none; } #nav li li { text-align: center; display: block; font-weight: normal; width: auto; line-height: 40px; } #nav li em { display: block; position: absolute; top: 50%; right: 3px; height: 15px; width: 15px; transform: translateY(-50%); display: none; } #nav li em:after, #nav li.hasSub > a:after { content: ''; width: 5px; height: 5px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; transform: rotate(45deg); transition: all .3s; } #nav li em:after { display: block; position: absolute; left: 50%; top: 50%; margin: -4px 0 0 -4px; } #nav li.hasSub > a:after { display: inline-block; vertical-align: middle; margin: -5px 0 0 5px; } /*table*/ .table { display: table; table-layout: fixed; width: 100%; } .table .td { display: table-cell; vertical-align: top; } /*main*/ #main.td { padding-left: 25px; } /*slides*/ #slides { border-radius: 6px; overflow: hidden; background-color: #f9f9f9; } #slides .item a { display: block; color: #fff; position: relative; } #slides .pic {background: no-repeat center center; background-size: cover; height:440px; } #slides .wap {display: none;} #slides .slick-arrow { position: absolute; top: 50%; display: block; transform: translateY(-50%); width: 30px; height: 40px; background: rgba(0, 0, 0, .35) no-repeat center center; background-size: contain; opacity: .5; color: #fff; font-size: 0; line-height: normal; transition: all .3s; text-indent: -99999em; overflow: hidden; z-index: 3; border: none; cursor: pointer; } #slides .slick-prev { left: -30px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; } #slides .slick-next { right: -30px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; } #slides .slick-prev:after, #slides .slick-next:after { content: ''; display: block; width: 13px; height: 21px; position: absolute; left: 50%; margin-left: -6.5px; top: 50%; transform: translateY(-50%); background: url(../images/icon_arrow.png) no-repeat 0 100%; background-size: 100% auto; } #slides .slick-next:after { background-position: 0 0; } #slides:hover .slick-prev { left: 0; } #slides:hover .slick-next { right: 0; } #slides .slick-dots { position: absolute; left: 50%; bottom: 3.125%; transform: translateX(-50%); font-size: 0; line-height: normal; white-space: nowrap; } #slides .slick-dots li { display: inline-block; margin: 0 5px; } #slides .slick-dots button { display: block; text-indent: -9999em; overflow: hidden; width: 5px; height: 5px; background-color: rgba(255, 255, 255, .75); transition: all .3s; line-height: 5px; font-size: 0; border-radius: 2.5px; } #slides .slick-dots .slick-active button { background-color: #37408e; width: 20px; } #slides .load { padding-bottom: 100%; background-color: #f9f9f9; position: relative; } #slides .load span { display: block; position: absolute; left: 0; top: 50%; width: 100%; transform: translateY(-50%); font-size: 36px; line-height: 1.125em; color: #999; text-align: center; } /*wrapper*/ #wrapper {overflow: hidden;} /*about*/ #about .info { overflow: hidden; padding: 5px 0;} #about .pic { float: left; width: 350px; } #about .pic i {display: block; padding-bottom: 75%; background: no-repeat center center; background-size: cover;} #about img { display: block; width: 100%; height: auto; } #about .text { margin-left: 380px; overflow: hidden; font-size: 14px; line-height: 2em; text-align: justify;} #about .intro {height: 260px; overflow: hidden; -webkit-overflow-scrolling: touch;} #about .mCustomScrollbar {padding-right: 10px;} #about .mCS_no_scrollbar {padding-right: 10px;} /*latest*/ #news { overflow: hidden; } #news .boxTitle {margin-bottom: 10px;} #news ul { overflow: hidden; } #news li { font-size: 14px; line-height: 32px; overflow: hidden; float: left; width: 48%; } #news li:nth-child(2n) { float: right; } #news li time { display: block; float: right; color: #888; font-size: 12px; } #news li a { margin-right: 80px; } /*carousel*/ #showcase .slick-load { width: 101.786%; } #showcase .info { margin-right: 8%; overflow: hidden; } #showcase .thumbnail { margin-bottom: 10px; } #showcase .title { font-size: 14px; line-height: 1.5em; font-weight: normal; max-height: 3em; -webkit-line-clamp: 2; } #showcase .load { padding-bottom: 11.544%; margin-bottom: 55px; } /*product*/ #product ul { overflow: hidden; width: 101%; } #product li { float: left; width: 19%; padding: 0.5% 1% .5% 0; } #product .thumbnail { margin-bottom: 10px; } #product .title { font-size: 14px; line-height: 1.5em; font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; } /*proList*/ #proList ul { overflow: hidden; width: 102%; } #proList li { float: left; width: 31.333%; padding: 0 2% 2% 0; } #proList .thumbnail { margin-bottom: 10px; } #proList .title { font-size: 14px; line-height: 1.5em; font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; } /*文章列表*/ .blogItem { overflow: hidden; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px dashed #e4e4e4; } .blogItem .thumbnail { float: left; width: 250px; } .blogItem .info { margin-left: 265px; overflow: hidden; padding: 5px 0; } .blogItem .title { line-height: 1.35em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 18px; margin-bottom: 5px; } .blogItem .meta { color: #888; margin-bottom: 5px; overflow: hidden; } .blogItem .meta a { color: #888; } .blogItem .meta span { font-size: 12px; background: no-repeat left center; padding: 0 16px; background-size: auto 10px; display: block; float: left; } .blogItem .meta .views { float: right; padding-right: 0; background-image: url(../images/icon_01.png); } .blogItem .meta .tag { background-image: url(../images/icon_02.png); } .blogItem .meta .date { background-image: url(../images/icon_03.png); } .blogItem .intro { font-size: 14px; color: #666; line-height: 1.75em; height: 5.25em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; margin-bottom: 13px; text-align: justify; } .blogItem .more { overflow: hidden; } .blogItem .more a { display: block; float: right; color: #fff; background-color: #37408e; padding: 0 10px; font-size: 12px; height: 26px; line-height: 26px; } .blogItem .more a:hover { opacity: .75; } /*pagenavi*/ #pagenavi { clear: both; font-size: 0; line-height: normal; text-align: center; } #pagenavi a, #pagenavi span.now-page { display: inline-block; font-size: 14px; height: 32px; line-height: 32px; padding: 0 12px; background-color: #f1f1f1; color: #888; margin: 2px; } #pagenavi span.now-page, #pagenavi a:hover { background-color: #37408e; color: #fff; } /*侧边*/ #sidebar { width: 300px; } /*侧边*/ .widget ul { overflow: hidden; } .widget li { overflow: hidden; font-size: 14px; line-height: 1.875em; } .widget img { max-width: 100%; height: auto; } .widget .custom { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px dashed #e4e4e4; } .widget .custom:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .widget .thumbnail { width: 100px; float: left; } .widget .info { margin-left: 110px; } .widget h2 { font-size: 14px; line-height: 1.75em; height: 3.5em; color: #333; overflow: hidden; margin-bottom: 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .widget .meta { font-size: 12px; line-height: 1.5em; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: no-repeat left center; background-size: auto 12px; padding-left: 17px; } .widget .views { background-image: url(../images/icon_01.png); } .widget .cmt { background-image: url(../images/icon_04.png); } .widget .date { background-image: url(../images/icon_03.png); } /*textwidget*/ .textwidget a { display: block; } .textwidget img { display: block; } /*divStatistics*/ #divStatistics li { display: table; width: 100%; table-layout: fixed; padding: 2px 0; color: #555; } #divStatistics li span { display: table-cell; vertical-align: top; } #divStatistics li .left { width: 5em; } #divStatistics li .right { text-align: right; } #divStatistics li i { font-style: normal; } /*divComments*/ #divComments li { overflow: hidden; color: #444; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px dashed #e4e4e4; text-align: justify; } #divComments li:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; } #divComments li .top { border: 1px solid #eee; padding: 5px 10px; font-size: 12px; line-height: 1.75em; color: #999; position: relative; margin-bottom: 10px; } #divComments li .top:after { content: ''; display: block; width: 7px; height: 7px; border-right: 1px solid #eee; border-bottom: 1px solid #eee; background-color: #fff; transform: rotate(45deg); position: absolute; bottom: -5px; left: 7px; } #divComments li .avatar { float: left; width: 24px; height: 24px; overflow: hidden; border-radius: 50%; } #divComments li img { display: block; width: 100%; height: 100%; object-fit: cover; } #divComments li .text { margin-left: 30px; line-height: 24px; max-height: 48px; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #divComments li a { overflow: hidden; color: #555; } /*divPrevious*/ #divPrevious li { position: relative; padding: 0 0 10px 10px; margin-bottom: 10px; border-bottom: 1px dashed #e4e4e4; } #divPrevious li:before { width: 3.5px; height: 3.5px; content: ''; display: block; background-color: #37408e; position: absolute; left: 0; top: 12px; } #divPrevious li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } /*divSearchPanel*/ #divSearchPanel input[type='text'] { height: 24px; line-height: 24px; padding: 5px 3%; border: 1px solid #e4e4e4; width: 94%; } #divSearchPanel input[type='submit'] { color: #fff; position: absolute; right: 0; top: 0; height: 100%; width: 40px; background-color: #37408e; cursor: pointer; } #divSearchPanel form { position: relative; padding-right: 40px; overflow: hidden; } /*divLinkage*/ #divLinkage li, #divCatalog li, #divMisc li { float: left; width: 48%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 1% 0; } #divLinkage li:nth-child(2n), #divCatalog li:nth-child(2n), #divMisc li:nth-child(2n) { float: right; } #divLinkage li a, #divCatalog li a { background-color: #f9f9f9; color: #555; padding: 5px 10px; display: block; } #divLinkage li { padding: 0 0 2%; } /*divMisc*/ #divMisc a { display: block; } #divMisc img { display: block; } /*divTags*/ #divTags ul { overflow: hidden; width: 102%; } #divTags li { float: left; padding: 1% 2% 1% 0; } #divTags li a { display: block; background-color: #f9f9f9; border-radius: 0px; padding: 0 10px; color: #fff; font-size: 12px; } #divTags li a:hover { opacity: .8; } #divTags li:nth-child(8n-7) a { background-color: #8A9B0F; } #divTags li:nth-child(8n-6) a { background-color: #EB6841; } #divTags li:nth-child(8n-5) a { background-color: #3FB8AF; } #divTags li:nth-child(8n-4) a { background-color: #FE4365; } #divTags li:nth-child(8n-3) a { background-color: #FC9D9A; } #divTags li:nth-child(8n-2) a { background-color: #EDC951; } #divTags li:nth-child(8n-1) a { background-color: #C8C8A9; } #divTags li:nth-child(8n) a { background-color: #83AF9B; } #divTags li:first-child a { background-color: #E1474D; } #divTags li:last-child a { background-color: #3299BB; } /*divCalendar*/ #divCalendar caption { margin-bottom: 10px; font-size: 0; line-height: normal; } #divCalendar caption a { display: inline-block; font-size: 16px; line-height: 1.35em; margin: 0 5px; vertical-align: middle; font-weight: bold; } #divCalendar td, #divCalendar th { width: 13.285%; padding: 0 0.5%; text-align: center; font-size: 14px; } #divCalendar td a { padding: 10%; background-color: #37408e; border-radius: 50%; color: #fff; } /*sideMenu*/ #sideMenu li{font-size: 16px; line-height: 1.875em; border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 10px;} #sideMenu li:last-child {margin-bottom: 0;} #sideMenu li a {color: #333; display: block;} /*entry*/ .entry { font-size: 16px; line-height: 1.875em; overflow: hidden; } .entry img { max-width: 100%; height: auto !important; } .entry blockquote { margin: 0 2em 15px; overflow: hidden; padding: 15px 15px 0; color: #555; background-color: #f9f9f9; font-style: italic; } .entry ul, .entry ol { margin-bottom: 15px; margin-left: 2em; padding-left: 1em; } .entry ul li { list-style: outside disc none; } .entry ol li { list-style: outside decimal none; } .entry li p { margin-bottom: 0; } .entry p, .entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6 { margin-bottom: 15px; } .entry a { color: #37408e; text-decoration: underline; } .entry hr { border: none; margin-bottom: 15px; border-bottom: 1px solid #e4e4e4; overflow: hidden; clear: both; } /*postTags _aiyuanma*/ #postTags { font-size: 14px; line-height: 1.75em; } #postTags span { font-weight: bold; color: #000; } #postTags a { margin: 0 1.5%; } /*postnavi*/ #postnavi { font-weight: bold; font-size: 14px; line-height: 1.75em; overflow: hidden;} #postnavi .prev, #postnavi .next { width: 45%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #postnavi .prev { float: left; } #postnavi .next { float: right; text-align: right; } /*breadcrumb*/ #breadcrumb { font-size: 14px; line-height: 1.5em; color: #eee; position:absolute; right:15px; top:50%; transform:translateY(-50%); } #breadcrumb a { color: #eee; padding-right: 0; font-size: 14px; } #breadcrumb a:after { display: none; } #breadcrumb .home { background: url(../images/icon_home.png) no-repeat left; background-size: auto 14px; padding-left: 20px; } #breadcrumb i { font-style: normal; font-family: 'Simsun'; margin: 0 5px 0 3px; color: #eee; } /*postTitle aiyuanma_*/ #postTitle { font-size: 24px; text-align: center; line-height: 1.5em; padding: 2% 0 3%; } /*postmeta*/ #postmeta { font-size: 0; line-height: normal; text-align: center; margin-bottom: 2.5%; border-bottom: 1px dashed #eee; padding-bottom: 2.5%; } #postmeta span { font-size: 14px; color: #888; margin: 0 10px; display: inline-block; background: no-repeat left center; padding-left: 20px; background-size: auto 12px; } #postmeta a { color: #888; } #postmeta a:hover { color: #37408e; } #postmeta .views { background-image: url(../images/icon_01.png); } #postmeta .tag { background-image: url(../images/icon_02.png); } #postmeta .date { background-image: url(../images/icon_03.png); } /*errorPage*/ #errorPage #postTitle { margin-top: 10%; } #errorPage .entry { text-align: center; margin-bottom: 15%; } /*related*/ #related ul { overflow: hidden; width: 102%; } #related li { float: left; width: 23%; padding: 1% 2% 1% 0; } #related .thumbnail { margin-bottom: 5px; } #related h4 { font-size: 14px; line-height: 1.75em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; } /*links*/ #links ul { overflow: hidden; width: 102%; } #links li { font-size: 14px; line-height: 1.75em; padding: 0.5% 1% 0.5% 0; float: left; } /*comment*/ #comment { position: relative; overflow: hidden; } #comment .item { margin-bottom: 2%; position: relative; } #comment label { display: block; font-size: 14px; line-height: 1.75em; color: #555; margin-bottom: 5px; } #comment label i { font-style: normal; color: #f00; font-size: 12px; margin-left: 5px; } #comment .input { border: 1px solid #e4e4e4; overflow: hidden; } #comment .text { font-size: 14px; line-height: 24px; padding: 5px 5%; width: 90%; display: block; border: none; border-radius: 3px; color: #555; font-family: 'Microsoft Yahei'; } #comment textarea.text { height: 110px; resize: vertical; padding: 5px 1.5%; width: 97%; } #comment .inp { width: 102%; overflow: hidden; } #comment .inp .item { float: left; width: 31.333%; padding-right: 2%; } #comment .verify { width: 130px; float: left; margin-bottom: 0; } #comment .verify img { display: block; cursor: pointer; height: 36px; width: auto; position: absolute; left: 110%; bottom: 0; } #comment .btn { overflow: hidden; padding-top: 30.5px; margin-left: 250px; } #comment .submit { float: right; background-color: #37408e; border: none; width: 100px; height: 35px; color: #fff; font-size: 14px; border-radius: 3px; cursor: pointer; } #comment .submit:hover { opacity: .85; } #cancel-reply { font-size: 12px; color: #999; line-height: 2em; float: right; padding-right: 10px; line-height: 35px;} /*warning*/ .warning { font-size: 12px; color: #999; line-height: 2em; clear: both; margin-bottom: 2%; } /*commentslist*/ #commentslist { overflow: hidden; } #commentslist li { position: relative; padding-bottom: 15px; margin-bottom: 20px; border-bottom: 1px solid #f6f6f6; overflow: hidden; } #commentslist .avatar { float: left; padding: 3px 0; } #commentslist .avatar img { width: 40px; height: 40px; display: block; } #commentslist .info { margin-left: 55px; overflow: hidden; } #commentslist .meta { overflow: hidden; font-size: 12px; line-height: 1.35em; color: #999; margin-bottom: 10px; } #commentslist .meta span { display: block; float: left; } #commentslist .meta .reply { float: right; } #commentslist .meta a { color: #37408e; } #commentslist .user { font-size: 16px; font-weight: bold; line-height: 1.5em; color: #333; margin-bottom: 5px; } #commentslist .user a { color: #333; } #commentslist .text { font-size: 14px; line-height: 2em; color: #666; } #commentslist .text li { margin-left: 0; } #commentslist li li { margin: 15px 0 5px 55px; background-color: #f9f9f9; padding: 15px; border-bottom: none; } #commentslist li li li { margin: 10px 10px 5px; background-color: #fff; border: 1px solid #e5e5e5; } /*footer*/ #footer { line-height: 26px; font-size: 14px; padding: 2.5% 20px; background-color: #f6f6f6; border: 1px solid #eee; border-bottom: 0; border-radius: 6px 6px 0 0; color: #666;} #footer a {color: #666;} #footer a:hover {color: #333;} /*social*/ #social { float: right; } #social ul { font-size: 0; line-height: normal; padding: 2px 0; } #social li { display: inline-block; margin-left: 20px; position: relative; } #social a { display: block; overflow: hidden; width: 22px; height: 22px; background: no-repeat center center; background-size: contain; opacity: .5; } #social a:hover { opacity: 1; } #social .wx a { background-image: url(../images/icon_wechat.png); } #social .wb a { background-image: url(../images/icon_weibo.png); } #social .qq a { background-image: url(../images/icon_qq.png); } #social .em a { background-image: url(../images/icon_email.png); } #social .qr { position: absolute; left: 50%; transform: translateX(-50%); bottom: 100%; background-color: #fff; padding: 5px; width: 100px; margin-bottom: 10px; border: 1px solid #e4e4e4; display: none; } #social .qr:after { width: 7px; height: 7px; background-color: #fff; border-right: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4; transform: rotate(45deg); content: ''; display: block; position: absolute; left: 50%; margin-left: -5px; bottom: -5px; } #social img { display: block; width: 100%; height: auto; } /*copyright*/ #copyright { margin-right: 168px; } #copyright a {display: inline-block;} #copyright img {display: inline-block; vertical-align: middle; width: auto; height: 20px; margin-top: -4px;} /*screen width*/ @media only screen and (max-width:1600px) { /*1536px*/ .inner { width: 87.5%; } } @media only screen and (max-width:1280px) { /*1280px*/ #logo { width: 214px; } #logo a { height: 48px; } /*1280px*/ #search form {width: 80%;} #search .text { height: 24px; line-height: 24px; } #search .submit { width: 46px; height: 46px; } #search .input { margin-right: 46px; } /*1280px*/ #nav li { line-height: 50px; } /*1280px*/ #showcase .slick-load { width: 101.282%; } #showcase .info { margin-right: 6.329%; } /*1280px*/ #sidebar { width: 280px; } } @media only screen and (max-width:1024px) { /*1024px*/ .inner {width: auto;} /*1024px*/ #top {box-shadow: 0px 2px 5px rgba(0,0,0,.35); position: relative; z-index: 10;} /*1024px*/ #topbar {border-radius: 0; border-left: none; border-right: none; } /*1024px*/ #welcome {float: none; padding:0 3.125%;} /*1024px*/ #header {width: auto; padding: 20px 3.125%; display: block; position: relative;} #header .td {display: block;} #header .clear {width: 100%; display: block;} #header #hotTel {display: none;} /*1024px*/ #logo { float: left; width: auto; } #logo a { width: 178px; height: 40px; } /*1024px*/ /*1024px*/ #topBtn { position: absolute; right: 3.125%; top: 50%; transform: translateY(-50%); width: auto; } /*1024px*/ #schBtn { display: block; } /*1024px*/ #search.td { display: none; } #search { padding: 0; margin: 0 80px; position: absolute; top: 50%; transform: translateY(-50%); right: 3.125%; width: 350px; } #search .text { padding: 6px 3%; width: 94%; font-size: 14px; text-indent: 0; } #search .submit { width: 40px; height: 40px; } #search .input { margin-right: 40px; } /*1024px*/ #navBtn { display: inline-block; } /*1024px*/ #nav { position: fixed; left: -100%; top: 0; height: 100%; width: 100%; margin: 0; cursor: pointer; background-color: #fff; z-index: 9; overflow-y: auto; -webkit-overflow-scrolling:touch; transition: left .3s;} #nav.active { left: 0; } #nav ul { padding: 130px 0; } #nav li { display: block; width: auto; text-align: left; } #nav li a { color: #333; margin: 0 3.125%; padding:0 50px 0 0; } #nav li a:hover { background-color: transparent; } #nav li ul { padding: 0; display: none; width: auto; position: static; left: auto; top: auto; background-color: transparent; box-shadow: none; } #nav li li { text-align: left; font-size: 14px; line-height: 40px; font-weight: bold; } #nav li li a { padding: 0 0 0 2em; } #nav li.hasSub > a::after { display: none; } #nav li em { width: 50px; height: 50px; top: 0; right: 0; z-index: 2; transform: none; display: block; } #nav li em:after { width: 6px; height: 6px; border-color: #333; transform: rotate(-45deg); margin-left: -4px; transition: all .3s; } #nav li em.open:after { transform: rotate(45deg); } /*1024px*/ .boxTitle {border-radius: 0; padding-left: 3.125%; padding-right: 3.125%;} .boxTitle span, .boxTitle .arrow {right: 3.125%;} /*1024px*/ .table, .table .td { display: block; width: auto; } /*1024px*/ #main.td { padding-left: 0; } /*1024px*/ #slides {border-radius: 0; margin-bottom: 0;} /*1024px*/ #sidebar { width: auto; display: none;} /*1024px*/ #divTags li { padding: 0.5% 1% 0.5% 0; } /*1024px*/ #product { margin-bottom: 1.5625%; } /*1024px*/ #showcase .slick-load { width: 101%; } #showcase .info { margin-right: 4.5%; } /*1024px*/ #about .info {padding-left:3.125%; padding-right:3.125%;} #about .pic {width: 300px;} #about .text {margin-left: 325px;} #about .intro {height: 225px;} /*1024px*/ #product .box, #showcase .box, #news ul, #links .box, #blogList, #proList {padding: 0 3.125%;} /*1024px*/ #footer { padding: 20px 3.125%; border-radius: 0; border-left:none; border-right:none; } /*1024px*/ #article .box {padding: 0 3.125%;} /*1024px*/ .entry {font-size: 14px; line-height: 1.75em;} } @media only screen and (max-width:768px) { #slides .pic { height:200px; } /*768px*/ .dot { padding-left: 10px; } .mb {margin-bottom: 15px;} /*768px*/ #logo a { height: 30px; width: 134px; } /*768px*/ #search { position: absolute; top: 100%; right: 0; width: 100%; margin: 0; background-color: #37408e; transform: none; padding:5px 0; } #search form {width: 96.875%; float: none; padding-left: 3.125%;} #search .input {border-radius: 0;} /*768px*/ #nav li { font-size: 14px; line-height: 40px; } #nav li a {padding-right: 40px; } #nav li em { width: 40px; height: 40px; } /*768px*/ #slides .wap {display: block;} #slides .pc {display: none;} #slides .slick-arrow { width: 20px; height: 30px; } #slides .slick-prev:after, #slides .slick-next:after { width: 8px; height: 13px; margin-left: -4px; } #slides .slick-prev { left: 0; } #slides .slick-next { right: 0; } #slides .slick-dots { bottom: 35px; } /*768px*/ .boxTitle {margin-bottom: 10px;} .boxTitle .name { font-size: 14px; } .boxTitle .slick-arrow { width: 20px; height: 20px;} /*768px*/ #product ul { width: 103%; } #product li { width: 47%; padding: 1.5% 3% 0 0; } #product .thumbnail { margin-bottom: 5px; } #product .title { margin-bottom: 5px; } /*768px*/ #blogList {padding-top: 5px;} .blogItem { margin-bottom: 15px; padding-bottom: 15px; } .blogItem .thumbnail { width: 100px; } .blogItem .info { margin-left: 115px; padding: 0; } .blogItem .info h2 { font-size: 14px; line-height: 1.75em; max-height: 3.5em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 0; white-space: normal; white-space: normal; } .blogItem .intro { white-space: nowrap; display: block; height: auto; margin-bottom: 0; } .blogItem .meta, .blogItem .more { display: none; } /*768px*/ #pagenavi a, #pagenavi span.now-page { font-size: 12px; height: 28px; line-height: 28px; } /*768px*/ .widget .info { margin-left: 110px; } .widget .custom { margin-bottom: 10px; padding-bottom: 10px; } /*768px*/ #divComments li { margin-bottom: 12px; padding-bottom: 8px; } /*768px*/ #divStatistics li { padding: 1px 0; } /*768px*/ #footer {line-height: 1.75em;} /*768px*/ #copyright { text-align: center; font-size: 12px; margin-right: 0; } /*768px*/ #social { float: none; margin-bottom: 5px; } #social ul { text-align: center; } /*768px*/ #related ul { width: 105%; } #related li { width: 45%; padding: 2% 5% 2% 0; } /*768px*/ #postnavi { font-weight: normal; line-height: 2em; } #postnavi .prev, #postnavi .next { float: none; width: auto; text-align: left; } /*768px*/ .entry p, .entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6, .entry hr, .entry blockquote, .entry ol, .entry ul { margin-bottom: 3%; } /*768px*/ #postTitle { font-size: 20px; padding: 3% 0 4%; } /*768px*/ #postmeta { margin-bottom: 3%; padding-bottom: 3%; } #postmeta span { margin: 0 5px; font-size: 12px; background-size: auto 12px; padding-left: 18px; } /*768px*/ #breadcrumb { line-height: 22px; } #breadcrumb a { font-size: 12px; } #breadcrumb .home { background-size: auto 12px; padding-left: 18px; } /*768px*/ #comment .inp { width: auto; } #comment .inp .item { float: none; width: auto; padding-right: 0; } #comment .verify { width: auto; float: none; padding-right: 110px; margin-bottom: 10px; } #comment .verify img { left: auto; right: 0; } #comment .btn { clear: both; padding: 2% 0; overflow: hidden; margin-left: 0; } #comment .submit { height: 30px; width: 100%; } /*768px*/ #commentslist li { padding-bottom: 10px; margin-bottom: 10px; } #commentslist .avatar img { width: 30px; height: 30px; } #commentslist .info { margin-left: 40px; } #commentslist .meta { margin-bottom: 5px; } #commentslist .user { font-size: 14px; } #commentslist li li { margin: 10px 0 5px 40px; padding: 10px; } #commentslist li li li { margin: 5px; } /*768px*/ #pagelist { display: none; } /*768px*/ #links li { padding: 0 10px 0 0; } /*768px*/ #showcase .boxTitle {margin-bottom: 15px;} #showcase .slick-load { width: 102.521%; } #showcase .info { margin-right: 5.848%; } #showcase .thumbnail { margin-bottom: 5px; } /*768px*/ #news li:nth-child(2n), #news li {float: none; width: auto; line-height: 30px; } /*768px*/ #about .info {padding-top: 5px; padding-bottom: 0;} #about .pic {float: none; width: auto; margin-bottom: 15px;} #about .text {margin-left: 0; line-height: 1.75em;} #about .intro {height: 250px;} /*768px*/ #proList ul {width: 103%;} #proList li {width: 47%; padding: 0 3% 3% 0;} } #maximg img{ max-width:100% !important; height:auto !important} .pagebar { padding:20px; overflow:hidden; clear:both} .pagebar .pagination { display: flex; justify-content: center; margin-top: 10px; } .pagination a { background: #fff; border: 1px solid #ccc; color: #333; font-size: 12px; padding: 8px 10px; margin: 0 2px; border-radius: 3px; line-height:100% } .pagination span { color: #333; font-size: 12px; padding: 7px 2px; margin: 0 2px; border-radius: 3px; } .pagination a:hover { color: #333; border: 1px solid #333; } .pagination a.page-num-current { color: #fff; background: #333; border: 1px solid #333; } .pagination .st{ font-family:宋体} .text-secondary{ text-align:center; padding:20px 0} /* ===== 首页 PRODUCTS：4上4下 圆形分类图 ===== */ #product .box ul{ display: flex; flex-wrap: wrap; width: 100% !important; gap: 42px 0; /* 行距，可调 */ } /* 4列 */ #product .box li{ width: 25% !important; /* 4个一排 */ padding: 0 !important; float: none !important; text-align: center; box-sizing: border-box; } /* 圆图容器 */ #product .thumbnail{ width: 220px; /* 圆的大小，可调 */ max-width: 90%; margin: 0 auto 14px; border-radius: 50%; overflow: hidden; border: 2px solid #37408e; box-sizing: border-box; } /* 覆盖通用 .thumbnail a 的 padding-bottom:75%，改成正方形 */ #product .thumbnail a{ display: block; width: 100%; aspect-ratio: 1 / 1; padding-bottom: 0 !important; position: relative; background: none; } /* 图片铺满并裁圆 */ #product .thumbnail img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; transition: transform .3s; } #product .thumbnail img:hover{ transform: scale(1.08); } /* 标题居中 */ #product .title{ text-align: center; font-size: 14px; line-height: 1.5em; font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 平板2列，手机2列或1列你可选 */ @media only screen and (max-width: 1024px){ #product .box li{ width: 50% !important; } #product .thumbnail{ width: 200px; } } @media only screen and (max-width: 768px){ #product .box li{ width: 50% !important; } /* 想手机1列就改成100% */ #product .thumbnail{ width: 170px; } #product .box ul{ gap: 26px 0; } } /* 去掉圆形外边框 */ #product .thumbnail{ border: none !important; } /* SHOWCASE 标题居中到图片下方 */ #showcase .title{ text-align: center; } /* ========================= H&C 轻奢高端配色（强烈高级感） 深墨蓝 + 香槟金 + 奶油白 放在CSS最底部覆盖 ========================= */ :root{ --bg: #F7F3EE; /* 奶油白背景（高级） */ --card: #FFFFFF; /* 卡片白 */ --text: #121316; /* 高级黑 */ --muted: #6B6F76; /* 次级灰 */ --ink: #0F1733; /* 主色：深墨蓝（比现在更高级） */ --ink-2: #1B2A5A; /* 辅助深蓝（渐变/hover） */ --gold: #C7A46A; /* 香槟金（高级点睛） */ --gold-2:#E0C796; /* 浅香槟金 */ --line: rgba(15,23,51,.10); /* 柔和边框线 */ --shadow: 0 14px 40px rgba(18,19,22,.12); --shadow-soft: 0 10px 25px rgba(18,19,22,.10); } /* 1) 全局 */ body{ background: var(--bg) !important; color: var(--text) !important; } a{ color: var(--text) !important; } a:hover{ color: var(--gold) !important; } /* 2) 导航：深墨蓝 + 金色细节 */ #nav{ background: linear-gradient(90deg, var(--ink), #0B1026) !important; border-radius: 14px !important; box-shadow: var(--shadow); border: 1px solid rgba(199,164,106,.22); } #nav li a{ color: rgba(255,255,255,.92) !important; letter-spacing: .35px; } #nav li.on > a, #nav li.cur > a, #nav li a:hover{ background: rgba(199,164,106,.14) !important; /* 金色透明铺底 */ } /* 3) 模块标题条：轻奢金线 + 深色渐变（高级感核心） */ .boxTitle{ background: linear-gradient(90deg, var(--ink), var(--ink-2)) !important; border-bottom: none !important; border-radius: 14px !important; padding: 12px 18px 10px !important; box-shadow: 0 14px 30px rgba(15,23,51,.20); position: relative; overflow: hidden; } /* 顶部金色细线（很“贵”） */ .boxTitle:before{ content:""; position:absolute; left:0; top:0; height:2px; width:100%; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity:.9; } .boxTitle:after{ display:none !important; } .boxTitle .name, .boxTitle .name a, .boxTitle span a, .boxTitle i{ color:#fff !important; } .boxTitle span a{ opacity:.95; } .boxTitle span a:hover{ color: var(--gold-2) !important; } .boxTitle span a:after{ border-right: 1px solid rgba(224,199,150,.85) !important; border-bottom: 1px solid rgba(224,199,150,.85) !important; } /* 4) 搜索：深墨蓝按钮 + 金色细节 */ #search .submit{ background: linear-gradient(180deg, var(--ink-2), var(--ink)) !important; border-radius: 12px !important; box-shadow: var(--shadow-soft); } #search .input{ border: 1px solid rgba(15,23,51,.25) !important; border-right: none !important; border-top-left-radius: 12px !important; border-bottom-left-radius: 12px !important; background: rgba(255,255,255,.85) !important; } #search form{ border-radius: 12px !important; } /* 5) 卡片/图片区：统一圆角 + 高级阴影 */ #slides, #product .thumbnail, #showcase .thumbnail, .blogItem, .widget .custom{ border-radius: 18px !important; } .thumbnail img{ border-radius: 18px !important; } .thumbnail img:hover{ transform: scale(1.05) !important; } /* 6) 内容容器更“卡片化”（看起来更贵） */ #slides, #about .info, #product .box, #showcase .box, #news ul, #links .box, #blogList, #proList, #article .box{ background: var(--card) !important; border: 1px solid var(--line) !important; box-shadow: var(--shadow-soft); border-radius: 18px !important; padding: 18px !important; } /* 7) SHOWCASE / PRODUCTS 标题更精致 */ #showcase .title, #product .title{ color: var(--text) !important; } #showcase .title{ text-align: center !important; font-weight: 600; letter-spacing: .25px; } /* 8) 边框与表格：更轻奢 */ table{ border-top: 1px solid rgba(15,23,51,.10) !important; border-left: 1px solid rgba(15,23,51,.10) !important; } table td, table th{ border: 1px solid rgba(15,23,51,.10) !important; } table th{ background: linear-gradient(180deg, #FCFAF7, #F3EEE7) !important; color: var(--text) !important; } /* 9) 分页/按钮：金色强调 */ #pagenavi a, #pagenavi span.now-page{ background: rgba(255,255,255,.75) !important; color: var(--muted) !important; border-radius: 12px !important; border: 1px solid rgba(15,23,51,.10) !important; } #pagenavi a:hover{ border-color: rgba(199,164,106,.55) !important; color: var(--gold) !important; } #pagenavi span.now-page{ background: linear-gradient(180deg, var(--ink-2), var(--ink)) !important; color:#fff !important; border: 1px solid rgba(199,164,106,.35) !important; } /* 10) dot 小圆点：用金色点缀 */ .dot:before{ background-color: var(--gold) !important; } /* 11) footer 更高级（奶油白底 + 深墨文字） */ #footer{ background: linear-gradient(180deg, #F3EEE7, #EFE7DD) !important; border: 1px solid rgba(15,23,51,.10) !important; border-radius: 18px 18px 0 0 !important; color: rgba(15,23,51,.70) !important; } #footer a{ color: rgba(15,23,51,.70) !important; } #footer a:hover{ color: var(--ink) !important; } /* 12)（可选）给圆形分类图加“金色细圈”会更贵 你原来最后写了 border:none，如果想更高级，把那行注释掉， 然后启用下面这段： */ /* #product .thumbnail{ border: 1px solid rgba(199,164,106,.35) !important; box-shadow: 0 14px 30px rgba(18,19,22,.10); } */ /* ===== 高端下拉菜单配色（覆盖原蓝色） ===== */ /* 一级菜单背景 */ #nav { background: linear-gradient(90deg, #0F1733, #1B2A5A) !important; } /* 二级下拉框整体 */ #nav li ul { background: linear-gradient(180deg, #0F1733, #16204A) !important; border: 1px solid rgba(199,164,106,.35) !important; /* 香槟金细边 */ box-shadow: 0 20px 40px rgba(0,0,0,.25) !important; border-radius: 10px; } /* 二级菜单文字 */ #nav li li a { color: rgba(255,255,255,.92) !important; font-weight: 500; letter-spacing: .3px; } /* 悬停效果（高级金色高亮） */ #nav li li a:hover { background: rgba(199,164,106,.18) !important; color: #E8C98B !important; } /* PRODUCTS 列与 MEN/WOMEN/KID 分栏统一风格 */ #nav li.hasSub > ul > li { border-bottom: 1px solid rgba(255,255,255,.06); } #nav li.hasSub > ul > li:last-child { border-bottom: none; } /* 箭头颜色改为香槟金 */ #nav li em:after, #nav li.hasSub > a:after { border-right: 1px solid #E0C796 !important; border-bottom: 1px solid #E0C796 !important; } /* ===== 右侧 MEN / WOMEN / KID 下拉栏 高级配色覆盖 ===== */ /* 第三级菜单背景（右侧那一列） */ #nav li ul li ul{ background: linear-gradient(180deg, #0F1733, #1B2A5A) !important; /* 深墨蓝渐变 */ border-left: 1px solid rgba(199,164,106,.35) !important; /* 香槟金分隔线 */ box-shadow: 0 20px 40px rgba(0,0,0,.25) !important; border-radius: 0 10px 10px 0; } /* 第三级菜单文字 */ #nav li ul li ul li a{ color: rgba(255,255,255,.95) !important; font-weight: 500; letter-spacing: .3px; } /* 悬停高亮（香槟金光感） */ #nav li ul li ul li a:hover{ background: rgba(199,164,106,.18) !important; color: #E8C98B !important; } /* 当前高亮项 */ #nav li ul li ul li.cur > a{ background: rgba(199,164,106,.22) !important; color: #E8C98B !important; } /* ===== 顶级高级感黑金渐变导航覆盖 ===== */ /* 二级菜单背景（UNDERWEAR 那一列） */ #nav li ul{ background: linear-gradient(180deg, #0B0F1C, #141A2E) !important; box-shadow: 0 20px 40px rgba(0,0,0,.35) !important; border-radius: 12px !important; } /* 三级菜单背景（MEN / WOMEN / KID 那一列） */ #nav li ul li ul{ background: linear-gradient(180deg, #10162A, #1B2340) !important; border-left: 1px solid rgba(212,175,110,.35) !important; box-shadow: 0 20px 40px rgba(0,0,0,.35) !important; } /* 菜单文字 */ #nav li ul li a{ color: rgba(255,255,255,.92) !important; letter-spacing: .5px; } /* 悬停效果（香槟金） */ #nav li ul li a:hover{ background: rgba(212,175,110,.18) !important; color: #E6C47A !important; } /* 当前高亮项 */ #nav li ul li.cur > a, #nav li ul li.on > a{ background: rgba(212,175,110,.25) !important; color: #E6C47A !important; } /* 去掉原来蓝色选中块 */ #nav li ul li ul li a{ background: transparent !important; } /* ========================= FINAL OVERRIDE（放最底部） 高级深色导航 + 香槟金点缀 并修复面包屑看不清 ========================= */ /* 0) 面包屑（你截图看不清的地方） */ #breadcrumb{ color: rgba(255,255,255,.92) !important; font-weight: 600 !important; letter-spacing: .3px; text-shadow: 0 1px 2px rgba(0,0,0,.45); background: rgba(0,0,0,.28); /* 关键：加一层轻薄底 */ padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.10); backdrop-filter: blur(6px); } #breadcrumb a{ color: rgba(255,255,255,.92) !important; } #breadcrumb a:hover{ color: #E6C47A !important; } #breadcrumb i{ color: rgba(230,196,122,.95) !important; /* 分隔符变香槟金 */ } /* 1) 一级导航条 */ #nav{ background: linear-gradient(90deg, #070A12, #0E1630) !important; border-radius: 14px !important; border: 1px solid rgba(230,196,122,.18) !important; box-shadow: 0 18px 50px rgba(0,0,0,.28) !important; } /* 一级菜单文字 */ #nav > ul > li > a{ color: rgba(255,255,255,.92) !important; letter-spacing: .4px; } /* 一级 hover / 当前 */ #nav > ul > li.on > a, #nav > ul > li.cur > a, #nav > ul > li > a:hover{ background: rgba(230,196,122,.12) !important; color: #FFF !important; } /* 2) 二级下拉（UNDERWEAR 那列）——强制覆盖原 #37408e */ #nav > ul > li > ul{ background: linear-gradient(180deg, #0B1022, #111B35) !important; border: 1px solid rgba(230,196,122,.22) !important; box-shadow: 0 22px 55px rgba(0,0,0,.35) !important; border-radius: 12px !important; padding: 10px 0 !important; } /* 二级文字 */ #nav > ul > li > ul > li > a{ color: rgba(255,255,255,.92) !important; font-weight: 600 !important; letter-spacing: .35px; } /* 二级 hover */ #nav > ul > li > ul > li > a:hover{ background: rgba(230,196,122,.14) !important; color: #E6C47A !important; } /* 3) 三级下拉（MEN/WOMEN/KID 那列）——强制覆盖浅蓝 */ #nav > ul > li > ul > li > ul{ background: linear-gradient(180deg, #101A34, #182750) !important; border-left: 1px solid rgba(230,196,122,.22) !important; box-shadow: 0 22px 55px rgba(0,0,0,.35) !important; border-radius: 12px !important; padding: 10px 0 !important; min-width: 160px; } /* 三级文字 */ #nav > ul > li > ul > li > ul > li > a{ color: rgba(255,255,255,.92) !important; font-weight: 600 !important; letter-spacing: .35px; background: transparent !important; } /* 三级 hover / 当前 */ #nav > ul > li > ul > li > ul > li > a:hover, #nav > ul > li > ul > li > ul > li.cur > a, #nav > ul > li > ul > li > ul > li.on > a{ background: rgba(230,196,122,.14) !important; color: #E6C47A !important; } /* 4) 下拉项之间的细分隔线（更精致） */ #nav li ul li{ border-bottom: 1px solid rgba(255,255,255,.06) !important; } #nav li ul li:last-child{ border-bottom: none !important; } /* 5) 下拉箭头改香槟金 */ #nav li em:after, #nav li.hasSub > a:after{ border-right: 1px solid rgba(230,196,122,.90) !important; border-bottom: 1px solid rgba(230,196,122,.90) !important; } /* 6) 你模板里的第三级 dl.sanji 也一起强制覆盖（防止又冒出蓝色） */ .sanji{ background: linear-gradient(180deg, #101A34, #182750) !important; border-left: 1px solid rgba(230,196,122,.22) !important; box-shadow: 0 22px 55px rgba(0,0,0,.35) !important; border-radius: 12px !important; } .sanji dd a{ color: rgba(255,255,255,.92) !important; font-weight: 600 !important; } .sanji dd a:hover{ background: rgba(230,196,122,.14) !important; color: #E6C47A !important; } /* 7) 移动端：保持可读性 */ @media only screen and (max-width: 800px){ #breadcrumb{ background: rgba(0,0,0,.18); border-color: rgba(0,0,0,.10); } } /* ========================= MOBILE NAV FINAL FIX 放在CSS最底部（最后一段） ========================= */ @media only screen and (max-width:1024px){ /* 移动端整块导航别再是白底 */ #nav{ background: linear-gradient(180deg, #070A12, #0E1630) !important; } /* 一级菜单文字改白 */ #nav > ul > li > a{ color: rgba(255,255,255,.92) !important; } /* 一级 hover/当前 */ #nav > ul > li.on > a, #nav > ul > li.cur > a, #nav > ul > li > a:hover{ background: rgba(230,196,122,.12) !important; color: #fff !important; } /* 二级容器：原来被你设成 transparent，手机端这里强制改深色 */ #nav li ul{ background: linear-gradient(180deg, #0B1022, #111B35) !important; border: 1px solid rgba(230,196,122,.22) !important; box-shadow: 0 22px 55px rgba(0,0,0,.35) !important; border-radius: 12px !important; } /* 二级文字改白（你原来是 #333） */ #nav li li > a{ color: rgba(255,255,255,.92) !important; } #nav li li > a:hover{ background: rgba(230,196,122,.14) !important; color: #E6C47A !important; } /* ===== 三级：你的结构是 dl.sanji（不是 ul ul），所以重点修这个 ===== */ #nav dl.sanji{ background: linear-gradient(180deg, #101A34, #182750) !important; border: 1px solid rgba(230,196,122,.18) !important; box-shadow: 0 18px 45px rgba(0,0,0,.32) !important; border-radius: 12px !important; } #nav dl.sanji dd{ background: transparent !important; } #nav dl.sanji dd a{ color: rgba(255,255,255,.92) !important; background: transparent !important; } #nav dl.sanji dd a:hover{ background: rgba(230,196,122,.14) !important; color: #E6C47A !important; } } /* ========================= REMOVE MOBILE LEFT SHADOW 放在CSS最底部 ========================= */ @media only screen and (max-width:1024px){ /* 1) 手机端菜单面板本体：去掉阴影 */ #nav{ box-shadow: none !important; filter: none !important; /* 防止有 drop-shadow */ } /* 2) 手机端二级/三级面板：也去掉阴影（避免仍有阴影边） */ #nav li ul, #nav li ul li ul, #nav dl.sanji{ box-shadow: none !important; filter: none !important; } /* 3) 如果你只想去“左边”那条阴影，但保留一点点层次感： 可以改成很轻的内阴影（可选，默认注释） */ /* #nav{ box-shadow: inset -1px 0 0 rgba(255,255,255,.06) !important; } */ } /* ========================= MOBILE NAV -> 白底黑字（像示例那种） 放在CSS最底部（最后覆盖） ========================= */ @media only screen and (max-width:1024px){ /* 手机端整块侧边菜单：白底 + 无阴影 */ #nav{ background: #fff !important; box-shadow: none !important; border: none !important; filter: none !important; } /* 一级菜单文字：黑色 */ #nav > ul > li > a{ color: #333 !important; background: transparent !important; } /* 一级 hover/当前：浅灰底 */ #nav > ul > li.on > a, #nav > ul > li.cur > a, #nav > ul > li > a:hover{ background: #f3f3f3 !important; color: #333 !important; } /* 二级下拉容器：白底（你原先被改成深色了） */ #nav li ul{ background: #fff !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; } /* 二级文字：黑色 */ #nav li li > a{ color: #333 !important; background: transparent !important; } #nav li li > a:hover{ background: #f3f3f3 !important; color: #333 !important; } /* 三级（你的结构是 dl.sanji）：也改成白底 */ #nav dl.sanji{ background: #fff !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; } #nav dl.sanji dd a{ color: #333 !important; background: transparent !important; } #nav dl.sanji dd a:hover{ background: #f3f3f3 !important; color: #333 !important; } /* 分割线：浅灰（更像示例） */ #nav li{ border-bottom: 1px solid #eee !important; } /* 右侧小箭头：改回深色 */ #nav li em:after{ border-right: 1px solid #666 !important; border-bottom: 1px solid #666 !important; } } /* ========================= Mobile PRODUCTS 栏：改成日系白底列表风格（无外框） ========================= */ @media only screen and (max-width:1024px){ /* 整个 PRODUCTS 二级容器去掉外框 */ #nav li > ul{ background: #fff !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; } /* 每一条二级栏目（UNDERWEAR, SPORTSWEAR...） */ #nav li > ul > li > a{ background: #fff !important; color: #111 !important; border-bottom: 1px solid #e5e5e5 !important; padding: 14px 16px !important; font-weight: 500; } /* 取消你原来加的深色高亮块 */ #nav li.erji > a, #nav li.erji.on > a, #nav li.erji.cur > a{ background: #fff !important; box-shadow: none !important; } /* 去掉整个 PRODUCTS 外层那圈深色圆角框 */ #nav li > ul::before, #nav li > ul::after{ display: none !important; } /* 三级菜单（MEN / WOMEN / KID）也保持纯白 */ #nav dl.sanji{ background: #fff !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; } #nav dl.sanji dd a{ background: #fff !important; color: #111 !important; border-bottom: 1px solid #eee !important; padding: 12px 16px 12px 32px !important; /* 向右缩进层级感 */ } #nav dl.sanji dd a:hover{ background: #f7f7f7 !important; } } /* ========================= MOBILE MENU - 白底列表 & 无外框（最终覆盖） 放在CSS最底部 ========================= */ @media only screen and (max-width:1024px){ /* 侧边菜单整体：白底、无边框无阴影 */ #nav{ background:#fff !important; border:none !important; border-radius:0 !important; box-shadow:none !important; filter:none !important; } /* 关键：去掉移动端 a 的左右 margin（否则会露出底色形成“外框”） */ #nav li a{ margin:0 !important; background:transparent !important; } /* 一级列表：像示例一样整行铺满、浅灰分割线 */ #nav > ul{ padding:130px 0 0 0 !important; /* 保持你原来的顶部留白(可按需调) */ } #nav > ul > li{ border-bottom:1px solid #eee !important; } #nav > ul > li > a{ color:#111 !important; padding:0 16px !important; /* 左右内边距 */ line-height:50px !important; } #nav > ul > li > a:hover, #nav > ul > li.on > a, #nav > ul > li.cur > a{ background:#f5f5f5 !important; color:#111 !important; } /* 二级/三级容器：全部白底、无圆角、无阴影、无边框（去掉“框体感”） */ #nav li ul, #nav li > ul, #nav dl.sanji{ background:#fff !important; border:none !important; border-radius:0 !important; box-shadow:none !important; padding:0 !important; margin:0 !important; } /* 二级条目（UNDERWEAR / SPORTSWEAR...）：整行铺满 */ #nav li ul > li{ border-bottom:1px solid #e9e9e9 !important; } #nav li ul > li > a{ color:#111 !important; padding:0 16px !important; line-height:50px !important; font-weight:500 !important; } #nav li ul > li > a:hover{ background:#f5f5f5 !important; } /* 三级（MEN/WOMEN/KID）：缩进一点，像示例层级 */ #nav dl.sanji dd{ padding:0 !important; background:transparent !important; } #nav dl.sanji dd a{ color:#111 !important; padding:0 16px 0 32px !important; /* 左侧缩进 */ line-height:46px !important; border-bottom:1px solid #eee !important; background:#fff !important; } #nav dl.sanji dd a:hover{ background:#f5f5f5 !important; } /* 右侧箭头颜色改深色（更像示例） */ #nav li em:after{ border-right:1px solid #666 !important; border-bottom:1px solid #666 !important; } } /* ========================= MOBILE NAV：白底列表、无外框（最终覆盖） 放在CSS最底部 ========================= */ @media only screen and (max-width:1024px){ /* 侧边菜单整体白底 */ #nav{ background:#fff !important; border:none !important; border-radius:0 !important; box-shadow:none !important; filter:none !important; } /* ✅关键：清掉模板给 a 的左右 margin（否则会露出外层底色形成“外框”） */ #nav a{ margin:0 !important; } /* 一级 */ #nav > ul > li{ border-bottom:1px solid #eee !important; } #nav > ul > li > a{ color:#111 !important; background:#fff !important; padding:0 16px !important; line-height:50px !important; } #nav > ul > li.on > a, #nav > ul > li.cur > a, #nav > ul > li > a:hover{ background:#f5f5f5 !important; color:#111 !important; } /* 二级容器：去掉深色/圆角/阴影/内边距，避免“框体感” */ #nav li ul{ background:#fff !important; border:none !important; border-radius:0 !important; box-shadow:none !important; padding:0 !important; margin:0 !important; } /* 二级每一条（UNDERWEAR/SPORTSWEAR...）整行铺满 */ #nav li ul > li{ border-bottom:1px solid #e9e9e9 !important; } #nav li ul > li > a{ background:#fff !important; color:#111 !important; padding:0 16px !important; line-height:50px !important; font-weight:500 !important; } #nav li ul > li > a:hover{ background:#f5f5f5 !important; } /* 三级（dl.sanji）：白底无框，缩进体现层级 */ #nav dl.sanji{ background:#fff !important; border:none !important; border-radius:0 !important; box-shadow:none !important; padding:0 !important; margin:0 !important; } #nav dl.sanji dd a{ background:#fff !important; color:#111 !important; padding:0 16px 0 32px !important; line-height:46px !important; border-bottom:1px solid #eee !important; } #nav dl.sanji dd a:hover{ background:#f5f5f5 !important; } /* 右侧箭头改深色 */ #nav li em:after, #nav li.hasSub > a:after{ border-right:1px solid #666 !important; border-bottom:1px solid #666 !important; } } /* ========================================= MOBILE NAV - like POWER TIRE (white list) 放在CSS最底部最后覆盖 ========================================= */ @media only screen and (max-width:1024px){ /* 1) 菜单面板本体：纯白、无圆角无阴影无边框 */ #nav{ background:#fff !important; border:none !important; border-radius:0 !important; box-shadow:none !important; filter:none !important; } /* 2) 关键：清掉模板给 a 的左右 margin（否则会“露边”像有外框） */ #nav a, #nav li a{ margin:0 !important; border-radius:0 !important; background:transparent !important; } /* 3) 顶部留白（你的模板是 padding:130px 0; 这里按需要保留） 想更像第二张图：上面不要太空，可改小一点 */ #nav ul{ padding:110px 0 20px 0 !important; /* 你要更像示例可用 90px 或 80px */ } /* 4) 一级列表：整行铺满 + 细分割线 */ #nav > ul > li{ border-bottom:1px solid #eee !important; } #nav > ul > li > a{ color:#111 !important; font-size:15px !important; font-weight:600 !important; line-height:52px !important; padding:0 16px !important; } /* 一级 hover/当前：浅灰底（像示例） */ #nav > ul > li.on > a, #nav > ul > li.cur > a, #nav > ul > li > a:hover{ background:#f5f5f5 !important; color:#111 !important; } /* 5) 二级容器：白底、无“框体感” */ #nav li ul{ background:#fff !important; border:none !important; border-radius:0 !important; box-shadow:none !important; padding:0 !important; margin:0 !important; } /* 二级条目：整行铺满 */ #nav li ul > li{ border-bottom:1px solid #e9e9e9 !important; } #nav li ul > li > a{ color:#111 !important; font-size:14px !important; font-weight:500 !important; line-height:50px !important; padding:0 16px !important; background:#fff !important; } #nav li ul > li > a:hover{ background:#f5f5f5 !important; } /* 6) 三级（你的结构是 dl.sanji）：同样白底列表 + 缩进 */ #nav dl.sanji{ background:#fff !important; border:none !important; border-radius:0 !important; box-shadow:none !important; padding:0 !important; margin:0 !important; } #nav dl.sanji dd{ background:transparent !important; padding:0 !important; margin:0 !important; } #nav dl.sanji dd a{ display:block !important; background:#fff !important; color:#111 !important; font-size:14px !important; font-weight:500 !important; line-height:46px !important; padding:0 16px 0 34px !important; /* ✅层级缩进（像示例） */ border-bottom:1px solid #eee !important; } #nav dl.sanji dd a:hover{ background:#f5f5f5 !important; } /* 7) 右侧展开箭头：深色（像示例） */ #nav li em{ width:52px !important; height:52px !important; } #nav li em:after{ border-right:1px solid #666 !important; border-bottom:1px solid #666 !important; } /* 8) 取消你桌面端的“金色/深色”在手机端的干扰 */ #nav li ul, #nav li ul li ul, #nav dl.sanji, #nav li ul li a, #nav li ul li ul li a{ box-shadow:none !important; text-shadow:none !important; } } /* ================================================== MOBILE NAV - POWER TIRE STYLE (NUCLEAR OVERRIDE) 放在CSS最底部最后覆盖 ================================================== */ @media only screen and (max-width:1024px){ /* 面板本体：白底无框无影无圆角 */ #nav, #nav.active{ background:#fff !important; border:none !important; border-radius:0 !important; box-shadow:none !important; filter:none !important; } /* ✅把你模板的 130px 大padding改掉（更像示例的紧凑列表） 这里你想更靠上就调小：80~110 都可以 */ #nav ul{ padding:90px 0 20px 0 !important; margin:0 !important; background:#fff !important; } /* ✅关键：清掉所有 a 的左右 margin（防止露出形成“外框感”） */ #nav a, #nav li a{ margin:0 !important; border-radius:0 !important; box-shadow:none !important; background:transparent !important; } /* 一级列表：整行铺满 + 分割线 */ #nav > ul > li{ border-bottom:1px solid #eee !important; background:#fff !important; } #nav > ul > li > a{ display:block !important; color:#111 !important; background:#fff !important; padding:0 16px !important; line-height:52px !important; font-size:15px !important; font-weight:600 !important; letter-spacing:0 !important; } #nav > ul > li > a:hover, #nav > ul > li.on > a, #nav > ul > li.cur > a{ background:#f5f5f5 !important; color:#111 !important; } /* 二级容器：彻底去掉“盒子感”（圆角/阴影/边框/padding） */ #nav > ul > li > ul, #nav li ul{ background:#fff !important; border:none !important; border-radius:0 !important; box-shadow:none !important; padding:0 !important; margin:0 !important; outline:none !important; } /* 二级条目：整行铺满 */ #nav li ul > li{ border-bottom:1px solid #e9e9e9 !important; background:#fff !important; } #nav li ul > li > a{ display:block !important; color:#111 !important; background:#fff !important; padding:0 16px !important; line-height:50px !important; font-size:14px !important; font-weight:500 !important; } #nav li ul > li > a:hover{ background:#f5f5f5 !important; } /* 三级 dl.sanji：同样白底列表 + 缩进 */ #nav dl.sanji{ position:static !important; left:auto !important; top:auto !important; background:#fff !important; border:none !important; border-radius:0 !important; box-shadow:none !important; padding:0 !important; margin:0 !important; min-width:0 !important; } #nav dl.sanji dd{ margin:0 !important; padding:0 !important; background:#fff !important; border-bottom:1px solid #eee !important; } #nav dl.sanji dd a{ display:block !important; color:#111 !important; background:#fff !important; padding:0 16px 0 34px !important; /* 缩进层级 */ line-height:46px !important; font-size:14px !important; font-weight:500 !important; } #nav dl.sanji dd a:hover{ background:#f5f5f5 !important; } /* 箭头颜色（像示例一样深色） */ #nav li em:after, #nav li.hasSub > a:after{ border-right:1px solid #666 !important; border-bottom:1px solid #666 !important; } } /* ===== MOBILE TEXT FIX: force black text (put at very bottom) ===== */ @media only screen and (max-width:1024px){ /* 所有导航链接统一黑字 */ #nav a, #nav ul li a, #nav > ul > li > a, #nav li ul li a, #nav dl.sanji dd a{ color:#111 !important; text-indent:0 !important; opacity:1 !important; visibility:visible !important; } /* hover 仍保持可见 */ #nav a:hover{ color:#111 !important; } } /* ========================= MOBILE MENU TEXT - FINAL NUCLEAR FIX 放在CSS文件最最底部 ========================= */ @media only screen and (max-width:1024px){ /* 统一把所有菜单文字强制变黑（含更高优先级链路） */ #nav a, #nav > ul > li > a, #nav > ul > li > ul > li > a, #nav > ul > li > ul > li > ul > li > a, #nav li ul li a, #nav dl.sanji dd a{ color:#111 !important; -webkit-text-fill-color:#111 !important; /* 防止iOS某些情况不吃 color */ opacity:1 !important; visibility:visible !important; text-indent:0 !important; font-size:inherit !important; } /* 二级/三级如果因为继承导致字号怪，强制给一个 */ #nav > ul > li > ul > li > a{ font-size:14px !important; } #nav dl.sanji dd a{ font-size:14px !important; } /* 防止被混合模式搞“看不见” */ #nav a{ mix-blend-mode:normal !important; } } #search .submit{ background-image: url(../images/search_white.png), linear-gradient(180deg, var(--ink-2), var(--ink)) !important; background-repeat: no-repeat, no-repeat !important; background-position: center, center !important; background-size: 44% auto, cover !important; /* 44% 跟你原来一致 */ } #navBtn i, #navBtn i:before, #navBtn i:after{ background-color:#000 !important; } /* ================================================== MOBILE NAV -> POWER TIRE 风格（最终覆盖版） ================================================== */ @media only screen and (max-width:1024px){ /* 面板：白底、无阴影、无圆角 */ #nav{ background:#fff !important; border:none !important; border-radius:0 !important; box-shadow:none !important; filter:none !important; } /* 清掉模板 a 的左右 margin（防止“露底像外框”） */ #nav a, #nav li a{ margin:0 !important; border-radius:0 !important; text-indent:0 !important; opacity:1 !important; visibility:visible !important; } /* 顶部留白你可以按需调小（越小越像参考图） */ #nav ul{ padding:90px 0 20px 0 !important; /* 原来130太大 */ background:#fff !important; } /* 一级：更粗一点 */ #nav > ul > li{ border-bottom:1px solid #eee !important; background:#fff !important; } #nav > ul > li > a{ display:block !important; color:#111 !important; background:#fff !important; padding:0 16px !important; line-height:52px !important; font-size:15px !important; font-weight:700 !important; letter-spacing:0 !important; } #nav > ul > li > a:hover, #nav > ul > li.on > a, #nav > ul > li.cur > a{ background:#f5f5f5 !important; color:#111 !important; } /* 二级容器：白底列表，无框感 */ #nav li ul{ background:#fff !important; border:none !important; border-radius:0 !important; box-shadow:none !important; padding:0 !important; margin:0 !important; } /* 二级：比一级稍细/稍小 */ #nav li ul > li{ border-bottom:1px solid #e9e9e9 !important; background:#fff !important; } #nav li ul > li > a{ display:block !important; color:#111 !important; background:#fff !important; padding:0 16px !important; line-height:50px !important; font-size:14px !important; font-weight:600 !important; } #nav li ul > li > a:hover{ background:#f5f5f5 !important; } /* 三级（你是 dl.sanji）：再缩进一点，字重再轻一点 */ #nav dl.sanji{ position:static !important; left:auto !important; top:auto !important; display:none; /* 仍由 slideToggle 控制 */ background:#fff !important; border:none !important; border-radius:0 !important; box-shadow:none !important; padding:0 !important; margin:0 !important; min-width:0 !important; } #nav dl.sanji dd{ margin:0 !important; padding:0 !important; background:#fff !important; border-bottom:1px solid #eee !important; } #nav dl.sanji dd a{ display:block !important; color:#111 !important; background:#fff !important; padding:0 16px 0 34px !important; /* 层级缩进 */ line-height:46px !important; font-size:14px !important; font-weight:500 !important; } #nav dl.sanji dd a:hover{ background:#f5f5f5 !important; } /* 右侧箭头：深灰 */ #nav li em:after, #nav li.hasSub > a:after{ border-right:1px solid #666 !important; border-bottom:1px solid #666 !important; } } /* ========================================= MOBILE NAV (像第二张图：白底列表 + 三级缩进) 一定放在 CSS 最底部最后覆盖 ========================================= */ @media only screen and (max-width:1024px){ /* 0) 整个侧边菜单面板：白底、无框无阴影无圆角 */ #nav, #nav.active{ background:#fff !important; border:none !important; border-radius:0 !important; box-shadow:none !important; filter:none !important; } /* 1) 清掉模板给链接的左右 margin（否则会“露底”像有外框） */ #nav a, #nav li a{ margin:0 !important; border-radius:0 !important; box-shadow:none !important; background:transparent !important; text-indent:0 !important; opacity:1 !important; visibility:visible !important; color:#111 !important; -webkit-text-fill-color:#111 !important; } /* 2) 顶部留白（你原来 ul padding:130px 0 太大，像第二张图就缩小） */ #nav ul{ padding:90px 0 20px 0 !important; /* 觉得顶部还空就改 70~90 */ margin:0 !important; background:#fff !important; } /* 3) 一级：整行铺满 + 分割线 */ #nav > ul > li{ display:block !important; width:auto !important; border-bottom:1px solid #eee !important; background:#fff !important; } #nav > ul > li > a{ display:block !important; padding:0 16px !important; line-height:52px !important; font-size:15px !important; font-weight:700 !important; color:#111 !important; background:#fff !important; } #nav > ul > li.on > a, #nav > ul > li.cur > a, #nav > ul > li > a:hover{ background:#f5f5f5 !important; color:#111 !important; } /* 4) 二级容器：不允许再出现“下拉框盒子感” */ #nav li ul, #nav > ul > li > ul{ position:static !important; left:auto !important; top:auto !important; width:auto !important; background:#fff !important; border:none !important; border-radius:0 !important; box-shadow:none !important; padding:0 !important; margin:0 !important; } /* 5) 二级条目：整行铺满 */ #nav li ul > li{ border-bottom:1px solid #e9e9e9 !important; background:#fff !important; } #nav li ul > li > a{ display:block !important; padding:0 16px !important; line-height:50px !important; font-size:14px !important; font-weight:600 !important; color:#111 !important; background:#fff !important; } #nav li ul > li > a:hover{ background:#f5f5f5 !important; } /* 6) 三级：你的结构是 dl.sanji（不是 ul ul），做成缩进列表 */ #nav dl.sanji{ position:static !important; left:auto !important; top:auto !important; width:auto !important; background:#fff !important; border:none !important; border-radius:0 !important; box-shadow:none !important; padding:0 !important; margin:0 !important; min-width:0 !important; } #nav dl.sanji dd{ margin:0 !important; padding:0 !important; background:#fff !important; border-bottom:1px solid #eee !important; } #nav dl.sanji dd a{ display:block !important; padding:0 16px 0 34px !important; /* ✅三级缩进（像第二张图） */ line-height:46px !important; font-size:14px !important; font-weight:500 !important; color:#111 !important; background:#fff !important; } #nav dl.sanji dd a:hover{ background:#f5f5f5 !important; } /* 7) 右侧展开按钮区域（em）：更像第二张图那种右侧点击区 */ #nav li em{ width:52px !important; height:52px !important; right:0 !important; top:0 !important; } #nav li em:after{ border-right:1px solid #666 !important; border-bottom:1px solid #666 !important; } } /* ===== MOBILE INDENT PATCH（放到CSS最底部最后） ===== */ @media only screen and (max-width:1024px){ /* 一级：0缩进 */ #nav > ul > li > a{ padding-left:16px !important; font-weight:700 !important; } /* 二级：缩进一层（UNDERWEAR / SPORTSWEAR...） */ #nav > ul > li > ul > li > a{ padding-left:32px !important; /* ✅二级缩进 */ font-weight:600 !important; } /* 三级：你的结构是 dl.sanji（MEN/WOMEN/KID）再缩进一层 */ #nav dl.sanji dd a{ padding-left:48px !important; /* ✅三级缩进 */ font-weight:500 !important; } /* 让二级/三级容器保持“列表感”，不要盒子感 */ #nav > ul > li > ul, #nav li ul, #nav dl.sanji{ background:#fff !important; border:none !important; border-radius:0 !important; box-shadow:none !important; margin:0 !important; padding:0 !important; } /* 分割线统一 */ #nav > ul > li, #nav > ul > li > ul > li, #nav dl.sanji dd{ border-bottom:1px solid #eee !important; } } @media only screen and (max-width:768px){ .pagebar .pagination a:first-child, .pagebar .pagination a:last-child{ display:none !important; /* 隐藏 トップページ / 最終ページ */ } } /* ========================= proList 手机端两列：改 flex，彻底解决空白格/挤位 放在CSS最底部 ========================= */ @media only screen and (max-width:768px){ /* ul 用 flex 两列 */ #proList ul{ display:flex !important; flex-wrap:wrap !important; width:100% !important; gap:18px 12px !important; /* 行距 列距 可调 */ } /* li 不再 float，不再用 103% 那种 hack */ #proList li{ float:none !important; width:calc(50% - 6px) !important; /* 两列 */ padding:0 !important; box-sizing:border-box !important; } /* 图片和标题保持居中 */ #proList .thumbnail{ margin-bottom:8px !important; } #proList .title{ text-align:center !important; } } /* ========================= Clean Brand Color System ========================= */ :root{ --bg-main:#F7F7F5; --nav-dark:#0F1A2B; --accent:#E36A3A; --text-main:#222; --line-light:#E6E6E6; } /* 页面背景 */ body{ background:var(--bg-main); color:var(--text-main); } /* 顶部导航条 */ #nav{ background:var(--nav-dark); box-shadow:0 6px 18px rgba(0,0,0,.12); border-radius:14px; } #nav li a{ color:#fff; letter-spacing:.5px; } #nav li a:hover, #nav li.on > a{ background:rgba(255,255,255,.08); color:var(--accent); } /* 搜索按钮 */ #search .submit{ background:var(--nav-dark); } #search .submit:hover{ background:var(--accent); } /* 模块标题条 */ .boxTitle{ background:linear-gradient(90deg,#0F1A2B,#1E2D45); border-radius:12px; box-shadow:0 6px 16px rgba(0,0,0,.12); } .boxTitle .name, .boxTitle a{ color:#fff; } /* 按钮统一 */ button, .pagebar .pagination a{ border:1px solid var(--line-light); background:#fff; color:#333; } .pagebar .pagination a.page-num-current{ background:var(--nav-dark); color:#fff; } /* 商品卡片 */ #proList li, #product li{ background:#fff; border-radius:14px; box-shadow:0 4px 12px rgba(0,0,0,.06); transition:.25s; } #proList li:hover, #product li:hover{ transform:translateY(-3px); box-shadow:0 8px 20px rgba(0,0,0,.12); } /* 文字颜色统一 */ a{ color:var(--text-main); } a:hover{ color:var(--accent); } /* 页脚 */ #footer{ background:#EFEFEF; color:#666; } /* ===== 去掉所有蓝色渐变，改成纯色 ===== */ /* 顶部主导航 */ #nav{ background: #0F1A2B !important; /* 纯深蓝 */ } /* 模块标题条（如 ABOUT 那种蓝条） */ .boxTitle{ background: #0F1A2B !important; /* 纯深蓝 */ } /* 移除可能的渐变残留 */ #nav, .boxTitle{ background-image: none !important; } /* ===== 全站偏黄背景改为纯白 ===== */ body, .inner, #wrapper, #main, #content, section, footer{ background: #ffffff !important; } /* 如果有渐变或图片底色，一并清掉 */ body, .inner, #wrapper, #main{ background-image: none !important; } /* 强制所有浅色容器纯白 */ div, header, main, section{ background-color: #ffffff; } /* ===== 底部版权条改为深色底白字（与ABOUT条一致） ===== */ footer, #footer, .copyright, .footer, .footer-inner{ background: #0F1A2B !important; /* 和ABOUT一致的深蓝 */ color: #ffffff !important; } /* 里面的文字 */ footer *, #footer *{ color: #ffffff !important; } /* 去掉原来的浅色边框和阴影 */ footer, #footer{ border: none !important; box-shadow: none !important; } /* ===== Footer 统一为深色底白字（和ABOUT栏一致） ===== */ #footer{ background:#0F1A2B !important; /* 深蓝纯色 */ color:#ffffff !important; background-image:none !important; /* 去渐变 */ border:none !important; box-shadow:none !important; } #footer #social, #footer #copyright{ background:transparent !important; } #footer p, #footer a{ color:#ffffff !important; } /* 链接 hover 稍微亮一点 */ #footer a:hover{ color:#E36A3A !important; /* 和全站橙色强调一致 */ } /* ===== 修复 boxTitle 右侧“更多”显示成白块：改 flex 布局 ===== */ .boxTitle{ display:flex !important; align-items:center !important; justify-content:space-between !important; } /* 标题左侧 */ .boxTitle .name{ margin-right:12px !important; flex:1 1 auto !important; min-width:0 !important; } /* 右侧更多区域：取消 absolute */ .boxTitle span, .boxTitle .arrow{ position:static !important; transform:none !important; overflow:visible !important; flex:0 0 auto !important; } /* 更多链接：别被背景盖住 */ .boxTitle span a{ display:inline-flex !important; align-items:center !important; gap:6px !important; padding:4px 10px !important; background:transparent !important; color:#fff !important; white-space:nowrap !important; } /* ===== FIX: boxTitle 里的 slick 按钮不要吃全局 button 白底 ===== */ .boxTitle .slick-arrow{ background: transparent !important; border: 0 !important; box-shadow: none !important; outline: none !important; } /* 如果你想箭头是白色（更像深底白字的风格），用纯 CSS 画箭头，不依赖图片 */ .boxTitle .slick-arrow:before{ background: none !important; content: ""; display: block; width: 8px; height: 8px; border-right: 2px solid rgba(255,255,255,.9); border-bottom: 2px solid rgba(255,255,255,.9); position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(135deg); } /* 下一页箭头方向 */ .boxTitle .slick-next:before{ transform: translate(-50%,-50%) rotate(-45deg); } /* SHOWCASE 右侧：只显示“もっと見る”，隐藏 slick 的 prev/next */ #showcase .boxTitle .arrow{ display:none !important; } /* 侧边栏搜索按钮（검색）颜色 */ #divSearchPanel input[type="submit"]{ background: #0F1A2B !important; /* 深蓝 */ color:#fff !important; border:none !important; } /* hover */ #divSearchPanel input[type="submit"]:hover{ background:#1E2D45 !important; } body, button, input, select, textarea { font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "Meiryo", sans-serif !important; } /* 删除页脚上方多余的空白块 */ #links.mb, #links.mb + .mb { display: none !important; } /* Footer 版权区域去圆角 */ .footer, footer, #footer, .inner > .mb:last-child { border-radius: 0 !important; } /* 如果是 box 结构包着的，也一起去圆角 */ footer .box, #footer .box { border-radius: 0 !important; }