body { font-family: 'Kanit', Times, serif !important; font-size:1em;}

a:link {color:Black; text-decoration:none;}
a:visited {color:Black; text-decoration:none;}
a:hover {color:White; text-decoration:none;}
a:active {color:Black; text-decoration:none;}

@media only screen and (min-width: 1024px) {
    .head-sub-txt {color:RED; margin-top:-30px;}
    .menu {color:Black; background-color:Gainsboro; text-align:center; display:inline-block; padding:2px 5px;}
    .menu:hover {color:White; background-color:RED; text-align:center; display:inline-block; padding:2px 5px;}
    .former {width:100%; font-size:120%; margin-top:30px;}
    .label {width:10%; vertical-align:top; display:inline-block; margin-top:6px;}
    .field {width:80%; display:inline-block;}
    .input {width:80%; height:30px; font-family:"Kanit"; font-size:100%;}
    .textarea {width:80%; height:260px; font-family:"Kanit"; font-size:100%;}
    .submit {width:10%; height:30px; font-family:"Kanit"; font-size:100%; margin-top:10px; margin-left:816px;}

    .padhua {width:100%;}
    .padhua_hr {border:1px solid red; margin-top:-20px;}

    .All_cta {color:Black; background-color:White; border:1px solid Black; font-size:90%; border-radius:24px; padding:1px 5px;}
    .All_cta:hover {color:White; background-color:Red; border:1px solid Red; font-size:90%; border-radius:24px; padding:1px 5px;}

    .bigbox {width:230px; height:320px; border:1px solid Gray; display:inline-block; vertical-align:top; margin-left:5px; margin-top:10px;}
    .bigbox:hover {width:230px; height:320px; border:1px solid Gray; display:inline-block; box-shadow:0px 3px 6px Gray; transition:0.3s;}
    .bigbox_img {width:230px; height:200px; object-fit:cover;}
    .bigbox_img:hover {width:230px; height:200px; object-fit:cover; filter:contrast(200%) grayscale(100%); transition:1s;}
    .bigbox_txt {height:50px; font-size:90%; padding:6px;}
    .bigbox_author {color:gray; font-size:80%; padding:6px;}
    .bigbox_cta {color:Black; background-color:White; border:1px solid Black; font-size:90%; border-radius:24px; padding:1px 5px; 
    position: absolute; margin-left:170px; margin-top:-30px; z-index:2; }
    .bigbox_cta:hover {color:White; border:1px solid RED; background-color:RED; font-size:90%; border-radius:24px; padding:1px 5px;}
    
    .superbox {width:471px; height:300px; border:1px solid Gray; display:inline-block; vertical-align:top; margin-left:5px; margin-top:10px;}
    .superbox:hover {width:471px; height:300px; border:1px solid Gray; display:inline-block; box-shadow:0px 3px 6px Gray; transition:0.3s;}
    .superbox_img {width:471px; height:200px; object-fit:cover;}
    .superbox_img:hover {width:471px; height:200px; object-fit:cover; filter:contrast(200%) grayscale(100%); transition:1s;}
    .superbox_txt {height:30px; font-size:90%; padding:6px;}
    .superbox_author {color:gray; font-size:80%; padding:6px;}
    .superbox_cta {color:Black; background-color:White; border:1px solid Black; font-size:90%; border-radius:24px; padding:1px 5px;
    position: absolute; margin-left:410px; margin-top:-30px; z-index:2; }
    .superbox_cta:hover {color:White; border:1px solid RED; background-color:RED; font-size:90%; border-radius:24px; padding:1px 5px;} 

    .smallbox {width:170px; height:300px; border:1px solid Gray; display:inline-block; vertical-align:top; margin-left:5px; margin-top:10px;}
    .smallbox:hover {width:170px; height:300px; border:1px solid Gray; display:inline-block; box-shadow:0px 3px 6px Gray; transition:0.3s;}
    .smallbox_img {width:170px; height:180px; object-fit:cover;}
    .smallbox_img:hover {width:170px; height:180px; object-fit:cover; filter:contrast(200%) grayscale(100%); transition:1s;}
    .smallbox_txt {height:50px; font-size:90%; padding:6px;}
    .smallbox_author {color:gray; font-size:80%; padding:6px;}
    .smallbox_cta {color:Black; background-color:White; border:1px solid Black; font-size:90%; border-radius:24px; padding:1px 5px;
    position: absolute; margin-left:110px; margin-top:-30px; z-index:2;}        
    .smallbox_cta:hover {color:White; border:1px solid RED; background-color:RED; font-size:90%; border-radius:24px; padding:1px 5px;}    

    .story-image-line {width:300px; height:300px; object-fit:cover; display:inline-block; margin-top:15px; vertical-align:top;}    
    .story-image {width:300px; height:300px; object-fit:cover; display:inline-block; margin-top:15px; vertical-align:top;}    
    .story-essense {width:700px; border:1px solid Gray; display:inline-block; margin-left:30px; margin-top:30px; vertical-align:top; 
    padding:30px 15px 30px 15px;}
    
    .story-ads {width:370px; display:inline-block; margin-left:30px; margin-top:30px; vertical-align:top} 
    .story-ads-border { border:1px solid Gray;}    
    .story-ads-img {width:370px; height:250px; object-fit:cover;}    
    .story-ads-txt {padding:10px;}    
    .story-ads-cta {width:auto; background-color:Gainsboro; margin-left:250px; border-radius:25px; padding:0px 10px;}    
    .story-ads-cta:hover {width:auto; background-color:Red; margin-left:250px; border-radius:25px; padding:0px 10px;}        

    .footer {width:100%; background-color:Gainsboro; font-size:85%;}
    .footer-foot {width:23%; display:inline-block; vertical-align:top; padding:20px 10px 10px 10px; line-height: 1.9;}
    .footer-hr {width:100%; border:1px solid RED;}
    .footer-cta {border:1px solid White; background-color:White; border-radius:15px; padding:0px 5px;}
    .footer-cta:hover {border:1px solid RED; background-color:RED; border-radius:15px; padding:0px 5px;}
}

@media only screen and (max-width: 1023px)and (orientation:portrait) {
    .head-txt {text-align:center;}
    .head-sub-txt {color:RED; text-align:center; margin-top:-10px;}
    .menu {display:none;}

    .padhua {width:100%;}
    .padhua_hr {border:1px solid red; margin-top:-20px;}

    .All_cta {color:Black; background-color:White; border:1px solid Black; font-size:90%; border-radius:24px; padding:1px 5px;}
    .All_cta:hover {color:White; background-color:Red; border:1px solid Red; font-size:90%; border-radius:24px; padding:1px 5px;}    
    
    .bigbox {width:178px; height:330px; border:1px solid Gray; display:inline-block; vertical-align:top; margin-left:5px; margin-top:10px;}
    .bigbox:hover {width:178px; height:330px; border:1px solid Gray; display:inline-block; box-shadow:0px 3px 6px Gray; transition:0.3s;}
    .bigbox_img {width:178px; height:200px; object-fit:cover;}
    .bigbox_img:hover {width:178px; height:200px; object-fit:cover; filter:contrast(200%) grayscale(100%); transition:1s;}
    .bigbox_txt {height:60px; font-size:90%; padding:6px;}
    .bigbox_author {color:gray; font-size:80%; padding:6px;}
    .bigbox_cta {color:Black; background-color:White; border:1px solid Black; font-size:100%; border-radius:24px; padding:1px 5px;
    position: absolute; margin-left:110px; margin-top:-40px; z-index:2;}
    .bigbox_cta:hover {color:White; border:1px solid RED; background-color:RED; font-size:100%; border-radius:24px; padding:1px 5px;}

    .superbox {width:367px; height:300px; border:1px solid Gray; display:inline-block; vertical-align:top; margin-left:5px; margin-top:10px;}
    .superbox:hover {width:367px; height:300px; border:1px solid Gray; display:inline-block; box-shadow:0px 3px 6px Gray; transition:0.3s;}
    .superbox_img {width:367px; height:200px; object-fit:cover;}
    .superbox_img:hover {width:367px; height:200px; object-fit:cover; filter:contrast(200%) grayscale(100%); transition:1s;}
    .superbox_txt {height:30px; font-size:90%; padding:6px;}
    .superbox_author {color:gray; font-size:80%; padding:6px;}
    .superbox_cta {color:Black; background-color:White; border:1px solid Black; font-size:90%; border-radius:24px; padding:1px 5px;
    position: absolute; margin-left:300px; margin-top:-40px; z-index:2;}
    .superbox_cta:hover {color:White; border:1px solid RED; background-color:RED; font-size:90%; border-radius:24px; padding:1px 5px;}

    .smallbox {width:178px; height:330px; border:1px solid Gray; display:inline-block; vertical-align:top; margin-left:5px; margin-top:10px;}
    .smallbox:hover {width:178px; height:330px; border:1px solid Gray; display:inline-block; box-shadow:0px 3px 6px Gray; transition:0.3s;}
    .smallbox_img {width:178px; height:200px; object-fit:cover;}
    .smallbox_img:hover {width:178px; height:200px; object-fit:cover; filter:contrast(200%) grayscale(100%); transition:1s;}
    .smallbox_txt {height:60px; font-size:90%; padding:6px;}
    .smallbox_author {color:gray; font-size:80%; padding:6px;}
    .smallbox_cta {color:Black; background-color:White; border:1px solid Black; font-size:100%; border-radius:24px; padding:1px 5px;
    position: absolute; margin-left:110px; margin-top:-40px; z-index:2; }
    .smallbox_cta:hover {color:White; border:1px solid RED; background-color:RED; font-size:100%; border-radius:24px; padding:1px 5px;}  

    .story-essense {width:340px; display:block; margin:auto; padding:30px 0px 50px 0px;}
    .story-image-line {margin-top:30px;}
    .story-image {width:370px; height:300px; object-fit:cover; display:block; margin:auto;}
    .story-ads {width:370px; display:block; margin:auto;}    

    .story-ads {width:370px; display:block; margin:auto;} 
    .story-ads-border { border:1px solid Gray;}    
    .story-ads-img {width:370px; height:250px; object-fit:cover;}    
    .story-ads-txt {padding:10px;}    
    .story-ads-cta {width:auto; background-color:Gainsboro; margin-left:250px; border-radius:25px; padding:0px 10px;}    
    .story-ads-cta:hover {width:auto; background-color:Red; margin-left:250px; border-radius:25px; padding:0px 10px;}        

    .footer {width:100%; display:Block; margin:auto; background-color:Gainsboro; font-size:85%; padding:0px 0px 30px 0px;}
    .footer-foot {width:90%; display:Block; margin:auto; padding:40px 10px 0px 10px; line-height: 1.9;}
    .footer-hr {width:100%; border:1px solid RED;}
    .footer-cta {border:1px solid White; background-color:White; border-radius:15px; padding:0px 5px;}
    .footer-cta:hover {border:1px solid RED; background-color:RED; border-radius:15px; padding:0px 5px;}    

}

@media only screen and (max-width: 1023px)and (orientation:Landscape) {
    html { display:none;}
}