*{box-sizing:border-box;}
body {font-size:20px; background-color:#1e81b0; color:#ffffff}
li {text-align:left; line-height:150%; list-style-type:square;}
img {width:auto; display:block; margin-left:auto; margin-right:auto;}
.t {width:100%; float:left; padding:10px; border:1px double white; margin-bottom:5px; text-align:center;}
.h {width:100%; float:left; padding:10px; border:1px double white; margin-bottom:5px;}
.dh {display:table; width:100%;}
.d2h {display:table; width:100%;}
.d2 {display:table-cell; padding:10px; border:1px double white;} /* ขนาดColumn เท่ากัน */
.d {float:left; padding:10px; border:1px double white; margin-bottom:5px; display:table-cell; vertical-align:top;}
.ddd,.dd {float:left; padding:10px; border:1px double white; margin-bottom:5px; display:table-cell; vertical-align:top;}
.dind {text-indent:5%;} /* ย่อหน้าบรรทัดแรก */
@keyframes shake {
0% {transform: translate(1px,1px) rotate(0deg); }
10% {transform: translate(-1px,-2px) rotate(-1deg); }
20% {transform: translate(-3px,0px) rotate(1deg); }
30% {transform: translate(3px,2px) rotate(0deg); }
40% {transform: translate(1px,-1px) rotate(1deg); }
50% {transform: translate(-1px,2px) rotate(-1deg); }
60% {transform: translate(-3px,1px) rotate(0deg); }
70% {transform: translate(3px,1px) rotate(-1deg); }
80% {transform: translate(-1px,-1px) rotate(1deg); }
90% {transform: translate(1px,2px) rotate(0deg); }
100% {transform: translate(1px,-2px) rotate(-1deg);}}
@media only screen and (min-width:400px) and (max-width:975px){
.d {width:100%;} .dd {width:50%;} .ddd {width:100%;}
.tf {white-space:nowrap; display:inline-flex; overflow:hidden; text-overflow:ellipsis;} /* เป็นการตัดคำให้สั่งลงและไม่แสดงทั้งหมด ต้องใช้ ?????
หลัว Div หรือ li
*/
/* เป็นการตัดคำให้สั่งลงและไม่แสดงทั้งหมด ต้องใช้ ?????
หลัว Div หรือ li
*/
}
@media screen and (max-width:500px) { /* For Mobile */
.d .tf {width:420px;}
.d li .tf {width:400px;}
.dd .tf {width:210px;}
.dd li .tf {width:190px;}
}
@media only screen and (min-width:501px) and (max-width:975px) { /* For Wide Mobile */
.d .tf {width:925px;} /* 620px */
.d li .tf {width:900px;}
.dd .tf {width:450px;} /* 310px */
.dd li .tf {width:420px;} /* 290px */
}
@media screen and (min-width:976px) { /* For PC */
.d {width:50%;} .dd {width:25%;} .ddd {width:25%;}
}
@media only screen and (max-width:975px) {
.d2 {display:block; width:100%;}
}
/*
Title
Title
2 Column
4 Column
Column-1
Column-2
Column-3
Column-4
Column-5
Column-6
Column-7
Column-8
Column-1
Column-3
*/