@charset "utf-8";

body {overflow-y:hidden; overflow-x:auto}
#header {border-bottom:1px solid #e5e5e5}
#container {height:35.25rem; position:relative}
#contentWrap {height:100%}
#contentWrap:after {content:''; clear:both; display:block}
#content_detail {position:relative; min-height:auto !important; line-height:1.6; word-break:keep-all}
#footer {border-top:1px solid #e5e5e5}

/* none */
#sns_wrap {display:none}

/* snb */
#snb {width:37.23%; float:left; position:relative; height:100%; z-index:1}
#snb:after {content:''; background:url('/_culture/img/contents/sub-visual01-01.jpg') no-repeat right top; position:absolute; right:0; top:0; width:200%; height:100%; z-index:-1}
#snb .article {width:17.75rem; padding-top:4rem; position:absolute; right:0; height:100%}
#snb h2.title {color:#fff; font-size:2.2rem; font-weight:500; margin-bottom:1.75rem}
#snb .nav .tab-tt {display:none} 
#snb .nav > ul {display:table; width:100%; table-layout:fixed}
#snb .nav > ul > li > a {color:#fff; display:inline-block; position:relative; margin-bottom:0.8rem}
#snb .nav > ul > li > a:after {content:''; background-color:#ffeda9; width:0; height:2px; position:absolute; left:0; bottom:-2px; transition:all .3s}
#snb .nav > ul > li.active a, #snb .nav > ul > li:hover a {color:#ffeda9}
#snb .nav > ul > li.active a:after {width:100%}

#snb .group  {position:absolute; left:0; bottom:7.75rem}
#snb .group .link li {margin-bottom:0.5rem}
#snb .group .link li a {border:1px solid #fff; color:#fff; display:inline-block; font-size:0.9rem; padding:0.5rem 0.7rem; position:relative; width:10.25rem; z-index:1}
#snb .group .link li a i {position:absolute; right:1rem; top:0.65rem}
/*효과*/
#snb .group .link li a:hover {color:#342f23}
#snb .group .link li a:after {content:''; background-color:#ffeda9; width:0; height:100%; position:absolute; left:0; top:0; transition:all .3s; z-index:-1}
#snb .group .link li a:hover:after {width:100%}

/* snb 3depth
#snb .nav ul ul {position:absolute; left:0; text-align:center; width:100%; z-index:1}
#snb .nav ul ul:after {content:''; position:absolute; left:-500%; bottom:0; width:1000%; height:1px; background:#ddd}
#snb .nav ul ul li {display:inline-block}
#snb .nav ul ul li a {color:#666; display:block; font-size:0.85rem; padding:18px 25px 18px 10px; position:relative}
#snb .nav ul ul li.active a {color:#3062be; text-decoration:underline}*/

/*content*/	
#content {font-size:18px; float:left; width:62.77%; overflow:auto; max-height:34.5rem; padding:2.65rem 0 0 3.75rem}
#content .contents-section{max-width:40.5rem}

/* ctt & location */
.content_info {position:relative; margin-bottom:2rem}
.content_info h3 {color:#000; font-size:2rem; font-weight:500}
.location {position:absolute; right:0; top:0.5rem}
.location ul li {display:inline-block; font-size:0.8rem; position:relative; vertical-align:middle}
.location ul li:after {content:'\e93f'; display:inline-block; font-family:'fontIcon'; font-size:0.8rem}
.location ul li:last-child:after {display:none}
.location ul li.icon a {font-size:0; position:relative}
.location ul li.icon a:before {content:'\e99b'; display:inline-block; font-family:'fontIcon'; font-size:0.8rem}
.location ul li a, .location ul li:after a {color:#666}

/*depth4 탭메뉴 */
#depth4_menu_div {border:1px solid #ddd; max-width:1000px; margin:0 auto 2.5rem}
#depth4_menu_div .tab-tt {display:none}
#depth4_menu_div ul {display:table; table-layout:fixed; width:100%; position:relative}
#depth4_menu_div ul li {border-right:1px solid #ddd; display:table-cell; position:relative}
#depth4_menu_div ul li:last-child {border-right:0}
#depth4_menu_div ul li a {color:#666; display:block; text-align:center; padding:0.6rem 0; position:relative; transition:all .3s}
#depth4_menu_div ul li:hover a, #depth4_menu_div ul li.active a {color:#00b0ad}
#depth4_menu_div ul li.active a:after {content:''; border:1px solid #00b0ad; color:#000; width:100%; height:100%; position:absolute; left:-1px; top:-1px}


/************* 콘텐츠 ***************/

/* 1depth */
h2.dep01, ul.dep01 > li{display:block; color:#000; font-size:26px; font-weight:500; position:relative; padding:0 0 15px 0; margin:50px 0 0 0; line-height:160%}
h2.dep01:first-child, ul.dep01 > li:first-child{margin:0}
h2.dep01 span{color:#333; display:block; font-size:16px; line-height:1.5}

/* 2depth */
h3.dep02, ul.dep02 > li {color:#333; display:block; font-size:18px; font-weight:500; position:relative; padding:0 0 0 17px; line-height:165%}
h3.dep02:before, ul.dep02 > li:before {content:''; background-color:#d4b05d; border-radius:100%; position:absolute; left:2px; top:10px; width:8px; height:8px}
h3.dep02 span {display:block}
h3.dep02:first-child{margin:0}
ul.dep02 {margin-bottom:1rem}

/* 3depth */
ul.dep03 {padding:0 0 20px 0}
ul.dep03 li > ul {padding:15px 0}
h4.dep03, ul.dep03 > li, span.dep03 {color:#000; display:block; font-size:16px; font-weight:normal; position:relative; padding:0 0 0 17px; line-height:160%}
h4.dep03:before, ul.dep03 > li:before, span.dep03:before {content:'';  background-color:#666; border-radius:100%; position:absolute; left:4px; top:10px; width:5px; height:5px}

/* 4depth */
ul.dep04 li > ul {padding:15px 0}
h5.dep04, ul.dep04 > li, span.dep04 {color:#000; display:block; font-size:16px; font-weight:normal; position:relative; padding:0 0 0 17px; line-height:160%}
h5.dep04:before, ul.dep04 > li:before, span.dep04:before {content:''; background-color:#666; position:absolute; left:3px; top:12px; width:5px; height:1px}

/* 5depth */
ul.dep05 li > ul {padding:15px 0}
h6.dep05, ul.dep05 > li {color:#666; display:block; font-size:16px; font-weight:normal; position:relative; padding:0 0 0 17px; line-height:160%}
h6.dep05:before, ul.dep05 > li:before {content:''; background-color:#999; position:absolute; left:4px; top:11px; width:2px; height:2px}

/* 2depth 로 시작*/
ul.dep02 > li > ul > li{color:#000; display:block; font-weight:normal; font-size:16px; position:relative; padding:0 0 0 10px}
ul.dep02 > li > ul > li:before {content:'';  background-color:#666; border-radius:100%; position:absolute; left:0; top:11px; width:5px; height:5px}

ul.dep02 > li > ul > li > ul > li {color:#000; display:block;position:relative; padding:0 0 0 15px; line-height:160%}
ul.dep02 > li > ul > li > ul > li:before {content:''; background:#666; position:absolute; left:1px; top:10px; width:5px; height:1px}
ul.dep02 > li > ul > li > ul > li > ul {padding:5px 0 0}
ul.dep02 > li > ul > li > ul > li > ul > li{color:#666; display:block; position:relative; padding:0 0 0 10px; line-height:160%}
ul.dep02 > li > ul > li > ul > li > ul > li:before {content:''; background:#999; position:absolute; left:1px; top:11px; width:2px; height:2px}

/* 3depth 로 시작*/
ul.dep03 > li > ul {padding:3px 0 7px 0}
ul.dep03 > li > ul > li {color:#000; display:block; position:relative; padding:0 0 0 15px; line-height:160%}
ul.dep03 > li > ul > li:before {content:''; background:#666; position:absolute; left:1px; top:10px; width:5px; height:1px}
ul.dep03 > li > ul > li > ul {padding:10px 0 0}
ul.dep03 > li > ul > li > ul > li{color:#666; display:block; position:relative; padding:0 0 7px 10px; line-height:160%}
ul.dep03 > li > ul > li > ul > li:before {content:''; background:#999; position:absolute; left:1px; top:11px; width:2px; height:2px}

/* 4depth 로 시작*/
ul.dep04 > li > ul {padding:10px 0 0}
ul.dep04 > li > ul > li{color:#666; display:block;  position:relative; padding:0 0 7px 10px; line-height:160%}
ul.dep04 > li > ul > li:before {content:''; background:#999; position:absolute; left:1px; top:11px; width:2px; height:2px}

/* 테이블 공통 */
.tbl-top {color:#999; font-size:16px; margin-bottom:5px; clear:both; overflow:hidden}
.tbl-top .tbl-info1 {float:left}
.tbl-top .tbl-info2 {float:right}
.table table {border-collapse:collapse; width:100%; line-height:160%; margin-bottom:10px; font-size:0.8rem; text-align:center; position:relative}
.table table:before {content:''; background-color:#000; width:100%; height:2px; position:absolute; left:0; top:0}
.table table td ul {padding-bottom:0}
.table table thead th,
.table table tbody th {background-color:#f3f3f3; border-bottom:1px solid #ccc; border-right:1px solid #ccc; color:#000; font-weight:normal; padding:13px}
.table table tbody td{border-bottom:1px solid #ccc; border-right:1px solid #ccc; color:#333; padding:0.6rem}
.table table tbody td ul li, .table table tbody td span {color:#333; padding-bottom:0}
.table table thead tr th.line-r {border-right:1px solid #e6e6e6 !important}
.table table thead tr th:last-child, 
.table table tbody tr td:last-child {border-right:none}
.table table tbody tr td.line-r {border-right:1px solid #e6e6e6}
@media screen and (max-width:1000px) {
	/* 테이블 공통 */
	.table {background:#fff; overflow-x:scroll; position:relative; margin-top:0; padding:20px 0 0 0}
	.table:before{content:'좌우 스크롤 하시면 내용을 보실 수 있습니다.'; color:#999; font-size:0.7rem; position:absolute; left:0; top:0}
	.table > table  {width:200%}
	.table table:before  {width:100%}
}

/*글씨 크기*/
.h2 {display:block; font-size:2rem; line-height:1.2}
.h3 {display:block; font-size:1.8rem; line-height:1.4}
.h4 {display:block; font-size:1.6rem; line-height:1.4}
.h5 {color:#666; display:block; font-size:1.4rem; line-height:1.4}
.h6 {display:block; font-size:1.2rem; line-height:1.4}

/*들여쓰기*/
.indent{margin:0 0 40px 20px; clear:both; overflow:hidden; color:#666}

/*마커 (형광펜)*/
mark {background:rgba(255, 237, 169, 1)}

/*기본알림*/
.info {color:#666; display:inline-block; font-size:16px; padding-left:10px; position:relative; margin-right:20px}
.info:before {content:'*'; color:#f26802; width:17px; height:19px; position:absolute; left:0; top:0}

/*경고알림*/
.spa-info {color:#666; display:inline-block; font-size:16px; padding-left:15px; position:relative; margin-right:20px}
.spa-info:before {content:'※'; color:#f26802; width:17px; height:19px; position:absolute; left:0; top:0}


/********* 사이트 맵 *******************************************************************************************************************************************************/	

.sitemap dl {padding:38px 0; border:1px solid #e5e5e5; border-right:0; border-left:0; margin-top:-1px}
/*.sitemap dl:first-child {padding:50px 0}*/
.sitemap dt a {color:#6d6767; font-size:24px}
.sitemap dd {clear:both; padding:10px 0 0}
.sitemap dd > ul {display:table; width:100%}
.sitemap dd > ul > li {display:inline-block; width:20%; margin-right:2em; line-height:2em; position:relative; vertical-align:top}
.sitemap dd > ul > li:last-child {margin-right:0}
.sitemap dd > ul > li > a {color:#000; font-size:18px}
.sitemap dd > ul > li > a:hover {color:#2f3293; text-decoration:underline}
.sitemap dd > ul > li ul > li {display:block; margin-right:2%}
.sitemap dd > ul > li ul > li a {color:#666; font-size:16em; position:relative; padding:0 0 0 10px}
.sitemap dd > ul > li ul > li a:before {content:''; background:#666; position:absolute; left:1px; top:10px; width:5px; height:1px}

/********* 연혁 *******************************************************************************************************************************************************/
.history:after {content:''; background-color:#ccc; width:1px; height:100%; position:absolute; left:50%; top:1rem; z-index:-1} 
/*기본*/
.history .list {width:50%; position:relative; top:0; margin-bottom:2rem; position:relative}
.history .list:after {content:''; background-color:#d4b05d; border-radius:100%; width:10px; height:10px; position:absolute; top:1rem}
.history .list strong {color:#000; display:inline-block; font-weight:500; font-size:1.5rem; position:relative; margin-bottom:0.5rem}
.history .list strong:after {content:''; border-top:1px dashed #d4b05d; width:1rem; height:1px; position:absolute; top:23px}
.history .list ul li {clear:both; overflow:hidden}
.history .list ul li em, .history .list ul li span {display:block}
.history .list ul li span {color:#666}
/*홀수*/
.history .list:nth-child(odd) {left:0; padding-right:2.25rem; text-align:right}
.history .list:nth-child(odd):after {right:-5px}
.history .list:nth-child(odd) strong:after {left:91px}
.history .list:nth-child(odd) ul li em, .history .list:nth-child(odd) ul li span {float:right}
.history .list:nth-child(odd) ul li span {padding-right:1rem}
/*짝수*/
.history .list:nth-child(even) {left:50%; padding-left:2.25rem}
.history .list:nth-child(even):after {left:-4px}
.history .list:nth-child(even) strong:after {right:91px}
.history .list:nth-child(even) ul li em, .history .list:nth-child(even) ul li span {float:left}
.history .list:nth-child(even) ul li span {padding-left:1rem}