.headroom--top nav ul>li>a {color:#333; font-size:16px;}
.headroom--top nav ul>li:last-child button {filter:initial;}
.headroom--top nav ul>li:last-child button img {width:auto;}
.header nav ul>li:last-child button {filter:invert(1) opacity(.7)}

.headroom--top .logo {filter:invert(1) opacity(.7);}




.class { padding-bottom:70px; }
.class .wid {max-width:1420px; margin:0 auto ; padding:0 20px;}
.class .wid:after {content:''; clear:both; display: table;}

.class .banner {background:#D0CECA; padding:125px 0 50px 0; }
.class .banner {padding:120px 0 90px 0; overflow: hidden;}
.class .banner h2 {font-size:35px; color:#333; font-family: "Baskervville", serif; font-style:italic; font-weight:400; letter-spacing: -.3px; text-align:center;}
.class .banner h3 {font-size:12px; font-weight:500; letter-spacing: 4px; color:#333; margin-top:7px; text-align: center;}
.class .banner .swiper2 {margin-top:40px;}
.class .banner .swiper2 .swiper-slide {background:#111; padding:3px; border-radius:23px; cursor: pointer;}
.class .banner .swiper2 .img {width:100%; padding-top:56%; border-radius:21px 21px 0 0; position: relative;}
.class .banner .swiper2 .img span {position: absolute; left:7px; top:7px; padding:9px 15px; border-radius:50px; background:rgba(0,0,0,.2); backdrop-filter: blur(4px); font-size:13px; color:#ffffffdb;font-family: "Frank Ruhl Libre", serif; font-weight:300;}
.class .banner .swiper2 .img:after {content:''; position: absolute; left:0; bottom:0; width:100%; height:70px; background: linear-gradient(to top, #111, #11111100);}
.class .banner .swiper2 .txt {padding:25px 20px 20px 20px;}
.class .banner .swiper2 .txt p {font-size:16px; color:#D7D6D4; font-weight:500; overflow: hidden; text-overflow: ellipsis;  white-space: nowrap;}
.class .banner .swiper2 .txt span {display: inline-block; width:100%; margin-top:5px; font-size:14px; color:#747474; font-weight:400;  overflow: hidden; text-overflow: ellipsis;  white-space: nowrap;}
.class .banner .swiper2 .txt img {margin-top:22px ;}

.class .banner .more { font-size:13px; color:#333; border:none; border-bottom:1px solid #333; letter-spacing: 3px; background:none; font-weight:600; padding-bottom:2px; display: block; margin:45px auto 0 auto;}




.class .ctrl {margin:35px 0 32px 0;}
.class .ctrl .cate:after {content:''; clear:both; display: table;}
.class .ctrl .cate {display: inline-block; padding:6px 6px 0 6px}
.class .ctrl .cate button {float:left;  margin-left:48px; position: relative; border:none ;background:none; font-size:15px; color:#333; font-weight:300;}
.class .ctrl .cate button.on {font-weight:600; text-decoration: underline; text-underline-position: under;}
.class .ctrl .cate button:after {content:''; position: absolute; left:-24px; height:15px; width:1px; background:#555; top:1px;}
.class .ctrl .cate button:first-child {margin-left:0;}
.class .ctrl .cate button:first-child:after {content:none;}
.class .ctrl .search {float:right; margin-right:5px; height:35px; overflow: hidden;}
.class .ctrl .search .ser_bt {border:none; background:none; position: relative; z-index: 1;}
.class .ctrl .search input[type="text"] {border:none; background:none; border-bottom:1px solid #555; height:35px; padding:0; margin-left:-20px; font-size:14px; color:#333; padding-bottom:1px; transition: .3s; width:0;}
.class .ctrl .search input[type="text"]::placeholder {color:#333;}
.class .ctrl .search input[type="text"]:focus {outline: none;}
.class .ctrl .search .ser_close {margin-left:-35px; width:35px; height:35px; border:none ;background:none; position: relative; top:-1px; opacity: .3; transition: .3s; display: none; float:right;}
.class .ctrl .search .ser_close:hover {opacity: 1;}

.class .ctrl .search.on input[type="text"] {width:340px;padding:0 35px 0 28px;}
.class .ctrl .search.on .ser_close {display: inline-block;}

.class .list:after {content:''; clear:both ;display: table;}
.class .list>li {background:#E3E2E1; padding:3px; border-radius:23px; cursor: pointer; float:left; width:calc((100% - 80px) / 3); margin:0 40px 40px 0; position: relative; }
.class .list>li:nth-child(3n) {margin-right:0;}
.class .list>li .img {width:100%; padding-top:75%; border-radius:21px 21px 0 0; position: relative;}
.class .list>li .img .tag {position: absolute; left:10px; top:10px; }
.class .list>li .img .tag span {padding:9px 15px; border-radius:50px; background:rgb(255 255 255 / 9%); backdrop-filter: blur(4px); font-size:13px; color:#ffffffdb; font-family: "Frank Ruhl Libre", serif; font-weight:300; float:left; margin-right:5px;}
.class .list>li .img .tag span.free {background:#40acb185; font-weight:400;}
.class .list>li .img:after {content:''; position: absolute; left:0; bottom:0; width:100%; height:70px; background: linear-gradient(to top, #E3E2E1, #E3E2E100);}
.class .list>li .txt {padding:20px 22px 20px 22px; position: relative;}
.class .list>li .txt p.tit {font-size:16px; color:#333; font-weight:500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.class .list>li .txt p.msg {font-size:14px; color:#888; font-weight:300; display: -webkit-box;
    display: -ms-flexbox; overflow: hidden; text-overflow: ellipsis; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height:1.2em; margin-top:7px; height:34px}
.class .list>li .txt p.price {font-size:18px; font-weight:500; color:#333; font-family: "Frank Ruhl Libre", serif; margin-top:13px;}
.class .list>li .txt p.price em {font-family: "Gelasio", serif; font-style: initial; font-size:17px; display: inline-block; margin-right:3px;}
.class .list>li .txt p.price span { font-size:14px; color:#9f9f9f; display:inline-block ; font-weight:400; text-decoration: line-through; margin:0px 0 0 2px; display: inline-block; padding:0 2px; width:auto; letter-spacing: -.3px; position: relative; top:0px;}
.class .list>li .txt p.price span:last-child {margin-bottom:0;}
.class .list>li .txt p.price b {font-weight:600; color:#837C6D;}
.class .list>li .txt p.price span em {font-size:13px; margin-right:1px;}


.class .list>li .txt p.mem {position: absolute; right:22px; top:93px; font-family: "Frank Ruhl Libre", serif; color:#837C6D; font-size:15px; font-weight:400; letter-spacing:.5px;}
.class .list>li .txt p.mem img {width:18px; margin:-2px -2px 0 0;}

.class .list>li .txt ul {border-top:1px solid #D7D6D4; margin-top:14px; padding-top:13px;}
.class .list>li .txt ul li {font-size:14px; color:#636363; margin-top:5px;  font-weight:400;}
.class .list>li .txt ul li img {margin:-2px 4px 0 0; width:17px;}
.class .list>li .txt ul li span {font-family: "Frank Ruhl Libre", serif; display: inline-block; margin-left:5px; width:calc(100% - 126px); overflow: hidden; text-overflow: ellipsis; white-space:nowrap; position: relative; top:4px;}
.class .list>li .txt ul li {position: relative;}
.class .list>li .txt ul li .class_count {position: absolute; right:2px; bottom:-1px; font-size:12px; font-weight:300; padding:3px 6px; border-radius:4px; background:#9d9d9c; color:#fff; border:none;}
.class .list>li .txt ul li ul {position: absolute; right:-2px; top:28px; background:rgb(237 237 237); border:none; border-radius:8px; padding:12px 15px; width:300px; display: none; margin-top:0;}
.class .list>li .txt ul li ul.on {display: block;}
.class .list>li .txt ul li ul li {margin-bottom:8px; font-size:13px;}
.class .list>li .txt ul li ul li:last-child {margin:0 0 0px 0}
.class .list>li .txt ul li ul li img {opacity:0.8;}
.class .list>li .txt ul li ul li:first-child {font-weight:500; color:#333; margin:2px 0 10px 0;}

.making .cont.gall_type ul li:last-child:after {content:''; clear:both; display: table;}
.making .cont.gall_type ul li:last-child {margin-top:18px;}
.making .cont.gall_type ul li:last-child button {float:left; width:calc((100% - 5px) / 2); height:30px; font-size:13px; color:#fff; border:none; border-radius:8px; background:#333; padding-bottom:1px;}
.making .cont.gall_type ul li:last-child button.del_open {float:right; background:rgba(255,255,255,.7); border:none; color:#999; font-weight:500;}


.class .list>li .txt .bt {margin-top:27px;}
.class .list>li .txt .bt:after {content:''; clear:both; display: table;}
.class .list>li .txt .bt button {float:left ; width:calc((100% - 7px) / 2); height:42px; font-size:15px; color:#636363; border:1px solid #888;padding-bottom:2px; background:none; border-radius:30px;  font-family: "Frank Ruhl Libre", serif;}
.class .list>li .txt .bt button.on {float:right; border:none; background:#333; color:#fff;}

.class .more {font-size:13px; color:#333; border:none; border-bottom:1px solid #333; letter-spacing: 3px; background:none; font-weight:600; padding-bottom:2px; display: block; margin:20px auto 0 auto;}



@media screen and (max-width:1200px) {

}

@media screen and (max-width:1024px) {
	.class .list>li {float:left; width:calc((100% - 25px) / 2); margin:0 25px 25px 0;}
	.class .list>li:nth-child(3n) {margin-right:25px;}
	.class .list>li:nth-child(2n) {margin-right:0;}

}

@media screen and (max-width:767px) {
	.class .banner {display: none;}
	.class {padding-top:35px;}
	.class .ctrl {margin:25px 0 4px 0;}
	.class .ctrl .cate button {font-size:14px; margin-left:24px;}
	.class .ctrl .cate button:after {left:-13px; background:#999}

	.class .list>li {width:100%; margin-right:0px; margin-bottom:15px; padding-bottom:17px;}
	.class .list>li:nth-child(3n) {margin-right:0px;}
	.class .list>li:nth-child(2n) {margin-right:0;}
	.class .list>li .img { }
	.class .list>li .img:after {height:40px;}
	.class .list>li .txt {padding:15px 15px 15px 15px; height:82px;}

	.class .ctrl .cate {padding-top:0;}
	.class .ctrl .search.on {width:100%; margin-right:0; float:initial; margin-top:10px; margin-bottom:8px;}
	.class .ctrl .search.on button {float:left;}
	.class .ctrl .search.on button.ser_bt {margin-top:9px;} 
	.class .ctrl .search.on button.ser_bt img {width:17px}
	.class .ctrl .search.on input[type="text"] {width:100%; float:left; }
}