@charset "UTF-8";
/*
 *  File Name : /promotion/css/common.css
 *  Description : 프로모션 공통 스타일
 */

 /* common */
 @keyframes AniScaleRepeat {
    0% {transform: scale(.9);}
    50% {transform: scale(1);}
    80% {transform: scale(.9);}
    100% {transform: scale(.9);}
}
.click-block::after {z-index: 999; content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: transparent; pointer-events: all;}
.layout-inner {width: 1300px; margin: 0 auto;}

/* layerpopup - promo-common */
.layerpopup-promo-common .layer-wrapper {min-width: 450px; width: auto; padding: 35px; border: 4px solid #FFA400; border-radius: 20px; background-color: #6C3921; box-sizing: border-box;}
.layerpopup-promo-common .layer-wrapper .button-layerpopup-close {right: 20px; top: 20px; width: 30px; height: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none'%3E%3Cpath d='M15 18.1939L3.82129 29.3726C3.40304 29.7909 2.87072 30 2.22433 30C1.57795 30 1.04563 29.7909 0.627376 29.3726C0.209125 28.9544 0 28.4221 0 27.7757C0 27.1293 0.209125 26.597 0.627376 26.1787L11.8061 15L0.627376 3.82129C0.209125 3.40304 0 2.87072 0 2.22433C0 1.57795 0.209125 1.04563 0.627376 0.627376C1.04563 0.209125 1.57795 0 2.22433 0C2.87072 0 3.40304 0.209125 3.82129 0.627376L15 11.8061L26.1787 0.627376C26.597 0.209125 27.1293 0 27.7757 0C28.4221 0 28.9544 0.209125 29.3726 0.627376C29.7909 1.04563 30 1.57795 30 2.22433C30 2.87072 29.7909 3.40304 29.3726 3.82129L18.1939 15L29.3726 26.1787C29.7909 26.597 30 27.1293 30 27.7757C30 28.4221 29.7909 28.9544 29.3726 29.3726C28.9544 29.7909 28.4221 30 27.7757 30C27.1293 30 26.597 29.7909 26.1787 29.3726L15 18.1939Z' fill='%23FFA400'/%3E%3C/svg%3E");}
.layerpopup-promo-common .layer-wrapper * {color: #fff;}
.layerpopup-promo-common .layer-wrapper .cl-yellow {color: #FFA400 !important;}
.layerpopup-promo-common .layer-wrapper .underline {text-decoration: underline;}
.layerpopup-promo-common .layer-wrapper .bold {font-family: var(--ft-family_Poppins-500);}
.layerpopup-promo-common .layer-header {margin-bottom: 15px;}
.layerpopup-promo-common .layer-header .main-tit {font-family: var(--ft-family_Poppins-700); font-size: 40px;}
.layerpopup-promo-common .layer-contents {text-align: center;}
.layerpopup-promo-common .layer-contents * {font-family: var(--ft-family_Poppins-300); font-size: 16px;}
.layerpopup-promo-common .layer-contents .main-img {display: flex; justify-content: center; margin: 0;}
.layerpopup-promo-common .layer-contents .reward-info {display: flex; justify-content: center; align-items: center; width: 100%; height: 70px; padding: 0 15px; background: #42200F; border-radius: 10px; box-sizing: border-box;}
.layerpopup-promo-common .layer-contents .reward-info .icon {height: 40px;}
.layerpopup-promo-common .layer-contents .reward-info .icon img {height: 100%;}
.layerpopup-promo-common .layer-contents .reward-info .txt {margin-left: 10px;}
.layerpopup-promo-common .layer-contents .reward-info .txt,
.layerpopup-promo-common .layer-contents .reward-info .txt * {color: #fff; font-family: var(--ft-family_Poppins-700); font-size: 40px;}
.layerpopup-promo-common .layer-contents .contents-area .title {margin: 5px 0 10px; font-family: var(--ft-family_Poppins-600); font-size: 24px;}
.layerpopup-promo-common .layer-contents .contents-area .cont {color: #F6E8E1; line-height: 1.6;}
.layerpopup-promo-common .layer-contents .contents-area .cont + .title {margin-top: 20px;}
.layerpopup-promo-common .layer-contents .notice {color: #FFA400; font-family: var(--ft-family_Poppins-300);}
.layerpopup-promo-common .table-container {overflow: auto; width: 710px; height: 421px; background-color: #42200F; border-radius: 8px; box-sizing: border-box;}
.layerpopup-promo-common .table-container::-webkit-scrollbar {width: 10px; border-radius: 10px;}
.layerpopup-promo-common .table-container::-webkit-scrollbar-track {background-color: #361C10; border-radius: 10px;}
.layerpopup-promo-common .table-container::-webkit-scrollbar-thumb {background-color: #FFA400; border-radius: 10px;}
.layerpopup-promo-common .table-container::-webkit-scrollbar-button {display: none;}
.layerpopup-promo-common .table-container .tb-list {table-layout: fixed; width: 100%;}
.layerpopup-promo-common .table-container .cell {height: 60px; padding: 0 10px 0 20px; vertical-align: middle; border: 1px solid #6C3921; box-sizing: border-box; text-align: center; color: #F6E8E1; font-family: var(--ft-family_Poppins-300); font-size: 16px;}
.layerpopup-promo-common .table-container .cell:first-child {border-left: 0;}
.layerpopup-promo-common .table-container .cell:last-child {border-right: 0;}
.layerpopup-promo-common .table-container .cell > * {display: inline-block; vertical-align: middle;}
.layerpopup-promo-common .table-container .cell .icon {width: 32px;}
.layerpopup-promo-common .table-container .cell .icon img {width: 100%;}
.layerpopup-promo-common .table-container .cell .icon + .txt {width: calc(100% - 50px); margin-left: 10px;}
.layerpopup-promo-common .table-container .cell.al-l {text-align: left;}
.layerpopup-promo-common .table-container .cell.al-r {text-align: right;}
.layerpopup-promo-common .table-container tr.row:first-of-type td {border-top: 0;}
.layerpopup-promo-common .table-container thead .cell {background-color: #FFA400; color: #42200F; font-family: var(--ft-family_Poppins-600);}
/* .layerpopup-promo-common .table-container tr:last-of-type td {border-bottom: 0;} */
.layerpopup-promo-common .table-container.no-data {display: flex; justify-content: center; align-items: center;}

/* layerpopup - body-popup-common */
.body-popup-common {display: none; z-index: 11; position: fixed; left: 0; top: var(--header-height); width: 100%; height: 100%;}
.body-popup-common * {color: #fff;}
.body-popup-common .layer-wrapper {position: relative; top: 320px;  text-align: center;}
.body-popup-common .layer-wrapper .layer-header {font-family: var(--ft-family_NotoSans-700); font-size: 70px;}
.body-popup-common .layer-wrapper .layer-contents {margin-top: 30px; font-family: var(--ft-family_NotoSans-500); font-size: 35px; line-height: 1.4;}

/* layerpopup - login */
.layerpopup-login .layer-wrapper {width: 560px; height: 786px; padding-top: 75px; background-color: #fff; border: 0; border-radius: 20px; transform: translateY(-100%); animation: showLayerFromTop .7s 0s ease forwards;}
.layerpopup-login .layer-wrapper .button-layerpopup-close {right: 20px; top: 20px; width: 30px; height: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none'%3E%3Cg clip-path='url(%23clip0_2202_70)'%3E%3Cpath d='M15 18.1939L3.82129 29.3726C3.40304 29.7909 2.87072 30 2.22433 30C1.57795 30 1.04563 29.7909 0.627376 29.3726C0.209125 28.9544 0 28.4221 0 27.7757C0 27.1293 0.209125 26.597 0.627376 26.1787L11.8061 15L0.627376 3.82129C0.209125 3.40304 0 2.87072 0 2.22433C0 1.57795 0.209125 1.04563 0.627376 0.627376C1.04563 0.209125 1.57795 0 2.22433 0C2.87072 0 3.40304 0.209125 3.82129 0.627376L15 11.8061L26.1787 0.627376C26.597 0.209125 27.1293 0 27.7757 0C28.4221 0 28.9544 0.209125 29.3726 0.627376C29.7909 1.04563 30 1.57795 30 2.22433C30 2.87072 29.7909 3.40304 29.3726 3.82129L18.1939 15L29.3726 26.1787C29.7909 26.597 30 27.1293 30 27.7757C30 28.4221 29.7909 28.9544 29.3726 29.3726C28.9544 29.7909 28.4221 30 27.7757 30C27.1293 30 26.597 29.7909 26.1787 29.3726L15 18.1939Z' fill='%23BBBBBB'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2202_70'%3E%3Crect width='30' height='30' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}
.layerpopup-login .layer-wrapper .layer-inner {display: block;}
.layerpopup-login .section-title {text-align: center;}

/* header */
.header-wrap .header .layout-inner {display: flex; justify-content: space-between; align-items: center; width: 1300px;}
.header-wrap .header .logo {position: absolute; left: 50%; transform: translate(-50%);}
.header-wrap .header .logo img {width: 53px;}
.header-wrap .header .userinfo-area * {color: #fff; font-family: var(--ft-family_NotoSans-500); font-size: 14px; line-height: 1;}
.header-wrap .header .userinfo-area .underline {position: relative; padding-bottom: 1px;}
.header-wrap .header .userinfo-area .underline::before {content: ""; display: inline-block; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #fff;}
.header-wrap .header .userinfo-area .underline:hover {color: #1398FF;}
.header-wrap .header .userinfo-area .underline:hover::before {background-color: #1398FF;}
.header-wrap .header .account-btns {display: flex; align-items: center;}
.header-wrap .header .account-btns > * {margin-right: 17px;}
.header-wrap .header .account-btns > *:last-child {margin-right: 0;}
.header-wrap .header .userinfo {position: relative;}
.header-wrap .header .userinfo .userinfo-inner {display: flex; align-items: center;}
.header-wrap .header .userinfo .userinfo-inner .profile-thumb {overflow: hidden; display: inline-block; width: 46px; height: 46px; border-radius: 50%;}
.header-wrap .header .userinfo .userinfo-inner .profile-thumb img {width: 100%; height: auto;}
.header-wrap .header .userinfo .userinfo-inner .profile-info {display: flex; flex-direction: column; justify-content: center; align-items: flex-start; margin-left: 9px;}
.header-wrap .header .userinfo .userinfo-inner .profile-info .user-name {margin-bottom: 5px; font-size: 16px;}
.header-wrap .header .userinfo .userinfo-inner .profile-info .user-idx {color: #98C0E8;}
.header-wrap .header .userinfo .btn-profile {display: none;}
.header-wrap .header .userinfo .tooltip-profile {display: none; position: absolute; left: -50%; bottom: -122px; padding: 20px; background-color: #240075; border: 3px solid #1398FF; border-radius: 10px; box-sizing: border-box; white-space: nowrap; animation: fadeInEffect .5s ease forwards;}
.header-wrap .header .userinfo .tooltip-profile::before {content: ""; display: inline-block; position: absolute; left: calc(50% - calc((68px - 46px)/2)); top: -11px; transform: translate(-50%); width: 17px; height: 11px; background-image: url(../images/common/arrow_top_tooltip.png);}
.header-wrap .header .userinfo .tooltip-profile .profile-thumb {width: 68px; height: 68px;}
.header-wrap .header .userinfo .tooltip-profile .btn-logout {margin-top: 15px;}
.header-wrap .header .userinfo.tooltip-active .tooltip-profile {display: block;}

/* contents - common */
.contents-wrap {position: relative; padding-top: 0;}
.contents-wrap .inner {padding: 0;}

/* login active */
.login-active .header-wrap .header .account-btns {display: none;}
.login-active .header-wrap .header .btn-profile {display: flex;}

/* event ended */
.event-ended::after {content: ""; display: inline-block; z-index: 10; position: absolute; left: 0; top: var(--header-height); background: rgba(0,0,0,.8); width: 100%; height: calc(100% - var(--header-height));}
.event-ended .layerpopup-event-ended {display: block;}