@charset "utf-8";

/*********************************************
	공통영역
**********************************************/

*	{ outline: 0; }

h1, h2, h3, h4, h5, h6	{ margin: 0; }

@media (max-width:360px)						{html{font-size:12px;}}
@media (min-width:361px) and (max-width:399px)	{html{font-size:13px;}}
@media (min-width:400px) and (max-width:439px)	{html{font-size:14px;}}
@media (min-width:440px) and (max-width:479px)	{html{font-size:15px;}}
@media (min-width:480px) and (max-width:519px)	{html{font-size:16px;}}
@media (min-width:520px) and (max-width:559px)	{html{font-size:17px;}}
@media (min-width:560px) and (max-width:599px)	{html{font-size:18px;}}
@media (min-width:600px) and (max-width:639px)	{html{font-size:19px;}}
@media (min-width:640px)						{html{font-size:20px;}}



body			{ min-width: 320px; font-family: 'Nanum Gothic'; }
img				{ max-width: 100%; }

label,
button	{ cursor: pointer; }
i	{ font-style: normal; }

a	{ text-decoration: none; }

.fix-layout		{
	position: relative;
	max-width: 640px;
	margin: 0 auto;
	box-sizing: border-box;
}
.fix-layout > .inner		{ padding: 0 3.125%; }
.fix-layout.no-pad > inner	{ padding: 0 !important; }

.clear:after	{
	content: "";
	display: block;
	position: relative;
	clear: both;
}

.txt-left	{ text-align: left !important; }
.txt-center	{ text-align: center !important; }
.txt-right	{ text-align: right !important; }

.pen-light	{
	display: inline-block;
	padding: 5px 22px;
	font-style: normal;
}
.pen-light.black	{
	background: #000;
	color: #fff;
}


.single,
.single-image	{
	position: relative;
	overflow: hidden;
}
.single img,
.single-image img	{ display: block; }
.single.txt-left img,
.single-image.txt-left img	{ float: left; }
.single.txt-center img,
.single-image.txt-center img	{ margin: 0 auto; }
.single.txt-right img,
.single-image.txt-right img	{ float: right; }

.bak-gray	{ background: #f9f9f9; }
.bak-gray-dark	{ background: #efefef; }

.full-bak	{
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
.full-bak.pattern	{ 
	background-size: auto auto;
	background-repeat: repeat;
}
.full-bak.bak-top	{
	background-position: 50% 0%;
}
.full-bak.bak-bottom	{
	background-position: 50% 100%;
}
.full-bak.feat	{
	background-size: contain;
}

.full-img img	{ width: 100%; }

.bo-top		{ border-top: 1px solid #000; }
.bo-top.bo-w1	{ border-top-width: 1px; }
.bo-top.bo-w2	{ border-top-width: 2px; }

.bo-bottom			{ border-bottom: 1px solid #000; }
.bo-bottom.bo-w1	{ border-bottom-width: 1px; }
.bo-bottom.bo-w2	{ border-bottom-width: 2px; }

.bo-gray			{ border-color: #e5e5e5 !important; }
.bo-gray-dark		{ border-color: #cfd1d4 !important; }
.bo-gray-dark2		{ border-color: #dedede !important; }

.bo-black		{ border-color: #000 !important; }

.bo-white			{ border-color: #fff !important; }

.cover-pattern	{
	position: relative;
}
.cover-pattern > *	{
	position: relative;
	z-index: 1;
}
.cover-pattern:before	{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url('/m/images/common/bak_pattern_A.png');
	z-index: 0;
}

.ab-middle	{ 
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);

}

/*********************************************
	여백속성
**********************************************/

.box	{
	position: relative;
	overflow: hidden;
}
.box.no-hide	{ overflow: visible; }

.txt-box	{
	padding: 1.2em;
	line-height: 1.7em;
}
.txt-box p	{ margin-bottom: 0.8em; }

.pic-side	{
	display: block;
	position: absolute;
	right: 2.5%;
	transform: translateY(-50%);
}
.pic-side.t47	{ transform: translateY(-47%); }
.pic-side.t56	{ transform: translateY(-56%); }
.pic-side.t70	{ transform: translateY(-70%); }
.pic-side.t73	{ transform: translateY(-73%); }


.mt10	{ margin-top: 10px !important; }
.mt20	{ margin-top: 20px  !important; }
.mt30	{ margin-top: 30px  !important; }
.mt40	{ margin-top: 40px  !important; }
.mt50	{ margin-top: 50px  !important; }
.mt60	{ margin-top: 60px  !important; }
.mt70	{ margin-top: 70px  !important; }
.mt80	{ margin-top: 80px  !important; }
.mt85	{ margin-top: 85px  !important; }
.mt90	{ margin-top: 90px  !important; }
.mt100	{ margin-top: 100px  !important; }
.mt110	{ margin-top: 110px  !important; }
.mt120	{ margin-top: 120px  !important; }
.mt130	{ margin-top: 130px  !important; }
.mt140	{ margin-top: 140px  !important; }
.mt150	{ margin-top: 150px  !important; }
.mt160	{ margin-top: 160px  !important; }
.mt170	{ margin-top: 170px  !important; }
.mt180	{ margin-top: 180px  !important; }
.mt190	{ margin-top: 190px  !important; }
.mt200	{ margin-top: 200px  !important; }

.mb10	{ margin-bottom: 10px  !important; }
.mb20	{ margin-bottom: 20px  !important; }
.mb30	{ margin-bottom: 30px  !important; }
.mb35	{ margin-bottom: 35px  !important; }
.mb40	{ margin-bottom: 40px  !important; }
.mb50	{ margin-bottom: 50px  !important; }
.mb60	{ margin-bottom: 60px  !important; }
.mb65	{ margin-bottom: 65px  !important; }
.mb70	{ margin-bottom: 70px  !important; }
.mb80	{ margin-bottom: 80px  !important; }
.mb90	{ margin-bottom: 90px  !important; }
.mb100	{ margin-bottom: 100px  !important; }
.mb110	{ margin-bottom: 110px  !important; }
.mb120	{ margin-bottom: 120px  !important; }
.mb130	{ margin-bottom: 130px  !important; }
.mb140	{ margin-bottom: 140px  !important; }
.mb150	{ margin-bottom: 150px  !important; }
.mb160	{ margin-bottom: 160px  !important; }
.mb170	{ margin-bottom: 170px  !important; }
.mb180	{ margin-bottom: 180px  !important; }
.mb190	{ margin-bottom: 190px  !important; }
.mb200	{ margin-bottom: 200px  !important; }

hr.line	{
	display: block;
	margin: 0;
	padding: 0;
	border: none;
	height: 1px;
	background: #d7d7d7;
}



.col-group	{
	overflow: hidden;
	margin: 0 -15px;
	clear: both;
}
.col-group.fit			{ margin: 0; }
.col-group.smallest		{ margin: 0 -1px 0 0; }
.col-group.small		{ margin: 0 -5px; }
.col-group .item	{
	display: block;
	position: relative;
	padding: 15px;
	float: left;
	box-sizing: border-box;
}
.col-group .item p	{
	color: #000;
	text-align: left;
	letter-spacing: -1px;
	padding: 0 8px;
	line-height: 1.5em;
}
.col-group .item p.item-title	{
	padding-top: 16px;
	padding-bottom: 16px;
}
.col-group .item p.item-title img	{ margin: 0; }

.col-group.smallest .item	{ padding: 1px 1px 0 0; }
.col-group.fit .item		{ padding: 0; }
.col-group.small .item		{ padding: 5px; }

.col-group .item a	{ display: block; }

.col-2 .item	{ width: 50%; }
.col-3 .item	{width: 25%;}
.col-4 .item	{ width: 25%; }
.col-5 .item	{ width: 20%; }
.col-6 .item	{ width: 16.66%; }

.over-bak-opacity			{
	opacity: 1;
	background-size: 101% auto;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
 }
.over-bak-opacity:hover	{ opacity: .9; background-size: 105% auto; }




/*********************************************
	Header
**********************************************/

#wrap	{
	display: block;
	overflow: hidden;
	width: 100%;
}

#header	{
	position: absolute;
	top: 1.0em;
	left: 0;
	right: 0;
	padding: 0;
	z-index: 999;
	min-width: 320px;
}


.open-gnb #logo	{ opacity: 0; }
#logo	{
	display: block;
	float: left;
	padding: 0 1.2em;
	max-width: 44%;
}


#btn_control_gnb	{
	display: block;
	position: absolute;
	width: 14.6%;
	max-width: 95px;
	top: 0;
	right: 3.125%;
	z-index: 10;
}
#btn_control_gnb:after	{
	content: "";
	display: block;
	position: relative;
	padding-top: 100%;
}

#btn_control_gnb em	{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

#btn_control_gnb:before	{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border: 1px solid #ffffff;
}

#btn_control_gnb i	{
	display: block;
	position: absolute;
	left: 30.52631579%;
	right: 30.52631579%;
	height: 4.210526316%;
	background: #fff;
	
}
#btn_control_gnb .item_01	{ top: 21.05263158%; }
#btn_control_gnb .item_02	{ top: 35.78947368%; }
#btn_control_gnb .item_02_1	{ top: 35.78947368%; }
#btn_control_gnb .item_03	{ top: 50.52631579%; }

#btn_control_gnb span	{
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 15%;
	text-align: center;
	font-size: 0.9em;
	line-height: 1.0em;
	font-family: 'Calibri';
	color: #fff;
}
#btn_control_gnb span.on	{ opacity: 1; -ms-filter: "alpha(opacity=100)"; }
#btn_control_gnb span.off	{ opacity: 0; -ms-filter: "alpha(opacity=0)"; }

.open-gnb #btn_control_gnb:before	{ border-color: #8c8c8c; }
.open-gnb #btn_control_gnb span		{ color: #8c8c8c; ; }
.open-gnb #btn_control_gnb i		{ background-color: #8c8c8c; ; }
.open-gnb #btn_control_gnb span.on	{ opacity: 0; -ms-filter: "alpha(opacity=0)"; }
.open-gnb #btn_control_gnb span.off	{ opacity: 1; -ms-filter: "alpha(opacity=100)"; }

.open-gnb #btn_control_gnb .item_01,
.open-gnb #btn_control_gnb .item_03		{ top: 35.78947368%; }
.open-gnb #btn_control_gnb .item_01,
.open-gnb #btn_control_gnb .item_02		{ transform: rotate(-45deg); -ms-transform: rotate(-45deg); }
.open-gnb #btn_control_gnb .item_03,
.open-gnb #btn_control_gnb .item_02_1	{ transform: rotate(45deg); -ms-transform: rotate(45deg); }


#body	{
	transform: translateX(-50%);
	transition: transform .4s ease;
	-webkit-transition: transform .4s ease;
	-ms-transition: transform .4s ease;
}

.open-gnb #body	{ transform: translateX(0%); }


/*********************************************
	Footer
**********************************************/

#footer_infor	{
	background: #ffffff;
	padding: 3.0em 0;
}
#copyright	{
	position: relative;
	background: #373737;
	color: #ffffff;
	padding: 2.0em 0;
	font-size: 0.9em;
	line-height: 1.5em;
}
#copyright a	{
	color: #d0d0d0;
}
#copyright p	{ padding-top: 1.5em; }


#quick_top_scroll	{
	display: none;
	position: fixed;
	right: 3%;
	bottom: 3%;
	max-width: 18.28125%;
	z-index: 10;
	-webkit-transition: transform .2s ease;
	transition: transform .2s ease;

}




/*********************************************
	TNB
**********************************************/

.open-gnb #tnb	{ display: block; }
#tnb	{ 
	display: none;
	position: absolute;
	top: 37%;
	bottom: 0;
	right: 17.725%;
	z-index: 999;
}
#tnb li	{
	float: left;
	margin-right: 35px;
}
#tnb a	{ color: #d0d0d0; }



/*********************************************
	GNB
**********************************************/

#gnb	{
	position: relative;
	width: 50%;
	float: left;
	padding-top: 6.0em;
	background: #2b2b2b;
}
#gnb .menu-list	{
	display: block;
	position: relative;
	border-bottom: 1px solid #3c3c3c;
}
#gnb .menu-list > li > a	{ 
	display: block;
	position: relative;
	color: #fff;
	font-size: 1.2em;
	line-height: 4.5em;
	height: 4.5em;
	padding: 0 1.0em;
	border-top: 1px solid #3c3c3c;
}
#gnb .menu-list > li > a i	{
	display: block;
	position: absolute;
	top: 50%;
	transform: translateY(-75%) rotate(135deg);
	right: 1.5em;
	width: 5.31%;
	max-width: 32px;
	border: 1px solid #959595;
	border-left-width: 0;
	border-bottom-width: 0;

	transition: transform .3s ease;
	-webkit-transition: transform .3s ease;
	-ms-transition: transform .3s ease;
}
#gnb .menu-list > li.on > a i {
	transform: translateY(-25%) rotate(315deg);
}
#gnb .menu-list > li > a i:before	{
	content: "";
	display: block;
	position: relative;
	padding-top: 100%;
}
#gnb .depth-2	{
	display: none;
	background: #fff;
}

#gnb .depth-2 > li > a	{ 
	display: block;
	color: #000;
	font-size: 1.2em;
	line-height: 3.5em;
	padding: 0 1.5em;
	border-bottom: 1px solid #2b2b2b;
}

#quick_kakao	{
	padding: 4.0em 1.2em 2.0em;
	text-align: center;
}
#quick_kakao p	{
	padding-bottom: 1.5em;
	color: #969696;
}
#quick_kakao a	{
	display: block;
	position: relative;
	background: #ffd800;
}
#quick_kakao a img	{
	display: block;
	margin: 0 auto;
}


#gnb #gnb_quick_link .item.single p {padding: 55px 0; color:#fff; font-weight:bold; vertical-align:middle; text-align:center;}


/*********************************************
	팝업
*********************************************/

.pop-layer	{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 9999;
}

.pop-layer .pop-pannel	{
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -250px;
	margin-top: -250px;
	width: 500px;
	height: 500px;
	background: #fff;
}
.pop-layer h1	{
	color: #fff;
	padding: 0 20px;
	line-height: 50px;
	background: #77777b;
}
.pop-layer h1 a	{ float: right; }
.pop-layer h1 a img	{ vertical-align: middle; }
.pop-layer .scroll-content	{ 
	position: absolute;
	top: 70px;
	left: 20px; 
	bottom: 20px;
	right: 20px;
	border: 1px solid #dddddd;
	overflow-y: auto;
}
.pop-layer .scroll-content > div	{
	display: block;
	padding: 20px;
	line-height: 1.8em;
}
.pop-layer .scroll-content > div p	{
	line-height: 1.8em;
}



html {  background: #2b2b2b; }
#body	{ width: 200%; }
#body_content	{ width: 50%; float: left; background: #fff; }
.hide-contents #body_content > *	{ display: none; }