@charset "UTF-8";

/*
 * 模板库样式
 * 兼容PC&H5
 *@Author: Dear
 *@Create: 2020/9/2
 */

* { margin: 0; padding: 0; box-sizing: border-box; }
a { text-decoration: none; }
a:hover { text-decoration: none; }
ul, ol { list-style: none; }
body { background-color: #f5f5f5; }
.container { position: relative; width: 1200px; margin: auto; }
.display_PC { display: block !important; }
.display_H5 { display: none !important; }
/*返回顶部*/
.back-top { position: fixed; bottom: 15%; right: 30px; z-index: 0; width: 40px; height: 40px; border-radius: 4px; background: rgba(100, 100, 100, .2) url(../img/logo/float_top_up.png) no-repeat center; opacity: 0; transition: .3s; }
.back-top:hover { background-color: rgba(100, 100, 100, .5); }
.back-top.show { z-index: 1000; opacity: 1; }
header.header { position: relative; z-index: 999; height: 140px; }
header.header .header-nav { position: fixed; top: 0; left: 0; right: 0; height: 140px; background-color: #fff; box-shadow: 0 0 20px 1px rgba(0, 0, 0, .3) }
header.header .header-nav .wrapper { display: flex; justify-content: space-between; }
header.header .header-nav .logo { width: 300px; height: 140px;display: flex;align-items: center; }
header.header .header-nav .logo img { max-width: 100%; max-height: 100%; }
header.header .header-nav .nav-platform { flex: auto; display: flex; justify-content: center; align-items: center; }
header.header .header-nav .nav-platform ul { display: flex; justify-content: space-between; width: 160px; }
header.header .header-nav .nav-platform ul li a { display: block; width: 68px; height: 68px; background: no-repeat center top; text-align: center; transition: .3s; }
header.header .header-nav .nav-platform ul li.platform-pc a { background-image: url(../img/platform-pc.png) }
header.header .header-nav .nav-platform ul li.platform-h5 a { background-image: url(../img/platform-h5.png) }
header.header .header-nav .nav-platform ul li:hover a,
header.header .header-nav .nav-platform ul li.active a { background-position-y: -68px; }
header.header .header-nav .nav-right { display: flex; flex-direction: column; justify-content: center; width: 700px; margin: 0; }
header.header .header-nav .nav-right .nav-row { display: flex; align-items: center; margin: 5px 0; }
header.header .header-nav .nav-right .nav-row .filter-title { flex-shrink: 0; width: 50px; margin: 0 5px 5px 0; font-size: 16px; color: #666; }
header.header .header-nav .nav-right .filter-style { position: relative; padding-right: 230px; }
header.header .header-nav .nav-right .filter-style ul { position: relative; display: flex; align-items: center; flex-wrap: wrap; height: 45px; }
header.header .header-nav .nav-right .filter-style ul li { margin: 0 5px 5px 0; }
header.header .header-nav .nav-right .filter-style ul li a { display: block; padding: 0 5px;min-width: 50px; height: 40px; line-height: 40px; border-radius: 5px; text-align: center; font-size: 14px; color: #515150; transition: .3s; }
header.header .header-nav .nav-right .filter-style ul li:hover a { background-color: #eee; }
header.header .header-nav .nav-right .filter-style ul li.active a { background-color: #29a9e2; color: #fff; }
header.header .header-nav .nav-right .filter-style .li-search { position: absolute; top: 0; left: auto; right: 0; width: 230px; height: 36px; padding-right: 77px; border-radius: 36px; background-color: #eff3f5; overflow: hidden; }
header.header .header-nav .nav-right .filter-style .li-search input.search-input { width: 100%; height: 100%; padding-left: 15px; border: none; background: none; }
header.header .header-nav .nav-right .filter-style .li-search input.search-input:focus { border: none; background: none; outline: none; }
header.header .header-nav .nav-right .filter-style .li-search .search-btn { position: absolute; top: 0; left: auto; right: 0; width: 77px; height: 36px; line-height: 36px; padding: 0 0 0 34px; border-radius: 36px; background: #29a9e2 url(default-skin/btn_search.png) no-repeat 0 center; color: #fff; }
header.header .header-nav .nav-right .filter-style .li-search .search-btn.reset { background: #f00 url(default-skin/btn_reset.png) no-repeat 0 center; }
header.header .header-nav .nav-right .filter-theme { }
header.header .header-nav .nav-right .filter-theme ul { flex: auto; position: relative; display: flex; align-items: center; flex-wrap: wrap; height: 30px; }
header.header .header-nav .nav-right .filter-theme ul li { flex: auto; max-width: 100px; margin: 0; }
header.header .header-nav .nav-right .filter-theme ul li a { display: block; width: 100%; height: 20px; transition: .3s; border: 1px solid #ddd; }
header.header .header-nav .nav-right .filter-theme ul li:hover a { }
header.header .header-nav .nav-right .filter-theme ul li:hover a,
header.header .header-nav .nav-right .filter-theme ul li.active a { height: 30px; }

/*case-list-wrap 列表部分*/
.case-list-wrap { }
.case-list-wrap .case-list { padding: 20px 0; }
.case-list-wrap .case-list ul { display: flex; justify-content: left; flex-wrap: wrap; }
.case-list-wrap .case-list ul li { width: 25%; margin-bottom: 20px; padding: 4px; }
.case-list-wrap .case-list ul li .list-item { padding: 12px; border: 4px solid #f5f5f5; border-radius: 3px; background-color: #fcfcfc; transition: all 0.5s ease-out 0ms; }
.case-list-wrap .case-list ul li .list-item .item-img { width: 100%; height: 200px; overflow: hidden; background: #f5f5f5 no-repeat center / cover; }
.case-list-wrap .case-list ul li .list-item .item-img img { width: 100%; height: auto; }
.case-list-wrap .case-list ul li .list-item .item-desc { display: flex; justify-content: space-between; align-items: center; height: 33px; padding: 12px 0 0; }
.case-list-wrap .case-list ul li .list-item .item-desc .item-name { font-size: 15px; color: #000; }
.case-list-wrap .case-list ul li .list-item .item-color { }
.case-list-wrap .case-list ul li .list-item .item-color i { display: inline-block; width: 12px; height: 12px; margin: 2px; border-radius: 12px; box-shadow: 0 0 4px 0 #aaa; }
.case-list-wrap .case-list ul li .list-item:hover { box-shadow: 4px 4px 10px rgba(0, 0, 0, .5); }
.case-list-wrap .case-list .filter-condition { height: 32px; padding: 0 0 8px 8px; font-size: 18px; }
.case-list-wrap .case-list .filter-condition .text span { color: #29a9e2; }
.case-list-wrap .case-list .filter-empty { margin: 8px 0 20px; padding: 50px 0; background-color: #fff; text-align: center; font-size: 18px; }

/*vue + animated动画*/
.animated { animation-duration: 400ms; }
[v-cloak] { display: none; }

/*查看PC项目时调整卡片高度*/
.page_index .case-list-wrap .case-list ul li .list-item .item-img { height: 158px; }

/*移动设备兼容*/
@media screen  and (max-width: 768px) {
	.display_PC { display: none !important; }
	.display_H5 { display: block !important; }
	.container { max-width: 425px; width: 100%; padding: 0 10px; }
	.back-top { right: 10px; background-color: rgba(100, 100, 100, .5); }
	header.header { height: 60px; }
	header.header .header-nav { z-index: 100; height: 60px; }
	header.header .header-nav .logo { width: 60px; height: 60px; padding: 10px; }
	header.header .header-nav .nav-platform { flex: none; width: 74px; }
	header.header .header-nav .nav-platform ul { width: 74px; height: 34px; }
	header.header .header-nav .nav-platform ul li { width: 34px; }
	header.header .header-nav .nav-platform ul li a { transform-origin: 0 0; transform: scale(0.5); }
	header.header .header-nav .nav-right { flex-direction: row; align-items: center; width: 200px; height: 60px; }
	header.header .header-nav .nav-right .filter-style { padding-right: 153px; }
	header.header .header-nav .nav-right .nav-row { height: 36px; }
	header.header .header-nav .nav-right .nav-row .filter-title { display: none; }
	header.header .header-nav .nav-right .nav-row ul { display: none; }
	header.header .header-nav .nav-right .filter-style .li-search { width: 153px; padding: 0; }
	header.header .header-nav .nav-right .filter-style .li-search .search-btn { width: 42px; font-size: 0; }
	header.header .header-nav .nav-right .mobile-slide { transform: rotateZ(270deg); width: 40px; height: 40px; margin-left: 5px; background: url(../img/logo/float_top_up.png); transition: .3s; }
	header.header .header-nav .nav-right .mobile-slide.active { transform: rotateZ(180deg); }
	
	/*移动端侧拉导航*/
	.mobile-slide-wrap { position: fixed; top: 0; left: auto; right: 0; bottom: 0; z-index: 100; width: 0; padding-top: 60px; overflow: hidden; transition: .3s; }
	.mobile-slide-wrap.active { width: 200px; }
	.mobile-slide-wrap.model { z-index: 99; width: 100%; background-color: rgba(0, 0, 0, .3); pointer-events: none; opacity: 0; }
	.mobile-slide-wrap.model.active { pointer-events: auto; opacity: 1; }
	.mobile-slide-wrap .mobile-slide { width: 200px; height: 100%; background-color: rgba(0, 0, 0, .8); overflow: auto; }
	.mobile-slide-wrap .mobile-slide .nav-row { padding: 10px 20px; }
	.mobile-slide-wrap .mobile-slide .filter-style ul { height: 100%; overflow: auto; }
	.mobile-slide-wrap .mobile-slide .filter-style ul li { border-top: 1px solid #464646; }
	.mobile-slide-wrap .mobile-slide .filter-style ul li:first-child { border-top: 1px solid transparent; }
	.mobile-slide-wrap .mobile-slide .filter-style ul li a { display: block; height: 40px; line-height: 40px; color: #fff; }
	.mobile-slide-wrap .mobile-slide .filter-style ul li.active a { color: #29a9e2; }
	.mobile-slide-wrap .mobile-slide .filter-theme ul { display: flex; flex-wrap: wrap; background-color: rgba(222, 222, 222, .5); }
	.mobile-slide-wrap .mobile-slide .filter-theme ul li { width: 40px; height: 40px; border: 4px solid transparent; }
	.mobile-slide-wrap .mobile-slide .filter-theme ul li a { display: block; width: 100%; height: 100%; }
	
	/*列表*/
	.case-list-wrap .case-list { padding: 6px 0; }
	.case-list-wrap .case-list .filter-condition { height: 22px; padding: 0 0 3px 6px; font-size: 14px; }
	.case-list-wrap .case-list ul li { width: 50%; margin-bottom: 3px; padding: 3px; }
	.case-list-wrap .case-list ul li .list-item { padding: 2px; border-width: 2px; }
	.case-list-wrap .case-list ul li .list-item .item-img { height: 125px; }
	.case-list-wrap .case-list ul li .list-item { box-shadow: 2px 2px 5px rgba(0, 0, 0, .5); }
	.case-list-wrap .case-list ul li .list-item .item-desc { height: 24px; padding: 3px 0 0; }
	.case-list-wrap .case-list ul li .list-item .item-desc .item-name { font-size: 13px; }
	
	/*查看PC项目时调整卡片高度*/
	.page_index .case-list-wrap .case-list ul li .list-item .item-img { height: 100px; }
}