header {
  font-family: '微軟正黑體';
  width:810px;
  height:80px;
  border-bottom:solid 1px #53b8ed;
  position:fixed;
  z-index:3;
  -webkit-box-shadow:1px 1px 1px #058fd7;
  box-shadow:1px 1px 1px #058fd7;
  background:-owg-linear-gradient(45deg,#47b2eb,#008cd6);
  background:-webkit-linear-gradient(45deg,#47b2eb,#008cd6);
  background:-o-linear-gradient(45deg,#47b2eb,#008cd6);
  background:linear-gradient(45deg,#47b2eb,#008cd6);
  -webkit-transition:.5s ease-in-out;
  -o-transition:.5s ease-in-out;
  transition:.5s ease-in-out;
  padding: 0 10px;
  box-sizing: border-box;
 }

 header .head-in {
  width:100%;
  height:80px;
  margin:auto
 }

 header .head-in .logo {
  float:left;
  margin:30px 0 0 0;
  width:130px;
  -webkit-transition:.5s ease-in-out;
  -o-transition:.5s ease-in-out;
  transition:.5s ease-in-out
 }

 header .head-in .logo img {
  max-width:100%;
  height:auto;
  display:block;
  -webkit-transition:.5s ease-in-out;
  -o-transition:.5s ease-in-out;
  transition:.5s ease-in-out
 }
header .head-in .menu {
  float:right;
  margin:30px 0 0 0;
  -webkit-transition:.5s ease-in-out;
  -o-transition:.5s ease-in-out;
  transition:.5s ease-in-out
 }

header .head-in .menu li {
  float:left;
  font-size:14px;
  font-weight:bold
 }
header .head-in .menu li a {
  display:block;
  padding:0 5px;
  color:#fff
 }
 header .head-in .menu li a:hover {
  color:#c2e9fd
 }

 footer {
  background:#32a1e4;
  color:#fff;
  font-family: '微軟正黑體';
  width: 810px;
  padding: 0 20px;
  box-sizing: border-box;
 }
 footer .company-infor {
  width:100%;
  margin:0 auto;
  overflow:hidden;
  padding:44px 0
 }
 @media only screen and (max-width:1299px) {
  footer .company-infor {
   width:90%
  }
 }
 footer .company-infor .foot-title {
  color:#96d7ff;
  font-size:18px;
  font-weight:bold;
  display:block;
  margin:0 0 10px 0
 }
 footer .company-infor .foot-logo {
  width:50%;
  float:none;
  margin:20px auto;
  text-align:center;
  font-size:13px
 }
 @media only screen and (max-width:999px) {
  footer .company-infor .foot-logo {
   width:100%;
   float:none;
   margin:20px auto;
   text-align:center
  }
 }
 @media only screen and (max-width:480px) {
  footer .company-infor .foot-logo {
   width:80%
  }
 }
 footer .company-infor .foot-logo img {
  max-width:80%;
  margin:0 0 20px 0;
  display:block
 }
 @media only screen and (max-width:999px) {
  footer .company-infor .foot-logo img {
   display:inline-block
  }
 }
 footer .company-infor .foot-logo span {
  display:block
 }
 footer .company-infor .foot-link {
  width:25%;
  float:left
 }
 @media only screen and (max-width:999px) {
  footer .company-infor .foot-link {
   width:33.33%
  }
 }
 @media only screen and (max-width:767px) {
  footer .company-infor .foot-link {
   width:100%;
   text-align:center
  }
 }
 footer .company-infor .foot-link ul {
  width:80%;
  overflow:hidden
 }
 @media only screen and (max-width:767px) {
  footer .company-infor .foot-link ul {
   margin:20px auto
  }
 }
 footer .company-infor .foot-link ul li {
  float:left;
  width:50%
 }
 @media only screen and (max-width:1299px) {
  footer .company-infor .foot-link ul li {
   width:50%
  }
 }
 footer .company-infor .foot-link ul li a {
  color:#fff;
  font-size:15px;
  font-weight:bold
 }
 footer .company-infor .foot-link ul li a:hover {
  color:#98d5fa;
 }
 footer .company-infor .foot-text {
  width:50%;
  float:left
 }
 footer .company-infor .foot-text span{ display: block; width: 100%;}
 @media only screen and (max-width:999px) {
  footer .company-infor .foot-text {
   width:33.33%
  }
 }
 @media only screen and (max-width:767px) {
  footer .company-infor .foot-text {
   width:100%;
   text-align:center
  }
 }
 footer .company-infor .foot-text span {
  font-size:13px;
  padding:0 5px 0 0
 }
 footer .company-infor .foot-link2 {
  width:12%;
  float:left;
  height:118px;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center
 }
 @media only screen and (max-width:999px) {
  footer .company-infor .foot-link2 {
   width:33.33%
  }
 }
 @media only screen and (max-width:767px) {
  footer .company-infor .foot-link2 {
   width:100%;
   text-align:center
  }
 }
 footer .company-infor .foot-link2 a {
  display:block;
  margin:0 10px
 }
 footer .copyright {
  width:100%;
  height:54px;
  line-height:54px;
  border-top:solid 1px #5ab3e9;
  -webkit-box-shadow:-1px -1px 1px #1f8bcc;
  box-shadow:-1px -1px 1px #1f8bcc;
  text-align:center;
  font-size:13px;
  color:#fff
 }
 footer .copyright a {
  color:#fff
 }
 @media only screen and (max-width:480px) {
  footer .copyright {
   line-height:normal;
   height:auto;
   padding:10px 0
  }
  footer .copyright span {
   display:block;
   text-align:center
  }
 }