/*--lanterns--*/
[type="checkbox"],
[type="radio"] {
    position: absolute;
    clip: rect(0 0 0 0);
}

.cs-topic {
    background-color: rgba(111, 193, 255, 0.737);
    color: rgb(255, 255, 255);
    display: inline-block;
    width: 64px;
    margin-top: 5px;
    padding: 5px 0;
    text-shadow: 4px 4px 4px #000000eb;
    border: 2px solid rgba(111, 193, 255, 0.76);
    text-align: center;
    cursor: pointer;
}

.cs-topic:hover {
    border-color: rgba(111, 193, 255, 0.737);
}

:checked+.cs-topic {

    color: rgb(255, 255, 255);
    border-color: rgb(44, 100, 255);
    background-color: rgb(44, 100, 255);
    text-shadow: 4px 8px 6px #010101;
}

/* 选择计数器 */
body {
    counter-reset: topicCounter;
}

:checked+.cs-topic {
    counter-increment: topicCounter;
}

.cs-topic-counter::before {
    color: red;
    margin: 0 2px;
    content: counter(topicCounter);
}

* {
    /* 初始化 取消页面内外边距 */
    margin: 0;
    padding: 0;
}

.box {
    /*background-color: #1e6db1;*/
    background: linear-gradient(rgb(222, 232, 244), rgba(4, 135, 242, 0.993));

    /* 100%窗口宽度和高度 */
    width: 100%;
    height: 80px;
    /* 弹性布局 水平、垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 横向排列 */
    flex-direction: row;
    /* 将平面图形转换为具有透视的3D图形 */
    perspective: 300;
    -webkit-perspective: 300;
    overflow: hidden;
}

/* 动画字符所在的块 */
.chars {
    color: #b7e2ff;
    text-shadow: 5px 12px 12px #000000;
    /* 相对定位 */
    position: relative;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    font-size: 38px;
    font-weight: 900;
    /* 斜体 */
    font-style: italic;
    margin: 1 10px;
    opacity: 0;
}

/* 前两个字符的动画 */
@keyframes show12 {
    0% {
        opacity: 1;
        transform: rotateY(0deg);
    }

    100% {
        opacity: 1;
        transform: rotateY(360deg);
    }
}

/* 第3个及之后的字符的动画 */
@keyframes show3 {
    0% {
        opacity: 1;
        transform: rotateY(90deg);
    }

    100% {
        opacity: 1;
        transform: rotateY(360deg);
    }
}

/* 为每个字符添加动画 */
.box div:nth-child(1) {
    animation: show12 1.2s linear forwards;
    animation-iteration-count: 1;
    animation-delay: 0.2s;
}

.box div:nth-child(2) {
    animation: show12 1.2s linear forwards;
    animation-iteration-count: 1;
    animation-delay: 0.4s;
}

.box div:nth-child(3) {
    animation: show3 1s linear 1 forwards;
    animation-delay: 0.7s;
}

.box div:nth-child(4) {
    animation: show3 1s linear 1 forwards;
    animation-delay: 0.9s;
}

.box div:nth-child(5) {
    animation: show3 1s linear 1 forwards;
    animation-delay: 1.1s;
}

.box div:nth-child(6) {
    animation: show3 1.2s linear 1 forwards;
    animation-delay: 0.8s;
}

.box div:nth-child(7) {
    animation: show3 1s linear 1 forwards;
    animation-delay: 0.5s;
}

img {
    max-width: 100%;
    height: auto;
}

.simple-linear {
    color: rgb(0, 60, 255);
    text-align: center;
    padding-top: 20px;
    padding-bottom: 1px;
    background: linear-gradient(rgb(222, 232, 244), rgba(4, 135, 242, 0.993));
    text-shadow: 4px 4px 6px #6a6969;
    /* 水平位移、垂直位移、模糊程度、颜色 */
    /*letter-spacing: 12px;*/
    /*文字间隔*/
}

#customers {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

#customers td,
#customers th {
    border: 2px solid #000000;
    padding: 1px;
}


#customers th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: center;
    font-size: 14px;
    color: rgb(0, 0, 0);
}

#customers td {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: center;
    font-size: 12px;
    color: rgb(0, 0, 0);
}

html,
body {
    height: 100%;
}

.mainContent {

    background: linear-gradient(rgb(164, 203, 250), rgba(4, 135, 242, 0.646));
    min-height: 100%;
    padding-bottom: 50px;
    box-sizing: border-box;
}

footer {
    text-align: center;
    margin-top: -25px;
    font-size: 10px;
}

.myDiv {
    padding-top: 20px;

    color: rgba(0, 0, 0, 0.719);
    text-align: center;
}

.a-4 {
    border: 2px solid rgba(255, 255, 255, 0.626);
    background: linear-gradient(rgb(136, 200, 252), rgb(157, 207, 232));
    /* 设置边框样式 */
    padding: 10px;
    /* 内边距 */
    margin: 0px auto;
    width: 100%;
    min-width: auto;
    max-width: auto;
    float: left;
    text-align: center;
    font-size: 18px;
}

.a-5 {
    border: 2px solid rgba(255, 255, 255, 0.626);
    background: linear-gradient(rgb(136, 200, 252), rgb(157, 207, 232));
    /* 设置边框样式 */
    padding: 10px;
    /* 内边距 */
    margin: 0px auto;
    width: 100%;
    min-width: auto;
    max-width: auto;
    float: left;
    text-align: left;
}
.a-6 {
    border: 2px solid rgba(255, 255, 255, 0.626);
    background: linear-gradient(rgb(136, 200, 252), rgb(157, 207, 232));
    /* 设置边框样式 */
    padding: 10px;
    /* 内边距 */
    text-align: center;
}

ol.v {
    list-style-type: inherit;
}

p.c {
    font-size: 14px;
}