@charset "utf-8";
/* *******************************************************
 * filename : content.css
 * description : 서브페이지 컨텐츠 CSS
 * date : 2022-03-14
******************************************************** */

/* ******************  01. 회사소개 ********************** */
/* ***** 인사말 ***** */
.greeting-con {display: flex;}
.greeting-con .left-con {width: 42.85%;}
.greeting-con .left-con .img {position: relative; width: 100%;}
.greeting-con .left-con .img:before {position: absolute; width: 100%; height: 100%; content: ''; top: 2rem; left: 2rem; z-index: -1; border: 1px solid var(--main-color); -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.greeting-con .left-con img {max-width: 100%;}
.greeting-con .right-con {width: 57.15%; padding-left: 14rem; box-sizing: border-box;}
.greeting-con .right-con .tit-box {padding-top: 6.5rem;}
.greeting-con .right-con .tit-box strong {display: block; font-size: 2rem; font-weight: 500; letter-spacing: -0.025em; color: #aaaaaa; line-height: 1.3; margin-bottom: 3rem;}
.greeting-con .right-con .tit-box .tit {font-size: 6rem; font-weight: 500; letter-spacing: -0.025em; color: #111111; line-height: 1.5;}
.greeting-con .right-con .txt-box {padding-top: 8rem;}
.greeting-con .right-con .txt-box .txt01 {font-size: 2.5rem; font-weight: 600; letter-spacing: -0.05em; color: #000; line-height: 1.6; padding-bottom: 1.5rem;}
.greeting-con .right-con .txt-box .txt01 span {color: var(--main-color);}
.greeting-con .right-con .txt-box .txt02 {font-size: 1.8rem; font-weight: 400; letter-spacing: -0.05em; color: #555555; line-height: 1.66; padding-top: 3rem;}

@media all and (max-width:1280px){
	.greeting-con .right-con {padding-left: 8rem;}
}
@media all and (max-width:800px){
	.greeting-con {display: block;}
	.greeting-con .left-con {width: 50%;}
	.greeting-con .right-con {width: 100%; padding-left: 0;}
	.greeting-con .right-con .tit-box .tit {font-size: 4rem;}
	.greeting-con .right-con .txt-box {padding-top: 5rem;}
	.greeting-con .right-con .txt-box .txt01 {font-size: 2.1rem;}
}
@media all and (max-width:480px){
	.greeting-con .left-con {width: 100%;}
}

/* ***** 경영이념 ***** */
.vision-con {position: relative; width: 100%; height: 0; padding-top: 41.66%; background: url(/images/content/vision_img.jpg)no-repeat center/cover;}
.vision-con .inner {position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; align-items: center; justify-content: center; text-align: center;}
.vision-txt-box {text-align: center;}
.vision-txt-box .sub-tit {display: inline-block; font-size: 2rem;font-weight: 500; letter-spacing: -0.025em; color: var(--main-color); padding-bottom: 0.5rem; border-bottom: 2px solid var(--main-color); margin-bottom: 5.8rem;}
.vision-txt-box .txt01 {font-size: 4rem; font-weight: 600; letter-spacing: -0.05em; color: #fff; line-height: 1.375;}
.vision-txt-box .txt02 {font-size: 1.8rem; font-weight: 400; letter-spacing: -0.05em; color: rgba(255,255,255,0.5); line-height: 1.66; padding-top: 2.3rem;} 

.mission-con {padding: 15rem 0;}
.mission-con .vision-txt-box {margin-bottom: 11rem;}
.mission-con .vision-txt-box .txt01 {color: #000000;}
.mission-con .vision-txt-box .txt02 {color: #666666;}
.mission-list {display: flex; align-items: center; justify-content: center;}
.mission-list li {position: relative; width: 32rem;}
.mission-list li.item02 {margin-left: 6.9rem;}
.mission-list li.item03 {width: 33rem; margin-left: 6.3rem;}
.mission-list li .inner-wrap {position: relative; width: 100%; height: 0; padding-top: 100%;}
.mission-list li .inner {position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius:50%; display: flex; flex-direction:column; align-items: center; justify-content: center; text-align: center; border:2px solid var(--main-color); background: #fff; box-sizing: border-box;}
.mission-list li .inner .icon {display: inline-block; height: 10rem; line-height: 10rem; margin-bottom: 1.5rem;}
.mission-list li .inner .icon img {max-height: 100%;}
.mission-list li .inner dl dt {font-size: 2.4rem; font-weight: 600; letter-spacing: -0.05em; color: #000; line-height: 1.3;}
.mission-list li .inner dl dd {font-size: 1.4rem; font-weight: 400; letter-spacing: -0.025em; color: #aaaaaa; line-height: 1.2; padding-top: 0.5rem;}
.mission-list li.item03 .inner {background: var(--main-color);}
.mission-list li.item03 .inner dl dt  {color: #fff;}
.mission-list li.item03 .inner dl dd {color: rgba(255,255,255,0.5);}
.mission-list li:not(.item03):before {position: absolute; content: ''; right: -7rem; top: 50%; margin-top: -1px; width: 7rem; height: 1px; border-bottom: 1px dashed var(--main-color); z-index: -1;}
.mission-list li:not(.item03):after {display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; margin-top: -2rem; right: -5.45rem; font-family: xeicon; width: 4rem; height: 4rem; border: 1px dashed var(--main-color); background: #fff; border-radius: 50%; z-index: 1; box-sizing: border-box; font-size: 2.4rem; color: var(--main-color);}
.mission-list li.item01:after {content: '\e914';} 
.mission-list li.item02:after {content: '\e907';} 
.mission-list li.item03:before {position: absolute; content: ''; width: calc(100% + 5.6rem); height: calc(100% + 5.6rem); top: -2.8rem; left: -2.8rem; border: 1px solid rgba(165,146,102,0.2); border-radius: 50%; z-index: -1;}

.value-con-wrap {padding: 10rem 0 15rem;}
.value-con {position: relative; width: 100%; height: 80rem;}
.value-bg-img-con {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.value-bg-img-con .bg-item {position: absolute;top: 0; left: 0;width: 100%; height: 100%;}
.value-bg-img-con .bg-item .bg {position: relative;width: 100%;height: 100%; opacity: 0; visibility: hidden; transition: all 0.3s;background-size: cover !important;}
.value-list-con {position: relative; display: table; width: 100%; height: 100%;  table-layout: fixed; z-index: 3;}
.value-list-con .item {display: table-cell;  position: relative; width: 25%; height: 100%;vertical-align: top; box-sizing: border-box; transition: all 0.3s; }
.value-list-con .item:before {position: absolute; content: ''; top: 0; left: 0; width: 1px; height: 100%;background-color: rgba(255, 255, 255, 0.2);}
.value-list-con .item .inner-wrap {padding-bottom: 10rem; display:flex; align-items:flex-end;  width: 100%; height:100%; box-sizing: border-box;}
.value-list-con .item .inner {padding: 0 6rem; transition: var(--transition-custom);}
.value-list-con .item .inner .icon {height: 10rem; margin-bottom: 3.5rem; opacity: 0;}
.value-list-con .item .inner .icon img {max-height: 100%;}
.value-list-con .item .inner dl dt {font-size: 2.8rem; font-weight: 600; letter-spacing: -0.05em; color: #fff; line-height: 1.3; margin-bottom: 1.5rem;}
.value-list-con .item .inner dl dd {font-size: 1.8rem; font-weight: 400; letter-spacing: -0.05em; color: rgba(255,255,255,0.5); line-height: 1.66;}
.value-bg-img-con .bg-item.active .bg {visibility:visible;opacity:1.0;}
.value-list-con .item.active {background: rgba(0,0,0,0.3); backdrop-filter:blur(2rem);}
.value-list-con .item.active .inner {transform: translateY(-4rem);}
.value-list-con .item.active .inner .icon {opacity: 1;}

@media all and (max-width:1280px){
	.mission-list {margin: 0 -3rem;}
	.mission-list li {width: calc(33.33% - 6rem) !important; margin: 0 3rem !important;}
	.mission-list li:not(.item03):after {right: -5rem;}

	.value-list-con .item .inner-wrap {padding-bottom: 7rem;}
	.value-list-con .item .inner {padding: 0 3rem;}
}
@media all and (max-width:800px){
	.vision-con {padding: 4rem 0; min-height: 30rem; height: auto;}
	.vision-txt-box .sub-tit {font-size: 1.8rem; margin-bottom: 3.5rem;}
	.vision-txt-box .txt01 {font-size: 3rem;}

	.mission-con {padding: 10rem 0;}
	.mission-list-con {width: 100%; max-width: 32rem; margin: 0 auto;}
	.mission-list {flex-wrap: wrap; margin: -3rem 0;}
	.mission-list li {width: 100% !important; margin: 3rem 0 !important;}
	.mission-list li .inner .icon {height: 8rem; line-height: 8rem;}
	.mission-list li .inner dl dt {font-size: 2.2rem;}
	.mission-list li:not(.item03):before {right: auto; top: auto; bottom: -7rem; left: 50%; margin-left: -1px; height: 7rem; width: 1px; border-bottom: 0; border-left: 1px dashed var(--main-color);;}
	.mission-list li:not(.item03):after {right: auto; top: auto; bottom: -5rem; left: 50%; margin-left: -2rem;}
	.mission-list li.item02:after {content: '\e905';}
	
	.value-con {height: 100rem;}
	.value-list-con {display: flex; flex-direction:column; }
	.value-list-con .item {width: 100%; height: 25%; display: block;}
	.value-list-con .item .inner-wrap {padding-bottom: 2rem;}
	.value-list-con .item .inner {padding: 0 2rem;}
	.value-list-con .item .inner .icon {height: 5rem; margin-bottom: 2rem;}
	.value-list-con .item .inner dl dt {font-size: 2.2rem;}
	.value-list-con .item .inner dl dd {font-size: 1.6rem;}
	.value-list-con .item.active .inner {transform: translateY(0);}
}
@media all and (max-width:480px){
	.value-con {height: 92rem;}
}


/* ***** 오시는 길 ***** */
.location-con .map-con-wrap {position: relative; height: 60rem; z-index: 1;}
.location-con .map-con {position: absolute;  top: 50%;  left: 50%;width: 100%; height: 100%;  transform: translate(-50%, -50%); }
.map-con-wrap .map-con .root_daum_roughmap, 
.map-con-wrap .map-con .wrap_map {width: 100% !important; height: 100% !important;}
.map-con-wrap .map-con .root_daum_roughmap .cont {display: none;}
.map-con-wrap .location-btn {position: absolute;bottom: -5rem;  right: 8rem;z-index: 2;display: flex;flex-direction: column; align-items: center; justify-content: center; width: 10rem; height: 10rem;  border-radius: 50%;  background-color: var(--main-color); color: #fff; transition: var(--transition-custom);}
.map-con-wrap .location-btn i {font-size: 3rem;}
.map-con-wrap .location-btn span {font-size: 1.6rem; font-weight: 700; line-height: 1.5; letter-spacing: -0.05em;}
.location-info-con {display: flex;  padding: 7.5rem 0;}
.location-info-con .tit-box {width: 21.43%;}
.location-info-con .tit-box .tit {display: block; font-size: 3.5rem; font-weight: 600; letter-spacing: -0.05em; color: #000; line-height: 1.3;}
.location-info-con .info-tbl {width: 78.57%;}
.location-info-con .info-tbl li {display: flex; margin-top: 1.5rem;}
.location-info-con .info-tbl li:first-child {margin-top: 0;}
.location-info-con .info-tbl li span {display: inline-block; width: 9.5rem; font-size: 1.8rem; font-weight: 500; letter-spacing: -0.02em; color: #000; line-height: 1.3;}
.location-info-con .info-tbl li .txt {width: calc(100% - 9.5rem); font-size: 1.8rem; font-weight: 400; letter-spacing: -0.05em; color: #555;  line-height: 1.3;}

@media all and (max-width:800px){
	.location-info-con {display: block; padding: 5rem 0;}
	.location-info-con .tit-box {width: 100%; margin-bottom: 2rem;}
	.location-info-con .tit-box .tit {font-size: 2.8rem;}
	.location-info-con .info-tbl {width: 100%;}
	.map-con-wrap .location-btn { width: 7rem; height: 7rem;bottom: -3.5rem; right: 3rem;}
	.map-con-wrap .location-btn i {font-size: 2rem;}
	.map-con-wrap .location-btn span {font-size: 1.4rem;}
}