@font-face {
    font-family: 'Sarabun';
    src: url('"../fonts/Sarabun-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: nomal;
}
.cj-mh-width {
	max-width: 1400px; /*ตั้งค่าความกว้างเมนูหลัก*/
	margin: 0 auto;
}

nav {
	position: relative;
	width: 100%;
    /*background-color: #f8f8f8;*/ /*สีพื้นหลังเมนูหลัก ถ้าไม่ใช้รูปพื้นหลังก็ใช้สีแทน*/
	background-image: /*รูปพื้นหลังเมนูหลัก ตามตัวอย่างนี้ กว้าง 1400px สูง 84px*/
	background-repeat: no-repeat;
    display: flex;
	flex-wrap: nowrap;
    justify-content: space-between;
	justify-content: center;
	z-index: 999;
}
nav ul {
    height: 60px; /*ความสูงเมนูหลัก*/
    display: flex;
    justify-content: flex-start;
	align-items: center;
    margin: 0;
	z-index: 999;
}
nav a {
    text-decoration: none;
    color: #777; /*สีฟอนต์*/
    padding: 15px; 
	font-size: 18px; /*ขนาดฟอนต์*/
	font-family: "Sarabun", serif;
	z-index: 999;
}
nav a:hover {
    color: #000; /*สีฟอนต์เมื่อเม้าส์ชี้*/
}
.cj-logo a {
    /*font-size: 22px;*/ /*ขนาดฟอนต์เมนู "หน้าแรก"*/
}
nav ul {
    list-style: none;
	margin-left: -20px;
	margin-right: 20px;
	z-index: 999;
}

ul.cj-drop-menu11, ul.cj-drop-menu22, ul.cj-drop-menu33, ul.cj-drop-menu44, ul.cj-drop-menu55, ul.cj-drop-menu66 {
	background-image: url(../images/mhbg.png); /*รูปพื้นหลังเมนูย่อย ตามตัวอย่างนี้ กว้าง 1400px สูง 350px*/
	background-repeat: no-repeat;
	background-size: cover;
	display: none;
}
ul.cj-drop-menu11 li, ul.cj-drop-menu22 li, ul.cj-drop-menu33 li, ul.cj-drop-menu44 li, ul.cj-drop-menu55 li, ul.cj-drop-menu66 li {
    display: none;
    list-style: none;
	/*background-color: #fff;*/
}
ul.cj-drop-menu11 li div, ul.cj-drop-menu22 li div, ul.cj-drop-menu33 li div, ul.cj-drop-menu44 li div, ul.cj-drop-menu55 li div, ul.cj-drop-menu66 li div { 
    padding-left: 10px;
	padding-right: 10px;
}
li.cj-drop-menu1:hover > ul.cj-drop-menu11, li.cj-drop-menu2:hover > ul.cj-drop-menu22, li.cj-drop-menu3:hover > ul.cj-drop-menu33, li.cj-drop-menu4:hover > ul.cj-drop-menu44, li.cj-drop-menu5:hover > ul.cj-drop-menu55, li.cj-drop-menu6:hover > ul.cj-drop-menu66 {
	position: absolute;
    display: flex;
	overflow: hidden;
	z-index: 999;
    left: 0;
	top: 20px; /*ตำแหน่งบนสุดของเมนูย่อย*/
	margin: 0;
	padding: 0;
	margin-top: 20px;
	width: 100%;
	height: 350px;/*ความสูงของเมนูย่อย*/
	align-items: normal;
	/*background-color: #fff;*/
	border-style: solid;
    border-width: 5px 0 15px 0; /*ความสูงของขอบบนและขอบล่างเมนูย่อย*/
	border-top-color: #fff; /*สีของขอบบนเมนูย่อย*/
	border-top-left-radius: 5px; /*ตั้งค่าความโค้งของขอบบนซ้าย*/
	border-top-right-radius: 5px; /*ตั้งค่าความโค้งของขอบบนขวา*/
    border-bottom-color: #65b8d8; /*สีของขอบล่างเมนูย่อย*/
	border-bottom-left-radius: 40% 15px; /*ตั้งค่าความโค้งของขอบล่างซ้าย*/
	border-bottom-right-radius: 40% 15px; /*ตั้งค่าความโค้งของขอบล่างขวา*/
	transition: all ease-in-out .5s; /*เอฟเฟคเมนูย่อยเลื่อนช้าๆ ถ้าไม่ต้องการก็ปิดไว้*/
}
li.cj-drop-menu1:hover > ul.cj-drop-menu11 li, li.cj-drop-menu2:hover > ul.cj-drop-menu22 li, li.cj-drop-menu3:hover > ul.cj-drop-menu33 li, li.cj-drop-menu4:hover > ul.cj-drop-menu44 li, li.cj-drop-menu5:hover > ul.cj-drop-menu55 li, li.cj-drop-menu6:hover > ul.cj-drop-menu66 li {
    display: flex;
	flex: 1;
	z-index: 999;
	/*background-color: #fff;*/
	margin-right: -20px;
	align-items: normal;
}
li.cj-drop-menu1 > ul.cj-drop-menu11, li.cj-drop-menu2 > ul.cj-drop-menu22, li.cj-drop-menu3 > ul.cj-drop-menu33, li.cj-drop-menu4 > ul.cj-drop-menu44, li.cj-drop-menu5 > ul.cj-drop-menu55, li.cj-drop-menu6 > ul.cj-drop-menu66 {
    position: absolute;
    display: flex;
	z-index: 999;
    left: 0;
    top: 100%;
	margin: 0;
	padding: 0;
	align-items: normal;
}
.cj-drop-menu11 > .cj-dropdown-sub11, .cj-drop-menu22 > .cj-dropdown-sub22, .cj-drop-menu33 > .cj-dropdown-sub33, .cj-drop-menu44 > .cj-dropdown-sub44, .cj-drop-menu55 > .cj-dropdown-sub55, .cj-drop-menu66 > .cj-dropdown-sub66 {
	top: 0;
	left: 0;
    display: none;
    z-index: 999;
	flex-wrap: nowrap;
    flex-direction: column; /* or row */
	align-items: normal;
}

.cj-mhead {
	 /*font-size: 22px;*/ /*ขนาดฟอนต์เมนูหลัก กรณีไม่ใช้เมนูเป็นรูป ใช้เมนูเป็นตัวหนังสือ*/
}
.cj-smenu {
	vertical-align: top;
	text-align: left;
	width: 94%;
}
.cj-smenu-a {
	line-height: 1.6; /*ความกว้างระหว่าแถวของฟอนต์เมนูย่อย*/
	padding-left: 0;
}
.cj-circle {
	width: 8%;
	vertical-align: top;
	text-align: right;
	padding-right: 10px;
}
/*เมนูย่อยไหนมีเยอะ เพิ่มโค้ดให้เมนูเลื่อนตามสกอล์เมาส์*/
li.cj-drop-menu3:hover > ul.cj-drop-menu33, li.cj-drop-menu4:hover > ul.cj-drop-menu44 { 
	margin-left: 0;
	overflow: auto;
	overflow-y: scroll;
	overflow-x: hidden;
	/*background-color: #fff;*/
	scrollbar-color: #336600 lightblue; /*สีสกอล์บาร์*/
}