* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

em,
i {
    font-style: normal;

}

li {
    list-style: none;
}
img {
    border: 0;
    vertical-align: middle;
}
button {
    cursor: pointer;
}
a {
    text-decoration: none;
    color: #666;
}
a:hover {
    color: pink;
    cursor: pointer;
}

/* body {
   background-color: black;
    background-size: cover;
} */

.viewport {
    
    min-width: 1024px;
    max-width: 1920px;
    /* margin: 0 auto; */
    padding: 1.4rem .25rem 0;
   background-color: rgb(255, 255, 255);
    min-height: 1200px;
    /* margin: 1.25rem; */
}
.head .column{
    flex: 3;
    background-color: #666;
    border-radius: .0625rem;
}
.head .column:nth-child(1) {
    flex: 1;
    /* background-color: #1e1e1e; */
}
.head .column:nth-child(even){
    /* background-color: red; */
}
.head {
    display: flex;
    flex-direction: column;
    width: 21.25rem;
    /* height: 19.5625rem; */
    margin: 0 auto;
    /* background-color: orange; */
    gap: .5625rem;
}
.one h1 {
    color: #b45cb0;
    font-size: .75rem;
}
.one span {
    color: white;
    display: inline-block;
    padding: 0 .1rem 0 0;
}
 .one {
    text-align: center;
}
.one p {
    color: #cdcdcd;
    margin: .3rem 0 0;
    font-size: .25rem;
}
.two {
    color: wheat;
    
    display: flex;
    flex-direction: column;
    padding: .625rem;
    /* background-color: black; */
}
.two .title {
    flex: 2;
    font-size: .375rem;
}
.two .title2{
   flex: 3; 
   font-size: .625rem;
   margin: .2rem 0;
}
.title .img2 {
    width: 2.5rem;
}
.two .main {
    display: flex;
    flex: 6;
}
.two img {
    width: .75rem;
}
.title span,
.title2{
    color: #ededed;
}
.three_left>p{
    font-size: .1875rem !important;
    color: #cdcdcd !important;
}
.main .two_left {
    flex: 3;
    padding: .1rem;
    border-radius: .125rem;
    background-color: #eeeeee;
}
.two .main .two_left h5{
    color: #cdcdcd;
}
.two .main .two_left p{
    margin: .625rem 0;
    color: #212121;
}
 .main .two_right {
    flex: 7;
    padding: .1rem;
    background-color: #6200ee;
    border-radius: .125rem;
}
.two .main .two_right h5 {
    color: #BDBDBD;
}
.two .main .two_right P {
    color: #FFFFFF;
    margin: .625rem 0;
}
.two_left img{
    width: 3.75rem;
    border-radius: .125rem;
    margin: 0 0 0 1.875rem;
}

.two .main .three{
     background-color: rgba(0, 0, 0, 0);
    flex: 3;
    padding: .1rem; 
    /* margin-left: -0.75rem; */
    z-index: 10;
}
.two .main .three>div{
    margin-left: .25rem;
}
.two .main .two_right {
    z-index: 1;
}
.two .main .two_right{
    /* background-color: black; */
}
.two .main .rigth_main{
    width: 100%;
    height: 100%;
    background-color: #ff4081;
    border-radius: .125rem;
    margin-left: -0.5125rem;
    margin-top: .375rem;
    z-index: 1;
}
.two .main .rigth_main>p {
    color: #FFFFFF;
    padding: .75rem;
}
.three{
    flex: 7;
    padding: .1rem;
    border-radius: .125rem;
}
.main .two_left>.three{
    color: #ffffffcc !important;
    font-size: .25rem;
    margin: .0625rem 0 !important;
}
.main .three_left {
    background-color: rgba(0, 0, 0, 0);
}
.main .three_right {
    background-color: rgba(0, 0, 0, 0);
}
.main .three_right img {
    width: 3.75rem;
}