@charset "UTF-8";
.indexbody { position: relative; height: 100vh; overflow: hidden; }

.indexbody .link { height: 100%; }

.indexbg { height: 100%; background: url(../img/index/bg.jpg) no-repeat center/cover; }

.centertitle { position: absolute; right: 9%; top: 6%; display: flex; flex-flow: row-reverse; overflow: hidden; }

.centertitle img { width: 100%; }

.centertitle .title { width: 4.5rem; margin-left: 0.65rem; margin-right: -0.6rem; overflow: hidden; background: no-repeat top center / 100% auto; }

.centertitle .line { width: 0.15rem; }

.centertitle .title3 { position: relative; }

.centertitle .title3 .icon { width: 2.8vw; position: absolute; left: 0.6rem; bottom: 2.8rem; }

.copy { position: absolute; left: 7vw; bottom: 6.5vh; width: 2rem; height: 10rem; background: url(../img/index/copy.png) no-repeat center/contain; }

.shade { display: none; position: absolute; top: 50%; left: 50%; width: 23.5rem; padding: 5rem 3.5rem 10rem; border-radius: 0.4rem; transform: translate(-50%, -50%); font-family: "SimSun", "syst-bold"; background-color: rgba(0, 0, 0, 0.7); }

.shade h3 { color: #fff; font-size: 1.6rem; margin-bottom: 1.5rem; font-weight: normal; }

.shade p { font-size: 1.1rem; color: #bfc0c0; line-height: 2rem; text-align: justify; }

.shade .close { position: absolute; left: 50%; bottom: 3rem; width: 2rem; height: 2rem; background: url(../img/index/close.png) no-repeat center/contain; transform: translate(-50%, 0); }

@keyframes titlemove { 0% { height: 0; }
  100% { height: 20.8rem; } }

.titlemove { animation-name: titlemove; }

.isshow { display: block; }

.ishide { display: none; }

.iframebox { position: relative; height: 100vh; }

.iframebox iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 0; }

.circleBox { width: 8.2rem; height: 8.2rem; margin: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -35%); }

.circle1, .circle2, .circle3, .circle4, .circle5 { width: 100%; height: 100%; border-radius: 50%; position: absolute; }

.circle5 { background-image: radial-gradient(transparent, rgba(255, 255, 255, 0.3)); display: flex; align-items: center; justify-content: center; }

.circle5 > img { width: 58%; height: 100%; object-fit: contain; }

.circle1 { animation: myfirst 4s linear 0s infinite; background-color: rgba(255, 255, 255, 0.3); -moz-animation: myfirst 4s linear 0s infinite; /* Firefox */ -webkit-animation: myfirst 4s linear 0s infinite; /* Safari 和 Chrome */ -o-animation: myfirst 4s linear 0s infinite; /* Opera */ }

.circle2 { animation: myfirst 4s linear 1s infinite; background-color: rgba(255, 255, 255, 0.3); -moz-animation: myfirst 4s linear 1s infinite; /* Firefox */ -webkit-animation: myfirst 4s linear 1s infinite; /* Safari 和 Chrome */ -o-animation: myfirst 4s linear 1s infinite; /* Opera */ }

.circle3 { animation: myfirst 4s linear 2s infinite; background-color: rgba(255, 255, 255, 0.3); -moz-animation: myfirst 4s linear 2s infinite; /* Firefox */ -webkit-animation: myfirst 4s linear 2s infinite; /* Safari 和 Chrome */ -o-animation: myfirst 4s linear 2s infinite; /* Opera */ }

.circle4 { animation: myfirst 4s linear 3s infinite; background-color: rgba(255, 255, 255, 0.3); -moz-animation: myfirst 4s linear 3s infinite; /* Firefox */ -webkit-animation: myfirst 4s linear 3s infinite; /* Safari 和 Chrome */ -o-animation: myfirst 4s linear 3s infinite; /* Opera */ }

@keyframes myfirst { 0% { -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.6; }
  10% { -webkit-transform: scale(1.15);
    transform: scale(1.15);
    opacity: 0.6; }
  20% { -webkit-transform: scale(1.3);
    transform: scale(1.3);
    opacity: 0.6; }
  30% { -webkit-transform: scale(1.45);
    transform: scale(1.45);
    opacity: 0.6; }
  40% { -webkit-transform: scale(1.6);
    transform: scale(1.6);
    opacity: 0.6; }
  50% { -webkit-transform: scale(1.75);
    transform: scale(1.75);
    opacity: 0.5; }
  60% { -webkit-transform: scale(1.9);
    transform: scale(1.9);
    opacity: 0.4; }
  70% { -webkit-transform: scale(2.05);
    transform: scale(2.05);
    opacity: 0.3; }
  80% { -webkit-transform: scale(2.2);
    transform: scale(2.2);
    opacity: 0.2; }
  90% { -webkit-transform: scale(2.35);
    transform: scale(2.35);
    opacity: 0.1; }
  100% { -webkit-transform: scale(2.5);
    transform: scale(2.5);
    opacity: 0; } }