/*
*/
/* https://fonts.google.com/?subset=thai
เลือก Font แต่ละแบบ
font-family: 'IBM Plex Sans Thai Looped', sans-serif; แบบบาง
font-family: 'Kanit', sans-serif; แบบหนา
font-family: 'Pattaya', sans-serif; แบบหนาและเอียง
font-family: 'Charm',cursive; อักษรแบบโบราณ
font-family: 'Noto Sans Thai Looped', sans-serif;
// ควบคุมข้อความไม่ให้ยาวไป
span.txtfix {width:150px;}
span.txtfix {white-space:nowrap; overflow:hidden; display:inline-flex;}
*/
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai+Looped:wght@300&family=Kanit:ital,wght@0,400;1,100;1,200&family=Pattaya&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Charm&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Charm:wght@400;700&family=Noto+Sans+Thai+Looped:wght@100;600&display=swap');
body {min-height:100%; background-color:whitesmoke; border:1px solid; padding:10px; box-shadow:5px 10px;} /* font-family: 'Kanit',sans-serif; */
.FIBM {font-family:'IBM Plex Sans Thai Looped',sans-serif;} /* แบบบาง */
.FKAN {font-family:'Kanit',sans-serif;} /* แบบหนา */
.FPAT {font-family:'Pattaya',sans-serif;} /* แบบหนาและเอียง */
.FCHA {font-family:'Charm',cursive;} /* อักษรแบบโบราณ */
.FNOTO {font-family:'Noto Sans Thai Looped',sans-serif;} /* */
h1 {line-height:30px;} h2 {line-height:25px;} h3 {line-height:17px;}
h4 {line-height:15px;} h5 {line-height:12px;} h6 {line-height:10px;}
ol {list-style:square;}
ol.sub {line-height:35px;} /* font-size:70%; */
ol.sub2 {line-height:15px;} /* font-size:65%; */
table {background-color:whitesmoke; border:2px outset black; box-shadow:5px 5px; border-collapse:collapse;}
th {text-align:center; vertical-align:middle; font-weight:bold; font-style:oblique;}
td {color:black; border:2px outset black; border-collapse:collapse;}
td.c {text-align:center; vertical-align:middle;}
td.r {text-align:right; vertical-align:middle;}
td.l {padding-left:5px;}
td.i {text-indent:2%;}
td.n {border:0px;}
div.flexed {text-align:center;} /* สำหรับทำTableแบบยืดหยุ่นตามขนาดเวบ */
div.flexed table {border-spacing:0; width:100%;}
div.flexed td,div.flexed td {text-align:center; vertical-align:middle; padding:8px; font-weight:bolder;}
div.flexed tr:nth-child(even){background-color: #f2f2f2}
a:link,a:visited,a:hover,a:active {color:black;}
a:hover {background-color:black; color:white; text-decoration:none;}
button {font-family:'Kanit',sans-serif; font-size:12pt; font-weight:bolder; border:7px groove #000000; background:#ffffff; }
button:hover {box-shadow:10px 10px 5px 0px rgba(0,0,0,0.75); -webkit-box-shadow:10px 10px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow:10px 10px 5px 0px rgba(0,0,0,0.75);}
.center {margin-left:auto; margin-right:auto; margin-top:auto; margin-bottom:auto;}
/*
*** ทำ เฟรม BOX 1-2 Column
inside2 = 2-7 Column
*/
div.container {display:table; width:100%; word-wrap:break-word;}
div.headinside {width:80%; padding:10px; border:1px none black; margin:auto; text-align:center; font-weight:bolder; font-size:200%;}
div.inside {float:left; text-indent:15px; padding:7px; display:table-cell; vertical-align:top; margin:auto; margin-bottom:10px;} /* */
div.inside2 {float:left; border:2px double black; text-indent:15px; padding:10px; display:table-cell; vertical-align:top;
margin:auto; margin-bottom:10px;}
/* PC margin-right:10px; margin-left:10px; */
div table {width:95%;}
/*
🦅 🕷
📞 097-172-3424
*/
.logo {position:fixed; top:10px; left:10px; font-size:40px;}
.logor {position:fixed; top:10px; right:15px; font-size:40px;}
.logortop {position:fixed; top:0px; right:0px; font-size:40px;}
.logorbott {position:fixed; bottom:0px; right:0px; font-size:40px;}
.logolbott {position:fixed; bottom:0px; left:0px; font-size:40px;}
.tel {position:fixed; bottom:10px; right:10px; box-shadow: 5px 5px; }
/*
Company Name
Addr-1
Addr-2
Addr-3
Tel ????
Email
Web
*/
.logoimg {width:550px; background-color:whitesmoke; border:2px outset black;box-shadow:5px 5px;border-collapse:collapse;float:right;padding:10px;}
.logoimg .logoimgin {background-color: whites; border: 2px none black;border-collapse:collapse; float:right; margin-top: 15px;margin-right:5px;}
iframe {margin:auto;height:auto;padding:10px;box-shadow: 3px 6px 5px 0px black;-webkit-box-shadow: 3px 6px 5px 0px black;
-moz-box-shadow: 3px 6px 5px 0px black;border: 2px solid black;border-radius: 15px 50px 30px;}
iframe.noborder {box-shadow:none; border:none;}
img,video {margin:auto; width:auto; padding:10px; box-shadow:3px 6px 5px 0px black; -webkit-box-shadow:3px 6px 5px 0px black;
-moz-box-shadow: 3px 6px 5px 0px black;border: 2px solid black;border-radius: 15px 50px 30px;}
img.noborder,img.video {box-shadow:none; border:none; padding:0px; border-radius:0;}
img.shaked:hover {animation:shake 0.5s; animation-iteration-count:infinite;}
@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);}}
.objshaked:hover {animation:shake 0.5s; animation-iteration-count:infinite;}
@keyframes objshaked {
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 screen and (max-width:600px) { /* For Mobile */
body {margin-top:50px; margin-bottom:50px;}
img,video {max-height:150px; max-width:270px;}
div.inside {width:90%; border:1px double black;}
div.inside2 {width:42%;}
div.inside2 img,div.inside2 video {width:80px; height:80px;}
table {max-width:320px;}
button.big {font-size:25px; padding:15px; background-color:yellow;}
.pc {display:none;}
}
@media screen and (min-width:601px) { /* For PC */
body {margin-top:30px; margin-bottom:50px;}
img,video {max-height:250px; max-width:350px;}
div.inside {width:45%; border:2px double black;}
div.inside2 {width:22%;}
div.inside2 img,div.inside2 video {width:150px; height:150px;}
.mb {display:none;}
}
/* มือถือ อุปกรณ์ 777*347 ,เวบ 632*347
@media screen and (max-width:500px) { For Mobile
}
@media only screen and (min-width:501px) and (max-width:975px) { For Wide Mobile
}
@media screen and (min-width:976px) { For PC
}
*/
/*
🌾 🌿
*/
