/* Theme Name: lkkbkmini Theme URI: https://www.boke8.net/zblog-php-lkkbk.html Description: 博客吧【来看看爆款】zblog php淘宝客主题，导购型淘客模板！有问题欢迎访问博客吧咨询！ */ 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 { margin: 0; padding: 0; } body { background-color: #F2F2F2; font: 100%/1.75em 'Microsoft Yahei', "Helvetica Neue", Arial, sans-serif, 'SimSun'; color: #666; overflow-x: hidden; word-wrap: break-word;} input, textarea, select { font-family: inherit; } a { text-decoration: none; } li { list-style: none; } .clear { clear: both; } a img { border: none; } img {max-width: 100%; vertical-align: middle;} table { background-color: transparent; border-spacing: 0; border-collapse: collapse; width: 100%; border-top: solid 1px #eee; border-left: solid 1px #eee; box-sizing: border-box; } table th { background-color: #f9f9f9; text-align: center; box-sizing: border-box; border: 1px solid #eee; } table td { border: 1px solid #eee; box-sizing: border-box; } .inner {width:93.75%; max-width: 1440px; margin: 0 auto; } .thumbnail { position: relative; overflow: hidden; } .thumbnail a { display: block; position: relative; padding-bottom: 100%; overflow: hidden; } .thumbnail img { position: absolute; left: 0; top: 0; width: 100%; display: block; height: 100%; object-fit: cover; } /*top*/ #topBar { background-color: #F5F5F5; line-height: 32px; height: 32px; border-bottom: 1px solid #E3E3E3; font-size: 0.75em; width: 100%; overflow: hidden; position: relative; z-index: 9; } /*favorite*/ #favorite { float: left; border-left: 1px solid #eee; border-right: 1px solid #eee; } #favorite a { display: block; color: #666; background: #fff url(images/favbg-blue.png) no-repeat 15px 0; padding: 0 20px 0 35px; } #favorite a:hover { color: #7B4BAE; background-position: 15px -59px; color: #666; } /*social*/ #social { float: right; padding: 4px 0; font-size: 0; line-height: normal; } #social a { display: inline-block; float: right; float: left; background: url(images/social.png) no-repeat 0 0; width: 24px; height: 24px; margin-left: 10px; } #social a.tencent { background-position: 0 -31px; } #social a.renren { background-position: 0 -62px; } #social a.qzone { background-position: 0 -93px; } #social a.rss { background-position: 0 -124px; } /*header*/ #header { background-color: #fff; position: relative; z-index: 8; } /*logo*/ #logo { float: left; padding: 25px 0; width: 280px;} #logo a { display: block; background: no-repeat left center; background-size: contain; padding-bottom: 25%; position: relative; overflow: hidden;} #logo i {display: block; position: absolute; left:0; top:0; width: 100%; height: 100%; text-indent: -9999em; overflow: hidden;} /*search*/ #search { margin-left: 300px; overflow: hidden; padding: 37px 0; } #search .searchForm { float: right; border-radius: 4px; background-color: #3399FE; width: 450px; padding: 6px; } #search .submit { color: #fff; border: none; height: 35px; width: 35px; cursor: pointer; -webkit-appearance: none; float: right; background-color: transparent; } #search .input { margin-right: 40px; overflow: hidden; } #search .s { font-size: 16px; height: 25px; line-height: 25px; border: none; padding: 5px 5%; width: 90%; font-size: 14px; color: #555; background-color: #fff; display: block; border-radius: 4px; } /*topBtn*/ #topBtn { position: absolute; right: 3.125%; top: 50%; transform: translateY(-50%); font-size: 0; line-height: normal; display: none; } #topBtn span { display: inline-block; margin-left: 25px; width: 24px; height: 24px; cursor: pointer; background: no-repeat 0 100%; background-size: 100% auto; } #topBtn .schBtn { background-image: url(images/icon_search.png) } #topBtn .navBtn { background-image: url(images/icon_menu.png); } /*nav*/ #nav { background: #3399FE; width: 100%; height: 45px; box-shadow: 0 0 2px #ccc; position: relative; } #nav.fixed { position: fixed; top: 0; z-index: 999; opacity: 0.9; } #nav li { float: left; line-height: 45px; position: relative; width: 12.5%; text-align: center; font-size: 18px; } #nav li a { color: #fff; display: block; } #nav li a:hover, #nav li.cur > a, #nav li.on > a { background-color: #24ACED; } #nav li ul { position: absolute; left: 0; top: 100%; display: none; z-index: 5; width: 100%; } #nav li li { width: auto; float: none; } #nav li li a { background-color: #3399FE; } #nav em { position: absolute; right: 0; top: 0; width: 50px; height: 50px; z-index: 2; cursor: pointer; display: none; } #nav em:after { width: 7px; height: 7px; border-right: 1px solid #999; border-bottom: 1px solid #999; transform: rotate(-45deg); content: ''; display: block; position: absolute; left: 50%; top: 50%; margin-top: -5px; transition: all .3s; } #nav .open:after { transform: rotate(45deg); margin-top: -6px; } #blank {height: 45px; width: 100%; clear:both; display: none;} /*wrapper*/ #wrapper { clear: both; } #wrapper .inner { background-color: #fff; } #container { overflow: hidden; padding: 20px; position: relative; } /*breadcrumb*/ .breadcrumb { padding: 15px 20px; font-size: 12px; color: #888; border-bottom: 1px solid #eee; } .breadcrumb a { color: #888; } .breadcrumb a:hover { color: #F04848; } /*banner*/ #slidershow { overflow: hidden; margin-bottom: 30px; } #slidershow a { display: block; } #slidershow .owl-nav button { display: block; width: 30px; height: 30px; position: absolute; top: 50%; text-indent: -9999em; margin-top: -15px; } #slidershow .owl-nav .owl-prev { left: 10px; } #slidershow .owl-nav .owl-next { right: 10px; } #slidershow .owl-nav span { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: no-repeat center center; } #slidershow .owl-nav .owl-prev span { background-image: url(images/arrow_left.png); } #slidershow .owl-nav .owl-next span { background-image: url(images/arrow_right.png); } /*container*/ .sidebar { width: 320px; float: right; transition-duration: 0.3s; } /*widget*/ .widget { background-color: #fff; margin-bottom: 20px; overflow: hidden; font-size: 14px; line-height: 1.75em; } .widget h3 { font-weight: normal; font-size: 16px; color: #333; border-bottom: 1px solid #eee; padding-bottom: 15px; margin-bottom: 15px; } .widget .textwidget img { max-width: 100%; height: auto; } .widget li { position: relative; padding-left: 13px; font-size: 14px; line-height: 2em; } .widget li a { color: #555; } .widget li a:hover { color: #3399FE; } .widget li:before { width: 5px; height: 5px; border-radius: 50%; background-color: #ddd; content: ''; display: block; position: absolute; left: 0; top: 11.5px; } #divRand li:before, #divHot li:before, #divCmt li:before, #divTags li:before, #divComments li:before { display: none; } /*divRand*/ #divRand ul { width: 102%; overflow: hidden; } #divRand li { float: left; width: 31.333%; padding: 1% 2% 1% 0; } #divRand li a { display: block; position: relative; padding-bottom: 100%; overflow: hidden; } #divRand li img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; object-fit: cover; transition: all .3s; } #divRand li a:hover img { transform: scale(1.1); } /*divHot*/ #divHot { display: block; overflow: hidden; } #divHot h3 { background-color: #624f39; height: 40px; line-height: 40px; padding: 0 0 0 40px; color: #fff; border-bottom: none; margin-bottom: 0; position: relative; border-left: 5px solid #c72100; } #divHot h3:before, #divHot h3:after { content: ''; display: block; position: absolute; top: 50%; } #divHot h3:after { width: 6px; height: 6px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); right: 15px; margin-top: -4px; } #divHot h3:before { width: 16px; height: 16px; background: url(images/icon_hot.png) no-repeat center center; background-size: contain; left: 15px; margin-top: -8px; } #divHot ul { border: 2px solid #ddd; border-top: none; padding: 0; } #divHot li { border-top: 2px solid #eee; padding: 0; } #divHot li .thumb { width: 80px; height: 80px; float: left; overflow: hidden; position: relative; } #divHot li img { width: 100%; height: 100%; display: block; object-fit: cover; } #divHot li .info { margin-left: 90px; overflow: hidden; } #divHot li h4 { font-size: 14px; line-height: 1.75em; height: 3.5em; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-weight: normal; } #divHot li i { font-style: normal; margin-left: 5px; color: #e32020; } #divHot li .more { font-size: 12px; line-height: 2em; float: right; } #divHot li a { padding: 15px; display: block; position: relative; color: #666; } #divHot li a:before, #divHot li a:after { content: ''; display: block; opacity: 0; position: absolute; transition: opacity .2s; } #divHot li a:before { width: 2px; height: 100%; background-color: #c72100; top: 0; right: 100%; } #divHot li a:after { border-left: 5px solid #c72100; border-top: 5px solid transparent; border-bottom: 5px solid transparent; left: -1px; top: 50%; margin-top: -5px; } #divHot li a:hover, #divHot li a:hover .more { color: #c72100; } #divHot li a:hover:before, #divHot li a:hover:after { opacity: 1; } #divHot.fixed { position: fixed; width: inherit; top: 60px; transition-duration: 0.5s; } #divHot.absolute { position: absolute; bottom: 0; width: inherit; } /*divCmt*/ #divCmt li { clear: both; overflow: hidden; font-size: 12px; line-height: 1.75em; position: relative; padding: 5px 0; white-space: normal; border-bottom: 1px dashed #eee; } #divCmt li .thumb { width: 80px; float: left; padding-right: 10px; } #divCmt li img { display: block; width: 100%; height: auto; } #divCmt li h4 { font-size: 14px; line-height: 1.75em; font-weight: normal; } #divCmt li i { font-style: normal; margin-left: 5px; color: #e32020; } #divCmt li .meta { margin-top: 5px; } #divCmt li .more { display: block; float: right; color: #fff; background-color: #3399FE; font-size: 12px; height: 18px; line-height: 18px; padding: 0 5px; border-radius: 3px; } #divCmt li .views { display: block; color: #999; margin-right: 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #divCmt li a { display: block; overflow: hidden; color: #666; } #divCmt li:nth-child(n+2) .hide { display: none; } /*divTags*/ #divTags ul { margin-top: 10px; overflow: hidden; } #divTags li { float: left; padding: 3px 5px 3px 0; } #divTags li .tag-count, #divTags li a:before { display: none; } #divTags li a { display: block; padding: 0 8px; height: 26px; line-height: 26px; background-color: #ddd; color: #fff; font-size: 12px; border-radius: 3px; } #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; background-color: #f9f9f9; padding: 5px 0; border: 1px solid #eee; font-size: 0; line-height: normal; } #divCalendar caption a { color: #999; font-size: 14px; line-height: 24px; margin: 0 10px; } #divCalendar th, #divCalendar td { width: 14.285%; text-align: center; padding: 1%; font-size: 14px; } #divCalendar td { font-size: 12px; } #divCalendar td a { font-weight: bold; color: #3399FE; } /*divSearchPanel*/ #divSearchPanel form { position: relative; overflow: hidden; padding-right: 40px; } #divSearchPanel input[type='submit'] { font-size: 14px; background-color: #3399FE; color: #fff; width: 40px; height: 34px; display: block; position: absolute; right: 0; top: 0; border-radius: 0 3px 3px 0; cursor: pointer; border: none; -webkit-appearance: none; } #divSearchPanel input[type='text'] { height: 22px; line-height: 22px; width: 92%; padding: 5px 4%; border: 1px solid #e4e4e4; border-radius: 3px; border-right: none; font-size: 14px; color: #333; } /*divComments*/ #divComments li { overflow: hidden; color: #444; padding: 10px 0; border-bottom: 1px dashed #eee; text-align: justify; } #divComments li .ori { border: 1px solid #eee; padding: 5px 10px; font-size: 12px; line-height: 1.75em; color: #999; position: relative; margin-bottom: 10px; } #divComments li .ori: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; } #divComments li img { display: block; width: 100%; height: auto; } #divComments li .meta { margin-left: 30px; line-height: 24px; } #divComments li a { overflow: hidden; color: #555; } /*main*/ .main { margin-right: 350px; overflow: hidden; } /*postList*/ #postList #pagenavi { padding: 20px 0 30px; } /*proItem*/ .proItem { overflow: hidden; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #f5f5f5; } .proItem .thumbnail { width: 180px; float: left; border-radius: 3px; } .proItem .info { margin-left: 200px; overflow: hidden; } .proItem h2 { font-size: 18px; font-weight: normal; line-height: 22px; margin-bottom: 20px; } .proItem h2 a { color: #333; } .proItem h2 a:hover { color: #3399FE; } .proItem h2 small { background-color: #ff8800; display: inline-block; margin: 4px 5px 0 0; text-transform: uppercase; padding: 0 5px; border-radius: 3px; color: #fff; vertical-align: top; height: 16px; font: bold 9px/17px 'Arial'; } .proItem h2 i { color: #e32020; font-style: normal; margin-left: 5px; } .proItem h2 strong {color:#f00;} .proItem .intro { font-size: 14px; line-height: 1.875em; height: 5.625em; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow: hidden; color: #555; margin-bottom: 2px; } .proItem .intro strong { color: #353535; } .proItem .meta { margin-bottom: 7px; overflow: hidden; border-bottom: 1px solid #f5f5f5; padding-bottom: 3px; } .proItem .meta span { float: left; display: block; font-size: 12px; color: #888; } .proItem .meta .views { float: right; } .proItem .gobuy { float: right; } .proItem .other { float: left; font-size: 14px; line-height: 30px; overflow: hidden; } .proItem .other span { display: block; float: left; background: no-repeat left center; background-size: 16px auto; color: #333; } .proItem .other .price { color: #e32020; } .proItem .other .from { background-image: url(images/icon_mall.png); padding: 0 22px; } /*proTag*/ .proTag { font-size: 0; line-height: normal; margin-bottom: 10px; } .proTag a { display: inline-block; margin-right: 10px; background-color: #f5f5f5; color: #999; font-size: 12px; line-height: 20px; padding: 0 10px; border-radius: 3px; } .proTag a.cat { background-color: #3399FE; color: #fff; } /*pagenavi*/ #pagenavi, #page { text-align: center; font-size: 14px; display: flex; flex-wrap: wrap; justify-content: center; padding-left:1px;} #pagenavi a, #pagenavi span.now-page, #page a { padding: 0 0.2em; color: #3399FE; border: 1px solid #dedede; display:block; height: 2.5em; line-height: 2.5em; margin-left:-1px; box-sizing: border-box;min-width: 2.5em; } #pagenavi a:hover, #pagenavi span.now-page, #page a:hover { background-color: #3399FE; border-color: #3399FE; color: #fff; } /*postmeta*/ #postmeta { margin-bottom: 3.5%; border-bottom: 1px solid #eee; font-size: 0; line-height: normal; text-align: center; padding-bottom: 2%; } #postmeta span { padding: 0 10px; font-size: 12px; line-height: 2em; color: #888; display: inline-block; } #postmeta a { color: #888; } #postmeta a:hover { color: #3399FE; } /*boxTitle*/ .gobuy { float: right; font-size: 12px; } .gobuy a { display: block; width: 100px; height: 30px; text-align: center; line-height: 30px; color: #fff; background: #3399FE; border-radius: 4px; } .gobuy a:hover {opacity:.85; } /*boxTitle*/ .boxTitle { font-size: 18px; font-weight: normal; color: #333; line-height: 30px; border-bottom: 1px solid #f5f5f5; padding-bottom: 5px; margin-bottom: 20px; } .boxTitle i { font-style: normal; color: #F04848; margin-right: 5px; } /*related*/ #related { margin-bottom: 30px; } #related .thumbnail { margin-bottom: 5px; } #related h4 { font-size: 14px; line-height: 1.75em; font-weight: normal; height: 3.5em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } #related h4 a { color: #666; } #related .owl-dots { position: absolute; right: 0; top: -45px; font-size: 0; line-height: normal; } #related .owl-dots button { display: inline-block; text-indent: -9999em; margin-left: 8px; } #related .owl-dots span { display: block; width: 10px; height: 10px; border-radius: 50%; background-color: #3399FE; } #related .owl-dots .active span { background-color: #f04848; } /*postnavi*/ #postnavi { font-size: 14px; line-height: 2em; margin-bottom: 35px; overflow: hidden; } #postnavi a { color: #666; } #postnavi a:hover { color: #F04848; } #postnavi div { width: 45%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #postnavi .left { float: left; } #postnavi .right { float: right; text-align: right; } /*ad*/ .main-ad { clear: both; overflow: hidden; width: 100%; height: auto; margin-bottom: 20px; } .main-ad a { display: block; } .main-ad img { display: block; width: 100%; height: auto; } /*comment*/ #comment { position: relative; overflow: hidden; } #comment .avatar { float: left; padding: 15px 0; } #comment .avatar img { width: 40px; height: 40px; border-radius: 50%; display: block; object-fit: cover; } #comment .form { margin-left: 55px; 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; border-radius: 3px; } #comment .text { font-size: 14px; line-height: 24px; padding: 5px 5%; width: 90%; display: block; border: none; border-radius: 3px; color: #555; } #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; } #comment .verify img { display: block; cursor: pointer; height: 36px; width: auto; position: absolute; left: 110%; bottom: 0; } #comment .warning { font-size: 14px; color: #999; line-height: 2em; clear: both; } #comment .btn { padding-top: 30px; float: right; } #comment .submit { background-color: #F04848; border: none; width: 100px; height: 35px; color: #fff; font-size: 14px; border-radius: 3px; cursor: pointer; -webkit-appearance:none;} #comment .submit:hover { background-color: #F55540; } #cancel-reply { font-size: 14px; color: #999; line-height: 2em; } /*commentslist*/ #commentslist { overflow: hidden; } #commentslist li { position: relative; padding: 20px 0; border-bottom: 1px solid #f9f9f9; overflow: hidden; } #commentslist .avatar { float: left; padding: 5px 0; } #commentslist .avatar img { width: 40px; height: 40px; display: block; border-radius: 50%; transition: transform 0.3s ease-out 0s; } #commentslist .avatar img:hover { transform: rotateY(180deg); } #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: #F55540; } #commentslist .name { font-size: 16px; font-weight: bold; line-height: 1.5em; color: #333; margin-bottom: 5px; } #commentslist .name a { color: #333; } #commentslist .text { font-size: 14px; line-height: 2em; color: #666; } #commentslist .text li { margin-left: 0; } #commentslist li li { margin: 20px 0 0 55px; padding: 0; border-bottom: none; } #commentslist li li .box { background-color: #f9f9f9; padding: 15px; } #commentslist li li li { margin-left: 25px; } #commentslist #pagenavi { margin-top: 20px; } /*entry*/ .entry { border-bottom: 1px solid #f5f5f5; margin-bottom: 20px; overflow: hidden; font-size: 16px; line-height: 1.875em; color: #333; padding-bottom: 20px; } .entry p, .entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6 { margin-bottom: 2.5%; } .entry img { max-width: 100%; height: auto !important; } .entry ul, .entry ol { padding-left: 1em; margin: 0 0 2.5% 2em; } .entry ul li { list-style: outside disc none; } .entry ol li { list-style: outside decimal none; } .entry li p { margin-bottom: 0; } .entry hr { border: none; overflow: hidden; border-bottom: 1px solid #eee; margin-bottom: 2.5%; } .entry blockquote { border-radius: 5px; border: 1px solid #eee; background-color: #f9f9f9; padding: 2.5% 2.5% 0; overflow: hidden; margin: 0 2em 2.5%; } /*proInfo*/ #product { overflow: hidden; } #product .top { overflow: hidden; margin-bottom: 5%; } #product .top .thumbnail { float: left; width: 220px; border-radius: 3px; } /*proInfo*/ #proInfo { margin-left: 250px; overflow: hidden; } #proInfo h1 { font-size: 20px; font-weight: normal; color: #333; line-height: 1.5em; margin-bottom: 5px; } #proInfo .light { color: #e32020; font-size: 20px; line-height: 1.5em; margin-bottom: 10px; } #proInfo .proTag { clear: both; margin-bottom: 15px; } #proInfo .proTag a { box-shadow: 1px 1px 3px rgba(0, 0, 0, .2); } #proInfo .date { font-size: 12px; line-height: 2em; color: #888; } #proInfo .meta { overflow: hidden; margin-bottom: 10px; } #proInfo .meta span { display: block; float: left; font-size: 12px; line-height: 28px; color: #555; } #proInfo .meta .from { font-size: 14px; color: #333; background: url(images/icon_mall.png) no-repeat left center; background-size: 16px auto; padding-left: 22px; } #proInfo .meta .views { float: right; } #proInfo .gobuy { float: none; overflow: hidden; margin-bottom: 10px; } #proInfo .gobuy a { float: right; } #proInfo .gobuy span { display: block; float: left; font-size: 14px; color: #e32020; line-height: 30px; } /*postTitle*/ .postTitle { font-size: 26px; line-height: 1.5em; color: #333; text-align: center; font-weight: normal; margin-bottom: 2.5%; } /*singlePage*/ #singlePage .postTitle { margin-bottom: 3.5%; } /*footer*/ #footer { background-color: #fff; border-top: 1px solid #eee; padding: 30px 0; font-size: 14px; line-height: 2em; color: #666; text-align: justify; } #footer .inner { overflow: hidden; } #footer .info { margin-right: 125px; padding-right: 18.75%; overflow: hidden; } /*contact*/ #contact { float: right; width: 125px; color: #555; font-size: 14px; line-height: 2em; } #contact .qrcode { padding: 2px; background-color: #fff; border: 1px solid #eee; margin-bottom: 5px; } #contact img { display: block; width: 100%; height: auto; } #contact h2 { font-weight: normal; font-size: 14px; line-height: 2em; text-align: center; } #contact a { display: block; background: no-repeat left center; background-size: auto 16px; padding-left: 20px; color: #555; } #contact .wb a { background-image: url(images/icon_weibo.png); } #contact .qq a { background-image: url(images/icon_qq.png); } /*backTop*/ #pagelist { border-bottom: 1px solid #eee; padding-bottom: 20px; margin-bottom: 20px; } #pagelist ul { font-size: 0; line-height: normal; } #pagelist li { display: inline-block; margin-right: 4.118%; font-size: 14px; line-height: 2em; } #pagelist a { color: #333; } #pagelist a:hover { color: #3399FE; } /*backTop*/ #friendlinks { margin-bottom: 15px; } #friendlinks ul { font-size: 0; line-height: normal; } #friendlinks li { display: inline-block; margin-right: 20px; font-size: 12px; line-height: 2em; } #friendlinks a { color: #666; } #friendlinks a:hover { color: #333; } /*about*/ #about { font-size: 12px; line-height: 2em; margin-bottom: 15px; } /*copyright*/ #copyright { clear: both; font-size: 12px; line-height: 2em; text-transform: uppercase; } #copyright a { color: #666; display: inline-block; } #copyright img {display: inline-block; height: 20px; width: auto; display: inline-block; vertical-align: middle; margin-top: -3px;} /*backTop*/ #backTop { position: fixed; right: 0; top: 60%; z-index: 9; } #backTop a { display: block; background: url(images/backtop.png) no-repeat 0 0; width: 25px; height: 94px; } #backTop a:hover { background-position: -41px 0; } /*error404*/ #error404 { padding: 15% 0; text-align: center; } #error404 .postTitle { font-size: 32px; margin-bottom: 5%; } #error404 .entry { border-bottom: none; color: #999; font-size: 24px; } /*screen width*/ @media only screen and (max-width:1280px) { .main { margin-right: 305px; } .sidebar { width: 280px; } /*1280px*/ #footer .info { padding-right: 15%; } /*1280px*/ .postTitle { font-size: 24px; } } @media only screen and (max-width:1024px) { .sidebar { display: none; } /*1024*/ .main { margin-right: 0; } /*1024*/ .postTitle { font-size: 22px; } } @media only screen and (max-width:980px) { #search { padding: 22px 0; margin-left: 260px; } #search .searchForm { width: 350px; } #nav li { font-size: 16px; } /*980px*/ #logo { padding: 15px 0; width: 240px;} } @media only screen and (max-width:768px) { #container { padding: 15px; } body { background-color: #fff; } #header { box-shadow: 0px 2px 10px rgba(0, 0, 0, .15); } #search { position: absolute; left: 0; top: 100%; width: 93.75%; padding: 0 3.125%; z-index: 2; margin-left: 0; background-color: #3399FE; display: none; } #search .searchForm { float: none; width: auto; background-color: transparent; padding: 8px 0; border-radius: 0; } #search .s { border-radius: 0; } #topBtn { display: block; } /*768px*/ #logo { padding: 10px 0; width: 200px;} /*768px*/ #nav { position: fixed; left: -100%; top: 103px; width: 100%; height: 100%; background-color: #fff; z-index: 7; overflow-y: auto; -webkit-overflow-scrolling: touch; transition: left .3s; } #nav.open { left: 0; } #nav .inner { margin-bottom: 103px; } #nav ul { padding: 15px 0; } #nav li { float: none; width: auto; text-align: left; border-bottom: 1px solid #eee; line-height: 50px; } #nav li a { color: #333; } #nav li a:hover, #nav li a:hover, #nav li.cur a, #nav li.on a { background-color: transparent; } #nav li ul { padding: 0; position: static; width: auto; left: auto; top: auto; } #nav li li { border-bottom: none; border-top: 1px solid #eee; font-size: 14px; } #nav li li a { padding-left: 2em; background-color: transparent;} #nav em { display: block; } /*768px*/ body { background-color: #fff; } #wrapper .inner { width: auto; } #container { padding: 0; } #postList { padding: 0 3.125%; } /*768px*/ #footer { text-align: center; padding: 35px 0 30px; } #footer .info { padding-right: 0; margin-right: 0; } /*768px*/ #contact { float: none; margin: 0 auto 10px; } /*768px*/ #pagelist { padding-bottom: 10px; margin-bottom: 10px; } #pagelist li { margin: 0 5px; } /*768px*/ #friendlinks { margin-bottom: 5px; } #friendlinks li { margin: 0 5px; } /*768px*/ #about { display: none; } /*768px*/ .breadcrumb { margin-bottom: 20px; padding: 10px 3.125%; } /*768px*/ #postList #pagenavi { padding: 10px 0 25px; } /*768px*/ .proItem { padding-bottom: 15px; margin-bottom: 15px; } .proItem h2 { font-size: 16px; font-weight: bold; margin-bottom: 15px; } .proItem .thumbnail { width: 110px; } .proItem .info { margin-left: 120px; } .proItem .proTag { display: none; } .proItem .intro { font-size: 12px; line-height: 1.75em; height: 5.25em; margin-bottom: 5px; } .proItem .meta { display: none; } .proItem .other { line-height: 1.5em; float: none; margin-bottom: 5px; } .proItem .other .price { float: right; } .proItem .other .from { font-size: 12px; background-size: auto 14px; padding: 0 5px 0 20px; } /*768px*/ .gobuy a { height: 26px; line-height: 26px; width: 80px; } /*768px*/ .entry { font-size: 14px; line-height: 2em; margin-bottom: 10px; padding-bottom: 10px; } /*768px*/ #product { padding: 3.125%; } #product .top .thumbnail { float: none; width: auto; margin-bottom: 15px; } /*768px*/ #proInfo { margin-left: 0; } #proInfo h1 { font-size: 16px; font-weight: bold; } #proInfo .light { font-size: 16px; margin-bottom: 5px; } #proInfo .meta { margin-bottom: 5px; } #proInfo .meta .from { font-size: 12px; background-size: auto 14px; padding: 0 5px 0 20px; } #proInfo .gobuy span { line-height: 26px; } #proInfo .proTag { margin-bottom: 10px; } /*768px*/ #postnavi { margin-bottom: 20px; font-size: 12px; } #postnavi div { width: auto; } #postnavi .left { float: none; } #postnavi .right { float: none; text-align: left; } /*768px*/ .boxTitle { font-size: 16px; margin-bottom: 15px; } /*768px*/ #related { margin-bottom: 15px; } #related h4 { font-size: 12px; line-height: 1.75em; } #related .owl-dots { top: -39px; } /*768px*/ #comment .avatar img, #commentslist .avatar img { width: 30px; height: 30px; } #comment .form, #commentslist .info { margin-left: 40px; } #comment .inp { width: auto; } #comment .inp .item { float: none; width: auto; padding-right: 0; } #comment .verify { float: none; } #comment .btn { float: none; clear: both; padding: 2% 0; overflow: hidden; } /*768px*/ #commentslist li { padding: 15px 0; } #commentslist .avatar { padding: 3px 0; } #commentslist .meta { margin-bottom: 5px; } #commentslist .name { font-size: 14px; } #commentslist li li { margin: 10px 0 0 40px; } #commentslist li li .box { padding: 10px; } #commentslist li li li { margin-left: 15px; } /*768px*/ .postTitle { font-size: 18px; } /*768px*/ #singlePage, #post { padding: 3.125% 3.125% 20px; } #singlePage .postTitle { font-size: 20px; } /*768px*/ #favorite a { padding: 0 10px 0 25px; background-position: 8px 1px; } /*768px*/ #error404 {padding:20% 0;} #error404 .postTitle {font-size:24px; margin-bottom: 10%;} #error404 .entry {font-size:18px;} /*768px*/ #pagenavi, #page {font-size:12px;} }