/* basic */
.shadow::after {background-image: var(--lg);}
.clause {background-color: var(--light);padding: 50px 0;}
.more {width: 250px;margin: 30px auto;}

/* color */
:root {
    --color: #3657F9;
    --pink: #9449FF;
    --light: #F5F7F9;
    --gery: #dfe6ee;
    --deep: #6D8AAB;
    --lg: linear-gradient(90deg,var(--color),var(--pink));
    --lg-45: linear-gradient(135deg,var(--color),var(--pink));
}

/* btn */
.btn {background-image: var(--lg-45);border-radius: 100px;font-size: 16px;font-weight: bold;}
.btn-empty {border-width: 2px;}
.btn-orange,
.btn-orange.shadow::after {background-image: linear-gradient(135deg,var(--orange),var(--tomato));}

/* head */
.head {position: relative;z-index: 3;}
.head-top {background-color: var(--light);padding: 5px 0;}
.head-top-cont {display: flex;align-items: center;}
.head-top-link {display: flex;}
.head-top-link a {padding: 0 20px;display: block;}
.head-top-link a:not(:last-child) {border-right-width: 1px;}
.head-top-link a:hover {color: var(--color);}
.head-tel {color: var(--red);display: flex;align-items: center;padding: 0 20px;}
.head-tel i {padding-right: 10px;}
.head-tel b {font-size: 20px;}
.head-cont {padding: 10px 0;display: flex;align-items: center;position: relative;}
.head-search {display: flex;width: 550px;}
.head-search input {border: 2px var(--color) solid;flex: 1;border-radius: 100px 0 0 100px;padding: 0 30px;font-size: 16px;}
.head-search a {width: 150px;border-radius: 0 100px 100px 0;padding: 0;}
.head-search a:hover {transform: translateY(0);}
.head-bet h5 b {color: var(--red);}

.head-time {display: flex;align-items: center;}
.head-time a {text-align: center;margin-left: 20px;}
.head-time a i {font-size: 40px;}
.head-time a b {font-size: 30px;}
.head-time a span {display: block;width: 100%;font-size: 14px;font-weight: bold;}

.logo {width: 300px;height: 70px;margin: 40px 0 20px;}
.line {background-image: var(--lg);height: 2px;}

/* menu */
menu {}
menu x {}
menu-cont {z-index: 3;}
menu-cont li a {font-size: 16px;font-weight: bold;line-height: 40px;padding: 0 30px;border-radius: 100px;}
menu-cont li a:hover,
menu-cont li a.active {background-image: var(--lg-45);color: white;}

/*home*/
.home {}
.home-cont {padding: 20px 0;display: flex;}
.home-info {width: 380px;margin-left: 20px;background-color: var(--light);}
.home-login {padding: 30px;}
.home-login h5 {text-align: center;margin-bottom: 20px;}
.home-login-btn {display: flex;justify-content: center;}
.home-login-btn a {width: 150px;margin: 0 10px;}
.home-logout {display: flex;align-items: center;padding: 40px 20px;}
.home-logout em {width: 70px;height: 70px;}
.home-logout h5 {padding: 0 10px;text-transform: inherit;}
.home-logout a {font-size: 32px;padding: 8px;color: var(--color);border-radius: 100%;}
.home-logout a:hover {background-color: var(--gery);}
.home-notice {background-color: var(--gery);}
.home-notice h5 {padding: 20px;display: flex;}
.home-notice h5 a {color: var(--color);}
.home-notice ul {padding: 0 20px;}
.home-notice ul li {margin-bottom: 20px;display: flex;align-items: center;}
.home-notice ul li i {width: 15px;height: 15px;border: 2px var(--color) solid;display: inline-block;border-radius: 100%;margin-right: 10px;}
.home-notice ul li a {flex: 1;min-width: 0;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.home-notice ul li a:hover {color: var(--color);}
.home-notice ul li span {color: var(--ccc);}
.home-block {padding: 20px 0;}
.light {flex: 1;height: 410px;overflow: hidden;}

/* step */
.step {display: flex;align-items: center;background-color: var(--light);border-radius: 0 0 0 50px;}
.step h3 {width: 150px;height: 100px;border-radius: 0 50px 50px 50px;background-image: var(--lg-45);color: white;}
.step ul {display: flex;flex: 1;padding: 0 40px 0;}
.step ul li {display: flex;align-items: center;}
.step ul li i {margin: 0 10px 0 0;font-size: 36px;color: var(--color);}
.step ul u {color: var(--gery);}

/* title */
.title {padding: 50px 0;}
.title h3 {padding: 0 30px;font-size: 36px;}
.title em {width: 110px;border-top-width: 1px;}
.title span {text-transform: uppercase;font-size: 24px;color: var(--eee);font-weight: lighter;}

/* list */
.list {padding: 20px 0;}
.list li {border: 0;width: 25%;float: left;padding: 10px;}
.list li a {background-color: white;display: block;box-shadow: 0 3px 6px var(--gery);}
.list li a em {display: block;height: 200px;position: relative;overflow: hidden;}
.list li a em img {transition-duration: .3s;}
.list li a em cite {position: absolute;top: 0;right: 0;width: 64px;height: 64px;color: white;font-weight: 16px;font-weight: bold;display: flex;align-items: center;justify-content: center;border-radius: 50px 0 50px 50px;padding: 0 14px;text-align: center;}
.list li a em cite.ing {background-color: var(--red);}
.list li a em cite.ing2 {background-color: var(--blue);}
.list li a em cite.ing::after {content: '正在招标';}
.list li a em cite.ing2::after {content: '正在竞价';}
.list li a em cite.end {background-color: var(--pink);}
.list li a em cite.end::after {content: '竞价结束';}
.list li a em cite.ylp {background-color: var(--pink);}
.list li a em cite.ylp::after {content: '已流拍';}
.list li a em cite.begin {background-color: var(--color);}
.list li a em cite.begin::after {content: '即将开始';}
.list li a em cite.begin2 {background-color: var(--blue);}
.list li a em cite.begin2::after {content: '即将开始';}
.list li a em x {position: absolute;left: 0;top: 0;margin: 10px;padding: 10px;border-radius: 100px;background-color: var(--red);color: white;opacity: 0;transition-duration: .3s;}
.list li a:hover em x {opacity: 1;}
.list li a aside {padding: 10px;}
.list li a aside h5 {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding: 10px 0;}
.list li a aside p {margin: 10px 0;color: var(--ccc);display: flex;}
.list li a aside p b {color: var(--red);}
.list li a:hover {transform: translateY(-5px);}
.list li a:hover em img {transform: scale(1.1);}
.list li a:hover aside h5 {color: var(--color);}

/* foot */
.foot {margin-top: 120px;background-image: url(../images/foot.jpg);background-size: cover;}
.foot-cont {display: flex;align-items: center;padding: 60px 0;}
.foot-list {flex: 1;display: flex;}
.foot-list li {flex: 1;}
.foot-list li h3 {color: white;margin-bottom: 20px;padding: 0 10px;}
.foot-list li a {display: block;color: white;line-height: 250%;padding: 0 10px;}
.foot-list li a:hover {background-color: var(--fff-3);}
.foot-sns {display: flex;justify-content: center;}
.foot-sns a {display: block;text-align: center;margin: 0 30px;}
.foot-sns a:hover {transform: scale(1.05);}
.foot-sns em {width: 160px;display: block;background-color: white;}
.foot-sns em img {width: 100%;padding: 10px;}
.foot-sns span {padding: 10px 0;display: block;color: white;}
.foot-copy {padding: 20px 0;background-color: white;text-align: center;}
.foot-copy span {padding: 0 10px;}
.foot-copy a {padding: 0 10px;}
.foot-copy span a:hover {color: var(--color);}

/*im*/
.im {position: fixed;right: 0;top: 40%;background-image: var(--lg-45);border-radius: 100px;margin: 0 20px;padding: 10px 0;z-index: 3;}
.im a {color: white;font-size: 36px;display: block;margin: 10px;} 
.im a:hover {opacity: .5;}
.top {opacity: 1 !important;}

/* crumb */
crumb {padding: 20px 0;}

/*details*/
.details-info {margin-bottom: 20px;}
.details-info h2 {padding: 30px 0;font-size: 28px;}
.details-cont {display: flex;}
.details-img {width: 550px;}
.details-img .gallery-top .swiper-slide {height: 400px;}
.details-img .gallery-thumb .swiper-slide {height: 100px;}
.details-bet {flex: 1;margin: 0 20px;}
.details-bet li {display: flex;align-items: center;}
.details-bet li span {display: block;width: 80px;font-weight: bold;}
.details-bet-time {background-color: var(--light);padding: 20px;}
.details-bet-time li {align-items: baseline;line-height: 40px;}
.details-bet-time li b {font-size: 26px;color: var(--red);}
.details-bet-bet {background-color: var(--gery);padding: 5px 20px;}
.details-bet-bet li {margin: 20px 0;}
.details-bet-bet li input {flex: 1;background-color: white;border-radius: 100px;padding: 0 30px;font-size: 26px;color: var(--color);font-weight: bold;}
.details-bet-bet li a {flex: 1;}
.details-bet-info {background-color: var(--light);padding: 20px;}
.details-bet-info li {float: left;width: 50%;padding: 5px 0;}
.details-bet reminder {background-color: #f9f5da;color: #705B33;border: 0;border-radius: 0;padding: 20px;margin: 10px 0 0;}
.details-data {background-color: var(--light);width: 260px;}
.details-data h5 {background-color: var(--gery);display: flex;padding: 10px;}
.details-history .table table,
.details-history .table table tbody tr {background: none;}
.details-history .table table tbody tr:first-child td {background-color: var(--orange);}
.details-history .table table tbody tr:first-child td:first-child {border-radius: 100px 0 0 100px;}
.details-history .table table tbody tr:first-child td:last-child {border-radius: 0 100px 100px 0;}
.details-history .table table thead tr td {border: 0;background-color: var(--light);}

.details-describe {padding: 50px 0;}
.details-page {padding: 20px 0;}

.details-title label {display: flex;align-items: center;margin: 0 10px;}
.details-title o {font-size: 36px;margin-right: 5px;}

/*login*/
.login {background-image: url(../images/login.jpg);background-size: cover;position: relative;}
.login cite {background-color: #293361;opacity: .7;width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
.login-cont {display: flex;align-items: center;padding: 100px 0;}
.login-ad {flex: 1;}
.login-ad img {width: 85%;}
.login-block {width: 530px;background-color: white;padding: 30px;}
.login-title {display: flex;align-items: center;color: var(--color);margin-bottom: 10px;}
.login-title i {font-size: 36px;margin: 0 10px 0 0;}
.login-title h3 {font-size: 24px;}
.login-form {margin: 20px 0;}
.login-form i {color: var(--color);}
.login-form .btn {margin: 20px 0;}
.login-other {display: flex;align-items: center;}
.login-other a:hover {color: var(--color);}
.login-other .btn {width: 150px;}

/* dataset */
.dataset {display: flex;border-width: 1px;margin-bottom: 20px;padding: 30px 0;}
.dataset li {flex: 1;text-align: center;}
.dataset li h4 {font-size: 24px;padding: 20px 0;color: var(--color);}
.dataset li a {width: 150px;margin: auto;}

/* page */
page {padding: 50px;}
page button,
page input,
page a {background-color: var(--light);border: 0;}

/* tab */
.tab {background-color: var(--light);display: flex;}
.tab li {margin: 10px;}
.tab li a {display: block;height: 50px;line-height: 50px;font-weight: bold;font-size: 16px;padding: 0 40px;border-radius: 100px;}
.tab li:hover a {background-color: var(--gery);}
.tab li.active a {background-image: var(--lg-45);color: white;}

/*user*/
.user {display: flex;}
.user .title {text-align: left;padding: 30px 0;}
.user .title h3 {font-size: 30px;padding: 0;}
.contant {flex: 1;min-width: 0;}
.contant .list li {width: 33.33%;}

.sider {width: 240px;margin-right: 30px;}
.sider .title {padding: 20px 0;}
.sider .title h3 {font-size: 18px;border-left: 3px var(--color) solid;padding-left: 20px;line-height: 100%;}
.sider-nav {background-color: var(--light);padding: 20px;}
.sider-nav li {margin: 5px 0;}
.sider-nav li a {display: flex;align-items: center;padding: 10px;border-radius: 100px;}
.sider-nav li a i {margin: 0 10px 0 0;}
.sider-nav li:hover a {background-color: var(--gery);}
.sider-nav li.active a {background-image: var(--lg-45);color: white;}

.user-info {display: flex;align-items: center;background-color: var(--light);margin-bottom: 20px;}
.user-info em {width: 100px;height: 100px;margin: 30px;}
.user-info-name h4 {text-transform: inherit;margin-bottom: 10px;}
.user-info-other {background-color: var(--gery);display: flex;padding: 20px;}
.user-info-other li {margin: 15px;}
.user-info-other li a {background-color: white;display: block;border-radius: 10px;padding: 20px 30px;}
.user-info-other li a i {display: block;font-size: 46px;color: var(--deep);margin-bottom: 5px;}
.user-info-other li a span {color: var(--deep);}

.user-order {}
.user-order-list {}
.user-order-list li {display: flex;align-items: center;padding: 30px 0;border-bottom-width: 1px;}
.user-order-list li em {width: 200px;height: 150px;display: block;border-radius: 10px;overflow: hidden;}
.user-order-info {flex: 1;padding: 0 20px;}
.user-order-info h5 {font-size: 18px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;margin-bottom: 10px;}
.user-order-info span {display: block;margin: 10px 0;}
.user-order-col {width: 150px;}
.user-order-col a {margin: 10px 0;}
.user-order-col .btn-empty {height: 40px;}

/*classify*/
.classify {background-color: var(--light);padding: 10px 0;}
.classify li {display: flex;align-items: center;margin: 5px 0;}
.classify li span {font-weight: bold;padding: 0 30px;border-right: 2px var(--ccc) solid;margin-right: 30px;}
.classify li p {flex: 1;min-width: 0;}
.classify li a {float: left;display: block;padding: 5px 15px;background-color: white;margin: 5px;border-radius: 100px;}
.classify li a:hover {background-color: var(--gery);}
.classify li a.active {background-color: var(--color);color: white;}

/*help*/
.help {}
.help-list {padding: 20px 10px;background-color: var(--light);}
.help-list a {display: block;padding: 10px;border-radius: 100px;}
.help-list a:hover {background-color: var(--gery);}

empty {padding: 100px 0;}
empty .ico {color: var(--color);}
empty h3 {color: var(--gery);font-weight: normal;}

/* form */
.form {padding-bottom: 30px;}


















@media(max-width:640px){
    
    /* basic */
    .clause {padding: .5rem 0;}
    .more {width: 3rem;margin: .3rem auto;}

    /* btn */
    .btn {font-size: .2rem;}

    /* head */
    .head-top {display: none;}
    .head-cont {padding: 0;}
    .head-search {width: 3rem;}
    .head-search input {padding: 0 .2rem;font-size: .2rem;}
    .head-search a {width: 1rem;height: .7rem;}
    .head-time {display: none;}
    .logo {width: 2.5rem;height: auto;margin: .2rem 0;}

    /* menu */
    menu-cont {width: 100%;}
    menu-cont li a {font-size: .2rem;line-height: .7rem;padding: 0;border-radius: 0;}

    /*home*/
    .home-cont {padding: .2rem 0;display: block;}
    .home-info {width: 100%;margin: 0;}
    .home-login {padding: .3rem;}
    .home-login h5 {margin-bottom: .2rem;}
    .home-login-btn a {width: 2rem;margin: 0 .1rem;}
    .home-logout {padding: .3rem .2rem;}
    .home-logout em {width: 1rem;height: 1rem;}
    .home-logout h5 {padding: 0 .2rem;}
    .home-logout a {font-size: .5rem;padding: .1rem;}
    .home-notice h5 {padding: .2rem;}
    .home-notice ul {padding: 0 .2rem;}
    .home-notice ul li {margin-bottom: .3rem;}
    .home-notice ul li i {width: .2rem;height: .2rem;margin-right: .1rem;}
    .home-block {padding: .2rem 0;}
    .light {height: 3.5rem;}

    /* step */
    .step {display: block;border-radius: 0;}
    .step h3 {width: 3rem;height: .7rem;border-radius: 0 0 .5rem .5rem;margin: auto;}
    .step h3 br {display: none;}
    .step ul {padding: .3rem;}
    .step ul li {display: block;text-align: center;}
    .step ul li i {margin: 0;font-size: .4rem;}

    /* title */
    .title {padding: .5rem 0;}
    .title h3 {padding: 0 .3rem;font-size: .4rem;}
    .title em {width: 1rem;}
    .title span {font-size: .28rem;}

    /* list */
    .list {padding: .2rem 0;}
    .list li {width: 50%;padding: .1rem;}
    .list li a em {height: 2rem;}
    .list li a em cite {width: .7rem;height: .7rem;font-weight: .2rem;padding: 0 .1rem;}
    .list li a em x {margin: .1rem;padding: .1rem;opacity: 1;}
    .list li a aside {padding: .1rem;}
    .list li a aside h5 {padding: .1rem 0;}
    .list li a aside p {margin: .1rem 0;font-size: .18rem;}
    .list li a:hover {transform: translateY(0);}
    .list li a:hover em img {transform: scale(1);}
    .list li a:hover aside h5 {color: var(--333);}

    /* foot */
    .foot {margin-top: 1.2rem;}
    .foot-cont {display: block;padding: .6rem 0;}
    .foot-list {margin-bottom: .3rem;}
    .foot-list li h3 {margin: .2rem 0;padding: 0 .1rem;}
    .foot-list li a {padding: 0 .1rem;}
    .foot-sns a {margin: 0 .3rem;}
    .foot-sns a:hover {transform: scale(1);}
    .foot-sns em {width: 2rem;}
    .foot-sns em img {padding: .1rem;}
    .foot-sns span {padding: .1rem 0;}
    .foot-copy {padding: .2rem 0;}
    .foot-copy span {display: block;padding: .1rem 0;}
    .foot-copy a {padding: 0 .1rem;}

    /*im*/
    .im {margin: 0 .1rem;padding: .1rem 0;}
    .im a {font-size: .42rem;margin: .1rem;}
    
    /* crumb */
    crumb {padding: .2rem 0;}

    /*details*/
    .details-info {margin-bottom: .2rem;}
    .details-info h2 {padding: .3rem 0;font-size: .3rem;}
    .details-cont {display: block;}
    .details-img {width: 100%;}
    .details-img .gallery-top .swiper-slide {height: 4rem;}
    .details-img .gallery-thumb .swiper-slide {height: 1rem;}
    .details-bet {margin: 0 0 .2rem;}
    .details-bet li span {width: 1rem;}
    .details-bet-time {padding: .2rem;}
    .details-bet-time li {line-height: .6rem;}
    .details-bet-time li b {font-size: .32rem;}
    .details-bet-bet {padding: .1rem .2rem;}
    .details-bet-bet li {margin: .3rem 0;}
    .details-bet-bet li input {padding: 0 .3rem;font-size: .3rem;}
    .details-bet-info {padding: .2rem;}
    .details-bet-info li {padding: .1rem 0;}
    .details-bet reminder {padding: .2rem;margin: .1rem 0 0;}
    .details-data {display: none;}

    .details-describe {padding: .5rem 0;}
    .details-page {padding: .2rem 0;}
    
    /*login*/
    .login-cont {display: block;padding: 1rem 0;}
    .login-ad {display: none;}
    .login-block {width: 100%;padding: .2rem;}
    .login-title {margin: .2rem 0;}
    .login-title i {font-size: .45rem;margin: 0 .1rem 0 0;}
    .login-title h3 {font-size: .3rem;}
    .login-form {margin: .1rem 0;}
    .login-form .btn {margin: .2rem 0;}
    .login-other .btn {width: 2rem;}
    
    /* dataset */
    .dataset {display: block;margin-bottom: .2rem;padding: 0 .2rem;}
    .dataset li {padding: .3rem 0;}
    .dataset li:not(:last-child) {border-bottom-width: 1px;}
    .dataset li h4 {font-size: .28rem;padding: .2rem 0;}
    .dataset li a {width: 2rem;}

    /* page */
    page {padding: .5rem;}
    
    /* tab */
    .tab {display: flex;}
    .tab li {margin: .1rem;flex: 1;}
    .tab li a {height: .7rem;line-height: .7rem;font-size: .2rem;padding: 0;width: 100%;text-align: center;}
    
    /*user*/
    .user {display: block;}
    .user .title {padding: .3rem 0;}
    .user .title h3 {font-size: .3rem;}
    .contant .list li {width: 50%;}

    .sider {width: 100%;margin: 0;}
    .sider .title {padding: .2rem 0;}
    .sider .title h3 {font-size: .28rem;padding-left: .2rem;}
    .sider-nav {padding: .2rem;}
    .sider-nav li {margin: .1rem 0;}
    .sider-nav li a {padding: .1rem;}
    .sider-nav li a i {margin: 0 .2rem 0 0;}

    .user-info {margin-bottom: .2rem;}
    .user-info em {width: 1rem;height: 1rem;margin: .2rem;}
    .user-info-name h4 {margin-bottom: .1rem;}
    .user-info-other {display: block;padding: .1rem;}
    .user-info-other li {margin: .1rem;}
    .user-info-other li a {display: flex;align-items: center;border-radius: .1rem;padding: .2rem;}
    .user-info-other li a i {font-size: .36rem;margin: 0 .1rem 0 0;}

    .user-order-list li {padding: .3rem 0;}
    .user-order-list li em {width: 1.5rem;height: 1.5rem;border-radius: .1rem;}
    .user-order-info {flex: 1;padding: 0 .1rem;max-width: 50%;}
    .user-order-info h5 {font-size: .22rem;margin-bottom: .1rem;}
    .user-order-info span {margin: .1rem 0;font-size: .18rem;}
    .user-order-col {width: 1.5rem;}
    .user-order-col a {margin: .1rem 0;}
    .user-order-col .btn-empty {height: .6rem}

    /*classify*/
    .classify {padding: .1rem 0;}
    .classify li {margin: .05rem 0;}
    .classify li span {padding: 0 .3rem;margin-right: .3rem;}
    .classify li p {display: block;}
    .classify li a {float: left;padding: .05rem .15rem;margin: .05rem;}

    /*help*/
    .help-list {padding: .1rem;}
    .help-list a {padding: .15rem;}

    empty {padding: 1rem 0;}

    /* form */
    .form {padding-bottom: .3rem;}
}