@charset "utf-8";

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif, Arial;
  font-weight: 400;
  font-size: 18px;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.font_black {
  /* font-family: 'NotoSansHant-Black';*/
  font-family: "Meiryo", "Meiryo UI", "Microsoft JhengHei UI",
    "Microsoft JhengHei", sans-serif;
  font-weight: 900;
}

.font_bold {
  /* font-family: 'NotoSansHant-Bold';*/
  font-family: "Meiryo", "Meiryo UI", "Microsoft JhengHei UI",
    "Microsoft JhengHei", sans-serif;
  font-weight: 700;
}

.font_medium {
  /*font-family: 'NotoSansHant-Medium';*/
  font-family: "Meiryo", "Meiryo UI", "Microsoft JhengHei UI",
    "Microsoft JhengHei", sans-serif;
  font-weight: bolder;
}

.font_regular {
  /* font-family: 'NotoSansHant-Regular';*/
  font-family: "Meiryo", "Meiryo UI", "Microsoft JhengHei UI",
    "Microsoft JhengHei", sans-serif;
  font-weight: bold;
}

.font_thin {
  /* font-family: 'NotoSansHant-Thin';*/
  font-family: "Meiryo", "Meiryo UI", "Microsoft JhengHei UI",
    "Microsoft JhengHei", sans-serif;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  min-width: 1200px;
  /* needed for container min-height */
  font-family: "Meiryo", "Meiryo UI", "Microsoft JhengHei UI",
    "Microsoft JhengHei", "NotoSansHant-Thin", sans-serif !important;
}

body {
  /*background-image: url(../images/index.png);*/
  background-repeat: repeat;
  /*padding-top:30px;*/
  background-color: #000;
}

.clr {
  clear: both;
  display: block;
}

img {
  max-width: 100%;
  height: auto;
}

.menu1 {
  zoom: 1;
}

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

#container {
  background: url('../images/bg-1.jpg') 50% 0 no-repeat #0d60e2;
  background-size: 100% auto;
  width: 100%;
  min-height: 100%;
  height: auto !important;
  /* height: 100%; */
  /*IE6不识别min-height*/
  position: relative;
  padding-bottom: 165px;
  /*高度等于footer的高度*/
  /*margin-bottom: 20px;*/
}

#main {
  width: 1024px;
  height: auto !important;
  /* min-height: 100%; */
  margin-right: auto;
  margin-left: auto;
  position: relative;
}

#header {
  height: 80px;
  width: 100%;
}

.header {
  width: 1200px;
  margin-right: auto;
  margin-left: auto;
  position: relative;
}

.top_header {
  color: #f8f8f8;
  font-weight: bold;
  float: right;
  position: relative;
  text-align: left;
  margin: 8px 0 0 15px;
  width: 200px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  line-height: 21px;
}

.binfo {
  color: #ffd400;
  font-weight: bold;
  cursor: default;
  pointer-events: none;
}

.binfo:hover {
  color: #ffd400;
  text-decoration: none;
}

/* .trade {
  margin-top: -10px;
} */

.trade1 {
  background: url(../images/trade_top.png) no-repeat 50% 0;
  height: 36px;
  position: relative;
}

.trade2,
.trade2_2 {
  background: url(../images/trade_main.png) repeat-y 50% 0;
  margin-right: auto;
  margin-left: auto;
  padding: 0 40px 20px 40px;
  color: #000000;
  min-height: .01%;
  overflow-x: auto;
}

/* .trade2_2 {
  background-image: url(../images/trade_main.png);
  margin-right: auto;
  margin-left: auto;
  padding: 40px 40px 0 40px;
  color: #FFF;
} */

.trade3 {
  background: url(../images/trade_bottom.png) no-repeat 50% 0;
  height: 36px;
}

#goods-tile {
  display: -moz-box;
  /* OLD - Firefox 19- (doesn't work very well) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  display: box;
  /* border-bottom: 1px solid #000; */
  padding: 20px 0;
  position: relative;
  /* align-items: stretch; */
}

#goods-tile::before {
  content: "";
  background-color: #000000;
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 1px;
}

/* #goods-tile::after {
  content: "";
  background-color: #fff;
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 120px;
} */

.list_1 {
  display: flex;
  -ms-flex: 0 0 20%;
  flex: 0 0 20%;
  max-width: 20%;
  width: 100%;
  position: relative;
  align-items: center;
}


.list_2 {
  display: flex;
  -ms-flex: 0 0 60%;
  flex: 0 0 60%;
  max-width: 60%;
  width: 100%;
  padding: 20px 20px 0px 20px;
  color: #000000;
  font-size: 14px;
  flex-direction: column;
}

.list_2::after {
  content: "";
  background-color: #000000;
  position: absolute;
  /* top: 0;
  left: 190px;
  width: 1px;
  height: 100%; */
  top: 6px;
  left: 190px;
  width: 1px;
  height: 85%;
  bottom: 0;
  margin: auto;
}

.list_3 {
  display: flex;
  -ms-flex: 0 0 20%;
  flex: 0 0 20%;
  max-width: 20%;
  width: 100%;
  font-size: 18px;
  padding: 15px 0 15px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.list_3 li {
  margin: 0 0 15px;
  font-size: 16px;
  text-align: center;
}

.list_3 li:nth-child(1) {
  font-size: 18px;
  color: #000000;
  margin-bottom: 5px;
}

.list_3 li:nth-child(2) {
  display: none;
}

.list_3 li.price.promote span.number {
  font-size: 24px;
  color: #000000;
  margin-left: 5px;
}

.list_3::after {
  content: "";
  background-color: #000000;
  position: absolute;
  top: 0;
  left: 0px;
  width: 1px;
  height: 100%;
}

.bar {
  background-image: url(../images/bar_bg.png);
  background-repeat: repeat;
  height: 60px;
  width: 100%;
  position: relative;
}

.bar span {
  color: #00c;
  line-height: 55px;
}

#menu-bg {
  width: 100%;
  height: 80px;
  background-color: rgba(10, 10, 18, 0.85);
}

.menu1 {
  width: 1024px;
  margin: 0 auto;
  text-align: center;
}

.menu1 ul.menu {
  float: left;
  display: block;
}

.menu1 ul.menu:nth-of-type(1) {
  position: absolute;
  left: 11%;
  top: 6%;
}

.menu1 ul.menu>li>a {
  width: 177px;
  display: block;
}

.menu1 ul.menu>li>a>img {
  width: 100%;
}

.menu1 ul.menu li {
  float: left;
}

.menu1 ul.menu~.menu {
  float: right;
}

.menu1 ul.menu~.menu>li:first-child {
  margin-left: 0;
}

.menu1 ul.menu~.menu>li {
  margin: 0 0 0 15px;
}

.menu1 ul.menu~.menu>li>a {
  display: block;
  width: 180px;
  line-height: 80px;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  font-size: 18px;
}

.menu1 ul.menu~.menu>li>a:hover {
  background-image: url("../images/nav_bg_hover.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 180px;
}

.box {
  /* background-color: #231d13; */
  background: url("../images/icon_box.png")no-repeat;
  background-size: auto;
  height: 68px;
  width: 68px;
  /* border: 1px solid #3b3731; */
  border-radius: 12px;
  padding: 4px;
  margin: 0 auto;
  overflow: hidden;
}

.buybtn {
  display: block;
  text-align: center;
  margin: 0 auto;
  color: #fff;
  font-size: 16px;
  background-color: #b60000;
  border-radius: 0;
  padding: 6px 33px;
  border: none;
}

.buybtn:hover,
.buybtn:focus {
  background-color: #fae202;
  color: #000;
  border: none;
}

.btn1,
.btn2,
.btn3 {
  background-image: url(../images/btn.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  height: 54px;
  width: 188px;
  top: 348px;
  position: absolute;
  left: 46%;
  transform: translateX(-50%);
  z-index: 5;
  /* -webkit-filter: drop-shadow(6px 15px 15px rgba(0, 0, 0, 0.85));
  filter: drop-shadow(6px 15px 15px rgba(0, 0, 0, 0.85)); */
}

.btn1 {
  margin-left: 22px;
}

.btn3 {
  background-position-x: -204px;
  margin-left: 225px;
}

.btn2 {
  background-position-x: -408px;
  left: 79%;
  /* right: -15px; */
  transform: none;
}

.btn1:hover,
.btn2:hover,
.btn3:hover {
  background-image: url(../images/btn_hover.png);
}

.btn4 {
  background-image: url(../images/btn2.png);
  background-repeat: no-repeat;
  float: right;
  height: 38px;
  width: 235px;
  margin-top: 360px;
  margin-right: 2px;
  position: relative;
  z-index: 5;
}

.btn4:hover {
  background-image: url(../images/btn2_hover.png);
}

/*footer CSS*/
#footer {
  position: relative;
  /*margin-top: -115px;  /*等于footer的高度*/
  bottom: 0px;
  width: 100%;
  clear: both;
  color: #fff;
  /*padding: 30px 20px 20px 20px;*/
  /* font-size: 12px; */
  font-size: 1rem;
  /*height: 224px;*/
  /* background-image: url(../images/footer_bg.png); */
  background-repeat: no-repeat;
  background-position: center top;
  background-color: #000000;
}

#footer img {
  width: 100%;
  height: auto;
  display: block;
}



#footer .rating {
  text-align: left;
  margin-top: 20px;
}

#footer .rating img {
  width: 20%;
  float: left;
  display: block;
}

#footer .rating div {
  margin-left: 60px;
  /*float: left;*/
}

#footer .rating div p {
  display: list-item;
  list-style: initial;
  margin: 0;
  font-size: 12px;
}

#footer .happytuk,
#footer .mangot5 {
  width: 17%;
  padding: 20px 0 0;
}

/* .gameDevCorp {
  width: 25%;
} */
#footer .gameDevCorp {
  margin-top: 30px;
  width: 25%;
  display: flex;
  padding: 0;
}

#footer .gameDevCorp img:nth-of-type(1) {
  width: 140px;
}

#footer img:nth-of-type(2) {
  width: 140px;
  height: 19px;
  margin: 6px 0 0 8px;
}

#footer .footer-word {
  width: 28%;
  padding-top: 28px;
  font-size: 0.8rem;
}


.toy {
  /* background: url("../images/header_bg.png")no-repeat; */
  /* background-position: top , center; */
  /* background-size: cover; */
  height: 410px;
  width: 1090px;
  margin-left: auto;
  margin-top: 60px;
}

#container2 {
  background: url("../images/bg2.jpg") 50% 0 no-repeat #2682f1;
  /* background-position: top, center; */
  background-size: 100% auto;
  height: 1156px;
  width: 100%;
  margin-left: auto;
}

#container2 .toy {
  background-image: url(../images/header_bg2.png);
}

.title1,
.title2,
.title3 {
  background-repeat: no-repeat;
  background-position: 0 0;
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  margin-left: -307px;
  top: 327px;
  z-index: 7;
}

.title1 {
  background-image: url(../images/title1.png);
  width: 347px;
  height: 75px;
}

.title2 {
  background-image: url(../images/title2.png);
  width: 272px;
  height: 75px;
}

.title3 {
  background-image: url(../images/title3.png);
  width: 275px;
  height: 75px;
}

.center {
  text-align: center;
  margin-top: 30px;
}

.center>ul:nth-child(1) {
  margin: 0;
}

.center>ul>.text-center #paginationInventory {
  margin: 10px 0;
}

/*=====================上方平台選單=======================*/
.mangot5box {
  background: #000;
  height: 49px;
  border-bottom: 1px #000 solid;
}

.mangot5all {
  width: 1000px;
  margin: 0 auto;
}

.mangot5logo {
  float: left;
}

.mangot5bigad {
  float: left;
  margin-left: 54px;
}

.mangot5menu {
  float: right;
}

.nav-top {
  text-align: right;
  margin: 0 auto;
  height: 49px;
  color: #f0f0f0;
  z-index: 2;
  position: relative;
  width: 100%;
}

.nav-top a {
  display: block;
  padding: 0px 6px;
  line-height: inherit;
  cursor: pointer;
  color: #fff;
  text-decoration: none;
  font-family: "Meiryo", "Meiryo UI", "Microsoft JhengHei UI",
    "Microsoft JhengHei", sans-serif;
}

.nav-top a:hover {
  color: #a0d9f7;
  text-decoration: none;
  font-family: "Meiryo", "Meiryo UI", "Microsoft JhengHei UI",
    "Microsoft JhengHei", sans-serif;
}

.nav_menu {
  line-height: 45px;
  font-weight: 700;
  text-transform: uppercase;
  font-family: "Meiryo", "Meiryo UI", "Microsoft JhengHei UI",
    "Microsoft JhengHei", sans-serif;
}

.nav_menu-item {
  display: inline-block;
  position: relative;
  text-decoration: none;
}

.nav_menu-item:hover {
  text-decoration: none;
}

.nav_menu-item:hover .nav_submenu {
  display: block;
}

.nav_submenu {
  font-weight: 300;
  text-transform: none;
  display: none;
  position: absolute;
  width: 100px;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: left;
  border-radius: 5px;
  margin-left: -15px;
}

.nav_submenu-item {
  text-align: center;
  line-height: 30px !important;
}

.modal-header {
  border-bottom: 0px;
  padding: 10px 10px 0 10px;
}

.modal-footer {
  border-top: 0px;
  text-align: center;
  padding-bottom: 53px;
}

.modal-body {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}

#inventoryModal .modal-body span {
  color: #d9200e;
}

.modal-body .gift .machineContainer3 {
  margin: 0 100px 40px;
}

.modal-body .gift .machineContainer4 {
  font-size: 17px;
}

/* #ge_dialog .modal-body .gift .machineContainer3 .img-rounded {
  border: 10px solid transparent;
  border-image: url('../images/icon_box.png') 8 round;
  margin: 3px;
} */
/* .modal-body .gift .machineContainer3 img {
  margin: 3px;
} */

.windows.modal-content {
  -webkit-box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
  border: 0px;
}

.windows1.modal-content {
  -webkit-box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
  border: 0px;
}

.windows2.modal-content {
  -webkit-box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
  border: 0px;
}

.windows,
.windows1,
.windows2 {
  background: rgba(0, 0, 0, .6);
  border: 1px solid #54cff1;
  border-radius: 5px;
  text-align: center;
  margin: 5% auto;
}

.modal-content {
  background-color: transparent;
}

.modal-footer a.btn-primary {
  background-color: #90120b;
  border-color: transparent;
  width: 100px;
}

.btn-primary:active:focus {
  background-color: #ffd400;
  color: #000;
}


.modal-footer button.btn-primary {
  background-color: #4d4c4c;
  border: transparent;
  width: 100px;
}

.modal-footer #purchase_again,
.modal-footer #purchaseGachaButton {
  background-color: #90120b;
}

.modal-footer #purchase_again:hover,
.modal-footer #purchaseGachaButton:hover {
  background-color: #ffd400;
  color: #000;
}

.modal-footer .btn-primary:nth-of-type(2),
.modal-footer .jumpClose {
  border: 1px solid #d9200e;
}

.modal-footer .btn-primary:nth-of-type(2),
.modal-footer .jumpClose {
  border: transparent;
  background-color: #4d4c4c;
  color: #fff;
  margin-left: 30px;
  width: 100px;
}

.modal-footer .btn+.btn {
  margin-left: 30px;
}

.modal-footer .btn-primary:nth-of-type(2):hover,
.modal-footer .jumpClose:hover {
  filter: brightness(1.5);
}

#inventoryModalBody .modal-footer #inventoryModalProcess {
  background-color: #90120b;
  border-color: transparent;
}

#inventoryModalBody .modal-footer #inventoryModalProcess:active:focus {
  background-color: #f7e797;
}

#inventoryModalBody .modal-footer #inventoryModalProcess:hover {
  filter: brightness(1.2);
}

#inventoryModalBody .modal-footer .modalClose {
  border-color: transparent;
}

.close {
  opacity: 1;
  font-weight: 300;
  text-shadow: none;
  font-size: 30px;
  color: #fff;
}

.close:hover {
  color: #fff;
}

button.close {
  width: 30px;
  height: 30px;
  background: url(../images/X.png) center / contain no-repeat;
  border: none;
}

#purchaseGachaButton_close span,
#fs1_dialog .modal-content1 .modal-header button span {
  display: none;
}

/*table*/
.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
  border-top: none;
}

.table>tbody>tr>th {
  /* background-color: #000; */
  text-align: center;
}

.table>tbody:nth-child(1)>tr:nth-child(1),
.trade2_2>.table>tbody:nth-child(2)>tr:nth-child(1) {
  /* background: #121314; */
  color: #008aff;
}

/* .table>tbody>tr>th:first-child,
.table>tbody>tr>td:first-child {
  width: 15%;
}

.table>tbody>tr>th:nth-child(2),
.table>tbody>tr>td:nth-child(2) {
  width: 63%;
}

.table>tbody>tr>th:nth-child(3),
.table>tbody>tr>th:nth-child(4),
.table>tbody>tr>td:nth-child(3),
.table>tbody>tr>td:nth-child(4) {
  width: 20%;
}

.table>tbody>tr>th:last-child,
.table>tbody>tr>td:last-child {
  width: 2%;
} */

.trade2 .input-group-text>a .btn-primary {
  border-radius: 0;
  background: rgba(0, 0, 0, 0.25);
  margin-right: 5px;
  position: relative;
}

.inventory .trade2 .input-group-text>a .btn-primary::before,
.inventory-end .trade2 .input-group-text>a .btn-primary::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  border-width: 0 0 12px 12px;
  border-color: transparent transparent transparent #2e6da4;
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
}

.inventory-end .trade2 .input-group-text>a .btn-primary::before {
  border-color: transparent transparent transparent #ffd400;
}

.trade2 .input-group-text>a .btn-primary:hover {
  background: #2e6da4;
}

.trade2 .table>tbody>tr>th .sendItemAllButton {
  border-radius: 0;
  /* background: rgba(0, 0, 0, 0.25); */
  background: #008aff;
  border-color: transparent;
  padding: 6px 20px;
}

.trade2 .table>tbody>tr>th .sendItemAllButton:hover {
  background: #0061b6;
}

/*分頁按鈕*/
.pagination>li>a,
.pagination>li>span,
.pagination>.disabled>span,
.pagination>.disabled>span:hover,
.pagination>.disabled>span:focus,
.pagination>.disabled>a,
.pagination>.disabled>a:hover,
.pagination>.disabled>a:focus {
  color: #bfbfbf;
  background-color: #090909;
  border: solid 1px #fff;
  font-size: 20px;
}

.pagination>.active>a,
.pagination>.active>span,
.pagination>.active>a:hover,
.pagination>.active>span:hover,
.pagination>.active>a:focus,
.pagination>.active>span:focus {
  z-index: 2;
  color: #fff;
  cursor: default;
  background-color: #008aff;
  border: solid 1px #fff;
  font-size: 20px;
}

.pagination>li>a:focus,
.pagination>li>a:hover,
.pagination>li>span:focus,
.pagination>li>span:hover {
  z-index: 3;
  color: #fff;
  background-color: #0061b6;
  font-size: 20px;
}

/*button*/
.trade2 .btn-warning,
.trade2_2 .btn-warning {
  background-color: #b60000;
  border-color: transparent;
  border-radius: 0;
  padding: 6px 20px;
  margin: 20px 0 0;
}

.trade2 .btn-warning:hover,
.trade2_2 .btn-warning:hover {
  background-color: #fae202;
  color: #000;
}

.table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td {
  padding: 8px;
  line-height: 1.42857143;
  /* line-height: 4; */
  vertical-align: middle;
  /*border-top: 1px solid #ddd;*/
  text-wrap: nowrap;
}

.table>tbody>tr>td:nth-last-of-type(6) {
  line-height: 2;
}

.trade2 tr td .btn-warning {
  margin: 0;
}

#ft {
  position: relative;
  background: #181818;
  padding: 15px 0;
  margin: 0 auto;
  min-height: 99px;
  z-index: 1;
}

#ft>div {
  max-width: unset;
}

#ft .copyright {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  list-style-type: none;
  font-size: 12px;
  line-height: 1.6;
  font-weight: 300;
  color: #ffffff;
  margin: 0;
  padding: 0;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 100%;
}

#ft .copyright li {
  margin: 0;
  vertical-align: top;
  line-height: 1.6;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 12px;
  margin-right: 15px;
}

#ft .copyright li:nth-child(2) {
  margin: 0 25px;
}

#ft .copyright li:nth-child(3) {
  margin: 0 25px 0 0;
}

#ft .copyright li:last-child {
  line-height: 1.6;
  align-items: center;
}

#ft .copyright .rating {
  margin-right: 12px;
}