@charset "UTF-8";
@import url("../../css/common.css");
@import url("contents.css");

/*-------------------------------------------------
title       :서브
Create date :2020-03-03
-------------------------------------------------*/
.btn_tm {background-color: #323686; color: #fff; border-radius: 0.3rem; padding: 0.5rem 0.8rem; display: inline-block; margin-top: 0.5rem;}
#main {border-left:1px solid #e5e5e5}
.roughmap_maker_label .roughmap_lebel_text {font-size:0 !important;}
.roughmap_maker_label .roughmap_lebel_text:before {content:'전남광주통합특별시교육청 광주창의융합교육원'; font-size:11px;}

/*서브비주얼*/
#visual {height:17rem; color:#fff; font-size:5rem; text-align:center; overflow:hidden; position:relative; padding-top:5rem}
#visual:before {content:''; background-image:url('/main/img/sub/sub-bg01.gif'); background-repeat:no-repeat; background-position:center bottom; width:100%; height:100%; position:absolute; left:0; top:0; z-index:-1}
#visual:after {content:''; background-image:url('/main/img/sub/sub-img01.png'); background-repeat:no-repeat; background-position:right top; width:297px; height:436px; position:absolute; top:-1rem; right:-2rem}
.visual1:before {background-image:url('/main/img/sub/sub-bg01.gif')} 
.visual1:after {background-image:url('/main/img/sub/sub-img01.png'); top:-1rem; right:-2rem} 

#snb {width:100%; position:relative; padding:0 5rem; z-index:100}
#snb:after {content:''; width:100%; height:6rem; background-color:#22316a; position:absolute; left:0; top:0; z-index:-1}
#snb .title {display:none}
#snb .list {width:100%; max-width:126rem; margin:0 auto; overflow:hidden; position:relative; z-index:1}
#snb .list > ul > li {display:inline-block; width:auto !important}
#snb .list > ul > li > a {color:#fff; display:inline-block; font-size:1.6rem; font-weight:500; height:6rem; line-height:3.5; position:relative; padding:0 2rem}
#snb .list > ul > .active > a {background-color:#fff; color:#22316a}
/*3depth*/
#snb .list li.active.type1 {height:12rem}
#snb .list > ul > li ul {background-color:#fff; position:absolute; left:0; width:100%; height:6rem}
#snb .list > ul > li ul:before {content:''; width:1000%; height:1px; background:#ddd; position:absolute; left:-50%; bottom:0}
#snb .list li.type1 ul li {display:inline; margin-right:3rem}
#snb .list li.type1 ul li a {color:#999; display:inline-block; font-size:1.6rem; position:relative; line-height:3.8}
#snb .list li.type1 ul li a:hover,
#snb .list li.type1 ul li.active a {color:#22316a}
#snb .list li.type1 ul li.active a:before {content:''; background-color:#22316a; width:0.4rem; height:0.8rem; position:absolute; left:50%; bottom:0; transform:translateX(-50%) skewX(-20deg)}
/*컨트롤 생길 때*/
#snb .list .bx-wrapper {padding:0 4rem 0 2rem}
#snb .list .bx-wrapper .bx-viewport li {display:inline; width:auto !important}
#snb .list .bx-wrapper .bx-viewport > ul > li > a {color:#fff; display:inline-block; font-size:1.6rem; font-weight:500; height:6rem; line-height:3.5; position:relative; padding:0 2rem}
#snb .list .bx-wrapper .bx-viewport > ul > li.active > a {background-color:#fff; color:#22316a}
#snb .list .bx-controls {position:absolute; top:1.3rem; left:0; width:100%}
#snb .list .bx-controls-direction a {position:absolute; left:0; background:none; z-index:1; color:transparent; font-size:0}
#snb .list .bx-controls-direction a:before {position:absolute; left:0; top:0; width:100%; height:100%; font-size:1.4rem; color:#fff; text-indent:0; text-align:center; line-height:1.8}
#snb .list .bx-controls-direction .bx-next {left:auto; right:0; z-index:1; margin-right:0}
#snb .list > #depth4_menu_ul {transform:translate3d(0px, 0px, 0px) !important}
#snb .list a[target='_blank']{padding-right:18px; margin-right:18px;  background:url('/main/img/common/icon_newwindow.png') no-repeat 100% 15%}
/*컨트롤 생길 때 - 3depth*/
#snb .list .bx-wrapper .bx-viewport li.active.type1 {position:initial !important; position:static !important}
#snb .list .bx-wrapper .bx-viewport li ul {position:absolute; width:100%; height:6rem}
#snb .list .bx-wrapper .bx-viewport li ul:before {content:''; width:1000%; height:1px; background:#ddd; position:absolute; left:-50%; bottom:0}
#snb .list .bx-wrapper .bx-viewport li ul a {color:#999; position:relative; transition:all .3s; line-height:3.8}

@media screen and (min-width:999px){
	/*pc 효과*/
	#snb .list > ul > li.active > a:after,
	#snb .list > ul > li > a:hover:after {transform:rotate(-135deg); top:40%}
}

#contents {width:100%; padding:0 5rem 10rem; outline:0}
#contents > div {max-width:126rem; margin:0 auto; position:relative}
#contents_title {color:#000; font-size:3.8rem; font-weight:400; word-break:keep-all; padding-top:4rem; line-height:1.2}

.location > ul.path {display:block; margin-top:1rem}
.location .nav-depth {display:none}
.location ul.path li {display:inline-block; vertical-align:top}
.location ul.path li + li::before {display:inline-block; position:relative; top:4px; font-family:"xeicon"; vertical-align:top; font-size:1.2rem; position:relative; margin-right:0.25rem; content:''}
.location ul.path li.icon a {display:inline-block; overflow:hidden; width:1.5rem; text-align:center; vertical-align:0.5rem}
.location ul.path li.icon a::before {display:block; width:100%; height:100%; font-family:"xeicon"; text-align:center; line-height:inherit; content:''}

.contents_util {margin-bottom:3rem !important}
.contents_util .util {position:absolute; right:0; top:5rem; z-index:10}
.contents_util .util .btn {display:inline-block; overflow:hidden; width:4rem; height:4rem; background-color:#fff; border:1px solid #ddd; border-radius:100%; color:#000; text-align:center; line-height:4rem; vertical-align:top; -webkit-transition:all 0.2s; transition:all 0.2s}
.contents_util .util .btn::before {display:block; width:100%; height:100%; font-family:"xeicon"; text-align:center; line-height:inherit; font-size:2rem; font-weight:400}
.contents_util .util .btn.print::before {content:""}
.contents_util .util .btn.up::before {content:""}
.contents_util .util .btn.down::before {content:""}
.contents_util .util .btn.open::before {content:""}
.contents_util .util .btn:hover, .contents_util .util .btn:focus {border-color:#000; background-color:#000; color:#fff}
.contents_util .util .share {display:inline-block; position:relative; vertical-align:top}
.contents_util .util .share .item {visibility:hidden; overflow:hidden; width:0; height:0; opacity:0; position:absolute; top:auto; left:50%; -webkit-transform:translateX(-50%); transform:translateX(-50%); overflow:hidden; top:100%; width:6rem; margin-top:1rem; padding:1rem; border:1px solid #ddd; background-color:#fff; white-space:nowrap}
.contents_util .util .share .item::before {position:absolute; top:auto; left:50%; -webkit-transform:translateX(-50%); transform:translateX(-50%); top:-0.3rem; width:1rem; height:1rem; background-color:#fff; border-top:1px solid #ddd; border-left:1px solid #ddd; content:''; -webkit-transform:rotate(45deg) translateX(-50%); transform:rotate(45deg) translateX(-50%)}
.contents_util .util .share .item .list {display:block !important}
.contents_util .util .share .item a {display:block; overflow:hidden; width:3rem; height:3rem; margin-top:1rem; text-align:center; line-height:3rem}
.contents_util .util .share .item a::before {display:block; width:100%; height:100%; font-family:"xeicon"; text-align:center; line-height:inherit; font-size:2rem; -webkit-transition:all 0.2s; transition:all 0.2s; -webkit-transition-delay:0.1s; transition-delay:0.1s}
.contents_util .util .share .item a.close::before {-webkit-transform:rotate(0); transform:rotate(0); -webkit-transition:all 0.2s; transition:all 0.2s}
.contents_util .util .share .item a.close:hover::before, .contents_util .util .share .item a.close:focus::before {-webkit-transform:rotate(180deg) translateY(2px); transform:rotate(180deg) translateY(2px)}
.contents_util .util .share .item a.close::before {content:''}
.contents_util .util .share .item a:hover::before, .contents_util .util .share .item a:focus::before {-webkit-transform:scale(1.5); transform:scale(1.5)}
.contents_util .util .share .item .facebook a::before {color:#29487d; content:""}
.contents_util .util .share .item .twitter a::before {color:#1da1f2; content:""}
.contents_util .util .share .item .kakaostory a::before {color:#ffc20f; content:""}
.contents_util .util .share .item .kakaotalk a::before {color:#381e1f; content:""}
.contents_util .util .share .item .band a::before {font-size:2rem; font-family:"Noto Sans KR"; font-weight:900; color:#21c531; content:'b'}
.contents_util .util .share.active .btn {border-color:#000; background-color:#000; color:#fff}
.contents_util .util .share.active .item {background-color:#fff; visibility:visible; overflow:visible; width:auto; height:auto; opacity:1; margin-top:1.5rem; -webkit-transition:all 0.2s; transition:all 0.2s}

#depth4_menu_div {clear:both; overflow:hidden; margin-bottom:5rem}
.depth4_menu_ul {display:table; table-layout:fixed; width:100%}
.depth4_menu_ul li {border:1px solid #ddd; border-left-color:#fff; color:#666; display:table-cell; height:5rem; text-align:center; line-height:3}
.depth4_menu_ul li:first-child {border-left:1px solid #ddd}
.depth4_menu_ul li a {display:block}
.depth4_menu_ul:nth-child(n+2) li {border-top-color:#fff; display:block; float:left; width:25%}
.depth4_menu_ul li:hover, .depth4_menu_ul li.active {border-color:#d44932 !important; color:#d44932; position:relative; z-index:1}
.depth4_menu_ul li a:hover, .depth4_menu_ul li.active a {}

#depth5_menu_ul {border:1px solid #ddd; background-color:#f7f7f7; position:relative; padding:3rem 3rem 3rem 17rem; margin-top:-3.5rem; margin-bottom:5rem}
#depth5_menu_ul:before {content:''; border:1px solid #ddd; border-radius:100%; background:#fff url('/main/img/sub/icon-5dep.png') no-repeat center; background-size:100%; position:absolute; left:4rem; top:50%; transform:translateY(-50%); width:9rem; height:9rem}
#depth5_menu_ul li {display:inline-block; margin-left:-4px; width:25%; padding-right:1rem}
#depth5_menu_ul li:hover a, #depth5_menu_ul li.active a {font-weight:400; color:#333}
#depth5_menu_ul a {display:inline-block; overflow:hidden; position:relative; padding:0.5rem 0.5rem 0.5rem 0.8rem; vertical-align:top}
#depth5_menu_ul a:before {content:''; position:absolute; left:0; top:1.6rem; width:2px; height:2px; background-color:#666; border-radius:100%; transition:all 0.3s}

.contents_info {margin-top:10rem !important}
.contents_info > * + * {margin-top:-1px}
.contents_info .duty {overflow:hidden; position:relative; padding:1.5rem 2rem; border:1px solid #ddd; line-height:3rem}
.contents_info .duty .title {font-size:2rem; float:left; overflow:hidden; width:3rem; height:3rem; border-radius:100%; background-color:#3c4165; font-weight:400; color:#fff; text-align:center}
.contents_info .duty .title::before {display:block; width:100%; height:100%; font-family:"xeicon"; text-align:center; line-height:inherit; content:''}
.contents_info .duty .label {font-weight:500; color:#3c4165}
.contents_info .duty .label::after {display:inline-block; position:relative; top:-2px; width:1px; height:1.2rem; margin:0 0.5rem 0 0.75rem; background-color:#ddd; content:''; vertical-align:middle}
.contents_info .duty .list {float:left; width:calc(100% - 25rem); padding-left:1rem}
.contents_info .duty .list li {float:left; margin-right:2rem}
.contents_info .duty .list li:last-child {margin-right:0}
.contents_info .duty .date {position:absolute; right:2rem; top:1.5rem}
.contents_info .group {display:table; width:calc(100% + 0px); table-layout:fixed}
.contents_info .group > * {display:table-cell; padding-right:0px; vertical-align:middle}
.contents_info .group .item + .item {border-left:0 none}
.contents_info .group > .qr:first-child {float:right}
.contents_info .group .qr {width:15rem; border:1px solid #ddd; padding:1rem}
.contents_info #satisfy {position:relative; padding:2.5rem 3rem; border:1px solid #ddd; background-color:#f6f7f9}
.contents_info #satisfy .title {font-size:1.6rem; position:relative; margin-bottom:1rem; font-weight:300}
.contents_info #satisfy .title > strong {font-size:1.8rem; font-weight:600; color:#333}
.contents_info #satisfy .title > span {display:block; color:#484c58; line-height:1.5}
.contents_info #satisfy .title .txt {position:absolute; right:0; bottom:0}
.contents_info #satisfy .title .txt::before {content:'['}
.contents_info #satisfy .title .txt::after {content:']'}
.contents_info #satisfy .title .txt span + span::before {content:' / '}
.contents_info #satisfy .title .txt strong {font-weight:400}
.contents_info #satisfy .list {padding:1rem 0}
.contents_info #satisfy .form {position:absolute; right:2.5rem; bottom:3rem; width:40rem; height:4rem; padding:0 10rem; line-height:4rem}
.contents_info #satisfy .form .length {position:absolute; left:0; top:0; width:9rem; text-align:right}
.contents_info #satisfy .form .btn {position:absolute; right:0; bottom:0; width:10rem; height:100%; border:0 none; background-color:#484c58; color:#fff; text-align:center}

.kogl {display:table; width:calc(100% + 0px); table-layout:fixed; border:1px solid #ddd}
.kogl > * {display:table-cell; padding-right:0px; vertical-align:middle}
.kogl .img {width:17rem; padding:1rem; border-right:1px solid #ddd; text-align:center}
.kogl .txt {padding:3rem}

.form_textbox {width:100%; height:4rem; max-height:100%; padding:0 1rem; border:1px solid #ddd; text-align:left; vertical-align:top}
.form_textbox:focus {border-color:#000}
.form_radio {display:inline-block; position:relative; z-index:0; margin-right:2rem; padding-left:2rem; vertical-align:top}
.form_radio input {position:absolute; left:0; top:0; opacity:0}
.form_radio input:focus + label::before {outline:1px dotted #000}
.form_radio input:checked + label::after {background-color:#484c58}
.form_radio label {cursor:pointer}
.form_radio label::before {position:absolute; left:0; top:0.5rem; z-index:-2; width:1.5rem; height:1.5rem; border-radius:100%; border:1px solid #ddd; background-color:#fff; content:''}
.form_radio label::after {position:absolute; left:0.5rem; top:1rem; z-index:-1; width:0.5rem; height:0.5rem; border-radius:100%; content:''}
.form_radio:last-child {margin-right:0}


/*=============기본 콘텐츠 퍼블리싱==================================================================================*/
h2.dep01, ul.dep01 > li {display:inline-block; color:#2c3787; font-size:2.8rem; font-weight:600; position:relative; margin-top:5rem; margin-bottom:1rem; line-height:1.6}
h2.dep01:first-of-type, ul.dep01 > li:first-of-type {margin-top:0}
h2.dep01 span {color:#333; display:block; font-size:1.6rem; line-height:1.5}

h3.dep02 {margin-top:3rem}
h3.dep01:first-of-type {margin-top:0}
h3.dep02, ul.dep02 > li {color:#000; display:block; font-size:2rem; font-weight:600; position:relative; padding:0 0 0 1.3rem; line-height:1.6; margin-bottom:1rem; word-break:break-all}
h3.dep02:before, ul.dep02 > li:before {content:''; background:#d44932; width:0.5rem; height:1.3rem; position:absolute; left:0; top:0.9rem}
h3.dep02 span {display:block}
ul.dep02 {margin-bottom:1rem}

/* 3depth */ 
h4.dep03, ul.dep03 > li, span.dep03 {color:#333; display:block; font-size:1.6rem; font-weight:normal; position:relative; padding:0 0 1rem 1.3rem; line-height:1.6; word-break:break-all}
h4.dep03:before, ul.dep03 > li:before, span.dep03:before {content:'';  background-color:#465867; border-radius:100%; position:absolute; left:0; top:0.9rem; width:6px; height:6px}

/* 4depth */
h5.dep04, ul.dep04 > li, span.dep04 {color:#666; display:block; font-size:1.6rem; font-weight:normal; position:relative; padding:0 0 0.3rem 1rem; line-height:1.6; word-break:break-all}
h5.dep04:before, ul.dep04 > li:before, span.dep04:before {content:''; background-color:#666; position:absolute; left:0; top:1.2rem; width:5px; height:1px}

/* 5depth */
h6.dep05, ul.dep05 > li {color:#666; display:block; font-size:1.6rem; font-weight:normal; position:relative; padding:0 0 0 1rem; line-height:1.6; word-break:break-all}
h6.dep05:before, ul.dep05 > li:before {content:''; background-color:#666; position:absolute; left:0; top:1.1rem; width:2px; height:2px}

h2 + h3:first-of-type {margin-top:0}

/* 2depth 로 시작*/
ul.dep02 > li {margin-bottom:3rem}
ul.dep02 > li > ul {margin-top:1rem}
ul.dep02 > li > ul > li {color:#333; display:block; font-size:1.6rem; font-weight:normal; position:relative; padding:0 0 0 1.5rem; line-height:1.6; margin-bottom:1rem}
ul.dep02 > li > ul > li:before {content:'';  background-color:#999; border-radius:100%; position:absolute; left:0; top:1rem; width:6px; height:6px}
ul.dep02 > li > ul > li > ul > li {color:#666; display:block; font-size:1.6rem; font-weight:normal; position:relative; padding:0 0 0 1rem; line-height:1.6; margin-top:0.5rem}
ul.dep02 > li > ul > li > ul > li:before {content:''; background-color:#666; position:absolute; left:0; top:1.2rem; width:5px; height:1px}
ul.dep02 > li > ul > li > ul > li > ul > li {color:#666; display:block; font-size:1.6rem; font-weight:normal; position:relative; padding:0 0 0 1rem; line-height:1.6}
ul.dep02 > li > ul > li > ul > li > ul > li:before {content:''; background-color:#666; position:absolute; left:0; top:1.1rem; width:2px; height:2px}

/* 3depth 로 시작*/
ul.dep03 ul ul {padding:0.5rem 0 0.5rem 0.5rem}
ul.dep03 > li > ul > li {color:#666; display:block; font-size:1.6rem; font-weight:normal; position:relative; padding:0 0 0 1rem; line-height:1.6; margin-top:0.5rem}
ul.dep03 > li > ul > li:before {content:''; background-color:#666; position:absolute; left:0; top:1.2rem; width:5px; height:1px}
ul.dep03 > li > ul > li > ul > li {color:#666; display:block; font-size:1.6rem; font-weight:normal; position:relative; padding:0 0 0 0.9rem; line-height:1.6}
ul.dep03 > li > ul > li > ul > li:before {content:''; background-color:#666; position:absolute; left:0; top:1.1rem; width:3px; height:3px}

/* 4depth 로 시작*/
ul.dep04 > li > ul > li{color:#666; display:block; font-size:1.6rem; font-weight:normal; position:relative; padding:0 0 0 1rem; line-height:1.6}
ul.dep04 > li > ul > li:before {content:''; background-color:#666; position:absolute; left:0; top:1.1rem; width:2px; height:2px}

h3.dep02 + ul {margin-left:1.6rem}
h3.dep02 + ul li:last-child {padding-bottom:0}

/*글씨 크기*/
.h1{display:block; color:#000; font-size:2.8rem; font-weight:600; margin-bottom:1rem}
.h2{display:block; color:#000; font-size:2rem; font-weight:600; margin-bottom:1rem}
.h3{display:block; color:#000; font-size:1.6rem; margin-bottom:1rem}
.h4{display:block; color:#000; font-size:1.6rem; margin-bottom:1rem}

/* 테이블 공통 */
.tbl-top {color:#999; font-size:1.4rem; margin-bottom:5px; clear:both; overflow:hidden}
.tbl-top .tbl-info1 {float:left}
.tbl-top .tbl-info2 {float:right}
.table {margin-top:0.5rem}
.table table {border-collapse:collapse; width:100%; margin-bottom:10px; text-align:center; position:relative; word-break:keep-all}
.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 td ul li {margin:0}
.table table thead th,
.table table tbody th {background-color:#f2f3f7; 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:1.5rem; word-break:break-all}
.table table th:last-child, 
.table table td:last-child {border-right:none}
.table ul li:last-child {padding-bottom:0}
.table .line-r {border-right:1px solid #ccc !important}
@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%}
}

/*폰트 아이콘 컬러*/
.xi-info {color:#2c3787}

/*참고*/
.i-refer {color:#666; display:block; font-size:16px; padding-left:2rem; position:relative; margin-right:20px}
.i-refer i{position:absolute; left:0; top:50%; transform:translateY(-50%)}
.i-refer i:before {content:''; color:#eb623c; font-family:"xeicon"}

/*알림*/
.i-info {color:#349a45; display:block; padding-left:2rem; position:relative}
.i-info i{position:absolute; left:0; top:1px}
.i-info i:before {content:""; color:#349a45; font-family:"xeicon"}

/*경고알림*/
.i-warning  {color:#d44932; display:block; font-size:16px; padding-left:2rem; position:relative}
.i-warning i{position:absolute; left:0; top:50%; transform:translateY(-50%)}
.i-warning i:before {content:''; color:#d44932; font-family:"xeicon"}

/*텍스트효과*/
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:2.8rem; 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:12px; position:absolute; left:0; top:4px; line-height:1.8; 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:2.8rem}
span.num i {background-color:#d44932; border-radius:100%; color:#fff; display:block; font-size:11px;  position:absolute; left:0; top:50%; transform:translateY(-50%); height:22px; width:22px; text-align:center; line-height:2}

/*동그라미 숫자*/
ol.c-num {counter-reset:my-counter}
ol.c-num > li {padding-left:2.5rem; position:relative; line-height:1.8}
ol.c-num > li:before {border:1px solid #666; border-radius:100%; content:counter(my-counter); counter-increment:my-counter; color:#333; display:block; font-size:1.1rem; position:absolute; left:0; top:7px; line-height:1.4; text-align:center; height:1.7rem; width:1.7rem}
ol.c-num > li > ol {margin-bottom:5px}

/*ol style*/
.decimal li{list-style:decimal}

/*다단*/
.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:2.5rem 3rem; margin:1.5rem 0} /*라인박스*/
/*박스 색깔*/
.box.bg-gray {border:none; background-color:#f2f3f7}

/*인포박스*/
.info-wrap {position:relative; padding:8px; background:url('/main/img/sub/border-bg.gif') repeat left top}
.info-box {background-color:#fff; padding:3rem 4.5rem; word-break:keep-all; display: flex;}
.info-box > i {background-color:#f4f5fb; border-radius:100%; display:inline-block; width:10.5rem; height:10.5rem; margin-right:4rem; vertical-align:middle; text-align:center; line-height:10.5rem}
.info-box .txt {display:inline-block; width:calc(100% - 14.5rem); margin-left:-4px; vertical-align:middle}
.info-box .txt .tt {color:#223169; display:block; font-size:2rem; font-weight:600; margin-bottom:0.5rem}
.info-box .txt .con {color:#333}
.info-box ul li:last-child {padding-bottom:0}
@media all and (max-width:460px) {
    .info-box {flex-wrap:wrap}
}

/*가로 행 박스*/
.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:2.5rem 3rem}

@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}
}

/*절차*/
.step-list {}
.step-list > li {border:1px solid #d5d7e7; border-radius:100%; display:inline-block; margin-right:4.5%; padding:5.5rem 3rem 3rem; position:relative; width:22rem; height:22rem}
.step-list > li:after {content:''; color:#000; font-size:2rem; font-family:'xeicon'; position:absolute; right:-20%; top:50%; transform:translateY(-50%)}
.step-list > li:last-child {margin-right:0}
.step-list > li:last-child:after {display:none}
.step-list > li .tt {color:#2d3885; display:block; font-size:1.8rem; margin-bottom:1rem; text-align:center} 
.step-list > li .tt > span {background-color:#2d3885; border-radius:100%; color:#fff; display:block; font-weight:300; font-size:1.4rem; margin:0 auto 0.5rem; text-align:center; width:2rem; height:2rem; line-height:2rem}
.step-list > li ul li {color:#333; letter-spacing:-1px; position:relative; text-align:center}

/*절차-박스형*/
.step-list02 > div {border:1px solid #ddd; padding:3rem 6rem; margin-top:-1px}
.step-list02 > div i {background-color:#f3f4f7; border-radius:100%; width:10rem; height:10rem; line-height:10rem; margin-right:4.5rem; text-align:center; display:inline-block; vertical-align:middle}
.step-list02 > div .txt {display:inline-block; width:calc(100% - 15rem); vertical-align:middle}
.step-list02 > div .txt .tt {display:block; color:#000; font-size:1.8rem; font-weight:400; margin-bottom:0.5rem}

@media screen and (max-width:767px) {
	.step-list02 > div {padding:3rem}
	.step-list02 > div i {margin-right:3rem}
}

@media screen and (max-width:490px) {
	.step-list02 > div i {display:block; margin:0 auto 1.5rem}
	.step-list02 > div .txt {display:block; width:100%}
}

/*검색*/
.depth4_tab {margin-top:3rem}
.depth4_tab ul { display: table; width: calc(100% + 0px); table-layout: fixed; margin-bottom: 5rem; }
.depth4_tab ul > * { display: table-cell; padding-right: 0px; vertical-align: middle; }
.depth4_tab ul li { border: 1px solid #ddd; background-color: #f8f8f8; }
.depth4_tab ul li + li { border-left: 0 none; }
.depth4_tab ul li.active { border-color: #2c3787; background-color: #2c3787; font-weight: 600; color: #fff; }
.depth4_tab ul a { display: block; padding: 1.4rem; text-align: center; }

/*버튼*/
.btnbox {padding:0.5rem 0}
.btnbox .btn {display:inline-block}
.btnbox .btn a {background-color:#2c3787; border:1px solid #2c3787; color:#fff; display:block; padding:0.7rem 1.2rem; transition:all .3s}
.btnbox .btn a:hover {background-color:#fff; color:#2c3787}
/*크기*/
.btnbox .btn.lg a{font-size:1.8rem; padding:0.9rem 1.4rem}/*large*/
.btnbox .btn.sm a{font-size:1.4rem; padding:0.4rem 0.7rem}/*small*/
.btnbox .btn.mi a{font-size:1.2rem; padding:0.2rem 0.5rem}/*mini*/
/*라인 버튼*/
.btnbox .btn.line a {background-color:#fff; border:1px solid #2c3787; color:#2c3787}
.btnbox .btn.line a:hover {background-color:#2c3787;  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:#d44932; border:1px solid #d44932; color:#fff}
.btnbox .btn.red a:hover {background-color:#fff; color:#d44932}
/*녹색*/
.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}

/* faqType */
.faqType {border-bottom:1px solid #d6d8e0}
.faqType .group {border:1px solid #d6d8e0; border-bottom:0; word-break:keep-all}
.faqType .group.active .label::before {background-color:#116eb4}
.faqType .group.active .label::after {-webkit-transform:rotate(180deg); transform:rotate(180deg)}
.faqType .group.active .item {visibility:visible; overflow:visible; width:auto; height:auto; opacity:1; padding-bottom:5rem; -webkit-transition:all 0.2s; transition:all 0.2s}
.faqType .label {color:#333; font-size:2rem; font-weight:600; display:block; position:relative; padding:4rem 5rem}
.faqType .label::after {font-size:2.2rem; position:absolute; right:3rem; bottom:3.5rem; font-family:'xeicon'; font-weight:400; color:#999; content:''; -webkit-transition:all 0.2s; transition:all 0.2s}
.faqType .item {visibility:hidden; overflow:hidden; width:0; height:0; opacity:0; position:relative; padding:0 9rem 0 5rem}
.faqType .item strong {color:#000; display:block; margin-top:2rem}
.faqType .item strong:first-child {margin-top:0}
.faqType ol.num  > li {padding-left:2rem; position:relative; line-height:1.8}
.faqType ol.num  > li:before {background:none; color:#666; content:counter(my-counter); counter-increment:my-counter; display:block; font-size:1.6rem; position:absolute; left:0; top:0; text-align:left}
.faqType ol.num  > li:after {content:'.'; font-size:1.6rem; position:absolute; left:1rem; top:-2px}

/*게시판 상단*/
.board-con ul.dep03 > li {padding:0 0 0.5rem 1rem; font-size:1.4rem}
.board-con ul.dep03 > li:before {width:4px; height:4px}

/*절차 (높이 동일)*/
.step-box.type2 {margin:-2rem -2rem 3rem}
.step-box.type2 .step + .step {margin-top:-2rem}
.step-box.type2 .step {background-color:#f3f4f7; border-spacing:2rem; display:table; table-layout:fixed; width:100%}
.step-box.type2 .step > li {background-color:#fff; border-radius:0.5rem; color:#525252; display:table-cell; text-align:center; padding:1rem; position:relative; vertical-align:top}
.step-box.type2 .step > li:after {content:''; color:#999; font-size:2rem; font-family:'xeicon'; position:absolute; right:-2.1rem; top:50%; transform:translateY(-50%)}
.step-box.type2 .step > li .tt {background-color:#449da7; border-radius:.5rem; color:#fff; font-weight:normal; display:block; min-height:5rem; margin-bottom:1rem; padding:1.4rem 0 1rem; text-align:center; word-break:keep-all}
.step-box.type2 .step > li .con {display:block; text-align:left; word-break:keep-all; font-size:inherit}
@media screen and (max-width:1000px) {
	.step-box.type2 {margin:0 0 5rem}
	.step-box.type2 .step {display:block}
	.step-box.type2 .step > li  {display:block; margin:2rem 0 0}
	.step-box.type2 .step > li:after {content:''; left:50%; top:auto; bottom:-2.5rem; transform:translate(-50%, 0)}
	.step-box.type2 .step > li > .tt {height:auto}
}


/*2단*/
.multi2 {display:table; table-layout:fixed; width:100%}
.multi2 > div{display:table-cell}
.multi2 > div:last-child{text-align:right}
 @media screen and (max-width:1000px) {
	.multi2 > div{display:block}
	.multi2 > .group2 {text-align:center !important}
	.multi2 > .group2 .button {margin:.3rem 0 0 0}
	.multi2 > .group2 .button a {width:100%}
}