.bgorg{
	padding: 20px;
	position: relative;
	z-index: 4;
}
#popForm{
	width: 500px;
}
.org-content {
 font-size: 14px;
 position: relative;
}
.org-content * {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

.org-chart {
 display: block;
 clear: both;
 margin-bottom: 30px;
 position: relative;
 /**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
 /* Box colors */
 /* 1 column */
 /* 2 column */
 /* 3 column */
 /* DEPARTMENTS COLUMNs */
}
.org-chart.cf:before, .org-chart.cf:after {
 content: " ";
 /* 1 */
 display: table;
 /* 2 */
}
.org-chart.cf:after {
 clear: both;
}
.org-chart.cf {
 *zoom: 1;
}
.org-chart ul {
 padding: 0;
 margin: 0;
 list-style: none;
}
.org-chart ul li {
 position: relative;
}
.org-chart ul li span {
 display: block;
 min-height: 40px;
 text-align: center;
 overflow: hidden;
 text-decoration: none;
 font-size: 14px;
 -webkit-transition: all linear .1s;
 -moz-transition: all linear .1s;
 transition: all linear .1s;
 background-image: linear-gradient(to right, #0c6773, #22828a, #0c6773);
 color: #fff;
 font-size: 20px;
 font-weight: 300;
 padding: 16px 15px;
 position: relative;
 border-radius: .25rem!important;
 box-shadow: 4px 4px 9px -4px rgba(0,0,0,0.4);
 z-index: 1;
}
.org-chart .lvl-b {
 background: green;
 color: #000;
}
.org-chart .board {
 margin: 0 auto;
 display: block;
 position: relative;
}
.org-chart .board:before {
 content: "";
 display: block;
 position: absolute;
 width: 0px;
 border-left: 3px solid #777;
 margin-left: 50%;
 top: 15px;
 bottom: 0;
}
.org-chart .board ul li span{
 font-size: 24px;
}
.org-chart ul.columnOne {
 height: 90px;
 position: relative;
 width: 100%;
 display: block;
 clear: both;
 z-index: 1;
}
.org-chart ul.columnOne.isSub{
 height: auto;
}
.org-chart ul.columnOne li {
 width: 30%;
 margin: 0px auto;
 top: 15px;
}
.org-chart ul.columnOne.isSub > li.submain{
 margin-top: 25px;
 padding-bottom: 25px;
}
.org-chart ul.columnOne.isSub > li.submain .section span{
	background-image: linear-gradient(to right, #9db539, #b1c447, #9db539);
}
.org-chart ul.rightLevel span{
	background: #353535;
}
.org-chart ul.columnTwo {
 position: relative;
 width: 100%;
 display: block;
 height: 90px;
 clear: both;
}
.org-chart ul.columnTwo li:first-child {
 width: 30%;
 float: left;
}
.org-chart ul.columnTwo li {
 width: 30%;
 float: right;
}
.org-chart ul.columnTwo:before {
 content: "";
 display: block;
 position: relative;
 width: 80%;
 height: 10px;
 border-top: 3px solid #777;
 margin: 0 auto;
 top: 30px;
}
.org-chart ul.columnThree {
 position: relative;
 width: 100%;
 display: block;
 clear: both;
}
.org-chart ul.columnThree li:first-child {
 width: 30%;
 float: left;
 margin-left: 0;
}
.org-chart ul.columnThree li {
 width: 30%;
 margin-left: 5%;
 float: left;
}
.org-chart ul.columnThree li:last-child {
 width: 30%;
 float: right;
 margin-left: 0;
}
.org-chart ul.columnThree:before {
 content: "";
 display: block;
 position: relative;
 width: 80%;
 height: 10px;
 border-top: 3px solid #777;
 margin: 0 auto;
 top: 40px;
}
.org-chart .departments {
 width: 100%;
 display: block;
 clear: both;
}
.org-chart .departments:before {
 content: "";
 display: block;
 width: 85%;
 height: 22px;
 border-top: 3px solid #777;
 border-left: 3px solid #777;
 border-right: 3px solid #777;
 margin: 0 auto;
 top: 0px;
}
.org-chart .department {
 width: 13.2%;
 float: left;
}
.org-chart .department:after {
 content: "";
 position: absolute;
 display: block;
 width: 1px;
 height: 22px;
 border-left: 3px solid #777;
 left: 0;
 right: 0;
 top: -22px;
 margin: auto;
}
.org-chart .department:first-child:after {
 display: none;
}
.org-chart .department:last-child:after {
 display: none;
}
.org-chart .department.central {
 background: #F5EEC9;
}
.org-chart .department.central:after {
 display: none;
}
.org-chart .department span {
}
.org-chart .department li {
 padding-left: 25px;
 border-bottom: 2px solid #777;
 min-height: 58px;
 border-left: 3px solid #777;
}
.org-chart .department li.hidelink{
 border:none;
}
.org-chart .department li span {
	background-image: linear-gradient(to right, #0f5747, #26765d, #0f5747);
 color: #fff;
 top: 32px;
 position: absolute;
 z-index: 1;
 width: 94%;
 height: auto;
 vertical-align: middle;
 right: 0px;
 line-height: 14px;
}
.org-chart .department .sections {
 /*border-left: 3px solid #777;*/
 margin-left: 5px;
 margin-top: -20px;
}


/*Col1*/
.org-chart .departments.col1{
	max-width: 30%;
	margin: 0 auto;
}
.org-chart .departments.col1:before{
	display: none;
}
.org-chart .col1 .department{
	width: 100%;
}

/*Col2*/
.org-chart .departments.col2{
	max-width: 60%;
	margin: 0 auto;
}
.org-chart .departments.col2:before{
	width: 52%;
}
.org-chart .col2 .department{
	width: 50%;
	padding-right: 15px;
}

/*Col3*/
.org-chart .departments.col3{
	max-width: 100%;
	margin: 0 auto;
}
.org-chart .departments.col3:before{
	width: 65%;
}
.org-chart .col3 .department{
	width: 33.33%;
	padding-right: 15px;
}

/*Col4*/
.org-chart .departments.col4{
	max-width: 100%;
	margin: 0 auto;
}
.org-chart .departments.col4:before{
	width: 75%;
}
.org-chart .col4 .department{
	width: 25%;
	padding-right: 15px;
}

/*Col5*/
.org-chart .departments.col5{
	max-width: 100%;
	margin: 0 auto;
}
.org-chart .departments.col5:before{
	width: 80%;
}
.org-chart .col5 .department{
	width: 20%;
	padding-right: 15px;
}
.org-chart .col5 .department li span{
	padding: 12px 10px;
}

/*Col6*/
.org-chart .departments.col6{
	max-width: 100%;
	margin: 0 auto;
}
.org-chart .departments.col6:before{
	width: 85%;
}
.org-chart .col6 .department{
	width: 16.66%;
	padding-right: 5px;
}
.org-chart .col6 .department li span{
	padding: 5px 10px;
}

.responsive-content {
 width: 767px;
 margin: 0px auto;
}
.responsive-content .org-chart .board {
 margin: 0px;
 width: 100%;
}
.responsive-content .org-chart .departments:before {
 border: none;
}
.responsive-content .org-chart .department {
 float: none;
 width: 100%;
 margin-left: 0;
 background: #F5EEC9;
 margin-bottom: 40px;
}
.responsive-content .org-chart .department:before {
 content: "";
 display: block;
 position: absolute;
 width: 15px;
 height: 60px;
 border-left: 3px solid #777;
 z-index: 1;
 top: -45px;
 left: 0%;
 margin-left: -2px;
}
.responsive-content .org-chart .department:after {
 display: none;
}
.responsive-content .org-chart .department:first-child:before {
 display: none;
}




.fixposition.isPopup{
 cursor: pointer;
}
.boxorgchart.open > .fixposition.isPopup{
 z-index: 4;
 background: #cca521;
 position: relative;
}
.bglisht{
 position: fixed;
 background: rgba(0,0,0,0.8);
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 3;
 height: 0;
 -webkit-transition: all 0.4s ease;
	 -moz-transition: all 0.4s ease;
	  -ms-transition: all 0.4s ease;
		-o-transition: all 0.4s ease;
			transition: all 0.4s ease;
}
body.open .bglisht{
 height: 100%;
}
.boxorgchart .desc{
 position: absolute;
 top: 100%;
 padding: 0px 20px;
 background: #666666;
 left: -150px;
 right: -150px;
 margin-top: 0px;
 height: 0;
 text-align: left;
 overflow: hidden;
 -webkit-transition: all .25s ease;
	 -moz-transition: all .25s ease;
	  -ms-transition: all .25s ease;
		-o-transition: all .25s ease;
			transition: all .25s ease;
}
.org-chart >  ul > li:nth-child(1) .boxorgchart .desc{
 left: 0;
 right: -300px;
}
.org-chart >  ul > li:nth-child(1) .boxorgchart.open > .desc::before{
	left: 90px;
	right: auto;
}
.boxorgchart.open > .desc{
 height: auto;
 padding: 30px 25px;
 margin-top: 15px;
 overflow: inherit;
 z-index: 11;
}
.boxorgchart.open > .desc::before{
 content: '';
 position: absolute;
 left: 0;
 right: 0;
 bottom: 100%;
 margin: auto;
  width: 0px;
  height: 0px;
  border-bottom: 10px solid #666666;
  border-right: 10px solid transparent; /* ซ่อนขอบขวา */
  border-top: 10px solid transparent; /* ซ่อนขอบล่าง */
  border-left: 10px solid transparent; /* ซ่อนขอบซ้าย */
}

.clearfix:after {
	content: "";
	display: table;
	clear: both;
}

.org-chart ul.columnOne.isSub > li.submain > ul{
 padding-left: 50%;
 padding-top: 10px;
 margin-right: -50%;
}
.org-chart ul.columnOne.isSub > li.submain > ul > li:not(.ui-sortable-helper){
 width: auto;
 margin-left: 15px;
 margin-top: 10px;
 position: relative;
 top: inherit!important;
 left: inherit!important;
}
.org-chart ul.columnOne.isSub > li.submain > ul > li::before{
 content: '';
 width: 15px;
 height: 2px;
 background: #777;
 position: absolute;
 right: 100%;
 top: 50%;
}
.org-chart ul.columnOne.isSub > li.submain > ul > li span{
 min-height: auto;
 padding: 10px 15px;
 text-align: left;
}
ul.rightLevel{
 margin-top: 40px!important;
 margin-bottom: 20px;
 float: right;
 width: 30%;
 padding-right: 15px;
 position: relative;
}
ul.rightLevel li.submain{
 margin-bottom: 6px;
 margin-top: 10px;
}
ul.rightLevel li.submain:before{
 content: '';
 display: block;
 width: 15px;
 border-top: 3px solid #777;
 position: absolute;
 right: -15px;
 top: 50%;
 z-index: 1;
}
ul.rightLevel li.submain > ul.sections{
 position: absolute;
 right: 100%;
 top: 0;
 width: 100%;
 margin-right: 20px;
}
ul.rightLevel li.submain > ul.sections > li{
 margin-bottom: 10px;
}
ul.rightLevel .fntools a[data-type='addnew']{
	display: none;
}
.boxchart{
 position: relative;
}
.isRightLevel .boxchart:before{
 content: '';
 display: block;
 position: absolute;
 right: 0;
 border-right: 3px solid #777;
 top: 37px;
 bottom: 50px;
}
.isRightLevel .boxchart:after{
 content: '';
 display: block;
 position: absolute;
 border-top: 3px solid #777;
 left: 50%;
 right: 0;
 top:37px;
}
/* MEDIA QUERIES */
@media all and (max-width: 1023px) {
 .org-chart .departments.col2{
	max-width: 100%;
 }
 .org-chart ul.columnOne li{
	width: 50%;
 }
 .org-chart ul li span{
	padding: 8px 15px;
 }
 .rightMenu{
	display: none;
 }
 .leftMenu{
	width: 100%;
 }

 .boxorgchart .desc{
	left: -50px;
	right: -50px;
 }

 .boxorgchart.open > .desc{
	padding: 20px;
 }
 .org-chart ul.columnOne.isSub > li.submain > ul > li{
	width: 50%!important;
 }
}
@media all and (max-width: 767px) {
 .org-chart .department .sections{
	border-left: 3px solid #777;
 }
 .org-chart .department li{
	margin-left: -1px;
 }
 .org-chart .departments{
	padding-right: 15px;
 }
 .org-chart ul.columnOne{
	height: 75px;
 }
 .org-chart .board ul li span{
	font-size: 16px;
 }
	.bgorg{
		 padding: 10px;
	}
 .org-chart .board {
	margin: 0px;
	width: 100%;
 }
 .org-chart .departments:before {
	border: none;
	display: none;
 }
 .org-chart .department {
	float: none;
	width: 100%!important;
	margin-left: 0;
	padding-right: 0!important;
	margin-bottom: 40px;
 }
 .org-chart .department:before {
	content: "";
	display: block;
	position: absolute;
	width: 15px;
	height: 60px;
	border-left: 3px solid #777;
	z-index: 0;
	top: -45px;
	left: 0%;
	margin-left: 5px;
 }
 .org-chart .department:after {
	display: none;
 }
 .org-chart .department:first-child:before {
	display: none;
 }
 .boxorgchart .desc{
	left: 4.5vw!important;
	right: 0px!important;
 }
 .boxorgchart.open > .desc::before{
	left: 0!important;
	right: 0!important;
 }
 .org-chart ul li span{
	font-size: 16px;
 }
 .org-chart .department li span{
	font-size: 14px;
	padding: 15px 15px;
 }
 .bgorg{
	padding: 0;
 }
 .boxorgchart.open > .desc{
	padding: 15px;
 }
 .org-chart ul.columnOne.isSub > li.submain > ul > li{
	width: 80%!important;
 }
 ul.rightLevel{
	width: 90%;
 }
}

@media (max-width: 425px) {
 .org-chart .board:before{
	margin-left: 35px;
 }
 .org-chart ul.columnOne li{
	width: 100%;
 }
 .org-chart .department{
	width: 90%!important;
	margin-left: 5%;
 }
 .org-chart ul.columnOne.isSub > li.submain > ul{
	padding-left: 35px;
 }
 .org-chart ul.columnOne.isSub > li.submain > ul > li:not(.ui-sortable-helper){
	width: 50%!important;
 }
 .org-chart ul.columnOne.isSub > li.submain{
	padding-bottom: 30px;
 }
 .org-chart ul.columnOne.isSub > li.submain > ul{
	padding-top: 0;
 }
 .org-chart ul li span{
	font-size: 14px;
 }
 .boxchart{
	padding-right: 15px;
 }
 ul.rightLevel{
	padding-right: 0;
 }
}