@charset "utf-8";
#wrap {width:100%; min-width:1440px; overflow:hidden; background:#f1f7f8; display:flex; justify-content:space-between;}

/*-------------------------------------------------------------------------------------*
 *  Header                                                                             *
 *-------------------------------------------------------------------------------------*/
.wrap_left{float:left; width:280px; text-align:center; background:url(../images/bg_left.jpg) center top repeat-y; background-size:100%; box-shadow: 5px 0px 5px 0px rgba(0, 0, 0, 0.15); position:relative; z-index:100;}
.wrap_right{float:right; width:calc(100% - 280px);background-color: #000000;}

.logo{float:left; width:100%; text-align:center; margin:45px 0 0 0;}
.logo_item{float:left; width:100%; text-align:center; margin:15px 0 0 0;}

.left_game{float:left; width:100%;}
.left_game li{float:left; width:100%; margin:0 0 5px 0;}
.left_game li a{display:block;}

.left_gnb{float:left; width:100%; margin:45px 0 0 0; padding:0 30px;}
.left_gnb li{float:left; width:100%; line-height:50px; text-align:right;}
.left_gnb li a{display:block; width:100%; height:100%; font-family:'EsaManru'; font-weight:300; font-size:20px; color:#ffffff;}
.left_gnb li a:hover{color:#007fcf;}

.top_box{float:left; width:100%; height:100px; padding:0 50px; display:flex; align-items:center; justify-content:space-between;}
.notice{float:left; max-width:50%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-family:'EsaManru'; font-weight:300; font-size:14px; color:#4d4d4d;}
.my{float:right;}
.my li{float:left; margin:0 0 0 5px; line-height:32px; font-family:'EsaManru'; font-weight:300; font-size:14px; color:#969696;}

.my_font01{color:#ff6a00; font-weight:700;}

.my_btn1{display:inline-block; background:linear-gradient(#eeeeee 0%, #cecece 100%); border:1px solid #d3d3d3; border-radius:5px; text-align:center; min-width:90px; height:32px; line-height:32px; padding:0 10px; font-family:'EsaManru'; font-weight:300; font-size:14px; color:#4d4d4d;}
.my_btn1:hover{background:linear-gradient(#b0b0b0 0%, #cecece 100%);}

/*-------------------------------------------------------------------------------------*
 *  Contents                                                                           *
 *-------------------------------------------------------------------------------------*/
.title_wrap {float:left; width:100%; padding:0 50px;}
.title{float:left; width:100%; text-align:left; font-family:'EsaManru'; font-weight:700; font-size:32px; color:#f15b24; line-height:100px;}

.s_title1 {font-family:'EsaManru'; font-weight:500; font-size:22px; color:#222222; line-height:44px; border-left:3px solid #f15b24; padding:0 0 0 10px;}

.contents_wrap {float:left; width:100%; margin:0 0 50px 0;}
.contents_box {float:left; width:100%; padding:0 50px; min-height:510px;}

.contents_box_left{float:left; width:calc(100% - 290px);}
.contents_box_right{float:right; width:280px;}

.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;}


/*-------------------------------------------------------------------------------------*
 *  Footer                                                                             *
 *-------------------------------------------------------------------------------------*/
.footer_wrap {float:left; width:100%; padding:40px 0 40px 0; text-align:center; background:#262626; color:#9abdc0; font-family:'EsaManru'; font-weight:300; font-size:16px; overflow:hidden;}

/*-------------------------------------------------------------------------------------*
 *  Main                                                                               *
 *-------------------------------------------------------------------------------------*/
.main_best_game_title{float:left; width:100%; margin:0 0 20px 0; font-family:'EsaManru'; font-weight:700; font-size:26px; color:#969696; display:flex; align-items:center;}
.main_best_game_title span.mb_title_font01{display:inline-block; padding:0 10px; font-weight:700; font-size:26px; color:#ff4f4f;}
.main_best_game_title span{font-weight:500; font-size:18px; color:#8c8c8c;}

.game_title_btn{float:right; margin:0 0 0 auto;}
.game_title_btn a{display:block; text-align:center; background:#e6e6e6; min-width:200px; height:50px; line-height:50px; border-radius:5px; padding:0 10px; font-family:'EsaManru'; font-weight:300; font-size:18px; color:#7f7f7f;}
.game_title_btn a:hover{opacity:0.5;}

.main_board{float:left; width:100%; margin:60px 0 0 0;}
.main_board li{float:left; width:32%; margin:0 2% 0 0; height:290px; background:#ffffff; padding:28px 25px; overflow:hidden; border-radius:5px;}
.main_board li:nth-child(3n){margin:0;}

.board{margin:10px 0 0 0; height:190px; overflow:hidden;}
.board_title{font-family:'Esamanru'; font-weight:300; font-size:20px; color:#969696;}
.board table{table-layout:fixed;}
.board td{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:'Esamanru'; font-weight:300; font-size:16px; color:#7b7b7b; line-height:40px;}
.board_font01{color:#ff4800; font-weight:700;}
.board_font02{color:#7b7b7b;}


/* 게임리스트 리스트 */
.main_game_list{float:left; width:100%;}
.main_game_list ul{margin:0px 0 0 0;}
.main_game_list li{float:left; width:24.25%; margin:0 1% 1% 0; transition:all 0.3s;}
.main_game_list li:nth-child(5n){margin:0 1% 1% 0;}
.main_game_list li:nth-child(4n){margin:0 0 1% 0;}
.main_game_list li:nth-child(n+9){display:none;}
.main_game_list li a{display:block;}
.main_game_list li a img{width:100%; transition:all 0.5s;}

@media screen and (min-width:1920px) {
.main_game_list li{float:left; width:19.2%; margin:0 1% 1% 0; transition:all 0.3s;}
.main_game_list li:nth-child(4n){margin:0 1% 1% 0;}
.main_game_list li:nth-child(5n){margin:0 0 1% 0;}   
.main_game_list li:nth-child(n+9){display:block;}   
}

/*-------------------------------------------------------------------------------------*
 *  out_login                                                                          *
 *-------------------------------------------------------------------------------------*/
 
/* 로그인 */
.out_login_wrap_wrap {float:left; width:100%; height:100vh; background:url("../images/bg_login.jpg") center top no-repeat; background-size:cover;}
.out_login_wrap_box  {margin:0px auto; width:500px; transition:all 0.5s;}

.out_login_logo {float:left; width:100%; text-align:center; margin:120px 0 50px 0; transition:all 0.5s;}

.out_login_box_wrap {float:left; width:100%; background:#ffffff; border:2px solid #005999; border-radius:10px; padding:7%;}
.out_login {float:left; width:100%;}
.out_login li {float:left; width:100%; padding:1%; transition:all 0.2s;} /* ysk 가로 100%로 변경시 세로형 */

.out_login_text{float:left; width:100%; text-align:center; padding:0 0 20px 0; font-family:'Esamanru'; font-weight:300; font-size:16px; color:#222222;}

.out_login_input  {background-color:#ffffff; border:1px solid #d3d3d3; color:#969696; width:100%; height:56px; font-size:16px; font-weight:500; border-radius:5px; padding:0 0 0 10px; font-family:'Noto Sans KR';}
.out_login_input::placeholder {color:#94aeb4; font-size:14px; letter-spacing:0pt;}
.out_login_input:focus{border:1px solid #ff6a00; box-shadow:0px 0px 10px 0px rgba(0,0,0,0.1);}

.out_login_btn1        {background:linear-gradient(#fbc90c 0%, #ff6a00 100%); border:1px solid #fff000; width:100%; height:56px; line-height:60px; text-align:center; display:inline-block; color:#ffffff; font-size:18px; font-weight:500; border-radius:5px; letter-spacing:-1pt; font-family:'EsaManru';}
.out_login_btn1:hover  {background:linear-gradient(to right, #fbc90c 0%, #ff6a00 100%);}

.out_login_btn2        {background:linear-gradient(#eeeeee 0%, #cecece 100%); border:1px solid #d3d3d3; width:100%; height:56px; line-height:60px; text-align:center; display:inline-block; color:#222222; font-size:18px; font-weight:500; border-radius:5px; letter-spacing:-1pt; font-family:'EsaManru';}
.out_login_btn2:hover  {background:linear-gradient(to right, #eeeeee 0%, #cecece 100%);}


/* 추천인 */
.out_close {float:left; width:100%; text-align:center; padding:0 0 20px 0;}

.out_code_wrap {float:left; width:100%; height:100vh; display:flex; align-items:center;}
.out_code_box {margin:0px auto; width:500px; transition:all 0.5s;}

.out_code_box_wrap {float:left; width:100%; background:#ffffff; border:3px solid #005999; border-radius:10px; padding:7%;}
.out_code {float:left; width:100%;}
.out_code li {float:left; width:100%; padding:1%;} /* ysk 가로 100%로 변경시 세로형 */

.out_code_text {float:left; width:100%; text-align:center; padding:0 0 20px 0; font-weight:500; font-size:16px; color:#222222;}

/* 회원가입 */
.out_join_wrap {float:left; width:100%; margin:30px 0 0 0;}
.out_join_box {margin:0px auto; width:1300px; transition:all 0.5s;}

.out_join_logo {float:left; width:100%; margin:10px 0 10px 0;}
.out_join_logo img {width:300px;}

.out_join_box_wrap {float:left; width:100%; background:#ffffff; border:3px solid #005999; border-radius:10px; padding:3%;}
.out_join {float:left; width:100%; border-top:1px solid rgba(255,255,255,0.1); border-bottom:1px solid rgba(255,255,255,0.1); padding:10px 0 10px 0;}
.out_join ul {float:left; width:50%;} /* ysk 가로 100%로 변경시 세로형 */
.out_join ul li {float:left; width:100%; padding:2%; line-height:30px;} 
.phone {display:flex; align-items:center;}

.out_join_text {float:left; width:100%; text-align:center; padding:0 0 10px 10px; border-bottom:1px solid #d3d3d3; font-family:'EsaManru'; font-weight:700; font-size:36px; color:#ff6a00;}

.out_join_btn {margin:0px auto; width:500px;}
.out_join_btn li {float:left; width:48%; margin:2% 1% 0 1%;}

.out_join_input1  {background-color:#ffffff; border:1px solid #d3d3d3; color:#969696; width:100%; height:50px; font-size:16px; font-weight:500; border-radius:5px; padding:0 0 0 10px; font-family:'Noto Sans KR';}
.out_join_input1::placeholder {color:#94aeb4; font-size:14px; letter-spacing:0pt;}
.out_join_input1:focus{border:1px solid #ff6a00; box-shadow:0px 0px 10px 0px rgba(0,0,0,0.1);}



@media screen and (max-width:1300px) {
	.out_join_box {width:90%;}
	.out_join_box_wrap {padding:6%;}	
	.out_join ul {width:100%;}	
	.out_join_btn {width:320px;}
}

@media screen and (max-width:768px) {
	.out_login_wrap_box  {width:80%;}
	.out_login_logo {margin:50px 0 30px 0;}
	.out_login_logo img {width:80%;}	
	.out_login li {width:100%;}
	
	.out_code_box {width:80%;}
}




/*-------------------------------------------------------------------------------------*
 *  out_login animations                                                               *
 *-------------------------------------------------------------------------------------*/
.out_motion111{
	animation:out_motion111 2.5s;
}

@keyframes out_motion111 {
	0% {
		transform: scale(1.5);
		opacity: 0.1;		
	}
	
	100% {
		transform: scale(1);
		opacity: 1;	
	}			
}




/*-------------------------------------------------------------------------------------*
 *  out_login animations popup                                                         *
 *-------------------------------------------------------------------------------------*/
/* 한개의 스타일 */
.out_popup111	{animation-name: out_popup111; animation-duration: 0.5s; animation-timing-function: ease; visibility: visible !important;}

				@keyframes out_popup111 {
					0%   {transform: translateY(-300%);}			
					100% {transform: translateY(0%);}		
				}

/* 한개의 스타일 */
.out_popup222	{animation-name: out_popup222; animation-duration: 0.5s; animation-timing-function: ease; visibility: visible !important;}

				@keyframes out_popup222 {
					0%   {transform: translateY(-300%) scaleX(4.0);}			
					100% {transform: translateY(0%) scaleX(1);}		
				}

/* 한개의 스타일 */
.out_popup333	{animation-name: out_popup333; animation-duration: 1.1s; animation-timing-function: ease; visibility: visible !important;}

				@keyframes out_poout_popup333pup03 {
					0%   {transform: translateY(-300%) scaleX(4.0);}	
					50%  {transform: translateY(2%) scaleX(1.3);}				
					100% {transform: translateY(0%) scaleX(1);}		
				}

/*-------------------------------------------------------------------------------------*
 *  특별한                                                                             *
 *-------------------------------------------------------------------------------------*/
/* 파워볼 버튼 */
.title_mini{color:#fffc00;}
.mini_media {float:left; width:100%; min-height:500px; background:rgba(0,0,0,0.3); text-align:center; padding:10px 0 10px 0;}

.mini_power_big_wrap {float:left; width:100%; margin:5px 0 0 0; padding:5px;}
.mini_power_big_wrap table{}

.mini_power_title {line-height:30px; font-weight:500; color:#666666;}
.mini_power_title_s { font-weight:700; color:#8e8e8e; font-size:11px;}

.mini_power_btn1 {float:left; background-color:#ffffff; border:1px solid #d0d0d0; width:100%; min-height:50px; line-height:16px; text-align:center; color:#969696; font-size:12px; font-weight:700; padding:7px 0 0 0; border-radius:0 0 5px 5px;}
.mini_power_btn1:hover {border:1px solid #00c9e6;}
.mini_power_btn1.select{background-color:#00c9e6; border:1px solid #00c9e6;}

.mini_power_btn2 {float:left; background-color:#ffffff; border:1px solid #d0d0d0; width:100%; min-height:50px; line-height:16px; text-align:center; color:#969696; font-size:12px; font-weight:700; padding:7px 0 0 0; border-radius:0 0 5px 5px;}
.mini_power_btn2:hover {border:1px solid #e6000c;}
.mini_power_btn2.select{background-color:#e6000c; border:1px solid #e6000c;}


.mini_power_font1 {font-family: 'EsaManru'; font-weight:500; font-size:20px; line-height:30px; color:#00c9e6;}
.mini_power_font2 {font-family: 'EsaManru'; font-weight:500; font-size:20px; line-height:30px; color:#e6000c;}
.select .mini_power_font1 {color:#ffffff;}
.select .mini_power_font2 {color:#ffffff;}

/* 미니게임 카트 */
.mini_input       {background-color:#eeeeee; border:1px solid #d0d0d0; width:100%; height:26px; color:#969696; padding:0 10px 0 10px; border-radius:3px; text-align:right;}
.cart_wrap {float:left; width:100%; padding:20px 10px 10px 15px; background:#ffffff; border:1px solid #335ed7; border-radius:3px;}
.cart_title {float:left; width:100%;}
.cart_point{font-family:'EsaManru'; font-weight:500; font-size:20px; color:#969696;}

.fix_btn1{display:inline-block; width:46px; height:26px; border-radius:5px; background:#ff6a00; text-align:center; line-height:30px; font-family:'EsaManru'; font-weight:300; font-size:12px; color:#ffffff;}
.fix_btn2{display:inline-block; width:46px; height:26px; border-radius:5px; background:#cecece; text-align:center; line-height:30px; font-family:'EsaManru'; font-weight:300; font-size:12px; color:#999999;}

.cart_del{float:left; width:100%; margin:15px 0 0 0;}
.del_btn{width:250px; height:34px; line-height:38px; display:block; text-align:center; background:linear-gradient(#eeeeee 0%, #cecece 100%); border-radius:5px;font-family:'EsaManru'; font-weight:300; font-size:14px; color:#4d4d4d; transition:all 0.5s;}
.del_btn:hover{background:linear-gradient(-45deg, #eeeeee 0%, #cecece 100%);}

.cart_bet {background:rgba(0,0,0,0.05); padding:5px 12px 3px 12px; line-height:22px; margin:0 0 3px 0; color:#b2c7c7;}  /* 팀 선택시 */
.cart_bet td {color:#b2c7c7;}

.cart_style1 {line-height:25px; padding:5px 5px 5px 5px; border-bottom:1px solid #d0d0d0; font-family:'EsaManru'; font-weight:300; font-size:14px; color:#4d4d4d;} /* 카트리스트 */
.cart_style2 {float:right;}

.cart_font1{color:#5800dc; font-weight:700; font-size:18px;}
.cart_font2{color:#39dc00; font-weight:700; font-size:18px;}

.cart_btn1          {background:linear-gradient(#eeeeee 0%, #cecece 100%); width:100%; height:40px; line-height:40px; display:inline-block; text-align:center; border-radius:5px; color:#4d4d4d; font-size:13px; letter-spacing:0pt; font-weight:500; transition:all 0.5s;}
.cart_btn1:hover    {background:linear-gradient(-45deg, #eeeeee 0%, #cecece 100%);}

.cart_btn2          {background:linear-gradient(#fbc90c 0%, #ff6a00 100%); width:100%; height:54px; line-height:54px; display:inline-block; text-align:center; border-radius:5px; letter-spacing:0pt; transition:all 0.5s; font-family:'EsaManru'; font-weight:500; font-size:20px; color:#ffffff;}
.cart_btn2:hover    {background:linear-gradient(-45deg, #fbc90c 0%, #ff6a00 100%);}


/* 댓글 */
.comment_box{float:left; width:100%; background:rgba(255,255,255,0.1); border:1px solid #d0d0d0; padding:20px 10px 20px 10px; transition:all 0.5s;}

.comment_enter{display: flex; justify-content: space-between; align-items: center;}
.comment_input{width:calc(100% - 145px); padding:5px 5px 5px 10px; font-size:14px; background-color:#eeeeee; border:1px solid #d0d0d0; height:50px; transition:all 0.5s; border-radius:5px;}
.comment_btn{display:inline-block; text-align:center; border-radius:5px; font-family:'EsaManru'; font-weight:300; font-size:16px; color:#ffffff; text-shadow:2px 0 3px rgba(0,0,0,0.4); background:linear-gradient(#007fcf 0%, #007fcf 100%); min-width:140px; height:50px; line-height:50px; transition:all 0.5s;}

.comment_view{float:left; width:100%; margin:5px 0 0 0;}
.comment_view_list{float:left; width:100%; margin:5px 0 0 0; background:#ffffff; padding:10px 10px 20px 10px; border-radius:5px;}

.comment_po{background:#f15b24; color:#ffffff; padding:0 15px 0 15px; line-height:28px; text-align:center; display:inline-block; font-size:12px; margin:0 5px 0 0; font-weight:300; border-radius:5px; transition:all 0.5s;}
.comment_view_text{float:left; width:100%; font-size:15px; color:#222222; padding:10px 8px 8px 8px; line-height:22px; transition:all 0.5s;}

/* 게임리스트 리스트 */
.game_list{float:left; width:100%;}
.game_list ul{margin:0px 0 0 0;}
.game_list li{float:left; width:24.25%; margin:0 1% 1% 0; transition:all 0.5s;}
.game_list li:nth-child(4n){margin:0 0 1% 0;}
.game_list li a{display:block;}
.game_list li a img{width:100%; transition:all 0.5s;}

@media screen and (min-width:1920px) {
.game_list li{float:left; width:19.2%; margin:0 1% 1% 0; transition:all 0.5s;}
.game_list li:nth-child(4n){margin:0 1% 1% 0;}   
.game_list li:nth-child(5n){margin:0 0 1% 0;}   
}

.slot_box_wrap {float:left; width:100%;}
.slot_box {margin:0px auto; width:1400px; transition:all 0.5s;}
.slot_start {float:left; width:100%; padding:35px 50px 50px 50px; background:#ffffff; border:1px solid #f15b24; border-radius:10px;}
.slot_title {float:left; width:100%; font-family:'EsaManru'; font-weight:500; font-size:26px; color:#969696; line-height:50px;}
.slot_close_box {float:left; width:100%; text-align:center; padding:120px 10px 10px; position:relative; z-index:1;}

.slot_list_wrap{float:left; width:100%; color:#ffffff; background:rgba(0,0,0,0.05); min-height:150px;}
.slot_list2{float:left; width:100%; padding:10px;}
.slot_list2 ul{float:left; width:100%; display:flex; flex-wrap:wrap;}
.slot_list2 li{float:left; text-align:center; width:calc(100% / 7); padding:0 5px 10px 5px; display:flex; align-items: center; flex-direction: column;}
.slot_list2 li a{display:block; width:100%; font-family:'EsaManru'; font-weight:300; color:#222222; font-size:12px; font-weight:400; white-space:nowrap; overflow:hidden;}
.slot_list2 li a img{width:100%;}

/* 유저페이지 페이지네이션 */
.pagination {
display: flex;
justify-content: center;
}
.nav {
display: flex;
background-color: #333;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
}

.nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}

nav li {
margin-right: 20px;
}

nav a {
color: rgb(41, 41, 41);
text-decoration: none;
font-weight: bold;
font-size: 18px;
}

nav span {
color: #f00;
text-decoration: none;
font-weight: bold;
font-size: 18px;
}


/*-------------------------------------------------------------------------------------*
 *  레이어팝업                                                                             *
 *-------------------------------------------------------------------------------------*/
 .main_pop_wrap{float:left; width:100%; height:100%; background:rgba(0,0,0,0.6); position:fixed; z-index:9999; display:flex; justify-content: center; align-items: center; flex-wrap: wrap;}
 .main_pop_box{float:left; width:500px; margin:5px;}
 .main_pop_con{float:left; width:100%; min-height:500px; border-radius:5px; padding:30px 20px; background:#000000; border:3px solid #ffffff;}
 .main_pop_con img{width:100%;}
 
 .main_pop_con_title{float:left; width:100%; padding:10px; text-align:center; font-family:'EsaManru'; font-weight:500; font-size:24px; color:#ffffff; line-height:50px; border-bottom:1px solid rgba(255,255,255,0.1);}
 .main_pop_con_text1{float:left; width:100%; margin:10px 0 0 0; padding:10px; text-align:center; font-family:'EsaManru'; font-weight:300; font-size:14px; color:#ffffff; line-height:1.5;}
 .main_pop_con_text2{float:left; width:100%; background:#ff4800; border-radius:100px; margin:10px 0 0 0; padding:20px 0; text-align:center; font-family:'EsaManru'; font-weight:500; font-size:18px; color:#ffffff; font-style:italic; line-height:1.5;}
 .main_pop_con_text3{float:left; width:100%; margin:10px 0 0 0; padding:10px; text-align:center; font-family:'EsaManru'; font-weight:300; font-size:16px; color:#ffffff; line-height:1.5;}
 
 .main_popup_close {float:left; width:100%; text-align:center; padding:0 3px 0 0;}
 .main_popup_close ul{float:right;}
 .main_popup_close ul li{float:left;}
 .main_popup_close ul li a{display:block; height:34px; line-height:34px; min-width:80px; padding:0 15px; background:#000000; font-family:'EsaManru'; font-weight:500; color:#e3e3e3; font-size:14px;}
 .main_popup_close ul li a:hover{background:#000000;}
 .main_popup_close ul li:last-child a{border-left:1px solid #969696;}
 .main_popup_close ul li a input{display:inline-block; margin:0 10px 0 0; accent-color: #000000;}