@charset "utf-8";
/* CSS Document */
*{margin:0 ;padding:0}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video, button{margin:0;padding:0;border:0;font-weight:inherit;vertical-align:baseline}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section{display:block}
body{font-size:1rem;background:#F4F5FA; font-family: Helvetica, sans-serif
}
ol, ul{list-style:none}
a,a:hover{text-decoration:none;color:inherit}
blockquote,q{quotes:none}
blockquote:before,q:before,blockquote:after,q:after{content:''}
table{border-collapse:collapse;border-spacing:0;vertical-align:middle}
thead, tbody, tfoot, tr, th, td, img{vertical-align:middle}
table caption{position:absolute;top:-1px;left:-1px;width:1px;height:1px;font-size:1px;line-height:1px;color:transparent;white-space:nowrap;overflow:hidden;z-index:-1}
input,button{font-family:inherit;outline: none;}
input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=radio],
input[type=checkbox]{margin:3px 3px 3px 4px;vertical-align:middle; width: 20px; height: 20px;}
.fl{float:left !important;}
.fr{float:right !important}
.ct{clear:both;*zoom:1}
.ct:after{/* content:''; */display:block;clear:both;height:1px;margin-top:-1px;}
.wrap{background: #2F3F52;}
.header_wrap{  height: 95px;border-bottom: 1px solid #3B4A5C; width: 100%; top: 0; background: #2F3F52; z-index: 1000000; position: fixed; }
.global_width{width:1200px;margin:0 auto; position: relative;}
.hr_line{background-color:#3B4A5C;}
.qm_left{margin-left:10px}
.q_menu li span{color:#ee6123; }
.q_menu li{position:relative;display:inline-block; color:#8f97ab;*display:inline;zoom:1; line-height: 25px;}
.q_menu li:first-child{margin-left:0}
.q_menu li > a{display:inline-block;height:28px;line-height:28px;color:#8f97ab;padding:0 5px;font-weight:300}
.q_menu li > a i{position:relative;top:-2px;margin-left:4px}
.q_menu li:hover > a{color:#ff8435}
.q_menu li:hover .lay_pop{display:block}
.h_nav{padding:5px 0; position: relative;}
.logo_t{}
.logo_t a{display:block;line-height:0;width:140px;height:54px;background-position:0 0;margin-right: 50px;}
.sp_comm{ background: url('') no-repeat; }
.h_nav li{position:relative;display:inline-block;margin-left:29px;*display:inline; zoom:1;height: 50px;}
.h_nav li:first-child{margin-left:0}
.h_nav li:before{content:'';position:absolute;bottom:0px;left:0;width:0;transition:all 0.2s ease-in-out 0s}
.h_nav li:hover > a{color:#ff8435}
.h_nav li:hover i{border-color:#ff8435;-webkit-transform:rotate(-225deg);-moz-transform:rotate(-225deg);-o-transform:rotate(-225deg);transform:rotate(-225deg)}
.h_nav li:hover .lay_pop{display:block}
.h_nav li > a{display:block;height:24px;line-height:27px;padding:12px 0 14px;font-size:16px;color:#fff;font-weight: bold; font-family: NotoSansKr-Black;}
.h_nav li > a i{position:relative;top:-4px;margin-left:8px;transition:all 0.3s linear 0s}
.h_nav li.on > a{color:#ee6123}
.h_nav li.on > a i{border-color:#ff8435}
.h_nav li.on:before{width:100%;height:3px;background-color:#ee6123}
.hn_rightTit{ position: absolute; right: 220px; margin-top: 16px; color: #ee6123;}
.header_wrap .hn_right ul li{font-size:12px; color: #fff;}
.header_wrap .hn_right ul li span{ color: #ff8435; margin-left: 5px;}
.header_wrap .h_nav .lay_pop{top:42px}
.header_wrap .h_nav + .h_nav{display:none}
.header_wrap .sub_nav{position:relative;text-align:center !important;background-color:#fff;box-shadow:0 3px 6px -3px #eee}
.header_wrap .sub_mn a{position:relative;display:inline-block;height:40px;line-height:43px;font-size:16px;padding:0 10px;color:#a4a4a4;margin-left:20px}
.header_wrap .sub_mn a i{margin-right:7px}
.header_wrap .btn_themes{display:none;position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:553px;padding:13px 10px 10px}
.header_wrap .sub_nav + .hr_line{background-color:#f3f3f3;-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.06);-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.06);-ms-box-shadow:0 1px 2px rgba(0, 0, 0, 0.06);box-shadow:0 1px 2px rgba(0, 0, 0, 0.06);opacity:1}
.header_wrap .lay_pop{top:28px;right:0;padding:10px 0;border-radius:5px}
.header_wrap .hn_left .lay_pop{right:auto;left:0}
.header_wrap .lay_pop a{display:block;width:auto;min-width:138px;height:36px;line-height:36px;color:#888;padding:0 14px;box-sizing:border-box;white-space:nowrap;font-size:14px}
.header_wrap .lay_pop a:hover{background-color:#f8f8f8;color:#ff8435}
.header_wrap .lay_sns i{width:16px;height:16px;margin-right:8px;vertical-align:middle}
.header_wrap .lay_sns i.ico_sns_fb{background-position:-106px 0}
.header_wrap .lay_sns i.ico_sns_tw{background-position:-128px 0}
.header_wrap .lay_sns i.ico_sns_st{background-position:-148px 0}
.header_wrap .lay_sns i.ico_sns_nb{background-position:-168px 0}
.header_wrap .lay_sns i.ico_sns_yt{background-position:-188px 0}
.header_wrap .lay_app{padding-left:16px;padding-right:16px}
.header_wrap .lay_app a{width:100%;min-width:208px;display:inline-block;border:1px solid #ff8435;color:#ff8435;background-color:#fff;box-sizing:border-box;height:46px;line-height:46px;border-radius:6px;font-size:13px;text-align:left;padding-left:27px}
.header_wrap .lay_app a:hover{background-color:#f2f2f2}
.header_wrap .lay_app a:first-child{margin-bottom:6px}
.header_wrap .lay_app i{position:relative;top:-2px;width:16px;margin-right:15px;vertical-align:middle}
.header_wrap .lay_app i.ico_app_and{height:19px;background-position:-220px 0}
.header_wrap .lay_app i.ico_app_ios{height:20px;background-position:-244px 0}
.lay_pop,.lay_pop2{display:none;position:absolute;z-index:10;background-color:#fff;border-radius: 4px;width: 70px;padding: 5px;text-align: center;}
.lay_pop{-webkit-box-shadow:0 0 4px rgba(0, 0, 0, 0.4);-moz-box-shadow:0 0 4px rgba(0, 0, 0, 0.4);-ms-box-shadow:0 0 4px rgba(0, 0, 0, 0.4);box-shadow:0 0 4px rgba(0, 0, 0, 0.4)}
.lay_pop2{padding:20px;border:1px solid #ccc;box-sizing:border-box}
.lay_pop2 .pop_tit{font-size:14px;line-height:14px;padding-bottom:15px}
.lay_pop2 .pop_tit i{margin-right:3px}
.lay_pop2 .pop_tit + p{display:block;color:#777;font-size:13px;line-height:18px}
.lay_pop2 .pop_close{position:absolute;right:15px;top:15px;display:block;padding:5px}
.lay_pop.lay_qr{right:0;top:130%;padding:10px;border-radius:5px}
.hr_line,.hr_line2{border:0;width:100%;margin:0;height:1px}
.hr_line{background-color:#3B4A5C;}
.hr_line2{background-color:#eee}
.marTop85{ margin-top: 95px; }
/* icon */
.ico_ar,.ico_ar_bgup_1,.ico_ar_bgdown_1,.ico_ar_bgup_2,.ico_ar_bgdown_2,.ico_ar_bgup_3,.ico_ar_bgdown_3,.ico_star,.ico_themes,.ico_menu,.ico_search,.ico_ar_pup,.ico_ar_pup2,.ico_ar_pdn,.ico_ar_pdn2,.ico_popup,.ico_order,.ico_calc{display:inline-block;cursor:pointer}
.ico_ar{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
.ico_ar_up_w,.ico_ar_down_w{display:inline-block;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);width:4px;height:4px;border:1px solid #e5e6e7}
.ico_ar_up_g,.ico_ar_down_g{display:inline-block;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);width:5px;height:5px;border:1px solid #afafaf}
.ico_ar_up_b,.ico_ar_down_b{display:inline-block;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);width:6px;height:6px;border:1px solid #333}
.ico_ar_up_w,.ico_ar_up_g,.ico_ar_up_b{border-left:0;border-bottom:0}
.ico_ar_down_w,.ico_ar_down_g,.ico_ar_down_b{border-right:0;border-top:0}
.ico_ar_bgup_1,.ico_ar_bgdown_1,.on .ico_ar_bgup_3,.on .ico_ar_bgdown_3{border:5px solid #777;border-left:3px solid transparent;border-right:3px solid transparent}
.ico_ar_bgup_2,.ico_ar_bgdown_2{border: 6px solid #fff;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;}
    .ico_ar_bgup_3,.ico_ar_bgdown_3{border:5px solid #d6d6d6;border-left:3px solid transparent;border-right:3px solid transparent}
.ico_ar_bgup_1,.ico_ar_bgup_2,.ico_ar_bgup_3{border-top:0!important}
.ico_ar_bgdown_1,.ico_ar_bgdown_2,.ico_ar_bgdown_3{border-bottom:0!important}

.ico_ar_pup,.ico_ar_pup2,.ico_ar_pdn,.ico_ar_pdn2{width:8px;height:8px}
.ico_ar_pup{background-position:0 0}
.ico_ar_pup2{background-position:-426px -29px}
.ico_ar_pdn{background-position:0 0}
.ico_ar_pdn2{background-position:-438px -29px}
.ico_star{width:12px;height:12px;background-position:-367px 0}
.ico_star.star_on,
.view_favorites.on .ico_star{background-position:-351px 0}
.ico_themes{width:13px;height:16px;background-position:-360px -30px}
.ico_search{width:14px;height:14px;background-position:-417px 0}
.ico_menu{width:8px}
.ico_menu:before,.ico_menu:after{content:''}
.ico_menu:before,.ico_menu:after,.ico_menu i{display:block;height:2px;background-color:#bbb}
.ico_menu i{margin:1px 0}
.sort_btn_box{position:relative;display:inline-block;vertical-align:middle}
.sort_btn_box a{display:block;width:14px;height:7px;line-height:7px}
span.tx_ex_s{font-size:12px !important;color:#a4a4a4}
.ex_tx{padding:16px 14px 14px 14px;background-color:#fff8ec}
.ex_tx *{vertical-align:middle}
.ico_i,.ico_q,.ico_q2,.ico_q3{position:relative;top:-1px;display:inline-block;width:14px;height:14px;line-height:15px;text-indent:1px;font-style:normal;font-size:10px;vertical-align:middle;overflow:hidden;text-align:center!important;border-radius:7px;color:#fff}
.ico_q2{background-color:#a4a4a4}
.ico_q3{background-color:#222}
.ico_info{width:15px;height:15px;margin-right:4px;background-position:-510px -29px;vertical-align:middle}
.question_mark{width:15px;height:15px;background-position:-492px -28px;vertical-align:middle}
.coin_add a i.add_copy{background-position:-539px -30px}
.coin_add a i.qr_code{background-position:-557px -30px}
.ico_popup{width:12px;height:12px;background-position:-381px -30px}
.ico_order{width:11px;height:11px;background-position:-399px -30px}
.ico_close{position:relative;display:inline-block;width:14px;height:14px}
.ico_close:before,.ico_close:after{content:'';position:relative;display:block;background-color:#888;width:100%;height:1px}
.ico_close:before{transform:rotate(45deg);top:7px}
.ico_close:after{transform:rotate(-45deg);top:6px}
.ico_calc{width:14px;height:16px;background-position:-555px 0}
.banner_area{ padding: 30px 0;margin-bottom: 20px; background: url(/images/notcie_body_bg.jpg?7845) center center  no-repeat; width: 100%; height: 300px;}
.btci_box{box-sizing:border-box;position:relative;border-radius:8px;vertical-align:top;background:rgba(0,0,0,0.5) ;padding: 20px 0px;height: 300px;}
.btci_box li{ line-height: 30px; padding: 5px 20px; }
.btcon:last-child{margin-right:0}
.btci_box li>a{ color:#fff; font-size: 14px;}
.btci_box li>a>img{ margin-left: 5px; }
.btci_box li span{ float: right; }
.btH{ color: #fff; font-size: 16px;  background: url('/images/notice_icon.png') no-repeat 0px 3px; padding-left: 20px; margin: 0 20px;margin-bottom: 5px;}
.btH span{ float: right; }
.btH span a{ font-size: 12px; color: #fff }
.bx-wrapper{ width: 1200px; margin: 0px auto; }
.btcon{ float: left; width:384px;margin-right:24px;}
.btlast{ margin-right: 0; }
.listCon{ }
.top5_area{padding:35px 0;}
.top5_area li{position:relative;width:280px;height:90px;border-radius:4px; background: url(../images/w_08.png) no-repeat 210px 40px #fff;display: inline-block; margin-right: 20px;}
.top5_area li:hover{box-shadow:0 10px 10px #eaeaea;transform:translate(0, -5px);transition-duration:0.2s}
.top5_area .bg_chart{position:absolute;top:20px;bottom:0;left:0;right:0;z-index:-1;overflow:hidden}
.top5_area dl{width:100%;height:100%;padding:14px 0 0 22px;box-sizing:border-box}
.top5_area dt{font-size:12px;color:#444}
.top5_area dt span{color:#a4a4a4}
.top5_area .price{margin:7px 0;font-size:22px;font-weight:bold}
.top5_area .price span{font-size:14px}
.top5_area .btn{padding:10px 12px;font-size:12px;background-color:#178BCD}
.top5_area dl.up .price, .top5_area dl.jump .price{color:#f75467}
.top5_area dl.up .btn, .top5_area dl.jump .btn{background-color:#f75467}
.top5_area dl.down .price, .top5_area dl.drop .price{color:#666}
.top5_area .highcharts-yaxis-grid{display:none}
.btn,.btn-new{display:inline-block;text-align:center;color:#fff;border-radius:4px;box-sizing:border-box;cursor:pointer;vertical-align:middle;white-space:nowrap;background:#f55148}
.btn-default{ background: #fff; border: 1px solid #ddd; color: #333; padding: 0 5px; }
.btn:focus{
    outline: 0;
}
.btn-new{ padding: 0 5px; }
.menradio a:hover{color:#fff; background: #4386f9;}
.top5_area .yellow{ background: #ee6123 }
.top5_area .green{ background: #2EB704; }
.top5_area li.l2{background: url(../images/w_09.png) no-repeat 210px 40px #fff;}
.top5_area li.l3{background: url(../images/w_10.png) no-repeat 210px 40px #fff;}
.top5_area li.l4{background: url(../images/w_20.png) no-repeat 210px 40px #fff; margin-right: 0px;}
.price_head{ position: relative; border-bottom: 1px solid #ddd; margin-bottom: 10px; padding-bottom: 15px; overflow: hidden;}
.price_head h2{margin-bottom:0; float:left;padding-top:6px;color:#333;border-bottom:0;font-size:20px;height:20px;line-height:20px;font-weight: 700; }
.price_head h2 span{  margin-left:15px;color:#FF3300; font-weight: normal; font-size: 14px; }
.resultBtn{ float: left; padding: 0px 10px; }
.resultBtn p{  height: 30px; margin-top: 5px; }
.resultBtn a{ width: 70px; display: block; text-align: center; float: left; height: 25px; line-height: 25px; background: #E0E0E0; margin-left:5px;border-radius: 5px; }
.resultBtn a.aCur{ background: #ee6123; color: #fff; }
.table_st1 tbody tr:hover,.table_st5 tbody tr:hover{background:#f2f7ff}
.table_st1 .no_list{display:none}
.table_st1 th, .table_st1 td,.table_st5 th, .table_st5 td{text-align:center}
.table_st1 thead tr th,.table_st5 thead tr th{ font-weight: bold; font-size: 14px; color: #333; background: #ededed; }
.table_st5 thead tr th.bgBlack{ background: #3c3c3c; color: #fff; }
.table_st1 th:first-child, .table_st1 td:first-child,.table_st5 th:first-child, .table_st5 td:first-child{ text-align: center; }
.table_st1 th,.table_st5 th{font-weight:300}
.table_st2 th{  font-weight: bold; color: #999; }
.table_st2 td{ padding: 10px; }
.table_st1 tbody th,.table_st1 tbody td,.table_st1 tfoot th,.table_st1 tfoot td,.table_st5 tbody th,.table_st5 tbody td,.table_st5 tfoot th,.table_st5 tfoot td{padding:14px 15px 11px;line-height:15px;vertical-align:middle; font-size: 14px;}
.table_st1,.table_st2,.table_st5{width:100%;}
.table_st1 th, .table_st1 td,.table_st2 th, .table_st2 td,.table_st5 th, .table_st5 td{border-bottom: 1px solid #2f3136;font-weight:500;color: #fff;text-align:center;vertical-align:middle; font-size: 14px; }
.table_st5 tbody#resu td,.table_st1 tbody#bet_list td{height: 28px;}
.table_st1 thead th,.table_st2 thead th,.table_st5 thead th{padding:10px 15px;}
.table_st1 tbody th,.table_st2 tbody th,.table_st5 tbody th{color:#444}
.table_st1 tbody th,.table_st1 tbody td,.table_st1 tfoot th,.table_st1 tfoot td,.table_st5 tbody th,.table_st5 tbody td,.table_st5 tfoot th,.table_st5 tfoot td{padding:8px 15px;line-height:15px;vertical-align:middle;}
.table_st2 th, .table_st2 td{ text-align: left; }
/* .table_st5 tbody#resu td{ padding:15px; } */
.table_st1 .no_list{text-align:center !important;padding:50px 0;color:#777}
.footer{ background: #2c333e; color: #d9d9d9; position: relative; width: 100%; margin-top: 40px;  }
.footer .footL {width: 200px;height: 100%;margin-top: 45px;overflow: hidden;font-size: 12px;line-height: 18px; float: left;font-size: 14px; padding-bottom: 20px;}
.footer .footL .foot-logo{ display: block; }
.footer .footL .foot-content{margin-top:25px;}
.links-title{ font-size: 18px; }
.links{ margin-top: 45px; }
.links li{float: left;padding: 0 2px;margin-bottom: 5px;margin-right: 15px;}
.footR p{ color: #fff; font-size: 18px; line-height: 25px; }
.mt{ margin-top: 30px; }
.footer .footL:last-child{ maring-right:0px; }
.num{ font-size: 22px; color: #ee6123; font-weight: bold; line-height: 25px; }
.footer_info{padding: 19px 0;border-top: 1px solid #3a4047;font-size: 12px; text-align: center; }
.real_price_area{  margin-bottom: 20px; position: relative;}
.tabTitle{color:#666; font-size: 14px;position: absolute; right: 0px; margin-top:13px; }
.tabTitle li{ float: left;  margin-left:20px; cursor: pointer; line-height: 25px; height: 25px;}
.hide{ display: none; }
.tabTitle li.tabCur{ color: #FF8435; border-bottom: 2px solid #FF8435; font-weight: bold;}
.numSty{ width: 25px; height: 25px; line-height: 25px; border-radius: 50%; background:#FF0000; color: #fff; display: inline-block; text-align: center; margin-right: 5px;  }
.b{ background: #00AEEF; }
.g{ background: #60BF10; }
.p{ background: #9D099D; }
.f{ background: #D00596; }
.title{line-height:41px;color:#fff;font-size:16px;border-bottom:1px solid #2e2e2e;font-weight:bold;padding:0;margin-top: 0px; position: relative;}
.listConL li{ line-height: 30px; font-size: 14px; padding:10px;border-bottom:1px dashed #565656;color: #999;}
.listConL li span{ float: right; font-size: 14px; color: #666; margin-left: 20px }
.listConL li span.gc{ color: #c8c3c3; width: 50px; text-align: right; }
.detail{ padding:20px;color: #fff;border-radius: 10px;margin: 10px;}
.detail h2{  padding-bottom: 10px;font-size: 18px;}
.detail p{ line-height: 25px;  }
.detail h3,.detail h4,.detail h5{ margin-bottom: 10px;  }

.login_box{width:290px; margin-right:130px; margin-top:70px;padding:0px 50px; background:#fff;float: right; border-radius: 10px;}
.login_box h2{font-size:24px;font-weight:700; padding-top: 30px}
.login_box .txt_impt{position:relative;color:#777; line-height: 20px;}
.login_box .txt_impt em{position:absolute;left:0;top:0;display:block;width:14px;height:14px;background-position:-231px -408px}
.login_box .user_recaptcha{margin-top:10px;padding:0 10%;height:auto;}
.login_box .user_icon{width:18px;height:18px}
.login_box input{padding-left:30px}
.login_box .user_id .coin_add{margin-top:30px}
.login_box .user_pw .coin_add{margin-top:15px}
.login_box .coin_add a{margin-left:5px}
.login_box .user_id .natCd{margin-top:15px}
.login_box .user_pw .user_icon{background-position:-13px -14px}
.login_box .user_pw .inline_block{vertical-align:bottom}
.login_box .user_pw .width_290{width:290px}
.login_box .user_id .user_icon.icon-phone{width:12px;height:14px;background-position:0 -14px;}
.login_box .user_id .user_icon.icon-email{width:17px;height:12px;background-position:0 0;}
.login_box .safe_link{margin:10px 0;padding:5px 10px;border-radius:10px;background-color:#f3f3f3;font-size:13px}
.coin_add{position:relative}
.coin_add input{padding-right:60px;text-overflow:ellipsis}
.coin_add a{text-align:center !important;position:absolute;top:50%;display:block;margin-top:-11px;padding:5px}
.coin_add a i{display:inline-block;width:12px;height:12px}
.coin_add a.btn_copy{right:32px;background-position:0 0}
.coin_add a.btn_qr{right:7px;background-position:0 0}
.coin_add a.btn_qr:hover + .lay_qr{display:block}
.coin_add a.btn_alone{right:7px}
.inp_box_b input,.inp_box_coin input{ border:1px solid #d1d5d7; outline:none;box-sizing:border-box;background:transparent;height:36px;line-height:36px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px; vertical-align: middle;}
.inp_box_coin{position:relative;border:1px solid #313236;box-sizing:border-box;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px;color: #fff;background-color: #1a1b20;}
.inp_box_coin input{border:0;background-color:transparent;padding-right:5px;height:34px;line-height:34px}
.inp_box_coin label{width:30px;padding-right:10px;color:#a4a4a4;font-size:11px}
.inp_num_box{position:relative;border:1px solid #d1d5d7;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px;padding-right:28px}
.inp_num_box,.inp_num_box > *{box-sizing:border-box}
.inp_num_box input{border:0;width:100%;padding:0 10px;background-color:transparent;height:34px;line-height:34px}
.inp_num_box .btn_box{position:absolute;right:0;top:0;bottom:0;width:28px;border-left:1px solid #d1d5d7}
.inp_num_box .btn_box a{display:block;text-align:center !important;height:17px;line-height:11px;overflow:hidden}
.inp_num_box .btn_box a:first-child{border-bottom:1px solid #d1d5d7;height:18px;line-height:18px;box-sizing:border-box}
.inp_num_box .btn_box a:hover i{border-color:#333}
.inp_num_box:hover,.inp_num_box:hover .btn_box,.inp_num_box:hover .btn_box a{border-color:#ff8435!important}
.btn_org_b{border-color:#ff8435;background-color:#ff8435}
.width_full{width:100% !important}
.btn_gray_b, .btn_red_b, .btn_org_b, .btn_black_b, .btn_blue_b{font-size:14px;min-width:80px;padding:0 20px;color:#fff;height:36px;line-height:33px;margin-left:3px}
.inp_box_s input,.inp_box_b input,.inp_box_coin input{width:100%;padding:0 10px;vertical-align:middle}
.choice_btn{margin-bottom:40px}
.choice_btn a{font-size:14px;color:#ABABAB;white-space:nowrap;text-decoration:none}
.choice_btn a:hover{border-bottom:1px solid #ABABAB}
.choice_btn a:hover:after{width:100%;left:0;color:#ABABAB}
.btn_wrap{margin:20px auto;text-align:center}
.tips{ margin-top:10px; color:#ff8435;}
.btn_gray_b{ border-color:#808080;background-color:#808080;}
.myAssets{position:relative; color:#333;background-color:#f9f9f9;padding:0 20px;margin:7px 0px;text-align:center;height:36px;line-height:38px;border-radius:18px;overflow:hidden}
select[name="v1"],select[name="buy_goods"],select[name="search_month"],select[name="search_day"],select[name="search_month_E"],select[name="search_day_E"]{ /*color: #a4a4a4;*/ }
.sel_box_b{height:36px;border:1px solid #d1d5d7;font-size:14px;line-height:36px;width:100%;padding:0px 6px;cursor:pointer;color:#444;background:#fff;border-radius:5px; /*将默认的select选择框样式清除*/appearance:none;-moz-appearance:none;
-webkit-appearance:none; }


/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { display: none; }
.sel_box,.sel_box_i{ position: relative; width: 120px; float: left; margin-left: 10px;}
.sel_box_text{ float: left; margin-left: 10px; line-height: 38px;font-size: 16px; font-weight: bold; }
.sel_box:after{content:'';position:absolute;top:44%;right:11px;z-index:2;display:inline-block;border:5px solid #777;border-left:3px solid transparent;border-right:3px solid transparent;border-bottom:0}
.fl_line{ float: left; line-height: 36px; width: 30px; text-align: center; }
.fl_btn input[type="button"],.testTips input[type="button"]{ line-height: 34px; width: 50px; margin-left: 10px; }
.testTips input[type="button"]{ width: 120px;}
.sub_p{ line-height: 30px; margin: 10px 0px; padding: 10px; }
.sub_p span{ color: #FF0000; }
.myAssetsNew{position:relative; color:#fff;padding:10px 13px;margin:7px 0px;border-radius:18px; line-height: 25px; overflow: hidden; font-size: 13px}
.inp_box_coin { height: 34px; line-height: 34px; width: 150px; }
.srcollW{ max-width: 210px; overflow: hidden;  color: #ee6123; margin-top:16px;}
.yelBtn{ padding: 5px 10px; }
.yelBtnM{ padding: 15px 30px; font-size: 32px }
.yel{ background: #ee6123; }
.cancel{ background: #808080; }
.change{ background: #C4C4C4; padding:10px; margin-left: 20px; }
.numbtn{ border: 1px solid #ddd; border-radius: 3px; padding: 3px 5px; background: #fff; color: #666; cursor: pointer; }

.gbutton li{ float: left; margin-right: 3px; padding: 5px 0px;}
.gtext{ margin:0px 0px; overflow: hidden;line-height: 50px; }
.gTitle{ display: block; position: relative; border: 1px solid #ddd;  color: #333; font-size: 15px; font-weight:bold;min-height:50px;*+height:100%;_height:50px;}
.gTitle span{ background: #f9f9f9; border-bottom: 1px solid #ddd; display: block; padding:8px; }
.ste{ padding: 0px 10px; }
.gl{ display: flex;}
.gl ul,.spanLi{ float: left; }
.gl li{ padding: 10px 0px; display: inline-block; margin-right:10px; }
.gl li span,.spanLi span{ background: #FFFFE1; font-weight: normal; width: 110px; font-size: 14px; text-align: center; display: inline-block; height: 34px; line-height: 34px; padding: 0px 5px; color: #333; border-radius: 3px; border-top-right-radius:0px; border-bottom-right-radius: 0px;  }
.gl li span.pointer{  cursor: pointer; background: #808080; color: #fff; }
.spanLi span{ border-bottom: none }

.gl li span.pCur{background: #4386f9; color: #fff;}
.gl li.ws span{ width: 60px; }
.gl li.ws{ margin-right: 0px; margin-left: 10px; }
.gl li.ws input.inp_box_coin{ width: 130px; }
.gl li.glBtn{ padding: 0; border: 1px solid #ddd; border-radius: 3px; overflow: hidden;height: 34px; margin-top: 10px;border-top-right-radius:0px; border-bottom-right-radius: 0px; }
.inp,em.racedtspan{ border:none; background: #f9f9f9; border-top-left-radius: 0px; border-bottom-left-radius:0px; padding-left: 10px;  }
em.racedtspan{ width: 150px; line-height: 34px; height: 34px; font-style: normal;display:inline-block; border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.gl li.ws em.racedtspan{ width: 70px; }
em.bold{ font-weight: bold }
.gbor{ border-bottom:1px solid #ddd; overflow: hidden; padding-bottom: 10px; }
input[name="remain_time"]{ color: #ff0000;  font-size: 15px }
.redt{ color: #ff0000;font-size: 15px }
.bluet{ color: #4386F9;font-size: 15px }
.btn_red_bo{height:36px;border-color:#ee6123;margin-top:10px;border-radius:4px;color:#fff; font-weight: bold; line-height:36px;background-color:#ee6123; display: block; text-align: center; width: 200px;float: left; }
.inline{ display: inline-block; float: left; line-height: 36px; font-size: 14px; }
.menuCon{ padding: 0px 0px; margin-bottom:5px; overflow: hidden; border-bottom:1px solid #ddd; }
.menur{ position: relative; }
.menradio{ float: right; margin-right:260px;line-height: 36px; margin-top: 8px; }
.menul{ float: left;margin-top: 0px;  }
.tipInfo{ margin-top:10px; color: #ff0000; }
.srcollW span,.srcollW marquee{ display: inline-block; float: left; }
.pageLi{  position: relative; padding:20px 0px; margin-top: 30px;}
.pageLi li{ line-height: 30px; height: 30px; font-size: 14px; display: flex  }
.pageLi li span{ margin-left: 50px; }
.pageLi li a{ color: #848684; }
.pageLi li.b_ar{}
.pageLi li span a{ color: #8bc534; }
.pageLi li a.firstA{ width: 100px; }
.pageLi li a{ display: inline-block; }
.catalog{ position: absolute; right: 0px; margin-top: 10px;}
.btn-lg{ padding: 15px 20px;}
.btn-sm{ padding: 8px 10px;}
.tipsinfo{ color: #ff0000; margin-left: 30px; }
.sel_date{ float: right;  margin-bottom: 10px; }
.layui-layer-demo .layui-layer-title {
    background-color:#2F3F52;
    color: #fff;
}
.table_st1 thead tr th.yBack,.table_st1  tr td.yBack{ background: #FFFFE1 }
.memb { padding-bottom: 5px; }
.memb input{ margin-left: 10px; }
.memb span.game_type{ height: 30px; line-height: 32px; color: #333; border: 1px solid #e8e8e8; background: #f3f3f3; display:inline-block; padding: 0px 10px;margin-left: 10px; font-weight: bold; cursor: pointer; }
.memb span.active{background: #4386f9; color: #fff;}
.table_st2 thead th.thSty{ text-align: center; color: #FD8436; font-weight: bold; }
.tdLabel{ width: 100%; display: inline-block;cursor: pointer; }
.radioLabel{width: 120px; float: left;}
.depTips{color: #FD8436; margin-left: 20px; ;line-height: 30px;}
ivu-switch-large{width:56px;}
.ivu-switch{ display:inline-block;height:18px; line-height: 18px; border-radius: 18px; vertical-align: middle; background-color:#ccc; position:relative;cursor:pointer;user-select:none;transition:all .2s ease-in-out;
}
.ivu-switch-inner{ color: #fff; font-size: 12px; position: absolute; left: 23px;}
.ivu-switch-large.ivu-switch-checked:after{ left:38px; }
.ivu-switch:after{content:""; width: 18px; height: 18px;border-radius:18px;background-color:#fff;position:absolute; top: 0px;cursor:pointer;transition:left .2s ease-in-out,width .2s ease-in-out;}
.ivu-switch-checked .ivu-switch-inner{ left: 7px;  }
.ivu-switch-large{ width: 56px;  }
.ivu-switch-checked{border-color:#FF8435;background-color:#FF8435;}
.header_wrap .q_menu li span.ivu-switch-inner span{ margin: 0; color: #fff; }
.g_tb_normal{width:100%;border-right:1px solid #eee;border-bottom:1px solid #eee}
.g_tb_normal th,
.g_tb_normal td{height:17px;padding:10px 0;border-top:1px solid #eee;border-left:1px solid #eee;font-size:13px;font-weight:300;vertical-align:middle;line-height:19px}
.g_tb_normal th:nth-of-type(1),
.g_tb_normal td:nth-of-type(1){padding-left:12px}
.g_tb_normal thead td,
.g_tb_normal th{background-color:#fbfbfb;color:#a4a4a4;text-align:left}
.g_tb_normal th.tx_l,
.g_tb_normal td.tx_l{padding-left:12px;padding-right:0}
.g_tb_normal th.tx_r,
.g_tb_normal td.tx_r{padding-left:0;padding-right:12px}
.g_tb_normal thead td.tx_c,
.g_tb_normal th.tx_c,
.g_tb_normal td.tx_c{padding-left:0;padding-right:0}
.g_tb_normal td{color:#444}
.g_tb_normal .tx_sub{color:#a4a4a4;font-size:11px}
.g_tb_info{padding-top:10px;font-size:12px;color:#a4a4a4}
.w420{ width: 420px; }
.inline_block{display:inline-block !important;vertical-align:middle}
h2.title{border-bottom:1px solid #eee;font-size:20px;height:20px;line-height:20px;margin-bottom:20px; font-weight:bold;display:block;padding:10px 0;font-weight:500;letter-spacing:-1px;color:#333}
.inp_align{padding-top:5px}
.color_org,.color_org *{color:#ff8435 !important}
h2.icon-h2{ position: relative; font-size: 32px; color: #5f5f5f; text-align: center;margin-bottom:50px;font-weight: bold}
.five-virtual-currency h3 {align-items: center;display: flex;font-size: 22px;color: #0b3886;text-align: center;position: relative;margin-bottom: 50px;position: relative;z-index: 10; font-weight: bold;  }
.five-virtual-currency h3:before,
.five-virtual-currency h3:after {content: '';display: block;flex-grow: 1;height: 2px;background: #0b3886;;}
.five-virtual-currency h3:before {margin-right: 16px;}
.five-virtual-currency h3:after {margin-left: 16px;}
.virtual-currency-list{margin-bottom:40px; text-align: center;}
.five-virtual-currency li{width: 125px;height: 125px;margin-left: 30px; display: inline-block;}
.five-virtual-currency li:first-child{margin-left: 0;}
.text-01 {line-height: 1.6;text-align: center;}
.bg-01 {background: #f9f8f5;padding: 50px 0;margin-top: 50px;}
.section-01 {margin-bottom: 50px;}
.text-02 {line-height: 1.6;text-align: center;}
.section-01 .text-01{ color: #215BA6; font-size: 48px; font-weight: bold}
.section-01 .text-01 span{ font-size:72px;}
.lp-top-contents-c{ width: 100%;height: 613px;}
.top-section{ padding-top: 50px;}
.top-inner {width: 1200px;height: 613px;margin: 0 auto;position: relative; }
.lp-top-contents-c .bt-top-open-account {position: absolute;bottom: 34px;left: 120px;}
.section-02{ margin-top: 50px;}
.slider-box{width: 840px;height: 600px;margin: 40px auto 0;display: flex;align-items: center; padding: 20px 50px;}
.invalid-feedback{  color:#f60;}
.pageStyle{margin: 0px auto;white-space: nowrap; float: left; position: relative; left: 50%;}
.pageStyle ul.pagination{ margin: 20px 0px;white-space:nowrap;border-radius:4px; position: relative; left: -50%}
.pageStyle ul.pagination li{ display: inline;}
.pagination>li>a, .pagination>li>span{position: relative; float: left; padding: 10px 15px; text-decoration: none; background: #fff; color: #FF8435; border: 1px solid #ddd;margin-left:-1px;}
.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus{z-index: 2;color: #fff;background-color: #007bff;border-color: #007bff;cursor: default;}
.pagination>li:first-child>a,.pagination>li:first-child>span{margin-left:0;border-bottom-left-radius:4px;border-top-left-radius:4px}
.pagination>li:last-child>a,.pagination>li:last-child>span{border-bottom-right-radius:4px;border-top-right-radius:4px}
.pagination>li>a:hover,.pagination>li>span:hover,.pagination>li>a:focus,.pagination>li>span:focus{color:#23527c;background-color:#eee;border-color:#ddd}
.pagination>.disabled>span,.pagination>.disabled>span:hover,.pagination>.disabled>span:focus,.pagination>.disabled>a,.pagination>.disabled>a:hover,.pagination>.disabled>a:focus{color:#777;background-color:#fff;border-color:#ddd;cursor:not-allowed}
.mTitle{max-width: 100%;white-space: nowrap;word-break: break-all;overflow: hidden;text-overflow: ellipsis; width: 110px;}
.table_st3 thead tr th,.table_st3 tbody tr td,.table_st3 thead tr th:first-child,.table_st3 tbody tr td:first-child{ text-align: left;}
a.looked{ color: #767676;}
.dl{ border-bottom: 1px solid #ddd; padding-bottom: 10px;}
.dl li{ list-style: none; color: #616360; padding: 5px 0px;}
.dl li strong{ color: #333; font-weight: bold; margin-right: 10px;}
.dlCon{ padding: 20px 0px; }
.dlCon p{ line-height: 25px;}
.w120{ width: 120px;}
.floating-box {display: none;width: 100%;background-color: rgba(0, 0, 0, 0.8);position: fixed;bottom: 0;z-index: 99; text-align: center; padding: 15px 0px; overflow: hidden;}
.float{ display: block}
.floating-box a img:first-child{ margin-right: 15px;}
.del_pop_b{ border-radius: 5px; margin-right: 10px; font-size: 14px; padding: 8px 10px; cursor: pointer; position: relative; background: #ececec; border: 1px solid #ddd;}
.del_pop_b span{ display: block; position: absolute;border-radius: 50%; text-align: center; padding: 0px; width: 15px; height: 15px; line-height: 15px; margin-right:-10px; top: -5px;right:5px; font-size: 10px; background: #a5a5a5; color: #fff;}
.guL{ float: left; width: 600px; margin-top: 5px;margin-bottom: 10px;}
.guR{ float: right; width: 520px; padding-left: 10px; padding-top: 5px;}
.inp_box_coin_2{ margin-right: 5px;}
.tempdiv{ background: rgba(0, 0, 0, 0.7); position:absolute; color: #fff; border-radius: 5px; padding: 10px; border: 1px solid #686868; z-index: 100;}
.preview{ margin-top: 10px;margin-bottom: 10px;}
.list_preview a{ margin-bottom: 5px;}
.testTips{float: left;}
.bm{ margin-left: 10px;}
.mb{ margin-bottom: 10px; overflow: hidden;}
.sel_box_r{ float: right; width: 430px; }
.guL .table_st5 thead tr th,.guL .table_st5 tbody tr td{ font-size: 12px; padding:5px 2px; }
.videoCon{ width: 684px; padding: 5px; margin: 0px auto; }
.videoCon h2{ border-bottom: 1px solid #ddd; padding: 10px 5px; margin: 8px 0px; font-weight: bold; font-size: 16px; }
.inp_box{ float: left;}
.tabInfo{ text-align: center; color: #666; margin:20px auto; }
.lineButton{ text-align: center; padding: 10px 0px; }
.lineButton li,.gurbut li{ display: inline-block; cursor: pointer; padding: 5px 10px; border:1px solid #ddd; border-radius: 4px; margin-right: 5px;}
.lineButton li.curButton,.gurbut li.curGur{ background: #FF8435; color: #fff; border:1px solid #FF8435; }
.gurbut li{ margin-bottom: 8px; width: 70px; text-align: center; padding: 5px 0px; }
.tipbutton{ position: absolute; display: none;  }
table#beadang tbody tr:nth-child(even){background:#f2f7ff}
table#beadang tbody tr td.tdBack{ background: #3c3c3c; font-weight: bold;color: #fff }
table#beadang tbody tr td.tdNumber{ background:#3c3c3c;font-weight: bold;color: #fff  }
table#beadang tr td,table#beadang thead tr th{border: 1px solid #eee; /* padding: 0; line-height: 25px; height: 25px;  */ font-weight: 600; font-size: 13px}
table#beadang tr td:first-child,table#beadang thead tr th:first-child{ width: 10% }
table#beadang tbody tr td{ white-space: nowrap;}
table#beadang thead tr th{ padding: 12px 0; }
.route{ position: absolute; margin-left: 390px; margin-top: -3px; }
.route a.btn{ padding: 4px 5px;line-height: 20px;font-size:  13px;font-weight:  normal; margin-left: 5px; display: inline-block; float: left; margin-top: 8px; }
.route a.cancel{ background: #C1C1C1 }
.route_btn_new a.primary{ background: #fff; border: 1px solid #ddd; color: #333; border-radius: 4px; }
.routeR{ right:0px;}
.route_btn_new a.btn{ width: 20%; }
.sel_r{ float: right; width: 60px; }
.route .sel_box_b{ line-height: 30px; height: 30px; margin-top: 3px; }
.staticSeeMore{display: inline-block;vertical-align: top;cursor: pointer;text-transform: uppercase;height: 42px;line-height: 40px;border: 1px solid #ddd;-webkit-border-radius: 4px;border-radius: 4px;width: 200px;color: #666;font-size: 18px;font-weight: 500;text-align: center;padding: 0;margin-top: 30px; background: #fff; outline: none;}
.seeMore{ text-align: center; }
.mask{
	width: 100%;
	height: 100%;
	background-color: rgba(242,242,242, 0.5);
	position: fixed;
	left: 0;
	top: 0;
	text-align: center;
	display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
  	align-items: center;
    -webkit-justify-content: center;
  	justify-content: center;
}
.mask>div{
	border: 1px solid #D0D0D0;
	font-size: 13px;
	padding: 10px 15px;
	max-width: 150px;
	color: #494A5F;
	background: url(../images/loading.gif) no-repeat 5px 8px;
	padding-left: 25px;
	background-color: #FFFFFF;
	word-wrap: break-word;
	margin: 0 auto;
}

.scroll-off{
	position:fixed;
	overflow-y:hidden
}
.shareTit{ height: 52px;}
.shareTit li{ display: inline-block; width: 110px; text-align: center; position: absolute; font-size: 14px; border: 1px solid #E5E5E5; margin-left: 10px; border-bottom: none; margin-top: 10px; cursor: pointer; background: #FAFAFA; font-weight: normal;}
.shareTit li.shareCur{ background: #fff; color: #FF8435; margin-top: 11px;}
.shareTit li.s1{ margin-left: 130px; }
.shareTit li.s2{ margin-left: 250px; }
.shareTit li.s3{ margin-left: 370px; }
.shareCon{ min-height:520px; height:auto!important; height:520px;}
.shareP p{ line-height: 25px; color: #A0A1A3 }
.shareP h2{ font-weight: bold; padding-bottom: 10px; padding-top: 10px; }
.otp{ width: 400px; margin: 70px auto; float: none; border:1px solid #ddd; border-radius: 5px; padding: 70px;}
.card_body{  background:none;margin-top: 20px; border-radius: 10px; overflow: hidden; padding:5px 10px; margin-bottom: 0.5rem; }
.sel_tit{display: inline-block; float: left; margin-top: 2px;}
.browser{ padding:50px; background: url(../images/warning.png) no-repeat 0px 30px; padding-left: 200px; height: 500px; width: 780px; margin: 200px auto; margin-bottom: 0px;}
.browser h2{ font-size: 24px;  }
.browser p{ color: #ff8435; font-size: 18px; padding:10px 0px;  }
.browser li{ display: inline-block; float: left; }
.browser li a{ display: block; margin-right: 30px; text-align: center; }
.top-inner-left{ width: 540px; float: left;margin-top: 70px; }
.top-inner-left h2{ color: #666; font-size: 30px; font-weight: 400; line-height: 45px; }
.top-inner-left h2 span{ color: #ff8435; }
.top-inner-left h2 em{ font-style: normal; color: #2266b6; }
.top-list{ background: #fff; opacity: 0.8; width: 430px; border-radius: 5px; margin: 20px auto; padding: 20px 0; }
.top-list-title{ text-align: center; color: #37659b; font-size: 18px; font-weight: bold; padding:10px 0;}
.top-list-con{ color: #28486e;padding-left: 30px; }
.top-list-con li{ line-height: 30px; }
.tab-wrap-flex{ display: flex;  }
.tableft{ position: relative; flex: 1; margin-top: 5px;}
#beadang td.td_Allo_Low_2 {
            color: #fff;

            word-spacing: -1px;
            background-color: #024382;
        }
#beadang td.td_Allo_Low_2 font{ color: #fff; }
.betModal{ margin-left: 10px; height: 30px; line-height: 30px; margin-top: -6px; background: #ee6123; color: #fff; }
.sel-half{ width: 60px; }
.spanR{ position: absolute; right: 10px; display: flex; }
.tabCon{ position: relative;overflow: hidden; }
.tabTips{ position: absolute; width: 100%;height: 200px; display: flex; align-items: center;text-align: center; background: rgba(0, 0, 0, 0.7); color: #fff; justify-content: center; font-size: 18px}
.loading_layer{position: absolute; width: 100%;height: 425px; display: flex; align-items: center; justify-content: center;background: rgba(0, 0, 0, 0.3);}
.btn_a{ background: none; color: #4386F9; text-decoration: underline; border: none; font-size: 14px; }
.ios{ -webkit-appearance: button; }
.footer-flex{margin-top: 10px; }
.footer-flex a{ float: left;display: inline-block; margin: 20px 0;margin-right: 10px;}
.linkcontainer{ display: flex;align-items: center; }
.linklogo,.linkInfo{ float: left; }
.linklogo img{ width: 64px; height: 64px;margin: 0 10px;}
.linkInfo h2{font-size: 18px; font-weight: bold;margin-bottom: 5px;  }
.linkInfo p{word-break:break-all; width:215px; }
.com_btn{ background: #FF8435; padding: 5px 15px; margin-left: 10px; }
.min-height{min-height:600px; height:auto!important; height:600px;}
#mask{display:none;width:100%; height:100%; position:fixed; top:0; left:0; z-index:1999;background:#000; opacity:0.5;}
#maskTop,#maskTop1{width: 550px; height: 530px;  background: #fff; color: #333; position: fixed; top: 50%; left: 50%; margin-left: 100px; margin-top: -265px; z-index: 2999; box-shadow: 2px 2px 5px #909090;}
#maskTop1{margin-left: -575px; }
.popupCon-new{background: url('/images/pop_bg.png') no-repeat center center; height: 530px;}
.pop_close{ width: 30px; height: 30px;background: url('/images/icon.png') no-repeat; background-position: -149px -31px;position: absolute;  right: -15px; top: -5px;}
.pop_close:hover{background-position: -180px -31px;}
.maskNotice{display:none;width: 400px; height: 380px;  background: #fff; color: #333; position: fixed; top: 50%; left: 50%; margin-left: -200px; margin-top: -190px; z-index: 2999; box-shadow: 2px 2px 5px #909090;}
.maskNotice h2{ color: #f00; text-align: center; font-size: 32px; padding: 15px 0; }
.maskConNot{ text-align: center; font-size: 15px; color: red; font-weight: bold; background: url('/images/warn-icon.png') center top no-repeat; padding-top: 155px;}
.close_b{ position: absolute; bottom: 10px; right: 10px; background: rgba(0, 0, 0, 0.4); color: #fff;  padding: 3px 5px;}
/*login*/
.morph-button-modal::before{
	position: fixed;
    top: 0;
    left: 0;
    z-index: 10000001;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.3);
    content: '';
}
.morph-content {
    margin: -250px 0 0 -250px;
    width: 500px;
    height: 500px;
    position: fixed;
    z-index: 10000002;
    left: 50%;
    top: 50%;

}
.content-style-form {
    position: relative;
    text-align: left;
}
.content-style-form h2 {
    margin: 0;
    padding-top:20px;
    text-align: center;
    color: #ee6123;
}
.content-style-form form {
    padding: 10px 30px;
}
.content-style-form form p {
    margin: 0 0 5px;
    font-size: .7em;
}
.content-style-form label {
    display: block;
    padding: 10px 0 0;
    margin-bottom: 10px;
    color: #ebd3bd;
    font-size: 18px;

}
.content-style-form input[type=text], .content-style-form input[type=password] {
    width: 436px;
    border: 1px solid #ebd3bd;
    background: 0 0;
    color: #b09a86;
    font-weight: 300;
    font-size: 2em;
    height: 50px;
    line-height: 50px;
}
.content-style-form button {
    display: block;
    margin-top: 20px;
    width: 100%;
    border: 0;
    background: #ee6123;
    color: #f9f6e5;
    letter-spacing: 1px;
    font-size: 18px;
    outline: none;
    height: 54px;
    line-height: 54px;
    cursor:pointer;
}
.content-style-form button.joinBtn{ background: transparent;border: 1px solid #ee6123; color: #ee6123; }
.tips1{ position: absolute; bottom: 10px; text-align: center; color: #f00; width: 100%}
.totalPoint{ border-bottom: 1px solid #f2f2f2; padding-bottom: 5px;margin-bottom: 10px; }
.jconfirm .jconfirm-box .jconfirm-buttons button.btntype{
	padding: 10px 25px;
    background: #ecf0f1;
    color: #000
}
.scroller{ right: auto; }
.scroller li{padding: 0 10px;font-size: 20px;}
.wrapper02 {position:relative;height: 40px;width: 100%;overflow: hidden;margin:0 auto;}
.video_bottom{background: #f3f3f3; color: #2F3F52; height: 28px; line-height: 28px; position: relative;padding-left: 100px;margin-top: -7px;font-size: 14px; }
.notice_titile{ width: 80px; line-height: 28px; height: 28px; background: #2F3F52; color: #fff;left: 0; text-align: center;position: absolute;}
#spacing thead th,#spacing  tbody td{padding:3px 15px;}

#spacing2 thead th,#spacing2  tbody td{padding:5px 15px;}
#spacing3 thead th,#spacing3  tbody td{padding:6px 15px;}

.boardLeft{ width: 300px; float: left;margin-top: 10px; }
.boardRight{ width: 840px; float: right; }
.boardLeft li{margin-bottom: 4px; line-height: 25px;background:linear-gradient(top,#FAFAFA 0%,#e7e9ed 100%);background: -webkit-linear-gradient(top,  #FAFAFA 0%,#e7e9ed 100%);border: 1px solid #d5d5d5;font-size: 16px; }
.boardLeft li.boardActive,.boardLeft li a:hover{background: -webkit-linear-gradient(top,#354e6b 0%,#2f3f52 100%);background:linear-gradient(top,#354e6b 0%,#2f3f52 100%);  color: #fff;}
.boardLeft li a{ padding: 10px 8px;display: block; }
.boardLeft li a i{ margin-right: 5px; font-size: 14px; color: #4a515b;}
.boardLeft li a:hover i{color: #fff;}
.boardLeft li.boardActive a i{ color: #fff; }
.dangerBtn{ background: #d9534f; color: #fff; }
.warningBtn{ background: #ee6123; color: #fff;}
.successBtn{ background: #419641; color: #fff;}
.minigame-box {
    border-radius: 10px;
    overflow: hidden;
    margin: 10px 0;
   
    text-align: center;
}

.headerAdd{
	height: 50px;
	background: #262932;
	color: #fff;
	line-height:50px;
	font-size: 14px;
	display: flex;
	color: #fff;
}
.headerAdd p{
	margin-left: 10px;
}
.headerAdd i{
	margin-right: 5px;
}
.header_wrap .lay_a a{
	color: #333;
	border:none;
	min-width: 100px;
	padding: 0;
	text-align: center;
	text-decoration: none;
	font-size: 16px;
}
 @media (max-width: 750px){
       .card_body{
       	margin-top: 0px;
        position: relative;
       }
    }

.iframeV {
    display: none;
}

.mwui-switch-btn {
    width: 55px;
    display: block;
    padding: 1px;
    background: #4c6;
    overflow: hidden;
    margin-bottom: 5px;
    border-radius: 18px;
    cursor: pointer;
    float: right;
}

.mwui-switch-btn span {
    width: 32px;
    font-size: 14px;
    height: 18px;
    display: block;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f6f6f6, endColorstr=#eeeeee, grandientType=1);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#f6f6f6), to(#eeeeee));
    background: -moz-linear-gradient(top, #f6f6f6, #eeeeee);
    border-radius: 18px;
    float: left;
    color: #4c6;
    text-align: center;
}

.mwui-switch-btn:hover span {
    background: #fff;
}

.mwui-switch-btn span.off {
    float: right;
}

body.bdy {
    background: #03070c;
}

.unlogin input::-webkit-input-placeholder {
    color: #ccc;
    font-size: 14px;
}

.unlogin input:-moz-placeholder {
    color: #ccc;
    font-size: 14px;
}

.unlogin input::-moz-placeholder {
    color: #ccc;
    font-size: 14px;
}

.unlogin input:-ms-input-placeholder {
    color: #ccc;
    font-size: 14px;
}

.loadingLayer {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(21, 21, 21, .9);
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    z-index: 200;
}

.nav-tabs>li>a:hover {
    color: #555;
}

.loadingLayer img {
    width: 40px;
    height: 40px;
}

.odometer {
    position: absolute;
    color: #8bc534;
    right: 0;
}

.odometer-inside {
    font-size: 64px;
    font-weight: bold;
    letter-spacing: 2px;
    background: linear-gradient(#baeb43, #82c528 50%, #539500 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'rocket';
}

.odometer .odometer-value {
    background: linear-gradient(#baeb43, #82c528 50%, #539500 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'rocket';
}

.modal.fade .modal-dialog,
.fade {
    transition: none;
    transform: none
}

.btn-warning {
    background: #686868
}

.btn-warning:hover {
    background: #333;
}

.modal-title {
    font-weight: bold;
    font-size: 18px;
}

.modal-body {
    font-size: 18px;
}

.modal {
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    height: 100%;
    outline: 0
}

.modal-content {
    display: flex;
    flex-direction: column;
    pointer-events: auto;
}

.modal-dialog-centered {
    top: 30%;
    transform: translateY(-50%);
}

.header_wrap {
    background: #fff;
    border-bottom: none;
    height: auto;
}

@media screen and (max-width:1240px) {

    .header_wrap,
    #container {
        width: 1240px;
    }
}

.header_bottom {
    width: 100%;
    height: 99px;
    background: #000f17;
}

.h_nav li>a {
    font-size: 18px;
    text-decoration: none;
}

.h_nav li.on>a,
.h_nav li>a:hover {
    color: #ff0827
}

.h_nav li.on:before {
    background: #ff0827
}

.sp_comm {
    background: url('./images/logo.png?1231') no-repeat;
    margin-top: 12px;
    background-size: 160px 69px;
}

.logo_t a {
    height: 69px;
    width: 189px;
    margin-right: 20px;
}

#instant-alert {
    background: rgba(0, 0, 0, 0.8);
    color: white;
    min-height: 160px;
}

.iframe {
    background: rgba(0, 0, 0, .7);
}

.onoff {
    position: absolute;
    z-index: 20000;
}

.yellow-bg {
    background-color: #d9534f;
}

.p-1 {
    padding: .25rem 0.1rem !important
}

.table-dark {
    color: #fff;
    background-color: rgba(40, 41, 44, 0.7);
    font-size: 14px
}

.table-dark thead th {
    vertical-align: bottom;
    text-align: center
}

.table-dark>tbody>tr>td,
.table-dark>tbody>tr>th,
.table-dark>tfoot>tr>td,
.table-dark>tfoot>tr>th,
.table-dark>thead>tr>td,
.table-dark>thead>tr>th {
    /* padding: .25rem; */
    vertical-align: middle;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1)
}

.table-dark>tbody>tr.border-sold>td {
    border-top: 3px solid #d7d7d7
}

.p-125>tbody>tr>td,
.p-125>tbody>tr>th,
.p-125>tfoot>tr>td,
.p-125>tfoot>tr>th,
.p-125>thead>tr>td,
.p-125>thead>tr>th {
    padding: 3px;
    vertical-align: middle;
}

.coupon-table>tbody>tr>td,
.coupon-table>tbody>tr>th,
.coupon-table>tfoot>tr>td,
.coupon-table>tfoot>tr>th,
.coupon-table>thead>tr>td,
.coupon-table>thead>tr>th {
    padding: 10px 3px;
    vertical-align: middle;
}

.w-120 {
    width: 185px;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
}

.w-65 {
    width: 65px;
    height: 65px;
}

.w-65 p {
    height: 65px;
}

.badge-warning {
    background: #f9b11f
}

#sub-frame-error {
    display: none !important;
}

/* 모달 겹침 방지를 위한 CSS 수정 */

/* LayUI 모달 기본 설정 */
.layui-layer {
    position: fixed !important;
    z-index: 99999 !important;
    pointer-events: auto !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8) !important;
}

/* 모달 배경 (shade) */
.layui-layer-shade {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(5px) !important;
    z-index: 99998 !important;
    pointer-events: auto !important;
}

/* 모달 컨텐츠 영역 */
.layui-layer-content {
    position: relative !important;
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* 로그인 모달 컨텐츠 */
.modal-login-content {
    position: relative !important;
    background: linear-gradient(145deg, #2c2c2c, #1a1a1a) !important;
    padding: 42px !important;
    max-width: 400px !important;
    margin: 0 auto !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
    border: 1px solid #444 !important;
    border-radius: 15px !important;
    overflow: hidden !important;
    z-index: 100000 !important;
}

/* 회원가입 모달용 큰 크기 - 화면을 거의 채우도록 */
.modal-join-content {
    position: relative !important;
    background: linear-gradient(145deg, #2c2c2c, #1a1a1a) !important;
    padding: 25px !important;
    max-width: 95vw !important;
    width: 95vw !important;
    max-height: 90vh !important;
    margin: 0 auto !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8) !important;
    border: 1px solid #444 !important;
    border-radius: 15px !important;
    overflow-y: auto !important;
    z-index: 100000 !important;
}

/* 스크롤바 스타일링 */
.modal-join-content::-webkit-scrollbar {
    width: 8px;
}

.modal-join-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.modal-join-content::-webkit-scrollbar-thumb {
    background: rgba(245, 81, 72, 0.6);
    border-radius: 4px;
}

.modal-join-content::-webkit-scrollbar-thumb:hover {
    background: rgba(245, 81, 72, 0.8);
}

/* 회원가입 2컬럼 레이아웃 - 더 넓은 공간 활용 */
.join-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr !important;
    /* 3컬럼으로 변경 */
    gap: 30px !important;
    margin-top: 20px !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.join-form-full {
    grid-column: 1 / -1;
}

/* 라벨 스타일 */
.form-label {
    display: block;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 8px;
    position: relative;
}

.form-label.required::after {
    content: '*';
    color: #f55148;
    margin-left: 3px;
}

/* 입력 필드 컨테이너 */
.form-field {
    margin-bottom: 20px;
}

.form-field input {
    width: 100% !important;
    padding: 15px 20px !important;
    margin-bottom: 0 !important;
    border: 2px solid #444 !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    transition: all 0.3s ease !important;
    backdrop-filter: blur(10px) !important;
}

.form-field input::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

.form-field input:focus {
    outline: none !important;
    border-color: #f55148 !important;
    background: rgba(245, 81, 72, 0.1) !important;
    box-shadow: 0 0 20px rgba(245, 81, 72, 0.3) !important;
    transform: translateY(-2px) !important;
}

/* 중복확인 버튼 */
.check-btn {
    background: linear-gradient(135deg, #666, #888) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 18px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    min-width: 100px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.check-btn:hover {
    background: linear-gradient(135deg, #f55148, #ff6b5b) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(245, 81, 72, 0.4) !important;
}

.check-btn:active {
    transform: translateY(0) !important;
}

/* 입력 필드와 버튼 조합 */
.input-with-button {
    display: flex !important;
    align-items: stretch !important;
    gap: 12px !important;
}

.input-with-button input {
    flex: 1 !important;
    margin-bottom: 0 !important;
}

/* 추천코드 스타일 */
.referral-code {
    color: #ff6b5b !important;
    font-size: 12px !important;
    margin-top: 8px !important;
    font-style: italic !important;
    opacity: 0.8 !important;
}

/* 회원가입 버튼 영역 스타일 수정 */
.modal-join-content .loginbtn {
    display: flex !important;
    gap: 15px !important;
    margin-top: 25px !important;
    justify-content: center !important;
    padding-top: 20px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    position: sticky !important;
    bottom: 0 !important;
    background: linear-gradient(145deg, #2c2c2c, #1a1a1a) !important;
}

.modal-join-content .loginbtn button {
    flex: 1 !important;
    max-width: 150px !important;
    padding: 15px 25px !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    font-size: 16px !important;
    font-weight: bold !important;
    position: relative !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    overflow: hidden !important;
}

/* 가입 버튼 */
.modal-join-content #joinBtn {
    background: linear-gradient(135deg, #f55148, #ff6b5b) !important;
    color: #fff !important;
    border: 2px solid #f55148 !important;
}

.modal-join-content #joinBtn:hover {
    background: linear-gradient(135deg, #e04537, #f55148) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 15px 30px rgba(245, 81, 72, 0.4) !important;
}

/* 취소 버튼 */
.modal-join-content .closebtn {
    background: linear-gradient(135deg, #666, #888) !important;
    color: #fff !important;
    border: 2px solid #666 !important;
}

.modal-join-content .closebtn:hover {
    background: linear-gradient(135deg, #333, #555) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 15px 30px rgba(102, 102, 102, 0.4) !important;
}

/* 반응형 회원가입 모달 */
@media (max-width: 1200px) {
    .modal-join-content {
        width: 98vw !important;
        max-width: 98vw !important;
        padding: 20px !important;
    }

    .join-form-grid {
        grid-template-columns: 1fr 1fr !important;
        /* 1200px 이하에서는 2컬럼 */
        gap: 20px !important;
    }
}

@media (max-width: 768px) {
    .modal-join-content {
        width: 100vw !important;
        max-width: 100vw !important;
        padding: 15px !important;
        border-radius: 0 !important;
        max-height: 100vh !important;
    }

    .join-form-grid {
        grid-template-columns: 1fr !important;
        /* 모바일에서는 1컬럼 */
        gap: 15px !important;
    }

    .input-with-button {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .check-btn {
        width: 100% !important;
    }
}

/* 모달 상단 빨간 선 애니메이션 */
.modal-login-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #f55148, #ff6b5b, #f55148);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* 로고 */
.modal-login-content h2 {
    text-align: center;
    margin-bottom: 30px;
    color: #fff;
    font-size: 24px;
}

/* 입력 필드 */
.modal-login-content input[type="text"],
.modal-login-content input[type="password"],
.modal-login-content input[type="email"] {
    width: 100%;
    padding: 15px 20px;
    margin-bottom: 15px;
    border: 2px solid #444;
    border-radius: 10px;
    font-size: 16px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.modal-login-content input[type="text"]::placeholder,
.modal-login-content input[type="password"]::placeholder,
.modal-login-content input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.modal-login-content input[type="text"]:focus,
.modal-login-content input[type="password"]:focus,
.modal-login-content input[type="email"]:focus {
    outline: none;
    border-color: #f55148;
    background: rgba(245, 81, 72, 0.1);
    box-shadow: 0 0 20px rgba(245, 81, 72, 0.3);
    transform: translateY(-2px);
}

/* 버튼 영역 */
.modal-login-content .loginbtn {
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

.modal-login-content .loginbtn button {
    flex: 1;
    padding: 15px 20px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    position: relative;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    overflow: hidden;
}

/* 버튼 호버 효과 */
.modal-login-content .loginbtn button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.modal-login-content .loginbtn button:hover::before {
    left: 100%;
}

/* 로그인/회원가입 버튼 */
.modal-login-content #loginBtn,
.modal-login-content #joinBtn {
    background: linear-gradient(135deg, #f55148, #ff6b5b);
    color: #fff;
    border: 2px solid #f55148;
    position: relative;
    z-index: 1;
}

.modal-login-content #loginBtn:hover,
.modal-login-content #joinBtn:hover {
    background: linear-gradient(135deg, #e04537, #f55148);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(245, 81, 72, 0.4);
}

.modal-login-content #loginBtn:active,
.modal-login-content #joinBtn:active {
    transform: translateY(0);
    box-shadow: 0 5px 15px rgba(245, 81, 72, 0.4);
}

/* 취소 버튼 */
.modal-login-content .closebtn {
    background: linear-gradient(135deg, #666, #888);
    color: #fff;
    border: 2px solid #666;
}

.modal-login-content .closebtn:hover {
    background: linear-gradient(135deg, #333, #555);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(102, 102, 102, 0.4);
}

/* 로딩 아이콘 */
.v-loading {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: translateY(-50%) rotate(0deg);
    }

    100% {
        transform: translateY(-50%) rotate(360deg);
    }
}

/* 모달이 열릴 때 body 스크롤 방지 */
body.layui-layer-scroll {
    overflow: hidden !important;
}

/* 다른 요소들이 모달 위로 올라오지 않도록 */
.nav_inner,
.top_inner,
.scroll_inner,
.main-container {
    position: relative;
    z-index: 1;
}

/* 게임 리스트가 모달과 겹치지 않도록 */
.game_list {
    position: relative;
    z-index: 1;
}

.item_game {
    position: relative;
    z-index: 1;
}

/* 모달이 열린 상태에서 다른 요소들 클릭 방지 */
.layui-layer-shade~* {
    pointer-events: none;
}

/* 모달 자체는 클릭 가능하도록 */
.layui-layer {
    pointer-events: auto !important;
}

/* 모달 내부 요소들도 클릭 가능하도록 */
.modal-login-content * {
    pointer-events: auto !important;
}

/* 반응형 모달 크기 조정 */
@media (max-width: 768px) {
    .modal-login-content {
        max-width: 90% !important;
        padding: 30px !important;
        margin: 10px !important;
    }

    .layui-layer {
        width: 90% !important;
        left: 5% !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
}

/* 모달 닫기 버튼 (X) 제거 */
.layui-layer-close,
.layui-layer-close1,
.layui-layer-close2 {
    display: none !important;
}

/* LayUI 아이콘 클래스 숨김 */
.layui-layer-ico {
    display: none !important;
}

/* 모달 애니메이션 효과 */
.layui-anim {
    animation-duration: 0.3s !important;
    animation-fill-mode: both !important;
}

.layui-anim-scale {
    animation-name: layui-scale !important;
}

@keyframes layui-scale {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* 모달이 화면 중앙에 정확히 위치하도록 */
.layui-layer-dialog {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
}

/* 폼 요소들 간격 조정 */
.modal-login-content p {
    margin-bottom: 0 !important;
}

.modal-login-content .form1 p:not(:last-child) {
    margin-bottom: 15px !important;
}

.gTit {
    color: #fff;
    font-weight: bold;
    margin: 0;
    font-size: 16px;
}

/* 로딩 레이어 */
.loadingLayer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    z-index: 10;
}

.loadingLayer.show {
    display: flex !important;
}

.loadingLayer img {
    width: 40px;
    height: 40px;
}

/* 모달 스타일 */
.modal-content {
    background: #1a1a2e;
    border: 1px solid #333;
    border-radius: 15px;
}

.modal-header {
    border-bottom: 1px solid #333;
    background: linear-gradient(135deg, #16213e, #1a1a2e);
    border-radius: 15px 15px 0 0;
}

.modal-title {
    color: #ff6b35;
    font-weight: bold;
    font-size: 1.5rem;
}

.modal-body {
    background: #0a0e17;
    border-radius: 0 0 15px 15px;
    padding: 20px;
}

.btn-close {
    background: none;
    border: none;
    padding: 8px;
}

.btn-close svg {
    fill: #fff;
    transition: fill 0.3s;
}

.btn-close:hover svg {
    fill: #ff6b35;
}

/* 게임 그리드 */
.games {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.game-item {
    background: #16213e;
    border-radius: 10px;
    padding: 15px;
    transition: all 0.3s;
    cursor: pointer;
    border: 2px solid transparent;
    text-align: center;
}

.game-item:hover {
    border-color: #ff6b35;
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(255, 107, 53, 0.3);
}

.game-item img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 10px;
}

.game-title {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    margin-top: 10px;
    line-height: 1.3;
}

/* 로딩 스피너 */
.loading-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-left: 4px solid #ff6b35;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 에러/빈 상태 */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #888;
}

.empty-state i {
    font-size: 48px;
    color: #ff6b35;
    margin-bottom: 20px;
}

/* 공사중 배지 */
.construction-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #ff4757, #ff3742);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: bold;
}

/* 브랜드 그리드 */
.brands-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* 반응형 */
@media (max-width: 768px) {
    .brands-container {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
        padding: 15px;
    }

    .company-btn {
        min-height: 180px;
        padding: 15px;
    }

    .modal-dialog {
        margin: 10px;
        width: calc(100% - 20px) !important;
    }

    .games {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 15px;
    }
}

@media (max-width: 576px) {
    .games {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 10px;
    }
}

/* 모달 커스텀 스타일 */
.modal-content {
    background: linear-gradient(145deg, #2c2c2c, #1a1a1a);
    border: 1px solid #444;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8);
}

.modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 25px 30px 20px;
}

.modal-body {
    padding: 20px 30px;
}

.modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px 30px 25px;
}

/* 로고 스타일 */
.modal-logo {
    text-align: center;
    margin-bottom: 25px;
}

.modal-logo img {
    max-width: 150px;
    height: auto;
}

/* 입력 필드 스타일 */
.form-group label {
    color: #fff;
    font-weight: bold;
    margin-bottom: 8px;
}

.form-group label.required::after {
    content: '*';
    color: #f55148;
    margin-left: 3px;
}

.form-control {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid #444;
    border-radius: 10px;
    color: #fff;
    padding: 12px 15px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.form-control::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.form-control:focus {
    background: rgba(245, 81, 72, 0.1);
    border-color: #f55148;
    box-shadow: 0 0 20px rgba(245, 81, 72, 0.3);
    color: #fff;
    transform: translateY(-2px);
}

/* 버튼 스타일 */
.btn-red {
    background: linear-gradient(135deg, #f55148, #ff6b5b);
    border: 2px solid #f55148;
    color: #fff;
    font-weight: bold;
    padding: 12px 25px;
    border-radius: 10px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-red:hover {
    background: linear-gradient(135deg, #e04537, #f55148);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(245, 81, 72, 0.4);
    color: #fff;
}

.btn-gray {
    background: linear-gradient(135deg, #666, #888);
    border: 2px solid #666;
    color: #fff;
    font-weight: bold;
    padding: 12px 25px;
    border-radius: 10px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-gray:hover {
    background: linear-gradient(135deg, #333, #555);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(102, 102, 102, 0.4);
    color: #fff;
}

/* 중복확인 버튼 */
.btn-check {
    background: linear-gradient(135deg, #666, #888);
    border: none;
    color: #fff;
    font-weight: bold;
    padding: 8px 15px;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-check:hover {
    background: linear-gradient(135deg, #f55148, #ff6b5b);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(245, 81, 72, 0.4);
    color: #fff;
}

/* 입력 필드와 버튼 조합 */
.input-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group .btn-check {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
}

/* 회원가입 모달 크기 조정 */
.modal-lg-custom {
    max-width: 90%;
}

/* 회원가입 폼 그리드 */
.join-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

.join-form-full {
    grid-column: 1 / -1;
}

/* 추천코드 안내 */
.referral-note {
    color: #ff6b5b;
    font-size: 12px;
    font-style: italic;
    margin-top: 5px;
    opacity: 0.8;
}

/* 로딩 스피너 */
.loading-spinner {
    display: none;
    margin-right: 8px;
}

/* 반응형 */
@media (max-width: 768px) {
    .join-form-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .modal-lg-custom {
        max-width: 95%;
    }

    .modal-body {
        padding: 15px 20px;
    }

    .input-group {
        flex-direction: column;
    }

    .input-group .form-control,
    .input-group .btn-check {
        border-radius: 10px !important;
        margin-bottom: 10px;
    }
}

/* 메인 컨텐츠 스타일 */
.main-content {
    padding: 50px 20px;
    text-align: center;
}

.demo-buttons {
    margin: 30px 0;
}

.demo-buttons .btn {
    margin: 0 10px 10px 0;
}

@media screen and (max-width: 768px) {
  html, body {
    width: 405vw !important;
    height: 400vh !important;
  }
  body {
    font-size: 1rem;
    background: url(/images/content_bg.jpg) no-repeat, url(/images/footer_bg.jpg) no-repeat #0f1012 !important;
    font-family: SCDream, sans-serif;
    background-position: center 335px, center calc(100% - 50px) !important;
  }
  .top_inner {
    height: 30vh;
    padding: 60px 55px !important;
  }
  .custom-btn {
    width: 200px !important;
    height: 100px !important;
    font-size: 40px !important;
  }
  .btn-red {
    width: 280px !important;
    height: 100px !important;
    font-size: 40px !important;
  }
  .nav_inner {
    height: 30vh;
  }
  .nav_row {
    flex-direction: column !important;
  }
  .new-logo {
    width: 350px !important;
  }
  .new-logo img {
    width: 350px !important; 
  }
  .gnb ul li a {
    display: block;
    line-height: 93px !important;
    padding: 0 20px;
    color: #a7adb3;
    font-size: 32px !important;
    font-weight: 500;
    font-family: 'SCDream';
    text-decoration: none;
   }
   .main_box {
      width: 100% !important;
      margin: 0 auto;
    }
    .toggle-btn {
        width: 500px !important;
        height: 150px !important;
    }
    .toggle-btn .btn-panel .category {
        font-size: 50px !important;
    }
    .cat_img {
        width: 160px;
    }
    .company-btn {
        width: 370px !important;
        height: 370px !important;
    }
    .item p.gTit {
        bottom: -35px !important;
        font-size: 35px !important;
    }
    .login-box li {
        width: 182px !important;
        height: 38px !important;
        font-size: 30px !important;
    }
    #login_form_modal {
        max-height: 510px !important;
    }
    .form-group {
        font-size: 50px !important;
    }
    .form-group input {
        height: 136px;
        font-size: 3rem !important;
        width: 1060px !important;
    }
    .modal-logo img {
        max-width: 280px !important;
        height: auto !important;
    }
    .close {
        font-size: 55px !important;
    }
    .btn-gray {
        font-size: 2.9rem !important;
        width: 180px !important;
    }
    #content_join {
        height: 1600px !important;
    }
    #join_form {
        max-height: 1400px;
    }
    #login_height {
        height: 790px;
    }
    .modal-content {
        height: 1000px;
    }
    .modal-body {
        max-height: 570px;
        font-size: ;
    }
    .modal-header{
        height: 120px !important;
    }
    .modal-title {
        font-size: 3.5rem !important;
    }
    .modal-search-area .form-control {
        height: 100px !important;
        font-size: 2rem !important;
        min-width: 100% !important;
    }
    #searchType option{
        font-size: 10px;
    }
    .modal-search-area .btn {
        font-size: 35px;
    }
    .notice-header {
        min-height: 100px;
    }
    .notice-title {
        font-size: 2rem !important;
    }
    .p-3 {
        height: 110px;
    }
    .btn-block {
        height: 77px;
        font-size: 30px !important;
    }
    .input-group .form-control {
        min-width: 100% !important;
        min-height: 80px !important;
    }
}