@charset "utf-8";
:root {
  --btn1-color: linear-gradient(#b246ff 0%, #6d00ba 100%);
  --btn2-color: linear-gradient(#797979 0%, #3e3e3e 100%);
  --btn1h-color: linear-gradient(-45deg, #b246ff 0%, #6d00ba 100%);
  --btn2h-color: linear-gradient(-45deg, #797979 0%, #3e3e3e 100%);
}


#wrap {float:left; width:100%; background:#232323; transition:all 0.5s;}

/*-------------------------------------------------------------------------------------*
 *  Header                                                                             *
 *-------------------------------------------------------------------------------------*/
.header_wrap{float:left; width:100%;}
.top_wrap{float:left; width:100%; padding:0 10px; background:url(../images/bg_header.jpg) center top repeat-x;}
.top_box{width:100%; max-width:1400px; margin:0 auto; display:flex; align-items:center; position:relative;}

.logo{float:left; margin:0 auto 0 0;position:relative;}
.logo img{ transition:all 0.5s; z-index:10}

@media screen and  (min-width:1240px) {
.logo img{ position:absolute;top:-100px;height:180px;}
}



.gnb{float:left;}
.gnb ul{width:100%; display:flex; align-items:center; justify-content:center;}
.gnb li{float:left; margin:0 0 0 70px; line-height:88px;}
.gnb li a{font-weight:700; font-size:20px; color:#ffffff; text-shadow:2px 0 3px rgba(0,0,0,0.5); transition:all 0.5s;}
.gnb li:hover a{color:#b043fe;}

.bottom_wrap{float:left; width:100%; padding:0 10px; background:#141414}
.bottom_box{width:100%; max-width:1400px; margin:0 auto; height:46px; display:flex; align-items:center;}


.my{float:left; margin:0 0 0 auto;}
.my ul{width:100%; display:flex; align-items:center; justify-content:center;}
.my li{float:left; margin:0 0 0 20px; line-height:34px; font-weight:500; font-size:14px; color:#ffffff;}
.my li:last-child{margin:0 0 0 5px;}
.my li a{font-weight:500; font-size:14px; color:#ffffff; transition:all 0.5s;}
.my_font01{color:#ff00e6;}

.util_btn1  {background:var(--btn1-color); min-width:110px; height:34px; line-height:34px; display:inline-block; text-align:center; border-radius:5px;font-weight:500; font-size:16px; color:#ffffff; transition:all 0.5s;}
.util_btn1:hover{background:var(--btn1h-color);}
.util_btn2  {background:var(--btn2-color); min-width:110px; height:34px; line-height:34px; display:inline-block; text-align:center; border-radius:5px;font-weight:500; font-size:16px; color:#ffffff; transition:all 0.5s;}
.util_btn2:hover{background:var(--btn2h-color);}

.m_menu{display:none; position:absolute; top:50%; transform:translateY(-50%); cursor:pointer;}
.m_menu img{display:inline-block; width:40px;}
.m_menu1{left:0;}
.m_menu2{right:0;}

#sub_page .logo{width:100%; text-align:center;}
@media screen and (max-width:1240px) {
    .header_box{}
	.bottom_wrap{display:none;}
	.gnb{display:none;}
    .m_menu{display:block;}
	
	.top_wrap{background-size:auto 100%;}
	.top_box{padding:10px 0;}
	.logo{width:100%; text-align:center;}
	.logo img{position:relative;top:0px;height:40px;}

	
	
	
	#sub_page .gnb{display:block;}
	#sub_page .gnb ul{display:grid; grid-gap: 2px; grid-template-columns: repeat(4, 1fr);}
	#sub_page .gnb ul li{margin:0; line-height:1; width:100%;}
	#sub_page .gnb ul li a{font-weight:500; font-size:16px; padding:10px 5px; width:100%; display:block; text-align:center;}
}

/*-------------------------------------------------------------------------------------*
 *  Contents                                                                           *
 *-------------------------------------------------------------------------------------*/
.contents_wrap {float:left; width:100%; margin:20px 0 0 0; padding:10px 5px 30px; transition:all 0.5s; background:rgba(0,0,0,0.3);}
.contents_box {width:100%; max-width:1400px; min-height:600px; margin:0 auto; overflow:hidden;}


.title{float:left; width:100%; height:50px; line-height:50px; padding:0 0 0 00px;  text-align:center; font-size:24px; font-weight:700; color:#ffffff;transition:all 0.5s;}

.con_box00 {float:left; width:100%; margin:0 0 0 0;}
.con_box05 {float:left; width:100%; margin:5px 0 0 0;}
.con_box10 {float:left; width:100%; margin:10px 0 0 0;}
.con_box20 {float:left; width:100%; margin:20px 0 0 0;}
.con_box30 {float:left; width:100%; margin:30px 0 0 0;}
.con_box40 {float:left; width:100%; margin:40px 0 0 0;}
.con_box50 {float:left; width:100%; margin:50px 0 0 0;}
.con_box60 {float:left; width:100%; margin:60px 0 0 0;}

@media screen and (max-width:1024px) {
	.contents_wrap{margin:10px 0 0 0;}
	.title{height:auto; line-height:1; padding:20px;font-size:20px;}
}


/* 버튼버튼 */
.btn3_1         {display:inline-block; text-align:center; border-radius:5px; color:#ffffff; font-size:16px; letter-spacing:-1pt; font-weight:500; text-shadow:1px 1px 1px rgba(0,0,0,0.3); box-shadow:rgba(0,0,0,0.0) 2px 2px 2px -1px;}
.btn3_2         {display:inline-block; text-align:center; border-radius:5px; color:#ffffff; font-size:16px; letter-spacing:-1pt; font-weight:500; text-shadow:1px 1px 1px rgba(0,0,0,0.3); box-shadow:rgba(0,0,0,0.0) 2px 2px 2px -1px;}
.btn_wrap_center       {float:left; width:100%; text-align:center;}
.btn_wrap_center ul li {display:inline;}

.btn3_1         {background:var(--btn1-color); min-width:220px; height:50px; line-height:50px;}
.btn3_1:hover   {background:var(--btn1h-color);}

.btn3_2         {background:var(--btn2-color); min-width:220px; height:50px; line-height:50px;}
.btn3_2:hover   {background:var(--btn2h-color);}

@media screen and (max-width:768px) {
	.display_flex{display:flex; flex-wrap: nowrap; align-items: center; justify-content: center;}
	.display_flex li{width:100%; margin:0 2px 0 2px;}
								   
	[class*="btn3_"] {min-width:100%;}
}

.btn1_1:hover , .btn1_2:hover , .btn2_1:hover , .btn2_2:hover , .btn3_1:hover , .btn3_2:hover {
	-webkit-animation: mouseover03 0.3s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
	        animation: mouseover03 0.3s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
}


@keyframes mouseover03 {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
}

/*-------------------------------------------------------------------------------------*
 *  main                                                                               *
 *-------------------------------------------------------------------------------------*/
 .visual{float:left; width:100%; position:relative; transition:all 0.5s;}
 .visual>img{display:inline-block; width:100%;}
 
 @media screen and (max-width:1240px) {
	
}
.main_content_wrap{float:left; width:100%; padding:0 10px 50px; margin:0 0 0 0; background:url(../images/bg_main.jpg) center top no-repeat fixed; background-size:100%;}
.main_content_box{width:100%; max-width:1400px; margin:0 auto;}


.main_game_box{width:100%; margin:0 auto; padding:0px 0 0;}

.main_game_m{float:left; width:100%; margin:2.08vw 0 0 0;}
.main_game_tab{float:left; width:100%; display:flex; align-items:center; justify-content:center;}
.main_game_tab li{float:left; margin:0 40px 0 0;}
.main_game_tab li:nth-child(2n){margin:0 0 0 0;}
.main_game_tab li a{display:flex; align-items:center; width:100%;}
.main_game_tab li a [data-name="show"]{display:block;}
.main_game_tab li a [data-name="hide"]{display:none;}
.main_game_tab li.active a [data-name="show"]{display:none;}
.main_game_tab li.active a [data-name="hide"]{display:block;}
.main_game_tab li:hover a [data-name="show"]{display:none;}
.main_game_tab li:hover a [data-name="hide"]{display:block;}


.main_game_tab_con{float:left; width:100%; margin:2.6vw 0 0 0;}

@media screen and (max-width:1240px) {
	.main_game_tab li{width:calc(50% - 5px); margin:0 10px 0 0}
	.main_game_tab li a img{width:100%;}
}


/* 카지노 */
.game_list{float:left; width:100%;}
.game_list li{float:left; width:calc(100% / 4  - 15px); margin:0 20px 20px 0;}
.game_list li:nth-child(4n){margin:0 0 20px 0;}
.game_list li a{display:block; border-radius:0px;}
.game_list li a img{width:100%;}

@media screen and (max-width:1240px) {
.game_list li{width:33%; margin:0 0.5% 1% 0;}
.game_list li:nth-child(4n){margin:0 0.5% 1% 0;}    
.game_list li:nth-child(3n){margin:0 0 1% 0;}    
}

@media screen and (max-width:768px) {
.game_list li{width:49.5%; margin:0 1% 1% 0;}
.game_list li:nth-child(4n){margin:0 1% 1% 0;}    
.game_list li:nth-child(3n){margin:0 1% 1% 0;}    
.game_list li:nth-child(2n){margin:0 0 1% 0;}    
}

.main_board_box{float:left; width:100%; margin:2.6vw 0 0 0; display:flex;}
.board_box{float:left; width:calc(50% - 10px); height:auto; margin:0 20px 0 0; background:#393939; padding:20px;}
.board_box:last-child{margin:0;}
.board_title{float:left; width:100%; display:flex; align-items:center; height:60px; line-height:60px; padding:0 15px 0 0px; border-radius:10px; text-align:left; font-family: 'EsaManru'; font-weight:700; font-size:20px; color:#ffffff; text-shadow:2px 0 3px rgba(0,0,0,0.3);}
.board_title a{margin:0 0 0 auto; transition:all 0.5s; font-weight:700; font-size:10px; color:#bebebe;}
.board_title a:hover{color:#ff00e6;}

.myTable{table-layout:fixed;}
.board{float:left; width:100%; height:auto; overflow:hidden; padding:5px;}
.board td{font-family:'EsaManru'; font-weight:500; color:#8a8a8a; font-size:16px; line-height:40px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-bottom:1px solid rgba(255,255,255,0.0); text-shadow:2px 0 3px rgba(0,0,0,0.3); transition:all 0.5s;}
.board td:first-child{font-weight:500; color:#ffffff;}

@media screen and (max-width:1280px) {
    .main_board_box{flex-wrap:wrap;}
    .board_box{width:100%; margin:0 0 1% 0;}
	.board_title{height:50px; font-size:18px;}
	.board_title span{font-size:14px;}
	.board td{font-size:14px; line-height:40px;}
}


.main_jackpot{float:left; width:100%; margin:0 0 0 0; position:absolute; bottom:0; display:grid; grid-gap: 16px; grid-template-columns: repeat(3, 1fr);  background:rgba(0,0,0,0.6); padding:0 30px; transition: all 0.3s;}
.main_jackpot_box{float:left; width:100%; text-align:center; height:180px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; align-content: center;}
.mjb_title{float:left; width:100%; text-align:center; padding:0 20px;}
.mjb_title img{display:inline-block; width:100%; max-width:305px; transition:all 0.5s;}
.mjb_won{float:left; width:100%; margin: 10px 0 0 0; text-align:center; font-weight:700; font-size:48px; color:#ffec00;}

@media screen and (max-width:1280px) {
	.mjb_title{}
	.mjb_won{font-size:2.5vw;}
}
@media screen and (max-width:1024px) {
    .main_jackpot{grid-gap: 0px; grid-template-columns: repeat(1, 1fr);}
    .main_jackpot_box{display:none; height:70px}
    .main_jackpot_box:nth-child(1){display:flex;}
	.mjb_title{font-size:18px;}
	.mjb_title img{width:180px;}	
	.mjb_won{margin:5px 0 0 0; font-size:24px;}	
}
/*-------------------------------------------------------------------------------------*
 *  Footer                                                                             *
 *-------------------------------------------------------------------------------------*/
.footer_wrap{float:left; width:100%; text-align:center; padding:30px 0 50px; background:url(../images/bg_footer.jpg) center top no-repeat; background-size:cover;}
.footer_box{float:left; width:100%; text-align:center;}

.f_partners{float:left; width:100%; text-align:center; margin:30px 0 0 0; padding:0 20px;}
.f_partners img{display:inline-block; width:100%; max-width:1400px;}

.f_copy{float:left; width:100%; margin:40px 0 0 0; text-align:center; padding:0 20px;}
.f_copy span{display:inline-block; color:#737373;}

@media screen and (max-width:1240px) {
    .f_copy{font-size:11px;}
}


/*-------------------------------------------------------------------------------------*
 *  login                                                                              *
 *-------------------------------------------------------------------------------------*/
#login{float:left; width:100%; min-height:100vh; position:fixed; left:0; top:0; z-index:9999; background:rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center; display:none; backdrop-filter: blur(10px);}
.login_wrap{width:80%; max-width:320px; margin:0 auto; max-height:700px; transition:all 0.5s;}

#join{float:left; width:100%; min-height:100vh; position:fixed; left:0; top:0; z-index:9999; background:rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center; display:none; backdrop-filter: blur(10px);}
.join_wrap{width:95%; max-width:1000px; margin:0 auto; max-height:80vh; transition:all 0.5s;}
.join_box{width:100%; padding:40px 20px; max-height:80vh; overflow-y:auto; display: flex; flex-direction: column; transition:all 0.5s;}
.join_box::-webkit-scrollbar {width: 3px;  /* 스크롤바의 너비 */}
.join_box::-webkit-scrollbar-thumb {height: 30%; /* 스크롤바의 길이 */ background: rgba(255,255,255, 0.1); /* 스크롤바의 색상 */border-radius: 5px;}
.join_box::-webkit-scrollbar-track {background: rgba(255,255,255, 0.1);  /*스크롤바 뒷 배경 색상*/}

.loginbox{width:100%; float:left; background:url(../images/bg_popup.jpg)center center no-repeat; background-size:cover; border-radius:10px 10px 10px 10px; display:flex; position:relative;}

.close_btn_cu{text-align:center; color:#d4d4d4; font-weight:700; position:absolute; left:50%; transform:translate(-50%); top:-55px; z-index:11; transition:all 0.3s;}
.close_btn_cu  img{transition:all 0.3s;}

/* .loginbox_l{width:531px; position:relative;} */
.loginbox_l img{position:absolute; bottom:0; left:-0px;}
.loginbox_r{width:calc(100% - 0px); padding:40px 20px; min-height:300px; max-height:700px; overflow-y:auto; display: flex; flex-direction: column; justify-content: center; transition:all 0.5s;}
.loginbox_r1{justify-content:flex-start; width:100%;}
.loginbox_r::-webkit-scrollbar {width: 3px;  /* 스크롤바의 너비 */}
.loginbox_r::-webkit-scrollbar-thumb {height: 30%; /* 스크롤바의 길이 */ background: rgba(255,255,255, 0.1); /* 스크롤바의 색상 */border-radius: 5px;}
.loginbox_r::-webkit-scrollbar-track {background: rgba(255,255,255, 0.1);  /*스크롤바 뒷 배경 색상*/}

.login_logo{float:left; width:100%; text-align:center; padding:0 20px;}
.login_logo img{width:100%; max-width:240px;}
.login_title{float:left; width:100%; margin:10px 0 0 0; text-align:center; padding:0 0 0 10px; font-weight:300; font-size:16px; color:#ffffff;}
.login {float:left; width:100%; margin:30px 0 0 0;}
.login li {float:left; width:100%; padding:1%; transition:all 0.2s;} /* ysk 가로 100%로 변경시 세로형 */

.login1 {float:left; width:100%; margin:10px 0 0 0;}
.login1 ul{display:flex; flex-wrap:wrap;}
.login1 li {float:left; width:100%; padding:1% 1%; transition:all 0.2s;} /* ysk 가로 100%로 변경시 세로형 */
.join_title{float:left; width:100%; padding:0 0 5px; font-family:'Esamanru'; font-weight:300; font-size:12px; color:#ffffff;}
.join_text{float:left; width:100%; padding:5px 0 0; font-family:'Esamanru'; font-weight:300; font-size:12px; color:#999999;}
.join_phone{float:left; width:100%; display:flex;}
.join_phone .login_btn1{width:45%;}

/* 특별한 */
.login1 li{display:flex; align-items:center; background:rgba(0,0,0,0.6); border-bottom:1px solid rgba(255,255,255,0.1);}
.join_title{float:left; width:15%; height:100%; text-align:center; padding:5px; display:flex; align-items:center; justify-content:center;}
.join_phone{float:left; width:55%; text-align:center; padding:5px;}
.join_text{width:30%;}

.login_input  {background-color:#7f008d; border:1px solid #9000bd; color:#ffffff; width:100%; height:50px; font-size:16px; font-weight:500; border-radius:5px; padding:0 0 0 15px;  font-family:'EsaManru';}
.login_input::placeholder {color:#ff99ff; font-size:12px; letter-spacing:0pt;}
.login_input:focus{border:1px solid #6e4f1f;}

.login_font01{font-family:'Esamanru'; font-weight:300; font-size:12px; color:#bababa;}
.login_font02{color:#ffffff;}

.login_btn_box2{float:left; width:100%; margin:10px 0 0 0; text-align:center;}
.login_btn_box2 li{float:left; width:50%; padding:1%; transition:all 0.2s; font-weight:500; font-size:14px; color:#ffffff;}

.login_btn1  {background:var(--btn1-color); width:100%; height:40px; line-height:40px; display:inline-block; text-align:center; border-radius:5px; font-family:'Esamanru'; font-weight:500; font-size:14px; color:#ffffff;}
.login_btn2  {background:var(--btn2-color); width:100%; height:40px; line-height:40px; display:inline-block; text-align:center; border-radius:5px; font-family:'Esamanru'; font-weight:500; font-size:14px; color:#ffffff;}

.login_btn1:hover{background:var(--btn1h-color);}
.login_btn2:hover{background:var(--btn2h-color);}


.login1 .login_input{height:40px; line-height:40px;}
@media screen and (max-width:1060px) {
    .loginbox_r{height:auto;}
	
	/* 특별한 */
	.login1 li{flex-wrap:wrap;}
	.join_title{width:84px; height:auto;}
	.join_phone{width:calc(100% - 84px);}
	.join_text{width:100%; padding:0 10px;}
	.join_phone .login_btn1{font-size:12px;}
	.join_phone .login_btn2{font-size:12px;}
	
}
@media screen and (max-width:768px) {
    .loginbox_l{display:none;}
    .loginbox_r{width:100%; padding:30px 5px;}
	.login_logo{padding:0 30px;}
	.login1 li{width:100%;} 
}


/* 서브페이지팝업 */
#sub_page{float:left; width:100%; min-height:100vh; position:fixed; left:0; top:0; z-index:9999; background:rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center; display:none; backdrop-filter: blur(10px);}
.sub_page_wrap{width:98%; max-width:1400px; margin:0 auto; max-height:80vh; transition:all 0.5s;}

.sub_page_box{width:calc(100% - 0px); padding:40px 20px; min-height:80vh; max-height:700px; overflow-y:auto; display: flex; flex-direction: column; transition:all 0.5s;}
.sub_page_box::-webkit-scrollbar {width: 3px;  /* 스크롤바의 너비 */}
.sub_page_box::-webkit-scrollbar-thumb {height: 30%; /* 스크롤바의 길이 */ background: rgba(255,255,255, 0.1); /* 스크롤바의 색상 */border-radius: 5px;}
.sub_page_box::-webkit-scrollbar-track {background: rgba(255,255,255, 0.1);  /*스크롤바 뒷 배경 색상*/}