@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&display=swap&subset=korean');
:root {
	--html-font: 18px;
	--sunbursi-orange:#FE8130;
	--shadow-steel:#2D2D2D;
	--deep-wave:#4876EE;
}
	  
* { margin:0px; padding:0px; box-sizing:border-box; }
html{ width:100%; min-height: 100vh; font-size:var(--html-font); background:#f4f4f4; }
body { position:relative; width:100%; min-height:100vh; overflow-x:hidden; background:#fff; font-family: 'Noto Sans KR', sans-serif; font-size:14px; color:var(--font-color); }

ol, ul { list-style: none; }
a { color:inherit; }
a, a:hover, a:active, a:focus { text-decoration: none; }
em, address { font-style: normal;}
img { border:0; vertical-align: top;}
textarea{ width:100%; height:100%; outline: none; border:0px; background:transparent; resize: none; }
i, h1, h2, h3, h4, h5, h6{ font: inherit; }
button { border:0; outline:0; background:none; cursor:pointer; font:inherit; -webkit-user-select: none; user-select: none;  }
i {display:flex; justify-content:center; align-items:center; }
table { width:100%; border-collapse: collapse; border-spacing: 0; }

input::placeholder { color:#9F9F9F; transition: color 0.3s ease; }
textarea::placeholder { color:#9F9F9F;  transition: color 0.3s ease; }
input{ outline: none; border: 0px; background:transparent; touch-action:none; }
:focus::placeholder { color:transparent; }

input[type="file"] { position:absolute; overflow:hidden; clip:rect(0,0,0,0); }

/*################################################*/


.logo-wrap { width:100%; height:230px; max-width:1180px; margin:auto; display:flex; justify-content:center; align-items:center; }
header nav { position:relative; height:60px; background:#b90009;  z-index:100;}
header nav > ul { width:100%; height:100%; max-width:1180px; margin:auto; display:grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
header nav > ul > li { position:relative; height:60px; display:flex; justify-content:center; align-items:center; }
header nav > ul > li > a { height:100%; color:#fff; display:flex; justify-content:center; align-items:center; }
header nav > ul > li > a:hover { color:#fff000; }
header nav > ul > li ul { display:none; position:absolute; top:100%; width:100%; box-shadow: 0px 5px 5px rgba(0,0,0,0.3); }
header nav > ul > li ul li { height:40px; }
header nav > ul > li ul li > a { height:100%; display:flex; justify-content:center; align-items:center; background:#b90009; color:#fff; border-bottom: 1px solid #ccc; }
header nav > ul > li ul li > a:hover { color:#fff000; }
header nav > ul > li:hover ul { display:grid; }

footer { background:#000;  }
footer > div:nth-child(1) { width:100%; max-width:1180px; margin:auto; padding:50px 0; display:flex; align-items:center; }
footer > div:nth-child(1) > div:nth-child(1) { width:200px; }
footer > div:nth-child(1) > div { color:#fff; }

footer > div:nth-child(1) > div:nth-child(2) { flex:1; display:flex; justify-content:center; align-items:center; gap:20px; flex-wrap:wrap; }
footer > div:nth-child(1) > div:nth-child(2) button { color:#fff; }
footer > div:nth-child(1) > div:nth-child(2) button:last-child { margin-left:40px; background: linear-gradient(#b90009, #400000); color:#fff; width:170px; height:47px; border:1px solid transparent;
  border-image: linear-gradient(#400000, #b90009);  border-image-slice:1; }
footer > div:nth-child(1) > div:nth-child(2) i { width:1px; height:15px; background:#fff; }

footer > div:nth-child(2) { height:38px; background:#b90009; color:#fff; display:flex; justify-content:center; align-items:center; }

main {  width:100%; max-width:1180px; margin:auto; min-height:calc(100vh - 300px); display:flex; gap:20px; padding-top:40px; padding-bottom:100px; }

main .left-area { flex:1; overflow:hidden; }
main .right-area { width:290px; }

.right-area { display:flex; flex-direction:column; gap:5px; }
main img { max-width:100%; }

.notice-box h2 { font-size:16px; font-weight:bold; padding:0 10px; display:flex; align-items:center; height:40px; border-radius:5px; background:#f4f4f4; }
.notice-box h2 a { width:100%; eight:100%; display:flex; align-items:center; justify-content:space-between; }
.notice-box h2 span { color:#999; }
.notice-box ul { margin-top:10px; }
.notice-box ul li { height:35px; }
.notice-box ul li a { display:flex; align-items:center; gap:10px; }
.notice-box ul li .num { width:25px; height:25px; display:flex; justify-content:center; align-items:center; background:#E0E0E0; border-radius:3px; font-weight:bold; color:#999999; }
.notice-box ul li:nth-child(1) .num { background:#DB3232; color:#fff; }
.notice-box ul li:nth-child(2) .num { background:#999999; color:#fff; }
.notice-box ul li:nth-child(3) .num { background:#999999; color:#fff; }
.notice-box ul .no-post { height:100px; display:flex; justify-content:center; align-items:center; color:#999; }

table { width:100%; border-collapse: collapse; border-spacing: 0; }

.jw-tableA th { height:40px; background:#f4f6f8; border-top: 1px solid #000; text-align:center; }
.jw-tableA td { height:40px; border-top: 1px solid #ccc; }
.jw-tableA tr:last-child td { border-bottom: 1px solid #000; }
.jw-tableA tr.hover:hover td { background:#F9F9F9; }
.jw-tableA .actions { width:150px; text-align:center; }
.jw-tableA .nodata { height:150px; text-align:center; } 

.jw-tableA .checklist { width:60px; text-align:center; }
.jw-tableA .num { width:80px; text-align:center; }
.jw-tableA .author { width:120px; text-align:center; }
.jw-tableA .date { width:100px; text-align:center; }
.jw-tableA .views { width:100px; text-align:center; }
.jw-tableA .title { cursor:pointer; }
.jw-tableA .center { place-items:center; text-align:center }
.jw-tableA .title:hover { color:#ff0000; }


.jw-tableB tr:last-child td, .jw-tableB tr:last-child th { border-bottom: 1px solid #000; }
.jw-tableB tr:first-child td, .jw-tableB tr:first-child th { border-top: 1px solid #000; }
.jw-tableB td { height:45px; border-bottom: 1px solid #E9E9E9; }
.jw-tableB td > div.field { position:relative; display:flex; align-items:center; height:100%; padding:5px 10px; }
.jw-tableB th { width:150px; background:#F5F5F5; text-align:center; font-weight:bold; color:#1D1D1D; border-bottom: 1px solid #E9E9E9; }
.jw-tableB input { background:#FAFAFA; border-radius:5px; padding:0 10px; }


.footer_logo > img { width:150px; }

.mobile { display:none; }


#sidebarMenu { position:fixed; display:none; width:100%; top:0; left:0; justify-content:center; z-index:900; }
#sidebarMenu > .wrap { position:relative; width:400px; margin:0 auto; }
#sidebarMenu > .wrap > .container { position:absolute; left:-100%; top:0; width:300px; height:100vh; background:#fff; box-shadow: 0px 0px 10px rgba(0,0,0,0.1); transition:all 0.3s ease; opacity:0; }
#sidebarMenu.on > .wrap > .container { left:0; opacity:1; }

#sidebarMenu .aside-logo-wrap { height:80px; display:flex; justify-content:center; align-items:center;}
#sidebarMenu .aside-logo-wrap img { height:60px; }
#sidebarMenu .memberinfo { margin-top:20px; display:flex; align-items:center; gap:10px; }
#sidebarMenu .memberinfo button { height:35px; background:#323c46; color:#fff; flex:1; }
#sidebarMenu nav { position:relative; width:100%; height:100%; padding:20px; }
#sidebarMenu nav > button { position:absolute; right:20px; top:20px; }
#sidebarMenu nav ul { margin-top:20px; }
#sidebarMenu nav ul > li { max-height:40px; overflow:hidden; transition:max-height 0.5s; border-bottom: 1px solid #ccc; }
#sidebarMenu nav ul > li.on { max-height:1000px; }
#sidebarMenu nav ul > li dt { height:40px; }
#sidebarMenu nav ul > li dd { height:40px; padding-left:20px; background:#f4f4f4; border-top: 1px solid #ccc;}

#sidebarMenu nav ul > li a { position:relative; display:flex; align-items:center; gap:10px; height:100%; }
#sidebarMenu nav ul > li a i { position:absolute; right:13px; top:50%; width:6px; height:6px; transform:rotate(45deg) translateY(-50%); transition:all 0.2s; border:1px solid transparent; border-color: #909090 #909090 transparent transparent; }
#sidebarMenu nav ul > li.on a i { transform:rotate(135deg) ; }
#sidebarMenu nav ul > li dd a { font-size:13px; }

.mobile-btn { margin-top:20px; background: linear-gradient(#b90009, #400000); color:#fff; width:120px; height:40px; border:1px solid transparent;
  border-image: linear-gradient(#400000, #b90009);  border-image-slice:1; justify-content:center; align-items:center; }

/*################################################*/

.ic-close{ position:relative; width:24px; height:24px; cursor:pointer; display:flex; justify-content:center; align-items:center; transition-duration: 0.5s; }
.ic-close::after{ content:""; position:absolute; width:var(--line, 2px); height:100%; background: var(--color, #222); transform: rotate(45deg); }
.ic-close::before{ content:""; position:absolute; width:var(--line, 2px); height:100%; background: var(--color, #222); transform: rotate(-45deg); }
.ic-close:hover{ transform: rotate(360deg); }

/*################################################*/

.game { margin-top:15px; }


.guide img { max-width:100%; }

@media screen  and  (max-width : 850px) {
	#sidebarMenu { display:flex; }
	header nav > ul { display:flex; gap:10px; }
	header nav > ul > li:nth-child(1) { width:40px; }
	header nav > ul > li:nth-child(6) { display:none; }
	header nav > ul > li:nth-child(7) { display:none; }
	header nav > ul > li:nth-child(8) { display:none; }
	header nav > ul > li:nth-child(9) { display:none; }
	header nav > ul > li:hover ul { display:none; }
	main { padding:0 10px; }
	main .right-area { display:none; }
	.main-visual { margin-top:10px; }
	.logo-wrap { height:100px; }
	.logo-wrap img { height:80px; }
	.left-area > .content h2 { font-size:18px; font-weight:bold; }
	.mobile { display:flex; }
	.pc { display:none; }
	footer .footer_logo { display:flex; justify-content:center; align-items:center; }
	footer > div:nth-child(1) > div:nth-child(2) {  margin-top:20px; gap:5px; }
	footer > div:nth-child(1) > div:nth-child(2) button { font-size:12px; }
	footer > div:nth-child(1) { flex-direction:column; }
	footer > div:nth-child(2) { font-size:12px; padding:10px; height:auto; }
	.mobile-btn { display:none; }
}
body.is-mobile { position:relative; max-width:400px; margin:0 auto; }
body.is-mobile #sidebarMenu { display:flex; }
body.is-mobile	header nav > ul { display:flex; gap:10px; }
body.is-mobile	header nav > ul > li:nth-child(1) { width:40px; }
body.is-mobile	header nav > ul > li:nth-child(6) { display:none; }
body.is-mobile	header nav > ul > li:nth-child(7) { display:none; }
body.is-mobile	header nav > ul > li:nth-child(8) { display:none; }
body.is-mobile	header nav > ul > li:nth-child(9) { display:none; }
body.is-mobile  header nav > ul > li:hover ul { display:none; }
body.is-mobile	main { padding:0 10px; }
body.is-mobile	main .right-area { display:none; }
body.is-mobile	.main-visual { margin-top:10px; }
body.is-mobile	.logo-wrap { height:100px; }
body.is-mobile	.logo-wrap img { height:80px; }
body.is-mobile	.left-area > .content h2 { font-size:18px; font-weight:bold; }
body.is-mobile	.mobile { display:flex; }
body.is-mobile	.pc { display:none; }
body.is-mobile	footer .footer_logo { display:flex; justify-content:center; align-items:center; }
body.is-mobile	footer > div:nth-child(1) > div:nth-child(2) {  margin-top:20px; gap:5px; }
body.is-mobile	footer > div:nth-child(1) > div:nth-child(2) button { font-size:12px; }
body.is-mobile	footer > div:nth-child(1) { flex-direction:column; }
body.is-mobile	footer > div:nth-child(2) { font-size:12px; padding:10px; height:auto; }