@media screen and (max-width:768px) {
    .article-container1 {
        padding: 15px 15px;
    }

    .search-container {
        padding: 10px 0;
    }

    .need-help input[type="text"] {
        height: 46px;
        width: calc(100% - 80px);
        background-position: 15px;
        text-indent: 38px;
        background-size: 20px;
    }

    .need-help button {
        height: 46px;
        max-width: 80px;
        font-size: 18px;
    }

    main h1 {
        padding-top: 25px;
        font-size: 23px;
        display: none;
    }

    .need-help p a {
        font-size: 15px;
    }

    .need-help p {
        line-height: 28px;
    }

    .article-container2 {
        padding: 30px 15px;
        margin-bottom: 0;
    }


    h3 {
        font-size: 18px;
        padding: 8px 0;
    }

    .\36 -btns ul li a {
        height: 124px;
        transform: scale(1);
    }

    .\36 -btns ul li a img {
        margin-top: 15px;
        width: 70px !important;
        height: 63px !important;
    }

    .article-container3 h2 {
        font-size: 20px;
    }

    .fix_bar.floating-btns {
        display: none;
    }

    /* mobile_nav */
    nav.mobile_nav {
        display: block;
        background-color: white;
        display: inline-block;
        position: fixed;
        height: 100%;
        width: 80vw;
        left: -80vw;
        transition: transform 0.3s;
        z-index: 1;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    .hamburger {
        display: block;
        position: fixed;
        z-index: 9999;
        /* padding: 35px; */
        width: 30px;
        top: 28px;
        height: 3.5rem;
        text-align: center;
        transition: transform 0.3s;
        cursor: pointer;
        background: #1cafc6;
        border-radius: 0 10px 10px 0;
        box-shadow: 0px 0px 6px 3px rgba(158, 158, 158, 0.1);
        -webkit-box-shadow: 0px 0px 6px 3px rgba(158, 158, 158, 0.1);
        -moz-box-shadow: 0px 0px 6px 3px rgba(158, 158, 158, 0.1);
    }

    .sidenav-active .cover {
        background-color: rgba(0, 0, 0, 0.3);
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100vh;
        z-index: 5000;
        transition: background-color 0.3s, transform 0.3s;
    }

    .noscroll {
        position: relative;
        overflow: hidden;
    }

    .sidenav-active nav,
    .sidenav-active .hamburger,
    .sidenav-active .cover {
        transform: translateX(80vw);
    }

    nav.mobile_nav ul {
        margin: 0;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        padding-inline-start: 0;
    }

    main h5 {
        font-size: 16px;
        font-weight: 600;
    }

    nav.mobile_nav>ul>li:nth-of-type(1) {
        padding: 18px 10px;
        border-bottom: 1px solid #b6e3e9;
        background: #f8fcfc;
        text-align: center;
    }

    nav.mobile_nav>ul>li:nth-of-type(2) ul li {
        line-height: 59px;
        display: block;
    }

    nav.mobile_nav>ul>li:nth-of-type(2) ul {
        padding: 8px 15px;
        border-bottom: 1px solid #b6e3e9;
    }

    nav.mobile_nav>ul>li:nth-of-type(2) ul li a {
        display: inline-block;
        width: 100%;
        padding-left: 15px;
        transition: none;
    }

    nav.mobile_nav>ul>li:nth-of-type(2) ul li:active a,
    nav.mobile_nav>ul>li:nth-of-type(2) ul li:target a,
    nav.mobile_nav>ul>li:nth-of-type(2) ul li:focus a {
        background: #1cafc6;
        border-radius: 3px;
    }

    nav.mobile_nav>ul>li:nth-of-type(2) ul li:active a h4,
    nav.mobile_nav>ul>li:nth-of-type(2) ul li:target a h4,
    nav.mobile_nav>ul>li:nth-of-type(2) ul li:focus a h4 {
        color: #fff;
        transition: none;
    }

    .hamburger img {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .hamburger.active img {
        transform: rotate(180deg);
        -webkit-transition: All .25s ease;
        -o-transition: All .25s ease;
        transition: All .25s ease;
    }

    /*.noscroll .hamburger {
        display: none;
    }*/

    nav.mobile_nav>ul>li:nth-of-type(3),
    nav.mobile_nav>ul>li:nth-of-type(3) div a,
    nav.mobile_nav>ul>li:nth-of-type(3) div a .image,
    .mobile-floating-btns {
        display: inline-block;
        font-size: 14px;
    }

    nav.mobile_nav>ul>li:nth-of-type(3) {
        width: 100%;
    }

    nav.mobile_nav>ul>li:nth-of-type(3) div .service .image {
        background-image: url(/Content/img/QA/mobile_online-service.png);
        background-repeat: no-repeat;
        background-position: left;
        width: 100%;
        height: 100%;
        background-size: 18px;
    }

    nav.mobile_nav>ul>li:nth-of-type(3) div .cooperation .image {
        background-image: url(/Content/img/QA/mobile_cooperation.png);
        background-repeat: no-repeat;
        background-position: left;
        width: 100%;
        height: 100%;
        background-size: 18px;
    }

    nav.mobile_nav>ul>li:nth-of-type(3) div .opinion .image {
        background-image: url(/Content/img/QA/mobile_opinion.png);
        background-repeat: no-repeat;
        background-position: left;
        width: 100%;
        height: 100%;
        background-size: 18px;
    }


    nav.mobile_nav>ul>li:nth-of-type(3) div a {
        width: 120px;
        height: 30px;
        display: block;
        position: relative;
        margin: 5px 10px;
        background: #fbfbfb;
        border: 1px solid #b6e3e9;
        padding-left: 18px;
        border-radius: 25px;
        text-align: center;
    }

    nav.mobile_nav>ul>li:nth-of-type(3) div a p {
        position: absolute;
        top: 4px;
        margin-left: 24px;
        font-size: 15px;
        color: #757575;
    }

    .mobile-floating-btns {
        margin-top: 4px;
    }

    /*   mobile_nav end   */

    article.article-container3 section ul li {
        margin-bottom: 0.5rem;
    }

    article.article-container3 section ul li a {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        width: 100%;
        display: block;
    }

    article.article-container3 section ul {
        width: 100%;
        display: inline-block;
    }

    article.breadcrumbs-article {
        display: block;
        padding: 0 15px;
    }

    article.article-container2 section nav {
        display: none;
    }

    .question-container,
    .answer-container {
        width: 100%;
    }

    .qestions,
    .answer {
        padding: 1.5rem 0 1.5rem 1.75rem;
        min-height: auto;
    }

    .qestions {
        border-radius: 6px;
    }

    /*li.btn a {
        font-size: 15px;
        padding: 5px 11px;
    }*/

    .result .container article p {
        height: 70px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 3;
        width: 100%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }

    article.container article {
        width: 100%;
        display: grid;
    }

    main .container {
        padding-bottom: 15px;
        width: 100%;
    }

    main .answer .container {
        display:block;
    }

    main .answer {
        border: none;
        padding: 0;
        box-shadow: none;
    }

    main .answer h2 {
        font-size: 22px;
        margin-left: 0.5rem;
        padding-bottom: 0;
        padding-top: 0px;
    }

    main .answer h2:before {
        height: 22px;
    }

    a.back {
        margin-bottom: 0.5rem
    }

    .goPageBox {
        margin-left: 0;
        margin-top: 4px;
    }

    .form-group input.input--xs {
        margin-left: 4px;
    }


    .DataPager {
        text-align: center;
    }

    .qestions ul,
    .answer ul {
        padding: 0;
    }

    .qestions ul li a {
        font-size: 18px;
    }

    .answer .container ul:nth-of-type(2)>li:nth-of-type(2)>div>ul>li:nth-of-type(1) {
        display: block;
        margin-right: 0;
    }

    .answer>.container>ul:nth-of-type(3) li a {
        /*font-size: 15px;*/
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        width: 100%;
        display: inline-block;
        line-height: 20px;
    }
    .answer>.container>ul.related li:not(:first-child) {
        margin-bottom: 0.5rem
    }

    main h2 {
        font-size: 20px;
        padding: 0 0 .25rem;
        margin-bottom: 0;
        border: none;
    }

    .result h2 span {
        font-size: 20px;
    }

    .need-help {
        max-width: 600px;
    }
}

@media screen and (max-width:497px) {
    .answer .container ul:nth-of-type(2)>li:nth-of-type(2)>div>ul>li:not(:first-child) {
        display: inline-block;
        width: 47%;
        margin: 0 0.25rem;
    }
    .answer .container ul:nth-of-type(2)>li:nth-of-type(2)>div>ul>li:not(:first-child) a {
        min-width: auto;
        width: 100%;
        padding: 0.5rem 0;
    }
}