.section-wrap {padding-left: 0 !important;padding-right: 0 !important;}
.section-wrap > div {padding-left: var(--layout-padding);padding-right: var(--layout-padding);}

.page-title {margin-bottom: 50px;}



.poster-list__category {position: relative; margin-bottom: 50px;}
.poster-list__category-wrap {padding-right: 50px;}
.poster-list__category-wrap::after {content: "";display: block;width: 50px;height: 100%;;}
.poster-list__category-wrap > ul {display: flex;}
.poster-list__category-wrap > ul > li {width: max-content;line-height: 45px;padding: 0 32px;margin-right: 10px; border-radius: 7px; background: #eee;font-size: 18px; cursor: pointer; transition: .4s;}
.poster-list__category-wrap > ul > li.active {background: var(--color-sub-01);font-weight: 500;color: var(--color-primary);}
.poster-list__category-wrap > ul > li > a {display: block;padding: 0 32px;}


.poster-list__category .swiper-nav {display: flex;align-items: center;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%; padding-left: var(--layout-padding); padding-right: var(--layout-padding);height: 0;z-index: 1;}
.poster-list__category .swiper-nav > span {display: block; position: relative;width: 52px; line-height: 50px; border-radius: 50%; background: #fff ; border: 1px solid #fff; box-shadow: 0 0 4px rgba(0, 0, 0, 0.149); text-align: center;cursor: pointer;transition: .4s;}
.poster-list__category .swiper-nav > span:after {content: "";position: absolute;top: 50%;left: 0;transform: translateY(-50%);width: calc(100% + 2px);height: 50px;background: linear-gradient(90deg,rgba(255, 255, 255, 1) 0%, rgb(255, 255, 255, 0) 50%);z-index: -1;}
.poster-list__category .swiper-nav > span.prev:after {left: -1px;}
.poster-list__category .swiper-nav > span.next:after {background: linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255, 1) 50%);}
.poster-list__category .swiper-nav > span.next {margin-left: auto;}
.poster-list__category .swiper-nav > span.swiper-button-disabled {display: none;}
.poster-list__category .swiper-nav > span > svg {width: 24px;transform: translateY(-1px);;vertical-align: middle;transition: .4s;}
.poster-list__category .swiper-nav > span.prev > svg {margin-left: -1px;}
.poster-list__category .swiper-nav > span.next > svg {margin-left: 1px;}



/* list */
.poster-list__content {}
.poster-list__content-notice {max-width: max-content;margin: 0 auto 30px;padding: 12px 30px;border-radius: 7px;background: #ffbbbb; text-align: center;font-size: 16px;font-weight: 500;color: #000;}
.poster-list__content-list {display: grid;grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: flex-start; gap: 24px;}
.poster__item {position: relative; height: 100%;border-radius: 7px; box-shadow: 0 0 5px rgba(0, 0, 0, .25);overflow: hidden;}
.poster__item > a {display: block; height: 100%;}
.poster__item-thumb {position: relative;font-size: 0; height: 100%;}
.poster__item-thumb::after {content: "";display: block; position: absolute;bottom: 0;left: 0;width: 100%;height: 130px;background: linear-gradient(0deg,rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, 0) 100%);}
.poster__item-thumb > img {width: 100%;height: 100%;object-fit: cover;transition: .4s; }
.poster__item-name {position: absolute;top: 10px;left: 10px;width: max-content;padding: 5px 8px;border-radius: 5px;background: #E8F3FF;color: var(--color-primary);font-size: 13px;font-weight: 700;text-align: center;}
.poster__item-desc {position: absolute;bottom: 18px;left: 0;width: 100%; padding: 0 18px;}
.poster__item-desc-type {display: none;font-size: 34px;font-weight: 700;text-shadow: 0 0 3px rgba(0,0,0,.3);color: #fff;word-break: break-all;}
.poster__item-desc-design {display: flex;flex-flow: row wrap;gap: 3px;padding-top: 8px;}
.poster__item-desc-design > span {display: flex;align-items: center;justify-content: center;width: 25px;height: 25px; border-radius: 50%;border: 1px solid var(--color-border);background: #fff;text-align: center;font-size: 0;transition: .4s; cursor: pointer;;}
.poster__item-desc-design > span.select {border-color: var(--color-primary);box-shadow: 0 0 0 1px inset var(--color-primary);}
.poster__item-desc-design > span.preview {}
.poster__item-desc-design > span.preview > svg {width: 17px;color: #5b5b5b;}
.poster__item-desc-design > span.color {}

.poster__item--upload {display: flex;flex-direction: column;align-items: center;justify-content: center;height: var(--uploadCard-height, 100%);padding: 0 16px; border: 1px solid var(--color-border);background: #f4f4f4;cursor: pointer;}
.poster__item--upload .icon {display: flex;align-items: center;justify-content: center;width: 50px;height: 50px;margin-bottom: 20px;border-radius: 50%;background: var(--color-primary);color: #fff;}
.poster__item--upload .icon > svg {width: 24px;}
.poster__item--upload strong {font-size: 25px;font-weight: 700;text-align: center;margin-bottom: 6px;}
.poster__item--upload p {font-size: 16px;text-align: center;color: #666;}



.poster-upload-popup {max-width: 400px; padding-top: 60px;}
.poster-upload-popup .layer-popup__content {text-align: left;}
.poster-upload__preview {display: flex; position: relative;flex-direction: column;align-items: center;height: 300px; margin-bottom: 15px; border-radius: 10px;border: 1px dashed #ddd;background: #f5f5f5; text-align: center;font-size: 16px;color: #666;cursor: pointer;}
.poster-upload__preview.error {border-color: #f00;background: #ffe5e5;color: #f00;}
.poster-upload__preview.dragover {background: #e5e5e5;border-color: #bbb;}
.poster-upload__preview-box {display: flex;flex-direction: column;align-items: center;justify-content: center;}
.poster-upload__preview-box .icon {margin: 80px 0 10px;}
.poster-upload__preview-box .icon > svg {width: 35px;}
.poster-upload__preview-box > p {padding: 0 15px;margin-bottom: 3px;}
.poster-upload__preview-box > span {color: #f00;font-size: 13px;}
.poster-upload__preview-box > img {max-width: 150px;max-height: 220px;margin-top: 10px;border: 1px solid #ddd;border-radius: 7px;}
.poster-upload__file {position: absolute;bottom: 15px; left: 50%;transform: translateX(-50%);padding: 0 15px;}
.poster-upload__file > div {width: max-content; margin: 0 auto;padding: 8px 40px; margin-bottom: 5px;border-radius: 30px;background: #000;color: #fff;font-size: 15px;font-weight: 700; cursor: pointer;transition: .4s;}
.poster-upload__file > p {font-size: 14px;color: #777;}
.poster-upload__notice {margin-bottom: 15px;padding-bottom: 15px;border-bottom: 1px solid #ddd;}
.poster-upload__notice > li {margin-bottom: 3px;font-size: 14px;}
#poster-upload-file {display: none;}

.poster-upload__agree {}
.poster-upload__agree-contents {font-size: 14px;color: #777;padding: 10px;border-radius: 7px;border: 1px solid #ddd;}
.poster-upload__agree-contents > p {position: relative;padding-left:7px;margin-bottom: 5px;}
.poster-upload__agree-contents > p::before {content: "";display: block;position: absolute;top: 8px;left: 0;width: 2px;height: 2px;border-radius: 50%;background: #aaa;}
.poster-upload__agree-contents > p:last-child {margin-bottom: 0;}
.poster-upload__agree-checkbox {display: flex;gap: 9px;margin-bottom: 10px;width: max-content;}
.poster-upload__agree-checkbox > input {cursor: pointer;}
.poster-upload__agree-checkbox > label {font-size: 14px;margin-top: 4px;font-weight: 700;cursor: pointer;}
.poster-upload-popup .form-button {margin-top: 10px;}

@media all and (min-width:1025px) {
    .poster-list__category-wrap > ul > li:hover {background: var(--color-sub-01);font-weight: 500;color: var(--color-primary);}
    .poster-list__category .swiper-nav > span:hover {border: 1px solid #ddd;}
    .poster-list__category .swiper-nav > span:hover > svg {color: var(--color-primary);}

    .poster__item-desc-design > span:hover {border-color: var(--color-primary);}
    .poster__item:hover .poster__item-thumb > img {transform: scale(1.04);}

    .poster-upload__file > div:hover {background: #555;}
}

@media all and (max-width:1024px) {
    .poster-list__content-list {grid-template-columns: repeat(3, minmax(0, 1fr));}
    .poster__item-desc {flex-direction: column;}
}

@media all and (max-width:768px) {
    .page-title {margin-bottom: 40px;}

    .poster-list__category {margin-bottom: 25px;padding-left: 0 !important;padding-right: 0 !important;}
    .poster-list__category-wrap {padding-left: var(--layout-padding); padding-right: var(--layout-padding);}
    .poster-list__category-wrap::after {display: none;}
    .poster-list__category-wrap > ul > li {line-height: 35px;padding: 0 25px;font-size: 14px;border-radius: 5px;}
    .poster-list__category-wrap > ul > li > a { }
    .poster-list__category .swiper-nav {padding: 0 0;}
    .poster-list__category .swiper-nav > span {width: 50px;line-height: 35px;border-radius: 0;background: linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255, 1) 60%);box-shadow: none; border: 0;}
    .poster-list__category .swiper-nav > span.prev {background: linear-gradient(90deg,rgba(255, 255, 255, 1) 40%, rgb(255, 255, 255, 0) 100%);}
    .poster-list__category .swiper-nav > span:after {display: none;}
    .poster-list__category .swiper-nav > span > svg {width: 19px;}


    .poster-list__content-list {grid-template-columns: repeat(2, minmax(0, 1fr));gap: 10px;}  
    .poster__item-desc {bottom: 13px; padding: 0 10px;}
    .poster__item-thumb::after {height: 76px;}
    .poster__item-desc-type {font-size: 22px;}
    .poster__item-desc-design {}
    .poster__item-desc-design > span {width: 20px;height: 20px;}
    .poster__item-desc-design > span.preview > svg {width: 13px;}

    .poster__item--upload {padding: 0 10px;}
    .poster__item--upload .icon {width: 40px;height: 40px; margin-bottom: 15px;;}
    .poster__item--upload .icon > svg {width: 19px;}
    .poster__item--upload strong {font-size: 17px;}
    .poster__item--upload p {font-size: 14px;}

    .poster-upload-popup {padding-top: 50px;}
    .poster-upload__preview {height: 210px;margin-bottom: 10px;;font-size: 14px;}
    .poster-upload__preview-box .icon {margin-top: 30px;}
    .poster-upload__preview-box .icon > svg {width: 30px;}
    .poster-upload__preview-box > img {max-height: 160px;border-radius: 5px;}
    .poster-upload__file {bottom: 5px;}
    .poster-upload__file > div {padding: 6px 30px;font-size: 14px;}
    .poster-upload__file > p {font-size: 13px;}
    .poster-upload__notice > li {font-size: 13px;}
    .poster-upload__agree-contents {border-radius: 5px;font-size: 13px;}
}