@charset "utf-8";
.xtl_logo_bg, .xtl_logo_lk a { position: absolute; width: 166px; height: 86px;top:20px;left:10px; }
.xtl_logo_bg { z-index: 10; background: url(/act/xtl/newserver/20230602/appoint/m/img/logo.png) no-repeat; cursor: pointer;background-size:166px auto; }
.xtl_logo_lk a { z-index: 11; }
.head{height:930px;background:url(/act/xtl/newserver/20230602/appoint/m/img/head.jpg) no-repeat center top;z-index:1;position:relative;background-size:100% 100%;}
.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/20230602/appoint/pc/img/down-icon.png) no-repeat;
    position: absolute;
    z-index: 2;
    top: 960px;
    left: 50%;
    margin-left: -11px;
    animation: nextIcon .6s linear infinite alternate;
		display: none;
}
@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;}
.login{z-index:4;left:0;width:100%;text-align:center;color:#343c4c;font-size:24px;top:793px;line-height: 32px;}
.login a{color:#343c4c}
.active .slotxtm{-webkit-animation:sloganAni .4s 0s linear both}
.active .qqqun,.active .daqu{-webkit-animation:fadeInUp 1s .2s ease both}
.active .daqu{-webkit-animation-delay:.4s}
.active .login{-webkit-animation-delay:.6s}
.active .qqqun{-webkit-animation-delay:.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;}
.server-tips {position: absolute;top: 770px;left: 0;width: 100%;font-size: 24px;text-align: center;font-weight: bold;color: #fff;}
.kaji .head{background:url(/act/xtl/newserver/20230602/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/20230602/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/20230602/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/20230602/appoint/m/img/nav1.png) no-repeat;

}
.daohangbox a.addlink2 {
    top: -6px;
    left: 218px;
    background: url(/act/xtl/newserver/20230602/appoint/m/img/nav2.png) no-repeat;

}

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

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

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

}

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

}

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

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

}

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


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

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

.pg6 .daohangbox a.addlink6 {
    background: url(/act/xtl/newserver/20230602/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/20230602/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/20230602/appoint/pc/img/open_bg.png) no-repeat;
	 background-size: 100% auto;
	 width: 687px;
	 height: 40px;
	 margin: 0 auto;
	 color: #444;
	 font-size: 22px;
	 text-align: center;
	 line-height: 40px;
	 font-weight: normal;
	 box-sizing: border-box;
}
.open_area p{
	text-align: center;
	padding-left: 5px;
}
.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_cn{height: 67px;width: 100%;position: relative;}
.login_cn .login_box,.login_cn .logout_box{position: absolute;left: 0;width: 100%;bottom: 0;}