@charset "UTF-8";

html,
body {
    overflow: hidden;
}

@font-face {
    font-family: 'maoken';
    src: url('fonts/MaoKenWangFengYaSong.TTF');
    font-style: normal;
}

.swiper-slide {
    position: relative;
    overflow: hidden;
}

a {
    display: block;
}


.banner {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
}

.banner::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 30%;
    width: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
    z-index: 1;
}

.banner .slide-inner {
    width: 100%;
    height: 100%;
    position: relative;
}

.banner .slide-inner video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner .slide-inner img {
    width: 100%;
    height: 100%;
    animation: img_scale 10s linear infinite;
    object-fit: cover;
}

@keyframes img_scale {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}


/* conten */

.motto {
    position: absolute;
    top: 4.26rem;
    left: 50%;
    transform: translate(-50%, 0%);
    z-index: 3;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.motto img {
    width: 10.23rem;
    display: block;
    transform-origin: center;
}


.djs {
    position: absolute;
    right: .86rem;
    bottom: .5rem;
    z-index: 3;
}

.djs h3 {
    font-family: 'sy';
    font-size: .24rem;
    color: #ffeccc;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.djs h3 em {
    color: #ffeccc;
    /* 文字颜色为白色 */
    text-shadow:
        -0.01rem -0.01rem 0 #a61010,
        0 -0.01rem 0 #a61010,
        .01rem -0.01rem 0 #a61010,
        -0.01rem 0 0 #a61010,
        .01rem 0 0 #a61010,
        -0.01rem .01rem 0 #a61010,
        0 .01rem 0 #a61010,
        .01rem .01rem 0 #a61010;
}

.djs p {
    display: flex;
    align-items: center;
}

.djs p span {
    width: .63rem;
    line-height: .73rem;
    background: url(../images/djs-bg.png) no-repeat;
    background-size: 100% 100%;
    margin: 0 .05rem;
    display: block;
    font-family: Impact;
    color: #a61010;
    text-align: center;
    font-size: .56rem;
}

/* time 刻度表开始 */
.time {
    position: absolute;
    top: 1.3rem;
    left: 50%;
    transform: translate(-50%, 0%);
    z-index: 2;
    width: 7.2rem;
    height: 7.2rem;
    display: none;
}

.time svg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.5;
}

/* 最外圈 */
.tm-box {
    width: 7.2rem;
    height: 7.2rem;
    border-radius: 50%;
    position: relative;
    transform: rotate(32deg);
}

.bor1 {
    width: 100%;
    height: 0;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    left: 0;

}

.tm-box.on .bor1 {
    height: 100%;
    transition: all 3s;
}


/* 年份 */
.bor1::before {
    content: '';
    width: 7.2rem;
    height: 7.2rem;
    position: absolute;
    left: 0;
    bottom: 0.05rem;
    background: url(../images/time-num1.png) no-repeat center center;
    background-size: 100% 100%;
    transform: rotate(-33deg);
}

/* 虚线外圈 */
.bor1::after {
    content: '';
    width: 7.2rem;
    height: 7.2rem;
    position: absolute;
    left: 0;
    bottom: 0;
    background: url(../images/kd2.png) no-repeat center center;
    background-size: 100% 100%;
    animation: xz 30s linear infinite 5s;
}




/* 内圈 */
.tm-warp {
    width: 5.3rem;
    height: 5.3rem;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.tm-warp svg {
    transform: rotate(32deg);
}

.tm-warp.on .bor2 {
    height: 100%;
}

.bor2 {
    width: 100%;
    height: 0%;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    transition: all 3s;
}

.bor2::after {
    content: '';
    width: 5.28rem;
    height: 5.28rem;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
    border: .01rem solid rgba(255, 236, 204, 0.6);
}



/* 指针 */
.t-linebox {
    height: 0%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    transition: all 3s;
}

.tm-box.on .t-linebox {
    height: 100%;
}

.t-line {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 7.2rem;
}

.t-l1::after {
    border-left: .01rem dashed rgba(255, 255, 255, 1);
}

.t-l2::after {
    border-left: .01rem solid rgba(255, 255, 255, 1);
}

/* 三角 */
.t-l1::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-top: .2rem solid #a61010;
    border-right: .15rem solid transparent;
    border-bottom: .2rem solid transparent;
    border-left: .15rem solid transparent;
    z-index: 9;
}

.t-l2::after,
.t-l1::after {
    content: '';
    position: absolute;
    height: 50%;
    position: absolute;
    left: 50%;
    top: 0;
    transform-origin: left bottom;
    transform: translateX(-50%);
}


@keyframes xz {
    0% {
        transform: rotate(0deg);
    }


    /* 15s/18s = 83.33% */
    83.33% {
        transform: rotate(327deg);
    }

    100% {
        transform: rotate(327deg);
    }
}

/* svg画圆弧动画 */

/* 快针 */
#ring1 {
    animation: rotate 15s linear infinite 5s;
}

.t-l1 {
    animation: xz 15s linear infinite 5s;
}

/* 慢针 */
#ring2 {
    animation: rotate 30s linear infinite 5s;
}

.t-l2 {
    animation: xz 30s linear infinite 5s;
}


@keyframes rotate {
    0% {
        stroke-dashoffset: 609;
    }
    /* 15s/18s = 83.33% */
    83.33% {
        stroke-dashoffset: 55;
    }

    100% {
        stroke-dashoffset: 55;
    }
}


/* svg画圆弧动画 */

/* 扩散圆 */

@keyframes scale_q {
    0% {
        transform: scale(1);
        opacity: .8
    }

    100% {
        transform: scale(3);
        opacity: 0;
    }
}

.ks-q {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1.8rem;
    height: 1.8rem;
    opacity: 0.3;
    display: none;
}

.ks-q::before {
    content: '';
    width: 100%;
    height: 100%;
    background-color: rgba(255, 236, 204, 1);
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
}

.ks-q>div {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 236, 204, 1);
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
}

.ks-q1 {
    animation: scale_q 3s linear infinite;
    animation-delay: 0s;
}

.ks-q2 {
    animation: scale_q 3s linear infinite;
    animation-delay: 1s;
}

.ks-q3 {
    animation: scale_q 3s linear infinite;
    animation-delay: 2s;
}

.ban-prev {
    width: .7rem;
    height: .7rem;
    background: url(../images/ban-l.png) no-repeat;
    background-size: 100% 100%;

    position: absolute;
    top: 48%;
    left: .6rem;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
}

.ban-next {
    width: .7rem;
    height: .7rem;
    background: url(../images/ban-r.png) no-repeat;
    background-size: 100% 100%;

    position: absolute;
    top: 48%;
    right: .6rem;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
}

.motto,
.time {
    top: 52%;
    transform: translate(-50%, -50%);
}