.grid-container1 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 16px;
}

.grid-container1 img {
        max-width: 600px
  }



.grid-container2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.grid-container2 img {
        max-width: 400px
  }


.grid-container3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.grid-container3 img {
        max-width: 300px
  }

 div.ti {
    margin-bottom: 24px;
    border: solid 2px #f0f0f0;
}
 div.ti:hover {
        border-color: #999;
 }

 div.ti .layui-card-header {
        background-color: #fafafa;
        border-bottom: 0px;
    }
    div.ti .layui-card-header .typesname {
        font-size: 13px;
        color: #888
    }

    div.ti .layui-card-body {
        border-bottom: solid 1px #f5f5f5
    }

    div.ti .view_ques{
  cursor:pointer;
    }


    div.ti .layui-card-foot {
        padding: 10px 15px;
        line-height: 24px;
    }

    div.ti .opt {
        margin: 10px;
    }

    div.ti .opts1, div.ti .opts2, div.ti .opts4 {
        margin: 24px 10px;
    }
     

    div.ti .opts1 {
        display: flex;
        flex-direction: column
    }

    div.ti .opts2 .opt {
        display: inline-block;
        width: 40%;
    }

    div.ti .opts4 {
        display: flex;
        justify-content: space-between
    }



.grid-container3 div.ti .opts2 .opt, 
.grid-container3 div.ti .opts4 .opt {
    display: inline-block;
    width: 100%;
}








@media screen and (max-width: 800px) {
    div.ti .opts1, div.ti .opts2, div.ti .opts4 {
        display: flex;
        flex-direction: column
    }

        div.ti .opts2 .opt {
            display: inline-block;
            width: 100%;
        }

    img {
        max-width: 98%;
    }
}






  .answer {
    font-size: 12px;
    background-color: #f5f5f5;
    padding: 10px;
    margin: 10px;
    border-radius: 5px;
}

  .answer b {
        color: #1E9FFF;
  }


.ti_stat {
    display: inline-block;
    margin-bottom: 5px;
    width: 15px;
    height:15px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    border: 1px solid #e0e0e0;
    padding:  4px;
    font-size: 13px; 
    border-radius: 50%;
    background-color: #f9f9f9
}


div.ti .layui-card-header.ti_no,
.ti_no {
    background-color: #dd4b39;
    opacity:0.6;
}
div.ti .layui-card-header.ti_ok,
.ti_ok {
    background-color: #00a65a;
    opacity: 0.6;
}

div.ti .layui-card-header.ti_half,
.ti_half {
    background-color: #00c0ef;
    opacity: 0.6;
}

div.ti .layui-card-header.ti_no .typesname,
div.ti .layui-card-header.ti_ok .typesname,
div.ti .layui-card-header.ti_half .typesname {
    color: #ffffff !important;
     
}

.ti .layui-btn + .layui-btn,
.paper .layui-btn + .layui-btn,
.zjpaper .layui-btn + .layui-btn {
    margin-left: 0;
}