@charset "utf-8";

/* Reset */
* {margin:0;padding:0;box-sizing: border-box;text-decoration: none;list-style:none;transition:0.3s;}
html {scrollbar-face-color: #646464; scrollbar-base-color: #646464; scrollbar-3dlight-color: #646464;scrollbar-highlight-color: #646464; scrollbar-track-color: #000; scrollbar-arrow-color: #000; scrollbar-shadow-color: #646464; scrollbar-dark-shadow-color: #646464 }
html, body {width:100%;background:#000;box-sizing: border-box;font-family:"Pretendard Variable", Pretendard, Malgun Gothic,dotum;font-weight:400}
body {height:100%;padding-right:0 !important;text-align:center;background-color:#000;color:#fff;font-size:14px;}
textarea {resize:none}
li {vertical-align: middle;list-style:none}
img, fieldset, iframe {border: 0 none}
input, select, button {vertical-align: middle}
img {vertical-align: top}
i, em, address {font-style: normal}
label, button {cursor: pointer}
a, a.link, a.visited, a:active, a:hover {text-decoration: none;color:inherit}
table {border-collapse:collapse;border-spacing:0px;}
button {background:inherit;color:inherit}
::-webkit-scrollbar {width:8px;height:8px;}
::-webkit-scrollbar-button, ::-webkit-scrollbar-track, ::-webkit-scrollbar-track-piece, ::-webkit-scrollbar-corner, ::-webkit-resizer {background-color: rgba(0, 0, 0, .20)}
::-webkit-scrollbar-thumb {height: 50px;background-color: #828282;border-radius: 3px}

.wrapper {width:100%;min-height:100%;position:relative;padding:0;}
.header-section {width:100%;margin:0 auto;position:relative;transition:.3s;background-color:#000;border-bottom:solid 1px #222;z-index:102;position:sticky;top:0}
.header-main {height:80px;position:relative;z-index:103;}
.contain {position:relative;width:1450px;margin:auto;}
.left-menu-btn {width: 32px;background-color: transparent;border: none;padding: 0;position: relative;z-index:100;color: #fff;margin-right:10px;}
.logo {width:300px;display:inline-block;position:relative;}
.logo .logo-img {width: 100%;position: relative;}
.bal-container {margin-left:auto}
.ml-auto, .mx-auto {margin-left: auto !important;}
.before-login.active, .after-login.active {display: block;}
.before-login button, .after-login button {width:120px;height:34px;margin-left:6px;}

.al-d-info {height: 100%;padding:0 20px;}
.al-d-info i {margin-right: 6px;color:#ffe262}
.al-d-info .symbol {color: #999;}
.al-d-info:after {width: 0;height: 100%;max-height: 28px;border-right: solid 1px rgba(255, 255, 255, .1);right: 0;top: 0;bottom: 0;margin: auto 0;}
.drop-down .toggle-btn {transition: 0s;}
.after-login .nav-btn {width:36px;height:36px;font-size:14px;position:relative;border-radius:50%;background-color:#333;border:solid 1px rgba(255, 255, 255, .1);color:#ccc;text-shadow:0 1px 0 rgba(0, 0, 0, .25);margin:0 20px;}

.dropdown-menu {width:240px;position: absolute;top: 100%;left: 0;z-index: 1000;display: none;float: left;min-width: 160px;padding: 5px 0;margin: 2px 0 0;font-size: 14px;text-align: left;list-style: none;background:#222;border: 1px solid #ccc;border: 1px solid rgba(0, 0, 0, .15);border-radius: 4px;}
.open>.dropdown-menu {display: block;}

.after-login .account-info {}
.after-login .account-info .row {width: 100%;display:flex;padding: 0 5px;cursor: pointer;margin: 1px 0;border-radius: 5px;background-image: linear-gradient(to left, rgba(42, 42, 42, 0.3), rgba(58, 58, 58, 0.5));position: relative;overflow: hidden;z-index:10000;}
.after-login .account-info .labels {text-align: left;min-width: 90px;display: flex;align-items: center;justify-content: flex-start;color: #999;font-size: 12px;padding: 5px 0 6px;}
.after-login .account-info .labels .icon {width: 30px;height: 30px;display: flex;align-items: center;justify-content: center;color: #ffefc3;font-size: 16px;margin-right: 12px;background-image: linear-gradient(rgba(255, 214, 43, 0.05), rgba(187, 151, 0, 0.15));border-radius: 5px;box-shadow: 0 1px 0 rgba(255, 214, 43, .25);padding: 0 0 2px;}
.after-login .account-info .information {text-align: left;display: flex;align-items: center;justify-content: center;color: #fff;font-size: 14px;padding: 0 0 0 10px;}
.w-b:before, .w-a:after, .w-ba:before, .w-ba:after {content: '';position: absolute;pointer-events: none;z-index: -1;transition: .3s;}
.after-login .account-info .information .symbol {color: #fea450;margin-left: 3px;}
.btn-transfer {background: #147130;border-radius: 3px;padding: 4px 10px;color: #fff;font-size: 12px;margin-left: 10px;}
.category-toggle {display: flex !important;margin-top: 3px;    }

.sc-toggle:before {width: 100%;height: 140%;left: 0;top: 50%;z-index: 10;transform: translateY(-50%) skew(-35deg);-webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0));mask-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0));}
.sc-toggle:first-child:before {left: 10px;transform-origin: top right;border-right: solid 1px #fadd60;}
.sc-toggle:last-child:before {left: -10px;transform-origin: bottom left;border-left: solid 1px #fadd60;}
.sc-toggle .btn-panel {width: 100%;height: 100%;overflow: hidden;padding: 0 5px;}
.sc-toggle:first-child .btn-panel {border-radius: 40px 0 0 40px;border-left: solid 1px rgba(44, 119, 19, .5);padding-right: 60px;}
.sc-toggle .btn-panel:before {width: 100%;height: 100%;background-color: rgba(7, 6, 6, .8);left: 0;top: 0;transform: skew(-35deg);border-top: solid 1px rgba(44, 119, 19, .25);border-bottom: solid 1px rgba(255, 255, 255, .15);}
.sc-toggle:first-child .btn-panel:before {transform-origin: top right;}
.sc-toggle .icon-panel {width: 40px;height: 40px;margin: 5px !important;}
.sc-toggle .icon-panel img {max-width: 36px;max-height: 36px;}
.sc-toggle .title {font-size: 16px;font-weight:700}
		
.btn-yellow, .btn-transparent, .btn-green, .btn-blue, .btn-red {color: #fff;border: none;background-color: transparent;position: relative;z-index: 1;font-family: "Pretendard Variable", Pretendard, Malgun Gothic, dotum;font-size: 16px;font-weight:700}
.btn-transparent {border-radius:17px;border: solid 1px #363432;color: #fff;}
.btn-yellow {color: #000;border-radius:17px;display: block;background-color: #b97f02;background-image: linear-gradient(to bottom right, #fadc5c, #c98b02);}
.btn-transparent i {color: #ffdf6f;}
.btn-yellow i, .btn-transparent i, .btn-green i, .btn-blue i, .btn-red i {transition: .3s;margin-right: 5px;}
.btn-mid {display:inline-block;text-align:center;color:#fff;cursor:pointer;padding:8px 30px;font-size:14px;}
.btn-gray {border:1px solid #111;background:linear-gradient(to bottom, rgba(80, 80, 80, 1) 1%, rgba(33, 33, 33, 1) 100%);}
.btn-gold {border:1px solid #956628;background:linear-gradient(180deg, #fffaa5 0, #956628);}

.reqacc {color:#fff;background:linear-gradient(90deg, #FD5E85 -23.54%, #BF1849 76.46%);padding:8px 12px;font-size:14px;font-weight:500;border-radius: 8px;}
.btnwrap {width:100%;margin-top:10px;display:flex;flex-wrap:wrap;justify-content:space-between;row-gap:4px;}
.btnwrap button {width:calc(10% - 2px);cursor:pointer;padding:8px 12px;font-size:14px;font-weight:500;color:#fff;border:1px solid #111;background:linear-gradient(to bottom, rgba(80, 80, 80, 1) 1%, rgba(33, 33, 33, 1) 100%);}

.header-menu {width:100%;height:60px;transition:.3s;border-top: solid 1px #222;z-index:104;}
.main-menu {width: 100%;display:flex;justify-content:center;align-items:center;}
.main-menu .bs-ul {width: 100%;table-layout: fixed;}
.bs-ul {list-style: none;margin-bottom: 0;width: auto;display: table;padding: 0;}
.main-menu .bs-ul li {width: 100%;}
.bs-ul li {list-style: none;width: auto;height: auto;display: table-cell;text-align: center;vertical-align: middle;position: relative;}
.main-menu .bs-ul li a {color: #d2d0d0;font-size: 16px;}
.main-menu .bs-ul li a .icon-panel {width: 34px;height: 34px;color: #c3a939;font-size: 20px;transition: .3s;}
.main-menu .bs-ul li a:hover .icon-panel {color:#fadc5c;margin-right: 5px;text-shadow: 0 0 10px rgba(208, 160, 34, .75);}

.snb_btn {display:none;cursor:pointer;position:fixed;top:0;z-index:9990;left:0;width:50px;text-align:center;height:50px;line-height:50px;}
.snb_btn i {font-size:26px;line-height:50px;}
.info_btn {display:none;cursor:pointer;position:fixed;top:0;z-index:9990;right:0;width:50px;text-align:center;height:50px;line-height:50px;}
.info_btn i {font-size:26px;line-height:50px;color:#fadb6d}

section {width:100%}
.banner {margin-top:10px;}
.banner img {width:100%}

.mnotice {width:100%;margin-top:10px; padding:10px;display:flex;align-items:center;border-radius:15px;background:#222;font-size:16px}
.mnotice i {color:#ffdf6f;margin-right:10px;}
.mnotice marquee {padding:0 20px}

.page-content {margin-top:10px}

.category-btn {width: 100%;display: inline-block;margin: 0 0 15px;position: relative;overflow:hidden;}
.category-btn img {width:100%;border-radius:15px;}
.category-btn:hover img {transition: .8s;transform: scale(1.1);}

.main-board {margin-top:30px;display:grid;grid-template-columns: 1fr 1fr;gap:40px;}
.main-board .board-container {display:flex;flex-flow:column;gap:8px;}
.main-board .board-container .title-wrap {display:flex;justify-content:space-between;align-items:center;padding:16px;border-radius: 5px;background-image: linear-gradient(to bottom right, #fadc5c, #c98b02);}
.main-board .board-container .title-wrap .title {font-size:20px;font-weight:900;text-shadow: 0 1px 3px rgb(0 0 0 / 50%);}
.main-board .board-container .title-wrap .title span {font-weight:900;font-size:18px;color:#ffff00}
.main-board .board-container .title-wrap a {font-size:16px;font-weight:900;color:#fffaa5}
.main-board .board-container .list {padding:6px;background-color:#000;border: 1px solid #000;border-radius:6px;display:flex;flex-flow:column;height:240px;overflow:hidden;}
.main-board .board-container .list .item {display:flex;gap:6px;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255, 255, 255, 0.1);font-size:16px;font-weight:500}
.main-board .board-container .list .item:last-child {border:0;}
.main-board .board-container .list .item .chk {display:block;width:16px;height:16px;border:1px solid #000}
.main-board .board-container .list .item .state {margin-left:auto}
.main-board .board-container .list .item input, .board-container .list .item .cstext {border-radius: 8px;border: 1px solid #e2e8f0;background-color: #fff;font-size: 14px;width: 100%;padding: 6px;}

.page_title {
    font-size:24px;
    max-width:100%;
    color:#f5cc7f;
    height:50px;
    line-height:50px;
    margin:10px auto 0 auto;
    position:relative;
}
.page_title span {
    color: #b79453;
}
.page_title:after {
    position: absolute;
    content: "";
    width:100%;
    height:12px;
    top:40px;
    left:50%;
    transform: translateX(-50%);
    background-image: radial-gradient(#f5cc7f, transparent, transparent);
    border-radius: 50%;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
}


.list-container {width:100%;padding:20px;}
.list-container .card-wrap {width:100%;display:grid;grid-template-columns:repeat(6, 1fr);gap:30px;}
.list-container .card-wrap .card {width:100%;background-color:#5e4322;background-image:linear-gradient(to bottom left, #f5cc7f, #96653b, #b79453);border-radius:10px;box-shadow:0 5px 15px rgba(0, 0, 0, 1);display:inline-block;padding:5px 5px;position:relative;animation:scBtnAnim 0.8s ease 1 backwards;transform-origin:bottom center;}
.list-container .card-wrap .card:before, .list-container .card-wrap .card:after {width:calc(100% - 2px);height:calc(100% - 2px);left:0;right:0;top:0;bottom:0;margin:auto;border-radius:10px;background-image:linear-gradient(#97663c, #58341c);transition:0.3s;}
.list-container .card-wrap .card .g-panel {width:100%;background-color:#301605;border-radius:8px;padding:8px 9px;overflow:hidden;transition:0.3s;position:relative;z-index:1;}
.list-container .card-wrap .card .g-panel:before {width:120%;height:50%;left:-10%;right:0;bottom:-20%;margin:0 auto;background-image:radial-gradient(rgba(108, 74, 40, 0.8), rgba(149, 112, 76, 0.15), rgba(108, 74, 40, 0), rgba(108, 74, 40, 0));}
.list-container .card-wrap .card .g-panel .g-cont {background-color:#000;border-radius:8px;overflow:hidden;position:relative;box-shadow:0 1px 1px #6c4829;}
.list-container .card-wrap .card .g-panel .g-cont img {width:100%;/*aspect-ratio: 500 / 400;*/}
.list-container .card-wrap .card .g-panel .g-cont .play-btn {width:50%;height:35px;border-radius:5px;position: absolute;left:0;right:0;top:0;bottom:0;margin:auto;z-index:4;box-shadow:0 0 10px rgba(234, 209, 163, 0.5), 0 1px 2px rgba(0, 0, 0, 1), inset 0 0 0 1px #1d160e;opacity:0;transform:scale(0);color:#fff;text-shadow:0 1px 0 rgba(255, 255, 255, 0.4);background-color:#dece8f;background-image:linear-gradient(180deg, #fffaa5 0, #956628);/*linear-gradient(#dece8f, #998643);*/border:solid 1px #dece8f;}
.list-container .card-wrap .card .g-panel .g-info {width:100%;position:relative;z-index:3;}
.list-container .card-wrap .card .g-panel .g-info .g-name {width:100%;display:inline-block;padding:10px 0 6px 0;color:#ffffff;text-align:center;font-size:20px;font-weight:700;text-shadow:0 1px 2px rgba(0, 0, 0, 1);}
.list-container .card-wrap .card .g-panel .glass {width:200%;height:100%;position:absolute;bottom:0;left:0;background-image:linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1));transform-origin:bottom left;transform:rotate(-48deg);z-index:1;transition:0.3s;}
.list-container .card-wrap .card:hover .g-panel .g-cont img {transform:scale(1.1);opacity:0.5;}
.list-container .card-wrap .card:hover .g-panel .g-cont .play-btn {opacity:1;transform:scale(1);}
.list-container .card-wrap .card:hover .g-panel .glass {transform:rotate(0deg);opacity:0;}

.search-wrap {width:100%;padding:10px;}
.search-wrap input {width:100%;padding:4px;color:#000}

.board-container {width:100%;padding:20px;}
.board-container .list-table {width:100%;border-collapse:collapse;font-size:16px;}
.board-container .list-table thead th {font-weight:500;background:#b6954f;height:36px;line-height:36px;text-align:center}
.board-container .list-table tbody td {padding:10px;border-bottom:1px solid #222;text-align:left}

.board-container .view-table {width:100%;border-collapse:collapse;font-size:16px;}
.board-container .view-table tbody td {padding:0 10px;border:1px solid #222;text-align:left}
.board-container .view-table tbody td.tit {height:50px;line-height:50px}
.board-container .view-table tbody td.cont {padding:10px}

.board-container .btn-wrap {width:100%;padding:20px 0;display:flex}
.board-container .page-wrap {width:100%;padding:20px 0;display:flex;justify-content:center;align-items:center;gap:6px;font-size:14px}
.board-container .page-wrap a {display:inline-block;padding:6px;border:1px solid #222}
.board-container .page-wrap a.active {color:#b6954f}

.board-container>.item {width:100%;margin-bottom:20px;padding:10px;border:1px solid #333;border-radius:6px;text-align:left/*border:solid transparent;border-image:linear-gradient(137deg, #fffaa5 0, #b6954f 10%, #956628 30%, #fffaa5 50%, #956628 70%, #b6954f 90%, #fffaa5);border-image-slice:1;border-image-width:1px;*/}
.board-container>.item .item-title {width:100%;font-size:18px;padding:6px 0;border-bottom:2px solid #333;}
.board-container>.item .item-content {width:100%;font-size:16px;padding:6px 0;font-weight:400;}
.board-container>.item input {border-radius: 8px;border: 1px solid #e2e8f0;background-color: #fff;font-size: 14px;width: 100%;padding: 6px;}

.text-right {text-align: right !important;}
.text-center {text-align:center !important}

.flex-nowrap {flex-wrap: nowrap !important;}
.dflex-ac-js {display: flex !important;align-items: center;align-content: center;justify-content: flex-start;flex-wrap: wrap;}
.dflex-ac-je {display: flex !important;align-items: center;align-content: center;justify-content: flex-end;flex-wrap: wrap;}
.dflex-ac-jc {display:flex !important;align-items:center;align-content:center;justify-content:center;flex-wrap:wrap;}
.align-items-center {align-items:center !important;}

.h-100 {height: 100% !important;}
.w-100 {width: 100% !important;}

.mobile {display: none !important;}

footer {width:100%;padding:20px 0}
.logo-footer {width:200px}

.popup-container {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, .5);z-index:9999;overflow:hidden}
.popup-wrap {width:1600px;margin:0 auto;overflow:hidden;white-space:nowrap;}
.popup-container .popup-wrap .popup-box {display:inline-block;margin-top:68px;width:calc(25% - 10px);margin-right:10px;overflow:hidden;background:#000;animation:opacityIn .3s;transition:opacity .3s;border:solid transparent;border-image:linear-gradient(137deg, #fffaa5 0, #b6954f 10%, #956628 30%, #fffaa5 50%, #956628 70%, #b6954f 90%, #fffaa5);border-image-slice:1;}
.popup-container .popup-wrap .popup-box .pop_head {display:flex;align-items:center;justify-content:space-between;width:100%;height:30px;background-color:#000;position:relative;padding:0 10px}
.popup-container .popup-wrap .popup-box .pop_head button {border:none;color:#fff;font-size:14px;font-weight:500}
.popup-container .popup-wrap .popup-box .popup-contents-box {min-height:400px;padding:0}
.popup-container .popup-wrap .popup-box .popup-contents-box img {display:block;width:100%;max-height:calc(100vh - 150px);}
.popup-container .popup-wrap .popup-box .popup-footer {height:72px;background-color:#000;color:#fff;display:flex;justify-content:center;align-items:center;border:1px solid #444;}
.popup-container .popup-wrap .popup-box .popup-footer button {border-radius:12px;padding:8px 12px;border:0;color:#fff;font-size:12px;cursor:pointer;background: linear-gradient(to bottom right, #fadc5c, #c98b02);}

.mobile-menu {width:100%;height:60px;position:fixed;left:0;bottom:0;z-index:1060;background-color:#0a0a0a;border-top:solid 1px #1a1a1a;margin-bottom:0 !important;}
.mobile-footer-menu {width:100%;height:100%;display:flex;flex-wrap:nowrap}
.mobile-menu .mobile-footer-menu a {width:25%;height:calc(100% + 5px);background-color: #1a1a1a;border-top: solid 1px #2a2a2a;row-gap:4px;}
.mobile-menu .mobile-footer-menu a .icon-panel {font-size: 30px;height: 30px;color:#aaa}
.mobile-menu .mobile-footer-menu a:nth-child(3) .icon-panel {width: 40px;height: 40px;border-radius: 50%;background-image: linear-gradient(#ffe262, #b87e01);font-size: 20px;color: rgba(0, 0, 0, .75);box-shadow: 0 0 10px #926300;}
.mobile-menu .mobile-footer-menu a .text {width: 100%;display: inline-block;color: #aaa;font-size:12px;font-weight:500}

#login-modal {position:relative;width:400px;margin:0 auto;max-width:unset;border-radius:20px;transition:.5s ease-in;border:4px solid transparent;background-image:linear-gradient(#000, #000), linear-gradient(137deg, #fffaa5 0, #b6954f 10%, #956628 30%, #fffaa5 50%, #956628 70%, #b6954f 90%, #fffaa5);background-origin: border-box;background-clip: content-box, border-box;}
#login-modal a.close-modal {top:10px;right:10px;background-image:url("/img/Gray-X-Circle-Mini-Icon.svg");}
#login-modal .login-wrap {display:flex;flex-flow:column;gap:20px;z-index:2;margin:40px auto;width:80%;}
#login-modal .login-wrap .logo {display: flex;width:100%;justify-content:center;}
#login-modal .login-wrap .logo img {width:100%;}
#login-modal .login-wrap .input-wrap {display: flex;flex-flow: column;gap: 12px;}
#login-modal .login-wrap .input-wrap input {padding: 12px;display: flex;justify-content: center;align-items: center;text-align: center;border-radius: 12px;border: 1px solid #e2e8f0;background-color: #f8fafc;color:#000}
#login-modal .login-wrap .input-wrap .button {display: flex;justify-content: center;align-items: center;padding: 12px;border:1px solid #956628;border-radius:12px;font-size:14px;font-weight:500;}
#login-modal .login-wrap .input-wrap .button#login-btn {cursor:pointer;color:#fff;background:linear-gradient(180deg, #fffaa5 0, #956628);text-shadow:0 1px 3px rgb(0 0 0 / 80%);}
#login-modal .login-wrap .input-wrap .button#register-btn {cursor:pointer;background-color:#fff;color:#956628;}
#login-modal .login-wrap .input-wrap .button i {margin-right:4px;}

#join-modal {text-align:center;font-size:14px;position:relative;width:600px;margin:0 auto;max-width:unset;border-radius:20px;transition:.5s ease-in;border:4px solid transparent;background-image:linear-gradient(#000, #000), linear-gradient(137deg, #fffaa5 0, #b6954f 10%, #956628 30%, #fffaa5 50%, #956628 70%, #b6954f 90%, #fffaa5);background-origin: border-box;background-clip: content-box, border-box;}
#join-modal a.close-modal {top:10px;right:10px;background-image:url("/img/Gray-X-Circle-Mini-Icon.svg");}
#join-modal .login-wrap {display:flex;flex-flow:column;gap:20px;z-index:2;margin:40px auto;width:80%;}
#join-modal .login-wrap .logo {display: flex;width:100%;justify-content:center;}
#join-modal .login-wrap .logo img {width:100%;}
#join-modal .login-wrap .input-wrap {display: flex;flex-flow: column;gap: 12px;}
#join-modal .login-wrap .input-wrap .title {color:#fff;}
#join-modal .login-wrap .input-wrap .desc {color:#ff0000}
#join-modal .login-wrap .input-wrap input {padding: 12px;display: flex;justify-content: center;align-items: center;text-align: center;border-radius: 12px;border: 1px solid #e2e8f0;background-color: #f8fafc;}
#join-modal .login-wrap .input-wrap select {padding: 12px;display: flex;justify-content: center;align-items: center;text-align: center;border-radius: 12px;border: 1px solid #e2e8f0;background-color: #f8fafc;}
#join-modal .login-wrap .input-wrap .button {display: flex;justify-content: center;align-items: center;padding: 12px;border:1px solid #956628;border-radius:12px;font-size:14px;font-weight:500;}
#join-modal .login-wrap .input-wrap .button#join-btn {cursor:pointer;color:#fff;background:linear-gradient(180deg, #fffaa5 0, #956628);text-shadow:0 1px 3px rgb(0 0 0 / 80%);}
#join-modal .login-wrap .input-wrap .button i {margin-right:4px;}

@media screen and (max-width:768px) {
	.wrapper {padding-bottom:60px;}
	.header-main {height:90px;}
	.logo {width:200px}
	
	.bal-container {width:100%;display:flex;justify-content:center;padding-top:4px;border-top:solid 1px #876f0d;}
	.snb_btn {display:block}
	.info_btn {display:block}
	.after-login {width:100%}
	.after-login .al-btn {width: 100%;}
	.category-toggle {width:100%}
	.after-login button.sc-toggle {width: calc(49% - 1%);height: 40px;margin: 0 2px;background-color: transparent;border: none;color: #fff;position:relative				}
		
	.header-menu {height:0;filter:none;position:relative;z-index:1000;}
	.sidebar-left {width:100px;height:100vh;top:-40px;left:0;background-color:#2b2b2c;border-right:solid 1px rgba(255, 255, 255, 0.05);margin:0 !important;padding:10px 0 64px;display:none;overflow-y:auto;position:absolute;transition:0.5s;z-index:1000;}
	.sidebar-right {width:100vw;height: 100vh;top:-20px;right: 0;left: auto;transform: translateX(100%);background-color: #1a1a1a;border: none;border-left: solid 1px #2a2a2a;border-radius: 0;margin: 0 !important;padding: 5px 10px 140px;overflow-y: auto;transition: .5s;align-items: flex-start;align-content: flex-start;z-index: 98;opacity: 1;pointer-events: auto;}
	.main-menu .bs-ul {width: 100%;table-layout:fixed;}
	.main-menu .bs-ul li {display:block}
	.main-menu ul li a {padding: 0;margin: 10px 0;}
	.main-menu .bs-ul li a .icon-panel {width: 80px;height: 60px;font-size: 30px;border-radius: 10px;margin-bottom: 5px;background-image: linear-gradient(rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.05));box-shadow: 0 1px 0 rgba(255, 255, 255, .15);    }
		
	.contain {width:100%}
	
	.main-board {grid-template-columns:1fr;}
	
	.list-container .card-wrap {width:100%;display:grid;grid-template-columns:repeat(2, 1fr);gap:20px;}
	.list-container .card-wrap .card .g-panel .g-info .g-name {font-size:16px}
	
	.board-container .list-table {font-size:14px;}
	.board-container .list-table thead th {height:30px;line-height:30px;}
	.board-container .list-table tbody td {padding:10px 6px;}
	.board-container .view-table {font-size:14px;}
	
	.list-container .card-wrap {width:100%;display:grid;grid-template-columns:repeat(2, 1fr);gap:20px;}
	.list-container .card-wrap .card .g-panel .g-info .g-name {font-size:16px}
	.btnwrap button {width: calc(20% - 2px);padding:8px 8px;font-size:12px}
	
	#login-modal {width:100%;}
	#login-modal .login-wrap {width:80%;gap:10px;margin:40px auto}
	#join-modal {width:100%;}
	
	.desktop {display:none !important}
	.mobile {display:block !important}
	
	.popup-container .popup-wrap {width:100%;display:flex;justify-content:center;position:relative;overflow:visible}
	.popup-container .popup-wrap .popup-box {position:absolute;margin-top:40px;width:calc(90% - 10px);}
}

/*
#app {min-width:1600px;margin:0 auto;font-size:12px;color:#fff;display:flex;flex-wrap:wrap;align-items: flex-start;}
header {width:100%;height:130px;display:flex;flex-wrap:wrap;position:sticky;top:0px;background:#000;z-index:999}
header .header_top {width:100%;height:80px;display:flex;align-items:center;}
header .header_top .logo {width:300px;height:80px;display:flex;justify-content:center;align-items:center}
header .header_top .header_right {width:calc(100% - 300px);display:flex;flex-wrap:wrap}
header .header_top .header_right .tnb {width:100%;height:50px;display:flex;justify-content:flex-end;align-items:center;padding-right:20px}
header .header_top .header_right .tnb ul {display:flex;align-items:center;gap:20px}
header .header_top .header_right .tnb ul li {font-size:14px;display:inline-block;color:#fff;}
header .header_top .header_right .tnb ul li a>i{color:#e1d388;margin-right:4px}
header .header_top .header_right .tnb ul li button>i{color:#e1d388;margin-right:4px}
header .header_top .header_right .tnb ul li .btn_login {display:inline-block;padding:6px 30px;border:1px solid #956628;border-radius:15px;text-align:center;cursor:pointer;font-weight:700;background:linear-gradient(180deg, #fffaa5 0, #956628);text-shadow:0 1px 3px rgb(0 0 0 / 80%);}
header .header_top .header_right .tnb ul li .btn_join {display:inline-block;padding:6px 30px;border:1px solid #956628;border-radius:15px;text-align:center;cursor:pointer;font-weight:700}
header .header_top .header_right .mqwrap {width:100%;display:flex;align-items:center;height:30px;padding:0 20px}
header .header_top .header_right .mqwrap marquee {font-size:1.2em;font-weight:700;color:#ffff00}

header .gnb_wrap {width:100%;height:46px;border-top:solid transparent;border-bottom:solid transparent;border-image:linear-gradient(137deg, #fffaa5 0, #b6954f 10%, #956628 30%, #fffaa5 50%, #956628 70%, #b6954f 90%, #fffaa5);border-image-slice:1;}
header .gnb {width:100%;height:40px;display:flex;justify-content:center;align-items:center}
header .gnb ul {display:flex;align-items:center;gap:80px}
header .gnb ul li {font-size:18px;display:inline-block;color:#fff;position:relative;}
header .gnb ul li a {font-weight:700}
header .gnb ul li:hover>a {color:#eee391}
header .gnb ul li>div {display:none}

header .mo_wrap {padding:5px;display:none;}
header .mo_wrap .btn_ct_login, .btn_ct_join {display:inline-block;border:1px solid #956628;border-radius:3px;width:calc(50% - 5px);text-align:center;font-size:16px;height:40px;line-height:40px;cursor:pointer;font-weight:700}
header .mo_wrap .btn_ct_join {background:linear-gradient(180deg, #fffaa5 0, #956628);text-shadow:0 1px 3px rgb(0 0 0 / 80%);}

header .snb_btn {display:none;cursor:pointer;position:fixed;top:0;z-index:9990;left:0;width:50px;text-align:center;height:50px;line-height:50px;}
header .snb_btn i {font-size:26px;line-height:50px;}

nav {width:260px;padding:6px;background:#222}
nav .nav_menu {width:100%;position:sticky;top:140px;}
nav .nav_menu ul {display:flex;flex-wrap:wrap}
nav .nav_menu ul li {width:100%;}
nav .nav_menu ul li a {display:inline-block;width:100%;padding:10px 0 10px 10px;font-size:14px;font-weight:700;border:1px solid #111;background:linear-gradient(#111, #222);}
nav .nav_menu ul li a:hover {color:#eee391;background:linear-gradient(137deg, #fffaa5 0, #b6954f 10%, #956628 30%, #fffaa5 50%, #956628 70%, #b6954f 90%, #fffaa5);}

main {display:flex;flex-wrap:wrap;width:calc(100% - 260px);padding:0 10px;}
#section-1 {margin:0 auto;aspect-ratio: 1620 / 340;width:100%;}
#section-1 img {width: 100%;object-fit: fill;}
#section-1 .slick-list {}
#section-1 .slick-slide {display: flex;justify-content: center;overflow: hidden;}
#section-1 .slick-dots {position:absolute;display:flex;bottom:15px;left:50%;transform:translateX(-50%);gap:30px;margin:0;padding:0}
#section-1 .slick-dots [role=presentation] {position: relative;}
#section-1 .slick-dots [role=tab] {width: 20px;height: 20px;background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAMAAACf4xmcAAAA+VBMVEUAAAD8///9/v7+///9//78/f/9///8/v/7/vz+///8///9///+///////9///////8/v719/n+///+//75/fv9///3+//9/v/+///////5/v////+pq7qorL2orLqprLb9///////8/f+nqLqmqrumqbnl5u6mqbyoq7anqbaqrbyrrrn5/f/3+v/q6/Tq7PGsrr62uL6usLqmq7mqrLOoqrP8///4+/6jpbalp7OjpbP09/jc3+fFyNGoqb6lqrjy9vzt8Pjm6O3g5Ojf4uXT1t7O0duztsOoq8D5/Pjr7fXZ29/Lz9TAw87AxMi7vci5usKwtLmgo6u8rSxCAAAAHHRSTlMAQib65NC2hEDqqw/3jo5mZj8gCwv39+erICAPSj5xLAAAAV1JREFUOMvl09dygkAUgGEVFbsmmr7ALrDSpQgIWGI3vb3/w2QZM7kQMeXW//qb3TmzZzNHXK5YzP2Iqg0KQqpRPayaZWSsRvzgonUAlQoImrYbvnURLJykoNOKr0/HjqPJmvM8Q3rleg9q02fIf9I8LcIB5qJobRjndCcxX57Xl67LcYAkYIyDzQjy+d2Zs3Bov28VYaQAWK9TPbvLkOnIRH0xSRIkwJmDBBvMtZCIbzYRhHCRZHyXAwzDsgxJFEVJkrDS41MYs2Wxw7dKD6WyuH5fFHEaA5O7vzFAziWTyD2Ycum/mJlk/nzL+iyrqjGTZc+EpV12P3z5UC1GIKeoFgCWoob2EJUSTw/hwgEBESRLVbTNyED5xLp36BrU12rEkWRF0VYGrNHtfWt5CfWHccw8bzzzjcpV6pJD3rQ91+4iRJY8vVaZR8tHHpabmYPd1CmEqHr1d9/5ePsElaZAughqfI4AAAAASUVORK5CYII=);background-repeat: no-repeat;background-color: rgba(0, 0, 0, 0);background-size: 100% 100%;transition: .2s;color: rgba(0, 0, 0, 0);opacity: 1;cursor: pointer;text-indent: -9999px;border:none;}
#section-1 .slick-dots .slick-active [role=tab], .main-container #section-1 .slick-dots [role=tab]:hover {background-image: url(/img/_dot.png);}

#section-11 {display:none;margin: 0 auto;aspect-ratio: 1620 / 340;width: 100%;}
#section-11 img {width: 100%;object-fit: fill;}
#section-11 .slick-list {}
#section-11 .slick-slide {display: flex;justify-content: center;overflow: hidden;}
#section-11 .slick-dots {position:absolute;display:flex;bottom:15px;left:50%;transform:translateX(-50%);gap:30px;margin:0;padding:0}
#section-11 .slick-dots [role=presentation] {position: relative;}
#section-11 .slick-dots [role=tab] {width: 20px;height: 20px;background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAMAAACf4xmcAAAA+VBMVEUAAAD8///9/v7+///9//78/f/9///8/v/7/vz+///8///9///+///////9///////8/v719/n+///+//75/fv9///3+//9/v/+///////5/v////+pq7qorL2orLqprLb9///////8/f+nqLqmqrumqbnl5u6mqbyoq7anqbaqrbyrrrn5/f/3+v/q6/Tq7PGsrr62uL6usLqmq7mqrLOoqrP8///4+/6jpbalp7OjpbP09/jc3+fFyNGoqb6lqrjy9vzt8Pjm6O3g5Ojf4uXT1t7O0duztsOoq8D5/Pjr7fXZ29/Lz9TAw87AxMi7vci5usKwtLmgo6u8rSxCAAAAHHRSTlMAQib65NC2hEDqqw/3jo5mZj8gCwv39+erICAPSj5xLAAAAV1JREFUOMvl09dygkAUgGEVFbsmmr7ALrDSpQgIWGI3vb3/w2QZM7kQMeXW//qb3TmzZzNHXK5YzP2Iqg0KQqpRPayaZWSsRvzgonUAlQoImrYbvnURLJykoNOKr0/HjqPJmvM8Q3rleg9q02fIf9I8LcIB5qJobRjndCcxX57Xl67LcYAkYIyDzQjy+d2Zs3Bov28VYaQAWK9TPbvLkOnIRH0xSRIkwJmDBBvMtZCIbzYRhHCRZHyXAwzDsgxJFEVJkrDS41MYs2Wxw7dKD6WyuH5fFHEaA5O7vzFAziWTyD2Ycum/mJlk/nzL+iyrqjGTZc+EpV12P3z5UC1GIKeoFgCWoob2EJUSTw/hwgEBESRLVbTNyED5xLp36BrU12rEkWRF0VYGrNHtfWt5CfWHccw8bzzzjcpV6pJD3rQ91+4iRJY8vVaZR8tHHpabmYPd1CmEqHr1d9/5ePsElaZAughqfI4AAAAASUVORK5CYII=);background-repeat: no-repeat;background-color: rgba(0, 0, 0, 0);background-size: 100% 100%;transition: .2s;color: rgba(0, 0, 0, 0);opacity: 1;cursor: pointer;text-indent: -9999px;border:none;}
#section-11 .slick-dots .slick-active [role=tab], .main-container #section-1 .slick-dots [role=tab]:hover {background-image: url(/img/_dot.png);}

#section-4 {margin-top:30px;display:grid;grid-template-columns: 1fr 1fr;gap:40px;width:100%;}
#section-4 .board-container {display:flex;flex-flow:column;gap:8px;}
#section-4 .board-container .title-wrap {display:flex;justify-content:space-between;align-items:center;padding:16px;border-radius: 5px;background:linear-gradient(137deg, #fffaa5 0, #b6954f 10%, #956628 30%, #fffaa5 50%, #956628 70%, #b6954f 90%, #fffaa5);}
#section-4 .board-container .title-wrap .title {font-size:20px;font-weight:900;text-shadow: 0 1px 3px rgb(0 0 0 / 50%);}
#section-4 .board-container .title-wrap .title span {font-weight:900;font-size:18px;color:#ffff00}
#section-4 .board-container .title-wrap a {font-size:16px;font-weight:900;color:#fffaa5}
#section-4 .board-container .list {padding:6px;background-color:#000;border: 1px solid #000;border-radius:6px;display:flex;flex-flow:column;height:240px;overflow:hidden;}
#section-4 .board-container .list .item {display:flex;gap:6px;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255, 255, 255, 0.1);font-size:16px;font-weight:500}
#section-4 .board-container .list .item:last-child {border:0;}
#section-4 .board-container .list .item .chk {display:block;width:16px;height:16px;border:1px solid #000}
#section-4 .board-container .list .item .state {margin-left:auto}
#section-4 .board-container .list .item input, .board-container .list .item .cstext {border-radius: 8px;border: 1px solid #e2e8f0;background-color: #fff;font-size: 14px;width: 100%;padding: 6px;}

#section-5 {margin-top:30px;display:flex;justify-content:space-between;width:100%;}
#section-5 .main_link {display:block;position:relative;width:calc(20% - 4px);overflow:hidden;border:solid transparent;border-image:linear-gradient(137deg, #fffaa5 0, #b6954f 10%, #956628 30%, #fffaa5 50%, #956628 70%, #b6954f 90%, #fffaa5);border-image-slice:1;}
#section-5 .main_link img {width:100%;}
#section-5 .main_link span.hoverb {left:0;top:0;opacity:0;position:absolute;background:rgba(0, 0, 0, 0.8);width:100%;height:100%;z-index:5;text-align:center;}
#section-5 .main_link .hoverb img {width:80% !important;display:inline-block;margin-top:70px;}
#section-5 .main_link .link_title {display:block;font-size:30px;margin-top:10px;font-weight:700}
#section-5 .main_link .link_btn {display:inline-block;padding:8px 15px;border-radius:20px;background:linear-gradient(180deg, #fffaa5 0, #956628);text-shadow:0 1px 3px rgb(0 0 0 / 80%);color:#fff;font-size:18px;font-weight:700;margin-top:25%;}
#section-5 .main_link:hover span.hoverb {opacity:1;}

footer {width:100%;margin:30px 0}
footer .copyright {width:100%;padding:10px;font-size:14px;font-weight:500;text-align:center;}

#login-modal {position:relative;width:400px;max-width:unset;border-radius:20px;transition:.5s ease-in;border:4px solid transparent;background-image:linear-gradient(#000, #000), linear-gradient(137deg, #fffaa5 0, #b6954f 10%, #956628 30%, #fffaa5 50%, #956628 70%, #b6954f 90%, #fffaa5);background-origin: border-box;background-clip: content-box, border-box;}
#login-modal a.close-modal {top:10px;right:10px;background-image:url("/img/Gray-X-Circle-Mini-Icon.svg");}
#login-modal .login-wrap {display:flex;flex-flow:column;gap:20px;z-index:2;margin:40px auto;width:80%;}
#login-modal .login-wrap .logo {display: flex;width:100%;justify-content:center;}
#login-modal .login-wrap .logo img {width:100%;}
#login-modal .login-wrap .input-wrap {display: flex;flex-flow: column;gap: 12px;}
#login-modal .login-wrap .input-wrap input {padding: 12px;display: flex;justify-content: center;align-items: center;text-align: center;border-radius: 12px;border: 1px solid #e2e8f0;background-color: #f8fafc;}
#login-modal .login-wrap .input-wrap .button {display: flex;justify-content: center;align-items: center;padding: 12px;border:1px solid #956628;border-radius:12px;font-size:14px;font-weight:500;}
#login-modal .login-wrap .input-wrap .button#login-btn {cursor:pointer;color:#fff;background:linear-gradient(180deg, #fffaa5 0, #956628);text-shadow:0 1px 3px rgb(0 0 0 / 80%);}
#login-modal .login-wrap .input-wrap .button#register-btn {cursor:pointer;background-color:#fff;color:#956628;}
#login-modal .login-wrap .input-wrap .button i {margin-right:4px;}

#join-modal {position:relative;width:400px;max-width:unset;border-radius:20px;transition:.5s ease-in;border:4px solid transparent;background-image:linear-gradient(#000, #000), linear-gradient(137deg, #fffaa5 0, #b6954f 10%, #956628 30%, #fffaa5 50%, #956628 70%, #b6954f 90%, #fffaa5);background-origin: border-box;background-clip: content-box, border-box;}
#join-modal a.close-modal {top:10px;right:10px;background-image:url("/img/Gray-X-Circle-Mini-Icon.svg");}
#join-modal .login-wrap {display:flex;flex-flow:column;gap:20px;z-index:2;margin:40px auto;width:80%;}
#join-modal .login-wrap .logo {display: flex;width:100%;justify-content:center;}
#join-modal .login-wrap .logo img {width:100%;}
#join-modal .login-wrap .input-wrap {display: flex;flex-flow: column;gap: 12px;}
#join-modal .login-wrap .input-wrap input {padding: 12px;display: flex;justify-content: center;align-items: center;text-align: center;border-radius: 12px;border: 1px solid #e2e8f0;background-color: #f8fafc;}
#join-modal .login-wrap .input-wrap .button {display: flex;justify-content: center;align-items: center;padding: 12px;border:1px solid #956628;border-radius:12px;font-size:14px;font-weight:500;}
#join-modal .login-wrap .input-wrap .button#join-btn {cursor:pointer;color:#fff;background:linear-gradient(180deg, #fffaa5 0, #956628);text-shadow:0 1px 3px rgb(0 0 0 / 80%);}
#join-modal .login-wrap .input-wrap .button i {margin-right:4px;}

.popup-container {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, .5);z-index:9999;overflow:hidden}
.popup-wrap {width:1600px;margin:0 auto;overflow:hidden;white-space:nowrap;}
.popup-container .popup-wrap .popup-box {display:inline-block;margin-top:68px;width:calc(25% - 10px);margin-right:10px;overflow:hidden;background:#000;animation:opacityIn .3s;transition:opacity .3s;border:solid transparent;border-image:linear-gradient(137deg, #fffaa5 0, #b6954f 10%, #956628 30%, #fffaa5 50%, #956628 70%, #b6954f 90%, #fffaa5);border-image-slice:1;}
.popup-container .popup-wrap .popup-box .pop_head {display:flex;align-items:center;justify-content:space-between;width:100%;height:30px;background-color:#000;position:relative;padding:0 10px}
.popup-container .popup-wrap .popup-box .pop_head button {border:none;color:#fff;font-size:14px;font-weight:500}
.popup-container .popup-wrap .popup-box .popup-contents-box {min-height:400px;padding:0}
.popup-container .popup-wrap .popup-box .popup-contents-box img {display:block;width:100%;max-height:calc(100vh - 150px);}
.popup-container .popup-wrap .popup-box .popup-footer {height:72px;background-color:#fff;color:#fff;display:flex;justify-content:center;align-items:center;border:1px solid #eee;}
.popup-container .popup-wrap .popup-box .popup-footer button {border-radius:12px;padding:8px 12px;border:0;background:#887c62;color:#fff;font-size:12px;cursor:pointer;}

.title-container {width:100%;margin-bottom:20px;padding:10px;font-size:20px;font-weight:500;background:#252525}
.title-container .desc {font-size:16px;}
.main-container {width:100%}

.board-container {width:100%}

.board-container .list-table {width:100%;border-collapse:collapse;font-size:16px;}
.board-container .list-table thead th {font-weight:500;background:#b6954f;height:36px;line-height:36px;}
.board-container .list-table tbody td {padding:10px;border-bottom:1px solid #222}

.board-container .view-table {width:100%;border-collapse:collapse;font-size:16px;}
.board-container .view-table tbody td {padding:0 10px;border:1px solid #222}
.board-container .view-table tbody td.tit {height:50px;line-height:50px}
.board-container .view-table tbody td.cont {padding:10px}

.board-container .btn-wrap {width:100%;padding:20px 0;display:flex}
.board-container .page-wrap {width:100%;padding:20px 0;display:flex;justify-content:center;align-items:center;gap:6px;font-size:14px}
.board-container .page-wrap a {display:inline-block;padding:6px;border:1px solid #222}
.board-container .page-wrap a.active {color:#b6954f}

.board-container>.item {width:100%;margin-bottom:20px;padding:10px;border:1px solid #333;border-radius:6px;}
.board-container>.item .item-title {width:100%;font-size:18px;padding:6px 0;border-bottom:2px solid #333;}
.board-container>.item .item-content {width:100%;font-size:16px;padding:6px 0;font-weight:400;}
.board-container>.item input {border-radius: 8px;border: 1px solid #e2e8f0;background-color: #fff;font-size: 14px;width: 100%;padding: 6px;}

.list-container {width:100%;padding:20px;}
.list-container .card-wrap {width:100%;display:grid;grid-template-columns:repeat(5, 1fr);gap:30px;}
.list-container .card-wrap .card {width:100%;background-color:#5e4322;background-image:linear-gradient(to bottom left, #f5cc7f, #96653b, #b79453);border-radius:10px;box-shadow:0 5px 15px rgba(0, 0, 0, 1);display:inline-block;padding:5px 5px;position:relative;animation:scBtnAnim 0.8s ease 1 backwards;transform-origin:bottom center;}
.list-container .card-wrap .card:before, .list-container .card-wrap .card:after {width:calc(100% - 2px);height:calc(100% - 2px);left:0;right:0;top:0;bottom:0;margin:auto;border-radius:10px;background-image:linear-gradient(#97663c, #58341c);transition:0.3s;}
.list-container .card-wrap .card .g-panel {width:100%;background-color:#301605;border-radius:8px;padding:8px 9px;overflow:hidden;transition:0.3s;position:relative;z-index:1;}
.list-container .card-wrap .card .g-panel:before {width:120%;height:50%;left:-10%;right:0;bottom:-20%;margin:0 auto;background-image:radial-gradient(rgba(108, 74, 40, 0.8), rgba(149, 112, 76, 0.15), rgba(108, 74, 40, 0), rgba(108, 74, 40, 0));}
.list-container .card-wrap .card .g-panel .g-cont {background-color:#000;border-radius:8px;overflow:hidden;position:relative;box-shadow:0 1px 1px #6c4829;}
.list-container .card-wrap .card .g-panel .g-cont img {width:100%;aspect-ratio: 500 / 400;}
.list-container .card-wrap .card .g-panel .g-cont .play-btn {width:50%;height:35px;border-radius:5px;position: absolute;left:0;right:0;top:0;bottom:0;margin:auto;z-index:4;box-shadow:0 0 10px rgba(234, 209, 163, 0.5), 0 1px 2px rgba(0, 0, 0, 1), inset 0 0 0 1px #1d160e;opacity:0;transform:scale(0);color:#fff;text-shadow:0 1px 0 rgba(255, 255, 255, 0.4);background-color:#dece8f;background-image:linear-gradient(180deg, #fffaa5 0, #956628);border:solid 1px #dece8f;}
.list-container .card-wrap .card .g-panel .g-info {width:100%;position:relative;z-index:3;}
.list-container .card-wrap .card .g-panel .g-info .g-name {width:100%;display:inline-block;padding:10px 0 6px 0;color:#ffffff;text-align:center;font-size:20px;font-weight:700;text-shadow:0 1px 2px rgba(0, 0, 0, 1);}
.list-container .card-wrap .card .g-panel .glass {width:200%;height:100%;position:absolute;bottom:0;left:0;background-image:linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1));transform-origin:bottom left;transform:rotate(-48deg);z-index:1;transition:0.3s;}
.list-container .card-wrap .card:hover .g-panel .g-cont img {transform:scale(1.1);opacity:0.5;}
.list-container .card-wrap .card:hover .g-panel .g-cont .play-btn {opacity:1;transform:scale(1);}
.list-container .card-wrap .card:hover .g-panel .glass {transform:rotate(0deg);opacity:0;}

.reqacc {color:#fff;background:linear-gradient(90deg, #FD5E85 -23.54%, #BF1849 76.46%);padding:8px 12px;font-size:14px;font-weight:500;border-radius: 8px;}
.btnwrap {width:100%;margin-top:10px;display:flex;flex-wrap:wrap;justify-content:space-between;row-gap:4px;}
.btnwrap button {width:calc(10% - 2px);cursor:pointer;padding:8px 12px;font-size:14px;font-weight:500;color:#fff;border:1px solid #111;background:linear-gradient(to bottom, rgba(80, 80, 80, 1) 1%, rgba(33, 33, 33, 1) 100%);}

.btn-mid {display:inline-block;text-align:center;color:#fff;cursor:pointer;padding:8px 30px;font-size:14px;}
.btn-gray {border:1px solid #111;background:linear-gradient(to bottom, rgba(80, 80, 80, 1) 1%, rgba(33, 33, 33, 1) 100%);}
.btn-gold {border:1px solid #956628;background:linear-gradient(180deg, #fffaa5 0, #956628);}

.text-center {text-align:center}
.jc-center {justify-content:center}

.mobile {display:none}



@media screen and (max-width:768px) {
	#app {width:100%;min-width:100%}
	
	header {height:122px;overflow:hidden}
	header .header_top {width:100%;flex-wrap:wrap;justify-content:center;height:70px}
	header .header_top .logo{width:100%;height:50px}
	header .header_top .logo img {width:180px}
	header .header_top .header_right {width:100%}
	header .header_top .header_right .tnb{display:none}
	header .header_top .header_right .mqwrap {height:20px;padding:0}
	header .gnb_wrap {display:none}
	header .mo_wrap {width:100%;display:flex;justify-content:space-between;}
	header .snb_btn {display:block}
	
	nav {display:none}
	main {width:100% !important;flex:none;padding:5px}
	#section-1 {display:none}
	
	#section-11 {display:block;}
	#section-11 .slick-dots {bottom:0;left:50%;transform:translateX(-50%);gap:10px;justify-content:center}
	#section-11 .slick-dots [role=tab] {width:10px;height:10px;}
	
	#section-4 {grid-template-columns:1fr;}
	
	#login-modal {width:100%;}
	#login-modal .login-wrap {width:80%;gap:10px;margin:40px auto}
	
	.popup-container .popup-wrap {width:100%;display:flex;justify-content:center;position:relative;overflow:visible}
	.popup-container .popup-wrap .popup-box {position:absolute;margin-top:40px;width:calc(90% - 10px);}
	
	.title-container {font-size:16px;}
	.title-container .desc {font-size:14px;}
	
	.board-container .list-table {font-size:14px;}
	.board-container .list-table thead th {height:30px;line-height:30px;}
	.board-container .list-table tbody td {padding:10px 6px;}
	.board-container .view-table {font-size:14px;}
	
	.list-container .card-wrap {width:100%;display:grid;grid-template-columns:repeat(2, 1fr);gap:20px;}
	.list-container .card-wrap .card .g-panel .g-info .g-name {font-size:16px}
	
	
	.btnwrap button {width: calc(20% - 2px);padding:8px 8px;font-size:12px}
	
	.mobile {display:block}
}
*/