.director{display:block; background-color:#066EBE; background-image: url(../images/bg-footer.png); background-position: left top; 
  color:white; text-align:center; border-radius:4px; padding:4px; font-size:23px; -webkit-box-shadow: 0 8px 6px -6px #c4c2c2;
       -moz-box-shadow: 0 8px 6px -6px #c4c2c2; box-shadow: 0 8px 6px -6px #c4c2c2; margin-bottom:15px; margin-top:15px;}
.director a {color:white; display:block; text-decoration:none; }
.director:hover{background-color:#3383c1; }
  
.director1{display:block; background-color:transparent; background-image: url(../images/bg-footer.png); background-position: left top; 
  color:white; text-align:center; border-radius:4px; padding:2px; font-size:23px;  margin-bottom:15px; margin-top:15px;}
.director1 a {color:white; display:block; text-decoration:none; }
.director1:hover{background-color:transparent; }

.director11{display:block;  background: rgba(6, 110, 190, 0.1); background-image: url(../images/bg_direct.png); background-position: left top; 
  color:#333333; text-align:center; border-radius:4px; padding:4px; font-size:21px; -webkit-box-shadow: 0 8px 6px -6px #c4c2c2;
       -moz-box-shadow: 0 8px 6px -6px #c4c2c2; box-shadow: 0 8px 6px -6px #c4c2c2; margin-bottom:15px; margin-top:-15px;
       position: relative; padding-top: 30px;}
.director11 a {color:#333333; display:block; text-decoration:none;}
.director11 ul {padding:0; margin:0;}
.director11 ul li {padding-left:20px; padding-top:5px; padding-bottom:3px;margin:0; list-style:none; line-height:20px; text-align:left;}
.director11::before {content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 30px; background-color: #000; transform: translateX(-50%);}
 
/* เส้นแนวนอนเชื่อมระหว่างรองอธิบดี */
.col-centered-director {
  position: relative;
  margin-top: 40px;
  padding-top: 30px;
}

.col-centered-director::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  background-color: #000;
}

/* เส้นแนวตั้งจากเส้นหลักไปยังแต่ละกล่อง */
.col-md-5::before {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  width: 2px;
  height: 30px;
  background-color: #000;
  transform: translateX(-50%);
}

.col-md-5 {
  position: relative;
}
.director2{display:block;  background-color:#b7486f; background-image: url(../images/bg-footer.png); background-position: left top; 
color:white; text-align:center; border-radius:4px; padding:4px; font-size:23px; -webkit-box-shadow: 0 8px 6px -6px #c4c2c2;
	   -moz-box-shadow: 0 8px 6px -6px #c4c2c2; box-shadow: 0 8px 6px -6px #c4c2c2; margin-bottom:15px; margin-top:15px;}
.director2 a {color:white; display:block; text-decoration:none;}
.director2:hover{background-color:#b96482; }

.director22{display:block;  background-color:rgba(161, 34, 130, 0.1); background-position: left top; 
  color:#684026; text-align:center; border-radius:4px; padding:4px; font-size:21px; -webkit-box-shadow: 0 8px 6px -6px #c4c2c2;
       -moz-box-shadow: 0 8px 6px -6px #c4c2c2; box-shadow: 0 8px 6px -6px #c4c2c2; margin-bottom:15px; margin-top:-15px;}
  .director22 a {color:#684026; display:block; text-decoration:none;}
  .director22 ul {padding:0; margin:0;}
  .director22 ul li {padding-left:20px; padding-top:5px; padding-bottom:3px;margin:0; list-style:none; line-height:20px; text-align:left;}
  
.director3{display:block;  background-color:#BE9508; background-image: url(../images/bg-footer.png); background-position: left top; 
color:white; text-align:center; border-radius:4px; padding:4px; font-size:23px; -webkit-box-shadow: 0 8px 6px -6px #c4c2c2;
	   -moz-box-shadow: 0 8px 6px -6px #c4c2c2; box-shadow: 0 8px 6px -6px #c4c2c2; margin-bottom:15px; margin-top:15px;}
.director3 a {color:white; display:block; text-decoration:none;}
.director3:hover{background-color:#b69833; }

.director33{display:block;  background: rgba(190, 149, 8, 0.1); background-position: left top; 
color:#684026; text-align:center; border-radius:4px; padding:4px; font-size:21px; -webkit-box-shadow: 0 8px 6px -6px #c4c2c2;
	   -moz-box-shadow: 0 8px 6px -6px #c4c2c2; box-shadow: 0 8px 6px -6px #c4c2c2; margin-bottom:15px; margin-top:-15px;}
.director33 a {color:#684026; display:block; text-decoration:none;}
.director33 ul {padding:0; margin:0;}
.director33 ul li {padding-left:20px; padding-top:5px; padding-bottom:3px;margin:0; list-style:none; line-height:20px; text-align:left;}

.col-centered-director {    display: -webkit-box;    display: -webkit-flex;    display: -ms-flexbox;    display: flex;    -webkit-box-pack: center;
    -webkit-justify-content: center;    -ms-flex-pack: center;    justify-content: center;    -webkit-box-align: center;    -webkit-align-items: center;
    -ms-flex-align: center;    align-items: inherit;    vertical-align: super;}

.director4{display:block;  background-color:#C18227; background-image: url(../images/bg-footer.png); background-position: left top; 
color:white; text-align:center; border-radius:4px; padding:4px; font-size:23px; -webkit-box-shadow: 0 8px 6px -6px #c4c2c2;
	   -moz-box-shadow: 0 8px 6px -6px #c4c2c2; box-shadow: 0 8px 6px -6px #c4c2c2; margin-bottom:15px; margin-top:15px;}
.director4 a {color:white; display:block; text-decoration:none;}
.director4:hover{background-color:#bb8944; }

.director44{display:block;  background: rgba(193, 130, 39, 0.1); background-position: left top; 
color:#684026; text-align:center; border-radius:4px; padding:4px; font-size:21px; -webkit-box-shadow: 0 8px 6px -6px #c4c2c2;
	   -moz-box-shadow: 0 8px 6px -6px #c4c2c2; box-shadow: 0 8px 6px -6px #c4c2c2; margin-bottom:15px; margin-top:-15px;}
.director44 a {color:#684026; display:block; text-decoration:none;}
.director44 ul {padding:0; margin:0;}
.director44 ul li {padding-left:20px; padding-top:5px; padding-bottom:3px;margin:0; list-style:none; line-height:20px; text-align:left;}

.director5{display:block;  background-color:#02b6ab; background-image: url(../images/bg-footer.png); background-position: left top; 
color:white; text-align:center; border-radius:4px; padding:4px; font-size:23px; -webkit-box-shadow: 0 8px 6px -6px #c4c2c2;
	   -moz-box-shadow: 0 8px 6px -6px #c4c2c2; box-shadow: 0 8px 6px -6px #c4c2c2; margin-bottom:15px; margin-top:15px;}
.director5 a {color:white; display:block; text-decoration:none;}
.director5:hover{background-color:#21b9af; }

.director55{display:block;  background-color:#f1fffe; background-image: url(../images/bg-footer.png); background-position: left top; 
color:#333333; text-align:center; border-radius:4px; padding:4px; font-size:21px; -webkit-box-shadow: 0 8px 6px -6px #c4c2c2;
	   -moz-box-shadow: 0 8px 6px -6px #c4c2c2; box-shadow: 0 8px 6px -6px #c4c2c2; margin-bottom:15px; margin-top:-15px;}
.director55 a {color:#333333; display:block; text-decoration:none;}
.director55 ul {padding:0; margin:0;}
.director55 ul li {padding-left:20px; padding-top:5px; padding-bottom:3px;margin:0; list-style:none; line-height:20px; text-align:left;}

.director6 {display:block;  background-color:#0FAE88; background-image: url(../images/bg-footer.png); background-position: left top; 
color:white; text-align:center; border-radius:4px; padding:4px; font-size:23px; -webkit-box-shadow: 0 8px 6px -6px #c4c2c2;
	   -moz-box-shadow: 0 8px 6px -6px #c4c2c2; box-shadow: 0 8px 6px -6px #c4c2c2; margin-bottom:15px; margin-top:15px;}
.director6 a {color:white; display:block; text-decoration:none;}
.director6:hover{background-color:#29b091; }

.director66{display:block;  background-color:rgba(15, 174, 136, 0.1); background-position: left top; 
color:#684026; text-align:center; border-radius:4px; padding:4px; font-size:21px; -webkit-box-shadow: 0 8px 6px -6px #c4c2c2;
	   -moz-box-shadow: 0 8px 6px -6px #c4c2c2; box-shadow: 0 8px 6px -6px #c4c2c2; margin-bottom:15px; margin-top:-15px;}
.director66 a {color:#684026; display:block; text-decoration:none;}
.director66 ul {padding:0; margin:0;}
.director66 ul li {padding-left:20px; padding-top:5px; padding-bottom:3px;margin:0; list-style:none; line-height:20px; text-align:left;}

.director7 {display:block;  background-color:#ac51c0; background-image: url(../images/bg-footer.png); background-position: left top; 
color:white; text-align:center; border-radius:4px; padding:4px; font-size:23px; -webkit-box-shadow: 0 8px 6px -6px #c4c2c2;
	   -moz-box-shadow: 0 8px 6px -6px #c4c2c2; box-shadow: 0 8px 6px -6px #c4c2c2; margin-bottom:15px; margin-top:15px;}
.director7 a {color:white; display:block; text-decoration:none;}
.director7:hover{background-color:#bb5bd0; }

.director77{display:block;  background-color:#faeefc; background-image: url(../images/bg-footer.png); background-position: left top; 
color:#333333; text-align:center; border-radius:4px; padding:4px; font-size:21px; -webkit-box-shadow: 0 8px 6px -6px #c4c2c2;
	   -moz-box-shadow: 0 8px 6px -6px #c4c2c2; box-shadow: 0 8px 6px -6px #c4c2c2; margin-bottom:15px; margin-top:-15px;}
.director77 a {color:#333333; display:block; text-decoration:none;}
.director77 ul {padding:0; margin:0;}
.director77 ul li {padding-left:20px; padding-top:5px; padding-bottom:3px;margin:0; list-style:none; line-height:20px; text-align:left;}
ul, #myUL {
  list-style-type: none;
}

#myUL {
  margin: 0;
  padding: 0;
}

.box {
  cursor: pointer;
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none;
}

.box::before {
  content: "\2610";
  color: black;
  display: inline-block;
  margin-right: 6px;
}

.check-box::before {
  content: "\2611"; 
  color: dodgerblue;
}

.nested {
  display: none;
}

.active {
  display: block;
}