@charset "UTF-8";

@font-face {
  font-family: "Nanum Gothic";
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/NanumGothic-Bold.eot);
  src: url(../fonts/NanumGothic-Bold.eot?#iefix) format("embedded-opentype"),
    /*        url(../fonts/NanumGothic-Bold.woff2) format('woff2'), */
      url(../fonts/NanumGothic-Bold.woff) format("woff"),
    url(../fonts/NanumGothic-Bold.ttf) format("truetype");
}
@font-face {
  font-family: "Nanum Gothic";
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/NanumGothic-Regular.eot);
  src: url(../fonts/NanumGothic-Regular.eot?#iefix) format("embedded-opentype"),
    /*        url(../fonts/NanumGothic-Regular.woff2) format('woff2'), */
      url(../fonts/NanumGothic-Regular.woff) format("woff"),
    url(../fonts/NanumGothic-Regular.ttf) format("truetype");
}

html,
body {
  height: 100%;
  -webkit-text-size-adjust: 100%;
}
body,
div,
p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
dl,
dt,
dd,
table,
th,
td,
form,
fieldset,
legend,
input,
textarea,
button {
  margin: 0;
  padding: 0;
}
body,
table,
table td,
input,
select,
textarea {
  font-size: 13px;
  font-family: "Nanum Gothic", "NanumGothic", NanumGothic, sans-serif;
  line-height: 1;
  color: #111;
}
.select-on-title {
 color:#fff;
}
.select-on-title option{
  color:#111;
}
li {
  list-style: none;
}
hr {
  display: none;
}
legend,
caption {
  overflow: hidden;
  padding: 0;
  width: 1px;
  height: 1px;
  margin-top: -1px;
  font-size: 0;
  line-height: 0;
}
figure {
  margin: 0;
}
img {
  border: 0;
  vertical-align: middle;
}
a,
a:visited,
a:focus,
a:active {
  text-decoration: none;
  color: #111;
}
.underline,
a.underline {
  text-decoration: underline;
}
strong,
.strong {
  font-weight: 600;
}
em {
  font-style: normal;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.blind {
  position: absolute;
  left: -10000px;
  top: -10000px;
  width: 0;
  height: 0;
  font-size: 0;
}
.none {
  display: none;
}
.v-hidden {
  visibility: hidden;
}
.star {
  display: inline-block;
  margin: -2px 0 0px 2px;
  vertical-align: text-top;
}

.blur-shade {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  overflow: hidden;
  z-index: 100;
}
.blur-shade:after {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 110;
}

.p-relative {
  position: relative;
  min-height: 1px;
}
.text-center {
  text-align: center !important;
}
.text-left {
  text-align: left !important;
}
.text-right {
  text-align: right !important;
}
.valign-midlle {
  vertical-align: middle;
}
.valign-top {
  vertical-align: top;
}
.d-block {
  display: block !important;
}
.d-inline-block {
  display: inline-block !important;
}

.w40 {
  width: 40px !important;
}
.w50 {
  width: 50px !important;
}
.w60 {
  width: 60px !important;
}
.w100 {
  width: 100px !important;
}
.w49p {
  width: 49% !important;
}
.w100p {
  width: 100% !important;
}
.w120 {
  width: 120px !important;
}
.w150 {
  width: 150px !important;
}
.w200 {
  width: 200px !important;
}
.w500 {
  width: 500px !important;
}
.w600 {
  width: 600px !important;
}
.h150 {
  height: 150px !important;
}
.h200 {
  height: 200px !important;
}
.mt10 {
  margin-top: 10px !important;
}
.mt20 {
  margin-top: 20px !important;
}
.mt30 {
  margin-top: 30px !important;
}
.mb0 {
  margin-bottom: 0 !important;
}
.mb3 {
  margin-bottom:3px !important;
}
.mb5 {
  margin-bottom:5px !important;	
}
.mb10 {
  margin-bottom: 10px !important;
}
.mb20 {
  margin-bottom: 20px !important;
}
.mb30 {
  margin-bottom: 30px !important;
}
.ml5 {
  margin-left: 5px !important;
}
.ml10 {
  margin-left: 10px !important;
}
.ml20 {
  margin-left: 20px !important;
}
.mr5 {
  margin-right: 5px !important;
}
.mr10 {
  margin-right: 10px !important;
}
.mr20 {
  margin-right: 20px !important;
}
.mr40 {
  margin-right: 40px !important;
}
.mr100 {
  margin-right: 100px !important;
}

.contentIframe {
  margin: 15px;
}

h3.subtitle {
  margin-bottom: 20px;
  font-size: 18px;
  color: #3b444e;
  font-weight: 600;
  letter-spacing: -0.2px;
}
h3.subtitle .txt-sub {
  margin-left: 20px;
  font-size: 12px;
  color: #888;
  font-weight: normal;
}
h4.subtitle {
  margin-bottom: 20px;
  font-size: 16px;
  color: #3b444e;
  font-weight: 600;
  letter-spacing: -0.2px;
}
.title-wrap {
  position: relative;
}
.title-wrap .btn {
  position: absolute;
  top: -10px;
  right: 0;
}
.title-wrap .btn-wrap {
  position: absolute;
  top: -10px;
  right: 0;
}

/* form style */
input,
button,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
  vertical-align: middle;
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  border-radius: 0;
}
input[type="radio"] {
  margin: 0 0 1px;
}
input[type="checkbox"] {
  margin: 0;
}

select {
  height: 32px;
  padding: 0 24px 0 4px;
  font-size: 15px;
  color: #333;
  letter-spacing: -0.2px;
  cursor: pointer;
  border: none;
  border-bottom: 1px solid #ddd;
  outline: none;
  background: url(../images/ic_sel_02.png) no-repeat right 52%;
}
select[multiple] {
  height: auto;
}
select::-ms-expand {
  display: none;
}
input[type="password"] {
  display: inline-block;
  height: 40px;
  padding: 0;
  font-size: 15px;
  color: #333;
  letter-spacing: -0.2px;
  border: none;
  border-bottom: 1px solid #ddd;
  outline: none;
}
input[type="text"],
input[type="number"] {
  display: inline-block;
  height: 40px;
  padding: 0;
  font-size: 15px;
  color: #333;
  letter-spacing: -0.2px;
  border: none;
  border-bottom: 1px solid #ddd;
  outline: none;
}
input:-ms-input-placeholder {
  color: #aaa;
  font-weight: normal;
} /* IE10+ */
input::-webkit-input-placeholder {
  color: #aaa;
  font-weight: normal;
}
input:focus::-webkit-input-placeholder {
  opacity: 0;
}
input.inputbox.point {
  color: #01a59c;
}
input.inputbox2 {
  margin: 2px;
  height: 30px;
  line-height: 28px;
  padding: 0 5px;
  font-size: 13px;
  border: 1px solid #ddd;
}

.field {
  position: relative;
}
.field label {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 15px;
  color: #01a59c;
  font-weight: 600;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.field input:focus + label {
  top: -30px;
  color:transparent;
}
.field input + input {
  margin-left: 10px;
}
.field .t1 {
  font-size: 15px;
  font-weight: 600;
  color: #01a59c;
}

.bootstrap-tagsinput {
  display: inline-block;
  max-width: 100%;
  padding: 2px 0;
  border: none;
  border-bottom: 1px solid #ddd;
  outline: none;
  background-color: #fff;
  vertical-align: middle;
  line-height: 22px;
  cursor: text;
}
.bootstrap-tagsinput input {
  display: inline-block;
  margin-bottom: 0 !important;
  border: none;
  outline: none;
  font-size: 15px;
  background-color: transparent;
  width: auto !important;
  min-width: 100px;
  max-width: inherit;
}
.bootstrap-tagsinput.form-control input::-moz-placeholder {
  color: #aaa;
  opacity: 1;
}
.bootstrap-tagsinput.form-control input:-ms-input-placeholder {
  color: #aaa;
}
.bootstrap-tagsinput.form-control input::-webkit-input-placeholder {
  color: #aaa;
}
.bootstrap-tagsinput input:focus {
  border: none;
  box-shadow: none;
}
.bootstrap-tagsinput .tag {
  margin-right: 2px;
  color: white;
}
.bootstrap-tagsinput .tag [data-role="remove"] {
  margin-left: 8px;
  cursor: pointer;
}
.bootstrap-tagsinput .tag [data-role="remove"]:after {
  content: "";
  display: inline-block;
  margin-bottom: 2px;
  width: 11px;
  height: 11px;
  vertical-align: middle;
  background: url(../images/ic_x.png) no-repeat;
}
.bootstrap-tagsinput .label {
  display: inline-block;
  padding: 4px 12px;
  font-size: 15px;
  font-weight: 600;
  color: #333;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 15px;
}
.bootstrap-tagsinput .label-info {
  background-color: #f5f5f6;
}

textarea {
  padding: 10px 15px;
  color: #111;
  font-size: 15px;
  line-height: 22px;
  border: 1px solid #ccc;
  background: #fafafa;
  resize: vertical;
  overflow: auto;
  outline: none;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
textarea:focus {
  padding: 9px 14px;
  border: 2px solid #01a59c;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
textarea:-ms-input-placeholder {
  color: #aaa;
  font-size: 12px;
  font-weight: normal;
} /* IE10+ */
textarea::-webkit-input-placeholder {
  color: #aaa;
  font-size: 12px;
  font-weight: normal;
}
textarea:focus::-webkit-input-placeholder {
  opacity: 0;
}

.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
  margin-top: 0;
  margin-left: 10px;
}
.radio-block,
.radio-block + .radio-block,
.checkbox-block + .checkbox-block {
  display: block;
  margin-top: 3px;
}

label {
  display: inline-block;
  margin-bottom: 0;
}
label.inline {
  display: inline;
}
.label-group input[type="checkbox"] {
  margin-right: 4px;
}
fieldset {
  padding: 0;
  margin: 0;
  border: 0;
  min-width: 0;
}

a.ic-delete {
  display: inline-block;
  width: 11px;
  height: 11px;
  vertical-align: middle;
  background: url(../images/ic_x.png) no-repeat;
}
a.ic-delete02 {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  background: url(../images/ic_x_02.png) no-repeat;
}
a.back {
  display: inline-block;
  margin: 10px 0 30px -15px;
  padding-left: 16px;
  height: 19px;
  font-size: 15px;
  font-weight: 600;
  color: #999;
  vertical-align: middle;
  background: url(../images/ic_ar_02.png) no-repeat;
}
a.viewtype {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #555;
  vertical-align: middle;
}
a.viewtype i.type-table {
  display: inline-block;
  margin: 0 7px 4px 0;
  width: 23px;
  height: 23px;
  vertical-align: middle;
  background: url(../images/ic_viewtype.png) no-repeat -23px 0;
}
a.viewtype i.type-list {
  display: inline-block;
  margin: 0 7px 4px 0;
  width: 23px;
  height: 23px;
  vertical-align: middle;
  background: url(../images/ic_viewtype.png) no-repeat 0 0;
}

a.viewtype i.type-list {
  display: inline-block;
  margin: 0 7px 4px 0;
  width: 23px;
  height: 23px;
  vertical-align: middle;
  background: url(../images/ic_viewtype.png) no-repeat 0 0;
}
i.ic-xls { display:inline-block; margin:0 7px 4px 0; width:23px; height:23px; vertical-align:middle; background:url(../images/ic_xls.png) no-repeat 0 0; }
.txt-point {
  font-weight: 600;
  color: #01a59c;
}
.txt-valid {
  color: #888;
  font-size: 12px;
}
.txt-red {
  font-weight: 600;
  color: #ff0000;
}
select + .txt-valid,
.inputbox + .txt-valid {
  margin-top: 10px;
}

/* btn */
.btn-wrap {
  padding: 20px 0 40px;
  text-align: center;
}
.btn-wrap .btn {
  margin: 0 3px;
  width: 140px;
  height: 46px;
  line-height: 44px;
  font-size: 15px;
  font-weight: 600;
  color: #111;
  border: 1px solid #ddd;
  background: #fafafa;
}
.btn-wrap.type2 {
  padding: 20px 0 0;
  text-align: left;
}
.btn-wrap.type2 .btn {
  margin: 0;
  height: 40px;
  line-height: 38px;
}
.btn {
  display: inline-block;
  letter-spacing: -0.2px;
  border-radius: 2px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05) !important;
}
.btn.c1 {
  color: #fff;
  border: 1px solid #01a59c;
  background: #01a59c;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1) !important;
}
.btn.c2 {
  color: #fff;
  border: 1px solid #ddd;
  background: #ddd;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05) !important;
}
.btn.c3 {
  color: #333;
  border: 1px solid #ddd;
  background: #fafafa;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05) !important;
}
.btn.c4 {
  color: #555;
  border: 1px solid #e1e1e1;
  background: #e9e9e9;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05) !important;
}
.btn.c5 {
  color: #01a59c;
  border: 1px solid #01a59c;
  background: #fff;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05) !important;
}
.btn.c6 {
  color: #fff;
  border: 1px solid #2c353e;
  background: #2c353e;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1) !important;
}
.btn.c7 {
  color: #111;
  border: 1px solid #2c353e;
  background: #fff;
}
.btn.c8 {
  color: #fff;
  border: 1px solid #E55959;
  background: #E55959;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1) !important;
}
.btn.s1 {
  padding: 0 12px;
  height: 32px;
  line-height: 30px;
  font-size: 14px;
}
.btn.s2 {
  padding: 0 12px;
  height: 29px;
  line-height: 27px;
  min-width: inherit;
  font-size: 13px;
}
/* add 20201230 */
.btn.s3 {
  padding: 0 12px;
  height: 21px;
  line-height: 18px;
  min-width: inherit;
  font-size: 12px;
}
.btn-join {
  display: block;
  margin: 0 auto;
  min-width: 200px;
  height: 40px;
  font-size: 17px;
  font-weight: 600;
  border-radius: 4px;
  background: #424a52 !important;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05) !important;
}
.btn-join.facebook {
  margin: 15px auto;
  width: 220px;
  height: 35px;
  line-height: 35px;
  letter-spacing: -0.5px;
  background: #4468b0 !important;
}
.btn-join.kakao {
  margin: 15px auto;
  width: 220px;
  height: 35px;
  line-height: 35px;
  letter-spacing: -0.5px;
  color: #482b20;
  background: #fde433 !important;
}
.btn-join.naver {
  margin: 15px auto;
  width: 220px;
  height: 35px;
  line-height: 35px;
  letter-spacing: -0.5px;
  background: #2cc622 !important;
}
.btn-login {
  display: inline-block;
  margin: 0 10px;
  font-size: 15px;
  font-weight: 600;
  color: #555 !important;
}

.btn-wrap.rt {
  padding: 0;
  text-align: right;
}
.btn-wrap.rt .btn {
  width: 160px;
}

.btn-rt.type2 { position:absolute; top:-10px; right:0; }
.total-num { position:absolute; top:-36px; right:0; font-size:14px; }

.btn-move {
  position: relative;
}
.btn-move a {
  display: block;
  margin: 10px auto;
  width: 26px;
  height: 26px;
  background: url(../images/ic_ar_move.png) no-repeat;
}


a.move-all-right {
  background-position: 0 0;
  background: url(../images/ic_ar_all_right_move.png) no-repeat;
}
a.move-all-left {
  background-position: 0 0;
  background: url(../images/ic_ar_all_left_move.png) no-repeat;
}
.btn-all-move a.move-up {
  background-position: -26px 0;
}
.btn-all-move a.move-bottom {
  background-position: -26px -26px;
}


.btn-move a.move-right {
  background-position: 0 0;
}
.btn-move a.move-left {
  background-position: 0 -26px;
}
.btn-move a.move-up {
  background-position: -26px 0;
}
.btn-move a.move-bottom {
  background-position: -26px -26px;
}

.btn-active {
  margin: 4px;
  padding: 0 10px;
  min-width: 50px;
  height: 38px;
  line-height: 36px;
  color: #333;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  background: #fafafa;
  border: 1px solid #e5e5e5;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.03);
}
.btn-active-background {
  color: #fff;
  background: #01a59c;
  border-color: #01a59c;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
}

.btn.checked {
  padding: 0 22px 0 10px;
  background-image: url(../images/ic_check_02.png);
  background-repeat: no-repeat;
  background-position: right center;
}
.pin { 
	background:url(../images/ic_pin.png) no-repeat center; 
	background-size:contain;
	width:15px;
	height:15px;
	margin-left:auto;
}
.pin-disable { 
	background:url(../images/ic_pin_disable.png) no-repeat center; 
	background-size:contain;
	width:15px;
	height:15px;
	margin-left:auto;
}
.sortlist-head{
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
}
.sortlist-icon {
	display: flex;
    flex-direction: column;
    margin-left:5px;
}

.sorticon {
	display:flex;
	flex-direction:column
}

.file-btn {
  position: relative;
  display: inline-block;
  width: auto;
  height: 34px;
  vertical-align: middle;
  overflow: hidden;
}
.file-btn .btn {
  display: inline-block;
  padding: 0 12px;
  height: 32px;
  line-height: 30px;
  font-size: 14px;
  font-weight: 600;
  color: #111;
  border: 1px solid #ddd;
  background: #fafafa;
  border-radius: 2px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
  z-index: 1;
}
.file-btn input {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  cursor: pointer;
  width: 200%;
  height: 200%;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}

.sns-group {
  display: inline-block;
  margin-left: 20px;
  vertical-align: middle;
}
.sns-group li {
  display: inline-block;
}
.sns-group li a {
  display: inline-block;
}
.sns-group li .ic-facebook {
  width: 22px;
  height: 22px;
  background: url(../images/ic_sns_facebook.png) no-repeat;
}
.sns-group li .ic-kakao {
  width: 38px;
  height: 22px;
  background: url(../images/ic_sns_kakao.png) no-repeat;
}
.sns-group li .ic-naver {
  width: 50px;
  height: 22px;
  background: url(../images/ic_sns_naver.png) no-repeat;
}
.sns-group li .ic-url {
  width: 38px;
  height: 22px;
  background: url(../images/ic_sns_url.png) no-repeat;
}

/* popover-wrap */
.popover-wrap {
  display: none;
  position: absolute;
  z-index: 1001;
  top: 50%;
  margin: -300px auto 0;
  left: 0;
  right: 0;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.pop-header {
  position: relative;
  margin: 0;
  height: 70px;
  padding: 20px;
  background: #2c353e;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
}
.pop-header:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background: #01a59c;
}
.pop-header.kbbf-bgcolor:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background: #eee;
}
.pop-header h2 {
  margin: 10px 20px 0;
  font-size: 20px;
  font-weight: normal;
  color: #fff;
  letter-spacing: -0.8px;
}
.pop-header a.close {
  position: absolute;
  top: 29px;
  right: 24px;
  width: 19px;
  height: 19px;
  background: url(../images/ic_x_02.png) no-repeat center;
}
.pop-header a.ic-win {
  position: absolute;
  top: 28px;
  right: 28px;
  width: 21px;
  height: 21px;
  background: url(../images/ic_win_cont.png) no-repeat 0 0;
}
.popover-wrap.maximize {
  margin: 0 !important;
  top: 0;
  width: 100% !important;
  height: 100% !important;
}
.popover-wrap.maximize a.ic-win {
  background-position: 0 -21px;
}
.popover-wrap.maximize .pop-con {
  position: absolute;
  top: 70px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}
.popover-wrap.maximize .btn-wrap {
  position: relative;
  padding: 20px 0 0;
}
.popover-wrap.maximize .table-wrap {
  height: auto !important;
}
.pop-con {
  padding: 35px 40px;
}
.pop-con .btn-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 0 35px;
  background: #fff;
}
.noabsol{
  position : relative !important;
}


.pop-con .btn-wrap.rt {
  position: absolute !important;
  padding: 0 !important;
  text-align: right;
}
.pop-con.pop-scroll {
  height: calc(100% - 156px);
  overflow: auto;
}
.pop-con .ins {
  text-align: center;
  font-size: 18px;
  color: #3b444e;
  line-height: 30px;
}
.pop-con .ins strong {
  color: #111;
}
.pop-con .ins2 {
  font-size: 15px;
  font-weight: 600;
  color: #777;
  line-height: 30px;
}
.pop-con .t1 {
  font-size: 17px;
  font-weight: 600;
  color: #3b444e;
  width: 130px;
}

.pop-con .t2 {
  font-size: 17px;
  font-weight: 600;
  color: #3b444e;
  width: 300px;
}

.pop-con .tabs {
  margin-top: -10px;
}
.pop-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 86px;
  text-align: center;
  padding: 20px 0;
  border-top: 1px solid #eee;
}

/* process-wrap */
.process-wrap {
  display: table;
  table-layout: fixed;
  width: 100%;
  padding: 60px 0;
}
.process-wrap li {
  display: table-cell;
  text-align: center;
  cursor: pointer;
}
.process-wrap li .bar {
  position: relative;
}
.process-wrap li .bar:after {
  content: "";
  position: absolute;
  top: 3px;
  left: 50%;
  right: -50%;
  height: 6px;
  background: #f7f7f7;
}
.process-wrap li:last-child .bar:after {
  display: none;
}
.process-wrap li .bar .pt {
  display: inline-block;
  position: relative;
  width: 10px;
  height: 10px;
  background: #01a59c;
  z-index: 2;
  border-radius: 50%;
}
.process-wrap li .bar .pt + span {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 50%;
  margin: -9px 0 0 -15px;
  width: 30px;
  height: 30px;
  background: #fff;
    border-radius: 50%;
  z-index: 1;
  -webkit-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}
.process-wrap li.active .bar .pt + span {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 50%;
  margin: -19px 0 0 -25px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #dbf4f3;
  z-index: 1;
}
.process-wrap li .txt {
  margin-top: 30px;
  font-size: 14px;
  font-weight: 600;
  color: #01a59c;
}
.process-wrap li:hover .bar .pt + span {
  margin: -19px 0 0 -25px;
  width: 50px;
  height: 50px;
  background: #f7f7f7;
  -webkit-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}

.join .process-wrap {
  padding: 60px 0 50px;
}
.join .process-wrap li .bar:after {
  top: 4px;
  height: 4px;
  background: #b1e3e0;
}
.join .process-wrap li .bar .pt {
  width: 12px;
  height: 12px;
  background: #7a7a7a;
}
.join .process-wrap li .bar .pt + span {
  margin: -12px 0 0 -18px;
  width: 36px;
  height: 36px;
}
.join .process-wrap li.active .bar .pt {
  background: #232323;
}
.join .process-wrap li.active .bar .pt + span {
  margin: -39px 0 0 -45px;
  width: 90px;
  height: 90px;
  background: #b1e3e0 !important;
}
.join .process-wrap li .txt {
  margin-top: 48px;
  font-size: 18px;
  color: #596067;
  font-weight: normal;
}
.join .process-wrap li.active .txt {
  color: #333;
  font-weight: 600;
}
.join .process-wrap li:hover .bar .pt + span {
  margin: -39px 0 0 -45px;
  width: 90px;
  height: 90px;
  background: #f7f7f7;
}

.process-wrap2 {
  padding: 30px 60px;
  border-bottom: 1px solid #ddd;
}
.process-wrap2 li {
  display: inline-block;
  position: relative;
  margin: 5px 0;
}
.process-wrap2 li .num {
  display: inline-block;
  width: 25px;
  height: 25px;
  line-height: 24px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  background: #b9b9b9;
    border-radius: 50%;
}
.process-wrap2 li .txt {
  display: inline-block;
  margin: 0 95px 0 8px;
  font-size: 17px;
  vertical-align: middle;
  color: #aaa;
  letter-spacing: -0.5px;
}
.process-wrap2 li.active .num {
  background: #01a59c;
}
.process-wrap2 li.active .txt,
.process-wrap2 li.complete .txt {
  color: #004338;
  font-weight: 600;
}
.process-wrap2 li:after {
  content: "";
  position: absolute;
  top: 12px;
  right: 5px;
  width: 80px;
  height: 1px;
  background: #777;
}
.process-wrap2 li:last-child:after {
  display: none;
}
.process-wrap2 li:last-child .txt {
  margin-right: 0;
}
.process-wrap2 li.complete .num {
  background: #01a59c url(../images/ic_check.png) no-repeat center;
}
.process-wrap2 li.complete .num span {
  display: none;
}
.process-wrap2 a {
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.process-wrap2 a:hover .num {
  background-color: #b9b9b9;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

/* datepicker */
.datepicker-wrap {
  display: inline-block;
  vertical-align: middle;
}
.datepicker-wrap > div {
  display: inline-block;
}
.datepicker-wrap > div + div {
  margin-left: 20px;
}
.datepicker-wrap + button {
  margin-left: 10px;
}
.ui-widget {
  font-family: inherit;
  font-size: inherit;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
  font-family: inherit;
  font-size: inherit;
}
.ui-datepicker {
  display: none;
  width: 254px;
  padding: 0;
  margin-top: 2px;
  font-size: 13px;
  background: #fff;
  border: 1px solid #999;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.ui-datepicker.ui-corner-all {
  border-radius: 0;
}
.ui-datepicker .ui-datepicker-header {
  position: relative;
  margin-bottom: 10px;
  padding: 4px 0 0;
  color: #888;
  border-bottom: 1px solid #f1f1f1;
}
.ui-datepicker .ui-datepicker-title {
  padding-bottom: 5px;
  text-align: center;
}
.ui-datepicker .ui-datepicker-title select {
  margin: 0 2px;
  padding: 0 24px 0 7px;
  height: 32px;
  font-size: 14px;
  font-weight: 600;
  vertical-align: middle;
  border: none;
}
.ui-datepicker .ui-datepicker-title span {
  display: inline-block;
  margin-bottom: -2px;
  vertical-align: sub;
  color: #888;
  font-weight: normal;
}
.ui-datepicker select.ui-datepicker-month-year {
  width: auto;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
  width: auto;
}
.ui-datepicker table {
  width: 214px;
  font-size: inherit;
  border-collapse: collapse;
  margin: 0 20px 0;
}
.ui-datepicker th {
  padding: 1px;
  text-align: center;
  font-weight: 600;
  color: #666;
  border: 0;
}
.ui-datepicker td {
  border: 0;
  padding: 1px;
}
.ui-datepicker table td .ui-state-default {
  display: block;
  padding: 6px 0 7px;
  font-size: 12px;
  text-align: center;
  text-decoration: none;
  font-weight: normal;
  color: #666;
  border: 0;
  background: none;
}
.ui-datepicker table td .ui-state-default.ui-state-hover {
  color: #39594e;
  text-decoration: underline;
}
.ui-datepicker table td .ui-state-default.ui-state-active {
  color: #fff;
  background: #01a59c;
}
.ui-datepicker table td .ui-state-default.ui-state-active:hover {
  text-decoration: none;
}
.ui-datepicker table td .ui-state-default.ui-state-highlight {
  color: #555;
  font-weight: 600;
  background: #ffea99;
}
.ui-datepicker .ui-datepicker-buttonpane {
  height: 33px;
  line-height: 34px;
  margin: 10px 0 0;
  padding: 0;
  text-align: center;
  background: #fff;
  border-top: 1px solid #ccc;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
  float: none;
  margin: 0;
  padding: 0;
  line-height: 20px;
  color: #888;
  vertical-align: middle;
  border: 0;
  opacity: 1;
  filter: Alpha(Opacity=100);
  background: none;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-close {
  display: none;
}
.input-datepicker {
  width: 100px;
  text-align: center;
}
.ui-datepicker .ui-datepicker-prev {
  width: 20px;
  height: 20px;
  top: 3px;
  left: 16px;
  background: url(../images/ic_datepicker.png) no-repeat 0 0;
}
.ui-datepicker .ui-datepicker-next {
  width: 20px;
  height: 20px;
  top: 3px;
  right: 15px;
  background: url(../images/ic_datepicker.png) no-repeat 0 -100px;
}
.ui-datepicker .ui-datepicker-prev:hover {
  top: 2px;
  left: 15px;
  border-color: #fff;
}
.ui-datepicker .ui-datepicker-next:hover {
  top: 2px;
  right: 16px;
  border-color: #fff;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  display: none;
}
.ui-datepicker-trigger {
  margin-left: 5px;
  width: 24px;
  height: 24px;
  font-size: 0;
  background: url(../images/ic_datepicker.png) no-repeat;
  border: none;
  cursor: pointer;
}

/* search */
.search {
  position: relative;
  display: inline-block;
  width: 290px;
  height: 32px;
  vertical-align: middle;
}
.search a {
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 32px;
  background: url(../images/ic_search.png) no-repeat center;
  z-index: 1;
}
.search a:hover + input,
.search input:hover,
.search input:focus,
.search input:active {
  width: 250px;
  opacity: 1;
}
.search input {
  position: absolute;
  top: 0;
  right: 32px;
  width: 250px;
  height: 32px;
  line-height: 32px;
  padding: 0 8px;
  background: none;
  border: none;
  outline: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  font-size: 15px;
  color: #fff;
}
.search input:-ms-input-placeholder {
  color: #fff;
  font-weight: normal;
}
.search input::-webkit-input-placeholder {
  color: #fff;
  font-weight: normal;
}

.search2 {
  position: relative;
  display: inline-block;
  margin-right: 45px;
  width: 200px;
  height: 32px;
  vertical-align: middle;
  background: #fff;
  border-radius: 16px 0 0 16px;
}
.search2 .ic-search {
  display: inline-block;
  margin: 0 6px 0 12px;
  width: 18px;
  height: 18px;
  vertical-align: middle;
  background: url(../images/ic_search_03.png) no-repeat;
}
.search2 input {
  border: none;
  width: 150px;
  height: 32px;
  line-height: 32px;
}
.search2 .btn-search {
  position: absolute;
  top: 0;
  right: -45px;
  width: 45px;
  height: 32px;
  padding: 0 9px;
  font-size: 12px;
  color: #fff;
  line-height: 30px;
  background: #01a59c;
  border-radius: 0 16px 16px 0;
}
#tournamentStatus > option {
	color:#000;
}

/* table */
.table-wrap {
}
.table-wrap table {
  width: 100%;
  table-layout: fixed;
  border-spacing: 0;
  border-collapse: collapse;
  border-top: 1px solid #aaa;
  overflow-x: auto;
}
.table-wrap table thead th {
  padding: 10px 5px;
  height: 44px;
  line-height: 20px;
  color: #111;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid #aaa;
}
.table-wrap table tbody td {
  padding: 7px 5px;
  line-height: 20px;
  color: #333;
  font-size: 13px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid #ddd;
  /* min-width: 120px; */
}
.table-wrap table.padding-w tbody td {
  padding: 10px 5px;
}
.table-wrap table tbody td.no-border {
  border-bottom: none;
}
.table-wrap table tbody td.td-inner {
  padding: 0;
}
.table-wrap table tbody td.td-inner table {
  border-top: none;
}
.table-wrap table tbody td.td-inner table tbody td {
  border-bottom: 1px dotted #eee;
}
.table-wrap table tbody td.td-inner table tbody tr:last-child td {
  border-bottom: none;
}
.table-wrap.type2 table thead th {
  color: #fff;
  background: #2c353e;
  border-bottom: none;
  border-top: 4px solid #01a59c;
}
.table-wrap table tbody td .mdc-form-field,
.table-wrap table tbody td .mdc-form-field label {
  font-size: 13px;
}
.table-wrap.type3 table tbody td {
  width: 375px;
  padding: 0;
  text-align: left;
}
.table-wrap.type3 table {
  width: auto;
  margin: auto;
}
.table-wrap.type4 table tbody td {
  width: 500px;
  padding: 0;
  text-align: left;
}
.table-wrap.type4 table {
  width: auto;
  margin: auto;
}
.table-wrap table tbody td a:hover {
  color: #01a59c;
}
.table-wrap table tbody td .vs2 {
  padding: 7px 0;
  font-size: 12px;
  font-weight: bold;
  color: #777;
}
.table-wrap table.table-bordered thead th {
  padding: 5px;
  height: 28px;
  border: 1px solid #ddd;
}
.table-wrap table.table-bordered tbody td {
  padding: 5px;
  height: 28px;
  border: 1px solid #ddd;
}
.w540 {
  width: 540px !important;
}
.w420 {
  width: 420px !important;
}
.w380 {
  width: 380px !important;
}
.w330 {
  width:330px !important;
}
.w50 {
  width: 50px !important;
}
.table-top {
  position: relative;
  margin-bottom: 10px;
}
.table-top .search {
  position: absolute;
  top: 0;
  right: 5px;
  width: 540px;
  height: 32px;
  /* display: inline-block;
  vertical-align: middle; */
  display: flex;
  flex-direction: row;
}
.table-top .search a {
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 32px;
  background: url(../images/ic_search_02.png) no-repeat center;
  z-index: 1;
}
.table-top .search a:hover + input,
.table-top .search input:hover,
.table-top .search input:focus,
.table-top .search input:active {
  width: 150px;
  opacity: 1;
}
.table-top .search input {
  position: absolute;
  top: 0;
  right: 32px;
  width: 150px;
  height: 32px;
  line-height: 30px;
  padding: 0;
  background: none;
  border: none;
  outline: none;
  border-bottom: 1px solid #01a59c;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  opacity: 1;
}
.table-top .search input:-ms-input-placeholder {
  color: #777;
  font-weight: normal;
}
.table-top .member-search input::-webkit-input-placeholder {
  color: #777;
  font-weight: normal;
}
.table-top .member-search a {
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 32px;
  background: url(../images/ic_search_02.png) no-repeat center;
  z-index: 1;
}
.table-top .member-search a:hover + input,
.table-top .member-search input:hover,
.table-top .member-search input:focus,
.table-top .member-search input:active {
  width: 150px;
  opacity: 1;
}
.table-top .member-search input {
  position: absolute;
  top: 0;
  right: 32px;
  width: 150px;
  height: 32px;
  line-height: 30px;
  padding: 0;
  background: none;
  border: none;
  outline: none;
  border-bottom: 1px solid #01a59c;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  opacity: 1;
}
.table-top .member-search input:-ms-input-placeholder {
  color: #777;
  font-weight: normal;
}
.table-top .member-search input::-webkit-input-placeholder {
  color: #777;
  font-weight: normal;
}

.table-top .search2 {
  position: absolute;
  top: 0;
  right: 5px;
  display: inline-block;
  width: 360px;
  height: 32px;
  vertical-align: middle;
}
.table-top .search2 a {
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 32px;
  background: url(../images/ic_search_02.png) no-repeat center;
  z-index: 1;
}
.table-top .search2 input {
  position: absolute;
  top: 0;
  right: 32px;
  width: 32px;
  height: 32px;
  width: 240px;
  opacity: 1;
  line-height: 30px;
  padding: 0;
  background: none;
  border: none;
  outline: none;
  border-bottom: 1px solid #01a59c;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  -webkit-transition: width 0.55s ease;
  -ms-transition: width 0.55s ease;
}
.table-top .search2 input:-ms-input-placeholder {
  color: #777;
  font-weight: normal;
}
.table-top .search2 input::-webkit-input-placeholder {
  color: #777;
  font-weight: normal;
}

.table-top.type2 {
  height: 1px;
  margin: 0;
}
.table-top.type2 .search {
  top: -42px;
}
.table-top.type2 .search2 {
  top: -42px;
}
.table-top.type3 {
  height: 1px;
  margin: 0;
  margin-bottom: 50px;
}
.table-top.type3 .search3 {
  top: 0px;
}
.table-title {
  display: flex;
  font-size: 1rem;
  justify-content: space-between;
  font-weight: 600;
  position: relative;
  margin : 10px 0px;
  align-items: center;
  height: 25px;
}

.table-title span{
  font-size: 0.8rem;
  font-weight: 400;
  color:#888
}

.table-title .search-fixed {
  position: absolute;
  top: -6px;
  right: 5px;
  display: inline-block;
  width: 250px;
  height: 40px;
  vertical-align: middle;
}
.table-title .search-fixed select {
  margin-right: 5px;
}
.table-title .search-fixed a {
  position: absolute;
  top: 2px;
  right: 0;
  width: 32px;
  height: 31px;
  background: url(../images/ic_search_02.png) no-repeat center;
  z-index: 1;
}
.table-title .search-fixed input {
  display: inline-block;
  height: 31px;
  padding: 0;
  font-size: 15px;
  color: #333;
  letter-spacing: -0.2px;
  border: none;
  border-bottom: 1px solid #ddd;
  outline: none;
}

.table-top .search-fixed {
  position: absolute;
  top: -65px;
  right: 5px;
  display: inline-block;
  width: 350px;
  height: 40px;
  vertical-align: middle;
}
.table-top .search-fixed select {
  margin-right: 5px;
}
.table-top .search-fixed a {
  position: absolute;
  top: 2px;
  right: 0;
  width: 32px;
  height: 40px;
  background: url(../images/ic_search_02.png) no-repeat center;
  z-index: 1;
}
.table-top .search-fixed input {
  display: inline-block;
  height: 40px;
  padding: 0;
  font-size: 15px;
  color: #333;
  letter-spacing: -0.2px;
  border: none;
  border-bottom: 1px solid #ddd;
  outline: none;
}
.table-top .search-fixed {
  position: absolute;
  top: -65px;
  right: 5px;
  display: inline-block;
  width: 350px;
  height: 40px;
  vertical-align: middle;
}
.table-top .search-fixed select {
  margin-right: 5px;
}
.table-top .search-fixed a {
  position: absolute;
  top: 2px;
  right: 0;
  width: 32px;
  height: 40px;
  background: url(../images/ic_search_02.png) no-repeat center;
  z-index: 1;
}
.table-top .search-fixed input {
  display: inline-block;
  height: 40px;
  padding: 0;
  font-size: 15px;
  color: #333;
  letter-spacing: -0.2px;
  border: none;
  border-bottom: 1px solid #ddd;
  outline: none;
}
thead tr{
  background-color: #F8FFFF;
}
table.play-table {
  border-spacing: 0;
  border-collapse: collapse;
}
table.play-table th {
  padding: 10px 20px 10px 10px;
  font-size: 14px;
  color: #555;
}
table.play-table td {
  padding-right: 10px;
}
table.play-table .box {
  height: 300px;
  padding: 10px;
  overflow: auto;
  border: 1px solid #ddd;
}
table.play-table .box ul li {
  padding: 4px 0;
}
table.play-table .box ul li.active {
  background: #eee;
}
table.play-table .box ul li a {
  display: block;
  padding: 2px 5px;
}
#tdEventTypeList > ul li {
  padding: 0 0;
}
#tdEventTypeList > ul {
  padding-inline-start: 0px;
  margin-block-end: 0px;
  margin-block-start: 0px;
}

table.play-table .boxS {
  height: 300px;
  width: 200px;
  padding: 10px;
  overflow: auto;
  border: 1px solid #ddd;
  background: url() !important;
}
table.play-table .boxS select option {
  padding: 4px 0;
}
table.play-table .boxS select option.active {
  background: #eee;
}
table.play-table .boxS select option a {
  display: block;
  padding: 2px 5px;
}

table.play-table2 {
  width: 100%;
  table-layout: fixed;
  border-spacing: 0;
  border-collapse: collapse;
}
table.play-table2 td {
  padding: 12px 6px;
  font-size: 15px;
  text-align: center;
  line-height: 20px;
}
table.play-table2 td .team {
  color: #777;
}
table.play-table2 td .name {
  margin: 4px 0;
  font-weight: 600;
  color: #333;
}
table.play-table2 td .score {
  margin: 30px 0;
  font-family: Arial, sans-serif;
  font-size: 44px;
  font-weight: 600;
  color: #777;
}
table.play-table2 td .time {
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 16px;
}
table.play-table2 td .game-action {
  display: inline-block;
  margin-bottom: 10px;
  padding: 17px 0 0;
  width: 77px;
  height: 77px;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  background: #2699fb;
  border: 1px solid #1d7fd3;
    border-radius: 50%;
}
table.play-table2 td .vs {
  font-size: 16px;
  font-weight: 600;
  color: #777;
}
table.play-table2 td .view-layer {
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url(../images/ic_view_layer.png) no-repeat center;
}
table.play-table2 td .layerbox {
  position: absolute;
  top: -7px;
  right: 36px;
  width: 120px;
  padding: 2px;
  text-align: left;
  border: 1px solid #ccc;
  background: #fff;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
}
table.play-table2 td .layerbox a {
  display: block;
  padding: 2px 10px;
  font-size: 13px;
}
table.play-table2 td .layerbox a:hover {
  background: #f9f9f9;
}
table.play-table2 tr.border td {
  border-bottom: 1px solid #ddd;
}

table.play-table3 {
  width: 100%;
  table-layout: fixed;
  border-spacing: 0;
  border-collapse: collapse;
}
table.play-table3 th {
  padding: 12px;
  font-size: 16px;
}
table.play-table3 td {
  padding: 12px;
  font-size: 15px;
  text-align: left;
  line-height: 20px;
  vertical-align: top;
}
table.play-table3 td .title {
  padding-top: 5px;
  height: 50px;
}
table.play-table3 td input {
  height: 30px;
  text-align: center;
  font-size: 14px;
}
table.play-table3 td select {
  font-size: 14px;
}

table.play-table4 {
  width: 100%;
  table-layout: fixed;
  border-spacing: 0;
  border-collapse: collapse;
}
table.play-table4 th {
  padding: 12px 6px;
  font-size: 13px;
}
table.play-table4 td {
  padding: 12px 6px;
  font-size: 15px;
  text-align: center;
  line-height: 16px;
}
table.play-table4 td .name {
  font-weight: 600;
  color: #333;
}
table.play-table4 td input {
  height: 30px;
  text-align: center;
  font-size: 14px;
}

table.play-table5 {
  margin-bottom: 30px;
  width: 100%;
  table-layout: fixed;
  border-spacing: 0;
  border-collapse: collapse;
  border: 1px solid #ccc;
}
table.play-table5 thead th {
  padding: 6px;
  font-weight: normal;
  line-height: 18px;
  font-size: 14px;
  color: #555;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
}
table.play-table5 thead th:last-child {
  border-right: none;
}
table.play-table5 tbody th {
  padding: 0px 6px;
  font-weight: normal;
  line-height: 18px;
  font-size: 14px;
  color: #555;
  border-right: 1px solid #ddd;
}
table.play-table5 .part-name {
  font-size: 16px;
  font-weight: 600;
  color: #111;
}
table.play-table5 td {
  padding: 0;
  font-size: 14px;
  text-align: center;
}
table.play-table5 .team {
  display: inline-block;
  width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
table.play-table5 .name {
  margin: 0 5px;
}
table.play-table5 .line {
  width: 100px;
  height: 34px;
  background-image: linear-gradient(19deg, #fff 49%, #ccc 50%, #fff 51%);
}

table.play-table6 { margin-bottom:30px; width:100%; table-layout:fixed; border-spacing:0; border-collapse:collapse; border:1px solid #ccc; }
table.play-table6 thead th { padding:8px 6px; font-weight:600; line-height:18px; font-size:14px; color:#111; border:1px solid #ddd; background:#f6fffd; }
table.play-table6 tbody th { padding:8px 6px; font-weight:600; line-height:18px; font-size:14px; color:#111; border:1px solid #ddd; background:#f6fffd; }
table.play-table6 tbody td { padding:8px 6px; font-size:14px; text-align:center; border:1px solid #ddd; }
table.play-table6 tbody td input { height:20px; text-align:center; border:none; }

table.d-board {
  width: 100%;
  table-layout: fixed;
  border-spacing: 0;
  border-collapse: collapse;
}
table.d-board td {
  padding: 8px 12px;
  font-size: 13px;
  text-align: left;
  line-height: 20px;
  vertical-align: top;
}
table.d-board td .title {
  font-size: 15px;
  font-weight: 600;
}
table.d-board td .num {
  display: inline-block;
  min-width: 90px;
  text-align: right;
  color: #777;
}
table.d-board td .t2 {
  display: inline-block;
  margin-right: 80px;
  line-height: 26px;
}
table.d-board td .t2 .num {
  min-width: 60px;
  font-size: 13px;
  font-weight: normal;
}

#page-container {
  position: relative;
  min-width: 1200px;
  height: 100%;
}
#page-container_login {
  position: relative;
  min-width: 1200px;
  height: 100%;
}
#pagination {
  display: flex;
  flex: auto;
  justify-content: center;
  padding: 20px;
}

#header {
  position: relative;
  height: 112px;
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.01);
  z-index: 30;
}
#header .header-top {
  position: relative;
  height: 66px;
  background: #2c353e;
}
#header .header-top a.logo {
  position: absolute;
  top: 17px;
  left: 25px;
  width: 155px;
  height: 32px;
  background: url(../images/logo.png) no-repeat;
}
#header .header-top .select-list {
  position: absolute;
  top: 26px;
  left: 200px;
}
#header .header-top .select-list .list-btn {
  position: relative;
  display: block;
  padding-right: 18px;
  font-size: 18px;
  color: #fff;
  font-weight: 600;
  letter-spacing: -0.2px;
  background: url(../images/ic_sel_01.png) no-repeat right 8px;
}
#header .header-top .select-list.active .list-btn {
  background-position: right -88px;
}
#header .header-top .select-list .list-wrap {
  display: none;
  position: absolute;
  top: 25px;
  left: -10px;
  min-width: 180px;
  background: #fff;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
  z-index: 40;
}
#header .header-top .select-list.active .list-wrap {
  display: block;
}
#header .header-top .select-list .list-wrap li a {
  display: block;
  padding: 12px 20px;
  font-size: 16px;
  color: #111;
  white-space: nowrap;
  border-top: 1px solid #eee;
  border-radius: 2px;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
#header .header-top .select-list .list-wrap li a:hover {
  background: #f5f5f5;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
#header .header-top .select-list .list-wrap li:first-child {
  padding-top: 0;
  border-top: none;
}

#header .header-top .right {
  position: absolute;
  top: 17px;
  right: 30px;
}
#header .header-top .right .search {
  margin-right: 15px;
}
#header .header-top .right .per {
  display: inline-block;
  font-size: 14px;
  color: #fff;
  letter-spacing: -0.2px;
}
#header .header-top .right .per > div {
  display: inline-block;
  vertical-align: middle;
}
#header .header-top .right .per > div > span {
  /*display:block;*/
}
#header .header-top .right .per .img {
  display: inline-block;
  margin-right: 6px;
  width: 22px;
  height: 22px;
  vertical-align: middle;
  background: url(../images/ic_per.png) no-repeat;
}

#header .header-sub {
  position: relative;
  height: 46px;
  background: #fff;
}
#header .header-sub ul li {
  display: inline-block;
}
#header .header-sub ul li .tag {
  display: inline-block;
  padding: 0 18px;
  height: 24px;
  line-height: 24px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  font-style: italic;
  letter-spacing: 1px;
  background: #ff4545;
  border-radius: 15px;
}
#header .header-sub ul li a {
  color: #777;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
}
#header .header-sub ul li a span {
  margin: 0 3px;
  vertical-align: middle;
}
#header .header-sub ul li a:hover,
#header .header-sub ul li a:focus,
#header .header-sub ul li a:active,
.dropdown:hover .dropbtn {
  background-color: #01a59c;
  color: #fff;
}

#header .header-sub ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #fff;
  margin: 0px 30px;
}

#header .header-sub ul li {
  float: left;
}

#header .header-sub ul li a,
.dropbtn {
  display: inline-block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

#header .header-sub ul li a:hover,
.dropdown:hover .dropbtn {
  background-color: #01a59c;
  color: #fff;
}

#header .header-sub ul li.dropdown {
  display: inline-block;
}

#header .header-sub ul .dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

#header .header-sub ul .dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

#header .header-sub ul .dropdown-content a:hover {
  background-color: #01a59c;
  color: #fff;
}

#header .header-sub ul .dropdown:hover .dropdown-content {
  display: block;
}

#con-wrap {
  display: table;
  table-layout: fixed;
  width: 100%;
  min-height: 100%;
}

#sidebar {
  display: table-cell;
  position: relative;
  width: 210px;
  vertical-align: top;
  background: #f5f5f6;
  border-right: 1px solid #e2e2e2;
  box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.03);
  z-index: 10;
}
#sidebar > ul {
  margin: 15px 0;
}
#sidebar > ul > li > span {
  display: block;
  padding: 18px 33px;
  font-size: 18px;
  color: #3b444e;
  font-weight: 600;
  letter-spacing: -0.2px;
}
#sidebar > ul > li > ul {
  margin-bottom: 30px;
}
#sidebar > ul > li > ul > li > a {
  display: block;
  padding: 15px 45px;
  font-size: 15px;
  font-weight: 600;
  color: #3b444e;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}
#sidebar > ul > li > ul > li > a:hover {
  background: #e9ebed;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}
#sidebar > ul > li > ul > li.on > a {
  color: #fff;
  background: #01a59c;
}

#footer {
  position: relative;
  height: 200px;
  background: #2c353e;
}

#contents {
  display: table-cell;
  position: relative;
  padding: 15px;
  vertical-align: top;
  background: #eaecee;
  z-index: 20;
}

.in-box {
  min-height: 900px;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.con-header {
  position: relative;
  padding: 0;
  height: 80px;
  background: #2c353e;
}
.con-header h2 {
  display: inline-block;
  margin: 30px 20px 0 60px;
  font-size: 20px;
  font-weight: normal;
  color: #fff;
  letter-spacing: -0.8px;
}
.con-header .location {
  display: inline-block;
  vertical-align: baseline;
}
.con-header .location li {
  display: inline-block;
  color: #fff;
  opacity: 0.8;
}
.con-header .location li:after {
  content: "";
  display: inline-block;
  margin: 0 2px 1px 6px;
  width: 4px;
  height: 7px;
  background: url(../images/ic_ar.png) no-repeat;
  opacity: 1;
}
.con-header .location li:last-child:after {
  display: none;
}
.con-header .location li:last-child {
  opacity: 1;
}
.con-header .right {
  position: absolute;
  top: 25px;
  right: 55px;
}
.con-header .right .search a:hover + input,
.con-header .right .search input:hover,
.con-header .right .search input:focus,
.con-header .right .search input:active {
  background: #2c353e;
}

.con-body {
  padding: 40px 60px;
}
.form .bootstrap-tagsinput {
  margin-bottom: 10px;
  min-width: 600px;
}
.form dt {
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 15px;
  color: #3b444e;
}
.form dd + dt {
  margin-top: 40px;
}
.form dd + dd {
  margin-top: 30px;
}
.form dd .mdc-form-field {
  margin: 10px 50px 10px 0;
}
.form dd .mdc-form-field:last-child {
  margin-right: 10px;
}
.form + .form {
  margin-top: 50px;
}
.form + h3.subtitle {
  margin-top: 50px;
}
.form .file-btn {
  position: absolute;
  top: -34px;
  left: 140px;
}
.form .img-poster {
  margin-top: 15px;
  width: 142px;
  height: 182px;
  background-color: #fafafa;
  border: 1px solid #ddd;
}
.form .img-poster img {
  width: 140px;
  height: 180px;
}
.form .mdc-text-field {
  width: 600px;
}
.form.block {
  display: block !important;
  padding-top: 46px;
  border-top: 1px solid #7cc5b8;
}
.form.block:first-child {
  padding-top: 0;
  border-top: none;
}
.form .t1 {
  font-size: 15px;
  font-weight: 600;
  color: #01a59c;
}
.form-hr {
  margin-top: 10px;
  margin-bottom: 10px;
  white-space: nowrap;
  font-size: 20px;
}
.form-hr > div {
  display: inline-block;
  margin-right: 10px;
  vertical-align: top;
}
.form-hr .title {
  height: 26px;
  font-weight: 600;
  font-size: 15px;
  color: #3b444e;
}
.form-hr table {
  border: 2px solid #444444;
  border-collapse: collapse;
}
.form-hr table th {
  border: 2px solid #444444;
  font-size: 25px;
  text-align: center;
  padding: 13px 0px;
}
.form-hr table td {
  border: 2px solid #444444;
  font-size: 25px;
  text-align: center;
  white-space: initial;
}
.match-print {
  margin-top: 10px;
  margin-bottom: 20px;
}
.divided {
  padding: 10px 0;
}
.divided + .divided .form-hr .title {
  display: none;
}
.form-hr + .form-hr .title {
  display: none;
}
.divided + .divided .form-hr .txt-valid {
  display: none;
}
.form-hr + .form-hr .txt-valid {
  display: none;
}
.form-hr .d-block + .d-block {
  margin-top: 30px;
}
.form-hr .d-block select {
  width: 100%;
  height: 40px;
  border: 1px solid #ddd;
}
.divided input,
select {
  border-color: #eee;
}
.divided:nth-child(odd) {
  background: #f9f9f9;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.divided:nth-child(odd) input {
  background: #f9f9f9;
  border-color: #eee;
}
.pop-con .form dd + dd {
  margin-top: 5px;
}
.hori-radio-wrap{
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 40px;
}

.form dt .txt-valid {
  display: inline-block;
  margin-left: 20px;
  font-weight: normal;
}

.form.search-wrap {
  margin-bottom: 50px;
  padding: 10px 20px 15px;
  background: #f6fffd;
}

.form.search-wrap.all-game-table{
	display:flex;
	flex-direction:column;	
}
@media all and (min-width:768px) {
 .form.search-wrap.all-game-table{
	  display:flex;
	  flex-direction:row;
  }
}

.form.search-wrap dt {
  display: inline-block;
  margin: 10px 0;
  min-width: 80px;
  vertical-align: middle;
}
.form.search-wrap dd {
  display: inline-block;
  margin-right: 50px;
}
.form.search-wrap dt.dt-block {
  display: block;
  margin: 16px 0 3px;
}
.form.search-wrap dd.dd-block {
  display: block;
  margin: -30px 0 0 80px;
}
.form.search-wrap dd .btn-active {
  height: 32px;
  line-height: 30px;
  font-size: 14px;
}

.play-list .item {
  position: relative;
  padding: 15px 0;
  border-bottom: 1px solid #e4e4e4;
}
.play-list .item .img-poster {
  display: inline-block;
  position: relative;
  width: 142px;
  height: 182px;
  background-color: #fafafa;
  border: 1px solid #ddd;
}
.play-list .item .img-poster img {
  width: 140px;
  height: 180px;
}
.play-list .item .p-tag {
  position: absolute;
  top: 10px;
  left: 0;
  width: 70px;
  height: 28px;
  line-height: 27px;
  padding-left: 5px;
  font-weight: 600;
  font-size: 14px;
  border-radius: 0 15px 15px 0;
}
.play-list .item.expected .p-tag {
  color: #ff4545;
  background: #fffdc3;
}
.play-list .item.completion .p-tag {
  color: #fff;
  background: #01a59c;
}
.play-list .item .txt-wrap {
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin: 10px 0 0 20px;
  max-width: 34%;
  z-index: 2;
}
.play-list .item .txt-wrap .title {
  display: block;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 600;
  color: #111;
  line-height: 22px;
}
.play-list .item .txt-wrap .place {
  margin-bottom: 5px;
  font-size: 15px;
  font-weight: 600;
  color: #293039;
}
.play-list .item .txt-wrap .print-btns {
  margin-top: 12px;
}
.play-list .item .txt-wrap .print-btns > a {
  display: inline-block;
  margin-right: 2px;
  padding: 0 10px;
  height: 30px;
  line-height: 28px;
  font-size: 14px;
  font-weight: 600;
  color: #293039;
  letter-spacing: -0.5px;
  border: 1px solid #999;
}
.play-list .item .txt-wrap .date {
  margin-bottom: 5px;
  font-size: 15px;
  font-weight: 600;
  color: #3b444e;
}
.play-list .item .txt-wrap .etc {
  font-size: 13px;
  color: #3b444e;
  line-height: initial;
}
.play-list .item .process-wrap {
  position: absolute;
  top: 0;
  left: 53%;
  width: 50%;
}
.play-list .item .process-wrap li .txt {
  font-size: 13px;
}
.play-list .item.completion .process-wrap li.active .bar .pt + span {
  background: #f7f7f7;
}
.play-list .item .btn-wrap {
  position: absolute;
  left: 564px;
  bottom: 30px;
  padding: 0;
}
.play-list .item .btn-wrap .btn {
  width: 100px;
}

.vouvher-select label { 
  font-size: 16px;
}
.vouvher-select label span { 
  display: inline-block;
  margin: -1px 0 0px 2px;
  vertical-align: top;
}
.vouvher-select .sel-group {
  position: relative;
  margin: 10px 0;
}
.vouvher-select .sel-group .mdc-form-field {
  position: absolute;
  top: -1px;
  right: 24px;  
}
.vouvher-select .sel-group .mdc-form-field label {
  cursor: pointer;
  font-size: 14px; 
}
.vouvher-select .sel-group .mdc-form-field label span {
  margin: 0 0 0px 2px;
}
.vouvher-select .sel-group .field {
  margin: 12px 20px;
}
.vouvher-select .sel-group .field input {
  text-align: center;
}
.vouvher-select .sel-group p {
  margin: 0 20px;
  font-size: 14px;
  line-height: 1.5;
  color: #555;
}
.vouvher-select .sel-group-sub {
  margin: 15px 20px 40px;
  padding: 10px;
  background: #fafafa;
  border: 1px solid #eee;
}
.vouvher-select .sel-group-sub label {
  margin: 0 100px 0 20px;
  font-size: 14px;
}
.vouvher-select .sel-group-sub label span { 
  margin: 0 0 0px 2px;
}
.voucher-print > ul:after {
  content: "";
  display: block;
  clear: both;
}
.voucher-print > ul > li {
  position: relative;
  float: left;
  width: 50%;
  height: 171px;
}
.voucher-print > ul > li:nth-child(12n+11),
.voucher-print > ul > li:nth-child(12n+12) {
  margin-bottom: 20px;
}
.voucher-print > ul > li .img-area {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.voucher-print > ul > li .img-area img {
  width: 100%;
  height: 100%;
}
.voucher-print > ul > li .text-area {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  padding: 10px 50px;
  font-size: 20px;
  z-index: 2;
}
.voucher-print > ul > li .text-area .t1 {
  width: 100%;
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.2;
}
.voucher-print > ul > li .text-area .t2 {
  width: 100%;
  font-size: 14px;
}
.voucher-print > ul > li .text-area .t2 + .t2 {
  margin-top: 5px;
}
.voucher-print > ul > li .text-area .t3 {
  width: 100%;
  margin: 5px 0;
  font-size: 34px;
  font-weight: 600;
  color: #000;
}
.voucher-print > ul > li .text-area .t4 {
  width: 100%;
  font-size: 12px;
  color: #555;
  line-height: 1.2;
}

.block-more {
  position: relative;
  margin: 30px 0 0;
  min-height: 35px;
  text-align: right;
}
.block-more a {
  display: inline-block;
}
.block-more a i.plus {
  display: inline-block;
  width: 35px;
  height: 35px;
  vertical-align: middle;
  background: #01a59c url(../images/ic_plus.png) no-repeat center;
    border-radius: 50%;
}
.block-more a span {
  display: inline-block;
  margin-left: 8px;
  font-size: 14px;
  color: #555;
  vertical-align: middle;
}
.block-more .br {
  position: absolute;
  top: 18px;
  left: 0;
  right: 144px;
  height: 1px;
  background: #01a59c;
}
.a-more {
  display: inline-block;
  vertical-align: top;
  margin: 12px 0 0 20px;
}
.a-more i.plus {
  display: inline-block;
  margin: 0 5px;
  width: 29px;
  height: 29px;
  vertical-align: middle;
    border-radius: 50%;
  background: #e1e1e1 url(../images/ic_plus_02.png) no-repeat center;
}

.teamgroup .line {
  position: absolute;
  background: #ccc;
}
.teamgroup .line.hori {
  top: 25%;
  right: 0;
  width: 50px;
  height: 1px;
}
.teamgroup .line.vert {
  top: 25%;
  right: 0;
  width: 1px;
  height: 25%;
}
.teamgroup + .teamgroup .line.hori {
  top: inherit;
  bottom: 25%;
  right: 0;
  width: 50px;
  height: 1px;
}
.teamgroup + .teamgroup .line.vert {
  top: inherit;
  bottom: 25%;
  right: 0;
  width: 1px;
  height: 25%;
}
.teamgroup.winner .line {
  background: #63b6fc;
  z-index: 1;
}
.teamgroup.winner .line.hori,
.teamgroup.winner .line.hori {
  height: 2px;
}
.teamgroup.winner .line.vert,
.teamgroup.winner .line.vert {
  width: 2px;
  right: -1px;
}
.teamgroup .score {
  position: absolute;
  top: -20px;
  left: 5px;
  width: 40px;
  text-align: center;
  font-weight: 600;
}

.matches {
  position: relative;
  display: inline-block;
  margin: 10px 0;
  width: 325px;
}
.table-wrap.type4 .matches {
  width: 450px;
}
.matches-2x {
  display: inline-block;
  width: 375px;
}
.table-wrap.type4 .matches-2x {
  width: 500px;
}
.line-2x {
  position: absolute;
  background: #ccc;
}
.line-2x.hori {
  top: 50%;
  right: -50px;
  width: 51px;
  height: 1px;
}
.matches + .matches .line-2x.hori {
  top: inherit;
  bottom: 50%;
  right: -50px;
  width: 50px;
  height: 1px;
}
.teamgroup.winner .line-2x {
  background: #63b6fc;
  z-index: 1;
}
.teamgroup.winner .line-2x.hori {
  height: 2px;
}

.matches .select-list {
  position: relative;
  display: inline-block;
  margin: 3px 0;
  padding: 5px 10px;
  width: 275px;
  border: 2px solid #b7daf7;
  border-radius: 3px;
}
.table-wrap.type4 .matches .select-list {
  width: 400px;
}
.matches .winner .select-list {
  border: 2px solid #63b6fc;
}
.matches .select-list .list-btn {
  position: relative;
  display: block;
  padding-right: 10px;
  background: url(../images/ic_sel_03.png) no-repeat right 8px;
  white-space: nowrap;
}
.matches .select-list .team {
  display: inline-block;
  width: 116px;
  font-size: 15px;
  color: #111;
  font-weight: 600;
  vertical-align: top;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.table-wrap.type4 .matches .select-list .team {
  width: 190px;
}
.matches .select-list .name {
  display: inline-block;
  width: 58px;
  font-size: 15px;
  color: #333;
  font-weight: normal;
  text-align: center;
  vertical-align: top;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.table-wrap.type4 .matches .select-list .name {
  width: 68px;
}
.matches .select-list.active .list-btn {
  background-position: right -88px;
}
.matches .select-list .list-wrap {
  display: none;
  position: absolute;
  top: 32px;
  left: -2px;
  right: -2px;
  background: #fff;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.03);
  z-index: 2;
}
.matches .select-list.active .list-wrap {
  display: block;
  border: 1px solid #ccc;
}
.matches .select-list .list-wrap li a {
  display: block;
  padding: 6px 11px;
  font-size: 15px;
  color: #111;
  white-space: nowrap;
  border-top: 1px solid #eee;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.matches .select-list .list-wrap li a:hover {
  background: #f5f5f5;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.matches .select-list .list-wrap li:first-child a {
  border-top: none;
}
.group1 .matches {
  margin: 10px 0;
}
.group1 .matches .select-list {
  margin: 3px 0;
}
.group2 .matches {
  margin: 0;
}
.group2 .matches .select-list {
  margin: 33px 0;
}
.group3 .matches {
  margin: 0;
}
.group3 .matches .select-list {
  margin: 83px 0;
}
.group4 .matches {
  margin: 0;
}
.group4 .matches .select-list {
  margin: 182px 0;
}
.group5 .matches {
  margin: 0;
}
.group5 .matches .select-list {
  margin: 380px 0;
}
.group6 .matches {
  margin: 0;
}
.group6 .matches .select-list {
  margin: 778px 0;
}

.groupbox {
  margin-bottom: 15px;
  padding: 14px;
  min-width: 740px;
  border: 1px solid #ccc;
}
.groupbox .title {
  margin: 0 0 10px 12px;
  font-size: 17px;
  font-weight: 600;
  color: #111;
}
.groupbox .teamgroup {
  /* display: inline-block; */
  margin: 3px 14px;
  display:initial;
}
.groupbox .matches {
  width: auto;
  margin: 0;
}
.groupbox .matches .select-list {
  padding: 10px 20px;
  width: 325px;
  border-color: #63b6fc;
}
.groupbox .matches .select-list .team {
  width: 128px;
}
.groupbox .matches .select-list .name {
  width: 70px;
}
.groupbox .matches .select-list .list-wrap {
  top: 37px;
}
.groupbox .matches .select-list .list-wrap li a {
  padding: 9px 20px;
}
.groupbox.detail {
  padding: 14px 20px;
  border: none;
  border-bottom: 1px solid #eee;
}
.groupbox.detail .title {
  margin: 0 0 10px 8px;
  font-size: 15px;
  color: #777;
}
.groupbox.detail .teamgroup {
  margin: 3px 6px;
}
.round-wrap {
  white-space: nowrap;
}
.round-wrap .vs {
  display: inline-block;
  vertical-align: middle;
  font-weight: 600;
  font-size: 13px;
}

.court-list li {
  display: inline-block;
  position: relative;
  margin: 0 10px 12px 0;
  width: 205px;
  height: 330px;
}
.court-list li a {
  display: inline-block;
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.court-list li a:hover {
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.court-list li a:hover .box {
  background: #fafafa;
  border: 1px solid #333;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.court-list li .top {
  position: relative;
  height: 40px;
  text-align: center;
}
.court-list li .top .mark {
  position: absolute;
  top: 0;
  left: 0;
  width: 27px;
  height: 27px;
  background: #111;
    border-radius: 50%;
}
.court-list li .top .mark span {
  position: absolute;
  top: 7px;
  left: 7px;
  width: 13px;
  height: 13px;
  background: #fff;
}
.court-list li.playing .top .mark span {
  top: 7px;
  left: 7px;
  width: 13px;
  height: 13px;
  background: #ff0000;
    border-radius: 50%;
}
.court-list li .top .name {
  margin: 0 0 5px 5px;
  font-size: 17px;
  font-weight: 600;
  color: #1c584e;
}
.court-list li .top .name .num {
  font-size: 12px;
  color: #999;
}
.court-list li .top .t1 {
  position: absolute;
  top: 3px;
  right: 0;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #ff0000;
}
.court-list li .top .t2 {
  font-size: 12px;
  font-weight: 600;
  color: #888;
}
.court-list li .box {
  position: relative;
  width: 100%;
  height: 280px;
  border: 1px solid #aaa;
}
.court-list li .box .b-top {
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  height: 100px;
  text-align: center;
}
.court-list li .box .b-middle {
  position: absolute;
  left: 0;
  right: 0;
  top: 45.5%;
  font-size: 24px;
  font-weight: 600;
  color: #aaa;
  text-align: center;
}
.court-list li .box .b-bottom {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  height: 100px;
  text-align: center;
}
.court-list li .box .team {
  margin: 7px 0;
  font-size: 16px;
  color: #888;
}
.court-list li .box .name {
  margin: 7px 0;
  font-size: 16px;
  font-weight: 600;
  color: #111;
}
.court-list li .box .score {
  margin: 12px 0;
  font-family: Arial, sans-serif;
  font-size: 30px;
  font-weight: 600;
  color: #005749;
}

.dl-result {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}
.dl-result dt {
  display: inline-block;
  width: 20%;
  padding: 7px;
  font-size: 15px;
  color: #777;
}
.dl-result dd {
  display: inline-block;
  width: 70%;
  padding: 7px;
  font-size: 15px;
  font-weight: 600;
  color: #333;
}

.partlist {
  margin-bottom: 10px;
}
.partlist li {
  position: relative;
  display: inline-block;
  margin-right: 10px;
}
.partlist li:after {
  content: "";
  position: absolute;
  top: 5px;
  right: -8px;
  width: 1px;
  height: 11px;
  background: #aaa;
}
.partlist li:last-child:after {
  display: none;
}
.partlist li a {
  display: inline-block;
  padding: 2px 5px;
  font-size: 15px;
}
.partlist li.active a {
  font-weight: 600;
  color: #01a59c;
}

/*material-components-web custom */
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input {
  font-weight: 600;
  color: #333;
}
.mdc-floating-label {
  bottom: 15px;
  font-weight: 600;
  font-size: 15px;
  color: #aaa !important;
  z-index: -100;
}
.mdc-text-field .mdc-line-ripple {
  background-color: #01a59c;
}
.mdc-text-field__input {
  font-family: inherit;
}
.mdc-floating-label--float-above {
  font-weight: 600;
  color: #333 !important;
  -webkit-transform: translateY(-170%) scale(0.9);
  transform: translateY(-170%) scale(0.9);
}
.mdc-text-field:not(.mdc-text-field--disabled):not(.mdc-text-field--outlined):not(.mdc-text-field--textarea)
  .mdc-text-field__input {
  border-bottom-color: #ddd;
}
.mdc-text-field:not(.mdc-text-field--disabled):not(.mdc-text-field--outlined):not(.mdc-text-field--textarea)
  .mdc-text-field__input:hover {
  border-bottom-color: #ddd;
}

.mdc-button {
  font-family: inherit;
}
.mdc-button--raised:not(.mdc-ripple-upgraded):focus::before,
.mdc-button--raised.mdc-ripple-upgraded--background-focused::before,
.mdc-button--unelevated:not(.mdc-ripple-upgraded):focus::before,
.mdc-button--unelevated.mdc-ripple-upgraded--background-focused::before {
  transition-duration: 75ms;
  opacity: 0;
}
.mdc-button--raised:disabled,
.mdc-button--unelevated:disabled {
  background-color: rgba(0, 0, 0, 0.1) !important;
  color: rgba(0, 0, 0, 0.38) !important;
}
.mdc-button--raised:disabled {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12) !important;
  border-color: rgba(0, 0, 0, 0.05) !important;
}

.mdc-checkbox__background {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border: 1px solid currentColor;
}
.mdc-checkbox {
  width: 18px;
  height: 18px;
  padding: 9px;
  box-sizing: border-box;
  flex: 0;
}
.mdc-checkbox:before,
.mdc-checkbox:after,
.mdc-checkbox__background::before {
  display: none;
}
.mdc-form-field {
  font-family: inherit;
}
.mdc-form-field label {
  padding-left: 6px;
  cursor: pointer;
  font-size: 15px;
  letter-spacing: -0.5px;
}
.mdc-checkbox__native-control:enabled:checked ~ .mdc-checkbox__background,
.mdc-checkbox__native-control:enabled:indeterminate
  ~ .mdc-checkbox__background {
  border-color: #01a59c;
  border-color: var(--mdc-theme-secondary, #01a59c);
  background-color: #01a59c;
  background-color: var(--mdc-theme-secondary, #01a59c);
}

.mdc-radio__background {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.mdc-radio {
  width: 16px;
  height: 16px;
  padding: 8px;
  box-sizing: border-box;
  flex: 0;
}
.mdc-radio::before,
.mdc-radio::after,
.mdc-radio .mdc-radio__background::before {
  display: none;
}
.mdc-radio
  .mdc-radio__native-control:enabled:not(:checked)
  + .mdc-radio__background
  .mdc-radio__outer-circle {
  border-color: #18ada5;
}
.mdc-radio
  .mdc-radio__native-control:enabled:checked
  + .mdc-radio__background
  .mdc-radio__outer-circle {
  border-color: #18ada5;
  border-color: var(--mdc-theme-secondary, #18ada5);
}
.mdc-radio
  .mdc-radio__native-control:enabled
  + .mdc-radio__background
  .mdc-radio__inner-circle {
  background-color: #007d76;
  background-color: var(--mdc-theme-secondary, #007d76);
}

/* tooltip */
.tooltip {
  display: inline-block;
  vertical-align: middle;
  margin: 0 0 1px;
}
.tooltip-cont {
  display: none;
  position: absolute;
  z-index: 100;
  padding: 10px;
  font-size: 12px;
  line-height: 1.425;
  font-weight: normal;
  text-align: left;
  color: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  background: #01a59c;
  border-radius: 10px;
}
.tooltip-cont .tooltip-arrow {
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  z-index: 101;
}
.tooltip-cont .tooltip-arrow:after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  z-index: 102;
}
.tooltip-cont p.description {
  padding-left: 29px;
  vertical-align: middle;
  letter-spacing: -0.2px;
  background: url(../images/ic_noti.png) no-repeat 5px 0;
}
.tooltip-cont.top .tooltip-arrow {
  bottom: -8px;
  left: 50%;
  margin-left: -8px;
  border-width: 8px 8px 0 8px;
  border-color: #01a59c transparent transparent transparent;
}
.tooltip-cont.bottom .tooltip-arrow {
  top: -8px;
  left: 50%;
  margin-left: -8px;
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent #01a59c transparent;
}
.tooltip-cont.right .tooltip-arrow {
  top: 50%;
  margin-top: -8px;
  left: -8px;
  border-width: 8px 8px 8px 0;
  border-color: transparent #01a59c transparent transparent;
}
.tooltip-cont.left .tooltip-arrow {
  top: 50%;
  margin-top: -8px;
  right: -8px;
  border-width: 8px 0 8px 8px;
  border-color: transparent transparent transparent #01a59c;
}

.tooltip-cont.top .tooltip-arrow:after {
  top: -8px;
  left: -7px;
  border-width: 7px 7px 0 7px;
  border-color: #01a59c transparent transparent transparent;
}
.tooltip-cont.bottom .tooltip-arrow:after {
  top: 1px;
  left: -7px;
  border-width: 0 7px 7px 7px;
  border-color: transparent transparent #01a59c transparent;
}
.tooltip-cont.right .tooltip-arrow:after {
  top: -7px;
  left: 1px;
  border-width: 7px 7px 7px 0;
  border-color: transparent #01a59c transparent transparent;
}
.tooltip-cont.left .tooltip-arrow:after {
  top: -7px;
  right: 1px;
  border-width: 7px 0 7px 7px;
  border-color: transparent transparent transparent #01a59c;
}

.tooltip-cont.left .tooltip-arrow.top,
.tooltip-cont.right .tooltip-arrow.top {
  top: 8px;
  bottom: auto;
  margin: 0;
}
.tooltip-cont.left .tooltip-arrow.bottom,
.tooltip-cont.right .tooltip-arrow.bottom {
  top: auto;
  bottom: 8px;
  margin: 0;
}
.tooltip-cont.top .tooltip-arrow.left,
.tooltip-cont.bottom .tooltip-arrow.left {
  left: 8px;
  right: auto;
  margin: 0;
}
.tooltip-cont.top .tooltip-arrow.right,
.tooltip-cont.bottom .tooltip-arrow.right {
  left: auto;
  right: 8px;
  margin: 0;
}

.tooltip-cont.type2 {
  color: #01a59c;
  background: #fff;
  border: 2px solid #01a59c;
}
.tooltip-cont.type2 p.description {
  background: url(../images/ic_noti_02.png) no-repeat 5px 0;
}
.tooltip-cont.type2.top .tooltip-arrow {
  bottom: -9px;
  left: 50%;
  margin-left: -8px;
  border-width: 8px 8px 0 8px;
  border-color: #01a59c transparent transparent transparent;
}
.tooltip-cont.type2.bottom .tooltip-arrow {
  top: -9px;
  left: 50%;
  margin-left: -8px;
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent #01a59c transparent;
}
.tooltip-cont.type2.right .tooltip-arrow {
  top: 50%;
  margin-top: -8px;
  left: -9px;
  border-width: 8px 8px 8px 0;
  border-color: transparent #01a59c transparent transparent;
}
.tooltip-cont.type2.left .tooltip-arrow {
  top: 50%;
  margin-top: -8px;
  right: -9px;
  border-width: 8px 0 8px 8px;
  border-color: transparent transparent transparent #01a59c;
}

.tooltip-cont.type2.top .tooltip-arrow:after {
  top: -10px;
  left: -7px;
  border-width: 7px 7px 0 7px;
  border-color: #fff transparent transparent transparent;
}
.tooltip-cont.type2.bottom .tooltip-arrow:after {
  top: 2px;
  left: -7px;
  border-width: 0 7px 7px 7px;
  border-color: transparent transparent #fff transparent;
}
.tooltip-cont.type2.right .tooltip-arrow:after {
  top: -9px;
  left: 1px;
  border-width: 7px 7px 7px 0;
  border-color: transparent #fff transparent transparent;
}
.tooltip-cont.type2.left .tooltip-arrow:after {
  top: -9px;
  right: 1px;
  border-width: 7px 0 7px 7px;
  border-color: transparent transparent transparent #fff;
}

/* tab */
.nav-wrap {
  margin: 0 0 10px;
  border-bottom: 1px solid #ccc;
}
.nav-wrap.type2 {
  margin: -20px -60px 20px;
  padding: 0 60px 20px;
}
.nav-wrap.type3 {
  margin: 0 0 20px;
}
.nav-wrap.type3 .mdc-tab {
  padding: 0 12px;
}
.nav-wrap.type4 {
  position: relative;
  margin: 0 0 20px;
  border-bottom: none;
}
.nav-wrap.type4 .mdc-tab {
  padding: 0 10px;
  width: 110px;
  font-size: 16px;
  letter-spacing: 0;
}
.mdc-tab-bar {
  margin: 0 0 -1px;
}
.mdc-tab {
  min-width: 50px;
  padding: 0 18px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
}
.mdc-tab-bar__indicator {
  height: 4px;
  background: #01a59c;
}
.mdc-tab::before {
  background: none;
}
.mdc-tab::after {
  background: rgba(0, 0, 0, 0.2);
}
/* .mdc-tab--active { color:#097973 !important; } */
.tabs2.mdc-tab-bar {
  height: 34px;
  margin: 5px 0 0 6px;
}
.tabs2 .mdc-tab {
  min-width: 50px;
  min-height: 34px;
  padding: 0 8px;
  font-size: 15px;
}
.tabs2 .mdc-tab-bar__indicator {
  height: 2px;
}

/* join-wrap */
.join .header-top .sub {
  position: absolute;
  top: 29px;
  left: 184px;
  font-size: 16px;
  color: #fff;
  font-weight: 600;
  letter-spacing: -0.2px;
}
#join-wrap {
  min-height: 100%;
  padding: 70px 0;
  background: #e8e8e8;
}
#join-wrap .inner {
  margin: 0 auto;
  padding: 30px 50px;
  width: 980px;
  min-height: 635px;
  background: #fff;
}

.btn-wrap-join {
  display: inline-block;
  margin-left: 20px;
  vertical-align: middle;
}
.btn-wrap-join .btn {
  margin: 0 2px;
  height: 32px;
  line-height: 30px;
  padding: 0 15px;
  color: #fff;
  cursor: pointer;
  outline: none;
  background: #2c353e;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.btn-wrap-join .btn:hover {
  border: 1px solid rgba(255, 255, 255, 0.7);
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.join-box {
  position: relative;
  width: 490px;
  margin: 0 auto 40px;
}
.join-box .header {
  position: relative;
  margin: 0;
  height: 74px;
  padding: 20px;
  background: #2c353e;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
}
.join-box .header:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background: #01a59c;
}
.join-box .header h2 {
  margin: 9px 15px 0;
  font-size: 24px;
  font-weight: normal;
  color: #fff;
  letter-spacing: -0.8px;
}
.join-box .con {
  padding: 25px 40px;
  background: #f4f4f4;
  border: 1px solid #e8e8e8;
  border-top: none;
}
.join-box .form {
  margin-top: 10px;
  padding: 0 40px;
}
.join-box .form .mdc-text-field {
  width: 100%;
}
.join-box .form .mdc-floating-label {
  bottom: 20px;
  font-size: 18px;
}
.join-box .form dd + dd {
  margin-top: 30px;
}
.join-box input[type="text"],
.join-box input[type="password"] {
  font-size: 18px;
}
.join-box
  .mdc-text-field:not(.mdc-text-field--disabled):not(.mdc-text-field--outlined):not(.mdc-text-field--textarea)
  .mdc-text-field__input {
  border-bottom-color: #aaa;
}
.join-box .btn-wrap {
  padding: 40px 0;
}
.join-box h3 {
  position: relative;
  font-size: 18px;
  color: #777;
  text-align: center;
}
.join-box h3 .bl {
  position: absolute;
  top: 7px;
  left: 0;
  width: 35%;
  height: 1px;
  background: #ddd;
}
.join-box h3 .br {
  position: absolute;
  top: 7px;
  right: 0;
  width: 35%;
  height: 1px;
  background: #ddd;
}
.join-box p.txt {
  margin-top: 20px;
  text-align: center;
  color: #888;
  font-size: 13px;
  line-height: 22px;
}
.join-box p + p {
  margin-top: 5px !important;
}
.join-box p.txt2 {
  margin-top: 20px;
  color: #555;
  font-size: 18px;
  line-height: 26px;
}
.join-box p.txt2 .name {
  font-weight: 600;
  color: #111;
}
.join-box p.txt2 .mail {
  display: inline-block;
  margin: 15px 0;
  font-weight: 600;
  border-bottom: 1px solid #999;
}
.join-box .form dt {
  font-size: 18px;
}
.join-box .mdc-form-field label {
  font-size: 16px;
}

/* layer-score */
.layer-score {
  display: none;
  position: absolute;
  top: -160px;
  left: -50px;
  padding: 12px;
  width: 149px;
  height: 149px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background: #01a59c;
  border-radius: 4px;
  z-index: 100;
}
.layer-score .arrow {
  position: absolute;
  bottom: -8px;
  left: 50%;
  margin-left: -8px;
  border-width: 9px 9px 0 9px;
  border-style: solid;
  border-color: #01a59c transparent transparent transparent;
  z-index: 101;
}
.layer-score a {
  display: inline-block;
  float: left;
  width: 23px;
  height: 23px;
  margin: 1px;
  text-align: center;
  font-size: 12px;
  line-height: 20px;
  border: 1px solid #ddd;
  background: #fff;
}
.layer-score a:hover {
  font-weight: 600;
  background: #f1f1f1;
}

/* layer-popup */
.layerPopupDiv1 {
  margin: -260px auto 0;
  width: 800px;
  height: 520px;
}
.layerMatchPdf{
  margin: -420px auto 0;
  width: 1100px;
  height: 800px;
}
.participantPopUp {
  width: 1200px;
  height: 600px;
}
.managementResultTeamScorePopUp {
	top:45%;
	display:inline-block;
	vertical-align:middle;
	width:95%; 
	max-width:1100px;
	height:700px; 
	overflow:auto
}

.managementResultTeamScoreAdvancedPopUp {
	top:45%;
	display:inline-block;
	vertical-align:middle;
	width:95%; 
	max-width:1100px;
	height:700px; 
	overflow:auto
}
.setGameProgressPopUp {
  margin: -380px auto 0;
  width: 800px;
  height: 720px;
}
.resultSetPopUp {
  margin: -300px auto 0;
  width: 700px;
  height: 600px;
}
.createOrgPopUp {
  margin: -320px auto 0;
  width: 650px;
  height: 650px;
}
.memberSearchPopUp {
  margin: -320px auto 0;
  width: 650px;
  height: 500px;
}
.createClubMemberPopUp {
  margin: -340px auto 0;
  width: 650px;
  height: 680px;
}
.modifyClubMemberPopUp {
  margin: -290px auto 0;
  width: 700px;
  height: 580px;
}
.teamResultSetPopUp {
  margin: -380px auto 0;
  width: 800px;
  height: 760px;
}
.resultShowPopUp {
  margin: -380px auto 0;
  width: 800px;
  height: 702px;
}
.printPopupDiv {
  margin: -260px auto 0;
  width: 1100px;
  height: 595px;
}
.teamRegisterPopupDiv {
  margin: -250px auto 0;
  width: 500px;
  height: 500px;
}
.teamMemberSetPopUp {
  margin: -270px auto 0;
  width: 500px;
  height: 530px;
}
.setStdTeamWinPopUp {
	display:inline-block;
	vertical-align: middle;
	width:80%; 
	max-width:1000px;
	height: auto;
	padding-bottom: 100px;
}
.setStdCategoryWinPopUp {
	top:45%;
	display:inline-block;
	vertical-align:middle;
	width:95%; 
	max-width:1100px;
	height:700px; 
	overflow:auto
}
.orgListPopUp {
	display:inline-block;
	vertical-align: middle;
	width:80%; 
	max-width:1000px;
	height: auto;
	padding-bottom: 100px;
}
.setStdTeamLevelupPopUp {
	display:inline-block;
	vertical-align: middle;
	width:80%; 
	max-width:1000px;
	height: auto;
	padding-bottom: 100px;
}
.setStdCategoryLevelupPopUp {
	top:45%;
	display:inline-block;
	vertical-align:middle;
	width:95%; 
	max-width:1100px;
	height:700px; 
	overflow:auto
}
.userInfoPopUp {
	top:45%;
	display:inline-block;
	vertical-align:middle;
	width:95%; 
	max-width:800px;
	height:500px; 
	overflow:auto
}
.setApvPop {
	top:55%;
	display:inline-block;
	vertical-align:middle;
	width:95%; 
	max-width:600px;
	height:300px; 
	overflow:auto
}

/* disable */
.disableDiv {
  pointer-events: none;
  opacity: 0.4;
}

#loading {
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  position: fixed;
  display: block;
  opacity: 0.7;
  background-color: #fff;
  z-index: 1999;
  text-align: center;
}

#loading-image {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2000;
}

.category {
  display: flex;
  justify-content: center;
}



.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}
.page-margin{
  margin-top: 250px;
}
h1.page-margin{
	margin: 120px 0px;
}


.column {
  margin: 150px auto;
  display: flex;
  position:relative;
  justify-content: center;
  flex: 1;
}

.column .group {
  justify-content: center;
  position: absolute;
  font-weight: 600;
  font-size:1.2rem;
  top: -40%;
  left : 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  min-width: 70px;
  padding: 5px 0px;
  text-align: center;
  color: #fff;
  border-radius: 20px;
  background-color: #0064B0;

}
.column > .tri, .ract, .penta {
  position: relative;
  font-size : 1.1rem;
}
.column > .tri .team1 {
  justify-content: center;
  position: absolute;
  display: flex;
  flex-direction: column;
  left: 10px;
  width: 180px;
  top: -50px;
  align-items: center;
}

.column > .tri .team1 > .matchInfo1 {
  justify-content: center;
  position: absolute;
  display: flex;
  flex-direction: column;
  text-align: center;
  left: 20px;
  width: 50px;
  height: 50px;
  top: 120px;
  font-size: 1rem;
  color:#000;
  background-color:#fff;
}
.column > .tri .team1 > .matchInfo2 {
  justify-content: center;
  position: absolute;
  display: flex;
  flex-direction: column;
  text-align: center;
  left: 130px;
  width: 50px;
  height: 50px;
  top: 120px;
  font-size: 1rem;
  color:#000;
  background-color:#fff;
}

.column > .tri .team2 {
  justify-content: center;
  position: absolute;
  display: flex;
  flex-direction: column;
  left: -150px;
  width: 150px;
  top: 200px;
  align-items: center;
}
.column > .tri .team2 > .matchInfo1 {
  justify-content: center;
  position: absolute;
  display: flex;
  flex-direction: column;
  text-align: center;
  left: 240px;
  width: 50px;
  height: 50px;
  top: -30px;
  font-size: 1rem;
  color:#000;
  background-color:#fff;
}

.column > .tri .team3 {
  justify-content: center;
  position: absolute;
  display: flex;
  flex-direction: column;
  left: 200px;
  width: 180px;
  top: 200px;
  align-items: center;
}

.column > .ract .team1 {
  justify-content: center;
  position: absolute;
  display: flex;
  flex-direction: column;
  left: -160px;
  width: 180px;
  top: -30px;
  align-items: center;
}
.column > .ract .team1 > .matchInfo1 {
  justify-content: center;
  position: absolute;
  display: flex;
  flex-direction: column;
  text-align: center;
  left: 135px;
  width: 50px;
  height: 50px;
  top: 100px;
  font-size: 1rem;
  color:#000;
  background-color:#fff;
}
.column > .ract .team1 > .matchInfo2 {
  justify-content: center;
  position: absolute;
  display: flex;
  flex-direction: column;
  text-align: center;
  left: 200px;
  top: 70px;
  width: 50px;
  height: 50px;
  font-size: 1rem;
  color:#000;
  background-color:#fff;
}
.column > .ract .team1 > .matchInfo3 {
  justify-content: center;
  position: absolute;
  display: flex;
  flex-direction: column;
  text-align: center;
  left: 230px;
  top: 5px;
  width: 50px;
  height: 50px;
  font-size: 1rem;
  color:#000;
  background-color:#fff;
}
.column > .ract .team2 {
  justify-content: center;
  position: absolute;
  display: flex;
  flex-direction: column;
  left: -150px;
  width: 180px;
  top: 200px;
  align-items: center;
}
.column > .ract .team2 > .matchInfo1 {
  justify-content: center;
  position: absolute;
  display: flex;
  flex-direction: column;
  text-align: center;
  left: 230px;
  width: 180px;
  top: -30px;
  width: 50px;
  height: 50px;
  font-size: 1rem;
  color:#000;
  background-color:#fff;
}
.teamName{
  display:flex;
  justify-content: center;
  text-align: center;
  width:130px;
  padding-bottom:5px;
  margin-bottom:3px;
  padding-top:5px;
  border-radius: 10px;
  background-color: #000;
  color: #fff;
}
.column > .ract .team2 > .matchInfo2 {
  justify-content: center;
  position: absolute;
  display: flex;
  flex-direction: column;
  text-align: center;
  left: 170px;
  width: 180px;
  top: -70px;
  width: 50px;
  height: 50px;
  font-size: 1rem;
  color:#000;
  background-color:#fff;
}

.column > .ract .team3 {
  justify-content: center;
  position: absolute;
  display: flex;
  flex-direction: column;
  left: 170px;
  width: 180px;
  top: 200px;
  align-items: center;
}
.column > .ract .team3 > .matchInfo1 {
  justify-content: center;
  position: absolute;
  display: flex;
  flex-direction: column;
  text-align: center;
  top:-130px;
  left:0px;
  width: 50px;
  height: 50px;
  font-size: 1rem;
  color:#000;
  background-color:#fff;
}

.column > .ract .team4 {
  justify-content: center;
  position: absolute;
  display: flex;
  flex-direction: column;
  left: 170px;
  width: 180px;
  top: -30px;
  align-items: center;
}

.column > .penta .team1 {
  justify-content: center;
  position: absolute;
  display: flex;
  flex-direction: column;
  left: 15px;
  width: 180px;
  top: -45px;
  align-items: center;
}
.column > .penta .team1 > .matchInfo1 {
  justify-content: center;
  position: absolute;
  display: flex;
  flex-direction: column;
  text-align: center;
  top:40px;
  left:-30px;
  width: 50px;
  height: 50px;
  font-size: 1rem;
  color:#000;
  background-color:#fff;

}
.column > .penta .team1 > .matchInfo2 {
  justify-content: center;
  position: absolute;
  display: flex;
  flex-direction: column;
  text-align: center;
  left: 50px;
  width: 50px;
  height: 50px;
  top: 70px;
  font-size: 1rem;
  color:#000;
  background-color:#fff;
}
.column > .penta .team1 > .matchInfo3 {
  justify-content: center;
  position: absolute;
  display: flex;
  flex-direction: column;
  text-align: center;
  left: 130px;
  width: 50px;
  height: 50px;
  top: 190px;
  font-size: 1rem;
  color:#000;
  background-color:#fff;
}
.column > .penta .team1 > .matchInfo4 {
  justify-content: center;
  position: absolute;
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 50px;
  height: 50px;
  left: 160px;
  top: 40px;
  font-size: 1rem;
  color:#000;
  background-color:#fff;
}
.column > .penta .team2 {
  justify-content: center;
  position: absolute;
  display: flex;
  flex-direction: column;
  left: -160px;
  width: 180px;
  top: 70px;
  align-items: center;
}
.column > .penta .team2 > .matchInfo1 {
  justify-content: center;
  position: absolute;
  display: flex;
  flex-direction: column;
  text-align: center;
  height: 50px;
  left: 115px;
  width: 50px;
  top: 60px;
  font-size: 1rem;
  color:#000;
  background-color:#fff;
}
.column > .penta .team2 > .matchInfo2 {
  justify-content: center;
  position: absolute;
  display: flex;
  flex-direction: column;
  text-align: center;
  left: 170px;
  top: 20px;
  width: 50px;
  height: 50px;
  font-size: 1rem;
  color:#000;
  background-color:#fff;
}
.column > .penta .team2 > .matchInfo3 {
  justify-content: center;
  position: absolute;
  display: flex;
  flex-direction: column;
  text-align: center;
  left: 300px;
  top: -10px;
  width: 50px;
  height: 50px;
  font-size: 1rem;
  color:#000;
  background-color:#fff;
}

.column > .penta .team3 {
  justify-content: center;
  position: absolute;
  display: flex;
  flex-direction: column;
  left: -120px;
  width: 180px;
  top: 220px;
  align-items: center;
}
.column > .penta .team3 > .matchInfo1 {
  justify-content: center;
  position: absolute;
  display: flex;
  flex-direction: column;
  text-align: center;
  left: 210px;
  top: 0px;
  width: 50px;
  height: 50px;
  font-size: 1rem;
  color:#000;
  background-color:#fff;
}
.column > .penta .team3 > .matchInfo2 {
  justify-content: center;
  position: absolute;
  display: flex;
  flex-direction: column;
  text-align: center;
  left: 180px;
  top: -60px;
  width: 50px;
  height: 50px;
  font-size: 1rem;
  color:#000;
  background-color:#fff;
}


.column > .penta .team4 {
  justify-content: center;
  position: absolute;
  display: flex;
  flex-direction: column;
  left: 150px;
  width: 180px;
  top: 220px;
  align-items: center;
}
.column > .penta .team4 > .matchInfo1 {
  justify-content: center;
  position: absolute;
  display: flex;
  flex-direction: column;
  text-align: center;
  left: 60px;
  top: -80px;
  width: 50px;
  height: 50px;
  font-size: 1rem;
  color:#000;
  background-color:#fff;
}

.column > .penta .team5 {
  justify-content: center;
  position: absolute;
  display: flex;
  flex-direction: column;
  left: 200px;
  width: 180px;
  top: 70px;
  align-items: center;
}


.column > .tri .playerName {
  text-align: center;
}
.column > .tri .teamName {
  text-align: center;
  font-weight: 600;
}
.column > .ract .playerName {
  text-align: center;
}
.column > .ract .teamName {
  text-align: center;
  font-weight: 600;
}
.column > .penta .playerName {
  text-align: center;
}
.column > .penta .teamName {
  text-align: center;
  font-weight: 600;
}
/* .columns > .ract {
  display: flex;
}
.columns > .penta {
  display: flex;
} */
@import 'https://fonts.googleapis.com/css?family=Roboto+Slab:400,700';

.bracketWrap{
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center
}
.bracketWrap.new {
  display: block;
}
.bracketWrap.new .matchup-title > div {
  flex: 1;
  text-align: center;
}
.bracketWrap.new .matchup-title > div:first-child {
  flex-basis: 80px;
}
.bracketWrap.new .bracket {
  margin: 20px auto 50px;
}
.bracket {
  margin: 50px auto;
  display: flex;
  justify-content: center;
  white-space: nowrap;
  font-size: 0;
  overflow: hidden;
}
.bracket .round {
  /* display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; */
}
.bracket .round .winners > div {
  display: inline-block;
  vertical-align: middle;
}
.bracket .round .winners > div.matchups .matchup:last-child {
  margin-bottom: 0 !important;
}
.matchup-title {
  display: flex;
  justify-content: center;
  align-items: center;
}


/* team8 */
.bracket .round.team8 { margin-top: -10px; }
.bracket .round.team8 .winners > div.matchups .matchup .participants .participant { height: 40px; padding-top: 26px; }

/* team4 */
.bracket .round.team4 { margin-top: -30px; }
.bracket .round.team4 .winners > div.matchups .matchup .participants .participant { height: 80px; padding-top: 66px; }

/* team2 */
.bracket .round.team2 { margin-top: -70px; }
.bracket .round.team2 .winners > div.matchups .matchup .participants .participant { height: 160px; padding-top: 146px; }

/* team1 */
.bracket .round.team1 { margin-top: -150px; }
.bracket .round.team1 .winners > div.matchups .matchup .participants .participant { height: 320px; padding-top: 306px; }

/* team32 + team16 */
.bracket .team32 + .team16 { margin-top: -10px; }
.bracket .team32 + .team16 .winners > div.matchups .matchup .participants .participant { height: 40px; padding-top: 26px; }

/* team32 + team16 + team8 */
.bracket .team32 + .team16 + .team8 { margin-top: -30px; }
.bracket .team32 + .team16 + .team8 .winners > div.matchups .matchup .participants .participant { height: 80px; padding-top: 66px; }

/* team32 + team16 + team8 + .team4 */
.bracket .team32 + .team16 + .team8 + .team4 { margin-top: -70px; }
.bracket .team32 + .team16 + .team8 + .team4 .winners > div.matchups .matchup .participants .participant { height: 160px; padding-top: 146px; }

/* team32 + team16 + team8 + .team4 + .team2 */
.bracket .team32 + .team16 + .team8 + .team4 + .team2 { margin-top: -150px; }
.bracket .team32 + .team16 + .team8 + .team4 + .team2 .winners > div.matchups .matchup .participants .participant { height: 320px; padding-top: 306px; }

/* team32 + team16 + .team8 + .team4 + .team2 + .team1 */
.bracket .team32 + .team16 + .team8 + .team4 + .team2 + .team1 { margin-top: -310px; }
.bracket .team32 + .team16 + .team8 + .team4 + .team2 + .team1 .winners > div.matchups .matchup .participants .participant { height: 640px; padding-top: 626px; }

/* team64 + team32 */
.bracket .team64 + .team32 { margin-top: -10px; }
.bracket .team64 + .team32 .winners > div.matchups .matchup .participants .participant { height: 40px; padding-top: 26px; }

/* team64 + team32 + team16 */
.bracket .team64 + .team32 + .team16 { margin-top: -30px; }
.bracket .team64 + .team32 + .team16 .winners > div.matchups .matchup .participants .participant { height: 80px; padding-top: 66px; }

/* team64 + team32 + team16 + .team8 */
.bracket .team64 + .team32 + .team16 + .team8 { margin-top: -70px; }
.bracket .team64 + .team32 + .team16 + .team8 .winners > div.matchups .matchup .participants .participant { height: 160px; padding-top: 146px; }

/* team64 + team32 + team16 + .team8 + .team4 */
.bracket .team64 + .team32 + .team16 + .team8 + .team4 { margin-top: -150px; }
.bracket .team64 + .team32 + .team16 + .team8 + .team4 .winners > div.matchups .matchup .participants .participant { height: 320px; padding-top: 306px; }

/* team64 + team32 + team16 + .team8 + .team4 + .team2 */
.bracket .team64 + .team32 + .team16 + .team8 + .team4 + .team2 { margin-top: -310px; }
.bracket .team64 + .team32 + .team16 + .team8 + .team4 + .team2 .winners > div.matchups .matchup .participants .participant { height: 640px; padding-top: 626px; }

/* team64 + team32 + team16 + .team8 + .team4 + .team2 + .team1 */
.bracket .team64 + .team32 + .team16 + .team8 + .team4 + .team2 + .team1 { margin-top: -630px; }
.bracket .team64 + .team32 + .team16 + .team8 + .team4 + .team2 + .team1 .winners > div.matchups .matchup .participants .participant { height: 1280px; padding-top: 1266px; }

@media print { 
  .bracket {
    /* transform: scale(0.3);
    transform-origin: top; */
  }
}

.bracket .round:first-child .winners > div.matchups .matchup .participants .participant {
  width: 200px;
}
.bracket .round .winners > div.matchups .matchup .participants .participant {
  position: relative;
  width: 120px;
  height: 20px;
  padding-top: 6px;
  border-bottom: 1px solid #333;
}
.bracket .round .winners > div.matchups .matchup .participants .participant + .participant {
  border-right: 1px solid #333;
}
.bracket .round .winners > div.matchups .matchup .participants .participant.winner {
  color: #60c645;
  border-color: #60c645;
}
.bracket .round .winners > div.matchups .matchup .participants .participant.loser {
  color: #dc563f;
  border-color: #dc563f;
}
.bracket .round .winners > div.matchups .matchup .participants .participant:not(:last-child) {
  border-bottom: 1px solid #333;
}
.bracket .round .winners > div.matchups .matchup .participants .participant span {
  margin: 0 2px;
  font-size: 11px;
  font-weight: 600;
}
.bracket .round .winners > div.matchups .matchup .participants {
  position: relative;
}
.bracket .round .winners > div.matchups .matchup .participants .num {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #0064B0;
}
.bracket .round .winners > div.matchups .matchup .participants .num > div {
  height: 25%;
  padding: 4px 3px;
}
.bracket .round .winners > div.connector.filled .line, .bracket .round .winners > div.connector.filled.bottom .merger:after, .bracket .round .winners > div.connector.filled.top .merger:before {
  border-color: #60c645;
}
.bracket .round .winners > div.connector .line, .bracket .round .winners > div.connector .merger {
  box-sizing: border-box;
  width: 1rem;
  display: inline-block;
  vertical-align: top;
}
.bracket .round .winners > div.connector .line {
  border-bottom: 1px solid #333;
  height: 1.5rem;
}
.bracket .round .winners > div.connector .merger {
  position: relative;
  height: 60px;
  margin-top: 30px;
}
.bracket .round .winners > div.connector .merger:before, .bracket .round .winners > div.connector .merger:after {
  content: "";
  display: flex;
  box-sizing: border-box;
  width: 100%;
  height: 50%;
  border: 0 solid;
  border-color: #333;
}
.bracket .round .winners > div.connector .merger:before {
  border-right-width: thin;
  border-top-width: thin;
  margin-bottom: -2rem;
}
.bracket .round .winners > div.connector .merger:after {
  margin-top: 2rem;
  border-right-width: thin;
  border-bottom-width: thin;
}
.bracket .round.team8 .winners  > div.connector .merger {
  margin-top:1rem;
  height: 4rem;
}
.bracket .round.team8 .winners > div.connector .line { height: 3rem; }
.bracket .round.team4 .winners > div.connector .merger:before {
  border-right-width: thin;
  border-top-width: thin;
  margin-bottom:-4rem;
}
.bracket .round.team4 .winners > div.connector .merger:after {
  margin-top:4rem;
  border-right-width: thin;
  border-bottom-width: thin;
}
.bracket .round.team2 .winners > div.connector .merger:before {
  border-right-width: thin;
  border-top-width: thin;
  margin-bottom:-1.5rem;
}
.bracket .round.team2 .winners > div.connector .merger:after {
  margin-top:1.5rem;
  border-right-width: thin;
  border-bottom-width: thin;
}
.bracket .round.team4 .winners .connector .merger {
  height: 8rem;
  margin-top: 2rem;
}
.bracket .round.team4 .winners .connector .line {
  height: 6rem;
}
.bracket .round.team2 .winners .connector .merger {
  height: 3rem;
}
.bracket .round.team2 .winners .connector .line {
  height: 1.5rem;
}

.placeholderDrag {background: red;}
#popover-con{
	height:auto;
	overflow: -webkit-paged-y
}

.group-ext #header .header-top .right .search { margin-right:0; }
.group-ext #header .header-sub ul { padding:0 36px; }
.group-ext #header .header-sub ul li { margin-right:30px; }
.group-ext #header .header-sub ul li a { display:inline-block; padding:0 15px; height:46px; line-height:44px; }

.box-multilist { margin:12px 0; height:122px; border:1px solid #ddd; overflow:auto; }
.box-multilist li { position:relative; padding:5px 40px 5px 10px; font-size:14px; font-weight:600; }
.box-multilist li .delete { position:absolute; top:2px; right:10px; width:20px; height:20px; background:url(../images/ic_x.png) no-repeat center; }

.enroll-wrap { }
.enroll-wrap .subtitle { display:inline-block; width:25%; }
.enroll-wrap .cont { display:inline-block; width:70%; font-size:15px; }
.enroll-wrap dl { height:200px; overflow:auto; }
.enroll-wrap dt { display:inline-block; width:15%; font-size:14px; font-weight:600; }
.enroll-wrap dd { display:inline-block; font-size:14px; }
.enroll-wrap dd.d1 { width:10%; }
.enroll-wrap dd.d2 { width:36%; }
.enroll-wrap dd select { width:140px; font-size:14px; }

.enroll-multi .item { margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid #f1f1f1; }
.enroll-multi .title { font-size:15px; font-weight:600; }
.enroll-multi table thead th { font-size:12px; font-weight:normal; }
.enroll-multi table tbody th { font-size:15px; font-weight:normal; }
.enroll-multi table tbody td { padding:8px; text-align:center; }
.enroll-multi table tbody td input { text-align:center; }

.team-mark { position:relative; display:inline-block; padding:0 25px; }
.team-mark:after { content:""; display:block; position:absolute; width:17px; height:17px; top:1px; right:0; background:url(../images/ic_checkpoint.png) no-repeat 0 0; }
.team-mark.checked { font-weight:600; color:#097973; }
.team-mark.checked:after { background-position:0 -17px; }
.team-score { color:#555; cursor:default; }
.team-score:hover { color:#555 !important; }
.team-score.link { font-weight:600; color:#ff0000; }
.team-score.link:hover { color:#ff0000 !important; cursor:pointer; }

.order-set { position:relative; margin-bottom:30px; }
.order-set:after { content:""; display:block; clear:both; }
.order-set .left { float:left; width:35% }
.order-set .right { float:right; width:63% }
.order-set .left ul { padding:15px; min-height:344px; border:1px solid #ddd; }
.order-set .left ul li { padding:8px 10px; margin:5px 0; border:1px solid #e9e9e9; cursor:pointer; }
.order-set .left ul li:hover { border-color:#555; }
.order-set .left .ic-delete { display:none; }
.order-set .search-area { position:relative; margin-bottom:10px; }
.order-set .search-area a { position:absolute; top:0; right:7px; width:32px; height:40px; background:url(../images/ic_search_02.png) no-repeat center; }
.order-set .search-area input { display:inline-block; width:100%; height:40px; padding:0 45px 0 15px; font-size:15px; color:#333; letter-spacing:-0.2px; border:1px solid #ddd; outline:none; }

.order-set .right .t1 { margin:5px 0; font-weight:normal; font-size:13px; color:#555; }
.order-set .right .t1 input { margin:5px 5px 0; width:60px; text-align:center; border:1px solid #ddd; }
.order-set .right table { margin-bottom:15px; }
.order-set .right table td { padding:0; }
.order-set .right ul { padding:15px; min-height:130px; }
.order-set .right ul li { padding:8px 10px; margin:5px 0; text-align:left; border:1px solid #e9e9e9; cursor:pointer; }
.order-set .right ul li:hover { border-color:#555; }
.order-set .right .ic-delete { margin-left:7px; }
.order-set .right .block-more { margin:0; text-align:left; }

/* .categoryTd1 {border:5px solid #FFFFFF} */
.categoryTd1 {border:5px solid #C0C0C0}
.categoryTd2 {border:5px solid #808080}
.categoryTd3 {border:5px solid #000000}
.categoryTd4 {border:5px solid #FF0000}
.categoryTd5 {border:5px solid #800000}
.categoryTd6 {border:5px solid #FFFF00}
.categoryTd7 {border:5px solid #808000}
.categoryTd8 {border:5px solid #00FF00}
.categoryTd9 {border:5px solid #008000}
.categoryTd10 {border:5px solid #00FFFF}
.categoryTd11 {border:5px solid #008080}
.categoryTd12 {border:5px solid #0000FF}
.categoryTd13 {border:5px solid #000080}
.categoryTd14 {border:5px solid #FF00FF}
.categoryTd15 {border:5px solid #800080}

.txt-r { text-align: right; width: 100px;}
.txt-l { text-align: left;}

.type-p {color:#fff; background-color: #f5a9a9; padding:5px}
.type-d {color:#fff; background-color: #0000ff; padding:5px}
.type-g {color:#fff; background-color: rgb(18, 173, 173); padding:5px}
.type-c {color:#fff; background-color: #008000; padding:5px}
.type-ing {color:#fff; background-color: #2323dd; padding:5px; border-radius: 30px}
.type-end {color:#fff; background-color: #BE0000; padding:5px; border-radius: 30px}
.type-pre {color:#fff; background-color: rgb(134, 134, 39); padding:5px; border-radius: 30px}
.tri-flag-pre {
  position:absolute;
  top:0px;left:0px;
  width: 0px;height:0px;
  border-right:80px solid rgb(134, 134, 39);
  border-bottom:80px solid transparent;
  transform:rotate(270deg);
  -ms-transform:rotate(270deg);
  -webkit-transform:rotate(270deg);
  -moz-transform:rotate(270deg);
  -o-transform:rotate(270deg);}
.tri-flag-ing {
  position:absolute;
  top:0px;left:0px;
  width: 0px;height:0px;
  border-right:80px solid #2323dd;
  border-bottom:80px solid transparent;
  transform:rotate(270deg);
  -ms-transform:rotate(270deg);
  -webkit-transform:rotate(270deg);
  -moz-transform:rotate(270deg);
  -o-transform:rotate(270deg);}
.tri-flag-end {
  position:absolute;
  top:0px;left:0px;
  width: 0px;height:0px;
  border-right:80px solid #BE0000;
  border-bottom:80px solid transparent;
  transform:rotate(270deg);
  -ms-transform:rotate(270deg);
  -webkit-transform:rotate(270deg);
  -moz-transform:rotate(270deg);
  -o-transform:rotate(270deg);
}
.ext-club-search input {
  position: absolute;
  top: 0;
  display: flex;
  left: 0px;
  width: 150px;
  text-align: left;
  height: 32px;
  line-height: 30px;
  padding: 0;
  background: none;
  border: none;
  outline: none;
  border-bottom: 1px solid #01a59c;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  opacity: 1;
}
.ext-club-search a {
  position: absolute;
  top: 0;
  left: 150px;
  width: 32px;
  height: 32px;
  background: url(../images/ic_search_02.png) no-repeat center;
  z-index: 1;
}
.participantList{
  display:flex;
  flex-direction:row;
  flex:2;
}
.selectList{
  display: flex;
  min-width: 100px;
  flex: 1;
  flex-direction: column;
  height: 500px;
  border: solid 0.5px #cacaca;
  padding: 10px;
  margin-right: 20px;
  overflow: auto;
}
.selected-participantList{
  display:flex;
  flex:3;
  flex-direction:column;
}
.title-top{
  display: flex;
  flex-direction: row;
  margin-bottom: 20px;
  justify-content: space-between;
  align-items: center;
}
.table-top .member-search {
  height: 32px;
  /* display: inline-block;
  vertical-align: middle; */
  display: flex;
  flex-direction: row;
}
.tri-flag-txt{position: absolute; top:5px; left:5px;color:#fff; font:1.3rem}
.warning {color:#ff0000;line-height: 18px;}
.scrolltbody {
  display: block;
  width: 320px;
  border-collapse: collapse;
}

.scrolltbody1 td:nth-of-type(1) { background-color: #F8FFFF; text-align: right; }
.scrolltbody1 td:nth-of-type(2) { text-align: left; }
.scrolltbody1 td:nth-of-type(3) { background-color: #F8FFFF; text-align: right; }
.scrolltbody1 td:nth-of-type(4) { text-align: left;}

.scrolltbody tbody {
  display: block;
  height: 200px;
  overflow: auto;
  width:100%;
}
.table-wrap .scrolltbody tbody td td{
  padding: 7px 5px;
  line-height: 20px;
  color: #333;
  font-size: 13px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid #ddd;
}
.ext-apply td{
  background-color: #fff3c4d5;
}
.table-top-wrap {display: flex;flex-direction: row; justify-content: space-between;}
.scrolltbody th:nth-of-type(1), .scrolltbody td:nth-of-type(1) { width: 10%; }
.scrolltbody th:nth-of-type(2), .scrolltbody td:nth-of-type(2) { width: 20%; }
.scrolltbody th:nth-of-type(3), .scrolltbody td:nth-of-type(3) { width: 15%; }
.scrolltbody th:nth-of-type(4), .scrolltbody td:nth-of-type(4) { width: 15%; }
.scrolltbody th:nth-of-type(5), .scrolltbody td:nth-of-type(5) { width: 15%; }
.scrolltbody th:nth-of-type(6), .scrolltbody td:nth-of-type(6) { width: 15%; }
.scrolltbody th:nth-of-type(7), .scrolltbody td:nth-of-type(7) { width: 100px;}

.scrolltbody.member th:nth-of-type(1), .scrolltbody.member td:nth-of-type(1) { width: 10%; }
.scrolltbody.member th:nth-of-type(2), .scrolltbody.member td:nth-of-type(2) { width: 20%; }
.scrolltbody.member th:nth-of-type(3), .scrolltbody.member td:nth-of-type(3) { width: 20%; }
.scrolltbody.member th:nth-of-type(4), .scrolltbody.member td:nth-of-type(4) { width: 30%; }
.scrolltbody.member th:nth-of-type(5), .scrolltbody.member td:nth-of-type(5) { width: 500px; }
.flexStart {align-items: flex-start !important;}
.oppr-time {padding: 8px;background-color: grey; color:#fff; border-radius: 10px;max-width: 200px;}
.number-input  {border: 1px solid #e5e5e5 !important; width:80px; text-align: center;};
/* ajax common style */
div.ajax-body-loading { position:absolute; top:0; left:0; width:100%; height:100%; background : url(../images/loading_s.gif) no-repeat scroll 50% 50%; }
div.ajax-container-loading { position:absolute; top:0; left:0; background : url(../images/loading_s.gif) no-repeat scroll 50% 50%; }
div.ajax-button-loading { position:absolute; top:0; left:0; min-width:30px; min-height:16px; background : url(../images/loading_s.gif) no-repeat scroll 50% 50%; }
.statistics-type { padding: 10px;}
.statistics-type table thead th { color:#111 !important; border-bottom:1px solid #ddd !important;}
.statistics-type table thead th:first-child { color:#111 !important; border-bottom:1px solid #ddd !important; border-right:1px solid #ddd !important;}
.statistics-type table thead th:last-child { color:#111 !important; border-bottom:1px solid #ddd !important; border-left:1px solid #ddd !important;}
.statistics-type table tbody td:first-child { color:#111 !important; border-right:1px solid #ddd !important; background-color: #F8FFFF !important; font-weight: 600;}
.statistics-type table tbody td:last-child { color:#111 !important; border-left:1px solid #ddd !important;background-color: #F8FFFF !important; font-weight: 600;}
.statistics-type table tbody tr:last-child { border-bottom:1px solid #aaa !important; color:#111 !important; border-top:1px solid #aaa !important;background-color: #F8FFFF !important; font-weight: 600;}
.bubble
{
position: absolute;
width: 280px;
height: 55px;
padding: 0px;
background: rgb(253, 250, 157);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
color:red;
opacity: 70%;
top: 0px;
left:90px;
display:flex;
justify-content: center;
align-items: center;
}

.bubble:after, .bubble-org
{
content: '';
position: absolute;
border-style: solid;
border-width: 6px 10px 6px 0;
border-color: transparent #FFFEE0;
display: block;
width: 0;
z-index: 1;
left: -10px;
top: 21px;
}

.bubble-org{
  position: absolute;
  width: 235px;
  height: 45px;
  padding: 0px;
  background: rgb(253, 250, 157);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  color: red;
  opacity: 88%;
  top: 5px;
  left: 49px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.kbbf-color {
	color: #035CB6 !important;
}
.kbbf-bgcolor {
	background-color: #035CB6 !important;
}
.kbbf-color .active a {
	color: #035CB6 !important;
}
.sortlist-th{
	padding: 0px;
    line-height: 10px;
}
.video_btn{
	margin-top: 3px;
	font-weight: 600;
	border-radius: 5px;
	padding: 5px;
	color: #fff;
	background-color: #ff8000;
}
.video_live_btn{
	margin-top: 3px;
	font-weight: 600;
	border-radius: 5px;
	padding: 5px;
	color: #fff;
	background-color: #ff8000;
}
.team_detail_btn{
	margin-top: 3px;
	font-weight: 600;
	border-radius: 5px;
	padding: 5px;
	color: #fff;
	background-color: #005086;
}
.livescore_btn{
	margin-top: 3px;
	font-weight: 600;
	font-size:20px;
	border-radius: 5px;
	padding: 10px;
	color: #fff;
	background-color: #ff1000;
	white-space:nowrap;
}
.kakaotalk_btn{
	margin-top: 3px;
	font-weight: 600;
	font-size:20px;
	border-radius: 5px;
	padding: 10px;
	color: #351C0A;
	background-color: #F5DA00;
	white-space:nowrap;
}
.kakao_alram_btn{
	white-space:nowrap;
	margin-top: 3px;
	font-weight: 600;
	font-size:20px;
	border-radius: 5px;
	padding: 10px;
	color: #fff;
	background-color: #005086;
}
.tnmt-player-search{
    margin-left: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: 10px;
    height: 25px;
    border: 0.5px solid #dedede;
}
.tnmt-player-search:focus{
	border: 0.5px solid #b7daf7;
	padding: 2px;
	outline:none;
}
.tnmt-player-search-btn{
  font-size: 13px;
  font-weight: 600;
  color: #111;
  border: 1px solid #ddd;
  background: #b7daf7;
  padding: 2px 10px;
}
.tnmt-player-search-btn:focus{
  border: 1px solid #dedede;
  outline:none;
}
.tnmt-player-search-btn:hover{
  color: #fff;
  background: #0080c0;
  outline:none
}
/** add 20201227 */
p.msgTxt_red{color:#E55959;font-size:0.8rem;font-weight:600;display:inline-block;margin-bottom:20px;line-height:22px;}


.redColor {
  background-color: #FF0033;
}

.hotPink {
  background-color: #FB3F654A;
}

a.btn{
    display:inline-block;
    min-width:80px;
    line-height:30px;
    text-align:center;
    background-color:#c3c3c3;
    color:#fff;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.03);
}
.unsearched{
  filter: blur(3px);
}

/** progress bar */ 
.progressbar {
	min-width:200px;
	/* background-color: #d5cece; */
	border: 1px solid #b77474;
	border-radius: 3px;  
	padding: 1px;
}
.progressbar>div {
	background-color: #1D976C;  
	height: 16px;
	border-radius: 3px;
	text-align:center;
	font-size:11px;
	color:#f7fbf3;
}

/** text + progress bar */ 
.graph {
    margin-bottom: 35px;
    position: relative;
    overflow-x:hidden;
    min-width:200px;
}
 
.graph>p {
    font-weight: 700;
    color: #1a1716;
    margin: 0;
}
 
.graph:before {
    width: 100%;
    height: 10px;
    content: "";
    display: block;
    position: absolute;
    background: #d5cece;
    bottom: 0;
	border-radius: 3px;
}
 
.graph .graph-bar {
    width: 50%;
    height: 10px;
    background:#1D976C;
    display: block;
    position: relative;
	border-radius: 3px;
}
 
.graph .graph-bar>span {
    position: absolute;
    border-top: 5px solid #f4392f;
    top: -30px;
    padding: 0;    
    padding: 3px 0;
    font-weight: 500;
} 

.graph .graph-count{
    right: 0;
}

/** animated + progress bar */ 
.animated-progress {
  min-width: 200px;
  height: 20px;
  border-radius: 5px;
  margin: 0px 10px;
  border: 1px solid #b77474;
  overflow: hidden;
  position: relative;
}

.animated-progress span {
  height: 100%;
  display: block;
  width: 0;
  color: rgb(255, 251, 251);
  line-height: 17px;
  position: absolute;
  text-align: end;
  padding-right: 5px;
  border-radius:3px;
}
.animated-progress .percent-text{
  position:absolute;
  width:100%;
  text-align:center;
}

ul.list_col{
	list-style:none;
	display:flex;
}
ul.list_col li{
	margin:2px;
}

.mdc-tab-view {
  min-width: 50px;
  padding: 0 18px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  vertical-align: middle;
}
/** 공통 팝업 */
.layerpoparea{right:auto !important;margin:auto !important;}
.layerpoparea .lypoptit dd {
    margin: 10px 20px 0;
    font-size: 20px;
    font-weight: normal;
    color: #fff;
    letter-spacing: -0.8px;
}
.layerpoparea .lypoptit .btn a.close span { display:none; }
.contents-disable { 
/* 클릭 불가능 none */
pointer-events : none;
opacity: 0.4;
}
/* 팝업 오픈시 뒷배경 흐리게*/
.blur-shade-new{
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events : none;
  background: rgba(0, 0, 0, 0.4);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  overflow: hidden;
}
.blur-shade-new:after {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 110;
}

.addr-list {
  display: inline-block;
  height: 720px;
  vertical-align: top;
  font-size: 0;
  overflow: auto; 
}
.addr-list .depth { 
  display: inline-block;
  vertical-align: top;
  width: 150px;
  height: 100%;
  background: #f9f9f9;
  border-right: 1px solid #e9e9e9;
}
.addr-list .depth.d2 { 
  background: #f3f3f3;
}
.addr-list .depth p { 
  text-align: center;
  height: 680px;
  padding: 310px 0;
  font-size: 13px;
  line-height: 1.4;
  background: #f3f3f3;
  border-bottom: 1px solid #e9e9e9;
}
.addr-list .depth li { 
  display: block;
}
.addr-list .depth li.active a { 
  display: block;
  color: #fff;
  background: #01a59c;
}
.addr-list .depth li a { 
  display: block;
  height: 40px;
  line-height: 40px;
  font-size: 13px;
  text-align: center;
  border-bottom: 1px solid #e9e9e9;
  transition: all 0.2s ease-out;
}
.addr-list .depth li a:hover {
  background: #e9e9e9;
} 
.addr-list .depth h2 { 
  display: block;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  text-align: center;
  color: #000;
  border-bottom: 1px solid #ddd;
  background: #eee;
}
.league-standings {
  display: inline-block;
  vertical-align: top;
  width: calc(100% - 345px);
  margin-left: 20px;
}
.league-standings h2 {
  font-size: 15px;
  line-height: 42px;
}
.league-standings .nav-wrap {
  margin-bottom: 20px;
}
.league-standings .mdc-tab {
  width: 90px;
  padding: 0;
  font-size: 15px;
}
.league-standings .league-cont p.nodata {
  padding: 290px 0;
  text-align: center;
  font-size: 18px;
}

/* oalert swal */
.oalert-popup { border: 1px solid #555; font-family : 'Nanum Gothic', 'NanumGothic', 'NanumGothic', 'sans-serif'; }
.oalert-title { font-size: 1.3em; line-height: 1.3; padding: 1em 1em 0; }
.oalert-text { font-size: 0.92em !important; line-height: 1.3; word-break: auto-phrase !important; }
.oalert-text button { position: unset; top: auto; font-family: 'Nanum Gothic', 'NanumGothic', 'NanumGothic', 'sans-serif'; }
.oalert-icon { font-size: 0.8em; }
.oalert-footer { font-size: 0.8em; }