@charset "utf-8";
*{padding:0;margin:0;list-style:none;-webkit-box-sizing: border-box;box-sizing: border-box;font-family: "FranklinGothic-Medium", "Google Sans",Roboto,Arial,sans-serif;}
body{ line-height:100%;-webkit-text-size-adjust:none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);font-size: 14px;}
em,address,i{font-style:normal}
a{color:inherit;text-decoration:none;cursor: pointer;}
a img{border:none;}
img{vertical-align:middle;max-width: 100%;}
img {
image-rendering:-moz-crisp-edges;
image-rendering:-o-crisp-edges;
image-rendering:-webkit-optimize-contrast;
image-rendering: crisp-edges;
-ms-interpolation-mode:nearest-neighbor;
}
input, button, select, textarea {
outline: none;
-webkit-appearance: none;
border-radius: 0;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
 -webkit-appearance: none;
}
input[type="number"] {
 -moz-appearance: textfield;
}

html{ height: 100%; font-size: 100px;}
body{
    position: relative; height: 100%; background-color: #fff;
}

.container{ position: relative; min-height: 100%; margin: 0 auto; display: flex; flex-direction: column; overflow: hidden;}
.container-width{ margin: 0 auto; max-width: 1500px;}

.header{ flex-shrink: 0; position: absolute; width: 100%; padding: .16rem 0; background-image: linear-gradient(to bottom, #496f0c, transparent);}
.header-main{ display: flex; justify-content: space-between; padding: 0 .4rem;}
.logo{ flex-shrink: 0; width: 1.3rem;}
.nav{ display: flex; height: 100%; padding: .1rem .7rem 0 0;}
.nav-btn{ display: none; width: .24rem; height: .18rem; background: url(../images/nav-btn.png) no-repeat; background-size: contain;}
.nav-list ul{ display: flex;}
.nav-list a{ display: flex; padding: .1rem .4rem; color: #fff; line-height: 1;font-size: .26rem; text-transform: uppercase; border: solid .02rem transparent; border-radius: .12rem;}
.nav-list a:hover{ border-color: #fff;}
.nav .curr{ color: #01875f;}
.nav .curr span::after{ content: ""; position: absolute; bottom: 0; left: 0; right: 0; border-bottom: solid 3px; border-top-left-radius: 3px; border-top-right-radius: 3px;}

.main{ flex: 1; display: flex; flex-direction: column;}

.promo{ flex-shrink: 0; overflow: visible; padding: .9rem 0 3rem; background: url(../images/header-pattern.png) repeat #a3cf4f; background-size: 7.14rem auto; pointer-events: none;}
.promo-main{ position: relative; display: flex; justify-content: space-between;}
.promo-heading{ flex-shrink: 0; position: relative; left: -2.5%; top: -.04rem; width: 8.3rem; pointer-events: none;}
.promo-character{ flex: 1; position: relative; pointer-events: none;}
.promo-character img{ position: absolute; z-index: 2; left: -17%; top: .34rem; max-width: none; width: 9.7rem;}

.page-content{ flex-grow: 1; position: relative; padding: 0 0 .6rem; background: url(../images/bg.png) center repeat #fff7db; background-size: .34rem;}
.page-content::before{ content: ""; position: absolute; bottom: 100%; left: 0; right: 0; height: 2.52rem; background: url(../images/main-bg-top.png) no-repeat; background-size: 100% 100%; pointer-events: none;}
.page-content::after{ content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 1.97rem; background: url(../images/main-bg-bottom.png) no-repeat; background-size: 100% 100%; pointer-events: none;}

.companyGame-heading{ padding: .6rem 0 .5rem; font-size: .88rem; font-family: 'Boredfjord'; color: #71471f; line-height: 1; text-align: center;}
.companyGame-list{ display: flex; justify-content: space-between; padding: .6rem .1rem;}
.companyGame-column{ display: flex; flex-direction: column; justify-content: space-between; width: 50%; padding: 0 .21rem;}
.companyGame-item{ position: relative; display: flex; flex-direction: column;}
.companyGame-item::before{ content: ""; position: absolute; z-index: 1; top: -.26rem; left: 50%; transform: translateX(-50%); width: .64rem; height: .78rem; background: url(../images/pin.png) no-repeat; background-size: contain;}
.companyGame-item a{ position: relative; display: flex; overflow: hidden; border: solid .1rem #fff; border-radius: .6rem; box-shadow: -.08rem .12rem .1rem rgba(110, 122, 37, .5);}
.companyGame-item .img{ width: 100%;}
.companyGame-item a:hover img{ transform: scale(1.05);}
.companyGame-item img{ max-width: none; width: 100%; height: 100%; object-fit: cover; transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);}
.companyGame-item .text{ position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; align-items: center; height: 1.34rem; background: #94bf51; text-align: center; font-size: .5rem; font-family: 'Boredfjord'; color: #fff; line-height: 1;}
.companyGame-item.item3::before{ top: -.14rem;}
.companyGame-item.item3 .text{ top: 0; bottom: 0; right: auto; height: auto; padding: 0 5%; max-width: 60%; background: transparent; font-size: .36rem; line-height: 1.2;}

.game-details{ display: flex; justify-content: space-between; padding: 3% .1rem 0 .2rem;}
.game-details-left{ margin: 0 2% 2% 0;}

.footer{ flex-shrink: 0; padding: 2.8rem 0 1.2rem; background: url(../images/footer-pattern.jpg) center repeat; background-size: 5.1rem auto;}
.footer{ padding: 2.8rem 0 1.2rem; background: url(../images/footer-pattern.jpg) center repeat; background-size: 5.1rem auto;}
.footer-main{ display: flex; justify-content: center; }
.logo2{ margin: 0 .9rem 0 .7rem; width: 1.31rem;}
.footer-nav{ display: flex; flex-direction: column; flex-wrap: wrap; height: 1.9rem; padding: 0 0 0 .74rem; border-left: solid .02rem #706952;}
.footer-nav li{ display: flex; width: 2.9rem; margin-top: .06rem;}
.footer-nav a{ line-height: 1.35; font-size: .3rem; color: #3d3e3a;}
.footer-nav a:hover{ color: #71471f;}

@media (max-width: 1920px) {
    .header .container-width {
      max-width: 1920px;
    }
}
@media (max-width: 1440px) {
    .promo-heading{ width: 50%; left: 0;}
    .promo-character img{ width: 130%; top: 3%;}
}
@media (max-width: 1280px) {
    .header-main{ padding-right: 0;}
    .logo{ width: .9rem;}
    .nav {
      padding-right: 0;
    }
    .nav a{ font-size: .22rem;}
    .companyGame-item::before{ width: .4rem; top: -.16rem;}
    .companyGame-item a{ border-width: .04rem; border-radius: .2rem;}
    .companyGame-item .text{ height: 24%; font-size: .3rem;}
    .companyGame-item.item3 .text{ font-size: .2rem;}
}
@media (max-width: 980px) {
    .footer-main{ flex-direction: column; align-items: center; padding: 0 .2rem;}
    .footer-nav{ width: 100%; border-left: none; border-top: solid 1px #706952; margin-top: 5%; padding-top: 3%;}
}
@media (max-width: 768px) {
    .nav .nav-list{ position: absolute; z-index: 10; left: 0; right: 0; top: 90%; margin: 0 .2rem; padding: .26rem 0 .2rem;}
    .nav .nav-list::before{ content: ""; position: absolute; left: 0; top: 5%; bottom: 10%; width: 100%; background-color: #fff; border-radius: .2rem; transform: rotate(-2deg); z-index: 2;}
    .nav .nav-list ul{ position: relative; z-index: 2; display: block;}
    .nav .nav-list a{ padding-top: .04rem; padding-bottom: .04rem; color: #3d3e3a; font-size: .18rem;}
    .nav .nav-list a:hover{ border-color: transparent; color: #9b4d16;}
    .nav.nav-show .nav-btn{ z-index: 10; background-image: url(../images/nav-close.png);}
    .nav.nav-show::after{ content: ""; position: fixed; z-index: 9; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .2);}
    .header-main{ padding-left: .2rem; padding-right: .2rem;}
    .logo{ width: .64rem;}
    .nav-btn{ display: block;}
    .nav-list{ display: none;}
    .promo{ padding-bottom: 1.5rem;}
    .promo-main{ flex-direction: column; align-items: center;}
    .promo-heading{ width: 94%;}
    .promo-character img{ position: relative; left: 20%; width: 80%;}
    .page-content{ padding-bottom: 0;}
    .page-content::before,
    .page-content::after{ background-size: 200% 100%;}
    .companyGame-heading{ font-size: .5rem;}
    .companyGame-list{ display: block;}
    .companyGame-column{ width: 100%;}
    .companyGame-item{ margin-top: 7%;}
    .companyGame-list{ padding-top: 0; padding-left: 0; padding-right: 0; padding-bottom: .3rem;}
    .companyGame-heading{padding-top: 10%; padding-bottom: 6%;}
    .game-details{ flex-direction: column; padding-left: 4%; padding-right: 4%;}
}
@media (max-width: 640px) {
    .companyGame-heading{ font-size: .34rem;}
    .companyGame-item .text{ font-size: .22rem;}
    .companyGame-item::before{ width: .3rem; top: -.1rem;}
    .footer{ padding-top: 2.2rem;}
    .footer-nav{ flex-wrap:nowrap; padding-left: 0;}
    .footer-nav a{ font-size: .18rem;}
    .logo2{ width: .8rem;}
}