@charset "utf-8";
body {box-sizing: border-box; background: url(../images/bk.png) repeat-x; font-family: sans-serif;}
.sub {font-size: 0.7em; vertical-align: baseline;}

header {background: url(../images/top_bk.png) no-repeat; background-size: 100%; text-align: center; padding: 40px 0;}
.period {width: 100%;  margin: 40px 0; background: #003f98; height: 80px; line-height: 80px; font-size: 32px; color: #fff000; font-weight: bold; display: inline-flex; justify-content: center; align-items: center;}
.period span {display: inline-block; background: #fff; color: #ea5404; height: 60px; line-height: 60px; font-size: 24px; width: 4em; border-radius: 30px; margin-right: 32px;}
.period p {font-size: 24px;}

nav {text-align: center;}
nav ul {display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
nav ul li {padding: 4px 0;border-bottom: solid 1px #fff; border-top: solid 1px #fff;}
nav ul li:first-child {background: #656464;}
nav ul li:nth-child(2) {background: #44b034;}
nav ul li:nth-child(3) {background: #f39700;}
nav ul li:nth-child(4) {background: #eb6d7a;}
nav ul li:nth-child(5) {background: #00a0e8;}
nav ul li:nth-child(6) {background: #931e56;}
nav ul li:nth-child(7) {background: #ea5404;}
nav ul li:nth-child(8) {background: #009d96;}
nav ul li:nth-child(9) {background: #574b9d;}
nav ul li a {display: inline-block; width: 100%; text-decoration: none;  font-weight: bold; color: #fff;}
nav ul li a:hover {opacity: 0.5;}

footer .download {width: 100%; background: #efefef; display: inline-flex; justify-content: center; align-items: center;}
footer .download a {display: inline-flex; justify-content: center; align-items: center; text-decoration: none}
footer .footer_logo {width: 100%; text-align: center;}

@media screen and (max-width: 479px) {
  header {padding: 16px 0;}
  header img {width: 100vw;}
  .wrapper {width: 100vw; margin: 0 auto;} 
  .period {margin: 16px 0; height: 10vw; line-height: 10vw;}
  .period span {height: 6vw; line-height: 6vw; font-size: 3.5vw; border-radius: 3vw; width: 3em;margin-right: 2vw;}
  .period p {font-size: 3.5vw;}
  
  nav ul {width: 100%; margin: 8px 0;}
  nav ul li {width: 100%;}
  nav ul li a {height: 10vw; line-height: 10vw; font-size: 4vw;}
  nav ul li img {width: 96vw; background: #fff; padding: 2vw;}
  
  footer .download {height: 12vw; margin: 4vw 0;}
  footer .download img {height: 8vw; margin: 0 2vw;}
  footer .download a {margin: 0; font-size: 4vw; font-weight: bold; color: #4b4b4b;}
  footer .footer_logo {margin: 4vw 0 8vw 0;}

}

@media screen and (min-width: 480px) and (max-width: 599px) {
  header img {width: 480px;}
  .wrapper {width: 680px; margin: 0 auto;} 
  .period {margin: 16px 0; height: 10vw; line-height: 10vw; }
  .period span {height: 8vw; line-height: 8vw; font-size: 3.5vw; border-radius: 4vw; width: 3.5em; margin-right: 2vw;}
  .period p {font-size: 3.5vw;}
  
  nav ul {width: 100%; margin: 8px 0;}
  nav ul li {width: 100%;}
  nav ul li a {height: 10vw; line-height: 10vw; font-size: 4vw;}
  nav ul li img {width: 96vw; background: #fff; padding: 2vw;}

  footer .download {height: 12vw; margin: 4vw 0;}
  footer .download img {height: 8vw; margin: 0 2vw;}
  footer .download a {margin: 0; font-size: 4vw; font-weight: bold; color: #4b4b4b;}
  footer .footer_logo {margin: 4vw 0 8vw 0;}
  
}


@media screen and (min-width: 600px) and (max-width: 959px) {
  header img {width: 600px;}
  .wrapper {width: 600px; margin: 0 auto;} 
  .period {margin: 16px 0; height: 60px; line-height: 60px; }
  .period span {height: 40px; line-height: 40px; font-size: 20px; border-radius: 20px; width: 3.5em; margin-right: 16px;}
  .period p {font-size: 20px;}

  nav ul li {width: 50%;}
  nav ul li:first-child {width: 100%;}
  nav ul li a {height: 32px; line-height: 32px; font-size: 16px;}
  nav ul li img {width: 98%; background: #fff; padding: 1%;}

  footer .download {height: 60px; margin: 16px 0;}
  footer .download img {height: 40px; margin: 0 16px;}
  footer .download a {margin: 0; font-size: 24px; font-weight: bold; color: #4b4b4b;}
  footer .footer_logo {margin: 16px 0 32px 0;}

}


@media screen and (min-width: 960px) and (max-width: 1279px) {
  header img {width: 960px;}
  .wrapper {width: 960px; margin: 0 auto;}

  nav ul li {width: 50%;}
  nav ul li:first-child {width: 100%;}
  nav ul li a {height: 32px; line-height: 32px; font-size: 16px;}
  nav ul li img {width: 98%; background: #fff; padding: 1%;}

  footer .download {height: 60px; margin: 16px 0;}
  footer .download img {height: 40px; margin: 0 16px;}
  footer .download a {margin: 0; font-size: 24px; font-weight: bold; color: #4b4b4b;}
  footer .footer_logo {margin: 16px 0 32px 0;}


}


@media screen and (min-width: 1280px) {
  header img {width: 1280px;}
  .wrapper {width: 1280px; margin: 0 auto;}

  nav ul li {width: 50%;}
  nav ul li:first-child {width: 100%;}
  nav ul li a {height: 32px; line-height: 32px; font-size: 16px;}
  nav ul li img {width: 98%; background: #fff; padding: 1%;}

  footer .download {height: 60px; margin: 16px 0;}
  footer .download img {height: 40px; margin: 0 16px;}
  footer .download a {margin: 0; font-size: 24px; font-weight: bold; color: #4b4b4b;}
  footer .footer_logo {margin: 16px 0 32px 0;}

  
}