@charset "UTF-8";

/*------------------------------------------------------------
	#. PC - 공통 레이아웃
-------------------------------------------------------------*/

header, section, footer
{
	background-color:Transparent;
	position:relative; clear:both;
	height:auto;
}

header .area,
section .area,
footer .area
{
	width:100%;
	height:inherit;
}
header .area .bg,
section .area .bg,
footer .area .bg
{
	width:100%;
	height:auto;
	clear:both;
}
header .area .bg .panel,
section .area .bg .panel,
footer .area .bg .panel
{
	width:980px; max-width:980px;
	height:auto;
	left:50%; margin-left:-490px;
}

/*
	헤더(Header)
*/
/* 	헤더(Header) - 상단 로고 + 연락처 */
header .area .bg.top-logo
{
	background-color:transparent;
	height:120px; max-height:120px;
}
header .area .top-logo .panel
{
	clear:both;
	height:80px; max-height:80px;
	top:20px;
}
header .area .top-logo .panel > img#img-top-logo
{
	clear:both;
	width:244px; max-width:244px;
	height:80px; max-height:80px;
	left:50%; margin-left:-122px;

	cursor:pointer;
}
header .area .top-logo .panel > #img-top-logo:hover
{
	width:232px;
	height:76px;
	top:2px; margin-left:-116px;
}
header .area .top-logo .panel > a
{
	float:right;
	top:2px;
}
header .area .top-logo .panel > a > img { width:auto; height:76px; }

/* 	헤더(Header) - 상단 네비게이션 */

header .area.sub .top-navi
{
	background-color:transparent;
	height:50px; max-height:50px;
}
header .area.sub .top-navi .panel { height:50px; max-height:50px; }
header .area.sub .top-navi .panel ul.list-navi
{
	width:980px; max-width:980px;
	height:40px; max-height:40px;
	top:5px;
}
header .area.sub .top-navi .panel .list-navi > li
{
	width:245px;
	height:40px; max-height:40px;
	display:inline-block;
	float:left;
	top:0px;
}
header .area.sub .top-navi .panel .list-navi > li > a
{
	display:block;
	margin:0px 41px;
}
header .area.sub .top-navi .panel .list-navi > li > a > img { width:163px; height:33px; top:3.5px; }

header .area.sub .top-navi .panel .list-navi > li.ac
{
	height:40px;
	top:0px;
}
header .area.sub .top-navi .panel .list-navi > li.ac > a { width:162px ; margin-left:41.5px; }
header .area.sub .top-navi .panel .list-navi > li.ac > a > img { width:162px;  height:40px; top:0px; }
header .area.sub .top-navi .panel .list-navi > li:first-child > a {  }
header .area.sub .top-navi .panel .list-navi > li:last-child > a { }

header .area .top-navi .panel .list-navi > li > a > .box-focus
{
	background-color:#FFFFFF;
	position:absolute;
	width:92px; max-width:162px;
	height:2px; max-height:2px;
	bottom:2px;
	display:none;
}
header .area .top-navi .panel .list-navi > li > a > .box-focus { left:35px; }
header .area.sub .top-navi .panel .list-navi > li > a > .box-focus { left:76.5px; bottom:2px; }
header .area .top-navi .panel .list-navi > li > a:hover > .box-focus { display:block; }

/*
	바닥(Footer)
*/
footer
{
	background-color:#595757;
	height:165px; max-height:165px;
}
footer .area {}
footer .area .bg.btm-sign
{
	background-color:transparent;
	height:128px; max-height:128px;
	top:18px;
}
footer .area .btm-sign .panel { height:inherit; }
footer .area .btm-sign .panel .box { height:inherit; }
footer .area .btm-sign .panel .box span { color:#ffffff; font-size:12px; }
footer .area .btm-sign .panel .box span.bold { font-size:18px;  }
footer .area .btm-sign .panel .box.box-address
{
	float:left;
	padding-left:12px;
	padding-top:5px;
	border-left:8px solid #ffffff;

	line-height:20px;
}
footer .area .btm-sign .panel .box.box-copy
{
	float:right;
	display:table;
	vertical-align : bottom;
}
footer .area .btm-sign .panel .box-copy span
{
	vertical-align:bottom;
	display:table-cell;
}

/*
	섹션(Section)
*/
/* 	섹션(Section) - 연락처 */
section .area .bg.cnt-contact
{
	background-color:transparent;
	height:auto;
}
section .area .cnt-contact .panel {	}
section .area .cnt-contact .panel a {}
section .area .cnt-contact .panel a > img#img-mid-contact
{
	width:800px;
	height:216px;
	margin:80px 90px 100px;
}
section .area .cnt-contact .panel .btn#btn-pagetop
{
	background-color:transparent;
	width:90px; height:61px;
	position:absolute;
	right:0px; bottom:0px;
}
section .area .cnt-contact .panel .btn#btn-pagetop:hover {}
section .area.sub .cnt-contact .panel a > #img-mid-contact { margin-bottom:395px; }

/* 	섹션(Section) - 서브페이지 */
section .area.sub .bg.cnt-title {}
section .area.sub .bg.cnt-title .panel 	{ }
section .area.sub .bg.cnt-title .panel img
{
	width:auto;
	height:64px;

	display:block;
	margin:0 auto;
	margin-top:60px; margin-bottom:50px;

	/*margin:60px 338px 50px 338px;*/

}

section .area.sub .bg {}
section .area.sub .bg .panel {}
section .area.sub .bg .panel .box
{
	background-color:#ffffff;
	clear:both;

	display:block;
	padding:10px;
}
section .area.sub .bg .panel .box .inner
{
	width:958px;  max-width:958px;
	border:1px solid #000;
}
section .area.sub .bg .panel .box .inner > ul
{
	margin:50px 0px 70px 0px;
}
section .area.sub .bg .panel .box .inner > ul > li { clear:both; }
section .area.sub .bg .panel .box .inner > ul > li.li-title { height:120px; max-height:120px; }
section .area.sub .bg .panel .box .inner > ul > li.li-title > img,
section .area.sub .bg .panel .box .inner > ul > li.li-imgs > img { display: block; margin:0 auto; }
section .area.sub .bg .panel .box .inner > ul > li.li-title > img
{
	width:958px; max-width:958px;
	height:94px;
	top:13px;
}
section .area.sub .bg .panel .box .inner > ul > li.li-title > img.img-titletag
{
	width:120px; max-width:120px;
	height:120px; max-height:120px;
	position:absolute;
	top:0px; left:119px;
}
section .area.sub .bg .panel .box .inner > ul > li.li-tabtitle {}
section .area.sub .bg .panel .box .inner > ul > li.li-tabtitle > img
{
	width:720px;
	height:50px;
	margin:0 auto;
	display:block;
}
section .area.sub .bg .panel .box .inner > ul > li.li-imgs {}
section .area.sub .bg .panel .box .inner > ul > li.li-imgs > img
{
	width:720px;
	margin-top:35px;
}
section .area.sub .bg .panel .box .inner > ul > li.li-text > .tb
{
	width:720px;
	height:auto;
	clear:both;

	margin-left:119px; margin-right:119px;
}
section .area.sub .bg .panel .box .inner > ul > li.li-text > .tb > span
{
	width:720px;
	margin-top:35px;
}
section .area.sub .bg .panel .box .inner > ul > li.li-text > .tb > span.bold,
section .area.sub .bg .panel .box .inner > ul > li.li-text > .tb > span > strong ,
section .area.sub .bg .panel .box .inner > ul > li.li-caption > .tb > span.bold { text-decoration:underline; }
section .area.sub .bg .panel .box .inner > ul > li.li-caption {}
section .area.sub .bg .panel .box .inner > ul > li.li-caption > .tb
{
	width:850px;

	margin:0px 54px;
	padding:30px 0px;

	text-align:center;
}
section .area.sub .bg .panel .box .inner > ul > li.li-caption > .tb > span  { color:#FFFFFF;  line-height:2.0em; }
section .area.sub .bg .panel .box .inner > ul > li.li-chart  {}
section .area.sub .bg .panel .box .inner > ul > .li-chart > table
{
	width:720px; max-width:720px;
	margin:0 auto;

	border-spacing: 0;
}
section .area.sub .bg .panel .box .inner > ul > .li-chart > table tr { margin:0px; padding:0px; }
section .area.sub .bg .panel .box .inner > ul > .li-chart > table tr td { margin:0px; padding:0px; border:0px; }
section .area.sub .bg .panel .box .inner > ul > .li-chart > table.table-chart-img {}
section .area.sub .bg .panel .box .inner > ul > .li-chart > .table-chart-img tr {}
section .area.sub .bg .panel .box .inner > ul > .li-chart > .table-chart-img tr td {}
section .area.sub .bg .panel .box .inner > ul > .li-chart > .table-chart-img tr td.name { width:222px; max-width:220px; }
section .area.sub .bg .panel .box .inner > ul > .li-chart > .table-chart-img tr .name > img
{
	width:222px;
	height:52px;
}
section .area.sub .bg .panel .box .inner > ul > .li-chart > .table-chart-img tr .context
{
	width:498px; max-width:498px;
	height:52px;
	padding:0px 25px;

	display:table;

}
section .area.sub .bg .panel .box .inner > ul > .li-chart > .table-chart-img tr .context  > span
{
	display:table-cell;
	vertical-align:middle;
}
section .area.sub .bg .panel .box .inner > ul > .li-chart > .table-chart-img tr .context  small { font-size:16px; }
section .area.sub .bg .panel .box .inner > ul > .li-chart > .table-chart-img tr.link {}
section .area.sub .bg .panel .box .inner > ul > .li-chart > .table-chart-img .link td.name { text-align:center; }
section .area.sub .bg .panel .box .inner > ul > .li-chart > .table-chart-img .link .name > img
{
	width:25px;
	height:12px;
}
section .area.sub .bg .panel .box .inner > ul > .li-chart > table.table-chart-text {}
section .area.sub .bg .panel .box .inner > ul > .li-chart > .table-chart-text tr { height:auto; }
section .area.sub .bg .panel .box .inner > ul > .li-chart > .table-chart-text tr td
{
	height:45px; max-height:47px;
	line-height:45px;	text-align:center;
}
section .area.sub .bg .panel .box .inner > ul > .li-chart > .table-chart-text tr.name { background-color:#eee; }
section .area.sub .bg .panel .box .inner > ul > .li-chart > .table-chart-text .name td { border-bottom:2px solid #000; }
section .area.sub .bg .panel .box .inner > ul > .li-chart > .table-chart-text tr.context {}
section .area.sub .bg .panel .box .inner > ul > .li-chart > .table-chart-text .context td { border-bottom:1px dotted #000; }
section .area.sub .bg .panel .box .inner > ul > .li-chart > .table-chart-text tr.desc {}
section .area.sub .bg .panel .box .inner > ul > .li-chart > .table-chart-text .desc td { line-height:20pt; text-align:left; }
section .area.sub .bg .panel .box .inner > ul > .li-chart > .table-chart-text .desc td span { font-size:14px;  }
section .area.sub .bg .panel .box .inner > ul > .li-chart > .table-chart-text.three tr td { width:200px; max-width:200px; }
section .area.sub .bg .panel .box .inner > ul > .li-chart > .table-chart-text.three tr td:nth-child(1) { width:300px; max-width:300px; }
section .area.sub .bg .panel .box .inner > ul > .li-chart > .table-chart-text.two tr td { width:300px; max-width:300px; }
section .area.sub .bg .panel .box .inner > ul > .li-chart > .table-chart-text.two tr td:nth-child(1),
section .area.sub .bg .panel .box .inner > ul > .li-chart > .table-chart-text.two tr td:nth-child(4) { width:400px; max-width:400px; }
section .area.sub .bg .panel .box .inner > ul > .li-chart > .table-chart-text.two tr td.split
{
	background-color:#ffffff !important;
	width:20px; max-width:20px;
	border-color:#ffffff !important;
}
section .area.sub .bg .panel .box .inner > ul > .li-chart > .table-chart-text.once tr td { width:720px; max-width:720px; }
section .area.sub .bg .panel .box .inner > ul > .li-chart > .table-chart-text.once .context td
{
	height:auto;
	line-height:1.5em; text-align:left;
	padding:10px 0px;
}
section .area.sub .bg .panel .box .inner > ul > .li-chart > .table-chart-text.once .context td > span { font-size:16px; }
section .area.sub .bg .panel .box .inner > ul > .li-chart > .table-chart-text.once .context td > span.bold { font-size:18px; }

/* 컨텐츠 네비게이션 */
section .area.sub .bg.cnt-navi { height:101px; max-height:101px; }
section .area.sub .cnt-navi .panel {}
section .area.sub .cnt-navi .panel ul.list-navi
{
	height:51px; max-height:51px;
	border-bottom:5px solid #aaa;
}
section .area.sub .cnt-navi .panel .list-navi > li
{
	background-color:#B3B3B3;
	min-width:215px;
	height:46px; max-height:51px;
	display:inline-block;
	float:left;

	margin:5px 2.5px 0px;
	border-top-left-radius:.5em; border-top-right-radius:.5em;

	opacity: 0.75;
	filter: alpha(opacity=75); /* For IE8 and earlier */
}
section .area.sub .cnt-navi .panel .list-navi > li  > a {}
section .area.sub .cnt-navi .panel .list-navi > li  > a > img
{
	width:auto;
	height:20px;

	display:block;
	margin:0 auto;
	top:15.5px;
}
section .area.sub .cnt-navi .panel .list-navi > li:first-child
{
	margin-left:0px; margin-right:2.5px;
}
section .area.sub .cnt-navi .panel .list-navi > li:last-child
{
	margin-left:2.5px; margin-right:0px;
}
section .area.sub .cnt-navi .panel .list-navi > li:hover
{
	background-color:#7F7F7F;
	opacity:10;
	filter: alpha(opacity=100); /* For IE8 and earlier */
}
section .area.sub .cnt-navi .panel .list-navi > li.ac
{
	height:51px;
	margin-top:0px;
	opacity:10;
	filter: alpha(opacity=100); /* For IE8 and earlier */
}
section .area.sub .cnt-navi .panel .list-navi > li:nth-child(1) { width:220px; max-width:220px; }
section .area.sub .cnt-navi .panel .list-navi > li:nth-child(2) { width:285px; max-width:285px; }
section .area.sub .cnt-navi .panel .list-navi > li:nth-child(3) { width:215px; max-width:215px; }
section .area.sub .cnt-navi .panel .list-navi > li:nth-child(4) { width:245px; max-width:245px; }


section .area.sub .cnt-navi.hide_child  {}  /* update 2018.10.13 */
section .area.sub .cnt-navi.hide_child .panel ul { display:none; }

section .area.sub .cnt-navi-fixed .panel {}
section .area.sub .cnt-navi-fixed .panel ul.list-navi-s,
section .area.sub .cnt-navi .panel ul.list-navi-s
{
	background-color:#aaa;
	height:45px; max-height:45px;
}
section .area.sub .cnt-navi-fixed .panel .list-navi-s > li,
section .area.sub .cnt-navi .panel .list-navi-s > li
{
	height:inherit;
	float:left;
	text-align:center;
}
section .area.sub .cnt-navi-fixed .panel .list-navi-s > li img,
section .area.sub .cnt-navi .panel .list-navi-s > li img { display:inline-block; }

section .area.sub .cnt-navi-fixed .panel .list-navi-s > li > a > img,
section .area.sub .cnt-navi .panel .list-navi-s > li > a > img
{
	height:17px;
	top:14px;
}
section .area.sub .cnt-navi-fixed .panel .list-navi-s > li.spliter,
section .area.sub .cnt-navi .panel .list-navi-s > li.spliter { width:2px !important; max-width:2px; }
section .area.sub .cnt-navi-fixed .panel .list-navi-s > li.spliter > img,
section .area.sub .cnt-navi .panel .list-navi-s > li.spliter > img
{
	width:2px;
	height:26px;
	top:9.5px;
}

section .area.sub .cnt-navi-fixed .panel .list-navi-s.two > li,
section .area.sub .cnt-navi .panel .list-navi-s.two > li { width:489px; max-width:489px; }

section .area.sub .cnt-navi-fixed .panel .list-navi-s.three > li,
section .area.sub .cnt-navi .panel .list-navi-s.three > li { width:325px; max-width:325px; }
section .area.sub .cnt-navi-fixed .panel .list-navi-s.three > li:nth-child(3),
section .area.sub .cnt-navi .panel .list-navi-s.three > li:nth-child(3) { width:326px; max-width:326px; }

section .area.sub .cnt-navi-fixed
{
	height:101px; max-height:126px;
	position:fixed;

	top:0px;
}
section .area.sub .cnt-navi-fixed.hid { display:none; }

section .area.sub .cnt-navi-fixed .panel ul.list-navi
{
	height:51px; max-height:51px;
	border-bottom:5px solid #aaa;
}
section .area.sub .cnt-navi-fixed .panel .list-navi > li
{
	background-color:#B3B3B3;

	min-width:215px;
	height:46px; max-height:51px;
	display:inline-block;
	float:left;

	margin:5px 2.5px 0px;
	border-top-left-radius:.5em; border-top-right-radius:.5em;
}
section .area.sub .cnt-navi-fixed .panel .list-navi > li  > a {}
section .area.sub .cnt-navi-fixed .panel .list-navi > li  > a > img
{
	width:auto;
	height:20px;

	display:block;
	margin:0 auto;
	top:15.5px;
}
section .area.sub .cnt-navi-fixed .panel .list-navi > li:first-child
{
	margin-left:0px; margin-right:2.5px;
}
section .area.sub .cnt-navi-fixed .panel .list-navi > li:last-child
{
	margin-left:2.5px; margin-right:0px;
}
section .area.sub .cnt-navi-fixed .panel .list-navi > li:hover { background-color:#7F7F7F; }
section .area.sub .cnt-navi-fixed .panel .list-navi > li.ac
{
	height:51px;
	margin-top:0px;
	opacity:10;
	filter: alpha(opacity=100); /* For IE8 and earlier */
}

/*------------------------------------------------------------
	#. PC - 공통 이펙트
-------------------------------------------------------------*/
.eff_size
{
	-webkit-Transition-Property:Background-Color, Color, Font-Weight, -webkit-Opacity, -webkit-Transform;
	-webkit-Transition-Duration:100ms;
	-webkit-Transition-Timing-Function:linear;

	-moz-Transition-Property:Background-Color, Color, Font-Weight, -moz-Opacity, -moz-Transform;
	-moz-Transition-Duration:100ms;
	-moz-Transition-Timing-Function:linear;

	Transition-Property:Background-Color, Color, Font-Weight, Opacity, Transform;
	Transition-Duration:100ms;
	Transition-Timing-Function:linear;
}
.eff_opacity, .eff_banner
{
	-webkit-Transition-Property:-webkit-Opacity;
	-webkit-Transition-Duration:100ms;
	-webkit-Transition-Timing-Function:linear;

	-moz-Transition-Property:-moz-Opacity;
	-moz-Transition-Duration:100ms;
	-moz-Transition-Timing-Function:linear;

	Transition-Property:Opacity;
	Transition-Duration:100ms;
	Transition-Timing-Function:linear;
}
.eff_opacity { opacity: 0.8; filter: alpha(opacity=80); }
.eff_opacity:hover { opacity: 1.0; filter: alpha(opacity=100); }

.eff_banner { opacity: 1.0; filter: alpha(opacity=100); }
.eff_banner:hover { opacity: 0.75; filter: alpha(opacity=75); }