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

/*-------------------------------------------------
title       :콘텐츠 퍼블리싱
Create date :2022-12
-------------------------------------------------*/


/* 지도건너뛰기 */
.map-skip {color:#999; font-size:1.4rem; display:block; width:1px; height:1px; margin:0 0 0 -10000px; padding:0; overflow:hidden;}
.map-skip:focus {border:1px dotted #000; margin:0; width:100px; height:2em; padding-top:0.5em;  text-align:center;}


.pre {white-space:pre-line; word-break:keep-all} 
.justify {text-align:justify}

/*유튜브 동영상 부분*/
.youtube {padding:0 0 56% 0; position:relative}
.youtube iframe {border:none; width:100%; height:100%; position:absolute; left:0; top:0} 


/*글씨 크기*/
.h1{display:block; font-size:3.4rem !important}
.h2{display:block; font-size:2.8rem !important}
.h3{display:block; font-size:2.6rem !important}
.h4{display:block; font-size:2.4rem !important}
.h5{display:block; font-size:2.2rem !important}
.h6{display:block; font-size:2rem !important}
.small {color:#999; font-size:1.4rem !important}

.con-box {color:#333; display:block; font-size:1.8rem; font-weight:500; line-height:1.8; word-break:keep-all}


/* 1depth */
h2.dep01 {color:#333; display:inline-block; font-size:2.8rem; font-weight:700; margin-top:6.5rem; line-height:1.2; position:relative; word-break:keep-all}
h2.dep01:frist-child {margin-top:0}

/* 1depth 하단 바 있는 형태
h2.dep01 {border-bottom:1px solid #ccc; color:#333; display:inline-block; font-size:2.8rem; font-weight:500; line-height:1.2; position:relative; padding-bottom:1.5rem; word-break:keep-all}
h2.dep01:after {content:''; background-color:#2149a6; width:3rem; height:2px; position:absolute; left:0; bottom:-1px}
*/

/* 2depth */
h3.dep02 {color:#000; font-size:2rem; font-weight:600; line-height:1.4; margin:0 0 0.5rem 0; padding-left:2.5rem; position:relative; word-break:keep-all}
h3.dep02:before {content:''; background-color:#2149a6; width:1.3rem; height:1.3rem; position:absolute; left:0; top:0.7rem}
h3.dep02:after {content:''; background-color:#17bcc0; width:.6rem; height:.6rem; position:absolute; left:0.7rem; top:0.7rem; z-index:1}
ul.dep02 > li {color:#000; font-size:2rem; font-weight:600; line-height:1.4; margin:0 0 0.5rem 0; padding-left:2.5rem; position:relative; word-break:keep-all}
ul.dep02 > li:before {content:''; background-color:#2149a6; width:1.3rem; height:1.3rem; position:absolute; left:0; top:0.7rem}
ul.dep02 > li:after {content:''; background-color:#17bcc0; width:.6rem; height:.6rem; position:absolute; left:0.7rem; top:0.7rem; z-index:1}

/* 3depth */
h4.dep03, span.dep03 {color:#000; display:block; font-weight:500; font-size:1.8rem; position:relative; padding:0 0 0 1.2rem; line-height:1.6; margin-left:2.5rem; word-break:keep-all}
h4.dep03:before, span.dep03:before {content:'';  background-color:#333; border-radius:100%; position:absolute; left:0; top:1rem; width:0.5rem; height:0.5rem}

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

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

/* 2depth 로 시작*/
ul.dep02 ul {padding:0 0 0.7rem; word-break:keep-all}
ul.dep02 > li > ul {margin:0.5rem 0 1rem}
ul.dep02 > li > ul > li {color:#333; display:block; font-weight:400; font-size:1.8rem; position:relative; padding:0 0 0 1.2rem; line-height:1.6; margin:0.3rem 0}
ul.dep02 > li > ul > li:before {content:'';  background-color:#333; border-radius:100%; position:absolute; left:0; top:1.1rem; width:0.5rem; height:0.5rem}
ul.dep02 > li > ul > li > ul > li {color:#666; display:block; font-size:1.6rem; font-weight:normal; position:relative; padding:0 0 0 13px; line-height:1.6; margin:0.2rem 0}
ul.dep02 > li > ul > li > ul > li:before {content:''; background-color:#999; position:absolute; left:0; top:1.1rem; width:6px; height:1px}
ul.dep02 > li > ul > li > ul > li > ul > li {color:#666; display:block; font-size:1.4rem; font-weight:normal; position:relative; padding:0 0 0 8px; line-height:1.4}
ul.dep02 > li > ul > li > ul > li > ul > li:before {content:''; background-color:#999; position:absolute; left:0; top:0.9rem; width:2px; height:2px}

/* 3epth 로 시작*/
.dep02 + .dep03 {margin-left: 2.5rem;}
ul.dep03 {word-break:keep-all}
ul.dep03 > li {color:#333; display:block; font-size:1.8rem; font-weight:400; position:relative; padding:0 0 0 1.2rem; line-height:1.6; margin:0.3rem 0}
ul.dep03 > li:before {content:''; background-color:#333; border-radius:100%; position:absolute; left:0; top:1rem; width:0.5rem; height:0.5rem}
ul.dep03 > li > ul {margin-left:.3rem}
ul.dep03 > li > ul > li {color:#666; display:block; font-size:1.6rem; font-weight:normal; position:relative; padding:0 0 0 13px; line-height:1.6; margin:0.2rem 0}
ul.dep03 > li > ul > li:before {content:''; background-color:#999; position:absolute; left:0; top:1.1rem; width:6px; height:1px}
ul.dep03 > li > ul > li > ul > li {color:#666; display:block; font-weight:normal; position:relative; padding:0 0 0 8px; line-height:1.4}
ul.dep03 > li > ul > li > ul > li:before {content:''; background-color:#999; position:absolute; left:0; top:0.9rem; width:2px; height:2px}

/* 4epth 로 시작*/
ul.dep04 {margin:5px 0 1rem 1rem; word-break:keep-all}
ul.dep04 > li {color:#666; display:block; font-size:1.6rem; font-weight:normal; position:relative; padding:0 0 0 13px; line-height:1.6; margin:0.2rem 0}
ul.dep04 > li:before {content:''; background-color:#999; position:absolute; left:0; top:1.1rem; width:6px; height:1px}
ul.dep04 > li > ul > li > ul > li {color:#666; display:block; font-size:1.4rem; font-weight:normal; position:relative; padding:0 0 0 8px; line-height:1.4}
ul.dep04 > li > ul > li > ul > li:before {content:''; background-color:#999; position:absolute; left:0; top:10.9rem; width:2px; height:2px}

/* 5epth 로 시작*/
ul.dep05 > li {padding:0 0 0 1.1rem; position:relative; word-break:keep-all; line-height:1.4}
ul.dep05 > li:before {content:'';  background-color:#999; width:2px; height:2px; position:absolute; left:0.2rem; top:0.9rem}

/* 테이블 공통 */
.tbl-top {color:#999; font-size:1.4rem; margin:0 0 5px; clear:both; overflow:hidden}
.tbl-top .tbl-info1, .tbl-top .item1, .tbl-top .left {float:left}
.tbl-top .tbl-info2, .tbl-top .item2, .tbl-top .right {float:right}
.table {border-top:2px solid #313c56; margin-bottom:5rem}
.table table {background-color:#fff; border:1px solid #ddd; display:table; table-layout:fixed; border-top:0; border-collapse:collapse; width:100%; text-align:center; position:relative; word-break:keep-all}
.table table > td ul {padding-bottom:0; text-align:left}
.table table thead th {background-color:#f0f9ff; border-bottom:1px solid #ddd; border-right:1px solid #ddd; color:#333; font-size:1.8rem; font-weight:600; line-height:1.4; padding:1.5rem 1.5rem 1.4rem}
.table table thead tr + tr th {border-top:1px solid #ddd}
.table table tbody > tr > th {background-color:#f9fdff; border-bottom:1px solid #ddd; border-right:1px solid #ddd; color:#333; font-size:1.8rem; font-weight:600; line-height:1.4; padding:1.5rem 1.5rem 1.4rem}
.table table tbody > tr.whBlue > th {background-color:#e8f1fb}
.table table tfoot th {background-color:#f0f5fa; border-bottom:1px solid #ddd; border-right:1px solid #ddd; font-weight:400; line-height:1.4; padding:1.5rem 1.5rem 1.4rem}
.table table tfoot td {border-bottom:1px solid #ddd; border-right:1px solid #ddd; font-weight:300; line-height:1.4; padding:1.5rem 1.5rem 1.4rem}
.table table tbody td {border-bottom:1px solid #d7e0e8; border-right:1px solid #ddd; color:#444; line-height:1.4; padding:1.5rem 1.5rem 1.4rem; word-break:keep-all}
.table table tbody td ul {padding:0}
.table table tbody .btn {display:inline-block; vertical-align:middle}
.table table tbody .btn a {border:1px solid #ccc; font-size:1.3rem; display:inline-block; padding:.5rem 1rem; margin-left:.5rem; transition:all .3s}
.table .bg-gray {background-color:#f7f7f7}
.table .bg-gray td:first-child {border-left:1px solid #d7e0e8}

/*테이블 td 정렬*/
.table.tTxtC td{text-align:center}
.table.tTxtL td{text-align:left}

/*테이블 선*/
.line-r {border-right:1px solid #ddd}
.line-l {border-left:1px solid #ddd}


@media screen and (min-width:1025px){
   .table table tbody .btn a:hover {background-color:#333; border:1px solid #333; color:#fff}
}
@media screen and (max-width:1023px) {
   /* 테이블 공통 */
   .table{clear:both; overflow:hidden}
   .table {background:#fff; overflow-x:scroll; position:relative}
   .table:before {content:' 좌우로 움직여주세요 '; background-color:rgba(0,0,0,0.5); color:#fff; font-family:'xeicon'; width:120%; height:5rem; text-align:center; line-height:5rem; position:absolute; left:50%; top:0; transform:translateX(-50%); z-index:1; animation:move 3s alternate ease-in-out forwards}
   .table > table  {min-width:70rem}
   .table.wide > table  {min-width:100rem}
   .table table:before  {width:100%}
   
   .table::-webkit-scrollbar {position:relative; height:3px;}
   .table::-webkit-scrollbar-thumb {background-color:#333; border:3px solid #333; border-radius:6px}
   .table::-webkit-scrollbar-track {background-color:#e5e5e5}
}
@media screen and (max-width:767px){
   .table table tbody .btn {display:block; margin:0.5rem 0 0 0}
   .table table tbody .btn a:first-child {margin:0}
}


/*참고*/
.i-refer {color:#666; display:block; font-size:1.4rem; padding-left:2.2rem; position:relative}
.i-refer:before {content:''; color:#f0621c; font-size:1.6rem; font-family:"xeicon"; position:absolute; left:0; top:-2px}

/*알림*/
.i-info {color:#6e7176; display:block; font-size:1.6rem; position:relative; padding-left:2.7rem; line-height:1.4; margin:.3rem 0}
.i-info:before {content:"";color:#2149a6; font-size:1.9rem; font-family:'xeicon'; position:absolute; left:.35rem;top:-0.2rem;}
.i-info mark {background-color:#eaffd3}
ul > li > .i-info {margin-top:0.5rem}

/*경고알림*/
.i-warning {color:#d24423; display:block; font-size:1.4rem; padding-left:2rem; position:relative}
.i-warning:before {content:''; color:#d24423; font-size:1.6rem; font-family:"xeicon"; position:absolute; left:0; top:-1px}

/*텍스트효과*/
mark {background:#dcf0ff}/*마커 (형광펜)*/

/*밑줄*/
.u {position:relative}
.u:after{content:''; background-color:#000; width:100%; height:1px; display:block; position:absolute; left:0; bottom:0}

/*숫자*/
ol.ol-num {counter-reset:my-counter}
ol.ol-num > li {color:#333; padding-left:2rem; position:relative; line-height:1.6; margin-bottom:0.5rem}
ol.ol-num > li:before {content:counter(my-counter) '.'; counter-increment:my-counter; position:absolute; left:0; top:0; line-height:1.6}

/*동그라미 숫자*/
ol.c-num {counter-reset:my-counter}
ol.c-num > li {color:#000; padding-left:2.8rem; position:relative; line-height:1.6; margin:1rem 0}
ol.c-num > li:before {background:#2149a6; border-radius:100%; content:counter(my-counter); counter-increment:my-counter; color:#fff; display:block; font-size:1.1rem; font-weight:500; position:absolute; left:0; top:0.1rem; line-height:2.2; text-align:center; height:22px; width:22px}
ol.c-num > li li {color:#666}

ol.s-num {counter-reset:my-counter}
ol.s-num > li {color:#333; font-size:1.5rem; padding-left:2.3rem; position:relative; line-height:1.6; margin-bottom:0.5rem}
ol.s-num > li:before {border:1px solid #666; border-radius:100%; content:counter(my-counter); counter-increment:my-counter; display:block; font-size:10px; font-weight:500; position:absolute; left:0; top:5px; line-height:1.4; text-align:center; height:16px; width:16px}

/*박스*/
.box {border:1px solid #ccc; padding:3rem; position:relative}

/*박스 색깔*/
.box.bg-gray {border:0; background-color:#eaedf3}

/*그리드 박스*/
.box-grid {background:url('/kor/img/sub/box-grid.gif') repeat left top; border:1px solid #ddd; color:#2162af; font-family:'NanumSquareBold'; font-size:4.5rem; padding:10rem 2rem; text-align:center}

/*라인 박스*/
.box-line {border-top:1px solid #ddd; background-color:#f1f1f4; position:relative; padding:3rem}
.box-line:before {content:''; background-color:#000; width:6rem; height:1px; position:absolute; left:3rem; top:-1px; opacity:0.5}
.box-line .tt {color:#333; display:block; font-size:1.8rem; font-weight:normal}
.box-line .desc {margin-top:0.8rem}
.box-line .desc > li {color:#333; font-size:1.6rem; line-height:1.4; margin-bottom:0.8rem; padding-left:1.5rem; position:relative}
.box-line .desc > li:before {content:'';  background-color:#333; border-radius:100%; position:absolute; left:0; top:0.7rem; width:0.5rem; height:0.5rem}
.box-line .desc ol {margin-top:0.8rem}
.box-line .desc ol li {padding-left:0}
.box-line .desc ol li + li {margin-top:0.5rem}

/*패턴 박스*/
.dep01 + .p-box {margin:-2rem 0 2rem}
.p-box {position:relative; padding:1.5rem 2rem; font-size:1.5rem; line-height:1.6; word-break:keep-all}
.p-box:after {content:''; width:100%; height:100%; position:absolute; left:0; top:0; background:url('/ease_src/publishing/img/border-bg.gif') repeat; opacity:0.3; z-index:-1}


.info-desc {width:100%; text-align:left}
.info-desc li {border-top:1px solid #e5e5e5; display:flex; flex-wrap:wrap; padding:1rem 3rem; width:100%; justify-content:space-between}
.info-desc li.brB {border-bottom:1px solid #e5e5e5}
.info-desc strong {color:#333; font-weight:500; position:relative}
.info-desc strong:before {content:''; background-color:#000; width:100%; height:1px; position:absolute; left:0; top:-1.1rem; opacity:0.5}
.info-desc span {color:#333; width:calc(100% - 16.5rem); font-weight:600}
@media screen and (max-width:768px) {
	.info-desc li {padding:1rem 1.5rem}
	.info-desc span {width:calc(100% - 10rem)}
}
@media screen and (max-width:640px) {
	.info-desc li {line-height:1.4}
	.info-desc span {width:100%; margin-top:0.5rem}
}

/*앵커 탭*/
.anchor-tab {border:3px solid #ddd; padding:2rem; margin-bottom:2rem}
.anchor-tab .list {clear:both; overflow:hidden}
.anchor-tab .list li {float:left; width:16.66666%; padding:0 0 0 1rem;  position:relative;}
.anchor-tab .list li a:hover {color:#3f65b6; text-decoratioanchor-tabn:underline}
.anchor-tab .list li:before {content:''; background-color:#999; width:.3rem; height:.3rem; position:absolute; left:0; top:50%; transform:translateY(-50%)} 

@media screen and (max-width:768px){
  .anchor-tab {padding:2rem 1.5rem}
  .anchor-tab .list li {width:25%; font-size:1.4rem}
}

@media screen and (max-width:640px){
  .anchor-tab .list li {width:33.3%}
}

/*가운데 타이틀*/
.tt-center {display:block; text-align:center; width:100%; margin-bottom:5.5rem; word-break:keep-all}
.tt-center .dep01 {font-size:3.4rem; font-weight:400; padding-bottom:1rem}
.tt-center .dep01 strong {font-weight:700}
@media screen and (max-width:768px) {
	.tt-center {margin-bottom:4rem}
}

/*박스 이미지*/
.box-img {color:#fff; padding:7rem 2rem 8rem; text-align:center; line-height:1.6; word-break:keep-all; position:relative; z-index:1}
.box-img:before {content:''; background:linear-gradient(90deg, #094330, #002646); color:#fff; width:100%; height:100%; position:absolute; left:0; top:0; z-index:-1}
.box-img:after {content:''; background:url('/kor/img/sub/sub05/c050103-bg.jpg') no-repeat center; width:100%; height:100%; position:absolute; left:0; top:0; opacity:.2; z-index:-1}
.box-img small {font-size:2.6rem; display:block}
.box-img strong {font-size:4.3rem}


/*뒤에 백그라운드 100%*/
.bg-cover {position:relative; padding-bottom:3rem}
.bg-cover:after {content:''; background-color:#f8f8f8; width:1000%; height:100%; position:absolute; left:50%; top:2rem; transform:translateX(-50%); z-index:-1}
.bg-cover .tt {font-size:2.1rem; width:70%; text-align:center; margin:0 auto; word-break:keep-all; line-height:1.6}
.bg-cover .flexBox {margin:3rem 0 0}
.bg-cover .flexBox > * > * {border:none; text-align:center}
.bg-cover .flexBox > * > * .title {font-size:2.2rem} 
.bg-cover .flexBox > * > * .txt {color:#666} 
.bg-cover + h2 {border-top:none}
.bg-cover .button.lg i {display:inline-block}


/*배경*/
.subject {display:block; margin:.5rem 0 0!important}
.subject > span {background-color:#02346b; border-radius:100rem; color:#fff; font-size:1.4rem; font-weight:normal; display:inline-block; padding:.3rem 2rem}

/*아이프레임*/
.iframe {border:none; width:100%; height:100rem}

/*안 떨어지는 같은 크기 기본 박스*/
.flexBox > * {display:flex; flex-wrap:wrap; width:100%}
.flexBox > * > * {flex:1 1; position:relative}
.flexBox > * > * i {display:block}
.flexBox > * > * .title {display:block; font-size:2rem; font-weight:700; margin-bottom:1rem; line-height:normal}
.flexBox > * > * .desc {line-height:1.4; word-break: keep-all;}
@media screen and (max-width:768px){
	.flexBox > * {flex-direction:column}
	.flexBox > * > * {width:100%}
}

/*아이콘 박스 type2*/
.flexBox.icon > * > * {padding-bottom:9rem}
.flexBox.icon > * > * i {position:absolute; right:3rem; bottom:0}
.flexBox.icon > * > * i:after {content:''; background-color:#f0f5fa; border-radius:100rem; width:8rem; height:8rem; position:absolute; right:1.5rem; bottom:50%; transform:translateY(50%); z-index:-1}

/*이미지 박스*/
.flexBox.thumb > * > * {border:0; padding:0; height:100%}
.flexBox.thumb > * > * i {display:block; width:100%; height:100%; margin:0 4rem 1rem 0; padding-top:50%; overflow:hidden; position:relative}
.flexBox.thumb > * > * i img {position:absolute; left:0; top:0; object-fit:cover; height:100%; width:100%}
@media screen and (max-width:768px){
	.flexBox.thumb > * > * {width:calc(50% - 2rem) !important}
}
@media screen and (max-width:640px){
	.flexBox.thumb > * > * {width:calc(100% - 2rem) !important}
}

/*박스 객수*/
.flexBox.lt2 > * > * {flex:inherit; width:calc(50% - 2rem)}
.flexBox.lt3 > * > * {flex:inherit; width:calc(33.3% - 2rem)}
.flexBox.lt4 > * > * {flex:inherit; width:calc(25% - 2rem)}
.flexBox.lt5 > * > * {flex:inherit; width:calc(20% - 2rem)}

/*아이콘형 웹진형 박스*/
.flexBox.webzine > * > * {display:flex; flex:inherit; align-items: center;  width:calc(100% - 2rem)}
.flexBox.webzine > * > * i {display:block; min-width:7rem; margin:2rem}
.flexBox.webzine > * > * .desc {display:flex; align-items:center; width:100%}
.flexBox.webzine > * > * .title {margin:0}
.flexBox.webzine > * > * .con {display:block; margin-left:auto; width:80%}
@media screen and (max-width:768px){
	.flexBox.webzine > * > * {display:block; text-align:center}
	.flexBox.webzine > * > * .desc {display:block}
	.flexBox.webzine > * > * .con {margin-left:0; width:100%}
}


/*이미지형 웹진형 박스*/
.flexBox.webzine.type2 > * > * {border:0; border-bottom:1px solid #ddd; margin-bottom:0}
.flexBox.webzine.type2 > * > *:first-child {border-top:3px solid #333}
.flexBox.webzine.type2 > * > * .desc {display:block}
.flexBox.webzine.type2 > * > * .img {display:block; width:30%; min-width:15rem; height:100%; margin:0 4rem 0 0;padding-top: 20%; overflow:hidden; position:relative}
.flexBox.webzine.type2 > * > * .img img {position:absolute; left:0; top:0; object-fit:cover; height:100%; width:100%}
.flexBox.webzine.type2 > * > * .con {margin:0; width:auto}
@media screen and (max-width:768px){
	.flexBox.webzine.type2 > * > * {display:flex}
	.flexBox.webzine.type2 > * > * .desc {text-align:left}
}

/*박스 안에서 나눠짐*/
.flexBox.division > * {border:1px solid #ddd;width:100%}
.flexBox.division > * > * {border:none; border-right:1px dashed #ddd; width: auto; margin:0}
.flexBox.division > * > *:last-child {border-right:0}
.flexBox.division > * > * i {margin-bottom:2rem}
@media screen and (max-width:768px){
	.flexBox.division > * {flex-direction:column}
	.flexBox.division > * > * {border-right:0; border-bottom:1px dashed #ddd;}
	.flexBox.division > * > *:last-child {border-bottom:0}
	.flexBox.division > * > * i {margin-bottom:0}
}

/*소개*/
.intro {display:flex; flex-wrap:wrap; width:100%; position:relative; word-break:keep-all}
.intro .img-slide {width:62.5rem; height:53.5rem; overflow:hidden; position:relative}
.intro .desc {color:#000; font-size:2.2rem; font-weight:500; width:calc(100% - 62.5rem); padding:6.5rem 0 7.5rem 9.5rem; position:relative}
.intro .desc:after {color:transparent; font-size:15rem; font-weight:600; -webkit-text-stroke:1px #ccc; opacity:0.5; position:absolute; bottom:1rem; left:9rem; line-height:1; white-space:nowrap}
.intro .desc .dep01 {font-size:3.4rem; font-weight:400; padding-bottom:1rem}
.intro .desc .dep01 strong {font-weight:700}
.intro .desc strong {font-weight:700}
.intro .desc .txt {line-height:1.8; margin-top:3rem}
@media screen and (max-width:1440px){
	.intro .desc {padding-left:7rem}
	.intro .desc:after {left:6.5rem}
}
@media screen and (max-width:768px) {
	.intro .img-slide {width:100%}
	.intro .desc {width:100%; padding:6.5rem 0 14rem}
	.intro .desc:after {font-size:13rem; left:0}
}

/*이미지 슬라이드 박스*/
.img-slide .slick-list {width:calc(100% + 5rem)}
.img-slide .slick-slide {margin-right:5rem}
.img-slide .list .img {width:62.5rem; height:53.5rem; position:relative; overflow:hidden}
.img-slide .list .img img {position:absolute; left:0; top:0; object-fit:cover}
.img-slide .slick-list .img img {max-width:none; height:100%; top:50%; transform:translateY(-50%)}

.img-slide .desc {position:relative; margin-top:5rem; padding-bottom:7rem}
.img-slide .desc:after {content:''; background-color:#f0f5fa; width:1000%; height:150%; min-height:40rem; position:absolute; left:50%; bottom:0; transform:translateX(-50%); z-index:-1}
.img-slide .desc > ul {display:flex; flex-wrap: wrap; width:calc(100% + 5rem)}
.img-slide .desc > ul > li {flex:1 1 auto; display:table; width:calc(50% - 5rem); margin:0 5rem 2rem 0}
.img-slide .desc > ul > li > * {display:table-cell}
.img-slide .desc > ul > li strong {color:#666; font-weight:normal; width:20rem}
.img-slide .desc > ul > li .con > * {margin:0}
.img-slide .desc .label i {border-radius:100%; background-color:#005eae; color:#fff; height:3.5rem; width:3.5rem; text-align:center; margin-right:1rem; vertical-align:middle} 
.img-slide .desc .label i:before {display:block; position:relative; top:50%; transform:translateY(-50%)}

.img-slide .desc .button {box-shadow:0 10px 10px rgba(0,0,0,0.1)}

.img-slide .slick-arrow {background-color:rgba(255,255,255,0.5); border:2px solid rgba(0,0,0,0); border-radius:100%; width:6rem; height:6rem; text-align:center; position:absolute; top:40%; transform:translateY(-50%); z-index:1; transition:all .3s}
.img-slide .slick-arrow:hover {background-color:rgba(255,255,255,1); border:2px solid rgba(0,0,0,1)}
.img-slide .slick-arrow.prev {left:-3rem;  box-shadow:-5px 0 7px rgba(0,0,0,0.2);}
.img-slide .slick-arrow.next {right:-3rem; box-shadow:5px 0 7px rgba(0,0,0,0.2);}
.img-slide .slick-arrow.prev:before {content:''}
.img-slide .slick-arrow.next:before {content:''}

.img-slide .slick-dots {border-bottom:1px solid #ddd; padding:1.5rem 0; text-align:center; margin-bottom:5rem}

@media screen and (max-width:768px){
	.img-slide .list .img {width:100%}
	.img-slide .desc > ul {display:block}
	.img-slide .desc > ul > li {display:block; width:calc(100% - 5rem)}
	.img-slide .desc > ul > li .con {width:100%; padding-left:4.8rem}
	.img-slide .slick-arrow {top:45%} 
	.img-slide .slick-arrow.prev {left:0}
	.img-slide .slick-arrow.next {right:0}
}



/*모눈종이 배경*/
.grid {background:url("/kor/img/sub/sub01/bg-grid.jpg") repeat center; padding:5rem; text-align:center}

/*2단*/
.multi {display:table; table-layout:fixed; width:100%}
.multi > div{display:table-cell}
.multi > div:last-child{text-align:right}
@media screen and (max-width:768px) {
	
	.multi {display:block}
	.multi > div{display:block}
	.multi > div:last-child{text-align:left}
	.multi > div .button {margin-top:.5rem}
}


/*간단한 절차*/
.simple-step {}
.simple-step ul {display:flex; flex-wrap:wrap; width:calc(100% + 3rem)}
.simple-step ul li {flex:0 auto; width:calc(20% - 3rem); margin-right:3rem; border-radius:0.5rem; background-color:#f3f3f3; padding:1.5rem 1rem; position:relative; text-align:center}
.simple-step ul li:after {content:''; color:#999; font-size:2rem; font-family:'xeicon'; position:absolute; right:-2.6rem; bottom:1rem}
.simple-step ul li:last-child:after {content:none}
@media screen and (max-width:640px) {
	
	.simple-step ul {flex-direction:column}
	.simple-step ul li {width:calc(100% - 3rem); margin-bottom:3rem}
	.simple-step ul li:after {right:50%; transform:translateX(50%) rotate(90deg); bottom:-3rem}
}

/*단계별 절차*/
.step-box .step {background-color:#f3f4f7; border-radius:0.5rem; display:flex; flex-wrap:wrap; padding:2rem}
.step-box .step > li {background-color:#fff; border:1px solid #b3b8c8; border-radius:0.5rem; color:#2c3b66; flex:1 1; display:flex; flex-direction: column; justify-content: center; margin-right:2rem; padding:2rem; position:relative; text-align:center; word-break:keep-all}
.step-box .step > li:after {content:''; color:#999; font-size:1.4rem; font-family:'xeicon'; position:absolute; right:-1.8rem; top:50%; transform:translateY(-50%)}
.step-box .step > li .tt {display:block; font-size:1.5rem; font-weight:500; line-height:1.4}
.step-box .step > li .con {border-top:1px dashed #ddd; display:block; font-size:1.4rem; line-height:1.4; margin-top:1.5rem; padding-top:1.5rem}
.step-box .step > li:first-child {border-color:#006bb7; color:#006bb7}
.step-box .step > li:last-child {background-color:#02346b; border-color:#02346b; color:#fff; margin-right:0}
.step-box .step > li:last-child:after {display:none}

/* 단계별절차 Gradient */
.step-row .step.col_gradient > li {}
.step-row .step.col_gradient > li:nth-child(3) > span {background-color:#c0d6e5}
.step-row .step.col_gradient > li:nth-child(4) > span {background-color:#90b7d1}
.step-row .step.col_gradient > li:nth-child(5) > span {background-color:#497da5; color:#fff;}
.step-row .step.col_gradient > li:nth-child(6) > span{background-color:#3057B9; color:#fff;}

/*내용 있을 떄*/
.step-box.type2 .step > li {justify-content:inherit} 
 /*4개씩*/
.step-box.step4 .step > li {width:calc(25% - 2rem); flex:0 auto}
.step-box.step4 .step > li:nth-child(n+5) {margin-top:2rem}

@media screen and (max-width:1024px) {
	.step-box.step4 .step > li {width:calc(33.3% - 2rem)}
	.step-box.step4 .step > li:nth-child(4) {margin-top:2rem}
}
@media screen and (max-width:767px) {
	.step-box .step {width:100%}
	.step-box .step > li {margin-right:0; flex:inherit; width:100%}
	.step-box .step > li + li {margin-top:3rem}
	.step-box .step > li:after {content:''; left:50%; right:auto; top:auto; bottom:-3rem; transform: translate(-50%, 0)}
	
	.step-box.step4 .step > li {width:100%}
	.step-box.step4 .step > li:nth-child(n+4) {margin-top:3rem}
}

/*플렉스 절차 박스*/
.flex-step {background-color:#f3f4f7; border-radius:0.5rem; padding:2rem}
.flex-step > * {display:flex; flex-wrap:wrap; width:calc(100% + 2rem)}
.flex-step > * > * {background-color:#fff; border:1px solid #b3b8c8; border-radius:0.5rem; color:#2c3b66; flex:0 1 auto; width:calc(33.3% - 3rem); padding:2rem 2rem; text-align:center; margin:3rem 3rem 0 0; word-break:keep-all; position:relative}
.flex-step > * > *:after {content:''; color:#666; font-family:'xeicon'; font-size:2rem; border-radius:100rem; width:3rem; height:3rem; position:absolute; right:-3rem; top:50%; transform:translateY(-50%); text-align:center; z-index:1}
.flex-step > * > *:last-child:after{content:''; left:50%; right:auto; top:auto; bottom:-3rem; transform:translate(-50%, 0) }
.flex-step > *:nth-child(1) > * {margin-top:0}
.flex-step > *:nth-child(2) {flex-flow:row-reverse wrap-reverse}
.flex-step > *:nth-child(2) > *:after{content:''; right:0; left:-3rem}
.flex-step > *:nth-child(2) > *:last-child:after{content:''; left:50%; right:auto; top:auto; bottom:-3rem; transform:translate(-50%, 0)}
.flex-step > *:last-child > *:last-child:after{content:none}

.flex-step .num {border:1px solid #006bb7; border-radius:100rem; color:#006bb7; display:inline-block; font-size:1.2rem; margin-bottom:2rem; padding:0 1.5rem}
.flex-step .img {display:block; margin:0 auto 2rem; width:6rem; height:6rem}
.flex-step .tt {color:#2c3b66; display:block; font-weight:500; line-height:1.4; word-break:keep-all}
.flex-step .stt {background-color:#2c3b66; border-radius:0.5rem; color:#fff; display:block; font-weight:500; height:4.5rem; line-height:1.6; padding:1rem 1rem; word-break:keep-all}
.flex-step .con {border-top:1px dashed #ddd; margin-top:1.5rem; padding-top:1.5rem; font-size:1.4rem; line-height:1.6}
.flex-step .con > ul {text-align:left}
.flex-step .stt + .con {border-top:0; padding-top:0}
@media screen and (max-width:767px) {
	.flex-step > * > * {width:100%}
	.flex-step > *:nth-child(1) > * {margin-top:3rem}
	.flex-step > *:nth-child(1) > *:first-child {margin-top:0}
	.flex-step > *:nth-child(2) {flex-flow:wrap}
	.flex-step > *:nth-child(2) > *:after,
	.flex-step > * > *:after {content:''; left:50%; right:auto; top:auto; bottom:-3rem; transform: translate(-50%, 0)}
	.flex-step .stt {height:auto}
}

/*절차-세로*/
.step-row .step {background-color:#fff; border:1px solid #ddd; padding:4rem}
.step-row .step > li {display:table; table-layout:fixed; width:100%; position:relative; margin-bottom:3rem}
.step-row .step > li:after {content:''; position:absolute; right:0; bottom:-1.5rem; width:calc(100% - 27rem); height:1px; border-bottom:1px dashed #ddd}
.step-row .step > li .tt {background-color:rgba(232,240,245,1); color:#2c3b66; font-weight:500; font-size:1.9rem; display:table-cell; width:25rem; padding:2rem; position:relative; text-align:center; word-break:keep-all; line-height:1.4; vertical-align:middle}
.step-row .step > li .tt:after {content:''; color:#999; font-size:2rem; font-family:'xeicon'; position:absolute; left:50%; bottom:-3rem; transform:translateX(-50%)}
.step-row .step > li .tt small {display:block; margin-top:0.2rem}
.step-row .step > li .con {display:table-cell; width:100%; padding:2rem; line-height:1.6}
.step-row .step > li .con ul {padding-bottom:0}
.step-row .step > li:first-child .tt {background-color:#fff; border:1px solid #006bb7; color:#006bb7}
.step-row .step > li:last-child .tt {background-color:#02346b; color:#fff}   
.step-row .step > li:last-child .tt:after {display:none}   
.step-row .step > li:last-child {margin-bottom:0}
.step-row .step > li:last-child:after {display:none}
@media screen and (max-width:767px) {
	.step-row .step {padding:3rem}
	.step-row .step > li {margin-bottom:4rem}
	.step-row .step > li .tt {display:block; width:100%}
	.step-row .step > li .con {display:block; width:100%; padding:2rem 0}
	.step-row .step > li:after {width:100%; bottom:0}
	.step-row .step > li .tt:after {top:-3.5rem}
	.step-row .step > li:first-child .tt:after {display:none}   
	.step-row .step > li:last-child .tt:after {display:block}   
}
.step-row.after-none .step > li {padding-bottom:0; margin-top:-1px}
.step-row.after-none .step > li:before,
.step-row.after-none .step > li:after {content:none}


/*-콘텐츠 탭--------------------------------------------*/

.conTab .tab {display:inline-flex; flex-wrap:wrap; margin-bottom:4rem; width:calc(100% + 1rem); justify-content:center; padding:2rem 0 0}
.conTab .tab .item {background-color:#fff; border:1px solid #ddd; border-radius:100rem; height:5.5rem; line-height:5.5rem; margin-right:1rem; min-width:20rem; text-align:center; transition:all .3s}
.conTab .tab .item a {color:#333; display:block; font-weight:700; font-size:2rem; position:relative; padding:0 3rem; transition:all .3s}
.conTab .tab .item:hover,
.conTab .tab .item.active {border-color:#2149a6}
.conTab .tab .item:hover a,
.conTab .tab .item.active a {color:#2149a6}
.conTab .article {position:relative; margin-top:4rem}
.conTab .article .group {visibility:hidden; overflow:hidden; opacity:0; height:0}
.conTab .article .group.active {visibility:visible; opacity:1; height:100%}

.slide-tab .tab {display:inline-flex; flex-wrap:wrap; margin-bottom:4rem; height:5.5rem; width:100%; justify-content:center; overflow:hidden}
.slide-tab .tab .item {background-color:#fff; border:1px solid #ddd; border-radius:100rem; color:#333; cursor:pointer; display:block; font-weight:700; font-size:2rem; height:5.5rem; line-height:5.5rem; position:relative; padding:0 1rem; text-align:center; transition:all .3s}
.slide-tab .tab .slick-list {margin:0 -0.5rem}
.slide-tab .tab .slick-slide {margin:0 0.5rem; opacity:0; transition:all .3s}
.slide-tab .tab .slick-active {opacity:1; transition:all .3s}
.slide-tab .tab .slick-arrow {background-color:#fff; border:1px solid #ddd; border-radius:100%; color:#333; font-size:2rem; width:5.5rem; height:5.5rem; line-height:5.5rem; overflow:hidden; position:absolute; top:0; text-align:center; transition:all .3s; z-index:1}
.slide-tab .tab .slick-arrow:before {display:block; font-family:'xeicon'; width:100%; height:100%; line-height:inherit}
.slide-tab .tab .slick-arrow.prev {left:0}
.slide-tab .tab .slick-arrow.prev:before {content:''}
.slide-tab .tab .slick-arrow.next {right:0}
.slide-tab .tab .slick-arrow.next:before {content:''}
.slide-tab .tab .slick-arrow:hover {border-color:#2149a6; color:#2149a6}
.slide-tab .article {position:relative; margin-top:4rem}

.slide-tab .tab .item:hover,
.slide-tab .tab .item.active,
.slide-tab .tab .slick-current .item {border-color:#2149a6; color:#2149a6}


/*-FAQ--------------------------------------------*/
.faqType .group {border-top:1px solid #d6d8e0; word-break:keep-all}
.faqType .group:first-child {border-top:2px solid #333}
.faqType .group:last-child {border-bottom:1px solid #333}
.faqType .group.active .label::before {background-color:#116eb4}
.faqType .group.active .label::after {-webkit-transform:rotate(180deg); transform:rotate(180deg); bottom:2.5rem}
.faqType .group.active .item {visibility:visible; overflow:visible; height:auto; opacity:1; border-top:1px solid #eee; padding-top:2.5rem; padding-bottom:2.5rem; -webkit-transition:all 0.2s; transition:all 0.2s; /*text-align: justify;*/}
.faqType .item {background-color:#f7f7f7; font-size:1.5rem; line-height:1.6; visibility:hidden; overflow:hidden; width:100%; height:0; opacity:0; position:relative; padding:0 3rem}
.faqType .label {color:#333; font-size:2rem; font-weight:bold; display:block; position:relative; padding:2.5rem 1rem}
.faqType .label::after {font-size:2rem; position:absolute; right:3rem; bottom:2rem; font-family:'xeicon'; font-weight:400; color:#999; content:''; -webkit-transition:all 0.2s; transition:all 0.2s}
.faqType ul li span {display:block}
.faqType .desc {background-color:#f8f8f8; border-radius:0.5rem; font-size:1.4rem; line-height:1.6; margin:0.5rem 0 1rem; padding:1.5rem 2rem}
.faqType .desc * {font-size:1.4rem}
.faqType .dep01 {display:block; margin-bottom:0}
.faqType .dep02 {margin-top:1.5rem}
.faqType .c-num {margin-bottom:2rem}
@media screen and (max-width:1023px) {
	.faqType .label {font-size:1.8rem; padding:1.5rem 2rem}
	.faqType .label::after {right:2rem; bottom:1rem}
	.faqType .item {padding:0 2rem}
	.faqType .group.active .label::after {bottom:1.5rem}
	.faqType .group.active .item {padding:2rem}
}

/*스크롤*/
#scroll {overflow-x:scroll}  
#scroll > .scroll {min-width:100rem}
#scroll::-webkit-scrollbar {position:relative; height:3px;}
#scroll::-webkit-scrollbar-thumb {background-color:#333; border:3px solid #333; border-radius:6px}
#scroll::-webkit-scrollbar-track {background-color:#e5e5e5}

@media screen and (max-width:1023px) {
	
	/*모바일 시 스크롤*/
	.scroll {overflow:hidden; overflow-x:scroll}
	.scroll:before {content:' 좌우로 움직여주세요 '; background-color:rgba(0,0,0,0.5); color:#fff; font-family:'xeicon'; width:120%; height:5rem; text-align:center; line-height:5rem; position:absolute; left:50%; top:0; transform:translateX(-50%); z-index:1; animation:move 3s alternate ease-in-out forwards}
	.scroll > * {min-width:100rem; margin:0 !important}
	.scroll::-webkit-scrollbar {position:relative; height:3px;}
	.scroll::-webkit-scrollbar-thumb {background-color:#333; border:3px solid #333; border-radius:6px}
	.scroll::-webkit-scrollbar-track {background-color:#e5e5e5}
	
} 


/*첨부파일 다운 박스*/
.filedwon-box .box {padding:5rem; display:table; table-layout:fixed; width:100%; text-align:center}
.filedwon-box .img {display:table-cell; vertical-align:middle; padding-right:5rem}
.filedwon-box .desc {display:table-cell; border-left:1px solid #eee; vertical-align:middle; width:45%; padding-left:5rem}
.filedwon-box .desc .title {color:#000; display:block; font-size:3.2rem; font-weight:300; line-height:1.2}
.filedwon-box .desc .title small {color:#ad2553; display:block}
.filedwon-box .btnbox .button {display:block}
@media screen and (max-width:1023px) {
	.filedwon-box .box {padding:3rem}
	.filedwon-box .img {display:block; padding-right:0; padding-bottom:3rem; text-align:center}
	.filedwon-box .desc {display:block; padding-left:0; padding-top:2rem; border-left:0; border-top:1px solid #eee; width:100%}
}
@media screen and (max-width:580px) {
	.filedwon-box .btnbox .button {width:100%}
}

/*새창알림*/
.blank-box {border:1px solid #ddd; padding:3rem; text-align:center; word-break:keep-all}
.blank-box strong {display:block; font-size:2rem}
.blank-box .tt {font-size:3rem; margin:2rem 0; line-height:normal}
.blank-box .tt small {display:block; font-family:'NotoKr'; font-size:1.6rem; font-weight:300}
.blank-box .radius{border-radius:100rem; background-color:#02346b; color:#fff; display:table; padding:.7rem 4rem 0.2rem; margin:0 auto 1rem}
@media screen and (max-width:580px) {
	.blank-box > i {display:block; width:60%; margin:0 auto}
}


/*오시는 길*/
#map  {border:1px solid #ccc; clear:both; overflow:hidden; position:relative;margin: 0;padding: 0;}
#map .root_daum_roughmap .wrap_controllers {display:none}
#map .root_daum_roughmap .wrap_map {border:none; float:left; width:66.756%}
#map .root_daum_roughmap .cont {float:left;padding: 27rem 4% 0; width:calc(100% - 66.756%)}
#map .root_daum_roughmap .cont .section {margin:0; padding:3rem 0}

#map .map-txt {position:absolute; top:5.5rem; right:4%;padding-bottom: 3rem; width:25.368%}
#map .map-txt strong {display:block; color:#333; font-size:3rem; margin-top:1rem; margin-bottom:1.5rem}
#map .map-txt small {color:#999; display:block; line-height:1.2}
#map .map-txt li {color:#333; font-weight:500; margin-bottom:0.5rem; padding-left:4rem}
#map .map-txt li span {display:inline-block; vertical-align:middle; width:calc(100% - 4.5rem)}
#map .map-txt li i {width:3rem; height:3rem; border:1px solid #ccc; border-radius:100%; display:block; text-align:center; line-height:2.8rem; position:absolute; left:0}
#map .map-txt li.address i:before {content:''}
#map .map-txt li.tel i:before {content:''}
#map .map-txt li.fax i:before {content:''}

@media screen and (max-width:1200px) {
	#map .map-txt .logo img {height:40px}
	#map .map-txt .logo > span {font-size:2.6rem}
}

@media screen and (max-width:1000px) {
	#map .root_daum_roughmap .wrap_map {width:100%; height:450px !important}
	#map .root_daum_roughmap .cont {width:100%;padding: 24rem 5% 1.5rem;}
	#map .root_daum_roughmap .cont .section {padding-bottom:4rem}
	#map .map-txt {top:490px; left:5%; right:auto; width:90%; padding-bottom:4rem}
}


/*게시글에 대한 만족도 조사*/
* + .contents_info.view-info {margin-top: -1px}


/* 만족도 조사 */
* + .contents_info {margin:10rem auto 5rem}
.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 .part {color:#666}
.contents_info .duty .part strong {color:#000; font-weight:normal; position:relative}
.contents_info .duty .part strong:before {content:''; color:#666; font-family:'xeicon'; font-size:1.2rem; display:inline-block; vertical-align:1px}
.contents_info .duty .list { float: left; width: calc(100% - 25rem); padding-left: 1rem}
.contents_info .duty .list li {font-size:1.6rem; 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}

.contents_info #satisfy {position: relative; padding:2rem 2.5rem; 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.6rem; font-weight: 600; color: #333; display:block; line-height:1.2; margin-top:0.5rem}
.contents_info #satisfy .title > span { display: none; font-size:1.4rem; color: #484c58; line-height: 1.5}

.contents_info #satisfy .select {display:none}
.contents_info #satisfy .list {display:inline-block; padding: 1rem 0}
.contents_info #satisfy .form { position: absolute; right: 2.5rem; bottom: 3rem; width:50%; max-width:50rem; height: 4rem; padding: 0 10rem 0 0; line-height: 4rem}
.contents_info #satisfy .form .length {font-size:1.4rem; position: absolute; right:11rem; top: 0; width: 9rem; text-align: right}
.contents_info #satisfy .form .form_textbox {width:100%; padding-right:6rem}
.contents_info #satisfy .form .btn { position: absolute; right: 0; bottom: 0; width: 10rem; height: 100%; border: 0 none; background-color: #484c58; color: #fff; font-weight:normal; text-align: center}
.contents_info #satisfy .cont .txt {position: absolute; right: 2.5rem; top: 1.5rem}
.contents_info #satisfy .cont .txt::before { content: '['}
.contents_info #satisfy .cont .txt::after { content: ']'}
.contents_info #satisfy .cont .txt span + span::before { content: ' / '}
.contents_info #satisfy .cont .txt strong { font-weight: 400}
.contents_info #satisfy .cont .end + .txt {top:3rem}

.contents_info #satisfy .cont {font-size:1.6rem}
.contents_info #satisfy .cont .none {color:transparent; font-size:0}
.contents_info #satisfy .cont label > i {content:''; background:url(/kor/img/sub/satisfy-icon.png) space; height:2rem; display:inline-block; vertical-align:middle}
.contents_info #satisfy .cont label > .icon5 {width:10rem}
.contents_info #satisfy .cont label > .icon4 {width:8rem}
.contents_info #satisfy .cont label > .icon3 {width:6rem}
.contents_info #satisfy .cont label > .icon2 {width:4rem}
.contents_info #satisfy .cont label > .icon1 {width:2rem}

.kogl { display: table; width: calc(100% + 0px); table-layout: fixed; border: 1px solid #ddd}
.kogl > * {font-size:1.6rem; 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}

@media (max-width:1380px) 
{ 
    /* 만족도 조사 */
    .contents_info .qr { display: none}
    .kogl .txt { padding: 1.5rem}
}

@media (max-width:1024px) 
{ 
	
	/*공공누리*/
	.kogl > * {display:block}
	.kogl .img {border-right:none}
	.kogl .txt {padding:0 1rem 1rem}
	
	
    /* 만족도 조사 */
    .contents_info #satisfy .form_radio {margin-right:0.5rem}
    .contents_info #satisfy .form {width:45%}ㄹ
    .contents_info #satisfy .cont .end + .txt {position:static}
    
    .contents_info #satisfy .cont .none {color:#333; font-size:1.6rem}
    .contents_info #satisfy .cont label > i {display:none}
}

@media (max-width:767px) 
{ 
	/* 만족도 조사 */
	
	* + .contents_info {margin:5rem 0 3rem}
    .contents_info #satisfy .title {display:none; font-size:1.4rem}
    .contents_info #satisfy .title > span {font-weight:500}
    .contents_info #satisfy .title > strong {display:none; margin-bottom:0.5rem; font-size:1.6rem}
	.contents_info #satisfy .list {display:none}
    .contents_info #satisfy .form {max-width:100%; position: relative; top: auto; left: auto; right: auto; bottom: auto; -webkit-transform: translate(0, 0); transform: translate(0, 0); width: 100%}
    .contents_info #satisfy .cont .txt {display:none; position: static}
    .contents_info .duty .list { width:calc(100% - 3rem); margin-top:0.4rem}
    .contents_info .duty .list li {font-size:1.4rem; position:relative}
	.contents_info .duty .list li::after {content: ''; position:absolute; top:0.5rem; right:-1rem; width: 1px; height: 1.2rem; background-color: #ddd}
    .contents_info .duty .list li:last-child:after {display:none}
    .contents_info .duty .label { display: none; position: relative; width: 10rem; margin-right: 1rem; vertical-align: middle}
    .contents_info .duty .label::after { position: absolute; top: 50%; left: auto; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 0; margin: 0}
    .contents_info .duty .date { display: block; position: static; font-size:1.4rem}

    #satisfy .cont .select{display:block; background-color:#fff; border:1px solid #ddd; border-radius:2px; cursor:pointer; font-size:1.4rem; padding:0.7rem 1rem; margin-bottom:4px; position:relative}
    #satisfy .cont .select i {position:absolute; right:1rem; top:50%; transition:all .3s; transform:translateY(-50%)}
    #satisfy .cont ul li{display:block; border-bottom:1px solid #eee; font-size:1.4rem; padding:1rem 2rem; margin:0}
    #satisfy .cont ul li:last-child{border:none}
    #satisfy .form_radio label::before {top:1.5rem}
    #satisfy .form_radio label::after {top:2rem}
    #satisfy .cont.active ul {display:block; background-color:#fff; border:1px solid #ddd; border-radius:2px; padding:0 0.7rem; margin-bottom:0.7rem}
    #satisfy .cont.active .select i {transform:translateY(-50%) rotate(180deg)}
    
    .contents_info .duty {line-height:1.6}
    .contents_info #satisfy {padding:1.5rem}
    .contents_info #satisfy .form {font-size:1.4rem}
    .contents_info #satisfy .cont label {padding-left:0}
    
    
}

@media (max-width: 580px) 
{ 
    /*만족도 조사*/
    .contents_info #satisfy .form {padding-right:0}
    .contents_info #satisfy .form .form_textbox {width:calc(100% - 7.5rem)}
    .contents_info #satisfy .form .btn {position:relative; width:7rem; height:4rem; font-size:1.3rem}
    .contents_info #satisfy .form .length {display:none; right:1rem}
}

@media screen and (max-width:640px) {
	.board_list tr {float:none; width:100%}
}

/*오시는길*/
.map .root_daum_roughmap {width:100% !important; font-family:"Score" !important; border-radius:0.5rem; border:1px solid #ddd; overflow:hidden}
.map .root_daum_roughmap .wrap_btn_zoom {z-index:1}
.map .wrap_map {margin:-1px -1px}
.map .wrap_controllers {display:none !important}
.map .map-info {border:1px solid #ddd; border-radius:0.5rem; margin-top:-1px; display:table; table-layout:fixed; width:100%; position:relative; padding:3rem 15rem 3rem 3rem}
.map .map-info li {display:table-cell; padding-left:4rem; position:relative; width:50%; vertical-align:top}
.map .map-info li > i {background-color:#2c3b66; border-radius:100%; color:#fff; display:inline-block; width:3rem; height:3rem; line-height:3rem; overflow:hidden; position:absolute; left:0; top:0; text-align:center; margin-right:1rem}
.map .map-info li > strong {display:inline-block; font-weight:500; position:relative; vertical-align:top}
.map .map-info li > strong:after {content:''; width:1px; height:1.5rem; background-color:#ddd; display:inline-block; margin:0 1rem; vertical-align:-1px}
.map .map-info li > span {display:inline-block; line-height:1.6; margin-left:-0.4rem; padding-top:0.1rem; vertical-align:top; width:calc(100% - 12rem); word-break:keep-all}
.map .map-info .btn {position:absolute; right:3rem; top:2.4rem; display:block; width:15rem; padding:0}
.map .map-info .btn a {display:block; border:1px solid #006bb7; border-radius:0.5rem; color:#006bb7; font-size:1.4rem; text-align:center; transition:all .2s; height:4.5rem; line-height:4.5rem; padding:0 2rem}
.map .map-info .btn a:focus {border:1px dotted #000}
.map .map-info .btn a:hover {background-color:#006bb7; color:#fff}
@media screen and (max-width:1024px) {
	.map .map-info li {display:block; width:100%}
	.map .map-info li + li {margin-top:1rem}
}

@media screen and (max-width:640px) {
	.map .map-info {padding:2.5rem 3rem}
	.map .map-info .btn {position:relative; right:auto; top:auto; margin:3rem auto 0; width:100%}
}


/* 사진 레이어 팝업*/
.photo {position:relative}
.photo .list { overflow: hidden; width: calc(100% + 2rem)}
.photo .list li {border-radius:1rem; float: left; width: 33.333%; padding:2rem 2rem 0 0}
.photo .list li .thumb {display:block; cursor:pointer; position:relative; overflow:hidden; width:100%; height:100%; padding-top:62%}
.photo .list li .thumb em {color:#fff; font-size:1.8rem; font-weight:400; opacity:0; position:absolute; left:50%; top:45%; transform:translate(-50%, -50%); transition:all .5s; z-index:1; width:100%; text-align:center}
.photo .list li .thumb:before {content:''; background-color:rgba(0,0,0,0.4); position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; transition:all 0.2s; z-index:1} 
.photo .list li .thumb img {transition:all 1s; position:absolute; left:0; top:0; width:100%; height:100%}
.photo .list li .thumb:hover img {transform:scale(1.1)}
.photo .list li .thumb:hover:before {opacity:1} 
.photo .list li .thumb:hover em {opacity:1; top:50%}

.photo .popup{position:fixed;width:100%;height:100%;top:0;left:0;bottom:0;background-color:rgba(0,0,0,.8);z-index: -1;opacity:0; transition:all 0.2s;}
.photo .popup .close {background-color:rgba(0,0,0,0.8); border:none; color:transparent; display:none; font-size:0; width:6rem; height:6rem; position:absolute; right:0; top:0; text-align:center}
.photo .popup .close i {display:block; color:#fff; font-size:2.2rem; width:100%; height:100%; text-indent:initial; line-height:2.5}
.photo .popup .close:hover {background-color:rgba(119,188,100,1); cursor:pointer}
.photo .popup .img {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%)}
.photo .popup .img em {color:#fff; display:block; font-size:1.8rem; font-weight:400; padding:0.5rem 0 0}
.photo .popup.on{opacity:1;z-index:999;}
.photo .popup.on .close {display:block}

@media (max-width:767px) {

		.photo .list li {width:50%}
		.photo .popup .img {width:80%}
}

/*헌장-공통*/
.charter {border:1px solid #ccc; padding:6.5rem 5rem 6rem; position:relative; word-break:keep-all}
.charter:before {content:''; background-color:#000; width:4.5rem; height:3px; position:absolute; left:50%; top:-1px; transform:translateX(-50%)}
.charter .head {text-align:center}
.charter .head .tt {color:#333; display:block; font-size:2.6rem; font-weight:normal; line-height:1.4; margin-top:4rem}
.charter .head .tt strong {font-weight:700}
.charter .head .s-tt {color:#666; display:block; font-size:1.8rem; font-weight:500; line-height:1.7; margin-top:2.5rem} 
.charter .head .s-tt strong {color:#000; font-weight:700}
.charter .body {margin-top:5rem}
.charter .body .box-oath {background-color:#f1f1f4; color:#333; font-size:2rem; font-weight:normal; line-height:1.4; padding:3.5rem 5.5rem; text-align:center}
.charter .body .box-oath li {border-bottom:1px dashed #dddd; padding:1.5rem 0}
.charter .body .box-oath li:last-child {border-bottom:none}
.charter .body .box-oath strong {font-weight:700}
.charter .body .usage {background-color:#f1f1f4; color:#333; font-size:1.6rem; font-weight:400; line-height:1.4; padding:4.5rem 3.5rem}
.charter .body .usage .tt {color:#333; font-size:2.4rem; font-weight:500; display:flex; align-items:center; justify-content:center; text-align:center; margin-bottom:3.5rem}
.charter .body .usage .tt:before {content:''; background:#333; width:3rem; height:1px; display:inline-block; margin-right:2rem}
.charter .body .usage .tt:after {content:''; background:#333; width:3rem; height:1px; display:inline-block; margin-left:2rem}
.charter .body .usage .desc > li + li {margin-top:1rem}
.charter .body .usage .desc ul li {margin-top:0.5rem}
.charter .body .date {color:#333; display:block; font-size:2.4rem; font-weight:500; margin-top:5rem; text-align:center}
.charter .body .name {color:#333; display:block; font-size:2.4rem; font-weight:700; text-align:center}
.charter .body .name strong {margin-left:3.5rem; margin-right:1rem; font-weight:700}
@media screen and (max-width:768px) {
	.charter {padding:4.5rem 3rem}
	.charter .head .tt {margin-top:3rem}
	.charter .head .s-tt {margin-top:1.5rem}
	.charter .body {margin-top:3rem}
	.charter .body .usage .tt:before,
	.charter .body .usage .tt:after {display:none}
	.charter .body .box-oath {padding:4rem 2rem; font-size:1.8rem}
}


/*상단 타이틀*/
.head-tt {color:#000; font-weight:600; font-size:2.4rem; line-height:1.6}
.head-tt strong {color:#000; font-size:4.4rem; display:block; margin-bottom:1rem}

sup {opacity: .8; margin-left: 0.3rem; font-size: 1.3rem;}


/* 개별넘버링 */
.num {display: inline-block; position: relative; padding-left: 28px; vertical-align: top; margin-top: 3px;}
span.num i {background-color: #3047A4; border-radius: 100%; color: #fff; display: block; font-size: 11px; position: absolute; left: 5px; top: 2px; height: 22px; width: 22px; text-align: center !important; line-height: 2.1;}