@charset "utf-8";
/* CSS Document */
* {
    transition-timing-function: ease-in-out;
    -moz-transition-timing-function: ease-in-out;
    -webkit-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    transition-duration: .2s;
    -moz-transition-duration: .2s;
    -webkit-transition-duration: .2s;
    -o-transition-duration: .2s;
}

body {
    background: url(../image/bg_version.jpg) #0f0b1a no-repeat center top;
    overflow-x: hidden;
}



#section1 {
    height: 900px;
    position: relative;
}


.jade, .trutien {
    width: 50%;
    height: 900px;
    float: left;
}

    .jade a {
        width: 687px;
        height: 274px;
        background: url(../image/logo_jade.png) no-repeat;
        display: block;
        position: relative;
        top: 293px;
        left: -156px;
        -webkit-animation: tada 1.5s linear infinite;
        animation: tada 1.5s linear infinite;
    }

    .trutien a {
        width: 508px;
        height: 282px;
        background: url(../image/logo_trutien.png) no-repeat;
        display: block;
        position: relative;
        top: 293px;
        left: 88px;
        -webkit-animation: tada 1.5s linear infinite;
        animation: tada 1.5s linear infinite;
    }


@keyframes tada {
    0% {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
    }

    10%,20% {
        -webkit-transform: scale3d(1,1,1) rotate3d(0,0,1,-3deg);
        transform: scale3d(1,1,1) rotate3d(0,0,1,-3deg)
    }

    30%,50%,70%,90% {
        -webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);
        transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)
    }

    40%,60%,80% {
        -webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);
        transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)
    }

    100% {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
    }
}








.footer {
    /* margin-top: 50px; */
    background: #151f2b;
    width: 100%;
    height: 150px;
    position: relative;
    z-index: 101;
}

.footer-w {
    width: 1000px;
    height: 150px;
    margin: 0 auto;
    padding: 10px 0px;
}

.logo-ft {
    width: 184px;
    height: 77px;
    background: url(../image/logo_ft.png) no-repeat;
    float: left;
    margin-right: 30px;
    margin-top: 20px;
    background-size: 100%;
}

.thongtin {
    float: left;
    margin-top: 15px;
}

    .thongtin p {
        color: #828282;
        margin: 0 0 5px;
        font-size: 15px;
    }





ul, li {
    list-style-type: none;
}


@media (max-width: 991px) {
    body {
        background: url("../image/bg_version_mobile.jpg") no-repeat center top;
    }

    .jade a {
        width: 100%;
        height: 150px;
        top: 320px;
        left: -70px;
        background-size: 100%;
    }

    .trutien a {
        width: 74%;
        height: 150px;
        top: 320px;
        left: 50px;
        background-size: 100%;
    }

    .footer-w {
        width: 100%;
    }
}


@media (max-width: 768px) {
    body {
        background-size: 768px;
    }

    #section1 {
        height: 750px;
    }

    .phienban {
        width: 70%;
    }

    .logo-ft {
        float: none;
        margin: 20px auto 0 auto;
    }

    .footer {
        height: 300px;
    }

    .footer-w {
        height: 300px;
    }

    .thongtin {
        float: left;
        left: 23%;
        position: relative;
    }

        .thongtin p {
            text-align: center;
        }

    .jade, .trutien {
        height: auto;
    }

        .trutien a, .jade a {
            top: 250px;
        }
}

@media (max-width: 600px) {
    body {
        background-size: 600px;
    }

    #section1 {
        height: 600px;
    }

    .logo-ft {
        float: none;
        margin: 20px auto 20px auto;
    }

    .footer {
        height: 250px;
    }

    .footer-w {
        height: 250px;
    }

    .thongtin {
        left: 15%;
        position: absolute;
    }

        .thongtin p {
            text-align: center;
        }
}

@media (max-width: 420px) {
    body {
        background-size: 560px;
    }

    #section1 {
        height: 500px;
    }

    .thongtin {
        left: 7%;
    }

    .trutien a, .jade a {
        top: 220px;
    }

    .jade a {
        left: -30px;
    }

    .thongtin p {
        font-size: 13px;
    }
}

@media (max-width: 375px) {

    .footer {
        height: 250px;
    }

    .thongtin p {
        font-size: 13px;
    }

    .thongtin {
        left: 5%;
    }
}