@media only screen and (max-width: 600px) {

    .f-div { width: auto;}

.c-what-do-detail { margin-bottom: 30px;}

.logo-social > img {     width: 100px;
    margin-right: 15px;}

    .logo-social > a >img { width: 30px;}

    .carousal-c-1 .slick-next , .carousal-c-2 .slick-next {     right: 5px;}

    .carousal-c-1 .slick-prev , .carousal-c-2 .slick-prev{ left: 5px;}

    .box { top: 60%;}

}


@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .box { top: 70%;}
 }

 @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .c-what-do-detail { margin-bottom: 30px;}
    .box { top: 50%;}
  }