@charset "utf-8";
/* 공통 */
.subtit { font-size: 24px; font-weight: 500; letter-spacing: -.04em; line-height: 1.2em; color: #2c2c2c; font-family: 'GmarketSans'; position: relative; padding-left: 15px;}
.subtit::before { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 24px; background: #2c2c2c;}

/* 인사말 */
.greet { display: flex;}
.greet-right { padding-left: 145px; color: #454545;}
.greet-right h3 { font-size: 30px; font-weight: 300; letter-spacing: -.04em; line-height: 1.2em; }
.greet-right h3 span { font-weight: 500;}
.greet-right p { font-size: 16px; font-weight: 400; letter-spacing: -.04em; line-height: 1.8em; margin-top: 35px;}
.greet-right b { font-size: 16px; font-weight: 400; letter-spacing: -.04em; line-height: 1.2em; margin-top: 30px; display: block; text-align: right; padding-right: 50px;}
.greet-right>span { font-size: 16px; font-weight: 600; line-height: 1.2em; letter-spacing: -.04em; display: block; margin-top: 10px; text-align: right; padding-right: 50px;}

/* 설립목적 및 연혁 */
.hst-sec1box { padding: 90px 0; text-align: center; font-size: 18px; font-weight: 400; line-height: 1.8em; letter-spacing: -.04em; color: #454545; width: 100%; background: #f5f5f5 url(../images/sub/hst_logo.png) center no-repeat;}
.hst-box { position: relative; padding-left: 350px;}
.hst-box::after { content: ""; position: absolute; left: 518px; top: 15px; height: 97%; width: 1px; border-right: 1px solid #dddddd;z-index: -1;}
.group { display: flex; margin-bottom: 60px;}
.group:last-child { margin-bottom: 0;}
.group .year { font-size: 42px; font-weight: 700; letter-spacing: -.03em; line-height: 1.2em; color: #027c6f; position: relative; display: inline-block; padding-right: 60px; font-family: 'GmarketSans'; width: 175px;}
.group .year::after { content: ""; position: absolute; right: 0; top:12px; width: 12px; height: 12px; border: 3px solid #027c6f; border-radius: 100%; background: #fff;}
.group-list { padding-left: 45px; padding-top: 5px;}
.group-list li { position: relative; margin-bottom: 22px;}
.group-list li:last-child { margin-bottom: 0;}
.group-list li .month { position: absolute; left: 0; top: 4px; font-size: 20px; font-weight: 700; line-height: 1.2em; letter-spacing: -.04em; color: #2c2c2c; font-family: 'GmarketSans';}
.group-list li .group-txtbox { padding-left: 130px; }
.group-list li .txt { font-size: 16px; font-weight: 400; letter-spacing: -.04em; line-height: 1.8em; color: #454545; padding-top: 1px; position: relative;padding-left: 16px; margin-bottom: 10px;}
.group-list li .txt:last-child { margin-bottom: 0;}
.group-list li .txt::before { content: ""; position: absolute; width: 4px; height: 4px; border-radius: 100%; background: #027c6f;left: 0; top: 12px;}
.year2::before { position: absolute; left: 0; top: -10px; content: '2020’s'; font-size: 66px; font-weight: 700; letter-spacing: -.04em; line-height: 1.2em; color: #eee; font-family: 'GmarketSans'; left: -350px;}
.year3::before { position: absolute; left: 0; top: -5px; content: '2010’s'; font-size: 60px; font-weight: 700; letter-spacing: -.04em; line-height: 1.2em; color: #eee; font-family: 'GmarketSans'; left: -350px;}

/* 조직도 */
.organ-img { text-align: center; display: flex; align-items: center; justify-content: center;}
.organ-tbl-wrap { width: 100%; }
.organ-tbl { width: 100%; border-collapse: collapse; border-top: 1px solid #888; text-align: center;}
.organ-tbl tr { border-bottom: 1px solid #ddd;}
.organ-tbl tr th { font-size: 16px; font-weight: 500; letter-spacing: -.04em; line-height: 1.2em; padding: 20px 10px; border-right: 1px solid #ddd; color: #2c2c2c; background: #f5f5f5;}
.organ-tbl tr th:last-child { border-right: none;}
.organ-tbl tr td { font-size: 16px; font-weight: 400; letter-spacing: -.04em; line-height: 1.2em; padding: 20px 10px; border-right: 1px solid #ddd; color: #454545;}
.organ-tbl tr td:last-child { border-right: none;}

/* 오시는길 */
.mapbox { border-bottom: 1px solid #ddd; margin-bottom: 30px;}
.lctbox { margin-bottom: 75px;}
.lctbox:last-child { margin-bottom: 0;}
.lct-list { margin-top: 45px;}
.lct-list li { position: relative; margin-bottom: 40px;}
.lct-list li:last-child { margin-bottom: 0;}
.lct-icon { display: flex; position: absolute; left: 0; gap: 16px; align-items: center;}
.lct-icon strong { display: inline-block; font-size: 18px; font-weight: 500; letter-spacing: -.03em; line-height: 1.2em; color: #2c2c2c;}
.lct-list li .txt { font-size: 16px; font-weight: 400; letter-spacing: -.03em; line-height: 1.4em; color: #454545; padding-left: 150px; }
.lct-list li .txt2 { padding-left: 185px; display: flex;  gap: 17px; align-items: center;}
.lct-list li .circle { width: 60px; height: 30px; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 15px; color: #fff; font-size: 14px; font-weight: 500; letter-spacing: -.03em; line-height: 1em;}
.lct-bus { position: relative; padding-bottom: 27px; border-bottom: 1px solid #ddd; width: 100%; margin-bottom: 27px;}
.lct-bus2 { border-bottom: none; margin-bottom: 0; padding-bottom: 0;}
.lct-bus>p { position: absolute; left: 0; top: 2px;}
.lct-bus-txt { display: flex; gap: 17px; align-items: center; padding-left: 280px; margin-bottom: 22px;}
.lct-bus-txt:last-child {margin-bottom: 0;}
.lct-list li .circle.clr1 { background: #ff7d21;}
.lct-list li .circle.clr2 { background: #8ac366;}
.lct-list li .circle.clr3 { background: #358eec;}
.lct-list li .circle.clr4 { background: #1db590;}
.lct-list li .circle.clr5 { background: #56a3f3;}
.lct-list li .circle.clr6 { background: #dd5e63;}

/* sub2 */
.sub2-tab { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 60px;}
.sub2-tab li { width: calc(100%/4 - 9px); border: 1px solid #ddd; height: 60px; color: #2c2c2c;  text-align: center;}
.sub2-tab li a { line-height: 1.2em; letter-spacing: -.04em; font-size: 17px; font-weight: 400; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
.sub2-tab li.active { background: #0aaf87; border: 1px solid #0aaf87; color: #fff;}
.sub2-tbl-wrap { width: 100%; margin-top: 30px;}
.sub2-tbl { width: 100%; border-collapse: collapse; border-top: 1px solid #888888;}
.sub2-tbl tr { border-bottom: 1px solid #ddd;}
.sub2-tbl tr td { text-align: left; font-size: 16px; font-weight: 400; letter-spacing: -.04em; padding: 15px 10px; padding-left: 30px; color: #454545; line-height: 1.8em;}
.sub2-tbl tr td:first-child { border-right: 1px solid #ddd;}
.sub2-tbl tr td.fw { background: #f5f5f5; text-align: center; padding: 20px 10px; color: #2c2c2c; font-weight: 500; line-height: 1.2em;}
.sub2-7 { margin-top: 30px; padding: 20px; border-top: 1px solid #888888; border-bottom: 1px solid #dddddd; font-size: 16px; font-weight: 400; letter-spacing: -.04em; line-height: 1.3em; letter-spacing: -.04em; color: #454545;}
.sub2-7 p { margin-bottom: 11px;}
.sub2-7 p:last-child { margin-bottom: 0;}

/* 관련단체 */
.op-list { display: flex; flex-wrap: wrap; gap: 0 28px;} 
.op-list li { width: calc(100%/4 - 21px); background: #fff; position: relative; text-align: center; font-size: 16px; font-weight: 500; letter-spacing: -.04em; line-height: 1.2em; color: #2c2c2c; margin-bottom: 55px;}
.op-list li a { position: relative; display: block; width: 100%;}
.op-list li .thumb {position:relative; padding-bottom:34%; overflow: hidden; margin-bottom: 20px;}
.op-list li .thumb img {position:absolute; top:50%; left:50%; transition:.4s ease-in-out; transform:translate(-50%, -50%); -ms-transform:translateY(-50%); -webkit-transform:translate(-50%, -50%);  object-fit:contain;}
.op-list li .thumb::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border: 1px solid #ddd; }