body {
    background-image: url("../img/background.png");
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
    padding: 0;

}

.Title {
    height: 12vh;
    position: absolute;
    transform: translateX(-50%);
    transition: all 1s ease-in-out; /* 过渡动画 */
    opacity: 1;
    z-index: 1;
}

.part001 {
    top: 20%;
    left: 50%;
}

.part002 {
    top: 45%;
    left: 50%;
}

.div01 {
    width: 100vw;
    height: 100vh;
}

.div01, .div01 > div, p {
    margin: 0;
    padding: 0;
}

.color1 {
    -webkit-user-select: none;
    background-color: rgba(255, 101, 188, 0.25);
}

.color2 {
    background-color: rgba(255, 101, 101, 0.2);
}

.color3 {
    background-color: rgba(211, 101, 255, 0.2);
}

.color4 {
    background-color: rgba(255, 229, 101, 0.2);
}

.color5 {
    background: rgba(101, 201, 255, 0.2);
}

@font-face {
    font-family: 'MyCustomFont';
    src: url('../font/TTF01.subset.ttf') format('truetype');
}

.p01 {
    margin: 0;
    padding: 0;
    display: block;
    text-align: center;
    font-size: 6rem;
    font-family: "微软雅黑", sans-serif;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    position: absolute;
    transition: all 0.3s ease-in-out; /* 过渡动画 */
    opacity: 1;
}


.h2 {
    color: rgb(255, 255, 255);
    font-size: 4rem;
    transform: translate(-50%, -50%);
    left: 52%;
    top: 30%;
    opacity: 0;
    display: none;
}

.h2-1 {

}

.h2-2 {
    top: 64%;
    left: 40%;
}

.Thyin {
    width: 8vw;
    height: 15vh;
    font: bold 8rem "MyCustomFont", sans-serif;
    /*background-color: #00ffea;*/
    font-weight: 600;
    transform: translate(-50%, -50%);
    display: none;
    opacity: 0;
    z-index: 2;
}

.Thyin01 {
    top: 15%;
    left: 48%;
}

.Thyin02 {
    top: 45%;
    left: 42%;
}

.Thyin03 {
    top: 55%;
    left: 58%;
}

.Thyin04 {
    top: 85%;
    left: 52%;
}

#d1 .part01 {
    width: 30vw;
    height: 15vh;
    /*background-color: #00ffea;*/
    font-weight: 600;
    top: 60vh;
    left: 15vw;
}

#d1 .part02 {
    width: 5vw;
    height: 10vh;
    /*background-color: #00ffea;*/
    font-weight: 600;
    font-size: 4rem;
    top: 70vh;
    left: 47vw;
}

#d1 .part03 {
    width: 40vw;
    height: 15vh;
    /*background-color: #00ffea;*/
    font-weight: 600;
    top: 80vh;
    left: 55vw;
}

.part001.animate {
    opacity: 0; /* 动画结束时变为不可见 */
    left: 120vw;
}

.part002.animate {
    opacity: 0; /* 动画结束时变为不可见 */
    left: -40vw;
}

#d1 .part01.animate {
    opacity: 0; /* 动画结束时变为不可见 */
    left: -20vw;
}

#d1 .part02.animate {
    opacity: 0; /* 动画结束时变为不可见 */
    left: 0;
}

#d1 .part03.animate {
    opacity: 0; /* 动画结束时变为不可见 */
    left: 120vw;
}

.div001 {
    width: 60vw;
    height: 50vh;
    /*background-color: rgba(250, 113, 170, 0.5);*/
    position: absolute;
    top: 35vh;
    left: 50vw;
    transform: translate(-50%, -50%);
}

.part001.animated {
    opacity: 0;
    left: 80%;

}

.part002.animated {
    opacity: 0;
    left: 8%;

}

.Thyin.visible {
    opacity: 1;
    transition: all 1s ease-in-out;
}

.h2.visible {
    opacity: 0.75;
    transition: all 1s ease-in-out;
}

#d1 .part01:hover, #d1 .part02:hover, #d1 .part03:hover {
    /*opacity: 1;*/
    /*color: rgba(194, 79, 129, 0.75);*/
    text-shadow: 0 0 10px rgba(159, 159, 159, 0.5);
    transition: all 0.6s ease-in-out;
}

#d1 .part01:active, #d1 .part02:active, #d1 .part03:active {
    /*opacity: 1;*/
    color: rgba(255, 136, 188, 0.45);
    text-shadow: 0 0 10px rgba(159, 159, 159, 0.5);
    transition: all 0.1s ease-in-out;
}

#d1 .part01, #d1 .part02, #d1 .part03 {
    transition: left 0.01ms ease-in-out 0s, top 0.01ms ease-in-out 0s;
    /*transition-delay: 1s;*/
}

#d1 .part01:hover, #d1 .part02:hover, #d1 .part03:hover {
    transition: left 100ms ease-in-out 0s, top 100ms ease-in-out 0s;
    /*transition-delay: 0s;*/
}

#d1 .part01:active, #d1 .part02:active, #d1 .part03:active {
    transition: left 0.01ms ease-in-out 0s, top 0.01ms ease-in-out 0s;
}


.img02_1 {
    position: relative;
    left: 50%;
    top: 30%;
    width: 4vw;
    height: 4vw;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease-in-out;


}

.div002 {
    width: 80vw;
    height: 80vh;
    background-color: rgba(255, 255, 255, 0.45);
    position: absolute;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    border-radius: 1vh;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
    -webkit-user-select: none;
}

.div002_1 {
    width: 8vw;
    height: 80vh;
    float: left;
    top: 0;
    left: 0;
    background-color: rgba(255, 51, 51, 0.2);
    transition: all 0.3s ease-in-out;
}

.div002_1.active {
    width: 24vw;
    background: linear-gradient(to top,
    rgba(255, 55, 55, 0.8),
    rgba(255, 54, 54, 0.75),
    rgba(255, 52, 52, 0.75),
    rgba(255, 51, 51, 0.6),
    rgba(255, 51, 51, 0.24),
    rgba(255, 51, 51, 0.2)
    );
}

.img02_1:hover {
    transform: translate(-50%, -50%) scale(1.2);
}

.div002_2 {
    width: 10%;
    height: 50vh;
    position: absolute;
    top: 30vh;
    transition: all 0.3s ease-in-out;
}

#d2 div.part01 {
    /*width: 24vw;*/
    /*background-color: rgba(252, 202, 222, 0.5);*/
}

#d2 div.part02 {
    /*width: 24vw;*/
    /*background-color: rgba(248, 229, 236, 0.25);*/
}

#dd1 .div002_2 {
    background-color: rgba(255, 0, 67, 0.7);
}

#dd2 .div002_2 {
    background-color: rgba(255, 145, 145, 0.7);
}

#dd3 .div002_2 {
    background-color: rgba(255, 166, 207, 0.7);
}

#dd4 .div002_2 {
    background-color: rgba(0, 149, 255, 0.7);
}

#dd5 .div002_2 {
    background-color: rgba(234, 209, 128, 0.7);
}

#dd6 .div002_2 {
    background-color: rgba(179, 149, 255, 0.7);
}

#dd7 .div002_2 {
    background-color: rgba(152, 251, 152, 0.7);
}

#dd8 .div002_2 {
    background-color: rgba(87, 247, 252, 0.7);
}

.div002_2 p {
    margin-top: 3vh;
    display: none;
    width: 100%;
    height: 3vh;
    text-align: center;
    font-weight: bold;
    align-items: center;
    /*background-color: #ff0073;*/
    color: #ffffff;
    font-size: 1rem;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    transition: all 0.1s ease-in-out;
}

.div002_2 p.p02_1 {
    font-size: 2rem;
    font-weight: 900;
    height: 5vh;
}

.div002_2 p.p02_2 {
    margin-left: 10%;
    color: rgba(255, 255, 255, 0.9);
    width: 80%;
    font-size: 4rem;
    font-weight: 800;
    height: 30vh;
    display: block;
}

.div002_2 p.p02_2:hover {
    transform: scale(1.1);
    text-shadow: 0 0 10px rgba(178, 199, 225, 0.8);
}

.div002_2 p.p02_2.active:hover {
    transform: scale(1);
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.div002_2 p.p02_3 {
    height: 8vh;
}

.div002_2 p.p02_4 {
    height: 8vh;
}

.img02_1.active {
    transform: translate(-50%, -50%) scale(1.5);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    background-color: rgba(255, 255, 255, 0.5);
    position: relative;
    top: 35%;
    left: 12vw;

}

.div002_2 p.active {
    color: rgb(255, 255, 255);
    display: block;
}

.div002_1.active {
    width: 24vw;
}

.div002_2.active {
    top: 40vh;
    width: 24vw;
    height: 40vh;
}

.div002_2 p.p02_2.active {
    margin-left: 0;
    color: white;
    width: 100%;
    font-size: 1rem;
    font-weight: 400;
    height: 2vh;
    display: block;
}

.div003 {
    top: 50vh;
    left: 50vw;
    width: 95vw;
    height: 95vh;
    border-radius: 1vh;
    position: absolute;
    transform: translate(-50%, -50%);
    background-color: rgba(252, 202, 240, 0.5);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    -webkit-user-select: none;
}

.line {
    top: 50%;
    left: 40%;
    width: 2px;
    height: 95%;
    position: absolute;
    border-radius: 1px;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 0, 115, 0.5);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
}

.div003_1 {
    top: 50%;
    left: 20%;
    width: 35vw;
    height: 80vh;
    position: absolute;
    border-radius: 0.5vh;
    transform: translate(-50%, -50%);
    overflow: hidden;
}

.div003_1 .part01 {
    z-index: 10;
    height: 8vh;
}

.div003_1 .part01 .part01 {
}

.div003_1 .part02 {
    z-index: 9;
}

.div003_1 .part03 {
    z-index: 8;
}

.div003_1 .part04 {
    z-index: 7;
}

.div003_1 .part05 {
    z-index: 6;
}

.div003_2 {
    margin-bottom: 1vh;
    top: 0;
    left: 50%;
    width: 35vw;
    height: 8vh;
    position: relative;
    transform: translate(-50%, 0);
    background-color: rgba(250, 225, 234, 0.85);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
    transition: all 0.2s ease-in-out;
    -webkit-user-select: none;
    overflow: hidden;

}

.div003_2 p {
    font-size: 1rem;
    font-weight: 500;
    color: rgb(0, 0, 0);
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;

}

.div003_2 .timer {
    -webkit-user-select: none;
    position: absolute;
    bottom: 6px;
    right: 6px;
    z-index: 30;
}

.div003_2 .part01 {
    font-size: 1.6rem;
    display: flex;
    text-indent: 2em;
    width: 100%;
    height: 100%;
    /*background-color: rgba(234, 234, 234, 0.7);*/
    -webkit-user-select: none;
}

.div003_2 .part02 {
    /*text-indent: 2em;*/
    display: none;
}

.div003_2.active {
    top: 0;
    z-index: 20;
    height: 100%;
    position: absolute;
    background-color: rgb(252, 225, 237);
}

.div003_2 .part01.active {
    height: 8vh;
    display: flex;
    /*background-color: rgb(252, 225, 237);*/
}

.div003_2 p.active.dark {
    color: rgb(225, 225, 225);
}

.div003_2 p.dark {
    color: rgb(215, 215, 215);
    text-shadow: 0 0 2px rgba(215, 215, 215, 0.5);
}

.div003_2 div.dark {
    color: rgb(215, 215, 215);
    text-shadow: 0 0 2px rgba(215, 215, 215, 0.5);
}

.div003_2 p.dark:hover {
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
}

.div003_2.active.dark {
    background-color: rgb(194, 122, 171);
}

.div003_2 .part01.active.dark {
    background-color: rgb(194, 122, 171);
}

.div003_2 .part01.dark {
    background-color: rgb(194, 122, 169);
}

.div003_2 .part01.dark.hovering {
    color: #ffffff;
    /*background-color: rgba(255, 255, 255, 0.4);*/
}

.div003_2.dark:hover {
    border: 6px solid rgba(245, 183, 220, 0.65);
    box-sizing: border-box;
}

.div003_2:hover {
    border: 6px solid rgba(245, 183, 227, 0.65);
    box-sizing: border-box;
}

.div003_2.active.dark:hover {
    border: none;
    box-sizing: border-box;
}

.div003_2.active:hover {
    border: none;
    box-sizing: border-box;
}

.div003_2 .part01.hovering {
    color: #ce2899;
    border: 6px solid rgba(243, 108, 196, 0.65);
    box-sizing: border-box;
    font-size: 1.7em;
    text-shadow: 0 0 2px rgba(215, 215, 215, 0.5);
}

.div003_2 .part01.hovering {
    color: #ce2894;
    border: 6px solid rgba(250, 53, 171, 0.65);
    box-sizing: border-box;
    font-size: 1.7em;
    text-shadow: 0 0 2px rgba(215, 215, 215, 0.5);
}

.div003_2 .part01.active.hovering {
    color: #ce2886;
    text-shadow: 0 0 2px rgba(215, 215, 215, 0.5);
}

.div003_2 .part01.active:hover {
    color: #ce2899;
    text-shadow: 0 0 2px rgba(215, 215, 215, 0.5);
}

.div003_2 .part01.active:hover {
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

.div003_2 .part01.active.dark:hover {
    color: rgb(215, 215, 215);
    text-shadow: 0 0 2px rgba(215, 215, 215, 0.5);
}

.div003_2 .timer.active {
    display: none;
}

.div003_2 .part02.active {
    display: flex;
    margin: 2vw;
}

.mode {
    top: 4vh;
    left: 5vh;
    width: 5vh;
    height: 5vh;
    display: flex;
    font-size: 1.8rem;
    border-radius: 50%;
    position: absolute;
    align-items: center;
    justify-content: center;
    -webkit-user-select: none;
    transition: all 0.2s ease-in-out;
    transform: translate(-50%, -50%) scale(1);
    /*box-shadow: 0 0 10px rgba(136, 136, 136, 0.5);*/
    /*background-color: rgba(255, 255, 255, 0.5);*/
}

.mode:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.mode.active:before {
    content: "🌙";
}

.mode:before {
    content: "☀️";
}

.triangle-top-right {
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-left: 1vw solid transparent; /* 设置左边框为透明 */
    border-bottom: 1vw solid transparent; /* 设置下边框的宽度和颜色 */
    border-top: 1vw solid rgba(255, 35, 145, 0.8); /* 设置上边框为透明 */
    border-right: 1vw solid rgba(255, 35, 145, 0.8); /* 设置右边框的宽度和颜色 */
    position: absolute;
    z-index: 25;
}


.triangle-top-left {
    top: 0;
    left: -1vh;
    width: 0;
    height: 0;
    border-top: 8vh solid rgba(248, 155, 211, 0.7);
    border-left: 3vh solid rgba(248, 155, 211, 0.7);
    border-bottom: 8vh solid transparent;
    border-right: 3vh solid transparent;
    position: absolute;
    z-index: 20;
}


.triangle-bottom-right {
    bottom: 0;
    right: -6vh;
    width: 0;
    height: 0;
    /*border-image-source: linear-gradient(to right top, #ffd6e1, #ef5796);*/
    border-top: 24vh solid transparent; /* 设置上边框为透明 */
    border-left: 9vh solid transparent; /* 设置左边框为透明 */
    border-bottom: 24vh solid rgba(248, 155, 208, 0.7); /* 设置下边框的宽度和颜色 */
    border-right: 9vh solid rgba(248, 155, 205, 0.7); /* 设置右边框的宽度和颜色 */
    position: absolute;
    z-index: 20;
}

div.p.part02.active {
    display: block;
    width: 35vw;
}

div.p p {
    width: 32vw;
    margin-bottom: 2vh;
}


div.div003_1-2 {
    width: 52vw;
    height: 95vh;
    background: linear-gradient(to bottom,
    rgba(248, 139, 179, 0),
        /*rgba(255, 155, 184, 0.7),*/ rgba(248, 216, 230, 0.55),
    rgba(248, 216, 230, 0.55),
    rgba(248, 216, 230, 0.55),
    rgba(255, 255, 255, 0)
    );
    position: absolute;
    right: 30%;
    top: 50%;
    transform: translate(50%, -50%);
    /*box-shadow:*/
    /*    -1px 0 0 rgba(0, 0, 0, 0.1),*/
    /*    1px 0 0 rgba(0, 0, 0, 0.1)*/
    /*;*/
    overflow: hidden;
}


.pack_profile {
    display: block;
    float: left;
    height: 75%;
    margin: 2vh;
    border-radius: 1vh;
}

div.pack_img {
    width: 90%;
    height: 10.5%;
    background: linear-gradient(to bottom,
    rgba(248, 224, 231, 0.8),
    rgba(248, 224, 231, 0.8),
    rgba(255, 225, 235, 0.5),
    rgba(255, 225, 235, 0.2)
    );
    /*background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(246, 106, 157, 0.3));*/
    position: absolute;
    top: 9.5%;
    left: 5%;
    border-top-right-radius: 0.5vh;
    border-top-left-radius: 0.5vh;
}

div.pack_img p.p_01 {
    font-size: 3.2em;
    margin: 1.3vh 0;
    font-weight: bold;
    color: #424242;
}

div.pack_img p.p_02 {
    font-size: 1em;
    /*font-weight: bold;*/
    margin: 0;
    width: 3vw;
    height: 2.5vh;
    padding-right: 0.1em;
    padding-left: 0.7em;
    position: relative;
    border-radius: 0.7vh;
    transform: translate(-50%, -50%);
    top: 2%;
    left: 5%;
}

div.pack_img p.p_02:before {
    width: 0.8vh;
    height: 0.8vh;
    border-radius: 50%;
    background-color: rgb(235, 208, 223);
    position: absolute;
    top: 1.25vh;
    left: 0.8vh;
    content: "";
    transform: translate(-50%, -50%);
    box-sizing: border-box;
}

p.p_02.tag {
    padding-left: 0.4em;
    padding-right: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
    background-color: #f8a2d3;
    border: 2px solid rgba(241, 104, 193, 0.6);
    border-radius: 1vh;
    width: 4vw;
    height: 4vh;
    position: relative;
    top: 5%;
    left: 1%;
}

p.p_02.tag:before {
    width: 1.2vh;
    height: 1.2vh;
    border-radius: 50%;
    background-color: rgb(235, 208, 223);
    position: absolute;
    top: 2vh;
    left: 1.2vh;
    content: "";
    transform: translate(-50%, -50%);
    border: 2px solid rgb(245, 132, 209);
    box-sizing: border-box;
}

div.pack_content {
    background: linear-gradient(to bottom,
    rgba(255, 225, 235, 0.2),
    rgba(246, 106, 202, 0.5),
    rgba(246, 106, 202, 0.5),
    rgba(246, 106, 202, 0.5)
    );
    width: 90%;
    height: 70.5%;
    position: absolute;
    top: 20%;
    left: 5%;
    border-bottom-right-radius: 0.5vh;
    border-bottom-left-radius: 0.5vh;
}

div.pack_introduce {
    width: 95%;
    height: 30%;
    /*background-color: rgba(255, 143, 191, 0.3);*/
    transform: translate(-50%, -50%);
    position: absolute;
    border-radius: 0.5vh;
    top: 15%;
    left: 50%;
    overflow-x: hidden;
    overflow-y: auto;
}

div.pack_introduce::-webkit-scrollbar {
    display: none;
}

div.pack_imgs {
    width: 95%;
    height: 55%;
    background-color: rgba(238, 130, 200, 0.2);
    transform: translate(-50%, -50%);
    position: absolute;
    border-radius: 0.5vh;
    top: 60%;
    left: 50%;
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: auto;
}

div.pack_imgs::-webkit-scrollbar {
    display: none;
}

div.pack_select {
    width: 30%;
    height: 8%;
    /*background-color: rgba(255, 255, 255, 0.3);*/
    transform: translate(-50%, -50%);
    position: absolute;
    border-radius: 0.5vh;
    top: 94%;
    left: 50%;
}

p.caption {
    color: #252525;
    font-size: 1.02em;
    margin: 12px 0 0 0;
    width: 95%;
    height: auto;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

p.caption.c01 {
    height: 25%;
    margin: 0;
    font-size: 1.5em;
    font-weight: bold;
    position: absolute;
    top: 20%;
    left: 50%;
}

p.caption:nth-of-type(2) {
    margin: 0;
}

div.btn-more {
    width: 100%;
    height: 20%;
    position: absolute;
    top: 2%;
}

p.more {
    margin: 1vh 0;
    display: inline-block;
    background-color: #ffcfe7;
    text-align: center;
    align-content: center;
    border-radius: 0.5vh;
    box-sizing: border-box;
    border: 2px solid rgba(255, 68, 146, 0.5);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.65);
    width: 20%;
    height: 100%;
}

a.a01 {
    text-decoration: none;
    color: #323232;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    position: relative;
    top: 2%;
    left: 55%;
}

p.more:hover {
    color: #f382ac;
    background-color: #f8dbe8;
    box-shadow: 0 0 4px rgba(64, 64, 64, 0.7);
    border: 2px solid rgba(255, 99, 200, 0.5);
}

p.more:active {
    color: #fce3ee;
    background-color: rgba(252, 151, 188, 0);
    box-shadow: none;
    border: 2px solid rgba(255, 68, 168, 0.5);
}

hr.hr001 {
    margin: 0;
    background-color: rgba(255, 255, 255, 0.45);
    border-radius: 1px;
    border: none;
    width: 15%;
    height: 2px;
    position: absolute;
    top: 32%;
    left: 2.5%;
}

img.instance {
    margin: 0;
    padding: 0;
    display: inline-block;
    width: 5%;
    height: 100%;
    vertical-align: middle;
    object-fit: cover;
    object-position: center;
    border-radius: 0.5vh;
    transition: all 0.3s ease-in-out
}

.wd {
}

img.instance.active {

    width: 75%;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.65);

}

a.sel {
    margin: 0 0.5vh;
    cursor: pointer;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    width: 2vh;
    height: 2vh;
    border-radius: 50%;
    box-sizing: border-box;
    box-shadow: 0 0 4px rgba(64, 64, 64, 0.7);
    background-color: #f8dbe8;
    border: 2px solid rgba(255, 99, 164, 0.5);
    transition: all 0.1s ease-in-out;
}

a.sel:hover {
    color: #f382c2;
    background-color: #fdeff5;
    box-shadow: 0 0 4px rgba(64, 64, 64, 0.7);
    border: 2px solid rgba(255, 145, 191, 0.5);
}

a.sel:active {
    color: #fce3ee;
    background-color: rgba(252, 151, 188, 0);
    box-shadow: none;
    border: 2px solid rgba(255, 237, 243, 0.5);
}

a.sel.active {
    background-color: #ffafdf;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.6);
}

a.sel.active:hover {
    background-color: #ffcfe5;
    box-shadow: 0 0 6px rgb(255, 255, 255);
    border: 2px solid rgba(255, 255, 255, 0.85);
}

a.sel.active:active {
    background-color: rgba(213, 138, 174, 0.85);
    box-shadow: none;
    border: 2px solid rgba(255, 255, 255, 0.85);
}

.div004 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(255, 225, 128, 0.1);
    transition: all 0.5s ease-in-out;
    box-sizing: border-box;
}

.div004_1 {
    width: 90%;
    height: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.5s ease-in-out;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    /*border-radius: 0.5vh;*/
    /*box-shadow: 0 0 4px rgba(0, 0, 0, 0.65);*/
    background: rgba(255, 155, 125, 0.01) linear-gradient(to bottom,
    rgba(255, 155, 125, 0),
    rgba(255, 155, 125, 0.15),
    rgba(255, 155, 125, 0.2),
    rgba(255, 155, 125, 0.15),
    rgba(255, 155, 125, 0)
    );

}

div.div004_1::-webkit-scrollbar {
    display: none;
}

div.div004_2 {
    width: 95%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    /*background: rgba(255, 148, 148, 0.45);*/
    overflow-y: auto;
    overflow-x: hidden;
}

div.div004_2::-webkit-scrollbar {
    /*display: none;*/
}

div.div-part {
    width: 49%;
    height: 95%;
    position: relative;
    top: 0;
    left: 1vh;
    float: left;
    box-sizing: border-box;
    transition: all 0.5s ease-in-out;
    overflow-y: hidden;
    overflow-x: hidden;
    /*padding: 0 2%;*/
    /*box-shadow: 0 0 4px rgba(0, 0, 0, 0.65);*/
    border-radius: 0.5vh;
    background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.45),
    rgba(255, 255, 255, 0.50),
    rgba(255, 255, 255, 0.55),
    rgba(255, 255, 255, 0.55),
    rgba(255, 255, 255, 0.55),
    rgba(255, 255, 255, 0.50),
    rgba(255, 255, 255, 0.45),
    rgba(255, 255, 255, 0)
    );
    margin: 1vh 1vh 0 0;
    display: inline-block;
}

div.dp01 {
    /*height: 71%;*/
}

div.dp02 {
    /*height: 25%;*/
}

div.dp03 {
    /*height: 45%;*/
}

div.dp04 {
    /*width: 90.7%;*/
    /*height: 26.5%;*/
}

div.textArea {
    width: 100%;
    height: 100%;
    /*background: white;*/
    position: absolute;
    top: 0;
    left: 0;
    -webkit-user-select: none;
}

p.title-part {
    color: transparent;
    text-shadow: 2px 0 1px rgba(108, 108, 108, 0.24);
    background-image: linear-gradient(to left,
    rgba(255, 148, 102, 0.45),
    rgb(250, 99, 34)
    );

    -webkit-background-clip: text;
    background-clip: text;
    font-size: 4em;
    width: 32%;
    height: auto;
    position: relative;
    /*float: left;*/
    top: 2%;
    left: 5%;
    text-align: left;
    font-weight: bold;
    display: inline-block;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 0.5;
    -webkit-user-select: none;
}

p.txt-part {
    margin-top: 2%;
    position: relative;
    width: 85%;
    top: 15%;
    left: 5%;
    color: rgba(0, 0, 0, 1);
    font-size: 1.0em;
    /*margin: 0;*/
    padding: 0;
}

span.clipBoard {
    width: 20%;
    color: #ffa45a;
    cursor: pointer;
    background-color: rgba(248, 226, 219, 0.55);
    box-shadow: 0 0 2px rgba(180, 180, 180, 0.4);
    border: 2px solid transparent;
    border-radius: 0.5vh;
    box-sizing: border-box;
    transition: all 0.1s ease-in-out;
    -webkit-user-select: none;
}

span.clipBoard:hover {
    color: #ffae00;
    background-color: #fdeff5;
    box-shadow: 0 0 2px rgba(180, 180, 180, 0.4);
    border: 2px solid rgba(255, 160, 52, 0.65);
    box-sizing: border-box;
    transition: all 0.1s ease-in-out;
}

span.clipBoard:active {
    color: #fcf1e3;
    background-color: rgba(105, 105, 105, 0.4);
    /*box-shadow: none;*/
    border: 2px solid rgba(255, 255, 255, 0.85);
    transition: all 0.1s ease-in-out;
    box-shadow: 0 0 4px rgba(180, 180, 180, 0.2);
}

p.txp01, p.txp02, p.txp03, p.txp04, p.txp05 {
    font-weight: bold;
}

p.txp001, p.txp002, p.txp003, p.txp004, p.txp005 {
    left: 8%;
}

a.download_link {
    color: #ffa45a;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.01s ease-in-out;
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 14%;
    text-align: center;
    font-size: 1em;
    font-weight: bold;
    /*transition: all 0.3s ease-in-out;*/
    box-shadow: 0 0 4px rgba(64, 64, 64, 0);
    border: 2px solid transparent;
    background-color: rgba(248, 226, 219, 0.55);
    border-radius: 0.5vh;
    position: relative;
    box-sizing: border-box;
    left: 0%;
    -webkit-user-select: none;
    /*box-shadow: 0 0 4px rgba(64, 64, 64, 0.7);*/
}

a.download_link:hover {
    color: #ffae00;
    background-color: #fdeff5;
    box-shadow: 0 0 2px rgba(180, 180, 180, 0.4);
    border: 2px solid rgba(255, 160, 52, 0.65);
    box-sizing: border-box;
    transition: all 0.1s ease-in-out;

}

a.download_link:active {
    color: #fcf1e3;
    background-color: rgba(105, 105, 105, 0.4);
    /*box-shadow: none;*/
    border: 2px solid rgba(255, 255, 255, 0.85);
    transition: all 0.1s ease-in-out;
    box-shadow: 0 0 4px rgba(180, 180, 180, 0.2);

}

a.dl03 {
    width: 17%;
}

a.dl04 {
    width: 20%;
}

a.dl05 {
    width: 23%;
    margin-top: 2%;
}

img.qrcode {
    margin: 0;
    padding: 0;
    width: 15vh;
    height: 15vh;
    position: absolute;
    border-radius: 0.8vh;
    /*float: left;*/
    top: 82%;
    left: 13vh;
    transform: translate(-50%, -50%);
}

.connect01 {
    /*margin-left: 9vh;*/
}

.connect02 {
    margin-left: 5.5vh;
}

img.qr01 {
    /*top: 90%;*/
    /*left: 22vh;*/
}

img.qr02 {
    /*top: 90%;*/
    left: 30vh;
}

div.div005 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(255, 225, 128, 0.1);
    transition: all 0.5s ease-in-out;
    box-sizing: border-box;
}

div.about {
    width: 90%;
    height: 50%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    transition: all 0.5s ease-in-out;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    /*background: rgba(255, 155, 125, 0.01) linear-gradient(to bottom,*/
    /*rgba(255, 155, 125, 0),*/
    /*rgba(255, 155, 125, 0.15),*/
    /*rgba(255, 155, 125, 0.2),*/
    /*rgba(255, 155, 125, 0.15),*/
    /*rgba(255, 155, 125, 0)*/
    /*);*/
    border-bottom-left-radius: 0.5vh;
    border-bottom-right-radius: 0.5vh;
    box-shadow: -2px 1px 2px rgba(0, 0, 0, 0.3),
    2px 1px 2px rgba(0, 0, 0, 0.3);
    padding: 2%;
    display: inline-block;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    /*line-height: 1.5;*/
    font-size: 1.5em;
    font-weight: bold;
}

a.archiving {
    width: 15%;
    height: auto;
    position: relative;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 1em;
    font-weight: normal;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
    display: inline-block;
    /*-webkit-user-select: none;*/
    text-decoration: none;
    transition: all 0.01s ease-in-out, background-color 0.01s ease-in-out;
}

a.archiving:hover {
    color: rgb(255, 255, 255);
    cursor: pointer;
    transition: all 0.05s ease-in-out;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
    border-radius: 0.5vh;
    border: 2px solid rgba(255, 255, 255, 0.8);
    background-color: rgba(255, 255, 255, 0.2);
}

a.archiving:active {
    color: rgb(94, 94, 94);
    background-color: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.1s ease-in-out;
    box-shadow: 0 0 4px rgba(94, 94, 94, 0.8);
    border-radius: 0.5vh;
    border: 2px solid rgba(94, 94, 94, 0.8);
}

div.about-text-area {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /*transform: translate(0, -50%);*/
    /*text-align: center;*/
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
    display: inline-block;
    -webkit-user-select: none;
    background: linear-gradient(to right,
    rgba(175, 227, 255, 0.85),
    rgba(195, 247, 255, 0.85),
    rgba(215, 255, 255, 0.85),
    rgba(235, 255, 255, 0.85),
    rgba(255, 255, 255, 0.05)
    );
    overflow: hidden;
}

div.about-text {
    margin-top: 1vh;
    padding: 0;
    width: 100%;
    height: 35%;
    position: relative;
    top: 0;
    left: 0;
    transform: translate(0, 0);
    text-align: left;
    font-size: 1em;
    font-weight: bold;
    line-height: 1.5;
    color: rgb(32, 32, 32);
    display: block;
    -webkit-user-select: none;
    background: linear-gradient(to right,
    rgba(180, 180, 180, 0.15),
    rgba(255, 255, 255, 0.05)
    );
    box-shadow: -2px 1px 2px rgba(0, 0, 0, 0.3),
    2px 1px 2px rgba(0, 0, 0, 0.3);
    /*border-radius: 0.5vh;*/
    box-sizing: border-box;
    /*overflow-y: auto;*/
    overflow: hidden;
}

div.at01 {
    margin: 0;
}

div.at02 {
    height: 64%;
}

div.at03 {
    height: 48%;
}

p.about-content {
    margin: 0;
    padding: 0;
    font-size: 3vh;
    width: 10%;
    position: relative;
    top: 2%;
    left: 2%;
}

a.about-link {
    margin: 0;
    padding: 0;
    width: 15vh;
    height: 5vh;
    /*position: relative;*/
    /*!*float: left;*!*/
    /*top: 0%;*/
    /*left: 0%;*/
    /*transform: translate(-50%, -50%);*/
    text-align: center;
    font-size: 1em;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
    display: block;
    text-decoration: none;
    transition: all 0.01s ease-in-out, background-color 0.01s ease-in-out;
    /*box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);*/
    border-radius: 0.5vh;
    border: 2px solid rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0.2);
    box-sizing: border-box;
    overflow: hidden;
}

a.about-link:hover {
    color: rgb(255, 255, 255);
    cursor: pointer;
    transition: all 0.05s ease-in-out;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.8);
    background-color: rgba(255, 255, 255, 0.4);
}

a.about-link:active {
    color: rgba(147, 147, 147, 0.79);
    cursor: pointer;
    transition: all 0.1s ease-in-out;
    box-shadow: 0 0 4px transparent;
    background: rgba(192, 192, 192, 0.8);
    border: 2px solid rgba(162, 162, 162, 0.8);
}

a.al01 {
    position: absolute;
    top: 2vh;
    left: 16vh;
}

a.al02 {
    position: absolute;
    top: 2vh;
    left: 40vh;
}

a.al03 {
    position: absolute;
    top: 2vh;
    left: 64vh;
}

p.ac002 {
    width: 32%;
    height: 80%;
    position: absolute;
    top: 20%;
    left: 5%;
    font-size: 2vh;
    font-weight: normal;
}

img.qr03 {
    top: 65%;
    left: 16%;
}

p.ac003 {
    font-size: 1.6vh;
    font-weight: normal;
    display: block;
    float: none;
    position: absolute;
    top: 28.5vh;
    left: 24vh;
}