* {
    font-family: 'Douyin Sans';
}

::selection {background-color:rgb(145, 236, 209); color:rgb(40,55,92);} 
::-moz-selection {background-color:rgb(145, 236, 209); color:rgb(40,55,92);} /*火狐浏览器*/
::-webkit-selection {background-color:rgb(145, 236, 209); color:rgb(40,55,92);} /*谷歌*/

body {
    background: linear-gradient(rgb(110, 104, 192) , rgb(78, 80, 199));
    background-attachment: fixed;
    overflow-x: hidden;
}

p2 {
    color: rgb(150, 150, 150);
    font-size: 0.8vw;
    font-family: Arial;
}

.pbtn {
    color: rgb(145, 236, 209);
}

.pbtn:hover {
    background-color:rgb(145, 236, 209);
    color:rgb(40,55,92);
    border-radius: 0.4vw;
}

.part {
    width: 70vw;
    margin: auto;
    margin-bottom: 6vw;
    font-size: 0;
    /* font-size: 0; 是为了防止浏览器把换行符变成空格添加到div之间形成空隙 */
    /* 如果子元素含有文本，则需要给子元素单独设置font-size */
}

.box {
    position: relative;
    display: inline-block;
    overflow: hidden;
    color: rgb(0, 0, 0);
    text-decoration: none;
    min-height: 25vw;
    max-height: 40vw;
    text-align: center;
    border-radius: 2vw;
    cursor: pointer;
    transition: transform 1s;
    background: linear-gradient(140deg , rgb(255, 255, 255) , rgb(194, 231, 255));
}

.box:hover {
    transform: scale(105%);
}

.boxbg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
}

.boxcontainer {
    width: 100%;
    height: 100%;
    padding: 4vw;
}

.boxlogo {
    width: 10vw;
    height: 10vw;
    margin: 0 auto;
    background-size: contain;
    background-repeat: no-repeat;
}

.boxcontainer h1 {
    font-size: 2.4vw;
    margin-top: 1vw;
}

.boxcontainer h2 {
    font-size: 1.6vw;
}

.boxcontainer p {
    font-size: 1vw;
    padding-top: 1vw;
}

.boxpad {
    display: inline-block;
    width: 4%;
}

.full {
    width: 100%;
}

.big {
    width: 80%;
}

.mid {
    width: 63%;
}

.half {
    width: 50%;
}

.small {
    width: 33%;
}

.smaller {
    width: 26%;
}

.mini {
    width: 20%;
}

.part2 {
    width: 80vw;
    margin: auto;
    margin-bottom: 6vw;
    font-size: 0;
    /* font-size: 0; 是为了防止浏览器把换行符变成空格添加到div之间形成空隙 */
    /* 如果子元素含有文本，则需要给子元素单独设置font-size */
}

.frame {
    display: inline-block;
}

.part2 p {
    font-size: 1.2vw;
    color: rgb(255, 255, 255);
    margin-top: 0.6vw;
}

.part2 p2 {
    font-size: 0.8vw;
    color: rgb(255, 255, 255);
    margin-right: 0.4vw;
    font-family: 'Douyin Sans';
}

.outside {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    border: 1vw rgb(0 , 0 , 0);
    border-style: solid;
}

.inside {
    width: 100%;
    height: 100%;
    border-left: 0.5vw rgb(40 , 40 , 40);
    border-right: 0.5vw rgb(40 , 40 , 40);
    border-top: 0.5vw rgb(30 , 30 , 30);
    border-bottom: 0.5vw rgb(50 , 50 , 50);
    border-style: solid;
}

.inside img {
    width: 100%;
}

.filmbox {
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 6vw;
    font-size: 0;
    /* font-size: 0; 是为了防止浏览器把换行符变成空格添加到div之间形成空隙 */
    /* 如果子元素含有文本，则需要给子元素单独设置font-size */
}

.filmcontainer {
    position: relative;
    text-align: center;
}

.filmbox p {
    font-size: 1.2vw;
    color: rgb(255, 255, 255);
    margin-top: 0.6vw;
}

.filmboxplay {
    pointer-events: none;
    opacity: 0%;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;
    transform: translateX(-50%);
    transition: opacity 0.5s;
    text-decoration: none;
}

.filmcontainer:hover .filmboxplay {
    opacity: 100%;
    cursor: pointer;
    pointer-events: all;
}

.filmboxplay p {
    color: rgb(255, 255, 255);
    margin-top: 30%;
}

.filmboxplay img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    width: 5vw;
    height: 5vw;
    z-index: 11;
}

.film {
    height: 2vw;
    background-image: url('../image/art/film.svg');
    background-size: contain;
    margin: 0 auto;
}

.tape {
    display: inline-block;
    height: 10vw;
    max-width: 20vw;
}

.tape img {
    height: 100%;
}

.tapepad {
    display: inline-block;
    width: 0.7vw;
    height: 10vw;
    background-color: rgb(0 , 0 , 0);
}