@charset "utf-8";

#wrap {float:left; width:100%; overflow-x:hidden; display:flex; background:url(../images/bg.jpg) center top repeat-y; background-size:100%;}

/*-------------------------------------------------------------------------------------*
 *  Header                                                                             *
 *-------------------------------------------------------------------------------------*/
.wrap_left{float:left; width:300px; padding:0 0 20px; background:url(../images/bg_left.jpg) center top no-repeat; position:fixed; z-index:1000;}
.wrap_right{float:right; width: calc(100% - 300px); margin:0 0 0 300px;}

/* left */
.logo{float:left; width:100%; text-align:center; height:220px; line-height:220px; background:url(../images/bg_logo.jpg) center top no-repeat;}
.logo a{display:block}


.left_inner{float:left; width:100%; height:calc( 100vh - 220px ); padding:30px 0; overflow-y:auto;}
.left_inner::-webkit-scrollbar {
  display: none;
}
.left_game{float:left; width:100%; padding:0 15px;}
.left_game li{float:left; margin:0 0 5px 0;}
.left_game li a{display:block;}

.left_menu{float:left; width:100%; margin:24px 0 0 0;}
.left_menu ul{}
.left_menu li{float:left; width:100%; height:54px; border-top:1px solid rgba(255,255,255,0.1); border-bottom:1px solid #080604;}
.left_menu li:first-child{border-top:none;}
.left_menu li:last-child{border-bottom:none; height:1px;}
.left_menu li a{display:block; width:100%; padding:0 35px;;  line-height:54px; border-radius:0px; font-family: 'EsaManru'; font-weight:700; font-size:19px; color:#ffffff; position:relative; transition:all 0.5s;}
.left_menu li a img{position:absolute; right:30px; top:50%; transform:translateY(-50%);}
.left_menu li a:hover{background:rgba(53,41,23,0.4); color:#e09f00;}

.left_customer{float:left; width:100%; margin:10px 0 0 0; padding:0 15px;}
.left_customer a{display:block; width:100%; overflow:hidden; background:rgba(0,0,0,0.4); padding:15px 5px 15px 25px;}
.lc_img{float:left; margin:0 20px 0 0;}
.lc_img img{width:48px;}
.lc_text{float:left; font-family:'EsaManru'; font-weight:700; font-size:16px; color:#ffffff; line-height:24px;}
.lc_text span{color:#2cbffe;}

.left_domain{float:left; width:100%; margin:10px 0 0 0; padding:0 15px;}
.left_domain_box{float:left; width:100%; padding:34px 0 27px; background:url(../images/bg_domain.jpg) center top no-repeat;}
.left_domain_text1{float:left; width:100%; text-align:center; line-height:1.5; font-family: 'EsaManru'; font-weight:700; font-size:22px; color:#fddc3f;}
.left_domain_text2{float:left; width:100%; margin:10px 0 0 0; text-align:center; line-height:1.5; font-family: 'EsaManru'; font-weight:700; font-size:40px; color:#ffffff;}
.left_domain_text3{float:left; width:100%; margin:10px 0 0 0; text-align:center; line-height:1.5; font-family: 'EsaManru'; font-weight:300; font-size:16px; color:#ffffff;}
/* right */
.top_box{float:left; width:100%; padding:0 50px; background:#363636;}
.notice{float:left; max-width:50%; height:50px; line-height:50px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family: 'EsaManru'; font-weight:300; font-size:14px; color:#ffffff;}

.my{float:right; height:50px; line-height:50px; text-align:right;}
.my ul{float:right;}
.my li{float:left; margin:0 0 0 20px; font-family: 'EsaManru'; font-weight:300; font-size:14px; color:#ffffff;}


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

.top_my_btn1  {background:linear-gradient(#c18805 0%, #e6da6f 26%, #e4b647 47%,#8c540f 78%, #3d2b00 100%); min-width:100px; height:34px; line-height:34px; display:inline-block; text-align:center; border-radius:34px; font-size:14px; color:#000000;}
.top_my_btn1:hover {background:linear-gradient(-45deg, #c18805 0%, #e6da6f 26%, #e4b647 47%,#8c540f 78%, #3d2b00 100%);}
.top_my_btn2  {background:linear-gradient(#b68b4d 0%, #85622a 100%); border:1px solid #1f1f1f; min-width:100px; height:34px; line-height:34px; display:inline-block; text-align:center; border-radius:34px; color:#ffffff;}
.top_my_btn2:hover {background:linear-gradient(-45deg, #b68b4d 0%, #85622a 100%);}

.title_box{float:left; width:100%; padding:0 50px; margin:10px 0 0 0;}
.title{float:left; width:100%; height:80px; line-height:80px; text-align:left; font-family: 'EsaManru'; font-weight:700; font-size:24px; color:#ffffff; border-bottom:1px solid rgba(255,255,255,0.1);}

.info_title{float:left; width:100%; background:linear-gradient(#c18805 0%, #e6da6f 26%, #e4b647 47%,#8c540f 78%, #3d2b00 100%); padding:0 10px; line-height:40px; font-family: 'EsaManru'; font-weight:300; font-size:18px; color:#000000; border-radius:5px 5px 0 0;}
.s_title1{float:left; width:100%; font-family: 'EsaManru'; font-weight:500; font-size:18px; color:#ffffff;}

/*-------------------------------------------------------------------------------------*
 *  Contents                                                                           *
 *-------------------------------------------------------------------------------------*/
.contents_wrap {float:left; width:100%; min-height:400px; margin:10px 0 0 0; padding:0 50px;}
.contents_box {float:left; width:100%;}
.contents_box_left      {float:left; width:calc(100% - 380px);}
.contents_box_right     {float:right; width:370px; margin:0 0 0 10px;}

.con_box00 {float:left; width:100%; margin:0 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%; text-align:center; background:#383838; margin:40px 0 0 0; padding:40px 0 40px 0; font-family: 'EsaManru'; font-weight:300; font-size:16px; color:#7a7a7a;}

/*-------------------------------------------------------------------------------------*
 *  Main                                                                               *
 *-------------------------------------------------------------------------------------*/
.slideshow{width:100%; max-width:1620px; margin:0 auto; position:relative; overflow:hidden;}
.slideshow .swiper-pagination{text-align:left; padding:0 0 0 60px; bottom:70px !important;}
.slideshow .swiper-pagination .swiper-pagination-bullet{width:20px; height:20px; background:#ffffff;}
.slideshow .swiper-pagination .swiper-pagination-bullet-active{background:#ffb400;}
.main_game_title{float:left; width:100%; margin:50px 0 0 0; padding:0 50px; display:flex; align-items:center;}
.main_game_title_l{float:left;}
.main_game_title_r{float:left; font-family: 'EsaManru'; font-weight:500; font-size:30px; color:#ffffff; line-height:30px;}
.main_game_title_r span{font-weight:300; font-size:16px; color:#888888;}

.main_game_list{float:left; width:100%; margin:20px 0 0 ; padding:0 5px;}
.main_game_list ul{margin:0px 0 0 0;}
.main_game_list li{float:left; width:calc(100% / 4 - 30px); margin:0 40px 20px 0; transition:all 0.5s;}
.main_game_list li:nth-child(4n){margin:0 0 20px 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:1924px) {
.main_game_list li{float:left; width:19.2%; margin:0 1% 1% 0; transition:all 0.5s;}
.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;} 
.main_game_list.main_game_list2 li:nth-child(n+9){display:block;}
}

.main_board_box{float:left; width:100%; margin:30px 0 0 0; padding:0 50px;}
.main_board{float:left; width:32%; margin:0 2% 0 0; background:rgba(114,68,0,0.3); padding:30px 20px; border-radius:0px;}
.main_board:last-child{margin:0;}
.board_title{font-family:'Esamanru'; font-weight:700; font-size:20px; color:#ffffff; text-shadow:2px 0 3px rgba(0,0,0,0.4);}
.board{float:left; width:100%; margin:15px 0 0 0;}
.board table{table-layout:fixed;}
.board td{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:36px; font-family:'Esamanru'; font-weight:300; font-size:14px; color:#858585;}
.board td:nth-child(2){color:#ffb400; font-weight:700;}
.board td:first-child{color:#ffffff;}
.board td:last-child{color:#858585; font-weight:300;}


/*-------------------------------------------------------------------------------------*
 *  login                                                                          *
 *-------------------------------------------------------------------------------------*/
.popup_none              {display:none;}
.login_wrap{width:400px; transition:all 0.5s;}
.join_wrap{width:650px; margin:40px 0 0 0; transition:all 0.5s;}
.loginbox{width:100%; float:left;  background:url(../images/bg.jpg) center top repeat-y; border-radius:3px; padding:40px; position:relative; box-shadow:0px 0px 30px rgba(0,0,0,0.7);}
.login_logo{float:left; width:100%; text-align:center;}
.login {float:left; width:100%; margin:20px 0 0 0;}
.login li {float:left; width:100%; padding:1%; transition:all 0.2s;} /* ysk 가로 100%로 변경시 세로형 */
.login_input  {background-color:#000000; border:1px solid #1d1d1d; color:#ffffff; width:100%; height:56px; font-size:16px; font-weight:500; border-radius:5px; padding:0 0 0 10px; font-family:'Noto Sans KR';}
.login_input::placeholder {color:#999999; font-size:14px; letter-spacing:0pt;}
.login_input:focus{border:1px solid #fff38b; box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);}

.login_text{float:left; width:100%; text-align:center; font-family:'Esamanru'; font-weight:500; font-size:16px; color:#ffffff;}
.login_text2{float:left; width:100%; margin:10px 0 0 0; text-align:center; font-family:'Esamanru'; font-weight:300; font-size:14px; color:#ffffff; line-height:1.5;}

.login_btn1        {background:linear-gradient(#e1a000 0%, #875200 100%); width:100%; height:56px; line-height:56px; text-align:center; display:inline-block; color:#ffffff; font-size:16px; font-weight:500; border-radius:5px; letter-spacing:-1pt; font-family:'Esamanru';}
.login_btn1:hover  {background:linear-gradient(to right, #e1a000 0%, #875200 100%);}

.login_btn2        {background:linear-gradient(#858585 0%, #474747 100%); width:100%; height:56px; line-height:56px; text-align:center; display:inline-block; color:#ffffff; font-size:16px; font-weight:500; border-radius:5px; letter-spacing:-1pt; font-family:'Esamanru';}
.login_btn2:hover  {background:linear-gradient(to right, #858585 0%, #474747 100%);}


.join {float:left; width:100%; margin:20px 0 0 0; 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;}
.join ul {float:left; width:100%;} /* ysk 가로 100%로 변경시 세로형 */
.join ul li {float:left; width:50%; padding:1%; line-height:30px;} 
.phone {display:flex; align-items:center;}

.join_text {float:left; width:100%; padding:0 0 10px 10px; font-weight:400; font-size:16px; color:#ffffff;}

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

.join_input1  {background-color:#000000; border:1px solid #1d1d1d; color:#ffffff; width:100%; height:50px; font-size:16px; font-weight:500; border-radius:0px; padding:0 0 0 10px; font-family:'Noto Sans KR';}
.join_input1::placeholder {color:#999999; font-size:14px; letter-spacing:0pt;}
.join_input1:focus{border:1px solid #fff38b; box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);}

/* 특별 */
.join ul.bank li{width:33%;}
.security{display:flex; justify-content:space-between;}
.security_code{background-color:#000000; border:1px solid #1d1d1d; color:#ffffff; height:50px; width:70%;}
.security_code_btn{width:28%;}
.security_code_btn a{background:linear-gradient(#696969 0%, #414141 100%); border:1px solid #1f1f1f; width:100%; height:50px; line-height:50px; text-align:center; display:inline-block; color:#ffffff; font-size:14px; font-weight:500; border-radius:5px; letter-spacing:-1pt; font-family:'Esamanru';}
.security_code_btn a img{width:32px;}


/*-------------------------------------------------------------------------------------*
 *  특별한                                                                             *
 *-------------------------------------------------------------------------------------*/
.cart_wrap {float:left; width:100%; padding:0 5px 10px 5px;  background:rgba(53,41,23,0.8);}
.cart_title {float:left; width:100%; padding:5px; line-height:35px; letter-spacing:-1pt; background:linear-gradient(#c18805 0%, #e6da6f 26%, #e4b647 47%,#8c540f 78%, #3d2b00 100%); font-family: 'EsaManru'; font-weight:700; font-size:16px; color:#000000;}

.cart_bet {background:#202020; border-bottom:1px solid #ef8534; padding:5px 12px 3px 12px; line-height:22px; margin:3px 0 0 0; color:#ffffff;}  /* 팀 선택시 */
.cart_bet td {color:#ffffff;}

.cart_style1 {line-height:32px; padding:3px 7px 0 7px; font-family: 'EsaManru'; font-weight:300; font-size:14px; color:#acacac; border-bottom:1px solid rgba(255,255,255,0.1);} /* 카트리스트 */
.cart_style2 {float:right; color:#ffe400; font-weight:700;}


.cart_btn1          {border:1px solid rgba(255,255,255,0.2); width:100%; text-align:center; display:inline-block; font-family: 'EsaManru'; font-weight:500; font-size:12px; color:#ffffff; border-radius:3px; line-height:34px;}
.cart_btn1:hover    {border:1px solid #ffe400; color:#ffe400;}

.cart_btn2          {background:linear-gradient(#e1a000 0%, #875200 100%); width:100%; text-align:center; display:inline-block; font-family: 'EsaManru'; font-weight:700; color:#ffffff; font-size:18px; border-radius:3px; line-height:46px; }
.cart_btn2:hover    {background:linear-gradient(-45deg,#e1a000 0%, #875200 100%);}

.cart_input1 {background-color:#141414; border:1px solid #282828; padding:4px 5px 4px 5px; font-family: 'EsaManru'; font-weight:700; color:#ffe400; font-size:14px; border-radius:3px; height:34px; text-align:right;}

.cart_x{width:24px;}
.bet_del{width:24px;}
.fix_on{width:24px;}
.fix_off{width:24px;}
 
/* 출석부 */
.att_title1     {background:linear-gradient(#e1a000 0%, #875200 100%); color:#ffffff; line-height:44px; text-align:center; font-weight:700;}
.att1           {background:rgba(53,41,23,0.4); border-bottom:1px solid rgba(255,255,255,0.1); color:#dddddd; height:130px; text-align:center; position:relative;}
.att2           {position:absolute; top:10px; left:10px; z-index:1;}
.att_style td	{font-size:16px; font-weight:500;}

/* 게임리스트 */
.game_list{float:left; width:100%;}
.game_list ul{margin:0px 0 0 0;}
.game_list li{float:left; width:calc(100% / 3 - 28px); margin:0 42px 30px 0; transition:all 0.5s;}
.game_list li:nth-child(3n){margin:0 0 30px 0;}
.game_list li a{display:block;}
.game_list li a img{width:100%; transition:all 0.5s;}
@media screen and (min-width:1924px) {
.game_list li{float:left; width:24.25%; margin:0 1% 1% 0; transition:all 0.5s;}
.game_list li:nth-child(3n){margin:0 1% 1% 0;}   
.game_list li:nth-child(4n){margin:0 0 1% 0;}   
}
/* 이벤트 */
.event{float:left; width:100%;}
.event ul{margin:0px 0 0 0;}
.event li{float:left; width:calc(100% / 4 - 30px); margin:0 40px 30px 0; transition:all 0.5s;}
.event li:nth-child(4n){margin:0 0 30px 0;}
.event li a{display:block;}
.event li a img{width:100%; transition:all 0.5s;}

.event_box{width:100%;}
.event_tr		 {width:100%; font-size:0;}
.event_title{float:left; width:100%; background:linear-gradient(#222222 0%, #222222 100%); border-top:1px solid #ffe500; padding:20px; font-size:16px; font-family:'EsaManru'; font-weight:500; width:100%; text-align:left; padding-left:20px; color:#ffffff;}
.event2           {float:left; background:#111111; border:1px solid rgba(255,255,255,0.1); padding:12px 20px 10px 20px; width:100%; line-height:26px; min-height:150px; color:#ffffff; font-size:12px;}
.event2_l{float:left; width:370px;}
.event2_r{float:left; width:calc( 100% - 370px); text-align:center; padding:0 0 0 50px;}
.event2_r img{width:100%; max-width:800px;}
@media screen and (min-width:1924px) {
.event li{float:left; width:19.2%; margin:0 1% 1% 0; transition:all 0.5s;}
.event li:nth-child(4n){margin:0 1% 1% 0;}   
.event li:nth-child(5n){margin:0 0 1% 0;}   
}

@media screen and (max-width:640px) {
	.main_game_list li{float:left; width:calc(100% / 2 - 10px); margin:0 10px 10px 0; transition:all 0.5s;}
}