@charset "utf-8";
#wrap {width:100%; overflow:hidden;}

/*-------------------------------------------------------------------------------------*
 *  미니게임&카지노페이지                                                                 *
 *-------------------------------------------------------------------------------------*/
.game_contents_full{float:left; width:calc(100% - 300px); padding:10px; height:100%; overflow-x:hidden; overflow-y: auto;}
.game_contents_full::-webkit-scrollbar {width: 4px; height: 4px;}
.game_contents_full::-webkit-scrollbar-thumb {background-color:rgba(255,255,255,0.1); border-radius: 12px;}
.game_contents_full::-webkit-scrollbar-track {display: none;}



.game_tab{justify-content: center; padding: 30px 0 20px;}
.game_tab_button{width:100%; max-width:300px; height:40px; display: flex; align-items: center; justify-content: center; white-space: nowrap; /*border-radius: 40px 0 0 40px;*/ background:#2c2c2c; color:#ffffff; opacity:0.6;}
/*
.game_tab_button:last-child{border-radius:0 40px 40px 0;}
*/
.game_tab_button.active{background-image: linear-gradient(90deg, #006da8 0, #008ad3);
  color: #fff;
  font-family: 'EsaManru';
  font-weight: 500;
  font-size: 13px;
  text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.39); opacity:1;}

.game_icon{display:inline-block; width:34px; margin:0 5px 0 0;}

@media (hover: hover) {
.game_tab_button:hover{color:#fff; opacity:1;}
}

@media screen and (max-width:1480px) {
	.game_contents_full{width:100%;}   
}

@media screen and (max-width:1024px) {
	.game_contents_full{padding:0 0 10px 0;}   
	.game_tab{padding:20px 10px 10px;}   
}




.mini_select_slider{padding: 0 10px; height: 40px; flex-shrink: 0; align-items: center; background-color: #242424; margin-top: 10px; margin-bottom: 10px; position: relative;}
.mini_select_tab{width:100%; overflow-x: auto;}
.mini_select_tab ul{display: flex; align-items: center; height: 40px; float:left;}
.mini_select_tab ul li{min-width:60px; height: 40px; padding: 0 20px; display: flex; align-items: center; justify-content: center; background:#242424; cursor: pointer; border-radius:0px; color:#ffffff; transition:all 0.5s}
.mini_select_tab ul li .txt{color:#ffffff;}
.mini_select_tab ul li.active .txt{color:#0759c4;}

.mini_select_tab::-webkit-scrollbar {width: 4px; height: 4px;}
.mini_select_tab::-webkit-scrollbar-thumb {background-color:rgba(255,255,255,0.1); border-radius: 12px;}
.mini_select_tab::-webkit-scrollbar-track {display: none;}

.mini_bet_zone{width:100%; margin:10px 0 0 0; overflow:hidden;}
.mini_title{height: 40px; padding: 0 10px; align-items: center; background-color: #202020; border-bottom: 1px solid rgba(0,0,0,0.2);}
.mini_title_img{display:inline-block; margin:0 5px 0 0; width:20px;}

.mini_botton_zone{}
.mini_betting_zone{float:left; width:calc(100% - 300px);}
.mini_cart_zone{float:left; width:300px;}
.bet_mini_title{height:20px; color:#0759c4;}
.bet_mini_title span{color:#ffffff; margin:0 0 0 5px;}
.bet_mini{color:#65bfff;}

.mini_cart_zone .cart_tab_content{height:340px;}

.market_btn_box{display:flex; border-bottom: 1px solid #1a1a1a;}
.market_btn_box2 .market_btn{width:50%;}
.market_btn_box3 .market_btn{width:33.33333%;}
.market_btn{display:flex; padding:10px 0; background:#242424; border-right:1px solid #1a1a1a;  width:100%; flex-direction:column;}
.market_btn:last-child{border-right:none;}

.market_btn.active{box-shadow: inset 0 0 0 1px #0759c4;}

/* 21/7 수정 */
.mini_botton_zone_multi .mini_betting_zone{width:100%;}
.mini_multi_wrap{width:100%; overflow:hidden;}
.mini_multi_box{float:left; width:calc(50% - 5px); margin:0 10px 10px 0;}
.mini_multi_box:nth-child(2n){margin:0 0 10px 0;}

@media (hover: hover) {
.market_btn:hover{box-shadow: inset 0 0 0 1px #0759c4;}
}
@media screen and (max-width:768px) {
.mini_betting_zone{width:100%;}
.mini_cart_zone{width:100%;}  
.mini_multi_box{width:100%; margin:0 0 10px 0;} 
.mini_multi_box:last-child{margin:0;}
}






























/*-------------------------------------------------------------------------------------*
 *  특별한                                                                              *
 *-------------------------------------------------------------------------------------*/
:root {
  --color1: rgb(0, 231, 255);
  --color2: rgb(255, 0, 231);
  --back: url(https://cdn2.bulbagarden.net/upload/1/17/Cardback.jpg);
  --charizard1: #fac;
  --charizard2: #ddccaa;
  --charizardfront: url();
  --pika1: #54a29e;
  --pika2: #a79d66;
  --pikafront: url();
  --eevee1: #efb2fb;
  --eevee2: #acc6f8;
  --eeveefront: url();
  --mewtwo1: #efb2fb;
  --mewtwo2: #acc6f8;
  --mewtwofront: url();
}

.card {
  width: 19%;
  height: auto;
  position: relative;
  overflow: hidden;
  z-index: 10;
  margin:0.5%;
  touch-action: none;
  /* border-radius: 5%/3.5%; */

  transition: transform 0.5s ease, box-shadow 0.2s ease;
  will-change: transform, filter;
  background-color: #040712;
  background-image: var(--front);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  transform-origin: center;
  max-height: 13.9vw;
}
@media screen and (max-width:1440px) {
 .card{width: 32.33333%;max-height: 23vw}   
}
@media screen and (max-width:768px) {
 .card{width: 49%;max-height: 35vw}   
}
.card img{width:100%; max-width:560px; /*max-height:14vw;*/}
.card a{position:relative; width:100%; height:100%; z-index:99;}
@media screen and (min-width: 600px) {
  .card {
    /* width: clamp(12.9vw, 61vh, 18vw); */
    /* height: clamp(18vw, 85vh, 25.2vw); */
  }
}

.card:hover {
  box-shadow: -20px -20px 30px -25px var(--color1), 20px 20px 30px -25px var(--color2), -7px -7px 10px -5px var(--color1), 7px 7px 10px -5px var(--color2), 0 0 13px 4px rgba(255, 255, 255, 0.3), 0 55px 35px -20px rgba(0, 0, 0, 0.5);
}

.card.charizard {
  --color1: var(--charizard1);
  --color2: var(--charizard2);
  --front: var(--charizardfront);
}

.card.pika {
  --color1: var(--pika1);
  --color2: var(--pika2);
  --front: var(--pikafront);
}

.card.mewtwo {
  --color1: var(--mewtwo1);
  --color2: var(--mewtwo2);
  --front: var(--mewtwofront);
}

.card.eevee {
  --color1: #ec9bb6;
  --color2: #ccac6f;
  --color3: #69e4a5;
  --color4: #8ec5d6;
  --color5: #b98cce;
  --front: var(--eeveefront);
}

.card:before,
.card:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-repeat: no-repeat;
  opacity: 0.5;
  mix-blend-mode: color-dodge;
  transition: all 0.33s ease;
}

.card:before {
  background-position: 50% 50%;
  background-size: 300% 300%;
  background-image: linear-gradient(115deg, transparent 0%, var(--color1) 25%, transparent 47%, transparent 53%, var(--color2) 75%, transparent 100%);
  opacity: 0.5;
  filter: brightness(0.5) contrast(1);
  z-index: 1;
}

.card:after {
  opacity: 1;
  background-image: url("https://assets.codepen.io/13471/sparkles.gif"), url(https://assets.codepen.io/13471/holo.png), linear-gradient(125deg, #ff008450 15%, #fca40040 30%, #ffff0030 40%, #00ff8a20 60%, #00cfff40 70%, #cc4cfa50 85%);
  background-position: 50% 50%;
  background-size: 160%;
  background-blend-mode: overlay;
  z-index: 2;
  filter: brightness(1) contrast(1);
  transition: all 0.33s ease;
  mix-blend-mode: color-dodge;
  opacity: 0.75;
}

.card.active:after,
.card:hover:after {
  filter: brightness(1) contrast(1);
  opacity: 1;
}

.card.active,
.card:hover {
  animation: none;
  transition: box-shadow 0.1s ease-out;
}

.card.active:before,
.card:hover:before {
  animation: none;
  background-image: linear-gradient(110deg, transparent 25%, var(--color1) 48%, var(--color2) 52%, transparent 75%);
  background-position: 50% 50%;
  background-size: 250% 250%;
  opacity: 0.88;
  filter: brightness(0.66) contrast(1.33);
  transition: none;
}

.card.active:before,
.card:hover:before,
.card.active:after,
.card:hover:after {
  animation: none;
  transition: none;
}

.card.animated {
  transition: none;
  animation: holoCard 12s ease 0s 1;
}
.card.animated:before {
  transition: none;
  animation: holoGradient 12s ease 0s 1;
}
.card.animated:after {
  transition: none;
  animation: holoSparkle 12s ease 0s 1;
}

@keyframes holoSparkle {
  0%, 100% {
    opacity: 0.75;
    background-position: 50% 50%;
    filter: brightness(1.2) contrast(1.25);
  }
  5%, 8% {
    opacity: 1;
    background-position: 40% 40%;
    filter: brightness(0.8) contrast(1.2);
  }
  13%, 16% {
    opacity: 0.5;
    background-position: 50% 50%;
    filter: brightness(1.2) contrast(0.8);
  }
  35%, 38% {
    opacity: 1;
    background-position: 60% 60%;
    filter: brightness(1) contrast(1);
  }
  55% {
    opacity: 0.33;
    background-position: 45% 45%;
    filter: brightness(1.2) contrast(1.25);
  }
}
@keyframes holoGradient {
  0%, 100% {
    opacity: 0.5;
    background-position: 50% 50%;
    filter: brightness(0.5) contrast(1);
  }
  5%, 9% {
    background-position: 100% 100%;
    opacity: 1;
    filter: brightness(0.75) contrast(1.25);
  }
  13%, 17% {
    background-position: 0% 0%;
    opacity: 0.88;
  }
  35%, 39% {
    background-position: 100% 100%;
    opacity: 1;
    filter: brightness(0.5) contrast(1);
  }
  55% {
    background-position: 0% 0%;
    opacity: 1;
    filter: brightness(0.75) contrast(1.25);
  }
}
@keyframes holoCard {
  0%, 100% {
    transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg);
  }
  5%, 8% {
    transform: rotateZ(0deg) rotateX(6deg) rotateY(-20deg);
  }
  13%, 16% {
    transform: rotateZ(0deg) rotateX(-9deg) rotateY(32deg);
  }
  35%, 38% {
    transform: rotateZ(3deg) rotateX(12deg) rotateY(20deg);
  }
  55% {
    transform: rotateZ(-3deg) rotateX(-12deg) rotateY(-27deg);
  }
}
.card.eevee:hover {
  box-shadow: 0 0 30px -5px white, 0 0 10px -2px white, 0 55px 35px -20px rgba(0, 0, 0, 0.5);
}

.card.eevee:hover:before,
.card.eevee.active:before {
  background-image: linear-gradient(115deg, transparent 20%, var(--color1) 36%, var(--color2) 43%, var(--color3) 50%, var(--color4) 57%, var(--color5) 64%, transparent 80%);
}

.demo .card {
  background-image: var(--back);
  font-size: 2vh;
}

.demo .card > span {
  position: relative;
  top: 45%;
}

.demo .card:nth-of-type(1),
.demo .card:nth-of-type(2),
.demo .card:nth-of-type(3) {
  width: 20vh;
  height: 27.5vh;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 25px 15px -10px rgba(0, 0, 0, 0.5);
  animation: none;
}

.demo .card:nth-of-type(1):before, .demo .card:nth-of-type(1):after,
.demo .card:nth-of-type(2):before,
.demo .card:nth-of-type(2):after,
.demo .card:nth-of-type(3):before,
.demo .card:nth-of-type(3):after {
  animation: none;
}

.demo .card:nth-of-type(1):before, .demo .card:nth-of-type(1):after {
  display: none;
}

.demo .card:nth-of-type(2) {
  background: none;
}
.demo .card:nth-of-type(2):before {
  display: none;
}

.demo .card:nth-of-type(3) {
  background: none;
}
.demo .card:nth-of-type(3):after {
  display: none;
}

.operator {
  display: inline-block;
  vertical-align: middle;
  font-size: 6vh;
}


#app {
  position: relative;
  overflow: hidden;
   width: 100%;
}

.demo,
.cards {
  display: flex;
  width:100%;
  flex-wrap:wrap;
  align-items: center;
  perspective: 2000px;
  position: relative;
  z-index: 1;
  transform: translate3d(0.1px, 0.1px, 0.1px);
}

.demo {
  flex-direction: row;
  justify-content: center;
}

.cards .card:nth-child(2), .cards .card:nth-child(2):before, .cards .card:nth-child(2):after {
  animation-delay: 0.25s;
}
.cards .card:nth-child(3), .cards .card:nth-child(3):before, .cards .card:nth-child(3):after {
  animation-delay: 0.5s;
}
.cards .card:nth-child(4), .cards .card:nth-child(4):before, .cards .card:nth-child(4):after {
  animation-delay: 0.75s;
}

.promo {
  margin-top: 50px;
}

.promo img {
  margin-top: 10px;
  max-width: 80%;
}

p a {
  color: cyan;
}

html, body, main {
  min-height: 100%;
}

@keyframes rubberBand {
  from {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    transform: scale3d(1.05, 0.95, 1);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}
@media screen and (max-width:1024px) {
    .hover{display:none;}
	.card{touch-action: auto;}
}