@charset "utf-8"; /* doc.css는 디자인페이지 스타일을 정의합니다. */
.root_daum_roughmap {width:100% !important; height:450px !important;} 
.root_daum_roughmap .wrap_map {height:450px !important;} 
.roughmap_lebel_text {line-height:0 !important; font-size:0 !important;} 
.roughmap_lebel_text:after {content:"서울시 성동구 아차산로17길 49"; font-size:12px; line-height:15px;} 

.doc-cnt {margin-bottom:var(--margin-150-70);} 
.doc-cnt:last-child {margin-bottom:0;} 
.doc-cnt.bg-grey {background-color: #f4f4f4;} 

.doc-sub-cnt {padding:var(--padding-100-60);} 
.doc-sub-cnt:last-child {padding-bottom:0;} 
.doc-sub-cnt.bg-grey {background-color: #f9f9f9;} 

.doc-tit {margin-bottom:var(--margin-30-10); font-weight:800; font-size: var(--font-size-32-20); color: #222;} 

.doc-sub-tit {margin-bottom:var(--margin-20-10); color:#222; font-size:var(--font-size-22-18); line-height:1.363em; letter-spacing:-.03em;} 

.pt0 {padding-top:0 !important;} 

.pb0 {padding-bottom:0 !important;} 
.pb100 {padding-bottom:var(--padding-100-60) !important;} 

.txt-blue {color: var(--color-primary) !important;} 
.txt-grey {color: #888888 !important;} 
.txt-wht {color: #ffff !important;} 
.txt-orange {color: var(--color-primary) !important;} 
.txt-navy {color: var(--color-secondary) !important;} 

.bg-grey {background-color: #f9f9f9;} 
.bg-grey2 {background-color: #f6f6f6;} 

.flex-wrap {display:flex;} 

.mt0 {margin-top:0 !important;} 
.mt20 {margin-top:var(--margin-20-10) !important;} 

.mb0 {margin-bottom:0 !important;} 
.mb20 {margin-bottom:var(--margin-20-10);} 
.mb40 {margin-bottom:var(--margin-40-20) !important;} 
.mb150 {margin-bottom:var(--margin-150-70);} 

.roboto-bold {font-family: "Roboto", sans-serif; font-weight: 700; font-style: normal;} 

.uppercase {text-transform: uppercase !important;} 

.line {width:100%; height:1px; margin:var(--margin-80-40) 0; background-color: #ddd;} 

.h40 {height:var(--height-40-20);} 
.h80 {height:var(--height-80-40 );} 

.one-page-nav {margin:var(--margin-120-50) 0 var(--margin-40-20);} 
.one-page-nav ul {display:flex; margin:0 -18px;} 
.one-page-nav ul li {position:relative; padding:0 18px;} 
.one-page-nav ul li::after {content: "·"; position: absolute; top:50%; right: -3px; transform: translateY(-50%); font-weight:900; font-size: var(--font-size-28-24); color: #ddd; line-height:1em;} 
.one-page-nav ul li:last-child::after {display:none;} 
.one-page-nav ul li a {font-weight:700; font-size: var(--font-size-20-16); line-height:1.5em; color: #888888;} 
.one-page-nav ul li.active a {color: var(--color-primary);} 

.doc-txt {font-size: var(--font-size-18-15); line-height:1.666em;} 

.gray-box-wrap {display:flex; flex-wrap:wrap; justify-content:space-between;} 

.gray-box {width: 100%; padding: var(--padding-50-16) var(--padding-35-15); background: #f6f6f6; border-radius: var(--border-radius-20-10);} 
.gray-box.type2 {padding:var(--padding-50-16) var(--padding-80-20) var(--padding-15-10);} 
.gray-box.type3 {padding:var(--padding-30-16) ;} 
.flex-wrap.display .gray-box.type3  {height:420px; display:flex; justify-content: center; align-items: center;}
.gray-box.w50 {width:calc(50% - 15px);} 
.gray-box.w33 {width:calc(33.33333333% - 20px); padding: var(--padding-40-20) var(--padding-35-15);} 
.gray-box h5 {padding-bottom:var(--padding-20-10); margin-bottom:var(--margin-20-10); color:#222; font-size:var(--font-size-20-18); line-height:1.666em; letter-spacing:-.03em; border-bottom: 1px solid #ddd;} 
.gray-box h6 {margin-bottom: var(--margin-30-10);} 
.gray-box h4 {margin-bottom:var(--margin-20-10); font-size: var(--font-size-22-18); color: #222;} 
.gray-box .en {font-weight:600; font-size: var(--font-size-18-16); line-height:1.666em; color: var(--color-primary);} 

.dot-list > li {position:relative; padding-left:16px; font-size: var(--font-size-18-15); line-height:1.6666em;} 
.dot-list > li:before {content:"·"; position:absolute; top:0; left:0; font-size:var(--font-size-28-24); font-weight:900; line-height: 1em; color: var(--color-primary);} 
.gray-box .dot-list > li {margin-bottom:var(--margin-20-10); font-size: var(--font-size-17-15); line-height:1.411em;} 
.gray-box .dot-list > li:last-child {margin-bottom:0;} 
.gray-box .dot-list > li:before {top: -5px;} 
 
.dot-list.sky > li:before {color: #6dc7f8;} 

.flex-wrap {display:flex;} 
.flex-wrap.w50 ul {width:50%;} 
.flex-wrap.w50 {margin:0 -12px;} 
.flex-wrap.w50 .wrap {width:50%; padding:0 12px;} 
.flex-wrap.center {justify-content: center;} 
.flex-wrap.ai-center {align-items: center;}

.img-list ul {display:flex; flex-wrap: wrap; margin:-8px;} 
.img-list.w50 ul li {width:50%; padding:8px;} 
.img-list ul li .img {text-align:center;}
.img-list ul li img {border-radius: var(--border-radius-20-10);} 
.img-list.type2 ul {position:relative;} 
.img-list.type2 ul::after {content: ""; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:63px; height:46px; background: url(/images/sub/arrow.png) no-repeat center/contain;} 
.img-list.type3 ul {margin:0 -12px;} 
.img-list.type3 ul li {width:50%; padding:0 12px;} 
.img-list.w-auto ul {margin:0 -12px;} 
.img-list.w-auto ul li {padding:0 12px;} 
.img-list.w-auto ul li:nth-child(1) {width:46%}
.img-list.w-auto ul li:nth-child(2) {width:54%}
.img-list .box {display:flex; flex-direction:column; justify-content:space-between; height:100%; background:#f6f6f6; border-radius: var(--border-radius-20-10); overflow:hidden; text-align:center;}
.img-list .box .tit {background:#065381; padding:var(--padding-20-10); font-size:var(--font-size-18-16); font-weight:600; line-height:1.3em; color:#fff;}
.img-list .box .tit.st1 {background:#ddd; color:var(--color-dark);}
.img-list .box .tit.st2 {background:#6dc7f9;}
.img-list .box .cnt {flex:1 1 auto; min-height:0; height:1%; padding:18px;}
.img-list .box .cnt img {border-radius:0;}
.img-list .box .cnt.center {display:flex; flex-direction:column; justify-content:center; align-items: center; padding:40px 18px;}

.dl-list dl {display:flex;} 
.dl-list dl dt {position:relative; width:auto; margin-right:15px; padding-left:15px; font-weight:600; font-size: var(--font-size-17-15); line-height: 1.6em;} 
.dl-list dl dt::before {content: "·"; position: absolute; top: -3px; left:0; font-weight:900; font-size: var(--font-size-28-24); line-height:1em; color: var(--color-primary);} 
.dl-list dl dd {flex: 1 1 auto; width:1%; min-width: 0;} 

.tag-list li {margin-bottom:var(--margin-20-10);} 
.tag-list li:last-child {margin-bottom:0;} 
.tag-list .tit {width:fit-content; margin-bottom:10px; padding:0 var(--padding-20-10); font-weight:700; color: #fff; font-size: var(--font-size-17-15); line-height:34px; text-align:center; background-color: var(--color-primary); border-radius: 50vh;} 
.tag-list .desc {font-size: var(--font-size-17-15); line-height:1.294em;} 

.map-list li {margin-bottom:var(--margin-30-10);} 
.map-list li:last-child {margin-bottom:0;} 
.map-list .tit {font-weight:700; font-size: var(--font-size-18-16); color: #222; margin-bottom:10px;} 
.map-list .desc {font-size: var(--font-size-17-15); line-height: 1.529em;} 

/* PlanX */
.gray-box .icon-list >ul {margin:-15px 0; padding:0 30px;} 
.gray-box .icon-list> ul >li {display:flex; align-items: center; padding:15px 0;} 
.gray-box .icon-list ul li .ico-wrap {width:150px; height:130px; margin-right:var(--margin-30-10); display:flex; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--border-radius-20-10); background-color: #fff;} 
.gray-box .icon-list ul li .ico-wrap .ico {margin-bottom: 5px;} 
.gray-box .icon-list .ico-wrap p {font-weight:600; font-size: var(--font-size-17-15); color: #222;} 
.gray-box .icon-list ul li .dot-list {flex: 1 1 auto; width:1%; min-width: 0;} 

.num-tit {margin-bottom:var(--margin-10-5); font-weight:600; font-size: var(--font-size-20-18); line-height:1.5em;} 
.num-tit .num {display:inline-block; margin-right:10px; font-weight:900; color: var(--color-primary);} 
/* .num-tit */

.box-list {padding-top:var(--padding-40-20);} 
.box-list>ul {display:flex; margin:0 -12px;} 
.box-list>ul>li {width:33.3333%; padding:0 12px;}
.box-list .box {height:100%; background:#f6f6f6; border-radius: var(--border-radius-20-10); overflow:hidden;}
.box-list .tit {background-color:#065280; color:#fff; text-align:center; font-weight:600; font-size: var(--font-size-18-16); line-height:1em; padding:var(--padding-20-10);} 
.box-list .cnt {padding: var(--padding-30-16) var(--padding-40-20);}
.box-list.col4 >ul {flex-wrap: wrap; margin:-11px -12px;} 
.box-list.col4 >ul>li {width:50%; padding:11px 12px;} 

.directions {margin-top:40px;} 
.directions .address-info {margin-bottom:30px;} 
.directions .address-info .comp {color:#f89b1c; font-weight:600; margin-bottom:2px;} 
.directions .address-info .addr {color:#242424; font-size:23px; font-weight:600; line-height:1.33em; letter-spacing:-.03em; margin-bottom:5px;} 
.directions .address-info .etc {color:#454545;} 
.directions .address-info .etc span {display:inline-block; margin-right:16px;} 
.directions .address-info .etc span:last-child {margin-right:0;} 
.directions .contact-info {border-top:1px solid #ddd; line-height:1.5em;} 
.directions .contact-info dl {display:flex; padding:28px 0; border-bottom:1px solid #ddd;} 
.directions .contact-info dt {width:180px; padding-left:30px; color:#242424; font-size:1.125em; font-weight:500;} 
.directions .contact-info dt svg {vertical-align:middle; margin:-.2em 15px 0 0;} 
.directions .contact-info dt path {fill:#f89b1c;} 
.directions .contact-info dd {flex:1 1 auto; min-width:0; width:1%; color:#454545;} 

/* greeting */
.greeting {display:flex;} 
.greeting > div {width:50%;} 
.greeting > .img {position:relative; padding-right:var(--padding-100-16);} 
.greeting > .img::before {content: ""; position: absolute; top:50%; left: -60%; transform: translateY(-50%); width:860px; height:400px; background-color: #f2f7ff; z-index:-1;} 
.greeting .txt-area p {font-size: var(--body-font-size); line-height:1.5em; margin-bottom:var(--margin-20-10);} 
.greeting .txt-area p.t2 {margin-bottom:var(--margin-40-20); color: #222222; font-weight:700; font-size: var(--font-size-34-20); line-height:1.294em;} 
.greeting .txt-area p.t2 strong {font-weight:800;} 
.greeting .txt-area p.sub-strong {font-weight:700; font-size: var(--font-size-18-16); line-height:1em; margin-bottom:var(--margin-20-10);} 
.greeting .sign {display:flex; align-items: center; padding-top:var(--padding-40);} 
.greeting .sign .name {font-size: var(--font-size-18-16); margin-right: var(--margin-35-15); line-height: 1.333em; letter-spacing: -0.04em; color: #222222;} 

/* .history */
.section.history-wrap .doc-tit,
.section.org .doc-tit {margin-bottom:var(--margin-60-30);} 
.history .top { display:flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 300px; margin: 0 auto; background: url(../images/sub/history.jpg) no-repeat center / contain; } 
.history .top p {text-align: center; color: #fff;} 
.history .top p.t1 {margin-bottom:var(--margin-20-10); font-weight:700; font-size: var(--font-size-40-20); line-height:1.225em;} 
.history .top p.t2 {font-weight:500; font-size: var(--font-size-18-16); line-height:1.666em;} 
.history .tab-contents {border: none;} 
.history .con2 {position:relative; padding-top: 60px;} 
.history .con2::before {content: ""; position: absolute; top: -17px; left: 50%; width: 34px; height: 34px; background: url(../images/sub/history-dot1.png) no-repeat 100% / contain; margin-left: -17px; z-index: 10;} 
.history .con2:after {content: ''; position: absolute; top: 0; left: 50%; width: 1px; height: 90%; background-color: #ddd;} 
.history .con2 .row {position:relative; display:flex; padding-bottom:40px; flex-direction:row-reverse;} 
.history .con2 .row:last-child {padding-bottom: 0;} 
.history .con2 .row .col {position:relative; width:50%; padding-left:80px;} 
.history .con2 .row .col::before {content: ''; position: absolute; top: 15px; left: 15px; width: 57px; height: 1px; background-color: #ddd;} 
.history .con2 .row .col .year {position: relative; color: #222222; font-size: 32px; font-weight: 700; margin-bottom: 15px; letter-spacing: 0;} 
.history .con2 .row .col .year:before {content:''; position: absolute; left: -90px; top:5px;  width:22px; height:22px; background: url(../images/sub/history-dot2.png) no-repeat center/contain; z-index:1;} 
.history .con2 .row .col .info .wrap {display:flex;} 
.history .con2 .row .col .info .wrap ul {min-width:0; width:1%; flex:1 1 auto;} 
.history .con2 .row .col .info .wrap ul li {padding-left: 16px; position: relative;} 
.history .con2 .row .col .info .wrap ul li::before {content: '·'; position: absolute; top: -2px; left: 0; color: #ababab; font-size: var(--font-size-24-20); font-weight:700;} 
.history .con2 .row:nth-child(even) {text-align:right; flex-direction: row;} 
.history .con2 .row:nth-child(even) .col {padding-left:0; padding-right:80px;} 
.history .con2 .row:nth-child(even)  .col::before {left:auto;     right: 13px;}
.history .con2 .row:nth-child(even) .col .year:before {left:auto;right: -91px;} 
.history .con2 .row:nth-child(even) .col .info .wrap {flex-direction:row-reverse;} 
.history .con2 .row:nth-child(even) .col .info .wrap li {padding-right: 15px; padding-left: 0;} 
.history .con2 .row:nth-child(even) .col .info .wrap li:before {left:auto; right:0;} 
.history .img.logo1 {margin-top:5px;}

.sec-inner2 {padding:var(--padding-120-60) 0;} 

.benefit-list {display: flex; flex-wrap: wrap; margin: -12px;} 
.benefit-list li {display:flex; padding: var(--padding-40-20) var(--padding-50-20); width: calc(33.3333% - 24px); margin: 12px; background-color: #f6f6f6; border-radius: var(--border-radius-20-10);} 
.benefit-list li .ico {margin-right: var(--margin-20-10);} 
.benefit-list li .txt-box {flex: 1 1 auto; width:1%; min-width: 0;} 
.benefit-list li .txt-box .tit {margin-bottom:5px; font-size: var(--font-size-22-18); font-weight: 700; color: #222222; letter-spacing:0; line-height:1.818em;} 
.benefit-list li .txt-box .txt {line-height: 1.5em; letter-spacing:0;}