canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: transparent;
  top: 0;
  left: 0;
}

.nav-header {
  background-color: rgba(0, 0, 0, 0.3);
  -webkit-transition: .2s;
  transition: .2s;
}

.nav-header .logo {
  -webkit-transition: .2s;
  transition: .2s;
  width: 250px;
}

.header {
  position: relative;
}

.header .header-info {
  margin-top: 200px;
  font-size: 26px;
  letter-spacing: 3px;
}

.header .header-poly {
  height: 500px;
  background: url("../terms/header.jpg");
  background-size: cover;
  background-position: 50% 0%;
  shape-outside: polygon(0% 0%, 100% 0%, 100% 75%, 50% 90%, 0% 75%);
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 50% 90%, 0% 75%);
          clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 50% 90%, 0% 75%);
  position: relative;
  z-index: 2;
}

.header .navshadow {
  background-color: #fe603d;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 1;
}

.title h4 {
  letter-spacing: 2px;
  font-weight: 400;
  position: relative;
}

.title h4::before {
  content: '';
  display: block;
  width: 60%;
  height: 2px;
  position: absolute;
  background-color: #009d95;
  top: -8px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.title h4::after {
  content: '';
  display: block;
  width: 60%;
  height: 2px;
  position: absolute;
  background-color: #009d95;
  bottom: -8px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.content p {
  font-size: 14px;
  letter-spacing: 2px;
  line-height: 30px;
}

.company-intro,
.company-future
.game {
  letter-spacing: 1px;
}

.company-intro {
  -webkit-filter: drop-shadow(0 -6px 3px rgba(0, 0, 0, 0.3));
          filter: drop-shadow(0 -6px 3px rgba(0, 0, 0, 0.3));
  z-index: 3;
  position: relative;
  top: -90px;
}

.company-intro .intro-poly {
  padding: 130px 0 100px;
  background-color: #fff;
  background: url("../terms/bg.jpg");
-moz-background-size:auto;        /*for Firefox*/
-webkit-background-size:auto;        /*for Google Chrome、Safari*/
-o-background-size:auto;        /*for Opera*/
background-size:auto;        /*for IE*/
  background-position:0% 100%;
  shape-outside: polygon(0% 0%, 50% 1.3%, 100% 0%, 100% 100%, 0% 100%);
  -webkit-clip-path: polygon(0% 0%, 50% 1.3%, 100% 0%, 100% 100%, 0% 100%);
          clip-path: polygon(0% 0%, 50% 1.3%, 100% 0%, 100% 100%, 0% 100%);
}


.company-intro .intro-poly-2 {
  padding: 130px 0 100px;
  background-color: #fff;
  background: url("../terms/bg.jpg");
-moz-background-size:auto;        /*for Firefox*/
-webkit-background-size:auto;        /*for Google Chrome、Safari*/
-o-background-size:auto;        /*for Opera*/
background-size:auto;        /*for IE*/
  background-position:0% 100%;
  shape-outside: polygon(0% 0%, 50% 2.4%, 100% 0%, 100% 100%, 0% 100%);
  -webkit-clip-path: polygon(0% 0%, 50% 2.4%, 100% 0%, 100% 100%, 0% 100%);
          clip-path: polygon(0% 0%, 50% 2.4%, 100% 0%, 100% 100%, 0% 100%);
}


.company-future {
  padding: 0px 0 0px;
}

.company-future .content {
  padding-bottom: 300px;
  background: url("../terms/company-2.jpg");
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: 70% 100%;
}



footer {
  font-size: 12px;
  background-image: -moz-linear-gradient( 180deg, rgb(214,32,49) 0%, rgb(235,109,75) 100%);
  background-image: -webkit-linear-gradient( 180deg, rgb(214,32,49) 0%, rgb(235,109,75) 100%);
  background-image: -ms-linear-gradient( 180deg, rgb(214,32,49) 0%, rgb(235,109,75) 100%);


}

footer .footer-content {
  padding-top: 50px;
  padding-bottom: 50px;
  color: #fff;
  font-weight: 100;
  letter-spacing: 1px;
  line-height: 20px;

}

footer .logo img {
  width: 200px;
text-align: center;
display: flex !important;
margin: 0 auto !important;
}

.copyright {
  font-size: 12px;
  background-color: #313131;
}

@media screen and (max-width: 1199px) {
  .company-future .content {
    padding-bottom: 350px;
  }
  .company-future .content {
    background-size: 60%;
  }
}

@media screen and (max-width: 991px) {
  .company-future .content {
    padding-bottom: 250px;
  }
  .company-future .content {
    background-size: 65%;
    background-repeat: no-repeat;
    background-position: 100% 100%;
  }
  footer .logo img {
    width: 180px;
  }
  footer .footer-content {
    letter-spacing: 0px;
  }
  footer .address,
  footer .tel {
    padding-top: 0px;
  }
  footer .address::before,
  footer .tel::before {
    left: -10px;
    top: 5px;
  }
}

@media screen and (max-width: 767px) {
  .header .header-info {
    font-size: 18px;
    letter-spacing: 1px;
  }
  .header .header-poly {
    height: 450px;
    shape-outside: polygon(0% 0%, 100% 0%, 100% 78%, 50% 90%, 0% 78%);
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 78%, 50% 90%, 0% 78%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 78%, 50% 90%, 0% 78%);
  }
  .company-intro {
    top: -70px;
  }
  .company-intro .intro-poly {
    padding: 100px 0 120px;
    shape-outside: polygon(0% 0%, 50% 0.8%, 100% 0%, 100% 100%, 0% 100%);
    -webkit-clip-path: polygon(0% 0%, 50% 2.8%, 100% 0%, 100% 100%, 0% 100%);
            clip-path: polygon(0% 0%, 50% 2.8%, 100% 0%, 100% 100%, 0% 100%);
  }

  .company-intro .intro-poly-2 {
    padding: 100px 0 120px;
    shape-outside: polygon(0% 0%, 50% 1.3%, 100% 0%, 100% 100%, 0% 100%);
    -webkit-clip-path: polygon(0% 0%, 50% 1.3%, 100% 0%, 100% 100%, 0% 100%);
            clip-path: polygon(0% 0%, 50% 1.3%, 100% 0%, 100% 100%, 0% 100%);
  }

  .title h4 {
    font-size: 18px;
  }
  .content p {
    letter-spacing: 1px;
  }
  footer .address,
  footer .tel {
    padding-top: 20px;
    text-align: center;
  }
  footer .address::before,
  footer .tel::before {
    display: none;
  }
}

@media screen and (max-width: 575px) {
  .nav-header .logo {
    width: 180px;
  }
  .company-intro .intro-poly {
    padding: 100px 0 100px;
  }
  .company-future .content {
    padding-bottom: 200px;
  }
}



.aiButton {
	box-shadow:inset 0px 1px 0px 0px #cf866c;
	background:linear-gradient(to bottom, #d0451b 5%, #bc3315 100%);
	background-color:#d0451b;
	border-radius:10px;
	border:1px solid #942911;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:18px;
	padding:16px 48px;
	text-decoration:none;
	text-shadow:0px 1px 0px #854629;
  margin-left: 10px;
}
.aiButton:hover {
	background:linear-gradient(to bottom, #bc3315 5%, #d0451b 100%);
	background-color:#bc3315;
}
.aiButton:active {
	position:relative;
	top:1px;
}

        

.game {
  padding: 0px 0 0px;
}

.game .content {
  /*padding-bottom: 300px;*/
    padding-bottom: 180px;
    background: url(../terms/company-3.jpg);
    background-size: 45%;
    background-repeat: no-repeat;
    background-position: 100% 100%;
  }


.game .content img{
  width: 80px;

}

@media screen and (max-width: 900px){
.game .content {
    background-size: 80%;
}


@media screen and (max-width: 1024px){
.game .content {
  background-size: 60%;
}

.ai {
  padding: 0px 0 0px;
}

.ai .content {
  /*padding-bottom: 300px;*/
    padding-bottom: 180px;
    background: url(../terms/aibg.jpg);
    background-size: 45%;
    background-repeat: no-repeat;
    background-position: 100% 100%;
  }


.ai .content img{
  width: 80px;

}

@media screen and (max-width: 900px){
.ai .content {
    background-size: 80%;
}


@media screen and (max-width: 1024px){
.ai .content {
  background-size: 60%;
}




/*

.modal-body {
    max-height: calc( 100vh - 150px);
    overflow-y: auto;
}

.modal-body {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 15px;
}
*/