@charset "utf-8";

/* .wrapper { overflow:hidden; } */
nav { position: absolute; top: 40px; left: 0; width: 100%; text-align: center; z-index: 10 }
nav a { display: inline-block; padding: 20px; color: #fff; font-size: 16px }
/* .mid { position: absolute; top: 150px; left: 50%; margin-left: -721px; z-index: 5; } */
.mid { position: relative; width: 100%; z-index: 5; }
.mid p { position:relative; width: 1450px; margin: 0 auto; text-align: center; padding-top: 150px }
.mid p img { width: 100%; height: auto; max-width: 1450px }
.mid p button { position: absolute; text-indent: -9999px; cursor:pointer; background-color: rgba(0,0,0,0); border: 0 }
.mid p button:nth-of-type(1) { width: 260px; height: 160px; top: 465px; left: 173px; }
.mid p button:nth-of-type(2) { width: 260px; height: 160px; top: 465px; left: 1023px; }
.mid p button:nth-of-type(3) { width: 320px; height: 50px; top: 725px; left: 93px; }
.mid p button:nth-of-type(4) { width: 320px; height: 50px; top: 725px; left: 1023px; }
  .mid p button:nth-of-type(5)  { width: 186px; height: 181px; top: 372px; left: 446px}
  .mid p button:nth-of-type(6)  { width: 98px; height: 132px; top: 552px; left: 534px}
  .mid p button:nth-of-type(7) { width: 167px; height: 181px; top: 372px; right: 446px}
  .mid p button:nth-of-type(8) { width: 79px; height: 132px; top: 552px; right: 534px}
.bg_box  { position: absolute; top: 0; left: 0; width: 100%; height: 706px; background: #1c0827 url(../images/top_mid.jpg) 0 50% no-repeat; overflow: hidden; z-index: -1; }
.lft { position: absolute; top: 0; left: -160px; z-index: 1; 
    /* -webkit-transition: transform .8s linear;
    -moz-transition: transform .8s linear;
    -o-transition: transform .8s linear;
    transition: transform .8s linear;
  
    -moz-transform: translate3d(150px, 0, 0);
    -webkit-transform: translate3d(150px, 0, 0);
    transform: translate3d(150px, 0, 0); */
}
.rgt { position: absolute; top: 0; right: -200px; z-index: 1; 
  /* -webkit-transition: transform .8s linear;
  -moz-transition: transform .8s linear;
  -o-transition: transform .8s linear;
  transition: transform .8s linear;

  -moz-transform: translate3d(-150px, 0, 0);
  -webkit-transform: translate3d(-150px, 0, 0);
  transform: translate3d(-150px, 0, 0); */
}
.lft img,.rgt img { position: relative; top: -70px }
footer { margin-top: 60px; font-size: 12px; color: #ccc; text-align: center}
.detail_layer, .detail_layer2 {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,.6); z-index:500}
.detail_layer img, .detail_layer2 img {width:100%; height:auto}
.detail_layer p {position:absolute; top:50%; left:50%; width:800px; height:800px; margin-left:-400px; margin-top:-400px }
.detail_layer2 p {position:absolute; top:50%; left:50%; width:800px; height:673px; margin-left:-400px; margin-top:-336px }
.detail_layer p button, .detail_layer2 p button {position:absolute; top:-80px; right:0; text-indent:-9999px; width:80px; height:80px; background:#fff url(../images/btn_close.png) no-repeat 0 0; border:0; cursor:pointer}
@media (max-width: 1449px) {
  /* .mid p img { width: 100%; height: auto } */
  .mid { height: 50vw }
  .mid p { width: 100%; margin: 0 auto; text-align: center; padding-top: 10vw }
  .wrapper { height: 60vw }
  .bg_box { height: 48vw }
  .lft { left: -20vw; height: 63vw }
  .lft img { width: auto; height: 100% }
  .rgt { right: -20vw; height: 63vw }
  .rgt img { width: auto; height: 100% }
  .mid p button:nth-of-type(1) { width: 18vw; height: 12vw; top: 31vw; left: 12vw; }
  .mid p button:nth-of-type(2) { width: 18vw; height: 12vw; top: 31vw; left: 70vw; }
  .mid p button:nth-of-type(3) { width: 22vw; height: 5vw; top: 48vw; left: 5vw; }
  .mid p button:nth-of-type(4) { width: 22vw; height: 5vw; top: 48vw; left: 70vw; }
  .mid p button:nth-of-type(5)  { width: 13vw; height: 11.8vw; top: 25vw; left: 30.5vw}
  .mid p button:nth-of-type(6) { width: 7vw; height: 9.8vw; top: 36.7vw; left: 36.5vw;}
  .mid p button:nth-of-type(7)  { width: 12vw; height: 11.8vw; top: 25.2vw; right: 30.5vw}
  .mid p button:nth-of-type(8) { width: 5.9vw; height: 9.8vw; top: 37vw; right: 36.5vw;}
}

@media (max-width: 767px) {
  nav a { font-size: 14px; }
  .mid p { padding-top: 41vw; }
  .mid p img { width: 100%; height: auto; }
  .lft { position: absolute; top: 8.5vw; left: -38vw; z-index: 1; width: 80vw; height: 100vw }
  .lft img { width:100%; height: 100% }
  .rgt { position: absolute; top: 9.5vw; right: -50vw; z-index: 1; width: 80vw; height: 100vw }
  .rgt img { width:100%; height: 100% }
  .bg_box { height: 78vw }
  footer { margin-top: 50vw }
  .mid p button:nth-of-type(1) { width: 18vw; height: 12vw; top: 62vw; left: 12vw; }
  .mid p button:nth-of-type(2) { width: 18vw; height: 12vw; top: 62vw; left: 70vw; }
  .mid p button:nth-of-type(3) { width: 22vw; height: 5vw; top: 80vw; left: 5vw; }
  .mid p button:nth-of-type(4) { width: 22vw; height: 5vw; top: 8vw; left: 70vw; }
  .mid p button:nth-of-type(5)  { width: 13vw; height: 11.8vw; top: 56vw; left: 30.5vw}
  .mid p button:nth-of-type(6) { width: 7vw; height: 9.8vw; top: 67.7vw; left: 36.5vw;}
  .mid p button:nth-of-type(7)  { width: 12vw; height: 11.8vw; top: 56vw; right: 30.5vw}
  .mid p button:nth-of-type(8) { width: 5.9vw; height: 9.8vw; top: 67.7vw; right: 36.5vw;}
  
  .detail_layer p {position:absolute; top:50%; left:50%; width:100vw; height:94.375vw; margin-left:-50vw; margin-top:-47.187vw }
  .detail_layer2 p {position:absolute; top:50%; left:50%; width:100vw; height:84.125vw; margin-left:-50vw; margin-top:-42.06vw }
  
}