@media (max-width: 1700px) {
    .img-sysname{
        margin-top: 17em; /*380px;*/
    }

}

@media (max-width: 1200px) {
    .img-sysname img {
        width: 60%;
    }

    .img-sysname{
        margin-top: 21em; 
    }

    .img-top {
        margin-top: -550px;
    }
    #text-desc-partc-search{
        font-size: 18px;
    }

    /* Footer -----  */
    .main-footer {
        padding: 2.2em 0 0 0;
    }

}

/* @media (max-width: 1200px) {
    .img-sysname img {
        width: 60%;
    }

    .img-sysname{
        margin-top: 380px;
    }

    .img-top {
        margin-top: -550px;
    }
    #text-desc-partc-search{
        font-size: 18px;
    }

  

} */


@media (max-width: 992px) {
    .img-sysname img {
        width: 80%;
    }

    .img-sysname{
        margin-top: 24em; 
    }


    /* Footer -----  */
    .main-footer {
        padding: 4.5em 0 0 0;
    }

    
}


@media (max-width: 768px) {

    .img-sysname img {
        width: 100%;
    }

     .img-sysname{
        margin-top: 24.5em; 
    }

     .img-top {
        margin-top: -520px;
    }


}


/* mobile */
@media (max-width: 576px){

    .mobile-display{
        display: inline-block;
    }
    #sysname_desktop img{
        display: none;
    }

    body#cover{
        background: url(../img/main/banner/mobile_banner.png) no-repeat center center;    
        background-size: cover;
        position: relative;
        height: 52vh;
        width: 100%;
    }

    .block-start{
        margin: -333px 0px 0px 0px;   
    }

    .block-start-c6{
        margin: -333px 0px 0px 0px;   
    }

    .block-second-partc6{
        margin-top: -62px;
    }

    .block-btn{
        margin-top: 2.5em ;
        margin-bottom: 4.7em;
    }

    h3.text-topic{
        font-size: 1.5em;
        text-align: center;
    }
    p.text-topic{
        font-size: 1.15em;
    }
    p.text-second-topic>span{
        font-size: 22px;
    }

    p.about_us>a{
        font-size: 18px;
    }


    .text-second-topic{
        font-size: 26px;
    }
    .card-text{
        font-size: 1.05em !important;
    }
    .img-sysname img {
        width: 100%;
    }
    .img-sum img{
        width: 25%;
    }

    #displayImageC img {
        width: 80%;
    }

    .nav-mobile{
        display: inline-block !important;
    }

    .display-fix>img{
        display: inline-block;
    }

    #displayImage img{
        width: 90%;
    }

    .advice-image img{
        width: 100%;
    }
    .card-advice{
        padding: 0.5em;
    }
    .text-advice-topic{
        font-size: 18px;
        
    }

    .dispaly-on-screen{
        display: block !important;
    }

    #c6-block-score{
        margin-top: 3em !important;
    }

 
    .font-p{
        line-height: 1.2em;
    }

    #block-btn-search{
        margin-top: 1em;
    }

    #image-partc-search img{
        width: 30%;
    }

    #text-desc-partc-search{
        font-size: 18px;
    }

    #nav-desktop{
        display: none;
    }


    .importantRule{
        display: none !important;
    }

    .img-sysname {
        margin-top: 19.95em;
        margin-bottom: 2em;
    }

    #btn-view-sum{
        font-size: 1.14em;
    }



    /* Footer -----------------------------------*/
    .footer-copyright>span.mobile-copyright::after{
        content: '2024 TOSH';
        font-size: 14px;
        color: #000;
    }
    .footer-copyright>strong{
        display: none;
    }

    .mobile-copyright{
        display: inline;
    }
    .main-footer{
        padding: 4.5em 0 0 0;
    }
}


@media (max-width: 414px) {

    h3 {
        font-size: 1.5em;
    }

    .block-start,.block-start-c6{
        margin: -320px 0px 0px 0px;
    }

    .main-footer {
        padding: 2.2em 0 0 0;
    }

    .text-second-topic {
        /* font-size: 24px; */
        font-size: 1.4em;
        line-height: 24px;
    }

    p.text-second-topic>span {
        font-size: 20px;
    }

    .img-sysname {
        margin-top: 18em;
    }

    .block-btn {
        margin-bottom: 9.7em;
    }

}


@media (max-width: 374px) {
    h3 {
        font-size: 1.2em;
    }

    .block-start,.block-start-c6 {
        margin: -240px 0px 0px 0px;  /* ห้ามแก้*/
    }

    .text-second-topic {
        font-size: 1.3em;
    }
    p.text-second-topic>span {
        font-size: 18px;
    }

    #btn_submit_search, #btn_clear_search{
        margin: .2em 0;
    }

    .btn-tosh-primary,.btn-tosh-secondary{
        font-size: 1.2em;
    }

    .img-sysname {
        margin-top: 15.6em;
    }

    .block-btn {
        margin-top: 1.5em;
    }
   

}

@media (max-width: 320px) {

    .img-sysname {
        margin-top: 12em;
    }

    .block-btn {
        margin-top: 1em;
        margin-bottom: 4.5em;
    }

    .btn-tosh-primary, .btn-tosh-secondary {
        font-size: 1em;
    }
  
}