@charset "utf-8";

body {
  background: #e5f2fa;
}

.base {
  display: inline-block;
  position: absolute;
  width: 1920px;
  height: 1016px;
  font-family: 'NanumSquareRound';
  font-weight: 400;
  background: #e5f2fa;
}

.base.align {
  top: 50%;
  left: 50%;
  margin-top: -508px;
  margin-left: -910px;
}

#container {
  position: relative;
  height: 100%;
  background-color: #e5f2fa;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* fullscreen btn */
.btn_wrap.top {
  position: absolute;
  top: 40px;
  right: 60px;
  z-index: 100;
}

.btn_wrap.top .btn.screen.fullscreen {
  width: 64px;
  height: 64px;
  background: url(../img/btn_fullscreen.png) 0px 0px no-repeat;
  text-indent: -999px;
  overflow: hidden;
}

.btn_wrap.top .btn.screen.fullscreen.disable {
  width: 64px;
  height: 64px;
  background: url(../img/btn_fullscreen.png) 0px 0px no-repeat;
  text-indent: -999px;
  overflow: hidden;
  filter: grayscale(80%);
  opacity: 0.2;
  cursor: default;
  pointer-events: none;
}

.btn_wrap.top .btn.screen.fullscreen.on {
  background: url(../img/btn_fullscreen_on.png) 0px 0px no-repeat;
}

/* timer - common */
@media all and (max-width:375px), all and (max-height:350px) {
  .btn_wrap.top {
    display: none;
  }
}
      
/* ------------------------------------------------------------------------------------------------------------- */
/* tab */
.tab_menu {
  position: absolute;
  left: 65px;
  top: -34px;
  height: 62px;
  padding: 0px 23px;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: inset 3px 3px 3px rgba(0,0,0,0.2);
  z-index: 10;
  overflow: hidden;
}

.tab_menu li {
  float: left;
  margin: 0px 23px;
}

.tab_menu li a {
  display: inline-block;
  position: relative;
  height: 62px;
  font-family: 'NanumSquareRound';
  font-weight: 900;
  font-size: 30px;
  line-height: 64px;
  color: #9ca8b5;
  text-align: center;
  cursor: pointer;
}

.tab_menu li a.on {
  color: #dc8032;
}

.tab_menu li a.on:before {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: #dc8032;
  border-radius: 8px;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* presentation helper - drawing + ladder */
.pt_helper {
  padding-top: 74px;
}

.pt_helper.draw {
  background: #e5f2fa url('../img/toolsPtHelperBg1.png') no-repeat 50% 74px;
}

.pt_helper #container {
  background-color: transparent;
}

.pt_helper .start_btn_box {
  margin-top: 270px;
  text-align: center;
}

.pt_helper .start_btn_box .btn {
  width: 343px;
  height: 125px;
  background: url('../img/toolsDrawStart.png');
  font-size: 0;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* popup */
.message_popup {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  z-index: 999;
  text-align: center;
  transform: translate(0%, -50%);
}

.message_popup .inner_box {
  display: inline-block;
  padding: 30px 80px;
  background: #2d2e34;
  border: 8px solid #676872;
  border-radius: 98px;
  box-shadow: 5px 5px 10px rgb(0 0 0 / 30%);
  box-sizing: border-box;
}

.message_popup p {
  font-family: "NanumSquareRound";
  font-size: 44px;
  font-weight: 700;
  line-height: 1em;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 8px rgb(82 89 94 / 30%);
}

.message_popup.long p {
  font-size: 50px;
}

.message_popup button {
  display: none;
  position: absolute;
  right: 55px;
  top: 50%;
  width: 221px;
  height: 88px;
  margin-top: -44px;
  background: url('../img/toolsSetOk.png');
  font-size: 0;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* dark */
.dark_page {
  background-color: #000;
  width: 100%;
  height: 100%
}

.dark_page button {
  position: absolute;
  right: 40px;
  top: 45px;
  width: 49px;
  height: 49px;
  background: url('../img/toolsDarkClose.png');
  font-size: 0;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* common - board + seats */
/* popup - box_round_pop */
.box_round_pop {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.box_round_pop.show {
  display: block;
}

.box_round_pop .inner {
  position: absolute;
  overflow: hidden;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 3px solid #0681c4;
  background: #099eef;
  border-radius: 32px;
  box-shadow: 0px 5px 10px rgba(0,0,0,0.1);
  pointer-events: auto;
  box-sizing: border-box;
}

.box_round_pop .inner h2 {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 72px;
  background: #099eef;
  font-family: 'NanumSquareRound';
  font-weight: 900;
  font-size: 26px;
  line-height: 72px;
  color: #fff;
  padding: 0px 30px;
  box-sizing: border-box;
}

.box_round_pop .inner h2:before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0px;
  width: 20px;
  height: 20px;
  background: url(../img/board_popup_title_bg.png) 0px 0px no-repeat;
}

.box_round_pop.bc_b .inner {
  border: 3px solid #0681c4;
  background: #099eef;
}

.box_round_pop.bc_b .inner h2 {
  background: #099eef;
}

.box_round_pop.bc_b .inner h2:before { 
  background-position: 0px 0px;
}

.box_round_pop.bc_g .inner {
  border: 3px solid #039faf;
  background: #00bed2;
}

.box_round_pop.bc_g .inner h2 { 
  background: #00bed2;
}

.box_round_pop.bc_g .inner h2:before { 
  background-position: -20px 0px;
}

.box_round_pop .inner .close_wrap {
  position: absolute;
  right: 30px;
  top: 19px;
}

.box_round_pop .inner .close_wrap .btn.close_btn {
  width: 30px;
  height: 30px;
  background: url(../img/board_popup_close_btn.png) center center no-repeat;
  text-indent: -9999px;
}

.box_round_pop .inner > .box {
  width: 100%;
  height: calc(100% - 72px);
  padding: 40px;
  background: #fff;
  border-radius: 0px 0px 30px 30px;
  font-family: 'NanumSquareRound';
  font-weight: 900;
  font-size: 24px;
  color: #3e4c53;
  box-sizing: border-box;
}

.box_round_pop .inner > .box .input_wrap.box {
  width: 100%;
  height: 54px;
  background: #ecedef;
  border-radius: 32px;
  box-shadow: inset 0px 3px 0px #c9cacb;
  padding: 0px 20px;
}

.box_round_pop .inner > .box .input_wrap.box .input_txt {
  width: 100%;
  height: 100%;
  margin-top: 2px;
  font-family: 'NanumSquareRound';
  font-weight: 900;
  font-size: 26px;
  color: #828790;
  text-align: left;
}

.box_round_pop .inner > .box .rub_txt {
  margin-bottom: 20px;
  font-size: 32px;
  color: #3e4c53;
  text-align: center;
}

.box_round_pop .inner .box > .btn_wrap {
  position: relative;
  width: 100%;
  margin-top: 30px;
}

.box_round_pop .inner .box > .btn_wrap .btn.btxt {
  display: inline-block;
  height: 52px;
  border-radius: 32px;
  font-family: 'NanumSquareRound';
  font-weight: 900;
  font-size: 20px;
  line-height: 52px;
  color: #fff;
}

.box_round_pop .inner .box > .btn_wrap .btn.btxt.dull {
  background: #ecedef;
  color: #828790;
}

.box_round_pop .inner .box > .btn_wrap .btn.btxt {
  background: #099eef;
}

.box_round_pop .inner .box > .btn_wrap .btn.btxt.dull:hover {
  background: #e6e6e6;
}

.box_round_pop .inner .box > .btn_wrap .btn.btxt:hover {
  background: #008fdd;
}


.box_round_pop.bc_b .inner .rub_txt + .input_wrap {
  margin-top: 30px;
}

/* save_popup */
.box_round_pop.save_popup .inner {
  width: 520px;
  height: 350px;
}

.box_round_pop.save_popup .inner .close_wrap {
  display: none;
}

.box_round_pop.save_popup .inner .box {
  padding-left: 60px;
  padding-right: 60px;
}

.box_round_pop.save_popup .box > .btn_wrap .btn.btxt {
  float: left;
  width: calc(50% - 10px);
}

.box_round_pop.save_popup .box > .btn_wrap .btn.btxt + .btn.btxt {
  margin-left: 20px;
}

/* load_popup */
.box_round_pop.load_popup .inner {
  width: 1000px;
  height: 560px;
}

.box_round_pop.load_popup .load_table {
  width: 100%;
}

.box_round_pop.load_popup .load_table_head {
  width: 100%;
  height: 44px;
  font-size: 24px;
  color: #039faf;
  border-bottom: 3px solid #039faf;
}

.box_round_pop.load_popup .load_table_head > div,
.box_round_pop.load_popup .load_table_list li > div {
  float: left;
}

.box_round_pop.load_popup .load_table_head > div:nth-child(1),
.box_round_pop.load_popup .load_table_list li > div:nth-child(1) {
  width: calc(100% - 450px);
}

.box_round_pop.load_popup .load_table_head > div:nth-child(2),
.box_round_pop.load_popup .load_table_list li > div:nth-child(2) {
  width: 130px;
  text-align: center;
}

.box_round_pop.load_popup .load_table_head > div:nth-child(3),
.box_round_pop.load_popup .load_table_list li > div:nth-child(3) {
  width: 250px;
  margin-left: 70px;
  text-align: center;
}

.box_round_pop.load_popup .load_table_list {
  font-size: 20px;
}

.box_round_pop.load_popup .load_table_list li {
  width: 100%;
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid #e7e7e7;
}

.box_round_pop.load_popup .load_table_list li > div:nth-child(1) span {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  padding-right: 20px;
} 

.box_round_pop.load_popup .load_table_list li > div:nth-child(2) {
  color: #828790;
}

.box_round_pop.load_popup .load_table_list li > div:nth-child(3) {
  padding: 10px 18px;
}

.box_round_pop.load_popup .load_table_list .btn {
  float: left;
  width: 102px;
  height: 40px;
  border-radius: 32px;
  line-height: 40px;
  font-size: 18px;
}

.box_round_pop.load_popup .load_table_list .btn + .btn {
  margin-left: 10px;
}

.box_round_pop.load_popup .load_table_list .btn.load {
  background: #00bed2;
  color: #fff;
}

.box_round_pop.load_popup .load_table_list .btn.load:hover {
  background: #009dae;
}

.box_round_pop.load_popup .load_table_list .btn.delete {
  background: #ecedef;
  color: #828790;
}

.box_round_pop.load_popup .load_table_list .btn.delete:hover {
  background: #e6e6e6;
}

.box_round_pop.load_popup .load_table_nav {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 70px;
  text-align: center;
  margin-top: 10px;
}

.box_round_pop.load_popup .load_table_nav > .btn.table_prev,
.box_round_pop.load_popup .load_table_nav > .btn.table_next {
  display: inline-block;
  width: 32px;
  height: 32px;
  margin: 0px 4px;
  text-indent: -9999px;
  background: url(../img/board_popup_paging.png) 0px 0px no-repeat;
}

.box_round_pop.load_popup .load_table_nav > .btn.table_prev.skip {
  background-position: 0px 0px;
}

.box_round_pop.load_popup .load_table_nav > .btn.table_prev {
  background-position: 0px -32px;
}

.box_round_pop.load_popup .load_table_nav > .btn.table_next {
  background-position: 0px -64px;
}

.box_round_pop.load_popup .load_table_nav > .btn.table_next.skip {
  background-position: 0px -96px;
}

.box_round_pop.load_popup .load_table_nav > .btn.table_prev.skip:hover {
  background-position: -32px 0px;
}

.box_round_pop.load_popup .load_table_nav > .btn.table_prev:hover {
  background-position: -32px -32px;
}

.box_round_pop.load_popup .load_table_nav > .btn.table_next:hover {
  background-position: -32px -64px;
}

.box_round_pop.load_popup .load_table_nav > .btn.table_next.skip:hover {
  background-position: -32px -96px;
}

.box_round_pop.load_popup .load_table_nav > div {
  margin: 0px 20px;
}

.box_round_pop.load_popup .load_table_nav > div span {
  display: inline-block;
  width: 32px;
  height: 32px;
  background: #ecedef;
  border-radius: 8px;
  margin: 0px 2px;
  font-size: 18px;
  line-height: 34px;
  text-align: center;
  color: #828790;
  cursor: pointer;
}

.box_round_pop.load_popup .load_table_nav > div span.is--on {
  background: #00bed2;
  color: #fff;
}

/* save_popup */
.box_round_pop.board_popup .inner {
  position: absolute;
  width: 520px;
  height: 300px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.box_round_pop.board_popup .inner {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.box_round_pop.board_popup .inner .close_wrap {
  display: none;
}

.box_round_pop.board_popup .inner .box {
  padding-left: 60px;
  padding-right: 60px;
}

.box_round_pop.board_popup .box > .btn_wrap .btn.btxt {
  float: left;
  width: calc(50% - 10px);
}

.box_round_pop.board_popup .box > .btn_wrap .btn.btxt + .btn.btxt {
  margin-left: 20px;
}

.box_round_pop .inner .box > .btn_wrap .btn.btxt.is--disabled {
  pointer-events: none;
  background: #a6e0ff;
}

/* select wrap */
.select_wrap .btn_select {
  position: relative;
  min-width: 78px;
  height: 36px;
  padding: 0px 14px;
  border: 2px solid #dedede;
  border-radius: 6px;
  line-height: 34px;
  cursor: pointer;
  box-sizing: border-box;
}

.select_wrap .btn_select:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -6px;
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 12.74 7.24' style='enable-background:new 0 0 12.74 7.24;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23828790;%7D%0A%3C/style%3E%3Cpolygon class='st0' points='0,0 6.48,7.24 12.74,0 '/%3E%3C/svg%3E%0A");
  background-position: center center;
  background-repeat: no-repeat;
}

.select_wrap .btn_select.is--on:after {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 12.74 7.24' style='enable-background:new 0 0 12.74 7.24;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23828790;%7D%0A%3C/style%3E%3Cpolygon class='st0' points='0,7.24 6.48,0 12.74,7.24 '/%3E%3C/svg%3E%0A");
}

.select_wrap .drop_list {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 100;
}

.select_wrap .drop_list [data-select-option] {
  font-size: 17px;
  line-height: 30px;
  color: #898989;
  padding: 0px 8px;
  cursor: pointer;
  box-sizing: border-box;
}

.select_wrap .drop_list [data-select-option]:hover,
.select_wrap .drop_list [data-select-option].is--on {
  color: #6187eb;
}

.select_wrap .drop_list.select--open {
  display: block;
  width: 100%;
  padding: 6px;
  background: #FFFFFF;
  border: 1px solid #dedede;
  border-radius: 6px;
  box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
  box-sizing: border-box;
  animation: baseDopListMotion ease 0.2s both;
  -webkit-animaition: baseDopListMotion ease 0.2s both;
  -ms-animation: baseDopListMotion ease 0.2s both;
}

@keyframes baseDopListMotion {
  0% {
    opacity: 0;
    margin-top: -6px;
  }

  100% {
    opacity: 1;
    margin-top: 4px;
  }
}

@-webkit-keyframes baseDopListMotion {
  0% {
    opacity: 0;
    margin-top: -5px;
  }

  100% {
    opacity: 1;
    margin-top: 4px;
  }
}

@-ms-keyframes baseDopListMotion {
  0% {
    opacity: 0;
    margin-top: -5px;
  }

  100% {
    opacity: 1;
    margin-top: 4px;
  }
}