body {
    margin: 0;
    padding: 0;
    background-attachment:fixed;
    
}

/* ส่วนเนื้อหา */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.img_logo {
    width: 30%;
    height: 30%;
    margin-top: 80px;
    padding-left: 5%;
    object-fit: cover;
}

.img_logo img {
    max-width: 100%;
    max-height: 100%;
}

.flex-container {
    margin: auto auto;
    display: block;
    width: 73.7%;
    margin-top: 0%;
    height: 100%;
}

.flex-items-1 {
    margin: auto auto;
    display: block;
    background-color: none;
    width: 100%;
    height: 100%;
    background: rgba(30, 33, 36, 0.856);
    color: white;
    border: 1px solid #000;
    border-radius: 0px 0px 7px 7px;
    box-shadow: 1px 1px 8px #000;
}

.section_area_grid {
    margin: auto 0%;
    display: block;
    grid-gap: 3rem;
    max-width: 100%;
    max-height: 100%;
    text-align: center;
}

.section_grid_item {
    text-align: center;

}

.section_item_img img {
    width: 100%;
    height: 100%;
}

.Anadvertisement0 {
margin: auto;
padding: auto;
width: 100%;
height:100%;
object-fit: cover;
}

/* .Anadvertisement0 img {
max-width: 100%;
max-height: 100%;
} */

div.figure02 {
    margin: auto auto;
    width: 73.5%;
    text-align: center;
    background-color: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

div.figure {
    width: 80%;
    border: thin none;
    margin: 1rem auto;
    padding: 0%;
    text-align: center;
    background-color: none;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 0.1rem;
    align-items: center;
    justify-items: center;
  }

  div.figure p {
    text-align: center;
    font-style: italic;
    font-size: smaller;
    text-indent: 0;
  }

  div.figure01 {
    
    width: 80%;
    border: thin none;
    margin: 1rem auto;
    padding: 0%;
    text-align: center;
    background-color: none;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 0.1rem;
    align-items: center;
    justify-items: center;
    
  }
  div.figure01 p {
    text-align: center;
    font-style: italic;
    font-size: smaller;
    text-indent: 0;
  }

.box {
background-color: ;
height: ;

}


.scaled {
    padding: 1rem;
    position: relative;
    background: linear-gradient(to right, #009900 ,#6699FF , #33FFFF, #6666FF , #0099FF , #0066FF);
    background: -webkit-linear-gradient(left, #9c0025 ,#33FF33 , #66FFCC, #CCFF00 , #99CC66 , #33CC00);
    background: -o-linear-gradient(right, #009900, #33FF33 ,#CCCC66,  #33FF33 , #66FFCC , #CC33CC));
    background: -moz-linear-gradient(right, #009900, #66FFCC , #CCCC66, #CCFF00 , #99CC66 , #CC33CC));
    padding: 3.5px;
    box-shadow: 1px 1px 8px #000;
    border-radius: 5px 5px 5px 5px;
}

img.scaled {
    margin-top: 0%;
    margin-block-end: 0%;
    transform: scale(0.0.1s);
    width: 95%;
    object-fit: cover;
  }

  .content-item {
    position: relative;
    text-align: center;
    cursor: pointer;
    
  }
  
  .content-item .pic a{
    overflow: hidden;
    font-size: 100%;
    color: whitesmoke;
  }
  
  .content-item .pic img {
    transition: 1ms;
  }
  
  .content-item:hover .pic img {
    transform: scale(1.01);
  }

a.pagelink:hover { 
    color: whitesmoke;
    text-decoration: none; 
}

.pic {

}

.pagelink {
    color: silver;
    text-decoration: none;
    font-size: 15%;
}

.post_title{
font-size: 100%;
text-indent: 5%;
word-wrap:break-word; 
display: block;
z-index: 1; 
position: absolute; 
top: 73%; 
width: 95%;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-decoration:none;
}

.Episode a{
    font-size: 110%;
    color: #fff;
}

.Episode a:hover {
    background-color:none;
    color: rgb(190, 189, 189);
    text-decoration: none;
}

.content_summary {
   margin-top: 2%;
}

.summary {
    margin: 15px 20px;
    border: 1px solid #000;
    border-radius: 7px 7px 7px 7px;
    box-shadow: 1px 1px 8px #000;
}

.inner_position_bottom{
    margin: auto 3.5%;
    position:absolute;
    display:block;  
    background-color:rgba(0, 0, 0, 0.705);   
    height:27%;
    width:93%;
    bottom: 1.5px;
    z-index:0;  
    border-radius: 3px 3px 3px 3px;
}

.site-info {
    color: whitesmoke;
    margin-top: 10%;
    z-index: 1045;
    bottom:0;
    border:45px solid rgb(31, 31, 31);
    position:absolute;
    position:relative;
    background-color: rgb(31, 31, 31);
    font-size: 15px;
    text-align: start;
    align-items: flex-end;
}

.white_content01 {
    align-items: flex-end;
    position: fixed;
    z-index: 1050;
    padding: 18px;
    object-fit: cover;
    }
    .white_content02 {
    position: fixed;
    right: 0px;
    top: 20%;
    padding: 1px;
    z-index: 1060;
    object-fit: cover;
    }
    .white_content03 {
    position: fixed;
    left: 0px;
    top: 20%;
    padding: 1px;
    z-index: 1060;
    object-fit: cover;
    }
    .white_content1 {
    position: relative;
    object-fit: cover;
    text-align: center;
    width: 100%;
    height: 100%;
    z-index: 1050;
    }

    .white_content2 {
    position: fixed;
    text-align: right;
    right: 0px;
    z-index: 1030;
    top: 24%;
    padding: 1px;
    object-fit: cover;
    }
    .white_content3 {
    position: fixed;
    text-align: left;
    left: 0px;
    z-index: 1030;
    top: 24%;
    padding: 1px;
    object-fit: cover;
    }
    .white_content1 img {
    max-width: 100%;
    max-height: 100%;
    }
    .white_content2 img {
    max-width: 100%;
    max-height: 100%;
    }
    .white_content3 img {
    max-width: 100%;
    max-height: 100%;
    }

    .headerindex {
        font-size: 115%;
        margin: auto auto;
        display: block;
        width: 73.6%;
        color: rgba(255, 255, 255, 0.932);
        text-align: left;
        margin-top: 3%;
        border: 1px solid #000;
        background: #093297;
        background: -webkit-linear-gradient(left, #093297 ,#5F67F0, #1069B3 ,#0DA0D9 ,#369DDF ,#369DDF,#369DDF ,#369DDF , #1069B3, #4E9BDF, #0DA0D9 , #1069B3 , #5664E8);
        background: -o-linear-gradient(right, #093297, #5F67F0, #1069B3 ,#0DA0D9 ,#369DDF ,#369DDF,#369DDF ,#369DDF ,#1069B3,  #4E9BDF, #0DA0D9 , #1069B3 , #5664E8));
        background: -moz-linear-gradient(right, #093297, #5F67F0, #1069B3 ,#0DA0D9 ,#369DDF ,#369DDF,#369DDF ,#369DDF , #1069B3, #4E9BDF, #0DA0D9 , #1069B3 , #5664E8));
        background: linear-gradient(to right, #093297 , #5F67F0, #1069B3 ,#0DA0D9 ,#369DDF ,#369DDF,#369DDF ,#369DDF ,#1069B3,  #4E9BDF, #0DA0D9 , #1069B3 , #5664E8));
        border-radius: 7px 7px 0px 0px;
        z-index: 1;
        padding: 10px;
        box-shadow: 1px 1px 8px #000;
    }


.header {
    font-size: 115%;
    margin: auto auto;
    display: block;
    width: 54.5%;
    color: rgba(255, 255, 255, 0.932);
    text-align: center;
    margin-top: 3%;
    border: 1px solid #000;
    background: -webkit-linear-gradient(left, #093297 ,#5F67F0, #1069B3 ,#0DA0D9 ,#369DDF ,#369DDF,#369DDF ,#369DDF , #1069B3, #4E9BDF, #0DA0D9 , #1069B3 , #5664E8);
    background: -o-linear-gradient(right, #093297, #5F67F0, #1069B3 ,#0DA0D9 ,#369DDF ,#369DDF,#369DDF ,#369DDF ,#1069B3,  #4E9BDF, #0DA0D9 , #1069B3 , #5664E8));
    background: -moz-linear-gradient(right, #093297, #5F67F0, #1069B3 ,#0DA0D9 ,#369DDF ,#369DDF,#369DDF ,#369DDF , #1069B3, #4E9BDF, #0DA0D9 , #1069B3 , #5664E8));
    background: linear-gradient(to right, #093297 , #5F67F0, #1069B3 ,#0DA0D9 ,#369DDF ,#369DDF,#369DDF ,#369DDF ,#1069B3,  #4E9BDF, #0DA0D9 , #1069B3 , #5664E8));
    border-radius: 7px 7px 0px 0px;
    z-index: 1;
    padding: 10px;
    box-shadow: 1px 1px 8px #000;
}

.header01 {
    font-size: 115%;
    margin: auto auto;
    display: block;
    width: 54.5%;
    color: rgba(255, 255, 255, 0.932);
    text-align: center;
    border: 1px solid #000;
    background: -webkit-linear-gradient(left, #093297 ,#5F67F0, #1069B3 ,#0DA0D9 ,#369DDF ,#369DDF,#369DDF ,#369DDF , #1069B3, #4E9BDF, #0DA0D9 , #1069B3 , #5664E8);
    background: -o-linear-gradient(right, #093297, #5F67F0, #1069B3 ,#0DA0D9 ,#369DDF ,#369DDF,#369DDF ,#369DDF ,#1069B3,  #4E9BDF, #0DA0D9 , #1069B3 , #5664E8));
    background: -moz-linear-gradient(right, #093297, #5F67F0, #1069B3 ,#0DA0D9 ,#369DDF ,#369DDF,#369DDF ,#369DDF , #1069B3, #4E9BDF, #0DA0D9 , #1069B3 , #5664E8));
    background: linear-gradient(to right, #093297 , #5F67F0, #1069B3 ,#0DA0D9 ,#369DDF ,#369DDF,#369DDF ,#369DDF ,#1069B3,  #4E9BDF, #0DA0D9 , #1069B3 , #5664E8));
    z-index: 1;
    padding: 10px;
    box-shadow: 1px 1px 8px #000;
    border-radius: 7px 7px 0px 0px;
}

.header02 {
    font-size: 115%;
    margin: auto auto;
    display: block;
    width: 73.8%;
    color: rgba(255, 255, 255, 0.932);
    text-align: left;
    margin-top: 2%;
    border: 1px solid #000;
    background: -webkit-linear-gradient(left, #093297 ,#5F67F0, #1069B3 ,#0DA0D9 ,#369DDF ,#369DDF,#369DDF ,#369DDF , #1069B3, #4E9BDF, #0DA0D9 , #1069B3 , #5664E8);
    background: -o-linear-gradient(right, #093297, #5F67F0, #1069B3 ,#0DA0D9 ,#369DDF ,#369DDF,#369DDF ,#369DDF ,#1069B3,  #4E9BDF, #0DA0D9 , #1069B3 , #5664E8));
    background: -moz-linear-gradient(right, #093297, #5F67F0, #1069B3 ,#0DA0D9 ,#369DDF ,#369DDF,#369DDF ,#369DDF , #1069B3, #4E9BDF, #0DA0D9 , #1069B3 , #5664E8));
    background: linear-gradient(to right, #093297 , #5F67F0, #1069B3 ,#0DA0D9 ,#369DDF ,#369DDF,#369DDF ,#369DDF ,#1069B3,  #4E9BDF, #0DA0D9 , #1069B3 , #5664E8));
    border-radius: 7px 7px 0px 0px;
    z-index: 1;
    padding: 10px;
    box-shadow: 1px 1px 8px #000;
}

.header03 {
    font-size: 115%;
    margin: auto auto;
    display: block;
    width: 54.5%;
    color: rgba(255, 255, 255, 0.932);
    text-align: left;
    margin-top: 0.3%;
    border : solid #0092ed;
    background-color: #0092ed; 
    border-radius: 7px 7px 0px 0px;
    z-index: 1;
    padding: 10px;
    box-shadow: 1px 1px 8px blue;
}

.img {
    font-size: 100%;
    margin: auto auto;
    display: block;
    width: 54.5%;
    color: rgba(255, 255, 255, 0.932);
    text-align: center;
    border-radius: 0px;
    background-color:rgba(30, 33, 36, 0.856);
    border: 1px solid #000;
    box-shadow: 1px 1px 8px #000;
    border-radius: 0px 0px 7px 7px;
    object-fit: cover;
}

.img img {
    margin-top: 2%; 
    width: 42.5%; 
    height: 42.5%; 
    box-shadow: 0px 0px 20px #000; 
    border-radius: 5px 5px 5px 5px; 
    border: 4px solid #000; 
}

.img01 {
    font-size: 100%;
    padding: 3px;
    margin: auto auto;
    display: block;
    width: 54.5%;
    color: rgba(255, 255, 255, 0.932);
    text-align: center;
    border: 1px solid #000;
    box-shadow: 1px 1px 8px #000;
    background-color:rgba(30, 33, 36, 0.856);
    border-radius: 0px 0px 7px 7px;
}

.img02 {
    margin-top: 100%;
    margin: auto auto;
    width: 74%;
    color: rgba(255, 255, 255, 0.932); 
    border-radius: 0px 0px 7px 7px;
}

.img03 {
    font-size: 100%;
    padding: 0%;
    margin: auto auto;
    display: block;
    width: 54.5%;
    color: rgba(255, 255, 255, 0.932);
    text-align: center;
    border-radius: 0px 0px 7px 7px;
    border : solid #0092ed;
    background-color:rgba(30, 33, 36, 0.856);   
    box-shadow: 1px 1px 0px blue; 
}

.row {
    margin-top:0.5%;
}

.p {
 font-size: 100%;   
}

.cd-top .text-replace .js-cd-top {
    z-index: 1150;
}

.content-item {
 margin: auto auto;
 background: none;
 width: 100%;
 }

 #show_video_play span {
     margin-top: 5%;
 }

 #fb-root {
color: white;
 }

#sw_facebook_display{
position:relative
}

#fbbox1{
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
border:5px solid #c73c48dc;
background-color:#fff;
position:fixed
}

#fbbox2{
    overflow:hidden;
    text-align:left
}

#fbbox1 img{
    position:absolute;
    top:0;cursor:pointer;
    border:0;z-index:1200
}

#fbbox1 iframe{
    border:0;
    overflow:hidden;
    position:absolute;
    width:100%;
    height:100%
}

@media only screen and (max-width: 1250px) {
.post_title {
    -webkit-line-clamp: 2;
}
}

@media only screen and (max-width: 966px) {
    .headerindex {
        width: 90%;
    }
    .header {
        width: 90%;
        height: 90%;     
    }
    .header01 {
        width: 90%;
        height: 90%;        
    }
    .header02 {
        width: 90%;
    }
    .header03 {
        width: 90%;
    }
    .img {
        width: 90%;
    }
    .img01 {
      width: 90%;  
    }
    .img02 {
        width: 100%;  
      }
    .img03 {
        width: 90%;  
      }
    .flex-items-1 {
        width: 100%;
        height: 100%;
    }
    div.figure{
        width: 100%;
        height: 100%;
    }
    .flex-container {
        width: 90%;
        height: 90%;    
    }
    .img img {
        width: 88%;
        height: 88%;
    }
    .Anadvertisement img {
        width: 90%;
        height: 90%;
    }
    .img_logo {
     width: 35%;
     height: 35%;
    }
    .white_content1 img {
        width: 90%;
        height: 90%;
    }
    .white_content2 img {
        width: 90%;
        height: 90%;
    }
    .white_content3 img {
        width: 90%;
        height: 90%;
    }
    div.figure02 {
    width: 95%;
    height: 95%;
    }

}

@media only screen and (max-width: 853px) {
.headerindex {
    width: 90%;
}
.header {
    width: 90%;
    height: 90%;     
}
.header01 {
    width: 90%;
    height: 90%;        
}
.header02 {
    width: 90%;
}
.header03 {
    width: 90%;
}
.img {
    width: 90%;
}
.img01 {
  width: 90%;  
}
.img02 {
    width: 100%;  
  }
.img03 {
    width: 90%;  
  }
.flex-items-1 {
    width: 100%;
    height: 100%;
}
div.figure{
    width: 100%;
    height: 100%;
}
.flex-container {
    width: 90%;
    height: 90%;    
}
.img img {
    width: 88%;
    height: 88%;
}
.Anadvertisement img {
    width: 90%;
    height: 90%;
}
.img_logo {
width: 45%;
height: 45%;
}
.white_content1 img {
    width: 90%;
    height: 90%;
}
.white_content2 img {
    width: 90%;
    height: 90%;
}
.white_content3 img {
    width: 90%;
    height: 90%;
}

}

@media only screen and (max-width: 800px) {
    .headerindex {
        width: 90%;
    }
    .header {
        width: 90%;
        height: 90%;     
    }
    .header01 {
        width: 90%;
        height: 90%;        
    }
    .header02 {
        width: 90%;
    }
    .header03 {
        width: 90%;
    }
    .img {
        width: 90%;
    }
    .img01 {
      width: 90%;  
    }
    .img02 {
        width: 100%;  
      }
    .img03 {
        width: 90%;  
      }
    .flex-items-1 {
        width: 100%;
        height: 100%;
    }
    div.figure{
        width: 100%;
        height: 100%;
    }
    .flex-container {
        width: 90%;
        height: 90%;    
    }
    .img img {
        width: 88%;
        height: 88%;
    }
    .Anadvertisement img {
        width: 90%;
        height: 90%;
    }
    .img_logo {
    width: 45%;
    height: 45%;
    }
    .white_content1 img {
        width: 90%;
        height: 90%;
    }
    .white_content2 img {
        width: 90%;
        height: 90%;
    }
    .white_content3 img {
        width: 90%;
        height: 90%;
    }
    
    }
    
    @media only screen and (max-width: 768px) {
    .headerindex {
        width: 90%;
    }
    .header {
        width: 90%;
        height: 90%;     
    }
    .header01 {
        width: 90%;
        height: 90%;        
    }
    .header02 {
        width: 90%;
    }
    .header03 {
        width: 90%;
    }
    .img {
        width: 90%;
    }
    .img01 {
      width: 90%;  
    }
    .img02 {
        width: 100%;  
      }
    .img03 {
        width: 90%;  
      }
    .flex-items-1 {
        width: 100%;
        height: 100%;
    }
    div.figure{
        width: 100%;
        height: 100%;
    }
    .flex-container {
        width: 90%;
        height: 90%;    
    }
    .img img {
        width: 88%;
        height: 88%;
    }
    .Anadvertisement img {
        width: 90%;
        height: 90%;
    }
    .img_logo {
    width: 45%;
    height: 45%;
    }
    .white_content1 img {
        width: 90%;
        height: 90%;
    }
    .white_content2 img {
        width: 90%;
        height: 90%;
    }
    .white_content3 img {
        width: 90%;
        height: 90%;
    }
    
    }
    
    @media screen and (max-width: 650px) {
    .figure {
        grid-template-columns: 1fr;
        display: block;
    }
    .headerindex {
        width: 90%;
    }
    .header {
        width: 90%;
        height: 90%;     
    }
    .header01 {
        width: 90%;
        height: 90%;        
    }
    .header02 {
        width: 90%;
    }
    .header03 {
        width: 90%;
    }
    .img {
        width: 90%;
    }
    .img01 {
      width: 90%;  
    }
    .img02 {
        width: 100%;  
      }
    .img03 {
        width: 90%;  
      }
    .flex-items-1 {
        width: 100%;
        height: 100%;
    }
    div.figure{
        width: 100%;
        height: 100%;
    }
    .flex-container {
        width: 90%;
        height: 90%;    
    }
    .img img {
        width: 88%;
        height: 88%;
    }
    .Anadvertisement img {
        width: 90%;
        height: 90%;
    }
    .img_logo {
    width: 65%;
    height: 65%;
    }
    .white_content1 img {
        width: 90%;
        height: 90%;
    }
    .white_content2 img {
        width: 85%;
        height: 85%;
    }
    .white_content3 img {
        width: 85%;
        height: 85%;
    }
    }
    
    @media only screen and (max-width: 649px) {
    .headerindex {
        width: 90%;
    }
    .header {
        width: 90%;
        height: 90%;     
    }
    .header01 {
        width: 90%;
        height: 90%;        
    }
    .header02 {
        width: 90%;
    }
    .header03 {
        width: 90%;
    }
    .img {
        width: 90%;
    }
    .img01 {
      width: 90%;  
    }
    .img02 {
        width: 100%;  
      }
    .img03 {
        width: 90%;  
      }
    .flex-items-1 {
        width: 100%;
        height: 100%;
    }
    .flex-container {
        width: 90%;
        height: 90%;    
    }
    .section_area_grid {
        margin: auto ;
    }
    
    div.figure{
        grid-template-columns: 1fr 1fr 1fr;
        width: 100%;
        height: 100%;
    }
    div.figure01{
        grid-template-columns: 1fr 1fr 1fr;
        width: 100%;
        height: 100%;
    }
    .img img {
        width: 88%;
        height: 88%;
    }
    .Anadvertisement img {
        width: 90%;
        height: 90%;
    }
    .img_logo {
    width: 65%;
    height: 65%;
    }
    .white_content1 img {
        width: 90%;
        height: 90%;
    }
    .white_content2 img {
        width: 80%;
        height: 80%;
    }
    .white_content3 img {
        width: 80%;
        height: 80%;
    }
    
    }
    
    @media only screen and (max-width: 640px) {
    .headerindex {
        width: 90%;
    }
    .header {
        width: 90%;
        height: 90%;     
    }
    .header01 {
        width: 90%;
        height: 90%;        
    }
    .header02 {
        width: 90%;
    }
    .header03 {
        width: 90%;
    }
    .img {
        width: 90%;
    }
    .img01 {
      width: 90%;  
    }
    .img02 {
        width: 100%;  
      }
    .img03 {
        width: 90%;  
      }
    .flex-items-1 {
        width: 100%;
        height: 100%;
    }
    .flex-container {
        width: 90%;
        height: 90%;    
    }
    .section_area_grid {
        margin: auto ;
    }
    
    div.figure{
        grid-template-columns: 1fr 1fr 1fr;
        width: 100%;
        height: 100%;
    }
    div.figure01{
        grid-template-columns: 1fr 1fr 1fr;
        width: 100%;
        height: 100%;
    }
    .img img {
        width: 88%;
        height: 88%;
    }
    .Anadvertisement img {
        width: 90%;
        height: 90%;
    }
    .img_logo {
    width: 65%;
    height: 65%;
    }
    .white_content1 img {
        width: 90%;
        height: 90%;
    }
    .white_content2 img {
        width: 80%;
        height: 80%;
    }
    .white_content3 img {
        width: 80%;
        height: 80%;
    }
    }
    
    @media only screen and (max-width: 600px) {
    .headerindex {
        width: 90%;
    }
    .header {
        width: 90%;
        height: 90%;     
    }
    .header01 {
        width: 90%;
        height: 90%;        
    }
    .header02 {
        width: 90%;
    }
    .header03 {
        width: 90%;
    }
    .img {
        width: 90%;
    }
    .img01 {
      width: 90%;  
    }
    .img02 {
        width: 100%;  
      }
    .img03 {
        width: 90%;  
      }
    .flex-items-1 {
        width: 100%;
        height: 100%;
    }
    .flex-container {
        width: 90%;
        height: 90%;    
    }
    .section_area_grid {
        margin: auto ;
        
    }

    div.figure02{
        grid-template-columns: 1fr;
        width: 100%;
        height: 100%;
    }
    
    
    div.figure{
        grid-template-columns: 1fr 1fr 1fr;
        width: 100%;
        height: 100%;
    }
    div.figure01{
        grid-template-columns: 1fr 1fr 1fr;
        width: 100%;
        height: 100%;
    }
    .img img {
        width: 88%;
        height: 88%;
    }
    .Anadvertisement img {
        width: 90%;
        height: 90%;
    }
    .img_logo {
    width: 65%;
    height: 65%;
    }
    .white_content1 img {
        width: 90%;
        height: 90%;
    }
    .white_content2 img {
        width: 75%;
        height: 75%;
    }
    .white_content3 img {
        width: 75%;
        height: 75%;
    }
    
    }
    
    @media only screen and (max-width: 568px) {
    .headerindex {
        width: 90%;
    }
    .header {
        width: 90%;
        height: 90%;     
    }
    .header01 {
        width: 90%;
        height: 90%;        
    }
    .header02 {
        width: 90%;
    }
    .header03 {
        width: 90%;
    }
    .img {
        width: 90%;
    }
    .img01 {
      width: 90%;  
    }
    .img02 {
        width: 100%;  
      }
    .img03 {
        width: 90%;  
      }
    .flex-items-1 {
        width: 100%;
        height: 100%;
    }
    .flex-container {
        width: 90%;
        height: 90%;    
    }
    .section_area_grid {
        margin: auto ;
    }
    
    div.figure{
        grid-template-columns: 1fr 1fr 1fr;
        width: 100%;
        height: 100%;
    }
    div.figure01{
        grid-template-columns: 1fr 1fr 1fr;
        width: 100%;
        height: 100%;
    }
    .img img {
        width: 88%;
        height: 88%;
    }
    .Anadvertisement img {
        width: 90%;
        height: 90%;
    }
    .img_logo {
    width: 65%;
    height: 65%;
    }
    .white_content1 img {
        width: 90%;
        height: 90%;
    }
    .white_content2 img {
        width: 70%;
        height: 70%;
    }
    .white_content3 img {
        width: 70%;
        height: 70%;
    }
    
    }
    
    @media only screen and (max-width: 533px) {
    .headerindex {
        width: 90%;
    }
    .header {
        width: 90%;
        height: 90%;     
    }
    .header01 {
        width: 90%;
        height: 90%;        
    }
    .header02 {
        width: 90%;
    }
    .header03 {
        width: 90%;
    }
    .img {
        width: 90%;
    }
    .img01 {
      width: 90%;  
    }
    .img02 {
        width: 100%;  
      }
    .img03 {
        width: 90%;  
      }
    .flex-items-1 {
        width: 100%;
        height: 100%;
    }
    .flex-container {
        width: 90%;
        height: 90%;    
    }
    .section_area_grid {
        margin: auto ;
    }
    
    div.figure{
        grid-template-columns: 1fr 1fr 1fr;
        width: 100%;
        height: 100%;
    }
    div.figure01{
        grid-template-columns: 1fr 1fr 1fr;
        width: 100%;
        height: 100%;
    }
    .post_title {
        -webkit-line-clamp: 2;
    }
    .img img {
        width: 88%;
        height: 88%;
    }
    .Anadvertisement img {
        width: 90%;
        height: 90%;
    }
    .img_logo {
    width: 65%;
    height: 65%;
    }
    .white_content1 img {
        width: 90%;
        height: 90%;
    }
    .white_content2 img {
        width: 65%;
        height: 65%;
    }
    .white_content3 img {
        width: 65%;
        height: 65%;
    }
    
    }
    
    @media only screen and (max-width: 480px) {
    .headerindex {
        width: 90%;
    }
    .header {
        width: 90%;
        height: 90%;     
    }
    .header01 {
        width: 90%;
        height: 90%;        
    }
    .header02 {
        width: 90%;
    }
    .header03 {
        width: 90%;
    }
    .img {
        width: 90%;
    }
    .img01 {
      width: 90%;  
    }
    .img02 {
        width: 100%;  
      }
    .img03 {
        width: 90%;  
      }
    .flex-items-1 {
        width: 100%;
        height: 100%;
    }
    .flex-container {
        width: 90%;
        height: 90%;    
    }
    .section_area_grid {
        margin: auto ;
    }
    
    div.figure{
        grid-template-columns: 1fr 1fr 1fr;
        width: 100%;
        height: 100%;
    }
    div.figure01{
        grid-template-columns: 1fr 1fr 1fr;
        width: 100%;
        height: 100%;
    }
    .img img {
        width: 88%;
        height: 88%;
    }
    .Anadvertisement img {
        width: 90%;
        height: 90%;
    }
    .img_logo {
    width: 95%;
    height: 95%;
    }
    .white_content1 img {
        width: 90%;
        height: 90%;
    }
    .white_content2 img {
        width: 60%;
        height: 60%;
    }
    .white_content3 img {
        width: 60%;
        height: 60%;
    }
    
    }
    
    @media only screen and (max-width: 415px) {
    .headerindex {
        width: 90%;
    }
    .header {
        width: 90%;
        height: 90%;     
    }
    .header01 {
        width: 90%;
        height: 90%;        
    }
    .header02 {
        width: 90%;
    }
    .header03 {
        width: 90%;
    }
    .img {
        width: 90%;
    }
    .img01 {
      width: 90%;  
    }
    .img02 {
        width: 100%;  
      }
    .img03 {
        width: 90%;  
      }
    .flex-items-1 {
        width: 100%;
        height: 100%;
    }
    .flex-container {
        width: 90%;
        height: 90%;    
    }
    .section_area_grid {
        margin: auto ;
    }
    
    div.figure{
        grid-template-columns: 1fr 1fr;
        width: 100%;
        height: 100%;
    }
    div.figure01{
        grid-template-columns: 1fr 1fr;
        width: 100%;
        height: 100%;
    }
    .img img {
        width: 88%;
        height: 88%;
    }
    .Anadvertisement img {
        width: 90%;
        height: 90%;
    }
    .img_logo {
    width: 95%;
    height: 95%;
    }
    .white_content1 img {
        width: 90%;
        height: 90%;
    }
    .white_content2 img {
        width: 55%;
        height: 55%;
    }
    .white_content3 img {
        width: 55%;
        height: 55%;
    }
    
    }
    
    @media only screen and (max-width: 385px) {
    .headerindex {
        width: 90%;
    }
    .header {
        width: 90%;
        height: 90%;     
    }
    .header01 {
        width: 90%;
        height: 90%;        
    }
    .header02 {
        width: 90%;
    }
    .header03 {
        width: 90%;
    }
    .img {
        width: 90%;
    }
    .img01 {
      width: 90%;  
    }
    .img02 {
        width: 100%;  
      }
    .img03 {
        width: 90%;  
      }
    .flex-items-1 {
        width: 100%;
        height: 100%;
    }
    .flex-container {
        width: 90%;
        height: 90%;    
    }
    .section_area_grid {
        margin: auto ;
    }
    
    div.figure{
        grid-template-columns: 1fr 1fr;
        width: 100%;
        height: 100%;
    }
    div.figure01{
        grid-template-columns: 1fr 1fr;
        width: 100%;
        height: 100%;
    }
    .img img {
        width: 88%;
        height: 88%;
    }
    .Anadvertisement img {
        width: 90%;
        height: 90%;
    }
    .img_logo {
    width: 95%;
    height: 95%;
    }
    .white_content1 img {
        width: 90%;
        height: 90%;
    }
    .white_content2 img {
        width: 50%;
        height: 50%;
    }
    .white_content3 img {
        width: 50%;
        height: 50%;
    }
    
    }
    
    @media only screen and (max-width: 375px) {
    .headerindex {
        width: 90%;
    }
    .header {
        width: 90%;
        height: 90%;     
    }
    .header01 {
        width: 90%;
        height: 90%;        
    }
    .header02 {
        width: 90%;
    }
    .header03 {
        width: 90%;
    }
    .img {
        width: 90%;
    }
    .img01 {
      width: 90%;  
    }
    .img02 {
        width: 100%;  
      }
    .img03 {
        width: 90%;  
      }
    .flex-items-1 {
        width: 100%;
        height: 100%;
    }
    .flex-container {
        width: 90%;
        height: 90%;    
    }
    .section_area_grid {
        margin: auto ;
    }
    
    div.figure{
        grid-template-columns: 1fr 1fr;
        width: 100%;
        height: 100%;
    }
    div.figure01{
        grid-template-columns: 1fr 1fr;
        width: 100%;
        height: 100%;
    }
    .img img {
        width: 88%;
        height: 88%;
    }
    .Anadvertisement img {
        max-width: 90%;
        max-height: 90%;
    }
    .img_logo {
    width: 95%;
    height: 95%;
    }
    }
    
    @media only screen and (max-width: 360px) {
    .headerindex {
        width: 90%;
    }
    .header {
        width: 90%;
        height: 90%;     
    }
    .header01 {
        width: 90%;
        height: 90%;        
    }
    .header02 {
        width: 90%;
    }
    .header03 {
        width: 90%;
    }
    .img {
        width: 90%;
    }
    .img01 {
      width: 90%;  
    }
    .img02 {
        width: 100%;  
      }
    .img03 {
        width: 90%;  
      }
    .flex-items-1 {
        width: 100%;
        height: 100%;
    }
    .flex-container {
        width: 90%;
        height: 90%;    
    }
    .section_area_grid {
        margin: auto ;
    }
    
    div.figure{
        grid-template-columns: 1fr 1fr;
        width: 100%;
        height: 100%;
    }
    div.figure01{
        grid-template-columns: 1fr 1fr;
        width: 100%;
        height: 100%;
    }
    .img img {
        width: 88%;
        height: 88%;
    }
    .Anadvertisement img {
        width: 90%;
        height: 90%;
    }
    .img_logo {
    width: 95%;
    height: 95%;
    }
    
    }
    
    @media only screen and (max-width: 320px) {
    .headerindex {
        width: 90%;
    }
    .header {
        width: 90%;
        height: 90%;     
    }
    .header01 {
        width: 90%;
        height: 90%;        
    }
    .header02 {
        width: 90%;
    }
    .header03 {
        width: 90%;
    }
    .img {
        width: 90%;
    }
    .img01 {
      width: 90%;  
    }
    .img02 {
        width: 100%;  
      }
    .img03 {
        width: 90%;  
      }
    .flex-items-1 {
        width: 100%;
        height: 100%;
    }
    .flex-container {
        width: 90%;
        height: 90%;    
    }
    .section_area_grid {
        margin: auto ;
    }
    
    div.figure{
        grid-template-columns: 1fr 1fr;
        width: 100%;
        height: 100%;
    }
    div.figure01{
        grid-template-columns: 1fr 1fr;
        width: 100%;
        height: 100%;
    }
    .img img {
        width: 88%;
        height: 88%;
    }
    .Anadvertisement img {
        width: 90%;
        height: 90%;
    }
    .img_logo {
    width: 95%;
    height: 95%;
    }
    
    }
    
    @media only screen and (max-width: 277px) {
    .post_title {
        -webkit-line-clamp: 1;
    }
    
    }