@charset "UTF-8";

/*-------------------------------------------------

title       : Sub 메뉴 01
Author      : EASESOFT
Create date : 2024-04

-------------------------------------------------*/

/* CEO 인사말 */
.c010101 {display:flex; flex-direction:row; justify-content:space-between; align-items:flex-start;}
.c010101 .text {margin-right:3.0rem;}
.c010101 .text p {font-size:1.8rem; line-height:1.7; letter-spacing:-0.5px; word-break:keep-all;}
.c010101 .text p + p {margin-top:3.5rem;}
.c010101 .text p.top {font-size:3.1rem; font-weight:500; letter-spacing:-1px; line-height:1.4;}
.c010101 .image {flex:none; position:relative; width:34%; padding-top:7.0rem; text-align:right;}
.c010101 .image::before {content:""; display:block; position:absolute; right:0; top:0; z-index:-1; width:90%; height:80%; background:#F4F7F9;}
.c010101 .image p { margin-top:3.6rem; font-size:2.0rem; font-weight:400;}
.c010101 .image p .name {}

/* 비전/경영목표 */
.c010200 .grid_box {display:flex; flex-direction:row; justify-content: flex-start; align-items:flex-start;}
.c010200 .grid_box + .grid_box {margin-top:3rem;}
.c010200 .grid_box .tit {flex:none; width:15rem;  font-size:2.4rem; font-weight:700; color:#002361; line-height:1.2;}
.c010200 .grid_box .tit.center { align-self:center;}
.c010200 .grid_box .tit > strong {display:flex; flex-direction:row; align-items:center; height:6rem;}
.c010200 .grid_box .tit > em {display:none;}
.c010200 .grid_box .tit > em + strong {margin-top: 1.5rem;}
.c010200 .summary {flex:1; padding:3.0rem; background:#002361; font-size:2.0rem; font-weight:600; text-align:center; color:#fff; line-height:1.4; word-break:keep-all; border-radius:0.4rem;}
.c010200 .summary span {display:block; color:#9CDBFF;}

.c010200 .vision {flex:1; text-align:center;}
.c010200 .vision strong {display:block; position:relative; z-index:1; width:12.0rem; margin:0 auto -1.6rem; padding:0.5rem 0; background:var(--main-color-light); color:#fff; border-radius:1000px;}
.c010200 .vision p {padding:4.0rem 3.0rem 3.4rem; background:#D6E5FF; font-size:2.8rem; font-weight:700; line-height:1.4; color:var(--main-color-light); word-break:keep-all; border-radius:5px;}
.c010200 .innovate {flex:1;}
.c010200 .innovate .inner {display:flex; flex-direction:row; justify-content:center; align-items:stretch; gap:20px;}
.c010200 .innovate div {flex:1; display:flex; flex-direction:column;}
.c010200 .innovate .title {display:flex; flex-direction:row; justify-content:center; align-items:center; height:6.0rem; margin-bottom:1.5rem; background:#3241AB; font-size:2.0rem; font-weight:700; color:#fff; border-radius:0.5rem;}
.c010200 .innovate div:nth-child(2) .title {background:#0092E5;}
.c010200 .innovate div:nth-child(3) .title {background:var(--point-color);}
.c010200 .innovate ul.box {flex:1; padding:3.0rem; padding-right:2.0rem;}
.c010200 .innovate ul.box li {display:flex; flex-direction:row; justify-content:flex-start; align-items:flex-start; line-height:1.4;}
.c010200 .innovate ul.box li + li {margin-top:1.5rem;}
.c010200 .innovate ul.box .number {flex:none; display:flex; flex-direction:row; justify-content:center; align-items:center; width:2.5rem; height:2.5rem; margin-right:1.0rem; background:#18191B; font-size:1.6rem; font-weight:500; color:#fff; border-radius:100%;}
.c010200 .innovate ul.box .text {font-size:1.8rem; font-weight:400; word-break:keep-all;}
.c010200 .service {flex:1;}
.c010200 .service .inner {display:flex; flex-direction:row; justify-content:center; align-items:stretch; gap:10px;}
.c010200 .service .s_box {flex:1; padding:3.0rem; border:1px solid #143F8A; border-radius:0.4rem;}
.c010200 .service .title {display:flex; flex-direction:column; justify-content:center; align-items:center; gap:1.5rem; max-width:200px; margin:0 auto 3.0rem; padding-bottom:2.5rem; border-bottom:1px solid #CBD3E2; text-align:center; line-height:1.2;}
.c010200 .service .title img {}
.c010200 .service li {position:relative; padding-left:1.3rem; font-size:1.6rem; font-weight:400; color:#555; line-height:1.4; word-break:keep-all;}
.c010200 .service li::before {content:""; position:absolute; left:0; top:1.1rem; width:0.5rem; height:0.1rem; background:#555;}
.c010200 .service li + li {margin-top:1.0rem;}


/* 연혁 */
.history {position:relative;}
.history .progress_bar {position:absolute; left:27rem; top:0; z-index:1; width:1px; height:0%; background:linear-gradient(to bottom, #000 calc(100% - 50px), rgba(0,0,0,0) 100%); transition:0.4s;}
.history .h_text {position:relative; padding:2rem 0 6rem 36rem; font-size:4.0rem; font-weight:900; letter-spacing:20px;}
.history .h_text::before {content:""; position:absolute; left:27.0rem; top:0; width:1px; z-index:0; height:100%; background:#E8E8E8;}
.history .h_text::after {content:""; position:absolute; left:26.5rem; top:4rem; z-index:5; width:11px; height:11px; background:#3241AB; border-radius:100%;}
.history .group {display:flex; flex-direction:row; justify-content:flex-start; align-items:center;}
.history .group {position:relative;}
.history .group::before {content:""; position:absolute; left:27.0rem; top:0; width:1px; height:100%; background:#E8E8E8; transition:0.4s;}
.history .group + .group {padding-top:6.0rem;}
.history .group .year {flex:none; align-self:flex-start; width:27.0rem; font-size:8.0rem; font-weight:700; color:#fff; line-height:1; -webkit-text-stroke:1px #151515;}
.history .group ul {display:flex; flex-direction:column; justify-content:center; align-items:flex-start;}
.history .group ul li {position:relative; display:flex; padding-left:9.0rem;}
.history .group ul li::before {content:""; position:absolute; left:-0.5rem; top:calc(50% - 5px); z-index:5; width:11px; height:11px; background:#E8E8E8; border-radius:100%;}
.history .group ul li+li {margin-top:1.5rem;}
.history .group ul li.highlight::before {background:#000;}
.history .group ul li strong {flex:none; width:15rem;}
.history .group ul li span {font-weight:400;}

.history_tab.fix {position:fixed; left:0; top:0; width:100%; border:none; z-index:10; background:#fff; box-shadow:0 3px 12px #00000029; }
.history_tab.fix #depth4_menu_ul {justify-content:center;}
.history_tab.fix #depth4_menu_ul li a {border-top:none;}


.charter {display:flex; gap:6rem; padding:8rem 7rem 13.5rem; overflow:hidden; position:relative; word-break:keep-all; z-index:1;}
.charter .tt {width:20rem; color:#151515; font-size:3.2rem; font-weight:800; position:relative; line-height:1.4;}
.charter .tt::after {content:''; display:block; background-color:#151515; width:5rem; height:1px; margin-top:5rem;}
.charter .desc {flex:1;}
.charter .desc .stt {color:#151515; display:block; font-size:2rem; font-weight:500; line-height:1.6;}
.charter .desc .con {margin:3.5rem 0;}
.charter .desc .con li {display:flex; color:#151515; font-size:1.8rem;}
.charter .desc .con li + li {margin-top:1.5rem;}
.charter .desc .con li strong {display:flex; font-weight:700; width:4.5rem; flex-shrink:0;}
.charter .desc .txt {color:#151515; display:block; font-size:1.8rem; line-height:1.6; margin-bottom:1.5rem;}
.charter .desc .name {color:#151515; display:block; font-size:1.8rem; font-weight:700;}

/* 고객서비스헌장 */
.c010401 .charter {background-color:#FFF9FC;}
.c010401 .charter::after {content:''; background:url('/eng/img/sub/sub01/010401-bg.svg') no-repeat center; width:54.2rem; height:16.7rem; position:absolute; left:4rem; bottom:0; z-index:-1;}

/* 윤리ㆍ청렴 실천서약서 */
.c010402 .charter {background-color:#F2F4FF;}
.c010402 .charter::after {content:''; background:url('/eng/img/sub/sub01/010402-bg.svg') no-repeat center; width:54.2rem; height:16.7rem; position:absolute; left:4rem; bottom:0; z-index:-1;}


/* 인권경영선언문 */
.c010403 .charter {background-color:#F6FFF2;}
.c010403 .charter::after {content:''; background:url('/eng/img/sub/sub01/010403-bg.svg') no-repeat center; width:54.2rem; height:16.7rem; position:absolute; left:4rem; bottom:0; z-index:-1;}

/* ESG 경영 선언 */
.c010404 .charter {background-color:#F2F4FF;}
.c010404 .charter::after {content:''; background:url('/eng/img/sub/sub01/010404-bg.svg') no-repeat center bottom; width:66rem; height:30rem; position:absolute; left:8.5rem; bottom:6rem; z-index:-1;}
.c010404 .charter .tt {color:#143F8A; }


/*-------------------------------------------------

Responsive

-------------------------------------------------*/

/* Media Query */
@media all and (max-width:1300px) {
	/* 비전/경영목표 */
	.c010200 .grid_box {flex-direction:column;align-items: stretch;}
	.c010200 .grid_box + .grid_box {margin-top:5rem;}
	.c010200 .grid_box .tit {width:inherit; margin-bottom:1rem;}
	.c010200 .grid_box .tit.center { align-self:flex-start;}
	.c010200 .grid_box .tit > strong {display:inline-block; height:inherit;}
	.c010200 .grid_box .tit > em {display:inline-block;}
	.c010200 .service .inner {flex-wrap:wrap;}
	.c010200 .service .s_box {flex:none; width:calc(50% - 5px); box-sizing:border-box;}
	.c010200 .service .title {max-width:100%;}

	/* 연혁 */
	.history .progress_bar {left:22rem;}
	.history .h_text {padding:2rem 0 6rem 27rem;}
	.history .h_text::before {left:22rem;}
	.history .h_text::after {left:21.5rem;}
	.history .group::before {left:22.0rem;}
	.history .group + .group {padding-top:5.0rem;}
	.history .group .year {width:22.0rem; font-size:7.0rem;}
	.history .group ul li {padding-left:4rem;}

}

@media all and (max-width:1024px) {
	/* 비전/경영목표 */
	.c010200 .vision strong {font-size:1.6rem;}
	.c010200 .vision p {padding:3.0rem 1.0rem 2rem; font-size:2.4rem;}
	.c010200 .vision p span {display:block;}
	.c010200 .innovate .inner {flex-direction:column; gap:10px;}
	.c010200 .innovate .title {margin-bottom:1rem;}
	.c010200 .service .inner {flex-direction:column;}
	.c010200 .service .s_box {flex:1; width:100%;}
	.c010200 .service .title {flex:none;}
	.c010200 .service .title strong{text-align: center;}

	/* 연혁 */
	.history .progress_bar {display:none;}
	.history::before {content:""; display:block; position:absolute; left:2.0rem; top:0; width:1px; height:100%; background:#1F1F1F;}
	.history .h_text {padding:0 0 6rem 2rem; background-color:#fff; font-size:3.2rem; letter-spacing:16px;}
	.history .h_text::before {display:none;}
	.history .h_text::after {display:none;}
	.history .h_text span {display:block;}
	.history .group {display:block; padding-left:2.0rem;}
	.history .group::before {display:none;}
	.history .group::after {content:""; position:absolute; left:1.5rem; top:0; width:11px; height:11px; background:#322DC8; border-radius:100%;}
	.history .group + .group {margin-top:5.0rem; padding-top:0;}
	.history .group .year {display:block; width:inherit; margin-bottom:4.0rem; padding-left:4.0rem;}
	.history .group ul {display:block;}
	.history .group ul li {flex-direction:column; padding-left:4.0rem;}
	.history .group ul li::before {left:-0.5rem; top:0.9rem; background:#1F1F1F;}
	.history .group ul li+li {margin-top:0.5rem;}
	.history .group ul li.highlight::before {background:#000;}
	.history .group ul li strong {flex:none; width:inherit;}
	.history_tab ul li a {border-left:none !important;}
	.history_tab.fix #depth4_menu_ul {display:block;}
	.history_tab.fix #depth4_menu_ul li a {border-top:none; border-left:none;}

		/* 헌장 */
	.charter {padding:4.5rem 3rem; flex-direction:column; gap:0;}
	.charter .tt {font-size:2.8rem; width:100%;}
	.charter .tt::after {margin-top:4rem;}
	.charter .desc {padding-left:0; padding-top:4rem; width:100%;}
	.charter .desc .stt {font-size:1.6rem;}
	.charter .desc .con li {font-size:1.6rem;}
	.charter .desc .con li strong {font-size:1.8rem;}
	.charter .desc .txt {font-size:1.6rem;}
	.charter .desc .name {font-size:1.6rem;}

}

@media all and (max-width:768px) {

	/* CEO 인사말 */
	.c010101 {flex-direction:column; justify-content:flex-start; align-items:center;}
	.c010101 .text {margin-right:0; font-size:1.8rem;}
	.c010101 .text p + p {margin-top:2.0rem;}
	.c010101 .text p.top {font-size:2.8rem; text-align:center;}
	.c010101 .image {order:-1; width:inherit; margin-bottom:3.0rem; padding-top:4.0rem;}
	.c010101 .image img {width:25rem;}
	.c010101 .image p {justify-content:center; margin-top:3.0rem; font-size:1.6rem;}


	/* ESG 경영 선언 */
	.c010404 .charter::after {width:calc(100% - 3rem); background-size:contain; bottom:1.5rem; left:1.5rem;}
}

@media all and (max-width:480px) {

	/* CEO 인사말 */
	.c010101 .text p {font-size:1.6rem;}
	.c010101 .text p.top {font-size:2.2rem;}
}