/*animate*/
@keyframes swing {
	0% { transform: rotate(0); }
	20% { transform: rotate(30deg); }
	60% { transform: rotate(-15deg); }
	100% { transform: rotate(0); }
}
.oneTimeSwing {
	animation-name: swing;
	animation-duration: 2s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
}
@keyframes loopScale {
	0% { transform: scale(1) }
	60% { transform: scale(1) }
	80% { transform: scale(1.5) }
	100% { transform: scale(1) }
}
.loopScale {
	animation-name: loopScale;
	animation-duration: 3s;
	animation-iteration-count: infinite;
}
/*body*/
body {
	background: rgb(220,220,220);
	background: url("image/bg.png");
	background-attachment: fixed;
	padding-top: 80px;
	font-family: Arial, Helvetica, sans-serif;
	transition: all 1s;
}
@media (max-height: 479px) {
	body {
		padding-top: 0;
	}
}
.lang.english:not(.topic) {
	font-size: 14px;
}
.lang.thai:not(.topic) {
	font-size: 16px;
}
.langGlobal {
	font-size: 14px;
}
/*layerLoading*/
.layerLoading {
	background: rgb(0,19,44);
}
.iconLoading {
	position: fixed;
	width: 40px;
	animation-name: clockwise360;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
.iconLoading1 {
	top: 20px;
	left: 20px;
	animation-direction: reverse;
}
.iconLoading2 {
	top: 20px;
	right: 20px;
}
.iconLoading3 {
	bottom: 20px;
	left: 20px;
}
.iconLoading4 {
	bottom: 20px;
	right: 20px;
	animation-direction: reverse;
}
.iconLoading5 {
	position: static;
	width: 120px;
}
/*header*/
header {
	background: rgba(255,255,255,0.96);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100vw;
	padding: 10px 5%;
	box-shadow: 0 0 5px rgb(200,200,200);
	font-size: 0;
	overflow: hidden;
}
@media(min-width: 414px) {
	header {
		padding: 10px 4%;
	}
}
@media(min-width: 768px) {
	header {
		padding: 10px 3%;
	}
}
@media(max-height: 479px) {
	header {
		position: static;
		border-bottom: 1px solid rgb(80,80,80);
	}
}
@media print {
	header {
		border-bottom: 1px solid rgb(78,158,219);
	}
}
/*profile*/
.profile {
	float: left;
}
.imageProfile {
	display: inline-block;
	height: 60px;
}
.name {
	color: rgb(80,80,80);
	display: inline-block;
	vertical-align: top;
	padding-top: 5px;
	margin-left: 10px;
	text-align: center;
}
.nameEnglish {
	line-height: 25px;
	font-size: 16px;
	font-weight: 700;
}
.nameThai {
	line-height: 25px;
	font-size: 16px;
	font-weight: 400;
}
.nameThai::before {
	content: "( ";
}
.nameThai::after {
	content: " )";
}
/*nav*/
nav {
	display: none;
	float: right;
	margin-top: 22px;
}
nav a {
	color: rgb(80,80,80);
	display: inline-block;
	line-height: 16px;
	margin-left: 20px;
	font-weight: 400;
}
nav a[data-lang="english"] {
	font-size: 18px;
}
nav a[data-lang="thai"] {
	font-size: 19px;
}
.btnOpenSideMenu {
	float: right;
	height: 30px;
	margin-top: 15px;
	transition: transform 0.5s;
}
.btnOpenSideMenu:active {
	transform: scale(1.5);
}
@media(min-width: 520px) {
	nav {
		display: block;
	}
	.btnOpenSideMenu {
		display: none;
	}
}
/*sideMenu*/
.boxSideMenu {
	display: none;
	z-index: 20;
}
.sideMenu {
	background: rgba(0,19,44,0.9);
	opacity: 0;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 30;
	width: 300px;
	height: 300vh;
	transform: translateX(100%);
	transition: all 0.5s;
}
.boxBtnCloseSideMenu {
	margin: 22px 0 50px;
	text-align: right;
}
.btnCloseSideMenu {
	width: 32px;
	margin-right: 18px;
	transition: transform 0.5s;
}
.btnCloseSideMenu:active {
	transform: scale(1.5);
}
.sideMenu a {
	color: white;
	display: block;
	width: 100%;
	line-height: 60px;
	padding-left: 20px;
	border-top: 1px solid rgb(200,200,200);
	border-bottom: 1px solid rgb(200,200,200);
	font-size: 18px;
	font-weight: 400;
	text-align: left;
}
/*banner*/
.banner {
	position: relative;
	max-width: 768px;
	height: 250px;
	margin: auto;
	text-align: center;
	overflow: hidden;
	transition: all 1s;
}
@keyframes moveBG {
	0% { transform: translateX(0) scale(1) }
	28% { transform: translateX(10%) scale(1.2) }
	50% { transform: translateX(-10%) scale(1.2) }
	72% { transform: translateX(10%) scale(1.2) }
	100% { transform: translateX(0) scale(1) }
}
.bgBanner {
	height: 100%;
	animation-name: moveBG;
	animation-duration: 20s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
.boxImgBanner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	margin-top: 25px;
	text-align: center;
	transition: all 1s;
}
.imgBanner {
	width: 200px;
	transition: all 1s;
}
@media(min-width: 768px) {
	.banner {
		width: 94%;
		height: 320px;
		margin: 20px auto;
	}
	.boxImgBanner {
		margin-top: 50px;
	}
	.imgBanner {
		width: 220px;
	}
}
@media print {
	.banner {
		height: auto;
		margin: 0 auto;
	}
	.bgBanner {
		display: none;
	}
	.boxImgBanner {
		display: block;
		position: static;
		margin-top: 10px;
	}
	.imgBanner {
		width: 160px;
	}
}
/*section*/
section {
	background: white;
	padding: 0 10px 30px;
	margin: 10px auto;
	font-size: 0;
	transition: all 0.2s;
}
section>* {
	line-height: 25px;
}
section .topic {
	line-height: 50px;
	border-bottom: 1px solid rgb(78,158,219);
	margin-bottom: 10px;
	font-size: 20px;
	font-weight: 700;
	text-align: center;
}
section .row {
	margin-bottom: 6px;
	text-align: center;
}
section .cellStrong {
	display: block;
	font-weight: 700;
}
section .centerLabel {
	color: rgb(78,158,219);
	display: block;
	width: 200px;
	line-height: 20px;
	margin: auto;
	font-weight: 700;
	text-align: center;
}
section .centerBlock {
	display: block;
	width: 200px;
	margin: 5px auto 10px;
}
section .centerBlock>img {
	display: block;
	width: 100%;
	transition: all 0.2s;
}
section .centerBlock>img:active {
	box-shadow: 0 0 3px 3px rgb(78,158,219);
}
section span {
	display: inline-block;
}
section p, section table {
	margin: auto;
}
.tableCareer td:first-child {
	width: 108px;
	font-weight: 700;
}
.photo {
	perspective: 1200px;
}
.photo img {
	width: 90%;
	margin: 10px 5% 5px;
	cursor: pointer;
	transition: all 0.2s;
}
.photo img:active {
	box-shadow: 0 0 3px 3px rgb(78,158,219);
}
@media(min-width: 414px) {
	section {
		width: 94%;
		padding: 10px 20px 30px;
		border-radius: 8px;
		margin: 20px auto;
	}
}
@media(min-width: 540px) {
	section .row {
		width: 500px;
		text-align: left;
	}
	section .cellStrong {
		display: inline-block;
	}
}
@media(min-width: 768px) {
	section {
		max-width: 768px;
		padding: 10px 60px 30px;
	}
	.photo img {
		width: 46%;
		margin: 10px 2% 5px;
	}
}
@media print {
	section {
		padding: 0;
		margin: 5px auto;
	}
	.photo img {
		width: 23%;
		margin: 10px 1% 5px;
	}
	.photo img:nth-of-type(1), .photo img:nth-of-type(3), .photo img:nth-of-type(10), .photo img:nth-of-type(12) {
		display: none;
	}
	.certificate {
		page-break-before: always;
	}
}
/*footer*/
footer {
	background: rgba(0,0,0,0.8);
	color: white;
	line-height: 20px;
	padding: 40px 5% 60px;
}
.contact h4 {
	margin-bottom: 3px;
	font-weight: 700;
	text-align: left;
}
.contact p, .contact a {
	display: block;
	margin-bottom: 30px;
	font-weight: 400;
}
.qrCodeFooter {
	width: 110px;
	margin-top: 5px;
}
@media(min-width: 414px) {
	footer {
		padding: 40px 4% 60px;
	}
}
@media(min-width: 768px) {
	footer {
		padding: 40px 3% 60px;
	}
}
@media print {
	footer {
		padding-top: 30px;
		padding-bottom: 0;
		border-top: 1px solid rgb(78,158,219);
		margin-top: 20px;
	}
}
/*layerZoom*/
.layerZoom {
	background: black;
	display: none;
	padding: 60px 0 40px;
}
.boxControlPhoto {
	background: rgb(0,19,44);
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	line-height: 30px;
	padding: 15px;
}
.infoPhoto {
	color: white;
	float: left;
	font-size: 20px;
}
.iPhoto, .photos {
	width: 30px;
	text-align: center;
}
.btnCloseLayerZoom {
	float: right;
	height: 30px;
	transition: transform 0.5s;
}
.btnCloseLayerZoom:active {
	transform: scale(1.5);
}
.sliderPhoto {
	width: 100vw;
	height: 100%;
	font-size: 0;
	white-space: nowrap;
	overflow-x: scroll;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
}
.sliderPhoto>* {
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	display: inline-block;
	width: 100vw;
	height: 100%;
	scroll-snap-align: center;
}
@media(max-height: 480px) {
	.layerZoom {
		padding: 50px 0 25px;
	}
	.boxControlPhoto {
		padding: 10px 15px;
	}
}
/*print*/
@media print {
	@page {
		size: portrait;
		margin: 0.5cm;
	}
	a {
		color: black;
	}
}