@charset "utf-8";

:root {
  --color-white-100: hsl(0, 0%, 100%);
  --color-white-200: hsl(0, 0%, 95%);
  --color-white-300: hsl(0, 0%, 85%);
  --color-white-400: hsl(0, 0%, 75%);
  --color-white-500: hsl(0, 0%, 65%);
  --color-white-600: hsl(0, 0%, 55%);

  --color-black-100: hsl(210, 17%, 12%);
  --color-black-200: hsl(210, 17%, 10%);
  --color-black-300: hsl(210, 16%, 8%);
  --color-black-400: hsl(210, 16%, 6%);
  --color-black-500: hsl(210, 15%, 4%);
  --color-black-600: hsl(210, 15%, 2%);

  --color-blue: hsl(209, 98%, 37%);
  --color-blue-100: hsl(212, 96%, 60%);
  --color-blue-200: hsl(213, 94%, 55%);
  --color-blue-300: hsl(217, 91%, 50%);
  --color-blue-400: hsl(221, 83%, 45%);
  --color-blue-500: hsl(224, 76%, 40%);
  --color-blue-600: hsl(219, 69%, 17%);

  --color-purple-100: hsl(233, 67%, 43%);
  --color-purple-200: hsl(233, 67%, 35%);
  --color-purple-300: hsl(233, 67%, 29%);
  --color-purple-400: hsl(233, 67%, 25%);

  --color-orange-100: hsl(31, 81%, 70%);
  --color-orange-200: hsl(25, 100%, 69%);
  --color-orange-300: hsl(24, 87%, 63%);
  --color-orange-400: hsl(23, 51%, 60%);
  --color-orange-500: hsl(23, 41%, 50%);
  --color-orange-600: hsl(23, 31%, 40%);

  --color-dahong-100: hsl(359, 49%, 69%);
  --color-dahong-200: hsl(359, 67%, 56%);
  --color-dahong-300: hsl(359, 81%, 52%);
  --color-dahong-400: hsl(359, 98%, 36%);
  --color-dahong-500: hsl(359, 91%, 100%);

  --text-tiny: clamp(0.84rem, calc(0.12vw + 0.8rem), 0.89rem);
  --text-small: clamp(0.93rem, calc(0.13vw + 0.91rem), 1rem);
  --text-base: clamp(1.05rem, calc(0.15vw + 1.01rem), 1.12rem);
  --text-medium: clamp(1.18rem, calc(0.17vw + 1.14rem), 1.26rem);
  --text-large: clamp(1.32rem, calc(0.19vw + 1.28rem), 1.41rem);

  --shadow-normal: 0px 5px 15px rgba(0,0,0,0.1);

  --shadow-small: 0 3px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 3px 0 rgba(0, 0, 0, 0.06);
  --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
  --shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.8), 0 4px 6px -2px rgba(0, 0, 0, 0.8);
 
  --t_majorcolor: #0d9775;
}
  
.major_color {
	color: var(--t_majorcolor);
}

.major_colorB {
	color: var(--color-blue-500);
}

#wrap {
	position: absolute;
	width:100%;
	height:100%;
	margin:0;
	padding:0;	 
}
 
.wrap {
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 20px;
}

.wide_wrap {
	margin:0 auto;
	padding:0; 
	position:relative;
	width:100%;
}

.container-wrap {
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
}

/*topmenu*/
#Header {
	position:absolute;
	z-index:200;
	width:100%;
	height:110px;
	background:rgba(255,255,255,1); 
	-webkit-transition: .2s; 
	transition:.2s;
	box-shadow:var(--shadow-normal);
}
 
#Header.topmenuOn {
	-webkit-transition: .2s; 
	transition:.2s;
}

#Header.topmenuOn:after {
	content:'';
	display:block;
	background:rgba(0,0,0,.4); 
	width:100%;
	height:1px;
}

#Header .header_inner {
	position:relative;
	height:80px;
	margin:0px auto;
  	z-index:20; 

	-moz-transition: opacity 0.4s ease-in-out;
	-o-transition: opacity 0.4s ease-in-out;
	-webkit-transition: opacity 0.4s ease-in-out;
	transition: opacity 0.4s ease-in-out;
	-webkit-transition: .2s; 
	transition:.2s;
} 

#Header.topmenuOn .header_inner {
 	width:100%;
	transition: 0.2s;
}

/* 1. 상단 미니 메뉴 영역 */
.top-bar {
    background-color: #eef5fa;
    border-bottom: 1px solid #e2ebf2;
    font-size: 14px;
    color: #444;
    height: 40px;
}

.top-bar-container {
    justify-content: flex-end; 
    height: 100%;
}

.contact-info {
    display: flex;
    gap: 20px;
    margin-right: 30px;
}

.phone-item {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #333;
}

.phone-item i {
    font-size: 11px;
    color: #0073cf;
}

.phone-num {
    color: #000;
    font-weight: bold;
	font-size:120%;
}

.utility-menu {
    display: flex;
    align-items: center;
	font-size:15px;
}

.utility-menu li {
    position: relative;
    padding: 0 15px;
}

.utility-menu li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 12px;
    background-color: #ccc;
}

.utility-menu li a:hover {
    color: #000;
}

/* 2. 메인 네비게이션 영역 */
.main-header {
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.0);
}
#Header.topmenuOn .main-header {
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.main-header:after {
	content: "";
    position: absolute;
    left: 0;
    top: 122px;
    width: 100%;
    height: 1px;
    background-color: #ccc;
	z-index:2;
}

.main-header-container {
    justify-content: space-between;
    height: 100%;
    padding-right: 0; 
}

.header_inner h1.logo {
 	width:285px; 
	height:56px;
	margin-top:15px;
	z-index:2;
	flex-shrink: 0;
	transition: 0.4s;
}
#Header.topmenuOn .header_inner h1.logo {transition: 0.4s;}

.header_inner h1 > a {
	display:block;
	overflow:hidden;
	width:100%;
	height:100%;
	text-indent:-99900px;
	background:url(../image/logo_2.png) 0 0 no-repeat;
	background-size:100%;
	transition: 0.4s;
}

.sub .header_inner h1 > a,
#Header.topmenuOn .header_inner h1 > a {
	 background:url(../image/logo_2.png) 0 0 no-repeat;
	 background-size:100%;
	 transition: 0.4s;
} 

.mobileTopmenu {display:none;}

/* gnb */
#gnb {
	z-index:3; 
}

#gnb > ul {
	z-index:2;
	display:flex;
	justify-content: flex-end;
	-webkit-transition: .6s; 
	transition:.6s;
}

#gnb.hover > ul {
	-webkit-transition: .6s; 
	transition:.6s;
}
#gnb ul,
#gnb ul li,
#gnb ul li a {
	position:relative;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
#gnb ul li a {
	display:block;
}

#gnb > ul > li {
	position:relative;
	padding: 0 0px; 
	width:10%;
	min-width:120px;
 	-webkit-transition: .6s; 	
	transition:.6s;
}
#gnb > ul > li.lartxt {
	min-width:125px;
}

#gnb.hover > ul > li { 
	width:11.111%;
	padding: 0px;   
	-webkit-transition: .6s; 
	transition:.6s; 
}

#gnb > ul > li.hover:after {
	display:block;
	content:'';
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	background: rgba(0,0,0,.1);
	opacity:.2;
	z-index:1;
}

#gnb > ul > li > a {
	background:#fff;	
	color:#222;
	font-size:18px;
	line-height:1.2;
	padding: 30px 20px; 
	z-index:100;
	letter-spacing:-0.03em;
	font-weight:600;
	position:relative;
	width:100%;
	text-align:center;
}

.sub #gnb > ul > li > a,
#gnb > ul > li.hover > a {color:#222; }
 
.topmenuOn #gnb > ul > li > a { color:#222; } 
.topmenuOn #gnb > ul > li.hover > a {color:#000;}

#gnb ul li ul { 
	display:none;
	height:0;
	overflow:hidden;
	width:0;
	margin:0px auto 0 auto;
	position:absolute;
	text-align:left;
	z-index:3;
}

#gnb ul li.hover ul,
#gnb ul.hover li ul {
	position:relative;
	width:100%;
	display:block;
	height:100%;
	padding-top:25px; 
	z-index:2;
}

#gnb ul li ul:before {
	display:block;
	content:'';
	position:absolute;
	width: 0%;
	left:50%;
	height:3px;
	top:0px;
	background: var(--color-blue-400);
	opacity:.8;
	z-index:3;
	transition:.6s;
}

#gnb ul li.hover ul:before {
	width:100%;
	transition:.6s;
	left:0;
}

#gnb ul li ul li {  
	text-align: center; 
	transition:all .2s ease-in-out;	
	-webkit-transition:all .2s ease-in-out;	
	transform:translateY(0px);	
	-webkit-transform:translateY(0px);
}

#gnb ul li.hover > ul > li { 
	transform:translateY(0);	
	-webkit-transform:translateY(0);
}

#gnb ul li ul li a {
	color:#000;
	text-align:center; 
	display:inline-block;
	position:relative;
	padding:7px 0;
	font-size:85%;
	line-height:1.2;
	text-decoration:none;
	opacity:.6;
	letter-spacing:-0.03em;
}
	
#gnb ul li ul li:last-child > a,
#gnb ul li ul li.last-item > a {
	border-bottom:0;
}

#gnb ul li ul li:hover > a,
#gnb ul li ul li a:hover {
	opacity:1;
}

#gnb ul li.mobile_on {display:none;}

/*gnbback*/
.gnb_back {
	position:absolute;
	left:0;
	top:0px;
	width:100%;
	height:80px;	 
 	z-index:1;
	-webkit-transition: .4s; 
	transition:.4s;
	background:rgba(0,0,0,0);
}

.gnb_back span {
	height:0;
	-webkit-transition: .4s; 
	transition:.4s;
}

.gnb_back.active span {
	display:block; 
	width:100%;
	position:relative;
	height:100%;
 	-webkit-transition: .4s; 
	transition:.4s;
}

.gnb_back.active {
	border-top:1px solid #ccc;
	height:540px !important;
	-webkit-transition: .4s; 
	transition:.4s;
	background:rgba(255,255,255,1);
	-webkit-backdrop-filter: blur(15px);
	backdrop-filter: blur(15px);
	box-shadow:var(--shadow-small);
}

.Mgnb_back {
	display:none;
}
 
/*lang*/
.header_utilarea {
	position:absolute;  
	height:100%;
	right:20px;
	z-index:2; 
	top:50%;
	margin-top:-12px;
}

.langarea {
	padding:0px; 
	position:relative;
}

.langarea .langlist {
	text-align:right;
}

.langarea .langlist li {
	display:inline-block;
	vertical-align:middle;
	position:relative;
	padding:0 0px; 
}
  
.langarea a {
	display:block;
	font-size:19px;
 	padding:5px 10px;
	color:#fff;
	font-weight:600;
}

#Header.topmenuOn .langarea a {
	color:#333;
}

.langarea .active a {color:#ff0000;}
#Header.topmenuOn .langarea .active a {color:#ff0000;}
	
.gnb_btn {
	position:relative;
	width:32px;
	height:38px;	 
	background:none;	 
	cursor:pointer;
	margin:0 auto;
}

.gnb_btn span {
	position:absolute;
	margin-left:0px;
	width:100%;
	height:2px;
	background-color:#fff;
	transition:all .2s ease-in-out;
	-webkit-transition:all .2s ease-in-out;
	left:0;
}

.sub .gnb_btn span {
	background-color:#333;
}

.topmenuOn .gnb_btn span {
	background-color:#fff;
}

.gnb_btn span.mgb_top {
	top:8px;
	width:100%;
}

.gnb_btn span.mgb_mid {
	top:18px;
	width:100%;
}

.gnb_btn span.mgb_bot {
	top:28px;
	width:70%;
}

.gnb_btn:hover span.mgb_top {
	width:100%;
}
 
.gnb_btn:hover span.mgb_bot {
	width:100%;
}

/* Responsive gnb */
.btn_nav {
  display: none;
}

@media (max-width: 1400px ){
	.main-header:after {
 		top: 120px; 
	}
	.header_inner h1.logo {
		width:200px; 
		margin-top:20px;
	}
	#gnb > ul > li {
		min-width:100px;
	}
	#gnb > ul > li > a {
		padding: 30px 0px; 
		font-size:17px;
	}
}

@media (max-width: 1180px ){
	.main-header:after {
 		top: 119px; 
	}
	
	#gnb > ul > li {
		min-width:90px;
	}
	#gnb > ul > li > a {
 		font-size:16px;
	}
}

@media (max-width: 1000px ){
	.allMenu {
		display:none;
	}
		
	#Header {
		position:fixed;
	}

	.m_fixed #Header:after {
		background:rgba(0,0,0,.3);   
	}

	.sub #Header:after {
		content:'';
		display:block;
		background:rgba(0,0,0,.1);   
		width:100%;
		height:1px;
	}
		
	.m_fixed #Header {
		background:rgba(255,255,255,.9); 
	}

	#Header .header_inner {
		height:60px;
		width:100%;
		border-radius:0px;
		background:rgba(255,255,255,0);   
		margin:0px auto;
	} 

	.m_open #Header .header_inner {
		background:rgba(255,255,255,.9);
	}
	
	.m_fixed .m_open #Header .header_inner {
		background:rgba(255,255,255,.9);
	}
	
	.main-header {
		box-shadow: 0 4px 10px rgba(0,0,0,0.1);
	}
	
	.main-header:after {
		height: 0px;
	}

	.main-header .container-wrap {
		padding: 0 0px; 
	}

	.header_inner h1.logo {
		padding-left:20px; 
	}

	.m_open .header_inner h1.logo {
		display:block;
	}
		
	#Header.topmenuOn .header_inner h1 > a,
	.m_open .header_inner h1 > a,
	.m_fixed .header_inner h1 > a {
		background:url(../image/logo_2_on.png) 0 0 no-repeat;
		background-size:100%;
	}

	.header_inner h1 > a {
		background:url(../image/logo_2.png) 0 0 no-repeat;
		background-size:100%;
	}

	.gnb-wrap {
		max-width:100%;
	}

	.m_open .mobileTopmenu.on {
		display:block;
		position:relative;
		z-index:999999999;
		left:0%;
		width:100%;
	}	
		
	.m_open .mobileTopmenu.on .mlogo {
		text-align:center;
		padding:20px 0px 20px 5px;
		background:#f7f7f7;
	}

	.m_open .mobileTopmenu.on .mlogo img {
		width:100%;
		max-width:135px;
	}

	.m_open .mobileTopmenu.on .mlange { 
		position:absolute;
		top:50%;
		margin-top:-20px;
		left:0;
		padding:10px;
		z-index:999999999;
	} 

	.m_open .mobileTopmenu.on .mlange span {
		display:inline-block;
		position:relative;
		padding:0 20px;
	}
	
	.m_open .mobileTopmenu.on .mlange span a {
		display:block;
		color:#000;
		font-size:17px;
	}
	
	.m_open .mobileTopmenu.on .mlange span:first-child:before {
		display:block;
		content:'';
		background:#333;
		width:1px;
		height:10px;
		position:absolute;
		right:0;
		top:5px;
	}

	.m_open .mobileTopmenu.on .mlange span.active a {
		color:#0ba29b;
		font-weight:bold;
	}
	
	.top-bar {
		font-size: 12px;
	}
	
	.top-bar-container {
		justify-content: center; 
	}

	.contact-info {
		gap: 5px;
		margin-right: 0px;
	}

	.utility-menu {
		display:none;
	}

	#gnb {
		padding-top:0px;
		width: 100%;
		margin: 0 auto 0 0; 
		position:absolute;
		height:100%;  
		z-index:1;
		-webkit-transition: .6s; 
		transition:.6s; 
		background:#fff;
	}
	
	.m_open #gnb {
		z-index:10;
	}

	#Header.topmenuOn #gnb,
	#gnb.hover {
		width: 100%;
		margin: 0 0 0 0;
		-webkit-transition: .6s;
		transition:.6s;
	}

	#gnb > ul {
		width:0%; 
		text-align:left;
		right:0; 
		position:fixed; 
		z-index:999999999; 
		transform:translateX(100%);
		flex-wrap:wrap;
	}
	
	#gnb > ul {	
		width:100%;
	}
	
	.m_open #gnb > ul {
		transform:translateX(0%); 
		width:100%;
		-webkit-transition: .6s; 
		transition:.6s;
	}
	 
	#gnb > ul > li {
		width:100%;
	}
	
	#gnb.hover > ul > li {
		max-width:100%;
		width:100%;
	}

	#gnb ul li {
		display:block;
		margin:0;
		width:100%;				
		text-align:left;
		padding: 0px 0px 0 0;
		background:#fff;
		border-bottom: 1px solid #ccc;
	}
	 
	#gnb ul li.m_on,
	#gnb ul li:hover {
		background:#f7f7f7;
	}
	
	#gnb > ul > li > a,
	#gnb > ul > li.hover > a {
		color:#333;
		padding: 10px 5px;
		text-align:left;
	}

	#gnb > ul > li.hover > a,
	.sub #gnb > ul > li > a,
	.topmenuOn #gnb > ul > li > a,
	.topmenuOn #gnb > ul > li.hover > a {
		color:#333;
	}

	#gnb ul li ul { 
		background: var(--color-blue-600);
		position: relative;
		top: 0px;
		left: 0px;
		padding: 0px 0 0 0;
		margin-top:0;
		height:0;
		-webkit-transition: .6s; 
		transition:.6s;
	}

	#gnb ul li.m_on > ul {
		width:100%;				
		border-top:1px solid #636363; 
		height:100%;
		-webkit-transition: .6s; 
		transition:.6s;
	}

	#gnb ul li ul li {
		display:block;
		opacity:1;
		border-bottom:0px solid #d7d7d7;
		text-align:left;
		padding:0px;
		padding-left:20px;
		background:none;
	}
	
	#gnb ul li ul li:hover {
		background: rgba(0,0,0,.1);
	} 
	
	#gnb ul li ul li,
	#gnb ul li.m_on ul > li {
		height:auto;
	}
	 
	#gnb ul li ul li a {
		width:100%;
		border-bottom:0;
		padding: 0px 10px;
		text-align:left;
		color:#fff;
		line-height:2;
	}
	
	#gnb ul li ul li a:hover {
		color:#fff;
	} 

	#gnb ul li.mobile_on {
		display:block;
	}
	 
	.m_button {
		width:55px;			
		height:50px;
		position:absolute;
		right:10px;
		top:10px;
		cursor:pointer;
		z-index:999999999999;
	}
	
	.m_button:after {
		position:absolute;
		top:22px;
		right:10px;
		display:block;
		height:8px;
		width:20px;
		border-top:2px solid #333;
		border-bottom:2px solid #333;
		content:''
	}
	
	.m_button:before {
		-webkit-transition:all .3s ease;
		-ms-transition:all .3s ease;
		transition:all .3s ease;
		position:absolute;
		top:16px;
		right:10px;
		display:block;
		height:2px;
		width:20px;
		background:#333;
		content:''
	}
	
	.m_button.menu-opened:after {
		-webkit-transition:all .3s ease;
		-ms-transition:all .3s ease;
		transition:all .3s ease;
		top:36px;
		border:0;
		height:2px;
		right:10px;
		width:19px;
		background:#333;
		-webkit-transform:rotate(45deg);
		-moz-transform:rotate(45deg);
		-ms-transform:rotate(45deg);
		-o-transform:rotate(45deg);
		transform:rotate(45deg);
	}
	
	.m_button.menu-opened:before {
		top:36px;
		right:10px;
		background:#333;
		width:19px;
		-webkit-transform:rotate(-45deg);
		-moz-transform:rotate(-45deg);
		-ms-transform:rotate(-45deg);
		-o-transform:rotate(-45deg);
		transform:rotate(-45deg);
	}

	.m_fixed .m_button {
		width:55px;
		height:50px;
		position:absolute;
		right:10px;
		top:10px;
		cursor:pointer;
		z-index:999999999999;
	}
	
	.m_fixed .m_button:after {
		position:absolute;
		top:22px;
		right:10px;
		display:block;
		height:8px;
		width:20px;
		border-top:2px solid #636363;
		border-bottom:2px solid #636363;
		content:'';
	}
	
	.m_fixed .m_button:before {
		-webkit-transition:all .3s ease;
		-ms-transition:all .3s ease;
		transition:all .3s ease;
		position:absolute;
		top:16px;
		right:10px;
		display:block;
		height:2px;
		width:20px;
		background:#636363;
		content:'';
	}
	
	.m_fixed .m_button.menu-opened:after {
		-webkit-transition:all .3s ease;
		-ms-transition:all .3s ease;
		transition:all .3s ease;
		top:36px;
		border:0;
		height:2px;
		width:19px;
		background:#333;
		-webkit-transform:rotate(45deg);
		-moz-transform:rotate(45deg);
		-ms-transform:rotate(45deg);
		-o-transform:rotate(45deg);
		transform:rotate(45deg);
	}
	
	.m_fixed .m_button.menu-opened:before {
		top:36px;
		background:#333;
		width:19px;
		-webkit-transform:rotate(-45deg);
		-moz-transform:rotate(-45deg);
		-ms-transform:rotate(-45deg);
		-o-transform:rotate(-45deg);
		transform:rotate(-45deg);
	}

	.sub .m_button {
		width:55px;
		height:50px;
		position:absolute;
		right:10px;
		top:10px;
		cursor:pointer;
		z-index:999999999999;
	}
	
	.sub .m_button:after {
		position:absolute;
		top:22px;
		right:10px;
		display:block;
		height:8px;
		width:20px;
		border-top:2px solid #636363;
		border-bottom:2px solid #636363;
		content:'';
	}
	
	.sub .m_button:before {
		-webkit-transition:all .3s ease;
		-ms-transition:all .3s ease;
		transition:all .3s ease;
		position:absolute;
		top:16px;
		right:10px;
		display:block;
		height:2px;
		width:20px;
		background:#636363;
		content:'';
	}
	
	.sub .m_button.menu-opened:after {
		-webkit-transition:all .3s ease;
		-ms-transition:all .3s ease;
		transition:all .3s ease;
		top:36px;
		border:0;
		height:2px;
		width:19px;
		background:#333;
		-webkit-transform:rotate(45deg);
		-moz-transform:rotate(45deg);
		-ms-transform:rotate(45deg);
		-o-transform:rotate(45deg);
		transform:rotate(45deg);
	}
	
	.sub .m_button.menu-opened:before {
		top:36px;
		background:#333;
		width:19px;
		-webkit-transform:rotate(-45deg);
		-moz-transform:rotate(-45deg);
		-ms-transform:rotate(-45deg);
		-o-transform:rotate(-45deg);
		transform:rotate(-45deg);
	}

	.m_fixed .sub .m_button {
		width:55px;
		height:50px;
		position:absolute;
		right:10px;
		top:5px;
		cursor:pointer;
		z-index:999999999999;
	}
	
	.m_fixed .sub .m_button:after {
		position:absolute;
		top:22px;
		right:10px;
		display:block;
		height:8px;
		width:20px;
		border-top:2px solid #636363;
		border-bottom:2px solid #636363;
		content:'';
	}
	
	.m_fixed .sub .m_button:before {
		-webkit-transition:all .3s ease;
		-ms-transition:all .3s ease;
		transition:all .3s ease;
		position:absolute;
		top:16px;
		right:10px;
		display:block;
		height:2px;
		width:20px;
		background:#636363;
		content:'';
	}
	
	.m_fixed .sub .m_button.menu-opened:after {
		-webkit-transition:all .3s ease;
		-ms-transition:all .3s ease;
		transition:all .3s ease;
		top:36px;
		border:0;
		height:2px;
		width:19px;
		background:#333;
		-webkit-transform:rotate(45deg);
		-moz-transform:rotate(45deg);
		-ms-transform:rotate(45deg);
		-o-transform:rotate(45deg);
		transform:rotate(45deg);
	}
	
	.m_fixed .sub .m_button.menu-opened:before {
		top:36px;
		background:#333;
		width:19px;
		-webkit-transform:rotate(-45deg);
		-moz-transform:rotate(-45deg);
		-ms-transform:rotate(-45deg);
		-o-transform:rotate(-45deg);
		transform:rotate(-45deg);
	}

	#gnb .submenu-button {
		position:absolute;
		z-index:999999;
		right:0;
		top:0;
		display:block;
		height:40px;
		width:40px;
		cursor:pointer;
	}
	
	#gnb .first .submenu-button {
		top:0px;
 	}
	
	#gnb ul ul .submenu-button {
		height:30px;
		width:30px;
	}
	
	#gnb .submenu-button:after {
		position:absolute;
		top:0px;
		right:0px;
		width:100%;
		height:100%;
		display:block;
		color:#293189;
		font-family: FontAwesome;
		font-size: 22px;
		text-align:center;
		content: "\f105";
	}
		
	#gnb .submenu-button.submenu-opened:after {
		content: "\f107";
 	}
		 
	.m_open .Mgnb_back {
		display:block;
		position:fixed;
		top:40px;
		width:100%;
		height:100%;
		background:rgba(0,0,0,0.7);   
		z-index:2222;
	}
			 
	.header_utilarea {
		display:none;
	}
		 
	.gnb_back,
	.gnb_back.active {
		display:none;
		height:0;
		height:0px !important;
		border-top:0;
	}
}

@media (max-width: 640px ){
	.top-bar-container .txt {
		display:none;
	}
}

@media(max-width:340px){
	.m_open .mobileTopmenu.on .mlange div a {margin: 0 10px;} 
}

/*allmenu*/
.allmenubox ul > li {
	display:inline-block;
	width:24%;
	vertical-align:top; 
}

.allmenubox ul > li > a {
	display:block;
	font-size:40px;
	font-weight:600;
	margin-bottom:50px;
}

.allmenubox ul > li ul li {
	width:100%;
}

.allmenubox ul > li > ul li a {
	font-size:20px;
	margin-bottom:30px;
	opacity:.8;
}

.allmenubox ul > li > ul li a:hover {
	opacity:1;
}

.allmenubottom {
	padding:40px 10px 0 10px;
}

.allmenubottom .companyinfo_in {
	display:inline-block;
	vertical-align:top;
	width:30.333%;
	margin:0 1%;
	color:#fff;
}

.allmenubottom .companyinfo_in a {
	color:#fff;
}

.allmenubottom .companyinfo_in p {
	font-size:110%;
	display:block;
	margin-bottom:20px;
}

.allmenubottom .companyinfo_in span {
	opacity:.8;
	font-size:80%;
	display:block;
	font-weight:300;
	position:relative;
	padding-left:45px;
}

.allmenubottom .companyinfo_in span strong {
	font-weight:400;
	padding-right:10px;
	position:absolute;
	top:0;
	left:0;
	font-weight:500; 
	margin-right:0px; 
	color:var(--t_majorcolor); 
}

/* 전체 배너 컨테이너 */
.banner-container {
	display: flex;
	width: 100%;
	min-height: 80px;
	background-color: #fff;
	overflow-x: auto; 
	white-space: nowrap;
	position:fixed;
	bottom:-50px;
	z-index:999;
	overflow:hidden;
	-webkit-transition: .5s; 
	transition:.5s;
	opacity:0;
	box-shadow: 0 4px 10px rgba(0,0,0,0.6);
}

body.bodyactive .banner-container {
	opacity:1;
	bottom:0px;
	-webkit-transition: .5s; 
	transition:.5s;
}

/* 공통 섹션 스타일 */
.banner-container .section {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px 15px;
	flex: 1; 
	text-decoration: none;
	transition: opacity 0.2s ease;
}
        
.banner-container .section:hover {
	opacity: 0.9;
}

/* 텍스트 상자 스타일 */
.text-box {
	font-size: 1vw; 
	min-size: 12px; 
	font-weight: bold;
	line-height: 1.2;
	white-space: nowrap;
}

.text-box span {
	display: block;
}

/* 1. 전화번호 섹션 (블루) */
.banner-container .phone-section {
	background-color: #2b56bf;
	color: white;
	flex: 1.6; 
}

.phone-circle {
	width: 2.5vw;
	height: 2.5vw;
	min-width: 32px;
	min-height: 32px;
	background-color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 8px;
}

.phone-circle i {
	color: #2b56bf;
	font-size: 1.4vw;
}

.phone-numbers {
	font-size: 1.2vw;
	font-weight: bold;
	line-height: 1.2;
}

/* 2. 카카오톡 섹션 (옐로우) */
.kakao-section {
	background-color: #fdec00;
	color: #3b1e1e;
}

.kakao-icon {
	font-size: 2vw;
	margin-right: 8px;
}

.kakao-section .text-box span {
	color: #3b1e1e;
}

.kakao-section img {
	width: 2.5vw;
}

/* 3. 네이버 톡톡 섹션 (그린) */
.talktalk-section {
	background-color: #01c13a;
	color: #fff;
}

.talktalk-icon {
	font-size: 2vw;
	margin-right: 8px;
}

.talktalk-section .text-box span {
	color: #fff;
}

.talktalk-section img {
	width: 2.5vw;
}

/* 4. 네이버 스마트스토어 섹션 */
.store-section {
	background-color: #f4f7ff;
	color: #333;
	border-right: 1px solid #e1e7f5;
}

.n-circle {
	width: 3vw;
	height: 3vw;
	min-width: 32px;
	min-height: 32px;
	background-color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 8px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.n-circle span {
	color: #00c73c;
	font-weight: 900;
	font-size: 2vw;
}

.store-text .sub-text {
	font-size: 0.8vw;
	color: #888;
	font-weight: normal;
	margin-top: 1px;
}

/* 5. 실시간 예약 섹션 */
.reserve-section {
	background-color: #f4f7ff;
	color: #333;
	border-right: 1px solid #e1e7f5;
}

/* 6. 단체 예약 섹션 */
.group-section {
	background-color: #f4f7ff;
	color: #333;
}

/* 우측 화이트 영역 공통 아이콘 서클 */
.icon-circle {
	width: 3vw;
	height: 3vw;
	min-width: 32px;
	min-height: 32px;
	background-color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 8px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.icon-circle i {
	font-size: 1.7vw;
	color: #555;
}

/* 태블릿 및 모바일용 미디어 쿼리 */
@media (max-width: 1000px) {
	.text-box { font-size: 13px; }
	.phone-numbers { font-size: 14px; }
	.phone-circle i { font-size: 14px; }
	
	.n-circle span { font-size: 30px; }
	.icon-circle i { font-size: 30px; }
	.store-text .sub-text { font-size: 10px; }

	.banner-container {
		min-height:60px;
	}
	
	.section.phone-section,
	.phone-numbers,
	.section.group-section,
	.text-box {
		display:none;
	}

	.kakao-section img {
		width: 30px;
	}
	
	.talktalk-section img {
		width: 30px;
	}

	.n-circle,
	.icon-circle {
		width: 40px;
		height: 40px;
	}
}

/*footer*/
.quickbox {
	background:#fff;
}

.quickbox_contents {
	display: flex;
	gap: 20px; 
	width: 100%;
	margin:30px auto;
}

/* 공통 카드 스타일 */
.card {
	border-radius: 20px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.05);
	padding: 10px 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.card h5 {
	margin-bottom: 15px;
	margin-top:5px;
	font-weight:600;
}

/* 1. 단체패키지 카드 */
.package-card {
	flex: 1.2;
	background-color: #2b44ad;
	color: white;
	position: relative;
	overflow: hidden;
	min-height: 200px;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.package-info {
	z-index: 2;
}

.package-card h5 {
	color: #fff;
}

.package-card h5 strong {
	color:#fffb00;
}

.package-card ul {
	list-style: none;
	margin-bottom: 25px;
}

.package-card ul li {
	font-size: 18px;
	font-weight: 500;
	margin-bottom: 8px;
	opacity: 0.9;
}

.btn-more {
	display: inline-block;
	background-color: white;
	color: #2b44ad;
	padding: 10px 25px;
	border-radius: 50px;
	text-decoration: none;
	font-weight: bold;
	font-size: 14px;
	transition: background 0.3s;
}

.btn-more:hover {
	background-color: #f0f0f0;
}

/* 동그란 이미지 영역 */
.circle-img {
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background-image: url('/image/quick_group.jpg'); 
	background-size: cover;
	background-position: center;
	border: 3px solid rgba(255,255,255,0.3);
}

/* 2. 계좌안내 카드 */
.account-card {
	flex: 1.2;
	background-color: #d1e0ed;
	color: #111;
	align-items: center;
	text-align: center;
}

.account-card h4 {
	margin-bottom: 20px;
	letter-spacing: -1px;
}

.bank-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	font-size: 18px;
	font-weight: bold;
	color: #0056a8;
	margin-bottom: 15px;
}

.bank-logo span {
	color: #111;
	font-weight: normal;
	font-size: 16px;
}

.account-number {
	font-size: 30px;
	font-weight: 600;
	letter-spacing: 0.5px;
	margin-bottom: 10px;
}

.account-holder {
	font-size: 16px;
	color: #444;
}

/* 3. 등록증 카드 */
.cert-card {
	flex: 1;
	background-color: #e5e5e5;
	color: #111;
	align-items: center;
}

.cert-card h4 {
	margin-bottom: 20px;
	text-align: center;
}

.cert-images {
	display: flex;
	gap: 8px;
	width: 100%;
	justify-content: center;
}

.cert-images span {
	width: 31.333%;
	font-size:80%;
	text-align:center;
	color: rgba(0,0,0,.7);
}

.cert-images img {
	display:block;
	max-width: 80px;
	margin:0 auto;
	height: auto;
	border: 1px solid #ccc;
	background-color: white;
	box-shadow: 0 2px 5px rgba(0,0,0,0.05);
	margin-bottom:10px;
}

@media (max-width: 1200px) {
	.quickbox_contents {
		gap: 10px; 
	}
	.card {
		padding: 20px 20px;
	}
}

/* 반응형 레이아웃 */
@media (max-width: 900px) {
	.quickbox_contents {
		flex-direction: column;
	}
	.package-card {
		text-align: left;
		gap: 20px;
		justify-content: center;
	}
	.package-card ul {
		display: flex;
		flex-direction: column;
	}
}

footer {
	width: 100%;
	background-color: #ffffff;
	color: #333333;
	border-top: 1px solid #e5e5e5;
	margin-top:0px;
}

footer hr {
	margin-top:0px;
	height: 1px; 
	border: 0; 
	border-top: 1px solid #e5e5e5;
	background: #e5e5e5;
}

/* 상단 메뉴 영역 */
.footer-nav {
	margin: 0 auto;
	padding: 15px 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.nav-links a {
	text-decoration: none;
	color: #333333;
	font-size: 14px;
	font-weight: 500;
	margin-right: 25px;
}

.nav-links a:hover {
	color: #000;
}

.sns-icons a {
	color: #666666;
	font-size: 20px;
	margin-left: 20px;
	text-decoration: none;
	transition: color 0.2s;  
}
.sns-icons a img{
	margin:0;
	padding:3px 0 0 0;
	
}
.sns-icons a.shopping{
	
}

/* 하단 상세 정보 영역 */
.footer-info {
	margin: 0 auto;
	padding: 40px 20px;
	display: flex;
	justify-content: space-between;
}

/* 왼쪽 회사 정보 */
.company-details {
	flex: 1;
	padding-right: 40px;
}

.company-name {
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 20px;
	letter-spacing: -0.5px;
}

.info-text {
	font-size: 13px;
	color: #666666;
	line-height: 1.8;
	margin-bottom: 20px;
}

.info-row {
	margin-bottom: 4px;
}

.info-row span {
	margin-right: 15px;
	display: inline-block;
}

.copyright {
	font-size: 12px;
	color: #aaaaaa;
	text-transform: uppercase;
}

/* 중간 구분선 */
.vertical-line {
	width: 1px;
	background-color: #e5e5e5;
	margin: 0 40px;
}

/* 오른쪽 고객센터 */
.call-center {
	flex: 1;
	padding-left: 20px;
}

.call-center h4 {
	color:var(--t_majorcolor);
	margin-bottom: 25px;
}

.call-center h4 span {
	font-size: 80%;
	color: #888888;
	font-weight: normal;
	margin-left: 5px;
}

.phone-row {
	display: flex;
	align-items: center;
	margin-bottom: 0px;
}

.phone-label {
	font-size: 15px;
	color: #666666;
	width: 80px;
}

.phone-number {
	font-size: 150%;
	font-weight: 600;
	color: #000000;
	letter-spacing: -0.5px;
}

/* 반응형 대응 */
@media (max-width: 768px) {
	.footer-nav {
		flex-direction: column;
		gap: 15px;
		align-items: flex-start;
	}
	.nav-links a {
		margin-right: 15px;
	}
	.sns-icons {
		margin-left: 0;
		margin-top: 5px;
	}
	.sns-icons a {
		margin-left: 0;
		margin-right: 20px;
	}
	.footer-info {
		flex-direction: column;
	}
	.vertical-line {
		display: none;
	}
	.company-details {
		padding-right: 0;
		margin-bottom: 40px;
	}
	.call-center {
		padding-left: 0;
		border-top: 1px solid #f0f0f0;
		padding-top: 30px;
	}
}