body {
	font-family: 'Sarabun', sans-serif;
	background-color: #f5e6ff;
	background-size: cover;
	background-attachment: fixed;
	color: #0062cc;
}

 

.card-header ,.navbar .dropdown {
	font-family: 'Taviraj', serif !important;
}

.container {
	max-width: 1240px
}

.card {
	border-radius: 0;
	background: rgba(255, 255, 255, 0.95)
}

.bg-dblue {
	background-color: #6a097d !important;
	color: white;
}

.navbar-brand {
	color: white;
}

.navbar #navbarDropdown {
	color: #dbe4ef;
	text-decoration: none;
	background-color: transparent;
}

.card-footer dl,
ol,
ul {
	margin-top: 0;
	margin-bottom: 0;
}

.tab-pane a {
	color: rgba(216, 130, 7, 1)
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
	color: #ffffff;
	background-color: #9055dc;
	border-color: #dee2e6;
}

.date-stamp {
	margin-top: -20px;
	text-align: right;
	font-size: .8rem;
	color: #646464;
}

.border-dashed {
	border-bottom: #9f7ccc dashed 1px;
	margin-top: .7rem;
	margin-bottom: 5px;
}

a {
	text-decoration: none !important
}

.content-tap nav {
	background: white;
	border: 1px solid rgba(0, 0, 0, .125);
	border-bottom: none;
}

.content-tap .nav-tabs .nav-link {
	color: rgb(239, 235, 247);
	font-family: 'Taviraj', serif;
	border: white 1px solid;
	background: rgb(209, 146, 245);
	background: -moz-linear-gradient(90deg, rgba(209, 146, 245, 1) 0%, rgba(188, 103, 236, 1) 46%);
	background: -webkit-linear-gradient(90deg, rgba(209, 146, 245, 1) 0%, rgba(188, 103, 236, 1) 46%);
	background: -webkit-gradient(linear, 0 100%, 0 0, from(rgba(209, 146, 245, 1)), color-stop(0.46, rgba(188, 103, 236, 1)));
	background: -o-linear-gradient(90deg, rgba(209, 146, 245, 1) 0%, rgba(188, 103, 236, 1) 46%);
	background: linear-gradient(90deg, rgba(209, 146, 245, 1) 0%, rgba(188, 103, 236, 1) 46%);
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
	color: #ffffff;
	background: rgb(192, 108, 241);
	background: linear-gradient(270deg, rgba(192, 108, 241, 1) 0%, rgba(161, 40, 231, 1) 46%, rgba(149, 0, 235, 1) 83%);
	font-family: 'Taviraj', serif;
	transform: scale(1.1);
}

.card-header {
	padding: .75rem 1.25rem;
	margin-bottom: 0;
	background-color: rgb(120, 61, 197);
	border-bottom: 1px solid rgb(80, 0, 185);
	color: white;
}

a {
	color: #000000;
	text-decoration: none;
	background-color: transparent;
}

.w-80 {
	width: 80%
}

.w-60 {
	width: 60%
}

.h6,
h6 {
	font-size: .9rem;
}

h6 p {
	margin-bottom: 0;
}

.color-orange {
	color: rgba(216, 130, 7, 1);
}

.card-header:first-child {
	border-radius: 0 !important;
}

.col-sm-2 a {
	color: #8F02CD;
	font-weight: 400;
}

.ch-h5 {
	font-size: 18px !important;
}

#tab01,
#tab02,
#tab03,
#tab04,
#tab05,
#slider {
	margin-bottom: 1rem
}

.btn {
	border-radius: 0
}

.nav-tabs .nav-link {
	border: 1px solid transparent;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.img-new {
	height: 10px
}

 @media screen and (min-width:992px) {
	body {

		line-height: 1.9;

		font-size: .95rem;

	}

	.card-header {

		line-height: 1.5;
	}

	.left-menu-mobile {
		display: none !important
	}

	.left-menu-pc {
		display: block !important
	}

	.right-menu {
		padding-left: 0
	}

	.navbar-brand {
		display: inline-block;
		padding-top: .3125rem;
		padding-bottom: .3125rem;
		margin-right: 1rem;
		font-size: 1.2rem;
		line-height: inherit;
		white-space: nowrap;
	}

	#app {
		margin-top: 1rem
	}

	.main-name-th {
		margin-top: 1.7rem;
		color: #7530d0;
		font-weight: 600;
		font-size: 1.45rem;
	}

	.main-name-en {
		margin-top: .2rem;
		color: #AFAFAF;
		font-weight: 300;
		font-size: 1.2rem;
	}

	.d-p-logo {
		padding: 1.5rem
	}

	.d-p-text {
		padding: 0;
		margin-left: -1.5rem
	}

	.d-p-facebook {
		padding: 1.5rem
	}

	.btn-link-all {
		text-align: right;
		margin-right: -5px;
		margin-bottom: -5px;
		margin-top: -15px
	}
}

@media screen and (max-width:991px) {

	body {

		line-height: 1.6;
		font-size: .85rem;

	}

	.card-header {
		line-height: 1.3;
		font-size: .85rem;
	}

	.left-menu-mobile {
		display: none !important
	}

	.left-menu-pc {
		display: block !important
	}

	.right-menu {
		padding-left: 0
	}

	.row {
		margin-right: 0
	}

	.right-menu {
		padding-right: 0px !important;
	}

	.right-menu {
		padding-left: 0
	}

	.main-name-th {
		margin-top: 1.7rem;
		color: #7530d0;
		font-weight: 600;
		font-size: 1.35rem;
	}

	.main-name-en {
		margin-top: .2rem;
		color: #AFAFAF;
		font-weight: 300;
		font-size: 1.1rem;
	}

	.w-60 {
		width: 100%
	}

	.d-p-logo {
		padding: 1rem
	}

	.d-p-text {
		padding: 0
	}

	.d-p-facebook {
		padding: 1rem
	}

	.navbar-brand {
		display: inline-block;
		padding-top: .3125rem;
		padding-bottom: .3125rem;
		margin-right: 1rem;
		font-size: 1.2rem;
		line-height: inherit;
		white-space: nowrap;
	}

	.col-1 {
		padding: 5px;
	}

	.card-header {
		padding: 10px
	}

	.container {
		padding: 0
	}

	#app {
		margin-top: 0
	}

	.row {
		margin-right: 0
	}

	.btn-link-all {
		text-align: right;
		margin-top: -15px
	}
}

@media screen and (max-width:767px) {
	body {

		line-height: 1.6;
		font-size: .75rem;

	}

	.card-header {
		line-height: 1.3;
		font-size: .85rem;
	}

	.left-menu-mobile {
		display: none !important
	}

	.left-menu-pc {
		display: block !important
	}

	.right-menu {
		padding-left: 0
	}

	.row {
		margin-right: 0
	}

	.right-menu {
		padding-right: 0px !important;
	}

	.right-menu {
		padding-left: 0
	}

	.main-name-th {
		margin-top: 1.0rem;
		color: #7530d0;
		font-weight: 600;
		font-size: 1.2rem;
	}

	.main-name-en {
		margin-top: .2rem;
		color: #AFAFAF;
		font-weight: 300;
		font-size: .9rem;
	}

	.w-60 {
		width: 100%
	}

	.d-p-logo {
		padding: 1rem
	}

	.d-p-text {
		padding: 0
	}

	.d-p-facebook {
		padding: 1rem
	}

	.navbar-brand {
		display: inline-block;
		padding-top: .3125rem;
		padding-bottom: .3125rem;
		margin-right: 1rem;
		font-size: 1.2rem;
		line-height: inherit;
		white-space: nowrap;
	}

	.col-1 {
		padding: 5px;
	}

	.card-header {
		padding: 10px
	}

	.container {
		padding: 0
	}

	#app {
		margin-top: 0
	}

	.row {
		margin-right: 0
	}

	.btn-link-all {
		text-align: right;
		margin-top: -15px
	}
}

@media (max-width:575px) {
	.left-menu-mobile {
		display: block !important
	}

	.left-menu-pc {
		display: none !important
	}

	.row {
		margin-right: 0
	}

	.right-menu {
		padding-right: 0px !important;
	}

	.w-60 {
		width: 100%
	}

	.main-name-th {
		margin-top: .7rem;
		margin-bottom: -.4rem;
		color: #7530d0;
		font-weight: 600;
		font-size: 1.25rem;
	}

	.main-name-en {

		color: #AFAFAF;
		font-weight: 300;
		font-size: .85rem;
	}

	.no-mobile {
		display: none
	}

	.d-p-logo {
		padding-top: .5rem;
		padding-bottom: .5rem
	}

	.d-p-facebook {
		padding: 1rem;
		padding-left: 0;
	}

	.navbar-brand {
		display: inline-block;
		padding-top: .3125rem;
		padding-bottom: .3125rem;
		margin-right: 1rem;
		font-size: 1.0rem;
		line-height: inherit;
		white-space: nowrap;
	}

	.col-1 {
		padding: 5px;
		padding-right: 0
	}
}

@media screen and (max-width:450px) {
	.left-menu-mobile {
		display: block !important;
		padding-right: 0
	}

	.left-menu-pc {
		display: none !important
	}

	.row {
		margin-right: 0
	}

	.right-menu {
		padding-right: 0 !important;
		padding-left: 15px;
	}

	.w-60 {
		width: 100%
	}

	.main-name-th {
		margin-top: .9rem;
		margin-bottom: -.4rem;
		color: #7530d0;
		font-weight: 600;
		font-size: .82rem;
	}

	.main-name-en {

		color: #AFAFAF;
		font-weight: 300;
		font-size: .55rem;
	}

	.no-mobile {
		display: none
	}

	.d-p-text {
		padding: .2rem
	}

	.d-p-logo {
		padding-top: .5rem;
		padding-bottom: .5rem;
		padding-left: .3rem;
		padding-right: .3rem;
	}

	.d-p-facebook {
		padding: 1rem;
		padding-left: 0;
	}

	.navbar-brand {
		display: inline-block;
		padding-top: .3125rem;
		padding-bottom: .3125rem;
		margin-right: 1rem;
		font-size: 1.0rem;
		line-height: inherit;
		white-space: nowrap;
	}

	.col-1 {
		padding: 5px;
		padding-right: 0
	}

	.mobile-pad {
		padding: 5px
	}

	.m-content {
		padding-right: 0
	}

	.card-body {

		padding: 1.25rem;
		padding-right: .5rem;
	}
}






.navbar-toggler {
	border: 1px solid white !important;
}

.left-menu-pc li,
.left-menu-mobile li,
.right-menu li {
	list-style-type: none;
	border-bottom: #d8d8d8 1px dashed;
}



.parallelogram {
	width: 100%;
	height: 60px;
	transform: skew(20deg);
	background: #6a097d;
	margin-left: -.8rem;
	padding-top: 10px;
	padding-left: 10px;
	margin-bottom: 3px;
}

.parallelogram-text {
	transform: skew(340deg);
	font-size: 16px;
	font-weight: bold;
	color: white;
	line-height: 20px;
}

.arrow-purple,
.arrow-purple2,
.arrow-purple3 {
	width: 100%;
	height: 40px;
	position: relative;
	background: #95389e;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	color: white;
	padding-top: .3rem;
	margin-bottom: 3px;
	padding-right: 3px;
}

.arrow-purple:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 0;

	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;

}

.arrow-purple:before {
	content: "";
	position: absolute;
	left: -20px;
	bottom: 0;
	width: 0;
	height: 0;
	border-right: 20px solid #95389e;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;


}

.arrow-purple2 {

	height: 66px;


}

.arrow-purple2:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 0;

	border-top: 33px solid transparent;
	border-bottom: 33px solid transparent;

}

.arrow-purple2:before {
	content: "";
	position: absolute;
	left: -20px;
	bottom: 0;
	width: 0;
	height: 0;
	border-right: 20px solid #95389e;
	border-top: 33px solid transparent;
	border-bottom: 33px solid transparent;
	height: 66px;
}

.arrow-purple3 {

	height: 100px;


}

.arrow-purple3:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 0;

	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;

}

.arrow-purple3:before {
	content: "";
	position: absolute;
	left: -20px;
	bottom: 0;
	width: 0;
	height: 0;
	border-right: 20px solid #95389e;
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
	height: 10px;
}

.menu-img {
	opacity: 1.0;
	filter: alpha(opacity=100);
}

.menu-img:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
}

.sub-menu-img {
	opacity: 1.0;
	filter: alpha(opacity=100);
}

.sub-menu-img:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	transform: scale(1.1);
}

.left_menu_icon {
	margin-bottom: 3px;
}

.img-zoom:hover {
	transform: scale(1.1);
}


 

.main-name-th {
	text-shadow: -2px -2px 2px #FFFFFF, 2px 2px 2px #FFFFFF;
}

.main-name-en {
	text-shadow: -1px -1px 1px #FFFFFF, 1px 1px 1px #FFFFFF;
	color: #1A1A1A;
}

.chat-btn {
	position: fixed;
	bottom: 80px;
	right: 0;
	border: 5px solid rgba(255, 255, 255, .09);
}

#chatbox {
	position: fixed;
	bottom: 80px;
	right: 0;
}