@charset "utf-8";

@font-face {
	font-family: 'Light';
	src: url('/font/Pretendard-ExtraLight.woff')  format('woff');
}
@font-face {
	font-family: 'Regular';
	src: url('/font/Pretendard-Regular.woff') ;
}
@font-face {
	font-family: 'SemiBold';
	src: url('/font/Pretendard-SemiBold.woff') ;
}
@font-face {
	font-family: 'Bold';
	src: url('/font/Pretendard-Bold.woff') ;
}
@font-face {
	font-family: 'Black';
	src: url('/font/Pretendard-Black.woff') ;
}

*{
	margin: 0;
	padding: 0;
}

body{
	font-family: 'Regular',sans-serif;
	font-size: 14px;
	color:#000000;
	background-color: #edf0f5;
	overflow-x: hidden;
}

html::-webkit-scrollbar {width: 5px;}
html::-webkit-scrollbar-track {background: #eceff3;}
html::-webkit-scrollbar-thumb {background: #a1acbb;}
html::-webkit-scrollbar-thumb:hover {background: #7e94b4;}


body,ul,dl,ol,li,dl,dt{margin:0; padding:0; list-style-type:none;}
a{ text-decoration:none; color:hsl(0, 0%, 0%);}
.moveUrl{ cursor: pointer;}
.openUrl{ cursor: pointer;}
.imgOpen{ cursor: pointer;}
.urlLink{ cursor: pointer; color: #0075ff;}
.notScroll {overflow: hidden; width: 100%;height: 100vh;touch-action:none;}
input[type=text],input[type=email],input[type=file],input[type=password],input[type=date],input[type=month],input[type=datetime-local],input[type=time],input[type=number],select{font-family: 'Regular',sans-serif; height: 40px; line-height: 40px; border: solid 1px #e4e4e8; outline: none; padding: 0 10px 0 10px; font-size: 13px; vertical-align: middle; color: #000;}
input::placeholder{ color: #999;}
textarea{ border: solid 1px #e4e4e8; width:100%; padding: 15px; height: 150px; resize: none; font-family: 'Regular',sans-serif; font-size: 15px; line-height: 20px; outline: none;}
input[type="checkbox"] { -webkit-appearance: none; position: relative; width: 18px; height: 18px; cursor: pointer; outline: none !important; border: 1px solid #e1e1e1; color: #fff; border-radius: 2px; background: #ffffff; vertical-align: middle; margin:0 2px 2px 15px; transition: 0.3s;}
input[type="checkbox"]::before { content: "\2714"; position: absolute; top: 50%; left: 50%; overflow: hidden; transform: scale(0) translate(-50%, -50%); line-height: 1;}
input[type="checkbox"]:hover { border-color: rgba(0, 0, 0, 0.3);}
input[type="checkbox"]:checked { background-color: #0075ff; border-color: #0075ff; color: white;}
input[type="checkbox"]:checked::before { border-radius: 2px; transform: scale(1) translate(-50%, -50%)}
input[type="checkbox"]:first-child{ margin: 0 2px 0 0;}
input[type="radio"] { -webkit-appearance: none; position: relative; width: 18px; height: 18px; cursor: pointer; outline: none !important; border: 5px solid #e1e1e1; border-radius: 18px; background: #fff; vertical-align: middle; margin:0 5px 0 15px; transition: 0.3s;}
input[type="radio"]::before {position: absolute; top: 50%; left: 50%; transform: scale(0) translate(-50%, -50%); line-height: 1;}
input[type="radio"]:hover {border-color: rgba(0, 0, 0, 0.3);}
input[type="radio"]:checked {background-color: #fff; border: 5px solid #1659a8; color: #fff;}
input[type="radio"]:checked::before { border-radius: 18px; transform: scale(1) translate(-50%, -50%)}
input[type="radio"]:first-child{ margin: 0 5px 2px 0;}
.select2-container--default .select2-selection--single{ border:solid 1px #e4e4e8; border-radius: 0;}
.select2-container .select2-selection--single {height:40px; line-height:40px;}
.select2-container--default .select2-selection--single .select2-selection__rendered{ line-height:40px;}
.select2-container--default .select2-selection--single .select2-selection__arrow{ height: 38px;}
.fend{clear:both;}
img{ vertical-align:top; border:0; -webkit-user-drag: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.selectCustom{ position: relative; user-select: none;}
.selectCustom::before{ content: ''; position:absolute; top:0; left: 0; width:100%; height: 100%; z-index: 400; display: none;}
.selectCustom.open::before{ display: block;}
.selectCustom .sel{ position: relative; height: 40px; line-height: 40px; padding: 0 35px 0 10px; border: solid 1px #e4e4e8; border-radius: 3px; cursor: pointer;}
.selectCustom .sel span{ color: #999;}
.selectCustom .sel::after{ content: '\02C7'; position: absolute; top:10px; right: 5px; font-size: 30px; z-index: 300;}
.selectCustom .sel:hover{ border: solid 1px #aaa;}
.selectCustom.open .sel::after{ content: '\02C6';}
.selectCustom .opt{ position: absolute; top:41px; left: 0; width:calc(100% - 2px); background-color: #fff; border: solid 1px #aaa; box-shadow:0 0 8px rgba(0, 0, 0, .1); padding: 5px 0 5px 0; max-height: 220px; overflow-y: auto; outline: none; display: none; z-index: 500;}
.selectCustom.up .opt{ top:auto; bottom:41px;}
.selectCustom .opt div{ height: 30px; line-height: 30px; padding: 0 0 0 10px; cursor: pointer;}
.selectCustom .opt div:hover{ background-color: #346aff; color: #fff;}

input[type="checkbox"].toggle{ display: none;}
input[type="checkbox"].toggle + label{position: relative; display: inline-block; width:50px; height: 20px; border-radius: 22px; border: solid 1px #e0e2e6; background-color: #f5f7fa; vertical-align: middle; margin: 0 0 0 7px; cursor: pointer;}
input[type="checkbox"].toggle + label::before{ content: ''; position: absolute; top:-3px; left: -3px; width:24px; height: 24px; border-radius: 24px; border: solid 1px #e0e2e6; background-color: #fff; box-shadow:0 0 5px rgba(0, 0, 0, .2);}
input[type="checkbox"].toggle + label::before{ animation:toggle_off 0.3s ease-out forwards;}
@keyframes toggle_off {
	0%{ left:29px;}
	100%{ left:-3px;}
}
input[type="checkbox"].toggle:checked ~ label{ border: solid 1px #346aff; background-color: #346aff;}
input[type="checkbox"].toggle:checked ~ label::before{ animation:toggle_on 0.3s ease-out forwards;}
@keyframes toggle_on {
	0%{ left:-3px;}
	100%{ left:29px;}
}
.onlyPc{ display: none;}
@media(max-width:800px) {
	.onlyPc{ position: fixed; top:0; left: 0; width:100%; height: 100%; background-color: #fff; color: #818898; z-index: 50000; display: block;}
	.onlyPc .pcBox{ position: absolute; top:calc(50% - 80px); left: 0; width:100%; text-align: center; font-size: 18px; letter-spacing: -1px; font-family: 'Bold', sans-serif;}
	.onlyPc .pcBox .fa-display{ font-size: 50px; margin-bottom: 10px;}
	.onlyPc .pcBox .btn{ display: inline-table; width:100px; height: 36px; line-height: 36px; border-radius: 5px; border: solid 1px #e1e1e1; margin: 15px 0 0 0; font-size: 14px; font-family: 'Regular', sans-serif;}
}

.login_wrap{ position: fixed; top:0; left: 0; width:100%; height: 100%; z-index: 100;}
.login_wrap .bg{ position: absolute; top:50%; left: 50%; width:70%; height: 70%; transform: translate(-50%, -50%); z-index: 200; opacity: 0.3;}
.login_wrap .login_box{ position: absolute; top:calc(50% - 250px); left: calc(50% - 200px); width:400px; height: 450px; background-color: #fff; border-radius: 15px; box-shadow:0 0 5px rgba(0, 0, 0, .02); z-index: 500;}
.login_wrap .login_box .logo{ text-align: center; padding: 70px 0 40px 0;}
.login_wrap .login_box .logo img{ height: 24px;}
.login_wrap .login_box .inp{ position: relative; height:107px; margin: 0 56px 0 56px;}
.login_wrap .login_box .inp input{ height: 54px; line-height: 54px; width:calc(100% - 2px);}
.login_wrap .login_box .inp .id{ position: absolute; top:0; left: 0; border-radius: 5px 5px 0 0; z-index: 50;}
.login_wrap .login_box .inp .pw{ position: absolute; bottom:0; left: 0; border-radius: 0 0 5px 5px; z-index: 50;}
.login_wrap .login_box.setting .inp .pw{border-radius: 5px 5px 5px 5px;}
.login_wrap .login_box.setting .setting_tit{ text-align: center; font-size: 18px; font-family: 'Bold', sans-serif;}
.login_wrap .login_box .inp input:focus{ border: solid 1px #2d3a58; z-index: 100;}
.login_wrap .login_box .inp i{ position: absolute; bottom: 7px; right: 2px; width:40px; height: 40px; line-height: 40px; color: #2d3a58; text-align: center; z-index: 200; cursor: pointer;}
.login_wrap .login_box .inp i.fa-eye-slash{ color: #ccc;}
.login_wrap .login_box .inp i.fa-eye{ display: none;}
.login_wrap .login_box .state{ margin: 15px 56px 0 56px; text-align: right; color: #999; font-size: 13px;}
.login_wrap .login_box .btn{ height: 56px; line-height: 56px; text-align: center; background-color: #2d3a58; color: #fff; font-size: 16px; border-radius: 3px; margin: 20px 56px 0 56px; cursor: pointer;}
.login_wrap .login_box .copy{ text-align: center; color: #999; padding:30px 0 0 0;}
@media(max-width:800px) {
	.login_wrap .login_box{ position: absolute; top:calc(50% - 250px); left: 15px; width:calc(100% - 30px); height: 450px; background-color: #fff; border-radius: 15px; box-shadow:0 0 5px rgba(0, 0, 0, .02);}
	.login_wrap .login_box .inp{ position: relative; height:107px; margin: 0 30px 0 30px;}
	.login_wrap .login_box .state{ margin: 15px 30px 0 30px; text-align: right; color: #999; font-size: 13px;}
	.login_wrap .login_box .btn{ height: 56px; line-height: 56px; text-align: center; background-color: #2d3a58; color: #fff; font-size: 16px; border-radius: 3px; margin: 20px 30px 0 30px; cursor: pointer;}
}

.menu_wrap{ position: fixed; top:0; left: 0; width:250px; height: 100%; background-color: #ffffff; border-right:solid 1px #e0e2e6; z-index: 1100;}
.menu_wrap.on{ animation:menu_on 0.5s ease-out forwards;}
@keyframes menu_on {
	0%{ left:-200px;}
	100%{ left:0;}
}
.menu_wrap.off{ animation:menu_off 0.5s ease-out forwards;}
@keyframes menu_off {
	0%{ left:0;}
	100%{ left:-200px;}
}
.menu_wrap .arrow_tg{ text-align: right;}
.menu_wrap .arrow_tg i{ width:60px !important; height: 60px !important; line-height: 60px; text-align: center; font-size: 20px; cursor: pointer; margin-right: 12px;}
.menu_wrap .mo_menu_close{ display: none;}
.menu_wrap .logo{ position: absolute; top:0; left: 0; width:calc(100% - 60px); height: 60px;}
.menu_wrap .logo img{ position: absolute; top:50%; left: 15px; transform: translate(0, -50%); max-height: 18px;}
.menu_wrap .member{ height: 50px; text-align: center; line-height: 50px; background-color: #f2f4f8; border-radius: 5px; margin: 0 10px 0 10px;}
.menu_wrap .member span{ font-family: 'Bold', sans-serif; font-size: 16px;}
.menu_wrap .member .btn_logout{ display: inline-table; padding: 0 10px 0 10px; font-size: 11px; height: 20px; line-height: 20px; border-radius: 20px; background-color: #cdd0d6; color: #fff; vertical-align: middle; margin: 0 0 2px 5px; cursor: pointer;}

.menu_wrap .menu{ position: absolute; top: 120px; left: 0; width:100%; height: calc(100% - 120px); overflow-y: auto;}
.menu_wrap .menu::-webkit-scrollbar {width: 5px;}
.menu_wrap .menu::-webkit-scrollbar-track {background: #eceff3;}
.menu_wrap .menu::-webkit-scrollbar-thumb {background: #a1acbb;}
.menu_wrap .menu::-webkit-scrollbar-thumb:hover {background: #7e94b4;}
.menu_wrap .menu ul{ border-bottom: solid 1px #eee;}
.menu_wrap .menu ul:hover li:nth-child(1){ color:var(--main_color);}
.menu_wrap .menu ul li:nth-child(1){ position: relative; font-size: 15px; font-family: 'SemiBold', sans-serif; letter-spacing: -1px; height: 50px; line-height: 50px; color: #818898; cursor: pointer; padding: 0 15px 0 40px;}
.menu_wrap .menu ul li:nth-child(1) .ico{ position: absolute; top:50%; left:18px; transform: translate(0, -50%);}
.menu_wrap .menu ul li:nth-child(1) .arw{ position: absolute; top:0; right: 15px; font-size: 18px; line-height: 50px; color: #ccc;}
.menu_wrap .menu ul li:nth-child(1) .arw i{ line-height: 50px;}
.menu_wrap .menu ul li:nth-child(2){ padding: 0 0 0 40px; color: #818898; max-height: 0; overflow: hidden; background-color: #f9fafd;}
.menu_wrap .menu ul li:nth-child(2) dl{ position: relative; height: 36px; line-height: 36px; border-top: dashed 1px #e1e1e1; cursor: pointer;}
.menu_wrap .menu ul.on li:nth-child(1){ color:var(--main_color);}
.menu_wrap .menu ul li:nth-child(2) dl.on{ font-family: 'Bold', sans-serif; color: var(--main_color);}
.menu_wrap .menu ul li:nth-child(2) dl.on::before{ content: ''; position: absolute; top:14px; right: 15px; width:6px; height: 6px; border-radius: 6px; background-color: var(--main_color);}
.menu_wrap .menu ul li:nth-child(2) dl:hover{ color:var(--main_color);}
.menu_wrap .menu ul.open li:nth-child(2){ animation:mslider 3s ease-out forwards;}
	@keyframes mslider {
	0%{ max-height:0;}
	100%{ max-height:500px;}
}
.menu_wrap .footer{ position: absolute; bottom: 0; left: 0; width:100%; height: 170px; background-color: #f5f7fa; color: #b6bdcb; font-size: 11px;}
.menu_wrap .footer .info{ padding: 20px 10px 0 10px;}
.menu_wrap .footer .info ul{ position: relative; margin: 0 0 3px 0; font-size: 11px; line-height: 13px;}
.menu_wrap .footer .info ul:last-child{ display: block;}
.menu_wrap .footer .info ul div{ position: relative; display: inline-table; margin: 0 7px 0 0; padding: 0 8px 0 0;}
.menu_wrap .footer .info ul div::before{ content: ''; position: absolute; top:3px; right: 0; width:1px; height: calc(100% - 6px); background-color: #cdd0d6;}
.menu_wrap .footer .info .company{ color: #aab0bb; font-size: 12px; font-family: 'Bold', sans-serif; padding: 3px 0 8px 0;}
.menu_wrap .footer .copy{ padding: 5px 10px 0 10px; color: #aab0bb;}

.navi{ position: fixed; top:0; left: 251px; width:calc(100% - 251px); height: 59px; line-height: 59px; border-bottom: solid 1px #e0e2e6; background-color: #fff; z-index: 1000;}
.navi span{ font-size: 20px; font-family: 'Black', sans-serif; letter-spacing: -1px; margin: 0 0 0 20px;}
.navi i{ display: none;}
.navi .logo{ display: none;}
.navi.on{ animation:navi_on 0.5s ease-out forwards;}
@keyframes navi_on {
	0%{ left:51px; width:calc(100% - 51px);}
	100%{ left:251px; width:calc(100% - 251px);}
}
.navi.off{ animation:navi_off 0.5s ease-out forwards;}
@keyframes navi_off {
	0%{ left:251px; width:calc(100% - 251px);}
	100%{ left:51px; width:calc(100% - 51px);}
}

.contents{ margin: 60px 0 0 251px; padding: 20px;}
.contents.on{ animation:contents_on 0.5s ease-out forwards;}
@keyframes contents_on {
	0%{ margin: 60px 0 0 51px;}
	100%{ margin: 60px 0 0 251px;}
}
.contents.off{ animation:contents_off 0.5s ease-out forwards;}
@keyframes contents_off {
	0%{ margin: 60px 0 0 251px;}
	100%{ margin: 60px 0 0 51px;}
}

@media(max-width:800px) {

	.navi{ left: 0; width:100%;}
	.navi i{ margin:0 10px 0 0; cursor: pointer; display: inline-table;}
	.navi span{ font-size: 18px; margin: 0 0 0 15px;}
	.navi .logo{ position: absolute; top:20px; right: 10px; display: block;}
	.navi .logo img{ height: 15px;}
	.contents{ margin: 60px 0 0 0; padding: 15px;}
	.menu_wrap .arrow_tg{ display: none;}
	.menu_wrap .mo_menu_close{ text-align: right; display: block;}
	.menu_wrap .mo_menu_close i{ width:60px; height: 60px; line-height: 60px; text-align: center; font-size: 20px; margin-right: 12px; cursor: pointer;}
	.menu_wrap{ position: fixed; top:0; left: -100%; width:100%; height: 100%; background-color: #ffffff; border-right:0; z-index: 1100;}
	.menu_wrap.on{ animation:menu_on 0.5s ease-out forwards;}
	@keyframes menu_on {
		0%{ left:-100%;}
		100%{ left:0;}
	}
	.menu_wrap.off{ animation:menu_off 0.5s ease-out forwards;}
	@keyframes menu_off {
		0%{ left:0;}
		100%{ left:-100%;}
	}

}

.layerDefault{ display: none;}
.layerDefault .bg{ position: fixed; top:0; left: 0; width:100%; height: 100%; background-color: rgba(0,0,0,0.4); z-index: 2000;}
.layerDefault .inbox{ position: fixed; top:50%; left:50%; transform-origin:center center; transform: translate(-50%, -50%) scale(0); background-color: #fff; overflow: hidden; opacity: 0; box-shadow:0 0 10px rgba(0, 0, 0, .1); z-index: 2100;}
.layerDefault.on{ display: block;}
.layerDefault.on .inbox{ animation:layermv 0.5s forwards ease-in-out;}
@keyframes layermv {
	0%{ opacity: 0; transform-origin:center center; transform: translate(-50%, -50%) scale(0);}
	50%{ opacity: 1; transform-origin:center center; transform: translate(-50%, -50%) scale(1);}
	70%{ opacity: 1; transform-origin:center center; transform: translate(-50%, -50%) scale(0.9);}
	100%{ opacity: 1; transform-origin:center center; transform: translate(-50%, -50%) scale(1);}
}
.layerDefault .title{ line-height: 55px; font-size: 20px; letter-spacing: -1px; font-family: 'Bold', sans-serif; margin: 0 20px 0 20px; text-indent: 10px; border-bottom: solid 1px #eee;}
.layerDefault .close{ position: absolute; top:17px; right: 25px; font-size: 26px; cursor: pointer;}
.layerDefault .cont{position: absolute; top:56px; left: 20px; width:calc(100% - 40px); height: calc(100% - 122px); overflow-y: auto;}
.layerDefault .cont::-webkit-scrollbar {width: 5px;}
.layerDefault .cont::-webkit-scrollbar-track {background: #eceff3;}
.layerDefault .cont::-webkit-scrollbar-thumb {background: #a1acbb;}
.layerDefault .cont::-webkit-scrollbar-thumb:hover {background: #7e94b4;}
.layerDefault .btn{ height: 65px; position: absolute; bottom: 0; left: 20px; width:calc(100% - 40px); border-top: solid 1px #eee; text-align: right;}
.layerDefault .btn .default{ display: inline-table; height: 38px; line-height: 38px; border-radius: 5px; padding: 0 20px 0 20px; background-color: #fff; color: #999; margin: 12px 0 0 0; border: solid 1px #e1e1e1; cursor: pointer;}
.layerDefault .btn .confirm{ display: inline-table; height: 40px; line-height: 40px; border-radius: 5px; padding: 0 20px 0 20px; background-color: var(--main_color); color: #fff; margin: 12px 0 0 0; cursor: pointer;}
.layerDefault .btn .delete{ position: absolute; top:0; left: 0;}
.layerDefault .select {display:inline-table; font-size:11px; height:22px; line-height:22px; border:solid 1px #e0e2e6; border-radius:3px; padding:0 7px 0 7px; background-color:#fff; color:#777; cursor:pointer; }

@media(max-width:800px) {
	.layerDefault .inbox{ width:calc(100% - 15px) !important;}
}

.cbox{ position: relative; background-color: #fff; border-radius: 5px; box-shadow:0 0 5px rgba(0, 0, 0, .05);}

.dashboard{ padding: 20px 20px 30px 20px;}
.dashboard .chart{ display: flex; flex-wrap: wrap;}
.dashboard .chart ul{ width:25%;}
.dashboard .chart ul.wide{ width:100%;}
.dashboard .chart .tit{ font-size: 18px; font-family: 'Bold', sans-serif;}

.sort_box{ position: relative; padding: 0 100px 0 0; margin-bottom: 15px;}
.sort_box .sort{ display: flex; flex-wrap: wrap; align-items: center; height: auto; overflow: hidden;}
.sort_box .sort ul{ display: flex; align-items: center; margin: 0 30px 10px 0;}
.sort_box .sort ul li{ display: inline-table;}
.sort_box .sort ul li:nth-child(1){ font-size: 15px; font-family: 'Bold', sans-serif; padding: 0 10px 0 0;}
.sort_box .sort_btn{ position: absolute; top:calc(50% - 20px); right: 0; width:80px; height: 40px; line-height: 40px; border-radius: 3px; text-align: center; background-color: var(--main_color); color: #fff; cursor: pointer;}
.sort_toggle{ display: none;}

.fixedDate{ display: inline-table; margin: 5px 0 0 8px; border: solid 1px #e4e4e8; background-color: #fff; height: 38px; line-height: 38px; border-radius: 5px; overflow: hidden;}
.fixedDate .period{ display: table-cell; padding: 0 10px 0 10px; font-size: 12px; border-left: solid 1px #e4e4e8; background-color: #f9fafd; color: #999; cursor: pointer;}
.fixedDate .period:nth-child(1){ border-left:0;}
.fixedDate .period.on{ background-color: var(--main_color); color: #fff;}
.fixedDate .period:hover{ background-color: var(--main_color); color: #fff;}

.table_select{ position: absolute; top:0; right: 10px; width:auto; padding: 20px; background-color: #fff; border-radius: 10px; box-shadow:0 0 10px rgba(0, 0, 0, .3); display: none; z-index: 1000;}
.table_select:focus{ outline: none;}
.table_select ul li{ margin-bottom: 5px; text-align: left;}
.table_select ul li:last-child{ margin-bottom: 0;}

.board_list{ padding: 20px;}
.board_list .top{ position: relative; min-height: 40px;}
.board_list .top .tit{ font-size: 18px;}
.board_list .top .tit span{ margin: 0 0 0 10px; font-weight: 900;}
.board_list .top .title{ font-size: 18px;}
.board_list .top .title span{ margin: 0 0 0 10px; font-weight: 900;}

.board_list .top .rbox{ position: absolute; top:-8px; right: 0;}
.board_list .top .rbox .btn_box{ display: inline-table; margin-right: 10px;}
.board_list .top .rbox .btn_box ul{ display: inline-table; width:34px; height: 34px; line-height: 34px; border-radius: 34px; text-align: center; color:#fff; vertical-align: middle; margin-right: 5px; cursor: pointer;}
.board_list .top .rbox .btn_box ul i{ line-height: 34px;}
.board_list .top .rbox .btn_box ul.excel{ background-color:#088b57;}
.board_list .top .rbox .btn_box ul.data_sort{ background-color: #999999;}
.board_list .top .rbox .btn_box ul.make{ width:auto; padding: 0 15px 0 15px; background-color: var(--main_color);}
.board_list .board_info{ border: dashed 1px #e0e2e6; border-radius: 10px; padding: 15px; margin: 0 0 20px 0; background-color: #f2f4f8; color: var(--deep_color);}
.board_list .board_info ul{ position: relative; margin-bottom: 8px; padding: 0 0 0 12px;}
.board_list .board_info ul::before{ content: ''; position: absolute; top:5px; left: 0; width:6px; height: 6px; border-radius: 6px; background-color: var(--deep_color);}
.board_list .board_info ul:last-child{ margin-bottom: 0;}

.layoutDv2{ display: flex;}
.layoutDv2 .LeftDv{ flex-shrink: 0;}
.layoutDv2 .rightDv{ flex-grow: 1; margin-left: 20px;}

@media(max-width:800px) {
	.layoutDv2{ display: flex; flex-wrap: wrap;}
	.layoutDv2 .LeftDv{ width:100% !important;}
	.layoutDv2 .rightDv{ width:100%; margin-left: 0; margin-top: 20px;}

	.contents .sort_box{ position: relative; padding: 0 0 0 0; margin-bottom: 15px;}
	.sort_box .sort{ display: none; align-items: center; height: auto; overflow: hidden;}
	.sort_box .sort ul{ display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 10px 0;}
	.sort_box .sort_btn{ display: none; position: relative; top:0; right: 0; width:80px; height: 40px; line-height: 40px; border-radius: 3px; text-align: center; background-color: var(--main_color); color: #fff; cursor: pointer;}
	.sort_box .sort ul li{ width:100%;}
	.sort_box .sort ul li:nth-child(1){ margin-bottom: 8px; font-size: 14px;}
	.sort_box .sort ul li input[type=text]{ width:calc(100% - 2px);}
	.sort_box .sort ul li select{ width:calc(100% - 2px);}
	.sort_toggle{ position: relative; bottom: 0; right: 0; display: block;}
	.sort_toggle ul{ width:100px; height: 40px; line-height: 40px; border-radius: 3px; text-align: center; background-color:var(--deep_color); color: #fff; cursor: pointer;}
	.sort_toggle .close{ display: none;}
	.board_list{ padding: 10px;}
	.board_list .top .rbox{ position: relative; top:0; right: 0; margin: 10px 0 10px 0; text-align: right;}
	.table_mo{ width:100%; overflow-x: auto;}
	.table_list_01.w1500{ width:1500px;}
	.table_list_01.w1000{ width:1000px;}
	.table_list_01.w800{ width:800px;}
	.table_list_01.w500{ width:500px;}
	.table_list_01.w100per{ width:100%;}
}

.table_list_01{ width:100%; border-spacing: 0; font-size: 13px;}
.table_list_01 tr td{ border-bottom:solid 1px #eee; border-right:solid 1px #eee; padding:10px; text-align:center; color: #666;}
.table_list_01 tr.header td{ background-color: #f2f4f8; border-right:solid 1px #e0e2e6; border-bottom: solid 1px #e0e2e6; border-top: solid 1px #e0e2e6; color: #000; user-select: none;}
.table_list_01 tr.header td.sorting{ position: relative; cursor: pointer;}
.table_list_01 tr.header td.sorting::before{ content: ''; position: absolute; top:calc(50% - 6px); right: 5px; width:0; height: 0; border-bottom: 4px solid #808ea9; border-left: 4px solid transparent; border-right: 4px solid transparent; opacity: 0.3;}
.table_list_01 tr.header td.sorting::after{ content: ''; position: absolute; top:calc(50% + 2px); right: 5px; width:0; height: 0; border-top: 4px solid #808ea9; border-left: 4px solid transparent; border-right: 4px solid transparent; opacity: 0.3;}
.table_list_01 tr.header td.sorting.ascending::before{ opacity: 1;}
.table_list_01 tr.header td.sorting.descending::after{ opacity: 1;}
.table_list_01 tr.total td{ background-color: #ecf5fa; border-right:solid 1px #e0e2e6; border-bottom: solid 1px #e0e2e6; color: #000; user-select: none;}
.table_list_01 tr td:last-child{ border-right:0;}
.table_list_01 tr.header_sub td{ background-color: #f2f4f8; border-right:solid 1px #e0e2e6; border-bottom: solid 1px #e0e2e6; color: #000; user-select: none;}
.table_list_01 tr td .btn{ display:inline-table; font-size:11px; height:22px; line-height:22px; border:solid 1px #e0e2e6; border-radius:3px; padding:0 7px 0 7px; background-color:#fff; color:#777; cursor:pointer;}
.table_list_01 tr td .btn:hover{ color:#000; background-color: #f8f8f8;}
.table_list_01 tr td select{ height: 24px; line-height: 24px; font-size: 12px;}
.table_list_01 tr td select.selectbtn{ color: #fff; border: 0;}
.table_list_01 tr td input[type=text]{ height: 24px; line-height: 24px;}
.table_list_01 tr td .inp_cover{ display: inline-table; height: 24px; line-height: 24px; border: solid 1px #e4e4e8; padding: 0 5px 0 0;}
.table_list_01 tr td .inp_cover input[type=text]{ border: 0; height: 22px; line-height: 22px; text-align: right; vertical-align: top; padding: 0 5px 0 5px;}
.table_list_01 .clickNumber{ font-family: 'Bold', sans-serif; cursor: pointer; color: var(--main_color); text-decoration: underline;}
.table_list_01 .thumb{ position: relative; width:80px; height: 60px; border-radius: 5px; overflow: hidden; margin: 0 auto;}
.table_list_01 .thumb img{ position: absolute; top:0; left: 0; width:100%; height: 100%; object-fit: cover;}
.table_list_01 .ico_state{ position: relative; display: inline-table; padding: 0 0 0 13px;}
.table_list_01 .ico_state::before{ content: ''; position: absolute; top:3px; left: 0; width:9px; height: 9px; border-radius: 7px; background-color: #ccc;}
.table_list_01 .ico_state.ing{ color: #17a643;}
.table_list_01 .ico_state.ing::before{ background-color: #17a643;}
.table_list_01 .ico_state.appointed{ color: #6593c2;}
.table_list_01 .ico_state.appointed::before{ background-color: #6593c2;}
.table_list_01 .ico_state.end{ color: #ccc;}
.table_list_01 .ico_state.end::before{ background-color: #ccc;}

.paging{ text-align: center; padding: 50px 0 50px 0;}
.paging .inPage{ display:inline-table;}
.paging .inPage div{ display: inline-table;}
.paging .inPage .move{margin: 0 7px 0 7px; width:30px; height: 30px; line-height: 30px; font-size: 24px; cursor: pointer; vertical-align: middle;}
.paging .inPage .page ul{ display: table-cell; width:30px; height: 30px; line-height: 30px; color: #999; cursor: pointer;}
.paging .inPage .page ul:hover{ color: var(--main_color); font-weight: 800;}
.paging .inPage .page ul.on{ background-color: var(--main_color); color: #fff; border-radius: 7px; font-weight: 800;}

.board_form{ padding: 20px;}
.board_form .board_tit{ font-size: 18px; font-family: 'Bold', sans-serif;}
.board_form .bd{ border-top: solid 1px #555; margin:  15px 0 0 0;}
.board_form .bd ul{ display: flex;}
.board_form .bd ul input[type=text],.board_form .bd ul input[type=email],.board_form .bd ul input[type=password],.board_form .bd ul input[type=number]{ width:calc(100% - 2px);}
.board_form .bd ul select{ width:calc(100% - 2px);}
.board_form .bd ul li{ border-bottom: solid 1px #e0e2e6; width:50%; display:inline-table;}
.board_form .bd ul.wide li{ width:100%;}
.board_form .bd ul li dl{ display: table-cell; padding: 12px; vertical-align: middle;}
.board_form .bd ul.txt li dl{ padding: 18px 12px 18px 12px;}
.board_form .bd ul li dd{ display: table-cell; padding: 12px; vertical-align: middle;}
.board_form .bd ul.txt li dd{ padding: 18px 12px 18px 12px;}
.board_form .bd ul li dl:nth-child(1){ width:150px; background-color: #f5f7fa;}
.board_form .bd ul li dl:nth-child(1) span{ color:var(--main_color);}
.board_form .bd ul .uploadimg{ height: 60px; vertical-align: middle; margin: 0 10px 0 0;}
.board_form .bd ul .btn{ display: inline-table; height: 26px; line-height: 26px; border-radius: 5px; border: solid 1px #e0e2e6; background-color: #fff; color: #777; font-size: 13px; padding: 0 10px 0 10px; margin: 0 0 2px 5px; cursor: pointer;}
.board_form .bd ul .btn:hover{ color: var(--deep_color); border: solid 1px var(--deep_color);}
.board_form .bd ul .btn_large{ display: inline-table; height: 38px; line-height: 38px; border-radius: 3px; border: solid 1px var(--deep_color); color: var(--deep_color); padding: 0 10px 0 10px; margin: 0 0 0 5px; vertical-align: middle; cursor: pointer;}
.board_form .bd ul .btn_large.deep{ background-color: var(--deep_color); color: #fff;}
.board_form .inp_cover{ display: inline-table; height: 38px; border: solid 1px #e4e4e8; padding: 0 10px 0 0;}
.board_form .inp_cover input{ border: 0; height: 38px; line-height: 38px; text-align: right;}
.board_form .td_info{ display: inline-table; margin: 0 0 0 10px; font-size: 13px; color: #687ca9;}

.board_form .btn_multiUpload{ display: none;}
.board_form .btn_multiUpload + label{ display: inline-table; height: 36px; line-height: 36px; border-radius: 3px; border: solid 1px #e0e2e6; background: #f5f7fa; padding: 0 15px 0 15px; color: #888; cursor: pointer;}
.board_form .file_list .list{ border-bottom: dashed 1px #e1e1e1; line-height: 36px; padding: 0 0 0 7px;}
.board_form .file_list .list i{ line-height: 36px; margin-right: 5px; color: #999; cursor: pointer;}
.board_form .file_list .list i:hover{ color: #ff0000;}
.board_form .file_list .list:last-child{ border-bottom: 0;}
.board_form .uploaded_list{ background-color: #f5f7fa; margin-top: 15px;}
.board_form .uploaded_list .list{ border-bottom: dashed 1px #e0e2e6; line-height: 36px; padding: 0 0 0 7px;}
.board_form .uploaded_list .list .openUrl:hover{ text-decoration: underline;}
.board_form .uploaded_list .list i{ line-height: 36px; margin-right: 5px; color: #999; cursor: pointer;}
.board_form .uploaded_list .list i:hover{ color: #ff0000;}
.board_form .uploaded_list .list:last-child{ border-bottom: 0;}

.board_form .btn_box{ padding: 20px 0 0 0;}
.board_form .btn_box ul{ display: inline-table; margin-right: 10px; border-radius: 5px; height: 46px; line-height: 46px; padding: 0 20px 0 20px; font-size: 15px; cursor: pointer;}
.board_form .btn_box ul.confirm{ background-color: var(--main_color); border: solid 1px var(--main_color); color: #fff;}
.board_form .btn_box ul.cancel{ background-color: #f5f7fa; border: solid 1px #e0e2e6; color: #999;}
.board_form .btn_box ul.delete{ background-color: var(--deep_color); border: solid 1px var(--deep_color); color: #fff;}
.board_form .btn_box ul.list{ background-color: #ffffff; border: solid 1px #e1e1e1; color: #666;}

@media(max-width:800px) {
	.board_form{ padding: 10px;}
	.board_form .board_tit{ font-size: 16px; font-family: 'Bold', sans-serif;}
	.board_form .bd ul{ display: block;}
	.board_form .bd ul input[type=text],.board_form .bd ul input[type=email],.board_form .bd ul input[type=password],.board_form .bd ul input[type=number]{ width:calc(100% - 2px);}
	.board_form .bd ul select{ width:calc(100% - 2px);}
	.board_form .bd ul li{ width:100%; display:inline-table; border-bottom: solid 1px #eeeeee;}
	.board_form .bd ul.wide li{ width:100%;}
	.board_form .bd ul li dl{ display: block; padding: 12px 0 12px 0; vertical-align: middle;}
	.board_form .bd ul.txt li dl{ padding: 15px 0 18px 0;}
	.board_form .bd ul li dl:nth-child(1){ width:100%; background-color: #ffffff; padding: 12px 0 0 0; font-family: 'Bold', sans-serif;}
	.board_form .bd ul li dl:nth-child(1) span{ color:var(--main_color);}
	.board_form .bd ul .uploadimg{ height: 60px; vertical-align: middle; margin: 0 10px 10px 0;}
	.board_form .btn_box{ padding: 20px 0 0 0; text-align: center;}
	.board_form .td_info{ display: inline-table; margin: 10px 0 0 0; font-size: 13px; color: #687ca9;}
}

.loadingLayer {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 5000;
}

.loadingLayer .spinner {
	position: absolute;
	top: calc(50% - 28px);
	left: calc(50% - 28px);
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: radial-gradient(farthest-side, #206ed4 95%, #0000) 50% 1.1px/13.4px 13.4px no-repeat,
	radial-gradient(farthest-side, #0000 calc(100% - 15.7px), rgba(32, 110, 212, 0.1) 0);
	opacity: 0;
	animation: fadeInSpinner 0s linear 0.4s forwards, spinner-aur408 0.7s infinite linear;
}

@keyframes spinner-aur408 {
	to {
		transform: rotate(1turn);
	}
}

@keyframes fadeInSpinner {
	to {
		opacity: 1;
	}
}

/*20241216*/
.wideScrollTable{ overflow-x: auto; cursor: grab;}
.wideScrollTable:active {
	cursor: grabbing; /* 드래그 중 상태 */
}
.wideScrollTb{ table-layout: fixed;user-select: none;}
.wideScrollTb tr td:nth-child(1){ position: sticky; left: 0; background-color: #fff; z-index: 100;}
.wideScrollTb tr td{ width:60px !important; color: #888; font-size: 12px;}
.wideScrollTb tr td:nth-child(1){ font-size: 11px;}
.wideScrollTb tr.header td{ background-color: #f2f4f8; cursor: pointer;}
.wideScrollTb tr.header td:nth-child(1){font-size: 12px;}
.wideScrollTb tr td div{ color: #000; padding: 0 0 2px 0;}

.layerDefault_noact{ display: none;}
.layerDefault_noact .bg{ position: fixed; top:0; left: 0; width:100%; height: 100%; background-color: rgba(0,0,0,0.4); z-index: 2000;}
.layerDefault_noact .inbox{ position: fixed; top:50%; left:50%; transform-origin:center center; transform: translate(-50%, -50%); background-color: #fff; overflow: hidden; box-shadow:0 0 10px rgba(0, 0, 0, .1); z-index: 2100;}
.layerDefault_noact.on{ display: block;}

.layerDefault_noact .title{ line-height: 55px; font-size: 20px; letter-spacing: -1px; font-family: 'Bold', sans-serif; margin: 0 20px 0 20px; text-indent: 10px; border-bottom: solid 1px #eee;}
.layerDefault_noact .close{ position: absolute; top:17px; right: 25px; font-size: 26px; cursor: pointer;}
.layerDefault_noact .cont{position: absolute; top:56px; left: 20px; width:calc(100% - 40px); height: calc(100% - 122px); overflow-y: auto;}
.layerDefault_noact .cont::-webkit-scrollbar {width: 5px;}
.layerDefault_noact .cont::-webkit-scrollbar-track {background: #eceff3;}
.layerDefault_noact .cont::-webkit-scrollbar-thumb {background: #a1acbb;}
.layerDefault_noact .cont::-webkit-scrollbar-thumb:hover {background: #7e94b4;}
.layerDefault_noact .btn{ height: 65px; position: absolute; bottom: 0; left: 20px; width:calc(100% - 40px); border-top: solid 1px #eee; text-align: right;}
.layerDefault_noact .btn .default{ display: inline-table; height: 38px; line-height: 38px; border-radius: 5px; padding: 0 20px 0 20px; background-color: #fff; color: #999; margin: 12px 0 0 0; border: solid 1px #e1e1e1; cursor: pointer;}
.layerDlayerDefault_noactefault .btn .confirm{ display: inline-table; height: 40px; line-height: 40px; border-radius: 5px; padding: 0 20px 0 20px; background-color: var(--main_color); color: #fff; margin: 12px 0 0 0; cursor: pointer;}
.layerDefault_noact .btn .delete{ position: absolute; top:0; left: 0;}

@media(max-width:800px) {
	.layerDefault_noact .inbox{ width:calc(100% - 15px) !important;}
}

.sales_state_total{ display: flex; align-items: center; text-align: center; background-color: #f2f4f8; margin: 0 15px 0 15px; border-radius: 5px; padding: 15px 0 15px 0;}
.sales_state_total ul{ width:100%;}
.sales_state_total ul li:nth-child(1){ color: #818898;}
.sales_state_total ul li:nth-child(2){ font-family: 'Bold', sans-serif; font-size: 24px;}
.sales_state_total .date{ font-size: 18px; font-family: 'Bold', sans-serif; color: #818898;}
.sales_state{ padding: 30px 10px 20px 10px;}

.pay_state_complete{ background-color: #daf2ff; color: #1271ff !important;}
.pay_state_cancel{ background-color: #fff3f3; color: #ed5353 !important;}

.topInfoBox{ margin: 0 0 12px 0; padding: 16px; border-radius: 8px;}
.topInfoBox.gray{ background-color: #f8f8f8;}
.topInfoBox ul{ position: relative; margin-bottom: 6px; font-size: 13px; line-height: 130%; color: #888; padding: 0 0 0 16px;}
.topInfoBox ul::before{ content: ''; position: absolute; top:6px; left: 0; width:6px; height: 6px; border-radius: 6px; background-color: #ccc;}
.topInfoBox ul:last-child{ margin-bottom: 0;}
.topInfoBox ul.blue{ color: var(--main_color);}
.topInfoBox ul.blue::before{ background-color: var(--main_color)}
.topInfoBox ul.red{ color: #ed5353;}
.topInfoBox ul.red::before{ background-color: #ed5353;}

.trBg_gray{ background-color: #f8f8f8;}
.trBg_blue{ background-color: #f3faff;}
.trBg_red{ background-color: #fff3f3;}
.trBg_green{ background-color: #f3fff5;}

.scheduleInfo .week{ display: inline-flex; border: solid 1px #7e94b4; border-radius: 8px; overflow: hidden; margin:0 0 4px 0;}
.scheduleInfo .week div{ padding: 6px; font-size: 11px; border-left:solid 1px #7e94b4;}
.scheduleInfo .week div:nth-child(1){ border-left: 0;}
.scheduleInfo .week div.on{ background-color: #a1acbb; color: #fff;}
.scheduleInfo .time{ color: #000; font-weight: bold;}
.scheduleSetting .week{ display: inline-flex; border: solid 1px #7e94b4; border-radius: 8px; overflow: hidden; margin:0 0 8px 0;}
.scheduleSetting .week div{ font-size: 11px; border-left:solid 1px #7e94b4; cursor: pointer; color: #999; width:24px; height: 24px; }
.scheduleSetting .week div:nth-child(1){ border-left: 0;}
.scheduleSetting .week div label{ display: inline-table; width:24px; height: 24px; line-height: 24px; background-color: #fff; color: #999; text-align: center; cursor: pointer;}
.scheduleSetting .week div [type="checkbox"] { display: none;}
.scheduleSetting .week div [type="checkbox"]:checked ~ label {background:#7e94b4; color:#fff;}


.thumbDefault{ display: inline-flex; position: relative; overflow: hidden; border-radius: 8px; vertical-align: middle;}
.thumbDefault img{ position: absolute; top:0; left: 0; width:100%; height: 100%; object-fit: cover; z-index: 100;}

.thumbBox{ position: relative; overflow: hidden; border-radius: 8px; margin: 0 auto;}
.thumbBox.size_32_32{ width:32px; height: 32px;}
.thumbBox.size_48_48{ width:48px; height: 48px;}
.thumbBox.size_64_64{ width:64px; height: 64px;}
.thumbBox.size_128_128{ width:128px; height: 128px;}
.thumbBox img{ position: absolute; top:0; left: 0; width:100%; height: 100%; object-fit: cover;}

.board_tab{ display: flex; padding: 20px 0 20px 20px;}
.board_tab ul{ font-size: 18px; font-family: 'Bold', sans-serif; color: #999; cursor: pointer; margin-right: 16px;}
.board_tab ul.on{ color: #000; text-decoration: underline;}

.searchAreaSel .selList{ min-height: 70px; background-color: #f9f9f9; border-radius: 8px; margin-top: 16px; padding: 16px;}
.searchAreaSel .selList .none{ text-align: center; line-height: 70px; color: #999;}
.searchAreaSel dt{ position: relative; background-color: #fff; border-radius: 8px; line-height: 40px; margin-bottom: 5px; padding-left: 16px; box-shadow:0 0 3px rgba(0, 0, 0, .05); }
.searchAreaSel dt .delete{ position: absolute; top:0; right: 0; width:40px; height: 40px; text-align: center; cursor: pointer;}
.searchAreaSel dt .delete i{ line-height: 40px; }
.searchAreaSel dt:last-child{ margin-bottom: 0;}

.infoBoard{ padding: 8px 0 0 0; color: #999; font-size: 13px;}

/* 20250813  */
/* 이미지 삭제 버튼 CSS */
.delete-image-btn { position: absolute; top: -2px; right: -2px; width: 16px; height: 16px; background: #ff4444; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: bold; cursor: pointer; z-index: 200; transition: all 0.2s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
.delete-image-btn:hover { background: #cc0000; transform: scale(1.1); }
.artist-audio-item {
	position: relative;
	margin-bottom: 10px;
	border: 1px solid #e1e1e1;
	padding: 10px;
	border-radius: 5px;
}
.delete-audio-btn {
	position: absolute;
	top: -8px;
	right: -8px;
	width: 20px;
	height: 20px;
	background: #ff4444;
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	z-index: 200;
	transition: all 0.2s ease;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	border: 2px solid white;
}

.delete-audio-btn:hover {
	background: #cc0000;
	transform: scale(1.1);
}
.goods-image-item { display: inline-block; margin: 10px; }

/*20250805*/
.contentIcon{ display: inline-flex;}
.contentIcon div{ line-height: 24px; font-size: 18px; width:24px; opacity: 0.4;}
.contentIcon div.complete{ color: var(--main_color); opacity: 1;}

.chatBox .chatInfo{ display: flex; align-items: center; padding: 16px 0 0 0; font-size: 16px;}
.chatBox .chatInfo ul:nth-child(1) span{ color: #999;}
.chatBox .chatInfo ul:nth-child(2){ display: flex; align-items: center; margin-left: 20px;}
.chatBox .chatInfo ul:nth-child(2) li:nth-child(1){ margin-right: 8px;}
.chatBox .chatList{ position: absolute; top:56px; left: 0; width:calc(100% - 32px); height: calc(100% - 88px); padding: 16px; background-color: #abc1d1; display: flex; flex-direction: column-reverse; overflow-y: auto;}

.chatBox .chatList .msgBox{ display: flex; align-items: start; margin: 24px 0 0 0;}
.chatBox .chatList .msgBox ul{}
.chatBox .chatList .msgBox .thumb{ position: relative; width:40px; flex-shrink: 0; height: 40px; border-radius: 12px; overflow: hidden; margin: 0 8px 0 0;}
.chatBox .chatList .msgBox .thumb img{position: absolute; top:0; left: 0; width:100%; height: 100%; object-fit: cover;}
.chatBox .chatList .msgBox .thumb::before{ content: ''; position: absolute; top:0; left: 0; width:calc(100% - 2px); height:calc(100% - 2px); border-radius: 8px; border: solid 1px rgba(0,0,0,0.08); z-index: 100;}
.chatBox .chatList .msgBox .contArea{ display: flex; align-items: end;}
.chatBox .chatList .msgBox .contArea .name{ font-size: 14px; font-weight: 500; padding: 0 0 4px 0;}
.chatBox .chatList .msgBox .contArea .msg{ background-color: #fff; border-radius: 4px; line-height: 140%; padding:8px 12px; box-shadow:1px 1px 1px rgba(0, 0, 0, .1);}
.chatBox .chatList .msgBox .contArea .image{ width:200px; border-radius: 8px; box-shadow:1px 1px 1px rgba(0, 0, 0, .1); overflow: hidden;}
.chatBox .chatList .msgBox .contArea .image img{ width:100%;}
.chatBox .chatList .msgBox .contArea .video{width:200px; box-shadow:1px 1px 1px rgba(0, 0, 0, .1);}
.chatBox .chatList .msgBox .contArea .audio{width:200px; min-width: 100px; padding: 0 8px 0 0;}
.chatBox .chatList .msgBox .date{ flex-shrink: 0; margin: 0 0 0 8px; font-size: 11px;}
.chatBox .chatList .msgBox .date dl:nth-child(2){ opacity: 0.4;}
.chatBox .chatList .msgBox .date .read{ color: #ffeb34;}
.chatBox .chatList .msgBox.user{ justify-content: end;}
.chatBox .chatList .msgBox.user ul{}
.chatBox .chatList .msgBox.user .contArea .name{ text-align: right; padding: 0 0 4px 0;}
.chatBox .chatList .msgBox.user .contArea .msg{ background-color: #ffeb34; color: #000; border-radius: 4px; padding:8px 12px; box-shadow:1px 1px 1px rgba(0, 0, 0, .1);}
.chatBox .chatList .msgBox.user .contArea .info{ order: 2;}
.chatBox .chatList .msgBox.user .contArea .date{ order: 1; margin: 0 8px 0 0; text-align: right;}

@media(max-width:480px) {
	.chatBox .chatList .msgBox .contArea{ display: flex; flex-wrap: wrap; align-items: end;}
	.chatBox .chatList .msgBox.user .contArea .info{ order: 0;}
	.chatBox .chatList .msgBox.user .contArea .date{ width:calc(100% - 8px); order: 0; margin: 0 8px 0 0; text-align: right;}
	.chatBox .chatList .msgBox.user .contArea .date dl:nth-child(2){ display: inline-flex; margin-top: 6px;}
	.chatBox .chatList .msgBox .contArea .date{ width:calc(100% - 8px); order: 0;}
	.chatBox .chatList .msgBox .contArea .date dl:nth-child(2){ display: inline-flex; margin-top: 6px;}
}

/*20250908*/
.streamingBox{ display: flex;}
.streamingBox .box{ position: relative; background-color: #f7f7f7; padding: 4px 8px 8px 8px; width:calc(16.666666% - 26px); border-radius: 8px; margin: 8px 0 8px 8px;}
.streamingBox .box .top{ display: flex; align-items: center; height: 32px;}
.streamingBox .box .top .tit{ font-size: 16px; font-weight: 600;}
.streamingBox .box .top .add{ margin-left: auto; width:42px; height: 23px; font-size: 12px; color: #888; display: flex; align-items: center; justify-content: center; background-color: #fff; border: solid 1px #e1e1e1; border-radius: 4px; cursor: pointer;}
.streamingBox .box .list{ min-height: 150px;}
.streamingBox .box .list .none{ position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); width:100%; text-align: center; color: #999;}
.streamingBox .box .list ul{ display: flex; flex-wrap: wrap; margin-top: 4px; border: solid 1px #e1e1e1; border-radius: 8px; background-color: #fff; padding: 4px 8px;}
.streamingBox .box .list ul .code{ width:100%; font-size: 11px; color: #999;}
.streamingBox .box .list ul .name{ font-size: 13px; width:calc(100% - 34px); overflow: hidden; display: -webkit-box;  -webkit-box-orient: vertical; word-break: break-all; -webkit-line-clamp: 1; text-overflow: ellipsis;}
.streamingBox .box .list ul .time{ margin-left: auto; font-size: 12px; color: #999; flex-shrink: 0;}

.playListBox{}
.playListBox .top{ display: flex; margin: 12px 0 12px 0;}
.playListBox .top .tit{ font-size: 15px;}
.playListBox .top .add{ display: flex; align-items: center; justify-content: center; margin-left: auto; width:40px; background-color: #444; color: #fff; font-size: 12px; height: 24px; border-radius: 4px; cursor: pointer;}
.playListBox .top .copyMelon{ display: flex; align-items: center; justify-content: center; width:80px; background-color: #444; color: #fff; font-size: 12px; height: 24px; border-radius: 4px; cursor: pointer;}
.playListBox .list{}
.playListBox .list ul{ display: flex; align-items: center; margin-bottom: 2px; border: solid 1px #fff; border-radius: 8px; padding: 8px; background-color: #f7f7f7;}
.playListBox .list ul.sortable-placeholder{ border: dashed 1px #0075ff;}
.playListBox .list ul .handle{ flex-shrink: 0; padding: 0 8px 0 2px; color: #999; cursor: pointer;}
.playListBox .list ul .code{ width:90px; flex-shrink: 0;}
.playListBox .list ul .name{ flex-grow: 1;}
.playListBox .list ul .time{ width:50px; flex-shrink: 0;}
.playListBox .list ul .delete{ width:30px; margin-left: auto; flex-shrink: 0; text-align: center; color: #999; font-size: 16px; cursor: pointer;}
.playListBox .list ul input{ height: 32px; line-height: 32px; font-size: 12px; padding: 0 6px 0 6px; width:calc(100% - 2px);}

.talkMatchGoodsForm{}
.talkMatchGoodsForm .box{ background-color: #f7f7f7; padding: 8px; border-radius: 12px; margin-bottom: 4px;}
.talkMatchGoodsForm .box .delete{ cursor: pointer; margin: 0 0 0 8px; color: #999; font-size: 16px;}
.talkMatchGoodsForm input{ background-color: #fff;}

/*20250910*/
.memoriesTheme{ display: flex; align-items: center; background-color: #f7f7f7; border-radius: 5px; overflow: hidden;}
.memoriesTheme .box{ width:120px; flex-shrink: 0; text-align: center; padding: 16px 0 16px 0;}
.memoriesTheme .box .tit{ font-size: 15px; font-weight: 700;}
.memoriesTheme .box .add{ margin-top: 12px; font-size: 12px; color: #888; display: inline-flex; align-items: center; justify-content: center; width:60px; height: 24px; border-radius: 4px; background-color: #fff; border: solid 1px #e1e1e1; cursor: pointer;}
.memoriesTheme .box .save{ margin-top: 6px; font-size: 12px; color: #fff; display: inline-flex; align-items: center; justify-content: center; width:60px; height: 24px; border-radius: 4px; background-color: #444; border: solid 1px #444; cursor: pointer;}

.memoriesTheme .list{ padding: 16px 0 16px 0; background-color: #fff; width:calc(100% - 120px); display: flex; overflow-x: auto;}
.memoriesTheme .list ul{ margin-left: 16px; border: solid 1px #e1e1e1; border-radius: 8px; padding: 8px;}
.memoriesTheme .list ul.on{ border: solid 1px #0075ff;}
.memoriesTheme .list ul.sortable-placeholder{ border: dashed 1px #0075ff;}
.memoriesTheme .list ul .img{ cursor: move;}
.memoriesTheme .list ul .img img{ height: 100px;}
.memoriesTheme .list ul .name{ text-align: center; padding: 4px 0 6px 0; font-size: 12px; color: #666;}
.memoriesTheme .list ul .set{ display: flex; align-items: center; font-size: 16px;}
.memoriesTheme .list ul .set .popular{ color: #ccc; cursor: pointer;}
.memoriesTheme .list ul.on .set .popular{ color: #0075ff;}
.memoriesTheme .list ul .set .edit{ margin-left: auto; color: #999; cursor: pointer;}