@charset "UTF-8";
/* ----------------------------------------------
 * HanbitSoft Infra Development Team
 * 아쿠아마블 Stylesheet
 * Author - hsa815@hanbitsoft.co.kr 220802
 ------------------------------------------------- */
/* CSS Reset
-------------------------------------------------------------- */
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
img,
strong,
small,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
select,
input,
button,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
figure,
figcaption {
  margin: 0;
  padding: 0;
  font-size: 100%;
}

img,
fieldset,
button {
  border: 0;
}

article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body,
input,
button,
textarea,
select,
table,
kbd {
  line-height: 1.2;
  font-family: Malgun Gothic, "맑은고딕", "돋움", dotum, Helvetica, sans-serif;
  font-size: 12px;
  color: #000;
}

img {
  vertical-align: middle;
}

ol,
ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: #000;
}

a:hover,
a:focus,
a:active {
  text-decoration: underline;
  color: #0000ff;
}

button,
label {
  cursor: pointer;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption,
legend {
  width: 0;
  height: 0;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
  visibility: hidden;
}

/* Reserved Class
-------------------------------------------------------------- */
.blind {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  margin: -1px;
  width: 1px;
  height: 1px;
}

.fL {
  float: left;
}

.fR {
  float: right;
}

.clearFix {
  zoom: 1;
}

.clearFix::after {
  content: "";
  display: block;
  clear: both;
}

#wrap {
  overflow: hidden;
  width: 100%;
  min-width: 1200px;
  background: url(../images/bg.jpg) 50% 0 no-repeat;
  height: 2230px;
}

#wrap .inner_wrap {
  position: relative;
  width: 1100px;
  height: inherit;
  margin: 0 auto;
}

#wrap button {
  background: transparent;
}

/* 로그인 영역 */
.playInfo {
  position: absolute;
  top: 716px;
  left: 149px;
}

.playInfo #login {
  position: relative;
  width: 807px;
  height: 154px;
  margin: 0 auto;
}

.playInfo .loginBtn {
  position: absolute;
  top: 59px;
  left: 520px;
  width: 74px;
  height: 38px;
}

.playInfo #logined {
  position: relative;
  background: url(../images/login_after.jpg);
  width: 807px;
  height: 154px;
  margin: 0 auto;
}

.playInfo #logined dd {
  position: absolute;
  height: 37px;
  line-height: 37px;
  font-size: 16px;
  font-weight: bold;
  color: #beccba;
  text-align: center;
}

.playInfo .join_cnt {
  top: 39px;
  left: 244px;
  width: 111px;
}

.playInfo .finish_cnt {
  top: 39px;
  left: 459px;
  width: 76px;
}

.playInfo .family_name {
  top: 79px;
  left: 244px;
}

.playInfo .family_name button {
  display: inline-block;
  vertical-align: middle;
  width: 74px;
  height: 38px;
  margin-top: -4px;
}

.playInfo .server_fd {
  display: inline-block;
  vertical-align: middle;
  width: 291px;
  margin-top: -4px;
}

.playInfo .fd_reward {
  margin-left: -1px;
}

/* 주사위 판 */
.game_area {
  position: absolute;
  top: 516px;
  left: 0;
  right: 0;
}

.game_area .x-axis {
  width: 95px;
  height: 125px;
}

.game_area .y-axis {
  width: 125px;
  height: 95px;
}

.game_area .space {
  position: absolute;
  cursor: pointer;
}

.game_area .space:hover {
  background: url(../images/sp_space_txt.png) no-repeat 0 0;
}

.game_area .space0,
.game_area .space10,
.game_area .space19,
.game_area .space29 {
  opacity: 0;
  filter: alpha(opacity=0);
}

.game_area .space0 {
  width: 176px;
  height: 176px;
  top: 0;
  left: -51px;
}

.game_area .space1 {
  top: 51px;
  left: 125px;
}

.game_area .space1:hover {
  background-position: 0 0;
}

.game_area .space2 {
  top: 51px;
  left: 220px;
}

.game_area .space2:hover {
  background-position: -96px 0;
}

.game_area .space3 {
  top: 51px;
  left: 315px;
}

.game_area .space3:hover {
  background-position: -192px 0;
}

.game_area .space4 {
  top: 51px;
  left: 410px;
}

.game_area .space4:hover {
  background-position: -288px 0;
}

.game_area .space5 {
  top: 51px;
  left: 505px;
}

.game_area .space5:hover {
  background-position: -384px 0;
}

.game_area .space6 {
  top: 51px;
  left: 600px;
}

.game_area .space6:hover {
  background-position: -480px 0;
}

.game_area .space7 {
  top: 51px;
  left: 695px;
}

.game_area .space7:hover {
  background-position: -576px 0;
}

.game_area .space8 {
  top: 51px;
  left: 790px;
}

.game_area .space8:hover {
  background-position: -672px 0;
}

.game_area .space9 {
  top: 51px;
  left: 885px;
}

.game_area .space9:hover {
  background-position: -768px 0;
}

.game_area .space10 {
  width: 143px;
  height: 143px;
  top: 33px;
  left: 980px;
}

.game_area .space10:hover {
  background-position: -864px 0;
}

.game_area .space11 {
  top: 176px;
  left: 980px;
}

.game_area .space11:hover {
  background: transparent;
}

.game_area .space11 .count {
  display: block;
  margin: 54px 0 0 30px;
  width: 84px;
  height: 27px;
  line-height: 27px;
  color: #c860ff;
  font-size: 15px;
  text-align: center;
}

.game_area .space12 {
  top: 271px;
  left: 980px;
}

.game_area .space12:hover {
  background-position: 0 -126px;
}

.game_area .space13 {
  top: 366px;
  left: 980px;
}

.game_area .space13:hover {
  background-position: -126px -126px;
}

.game_area .space14 {
  top: 461px;
  left: 980px;
}

.game_area .space14:hover {
  background-position: -252px -126px;
}

.game_area .space15 {
  top: 556px;
  left: 980px;
}

.game_area .space15:hover {
  background-position: -378px -126px;
}

.game_area .space16 {
  top: 651px;
  left: 980px;
}

.game_area .space16:hover {
  background-position: -504px -126px;
}

.game_area .space17 {
  top: 746px;
  left: 980px;
}

.game_area .space17:hover {
  background-position: -630px -126px;
}

.game_area .space18 {
  top: 841px;
  left: 980px;
}

.game_area .space18:hover {
  background-position: -756px -126px;
}

.game_area .space19 {
  top: 936px;
  left: 980px;
  width: 143px;
  height: 143px;
}

.game_area .space20 {
  top: 936px;
  left: 885px;
}

.game_area .space20:hover {
  background: transparent;
}

.game_area .space20 .count {
  display: block;
  margin: 77px 0 0 5px;
  width: 84px;
  height: 27px;
  line-height: 27px;
  color: #fff;
  font-size: 16px;
  text-align: center;
}

.game_area .space21 {
  top: 936px;
  left: 790px;
}

.game_area .space21:hover {
  background-position: -672px -222px;
}

.game_area .space22 {
  top: 936px;
  left: 695px;
}

.game_area .space22:hover {
  background-position: -576px -222px;
}

.game_area .space23 {
  top: 936px;
  left: 600px;
}

.game_area .space23:hover {
  background-position: -480px -222px;
}

.game_area .space24 {
  top: 936px;
  left: 505px;
}

.game_area .space24:hover {
  background-position: -384px -222px;
}

.game_area .space25 {
  top: 936px;
  left: 410px;
}

.game_area .space25:hover {
  background-position: -288px -222px;
}

.game_area .space26 {
  top: 936px;
  left: 315px;
}

.game_area .space26:hover {
  background-position: -192px -222px;
}

.game_area .space27 {
  top: 936px;
  left: 220px;
}

.game_area .space27:hover {
  background-position: -96px -222px;
}

.game_area .space28 {
  top: 936px;
  left: 125px;
}

.game_area .space28:hover {
  background-position: 0 -222px;
}

.game_area .space29 {
  top: 936px;
  left: -18px;
  width: 143px;
  height: 143px;
}

.game_area .space30 {
  top: 841px;
  left: 0;
}

.game_area .space30:hover {
  background: transparent;
}

.game_area .space30 .count {
  display: block;
  margin: 50px 0 0 12px;
  width: 84px;
  height: 27px;
  line-height: 27px;
  color: #fff;
  font-size: 16px;
  text-align: center;
}

.game_area .space31 {
  top: 746px;
  left: 0;
}

.game_area .space31:hover {
  background-position: 0 -348px;
}

.game_area .space32 {
  top: 651px;
  left: 0;
}

.game_area .space32:hover {
  background-position: -126px -348px;
}

.game_area .space33 {
  top: 556px;
  left: 0;
}

.game_area .space33:hover {
  background-position: -252px -348px;
}

.game_area .space34 {
  top: 461px;
  left: 0;
}

.game_area .space34:hover {
  background-position: -378px -348px;
}

.game_area .space35 {
  top: 366px;
  left: 0;
}

.game_area .space35:hover {
  background-position: -504px -348px;
}

.game_area .space36 {
  top: 271px;
  left: 0;
}

.game_area .space36:hover {
  background-position: -630px -348px;
}

.game_area .space37 {
  top: 176px;
  left: 0;
}

.game_area .space37:hover {
  background-position: -756px -348px;
}

.game_area .btn-more1 {
  position: absolute;
  top: 532px;
  left: 775px;
  display: block;
  width: 21px;
  height: 21px;
  cursor: pointer;
}

.game_area .btn-more1:hover + img {
  display: block;
}

.game_area .btn-more2 {
  position: absolute;
  top: 532px;
  left: 910px;
  display: block;
  width: 21px;
  height: 21px;
  cursor: pointer;
}

.game_area .btn-more2:hover + img {
  display: block;
}

.game_area .layer1 {
  display: none;
  position: absolute;
  top: 556px;
  left: 627px;
}

.game_area .layer2 {
  display: none;
  position: absolute;
  top: 556px;
  left: 760px;
}

.game_area .piece {
  position: absolute;
  top: 9px;
  left: 0;
}

.game_area .poket {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.game_area .result_dimmed {
  display: none;
  position: absolute;
  top: 176px;
  left: 125px;
  background: url(../images/dimmed.jpg) 0 0 no-repeat;
  width: 855px;
  height: 760px;
}

.game_area .dice_wrap {
  position: absolute;
  top: 362px;
  left: 420px;
  width: 262px;
  height: 262px;
}

.game_area .dice_wrap .btn_start {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.game_area .dice_wrap .result_img {
  display: none;
  position: absolute;
  top: 68px;
  left: 64px;
  background: url(../images/sp_dice.png) 0 0 no-repeat;
  width: 141px;
  height: 141px;
  /*도*/
  /*개*/
  /*걸*/
  /*윷*/
  /*모*/
  /*백도*/
}

.game_area .dice_wrap .result_img.result0 {
  background-position: 0 -143px;
}

.game_area .dice_wrap .result_img.result1 {
  background-position: 0 -286px;
}

.game_area .dice_wrap .result_img.result2 {
  background-position: 0 -429px;
}

.game_area .dice_wrap .result_img.result3 {
  background-position: 0 -572px;
}

.game_area .dice_wrap .result_img.result4 {
  background-position: 0 -715px;
}

.game_area .dice_wrap .result_img.result5 {
  background-position: 0 -858px;
}

.game_area .text_area {
  position: absolute;
  top: 603px;
  right: 0;
  left: 0;
  margin: 0 auto;
  font-size: 16px;
  color: #fff;
  text-align: center;
}

.game_area .text_area .v_align {
  display: none;
  width: 1px;
  height: 100%;
}

.game_area .text_area span {
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  font-family: "맑은 고딕", "Malgun Gothic", "돋움", dotum, Helvetica,
 sans-serif;
}

.game_area .text_area span span {
  color: #fff;
}

.game_area .text_area span span:first-child {
  color: #ffce00;
}

#result_pop_wrap {
  display: none;
  position: absolute;
  top: 691px;
  left: 125px;
  width: 855px;
  height: 760px;
}

#result_pop_wrap .dim {
  position: absolute;
  background: url(../images/dimmed.jpg) 0 0 no-repeat;
  width: 855px;
  height: 760px;
}

#result_pop_wrap .pop_inner {
  padding-top: 210px;
  margin: 0 auto;
  text-align: center;
}

#lucky {
  display: none;
  position: relative;
  margin: 0 auto;
  width: 520px;
  height: 320px;
}

#lucky li {
  display: none;
  width: 520px;
  height: 320px;
  text-align: center;
  color: #49311b;
  font-size: 16px;
  font-weight: bold;
}

#lucky li.kano {
  background: url(../images/pop3.jpg) no-repeat;
}

#finish {
  display: none;
  position: relative;
  margin: 0 auto;
  width: 520px;
  height: 320px;
}

#finish li {
  display: none;
  width: 520px;
  height: 320px;
}

#finish li.finish0 {
  background-image: url(../images/pop4.jpg);
  background-repeat: no-repeat;
}

#user {
  display: none;
  position: relative;
  margin: 0 auto;
  width: 520px;
  height: 320px;
}

#user li {
  display: none;
  width: 520px;
  height: 320px;
}

#user li.not-event {
  background: url(../images/pop1.jpg) no-repeat;
}

#user li.lack-point {
  background: url(../images/pop2.jpg) no-repeat;
}

.btn_pop_close {
  position: absolute;
}

.btn_pop_close button {
  display: block;
  width: 90px;
  height: 50px;
  text-indent: -9999px;
  background: transparent;
  border: none;
}

#lucky .btn_pop_close {
  left: 216px;
  top: 178px;
}

#finish .btn_pop_close {
  left: 215px;
  top: 178px;
}

#user .btn_pop_close {
  left: 216px;
  top: 158px;
}

/*팝업*/
#popup_wrap {
  position: relative;
  width: 657px;
  height: 894px;
  font-family: "맑은 고딕", "Malgun Gothic", "돋움", dotum, Helvetica,
 sans-serif;
}

#popup_wrap h1 {
  height: 79px;
  line-height: 79px;
  text-align: center;
  background: #04a4b2;
}

#popup_wrap .table_area {
  position: relative;
  text-align: center;
}

#popup_wrap .table_border {
  width: 557px;
  margin: 0 auto;
  border-bottom: 2px solid #7f7f7f;
}

#popup_wrap table {
  margin: 0 auto;
}

#popup_wrap table thead tr th {
  height: 70px;
  background: #7f7f7f;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
}

#popup_wrap tr td {
  height: 50px;
  color: #555;
  font-size: 13px;
}

#popup_wrap .page_number_wrap {
  padding-bottom: 35px;
  margin-top: 20px;
}

#popup_wrap .page_number {
  float: left;
  margin-left: 50px;
  font-size: 15px;
  color: #555;
  font-weight: bold;
  letter-spacing: -1px;
}

#popup_wrap .page_number .currnet_num {
  color: #04a4b2;
}

#popup_wrap .paging {
  float: right;
  margin-right: 50px;
  font-size: 11px;
  text-align: center;
}

#popup_wrap .paging a {
  display: inline-block;
  vertical-align: top;
  width: 23px;
  height: 23px;
  line-height: 22px;
  font-size: 13px;
  font-weight: bold;
  color: #555;
  text-decoration: none;
  border: 1px solid #8d8c8b;
}

#popup_wrap .paging a.dir {
  width: 25px;
  height: 25px;
  font-size: 0;
  border: 0;
}

#popup_wrap .paging a.dir:hover {
  border: 0;
}

#popup_wrap .paging strong {
  display: inline-block;
  vertical-align: top;
  width: 23px;
  height: 23px;
  line-height: 23px;
  border: 1px solid #04a4b2;
  background: #04a4b2;
  color: #fff;
}

#popup_wrap .nolist {
  padding: 210px 0;
  font-size: 16px;
  color: #000;
  font-weight: bold;
  text-align: center;
}

#popup_wrap .pop_ok_btn_area {
  text-align: center;
}

#popup_wrap .tab_area {
  margin-bottom: 10px;
  text-align: center;
}

#popup_wrap .tab_area li {
  display: inline-block;
  vertical-align: middle;
  width: 278px;
  height: 70px;
  line-height: 70px;
  border-bottom: 2px solid #ebebeb;
}

#popup_wrap .tab_area li a {
  display: block;
  width: 100%;
  height: 100%;
}

#popup_wrap .btn_tab1 li:first-child {
  border-bottom-color: #04a4b2;
}

#popup_wrap .btn_tab2 li:last-child {
  border-bottom-color: #04a4b2;
}

#popup_wrap .point_wrap {
  width: 558px;
  margin: 0 auto;
}

#popup_wrap .point_date {
  float: left;
  width: 278px;
  height: 40px;
  margin-left: 1px;
  background: #7f7f7f;
}

#popup_wrap .point_date span {
  display: inline-block;
  width: 139px;
  line-height: 40px;
  text-align: center;
  font-weight: bold;
  font-size: 15px;
  color: #fff;
}

#popup_wrap .date_point_list {
  position: relative;
  padding-top: 40px;
  padding-bottom: 19px;
  color: #555;
}

#popup_wrap .date_point_list li {
  width: 278px;
  height: 40px;
  font-size: 13px;
}

#popup_wrap .date_point_list li.even {
  background: #f0f0f0;
}

#popup_wrap .date_point_list li.last_line {
  border-bottom: 2px solid #7f7f7f;
}

#popup_wrap .date_point_list li span {
  display: inline-block;
  vertical-align: middle;
  width: 136px;
  line-height: 40px;
  text-align: center;
}

#popup_wrap .posi_right {
  position: absolute;
  right: 0;
}

#popup_wrap .pr_16 {
  top: 40px;
}

#popup_wrap .pr_17 {
  top: 80px;
}

#popup_wrap .pr_18 {
  top: 120px;
}

#popup_wrap .pr_19 {
  top: 160px;
}

#popup_wrap .pr_20 {
  top: 200px;
}

#popup_wrap .pr_21 {
  top: 240px;
}

#popup_wrap .pr_22 {
  top: 280px;
}

#popup_wrap .pr_23 {
  top: 320px;
}

#popup_wrap .pr_24 {
  top: 360px;
}

#popup_wrap .pr_25 {
  top: 400px;
}

#popup_wrap .pr_26 {
  top: 440px;
}

#popup_wrap .pr_27 {
  top: 480px;
}

#popup_wrap .pr_28 {
  top: 520px;
}

#popup_wrap .pr_29 {
  top: 560px;
}