@charset "utf-8";


/** page별  **/    

.bgimg_10 {background-image: url(/img/page/subtitle10.jpg);}
.bgimg_20 {background-image: url(/img/page/subtitle20.jpg);}
.bgimg_30 {background-image: url(/img/page/subtitle30.jpg);}
.bgimg_40 {background-image: url(/img/page/subtitle40.jpg);}
.bgimg_50 {background-image: url(/img/page/subtitle50.jpg);}
.bgimg_60 {background-image: url(/img/page/subtitle60.jpg);}
.bgimg_99 {background-image: url(/img/page/subtitle99.jpg);}
.bgimg_pr {background-image: url(/img/page/subtitlepr.jpg);}


/** 조직도 컬러 **/
.people_map .c1 {background-color:#08724d;}
.people_map .c2 {background-color: var(--color-point2);}
.people_map .c3 {background-color: var(--color-point3);}
.people_map .c4 {background-color: var(--color-point4);}
.people_map .map3 .c1 {}
.people_map .work_info .c2:after {
    background: var(--color-point2);
}
.people_map .work_info .c3:after {
    background: var(--color-point3);
}
.people_map .work_info .c4:after {
    background: var(--color-point4);
}

/** 탭 스타일 **/
.tab_mg {margin: 1em 0 3em;}
.subtab_case1 .s1 {
    display: flex;
    justify-content: center;
}
.subtab_case1 .s1 li {
    width: 20%;
    text-align: center;
    font-size: var(--font-size22);
    font-weight: 500;
    position:
    relative;
    margin-right: 0.6em;
    word-break: keep-all;
    margin-bottom: 2em;
}

.subtab_case1 .s1 li:last-child {margin-right:0;}
.subtab_case1 .s1 li:after{content:""; position:absolute; width:100%;height: 12px; background:#ccc;bottom: 0; left:0;margin-bottom: -8%;border-radius: 1em;}
.subtab_case1 .s1 li a {
    width: 100%;
    display: inline-block;
}
.subtab_case1 li:hover::after{background-color: var(--color-main);}
.subtab_case1 li:hover a{color: var(--color-main);}
.subtab_case1 li.on:after {background-color: var(--color-main);}
.subtab_case1 li.on a {color: var(--color-main);}

/* 색상값 */
.subtab_case1 .c1 :hover::after{background-color: var(--color-point1);}
.subtab_case1 .c1 li a:hover {color: var(--color-point1);}
.subtab_case1 .c1 li.on:after {background-color: var(--color-point1);}
.subtab_case1 .c1 li.on a {color: var(--color-point1);}
.subtab_case1 .c2 :hover::after{background-color: var(--color-point2);}
.subtab_case1 .c2 li a:hover {color: var(--color-point2);}
.subtab_case1 .c2 li.on:after {background-color: var(--color-main);}
.subtab_case1 .c2 li.on a {color: var(--color-main);}
.subtab_case1 .c3 :hover::after{background-color: var(--color-point3);}
.subtab_case1 .c3 li a:hover {color: var(--color-point3);}
.subtab_case1 .c3 li.on:after {background-color: var(--color-point3);}
.subtab_case1 .c3 li.on a {color: var(--color-point3);}
.subtab_case1 .c4 :hover::after{background-color: var(--color-point4);}
.subtab_case1 .c4 li a:hover {color: var(--color-point4);}
.subtab_case1 .c4 li.on:after {background-color: var(--color-point4);}
.subtab_case1 .c4 li.on a {color: var(--color-point4);}

.subtab_case2 .s2 {
    
    border-bottom: 2px solid var(--color-point4);
}
.subtab_case2 .s2 li:hover {background-color: var(--color-point4);}
.subtab_case2 .s2 li:hover a {color: #fff;}
.subtab_case2 .s2 li {
    width: 25%;
    border: 1px solid #ccc;
    border-radius: 1em 1em 0 0;
    padding: 0.5em;
    text-align: center;
    border-bottom: 0;
    font-size: var(--font-size3);
}
.subtab_case2 .s2 li a {}

.subtab_case2 .s2 li.on {
    background-color: var(--color-point4);
    border: var(--color-point4);
}
.subtab_case2 .s2 li.on a{
    color: #fff;
}
.subtab_case2 .tabs_ul {
    display: flex;
}
.subtab_case2 .c1 {border-bottom-color: var(--color-point1);}
.subtab_case2 .c1 li.on {background-color: var(--color-point1);}
.subtab_case2 .c1 li:hover{background-color: var(--color-point1);}
@media screen and (max-width: 1000px) {
    .tab_mg {margin: 0 0 2em;}
    .subtab_case1 .s1{
    display: flex;
    flex-wrap: wrap;
}
    .subtab_case1 .s1 li{
    width: 46%;
    margin-bottom:1em;
}
    .subtab_case1 .s1 li:nth-child(2n){margin-right:0;}
    .subtab_case1 .s1 li:after {height: 6px;margin-bottom: -5%;}
    .subtab_case2 .s2 li {
    width: 50%;
}
}

/* 서브타이틀 색상값 */
.c1:after {background-color: var(--color-point1);}
.c2:after {background-color: var(--color-point2);}
.c3:after {background-color: var(--color-point3);}
.c4:after {background-color: var(--color-point4);}

/** 층별안내 **/
.space {
    margin-top: 2em;
    display: flex;
    flex-direction: row-reverse;
}
.space .space_photo{
    width: 67%;
}
.space .space_name{
    width: 40%;
}
.space .space_name ul{}
.space .space_name li{
    padding: 1em;
    border-bottom: 1px solid #ccc;
    padding-left: 4em;
    font-size: var(--font-size2);
}
.space .space_name li a{}
.space .space_name li:hover a {color:var(--color-point4);}
.space .space_name li.on{}
.space .space_name li.on a:after{content:""; width:10px; height:10px;background-color: var(--color-point4); position:absolute;left: -10%; top:0;border-radius: 100%;}
.space .space_name li.on a {color:var(--color-point4);}
.space .space_name li a {
    position: relative;
}

/** 대중교통 색상 **/
.traffic .c1 {
    background-color: var(--bus-color-blue);
}
.traffic .c2 {
    background-color: var(--bus-color-green);
}
.traffic .c3 {
    background-color: var(--subway-color-n8);
}
.traffic .c4 {
    background-color: var(--subway-color-n9);
}


.block {
    display: block;
    padding: 2em 4em;
    margin-bottom: 1em;
}
.round {
    border-radius: 1em;
    border: 0;
    margin-bottom: 0;
}

.bg_logo {
    text-align: center;
    padding: 3em 0 2em;
}

.info_list .bg_c1{
    background-color: var(--color-point1);
}
.info_list .bo_c1 {border-top:3px solid var(--color-point1);}

.bg_gray {
    border: 0;
    border-radius: 0 0 1em 1em;
    background-color: #ddd;
    margin: 0;
}
.img1030 {background: url(/img/page/1030/bg.png);background-repeat: no-repeat;background-position-x: center;margin-top: -19em;}
.colbox_1030 {margin-top: -5%;/* background-color: #ffffffd1; */}
.ref p {
    font-size: var(--font-size2);
    margin: 1em 0 0.5em;
}
@media screen and (max-width: 1000px) {
    .space {
    display: flex;
    flex-direction: column;
    margin-top: 1em;
}
    .space .space_name{width: 100%;}
    .space .space_name ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
    .space .space_name li{
    padding: 1em;
    width: 50%;
}
    .space .space_photo {
    width: 100%;
}
    .space .space_photo img{width:100%;}
    .block{
    padding: 1em;
}
    .bg_logo {padding:1em 0;}
    .bg_logo img {width: 70%;}
    .img1030 {
    margin-top: -118%;
    background-position-x: -55em;
}
    .colbox_1030{
    margin-top: -46%;
}
}

/** 이용절차(step) **/
.step_s1 li:nth-child(1)::before {content:"STEP. 01";}
.step_s1 li:nth-child(2)::before {content:"STEP. 02";}
.step_s1 li:nth-child(3)::before {content:"STEP. 03";}
.step_s1 li:nth-child(4)::before {content:"STEP. 04";}
.step_s1 li:nth-child(5)::before {content:"STEP. 05";}

/** 사업안내 아이콘 **/
/*.biz_info dl dt.biz_icon1 {background-image: url(/img/icon/biz_icon1.png);}
.biz_info dl dt.biz_icon2 {background-image: url(/img/icon/biz_icon2.png);}
.biz_info dl dt.biz_icon3 {background-image: url(/img/icon/biz_icon3.png);}
.biz_info dl dt.biz_icon4 {background-image: url(/img/icon/biz_icon4.png);}*/

.biz_info dl dt.none, .biz_info dl dd.none {display: none;}
ul.c1 li::marker {color: var(--color-point1);}
ul.c2 li::marker {color: var(--color-point2);}

.kakao_map div.hide {display:none;}

.vision > ul > li,.values > ul > li {position:relative;/* cursor: pointer; *//* margin-left: -1em; */}
.vision > ul > li > div,.values > ul > li > div {
    position: absolute;
}

.vision > ul > li > div {
    text-align: left;
    padding: 1em;
    /* border: 1px solid #ccc; */
    background-color: var(--color-point4);
    color: #fff;
    line-height: .8em;
    position: absolute;
    top: 70%;
    visibility:
    hidden;
	opacity:0;
    height:
    auto;
    /* display:
    none; */
    transition: all .5s .3s;
    /*
	animation: fadeInUp .3s;
	transition: background 1s ease-out; */
    /*
	transition-duration: 1s;
	transition-timing-function: ease-out;*/
    box-shadow: 1px 1px 10px -8px #ccc;
	z-index:-1;
    border-radius: 1em;
    width: calc(100% + 40%);
    left: 0;
    margin-left: -20%;
    word-break: keep-all;
}
.vision > ul > li > div:after {
							   content:
							   "";
							   position:
							   absolute;
							   width: 20px;
							   height: 20px;
							   top:-5px;
							   left:50%;
							   margin-left:-5px;
							   background-color: var(--color-point4);
							   transform:
							   rotate(45deg);
							   z-index:-1;
							  }
.vision > ul > li > div.point2 {background-color: var(--color-point1);}
.vision > ul > li > div.point2:after {background-color: var(--color-point1);}
.vision > ul > li > div.point3 {background-color: var(--color-point2);}
.vision > ul > li > div.point3:after {background-color: var(--color-point2);}
.vision > ul > li > div.point4 {background-color: var(--color-point3);}
.vision > ul > li > div.point4:after {background-color: var(--color-point3);}

.vision > ul > li.on > div {
	visibility:
	visible;
	opacity:1;
	height:
	auto;
	display:
	block;
	top: 80%;
	/*animation: fadeInUp .3s; */
	z-index:1;
	/*transition-duration: 1s;
	transition-timing-function: ease-out;*/
}

.vision > ul > li > div:before {content:"";}
.vision > ul > li > div > em{
    font-size: .7em;
    font-style: normal;
    position: relative;
    padding-left: 1em;
    display: inline-block;
    margin-bottom: .5em;
    font-weight: 400;
    line-height: 1.4em;
}
.vision > ul > li > div > em:after {
	content:
	"";
	position: absolute;
	width: 10px;
	height: 5px;
	background-color: #fff;
	left: 0;
	top: 8px;
	border-radius: 1em;
	}
.vision > ul > li > div > em:nth-last-child(1){margin-bottom:0;}

.values > ul {}
.values > ul > li{position:relative;}
.values > ul > li > div {
	text-align: center;
	padding: 1em;
	box-shadow: 8px 10px 20px -8px rgb(0 0 0 / 40%);
	background-color: white;
	color: black;
	line-height: .8em;
	position: absolute;
	top: -40%;
	/* left: 50%; */
	left: 12%;
	width: 110%;
	visibility:
	hidden;
	opacity:0;
	height:
	auto;
	/*display:none;*/
	position:
	absolute;
	/* margin: 0 auto; */
	border-radius: 1em;
	transition: all .5s .3s;
	word-break: keep-all;
}
.values > ul > li > div:after {	
	content:"";	
	position:absolute;	
	width: 20px;	
	height: 20px;	
	background-color: #fff;	
	position:absolute;
	bottom: -6px;
	left:50%;
	margin-left:-5px;	
	transform:rotate(45deg);	
}
.values > ul > li.on > div {
	visibility:
	visible;
	opacity:1;
	top: -50%;
	height:
	auto;
	display:
	block;
	/*animation: fadeInUp .3s; */
}
.values > ul > li:hover > div:after {}

.values > ul > li > div > em{
    font-size: .7em;
    font-style: normal;
    position: relative;
    display: inline-block;
    font-weight: 400;
    line-height: 1.4em;
    text-align: left;
    color: #333;
    }

@media screen and (max-width: 1000px) {
	.vision > ul > li{/* height: 6em; *//* width: 6em; */font-size: 1em;padding: 1em;/* border-radius: 3em; */margin-bottom: 0;margin-left: 0;width: 100%;height: auto;}
	.vision > ul > li > div {margin-left: -10%;width: calc(100% + 20%);border-radius: 0.5em;}
	.vision > ul > li > div > em{}

	.values > ul {}
	.values > ul > li{}
	.values > ul > li > div {
    width: 100%;
    left: 0;
    top: 20%;
    margin-top: -20%;
    font-size: 0.9em;
    padding: 0.5em;
    border-radius: 0.5em;
}
	.values > ul > li.on > div {top: 10%;}
	.values > ul > li > div > em{}
	.values > ul > li > div:after {
	width: 10px;
	height: 10px;
	bottom: -4px;
	}

}

.target ul{
}
.target ul li{
    font-size: var(--font-size2);
    /* line-height: 2.6em; */
    display: flex;
    align-items: center;
    position:
    relative;
    margin: 1em 0;
}
.target ul li p:after {content:''; position:absolute; display:block; border-bottom:1px dotted #ccc; width:96%;bottom: -12%;}
div.num {
    color: var(--color-main);
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 100%;
    border: 2px solid var(--color-main);
    margin-right: 1em;
    font-family: 'NanumSquareRound';
    font-weight: 600;
    transition: all 0.4s linear;
}
.tags ul {display: flex;flex-wrap: wrap;}
.tags ul li {
    background: #fff;
    border: 1px solid var(--color-point2);
    padding: 1em 1.5em;
    border-radius: 1em;
    margin: 0 .5em 1em .5em;
    color: var(--color-point2);
    font-weight: 500;
    font-size: var(--font-size2);
}
.tags ul li:hover {
	/*
	background-color: var(--color-point2); 
	color: #fff; */
}
.whowon ul{align-items:unset;}
.whowon li {padding:0 0 1em;}
.whowon li div{height: 80px;}
.whowon .tit {
    background-color: var(--color-bg-point1);
    width: 18%;
    padding: 1em;
    color: var(--color-point1);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--color-point1);
}
.whowon .exp {
    padding: 1em 2em;
    border-bottom-style: dashed;
}
.whowon .exp p {
    font-size: var(--font-size);
}
.dash {}
.dash .biz_tit {border-bottom:1px dashed #ccc;padding-bottom: 1em;color: var(--color-point1);}
.dash .biz_info {margin-top:1em;font-size: var(--font-size2);}
.bank {
    display: flex;
    align-items: center;
    padding: 1em 6em;
    border-radius: 0.5em;
    justify-content: space-evenly;
}
.bank div {display: flex;align-items: center;}
.bank .number {
    font-size: 1.4em;
    font-weight: 500;
}
.bank img {}
@media screen and (max-width: 1000px) {
	.target ul li {background-color: var(--color-point1);}
	.target ul li p {width: 89%;}
	div.num {width: 30px;height: 30px;line-height: 29px;color: #fff;background-color: var(--color-main);}	
	.tags ul li {
    padding: 0.6em;
    margin: 0 0.2em 0.4em 0.2em;
}
	.biz_info .bank {}
	.biz_info .bank li {
    width: unset;
}
	.whowon li div {height:auto;}
	.whowon .tit {width:100%;}
	.whowon .exp {
    border-bottom: unset;
    padding: 1em 0;
}
	.bank {
    display: flex;
    flex-direction: column;
    align-items: center;
	padding:1em;
}
	.bank div {
    display: flex;
    justify-content: center;
    width: 100%;
}
}
/* 인재상 아이콘 */
.injae_inner .icon1 {background-image: url(/img/icon/4020_1.png);}
.injae_inner .icon2 {background-image: url(/img/icon/4020_2.png);}
.injae_inner .icon3 {background-image: url(/img/icon/4020_3.png);}
.injae_inner .icon1:hover {background-image: url(/img/icon/4020_1_over.png);}
.injae_inner .icon2:hover {background-image: url(/img/icon/4020_2_over.png);}
.injae_inner .icon3:hover {background-image: url(/img/icon/4020_3_over.png);}

@media screen and (max-width: 1000px) {
	.injae_inner .icon1 {background-image: url(/img/icon/4020_1_over.png);}
	.injae_inner .icon2 {background-image: url(/img/icon/4020_2_over.png);}
	.injae_inner .icon3 {background-image: url(/img/icon/4020_3_over.png);}
}

p.move {color: var(--color-main);padding: 1em;background-color: var(--color-point1);width: 100%;border-radius: .5em;text-align: center;font-weight: 300;}

/*** 사업 테이블 ***/
table.biz {
    border-top: 2px solid var(--color-main);
}
table.biz td {}
table.biz th.wd40 {width: 40%;}
table.biz th.wd30 {width: 30%;}
table.biz th.wd20 {width: 20%;}
table.biz th.wd15 {width: 15%;}
table.biz p {
    text-align: left;
    font-weight: 400;
    margin-top: 0.5em;
}
table.biz td.le {text-align: left;}
p.scroll {display:none;line-height: 2em;}
@media screen and (max-width: 1000px) {
	.overflow {
    overflow-x: scroll;}
	.overflow table {width:1200px;}
	p.scroll {display:unset;}
}

.biz_ul {
    text-align: left;
}
.biz_ul li{list-style-type: disc;margin-bottom: 0;padding: 0 0 .3em;border: 0;text-align: left;margin-inline-start: 1.2em;}
.biz_ul li::marker {color: var(--color-main);font-size: 0.8em;}
.biz_ul li:last-child{padding-bottom: 0;}

.member_info table {}

.table_s1 table td .public_list {float:left;width: 100%;display: flex;align-items: center;}
.table_s1 table td .public_list li {margin: 0.2rem 0;padding-right: 1em;}
.table_s1 table td .public_list li:first-child {margin-top:0;width: 35%;}
.table_s1 table td .public_list li .label{/* margin-right:0.5em; */}
.table_s1 table td .public_list2 {width:100%;}
.table_s1 table td .public_list.public_list2 li {width:100%;}
.label {display: inline-block;min-width: 70px;color:#fff;padding: 0 10px;height: 24px;line-height: 24px;text-align: center;font-size: 13px;font-weight: 400;border-radius: 1em;}
.label.blue {background-color: #395cb4;}
.label.green {background-color: #50a332;}
.label.sky {background-color: #70b0e0;}
.label.sky2 {background-color: #0090D2;}
.label.red {background-color: #e0121a;}
.label.orange {background-color: #ef7c1c;}
.label.yellow {background-color: #f7ba21;}
.label.purple {background-color: #a05eb5;}
.label.brown {background-color: #a9431e;}
.label.aqua {background-color: #77C4A3;}

.e_mode {}
.e_mode img{
    max-width: 1300px;
    /* width: 100%; */
}

@media screen and (max-width: 1000px) {
	.table_s1 table td .public_list {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
	.table_s1 table td .public_list li:first-child {
    width: 100%;
}
	.e_mode {}
	.e_mode img{
    width: 100%;
}	
}