@import "https://img1.tiancitycdn.com/mh/homepage/v8/css/base.css";
body{ background:#383838;}
.wraper{ width:100%; margin:32px auto 0; min-width:1200px; max-width: 1920px; color: #000; position: relative; overflow: hidden;}

.bg{ width:100%; min-width: 1200px; margin: 0 auto;}
.bg div{ width:100%; height:984px; margin:0 auto;}
.bg .bg2{ background:url(../images/bg_02.jpg) no-repeat center top;}
.bg .bg3{ height: 1432px; background:url(../images/bg_03.jpg) no-repeat center top;}

#loading{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; background:#000; z-index:20; font-size: 18px; color: #cfd1cc; z-index: 101;}
#loading .box{ width: 100%; height: 1px; background: #414141; margin: 0 auto; position: relative; top: 50%; transform: translateY(-50%); left: 0;}
#loading .box span{ height: 1px; background: #c4c4c4; position: relative; top: 0; left: 0; display: block;}
#loading .box p{ font-size: 16px; line-height: 30px; color: #c0c0c0; text-align: center;}

.main{ width:100%; min-width: 1200px; margin:0 auto; position:absolute; top: 0; left: 0;}
.main .header{ width: 100%; height: 984px; margin: 0 auto; position: relative; overflow: hidden;}
.main .header span{ position: absolute; display: inline-block; text-indent: -9999px;}
.main .header #obindex{ position: absolute; width:195px; height:134px; left: 50%; top:15px; margin-left: -500px; text-indent: -9999px; background: url(../images/logo.png) no-repeat; z-index: 13;}
.main .header .npc1{ width: 612px; height: 580px; left: 50%; top: 448px; margin-left: -500px;}
.main .header .npc1::after{ content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: url(../images/npc1.png) no-repeat; animation: rot_o1 10s infinite linear; transform-origin: center bottom; }


.main .header .bgimg{ width: 1920px; height: 984px; background: url(../images/bg_01.jpg) no-repeat; left: 50%; top: 0; margin-left: -960px;}
.main .header .slogan{ width: 1920px; height: 984px; background: url(../images/slogan.png) no-repeat; left: 50%; top: 0; margin-left: -960px; z-index: 2;}
.main .header .mark{ width: 1920px; height: 984px; background: url(../images/mark.png) no-repeat; left: 50%; top: 0; margin-left: -960px; z-index: 3;}
.main .header #leave{ width: 2320px; height: 1580px; position: absolute; left: 50%; top: -400px; margin-left: -1160px; z-index: 1; transform: rotate(40deg);}


.main h3{ width: 435px; height: 96px; margin: 0 auto 50px; text-indent: -9999px;}
.main .tit1{ background: url(../images/t1.png) no-repeat;}
.main .tit2{ background: url(../images/t2.png) no-repeat;}
.main .tit3{ background: url(../images/t3.png) no-repeat;}


.main .box1{ width: 1192px; height: 356px; margin: 100px auto 110px; background: url(../images/box-1.png) no-repeat; position: relative;}
.main .box1::after{ content: ""; width: 226px; height: 297px; position: absolute; right:197px; top: -81px; background: url(../images/npc4.png) no-repeat;  animation: gremlin 1s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275); animation-direction: alternate;}

.main .box1 .btn-pop{ width: 341px; height: 100px; display: block; background: url(../images/bg-btn.png) no-repeat; position: absolute; right: 130px; top: 155px; z-index: 2;}



.main .box2{ width: 1280px; margin: 0 auto 100px; display: flex; justify-content: space-around;}
.main .box2 span{ width: 304px; height: 271px; }
.main .box2 .n1{ background: url(../images/n-1.png) no-repeat; }
.main .box2 .n2{ background: url(../images/n-2.png) no-repeat; }
.main .box2 .n3{ background: url(../images/n-3.png) no-repeat; }
.main .box2 .n4{ background: url(../images/n-4.png) no-repeat; }


.main .box3{ width: 1336px; height: 564px; margin: -100px auto 150px; background: url(../images/box-2.png) no-repeat; position: relative;}
.main .cover{ width: 600px; height: 424px; position: absolute; left: 73px; top: 80px; background: url(../images/map-box.png) no-repeat; z-index: 2; pointer-events: none;}


.main .box4{ width: 1136px; height: 205px; margin: 0 auto;}
.main .box4 .main-banner{ width: 1136px; height: 205px; overflow: hidden; }
.main .box4 .main-banner .swiper-slide{ width: 264px !important; margin: 0 10px;}



.main .box4 .main-banner .swiper-wrapper{-webkit-transition-timing-function: linear !important; 
  -moz-transition-timing-function: linear !important;
  -ms-transition-timing-function: linear !important;
  -o-transition-timing-function: linear !important;
  transition-timing-function: linear !important;}


.main .box4 .btn{ width: 104px; height: 106px; background: url(../images/btn-arr.png) no-repeat; box-sizing: border-box; margin-top: -53px;}
.main .box4 .btn::after{ display: none;}
.main .box4 .btn:hover{ -webkit-filter: contrast(120%);filter: contrast(120%);}
.main .box4 .swiper-button-prev{ left: -100px; }
.main .box4 .swiper-button-next{ right: -100px; transform: rotateY(180deg);}




.popdiv{ width: 736px; height: 556px; display: none; z-index: 999;}
.popdiv .close{ width: 32px; height: 32px; background: url(../images/btn-close.png) no-repeat; position: absolute; top: 0; right: -35px; display: block; text-indent: -9999px; cursor: pointer;}

.my-map { margin: 0 auto; width: 540px; height: 350px; position: absolute; left: 97px; top: 101px; transform: rotate(-5deg);} 
.my-map .icon { background: url(https://a.amap.com/lbs-dev-yuntu/static/web/image/tools/creater/marker.png) no-repeat; } 
.my-map .icon-cir { height: 31px; width: 28px; } 
.my-map .icon-cir-red { background-position: -11px -5px; }
.amap-container{height: 100%;}
.myinfowindow{width: 240px;min-height: 50px;}
.myinfowindow h5{ height: 20px; line-height: 20px; overflow: hidden; font-size: 14px; font-weight: bold; width: 220px; text-overflow: ellipsis; word-break: break-all; white-space: nowrap; }
.myinfowindow div{ margin-top: 10px; min-height: 40px; line-height: 20px; font-size: 13px; color: #6f6f6f; }

@keyframes rot_o1 {
  0%,100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-4deg) ;
  }
}

@keyframes gremlin {
  0% {
    transform: translateY(-8px) ;
  }
  100% {
    transform: translate(0) ;
  }
}