@-webkit-keyframes fadeout {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
@-webkit-keyframes fadein {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
#mainimage {
  background: url(../img/index/mainimage.jpg) center top no-repeat #10589e;
  height: 600px;
  min-width: 1000px;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  text-align: center; }
  #mainimage h1 {
    margin: 0;
    padding: 0; }
    #mainimage h1 img {
      width: 1000px;
      height: auto; }
  #mainimage #copy img:nth-child(1) {
    position: absolute;
    top: 25px;
    left: 50%;
    margin-left: -170px;
    animation: fadein 0.5s linear 3s forwards;
    opacity: 0;
    z-index: 10; }
  #mainimage #copy img:nth-child(2) {
    position: absolute;
    top: 104px;
    left: 50%;
    margin-left: -324px;
    animation: fadein 0.5s linear 3.2s forwards;
    opacity: 0;
    z-index: 10; }
  #mainimage #copy img:nth-child(3) {
    position: absolute;
    top: 283px;
    left: 50%;
    margin-left: -375px;
    animation: fadein 0.5s linear 3.4s forwards;
    opacity: 0;
    z-index: 10; }
  #mainimage .white {
    transform: rotate(45deg);
    background: #fff;
    position: absolute;
    width: 110px;
    height: 110px; }
  #mainimage .box {
    width: 449px;
    height: 449px;
    transform: rotate(45deg);
    position: absolute;
    left: 50%;
    margin-left: -374px;
    top: 25px;
    background: #fff; }
  #mainimage .box1 {
    width: 221px;
    height: 221px;
    transform: rotate(45deg);
    position: absolute;
    left: 50%;
    margin-left: 110px;
    top: 38px;
    overflow: hidden; }
    #mainimage .box1 .wh {
      background: #fff;
      width: 55.25px;
      height: 55.25px;
      position: absolute;
      backface-visibility: hidden;
      border: 0.5px solid #fff;
      box-sizing: content-box; }
    #mainimage .box1 .l1 {
      left: 0; }
    #mainimage .box1 .l2 {
      left: 55.25px; }
    #mainimage .box1 .l3 {
      left: 110.5px; }
    #mainimage .box1 .l4 {
      left: 165.75px; }
    #mainimage .box1 .t1 {
      top: 0; }
    #mainimage .box1 .t2 {
      top: 55.25px; }
    #mainimage .box1 .t3 {
      top: 110.5px; }
    #mainimage .box1 .t4 {
      top: 165.75px; }
  #mainimage .box2 {
    width: 592px;
    height: 592px;
    transform: rotate(45deg);
    position: absolute;
    left: 50%;
    margin-left: 237px;
    top: -408px;
    overflow: hidden; }
    #mainimage .box2 .wh {
      background: #fff;
      width: 148px;
      height: 148px;
      position: absolute;
      backface-visibility: hidden;
      border: 0.5px solid #fff;
      box-sizing: content-box; }
    #mainimage .box2 .l1 {
      left: 0; }
    #mainimage .box2 .l2 {
      left: 148px; }
    #mainimage .box2 .l3 {
      left: 296px; }
    #mainimage .box2 .l4 {
      left: 444px; }
    #mainimage .box2 .t1 {
      top: 0; }
    #mainimage .box2 .t2 {
      top: 148px; }
    #mainimage .box2 .t3 {
      top: 296px; }
    #mainimage .box2 .t4 {
      top: 444px; }
  #mainimage .box3 {
    width: 224px;
    height: 224px;
    transform: rotate(45deg);
    position: absolute;
    left: 50%;
    margin-left: -47px;
    top: -121px;
    overflow: hidden; }
    #mainimage .box3 .wh {
      background: #fff;
      width: 56px;
      height: 56px;
      position: absolute;
      backface-visibility: hidden;
      border: 0.5px solid #fff;
      box-sizing: content-box; }
    #mainimage .box3 .l1 {
      left: 0; }
    #mainimage .box3 .l2 {
      left: 56px; }
    #mainimage .box3 .l3 {
      left: 112px; }
    #mainimage .box3 .l4 {
      left: 168px; }
    #mainimage .box3 .t1 {
      top: 0; }
    #mainimage .box3 .t2 {
      top: 56px; }
    #mainimage .box3 .t3 {
      top: 112px; }
    #mainimage .box3 .t4 {
      top: 168px; }
  #mainimage .box4 {
    width: 592px;
    height: 592px;
    transform: rotate(45deg);
    position: absolute;
    left: 50%;
    margin-left: -130px;
    top: 372px;
    overflow: hidden; }
    #mainimage .box4 .wh {
      background: #fff;
      width: 148px;
      height: 148px;
      position: absolute;
      backface-visibility: hidden;
      border: 0.5px solid #fff;
      box-sizing: content-box; }
    #mainimage .box4 .l1 {
      left: 0; }
    #mainimage .box4 .l2 {
      left: 148px; }
    #mainimage .box4 .l3 {
      left: 296px; }
    #mainimage .box4 .l4 {
      left: 444px; }
    #mainimage .box4 .t1 {
      top: 0; }
    #mainimage .box4 .t2 {
      top: 148px; }
    #mainimage .box4 .t3 {
      top: 296px; }
    #mainimage .box4 .t4 {
      top: 444px; }
  #mainimage .box5 {
    width: 221px;
    height: 221px;
    transform: rotate(45deg);
    position: absolute;
    left: 50%;
    margin-left: 110px;
    top: 38px;
    overflow: hidden; }
    #mainimage .box5 .wh {
      background: #fff;
      width: 55.25px;
      height: 55.25px;
      position: absolute;
      backface-visibility: hidden;
      border: 0.5px solid #fff;
      box-sizing: content-box; }
    #mainimage .box5 .l1 {
      left: 0; }
    #mainimage .box5 .l2 {
      left: 55.25px; }
    #mainimage .box5 .l3 {
      left: 110.5px; }
    #mainimage .box5 .l4 {
      left: 165.75px; }
    #mainimage .box5 .t1 {
      top: 0; }
    #mainimage .box5 .t2 {
      top: 55.25px; }
    #mainimage .box5 .t3 {
      top: 110.5px; }
    #mainimage .box5 .t4 {
      top: 165.75px; }
  #mainimage .box6 {
    width: 950px;
    height: 950px;
    transform: rotate(45deg);
    position: absolute;
    left: 50%;
    margin-left: 572px;
    top: -15px;
    overflow: hidden; }
    #mainimage .box6 .wh {
      background: #fff;
      width: 237.5px;
      height: 237.5px;
      position: absolute;
      backface-visibility: hidden;
      border: 0.5px solid #fff;
      box-sizing: content-box; }
    #mainimage .box6 .l1 {
      left: 0; }
    #mainimage .box6 .l2 {
      left: 237.5px; }
    #mainimage .box6 .l3 {
      left: 475px; }
    #mainimage .box6 .l4 {
      left: 712.5px; }
    #mainimage .box6 .t1 {
      top: 0; }
    #mainimage .box6 .t2 {
      top: 237.5px; }
    #mainimage .box6 .t3 {
      top: 475px; }
    #mainimage .box6 .t4 {
      top: 712.5px; }
  #mainimage .box7 {
    width: 221px;
    height: 221px;
    transform: rotate(45deg);
    position: absolute;
    left: 50%;
    margin-left: 265px;
    top: 194px;
    overflow: hidden; }
    #mainimage .box7 .wh {
      background: #fff;
      width: 55.25px;
      height: 55.25px;
      position: absolute;
      backface-visibility: hidden;
      border: 0.5px solid #fff;
      box-sizing: content-box; }
    #mainimage .box7 .l1 {
      left: 0; }
    #mainimage .box7 .l2 {
      left: 55.25px; }
    #mainimage .box7 .l3 {
      left: 110.5px; }
    #mainimage .box7 .l4 {
      left: 165.75px; }
    #mainimage .box7 .t1 {
      top: 0; }
    #mainimage .box7 .t2 {
      top: 55.25px; }
    #mainimage .box7 .t3 {
      top: 110.5px; }
    #mainimage .box7 .t4 {
      top: 165.75px; }
  #mainimage .box8 {
    width: 449px;
    height: 449px;
    transform: rotate(45deg);
    position: absolute;
    left: 50%;
    margin-left: -690px;
    top: -292px;
    overflow: hidden; }
    #mainimage .box8 .wh {
      background: #fff;
      width: 112.25px;
      height: 112.25px;
      position: absolute;
      backface-visibility: hidden;
      border: 0.5px solid #fff;
      box-sizing: content-box; }
    #mainimage .box8 .l1 {
      left: 0; }
    #mainimage .box8 .l2 {
      left: 112.25px; }
    #mainimage .box8 .l3 {
      left: 224.5px; }
    #mainimage .box8 .l4 {
      left: 336.75px; }
    #mainimage .box8 .t1 {
      top: 0; }
    #mainimage .box8 .t2 {
      top: 112.25px; }
    #mainimage .box8 .t3 {
      top: 224.5px; }
    #mainimage .box8 .t4 {
      top: 336.75px; }
  #mainimage .box9 {
    width: 298px;
    height: 298px;
    transform: rotate(45deg);
    position: absolute;
    left: 50%;
    margin-left: -858px;
    top: 486px;
    overflow: hidden; }
    #mainimage .box9 .wh {
      background: #fff;
      width: 74.5px;
      height: 74.5px;
      position: absolute;
      backface-visibility: hidden;
      border: 0.5px solid #fff;
      box-sizing: content-box; }
    #mainimage .box9 .l1 {
      left: 0; }
    #mainimage .box9 .l2 {
      left: 74.5px; }
    #mainimage .box9 .l3 {
      left: 149px; }
    #mainimage .box9 .l4 {
      left: 223.5px; }
    #mainimage .box9 .t1 {
      top: 0; }
    #mainimage .box9 .t2 {
      top: 74.5px; }
    #mainimage .box9 .t3 {
      top: 149px; }
    #mainimage .box9 .t4 {
      top: 223.5px; }
  #mainimage .box10 {
    width: 298px;
    height: 298px;
    transform: rotate(45deg);
    position: absolute;
    left: 50%;
    margin-left: -648px;
    top: 277px;
    overflow: hidden; }
    #mainimage .box10 .wh {
      background: #fff;
      width: 74.5px;
      height: 74.5px;
      position: absolute;
      backface-visibility: hidden;
      border: 0.5px solid #fff;
      box-sizing: content-box; }
    #mainimage .box10 .l1 {
      left: 0; }
    #mainimage .box10 .l2 {
      left: 74.5px; }
    #mainimage .box10 .l3 {
      left: 149px; }
    #mainimage .box10 .l4 {
      left: 223.5px; }
    #mainimage .box10 .t1 {
      top: 0; }
    #mainimage .box10 .t2 {
      top: 74.5px; }
    #mainimage .box10 .t3 {
      top: 149px; }
    #mainimage .box10 .t4 {
      top: 223.5px; }
  #mainimage .box11 {
    width: 198px;
    height: 198px;
    transform: rotate(45deg);
    position: absolute;
    left: 50%;
    margin-left: -388px;
    top: 466px;
    overflow: hidden; }
    #mainimage .box11 .wh {
      background: #fff;
      width: 49.5px;
      height: 49.5px;
      position: absolute;
      backface-visibility: hidden;
      border: 0.5px solid #fff;
      box-sizing: content-box; }
    #mainimage .box11 .l1 {
      left: 0; }
    #mainimage .box11 .l2 {
      left: 49.5px; }
    #mainimage .box11 .l3 {
      left: 99px; }
    #mainimage .box11 .l4 {
      left: 148.5px; }
    #mainimage .box11 .t1 {
      top: 0; }
    #mainimage .box11 .t2 {
      top: 49.5px; }
    #mainimage .box11 .t3 {
      top: 99px; }
    #mainimage .box11 .t4 {
      top: 148.5px; }
  #mainimage .box12 {
    width: 253px;
    height: 253px;
    transform: rotate(45deg);
    position: absolute;
    left: 50%;
    margin-left: -555px;
    top: 617px;
    overflow: hidden; }
    #mainimage .box12 .wh {
      background: #fff;
      width: 49.5px;
      height: 49.5px;
      position: absolute;
      backface-visibility: hidden;
      border: 0.5px solid #fff;
      box-sizing: content-box; }
    #mainimage .box12 .l1 {
      left: 0; }
    #mainimage .box12 .l2 {
      left: 63.25px; }
    #mainimage .box12 .l3 {
      left: 126.5px; }
    #mainimage .box12 .l4 {
      left: 189.75px; }
    #mainimage .box12 .t1 {
      top: 0; }
    #mainimage .box12 .t2 {
      top: 63.25px; }
    #mainimage .box12 .t3 {
      top: 189.75px; }
    #mainimage .box12 .t4 {
      top: 148.5px; }
  #mainimage .box13 {
    width: 850px;
    height: 850px;
    transform: rotate(45deg);
    position: absolute;
    left: 50%;
    margin-left: -1523px;
    top: -210px;
    overflow: hidden; }
    #mainimage .box13 .wh {
      background: #fff;
      width: 212.5px;
      height: 212.5px;
      position: absolute;
      backface-visibility: hidden;
      border: 0.5px solid #fff;
      box-sizing: content-box; }
    #mainimage .box13 .l1 {
      left: 0; }
    #mainimage .box13 .l2 {
      left: 212.5px; }
    #mainimage .box13 .l3 {
      left: 425px; }
    #mainimage .box13 .l4 {
      left: 637.5px; }
    #mainimage .box13 .t1 {
      top: 0; }
    #mainimage .box13 .t2 {
      top: 212.5px; }
    #mainimage .box13 .t3 {
      top: 425px; }
    #mainimage .box13 .t4 {
      top: 637.5px; }
  #mainimage .a1 {
    animation: fadeout 0.5s linear 1s forwards; }
  #mainimage .a2 {
    animation: fadeout 0.5s linear 1.2s forwards; }
  #mainimage .a3 {
    animation: fadeout 0.5s linear 1.4s forwards; }
  #mainimage .a4 {
    animation: fadeout 0.5s linear 1.6s forwards; }
  #mainimage .a5 {
    animation: fadeout 0.5s linear 1.8s forwards; }
  #mainimage .a6 {
    animation: fadeout 0.5s linear 2.0s forwards; }
  #mainimage .a7 {
    animation: fadeout 0.5s linear 2.2s forwards; }

#index #menu #button {
  animation: fadein 0.5s linear 4s forwards; }
#index #decoration .d01 div:nth-child(1) {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 200px 0 0 200px;
  border-color: transparent transparent transparent #10589e;
  position: absolute;
  top: 1124px;
  left: 0; }
#index #decoration .d01 div:nth-child(2) {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 67px 67px 0 0;
  border-color: #e6e6e6 transparent transparent transparent;
  position: absolute;
  top: 1324px;
  left: 0; }
#index #decoration .d01 div:nth-child(3) {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 134px 134px 0 0;
  border-color: #ecdb31 transparent transparent transparent;
  position: absolute;
  top: 1324px;
  left: 67px; }
#index #decoration .d01 div:nth-child(4) {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 67px 67px 0;
  border-color: transparent #10589e transparent transparent;
  position: absolute;
  top: 1390px;
  left: 0; }
#index #decoration .d02 div:nth-child(1) {
  width: 110px;
  height: 110px;
  background: #10589e;
  transform: rotate(45deg);
  position: absolute;
  top: 1750px;
  right: 23px; }
#index #decoration .d02 div:nth-child(2) {
  width: 43px;
  height: 43px;
  background: #ecdb31;
  transform: rotate(45deg);
  position: absolute;
  top: 1900px;
  right: 23px; }
#index #decoration .d02 div:nth-child(3) {
  width: 43px;
  height: 43px;
  background: #ecdb31;
  transform: rotate(45deg);
  position: absolute;
  top: 1965px;
  right: 60px; }
#index #decoration .d03 div:nth-child(1) {
  width: 110px;
  height: 110px;
  background: #10589e;
  transform: rotate(45deg);
  position: absolute;
  top: 2650px;
  left: 23px; }
#index #decoration .d03 div:nth-child(2) {
  width: 43px;
  height: 43px;
  background: #ecdb31;
  transform: rotate(45deg);
  position: absolute;
  top: 2640px;
  left: 10px; }
#index #decoration .d03 div:nth-child(3) {
  width: 43px;
  height: 43px;
  background: #ecdb31;
  transform: rotate(45deg);
  position: absolute;
  top: 2800px;
  left: 20px; }
#index #decoration .d04 div:nth-child(1) {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 50px 0 0;
  border-color: #10589e transparent transparent transparent;
  position: absolute;
  top: 3400px;
  left: 0; }
#index #decoration .d04 div:nth-child(2) {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 0 0 50px;
  border-color: transparent transparent transparent #10589e;
  position: absolute;
  top: 3400px;
  left: 50px; }
#index #decoration .d04 div:nth-child(3) {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 50px 0 0;
  border-color: #10589e transparent transparent transparent;
  position: absolute;
  top: 3400px;
  left: 100px; }
#index #decoration .d04 div:nth-child(4) {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 0 0 50px;
  border-color: transparent transparent transparent #10589e;
  position: absolute;
  top: 3400px;
  left: 150px; }
#index #decoration .d04 div:nth-child(5) {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 50px 0 0;
  border-color: #10589e transparent transparent transparent;
  position: absolute;
  top: 3400px;
  left: 200px; }
#index #decoration .d04 div:nth-child(6) {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 50px 0;
  border-color: transparent #10589e transparent transparent;
  position: absolute;
  top: 3450px;
  left: 0px; }
#index #decoration .d04 div:nth-child(7) {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 50px 50px;
  border-color: transparent transparent #10589e transparent;
  position: absolute;
  top: 3450px;
  left: 50px; }
#index #decoration .d04 div:nth-child(8) {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 50px 0;
  border-color: transparent #10589e transparent transparent;
  position: absolute;
  top: 3450px;
  left: 100px; }
#index #decoration .d04 div:nth-child(9) {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 50px 0 0;
  border-color: #10589e transparent transparent transparent;
  position: absolute;
  top: 3500px;
  left: 0; }
#index #decoration .d04 div:nth-child(10) {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 0 0 50px;
  border-color: transparent transparent transparent #10589e;
  position: absolute;
  top: 3500px;
  left: 50px; }
#index #decoration .d04 div:nth-child(11) {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 50px 0 0;
  border-color: #10589e transparent transparent transparent;
  position: absolute;
  top: 3500px;
  left: 100px; }
#index #decoration .d04 div:nth-child(12) {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 50px 0;
  border-color: transparent #10589e transparent transparent;
  position: absolute;
  top: 3550px;
  left: 0px; }
#index #decoration .d04 div:nth-child(13) {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 50px 0 0;
  border-color: #10589e transparent transparent transparent;
  position: absolute;
  top: 3600px;
  left: 0; }
#index #decoration .d05 img {
  position: absolute;
  top: 3700px;
  right: 0; }
#index #decoration .d05 div:nth-child(1) {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 201px 201px;
  border-color: transparent transparent #10589e transparent;
  position: absolute;
  top: 3750px;
  right: 0; }
#index #decoration .d05 div:nth-child(2) {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 67px 67px 0;
  border-color: transparent #e6e6e6 transparent transparent;
  position: absolute;
  top: 3950px;
  right: 0; }
#index #decoration .d05 div:nth-child(3) {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 134px 134px 0;
  border-color: transparent #ecdb31 transparent transparent;
  position: absolute;
  top: 3950px;
  right: 67px; }
#index #decoration .d05 div:nth-child(4) {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 67px 67px 0 0;
  border-color: #10589e transparent transparent transparent;
  position: absolute;
  top: 4017px;
  right: 0; }