@charset "utf-8";
.big-title-b { font-size: 30px; font-weight: 700; }
.big-title-n { font-size: 30px; font-weight: 400; }
.mid-title-b { font-size: 24px; font-weight: 700; }
.mid-title-n { font-size: 24px; font-weight: 400; }
.sm-title-b  { font-size: 18px; font-weight: 700; }
.sm-title-n  { font-size: 18px; font-weight: 400; }
.big-name-b { font-size: 18px; font-weight: 700; }
.big-name-n { font-size: 18px; font-weight: 400; }
.mid-name-b { font-size: 16px; font-weight: 700; }
.mid-name-n { font-size: 16px; font-weight: 400; }
.sm-name-b { font-size: 14px; font-weight: 700; }
.sm-name-n { font-size: 14px; font-weight: 400; }
.big-info-b { font-size: 15px; font-weight: 700; }
.big-info-n { font-size: 15px; font-weight: 400; }
.mid-info-b { font-size: 13px; font-weight: 700; }
.mid-info-n { font-size: 13px; font-weight: 400; }
.sm-info-b { font-size: 11px; font-weight: 700; }
.sm-info-n { font-size: 11px; font-weight: 400; }
.tag13-b { font-size: 13px; font-weight: 600; }
.tag13-n { font-size: 13px; font-weight: 400; }
.tag12-b { font-size: 12px; font-weight: 600; }
.tag12-n { font-size: 12px; font-weight: 400; }
@media(max-width: 768px) {
    .big-title-b { font-size: 24px; font-weight: 700; }
    .big-title-n { font-size: 24px; font-weight: 400; }
    .mid-title-b { font-size: 18px; font-weight: 700; }
    .mid-title-n { font-size: 18px; font-weight: 400; }
    .sm-title-b  { font-size: 14px; font-weight: 700; }
    .sm-title-n  { font-size: 14px; font-weight: 400; }
    .big-name-b { font-size: 16px; font-weight: 700; }
    .big-name-n { font-size: 16px; font-weight: 400; }
    .mid-name-b { font-size: 14px; font-weight: 700; }
    .mid-name-n { font-size: 14px; font-weight: 400; }
    .sm-name-b { font-size: 12px; font-weight: 700; }
    .sm-name-n { font-size: 12px; font-weight: 400; }
    .big-info-b { font-size: 13px; font-weight: 700; }
    .big-info-n { font-size: 13px; font-weight: 400; }
    .mid-info-b { font-size: 12px; font-weight: 700; }
    .mid-info-n { font-size: 12px; font-weight: 400; }
    .sm-info-b { font-size: 11px; font-weight: 700; }
    .sm-info-n { font-size: 11px; font-weight: 400; }
    .tag13-b { font-size: 12px; font-weight: 600; }
    .tag13-n { font-size: 12px; font-weight: 400; }
    .tag12-b { font-size: 11px; font-weight: 600; }
    .tag12-n { font-size: 11px; font-weight: 400; }
}

/* subpage title */
.sub-page-top { padding: 35px 0 25px 0; }
.sub-page-top > .sub-page-title > span:first-child { }
.sub-page-top > .sub-page-title > span + span { display: inline-block; margin-left: 10px; color: var(--colorgray); }
@media(max-width: 768px) {
    .sub-page-top { padding: 25px 0 15px 10px; }
    .sub-page-top > .sub-page-title > span:first-child { }
    .sub-page-top > .sub-page-title > span + span { display: inline-block; margin-left: 10px; color: var(--colorgray); }
}

/* sub page */
.page-top-wrap { position: relative; margin: 35px 0 35px 0; }
.page-top-wrap > ul { position: relative; display: flex; }
.page-top-wrap > ul > li { }
.page-top-wrap > ul > li:not(:last-child) { margin-right: 8px; }
.page-top-wrap > ul > li > a { position: relative; display: block; min-width: 130px; height: 46px; line-height: 46px; white-space: nowrap; text-align: center; background-color: #fafafa; border: 1px solid #fafafa; }
.page-top-wrap > ul > li > a:not(.on):hover { background-color: #fff; border-color: var(--accent); color: var(--accent); }
.page-top-wrap > ul > li > a.on { background-color: var(--accent); border-color: var(--accent); color: #fff; }
@media (max-width: 768px) {
    .page-top-wrap { margin: 10px 0 25px 0; padding: 0 10px; overflow-x: auto; }
    .page-top-wrap > ul { }
    .page-top-wrap > ul > li { }
    .page-top-wrap > ul > li:not(:last-child) { margin-right: 8px; }
    .page-top-wrap > ul > li > a { width: auto; padding: 0 15px; height: 40px; line-height: 40px; font-size: 13px; }
    .page-top-wrap > ul > li > a:not(.on):hover { }
    .page-top-wrap > ul > li > a.on { }
}

/* mshop list basic */
#list-container-wrap.list-type-basic { }
#list-container-wrap.list-type-basic .list-container-top { position: relative; margin: 25px 0; z-index: 2; }
#list-container-wrap.list-type-basic .list-filter-sort { position: relative; display: flex; }
#list-container-wrap.list-type-basic .list-filter-sort > .total-count { align-self: center; }
#list-container-wrap.list-type-basic .list-filter-sort > .total-count > span { }
#list-container-wrap.list-type-basic .list-filter-sort > .total-count > span b { display: inline-block; color: var(--fontaccent); font-weight: 700; margin-left: 3px; }
#list-container-wrap.list-type-basic .list-filter-sort > .list-style-icon { margin-left: auto; align-self: flex-end; padding-bottom: 2px; }
#list-container-wrap.list-type-basic .list-filter-sort > .list-style-icon > button { display: inline-block; width: 18px; height: 18px; }
#list-container-wrap.list-type-basic .list-filter-sort > .list-style-icon > button + button { margin-left: 1px; }
#list-container-wrap.list-type-basic .list-filter-sort > .list-style-icon > button svg { }
#list-container-wrap.list-type-basic .list-filter-sort > .list-style-icon > button svg rect { fill: var(--lightgray); }
#list-container-wrap.list-type-basic .list-filter-sort > .list-style-icon > button.on svg rect { fill: var(--colorgray); }
#list-container-wrap.list-type-basic .list-filter-sort > .list-style-icon + .sort-item-row { margin-left: 10px !important; }
#list-container-wrap.list-type-basic .list-filter-sort > .sort-item-row { margin-left: auto; flex: 0 0 150px; position: relative; height: 32px; }
#list-container-wrap.list-type-basic .list-filter-sort > .sort-item-row > ul { position: absolute; width: 120px; height: 32px; top: 0px; left: 0; overflow: hidden; background-color: #fff; border: 1px solid #f0f0f0; border-right: none; border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
#list-container-wrap.list-type-basic .list-filter-sort > .sort-item-row > ul.open { overflow: visible; height: auto; right: 0; width: 100%; border-right: 1px solid #f0f0f0; border-radius: 12px; }
#list-container-wrap.list-type-basic .list-filter-sort > .sort-item-row > ul > li { display: none; padding: 0 55px 0 15px; font-size: 14px; width: 100%; cursor: pointer; height: 32px; line-height: 30px; white-space: nowrap; }
#list-container-wrap.list-type-basic .list-filter-sort > .sort-item-row > ul > li.active { display: block; }
#list-container-wrap.list-type-basic .list-filter-sort > .sort-item-row .btn-arrow-down { position: absolute; display: flex; justify-content: center; align-items: center; top: 0px; right: 0; bottom: 0; background-color: transparent; background-color: #fff; width: 30px; height: 32px; padding: 0; border-top-right-radius: 12px; border-bottom-right-radius: 12px; line-height: 30px; border: 1px solid #f0f0f0; border-left: none; }
#list-container-wrap.list-type-basic .list-filter-sort > .sort-item-row > ul.open + .btn-arrow-down { border-bottom: none; border-left: none; border-bottom-right-radius: 0; }
@media(max-width: 768px) {
    #list-container-wrap.list-type-basic { }
    #list-container-wrap.list-type-basic .list-container-top { position: relative; margin: 15px 0; z-index: 2; }
    #list-container-wrap.list-type-basic .list-filter-sort { padding: 0 10px; }
    #list-container-wrap.list-type-basic .list-filter-sort > .total-count { }
    #list-container-wrap.list-type-basic .list-filter-sort > .total-count > span { }
    #list-container-wrap.list-type-basic .list-filter-sort > .total-count > span b { }
    #list-container-wrap.list-type-basic .list-filter-sort > .list-style-icon { }
    #list-container-wrap.list-type-basic .list-filter-sort > .list-style-icon > button { }
    #list-container-wrap.list-type-basic .list-filter-sort > .list-style-icon > button + button { }
    #list-container-wrap.list-type-basic .list-filter-sort > .list-style-icon > button svg { }
    #list-container-wrap.list-type-basic .list-filter-sort > .list-style-icon > button svg rect { }
    #list-container-wrap.list-type-basic .list-filter-sort > .list-style-icon > button.on svg rect { }
    #list-container-wrap.list-type-basic .list-filter-sort > .list-style-icon + .sort-item-row { margin-left: 5px !important; }
    #list-container-wrap.list-type-basic .list-filter-sort > .sort-item-row { flex: 0 0 120px; }
    #list-container-wrap.list-type-basic .list-filter-sort > .sort-item-row > ul { width: 90px; }
    #list-container-wrap.list-type-basic .list-filter-sort > .sort-item-row > ul.open { }
    #list-container-wrap.list-type-basic .list-filter-sort > .sort-item-row > ul > li { }
    #list-container-wrap.list-type-basic .list-filter-sort > .sort-item-row > ul > li.active { }
    #list-container-wrap.list-type-basic .list-filter-sort > .sort-item-row .btn-arrow-down { }
    #list-container-wrap.list-type-basic .list-filter-sort > .sort-item-row > ul.open + .btn-arrow-down { }
}

/* item-list basic*/
#item-list-wrapper { width: 100%; min-height: 460px; }
.search-item-list { position: relative; width: 100%; max-width: 100%; display: flex; flex-wrap: wrap; margin: 0; }
.search-item-list.swiper-wrapper { flex-wrap: nowrap; }
.search-item-list > .item-list { position: relative; padding: 0 8px; margin-bottom: 15px; }
.search-item-list.swiper-wrapper > .item-list { }
.item-list > .goods-box { position: relative; display: block; padding: 10px 20px 15px 20px; background-color: #fff; border-radius: 16px; border: 1px solid var(--boxbrbase); }
.item-list > .goods-box .list-image { margin-top: 15px; padding-bottom: 15px; border-bottom: 1px solid var(--boxbrbase); }
.item-list > .goods-box .list-image > a { display: inline-block; padding: 15px; }
.item-list > .goods-box .list-image > a img { width: 100%; height: auto; }
.item-list > .goods-box .list-image > .list-tags { height: 21px; display: flex; justify-content: center; }
.item-list > .goods-box .list-image > .list-tags > .tag { color: var(--colorpeach); position: relative; }
.item-list > .goods-box .list-image > .list-tags > .tag:before { content: '#'; }
.item-list > .goods-box .list-image > .list-tags > .tag:not(:first-child) { margin-left: 5px; }
.item-list > .goods-box .list-image > .list-name { text-align: center; }
.item-list > .goods-box .item-color { margin: 10px auto 5px auto; display: flex; }
.item-list > .goods-box .item-color .color-bg { width: 12px; height: 12px; display: inline-block; border-radius: 50%; margin-right: 5px; }
.item-list > .goods-box .item-color .color-bg:last-child { margin-right: 0; }
.item-list > .goods-box > .list-item { position: relative; padding: 5px 0 10px 0; }
.item-list > .goods-box > .list-item > .list-price { margin-top: 3px; padding: 0 5px; }
.item-list > .goods-box > .list-item > .list-price > li { display: flex; line-height: 21px; }
.item-list > .goods-box > .list-item > .list-price > li > span { }
.item-list > .goods-box > .list-item > .list-price > li > span + span { margin-left: auto; }
.item-list > .goods-box > .list-item > .price { text-align: right; line-height: 38px; }
.item-list > .goods-box > .list-btn { display: flex; justify-content: center; }
.item-list > .goods-box > .list-btn > .btn-wrap { max-width: 110px; }
.item-list > .goods-box > .list-btn > .btn-wrap + .btn-wrap { margin-left: 8px; }
.item-list > .goods-box > .list-btn > .btn-wrap > .btn { font-size: 14px; border-radius: 6px; font-weight: 600; }
.item-list > .goods-box > .item-icon-wrap { top: 15px; left: 15px; }
.search-item-list.album { }
.search-item-list.album > .item-list { }
.search-item-list.album > .item-list > .box-rows { display: none !important; }
.search-item-list.rows > .item-list > .box-album { display: none !important; }
.search-item-list.rows { margin: 0; padding: 0; }
.search-item-list.rows > .item-list { flex: 0 0 50%!important; max-width: 50%!important; position: relative; padding: 0 8px; margin-bottom: 15px; }
.search-item-list.rows > .item-list > .goods-box { display: flex; flex-wrap: wrap; }
.search-item-list.rows > .item-list > .goods-box > .list-image { flex: 1 1 40%; max-width: 40%; }
.search-item-list.rows > .item-list > .goods-box > .list-item { flex: 1 1 60%; max-width: 60%; align-self: center; padding-left: 15px; }
.search-item-list.rows > .item-list > .goods-box > .list-btn { flex: 1 1 100%; justify-content: flex-end; }
.search-item-list.rows > .item-list > .goods-box > .list-image { border-bottom: none; }
.search-item-list.rows > .item-list > .goods-box > .list-image > a { }
.search-item-list.rows > .item-list > .goods-box > .list-image > .item-color { margin: 0; justify-content: center; }
.search-item-list.rows > .item-list > .goods-box > .list-item > .list-tags { height: 21px; display: flex; justify-content: flex-start; }
.search-item-list.rows > .item-list > .goods-box > .list-item > .list-tags > .tag { color: var(--colorpeach); position: relative; }
.search-item-list.rows > .item-list > .goods-box > .list-item > .list-tags > .tag:before { content: '#'; }
.search-item-list.rows > .item-list > .goods-box > .list-item > .list-tags > .tag:not(:first-child) { margin-left: 5px; }
.search-item-list.rows > .item-list > .goods-box > .list-item > .list-name { margin-bottom: 12px; }
@media (max-width: 768px) {
    .search-item-list { position: relative; width: 100%; display: flex; flex-wrap: wrap; margin: 0; padding: 0 3px; }
    .search-item-list.swiper-wrapper { flex-wrap: nowrap; }
    .search-item-list .item-list { position: relative; padding: 0 4px; margin-bottom: 15px; }
    .search-item-list.swiper-wrapper > .item-list { padding: 0 5px; }
    .item-list > .goods-box { position: relative; display: block; padding: 10px 5px 15px 5px; background-color: #fff; border-radius: 16px; border: 1px solid var(--boxbrbase); }
    .item-list > .goods-box .list-image { margin-top: 15px; padding-bottom: 15px; border-bottom: 1px solid var(--boxbrbase); }
    .item-list > .goods-box .list-image > a { display: inline-block; padding: 15px; }
    .item-list > .goods-box .list-image > a img { width: 100%; height: auto; }
    .item-list > .goods-box .list-image > .list-tags { height: 21px; display: flex; justify-content: center; }
    .item-list > .goods-box .list-image > .list-tags > .tag { color: var(--colorpeach); position: relative; }
    .item-list > .goods-box .list-image > .list-tags > .tag:before { content: '#'; }
    .item-list > .goods-box .list-image > .list-tags > .tag:not(:first-child) { margin-left: 5px; }
    .item-list > .goods-box .list-image > .list-name { text-align: center; }
    .item-list > .goods-box .item-color { margin: 10px auto 5px auto; display: flex; }
    .item-list > .goods-box .item-color .color-bg { width: 12px; height: 12px; display: inline-block; border-radius: 50%; margin-right: 5px; }
    .item-list > .goods-box .item-color .color-bg:last-child { margin-right: 0; }
    .item-list > .goods-box > .list-item { position: relative; padding: 5px 0 10px 0; }
    .item-list > .goods-box > .list-item > .list-price { margin-top: 3px; padding: 0 5px; }
    .item-list > .goods-box > .list-item > .list-price > li { display: flex; line-height: 21px; }
    .item-list > .goods-box > .list-item > .list-price > li > span { }
    .item-list > .goods-box > .list-item > .list-price > li > span + span { margin-left: auto; }
    .item-list > .goods-box > .list-item > .price { text-align: right; line-height: 38px; }
    .item-list > .goods-box > .list-btn { display: flex; justify-content: center; }
    .item-list > .goods-box > .list-btn > .btn-wrap { max-width: 110px; }
    .item-list > .goods-box > .list-btn > .btn-wrap + .btn-wrap { margin-left: 5px; }
    .item-list > .goods-box > .list-btn > .btn-wrap > .btn { font-size: 12px; border-radius: 6px; font-weight: 600; }
    .item-list > .goods-box > .item-icon-wrap { top: 15px; left: 15px; }
    /* item-rows */
    .search-item-list.rows { margin: 0; padding: 0; }
    .search-item-list.rows > .item-list { flex: 0 0 100%!important; max-width: 100%!important; position: relative; padding: 0; margin: 0; }
    .search-item-list.rows > .item-list:first-child { border-top: 1px solid #131313; }
    .search-item-list.rows > .item-list > .goods-box { display: flex; flex-wrap: wrap; border-radius: 0; border: 1px solid transparent; border-bottom: 1px solid var(--boxbrbase); padding: 25px 10px 25px 10px; }
    .search-item-list.rows > .item-list > .goods-box > .list-image { flex: 1 1 40%; max-width: 40%; }
    .search-item-list.rows > .item-list > .goods-box > .list-item { flex: 1 1 60%; max-width: 60%; align-self: center; padding-left: 15px; }
    .search-item-list.rows > .item-list > .goods-box > .list-btn { flex: 1 1 100%; justify-content: flex-end; }
    .search-item-list.rows > .item-list > .goods-box > .list-image { border-bottom: none; margin-top: 0; padding: 0; }
    .search-item-list.rows > .item-list > .goods-box > .list-image > a { padding: 10px; }
    .search-item-list.rows > .item-list > .goods-box > .list-image > .item-color { margin: 0; justify-content: center; }
    .search-item-list.rows > .item-list > .goods-box > .list-item > .list-tags { height: auto; display: flex; justify-content: flex-start; }
    .search-item-list.rows > .item-list > .goods-box > .list-item > .list-tags > .tag { color: var(--colorpeach); position: relative; }
    .search-item-list.rows > .item-list > .goods-box > .list-item > .list-tags > .tag:before { content: '#'; }
    .search-item-list.rows > .item-list > .goods-box > .list-item > .list-tags > .tag:not(:first-child) { margin-left: 5px; }
    .search-item-list.rows > .item-list > .goods-box > .list-item > .list-name { margin-bottom: 12px; }
    .search-item-list.rows > .item-list > .goods-box > .list-item > .list-price { }
    .search-item-list.rows > .item-list > .goods-box > .list-item > .list-price > li { display: flex; line-height: 18px; }
    .search-item-list.rows > .item-list > .goods-box > .list-item > .list-price > li > span { }
    .search-item-list.rows > .item-list > .goods-box > .list-item > .list-price > li > span + span { }
    .search-item-list.rows > .item-list > .goods-box > .item-icon-wrap { top: unset; left: 10px; bottom: 30px; }
    #item-list-more { display: none; width: auto; text-align: center; margin: 25px 7px 35px 7px; border: 1px solid #ddd; line-height: 45px; border-radius: 8px; }
}


/* --------------------------- */
.inner-form-wrap { position: relative; width: 100%; max-width: 560px; margin: 25px auto; padding: 35px; border: 3px solid #5083f2; border-radius: 16px; }
.inner-form-wrap > .form-title { position: absolute; top: -30px; left: calc( 50% - 30px ); width: 60px; height: 60px; background-color: #5083f2; text-align: center; color: #fff; font-weight: 600; border-radius: 50%; z-index: 2; line-height: 1; display: inline-flex; align-self: center; align-items: center; justify-content: center; }
.inner-form-wrap > .form-header { position: relative; margin: 12px 0; }
.inner-form-wrap > .form-header > h2 { }
.inner-form-wrap > .form-header > p { font-size: 15px; margin: 8px 0; letter-spacing: -1px; font-weight: 500; }
.inner-form-wrap > .form-header > span { font-size: 13px; letter-spacing: -1px; margin-top: 3px; }
.inner-form-wrap > .form-header > .check-custom { position: relative; margin: 12px; 0; display: flex; justify-content: center; }
.inner-form-wrap > .form-header > .check-custom > .check-privacy { }
.inner-form-wrap > .form-header > .check-custom > label { align-self: center; margin-left: 3px; cursor: pointer; }
.inner-form-wrap > .form-header > .check-custom > a { display: inline-block; margin-left: 5px; font-size: 12px; color: #5083f2; align-self: center; }
.inner-form-wrap > .form-body { margin: 35px 0 25px 0; padding: 0 50px; }
.inner-form-wrap > .form-body > dl { display: flex; margin-bottom: .5rem; }
.inner-form-wrap > .form-body > dl:last-child { margin-bottom: 0; }
.inner-form-wrap > .form-body > dl > dt { flex: 0 0 120px; max-width: 120px; font-weight: 500; text-align: left; }
.inner-form-wrap > .form-body > dl > dd { flex: 1 1 auto; max-width: calc( 100% - 120px ); text-align: left; }
.inner-form-wrap > .form-body > dl > dd > .form-input { width: 100%; padding: .5rem .75rem; border: 1px solid #ccc; }
.inner-form-wrap > .form-body > dl > dd > .form-select { width: 100%; padding: .5rem .75rem; border: 1px solid #ccc; }
.inner-form-wrap > .form-body > dl > dd > .form-input:focus,
.inner-form-wrap > .form-body > dl > dd > .form-select:focus { border: 1px solid #5083f2; }
.inner-form-wrap > .form-button { padding: 0 50px; }
.inner-form-wrap > .form-button > button { width: 100%; background-color: #5083f2; color: #fff; text-align: center; padding: .5rem 0; border-radius: 25px; font-size: 16px; font-weight: 600; }

/* article */
.article-list-wrapper { margin-top: 25px; }
.article-desc1 { position: relative; display: block; border-bottom: 1px solid #ededed; }
.article-desc1.article-desc-list { padding: 15px; border: 1px solid #ededed; border-radius: 8px; }
.article-desc1.article-desc-list ~ .article-desc-list { margin-top: 12px; }
.article-desc1.article-desc-table { padding: 15px 0 0 0; }
.article-desc1 > .article-list { display: flex; }
.article-desc1 > .article-list > .article-image { flex: 0 0 100px; max-width: 100px; padding: 0 10px; }
.article-desc1 > .article-list > .article-image img { width: 100%; height: auto; }
.article-desc1 > .article-list > .article-subject { align-self: center; flex: 1 1 auto; max-width: calc( 100% - 260px ); padding: 0 15px; }
.article-desc1 > .article-list > .article-subject > .star { }
.article-desc1 > .article-list > .article-subject > .star .star_div:not(:first-child) { margin-left: 3px; }
.article-desc1 > .article-list > .article-subject > .star .star_wrap .star_div:before,
.article-desc1 > .article-list > .article-subject > .star .star_wrap .star_div:after { font-size: 16px; }
.article-desc1 > .article-list > .article-subject > p { padding: 10px 0 15px 0; }
.article-desc1 > .article-list > .article-subject > span { color: var(--colorgray); white-space: nowrap; font-size: 14px; }
.article-desc1 > .article-list > .article-subject > span + span { margin-left: 10px; }
.article-desc1 > .article-list > .article-name { flex: 0 0 60px; max-width: 60px; align-self: center; text-align: center; color: var(--colorgray); }
.article-desc1 > .article-list > .article-date { flex: 0 0 100px; max-width: 100px; align-self: center; text-align: center; color: var(--colorgray); }
.article-desc1 > .article-list > .article-btn { align-self: center; margin-left: auto; }
.article-desc1 > .article-content { padding: 8px 15px 12px 70px; }
.article-desc1 > .article-content > .desc-content { padding: 25px; background-color: var(--boxbrbase); }
.article-desc1 > .article-content img { width: auto; max-width: 100%; height: auto; }
.article-desc1 > .article-flex { position: relative; display: flex; }
.article-desc1 > .article-flex.article-header { background-color: #fafafa;  border-top: 2px solid #131313; border-bottom: 1px solid #ededed; }
.article-desc1 > .article-flex > div { display: inline-block; padding: .75rem .75rem; text-align: center; font-size: 15px; align-self: center; }
.article-desc1 > .article-flex > div.num { flex: 0 0 60px; max-width: 60px; }
.article-desc1 > .article-flex > div.state { flex: 0 0 120px; max-width: 120px; }
.article-desc1 > .article-flex > div.subject { flex: 1 1 auto; }
.article-desc1 > .article-flex > div.name { flex: 0 0 100px; max-width: 100px; }
.article-desc1 > .article-flex > div.date { flex: 0 0 100px; max-width: 100px; }
.article-desc1 > .article-body > div.subject { text-align: left; cursor: pointer; }
.article-desc1 > .article-body > div.subject > span { position: relative; }
.article-desc1 > .article-body > div.subject > span:after { position: absolute; content: '\f023'; font-family: 'FontAwesome'; font-size: 14px; right: -15px; top: 50%; transform: translateY(-50%); color: var(--darkgray); }
.article-desc1 > .article-body > div.state > span { display: block; padding: .375rem .75rem; background-color: var(--accent); border: 1px solid var(--accent); color: #fff; text-align: center; }
.article-desc1 > .article-body > div.state.ready > span { background-color: #fff; border: 1px solid var(--darkgray); color: #131313; }
.article-list-wrapper ~ .article-btn { margin: 25px 0; }
.article-desc1 > .article-body ~ .article-body { border-top: 1px solid #ededed; }
.article-btn { display: flex; justify-content: flex-end; }
.article-btn .btn_write { display: inline-block; padding: 8px 12px; border: 1px solid var(--accent); color: #fff; background-color: var(--accent); border-radius: 6px; min-width: 120px; text-align: center; }
@media(max-width: 768px) {
    .article-desc1 { }
    .article-desc1 > .article-list { }
    .article-desc1 > .article-list > .article-image { flex: 0 0 70px; max-width: 70px; padding: 0 10px; }
    .article-desc1 > .article-list > .article-image img { width: 100%; height: auto; }
    .article-desc1 > .article-list > .article-subject { align-self: center; flex: 1 1 auto; max-width: calc( 100% - 200px ); padding: 0 10px; }
    .article-desc1 > .article-list > .article-subject > .star { }
    .article-desc1 > .article-list > .article-subject > .star .star_div:not(:first-child) { margin-left: 3px; }
    .article-desc1 > .article-list > .article-subject > .star .star_wrap .star_div:before,
    .article-desc1 > .article-list > .article-subject > .star .star_wrap .star_div:after { font-size: 14px; }
    .article-desc1 > .article-list > .article-subject > p { padding: 10px 0 15px 0; }
    .article-desc1 > .article-list > .article-subject > span { color: #b4b4b4; }
    .article-desc1 > .article-list > .article-name { flex: 0 0 50px; max-width: 50px; }
    .article-desc1 > .article-list > .article-date { flex: 0 0 80px; max-width: 80px; }
    .article-desc1 > .article-list > .article-btn { align-self: flex-end; }
    .article-desc1 > .article-content { padding: 8px 15px 12px 46px; font-size: 12px; }
    .article-desc1 > .article-flex > div { display: inline-block; padding: .75rem .375rem; text-align: center; font-size: 12px; align-self: center; }
    .article-desc1 > .article-flex > div.num { flex: 0 0 40px; max-width: 40px; }
    .article-desc1 > .article-flex > div.state { flex: 0 0 70px; max-width: 70px; }
    .article-desc1 > .article-flex > div.subject { flex: 1 1 auto; }
    .article-desc1 > .article-flex > div.name { flex: 0 0 70px; max-width: 70px; }
    .article-desc1 > .article-flex > div.date { display: none; }
    .article-desc1 > .article-body > div.subject { text-align: left; cursor: pointer; }
    .article-desc1 > .article-body > div.subject > span { position: relative; }
    .article-desc1 > .article-body > div.state > span { padding: .375rem 0; white-space: nowrap; }
    .article-desc1 > .article-body > div.state.ready > span { }
    .article-btn .btn_write { border-radius: 6px; min-width: 90px; font-size: 14px; margin-right: 10px; }
}

/* gift */
.item-list-header { position: relative; display: flex; padding: 12px 0 12px 0; margin: 10px 0 15px 0; border-bottom: 1px solid var(--base); }
.item-list-header .item-count { font-size: 20px; padding-left: 5px; }
.item-list-header .item-count > b { font-weight: 600; color: var(--accent); }
.item-list-header .item-sort-filter { position: relative; width: auto; min-width: 100px; margin-left: auto; }
.item-list-header .item-sort-filter .item-sort-box { position: relative; width: 100%; z-index: 10; }
.item-list-header .item-sort-filter .item-sort-box > ul { position: absolute; width: 100%; height: 32px; top: 0px; right: 30px; overflow: hidden; background-color: #fff; padding-bottom: 5px; border: 1px solid #f0f0f0; border-right: none; border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
.item-list-header .item-sort-filter .item-sort-box > ul.open { overflow: visible; height: auto; right: 0; width: calc( 100% + 30px ); border-right: 1px solid #f0f0f0; border-radius: 12px; }
.item-list-header .item-sort-filter .item-sort-box > ul > li { display: none; padding: 0 55px 0 15px; font-size: 14px; width: 100%; cursor: pointer; height: 32px; line-height: 30px; white-space: nowrap; }
.item-list-header .item-sort-filter .item-sort-box > ul > li.on { display: block; }
.item-list-header .item-sort-filter .item-sort-box .btn-arrow-down { position: absolute; display: flex; justify-content: center; align-items: center; top: 0px; right: 0; bottom: 0; background-color: transparent; background-color: #fff; width: 30px; height: 30px; padding: 0; border-top-right-radius: 12px; border-bottom-right-radius: 12px; line-height: 30px; border: 1px solid #f0f0f0; border-left: none; }
.item-list-header .item-sort-filter .item-sort-box > ul.open + .btn-arrow-down { border-bottom: 1px solid transparent; border-left: 1px solid transparent; border-bottom-right-radius: 0; }
.search-gift-list { }
.search-gift-list > .item-list { }
.search-gift-list > .item-list > .goods-box { padding: 0; }
.search-gift-list > .item-list > .goods-box > .list-image { margin: 0; }
.search-gift-list > .item-list > .goods-box > .list-item { padding: 12px 10px 15px; }
.search-gift-list > .item-list > .goods-box > .list-item > .list-name { line-height: 1.2; height: 52px; overflow: hidden; text-overflow: ellipsis; }
.search-gift-list > .item-list > .goods-box > .list-item > .list-price { text-align: center; }
.search-gift-list > .item-list > .goods-box > .list-item > .list-price > p {  display: flex; justify-content: center; color: var(--darkgray); }
.search-gift-list > .item-list > .goods-box > .list-item > .list-price > p.sp { color: var(--fontaccent); }
.search-gift-list > .item-list > .goods-box > .list-item > .list-price > p.sp > small { display: inline-block; align-self: center; margin-left: 1px; }

.goods-view-wrap { position: relative; width: 100%; display: flex; }
.goods-view-wrap > .goods-image-wrap { position: relative; flex: 1 1 40%; max-width: 40%; }
.goods-view-wrap > .goods-info-wrap  { position: relative; flex: 1 1 50%; max-width: 50%; margin-left: auto; }