@charset "utf-8";

body {position: relative;-webkit-overflow-scrolling: touch;}
body.sunrise-fixed {overflow:hidden;}

.sunrise-outer {position:fixed;top:-1px;left:-1px;width:calc(100vw + 2px);height:calc(100vh + 2px);z-index:99;background-color:rgba(0,0,0,0.6);transform:translateZ(0);}
.sunrise-scrll {position:relative;width:100vw;height:90vh;overflow:auto;}
.sunrise-inner {display:flex;flex-direction:row;position:relative;min-width:100%;min-height:100%;cursor:url(../img/close_23x23_white.png), pointer;}
.sunrise-scene {position:relative;width:100%;margin:auto;padding:40px 20px;cursor:url(../img/close_23x23_white.png), pointer;}
.sunrise-frame {display:block;position:relative;width:100%;overflow:hidden;opacity:0;transform:translateY(50px);cursor:default;transition:opacity 500ms, transform 500ms;}
.sunrise-outer.sunrise-visible .sunrise-frame {opacity:1;transform:translateY(0);}

.sunrise-outer.cursor-default .sunrise-inner {cursor:default;}
.sunrise-outer.cursor-default .sunrise-scene {cursor:default;}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    /* IE 10, IE 11 */
    .sunrise-inner {display:table;width:100%;height:100%;}
    .sunrise-scene {display: table-cell;vertical-align:middle;text-align:center;}
    .sunrise-frame {display: inline-block;text-align:left;}
}


.modal {width:100%;max-width:900px;margin:0 auto;padding:15px;background-image: linear-gradient(#2c3f62, #16232f);border:solid 1px #8395ab;border-radius:20px;box-shadow:0 0 20px rgba(0,0,0,0.4);}
.modal.modal_wide {max-width:1300px;}


.modal_header {display:block;position:relative;margin:0 0 5px 0;background-color:rgba(0, 0, 0, 0.5);background-image: linear-gradient(#44689f, #2a4e86);border:none;border-radius:10px;}
.modal_header:before,
.modal_header:after {display:block;position:absolute;content:'';left:0;right:0;top:1px;bottom:0;width:calc(100% - 2px);height:calc(100% - 2px);margin:0 auto;border-radius:10px;}
.modal_header:before {box-shadow:inset 0 2px 5px rgba(0, 0, 0, 0.5);background-color:rgba(0, 0, 0, 0.5);}
.modal_header:after {top:2px;bottom:auto;width:calc(100% - 10px);height:50%;background-image:linear-gradient(rgba(255, 206, 164, 0), rgba(255, 206, 164, 0), rgba(255, 206, 164, 0.05));}
.modal_header .title {display:block;position:relative;width:100%;height:60px;padding:0 20px;color:#f0df85;font-size:18px;line-height:60px;font-weight:400;text-shadow:0 1px 2px rgba(0, 0, 0, 1.0), 0 0 15px rgba(222, 149, 0, 0.4);z-index:1;}
.modal_header .title i {margin:0 10px 0 0;font-size:28px;vertical-align:middle;}

.modal .btn_close {display:block;position:absolute;right:20px;top:0;bottom:0;width:34px;height:34px;margin:auto 0;background:none;border:none;border-radius:50%;z-index:9;}
.modal .btn_close:before,
.modal .btn_close:after {display:block;position:absolute;content:'';left:0;right:0;top:0;bottom:0;width:1px;height:100%;margin:0 auto;background-color:#ffce00;transition:0.3s;}
.modal .btn_close:before {transform:rotate(-45deg);}
.modal .btn_close:after {transform:rotate(45deg);}
.modal .btn_close:hover:before {transform:rotate(-135deg);background-color:#ff4a4a;}
.modal .btn_close:hover:after {transform:rotate(-45deg);background-color:#ff4a4a;}

.modal .modal_title {display:block;position:relative;margin:20px 0;text-align:center;z-index:1;}
.modal .modal_title:before {content:attr(data-text);display:inline-block;position:absolute;left:0;top:0;right:0;margin:0 auto;background:0 0;z-index:-1;}
.modal .modal_title .title {position:relative;font-size:30px;font-family:GmarketSansBold;white-space:nowrap;
-webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-image: -webkit-linear-gradient(#a57f52, #fee0b3, #a57f52);
background-size: 100% 100%;
}
.modal .modal_title .title:before {content:attr(data-text);display:inline-block;position:absolute;background:0 0;z-index:-1;text-shadow: 0 2px 1px rgba(0, 0, 0, 0.5);}

.modal_footer {display:flex !important;align-items:center;align-content: center;justify-content: center;width:100%;margin: 25px -4px 0;padding:0;text-align:center;border:none;}
.modal_footer button {width:100%;max-width:180px;height:48px;margin:0 4px;border-radius:5px;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);}


.modal_menu {flex-wrap:nowrap;width:100%;height:100%;}
.modal_menu:after {display:block;visibility:hidden;clear:both;content:""}
.modal_menu button {float:left;position:relative;width:100%;max-width:160px;color: rgba(255, 255, 255, 0.5);font-size:18px;line-height:60px;background-color:transparent;border:none;z-index:1;}
.modal_menu button:hover {color:rgba(255, 255, 255, 1.0);}
.modal_menu button.on {color:#f0df85;font-weight:700;text-shadow:0 1px 2px rgba(0, 0, 0, 1.0), 0 0 15px rgba(222, 149, 0, 0.4);}
.modal_menu button:before,
.modal_menu button:after {content:'';display:block;position:absolute;top:50%;width:1px;height:100%;transform:translateY(-50%);}
.modal_menu button:before {left:0;background-image:linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));}
.modal_menu button:first-child:before {display:none;}
.modal_menu button:after {right:0;background-image:linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0));}
.modal_menu button:last-child:after {display:none;}
.modal_menu button i {margin:0 10px 0 0;font-size:28px;vertical-align:middle;}


.modal_nav {width:100%;flex-wrap:nowrap;margin:5px 0 0 0;padding:5px 3px;font-size:0;line-height:0;background-color:rgba(0, 0, 0, 0.25);border:solid 1px rgba(255, 255, 255, 0.1);border-radius:5px;}
.modal_nav button {width:100%;height:40px;margin:0 2px;color:rgba(255, 255, 255, 0.75);font-size:14px;background-color:#4b5a6a;border:none;border-radius:5px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis; 
-o-text-overflow:ellipsis;
-moz-binding: url('ellipsis.xml#ellipsis');
}
.modal_nav button:hover {color:#fff;background-color:#2a5889;}
.modal_nav button.on {color:#fff;color:#fff;text-shadow:0 1px 0 rgba(0, 0, 0, 0.5);background-image:linear-gradient(#c59065, #865834);}
.modal_nav button:last-child {border-right:none;}

.gamelist_modal .modal_nav {flex-wrap:wrap;padding:3px;}
.gamelist_modal .modal_nav button {width:calc(11.11% - 2px);margin:1px;}

.normal_modal .modal_nav {flex-wrap:wrap;padding:3px;}
.normal_modal .modal_nav button {width:calc(16.66% - 2px);margin:1px;}

.modal_info {margin:0 0 10px 0;padding:12px 20px;color:#febf00;font-size:16px;font-weight:900;text-align:center;background:#182336;border-radius:10px;}

.modal table a:hover {color:#f6c971;}

.scroll_panel {width:100%;height:622px;font-size:0;line-height:0;overflow-y:scroll;}
.scroll_panel2 {width:100%;height:622px;overflow-y:scroll;}

table {width:100%;border-collapse:collapse;border-spacing:0 5px;}
table tr, table tr {cursor:pointer;}
tr:hover .list_notice1,
tr:hover .list_notice2 {background-color:rgba(0, 0, 0, 0.15);}
table a {color:#fff}
table td {padding:0 10px;}

table .nav_td {width:40px;}

table.with-depth tr td .btn_delete {color:#fff;font-size:12px;background-color:transparent;border:none;transition:0.3s;}
table.with-depth tr td .btn_delete:hover {color:var(--yellow);}
table.with-depth tr td .btn_nav {position:relative;background-color:transparent;border:none;}
table.with-depth tr td .btn_nav i {position:relative;color:#fff;font-size:10px;font-size:10px;transition:0.3s;transform:rotate(0deg);}
table.with-depth tr td .btn_nav:hover i {color:#d6391b;}
table.with-depth tr.active td .btn_nav i {top:5px;transform:rotate(180deg);}
table.with-depth tr td .btn_plus {display:inline-block;position:relative;width:16px;height:16px;padding:0;color:#fff;font-size:12px;background-color:#c33922;border:none;border-radius:50%;vertical-align:middle;}
table.with-depth tr td .btn_plus:hover {background-color:#d6391b;}
table.with-depth tr td .btn_plus:before,
table.with-depth tr td .btn_plus:after {content: '';position:absolute;left:0;right:0;top:25%;bottom:0;width:2px;height:50%;margin:0 auto;background-color:#fff;transition:0.3s;}
table.with-depth tr td .btn_plus:after {transform:rotate(90deg);}
table.with-depth tr.active td .btn_plus:before {height:0;}

.with-depth .message_content {display:none;height:200px;margin:2px 0 5px;padding:20px;background:#000;}
.with-depth tr.depth_click {cursor:pointer;}
.with-depth tr.dropdown {background-color:transparent;}
.with-depth tr.dropdown td {height:auto;padding:0;background-color:transparent;border:none;}
.with-depth tr.dropdown:hover td {background-color:transparent;border:none;}

.list_title1 {height:40px;color:#fff;font-size:14px;text-align:center;font-weight:bold;background:linear-gradient(#707a85,  #464f58);}

.list1 {height:50px;font-size:12px;font-weight:400;letter-spacing:-1px;text-align:center;background:rgba(0,0,0,0.25);border-top:solid 1px rgba(255,255,255,0.05);border-bottom:solid 1px rgba(0,0,0,0.25);}
.list2 {padding:0 0 0 15px;font-size:12px;letter-spacing:-1px;font-weight:400;font-weight:bold;line-height:40px;background:rgba(0,0,0,0.25);border-top:solid 1px rgba(255,255,255,0.05);border-bottom:solid 1px rgba(0,0,0,0.25);}

.pagination {}
.pagination ul {text-align:center;}
.pagination ul:after {display:block;visibility:hidden;clear:both;content:""}
.pagination li {display:inline-block;}
.pagination li a {display:flex;position:relative;width:32px;height:32px;overflow:hidden;margin:0 3px;color:#fff;font-size:14px;align-items:center;justify-content:center;text-decoration:none;background-color:rgba(0, 0, 0, 0.25);border:1px solid rgba(255, 255, 255, 0.15);border-radius:5px;z-index:1;transition:0.3s;}
.pagination .turn_pg a {margin:0 13px;color:#888;background-color:rgba(255, 255, 255, 0);border:none;box-shadow:none;}
.pagination li a:hover {background-color:#7f5e57;}
.pagination .turn_pg a:hover {color:#feda2a;background-color:rgba(255, 255, 255, 0);}
.pagination .active {background-color:#a88155;border-color:#a88155;background-image:linear-gradient(#a88155, #654836);text-shadow:0 1px 0 rgba(0, 0, 0, 0.5);}
.pagination .active:hover {background-color:#cb3030;border-color:#a23c3c;}


.level_information {width:100%;margin:15px 0 10px 0;}
.level_information:after {display:block;visibility:hidden;clear:both;content:""}
.level_information ul {float:left;width:calc(100% - 310px);margin:0;padding:0;}
.level_information ul:after {display:block;visibility:hidden;clear:both;content:""}
.level_information ul li {display:block;float:left;width:calc(50% - 10px);height:40px;line-height:38px;text-align:center;margin-right:10px;background-color:rgba(0, 0, 0, 0.25);border:solid 1px rgba(255, 255, 255, 0.15);text-shadow:0 1px 0 rgba(0, 0, 0, 1.0);border-radius:5px;}
.level_information ul li .labels {margin-right:10px;}
.level_information .point_form {float:left;position:relative;width:310px;height:100%;border-radius:0;}
.level_information .point_form input {width:calc( 100% - 115px);height:38px;margin-right:3px;padding:0 5px;color:#000;font-size:12px;background-color:#fff;border:none;border-radius:3px;}
.level_information .point_form input::-webkit-input-placeholder {color:#333;}
.level_information .btn_point {width:100px;height:38px;font-size:12px;white-space:nowrap;border-radius:3px;box-shadow:none;box-shadow:none;}


.view1 {width:100%;height:50px;padding:0 20px 0 20px;color:#fff;font-size:12px;font-weight:700;letter-spacing:-1px;text-align:left;line-height:50px;background:rgba(0,0,0,0.5); }
.view2 {width:100%;padding:12px 20px 10px 20px;font-size:12px;letter-spacing:-1px;font-weight:700;text-align:left;line-height:26px;background:rgba(0,0,0,0.3);}
.view2 p {margin:0;}

.view_box {display: inline-block;margin:0 5px 0 0;padding:5px 8px 3px 8px;color:#fff;font-size:12px;font-weight:100;text-align:center;background:#7a5e46;border:solid 1px rgba(255, 255, 255, 0.1);border-radius:5px;}

.modal_notice {width:100%;max-width:700px;margin:0 auto 10px auto;}
.modal_notice .title {color:#ead0a8;font-size:14px;margin:4px 0 12px;font-family:GmarketSansBold;text-align:center;}
.modal_notice .notice_panel {padding:20px;text-align:left;line-height:160%;background-color:rgba(0, 0, 0, 0.3);border:1px solid #3c4e67;border-radius:8px;}

.rem_text {display:inline-block;width:100%;margin:15px 0 0 0;color:#aa9387;font-size:12px;text-align:center;}
.rem_text i {margin-right:5px;color:#ff6544;font-size:14px;} 

.form_wrap .btn_grp {display:block;width:100%;margin:10px -1px 0;}
.form_wrap .btn_grp:after {display:block;visibility:hidden;clear:both;content:""}
.form_wrap .btn_grp button {display:block;float:left;width:calc(14.28% - 4px);height:35px;margin:0 2px;box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);border-radius:5px;}





@media screen and (max-width:960px) {
.sunrise-scene {height:calc(100vh - 112px);margin:112px 0 0 0;padding:0;}
.modal {border:none;border-radius:0;}

.gamelist_modal .modal_nav button {width:calc(14.28% - 2px);}
}




@media screen and (max-width:767px) {
.modal_header .title {font-size:18px;}
.modal_header .title i {font-size:24px;}

.modal_menu button {width:140px;font-size:18px;}
.modal_menu button i {font-size:24px;}


.modal_nav {flex-wrap: wrap;padding:5px 3px 2px;}
.modal_nav button {width:calc(25% - 4px);margin:0 2px 3px;}
.gamelist_modal .modal_nav button {width:calc(16.66% - 2px);}

.normal_modal .modal_nav button {width:calc(33.33% - 4px);margin:0 2px 3px;}


.level_information {height:auto !important;padding: 5px 0 !important;}
.level_information ul {width:100%;}
.level_information ul li {width:calc(50% - 3px);height: 40px;margin-right:6px;}
.level_information ul li:last-child {margin-right:0;}
.level_information ul li .labels {margin-right:10px;}
.level_information .point_form {width:100%;margin: 5px 0 0;}
}





@media screen and (max-width: 660px){ 
.gamelist_modal .modal_nav button {width: calc(20% - 2px);font-size:12px;font-size:12px;}
}




@media screen and (max-width:500px) {
.modal_header .title {height:52px;font-size:14px;line-height:52px;}
.modal_header .title i {margin:0 4px 0 0;font-size:20px;}

.modal .btn_close {right:10px;}

.modal_menu {width:calc(100% - 44px);margin-right:auto;}
.modal_menu button {width:50%;height:52px;font-size:14px;line-height:52px;}
.modal_menu button i {margin:0 4px 0 0;font-size:20px;}

.modal_nav {flex-wrap:wrap;padding:2px 1px 0;}
.modal_nav button {width:calc(25% - 2px);height:35px;margin:0 1px 2px;font-size:12px;white-space:nowrap;}

.modal_info {font-size:12px;}

table a {display:inline-block;max-width:90%;max-width:180px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;vertical-align:middle;transition:0.3s;}

.list_title1 {font-size:12px;}

.view1 {padding:0 10px;}
.view2 {padding:10px;}

.modal_title {margin:15px 0 0;}
.modal_title .title {font-size: 24px;}


.form_wrap .btn_grp {justify-content:flex-start;}
.form_wrap .btn_grp button {width:calc(25% - 4px);margin-bottom:4px;}
.form_wrap .btn_grp button:last-child {width:calc(50% - 4px);}
}




@media screen and (max-width: 414px){ 
.modal_menu button {font-size:14px;}
.modal_menu button i {font-size:16px;}

.modal_notice .title {font-size:12px;}
.modal_notice .notice_panel {padding:15px;}
.modal_notice .notice_panel br {display:none;}
}




@media screen and (max-width: 360px){ 
.gamelist_modal .modal_nav button {font-size:10px;}
}