* {box-sizing: border-box;margin: 0;padding: 0;}
html, body {max-width:100%;}
body {background:#e9ebee;}
a {text-decoration: none;}
.scrollbar-light::-webkit-scrollbar{width:8px;height:8px;}
.scrollbar-light::-webkit-scrollbar-track{background:transparent;border-radius: 10px;}
.scrollbar-light.border-radius::-webkit-scrollbar-track{margin: var(--bgc1-border-radius-1) 0;}
.scrollbar-light::-webkit-scrollbar-thumb{background:transparent;border-radius: 10px;}
.scrollbar-light:hover::-webkit-scrollbar-thumb{background:#ccc;}
.scrollbar-light::-webkit-scrollbar-thumb:hover{background:#aaa;}
.desktop-flex, .main-desktop-flex, .main-img-desktop-flex {display: flex;}
@media only screen and (max-width:1260px) {
    .main-img-desktop-flex {display: inherit;}
}
@media only screen and (max-width:700px) {
    .main-desktop-flex {display: inherit;}
}
@media only screen and (max-width:520px) {
    .scrollbar-light::-webkit-scrollbar{width:4px;height:4px;}
    .desktop-flex {display: inherit;}
    .mobile-flex {display: flex;}
}
.flex {display: flex;}
.flex-1 {flex: 1;}
.none {display: none;}
.b {font-weight: bold !important}
.i {font-style: italic !important}
.u {text-decoration: underline !important}
.b-n {font-weight: normal !important}
.i-n {font-style: normal !important}
.u-n {text-decoration: none !important}
.center {text-align: center !important}
.clear-both {clear: both;}
.min-height-300 {min-height: 300px;}
.min-height-500 {min-height: 500px;}
.cursor-text {cursor: text !important}
.link {
    color: #09f;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
}
.link:hover {
    color: #08d;
}
.loading {
    margin: 20px 0;
    font: 13px arial;
    color: #999;
    text-align: center;
}
.loading img {
    height: 40px;
}
.container {
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
}
.relative {position: relative;}
.margin-5 {margin: 5px !important}
.margin-top-10 {margin-top: 10px !important}
.margin-top-20 {margin-top: 20px !important}
.margin-top-30 {margin-top: 30px !important}
.margin-bottom-10 {margin-bottom: 10px !important}
.margin-bottom-20 {margin-bottom: 20px !important}
.padding-5 {padding: 5px !important}
.padding-10 {padding: 10px !important}
.width-10 {width: 10px !important}
.width-100 {width: 100px !important}
.pink {color: #f09 !important}
.font-12 {font-size: 12px !important}
.font-16 {font-size: 16px !important}
.font-30 {font-size: 30px !important}
.nowrap {white-space: nowrap !important}
.header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 44px;
    line-height: 0;
    background: #909;
    background: linear-gradient(45deg, rgba(0,102,255,0.9) 50%, rgba(255,0,255,0.9) 50%);
    box-shadow: 0 1px 3px #000;
    z-index: 99;
}
.header-height {
    height: 44px;
}
.header .logo img {
    padding: 4px;
    height: 44px;
}
.header .search {
    display: flex;
    align-items: center;
    margin-left: 20px;
    height: 44px;
}
.header .search-inner {
    display: flex;
    padding: 0 5px;
    align-items: center;
    background: #fff;
    width: 60px;
    height: 28px;
    border-radius: 14px;
    opacity: 0.7;
    cursor: pointer;
    user-select: none;
}
.header .search-inner:hover {
    opacity: 1;
}
.header .search-inner img {
    height: 16px;
}
.header .menu {
    display: flex;
    padding: 0 15px;
    align-items: center;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
    user-select: none;
}
.header .menu:hover {
    background: rgba(0,0,0,0.2);
}
.footer {
    padding: 10px 20px;
    color: #999;
    font: 12px arial;
    text-align: center;
}
.footer p {
    margin: 5px 0;
}
.footer a {
    color: #999;
}
.footer a:hover {
    text-decoration: underline;
}
.body {
    display: flex;
}
.nav {
    position: -webkit-sticky;
    position: sticky;
    top: 44px;
    padding: 20px 0;
    width: 350px;
    height: calc(100vh - 44px);
    overflow-x: hidden;
    overflow-y: scroll;
}
.nav-close {
    display: none;
    position: fixed;
    top: 10px;
    right: 10px;
    padding: 15px 0;
    width: 46px;
    height: 46px;
    background: #f6c;
    color: #fff;
    font-size: 16px;
    line-height: 1em;
    text-align: center;
    cursor: pointer;
    border-radius: 100%;
    user-select: none;
    z-index: 99;
}
.nav-max-width {
    margin: 0 auto;
    max-width: 400px;
}
.nav-select {
    display: flex;
    align-items: center;
    margin: 2px 5px;
    padding: 0 15px;
    height: 50px;
    color: #666;
    font: bold 15px arial;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
}
.nav-select:hover {
    background: rgba(0,0,0,0.07);
}
.nav-select-img {
    margin-right: 7px;
    min-width: 30px;
    min-height: 30px;
    max-width: 30px;
    max-height: 30px;
    border-radius: 4px;
    object-fit: cover;
}
.nav-select-icon-back {
    position: absolute;
    right: 20px;
    width: 14px;
    height: 14px;
}
.nav-title {
    padding: 10px 20px;
    color: #666;
    font: bold 15px arial;
}
.nav-desc {
    padding: 10px 20px;
    color: #999;
    font: 13px arial;
}
.nav-separate {
    margin: 15px 20px;
    border-top: 1px solid #bbb;
}
.nav-ads {
    margin: 5px;
    padding: 10px 15px;
    width: calc(100% - 10px);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
}
.nav-ads:hover {
    background: rgba(0,0,0,0.07);
}
.nav-ads:hover .nav-ads-desc {
    color: #666;
}
.nav-ads img {
    max-width: 100%;
    border-radius: 7px;
}
.nav-ads-title {
    color: #365899;
    font: bold 13px arial;
    overflow: hidden;
}
.nav-ads-desc {
    color: #999;
    font: 13px arial;
    overflow: hidden;
}
.main {
    flex: 1;
}
.main-inner {
    margin: 20px auto;
    padding: 20px;
    width: 100%;
    max-width: 1060px;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}
.main-ads {
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 150px;
}
.main-ads-banner {
    position: absolute;
    margin: 0 auto;
    top: 0;
    left: 0;
    width: 100%;
}
.main-ads .gallery-banner, .main-ads .gallery-banner img {
    margin: 0 auto;
    width: 760px;
    max-width: 100%;
    border-radius: 8px;
}
.main-title {
    margin: 0 5px 10px 5px;
    padding-bottom: 10px;
    color: #f09;
    font: 19px arial;
    border-bottom: 2px solid #f09;
}
.main-title-large {
    margin: 5px;
    color: #f09;
    font: bold 25px arial;
}
.main-title-sub {
    margin: 5px;
    color: #222;
    font: bold 19px arial;
}
.main-content {
    padding: 5px;
    color: #444;
    font: 13px arial;
}
.main-desc {
    padding: 5px;
    color: #999;
    font: 13px arial;
}
.main-avatar {
    margin: 0 auto;
    width: 200px;
    height: 200px;
    border: 4px solid #bbb;
    border-color: #f09 #f09 #06f #06f;
    border-radius: 10px;
    overflow: hidden;
}
.main-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover
}
.item {
    position: relative;
    float: left;
    padding: 5px;
    width: 16.6%;
    height: 290px;
    cursor: pointer;
    user-select: none;
}
.item:hover {
    background: #eee;
    border-radius: 8px;
}
.item:hover .item-container-desc {
    color: #666;
}
.item-container {
    position: relative;
    min-height: 100%;
    max-height: 100%;
    border-radius: 8px;
    overflow: hidden;
    transition-duration: 0.2s;
}
.item-container-img {
    margin-bottom: 3px;
    width: 100%;
    height: 220px;
    background: #ddd;
    border-radius: 8px;
    overflow: hidden;
}
.item-container-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}
.item-container-title {
    padding: 2px 5px;
    color: #f09;
    font: bold 13px/1.1em arial;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.item-container-desc {
    padding: 2px 5px;
    color: #999;
    font: 13px/1.1em arial;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.item-container-icon {
    height: 12px;
    vertical-align: -1px;
}
.item-price {
    position: absolute;
    top: 0;
    left: 0;
    padding: 2px 10px 2px 7px;
    background: rgba(244,0,100,0.7);
    color: #fff;
    font: bold 13px arial;
    border-radius: 0 0 8px 0;
    white-space: nowrap;
}
.item-provider {
    position: absolute;
    display: flex;
    align-items: center;
    bottom: 70px;
    left: 0;
    padding: 3px 7px 3px 5px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font: bold 11px arial;
    border-radius: 0 5px 5px 0;
    white-space: nowrap;
}
.item-provider img {
    margin-right: 5px;
    width: 25px;
    height: 25px;
    object-fit: cover;
}
.field {
    padding: 8px 10px;
    background: #fff;
    width: 100%;
    max-width: 100%;
    font: 13px arial;
    border: 1px solid #999;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    outline: none;
}
.form-table {
    border-collapse: collapse;
    width: 100%;
}
.form-table td {
    padding: 5px;
    font: 13px arial;
}
.form-table-label {
    width: 80px;
}
.btn {
    background: #f6c;
    color: #fff;
    border: none;
    text-align: center;
    white-space: nowrap;
}
.btn:hover {
    background: #f4a;
}
.btn[type=submit]:disabled {
    background: #bbb;
}
.form-addition-link {
    display: flex;
    align-items: center;
    margin-top: 20px;
}
.info-table {
    border-collapse: collapse;
    margin: 5px;
    width: calc(100% - 10px);
}
.info-table td {
    padding: 10px 0;
    font: 13px/16px arial;
    border-bottom: 1px solid #ddd;
}
.info-table .icon img {
    width: 14px;
    height: 14px;
}
.info-table .result {
    color: #f09;
    font: bold 14px/16px arial;
}
.main-icon {
    display: flex;
    margin: 15px 5px;
    cursor: pointer;
    user-select: none;
}
.main-icon-img {
    min-width: 50px;
    min-height: 50px;
    max-width: 50px;
    max-height: 50px;
    border: 1px solid;
    border-color: #eee #eee #eee #ddd;
    border-radius: 6px;
    overflow: hidden;
}
.main-icon-img img {
    width: 100%;
    height: 100%;
    object-fit: cover
}
.main-icon-desc {
    margin: 0 10px;
    color: #999;
    font: 20px arial;
}
.main-icon:hover .main-icon-img {
    border: 1px solid #f09;
}
.main-icon:hover .main-icon-desc {
    color: #f09;
}
.additem {
    float: left;
    margin: 1px;
    width: calc(20% - 2px);
    height: 150px;
    cursor: pointer;
    user-select: none;
}
.additem img {
    width: 100%;
    height: 130px;
    background: #ccc;
    object-fit: cover;
}
.additem-desc {
    color: #999;
    font: bold 12px arial;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.additem:hover .additem-desc {
    color: #f09;
}
.main-img-slider {
    position: relative;
    padding: 5px;
    width: 100%;
    height: 620px;
    overflow: hidden;
}
.gallery-top {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 500px;
    background: #eee;
    border-radius: 8px;
}
.gallery-top .swiper-slide {
    max-width: 100% !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.gallery-thumbs {
    position: absolute !important;
    top: 500px;
    width: 100%;
    height: 110px;
    box-sizing: border-box;
    padding: 10px 0;
}
.gallery-thumbs .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.4;
    object-fit: contain;
}
.gallery-thumbs .swiper-slide-active {
    opacity: 1;
}
.gallery-thumbs img {
    background: #eee;
    border-radius: 6px;
    cursor: pointer;
}
.main-data {
    display: flex;
    position: relative;
    margin: 5px;
    padding: 10px 0 5px 0;
    border-top: 1px solid #ddd;
    overflow: hidden;
}
.main-data-avatar {
    min-width: 50px;
    min-height: 50px;
    max-width: 50px;
    max-height: 50px;
    border: 1px solid;
    border-color: #eee #eee #eee #ddd;
    object-fit: cover;
}
.main-data-icon {
    position: absolute;
    top: 7px;
    right: 0;
    padding: 3px 0;
    background: #fff;
    width: 30px;
    text-align: center;
}
.main-data-icon img {
    height: 18px;
}
.main-data-body {
    flex: 1;
    padding: 3px 10px;
    width: 0;
}
.main-data-title {
    font: bold 14px arial;
    color: #f09;
    white-space: nowrap;
    overflow: hidden;
}
.main-data-title-tag {
    font: italic 12px arial;
    color: #06f;
}
.main-data-title:hover, .main-data-title:hover * {
    color: #f09;
    text-decoration: underline;
}
.main-data-content {
    margin-top: 2px;
    font: 12px arial;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
}
@media only screen and (max-width:1700px) {
    .nav {
        width: 320px;
    }
    .main-inner {
        max-width: 890px;
    }
    .item {
        width: 20%;
    }
    .additem {
        height: 130px;
    }
    .additem img {
        height: 110px;
    }
}
@media only screen and (max-width:1440px) {
    .nav {
        width: 280px;
    }
    .main-inner {
        max-width: 720px;
    }
    .item {
        width: 25%;
    }
    .additem {
        height: 110px;
    }
    .additem img {
        height: 90px;
    }
}
@media only screen and (min-width:1261px) {
    .header .logo {
        margin-left: 20px;
    }
    #nav {
        display: block !important;
    }
    #navMenu {
        display: none !important;
    }
}
@media only screen and (max-width:1260px) {
    #nav {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        z-index: 999;
    }
    #nav .nav-close {
        display: block;
    }
}
@media only screen and (min-width:961px) {
    #ads {
        display: block !important;
    }
    #adsMenu {
        display: none !important;
    }
}
@media only screen and (max-width:960px) {
    #ads {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        padding-top: 50px;
        width: 100%;
        height: 100%;
        background: #fff;
        z-index: 999;
    }
    #ads .nav-close {
        display: block;
    }
    .main-inner {
        max-width: 890px;
    }
    .item {
        width: 20%;
    }
    .additem {
        height: 130px;
    }
    .additem img {
        height: 110px;
    }
}
@media only screen and (max-width:860px) {
    .main-inner {
        max-width: 720px;
    }
    .item {
        width: 25%;
    }
    .additem {
        height: 110px;
    }
    .additem img {
        height: 90px;
    }
}
@media only screen and (max-width:700px) {
    .main-inner {
        max-width: 550px;
    }
    .main-ads {
        padding-top: 20%;
        height: auto;
    }
    .main-ads .gallery-banner, .main-ads .gallery-banner img {
        border-radius: 0;
    }
    .item {
        width: 33.3%;
    }
    .additem {
        height: 150px;
    }
    .additem img {
        height: 130px;
    }
}
@media only screen and (max-width:520px) {
    .main-inner {
        margin: 10px 0;
        padding: 10px 3px;
    }
    .main-title {
        margin-top: 5px;
    }
    .item {
        padding: 2px;
    }
    .item-provider {
        bottom: 73px;
    }
    .form-addition-link {
        margin: 0 0 0 20px;
    }
}
@media only screen and (max-width:480px) {
    .item {
        height: 265px;
    }
    .item-container-img {
        height: 200px;
    }
    .item-container-title, .item-container-desc {
        padding: 1px 0;
    }
    .item-provider {
        bottom: 68px;
    }
    .additem {
        height: 130px;
    }
    .additem img {
        height: 110px;
    }
}
@media only screen and (max-width:390px) {
    .item {
        height: 245px;
    }
    .item-container-img {
        height: 180px;
    }
    .item-price {
        font-size: 12px;
    }
    .item-provider {
        padding: 3px 5px 3px 3px;
        font: bold 10px arial;
    }
    .additem {
        height: 110px;
    }
    .additem img {
        height: 90px;
    }
}
@media only screen and (max-width:360px) {
    .item {
        height: 225px;
    }
    .item-container-img {
        height: 160px;
    }
    .additem {
        height: 110px;
    }
    .additem img {
        height: 90px;
    }
}
@media only screen and (max-width:320px) {
    .item {
        width: 50%;
        height: 265px;
    }
    .item-container-img {
        height: 200px;
    }
    .additem {
        height: 90px;
    }
    .additem img {
        height: 70px;
    }
}