




/*-------------------ตำแหน่งของ Chat ไอคอน------------------------------------------------------------*/
_smartsupp.offsetX = 120; // move along the X axis by 100 pixels
_smartsupp.offsetY = 400; // move along the Y axis by 100 pixels

/*---------------------- ขนาดของ logo --------------------------------------------------------*/

/* edit: templates/ja_purity_iv/css/template.css   */
/* บรรทัดที่ 1977                              */
/*  .col-xxl-2 {                            */
/*  -webkit-box-flex: 0;                    */
/*      -ms-flex: 0 0 auto;                 */
/*          flex: 0 0 auto;                 */
/*  width: 16.66666667% ;   <== แก้เป็น 28%   */
/* }                                        */



.topbar-l .nav-item + .nav-item {
    border-left: 2px solid #AA1424;
}

.topbar-l .nav-item {
    padding: 0 10px;
}


.alert-dismissible {
    padding-right: 0rem;
}



.item-page .article-body {
    display: inline-block;
    margin-top: 0;
    width: 100%;
}



.banneritem {
    padding-bottom: 30px;
}

 
  .mt-lg-5 {
    margin-top: 0rem !important;
  }
  .mb-lg-5 {
    margin-bottom: 1rem !important;
  }


/* Custom Styling */

.page-header h2, .page-header .h2, .categories-list h2, .categories-list .h2 {
    font-size: var(--h4-font-size);
}

/* ปรับปุ่ม อ่านเพิ่มเติม ให้ชิดขวา */

p.readmore .btn, p.readmore .blog-list .item-readmore a, .blog-list .item-readmore p.readmore a {
    float: right;
}

/* คณะอนุกรรมการ... => ขนาด font ชื่อเรื่อง */
h6, customheading .h6 {
    font-size: var(--h3-font-size);
}

/* ใส่รูปตา */ 
.article-info .author-img, .article-info .fa.fa-eye, .article-info .fa.fa-calendar, .article-info .fa.fa-folder {
    display: inline;
}

/*-------------------------------------------------------------------------------*/
/*--------- ข้อย่อย 1.
				     1.
                        1. ---- แบบที่ 1 ----*/

/**
 * Nested numbered list with correct indentation.
 *
 * Tested on Firefox 32, Chromium 37, IE 9 and Android Browser. Doesn't work on IE 7 and previous.
 * Source: https://gist.github.com/jirutka/32049196ab75547b7f47
 */

ol.a {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol.a > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

ol.a > li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;    
}

li ol.a > li {
  margin: 0;
}

li ol.a > li:before {
  content: counters(item, ".") " ";
}
/*
ol.a > li.parent:before {
  content: "";
  position: absolute;
}*/


/*-------------------------------------------------------------------------------*/
/*--------- ข้อย่อย 1. ....
				     1. ....
                        1. ....    ---- แบบที่ 2 ----*/

/*
ol.a {
  list-style-type: none;
  counter-reset: section;
  margin: 0;
  padding: 0;
}

ol.a > li {
  display: table;
  counter-increment: section;
  margin-bottom: 0.6em;
}

ol.a > li:before {
  content: counters(section, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;    
}

li ol.a > li {
  margin: 0;
}

li ol.a > li:before {
  content: counters(section, ".") " ";
}
*/

/*-------------------------------------------------------------------------------*/
/*--------- ข้อย่อย 1. ....
				      1.1 ....
						   1.1.1 ....  ---- แบบที่ 3 ----*/

/*
ol.c {
  list-style-type: none;
  counter-reset: css-counters 0;
}  
 intializes counter, set -1 for zero-based counters 


ol.c li:before {
  counter-increment: css-counters;
  content: counters(css-counters, ".") " "; 
}   */
/* generates inherited counters from parents */


/*-------------------------------------------------------------------------------*/
/*--------- ข้อย่อย 1. ....
				     1) ....
				   	 2) ....      ----------------*/

/**
 * Ordered list (HTML) lower-alpha with right parentheses?
 *
 * Source: http://stackoverflow.com/questions/1632005/ordered-list-html-lower-alpha-with-right-parentheses
 */
ol.b {
    counter-reset: list;
  	margin: 0;
  	padding: 0;
}
ol.b > li {
  	display: table;
    list-style: none;
    position: relative;
}
ol.b > li:before {
    counter-increment: list;
    content: counter(list) ") ";
  	display: table-cell;
	padding-right: 0.6em;
}

/*-------------------------------------------------------------------------------*/
/*--------- ข้อย่อย (1) ....
				  (2) ....
				  (3) ....      ----------------*/

ol.parenthesis {
  counter-reset: list;
  margin: 0;
  padding: 0;
}
ol.parenthesis > li {
  display: table;
  list-style: none;
  position: relative;
}
ol.parenthesis > li:before {
  content: "(" counter(list) ") ";
  counter-increment: list;
  padding-right: 0.6em;
  display: table-cell;
}


/*-------------------------------------------------------------------------------*/
/* ---------- bullet แบบ hyphen	-  
								 - 
								 -     ---------- */
ul.dash {
    list-style: none;
    margin-left: 0;
}

ul.dash > li:before {
    display: inline-block;
    content: "-";
    width: 1em;
    margin-left: -1em;
}



/* ------------------------------ */

.features-intro.style-1 li strong {
    background-color: #909090;
    border-radius: 50%;
    color: #fff;
    font-size: 24px;
    display: block;
    height: 48px;
    line-height: 51px !important;
    position: absolute;
    top: 6px;
    left: 0;
    text-align: center;
    width: 48px;
}

.features-intro.style-1 li {
    margin-bottom: 36px;
    padding-left: 72px;
    position: relative;
    padding-top: 15px;
    list-style: none;
}

.features-intro.style-1 li .line-icon {
    background: #e0e0e0;
    display: block;
    width: 1px;
    height: 100%;
    position: absolute;
    top: 54px;
    left: 23px;
}

/*---------------------------------------------*/ 
 
 
 
 
 .brmedium { 
            display: block; 
            margin-bottom: 1em; 
        } 





.navbar-brand.logo-control img.logo-img {

    max-height: 60px;
}


/*--------------------------------------------------*/
/*------------------- org chart  -------------------*/
/*--------------------------------------------------*/

/* Varaibles - config */
/* SCSS */
/*body {
	background: #f4f5f8;
}*/

/*.content {
	font-family: Verdana;
  	font-size: 14px;
  	position: relative;
}*/

.content * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.org-chart {
  display: block;
  clear: both;
  margin-bottom: 100px;
  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-left: 10px;   */
  padding-left: 5px;
    padding-right: 3px;
  list-style: none;
}
.org-chart ul li {
  position: relative;
}
.org-chart ul li span {
  display: block;
/*border: 3px solid #dcdcdc;   */
  text-align: center;
  overflow: hidden;
  text-decoration: none;
  color: #252525;
  font-size: 13px;
  box-shadow: 4px 4px 9px -4px rgba(0, 0, 0, 0.4);
  -webkit-transition: all linear 0.1s;
  -moz-transition: all linear 0.1s;
  transition: all linear 0.1s;
  background: #fff;
}
.org-chart .lvl-b {
  background: #003d5b;
  color: #fff;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 5px;
  padding-right: 5px;
  position: relative;
  z-index: 99;
}
.org-chart .board {
  width: 60%;                           /* ความกว้างกล่องผู้บริหาร */
  margin: 0 auto;
  display: block;
  position: relative;
}
.org-chart .board:before {
  content: "";
  display: block;
  position: absolute;
  height: 28.7em;						/* ความยาวเส้นโยงกึ่งกลาง เดิม 455px */
  width: 0px;
  border-left: 1.5px solid #dcdcdc;
  margin-left: 50%;           			/* ตำแหน่งเส้นโยงกึ่งกลาง (กลาง box) */
  top: 90px;
}
.org-chart ul.columnOne {
  height: 90px;
  position: relative;
  width: 100%;
  display: block;
  clear: both;
}
.org-chart ul.columnOne li {
  width: 30%;
  margin: 0px auto;
  clear: both;
  top: 20px;
}
.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: 50%;
  height: 10px;
  border-top: 1.5px solid #dcdcdc;
  margin: 0 auto;
  top: 45px;					/* ระดับของเส้นโยงแนวนอนของ ColumnTwo  */
}
.org-chart ul.columnThree {
  position: relative;
  width: 100%;
  height: 90px;
  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: left;
  margin-left: 0;
}
.org-chart ul.columnThree:before {
  content: "";
  display: block;
  position: relative;
  width: 50%;
  height: 10px;
  border-top: 1.5px solid #dcdcdc;
  margin: 0px 3.125em 0px 0px;
  top: 42px;
}

/*--------------------------------------------------------*/

.org-chart .departments {
/*  width: 100%;*/
  display: block;
  clear: both; 
}
.org-chart .departments:before {
  content: "";
  display: block;
  position: relative;					/* <== เพิ่ม ==		*/
  width: 82%;           				/* ปลายเส้นโยงซ้าย-ขวา */
  height: 42px;
  border-top: 1.5px solid #dcdcdc;
  border-left: 1.5px solid #dcdcdc;
  border-right: 1.5px solid #dcdcdc;
/*margin: 0 auto;   */
  top: 20px;
  margin-left: 7%;					/* <== เพิ่ม ==		*/
  margin-right: auto;					/* <== เพิ่ม ==		*/
}

/*--------------------------------------------------------*/

.org-chart .department {
/*border: 2px solid #dcdcdc; */			/* <= เอาออก  */
  width: 13%;   						/* ขนาดกล่องกอง 7 กอง */
  float: left;
  margin: 1px 4px;			/* ระยะห่างของ ColumnTwo กับกล่อง Department */
}
.org-chart .department:after {
  content: "";
  position: absolute;
  display: block;
  width: 10px;
  height: 22px;
  border-left: 1.5px solid #dcdcdc;
  left: 50%;
  top: -22px;
}
.org-chart .department:first-child:after {
  display: none;
}
.org-chart .department:last-child:after {
  display: none;
}
.org-chart .department.central {
  background: #f4f5f8;
}
.org-chart .department.central:after {
  display: none;
}
.org-chart .department span {
/*border-left: 1px solid #dcdcdc; */	/* เอาออกเพื่อให้กล่องกองมีเส้นขอบเทาด้านซ้าย   */
}


.org-chart .department li {				/* เส้นเชื่อมกล่อง */
/*padding-left: 25px;*/
  border-bottom: 1.5px solid #dcdcdc;
  border-left: 1.5px solid #dcdcdc;   /* เพิ่ม code สร้างเส้นเชื่อมกล่องกลุ่มงาน */
  height: 80px;							/* เดิม 80px */
  margin-left: 5px;					    /* เพิ่ม code กล่องกลุ่มงานเยื้องมาทางขวา */
  z-index: 1;							/* เพิ่ม code ให้เส้นโยงไม่ทับเหนือกล่อง  */
}
.org-chart .department li span {		/* กล่องกลุ่มงาน */
  background: #fff;
  top: 70%;								/* เดิม 38px */
  position: absolute;
  z-index: 1;
  width: 95%;							/* ขนาด เดิม 95% */
/*height: 4em;	*/						/* เดิม auto */
  vertical-align: middle;
  right: 0px;
  line-height: 14px;
/*border: 3px solid #dcdcdc;			*/
  padding-top: 20px;					/* ข้อความในกล่อง */
  padding-bottom: 20px;
  padding-left: 5px;
  padding-right: 5px;
}
.org-chart .department .sections {
  margin-top: -20px;
}






/*--------------------------------------------------------*/

/* MEDIA QUERIES */
@media all and (max-width: 767px) {
  .org-chart .board {
    margin: 0px;
    width: 100%;
    font-size: 90%;
    padding-left: 10px;
    padding-right: 10px;
    display: block;
    position: relative;
}

.org-chart ul.columnOne li {
    width: 40%;
    top: 20px;
/*    margin: 0px auto;  */
}

.org-chart .board:before {
  	width: 47%;
  	border-right: 1.5px solid #dcdcdc;
    border-left: none;
	border-bottom: 1.5px solid #dcdcdc;
  	margin-left: 7px;   /* เดิม 1% */
    height: 90%;
    top: 80px;
}



.org-chart ul.columnOne li {
    float: left;
    left: 32%;
}

.org-chart ul.columnTwo li:first-child {
    width: 40%;
    float: left;
}

.org-chart ul.columnTwo li {
    width: 40%;
    float: right;
}

.org-chart ul.columnThree li:first-child {
    width: 40%;
    float: left;
}

.org-chart .department .sections {
    border-top: 1.5px solid #dcdcdc;
	position: relative;
    margin-top: -35px;
/*    z-index: 9;   */
}


  
.org-chart .department li {
    /*  height:60px;  */
        /* padding-left: 25px; */
    border-bottom: 1.5px solid #dcdcdc;
    border-left: 1.5px solid #dcdcdc;
   /* height: 80px;*/
    margin-left: 5px;
    z-index: 1;
    padding-left: 25px;
}
  
.org-chart .department li span {	/* กล่องกลุ่มงาน */
 	width: 85%;						/* ขนาด เดิม 95% */		
 	left: 15%;		
  	line-height: 14px;
 /*	margin-left: 20px;*/
    margin-right: 20px;	
    padding-left: 10px; 
    padding-right: 10px;
}



.org-chart .departments:before {
    border: none;
}
.org-chart .department {
    float: none;
    width: 85%;
    margin-left: 40px;		  
/*  background: #f4f5f8;  */
    margin-bottom: 50px;
}



  .org-chart .department:before {
    content: "";
    display: block;
    position: absolute;
    width: 14px;
    height: 520px;					/* เดิม 60px */
    border-left: 1.5px solid #dcdcdc;
    z-index: 1;
    top: -500px;					/* เดิม -45px */
    left: 0%;
    margin-left: -28px;
  }

  .org-chart .department:after {
    display: none;
  }
  .org-chart .department:first-child:before {
    display: none;
  }
}

------------------------------------------------
@media (min-width: 992px)
.custom .mb-lg-5 {
    margin-bottom: 0rem !important;
}
.custom .mb-4, .blog-list .item-image {
    margin-bottom: 0.5rem !important;
}
.custom .col-lg-6 {
    width: 100%;
}
.custom h4, .h4 {
    font-size: 1.6rem;
}
------------------------------------------------
figure[data-wf-figure] {
    display: block !important;
}