:root {
	--css_theme_1_init_bg: #462621;
	--css_theme_1_init_border: transparent;
	--css_theme_1_init_color : #fff;

	--css_theme_1_active_bg: #252832;
	--css_theme_1_active_border: transparent;
	--css_theme_1_active_color : #fff;


	--css_theme_1_hover_bg: #b59974;
	--css_theme_1_hover_border: transparent;
	--css_theme_1_hover_color: #ffffff;

	--css_theme_2_init_color: #444444;
	--css_theme_2_active_color: #dc3519;
	--css_theme_2_hover_color: #dc3519;

	--css_theme_3_active_bg: #4a5569;


	--top-bar-height: 4rem;
	--top-bar-bgcolor: #526f53;
	--top-menu-height: 7rem;


	--base-color-01: #ce6f67;
	--base-color-02: #526f53;
	--base-color-03: #d6bd9d;
	--base-color-04: #472522;

	--base-font-serif:
		"GounBatang",			     /* 웹폰트 명조체 (선택) */
		"Apple SD Gothic Neo",       /* macOS 기본 한글 폰트 */
		"AppleMyungjo",              /* macOS 명조체 (구형) */
		"Malgun Gothic",             /* Windows 기본 한글 폰트 */
		"Batang",                    /* Windows 명조체 */
		serif;                       /* 마지막 fallback */


}
@font-face {
    font-family: 'GounBatang';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/GowunBatang-Regular.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GounBatang';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/GowunBatang-Bold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}



.bg--base-color-01 { background-color: var(--base-color-01); }
.bg--base-color-02 { background-color: var(--base-color-02); }
.bg--base-color-03 { background-color: var(--base-color-03); }
.bg--base-color-04 { background-color: var(--base-color-04); }







HTML, BODY {
	transition: font-size 0.3s ease;
}



BODY {
	font-family: 'Noto Sans KR', 'Malgun Gothic', dotum, Sans-serif, AppleGothic;
	font-size:1.7rem;
	
}


/*
html, body {
	font-size:16px;
}
*/
/* Header */

header a:hover {
	text-decoration: none;
}
HEADER, FOOTER, NAV, ASIDE, SECTION, MAIN {
	position: relative;
}
H1,H2,H3,H4,H5 {
	font-weight:500;
}
H1 {
	font-size:3rem;
}
.wrap {
	width:100%;
	margin:auto;
	overflow:hidden;
}
.main {
	padding: 8rem 0;
}
.main::after {
	content:'';
	display:block;
	clear:both;
}



#DZSMART_moFold_bg, #DZSMART_moFold, #DZSMART_moSearch { display:none; }
#sV::placeholder {
	color: #aaa;
}





/* Cover */
#CoverSlide-Main {
	height: 45rem;
}
#CoverSlide-Sub {
	height: 20rem;
}




/* HeadingArea */
#section_location {
	display:flex;
	position: relative;
	padding:1rem 0 2rem;
	border-bottom: 2px solid #555;
	margin-bottom: 7.5rem;
}
#section_location::after {
	display: block;
	content: "";
	clear: both;
}
#section_location .pageTitle {
	/* float:left; */
	display: inline-flex;
	color: #263238;
	line-height: 1;
	letter-spacing: -1px;
}
/* pageLocation */
#section_location .pageLocation {
	/* float:right; */
	display: inline-flex;
    align-items: flex-end;

	color: #777;
	padding: 1rem 1.5rem 0;
}
#section_location .pageLocation:after {
	display: block;
	content: "";
	clear: both;
}
#section_location .pageLocation li {
	position: relative;
	display: inline-block;
	vertical-align: middle;
}
#section_location .pageLocation li.home:after {
	font-family: xeicon!important;
	content: "\e900";
	display: inline-block;
	speak: none;
	font-style: normal;
	font-weight: 400;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	vertical-align: middle;
	font-size:1.9rem;
	-webkit-font-smoothing: antialiased;
}

#section_location .pageLocation li:before {
	content: "";
	display: inline-block;
	border: solid #999;
	border-width: 1px 1px 0 0;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);

	margin: 0 1rem 0 0.5rem;
}
#section_location .pageLocation li:first-child:before {
	display: none;
}

#section_location .pageAccessory { display:inline-flex; align-items: center; margin:0; margin-left:auto; /*float:right;*/ }
#section_location .pageAccessory [class$="_btn"] {display: inline-block; vertical-align:middle;  border-radius: 50%; width: 3.5rem; height: 3.5rem; line-height:1.85; text-align: center; font-size: 1.9rem; color: #666; background:#fff; border: 1px solid #ddd; position:relative; z-index:2; transition: all 0.5s ease-in-out; }
#section_location .pageAccessory BUTTON[class$="_btn"] { line-height:1;}
#section_location .pageAccessory [class$="_btn"]:hover { background-color: var(--css_theme_1_init_bg) ; border-color:#2E313D; color: #fff;   }

#section_location .pageAccessory .zoom_inout ,
#section_location .pageAccessory .social_share { display: inline-block; vertical-align:middle; padding:0 0.4rem; position: relative; z-index: 2; }
#section_location .pageAccessory .zoom_inout #DZSMART_Zoom_inout ,
#section_location .pageAccessory .social_share #DZSMART_Social_Share { display:none; }

#section_location .pageAccessory .zoom_inout #DZSMART_Zoom_inout:checked ~ .zoom_types ,
#section_location .pageAccessory .zoom_inout #DZSMART_Zoom_inout:checked ~ .zoom_types .zoom_close_btn ,
#section_location .pageAccessory .social_share #DZSMART_Social_Share:checked ~ .social_list ,
#section_location .pageAccessory .social_share #DZSMART_Social_Share:checked ~ .social_list .social_close_btn { opacity: 1; visibility: visible; }
#section_location .pageAccessory .zoom_inout:hover .zoom_types,
#section_location .pageAccessory .zoom_inout:hover .zoom_types .zoom_close_btn,
#section_location .pageAccessory .social_share:hover .social_list,
#section_location .pageAccessory .social_share:hover .social_list .social_close_btn { opacity: 1; visibility: visible; }

#section_location .pageAccessory .zoom_inout.active .social_open_btn ,
#section_location .pageAccessory .social_share.active .social_open_btn { opacity: 0; visibility: hidden }
#section_location .pageAccessory .zoom_inout .zoom_types ,
#section_location .pageAccessory .zoom_inout .zoom_close_btn ,
#section_location .pageAccessory .social_share .social_list ,
#section_location .pageAccessory .social_share .social_close_btn { position: absolute; right: 0.4rem;  top: 0%; opacity: 0; visibility: hidden }
#section_location .pageAccessory .zoom_inout .zoom_close_btn ,
#section_location .pageAccessory .social_share .social_close_btn { right: 0; z-index: 2; border-color:#999 }
#section_location .pageAccessory .zoom_inout .zoom_types ul ,
#section_location .pageAccessory .social_share .social_list ul { 
	display: flex;
    justify-content: space-evenly;
    align-items: center;
	background-color: #fff; border: 1px solid #ddd; border-radius: 3.5rem; padding: 0.4rem 3.5rem 0.5rem 0.5rem; height:3.5rem;  font-size: 1.9rem; }
#section_location .pageAccessory .zoom_inout .zoom_types li ,
#section_location .pageAccessory .social_share .social_list li { display: block; padding: 0 1rem; height: 100%;}
#section_location .pageAccessory .zoom_inout .zoom_types li i ,
#section_location .pageAccessory .social_share .social_list li i { /* border-radius: 50%;  width: 2.2rem; height: 2.2rem; text-align: center; color: #fff; padding-top: 0.3rem; -webkit-transition: all 0.2s; transition: all 0.2s */}
#section_location .pageAccessory .social_share .social_list li .xi-facebook { background-color: #4267b2; border: 1px solid #4267b2 }
#section_location .pageAccessory .social_share .social_list li .xi-twitter { background-color: #01aced; border: 1px solid #01aced }
#section_location .pageAccessory .social_share .social_list li .xi-naver { background-color: #3acc15; border: 1px solid #3acc15 }
#section_location .pageAccessory .social_share .social_list li .xi-kakaostory { background-color: #fac500; border: 1px solid #fac500 }
#section_location .pageAccessory .zoom_inout .zoom_types li BUTTON ,
#section_location .pageAccessory .social_share .social_list li BUTTON { 
    display: flex;
    align-items: center;
    justify-content: center;
	overflow:hidden;
	height:100%; aspect-ratio: 1 / 1; border:1px solid #ccc; border-radius: 100%; background: transparent;  margin: 0; padding:0; 
}
#section_location .pageAccessory .social_share .social_list li BUTTON:hover i { background-color: transparent }
#section_location .pageAccessory .social_share .social_list li BUTTON:hover .xi-facebook { color: #4267b2 }
#section_location .pageAccessory .social_share .social_list li BUTTON:hover .xi-twitter { color: #01aced }
#section_location .pageAccessory .social_share .social_list li BUTTON:hover .xi-naver { color: #3acc15 }
#section_location .pageAccessory .social_share .social_list li BUTTON:hover .xi-kakaostory { color: #fac500 }

#section_location .pageAccessory .zoom_inout .zoom_open_btn { font-family: 'Noto Sans KR', 'Malgun Gothic', dotum, 'Sans-serif', AppleGothic; }
#section_location .pageAccessory .zoom_inout .zoom_types li BUTTON:hover { background-color: var(--css_theme_1_init_bg) ; color:#fff; border-color:#2E313D; }




/* Footer */
footer .mail:after {
	content: "@denobiz.com";
	display: inline-block;
}
footer .info #companyMoreveiw { display:none;}
footer .copyright {
	font-size:1.4rem;
}




/* ======================================== Media Query ======================================== */
/********************* Mobile *********************/
@media all and (max-width: 767px) {
	body {
		font-size: 1.4rem;
	}


	/* Cover */
	#CoverSlide-Main { height:35rem; }
	#CoverSlide-Sub { height: 10rem; }

}

/********************* Mobile(landscape) *********************/
@media all and (min-width: 481px) and (max-width: 767px) {
}

/********************* Tablet *********************/
@media all and (min-width: 768px) and (max-width: 1023px) {


	/* Cover */
	#CoverSlide-Main { height:50rem; }
	#CoverSlide-Sub { height: 15rem; }
}

/********************* Mobile / Tablet *********************/
@media all and (max-width: 1023px) {
	.main {
		padding:0;
	}
	/* layout */
	HEADER,
	HEADER .logo a,
	HEADER NAV .login,
	HEADER .headZone {
		height: 7rem;
		line-height: 7rem;
	}
	HEADER + * {
		margin-top: 7rem !important;
	}


	header {
		z-index: 50;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background: var(--base-color-04);
		box-shadow: 0 0.2rem 0.5rem 0.2rem rgba(0,0,0,.25);
	}
	header .headZone {
		text-align: center;
	}
	header .headZone .DZSMART_moSearch {
		position: absolute;
		right: 1rem;
	}
	header .headZone .DZSMART_moSearch::after  {
		content: "\e97a";
		font-family: xeicon!important;
		color: #fff;
		font-size: 3.2rem;
	}

	header .headZone .searchWrap {
		position: absolute;
		/* display:none; */
		visibility: hidden;
		opacity: 0;
		transition: visibility 0s, opacity 0.1s linear;

		right: 0;
		width:100%;
		padding:1.5rem;
		border-bottom:1px solid #ccc;
		background:#fff;
		line-height: 1;
		box-shadow: 0 0.2rem 0.5rem 0.2rem rgba(0,0,0,.25);
	}

	header .headZone .searchWrap::after {
		content:'';
		display:block;
		clear:both;
	}
	header .headZone .searchWrap .DZSMART_moSearch {
		position: absolute;
	}

	header .searchWrap #sV {
		width: calc(100% - 5rem);
		height:5rem;
		padding:0 1rem;
		border:2px solid var(--css_theme_1_init_bg) ;
		float:left;
		font-size:1.4rem;
	}
	header .searchWrap #sV + BUTTON {
		position: relative;
		width:5rem;
		height:5rem;
		padding:0;
		margin:0;
		border:0;
		background: var(--css_theme_1_init_bg) ;
		float:left;
		color: var(--css_theme_1_init_bg) ;

		color: transparent;
		vertical-align: middle;
		text-align: center;

	}
	header .searchWrap BUTTON::after {

		content: "\e97a";
		font-family: xeicon!important;
		color: #fff;
		font-size: 2rem;
	}


	header #DZSMART_moSearch:checked ~ .headZone .DZSMART_moSearch::after {
		content: "\e921";

	}
	header #DZSMART_moSearch:checked ~ .headZone .searchWrap {
		display:block;
		top:inherit;
		visibility: visible;
		opacity: 1;
	}









	/* 펼쳤을 때 */
	header .logo {
		display: inline-block;
	}
	header .logo a {
		display: inline-block;
		height: 100%;
		line-height: 0;
		vertical-align: middle;
	}
	header .logo img {
		vertical-align: middle;
		max-height: 2.5rem;
	}

	/*
	header .logo {
		width: calc(100% - 12rem);
		max-width:100%;
		height:100%;
		margin:auto;
		padding:0;
		justify-content: center;
	}


	header .logo img {
		height:60%;
		margin:auto;
	}
	*/
	header .logo H1 ,
	header .logo SPAN {
		display:block;
		font-size: 2.6rem;
	}


	header .logo:has(IMG.SiteLogo_mobile) IMG:not(.SiteLogo_mobile) {
		display:none;
	}
	header .logo IMG.SiteLogo_mobile {
		display:block;
	}













	header .topBar {
		position: absolute;
		top: 0;
		right: 0;
		text-align: right;
	}
	header .DZSMART_moFold {
		position: relative;
		display: block;
		cursor: pointer;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		transform: rotate(0deg);

		-webkit-transition: 0.1s;
		-moz-transition: 0.1s;
		transition: 0.1s;

		top: 1.8rem;
		left: 1rem;
		width: 3.2rem;
		height: 3.2rem;

	}
	header .DZSMART_moFold span.bar {
		display: block;
		position: absolute;
		position: relative;
		width: 100%;
		background: #fff;
		opacity: 1;
		left: 0;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		transform: rotate(0deg);


		-webkit-transition: 0.1s;
		-moz-transition: 0.1s;
		transition: 0.1s;


		height: 0.5rem;
		margin-top: 0.5rem;

	}
	header .DZSMART_moFold span:nth-child(1) {
		top: 0;
	}
	#navigation {
		z-index: 30;
		position: absolute;
		top: 0;
	}
	#navigation NAV {
		position: fixed;
		bottom: 0;
		top: 6rem;
		left: -100%;
		width: 70%;
		padding:0;
		background: #fff;
		box-sizing: border-box;
		-webkit-transition: 0.3s;
		-moz-transition: 0.3s;
		transition: 0.3s;
	}
	#navigation NAV a {
		height: 4rem;
		line-height: 4rem;
		text-decoration: none;
		position: relative;
	}
	#navigation NAV .loginArea ,
	#navigation NAV .logoutArea {
		z-index: 33;
		position: absolute;
		bottom: 0;
		padding: 1rem;
		width:100%;
		height: 4.5rem;
		line-height: 1rem;
		border-top: 1px solid #d5d5d5;
		box-sizing: border-box;
	}
	#navigation NAV .loginArea .login,
	#navigation NAV .loginArea .logout {
		color: #fff;
		background: #4a89dc;

		display: inline-block;
		padding: 0 2rem;
		height: 3rem;
		line-height: 3rem;
	}
	#navigation NAV .loginArea .logout {
		background: #585e6a;
	}
	#navigation NAV .loginArea .login:after {
		display: none;
	}
	#navigation NAV .loginArea .member {
		position: relative;
		display: inline-block;
		color: #fff;
	}
	#navigation NAV .loginArea .member:before {
		position: absolute;
		left: 0;
		display: block;
		content: "";
		vertical-align: middle;
		background-image: url("/dzSmart/common/css/imgs//sfix_icon_m.png");
		background-repeat: no-repeat;
	}
	#navigation NAV > ul {
		overflow: auto;
		height: 100%;
		border-bottom: 1px solid #d5d5d5;
	}
	#navigation NAV > ul > li > a {
		position: relative;
		display: block;
		padding: 0 4%;
		color: #272739;
		border-bottom: 1px solid #d5d5d5;
		background: #f0f2f5;
		-webkit-transition: 0.3s;
		-moz-transition: 0.3s;
		transition: 0.3s;

		height: 4.8rem;
		line-height: 4.8rem;

	}
	#navigation NAV > ul > li > a:after {
		position: absolute;
		right: 4.5%;
		display: block;
		content: "";
		border: solid #2c2c3d;
		border-width: 0 0 1px 1px;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		transform: rotate(-45deg);
		-webkit-transition: 0.3s;
		-moz-transition: 0.3s;
		transition: 0.3s;

		top: 1rem;
		width: 1rem;
		height: 1rem;
	}
	#navigation NAV li.active a:after {
		top: 2rem;
	}
	#navigation NAV > ul > li.active > ul {
		display: block;
	}

	#navigation NAV li li a {
		display: block;
		padding: 0 6%;
		width: 100%;
		color: #737374;
	}
	#navigation NAV ul ul {
		display: none;
		border-bottom: 1px solid #d5d5d5;
	}
	#navigation NAV li.active li.active a {
		color: var(--css_theme_1_active_bg) ;
		background: transparent;
	}











	#DZSMART_moFold_bg {
		position: fixed;
		top: 0;
		right: 0;
		display: block;
		width: 0;
		height: 100%;
		font-size: 0;
		color: transparent;
		line-height: 0;
		background: rgba(0, 0, 0, 0.4);
		-webkit-transition: 0.32s;
		-moz-transition: 0.32s;
		transition: 0.32s;
	}


	/* 펼쳐졌을 때 */
	#DZSMART_moFold:checked +	#navigation {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 70%;
		height: 100%;
		background: #393d4a;
		box-sizing: border-box;
	}
	#DZSMART_moFold:checked +	#navigation nav {
		left: 0;
	}
	#DZSMART_moFold:checked +	#navigation .DZSMART_moFold {
		z-index: 32;
		position: absolute;
		left: auto;
		right:3%;
		top:25%;
	}
	#DZSMART_moFold:checked +	#navigation .DZSMART_moFold span.bar {
		width: 100%;
		margin-left:0;
		height:0.2rem;
		left:0;
		top:0;

	}
	#DZSMART_moFold:checked +	#navigation .DZSMART_moFold span:nth-child(1) {
		width: 0;
		left: 50%;
	}
	#DZSMART_moFold:checked +	#navigation .DZSMART_moFold span:nth-child(2) {
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	#DZSMART_moFold:checked +	#navigation .DZSMART_moFold span:nth-child(3) {
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
		top:-0.7rem;
	}
	#DZSMART_moFold:checked +	#navigation #DZSMART_moFold_bg {
		z-index: 21;
		width: 30%;
	}


	#navigation NAV > UL > li.active > a {
		font-weight: 400;
		color: #fff;
		background: var(--css_theme_3_active_bg) ;
	}
	#navigation NAV > UL > li.active a::after {
		border-color: #fff;
		-webkit-transform: rotate(135deg);
		-moz-transform: rotate(135deg);
		transform: rotate(135deg);
		-webkit-transition: 0.3s;
		-moz-transition: 0.3s;
		transition: 0.3s;
	}

	#navigation NAV li.active li > a::before {
		position: absolute;
		top: 1.8rem;
		left: 3%;
		display: block;
		content: "";
		width: 0;
		height: 0.4rem;
		vertical-align: middle;
		background:#000;
		visibility:hidden;

		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		transform: rotate(0deg);
	}


	#navigation NAV li.active li.active > a::before {
		background: var(--css_theme_1_active_bg) ;
		width: 0.8rem;
		visibility:visible;
	}
	#navigation NAV li.active li:hover > a::before {
		width: 0.8rem;
		visibility:visible;
	}




	#navigation NAV li.member.off {
		display: none;
	}
	#navigation NAV li.active > ul {
		display: block;
		padding: 1rem 0;
	}

	/*
	.fullpage #contents {
		padding: 0;
	}
	*/
	/* pageLocation
	#section_location .pageLocation {
		right: 0;
		top: 0;
		width: 100%;
		text-align: right;
		border-bottom: 1px solid #cdcdcd;
		background-color: #f9f9f9;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	 */

	footer {
		padding: 0;
		background: #282c32;
	}
	footer .inner,
	footer .inner a,
	footer .inner button {
		color: #969aa3;
	}
	footer .logo {
		display:none;
	}
	footer .foot_nav {
		padding: 1.5rem 0;
		text-align: center;
	}

	footer .foot_nav li {
		position: relative;
		display: inline-block;

		font-size: 1.3rem;
	}
	footer .foot_nav li::before {
		position: absolute;
		top: 1.3rem;
		left: 0;
		display: block;
		content: "";
		width: 1px;
		height: 1rem;
		background: #4a4d51;
	}
	footer .foot_nav li:first-child:before {
		display: none;
	}
	footer .foot_nav li a {
		display: block;
		padding: 0.5rem 1rem;
	}
	footer .foot_nav li strong {
		color: #4a83c4;
	}
	footer .info {
		font-size: 1.3rem;
		background: #363b43;
	}
	footer .association {
		padding: 1rem 0;
		text-align: center;
	}
	footer .association:empty {
		padding:0;
	}
	footer .association a {
		margin: 0 0 0 1rem;
	}
	footer .association a:first-child {
		margin: 0;
	}
	footer .info .companyTitle {
		display: block;
		margin:0;
		padding: 1rem 0;
		text-align: center;
		border-top: 1px solid #3c414a;
		cursor: pointer;
		font-weight:bold;
		font-size:1.8rem;
	}
	footer .info .companyTitle span {
		position: relative;
		padding:0;
		padding-right:2.5rem;
	}
	footer .info .companyTitle span:after {
		position: absolute;
		top: 0.5rem;
		right: 0;
		display: block;
		content: "";
		width: 1rem;
		height: 1rem;
		vertical-align: middle;
		border: 1px solid #8c8e92;
		border-width: 0 0 1px 1px;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		transform: rotate(-45deg);
		-webkit-transition: 0.3s;
		-moz-transition: 0.3s;
		transition: 0.3s;
	}
	footer .info #companyMoreveiw:checked ~ .companyTitle span:after ,
	footer .info.selected .companyTitle span:after {
		top: 0.5rem;
		-webkit-transform: rotate(135deg);
		-moz-transform: rotate(135deg);
		transform: rotate(135deg);
		-webkit-transition: 0.3s;
		-moz-transition: 0.3s;
		transition: 0.3s;
	}
	footer .info > ul {
		overflow: hidden;
		height: 0;
	}
	footer .info #companyMoreveiw:checked ~ UL ,
	footer .info.selected > ul {
		padding: 1.5rem 2.5rem;
		height: auto;
		border-top: 1px solid #282c32;
	}
	footer .info ul dl:after {
		display: block;
		content: "";
		clear: both;
	}
	footer .info ul li dt,
	footer .info ul li dd {
		float: left;
		line-height: 1.5;
	}
	footer .info ul li dt {
		width: 30%;
	}
	footer .info ul li dd {
		width: 70%;
	}
	/*
	footer .info dd {
		margin: 0 2rem 0 0;
	}
	*/
	footer .info dd a.btnBizinfo {
		display: inline-block;
		padding: 0.2rem 0.5rem;
		border: 1px solid #4f5259;
	}
	footer .copyright {
		width: 100%;
		text-align: center;
		color: #5c6573;
		border-top: 1px solid #2f343a;
		background: #282c32;
		padding:1rem 0;
	}




}

/********************* PC & tablet *********************/
@media all and (min-width: 768px) {


}

/********************* PC(1024 ~ 1170) *********************/
@media all and (min-width: 1024px) and (max-width: 1170px) {
	/* layout */
	.main {
		padding: 3rem 2rem;
	}

	.wrap ,
	HEADER NAV  {
		max-width: 119rem;
		
	}
	header .headZone {
		padding: 2.5rem 2% 0;
	}


	footer .association {
		right: 3%;
	}
}

/********************* PC(1171 ~ full) *********************/
@media all and (min-width: 1171px) {
	/* layout */

	.wrap ,
	HEADER NAV  {
		max-width: 135rem;
		max-width: 144rem;

	}


	header .headZone {
		padding: 2.5rem 1% 0;
	}




	footer .association {
		right: 0;
	}
}








/********************* PC *********************/
@media all and (min-width: 1024px) {

	/* layout */
	header {
		width:100%;
		z-index: 50;
		position: relative;
		padding: var(--top-bar-height) 0 var(--top-menu-height);
	}
	/* 최상위 */
	header .headZone {
		margin: 0 auto;
		height: 13rem;
		box-sizing: border-box;

	}
	header .headZone .logo {
		display: inline-block;
	}
	header .headZone .logo a {
		display:block;
		width:100%;
		height:100%;
	}
	header .headZone .logo IMG {
		width:100%;
		height:100%;
		object-fit:cover;
	}


	header .searchWrap {
		float: right;
		position: relative;
        display: flex;
        height: 100%;
        align-items: center;
	}
	header .searchWrap:after {
		display: block;
		content: "";
		clear: both;
	}
	header .searchWrap a[class^="btn"] {
		display: inline-block;
		margin: 0;
		padding: 0 2rem;
		height: 4rem;
		line-height: 4rem;
		border: 1px solid #4a505b;
		background: #f1f2f3;
	}
	header .searchWrap a[class^="btn"]:before {
		display: inline-block;
		content: "";
		margin: 0 0.8rem 0 0;
		vertical-align: middle;
		background-repeat: no-repeat;
	}
	header .searchWrap::after {
		content:'';
		display:block;
		clear:both;
	}

	header .searchWrap .DZSMART_moSearch {
		display:none;
	}


	header .searchWrap #sV {
		width:25rem;
		height: 5rem;
		padding:0 3rem;
		border:2px solid var(--css_theme_1_init_bg) ;
		float:left;
		font-size:1.5rem;
		background: rgba(255, 255, 255, .35);
		border-radius: 5rem;
		border-top-right-radius:0;
		border-bottom-right-radius:0;
	}
	header .searchWrap #sV::placeholder {
		color: #444;
		transition: opacity 0.3s ease;
	}
	header .searchWrap #sV:focus::placeholder {
		opacity: 0;
	}

	header .searchWrap #sV + BUTTON {
		width: 6rem;
		height: 5rem;
		padding:0;
		margin:0;
		border:0;
		background: var(--css_theme_1_init_bg) ;
		float:left;
		color: var(--css_theme_1_init_bg) ;

		color: transparent;
		vertical-align: middle;
		text-align: center;

		border-radius: 5rem;
		border-top-left-radius:0;
		border-bottom-left-radius:0;
		padding-right: 0.5rem;
	}
	header .searchWrap BUTTON:after {
		content: "\e97a";
		font-family:xeicon!important;
		color: var(--css_theme_1_init_color) ;
		font-size: 2rem;
		display: block;
	}

	/* 최상단 */
	header .topBar {
		position: absolute;
		top: 0;
		width: 100%;
		height: var(--top-bar-height);
		border-bottom: 0;
		background-color: var(--top-bar-bgcolor);
	}
	header .topBar .inner {
		margin: 0 auto;
		height: 100%;
	}
	header .topBar .inner:after {
		display: block;
		content: "";
		clear: both;
	}
	header .topBar ul,
	header .topBar li,
	header .topBar .login {
		float: left;
		height: 100%;
	}
	header .topBar a ,
	header .topBar BUTTON {
		display: block;
		height: 100%;
		line-height: 1;
		text-align: center;
		box-sizing: border-box;

		font-size: 1.4rem;
	}
	header .topBar .buttonArea {
		float: right;
	}
	header .topBar .buttonArea li {
		margin-left: 0;
	}
	header .topBar .buttonArea a {
		padding:0 2rem;
		width: auto;
		min-width: 11.2rem;
		height:100%;
		color: #fff;
		display: -webkit-flex;
		display:         flex;
		-webkit-align-items: center;
			align-items: center;
		-webkit-justify-content: center;
			justify-content: center;

	}
	header .topBar .login a,
	header .topBar .member > a {
		background: #4a89dc;
	}
	header .topBar .userarea a,
	header .topBar .userarea > a {
		background: #484d61;
	}
	header .topBar .sitemap a {
		background: #585e6a;
	}
	header .topBar .member > a {
		position: relative;
	}
	header .topBar .member > a:after {
		position: relative;
		top: -0.2rem;
		display: inline-block;
		content: "";
		margin: 0 0 0 0.8rem;
		width: 0.8rem;
		height: 0.8rem;
		border: solid #fff;
		border-width: 0 0 2px 2px;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	header .topBar .member:hover .mypage {
		padding: 1px 0 0;
		height: 5rem;
		border-width: 0 1px 1px 1px;
	}
	header .topBar .member .mypage {
		overflow: hidden;
		height: 0;
		z-index: 51;
		position: relative;
		float: none;
		width: 100%;
		border: solid #7f8185;
		border-width: 0;
		background: #fff;
		box-sizing: border-box;
		transition: height 0.3s;
		-webkit-transition: height 0.3s;
		-moz-transition: height 0.3s;
	}
	header .topBar .member .mypage li {
		float: none;
		padding: 0 1.3rem;
		height: auto;
		border-top: 1px solid #ddd;
	}
	header .topBar .member .mypage li:first-child {
		border-top: 0;
	}
	header .topBar .member .mypage li a {
		display: block;
		padding: 0;
		width: 100%;
		height: 2.3rem;
		line-height: 2.3rem;
		color: #777;
	}
	header .topBar .logout a {
		background: #e63f24;
	}
	header .topBar .userjoin a {
		background: #585e6a;
	}
	header .topBar .userinfo a {
		background: #585e6a;
	}
	header .topBar .userjoin + li,
	header .topBar .userinfo + li {
		border-left: 1px solid #484d61;
	}
	header .topBar .zoom button {
		width:4.8rem;
		height:100%;
		border:0;
		border-left:1px solid #ddd;
		padding:0;
		margin:0;
		background:#fff;
	}
	header .topBar .zoom button > i {
		font-size:2.5rem;
	}
	header .topBar .zoom button > span {
		font-size:0;
	}







	#navigation {
		position: absolute;
		width: 100%;
		/*
		height: var(--top-menu-height);
		*/
		background: rgba(255, 255, 255, 1);
		transition: all 0.3s ease;
	}
	#navigation.fixed {
		position: fixed;
		top: 0;
	}

	#navigation:not(.fixed)::before {
		content:'';
		display:block;
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		opacity:0.05;
		background-image:url('/imgs/hanok_docbg_t.png');
		z-index:1;
		pointer-events: none;

	}



	/*
	#navigation.open,
	#navigation:has( > nav > ul:hover) {
		border-bottom: 1px solid #aaa;
	}
	*/
	#navigation > .DZSMART_moFold {
		display: none;
	}
	/* 대분류 배경 */
	#navigation > .nav_bgbar {
		position: absolute;
		width: 100%;
		height:100%;
		box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, .5);
	}
	#navigation > .nav_bgbar::before {
		content:'';
		position: absolute;
		top:0;
		left:0;
		width: 100%;
		height: var(--top-menu-height);
		background-color: var(--css_theme_1_init_bg) ;
	}
	#navigation > .nav_bgbar::after {
		content:'';
		position: absolute;
		top:0;
		left:0;

		width: 100%;
		height:100%;
		border-bottom:1px solid #aaa;
		opacity:0;
	}
	#navigation:has( > nav > ul:hover) > .nav_bgbar::after {
		opacity:1;
	}


	#navigation > nav {
		position: relative;
		/*display: table; */
		display: block;
		width: 100%;
		margin: auto;
		padding: 0;
	}
	#navigation > nav > ul {
		/* display: table-row; */
		display: flex;
		width:100%;
	}
	#navigation > nav > ul:hover {
		border-bottom: 1px solid #aaa;
	}
	#navigation > nav > ul > li {
		/* display: table-cell; */
		flex: 1;
		padding: 0;
	}
	#navigation > nav > ul > li > a {
	    position: relative;

		display: flex;
        align-items: center;
        justify-content: center;

		width: 100%;
		height: var(--top-menu-height);
		font-size: 2rem;
		color: var(--css_theme_1_init_color) ;
		text-align: center;
		text-decoration: none;
		font-weight:500;
		text-shadow: 0 0 5px rgba(0, 0, 0, .25);

		
		transition: background-color ease 0.2s 0s;

	}
	#navigation > nav > ul > li.active > a {
		background: var(--css_theme_1_active_bg) ;
		color: var(--base-color-03) ;
	}
	#navigation > nav > ul > li:hover > a {
		background: var(--css_theme_1_hover_bg) ;
		color: var(--css_theme_1_hover_color) ;
	}
	#navigation > nav > ul > li:hover > ul {
		background: #eee;
	}





	#navigation > nav > ul:not(:has(.active)) > li > a::before ,
	#navigation > nav > ul:not(:has(.active)) > li > a::after ,
	#navigation > nav > ul:not(:has(.active)) > li > a > span::before ,
	#navigation > nav > ul:not(:has(.active)) > li > a > span::after {
		content:'';
		display:block;
		position: absolute;
		background-image:url('/imgs/arrow_box.png');
		width:2rem;
		height:2rem;
		opacity:0;
		left:50%;
		top:50%;
		right:50%;
		bottom:50%;
		transform: translate(-50%, -50%);
		transition: all 0.5s ease-in-out;
	}

	#navigation > nav > ul > li:hover > a::before ,
	#navigation > nav > ul > li:hover > a::after ,
	#navigation > nav > ul > li:hover > a > span::before ,
	#navigation > nav > ul > li:hover > a > span::after {

		top: 0.5rem;
		bottom: 0.5rem;
		left: 0.5rem;
		right: 0.5rem;
		filter: saturate(0) invert(100%);
		opacity:0.35;
	}

	#navigation > nav > ul > li:hover > a::before {
		top: auto;
		right: auto;
		transform: rotate(90deg);

	}
	#navigation > nav > ul > li:hover > a::after {
		bottom: auto;
		right: auto;
		transform: rotate(180deg);
	}

	#navigation > nav > ul > li:hover > a > span::before {
		top: auto;
		left: auto;
		transform: rotate(0deg);
	}
	#navigation > nav > ul > li:hover > a > span::after {
		bottom: auto;
		left: auto;
		transform: rotate(270deg);
	}








	#navigation > nav > ul > li.active:not(:hover) > a {
        box-shadow: inset 2px 2px 2rem 0 rgba(0,0,0,.5);
	}
	#navigation > nav > ul > li.active > a::before ,
	#navigation > nav > ul > li.active > a::after ,
	#navigation > nav > ul > li.active > a > span::before ,
	#navigation > nav > ul > li.active > a > span::after {
		content:'';
		display:block;
		position: absolute;
		background-image:url('/imgs/arrow_box.png');
		width:2rem;
		height:2rem;
		top: 0.5rem;
		bottom: 0.5rem;
		left: 0.5rem;
		right: 0.5rem;
		opacity:0.35;
	}
	#navigation > nav > ul > li.active > a::before {
		top: auto;
		right: auto;
		transform: rotate(90deg);
	}
	#navigation > nav > ul > li.active > a::after {
		bottom: auto;
		right: auto;
		transform: rotate(180deg);
	}

	#navigation > nav > ul > li.active > a > span::before {
		top: auto;
		left: auto;
		transform: rotate(0deg);
	}
	#navigation > nav > ul > li.active > a > span::after {
		bottom: auto;
		left: auto;
		transform: rotate(270deg);
	}
















	#navigation > nav > ul > li > ul {
		display: none;
		display: block;
		margin: 0;
		padding:0;
		height:0;

		background: #fff;
		text-align: center;
		border-right: 1px solid #ddd;

		transition: all 0.3s ease;
		/*
		-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
		*/
		overflow:hidden;

	}
	#navigation.open > nav > ul ul,
	#navigation > nav > ul:hover ul {
		display: block;
		padding: 2rem 0 4rem;
		height: calc(100% - var(--top-menu-height));

	}

	#navigation > nav > ul > li:first-of-type > ul {
		border-left: 1px solid #ddd;
	}
	#navigation > nav > ul > li > ul a {
		display: flex;
        align-items: center;
        justify-content: center;
    

		width: 100%;
		height: 3.2rem;
		font-size: 1.7rem;
   		font-weight:500;
		color: var(--css_theme_2_init_color) ;
		text-align: center;
		text-decoration: none;
	}
	#navigation > nav > ul > li > ul > li.active a  {
		font-weight: 500;
		color: var(--css_theme_2_active_color) ;
	}
	#navigation > nav > ul > li > ul > li a:hover {
		font-weight: 500;
		color: var(--css_theme_2_hover_color);;
	}





	footer {
		z-index: 10;
		position: relative;
		width: 100%;
		background: #20242b;
	}
	footer .inner {
		position: relative;
		margin: 0 auto;
		color: #989a9e;
	}
	footer .inner:after {
		display: block;
		content: "";
		clear: both;
	}
	footer .inner > div {
		float: left;
	}
	/* 푸터로고 */
	footer .corp_logo {
		width: 20%;
		padding:7rem 1.5rem 5rem;
	}
	footer .corp_logo > img {
		width: 70%;
	    filter: saturate(0) invert(100%);
	    opacity: .85;
	}
	/* 푸터구역 */
	footer .infoWrap {
		position: relative;
		padding:0;
		width: 100%;
	}
	footer .corp_logo + .infoWrap {
		width: 80%;
	}
	/* 푸터메뉴 */
	footer .foot_nav {
		width: 100%;
		height: 7rem;
		border-bottom: 1px solid #3a3a3a;

		display: -webkit-flex;
		display:         flex;
		-webkit-align-items: center;
			align-items: center;
		-webkit-justify-content: center;
			justify-content: center;

	}

	footer .foot_nav::after {
		display: block;
		content: "";
		clear: both;
	}
	footer .foot_nav li {
		position: relative;
		float: left;
		width: 20%;
		text-align: center;
		font-size: 1.5rem;
		font-family: 'Noto Sans KR', 'Malgun Gothic', dotum, 'Sans-serif', AppleGothic;
	}


	footer .foot_nav li::before {
		position: absolute;
		top:0.7rem;
		left: 0;
		display: block;
		content: "";
		width: 1px;
		height: 1.1rem;
		background: #484848;
	}
	footer .foot_nav li:first-child:before {
		display: none;
	}
	footer .foot_nav li a {
		color: #fff;
		text-decoration: none;
	}
	footer .foot_nav li strong {
		color: #ffc;
		font-weight:400;
	}
	footer .info:after {
		display: block;
		content: "";
		clear: both;
	}
	footer .info {
		padding:3rem 0;
	}
	/* 회사명 */
	footer .info .companyTitle {
		float:left;
		padding-right:1rem;
		font-weight:bold;
	}
	/* 인증로고 구역 */
	footer .association {
		position: absolute;
		right: 3%;
		bottom: 4.5rem;
	}
	footer .association a {
		margin-left:2.5rem;
	}
	footer .association a:first-child {
		margin: 0;
	}
	footer .info dl:after {
		display: block;
		content: "";
		clear: both;
	}
	/* 푸터 항목들 */
	footer .info dt,
	footer .info dd {
		display: inline-block;
		padding:0;
	}
	footer .info dt {
		position: relative;
		padding-left:1rem;
	}
	footer .info dt:first-child {
		padding-left: 0;
	}
	footer .info dd {
		padding-right:0.5rem;

	}
	footer .info dt:after {
		position: absolute;
		top: 0.8rem;
		left: 0;
		display: block;
		content: "";
		width: 1px;
		height: 1rem;
		background: #484848;
	}
	footer .info dt:first-child:after {
		display: none;
	}
	footer .info dd a {
		color: #989a9e;
	}
	footer .info dd a.btnBizinfo {
		display: inline-block;
		margin:0;
		margin-left:1rem;
		padding:0 0.5rem;
		border: 1px solid #4f5259;
		color: #989a9e;
		background: #3b3e45;
	}
	footer .copyright {
		width: 100%;
		height: 5rem;
		display: -webkit-flex;
		display:         flex;
		-webkit-align-items: center;
			align-items: center;
		-webkit-justify-content: center;
			justify-content: center;

		background: #282c32;
		text-align: center;
		color: #8c8e92;
		border-top: 1px solid #3a3a3a;
	}




	/*
	#container {
		min-height: 700px;
	}
	#contents {
		padding-bottom: 90px;
		box-sizing: border-box;
	}
	.mainpage #contents {
		padding: 0;
		width: 100%;
		max-width: 100%;
	}
	*/


}











/********************* PC *********************/
@media all and (min-width: 1024px) {

	
	/* layout */
	BODY.MP header {
		position: absolute;
		background-color: rgba(255,255,255,1);
	}
	BODY.MP header:not(:has( #navigation > nav > ul:hover )) {
		background-color: rgba(255,255,255,0.1);
		backdrop-filter: blur(5px);
	}

	BODY.MP #navigation:not(.fixed):not(:has( > nav > ul:hover ))::before {
		display:none;
	}

	BODY.MP #navigation:not(.fixed):not(:has( > nav > ul:hover )) {
		background: transparent;
	}
	BODY.MP #navigation:not(.fixed):not(:has( > nav > ul:hover )) > .nav_bgbar {
		box-shadow: none;
	}
	BODY.MP #navigation:not(.fixed):not(:has( > nav > ul:hover )) > .nav_bgbar::before {
		background-color: rgba(70,38,33,.1);
	}



    BODY:not(.MP) #header .logo:has(IMG.SiteLogo) IMG:not(.SiteLogo) {
        display:none
    }

    BODY.MP #header .logo:has(IMG.SiteLogo_dark) IMG:not(.SiteLogo_dark) {
        display: none
    }

    BODY.MP #header.fixed IMG.SiteLogo_dark:has(~ IMG.SiteLogo_light), 
	BODY.MP #header:has( #navigation > nav > ul:hover) IMG.SiteLogo_dark:has(~IMG.SiteLogo_light) {
        display: none
    }

    BODY.MP #header.fixed IMG.SiteLogo_dark ~ IMG.SiteLogo_light,
	BODY.MP #header:has( #navigation > nav > ul:hover)  IMG.SiteLogo_dark~IMG.SiteLogo_light {
        display: block
    }
}