body {font-size: 22px;font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif ; 
      width:auto;margin: 0;padding: 0;height: 100%;background-color:#fff;}
      
* {box-sizing: border-box;}

.wrap1 {width:auto;margin: auto;background-color:#f1f1f1;}
.wrap2 {max-width:1200px;margin: auto;background-color:#fff;}

.wrap3 {max-width:1200px;margin: auto;background-color:#fff;}

.wrap4 {width:auto;margin: auto;background-color:#333;}
.wrap5 {max-width:1200px;margin: auto;background-color:#333;padding-left: 10px;}

.wrap6 {width:auto;margin: auto;background-color:#fff;}
.wrap7 {max-width:1200px;margin: auto;background-color:#fff;padding-left: 10px;}

.wrap8 {width:auto;margin: auto;background-color:#fff;}
.wrap9 {max-width:1200px;margin: auto;background-color:#fff;padding-left: 10px;}

/* top navbar */
.navbar {overflow: hidden;background-color: #333;position: fixed;top: 0px;width: 100%;}
.navbar a {float: left;display: block;color: #f2f2f2;text-align: left;padding: 14px 16px;text-decoration: none;font-size: 17px;}
.navbar a:hover {text-decoration: none;}

/* top navbar */
#navbar {background-color: #333;position: fixed;top: -50px;width: 100%;display: block;transition: top 0.3s;}
#navbar a {float: left;display: block;color: #f2f2f2;text-align: left;padding: 15px;text-decoration: none;font-size: 17px;}

.header {padding-top: 60px;padding-bottom: 5px;padding-left:20px;text-align: left;background-color: #fff;color: white;}

/* topnav */
.topnav {overflow: hidden;background-color:#cc2a36;  position: sticky;top: 50px;width: 100%;/* Black background with 0.5 opacity */color: #fff;}
.topnav a {float: left;display: block;color: #f2f2f2;text-align: center;padding: 10px 16px;text-decoration: none;font-size: 17px;}
.topnav a:hover {background-color:#f2f2f2;color: #333;text-decoration:none;}
.topnav a.active {background-color: #4CAF50;color: #fff;}
.topnav .icon {display: none;}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;}}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;}
    
.topnav.responsive a {float: none;display: block;text-align: left;}}

/* sidepanel */
.sidepanel  {width: 0;position: fixed;z-index: 1;height:800px;top: 0;left: 0;background-color: #333;overflow-x: hidden;transition: 0.5s;padding-top: 60px;}
.sidepanel a {padding: 16px 0px 0px 0px;font-size: 22px;color: #fff;display: block;transition: 0.3s;text-decoration: none;}
.sidepanel a:hover {color: #f1f1f1;text-decoration:underline;}
.sidepanel .closebtn {position: absolute;top: 0;right: 15px;font-size: 20px;margin-left: 50px;}

.openbtn {font-size: 20px;font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif ; 
cursor: pointer;background-color: #333;color: white;padding: 10px 15px;border: none;}
.openbtn:hover {background-color:#444;}

@media screen and (max-height: 450px) 
{.sidepanel {padding-top: 15px;}.sidepanel a {font-size:22px;}}

.line {border-bottom: 1px solid lightgray;margin-right:50px;margin-left:30px;}
.line2 {border-top: 1px solid #808080;margin: 10px;}

.con-index {max-width: 900px;margin: auto;background: white;padding: 0px;}

/* column */
.column {float: left;padding: 10px;padding-top:20px;padding-bottom: 40px;}
.left {width: 75%;}
.right {width: 25%;}

/* Clear floats after the columns */
.row:after {content: "";display: table;clear: both;}

/* Responsive layout - when the screen is less than 600px wide, make the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {.column {width: 100%;}}

/* รูปเรียง */
.pic {float: left;width: 33.33%;padding-right:5px;padding-bottom:5px;height:auto;}

/* Clearfix (clear floats) */
.row::after {content: "";clear: both;display: table;}

/* fix bar */
.fixbar {overflow: hidden;position: fixed;width: 100%;background-color: #ffffff;}

/* Collapsible */
.collapsible {border-radius:5px;background-color: gray;color: white;cursor: pointer;margin-top : 15px; margin-bottom: 50px;
              padding: 3px;width: 150px;border: 1px solid gray;text-align:center;outline: none;font-size: 13px;}
.active, .collapsible:hover {background-color: #555;}

.content {padding: 0 18px;display: none;overflow: hidden;background-color: #f1f1f1;}

/* footer */
.footer1 {height:200px;background:#333;}
.footer2 {height:auto;background:#fff;}


/******************** end ***********************/