@charset "utf-8";
#wrap {float:left; width:100%; min-height:100vh; display:flex; background:#121212; position:relative; transition:all 0.5s;}

/*-------------------------------------------------------------------------------------*
 *  Header                                                                             *
 *-------------------------------------------------------------------------------------*/
.logo{float:left; width:100%; text-align:center; margin:30px 0 0 0;}
.logo a{display:block}

.left_game_title{width:259px; margin:0 auto; font-family:'EsaManru'; font-weight:300; font-size:14px; color:#00ffff;}
.left_game{float:left; width:100%; margin:30px 0 0 0;}
.left_game ul{width:259px; margin:10px auto 0;}
.left_game li{float:left; width:100%; line-height:46px; margin:0 0 5px 0; background:url(../../images/bg_game.png) center top no-repeat; background-size:100% 100%; position:relative;}

.left_game li a{display:flex; position:relative; padding:0 25px;}
.left_txt{font-family:'EsaManru'; font-weight:300; font-size:16px; color:#dcdcdc; transition:all 0.3s;}
.left_icon{margin:0 10px 0 0;}
.left_icon img{transition:all 0.3s;}

.left_game li a:hover .left_icon img{transform:rotate(-42deg); filter:brightness(1.2);}
.left_game li a:hover .left_txt{color:#00ffff;}
.msnodd{color:#fff600; font-weight:500; display:inline-block; padding:0 5px; font-size:13px;}


.header_wrap{float:left; width:100%; padding:0 20px; height:60px; display:flex; align-items: center; flex-wrap:wrap;}
.notice{float:left; width:100%; max-width:25%; white-space:nowrap; overflow:hidden; text-overflow:hidden; font-family:'EsaManru'; font-weight:300; font-size:14px; color:#ffffff; transition:all 0.3s;}
.top_login{float:left; margin:0 0 0 auto;}
.top_login li{float:left; margin:0 0 0 5px;}
.utill_btn1  {background:linear-gradient(#00ffff 0%, #007eff 100%); min-width:140px; height:36px; line-height:36px; display:inline-block; text-align:center; border-radius:5px; font-family:'Esamanru'; font-weight:300; font-size:14px; color:#ffffff; text-shadow:2px 0 5px rgba(0,0,0,0.5);}
.utill_btn2  {background:linear-gradient(#7c7c7c 0%, #353535 100%); box-shadow:1px 1px 0 rgba(255,255,255,0.3) inset; min-width:140px; height:36px; line-height:36px; display:inline-block; text-align:center; border-radius:5px; font-family:'Esamanru'; font-weight:300; font-size:14px; color:#ffffff; text-shadow:2px 0 5px rgba(0,0,0,0.5);}
.utill_btn3  {background:#ffffff; min-width:50px; height:24px; line-height:24px; padding:0 10px; display:inline-block; text-align:center; border-radius:5px; font-family:'Esamanru'; font-weight:300; font-size:14px; color:#007eff; cursor:pointer;}
.utill_btn1:hover{background:linear-gradient(-45deg, #00ffff 0%, #007eff 100%);}
.utill_btn2:hover{background:linear-gradient(-45deg, #7c7c7c 0%, #353535 100%);}
.utill_btn3:hover{background:#00ffff;}

.mobile_menu{float:left; width:100%; display:flex; align-items: center; padding:10px 5px; display:none; }
.mobile_menu i{color:#ffffff;}
.mobile_menu button{background:none; border:none; outline:none;}
.m_logo{margin:0 auto;}
.m_logo img{width:120px;}
.mobile_menu1{font-size: 2em; background: transparent; color:#ffffff;}
.mobile_menu2{font-size: 2em; background: transparent; color:#ffffff;}

.top_my{float:left; margin:0 0 0 auto;}
.top_my ul{display:flex; align-items:center;}
.top_my li{float:left; margin:0 0 0 10px; font-family:'Esamanru'; font-weight:300; font-size:13px; color:#ffffff;}
.top_my li a{display:inline-block; font-family:'Esamanru'; font-weight:300; font-size:13px; color:#ffffff;}
.top_my li i{display:inline-block; margin:0 5px 0 0; color:#dcdcdc; font-size:16px;}
.my_odd{display:inline-block; margin:0 0 0 5px; font-weight:700; color:#00ffff;}
.my_font01{font-weight:700; color:#00ffff}
.top_my li:hover a{color:#00ffff;}

@media screen and (max-width:1520px) {
    .header_wrap{height:auto; padding:10px 10px;}
	.notice{max-width:100%;}
	.top_my{margin:10px 0 0 auto;}
}

@media screen and (max-width:1240px) {
	.header_wrap{height:auto; padding:2px 0 10px; background:#1d1d1d;}
    .notice{display:none;}
	.top_login{width:100%; padding:3px 5px;}
	.top_login li{float:left; width:50%; padding:1px; margin:0;}
	.utill_btn1{width:100%; height:50px; line-height:50px;}
	.utill_btn2{width:100%; height:50px; line-height:50px;}
	.mobile_menu{display:flex;}
	.top_my{width:100%; margin:0; padding:5px 0; background:#2c2c2c; border-top:2px solid #00ffff;}
	.top_my ul{justify-content:center;}
	.top_my li:nth-child(1){display:none;}
	.top_my li:nth-child(4){display:none;}
	.m_hide{display:none;}
	.utill_btn3 span[data-id=close] {display: none;}
	.utill_btn3{min-width:40px;}
	.top_my li a{font-size:0;}
	.my_odd{font-size:12px; margin:0 0 0 0;}
	.top_my li a span[data-id=close] {display: none;}
}
.title_box{float:left; width:100%; padding:0 30px; background:url(../../images/bg_title.png) center top no-repeat; background-size:100% 100%;} 

.title{float:left; width:100%; text-align: left; font-family:'Esamanru'; font-weight:700; font-size:24px; color: #4396f8; height: 50px; line-height: 50px; margin: 0; padding-left:0; background: rgba(20, 20, 20, 0.6); display: inline-block; background: linear-gradient(135deg, #ffffff 0%, transparent 25%, transparent 50%, #ffffff 55%, #ffffff 70%, transparent 75%, transparent), #00ffff; background-size: 20rem 20rem; -webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.title span{display:inline-block; margin:0 0 0 10px; font-weight:300; font-size:16px; color:#ffffff;}
.s_title1{float:left; width:100%; background:#2c2c2c; padding:8px 10px; font-family: 'EsaManru'; font-weight:300; font-size:14px; color:#ffffff;}

@media screen and (max-width:768px) {
    .title_box{padding:0 10px;}
    .title{font-size:20px;}
    .title span{font-size:13px;}
}
/*-------------------------------------------------------------------------------------*
 *  contents                                                                           *
 *-------------------------------------------------------------------------------------*/
.contents_wrap{float:left; width:100%; display:flex;}
.contents_left{float:left; width:300px; min-height:100vh; max-height:100vh; background:#1d1d1d; position:fixed; z-index:1000; display: flex; flex-direction: column; transition:all 0.3s;}
.contents_left_inner{float:left; width:100%; height:100%; overflow-y: auto; padding:0 0 20px;}
.contents_right{float:right; width:100%; padding:0 0 0 300px; transition:all 0.3s;}
.contents_left_inner::-webkit-scrollbar {
  display: none;
}

.content_box{float:left; width:100%; padding:30px 20px 0;}
.content_box_in{float:left; width:100%; margin:0 0 0; padding:30px;}
.content_box_in2{width:100%; max-width:1580px; margin:0 auto; padding:0px 75px 20px;}
.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:1240px) {
	.contents_left{display:none;}
	.contents_right{padding:0;}
	.content_box{padding:0 10px;}
	.content_box_in{padding:20px 10px;}
	.content_box_in2{padding:0 10px 20px;}
}

@media screen and (max-width:768px) {
	.content_box{padding:0 5px;}
	.content_box_in{padding:10px 2px;}	
	.content_box_in2{padding:0 2px 10px;}	
}
/*-------------------------------------------------------------------------------------*
 *  login                                                                              *
 *-------------------------------------------------------------------------------------*/
#login{float:left; width:100%; min-height:100vh; position:fixed; left:0; top:0; z-index:9999; background:rgba(17,17,17,0.6); display:flex; align-items:center; justify-content:center; display:none;}
.login_wrap{width:80%; max-width:640px; margin:0 auto; max-height:560px; transition:all 0.5s;}

#join{float:left; width:100%; min-height:100vh; position:fixed; left:0; top:0; z-index:9999; background:rgba(17,17,17,0.6); display:flex; align-items:center; justify-content:center; display:none;}
.join_wrap{width:95%; max-width:800px; margin:0 auto; max-height:80vh; transition:all 0.5s;}
.join_box{width:100%; padding:40px 20px; max-height:75vh; 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:linear-gradient(#1d1d1d 0%, #1d1d1d 100%); border-radius:10px 0 10px 10px; display:flex; position:relative;}

.close_btn_cu{background:#1d1d1d; width:40px; height:40px; line-height:40px; text-align:center; border-radius:3px 3px 0 0; color:#d4d4d4; font-weight:700; position:absolute; right:0px; top:-40px; z-index:11; transition:all 0.3s;}
.close_btn_cu  img{transition:all 0.3s;}

.loginbox_l{width:350px; position:relative;}
.loginbox_l img{position:absolute; bottom:0; left:-20px;}
.loginbox_r{width:calc(100% - 350px); padding:40px 20px; height:523px; max-height:560px; overflow-y:auto; display: flex; flex-direction: column; justify-content: center; transition:all 0.5s;}
.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:250px;}
.login_title{float:left; width:100%; margin:30px 0 0 0; padding:0 0 0 10px; font-weight:300; font-size:16px; color:#ffffff;}
.login {float:left; width:100%; margin:10px 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:50%; 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%;}


.login_input  {background-color:#2c2c2c; border:1px solid #000000; color:#ffffff; width:100%; height:36px; font-size:14px; font-weight:500; border-radius:5px; padding:0 0 0 15px;  font-family:'EsaManru';}
.login_input::placeholder {color:#00ffff; font-size:12px; letter-spacing:0pt;}
.login_input:focus{border:1px solid #00ffff;}

.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:linear-gradient(#00ffff 0%, #007eff 100%); width:100%; height:36px; line-height:36px; display:inline-block; text-align:center; border-radius:5px; font-family:'Esamanru'; font-weight:300; font-size:14px; color:#ffffff;}
.login_btn2  {background:linear-gradient(#7c7c7c 0%, #353535 100%); width:100%; height:36px; line-height:36px; display:inline-block; text-align:center; border-radius:5px; font-family:'Esamanru'; font-weight:300; font-size:14px; color:#ffffff;}

.login_btn1:hover{opacity:0.8;}
.login_btn2:hover{opacity:0.8;}

@media screen and (max-width:1060px) {
    .loginbox_r{height:auto;}
}
@media screen and (max-width:768px) {
    .loginbox_l{display:none;}
    .loginbox_r{width:100%}
	.login_logo{padding:0 30px;}
	.login1 li{width:100%;} 
}
/*-------------------------------------------------------------------------------------*
 *  m_menu_fix                                                                         *
 *-------------------------------------------------------------------------------------*/
.m_menu_fix{float:left; width:100%; height:20vw; position:fixed; bottom:0; left:0; z-index:1000; background:url(../../images/bg_footer.png) center top no-repeat; background-size: cover; display:none;}
.m_menu_fix ul{float:left; width:100%; height:100%; margin:3vw 0 0 0;}
.m_menu_fix li{float:left; width:20%; height:100%;}
.m_menu_fix li a{display:block; width:100%; height:100%; padding:10px 5px 5px; text-align:center; font-weight:500; font-size:14px; color:#ffffff; line-height:1.5; display:flex; align-items:center; justify-content:center; flex-direction:column;}
.m_menu_fix li a img{display:inline-block; margin:0 0 5px 0;}
.m_menu_fix li:nth-child(3) a{width: 15.2vw; height: 15.2vw; position: absolute; top:20%; left:50%; transform:translate(-50%); border-radius: 50%; background:linear-gradient(#00ffff 0%, #007eff 100%); font-size:16px; color:#ffffff;}

@media screen and (max-width:1024px) {
    .m_menu_fix{display:block;}
}
/*-------------------------------------------------------------------------------------*
 *  footer                                                                             *
 *-------------------------------------------------------------------------------------*/
.footer_wrap{float:left; width:100%; padding:40px 20px 40px 20px; text-align:center; background:#222222;}
.footer_partners1{width:100%;}
.footer_partners1 img{width:100%; max-width:1580px;}
.f_copy{width:100%;  margin:30px 0 0 0; font-family:'EsaManru'; font-weight:300; font-size:18px; color:#737373;}

@media screen and (max-width:1024px) {
	.footer_wrap{padding:40px 20px 20vw 20px;}
	.f_copy{margin:20px 0 0 0; font-size:12px;}
}

.custumer{float:left; width:100%; margin:40px 0 0 0; padding:40px 0 0 0; background:#222222;}
.custumer ul{display:flex; justify-content:center; margin:0 auto; width:100%; max-width:1580px;}
.custumer ul li{max-width:20%; margin:0 10px;}
.custumer ul li img{width:100%;}

@media screen and (max-width:1900px) {
    .custumer ul li{padding:2px; margin:0;}
}
@media screen and (max-width:1480px) {
    .custumer ul{flex-wrap:wrap; justify-content:center;}
    .custumer ul li{max-width:33.3333%;}
}
@media screen and (max-width:768px) {
    .custumer ul li{max-width:50%;}  
}
 /*-------------------------------------------------------------------------------------*
 *  Main                                                                                *
 *-------------------------------------------------------------------------------------*/
.main_slideshow_pc{width:100%;margin:0 auto; overflow:hidden;}
.main_slideshow_pc .swiper-slide img{width:100%;}
.main_slideshow_m{width:100%; margin:0 auto; overflow:hidden; display:none;}
.main_slideshow_m .swiper-slide img{width:100%;}

.main_game_box{width:100%; max-width:1580px; margin:0 auto; padding:0px 20px 20px;}

.main_game_m{float:left; width:100%; margin:20px 0 0 0;}
.main_game_tab{float:left; width:100%;}
.main_game_tab li{float:left; width:31.65%; margin:0 2.525% 0 0;}
.main_game_tab li:nth-child(3n){margin:0 0 0 0;}
.main_game_tab li a{display:flex; align-items:center; width:100%; height:80px; border-radius:10px; background:#212121; padding:0 20px 0 30px; font-family: 'EsaManru'; font-weight:500; font-size:36px; color:#676767; text-shadow:2px 0 5px rgba(0,0,0,0.5);}
.main_game_tab li a span{display:inline-block; margin:0 0 0 5px; font-weight:300; font-size:20px; text-shadow:2px 2px 5px rgba(0,0,0,0.5);}
.main_game_tab li a img{display:inline-block; margin:0 0 0 auto; filter:grayscale(100%) brightness(0.4); transition :all 0.5s;}
.main_game_tab li.active a{background:linear-gradient(to right, #00ffff 0%, #5000bc 100%); color:#ffffff;}
.main_game_tab li.active a img{filter:grayscale(0%) brightness(1);}
.main_game_tab li:hover a{background:linear-gradient(to right, #00ffff 0%, #5000bc 100%); color:#ffffff;}
.main_game_tab li:hover a img{filter:grayscale(0%) brightness(1);}


.main_game_tab_con{float:left; width:100%; margin:30px 0 0 0;}

.main_board{float:left; width:100%; margin:10px 0 0 0; display:flex;}
.borad_box{float:left; width:500px; height:auto; margin:0 40px 10px 0; padding:20px 20px 20px 20px; border-radius:10px; background:#222222; border-top:2px solid #00ffff;}
.borad_box:last-child{margin:0 0 10px 0;}
.board_title{float:left; width:100%; display:flex; align-items:center; height:50px; line-height:50px; text-align:left; font-family: 'EsaManru'; font-weight:500; font-size:20px; color:#ffffff;}

.myTable{table-layout:fixed;}
.board{float:left; width:100%; height:auto; overflow:hidden;}
.board td{font-family:'EsaManru'; font-weight:300; color:#838383; font-size:16px; line-height:40px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:all 0.5s;}
.board td:first-child{font-weight:300; color:#ffffff;}

.borad_font01{font-weight:700; color:#00ffff;}


@media screen and (max-width:1240px) {
	.main_slideshow_pc{display:none;}
	.main_slideshow_m{display:block;}
	
	.main_board{flex-wrap:wrap;}
	.borad_box{width:100%; height:auto; max-height:244px; overflow:hidden; margin:0 0 10px 0}
	.board{height:auto;}
	.board td{font-size:14px; line-height:40px;}
	.main_game_tab li a{font-size:28px; padding:0 10px 0 20px; height:60px;}
	.main_game_tab li a span{display:none;}
	.main_game_tab li a img{width:40px;}
}
@media screen and (max-width:768px) {
    .main_game_box{padding:0px 10px 20px; float:left; width:100%;}
    .main_game_tab_con{margin:10px 0 0 0;}
	.main_game_m{margin:10px 0 0 0;}
	.main_game_tab li{width:49.5%; margin:0; padding:1px;}
	.main_game_tab li a{font-size:16px; padding:0 5px 0 10px; height:50px;}
	.main_game_tab li a img{width:32px;}
}
/*-------------------------------------------------------------------------------------*
 *  특별한                                                                              *
 *-------------------------------------------------------------------------------------*/
/* 카지노 */
.game_title{float:left; width:100%;}
.game_title img{width:100%;}
.game_list{float:left; width:100%;}
.game_list li{float:left; width:calc(100% / 6  - 23.33333333333333px); margin:0 28px 28px 0;}
.game_list li:nth-child(6n){margin:0 0 28px 0;}
.game_list li a{display:block;}
.game_list li a img{width:100%;}
@media screen and (max-width:1520px) {
.game_list li{width:calc(20% - 12px); margin:0 15px 15px 0;}
.game_list li:nth-child(6n){margin:0 15px 15px 0;}
.game_list li:nth-child(5n){margin:0 0 15px 0;}
    
}
@media screen and (max-width:1280px) {
.game_list li{width:24.25%; margin:0 1% 1% 0;}
.game_list li:nth-child(6n){margin:0 1% 1% 0;}    
.game_list li:nth-child(5n){margin:0 1% 1% 0;}    
.game_list li:nth-child(4n){margin:0 0 1% 0;}    
}
@media screen and (max-width:768px) {
.game_list li{width:33%; margin:0 0.5% 1% 0;}
.game_list li:nth-child(6n){margin:0 0.5% 1% 0;}    
.game_list li:nth-child(5n){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:1240px) {
    .game_title{padding:0 20px;}
}

/* 이벤트리스트 */
.event_wrap{float:left; width:100%; margin:10px 0 0 0;}
.event_wrap ul{margin:0px 0 0 0;}
.event_wrap li{float:left; width:32.5%; margin:0 1.25% 1.25% 0; transition:all 0.5s;}
.event_wrap li:nth-child(3n){margin:0 0 1.25% 0;}
.event_wrap li a{display:block;}
.event_wrap li a img{width:100%; transition:all 0.5s;}
.event_title{float:left; width:100%; height:46px; line-height:46px; background:#343434; border-radius:0 0 3px 3px; padding:0 60px 0 10px; white-space:nowrap; overflow:hidden; position:relative; text-overflow:ellipsis; display:flex; align-items:center; font-family: 'EsaManru'; font-weight:300; font-size:13px; color:#ffffff;}
.event_title a{color:#ffffff;}
.event_view{position:absolute; right:10px; background:#ffffff; min-width:50px; height:24px; line-height:24px; padding:0 10px; display:inline-block; text-align:center; border-radius:5px; font-family:'Esamanru'; font-weight:500; font-size:14px; color:#007eff !important; cursor:pointer;}
.event_title a:hover{color:#00ffff;}
@media screen and (max-width:768px) {
.event_wrap li{width:49.5%; margin:0 1% 1% 0;}
.event_wrap li:nth-child(3n){margin:0 1% 1% 0;}    
.event_wrap li:nth-child(2n){margin:0 0 1% 0;}    
}

/* 라디오버튼 */
.radio_wrap{float:left; height:auto; display: flex;  flex-wrap: wrap; align-content: center; align-items: center;}
.radio_wrap label {display: flex; width:100%; cursor: pointer; font-family:'Esamanru'; font-weight:300; font-size:14px; position: relative; overflow: hidden; margin:5px 0 0 0;}
.radio_wrap label input {position: absolute; left: -9999px;}
.radio_wrap label input:checked + span {background-color: #7c7c7c; border:1px solid #7c7c7c; color:#ffffff;}
.radio_wrap label input:checked + span:before {box-shadow: inset 0 0 0 0.4375em #ffffff;}
.radio_wrap label>span {display: flex; align-items: center; padding: 0.375em 0.75em 0.375em 0.375em; border-radius: 5px; transition: 0.25s ease; background:rgba(0,0,0,0.3); color:#777777;}
.radio_wrap label>span:hover {background-color: #00ffff; color:#000000;}
.radio_wrap label>span:before {display: flex; flex-shrink: 0; content: ""; background-color: #aaaaaa; width: 1.5em; height: 1.5em; border-radius:50%; margin-right: 0.375em; transition: 0.25s ease; box-shadow: inset 0 0 0 0.125em #eaeaea;}
.radio_wrap label>span>span{padding:0 10px; margin:0 0 0 10px; border-radius: 5px; transition: 0.25s ease; background:#ffffff; color:#186845;}

/* 출석부 */
.att_box table{table-layout:fixed;}
.att_title1     {background:#252525; border-top:1px solid #00ffff; padding:6px 4px; text-align:center; font-weight:500; font-size:12px; color:#ffffff;}
.att1           {background:#2c2c2c; border-bottom:1px solid rgba(0,0,0,0.1); color:#ffffff; width: calc(100% / 7); height:100px; padding:3px 8px 3px 8px; text-align:center; position:relative;}
.att1 img{width:90%; max-width:100px;}
.att2           {position:absolute; top:10px; left:10px; z-index:1; color:#a8a7ad;}
.att_month_title{float:left; width:100%; background:#252525; border:1px solid #343434; font-weight:500; font-size:20px; color: #00ffff; padding: 18px; border-radius:5px; display:flex; align-items:center; justify-content:center;}
.att_month_title a{display:inline-block; padding:0px 20px; font-size:18px; opacity:0.7;}
.att_month_title a:hover{opacity:1;}

@media screen and (max-width:768px) {
	.att_month_title{text-align:center; font-size:16px; flex-wrap:wrap; justify-content:center;}
	.att_month_title span{display:block; width:100%; margin:5px 0 0 0; text-align:center;}
	.att1{height:70px;}
	.att_month_title a{padding:0 10px;}
}


.team_l{width:50%; line-height: 16px; text-align:left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* white-space: normal; 팀명 짤리지않게할때 */ }
.team_r{width:50%; line-height: 16px; text-align:right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* white-space: normal; 팀명 짤리지않게할때 */ }

/* 베팅내역 */
.sports_bet_history_list{float:left; width:100%; padding:5px 10px; background:#252525;}
.sports_bet_history_list ul{display:flex; align-items:center;}
.sports_bet_history_list li{float:left; padding:5px 5px; margin:0 5px; font-family: 'EsaManru'; font-weight:300; font-size:13px; color:#ffffff;}
.history_time span{font-weight:500; color:#c8e5d7;}
.history_won1 span{font-weight:500; color:#ccff00;}
.history_odd span{font-weight:500; color:#00ffb8;}
.history_won2 span{font-weight:500; color:#f4c8ff;}
.history_won3 span{font-weight:500; color:#00ccff;}
@media screen and (max-width:1280px) {
    .sports_bet_history_list ul{flex-wrap:wrap;}
}

/* 경기결과 */
.result_title_wrap{float:left; width:100%; margin:10px 0 0 0; padding:0 0 3px 0; transition:all 0.5s;}
.result_s_title{float:left; width:100%; height:40px; background:#252525; border-top:1px solid #343434; border-bottom:1px solid #343434;}
.result_s_title ul{display: inline-flex; width: 100%; margin:0 0 3px 0; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items:center; align-self: stretch;}
.result_s_title ul li{text-align:center; line-height:40px; font-family: 'EsaManru'; font-weight:500; font-size:14px; color:#ffffff;}
.result_s_title01{float:left; width:10%;}
.result_s_title02{float:left; width:16%;}
.result_s_title03{float:left; width:58%;}
.result_s_title04{float:left; width:7%;}
.result_s_title05{float:left; width:7%;}

.result_title_list{float:left; width:100%; margin:5px 0px 0 0;}
.result_title_list>ul{display: inline-flex; width: 100%; margin:5px 0 3px 0; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items:center; align-self: stretch;}
.result_title_list>ul>li{display: inline-flex; flex-wrap: wrap; align-items: center; align-self: stretch; justify-content: center; text-align: center; margin: 0 1px 0 0; font-weight: 500; padding: 5px 5px; min-height:40px; line-height: 14px; vertical-align: middle; border-radius:3px; cursor: pointer; clear: both; font-family: 'EsaManru'; font-weight: 300; font-size:13px; color:#ffffff; text-shadow:2px 2px 3px rgba(0,0,0,0.4);}
.result_title_list>ul>li:last-child{margin:0;}
.result_title_list>ul>li.result_more{margin:0;}
.result_title_list>ul>li.result_ing{margin:0;}
.result_title_list>ul>li.result_league{justify-content:flex-start;}
.result_title_list>ul>li.result_state{font-weight: 500; color:#00ffff;}
.result_title_list>ul>li.result_team1{background:linear-gradient(#2c2c2c 0%, #2c2c2c 100%);}
.result_title_list>ul>li.result_tie{background:linear-gradient(#2c2c2c 0%, #2c2c2c 100%);}
.result_title_list>ul>li.result_team2{background:linear-gradient(#2c2c2c 0%, #2c2c2c 100%);}
.result_title_list>ul>li.result_team1.active{background:linear-gradient(to right, #00ffff 0%, #5000bc 100%); color:#ffffff; font-weight:500;}
.result_title_list>ul>li.result_team2.active{background:linear-gradient(to right, #00ffff 0%, #5000bc 100%); color:#ffffff; font-weight:500;}

/* 배당색상 */
.result_team1 .team_r{color:#ffffff; font-weight:700;}
.result_team2 .team_l{color:#ffffff; font-weight:700;}
.result_team1.active .team_r{color:#00ffff;} 
.result_team2.active .team_l{color:#00ffff;} 


.result_title_list .result_time{width:calc(10% - 1px); transition:all 0.3s;}
.result_title_list .result_league{width:calc(16% - 1px); transition:all 0.3s;}
.result_title_list .result_team1{width:calc(26% - 1px); transition:all 0.3s;}
.result_title_list .result_tie{width:calc(8% - 1px); transition:all 0.3s;}
.result_title_list .result_team2{width:calc(26% - 1px);; transition:all 0.3s;}
.result_title_list .result_state{width:calc(7% - 1px); transition:all 0.3s;}
.result_title_list .result_more{width:7%; transition:all 0.3s;}

.history_title_list .result_time{width:calc(10% - 1px); transition:all 0.3s;}
.history_title_list .result_league{width:calc(13% - 1px); transition:all 0.3s;}
.history_title_list .result_team1{width:calc(28% - 1px); transition:all 0.3s;}
.history_title_list .result_tie{width:calc(7% - 1px); transition:all 0.3s;}
.history_title_list .result_team2{width:calc(28% - 1px);; transition:all 0.3s;}
.history_title_list .result_state{width:calc(7% - 1px); transition:all 0.3s;}
.history_title_list .result_more{width:7%; transition:all 0.3s;}
.history_title_list .result_ing{width:7%; transition:all 0.3s;}

/* 승무패색상 */
.state1{color:#ff5e00 !important;}
.state2{color:#b1b1b1 !important;}
.state3{color:#007eff !important;}


/* 베팅한도색상 */
.bet_max{color:#fff600;}

@media screen and (max-width:1280px) {
	.result_s_title{display:none;}
	.result_title_list{background:rgba(255,255,255,0.1);}
	.result_title_list>ul{display: grid; gap: 1px;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}
	.result_title_list .result_time{width:100%; order: 1; grid-column: 1 / span 3;}
	.result_title_list .result_league{width:100%; order: 2; grid-column: 4 / span 4;}
	.result_title_list .result_more{width:100%; order: 3;}
	.result_title_list .result_state{width:100%; order: 4;}

	.result_title_list .result_team1{width:100%; order: 5; grid-column: 1 / span 4;}
	.result_title_list .result_tie{width:100%; order: 6; grid-column: 5 ;}
	.result_title_list .result_team2{width:100%; order: 7; grid-column: 6 / span 4;}
		
}

/* ---------------------- Custome Radio Button ------------------------ */

.radio-container{
    font-size: 13px;
    margin-bottom: 0px;
}

.radio-group{
	height: 50px;
	color: #FFF;
  }
  
  /* The container */
  .radio-container {
	display: inline-block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 16px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
  }
  
  /* Hide the browser's default radio button */
  .radio-container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
  }
  
  /* Create a custom radio button */
  .checkmark {
	position: absolute;
	top: 50%;
	left: 0%;
	transform: translate(0%, -50%);
	height: 24px;
	width: 24px;
	background-color: #eee;
	border-radius: 50%;
  }
  
  /* On mouse-over, add a grey background color */
  .radio-container:hover input ~ .checkmark {
	background-color: #ccc;
  }
  
  /* When the radio button is checked, add a blue background */
  .radio-container input:checked ~ .checkmark {
	background-color: #7d7d7d;
  }
  
  /* Create the indicator (the dot/circle - hidden when not checked) */
  .checkmark:after {
	content: "";
	position: absolute;
	display: none;
  }
  
  /* Show the indicator (dot/circle) when checked */
  .radio-container input:checked ~ .checkmark:after {
	display: block;
  }
  
  /* Style the indicator (dot/circle) */
  .radio-container .checkmark:after {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 8px;
	height: 8px;
	  border-radius: 50%;
	  background: white;
  }

  /* ---------------------- Custome Select ------------------------ */

  .login1 .selectbox select {
	width: 100%;
	background-color: #1d1d1d;
	height: 45px;
	padding: 0 20px;
	border: none;
	border-radius: 0;
	background-size: 25px;
	appearance: none;
	font-size: 12px;
	color: #fff;
  }

  .login1 .selectbox {
	display: inline-block;
	height: 40px;
	border: 1px solid #000000;
	border-radius: 5px;
	background: #3a2142;
  }

  .login1 .selectbox {
    height: 45px;
  }
  .login1 .selectbox > select {
    height: 43px;
    padding: 0 20px 0 10px;
  }

  .line-between {
	height: 1px;
	background-color: #00aa00;
  }