@import url('https://fonts.googleapis.com/css2?family=Mitr:wght@200&family=Noto+Sans+Thai:wght@100;300;400&display=swap');
body {font-family: Arial, Helvetica, sans-serif;font-family: 'Noto Sans Thai', sans-serif;}

.header {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 65px;
background-color: #c03938;
color: white;
text-align: center;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  -webkit-animation-name: fadeIn; /* Fade in the background */
  -webkit-animation-duration: 0.4s;
  animation-name: fadeIn;
  animation-duration: 0.4s
}

/* Modal Content */
.modal-content {
  position: fixed;
  bottom: 0;
  background-color: #fefefe;
  width: 100%;
  -webkit-animation-name: slideIn;
  -webkit-animation-duration: 0.4s;
  animation-name: slideIn;
  animation-duration: 0.4s
}

/* The Close Button */
.close {
  color: black;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: red;
  text-decoration: none;
  cursor: pointer;
}



.modal-header {
  padding: 2px 16px;
  background-color: #f7eaf4;
  color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
  padding: 2px 16px;
  background-color: white;
  color: white;
  height:50px;
}

/* Add Animation */
@-webkit-keyframes slideIn {
  from {bottom: -300px; opacity: 0} 
  to {bottom: 0; opacity: 1}
}

@keyframes slideIn {
  from {bottom: -300px; opacity: 0}
  to {bottom: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}

@keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: white;
color: white;
text-align: center;
}  
.btn{
cursor: pointer; 
font-family:Tahoma; 
font-weight: bold;
background-color:brown;
width:120px;
padding: 8px 12px;
border: none;
/* box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.19); */
border-radius: 20px;
font-family: 'Mitr', sans-serif;
font-family: 'Noto Sans Thai', sans-serif;
color: white;
}
.sbtn{
cursor: pointer; 
font-family:Tahoma; 
font-weight: bold;
font-size: 18px;
background-color:mistyrose;
height:40px;
padding: 8px 12px;
border: none;
/* box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.19); */
border-radius: 15px;
color: black;
} 

.sbtn:focus{
cursor: pointer; 
font-family:Tahoma; 
font-weight: bold;
background-color:gray;
height:40px;
padding: 8px 12px;
border: none;
/* box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.19); */
border-radius: 15px;
color: white;
} 

.special {
background-color: gray;
color: white;
}

.container {
position: relative;
text-align: center;

}

.centered {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

table, th {
padding:4px;
}

.spkbtn {
border: none;
background-color: white;
cursor: pointer;
}


/* Style the body */
body {

margin: 0;
}



.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: white;

text-align: center;
}

/* W3.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}



h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}
.w3-serif{font-family:serif}.w3-sans-serif{font-family:sans-serif}.w3-cursive{font-family:cursive}.w3-monospace{font-family:monospace}
h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0}.w3-wide{letter-spacing:4px}
hr{border:0;border-top:1px solid #eee;margin:20px 0}
.w3-image{max-width:100%;height:auto}img{vertical-align:middle}a{color:inherit}
.w3-table,.w3-table-all{border-collapse:collapse;border-spacing:0;width:100%;display:table}.w3-table-all{border:1px solid #ccc}
.w3-bordered tr,.w3-table-all tr{border-bottom:1px solid #ddd}.w3-striped tbody tr:nth-child(even){background-color:#f1f1f1}
.w3-table-all tr:nth-child(odd){background-color:#fff}.w3-table-all tr:nth-child(even){background-color:#f1f1f1}
.w3-sidebar{height:100%;width:200px;background-color:#fff;position:fixed!important;z-index:1;overflow:auto}
.w3-bar{width:100%;overflow:hidden}.w3-center .w3-bar{display:inline-block;width:auto}
.w3-bar .w3-bar-item{padding:8px 16px;float:left;width:auto;border:none;display:block;outline:0}
.w3-bar .w3-button{white-space:normal}
.w3-bar-block .w3-bar-item{width:100%;display:block;padding:8px 16px;text-align:left;border:none;white-space:normal;float:none;outline:0}
.w3-bar-block.w3-center .w3-bar-item{text-align:center}.w3-block{display:block;width:100%}

   /* The container 
      border: 2px solid black;
      margin-bottom: 12px;
      */
      .sndoffbox {
        display: block;
        position: relative;
        padding-left: 10px;
        
        cursor: pointer;
        font-size: 20px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        
        width:170px
      }
      
      /* Hide the browser's default checkbox */
      .sndoffbox input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;

      }
      
      /* Create a custom checkbox */
      .checkmark {
        position: absolute;
        top: 0;
        right: 0;
        height: 25px;
        width: 25px;
        background-color: rgb(232, 224, 224);
        border: 2px solid black;
      }
      
      /* On mouse-over, add a grey background color */
      .sndoffbox:hover input ~ .checkmark {
        background-color: pink;
      }
      
      /* When the checkbox is checked, add a blue background */
      .sndoffbox input:checked ~ .checkmark {
        background-color: darkblue;
      }
      
      /* Create the checkmark/indicator (hidden when not checked) */
      .checkmark:after {
        content: "";
        position: absolute;
        display: none;
      }
      
      /* Show the checkmark when checked */
      .sndoffbox input:checked ~ .checkmark:after {
        display: block;
      }
      
      /* Style the checkmark/indicator */
      .sndoffbox .checkmark:after {
        right: 9px;
        top: 5px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
      }


      .qzbutton {
        border: none;
        background-color: transparent;
        border-radius: 10px;
        padding: 5px 10px;   /*세로 가로 */
        font-size: 18px;
        font-family: 'Noto Sans Thai', sans-serif;
        text-align: left;
     
      }
    
      .qzbutton1 {
        border: none;
        background-color: transparent;
        border-radius: 10px;
        padding: 5px 10px;   /*세로 가로 */
        font-size: 18px;
        font-family: 'Noto Sans Thai', sans-serif;
        text-align: left;
        color :gray;
     
      }