@charset "utf-8";

/*-------------------------------------------------------------------------------------*
 *  게시판                                                                             *
 *-------------------------------------------------------------------------------------*/
.list_title1 {
  background: linear-gradient(#402907 0%, #1c150a 100%);
  color: #ffffff;
  line-height: 34px;
  text-align: center;
  font-weight: 500;
}
.list_notice1 {
  background: rgba(52, 31, 7, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #f0f0f0;
  line-height: 40px;
  text-align: center;
}
.list_notice2 {
  background: rgba(52, 31, 7, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  line-height: 40px;
  padding: 0 0 0 15px;
  font-weight: 500;
}
.list1 {
  background: rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #e1e1e1;
  line-height: 40px;
  text-align: center;
}
.list2 {
  background: rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  line-height: 40px;
  padding: 0 0 0 15px;
  font-weight: 500;
}

.write_title_top {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.write_title {
  background: rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  min-height: 60px;
  color: #ffffff;
  padding: 10px 20px 10px 20px;
  line-height: 21px;
  width: 180px;
  font-weight: 500;
}
.write_basic {
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  min-height: 60px;
  color: #ffffff;
  padding: 10px 20px 10px 20px;
  line-height: 21px;
}

.view1 {
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  padding: 0 20px 0 20px;
  width: 100%;
  height: 50px;
  line-height: 44px;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0pt;
}
.view2 {
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 12px 20px 10px 20px;
  width: 100%;
  line-height: 26px;
  min-height: 300px;
}
.view_box {
  background: rgba(255, 255, 255, 0.1);
  padding: 5px 8px 3px 8px;
  color: #dddddd;
  line-height: 12px;
  text-align: center;
  display: inline-block;
  font-size: 12px;
  border-radius: 0px;
  margin: 0 5px 0 0;
  font-weight: 100;
}

.page_wrap {
  float: left;
  width: 100%;
  height: 40px;
  text-align: center;
}
.page_wrap ul li {
  display: inline;
}
.page {
  background: rgba(0, 0, 0, 0.3);
  display: inline-block;
  padding: 10px 12px 10px 12px;
  color: #c7c7c7;
  border-radius: 3px;
}
.pageon {
  background: rgba(0, 0, 0, 0.8);
  display: inline-block;
  padding: 10px 12px 10px 12px;
  color: #f3e9a3;
  border-radius: 3px;
}

.info_wrap {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 0, 0, 0.1);
  float: left;
  width: 100%;
  padding: 15px 0 20px 0;
  border-radius: 0px;
}
.info1 {
  float: left;
  width: 100%;
  line-height: 26px;
  color: #ffd800;
  padding: 0 20px 0 20px;
  font-size: 18px;
  font-weight: 700;
}
.info2 {
  float: left;
  width: 100%;
  line-height: 22px;
  color: #ffc600;
  padding: 5px 20px 0 20px;
  font-size: 16px;
  font-weight: 500;
}
.info3 {
  float: left;
  width: 100%;
  line-height: 22px;
  color: #f2f2f2;
  padding: 5px 20px 0 23px;
  font-size: 12px;
  font-weight: 300;
}

/*-------------------------------------------------------------------------------------*
 *  버튼                                                                               *
 *-------------------------------------------------------------------------------------*/
.btn1_1 {
  display: inline-block;
  text-align: center;
  border-radius: 4px;
  color: #ffffff;
  font-size: 12px;
  letter-spacing: 0pt;
  font-weight: 700;
  text-shadow: 1px 1px 1px rgba(32, 19, 2, 0.5);
  box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 2px -1px;
}
.btn1_2 {
  display: inline-block;
  text-align: center;
  border-radius: 4px;
  color: #ffffff;
  font-size: 12px;
  letter-spacing: 0pt;
  font-weight: 700;
  text-shadow: 1px 1px 1px rgba(32, 19, 2, 0.5);
  box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 2px -1px;
}
.btn2_1 {
  display: inline-block;
  text-align: center;
  border-radius: 4px;
  color: #ffffff;
  font-size: 12px;
  letter-spacing: 0pt;
  font-weight: 700;
  text-shadow: 1px 1px 1px rgba(32, 19, 2, 0.5);
  box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 2px -1px;
}
.btn2_2 {
  display: inline-block;
  text-align: center;
  border-radius: 4px;
  color: #ffffff;
  font-size: 12px;
  letter-spacing: 0pt;
  font-weight: 700;
  text-shadow: 1px 1px 1px rgba(32, 19, 2, 0.5);
  box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 2px -1px;
}
.btn3_1 {
  display: inline-block;
  text-align: center;
  border-radius: 4px;
  color: #ffffff;
  font-size: 14px;
  letter-spacing: 0pt;
  font-weight: 700;
  text-shadow: 1px 1px 1px rgba(32, 19, 2, 0.5);
  box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 2px -1px;
}
.btn3_2 {
  display: inline-block;
  text-align: center;
  border-radius: 4px;
  color: #ffffff;
  font-size: 14px;
  letter-spacing: 0pt;
  font-weight: 700;
  text-shadow: 1px 1px 1px rgba(32, 19, 2, 0.5);
  box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 2px -1px;
}

.btn_wrap_right {
  float: left;
  width: 100%;
  text-align: right;
}
.btn_wrap_right ul li {
  display: inline;
}
.btn_wrap_center {
  float: left;
  width: 100%;
  text-align: center;
}
.btn_wrap_center ul li {
  display: inline;
}

.btn1_1 {
  background: url("../images/btn1.jpg") center top no-repeat;
  background-size: 100% 100%;
  min-width: 80px;
  min-height: 34px;
  padding: 0 15px 0 15px;
  line-height: 34px;
}
.btn1_1:hover {
  background: url("../images/btn1_h.jpg") center top no-repeat;
  background-size: 100% 100%;
}

.btn1_2 {
  background: url("../images/btn2.jpg") center top no-repeat;
  background-size: 100% 100%;
  min-width: 80px;
  min-height: 34px;
  padding: 0 15px 0 15px;
  line-height: 34px;
}
.btn1_2:hover {
  background: url("../images/btn2_h.jpg") center top no-repeat;
  background-size: 100% 100%;
}

.btn2_1 {
  background: url("../images/btn1.jpg") center top no-repeat;
  background-size: 100% 100%;
  min-width: 120px;
  height: 35px;
  line-height: 35px;
}
.btn2_1:hover {
  background: url("../images/btn1_h.jpg") center top no-repeat;
  background-size: 100% 100%;
}

.btn2_2 {
  background: url("../images/btn2.jpg") center top no-repeat;
  background-size: 100% 100%;
  min-width: 120px;
  height: 35px;
  line-height: 35px;
}
.btn2_2:hover {
  background: url("../images/btn2_h.jpg") center top no-repeat;
  background-size: 100% 100%;
}

.btn3_1 {
  background: url("../images/btn1.jpg") center top no-repeat;
  background-size: 100% 100%;
  min-width: 300px;
  height: 50px;
  line-height: 50px;
}
.btn3_1:hover {
  background: url("../images/btn1_h.jpg") center top no-repeat;
  background-size: 100% 100%;
}

.btn3_2 {
  background: url("../images/btn2.jpg") center top no-repeat;
  background-size: 100% 100%;
  min-width: 300px;
  height: 50px;
  line-height: 50px;
}
.btn3_2:hover {
  background: url("../images/btn2_h.jpg") center top no-repeat;
  background-size: 100% 100%;
}

.division1 {
  background: rgba(44, 44, 4, 0.5);
  display: inline-block;
  text-align: center;
  min-width: 100px;
  padding: 6px 8px 6px 8px;
  line-height: 12px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  border-radius: 100px;
  border: 1px solid #111111;
}
.division2 {
  background: #ffff00;
  display: inline-block;
  text-align: center;
  min-width: 100px;
  padding: 6px 8px 6px 8px;
  line-height: 12px;
  color: #000000;
  font-size: 12px;
  font-weight: 500;
  border-radius: 100px;
}
.division3 {
  background: #111111;
  display: inline-block;
  text-align: center;
  min-width: 100px;
  padding: 6px 8px 6px 8px;
  line-height: 12px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  border-radius: 3px;
}

/*-------------------------------------------------------------------------------------*
 *  폰트                                                                               *
 *-------------------------------------------------------------------------------------*/
.font01 {
  color: #ffffff;
  font-weight: 500;
}
.font02 {
  color: #000000;
  font-weight: 500;
}
.font03 {
  color: #929292;
}
.font04 {
  color: #484848;
}
.font05 {
  color: #ffc000;
  font-weight: 500;
}
.font06 {
  color: #00ffe4;
  font-weight: 500;
}
.font07 {
  color: #ff7200;
  font-weight: 500;
}
.font08 {
  color: #00ff3c;
  font-weight: 500;
}
.font09 {
  color: #8aacc3;
  font-weight: 500;
}
.font10 {
  color: #4ec4af;
  font-weight: 500;
}

.font11 {
  color: #36fa8d;
  font-weight: 900;
  font-size: 20px;
  font-family: Arial;
  letter-spacing: -1pt;
  text-shadow: 1px 1px 1px #000000;
  font-style: italic;
}
.font12 {
  color: #00deff;
  font-weight: 900;
  font-size: 20px;
  font-family: Arial;
  letter-spacing: -1pt;
  text-shadow: 1px 1px 1px #000000;
  font-style: italic;
}
.font13 {
  color: #b0977f;
  font-weight: 500;
}
.font14 {
  color: #818fa0;
}
.font15 {
  color: #c38c31;
}

.font21 {
  color: #84a1a3;
  font-weight: 900;
}
.font22 {
  color: #85d4d7;
  font-weight: 900;
}

/*-------------------------------------------------------------------------------------*
 *  인풋                                                                               *
 *-------------------------------------------------------------------------------------*/
.input1 {
  background-color: #222222;
  border: 1px solid #111111;
  padding: 4px 0 4px 5px;
  color: #f7f7f7;
  border-radius: 3px;
  height: 34px;
}
.input2 {
  background-color: #222222;
  border: 1px solid #111111;
  padding: 4px 0 4px 5px;
  color: #f7f7f7;
  border-radius: 3px;
}

/*-------------------------------------------------------------------------------------*
 *  마우스 오버                                                                        *
 *-------------------------------------------------------------------------------------*/
/* 메인게임 마우스 오버 */
.mouseover2 {
  animation-name: mouseover2;
  -webkit-animation-name: mouseover2;

  animation-duration: 2s;
  -webkit-animation-duration: 2s;

  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;

  transform-origin: 90% 100%;
  -ms-transform-origin: 90% 100%;
  -webkit-transform-origin: 90% 100%;

  visibility: visible !important;
}

@keyframes mouseover2 {
  0% {
    transform: rotate(0deg) scaleY(1.1);
  }
  20% {
    transform: rotate(-1deg) scaleY(1.05);
  }
  35% {
    transform: rotate(2deg) scaleY(1);
  }
  50% {
    transform: rotate(-1deg);
  }
  65% {
    transform: rotate(1deg);
  }
  80% {
    transform: rotate(-1deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* 서브게임 마우스 오버 */
.mouseover3:hover {
  animation-name: mouseover3;
  -webkit-animation-name: mouseover3;

  animation-duration: 0.3s;
  -webkit-animation-duration: 0.3s;

  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;

  visibility: visible !important;
}

@keyframes mouseover3 {
  0% {
    transform: rotate(0deg) scaleY(1.1);
  }
  20% {
    transform: rotate(-1deg) scaleY(1.05);
  }
  35% {
    transform: rotate(2deg) scaleY(1);
  }
  50% {
    transform: rotate(-1deg);
  }
  65% {
    transform: rotate(1deg);
  }
  80% {
    transform: rotate(-1deg);
  }
  100% {
    transform: rotate(0deg);
  }
}