@charset "utf-8";


/** page별  **/    
.point1 {color:#f6595a;}
.mission {
    text-align: center;
    font-size: 2em;
    padding: 1em;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    font-weight: 500;
}
.mission span {font-weight: 700; color: var(--color-point4);}


.icon1 {background-image: url(/img/icon/icon1.png);}
.icon2 {background-image: url(/img/icon/icon2.png);}
.icon3 {background-image: url(/img/icon/icon3.png);}
.icon4 {background-image: url(/img/icon/icon4.png);}
.icon1:hover {background-image: url(/img/icon/icon1_over.png);}
.icon2:hover {background-image: url(/img/icon/icon2_over.png);}
.icon3:hover {background-image: url(/img/icon/icon3_over.png);}
.icon4:hover {background-image: url(/img/icon/icon4_over.png);}

.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);}

.history > div.on {}
.history {
    height: auto;
}
.history h4{
    width: 16%;
    font-size: 2em;
    font-family: 'GmarketSansBold';
    padding-top: 20px;
    position: relative;
}
.history h4:before {
	content:"";
	position: absolute;
	width: 58px;
	height:1px;
	background-color:#ddd;
	top: 60%;
	right: 0%;
}
.history h4:after {
	content:"";
	position: absolute;
	width: 20px;
	height: 20px;
	background-color:var(--color-main);
	top: 45%;
	right: 27%;
	border-radius: 50%;
	border: 4px solid #ffffffc2;
}
.history ul{
    width: 84%;
    margin-bottom: 2em;
    border: 1px solid #ccc;
    padding: 20px 20px;
    border-radius: .5rem;
    position: relative;
}

.history ul li{
    display: flex;
    align-items: baseline;
    position: relative;
}

.history ul li p {line-height: 1.6em;}

.history ul li span {position: relative;display: inline-block;width: 7%;line-height: 2.4em;font-size: 1.2em;font-weight: 500;}
.history div.his_view {display: flex;justify-content: space-between;flex-wrap: wrap;width: 100%;align-items: baseline;}

@media screen and (max-width: 1000px) {
	.mission {
    font-size: 1.9em;
    padding: 0.5em;
    word-break: keep-all;
}
	.history ul{
    width: 100%;
    padding: .5rem;
}
	.history ul li{
    word-break: keep-all;
}
    .history ul li p {
    word-break: keep-all;
}
    .history ul li span {margin-right: .6rem;width: 12%;font-size: 1rem;line-height: 2;}
    .history ul li span:after {
    margin-left: -100%;
}
    .history h4 {
    width: 100%;
    padding-left: 7%;
    font-size: 1.8em;
}
	.history h4:before {
    display: none;
}
	.history h4:after {
    right: 96%;
    top: 50%;
}
	.history > div.on {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
}

/** 조직도 컬러 **/
.people_map .c1:after  {background-color:#08724d;border-top: 5px solid #08724d;}
.people_map .c2:after {background-color:#54af45;}
.people_map .c3:after {background-color:#f07879;}
.people_map .c4:after {background-color:#8d64e0;}
.people_map .c5:after  {background-color:#3e77e0;}
.people_map .c6:after  {background-color:#1bbb9f;}
.people_map .c7:after  {background-color:#fe950e;}

/** 탭 스타일 **/
.tab_mg {margin: 2em 0;}
.tab_mg.mb4{/* margin-bottom: 4em; */}
.subtab_case1 .s1 {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.subtab_case1 .s1 li, .subtab_case2 .s1 li {
    width: 20%;
    text-align: center;
    font-size: var(--font-size);
    font-weight: 500;
    position:
    relative;
    margin-right: 0.6em;
    word-break: keep-all;
    margin-bottom: 1.5em;
}
.subtab_case2 .s1 li {width: 9%;margin-right: 1%;margin-bottom: 1em;}
.subtab_case1 .s1 li:last-child {margin-right:0;}
.subtab_case2 .s1 li:after {
	content:"";
	position:absolute;
	background-color:#ddd;
	width:1px;
	height: 29px;
	left: 50%;
	top: -60%;
}
/*
.subtab_case1 .s1 li:after{
	content:"";
	position:absolute;
	width:100%;
	height: 52px;
	bottom: 0;
	left:0;
	margin-bottom: -4%;
	border-radius: 1em;
	border: 1px solid #676767;
	z-index: -1;
} */
.subtab_case1 .s1 li a, .subtab_case2 .s1 li a {
    width: 100%;
    display: inline-block;
    border-radius: 1rem;
    padding: .5em;
    border-bottom: 5px solid #ccc;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
}
.subtab_case2 .s1 li a {
    padding: .5em 0;
}

.subtab_case1 .s1 li.on a, .subtab_case1 .s1 li a.on, .subtab_case2 .s1 li.on a, .subtab_case2 .s1 li a.on {border-color: var(--color-main);color: var(--color-main);}
.subtab_case1 .s1 li:hover a:hover,.subtab_case1 .s1 li a:hover, .subtab_case2 .s1 li a:hover {color:var(--color-main);border-bottom-color:var(--color-main);}


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

.subtab_case2 .s2 {
    
    border-bottom: 2px solid var(--color-point4);
}
.subtab_case2 .s2 li a: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;
    text-align: center;
    border-bottom: 0;
    font-size: var(--font-size3);
    overflow: hidden;
}
.subtab_case2 .s2 li a {
    width: 100%;
    display: table;
    height: 100%;
    padding: .5em;
}
.subtab_case2 .s2 li a:focus,
.subtab_case2 .s2 li a.on:focus{border:3px solid #ccc;}
.subtab_case2 .s2 li a.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);display: flex;flex-wrap: wrap;}
.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: 2em 0 2em;}
    .subtab_case1 .s1{
    display: flex;
    flex-wrap: wrap;
}
    .subtab_case1 .s1 li{
    width: 48%;
    font-size: 1.1em;
    margin-bottom: 0;
    letter-spacing: -.5px;
}
    .subtab_case1 .s1 li:nth-child(2n){margin-right:0;}
    .subtab_case1 .s1 li:after {height: 2em;}
    .subtab_case2 .s2 li {
    width: 50%;
}
	.subtab_case2 .c1 li {border-radius: 0;}
	.subtab_case2 .c1 li:nth-child(1), .subtab_case2 .c1 li:nth-child(3){border-right:0;}
	.subtab_case2 .c1 li.on {
}
	.subtab_case2 .s1 li {
    width: 32%;
}
	.subtab_case2 .s1 li:after {display:none;}
	.subtab_case2 .s1 li:nth-child(1)::after, .subtab_case2 .s1 li:nth-child(2)::after, .subtab_case2 .s1 li:nth-child(3)::after {display:unset;top: -63%;}
	.subtab_case2 .tabs:after {
    width: 67%;
    left: 16%;
    }
	.subtab_case2 .s1 li:nth-child(2)::after, .subtab_case2 .s1 li:nth-child(3)::after {left: 53%;}
    display: unset;
    top: -60%;
}
}

/* 서브타이틀 색상값 */
.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{}
.space .space_name li:hover a {color:var(--color-point4);}
.space .space_name li a.on{}
.space .space_name li a.on:after{content:""; width:10px; height:10px;background-color: var(--color-point4); position:absolute;left: -10%; top:0;border-radius: 100%;}
.space .space_name li a.on {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";}
.step_s1 li:nth-child(6)::before {content:"STEP. 06";}
.step_s1 li:nth-child(7)::before {content:"STEP. 07";}

/** 사업안내 아이콘 **/
.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;}
.vision > ul > li > div,.values > ul > li > div {
    position: absolute;
}

.vision > ul {}
.vision > ul > li{}
.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);}
.subtab_case2 .s1 li:last-child{margin-right:0;}
.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 {}
	.vision > ul > li{}
	.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: #fff;
    background-color: var(--color-point2);
    width: 30px;
    height: 30px;
    border-radius: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: .5em;
}
.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);}
.biz_info .bank {
    display: flex;
    flex-wrap: wrap;
    margin-top: 1em;
}
.biz_info .bank li {
    width: 33%;
    text-align: left;
    display: flex;
    align-items: center;
}
.biz_info .bank li img {padding-right:0.8em;}
@media screen and (max-width: 1000px) {
	.target ul li {}
	.target ul li p {width: 89%;}
	div.num {
}	
	.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;}

	.subtab_case2 .s1 li:last-child{margin-right:1%;}
}