@charset "utf-8";
/* 공통 */
.subtab {display:flex; margin-bottom: 60px;}
.subtab li {flex:1; height:50px; border:1px solid #fafafa; border-right:0; border-bottom:1px solid #c7a577; border-top: 1px solid #ddd; position: relative;}
.subtab li::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; background: #ddd; width: 1px; height: 30px; }
.subtab li:first-child {border-left:1px solid #ddd;}
.subtab li:last-child {border-right:1px solid #ddd;}
.subtab li:last-child::after { display: none;}
.subtab li a {display:flex; align-items:center; justify-content:center; height:100%; color:#898989; font-size:18px; font-weight:600; line-height:1.3em; text-align: center;}
.subtab li.active {border:1px solid #c7a577; border-bottom:1px solid #fff; background:#fff;}
.subtab li.active::after { display: none;}
.subtab li.active a { color: #c7a577; }
.subtit { font-size: 28px; line-height: 1em; font-weight: 700; letter-spacing: -.03em; position: relative; color: #242424; margin-bottom: 35px; padding-left: 33px;}
.subtit::before { content: ""; position: absolute; left: 0; width: 24px; height: 24px; background: url(../images/sub/tit-bf.png) center no-repeat; background-size: contain;}

/* 회사개요 */
.ot-sec1 { padding-bottom: 130px; }
.ot-img { height: 400px; border-radius: 60px 0 60px 0; background: url(../images/sub/sub1-1.jpg) center no-repeat; background-size: cover;}
.ot-textbox { padding: 55px 40px; background: #fff; border-radius: 0 60px 0 0; max-width: 900px; width: 100%; margin-top: -100px;}
.ot-textbox h2 { font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1.22em; color: #242424; margin-bottom: 26px;}
.ot-textbox h2 span { color: #c7a577; font-weight: 800; }
.ot-textbox p { font-weight: 400; letter-spacing: -.03em; line-height: 1.666em; color: #454545; }
.ot-list { display: flex; border: 1px solid #ddd; border-radius: 20px;}
.ot-list li { width: calc(100%/4); border-right: 1px solid #ddd; text-align: center; padding: 45px 5px;}
.ot-list li:last-child { border-right: none;}
.ot-list li .tit { font-size: 22px; line-height: 1em; font-weight: 600; color: #242424; margin: 30px 0 15px;}
.ot-list li .txt { font-weight: 500; line-height: 1.5em; color: #454545; }
.ot-list li:nth-of-type(even) { background: #fafafa;}
.ot-sec2 { padding: 130px 0; background: #fbf9f5; text-align: center;}
.ot-sec2 h2 { line-height: 1em; font-size: 40px; font-weight: 700; letter-spacing: -.03em; color: #242424; margin-bottom: 22px;}
.ot-sec2 p { font-size: 18px; font-weight: 400; letter-spacing: -.03em; line-height: 1.5em; color: #454545; margin-bottom: 120px;}
.ot-list2 { display: flex; gap: 28px; flex-wrap: wrap;}
.ot-list2 li { width: calc(100%/4 - 21px); text-align: center; background: #fff; position: relative; border-radius: 20px; box-shadow: 8px 8px 20px rgba(0,0,0,0.05); padding: 90px 10px 35px;}
.ot-list2 li .tit { font-size: 24px; line-height: 1em; font-weight: 600; letter-spacing: -.03em; color: #242424; margin-bottom: 20px;}
.ot-list2 li .txt { font-weight: 400; line-height: 1.666em; letter-spacing: -.03em; color: #454545;}
.ot-list2 li .circle { position: absolute; left: 0; right: 0; width: 130px; height: 130px; border-radius: 100%; display: flex; align-items: center; justify-content: center; top: -65px; margin: auto;}
.ot-list2 li .circle.bg1 { background: #c7a577;}
.ot-list2 li .circle.bg2 { background: #1d1d1d;}

/* 연혁 */
.hst-bg { padding: 120px 55px 40px; border-radius: 20px; background: url(../images/sub/hst-img.jpg) center no-repeat; background-size: cover; color: #fff; position: relative;}
.hst-bg .titbox { font-size: 60px; font-weight: 700; letter-spacing: -.03em; line-height: 1.2em;}
.hst-bg p { font-size: 18px; font-weight: 600; letter-spacing: -.03em; line-height: 1.6em; margin-bottom: 5px;}
.hst-bg::after { content: ""; left: 0; right: 0; margin: auto; bottom: -17px; position: absolute; width: 34px; height: 34px; border-radius: 100%; background: #c7a577; border: 11px solid #fff; z-index: 1;}
.history { position: relative; padding-top: 75px;}
.history::after { content: ""; position: absolute; left: 0; right: 0; margin: auto; top: 0; background: #ddd; width: 1px; height: 92%; z-index: -1;}
.history .group { position: relative; margin-bottom: 40px;}
.history .group:last-child { margin-bottom: 0;}
.history .group .group-ttl {font-size:30px; line-height:1em; color: #242424; font-weight: 700; position: relative;}
.history .group .group-ttl::before { width: 57px; height: 1px; background: #ddd; content: ""; position: absolute; top: 0; bottom: 0; margin: auto;}
.history .group:nth-child(even) .group-ttl::before { left: -67px;}
.history .group:nth-child(odd) .group-ttl::before { right: -67px;}
.history .group .groupbox::after { content:''; position:absolute; top:5px; width:22px; height:22px; background:#c7a577; border:1px solid #ddd; box-shadow: #f2f2f2 0px 0px 0px 6px inset; border-radius:100%;}
.history .group:nth-of-type(even) .groupbox::after { left: -12px;}
.history .group:nth-of-type(odd) .groupbox::after { right: -10px;}
.history .group:nth-child(even) .groupbox { width: 50%; position: relative; margin-left: 50%; padding-left: 80px;}
.history .group:nth-child(odd) .groupbox { width: 50%; position: relative; margin-left: 0; padding-right: 82px;}
.history .group ul {position: relative; width:100%; margin-top: 25px;}
.history .group:nth-child(odd) ul {text-align:right;}
.history .group ul li {position: relative; color:#454545; margin-bottom: 6px; font-size: 16px; font-weight: 300; letter-spacing: -.03em; display: flex; line-height: 1.4em;}
.history .group ul li:last-child {margin-bottom: 0;}
.history .group ul li .month {font-weight: 700; letter-spacing: -.03em; width: 40px; color: #c7a577; line-height: 1.4em; position: absolute; top: 0; left: 0;}
.history .group ul li .txt { padding-left: 40px;}
.history .group:nth-of-type(odd) ul li .month { left: auto; right: 0;}
.history .group:nth-of-type(odd) ul li .txt  { padding-left: 0; padding-right: 40px;}
.history .group ul li .month::after { content: ""; position: absolute; right: 9px; width: 4px; height: 4px; border-radius: 100%; background: #ababab; top: 8px;}
.history .group:nth-of-type(odd) ul li .month::after { right: auto; left: 9px;}
.history .group:nth-child(odd) ul li {flex-direction: row-reverse;}
.history .group:nth-child(odd) .group-ttl { text-align: right; }

/* 인증 및 특허 */
.certi-list { display: flex; flex-wrap: wrap; gap: 50px 20px;}
.certi-list li { width: calc(100%/5 - 16px); text-align: center; }
.certi-list li .thumb {position:relative; padding-bottom:141%; margin-bottom:12px; overflow:hidden; }
.certi-list li .thumb img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:contain;}
.certi-list li .thumb:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid #ddd;}
.certi-list li .txt { line-height: 1.5em; font-weight: 400; color: #454545; letter-spacing: -.03em; }

/* 고객사 */
.op-list { display: flex; flex-wrap: wrap; gap: 10px;}
.op-list li { width: calc(100%/5 - 8px); text-align: center; }
.op-list li .thumb {position:relative; padding-bottom:64%; overflow:hidden; border-radius: 10px;}
.op-list li .thumb img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:contain;}
.op-list li .thumb:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid #ddd; border-radius: 10px; }
[data-tab-content] { display: none;}
[data-tab-content].active { display: block;}

/* 사업장 */
.root_daum_roughmap {width:100% !important;}
.directions {margin-top:40px;}
.directions .address-info {margin-bottom:30px;}
.directions .address-info .comp {color:#c7a577; font-weight:600; margin-bottom:7px; font-size: 18px;}
.directions .address-info .addr {color:#242424; font-size:28px; font-weight:700; 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 #242424; 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 img {vertical-align:middle; margin:-.2em 15px 0 0;}
.directions .contact-info dt path {fill:#ababab;}
.directions .contact-info dd {flex:1 1 auto; min-width:0; width:1%; color:#454545;}

/* sub2 공통 */
.sub2 { position: relative; padding: 0 120px;}
.sub2 p { font-weight: 400; letter-spacing: -.03em; line-height: 1.666em; color: #898989; margin-bottom: 15px;}
.sub2-img { border-radius: 30px; overflow: hidden; position: relative; max-width: 960px; width: 100%; margin: auto;}
.sub2-img .wh1 { top: 10%;}
.sub2-img .wh2 { top: 33%;}
.sub2-img .wh3 { right: 21%; top: 35%;}
.sub2-img .wh4 { bottom: 34%;}
.sub2-img .wh5 { bottom: 38%; right: 9%;}
.sub2-img .wh7 { right: 5%; top: 7%;}

/* sub3 공통 */
.sub3-list { display: flex; gap: 30px; margin-bottom: 60px; flex-wrap: wrap;}
.sub3-list li { width: calc(100%/3 - 20px); border-radius: 20px; overflow: hidden;}
.sub3-tbl-wrap { overflow: auto;}
.sub3-tbl { width: 100%; border-collapse: collapse; text-align: center;}
.sub3-tbl tr { border-bottom: 1px solid #ddd;}
.sub3-tbl tr th { background: #c7a577; color: #fff; border-right: 1px solid #ddd; font-weight: 600; letter-spacing: -.03em; line-height: 1.2em; padding: 17px 5px;}
.sub3-tbl tr th:last-child { border-right: none;}
.sub3-tbl tr td { color: #454545; border-right: 1px solid #ddd; font-weight: 400; letter-spacing: -.03em; line-height: 1.2em; padding: 12px 5px;}
.sub3-tbl tr td:last-child { border-right: none;}
.sub3-tbl tr td.clr { font-weight: 600; color: #242424; background: #fbf9f5;}
.sub3-box { margin-bottom: 100px;}
.sub3-box.mg { margin-bottom: 0;}
.sub3-list2 { gap: 28px; }
.sub3-list2 li { width: calc(100%/4 - 21px);}

/* 오시는 길 */
.map-b { position: relative; height: 750px;}
.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%; }
.maptab li a { pointer-events: none;}
.maptab li { cursor: pointer;}