@charset "utf-8";
/* 공통 */
.sub-pd { padding: 120px 0;}
.sub-pd.pb { padding-bottom: 120px; padding-top: 0; }
.sub-pd.gray { background: #f9f9f9; }
.sub-pd.pt { padding-top: 120px; padding-bottom: 0; }
.subtit { font-size: 32px; font-weight: 700; line-height: 1.2em; letter-spacing: -.03em; position: relative; color: #242424; margin-bottom: 35px; padding-left: 40px; }
.subtit::before { content: ""; position: absolute; left: 0; top: 4px; width: 30px; height: 30px; background: url(../images/sub/tit-bf.png) center no-repeat; background-size: contain; }

/* 회사소개 */
.gt { display: flex; margin-top: 40px; }
.gt .left { width: 32%; }
.gt .left h4 { width: 140px; height: 32px; background: #0f5aa9; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; font-weight: 700; line-height: 1em; letter-spacing: -.03em; margin-bottom: 16px; }
.gt .left h2 { font-size: 32px; line-height: 1.3em; color: #242424; font-weight: 700; letter-spacing: -.03em; }
.gt .left h2 span { color: #0f5aa9; }
.gt .right { width: 68%; }
.gt .right h5 { font-size: 20px; line-height: 1.5em; font-weight: 700; color: #454545; letter-spacing: -.03em; margin-bottom: 33px; }
.gt .right p { font-size: 18px; line-height: 1.6em; letter-spacing: -.03em; margin-bottom: 8px; font-weight: 300; }
.gt .right h5:last-child { margin-bottom: 0; margin-top: 50px; }
.organ { text-align: center; }

/* 연혁 */
.hst { position: relative; }
.hst::before { content: ""; position: absolute; left: 50%; top: 12px; width: 1px; height: 97%; border: 1px dashed #ededed; transform: translateX(-50%); }
.hst .group { width: 50%; padding-right: 55px; margin-bottom: 70px; text-align: right; position: relative; }
.hst .group::after { content: ""; position: absolute; right: -13px; top: 7px; width: 26px; height: 26px; background: url(../images/sub/hst-bf.png) center no-repeat; background-size: contain; }
.hst .group .year { font-size: 40px; line-height: 1em; color: #0f5aa9; font-weight: 700; letter-spacing: -.03em; margin-bottom: 25px; }
.hst .group .txt p { position: relative; font-size: 18px; line-height: 1.666em; font-weight: 300; letter-spacing: -.02em; padding-right: 10px; margin-bottom: 3px;}
.hst .group .txt p:last-child { margin-bottom: 0; }
.hst .group .txt p::before { content: ""; position: absolute; right: 0; top: 13px; width: 3px; height: 3px; background: #454545; border-radius: 50%; }
.hst .group:nth-of-type(2n) {text-align: left; width: 100%; margin-left: 50%; padding-right: 0; padding-left: 55px; }
.hst .group:nth-of-type(2n)::after { right:auto; left: -13px; }
.hst .group:nth-of-type(2n) .txt p { padding-right: 0; padding-left: 10px; }
.hst .group:nth-of-type(2n) .txt p::before { left: 0; right: auto; }

/* 찾아오시는 길 */
.dr-tab { display: flex; justify-content: center; margin-bottom: 40px; gap: 20px; flex-wrap: wrap;}
.dr-tab li { width: auto;cursor: pointer;}
.dr-tab a { display: flex; align-items: center; justify-content: center; width: 120px; height: 40px; background: #f6f6f6; font-size: 16px; line-height: 1em; color: #454545; font-weight: 600; letter-spacing: -.03em;  pointer-events: none; }
.dr-tab li.active a { background: #0f5aa9; color: #fff; }
.root_daum_roughmap {width:100% !important;}
.directions {margin-top:40px;}
.directions .address-info {margin-bottom:30px;}
.directions .address-info .comp {color:#0f5aa9; 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:#0f5aa9;}
.directions .contact-info dd {flex:1 1 auto; min-width:0; width:1%; color:#454545;}
.map-b { position: relative; height: 850px;}
.map-ab { overflow: hidden;}
.dr-box { opacity: 0; position: absolute; left: 0; top: 0; width: 100%;}
.dr-box.active { opacity: 1;}
.dr-box iframe { width: 100%; }
.pt-fx { display: flex; gap: 10px; justify-content: center;}
.pt-wrap { width: 370px; overflow: hidden; border: 1px solid #ddd; border-radius: 8px; }