/************************* font ***************************/
#title {
	height: 135px;
	padding-top: 30px;
}
#title h1 {
	font-family: "Font-Card", serif;
	text-transform: uppercase;
	font-size: 30px;
}

.hd1 {
	font-family: "Font-Mono", serif;
}

#title h1,
.text-center {
	text-align: center;
}

/******************* main layer *********************/
* {
	margin: 0;
	padding: 0;
	outline: none;
	position: relative;
}

body {
	background: #ffb469;
	font-family: "Font-Nova", serif;
	color: #1a1b1c;
}

a,
.soza {
	text-decoration: none;
}

#header {
	background: #001638;
	height: 72px;
	z-index: 1;
}

#canvas {
	display: none;
	background: #3fa05b;
	width: 100%;
	height: 54px;
	z-index: 3;
	transform: translateY(0);
}

#content {
	border-top: 1px solid #D8D8D8;
}

#foot {
	min-height: 48px;
	padding: 12px;
}

#foot a {
	color: #fff;
}

#foot ul {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	text-transform: uppercase;
	list-style: none;
}

.board {
	width: 1600px;
	margin-left: auto;
	margin-right: auto;
}

#content .board img {
	max-width: 100%;
	border: 0;
}

.bimg,
.icon {
	display: block;
	background-repeat: no-repeat;
	background-image: url(../images/main.svg);
}

#logo {
	margin-top: 15px;
	margin-left: 12px;
	width: 260px;
	height: 48px;
	font-weight: bold;
	font-size: 20px;
	color: #fff;
}

#overlay {
	display: none;
	background-color: rgba(0, 0, 0, 0.5);
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	z-index: 1;
}

.pad {
	background: #fff;
	width: 88%;
	padding: 24px;
	margin: 24px auto;
}

.box {
	width: 100%;
	min-height: 480px;
	text-align: center;
	padding-left: 24px;
	padding-right: 24px;
}

.bg-danger,
.bg-success,
.bg-info {
	padding: 6px;
	margin-bottom: 12px;
}

.loading {
	background: url(../images/wait.gif) no-repeat 1px;
	height: 45px;
	width: 45px;
	display: none;
	margin-top: 25%;
	margin-left: auto;
	margin-right: auto;
	z-index: 100;
}

.loader {
	background: #8ea106 url(../images/spinner.gif) no-repeat center center;
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 100;
}

.selected {
	background: #F4F2E5;
}

.alert i {
	float: left;
	padding: 8px;
}

/*********************** menu ******************************/
#menu {
	text-align: center;
	width: 70%;
}

.nav {
	margin-top: 20px;
	list-style: none;
	display: inline-flex;
	align-items: center;
}

.nav li {
	white-space: nowrap;
}

.nav li a {
	font-family: "Font-Card", serif;
	display: block;
	text-transform: uppercase;
	font-size: 12px;
	padding: 6px 18px 6px 6px;
	color: #fff;
}

.nav li a:hover {
	color: #f06f1f;
}

.level1{
	display: none;
	position: absolute;
	background: #d25000;
	list-style: none;
}

.level1 li {
	text-align: left;
}

.level1 li a:hover {
	color: #1a1b1c;
}

.nav > li:hover .level1 {
	display: block;
}

.more-menu .dropdown {
	position: absolute;
	list-style: none;
	display: none;
	top: 100%;
	-moz-border-radius: 9px;
	-webkit-border-radius: 9px;
	border-radius: 9px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	z-index: 10;
}

.more-menu:hover .dropdown {
	display: block;
	background: #4a684a;
}

.more-menu .dropdown li {
	float: none;
}

.navs span {
	float: left;
	width: 22%;
	height: 32px;
	margin-left: 4%;
	display: block;
}

.navs span:first-child {
	margin-left: 0;
}

.navbar {
	background-repeat: no-repeat;
	background: url(../images/main.png);
	background-position: -96px -24px;
	background-size: 240px 180px;
	cursor: pointer;
	width: 24px;
	height: 24px;
	top: 12px;
	right: 12px;
}

#navbar {
	display: none;
}

/**************** content ************/
#header .board,
.container {
	display: flex;
	/*align-items: center;*/
}

#win {
	display: flex;
	width: 100%;
}

#leftSlide {
	width: 400px;
	order: -1;
	padding-left: 12px;
}

#rightSlide {
	width: 400px;
	padding-right: 12px;
}

#leftSlide ul,
#rightSlide ul {
	list-style: none;
}

.w-login {
	padding-top: 48px;
	margin-left: auto;
	margin-right: auto;
	width: 48%;
}

#kurasa {
	padding-bottom: 24px;
}

#rip {
	background: #fff;
	height: 60px;
	padding: 6px 0;
}

#vista {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	grid-auto-rows: 24px;
	gap: 48px;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

.vrow {
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
	background: #001638;
	padding-bottom: 24px;
}

.vrow img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.3s ease;
}

/* Optional: Add a hover effect */
.vrow:hover img {
	transform: scale(1.03);
}

.vcell {
	background: #001638;
	background: linear-gradient(181deg,rgba(0, 22, 56, 0) 0%, rgba(0, 22, 56, 1) 50%, rgba(0, 22, 56, 1) 100%);
	position: absolute;      /* Float above the image */
	bottom: 0;               /* Stick to the bottom */
	left: 0;
	width: 98%;
	height: 54px;
	color: #fff;
	padding: 6px 12px;
	font-size: 12px;
}

.bull {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem 1.5rem;
}

ul.bull > li > div:last-child {
	line-height: 1.6;
	margin-bottom: 24px;
	background: white;
	padding: 6px;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
ul.bull h3 {
	margin: 0 0 1.5rem 0;
	color: #2c3e50;
	font-size: 1.5rem;
	border-bottom: 2px solid #3498db;
	padding-bottom: 0.5rem;
}

#googleMap1 {
	width: 100%;
	height: 480px;
	overflow: hidden;
}

#Mvi {
	height: 315px;
	width: 560px;
}

#lik {
	margin-top: 24px;
	padding-top: 12px;
	border-top: 1px solid #DCD8D8;
}

#log-content {
	background: rgb(0, 255, 255);
	background: linear-gradient(90deg, rgba(0, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 7%, rgba(255, 255, 255, 1) 93%, rgba(0, 255, 255, 1) 100%);
	height: 100vh;
}

/************************* carousel ******************/
/********************************** modal *************************************/
/********************* form *************************/
.info {
	background: transparent;
	border: none;
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
}

.field {
	padding: 8px 6px;
	width: 98%;
}

.input-group {
	padding: 9px 12px 6px 6px;
	margin-top: 8px;
	margin-bottom: 8px;
	border: thin solid #4a4a4a;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
}

.input-label {
	position: absolute;
	top: 12px;
	left: 8px;
	pointer-events: none;
	padding-left: 3px;
	padding-right: 4px;
	transition: transform 300ms ease-in;
	z-index: 1;
}

.move-down {
	background-color: transparent;
	transform: translateY(0);
}

.move-up {
	background-color: #fff;
	transform: translateY(-27px);
}

.add-border {
	outline: 1px solid #4a4a4a;
}

#book .move-up {
	background-color: #162c3b;
}

.field-group,
.input-chk {
	margin-top: 8px;
	margin-bottom: 8px;
	border: thin solid #4a4a4a;
	outline: 1px solid #4a4a4a;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
}

.field-group {
	padding: 6px 12px 8px 6px;
}

.input-chk {
	padding: 12px 12px 10px 12px;
}

.input-opt {
	display: flex;
}

/**************** gallery ******************/
.contimg {
	background: transparent;
	width: 160px;
	height: 120px;
	margin-bottom: 3px;
	margin-right: 8px;
	float: left;
	display: block;
	overflow: hidden;
}

.contimg img {
	width: 100%;
	border: 0;
}

.cropped {
	background: url('../images/wait.gif') center center no-repeat;
	position: absolute;
	margin: auto;
	top: 0;
	left: 0;
	/*right: 0;*/
	bottom: 0;
}

/*************************** button ******************************/
.soza,
.soza a {
	color: #fff;
	width: 112px;
	top: 24px;
	outline: none;
	font-size: 14px;
	display: block;
	background: #000;
	margin-bottom: 12px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	padding: 12px 16px;
	border-radius: 4px;
}

.soza:hover,
.soza a:hover {
	background: #006600;
	color: #fff;
}

.srch {
	background: #a2cd5a;
	width: 90px;
	height: 24px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	display: block;
	font-size: 12px;
	text-align: center;
	padding-top: 2px;
}

.rave {
	font-size: 12px;
	color: #698b69;
	letter-spacing: 1px;
	font-weight: bold;
	padding: 3px 0;
}

.btn-group {
	display: flex;
}

.btn-group {
	align-items: center;
}

.btn {
	display: block;
	background: #0099ff;
	padding-top: 8px;
	padding-bottom: 12px;
	-moz-border-radius: 24px;
	-webkit-border-radius: 24px;
	border-radius: 24px;
	text-align: center;
	color: #fff;
	font-size: 18px;
	text-decoration: none;
	cursor: pointer;
}

.btn-pword {
	margin-left: auto;
}

.btn-login {
	width: 200px;
}

.btn-login:hover,
.btn-shop:hover {
	background: #00ffff;
	color: #4a4a4a;
}

/************************************** Player ************************************/
/*************************** icon *******************************/
.icon-lg {
	width: 32px;
	height: 30px;
}

.icon-sm {
	background: #ff0000;
	width: 24px !important;
	height: 24px !important;
}

.arrow-eye {
	background: #ff0000;
	position: absolute;
	right: 12px;
	cursor: pointer;
	top: 12px;
	z-index: 1;
}

.icon-login {
	background-position: 0 0;
	width: 192px;
	height: 96px;
	float: none !important;
	margin-left: auto;
	margin-right: auto;
}

.icon-warn {
	width: 60px;
	height: 60px;
	display: block;
	float: left;
	background-position: 0 0;
}

.icon-down {}

.icon-arrow {
	background-position: -16px -0px;
	margin-top: 6px;
}

.arrow-down {
	width: 0;
	height: 0;
	position: absolute;
	top: 11px;
	right: 5px;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 7px solid #fff;
	cursor: pointer;
}

.icon-fb {
	float: none;
	margin-left: auto;
	margin-right: auto;
	background-position: -192px -0px;
}

.icon-tw {
	background-position: -216px -0px;
}

.icon-insta {
	background-position: -240px -0px;
}

.icon-seo {
	background-position: -24px -48px;
}

.icon-map {
	width: 26px;
	background-position: -24px -0px
}

.icon-clock {
	width: 26px;
	background-position: -48px -0px
}

.icon-close {
	width: 18px;
	height: 16px;
	display: block;
	background: #000;
	position: absolute;
	top: 3px;
	right: 0;
	z-index: 100;
}

.icon-player {
	background-position: -168px -72px;
}

.icon-car {
	float: none;
	margin-left: auto;
	margin-right: auto;
	background-repeat: no-repeat;
	background-size: 240px 180px;
	background-position: -120px -12px;
}

.icon-wf {
	float: none;
	margin-left: auto;
	margin-right: auto;
	background-repeat: no-repeat;
	background-size: 240px 180px;
	background-position: -120px -36px;
}

.icon-bottle {
	float: none;
	margin-left: auto;
	margin-right: auto;
	background-repeat: no-repeat;
	background-size: 240px 180px;
	background-position: -120px -60px;
}

.icon-office {
	float: none;
	margin-left: auto;
	margin-right: auto;
	background-repeat: no-repeat;
	background-size: 240px 180px;
	background-position: -120px -84px;
}

/******************************** import font ******************************/
@font-face {
	font-family: 'Font-Card';
	src: url('font/Jost-Medium.eot');
	src: url('font/Jost-Medium.eot?#iefix') format('embedded-opentype'),
		url('font/Jost-Medium.woff') format('woff'),
		url('font/Jost-Medium.ttf') format('truetype');
}

@font-face {
	font-family: 'Font-Nova';
	src: url('font/Poppins-Regular.eot');
	src: url('font/Poppins-Regular.eot?#iefix') format('embedded-opentype'),
		url('font/Poppins-Regular.woff') format('woff'),
		url('font/Poppins-Regular.ttf') format('truetype');
}

/********************** responsive  *****************************/
@media (max-width: 1600px) {
	.board {
		width: 100%;
	}
}

@media (max-width: 1200px) {}

@media (max-width: 993px) {
}

@media (max-width: 768px) {
	#title h1 {
		font-size: 24px;
	}

	body {
		font-size: 12px;
	}

	#header {
		background: #fff;
		height: 54px;
		z-index: 3;
	}

	#canvas {
		position: fixed;
		height: auto;
		padding-top: 0;
		transform: translateY(-300px);
		background: #fff;
		z-index: 2;
	}

	#content {
		border-top: 1px solid #D8D8D8;
	}

	#foot ul {
		grid-template-columns: repeat(2, 1fr);
	}

	#logo {
		background-position: 0 -96px;
		width: 108px;
		height: 54px;
	}

	.nav {
		display: flex;
		flex-direction: column;
		margin-top: 0;
	}

	.nav li a {
		color: #000;
	}

	.nav li a:hover {
		background: transparent;
		-moz-border-radius: 0;
		-webkit-border-radius: 0;
		border-radius: 0;
	}

	#navbar {
		background-position: -360px 0;
		display: block;
		width: 32px;
		height: 24px;
		top: 12px;
		float: right;
		right: 16px;
		cursor: pointer;
	}

}

@media (max-width: 480px) {
	#foot ul {
		grid-template-columns: repeat(1, 1fr);
	}

	#wins li {
		float: none;
		width: 100%;
		margin-left: 0;
		margin-bottom: 6px;
	}
}

/******************* dark mode  **************************************/
@media (prefers-color-scheme: dark) {
	body {
		background: #1d1d1d;
		color: #fff;
	}

	#canvas {
		background: #0f2510;
	}
}