h2.title { margin-bottom: 25px; text-align: center; font-weight: 400 }
.header-class { margin: 15px 0; text-align: center }
.header-class a { padding: 10px 26px; font-size: 18px; text-decoration: none; border-radius: 2px }
.header-class .mobile, .header-class .wxapp { display: inline-block; *display:inline;
*zoom:1
}
.header-class .mobile .iconfont, .header-class .wxapp .iconfont { font-size: 20px }
.header-class .cur { color: #fff; background-color: #607d8b }
.tpl-options-box { margin-bottom: 10px; border-bottom: 1px solid #d6d6d6 }
.tpl-options-ctn { position: relative; float: left; margin-right: 1px }
.tpl-options-ctn .header-toggle { position: relative; display: block; padding: 8px 23px 8px 15px; background-color: #fafafa; border-right: 1px solid #e0e0e0; font-size: 14px; color: #303030; text-decoration: none; z-index: 7; zoom: 1 }
.tpl-options-ctn .header-toggle .arrow { position: absolute; top: 17px; right: 10px; display: block; width: 0; height: 0; vertical-align: top; border: 4px solid #6b6b6b; border-right: 4px solid #fafafa; border-bottom: 4px solid #fafafa; border-left: 4px solid #fafafa; content: "" }
.tpl-options-ctn .header-toggle .sub-cat { font-size: 12px }
.tpl-options-ctn .detail-box { display: none }
.tpl-options-ctn .header-detail-box { display: none; position: absolute; top: 35px; left: 0; min-width: 600px; padding: 15px; background: #fff; box-shadow: 1px 1px 1px #ccc; z-index: 99 }
.tpl-options-ctn .header-detail-box ul { margin: 0; padding: 0 }
#header-cat-lists li.current a, #header-cat-lists li a:hover { background-color: #1f88c4; color: #fff }
#header-cat-lists li { float: left; margin: 0 5px 5px 0; white-space: nowrap; list-style: none }
#header-cat-lists li a { display: block; padding: 3px 10px; background-color: #e7e7e7; border: 1px solid #cacaca; color: #7e7e7e; text-decoration: none; border-radius: 6px }
#header-color-picker .header-detail-box { min-width: 445px }
.open .header-toggle { background-color: #fff; color: #555 }
.open .header-toggle .arrow { border-color: #555; border-right: 4px solid #fff; border-bottom: 4px solid #fff; border-left: 4px solid #fff }
.open .header-detail-box { display: block }
#header-price-list .header-detail-box { width: 110px }
#header-price-list li { list-style: none }
#header-price-list li a { display: block; height: 30px; padding: 0 15px; line-height: 30px; text-decoration: none; color: #555 }
#header-price-list li .current, #header-price-list li a:hover { background-color: #e4e4e4 }
#color-list ul li { float: left; margin: 0 6px 6px 0; padding: 2px; list-style: none }
#color-list .c-radio { float: left; width: 24px; height: 24px; background: url(../image/color.png) no-repeat; cursor: pointer }
#color-list .c-all { display: block; clear: both; padding-bottom: 6px }
#color-list .c-red { background-position: 0 0 }
#color-list .c-orange { background-position: -24px 0 }
#color-list .c-yellow { background-position: -48px 0 }
#color-list .c-green { background-position: -72px 0 }
#color-list .c-light_blue { background-position: -96px 0 }
#color-list .c-blue { background-position: -120px 0 }
#color-list .c-light_purple { background-position: -144px 0 }
#color-list .c-purple { background-position: -168px 0 }
#color-list .c-white { background-position: -192px 0 }
#color-list .c-gray { background-position: -216px 0 }
#color-list .c-brown { background-position: -240px 0 }
#color-list .c-black { background-position: -264px 0 }
#color-list .c-colorful { background-position: -288px 0 }
#color-list .current { background-color: #fd9626 }
#color-list .current .c-red { background-position: 0 -32px }
#color-list .current .c-orange { background-position: -24px -32px }
#color-list .current .c-yellow { background-position: -48px -32px }
#color-list .current .c-green { background-position: -72px -32px }
#color-list .current .c-light_blue { background-position: -96px -32px }
#color-list .current .c-blue { background-position: -120px -32px }
#color-list .current .c-light_purple { background-position: -144px -32px }
#color-list .current .c-purple { background-position: -168px -32px }
#color-list .current .c-white { background-position: -192px -32px }
#color-list .current .c-gray { background-position: -216px -32px }
#color-list .current .c-brown { background-position: -240px -32px }
#color-list .current .c-black { background-position: -264px -32px }
#color-list .current .c-colorful { background-position: -288px -32px }
.scenes { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 25px; text-align: center }
.scenes .item { -webkit-box-flex: 0; -ms-flex: 0 1 calc(20% - 20px); flex: 0 1 calc(20% - 20px); margin: 0 10px 20px; background-color: #f7fbfe; vertical-align: top; box-sizing: border-box; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s }
.scenes .item:hover { box-shadow: 1px 1px 3px #ccc; -webkit-transform: translateY(-1px); transform: translateY(-1px) }
.scenes .item:hover .btn { background: #50a8f2; border-radius: 20px; color: #fff }
.scenes .item .inner { padding: 20px 5px }
.scenes .item .ico { width: 80px; height: 60px; margin: 0 auto 10px; background: url(../image/icons.png) no-repeat }
.scenes .item .desc, .scenes .item .sub-title { line-height: 32px }
.scenes .item .sub-title { font-size: 16px; font-weight: 700; color: #555 }
.scenes .item .desc { font-size: 14px; color: #aaa }
.scenes .item .btn { padding: 3px 35px; background: none; border: none; color: #50a8f2; font-size: 14px }
.scenes .item:first-child .ico { background-position: 0 0 }
.scenes .item:nth-child(2) .ico { background-position: -80px 0 }
.scenes .item:nth-child(3) .ico { background-position: -160px 0 }
.scenes .item:nth-child(4) .ico { background-position: -240px 0 }
.scenes .item:nth-child(5) .ico { background-position: -320px 0 }
.scenes .item:nth-child(6) .ico { background-position: 0 -60px }
.scenes .item:nth-child(7) .ico { background-position: -80px -60px }
.scenes .item:nth-child(8) .ico { background-position: -160px -60px }
.scenes .item:nth-child(9) .ico { background-position: -240px -60px }
.tpl-list .ctn-tpl { float: left; width: 25%; margin-bottom: 60px; padding-bottom: 1px }
.tpl-list .inner { position: relative; width: 80%; margin: 17px auto 0; overflow: hidden }
.tpl-list .inner:hover .info { padding-top: 10px; background: rgba(0,0,0,.6); bottom: 0 }
.tpl-list .inner:hover .info .tags, .tpl-list .inner:hover .info a { color: #fff }
.tpl-list .inner:hover .info span { font-size: 16px }
.tpl-list .inner:hover .info a { display: block; margin: 6px 38px; padding: 6px; background: #f44336; border-radius: 20px; font-size: 14px; text-decoration: none; -webkit-transition: .3s; transition: .3s }
.tpl-list .inner:hover .info a:hover { background: #4caf50 }
.tpl-list .inner:hover .qrcode { top: 0; background: rgba(0,0,0,.6); opacity: 1 }
.tpl-list .inner .info { position: absolute; left: 0; bottom: 0; width: 100%; background: #607d8b; -webkit-transition: .3s; transition: .3s; color: #fff; font-size: 14px; z-index: 2 }
.tpl-list .inner .info a { display: none }
.tpl-list .inner .qrcode { position: absolute; top: -20px; left: 0; width: 100%; padding: 10px 0; opacity: 0; text-align: center; -webkit-transition: .3s; transition: .3s }
.tpl-list .inner .qrcode canvas { max-width: 210px; padding: 10px; background: #fff; box-sizing: border-box }
.tpl-list .thumb { position: relative; height: 300px; overflow: hidden; box-shadow: 3px 4px 4px 0 #dcdcdc; text-align: center }
.tpl-list .thumb a { display: block }
.tpl-list .name, .tpl-list .price, .tpl-list .tags { padding: 2px 4px 0 }
.tpl-list .name { display: none; float: left; width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.tpl-list .price { float: right; color: orange }
.tpl-list .tags { padding: 3px 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.pagination .pagination-info { display: none }
.pagination .pagination-info+li a, .pagination .pagination-info+li span { border-left-width: 1px; border-bottom-left-radius: 4px; border-top-left-radius: 4px }
@media (max-width:979px) {
.tpl-list .ctn-tpl { width: 50% }
}
@media (max-width:767px) {
#buy { margin-bottom: 10px }
.tpl-list .ctn-tpl { width: 100% }
}