.popup {width: 100%; height: 100%; position: absolute; overflow: hidden; min-width: 1400px; top:0;overflow-y: auto;}
    .popup.active {background: rgba(0,0,0,0.63); z-index: 999; backdrop-filter: blur(4px);}


    /*      right_popup     */
    .right_popup {position: absolute; right: -100%; top: 90px; width: 50%; height: 720px; background: none; transition: all .3s ease; z-index: 100; opacity: 0;}
    .right_popup.active {right: 0; opacity: 1; transition: all .3s ease;}





    .right_popup .wheel_wrap {position: absolute; left: -350px; top: -42px; opacity: 0; transition: all .3s ease;}
    .right_popup .wheel_wrap.active {opacity: 1; transition: all .3s ease;}
    
    .wheel_card {position: absolute; bottom: 2%; width: 60%; left: 20%;}
    .wheel_card img {width: 100%;}
    
    .closeBtn {position: absolute; top: 5px; right: 5px; background: url(/img/icon/close.svg); width: 20px; height: 20px; background-size: cover; text-indent: -9999px; cursor: pointer; transition: all .3s ease; z-index: 100;}
    .closeBtn:hover {transition: all .3s ease; transform: rotate(180deg);}

    .center_popup .cp_box,
    .input_wrap {background: rgba(255,255,255,0.5); width: 350px; height: 600px; left: 300px; top: 50px; position: relative; box-shadow: 1px 1px 20px 5px #000; border-radius: 0px; text-align: center; border: 1px solid rgba(255,255,255,.25);
    
        background: linear-gradient(45deg, rgba(0,255,0,0.3), rgba(255,0,0,0.5), rgba(0,0,255,0.3), rgba(0,255,0,0.3), rgba(255,0,0,0.5), rgba(0,0,255,0.3));
        background-size: 600% 600%;

        animation: input_wrap_anim 10s ease infinite;
}

        @keyframes input_wrap_anim {
            0%{background-position:0% 50%}
            50%{background-position:100% 50%}
            100%{background-position:0% 50%}
        }
    /* .input_wrap input {width: 80%; border: 1px solid #ccc; height: 35px; padding: 0 3%; margin: 1% 0; font-size: 13px;} */
    .input_wrap .title {font-size: 20px; font-weight: bold; color: #f4e388; text-align: left; padding: 30px 0 30px 20px; text-shadow: 1px 1px 1px #4a3e00;}
    .input_wrap .title span {font-size: 11px;}
    .input_wrap .title span.csnum {font-size: 13px; float: right; position: relative; right: 10px; top: 3px;}

    .input_wrap_load {overflow: auto; height: 430px; padding: 20px 0}
	
	/* 주문신청폼 입력폼 부분 (단순화를 위해 새로 작성코드)  */
	.input_wrap .item_block									{position: relative; left: 15px; width: calc(100% - 30px); min-height: 75px; vertical-align: top; z-index: 1;}
	.input_wrap .item_block .block_label					{position: relative; display: block; color: #fff; font-weight: normal; font-size: 70.25%; text-align:left; padding: 0px 0px 5px 5px;}
	.input_wrap .item_block .block_label span.label_desc	{position: relative; font-size:11px; font-weight:100; color:#AAA;}
	.input_wrap .item_block .block_inputs					{position: relative; display: block; padding: 12px; border-radius: 0; font-weight: normal; text-align: left; color: #fff; border: 1px solid #aaa; min-height: 19px; background: rgba(0,0,0,.7); box-shadow: 0px 0px 0px 2px transparent; -webkit-appearance: none; -webkit-transition: box-shadow 0.3s; transition: box-shadow 0.3s;}	
	.input_wrap .item_block .block_inputs .block_inputs_i	{position: relative; width:100%; height:100%; background-color:#00000000 !important; color:#FFFFFF !important;}
	.input_wrap .item_block .block_inputs.b_withbtn			{padding-right: 50px; font-weight:normal;}
	
	.input_wrap .item_block .block_inputs .b_input_span_btn	{position: relative; z-index: 1; display: inline-block; font-size:12px; padding:5px; border-radius: 5px; border:1px solid #ffffff; background-color: #FFFFFF50; cursor:pointer;}
	.input_wrap .item_block .block_inputs .b_sub_btn		{position: absolute; padding: 0 5px; line-height: 2em; font-size: 13px; height: 60%; color: #fff; background: #d54649; right: 2.5%; top: 20%; border: 1px solid transparent; cursor: pointer;}
	
	.input_wrap .item_block .b_option_radios										{position: relative; display: flex; flex-wrap: wrap; font-size:14px; padding: 9px !important;}
	.input_wrap .item_block .b_option_radios .radio_item							{position: relative; flex: 1 1 auto; text-align: center;}
	.input_wrap .item_block .b_option_radios .radio_item input.radio_item_input		{display:none;}
	.input_wrap .item_block .b_option_radios .radio_item .radio_item_name			{position: relative; display: flex; cursor: pointer; align-items: center; justify-content: center; border-radius: 0.2rem; border: none; padding: 7px 0px; color: #b9b9b9; transition: all .15s ease-in-out;}
	.input_wrap .item_block .b_option_radios .radio_item input.radio_item_input:checked + .radio_item_name	{background-color: #fff; color: #3d3d3d;	font-weight: 600;}
	
	.input_wrap .b_item_desc						{position:relative; margin: 10px 5px 0px 5px; padding: 10px; width: calc(100% - 30px); color: #EEE; background-color: #ffffff33; font-size: 13px; text-align: left; border-radius: 5px;}
	.input_wrap .b_item_desc .b_item_desc_btn		{position:absolute; bottom:6px; right:10px; padding:5px; border-radius:5px; background-color:#c4782d; font-size:11px; cursor:pointer;}
	.input_wrap .b_option_desc						{position:absolute; bottom: 0px; left: -656px; width: 630px; min-height: 230px; padding: 7px; background-color: #ffffffba; border: 1px solid #d5d1d1; font-size: 12px; text-align: left; line-height: 15px; z-index: 1; backdrop-filter: blur(3px);}
	.input_wrap .b_extra_desc						{position:absolute; bottom: 0px; left: calc(100% + 10px); width: 200px;height: 92px;padding: 7px;background-color: #ffffffba;border: 1px solid #d5d1d1;font-size: 12px;text-align: left;line-height: 15px;z-index: 1;backdrop-filter: blur(3px);}
	
	.input_wrap .payment_qr_layer					{position: absolute; bottom: 50px; left: -390px; z-index: 2; background-color: #FFFFFF; padding: 25px; border: 10px solid #ffe22d; border-radius: 10px;}
	.input_wrap .payment_qr_layer .qr_layer_close	{position:relative;  background-color: #ffe22d; padding: 8px; margin-top: 15px; cursor: pointer;}
	/* 주문신청폼 입력폼 부분 (단순화를 위해 새로 작성코드)  */
	
	
	
	/* -- 입금 출석체크 - 보너스부스터 이벤트 부분 -----------------------------------------------------------------------------------------------------------  */
	/*.chul_box {position: absolute; height: 100%; width: 82px; top: -1px; right: -87px;}*/
	.chul_box {position: absolute; height: 100%; width: 82px; top: -1px; right: -160px; z-index: 1; backdrop-filter: blur(3px);}
	.chul_box .chul_icon img {width: 80px; position: absolute; left: 0; top: -45px;}
	.chul_box ul {margin-top: 45px;}
	.chul_box li {border: 1px solid #eee; width: 70px; height: 60px; line-height: 55px; margin: 4px auto; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.5); color: #ccc; font-size: 35px; font-weight: bold; position: relative; border-radius: 5px; overflow: hidden;}
	.chul_box li font {font-size: 15px;}
	.chul_box li p {position: absolute; font-size: 9px; bottom: 0; left: 0; line-height: 15px; text-align: center; width: 100%; color: #999;}
	.chul_box li b {position: absolute; font-size: 11px; top: 1px; right: 1px; line-height: 17px; color: #999;}
	.chul_box li b img {width: 17px; vertical-align: top;}
	.chul_box li div.num {position: absolute; font-size: 9px; top: 0; left: 3px; line-height: 15px; color: #ccc;}
	.chul_box .chul_desc {position: absolute; top: -40px; left: -30px; cursor: pointer;}
	.chul_box .chul_desc img {width: 30px;}
	.chul_box .chul_desc p {background: #fff; font-size: 11px; padding: 3px 2px; position: absolute; width: 200px; line-height: 1.5em; right: 40px; z-index: 100; top: -3px; border-radius: 5px; display: none;}
	.chul_box .chul_desc p:after {content: "▶"; position: absolute; color: #fff; right: -7px; top: 12px;}
	.chul_box .chul_desc:hover p {display: block;}

	.chul_box li	.half_next {position:absolute; bottom:0px; left:0px; width:70px; height:30px; background: linear-gradient(45deg, rgba(0,255,0,0.3), rgba(255,0,0,0.5), rgba(0,0,255,0.3), rgba(0,255,0,0.3), rgba(255,0,0,0.5), rgba(0,0,255,0.3)); background-size: 600% 600%; animation: input_wrap_anim 10s ease infinite; color: #fff; box-shadow: 0 0 3px 1px rgba(255,255,0,0.5); display:none;}
	
	.chul_box .chul_preTxt		{position:absolute; font-size: 11px; padding: 0px; margin: 0px; top:9px; left:1px; font-weight: lighter; color: #e0d3d3;}
	.chul_box .chul_bonusTxt	{position:absolute; padding: 0px; margin: 0px; top:2px; left:19px; font-size: 28px; letter-spacing: 0px; text-align: center; width: 50px;}

	.chul_box .chulmsg_wrap			{position:relative; display:none;}
	.chul_box .balloon_msg			{position:absolute; top:-50px; left:100px; margin: 0px; width:150px; height:35px; background:#f9fdbf; border-radius: 10px; font-size:11px; line-height:17px; text-align:center; padding:10px 5px;}
	.chul_box .balloon_msg:after	{position:absolute; top:10px; left:-15px; border-top:15px solid #f9fdbf; border-left: 15px solid transparent; border-right: 0px solid transparent; border-bottom: 0px solid transparent; content:"";}
	.chul_box .balloon_msg b		{color:#800; font-weight:bold;}
	.chul_box .balloon_msg .msg1	{display:none;}
	.chul_box .balloon_msg .msg2	{display:none;}

	.chul_box .chulstep_wrap.get li:after				{position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,.5); content: "수령완료"; color: #FFFFFF; text-shadow: 0 0 5px #FFFFFF; font-size: 15px; line-height: 60px;}
	.chul_box .chulstep_wrap.fin li:after				{position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,.5); content: "출석완료"; color: #ffff00; text-shadow: 0 0 5px #ffe400; font-size: 15px; line-height: 60px;}
	.chul_box .chulstep_wrap.next li					{background: linear-gradient(45deg, rgba(0,255,0,0.3), rgba(255,0,0,0.5), rgba(0,0,255,0.3), rgba(0,255,0,0.3), rgba(255,0,0,0.5), rgba(0,0,255,0.3)); background-size: 600% 600%; animation: input_wrap_anim 10s ease infinite; color: #fff; box-shadow: 0 0 3px 1px rgba(255,255,0,0.5);}

	.chul_box .chulstep_wrap.ready 						{cursor:pointer;}
	.chul_box .chulstep_wrap.ready .half_next			{display:block;}
	.chul_box .chulstep_wrap.ready:hover .chulmsg_wrap	{display:block;}
	.chul_box .chulstep_wrap.ready:hover .msg1			{display:block;}

	.chul_box .chulstep_wrap.next 						{cursor:pointer;}
	.chul_box .chulstep_wrap.next:hover .chulmsg_wrap	{display:block;}
	/*.chul_box .chulstep_wrap.next:hover .msg2			{display:block;}*/
	
	/* -- 입금 출석체크 - 보너스부스터 이벤트 부분 -----------------------------------------------------------------------------------------------------------  */
	
	
	
	/* -- 입금 출석체크 - 보너스부스터 이벤트 부분 -----------------------------------------------------------------------------------------------------------  */
	
	.package_depaosit_wrap					{position: absolute; height: 100%; width: 82px; top: -1px; right: -87px; border:none;}
	.package_depaosit_wrap .package_item	{position: relative; width: 72px; height: 62px; background-color: #000000a8; border-radius: 5px; border: 1px solid #efefef; margin-bottom: 5px; color:#EEE; cursor:pointer;}
		.package_item .package_item_title	{position:absolute; top:5px; left:5px; font-size:10px;}
		.package_item .package_item_price	{position:absolute; top:20px; left:0px; width:72px; text-align:center; font-size:16px; }
		.package_item .package_item_bonus	{position:absolute; bottom:5px; right:5px; font-size:14px; }
	
	
		.package_depaosit_wrap .package_details		{position: absolute; top:192px; left:-340px; width:318px; height:120px; background-color:#101010; border:1px solid #aaa; z-index:10; color:#FFF; display:none;}
	
		.package_details .package_details_title		{position: absolute; top:7px; left:7px; font-size:13px;}
		.package_details .package_details_item		{position: absolute; top:35px; left:0px; font-size:27px; width:315px; text-align:center;}
		.package_details .package_details_desc		{position: absolute; top:72px; left:0px; font-size:12px; width:315px; text-align:center;}
		.package_details .package_details_cancel	{position: absolute; bottom:10px; right:10px; font-size:10px; cursor:pointer; background-color:#fffdb8; color:#000; padding:3px 8px; border-radius:10px;}
	
	.package_for_live, .package_for_slot			{display:none;}
	/* -- 입금 출석체크 - 보너스부스터 이벤트 부분 -----------------------------------------------------------------------------------------------------------  */
	
	
    .input_span *, .input_span *:after, .input_span *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }


    .input_span {
        position: relative;
        z-index: 1;
        display: inline-block;
        margin: .9em;
        max-width: 350px;
        width: calc(100% - 2em);
        vertical-align: top;
        font-size: 100%;
    }
	
	.input_span .input_span__btn{
        position: relative;
        z-index: 1;
        display: inline-block;
		font-size:12px;
		padding:5px;
		border-radius: 5px;
		border:1px solid #ffffff;
		background-color: #FFFFFF50;
		
	}
	
    .input__label {
        display: inline-block;
        color: #fff;
        font-weight: bold;
        font-size: 70.25%;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        padding: 0;
        width: 100%;
        position: absolute;
        text-align: left;
        bottom: 0;
        left: 0;
        pointer-events: none;
        height: 100%;
    }
    .sel__label {opacity: 0;}

    .input__label-content {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        padding: 1.5em 1em;
    }


    .input__label::after {
        content: '';
        position: absolute;
        top: 0;
        z-index: -1;
        width: 100%;
        height: 4em;
        box-shadow: 0px 0px 0px 0px;
        color: rgba(199,152,157, 0.6);
    }


    .input__field {
        position: relative;
        display: block;
        float: right;
        padding: 0.8em;
        border: none;
        border-radius: 0;
        font-weight: bold;
		text-align: left;
        -webkit-appearance: none;
        width: 100%;
        background: rgba(0,0,0,.7);
        box-shadow: 0px 0px 0px 2px transparent;
        color: #fff;
        border: 1px solid #aaa;
        -webkit-transition: box-shadow 0.3s;
        transition: box-shadow 0.3s;
    }
    select.input__field {height: 3.4em;}


    .input__field:focus {
        outline: none;
        box-shadow: 0px 0px 0px 2px rgba(0,0,0,.7);
    }

    .input__field:focus + .input__label {
        pointer-events: none;
        color: #fff;
    }
    .input--filled .sel__label,
    .input__field:focus + .sel__label {
        opacity: 1;
        color: #fff;
    }

    .input__field:focus + .input__label::after {
        -webkit-animation: anim-shadow 0.3s forwards;
        animation: anim-shadow 0.3s forwards;
    }
                
    .input__field:focus + .input__label .input__label-content,
    .input--filled .input__label-content {
        -webkit-animation: anim-1 0.3s forwards;
        animation: anim-1 0.3s forwards;
        color: #fff;
    }


    section.input_cont {overflow: auto; height: 300px;}
    
    .input_span .sub_btn {
        position: absolute;
        /* width: 50px; */
        padding: 0 5px;
        line-height: 2em;
        font-size: 13px;
        height: 60%;
        color: #fff;
        background: #d54649;
        right: 2.5%;
        top: 20%;
        border: 1px solid transparent;
        cursor: pointer;
    }
    .input_span .sub_btn.clr2 {background: #009800;}


    .my_acc {position: absolute; width: 150px; right: 0; background: rgba(0,0,0,0.5); border: 1px solid #555; text-align: center; padding: .3em 0; display: none;}
    .my_acc select, .my_acc input {
        font-size: 13px;
        position: relative;
        display: block;
        padding: 0.5em;
        font-weight: bold;
        width: 90%;
        background: rgba(0,0,0,.7);
        box-shadow: 0px 0px 0px 2px transparent;
        color: #fff;
        border: 1px solid #aaa;
        margin: 3px auto;
        outline: none;
    }
    .my_acc select {padding: 0.5em; font-size: 13px;}
    .my_acc .sub_btn {position: relative; display: inline-block; right: 0; width: 44%;}




    .input_btn {
        background: rgba(255,0,0,0.8);
        border: 1px solid #940000;
        color: #fff;
        width: 50%;
        margin: 5px auto 0 auto;
        line-height: 40px;
        cursor: pointer;
        transition: all .3s ease;
    }
    .input_btn:hover {
        background: rgba(0,200,0,0.8);
        border: 1px solid #009407;
        transition: all .3s ease;
    }
    
    @-webkit-keyframes anim-shadow {
        to {
            box-shadow: 0px 0px 100px 10px;
            opacity: 0;
        }
    }

    @keyframes anim-shadow {
        to {
            box-shadow: 0px 0px 100px 10px;
            opacity: 0;
        }
    }
    
    @keyframes anim-1 {
        50% {
            opacity: 0;
            -webkit-transform: translate3d(1em, 0, 0);
            transform: translate3d(1em, 0, 0);
        }
        51% {
            opacity: 0;
            -webkit-transform: translate3d(-1em, -75%, 0);
            transform: translate3d(-1em, -75%, 0);
        }
        100% {
            opacity: 1;
            -webkit-transform: translate3d(-1em, -75%, 0);
            transform: translate3d(-1em, -75%, 0);
        }
    }



    .input_wrap .queue {width: 70%; border: 1px dashed #fff; color: #fff; font-size: 100px; margin: 0 auto; padding: 10px 0; font-weight: bold; text-shadow: 0 0 5px #000; background: rgba(255,255,255,0.3);}
    .input_wrap .queue font {font-size: 13px; display: block;}
    .input_wrap table {width:85%; margin: 20px auto;}
    .input_wrap table td {padding: 15px 10px;text-align:center;border:1px solid #d9dbdb;font-size:12px; color: #fff; background: rgba(0,0,0,0.7);}
    .input_wrap table td:last-child {font-size: 15px; font-weight: bold;}
    .input_wrap table tr.cs td {color: #f4e388;}


    .input_span textarea {
        position: relative;
        display: block;
        float: right;
        padding: 0.8em;
        border: none;
        border-radius: 0;
        font-weight: normal;
        -webkit-appearance: none;
        width: 100%;
        background: rgba(0,0,0,.7);
        box-shadow: 0px 0px 0px 2px transparent;
        color: #fff;
        border: 1px solid #aaa;
        -webkit-transition: box-shadow 0.3s;
        transition: box-shadow 0.3s;
        outline: none;
        height: 130px;
		line-height:23px;
    }
    .event_cont .input__label {
        opacity: 1;
        -webkit-transform: translate3d(-1em, -26%, 0);
        transform: translate3d(-1em, -26%, 0);
    }


    /* 회원가입 */
    .phone .input__field {width: 32%; display: inline-block; float: left; margin-right: 6px;}
    .phone .input__field.last_digit {margin-right: 0 !important;}


    /* center_popup */
    .center_popup {background: rgba(0,0,0,0.7); width: 100%; height: 100%; position: fixed; z-index: -1; opacity: 0; transition: all .3s ease; top: 0;}
    .center_popup.active {z-index: 1000; opacity: 1; transition: all .3s ease;}
    .center_popup .cp_box {width: 400px; height: 300px; position: absolute; top: 0; left: calc(50% - 200px); transition: all .3s ease;}
    .center_popup.active .cp_box {top: calc(50% - 150px); transition: all .3s ease;}
    .center_popup .cp_box[name='search'] {width: 600px; height: 400px; left: calc(50% - 300px); top: calc(50% - 200px); background-color: rgba(0,0,0,.3);}


        /* 로그인 */
    .center_popup .cp_box .logo {
        width: 300px;
        height: 200px;
        background-image : url(/img/logo.png);
        animation: ani_logo 3s steps(90) infinite;
        transform: scale(1);
        position: relative;
        top: -15px;
        margin: 0 auto;
    }
    .center_popup .cp_box .login_wrap {margin-top: -40px; position: relative; z-index: 100;}
    .center_popup .cp_box .userpw,
    .center_popup .cp_box .userid {width: 41%; margin: 0 auto; height: 45px; margin-bottom: 3px; border: 1px solid #555; background: rgba(0,0,0,0.5);}
    .center_popup .cp_box .login_wrap .btn_set {margin: 3px -5px 0 -5px;}

    /* center_popup */
    .center_popup.notice_pop {background: rgba(0,0,0,0.7); backdrop-filter: blur(5px); width: 100%; height: 100%; position: fixed; z-index: -1; opacity: 0; transition: all .3s ease; top: 0;}
    .center_popup.notice_pop.active {z-index: 1000; opacity: 1; transition: all .3s ease;}
    .center_popup.notice_pop .cp_box {width: 1040px; height: 500px; position: absolute; top: 0; left: calc(50% - 520px); transition: all .3s ease;}
    .center_popup.notice_pop.active .cp_box {top: calc(50% - 260px); transition: all .3s ease;}
	.center_popup.notice_pop.active .warning_cont	{height: 370px;}
        /* 긴급공지 */
    .warning_wrap {width: 100%; height: 100%; background: #fff;}
    .warning_head {background: #000; color: #fff; line-height: 50px; font-size: 20px; font-weight: bold; position: relative; }
    .warning_head:before {position: absolute; content: "▼"; height: 20px; width: 20px; font-size: 30px; color: #000; bottom: 5px; left: 50px;}
    .warning_head img {height: 30px; position: relative; top: 8px; right: 8px;}
    .warning_title {height: 55px; border-bottom: 1px solid #ccc; display: flex; align-items: center; padding: 3px 10px; line-height: 1.5em; text-align: left; word-break: break-all; overflow: auto; }
    .warning_cont {text-align: left; padding: 10px; word-break: break-all; overflow: auto; height: 168px; line-height: 1.2em;}

    .warning_wrap .todayclose {position: absolute; color: #fff; z-index: 10; font-size: 10px; top: 5px; left: 5px; cursor: pointer;}

        /* 게임검색 */
    .search_box_title {position: relative; margin: 30px auto; width: 80%;}
    .search_box_title input {width: calc(100% - 20px); height: 50px; background: #000; border-radius: 5px; padding: 0 10px; color: #fff; border: 1px solid #555}
    .search_box_title .icon_search {margin: 0; display: inline-block; right: 7px; top: 7px; cursor: pointer;}

    .search_box_cont {overflow: auto; height: 288px;}
    .search_box_cont li {width: 45%; display: inline-block; text-align: left; margin-bottom: 20px;}
    .search_box_cont li:hover div {color: #dbc24f; cursor: pointer;}
    .search_box_cont li img {height: 75px;}
    .search_box_cont li div {height: 75px; display: inline-block; vertical-align: top; color: #fff; word-break: break-all; width: calc(100% - 80px); padding-left: 5px;}
    .search_box_cont li div b {display: block; text-transform: uppercase; font-size: 11px; margin-bottom: 5px;}
    .search_box_cont li div span {font-size: 15px;}




        /* 마이페이지 */
    .center_popup .cp_box[name='mypage'] {width: 700px; height: 500px; left: calc(50% - 400px); top: calc(50% - 250px); background: rgba(0,0,0,.3);}
    .mypage .menu {height: 500px; float: left; position: relative; background: #000; width: 70px;}
    .menu li {background: #000; height: 5em; line-height: 5em; font-size: 13px; width: 50px; border-bottom: 1px solid #555; transition: all .3s ease; text-align: left; padding-left: 20px; cursor: pointer;}
    .menu li > div {display: inline-block; vertical-align: middle; }
    .menu li .icon {width: 30px; height: 30px; margin-right: 5px;}
    .menu li.settings .icon {background: url('/img/icon/settings.svg') no-repeat; background-size: cover;}
    .menu li.coins .icon {background: url('/img/icon/coins.svg') no-repeat; background-size: cover;}
    .menu li.mail .icon {background: url('/img/icon/mail.svg') no-repeat; background-size: cover;}
    .menu li.coupon .icon {background: url('/img/icon/coupon.svg') no-repeat; background-size: cover;}
    .menu li.vip .icon {background: url('/img/icon/vip.svg') no-repeat; background-size: cover;}
    .menu li.vpoint .icon {background: url('/img/icon/vpoint.svg') no-repeat; background-size: cover;}
    .menu li.wheel .icon {background: url('/img/icon/wheel.svg') no-repeat; background-size: cover;}

    .menu li.active {background: #d54649;}
    .menu li:hover {width: 100px; transition: all .3s ease; border-color: #fff; background: #d54649;}
    .menu li .text {opacity: 0; width: 50px; position: absolute; transition: all .3s ease; left: 0; color: #d54649;}
    .menu li:hover .text {opacity: 1; transition: all .3s ease; left: 60px; color: #fff;}

    .mypage .cont {width: calc(100% - 70px); height: 480px; overflow: auto; padding: 10px 0; background: #fff;}
    .mypage .cont .input_span {max-width: 500px;}

    .mypage .cont .mypage_input {padding: 20px 0;}

    .mypage .input__field:focus + .input__label .input__label-content, 
    .mypage .input--filled .input__label-content {color: #000;}

    .mypage .input__field:disabled {background: #000;}

    .cp_box[name='mypage'] .closeBtn {background: url(/img/icon/close_black.svg); background-size: cover;}
    
    table.mypage {width:90%; margin: 20px auto 10px auto;}
    table.mypage th {background: #333; color: #fff; font-size: 13px; line-height: 30px; border:1px solid #000; }
    table.mypage td {padding: 15px 10px; text-align:center; border:1px solid #ccc; font-size:13px; color: #000; background: #f9f9f9; word-break: break-all;}
    table.mypage tr:nth-child(2n) td {background: #eee;}

    table.mypage tr:hover {cursor: pointer;}
    table.mypage tr:hover td {border-bottom: 1px solid #d54649}

    table.coins td:nth-child(1) {color: #000;}
    table.coins td:nth-child(2) {font-size: 13px; font-weight: bold;}
    table.coins td:nth-child(3) {font-size: 11px; color: #555;}
    table.coins td.add:nth-child(2) {color: #d54649;}
    table.coins td.used:nth-child(2) {color: #4679d5;}
    
    table.coupon .useBtn {background: #d54649; color: #fff; padding: 7px 10px; font-size: 11px; cursor: pointer; transition: all .3s ease;}
    table.coupon .useBtn:hover{background: #009800; transition: all .3s ease;}
    table.coupon .useBtn.used {cursor:default; background: #52191a;}

    
        /* 공지사항 */
    .center_popup .cp_box[name='notice'] {width: 700px; height: 500px; left: calc(50% - 400px); top: calc(50% - 250px); background: #fff;}

    table.notice td:nth-child(1) {color: #000; text-align: left;}
    table.notice td:nth-child(2) {font-size: 11px; color: #555;}
    table.notice th {background: #d54649; border: 1px solid #961a1c;}
    table.notice.view th {background: #f9f9f9; color: #961a1c; font-weight: bold;}
    table.notice.view tr:hover {cursor: default;}
    table.notice.view tr:hover td {border-bottom: 1px solid #961a1c}
    table.notice.view td {height: 300px; text-align: left; line-height: 2em; border: 1px solid #961a1c;}

    section.notice {height: 500px; overflow: auto;}
    section.notice .title {background: #000; height: 45px; line-height: 45px; text-align: center; color: #fff; font-weight: bold; font-size: 15px;}
    section.notice .title .icon {width: 30px; height: 30px; margin-right: 10px; background: url('/img/icon/notice.svg') no-repeat; background-size: cover; display: inline-block; vertical-align: middle;}
    section.notice .btn {background: #d54649; color: #fff; padding: 15px; font-size: 13px; cursor: pointer; transition: all .3s ease; width: 20%; margin: 0 auto;}
    section.notice .btn:hover{background: #009800; transition: all .3s ease;}


    /* IE */
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        .input__field:focus + .input__label .input__label-content,
        .input--filled .input__label-content {
            top: 40px;
        }
        .input_wrap table td {padding: 10px;}
    }
    @supports (-ms-accelerator:true) {
        .input__field:focus + .input__label .input__label-content,
        .input--filled .input__label-content {
            top: 40px;
        }
        .input_wrap table td {padding: 10px;}
    }


	.cover_input		{display:none; padding:0.8em; margin:0px; width:100%; min-height:46px; border:1px solid #aaa; background-color:#000000b3; color: #EEE; text-align:left;}
	
.radio-inputs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  background-color:#000000b3;
  border:1px solid #aaa;
  box-sizing: border-box;
  padding: 0.6em;
  width: 100%;
  font-size: 14px;
}

.radio-inputs .radio {
  flex: 1 1 auto;
  text-align: center;
}

.radio-inputs .radio input {
  display: none;
}

.radio-inputs .radio .name {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 0.2rem;
  border: none;
  padding: .5rem 0;
  color: #b9b9b9;
  transition: all .15s ease-in-out;
}

.radio-inputs .radio input:checked + .name {
  background-color: #fff;
  color: #3d3d3d;	
  font-weight: 600;
}

/* radio style */
.radio-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.radio-tile-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.radio-tile-group .input-container {
  position: relative;
  height: 80px;
  width: 80px;
  margin: 0.5rem;
}

.radio-tile-group .input-container .radio-button {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  margin: 0;
  cursor: pointer;
}

.radio-tile-group .input-container .radio-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 2px solid #079ad9;
  border-radius: 5px;
  padding: 1rem;
  transition: transform 300ms ease;
}

.radio-tile-group .input-container .icon svg {
  fill: #079ad9;
  width: 2rem;
  height: 2rem;
}

.radio-tile-group .input-container .radio-tile-label {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #079ad9;
}

.radio-tile-group .input-container .radio-button:checked + .radio-tile {
  background-color: #079ad9;
  border: 2px solid #079ad9;
  color: white;
  transform: scale(1.1, 1.1);
}

.radio-tile-group .input-container .radio-button:checked + .radio-tile .icon svg {
  fill: white;
  background-color: #079ad9;
}

.radio-tile-group .input-container .radio-button:checked + .radio-tile .radio-tile-label {
  color: white;
  background-color: #079ad9;
}


.fin_ext_btn		{width: 50px; height: 20px; vertical-align: bottom; line-height: 15px; cursor: pointer;}