
/* ------------------------------------- */

@font-face {
    font-family: 'BMDOHYEON';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/BMDOHYEON.woff');
    font-weight: normal;
}

.eventpopup_gift {
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    border-radius: 10px;
    overflow: hidden;
    z-index: 1000;
    display: flex;
}

.eventpopup_gift * {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    outline: none;
    overflow: inherit !important;
}

.popup_templeate {
    display: flex;
    padding: 22px;
    flex: 1;
    position: relative;
    flex-direction: column;
}

.popup_close {
    display: flex;
    width: 47px;
    height: 48px;
    position: absolute;
    right: 20px;
    top: 20px;
}

.popup_title {
    font-size: 36px;
    font-weight: bold;
    color: #fff;
    display: flex;
    text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1);
    justify-content: center;
    letter-spacing: -3.6px;
}

.winner_wrapper {
    margin-top: 18px;
    border-radius: 0 0 10px 10px;
    background: rgba(0, 0, 0, 0.3);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.winner_title {
    display: flex;
    height: 71px;
    min-height: 71px;
    font-family: 'BMDOHYEON';
    font-weight: normal;
    color: #fff;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    text-shadow: 1.4px 1.4px 0.7px rgba(0, 0, 0, 0.32);
    letter-spacing: -0.3px;
}

.winner_title strong {
    color: #ff9;
    font-family: 'BMDOHYEON';
    display: flex;
    margin: 0 10px;
    font-weight: normal;
}

.winner_title span {
    font-size: 24px;
    font-family: 'BMDOHYEON';
    font-weight: normal;
}

.winner_list {
    display: grid;
    flex: 1;
}

.winner_list > div {
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    text-shadow: 0px 6px 8px rgba(0, 0, 0, 0.3);
    color: #fff;
    display: flex;
    letter-spacing: -0.45px;
    justify-content: center;
    font-weight: bold;
    text-align: center;
}

/*아메리카노 1잔 300명 */
.eventpopup_1r300 {
    width: 1796px;
    height: 920px;
    background: url('/images/event/popup-bg-1-01.png') no-repeat 0 0;
    background-size: cover;
}

.eventpopup_1r300 .winner_title {
    background: url('/images/event/img-title-bar-1-01.png') no-repeat 0 0;
    background-size: contain;
}

.eventpopup_1r300 .winner_list {
    grid-template-rows: repeat(20, 1fr);
    grid-template-columns: repeat(15, 1fr);
    padding: 15px 5px 10px;
}

.eventpopup_1r300 .winner_list > div {
    font-size: 18px;
}

.eventpopup_1r300 .winner_list > div:nth-child(15n) {
    border-right: none;
}

/*아메리카노 1잔 100명 */
.eventpopup_1r100 {
    width: 1682px;
    height: 815px;
    background: url('/images/event/popup-bg-1-02.png') no-repeat 0 0;
    background-size: cover;
}

.eventpopup_1r100 .popup_templeate {
    padding: 22px 23px;
}

.eventpopup_1r100 .winner_title {
    background: url('/images/event/img-title-bar-1-02.png') no-repeat 0 0;
    background-size: contain;
}

.eventpopup_1r100 .winner_list {
    grid-template-rows: repeat(10, 1fr);
    grid-template-columns: repeat(10, 1fr);
    padding: 45px 20px 40px;
}

.eventpopup_1r100 .winner_list > div {
    font-size: 22px;
}

.eventpopup_1r100 .winner_list > div:nth-child(10n) {
    border-right: none;
}

/*아메리카노 1잔 50명 */
.eventpopup_1r50 {
    width: 915px;
    height: 815px;
    background: url('/images/event/popup-bg-1-03.png') no-repeat 0 0;
    background-size: cover;
}

.eventpopup_1r50 .popup_templeate {
    padding: 22px 23px 22px 22px;
}

.eventpopup_1r50 .winner_title {
    background: url('/images/event/img-title-bar-1-03.png') no-repeat 0 0;
    background-size: contain;
}

.eventpopup_1r50 .winner_list {
    grid-template-rows: repeat(10, 1fr);
    grid-template-columns: repeat(5, 1fr);
    padding: 45px 20px 40px;
}

.eventpopup_1r50 .winner_list > div {
    font-size: 22px;
}

.eventpopup_1r50 .winner_list > div:nth-child(5n) {
    border-right: none;
}

/*케이크/아메리카노 1잔 50명 + 아메리카노 1잔 50명 */
.eventpopup_2r100 {
    width: 1510px;
    height: 676px;
    background: url('/images/event/popup-bg-2-03.png') no-repeat 0 0;
    background-size: cover;
}

.eventpopup_2r100 .popup_templeate {
    padding: 22px 29px;
}

.eventpopup_2r100 .winner_title {
    background: url('/images/event/img-title-bar-2-03-1.png') no-repeat 0 0;
    background-size: contain;
}

.eventpopup_2r100 .winner_wrapper div:nth-child(3).winner_title {
    background: url('/images/event/img-title-bar-2-03-2.png') no-repeat 0 0;
    background-size: contain;
}

.eventpopup_2r100 .winner_list {
    grid-template-rows: repeat(5, 1fr);
    grid-template-columns: repeat(10, 1fr);
    padding: 12px 20px;
}

.eventpopup_2r100 .winner_list > div {
    font-size: 20px;
}

.eventpopup_2r100 .winner_list > div:nth-child(10n) {
    border-right: none;
}

/*케이크/아메리카노 1잔 100명 + 아메리카노 1잔 100명 */
.eventpopup_2r200 {
    width: 1682px;
    height: 683px;
    background: url('/images/event/popup-bg-2-2.png') no-repeat 0 0;
    background-size: cover;
}

.eventpopup_2r200 .popup_templeate {
    padding: 22px 27px 22px 26px;
}

.eventpopup_2r200 .winner_title {
    background: url('/images/event/img-title-bar-2-02-1.png') no-repeat 0 0;
    background-size: contain;
}

.eventpopup_2r200 .winner_wrapper div:nth-child(3).winner_title {
    background: url('/images/event/img-title-bar-2-02-2.png') no-repeat 0 0;
    background-size: contain;
}

.eventpopup_2r200 .winner_list {
    grid-template-rows: repeat(5, 1fr);
    grid-template-columns: repeat(20, 1fr);
    padding: 20px 5px;
}

.eventpopup_2r200 .winner_list > div {
    font-size: 14px;
}

.eventpopup_2r200 .winner_list > div:nth-child(20n) {
    border-right: none;
}

/*케이크/아메리카노 1잔 200명 + 아메리카노 1잔 300명 */
.eventpopup_2r500 {
    width: 1796px;
    height: 920px;
    background: url('/images/event/popup-bg-2-01.png') no-repeat 0 0;
    background-size: cover;
}

.eventpopup_2r500 .popup_templeate {
    padding: 22px;
}

.eventpopup_2r500 .winner_title {
    background: url('/images/event/img-title-bar-2-01-1.png') no-repeat 0 0;
    background-size: contain;
}

.eventpopup_2r500 .winner_list {
    grid-template-rows: repeat(10, 1fr);
    grid-template-columns: repeat(20, 1fr);
    padding: 15px 5px;
}

.eventpopup_2r500 .winner_wrapper div:nth-child(3).winner_title {
    background: url('/images/event/img-title-bar-2-01-2.png') no-repeat 0 0;
    background-size: contain;
}

.eventpopup_2r500 .winner_wrapper div:nth-child(4).winner_list {
    grid-template-rows: repeat(15, 1fr);
    min-height: 420px;
}

.eventpopup_2r500 .winner_list > div {
    font-size: 14px;
}

.eventpopup_2r500 .winner_list > div:nth-child(20n) {
    border-right: none;
}

/*케이크/아메리카노 2잔 100명 + 케이크/아메리카노 1잔 200명 + 아메리카노 1잔 300명 */
.eventpopup_3r600 {
    width: 1796px;
    height: 942px;
    background: url('/images/event/popup-bg-3-01.png') no-repeat 0 0;
    background-size: cover;
}

.eventpopup_3r600 .popup_templeate {
    padding: 22px;
}

.eventpopup_3r600 .winner_title {
    background: url('/images/event/img-title-bar-3-01-1.png') no-repeat 0 0;
    background-size: contain;
}

.eventpopup_3r600 .winner_list {
    grid-template-rows: repeat(5, 1fr);
    grid-template-columns: repeat(20, 1fr);
    padding: 0 5px 10px;
}

.eventpopup_3r600 .winner_wrapper div:nth-child(2).winner_list {
    min-height: 105px;
}
.eventpopup_3r600 .winner_wrapper div:nth-child(3).winner_title {
    background: url('/images/event/img-title-bar-2-01-1.png') no-repeat 0 0;
    background-size: contain;
}
.eventpopup_3r600 .winner_wrapper div:nth-child(4).winner_list {
    grid-template-rows: repeat(10, 1fr);
    min-height: 210px;
}
.eventpopup_3r600 .winner_wrapper div:nth-child(5).winner_title {
    background: url('/images/event/img-title-bar-3-01-3.png') no-repeat 0 0;
    background-size: contain;
}
.eventpopup_3r600 .winner_wrapper div:nth-child(6).winner_list {
    grid-template-rows: repeat(15, 1fr);
    min-height: 310px;
}

.eventpopup_3r600 .winner_list > div {
    font-size: 14px;
}

.eventpopup_3r600 .winner_list > div:nth-child(20n) {
    border-right: none;
}

/*케이크/아메리카노 2잔 100명 + 케이크/아메리카노 1잔 100명 + 아메리카노 1잔 100명 */
.eventpopup_3r300 {
    width: 1682px;
    height: 789px;
    background: url('/images/event/popup-bg-3-02.png') no-repeat 0 0;
    background-size: cover;
}

.eventpopup_3r300 .popup_templeate {
    padding: 23px;
}

.eventpopup_3r300 .winner_title {
    background: url('/images/event/img-title-bar-3-02-1.png') no-repeat 0 0;
    background-size: contain;
}

.eventpopup_3r300 .winner_list {
    grid-template-rows: repeat(5, 1fr);
    grid-template-columns: repeat(20, 1fr);
    padding: 10px 5px;
}

.eventpopup_3r300 .winner_wrapper div:nth-child(3).winner_title {
    background: url('/images/event/img-title-bar-3-02-2.png') no-repeat 0 0;
    background-size: contain;
}

.eventpopup_3r300 .winner_wrapper div:nth-child(5).winner_title {
    background: url('/images/event/img-title-bar-3-02-3.png') no-repeat 0 0;
    background-size: contain;
}

.eventpopup_3r300 .winner_list > div {
    font-size: 14px;
}

.eventpopup_3r300 .winner_list > div:nth-child(20n) {
    border-right: none;
}

/*케이크/아메리카노 2잔 50명 + 케이크/아메리카노 1잔 50명 + 아메리카노 1잔 50명 */
.eventpopup_3r150 {
    width: 1510px;
    height: 842px;
    background: url('/images/event/popup-bg-3-03.png') no-repeat 0 0;
    background-size: cover;
}

.eventpopup_3r150 .popup_templeate {
    padding: 22px 29px;
}

.eventpopup_3r150 .winner_title {
    background: url('/images/event/img-title-bar-3-03-1.png') no-repeat 0 0;
    background-size: contain;
}

.eventpopup_3r150 .winner_list {
    grid-template-rows: repeat(5, 1fr);
    grid-template-columns: repeat(10, 1fr);
    padding: 15px 5px;
}

.eventpopup_3r150 .winner_wrapper div:nth-child(3).winner_title {
    background: url('/images/event/img-title-bar-3-03-2.png') no-repeat 0 0;
    background-size: contain;
}

.eventpopup_3r150 .winner_wrapper div:nth-child(5).winner_title {
    background: url('/images/event/img-title-bar-3-03-3.png') no-repeat 0 0;
    background-size: contain;
}

.eventpopup_3r150 .winner_list > div {
    font-size: 16px;
}

.eventpopup_3r150 .winner_list > div:nth-child(10n) {
    border-right: none;
}