@charset "utf-8";
html,body {scroll-behavior: smooth;}
body {background-color: #000;}
h1, h2, h3, h4, h5, h6, p, ol, ul, dl, dd, input{margin:0;}
ol, ul{padding:0; list-style:none;}
a{color:inherit; text-decoration:none;}
img{vertical-align:middle;}

.c-black {color: #000;}
.c-white {color: #fff;}
.c-grey {color: #b2b2b2;}
.t-center {text-align: center;}
.copy-emit {display: flex;justify-content: center;flex-wrap: wrap;margin-top: 20px;}
.to-copy,.copy-link {display: flex;justify-content: center;align-items: center;line-height: 34px;padding: 0 15px;border: 1px solid #333;border-radius: 5px;margin: 0 11px 10px;background-color: transparent;outline: none;cursor: pointer;}
.to-copy::before {content: "";width: 17px;height: 17px;background: url(../images/midjourney-prompts/mjp-index/black-copy.svg);margin-right: 8px;}
.buttons-wrap {display: flex;justify-content: center;flex-wrap: wrap;}
.the-button {min-width: 250px;box-sizing: border-box;text-align: center;padding: 10px;margin: 0 25px 10px;border-radius: 23px;background-color: #92cf3f;}
.the-second {background-color: #fff;}
/* common end */

main {position: relative;}

.bg1 {background: #000 url(../images/midjourney-prompts/mjp-index/bg1.jpg) no-repeat center top;}
.main-banner {margin-top: 6px;padding-top: 78px;}
.mb-content {display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;}
.mbc-left {width: 580px;}
.mbcl-star {display: flex;align-items: center;}
.mbcl-star>span {margin: 0 6px;}
h1 {font-size: 36px;color: #fff;line-height: 1.3;margin: 22px 0 42px;}
h1>span {color: #fca001;}
.mbc-gifts {display: flex;flex-wrap: wrap;}
.mbc-gift {width: 264px;margin-right: 22px;box-sizing: border-box;padding: 15px 5px 16px 22px;border-radius: 20px;background: linear-gradient(-160deg, rgba(255,255,255,0.2), transparent);position: relative;}
.mbcg-num {line-height: 30px;padding: 0 18px;background: linear-gradient(90deg, #fbad0b, #fb8001);border-radius: 17px;border: 2px solid #000;position: absolute;top: -20px;right: 20px;}
.mbcg-title {margin: 12px 0 4px;font-weight: 600;}
.mbcg-title>span {color: #fca001;}
.mbcg-p {color: #b2aedf;line-height: 1.2;}
.mbc-date {color: #b2aedf;padding-top: 18px;}
.mbc-right {width: 534px;min-height: 454px;box-sizing: border-box;border: 1px solid rgba(255, 255, 255, 0.2);border-radius: 14px;backdrop-filter: blur(40px);}
.mbcr-before {padding: 76px 60px 0;}
.mbcrb-p {color: #b2aedf;padding: 5px 0 40px;}
.mbcrb-intro {color: #e5e5e5;padding: 46px 0 10px;}
.mbcrb-link {display: block;box-sizing: border-box;padding: 14px 10px;border-radius: 25px;background-color: #2f49eb;}

.main-shared {padding: 84px 0;overflow: hidden;}
.ms-top {display: flex;justify-content: space-between;align-items: flex-end;flex-wrap: wrap;padding: 20px 0 45px;}
.mst-left {max-width: 720px;box-sizing: border-box;padding: 4px 6px;border: 1px solid #4e4e50;border-radius: 28px;display: flex;;}
.mstr-item {padding: 10px 30px;border-radius: 23px;display: flex;justify-content: center;align-items: center;cursor: pointer;}
.mstr-item.active {color: #000;background-color: #fff;}
.msbc-items {display: flex;flex-wrap: wrap;gap: 30px;padding-bottom: 18px;transition: all 0.4s;}
.msbc-item {flex-shrink: 0;width: 410px;height: 511px;border-radius: 20px;box-shadow: inset 0 0 10px 0 rgba(255, 255, 255, 0.2);display: flex;align-items: center;overflow: hidden;position: relative;}
.msbc-item>img {object-fit: contain;width: 100%;height: 100%;}
.mst-right {display: flex;align-items: center;justify-content: flex-end;flex-wrap: wrap;gap: 20px;}
select {height: 40px;background-color: #1b1b1b;border-radius: 20px;border: none;padding: 0 30px 0 10px;outline: none;}
.msbci-content {width: 100%;box-sizing: border-box;padding: 20px 26px;background: linear-gradient(transparent, rgba(0,0,0,0.8) 50%);position: absolute;left: 0;bottom: 0;opacity: 0;visibility: hidden;transition: all 0.2s;}
.msbc-item:hover .msbci-content {opacity: 1;visibility: visible;}
.msbcic-p {line-height: 1.2;font-style: italic;padding: 6px 0 18px;}
.msbcic-emit {display: flex;justify-content: space-between;align-items: center;}
.msbcice-copy,.msbcice-like {font-size: 19px;color: #fff;line-height: 1;border: none;outline: none;background-color: transparent;padding: 0;margin: 0;display: flex;justify-content: flex-start;border-radius: 0;align-items: center;cursor: pointer;}
.msbcice-like {pointer-events: none;}
.msbcice-copy::before,.msbcice-like::before {content: "";width: 17px;height: 17px;background: url(../images/midjourney-prompts/mjp-index/copy.svg);margin-right: 8px;}
.msbcice-like::before {width: 17px;height: 15px;background: url(../images/midjourney-prompts/mjp-index/like.png) no-repeat left center;}
.msbcice-like.active::before {background-position-x: right;}
.msbcice-copy>span {display: none;}
.msbcice-copy>span:first-child {display: block;}
.msbcice-copy.active>span:first-child {display: none;}
.msbcice-copy.active>span:last-child {display: block;}
.msbc-toggle {display: flex;justify-content: center;flex-wrap: wrap;padding-top: 20px;}
.msbc-toggle>li {width: 58px;height: 58px;line-height: 56px;color: #b3b3b3;text-align: center;box-sizing: border-box;border: 1px solid #4d4d4d;border-radius: 50%;cursor: pointer;margin: 0 7px 14px;}
.msbc-toggle>li.active {border-color: #fff;color: #000;background-color: #fff;}
.prev-page::before,.next-page::before {content: "";display: block;width: 14px;height: 14px;border-left: 2px solid #fff;border-bottom: 2px solid #fff;border-radius: 1px;transform: rotate(45deg);margin: 20px 0 0 23px;}
.next-page::before {transform: rotate(225deg);margin: 20px 0 0 17px;}

.copy-popup {display: none;position: fixed;top: 50%;left: 50%;z-index: 2;transform: translate(-50%,-50%);width: 462px;background-color: #000;border-radius: 25px;overflow: hidden;padding-top: 38px;text-align: center;}
.cancel-copy-popup {width: 30px;height: 30px;font-size: 35px;line-height: 20px;color: #808080;position: absolute;top: 10px;right: 10px;cursor: pointer;}
.cp-p {padding: 10px 5px 32px;}
.cp-link {display: inline-block;margin: 0 42px 22px;}
.cp-bottom-p {padding: 20px 5px;background-color: #333;}
.cp-bottom-p>a>span {color: #ff8400;}

@media (max-width: 1400px) {
    .mb-content {justify-content: center;}
    .mbc-left {margin: 0 0 30px;}

    .msbc-items {flex-wrap: nowrap;overflow: auto;}
}
@media (max-width: 1200px) {
    .mbc-right {min-height: auto;}
    .mbcr-before {padding: 30px;}

    .main-shared h2 {text-align: center;}
    .mst-left {max-width: 100%;width: 100%;border: none;justify-content: center;flex-wrap: wrap;}
    .mst-right {width: 100%;justify-content: center;padding-top: 20px;}
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
    .mbcl-star,.mbc-gifts {justify-content: center;}
    .mbc-gift {margin: 0 5px 30px;}
    .mbc-date {padding-top: 0;}
    .mbc-left {text-align: center;}
    .mbc-left,.mbc-right {width: 100%;min-height: auto;}
}
@media (max-width: 576px) {
    .container-xl {padding-left: 2%;padding-right: 2%;}

    .mbc-gift {padding: 15px 10px;}
    .mbcr-before {padding: 20px 10px;}

    .copy-popup {width: 96%;}
}