/* Setup */
@import url(https://old.TianTcl.net/v1/res/fonts/thsarabunnew.css);
@import url(https://old.TianTcl.net/v1/res/fonts/th_kodchasal.css);
:root {
	--top-height: 69px;
	--mid-height: calc(100% - 70.955px);
}
::-webkit-scrollbar { width: 11.5px; height: 11.5px; }
::-webkit-scrollbar-track { background: #C9F7DE; box-shadow: inset 0 0 5.06px #72907F; }
::-webkit-scrollbar-thumb { background: #A0E5C0; box-shadow: inset 0 0 5.75px #B3C5BB; }
::-webkit-scrollbar-thumb:active { background: #6EC194; }
/* Specificied */
html body {
	
}
hmtl body main {
	margin: 0px;
	width: 100%;
}
html body main header {
	position: fixed; top: 0px; left: 0px; width: 100%; height: var(--top-height); z-index: 2;
	border: none; border-bottom: 1.955px solid #ADE1CF;
	background-color: #7FCEB7;
}
html body main header div.wrapper {
	position: relative; width: inherit; height: var(--top-height);
}
html body main header div.wrapper div.divider {
	position: absolute; width: auto; height: 100%; float: left;
}
html body main header div.wrapper div.divider#sd {
	left: calc(23px + var(--top-height));
	overflow-y: auto;
}
html body main header div.wrapper div.divider#sd::-webkit-scrollbar-track { border-radius: 5.75px; }
html body main header div.wrapper div.divider#sd::-webkit-scrollbar-thumb { border-radius: 5.75px; }
html body main header div.wrapper div.divider div.button-frame {
	padding: calc((var(--top-height) - 38.15px) / 2) calc((23px - 17.25px) / 2);
	position: relative; float: left;
	transition: 0.46s;
	cursor: pointer
}
html body main header div.wrapper div.divider div.button-frame:hover {
	background-color: #89D8C1;
}
html body main header div.wrapper div.divider div.button-frame:focus {
	outline: 0px;
}
html body main header div.wrapper div.divider div.button-frame div.bar {
	margin: 5.75px 0px;
	width: 17.25px; height: 4.6px;
	background-color: #B1E7D7;
	transition: 0.69s;
}
html body main header div.wrapper div.divider div.button-frame.change div.bar.b1 {
	-webkit-transform: translate(0.46px, 10.35px) rotate(-45deg);
 	transform: translate(0.46px, 10.35px) rotate(-45deg);
}
html body main header div.wrapper div.divider div.button-frame.change div.bar.b2 {
	opacity: 0%;
}
html body main header div.wrapper div.divider div.button-frame.change div.bar.b3 {
	-webkit-transform: translate(0.46px, -10.35px) rotate(45deg);
	transform: translate(0.46px, -10.35px) rotate(45deg);
}
html body main header div.wrapper div.divider div.img-frame {
	position: relative; width: var(--top-height); height: var(--top-height); float: left;
}
html body main header div.wrapper div.divider div.img-frame a img {
	width: 100%; height: 100%;
}
html body main header div.wrapper div.divider div.head-item {
	position: relative; padding: 0px 11.5px; height: var(--top-height); float: left;
	background-color: #7FCEB7;
	transition: 0.575s;
}
html body main header div.wrapper div.divider div.head-item:hover {
	background-color: #96DFCA;
}
html body main header div.wrapper div.divider div.head-item span {
	position: relative; top: calc((69px - 55.2px) / 2);
}
html body main header div.wrapper div.divider div.head-item span a:link, html body main header div.wrapper div.divider div.head-item span a:visited {
	color: #E3F8F1;
	font-family: "THKodchasal", sans-serif; font-size: 28.75px;
	text-decoration: none;
}
html body main aside {
	padding: 17.25px 11.5px;
	position: fixed; top: calc(var(--top-height) + 1.955px); left: 0px; width: 230px; height: 345px; z-index: 2;
	background-color: #C4F7DD; display: none;
	border-right: 0.23px solid #7BB497; border-bottom: 0.23px solid #7BB497;
	overflow: hidden;
}
html body main aside div.level {
	margin: 17.25px 11.5px;
	position: absolute; top: 0px; left: 0px; width: 230px; height: 345px;
	transition: 0.46s;
}
html body main aside div.level.l2 {
	left: calc(1 * 100%);
}
html body main aside div.level.move {
	transform: translateX(calc(1 * (-230px - 23px)));
}
html body main aside div.level div.menu-button {
	padding: 0px 5.75px;
	width: calc(100% - 11.5px); height: 34.5px; float: left;
	cursor: pointer;
	transition: 0.115s;
}
html body main aside div.level div.menu-button:hover {
	background-color: #BCECD3;
}
html body main aside div.level div.menu-button span {
	position: relative; top: calc((34.5px - 44px) / 2);
	color: #04351C;
	font-family: 'THSarabunNew', sans-serif; font-size: 23px;
}
html body main section {
	padding: 11.5px;
	position: absolute; top: calc(var(--top-height) + 1.955px); left: 0px; width: calc(100% - 23px); height: calc(var(--mid-height) - 23px);
	background-color: #D8F5E5;
}
html body main footer {
	position: absolute; top: calc(var(--top-height) + 1.955px + var(--mid-height)); left: 0px; width: 100%; height: 230px;
	background-color: #BEF3E3;
}
/* Animations */