@charset "utf-8";


/* guide 기념관 안내 */
.guide.container {background: url(../images/guide/@information.png?v=01) #ffffff top right no-repeat;     background-position-y: 80px;}

.guide .h2Wrap {position: relative;}
.guide .h2Wrap h2 {display: inline-block; vertical-align: middle;}

.subGnbWrap {display: inline-block; vertical-align: middle; margin-left: 35px; margin-top: -6px;}
.subGnbWrap:after {content:""; display: block; clear: both;}
.subGnbWrap li {float: left; margin: 0 20px; position: relative; font-weight: 600;}
.subGnbWrap li:before {content:""; display: inline-block; width: 1px; height: 13px; position: absolute; top: 6px; left: -20px; background: #000;}
.subGnbWrap li:after {content:""; display: block; }
.subGnbWrap li:first-child {margin-left: 0;}
.subGnbWrap li:first-child:before {display: none;}
.subGnbWrap li.active:after {content:""; display: block; width: 100%; height: 1px; background: #000; position: absolute; bottom: -5px; left: 0;}

.installPhoto:after {content:""; display: block; clear: both;}
.installPhoto li {float: left; margin-left: 20px;}
.installPhoto li:first-child {margin-left: 0;}
.installPhoto li img {max-width: 100%;}

.organization {position: relative; padding-top: 35px; padding-bottom: 120px;}
.organization img {max-width: 100%;}

.organization .teamBox:after {content:""; display: block; clear: both;}
.organization .orTable {width: 100%; max-width: 220px; float: left; border: 1px solid #ddd; border-collapse: collapse; background: #fff;}
.organization .orTable th {height: 50px; background: #c3c3c3; text-align: center;}
.organization .orTable th, 	.organization .orTable td {border: 1px solid #ddd;}
.organization .orTable td {height: 80px; padding-left: 18px;}
.organization .orTable .small {margin-top: 5px; font-size: 12px;}
.organization .box.bottomBox {float: left;} 

.organization .teamTable {width: 100%; max-width: 220px; float: left; border: 1px solid #ddd; background: #fff;}
.organization .teamTable li {border-bottom: 1px solid #ddd; height: 80px; padding-left: 18px;}
.organization .teamTable li.teamHead {height: 50px;}

.organization .box {width: 100%; max-width: 218px; height: 50px; line-height: 50px; border: 1px solid #ddd; text-align: center; background: #fff;}
.organization .box.first {margin: 0 auto 30px;}
.organization .box.second {margin: 0 auto 40px; }

.organization .box.topBox {position: absolute; top: 75px; right: 0;} 


.directions .notice {color: #ff0000;}

.customoverlay {position:relative;bottom:55px;border-radius:6px;border: 1px solid #ccc;border-bottom:2px solid #ddd;float:left;}
.customoverlay:nth-of-type(n) {border:0; box-shadow:0px 1px 2px #888;}
.customoverlay a {display:block;text-decoration:none;color:#000;text-align:center;border-radius:6px;overflow:hidden;}
.customoverlay .title {display:block;text-align:center;background:#fff; padding:5px 10px;font-size:13px; font-family:'dotum';}
.customoverlay:after {content:'';position:absolute;margin-left:-12px;left:50%;bottom:-12px;width:22px;height:12px;background:url('http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png')}

.biTitle {width: 290px; margin-top: 65px;}
.biTitle:after {content:""; display: block; clear: both; width: 100%; height: 1px; margin-top: 18px; margin-bottom: 18px; background: #ccc; }
.biTitle h3 {display: inline-block; font-size: 15px;}
.biTitle .biDown {font-size: 15px; display: inline-block; text-align: right; float: right;}
.biTitle .biDown:after {content:""; display: inline-block; margin-top: -5px; vertical-align: middle; margin-left: 10px; width: 20px; height: 15px; background: url(../images/common/icoDown.png) no-repeat; background-position: right;}
.biImgWrap {width: 592px; text-align: center;}
.biImgWrap.no2 {padding-top: 44px; margin-bottom: 70px;}
.biImgWrap.no3 {padding-top: 58px;}
.biImgWrap.no1 img {max-width: 592px;}
.biImgWrap.no2 img {max-width: 380px;}
.biImgWrap.no3 img {max-width: 375px;}



/* workhub 노동 허브*/
.workhub.container.no1 {background: url(../images/sub/bg_workhub.png) #ffffff top right no-repeat;     background-position-y: 80px;}
.workhub.container.no2 {background: url(../images/workhub/@support.png) #ffffff top right no-repeat;     background-position-y: 80px;}

.supportWrap {margin-left: -20px;}
.supportWrap:after {content: ""; display: block; clear: both;}
.supportWrap li {width: 260px; height: 130px; box-sizing:border-box; margin-left: 20px; margin-bottom: 20px; position: relative; float: left; border: 1px solid #ddd; border-radius: 10px; background: #fff; overflow: hidden; cursor: pointer; text-align: center; line-height: 130px;}
.supportWrap li .front {max-width:100%; max-height:100%; width: 100%; height: 100%;}
.supportWrap li .back {position: absolute; width: 100%; height: 100%; top: 0; left: 0; color: #fff; transition: all .3s; transform: translateY(100%); background: #666; border-radius: 10px; line-height: 1rem;}
.supportWrap li .back .text {display: table; width: 100%; height: 70%; color: #fff;}
.supportWrap li .back .text > div {display: table-cell; vertical-align: middle;}
.supportWrap li:hover .back {transform: translateY(0);}
.supportWrap li .back a {width: 100%; height: 100%; display: inline-block; color: #fff;}
.supportWrap li .back .linkWrap {display: table; width: 100%; height: 30%; border-top: 1px solid #ddd;}
.supportWrap li .back .linkWrap > div {display: table-cell; vertical-align: middle; width:100%; height: 100%; color: #fff; font-size: 11px;}
.supportWrap li .back .linkWrap > div:after {content:""; display: inline-block; width: 4px; height: 8px; margin-left: 5px; background: url(../images/workhub/iconArrow.png) no-repeat; vertical-align: middle;}

body.mobile .supportWrap li.active .back {transform: translateY(0);}
body.mobile .supportWrap li .back,
body.mobile .supportWrap li .back .linkWrap > div {font-size: 8px; line-height: 0.8rem;}

.searchBox {width: 600px; padding: 10px 0; position: relative; border-bottom: 3px solid #000;}
.searchBox:after {content: ""; display: block; clear: both;}
.searchBox input[type="text"] {width: 90%; float: left; background: transparent; border: none; }
.searchBox .btnSearch {float: right; display: block; width: 30px; height: 30px; background: url(../images/common/search.png) no-repeat; text-indent: -999em;}
.search .resultText {margin-top: 20px; margin-bottom: 40px; color: #666;}
.search .resultText span {color: #000;}
.tbType01.searchTb .colSize01 {width: 45%;}
.tbType01.searchTb .colSize02 {width: 18%;}

/* 커뮤니티 */
.tbType01.communityTb .colSize01 {width: 14%;}
.tbType01.communityTb .colSize02 {width: 50%;}
.community .tbType01 td.left a span {position: relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 430px; display: inline-block; vertical-align: middle;}
.community .tbType01 td.left a:hover span {text-decoration: underline;}
.community .rightSel {position: relative; float: right; }
.tbType01.communityTb td.file a span:after {content: ""; display: inline-block; vertical-align: middle; margin-bottom: 3px; width: 16px; height: 15px; margin-left: 12px; background: url(../images/common/haveFile.png) no-repeat;}

/* 청년전태일 */
.container.story {background: url(../images/who/@story.png) #ffffff top right no-repeat;  background-position-y: 80px;  }
.container.story .highlight { margin-bottom: 40px; font-size: 20px; line-height: 1.6em;}
.container.story .mediaCont {margin-top: 60px; max-width: 560px;}
.container.story .mediaCont iframe {width: 100%;}

.container.life {background: url(../images/who/@life.png) #ffffff top right no-repeat;   background-position-y: 80px; }
.life .lifeList dl {margin-bottom: 38px; overflow:hidden; }
.life .lifeList dt {float:left; font-weight: 600; vertical-align: top; padding-left: 15px; background: url(../images/who/dot.png) center left no-repeat; background-size: 3px auto; }
.life .lifeList dd {margin-left: 140px; padding-left: 0;}
	
.h2Wrap.double:after {content:''; display:block; clear:both;}
.h2Wrap.double h2 {float:left;}
.h2Wrap.double .whoTab {float:left;  margin-left: 30px;}
.h2Wrap.double .whoTab:after {content:''; display:block; clear:both;}
.h2Wrap.double .whoTab a {float:left; font-size: 14px; color:#bbbbbb; font-weight: bold; border:1px solid #dddddd; margin-left:-1px; width: 220px; height: 38px; line-height: 38px; text-align: center; background: #f5f5f5;}
.h2Wrap.double .whoTab a.active {background: #fff; color:#000000;}
.h2Wrap.double .whoTab.three a {width: 89px;}
.h3Who {margin-bottom: 40px;}
.h3Who h3{font-size: 22px; line-height: 25px; color:#419bf9; position: relative; padding-left: 23px;}
.h3Who h3:after {content:''; position: absolute; left:0; top:2px; width: 3px; height: 22px; background: #419bf9;}

.btn21{
    letter-spacing:-0.75pt;position:relative;padding:3px 15px 5px 15px;margin:12px 2px 2px 2px;color:#fff;text-align:center;background:#00a1e9;font-size:15px;font-weight:500;text-decoration:none;border:1.5px #00a1e9 solid;border-radius:15px;z-index:5;line-height:130%
}
.btn21:hover{
    color:#000;background:#fff;border:1.5px #00a1e9 solid;
}

@media all and (min-width:1141px) {
	.container {background-size: 70% auto !important;}
	.installPhoto {width: 100%;}
	.installPhoto li {margin-left: 2%; width: 32%;}
	
	.container.story {background-size: 53% auto !important;}
}

@media all and (max-width:1140px) {
	.supportWrap {margin-left: -2%;}
	.supportWrap li {width: 31%; margin-left: 2%;}	
}

@media all and (max-width:568px) {
	.installPhoto li {margin-left: 2%; width: 49%;}
	.installPhoto li.hidden {display: none;}
		
	.h2Wrap.double {margin-bottom: 30px;}
	.h2Wrap.double:after {content:''; display:block; clear:both;}
	.h2Wrap.double h2 {float:none;}
	.h2Wrap.double .whoTab { float:none; margin-left: 0; margin-top: 10px;}
	.h2Wrap.double .whoTab a {float:left; font-size: 12px; color:#bbbbbb; font-weight: bold;  width: 50%; height: 36px; line-height: 36px; box-sizing:border-box;}
	.h2Wrap.double .whoTab.three a {/*width:25%*/ width: 50%;}
	.h3Who {margin-bottom:25px;}
	.h3Who h3{font-size:18px; line-height: 18px; padding-left:15px;}
	.h3Who h3:after {width: 2px; height: 15px; top:1px}

	.subContWrap .h3SubWrap {margin-bottom: 0; padding-bottom: 0;}
	.biTitle {width: 65%; margin-top: 55px;}
	.biTitle:after {margin: 13px 0;}
	.biTitle h3 {font-size: 13px;}
	.biTitle .biDown {font-size: 13px;}
	.biTitle .biDown:after {width: 16px; margin-top: 0; background: url(../images/common/icoDownMob.png) no-repeat; background-size: 100% auto;}
	.biImgWrap {width: 100%;}
	.biImgWrap.no2 {margin-bottom: 0;}
	.biImgWrap.no1 img {max-width: 100%;}
	.biImgWrap.no2 img {max-width: 84%;}
	.biImgWrap.no3 img {max-width: 84%;}

	.container {min-height: 40px;}
	.guide.container {background: url(../images/guide/@information_m.png?v=02) #ffffff top right no-repeat; background-size: 80% auto; background-position-y: 50px;}
	.container.life {background-position-y: 50px;}
	.subGnbWrap {margin-left: 10px; margin-top: -3px; letter-spacing: -1px;}
	.subGnbWrap li {margin: 0 10px; font-size: 12px;}
	.subGnbWrap li:before {left: -10px; top: 4px;}
	.subContWrap {font-size: 12px;}
	.h3SubWrap h3:before {height: 15px;}

	.organization {padding-top: 17px;}

	/*노동허브*/
	.supportWrap {margin-left: -3.5%;}
	.supportWrap li {width: 46%; height: 84px; margin-left: 3.4%; line-height: 84px; font-size: 12px;}	
	.workhub.container.no1 {background: url(../images/workhub/@introduce_m.png?v=01) #ffffff top right no-repeat; background-size: 80% auto; background-position-y: 50px;}
	.workhub.container.no2 {background: url(../images/workhub/@support_m.png?v=01) #ffffff top right no-repeat; background-size: 80% auto; background-position-y: 50px;}
	
	/* 유틸리티 */
	.sitemap > li {width: 50%;}
	.sitemap h3 {font-size: 18px;}
	.sitemap h3:after {margin: 7px 0;}
	.sitemap > li.long {min-height: 150px;}
	.sitemap > li, 
	.sitemap > li.long.no2 {min-height: 110px;}
	.searchBox {width:80%; padding:5px 0; font-size:14px; margin-bottom:30px;}
	.searchBox input[type="text"] {width: 80%; line-height: 12px;}
	.searchBox .btnSearch {background-size: 20px auto; width: 20px; height: 20px;}
	.search .resultText {margin: 20px 0;}
	.search .tbType01.searchTb .colSize02 {width: 22%;}
	.downFile li {background-size: 14px auto; padding-left: 20px;}
	
	.community .tbType01.communityTb .colSize02 {min-width: 220px;}
	.community .tbType01 td.left a span {max-width: 220px; padding-right: 15px;}
	.community .rightSel {position: relative; float: right;}	
	.tbType01.communityTb td.file a span:after {position: absolute; background-position:center;background-size:10px auto; width: 10px; top:2px; right: 0; }

	
	/* 청년전태일 */
	.container.story .highlight {font-size: 14px; margin-bottom: 25px;}
	.container.story .mediaCont {margin-top: 35px;}
	.life .lifeList dt {padding-left: 7px;float:none;}
	.life .lifeList dt, .life .lifeList dd {display: block; margin-left: 0;} 
	.life .lifeList dl {margin-bottom: 27px;}
}