* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
color: #fff;
box-sizing: border-box
}
*:not(i) *:not(i) {
font-family: "Pretendard-Regular" !important
}
.__hide {
display: none !important
}
html {
width: 100%;
height: 100%;
overflow: hidden
}
body {
background: #110f19;
overflow: auto;
width: 100%;
height: 100vh
}
pre {
white-space: pre-wrap
}
img {
max-width: 100%
}
a,
button {
cursor: pointer
}
._icon {
background: url("../imgs/craze/ico.png");
display: block
}
._icon._icon0 {
width: 24px;
height: 24px;
background-position: 0px -176px
}
._icon._icon1 {
width: 24px;
height: 24px;
background-position: -34px -176px
}
._icon._icon2 {
width: 24px;
height: 24px;
background-position: -68px -176px
}
._icon._icon3 {
width: 24px;
height: 24px;
background-position: -102px -176px
}
._icon._icon4 {
width: 24px;
height: 24px;
background-position: -136px -176px
}
._icon._icon5 {
width: 24px;
height: 24px;
background-position: -170px -176px
}
._icon._icon6 {
width: 24px;
height: 24px;
background-position: -204px -176px
}
._icon._icon7 {
width: 24px;
height: 24px;
background-position: -238px -176px
}
._icon._icon8 {
width: 24px;
height: 24px;
background-position: -272px -176px
}
._icon._icon9 {
width: 24px;
height: 24px;
background-position: -306px -176px
}
._icon._icon10 {
width: 24px;
height: 24px;
background-position: -340px -176px
}
._icon._icon11 {
width: 24px;
height: 24px;
background-position: -374px -176px
}
._icon._icon12 {
width: 24px;
height: 24px;
background-position: -408px -176px
}
._icon._icon13 {
width: 24px;
height: 24px;
background-position: -442px -176px
}
._icon._icon14 {
width: 24px;
height: 24px;
background-position: -476px -176px
}
._icon._icon15 {
width: 24px;
height: 24px;
background-position: -510px -176px
}
._icon._icon16 {
width: 24px;
height: 24px;
background-position: -544px -176px
}
._icon._icon17 {
width: 24px;
height: 24px;
background-position: -578px -176px
}
._icon._icon18 {
width: 24px;
height: 24px;
background-position: -612px -176px
}
._icon._icon19 {
width: 24px;
height: 24px;
background-position: -646px -176px
}
._icon._icon20 {
width: 24px;
height: 24px;
background-position: -680px -176px
}
._icon._icon21 {
width: 24px;
height: 24px;
background-position: -714px -176px
}
._icon._icon22 {
width: 24px;
height: 24px;
background-position: -748px -176px
}
._icon._icon23 {
width: 24px;
height: 24px;
background-position: -782px -176px
}
._icon._icon24 {
width: 24px;
height: 24px;
background-position: -816px -176px
}
._icon._icon25 {
width: 24px;
height: 24px;
background-position: -850px -176px
}
._icon._icon26 {
width: 24px;
height: 24px;
background-position: -884px -176px
}
._icon._icon27 {
width: 24px;
height: 24px;
background-position: -918px -176px
}
._icon._icon28 {
width: 24px;
height: 24px;
background-position: -952px -176px
}
._icon._icon29 {
width: 24px;
height: 24px;
background-position: -986px -176px
}
._icon._fire {
width: 24px;
height: 24px;
background-position: -410px -236px
}
._icon._menu_icon {
width: 48px;
height: 48px;
background-position: -58px -66px
}
._icon.no_profile {
width: 64px;
height: 64px;
background-position: -126px -236px
}
._icon.select_profile {
width: 64px;
height: 64px;
background-position: -200px -236px
}
._icon.profile_mini {
width: 24px;
height: 24px;
background-position: -34px -236px
}
._icon.profile_medium {
width: 48px;
height: 48px;
background-position: -68px -236px;
transform: scale(0.75)
}
._icon._back {
width: 24px;
height: 24px;
background-position: 0 -236px
}
._m_cont {
display: none
}
.big_pop {
display: flex;
position: absolute;
left: 50%;
justify-content: center;
gap: 10px;
transform: translateX(-50%);
z-index: 10000000000;
top: 164px
}
@media screen and (max-width: 720px) {
.big_pop {
transform: unset;
left: unset;
width: 100%
}
}
.big_pop .slot_popup {
background: #fff;
max-height: calc(100vh - 88px);
font-size: 0;
width: 600px;
height: 100%;
position: relative
}
@media screen and (max-width: 720px) {
.big_pop .slot_popup {
position: absolute;
width: 100%
}
}
.big_pop .slot_popup ._img img {
max-height: calc(100vh - 88px);
width: 100%
}
.big_pop .slot_popup ._btns {
font-size: 16px;
display: flex;
justify-content: space-between;
background: linear-gradient(180deg, #F02A7E 0%, #FE0A5B 100%)
}
.big_pop .slot_popup ._btns a {
padding: 8px;
color: #fff;
font-size: 14px
}
.big_pop .slot_popup ._btns a:nth-last-child(1):hover {
background: #fff;
color: #000
}
.canvas-container {
display: inline-block;
position: relative
}
.canvas-container .watermarked-image {
display: none
}
canvas {
display: block
}
.bbs_alarm {
position: fixed;
left: 0;
bottom: 0;
z-index: 111111111111111110000000
}
.bbs_alarm .alarm_list {
width: 340px;
background-color: #1d1b2b
}
.bbs_alarm .alarm_list>a {
width: 100%;
height: 32px;
display: flex;
border-top: 1px solid #f02a7e;
border-right: 1px solid #f02a7e;
border-left: 1px solid #f02a7e;
align-items: center;
padding: 0 10px
}
.bbs_alarm .alarm_list>a span {
font-size: 14px
}
.bbs_alarm .alarm_list>a span:nth-child(1) {
width: 48px
}
.bbs_alarm .alarm_list>a span:nth-child(2) {
max-width: calc(100% - 228px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: bold
}
.bbs_alarm .alarm_list>a span:nth-child(3) {
width: 180px
}
.bbs_alarm .hide_btn {
padding: 10px;
background: linear-gradient(180deg, #F02A7E 0%, #FE0A5B 100%);
display: flex;
justify-content: center;
align-items: center
}
.hlq_user {
animation: colorFlash 1s infinite
}
@keyframes colorFlash {
0%,
100% {
color: #fff;
text-shadow: 0 0 10px #fff, 0 0 20px #f02a7e, 0 0 30px #f02a7e, 0 0 40px #f02a7e, 0 0 50px #f02a7e
}
25% {
color: #f02a7e;
text-shadow: 0 0 15px #f02a7e, 0 0 25px #fff, 0 0 35px #fff, 0 0 45px #fff, 0 0 55px #fff
}
50% {
color: #fff;
text-shadow: 0 0 20px #fff, 0 0 30px #f02a7e, 0 0 40px #f02a7e, 0 0 50px #f02a7e, 0 0 60px #f02a7e
}
75% {
color: #f02a7e;
text-shadow: 0 0 10px #f02a7e, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff, 0 0 50px #fff
}
}
@media screen and (max-width: 960px) {
#chat-widget-container {
bottom: 70px !important;
max-height: 90% !important
}
}
.btns {
display: flex;
gap: 10px
}
.btns._right {
justify-content: flex-end
}
.btn {
border-radius: 6px;
background: #1d1b2b;
display: flex;
justify-content: center;
align-items: center;
color: #fff
}
.btn:hover {
background: #262437
}
.btn.btn1 {
background: linear-gradient(180deg, #F02A7E 0%, #FE0A5B 100%)
}
.btn.btn1:hover {
background: linear-gradient(180deg, #FF539C 0%, #FF2B72 100%)
}
.btn.btn2 {
background: linear-gradient(180deg, #1D1B2B 0%, #0A0814 100%)
}
.btn.btn2:hover {
background: linear-gradient(180deg, #262437 0%, #17142B 100%)
}
.btn._sm {
width: 100px;
height: 36px
}
header {
width: 100%
}
header .hd_t .inne,
header .hd_b .inne {
position: relative;
display: flex;
margin: 0 auto;
width: 100%;
height: 100%;
max-width: 1640px;
align-items: center;
justify-content: space-between
}
@media screen and (max-width: 1600px) {
header .hd_t .inne,
header .hd_b .inne {
padding: 0 20px
}
}
@media screen and (max-width: 720px) {
header .hd_t .inne,
header .hd_b .inne {
justify-content: space-between !important
}
}
header .hd_t {
background: #000;
width: 100%;
height: 150px
}
header .hd_t .inne ._left {
font-size: 14px
}
@media screen and (max-width: 720px) {
header .hd_t .inne ._left {
display: none
}
}
header .hd_t .inne .logo {
width: 350px;
position: absolute;
left: 50%;
transform: translateX(-50%)
}
@media screen and (max-width: 720px) {
header .hd_t {
height:100px;
}
header .hd_t .inne .logo {
width: 200px
}
footer .inne .ft_t .logo {
max-width: 100px;
}
}
header .hd_t .inne .btns {
display: flex;
gap: 10px
}
@media screen and (max-width: 750px) {
header .hd_t .inne .btns {
flex-flow: column
}
header .hd_t .inne .btns a {
width: 75px;
font-size: 14px
}
}
header .hd_t .inne .right {
display: flex;
gap: 10px
}
header .hd_t .inne .right>a,
header .hd_t .inne .right>div {
display: flex;
padding: 6px;
border-radius: 50px;
background: #262437;
gap: 10px
}
header .hd_t .inne .right>a._m_cont,
header .hd_t .inne .right>div._m_cont {
display: none
}
header .hd_t .inne .right>a._money,
header .hd_t .inne .right>div._money {
min-width: 130px;
justify-content: space-between;
align-items: center
}
header .hd_t .inne .right>a ._bg_pink,
header .hd_t .inne .right>div ._bg_pink {
background-color: #f8186a;
border-radius: 50%
}
header .hd_t .inne .right .top_jackpot {
background: none;
align-items: center
}
header .hd_t .inne .right .top_jackpot .image {
position: relative;
width: 70px;
height: 70px
}
header .hd_t .inne .right .top_jackpot .image .icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
header .hd_t .inne .right .top_jackpot ._cont {
display: flex;
flex-flow: column;
justify-content: center;
gap: 6px
}
header .hd_t .inne .right .top_jackpot ._cont>span {
font: normal normal bold 18px Montserrat
}
header .hd_t .inne .right .top_jackpot ._cont .gauge {
display: grid;
grid-template-columns: repeat(10, 1fr);
gap: 2px
}
header .hd_t .inne .right .top_jackpot ._cont .gauge._q>div {
border: 1px solid #7b1842
}
header .hd_t .inne .right .top_jackpot ._cont .gauge._q>div._on {
background: linear-gradient(180deg, #FF4E99 0%, #FE0A5B 100%)
}
header .hd_t .inne .right .top_jackpot ._cont .gauge._j>div {
border: 1px solid rgba(106, 255, 169, .5333333333)
}
header .hd_t .inne .right .top_jackpot ._cont .gauge._j>div._on {
background: linear-gradient(180deg, #6AFFA9 0%, #00886D 100%)
}
header .hd_t .inne .right .top_jackpot ._cont .gauge._j>div:nth-child(-n+5) {
border: 1px solid rgba(255, 17, 0, .5333333333)
}
header .hd_t .inne .right .top_jackpot ._cont .gauge._j>div:nth-child(-n+5)._on {
background: linear-gradient(180deg, #FF6A6A 0%, #FF1100 100%)
}
header .hd_t .inne .right .top_jackpot ._cont .gauge._j>div:nth-child(n+6):nth-child(-n+10) {
border: 1px solid rgba(255, 176, 106, .5333333333)
}
header .hd_t .inne .right .top_jackpot ._cont .gauge._j>div:nth-child(n+6):nth-child(-n+10)._on {
background: linear-gradient(180deg, #FFB06A 0%, #FF4500 100%)
}
header .hd_t .inne .right .top_jackpot ._cont .gauge._j>div:nth-child(n+11):nth-child(-n+15) {
border: 1px solid rgba(255, 176, 106, .5333333333)
}
header .hd_t .inne .right .top_jackpot ._cont .gauge._j>div:nth-child(n+11):nth-child(-n+15)._on {
background: linear-gradient(180deg, #E2FF6A 0%, #FF6600 100%)
}
header .hd_t .inne .right .top_jackpot ._cont .gauge>div {
width: 6px;
height: 14px
}
header .hd_t .inne .right .top_jackpot ._cont .gauge>div:nth-child(1),
header .hd_t .inne .right .top_jackpot ._cont .gauge>div:nth-child(11) {
border-radius: 2px 0 0 2px
}
header .hd_t .inne .right .top_jackpot ._cont .gauge>div:nth-child(10),
header .hd_t .inne .right .top_jackpot ._cont .gauge>div:nth-child(20) {
border-radius: 0 2px 2px 0
}
header .hd_t .inne .right .point_box {
display: flex;
background: none;
gap: 10px
}
header .hd_t .inne .right .point_box>div {
display: flex;
flex-flow: column;
background: none;
gap: 0
}
header .hd_t .inne .right .point_box>div>div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
height: 24px
}
header .hd_t .inne .right .point_box>div a {
width: 40px;
height: 24px;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(180deg, #F02A7E 0%, #FE0A5B 100%);
border-radius: 4px;
font: normal normal normal 12px Pretendard !important;
border: 0
}
header .hd_t .inne .right ._tooltip {
position: relative
}
header .hd_t .inne .right ._tooltip .tooltip {
position: absolute;
background: #1d1b2b;
border: 1px solid #f02a7e;
padding: 10px;
display: none;
z-index: 1;
width: 200px;
font-size: 13px;
top: calc(100% + 10px)
}
header .hd_t .inne .right ._tooltip .tooltip._on {
display: block
}
@media screen and (max-width: 960px) {
header .hd_t .inne ._m_cont {
display: flex !important
}
header .hd_t .inne .right ._pc_cont {
display: none
}
}
header .hd_b {
background: #1d1b2b;
width: 100%;
height: 64px
}
header .hd_b .inne {
justify-content: center
}
header .hd_b .inne nav {
display: flex;
justify-content: center;
gap: 24px;
align-items: center
}
header .hd_b .inne nav>a {
font-weight: 600;
font-style: normal;
font-size: 15px;
display: flex;
align-items: center
}
header .hd_b .inne nav>a:hover {
color: #f02a7e
}
header .hd_b .inne nav>a.nav_btn {
color: #f02a7e
}
header .hd_b .inne nav>a.nav_btn:hover {
filter: brightness(10)
}
header .hd_b .inne nav>a.nav_btn::before {
content: "";
background: url(../imgs/craze/ico.png);
width: 24px;
height: 24px
}
header .hd_b .inne nav>a.nav_btn._dep::before {
background-position: -408px -176px
}
header .hd_b .inne nav>a.nav_btn._wit::before {
background-position: -476px -176px
}
header .hd_b .inne nav>a.nav_btn._move::before {
background-position: -544px -176px
}
header .hd_b .inne nav>a.nav_btn._msg::before {
background-position: -748px -176px
}
header .hd_b .inne nav>a.nav_btn._point::before {
background-position: -680px -176px
}
header .hd_b .inne nav>a.nav_btn._event::before {
background-position: -612px -176px
}
header .hd_b .inne nav ._money {
min-width: 130px;
justify-content: space-between;
align-items: center;
display: flex;
padding: 6px;
border-radius: 50px;
background: #262437;
gap: 10px;
position: relative
}
header .hd_b .inne nav ._money>._money_box_div {
display: flex;
padding: 6px;
border-radius: 50px;
background: #262437;
gap: 10px;
position: relative;
align-items: center;
justify-content: space-between;
width: 100%;
height: 32px
}
header .hd_b .inne nav ._money>._money_box_div span {
font: normal normal 600 12px Montserrat !important;
margin-right: 8px
}
header .hd_b .inne nav ._money ._bg_pink {
background-color: #f8186a;
border-radius: 50%
}
header .hd_b .inne nav ._money span {
font: normal normal 600 12px Montserrat !important;
margin-right: 8px
}
header .hd_b .inne nav ._pc_cont {
position: relative;
background: #262437;
display: flex;
padding: 6px;
border-radius: 50px;
background: #262437;
gap: 10px;
position: relative
}
header .hd_b .inne nav .top_menu {
position: absolute;
top: calc(100% + 10px);
width: 200px;
right: 0;
display: flex;
flex-flow: column;
border: 1px solid #46445b;
padding: 20px;
background: #262437;
border-radius: 20px;
z-index: 1
}
header .hd_b .inne nav .top_menu._money_list {
padding-right: 12px;
max-height: 300px;
width: 280px
}
header .hd_b .inne nav .top_menu._money_list .scroll {
overflow-y: scroll;
padding-right: 7px
}
header .hd_b .inne nav .top_menu._money_list .scroll::-webkit-scrollbar {
background: none;
width: 2px
}
header .hd_b .inne nav .top_menu._money_list .scroll::-webkit-scrollbar-thumb {
background: #110f19;
width: 2px
}
header .hd_b .inne nav .top_menu._money_list .scroll::-webkit-scrollbar-track {
background: none
}
header .hd_b .inne nav .top_menu._money_list .money_li {
display: flex;
justify-content: space-between
}
header .hd_b .inne nav .top_menu._money_list .money_li span {
display: flex;
align-items: center
}
header .hd_b .inne nav .top_menu._money_list .money_li .money_box {
display: flex;
gap: 6px
}
header .hd_b .inne nav .top_menu a:not(.reset) {
height: 38px;
display: flex;
gap: 10px;
align-items: center;
border-bottom: 1px solid #46445b;
font: normal normal normal 14px/22px Pretendard;
letter-spacing: -0.7px
}
header .hd_b .inne nav .top_menu a:not(.reset)::before {
content: "";
background: url("../imgs/craze/ico.png");
width: 24px;
height: 24px
}
header .hd_b .inne nav .top_menu a:not(.reset)._mypage::before {
background-position: -306px -176px
}
header .hd_b .inne nav .top_menu a:not(.reset)._dep::before {
background-position: -374px -176px
}
header .hd_b .inne nav .top_menu a:not(.reset)._wit::before {
background-position: -442px -176px
}
header .hd_b .inne nav .top_menu a:not(.reset)._move::before {
background-position: -510px -176px
}
header .hd_b .inne nav .top_menu a:not(.reset)._event::before {
background-position: -578px -176px
}
header .hd_b .inne nav .top_menu a:not(.reset)._point::before {
background-position: -646px -176px
}
header .hd_b .inne nav .top_menu a:not(.reset)._msg::before {
background-position: -714px -176px
}
header .hd_b .inne nav .top_menu a:not(.reset):nth-last-child(1) {
color: #f02a7e
}
header .hd_b .inne nav .top_menu a:not(.reset):nth-last-child(1)::before {
background-position: -782px -176px
}
header .hd_b .inne nav .top_menu a:not(.reset):hover {
background: #262437;
color: #f02a7e
}
header .hd_b .inne nav .top_menu a:not(.reset):hover._mypage::before {
background-position: -340px -176px
}
header .hd_b .inne nav .top_menu a:not(.reset):hover._dep::before {
background-position: -408px -176px
}
header .hd_b .inne nav .top_menu a:not(.reset):hover._wit::before {
background-position: -476px -176px
}
header .hd_b .inne nav .top_menu a:not(.reset):hover._move::before {
background-position: -544px -176px
}
header .hd_b .inne nav .top_menu a:not(.reset):hover._event::before {
background-position: -612px -176px
}
header .hd_b .inne nav .top_menu a:not(.reset):hover._point::before {
background-position: -680px -176px
}
header .hd_b .inne nav .top_menu a:not(.reset):hover:nth-child(6)::before {
background-position: -748px -176px
}
header .hd_b .inne nav .top_menu a:not(.reset):nth-last-child(1) {
border-bottom: 0
}
@media screen and (max-width: 960px) {
header .hd_b {
display: none
}
}
@media screen and (max-width: 720px) {
header {
position: fixed;
z-index: 1
}
}
.side_menu {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
min-height: 100dvh;
overflow-y: auto;
z-index: 2
}
.side_menu ._bg {
background-color: rgba(0, 0, 0, .6);
position: fixed;
width: 100%;
height: 100%
}
.side_menu ._menu {
display: flex;
flex-flow: column;
z-index: 2;
background: #110f19;
width: 80%;
height: 100%;
position: relative
}
.side_menu ._menu .side_jackpot {
display: flex;
background: #1d1b2b;
padding: 10px;
gap: 4px
}
.side_menu ._menu .side_jackpot .top_jackpot {
flex-wrap: wrap;
display: flex;
width: 50%;
justify-content: center;
gap: 4px;
position: relative
}
.side_menu ._menu .side_jackpot .top_jackpot .image {
position: relative;
width: 70px;
height: 70px
}
.side_menu ._menu .side_jackpot .top_jackpot .image .icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.side_menu ._menu .side_jackpot .top_jackpot ._cont {
display: flex;
flex-flow: column;
justify-content: center;
gap: 6px;
width: calc(100% - 74px);
height: 60px
}
.side_menu ._menu .side_jackpot .top_jackpot ._cont>span {
font: normal normal bold 14px Montserrat
}
.side_menu ._menu .side_jackpot .top_jackpot ._cont .gauge {
display: grid;
grid-template-columns: repeat(10, 1fr);
gap: 1px
}
.side_menu ._menu .side_jackpot .top_jackpot ._cont .gauge._q>div {
border: 1px solid #7b1842
}
.side_menu ._menu .side_jackpot .top_jackpot ._cont .gauge._q>div._on {
background: linear-gradient(180deg, #FF4E99 0%, #FE0A5B 100%)
}
.side_menu ._menu .side_jackpot .top_jackpot ._cont .gauge._j>div {
border: 1px solid rgba(106, 255, 169, .5333333333)
}
.side_menu ._menu .side_jackpot .top_jackpot ._cont .gauge._j>div._on {
background: linear-gradient(180deg, #6AFFA9 0%, #00886D 100%)
}
.side_menu ._menu .side_jackpot .top_jackpot ._cont .gauge._j>div:nth-child(-n+5) {
border: 1px solid rgba(255, 17, 0, .5333333333)
}
.side_menu ._menu .side_jackpot .top_jackpot ._cont .gauge._j>div:nth-child(-n+5)._on {
background: linear-gradient(180deg, #FF6A6A 0%, #FF1100 100%)
}
.side_menu ._menu .side_jackpot .top_jackpot ._cont .gauge._j>div:nth-child(n+6):nth-child(-n+10) {
border: 1px solid rgba(255, 176, 106, .5333333333)
}
.side_menu ._menu .side_jackpot .top_jackpot ._cont .gauge._j>div:nth-child(n+6):nth-child(-n+10)._on {
background: linear-gradient(180deg, #FFB06A 0%, #FF4500 100%)
}
.side_menu ._menu .side_jackpot .top_jackpot ._cont .gauge._j>div:nth-child(n+11):nth-child(-n+15) {
border: 1px solid rgba(255, 176, 106, .5333333333)
}
.side_menu ._menu .side_jackpot .top_jackpot ._cont .gauge._j>div:nth-child(n+11):nth-child(-n+15)._on {
background: linear-gradient(180deg, #E2FF6A 0%, #FF6600 100%)
}
.side_menu ._menu .side_jackpot .top_jackpot ._cont .gauge>div {
width: 5px;
height: 14px
}
.side_menu ._menu .side_jackpot .top_jackpot ._cont .gauge>div:nth-child(1),
.side_menu ._menu .side_jackpot .top_jackpot ._cont .gauge>div:nth-child(11) {
border-radius: 2px 0 0 2px
}
.side_menu ._menu .side_jackpot .top_jackpot ._cont .gauge>div:nth-child(10),
.side_menu ._menu .side_jackpot .top_jackpot ._cont .gauge>div:nth-child(20) {
border-radius: 0 2px 2px 0
}
.side_menu ._menu .side_jackpot .top_jackpot .tooltip {
position: absolute;
background: #1d1b2b;
border: 1px solid #f02a7e;
padding: 10px;
display: none;
z-index: 1;
width: 200px;
font-size: 13px;
top: calc(100% + 10px);
left: 0;
height: unset !important
}
.side_menu ._menu .side_jackpot .top_jackpot .tooltip._right {
left: unset;
right: 0
}
.side_menu ._menu .side_jackpot .top_jackpot .tooltip._on {
display: flex
}
.side_menu ._menu .side_jackpot .top_jackpot .btn {
width: 100%
}
.side_menu ._menu .side_top {
border-radius: 6px;
padding: 10px;
background: #1d1b2b
}
.side_menu ._menu .side_top .logout {
display: flex;
justify-content: flex-end
}
.side_menu ._menu .side_top .logout ._logout {
color: #f02a7e;
display: flex;
align-items: center;
font-weight: bold
}
.side_menu ._menu .side_top .logout ._logout::before {
background: url(../imgs/craze/ico.png);
width: 24px;
height: 24px;
display: block;
background-position: -782px -176px;
content: ""
}
.side_menu ._menu .side_top>div {
display: flex;
flex-flow: column;
border-radius: 6px;
padding: 20px;
background: #161320
}
.side_menu ._menu .side_top>div .user_id {
font: normal normal 600 20px Montserrat;
color: #fff
}
.side_menu ._menu .side_top>div .info {
display: flex
}
.side_menu ._menu .side_top>div .info>div {
width: 50%;
display: flex;
flex-flow: column;
gap: 4px
}
.side_menu ._menu .side_top>div .info>div span {
font: normal normal normal 13px Pretendard;
letter-spacing: -0.7px;
color: #fff;
height: 32px;
display: flex;
align-items: center
}
.side_menu ._menu .side_top>div .info>div .exchange {
background: linear-gradient(180deg, #F02A7E 0%, #FE0A5B 100%);
border-radius: 6px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #fff
}
.side_menu ._menu .side_top>div .info>div .exchange:hover {
background: linear-gradient(180deg, #FF539C 0%, #FF2B72 100%)
}
.side_menu ._menu .side_top>div a {
background: linear-gradient(180deg, #F02A7E 0%, #FE0A5B 100%);
border-radius: 6px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
height: 44px;
text-align: center
}
.side_menu ._menu .side_top>div a:hover {
background: linear-gradient(180deg, #FF539C 0%, #FF2B72 100%)
}
.side_menu ._menu .nav {
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 20px
}
.side_menu ._menu .nav a {
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 10px
}
.side_menu ._menu .nav a:nth-child(1) {
border-bottom: 2px solid #f02a7e;
color: #f02a7e
}
.side_menu ._menu .nav a span {
font: normal normal normal 12px Pretendard;
letter-spacing: -0.7px
}
.side_menu ._menu .nav a img {
max-width: 60px;
width: 100%
}
.side_menu ._menu .nav2 {
display: flex;
gap: 6px;
flex-flow: column;
background: #110f19
}
.side_menu ._menu .nav2 a {
width: 100%;
height: 60px;
display: flex;
align-items: center;
background: #1d1b2b;
padding: 0 20px;
gap: 10px;
position: relative;
border-radius: 6px;
font-size: 14px
}
.side_menu ._menu .nav2 a::after {
content: "";
background: url("../imgs/craze/ico.png");
width: 24px;
height: 24px;
background-position: 0px -176px;
position: absolute;
right: 20px
}
.side_menu ._menu .nav2 a:hover {
background: #262437;
color: #f02a7e
}
.side_menu .game_list {
display: flex;
flex-flow: column;
padding: 20px
}
.side_menu .game_list a {
height: 44px;
display: flex;
align-items: center;
border-bottom: 1px solid #46445b;
font: normal normal normal 14px Pretendard;
letter-spacing: -0.7px
}
.side_menu ._right {
display: flex;
flex-flow: column;
gap: 10px;
width: 80%;
background: #161320;
padding: 10px;
margin-left: auto
}
.side_menu ._right ._top {
width: 100%;
height: 70px;
display: flex;
justify-content: flex-end;
align-items: center;
padding: 0 24px;
border-bottom: 1px solid #161320;
z-index: 1
}
.side_menu ._right .side_top {
border-radius: 6px;
padding: 10px;
background: #1d1b2b;
z-index: 1
}
.side_menu ._right .side_top>div {
display: flex;
flex-flow: column;
border-radius: 6px;
padding: 20px;
background: #161320
}
.side_menu ._right .side_top>div .user_id {
font: normal normal 600 20px Montserrat;
color: #fff
}
.side_menu ._right .side_top>div .info {
display: flex
}
.side_menu ._right .side_top>div .info>div {
width: 50%;
display: flex;
flex-flow: column;
gap: 4px
}
.side_menu ._right .side_top>div .info>div span {
font: normal normal normal 13px Pretendard;
letter-spacing: -0.7px;
color: #fff;
height: 32px;
display: flex;
align-items: center
}
.side_menu ._right .side_top>div .info>div .exchange {
background: linear-gradient(180deg, #F02A7E 0%, #FE0A5B 100%);
border-radius: 6px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #fff
}
.side_menu ._right .side_top>div .info>div .exchange:hover {
background: linear-gradient(180deg, #FF539C 0%, #FF2B72 100%)
}
.side_menu ._right .side_top>div a {
background: linear-gradient(180deg, #F02A7E 0%, #FE0A5B 100%);
border-radius: 6px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
height: 44px
}
.side_menu ._right .side_top>div a:hover {
background: linear-gradient(180deg, #FF539C 0%, #FF2B72 100%)
}
.side_menu ._right .nav {
display: flex;
gap: 6px;
flex-flow: column
}
.side_menu ._right .nav a {
width: 100%;
height: 60px;
display: flex;
align-items: center;
background: #1d1b2b;
padding: 0 20px;
gap: 10px;
position: relative;
border-radius: 6px
}
.side_menu ._right .nav a._msg::before {
background: url("../imgs/craze/ico.png");
background-position: -714px -176px;
width: 24px;
height: 24px;
content: ""
}
.side_menu ._right .nav a:nth-last-child(1) {
color: #f02a7e
}
.side_menu ._right .nav a:nth-last-child(1)::before {
background: url("../imgs/craze/ico.png");
width: 24px;
height: 24px;
background-position: -782px -176px;
content: ""
}
.side_menu ._right .nav a::after {
content: "";
background: url("../imgs/craze/ico.png");
width: 24px;
height: 24px;
background-position: 0px -176px;
position: absolute;
right: 20px
}
.side_menu ._right .nav a:hover {
background: #262437;
color: #f02a7e
}
.side_menu ._right .nav a:hover._mypage::before {
background-position: -340px -176px
}
.side_menu ._right .nav a:hover._dep::before {
background-position: -408px -176px
}
.side_menu ._right .nav a:hover._wit::before {
background-position: -476px -176px
}
.side_menu ._right .nav a:hover._move::before {
background-position: -544px -176px
}
.side_menu ._right .nav a:hover._event::before {
background-position: -612px -176px
}
.side_menu ._right .nav a:hover._point::before {
background-position: -680px -176px
}
.side_menu ._right .nav a:hover:nth-child(6)::before {
background-position: -748px -176px
}
@media screen and (max-width: 960px) {
section {
padding-top: 100px
}
}
.conts {
display: flex;
flex-flow: column
}
.conts>div {
order: 3
}
.conts>div.main_slide {
order: 1
}
.conts>div.main_nav {
order: 2
}
.main_slide {
width: 100%;
display: flex
}
.main_slide._m_cont {
display: none
}
@media screen and (max-width: 750px) {
.main_slide._pc_cont {
display: none
}
.main_slide._m_cont {
display: block
}
}
.main_slide._slider .slick-prev,
.main_slide._slider .slick-next {
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px
}
.main_slide._slider .slick-dots {
bottom: 5%;
top: unset;
left: 50%
}
.main_slide._slider .slick-dots li button:before {
background: linear-gradient(180deg, #F02A7E 0%, #FE0A5B 100%)
}
.main_cont.pop {
display: flex;
gap: 20px;
width: 100%;
max-width: 1600px;
margin: 20px auto 0;
padding: 0 20px
}
@media screen and (max-width: 720px) {
.main_cont.pop {
flex-flow: column
}
}
.main_cont.pop .pop_list {
display: flex;
flex-flow: column;
gap: 10px;
max-width: calc(33% - 10px);
width: 100%
}
.main_cont.pop .pop_list ul {
width: 100%;
border: 0;
max-width: 100%
}
.main_cont.pop .pop_list ul li {
border-bottom: 1px solid #46445b;
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
word-break: break-all;
font: normal normal normal 14px Montserrat;
padding: 8px 0;
height: 60px
}
.main_cont.pop .pop_list ul li a {
width: 100%;
height: 100%;
text-align: left;
display: flex;
gap: 4px
}
@media screen and (max-width: 720px) {
.main_cont.pop .pop_list ul li a {
height: unset
}
}
.main_cont.pop .pop_list ul li a>span:nth-child(1) {
width: 30px;
text-align: center;
display: flex;
align-items: center;
justify-content: center
}
@media screen and (max-width: 720px) {
.main_cont.pop .pop_list ul li a>span:nth-child(1) {
display: none
}
}
.main_cont.pop .pop_list ul li a>span:nth-child(2) {
max-width: calc(100% - 265px);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
word-break: break-all;
text-align: left;
padding: 13px 0
}
@media screen and (max-width: 720px) {
.main_cont.pop .pop_list ul li a>span:nth-child(2) {
max-width: calc(100% - 65px);
padding: 0
}
}
.main_cont.pop .pop_list ul li a>span._cmt {
width: 24px;
display: flex;
align-items: center
}
.main_cont.pop .pop_list ul li a .like {
width: 25px;
display: flex;
justify-content: center;
align-items: center;
gap: 4px;
margin-left: auto;
margin-right: 5px
}
.main_cont.pop .pop_list ul li a .name {
display: flex;
align-items: center;
justify-content: flex-end;
margin-right: 5px;
gap: 4px
}
@media screen and (max-width: 720px) {
.main_cont.pop .pop_list ul li a .name {
display: none
}
}
.main_cont.pop .pop_list ul li a .thumbnail {
width: 54px;
height: 54px;
margin-right: 10px;
float: left
}
@media screen and (max-width: 720px) {
.main_cont.pop .pop_list ul li a.m_name {
display: flex
}
.main_cont.pop .pop_list ul li a.m_name>.name {
display: flex
}
}
.main_cont.pop .pop_list ul li._null {
height: 250px;
vertical-align: middle;
text-align: center
}
@media screen and (max-width: 720px) {
.main_cont.pop .pop_list {
max-width: 100%
}
.main_cont.pop .pop_list ul {
height: 60px;
overflow: hidden
}
}
.main_cont .main_game {
margin: 60px auto 0;
max-width: 1600px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px
}
.main_cont .main_game a {
position: relative;
padding: 0 60px;
background: #1d1b2b;
border-radius: 10px;
aspect-ratio: 385/106;
display: flex;
align-items: flex-end;
font-family: "Black Han Sans", sans-serif !important;
align-items: center
}
.main_cont .main_game a:hover span {
color: #f02a7e
}
.main_cont .main_game a:hover img {
max-width: 185px
}
.main_cont .main_game a span {
font-weight: bold;
font-style: normal;
font-size: 36px
}
.main_cont .main_game a span:nth-last-child(1) {
display: none
}
.main_cont .main_game a img {
transition: .3s;
position: absolute;
right: 20px;
top: -40px;
aspect-ratio: 145/126;
max-width: 145px
}
.main_cont .main_game.main_game2 {
display: none
}
.main_cont .main_game.main_game2 img {
filter: brightness(1.6)
}
@media screen and (max-width: 1600px) {
.main_cont .main_game {
padding: 0 20px
}
}
@media screen and (max-width: 960px) {
.main_cont .main_game {
margin-top: -24px;
bottom: 0;
width: 100%;
gap: 0;
padding: 0;
background: #1d1b2b;
z-index: 1
}
.main_cont .main_game.main_game2 {
position: fixed;
display: grid
}
.main_cont .main_game a {
aspect-ratio: unset;
align-items: center;
justify-content: center;
flex-flow: column;
gap: 5px;
padding: 10px 0
}
.main_cont .main_game a img {
position: unset;
aspect-ratio: unset;
max-width: 40px !important;
width: 50%
}
.main_cont .main_game a span:nth-child(1) {
display: none
}
.main_cont .main_game a span:nth-child(3) {
display: block;
font-size: 16px
}
}
.main_cont .jackpot {
max-width: 1600px;
aspect-ratio: 1600/252;
margin: 40px auto 0;
background: url("../imgs/craze/jackpot.png");
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
padding: 20px;
background-repeat: no-repeat
}
.main_cont .jackpot>div {
display: flex;
flex-flow: column;
align-items: center;
justify-content: center
}
.main_cont .jackpot>div._info {
display: flex;
flex-flow: column
}
.main_cont .jackpot>div._info span {
font: normal normal normal 14px Pretendard !important;
letter-spacing: -0.7px;
color: #fff;
text-align: center
}
.main_cont .jackpot>div._info .btn {
margin-top: 10px;
width: 100%;
max-width: 200px;
height: 36px;
font: normal normal normal 14px Pretendard !important;
letter-spacing: -0.7px
}
.main_cont .jackpot>div._win {
background: linear-gradient(90deg, #F02A7E 0%, #312C54 100%);
border-radius: 10px
}
.main_cont .jackpot>div._win>div:nth-child(1) {
font: normal normal bold 14px Montserrat !important;
display: flex;
align-items: flex-end
}
.main_cont .jackpot>div._win>div:nth-child(2) {
font: normal normal 800 40px Montserrat !important
}
.main_cont .jackpot>div._cont {
display: flex;
border-radius: 10px;
background: #110f19;
width: 100%;
overflow: hidden;
flex-flow: unset
}
.main_cont .jackpot>div._cont .slick-arrow {
top: 33%
}
@media screen and (min-width: 760px) {
.main_cont .jackpot>div._cont .slick-arrow {
top: 50%;
transform: translateY(-50%)
}
.main_cont .jackpot>div._cont .slick-arrow.slick-prev {
left: 10px
}
.main_cont .jackpot>div._cont .slick-arrow.slick-next {
right: 10px
}
}
.main_cont .jackpot>div._cont .cont {
gap: 10px;
width: 100%;
display: flex !important;
flex-flow: column;
padding: 20px 40px
}
.main_cont .jackpot>div._cont .cont ._tit {
font-size: 20px
}
.main_cont .jackpot>div._cont .cont .jack_cont {
width: 100%;
display: flex;
gap: 10px
}
@media screen and (max-width: 760px) {
.main_cont .jackpot>div._cont .cont .jack_cont {
flex-flow: column;
align-items: center
}
}
.main_cont .jackpot>div._cont .cont .jack_cont ._img {
max-width: 150px;
width: 40%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
cursor: pointer
}
.main_cont .jackpot>div._cont .cont .jack_cont ._img img {
border-radius: 50%
}
.main_cont .jackpot>div._cont .cont .jack_cont ._img>div {
display: none
}
.main_cont .jackpot>div._cont .cont .jack_cont ._img:hover>div {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .6);
gap: 10px
}
.main_cont .jackpot>div._cont .cont .jack_cont ._img:hover>div i {
font-size: 36px
}
.main_cont .jackpot>div._cont .cont .jack_cont .con {
max-width: calc(100% - 120px);
display: flex;
flex-flow: column;
width: 100%
}
@media screen and (max-width: 760px) {
.main_cont .jackpot>div._cont .cont .jack_cont .con {
max-width: unset
}
}
.main_cont .jackpot>div._cont .cont .jack_cont .con>div {
display: flex;
width: 100%
}
.main_cont .jackpot>div._cont .cont .jack_cont .con>div._hr {
height: 1px;
width: 100%;
background-color: #46445b;
margin: 10px 0 5px
}
.main_cont .jackpot>div._cont .cont .jack_cont .con>div>div {
display: flex;
flex-flow: column;
width: 100%;
gap: 6px;
justify-content: center
}
.main_cont .jackpot>div._cont .cont .jack_cont .con>div>div.user {
flex-flow: unset;
align-items: center;
justify-content: flex-start
}
@media screen and (max-width: 720px) {
.main_cont .jackpot>div._cont .cont .jack_cont .con>div>div.user {
max-width: 40%
}
}
.main_cont .jackpot>div._cont .cont .jack_cont .con>div>div.user ._img {
width: 48px;
height: 48px;
background: url(../imgs/craze/ico.png);
display: block;
background-position: -68px -236px;
border-radius: 50%
}
.main_cont .jackpot>div._cont .cont .jack_cont .con>div>div.user ._text {
width: calc(100% - 70px);
display: flex;
flex-flow: column
}
.main_cont .jackpot>div._cont .cont .jack_cont .con>div>div span {
font: normal normal normal 10px Montserrat;
color: #999;
font-weight: 500
}
.main_cont .jackpot>div._cont .cont .jack_cont .con>div>div span:nth-child(2) {
color: #fff
}
.main_cont .jackpot>div._cont .cont .jack_cont .con>div>div span._money {
font: normal normal 800 10px Montserrat
}
@media screen and (max-width: 702px) {
.main_cont .jackpot {
background: url("../imgs/craze/m_jackpot.png") top center/cover;
aspect-ratio: unset;
display: flex;
flex-flow: column;
background-size: contain;
background-repeat: no-repeat;
background-color: #1d1b2b;
padding: 0px 10px 20px 10px;
margin-top: 0
}
.main_cont .jackpot>div {
height: 33%
}
}
.main_cont .games {
display: flex;
flex-flow: column;
max-width: 1600px;
margin: 0 auto;
padding: 0 20px
}
.main_cont .games .game_tit {
margin-top: 40px;
margin-bottom: 20px;
letter-spacing: -1px;
display: flex;
align-items: center;
justify-content: space-between
}
.main_cont .games .game_tit h2 {
font: normal normal 600 20px Pretendard
}
.main_cont .games .game_tit a {
color: #707070;
display: flex
}
.main_cont .games .game_tit a::after {
content: "";
background: url(../imgs/craze/ico.png);
display: block;
width: 24px;
height: 24px;
background-position: -34px -176px
}
.main_cont .games .main_games {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 9px
}
.main_cont .games .main_games._casino {
grid-template-columns: repeat(5, 1fr)
}
@media screen and (max-width: 1200px) {
.main_cont .games .main_games._casino {
grid-template-columns: repeat(4, 1fr)
}
}
@media screen and (max-width: 720px) {
.main_cont .games .main_games._casino {
grid-template-columns: repeat(3, 1fr)
}
}
@media screen and (max-width: 480px) {
.main_cont .games .main_games._casino {
grid-template-columns: repeat(2, 1fr)
}
}
@media screen and (max-width: 1200px) {
.main_cont .games .main_games {
grid-template-columns: repeat(4, 1fr)
}
}
@media screen and (max-width: 720px) {
.main_cont .games .main_games {
grid-template-columns: repeat(3, 1fr)
}
}
@media screen and (max-width: 480px) {
.main_cont .games .main_games {
grid-template-columns: repeat(2, 1fr)
}
}
.main_cont .games .main_games a {
border-radius: 10px;
overflow: hidden;
position: relative
}
.main_cont .games .main_games a ._hover {
display: none
}
.main_cont .games .main_games a:hover ._hover {
position: absolute;
top: 0;
width: 100%;
height: 100%;
display: flex;
flex-flow: column;
gap: 10px;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, .6);
border-radius: 10px;
overflow: hidden
}
.main_cont .games .main_games a:hover ._hover img {
width: 50%
}
.main_cont .games .main_games a:hover ._hover>div {
padding: 4px;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(180deg, #F02A7E 0%, #FE0A5B 100%);
border-radius: 4px;
font: normal normal normal 12px Pretendard !important
}
@media screen and (max-width: 1200px) {
.main_cont .games._main .main_games a:nth-child(n+5) {
display: none
}
}
@media screen and (max-width: 720px) {
.main_cont .games._main .main_games a:nth-child(n+4) {
display: none
}
}
@media screen and (max-width: 480px) {
.main_cont .games._main .main_games a:nth-child(n+3) {
display: none
}
}
.main_cont .board_box {
margin: 40px auto 0;
width: 100%;
max-width: 1600px;
padding: 0 20px;
display: flex;
gap: 20px
}
@media screen and (max-width: 830px) {
.main_cont .board_box {
flex-flow: column
}
}
.main_cont .board_box .board {
width: 33.3333333333%;
background: #1d1b2b;
border-radius: 10px;
padding: 20px;
display: flex;
flex-flow: column;
gap: 20px
}
@media screen and (max-width: 830px) {
.main_cont .board_box .board {
width: 100%;
padding: 10px
}
}
.main_cont .board_box .board ._tit {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center
}
.main_cont .board_box .board ._tit span {
font: normal normal 600 20px Pretendard
}
.main_cont .board_box .board ._tit a {
color: #707070;
display: flex
}
.main_cont .board_box .board ._tit a::after {
content: "";
background: url(../imgs/craze/ico.png);
display: block;
width: 24px;
height: 24px;
background-position: -34px -176px
}
.main_cont .board_box .board ._cont {
height: 180px;
overflow: hidden
}
.main_cont .board_box .board ._cont._null {
display: flex;
justify-content: center;
align-items: center
}
.main_cont .board_box .board ._cont a {
width: 100%;
display: flex;
justify-content: space-between;
height: 36px;
align-items: center
}
.main_cont .board_box .board ._cont a>span {
font: normal normal normal 14px Pretendard
}
.main_cont .board_box .board ._cont a>span._tit {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: block;
width: calc(100% - 80px)
}
.main_cont .board_box .board ._cont li {
display: flex;
justify-content: space-between;
height: 36px;
align-items: center
}
.main_cont .board_box .board ._cont li>span {
display: flex;
align-items: center;
font: normal normal normal 14px Pretendard;
letter-spacing: -0.7px;
width: 25%
}
@media screen and (max-width: 720px) {
.main_cont .board_box .board ._cont li>span {
font: normal normal normal 12px Pretendard
}
.main_cont .board_box .board ._cont li>span._game {
width: calc(100% - 200px)
}
}
.main_cont .board_box .board ._cont li>span._date {
justify-content: flex-end
}
@media screen and (max-width: 720px) {
.main_cont .board_box .board ._cont li>span._date {
max-width: 55px
}
}
.main_cont .board_box .board ._cont li>span._money {
justify-content: flex-end;
max-width: 110px
}
@media screen and (max-width: 720px) {
.main_cont .board_box .board ._cont li>span._money {
max-width: 55px
}
}
.main_cont .board_box .board ._cont li>span._id {
justify-content: flex-start
}
@media screen and (max-width: 720px) {
.main_cont .board_box .board ._cont li>span._id {
max-width: 95px;
width: 95px
}
}
footer .inne {
max-width: 1600px;
margin: 80px auto 0
}
footer .inne .ft_t {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
border-bottom: 1px solid #707070;
gap: 20px;
padding-bottom: 40px
}
footer .inne .ft_t .logo {
max-width: 260px
}
footer .inne .ft_t p {
color: #707070;
font: normal normal normal 12px Montserrat !important
}
footer .inne .ft_t a {
border: 1px solid #707070;
width: 200px;
height: 36px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 4px
}
footer .inne .ft_t a span {
display: flex;
color: #707070;
align-items: center;
font: normal normal normal 14px Montserrat !important
}
footer .inne .ft_t a span::before {
content: "";
width: 24px;
height: 24px;
display: block;
background: url("../imgs/craze/ico.png");
background-position: -136px -176px
}
footer .inne .ft_t a:hover {
border: 0;
background: linear-gradient(180deg, #F02A7E 0%, #FE0A5B 100%)
}
footer .inne .ft_t a:hover span {
color: #fff
}
footer .inne .ft_t a:hover span::before {
background-position: -170px -176px
}
footer .inne .ft_b {
padding: 40px 0;
display: flex;
flex-flow: column;
gap: 40px;
text-align: center
}
footer .inne .ft_b .ft_logo {
display: grid;
grid-template-columns: repeat(10, 1fr)
}
@media screen and (max-width: 720px) {
footer .inne .ft_b .ft_logo {
grid-template-columns: repeat(8, 1fr)
}
}
@media screen and (max-width: 480px) {
footer .inne .ft_b .ft_logo {
grid-template-columns: repeat(5, 1fr)
}
}
footer .inne .ft_b span {
max-width: 970px;
margin: 0 auto;
font: normal normal normal 12px/20px Montserrat !important;
color: #707070
}
.pagin {
display: flex;
width: 100%;
justify-content: center;
gap: 6px;
margin: 20px 0
}
.pagin ._items {
display: flex;
justify-content: center;
gap: 6px
}
.pagin ._items a {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
border-radius: 6px;
font: normal normal normal 14px Pretendard
}
.pagin ._items a._on,
.pagin ._items a:hover {
background-color: #f02a7e
}
.sub_title {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
flex-flow: column;
padding: 80px 0;
gap: 20px
}
@media screen and (max-width: 760px) {
.sub_title {
padding: 40px 0
}
.sub_title img {
display: none
}
}
.sub .game_top {
width: 100%;
height: 96px;
background: #1d1b2b;
margin: 10px 0;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin-top: -25px
}
.sub .game_top>a {
width: 94px;
height: 80px;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
gap: 6px
}
.sub .game_top>a:hover,
.sub .game_top>a._on {
background: #262437
}
.sub .game_top>a img {
width: 40px
}
.sub .game_top>a span {
font: normal normal normal 12px Pretendard;
letter-spacing: -0.6px
}
.sub .search {
max-width: 1600px;
width: 100%;
margin: 0 auto;
display: flex;
gap: 10px;
margin-bottom: 40px
}
@media screen and (max-width: 1640px) {
.sub .search {
padding: 0 20px
}
}
.sub .search .select {
position: relative;
width: 100%
}
.sub .search .select ._list_btn {
width: 100%;
height: 40px;
display: flex;
align-items: center;
border: 1px solid #46445b;
border-radius: 6px
}
.sub .search .select ._list_btn input {
width: 100%;
height: 100%;
padding: 0 10px;
background: none;
border: 0
}
.sub .search .select .option {
position: absolute;
top: calc(100% + 6px);
display: none;
flex-flow: column;
gap: 6px;
border: 1px solid #46445b;
max-height: 200px;
overflow-y: scroll;
background-color: #110f19;
border-radius: 6px;
width: 100%;
padding: 6px
}
.sub .search .select .option._on {
display: flex;
z-index: 1
}
.sub .search select {
width: 100%;
height: 40px;
border: 1px solid #46445b;
border-radius: 6px;
background: none;
padding: 0 10px
}
.sub .search select option {
background: #000;
padding: 0 10px
}
.sub .search .search_box {
width: 100%;
position: relative
}
.sub .search .search_box::before {
content: "";
width: 24px;
height: 24px;
background: url("../imgs/craze/ico.png");
background-position: -272px -176px;
display: block;
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%)
}
.sub .search .search_box input {
border: 1px solid #46445b;
background: none;
width: 100%;
height: 100%;
border-radius: 6px;
padding: 0 10px 0 34px
}
.sub .search .search_box input::-moz-placeholder {
color: #fff
}
.sub .search .search_box input::placeholder {
color: #fff
}
.sub._spin {
max-width: 1600px;
margin: 0 auto
}
.sub._spin .content_box {
display: flex;
justify-content: center;
width: 100%;
height: 700px
}
@media screen and (max-width: 1599px) {
.sub._spin .content_box {
display: block;
height: 525px;
margin-bottom: 250px
}
}
.sub._spin .content_box .spin_wrap:not(._m_cont) {
transform: unset;
position: relative;
width: 1200px;
height: 700px;
background-repeat: no-repeat
}
@media screen and (max-width: 1599px) {
.sub._spin .content_box .spin_wrap:not(._m_cont) {
position: relative;
transform: scale(0.75);
transform: scale(0.75) translateX(-50%);
transform-origin: top left;
left: 50%
}
}
@media screen and (max-width: 720px) {
.sub._spin .content_box .spin_wrap:not(._m_cont) {
display: none
}
}
.sub._spin .content_box .exchange_btn {
position: absolute;
top: 100%;
width: 100%;
height: 40px;
display: none;
align-items: center;
justify-content: center;
gap: 10px;
right: unset
}
@media screen and (max-width: 960px) {
.sub._spin .content_box .exchange_btn._m_cont {
display: flex
}
}
.sub._spin .content_box .exchange_btn select {
background: #000;
border: 1px solid #ec297b;
color: #fff;
height: 40px;
width: 150px;
margin: 0
}
.sub._spin .content_box .exchange_btn a {
background: #000;
border: 1px solid #ec297b;
width: 100px;
height: 40px;
color: #fff;
display: flex !important;
justify-content: center;
align-items: center;
margin: 0
}
.sub._spin .content_box .list_box {
position: unset;
width: 400px
}
@media screen and (max-width: 1599px) {
.sub._spin .content_box .list_box {
display: none
}
}
@media screen and (max-width: 960px) {
.sub._spin .content_box .exchange_btns._pc_cont {
display: none
}
}
.sub._jackpot {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
padding: 0 20px;
max-width: 1600px;
margin: 0 auto
}
@media screen and (max-width: 760px) {
.sub._jackpot {
display: flex;
flex-flow: column
}
}
.sub._jackpot ._jackpot_list {
display: flex;
flex-flow: column
}
.sub._jackpot ._jackpot_list ._tit {
font: normal normal 600 20px Pretendard;
letter-spacing: -1px;
color: #fff;
margin-bottom: 20px
}
.sub._jackpot ._jackpot_list ._list_cont {
display: flex;
flex-flow: column
}
.sub._jackpot ._jackpot_list ._cont {
display: flex !important;
padding: 10px;
border-radius: 10px;
gap: 20px;
justify-content: center;
align-items: center
}
@media screen and (max-width: 760px) {
.sub._jackpot ._jackpot_list ._cont {
flex-flow: column
}
}
.sub._jackpot ._jackpot_list ._cont:nth-child(2n) {
background: #1d1b2b
}
.sub._jackpot ._jackpot_list ._cont ._img {
max-width: 150px;
width: 40%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
cursor: pointer
}
.sub._jackpot ._jackpot_list ._cont ._img>div {
display: none
}
.sub._jackpot ._jackpot_list ._cont ._img:hover>div {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .6);
gap: 10px
}
.sub._jackpot ._jackpot_list ._cont ._img:hover>div i {
font-size: 36px
}
.sub._jackpot ._jackpot_list ._cont .con {
max-width: calc(100% - 120px);
display: flex;
flex-flow: column;
width: 100%
}
@media screen and (max-width: 760px) {
.sub._jackpot ._jackpot_list ._cont .con {
max-width: unset
}
}
.sub._jackpot ._jackpot_list ._cont .con>div {
display: flex;
width: 100%
}
.sub._jackpot ._jackpot_list ._cont .con>div._hr {
height: 1px;
width: 100%;
background-color: #46445b;
margin: 10px 0 5px
}
.sub._jackpot ._jackpot_list ._cont .con>div>div {
display: flex;
flex-flow: column;
width: 100%;
gap: 6px;
justify-content: center
}
.sub._jackpot ._jackpot_list ._cont .con>div>div.user {
flex-flow: unset;
align-items: center;
justify-content: flex-start
}
.sub._jackpot ._jackpot_list ._cont .con>div>div.user ._img {
width: 48px;
height: 48px;
background: url(../imgs/craze/ico.png);
display: block;
background-position: -68px -236px;
border-radius: 50%
}
.sub._jackpot ._jackpot_list ._cont .con>div>div.user ._text {
width: calc(100% - 70px);
display: flex;
flex-flow: column
}
.sub._jackpot ._jackpot_list ._cont .con>div>div span {
font: normal normal normal 12px Montserrat;
color: #999;
font-weight: 500
}
.sub._jackpot ._jackpot_list ._cont .con>div>div span:nth-child(2) {
color: #fff
}
.sub._jackpot ._jackpot_list ._cont .con>div>div span._money {
color: #fff;
font: normal normal 800 12px Montserrat
}
@media screen and (max-width: 720px) {
.m_spin_wrap._m_cont {
display: block
}
.spin_wrap._pc_cont {
display: none
}
.m_spin_wrap._m_cont {
position: relative;
margin-bottom: 100px;
width: 100%
}
.m_spin_wrap._m_cont>._spin_wrap_vw {
position: relative;
width: 100%;
height: 700px;
overflow: hidden
}
.m_spin_wrap._m_cont>._spin_wrap_vw>._wrap_vw {
position: relative;
width: 464px;
height: 700px;
background-image: url("../imgs/craze/m_bg.png?_=3");
background-repeat: no-repeat;
transform-origin: 0 0;
background-position: top center
}
.m_spin_wrap._m_cont ._cnt {
position: absolute;
top: 335px;
left: 28px;
padding-top: 9px;
width: 412px;
height: 35px;
color: #8aff00;
text-align: center;
font-size: 15px;
font-weight: bold;
background-image: url("../imgs/ev_spin/remaining.png");
background-repeat: no-repeat
}
.m_spin_wrap._m_cont ._spin_box {
position: absolute;
top: 404px;
left: 52px
}
.m_spin_wrap._m_cont ._spin_box ._it {
position: absolute;
top: 0;
left: 0;
width: 106px;
height: 143px
}
.m_spin_wrap._m_cont ._spin_box ._it._it2 {
left: 125px;
width: 114px
}
.m_spin_wrap._m_cont ._spin_box ._it._it3 {
left: 255px
}
.m_spin_wrap._m_cont ._spin_box ._it ._c {
position: relative;
width: 106px;
height: 143px;
background-repeat: no-repeat;
background-position: center center
}
.m_spin_wrap._m_cont ._spin_box ._it ._c._c53 {
background-image: url("../imgs/ev_spin/money_53.png?_=2")
}
.m_spin_wrap._m_cont ._spin_box ._it ._c._c14 {
background-image: url("../imgs/ev_spin/money_14.png?_=2")
}
.m_spin_wrap._m_cont ._spin_box ._it ._c._c24 {
background-image: url("../imgs/ev_spin/money_24.png?_=2")
}
.m_spin_wrap._m_cont ._spin_box ._it ._c._c34 {
background-image: url("../imgs/ev_spin/money_34.png?_=2")
}
.m_spin_wrap._m_cont ._spin_box ._it ._c._c44 {
background-image: url("../imgs/ev_spin/money_44.png?_=2")
}
.m_spin_wrap._m_cont ._spin_box ._it ._c._c54 {
background-image: url("../imgs/ev_spin/money_54.png?_=2")
}
.m_spin_wrap._m_cont ._spin_box ._it ._c._c15 {
background-image: url("../imgs/ev_spin/money_15.png?_=2")
}
.m_spin_wrap._m_cont ._spin_box ._it ._c._c25 {
background-image: url("../imgs/ev_spin/money_25.png?_=2")
}
.m_spin_wrap._m_cont ._spin_box ._it._it2 ._c {
width: 120px
}
.m_spin_wrap._m_cont a {
display: block;
background-repeat: no-repeat
}
.m_spin_wrap._m_cont a._btn_start {
position: absolute;
top: 285px;
left: 851px;
width: 66px;
height: 163px;
background-image: url("../imgs/ev_spin/btn_3.png")
}
.m_spin_wrap._m_cont a._btn_start._on {
top: 477px;
left: 883px;
transform: rotate(160deg)
}
.m_spin_wrap._m_cont a._btn_auto {
position: absolute;
top: 589px;
left: 384px;
width: 204px;
height: 71px;
background-image: url("../imgs/ev_spin/btn_1.png")
}
.m_spin_wrap._m_cont a._btn_stop {
position: absolute;
top: 589px;
left: 608px;
width: 204px;
height: 71px;
background-image: url("../imgs/ev_spin/btn_2.png")
}
.m_spin_wrap._m_cont ._msg_not_cnt {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .7);
text-align: center
}
.m_spin_wrap._m_cont ._msg_not_cnt ._msg {
position: absolute;
top: 160px;
left: 50%;
margin-left: -285px;
padding-top: 50px;
width: 570.66px;
height: 120px;
font-size: 25px;
font-weight: bold;
background-image: url("../imgs/ev_spin/popup_1.png");
background-repeat: no-repeat;
background-size: cover;
transform: scale(0.8)
}
.m_spin_wrap._m_cont ._msg_not_cnt ._msg a._btn_close {
position: absolute;
top: 0;
right: 0;
width: 50.75px;
height: 56px;
background-image: url("../imgs/ev_spin/esc.png");
background-repeat: no-repeat;
background-size: cover
}
.m_spin_wrap._m_cont ._msg_win_lose {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .7);
text-align: center
}
.m_spin_wrap._m_cont ._msg_win_lose ul {
margin: 0;
padding: 0;
transform: scale(0.6)
}
.m_spin_wrap._m_cont ._msg_win_lose ul li {
position: relative;
margin: 0;
padding: 0;
width: 464px;
text-align: center
}
.m_spin_wrap._m_cont ._msg_win_lose ul li ._win {
display: inline-block;
margin-top: 0;
margin-left: -164px;
width: 796px;
height: 266px;
background-image: url("../imgs/ev_spin/win.png");
background-repeat: no-repeat
}
.m_spin_wrap._m_cont ._msg_win_lose ul li ._win_money {
display: inline-block;
margin-top: 20px;
margin-left: -50px;
padding-top: 41px;
width: 570px;
height: 138.56px;
font-size: 27px;
font-weight: bold;
background-image: url("../imgs/ev_spin/popup_2.png");
background-repeat: no-repeat;
background-size: cover;
text-shadow: 0px 3px 4px rgba(0, 0, 0, .6)
}
.m_spin_wrap._m_cont ._msg_win_lose ul li ._win_money span {
color: #ffc442
}
.m_spin_wrap._m_cont ._msg_win_lose ul li a._btn_ok {
display: inline-block;
margin-top: 20px;
padding-top: 24px;
width: 204px;
height: 71px;
font-size: 26px;
font-weight: bold;
background-image: url("../imgs/ev_spin/btn_4.png");
background-size: cover
}
.m_spin_wrap._m_cont ul._btns {
position: absolute;
display: grid;
bottom: 0;
margin: 0 0 50px;
padding: 10px;
width: 100%;
background: #610c32;
grid-template-columns: 1fr 1fr 1fr;
-moz-column-gap: 10px;
column-gap: 10px
}
.m_spin_wrap._m_cont ul._btns a {
position: relative;
width: 100%;
height: 50px;
border-radius: 3px;
text-align: center;
font-size: 23px;
font-weight: bold;
line-height: 37px
}
.m_spin_wrap._m_cont ul._btns a._auto {
background: #ddb108;
border: 6px solid #7a6204
}
.m_spin_wrap._m_cont ul._btns a._stop {
background: #f22b00;
border: 6px solid #a72104
}
.m_spin_wrap._m_cont ul._btns a._spin {
background: #51970c;
border: 6px solid #345e09
}
.slot-machine__tile--no-transition {
transition: none !important
}
.slot-machine__tile--blur-fast {
filter: blur(5px)
}
.slot-machine__tile--blur-medium {
filter: blur(3px)
}
.slot-machine__tile--blur-slow {
filter: blur(2px)
}
.slot-machine__tile--blur-turtle {
filter: blur(1px)
}
.slot-machine__container--gradient,
.slot-machine__tile--gradient {
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(25%, rgb(0, 0, 0)), color-stop(75%, rgb(0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
-webkit-mask: url('data:image/svg+xml;utf8,#slotMachineFadeMask');
mask: url('data:image/svg+xml;utf8,#slotMachineFadeMask')
}
}
.sp_iframe {
height: 800px
}
@media screen and (max-width: 960px) {
.sp_iframe {
max-height: calc(100vh - 150px)
}
}
.games .main_games {
display: grid;
grid-template-columns: repeat(6, 1fr)
}
@media screen and (max-width: 480px) {
.games .main_games.sub {
grid-template-columns: repeat(3, 1fr) !important
}
}
.games .main_games li {
width: 100%;
position: relative;
border-radius: 10px;
overflow: hidden
}
.games .main_games li:hover .play_btn {
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
gap: 10px;
border-radius: 10px;
overflow: hidden
}
@media screen and (max-width: 960px) {
.games .main_games li:hover .play_btn {
display: none
}
}
.games .main_games li:hover .play_btn i {
font-size: 48px
}
.games .main_games li:hover .play_btn>._play_btn {
width: 120px;
height: 36px;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(180deg, #F02A7E 0%, #FE0A5B 100%);
border-radius: 4px;
font: normal normal normal 12px Pretendard !important;
border: 0;
gap: 10px;
cursor: pointer
}
.games .main_games li:hover .play_btn>._play_btn:hover {
background: linear-gradient(180deg, #FF539C 0%, #FF2B72 100%)
}
.games .main_games li:hover .play_btn>._play_btn i {
font-size: 24px
}
.games .main_games li:hover .play_btn>span {
color: #fff
}
.games .main_games li:hover .play_btn>span:nth-child(2) {
font: normal normal normal 20px Montserrat
}
.games .main_games li:hover .play_btn>span:nth-last-child(1) {
font: normal normal normal 14px/18px Montserrat
}
.games .main_games li:hover ._bookmark {
display: flex
}
.games .main_games li:hover .game_name {
display: none
}
@media screen and (max-width: 960px) {
.games .main_games li:hover .game_name {
display: flex
}
}
.games .main_games li img {
width: 100%
}
@media screen and (max-width: 960px) {
.games .main_games li img._pc_cont {
display: none
}
.games .main_games li img._m_cont {
display: block
}
}
.games .main_games li .game_name {
position: absolute;
bottom: 0;
width: 100%;
padding: 8px;
background-color: rgba(0, 0, 0, .6);
display: flex;
justify-content: center;
align-items: center;
font: normal normal normal 16px/18px Montserrat;
text-align: center;
white-space: normal;
word-break: break-word
}
.games .main_games li .play_btn {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .6);
display: none;
border-radius: 10px;
overflow: hidden
}
@media screen and (max-width: 960px) {
.games .main_games li .play_btn {
display: flex;
background: none;
justify-content: center;
text-align: center
}
.games .main_games li .play_btn>span {
display: none
}
.games .main_games li .play_btn>._play_btn {
display: none
}
.games .main_games li .play_btn:hover {
z-index: 1
}
.games .main_games li .play_btn:hover>._play_btn {
display: flex
}
}
.games .main_games li ._bookmark {
position: absolute;
right: 10px;
top: 10px;
background: #262437;
border-radius: 6px;
width: 30px;
height: 30px;
display: none;
justify-content: center;
align-items: center
}
.games .main_games li ._bookmark._on i {
color: #f8186a
}
@media screen and (max-width: 960px) {
.games .main_games li ._bookmark {
display: flex
}
}
.games ._more {
width: 100%;
height: 44px;
background: linear-gradient(180deg, #F02A7E 0%, #FE0A5B 100%);
display: flex;
justify-content: center;
align-items: center;
border-radius: 6px;
margin-top: 10px
}
.games ._more:hover {
background: linear-gradient(180deg, #FF539C 0%, #FF2B72 100%)
}
.bbs {
width: 100%;
max-width: 1600px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column
}
@media screen and (max-width: 720px) {
.bbs {
padding: 20px
}
}
.bbs .title {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
margin: 80px 0 40px;
gap: 20px
}
@media screen and (max-width: 760px) {
.bbs .title {
margin: 40px 0
}
.bbs .title img {
display: none
}
}
.bbs .pop {
display: flex;
gap: 20px;
width: 100%;
margin-bottom: 40px
}
@media screen and (max-width: 720px) {
.bbs .pop {
flex-flow: column
}
}
.bbs .pop .pop_list {
display: flex;
flex-flow: column;
gap: 10px;
max-width: calc(33% - 10px);
width: 100%
}
.bbs .pop .pop_list ul {
width: 100%;
border: 0;
max-width: 100%
}
.bbs .pop .pop_list ul li {
border-bottom: 1px solid #46445b;
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
word-break: break-all;
font: normal normal normal 14px Montserrat;
padding: 8px 0;
height: 60px
}
.bbs .pop .pop_list ul li a {
width: 100%;
height: 100%;
text-align: left;
display: flex;
gap: 4px
}
@media screen and (max-width: 720px) {
.bbs .pop .pop_list ul li a {
height: unset
}
}
.bbs .pop .pop_list ul li a>span:nth-child(1) {
width: 30px;
text-align: center;
display: flex;
align-items: center;
justify-content: center
}
@media screen and (max-width: 720px) {
.bbs .pop .pop_list ul li a>span:nth-child(1) {
display: none
}
}
.bbs .pop .pop_list ul li a>span:nth-child(2) {
max-width: calc(100% - 300px);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
word-break: break-all;
text-align: left;
padding: 13px 0
}
@media screen and (max-width: 720px) {
.bbs .pop .pop_list ul li a>span:nth-child(2) {
max-width: calc(100% - 65px);
padding: 0
}
}
.bbs .pop .pop_list ul li a>span._cmt {
width: 24px;
display: flex;
align-items: center
}
.bbs .pop .pop_list ul li a .like {
width: 25px;
display: flex;
justify-content: center;
align-items: center;
gap: 4px;
margin-left: auto;
margin-right: 5px
}
@media screen and (max-width: 720px) {
.bbs .pop .pop_list ul li a .like {
width: unset
}
}
.bbs .pop .pop_list ul li a .name {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 4px;
margin-right: 5px
}
@media screen and (max-width: 720px) {
.bbs .pop .pop_list ul li a .name {
display: none
}
}
.bbs .pop .pop_list ul li a .thumbnail {
width: 54px;
height: 54px;
margin-right: 10px;
float: left
}
@media screen and (max-width: 720px) {
.bbs .pop .pop_list ul li a.m_name {
display: flex
}
.bbs .pop .pop_list ul li a.m_name>.name {
display: flex
}
}
.bbs .pop .pop_list ul li._null {
height: 250px;
vertical-align: middle;
text-align: center
}
@media screen and (max-width: 720px) {
.bbs .pop .pop_list {
max-width: 100%
}
.bbs .pop .pop_list ul {
height: 60px;
overflow: hidden
}
}
.bbs .board {
width: 100%
}
.bbs .board._view {
background-color: #1d1b2b;
padding: 40px
}
.bbs .board._view ._top {
display: flex;
flex-flow: column;
gap: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #46445b
}
.bbs .board._view ._top ._tit {
font: normal normal normal 24px Pretendard;
letter-spacing: -1.2px
}
.bbs .board._view ._top ._info {
display: flex;
justify-content: space-between
}
@media screen and (max-width: 760px) {
.bbs .board._view ._top ._info {
display: flex;
flex-flow: column;
gap: 10px
}
}
.bbs .board._view ._top ._info span {
display: flex;
gap: 10px;
align-items: center;
font: normal normal normal 14px Montserrat
}
.bbs .board._view ._top ._info span img {
width: 36px
}
.bbs .board._view ._top ._info span._date {
color: #999
}
.bbs .board._view ._cont {
padding: 20px 0;
min-height: 160px;
display: flex;
flex-flow: column
}
.bbs .board._view ._cont iframe {
aspect-ratio: 1000/692;
border: 0
}
.bbs .board._view ._cont img {
width: -moz-fit-content;
width: fit-content;
max-height: 100vh
}
.bbs .board._view ._cont .like_btn {
margin: 0 auto;
padding: 20px 10px;
display: flex;
flex-flow: column;
width: 80px;
justify-content: center;
align-items: center;
border: 1px solid #46445b;
gap: 10px;
margin-top: 60px
}
.bbs .board._view ._cont .like_btn i {
font-size: 20px
}
.bbs .board._view ._cont .like_btn i._on {
color: #f8186a
}
.bbs .board._write form {
display: flex;
flex-flow: column;
gap: 20px
}
.bbs .board._write form ._title {
display: flex
}
.bbs .board._write form ._title label {
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 5px;
flex-wrap: wrap
}
.bbs .board._write form ._title input[type=text] {
width: 100%
}
.bbs .board._write input[type=text] {
width: 100%;
height: 44px;
border: 1px solid #46445b;
border-radius: 6px;
background: none;
padding: 0 14px
}
.bbs .board._write input[type=file] {
width: 0;
height: 0
}
.bbs .board._write .file_label {
width: 100%;
height: 44px;
border: 1px solid #46445b;
border-radius: 6px;
display: flex;
overflow: hidden
}
.bbs .board._write .file_label a {
width: 100px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #46445b
}
.bbs .board._write .file_label>div {
width: calc(100% - 100px);
height: 100%;
display: flex;
align-items: center;
padding: 0 10px
}
.bbs .board._write .file_label>div span::after {
content: ", "
}
.bbs .board._write .file_label>div span:nth-last-child(1)::after {
display: none
}
.bbs .board._write textarea {
width: 100%;
min-height: 250px;
border: 1px solid #46445b;
border-radius: 6px;
background: none;
padding: 14px;
resize: none
}
.bbs .board table {
width: 100%;
border: 0;
border-collapse: collapse;
table-layout: fixed
}
.bbs .board table thead {
background-color: #1d1b2b
}
.bbs .board table thead tr {
height: 66px
}
@media screen and (max-width: 960px) {
.bbs .board table thead tr th.like_th,
.bbs .board table thead tr th.date_th {
width: 60px !important
}
}
.bbs .board table tbody tr {
border-bottom: 1px solid #46445b
}
.bbs .board table tbody tr td {
height: 66px;
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
word-break: break-all
}
@media screen and (max-width: 960px) {
.bbs .board table tbody tr td {
height: 54px
}
}
.bbs .board table tbody tr td .thumbnail {
width: 54px;
height: 54px;
margin-right: 10px;
float: left
}
.bbs .board table tbody tr td .name {
display: flex;
gap: 4px;
align-items: center;
justify-content: center
}
.bbs .board table tbody tr td .name>div:nth-child(1) {
margin-right: -5px
}
.bbs .board table tbody tr td .name img {
width: 36px
}
.bbs .board table tbody tr td a {
width: 100%;
height: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
word-break: break-all;
text-align: left
}
.bbs .board table tbody tr td._null {
height: 250px;
vertical-align: middle;
text-align: center
}
.bbs .board table tbody tr td ._date {
justify-content: center;
align-items: center
}
@media screen and (max-width: 960px) {
.bbs .board table tbody tr td ._date._m_cont {
display: flex
}
.bbs .board table tbody tr td ._date._pc_cont {
display: none
}
}
.bbs .board table tbody tr td .bbs_cont {
display: flex;
flex-flow: column;
justify-content: center;
height: 54px
}
@media screen and (max-width: 960px) {
.bbs .board table tbody tr td .bbs_cont ._m_cont {
display: flex
}
.bbs .board table tbody tr td .bbs_cont ._m_cont._name {
display: flex;
gap: 10px;
align-items: center
}
.bbs .board table tbody tr td .bbs_cont ._m_cont._name ._profile {
width: 18px !important;
height: 18px !important
}
.bbs .board table tbody tr td .bbs_cont ._m_cont._name .profile_medium {
width: 24px;
height: 24px;
background-position: -34px -236px
}
.bbs .board table tbody tr td .bbs_cont ._m_cont._name img {
width: 36px
}
}
@media screen and (max-width: 960px) {
.bbs .board table tr ._m_hide {
display: none
}
}
.bbs .board .search {
display: flex;
justify-content: flex-end;
padding-top: 20px;
gap: 10px
}
.bbs .board .search select {
background: #0c0c0c;
border: 1px solid #46445b;
height: 36px;
width: 100px;
border-radius: 6px
}
.bbs .board .search input {
width: 200px;
height: 36px;
background: #0c0c0c;
border: 1px solid #46445b;
padding: 0 10px;
border-radius: 6px
}
.bbs .board .search button {
width: 60px;
height: 36px;
background: linear-gradient(180deg, #F02A7E 0%, #FE0A5B 100%);
border-radius: 6px;
border: 0
}
.bbs .board .btns {
padding: 20px 0
}
.bbs .board .btns .btn {
width: 100px;
height: 36px
}
.bbs .board .comment {
display: flex;
flex-flow: column
}
.bbs .board .comment ._write {
width: 100%;
display: flex;
flex-flow: column;
border: 1px solid #46445b;
border-radius: 6px
}
.bbs .board .comment ._write textarea {
width: 100%;
height: 120px;
resize: none;
background: none;
border: 0;
padding: 14px;
overflow-y: auto;
font: normal normal normal 14px Pretendard;
letter-spacing: -0.7px
}
.bbs .board .comment ._write .btns {
padding: 10px 10px 10px 0;
border-top: 1px solid #46445b
}
.bbs .board .comment ._write .btns button {
width: 100px;
height: 36px;
display: flex;
justify-content: center;
align-items: center;
border: 0
}
.bbs .board .comment .comment_list {
display: flex;
flex-flow: column
}
.bbs .board .comment .comment_list ._comment {
border-bottom: 1px solid #46445b;
padding: 20px 0;
display: flex;
flex-flow: column;
gap: 20px
}
.bbs .board .comment .comment_list ._comment:nth-last-child(1) {
border-bottom: 0
}
.bbs .board .comment .comment_list ._comment._cmt2:nth-child(1) {
border-top: 1px solid #46445b
}
.bbs .board .comment .comment_list ._comment ._info {
display: flex;
gap: 10px;
align-items: center;
position: relative
}
.bbs .board .comment .comment_list ._comment ._info div {
display: flex;
flex-flow: column;
gap: 6px
}
.bbs .board .comment .comment_list ._comment ._info div img {
width: 36px
}
.bbs .board .comment .comment_list ._comment ._info ._id {
font: normal normal normal 14px Montserrat;
display: flex;
align-items: center;
gap: 4px;
line-height: 1.1
}
.bbs .board .comment .comment_list ._comment ._info ._date {
font: normal normal normal 14px Montserrat;
color: #999
}
.bbs .board .comment .comment_list ._comment ._info .btn {
position: absolute;
right: 0;
width: 100px;
height: 36px
}
@media screen and (max-width: 720px) {
.bbs .board .comment .comment_list ._comment ._info .btn._pc_cont {
display: none
}
}
.bbs .board .comment .comment_list ._comment .cmt_button {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 150px;
height: 48px;
border-radius: 6px;
background: linear-gradient(180deg, #1D1B2B 0%, #0A0814 100%);
cursor: pointer
}
.bbs .board .comment .comment_list ._comment .cmt_button:hover {
background: linear-gradient(180deg, #262437 0%, #17142B 100%)
}
.bbs .board .comment .comment_list ._comment .cmt_button._on {
background: linear-gradient(180deg, #F02A7E 0%, #FE0A5B 100%)
}
.bbs .board .comment .comment_list ._comment .cmt_button._on:hover {
background: linear-gradient(180deg, #FF539C 0%, #FF2B72 100%)
}
.bbs .board .comment .comment_list ._comment .cmt_button svg {
width: 18px
}
.bbs .board .comment .comment_list ._comment .rip_contents {
position: relative;
padding-bottom: 36px
}
.bbs .board .comment .comment_list ._comment .rip_contents>a {
display: none
}
@media screen and (max-width: 720px) {
.bbs .board .comment .comment_list ._comment .rip_contents>a {
position: absolute;
right: 0;
width: 100px;
height: 36px;
display: flex
}
}
.bbs .event_img {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
padding: 20px
}
@media screen and (max-width: 1200px) {
.bbs .event_img {
gap: 20px;
padding: 20px
}
}
@media screen and (max-width: 760px) {
.bbs .event_img {
grid-template-columns: repeat(4, 1fr)
}
}
@media screen and (max-width: 480px) {
.bbs .event_img {
grid-template-columns: repeat(3, 1fr);
gap: 10px;
padding: 0
}
}
@media screen and (max-width: 390px) {
.bbs .event_img {
grid-template-columns: repeat(2, 1fr)
}
}
.bbs .event_img>div {
width: 100%;
display: flex;
justify-content: center
}
.bbs ._hide {
display: none
}
.bbs .btn._close {
width: 100%;
height: 42px;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(180deg, #F02A7E 0%, #FE0A5B 100%);
border-radius: 4px;
font: normal normal normal 14px Pretendard !important;
border: 0;
margin-top: 10px
}
.ev_list {
display: flex;
justify-content: center;
gap: 20px;
width: 100%
}
@media screen and (max-width: 720px) {
.ev_list {
flex-flow: column
}
}
.ev_list a {
display: flex;
flex-flow: column;
border-radius: 10px;
overflow: hidden;
width: 100%;
max-width: 387px
}
.ev_list a ._img {
border: 4px solid #f8186a;
position: relative;
aspect-ratio: 387/294
}
.ev_list a ._img>img {
position: absolute;
transition: .3s;
transform: scale(1.03)
}
.ev_list a ._img>img:hover {
transform: scale(1.1)
}
.ev_list a>._name {
border-radius: 0px 0px 10px 10px;
background: #1d1b2b;
padding: 20px 0;
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
font-size: 24px;
font-weight: bold;
z-index: 1
}
.ev_list a>._name span {
color: #f02a7e
}
._cp {
position: relative;
width: 100%
}
.cp_list {
display: flex;
flex-wrap: wrap;
max-width: 1240px;
width: 100%;
gap: 20px;
justify-content: center;
margin: 0 auto
}
.cp_list ._null {
width: 100%;
height: 300px;
display: flex;
justify-content: center;
align-items: center
}
.cp_list .cp {
display: flex;
max-width: 400px;
width: 100%;
height: 157px
}
.cp_list .cp:hover ._right {
animation: coupon .5s forwards
}
.cp_list .cp>div {
position: relative;
overflow: hidden
}
.cp_list .cp>div._left {
width: calc(100% - 102px);
border-radius: 10px 0 0 10px
}
.cp_list .cp>div._left::after {
content: "";
width: 1px;
border-right: 2px dotted #1d1b2b;
position: absolute;
right: 0;
top: 0;
z-index: 1;
height: 100%
}
.cp_list .cp>div._right {
width: 100px;
border-radius: 0 10px 10px 0
}
.cp_list .cp>div._right::after {
content: "";
width: 1px;
border-left: 2px dotted #1d1b2b;
position: absolute;
left: 0;
top: 0;
z-index: 1;
height: 100%
}
.cp_list .cp>div._right .cp_top {
justify-content: center
}
.cp_list .cp>div._right .cp_cont {
justify-content: center;
align-items: center;
font: normal normal normal 14px Pretendard;
letter-spacing: -0.7px;
color: #707070;
padding: 0
}
.cp_list .cp>div .cp_top {
background: #f02a7e;
color: #fff;
height: 44px;
padding: 0 20px;
display: flex;
align-items: center;
font: normal normal normal 14px Pretendard;
letter-spacing: -0.7px
}
.cp_list .cp>div .cp_cont {
background: #fff;
height: 113px;
display: flex;
flex-flow: column;
justify-content: space-between;
padding: 20px
}
.cp_list .cp>div .cp_cont span {
color: #000
}
.cp_list .cp>div .cp_cont span._name {
font: normal normal normal 14px Pretendard;
letter-spacing: -0.7px
}
.cp_list .cp>div .cp_cont span._money {
font: normal normal bold 24px Montserrat
}
.cp_list .cp>div .cp_cont span._date {
color: #aaa;
font: normal normal normal 14px Pretendard;
letter-spacing: -0.7px
}
.cp_use {
background-color: #110f19;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
gap: 20px
}
.cp_use ._use {
border-radius: 20px;
overflow: hidden;
max-width: 700px;
width: 100%;
height: 250px;
display: flex;
background-color: #fff;
align-items: center
}
.cp_use ._use ._left {
max-width: 40%;
width: 100%;
display: flex;
align-items: center;
justify-content: center
}
.cp_use ._use ._left img {
width: 100%
}
.cp_use ._use .line {
border-left: 4px dotted #1d1b2b;
height: 80%
}
.cp_use ._use ._right {
max-width: 60%;
width: 100%;
background-color: #fff;
color: #000;
display: flex;
justify-content: center;
padding: 0 30px;
flex-flow: column;
gap: 10px;
position: relative
}
.cp_use ._use ._right::after {
position: absolute;
right: -24px;
width: 48px;
height: 48px;
border-radius: 50%;
background-color: #110f19;
top: 50%;
transform: translateY(-50%);
content: ""
}
.cp_use ._use ._right h3 {
color: #000;
font: normal normal normal 24px Pretendard;
letter-spacing: -1.2px
}
.cp_use ._use ._right .info {
display: flex;
flex-flow: column;
font: normal normal normal 14px/22px Pretendard;
letter-spacing: -0.7px;
color: #000
}
.cp_use ._use ._right .money {
display: flex;
gap: 4px;
align-items: flex-end
}
.cp_use ._use ._right .money span {
font: normal normal normal 14px Montserrat;
color: #000
}
.cp_use ._use ._right .money span._money {
font: normal normal bold 36px Montserrat;
color: #000
}
.cp_use>a {
width: 100%;
max-width: 700px;
height: 36px;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(180deg, #F02A7E 0%, #FE0A5B 100%);
border-radius: 4px;
font: normal normal normal 12px Pretendard !important;
border: 0
}
@keyframes coupon {
0% {
transform: rotate(1deg) translate(1px, 1px)
}
100% {
transform: rotate(10deg) translate(15px, 8px)
}
}
.spin {
position: relative
}
@media screen and (max-width: 760px) {
.spin {
transform: scale(0.7);
transform-origin: top
}
}
.spin ._roul {
position: absolute;
width: 100%;
top: 0;
height: 100%
}
.spin ._roul .roul {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 193px
}
.spin ._roul .arrow {
width: 162px;
height: 162px;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 296px;
background: url("../imgs/craze/spin/game_btn1.png")
}
.spin ._roul .arrow:hover {
background: url("../imgs/craze/spin/game_btn1_h.png")
}
.spin ._roul .count {
position: absolute;
width: 406px;
height: 75px;
display: flex;
justify-content: space-between;
background: url("../imgs/craze/spin/number.png");
left: 50%;
transform: translateX(-50%);
padding: 20px 30px 0;
top: 590px
}
.spin ._roul .count span {
color: #fff
}
.spin ._roul ._win {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5019607843);
display: flex;
justify-content: center;
align-items: center
}
.spin ._roul ._win>div {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center
}
.spin ._roul ._win>div img {
position: absolute;
animation: scaleUpDown 2s infinite
}
.spin ._roul ._win>div img._bg {
animation: scaleUpDown2 2s infinite
}
.spin ._roul ._win>div img._txt {
top: 32%
}
.spin ._roul ._win>div img._num {
top: 40%
}
.spin ._roul .btns {
position: absolute;
top: 680px;
left: 50%;
transform: translateX(-50%)
}
.spin ._roul .btns a {
width: 108px;
height: 109px
}
.spin ._roul .btns .auto_btn {
background: url("../imgs/craze/spin/game_btn2.png")
}
.spin ._roul .btns .stop_btn {
background: url("../imgs/craze/spin/game_btn3.png")
}
@keyframes spin {
from {
transform: translateX(-50%) rotate(0deg)
}
to {
transform: translateX(-50%) rotate(360deg)
}
}
.spin_box .roul {
transform: translateX(-50%);
transition: transform 4s cubic-bezier(0.33, 1, 0.68, 1)
}
@keyframes scaleUpDown {
0% {
transform: scale(1)
}
50% {
transform: scale(1.1)
}
100% {
transform: scale(1)
}
}
@keyframes scaleUpDown2 {
0% {
transform: scale(1.2)
}
50% {
transform: scale(1.4)
}
100% {
transform: scale(1.2)
}
}
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 100002;
display: none;
justify-content: center;
align-items: center;
inset: 0px
}
.modal._on {
display: flex !important
}
.modal .md_bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .6)
}
.modal .md_bg._login {
background: #1d1b2b
}
.modal .modal_cont {
z-index: 1;
background: #262437;
padding: 20px;
border-radius: 20px;
position: relative
}
.modal .modal_cont._money {
max-width: 1300px;
width: 100%;
max-height: 90vh;
height: 100%
}
.modal .modal_cont._money .cont {
max-width: calc(100% - 400px);
width: 100%
}
@media screen and (max-width: 960px) {
.modal .modal_cont._money {
max-height: 100vh
}
.modal .modal_cont._money .cont {
max-width: unset
}
}
.modal .modal_cont.join {
max-width: 480px
}
.modal .modal_cont .md_head {
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding-top: 24px;
padding-bottom: 40px
}
.modal .modal_cont .md_head .logo {
max-width: 160px
}
.modal .modal_cont .md_head .close_btn {
position: absolute;
right: 0;
top: 0
}
.modal .modal_cont .md_cont {
display: flex;
gap: 20px;
height: 100%
}
.modal .modal_cont .md_cont .md_side {
display: flex;
flex-flow: column;
gap: 10px;
width: 100%;
max-width: 400px;
background: #161320;
border-radius: 10px;
padding: 10px
}
.modal .modal_cont .md_cont .md_side .side_top {
border-radius: 6px;
padding: 10px;
background: #1d1b2b
}
.modal .modal_cont .md_cont .md_side .side_top>div {
display: flex;
flex-wrap: wrap;
border-radius: 6px;
padding: 20px;
background: #161320
}
.modal .modal_cont .md_cont .md_side .side_top>div .info {
display: flex;
width: 100%
}
.modal .modal_cont .md_cont .md_side .side_top>div .info>div {
width: 50%;
display: flex;
flex-flow: column;
gap: 4px
}
.modal .modal_cont .md_cont .md_side .side_top>div .info>div span {
font: normal normal normal 14px Pretendard;
letter-spacing: -0.7px;
color: #fff;
height: 32px;
display: flex;
align-items: center
}
.modal .modal_cont .md_cont .md_side .side_top>div .info>div.left span:nth-child(1) {
font: normal normal 600 20px Montserrat;
color: #fff
}
.modal .modal_cont .md_cont .md_side .side_top>div .info>div .exchange {
background: linear-gradient(180deg, #F02A7E 0%, #FE0A5B 100%);
border-radius: 6px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #fff
}
.modal .modal_cont .md_cont .md_side .side_top>div .info>div .exchange:hover {
background: linear-gradient(180deg, #FF539C 0%, #FF2B72 100%)
}
.modal .modal_cont .md_cont .md_side .side_top>div a {
background: linear-gradient(180deg, #F02A7E 0%, #FE0A5B 100%);
border-radius: 6px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
height: 44px
}
.modal .modal_cont .md_cont .md_side .side_top>div a:hover {
background: linear-gradient(180deg, #FF539C 0%, #FF2B72 100%)
}
.modal .modal_cont .md_cont .md_side .nav {
display: flex;
gap: 6px;
flex-flow: column
}
.modal .modal_cont .md_cont .md_side .nav a {
width: 100%;
height: 60px;
display: flex;
align-items: center;
background: #1d1b2b;
padding: 0 20px;
gap: 10px;
position: relative;
border-radius: 6px
}
.modal .modal_cont .md_cont .md_side .nav a::before {
content: "";
background: url("../imgs/craze/ico.png");
width: 24px;
height: 24px
}
.modal .modal_cont .md_cont .md_side .nav a._mypage::before {
background-position: -306px -176px
}
.modal .modal_cont .md_cont .md_side .nav a._dep::before {
background-position: -374px -176px
}
.modal .modal_cont .md_cont .md_side .nav a._wit::before {
background-position: -442px -176px
}
.modal .modal_cont .md_cont .md_side .nav a._move::before {
background-position: -510px -176px
}
.modal .modal_cont .md_cont .md_side .nav a._event::before {
background-position: -578px -176px
}
.modal .modal_cont .md_cont .md_side .nav a._point::before {
background-position: -646px -176px
}
.modal .modal_cont .md_cont .md_side .nav a._msg::before {
background-position: -714px -176px
}
.modal .modal_cont .md_cont .md_side .nav a::after {
content: "";
background: url("../imgs/craze/ico.png");
width: 24px;
height: 24px;
background-position: 0px -176px;
position: absolute;
right: 20px
}
.modal .modal_cont .md_cont .md_side .nav a:hover,
.modal .modal_cont .md_cont .md_side .nav a._on {
background: #262437;
color: #f02a7e
}
.modal .modal_cont .md_cont .md_side .nav a:hover._mypage::before,
.modal .modal_cont .md_cont .md_side .nav a._on._mypage::before {
background-position: -340px -176px
}
.modal .modal_cont .md_cont .md_side .nav a:hover._dep::before,
.modal .modal_cont .md_cont .md_side .nav a._on._dep::before {
background-position: -408px -176px
}
.modal .modal_cont .md_cont .md_side .nav a:hover._wit::before,
.modal .modal_cont .md_cont .md_side .nav a._on._wit::before {
background-position: -476px -176px
}
.modal .modal_cont .md_cont .md_side .nav a:hover._move::before,
.modal .modal_cont .md_cont .md_side .nav a._on._move::before {
background-position: -544px -176px
}
.modal .modal_cont .md_cont .md_side .nav a:hover._event::before,
.modal .modal_cont .md_cont .md_side .nav a._on._event::before {
background-position: -612px -176px
}
.modal .modal_cont .md_cont .md_side .nav a:hover._point::before,
.modal .modal_cont .md_cont .md_side .nav a._on._point::before {
background-position: -680px -176px
}
.modal .modal_cont .md_cont .md_side .nav a:hover._msg::before,
.modal .modal_cont .md_cont .md_side .nav a._on._msg::before {
background-position: -748px -176px
}
@media screen and (max-width: 960px) {
.modal .modal_cont .md_cont .md_side {
display: none
}
}
.modal .modal_cont .md_cont .cont {
display: flex;
flex-flow: column;
gap: 20px
}
.modal .modal_cont .md_cont .cont .tit {
display: flex;
justify-content: space-between;
background: #161320;
border-radius: 10px;
font: normal normal normal 20px Pretendard;
letter-spacing: -1px;
color: #fff;
align-items: center;
padding: 20px
}
.modal .modal_cont .md_cont .cont .tit .icons {
display: flex;
gap: 10px
}
@media screen and (max-width: 960px) {
.modal .modal_cont .md_cont .cont .tit .icons ._m_cont {
display: flex
}
}
.modal .modal_cont .md_cont .cont ._cont {
background: #161320;
border-radius: 10px;
padding: 20px;
overflow-y: auto;
height: 100%
}
@media screen and (max-width: 760px) {
.modal .modal_cont .md_cont .cont ._cont {
padding: 10px
}
}
.modal .modal_cont .md_cont .cont ._cont._cp {
background: none;
overflow: hidden;
display: flex;
gap: 20px;
padding: 0
}
@media screen and (max-width: 960px) {
.modal .modal_cont .md_cont .cont ._cont._cp {
flex-flow: column;
display: unset;
overflow-y: scroll
}
.modal .modal_cont .md_cont .cont ._cont._cp>div {
width: 100% !important
}
.modal .modal_cont .md_cont .cont ._cont._cp>div:nth-child(1) {
margin-bottom: 20px
}
}
.modal .modal_cont .md_cont .cont ._cont._cp>div {
background: #161320;
overflow-y: hidden;
height: 100%;
padding: 20px;
border-radius: 10px;
width: 30%
}
@media screen and (max-width: 960px) {
.modal .modal_cont .md_cont .cont ._cont._cp>div {
height: unset;
overflow: unset
}
}
.modal .modal_cont .md_cont .cont ._cont._cp>div._cp_list {
width: 100%
}
.modal .modal_cont .md_cont .cont ._cont._cp>div._cp_list .cp_list {
display: grid;
grid-template-columns: repeat(5, 1fr)
}
@media screen and (max-width: 720px) {
.modal .modal_cont .md_cont .cont ._cont._cp>div._cp_list .cp_list {
grid-template-columns: repeat(3, 1fr)
}
}
@media screen and (max-width: 480px) {
.modal .modal_cont .md_cont .cont ._cont._cp>div._cp_list .cp_list {
grid-template-columns: repeat(2, 1fr)
}
}
@media screen and (max-width: 390px) {
.modal .modal_cont .md_cont .cont ._cont._cp>div._cp_list .cp_list {
grid-template-columns: repeat(1, 1fr)
}
}
.modal .modal_cont .md_cont .cont ._cont._cp>div._cp_list .cp_list a {
display: flex;
justify-content: center;
align-items: center;
background-color: #262437;
border-radius: 10px;
overflow: hidden;
flex-flow: column;
padding: 10px;
gap: 20px;
font: normal normal normal 14px Pretendard !important
}
.modal .modal_cont .md_cont .cont ._cont._cp>div._cp_list .cp_list a:hover {
background: linear-gradient(180deg, #F02A7E 0%, #FE0A5B 100%)
}
.modal .modal_cont .md_cont .cont ._cont._cp>div._cp_list .cp_list a .img {
aspect-ratio: 1/1;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 0
}
.modal .modal_cont .md_cont .cont ._cont._cp>div._cp_list .cp_list a .img img {
width: 100%;
max-width: 100%
}
.modal .modal_cont .md_cont .cont ._cont._cp>div._cp_list .cp_list a .txt {
display: flex;
flex-flow: column;
gap: 6px
}
.modal .modal_cont .md_cont .cont ._cont._cp>div._cp_list .cp_list a .txt span {
display: block;
text-align: center
}
.modal .modal_cont .md_cont .cont ._cont._cp>div._cp_list .cp_list a .txt .cont_name {
font-weight: 900;
font-size: 16px
}
.modal .modal_cont .md_cont .cont ._cont._cp>div._use_list ul {
display: flex;
flex-flow: column
}
.modal .modal_cont .md_cont .cont ._cont._cp>div._use_list ul li {
display: flex;
align-items: center;
height: 24px
}
.modal .modal_cont .md_cont .cont ._cont._cp>div._use_list ul li span {
font-size: 12px
}
.modal .modal_cont .md_cont .cont ._cont._cp>div._use_list ul li span:nth-child(2) {
width: 80px;
text-align: right
}
.modal .modal_cont .md_cont .cont ._cont._cp>div._use_list ul li span:nth-child(3) {
width: calc(100% - 174px);
text-align: right
}
.modal .modal_cont .md_cont .cont ._cont._cp>div._use_list ul li span:nth-child(4) {
width: 70px;
text-align: right
}
.modal .modal_cont .md_cont .cont ._cont._hlq_info {
display: flex;
flex-flow: column;
width: 320px;
gap: 20px
}
.modal .modal_cont .md_cont .cont ._cont._hlq_info li {
display: flex;
flex-flow: column;
gap: 5px;
position: relative
}
.modal .modal_cont .md_cont .cont ._cont._hlq_info li::after {
border-bottom: 1px solid rgba(255, 255, 255, .1882352941);
bottom: -10px;
width: 100%;
content: "";
position: absolute
}
.modal .modal_cont .md_cont .cont ._cont._hlq_info li:nth-last-child(1)::after {
display: none
}
.modal .modal_cont .md_cont .cont ._cont._hlq_info li div {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px
}
.modal .modal_cont .md_cont .cont ._cont._hlq_info li div._center {
justify-content: center;
position: relative;
text-align: center;
font-size: 20px;
font-weight: bold
}
.modal .modal_cont .md_cont .cont ._cont._hlq_info li div._center img:nth-child(2) {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)
}
.modal .modal_cont .md_cont .cont ._cont._hlq_info li div.gauge {
display: grid;
gap: 5px
}
.modal .modal_cont .md_cont .cont ._cont._hlq_info li div.gauge._gauge_1 {
grid-template-columns: repeat(1, 1fr)
}
.modal .modal_cont .md_cont .cont ._cont._hlq_info li div.gauge._gauge_2 {
grid-template-columns: repeat(2, 1fr)
}
.modal .modal_cont .md_cont .cont ._cont._hlq_info li div.gauge._gauge_3 {
grid-template-columns: repeat(3, 1fr)
}
.modal .modal_cont .md_cont .cont ._cont._hlq_info li div.gauge._gauge_4 {
grid-template-columns: repeat(4, 1fr)
}
.modal .modal_cont .md_cont .cont ._cont._hlq_info li div.gauge._gauge_5 {
grid-template-columns: repeat(5, 1fr)
}
.modal .modal_cont .md_cont .cont ._cont._hlq_info li div.gauge._gauge_6 {
grid-template-columns: repeat(6, 1fr)
}
.modal .modal_cont .md_cont .cont ._cont._hlq_info li div.gauge._gauge_7 {
grid-template-columns: repeat(7, 1fr)
}
.modal .modal_cont .md_cont .cont ._cont._hlq_info li div.gauge._gauge_8 {
grid-template-columns: repeat(8, 1fr)
}
.modal .modal_cont .md_cont .cont ._cont._hlq_info li div.gauge._gauge_9 {
grid-template-columns: repeat(9, 1fr)
}
.modal .modal_cont .md_cont .cont ._cont._hlq_info li div.gauge._gauge_10 {
grid-template-columns: repeat(10, 1fr)
}
.modal .modal_cont .md_cont .cont ._cont._hlq_info li div.gauge ._gauge {
border: 1px solid #7b1842;
width: 100%;
height: 20px
}
.modal .modal_cont .md_cont .cont ._cont._hlq_info li div.gauge ._gauge._on {
background: linear-gradient(180deg, #FF4E99 0%, #FE0A5B 100%)
}
.modal .modal_cont .md_cont .cont ._cont._hlq_info li div.gauge ._gauge>div {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
font-size: 12px
}
.modal .modal_cont .md_cont .cont ._cont ._cont_tit {
display: flex;
flex-flow: column;
gap: 10px;
margin-bottom: 40px;
position: relative
}
.modal .modal_cont .md_cont .cont ._cont ._cont_tit h2 {
font: normal normal normal 28px Pretendard;
letter-spacing: -1.4px;
color: #f02a7e
}
.modal .modal_cont .md_cont .cont ._cont ._cont_tit span {
font: normal normal normal 14px/22px Pretendard;
letter-spacing: -0.7px;
color: #fff
}
.modal .modal_cont .md_cont .cont ._cont ._cont_tit ._m_cont.btn {
display: none
}
@media screen and (max-width: 960px) {
.modal .modal_cont .md_cont .cont ._cont ._cont_tit ._m_cont.btn {
position: absolute;
right: 0;
background: linear-gradient(180deg, #F02A7E 0%, #FE0A5B 100%);
border-radius: 6px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
max-width: 120px;
height: 100%
}
}
.modal .modal_cont .md_cont .cont ._cont .md_sub_menu {
display: flex;
gap: 10px;
padding: 10px;
background: #1d1b2b;
border-radius: 10px;
margin-bottom: 40px
}
@media screen and (max-width: 760px) {
.modal .modal_cont .md_cont .cont ._cont .md_sub_menu {
display: grid;
grid-template-columns: repeat(3, 1fr)
}
}
.modal .modal_cont .md_cont .cont ._cont .md_sub_menu a {
padding: 12px;
font: normal normal normal 12px Pretendard;
letter-spacing: -0.7px;
border-radius: 6px;
text-align: center
}
.modal .modal_cont .md_cont .cont ._cont .md_sub_menu a:hover,
.modal .modal_cont .md_cont .cont ._cont .md_sub_menu a._on {
background: #161320
}
.modal .modal_cont .md_cont .cont ._cont ._settings {
display: flex;
flex-flow: column;
justify-content: center;
padding: 40px;
background-color: #1d1b2b;
border-radius: 6px;
margin-top: 20px
}
.modal .modal_cont .md_cont .cont ._cont ._settings:nth-child(1) {
margin-top: 0
}
.modal .modal_cont .md_cont .cont ._cont ._settings ._tit {
font: normal normal normal 20px Pretendard;
letter-spacing: -1px;
color: #fff;
margin-bottom: 20px
}
.modal .modal_cont .md_cont .cont ._cont ._settings span._m_cont {
display: none
}
@media screen and (max-width: 720px) {
.modal .modal_cont .md_cont .cont ._cont ._settings span._m_cont {
display: flex;
color: #fff;
font: normal normal normal 14px Pretendard
}
}
.modal .modal_cont .md_cont .cont ._cont ._settings ._settings_cont {
padding: 10px 0;
border-bottom: 1px solid #46445b;
display: flex
}
.modal .modal_cont .md_cont .cont ._cont ._settings ._settings_cont>span {
font: normal normal normal 14px Pretendard;
letter-spacing: -0.7px;
color: #999;
width: 80px;
align-items: center;
display: flex
}
@media screen and (max-width: 720px) {
.modal .modal_cont .md_cont .cont ._cont ._settings ._settings_cont span._pc_cont {
display: none
}
}
.modal .modal_cont .md_cont .cont ._cont ._settings ._settings_cont .img_select {
display: flex;
gap: 10px;
align-items: center
}
.modal .modal_cont .md_cont .cont ._cont ._settings ._settings_cont .img_select .btn {
width: 80px;
height: 36px;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(180deg, #F02A7E 0%, #FE0A5B 100%);
border-radius: 4px;
font: normal normal normal 12px Pretendard !important;
border: 0
}
.modal .modal_cont .md_cont .cont ._cont ._settings ._settings_cont>div {
display: flex;
justify-content: space-between;
width: calc(100% - 80px);
align-items: center
}
.modal .modal_cont .md_cont .cont ._cont ._settings ._settings_cont>div form {
gap: 0
}
.modal .modal_cont .md_cont .cont ._cont ._settings ._settings_cont>div span {
font: normal normal normal 14px Pretendard;
letter-spacing: -0.7px
}
.modal .modal_cont .md_cont .cont ._cont ._settings ._settings_cont>div label {
width: 64px;
height: 64px;
position: relative
}
.modal .modal_cont .md_cont .cont ._cont ._settings ._settings_cont>div label>div {
position: absolute;
width: 64px;
height: 64px;
top: 0;
left: 0
}
.modal .modal_cont .md_cont .cont ._cont ._settings ._settings_cont>div label>div.select_profile {
z-index: 2
}
.modal .modal_cont .md_cont .cont ._cont ._settings ._settings_cont>div label ._profile,
.modal .modal_cont .md_cont .cont ._cont ._settings ._settings_cont>div label .preview {
position: absolute;
z-index: 1;
border-radius: 50%;
width: 54px;
height: 54px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.modal .modal_cont .md_cont .cont ._cont ._settings ._settings_cont ._basic_modal {
display: none;
flex-flow: column;
gap: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 40px;
width: 320px;
background: #262437;
border-radius: 20px
}
.modal .modal_cont .md_cont .cont ._cont ._settings ._settings_cont ._basic_modal._on {
display: flex
}
.modal .modal_cont .md_cont .cont ._cont ._settings ._settings_cont ._basic_modal .imgs {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px
}
.modal .modal_cont .md_cont .cont ._cont ._settings ._settings_cont ._basic_modal .imgs label {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
gap: 4px;
height: unset
}
.modal .modal_cont .md_cont .cont ._cont ._settings ._settings_cont ._basic_modal .btns .btn {
width: 80px;
height: 36px;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(180deg, #F02A7E 0%, #FE0A5B 100%);
border-radius: 4px;
font: normal normal normal 12px Pretendard !important;
border: 0
}
@media screen and (max-width: 760px) {
.modal .modal_cont .md_cont .cont ._cont ._settings ._settings_cont>div {
flex-flow: column;
gap: 10px
}
.modal .modal_cont .md_cont .cont ._cont ._settings ._settings_cont>div .img_select {
width: 100%;
justify-content: flex-end
}
.modal .modal_cont .md_cont .cont ._cont ._settings ._settings_cont>div .img_select>div {
order: 1
}
.modal .modal_cont .md_cont .cont ._cont ._settings ._settings_cont>div .img_select>div.btns {
order: 2;
flex-flow: column
}
}
.modal .modal_cont .md_cont .cont ._cont ._settings #fileInput {
width: 0;
height: 0
}
.modal .modal_cont .md_cont .cont ._cont .user_info {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
gap: 10px;
padding: 40px 0;
background-color: #1d1b2b;
border-radius: 6px;
margin-bottom: 40px
}
.modal .modal_cont .md_cont .cont ._cont .user_info>img {
margin-bottom: 10px
}
.modal .modal_cont .md_cont .cont ._cont .user_info>span {
font: normal normal normal 16px Pretendard;
letter-spacing: -0.8px;
color: #fff
}
.modal .modal_cont .md_cont .cont ._cont .user_info>span:nth-last-child(1) {
font: normal normal normal 14px Pretendard;
letter-spacing: -0.7px
}
@media screen and (max-width: 760px) {
.modal .modal_cont .md_cont .cont ._cont .user_info>span:nth-last-child(1) {
display: flex;
flex-flow: column
}
.modal .modal_cont .md_cont .cont ._cont .user_info>span:nth-last-child(1) ._pc_cont {
display: none
}
}
.modal .modal_cont .md_cont .cont ._cont .level_info_box {
display: flex;
flex-flow: column
}
.modal .modal_cont .md_cont .cont ._cont .level_info_box>div {
min-height: 68px;
border-bottom: 1px solid #1d1b2b;
display: flex;
align-items: center;
padding: 0 20px;
gap: 20px;
font: normal normal normal 14px Pretendard;
letter-spacing: -0.7px;
color: #fff
}
@media screen and (max-width: 760px) {
.modal .modal_cont .md_cont .cont ._cont .level_info_box>div {
padding: 10px 0;
gap: 10px
}
.modal .modal_cont .md_cont .cont ._cont .level_info_box>div>span:nth-child(2) {
display: none
}
}
.modal .modal_cont .md_cont .cont ._cont .level_info_box>div:nth-child(1) {
border-bottom: 0;
background: #1d1b2b;
justify-content: center;
min-height: 44px
}
.modal .modal_cont .md_cont .cont ._cont .level_info_box>div span {
word-break: keep-all;
color: #fff !important
}
.modal .modal_cont .md_cont .cont ._cont .level_info_box>div span:nth-last-child(1) {
color: #999
}
.modal .modal_cont .md_cont .cont ._cont .level_info_box>div .img {
align-items: center;
display: flex;
flex-flow: column;
justify-content: center
}
@media screen and (max-width: 760px) {
.modal .modal_cont .md_cont .cont ._cont .level_info_box>div .img {
width: 70px
}
}
.modal .modal_cont .md_cont .cont ._cont .level_info_box>div .img img {
width: 40px
}
.modal .modal_cont .md_cont .cont ._cont .level_info_box>div .img span {
display: none
}
@media screen and (max-width: 760px) {
.modal .modal_cont .md_cont .cont ._cont .level_info_box>div .img span {
display: flex
}
}
.modal .modal_cont .md_cont .cont ._cont .level_info_box>div .evlv {
width: 70px
}
.modal .modal_cont .md_cont .cont ._cont .level_info_box>div .lv_cont>div {
font-size: 12px
}
.modal .modal_cont .md_cont .cont ._cont .level_info_box>div .lv_cont>div ._tit {
width: 80px;
float: left
}
.modal .modal_cont .md_cont .cont ._cont .level_info_box>div .lv_cont>div ._point {
color: #f02a7e !important;
font-weight: bold
}
@media screen and (max-width: 760px) {
.modal .modal_cont .md_cont .cont ._cont .level_info_box>div .boon {
display: flex;
flex-flow: column
}
}
.modal .modal_cont .md_cont .cont ._cont .table table {
font: normal normal normal 14px Pretendard;
letter-spacing: -0.7px;
color: #fff;
text-align: center;
width: 100%
}
.modal .modal_cont .md_cont .cont ._cont .table table thead {
background: #1d1b2b
}
.modal .modal_cont .md_cont .cont ._cont .table table tbody td {
border-bottom: 1px solid #46445b
}
.modal .modal_cont .md_cont .cont ._cont .table table tr {
height: 44px
}
.modal .modal_cont .md_cont .cont ._cont .table table tr ._null {
min-height: 250px;
display: flex;
justify-content: center;
align-items: center
}
.modal .modal_cont .md_cont .cont ._cont select,
.modal .modal_cont .md_cont .cont ._cont input {
border-radius: 6px;
background: #161320 !important
}
.modal .modal_cont .md_cont .cont ._cont .money_btns {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 4px
}
.modal .modal_cont .md_cont .cont ._cont .money_btns a {
display: flex;
justify-content: center;
align-items: center;
height: 44px;
background: #1d1b2b;
font: normal normal normal 14px Pretendard;
color: #fff;
text-transform: uppercase
}
.modal .modal_cont .md_cont .cont ._cont .money_btns a:hover {
background: #262437
}
.modal .modal_cont .md_cont .cont ._cont .money_btns a:nth-last-child(1) {
background: linear-gradient(180deg, #F02A7E 0%, #FE0A5B 100%)
}
.modal .modal_cont .md_cont .cont ._cont .money_btns a:nth-last-child(1):hover {
background: linear-gradient(180deg, #FF539C 0%, #FF2B72 100%)
}
.modal .modal_cont .md_cont .cont ._cont ._text {
font: normal normal normal 14px Pretendard;
letter-spacing: -0.7px;
color: #fff
}
.modal .modal_cont .md_cont .cont form {
display: flex;
flex-flow: column;
gap: 20px
}
.modal .modal_cont .md_cont .cont form.join_form {
gap: 10px
}
.modal .modal_cont .md_cont .cont .content_con {
display: flex;
flex-flow: column;
gap: 10px
}
@media screen and (max-width: 720px) {
.modal .modal_cont .md_cont .cont .content_con {
gap: 3px
}
}
.modal .modal_cont .md_cont .cont .content_con>.btn {
background: linear-gradient(180deg, #F02A7E 0%, #FE0A5B 100%);
font: normal normal normal 14px Pretendard !important;
height: 44px
}
.modal .modal_cont .md_cont .cont .content_con>.btn:hover {
background: linear-gradient(180deg, #FF539C 0%, #FF2B72 100%)
}
@media screen and (max-width: 720px) {
.modal .modal_cont .md_cont .cont .content_con>.btn {
font: normal normal normal 12px Pretendard !important;
height: 36px;
min-width: 70px !important;
width: 100%
}
}
.modal .modal_cont .md_cont .cont .content_con .row {
font: normal normal normal 14px Pretendard !important;
letter-spacing: -0.7px
}
.modal .modal_cont .md_cont .cont .content_con .content_select {
display: flex;
gap: 10px;
min-width: 320px
}
@media screen and (max-width: 540px) {
.modal .modal_cont .md_cont .cont .content_con .content_select {
min-width: unset
}
}
.modal .modal_cont .md_cont .cont .content_con .content_select.has_btn select,
.modal .modal_cont .md_cont .cont .content_con .content_select.has_btn input {
border: 1px solid #46445b;
background: none;
width: calc(100% - 90px);
height: 44px
}
.modal .modal_cont .md_cont .cont .content_con .content_select.has_btn a {
width: 80px;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(180deg, #F02A7E 0%, #FE0A5B 100%);
border-radius: 4px;
font: normal normal normal 14px Pretendard !important
}
.modal .modal_cont .md_cont .cont .content_con .content_select.has_btn a:hover {
background: linear-gradient(180deg, #FF539C 0%, #FF2B72 100%)
}
.modal .modal_cont .md_cont .cont .content_con .content_select._phone select,
.modal .modal_cont .md_cont .cont .content_con .content_select._phone input {
border: 1px solid #46445b;
background: none;
width: calc(33% - 46px);
height: 44px
}
.modal .modal_cont .md_cont .cont .content_con .content_select._phone select {
min-width: calc(33% - 18px)
}
.modal .modal_cont .md_cont .cont .content_con .content_select._phone a {
width: 80px;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(180deg, #F02A7E 0%, #FE0A5B 100%);
border-radius: 4px;
font: normal normal normal 14px Pretendard !important
}
.modal .modal_cont .md_cont .cont .content_con .content_select._phone a:hover {
background: linear-gradient(180deg, #FF539C 0%, #FF2B72 100%)
}
.modal .modal_cont .md_cont .cont .content_con .content_select select,
.modal .modal_cont .md_cont .cont .content_con .content_select input {
border: 1px solid #46445b;
background: none;
width: 100%;
height: 44px;
padding: 0 12px
}
.modal .modal_cont .md_cont .cont .content_con.btns {
width: 100%;
flex-flow: unset;
justify-content: flex-end
}
.modal .modal_cont .md_cont .cont .content_con.btns a {
min-width: 120px
}
.modal .modal_cont .md_cont .cont .content_con.btns button {
width: 100%;
height: 44px;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(180deg, #F02A7E 0%, #FE0A5B 100%);
border-radius: 4px;
font: normal normal normal 14px Pretendard !important;
border: 0
}
.modal .modal_cont .md_cont .cont .content_con.btns button:hover {
background: linear-gradient(180deg, #FF539C 0%, #FF2B72 100%)
}
@media screen and (max-width: 720px) {
.modal .modal_cont .md_cont .cont .content_con.btns button {
width: 100%;
max-width: unset !important
}
}
.modal .modal_cont .md_cont .cont .content_con._join {
flex-flow: unset
}
.modal .modal_cont .md_cont .cont .content_con._join .row {
width: 95px;
display: flex;
align-items: center
}
@media screen and (max-width: 720px) {
.modal .modal_cont .md_cont .cont .content_con._join .row {
width: 70px;
font-size: 11px !important
}
}
.modal .modal_cont .md_cont .cont .content_con._join .content_select {
width: calc(100% - 95px)
}
@media screen and (max-width: 720px) {
.modal .modal_cont .md_cont .cont .content_con._join .content_select {
width: calc(100% - 70px)
}
}
.modal .modal_cont .md_cont .cont .content_con._join .content_select input,
.modal .modal_cont .md_cont .cont .content_con._join .content_select select {
height: 36px !important
}
.modal .modal_cont .md_cont .cont .content_con._join .content_select select option {
color: #000
}
.modal .modal_cont .md_cont .cont .content_con._join .content_select._phone {
gap: 5px;
align-items: center
}
.modal .modal_cont .md_cont .cont .content_con._join .content_select._phone select,
.modal .modal_cont .md_cont .cont .content_con._join .content_select._phone input {
width: calc(33% - 36px);
padding: 0 6px
}
.modal .modal_cont .md_cont .cont .content_con._join .content_select._phone a {
height: 100%
}
.modal .modal_cont .md_cont .cont .content_con.pw_check_md {
flex-flow: column;
gap: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 40px;
width: 320px;
background: #262437;
border-radius: 20px
}
.modal .modal_cont .md_cont .cont .content_con.pw_check_md .btns {
display: flex;
gap: 10px
}
.modal .modal_cont .md_cont .cont .content_con.pw_check_md .btns a {
width: 50%;
height: 36px;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(180deg, #F02A7E 0%, #FE0A5B 100%);
border-radius: 4px;
font: normal normal normal 12px Pretendard !important;
border: 0
}
.modal .modal_cont .md_cont .cont ._table {
border: 1px solid #262437;
text-align: center;
border-collapse: collapse
}
.modal .modal_cont .md_cont .cont ._table td {
border: 1px solid #262437;
padding: 5px;
border-collapse: collapse
}
.modal ._bank {
height: 100%;
max-height: 90vh;
z-index: 1;
position: relative
}
.modal ._bank>div {
padding: 20px;
border-radius: 20px;
width: 250px;
background: #262437;
margin-left: 10px
}
.modal ._bank>div ul {
background: #161320;
border-radius: 10px;
padding: 20px;
width: 100%;
display: flex;
gap: 4px;
flex-flow: column
}
.modal ._bank>div ul li {
width: 100%;
display: flex
}
.modal ._bank>div ul li._title {
justify-content: space-between;
align-items: center;
margin-bottom: 30px
}
.modal ._bank>div ul li._title h2 {
font-size: 20px
}
.modal ._bank>div ul li span {
font-size: 14px
}
.modal ._bank>div ul li span:nth-child(1) {
width: 100px;
display: flex;
align-items: center
}
.modal ._bank>a {
writing-mode: vertical-lr;
position: absolute;
top: 50%;
transform: translateY(-50%);
background: linear-gradient(180deg, #F02A7E 0%, #FE0A5B 100%);
width: 44px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 0 20px 20px 0
}
@media screen and (max-width: 960px) {
.modal ._bank>a {
display: none !important
}
}
@media screen and (max-width: 960px) {
.modal ._bank {
max-height: 100vh;
position: absolute;
left: 0;
top: 0
}
.modal ._bank>div {
width: 100vw;
margin-left: unset;
height: 100vh
}
.modal ._bank>div ul {
height: 100%
}
}
.vue_alert {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
z-index: 10000000002
}
.vue_alert ._bg {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .6)
}
.vue_alert ._alert_wrap {
width: 100%;
height: 300px;
background: #110f19;
padding: 10px;
max-width: 360px;
z-index: 1
}
.vue_alert ._alert_wrap ._alert {
display: flex;
height: 100%;
text-align: center;
flex-flow: column;
justify-content: space-between;
align-items: center
}
.vue_alert ._alert_wrap ._alert ._logo {
padding-top: 30px;
max-width: 150px
}
.vue_alert ._alert_wrap ._alert ._txt {
display: flex;
padding: 20px;
height: 100%;
justify-content: center;
align-items: center;
font-size: 14px
}
.nickname_md {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0
}
.nickname_md ._bg {
background-color: rgba(0, 0, 0, .6);
width: 100%;
height: 100%;
position: absolute
}
.nickname_md .nickname_md_cont {
position: absolute;
background: #161320;
padding: 20px;
border-radius: 10px;
left: 50%;
top: 50%;
z-index: 1;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
max-width: 360px;
gap: 20px;
transform: translate(-50%, -50%);
width: 100%
}
.nickname_md .nickname_md_cont img {
width: 140px
}
.nickname_md .nickname_md_cont h2 {
margin-bottom: 10px
}
.nickname_md .nickname_md_cont input {
border: 1px solid #46445b;
background: none;
width: 100%;
height: 44px;
padding: 0 12px
}
.nickname_md .nickname_md_cont span {
font-size: 14px
}
.nickname_md .nickname_md_cont span._point {
color: #f02a7e
}
.nickname_md .nickname_md_cont .btns {
display: flex;
gap: 10px;
width: 100%;
margin-top: 20px
}
.nickname_md .nickname_md_cont .btns .btn {
width: 100%;
height: 44px;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(180deg, #F02A7E 0%, #FE0A5B 100%);
border-radius: 4px;
font: normal normal normal 12px Pretendard !important;
border: 0
}
@media screen and (max-width: 720px) {
header .hd_t {
height:100px;
}
header .hd_t .inne .logo {
width: 200px
}
footer .inne .ft_t .logo {
max-width: 160px;
}
}