@media (min-width: 980px) {
    .box {
        position: relative;
        width: 62.5%;
        margin:-6% auto 0 auto;
        z-index: 9999;
    }
    .box .box1 {
        /*height: 742px;*/
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding-top: 15px;
        background: #F7F7F7;
    }
    .flexzidingyi img{
        width: 100%;
    }
    .tese1{
        position: absolute;
        top: 25%;
        left: 35%;
        color: #fff;
        font-size: 32px;
        width: 348px;
        height: 200px;
    }
    .tese1 .nie1 {
        margin-top: 19px;
        margin-left: 40%;
        width: 66px;
        height: 2px;
        background: #fff;
        text-align: center;
    }
    .tese1 .tre {
        width: 100%;
    }
    .tese1 .tre p {
        text-align: center;
    }
    .tese1 .nie2 {
        margin-top: 12px;
        width: 100%;
        height: 31px;
    }
    .tese1 .nie2 p {
        text-align: center;
        font-size: 32px;
        line-height: 31px;
    }
    .trs{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: black;
        opacity: 0.5;
    }
    .trademark-details-title {
        text-align: center;
        padding: 10px 0;
        width: 100%;
    }
    .trademark-details-title h3 {
        font-size: 24px;
        font-weight: normal;
        height: 32px;
        margin-bottom: 5px;
        color: #333333;
    }
    .trademark-explain-main {
        padding: 0 25px 25px;
    }
    .trademark-explain-main .explain-title {
        display: flex;
        margin-bottom: 5px;
    }
    .wordwrap{
        color: #0042E8 !important;
    }
    .detail-img{
        height: 35px;
        width: 35px;
        line-height: 55px;
        margin-right: 20px;
    }
    .detail-img img{
        width: 100%;
    }
    .trademark-details-notes {
        padding-left:25px;
        padding-right:25px;

    }
    .notes-title{
        font-weight: bold;
        color: #0042E8;
        padding-bottom: 20px;
    }
    .wordwrap-con{
        padding-bottom: 20px;
    }
    .trademark-query-main.details-content {
        background: #F7F7F7;
        padding: 10px;
        width: 100%;
        margin: 20px auto 0;
        min-height: 500px;
    }
    .trademark-sub-category-left {
        float: left;
        width: 35%;
        /*height: 650px;*/
        background-color: #F9F9F9;
    }
    .trademark-sub-category-left .sub-category-menu li {
        padding: 15px 10px;
        font-size: 13px;
        cursor: pointer;
    }
    .trademark-sub-category-left .sub-category-menu li.on {
        background-color: #0042E8;
        color: #fff;
    }
    .trademark-sub-category-right {
        float: left;
        width: 65%;
        height: 650px;
        padding: 15px;
    }
    .trademark-sub-category-right .sub-category-list li {
        font-size: 13px;
        height: 24px;
        line-height: 24px;
        padding: 0 8px;
        margin: 15px 8px 0;
        min-width: 60px;
        float: left;
        border: 1px solid #E5E5E5;
    }
    .xiangq{
        display: none;
    }

}

@media (max-width: 480px) {
    .drawer-nav-title {
        line-height: 20px !important;
    }
    .drawer-nav{
        overflow-y: auto;
        height: 100% !important;
    }
    .flexzidingyi{
        height: 150px !important;
    }
    .flexzidingyi img{
        height:100%;width: 100%;
        object-fit:cover;
    }
    .trs{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 150px;
        background: black;
        opacity: 0.5;
    }
    .tese1{
        position: absolute;
        top: 25%;
        left: 28%;
        color: #fff;
        font-size: 16px;
        /*width: 348px;*/
        /*height: 200px;*/
    }
    .tese1 .nie1 {
        margin-top: 8px;
        margin-left: 30%;
        width: 66px;
        height: 2px;
        background: #fff;
        text-align: center;
    }
    .tese1 .tre {
        width: 100%;
    }
    .tese1 .tre p {
        text-align: center;
    }
    .tese1 .nie2 {
        margin-top: 5px;
        width: 100%;
        height: 31px;
    }
    .tese1 .nie2 p {
        text-align: center;
        font-size: 16px;
        line-height: 31px;
    }
    .box {
        position: relative;
        width: 100%;
        margin: 0 auto 0 auto;
        padding: 0 15px;
    }
    .trademark-details-title {
        text-align: center;
        padding: 10px 0;
        width: 100%;
    }

    .trademark-explain-main .explain-title {
        display: flex;
        margin-bottom: 5px;
    }
    .detail-img {
        height: 35px;
        width: 35px;
        line-height: 55px;
        margin-right: 20px;
    }
    .detail-img img {
        width: 100%;
    }
    .wordwrap {
        color: #0042E8 !important;
    }
    .trademark-sub-category-left {
        width: 100%;
        background-color: #fff;
    }
    .trademark-sub-category-right{
        display: none;
    }
    .trademark-sub-category-left .sub-category-menu li {
        padding:10px 15% 10px 0 ;
        font-size: 13px;
        cursor: pointer;
        background: #f5f8fe;
        margin-bottom: 5px;
    }
    .xiangq{
        display: block;
        float: right;
        margin-right: -36px;
        color: #0042E8;
    }
}