@charset "UTF-8";

/********************************
 도아소개 > 01회사소개
 *******************************/
.introBox {position:relative; margin-bottom:5.0rem; padding:9.0rem 9.0rem 5.0rem 0;}
.introBox::before {content:''; display:inline-block; position:absolute; left:6.0rem; bottom:0; width:0.8rem; height:10.0rem; background-color:#25a14e; z-index:3;}
.introBox::after {content:''; display:block; clear:both;}
.introBox .introImg {position:relative; height:50.0rem; background:#fff url(../../images/info/img_intro.png) center center no-repeat; box-shadow:0.8rem 1.0rem 4.0rem 0 rgba(0,0,0,0.14); z-index:2;}
.introBox .introBg {display:inline-block; position:absolute; right:0; top:0; width:50.0rem; height:50.0rem; background:linear-gradient(to bottom, #21c15a, #1cae8b, #039dd6); transition:all 0.2s linear; z-index:1;}
.introBox .introBgin {position:relative; display:block; height:inherit;}
.introBox .introBgin .txt {display:inline-block; position:absolute; right:-1.8rem; bottom:9.0rem; font-family:'EXO','NSK',sans-serif; color:rgba(255,255,255,0.5); transform:rotate(90deg);}

.introCon {text-align:center;}
.introCon .introCopy {font-size:4.8rem; font-weight:300; color:#191919; line-height:1.3;}
.introCon .introCopy .accent {font-weight:700; color:#25ba0d;}
.introCon .introTxtbox {padding:4.5rem 0;}
.introCon .introTxtbox > p {margin:1.5rem 0; font-size:1.8rem;}
.introCon .introSign {text-align:center;}
.introCon .introSign strong {display:inline-block; margin:0 0.8rem; color:#333; font-size:2.0rem;}

	/*media query*/
@media screen and (max-width:1340px) {
	.introCon .introCopy {font-size:3.8rem;}
	.introBox .introImg {height:40.0rem;}
	.introBox .introBg {width:40.0rem; height:40.0rem;}
	.introCon .introTxtbox {padding:3.0rem 0;}
	.introCon .introTxtbox > p {font-size:1.6rem;}
}
@media screen and (max-width:1200px) {
	.introBox {margin-bottom:4.0rem; padding:5.0rem 5.0rem 5.0rem 0;}
	.introBox .introBg {width:30.0rem; height:30.0rem;}
	.introBox .introBgin .txt {display:none;}
}
@media screen and (max-width:1024px) {
}
@media screen and (max-width:767px) {
	.introBox {margin-bottom:2.0rem; padding:3.0rem 3.0rem 3.0rem 0;}
	.introBox::before {left:4.0rem; width:0.4rem; height:6.0rem;}
	.introBox .introImg {height:32.0rem;}
	.introBox .introBg {width:20.0rem; height:20.0rem;}
	
	.introCon .introCopy {font-size:3.0rem;}
	.introCon .introTxtbox {padding:2.0rem 0;}
	.introCon .introTxtbox > p {margin:1.0rem 0; /*font-size:1.5rem;*/}
	
	.introCon .introSign strong {font-size:1.8rem;}
	/*
	.introBox {margin-bottom:4.0rem; padding:1.0rem 0 4.0rem 0;}
	.introBox .introBg {width:100%; height:2.0rem; background:linear-gradient(to left, #21c15a, #1cae8b, #039dd6);}
	*/
}
@media screen and (max-width:640px) {
	.introBox {margin-bottom:2.0rem;}
	.introBox::before {left:2.0rem;}
	.introBox .introImg {height:26.0rem;}
	
	.introCon {text-align:left;}
	.introCon .introCopy {font-size:2.6rem;}
	.introCon .introTxtbox {padding:1.0rem 0;}
	
	.introCon .introSign {text-align:right;}
	.introCon .introSign strong {margin:0;}
	.introCon .introSign strong:nth-child(2) {margin-left:1.0rem;}
}
@media screen and (max-width:480px) {
}
@media screen and (max-width:360px) {
	.introCon .introSign {text-align:center;}
}


/********************************
 도아소개 > 02연혁 
 *******************************/
.hisTop {margin-bottom:7.0rem; text-align:center;}
.hisTop .hisCopy {font-size:4.8rem; font-weight:300; color:#191919; line-height:1.3;}
.hisTop .hisCopy .accent {font-weight:700; color:#25ba0d;}

.hisCon {position:relative; padding:2.0rem 0;}
.hisCon::after {content:''; display:block; clear:both;}
.hisCon .hisInner {position:relative;}
.hisCon .hisInner .hisList {position:relative; padding-top:3.0rem;}
.hisCon .hisInner .hisList:before {content:''; display:block; position:absolute; left:50%; top:0; width:2.2rem; height:calc(100%); background:linear-gradient(to bottom, #21c15a 0%, #1cae8b 30%, #039dd6 100%); border-radius:2.0rem; transform:translateX(-50%);}
.hisCon .hisInner .hisList::after {content:''; display:block; clear:both;}
.hisCon .hisInner .hisList .hisSet {width:50%; padding-bottom:6.0rem;}
.hisCon .hisInner .hisList .hisSet:last-child {padding-bottom:0;}
.hisCon .hisInner .hisList .hisSet.hisL {float:left; margin-right:50%; padding-right:7.5rem; text-align:right;}
.hisCon .hisInner .hisList .hisSet.hisR {float:right; margin-left:50%; padding-left:7.5rem;}
.hisCon .hisInner .hisList .hisSet .tit {position:relative; margin-bottom:2.0rem; font-size:5.0rem; font-weight:700; line-height:1.3; letter-spacing:-0.1rem; color:#191919; transition:font-size 0.2s linear;}
.hisCon .hisInner .hisList .hisSet .tit::before {content:''; display:block; position:absolute; top:50%; width:1.8rem; height:1.8rem; border-width:0.2rem; border-style:solid; border-color:rgba(0,0,0,0.2); border-radius:50%; transform:translateY(-50%);}
.hisCon .hisInner .hisList .hisSet .tit::after {content:''; display:block; position:absolute; top:50%; width:1.8rem; height:1.8rem; background-color:#fff; border-radius:50%; transform:translateY(-50%);}
.hisCon .hisInner .hisList .hisSet.hisL .tit::before {right:-8.6rem;}
.hisCon .hisInner .hisList .hisSet.hisL .tit::after {right:-8.4rem;}
.hisCon .hisInner .hisList .hisSet.hisR .tit::before {left:-8.6rem;}
.hisCon .hisInner .hisList .hisSet.hisR .tit::after {left:-8.4rem;}

/*.hisCon .hisInner .hisList .hisSet:first-child .tit::before {border-color:#21c15a;}
.hisCon .hisInner .hisList .hisSet:last-child .tit::before {border-color:#039dd6;}
.hisCon .hisInner .hisList .hisSet:last-child {background-color:#fff;}*/
.hisCon .hisInner .hisList .hisDetail {}
.hisCon .hisInner .hisList .hisDetail > li {position:relative; margin:0.8rem 0;}
.hisCon .hisInner .hisList .hisDetail > li .year {position:absolute; top:0; width:8.0rem; font-weight:500; color:#191919;}
.hisCon .hisInner .hisList .hisDetail > li .txt {width:100%;}

.hisCon .hisInner .hisList .hisSet.hisL .hisDetail > li .year {right:0;}
.hisCon .hisInner .hisList .hisSet.hisL .hisDetail > li .txt {padding-right:12.0rem;}
.hisCon .hisInner .hisList .hisSet.hisR .hisDetail > li .year {left:0;}
.hisCon .hisInner .hisList .hisSet.hisR .hisDetail > li .txt {padding-left:12.0rem;}

	/*media query*/
@media screen and (max-width:1340px) {
	.hisTop {margin-bottom:5.0rem;}
	.hisTop .hisCopy {font-size:3.8rem;}
	
	.hisCon .hisInner .hisList .hisSet {padding-bottom:5.0rem;}
	.hisCon .hisInner .hisList .hisSet .tit {margin-bottom:2.0rem; font-size:4.2rem;}	
	.hisCon .hisInner .hisList .hisSet.hisL {padding-right:5.5rem;}
	.hisCon .hisInner .hisList .hisSet.hisR {padding-left:5.5rem;}
	.hisCon .hisInner .hisList .hisSet.hisL .tit::before {right:-6.6rem;}
	.hisCon .hisInner .hisList .hisSet.hisL .tit::after {right:-6.4rem;}
	.hisCon .hisInner .hisList .hisSet.hisR .tit::before {left:-6.6rem;}
	.hisCon .hisInner .hisList .hisSet.hisR .tit::after {left:-6.4rem;}	
	.hisCon .hisInner .hisList .hisDetail > li {position:relative; margin:0.6rem 0;}
	.hisCon .hisInner .hisList .hisSet.hisL .hisDetail > li .txt {padding-right:10.0rem;}
	.hisCon .hisInner .hisList .hisSet.hisR .hisDetail > li .txt {padding-left:10.0rem;}
}
@media screen and (max-width:1200px) {
}
@media screen and (max-width:1024px) {
}
@media screen and (max-width:767px) {
	.hisTop {margin-bottom:3.0rem;}
	.hisTop .hisCopy {font-size:3.0rem;}
	
	.hisCon .hisInner .hisList:before {left:0; width:1.8rem; transform:translateX(0);}
	.hisCon .hisInner .hisList .hisSet {padding-bottom:4.0rem;}
	.hisCon .hisInner .hisList .hisSet .tit {margin-bottom:1.6rem; font-size:3.8rem;}
	.hisCon .hisInner .hisList .hisSet {width:inherit; padding-bottom:4.0rem;}
	.hisCon .hisInner .hisList .hisSet.hisL {float:none; margin-right:auto; padding-left:4.0rem; padding-right:0; text-align:left;}
	.hisCon .hisInner .hisList .hisSet.hisR {float:none; margin-left:auto; padding-left:4.0rem;}	
	.hisCon .hisInner .hisList .hisSet .tit::before {width:1.4rem; height:1.4rem;}
	.hisCon .hisInner .hisList .hisSet .tit::after {width:1.4rem; height:1.4rem;}
	.hisCon .hisInner .hisList .hisSet.hisL .tit::before {left:-4.0rem;}
	.hisCon .hisInner .hisList .hisSet.hisL .tit::after {left:-3.8rem;}
	.hisCon .hisInner .hisList .hisSet.hisR .tit::before {left:-4.0rem;}
	.hisCon .hisInner .hisList .hisSet.hisR .tit::after {left:-3.8rem;}
	
	.hisCon .hisInner .hisList .hisSet.hisL .hisDetail > li .year {left:0; right:auto;}
	.hisCon .hisInner .hisList .hisSet.hisL .hisDetail > li .txt {padding-left:10.0rem; padding-right:0;}
}
@media screen and (max-width:640px) {
	.hisTop {margin-bottom:1.0rem; text-align:left;}
	.hisTop .hisCopy {font-size:2.6rem;}
	
	.hisCon .hisInner .hisList .hisSet {padding-bottom:3.0rem;}
	.hisCon .hisInner .hisList .hisSet .tit {margin-bottom:0.4rem; font-size:2.8rem;}
	.hisCon .hisInner .hisList .hisSet.hisL .hisDetail > li .txt,
	.hisCon .hisInner .hisList .hisSet.hisR .hisDetail > li .txt {padding-left:8.0rem;}
}
@media screen and (max-width:480px) {
}
@media screen and (max-width:360px) {
}




/********************************
 도아소개 > 03조직구성
 *******************************/
.organBox {text-align:center;}
.organBox .imgSet {transition:opacity 0.2s linear;}
.organBox .imgSet.pc {display:block; opacity:1;}
.organBox .imgSet.mobile {display:none; opacity:0;}


	/*media query*/
@media screen and (max-width:1340px) {
}
@media screen and (max-width:1200px) {
}
@media screen and (max-width:1024px) {
}
@media screen and (max-width:767px) {
.organBox .imgSet.pc {display:none; opacity:0;}
.organBox .imgSet.mobile {display:block; opacity:1;}
}
@media screen and (max-width:640px) {
}
@media screen and (max-width:480px) {
}
@media screen and (max-width:360px) {
}


/********************************
 도아소개 > 04오시는 길
 *******************************/
.mapBox {margin-bottom:7.0rem; padding-top:6.0rem; background:url(../../images/img_line_dot01.svg) 0 0 repeat-x;}
.mapBox:first-child {padding-top:0; background:none;}
.mapBox:last-child {margin-bottom:0;}
.mapBox::after {content:''; display:block; clear:both;}
.mapBox > h3 {margin-bottom:3.0rem; color:#191919; font-weight:700; font-size:4.2rem; line-height:1.3; text-align:center;}
.mapBox > h3 > span {color:#25ba0d;}
.mapBox .mapInner {}
.mapBox .mapInner .mapArea {position:relative; height:58.0rem; background-color:#f9f9f9; transition:height 0.2s linear; z-index:2;}
.mapBox .mapInner .mapArea .root_daum_roughmap {width:100%; height:100%;}
.mapBox .mapInner .mapArea .wrap_map {height:100%;}
.mapBox .mapInner .mapArea .wrap_map .map_border.border2 {display:block !important;}
/* 구글지도
.mapBox .mapInner .mapArea > iframe {width:100%; height:100%;}
.mapBox .mapInner .mapArea > iframe .gmnoprint,
.mapBox .mapInner .mapArea > iframe .gm-inset-map {display:none !important;}*/
.mapBox .mapInner .mapInfobox {position:relative; margin-top:-8.0rem; padding:0 8%; z-index:5;}
.mapBox .mapInner .mapInfobox .mapinfoInner {position:relative; display:flex; justify-content:center; flex-direction:column; margin:0 auto; padding:4.0rem 30.0rem 4.0rem 4.0rem; min-height:16.0rem; max-width:108.0rem; background-color:#fff; box-shadow:0.8rem 1.0rem 4.0rem 0 rgba(0,0,0,0.14); border-radius:1.0rem;}
.mapBox .mapInner .mapInfobox .mapinfoInner .mapInfo {}
.mapBox .mapInner .mapInfobox .mapinfoInner .mapInfo > li {position:relative; padding-left:7.5rem;}
.mapBox .mapInner .mapInfobox .mapinfoInner .mapInfo > li .tit {position:absolute; left:0; top:0; color:#191919; font-weight:700;}
.mapBox .mapInner .mapInfobox .mapinfoInner .mapInfo > li .tit > span {display:block; position:relative; padding-left:1.5rem;}
.mapBox .mapInner .mapInfobox .mapinfoInner .mapInfo > li .tit > span::before {content:''; position:absolute; left:0; top:1.0rem; width:0.5rem; height:0.5rem; background-color:#25ba0d;}
.mapBox .mapInner .mapInfobox .mapinfoInner .mapLink {position:absolute; right:4.0rem; top:50%; width:25.0rem; transform:translateY(-50%);}
.mapBox .mapInner .mapInfobox .mapinfoInner .mapLink > a {position:relative; display:flex; align-items:center; padding:0 2.0rem 0 5.0rem; width:100%; min-height:6.0rem; color:#fff; background-color:#25ba0d; text-decoration:none; border-radius:0.5rem;}
.mapBox .mapInner .mapInfobox .mapinfoInner .mapLink > a::before {content:''; display:block; position:absolute; left:1.4rem; top:50%; width:2.2rem; height:2.4rem; background:url(../../images/icon_naver.svg) center 0 no-repeat; transform:translateY(-50%);}
.mapBox .mapInner .mapInfobox .mapinfoInner .mapLink > a > span {position:relative; display:block; padding-right:5.0rem; width:100%;}
.mapBox .mapInner .mapInfobox .mapinfoInner .mapLink > a > span::after {content:''; display:block; position:absolute; right:2.0rem; top:50%; width:2.2rem; height:1.0rem; background:url(../../images/img_more_arrow.svg) right bottom no-repeat; transform:translateY(-50%);}

.mapBox .mapInner .mapInfobox .mapinfoInner .mapLink > a:hover > span::after,
.mapBox .mapInner .mapInfobox .mapinfoInner .mapLink > a:focus > span::after {right:0; width:4.2rem; transition:right 0.2s linear, width 0.2s linear;}

	/*media query*/
@media screen and (max-width:1340px) {
	.mapBox {margin-left:2.0rem; margin-right:2.0rem;}
	.mapBox > h3 {font-size:3.8rem;}
	.mapBox .mapInner .mapArea {height:50.0rem;}
	
	.mapBox .mapInner .mapInfobox {padding:0 4%;}
}
@media screen and (max-width:1200px) {
}
@media screen and (max-width:1024px) {
	.mapBox {margin-bottom:5.0rem; padding-top:4.0rem;}
	.mapBox .mapInner .mapArea {height:46.0rem;}
	.mapBox .mapInner .mapInfobox {margin-top:-4.0rem;}
	.mapBox .mapInner .mapInfobox .mapinfoInner {padding:3.0rem;}
	.mapBox .mapInner .mapInfobox .mapinfoInner .mapInfo {margin-bottom:2.0rem;}
	.mapBox .mapInner .mapInfobox .mapinfoInner .mapLink {position:static; right:auto; top:auto; width:100%; transform:translateY(0);}
	.mapBox .mapInner .mapInfobox .mapinfoInner .mapLink > a {min-height:5.0rem;}
}
@media screen and (max-width:767px) {
	.mapBox {margin-left:0; margin-right:0;}
	.mapBox > h3 {margin-bottom:2.0rem; font-size:3.0rem;}
	.mapBox .mapInner .mapArea {height:42.0rem;}
	.mapBox .mapInner .mapInfobox {padding:0 1.0rem;}
	.mapBox .mapInner .mapInfobox .mapinfoInner {padding:2.0rem;}
	.mapBox .mapInner .mapInfobox .mapinfoInner .mapInfo > li .tit > span::before {top:0.9rem;}
}
@media screen and (max-width:640px) {
	.mapBox > h3 {font-size:2.6rem;}
	
	.mapBox .mapInner .mapInfobox .mapinfoInner .mapInfo > li {padding-left:6.0rem;}
}
@media screen and (max-width:480px) {
}
@media screen and (max-width:360px) {
}