@media only screen and (min-width : 550px) {

    /*************        eng Hour       *****************/
    /*************  *******************  *****************/
    .title {
        width: 96%;
        padding-left: 0px;
        padding-right: 0px;
    }
    .panel-1 {
        padding-bottom: 50px;
        display: inline-block;
    }

    .panel-1 .top{
        background-image: url("../../../../pic/head/hour.png");
        height: 190px;
    }


    .panel-1 .bottom{

    }
    .panel-1 .bottom .view_all{
        width: 24.2%;

        margin-left: 70%;
        font-size: 1.25em;
    }

    /********************************************/

    /*************  eng for Occupations  *****************/
    /*************  *******************  *****************/

    .panel-2 {
        padding-bottom: 50px;
    }
    .panel-2 .top{
        background-image: url("../../../../pic/head/occupation.png");
        height: 220px;
    }


    .panel-2 .bottom{

    }
    .panel-2 .bottom .view_all{
        width: 24.2%;

        margin-left: 73%;
        font-size: 1.4em;
    }


    /*************     Daily life eng    *****************/
    /*************  ******** CAT ********  *****************/

    .panel-3 {
        padding-bottom: 50px;
    }
    .panel-3 .top{
        background-image: url("../../../../pic/head/daily.png");
        height: 190px;
    }


    .panel-3 .bottom{

    }
    .panel-3 .bottom .view_all{
        width: 24.2%;


        margin-left: 70%;
        font-size: 1.4em;
    }


    /*************     Daily life eng    *****************/
    /*************  ***** Happy *****  *****************/
    .block-1 .desc .head{
        color: #ffffff;
    }
    .block-1 .desc .text {
        color: #ffffff;
    }
    .block-2 .desc .head{
        color: #ffffff;
    }
    .block-2 .desc .text {
        color: #ffffff;
    }



    .middle-7{
        padding-left: 2%;
        padding-right: 2%;
    }
    .middle-7 .block-1 {
        width: 46%;
        display: inline-block;
        float: left;
        margin-bottom: 0;
        margin-left: 0;
        padding-left: 1%;

    }
    .middle-7 .block-1 .duration{
        font-size: 1.4em;
        width: 10%;
        margin-left: 34.2%;
    }
    .middle-7 .block-1 .desc{
        height: 145px;
    }

    .middle-7 .block-2 {
        margin-left: 1%;
        margin-right: 0;
        width: 25%;
        display: inline-block;
        margin-bottom: 1%;

    }
    .middle-7 .block-2 .duration{
        font-size: 1.4em;
        width: 10%;
        margin-left: 14%;
    }
    .middle-7 .block-2 img{
        width: 100%;
        image-rendering: auto;
        display: block;
    }
    .middle-7 .block-2 .desc {
        height: 62px;
        background-color: #4d4d4d;
        display: block;
        float: none;
        width: auto;
    }





    .middle-7 .block-2:nth-child(5){
        display: none;
    }
    .middle-7 .block-2:nth-child(6){
        display: none;
    }



    /***************************************************/




    .middle-4{
        padding-left: 2%;
        padding-right: 2%;

    }
    .middle-4 .block-1 {
        width: 48.2%;
        display: inline-block;
        float: none;
        margin-bottom: 8px;

        padding-left: 1%;
    }
    .middle-4 .block-1 .duration{
        font-size: 1.4em;
        width: 10%;
        margin-left: 36.2%;
    }
    .middle-4 .block-1:nth-child(2) .duration{
        font-size: 1.4em;
        width: 10%;
        margin-left: 36.3%;
    }
    .middle-4 .block-1 .desc{
        height: 65px;
    }

    .middle-4 .block-1:nth-child(2){
        margin-left: 0;
        margin-right: 0;
        float: none;
        width: 48.2%;
        display: inline-block;
        margin-bottom: 8px;
    }
    .middle-4 .block-1:nth-child(2) img{
        width: 100%;
        display: block;
        float: none;

    }
    .middle-4 .block-1:nth-child(2) .desc{
        margin-top: 0px;
        height: 65px;
        display: block;
        float: none;
        width: auto;
        background-color: #4d4d4d;
    }



    .middle-4 .block-2 {
        margin-left: 0;
        margin-right: 0;
        padding-left: 1%;
        float: none;
        width: 48.2%;
        display: inline-block;
        margin-bottom: 1%;
    }
    .middle-4 .block-2 .duration{
        font-size: 1.4em;
        width: 10%;
        margin-left: 36.3%;
    }
    .middle-4 .block-2 img{
        width: 100%;
        display: block;
        float: none;
    }
    .middle-4 .block-2 .desc {
        margin-top: 0px;
        height: 65px;
        display: block;
        float: none;
        width: auto;
        background-color: #4d4d4d;
    }
    .middle-4 .block-2:nth-child(2){
        float: none;
    }

    /*
    .middle-4 .block-2 {
        margin-left: 0;
        margin-right: 0;
        padding-left: 1%;
        float: left;
        width: 48.3%;
        display: inline-block;
        margin-bottom: 1%;
    }

    .middle-4 .block-2 .desc {
        height: 55px;

    }
    /*


    .middle-4{
        padding-left: 2%;
        padding-right: 2%;

    }
    .middle-4 .block-1 {
        width: 37%;
        display: inline-block;
        float: left;
        margin-bottom: 0;
        padding-left: 1%;
    }
    .middle-4 .block-1 .desc{
        height: 165px;
    }

    .middle-4 .block-2 {
        margin-left: 0;
        margin-right: 0;
        padding-left: 1%;
        float: left;
        width: 23%;
        display: inline-block;
        margin-bottom: 1%;
    }

    .middle-4 .block-2 .desc {
        height: 55px;
    }

    /**************************************************/
    }
    .title .head{
        font-size: 2em;
        line-height: 40px;
    }
    .title .text {
        font-size: 1.5em;

    }
.middle-7 .block-1 .desc .head{
        font-size: 2em;
        line-height: 40px;
    }
.middle-7 .block-1 .desc .text{
    margin-top: 5px;
        line-height: 30px;
    }
.middle-7 .block-2 .desc .head{
        margin-top: 15px;
    }
.middle-7 .block-2 .desc .text{
    margin-top: 55px;
        line-height: 50px;

    }

.middle-4 .block-1 .desc .head{
        font-size: 1.5em;
        line-height: 30px;
    }
.middle-4 .block-1 .desc .text{
        line-height: 28px;
    }
.middle-4 .block-2 .desc .head{
        margin-top: 10px;
        line-height: 30px;
    }
.middle-4 .block-2 .desc .text{
        margin-top: 55px;
        line-height: 30px;

    }
/*////////////////  กล่องข้อความ  //////////////////*/

@media only screen and (min-width : 720px) {


    .panel-1 .bottom .view_all{
        width: 19%;
        margin-left: 79%;
        font-size: 15.5pt;
    }


    /********************** panel-2 **********************/



    .panel-2 .bottom .view_all{
        width: 19.3%;
        margin-left: 80.6%;
        font-size: 15.5pt;
    }


    /********************** panel-3 **********************/


    .panel-3 .bottom .view_all{
        width: 19.3%;
        margin-left: 79%;
        font-size: 15.5pt;
    }

    /********************** panel-3 **********************/
    .middle-7{
        padding-left: .5%;
        padding-right: 1%;

    }
    .middle-7 .block-1{
        width: 38.4%;
    }
    .middle-7 .block-1 .duration{
        width: 7%;
        margin-left: 30.9%;
    }

    .middle-7 .block-1 .desc{
        height: 143px;
    }


    .middle-7 .block-2 {
        margin-left: 0;
        margin-right: 0;
        padding-left: 1%;
        width: 19.2%;
        float: none;
    }
    .middle-7 .block-2 .duration{
        width: 7%;
        margin-left: 11.95%;
    }
    .middle-7 .block-2 .desc {
        height: 67px;
    }


    .middle-7 .block-2:nth-child(5){
        display: inline-block;

    }
    .middle-7 .block-2:nth-child(6){
        display: inline-block;
    }

    /*******************************************************/

    .middle-4{
        padding-left: .5%;
        padding-right: 1%;

    }
    .middle-4 .block-1 {
        width: 38.4%;
        display: inline-block;
        float: left;
        margin-bottom: 0;
        padding-left: 1%;
        padding-right: .5%;
    }
    .middle-4 .block-1 .duration{
        width: 7%;
        margin-left: 30.85%;
    }
    .middle-4 .block-1:nth-child(2) .duration{
        width: 7%;
        margin-left: 30.8%;
    }
    .middle-4 .block-1 .desc{
        height: 128px;
    }
    .middle-4 .block-1:nth-child(2) {
        width: 38.4%;
        display: inline-block;
        float: left;
        margin-bottom: 0;
        padding-left: 1%;
        padding-right: .5%;
    }
    .middle-4 .block-1:nth-child(2) .desc{
        height: 128px;
    }

    .middle-4 .block-2 {
        margin-left: 0;
        margin-right: 0;
        padding-left: 1%;
        float: left;
        width: 19.2%;
        display: inline-block;
        margin-bottom: 1%;
    }
    .middle-4 .block-2 .duration{
        width: 7%;
        margin-left: 11.95%;
    }
    .middle-4 .block-2 .desc {
        height: 60px;
    }

    .middle-4 .block-1 .desc .text {
        margin-top: 5px;
    }
    .middle-4 .block-2 .desc .head{
        line-height: 28px;
    }


}




/********************** 1024px **********************/
/*****************************************************/
@media only screen and (min-width : 1024px) {

    .title {
        max-width: 980px;

        margin-left: auto;
        margin-right: auto;
        left: auto;
        right: auto;

        padding-left: 0px;
        padding-right: 0px;
        display: block;

    }



    .panel-1{
        display: block;
        text-align: center;
    }
    .panel-1 .bottom{
        max-width: 1000px;

        margin-left: auto;
        margin-right: auto;
        left: auto;
        right: auto;
    }
    .panel-1 .bottom .view_all{
        width: 188px;
        margin-left: 802px;
        font-size: 1.5em;


    }


    /********************** panel-2 **********************/

    .panel-2{
        display: block;
    }
    .panel-2 .bottom{
        max-width: 1000px;

        margin-left: auto;
        margin-right: auto;
        left: auto;
        right: auto;
    }
    .panel-2 .bottom .view_all{
        width: 191px;
        margin-left: 807px;
        font-size: 1.5em;
    }


    /*
    .panel-1 .middle{

    }
    .panel-1 .middle .block-1{
        width: 370px;
        float: none;
    }
    .panel-1 .middle .block-2{
        width: 170px;
        float: none;
        margin-top: -100px;
    }
    .panel-1 .middle .block-2:nth-child(3n+1){
    }
    .panel-1 .middle .block-2-all{
        width: 170px;
        float: none;
    }
    */

    /********************** panel-3 **********************/
    .panel-3{
        display: block;
    }

    .panel-3 .bottom{
        max-width: 1000px;

        margin-left: auto;
        margin-right: auto;
        left: auto;
        right: auto;
    }
    .panel-3 .bottom .view_all{
        width: 191px;
        margin-left: 803px;
        font-size: 1.5em;

        display: block;
    }


    /********************** panel-3 **********************/
    .middle-7{
        max-width: 1000px;

        margin-left: auto;
        margin-right: auto;
        left: auto;
        right: auto;

    }
    .middle-7 .block-1 .duration{
        margin-left: 324px;
        width: 60px;
    }


    .middle-7 .block-1 .desc{
        height: 142px;
    }
    .middle-7 .block-2 {
        width: 18.7%;
        margin-right: 4px;
        margin-bottom: 15px;
    }
    .middle-7 .block-2:nth-child(3n+2){
        margin-left: 3px;
    }

    .middle-7 .block-2 .duration{
        margin-left: 127px;
        width: 60px;
    }


    /*******************************************************/

    .middle-4{
        max-width: 1000px;

        margin-left: auto;
        margin-right: auto;
        left: auto;
        right: auto;
    }

    .middle-4 .block-1 {
        width: 38.4%;
        display: inline-block;
        float: left;
        margin-bottom: 0;
        padding-left: 1%;
        padding-right: .5%;
    }
    .middle-4 .block-1 .duration{
        margin-left: 324px;
        width: 60px;
    }
    .middle-4 .block-1:nth-child(2) .duration{
        margin-left: 324px;
        width: 60px;
    }
    .middle-4 .block-1 .desc{
        height: 130px;
    }
    .middle-4 .block-1:nth-child(2) .desc{
        height: 131px;
    }

    .middle-4 .block-2 {
        margin-left: 0;
        margin-right: 0;
        padding-left: 1%;
        float: left;
        width: 19.2%;
        display: inline-block;
        margin-bottom: 1%;
    }
    .middle-4 .block-2 .duration{
        margin-left: 132px;
        width: 60px;
    }

    .middle-4 .block-2 .desc {
        height: 61px;
    }

    .block-1 .desc .head{
        font-size: 1.7em;
        line-height: 20px;
    }
    .block-1 .desc .text {

        font-size: 1.4em;
        line-height: 25px;
    }
    .block-2 .desc .head{
        font-size: 1.3em;
        line-height: 20px;
    }
    .block-2 .desc .text {
        font-size: 1.1em;
        line-height: 20px;
    }

    .middle-4 .block-1 .desc .text {
        margin-top: 10px;
    }
    .middle-7 .block-2 .desc .text {
        margin-top: 50px;
    }

    .title .head{
        padding-left: 0;
    }
    .title .text {
        padding-left: 0;

    }
}