body{
    background-color: #fcfcfc;
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-family: 'Roboto', !important;
    font-family: 'Roboto','PingFang SC','Microsoft Yahei','Tahoma','Hiragino Sans GB';
    color: #3e3e3e;
    text-decoration: none;
    line-height: 1.5;
}

/*通用style*/
.mar_whole{
    margin: 0 10%;   
}

.pad_whole{
    padding: 6% 0 6% 0;
}

.mar_some{
    margin: 6% 0;
}

.bg_white{
    background-color: #fff;
}

.bg_grey{
    background-color: #fcfcfc;
}

.nav_grey{
    background-color: #fcfcfc
}

p{ 
    margin: 0;
}

img{
    border-radius: 0.2em;
    max-width: 100%;
}

h3,h5{
    margin-block-start: 0em;
    margin-block-end: 0em;
}

/* 导航栏 */
 nav{
     width: 100%;
     background-color: #fff;
     padding: 3% 0 ;
 }

.nav_whole{
     width:auto;
    display: flex;
    justify-content: space-between;
}

.nav_right{
    display: flex;
    line-height: 40px;
    text-align: center;

}

.brand{
    display: block;
    width:26%;
    max-width: 100%;
    height:50%;
    align-self: center;
    margin-right: 30px;
    cursor:pointer;
}


.brand img{
    max-width: 100%;
    width: 84%;
    height: 10%; 
    border-radius: 0;
    transition: 200ms;
}


.brand img:hover{
    transform: scale(0.86);
}

.lan{
    width: 20%;
    height:auto;
    max-width:100%;
    align-self: center;
    position: relative;
    text-align: right;
    flex-grow: 1;
}

.dropbtn{
    width:120px;
    max-width: 120px;
    background-color:#fcfcfc;
    padding: 10% 2%; /*padding决定整个btn有多大*/
    cursor: pointer;
    border: 0;
    border-radius: 0.2em; 
    font-size: 16px;
    outline: none;
    cursor:pointer;
}

 .btn_content{
    width: 120px;
    max-width: 120px;
    background:#fcfcfc;
    position: absolute;
    display: flex;
    flex-direction: column;
    display: none;
    
}

.btn_content .content_line{
    width:120px;
    height: 1px;
    background-color: #f1f1f1;
    align-self: flex-end;

}

.btn_content a{
    display: block;
    align-self: center;
    color: #3e3e3e;
    text-decoration: none;
}

.lan:hover .btn_content{
    display: block;
    display: flex;
    border-radius: 0 0 0.2em 0.2em;
}

.btn_content a:hover{
    color: #9e9e9e;
}

.lan:hover .dropbtn{
    border-radius: 0.2em 0.2em 0 0;
}

.re{
    margin-right:10%;
    cursor: pointer; 
    text-decoration: none;
    color:#3e3e3e;
}
.re:hover{
    color:#7dd62c;
    text-decoration: none;
}


/* 页脚——版权 */
.copyright{
    font-size: 0.8em;
    color: #d5d5d5;
    font-weight: 0.2em;
    margin: 6% 0 3%;
    text-align: center;
}

/** 文章大标题、关于我、作品大标题 **/
.nor_title{
    font-size: 2em;
    font-weight: 600;
    margin: 12% 0 4%;
    display: flex;
}

.nor_title span{
    color: #7dd62c;
    border-left: 10px solid #7dd62c;
    margin-right: 2%;
}

/** 😄二级标题 **/
/* 带序号副标题 */
.subtitle{
    width:auto;
    font-size: 1.3em;
    font-weight: 500;
    padding: 0% 0 0%;
}

.subtitle :nth-child(1){
    border-left: 6px solid #7dd62c;
    color: #7dd62c;
    margin:0 1% 0 0%;
    padding-left: 1%;
}

.subtitle :nth-child(2){
    margin-right: 2%;
    color:#fff;
    font-weight: 550;
    padding:0 1% 0 0;
    color: #7dd62c;
}


@media(min-width:1200px){
    .brand{
        width:20%;
        /* background-color: aquamarine; */
    }

    .lan{
        width: 11%;
        /* background-color: aquamarine; */
        }
    
        .tab li{
            margin:8% 12% 3%;
        }
/** 文章大标题、关于我、作品大标题 **/
        .nor_title{
            font-size: 2em;
            font-weight: 600;
            margin: 20% 0 4%;
            display: flex;
        }
}

#top_btn{
    display: block;
    position:fixed;
    left: 14%;
    bottom: 10%;
    color:#3e3e3e;
}

#top_btn img{
    margin-top: 0%;
    padding: 0;
    max-width: 12%;
}

@media(min-width:1920px){
    body{
        font-size: 18px;
    }
    /*其他*/
    .pad_whole{
        padding: 4% 0 4%;
    }

    .mar_some{
        margin: 0 0 4%;
    }

    /*nav*/
    .brand{
        width:18%;
        /* background-color: aquamarine; */
    }

    .lan{
        width: 12%;
        /* background-color: aquamarine; */
        }
    
    .tab li{
        margin:8% 12% 3%;
    }

    .btn_content .content_line{
           width:72%;
    }
    
    .head_tittle{
        font-size: 2em;
        font-weight:600;
        }  
    
    .header_whole .header_right{
        width: 30%;/*调整这里等于调整图片的padding*/
        }
    
    header .header_whole{
        padding-top: 1%;/*内边距增加每个块的间距*/
    }

    footer .plateform{
        width:66%;
   
    }

    .plateform img{
        width: 100%;
    }

    .card_thing .card_t{
        width: 10%;
    }

    .card_list .card_thing{
        padding:1.6em 1.2em 1.6em;
    }

    .subtitle{
        margin-bottom: 1%;
    }
}

@media(max-width:480px){

    body{
        font-size: 16px;
        font-family: 'Roboto', !important;
    }

      /**总*/
    .mar_whole{
        margin:0 7% ;   
    }
    
     /*nav*/
    .dropbtn .hide{
        display: none;
    }

    .nav_whole{
        width:auto;
        margin-top: 6%;
    }
    
    .brand{
        width:54%;
        height:30%;
        align-self: center;
    }
    
    
    .brand iframe{
        max-width: 100%;
        width: 68%;
    }
     
    .lan{
        width: 28%;
    }

    .btn_content .content_line{
        display: none;
    }

    .lan:hover .btn_content{
        border:solid 1px #f6f6f6;
        padding: 4%;
        margin-top: 4%;
        border-radius: 0.2em;
        box-shadow: 0 10px 20px  rgba(119, 119, 119, 0.09);
    }
    
    .dropbtn img{
        width: 28%;
        height: 28%;
    }
    
    /* 标题  */
    .nor_title{
        font-size: 1.5em;
    }

    .nor_title span{
        border-left: 5px solid #7dd62c;
    }

    /* 带序号副标题 */
    .subtitle{
       font-size: 1.4em;
        font-weight: 550;
        margin: 4% 0 10%;
        }
            
    .subtitle :nth-child(1){
        color: #7dd62c;
        font-weight: 700;
        margin-right: 2%;
        }
            
    .subtitle :nth-child(2){
        margin-right: 4%;
        color: #7dd62c;
        font-weight: 550;
        }
}