@media (min-width:1440px) and (max-width:1919px){
    .part7 .content .item{
        width: 90%;
    }
}

/*============ Desktop Device ===========*/
@media (min-width:1351px) and (max-width:1439px){

    .part7 .content .item{
        width: 80%;
    }
}


/*============ Laptop Device ===========*/
@media (min-width:1024px) and (max-width:1350px){
    body{
        font-size: 14px;
    }
    .content{
        width: 86%;
    }
    h1{
    font-size: 28px;
    }

    h2 {
    font-size: 20px;
    }
    .file-card.card-img>img{
        width: 200px;
    }
    .part9 .file-tab{
        width: 86%;
    }
}


/*============= Tablet Large device ===============*/
@media (min-width:992px) and (max-width:1023px){
    body{
        font-size: 14px;
    }
    .content{
        width: 90%;
    }
    h1{
    font-size: 28px;
    }

    h2 {
    font-size: 20px;
    }
    .file-card.card-img>img{
        width: 200px;
    }
    .part9 .file-tab{
        width: 90%;
    }
}


/*============= Tablet device ===============*/
@media (min-width:768px) and (max-width:991px){
    body{
        font-size: 14px;
    }
    .content {
        width: 95%;
        margin: 0 auto;
    }
    h1{
    font-size: 26px;
    }

    h2 {
    font-size: 20px;
    }
    .title {
    width: calc(100% - 20px);
    padding: 20px 0 0 0;
    text-align: left;
    }
    .title h1{
        justify-content: left;
        margin-bottom: 15px;
    }
    .title p{
        opacity: .9;
        line-height: 24px;
    }
    .left {
    width: 100% !important;
    }

    .right {
    width: 100% !important;
    }
    .part1 .video-box{
        display: none;
    }
    .part1 .content .left{
        margin: 30px 0;
        text-align: center;
    }
    .part1 .content .left img{
        width: 80%;
    }
    .part1 .content .right img{
        width: 80%;
        margin: 30px 0;
    }
    .part1 .content .right p{
        width: 90%;
        margin: 15px auto;
    }
    .part1 .content{
        flex-direction: column;
    }
    .part1 .video-container {
        display: none;
    }
    .part2{
        background: 
        url(../images/back2.png) no-repeat,rgba(0, 0, 0, 0.7);
        background-size: 100% auto;
        background-blend-mode: overlay; 
    }
    .part2 .content{
        flex-wrap: wrap;
    }
    .part2 .content .item{
        padding: 15px 10px;
        width: 100%;
        margin: 5px 0;
    }
    .part3 .content{
        flex-wrap: wrap;
    }
    .part3 .content-footer{
        width: calc(95% - 10px);
    }
    .file-card.card-img>img{
        width: 100px;
        transform: scale(1,1);
        border-radius: 8px;
    }
    .part4 
    .video-container{
        width: 100%;
        top: 0;
        opacity: .5;
    }
    .part5 .content{
        flex-wrap: wrap;
    }
    .part5 .content img{
        width: 50%;
        display: block;
        margin: auto;
    }
    .part5 .content .right .item{
        padding: 20px 10px;
    }
    .part7 .content{
        align-items: flex-end;
    }
    .part7 .content .item{
        width: 85%;
        margin: 0;
        margin-bottom: 30px;
    }
    .part7 .content .item .info p{
        font-size: 12px;
    }
    .part7 .content .item::before{
        transform: translate(-135%,0);
        width: 40px;height: 40px;
        font-size: 16px;
    }
    .part7 .content .item .img{
        transform: scale(0.45) translateX(-70%);
    }
    .part7 .content .item .info{
        width: 80%;
        margin-left: 25%;
        text-align: left;
    }
    .part9 .content .item{
        width: calc(50% - 5px);
    }
    .video-cover img{
        width: 45px;
        height: 45px;
    }
    .part9 .file-tab{
        width: 95%;
    }
    .part2-1{
        background-size: cover;
    }
    .part2-1 .title,.part4 .title{
        margin-bottom: 10px;
    }
    .lang-container .switch{
        font-size: 14px;
    }
}


/*============= mobile large device ===============*/
@media (max-width:767px){
    body{
        font-size: 14px;
    }
    .content {
        width: 95%;
        margin: 0 auto;
    }
    h1{
    font-size: 26px;
    }

    h2 {
    font-size: 20px;
    }
    .title {
    width: calc(100% - 20px);
    padding: 20px 0 0 0;
    text-align: left;
    }
    .title h1{
        justify-content: left;
        margin-bottom: 15px;
    }
    .title p{
        opacity: .9;
        line-height: 24px;
    }
    .left {
    width: 100% !important;
    }

    .right {
    width: 100% !important;
    }
    .part1 .video-box{
        display: none;
    }
    .part1 .content .left{
        margin: 30px 0;
        text-align: center;
    }
    .part1 .content .left img{
        width: 80%;
    }
    .part1 .content .right img{
        width: 80%;
        margin: 30px 0;
    }
    .part1 .content .right p{
        width: 90%;
        margin: 15px auto;
    }
    .part1 .content{
        flex-direction: column;
    }
    .part1 .video-container {
        display: none;
    }
    .part2{
        background: 
        url(../images/back2.png) no-repeat,rgba(0, 0, 0, 0.7);
        background-size: 100% auto;
        background-blend-mode: overlay; 
    }
    .part2 .content{
        flex-wrap: wrap;
    }
    .part2 .content .item{
        padding: 15px 10px;
        width: 100%;
        margin: 5px 0;
    }
    .part3 .content{
        flex-wrap: wrap;
    }
    .part3 .content-footer{
        width: calc(95% - 10px);
    }
    .file-card.card-img>img{
        width: 100px;
        transform: scale(1,1);
        border-radius: 8px;
    }
    .part4 
    .video-container{
        width: 100%;
        top: 0;
        opacity: .5;
    }
    .part5 .content{
        flex-wrap: wrap;
    }
    .part5 .content img{
        width: 50%;
        display: block;
        margin: auto;
    }
    .part5 .content .right .item{
        padding: 20px 10px;
    }
    .part7 .content{
        align-items: flex-end;
    }
    .part7 .content .item{
        width: 85%;
        margin: 0;
        margin-bottom: 30px;
    }
    .part7 .content .item .info p{
        font-size: 12px;
    }
    .part7 .content .item::before{
        transform: translate(-135%,0);
        width: 40px;height: 40px;
        font-size: 16px;
    }
    .part7 .content .item .img{
        transform: scale(0.45) translateX(-70%);
    }
    .part7 .content .item .info{
        width: 80%;
        margin-left: 25%;
        text-align: left;
    }
    .part9 .content .item{
        width: calc(50% - 5px);
    }
    .video-cover img{
        width: 45px;
        height: 45px;
    }
    .part9 .file-tab{
        width: 95%;
    }
    .part9 .file-tab button{
        padding: 5px 15px;
        margin-right: 5px;
        font-size: 16px;
    }
    .part2-1{
        background-size: cover;
    }
    .part2-1 .title,.part4 .title{
        margin-bottom: 10px;
    }
    .lang-container .switch{
        font-size: 14px;
    }
    
    .part7 .content .item{
        height: auto;
        border-radius: 10px;
    }
}


/*============= mobile device ===============*/
@media (min-width:320px) and (max-width:480px){
    
}