@charset "utf-8";
:root {
	--main-color: #0197f1;
	--main-dark-color: #0056a7;
	--default-radius: 16px;
	--sub-radius: 10px;
	--micro-radius: 5px;
	--border-color: #b2b2b2;
	--main-line: var(--border-color);
	--main-text: #222832;
	--main-footer: #eeeeef;
}

body {
	min-width:1230px;
}

a:focus {
	outline: none;
}
/* ---------- top message alarm ---------- */
#message-unread {
	position: absolute;
	padding: 4px 80px 5px 25px;
	left: 100px;
	top: 0;
	color: #fff;
	background-color: #333;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	animation-name: message-unread;
	animation-duration: 2s;
	z-index: 1;
	line-height: normal;
}
#message-unread a {
	font-size: 11px;
	padding: 0 5px 2px;
	background: #fff;
	vertical-align: middle;
	text-decoration: none;
	color: #06c;
	position: absolute;
	right: 15px;
	top: 5px;
	line-height: normal;
}
@keyframes message-unread {
	from {
		top: -30px;
	}
	to {
		top: 0;
	}
}

/* ---------- common tab layout ---------- */
.common-tab-menu {
	position: relative;
	margin: 0 0 24px;
	padding: 0 0 1px;
	list-style: none;
	overflow: hidden;
}
.common-tab-menu:before {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	position: absolute;
	left: 0;
	bottom: 0;
	background: var(--border-color);
}
.common-tab-menu li {
	float: left;
	position: relative;
	border: 1px solid var(--border-color);
	border-bottom: none;
	width: 20%;
	text-align: center;
	margin-right: -1px;
	background: #fafafa;
	border-top-right-radius: var(--sub-radius);
	border-top-left-radius: var(--sub-radius);
}
.common-tab-menu li:last-child {
	border-right: 1px solid var(--border-color);
}
.common-tab-menu li.active {
	background: #fff;
	border-color: var(--border-color);
	z-index: 1;
}
.common-tab-menu li:after {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background: var(--border-color);
	position: absolute;
	left: 0;
	bottom: -1px;
}
.common-tab-menu li.active:after {
	background: #fff;
}
.common-tab-menu li.active a {
	margin: 0;
	font-weight: 500;
}
.common-tab-menu li a {
	border: none !important;
	display: block;
	padding: 10px 0;
	color: #333;
	text-decoration: none;
	font-size: 14px;
}

/* ---------- layout ---------- */
.container {
	width: 1230px;
	margin: 0 auto 30px;
}
#column-global {
	display: table;
	width: 100%;
	table-layout: fixed;
	position: relative;
}
.column-left {
	display: table-cell;
	width: 300px;
	vertical-align: top;
}
.column-left .wrap {
	width: 240px;
}
.column-center {
	display: table-cell;
	width: 100%;
	vertical-align: top;
}
#common-error {
	min-width: 500px;
	padding: 10px;
}
#common-error h4 {
	font-size: 11pt;
}
#common-error .alert {
	margin-bottom: 0;
}

/* ---------- header ---------- */
#header {
	margin-bottom: 30px;
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.04);
}
#header .container {
	margin: 0 auto 20px;
	position: relative;
}
#header h1 {
	display: inline;
	margin: 0;
}
#header h1 a {
	color: #0078d7;
}
#header .gnb {
	margin-top: 12px;
}
#header .gnb li {
	float: left;
}
#header .gnb li a {
	display: block;
	padding: 5px 10px;
}
#header .lnb {
	background-color: #0078d7;
}
#header .lnb ul {
	width: 1200px;
	margin: 0 auto;
}
#header .lnb ul li {
	float: left;
}
#header .lnb ul li a {
	display: block;
	padding: 10px 20px;
	color: #fff;
	font-size: 16px;
}

/* ---------- footer ---------- */
#footer {
	margin-top: 80px;
	clear: both;
}
#footer .footer-top {
	border-top:1px solid var(--border-color);
	border-bottom:1px solid var(--border-color);
}
#footer .footer-top .fnb {
	margin:0;
	padding:0;
	list-style:none;
	display:flex;
	gap:0 50px;
}
#footer .footer-top .fnb a {
	display: block;
	font-size:13px;
	color:#333;
	letter-spacing: -0.01em;
	line-height:52px;
}
#footer .container {
	margin: 0 auto;
	text-align: center;
}

/* ---------- common header/footer ---------- */
#header {
	background: #fff;

	.header-inner {
		position: relative;
		display: flex;
		align-items: center;
		height: 100%;
		padding-top: 34px;
		padding-bottom: 20px;

		.header-nav {
			display: flex;
			align-items: center;
			gap: 55px;
			font-size: 20px;
			font-weight: 700;
			letter-spacing: -0.025em;
			margin-left: 80px;

			.header-nav-link {
				position: relative;
				display: inline-flex;
				align-items: center;
				gap: 10px;
				color: var(--main-text);
				text-decoration: none;
				transition: color .18s ease;

				&::after {
					content: "";
					position: absolute;
					right: 0;
					bottom: -14px;
					left: 0;
					height: 2px;
					background: var(--main-color);
					transform: scaleX(0);
					transition: transform .18s ease;
				}

				&:hover,
				&:focus {
					color: var(--main-color);

					&::after {
						transform: scaleX(1);
					}
				}
			}

			.header-nav-item {
				position: relative;
				z-index: 30;
				margin-bottom: -24px;
				padding-bottom: 24px;

				&:hover,
				&:focus-within {
					.header-nav-link {
						color: var(--main-color);

						&::after {
							transform: scaleX(1);
						}
					}

					.header-nav-arrow {
						margin-top: 4px;
						transform: rotate(225deg);
					}

					.header-nav-sub {
						display: block;
					}
				}
			}

			.header-nav-arrow {
				flex: 0 0 auto;
				width: 7px;
				height: 7px;
				margin-top: -4px;
				border-right: 1.5px solid currentColor;
				border-bottom: 1.5px solid currentColor;
				transform: rotate(45deg);
				transition: margin .18s ease, transform .18s ease;
			}

			.header-nav-sub {
				position: absolute;
				top: 100%;
				left: 50%;
				z-index: 31;
				display: none;
				box-sizing: border-box;
				min-width: 150px;
				margin: 0;
				padding: 10px 0;
				border: 1px solid var(--border-color);
				border-radius: var(--sub-radius);
				background: #fff;
				box-shadow: 0 12px 22px rgba(20, 36, 54, .08);
				transform: translateX(-50%);

				li {
					list-style: none;
				}

				a {
					display: block;
					padding: 8px 16px;
					color: #333;
					font-size: 15px;
					font-weight: 400;
					line-height: 1.4;
					text-align: center;
					text-decoration: none;
					white-space: nowrap;
					transition: color .18s ease;
					letter-spacing: -0.025em;

					&:hover,
					&:focus {
						color: var(--main-color);
						font-weight: 700;
					}
				}
			}
		}

		.header-actions {
			display: flex;
			align-items: center;
			gap: 6px;
			margin-left: auto;
		}

		.header-btn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 7px;
			width: 130px;
			height: 35px;
			border-radius: var(--default-radius);
			color: #fff !important;
			font-size: 14px;
			font-weight: 500;
			text-decoration: none;
			line-height: normal;
		}

		.header-btn-primary {
			background: var(--main-color);
		}

		.header-btn-dark {
			background: var(--main-dark-color);
		}

		.lang {
			position: relative;
			z-index: 30;
			margin-bottom: -8px;
			padding-bottom: 8px;

			.lang-toggle {
				position: relative;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				gap: 10px;
				width: 130px;
				height: 35px;
				padding: 0 20px;
				text-align: center;
				border: 1px solid var(--border-color);
				border-radius: var(--default-radius);
				color: #333333;
				font-size: 14px;
				white-space: nowrap;
				background: #fff;
				cursor: pointer;

				img {
					flex: 0 0 auto;
				}

				.lang-arrow {
					flex: 0 0 auto;
					width: 7px;
					height: 7px;
					margin: -4px 0 0 0;
					border-right: 2px solid #666666;
					border-bottom: 2px solid #666666;
					transform: rotate(45deg);
				}
			}

			ul {
				position: absolute;
				top: 100%;
				right: 0;
				z-index: 31;
				display: none;
				box-sizing: border-box;
				width: 100%;
				margin: 0;
				padding: 10px 0;
				border: 1px solid var(--border-color);
				border-radius: var(--default-radius);
				background: #fff;
				overflow: hidden;
				box-shadow: 0 12px 22px rgba(20, 36, 54, .08);
			}

			&:hover {
				ul {
					display: block;
				}
			}

			li {
				list-style: none;
			}

			a {
				display: block;
				padding: 8px 18px;
				color: #5b6672;
				font-size: 14px;
				line-height: 1.4;
				text-decoration: none;
				background: #fff;
				text-align: center;

				&:hover {
					color: var(--main-color);
				}
			}

			li:last-child {
				a {
					padding-bottom: 8px;
				}
			}
		}
	}
}

#header.header-main .header-inner {
	margin-bottom: 0;
}
#header .header-search {
	box-sizing: border-box;
	width: 900px;
	margin: 0 auto;
	padding: 0 0 20px;
}
#header .header-search form {
	display: flex;
	gap: 8px;
	width: 100%;
	height: 46px;
	margin: 0;
}
#header .header-search-select {
	position: relative;
	flex: 0 0 160px;
}
#header .header-search-select::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 17px;
	width: 7px;
	height: 7px;
	margin-top: -5px;
	border-right: 1px solid #333;
	border-bottom: 1px solid #333;
	transform: rotate(45deg);
	pointer-events: none;
}
#header .header-search select,
#header .header-search input,
#header .header-search button {
	box-sizing: border-box;
	height: 46px;
	border: 1px solid var(--main-color);
	background: #fff;
}
#header .header-search select {
	width: 100%;
	padding: 0 40px 0 16px;
	border-radius: var(--sub-radius);
	color: #333;
	font-size: 15px;
	font-weight: 700;
	appearance: none;
}
#header .header-search-field {
	display: flex;
	flex: 1;
	min-width: 0;
}
#header .header-search input {
	flex: 1;
	min-width: 0;
	padding: 0 18px;
	border-right: 0;
	border-radius: var(--sub-radius) 0 0 var(--sub-radius);
	color: #333;
	font-size: 14px;
}
#header .header-search input::placeholder {
	color: #999;
}
#header .header-search button {
	position: relative;
	flex: 0 0 58px;
	border-left: 0;
	border-radius: 0 var(--sub-radius) var(--sub-radius) 0;
	background: var(--main-color);
	cursor: pointer;
}
#header .header-search button span {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 17px;
	height: 17px;
	margin: -10px 0 0 -10px;
	border: 3px solid #fff;
	border-radius: 50%;
}
#header .header-search button span::after {
	content: "";
	position: absolute;
	right: -6px;
	bottom: -4px;
	width: 8px;
	height: 3px;
	border-radius: 2px;
	background: #fff;
	transform: rotate(45deg);
	transform-origin: left center;
}

.column-right {
	position: static;

	.quick-menu-wrap {
		position: fixed;
		right: 24px;
		bottom: 24px;
		z-index: 100;
		text-align: center;
		width: 64px;
		display: flex;
		flex-direction: column;
		gap: 15px;

		a {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 64px;
			height: 64px;
			border-radius: 50%;
			text-decoration: none;
			background: #fff;
			box-shadow: 0 3px 12px rgba(26, 54, 74, .18);

		}
	}
}

#footer {
	clear: both;
	padding: 40px 0 58px;
	color: #333;
	background: var(--main-footer);

	.footer-inner {
		display: flex;
		justify-content: space-between;

		.footer-info {
			.logo {
				display: inline-block;
				margin-bottom: 15px;
			}
			text-align: left;
			font-size: 15px;
			line-height: 23px;
			letter-spacing: -0.005em;
			p {
				margin-bottom: 0;
				&:last-of-type {
					margin-top: 9px;
				}
			}
			a {
				text-decoration: none;
				color: #333;
			}
		}
	}

	nav {
		display: flex;
		align-items: flex-start;
		gap: 50px;
		font-size: 16px;
		font-weight: bold;
		letter-spacing: -0.025em;
		a {
			color: #333;
			text-decoration: none;
			transition: color .18s ease;

			&:hover {
				color: var(--main-color);
			}
		}
	}
}

/* blog menu */
.blog-menu-wrap {
	background: #f8f8f8;
	padding: 0 20px 20px;
}
.blog-menu-wrap:before {
	content: 'About';
	color: #fff;
	padding: 9px 0;
	background: #666;
	display: block;
	text-align: center;
	margin: 0 -20px 20px;
	font-weight: 500;
	font-size: 15px;
	line-height: normal;
}
.blog-menu-wrap [name=form-search] {
	margin-top: 25px;
	position: relative;
}
.blog-menu-wrap [name=form-search] [name=keyword] {
	width: 100%;
	font-size: 14px;
	padding: 0 50px 0 15px;
	height: 36px;
	border: 1px solid var(--border-color);
	outline: none;
}
.blog-menu-wrap [name=form-search] button {
	position: absolute;
	top: 0;
	right: 0;
	width: 40px;
	height: 100%;
	border: 0;
	background: none;
	outline: none;
	box-shadow: none;
}
.guide-visual,
.shop-visual {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 240px;
	margin-bottom: 48px;
	padding: 40px 100px;
	overflow: hidden;
	box-sizing: border-box;
	border-radius: var(--default-radius);
	color: #fff;
}

.guide-visual {
	background: #596872;

	&::before {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 66%;
		background: url('../imgs/guide-bg.png?v=1') center 48% / cover no-repeat;
		content: "";
	}
}

.shop-visual {
	background: #6084ca;

	&::before {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 590px;
		background: url('../imgs/shop-bg.png') right center / auto 240px no-repeat;
		content: "";
	}
}
.contact-visual {
	background: #6c6555;
	&::before {
		right: 0;
		width: 100%;
		background: url('../imgs/contact-bg.png?v=2') right 0 / 100% 100% no-repeat;
	}
}
.guide-visual-content,
.shop-visual-content {
	position: relative;
	z-index: 2;
}
.guide-visual h2,
.shop-visual h2 {
	margin: 0 0 8px;
	color: #fff;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
}
.guide-visual p,
.shop-visual p {
	margin: 0;
	color: rgba(255, 255, 255, .9);
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: -0.025em;
}