@import url('https://fonts.googleapis.com/css?family=Saira+Condensed:700&display=swap');
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard-dynamic-subset.css");



html { background-color: #000; }

/* DEFAULT ------------------------------------------------------ */

*, *:after, *:before { margin:0; padding:0; box-sizing: border-box; background-repeat: no-repeat; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    vertical-align: baseline;
    border: 0;
    outline: 0;
    background: transparent;
    font-style: normal;
    text-decoration: none;
    font-weight: inherit;
}

ol, ul { list-style: none; }
blockquote, q { quotes: none; }
table { border-collapse: collapse; border-spacing: 0; }
html { -webkit-font-smoothing: subpixel-antialiased; }
a { color: #fff; cursor: pointer !important; }
a,u { text-decoration: none; }

input, select, textarea, button { font-family: -apple-system, 'SF Pro Display', 'Helvetica Neue',  'Apple SD Gothic Neo', 'Pretendard', 'Malgun Gothic', sans-serif; letter-spacing: -.02em; outline: none; -webkit-appearance: none; border: 0; line-height: 1.5; transition: all .2s ease; }


/* BODY ------------------------------------------------------ */
html, body { height: 100%; }

body {
	color: #fff;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	width: 100%;
	font-family: -apple-system, 'SF Pro Display', 'Helvetica Neue',  'Apple SD Gothic Neo', 'Pretendard', 'Malgun Gothic', sans-serif;
	background-color: #000;
	font-size: 13px;
	letter-spacing: -.02em;
	line-height: 1.5;
	overflow-y: scroll;
}


body.scrollx { overflow: hidden !important; }



/* HEADER ------------------------------------------------------ */

header { display: flex; flex-wrap: wrap; width: 100%; min-width: 1300px; height: 110px; background-color: rgba(0,0,0,.75); backdrop-filter: blur(100px); -webkit-backdrop-filter: blur(20px); top: 0; left: 0; padding: 25px;  border-bottom: .5px solid #1C1C1E; position: fixed; z-index: 20; }

header.gradient { background-color: transparent; background-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0)); border-bottom: 0; backdrop-filter: inherit; -webkit-backdrop-filter: inherit; }
header.no-border { border-color: rgba(0,0,0,.2); }
header.no-color { background-color: transparent; background-color: transparent; border-bottom: 0; backdrop-filter: inherit; -webkit-backdrop-filter: inherit;  }

header .chat { flex-basis: 25%; display: flex; font-size: 12px; }
header .chat i { font-size: 17px; margin-right: 5px; }
header .chat-slider { width: 300px; }
header .chat-slider .slides { height: 16px; overflow: hidden; margin-top: 0; }
header .chat-slider .slides li p { width: 300px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }

header .menu  { flex-basis: 50%; text-align: center; font-size: 28px; text-transform: uppercase;}
header .menu h1 { height: 51px; font-family: "Saira Condensed"; font-size: 34px; font-weight: 700; display: block; margin-top: -13px; letter-spacing: 4.5px; -webkit-transition: all .2s ease; overflow: hidden; }
header .menu ul { display: flex; justify-content: center; margin-top: 8px; }
header .menu ul li { margin: 0 15px; font-weight: 600; font-size: 13px; text-transform: uppercase; }

header .membership { flex-basis: 25%; justify-content: flex-end; display: flex; }
header .membership form { display: flex; }
header .membership li { margin-left: 20px; font-size: 12px; display: flex; }
header .membership li a { display: flex; }
header .membership li i { font-size: 17px; margin-right: 2px; }
header .membership li span { margin-top: 0; }
header .membership b { width: 17px; height: 17px; background-position: 50% 50%; background-size: cover; margin-right: 3px; border-radius: 2px;  }

header .membership .new_message { color: #FF375F; position: relative; }

header.scrolled { height: 65px; }
header.scrolled .menu h1 { opacity: 0; height: 11px; letter-spacing: 1; }
header.scrolled .menu ul { margin-top: 0; }

#user header { background-color: transparent; }



/* FOOTER ------------------------------------------------------ */

footer { display: flex; width: 1000px; margin: 0 auto; flex-wrap: wrap; padding: 100px 0; }

footer ul { flex: 1 0 60%; display: flex; }
footer ul li { flex-basis: 140px; }
footer ul li > * { display: block; margin-bottom: 5px; }
footer ul li h3 { font-size: 17px; font-weight: 600; color: rgba(235,235,245,.3); margin-bottom: 25px; }
footer ul li a { margin-bottom: 13px; text-transform: uppercase; }

footer ul li.signature > * { display: block; }
footer ul li.signature strong { font-size: 60px; color: rgba(235,235,245,.18);  margin: -21px 0 0 -2px; }
footer ul li.signature span { font-size: 15px; margin-top: 0; color: rgba(235,235,245,.18); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }

footer .copyright { flex: 0 1 100%; color: rgba(235,235,245,.3); margin-top: 50px; text-transform: uppercase; letter-spacing: 2px; font-size: 11px; font-weight: 800; }
footer .copyright a { color: rgba(235,235,245,.3); }

.neutral footer h3 { mix-blend-mode: plus-lighter;  }
.neutral footer li.signature { mix-blend-mode: plus-lighter;  }
.neutral footer .copyright { mix-blend-mode: plus-lighter;  }


/* Non Member */
#non-member {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	display: flex;
	justify-content: center;
	align-items: center;
}

#non-member .container { width: 500px; color: rgba(235,235,245,.6); display: flex; flex-wrap: wrap; }
#non-member .container > * { flex: 0 1 100%; display: block; text-align: center;  }
#non-member .container i { font-size: 80px; display: flex; justify-content: center; }
#non-member .container p { font-size: 22px; margin-top: 15px; }
#non-member .container span { font-size: 17px; margin-top: 6px; display: block; }
#non-member .container span a { color: rgba(235,235,245,.6); }

/* Action */
#action {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(0,0,0,.6);
	z-index: 30;
	justify-content: center;
	align-items: center;
	visibility: hidden;
	display: none;
}


#action.active { visibility: visible; display: flex; }
#action a.close-mask { display: block; width: 100%; height: 100%; z-index: 31; position: absolute; cursor: default !important; }

#action .container {
	width: 600px;
	padding: 30px 30px 35px 30px;
	border-radius: 14px;
	background-color: rgba(30,30,30,.75);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	position: relative;
	z-index: 32;
}

#action .container .title { display: flex; align-items: center;}
#action .container .title h3 {
	font-size: 28px;
	font-weight: 700;
	flex: 1;
}

#action .container a.close { font-size: 17px; color: #0A84FF; }

#action ul { margin-top: 20px; }
#action ul li { display: flex; margin-bottom: 15px; }
#action ul li:last-child { margin-bottom: 0; }

#action ul li.button { padding-top: 5px; }

#action ul li.button input[type="submit"] { margin: 0 auto ;}

#action ul li.info { display: flex; flex-wrap: wrap; color: rgba(235,235,245,.4); }
#action ul li.info > * { flex: 1 0 100%; }
#action ul li.info strong { font-weight: 600; }
#action ul li.info p { margin-top: 3px; }

#action.login .container { width: 400px; }
#action.login ul li.login-auto { font-size: 15px; color: rgba(235,235,245,.3); font-weight: 600; }
#action.login ul li.info { border-top: .5px solid rgba(84,84,88,.65); padding-top: 15px; margin-top: 30px; }

#action.wiki-post ul li.date { justify-content: space-between; }
#action.wiki-post ul li.date > * { width: 32%; }

#action.match-post .container { height: 600px; overflow-y: scroll;}
#action.match-post ul li.rate { justify-content: space-between; align-items: center; }
#action.match-post ul li.rate strong { font-size: 15px; font-weight: 700; text-transform: uppercase; width: 23%; }
#action.match-post ul li.rate select { width: 10%; font-size: 15px; height: 34px; text-align-last:center; font-weight: 600; }
#action.match-post ul li.rate input { width: 65%; font-size: 15px; height: 34px; padding: 0 8px;  }


#plus_button { display: flex; justify-content: space-between; }
#plus_button a.post { align-self: flex-start; color: #fff; font-size: 17px; display: flex; align-items: center; font-weight: 700; background-color: #0A84FF; padding: 4px 15px 4px 10px; border-radius: 4px; margin-top: 4px; }
#plus_button a.post i { font-size: 25px; }
#plus_button a.post span { margin-top: 1px; }
#plus_button.active a { background-color: #1C1C1E; color: #000; }


#general_nav { width: 100%; display: flex; margin-top: 40px; }
#general_nav li { margin-right: 25px; font-size: 38px; font-weight: 800; }
#general_nav li a { color: rgba(235,235,245,.3); }
#general_nav li a:hover { color: rgba(235,235,245,.6); }
#general_nav li.selected a { color: #fff; }



#cover { width: 1300px !important; margin: 0 auto; }

#cover .cover_level_1 {
	width: 100%;
	height: 900px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 0;
	position: absolute;
	top: 0;
	left: 50%;
	z-index: -1;
	transform: translateX(-50%);
}

#cover .cover_level_1:after {
	position: absolute;	
	content: "";
	width: 100%;
	height: 50%;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1));
}

#cover .cover_level_1:before {
	position: absolute;	
	content: "";
	width: 100%;
	height: 100%;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 80%, rgba(0,0,0,1) 100%);
}


#cover .cover_level_2 {
	width: 100%;
	height: 900px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;
	position: absolute;
	top: 0;
	left: 50%;
	z-index: -1;
	transform: translateX(-50%);
}

#cover .cover_level_2:after {
	position: absolute;	
	content: "";
	width: 100%;
	height: 100%;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1));
}

#cover .cover_level_2:before {
	position: absolute;	
	content: "";
	width: 100%;
	height: 100%;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,.5) 40%, rgba(0,0,0,.5) 60%, rgba(0,0,0,1) 90%);
}