/* container */
* {line-height:1.5;}
body {background:#00070D;}
.is-pc {display:block;}
.is-m {display:none;}
@media (max-width:991px){
.is-pc {display:none;}
.is-m {display:block;}
}

/* header */
header .header-main {background:#00070D; position:fixed; left:50%; top:0; transform:translateX(-50%); z-index:1000; width:100%; padding:0 24px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
header .header-main .main-logo {display:flex; flex-wrap:wrap; align-items:center;}
header .header-main .main-logo .menu {display:block; font-size:0; width:24px; height:24px; margin:0 24px 0 0; background:url('../images/icon_menu.png') no-repeat center / cover;}
header .header-main .main-logo h1 a img {width:179px;}
header .header-main .main-right {display:flex; flex-wrap:wrap; align-items:center;}
header .header-main .main-right .right-cate ul {display:flex; flex-wrap:wrap; align-items:center;}
header .header-main .main-right .right-cate ul li a {padding:0 21px; height:100px; font-size:16px; font-weight:600; color:#fff; display:flex; flex-wrap:wrap; align-items:center;}
header .header-main .main-right .right-cate ul li a:before {display:inline-block; content:""; width:24px; height:24px; margin:0 12px 0 0; background-size:cover; background-position:center;}
header .header-main .main-right .right-cate ul li:nth-of-type(1) a:before {background-image:url('../images/icon_main_menu_01.png');}
header .header-main .main-right .right-cate ul li:nth-of-type(2) a:before {background-image:url('../images/icon_main_menu_02.png');}
header .header-main .main-right .right-cate ul li:nth-of-type(3) a:before {background-image:url('../images/icon_main_menu_03.png');}
header .header-main .main-right .right-menu {display:none;}
header .header-main .main-right .right-menu a {display:block; font-size:0; width:30px; height:30px; background:url('../images/icon_menu.png') no-repeat center / cover;}
header .header-main .main-right .right-member {position:relative; margin:0 0 0 12px;}
header .header-main .main-right .right-member .list-image {display:flex; flex-wrap:wrap; align-items:center; height:100px;}
header .header-main .main-right .right-member .list-image img {width:36px; height:36px; border-radius:50%; object-fit:cover;}
header .header-main .main-right .right-member .list-image:after {display:inline-block; content:""; width:24px; height:24px; background:url('../images/icon_admin_user_more.png') no-repeat center / cover;}
header .header-main .main-right .right-member .list-content {pointer-events:none; opacity:0; transition:all ease 0.5s; width:150px; position:absolute; right:0; background:#fff; border-radius:8px; top:70px;}
header .header-main .main-right .right-member .list-content ul {padding:5px 0 0;}
header .header-main .main-right .right-member .list-content ul li a {display:flex; flex-wrap:wrap; align-items:center; padding:8px 20px; font-size:14px; color:#a1a1a1;}
header .header-main .main-right .right-member .list-content ul li a:hover {color:#000; text-decoration:underline;}
header .header-main .main-right .right-member .list-content ul li:last-of-type a {padding:12px 20px; border-top:1px solid #d9d9d9;}
header .header-main .main-right .right-member:hover .list-content {pointer-events:inherit; opacity:1; top:80px;}
header .header-fixed {position:fixed; left:24px; top:100px; width:72px; height:calc(100% - 124px);}
header .header-fixed .inner {position:absolute; left:0; top:0; width:100%; height:100%; overflow-y:auto; overflow-x:hidden; background:linear-gradient(to bottom, #BA54F5, #E14ECA); border-radius:8px;}
header .header-fixed .inner::-webkit-scrollbar {display:none;}
header .header-fixed .fixed-head {display:none;}
header .header-fixed .fixed-body .body-cate {padding:24px 0;}
header .header-fixed .fixed-body .body-cate > ul > li {margin:0 0 24px;}
header .header-fixed .fixed-body .body-cate > ul > li:last-of-type {margin:0;}
header .header-fixed .fixed-body .body-cate > ul > li > a {height:24px; display:flex; flex-wrap:wrap; align-items:center; padding:0 12px;}
header .header-fixed .fixed-body .body-cate > ul > li > a:before {display:inline-block; content:""; width:24px; height:24px; margin:0 auto; background-size:cover; background-position:center;}
header .header-fixed .fixed-body .body-cate > ul > li > a p {display:none; flex:1; min-width:0; margin:0 0 0 8px; font-size:16px; font-weight:500; color:#fff;}
header .header-fixed .fixed-body .body-cate > ul > li > a.toggle:after {display:inline-block; display:none; content:""; width:24px; height:24px; margin:0 0 0 8px; background:url('../images/icon_admin_menu.png') no-repeat center / cover;}
header .header-fixed .fixed-body .body-cate > ul > li > ul.depth-2 {display:none; padding:0 0 0 48px; margin:12px 0 0;}
header .header-fixed .fixed-body .body-cate > ul > li > ul.depth-2 > li {margin:0 0 12px;}
header .header-fixed .fixed-body .body-cate > ul > li > ul.depth-2 > li:last-of-type {margin:0;}
header .header-fixed .fixed-body .body-cate > ul > li > ul.depth-2 > li > a {font-size:16px; font-weight:500; color:#fff; display:flex; flex-wrap:wrap; align-items:center;}
header .header-fixed .fixed-body .body-cate > ul > li > ul.depth-2 > li > .depth-3 {margin:12px 0 0; border-left:1px solid #fff;}
header .header-fixed .fixed-body .body-cate > ul > li > ul.depth-2 > li > .depth-3 > li {margin:0 0 8px;}
header .header-fixed .fixed-body .body-cate > ul > li > ul.depth-2 > li > .depth-3 > li:last-of-type {margin:0;}
header .header-fixed .fixed-body .body-cate > ul > li > ul.depth-2 > li > .depth-3 > li a {padding:0 12px; font-size:14px; font-weight:500; color:#fff; display:flex; flex-wrap:wrap; align-items:center;}
header .header-fixed .fixed-body .body-cate > ul > li.cate01 > a:before {background-image:url('../images/icon_admin_cate_01.png');}
header .header-fixed .fixed-body .body-cate > ul > li.cate02 > a:before {background-image:url('../images/icon_admin_cate_02.png');}
header .header-fixed .fixed-body .body-cate > ul > li.cate03 > a:before {background-image:url('../images/icon_admin_cate_03.png');}
header .header-fixed .fixed-body .body-cate > ul > li.cate04 > a:before {background-image:url('../images/icon_admin_cate_04.png');}
header .header-fixed .fixed-body .body-cate > ul > li.cate05 > a:before {background-image:url('../images/icon_admin_cate_05.png');}
header .header-fixed .fixed-body .body-cate > ul > li.cate06 > a:before {background-image:url('../images/icon_admin_cate_06.png');}
header .header-fixed .fixed-body .body-cate > ul > li.cate07 > a:before {background-image:url('../images/icon_admin_cate_07.png');}
header .header-fixed .fixed-body .body-cate > ul > li.cate08 > a:before {background-image:url('../images/icon_admin_cate_08.png');}
header .header-fixed .fixed-body .body-cate > ul > li.cate09 > a:before {background-image:url('../images/icon_admin_cate_09.png');}


header .header-fixed.hover .inner {width:224px;}
header .header-fixed.hover .inner .fixed-body .body-cate > ul > li a p {display:block;}
header .header-fixed.hover .inner .fixed-body .body-cate > ul > li a.toggle:after {display:inline-block;}
header .header-fixed.hover .fixed-body .body-cate > ul > li.active > a.toggle:after {transform:rotate(180deg);}
header .header-fixed .fixed-body .body-cate > ul > li.active > ul.depth-2 {display:block;}
@media (max-width:1500px){
header .header-main {padding:0 0 0 24px;}
}
@media (max-width:991px){
header {width:100%; position:static; transform:none;}
header .header-main {position:fixed; left:50%; top:0; width:100%; border:0; border-radius:0; margin:0; padding:15px;}
/*header .header-main .main-logo .menu {display:none;}*/
header .header-main .main-logo h1 a img {width:120px;}
header .header-main .main-right .right-cate {display:none;}
header .header-main .main-right .right-menu {display:block;}
header .header-main .main-right .right-menu a {width:25px; height:25px; display: none;}
header .header-main .main-right .right-member {margin:0 0 0 8px;}
header .header-main .main-right .right-member .list-image {height:25px;}
header .header-main .main-right .right-member .list-image img {width:26px; height:26px;}
header .header-main .main-right .right-member .list-image:after {width:20px; height:20px;}
header .header-main .main-right .right-member .list-content {top:25px;}
header .header-main .main-right .right-member .list-content ul li a {font-size:13px; padding:5px 10px;}
header .header-main .main-right .right-member .list-content ul li:last-of-type {margin:5px 0 0;}
header .header-main .main-right .right-member:hover .list-content {top:35px;}
header .header-fixed {pointer-events:none; opacity:0; left:0; top:0; width:100% !important; height:100% !important; background:rgba(0,0,0,0.7); z-index:99999; overflow:hidden; transition:all ease 0.5s;}
header .header-fixed .inner {pointer-events:none; opacity:0; left:-30px;width:280px !important; height:100% !important; transition:all ease 0.5s; border-radius:0 8px 8px 0;}
header .header-fixed .fixed-head {display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; padding:12px;}
header .header-fixed .fixed-head .close {display:block; width:24px; height:24px; font-size:0; position:relative;}
header .header-fixed .fixed-head .close:after {display:block; content:""; width:100%; height:2px; position:absolute; left:0; top:9px; transform:rotate(45deg); background:#fff;}
header .header-fixed .fixed-head .close:before {display:block; content:""; width:100%; height:2px; position:absolute; left:0; top:9px; transform:rotate(-45deg); background:#fff;}
header .header-fixed .fixed-body .body-cate > ul > li > a:before {margin:0 !important;}
header .header-fixed .fixed-body .body-cate > ul > li > a p {display:block !important;}
header .header-fixed .fixed-body .body-cate > ul > li > a.toggle:after {display:inline-block !important;}
header.fixed .header-fixed {pointer-events:inherit; opacity:1;}
header.fixed .header-fixed .inner {pointer-events:inherit; opacity:1; left:0;}
}

/* footer */
footer {background:#262626; padding:40px 0;}
footer .footer-info ul li {margin:0 0 10px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
footer .footer-info ul li:last-of-type {margin:0;}
footer .footer-info ul li * {margin:0 24px 0 0;}
footer .footer-info ul li *:last-child {margin:0;}
footer .footer-info ul li p {font-size:14px; color:#fff;}
footer .footer-info ul li a {height:22px; padding:0 8px; font-size:12px; color:#fff; border-radius:4px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border:1px solid #A1A1A1;}
footer .footer-copy {margin:22px 0 0;}
footer .footer-copy p {text-align:center; font-size:14px; color:#fff;}
footer .footer-copy p b {font-size:14px; font-weight:700; color:#fff;}
@media (max-width:991px){
footer .footer-info ul li p {font-size:13px;}
footer .footer-copy p {font-size:13px;}
footer .footer-copy p b {font-size:13px;}
}
@media (max-width:767px){
footer {padding:25px 0;}
footer .footer-info ul li {margin:0 0 7px;}
footer .footer-info ul li p {width:100%; text-align:center; margin:0 0 5px;}
footer .footer-info ul li p:last-of-type {margin:0;}
footer .footer-info ul li p a {font-size:13px; color:#fff;}
footer .footer-info ul li a {display:none;}
footer .footer-copy {margin:15px 0 0;}
}

/* section */
section {margin:100px 0 0 120px; width:calc(100% - 120px); padding:0 24px 50px 0;}
section.hover {margin:100px 0 0 272px; width:calc(100% - 272px);}
section .container {background:#2B2C31; border-radius:8px; padding:40px;}
@media (max-width:1500px){
section .container {padding:24px;}
}
@media (max-width:991px){
section {margin:55px 0 0; width:100%; padding:0 15px 50px;}
section.hover {margin:55px 0 0; width:100%;}
section .container {padding:15px;}
}

/* color */
.ft-white {color:#fff !important;}
.ft-orange {color:#FF9437 !important;}
.ft-pink {color:#FF5DF6 !important;}
.ft-red {color:#FF2626 !important;}
.ft-blue {color:#26B7FF !important;}
.ft-green {color:#00BF9A !important;}

/* title-box */
.title-box {border-bottom:1px solid #686868; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:0 0 24px; margin:0 0 24px;}
.title-box h2 {font-size:20px; font-weight:bold; color:#fff;}
.title-box h3 {font-size:18px; font-weight:bold; color:#fff;}
.title-box .button-box .btn {padding:0 24px !important;}
@media (max-width:991px){
.title-box {padding:0 0 15px; margin:0 0 15px;}
.title-box h2 {font-size:18px;}
.title-box h3 {font-size:16px;}
.title-box .button-box .btn {height:30px; padding:0 15px !important; font-size:13px;}
}

/* write-box */
.write-box > ul {display:flex; flex-wrap:wrap; margin:0 -21px -42px;}
.write-box > ul > li {width:calc(50% - 42px); margin:0 21px 42px;}
.write-box > ul > li > strong {font-size:18px; font-weight:600; color:#d9d9d9; display:flex; flex-wrap:wrap; align-items:center; margin:0 0 12px;}
.write-box > ul > li > strong small {font-size:18px; font-weight:400; color:#fff;}
.write-box > ul > li > strong em {font-size:18px; font-weight:600; color:#FF9437;}
.write-box > ul > li.grid-4 {width:calc(25% - 42px);}
.write-box > ul > li.full {width:100%;}
@media (max-width:1500px){
.write-box > ul > li.grid-4 {width:calc(50% - 42px);}
}
@media (max-width:991px){
.write-box > ul {margin:0;}
.write-box > ul > li {width:100%; margin:0 0 24px;}
.write-box > ul > li:last-of-type {margin:0;}
.write-box > ul > li > strong {font-size:14px; margin:0 0 10px;}
.write-box > ul > li > strong small {font-size:14px;}
.write-box > ul > li > strong em {font-size:14px;}
.write-box > ul > li.grid-4 {width:100%;}
}

/* write-vertical-box */
.write-vertical-box > ul > li {width:100%; display:flex; flex-wrap:wrap; align-items:center; margin:0 0 24px;}
.write-vertical-box > ul > li:last-of-type {margin:0;}
.write-vertical-box > ul > li > strong {width:155px; font-size:18px; font-weight:600; color:#d9d9d9;}
.write-vertical-box > ul > li > div {flex:1; min-width:0;}
@media (max-width:991px){
.write-vertical-box > ul > li {margin:0 0 15px;}
.write-vertical-box > ul > li > strong {font-size:14px; margin:0 0 10px;}
.write-vertical-box > ul > li > div {flex:none; width:100%;}
}

/* date-box */
.date-box {position:relative; display:flex; flex-wrap:wrap; align-items:center; overflow:hidden; border:1px solid #686868; background:#323339; border-radius:8px;}
.date-box:after {display:inline-block; content:""; width:24px; height:24px; background:url('../images/icon_admin_date.png') no-repeat center / cover; margin:0 12px 0 0;}
.date-box input {line-height:44px; color:#fff; flex:1; min-width:0; display:block; height:44px; padding:0 12px; font-size:14px; background:none;}
.date-box input::-webkit-calendar-picker-indicator {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer; z-index:3;}

/* input-box */
.input-box {display:flex; flex-wrap:wrap; align-items:center; border:1px solid #686868; border-radius:8px; overflow:hidden; background:#323339;}
.input-box input {flex:1; min-width:0; height:44px; padding:0 12px; font-size:14px; color:#fff; background:none;}
.input-box input::placeholder {color:#63656D;}
.input-list-box {display:flex; flex-wrap:wrap; margin:0 -12px -24px;}
.input-list-box .inner {width:calc(25% - 24px); margin:0 12px 24px;}
@media (max-width:991px){
.input-list-box {margin:0 -2.5px -5px;}
.input-list-box .inner {width:calc(50% - 5px); margin:0 2.5px  5px;}
}

/* select-box */
.select-box {display:flex; flex-wrap:wrap; align-items:center; border:1px solid #686868; border-radius:8px; overflow:hidden; background:#323339;}
.select-box select {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 35px 0 12px;
    font-size: 14px;
    color: #fff;

    background-image: url('../images/icon_admin_select.png');
    background-repeat: no-repeat;
    background-position: calc(100% - 12px) center;
    background-size: 24px;

    background-color: #323339; /* 배경색 따로 지정 */
}
.select-box.sm {border-radius:4px;}
.select-box.sm select {height:28px; font-size:13px;}

/* file-box */
.file-box {display:flex; flex-wrap:wrap; align-items:center;}
.file-box p {background:#323339; border:1px solid #686868; border-radius:8px; flex:1; min-width:0; margin:0 6px 0 0; height:44px; padding:0 12px; font-size:14px; font-weight:500; color:#63656d; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; line-height:44px;}
.file-box label {cursor:pointer; font-size:14px; font-weight:500; color:#D9D9D9; position:relative; width:70px; height:44px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; background:#323339; border:1px solid #686868; border-radius:8px;}
.file-box label input {cursor:pointer; position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;}
.file-list-box .file-box {margin:0 0 5px;}
.file-list-box .file-box:last-of-type {margin:0;}

/* file-control-box */
.file-control-box {display:flex; flex-wrap:wrap; align-items:center; border:1px solid #686868; border-radius:4px; overflow:hidden;}
.file-control-box a {border-right:1px solid #686868; display:block; font-size:0; width:24px; height:24px; background-size:8px auto; background-position:center; background-repeat:no-repeat;}
.file-control-box a:last-of-type {border:0;}
.file-control-box a.add {background-image:url('../images/icon_admin_file_add.png');}
.file-control-box a.remove {background-image:url('../images/icon_admin_file_remove.png');}

/* textarea-box */
.textarea-box textarea {display:block; width:100%; height:300px; border:1px solid #686868; border-radius:8px; background:#323339; padding:15px; font-size:14px; color:#fff;}
.textarea-box textarea::placeholder {color:#63656d;}
@media (max-width:991px){
.textarea-box textarea {padding:12px; height:200px;}
}

/* quantity-box */
.quantity-box {display:flex; flex-wrap:wrap; align-items:center; border:1px solid #686868; border-radius:8px; overflow:hidden;}
.quantity-box button {border-right:1px solid #686868; display:block; font-size:0; width:44px; height:44px; background-size:12px auto; background-position:center; background-repeat:no-repeat;}
.quantity-box button:last-of-type {border:0;}
.quantity-box button.plus {background-image:url('../images/icon_admin_file_add.png');}
.quantity-box button.minus {background-image:url('../images/icon_admin_file_remove.png');}

/* check-box */
.check-box {position:relative;}
.check-box input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;}
.check-box label {display:flex; flex-wrap:wrap; align-items:center; font-size:14px; color:#d9d9d9;}
.check-box label:before {display:inline-block; content:""; width:20px; height:20px; margin:0 4px 0 0; background-size:cover; background-position:center;}
.check-box input[type=checkbox] ~ label:before {background-image:url('../images/icon_admin_check.png');}
.check-box input[type=checkbox]:checked ~ label:before {background-image:url('../images/icon_admin_check_on.png');}
.check-box input[type=radio] ~ label:before {background-image:url('../images/icon_admin_radio.png');}
.check-box input[type=radio]:checked ~ label:before {background-image:url('../images/icon_admin_radio_on.png');}
.check-box.f0 label {font-size:0;}
.check-box.f0 label:before {margin:0 auto;}

/* upload-box */
.upload-box {position:relative;}
.upload-box label {padding:41px 0; display:flex; flex-wrap:wrap; align-items:center; align-content:center; justify-content:center; border-radius:8px; border:1px solid #686868; background:#323339;}
.upload-box label p {width:100%; text-align:center; font-size:14px; font-weight:500; color:#63656d;}
.upload-box label input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;}
.upload-box label:before {display:block; content:""; margin:0 auto; width:42px; height:42px; background:url('../images/icon_upload.png') no-repeat center / cover;}
.upload-box .file-list {display:flex; flex-wrap:wrap; margin:12px -6px -12px;}
.upload-box .file-list li {width:calc(16.66% - 12px); margin:0 6px 12px; position:relative; background-size:cover; background-position:center;}
.upload-box .file-list li:after {display:block; content:""; padding-bottom:100%;}
.upload-box .file-list li .delete {font-size:0; position:absolute; right:4px; top:4px; width:16px; height:16px; background:url('../images/icon_delete_file.png') no-repeat center / cover;}
@media (max-width:991px){
.upload-box .file-list {margin:6px -3px -6px;}
.upload-box .file-list li {width:calc(20% - 6px); margin:0 3px 6px;}
}

/* button-box */
.button-box {display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.button-box .btn {text-align:center; line-height:1.2; border:1px solid #686868; background:#323339; border-radius:8px; height:44px; font-size:14px; color:#d9d9d9; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; flex:1; min-width:0;}
.button-box .btn.radius {border-radius:50px !important;}
.button-box .btn.lg {height:48px; font-size:18px; font-weight:bold;}
.button-box .btn.sm {height:28px; border-radius:4px; font-size:12px; padding:0 15px; flex:none;text-decoration: none;}
.button-box .btn-purple {background:#6C00BF; border-color:#6C00BF; color:#fff;}
.button-box .btn-red {background:#BF008F; border-color:#BF008F; color:#fff;}
.button-box .btn-red2 {background:#FF3D40; border-color:#FF3D40; color:#D9D9D9;}
.button-box .btn-green {background:#00BF9A; border-color:#00BF9A; color:#fff;}
.button-box .btn-blue {background:#1D8CF8; border-color:#1D8CF8; color:#fff;}
.button-box .btn-orange {background:#FF3D40; border-color:#FF3D40; color:#fff;}
.button-box .btn-orange2 {background:#FF813D; border-color:#FF813D; color:#D9D9D9;}
.button-box .btn-pink {background:linear-gradient(to bottom, #BA54F5, #E14ECA); color:#fff; border-color:transparent;}
.button-box .btn-white {border:1px solid #D9D9D9; color:#fff; background:none;}
.button-box .btn-gray {background:#63656D; border-color:#63656D; color:#D9D9D9;} 
.button-box .btn-lightgray {background:#D9D9D9; color:#63656D; border-color:#d9d9d9;}
.button-box .btn-yellow {background:#E7BD29; border-color:#E7BD29; color:#323339;}
.button-box .btn-black {background:#00070D; border-color:#00070D; color:#fff;}

/* check-list-box */
.check-list-box {display:flex; flex-wrap:wrap; margin:0 -2.5px -5px;}
.check-list-box .check {position:relative; margin:0 2.5px 5px;}
.check-list-box .check input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;}
.check-list-box .check label {border:1px solid #686868; background:#323339; height:44px; padding:0 12px; font-size:14px; font-weight:500; color:#d9d9d9; border-radius:8px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.check-list-box .check input:checked ~ label {background:#3D6AFF; border-color:#3D6AFF;}

/* code-box */
.code-box {display:flex; flex-wrap:wrap; align-items:center;}
.code-box > img {width:100px;}
.code-box > div {padding:0 0 0 15px; flex:1; min-width:0;}
.code-box > div p {font-size:20px; font-weight:bold; color:#fff;}
@media (max-width:991px){
.code-box > img {width:70px;}
.code-box > div {padding:0 0 0 10px;}
.code-box > div p {font-size:15px;}
}

/* line-box */
.line-box {width:100%; height:1px; background:#686868;}

/* print-box */
.print-box a {display:flex; flex-wrap:wrap; align-items:center; font-size:14px; font-weight:500; color:#d9d9d9;}
.print-box a:before {display:inline-block; content:""; width:20px; height:20px; margin:0 4px 0 0; background:url('../images/icon_admin_print.png') no-repeat center / cover;}

/* text-box */
.text-box p {font-size:16px; word-break:keep-all; color:#fff;}
.text-box p b {font-size:16px; word-break:keep-all; font-weight:500; color:#fff;}
@media (max-width:991px){
.text-box p {font-size:14px;}
.text-box p b {font-size:14px;}
}

/* point-box */
.point-box {display:flex; flex-wrap:wrap; align-items:center;}
.point-box p {display:flex; flex-wrap:wrap; align-items:center;}
.point-box p:after {display:inline-block; content:""; width:1px; height:12px; background:#d9d9d9; margin:0 15px;}
.point-box p:last-of-type:after {display:none;}
.point-box p .inner {display:flex; flex-wrap:wrap; align-items:center; font-size:16px; font-weight:bold; color:#d9d9d9;}
.point-box p .inner b {margin:0 0 0 12px; font-size:24px; font-weight:bold; color:#fff;}
@media (max-width:991px){
.point-box p:after {margin:0 7px;}
.point-box p .inner {font-size:13px;}
.point-box p .inner b {margin:0 0 0 4px; font-size:15px;}
}

/* table-box */
.table-box {overflow-x:auto; white-space:nowrap;}
.table-box table {border:1px solid #686868; border-width:1px 0 0 0;}
.table-box table.fixed {table-layout:fixed;}
.table-box table thead tr th {background:#3B3B3B; border:1px solid #686868; border-width:0 1px 1px 0; padding:15px; font-size:14px; font-weight:500; color:#d9d9d9;}
.table-box table thead tr th:last-of-type {border-right:0;}
.table-box table tbody tr th {padding:15px 10px; background:#3B3B3B; border:1px solid #686868; border-width:0 1px 1px 0; font-size:14px; color:#d9d9d9; white-space:normal; word-break:normal; line-height:1.3; vertical-align:middle;}
.table-box table tbody tr td {padding:10px; border:1px solid #686868; border-width:0 1px 1px 0; font-size:14px; color:#fff;}
.table-box table tbody tr td:last-of-type {border-right:0;}
.table-box table tbody tr td a {display:block; text-align:center; font-size:14px; color:#fff;}
.table-box table tbody tr td a.subject {overflow:hidden; white-space:nowrap; text-overflow:ellipsis; max-width:800px;}
.table-box table tbody tr td .button-box {margin:0 auto;}
.table-box table tbody tr:hover a {text-decoration:none;}
.table-box.gn table thead tr th {background:#00BF9A;}
.table-box.bu table thead tr th {background:#3977FE;}
.table-box.rd table thead tr th {background:#FF2626;}
.table-box.pu table thead tr th {background:#6669EE;}
@media (max-width:991px){
.table-box table thead tr th {padding:10px; font-size:13px;}
.table-box table tbody tr td {padding:10px; font-size:13px;}
.table-box table tbody tr td .button-box .btn {height:30px; font-size:12px; padding:0 10px; text-decoration: none;}
.table-box table tbody tr td a.subject {max-width:400px;}
}
@media (max-width:500px){
.table-box table tbody tr td a.subject {max-width:250px;}
}

/* table-list-box */
.table-list-box ul {display:flex; flex-wrap:wrap; border-top:1px solid #686868;}
.table-list-box ul li {width:50%; border-bottom:1px solid #686868; display:flex; flex-wrap:wrap;}
.table-list-box ul li > strong {width:140px; border-right:1px solid #686868; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; background:#3B3B3B; font-size:14px; font-weight:500; color:#d9d9d9; line-height:1.2;}
.table-list-box ul li > div {flex:1; min-width:0; padding:20px 12px;}
.table-list-box ul li > div > p {font-size:14px; color:#fff;}
.table-list-box ul li.full {width:100%;}
.table-list-box > ul.grid-5 > li {width:20%;}
@media (max-width:1500px){
.table-list-box > ul.grid-5 > li {width:33.33%;}
}
@media (max-width:991px){
.table-list-box ul li {width:100%;}
.table-list-box ul li > strong {width:80px; padding:0 5px; font-size:13px; text-align:center; word-break:keep-all;}
.table-list-box ul li > div {padding:12px;}
.table-list-box ul li > div > p {font-size:13px;}
}
@media (max-width:767px){
.table-list-box > ul.grid-5 > li {width:100%;}
}

/* tab-box */
.tab-box {display:flex; flex-wrap:wrap; align-items:center;}
.tab-box ul {display:flex; flex-wrap:wrap; align-items:center; border-radius:50px; border:1px solid #BE54F2; overflow:hidden;}
.tab-box ul li {width:160px; border-right:1px solid #FF5DF6;}
.tab-box ul li:last-of-type {border:0;}
.tab-box ul li a {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; height:44px; font-size:16px; font-weight:600; color:#FF5DF6;}
.tab-box ul li.active a {background:linear-gradient(to bottom, #BA54F5, #E14ECA); color:#fff;}
@media (max-width:991px){
.tab-box ul {width:100%; border-radius:8px;}
.tab-box ul li {flex:1; min-width:0;}
.tab-box ul li a {font-size:14px;}
}

/* tab-content-box */
.tab-content-box .content {display:none;}
.tab-content-box .content.active {display:block;}

/* paging-box */
.paging-box {margin:24px 0 0;}
.paging-box ul {display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.paging-box ul li {margin:0 12px 0 0;}
.paging-box ul li:last-of-type {margin:0;}
.paging-box ul li a {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; width:32px; height:32px; font-size:14px; font-weight:600; color:#c2c2c2;}
.paging-box ul li p {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; width:32px; height:32px; font-size:14px; font-weight:600; color:#c2c2c2;}
.paging-box ul li.active a {border-radius:50%; background:linear-gradient(to bottom, #BA54F5, #E14ECA); color:#fff;}
.paging-box ul li.pg a {font-size:0;}
.paging-box ul li.pg.prev a {background:url('../images/icon_admin_paging_prev.png') no-repeat center / cover;}
.paging-box ul li.pg.next a {background:url('../images/icon_admin_paging_next.png') no-repeat center / cover;}
@media (max-width:991px){
.paging-box ul li {margin:0 5px 0 0;}
.paging-box ul li a {width:28px; height:28px; font-size:13px;}
.paging-box ul li p {width:28px; height:28px; font-size:13px;}
}

/* popup-box */
.popup-box {pointer-events:none; opacity:0; position:fixed; left:0; top:0; width:100%; height:100%; overflow:hidden; background:rgba(0,0,0,0.8); z-index:9999; transition:all ease 0.5s;}
.popup-box .box {pointer-events:none; opacity:0; position:absolute; left:50%; top:45%; padding:24px; transform:translate(-50%,-50%); width:calc(100% - 30px); max-width:640px; background:#2b2c31; border-radius:8px; transition:all ease 0.5s; max-height:90%; overflow-y:auto;}
.popup-box .popup-head {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; border-bottom:1px solid #686868; padding:0 0 24px; margin:0 0 24px;}
.popup-box .popup-head h2 {font-size:20px; font-weight:bold; color:#fff;}
.popup-box .popup-head .close {display:block; font-size:0; width:20px; height:20px; background:url('../images/icon_admin_close.png') no-repeat center / cover;}
.popup-box.fixed {pointer-events:inherit; opacity:1;}
.popup-box.fixed .box.active {pointer-events:inherit; opacity:1; top:50%;}
@media (max-width:991px){
.popup-box .box {padding:24px 15px;}
.popup-box .popup-head {padding:0 0 15px; margin:0 01 5px;}
.popup-box .popup-head h2 {font-size:16px;}
}

/* guide-box */
.guide-box {position:relative; z-index:100;}
.guide-box:before {display:block; content:""; width:24px; height:24px; background:url('../images/icon_admin_guide.png') no-repeat center / cover;}
.guide-box .guide {pointer-events:none; opacity:0; transition:all ease 0.5s; position:absolute; right:0; top:24px; padding:10px 0 0;}
.guide-box .guide p {font-size:12px; color:#d9d9d9; background:#323339; border:1px solid #686868; border-radius:8px; padding:12px; width:200px;}
.guide-box:hover .guide {pointer-events:inherit; opacity:1;}

/* board-view-box */
.board-view-box .view-head {border-bottom:1px solid #686868; padding:0 0 24px; margin:0 0 24px;}
.board-view-box .view-head h2 {margin:0 0 24px; font-size:18px; font-weight:600; color:#fff;}
.board-view-box .view-head ul {display:flex; flex-wrap:wrap;}
.board-view-box .view-head ul li {margin:0 42px 0 0; display:flex; flex-wrap:wrap; align-items:center;}
.board-view-box .view-head ul li:last-of-type {margin:0;}
.board-view-box .view-head ul li b {font-size:16px; color:#d9d9d9; margin:0 15px 0 0;}
.board-view-box .view-head ul li p {font-size:16px; color:#fff;}
.board-view-box .view-body > * {font-size:18px; color:#fff;}
.board-view-box .view-body img {display:block; margin:0 auto; max-width:100%;}
.board-view-box .view-reply {border-top:1px solid #686868; padding:24px 0 0; margin:24px 0 0;}
.board-view-box .view-reply .inner {background:#4F515B; border-radius:8px; padding:24px;}
.board-view-box .view-reply .inner p {font-size:18px; color:#fff;}
.board-view-box .view-reply .inner p b {font-size:18px; font-weight:600; color:#fff;}
@media (max-width:991px){
.board-view-box .view-head {padding:0 0 15px; margin:0 0 15px;}
.board-view-box .view-head h2 {margin:0 0 15px; font-size:15px;}
.board-view-box .view-head ul li {margin:0 10px 0 0;}
.board-view-box .view-head ul li b {font-size:13px; margin:0 5px 0 0;}
.board-view-box .view-head ul li p {font-size:13px;}
.board-view-box .view-head ul li.full {width:100%; margin-top:5px;}
.board-view-box .view-body p {font-size:13px;}
.board-view-box .view-reply .inner {padding:24px 12px;}
.board-view-box .view-reply .inner p {font-size:13px;}
.board-view-box .view-reply .inner p b {font-size:13px;}
}

/* level-box */
.level-box {display:flex; flex-wrap:wrap;}
.level-box > h3 {text-align:center; font-size:16px; font-weight:bold; color:#fff; width:240px; border-radius:8px; background:#686868; display:flex; flex-wrap:wrap; align-items:center; align-content:center; justify-content:center;}
.level-box > h3 b {width:100%; text-align:center; font-size:24px; font-weight:bold; color:#fff;}
.level-box > div {flex:1; min-width:0; margin:0 0 0 42px; border:1px solid #686868; border-radius:8px; display:flex; flex-wrap:wrap;}
.level-box > div .inner {height:108px; flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:center; align-content:center; justify-content:center;}
.level-box > div .inner p {width:100%; text-align:center; font-size:16px; font-weight:bold; color:#fff;}
.level-box > div .inner strong {width:100%; text-align:center; font-size:24px; font-weight:bold; color:#fff;}
@media (max-width:1500px){
.level-box > h3 {width:100%; padding:15px;}
.level-box > div {flex:none; width:100%; margin:10px 0 0;}
}
@media (max-width:991px){
.level-box > h3 {padding:10px;}
.level-box > h3 b {font-size:20px; width:auto; margin:0 0 0 10px;}
.level-box > div {padding:10px 0;}
.level-box > div .inner {width:33.33%; height:70px; flex:none;}
.level-box > div .inner p {font-size:13px;}
.level-box > div .inner strong {font-size:18px;}
}

/* skin-box */
.skin-box ul {display:flex; flex-wrap:wrap; margin:0 -12px -24px;}
.skin-box ul li {border:1px solid #686868; border-radius:8px; width:calc(25% - 24px); margin:0 12px 24px; padding:12px;}
.skin-box ul li .list-image {position:relative; overflow:hidden; border-radius:8px; background-size:cover; background-position:center;}
.skin-box ul li .list-image:before {position:absolute; left:0; top:0; width:100%; height:100%; content:""; background:rgba(0,0,0,0.5);}
.skin-box ul li .list-image:after {display:block; content:""; padding-bottom:56.5%;}
.skin-box ul li .list-image .check {position:absolute; left:0; top:0; width:100%; height:100%; font-size:0; background:url('../images/icon_admin_skin_check.png') no-repeat 12px 12px / 42px;}
.skin-box ul li .list-image .preview {z-index:5; background:rgba(0,0,0,0.5); border-radius:8px; font-size:14px; font-weight:bold; color:#fff; position:absolute; left:0; bottom:0; width:100%; height:34px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.skin-box ul li .list-content {/*pointer-events:none;*/ display:flex; flex-wrap:wrap; margin:24px -6px -12px;}
.skin-box ul li .list-content .check-box {width:calc(33.33% - 12px); margin:0 6px 12px;}
.skin-box ul li .list-content .check-box:last-of-type {width:calc(66.66% - 12px);}
.skin-box ul li .list-content .check-box label {font-size:12px;}
.skin-box ul li .list-content .check-box label:before {width:15px; height:15px;}
.skin-box ul li .list-button {width:100%; margin:24px 0 0;}
.skin-box ul li .list-button .btn {flex:1; min-width:0; height:34px;}
.skin-box ul li .add {display:block; position:relative; overflow:hidden; border-radius:8px; background:#686868;}
.skin-box ul li .add:after {display:block; content:""; padding-bottom:56.5%;}
.skin-box ul li .add input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;}
.skin-box ul li .add > div {position:absolute; left:0; top:0; width:100%; height:100%; display:flex; flex-wrap:wrap; align-items:center; align-content:center; justify-content:center; cursor:pointer;}
.skin-box ul li .add > div p {width:100%; text-align:center; font-size:16px; font-weight:bold; color:#fff;}
.skin-box ul li .add > div:before {display:block; content:""; margin:0 auto; width:42px; height:42px; background:url('../images/icon_admin_skin_upload.png') no-repeat center / cover;}
.skin-box ul li.active .list-image:before {opacity:0;}
.skin-box ul li.active .list-image .check {background-image:url('../images/icon_admin_skin_check_on.png');}
.skin-box ul li.active .list-content {pointer-events:inherit;}
@media (max-width:1500px){
.skin-box ul li {width:calc(50% - 24px);}
}
@media (max-width:991px){
.skin-box ul {margin:0 -6px -12px;}
.skin-box ul li {width:calc(50% - 12px); padding:6px; margin:0 6px 12px;}
.skin-box ul li .list-image .check {background-size:24px; background-position:6px 6px;}
.skin-box ul li .list-content {margin:12px 0;}
.skin-box ul li .list-content .check-box {width:100%; margin:0 0 5px;}
.skin-box ul li .list-content .check-box:last-of-type {width:100%; margin:0;}
.skin-box ul li .list-button {margin:12px 0 0;}
.skin-box ul li .add > div p {font-size:13px;}
.skin-box ul li .add > div:before {width:32px; height:32px;}
}

/* color-box */
.color-box ul {display:flex; flex-wrap:wrap; margin:0 -12px -24px;}
.color-box ul li {width:calc(14.28% - 24px); margin:0 12px 24px; border:1px solid #686868; border-radius:8px; padding:12px;}
.color-box ul li .list-head strong {display:block; text-align:center; font-size:14px; font-weight:500; color:#fff;}
.color-box ul li .list-body {margin:12px 0 0; position:relative; border-radius:8px; overflow:hidden;}
.color-box ul li .list-body:after {display:block; content:""; padding-bottom:80%;}
.color-box ul li .list-body input {display:block; width:100%; height:100%; position:absolute; left:0; top:0; border:0; outline:0; background:none; padding:0; border-radius:8px; overflow:hidden; appearance:none;}
.color-box ul li .list-body input::-webkit-color-swatch-wrapper {padding:0;}
.color-box ul li .list-body input::-webkit-color-swatch {border:0; border-radius:8px;}
.color-box ul li .list-body.sm:after {padding-bottom:26.5%;}
.color-box ul li .list-foot {margin:12px 0 0;}
.color-box ul li .list-foot strong {display:block; font-size:14px; font-weight:500; color:#fff; margin:0 0 12px;}
.color-box ul li .list-foot .select-box {background:#323339; border:0;}
.color-box ul li .list-foot .select-box select {height:34px;}
.color-box ul li .list-foot .check-box {margin:12px 0 0;}
@media (max-width:1600px){
.color-box ul li {width:calc(20% - 24px);}
}
@media (max-width:1200px){
.color-box ul li {width:calc(33.33% - 24px);}
}
@media (max-width:991px){
.color-box ul {margin:0 -6px -12px;}
.color-box ul li {width:calc(33.33% - 12px); margin:0 6px 12px;}
.color-box ul li .list-head strong {font-size:12px;}
.color-box ul li .list-body {margin:6px 0 0;}
.color-box ul li .list-foot {margin:6px 0 0;}
.color-box ul li .list-foot strong {font-size:12px; margin:0 0 6px;}
.color-box ul li .list-foot .check-box {margin:6px 0 0;}
.color-box.main ul {margin:0;}
.color-box.main ul li {width:100%; margin:0 0 12px;}
.color-box.main ul li:last-of-type {margin:0;}
.color-box.main ul li .list-body:after {padding-bottom:26.5%;}
}
@media (max-width:767px){
.color-box ul {margin:0 -3px -6px;}
.color-box ul li {width:calc(50% - 6px); padding:6px; margin:0 3px 6px;}
}

/* number-box */
.number-box {display:flex; flex-wrap:wrap;}
.number-box .number-quantity {width:170px; background:#323339; display:flex; flex-wrap:wrap; border:1px solid #686868; border-radius:8px;}
.number-box .number-quantity a {display:block; font-size:0; width:44px; height:100%; background-size:12px auto; background-position:center; background-repeat:no-repeat;}
.number-box .number-quantity a.plus {background-image:url('../images/icon_admin_plus_w.png');}
.number-box .number-quantity a.minus {background-image:url('../images/icon_admin_minus_w.png');}
.number-box .number-quantity p {font-size:14px; font-weight:500; color:#fff; border:1px solid #686868; border-width:0 1px; flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.number-box .number-list {flex:1; min-width:0; margin:0 0 0 24px; overflow:hidden;}
.number-box .number-list ul {display:block; overflow-x:auto; white-space:nowrap;}
.number-box .number-list ul li {display:inline-block; margin:0 10px 0 0;}
.number-box .number-list ul li:last-of-type {margin:0;}
.number-box .number-list ul li .member {width:100px; height:64px; background:#323339; border:1px solid #686868; font-size:20px; font-weight:600; color:#fff; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
@media (max-width:991px){
.number-box .number-quantity {width:150px;}
.number-box .number-quantity a {height:100%; width:35px; background-size:8px auto;}
.number-box .number-quantity p {font-size:13px;}
.number-box .number-list {margin:0 0 0 10px;}
.number-box .number-list ul li {margin:0 2px 0 0;}
.number-box .number-list ul li .member {width:100px; height:64px; font-size:13px; border-radius:4px;}
}

/* poster-box */
.poster-box ul {display:flex; flex-wrap:wrap; margin:0 -21px -42px;}
.poster-box ul li {width:calc(25% - 42px); margin:0 21px 42px;}
.poster-box ul li .list-image {background-size:cover; background-position:center; border:1px solid #686868;}
.poster-box ul li .list-image:after {display:block; content:""; padding-bottom:140%;}
.poster-box ul li .list-content {margin:12px 0 0;}
.poster-box ul li .list-content p {text-align:center; font-size:18px; font-weight:600; color:#d9d9d9; margin:0 0 12px;}
.poster-box ul li .list-content .button-box .btn {height:34px; font-size:16px; font-weight:bold;}
@media (max-width:1200px){
.poster-box ul {margin:0 -12px -24px;}
.poster-box ul li {width:calc(25% - 12px); margin:0 6px 24px;}
.poster-box ul li .list-content p {font-size:16px;}
}
@media (max-width:991px){
.poster-box ul li {width:calc(50% - 12px);}
.poster-box ul li .list-content p {font-size:14px;}
.poster-box ul li .list-content .button-box .btn {height:30px; font-size:14px;}
}

/* date-select-box */
.date-select-box {margin:0 0 50px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.date-select-box a {display:block; font-size:0; width:42px; height:42px; background-size:cover; background-position:center;}
.date-select-box a.prev {background-image:url('../images/icon_date_prev.png');}
.date-select-box a.next {background-image:url('../images/icon_date_next.png');}
.date-select-box input {width:200px; text-align:center; font-size:30px; font-weight:bold; color:#fff; background:none;}
.date-select-box input::-webkit-calendar-picker-indicator {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer; z-index:3;}
@media (max-width:991px){
.date-select-box {margin:0 0 32px;}
.date-select-box a {width:24px; height:24px;}
.date-select-box input {width:130px; font-size:18px;}
}