/* 모든 페이지 공통 스타일 — include/header.php 의 인라인 <style> 을 옮겨 왔다(2026-10-01).
   url() 경로는 이 파일 위치(/css/) 기준이다. */

*, html, body {
	margin: 0;
	padding: 0;
	font-family: 'Montserrat', 'Noto Sans KR', sans-serif;
	font-size: 18px;
	letter-spacing: -0.5px;
	line-height: 1.5;
	color: #555;
}

ul, li {
	list-style: none;
}

a {
	text-decoration: none;
}

h1, h2, h3, h4, h5 {
	color: #222;
}

p {
	font-size: 18px;
	color: #555;
}

img {
	border: 0;
}

/* Demo styles */
html, Body {
	position: relative;
	height: 100%;
}

.font {
	font-family: 'Montserrat', 'Noto Sans KR', sans-serif;
}

/*-------------------------------------------------------------------------------------------------------------------*/

.visual_wrap {
	position: relative;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	height: 400px;
	width: 100%;
	display: table;
}

.visual_bg {
	width: 1240px;
	margin: 0 auto;
	position: relative;
	display: table-cell;
	vertical-align: middle;
}

.visual_bg > h2, .visual_bg > p {
	text-align: center;
}

.visual_bg h2 {
	font-size: 34px;
	color: #fff;
}

.visual_bg p {
	color: #ddd;
	font-size: 16px;
	margin-top: 5px;
}

.visual_bg2 {
	height: 100%;
}

.visual_bg2 .img {
	position: absolute;
	bottom: 50px;
	width: auto;
}

.visual_bg2 .img7 {
	width: 150px;
}

.container {
	max-width: 1240px;
	margin: 0 auto;
	position: relative;
}

.content::after {
	content: '';
	display: block;
	clear: both;
}

.wrap {
	background: #fff;
	text-align: center;
}


@media (max-width: 1299px) {
	/*width 992px ~ 1299px*/
	*, html, body, p {
		font-size: 16px;
	}

	.container {
		max-width: 90%;
		margin: 0 auto;
		position: relative;
	}

	.visual_bg {
		max-width: 90%;
		margin: 0 auto;
		position: relative;
	}
}

@media (max-width: 991px) {
	/*width 768px ~ 991px*/
	.container {
		max-width: 90%;
		margin: 0 auto;
		position: relative;
	}

	.visual_bg {
		max-width: 90%;
		margin: 0 auto;
		position: relative;
	}
}

@media (max-width: 767px) {
	/*width ~ 767px*/
	*, html, body, p {
		font-size: 14px;
	}

	.visual_bg h2 {
		font-size: 26px;
	}

	.container {
		width: 85%;
		margin: 0 auto;
		position: relative;
	}

	.visual_bg {
		width: 85%;
		margin: 0 auto;
		position: relative;
		padding: 0 30px;
	}

	.visual_bg2 .img {
		position: absolute;
		bottom: 20px;
		width: 40%;
	}

	.visual_bg2 .img1 {
		width: auto;
		height: 52px;
	}

	.visual_bg2 .img2 {
		width: auto;
		height: 90px;
	}

	.visual_bg2 .img7 {
		width: auto;
		height: 58px;
	}

	.visual_bg2 .img8 {
		width: auto;
		height: 20px;
	}

	.visual_bg2 .img9 {
		width: auto;
		height: 48px;
	}

	.visual_wrap {
		height: 300px;
	}

}

/*---------header---------*/
#header {
	width: 100%;
	height: 70px;
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
}

#header .logo {
	float: left;
	position: absolute;
	top: 20px;
	left: 0;
}

#header .logo .logo_w {
	display: block;
}

#header .logo .logo_c {
	display: none;
}

#header .logo img {
	display: block;
	height: 24px;
}

#header .topMenu {
	float: right;
}

#header .topMenu > ul {
	margin-right: -25px;
	display: flex;
}

#header .topMenu ul li {
	cursor: pointer;
}

#header .topMenu ul li a,
#header .topMenu ul li p {
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	padding: 0 25px;
	line-height: 70px;
	display: block;
}

@media (hover: hover) {
	#header .topMenu > ul > li:hover > a,
	#header .topMenu > ul > li:hover > p {
		color: #3e8afa;
	}
}

#header .topMenu .submenu {
	position: absolute;
	margin-top: -20px;
	display: flex;
}

#header .topMenu .submenu li a {
	line-height: 2.5 !important;
}

@media (hover: hover) {
	#header .topMenu .submenu li:hover a {
		color: #3e8afa;
	}
}

/* ───────── 서브 메뉴 애니메이션 ───────── */
.submenu {
	max-height: 0; /* 접힌 상태 */
	overflow: hidden;
	transition: all 0.3s ease; /* 슬라이드 다운/업 */
}

#header .topMenu .has-sub.open > .submenu {
	max-height: 40px; /* 충분히 큰 값 (콘텐츠 높이보다 크면 됨) */
}

input[id="menuicon"] {
	display: none;
}

input[id="menuicon"] + label {
	display: none;
}

.sidebar {
	display: none;
}

#header .header_wrap {
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
	height: 70px;
}

.fixed-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	animation: slide-down 0.7s;
	opacity: 0.9;
	background-color: rgb(255, 255, 255);
	z-index: 999;
}

#header .fixed-header .logo_c {
	display: block;
}

#header .fixed-header .logo_w {
	display: none;
}

/* 회사소개는 하위 메뉴를 여는 글자(p)라서 a 와 함께 색을 바꿔야 흰 머리글에서 보인다(예전에는 흰 글자로 남아 안 보였다). */
#header .fixed-header .topMenu ul li a,
#header .fixed-header .topMenu ul li p {
	color: #222;
}

@keyframes slide-down {
	0% {
		opacity: 0;
		transform: translateY(-100%);
	}
	100% {
		opacity: 0.9;
		transform: translateY(0);
	}
}

/*---------footer---------*/
#footer {
	width: 100%;
	background-color: #222;
	padding: 60px 0;
}

#footer .footer_wrap a.foologo {
	display: inline-block;
	margin-bottom: 20px;
}

#footer .footer_wrap a.foologo img {
	display: block;
	height: 24px;
}

#footer .footer_wrap .footer_info, #footer .footer_wrap .footer_info span, #footer .footer_wrap .footer_info a {
	font-size: 16px;
	color: #aaa;
	line-height: 1.6;
}

#footer .footer_wrap .footer_info span.bar {
	margin: 0 10px;
}

#footer .footer_wrap .copyright {
	padding-top: 40px;
	margin-top: 40px;
	border-top: 1px solid #555;
}

#footer .footer_wrap .copyright .left {
	float: left;
}

#footer .footer_wrap .copyright .left p {
	font-size: 16px;
	color: #aaa;
}

#footer .footer_wrap .copyright .right {
	float: right;
}

#footer .footer_wrap .copyright .right a {
	display: inline-block;
	width: 35px;
	margin-left: 5px;
}

#footer .footer_wrap .copyright .right a img {
	width: 100%;
	display: block;
}

/*---------footer top --------*/
#top .topbutton {
	position: fixed;
	bottom: 0;
	right: 0;
	display: block;
	width: 50px;
	height: 50px;
	background-color: #3e8afa;
	color: #fff;
	font-size: 14px;
	line-height: 50px;
	text-align: center;
}

@media (hover: hover) {
	#top .topbutton:hover {
		background-color: #222;
	}
}

/*---------visual_main---------*/

#visual_main {
	width: 100%;
	height: 100vh;
	position: relative;
	overflow: hidden;
}

#visual_main .main_txt { /*height: 100%;*/
}

/*#visual_main .mainTxt_wrap {display: table; height: 100%;}*/
#visual_main .mainTxt_wrap .copy {
	position: absolute;
	bottom: 180px; /*display: table-cell; vertical-align: middle; padding-top: 300px;*/
}

#visual_main .mainTxt_wrap h1 {
	color: #fff;
	font-size: 50px;
	line-height: 1.2;
	text-shadow: 0px 0px 30px #000000;
	text-transform: uppercase;
}

#visual_main .mainTxt_wrap h1 span {
	font-size: 38px;
	padding-left: 5px;
}

#visual_main .mainTxt_wrap .subtxt {
	font-size: 18px;
	color: #fff;
	margin-top: 10px;
}

#visual_main .mainTxt_wrap a {
	width: 420px;
	background-color: #3e8afa;
	border-radius: 4px 4px 4px 4px;
	margin-top: 30px;
	font-size: 18px;
	text-align: center;
	color: #fff;
	padding: 15px;
	display: inline-block;
}

@media (hover: hover) {
	#visual_main .mainTxt_wrap a:hover {
		box-shadow: 10px 10px 20px 0 rgba(20, 55, 105, 0.9);
		transition: all .5s;
	}
}

#visual_main .main_bg {
	width: 100%;
	height: 100%;
	top: -100%; /*position:absolute;*/
	left: 0;
	z-index: -1;
}

/*---------video---------*/
video {
	object-fit: fill;
	width: 100%;
	height: 100%;
}

.videoWrapper {
	width: 100%;
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

@media (min-aspect-ratio: 16/9) {
	.videoWrapper {
		height: 300%;
		top: -100%;
	}
}

@media (max-aspect-ratio: 16/9) {
	.videoWrapper {
		width: 300%;
		left: -100%;
	}
}

.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/*---------scrolldown---------*/
.scrolldown_wrap {
	position: absolute;
	bottom: -50px;
	left: 50%;
	transform: translateX(-25px);
}

.scrolldown {
	position: absolute;
	bottom: 100px;
	left: 48%;
	display: block;
	text-align: center;
	line-height: 50px;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 100%;
	height: 40px;
	width: 40px;
	z-index: 1;
	-webkit-transition: -webkit-transform ease-out .1s, background .2s;
	-moz-transition: -moz-transform ease-out .1s, background .2s;
	transition: transform ease-out .1s, background .2s;
	behavior: url(/themes/digitalefactuur/css/PIE.htc)
}

.scrolldown:after {
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	content: '';
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box
}

.scrolldown .fui-arrow-right {
	color: #fff;
	font-size: 1.5em;
	margin-left: 2px
}

.scrolldown:after {
	top: 0;
	left: 0;
	padding: 0;
	z-index: -1;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .1);
	opacity: 0
}

.no-touch .scrolldown.active {
	color: #fff
}

.scrolldown.active:after {
	-webkit-animation: sonarEffect 1.3s ease-out 75ms;
	-moz-animation: sonarEffect 1.3s ease-out 75ms;
	animation: sonarEffect 1.3s ease-out 75ms
}

.scrolldown img {
	height: 10px;
	margin-bottom: 5px;
}

@-webkit-keyframes sonarEffect {
	0% {
		opacity: .3
	}
	40% {
		opacity: .5;
		box-shadow: 0 0 0 2px rgba(255, 255, 255, .6), 0 0 10px 10px #344453, 0 0 0 10px rgba(255, 255, 255, .8)
	}
	100% {
		box-shadow: 0 0 0 2px rgba(255, 255, 255, .6), 0 0 10px 10px #344453, 0 0 0 10px rgba(255, 255, 255, .8);
		-webkit-transform: scale(1.5);
		opacity: 0
	}
}

@-moz-keyframes sonarEffect {
	0% {
		opacity: .3
	}
	40% {
		opacity: .5;
		box-shadow: 0 0 0 2px rgba(255, 255, 255, .6), 0 0 10px 10px #344453, 0 0 0 10px rgba(255, 255, 255, .8)
	}
	100% {
		box-shadow: 0 0 0 2px rgba(255, 255, 255, .6), 0 0 10px 10px #344453, 0 0 0 10px rgba(255, 255, 255, .8);
		-moz-transform: scale(1.5);
		opacity: 0
	}
}

@keyframes sonarEffect {
	0% {
		opacity: .3
	}
	40% {
		opacity: .5;
		box-shadow: 0 0 0 2px rgba(255, 255, 255, .6), 0 0 10px 10px #344453, 0 0 0 10px rgba(255, 255, 255, .8)
	}
	100% {
		box-shadow: 0 0 0 2px rgba(255, 255, 255, .6), 0 0 10px 10px #344453, 0 0 0 10px rgba(255, 255, 255, .8);
		transform: scale(1.5);
		opacity: 0
	}
}

/*---------공통---------*/
.more_button a {
	color: #fff;
	padding: 15px 0;
	background-color: #3e8afa;
	border-radius: 4px 4px 4px 4px;
	margin: 0 auto;
	margin-top: 50px;
	font-size: 16px;
	text-align: center;
	color: #fff;
	display: block;
	width: 280px;
}

@media (hover: hover) {
	.more_button a:hover {
		box-shadow: 5px 5px 10px 0 rgba(20, 55, 105, 0.5);
		transition: all .5s;
	}
}

/*---------wrap---------*/
#wrap {
	width: 100%;
}

#wrap .con .tit {
	font-size: 34px;
	font-weight: bold;
	line-height: 1;
	color: #222;
	padding-bottom: 15px;
}

#wrap .con .txt {
	margin-bottom: 50px;
}


/*---------cont01 총 150억 투자 유치---------*/
#cont01 .con01_txtBox p {
	text-align: center;
	letter-spacing: -0.5px;
}

#cont01 .box ul {
	text-align: center;
}

#cont01 .box li {
	text-align: center;
	display: inline-block;
	vertical-align: middle;
}

#cont01 .box li.arrow {
	padding: 0 50px;
}

#cont01 .box .scale {
	width: 200px;
	height: 200px;
	margin: 10px auto;
	border: 2px solid #ddd;
	box-sizing: border-box;
	border-radius: 100%;
	font-weight: bold;
}

#cont01 .box span.title {
	letter-spacing: -0.5px;
	display: inline-block;
	color: #777;
	font-size: 20px;
}

#cont01 .box span.year {
	display: block;
	color: #777;
}

#cont01 .box .box_cont01 {
	padding: 15px 0;
}

#cont01 .box .box_cont01 .scale {
	padding: 70px 0;
}

#cont01 .box .box_cont02 .scale {
	width: 230px;
	height: 230px;
	border: 2px solid #ddd;
	padding: 85px 0;
}

#cont01 .box .box_cont03 .scale {
	width: 260px;
	height: 260px;
	border: 2px solid #3e8afa;
	padding: 100px 0;
}

#cont01 .box .box_cont03 .title, #cont01 .box .box_cont03 .year {
	color: #3e8afa;
}


/*---------cont02 아이콘---------*/
#cont02 {
	width: 100%;
	background-color: #222;
}

#cont02 ul {
	margin: -30px;
}

#cont02 ul li {
	float: left;
	width: 33.333%;
	text-align: center;
	padding: 30px;
	box-sizing: border-box;
	border-right: 1px solid #333;
	border-bottom: 1px solid #333;
}

#cont02 ul li:nth-child(3), #cont02 ul li:nth-child(6) {
	border-right: 0;
}

#cont02 ul li:nth-child(4), #cont02 ul li:nth-child(5), #cont02 ul li:nth-child(6) {
	border-bottom: 0;
}

#cont02 ul li img {
	width: 90px;
	display: block;
	margin: 0 auto;
	margin-bottom: 20px;
}

#cont02 ul li p, #cont02 ul li span, .counter {
	color: #fff;
}

#cont02 ul li p.counter {
	display: inline-block;
	font-size: 44px;
	font-weight: bold;
	line-height: 1;
}

/*---------cont03 믿을 수 있는제품---------*/
#cont03 {
	text-align: center;
}

#cont03 ul {
	margin-left: -50px;
}

#cont03 ul li {
	float: left;
	width: 16.6%;
}

#cont03 ul li img {
	width: 100%;
}

#cont03 ul li p {
	font-size: 16px;
	margin-top: 10px;
}

/*---------cont04 국제대회입상---------*/
#cont04 {
	background-color: #e0e7ed;
}

#cont04 > div {
	background: url(../img/awards.png?a=3) no-repeat bottom right;
}

#cont04 ul li {
	margin-bottom: 20px;
}

#cont04 ul li .box_year {
	width: 60px;
	border-radius: 50px;
	background-color: #3e8afa;
	color: white;
	text-align: center;
	line-height: 22px;
	padding: 5px 10px;
	margin-bottom: 10px;
}

/*---------cont05 보유브랜드---------*/
#cont05 {
	text-align: center;
	background-color: #f5f5f5;
}

#cont05 .bx-wrapper {
	max-width: 100% !important;
	width: 100%;
	box-shadow: none;
	border: 0;
	background-color: transparent;
	position: relative;
}

#cont05 .bxslider {
	margin: 0 -20px;
}

#cont05 .bx-wrapper img {
	width: 100%;
	height: 100%;
	display: block;
}

#cont05 .brand_img {
	width: 386px !important;
	padding: 0 20px;
}

#cont05 .brand_img a {
	display: inline-black;
	width: 100%;
}

@media (hover: hover) {
	#cont05 .brand_img:hover .text_box {
		color: #3e8afa;
		transition: all .5s;
	}
}

@media (hover: hover) {
	#cont05 .brand_img:hover .tit {
		color: #3e8afa;
	}
}

#cont05 .brand_img .thumb_wrap {
	width: 100%;
	height: 250px;
	overflow: hidden;
}

#cont05 .brand_img .thumb {
	width: 100%;
	height: 100%;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}

@media (hover: hover) {
	#cont05 .brand_img:hover .thumb {
		ms-transform: scale(1.2);
		-moz-transform: scale(1.2);
		-webkit-transform: scale(1.2);
		-o-transform: scale(1.2);
		transform: scale(1.2);
	}
}

#cont05 .brand_img .text_box {
	padding: 30px;
	background: #fff;
	text-align: left;
	min-height: 85px;
}

#cont05 .brand_img .text_box .tit {
	font-size: 22px;
	padding-bottom: 10px;
}

#cont05 .brand_img .thumb01 {
	background: url(../img/brand/thumb/thumb1.jpg?a=3) no-repeat center;
	background-size: cover;
}

#cont05 .brand_img .thumb02 {
	background: url(../img/brand/thumb/thumb2.jpg?a=3) no-repeat center;
	background-size: cover;
}

#cont05 .brand_img .thumb03 {
	background: url(../img/brand/thumb/thumb3.jpg?a=3) no-repeat center;
	background-size: cover;
}

#cont05 .brand_img .thumb04 {
	background: url(../img/brand/thumb/thumb4.jpg?a=3) no-repeat center;
	background-size: cover;
}

#cont05 .brand_img .thumb05 {
	background: url(../img/brand/thumb/thumb5.jpg?a=3) no-repeat center;
	background-size: cover;
}

#cont05 .brand_img .thumb06 {
	background: url(../img/brand/thumb/thumb7.jpg?a=3) no-repeat center;
	background-size: cover;
}

#cont05 .brand_img .thumb08 {
	background: url(../img/brand/thumb/thumb8.jpg?a=3) no-repeat center;
	background-size: cover;
}

#cont05 .brand_img .thumb09 {
	background: url(../img/brand/thumb/thumb9.jpg?a=3) no-repeat center;
	background-size: cover;
}

#cont05 .brand_img .thumb10 {
	background: url(../img/brand/thumb/thumb10.jpg?a=3) no-repeat center;
	background-size: cover;
}

#cont05 .brand_img .thumb11 {
	background: url(../img/brand/thumb/thumb11.jpg?a=3) no-repeat center;
	background-size: cover;
}

#cont05 .brand_img .thumb12 {
	background: url(../img/brand/thumb/thumb12.jpg?a=3) no-repeat center;
	background-size: cover;
}

#cont05 .brand_img .thumb13 {
	background: url(../img/brand/thumb/thumb13.jpg?a=3) no-repeat center;
	background-size: cover;
}

/*---------news---------*/
#news {
	text-align: center;
}

#news .con .list_txt .tit {
	font-size: 22px;
	line-height: 1.3;
	padding-bottom: 0;
	font-weight: normal;
	text-align: left;
}

/*---------OEM---------*/
#oem {
	background-color: #f5f5f5;
	text-align: center;
}


@media (max-width: 1299px) {
	/*width 992px ~ 1299px*/
	/*---------header---------*/
	/*
	#header .open { margin-top: 20px; }
	#header .close ul { margin-top: 30%;}
	*/
	#header .topMenu {
		display: none;
	}

	#header .header_wrap .sidebar ul {
		display: table-cell;
		vertical-align: middle;
		margin: 0 auto;
		text-align: center;
	}

	#header .header_wrap .sidebar li a,
	#header .header_wrap .sidebar li p {
		color: #fff;
		font-size: 20px;
		padding: 20px 0;
		display: block;
	}

	#header .header_wrap .sidebar .submenu {
		width: 100%;
		display: block;
	}

	#header .header_wrap .sidebar .submenu a {
		padding: 5px 0;
	}

	#header .header_wrap .sidebar .has-sub.open > .submenu {
		margin-bottom: 50px;
		max-height: 300px;
	}

	input[id="menuicon"] + label {
		display: block;
		width: 25px;
		height: 20px;
		position: relative;
		cursor: pointer;
		float: right;
		margin-top: 25px;
	}

	input[id="menuicon"] + label span {
		display: block;
		position: absolute;
		width: 100%;
		height: 2px;
		border-radius: 30px;
		background: white;
		transition: all, 0.2s;
		z-index: 101;
	}

	input[id="menuicon"] + label span:nth-child(1) {
		top: 0;
	}

	input[id="menuicon"] + label span:nth-child(2) {
		top: 50%;
		transform: translateY(-50%);
	}

	input[id="menuicon"] + label span:nth-child(3) {
		bottom: 0;
	}

	input[id="menuicon"]:checked + label span:nth-child(1) {
		top: 50%;
		transform: translateY(-50%) rotate(45deg);
	}

	input[id="menuicon"]:checked + label span:nth-child(2) {
		opacity: 0;
	}

	input[id="menuicon"]:checked + label span:nth-child(3) {
		bottom: 50%;
		transform: translateY(50%) rotate(-45deg);
	}

	div[class="sidebar"] {
		width: 100%;
		height: 100vh;
		display: table;
		table-layout: fixed;
		background-color: #000;
		opacity: 0.9;
		position: fixed;
		top: 0;
		left: -9999px;
		z-index: 100;
		transition: all .1s;
	}

	input[id="menuicon"]:checked + label + div {
		left: 0;
	}

	.fixed-header input[id="menuicon"] + label span {
		background: #222;
	}

	.fixed-header input[id="menuicon"]:checked + label span:nth-child(1), .fixed-header input[id="menuicon"]:checked + label span:nth-child(3) {
		background: #fff;
	}

	/*---------visual_main---------*/
	#visual_main .mainTxt_wrap .copy {
		bottom: 100px;
	}

	#visual_main .mainTxt_wrap h1 {
		font-size: 46px;
		line-height: 1;
	}

	#visual_main .mainTxt_wrap h1 span {
		font-size: 30px;
	}

	#visual_main .mainTxt_wrap a {
		width: 390px;
	}

	.scrolldown {
		bottom: 80px;
	}

	/*---------cont01 총 150억 투자 유치---------*/
	#cont01 .box li.arrow {
		padding: 0 30px;
	}

	/*---------cont03 믿을 수 있는제품---------*/
	#cont03 ul li p {
		font-size: 14px;
	}

	#cont03 ul {
		margin-left: -40px;
	}

	/*---------cont05 보유브랜드---------*/
	#cont05 > .container {
		width: 100%;
		max-width: 100%;
	}

	#cont05 .bx-wrapper {
		overflow: hidden;
	}

	#cont05 .brand_img .text_box {
		min-height: 80px;
	}

	.bx-viewport {
		overflow: visible !important;
	}

	#cont05 .brand_img .text_box .tit {
		font-size: 20px;
	}

	/*---------news---------*/
	#news .con .list_txt .tit {
		font-size: 20px;
		margin: 5px auto 0 auto;
	}


}

@media (max-width: 991px) {
	/*width 768px ~ 991px*/
	/*---------footer---------*/
	#footer .footer_wrap .footer_info {
		width: 100%;
		overflow: hidden;
	}

	#footer .footer_wrap .footer_info span.bar2 {
		display: block;
		height: 0;
	}

	#footer .footer_wrap .copyright {
		padding-top: 20px;
		margin-top: 20px;
	}

	/*---------visual_main---------*/
	#visual_main .mainTxt_wrap .copy {
		bottom: 200px;
	}

	#cont04 > div {
		background-position: center right -100px;
	}

	/*---------cont01 총 150억 투자 유치---------*/
	#cont01 .box span.title {
		font-size: 18px;
	}

	#cont01 .box .box_cont01 .scale {
		width: 160px;
		height: 160px;
		padding: 55px 0;
	}

	#cont01 .box .box_cont02 .scale {
		width: 180px;
		height: 180px;
		padding: 64px 0;
	}

	#cont01 .box .box_cont03 .scale {
		width: 200px;
		height: 200px;
		padding: 70px 0;
	}

	#cont01 .box li.arrow {
		padding: 0 15px;
	}

	#cont01 .box li.arrow img {
		height: 30px;
	}

	/*---------cont03 믿을 수 있는제품---------*/
	#cont03 ul li {
		width: 33.333%;
	}

	#cont03 ul li:nth-child(4), #cont03 ul li:nth-child(5), #cont03 ul li:nth-child(6) {
		margin-top: 40px;
	}

	#cont03 ul li img {
		width: 80%;
	}

	/*---------news---------*/
	#news .list_wrap ul {
		margin: 0 -10px;
	}

	#news .list_wrap ul li {
		width: 100%;
		padding: 10px;
		margin-bottom: 10px;
	}

	#news .con .list_txt .tit {
		height: auto;
	}

}

@media (max-width: 767px) {
	/*width ~ 767px*/
	/*---------header---------*/
	#header {
		height: 50px;
	}

	#header .logo {
		top: 16px;
	}

	#header .logo img {
		height: 18px;
	}

	#header .header_wrap {
		height: 55px;
	}

	input[id="menuicon"] + label {
		margin-top: 20px;
		width: 20px;
		height: 16px;
	}

	/*---------footer---------*/
	#footer {
		padding: 50px 0;
	}

	#footer .footer_wrap a.foologo {
		margin-bottom: 10px;
	}

	#footer .footer_wrap a.foologo img {
		height: 22px;
	}

	#footer .footer_wrap .footer_info, #footer .footer_wrap .footer_info span, #footer .footer_wrap .footer_info a {
		font-size: 14px;
	}

	#footer .footer_wrap .footer_info span.bar {
		display: block;
		height: 0;
		visibility: hidden;
	}

	#footer .footer_wrap .copyright .left p {
		font-size: 14px;
	}

	#footer .footer_wrap .copyright .left, #footer .footer_wrap .copyright .right {
		float: none;
		text-align: center;
	}

	#footer .footer_wrap .copyright .right a {
		width: 25px;
		margin-left: 0;
		margin-top: 10px;
		padding: 0 2px;
	}

	/*---------footer top --------*/
	#top .topbutton {
		width: 40px;
		height: 40px;
		background-color: #3e8afa;
		color: #fff;
		font-size: 12px;
		line-height: 40px;
		text-align: center;
	}

	/*---------visual_main---------*/
	#visual_main .mainTxt_wrap h1 {
		font-size: 30px;
		line-height: 1.1;
	}

	#visual_main .mainTxt_wrap h1 span {
		font-size: 20px;
	}

	#visual_main .mainTxt_wrap a {
		width: 200px;
		font-size: 14px;
		margin-top: 15px;
		padding: 10px 0;
	}

	#visual_main .mainTxt_wrap .copy {
		bottom: 140px;
	}

	#visual_main .mainTxt_wrap .subtxt {
		font-size: 14px;
	}

	.videoWrapper iframe {
		width: 130%;
	}

	@media (max-aspect-ratio: 16/9) {
		.videoWrapper {
			width: 300%;
			left: -180%;
		}
	}
	.scrolldown {
		bottom: 70px;
	}

	/*---------wrap---------*/
	#wrap .con .tit {
		font-size: 26px;
		line-height: 1.2;
		padding-bottom: 10px;
	}

	#wrap .con .txt {
		margin-bottom: 20px;
	}

	/*---------공통---------*/
	.more_button a {
		width: 100%;
		margin-top: 30px;
		font-size: 14px;
		padding: 10px 0;
	}


	/*---------cont01 총 150억 투자 유치---------*/
	#cont01 .box span.title {
		font-size: 16px;
	}

	#cont01 .box li.box_cont03 {
		margin: -15px 0 0 -35px;
	}

	#cont01 .box .scale {
		margin: 5px;
	}

	#cont01 .box .box_cont01 .scale {
		width: 120px;
		height: 120px;
		padding: 35px 0;
	}

	#cont01 .box .box_cont02 .scale {
		width: 150px;
		height: 150px;
		padding: 50px 0;
	}

	#cont01 .box .box_cont03 .scale {
		width: 180px;
		height: 180px;
		padding: 64px 0;
	}

	#cont01 .box li.arrow {
		display: none;
	}


	/*---------cont02 아이콘---------*/
	#cont02 ul {
		margin: 0;
	}

	#cont02 ul li {
		width: 50%;
		padding: 20px;
		min-height: 180px;
	}

	#cont02 ul li:nth-child(3), #cont02 ul li:nth-child(6) {
		border-right: 1px solid #333;
	}

	#cont02 ul li:nth-child(2n) {
		border-right: 0;
	}

	#cont02 ul li:nth-child(4) {
		border-bottom: 1px solid #333;
	}

	#cont02 ul li p.counter {
		font-size: 36px;
	}

	#cont02 ul li img {
		width: 60px;
	}

	/*---------cont03 믿을 수 있는제품---------*/
	#cont03 ul {
		margin-left: -20px;
	}

	#cont03 ul li {
		width: 50%;
	}

	#cont03 ul li:nth-child(3), #cont03 ul li:nth-child(4), #cont03 ul li:nth-child(5), #cont03 ul li:nth-child(6) {
		margin-top: 20px;
	}

	#cont03 ul li p {
		margin-top: 0;
	}

	/*---------cont04 국제대회입상---------*/
	#cont04 {
		background-image: url(../img/awards.png?a=3);
		background-position: bottom right -100px;
		background-repeat: no-repeat;
		background-size: 80%;
	}

	#cont04 > div {
		background: none;
	}

	#cont04 ul li .box_year {
		margin-bottom: 5px;
	}

	/*---------cont05 보유브랜드---------*/
	#cont05 .bxslider {
		margin-left: -10px;
	}

	#cont05 .brand_img {
		width: 250px !important;
		padding: 0 10px;
	}

	.bx-viewport {
		overflow: visible !important;
	}

	#cont05 .brand_img .thumb_wrap {
		height: 180px;
	}

	#cont05 .brand_img .text_box {
		padding: 30px 20px;
		min-height: 70px;
	}

	#cont05 .brand_img .text_box .tit {
		font-size: 18px;
	}

	/*---------news---------*/
	#news .list_wrap ul li:last-child {
		margin-bottom: 0;
		padding-bottom: 0;
	}

	#news .con .list_txt .tit {
		font-size: 18px;
	}
}

/*---------표준 문서 형식 보정---------*/
/* 2026-10-01 모든 페이지 앞에 <!doctype html> 을 두어 표준 모드로 통일하면서, 예전에 호환 모드로 그려지던 화면을 그대로 두기 위한 규칙이다.
   호환 모드는 글자 없이 그림·단추만 있는 줄에 글꼴 기준선 아래 여백을 두지 않았다. 표준 모드에서 같은 모양이 되도록 위에 붙인다.
   body.layout-compat 은 예전에 호환 모드였던 페이지(메인·회사소개·브랜드 목록·채용·뉴스·이야기·개인정보 안내)에만 붙는다. */
.layout-compat #footer .footer_wrap a.foologo,
.layout-compat #visual_main .main_bg > img,
.layout-compat #cont03 ul li img,
.layout-compat .companyWrap img,
.layout-compat #recruit_img,
.layout-compat .scrolldown img {
	vertical-align: top;
}

/* 호환 모드는 표(table)의 글자 정렬을 물려받지 않고 처음 값으로 되돌렸다(제목 칸 가운데 정렬). */
.layout-compat table {
	text-align: start;
}

.layout-compat .bx-wrapper .bx-controls-auto {
	line-height: 0;
}

/*---------폰 화면 다듬기---------*/
/* 2026-10-01 폰에서 어색하던 곳만 고친다. 색·글꼴·배치는 그대로 둔다. */

/* 햄버거 메뉴: 열린 동안 뒤 화면이 같이 스크롤되지 않게 하고, 메뉴 높이를 지금 보이는 화면 높이에 맞춘다. */
@media (max-width: 1299px) and (hover: none) {
	html:has(#menuicon:checked),
	html:has(#menuicon:checked) body {
		overflow: hidden;
	}
}

@media (max-width: 1299px) {
	div[class="sidebar"] {
		height: 100dvh;
		overscroll-behavior: contain;
	}

	input[id="menuicon"] + label,
	#cont05 .brand_img a {
		-webkit-tap-highlight-color: transparent;
	}
}

/* 브랜드 상세의 영상 대신 넣은 그림(니몸내몸·홈블랑제·베베펄스)이 폰 폭을 넘지 않게 한다. */
@media (max-width: 991px) {
	.movie img {
		max-width: 100%;
		height: auto;
	}
}

@media (max-width: 767px) {
	/* 머리글 높이를 한 값(50px)으로 맞추고 햄버거 단추를 로고와 같은 높이 가운데에 둔다. */
	#header .header_wrap {
		height: 50px;
	}

	input[id="menuicon"] + label {
		margin-top: 17px;
	}

	/* TOP 단추를 손가락으로 누르기 쉬운 크기(44px)로 */
	#top .topbutton {
		width: 44px;
		height: 44px;
		line-height: 44px;
	}

	/* 입력칸 글자가 16px 보다 작으면 아이폰이 누를 때마다 화면을 확대한다. */
	.inquiry select,
	.inquiry input,
	.inquiry textarea,
	.email input,
	.inquiry select option {
		font-size: 16px;
	}

	/* 폰(특히 아이폰)은 배경 고정(fixed)을 지원하지 않거나 그림을 페이지 전체 높이로 키워 흐리게 보인다. */
	.sub_bg {
		background-attachment: scroll;
	}

	/* 개인정보 표: 칸 안 여백 40px 때문에 글자가 한 글자씩 세로로 쌓이던 것을 폰 글자 크기와 여백으로 */
	table#privacyTb th,
	table#privacyTb td {
		padding: 10px 8px;
		font-size: 14px;
	}

	table#privacyTb td.mixed .plain {
		font-size: 14px;
	}
}