@charset "utf-8";

@font-face {
  font-family: 'SCDream';
  src: url('../fonts/SCDream/S-CoreDream-4Regular.eot');
  src: url('../fonts/SCDream/S-CoreDream-4Regular.eot?#iefix') format('embedded-opentype'),
       url('../fonts/SCDream/S-CoreDream-4Regular.ttf') format('truetype');
  font-weight: 300;
  font-style: 300;
}

@font-face {
  font-family: 'SCDream';
  src: url('../fonts/SCDream/S-CoreDream-5Medium.eot');
  src: url('../fonts/SCDream/S-CoreDream-5Medium.eot?#iefix') format('embedded-opentype'),
       url('../fonts/SCDream/S-CoreDream-5Medium.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'SCDream';
  src: url('../fonts/SCDream/S-CoreDream-6Bold.eot');
  src: url('../fonts/SCDream/S-CoreDream-6Bold.eot?#iefix') format('embedded-opentype'),
       url('../fonts/SCDream/S-CoreDream-6Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: bold;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto/Roboto-Black.eot');
  src: url('../fonts/Roboto/Roboto-Black.eot?#iefix') format('embedded-opentype'),
       url('../fonts/Roboto/Roboto-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: 900;
}

@font-face {
  font-family:'attgd';
  src:url('../fonts/attgd/aTITGD1R.eot');
  src:url('../fonts/attgd/aTITGD1R.eot?#iefix') format('embedded-opentype'),
      url('../fonts/attgd/aTITGD1R.woff') format('woff'),
      url('../fonts/attgd/aTITGD1R.ttf') format('truetype');
}

[class^="icon-"]:before, [class*=" icon-"]:before {
  margin:0 3px
}

/* default */
* {margin:0;padding:0;font-family: 'attgd', 'SCDream','sans-serif','Dotum';}
html {width:100%;height:100%;}
body {width:100%;height:100%;margin:0px;padding:0px;font-size:12px;color:#ffffff;top: 0 !important;}
span{margin:0px;padding:0px;}
ul, ol, dl, dd, dt, li {list-style-type:none;margin:0;padding:0px;}
img {border:0;vertical-align:top;}
input,select {margin:0;vertical-align:middle;}
button {cursor:pointer;}
select {font-size:12px;height:32px;}

/* 링크 */
a {text-decoration:none;margin:0px;padding:0px;color: white;}
a:link, a:visited {text-decoration:none;}
a:hover, a:focus, a:active {text-decoration:none;}
a:focus, img:focus {outline:none;}

::-webkit-scrollbar {width: 0px;height:0}

/* 인풋 */
input[type="text"], input[type="password"], input[type="number"], input[type="tel"], input[type="email"]{border:none;background:none;font-size:14px;outline:none;color: white;}
input[type="radio"] {width:19px;height:19px;margin-bottom:1px;}
input[type="checkbox"] {width: 20px !important;height: 19px !important;margin-bottom:2px;outline:none;border:1px solid #cbcbcc;background:#ffffff;}
input:-ms-input-placeholder {color:#aeaeae !important;}
input::-webkit-input-placeholder {color:#aeaeae !important;}
input::-moz-placeholder {color:#aeaeae !important;}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}
input::-ms-clear {display:none;}

/* textarea */
textarea {width:100%;padding:10px;line-height:20px;height:100px;box-sizing:border-box;border:1px solid #c4c6c7;}
textarea {-webkit-appearance: none;-webkit-border-radius: 0;}
textarea:-ms-input-placeholder {color:#cccccc;}
textarea::-webkit-input-placeholder {color:#cccccc;}
textarea::-moz-placeholder {color:#cccccc;}

button {padding:0;margin:0;outline:none;background: transparent;display: inline-flex;text-align:center;box-shadow: rgba(0, 0, 0, 0.5) 0px 2px 3px;border: 1px solid #414141;justify-content: center;align-items: center;color: white;}

body {background:#000000;overflow-x:hidden;}
body::-webkit-scrollbar {width:10px;}
body::-webkit-scrollbar-thumb {background:#393a42;border-radius:10px;}

.hide{display: none !important;}

#visual video{width: auto;height: auto;position: fixed;min-width: 100%;min-height: 100%;overflow: hidden;}

.mask {position:fixed;background:rgba(0,0,0,0.5);top:0;left:0;bottom:0;right:0;z-index:100;display:none;}
.mask_layer {position:fixed;background:rgba(0,0,0,0.5);top:0;left:0;bottom:0;right:0;z-index:100;/* display:none; */}

.box_type01 {background:#222227;box-shadow: rgb(82, 82, 93) 1px 1px 4px -2px inset;}
.box_type02 {border-radius:5px;background:#222227;box-shadow: rgb(82, 82, 93) 1px 1px 4px -2px inset;}

.button_border { border: 1px solid #ff6a00;}
.button_type01:hover {color:#ffffff;background:var(--border);}
.button_type01.on {cursor:default !important;border:1px solid var(--border);color:#ffffff !important;background:var(--border) !important;}

.button_type03 { background: #222227; width: max(60%, 39px); min-height: 30px; padding: 0 7.5px; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px;font-size: .9em;border: 1px solid #454545;}
.button_type03:hover {color: #ffffff; background: var(--border);}
.button_type03.on {cursor:default !important;border:1px solid var(--border);color:var(--border) !important;background:#312b20 !important;}

.btn_01 {background:linear-gradient(var(--primary), var(--primary-dark))}
/* 컨테이너 */
#container {margin:0 auto;overflow-y: auto;}
#container table {width:100%;min-width: 0;border-collapse: collapse;} 

.al {text-align: left;}
.ar {text-align: right;}

.ml15 {margin-left: 15px;}

._w180 {width: 180px;}
._w100 {width: 100px;}

.lis {display: block;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;width: 206px;}
.name {vertical-align: top;font-size: 0.75rem;}

.font01 {color:#ffffff; font-weight:900;}
.font02 {color:#000000; font-weight:900;}
.font03 {color:#929292;}
.font04 {color:#484848;}
.font05 {color:#ffb400; font-weight:900;}
.font06 {color:#e1c991; font-weight:900;}
.font07 {color:#ff7200; font-weight:900;}
.font08 {color:#c39766;}

.bt_none1 {color: #fff !important;}
.bt_none2 {color: #fff !important;}
.bt_none3 {color: #00ffe4 !important;}
.bt_none4 {color: #fb1010 !important;}
.bt_none5 {color: #13e40b !important;}
.bt_none6 {color: #fff000 !important;}

.hide-force{display: none !important;}

.clearable {position: relative;width: 200px;font-size: .6em;display: inline-block;}
.clearable input {background: #ffffff;height: 30px;border-radius: 3px;padding-left: 10px;width: 100%;padding-right: 2em;box-sizing: border-box;color: black;}
.clearable input:placeholder-shown + button {opacity: 0;pointer-events: none;}
.clearable input + button {position: absolute;border: none;display: block;width: 15px;height: 15px;line-height: 16px;font-size: 12px;border-radius: 50%;top: 0;bottom: 0;right: 5px;margin: auto;background: #ddd;padding: 0;outline: none;cursor: pointer;transition: .1s;}
.col-red { color: red}

.title1,
.title2 {float: left;width: 100%;height: 64px;line-height: 64px;background: rgba(0, 0, 0, 0.5);border: 1px solid rgba(0, 0, 0, 0.6);font-family: 'nanumsquare', sans-serif;padding: 0 0 0 15px;font-size: 24px;letter-spacing: -1px;font-weight: 700;color: #ffffff;margin: 10px 0 0 0;}
.title1-search {justify-content: space-between;flex-flow: row;float: initial;display: flex;line-height: initial;align-items: center;/* padding: 0 15px; */font-size: 24px;letter-spacing: -1px;font-weight: 700;color: #ffffff;/* margin: 10px 0 0 0; *//* background: rgba(0, 0, 0, 0.5); *//* border: 1px solid rgba(0, 0, 0, 0.6); *//* width: 100%; *//* height: 50px; */}
.title2 {height: 48px;line-height:48px;font-size: 18px;color: #e5a30b;font-weight: 600;letter-spacing: -1px;}

.tb_empty{color: #c8c8c8;text-align: center;padding: 20px;background: #101010cf;}
.tr_content{background: #0e0e0e;color: #e4e4e4;padding: 20px 40px;/* width: 100%; */font-family: 'NotoSans';border: 1px solid #909090;}
.tr_content .answer{padding-left: 10px;}
.letterContent .tr_content {white-space: pre-wrap;}
.tr_content * {/* max-width: 100%; */line-height: 22px;text-align: left;}
.tr_content img {height: auto;}

iframe.game{position: absolute;top: 0;right: 0;padding: 21px;}
.ic-new{position: relative;}
.ic-new::after{content: ""; background-color: red !important;border-radius: 50% !important;width: 7px !important;position: absolute !important;height: 7px !important;left: auto !important;right: auto !important;bottom: 70% !important;}
.tab-new{position: relative;}
.tab-new::after{content: "";background-color: red;border-radius: 50%;width: 6px;position: absolute;height: 6px;right: 5px;top: 5px;}

/*페이징*/
.paging_box {text-align:center;min-height:30px;/* margin-top: 20px; */}
.paging_box .left { position:absolute; top:0; left:0;}
.paging_box .right { position:absolute; top:0; right:0;}
.pagination{display:inline-block;padding-left:0;border-radius:4px;vertical-align:top;}
.pagination>li {display:inline}
.pagination>li>a, .pagination>li>span {position: relative;margin: 3px;border-radius: 5px;float: left;background: #1c1c1c;padding: 10px 15px;line-height: 20px;text-decoration: none;color: white !important;}
.pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover {color:#2a6496;background-color:#282828;border-color:#ddd}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {background: var(--primary) !important;cursor: default;color: var(--font)!important;}
.pagination>.disabled>a, .pagination>.disabled>a:focus, .pagination>.disabled>a:hover, .pagination>.disabled>span, .pagination>.disabled>span:focus, .pagination>.disabled>span:hover {color: #828282;background-color: #494949;border-color: #828282;cursor:not-allowed}
.pagination [class*=icon-]{margin:0 -6px;font-size:14px;}

.disabled { pointer-events: none; opacity: .5;}
.pick_disabled{ pointer-events: none; opacity: .2;}
.pick_empty{ pointer-events: none; opacity: .6;}

/*로딩*/
.ring {background: #262626 !important;z-index: 10010;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:150px;height:150px;background:transparent;border:3px solid #3c3c3c;border-radius:50%;text-align:center;line-height:150px;font-family:sans-serif;font-size:20px;color:#fff000;letter-spacing:4px;text-transform:uppercase;text-shadow:0 0 10px #fff000;box-shadow:0 0 20px rgba(0,0,0,.5);}
.ring:before {content: '';position: absolute;top: -2px;left: -2px;width: 100%;height: 100%;border: 3px solid transparent;border-top: 3px solid #fff000;border-right: 3px solid #fff000;border-radius: 50%;animation: animateC 2s linear infinite;}
.ring>span {display:block;position:absolute;top:calc(50% - 2px);left:50%;width:50%;height:4px;background:transparent;transform-origin:left;animation:animate 2s linear infinite;}
.ring>span:before {content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:#fff000;top: 0px;right: -9px;box-shadow:0 0 20px #fff000;}

@keyframes animateC
{
  0% {transform:rotate(0deg);}
  100% {transform:rotate(360deg);}
}
@keyframes animate
{
  0% {transform:rotate(45deg);}
  100% {transform:rotate(405deg);}
}

@keyframes moveToRight {
  0% { transform: translateX(-100%) }
  to { transform: translateX(0) }
}

@keyframes moveToLeft {
  0% { transform: translateX(100%) }
  to { transform: translateX(0) }
}

@keyframes moveToTop {
  0% { transform: translateY(100%) }
  to { transform: translateY(0) }
}

@keyframes moveToBottom {
  0% { transform: translateY(-100%) }
  to { transform: translateY(0) }
}

@keyframes moveToBottomOut {
  0% { transform: translateY(0) }
  to { transform: translateY(100%) }
}

:root{
  --ver:1.0;
  --border: #b638ff;
  --primary: #b638ff;
  --primary-light: #d07dff;
  --primary-dark: #370056;
  --second: #f90;
  --font: #ffffff;
}