html {font-size: 12px;}
body {}

.ico_badge{position:relative;color: initial !important;font-size: initial !important;}
.ico_badge .count{position:absolute;right:-4px;top:-4px;width: 12px;height:12px;color:#fff;font-size: 10px;line-height: 12px;text-align:center;font-weight:700;/* background-color:#f00; */text-shadow:none;border-radius: 50%;display:flex;align-items: center;justify-content: center;}
[id*='app'] .count{right:-10px;}

.arrow {width: 14px;float: right;text-align: right;}
.fa.arrow:before {content: "\f104";}
.active>a>.fa.arrow:before {content: "\f107";}
.txt_l{text-align:left !important;}
.txt_r{text-align:right !important;}
.txt_c{text-align:center !important;}

.go_top { position: fixed; bottom: 65px; z-index: 101; left: 50%; transform: translate(-50%, 0px); }

.btnWrap{text-align: center;}
.btn {display: inline-block;margin-bottom: 0;font-weight: normal;text-align: center;vertical-align: middle;touch-action: manipulation;cursor: pointer;background-image: none;color:#393939;border: 1px solid #d0d0d0;white-space: nowrap;padding: 8px 20px;font-size: 12px;line-height: 1.42857143;border-radius: 4px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;border-radius: 4px;}
.btn-large {width: 240px;margin: 0 auto;border-radius: 6px;font-size: 16px;line-height: 2.5;padding: 4px 10px;}
.btn-xs {border-radius: 3px;font-size: 11px;line-height: 1.5;padding: 1px 7px;}
.btn-sm, .btn-group-sm>.btn {padding: 5px 10px;font-size: 11px;line-height: 1.5;border-radius: 3px;}
.btn-primary, .btn-primary:hover {color: #fff;background-color:#e55;border-color:#e55;}
.btn-warning {background-color: #ffb606;border-color: #ffb606;color: #fff;}
.btn-warning2 {background-color: #e67e22;border-color: #e67e22;color: #fff;}
.btn-pink {background-color: #ff2c67;border-color: #ff2c67;color: #fff;}
.btn-pink:hover, .btn-pink:focus, .btn-pink:active, .btn-pink.active, .open .dropdown-toggle.btn-pink {background-color: #ff4679;border-color: #ff4679;color: #fff;}
.btn-blue {background-color: #027fe9;border-color: #027fe9;color: #fff;}
.btn-blue:hover, .btn-blue:focus, .btn-blue:active, .btn-blue.active, .open .dropdown-toggle.btn-blue {background-color: #027fe9;border-color: #027fe9;color: #fff;}
.btn-gray {background-color: #3d3d3d;border-color: #3d3d3d;color: #fff;}
.btn-gray:hover, .btn-gray:focus, .btn-gray:active, .btn-gray.active, .open .dropdown-toggle.btn-gray {background-color: #3d3d3d;border-color: #3d3d3d;color: #fff;}
.btn.btn-outline {background-color: #fff;}
.btn-info {background-color: #3498db;border-color: #3498db;color: #fff;}
.btn-info:hover {color: #fff;background-color: #31b0d5;border-color: #269abc;}
.btn-info.btn-outline {color: #3498db;}
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open .dropdown-toggle.btn-info {background-color: #4aa3df;border-color: #4aa3df;color: #fff;}
.btn.btn-del, .btn-del {background-color: #fff;border-color: #bf0000;color: #bf0000;}
.btn + .btn{margin-left:10px;}


@media screen and (max-width:480px){
	.btn-large {width: 100%;font-size: 16px;line-height: 3;}
}

.table>thead>tr>th, .table>thead>tr>td, .table>tbody>tr>th, .table>tbody>tr>td, .table>tfoot>tr>th, .table>tfoot>tr>td{vertical-align:middle;}
thead>tr>th{text-align:center;}

header{position:relative;padding-bottom: 60px;overflow:hidden;}
header .bg{position:absolute;top:0;left:0;display:block;width:100%;height:100%;background: url(../img/common/logo.svg) no-repeat top center;background-position: center;background-size: 100% auto;filter: blur(10px);opacity: 0.35;}
header .bgover{position:absolute;top:0;left:0;display:block;width:100%;height:100%;background: linear-gradient(0deg, #999999 0%, #E6E6E6 100%);}
header .topCont{position:relative;max-width: 800px;width:100%;margin:0 auto;text-align: center;}
header .logo{}
header .logo img{height: 96px;margin: 30px auto;}
header .title{margin-bottom: 1px;color: #fff;font-size: 40px;font-weight: 600;text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);}
header .stitle{margin-bottom: 30px;color: #fff;font-size: 20px;font-weight: 300;text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);}
header .subtit{display: flex;margin-bottom: 30px;color: #000;font-size: 16px;font-weight: 400;justify-content: space-between;}
header .subtit > div{}
header .subtit > div span{font-weight: 500;}
header .subtit .left{}
header .subtit .right{}
header .topLanguage{width:100%;text-align: left;}

.list-wrap{position:relative;max-width: 800px;width: 100%;margin: -60px auto 0;}
.list-wrap select{position: absolute;top: 0;left: 0;width: 100%;height: 60px;padding: 20px;font-size:20px;text-align:center;opacity: 0;}
.list-wrap button i{margin-left:8px;}
.list-wrap .btn-select {width: 100%;padding: 20px 30px;font-size: 20px;line-height: 1;background-color: rgba(255, 255, 255, 0.5);border: 0 none;box-sizing: border-box;border-radius: 10px 10px 0px 0px;cursor: pointer;text-align: center;/* 말줄임 */white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}

.select-wrap{position:relative;display: inline-block;}
.form-group-sm .select-wrap select.form-control{position: absolute;top: 0;left: 0;width: 100%;height: 100%;padding: 0;text-align:left;opacity: 0;}
.select-wrap button i{position: absolute;top: 50%;right: 8px;transform: translateY(-50%);}
.select-wrap .list-select {min-width: 100px;padding: 0 10px;color: #555;line-height: 26px;border: 1px solid #999999;border-radius: 4px;text-align: left;background-color: #fff;}

.util-wrap{max-width: 800px;width: 100%;margin: 0 auto;}
.util-wrap .btmCont{}
.util-wrap .sign-wrap{padding: 20px 10px;border-bottom: 1px solid #bbb;}
.util-wrap .signin{}
.util-wrap .sign-info{display: flex;margin-bottom: 10px;justify-content: center;}
.util-wrap .sign-info input{max-width: 200px;}
.util-wrap .sign-info input + input {margin-left:10px; }
.util-wrap .sign-info input + a {margin-left:10px;}
.util-wrap .sign-info button{}
.util-wrap .noti-txt{text-align: center;}
.util-wrap .signout{}
.util-wrap .sign-box{display: flex;justify-content: space-between;align-items: center;}
.util-wrap .sign-box .infoBoxWrap{display:flex;}
.util-wrap .sign-box .rank{width: 315px;font-size: 16px;font-weight: 700;text-align: center;}
.util-wrap .sign-box .rank span{display: block;font-size: 36px;font-weight: 600;}
.util-wrap .sign-box .user-info{width: 315px;}
.util-wrap .sign-box .user-info > div{display: block;color:#666;text-align: center;}
.util-wrap .sign-box .user-info > div + div{/* margin-left:40px; */}
.util-wrap .sign-box .user-info > div span{color:#000;font-size: 20px;font-weight: 600;}
.util-wrap .sign-box .user-info .user-id{}
.util-wrap .sign-box .user-info .user-id span{}
.util-wrap .sign-box .user-info .user-name{}
.util-wrap .sign-box .user-info .user-name span{}
.util-wrap .sign-box .user-info .user-coin{}
.util-wrap .sign-box .user-info .user-coin span{}
.util-wrap .sign-box .btn-box{display: block;/* width: 60px; */margin: 0 auto;}
.util-wrap .sign-box .btn-box a{display: inline-block;/* width:100%; */}
.util-wrap .sign-box .btn-box a + a{margin: 0 0 0 4px;}
.util-wrap .sign-box .btn-box.forPC{display: flex;justify-content: center;}
.util-wrap .sign-box .btn-box.forPC a{width:80px;}
.util-wrap .sign-box .btn-box.forMo{display:none;}
.util-wrap .sign-box .qrCodeBox{width:140px;height:140px;margin-left: 10px;border: 5px solid #CCC;background: #FFF;}

.util-wrap .joinCont{padding-bottom: 80px;}
.util-wrap .joinCont .joinBoxWrap{display: flex;width: 720px;margin: auto;flex-wrap: wrap;}
.util-wrap .joinCont .joinBoxWrap > div{margin-top:40px;}
.util-wrap .joinCont .joinBoxWrap > div:nth-child(2n){margin-left:80px;}
.util-wrap .joinCont .joinBoxWrap > div:nth-child(n+5){margin-bottom:40px;}
.util-wrap .joinCont .joinBoxWrap .joinElem{display: flex;width: 320px;align-items: center;}
.util-wrap .joinCont .joinBoxWrap .joinElem > div{padding: 5px 10px;}
.util-wrap .joinCont .joinBoxWrap .joinElem .labelBox{width: 100px;font-size: 12px;text-align: right;font-weight: 700;}
.util-wrap .joinCont .joinBoxWrap .joinElem .inputBox{width: 220px;}
.util-wrap .joinCont .joinBoxWrap .joinElem .inputBox input,
.util-wrap .joinCont .joinBoxWrap .joinElem .inputBox select{width:100%;font-size: 12px;line-height: 22px;border: 0 none;border-bottom: 1px solid #666;}
.util-wrap .joinCont .joinBoxWrap .joinElem .inputBox.elemID input{width: calc(100% - 60px);}
.util-wrap .joinCont .joinBoxWrap .joinElem .inputBox.elemID a{display: inline-block;width: 55px;padding: 5px 0;color:#fff;line-height: 1;text-align: center;border-radius: 3px;border: 1px solid #666;background: #999;}
.util-wrap .joinCont .joinBoxWrap .joinElem .inputBox.elemID.lang_en input{width: calc(100% - 110px);}
.util-wrap .joinCont .joinBoxWrap .joinElem .inputBox.elemID.lang_en a{width: 100px;}


.util-wrap .capchaBox{margin-bottom:40px;text-align: center;}
.util-wrap .capchaBox + .btn-box{text-align: center;}
.util-wrap .capchaBox + .btn-box a{border-radius: 3px;border: 1px solid #900;background: #F66;}

.modal_pop.modal_alarm .modal_body{padding: 0;border-bottom: 1px solid #ccc;}
.modal_pop.modal_alarm .modal_footer{padding:5px 10px 5px 5px;text-align:right;}
.modal_pop.modal_alarm .modal_footer .btn{width: auto;height: auto;padding: 2px 6px;font-size:12px;}}


/* 알림 on off css */
.wrapper { position : relative; }
.wrapper #switch { position : absolute; appearance : none; -webkit-appearance : none; -moz-appearance : none; margin : 0; display: none; }
.wrapper .switch_label { position: relative; cursor: pointer; display: inline-block; width: 38px; height: 20px; background: #fff; border-radius: 20px; transition: 0.2s; margin : 0; }
..wrapper .switch_label:hover { background: #fff; }
.wrapper .onf_btn { position: absolute; top: 3px; left: 3px; display: inline-block; width: 15px; height: 15px; border-radius: 20px; background: #dbdbdb; transition: 0.4s; }
#switch:checked+.switch_label { background: #fff; }
#switch:checked+.switch_label:hover { background: #fff; }
#switch:checked+.switch_label .onf_btn { left: 20px; background: #4285F4; box-shadow: 1px 2px 3px #00000020; }
/* 알림 on off css */

.alarmList{}
.alarmList ul{margin:0;height: 400px;overflow: auto;}
.alarmList ul li{padding: 10px;border-top: 1px solid #ccc; display: flex; flex-direction: column; position: relative;}
.alarmList ul li + li{}
.alarmList ul li:last-child{/* border-bottom: 1px solid #ccc; */}
.alarmList ul li .textBox{overflow: hidden; display: flex; justify-content: space-between;}
.alarmList ul li .textBox p{margin-bottom: 0;color: #000;font-size: 13px;font-weight: 700;text-overflow:ellipsis;overflow: hidden;white-space: nowrap;}
.alarmList ul li .textBox .date{color: #000;font-size: 10px;text-align: right;}

.alarmList ul li .alarmText p { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-bottom : 0; margin-top : 5px; font-size : 13px; }

.alarmList ul li .alarmBottom { margin-top : 5px; display: flex; justify-content: space-between; width: 100%; }
.alarmList ul li .alarmBottom div , .alarmList ul li .alarmBottom span { font-size : 13px; }
.alarmList ul li .alarmBottom span , .alarmList ul li .alarmBottom ._date { color : #000; }
.alarmList ul li .alarmBottom ._date { font-size : 13px; }

.alarmList ul li.read .alarmBottom span , .alarmList ul li.read .alarmBottom ._date { color : #666; } 
.alarmList ul li.read .textBox p{color:#666;font-weight: 400;}

.alarmList ul li.on{display: flex;align-items: left; background-color: #e6e6e6;}
.alarmList ul li.on .textBox{overflow: visible;}
.alarmList ul li.on .textBox p{xmargin-bottom: 10px;color: #000;font-weight: 500;white-space: break-spaces;}
.alarmList ul li.read .textBox p,
.alarmList ul li.on .textBox p{color: #000;}
.alarmList ul li.on .alarmBottom div , .alarmList ul li.on .alarmBottom div span , .alarmList ul li.on .alarmBottom ._date  { color: #000; }

.alarmList ul li.on .alarm_close{ position: absolute; right: 7px; top : 7px; display:block;width: 20px;height: 20px;margin-left: 20px;background: url(../img/common/icon_close.svg) no-repeat center;border: 0;flex: 1 0 auto;}

section.content{max-width: 800px;width: 100%;margin: 0 auto;padding: 40px 0 40px;}
.rank-list-wrap{max-width: 800px;}
.rank-list-wrap .heading {display:flex;/* padding-bottom: 20px; */justify-content: space-between;align-items: baseline;}
.rank-list-wrap h3{font-size:40px;font-weight:600;}
.rank-list-wrap .right{font-size:16px;}
.rank-list-wrap .panel-body + .panel-heading{margin-top:20px;}
.rank-list-wrap .heading, .rank-list-wrap .panel-heading{margin-bottom:20px;}

.ico.rotate{transform: rotate(-45deg);}


#fregisterform .captcha {display:block;margin:5px 0 0}

/* 캡챠 자동등록(입력)방지 기본 -pc */
#captcha {display:inline-block;position:relative}
#captcha legend {/*position:absolute;*/margin:0;padding:0;font-size:0;line-height:20px;text-indent:-9999em;overflow:hidden}
#captcha #captcha_img {height:40px;border:1px solid #898989;vertical-align:top;padding:0;margin:0}
#captcha #captcha_mp3 {margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../../img/captcha2.png') no-repeat;text-indent:-999px;border-radius:3px}
#captcha #captcha_reload {margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../../img/captcha2.png') no-repeat 0 -40px;text-indent:-999px;border-radius:3px}
#captcha #captcha_key {margin:0 0 0 3px;padding:0 5px;width:90px;height:40px;border:1px solid #ccc;background:#fff;font-size:1.333em;font-weight:bold;text-align:center;border-radius:3px;vertical-align:top}
#captcha #captcha_info {display:block;margin:5px 0 0;font-size:0.95em;letter-spacing:-0.1em}

/* 캡챠 자동등록(입력)방지 기본 - mobile */
#captcha.m_captcha audio {display:block;margin:0 0 5px;width:187px}
#captcha.m_captcha #captcha_img {width:160px;height:60px;border:1px solid #e9e9e9;margin-bottom:3px;margin-top:5px;display:block}
#captcha.m_captcha #captcha_reload {position:static;margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../../img/captcha2.png') no-repeat 0 -40px;text-indent:-999px}
#captcha.m_captcha #captcha_reload span {display:none}
#captcha.m_captcha #captcha_key {margin:0;padding:0 5px;width:115px;height:29px;border:1px solid #b8c9c2;background:#f7f7f7;font-size:1.333em;font-weight:bold;text-align:center;line-height:29px;margin-left:3px}
#captcha.m_captcha #captcha_info {display:block;margin:5px 0 0;font-size:0.95em;letter-spacing:-0.1em}
#captcha.m_captcha #captcha_mp3 {width:31px;height:31px;background:url('../../img/captcha2.png') no-repeat 0 0 ; vertical-align:top;overflow:hidden;cursor:pointer;text-indent:-9999px;border:none}


#footer{position: fixed;left: 0;bottom: 0;width: 100%;padding: 10px 0;color: #999;font-size: 10px;line-height: 20px;text-align: center;z-index:100;background-color: #fff;border-top: 1px solid #e5e5e5;}

.modalWrap {display:none;position: fixed;z-index: 101;padding-top: 100px;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgba(0,0,0,0.8);}
.modalBody {position:absolute;top:50%;left:50%;width: 200px;height: 200px;padding: 1px;background-color: #fff;transform:translate(-50%,-50%);}
.modalBody img{width:100%;}
.closeBtn {font-weight: bold;color: #000;font-size:25px;cursor: pointer;position: absolute;top: 50%;left: 50%;transform: translate(96px, -126px);}

.hpanel {
    background-color: none;
    border: none;
    box-shadow: none;
    margin-bottom: 25px;
}
.hpanel.hblue>.panel-body {
    border-top: 2px solid #3498db;
}
.panel-footer {
    padding: 0 15px;
    background-color: #fff;
    border-top: 0 none;
}
.pagination {
    margin: 15px 0;
}
.search-box {margin-bottom:0;}

@media screen and (max-width:1100px){
}
@media screen and (max-width:1023px){
}
@media screen and (max-width:767px){
	header .bg{background-size: cover;background-position: auto;}
	header .logo img{height: 40px;margin: 20px auto;}
	header .title{margin-bottom: 20px;font-size: 24px;}
	header .subtit{display: block;margin-bottom: 20px;font-size: 12px;}
	header .subtit > div{}
	header .subtit > div span{font-weight: 500;}
	header .subtit .left{}
	header .subtit .right{}
	header .list-wrap{}
	header .list-wrap select{width: 90%;margin: 0 auto;padding: 8px 0;font-size: 14px;border-radius: 8px 8px 0px 0px;}

	.list-wrap {width: calc( 100% - 20px );margin-top: -34px;}
	.btn-select {padding: 10px;font-size: 14px;}
	.list-member {top: 34px;}
	.list-member li button {padding: 10px;font-size: 14px;}

	.util-wrap .sign-box{height: 140px;}
	.util-wrap .sign-info button{}
	.util-wrap .sign-box .infoBoxWrap{position:relative;width: calc(100% - 140px);height: 100%;flex-direction: column;justify-content: space-between;}
	.util-wrap .sign-box .rank,
	.util-wrap .sign-box .user-info{width:100%;}
	.util-wrap .sign-box .rank span{display: inline-block;margin-left: 10px;font-size: 26px;}
	.util-wrap .sign-box .user-info > div{display: block;text-align: center;}
	.util-wrap .sign-box .user-info > div + div{margin-left: 0;}
	.util-wrap .sign-box .user-info > div span{font-size: 12px;}
	.util-wrap .sign-box .user-info .user-name span{}
	.util-wrap .sign-box .user-info .user-coin{}
	.util-wrap .sign-box .user-info .user-coin span{}
	.util-wrap .sign-box .qrCodeBox{}
	.util-wrap .sign-box .btn-box.forPC{display:none;}
	.util-wrap .sign-box .btn-box.forMo{display:block;}

	.util-wrap .joinCont{padding-bottom: 80px;}
	.util-wrap .joinCont .joinBoxWrap{display: block;width: 100%;margin: auto;padding: 20px 20px 0;}
	.util-wrap .joinCont .joinBoxWrap > div{margin-top: 0;margin-bottom: 20px;}
	.util-wrap .joinCont .joinBoxWrap > div:nth-child(2n){margin-left: 0;}
	.util-wrap .joinCont .joinBoxWrap > div:nth-child(n+5){margin-bottom: 20px;}
	.util-wrap .joinCont .joinBoxWrap .joinElem{width: 100%;}
	.util-wrap .joinCont .joinBoxWrap .joinElem .labelBox{max-width: 100px;width: 32%;}
	.util-wrap .joinCont .joinBoxWrap .joinElem .inputBox{width: 68%;}
	.util-wrap .capchaBox{margin-bottom:20px;}

	section.content{padding: 30px 10px;}
	.rank-list-wrap{max-width: 800px;}
	.rank-list-wrap .heading {display:flex;padding-bottom: 20px;justify-content: space-between;align-items: baseline;}
	.rank-list-wrap h3{margin-bottom: 10px;font-size: 30px;}
	.rank-list-wrap .right{font-size: 12px;}
	.rank-list-wrap .panel-body + .panel-heading{margin-top:10px;}
	.rank-list-wrap .heading, .rank-list-wrap .panel-heading{display: block;margin-bottom:0;text-align: center;}

	.table-responsive{margin:0;}
	.search-box{display: flex;max-width: 360px;}
	.search-box .select-wrap, .search-box input{margin-right:4px;}
	.search-box {margin: 12px 0 10px;}
	
	.list-wrap{width: calc( 100% - 20px );margin: -34px auto 0;}
	.list-wrap select{height: 34px;padding: 0;font-size: 14px;}
	.list-wrap .btn-select {padding: 10px 20px;font-size: 14px;}
}
@media screen and (max-width:479px){
}

/* 2023-12-17 */
.app *{color:#666;font-size:14px;}
.app.login{background:url(../img/common/bg.png) no-repeat center;background-size: cover;}
.app header {position:absolute;width: 100%;padding:0;overflow:visible;}
.app .topCont{position:fixed;top:8px;left:8px;display:flex;justify-content:space-between;align-items:center;width:100%;height:36px;padding:10px;z-index : 100;}
.app .top_background { position: fixed; top: 0; left: 0; display: flex; width: 100%; height: 36px; background : #000000; opacity: 0.7; z-index : 99;}
.app .topLanguage{display: flex; gap: 5px; align-items: center;}
.app .topLanguage img{width:20px;}
.app .topLanguage span{margin-left:2px;color:#fff;font-size:25px;line-height:16px; font-weight: 300; text-shadow : 1px 3px 3px black; letter-spacing : -1px;}

.app .top-header{position: relative;text-align: center;background-color:#000;}
.app .top-header:before{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;}
.app .top-header .title-box{position:relative; height : 180px; xpadding: 100px 0 40px;}
.app .top-header .title{ color: #fff; font-size: 35px; font-weight: 500; position: absolute; bottom: 15px; right: 20px;}
.app .top-header .bgImg {position:absolute;top:0;left:0;right:0;bottom:0;background: url(../img/bg_top_header.jpg) no-repeat center;background-size: cover;opacity:0.5;}
.app .top-header .bgImg_participate {position:absolute;top:0;left:0;right:0;bottom:0;background: url(../img/participate.jpg) no-repeat center;background-size: cover;opacity:0.5;}
.app .top-header .bgImg_management {position:absolute;top:0;left:0;right:0;bottom:0;background: url(../img/regist.jpg) no-repeat center;background-size: cover;opacity:0.5;}

.app .top-header.default {/* background: url(../img/bg_top_header.jpg) no-repeat center;background-size: cover;opacity:0.7;background-color:#000; */}


.app .top-header.ranking .comp-name{position: relative;display:inline-block;margin-bottom:16px;padding: 2px 0 6px;color:#000;font-size:16px; font-weight:bold;text-align:center;background:url(../img/bg_top_tit_mid.png) repeat-x 0 0; background-size: 1px 38px; height: 38px; display: inline-flex; align-items: center; justify-content : center; width: 80%; }
.app .top-header.ranking .comp-name:before{content:'';position:absolute;top:0;left:-15px;display: block;width:16px;height:38px;background:url(../img/bg_top_tit_left.png) no-repeat 0 0; background-size: 16px 38px;}
.app .top-header.ranking .comp-name:after{content:'';position:absolute;top:0;right:-16px;display: block;width:16px;height:38px;background:url(../img/bg_top_tit_right.png) no-repeat 0 0; background-size: 16px 38px;}

.app .top-header.ranking .comp-period{color:#fff;font-weight:400;/* text-shadow: -1px -1px 1px #000, 1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000; */}
.app .top-header.ranking .comp-period.ing{}
.app .top-header.ranking .comp-period.ing > div{display:inline-block;vertical-align:middle;}
.app .top-header.ranking .comp-period .ico_clock{width: 40px;}
.app .top-header.ranking .comp-period .txt{}
.app .top-header.ranking .comp-period .txt > div{color:#fff;font-size: 16px;font-weight: 400;line-height: 17px;text-align: center;letter-spacing:1px;}
.app .top-header.ranking .comp-period .txt > div span{color:#fff;font-size: 20px;font-weight: 700;line-height: 25px;text-align: center;}


/* 리뉴얼 헤더 CSS START */
.app .top-header .comp_img_top { width: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; object-fit: cover; opacity : 0.5 }
.app .top-header ._topCont { width : 100%; }
.app .top-header ._topCont .top_header_field { display: flex; justify-content: space-between; padding: 20px; }
.app .top-header ._topCont .top_header_field .home { position : relative; height : 30px; }
.app .top-header ._topCont .top_header_field .home img { filter: drop-shadow(2px 2px 0px #000); }
.app .top-header ._topCont .top_header_field .refresh { z-index : 1; }
.app .top-header ._topCont .top_header_field .refresh i { color: #fff; font-size: 30px; }
.app .top-header ._topCont .top_header_field .slide_menu { position : relative; display: flex; align-items: center; height : 30px; }
.app .top-header ._topCont .top_header_field .slide_menu .menu_icon { width : 30px; }
.app .top-header ._topCont .top_header_field .slide_menu .count { position: absolute; top: -10px; right: -10px; }
.app .top-header .title-box .comp_title { margin : 0; position: unset; font-size: 24px; margin-bottom: 20px; }
/* 리뉴얼 헤더 CSS END */


.app .util{/* position: absolute;top:20px;right: 20px; */}
.app .util .util_box{ display : flex; align-items : center;}
.app .util .util_box .coin{display:inline-block;line-height: 1;}
.app .util .util_box .coin span{color:#fff;vertical-align: middle;}
/* .app .util .util_box button + button{margin-left:10px;} */
.app .util .util_box button{margin-left:10px;vertical-align:middle;text-shadow: -1px -1px 1px #000, 1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000;}


.app .login{height: 20px;color: #fff;border: 0;/* border-bottom: 1px solid #fff; */background-color: transparent;}
.app .user{width: 16px;height: 16px;background: url(../img/common/icon_user.svg) no-repeat center;border: 0;}
.app .alarm{width: 16px;height: 16px;background: url(../img/common/icon_alarm.svg) no-repeat center;border: 0;}
.app .logo{margin-bottom:160px;text-align:center;}
.app .logo > img { width : 270px; }
.app .other-login{text-align:center;}
.app .other-login a{display:inline-flex; gap : 10px; color:#fff;font-size:16px;border-bottom:1px solid #fff; font-weight : 300; text-shadow: 1px 3px 3px black; padding-bottom: 5px;}
.app .login-wrap{position: absolute;top: 50%;left: 50%;width: auto;transform: translate(-50%, -50%);}
.app .login-wrap .sign-wrap{margin-bottom:60px;}
.app .login-wrap .signup a{color:#fff;border-bottom:1px solid #fff;}
.app .sign-wrap{width: 310px; margin : 0 auto; padding:0;border-bottom:0;}
.app .sign-wrap .capchaBox{width: 100%;margin: 40px auto; padding:24px 20px; text-align:center; border:1px solid #ccc;}
.app .sign-wrap #captcha.m_captcha #captcha_img{margin:5px auto 3px;}
.app .sign-wrap #captcha.m_captcha #captcha_key{height:30px;margin-top: 6px;}
.app .sign-wrap #captcha.m_captcha #captcha_reload{width:30px;height:30px;margin-top: 6px;background-size:30px auto;background-position: 0px -30px;}
.app .sign-wrap #mb_email { border: 1px solid #cccccc; padding: 4px; }
.app .sign-wrap .win_btn { text-align: center;}
.app .sign-wrap .win_btn .btn_submit { background-color: #f66;border: 1px solid #900;border-radius: 2px;color: #ffffff;padding: 5px 20px; }

.app .signin{display: flex; flex-direction : column; gap : 10px; margin-bottom:10px;align-items: center; justify-content : center;}
.app .sign-info{display:block;margin-bottom:0; width: 310px;}
.app .sign-info input{text-align : center; font-size :16px; font-weight : 300; box-shadow : 0px 7px 8px #333333; border-color: #000; border-radius: 0; height : 40px; }
.app .sign-info input + input {margin-top: 10px;margin-left:0; xxbackground : url("../../img/common/icon_secret.png") no-repeat; xxbackground-size: 32px 35px; xxbackground-position: right 10px center; background-color : #ffffff;}
.app .sign-info + .btn {width: 100%;text-align:center;box-sizing: border-box;background-color: #f66;border: 1px solid #000; box-shadow: 0px 7px 8px #333333; border-radius: 5px; height : 40px; font-size : 16px; }
.app .sign-button { display: flex; width: 100%; gap : 10px; }
.app .sign-button .btn-primary { width: 100%; border-radius: 5px; font-size : 16px; box-shadow: 0px 7px 20px #333333; font-weight: 300; }
.app .sign-button a { width: 100%; background: #999999; display: flex; align-items: center; justify-content: center; border-radius: 5px; color: #ffffff; font-size : 16px; box-shadow: 0px 7px 8px #333333; font-weight: 300; height : 40px; border: 1px solid #000000;}
.app .signin > a { width: 100%; display: flex; color: #ffffff; background: #999999; justify-content: center; padding: 5px; align-items: center; border-radius: 5px; font-size : 16px; box-shadow: 0px 7px 8px #333333; font-weight: 300; }

.app .signup{text-align: center;}
.app .signup a{color:#000;border-bottom:1px solid #000;}
.app .signup a + a{margin-left:20px;}
.app .sns-sign{margin:40px 0;}
.app .sns-sign a { display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; }
.app .sns-sign a .img { width: 268px; }
.app .sns-sign a .img > div{display:inline-block;padding:10px;border-radius:4px; box-shadow: 0px 7px 8px #333333;}
.app .sns-sign a .img > div img {width : 24px;}
.app .sns-sign a .img > div + div{margin-left:10px;}
.app .sns-sign a span {display:inline-block; margin-top:10px; color:#fff; font-size:16px; line-height:24px; font-weight : 300; }

.app .join-wrap{padding:40px 20px 60px;background-color:#fff;}
.app .join-wrap .joinElem{display:flex;justify-content: space-between;border-bottom:1px solid #666;}
.app .join-wrap .joinElem + .joinElem{margin-top:40px;}
.app .join-wrap .joinElem.sns{margin-top:10px;border:0 none;}
.app .join-wrap .joinElem.sns input{width:100%;height:30px;padding: 0;color:#fff;text-align: center;border:1px solid #666;}
.app .join-wrap .chk{display:block;width:100%;padding:8px 0;color:#fff;line-height:1;text-align:center;border-radius:3px;border:1px solid #666;background-color:#999;}
.app .join-wrap .joinBoxWrap .headTxt{display:inline-block;margin-right:10px;color:#999;font-size:14px;font-weight:400;}
.app .join-wrap .joinBoxWrap input, .app .joinBoxWrap select{flex: 1;width:100%;height:20px;color:#000;border:0;text-align:right;}
.app .join-wrap .term_agree{width:100%;margin-top:40px;padding:20px;background:#ddd;}
.app .join-wrap .term_agree .title{font-weight:700;text-align:center;}
.app .join-wrap .term_agree .agree_chk{position:relative;margin-top:20px;padding-left:24px;}
.app .join-wrap .term_agree .agree_chk input{position:absolute;top:0;left:0;width:14px;height:14px;}
.app .join-wrap .term_agree .agree_chk label{font-weight:400;}
.app .join-wrap .term_agree .agree_chk .require{color:#f00;}
.app .join-wrap .capchaBox{width: 100%;margin: 40px auto; padding:24px 20px; text-align:center; border:1px solid #ccc;}
.app .join-wrap #captcha.m_captcha #captcha_img{margin:5px auto 3px;}
.app .join-wrap #captcha.m_captcha #captcha_key{height:30px;margin-top: 6px;}
.app .join-wrap #captcha.m_captcha #captcha_reload{width:30px;height:30px;margin-top: 6px;background-size:30px auto;background-position: 0px -30px;}
.app .join-wrap .btn-wrap{display: flex;justify-content: space-between;}
.app .join-wrap .btn-wrap input{width:50%;}


.app .note-wrap .capchaBox{width: 100%;margin: 20px auto; padding:24px 20px; text-align:center; border:1px solid #ccc;}
.app .note-wrap #captcha.m_captcha #captcha_img{margin:5px auto 3px;}
.app .note-wrap #captcha.m_captcha #captcha_key{height:30px;margin-top: 6px;}
.app .note-wrap #captcha.m_captcha #captcha_reload{width:30px;height:30px;margin-top: 6px;background-size:30px auto;background-position: 0px -30px;}


.app .comp-detail-top{padding: 20px;text-align: center;border-bottom: 1px solid #ccc;}
.app .comp-detail-title{margin-bottom:20px;color:#000;font-size: 24px;font-weight: 700;line-height: 24px;}
.app .search-box{display: flex;max-width: 100%;margin:0;padding:10px;}
.app .search-box select{width:auto;height:24px;padding: 0;color: #000;font-size: 12px; border-radius : 0;}
.app .search-box input{/* width: calc( 100% - 90px ); */ flex: 1 0 auto;height:24px;margin: 0 5px;padding: 0 4px;color: #000;font-size: 12px;border: 0;border-bottom: 1px solid #666;appearance: none;-webkit-appearance: none;border-radius:0;}
.app .search-box input[type='button']{width: 0;margin-right: 0;color:#fff;border:0 none;}
.app .search-box button[type='submit']{display: block;width:24px;height:24px;background:url(../img/common/icon_search.svg) no-repeat center;border: 1px solid #666;background-color: #999;border-radius: 3px;}
.app .comp-detail-cont table{width:100%;font-size:12px;}
.app .comp-detail-cont th, .app .comp-detail-cont td{padding: 10px 4px;font-size:12px;}
.app .comp-detail-cont th{color:#fff;background-color:#808080;border-top:1px solid #404040;border-bottom:1px solid #404040;}
.app .comp-detail-cont td{color:#000;border-bottom:1px solid #ccc;}
.app .comp-detail-cont td{width:}

.app .xuser-info-wrap {display: flex;justify-content: space-between;margin: -20px -20px 20px;padding: 10px 10px 10px 0;border-bottom: 1px solid #ccc;background-color: #ccc;}
.app .xuser-info-wrap .user-info{display:flex;width: calc( 100% - 90px );height: 80px;/* padding: 10px; */background-color: #fff;border-top-right-radius: 5px;border-bottom-right-radius: 5px;}
.app .xuser-info-wrap .rank{display: flex;flex-direction: column;width: 68px;height:80px;padding: 8px 0;text-align:center;}
.app .xuser-info-wrap .rank span{display:inline-block;color: #999;font-size:12px;line-height:12px;font-weight:500;}
.app .xuser-info-wrap .rank span.number{color:#000;font-size: 24px;line-height: 24px;font-weight:700;}
.app .xuser-info-wrap .flag{margin-top:6px;}
.app .xuser-info-wrap .flag span{color:#000;font-size: 15px;font-weight: 500;line-height: 18px;text-align: center;vertical-align:middle;}
.app .xuser-info-wrap .detail-info{width: calc( 100% - 68px );padding: 10px 0;}
.app .xuser-info-wrap .detail-info > div{width:100%;line-height: 1;}
.app .xuser-info-wrap .detail-info > div + div{/* margin-top:4px; */}
.app .xuser-info-wrap .detail-info > .id{position:relative;padding-bottom:10px;}
.app .xuser-info-wrap .detail-info > .id:before{content:'ID';position:absolute;left:10px;top:3px;display:block;width:20px;color:#999;font-size: 12px;font-weight: 700;line-height: 12px;text-align: left;}
.app .xuser-info-wrap .detail-info > .id span{font-size: 16px;font-weight: 700;line-height: 16px;text-align: center;}
.app .xuser-info-wrap .detail-info > .name{padding-top:10px;border-top:1px solid #ccc;}
.app .xuser-info-wrap .detail-info > .name span{font-size: 24px;font-weight: 700;line-height: 24px;text-align: center;}
.app .xuser-info-wrap .detail-info span{color:#000;font-weight: 500;}
.app .xuser-info-wrap .detail-info .charge-coin button{height:20px;padding:0 5px;color:#fff;font-weight:500;text-align:center;border:1px solid #666;background-color:#999;border-radius:3px;}
.app .xuser-info-wrap .detail-info .admin button{height:20px;padding:0 5px;color:#fff;font-weight:500;text-align:center;border:1px solid #900;background-color:#f66;border-radius:3px;}
.app .xuser-info-wrap .qr{width:80px;height:80px;border: 5px solid #ffaa00;background: #FFF;}
.app .xuser-info-wrap .qr img{width:100% !important;}

.app .user-info-wrap { margin : 0; padding : 10px 10px; position : relative; background-color: #ccc; display: flex;justify-content: space-between; border-bottom: 1px solid #ccc; }
.app .user-info-wrap .user-info-left { background : #ffffff; width: 100%; border-radius : 40px; display: flex; align-items: center; gap : 40px; box-shadow: 3px 3px 8px black; }
.app .user-info-wrap .user-info-left .user_logo { width: 60px; height: 60px; border-radius: 50%; margin: 6px; }
.app .user-info-wrap .user-info-left h1 { color: #000; font-size: 24px; font-weight: bold; }
.app .user-info-wrap .user-info-left .flag { display: flex; gap: 5px; justify-content: center; align-items: center; margin-top: 8px; }

.app .user-info-wrap .user-info .ranking_bg { position : absolute; right: 0; top : 0; height: 93px; }
.app .user-info-wrap .user-info .text img { position: absolute; top: 15px; right: 26px; }
.app .user-info-wrap .user-info .rank ._outline { font-size: 40px; font-weight: bold; position: absolute; top: 27px; right: 24px; -webkit-text-stroke: 6px #000; color: transparent; letter-spacing: -1px; width : 60px; }
.app .user-info-wrap .user-info .rank ._rank { font-size: 40px; font-weight: bold; position: absolute; top: 27px; right: 24px; color: #fff; letter-spacing: -1px; width : 60px; }


.app .comp-list-wrap{}
.app .comp-list-top{padding: 20px;text-align: center;border-bottom: 1px solid #ccc;}
.app .comp-tab{margin-bottom: 20px;}
.app .comp-tab button{position:relative;color: #999;font-size: 24px;font-weight: 700;line-height: 24px;border: 0;background-color: transparent;}
.app .comp-tab button.on{color:#000;}
.app .comp-tab button + button{margin-left: 10px;padding-left: 10px;}
.app .comp-tab button + button:after{content:'';position:absolute;top:0;left:0;display:block;height: 24px;border-right: 1px solid #ccc;}
.app .comp-count{color: #000;font-size: 14px;font-weight: 400;line-height: 14px;}
.app .comp-count span{color: #000;font-weight:700;}
.app .comp-list-cont{padding:20px 20px 50px;}
.app .comp-list-cont ul{margin-bottom:20px;}
.app .comp-list-cont li{position: relative;display: flex;padding:10px;background-color:#999;border-radius:10px;align-items: center;}
.app .comp-list-cont li:before{content:'';position:absolute;top:10px;bottom: 10px;left:70px;display:block;width:1px;background-color:#808080;}
.app .comp-list-cont li:after{content:'';position:absolute;top:10px;bottom: 10px;right:70px;display:block;width:1px;background-color:#808080;}
.app .comp-list-cont li + li{margin-top:20px;}
.app .comp-list-cont li > div{}
.app .comp-list-cont li .comp-logo{}
.app .comp-list-cont li .enterImg{position: absolute;left: -5px;top: -4px;}
.app .comp-list-cont li .comp-title{width: calc( 100% - 100px );margin:0 10px;padding:0 10px;color:#fff;font-size:14px;text-align: center;}
.app .comp-list-cont li .comp-period{width: 50px;color:#fff;font-size:12px;text-align: center; }

.paging{display: flex;justify-content: center;margin-top: 10px;}
.paging a{display: block;width: 30px;height: 30px;color:#666;font-size:14px;line-height: 28px;text-align: center;border:1px solid #ccc;}
.paging a + a{margin-left:-1px;}
.paging a.current{background-color:#e6e6e6;}
.paging .page_first{background: url(../img/common/icon_first.svg) no-repeat center;}
.paging .page_prev{background: url(../img/common/icon_prev.svg) no-repeat center;}
.paging .page_last{background:url(../img/common/icon_last.svg) no-repeat center;}
.paging .page_next{background: url(../img/common/icon_next.svg) no-repeat center;}

.btn { width:100px; height:30px;padding: 0;color:#fff;text-align: center;font-weight:500;border-radius:3px;}
.btn + .btn{margin-left:10px;}
.btn.btn-ok{border:1px solid #900;background-color:#f66;}
.btn.btn-cancel{border:1px solid #666;background-color:#999;}

.btn.btn-write{width: auto;height: auto;padding: 2px 8px;}
.btn.btn-write span{margin-left:4px;}

input[type=radio]{position:relative;width:14px;height:14px;border-radius:50%;appearance: none;-webkit-appearance: none;border: 1px solid #000;}
input[type=radio]:checked:after{content:'';position:absolute;top:2px;left:2px;width:8px;height:8px;border-radius:50%;background-color:#000;}
input[type=radio]:focus{outline:none;}
input[type=radio], input[type=radio] + label{margin: 0;color:#000;font-size:14px;line-height:1;font-weight:400;}
input[type=radio] + label{margin-left:10px;}

#fwrite{padding:0 10px;}
#bo_w #fwrite .bo_w_tit .write_div{display:flex;}
#bo_w #fwrite .bo_w_tit .write_div span{display:inline-block;margin-right:8px;}
#bo_w #fwrite .bo_w_tit .frm_input{padding:0 5px;flex: 1 0 auto;color: #000;font-size: 12px;}
#bo_w #fwrite .write_div #wr_content{padding:10px;color: #000;font-size: 12px;}
#bo_w .write_div.btn-wrap{display:flex;justify-content: flex-end;margin:0;}
#bo_w .btn{width: auto;height: auto;padding: 5px;font-size: 12px;line-height: 1;}
.board-btn-wrap{display: flex;justify-content: flex-end;margin-top:20px;padding: 0 10px;}
.link-wrap{margin:40px 0;text-align:center;}
.link-wrap input{display:block;width:100%;}
.link-wrap .btn + .btn{margin:10px 0 0;}
.link-underline{display:inline-block;margin:0 auto;border-bottom:1px solid #666;}

.app #footer{position: fixed;left: 0;bottom: 0;width: 100%;padding: 0;color: #999;font-size: 12px;line-height: 31px;text-align: center;z-index:100;border-top: 1px solid #ccc;background-color:#fff;}
.app #footer.loginFoot{background-color:transparent;border-color: #666;}
#appFooter{position: fixed;left: 0;bottom: 0;display: flex;justify-content: space-between;width: 100%;padding: 10px;text-align: center;background-color:#808080; border-top:1px solid #ccc;z-index:100; padding : 3px;}
#appFooter button{position:relative;width: 50%;color:#000;font-size: 16px;line-height: 36px;font-weight:500;background-color:#fff;border:0;}
#appFooter button + button:before {content:'';position:absolute;top: 0;left:0;width:1px;height:36px;border-left:1px solid #ccc;}

#appFooter .participation { background : #ff6666; color : #ffffff; width: 100%; border-radius : 10px; margin : 0 20px; font-size : 22px; }
#appFooter .tail { display: flex; width: 100%; margin : 0; }
#appFooter .tail li { width: 25%; margin-bottom : 5px; }
#appFooter .tail li ._bar { height: 2px;  margin-bottom: 10px; }
#appFooter .tail li .top_bar { width: 100%; background: #ffffff; box-shadow: 0px 4px 6px black; }
#appFooter .tail li svg.icon { filter: drop-shadow(1px 3px 3px black); }
#appFooter .tail li ._text { color : #ffffff; text-shadow: 1px 3px 3px black; font-weight: 300; font-size : 12px; }


#appBoard{position: fixed;left: 0;bottom: 0;display: flex;justify-content: space-between;width: 100%;padding: 10px;text-align: center;background-color:#fff;border-top:1px solid #ccc;z-index:100;}
#appBoard button{position:relative;width: 50%;color:#000;font-size: 16px;line-height: 36px;font-weight:500;background-color:#fff;border:0;}
#appBoard button + button:before {content:'';position:absolute;top: 0;left:0;width:1px;height:36px;border-left:1px solid #ccc;}

#appBack{position: fixed;left: 0;bottom: 0;display: flex;justify-content: space-between;width: 100%;padding: 10px;text-align: center;background-color:#fff;border-top:1px solid #ccc;z-index:100;}
#appBack button{position:relative;background-color:#fff;border:0;}
#appBack .back{width:36px;height:36px;background:url(../img/common/icon_back.svg) no-repeat center;}
#appBack .back:before {content:'';position:absolute;top: 0;right:-10px;width:1px;height:36px;border-left:1px solid #ccc;}


#appBottom{position: fixed;left: 0;bottom: 0;display: flex;justify-content: space-between;width: 100%;padding: 10px;text-align: center;background-color:#fff;border-top:1px solid #ccc;z-index:100;}
#appBottom button{position:relative;background-color:#fff;border:0;}
#appBottom button.sel{color:#ccc;}
#appBottom button + button {margin-left:10px;}
#appBottom button + button:before {content:'';position:absolute;top: 0;left:0;width:1px;height:36px;border-left:1px solid #ccc;}
#appBottom .home{width:36px;height:36px;background:url(../img/common/icon_home.svg) no-repeat center;}
#appBottom .back{width:36px;height:36px;background:url(../img/common/icon_back.svg) no-repeat center;}
#appBottom .notice, #appBottom .qna{min-width:132px;width: calc( 50% - 36px );color:#000;font-size: 16px;line-height: 16px;font-weight:500;}

.termBox {padding-bottom: 10px;line-height:1;}
.termBox span{color:#aaa;font-size:10px;line-height:1;font-weight:bold;}
.termBox a{color:#aaa;font-size:10px;line-height:1;font-weight:bold;}
.termBox a + a{margin-left:8px;}

.modal_pop {display:none;position:fixed; top:0; left:0; z-index:999; width:100%; height:100%; opacity:1;}
.modal_pop:before {content:''; position:fixed; top:0; left:0; z-index:5; width:100%; height:100%; background-color:#000; opacity:0.8;}
.modal_pop .modal_wrap {display: table;position: relative;width: 100%;height: 100vh;}
.modal_pop .modal_container {position: absolute;top: 50%;left: 50%;width: calc( 100% - 60px );min-width: 320px;transform: translate(-50%, -50%);background-color: #fff;z-index: 6;}
.modal_pop .modal_head {width: 100%;padding: 12px 34px 12px 10px;color: #fff;font-weight: 700;line-height: 1;background-color: #808080;}
.modal_pop .modal_body{padding: 20px;color: #000;font-weight: 400;}
.modal_pop .modal_footer{padding: 0 0 20px;text-align: center;}
.modal_pop .modal_close{position: absolute;top: 10px;right: 10px;width: 20px;height: 20px;background:url(../img/common/icon_close_w.svg) no-repeat center; background-size : 20px;}

.modal_lang .modal_container{border: 1px solid #ccc;border-radius: 10px;}
.modal_lang .top_lang{margin-bottom:20px;color:#000;font-size:16px;line-height:1;text-align:center;font-weight:700;}
.modal_lang .cont_lang{width:130px;margin:0 auto;}
.modal_lang .cont_lang .sel_lang + .sel_lang{margin-top:10px;}

.selectCoinWrap{}
.selectCoinWrap .select{display:flex;justify-content:space-between;align-items:center;width:100%;padding:10px;border:1px solid #999;background-color:#fff;}
.selectCoinWrap .select span{color:#808080;font-size:14px;line-height:1;font-weight:500;}
.selectCoinWrap .select .txt{color:#000;font-size:15px;line-height:1;}
.selectCoinWrap .select .arrow{width: 0;height: 0;border-top: 6px solid #000;border-left: 6px solid transparent;border-right: 6px solid transparent;}
.selectCoinWrap .select .line{flex:1;border-top: 1px dashed #808080;}
.selectCoinWrap .dropDown{display:none;}
.selectCoinWrap .dropDown ul{margin:0;color:#808080;font-size:14px;line-height:1;font-weight:500;border:1px solid #999;}
.selectCoinWrap .dropDown li{display:flex;align-items:center;width:100%;padding:10px;}
.selectCoinWrap .dropDown li .num span,
.selectCoinWrap .dropDown li .pay span{color:#000;}
.selectCoinWrap .dropDown li .num{padding-right:10px;}
.selectCoinWrap .dropDown li .pay{padding-left:10px;}
.selectCoinWrap .dropDown li .line{flex:1;border-top: 1px dashed #808080;}
.selectCoinWrap.active .select .arrow{border-top: 0 none;border-bottom: 6px solid #000;}
.selectCoinWrap.active .dropDown{display:block;}

.layerPop{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:999;background-color:#fff;}
.layerHeader{padding:14px 10px 14px 44px;background-color:#000;}
.layerHeader .tit{color:#fff;font-size:16px;line-height:16px;}
.layerHeader .layerClose{position:absolute;top:10px;left:10px;width:14px;}
.layerContent{padding:40px;}
.layerContent.board{padding:0;}
[class$='CoinWrap'] .layerContent{padding:0;}

.btn[class$='Coin'] + .btn{margin:10px 0 0;}
.buyWrap .comp-detail-top{display:flex;align-items:center;}
.buyWrap .comp-detail-top > div{}
.buyWrap .comp-detail-top .tit{padding-right:10px;color:#808080;font-size: 16px;font-weight: 700;line-height: 1;text-align:left;}
.buyWrap .comp-detail-top .line{flex:1;border-top: 1px dashed #808080;}
.buyWrap .comp-detail-top .coin{padding-left:10px;color:#000;font-size: 24px;font-weight: 700;line-height: 1;text-align: right;}
.buyWrap .comp-detail-cont{padding:20px;}
.buyWrap .comp-detail-cont a { width: 100%; margin: 0 ; margin-bottom : 10px; font-weight: normal;}


.layerContent.Complete{display:none;}
.payInfoList{}
.payInfoList ul{margin:0;}
.payInfoList li{display:flex;align-items:center;margin-bottom:20px;padding:10px;}
.payInfoList li .tit{padding-right:10px;color:#808080;font-size: 14px;font-weight: 400;line-height: 1;text-align:left;}
.payInfoList li .line{flex:1;border-top: 1px dashed #808080;}
.payInfoList li .txt{padding-left:10px;color:#000;font-size: 14px;font-weight: 400;line-height: 1;text-align: right;}

.layerContent .layerElm{padding:20px;}
.layerContent .layerElm + .layerElm{border-top: 1px solid #ccc}
.layerContent .conTit{margin-bottom:20px;color:#000;font-size: 16px;font-weight: 700;line-height: 16px;}
.layerContent .layerElm.grayBox{padding:10px;background-color:#e6e6e6;}
.layerContent .subContBox{padding:20px;background-color:#fff;border-radius:5px;}
.layerContent .subContBox .cat{display:flex;align-items:center;margin-bottom:20px;}
.layerContent .subContBox .cat span{color:#808080;font-size:14px;line-height:1;font-weight:500;}
.layerContent .subContBox .cat .num span,
.layerContent .subContBox .cat .pay span{color:#000;}
.layerContent .subContBox .cat .num{padding-right:10px;}
.layerContent .subContBox .cat .pay{padding-left:10px;}
.layerContent .subContBox .cat .del{margin-left:10px;}
.layerContent .subContBox .cat .del img{width:14px;}
.layerContent .subContBox .cat .line{flex:1;border-top: 1px dashed #808080;}
.layerContent .subContBox .sum{display: flex;justify-content: space-between;align-items:center;}
.layerContent .subContBox .pnm{display:flex;align-items:center;padding:10px;border: 1px solid #999;}
.layerContent .subContBox .pnm .count{margin:0 10px;color:#000;font-size:14px;line-height:14px;font-weight:400;}
.layerContent .subContBox .subCont{display:flex;align-items:center;}
.layerContent .subContBox .subCont .pay{font-size: 16px;font-weight: 700;line-height: 16px;}
.layerContent .subContBox .subCont .pay span{color:#000;font-size: 24px;font-weight: 700;line-height: 24px;}
.layerContent .subContBox + .subContBox{margin-top:10px;}
.layerContent .totalContBox{display: flex;justify-content: space-between;align-items:center;}
.layerContent .totalContBox span{color:#808080;font-size:16px;line-height:1;font-weight:600;}
.layerContent .totalContBox .num span,
.layerContent .totalContBox .pay span{font-size:24px;color:#000;}
.layerContent .totalContBox .num{padding-right:10px;}
.layerContent .totalContBox .pay{padding-left:10px;}
.layerContent .totalContBox .line{flex:1;border-top: 1px dashed #808080;}
.layerContent .payMethod{display:flex;align-items:center;margin-bottom:20px;}
.layerContent .payMethod .method{width:50%;padding:6px 10px;border: 1px solid #999;border-radius:3px;}
.layerContent .payMethod .method label{color:#666;line-height:14px;vertical-align: middle;}
.layerContent .payMethod .method + .method{margin-left:10px;}

.layerTableWrap{}
.layerTableWrap table{}
.layerTableWrap table th{padding:10px;color: #fff;font-size:12px;line-height:15px;background-color: #808080;border-top: 1px solid #404040;border-bottom: 1px solid #404040;}
.layerTableWrap table td{padding:10px;color: #000;font-size:12px;line-height:15px;border-bottom: 1px solid #ccc;}
.layerTableWrap table td span{display:block;color: #000;font-size:12px;line-height:15px;text-align:center;}
.layerTableWrap table td span.userName{}
.layerTableWrap table td span.date{}

.popSign{}
.popSign a{display:flex; align-items:center; gap: 3px; padding:12px;border-radius:4px;}
.popSign a img{width:24px;}
.popSign a span{font-size:16px;font-weight:500;}
.popSign a + a{margin-top:20px;}
.google{border:1px solid #fff;background-color:#fff;}
.facebook{border:1px solid #1877F2;background-color:#1877F2;}
.kakao{border:1px solid #FEE500;background-color:#FEE500;}
.naver{border:1px solid #03C75A;background-color:#03C75A;}
.popSign a.google{border-color:#ccc;}
.popSign a.google span{color:#000;}
.popSign a.facebook span{color:#fff;}
.popSign a.kakao span{color:#000;}
.popSign a.naver span{color:#fff;}


/* sns css */
.sns-wrap-reg .sns-kakao { border-color : #f2df00; }
.reg-form .sns-icon { display: inline-block; vertical-align: middle; text-decoration: none; border-width: 1px; border-style: solid; overflow: hidden; margin: 0 1px; }
.reg-form .sns-icon:hover {text-decoration:none}
.reg-form .sns-icon .ico { display: block; background: url('../../skin/social/img/sns_logo.png') no-repeat;  vertical-align: middle; width: 24px; height: 24px; }
.reg-form .sns-icon-not .ico {display:block;background:url('../../skin/social/img/sns_logo_not.png') no-repeat;vertical-align:middle}
.reg-form .sns-icon .txt { position: absolute; line-height: 0;  font-size: 0; vertical-align: middle; overflow: hidden; }
.reg-form .sns-icon .txt i {font-style:normal}

.sns-wrap-reg .sns-naver {border-color:#18a400;background:#2db400}
.sns-wrap-reg .sns-naver .ico {background-position:-29px 0; }
.sns-wrap-reg .sns-google {border-color:#ca2c19;background:#dd5443}
.sns-wrap-reg .sns-google .ico {background-position:-58px 0}
.sns-wrap-reg .sns-facebook {border-color:#2e5393;background:#3a5897}
.sns-wrap-reg .sns-facebook .ico {background-position:0 0 }

.sns-wrap-reg .sns-icon {border-color:#dcdcdc}
.sns-wrap-reg .sns-icon-not {border-color:#8b8b8b !important;}
.sns-wrap-reg .sns-naver{border-color:#18a400}
.sns-wrap-reg .sns-naver .ico {background-position:-29px 0; }
.sns-wrap-reg .sns-google .ico {background-position:-58px 0}
.sns-wrap-reg .sns-google {border-color:#ca2c19}
.sns-wrap-reg .sns-facebook .ico {background-position:0 0 }
.sns-wrap-reg .sns-facebook {border-color:#2e5393}
.sns-wrap-reg .sns-kakao .ico {background-position:-87px 0}
.sns-wrap-reg .sns-twitter {border-color:#488FC9}
.sns-wrap-reg .sns-twitter .ico {background-position:-145px 0}
.sns-wrap-reg .sns-payco {border-color:#C44646}
.sns-wrap-reg .sns-payco .ico {background-position:-116px 0}
.sns-wrap-reg .sns-kakao {border-color:#f2df00}


.flex_basic { display: flex; align-items: center; justify-content: center; }


/* pwa 설치 유도 팝업 css START */
#layerInstall { position: fixed; top: 0; width: 100%; background: #ffffff; z-index: 9999; border-radius: 0px 0px 20px 20px; border-bottom : 1px solid #dbdbdb; padding: 0 10px; }
#layerInstall .popupContent { display: flex; align-items: center; padding-top: 20px; gap: 10px; }
#layerInstall .popupContent .left img { width : 70px; border-radius: 10px; }
#layerInstall .popupContent .right .layerClose { position: absolute; right: 15px; top: 10px; }
#layerInstall .popupContent .right .strongText { font-size: 20px; font-weight: bold; color: #000000; padding-bottom: 10px; }
#layerInstall .InstallDiv { text-align: right; padding-top: 20px; padding-bottom: 20px; }
#layerInstall .InstallDiv #installButton { background: #3399ff; border: 0; border-radius: 10px; padding: 5px 30px; color : #ffffff; }

#layerInstallIos { position: fixed; top: 0; width: 100%; background: #ffffff; z-index: 9999; border-radius: 0px 0px 20px 20px; border-bottom : 1px solid #dbdbdb; padding: 0 10px; }
#layerInstallIos .popupContent { display: flex; align-items: center; padding-top: 20px; gap: 10px; }
#layerInstallIos .popupContent .left img { width : 70px; border-radius: 10px; }
#layerInstallIos .popupContent .right .layerClose { position: absolute; right: 15px; top: 10px; }
#layerInstallIos .popupContent .right .strongText { font-size: 20px; font-weight: bold; color: #000000; padding-bottom: 10px; }
#layerInstallIos .InstallDiv { text-align: center; padding: 20px 10px 20px 10px; font-size: 15px; color: #000000; }
#layerInstallIos .InstallDiv img { width: 19px; position: relative; top: -4px; }
/* pwa 설치 유도 팝업 css END */


/* 회원탈퇴 css START */
#Unsubscribe_Content { width: 92%; max-width: 1400px; margin: 60px auto 100px; }
#Unsubscribe_Content .mbskin { position: relative; margin: 60px auto 0; border: 1px solid #ddd; width: 480px; background: #fff; text-align: center; }
#Unsubscribe_Content .mbskin h1 { margin: 60px 0 10px; font-size: 20px; text-align: center; font-weight: normal; color: #000; display: none; }
#Unsubscribe_Content .mbskin p { padding: 20px; border-bottom: 1px solid #e9e9e9; font-size: 14px; line-height: 1.4em; color: #666; letter-spacing: -1px; }
#Unsubscribe_Content .mbskin p strong { color: #000; font-size: 18px; margin: 0 0 5px; display: none; }

#Unsubscribe_Content fieldset { padding: 50px; text-align: left; display: block; margin: 0; }
#Unsubscribe_Content fieldset .confirm_id { font-size: 0.92em; color: #666; }
#Unsubscribe_Content fieldset #mb_confirm_id { display: block; margin: 5px 0 10px; font-weight: bold; }
#Unsubscribe_Content fieldset .sound_only { letter-spacing: -0.1em; display: inline-block !important; position: absolute; top: 0px; left: 0px; margin: 0 !important; padding: 0 !important; font-size: 0; line-height: 0; border: 0 !important; overflow: hidden !important; }
#Unsubscribe_Content fieldset .sound_only strong { font-size : 0; }
#Unsubscribe_Content fieldset #confirm_mb_password { background-color: #fff !important; width: 100%; height: 40px; border: 1px solid #ccc; background: #fff; color: #000; vertical-align: middle; border-radius: 3px; padding: 5px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); }
#Unsubscribe_Content fieldset input::placeholder { color : #666 !important; }

#Unsubscribe_Content fieldset #btn_submit { width: 100%; margin: 10px 0 0; height: 45px; font-size: 14px; padding: 0 7px; line-height: 1em; background: #333; color: #fff; border: 1px solid #333; }

@media screen and (max-width: 1400px){
	#Unsubscribe_Content { margin:40px auto 80px;}
	#Unsubscribe_Content .mbskin {padding: 10px;width: 100%;margin-top: 30px;}
}
@media screen and (max-width: 750px){
	#Unsubscribe_Content .mbskin fieldset .btn_submit {height: 30px;}
	/* 기본박스 */
	#Unsubscribe_Content .mbskin{margin:0 auto 0;width:auto;}
}

@media screen and (max-width:500px){
	#Unsubscribe_Content { margin:30px auto 60px}
}
/* 회원탈퇴 css END */

/* sns-icon */
.sns-icon .ico { display : inline-block; background : url('../img/social/sns_logo.png') no-repeat; vertical-align : top }
.sns-icon .txt { position:absolute;line-height:0;font-size:0;vertical-align:middle;overflow:hidden }

.sns-wrap-over .sns-icon {border-color:#dcdcdc}
.sns-wrap-over .sns-icon-not {border-color:#8b8b8b}
.sns-wrap-over .sns-naver{border-color:#18a400}
.sns-wrap-over .sns-naver .ico {background-position:-29px 0}
.sns-wrap-over .sns-google .ico {background-position:-58px 0}
.sns-wrap-over .sns-google {border-color:#ca2c19}
.sns-wrap-over .sns-facebook .ico {background-position:0 0 }
.sns-wrap-over .sns-facebook {border-color:#2e5393}
.sns-wrap-over .sns-kakao .ico {background-position:-87px 0}
.sns-wrap-over .sns-twitter {border-color:#488FC9}
.sns-wrap-over .sns-twitter .ico {background-position:-145px 0}
.sns-wrap-over .sns-payco {border-color:#C44646}
.sns-wrap-over .sns-payco .ico {background-position:-116px 0}
.sns-wrap-over .sns-kakao {border-color:#f2df00}

.sns-wrap-32 .sns-icon {display:inline-block;border-width:1px;border-style:solid;overflow:hidden;margin:0 1px; margin-top : 5px; }
.sns-wrap-32 .sns-icon .txt {margin:0 10px 0 0;font-size:0.95em;letter-spacing:-0.1em}
.sns-wrap-32 .sns-icon .ico {width:24px;height:24px}


.center { text-align : center; }

.flex { display : flex; }

.inline { display: inline-block; }

/* 채팅 CSS  START */
.scrollLock { overflow : hidden; }

#chatting_div #chatting {position: fixed;left: 0;bottom: 57px;display: flex;justify-content: space-between;width: 100%;padding: 5px;text-align: center;background-color:#fff;border-top:1px solid #ccc;z-index:100; padding-left : 10px; }

#chatting_div .chatting_fxield { transition : 1s; height: 50%; bottom : -50%; }
#chatting_div .chatting_field.active {bottom : 57px;}

#chatting_div #chatting_dim { position: fixed; bottom: 57px; left: 0; width: 100%; background-color: rgba(0, 0, 0, 0.5); height: 100%; display: flex; transition: 0.5s; visibility: hidden;}

#chatting_div #chatting .chat_img img {width: 32px;}

.visible{ visibility : visible !important; }

.dn { display : none !important; }

#chatting_div .chatting_field {
	background-color: #fff;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	/* 세로 컨텐츠가 늘어나는 경우 스크롤이 생기도록 설정 */
	overflow: auto;

	max-height: 70%;
	/* 아래에서 위로 나타나는 효과, max-height과 동일하게 작성 */
	position: fixed; 
	bottom: -70%; 
	height: 70%; 
	transition: 0.5s; 
	z-index : 100; 
	width: 100%;
}

#chatting_div .chatting_field #chatting_ui { width: 100%; padding : 10px; height: 100%; background-color: aliceblue; overflow-y : auto; }
#chatting_div .chatting_field #chatting_input textarea { width: 100%; border : 0; height : 80px; padding : 10px; font-size: 13px; font-weight: 300; color : #000000; }

#chatting_div .chatting_field #chatting_input .enter { text-align: right; padding: 5px; }
#chatting_div .chatting_field #chatting_input .enter .chatting_enter { display: inline-block; border: 1px solid #f2f2f2; padding: 4px 15px; font-size: 13px; background-color: #f2f2f2; color: #c2c2c2; font-weight: 300; }

#chatting_div .chatting_field #chatting_area { xxdisplay: inline-block; display: flex; flex-direction: column; }
#chatting_div .chatting_field #chatting_area .my_message_field { display : flex; margin-bottom : 10px; flex-direction : row-reverse; width: 80%; margin-left : auto; }
#chatting_div .chatting_field #chatting_area .message_field { display : flex; width: 80%; margin-bottom : 10px; }

#chatting_div .chatting_field #chatting_area .cloud { background-color: #ffffff; display: inline-block; padding: 7px 10px; border-radius: 10px; position : relative; float : left; margin: 0 5px; xxmargin-bottom: 30px; margin-top: 30px; box-shadow: -1px 2px 5px -3px}
#chatting_div .chatting_field #chatting_area .cloud .top { position: absolute; top: -22px; left : 0; }

#chatting_div .chatting_field #chatting_area .cloud .bottom { position: absolute; bottom: -22px; right : 0; }

#chatting_div .chatting_field #chatting_area .cloud::before { border-top: 10px solid #ffffff; border-left: 10px solid transparent; border-right: 0px solid transparent; border-bottom: 0px solid transparent; content: ""; position: absolute; border-top-left-radius: 5px; top: 10px; left: -10px; }

#chatting_div .chatting_field #chatting_area .myCloud { background-color: #fee500; display: inline-block; padding: 7px 10px; border-radius: 10px; margin: 10px 5px; position : relative; float : right; box-shadow: 1px 2px 5px -3px; margin-bottom : 0px; }

#chatting_div .chatting_field #chatting_area .myCloud .bottom { position: absolute; bottom: -22px; left : 0; }

#chatting_div .chatting_field #chatting_area .myCloud::after { border-top: 10px solid #fee500; border-left: 0px solid transparent; border-right: 10px solid transparent; border-bottom: 0px solid transparent; content: ""; position: absolute; border-top-right-radius: 5px; top: 10px; right: -10px; }

#chatting_div .chatting_field #chatting_area .hours { display: flex; align-items : end; font-size : 11px; }

#chatting_div .chatting_field #chatting_area span { text-align : center; border : 1px solid; margin : 0 auto; padding : 3px 5px; border-radius : 10px; background-color : darkgray; }

#noMessage { display: inline-block; border: 1px solid #9999ff; border-radius: 30px; padding: 3px 6px; text-align : center; margin : 0 auto; position : absolute; top : 5px; left : 50%; transform : translate( -50% , 5px); z-index : 1; background: #9999ff; color: #ffffff; opacity : 1; transition : opacity 1s ease-in-out; }

#noMessage._hide { opacity : 0; }

/* 채팅 CSS END */


/* 대회등록 페이지 regist_competition.php START */
.regist_competition_total { height: calc(100% - 192px); overflow-y : auto; }
.regist_competition_total .tab { margin: 10px 0;}
.regist_competition_total .tab p { text-align : center;}
.regist_competition_total .tab .top { padding : 10px; border-top: 1px solid #000000; text-align :center; border-bottom : 1px solid #000000; color : #000000; }
.regist_competition_total .tab .top img { width: 20px; float : right; }
.regist_competition_total .tab .top.on img { transform : rotate(180deg); }

.regist_competition_total .tab .first { padding : 10px; }
.regist_competition_total .tab .first p { color : red; }
.regist_competition_total .tab .first select { width: 100%; height: 30px; }

.regist_competition_total .tab .second ul { display: flex; white-space: nowrap; overflow-x: auto; gap: 10px; padding: 10px; }
.regist_competition_total .tab .second #regist { text-align: center; background: #000000; padding: 10px; color: #ffffff; opacity: 0.8; }

.regist_competition_total .competition_input { 
	background-color: #fff;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	/* 세로 컨텐츠가 늘어나는 경우 스크롤이 생기도록 설정 */
	overflow: auto;

	max-height: 70%;
	/* 아래에서 위로 나타나는 효과, max-height과 동일하게 작성 */
	position: fixed; 
	bottom: -70%; 
	height: 70%; 
	transition: 0.5s; 
	z-index : 100; 
	width: 100%;
}
.regist_competition_total .competition_input.active { bottom : 57px; }

.regist_competition_total #competition_input_dim { position: fixed; bottom: 57px; left: 0; width: 100%; background-color: rgba(0, 0, 0, 0.5); height: 100%; display: flex; transition: 0.5s; visibility: hidden; }
/* END */

/* 대회등록 컨텐츠 리스트 CSS START */
.contents_list_wrap { margin : 10px 0;}
.contents_list_wrap .contents_list { text-align :center; margin : 10px }
.contents_list_wrap .contents_list label { margin : 0;}
.contents_list_wrap input{position: absolute;width: 0;height: 0;opacity: 0;}
.contents_list_wrap .list_box{position:relative;}
.contents_list_wrap .list_box .chk{display:none;position:absolute; top : 50%; left : 50%; transform: translate(-50%, -50%); }
.contents_list_wrap .list_box .chk img { opacity : 0.9 }
.contents_list_wrap .list_box img { width: 100%; }
.contents_list_wrap input:checked + .list_box:before{content:'';position:absolute;left:0;top:0;display:block;width: calc( 100% + 8px );height: calc( 100% + 8px );margin: -4px 0 0 -4px;border:4px solid #fa0;}
.contents_list_wrap input:checked + .list_box .chk{display:block; width: 100%;}
/* END */

/* 대회등록 세부내용 CSS START */
.competition_input .name { margin : 10px; }
.competition_input .name input[type=text] , .competition_input .name select[name=timezone] { width: 100%; border: 0; border-bottom: 1px solid #999999; text-align : center; height: 30px; font-size : 16px; }
.competition_input .name select[name=stime] , .competition_input .name select[name=etime] { border: 0; border-bottom: 1px solid #999999; text-align: center;}
.m_10 { margin : 10px 0; }

.competition_input .name .select_file { cursor: pointer; border: 1px solid #666666; background: #999999; color: #ffffff; font-weight: normal; padding: 2px 10px; border-radius: 5px; margin: 5px 0; display: inline-block; }

.competition_input .name .file { margin-top : 10px; }
.competition_input .name .file .upload_file { border : 0; text-align: center; width: 100%; }
.competition_input .name .logo { width: 25%; border-radius : 20px; }
.competition_input .name .date_wrap > div { display : flex; gap : 10px; }

.competition_input .name .place img { border: 1px solid #999999; border-radius: 3px; background: #999999; padding: 4px; margin: 2px 2px 2px 8px; }
.competition_input .name #place_list { padding-top : 15px; }

.competition_input .name .submit { border: 1px solid #dbdbdb; border-radius: 5px; padding: 10px; }
.competition_input .name .device_list { width: 100%; height : 30px; font-size : 16px; }
.competition_input .name .select_device { display : flex; gap : 5px; margin : 5px; flex-wrap : wrap; }
.competition_input .name .league_update { text-align: center; background: #000000; padding: 10px; color: #ffffff; opacity: 0.8; width: 100%; border: 0; }
/* END */

/* 대회리스트 CSS START */
.league_total .league_list .league_img { padding : 10px 20px; }
.league_total .league_list .league_img img { width: 100%; border-radius : 30px; }
.league_total .league_list .league_short { text-align : right; padding : 0 20px; }

.slick-dots { text-align: center; width: 100%; }
.slick-dots li { display: inline-block; margin: 5px; }
.slick-dots li button { width: 10px; height: 10px; background: #dbdbdb; border-radius: 50%; cursor: pointer; font-size: 0; line-height: 0; text-indent: -99999px; border: 0; }
.slick-dots li.slick-active button { background : #000000; }
/* END */

/* 대회 상세페이지 CSS START */
#league_data { height: calc(100% - 192px); overflow-y : auto; }
#league_data .league_data_div { margin : 10px; }
#league_data .league_data_div .league_tab .update { background: #ff6666; border: 1px solid #990000; color: #ffffff; }
#league_data .league_data_div .league_tab .delete { background: #dbdbdb; border: 1px solid darkgray; }
#league_data .league_data_div table { width: 100%; border-collapse: separate; border-spacing: 0px 10px; }

#league_data .top_icon { display: flex; justify-content: space-between; align-items: center; }
#league_data .top_icon .icon_left { display: flex; gap: 10px; }
#league_data .top_icon .icon_left li { border: 1px solid #dbdbdb; padding: 5px; border-radius: 8px; }
#league_data .top_icon .icon_left .info { display: flex; align-items: center; }

#league_data .top_icon .icon_right { display: flex; gap: 10px; justify-content: right; }
#league_data .top_icon .icon_right li { border: 1px solid #dbdbdb; padding: 5px; border-radius: 8px; }

#league_data .competition_input { 
	background-color: #fff; border-top-left-radius: 10px; border-top-right-radius: 10px;
	/* 세로 컨텐츠가 늘어나는 경우 스크롤이 생기도록 설정 */
	overflow: auto;
	max-height: 70%;
	/* 아래에서 위로 나타나는 효과, max-height과 동일하게 작성 */
	position: fixed; bottom: -70%; height: 70%; transition: 0.5s; z-index : 100; width: 100%;
}
#league_data .competition_input.active { bottom : 57px; }

#league_data #competition_input_dim { position: fixed; bottom: 57px; left: 0; width: 100%; background-color: rgba(0, 0, 0, 0.5); height: 100%; display: flex; transition: 0.5s; visibility: hidden; }

#league_data .dates { text-align : right; padding : 0 20px; }
#league_data .dates div { display : inline-block; }
/* END */

/* 회원 정보 CSS START */
.history { padding : 10px; }
.history .member_info { display : flex; align-items : center; justify-content : center; gap : 5px; margin-bottom : 10px; }
.history .member_info span { font-size : 15px; }
.history .competition_data { margin-top : 10px; }
.history .competition_data table { width: 100%; }
.competition_data table , .competition_data th , .competition_data td , .competition_history table , .competition_history th , .competition_history td { 
	border : 1px solid #ddd; border-collapse: collapse;
}

.history .competition_history { margin-top : 20px; }

.history .more { margin-top: 20px; border: 1px solid #999; padding: 10px 0; }
/* END */

/* 기기 정보 CSS START */
.device_history { padding: 10px; }
.device_history ._device { margin-bottom : 10px; }
.device_history .competition_device_data tr td { padding : 3px; }
.device_history .competition_device_data { margin-top : 10px; }
.device_history .competition_device_list { margin-top : 20px; }
.device_history .competition_device_list .popup_search { display : flex; align-items : center; gap: 5px; }
.device_history .competition_device_list .popup_search input[name=search] { width: 100%; height: 31px; border: 0; border-bottom: 1px solid #999; padding-left: 8px; font-size: 12px; }
.device_history .competition_device_list .popup_search button { width: 33px; background-color: #999; border-color: #666; height: 31px; }
.device_history .competition_device_list .popup_search button i { color: #ffffff; font-size: 11px; line-height: 2; }


.device_history .competition_device_data table { width: 100%; }
.competition_device_data table , .competition_device_data th , .competition_device_data td , .competition_history table , .competition_history th , .competition_history td { 
	border : 1px solid #ddd; border-collapse: collapse;
}
.device_history .competition_device_data table th { color : #ffffff; padding : 3px; }
.device_history .competition_device_data table td { padding : 3px; }
.device_history * { font-size : 13px; }

.device_history .competition_device_list .more { margin-top: 20px; border: 1px solid #999; padding: 10px 0; }
/* END */

/* 대회 추가 정보 CSS START */
.league_info { margin: 10px; }
.league_info .info_save ul { display: flex; justify-content: end; }
.league_info .info_save ul li button { padding: 6px; border: 1px solid #990000; border-radius: 3px; font-size: 12px; background : #FF6666; color : #ffffff }
.sound_only { 
	display: inline-block !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0;
    line-height: 0;
    border: 0 !important;
    overflow: hidden !important;
}
.cke_sc { display : none; }

/* END */


/* 대회관리 CSS START (competition_info.php) */
.flex_10 { display : flex; gap : 10px; }
#competition_info * { color : #000000; }
	/* 전체 , 기기별 , 설정 UI */
#competition_info .competition_status { border-bottom: 1px solid rgb(0, 0, 0, 0.2); }
#competition_info .competition_status ul { display: flex; text-align: center; margin-bottom: 0; padding : 20px 0; }
#competition_info .competition_status ul li { width: calc(100% - 10px); padding: 0 20px; font-size: 24px; font-weight: bold; color : #999999; }
#competition_info .competition_status ul li.on { color : #000000; }
	/* 전체 */
#competition_info .all .info_data { padding : 0 20px 20px 20px; }
#competition_info .all .info_data table , #competition_info .device .list table { width : 100%; }
#competition_info .all .info_data table tr , #competition_info .device .list table tr { border-bottom: 1px solid rgb(0, 0, 0, 0.2); }
#competition_info .all .info_data table tr:last-child , #competition_info .device .list table tr:last-child { border-bottom : 0; }
#competition_info .all .info_data table tr td { font-size : 20px; padding : 20px 0; color : #999999; }
#competition_info .all .info_data table tr td.right { text-align: right; color : #000; font-weight : bold; font-size : 24px; }

#competition_info .all_history_button , #competition_info .device_history_button { background: #999999; padding: 10px; margin: 0 20px 20px 20px; text-align: center; border-radius: 5px }
#competition_info .device_history_button { margin : 0; }
#competition_info .all_history_button span , #competition_info .device_history_button span { color: #ffffff; font-weight: 300; }
	/* 기기별 */
#competition_info .device { padding : 0 20px 20px 20px; }
#competition_info .device .list { padding: 20px; background: #e6e6e6; border-radius: 10px; margin : 20px 0; }
#competition_info .device .list table .device_name { font-size: 24px; color: #000; font-weight: bold; text-align: center; padding : 0 20px 20px 20px; }
#competition_info .device .list table .device_name span { font-size: 24px; color: #000; font-weight: 300; }
#competition_info .device .list table td { padding : 20px 0px; font-size : 16px; }
#competition_info .device .list table td.right { text-align : right; font-size : 25px; color : #000000; font-weight : bold; }
	/* 설정 */
#competition_info .setting .name , #competition_info .setting .period , #competition_info .setting .time , #competition_info .setting .place , #competition_info .setting .coin , #competition_info .setting .comp_device , #competition_info .setting .logo_img , #competition_info .setting .competition_img { padding: 20px; border-bottom: 1px solid rgb(0, 0, 0, 0.2); }
#competition_info .setting .title { font-size: 24px; color: #999999; font-weight: bold; padding-bottom: 20px; }


#competition_info .setting .name input[name=name] , #competition_info .setting .limit input[name=limit] { border: 1px solid rgb(0, 0, 0, 0.4); width: calc(100% - 58px); text-align : center; }
#competition_info .setting .period .period_div { display: flex; gap: 5px; border: 1px solid rgb(0, 0, 0, 0.4); align-items: center; }
#competition_info .setting .period .period_div input[name=period_s] , #competition_info .setting .period .period_div input[name=period_e] { border: 0; padding: 7px 0px; width: 100%; text-align: center; }
#competition_info .setting .time select[name=time_zone] { border: 1px solid rgb(0, 0, 0, 0.4); width: calc(100% - 58px); padding-left: 10px; }
#competition_info .setting .time button , #competition_info .setting .coin button , #competition_info .setting .name button , #competition_info .setting .limit button { background: #999999; color: #ffffff; padding: 7px 10px; border-radius: 5px; border: 1px solid #999999; }
#competition_info .setting .place textarea[name=place] { border: 1px solid rgb(0, 0, 0, 0.4); width: calc(100% - 46px); height : 36px; padding : 5px; }
#competition_info .setting .place button { background: #999999; color: #ffffff; display: flex; justify-content: center; align-items: center; padding: 10px; border: 1px solid #999999; border-radius: 5px; gap: 10px; }
#competition_info .setting .place #place_list { margin-top : 20px; }
#competition_info .setting .place #place_list .place_list { display: flex; border: 1px solid rgb(0, 0, 0, 0.4); padding: 10px; align-items: center; }
#competition_info .setting .place #place_list .place_list ._place { width: calc(100% - 22px); }
#competition_info .setting .place #place_list .place_list ._place_del { padding-left: 10px; }

#competition_info .setting .coin input[name=coin] { border: 1px solid rgb(0, 0, 0, 0.4); width: 100px; height : 36px; text-align : center; }
#competition_info .setting .comp_device select[name=device] { border: 1px solid rgb(0, 0, 0, 0.4); width: 100%; padding-left: 10px; height: 36px; }
#competition_info .setting .comp_device .device_list , #competition_info .setting .comp_device .device_list_finish { background : url('../img/trash.png') no-repeat; background-color: #999999; background-position-x: calc(100% - 14px); padding: 10px; background-position-y: center; border-radius: 5px; text-align: center; color: #ffffff; font-weight : 300; }
#competition_info .setting .logo_img ._logo , #competition_info .setting .competition_img ._img { text-align: center; padding: 10px; border: 1px solid rgb(0, 0, 0, 0.4); }
#competition_info .setting .logo_img button , #competition_info .setting .competition_img button {  border-radius: 5px; color: #ffffff; padding: 10px 20px; width: calc(35% - 12px); }
#competition_info .setting .logo_img label , #competition_info .setting .competition_img label { border-radius: 5px; padding: 10px 20px; width: calc(35% - 12px); background: #999999; border: 1px solid #999999; margin-bottom: 0; text-align: center; font-weight: 400; }
#competition_info .setting .logo_img label div , #competition_info .setting .competition_img label div { color: #ffffff; }
#competition_info .setting .gray { background: #999999; border: 1px solid #999999; }
#competition_info .setting .red { border: 1px solid #ff6666; background: #ff6666; }

#competition_info .setting .logo_img ul li , #competition_info .setting .competition_img ul li { list-style-type: disc !important; margin-left : 25px; color : #000000; }
/* END */

/* 대회생성 CSS START (competition_insert.php) */
#competition_insert { padding-bottom : 70px; }
#competition_insert * { color : #000000; font-size : 24px; }
#competition_insert .top .step { display: flex; gap: 10px; padding: 20px; border-bottom: 1px solid rgb(0, 0, 0, 0.2); }
#competition_insert .content_list ul li { width: calc(50% - 3px); display: inline-block; padding: 10px; }
#competition_insert input[type=radio]{position: absolute;width: 0;height: 0;opacity: 0;}
#competition_insert .list_box{ margin : 0; position:relative; }
#competition_insert .list_box .chk{display:none;position:absolute; top : 4px; left : 4px; }
#competition_insert .list_box .chk img { width : 35%; }
#competition_insert input:checked + .list_box:before{content:'';position:absolute;left:0;top:0;display:block;width: calc( 100% + 8px );height: calc( 100% + 8px );margin: -4px 0 0 -4px;border:4px solid #fa0;}
#competition_insert input:checked + .list_box .chk{display:block; width: 100%;}

#competition_insert .comp_name .name { padding: 20px; border-bottom: 1px solid rgb(0, 0, 0, 0.2); }
#competition_insert .comp_name .name input[name=name] { width: 100%; border: 1px solid rgb(0, 0, 0, 0.4); font-size: 16px; height : 34px; text-align: center; padding : 0 10px; }
#competition_insert .comp_name .logo_img { padding: 20px; border-bottom: 1px solid rgb(0, 0, 0, 0.2); }
#competition_insert .comp_name .logo_img .title { font-size: 24px; color: #999999; font-weight: bold; padding-bottom: 20px; }
#competition_insert .comp_name .logo_img ul li { list-style-type: disc !important; margin-left: 25px; color: #000000; font-size: 14px; }
#competition_insert .comp_name .logo_img ._logo { text-align: center; padding: 10px; border: 1px solid rgb(0, 0, 0, 0.4); }
#competition_insert .comp_name .logo_img label { border-radius: 5px; padding: 10px 20px; width: calc(50% - 5px); background: #999999; border: 1px solid #999999; margin-bottom: 0; text-align: center; font-weight: 400; }
#competition_insert .comp_name .logo_img label div { font-size : 14px; color : #ffffff; }
#competition_insert .comp_name .logo_img button { border-radius: 5px; padding: 10px 20px; width: calc(50% - 5px); background: #ff6666; border: 1px solid #ff6666; margin-bottom: 0; text-align: center; font-weight: 400; color: #ffffff; font-size : 14px; }

#competition_insert .comp_name .competition_img { padding: 20px; }
#competition_insert .comp_name .competition_img .title { font-size: 24px; color: #999999; font-weight: bold; padding-bottom: 20px; }
#competition_insert .comp_name .competition_img ul li { list-style-type: disc !important; margin-left: 25px; color: #000000; font-size: 14px; }
#competition_insert .comp_name .competition_img label { border-radius: 5px; padding: 10px 20px; width: calc(50% - 5px); background: #999999; border: 1px solid #999999; margin-bottom: 0; text-align: center; font-weight: 400; }
#competition_insert .comp_name .competition_img label div {font-size : 14px; color : #ffffff;}
#competition_insert .comp_name .competition_img button { border-radius: 5px; padding: 10px 20px; width: calc(50% - 5px); background: #ff6666; border: 1px solid #ff6666; margin-bottom: 0; text-align: center; font-weight: 400; color: #ffffff; font-size : 14px; }


#competition_insert .comp_place .place_field { padding : 20px; border-bottom : 1px solid rgb(0,0,0,0.2); }
#competition_insert .comp_place .place_field .input_field { display: flex; gap: 10px; }
#competition_insert .comp_place .place_field .input_field input {border: 1px solid rgb(0, 0, 0, 0.4); font-size: 14px; text-align: center; width: calc(100% - 44px);}
#competition_insert .comp_place .place_field .input_field button {background: #999999; border: 1px solid #999999; display: flex; justify-content: center; align-items: center; width: 34px; height: 34px; border-radius: 5px;}
#competition_insert .comp_place .place_field .place_list {display: flex; border: 1px solid rgb(0, 0, 0, 0.4); padding: 0 10px; margin-top: 10px; gap: 20px; align-items: center; }
#competition_insert .comp_place .place_field .place_list .text {font-size: 14px; width: calc(100% - 32px);}
#competition_insert .comp_place .time_field { padding : 20px; }
#competition_insert .comp_place .time_field .select_time { display: flex; gap: 10px; margin-bottom: 20px; }
#competition_insert .comp_place .time_field .select_time input { background : url('../img/calendar.png') no-repeat; border: 1px solid rgb(0, 0, 0, 0.4); font-size: 14px; text-align: center; width: calc(100% - 73px); background-position-x: 96%; background-position-y: center; }
#competition_insert .comp_place .time_field .select_time select { font-size: 14px; border: 1px solid rgb(0, 0, 0, 0.4); height : 34px; padding-right: 10px; padding-left: 5px; }
#competition_insert .comp_place .time_field .select_time select option { font-size :14px; }
#competition_insert .comp_place .time_field select[name=time_zone] { width: 100%; border: 1px solid rgb(0, 0, 0, 0.4); font-size: 14px; text-align: center; height: 34px; }
#competition_insert .comp_place .time_field select[name=time_zone] option { font-size : 14px; }

#competition_insert .comp_device .device_field { padding : 20px; }
#competition_insert .comp_device .device_field select { font-size: 14px; width: 100%; border: 1px solid rgb(0, 0, 0, 0.4); height: 34px; padding: 0 10px; }
#competition_insert .comp_device .device_field select option { font-size : 14px; }
#competition_insert .comp_device .device_field .device_list { border: 1px solid #999999; border-radius: 5px; text-align: center; font-size: 14px; color: #ffffff; padding: 10px; margin-top: 10px; background : url('../img/trash.png') no-repeat; background-color: #999999; background-position-x: 97%; background-position-y: center; }

#competition_insert .comp_coin .coin_field { display: flex; justify-content: center; padding: 20px;}
#competition_insert .comp_coin .coin_field .coin_div input[name=coin] { border: 1px solid rgb(0, 0, 0, 0.4); width: 100px; text-align: center; height: 34px; font-size: 14px;}
#competition_insert .comp_coin .coin_field .coin_div span { font-size : 14px; }
#competition_insert .comp_coin .coin_field button { background: #999999; border: 1px solid #999999; color: #ffffff; font-size: 14px; padding: 0 10px; border-radius: 5px; height: 34px; }
#competition_insert .comp_coin .text { font-size : 14px; text-align : center; }

#competition_insert .comp_limit .limit_field { display: flex; justify-content: center; align-items : center; gap : 10px; padding: 20px; }
#competition_insert .comp_limit .limit_field .limit_div input[name=limit] { border: 1px solid rgb(0, 0, 0, 0.4); width: 100%; text-align: center; height: 34px; font-size: 14px; }
#competition_insert .comp_limit .limit_field .save { background: #999999; border: 1px solid #999999; color: #ffffff; font-size: 14px; padding: 0 10px; border-radius: 5px; height: 34px; }
#competition_insert .comp_limit .text { text-align : center; font-size : 14px; }

#appDirection { position: fixed; left: 0; bottom: 0; display: flex; justify-content: space-between; width: 100%; padding: 10px; text-align: center; background-color: #fff; border-top: 1px solid #ccc; z-index: 100; align-items: center; }
/* END */


/* 대회관리 CSS START (competition_list.php) */
.competition_status { border-bottom: 1px solid rgb(0, 0, 0, 0.2); }
.competition_status ul { display: flex; text-align: center; margin-bottom: 0; padding : 20px 0; }
.competition_status ul li { width: calc(100% - 10px); padding: 0 20px; font-size: 25px; font-weight: bold; color : #999999; }
.competition_status ul li.on { color : #000000; }

.competition_list ul { padding : 0 20px 100px 20px; }
.competition_list ul li { cursor:pointer; display : flex; align-items : center; background : #999999; margin-top : 20px; padding: 10px; border-radius: 10px; }
.competition_list ul li .comp_logo { position : relative; }
.competition_list ul li .comp_logo > img { width: 80px; height: 80px; border-radius: 5px; background-color: #ffffff;}
.competition_list ul li .comp_logo .enterImg { position: absolute; top: -20px; left: -20px; }
.competition_list ul li .comp_logo .enterImg img { width: 80px; }
.competition_list ul li .comp_info { width: 100%; text-align: center; }
.competition_list ul li .comp_info .comp_title { color : #ffffff; text-shadow: 1px 1px 1px #000000; font-size : 20px; font-weight : bold; }
.competition_list ul li .comp_info .comp_period { background: #ffffff; display: inline-block; border-radius: 30px; padding: 0 10px; color: #000000; margin-top : 15px; font-size :15px; font-weight : 300; }

.appInsert { position: fixed; left: 0; bottom: 0; display: flex; justify-content: space-between; width: 100%; padding: 10px; text-align: center; background-color: #fff; border-top: 1px solid #ccc; z-index: 100; }
.appInsert div { background: #ff6666; border: 1px solid #ff6666; width: 100%; border-radius: 10px; padding: 8px 10px; display: flex; align-items: center; justify-content: center; gap : 10px; }
.appInsert div a { background: #ff6666; border: 1px solid #ff6666; font-size: 24px; color: #ffffff; font-weight: 700; }
/* END */

/* 대회 목록 페이지 START */
.competition_status { border-bottom: 1px solid rgb(0, 0, 0, 0.2); }
.competition_status ul { display: flex; text-align: center; margin-bottom: 0; padding : 20px 0; }
.competition_status ul li { width: calc(100% - 10px); padding: 0 20px; font-size: 25px; font-weight: bold; color : #999999; display : flex; align-items : center; justify-content: center; }
.competition_status ul li.on { color : #000000; }

.competition_date { display : flex; padding : 15px; border-bottom : 1px solid rgb(0,0,0, 0.2); gap : 10px; }
.competition_date .date_field { display: flex; gap: 10px; justify-content: center; align-items: center; height : 36px; width: 100%; border: 1px solid #999999; }
.competition_date .date_field .start { position: relative; width: 100%; padding-right: 5px; }
.competition_date .date_field .end { position: relative; width: 100%; padding-right: 10px; }
.competition_date input[type=text] { border: 0; padding-right: 20px; width: 100%; background : url('../img/calendar.png') no-repeat; font-size: 16px; text-align: center; background-position-x: right; background-position-y: center; background-size: 15px; font-weight: 300; }
.competition_date .dateSubmit { display: block; width: 36px; height: 36px; background: url(../img/common/icon_search.svg) no-repeat center; background-color: #999; border-radius: 5px; background-size: 15px; }

.competition_list ul { padding : 0 20px 80px 20px; }
.competition_list ul li { cursor:pointer; display : flex; align-items : center; background : #999999; margin-top : 20px; padding: 10px; border-radius: 10px; }
.competition_list ul li .comp_logo { position : relative; }
.competition_list ul li .comp_logo > img { width: 80px; height: 80px; border-radius: 5px; background-color: #ffffff;}
.competition_list ul li .comp_logo .enterImg { position: absolute; top: -20px; left: -20px; }
.competition_list ul li .comp_logo .enterImg img { width: 80px; }
.competition_list ul li .comp_info { width: 100%; text-align: center; }
.competition_list ul li .comp_info .comp_title { color : #ffffff; text-shadow: 1px 1px 1px #000000; font-size : 20px; font-weight : bold; }
.competition_list ul li .comp_info .comp_period { background: #ffffff; display: inline-block; border-radius: 30px; padding: 0 10px; color: #000000; margin-top : 15px; font-size :15px; font-weight : 300; }

.competition_distance { text-align : center; padding : 10px 0; }
.competition_distance label { display: flex; justify-content: center; align-items: center; gap: 5px; font-size: 18px; }
.competition_distance .flex { display: flex; justify-content: center; align-items: center; }
.realtime_mode { font-size: 20px; border: 1px solid #999; width: 160px; border-radius: 5px; padding: 3px; }
.competition_distance .flex span { font-size : 20px; }
.realtime_mode.on , .realtime_mode.on span { border-color : #4285F4 !important; background : #4285F4; color : #ffffff; }
/* END */

/* 서브 메뉴 START */
#slide_menu_dim { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: rgb(0, 0, 0, 0.3); z-index: 999; }
#slide_menu { position: fixed; top: 0; right: -100%; width: 80%; height: 100%; display: block; background: #3d3d3d; overflow-y: auto; transition: all 0.5s; color: #ffffff; z-index : 1000; }
#slide_menu.on { right : 0; }
#slide_menu * { font-size : 20px; color : #fff; }
#slide_menu .underline { border-bottom: 1px solid rgb(255, 255, 255, 0.2); }
#slide_menu ul { padding-left: 50px; margin-bottom : 0; }
#slide_menu ul li { list-style-type : disc !important; display : revert; font-size : 14px; padding-bottom : 25px; }
#slide_menu ul li a { line-height : 19px; }
#slide_menu ul li span { font-weight : 200; }

#slide_menu .underline .mem { display: flex; justify-content: space-between; padding: 20px; align-items: center; height : 90px; }
#slide_menu .underline .mem .mem_img img { width: 48px; height: 48px; border-radius: 50%; }

#slide_menu .menu { height: calc(100% - 90px); overflow-y: auto; }
#slide_menu .menu .coin .coin_tab { display: flex; justify-content: space-between; padding: 20px; }
#slide_menu .menu .coin .coin_tab .text_field { position : relative; }
#slide_menu .g_color { color: rgb(255, 255, 255, 0.6); }
#slide_menu .menu .coin .coin_tab .text_field .new { position: absolute; top: -13px; right: -11px; }
#slide_menu .menu .coin .coin_tab .field { display: flex; gap: 10px; }
#slide_menu .menu .coin .coin_tab .field img { width: 20px; }
#slide_menu .menu .coin .coin_tab .field span { font-weight: 300; }

#slide_menu .list .list_tab { padding : 20px; }

#slide_menu .board .board_tab { padding: 20px; }
#slide_menu .po_rel { position : relative; }
#slide_menu .board .po_rel .icon { position: absolute; top: -13px; right: -11px; }

#slide_menu .menu .new_alarm { display: flex; align-items: center; justify-content: space-between; padding: 20px; }
#slide_menu .menu .new_alarm .new_alarm_field { display: flex; gap: 10px; align-items: center; }
#slide_menu .menu .new_alarm .new_alarm_field .icon { position: absolute; top: -9px; right: -5px; }

#slide_menu .language .language_tab { padding: 20px; }
#slide_menu .language .lang_change { display: flex; align-items: center; justify-content: space-between; padding: 0 20px 20px 20px; }
#slide_menu .language .lang_change .lang_field { display: flex; gap: 10px; align-items: center; }

#slide_menu .menu .logout { padding : 10px; }
#slide_menu .menu .logout button { background: rgb(153, 153, 153, 1); border: rgb(153, 153, 153, 1); width: 100%; padding: 10px; font-size: 17px; border-radius: 5px; font-weight : 300; }

#slide_menu .guest a { display: flex; justify-content: space-between; padding: 20px; align-items: center; height : 70px; }
#slide_menu .guest a .guest_tab { display: flex; align-items: center; gap: 10px; }
#slide_menu .guest a .enter { display: flex; flex-direction: column; }

#slide_menu .li { display: flex; align-items: center; justify-content: space-between; padding-right: 20px; }
#slide_menu .alarmText { padding: 10px 50px; font-size: 15px; font-weight: 100; }
/* END */

/* 웹소켓 연결 여부 CSS START */
#websocket_img { display : inline-block; width: 30px; height :26px; background-size : 30px 26px; background-color : #ffffff; }
#websocket_img.connect { -webkit-mask: url("../../img/signal.svg") no-repeat center; mask: url("../../img/signal.svg") no-repeat center; -webkit-mask-size: contain; mask-size: contain; }
#websocket_img.disconnect { -webkit-mask: url("../../img/signal-slash.svg") no-repeat center; mask: url("../../img/signal-slash.svg") no-repeat center; -webkit-mask-size: contain; mask-size: contain; }
/* END */

/* 30초 카운트다운 CSS START */
#start_count_dim { background: #000000; position: fixed; width: 100%; left: 0; top: 0; bottom: 0; opacity: 0.8; z-index : 101; }
#start_count { z-index: 102; position: fixed; width: 100%; text-align: center; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#start_count #time { color: #ffffff; font-size: 80px; font-weight: bold; }
#start_count .gameStart { color: #ffffff; background: #ff6666; margin-bottom: 40px; font-size: 22px; padding: 10px; border-radius: 10px; }
#start_count .Cancel { color: #ffffff; background: #999999; font-size: 22px; padding: 10px; border-radius: 10px; }
/* END */


/* participation.php CSS START */
#participation * { color : #000000; }
#participation { text-align : center; }
#participation #now .nickname { font-size: 20px; margin: 90px 0; }
#participation #now .start { background : #ff6666; border : 1px solid #ff6666; color : #ffffff; width: 100%; font-size: 20px; padding: 10px; border-radius: 10px; }
#participation #now .starting { background : #ff6666; border : 1px solid #ff6666; color : #ffffff; width: 100%; font-size: 20px; padding: 10px; border-radius: 10px; }

#participation #wait #waitlist { height : 150px; overflow-y : auto; }
#participation #wait .reserv { width: 100%; border: 1px solid #ff6666; background: #ff6666; color: #ffffff; padding: 10px 20px; font-size: 23px; border-radius: 10px; }
#participation #wait .reserv_cancel { width: 100%; border: 1px solid #ff6666; background: #ff6666; color: #ffffff; padding: 10px 20px; font-size: 23px; border-radius: 10px; }

#participation #wait .waiting { padding : 40px 40px 0 40px; }
#participation #wait .waiting .p_b_10 { padding-bottom: 10px; }
#participation #wait .waiting .border { border: 1px solid #999999; padding: 20px; }
#participation #wait .waiting .border h1 { font-size: 23px; font-weight: 400; }
#participation #wait .waiting .border h1 .player { font-size: 23px; }

#participation #wait .fix { position: fixed; width: 100%; bottom: 0; padding: 40px; }
#participation #wait .fix .p_20 { padding: 20px; }
#participation #wait .fix .p_20 h1 { font-size: 23px; font-weight: 400; }
/* END */

/* 승인 버튼 */
.managerButton { margin-top: 10px; text-align: center; display: flex; justify-content: center; }
.managerButton #Pass { height: 30px; padding: 0 5px; color: #fff; font-weight: 500; border: 1px solid #900; background-color: #f66; border-radius: 3px; line-height: 30px; width: 140px; z-index : 1; }

/* 알림 팝업 */
.notify-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.notify-modal { background: #fff; width: 320px; border-radius: 16px; padding: 24px; text-align: center; box-shadow: 0 10px 20px rgba(0,0,0,0.15); animation: fadeIn .25s ease-out; }
.notify-icon { font-size: 48px; margin-bottom: 12px; }
.notify-title { font-size: 20px; margin: 0 0 8px 0; font-weight: bold; }
.notify-desc { font-size: 14px; color: #666; margin-bottom: 16px; line-height: 1.5; }
.notify-flex { display : flex; gap : 10px; }
.notify-button { color: #fff; width: 100%; padding: 12px 0; border-radius: 8px; font-size: 15px; cursor: pointer; border: none; }
.notify-button-accept { background: #3b82f6; }
.notify-button-refuse { background: #ef4444; }
.notify-button:hover { background: #2563eb; }
.notify-button-refuse:hover { background: #dc2626; }
.notify-status { margin-top: 12px; font-size: 13px; color: #444; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 등록된 SMT 리스트 */
.device-list { width: 100%; background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid #ddd; }
.device-item { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid #eee; cursor: pointer; transition: background 0.2s ease; margin-bottom : 0; }
.device-item:last-child { border-bottom: none; }
.device-item:hover { background: #f8f9fc; }
.device-title { font-size: 17px; font-weight: 600; margin-bottom: 2px; }
.device-sub { font-size: 13px; color: #666; }
.device-checkmark { width: 20px; height: 20px; border: 2px solid #bbb; border-radius: 50%; transition: all 0.2s ease; }
.device-item.selected .device-checkmark { background: #333333; border-color: #333333; box-shadow: 0 0 4px rgba(0,0,0,0.6); }
.device-item.selected { background: #e6e6e6; }