/*basic*/
body {background: var(--bg);}
.portrait {border: 1px solid gray; border-radius: 100%;background-size: cover;display: block;}
.attestation {border: 1px solid gray;color: black;height: 25px;line-height: 25px;padding: 0 15px;border-radius: 20px;display: inline-block;vertical-align: middle;}
.attestation-com {}
.anime {transition-duration: 0s;}
::-webkit-scrollbar-thumb {background-color: var(--ccc);}
a[title="站长统计"] {display: none;}

@media(max-width:1500px) {
    .main {max-width: 1150px;}
}

/*frame*/
.clause {overflow: hidden;}
.contant {width: calc(100% - 200px - 20px);float: right;}
.sider {width: 200px;float: left;top: 0;z-index: 1;}
.group {}
.subject {margin-bottom: 20px;overflow: hidden;}
.item {padding: 10px;overflow: hidden;}

/*color*/
:root {
    --color: color;
    --bg: #f6f8fa;
    --red: #fd534c;
    --red-deep: #a40103;
    --shadow: 0 3px 5px var(--000-1);
    --gradient: linear-gradient(to right,#ff6345,#f93c34);
    --gradient-deep: linear-gradient(to right,#7E7E7E,#2E2E2E);
}

/*ico*/
.ico-done {background-image: url(../images/ico/done.svg);}
.ico-warn {background-image: url(../images/ico/warn.svg);}
.ico-time {background-image: url(../images/ico/time.svg);}

/*btn*/
.btn {font-size: 16px;font-weight: bold;background-image: var(--gradient);border-radius: 5px;}
.btn i {margin: 0 5px 0 -5px;color: white;line-height: 50px;vertical-align: middle;}
.btn-nomove:hover {transform: translateY(0);}
.btn-sml {height: 40px;line-height: 40px;font-size: 14px;}
.btn-sml i {line-height: 40px;font-size: 21px;}
.btn-empty {background: none;border: 1px solid;border-radius: 30px;color: var(--333);}
.btn-empty i {color: var(--333);}
.btn-follow {border-radius: 20px;}
.btn-follow span {display: none;}
.btn-follow.btn-empty span {display: inline-block;}
.btn-deep {background-image: var(--gradient-deep);}
.btn-red {background-image: var(--gradient);border: 0;color: white;}

.btn-switch {display: flex;}
.btn-switch .btn {height: 30px;line-height: 30px;width: auto;font-size: 14px;padding: 0 10px;border-radius: 0;background: var(--red);border-right: 1px var(--red-deep) solid;font-weight: normal;}
.btn-switch .btn:first-child {border-radius: 5px 0 0 5px;}
.btn-switch .btn:last-child {border: 0;border-radius: 0 5px 5px 0;}
.btn-switch .btn:hover {transform: translateY(0);}
.btn-switch .btn.active {background: var(--red-deep);}

.btn-file {width: 140px;float: left;position: relative;}
.btn-file input[type="file"] {position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0;}

.btn-line {display: inline-block;width: auto;padding: 0 30px;margin: 0 10px;}

/*bet*/
.bet {}
.bet b {color: var(--red);font-size: 18px;margin-right: 5px;}

/*corner*/
.corner {position: absolute;top: 0;right: 0;background: var(--red);width: 40px;height: 40px;border-radius: 0 0 0 40px;text-align: right;padding: 5px;color: white;z-index: 2;display: none;cursor: pointer;}

/*swiper*/
.swiper-container,
.swiper-wrapper,
.swiper-slide {height: auto;}
.swiper-pagination-bullet {background: white;}

/*head*/
.head {background: white;box-shadow: 0 0 3px var(--000-1);position: relative;z-index: 5;margin-bottom: 20px;}
.head-top {background-color: var(--f7);height: 35px;position: relative;z-index: 2;}

.head-address {float: left;line-height: 35px;padding: 0 10px;cursor: pointer;position: relative;}
.head-address i {margin-right: 5px;line-height: 35px;float: left;}
.head-address-cont {background: white;position: absolute;left: 0;top: 35px;width: 370px;box-shadow: var(--shadow);overflow: auto;padding: 10px;display: none;z-index: 1;}
.head-address-cont a {display: block;}
.head-address:hover {background: white;}
.head-address:hover .head-address-cont {display: block;}

.head-region {float: left;line-height: 35px;padding: 0 10px;cursor: pointer;}
.head-region:hover {background: var(--eee);}
.head-region i {margin-right: 5px;line-height: 35px;float: left;}
.head-region-cont {background-color: white;padding: 10px;display: none;}

.head-qu {overflow: hidden;}
.head-qu li {text-align: center;width: 100px;float: left;padding: 5px;}
.head-qu li i {width: 100%;height: 50px;display: flex;justify-content: center;align-items: center;}
.head-qu li i img {width: auto;height: 100%;}
.head-qu li a:hover span {color: var(--red);}

.head-list {float: right;}
.head-list a {height: 100%;float: left;display: block;line-height: 35px;padding: 0 10px;border-right-width: 1px;position: relative;}
.head-list a span {padding: 0 10px;display: inline-block;vertical-align: middle;}
.head-list a i {vertical-align: middle;}
.head-list a em {color: var(--red);padding-left: 5px;}
.head-list a u {width: 31px;height: 31px;display: inline-block;border-radius: 100%;vertical-align: middle;background-color: var(--eee);background-size: cover;}
.head-list a:hover {background: var(--ddd);}
.head-list a:hover span {border-right-color: var(--ddd);}
.head-list a.center {display: flex;}

.head-cont .main {display: flex;height: 110px;}
.head-search {width: 300px;display: flex;margin: 30px 20px;position: relative;}
.head-search input {width: 100%;flex: 1;border: 2px var(--red) solid;border-radius: 30px 0 0 30px;padding: 0 20px;font-size: 16px;}
.head-search button {width: 90px;border-radius: 0 30px 30px 0;}

.head-search-history {position: absolute;top: 50px;left: 0;width: 100%;background-color: white;border-radius: 5px;box-shadow: 0 3px 10px var(--000-1);padding: 0 10px;display: none;}
.head-search-history h6 {color: var(--ccc);border-bottom-width: 1px;padding: 10px 0;font-weight: normal;}
.head-search-history h6 a {float: right;color: var(--ccc);}
.head-search-history h6 a i {color: var(--ccc);}
.head-search-history h6 a:hover {color: var(--red);}
.head-search-history h6 a:hover i {color: var(--red);}
.head-search-history ul {padding: 10px 0;}
.head-search-history ul li {padding: 5px;float: left;}
.head-search-history ul li a {display: block;padding: 5px 10px;background: var(--eee);border-radius: 3px;}
.head-search-history ul li a:hover {background: var(--red);color: white;}

.head-car {margin: 35px auto;width: 120px;}
.head-car em {margin-left: 5px;color: var(--red);}

.head-follow {position: absolute;top: 35px;right: 0;width: 320px;z-index: 6;display: none;padding-top: 10px;}
.head-follow .triangle {border-width: 0 10px 10px 10px;border-color: transparent transparent white transparent;right: 40px;top: 0;}
.head-follow-cont {background: white;box-shadow: 0 0 15px var(--000-2);padding: 10px 20px;}
.head-follow-cont li {padding: 10px 0;display: flex;width: 100%;}
.head-follow-cont li em {width: 50%;border-width: 1px;padding: 8px;display: block;margin-right: 15px;}
.head-follow-cont li em img {width: 100%;height: auto;}
.head-follow-txt {flex: 1;}
.head-follow-txt i {font-size: 32px;}
.head-follow-txt i.ico-wechat {color: green;}

.head-foll:hover .head-follow {display: block;}

.logo {width: 200px;height: 110px;background-image: url(../images/name.svg);animation-delay: 1s;background-size: 95%;}

/*menu*/
.menu {flex: 1;}
.menu-cont {float: left;padding: 0 0 0 50px;}
.menu-cont li > a {font-size: 16px;font-weight: bold;padding: 0 10px;height: 110px;line-height: 110px;border-bottom: 3px white solid;position: relative;}
.menu-cont li > a:hover {border-bottom-color: var(--red);color: var(--red);}
.menu-cont .new {width: 35px;height: 20px;background-image: url(../images/new.svg);position: absolute;top:20px;right: 10px;}
.menu-group {width: 130px;text-align: center;margin-left: -25px;}
.menu-group a {background: white;}
.menu-group a:first-child {border-radius: 10px 10px 0 0;}
.menu-group a:last-child {border-radius: 0 0 10px 10px;}
.menu-group a:hover {background: var(--red);color: white;}

/*banner*/
.banner {height: 500px;display: flex;margin-bottom: 20px;}
.banner .swiper-banner {flex: 1;}
.banner .swiper-slide {height: 500px;}
.banner .swiper-button-next, 
.banner .swiper-button-prev {width: 70px;height: 70px;color: white;transform: scale(.7);background: var(--000-5);border-radius: 5px;}

/*nav*/
nav {width: 200px;background: white;position: relative;z-index: 3;}
.nav-group {}
.nav-group h4 {font-size: 16px;text-align: center;height: 45px;line-height: 45px;}
.nav-group:hover h4 {background-color: var(--f7);color: var(--red);}
.nav-group:hover .nav-cont {display: block;}
.nav-cont {position: absolute;left: 200px;top: 0;width: 500px;height: 100%;background: white;box-shadow: 0 3px 10px var(--000-1);display: none;}
.nav-list {padding: 0 10px;overflow: auto;}
.nav-list .swiper {height: 140px;overflow: hidden;position: relative;}
.nav-list a.swiper-slide {height: 130px;display: block;padding: 10px;border: 1px transparent solid;text-align: center;}
.nav-list a:hover {border-color: var(--eee);}
.nav-list em {width: 100%;height: 80px;display: block;margin-bottom: 10px;}
.nav-list span {display: block;}
.nav-title {padding: 10px 0;display: flex;align-items: center;}
.nav-title h3 {padding: 0 10px;border-left: 3px var(--red) solid;line-height: 100%;font-size: 16px;flex: 1;}
.nav-title span {color: var(--ccc);padding: 0 10px;}
.nav-block {overflow: hidden;}
.nav-block li {width: 50%;float: left;padding: 10px;}
.nav-block li a {display: flex;align-items: center;border-radius: 5px;height: 100px;overflow: hidden;}
.nav-block-cont {width: calc(100% - 110px);float: left;padding: 10px;}
.nav-block-cont h6 {line-height: 250%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.nav-block li a em {width: 110px;height: 100%;background-size: cover;}
.nav-block li:nth-child(1) a {background-color: #add2ef;}
.nav-block li:nth-child(2) a {background-color: #fff9ec;}
.nav-block li:nth-child(3) a {background-color: #dbe5ff;}
.nav-block li:nth-child(4) a {background-color: #f8f3ff;}
.nav-block li:nth-child(1) a h6 {color: #3aadeb;}
.nav-block li:nth-child(2) a h6 {color: #968765;}
.nav-block li:nth-child(3) a h6 {color: #5a65a8;}
.nav-block li:nth-child(4) a h6 {color: #a378c8;}

.fly {position:fixed;top: 20%;right: 50%;margin-right: 660px;}
.fly nav {width: 90px;box-shadow: 0 3px 10px var(--000-1);}
.fly .nav-group h4 {font-size: 14px;height: auto;line-height: 150%;padding: 13px;}
.fly .nav-cont {left: 90px;}

@media(max-width:1500px) {
    .fly {right: auto;left: 5px;}
    .fly nav {width: 50px;}
    .fly .nav-group h4 {padding: 10px;line-height: 120%;}
    .fly .nav-cont {left: 50px;}
}

/*rob*/
.rob {margin-bottom: 20px;}
.rob .swiper-rob {padding-bottom: 30px;height: auto;}
.rob .swiper-wrapper {height: auto;}
.rob .swiper-pagination-bullet {background: var(--ccc);}
.rob .swiper-slide {height: 320px;}
.rob-cont {display: flex;width: 100%;}
.rob-cont a {flex: 1;height: 100%;background-color: white;background-position: center top;margin:0 10px;text-align: center;}
.rob-cont a h3 {padding: 20px 0;font-size: 22px;}
.rob-cont a span {display: inline-block;height: 35px;line-height: 35px;color: white;border-radius: 20px;padding: 0 20px;margin-bottom: 10px;}
.rob-cont a em {background-size: cover;width: 140px;height: 120px;display: block;margin: auto;}
.rob-cont a h5 {height: 40px;line-height: 40px;overflow: hidden;padding: 0 10px;}
.rob-cont a:nth-child(1n) {background-image: url(../images/rob/1.svg);}
.rob-cont a:nth-child(1n) span {background: var(--blue);}
.rob-cont a:nth-child(2n) {background-image: url(../images/rob/2.svg);}
.rob-cont a:nth-child(2n) span {background: var(--orange);}
.rob-cont a:nth-child(3n) {background-image: url(../images/rob/3.svg);}
.rob-cont a:nth-child(3n) span {background: var(--green);}
.rob-cont a:nth-child(4n) {background-image: url(../images/rob/4.svg);}
.rob-cont a:nth-child(4n) span {background: var(--red);}
.rob-cont a:hover em {transform: scale(.9);}

/*title*/
.title {padding: 40px 0;}
.title h3 {font-size: 26px;}
.title span {font-size: 16px;color: var(--999);}
.title u {width: 50px;height: 3px;background: var(--red);display: block;margin: 15px auto;}
.title em {width: 30px;height: 30px;background-image: url(../images/title.svg);margin: 0 20px;background-size: 80%;}
.title .btn {float: right;width: auto;padding: 0 20px;}
.title label {float: left;line-height: 40px;}

.title-left {overflow: hidden;}
.title-left h3 {float: left;border-left: 5px var(--red) solid;padding: 0 20px;line-height: 26px;height: 26px;}

.title-sml {overflow: hidden;padding: 10px 0;border-bottom-width: 1px;}
.title-sml h3 {float: left;font-size: 18px;border-left: 3px var(--red) solid;padding: 0 15px;margin: 10px 0;line-height: 20px;}
.subject #time{margin-left: 20px; display: flex;flex-direction: row; width: 300px;height: 50px; align-items: center;}
@media only screen and (min-width: 680px) {
    .subject #time h5:last-child{margin-left: 50px;}
}
.subject #time #timeStart{text-align: center;border: 1px solid grey;height: 30px;width: 90px;flex-shrink: 0;border-radius: 5px}
.subject #time #timeEnd{text-align: center;border: 1px solid grey;height: 30px;width: 90px;flex-shrink: 0;border-radius: 5px}
.title-sml .btn {margin: 0 10px;}
.title-sml span {float: left;line-height: 20px;margin: 10px 0;font-size: 14px;}

/*product*/
/*.product {overflow: hidden;}*/
.product li {width: 20%;float: left;padding: 10px;position: relative;margin-top: 20px}
.product li a {background-color: white;display: block;}
.product li em {width: 100%;height: 240px;display: block;background-size: cover;}
.product-cont {padding: 15px;}
.product li h5 {height: 50px;line-height: 25px;overflow: hidden;}
.product li h6 {padding: 10px 0;height: 45px;}
.product li aside {display: flex;}
.product li aside span {width: 50%;overflow: hidden;display: block;white-space: nowrap;text-overflow: ellipsis;border-right-width: 1px;line-height: 16px;margin-right: 5px;color: var(--999);padding-right: 5px;}
.product li aside .score {flex: 1;}
.product li a:hover h5 {color: var(--red);}
.product li a:hover em {transform: scale(.9);}
.product li .corner {margin: 10px;}
.product li:hover .corner {display: block;}
.product-edit {width: 100px;margin: auto;}

.product-state {width: 100%;height: 100%;background: var(--000-3);text-align: center;}
.product-state-cont i {color: white;display: block;font-size: 40px;margin: 0 auto 10px;}
.product-state-cont span {color: white;font-size: 16px;}
.product-state-cont cite {font-size: 14px;color: white;display: block;}

.product .btn-flex a {margin-right: 5px;}
.product .btn-flex a:last-child {margin-right: 0;}

.product-empty {height: 500px;}
.product-empty h5 {color: var(--ddd);}
.product-empty i {font-size: 64px;display: block;margin: 20px auto;color: var(--ddd);}

/*contrast*/
.contrast {}
.contrast-pop {}
.contrast-open {}
.contrast-cont {display: flex;padding: 20px;}
.contrast-cont li {padding: 20px;border-width: 1px;border-radius: 10px;margin: 20px;flex: 1;position: relative;}
.contrast-cont li i {position: absolute;top: 0;right: 0;margin: 10px;color: var(--red);display: none;}
.contrast-cont li h4 {padding-bottom: 10px;}
.contrast-cont li p {}
.contrast-cont li.active {border-color: var(--red);}
.contrast-cont li.active i {display: block;}

/*life*/
.life {margin: 50px 0;}
.life-cont {overflow: hidden;}
.life-cont li {width: 25%;float: left;padding: 10px;}
.life-cont li a {display: block;}
.life-cont li a em {width: 100%;height: 240px;display: block;border-radius: 5px;background-size: cover;}
.life-txt {width: 70%;box-shadow: var(--shadow);padding: 15px 0;text-align: center;margin: -40px auto 20px;background: white;border-radius: 5px;}
.life-txt h4 {padding-bottom: 10px;}
.life-txt span {color:var(--999);}
.life-cont li a:hover em {background-position: center top;}
.life-cont li a:hover .life-txt {background: var(--red);}
.life-cont li a:hover .life-txt * {color: white;}

.life-title {overflow: hidden;padding-top: 30px;}
.life-title h4 {background: var(--red);float: left;line-height: 50px;padding:  0 50px;color: white;}

/*foot*/
.foot {margin-top: 130px;background: var(--333);color: white;width: 100%;}
.foot-cont {padding: 50px 0;display: flex;}
.foot-list {flex: 1;display: flex;}
.foot-list li {flex: 1;}
.foot-list li h5 {color: white;padding: 15px 0;}
.foot-list li a {display: block;color: var(--999);line-height: 30px;}
.foot-list li a:hover {color: white;}
.foot-other {border-left: 1px var(--fff-1) solid;padding-left: 50px;}
.foot-other p {color: var(--999);}
.foot-other .btn {width: 160px;margin-bottom: 30px;}
.foot-copy {background: var(--111);display: flex;text-align: center;align-items: center;justify-content: center;}
.foot-copy span {color: var(--999);line-height: 50px;text-align: center;padding: 0 10px;}
.foot-copy a {color: var(--999);line-height: 50px;}
.foot-copy a:hover {color: white;}

/*more*/
.more {width: 200px;margin: 30px auto;display: block;}

/*im*/
.im {position: fixed;left: 50%;top: 50%;margin: -250px 0 0 670px;background: white;z-index: 2;box-shadow: 0 3px 10px var(--000-1);}
.im a {display: block;font-size: 16px;font-weight: bold;width: 35px;text-align: center;padding: 16px 0;margin: 0 20px;border-bottom-width: 1px;}
.im a:last-child {border: 0;}
.im a i {display: block;margin: auto;}
.im a:hover, .im a:hover i,
.im a.active, .im a.active i {color: var(--red);}

@media(max-width:1500px) {
    .im {left: auto;right: 5px;}
    .im a {font-size: 14px;width: 30px;padding: 10px 0;margin: 0 10px;}
}

/*login*/
.login {background: var(--red) url(../user/login.png) center top no-repeat;}
.login .head {background-color: transparent;box-shadow: 0 0 0;margin-bottom: 0;}
.login .head-search,
.login .head-car {display: none;}
.login .logo {background-image: url(../images/name-white.svg);}
.login .menu-cont a,
.login .menu-cont a:hover {color: white;border: 0;}
.login .tab-list {display: flex;}
.login .tab-list li {flex: 1;}

.login-main {overflow: hidden;display: flex;}
.login-banner {flex: 1;padding: 100px;}
.login-banner img {width: 100%;height: auto;}
.login-cont {width: 420px;height: 500px; background-color: white;border-radius: 10px;padding: 10px 30px;}
.login-group {padding: 0 0 10px;}
.login-group h4 {padding: 30px 0;}
.login-group h4,
.login-group i,
.login-group a {color: var(--red);}
.login-group a:hover {text-decoration: underline;}
.login-group li {border-bottom-width: 1px;overflow: hidden;display: flex;padding: 5px 0;width: 100%;}
.login-group li input {flex: 1;font-size: 16px;}
.login-group li a {line-height: 50px;}
.login-group p {padding: 15px 0;overflow: hidden;}
.login-group u {width: 100px;height: 40px;display: block;}
.login-group > button {margin: 10px 0;}
.login-group .select {background: var(--gradient);border-radius: 5px;}
.login-group .select option {background: var(--red);}
.login-group .select i {color: white;}
.login-group .select select {color: white;padding: 0 20px;font-size: 16px;}

.login-li {flex: 1;margin: 0 5px 10px;}
.login-li span {line-height: 50px;}
.login-li span a {float: right;}
.login-up {height: 50px;position: relative;border-width: 1px;border-style: dashed;}
.login-up em,
.login-up i {margin: 0;color: var(--ddd);}
.login-up input {position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0;}
.login-up.done em {display: none;}

.login-back {}
.login-back a,
.login-back a i.icons {color: var(--ccc);}

/*article*/
article {}
article * {padding: 5px 0;}
article li * {padding: 0;}
article hr {padding: 0;opacity: .15;}
article img {max-width: 100%;}

.article {padding: 0 20px 40px;}
.article .title h3 {border-bottom-width: 1px;display: block;padding: 20px 0;margin-bottom: 10px;}
.article-cont {padding: 0 10px;}

/*list*/
.list {}

.list-sever {padding: 0 20px;}
.list-sever li {padding: 20px 0;}
.list-sever li em {width: 160px;height: 120px;display: block;background-size: cover;border-radius: 5px;position: relative;overflow: hidden;}
.list-sever li a:hover em {transform: scale(.9);}
.list-sever li em b {position: absolute;width: 100%;height: 100%;color: white;font-size: 16px;}
.list-sever li .btn {width: 130px;margin: 0 5px;}
.list-sever .list-txt {flex: 1;padding: 0 20px;}
.list-sever .list-txt h5 {margin-bottom: 10px;height: 30px;line-height: 30px;overflow: hidden;}
.list-sever .list-txt p {color: var(--999);line-height: 25px;min-height: 50px;height: auto;overflow: hidden;margin-bottom: 5px ;}
.list-sever .list-txt a:hover h5 {color: var(--red);}
.list-sever .list-txt span {color:  var(--999);}
.list-sever .list-txt-col {overflow: hidden;line-height: 30px;padding-top: 10px;}
.list-sever .list-txt-col span {color: var(--333);display: block;float: left;padding-right: 10px;}
.list-sever .list-txt-col .btn-switch {float: left;margin-right: 10px;}
.list-sever .list-txt-col .btn {margin: 0;width: auto;}

.list-message {}
.list-message li em {width: 80px;height: 80px;line-height: 80px;color: white;font-size: 36px;background: #735fed;border-radius: 100%;}
.list-message .list-txt p {color: var(--333);}

/*shop*/
.shop {}
.shop .tab {padding-top: 10px;}
.shop-info {margin-top: 30px;padding: 20px;}
.shop-info em {width: 90px;height: 90px;}
.shop-info a.btn {width: 100px;margin: 0 40px;}
.shop-info .data {width: 400px;}
.shop-basic {flex: 1;padding: 0 20px;}
.shop-basic h3 {padding-bottom: 10px;}

.shop-txt {}
.shop-txt a {padding: 0 20px;}
.shop-txt a:hover {color: var(--red);}
.shop-txt cite {flex: 1;}
.shop-txt .vip {width: 50px;background: var(--red) url(../images/vip.svg) center no-repeat;background-size: 25px;}
.shop-txt span.btn {width: auto;float: left;height: 20px;line-height: 20px;border-radius: 10px;font-size: 14px;font-weight: normal;padding: 0 15px;}
.shop-txt .attestation {margin-right: 20px;}

.shop-infomation {padding: 20px;border-top-width: 1px;}

/*follow*/
.follow {overflow: hidden;padding: 10px;}
.follow li {width: 50%;float: left;padding: 15px;}
.follow li i.checkbox-circle.active {color: var(--red);}
.follow li em {width: 60px;height: 60px;border-width: 1px;}
.follow-name {flex: 1;padding: 0 10px;}
.follow-name h5,
.follow-name p {height: 25px;line-height: 25px;overflow: hidden;}
.follow-name p {color: var(--ccc);}
.follow-name a:hover h5 {color: var(--red);}
.follow li .btn {width: 100px;height: 30px;line-height: 30px;border-radius: 20px;font-size: 
14px;}

/*data*/
.data{display: flex;flex-direction: row;justify-content: space-around}

.datas{background-color: rgb(238, 240, 241); border-radius: 10px;display: flex;flex-direction: row;justify-content: center;align-items: center;}

.datas1{flex: 1;}
.datas1 li {text-align: center;padding: 10px;width: 100%}
.datas1 li h4 {line-height: 200%;}
.datas1 li h6 {line-height: 200%;}
/*.datas1 li i {display: block;font-size: 32px;margin: 10px auto;}*/
.datas1 li a {display: block;padding: 10px 0;position: relative;margin-top: 70px}
/*.datas1 li a:hover {background: var(--bg);}*/
.datas1 li span {color:var(--999);}
.datas1 li a u {position: absolute;font-size: 35px; top: -55px;right: 16px;color: red;padding: 0 6px;border-radius: 20px;margin: 10px;}
.datas1 .score {text-align: center;}
.datas1 .score i {display: inline-block;float: none;font-size: 16px;margin: 0;}

.datas2 {flex: 2; display: flex;padding: 10px 0;flex-wrap: wrap;}
.datas2 li {text-align: center;padding: 10px;margin-top: 10px; width: 50%}
.datas2 li h4 {line-height: 200%;}
.datas2 li h6 {line-height: 200%;}
/*.datas2 li i {display: block;font-size: 32px;margin: 15px auto;}*/
.datas2 li a {display: block;padding: 5px 0;position: relative;}
/*.datas2 li a:hover {background: var(--bg);}*/
.datas2 li span {color:var(--999);}
.datas2 li a u {position: absolute;font-size: 15px; top: -25px;right: 20px;color: red;padding: 0 6px;border-radius: 20px;margin: 10px;}
.datas2 .score {text-align: center;}
.datas2 .score i {display: inline-block;float: none;font-size: 16px;margin: 0;}

.datas3 {background-color: rgb(238, 240, 241); border-radius: 10px; display: flex;padding: 10px 0;flex-wrap: wrap}
.datas3 li {text-align: center;padding: 10px;margin-top: 5px; width: 50%}
.datas3 li h4 {line-height: 200%;}
.datas3 li h6 {line-height: 200%;}
/*.datas3 li i {display: block;font-size: 32px;margin: 10px auto;}*/
.datas3 li a {display: block;padding: 5px 0;position: relative;}
/*.datas3 li a:hover {background: var(--bg);}*/
.datas3 li span {color:var(--999);}
.datas3 li a u {position: absolute;font-size: 15px; top: -25px;right: 55px;color: red;padding: 0 6px;border-radius: 20px;margin: 10px;}
.datas3 .score {text-align: center;}
.datas3 .score i {display: inline-block;float: none;font-size: 16px;margin: 0;}


/*data2*/
.data2 {background-color: rgb(238, 240, 241);border-radius: 10px;height: 155px; display: flex;padding: 10px 0;justify-content: center;margin-top: 50px;align-items: center}
.data2 li {text-align: center;padding: 10px;}
.data2 li h4 {line-height: 200%;}
.data2 li h6 {line-height: 200%;}
/*.data2 li i {display: block;font-size: 32px;margin: 10px auto;}*/
.data2 li a {display: block;padding: 10px 0;position: relative;}
.data2 li a:hover {background: var(--bg);}
.data2 li span {color:var(--999);}
.data2 li a u {position: absolute;top: -20px;right: 0;color: red;padding: 0 6px;border-radius: 20px;margin: 10px;}
.data2 .score {text-align: center;}
.data2.score i {display: inline-block;float: none;font-size: 16px;margin: 0;}

/*score*/
.score {overflow: hidden;}
.score span {float: left;line-height: 16px;}
.score i {color: var(--eee);font-size: 16px;float: left;}
.score i.active {color: var(--orange);}
.score i:after {content: 'star';}

.score-edit {}
.score-edit i {font-size: 32px;line-height: 50px;}

/*comment*/
.comment {}
.comment-list {padding: 0 20px;}
.comment-list li {padding: 20px 0;border-bottom-width: 1px;}
.comment-user {overflow: hidden;display: block;padding-bottom: 10px;}
.comment-user em {width: 30px;height: 30px;float: left;}
.comment-user span {line-height: 30px;color: var(--ccc);}
.comment-user h5,
.comment-user h6 {line-height: 30px;padding: 0 10px;display: block;float: left;}
.comment-user:hover h5,
.comment-user:hover h6 {color: var(--red);}
.comment-cont {display: flex;}
.comment-product {margin-right: 20px;}
.comment-product a {width: 120px;height: 120px;display: block;background-size: cover;border-radius: 10px;}
.comment-product a:hover {transform: scale(.9);}
.comment-massage {flex: 1;}
.comment-massage .score {padding: 10px 0;}
.comment-massage span {color: var(--999);display: block;width: 100%;}
.comment-massage .btn {width: 120px;padding: 0 20px;margin: 10px 0;}
.comment-massage img {width: 100px;height: 100px;border-width: 1px;margin: 0 10px 10px 0;}
.comment-massage img:hover {transform: scale(3);}

.deliver-pop .pop-main {max-width: 1000px;}
.refund-pop .pop-main {max-width: 1000px;}
.comment-pop .pop-main {max-width: 1000px;}
.comment-principal {display: flex;}
.comment-principal .product {border-right-width: 1px;}
.comment-principal .product li {width: 300px;}
.comment-principal .product li aside span {width: 100%;border: 0;}
.comment-leave {flex: 1;padding: 30px;}
.comment-leave .form {padding: 0;}

/*form*/
.form {}
.form li {}
.form li input,
.form li .input,
.form li .select,
.form li textarea,
.upload i {background-color: transparent;border-width: 1px;}
.form li .input,
.upload i.upload-remove {border: 0;}
.form li input {}
.form li input[readonly] {background: var(--f7);}
.form li .select {}
.form li .select select {}
.form li .code {}
.form li .btn.code {}
.form li button {}
.form li cite {color: var(--999);}
.form .score {padding: 15px 0;}
.form .attestation {margin: 12px 0;}
.form span {padding: 0 5px;}

.form .view-file {display: none;float: left;width: 140px;margin: 0 20px;}
.form .view-file:hover {color: white;}

.form-title {padding: 5px 0;margin-left: -20px;float: left;width: 100%;}
.form-title h5 {width: 100%;color: white;line-height: 40px;padding: 0 25px;background: var(--red);border-radius: 0 20px 20px 0;display: inline-block;}
.form-title .h7 { color: black;font-weight: bolder;line-height: 40px;padding: 0 25px;border-radius: 0 20px 20px 0;display: inline-block;}
.form-left {}
.form-left li {float: left;width: 50%;padding-right: 20px;}
.form-left li.wide {width: 100%;}
.form-left li label {height: 50px;overflow: hidden;float: left;}
.form-left .sml {width: 300px;}
.form-left .min {width: 150px;}

.price-add {width: 160px;float: left;}

.price-list {}
.price-list > li {border-width: 1px;position: relative;padding: 10px 0 0;}
.price-col {position: absolute;top: 0;right: 0;}
.price-col a {width: 40px;height: 40px;line-height: 40px;display: block;float: left;}
.price-col a:hover {color: var(--red);}

.rent .min {width: 9%;}

.upload-group em {position: absolute;top: 0;left: 0;background: var(--red);color: white;height: 30px;line-height: 30px;padding: 0 10px;border-radius: 0 0 20px 0;}

/*page*/
.page {padding: 50px 0;}
.page a,
.page button,
.page input {border-width: 1px;background: white;margin: 2px;}
.page a:hover,
.page a.active,
.page button:hover {background: var(--red);border-color: var(--red);}

/*classify*/
.classify {}
.classify-li {display: block;padding: 20px 0;text-align: center;}
.classify-li li {border-right-width: 1px;padding: 0 10px;display: inline-block;}
.classify-li li:last-child {border: 0;}
.classify-li li a {font-size: 16px;font-weight: bold;padding: 0 15px;height: 40px;line-height: 40px;display: block;border-radius: 20px;}
.classify-li li a:hover,
.classify-li li a.active {background: var(--gradient);color: white;}

.classify-select {}
.classify-select a {float: left;line-height: 60px;padding: 0 20px;}
.classify-select a.active i {transform: rotate(180deg)}
.classify-select a:hover,
.classify-select a:hover i {color: var(--red);}
.classify-select .select {width: 200px;margin: 5px;background: none;}

/*tab*/
.tab {padding-top: 10px;}
.tab-list {border-bottom-width: 1px;display: block;overflow: hidden;}
.tab-list li {width: auto;float: left;}
.tab-list li a {line-height: 50px;font-size: 18px;border-bottom: 3px white solid;padding: 0 10px;}
.tab-list li.active a {border-bottom-color: var(--red);color: var(--red);}
.tab-list li a span {color: var(--ccc);font-weight: normal;padding-left: 5px;font-size: 16px;vertical-align: top;}
.tab-more {float: right;}
.tab-more a {float: left;width: auto;padding: 0 20px;margin-right: 10px;}

/*fabric*/
.fabric {}
.fabric .swiper-container, .fabric .swiper-wrapper, .fabric .swiper-slide {height: 100%;}
.fabric h4 {width: 100px;}
.fabric-basic {display: flex;padding: 30px 20px;}
.fabric-light {width: 430px;margin-right: 30px;}
.fabric-light .gallery-top {height: 430px;margin-bottom: 10px;}
.fabric-light .gallery-thumbs {height: 75px;}
.fabric-light .gallery-thumbs .swiper-slide {border-width: 1px;}
.fabric-light .swiper-slide-thumb-active {border-color: var(--red);}
.fabric-light em {height: 350px;display: block;background-size: cover;}
.swiper-zoom {position: absolute;right: 0;bottom: 0;padding: 10px;background-color: var(--000-5);color: white;font-size: 36px;}
.fabric-info {flex: 1;}
.fabric-info h3 {padding: 10px 0;line-height: 160%;}
.fabric-info h3 span {background: var(--red);color: white;font-size: 14px;display: inline-block;padding: 0 15px;border-radius: 20px;margin-right: 10px;height: 25px;line-height: 25px;}
.fabric-info p {color: var(--999);}
.fabric-list {padding: 20px 0;overflow: hidden;}
.fabric-list li {padding: 10px 0;overflow: hidden;line-height: 35px;display: flex;}
.fabric-list li span {display: block;float: left;width: 100px;}
.fabric-select {flex: 1;}
.fabric-select a {display: inline-block;margin: 0 10px 5px 0;padding: 0 15px;border-width: 1px;}
.fabric-select a.active {background: var(--red);border-color: var(--red);color: white;}
.fabric-col {padding: 20px 0;overflow: hidden;}
.fabric-col a.btn {width: 180px;float: left;margin-right: 20px;}
.fabric-col a.btn:first-child {background: var(--orange);}
.fabric-col a.btn:last-child {background: var(--red);}
.fabric-col-list {float: right;}
.fabric-col-list a {float: left;text-align: center;margin: 0 20px;}
.fabric-col-list a i {display: block;font-size: 32px;}
.fabric-col-list a i.active {color: var(--red);}
.fabric-col-list a:hover,
.fabric-col-list a:hover i {color: var(--red);}
.fabric-other {padding: 20px;}
.fabric-other .score {display: inline-block;}
.fabric-other .score i {font-size: 16px;margin: 0;}
.fabric-other em {color: var(--red);}
.fabric-other img {max-width: 63%;height: auto;display: block;margin: auto;}
.fabric-txt {flex: 1;}
.fabric-txt h5 {padding: 10px 0;}

.fabric-meal-num,
.fabric-meal-cont {flex: 1;}
.fabric-meal-num .bet,
.fabric-meal-gug .bet,
.fabric-meal-cont .bet {display: none;}
.fabric-meal-num .bet.active,
.fabric-meal-gug .bet.active,
.fabric-meal-cont .bet.active {display: block;}

.fabric-meal-cont .bet {display: none;}
.fabric-meal-cont .bet.active {display: block;}

.fabric-video {background: white;}
.fabric-video video {width: auto;height: 400px;margin: auto;display: block;object-fit: none;}

.fabric-toggle {}
.fabric-toggle:after {content: '显示信息';}
.fabric-toggle.active:after {content: '隐藏信息';}

.need-list {}
.need-list li {width: 50%;float: left;}
.need-list li:first-child {width: 100%;}
.need-list li em {display: none;}
.need-list li a.btn {width: 120px;}
.need-list li a:hover {color: var(--red);}

/*user*/
.user {}
.user .product li {width: 25%;height: 432px;}
.user .product li i.checkbox.corner {right: auto;left: 0;border-radius: 0 0 40px 0;background: var(--000-6);text-align: left;}
.user .product li i.checkbox.corner.active {display: block;}

.history .product li {height: 380px;}

.user-toggle {display: none;align-items: center;cursor: pointer;}
.user-list {padding: 20px;}
.user-list ul {border-bottom-width: 1px;padding: 10px 0;}
.user-list ul:last-child {border: 0;}
.user-list ul li {text-align: center;}
.user-list ul li a {display: block;line-height: 50px;font-size: 16px;font-weight: bold;border-radius: 5px;}
.user-list ul li a.active,
.user-list ul li a:hover {background: var(--gradient);color: white;}
.user-list ul li a em {background: var(--red);color: white;padding: 0 8px;border-radius: 100px;font-weight: normal;margin-left: 5px;}
.user-list ul li a:hover em {background: white;color: var(--red);}

.user-info {display: flex;padding: 20px;align-items: center;justify-content: center;}
.user-info-name {width: 400px;}
.user-info-name em {width: 90px;height: 90px;margin-right: 20px;border-width: 1px;}
.user-info-cont {flex: 1;}
.user-info-cont h3 {}
.user-info-cont h3 .new {line-height: 24px;padding: 0 10px;border-radius: 100px;display: inline-block;vertical-align: middle;text-transform: uppercase;font-size: 12px;background: var(--orange);color: white;}
.user-info-cont h3 .new:after {content: 'new';}
.user-info-cont .score {padding: 10px 0;}
.user-info-other {width: 270px;padding: 10px 0;overflow: hidden;}
.user-info-other a {width: 50%;display: block;float: left;line-height: 40px;}
.user-info-other a span {color: var(--red);padding-left: 5px;}
.user-info-other a i {margin-right: 5px;}
.user-info-other a:hover,
.user-info-other a:hover i {color: var(--red);}
.user-info .data {display: block;overflow: hidden;flex: 1;}
.user-info .data li {width: 50%;float: left;}

.user-info-disable {display: flex;align-items: center;padding: 20px 0 0;}
.user-info-disable .btn {width: 100px;margin: 0 5px;}

.user-flex {display: flex;overflow: hidden;}
.user-flex .subject {flex: 1;margin-right: 20px; justify-content: center;align-content: center}
.user-flex .subject:last-child {flex: 2; margin-right: 0;}

.user-recommend {padding-bottom: 20px;}
.user-life .swiper-pagination-bullet,
.user-recommend .swiper-pagination-bullet {background: var(--ccc);}

.user-process {display: flex;padding: 30px;}
.user-process i {font-size: 36px;flex: 1;color: var(--eee);}
.user-process i:after {content: 'trending_flat';}
.user-process li {text-align: center;}
.user-process li.mono {opacity: .5;}
.user-process li em {width: 110px;height: 110px;display: block;margin-bottom: 20px;}
.user-process li em.process-1 {background-image: url(../images/ico/process/1.svg);}
.user-process li em.process-2 {background-image: url(../images/ico/process/2.svg);}
.user-process li em.process-3 {background-image: url(../images/ico/process/3.svg);}
.user-process li em.process-4 {background-image: url(../images/ico/process/4.svg);}
.user-process li em.process-5 {background-image: url(../images/ico/process/5.svg);}
.user-process li b {box-sizing: border-box;}

.user-li {padding: 25px;}
.user-li li {display: flex;line-height: 30px;padding: 5px 0;}
.user-li li span {width: 100px;}
.user-li li p {line-height: 30px;flex: 1;}
.user-li li a {color: var(--red);}

.user-search {background: none;float: right;width: 250px;border-width: 1px;border-radius: 20px;height: 40px;margin: 0 10px;}
.user-search button.icons {line-height: 40px;width: 40px;height: 40px;position: absolute;right: 0;top: 0;}
.user-search input {padding: 0 50px 0 20px;height: 40px;line-height: 40px;}

.user-time {float: right;}
.user-time input {width: 200px;border-width: 1px;border-radius: 20px;height: 40px;margin: 0 10px;padding: 0 10px;float: none;}

.user-center {display: flex;}
.user-center > div {flex: 1;margin-right: 20px;}
.user-center > div:last-child {margin-right: 0;}

/*logistics*/
.logistics {padding: 30px;}
.logistics-list {padding: 30px 0 30px 10px;position: relative;}
.logistics-list u {width: 10px;height: 100%;border-right-width: 1px;position: absolute;left: 0;top: 0;}
.logistics-list li {line-height: 30px;display: flex;padding: 5px 0;}
.logistics-list li i {width: 7px;height: 7px;background: var(--eee);border-radius: 100%;margin: 11px 11px 11px -4px;}
.logistics-list li span {width: 100px;height: 30px;text-align: center;}
.logistics-list li p {flex: 1;}

/*history*/
.history {}
.history-time {padding: 20px;}
.history-time h5 {font-size: 26px;font-weight: 300;color: var(--999);font-style: italic;}

/*program*/
.program {position: fixed;right: 0;bottom: 0;margin: 50px;width: 160px;background: white;padding: 10px;z-index: 2;}
.program h6 {text-align: center;padding: 10px 0;}
.program img {width: 100%;height: auto;}
.program a {position: absolute;top: 0;right: 0;margin: 3px;}

/*table*/
.table {}
.table table {}
.table table td {min-width: 100px;max-width: 400px;}
.table table td p {padding: 10px;}
.table table tr:nth-child(2n) td {background: var(--bg);}
.table table tbody tr:hover {background-color: transparent;}
.table table thead th,
.table table thead td {background-color: var(--bg);color: var(--333);}
.table table tbody td .icons:hover {color: var(--red);}

/*calc*/
.calc {width: 160px;}
.calc input {height: 35px;border-width: 1px;margin: 0 5px;}
.calc a.icons {width: 35px;height: 35px;line-height: 35px;border-width: 1px;}
.calc a.icons:hover {background: var(--red);color: white;border-color: var(--red);}

/*pop*/
.pop {z-index: 9;}
.pop-main {border-radius: 10px;}
.pop-title {align-items: center;}
.pop-title h3 {}
.pop-title span {font-size: 14px;font-weight: normal;padding: 0 10px;color: var(--ccc);}
.pop-title a {}
.pop-title a.btn {width: 120px;}
.pop-cont {padding: 1px 0;}

.pop-buy {text-align: center;padding: 40px;position: relative;}
.pop-buy em {width: 210px;display: block;margin: 30px auto;padding: 20px;border-width: 1px;}
.pop-buy em img {width: 100%;height: auto;}
.pop-buy h3 {}
.pop-buy h3 i {width: 30px;height: 30px;display: inline-block;vertical-align: middle;margin-right: 10px;}
.pop-buy h4 {text-align: center;margin-bottom: 30px;}
.pop-buy h4 span {color: var(--red);}
.pop-buy .btn {width: 200px;margin: auto;}

.pop-buy-tip {position: absolute;right: 0;top: 150px;width: 45px;text-align: center;padding: 10px;border-width: 1px;}
.pop-buy-tip i {color: var(--red);}

.pop-follow {display: flex;}
.pop-follow .follow {flex: 1;overflow: auto;max-height: 70%;}

.zoom-pop img {width: 100%;max-height: 80vh;}

.rule {}
.rule .pop-main {max-width: 1000px;}
.rule-cont {padding: 10px;margin: 10px;height: 60vh;overflow: auto;}

.tip {}
.tip .pop-main {max-width: 600px;}
.tip-cont {padding: 40px 0;text-align: center;}
.tip-cont i {font-size: 48px;width: 50px;height: 50px;display: inline-block;color: var(--red);margin-bottom: 20px;}
.tip-cont h4 {}

.agent-pop {display: none;}
.agent-pop .follow li {width: 100%;}

.agent-pop .pop-cont,
.comment-pop .pop-cont,
.relation-pop .pop-cont {max-height: 70vh;overflow: auto;}

.pop .upload x {left: auto;}

.tip-pop {display: block;background-color: transparent;left: auto;top: auto;right: 10px;bottom: 10px;width: 380px;height: auto;}
.tip-pop .pop-title {display: block;position: relative;background-color: var(--fff-8);}
.tip-pop .pop-title h3 {font-size: 18px;text-align: center;color: var(--red);}
.tip-pop .pop-title a {position: absolute;right: 0;top: 0;}
.tip-pop .pop-main {box-shadow: 0 5px 10px var(--000-1);width: 100%;}
.tip-pop .pop-cont {text-align: center;font-size: 16px;font-weight: bold;padding: 20px;line-height: 200%;text-indent: 2em;color: var(--red);background-color: var(--fff-8);}

.about-show-pop .pop-main {width: 100%;height: 100%;max-height: 90vh;max-width: 90vw;}

/*bracket*/
.bracket {padding: 20px;}
.bracket cite {text-align: center;width: 100px;padding: 0 5px;}
.bracket cite .btn {margin: 10px 0;}
.bracket dfn {font-style: normal;text-align: center;width: 15%;}
.user .bracket dfn {width: 120px;}
.bracket aside {flex: 1;padding: 0 10px;}
.bracket-head {background: var(--bg);line-height: 50px;font-weight: bold;}
.bracket-head aside a {width: auto;display: inline-block;padding: 0 20px;}
.bracket-main {}
.bracket-group {border-bottom-width: 1px;padding: 10px 0;flex: 1;}
.bracket-group:last-child {border: 0;}
.bracket-group .calc {margin: auto;}

.bracket-product {}
.bracket-product em {width: 100px;height: 100px;background-size: cover;margin-right: 20px;cursor: pointer;}
.bracket-product em i {color: white;font-size: 32px;opacity: 0;}
.bracket-product em:hover i {opacity: 1;}
.bracket-product em.active {transform: scale(2);box-shadow: var(--shadow);}
.bracket-product em.active i {opacity: 0;}
.bracket-product-txt {flex: 1;}
.bracket-product-txt h5 {max-height: 40px;line-height: 20px;overflow: hidden;margin-bottom: 5px;}
.bracket-product-txt h5 span {background: var(--red);color: white;font-size: 14px;padding: 0 10px;border-radius: 10px;margin-right: 5px;height: 20px;line-height: 20px;display: inline-block;}
.bracket-product-txt p {line-height: 150%;color: var(--999);}
.bracket-product-txt a:hover h5 {color: var(--red);}

.bracket-col {}
.bracket-col .btn {width: 200px;margin-left: 20px;}
.bracket-col .btn-empty {width: auto;padding: 0 20px;}
.bracket-col u {flex: 1;}
.bracket-col span {color:  var(--999);padding: 0 20px;}

.bracket-other {}
.bracket-other li {line-height: 30px;padding: 5px 10px;float: left;width: 100%;}
.bracket-other li span {float: left;width: 120px;}
.bracket-other li em {float: right;}
.bracket-other li h4 {color: var(--red);}
.bracket-other .select {width: 200px;background-color: transparent;border-width: 1px;}
.bracket-other .select select {padding-left: 10px;}

.bracket-pay {padding: 10px 0;overflow: hidden;}
.bracket-pay a {border-width: 1px;padding: 20px 30px;float: left;margin-right: 20px;position: relative;}
.bracket-pay a em {width: 40px;height: 40px;margin-right: 10px;}
.bracket-pay a h5 {font-size: 24px;font-weight: normal;}
.bracket-pay a.active {border-color: var(--red);}
.bracket-pay a.active .corner {display: block;}

.bracket-tip {background: var(--bg);padding: 15px;margin: 10px 0;}
.bracket-tip i {margin-right: 10px;}

.bracket-order {margin: 10px 0;border-bottom-width: 1px;}
.bracket-number {line-height: 40px;background: var(--bg);overflow: hidden;padding: 0 20px;}
.bracket-number h6 {float: left;}
.bracket-number span {float: right;color: var(--999);padding: 0 5px;}

.bracket-class {flex: 1;}

.bracket-edit-time {margin: inherit;}
.bracket-edit-time:hover {color: var(--red);}

/*address*/
.address {}
.address-cont {}
.address-select {overflow: hidden;padding: 20px;}
.address-select li {width: 25%;float: left;padding: 10px;}
.address-select li a {padding: 20px;display: block;border-width: 1px;position: relative;background-size: 100% 100%;}
.address-select li a h5 {padding-bottom: 10px;}
.address-select li a h5 span {padding-left: 10px;}
.address-select li a p {line-height: 30px;height: 60px;overflow: hidden;}
.address-select li.active a {border-color: white;background-image: url(../images/post.svg);}
.address-select li.active a i {display: block;}
.default-btn {width: 90px;display: inline-block;margin: 0 10px;border-radius: 20px;}
.default-btn.active {border: 1px var(--red) solid;}
.default-btn.active span {display: none;}

/*fruit*/
.fruit {padding: 40px;}
.fruit-cont {padding: 30px 0;text-align: center;border-bottom-width: 1px;}
.fruit-cont i {width: 80px;height: 80px;display: block;margin: auto;}
.fruit-cont h3 {padding: 20px 0;}
.fruit-cont span {}
.fruit-col {text-align: center;padding: 20px 0;}
.fruit-col a {width: 160px;display: inline-block;border-radius: 30px;margin: 10px;}

/*relation*/
.relation {}
.relation-pop .pop-main {max-width: 1000px;}
.relation-select {padding: 10px;overflow: hidden;}
.relation-select li {padding: 10px;width: 50%;float: left;}
.relation-select li a {background: var(--bg);padding: 10px;}
.relation-select li i.active {color: var(--red);}
.relation-select li em {width: 100px;height: 100px;background-size: cover;margin: 0 10px;}
.relation-select-txt {flex: 1;}
.relation-select-txt h5 {line-height: 25px;max-height: 50px;overflow: hidden;margin-bottom: 5px;}
.relation-select-refresh {width: 150px;margin: 0 auto 20px;}

.relation-cont {padding: 20px;}
.relation-cont .product {width: 300px;margin: auto;}
.relation-cont .product li {width: 100%;}
.relation-cont .score {display: inline-block;}

.relation-list {display: flex;}
.relation-group {flex: 1;}
.relation-group:first-child {flex: none;width: 150px;}
.relation-group li {line-height: 30px;padding: 10px;overflow: hidden;display: flex;align-items: center;justify-content: center;height: 50px;}
.relation-group li:first-child {height: 250px;}
.relation-group li:last-child {height: 220px;}
.relation-group li:nth-child(3),
.relation-group li:nth-child(4) {height: 80px;}
.relation-group li:nth-child(2n) {background: var(--bg);}
.relation-group .select {background: none;border-width: 1px;margin: 5px;}
.relation-group .select select {padding: 0 50px 0 10px;}
.relation-group em {width: 100%;height: 100%;background-size: cover;display: block;position: relative;}
.relation-group em .corner {display: block;}

.relation-open {border-width: 1px;width: 100%;display: block;height: 100%;text-align: center;color: var(--ddd);}
.relation-open i {display: block;margin: 75px auto 10px;font-size: 36px;color: var(--ddd);}
.relation-name {width: 300px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}

.relation-down {width: 300px;margin: 30px auto;}
.relation-print {padding: 30px;}
.relation-print-cont {text-align: center;padding: 30px;}
.relation-print-cont img {max-width: 100%;box-shadow: var(--shadow);}

/*chat*/
.chat-padding {padding: 40px;}
.chat {height: 700px;overflow: hidden;box-shadow: 0 10px 20px var(--000-1);}
.chat .portrait {width: 50px;height: 50px;position: absolute;}
.chat-title {line-height: 50px;padding: 0 20px;border-bottom-width: 1px;}
.chat-title h5 {}
.chat-sider {width: 260px;float: left;background: var(--f7);height: 100%;}
.chat-sider-list {height: 650px;overflow: auto;}
.chat-sider-list li {}
.chat-sider-list li a {display: block;overflow: hidden;padding: 15px 50px 15px 70px;position: relative;height: 80px;}
.chat-sider-list li a:hover {background: var(--eee);}
.chat-sider-list li a.active {background: white;}
.chat-sider-list li a em {left: 0;top: 0;margin: 15px 10px;}
.chat-sider-list li a h6 {width: 100%;height: 30px;line-height: 30px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;position: relative;padding-right: 20px;}
.chat-sider-list li a h6 u {background: var(--red);color: white;padding: 0 8px;border-radius: 100px;position: absolute;top: 0;right: 0;height: 20px; line-height: 20px;}
.chat-sider-list li a span {height: 20px;line-height: 20px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;display: block;color: var(--ccc);}
.chat-sider-list li a cite {position: absolute;top: 0;right: 0;line-height: 80px;width: 50px;text-align: center;color: var(--999);font-size: 12px;}

.chat-main {width: calc(100% - 260px);height: 100%;float: right;display: flex;flex-direction: column;}
.chat-cont {flex: 1;height: 100%;padding: 10px;overflow: auto;}
.chat-cont::-webkit-scrollbar {width: 5px;}
.chat-cont::-webkit-scrollbar-thumb {background-color: var(--f7);}
.chat-group {margin-bottom: 10px;padding: 0 70px;position: relative;overflow: hidden;}
.chat-group em {left: 0;top: 0;}
.chat-txt {position: relative;float: left;min-width: 150px;}
.chat-txt cite {color: var(--ccc);padding-bottom: 5px;display: block;}
.chat-txt-cont {background: var(--f7);border-radius: 10px 10px 10px 0;padding: 12px;}
.chat-txt p {word-break: break-all;}
.chat-txt .triangle {border-width: 10px 10px 10px 0;border-right-color: var(--f7);left: -10px;top: 15px;}
.chat-txt u {width: 50px;height: 50px;padding: 5px;display: block;float: left;}
.chat-txt u img {width: 100%;height: 100%;}
.chat-txt img {max-width: 100%;}

.chat-group.mine {}
.chat-group.mine em {left: auto;right: 0;}
.chat-group.mine .chat-txt {float: right;}
.chat-group.mine .chat-txt cite {text-align: right;}
.chat-group.mine .chat-txt-cont {background: #ebf5fd;border-radius: 10px 10px 0 10px;}
.chat-group.mine .triangle {border-width: 10px 0 10px 10px;border-left-color: #ebf5fd;left: auto;right: -10px;}

.chat-col {height: 50px;border-top-width: 1px;padding: 0 10px;}
.chat-col a {position: relative;display: block;float: left;width: 40px;height: 50px;text-align: center;}
.chat-col a i {line-height: 50px;color: var(--ccc);}
.chat-col a:hover i {color: var(--333);}
.chat-col a input[type="file"] {position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;}

.chat-masssage {height: 150px;position: relative;padding: 0 10px 10px;}
.chat-masssage textarea {width: 100%;height: 100px;background-color: transparent;padding: 0 10px;}
.chat-masssage a {position: absolute;right: 0;bottom: 0;width: 100px;margin: 10px;}

.chat-full {}
.chat-full .chat-main {width: 100%;}

/*smile*/
.smile {position: absolute;left: 0;bottom: 50px;width: 420px;height: 220px;background: white;box-shadow: var(--shadow);padding: 10px;display: none;}
.smile u {width: 50px;height: 50px;display: block;float: left;padding: 5px;}
.smile u img {width: 100%;height: 100%;}
.smile u:hover {background: var(--eee);}

/*coor*/
.coor-buy,
.coor-lease,
.coor-show {height: 28px;line-height: 28px;text-align: center;border-radius: 3px;color: white;margin: -2px 3px 0 0;vertical-align: middle;display: inline-block;padding: 0 5px;font-weight: normal;}
.coor-buy {background-color: var(--blue);}
.coor-buy:after {content: '售';}
.coor-lease {background-color: var(--red);}
.coor-lease:after {content: '租';}
.coor-show {background-color: var(--sapphire);}
.coor-show:after {content: '展示品';}

/*agency*/
.agency {padding: 10px;display: flex;}
.agency-cont {flex: 1;margin: 10px;border-width: 1px;}
.agency-cont:last-child {width: 45%;flex: none;max-height: 800px;overflow: auto;}
.agency-title {height: 45px;line-height: 45px;padding: 0 20px;background-color: var(--eee);}
.agency-title h4 {}
.agency-list {padding: 10px;}
.agency-list li {padding: 10px;}
.agency-list li em {width: 60px;height: 60px;border-radius: 100%;background-size: cover;background-color: var(--eee);display: block;}
.agency-list li a {width: 100px;}
.agency-txt {flex: 1;padding: 0 20px;}
.agency-txt h5 {line-height: 30px;}
.agency-txt span {color: var(--ccc);height: 30px;line-height: 30px; overflow: hidden;display: block;}
.agency-pop-cont {padding: 20px;}
.agency-pop-cont em {width: 100px;height: 100px;border-radius: 100%;background-size: cover;border: 4px var(--eee) solid;display: block;margin: auto;}
.agency-pop-cont h3,
.agency-pop-cont h5,
.agency-pop-cont h6 {text-align: center;line-height: 250%;}
.agency-pop-cont h5 {line-height: 40px;}
.agency-pop-cont h5 a {color: white;background: var(--gradient);vertical-align: middle;margin-left: 10px;width: 40px;height: 40px;line-height: 40px;text-align: center;border-radius: 100%;}
.agency-pop-txt {padding: 20px 0;max-height: 50vh;overflow: auto;}
.agency-pop-cont h5 * {vertical-align: middle;}

/*news*/
.news {}
.news-bg {background: white;padding: 50px 0;margin-bottom: 50px;}
.news-banner {margin: -20px auto 30px;}
.news-banner .swiper-slide {height: 500px;}

.news-tab {display: flex;padding: 30px 0;text-align: center;}
.news-tab li {flex: 1;}
.news-tab a {display: inline-block;line-height: 50px;font-size: 18px;font-weight: bold;border-bottom: 3px transparent solid;}
.news-tab a.active,
.news-tab a:hover {border-color: var(--red);}

.news-title {padding: 30px 0;overflow: hidden;}
.news-title h3 {font-size: 28px;z-index: 1;position: relative;}
.news-title span {font-size: 60px;text-transform: uppercase;text-shadow: 0 0 5px var(--000-1);color: var(--bg);margin-top: -40px;display: block;}
.news-bg .news-title span {color: white;}
.news-title a {float: right;}
.news-title a:hover,
.news-title a:hover i {color: var(--red);}
.news-title.right {text-align: right;}

.news-view {overflow: hidden;padding-bottom: 50px;}
.news-view li {width: 33.33%;float: left;padding: 10px;}
.news-view a {}
.news-view em {width: 100%;height: 270px;background-size: cover;display: block;}
.news-view h5 {white-space: nowrap;text-overflow: ellipsis;overflow: hidden;line-height: 50px;padding-top: 20px;font-size: 18px;}
.news-view p {height: 120px;line-height: 30px;overflow: hidden;display: block;}
.news-view span {color: var(--ccc);white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.news-view a:hover h5 {color: var(--red);}
.news-view a:hover em {transform: scale(.95);}

.news-list {}
.news-list li {overflow: hidden;padding: 30px 0;}
.news-list li a {}
.news-list li em {width: 200px;height: 130px;display: block;float: left;background-size: cover;}
.news-list-cont {width: calc(100% - 200px - 40px);float: right;}
.news-list-cont h5 {font-size: 18px;}
.news-list-cont p {line-height: 30px;height: 60px;overflow: hidden;margin: 10px 0;}
.news-list-cont span {color: var(--ccc);}
.news-list a:hover h5 {color: var(--red);}
.news-list a:hover em {transform: scale(.95);}

.news-group {overflow: hidden;}
.news-group li {margin: 20px 0;}
.news-group li a {display: flex;}
.news-group li em {width: 400px;background-size: cover;}
.news-group-cont {flex: 1;padding: 25px;background-color: white;}
.news-group-cont h5 {font-size: 22px;line-height: 200%;padding: 10px 0;}
.news-group-cont p {height: 120px;overflow: hidden;}
.news-group-cont span {text-align: right;display: block;}

.news-article {}
.news-article-title {text-align: center;padding: 30px 0;}
.news-article-title h2 {padding: 30px 0;border-bottom-width: 1px;font-size: 28px;}
.news-article-title-info {padding: 20px 0;}
.news-article-title-info span {padding: 0 20px;color: var(--ccc);}
.news-article-cont {overflow: hidden;}
.news-article-cont article {padding: 20px 0;}
.news-article-cont article p {font-size: 16px;padding: 10px 0;}
.news-article-cont article img {max-width: 100%;height: auto;}

/*about*/
.about {}
.about-bg {background: #EEF0F1;padding: 50px 0;margin-bottom: 50px;}
.about-banner {height: 400px;margin: -20px auto 30px;background-size: cover;}
.about-title {text-align: center;padding: 40px 0;}
.about-title h3 {font-size: 30px;padding: 20px 0;}
.about-title h3 span {color: var(--red);}
.about-title p {text-align: center;}
.about-info {display: flex;margin-bottom: 50px;}
.about-info em {width: 300px;margin: 50px;}
.about-info em img {width: 100%;height: auto;}
.about-info-cont {flex: 1;}
.about-info-cont p {text-indent: 2em;padding: 10px 0;}
.about-list {overflow: hidden;}
.about-list li {width: 50%;float: left;position: relative;padding: 0 20px 0 100px;margin: 20px 0;}
.about-list i {font-size: 48px;width: 70px;height: 70px;line-height: 70px; border-radius: 100%;background: white;position: absolute;left:0;top: 10px;color: var(--red);}
.about-list h5 {line-height: 200%;}
.about-list span {line-height: 30px;height: 90px;overflow: hidden;display: block;}
.about-map {}
.about-map #container {width: 100%;height: 600px;}
.BMap_smcbg {background-size: auto;transition: 0s;}
.BMap_cpyCtrl,
.anchorBL {display: none;}

.about-video {}
.about-video ul {}
.about-video li {padding: 10px;width: 33.33%;float: left;}
.about-video li span {display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;height: 50px;line-height: 50px;text-align: center;}

.about-btn {width: 200px;margin: 20px auto;}
.about-hide {display: none;}

.about-show {margin-bottom: 50px;}
.about-show li {width: 33.33%;float: left;padding: 5px;}
.about-show li a {background-size: cover;display: block;height: 240px;}
.about-show li a:hover {opacity: .7;}

/*advise*/
.advise {width: 400px;height: auto;left: auto;right: 0;top: auto;bottom: 0;display: block;}
.advise .pop-choice {animation-delay: 2s;}
.advise .pop-title h3 {line-height: 50px;}
.advise .pop-title .icons {width: 50px;height: 50px;line-height: 50px;}
.advise-cont {padding: 20px;}


/*credit*/
.credit {padding: 40px 0;}
.credit .icons {margin: inherit;}
.credit span {color: var(--red);}


/*region*/
.region-title {padding: 30px;display: flex;align-items: center;}
.region-title em {width: 60px;height: 60px;background-size: cover;background-color: var(--eee);}
.region-title-cont {flex: 1;margin-left: 20px;}
.region-title-cont h2 {margin-bottom: 10px;}
.region-title-cont p {}


/*sentiment*/
.sentiment {float: left;padding: 10px 0;}
.sentiment a {float: left;width: auto;display: flex;align-items: center;margin: 0 5px;}
.sentiment a i {float: left;font-size: 30px;}
.sentiment a span {line-height: 30px;padding: 0 20px;border-radius: 100px;background: var(--eee);}
.sentiment a.active i {color: var(--red);}
.sentiment a.active span {background: var(--red);color: white;}


/*trouble*/
.trouble {}
.trouble-group {margin: 20px 0;padding: 0 20px;}
.trouble-group h5 {padding: 0 20px;border-left: 4px var(--red) solid;line-height: 100%;}
.trouble-cont {padding: 10px 0;}
.trouble-cont p {padding: 10px 0;}
.trouble-cont img {max-width: 100%;}

/*cancellation*/
.cancellation-center {height: 150px;}
.cancellation-center .btn {width: 150px;}

.pop-cancellation .pop-main {width: 500px;}

.cancellation {}
.cancellation-cont {padding: 20px;}
.cancellation-btn {width: auto;float: left;padding: 0 30px;}
.cancellation-form {padding: 30px;}
.cancellation-form li {display: flex;border-bottom-width: 1px;}
.cancellation-form li input {flex: 1;}

/*support*/
.support {padding: 20px;}
.support-list {text-align: center;}
.support-list ul h5 {padding: 10px 0;}
.support-list ul li a {line-height: 30px;height: 30px;font-size: 14px;font-weight: normal;color: var(--999);}
.support-list ul li a:hover {background: none;color: var(--red);}

/*invoice*/
.invoice {}
.invoice-group {margin: 20px 0;}
.invoice-title {line-height: 40px;background: var(--eee);padding: 0 20px;display: flex;}
.invoice-title h6 {flex: 1;}
.invoice-title span {}
.invoice-cont {display: flex;align-items: center;border-width: 1px;padding: 20px;}
.invoice-col {}
.invoice-col a {padding: 0 10px;}
.invoice-col a:not(:last-child) {border-right-width: 1px;}
.invoice-col a:hover {color: var(--red);}
.invoice-info {flex: 1;}
.invoice-info li {line-height: 30px;}

.invoice-paper,
.invoice-enterprise {display: none;}

/*emergency*/
.emergency {
    --red: #a40103;
    --gradient: linear-gradient(to right,#a40103,#a40103);
}
.emergency-light {margin-bottom: 30px;}
.emergency-light img {width: 100%;height: auto;}

.emergency-tab {border-bottom: 3px var(--red) solid;overflow: hidden;}
.emergency-tab li a {height: 50px;line-height: 50px; border: 0;padding: 0 30px;border-radius: 10px 10px 0 0;float: left;font-size: 16px;font-weight: bold;}
.emergency-tab li a i {color: white;margin-right: 10px;display: none;}
.emergency-tab li.active a {background: var(--red);color: white;}
.emergency-tab li.active a i {display: inline-block;}

.emergency-tit {padding: 30px 0;display: flex;align-items: flex-end;}
.emergency-tit h3 {}
.emergency-tit span {color: var(--ccc);}
.emergency-tit span em {color: var(--red);}

.emergency-less {display: flex;}
.emergency-less-list {width: 120px;border-width: 0 0 0 1px;border-radius: 10px 0 0 10px;}
.emergency-less-list li {width: 100%;text-align: center;border-bottom-width: 1px;}
.emergency-less-list li:first-child {border-top-width: 1px;}
.emergency-less-list li a {display: block;}
.emergency-less-list li.active {border-color: var(--red);}
.emergency-less-list li.active a {color: white;background: var(--red);}
.emergency-less-cont {flex: 1;border: 2px var(--red) solid;padding: 10px;}
.emergency-less-group ul {display: grid;grid-auto-flow: column dense;grid-template-rows: auto auto auto auto auto auto auto auto;}
.emergency-less-group li {overflow: hidden;}
.emergency-less-group li a {padding: 10px;display: block;float: left;}
.emergency-less-group li a:hover {color: var(--red);}