@charset "utf-8";
.xtl_logo_bg,
.xtl_logo_lk a {
  position: absolute;
  width: 215px;
  height: 100px;
  top: 23px;
  left: 2px;
}
.xtl_logo_bg {
  z-index: 10;
  background: url(/act/xtl/newserver/20240905/appoint/m/img/logo.png) no-repeat;
  cursor: pointer;
  background-size: 215px auto;
}
.xtl_logo_lk a {
  z-index: 11;
}
.head {
  width: 750px;
  height: 929px;
  z-index: 1;
  position: relative;
}
.slotxt,
.slotxtm {
  left: 481px;
  top: 126px;
  z-index: 1;
}
.slotxtm {
  top: 188px;
  left: 50px;
}
.area-title {
  margin: 18px auto;
  height: 48px;
  line-height: 48px;
  font-size: 24px;
  color: #ffefa9;
  text-align: center;
  background-image: linear-gradient(
    to right,
    rgba(136, 55, 55, 0),
    rgba(136, 55, 55, 1),
    rgba(136, 55, 55, 0)
  );
}
.arr {
  width: 23px;
  height: 12px;
  background: url(/act/xtl/newserver/20240905/appoint/m/img/down-icon.png)
    no-repeat;
  position: absolute;
  z-index: 2;
  top: 960px;
  left: 50%;
  margin-left: -11px;
  animation: nextIcon 0.6s linear infinite alternate;
}
@keyframes nextIcon {
  0% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(0);
  }
}
.dyanren {
  color: #5e3a26;
  font-size: 18px;
  line-height: 20px;
  width: 29px;
  text-align: center;
  left: 37px;
  top: 423px;
}
.dyanren span {
  display: block;
  transform: rotate(90deg);
}
.qqqun {
  z-index: 3;
  width: 0;
  text-indent: 0;
  left: 0;
  top: 722px;
  font-size: 22px;
  color: #fff;
  line-height: 32px;
  text-align: center;
  width: 100%;
}
.daqu {
  z-index: 3;
  text-indent: 0;
  font-size: 24px;
  text-align: center;
  display: block;
  color: #e1cfa4;
  width: 100%;
  left: 0;
  top: 760px;
  line-height: 36px;
}
.active .slotxtm {
  -webkit-animation: sloganAni 0.4s 0s linear both;
}
.active .qqqun,
.active .daqu {
  -webkit-animation: fadeInUp 1s 0.2s ease both;
}
.active .daqu {
  -webkit-animation-delay: 0.4s;
}
.active .login {
  -webkit-animation-delay: 0.6s;
}
.active .qqqun {
  -webkit-animation-delay: 0.8s;
}
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@-webkit-keyframes sloganAni {
  0% {
    -webkit-transform: scale(1.8);
    opacity: 0;
  }
  60% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
  65% {
    -webkit-transform: translate(-4px, -4px);
  }
  70% {
    -webkit-transform: translate(0, 0);
  }
  75% {
    -webkit-transform: translate(4px, 4px);
  }
  80% {
    -webkit-transform: translate(0, 0);
  }
  85% {
    -webkit-transform: translate(-4px, 4px);
  }
  90% {
    -webkit-transform: translate(0, 0);
  }
  95% {
    -webkit-transform: translate(4px, -4px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}
.slotxt {
  display: none;
}
.slotxtm {
  display: block;
}
.hdtime{color: #fff;font-size: 26px;position: absolute;left: 50%;margin-left: -10px;top:40px;background: #000;}
.server-tips {
  position: absolute;
  top: 753px;
  left: 10px;
	line-height: 32px;
  width: 100%;
  font-size: 24px;
  text-align: center;
  color: #f3f1fd;
	font-family: 'hanyi';
}
/* .server-tips span{color: #fbe386;} */
.kaji .head {
  background: url(/act/xtl/newserver/20240905/return/m/img/kaji/head.jpg)
    no-repeat center top;
}

/* 二维码 */
.head .qrcode {
  position: absolute;
  left: 37px;
  top: 154px;
  width: 142px;
  height: 168px;
  background: url(/act/xtl/newserver/20240905/appoint/m/img/qrcode-bg.jpg)
    no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.head .qrcode .qrcode-bg {
  width: 128px;
  height: 128px;
  background-color: #fff;
  border: 1px solid #ffe596;
  display: flex;
  align-items: center;
  justify-content: center;
}
.head .qrcode p {
  line-height: 24px;
  font-size: 18px;
  text-align: center;
  color: #7a160e;
}

/* 顶部导航栏 */
.addnavbox {
  height: 354px;
  background: url(/act/xtl/newserver/20240905/appoint/m/img/navbg.jpg) no-repeat
    center top;
  background-size: 100% 100%;
  margin-top: -1px;
}

.daohangbox {
  width: 100%;
  height: 100%;
  position: relative;
}

.daohangbox .nav-link {
  position: absolute;
  top: 0;
  height: 354px;
  left: 0px;
}

.daohangbox a {
  width: 209px;
  height: 209px;
  text-indent: -9999em;
  display: block;
  position: absolute;
  background-size: contain;
}
.daohangbox a.addlink1 {
  top: -6px;
  left: 16px;
  background: url(/act/xtl/newserver/20240905/appoint/m/img/nav1.png) no-repeat;
}
.daohangbox a.addlink2 {
  top: -6px;
  left: 218px;
  background: url(/act/xtl/newserver/20240905/appoint/m/img/nav2.png) no-repeat;
}

.daohangbox a.addlink3 {
  left: 418px;
  top: -6px;
  background: url(/act/xtl/newserver/20240905/appoint/m/img/nav3.png) no-repeat;
}

.daohangbox a.addlink4 {
  left: 124px;
  top: 153px;
  background: url(/act/xtl/newserver/20240905/appoint/m/img/nav4.png) no-repeat;
}

.daohangbox a.addlink5 {
  top: 153px;
  left: 324px;
  background: url(/act/xtl/newserver/20240905/appoint/m/img/nav5.png) no-repeat;
}

.daohangbox a.addlink6 {
  top: 153px;
  left: 527px;
  background: url(/act/xtl/newserver/20240905/appoint/m/img/nav6.png) no-repeat;
}

.pg1 .daohangbox a.addlink1 {
  background: url(/act/xtl/newserver/20240905/appoint/m/img/nav1-h.png)
    no-repeat;
}

.pg2 .daohangbox a.addlink2 {
  background: url(/act/xtl/newserver/20240905/appoint/m/img/nav2-h.png)
    no-repeat;
}

.pg3 .daohangbox a.addlink3 {
  background: url(/act/xtl/newserver/20240905/appoint/m/img/nav3-h.png)
    no-repeat;
}

.pg4 .daohangbox a.addlink4 {
  background: url(/act/xtl/newserver/20240905/appoint/m/img/nav4-h.png)
    no-repeat;
}

.pg5 .daohangbox a.addlink5 {
  background: url(/act/xtl/newserver/20240905/appoint/m/img/nav5-h.png)
    no-repeat;
}

.pg6 .daohangbox a.addlink6 {
  background: url(/act/xtl/newserver/20240905/appoint/m/img/nav6-h.png)
    no-repeat;
}

/* 侧栏 */

.side-column {
  width: 98px;
  height: 513px;
  position: absolute;
  right: 10px;
  top: 1190px;
  z-index: 10;
}
.side-column.fiex {
  position: fixed;
  top: 0;
}
.side {
  position: relative;
  width: 98px;
  height: 513px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  box-sizing: border-box;
  padding: 30px 0 74px 0px;
}
.side::after {
  z-index: -1;
  pointer-events: none;
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 17px;
  height: 513px;
  background: url(/act/xtl/newserver/20240905/precharge/m/img/nav-line.png)
    no-repeat;
}
.side a {
  position: relative;
  width: 98px;
  height: 98px;
  display: block;
  text-indent: -9999em;
  transition: all 0.5s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.side a img {
  display: block;
  /* transition: all 1s ease; */
}
.side a .nav-img-h {
  display: none;
}
.side a.nav1::before,
.side a.nav4::before {
  content: '';
  position: absolute;
  left: 50%;
  margin-left: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #c74232;
}
.side a.nav1::before,
.side a.nav4::before {
  top: -4px;
}

.side a.nav4 {
  width: 72px;
  height: 72px;
}
/* .side a:hover .nav-img, */
.side a.on .nav-img {
  display: none;
}
/* .side a:hover .nav-img-h, */
.side a.on .nav-img-h {
  display: block;
}
.open_area {
  /* background: url(/act/xtl/newserver/20240905/appoint/m/img/open_bg.png)
    no-repeat;
  background-size: 100% 48px; */
  width: 100%;
  height: 35px;
  left: 20px;
  color: #d7d3ff;
  font-size: 25px;
  text-align: center;
  line-height: 34px;
  font-family: 'hanyi';
  font-weight: normal;
  box-sizing: border-box;
	position: absolute;
	top:530px;
}
.open_area p {
  font-family: 'hanyi';
  text-align: center;
}
.open_area p span {
  display: inline-block;
  color: #ffecc6;
  width: 102px;
  height: 30px;
  background-color: #ad3824;
  border-radius: 15px;
  line-height: 28px;
  margin-right: 10px;
}
.login {
    z-index: 4;
    text-align: center;
    color: #d2cdeb;
    font-size: 20px;
    bottom: 66px;
		width: 100%;
		left: 0;
    font-family: 'hanyi';
}
.login a {
  color: #fbe386;
	font-weight: normal;
	text-decoration: underline;
}