@charset "utf-8"; 

/*===기본 콘텐츠 퍼블리싱====================*/
/* 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}

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

/* 테이블 공통 */
.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; position:absolute; left:0; top:0}
	.table > table  {width:200%}
	.table table:before  {width:100%}
}

/*참고*/
.refer {color:#666; display:block; font-size:16px; padding-left:10px; position:relative; margin-right:20px}
.refer i{position:absolute; left:0; top:3px}
.refer i:before {content:'*'; color:#ff1100; font-family:"fonticon"}

/*경고알림*/
.warning  {color:#666; display:block; font-size:16px; padding-left:15px; position:relative; margin-right:20px}
.warning i{position:absolute; left:0; top:3px}
.warning i:before {content:'※'; color:#ff1100; font-family:"fonticon"}

/*알림*/
.info {color:#d2691d; display:block; padding-left:20px; position:relative}
.info i{position:absolute; left:0; top:4px}
.info i:before {content:"\e903"; color:#d16d0c; font-family:"fonticon"}

/*텍스트효과*/
mark {background:rgba(255, 237, 169, 1)}/*마커 (형광펜)*/
/*밑줄*/
.underline {position:relative}
.underline:after{content:''; background-color:#000; width:100%; height:1px; display:block; position:absolute; left:0; bottom:0}

/*동그라미 숫자*/
ol.num {counter-reset:my-counter}
ol.num > li {color:#000; padding-left:33px; position:relative; line-height:1.8}
ol.num > li:before {background-color:#2f3293; border-radius:100%;content:counter(my-counter); counter-increment:my-counter;  color:#fff; display:block; font-size:10px; position:absolute; left:4px; top:3px; line-height:2.1; text-align:center; height:22px; width:22px}
ol.num li > ol{color:#666; counter-increment:unset; padding:5px 0 0 19px}
ol.num li > ol > li:before {content:unset}
/*동그라미 숫자 개별*/
span.num {position:relative; padding-left:33px}
span.num i  {background-color:#2f3293; border-radius:100%; color:#fff; display:block; font-size:11px;  position:absolute; left:5px; top:2px;  height:22px; width:22px; text-align:center; line-height:2}

/*다단*/
.col2 {columns:2; -moz-column-count:2; -webkit-column-count:2; column-count:2}
.col3 {columns:3; -moz-column-count:3; -webkit-column-count:3; column-count:3}
.col4 {columns:4; -moz-column-count:4; -webkit-column-count:4; column-count:4}

@media screen and (max-width:1000px){
	/*다단 2*/
	.col2, .col3, 
	.col4{-moz-column-count:1; -webkit-column-count:1; column-count:1}
}

/*박스*/
.box {border:1px solid #ccc; padding:1rem;  margin:0.5rem 0 1.5rem} /*라인박스*/
/*박스 색깔*/
.box.bg-gray {background-color:#eee}

/*가로 행 박스*/
.row-box{margin:-1rem}
.row-box .row {border-spacing:1rem/*20px 기준시*/; clear:both; display:table; overflow:hidden; table-layout:fixed; width:100%}
.row-box .row > div  {border:1px solid #ddd; display:table-cell; padding:1rem}

@media screen and (max-width:1000px) {
	.row-box{margin:0}
	.row-box .row {display:block}
	.row-box .row li, .row > div  {display:block; margin:1rem 0 0}
}

/*버튼*/
.btnbox .btn {display:inline-block}
.btnbox .btn a {background-color:#4295d1; border:1px solid #4295d1; color:#fff; display:block; padding:0.7rem 1.2rem; transition:all .3s}
.btnbox .btn a:hover {background-color:#fff; color:#4295d1}
/*크기*/
.btnbox .btn.l a{font-size:1rem; padding:0.9rem 1.4rem}/*large*/
.btnbox .btn.s a{font-size:0.7rem; padding:0.4rem 0.7rem}/*small*/
.btnbox .btn.mi a{font-size:0.7rem; padding:0.2rem 0.5rem}/*mini*/
/*라인 버튼*/
.btnbox .btn.line a {background-color:#fff; border:1px solid #4295d1; color:#4295d1}
.btnbox .btn.line a:hover {background-color:#4295d1;  color:#fff}
/*색상*/
/*남색*/
.btnbox .btn.navy a {background-color:#253269; border:1px solid #253269; color:#fff}
.btnbox .btn.navy a:hover {background-color:#fff; color:#253269}
/*빨강*/
.btnbox .btn.red a {background-color:#d05129; border:1px solid #d05129; color:#fff}
.btnbox .btn.red a:hover {background-color:#fff; color:#d05129}
/*녹색*/
.btnbox .btn.green a {background-color:#36963a; border:1px solid #36963a; color:#fff}
.btnbox .btn.green a:hover {background-color:#fff; color:#36963a}
/*보라*/
.btnbox .btn.purple a {background-color:#60468e; border:1px solid #60468e; color:#fff}
.btnbox .btn.purple a:hover {background-color:#fff; color:#60468e}
/*회색*/
.btnbox .btn.gray a {background-color:#999; border:1px solid #999; color:#fff}
.btnbox .btn.gray a:hover {background-color:#fff; color:#999}
/*검정*/
.btnbox .btn.black a {background-color:#000; border:1px solid #000; color:#fff}
.btnbox .btn.black a:hover {background-color:#fff; color:#000}
/*아이콘*/
.btnbox .btn i {margin-left:5px}

/*===추가 콘텐츠 퍼블리싱====================*/
/*상단 콘텐츠*/
.conHead {background:#f5f6f8; border:1px solid #ddd; border-top-color:#666; padding:2rem; margin-bottom:2rem; position:relative}
.conHead  .inner {font-size:0.8rem; font-weight:300; padding-left:5.5rem; word-break:keep-all}
.conHead  .inner i {background-color:#fff; border-radius:100%; display:block; padding:0.3rem; width:4rem; height:4rem; position:absolute; left:2rem; top:50%; transform:translateY(-50%)}
.conHead  .inner i span {font-size:2rem; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);}
.conHead  .inner strong {display:block; font-size:0.9rem; font-weight:400; margin-bottom:0.5rem}

/*상단  bg 콘텐츠*/
.conHead.bgimg  {background:rgba(0,0,0,0.4); padding:3rem; margin-bottom:2rem; position:relative}
.conHead.bgimg:after  {content:''; background-image:url(/_kor/img/contents/sample.jpg); background-repeat:no-repeat;  background-position:center 20%; background-size:cover; width:100%; height:100%; position:absolute; left:0; top:0; z-index:-1}
.conHead.bgimg .inner {color:#fff; padding:0; text-align:center}		
.conHead.bgimg .inner strong {display:block; font-size:1.5rem; font-weight:400; margin-bottom:1rem}
.conHead.bgimg .inner .txt {font-size:0.8rem; font-weight:300;}

/*diagram*/
.diagram ul {clear:both; overflow:hidden; text-align:center}
.diagram ul li {display:block; float:left; width:20%; position:relative; margin:1% 5% 0 0}
.diagram ul li:first-child {margin-left:0}
.diagram ul li:before {content:""; display:block; padding-top:100%; /* 1:1 비율 */ }
.diagram ul li div {border-radius:100%;position:absolute;top:0;right:0;bottom:0;left:0;color:#fff;font-size:0.9rem; text-align:center; padding:30% 20%}
.diagram ul li div strong {border-bottom:1px solid rgba(255, 255, 255, 0.3);display:block;font-weight:300;font-size:1.4rem; padding:0 0 10% 0;margin-bottom:10%;}
.diagram ul li div strong span {color:rgba(255,255,255,0.5); display:block; font-size:0.8rem}
/*색상*/
.diagram ul li.lt01 div {background-color:#486daf}
.diagram ul li.lt02 div {background-color:#575aba}
.diagram ul li.lt03 div {background-color:#4e2f93}
.diagram ul li.lt04 div {background-color:#2f3293}
.diagram ul li:after {content:'\e916'; color:#000; font-size:1.8rem; font-family:'fontIcon'; position:absolute; right:-15%; top:45%}
.diagram ul li:last-child:after {content:none}

@media screen and (max-width:1300px){
	.diagram ul li:after {right:-20%}
}
@media screen and (max-width:1000px){
	.diagram ul li {float:none;  margin:0 auto 3rem !important; width:100%}
	.diagram ul li:before {padding-top:0; /* 1:1 비율 */ }	
	.diagram ul li:after {font-size:1.8rem; transform:rotate(90deg); position:absolute; right:50%; top:initial; bottom:-30%}
	.diagram ul li div {border-radius:100px; padding:1rem; position:relative}
    .diagram ul li div strong{padding:0 0 1rem 0; margin:0 0 1rem 0}
}

/*hover시 더 많은 내용 보여주기*/
.boxDetail {display:table; table-layout:fixed; width:100%}
.boxDetail .article {border:1px solid #ddd; border-left:0; display:table-cell; margin-left:-1px; position:relative; padding:3.5rem 1rem 1rem;  height:300px; overflow:hidden; width:25%; word-break:keep-all; text-align:center; transition:all .3s}
.boxDetail .article:first-child {border-left:1px solid #ddd}
.boxDetail  i {border:1px solid #ff6600; border-radius:100%; display:block; padding:0.3rem; position:relative; margin:0 auto; width:3.5rem; height:3.5rem; transition:all .3s}
.boxDetail  i span {color:#ff6600; font-size:2rem; position:absolute; left:50%; top:50%; transform: translate(-50%, -50%);}
.boxDetail .txt {font-size:0.8rem; font-weight:300; margin-top:1rem}
.boxDetail .txt strong {display:block; font-size:0.9rem; font-weight:400; margin-bottom:0.5rem}
.boxDetail .txt p {color:#fff; opacity:0; transition:all .3s}

@media screen and (min-width:1024px) {
.boxDetail .article:first-child:hover {border-color:#ff6600}
.boxDetail .article:hover {border:1px solid #ff6600; background-color:#ff6600; color:#fff; width:50%; position:relative; z-index:1}
.boxDetail .article:hover  i {background-color:#fff}
.boxDetail .article:hover .txt p {opacity:1}
}

@media screen and (max-width:1000px) {
	.boxDetail .article {border:1px solid #ddd; display:block; height:auto; margin:-1px 0 0 0; padding:2rem 1rem; width:100%}
	.boxDetail .article .txt p {color:#000; opacity:1}
	.boxDetail .article:hover {width:100%}
}

/*hover시 테두리 시간차 표현*/
.border-box {clear:both; overflow:hidden}
.border-box .article {float:left; margin-right:2%; width:23.5%}
.border-box .article:last-child {margin-right:0}
.border-box .article a {border:1px solid #ddd; display:block; padding:40px 35px; position:relative}
.border-box .article .tt {display:block; font-size:1rem; overflow:hidden; text-overflow:ellipsis; width:99.9%; white-space:nowrap; transition:all .3s}
.border-box .article .con {color:#666; display:block; margin-bottom:10px; height:100px; overflow:hidden}
.border-box .article .date {color:#666; display:block; position:relative; padding-top:30px}
.border-box .article .date:before {content:''; background:#ddd; width:50px; height:1px; position:absolute; left:0; top:0}
.border-box .article .line {position:absolute; width:0; height:0; background-color:#09448c}
.border-box .article .line.lineT {right:-1px; top:-1px; transition:width 0.3s}
.border-box .article .line.lineR {right:-1px; bottom:-1px; transition:height 0.3s}
.border-box .article .line.lineB {left:-1px; bottom:-1px; transition:height 0.3s}
.border-box .article .line.lineL {left:-1px; top:-1px; transition:height 0.3s}
.border-box .article a:hover .tt {color:#09448c}
.border-box .article a:hover .line.lineT, .border-box .article a:hover .line.lineB {width:100%; height:3px}
.border-box .article a:hover .line.lineR, .border-box .article a:hover .line.lineL {width:3px; height:100%}