body{background:#f2f5fa;}
#wrap{display: flex; flex-wrap:wrap;}
#sidebar{position: fixed;width:200px; height:100vh; background: #1a1e2b; color: #fff;z-index: 100;transition:0.3s; overflow: hidden;}
#sidebar #logo{width:45%;transition:0.3s; box-sizing:border-box; margin:20% auto 0;}
#sidebar #logo img{width: 100%;}
#sidebar #sub-menu{padding-top:50px;}
#sidebar #sub-menu ul{display:flex;  flex-wrap:wrap;column; gap:8px; padding:0 5%;}
#sidebar #sub-menu ul li{display:flex;width: 100%; justify-content:center;}
#sidebar #sub-menu ul li a{display:flex; align-items:center; width: 100%; padding: 14px; box-sizing:border-box; font-weight:500; font-size:0.9rem; border-radius:8px; transition:0.3s}
#sidebar #sub-menu ul li a i{margin-right:4px; color:rgba(255,255,255,0.4)}
#sidebar #sub-menu ul li:hover a{box-shadow:inset 0 0 0 999px rgba(0,0,0,0.4)}
#sidebar #sub-menu ul li:hover i{color: #ff2f00;}
#sidebar #sub-menu ul li.sub-menu-on a{color: #fff;box-shadow:inset 0 0 0 999px rgba(0,0,0,0.6)}
#sidebar #sub-menu ul li.sub-menu-on a i{color: #ff2f00;}

#container{width:calc(100% - 200px);padding-left: 200px;padding-bottom:200px; display:flex; flex-direction: column;}
#container #top-bar{position: relative;display:flex; justify-content: space-between; align-items:center;  width: 100%;padding:0 24px; height:60px; background:#fff;  box-sizing:border-box; box-shadow:3px 3px 3px rgba(0,0,0,0.03) ;}
#container #top-bar .member-info .btn-list .btn{margin-left:4px;}
#container #content{width: 100%;padding:32px 64px 32px 54px; height:100%; border-radius:12px;  box-sizing:border-box;}
#container #content .page-info{margin-bottom:16px;}
#container #content .page-info .palge-info-location{font-size:12px; margin-bottom: 8px; color: #666;}
#container #content .page-info .palge-info-location i{color: #ff2f00;}
#container #content .page-info .page-info-title{font-size:36px;font-weight:700;}
#container #content .form-section-style{position: relative;margin-bottom:48px;padding-bottom:16px; border:1px solid #1a1e2b; background: #fff; box-sizing:border-box; border-radius:6px; box-shadow:6px 6px 16px rgba(0,0,0,0.1);}
#container #content .form-section-style h3{font-size:20px; padding:16px 24px; margin-bottom:4px; font-weight:600; background:#1a1e2b; color: #fff;}
#container #content .form-section-style .form-sub-btn{position: absolute; right: 0; top:-54px;}
#container #content .form-section-style .form-sub-btn .btn{margin-left:4px;}
#container #content .section-style{margin-bottom:24px; background: #fff; box-sizing:border-box; border-radius:6px;  box-shadow:3px 3px 3px rgba(0,0,0,0.03) ;overflow: hidden;}
#container #content .section-style h3{display: none;}
#container #content .db-list table{width:100%;}
#container #content .db-list table thead tr{background: #1a1e2b; color: #fff;}
#container #content .db-list table thead tr th{height:60px; font-size:0.9em;}
#container #content .db-list table thead tr th.table-list-num{width:4em; }
#container #content .db-list table thead tr th.table-list-lgname{}
#container #content .db-list table tbody tr td.table-list-lgname{text-align: left;	padding-left:1em;}
#container #content .db-list table thead tr th.table-list-smname{width:12em;}
#container #content .db-list table thead tr th.table-list-sm{width: 6.5em; }
#container #content .db-list table thead tr th.table-list-day{width: 7.5em; }
#container #content .db-list table thead tr th.table-list-btn{width: 6.25em; }
#container #content .db-list table tbody tr{border-bottom:1px solid #eee;}
#container #content .db-list table tbody tr td{height:54px; text-align: center; font-weight:400; font-size: 14px;}
#container #content .db-list table tbody tr td.table-list-btn i{margin:0;}
#container #content .db-list table tbody tr:hover{box-shadow:inset 0 0 9999px rgba(0,0,0,0.02);}

#page-btn{margin-top:3em;}
#page-btn ul{display:flex; justify-content:center;  align-items:center;  gap:6px;}
#page-btn ul li a{display: block; width:30px; height:30px;line-height:30px; background:rgba(255,255,255,0.9); text-align: center; border-radius:100%;font-size:0.9em;color: #333;}
#page-btn ul li.page-on a{background: #333; color: #fff;font-weight:bold;}
#page-btn ul li:hover{font-weight:bold;}

/* form */
form fieldset{display:flex; flex-wrap:wrap; font-size:0.9em;}
form fieldset.form-list-style-2 .form-group{width:50%;}
form fieldset.form-list-style-2>.form-group:nth-of-type(2){border-top:none;}
form fieldset > .form-group:first-of-type{border-top:none;}

form .form-group{align-items:center; border-top:1px solid #eee;display:flex;flex-wrap:wrap;min-height:2.3em;padding:0.5em 0;position:relative;width:100%;}
form .form-group .form-title{font-weight:700;padding-left:1.5em; width:160px; box-sizing:border-box;}
form .form-group .form-title.required:after{content: '*'; color: #ff2f00; margin-left: 2px;}
form .form-group .form-sub-group{width:calc(100% - 160px); align-items:center;display:flex; flex-wrap:wrap;}
form .form-group .form-sub-group input[type="text"],
form .form-group .form-sub-group input[type="tel"],
form .form-group .form-sub-group input[type="password"],
form .form-group .form-sub-group select{border:none;border-radius:0.25em;height:2.5em;max-width:12.5em;width:100%; margin-right:8px;}
form .form-group .form-sub-group select{width:auto;}
form .form-group.date-group .form-sub-group input[type="text"]{background:#f4f4f4;text-align:center;width:10em;}
form .form-group.date-group .form-sub-group span{display:inline-block;margin:0 0.19em;}
form .form-group.checkbox-group .form-sub-group label,
form .form-group.radio-group .form-sub-group label{display:flex;justify-content:center; margin-right:1.25em; vertical-align:middle;}
form .form-group.checkbox-group .form-sub-group label input[type="checkbox"],
form .form-group.radio-group label input[type="radio"]{margin-right:0.25em;}
form .form-group.checkbox-group input[type="checkbox"] {  position: absolute;  opacity: 0;  pointer-events: none;}
form .form-group.checkbox-group label {position: relative;  padding-left: 1.6em;  cursor: pointer;  user-select: none;  margin-right: 1em;}
form .form-group.checkbox-group label::before {  content: "";  position: absolute;  left: 0;  top: 50%;  transform: translateY(-50%);  width: 1em;  height: 1em;  border: 2px solid #ccc;  border-radius: 4px;  background: #fff;  }
form .form-group.checkbox-group label:has(input:checked)::before {  background: #ff2f00;  border-color: #ff2f00;}
form .form-group.checkbox-group label:has(input:checked)::after {  content: "";  position: absolute;  left: 0.48em;  top: 45%;  transform: translateY(-50%) rotate(45deg);  width: 0.2em;  height: 0.5em;  border: solid #fff;border-width: 0 2px 2px 0;}
form .form-group.radio-group input[type="radio"] {  position: absolute;  opacity: 0;  pointer-events: none;}
form .form-group.radio-group label {  position: relative;  padding-left: 1.6em;  cursor: pointer;  user-select: none;  margin-right: 1em;}
form .form-group.radio-group label::before {  content: "";  position: absolute;  left: 0;  top: 50%;  transform: translateY(-50%);  width: 1em;  height: 1em;  border: 2px solid #ccc;  border-radius: 50%;  background: #fff; }
form .form-group.radio-group label:has(input:checked)::before {  border-color: #ff2f00;  background: #ff2f00;}
form .form-group.radio-group label:has(input:checked)::after {  content: "";  position: absolute;  left: 0.32em;  top: 50%;  transform:  translateY(-50%);  width: 0.6em;   height: 0.6em;   border-radius: 50%;  background: #fff;}
form .form-group.textarea-group .form-sub-group{width:calc(80% - 125px);}
form .form-group.textarea-group .form-sub-group textarea{background:#f4f4f4;border:none;border-radius:0.25em;box-sizing:border-box;height:2em;margin:0.5em 0;;min-height:5em;padding:0.65em;resize:none;width:100%;}
form .form-group.submit-group{width:100% !important; border-top:none;}
form .form-group.submit-group .form-sub-group{display:flex; gap:0.38em; justify-content:center; margin:0.5em 0 1em;width:100%;text-align: center !important;}
form .form-group .form-sub-group .warning-text{width: 100%;transform:translate(-0.2em, 0);}
form .form-group .form-sub-group .warning-text span{display: inline-block;background:#ffeeee;border-radius:1.875em;color:#ff5656;font-size:0.8em;padding:0.1875em 0.625em;}
form .form-group .form-sub-group .warning-text span i{margin-right:2px;}


@media all and (max-width:1024px){
	#sidebar{width:60px;}
	#sidebar:hover{width:160px;}
	#sidebar:hover #sub-menu ul li a span{display:inline-block;}
	#sidebar #logo{padding:0px; width:35px;}
	#sidebar #sub-menu{width:160px; margin-top:50px;}
	#sidebar #sub-menu ul li a span{display: none;}
	#sidebar #sub-menu ul li a i{font-size:20px; margin-right:8px;}
	#container{width:calc(100% - 60px);padding-left:60px;}
	#container #content{padding:24px;}
}

@media all and (max-width:860px){
#container #content .db-list table .table-list-day{display: none;}

}

@media all and (max-width:720px){
#container{width:100%;padding-left:0; padding-top:60px; font-size:15px;}
#container #content{padding:36px 4%;}
#container #content .form-section-style{margin-bottom:32px;}
#container #content .page-info .page-info-title{font-size:30px;}
#sidebar{display:flex;width:100%;height: 60px;height:auto;align-items: center;}
#sidebar #logo{margin:0;margin-left:3%;}
#sidebar:hover{width:100%;}
#sidebar:hover #sub-menu ul li a span{display:none;}
#sidebar #sub-menu{width:100%; margin-top:0; padding:0;}
#sidebar #sub-menu ul{flex-wrap:nowrap}
#sidebar #sub-menu ul li{width:100%;}
#sidebar #sub-menu ul li a{justify-content: center;}
form fieldset.form-list-style-2 .form-group{width:100%;}
}