@charset "utf-8";
/* 회사소개 */
.id-sec1 { padding-bottom: 100px; text-align: center;}
.id-sec2 { padding: 100px 0; background: #f8f8f8;}
.id-sec1 strong { line-height: 1.556em; letter-spacing: -.03em; font-weight: 500; color: #242424;  font-size: 20px; margin-bottom: 55px; display: block;}
.id-sec1 strong span { font-weight: 600; color: #29947e;}
.id-sec1-box { margin-top: 100px;}
.id-tit { padding-bottom: 60px; line-height: 1em; font-size: 35px; color: #242424; font-weight: 600; text-align: center;}
.id-tit span { color: #2dccb4; font-size: 30px; display: inline-block; padding: 0 5px;}
.id-sec1-box p { line-height: 1.666em; font-size: 18px; font-weight: 300; letter-spacing: -.03em; color: #454545; margin-top: 55px;}
.id-sec1-list { display: flex; }
.id-sec1-list li { width: calc(100%/5); text-align: center; position: relative;}
.id-sec1-list li:last-child::after { display: none;}
.id-sec1-list li::after { content: ""; position: absolute; top: 0; bottom: 0; margin: auto; right: -12px; width: 24px; height: 24px; background-size: contain; background: url(../images/sub/sub1-1-plus.png) center no-repeat;}
.id-sec1-list li .circle { width: 170px; height: 170px; border-radius: 100%; display: flex; align-items: center; justify-content: center; margin: auto; }
.id-sec1-list li .circle.bg1 { background: #2dccb4;}
.id-sec1-list li .circle.bg2 { background: #f6bc14;}
.id-sec1-list li .circle.bg3 { background: #373e96;}
.id-sec1-list li .circle.bg4 { background: #5e2b7e;}
.id-sec1-list li .circle.bg5 { background: #42bee0;}
.id-sec1-list li .tit { font-size: 20px; font-weight: 700; line-height: 1em; letter-spacing: -.03em; color: #fff; margin-top: 18px;}
.id-sec2-list { display: flex; gap: 24px;}
.id-sec2-list li { width: calc(100%/3 - 16px); }
.id-sec2-box { margin-top: 60px; }
.id-sec2-box .tit { padding-left: 15px; position: relative; font-size: 22px; font-weight: 600; letter-spacing: -.03em; line-height: 1.2em; }
.id-sec2-box .tit::before { content: ""; position: absolute; left: 0; width: 4px; height: 22px; background: #2dccb4; top: 2px;}
.id-sec2-box .txtbox { padding-top: 28px; padding-left: 17px;}
.id-sec2-box .txtbox p { line-height: 1.3em; font-weight: 300; letter-spacing: -.03em; color: #454545; margin-bottom: 8px;}
.id-sec2-box .txtbox p:last-child { margin-bottom: 0;}

/* CEO 인사말 */
.gt-img { height: 320px; position: relative; background: url(../images/sub/sub1-2.jpg) center no-repeat; background-size: cover;}
.gt-imgbox { padding: 50px 40px; border-radius: 0 60px 0 60px; background: rgba(41, 148, 126,0.8); position: absolute;right: 60px; top: 50%; transform: translateY(-50%); color: #fff; box-shadow: 5px 5px 10px rgba(0,0,0,0.2);}  
.gt-imgbox p { font-size: 15px; font-weight: 200; line-height: 1.33em; margin-bottom: 7px;}
.gt-imgbox h2 { font-size: 26px; font-weight: 400; letter-spacing: -.03em; line-height: 1.5em; font-family:'Noto Sans KR';}
.gt-imgbox h2 span { font-weight: 700;}
.gt-subtit { font-size: 28px; font-weight: 600; letter-spacing: -.03em; line-height: 1.444em; color: #242424; margin-top: 50px;}
.gt-txt { margin-top: 30px; font-size: 17px; font-weight: 300; letter-spacing: -.03em; line-height: 1.8em; color: #454545;}
.sign { margin-top: 60px; display: flex; align-items: center; justify-content: flex-end; gap: 18px;}
.sign strong { font-size: 19px; font-weight: 500; letter-spacing: -.03em; line-height: 1em; color: #242424;}

/* 연혁 */
.hst-list { display: flex; gap: 10px; margin-bottom: 60px;}
.hst-list li { width: calc(100%/3);}
.hst-list li img { width: 100%; }
.hst-box { display: flex;}
.hst-left {width: 50%;}
.hst-left h4 { font-size: 18px; font-weight: 600; line-height: 1.2em; margin-bottom: 18px; background: #121FCF; background: linear-gradient(to right, #2dccb4, #42bee0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.hst-left h3 { line-height: 1.5em; letter-spacing: -.03em; font-weight: 600; font-size: 26px; color: #242424;}
.hst-right {width: 50%;}
.history { position: relative; }
.history-box{ position: relative; }
.history-box::after { content: ""; position: absolute; left: 85px; top: 0; height: 98%; width: 1px; background: #ddd; z-index: -1; bottom: 0; margin: auto;}
.history .group { position: relative; margin-bottom: 40px; display: flex; gap: 0 60px; width: 100%;}
.history .group:last-child { margin-bottom: 0;}
.history .group .group-ttl {font-size:24px; line-height:1em; color: #29947e; font-weight: 700; position: relative; letter-spacing: -.03em; width: 63px;}
.history .group .group-ttl::after { content:''; position:absolute; width:15px; height:15px; border-radius: 100%; top: 4px; z-index: 1; right: -30px; background: #fff; border: 3px solid #2dccb4;}
.history .group .groupbox { position: relative; padding-top: 2px;}
.history .group ul {position: relative; }
.history .group ul li {position: relative;}
.history .group ul li:last-child {margin-bottom: 0;}
.history .group ul li .txt { font-size: 16px; color: #454545; font-weight: 300; letter-spacing: -.03em; line-height: 1.2em; margin-bottom: 10px;}
.history .group ul li .txt:last-child { margin-bottom: 0;}
.history .group2 ul li .txt { padding-left: 0;}

/* 오시는길 */
.lct { margin-top: 35px;}
.lct-titbox { display: flex; gap: 35px; margin-bottom: 25px;}
.lct-titbox .tit { font-size: 22px; font-weight: 700; letter-spacing: -.03em; color: #29947e; line-height: 1.2em; position: relative;}
.lct-titbox .tit::after { content: ""; position: absolute; right: -18px; background: #ddd; width: 1px; height: 15px; top: 7px;}
.lct-titbox .add { font-size: 20px; font-weight: 500; letter-spacing: -.03em; line-height: 1.2em; color: #242424;}
.lct-icon { display: flex; gap: 60px;}
.lct-icon li { position: relative; display: flex; gap: 30px; align-items: center;}
.lct-icon li .iconbox { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 500; line-height: 1em; color: #242424; }
.lct-icon li .txt::before { content: ""; position: absolute; left: -16px; top: 7px; width: 1px; height: 10px; background: #ddd;}
.lct-icon li .txt { font-size: 18px; font-weight: 300; letter-spacing: -.03em; color: #454545; line-height: 1.2em; padding-top: 1px; position: relative;}

/* 건축자재 공통 */
.sub2-tit { font-size: 30px; line-height: 1.2em; margin-bottom: 30px; font-weight: 600; color: #242424; text-align: center;}
.sub2-sec1 { padding-bottom: 100px;}
.sub2-box { margin-bottom: 90px;}
.sub2-box:last-child { margin-bottom: 0; }
.sub2-tab { display: flex; margin-bottom: 100px;position: relative;}
.sub2-tab::after {content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border: 1px solid #ddd; z-index: -1;}
.sub2-tab li { flex: 1; text-align: center; border-right: 1px solid #ddd;color: #686868;}
.sub2-tab li:last-child { border: none;}
.sub2-tab li a { height: 60px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 500; letter-spacing: -.03em; line-height: 1.1em; transition: none;}
.sub2-tab li.active { background-color: #42bee0; border: none; color: #fff;}
.sub2-tab li:hover { background: #42bee0; color: #fff; border: none;}
.sub2-ctt { text-align: center; margin-bottom: 60px;}
.sub2-ctt p { font-size: 18px; font-weight: 400; line-height: 1.6em; letter-spacing: -.03em; color: #454545; margin-bottom: 18px;}
.sub2-ctt p span { font-weight: 500; color: #2081af;}
.sub2-ctt>span { display: block; font-weight: 300; letter-spacing: -.03em; line-height: 1.5em; color: #2081af; margin-bottom: 55px;}
.sub2-swiper { width: 100%; position: relative; overflow: hidden; }
.sub2-swiper-slide img { width: 100%; display: block; object-fit: cover;}
.sub2-swiper-button-prev::after, .sub2-swiper-button-next::after { display: none;}
.sub2-swiper-button-prev, .sub2-swiper-button-next { width: 19px; height: 34px; background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 1 !important;}
.sub2-swiper-button-prev { background-image: url(../images/sub/sub2-leftbt.png); left: 30px;}
.sub2-swiper-button-next { background-image: url(../images/sub/sub2-rightbt.png); right: 30px;}
.sub2-swiper .swiper-pagination-bullet { width: 15px; height: 15px; background: #fff; opacity: 1 !important; margin: 0 7px !important;}
.sub2-swiper .swiper-pagination-bullet-active { background: #2dccb4;}
.sub2-swiper .swiper-pagination { bottom: 25px; }
.sub2-box .tit { padding-left: 30px; position: relative; font-size: 22px; font-weight: 600; line-height: 1.4em; letter-spacing: -.03em; color: #242424; padding-bottom: 17px; border-bottom: 1px solid #ddd;}
.sub2-box .tit2 { font-weight: 500; font-size: 22px;}
.sub2-box .tit::before { content: ""; position: absolute; left: 0; width: 20px; height: 20px; background-size: contain; background: url(../images/sub/bf.png) center no-repeat; top: 4px;}
.sub2-txtbox { padding-left: 30px; padding-top: 14px;}
.sub2-txtbox h4 { font-size: 18px; font-weight: 500; letter-spacing: -.03em; line-height: 1.6em; color: #454545;}
.circlebox { margin-top: 22px;}
.circlebox li { position: relative; margin-bottom: 17px; display: flex; }
.circlebox li:last-child { margin-bottom: 0;}
.circlebox li .num { width: 18px; height: 18px; border-radius: 100%; background: #2dccb4; color: #fff; font-size: 15px; font-weight: 600; letter-spacing: -.03em; line-height: 1em; display: flex; align-items: center; justify-content: center; margin-right: 10px;}
.circlebox li .txt { flex: 1 1 auto; min-width: 0; width:1%; font-weight: 300; letter-spacing: -.03em; line-height: 1.2em; color: #454545;}
.sub2-sec2 { padding: 100px 0; background: #f8f8f8;}
.sub2-sec2-list { margin-top: 50px;}
.sub2-sec2-list li { background: #fff; display: flex; align-items: center; gap: 20px; padding: 10px; border-radius: 35px; margin-bottom: 20px;}
.sub2-sec2-list li:last-child { margin-bottom: 0; }
.sub2-sec2-list li:nth-of-type(odd) { border: 1px solid #42bee0;}
.sub2-sec2-list li:nth-of-type(odd) .circle { background: #42bee0;}
.sub2-sec2-list li:nth-of-type(even) { border: 1px solid #2081af;}
.sub2-sec2-list li:nth-of-type(even) .circle { background: #2081af;}
.sub2-sec2-list li .circle { width: 50px; height: 50px; border-radius: 100%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; font-weight: 600; letter-spacing: -.03em; line-height: 1em;}
.sub2-sec2-list li .txtbox { flex: 1 1 auto; min-width: 0; width: 1%; }
.sub2-sec2-list li .txtbox .tit { font-size: 18px; font-weight: 500; letter-spacing: -.03em; line-height: 1.2em; color: #242424; display: inline-block}
.sub2-sec2-list li .txtbox .txt { display: inline-block; font-weight: 300; letter-spacing: -.03em; line-height: 1.2em; color: #454545; padding-left: 15px;}
.ds-view { width: 250px; height: 50px; display: flex; align-items: center; border-radius: 25px; background: #2dccb4; position: relative; color: #fff; font-size: 18px; font-weight: 400; letter-spacing: -.01em; line-height: 1.2em; padding-left: 37px; margin: 60px auto 0;}
.ds-view::after { content: ""; position: absolute; right: 37px; width: 12px; height: 12px; background-size: contain; background: url(../images/sub/sub2-view.png) center no-repeat; top: 20px;}
.sub2-sec3 { padding: 100px 0;}
.sub2-sec4 { padding: 100px 0; background: #f8f8f8;}
.gold-span { font-weight: 400; letter-spacing: -.03em; line-height: 1.2em; display: block; margin-top: 10px; color: #42bee0;}
.sub2-mg { margin-bottom: 35px;}
.sub2-mg:last-child { margin-bottom: 0; }
.sub2-txtbox h5 { font-size: 18px; font-weight: 500; letter-spacing: -.03em; line-height: 1.2em; color: #454545; position: relative; padding-left: 18px; margin-bottom: 15px;}
.sub2-txtbox h5::before { width: 6px; height: 6px; border-radius: 100%; background: #42bee0; content: ""; position: absolute; left: 0; top: 7px;}
.sub2-txtbox p { font-weight: 400; letter-spacing: -.03em; line-height: 1.2em; color: #454545; margin-bottom: 10px; padding-left: 18px;}
.sub2-txtbox p:last-child { margin-bottom: 0; }

/* sub3 공통 */
.sub3 { display: flex; overflow: auto; height: fit-content; height: 560px;}
.sub3::-webkit-scrollbar { width: 3px; background: #ddd;}
.sub3::-webkit-scrollbar-thumb { background-color: #9f9f9f; width: 100%; height:40px; background-clip: padding-box; }
.sub3::-webkit-scrollbar-track { background-clip: padding-box; }
.sub3::-webkit-scrollbar-button { width: 0;}
.sub3-left { width: 53%; position: sticky; top: 0;}
.sub3-left .thumb {position:relative; padding-bottom:65%; margin-bottom:37px; overflow:hidden;}
.sub3-left .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:cover;}
.sub3-titbox { align-items: center; display: flex; justify-content: space-between;}
.sub3-titbox .tit { font-size: 24px; font-weight: 600; letter-spacing: -.03em; line-height: 1em; color: #242424;}
.sub3-titbox .down { display: flex; align-items: center; width: 150px; height: 45px; padding-left: 10px; position: relative; color: #fff; font-weight: 500; letter-spacing: -.03em; line-height: 1em; background: #2dccb4;}
.sub3-titbox .down::after { content: ""; position: absolute; right: 10px; width: 17px; height: 17px; background: url(../images/sub/download.png) center no-repeat; background-size: contain; top: 15px;}
.sub3-right { width: 47%; padding-left: 65px; padding-right: 30px;}
.sub3-box { margin-bottom: 55px; }
.sub3-box:last-child { margin-bottom: 0;}
.sub3-box .tit { padding-left: 30px; position: relative; font-size: 22px; font-weight: 600; line-height: 1.4em; letter-spacing: -.03em; color: #242424; padding-bottom: 17px; }
.sub3-box .tit::before { content: ""; position: absolute; left: 0; width: 20px; height: 20px; background-size: contain; background: url(../images/sub/bf.png) center no-repeat; top: 6px;}
.sub3-txtbox { padding-left: 30px;}
.sub3-list { display: flex; flex-wrap: wrap; gap: 30px;}
.sub3-list li { width: calc(100%/3 - 20px); text-align: center; }
.sub3-list li .thumb {position:relative; padding-bottom:65%; margin-bottom:16px; overflow:hidden;}
.sub3-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:cover;}
.sub3-list li .thumb .abbox { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border: 3px solid red; display: none;}
.sub3-list li.active .thumb .abbox { display: block;}
.sub3-list li .thumb::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border: 1px solid #ddd;}
.sub3-list li .txt { font-weight: 300; letter-spacing: -.03em; line-height: 1.2em; color: #454545;}