.state-indicator {
    position: absolute;
    top: -999em;
    left: -999em;

    z-index: 0;
}

.navbar.transparent.navbar-inverse {
    border-width: 0px;
    -webkit-box-shadow: 0px 0px;
    box-shadow: 0px 0px;
    background-color: rgba(0, 0, 0, 0.0);
    background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop(0%, rgba(0, 0, 0, 0.00)), color-stop(100%, rgba(0, 0, 0, 0.00)));
    background-image: -webkit-linear-gradient(270deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.00) 100%);
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.00) 100%);
}

.navbar.transparent.navbar-inverse.navbar-fixed-top {
    background-color: rgba(238, 238, 238, 0.2)
}

.topbanner {
    width: 100%;
    height: 220px;
    background-size: contain;
    position: relative;
}


input::-ms-input-placeholder {
    text-align: center;
}

input::-webkit-input-placeholder {
    text-align: center;
}


.item-more {
    margin-bottom: 5%;
    display: block;
    text-align: center;
}

button{
    outline:none;
}

#navbar ul li img {
    display: none;
    width: 0.8rem;
    position: absolute;
    top: 4.5rem;
}

.item-more {
    margin-bottom: 5%;
    display: block;
    text-align: center;
}

button{
    outline:none;
}

#navbar ul li img {
    display: none;
    width: 0.8rem;
    position: absolute;
    top: 4.5rem;
}



@media screen and (max-width: 321px) {

    body {
        font-size: 12px;
        color: white;
    }

    header form.navbar-form {
        display: none;
    }

    #query-select {
        margin-left: -28.5%;
    }

    a.navbar-brand img {
        width: 2.5rem;
        height: 2.5rem;
    }

    .navbar.transparent.navbar-inverse.navbar-fixed-top {
        background-image: url(/awards/img/head_foot_backgroud/head-backgroud.png);
        background-size: cover;
    }

    .topbanner {
        background: url(/awards/img/index-background-mobile.png) no-repeat scroll 0 0 / cover rgba(0, 0, 0, 0);padding-bottom: 178%;
        background-size: 100% 100%;
    }

    .topbanner .topbanner_1 {
        left: 2rem;
        position: absolute;
        font-size: 3rem;
        top: 10rem;
    }

    .topbanner .topbanner_2 {
        position: absolute;
        bottom: 6rem;
        left: 11rem;
        border-radius: 2rem;
        border: 0.1rem solid #FFFFFF;
        background: rgba(0, 0, 0, 0.2);
        height: 4rem;
        width: 15rem;
    }

    section {
        position: relative;
        background-color: #D5D5D5;
        padding-top: 2%;
    }

    section .container.marketing .row {
        margin-top: 18px;
    }

    section .container.marketing .row .col-md-6 {
        margin-bottom: 18px;
        text-align: center;
        margin-right: 15px;
        margin-left: 15px;
        min-height: 22rem;
        padding-right: 0px;
        padding-left: 0px;
        background-color: #ffffff;
    }

    section .container.marketing .row .col-md-6 .article {
        background-size: cover;
        height: 0;
        padding-bottom: 40%;
    }

    section .container.marketing .row .col-md-6 .article-desc {
        text-align: left;
        margin-top: 15%;
        position: relative;
        margin-left: 5%;
        font-family: HYQiHeiX1-75W;
        font-size: 12px;

    }

    section .doc {
        color: #000000;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    section .author {
        color: #9F9F9F;
    }

    .item-more button {
        color: #9F9F9F;
        background-color: white;
        border: 0;
    }

    .article .article-doc .doc {
        padding-top: 43%;
        float: left;
        top: 10%;
        padding-left: 5%;
        font-family: HYQiHeiX1-75W;
        font-size: 15px;
        text-align: left;
        width: 80%;
    }

    #navbar ul li img {
        display: none;
        width: 0.8rem;
        position: absolute;
        top: 1.8rem;
    }

    .state-indicator {
        z-index: 1;
    }

}

@media screen and (min-width: 321px) and (max-width: 400px) {
    body {
        font-size: 12px;
        color: white;
    }

    header form.navbar-form {
        display: none;
    }

    #query-select {
        margin-left: -28.5%;
    }

    a.navbar-brand img {
        width: 2.5rem;
        height: 2.5rem;
    }

    .navbar.transparent.navbar-inverse.navbar-fixed-top {
        background-image: url(/awards/img/head_foot_backgroud/head-backgroud.png);
        background-size: cover;
    }

    .topbanner {
        background: url(/awards/img/index-background-mobile.png) no-repeat scroll 0 0 / cover rgba(0, 0, 0, 0);padding-bottom: 178%;
        background-size: 100% 100%;
    }

    .topbanner .topbanner_1 {
        left: 2rem;
        position: absolute;
        font-size: 3rem;
        top: 10rem;
    }

    .topbanner .topbanner_2 {
        position: absolute;
        bottom: 6rem;
        left: 11rem;
        border-radius: 2rem;
        border: 0.1rem solid #FFFFFF;
        background: rgba(0, 0, 0, 0.2);
        height: 4rem;
        width: 15rem;
    }

    /*#navbar {
        float: right;background-color: black;width: 75%;
    }*/
    section {
        position: relative;
        background-color: #D5D5D5;
        padding-top: 2%;
    }

    section .container.marketing .row {
        margin-top: 18px;
    }

    section .container.marketing .row .col-md-6 {
        margin-bottom: 18px;
        text-align: center;
        margin-right: 15px;
        margin-left: 15px;
        min-height: 22rem;
        padding-right: 0px;
        padding-left: 0px;
        background-color: #ffffff;
    }

    section .container.marketing .row .col-md-6 .article {
        background-size: cover;
        height: 0;
        padding-bottom: 40%;
    }

    section .container.marketing .row .col-md-6 .article-desc {
        text-align: left;
        margin-top: 15%;
        position: relative;
        margin-left: 5%;
        font-family: HYQiHeiX1-75W;
        font-size: 12px;

    }

    section .doc {
        color: #000000;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    section .author {
        color: #9F9F9F;
    }

    .item-more button {
        color: #9F9F9F;
        background-color: white;
        border: 0;
    }

    .article .article-doc .doc {
        padding-top: 43%;
        float: left;
        top: 10%;
        padding-left: 5%;
        font-family: HYQiHeiX1-75W;
        font-size: 15px;
        text-align: left;
        width: 80%;
    }

    #navbar ul li img {
        display: none;
        width: 0.8rem;
        position: absolute;
        top: 1.8rem;
    }


    .state-indicator {
        z-index: 2;
    }

}


@media screen and (min-width: 400px) and (max-width: 768px) {

    body {
        font-size: 12px;
        color: white;
    }

    header form.navbar-form {
        display: none;
    }

    #query-select {
        margin-left: -28.5%;
    }

    a.navbar-brand img {
        width: 2.5rem;
        height: 2.5rem;
    }

    /*#navbar {
        float: right;background-color: black;width: 75%;
    }*/
    section {
        position: relative;
        background-color: #D5D5D5;
        padding-top: 2%;
    }

    section .container.marketing .row {
        margin-top: 18px;
    }

    section .container.marketing .row .col-md-6 {
        margin-bottom: 18px;
        text-align: center;
        margin-right: 15px;
        margin-left: 15px;
        min-height: 22rem;
        padding-right: 0px;
        padding-left: 0px;
        background-color: #ffffff;
    }

    section .container.marketing .row .col-md-6 .article {
        background-size: cover;
        height: 0;
        padding-bottom: 40%;
    }

    section .container.marketing .row .col-md-6 .article-desc {
        text-align: left;
        margin-top: 15%;
        position: relative;
        margin-left: 5%;
        font-family: HYQiHeiX1-75W;
        font-size: 12px;

    }

    section .doc {
        color: #000000;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    section .author {
        color: #9F9F9F;
    }

    .item-more button {
        color: #9F9F9F;
        background-color: white;
        border: 0;
    }

    .article .article-doc .doc {
        padding-top: 43%;
        float: left;
        top: 10%;
        padding-left: 5%;
        font-family: HYQiHeiX1-75W;
        font-size: 15px;
        text-align: left;
        width: 80%;
    }

    #navbar ul li img {
        display: none;
        width: 0.8rem;
        position: absolute;
        top: 1.8rem;
    }

    .state-indicator {
        z-index: 3;
    }

}

@media (min-width: 768px) {
    body {
        font-size: 14px;
    }

    .topbanner {
        background: url(/awards/img/index-background-web.png) no-repeat scroll 0 0 / cover rgba(0, 0, 0, 0);padding-bottom: 47%;
    }

    .topbanner .topbanner_1 {
        line-height: 6rem;
        position: absolute;
        margin: 28rem 0 0 5rem;
        color: #FFFFFF;
        font-size: 6rem;
        width: 56%;
    }

    .topbanner .topbanner_2 {
        border: 0.1rem solid;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 1.5rem;
        position: absolute;
        margin: 49rem 0 0 5rem;
        color: #FFFFFF;
        font-size: 2rem;
        width: 15%;
    }

    .navbar-inverse .navbar-nav > li > a {
        color: #FFFFFF;
    }

    .navbar.transparent.navbar-inverse.navbar-fixed-top {
        padding-top: 1%;
    }

    #query-select {
        margin-left: -28.5%;
    }


    header form h4 {
        margin-top: 5px;
    }

    a.navbar-brand img {
        width: 3.415rem;
        height: 3.415rem;
    }

    a#showQueryDiv {
        line-height: 25px;
        font-size: 17px;
        padding-top: 0px;
        display: block;
        color: white;
        text-align: center;
        text-decoration: none;
    }

    a#hideQueryDiv {
        line-height: 25px;
        font-size: 17px;
        padding-top: 0px;
        display: block;
        color: white;
        text-align: center;
        text-decoration: none;
    }

    header form.navbar-form .container {
        position: absolute;
    }

    header form .container .query-drop-down {
        width: 60%;
        margin-left: -233px;
    }

    header form .container .query-drop-down form .country {
        display: inline;
        background-color: white;
        border-radius: 10px;
        margin: 10px 0px 10px 0px;
    }

    header form .container .query-drop-down form .country input {
        width: 40%;
        background-color: transparent;
        border: 0;
    }

    header form .container .query-drop-down form .area {
        display: inline;
        background-color: white;
        border-radius: 10px;
        margin: 10px 0px 10px 124px;
    }

    header form .container .query-drop-down form .area .input {
        width: 40%;
        background-color: transparent;
        border: 0;
    }

    header form .container .query-drop-down form .keyword {
        background-color: white;
        border-radius: 10px;
        margin: 10px 0px 10px 0px;
    }

    header form .container .query-drop-down form .keyword .input {
        vertical-align: middle;
        width: 95%;
        background-color: transparent;
        border: 0;
    }

    header form .container .query-drop-down form .search {
        margin: 10px 0px 10px 0px;
    }

    header form .container .query-drop-down form .search button {
        width: 100%;
        border-radius: 10px;
        background-color: #FF9900;
        color: white;
    }


    section {
        position: relative;
        margin: 2% 0;
    }


    section .container.marketing .col-md-6 {
        margin-bottom: 1.28rem;
        text-align: center;
        padding-left: 3%;
        padding-right: 3%;
    }

    section .container.marketing .col-md-6 .article {
        background-size: cover;
        height: 0;
        padding-bottom: 40%;
    }

    section .container.marketing .col-md-6 .article-desc {
        text-align: left;
        margin-top: 3%;
        color: #9F9F9F;
    }

    section .container.marketing .col-md-6 .article label {
        position: relative;
        left: 3%;
        bottom: 10%;
        color: white;
    }

    .item-more {
        display: none;
    }


    #query-select .country {
        width: 48%;
        height: 30px;
        border-radius: 20px;
        position: relative;
        display: inline-block;
    }

    #query-select .country .country-i {
        width: 100%;
        height: 100%;
        border-radius: 20px;
        position: relative;
        text-align: left;
    }


    #query-select .area {
        width: 48%;
        height: 30px;
        border-radius: 20px;
        position: relative;
        display: inline-block;
        margin-left: 3%;
    }

    #query-select .area .area-i {
        width: 100%;
        height: 100%;
        border-radius: 20px;
        position: relative;
        text-align: left;
    }


    #query-select .keyword {
        width: 100%;
        height: 55px;
        text-align: center;
        border-radius: 20px;
        padding-top: 1rem;
    }

    #query-select .keyword .keyword_i {
        width: 100%;
        height: 30px;
        border-radius: 20px;
        position: relative;
        text-align: left;
    }

    #query-select .searchBtn {
        border-radius: 25px;
        border: 1px solid #fbbc05;
        width: 100%;
        height: 30px;
        outline: none;
        background-color: #fbbc05;
    }

    #query-select .searchBtn input {
        width: 100%;
        background-color: transparent;
        outline: none;
        border: 0;
        border-radius: 0;
        box-shadow: 0px 0px 0px 0px;
        padding-top: 0.4rem;
    }

    .select-select {
        width: 100%;
        height: 100%;
        border-radius: 20px;
        text-align-last: center;
        border: none;
        position: absolute;
    }

    img.query-icon {
        width: 25px;
        height: 25px;
        position: absolute;
        margin-top: 3px;
        margin-left: 5px;
    }

    .search_ip {
        width: 100%;
        height: 100%;
        border-radius: 20px;
        border: none;
        position: absolute;
        padding-left: 5%;
    }

    img.search_img {
        width: 25px;
        height: 25px;
        position: absolute;
        margin-top: 4px;
        margin-left: 6px;
    }

    .article .article-doc {
        text-align: left;
        padding-top: 33%;
        font-size: 22px;
    }

    .article .article-doc .doc {
        position: relative;
        left: 3%;
        max-width: 80%;
    }

    #navbar ul li img {
        width: 0.8rem;
        position: absolute;
        top: 4.5rem;
    }

    #navbar ul li {
        text-align: center;
    }


    .state-indicator {
        z-index: 4;
    }

}

@media (min-width: 1920px) {
    .container {
        width: 89%;
    }

    #query-select {
        margin-left: -28.5%;
    }


    header form .container .query-drop-down {
        width: 60%;
        margin-left: -44.5rem;
    }

    .topbanner {
        background: url(/awards/img/index-background-web.png) no-repeat scroll 0 0 / cover rgba(0, 0, 0, 0);padding-bottom: 52%;
    }

    .topbanner .topbanner_1 {
        line-height: 9rem;
        position: absolute;
        margin: 30rem 0 0 10rem;
        color: #FFFFFF;
        font-size: 8rem;
        width: 56%;
    }


    .topbanner .topbanner_2 {
        border: 0.1rem solid;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 2rem;
        position: absolute;
        margin: 60rem 0 0 10rem;
        color: #FFFFFF;
        font-size: 2rem;
        width: 10%;
    }


    .state-indicator {
        z-index: 5;
    }

    .article .article-doc {
        text-align: left;
        padding-top: 30%;
        font-size: 22px;
    }

}

input::-webkit-input-placeholder {
    font-size: 1.8rem;
    text-align: left;
}