/*Font Basic 'Noto Sans KR' weight 300  400  500  900  */
body, input, textarea, select, button, table
{font-family: 'Noto Sans KR', sans-serif; font-weight:300; -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased}

img, fieldset, button {border: 0}
img {vertical-align: inherit}
ul, ol, li, dl, dt, dd {list-style: none}
em, address {font-style: normal}
table {border-spacing:0}
a {cursor: pointer; text-decoration:none; border:0}
a:hover, a:active, a:focus {text-decoration:none}
hr, legend {display:none}
button {cursor: pointer; background-color: transparent}
input, button {outline: 0}
input, select, button {-webkit-border-radius:0; border-radius:0}
strong, b {font-weight:900}
i span {font-size: 0}

/* Common */
html, body, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset, legend, input, textarea, button, select {margin: 0; padding: 0}
div {display:block}
html, body {height:100%;}
body {color:#FFF; background-color:#000; no-repeat center top;}

/* 상단폰트 */
.m_txt {font-size:20px;}
@media screen and (max-width: 3000px){.m_txt {font-size:20px;}}
@media screen and (max-width: 600px){.m_txt {font-size:16px;}}
@media screen and (max-width: 450px){.m_txt {font-size:10px;}}

/* 주소폰트 */
.t_txt {font-size:22px;}
@media screen and (max-width: 3000px){.t_txt {font-size:22px;}}
@media screen and (max-width: 600px){.t_txt {font-size:18px;}}
@media screen and (max-width: 450px){.t_txt {font-size:12px;}}


/* 오픈채팅방1*/
.o_txt1 {font-size:25px;}
@media screen and (max-width: 3000px){.o_txt1 {font-size:25px;}}
@media screen and (max-width: 600px){.o_txt1 {font-size:20px;}}
@media screen and (max-width: 480px){.o_txt1 {font-size:15px;}}
@media screen and (max-width: 400px){.o_txt1 {font-size:10px;}}

/* 오픈채팅방2 */
.o_txt2 {font-size:40px;}
@media screen and (max-width: 3000px){.o_txt2 {font-size:40px;}}
@media screen and (max-width: 600px){.o_txt2 {font-size:35px;}}
@media screen and (max-width: 480px){.o_txt2 {font-size:30px;}}
@media screen and (max-width: 400px){.o_txt2 {font-size:20px;}}

/* 상단폰트 */
.f_txt {font-size:15px;}
@media screen and (max-width: 1900px){.f_txt {font-size:15px;}}
@media screen and (max-width: 600px){.f_txt {font-size:12px;}}
@media screen and (max-width: 450px){.f_txt {font-size:10px;}}



/* Scrollbar */
.container_wrap::-webkit-scrollbar {background:transparent; width:6px; height:6px}
.container_wrap::-webkit-scrollbar-thumb {background:#959595; -webkit-border-radius:4px; border-radius:4px; -webkit-box-shadow:inset 0 0 2px rgba(0, 0, 0, 0.1)}

/* Button */
a:hover, i:hover {color:#484687}

/* Container */
.container_wrap {height:100%; text-align:center; overflow-y:auto; background:url(../img/body_bg.jpg) center top}
.container {width:auto; margin:0 auto; max-width:640px; min-width:320px;}
.container header, .container footer, .container .m_box {position:relative; margin:10px 20px}
.container header {margin-top:0;}
.container h1 {width:80%; margin:0 auto; text-align:center; animation-delay:0.1s;}
.container h1 img, .container li img {width:100%}

.container h2 {font-weight:500; margin-bottom:15px;}
.container h2 p {color:#fff; text-shadow:-2px 0 9px #000}

.container .m_box {clear:both;}
.container .m_box li {border:0; animation-delay:0.5s; margin-bottom:10px; cursor:pointer}
.container .m_box li p {position:absolute; font-weight:bold; left:25%; top:31%; text-align:left;}
.container .m_box li:hover, .container .m_box li:active {filter:brightness(150%); color:yellow}

.container .m_box li:nth-child(1) {animation-delay:0.2s}
.container .m_box li:nth-child(2) {animation-delay:0.3s}
.container .m_box li:nth-child(3) {animation-delay:0.4s}
.container .m_box li:nth-child(4) {animation-delay:0.5s}
.container .m_box li:nth-child(5) {animation-delay:0.6s}
.container .m_box li:nth-child(6) {animation-delay:0.7s}
.container .m_box li:nth-child(7) {animation-delay:0.8s}
.container .m_box li:nth-child(8) {animation-delay:0.9s}
.container .m_box li p.o_txt1 {top:12%; left:6%; text-align:left; color:#f6ff00; font-weight: 300;}
.container .m_box li p.o_txt2 {top:25%; left:6%; text-align:left; color:#fbff97; font-weight: bold;}


.container footer {color:#DDD; animation-delay:0.9s; position: relative; clear:both; margin-bottom:40px}