/* designed by Value Up, Bangkok 2024 */

html, body {height: 100%;}
html {scroll-behavior: smooth;}
body {
	font-size: 1rem;
	line-height: 1.6;
	background: #fff;
	color: #222;
	font-family: "Open Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-variation-settings:
	"wdth" 100;
}

/* general */
.br-1024, .br-ipxl, .br-768, .br-736, .br-667, .br-568, .br-480, .br-414, .br-375, .br-360, .br-320, .br-ipdport {display: none;}
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {max-width:1220px;}
.no-bottom-margin {margin-bottom: 0!important;}
.view-pc, .view-mb, .hide {display: none;}
.add-bottom-space {margin-bottom: 24px;}
.remarks {font-size: 80%;}
.text-left {text-align: left;}
.text-right {text-align: right;}
.get-corner {border-radius: 24px;}
.add-top-gap {padding-top: 2%;}
.sectionbox {padding: 5% 0;}
.subsection {margin-bottom: 5%;}
ul {list-style-type: square;}
.card {
	margin-bottom: 5%;
	border-radius: 16px;
	overflow: hidden;
	border-color: #2D3C97;
}
.card-header {
	font-weight: 700;
	border-radius: 16px 16px 0 0;
	background-color: rgba(45,60,151,0.2);
	border-color: #2D3C97;
}
.page-title {
	margin: 0;
	font-size: 300%;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 0 5px #000;
}
.section-title {
	text-align: center;
	font-size: 200%;
	font-weight: 700;
	margin-bottom: 3%;
	color: #2D3C97;
}
.table th {color: #2D3C97;}

/* color settings */
.txt-main-blue {color: #2D3C97;}
.txt-main-red {color: #E11E2C;}
.txt-yellow {color: #F2C328;}
.bg-main-blue {background-color: rgba(45,60,151,1);}
.bg-main-red {background-color: rgba(225,30,44,1);}
.bg-main-yellow {background-color: rgba(242,195,40,1);}

/* fonts & texts */
h1, h2 {margin-top: 0;}
.material-symbols-outlined {
	font-variation-settings:
	'FILL' 0,
	'wght' 400,
	'GRAD' 0,
	'opsz' 24
}

/* links */
a {color: #2D3C97;}
a:hover {color: #E11E2C;}

/* top nav */
.navbar {padding: 0;}
.navbar-brand img {height: 64px;}
.navbar-nav > .nav-item {text-transform: uppercase;}
.navbar-expand-md .navbar-nav .nav-link {padding-left: 20px; padding-right: 20px;}
.nav-link:focus, .nav-link:hover {background-color: rgba(45,60,151,0.15); border-radius: 6px;}
.navbar-expand-md .navbar-nav .nav-link .material-symbols-outlined {font-size: 80%;}

/* alert box */
.alert {line-height: 1.6;}
.alert svg {width: 16px; height: 16px;}
.alert-warning svg {fill: red;}

/* media and pictures */
figure {text-align: center;}
figure img {margin-bottom: 10px;}
figcaption {text-align: center; font-style: italic; color: #292C5E;}

/* header & footer */
header {padding: 0;}
footer {
	padding: 2% 0;
	font-size: 85%;
	background-color: rgba(45,60,151,0.05);
}
footer p:last-child {margin-bottom: 0;}
main {padding: 0 0 5%;}
.page-intro {
	padding: 7% 0;
	background-color: #2D3C97;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	min-height: 10%;
	text-align: center;
	position: relative;
}
#piFadder {
	position: absolute;
	right: 0;
	bottom: 0;
}

/* back to top */
#back2top {
	position: fixed;
	right: 10px;
	bottom: 10px;
	width: 96px;
	height: 96px;
	text-align: right;
}
#back2top a {
	display: block;
	padding: 20px 10px;
	text-align: center;
	background: rgba(255,255,255,0.85);
	border-radius: 10px;
}
#back2top .material-symbols-outlined {font-size: 300%;}

/* home */
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%;
	/* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* about */
#aboutContent table span, #aboutContent table address {font-size: 90%; color: #666; display: block;}

/* shop */
.gmap-wrapper {margin-bottom: 3%;}

/* news */
.news-published-date {font-size: 80%;}
.news-row {
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #eee;
}
.news-row:first-child {border-top: 1px solid #eee;}

/* contact */
#contactFormWrapper {position: relative;}
#formWrapperBottom {
	position: absolute;
	width: 100%;
	height: 160px;
	background-color: #fff;
	left: 0;
	bottom: 0;
	z-index: 99;
}

/* responsive fixes */
@media screen and (min-width: 641px) {
	.view-pc {display: block;}
	.news-date {text-align: right;}
}
@media screen and (max-width: 640px) {
	.view-mb {display: block;}
	.page-intro {overflow: hidden;}
}