@import url("layout.css");
@import url("/css/board/board.css");

/*더페이스샵 폰트*/
@font-face { font-family: 'InkLipquid'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/InkLipquid.woff') format('woff'); font-weight: normal; font-style: normal; }
.font-ink {font-family: 'InkLipquid';}
/*===========*/
/*-------------------------------------------------
Author : SY,CHo
Create date : 2019. 10. 01.
-------------------------------------------------*/
/* 컨텐츠 최소 높이 설정 */
#main {min-height: calc(100vh - 17rem);}

/* VISUAL */
#visual {border-bottom: 1px solid #eee;}
#visual .h2 {padding-top: 4rem; width: 100%; height: 10rem; text-align: center; font-size: 1.7rem; color: #fff; background: #fff url(../../images/korean/sub/visual1.jpg) no-repeat center top; background-size: cover;}
#visual.visual1 .h2 {background-image: url(../../images/korean/sub/visual1.jpg)}
#visual.visual2 .h2 {background-image: url(../../images/korean/sub/visual2.jpg)}
#visual.visual3 .h2 {background-image: url(../../images/korean/sub/visual3.jpg)}
#visual.visual4 .h2 {background-image: url(../../images/korean/sub/visual4.jpg)}
#visual.visual5 .h2 {background-image: url(../../images/korean/sub/visual5.jpg)}

#visual .container {position: relative; height: 3rem; line-height: 3rem; z-index: 1;}

#snb {position: absolute; top: 0; left: 0;}
#snb *:before {font-family: xeicon;}
#snb .home,
#snb a {display: inline-block; padding: 0 1.5rem; width: 12rem; line-height: 3rem; white-space: nowrap; background: #fff; border-right: 1px solid #eee; border-bottom: 1px solid #eee; border-left: 1px solid #eee;}
#snb a:before {position: absolute; top: 0; color: #9aa2ab;}
#snb .home {padding: 0; width: 3rem; text-align: center; border-left: 1px solid #eee;}
#snb .home:before {width: 100%; font-size: 1.1rem; color: #305077; content: "\e902";}
#snb .home,
#snb .depth1 {float: left;}
#snb .home {font-size: 1.1rem;}
#snb .depth1 {position: relative;}
#snb ul {padding-top: 3rem;}
#snb li {opacity: 0; visibility: hidden; transition: all .25s ease; -webkit-transition: all .25s ease;}
#snb li.active {position: absolute; top: 0; left: 0; opacity: 1; visibility: visible;}
#snb li.active > a {position: relative;}
#snb li.active > a:after {position: absolute; top: 0; right: 1rem; font-family: 'xeicon'; color: #9aa2ab; content: "\e936";}
#snb .depth2 {position: absolute; top: 0; left: 100%; opacity: 0; visibility: hidden;}
#snb .depth1 > li.active .depth2 {opacity: 1; visibility: visible;}
#snb .depth1,
#snb .depth2 {margin-left: -1px; height: 0;}

#snb .depth1.open,
#snb .depth2.open {height: auto;}
#snb .depth1.open > li,
#snb .depth2.open > li {opacity: 1; visibility: visible;}
#snb .depth1.open > li.active > a:after,
#snb .depth2.open > li.active > a:after {content: "\e90b";}

#contents {padding: 5rem 0; line-height: 1.6; color: #434343;}
#contents:after {clear: both; display: block; content: "";}

#contents .h2 {margin-bottom: 4rem; width: 100%; text-align: center; font-family: 'NanumSquare'; font-size: 2.2rem; color: #333;}
.h3 {position: relative; margin: 2.5rem 0 1.5rem; padding-left: 1.5rem; line-height: 1; font-size: 1.2rem; color: #434343;}
.h3:before {position: absolute; left: 0; top: 0.1rem; width: 1.15rem; height: 1.15rem; font-family: xeicon; color: #fff; background-color: #817068; content: "\e93f"}
.h4 {position: relative; margin: 1.5rem 0 15px; padding-left: 1rem; line-height: 1; font-size: 0.9rem; font-weight: normal;}
.h4:before {position: absolute; left: 0; top: -0.25rem; font-family: xeicon; font-size: 1.25rem; color: #e3793b; content: "\e93f";}

/* 기본 */
.table table th,
.table table td {padding: 0.75rem; font-size: 0.9rem; font-weight: normal; border: 1px solid #d0d0d0;}
.table table th {text-align: center;}
.table table thead th {color: #fff; background-color: #a2938c; border-bottom: none;}
.table table tbody th {background-color: #f5f1ee;}
.table table tbody td {padding-left: 3.5rem;}
.table table thead th:first-child,
.table table tbody th:first-child,
.table table tbody td:first-child{border-left: none;}
.table table thead th:last-child,
.table table tbody th:last-child,
.table table tbody td:last-child{border-right: none;}
.table table td.txt-center {text-align: center; padding: 0.75rem;}
.table table td.gray {background-color: #f5f1ee;}

.table.center table td {padding: 0.75rem; text-align: center;}

/* 버튼 */
.btn {display: inline-block; padding: 0 20px; color: #fff; border-radius: 10px; font-size: 1rem;}
.btn.large {min-width: 220px; height: 75px; line-height: 75px;}
.btn.medium {padding: 0 50px; height: 50px; line-height: 50px;}
.btn.small {height: 35px; line-height: 35px; font-size: 0.9rem;}
.btn.color01 {background-color: #5a679d;}
.btn.color02 {background-color: #304c6b;}

.btn + .btn {margin-left: 20px;}

.center {text-align: center;}
.btn-center {margin-top: 100px; text-align: center;}

/* 기본CSS 충돌 수정 */
.board_info fieldset span.form-select select {margin: 0;}

/* 박스 */
.box-type1 {margin-top: 40px; padding: 50px 40px 40px; width: 100%; background-color: #eef1f4;}
.navi-box {margin-bottom: 90px; padding: 18px 20px; text-align: center; line-height: 24px; font-size: 0.9rem; color: rgba(255,255,255,0.6); background-color: #062e6b;}

/* 탭메뉴 */
.tab-list {display: table; width: 100%; border: 1px solid #ddd;}
.tab-list li {display: table-cell; width: 1%; text-align: center; vertical-align: center; color: #666; border-right: 1px solid #ddd;}
.tab-list li a {display: block; height: 48px; line-height: 48px;}
.tab-list li:last-child {border-right: none;}
.tab-list li.active {border-right: none;}
.tab-list li.active a {color: #fff; background-color: #062e6b;}

/* 리스트 */
.list-type-dot,
.list-type-dash {overflow: hidden;}
.list-type-dot > li,
.list-type-dash > li {position: relative; padding-left: 0.5rem;}
.list-type-dot > li + li,
.list-type-dash > li + li {margin-top: 0.25rem;}
.list-type-dot > li:before,
.list-type-dash > li:before {position: absolute; top: 0.6rem; left: 0; height: 2px; content: "";}
.list-type-dot > li:before {width: 2px; background-color: #434343;}
.list-type-dash > li:before {width: 5px; background-color: #858585;}

.list-type-box > li {float: left; position: relative; margin-right: 2%; margin-bottom: 30px; padding: 50px 25px 25px; width: 32%; min-height: 190px; border: 1px solid #bec6d6;}
.list-type-box > li:nth-of-type(3n) {margin-right: 0;}
.list-type-box > li:nth-of-type(n+3) {margin-bottom: 0;}
.list-type-box h3 {position: absolute; left: 50%; top: -10px; margin-left: -90px; width: 180px; height: 40px; line-height: 38px; font-size: 0.8rem; color: #383b40; background-color: #fff; border: 1px dashed #bec6d6; border-radius: 20px;}

/* Headline */
.headline {margin-bottom: 2.5rem; text-align: center; font-family: 'NanumSquare'; font-size: 1.7rem; color: #333;}
.headline strong {font-size: 2.2rem; font-weight: normal; color: #bc7853;}

/* 센터소개 */
.box-one-stop {margin-left: 1rem; padding: 0 1.25rem;}
.box-one-stop strong {font-size: 1.1rem; font-weight: normal; color: #f17448}
.box-one-stop strong + p {font-size: 0.9rem;}
.list-type-box1 {margin-top: 1rem; overflow: hidden;}
.list-type-box1 > li {float: left; width: 24.25%; height: 12.5rem; background: #a2938c; border-radius: 1rem;}
.list-type-box1 > li:nth-child(2n) {background: #bc7853;}
.list-type-box1 > li + li {margin-left: 1%;}
.list-type-box1 > li strong {display: block; height: 2.75rem; line-height: 2.75rem; text-align: center; font-family: 'NanumSquare'; font-size: 1rem; color: #fff}
.list-type-box1 .list-type-dot {padding: 1rem 0 0 4rem; height: 9.75rem; background: #f5f1ee; border-radius: 1rem;}

.list-type-box2 {padding: 1.25rem; background: #f5f1ee; overflow: hidden;}
.list-type-box2 > li {float: left; padding-top: 1.15rem; width: 20%; height: 3.5rem; text-align: center; background: #fff;}
.list-type-box2 > li:nth-of-type(2),
.list-type-box2 > li:nth-of-type(8),
.list-type-box2 > li:nth-of-type(14) {background: #dfd5cf;}
.list-type-box2 > li:nth-of-type(4),
.list-type-box2 > li:nth-of-type(6),
.list-type-box2 > li:nth-of-type(10),
.list-type-box2 > li:nth-of-type(12) {background: #f6cd6c;}

/* 위치 및 부서안내 */
.mapKakao {width: 100%; height: 24rem; /* border: 1px solid #dcdcdc; */ overflow: hidden;}
.root_daum_roughmap.root_daum_roughmap_landing.os_mac {padding: 0; border: none;}
.mapDataWrap {display: table; table-layout: fixed; margin-top: 2rem; width: 100%; overflow: hidden;}
.mapDataWrap .box {position: relative; display: table-cell; width: 14.75rem; text-align: center; vertical-align: middle; font-size: 1.2rem; color: #fff; background: #efc561; overflow: hidden;}
.mapDataWrap .box:before {position: absolute; top: 0; left: 0; width: 200%; height: 100%; border: 1px solid #fff; transform: rotate(45deg); -webkit-transform: rotate(45deg); transform-origin: top left; -webkit-transform-origin: top left; content: "";}
.mapDataWrap .box em {position: relative; display: block; padding: 2rem 0; background: #efc561;}
.mapDataWrap .table {display: table-cell; padding-left: 1rem;}

/* 상담안내 */
.box.line {padding: 2rem 2.5rem; border: 5px solid #efefef;}
.box.line.icon {padding-left: 12rem; font-size: 1rem; color: #333; background: no-repeat 3.5rem center;}
.box.line.icon strong {font-size: 1.3rem; font-weight: normal; color: #f17448;}

.box.line.icon.speaker {background-image: url(../../images/korean/sub/speaker.png);}
.box.line.icon.light {background-image: url(../../images/korean/sub/light.png);}

.box.line .list-type {font-size: 0.9rem; color: #bc7853;}
.box.line .list-type li + li {margin-top: 0.25rem;}

.h3-depth-box {margin-left: 1rem;}

/* 구인신청안내 */
.list-type-box3 {margin-top: 2.5rem; overflow: hidden;}
.list-type-box3 > li {position: relative; float: left; padding: 8rem 2.5rem 2rem; width: 32%; height: 17.5rem; color: #fff; border-radius: 1rem;}
.list-type-box3 > li:nth-of-type(1) {padding-top: 2rem; background: #bc7853 url(../../images/korean/sub/icon01.png) no-repeat 90% center;}
.list-type-box3 > li:nth-of-type(2) {background: #a2938c url(../../images/korean/sub/icon02.png) no-repeat center 20%;}
.list-type-box3 > li:nth-of-type(3) {background: #efc561 url(../../images/korean/sub/icon03.png) no-repeat center 20%;}
.list-type-box3 > li + li {margin-left: 2%;}
.list-type-box3 > li strong {display: block; line-height: 1.3; text-align: center; font-size: 1.1rem; font-weight: normal;}
.list-type-box3 > li:nth-of-type(1) strong {margin-bottom: 1rem;}
.list-type-box3 > li strong span {font-size: 0.9rem;}
.list-type-box3 .list-type-dot > li {color: #edd0c0;}
.list-type-box3 .list-type-dot > li:before {background-color: #edd0c0;}
.list-type-box3 .list-type-dot > li + li {margin-top: 0;}
.list-type-box3 em {position: absolute; bottom: 0.5rem; right: 1rem; line-height: 1; font-family: 'NanumSquare'; font-size: 6.5rem; color: #fff; font-style: italic; opacity: 0.55;}

@media screen and (max-width: 1300px) {
	#main .container {padding: 0 1rem;}

	/* 센터소개 */
	.box-one-stop {margin-left: 0; padding: 0;}
	.list-type-box1 .list-type-dot {padding: 1rem 2rem;}
}

@media screen and (max-width: 1000px) {
	#contents {padding: 2.5rem 0;}

	/* Headline */
	.headline {font-size: 1.2rem;}
	.headline strong {font-size: 1.8rem;}

	/* 기본 */
	.table table tbody td {padding-left: 0.75rem;}

	/* 센터소개 */
	.list-type-box1 > li {width: 49.5%;}
	.list-type-box1 > li + li {margin-left: 0;}
	.list-type-box1 > li:nth-child(2n) {margin-left: 1%;}
	.list-type-box1 > li:nth-child(n+3) {margin-top: 1rem;}

	.list-type-box2 > li {width: 33.333%;}

	/* 위치 및 부서안내 */
	.mapDataWrap {display: block; table-layout: auto;}
	.mapDataWrap .box {display: block; width: 100%;}
	.mapDataWrap .box:before {transform-origin: 0 100%; -webkit-transform-origin: 0 100%;}
	.mapDataWrap .box em {padding: 1rem 0; background: transparent;}
	.mapDataWrap .table {display: block; margin-top: 1rem; padding-left: 0;}

	/* 구인신청안내 */
	.list-type-box3 {margin-top: 1rem;}
	.list-type-box3 > li {float: none; padding: 6rem 2rem 2rem; width: 100%; height: auto;}
	.list-type-box3 > li + li {margin-top: 1rem; margin-left: 0;}
	.list-type-box3 > li:nth-of-type(1) {background-position: 90% 80%;}
}

@media screen and (max-width: 800px) {
	/* Headline */
	.headline {font-size: 1.2rem;}
	.headline strong {font-size: 1.4rem;}

	/* 기본 */
	.table > table {display: block;}
	.table > table > thead {display: none;}
	.table > table > tbody {display: block;}
	.table > table > tbody > tr {display: block; padding: 1rem; width: 100%; border-bottom: 1px solid #e4e4e4;}
	.table > table > tbody > tr:nth-of-type(odd) {background: #f5f1ee;}
	.table > table > tbody > tr > th {display: block; margin-bottom: 0.5rem; padding: 0; text-align: left; font-weight: 700; background: transparent; border: none;}
	.table > table > tbody > tr > td {display: block; padding: 0; text-align: left; border: none;}
	.table > table td.txt-center {text-align: left; padding: 0;}
	.table > table td.gray {text-align: left; background: transparent;}

	.table.center table td {padding: 0; text-align: left;}

	/* 상담안내 */
	.box.line {padding: 1rem 1.5rem;}
	.box.line.icon {padding-left: 9rem; font-size: 0.9rem; background-position: 1.5rem center;}
	.box.line.icon strong {font-size: 1rem;}
	.h3-depth-box {margin-left: 0;}
}

@media screen and (max-width: 600px) {
	/* Headline */
	.headline {font-size: 1rem;}
	.headline strong {font-size: 1.2rem;}

	#snb {width: 100%;}
	#snb a {width: 100%;}
	#snb .depth1 {width: calc(100% - 3rem);}
	#snb .depth1 > li {width: 50%;}
	#snb .depth2,
	#snb .depth2 > li {width: 100%;}

	#contents .h2 {margin-bottom: 1rem; font-size: 1.5rem;}

	/* 기본 */
	.table > table th,
	.table > table td {font-size: inherit;}

	/* 센터소개 */
	.list-type-box1 > li {width: 100%;}
	.list-type-box1 > li + li {margin-top: 1rem;}
	.list-type-box1 > li:nth-child(2n) {margin-left: 0;}

	.list-type-box2 > li {width: 100%;}

	/* 상담안내 */
	.box.line.icon {padding-top: 7rem; padding-left: 1.5rem; background-position: center 1rem;}
	.box.line.icon strong {font-size: 1rem;}
}