/* INIT */
*, *:before, *:after {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
html, body {font-family:'Noto Sans KR', Sans-serif; margin:0; padding:0;}
img {max-width:100%; vertical-align:middle;}
h1, h2, h3, h4, h5, h6, p, li, dt, dd, th, td, i {word-break:keep-all; word-wrap:break-word;}
a {color:inherit; text-decoration:none;}
/* FONT LOADING */
.wf-loading * {opacity:0;}
.wf-active *, .wf-inactive * {opacity:1;}
/* CONTAINER */
.container {width:100%; max-width:1280px; margin:0 auto;}
.min-container {width:100%; max-width:600px; margin:0 auto;}
/* DEFAULT INIT CLASS */
.center-align {text-align:center;}
.left-align {text-align:left;}
.right-align {text-align:right;}
.list-clr {margin:0; padding:0; list-style:none;}
/* ADMIN LOGIN */
#login-box {height:90vh; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center;}
#login-box .adm-header {margin:0 0 1.25rem; font-size:32px;}
#login-box .adm-footer {margin-top:1.75rem;}
form[name=log_form] {padding:4rem 2rem; border:1px solid #ddd; background-color:#fff; border-radius:.5rem; box-shadow:0px 10px 13px -7px rgba(51, 51, 51, .75);}
form[name=log_form] legend {margin:0 0 1.5rem;}
form[name=log_form] legend > p {margin:0;}
form[name=log_form] > fieldset {margin:0; padding:0; border:0;}
form[name=log_form] .area-box {display:-webkit-box; display:-ms-flexbox; display:flex;}
form[name=log_form] .area-box > .area-input {padding:.25rem; -webkit-box-flex:1; -ms-flex:1 0 auto; flex:1 0 auto;}
form[name=log_form] .area-box > .area-btn {padding:.5rem; -webkit-box-flex:0; -ms-flex:0 0 160px; flex:0 0 160px;}
form[name=log_form] .area-box > .area-btn > .adm-btn {width:100%;height:100%;color:#fff;background-color: #4baa02;border:0;outline:0;font-size:18px;cursor:pointer;transition:background-color .3s;}
form[name=log_form] .area-box > .area-btn > .adm-btn:focus,
form[name=log_form] .area-box > .area-btn > .adm-btn:hover {background-color:#94c56f;}
form[name=log_form] .frm-row {position:relative; margin:0 0 1rem; padding:.5rem 0;}
form[name=log_form] .frm-row:last-child {margin:0;}
form[name=log_form] .frm-row > label {display:block; position:absolute; top:.5rem; left:.25rem; color:rgba(0, 0, 0, .5); z-index:1; transition:opacity .3s, transform .3s;}
form[name=log_form] .frm-row > label > sup {margin-left:2px; color:#e61758;}
form[name=log_form] .frm-row > input {position:relative; padding:.5rem; width:100%; border:0; border-bottom:1px solid #ddd; outline:0; background-color:transparent; z-index:5; transition:border .3s;}
form[name=log_form] .frm-row > input.on-focus,
form[name=log_form] .frm-row > input:focus {border-color:#4baa02;}
form[name=log_form] .frm-row > input.on-focus ~ label,
form[name=log_form] .frm-row > input:focus ~ label {opacity:0; transform:translateX(-100%);}
form[name=log_form] .chkbox-row {margin:.5rem 0 0;}
form[name=log_form] .chkbox-row > input[type="checkbox"] {display:none;}
form[name=log_form] .chkbox-row > input[type="checkbox"] + label {position:relative; display:inline-block; padding-left:1.25rem; vertical-align:middle; font-size:13px; color:rgba(51, 51, 51, .6); transition:.3s;}
form[name=log_form] .chkbox-row > input[type="checkbox"] + label:before {content:''; position:absolute; top:2px; left:0; display:inline-block; margin-right:6px; width:14px; height:14px; border:1px solid rgba(51, 51, 51, .6); background-color:#fff;}
form[name=log_form] .chkbox-row > input[type="checkbox"] + label:after {content:''; position:absolute; top:5px; left:3px; width:8px; height:8px; background-color:#e61758; transition:.3s; transform:scale(0);}
form[name=log_form] .chkbox-row > input[type="checkbox"]:checked + label {color:#313131;}
form[name=log_form] .chkbox-row > input[type="checkbox"]:checked + label:before {border:1px solid #313131;}
form[name=log_form] .chkbox-row > input[type="checkbox"]:checked + label:after {transform:scale(1);}
form[name=log_form] .find-sign-row{text-align:right; padding:.5rem;}
form[name=log_form] .find-sign-row button{color:#fff;cursor:pointer;background-color: #4f8d40;border:0;outline:0;font-size:15px;padding:.5rem 1rem;transition:background-color .3s;}
form[name=log_form] .find-sign-row button{font-size:13px; padding:.5rem .2rem; transition:background-color .3s;}
/* HEADER */
header {padding:1rem; border-bottom:1px solid #ccc; width: 100%; min-width: 1280px;}
header > .container {position:relative; padding:0;}
#menubar {display: flex; flex-flow: row; justify-content: center; align-items: center;}
#menubar .logo-box {display:inline-block; width:100%; max-width:200px; text-align:left;}
#menubar nav {display:inline-flex; margin-left:auto;}
#menubar nav > .gnb-item {position:relative; display:inline-block; padding:.75rem .65rem; font-size:15px; transition:color .3s;}
#menubar nav > .gnb-item:before {content:''; position:absolute; top:.75rem; bottom:.75rem; right:0; width:1px; background-color:#ccc;}
#menubar nav > .gnb-item:last-child:before {display:none;}
#menubar nav > .gnb-item.on-active, 
#menubar nav > .gnb-item:hover {color:#e61758;}
#menubar nav > .gnb-item > a {display:block;}
/* GNB LANGUAGE BOX*/
.adm-languages {position: absolute; top:-0.25rem; right: 0; padding: .5rem 1rem; text-align: center; background-color: #fff; box-shadow: 3px 3px 6px rgba(0,0,0,.35); border-radius: 6px;}
.adm-languages .language-box {display: inline-block;}
.adm-languages .language-box .item {position: relative; display: inline-block; margin-right: .7rem; color: #bcbcbc; font-size: 14px; vertical-align: middle; transition:color .3s;}
.adm-languages .language-box .item:last-child {margin:0;}
.adm-languages .language-box .item.on-active {color: #e61758; font-weight: 500;}
.adm-languages > p {position: relative; display: inline-block; margin: 0; margin-left: 1.5rem; text-align: right; vertical-align: middle;}
.adm-languages > p:before {content: ''; position: absolute; top: 6px; bottom: 6px; left: -0.75rem; width: 1px; background-color: rgba(51, 51, 51, .25);}
.adm-languages > p > span {color: #e61758; font-weight: 500; font-size: 18px;}
/* LNB */
#sidebar {display:inline-block; padding:1.5rem 0; width:100%; max-width:250px;}
/* SIDEBAR */
#sidebar {display:inline-block; position:relative; border-right:1px solid #ccc;}
#sidebar .menu-box {margin:0 0 1.5rem;}
#sidebar .menu-label {margin:0; padding:.5rem 1rem; font-size:19px; font-weight:500;}
#sidebar .menu-list {margin:0; padding:0; list-style:none;}
#sidebar .menu-list > li {position:relative; font-size:17px; vertical-align:middle;}
#sidebar .menu-list > li > .menu-header {position:relative; display:block; padding:.5rem 2.25rem; transition:background-color .3s, color .3s;}
#sidebar .menu-list > li > .menu-header:before {content:''; position:absolute; top:0; left:0; bottom:0; width:8px; background-color:#e61758; opacity:0; transition:opacity .3s;}
#sidebar .menu-list > li.on-active > .menu-header,
#sidebar .menu-list > li:hover > .menu-header {background-color:rgba(204, 204, 204, .25);}
#sidebar .menu-list > li.on-active > .menu-header:before {opacity:1;}
#sidebar .menu-list > li .sub-menu {margin:0; padding:0; list-style:none; background-color:rgba(255, 255, 255, .05);}
#sidebar .menu-list > li .sub-menu > li {position:relative; margin-left:3rem; margin-right:1rem; border-bottom:1px solid rgba(204, 204, 204, .35); transition:color .3s, border .3s;}
#sidebar .menu-list > li .sub-menu > li:before {content:'\00B7'; position:absolute; top:7px; left:.5rem;}
#sidebar .menu-list > li .sub-menu > li > a {display:block; padding:.5rem; padding-left:1.25rem;}
#sidebar .menu-list > li .sub-menu > li.on-active {color:rgba(230, 23, 88, .75);}
#sidebar .menu-list > li .sub-menu > li:hover {position:relative; border-bottom:1px solid rgba(230, 23, 88, .75);}
/* CONTENTS */
#contents {width:100%; min-width:1280px; display: flex; flex-flow: row;}
/* FOOTER */
footer {padding:1rem; border-top:1px solid #ccc; width: 100%; min-width: 1280px;}
/* CONTENTS BOX */
#contents-box {display:inline-block; width:calc(100% - 300px); padding:1rem; vertical-align:top;}
/* BOARD SECTION */
.board-section.min-container {max-width:800px; margin:0;}
/* BREADCRUMB */
.breadcrumb {margin:0 0 2rem; font-size:15px;}
/* ADMIN PAGE BUTTON AND INPUT STYLE */
.adm-default-btn {position: relative; display: inline-block; padding:.313rem 2rem; font-size:15px; background-color:transparent; border:1px solid #ccc; vertical-align:middle; cursor:pointer; outline:0; border-radius:4px; overflow:hidden; transition:color .3s;}
.adm-default-btn:before {content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 100%; z-index: 1; background-color: #e61758; transform: scaleX(0); transition: transform .38s; transform-origin: right 50%;}
.adm-default-btn:hover {color:#fff;}
.adm-default-btn:hover:before {transform: scaleX(1); transform-origin: left 50%;}
.adm-default-btn > span {position:relative; z-index:2;}
.adm-default-btn.disabled {background-color:#e5e5e5;}
.adm-default-btn.disabled:before {display:none;}
.adm-default-btn.disabled:hover {color:inherit; background-color:#d5d5d5}
.adm-default-btn.small {padding:.313rem 1rem;}
.board-input {padding:.25rem .5rem; font-size:15px; width:100%; height:32px; vertical-align:middle; border:1px solid #ccc; outline:0; border-radius:4px;}
.board-input[type="file"] {height:auto;}
select.board-input {max-width:160px;}
textarea.board-input {height:auto;}
.board-input.mini {max-width:60px;}
.clr-red {color:#e61758;}
.clr-green {color:#04b5ae;}
/* SEARCH BOX */
.search-box {margin:0 0 1.5rem; padding:0 0 1.5rem; border-bottom:1px solid #bcbcbc;}
.search-box .row {margin:0 0 .75rem;}
.search-box .row:last-child {margin:0;}
.search-box .search-label {display:inline-block; width:110px; margin-right:.5rem; text-align:right; font-style:normal;}
.search-box input.board-input {max-width:328px;}
.search-box input.board-input.short {max-width:160px;}
/* TABLE STYLE */
.tables {width:100%; border-collapse: collapse; border-spacing: 0;}
.tables th {font-weight:500;}
.board-table {font-size:15px; text-align:center;}
.board-table tr {border-bottom:1px solid #ccc;}
.board-table th, .board-table td {padding:.5rem; vertical-align:middle; word-break:keep-all; word-wrap:break-word;}
.board-table th {background-color:#f5f5f5;}
.board-table.list-table td input[type="checkbox"] {width:18px; height:18px;}
.board-table .mem-status {color:#23d160;}
.board-table .mem-status.red {color:#ff470f;}
.board-table .mem-status.black {color:#363636;}
.board-table .readmore {display:inline-block; padding:0 4px; color:#fff; font-size:13px; background-color:rgba(230, 23, 88, .75); border-radius:4px; cursor:pointer;}
.board-util-bar {position:relative; margin: 0 0 .5rem; text-align:right;}
.board-util-bar > .counting {position:absolute; top:50%; left:0; transform:translateY(-50%);}
.board-util-bar > .middled {vertical-align:middle;}
/* 肄섑뀗痢좉�由� - 誘몃뵒 �듦퀎 ���됲듃 諛뺤뒪 */
.board-util-bar  .playtype-select-box {display:inline-block;}
.board-util-bar  .playtype-select-box > label {margin-right:.75rem;}
.board-util-bar  .playtype-select-box > label:last-child {margin-right:0;}
.board-button-box {position:relative; margin:1rem 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row; flex-flow: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end;}
.board-button .adm-default-btn {padding:.313rem 1rem;}
.board-button.small .adm-default-btn {padding:.15rem .35rem; font-size:13px;}
.board-button.inline {display:inline-block;}
.upload-box {display:inline-block;}
.upload-box > label {display:inline-block; margin-left:66px; padding:.25rem .5rem; width:160px; height:32px; vertical-align:middle; border:1px solid #ccc; border-right:0; border-radius:4px 0 0 4px;}
.upload-box > label:before {content:'���됰벑濡�'; position:absolute; top:3px; left:0;}
.upload-box > label input[type="file"]{display:none;}
.upload-box > label + .adm-default-btn {border-radius:0 4px 4px 0;}
/* TABLE - VIEW */
.board-table.view-table {text-align:left;}
.board-table.view-table tr.heading th,
.board-table.view-table tr.heading td {background-color:#fff;}
.board-table.view-table tr.heading th {color:#04b5ae;}
/* TABLE - WRITE */
.board-table.write-table {text-align:left;}
.board-table.write-table tr th {padding-left:2rem;}
.board-table.write-table tr.heading th,
.board-table.write-table tr.heading td {background-color:#fff;}
.board-table.write-table tr.heading th {color:#04b5ae;}
.board-table.write-table .board-input {max-width:450px;}
.board-table.write-table .board-input.tiny {max-width:160px;}
.board-table.write-table .board-input.mini {max-width:60px;}
/* TABLE - LIST - STATICS TABLE*/
.board-table.statics-table thead tr:last-child th {color:#fff; background-color:rgba(77, 55, 161, .65);}
/* MIDI VIEW PAGE NAVBAR */
.midi-view-nav {margin:3rem 0 1rem; border:1px solid #ccc; border-radius:4px; display: flex; flex-flow: row; justify-content: space-between; align-items: center;}
.midi-view-nav > a {display:inline-block; padding:.5rem 1rem; width:16.66%; min-width:120px; text-align:center; transition:color .3s;}
.midi-view-nav > a.on-active {font-weight:500;}
.midi-view-nav > a.on-active,
.midi-view-nav > a:hover {color:#04b5ae;}
/* MIDI INFORMATION BOX */
.midi-info-box {display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-flow:row; flex-flow:row;}
.midi-info-box > .info-column {display:inline-block; padding:.5rem;}
.midi-info-box > .info-column.video-col {width:45%;}
.midi-info-box > .info-column.desc-col {width:55%;}
.midi-info-box > .info-column.desc-col > .header {position:relative; margin:0 0 1.5rem; font-size:16px; font-weight:400;}
.midi-info-box > .info-column.desc-col > .header > span {margin-right:.5rem;}
.midi-info-box > .info-column.desc-col > .header > span > i {color:#e61758; font-style:normal;}
.midi-info-box .tables {font-size:15px; text-align:center;}
.midi-info-box .tables th,
.midi-info-box .tables td {padding:.35rem; border:1px solid #ccc;}
.midi-info-box .tables th {background-color: #f5f5f5;}
.midi-info-box .tables td em {display:block; font-style:normal;}
/* CUSTOM VIDEO PLAYER */
.adm-player {margin:0 0 .5rem;}
.adm-player > video {max-width:100%;}
/* PAGINATION */
.pagination {margin:0; padding:0; margin-left:auto; list-style:none;}
.pagination.centered {margin:0 auto;}
.pagination > li {position:relative; display:inline-block; width:28px; height:28px; line-height:28px; text-align:center; font-size:15px; font-weight:300; vertical-align:middle;}
.pagination > li:not(.arrows):before {content:''; position:absolute; bottom:0; left:0; right:0; height:0; background-color:#e61758; transition:height .3s;}
.pagination > li.on:not(.arrows) {color:#e61758; font-weight:500;}
.pagination > li:not(.arrows):hover:before,
.pagination > li.on:not(.arrows):before {height:3px;}
.pagination > li > a {display:block;}
.pagination > li.arrows > i {vertical-align:middle;}
.pagination.non-style {text-align:left;}
.pagination.non-style > li:not(.arrows) {width:auto; font-size:16px;}
.pagination.non-style > li:not(.arrows):before {display:none;}
/* ALERT DIMMER */
.alert-dimmer {display:none; position:fixed; top:50%; left:50%; min-width:640px; max-width:840px; background-color:#fff; border:1px solid #ccc; border-radius:4px; box-shadow: 0px 10px 13px -7px rgba(0, 0, 0, .5); z-index:500; transform:translate(-50%, -50%);}
.alert-dimmer > .header {margin:0; padding:.5rem 2rem; font-size:22px; font-weight:500; border-bottom:1px solid #ccc;}
.alert-dimmer > .context {padding:2rem 2rem 1rem; text-align:center;}
.alert-dimmer .btn-box {margin:1rem 0 2rem; text-align:center;}
.alert-dimmer .dimmer-btn {display:inline-block; padding:.5rem 1.5rem; width:120px; border:1px solid #ccc; background-color:#fff; font-size:16px; font-weight:400; text-align:center; cursor:pointer; border-radius:4px; transition:color .3s, background-color .3s;}
.alert-dimmer .dimmer-btn:hover {color:#fff; background-color:rgba(230, 23, 88, .75);}
.alert-dimmer p {margin:0;}
.alert-dimmer .caution {margin:1rem 0; font-size:18px;}
.alert-dimmer .caution > em {color:#e61758; font-size:26px; font-style:normal;}
.alert-dimmer .dimmer-table {table-layout:fixed;}
.alert-dimmer .dimmer-table tr {border-bottom:1px solid #ccc;}
.alert-dimmer .dimmer-table th,
.alert-dimmer .dimmer-table td {padding:.5rem;}
.alert-dimmer .dimmer-table th {background-color:#dedede;}
.alert-dimmer .dimmer-table td {background-color:#efefef;}
.alert-dimmer .dimmer-table sup {color:#ff470f;}
.alert-dimmer .dimmer-table textarea + p {margin:.25rem 0; font-size:14px;}
/* AVATAR ITEM */
.avatar-item {position:relative; margin:0 0 .65rem; padding:0 0 .65rem; border-bottom:1px solid #ccc;}
.avatar-item > .avatar {position:absolute; top:0; left:0; display:inline-block; width:60px; text-align:center;}
.avatar-item > .context {position:relative; padding-left:60px; padding-right:72px;}
.avatar-item > .context > .times {position:absolute; top:0; right:.5rem; display:inline-block; width:60px; text-align:right; color:rgba(0, 0, 0, .45);}
.avatar-item .empty {margin:0; text-align:center;}
.charge-statics-box {display:inline-block;}
.charge-statics-box > .tables {width:450px; text-align:center; border-collapse: separate; border-radius:5px;}
.charge-statics-box > .tables td {padding:.5rem; border:1px solid #ccc;}
.charge-statics-box > .tables tr:first-child td:first-child {border-right:0; border-radius:5px 0 0 5px;}
.charge-statics-box > .tables tr:first-child td:last-child {border-radius:0 5px 5px 0;}
.charge-statics-box > .tables tr:first-child td[colspan="2"] {border:1px solid #ccc; border-radius:5px;}
/* 誘몃뵒 由ъ뒪�� �ъ깮 ���� �좏깮 */
.playtype-select-box {margin:.5rem; text-align:right;}
.playtype-select-box > label {margin-right:.75rem;}
.playtype-select-box > label:last-child {margin-right:0;}
.report-data {margin:0;}
.report-data > span {display:block;}
/* �뚯씪 �낅줈�� */
.upload-description {position:relative; padding-left:60px;}
.upload-description input[type="file"].board-input {height:auto;}
.upload-description > i {position:absolute; top:50%; left:0; display:inline-block; width:56px; font-weight:500; font-style:normal; transform:translateY(-50%);}
.upload-description > p {display:inline-block; margin:0 1rem; vertical-align:middle;}

@media screen and (max-width:375px) {
form[name=log_form] .find-sign-row button{font-size:11px; padding:.5rem .1rem; transition:background-color .3s;}
}