#header {
    display:block;
    background: linear-gradient(#1e2b42, #131b2a);
    border-top:1px solid #1b283d;
    border-bottom:3px solid #1b283d;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
    height:108px;
    text-align: center;
    position: relative;
    min-width: 100%;
    z-index:1000;
}

#header > .inner_center {
    display:block;
    text-align: left;
    margin:0 auto;
    min-width:100%;
    max-width:100%;
	width:100%;
    height:104px;
    position: relative;
    z-index:1000;
}

#header > .inner_center > .link_logo {
    display: block;
    position: absolute;
    left:20px;
    top:50%;
    transform: translateY(-50%);
}

#header > .inner_center > .link_logo > img {
    display: block;
    margin:0;
    padding:0;
    border:0;
    /* width:152px;
    height:47px; */
}

#header > .inner_center > .nav_main {
    position: absolute;
    display: flex;
    justify-content: center;
    left:0px;
    right:0px;
    bottom:0px;
    position: absolute;
    height:0px;
}

#header > .inner_center > .nav_main > ul {
    display: flex;
    height:56px;
    margin-top:-56px;
}

/* Each entry is the containing block for its own submenu. Without this the
   submenu resolves against .nav_main, which is the full width of the header,
   so it rendered as a centred strip instead of hanging under its parent. */
#header > .inner_center > .nav_main > ul > li {
    display: block;
    flex-shrink: 0;
    position: relative;
}

#header > .inner_center > .nav_main > ul > li.btn_livetv {
    display: block;
    position: relative;
    width:95px;
    height:30px;
    margin-left:20px;
    cursor:pointer;
    transform: translate(0,28%);
}

#header > .inner_center > .nav_main > ul > li.btn_livetv > .ico {
    display: block;
    position: absolute;
    left:0px;
    top:2px;
    bottom:2px;
    height:26px;
    filter:brightness(0.8);
    transition: all 200ms;
}

#header > .inner_center > .nav_main > ul > li.btn_livetv > .logo {
    display: block;
    position: absolute;
    left:40px;
    top:-2px;
    height:18px;
    filter:brightness(0.8);
    transition: all 200ms;
}

#header > .inner_center > .nav_main > ul > li.btn_livetv:hover > .ico {
    filter:brightness(1);
    transition: all 200ms;
}

#header > .inner_center > .nav_main > ul > li.btn_livetv:hover > .logo {
    filter:brightness(1);
    transition: all 200ms;
}

#header > .inner_center > .nav_main > ul > li.btn_livetv > .label {
    display: block;
    position: absolute;
    right:0px;
    bottom:4px;
    height:15px;
    font-size:14px;
    font-weight:600;
    color:#ef7c00;
    transition: all 200ms;
}

#header > .inner_center > .nav_main > ul > li.btn_livetv:hover > .label {
    color: #fff0c8;
    text-shadow: 0 0 5px #fff, 0 0 10px #ff8100, 0 0 15px #f00, 0 0 5px #ef7c00, 0 0 5px #ef7c00, 0 0 10px #f92552, 0 0 20px #ef7c00, 0px 0 40px #ef7c00;
    transition: all 200ms;
}


#header > .inner_center > .nav_main > ul > li > ul {
    position:absolute;
    top:100%;
    left:0px;
    /* An absolutely positioned box with only `left` set shrinks to fit the
       space left in its containing block, which is now the entry itself. The
       legacy never hit that because its panel spanned the whole header, so
       below 1024px — where the entries lose width and the panel's own items
       gain side padding — the last item was landing past the panel's edge and
       off the screen. Sizing to the content puts it back. */
    width:max-content;
    min-width:100%;
    justify-content: flex-start;
    display: flex;
    z-index:0;
    opacity:0;
    height:54px;
    max-height:0px;
    transition: all 0ms;
    overflow: hidden;
}

/* The rightmost entry sits against the header's right edge, so its panel has
   nowhere to grow but leftwards. The legacy got the same result from a
   header-wide panel it right-justified below 1300px. */
#header > .inner_center > .nav_main > ul > li:last-child > ul {
    left:auto;
    right:0px;
}

#header > .inner_center > .nav_main > ul > li:hover > ul {
    z-index:10;
    opacity:1;
    transition: max-height 0ms;
    max-height:51px;
    overflow: visible;
}

/* #header > .inner_center > .nav_main > ul > li:hover > ul:hover {
    overflow: visible;
} */

#header > .inner_center > .nav_main > ul > li > ul > li {
    display: block;
    flex-shrink: 0;
}

#header > .inner_center > .nav_main > ul > li > ul > li > ul {
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: all 500ms;
}

#header > .inner_center > .nav_main > ul > li:hover > ul > li:hover > ul {
    max-height: 360px;
    transition: all 500ms;
    box-shadow: 
        0px 0px 5px rgba(0,0,0,0.5),
        0px 0px 10px rgba(0,0,0,0.5),
        0px 0px 15px rgba(0,0,0,0.5);
}

#header > .inner_center > .nav_main > ul > li:hover > ul > li > ul > li {
    display: block;
    height:40px;
}

#header > .inner_center > .nav_main > ul > li > a {
    display: block;
    height:56px;
    line-height: 56px;
    padding-left:15px;
    padding-right:15px;
    color:#aeaeae;
    font-size:16px;
    font-weight:600;
    transition: all 300ms;
}

#header > .inner_center > .nav_main > ul > li:hover > a,
#header > .inner_center > .nav_main > ul > li > a.active {
    color: #fff0c8;
    /* text-shadow: 0 0 17px #ef7c00, 0 0 22px #ef7c00, 0 0 2px #ef7c00; */
    transition: all 300ms;
    text-shadow: 0 0 5px #fff, 0 0 10px #ff8100, 0 0 15px #f00, 0 0 5px #ef7c00, 0 0 5px #ef7c00, 0 0 10px #f92552, 0 0 20px #ef7c00, 0px 0 40px #ef7c00;
    animation: beat .25s infinite alternate;
}

#header > .inner_center > .nav_main > ul > li > a.fold {
    position: relative;
    padding-right:40px;
}

#header > .inner_center > .nav_main > ul > li > ul > li > a {
    display: block;
    height:54px;
    line-height:49px;
    border:0px;
    margin:0px;
    border-top:3px solid #ef7c00;
    padding-left:20px;
    padding-right:20px;
    font-size:14px;
    color:#aeaeae;
    color:transparent;
    background: #11141d;
    position: relative;
    font-weight: 600;
    transition: all 200ms;
    text-align: center;
}

#header > .inner_center > .nav_main > ul > li:hover > ul > li:hover > a {
    background: #29324b;
    color: #fff0c8;
    /* text-shadow: 0 0 17px #ef7c00, 0 0 22px #ef7c00, 0 0 2px #ef7c00; */
    transition: all 300ms;
    text-shadow: 0 0 5px #fff, 0 0 10px #ff8100, 0 0 15px #f00, 0 0 5px #ef7c00, 0 0 5px #ef7c00, 0 0 10px #f92552, 0 0 20px #ef7c00, 0px 0 40px #ef7c00;
    animation: beat .25s infinite alternate;
}

#header > .inner_center > .nav_main > ul > li:hover > ul > li > a.active {
    color: #fff0c8;
    /* text-shadow: 0 0 17px #ef7c00, 0 0 22px #ef7c00, 0 0 2px #ef7c00; */
    transition: all 300ms;
    text-shadow: 0 0 5px #fff, 0 0 10px #ff8100, 0 0 15px #f00, 0 0 5px #ef7c00, 0 0 5px #ef7c00, 0 0 10px #f92552, 0 0 20px #ef7c00, 0px 0 40px #ef7c00;
    animation: beat .25s infinite alternate;
}

#header > .inner_center > .nav_main > ul > li:hover > ul > li > a {
    color:#aeaeae;
}

#header > .inner_center > .nav_main > ul > li > ul > li > ul > li > a {
    height:40px;
    display: block;
    line-height: 39px;
    background:#11141d;
    border-bottom:1px solid #29324b;
    border-left:1px solid #29324b;
    border-right:1px solid #29324b;
    text-align: center;
    color:#aeaeae;
    padding-left:20px;
    padding-right:20px;
    font-size:13px;
}

#header > .inner_center > .nav_main > ul > li > ul > li > ul > li > a:hover {
    color: #fff0c8;
    /* text-shadow: 0 0 17px #ef7c00, 0 0 22px #ef7c00, 0 0 2px #ef7c00; */
    transition: all 300ms;
    text-shadow: 0 0 5px #fff, 0 0 10px #ff8100, 0 0 15px #f00, 0 0 5px #ef7c00, 0 0 5px #ef7c00, 0 0 10px #f92552, 0 0 20px #ef7c00, 0px 0 40px #ef7c00;
    animation: beat .25s infinite alternate;
    background:#29324b;
}

#header > .inner_center > .nav_main > ul > li > ul > li > ul > li > a.active {
    color: #fff0c8;
    /* text-shadow: 0 0 17px #ef7c00, 0 0 22px #ef7c00, 0 0 2px #ef7c00; */
    transition: all 300ms;
    text-shadow: 0 0 5px #fff, 0 0 10px #ff8100, 0 0 15px #f00, 0 0 5px #ef7c00, 0 0 5px #ef7c00, 0 0 10px #f92552, 0 0 20px #ef7c00, 0px 0 40px #ef7c00;
    animation: beat .25s infinite alternate;
}

#header > .inner_center > .nav_main > ul > li > a > span {
    display: block;
    position: absolute;
    right:0px;
    top:15px;
    transform: scaleX(0.6) translate(-50%, -50%);
    font-size: 26px;
    height:30px;
    width:30px;
    font-weight:600;
    transition: all 300ms;
}

#header > .inner_center > .nav_main > ul > li:hover > a > span {
    display: block;
    position: absolute;
    right:10px;
    top:27px;
    transform: rotate(90deg) scaleX(0.6) translate(-50%, -50%);
    font-size: 30px;
    height:30px;
    width:30px;
    font-weight:600;
    transition: all 300ms;
}

#header > .nav_main_sub_line.active {
    border-top:3px solid #ef7c00;
    max-height: 54px;
}

#header > .inner_center > .member_info {
    position:absolute;
    right:20px;
    top:15px;
    height:30px;
    display: flex;
    justify-content: end;
}

#header > .inner_center > .member_info > .btn_domain {
    display: block;
    position: relative;
    width:112px;
    height:30px;
    margin-right:20px;
    cursor:pointer;
}

#header > .inner_center > .member_info > .btn_domain > .ico {
    display: block;
    position: absolute;
    left:0px;
    top:2px;
    bottom:2px;
    height:26px;
    filter:brightness(0.8);
    transition: all 200ms;
}

#header > .inner_center > .member_info > .btn_domain > .logo {
    display: block;
    position: absolute;
    left:45px;
    top:-2px;
    height:18px;
    filter:brightness(0.8);
    transition: all 200ms;
}

#header > .inner_center > .member_info > .btn_domain:hover > .ico {
    filter:brightness(1);
    transition: all 200ms;
}

#header > .inner_center > .member_info > .btn_domain:hover > .logo {
    filter:brightness(1);
    transition: all 200ms;
}

#header > .inner_center > .member_info > .btn_domain > .label {
    display: block;
    position: absolute;
    right:0px;
    bottom:4px;
    height:15px;
    font-size:14px;
    font-weight:600;
    color:#ef7c00;
    transition: all 200ms;
}

#header > .inner_center > .member_info > .btn_domain:hover > .label {
    color: #fff0c8;
    text-shadow: 0 0 5px #fff, 0 0 10px #ff8100, 0 0 15px #f00, 0 0 5px #ef7c00, 0 0 5px #ef7c00, 0 0 10px #f92552, 0 0 20px #ef7c00, 0px 0 40px #ef7c00;
    transition: all 200ms;
}


#header > .inner_center > .member_info > .btn_cscenter {
    display: block;
    position: relative;
    width:88px;
    height:30px;
    margin-right:20px;
    cursor:pointer;
}

#header > .inner_center > .member_info > .btn_cscenter > .ico {
    display: block;
    position: absolute;
    left:0px;
    top:3px;
    bottom:3px;
    height:24px;
    filter:brightness(0.8);
    transition: all 200ms;
}

#header > .inner_center > .member_info > .btn_cscenter > .logo {
    display: block;
    position: absolute;
    left:39px;
    top:-2px;
    height:18px;
    filter:brightness(0.8);
    transition: all 200ms;
}

#header > .inner_center > .member_info > .btn_cscenter:hover > .ico {
    filter:brightness(1);
    transition: all 200ms;
}

#header > .inner_center > .member_info > .btn_cscenter:hover > .logo {
    filter:brightness(1);
    transition: all 200ms;
}


#header > .inner_center > .member_info > .btn_cscenter > .label {
    display: block;
    position: absolute;
    right:0px;
    bottom:4px;
    height:15px;
    font-size:14px;
    font-weight:600;
    color:#ef7c00;
}

#header > .inner_center > .member_info > .btn_cscenter:hover > .label {
    color: #fff0c8;
    text-shadow: 0 0 5px #fff, 0 0 10px #ff8100, 0 0 15px #f00, 0 0 5px #ef7c00, 0 0 5px #ef7c00, 0 0 10px #f92552, 0 0 20px #ef7c00, 0px 0 40px #ef7c00;
    transition: all 200ms;
}



#header > .inner_center > .member_info > .btn_login,
#header > .inner_center > .member_info > .btn_signup  {
    font-size:14px;
    color:#cccccc;
    cursor: pointer;
    margin-left:10px;
    font-weight:600;
    line-height:30px;
}

#header > .inner_center > .member_info > .txt_or {
    font-size:14px;
    color:#cccccc;
    margin-left:10px;
    font-weight:600;
    line-height:30px;
}

#header > .inner_center > .member_info > .btn_login:hover,
#header > .inner_center > .member_info > .btn_signup:hover{
    color: #ef7c00
}

#header > .inner_center > .member_info > .mb_level {
    width:30px;
    height:30px;
    margin-left:10px;
    object-fit: scale-down;
    object-position: center;
}

#header > .inner_center > .member_info > .mb_id {
    font-size:14px;
    color:#cccccc;
    margin-left:10px;
    font-weight:600;
    line-height:30px;
}

#header > .inner_center > .member_info > .mb_money {
    display: flex;
    margin-left:30px;
}

#header > .inner_center > .member_info > .mb_money > label {
    display: block;
    font-size:14px;
    color:#cccccc;
    font-weight:600;
    line-height:30px;
}

#header > .inner_center > .member_info > .mb_money > data {
    display: block;
    font-size:14px;
    color:#ef7c00;
    margin-left:10px;
    font-weight:600;
    line-height:30px;
}

#header > .inner_center > .member_info > .mb_point {
    display: flex;
    margin-left:30px;
}

#header > .inner_center > .member_info > .mb_point > label {
    display: block;
    font-size:14px;
    color:#cccccc;
    font-weight:600;
    line-height:30px;
}

#header > .inner_center > .member_info > .mb_point > data {
    display: block;
    font-size:14px;
    color:#ef7c00;
    margin-left:10px;
    font-weight:600;
    line-height:30px;
}

#header > .inner_center > .member_info > .btn_logout,
#header > .inner_center > .member_info > .btn_pointswap,
#header > .inner_center > .member_info > .btn_deposit,
#header > .inner_center > .member_info > .btn_withdraw {
    display: block;
    margin-left:30px;
    font-size:14px;
    color:#cccccc;
    font-weight:600;
    line-height:30px;
    cursor: pointer;
}

#header > .inner_center > .member_info > .btn_logout:hover,
#header > .inner_center > .member_info > .btn_pointswap.active,
#header > .inner_center > .member_info > .btn_deposit.active,
#header > .inner_center > .member_info > .btn_withdraw.active ,
#header > .inner_center > .member_info > .btn_pointswap:hover,
#header > .inner_center > .member_info > .btn_deposit:hover,
#header > .inner_center > .member_info > .btn_withdraw:hover {
    color: #fff0c8;
    /* text-shadow: 0 0 17px #ef7c00, 0 0 22px #ef7c00, 0 0 2px #ef7c00; */
    transition: all 300ms;
    text-shadow: 0 0 5px #fff, 0 0 10px #ff8100, 0 0 15px #f00, 0 0 5px #ef7c00, 0 0 5px #ef7c00, 0 0 10px #f92552, 0 0 20px #ef7c00, 0px 0 40px #ef7c00;
    animation: beat .25s infinite alternate;
}
/*
 * 파트너로 가는 단추.
 *
 * 옆의 입금·출금과 **같은 모양**입니다 — 글자만 있는 링크. 다른 것은 빛뿐인데,
 * 그 빛이 이 줄의 `:hover` 가 이미 쓰던 것입니다. 옆 단추들은 마우스를 얹어야
 * 켜지고 이것만 **늘 켜져 있습니다.**
 *
 * 알약에 그라디언트를 씌워 봤지만 이 머리띠에서 혼자 튀었습니다. 같은 빛을
 * 늘 켜 두는 편이 줄에 앉으면서도 눈에 먼저 들어옵니다.
 */
#header > .inner_center > .member_info > .btn_partner {
    display: block;
    margin-left: 30px;
    font-size: 14px;
    font-weight: 600;
    line-height: 30px;
    cursor: pointer;
    color: #fff0c8;
    transition: all 300ms;
    text-shadow: 0 0 5px #fff, 0 0 10px #ff8100, 0 0 15px #f00, 0 0 5px #ef7c00, 0 0 5px #ef7c00, 0 0 10px #f92552, 0 0 20px #ef7c00, 0px 0 40px #ef7c00;
    animation: beat .25s infinite alternate;
}

#wrap_m {display:none}
.fold {display:none}

@media all and (min-width:768px) and (max-width:1023px) {
	.mini {width:100px}
	#header {min-width: 100%}
	#header > .inner_center {
    	min-width:100%;
    	max-width:100%;
	}
	#header > .inner_center > .link_logo {left:10px}
	#header > .inner_center > .member_info {right:10px}
	#header > .inner_center > .nav_main {justify-content:right}
	#header > .inner_center > .nav_main > ul > li > a.fold {padding-right:25px}
	#header > .inner_center > .nav_main > ul > li > a > span {right:-12px}
	#header > .inner_center > .nav_main > ul > li > ul > li > a {padding-left:10px; padding-right:10px}
	#header > .inner_center > .nav_main > ul > li:hover > a > span  {right:-3px}
}

@media (max-width:767px){

#header {display:none}

#wrap_m {
	display:block;
	position: relative;
	max-width: 1000px;
	background: #070a0f;
	background-size: 100% auto;
	margin: 0 auto;
	box-sizing: border-box;
}

#wrap_m.light {
	background: #ffffff;
}

.mask1 {display:none;position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:-1; backdrop-filter: blur(5px);}
.mask2 {display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:200;}
.mask1.active {display:block;}



/* The site header, inside this file's own max-width:767px block. Held off
   `.app-ui` the same way common.css's phone reset is — the player pages use
   <header> for panel and section headers, which are not 70px gradient bars.
   `:where()` adds no specificity, so nothing else about this rule moves. */
header:where(:not(.app-ui, .app-ui *)) {
	z-index:1000;
	max-width: 1000px;

	width:100%;
	height: 70px;
	background: linear-gradient(#1e2b42, #131b2a);
	border-bottom: 2px solid #1c293f;
	position: relative;
}

header .logo {
	position: absolute;
	left:50%;
	top:50%;
	transform: translate(-50%, -50%);
	display:block;
}

header .logo img {
	/*width: 100px;*/
	display:block;
	height:40px;
}

header .head_left {
	position: absolute;
	top:50%;
	left:35px;
	transform: translate(-50%, -50%);
}

header .head_left img {
	height: 50px;
	width : 50px;
	transform: scaleX(0.8);
}

header .head_right {
	position: absolute;
	top:50%;
	right:35px;
	transform: translate(50%, -50%);
}

header .head_right img {
	height: 40px;
	object-fit: scale-down;

}

.head_menu {
	position: fixed;
	top: 0;
	left: 50%;
	width: 100%;
	max-width: 1000px;

	height: 100%;
	background: #121212;
	z-index:2000;
	opacity: 0;
	transform: translateX(-155%);
	transition: all 800ms;
	display: flex;
	flex-direction: column;
}

.head_menu .head_menu_top {
	width:100%;
	height:114px;
	line-height:114px;
	background: #161616;
}

.head_menu .head_menu_top img {
	height:50px;
	margin-top:15px;
}

.head_menu .logo {
	display:inline-block;
	margin-top:19px;
	margin-left:26px;
}

.head_menu.show {
	opacity: 1;
	transform: translateX(-50.1%);
}

.head_menu .close {
	width: 48px;
	height: 13px;
	z-index:10;
	color:#ffc000;
	font-weight:bold;
	float:right;
	margin-right:27px;
	cursor:pointer;
}

.head_menu .close img {
	width: 100%;
}

/*.head_menu .info_area {
	height: 90px;
	background:linear-gradient(#2c5aa0, #2581ca);
	position:relative;
}*/
.head_menu .info_area {
    height: 90px;
    background: linear-gradient(#1a1a1a, #3a3a42);
    position: relative;
}

/*t S : ?��규추�? */

.head_menu .info_area .btns_before_login {
	position:absolute;
	display:flex;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
}

.head_menu .info_area .btns_before_login .btn_light {
	flex-shrink: 0;
	display:block;
	margin:0;
	margin-right:5px;
	margin-left:5px;
	background:linear-gradient(#ffffff, #e1e1e1);
	width:110px;
	text-align: center;
	height:33px;
	line-height:31px;
	border:1px solid #ffffff;
	color:#000000;
	border-radius:10px;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
	cursor:pointer;
	user-select: none;
	font-size:14px;
}

.head_menu .info_area .btns_before_login .btn_light:hover {
	background:linear-gradient(#ffffff 50%, #dddfe1 50.01%, #eeefff 80%);
	color:#0049c9;
}

.head_menu .info_area .wallet_money {
	position:absolute;
	display:block;
	top:0;
	left:0;
	right:50%;
}

.head_menu .info_area .wallet_money label {
	position:absolute;
	top:15px;
	left:15px;
	color:#98d2ff;
	font-size:20px;
	font-weight:600;
	height:24px;
	line-height:24px;
	width:85px;
	text-align: center;
}

.head_menu .info_area .wallet_money .btns_after_login {
	position:absolute;
	top:15px;
	left:100px;
	right:10px;
	display: flex;
}

.head_menu .info_area .wallet_money .btns_after_login .btn_light {
	display:block;
	margin:0;
	margin-right:5px;
	margin-left:5px;
	background:linear-gradient(#ffffff, #e1e1e1);
	width:100%;
	text-align: center;
	height:24px;
	line-height:22px;
	border:1px solid #ffffff;
	color:#000000;
	border-radius:6px;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
	cursor:pointer;
	user-select: none;
	font-size:14px;
}

.head_menu .info_area .wallet_money .btns_after_login .btn_light:hover {
	background:linear-gradient(#ffffff 50%, #dddfe1 50.01%, #eeefff 80%);
	color:#0049c9;
}

.head_menu .info_area .wallet_money .amount {
	position:absolute;
	right:15px;
	top:46px;
	font-size:20px;
	line-height:24px;
	height:24px;
	color:#ffffff;
	font-weight:600;
}

.head_menu .info_area .wallet_point {
	position:absolute;
	display:block;
	top:0;
	left:50%;
	right:0;
}


.head_menu .info_area .wallet_point label {
	position:absolute;
	top:15px;
	left:15px;
	color:#98d2ff;
	font-size:20px;
	font-weight:600;
	height:24px;
	line-height:24px;
	width:85px;
	text-align: center;
}

.head_menu .info_area .wallet_point .btns_after_login {
	position:absolute;
	top:15px;
	left:100px;
	right:10px;
	display: flex;
}

.head_menu .info_area .wallet_point .btns_after_login .btn_light {
	display:block;
	margin:0;
	margin-right:5px;
	margin-left:5px;
	background:linear-gradient(#ffffff, #e1e1e1);
	width:100%;
	text-align: center;
	height:24px;
	line-height:22px;
	border:1px solid #ffffff;
	color:#000000;
	border-radius:6px;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
	cursor:pointer;
	user-select: none;
	font-size:14px;
}

.head_menu .info_area .wallet_point .btns_after_login .btn_light:hover {
	background:linear-gradient(#ffffff 50%, #dddfe1 50.01%, #eeefff 80%);
	color:#0049c9;
}

.head_menu .info_area .wallet_point .amount {
	position:absolute;
	right:15px;
	top:46px;
	font-size:20px;
	line-height:24px;
	height:24px;
	color:#ffffff;
	font-weight:600;
}

.head_menu .info_area .design_seperator {
	position:absolute;
	top:10px;
	bottom:10px;
	left:50%;
	width:2px;
	background:#045850;
	border-right:1px solid #49b3ff;
	transform: translate(-50%);
}


/* F : ?��규추�? */

.head_menu .info1 {
	color: #ffffff;
	font-size: 12px;
	position: absolute;
	left:15px;
	top:10px;
}

.head_menu .profile {
	position: absolute;
	display: flex;
	align-items: center;
	left:15px;
	right:15px;
	bottom:15px;
}

.head_menu .profile i {
	width: 42px;
	height: 42px;
	background: #ffffff;
	border-radius: 25px;
	margin-right:10px;
	overflow: hidden;
}

.head_menu .profile i img {
	width: 100%;
}

.head_menu .profile strong {
	color: #ffffff;
	font-size: 20px;
	font-weight: 500;
}

.head_menu .profile button {
	position: absolute;
	top: 50%;
	right: 0;
	width: 100px;
	height: 30px;
	color: #ffffff;
	font-size: 14px;
	border: 1px solid #ffffff;
	border-radius: 15px;
	transform: translateY(-30%);
}

.head_menu .log_atrer {
	display: flex;
}

.head_menu .log_atrer div {
	display: flex;
	width: 50%;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.head_menu .log_atrer div i {
	display: flex;
	height: 60px;
	align-items: center;
	justify-content: center;
}

.head_menu .log_atrer button {
	width: 120px;
	height: 30px;
	color: #ffffff;
	font-size: 14px;
	background: #323150;
	border-radius: 15px;
}

.head_menu .left_menu_area {
	display: flex;
	width: 100%;
	flex-grow: 1;
	background: #161616;
	overflow: hidden;
}

/*.head_menu .left_menu {
	width: 40%;
	height: 100%;
	background: #d3d9e2;
	padding: 0 0 20px 0;
	overflow: hidden;
	overflow-y: auto;
}*/

.head_menu .left_menu {
    width: 50%;
    height: 100%;
    padding: 0 0 20px 0;
    overflow: hidden;
    overflow-y: auto;
}

.head_menu .left_menu ul {
	padding: 0;
}

/*head_menu .left_menu li {
	display: flex;
	height: 50px;
	color: #000000;
	font-size: 16px;
	font-weight: 500;
	padding: 0 0 0 30px;
	margin: 0 0 5px 0;
	border-bottom: 1px solid #b7bcc4;
	align-items: center;
}*/
.head_menu .left_menu li {
    display: block;
    height: 45px;
	line-height:45px;
    color: #aeaeae;
    font-size: 14px;
    font-weight: bold;
    margin: 0;
    border: 1px solid #2f2f2f;
	border-top:0;
	padding-left:25px;
}

.head_menu .left_menu li:nth-child(1) {
    border-top: 1px solid #2f2f2f;
}
/*.head_menu .left_menu li:hover,
.head_menu .left_menu li.on {
	color: #6153ee;
}*/
.head_menu .left_menu li:hover,
.head_menu .left_menu li.on {
	color: #ef7c00;
}

.head_menu .left_menu li .left_arrow_off {
	vertical-align: middle;
	margin-top: -4px;
	margin-left: 10px;
}
.head_menu .left_menu li .left_arrow_on {
	display:none;
	vertical-align: middle;
	margin-top: -4px;
	margin-left: 10px;
}

.head_menu .left_menu li:hover .left_arrow_off,
.head_menu .left_menu li.on .left_arrow_off {
	display:none;
}

.head_menu .left_menu li:hover .left_arrow_on,
.head_menu .left_menu li.on .left_arrow_on {
	display:inline-block;
}

/*head_menu .sub_menu {
	width: 60%;
	height: 100%;
	background: #ffffff;
	padding: 15px 10px;
	overflow: hidden;
	overflow-y: auto;
}*/
.head_menu .sub_menu {
    width: 50%;
    height: 100%;
    background: #121212;
    overflow: hidden;
    overflow-y: auto;
	position: relative;
	z-index:10;
}

.head_menu .sub_menu .my_money {
	margin: 0 0 5px 0;
}

/*.head_menu .sub_menu .my_money dl {
	background: linear-gradient(#2c5aa0, #2581ca);
	border-radius: 5px;
	padding: 15px 20px;
}*/
.head_menu .sub_menu .my_money dl {
    background: linear-gradient(#3e3e3e, #858585);
    border-radius: 5px;
    padding: 15px 20px;
}

.head_menu .sub_menu .my_money dt {
	color: #b0b5c5;
	font-size: 14px;
	margin: 0 0 5px 0;
}

.head_menu .sub_menu .my_money dd {
	color: #ffffff;
	font-size: 18px;
}

/*.head_menu .sub_menu .my_point {
	padding: 0 0 10px 0;
	border-bottom: 1px solid #ebebf0;
}*/
.head_menu .sub_menu .my_point {
    padding: 0 0 10px 0;
    border-bottom: 1px solid #606060;
}

/*.head_menu .sub_menu .my_point dl {
	background: linear-gradient(#2c5aa0, #2581ca);
	border-radius: 5px;
	padding: 15px 20px;
}*/
.head_menu .sub_menu .my_point dl {
    background: linear-gradient(#3e3e3e, #858585);
    border-radius: 5px;
    padding: 15px 20px;
}

.head_menu .sub_menu .my_point dt {
	color: #b0b5c5;
	font-size: 14px;
	margin: 0 0 5px 0;
}

.head_menu .sub_menu .my_point dt span {
	color: #ffffff;
}

.head_menu .sub_menu .my_point dd {
	color: #ffffff;
	font-size: 18px;
}

.head_menu .sub_menu .my_point dd em {
	display: inline-block;
	color: #00c0ff;
	font-size: 20px;
	margin: 0 0 0 5px;
}

.head_menu .sub_menu .go_main {
	display: flex;
	background: linear-gradient(#2c5aa0, #2581ca);
	border-radius: 5px;
	padding: 15px 20px;
	flex-direction: column;
}

.head_menu .sub_menu .go_main strong {
	color: #b0b5c5;
	font-size: 14px;
	margin: 0 0 5px 0;
}

.head_menu .sub_menu .go_main span {
	color: #ffffff;
	font-size: 18px;
}

.head_menu .sub_menu .sub_menu_list {}

.head_menu .sub_menu .sub_menu_list::-webkit-scrollbar{
	display: none;
}

/*.head_menu .sub_menu .sub_menu_list .depth1 {
	position: relative;
	display: flex;
	height: 50px;
	color: #303030;
	font-size: 16px;
	font-weight: 600;
	padding: 0 20px;
	border-bottom: 1px solid #ebebf0;
	align-items: center;
}*/
.head_menu .sub_menu .sub_menu_list .depth1 {
    position: relative;
    display: block;
    height: 45px;
    color: #aeaeae;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid #2f2f2f;
	border-top:0;
	line-height: 45px;
	text-align: center;
	z-index:10;
}

.head_menu #sub_menu3 .sub_menu_list .depth1:nth-child(1) ,
.head_menu #sub_menu3 .sub_menu_list .depth1:nth-child(8) {
	color:#ffffff;
}

.head_menu .sub_menu .sub_menu_list .depth1:nth-child(1) {
    border-top: 1px solid #2f2f2f;
}

/*.head_menu .sub_menu .sub_menu_list .depth1:hover,
.head_menu .sub_menu .sub_menu_list .depth1.on {
	color: #6153ee;
}*/

.head_menu .sub_menu .sub_menu_list .depth1:hover, .head_menu .sub_menu .sub_menu_list .depth1.on {
    color: #ef7c00;
}

/*.head_menu .sub_menu .sub_menu_list dt {
	position: relative;
	display: flex;
	height: 60px;
	color: #303030;
	font-size: 16px;
	font-weight: 600;
	padding: 0 20px;
	border-bottom: 1px solid #ebebf0;
	align-items: center;
}*/
.head_menu .sub_menu .sub_menu_list dt {
    position: relative;
    display: block;
    height: 45px;
    color: #aeaeae;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid #5c5c5c;
    align-items: center;
}
/*.head_menu .sub_menu .sub_menu_list dt:after {
	content: '';
	position: absolute;
	top: 50%;
	right: 10px;
	width: 14px;
	height: 14px;
	background: url('/images/winwin3_mobile/ic_arrow_1.png') no-repeat center center;
	background-size: 100% auto;
	transform: translateY(-50%) rotate(0deg);
}*/

/*.head_menu .sub_menu .sub_menu_list dd {
	display: none;
	padding: 10px 0 0 0;
	border-bottom: 1px solid #ebebf0;
}*/

.head_menu .sub_menu .sub_menu_list dd {
    display: none;
    padding: 10px 0 0 0;
    border-bottom: 1px solid #646464;
}

/*.head_menu .sub_menu .sub_menu_list dd .depth2 {
	display: flex;
	height: 40px;
	color: #6f6f6f;
	font-size: 15px;
	padding: 0 20px;
	margin: 0 0 10px 0;
	align-items: center;
}*/
.head_menu .sub_menu .sub_menu_list dd .depth2 {
    display: flex;
    height: 40px;
    color: #ffffff;
    font-size: 15px;
    padding: 0 20px;
    margin: 0 0 10px 0;
    align-items: center;
}

/*.head_menu .sub_menu .sub_menu_list dl.active dt {
	color: #6153ee;
	border-bottom: 0;
}*/
.head_menu .sub_menu .sub_menu_list dl.active dt {
    color: #ffeb3b;
    border-bottom: 0;
}

.head_menu .sub_menu .sub_menu_list dl.active dt:after {
	transform: translateY(-50%) rotate(180deg);
}

.head_menu .sub_menu .sub_menu_list dl.active dd {
	display: block;
}

.head_menu .sub_menu .case1 {
	display: block;
	width: 86%;
	margin: 0 auto;
}

.head_menu .sub_menu .case1 img {
	width: 100%;
}

.head_menu .sub_menu .left_quick_menus {
	margin: 15px 0 0 0;
}

.head_menu .sub_menu .left_quick_menus ul {
	display: flex;
	flex-wrap: wrap;
}

.head_menu .sub_menu .left_quick_menus li {
	display: flex;
	width: 50%;
	margin: 0 0 10px 0;
	align-items: center;
	justify-content: center;
}

/*.head_menu .sub_menu .left_quick_menus li a {
	display: flex;
	width: 90%;
	height: 70px;
	border: 2px solid #d6d6d6;
	border-radius: 5px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}*/

.head_menu .sub_menu .left_quick_menus li a {
    display: flex;
    width: 90%;
    height: 70px;
    border: 2px solid #d6d6d6;
    border-radius: 5px;
    flex-direction: column;
    align-items: center;
    background: #fff;
    justify-content: center;
}

.head_menu .sub_menu .left_quick_menus li a i {
	width: 32px;
	height: 32px;
	margin: 0 0 3px 0;
}

.head_menu .sub_menu .left_quick_menus li a i img {
	width: 100%;
}

.head_menu .sub_menu .left_quick_menus li a strong {
	color: #aeaeae;
	font-size: 13px;
	font-weight: 500;
}

.head_menu .sub_menu .left_quick_menus li a:hover strong {
	color: #6153ee;
}

.head_menu #sub_menu1 {
	display: none;
}

.head_menu #sub_menu2 {
	display: none;
}

.head_menu *::-webkit-scrollbar {
	display: none;
}

.head_menu #sub_menu3 {
	display: none;
}

.head_menu #sub_menu3 img {
	/*vertical-align:middle;*/
	margin-top:13px;
	margin-right:10px;
}

.head_menu #sub_menu4 {
	display: none;
}

.head_menu #sub_menu5 {
	display: none;
}

.head_menu #sub_menu6 {
	display: none;
}

.head_menu #sub_menu7 {
	display: none;
}

.head_menu #sub_menu8 {
	display: none;
}

.head_menu #sub_menu9 {
	display: none;
}

.head_menu #sub_menu10 {
	display: none;
}

.head_menu #sub_menu11 {
	display: none;
}


.right_menu {
	position: fixed;
	top: 0;
	right: 50%;
	width: 100vw;
	max-width: 1000px;

	height: 100vh;
	background: #121212;
	z-index:2000;
	opacity: 0;
	transform: translateX(155%);
	transition: all 800ms;
	flex-direction: column;
}

.right_menu.show {
	opacity: 1;
	transform: translateX(50%);
}
.right_menu .head_menu_top {
	width:100%;
	height:114px;
	line-height:114px;
	background: #161616;
}
.right_menu .logo {
	display:inline-block;
	margin-top:20px;
	margin-left:26px;
}

.right_menu .logo img {
	height:50px;
	margin-top:15px;
}

.right_menu .close {
	width: 48px;
	height: 13px;
	z-index:10;
	color:#ffc000;
	font-weight:bold;
	float:right;
	margin-right:27px;
	cursor:pointer;
}

.right_menu .right_menu_login_box {
	margin-top: 35px;
	padding: 0 30px;
}

.right_menu .right_menu_login_box input {
	background:#7f8f93;
	border:1px solid #3e4446;
	width: 100%;
	height: 50px;
	border-radius: 5px;
	color: #edd287;
	padding-left:15px;
	padding-right:15px;
	margin-bottom:15px;
}

.right_menu .right_menu_login_box .login_box_btn button{
	background:#252e3a;
	border: 1px solid #383b52;
	width: 100%;
	height: 49px;
	border-radius: 5px;
	color: #ffffff;
	line-height: 49px;
	text-align:center;
	margin-bottom: 15px;
	font-weight:600;
}

.right_menu .my_info_box {
	width: 100%;
	height: 100%;
	background: #161616;
}

.right_menu .my_info_box table {
	width:100%;
	border: 1px solid #2d2d2d;
}

.right_menu .my_info_box table td {
	height: 45px;
	border-right: 1px solid #2d2d2d;
	text-align:center;
}

.right_menu .my_info_box table td.my_info_box_td_bottom {
	border-bottom: 1px solid #2d2d2d;
}

.right_menu .my_info_box .my_info_top ul li {
	display: inline-block;
	width: 100%;
}

.right_menu .my_info_box .my_info_middle ul li {
	display: inline-block;
	width: 30%;
}
.right_menu .my_info_box .my_info_middle ul li:nth-child(1) ,
.right_menu .my_info_box .my_info_middle ul li:nth-child(3) {
	width: 18%;
}

.right_menu .my_info_box ul strong {
	color: #ef7c00;
}

}

@media (max-width:280px){
	.fold {display:block !important}
	.head_menu .sub_menu .sub_menu_list .depth1 {height:auto}
	.head_menu #sub_menu3 img {margin-right:0}
}