 @charset "utf-8"; /* doc.css는 디자인페이지 스타일을 정의합니다. */
 .doc-tit { position:relative; width: fit-content; margin: 0 auto var(--margin-50); font-weight:700; font-size: var(--font-size-40); letter-spacing: -0.02em; color: #242424; text-align:center; } 
.doc-tit::after { content: ""; position: absolute; top: -4px; right: -4px; width: 8px; height: 8px; background-color: rgba(237, 28, 36, 0.8); } 

.txt-blue { color: var(--color-primary); } 

.mr5 { margin-right:5px !important; } 
.ml10 { margin-left:10px; } 

.ico img { width:100%; height:100%; object-fit: contain; } 

.pb0 {padding-bottom:0;}

/* greeting */
.greeting { display:flex; } 
.greeting > .img { width: 40%; padding-right:80px; } 
.greeting .txt-area p { margin-bottom:10px; } 
.greeting .txt-area p:last-child { margin-bottom:0; } 
.greeting .txt-area p.sub-strong { font-size: var(--font-size-35); line-height: 1.2em; font-weight: 600; color: #242424; margin-bottom:30px; } 
.greeting .sign { display:flex; align-items: center; padding-top:var(--padding-30); } 
.greeting .sign .name { line-height: 1.625em; } 
.greeting .sign .name strong { display:inline-block; padding-left:10px; font-size: var(--font-size-17); line-height:1.529em; color: #242424; font-weight:500; } 
 
/* process */
.process .process-list { display:flex; flex-wrap: wrap; margin:-15px; } 
.process .process-list li { width:50%; padding:15px; } 
.process .process-list li .box { display:block; min-height:225px; background:#f8f8f8; padding:50px 0 0 50px; position: relative; border-top:1px solid #132b88; } 
.process .process-list li .box .tit { font-size:var(--font-size-25); font-weight:700; color:#242424; letter-spacing:-.03em; line-height:1.2em; margin-bottom:12px; } 
.process .process-list li .box .txt { line-height:1.875em; } 
.process .process-list li .box .ico { position: absolute; bottom: 40px; right: 40px; } 

/* directions */
.root_daum_roughmap { width:100% !important; height:480px !important; } 
.root_daum_roughmap .wrap_map { height:480px !important; } 
.roughmap_lebel_text { line-height:0 !important; font-size:0 !important; } 

.roughmap_lebel_text:after { content:"서울특별시 강남구 테헤란로 231"; font-size:12px; line-height:15px; } 


.root_daum_roughmap .map_border { display: none; } 
.directions { display:flex; align-items: center; } 
.directions .map { width:65%; } 
.directions .info-wrap { width:35%; padding-left:var(--padding-60); } 
.directions .address-info { margin-bottom:20px; } 
.directions .address-info .comp { font-weight: 700; margin-bottom: 10px; font-size: var(--font-size-22); color: #132b88; line-height: 1.272em; } 
.directions .address-info .addr { color: #454545; font-size: var(--font-size-18); font-weight: 500; line-height: 1.555em; letter-spacing:-.03em; margin-bottom: 20px; } 
.directions .address-info .addr span { color: #808080; } 
.directions .contact-info { margin:-10px 0; padding-bottom:var(--padding-80); } 
.directions .contact-info dl { display:flex; padding: 10px 0; } 
.directions .contact-info dt { position:relative; width: 80px; padding-left: 13px; color:#242424; font-size: 1em; font-weight:500; line-height: 1.75em; } 
 .directions .contact-info dt::before { content: ""; position: absolute; top:10px; left:0; width:6px; height:6px; background-color: #ddd; border-radius: 100%; } 
.directions .contact-info dd { flex:1 1 auto; min-width:0; width:1%; color:#454545; letter-spacing: -0.02em; } 
.directions .contact-info dd p { display:inline-block; line-height:2.125em; } 
.directions .contact-info .line { display: inline-flex; justify-content: center; align-items: center; width:45px; height:20px; margin-right:10px; color: #fff; font-size: var(--font-size-14); line-height:2em; letter-spacing: -0.02em; border-radius: 50vh; padding:0 7px; font-weight:300; } 
.directions .contact-info .line.orange { background-color: #ff7d21; } 
.directions .contact-info .line.red { background-color: #de4552; } 
.directions .contact-info .line.green { background-color: #47af1b; } 

/* .philosophy h2 { position:relative; margin-bottom:var(--padding-50); font-size: var(--font-size-34); font-weight:600; color: #242424; line-height:1.47em; } 
.philosophy h2 strong { font-weight:700; } 
.philosophy h2::after { content: ""; position: absolute; top:0; right:0; width:555px; height:240px; background: url(/images/sub/philosophy.jpg) no-repeat center/contain; border-top-right-radius: var(--border-radius-50-30); border-bottom-left-radius: var(--border-radius-50-30); } 

.bg-sky { background-color: rgba(19,43,136,0.05); } 

.philosophy .txt-list {padding:var(--padding-30) 0 var(--padding-100);}
.philosophy .txt-list li { display:flex; align-items: center; border-bottom: 1px solid #ddd; width:100%; max-width: 1080px; padding:var(--padding-15) 0; } 

.philosophy .txt-list li:nth-child(2) { margin-left:var(--padding-30); } 
.philosophy .txt-list li:nth-child(3) { margin-left:var(--padding-60); } 
.philosophy .txt-list li:nth-child(4) { margin-left:var(--padding-90); } 
.philosophy .txt-list li:nth-child(5) { margin-left:var(--padding-120); } 

.philosophy .txt-list li .tit { width: 44.4444%; margin-bottom: -8px; font-weight:600; font-size: var(--font-size-22); line-height:1.909em; color: #505050; letter-spacing: -0.02em;     vertical-align: bottom;} 
.philosophy .txt-list li .tit strong {display:inline-block; margin-right:5px; font-family: 'GmarketSansBold'; font-size: var(--font-size-42); line-height:1em; color: #016ab5; } 
.philosophy .txt-list li:nth-child(2) .tit strong { color: #0059a8; } 
.philosophy .txt-list li:nth-child(3) .tit strong { color: #004a9e; } 
.philosophy .txt-list li:nth-child(4) .tit strong { color: #003c94; } 
.philosophy .txt-list li:nth-child(5) .tit strong { color: #132b88; } 
.philosophy .txt-list li .desc { flex: 1 1 auto; width:1%; min-width: 0; font-size: var(--font-size-18); line-height:1em; }  */

.philosophy h3 {text-align: center; color: #242424; font-size: 34px; font-weight: 700; line-height: 1.66; letter-spacing: -0.04em; margin-bottom: var(--padding-50);}
.philosophy h3 span {color: #016ab5;}
.philosophy .img {width: 100%; height: 464px;}
.philosophy .img img {width: 100%; height: 100%; object-fit: cover;}
.philosophy .txt-wrap {max-width: 1100px; width: 100%; margin: 0 auto; margin-top: -64px;}
.philosophy .txt-wrap .item {display: flex; align-items: center; justify-content: center; gap: 0 var(--padding-60); margin-top: calc(var(--padding-40) * -1);}
.philosophy .txt-wrap .circle {width: 300px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; font-size: 30px; font-weight: 600; line-height: 1.46; letter-spacing: -0.04em; border-radius: 50%; backdrop-filter: blur(15px);}
.philosophy .txt-wrap .item1 .circle {background: rgba(0, 141, 242, 0.6);}
.philosophy .txt-wrap .item2 .circle {background: rgba(52, 201, 227, 0.7);}
.philosophy .txt-wrap .item p {font-size: 18px; line-height: 1.66; letter-spacing: -0.04em; flex: 1;}
.philosophy .txt-wrap .item1 p {margin-top: auto; margin-bottom: var(--padding-50);}
.philosophy .txt-wrap .item2 p {margin-bottom: auto; margin-top: var(--padding-50);}