@charset "utf-8";
#wrap {width:100%; min-width:1800px; display:flex; overflow:hidden; background:#16231f;}

/*-------------------------------------------------------------------------------------*
 *  Header                                                                             *
 *-------------------------------------------------------------------------------------*/
.contents_left{float:left; width:300px; transition:all 0.5s;}
.contents_right{float:right; width:calc(100% - 300px); transition:all 0.5s;}
/* 좌측구역 */
.left_header_wrap {width:100%; height:100%; overflow-y:scroll; background:url(../images/bg_left.jpg) center top repeat-y; transition:all 0.5s;}
.left_header_wrap{-ms-overflow-style: none;}
.left_header_wrap::-webkit-scrollbar{display:none;}
.logo{width:100%; height:200px; display:flex; justify-content: center; align-items:center; text-align:center;}
.logo a{display:block;}

.left_game_wrap{float:left; width:100%;}
.left_game_wrap li{margin:10px auto 0; width:250px; height:50px; background:url(../images/bg_gamebtn.png) center top no-repeat;}
.left_game_wrap li a{display:block; width:100%; height:100%; font-family:'rocket'; font-size:20px; color:#ffffff; line-height:50px; padding:0 0 0 16px;}

.mini_title{float:left; width:100%; margin:10px 0 0 0;}
.mini_title span{display:inline-block; width:290px; padding:10px 0 10px 27px; border-bottom:1px solid rgba(177,178,178,0.1); font-family:'GmarketSans'; font-weight:500; font-size:18px; color:#ffffff; cursor:default;}

.left_list1 {display:block; width:290px; height:44px; line-height:44px; cursor:pointer; padding:0 0 0 27px; border-bottom:1px solid rgba(177,178,178,0.1); font-family:'GmarketSans'; font-weight:300; font-size:16px; color:#ffffff; transition:all 0.5s;}
.menu1 .left_list1{background:rgba(177,178,178,0.0);}
.menu1.selected .left_list1{background:rgba(177,178,178,0.2);}
.left_list1:hover {background:rgba(177,178,178,0.15);}
.left_list1_in {display:block; background:#073635; width:290px; height:44px; line-height:44px; border-bottom:1px solid rgba(255,255,255,0.1); cursor:pointer; color:#ffffff; font-size:14px; padding:0 15px 0 35px;}
.left_list1_in a{color:#3a3a3a; font-weight:500;}
.left_list1_in:hover {background:#16231f;}
.left_list1_in:hover a{color:#000000;}
.menu_right {float:right;}
.menu_right_box {float:right; padding:0 20px 0 0;}

/* 우측구역 */
.right_header_wrap{float:left; width:100%; height: auto;}
.right_header_box1{float:left; width:100%; height:50px; overflow:hidden; padding:0 10px 0 10px; background:#105942;}
.right_header_box2{float:left; width:100%; height:60px; overflow:hidden; padding:0 10px 0 10px; background:#0b4746;}

.notice{float:left; width:30%; margin:15px 0 0 0; font-family:'GmarketSans'; font-weight:500; font-size:16px; color:#8ae4c8; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; transition:all 0.5s;}

.my{float:right; margin:10px 0 0 0; transition:all 0.5s;}
.my li{float:left; font-family:'GmarketSans'; font-weight:500; font-size:16px; color:#8ae4c8; margin: 0 0 0 5px; line-height:34px; transition:all 0.5s;}

.my_input{background:#14292e; border:1px solid #070e10; width:140px; padding:4px 0 4px 5px; color:#ffffff; font-size:14px; border-radius:0px; height:34px; transition:all 0.5s;}
.my_input::placeholder{color:#507681;}

.my_btn1{background:#093938; display:inline-block; min-width:100px; height:34px; line-height:38px; padding:0 10px 0 10px; text-align:center; font-size:16px; color:#ffffff; border-radius:0px; transition:all 0.5s;}
.my_btn1:hover{background:#062e2d;}

.gnb{float:left; width:100%; padding:0 0 0 30px;}
.gnb li{float:left; margin:0 60px 0 0;}
.gnb li a{display:block; font-family:'rocket'; font-size:18px; color:#ffffff; line-height:60px;}

/*-------------------------------------------------------------------------------------*
 *  Contents                                                                           *
 *-------------------------------------------------------------------------------------*/
.title_wrap {float:left; width:100%;}
.title{font-family:'rocket'; font-size:26px; color:#ffffff; line-height:50px; border-bottom:1px solid rgba(255,255,255,0.1);}

.s_title1 {font-family:'rocket'; font-size:22px; color:#ffffff; line-height:44px; border-left:3px solid #00ff2a; padding:0 0 0 10px;}
.s_title2 {font-family:'rocket'; font-size:20px; color:#ffffff; line-height:30; border-left:3px solid #00ff2a; padding:0 0 0 10px;}

.contents_wrap {float:left; width:100%; padding:0 0 0px 0;}
.contents_box {float:left; width:100%; margin:30px 0 50px 0; padding:0 30px 0 20px;}

.contents_box_left{float:left; width:calc(100% - 310px); transition:all 0.5s;}
.contents_box_right{float:right; width:280px; 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;}


/*-------------------------------------------------------------------------------------*
 *  Footer                                                                             *
 *-------------------------------------------------------------------------------------*/
.footer_wrap {float:left; width:100%; padding:30px 0 40px 0; background:#073635; overflow:hidden;}

.footer_box1{float:left; width:100%; padding:0 0 0 45px;}
.f_logo{float:left; margin:0 25px 0 0;}
.f_menu{float:left;}
.f_menu li{float:left; margin:0 50px 0 0;}
.f_menu li a{display:block; font-family:'GmarketSans'; font-weight:500; font-size:16px; color:#c7faf9; line-height:50px;}

.footer_box2{float:left; width:100%; padding:15px 0 15px 45px; font-weight:400; font-size:13px; color:#457877;}
.footer_box3{float:left; width:100%; padding:0 0 0 45px; font-weight:500; font-size:15px; color:#509997;}

/*-------------------------------------------------------------------------------------*
 *  Main                                                                               *
 *-------------------------------------------------------------------------------------*/
.main_game_list{width:1260px; min-width:1260px; margin:0 auto;}
.main_game_list ul{margin:20px 0 0 0;}
.main_game_list li{margin:0 30px 20px 0; display:inline-block;}
.main_game_list li:nth-child(3n){margin:0 0 15px 0;}
.main_game_list li a{display:block;}


/*-------------------------------------------------------------------------------------*
 *  out login                                                                          *
 *-------------------------------------------------------------------------------------*/
.login_wrap  {z-index: 0;float:left; width:100%; height:100vh; background:url("../images/bg_login.jpg") center top no-repeat; background-size:cover; position:relative; top:0; left:0; background-size: cover; background-repeat: no-repeat;}
.login_wrap:before{float:left; content:''; display:block; clear:both; width:100%; height:100%; background:url("../images/bg_login2.jpg") center top no-repeat; background-size:cover; position:absolute; top:0; left:0;}
.login_box_wrap {width:815px; margin:0px auto; transition:all 0.5s; position:relative; z-index:10000000;}
.login_tit {float:left; width:100%; text-align:center; margin:80px 0 20px 0; overflow:hidden;}

.login_box {width:100%; height:500px; background:url(../images/bg_login_login.png) center top no-repeat; margin:0 auto; overflow:hidden; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; transition:all 0.5s;}
.login{width:100%; margin:-50px 0 0 0;}
.login_table{width:600px; margin:0 auto; transition:all 0.5s;}

.login_text{padding:0 0 20px 0; font-family:'GmarketSans'; font-weight:500; font-size:20px; color:#ffffff;}

.login_btn1        {background:linear-gradient(#9adf20 0%, #0b4746 100%); width:270px; height:56px; line-height:56px; text-align:center; display:inline-block; color:#ffffff; font-size:18px; font-family:'GmarketSans'; font-weight:500; border-radius:5px; letter-spacing:-1pt;}
.login_btn1:hover  {background:linear-gradient(-45deg, #9adf20 0%, #0b4746 100%);}
.login_btn2        {background:linear-gradient(#787878 0%, #2c3124 100%); width:270px; height:56px; line-height:56px; text-align:center; display:inline-block; color:#ffffff; font-size:18px; font-family:'GmarketSans'; font-weight:500; border-radius:5px; letter-spacing:-1pt;}
.login_btn2:hover  {background:linear-gradient(-45deg, #787878 0%, #2c3124 100%);}

.input_login  {background-color:#ffffff; border:none; color:#3d3d3d; width:270px; height:56px; padding:0 0 0 15px; font-size:16px; font-weight:500; border-radius:5px; transition:all 0.5s;}
.login input::placeholder{color:#00864f; font-size:16px;}

.join_box input::placeholder{color:#00864f; font-size:16px;}

.join_box_wrap {float:left; width:100%;}
.join_box {margin:0px auto; width:900px; transition:all 0.5s;}
.join_start {float:left; width:100%; padding:35px 50px 50px 50px; background:linear-gradient(#01b15c 0%, #006a88 100%); border:1px solid #00eaa0; border-radius:5px;}
.join_title {float:left; width:100%; text-align:center; margin:5px 0 15px 0;}
.join_close_box {float:left; width:100%; text-align:center; padding:10px; position:relative; z-index:1;}

.join_input1       {background-color:#041c1c; border:1px solid #0b4746; padding:4px 0 4px 5px; color:#ffffff; font-size:14px; height:34px; border-radius:3px; width:100px;}


/*-------------------------------------------------------------------------------------*
 *  레이어팝업                                                                         *
 *-------------------------------------------------------------------------------------*/
.notice_popup1 {position:absolute; z-index:1000000000; top:170px; left:100px;}
.notice_popup2 {position:absolute; z-index:1000000000; top:170px; right:100px;}
.notice_popup_wrap {float:left; width:400px;}
.notice_popup_box {float:left; width:400px; height:550px; cursor:pointer;}
.notice_popup_box a{display:block;}
.notice_popup_text {float:left; width:100%; padding:30px;}
.notice_popup_font1 {float:left; width:100%; font-size:22px; letter-spacing:-1px; font-weight:700; color:#ffffff; line-height:40px;}
.notice_popup_font2 {float:left; width:100%; font-size:16px; letter-spacing:-1px; font-weight:400; color:#d4d4d4; line-height:28px;}

/* 메인팝업추가 4/28 */
.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; padding:30px 20px; background:#000000 url("../images/bg.png") center top; border:3px solid;}
.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:#d4d4d4; line-height:1.5;}
.main_pop_con_text2{float:left; width:100%; background:rgba(0,0,0,0.5); margin:10px 0 0 0; padding:20px 0; text-align:center; font-family:'EsaManru'; font-weight:500; font-size:18px; color:#f9f9f9; 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:#f9f9f9; 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:#2e2a26; font-family:'EsaManru'; font-weight:500; color:#ffffff; font-size:14px;}
.main_popup_close ul li a:hover{background:#27211c;}
.main_popup_close ul li:last-child a{border-left:1px solid #000000;}
.main_popup_close ul li a input{display:inline-block; margin:0 10px 0 0; accent-color: #000000;}
/*-------------------------------------------------------------------------------------*
 *  모달창(팝업)                                                                       *
 *-------------------------------------------------------------------------------------*/

 
/*-------------------------------------------------------------------------------------*
 *  특별한                                                                             *
 *-------------------------------------------------------------------------------------*/
/* 파워볼 버튼 */
.title_mini{color:#a2ff00;}
.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:#ffffff; }
.mini_power_title_s { font-weight:700; color:#8e8e8e; font-size:11px;}

.mini_power_btn1 {float:left; background-color:#0b4746; border:1px solid #00eaa0; width:100%; min-height:50px; line-height:16px; text-align:center; color:#ffffff; font-size:12px; font-weight:700; padding:7px 0 0 0; border-radius:5px; text-shadow:1px 2px 2px rgba(0,0,0,0.3); box-shadow:rgba(0,0,0,0.6) 2px 2px 4px -1px;}
.mini_power_btn1:hover {border:1px solid #008ef1;}
.mini_power_btn1.select{background-color:#008ef1; border:1px solid #008ef1;}

.mini_power_btn2 {float:left; background-color:#0b4746; border:1px solid #00eaa0; width:100%; min-height:50px; line-height:16px; text-align:center; color:#ffffff; font-size:12px; font-weight:700; padding:7px 0 0 0; border-radius:5px; text-shadow:1px 2px 2px rgba(0,0,0,0.3); box-shadow:rgba(0,0,0,0.6) 2px 2px 4px -1px;}
.mini_power_btn2:hover {border:1px solid #ff002a;}
.mini_power_btn2.select{background-color:#ff002a; border:1px solid #ff002a;}


.mini_power_font1 {font-family: 'GmarketSans'; font-size:20px; line-height:30px; color:#008ef1;}
.mini_power_font2 {font-family: 'GmarketSans'; font-size:20px; line-height:30px; color:#ff002a;}
.select .mini_power_font1 {color:#ffffff;}
.select .mini_power_font2 {color:#ffffff;}

/* 미니게임 카트 */
.mini_input       {background-color:#0b1114; border:1px solid #000000; width:100%; height:26px; color:#ffffff; padding:0 10px 0 10px; border-radius:3px; text-align:right;}
.cart_wrap {float:left; width:100%; padding:20px 10px 10px 15px; background:linear-gradient(#01b15c 0%, #006a88 100%); border:1px solid #00eaa0;}
.cart_title {float:left; width:100%;}
.cart_point{font-family:'rocket'; font-size:20px; color:#ffffff;}

.fix_btn1{display:inline-block; width:46px; height:26px; border-radius:5px; background:#057371; text-align:center; line-height:30px; font-family:'GmarketSans'; font-weight:500; font-size:14px; color:#e4d5ff;}
.fix_btn2{display:inline-block; width:46px; height:26px; border-radius:5px; background:#009b55; text-align:center; line-height:30px; font-family:'GmarketSans'; font-weight:500; font-size:14px; color:#a5e4af;}

.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:rgba(0,0,0,0.5); border-radius:5px;font-family:'GmarketSans'; font-weight:500; font-size:14px; color:#00ce7a; transition:all 0.5s;}
.del_btn:hover{background:rgba(0,0,0,0.7);}

.cart_bet {background:rgba(0,0,0,0.5); 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; color:#ffffff; border-bottom:1px solid rgba(255,255,255,0.1); font-family:'GmarketSans'; font-weight:500; font-size:14px; color:#ffffff;} /* 카트리스트 */
.cart_style2 {float:right;}

.cart_font1{color:#ffffff; font-weight:700; font-size:18px; font-style:italic;}
.cart_font2{color:#ffcc00; font-weight:700; font-size:18px; font-style:italic;}

.cart_btn1          {background:rgba(0,0,0,0.5); width:100%; height:40px; line-height:40px; display:inline-block; text-align:center; border-radius:5px; color:#00ce7a; font-size:13px; letter-spacing:0pt; font-weight:500; transition:all 0.5s;}
.cart_btn1:hover    {background:rgba(0,0,0,0.7);}

.cart_btn2          {background:linear-gradient(#9adf20 0%, #0b4746 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:'GmarketSans'; font-weight:700; font-size:22px; color:#ffffff; text-shadow:2px 0 3px rgba(0,0,0,0.4);}
.cart_btn2:hover    {background:linear-gradient(-45deg, #9adf20 0%, #0b4746 100%);}

.customer1{float:left; width:100%; margin:10px 0 0 0; padding:20px 0 30px 0; text-align:center; background:linear-gradient(#01b15c 0%, #006a88 100%); border:1px solid #00eaa0; font-family:'rocket'; font-size:24px; color:#ffffff; line-height:1.5;}
.customer2{float:left; width:100%; margin:10px 0 0 0; padding:20px 0 20px 0; text-align:center; background:linear-gradient(#01b15c 0%, #006a88 100%); border:1px solid #00eaa0; font-family:'rocket'; font-size:16px; color:#ffffff;}
.customer2 span{font-size:22px;}


/* 검색창 */
.select_box{float:left; width:100%; background:#22332e; padding:25px 0 30px 0; border-radius:5px; text-align:center;}
.date_input{background-color:#0b4746; border:1px solid #22332e; padding:4px 10px 4px 10px; color:#ffffff; font-size:16px; border-radius:5px; height:50px;}
.date_btn{background-color:#0b4746; border:1px solid #22332e; padding:4px 10px 4px 10px; color:#ffffff; font-size:14px; border-radius:5px; height:50px;}
.date_btn:hover{border:1px solid #00eaa0;}
input[type="date"]::-webkit-calendar-picker-indicator {color-scheme: dark;}


/* 댓글 */
.comment_box{float:left; width:100%; background:#22332e; 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:#0b4746; height:80px; border:1px solid #22332e; transition:all 0.5s; border-radius:5px;}
.comment_btn{display:inline-block; text-align:center; border-radius:5px; font-family:'GmarketSans'; font-weight:700; font-size:20px; color:#ffffff; text-shadow:2px 0 3px rgba(0,0,0,0.4); background:linear-gradient(#9adf20 0%, #0b4746 100%); min-width:140px; height:80px; line-height:84px; transition:all 0.5s;}

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

.comment_po{background:rgba(0,0,0,0.5); color:#dddddd; padding:0 15px 0 15px; line-height:30px; text-align:center; display:inline-block; font-size:14px; 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:#ffffff; padding:10px 8px 8px 8px; line-height:22px; transition:all 0.5s;}

/* 게임리스트 리스트 */
.game_list{float:left; width:100%; min-width:1260px; margin:0 auto;}
.game_list ul{margin:30px 0 0 0; display:flex; flex-wrap: wrap; justify-content: flex-start;}
.game_list li{float:left; padding:0 7px 10px 0 ;}
.game_list li a{display:block;}



/* 콤프 */
.comp_wrap{background:rgba(0,0,0,0.7); border-bottom:1px solid rgba(255,255,255,0.0); float:left; width:100%; padding:25px 0 30px 0; border-radius:5px;}
.comp_box{float:left; width:100%;}
.comp_box ul{float:left; width:100%; text-align:center;}
.comp_box ul li{font-family:'speed'; font-size:18px; color:#ffffff; line-height:50px;}
.comp_box ul li span{display:inline-block; min-width:170px; text-align:right; font-size:20px; color:#ffc600;}

.comp_input{background-color:#2b251f; border:1px solid #4e433a; padding:4px 0 4px 5px; color:#ffffff; font-size:12px; border-radius:5px; height:34px;}


/* 23/4/3 슬롯팝업 추가 */
.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:#303030; border:1px solid #905b5b; border-radius:5px;}
.slot_title {float:left; width:100%; font-family:'speed'; font-size:26px; color:#ffffff; 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.3); 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:'GmarketSans'; font-weight:500; color:#ffffff; 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: #fff;
text-decoration: none;
font-weight: bold;
font-size: 18px;
}

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

.main_board_wrap {
    max-width: 1620px;
    width: 100%;
    margin: 0 auto;
}
.board {
    float: left;
    background: var(--color-bg-8-40);
    width: 32%;
    padding: 40px 30px 30px;
    border-radius: 10px;
    margin: 2% 2% 0 0;
    transition: all 0.5s;
}
.board:last-child {
    margin: 2% 0% 0 0;
}
.board_title {
    font-family: "speed";
    font-size: 24px;
    color: #ffffff;
}
.board_box {
    margin: 20px 0 0 0;
    height: 170px;
    overflow: hidden;
}
.myTable {
    table-layout: fixed;
}
.board_box td {
    color: #ffffff;
    font-size: 16px;
    line-height: 34px;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.board_font1 {
    color: var(--color-font-4);
}