@charset "utf-8";
/* 공통 */
.sub-title-wrap { margin-bottom: 80px; }
.sub-title-wrap h5 { font-weight: 600; font-size: var(--font-size20); line-height: 1.7em; color: var(--color-primary); margin-bottom: 24px;}
.sub-title-wrap h3 { font-weight: 700; font-size: var(--font-size48); line-height: 1.29em; color: #2c2c2c; }
.sub-title-wrap h3 a { display: inline-flex; position: relative; padding: 0 20px; border-radius: 30px; background: var(--color-primary); color: #fff; font-size: 16px; height: 52px; align-items: center; line-height: 2em; gap: 10px; padding-top: 2px; position: relative; top: -10px; margin-left: 20px; letter-spacing: 0;}
.sub-title-wrap.flex { display: flex; justify-content: space-between; align-items: flex-end;}
.page-ctr { margin-bottom: 24px; }
.page-ctr span { display: inline-block; padding-right: 20px; position: relative; font-size: var(--font-size20); line-height: 1.7em; font-weight: 600; color: #999; }
.page-ctr span::after { content: ""; position: absolute; left: -12px; top: 0; bottom: 0; margin: auto; width: 1px; height: 10px; background: #eee; }
.page-ctr span:last-child { padding-right: 0; }
.page-ctr span:first-child::after { display: none; }
.page-ctr span.page-name { color: var(--color-primary);}
.subtit { position: relative; font-size: var(--font-size32); font-weight: 600; line-height: 1.43em; color: #2c2c2c; margin-bottom: 40px; }
.subtit.mg { margin-bottom: 0; }
/* .subtit::before { content: ""; position: absolute; left: 0; width: 14px; height: 14px; background: url(../images/sub/tit-bf.png) center no-repeat; background-size: contain; top: 16px; }  */
.subtit span { padding-left: 16px; font-size: var(--font-size24); font-weight: 500; line-height: 1.58em; color: #bbb; }
.subtit-wrap { display: flex; justify-content: space-between; align-items: center; padding-bottom: 30px; border-bottom: 1px solid #2C2C2C; margin-bottom: 30px; }
.subtit-wrap.bd { border: none; margin-bottom: 0; }
.subtit-wrap .call-btn { display: inline-flex; padding: 8px 20px; border-radius: 80px; background: #F2F6FA; gap: 10px; align-items: center; font-size: var(--font-size18); font-weight: 500; line-height: 2em; color: #73808d; }
.subtit-wrap .call-btn strong { font-size: var(--font-size20); font-weight: 600; line-height: 1.7em; color: var(--color-primary);}
.subtit-wrap .sub2-bf-tit.fz { margin-bottom: 0; }
.sub-pd { padding: 100px 0;}
.sub-pd.first { padding-top: 0; }
.sub-pd.last { padding-bottom: 0; }
.sub-pd.bg { background: #fbfbfb; }
.subtit2 { font-size: var(--font-size28); line-height: 1.5em; color: #2c2c2c; font-weight: 500; position: relative; margin-bottom: 30px; padding-left: 26px; }
.subtit2::before { content: ""; position: absolute; left: 0; top: 12px; width: 16px; height: 16px; border-radius: 16px; border: 5px solid #DCE6EF; background: var(--color-primary); }
.subtxt { font-size: var(--font-size20); line-height: 1.7em; color: #676767; }
.jum-txt p { margin-bottom: 10px; position: relative; padding-left: 12px; }
.jum-txt p:last-child { margin-bottom: 0; }
.jum-txt p::before { content: ""; position: absolute; left: 0; top: 15px; width: 4px; height: 4px; border-radius: 4px; background: #ccc; }

/* 회사개요 및 연혁 */
.ov-sec1 { border-bottom: 1px solid #eee;}
.ov-flex { display: flex; flex-wrap: wrap; gap: 30px 0;}
.ov-flex>div { width: calc(100%/2);}
.ov-flex .img { padding-right: 80px; }
.ov-flex .img img { border-radius: 16px; }
.ov-flex .info { border-top: 1px solid #2C2C2C;}
.ov-flex .info .col { border-bottom: 1px solid #eee; padding: 40px 0;}
.ov-flex .info .col .subtit2 { font-size: var(--font-size24); font-weight: 600; }
.ov-flex .info .col .subtit2::before { top: 10px; }
.ov-flex .info .col p { color: #505050; }
.hst { margin-top: 80px; position: relative; }
.hst .track { position: absolute; left: 27px; top: 0; width: 2px; height: 100%; background: #ddd; }
.hst .track .bar { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--color-primary); }
.hst .group { display: flex; padding-bottom: 100px; }
.hst .group:last-child { padding-bottom: 0; }
.hst .group .year { width: 25%; position: relative; font-size: var(--font-size40); line-height: 1.4em; font-weight: 600; color: #686868; padding-left: 136px; transition: .3s;}
.hst .group .year::before { content: ""; position: absolute; left: 0; top: 0; width: 56px; height: 56px; border: 18px solid #FAFAFA; background: #999; border-radius: 100%; transition: .3s; }
.hst .group .info { width: 75%; padding-top: 12px; }
.hst .group .info ul li { display: flex; margin-bottom: 24px; }
.hst .group .info ul li:last-child { margin-bottom: 0; }
.hst .group .info ul li .month { width: 120px; font-size: var(--font-size24); font-weight: 600; line-height: 1.41em; color: #2c2c2c; padding-left: 24px; position: relative; }
.hst .group .info ul li .month::before { content: ""; position: absolute; left: 0; top: 13px; width: 8px; height: 8px; border-radius: 8px; background: #ccc; }
.hst .group .info ul li .subtxt { flex: 1 1 auto; min-width: 0; width: 1%; }
.hst .group.active .year { color: var(--color-primary); }
.hst .group.active .year::before { background: var(--color-primary); border-color: #F3F7FA; }

/* 인증현황 */
.certi { display: flex; flex-wrap: wrap; gap: 40px; }
.certi .item { width: calc(100%/4 - 30px); text-align: center; }
.certi .item .thumb { position: relative; border-radius: 16px; padding-bottom: 133%; display: block; overflow: hidden;}
.certi .item .thumb img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
.certi .item .tt { margin-top: 20px; font-size: var(--font-size20); font-weight: 500; line-height: 1.7em; color: #2c2c2c; }
.certi .item.none { padding:70px 0; border-top: 1px solid #121212; border-bottom: 1px solid #ddd; text-align: center; width: 100%; }

/* 찾아오시는 길 */
.lct { display: flex; gap: 20px; }
.lct .map { width: 64%; border-radius: 24px; overflow: hidden; }
.lct .info { width: 36%; padding: 50px; border-radius: 24px; background: #F8F8F8; }
.lct .info h5 { font-size: var(--font-size18); font-weight: 600; line-height: 1.77em; color: var(--color-primary); margin-bottom: 6px; }
.lct .info h4 { font-size: var(--font-size32); color: #2c2c2c; font-weight: 600; line-height: 1.43em; }
.lct .info ul { border-top: 1px solid #BBB; margin-top: 96px; }
.lct .info ul li { border-bottom: 1px dashed #ddd; padding: 16px 0; font-size: var(--font-size18); line-height: 1.77em; }
.lct .info ul li:last-child { padding-bottom: 0; border: none; }
.lct .info ul li .tit { color: #999; font-weight: 500; margin-bottom: 2px; }
.lct .info ul li .txt { color: #676767; }

/* 채용정보 */
.rc-wrap { border-top: 1px solid #2c2c2c; }
.rc-wrap .col { border-bottom: 1px solid #eee; display: flex; align-items: center; padding: 40px 0;}
.rc-wrap .col .icon { width: 160px; height: 160px; border-radius: 16px; background: #f9f9f9; display: flex; align-items: center; justify-content: center; margin-right: 70px; }
.rc-wrap .col .info { flex: 1 1 auto; min-width: 0; width: 1%; }
.rc-wrap .col .info .step { line-height: 1.5em; font-weight: 500; color: #999; }
.rc-wrap .col .info .tt { margin: 6px 0 24px; font-size: var(--font-size26); font-weight: 500; line-height: 1.53em; color: #2c2c2c; } 
.rc-support { border-radius: 16px; border: 1px solid #eee; padding: 40px 50px; }
.rc-support .ctr { line-height: 1.5em; font-weight: 600; color: var(--color-primary); margin-bottom: 6px; }
.rc-support h5 { font-size: var(--font-size30); line-height: 1.46em; color: #2c2c2c; font-weight: 600; }
.rc-support ul { padding: 30px 0; margin: 30px 0; border-top: 1px solid #2c2c2c; display: flex; flex-wrap: wrap; gap: 24px; }
.rc-support ul li { width: calc(100%/3 - 16px); }
.rc-support ul li .txt { margin-bottom: 8px; font-size: var(--font-size18); line-height: 1.77em; font-weight: 500; color: #999; }
.rc-support ul li .tt { font-size: var(--font-size24); font-weight: 500; line-height: 1.58em; }
.rc-support-info { display: flex; border-radius: 8px; background: #F3F7FA; }
.rc-support-info .col { width: calc(100%/2); padding: 24px 40px; display: flex; justify-content: space-between; align-items: center; position: relative; }
.rc-support-info .col:first-child::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; width: 1px; height: 24px; background: #dfdfdf; }
.rc-support-info .col .txt { font-size: var(--font-size18); font-weight: 500; line-height: 1.66em; }
.rc-support-info .col .tt { font-size: var(--font-size20); line-height: 1.7em; color: var(--color-primary); font-weight: 600; }

/* sub2 공통 */
.sub2-big { border-radius: 16px; overflow: hidden;}
.sub2-group { padding: 60px 0; border-bottom: 1px dashed #eee;}
.sub2-group.bd { border: none; }
.sub2-group:first-child { padding-top: 0; }
.sub2-group.last { border: none; padding-bottom: 0; }
.sub2-tit { font-size: var(--font-size32); line-height: 1.43em; font-weight: 600; color: #2c2c2c; margin-bottom: 30px; }
.sub2-tit.mg { margin-bottom: 0; }
.sub2-tit span { padding-left: 16px; font-size: var(--font-size24); font-weight: 500; line-height: 1.58em; color: #bbb; }
.sub2-txt.mg { margin-bottom: 60px; }
.sub2-txt p { margin-bottom: 14px; }
.sub2-txt p:last-child { margin-bottom: 0; }
.sub2-txt p span { color: var(--color-primary); font-weight: 500; }
.sub2-bf-tit { padding-left: 24px; position: relative; font-size: var(--font-size24); font-weight: 500; line-height: 1.58em; margin-bottom: 30px; }
.sub2-bf-tit::before { content: ""; position: absolute; left: 0; top: 11px; width: 10px; height: 15px; background: url(../images/sub/sub2-tit-bf.png) center no-repeat; background-size: contain; }
.sub2-bf-tit.fz { font-size: var(--font-size18); color: #676767; line-height: 1.77em; }
.sub2-bf-tit.fz::before { top: 8px; }
.sub2-tbl-wrap { overflow: auto;}
.sub2-tbl-wrap.mg { margin: 30px 0; }
.sub2-tbl { width: 100%; border-collapse: collapse; border-top: 1px solid #2c2c2c;}
.sub2-tbl tr { border-bottom: 1px solid #dfdfdf;}
.sub2-tbl tr.bg { background: #fafafa;}
.sub2-tbl tr th { border-right: 1px solid #dfdfdf; padding: 15px 0; font-weight: 500; line-height: 1.25em; background: #fafafa;}
.sub2-tbl tr th:last-child { border-right: none;}
.sub2-tbl tr th.bd { border-right: 1px solid #dfdfdf;}
.sub2-tbl tr td { border-right: 1px solid #dfdfdf; padding: 10px 0; line-height: 1.87em; text-align: center; font-weight: 400; background: #fff; }
.sub2-tbl tr td:last-child { border-right: none;}
.sub2-tbl tr td.bd { border-right: 1px solid #dfdfdf;}
.sub2-tbl tr td.left { padding-left: 16px; text-align: left; }
.sub2-tbl.mr th { line-height: 1.77em; font-size: var(--font-size18);}
.sub2-tbl.mr th.bg { color: #fff; background: var(--color-primary); }
.sub2-tbl.mr td.left { padding-left: 20px; }
.sub2-tbl.mr td.bg { color: var(--color-primary); font-weight: 500; background: #f3f7fa; }
.sub2-tbl.mr td { line-height: 1.55em; font-size: var(--font-size18); padding: 16px 10px; }

/* 건축 유리 분야 */
.gs-process { border-radius: 16px; border: 1px solid #ddd; padding: 40px; background: #fff; }
.gs-process .subtxt { margin-bottom: 40px; }
.gs-process ul { display: flex; }
.gs-process ul.wt { gap: 12px; }
.gs-process ul li { width: calc(100%/4); text-align: center; color: #fff; padding: 28px 10px; border-radius: 70px;}
.gs-process ul.wt li { width: calc(100%/4 - 9px);}
.gs-process ul li .tt { margin-bottom: 4px; font-size: var(--font-size24); font-weight: 600; line-height: 1.58em; }
.gs-process ul li .txt { color: #eee; font-size: var(--font-size18); line-height: 1.77em; font-weight: 500; }
.gs-process ul li:nth-child(1) { background: rgba(187, 187, 187, 0.80);}
.gs-process ul li:nth-child(2) { background: rgba(153, 153, 153, 0.80);}
.gs-process ul li:nth-child(3) { background: rgba(80, 80, 80, 0.80);}
.gs-process ul li:nth-child(4) { background: rgba(44, 44, 44, 0.80);}
.gs-process.active { border-color: var(--color-primary);}
.gs-process.active .sub2-bf-tit { color: var(--color-primary);}
.gs-process.active ul li { width: calc(100%/4 + 132px); margin-left: -44px; }
.gs-process.active ul li:nth-child(1) { background: rgba(58, 115, 168, 0.80); margin-left: 0; }
.gs-process.active ul li:nth-child(2) { background: rgba(0, 74, 143, 0.80); }
.gs-process.active ul li:nth-child(3) { background: rgba(0, 23, 45, 0.80); }
.gs-process.active ul li:nth-child(4) { background: rgba(0, 0, 0, 0.80); }
.gs-vs { margin: 30px auto; width: 58px; height: 58px; border-radius: 58px; display: flex; align-items: center; justify-content: center; background: #f3f7fa; font-size: var(--font-size20); font-weight: 500; line-height: 1.7em; color: var(--color-primary);}
.gs-img { border-radius: 16px; overflow: hidden; position: relative; }
.gs-img.bd::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border-radius: 16px; border: 1px solid #eee;}
.gs-roller { display: flex; margin-top: 40px; flex-wrap: wrap; gap: 10px; }
.gs-roller .gs-img { width: calc(100%/2 - 5px); }
.gs-durab { display: flex; }
.gs-durab .info { flex: 1 1 auto; min-width: 0; width: 1%; padding-left: 60px; }
.gs-flex { margin-top: 60px; }
.gs-flex .col { margin-bottom: 40px; display: flex; align-items: flex-end; gap: 50px; }
.gs-flex .col:last-child { margin-bottom: 0; }
.gs-flex .col>div { width: calc(100%/2 - 25px);}
.gs-flex .sub2-txt { padding-top: 30px; border-top: 1px dashed #eee;}
.gs-flex .col:nth-of-type(even) { flex-direction: row-reverse; }
.gs-bg { background: linear-gradient(119deg, #F3F7FA 8.63%, #DCE6EF 89.91%); }
.gs-titbox { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 20px; margin-bottom: 100px; }
.gs-titbox a { display: inline-block; padding: 12px 16px; padding-right: 44px; border-radius: 80px; border: 1px solid var(--line-line-01, #DDD); background: var(--basics-ffffff, #FFF); line-height: 1.5em; font-weight: 600; color: #676767; position: relative; }
.gs-titbox a::after { content: ""; position: absolute; right: 16px; top: 0; bottom: 0; margin: auto; width: 16px; height: 16px; background: url(../images/sub/sub2-search.png) center no-repeat; background-size: contain; } 
.gs-coat { display: flex; flex-wrap: wrap; gap: 120px; }
.gs-coat>div { width: calc(100%/2 - 60px);}
.gs-coat .col { padding: 32px; border-radius: 16px; background: #FDFDFD; margin-bottom: 10px; }
.gs-coat .col:last-child { margin-bottom: 0; }
.gs-coat .col .subtit2 { margin-bottom: 20px; font-size: 24px; }
.gs-coat .col .subtit2::before { top: 10px; }
.gs-coat .col .txt p { font-size: var(--font-size18); line-height: 1.77em; color: #676767; margin-bottom: 10px; }
.gs-coat .col .txt p:last-child { margin-bottom: 0; }
.gs-coat .img { overflow: hidden; position: relative; }
.gs-coat .bg {text-align: right; }
.gs-product { margin-top: 60px; }
.gs-product .col { margin-bottom: 60px; display: flex; align-items: flex-start;}
.gs-product .col:last-child { margin-bottom: 0; }
.gs-product .col .info { flex: 1 1 auto; min-width: 0; width: 1%; padding-left: 40px; }
.gs-product .col .info .jum-txt { margin-top: 16px; }
.gs-product .col .info .jum-txt p { line-height: 1.62em; color: #999; margin-bottom: 4px;}
.gs-product .col .info .jum-txt p::before { background: #ccc; top: 10px; }

/* 쿼드로이 코팅 X4 */
#lowecoating-animation {position: absolute; width: 100%; bottom: 0; right: 0; min-height: 748px;}
#lowecoating-animation .equip-top {position:absolute;right:0;bottom: -50px;}
#lowecoating-animation .equip-top span {display:block;text-align:center; padding-right: 200px;-webkit-transform: skewY(15deg);transform: skewY(15deg);font-size: 20px;position: absolute;width: 100%;box-sizing: border-box;top: 125px;color: #676767; font-weight: 500; }
#lowecoating-animation .coating-animation {position:absolute;right: 36px;bottom: 0; width: 552px; height: 201px;}
#lowecoating-animation .set01, #lowecoating-animation .set02, #lowecoating-animation .set03, #lowecoating-animation .set04 { display:none; opacity:0; }
.silver-ball{ background-image:url(/images/sub/silver.svg); background-size:100%; width:7px; height:7px; position:absolute; }
.circle-object1-0 { animation-duration:.8s !important;
animation-name: move; animation-iteration-count: infinite; }
.circle-object1-1 { animation-duration:.8s !important; animation-name: move; animation-iteration-count: infinite; animation-delay:.2s; }
.circle-object2-0 { animation-duration:.8s !important; animation-name: move; animation-iteration-count: infinite; animation-delay:.4s; }
.circle-object2-1 { animation-duration:.8s !important; animation-name: move; animation-delay:.6s; animation-iteration-count: infinite; }
@keyframes move {
    from{
        transform:translate(0,0);
        opacity:1;
    }
    to{
        transform:translate(90px,-15px);
        opacity:0.25;
    }
}

/* 친환경 거울 분야 */
.mr-bg { padding: 60px; position: relative; background: url(../images/sub/sub2-2-bg.jpg) center no-repeat; background-size: cover; color: #fff; display: flex; align-items: center; margin-top: 60px; border-radius: 16px; overflow: hidden;}
.mr-bg .info { flex: 1 1 auto; min-width: 0; width: 1%; padding-left: 80px; }
.mr-bg .info .tit { font-size: var(--font-size36); line-height: 1.38em; font-weight: 700; margin-bottom: 40px; }
.mr-bg .info .txt p { margin-bottom: 12px; font-weight: 500; color: #eee; } 
.mr-bg .info .txt p:last-child { margin-bottom: 0; }
.mr-bg .big { position: absolute; right: -0; bottom: -22px; color: rgba(255, 255, 255, 0.08); font-size: 120px;  font-weight: 700; line-height: 1.1em; }
.mr-new .col { display: flex; align-items: center; margin-bottom: 20px; }
.mr-new .col:last-child { margin-bottom: 0; }
.mr-new .col .gs-img { width: 600px; margin-right: 60px; }
.mr-new .col .info { flex: 1 1 auto; min-width: 0; width: 1%; }
.mr-new .col .info .subtit2 { margin-bottom: 60px; }
.mr-prev::after, .mr-next::after { display: none; }
.mr-prev, .mr-next { top: 50%; transform: translateY(-50%); background-repeat: no-repeat; background-position: center; width: 52px; height: 52px; border-radius: 52px; background-size: 12px; transition: .3s;}
.mr-process-prev { left: -90px; background-color: #f6f6f6; background-image: url(../images/sub/sub2-2-prev.png);}
.mr-process-prev:hover { background-color: #121212; background-image: url(../images/sub/sub2-2-prev-w.png);}
.mr-process-next { right: -90px; background-color: #f6f6f6; background-image: url(../images/sub/sub2-2-next.png);}
.mr-process-next:hover { background-color: #121212; background-image: url(../images/sub/sub2-2-next-w.png);}
.mr-swp { position: relative; }
.mr-swp img { width: 100%; }
.mr-swp .tit { display: flex; margin-top: 20px; }
.mr-swp .tit .step { display: inline-block; padding: 4px 12px 3px; font-weight: 600; line-height: 1.87em; color: var(--color-primary); background: #f3f7fa; border-radius: 25px; margin-right: 12px; display: inline-block; }
.mr-swp .tit strong { flex: 1 1 auto; min-width: 0; width: 1%; font-weight: 500; color: #505050; padding-top: 1px; }
.mr-distinc { display: flex; border-radius: 8px; background: #F3F7FA; flex-wrap: wrap; padding: 24px 10px; font-size: var(--font-size20); line-height: 1.7em; font-weight: 500; color: var(--color-primary); }
.mr-distinc li { width: calc(100%/3); position: relative; border-right: 1px solid #dfdfdf; text-align: center; }
.mr-distinc li:last-child { border: none; }
.mr-test { display: flex; gap: 40px; }
.mr-test .sub2-tbl-wrap { flex: 1 1 auto; min-width: 0; width: 1%; }
.mr-test .swiper { width: 580px; background: #fff; padding: 28px 0; border-radius: 16px; border: 1px solid #eee; text-align: center; }
.mr-test-btns { position: absolute; display: flex; gap: 4px; justify-content: flex-end; bottom: -10px; right: 20px; }
.mr-test-btns .mr-prev, .mr-test-btns .mr-next { position: relative; top: auto; margin-top: 0; }
.mr-test-btns .mr-prev { left: auto; background-color: rgba(0, 0, 0, 0.24); backdrop-filter: blur(20px); background-image: url(../images/sub/sub2-2-prev-w.png);}
.mr-test-btns .mr-prev:hover { background-color: #121212;}
.mr-test-btns .mr-next { right: auto; background-color: rgba(0, 0, 0, 0.24); backdrop-filter: blur(20px); background-image: url(../images/sub/sub2-2-next-w.png);}
.mr-test-btns .mr-next:hover { background-color: #121212;}
.mr-test2 { display: flex; gap: 100px; align-items: flex-start; }
.mr-test2 .info { flex: 1 1 auto; min-width: 0; width: 1%; }
.mr-test2 .info .sub2-bf-tit { font-size: var(--font-size18); font-weight: 500; }
.mr-test2 .info .sub2-bf-tit::before { top: 6px; }
.edge { background: linear-gradient(119deg, #F3F7FA 8.63%, #DCE6EF 89.91%); }
.mr-edge { display: flex; position: relative; }
.mr-edge .info { padding-top: 24px; padding-left: 80px; flex: 1 1 auto; min-width: 0; width: 1%; }
.mr-edge .logo { position: absolute; bottom: 0; right: 0; }
.mr-flex { display: flex; align-items: flex-start; padding-top: 60px; margin-top: 100px; border-top: 1px dashed #ddd; position: relative; }
.mr-flex .info { width: 440px; margin-right: 160px; }
.mr-flex .info .subtit2 { font-size: 24px; }
.mr-flex .info .subtit2::before { top: 9px; }
.mr-flex .img { flex: 1 1 auto; min-width: 0; width: 1%;  }
.mr-flex .step-wrap .col { margin-bottom: 10px; display: flex; align-items: center; padding: 24px; border-radius: 16px; background: #fdfdfd; width: 100%; }
.mr-flex .step-wrap .col:last-child { margin-bottom: 0; }
.mr-flex .step-wrap .step { display: inline-block; padding: 4px 12px 3px; line-height: 1.87em; font-weight: 600; color: var(--color-primary); border-radius: 40px; background: #f3f7fa; margin-right: 16px; }
.mr-flex .step-wrap .tt { font-size: var(--font-size20); line-height: 1.7em; font-weight: 600; color: #2c2c2c;}
.mr-flex .step-wrap .txt { font-size: var(--font-size18); color: #676767; line-height: 1.77em; padding-left: 16px; }
.mr-color { display: flex; flex-wrap: wrap; gap: 10px 4px; }
.mr-color .item { width: 113px; border-radius: 8px; padding: 12px 5px; text-align: center; }
.mr-color .item .num { font-size: 12px; font-weight: 500; line-height: 1.33em; color: #dfdfdf; margin-bottom: 4px; }
.mr-color .item .num.clr { color: #999; }
.mr-color .item .tt { font-weight: 500; line-height: 1.25em; color: #2c2c2c; }
.mr-color .item.bg1 { background: #cad7ce; }
.mr-color .item.bg2 { background: #ADC9BA; }
.mr-color .item.bg3 { background: #8BAEB2; }
.mr-color .item.bg4 { background: #A3B7B5; }
.mr-color .item.bg5 { background: #669CA8; }
.mr-color .item.bg6 { background: #8B9793; }
.mr-color .item.bg7 { background: #A5A396; }
.mr-color .item.bg8 { background: #8CC3BE; }
.mr-color .item.bg9 { background: #9EBEA6; }
.mr-color .item.bg10 { background: #A7B4AB; }
.mr-color .item.bg11 { background: #CAD5CD; }
.mr-color .item.bg12 { background: #5E5F61; }
.mr-color .item.bg13 { background: #8B9793; }
.mr-color .item.bg14 { background: #A5A396; }
.mr-solar { display: flex; align-items: center;}
.mr-solar .info { flex: 1 1 auto; min-width: 0; width: 1%; padding-left: 60px; }
.mr-plus { display: flex; flex-wrap: wrap; margin-top: 60px; gap: 30px; }
.mr-plus .item { width: calc(100%/3 - 20px); text-align: center; }
.mr-plus .item .tt { font-size: var(--font-size20); font-weight: 500; line-height: 1.7em; margin-top: 22px; }

/* 엣지 코팅 - 생산 공정 */
.bomy-layer { width: 600px; position: absolute; right: 0; bottom: -100px; }
.bomy-layer .layer01, .bomy-layer .layer02, .bomy-layer .layer03, .bomy-layer .layer04, .bomy-layer .layer05, .bomy-layer .layer06 {position: absolute;bottom: 0;-webkit-transition: -webkit-transform .5s;transition: -webkit-transform .5s;transition: transform .5s;transition: transform .5s, -webkit-transform .5s;}
.bomy-layer .layer02, .bomy-layer .layer03, .bomy-layer .layer04, .bomy-layer .layer05, .bomy-layer .layer06 { bottom: 0; }
.bomy-layer img.shadow { position: absolute; bottom: -13px; left: -32px; }
.bomy-layer .layer01 .shadow { bottom: 6px; }
.bomy-layer .layer02 { bottom: 80px; color: #37463a; }
.bomy-layer .layer03 { bottom: 160px; color: #3f4d4e; }
.bomy-layer .layer04 { bottom: 240px; color: #193119; }
.bomy-layer .layer05 { bottom: 320px; color: #371e14; }
.bomy-layer .layer06 { bottom: 420px; color: #07313f; }
.bomy-layer .layer06 img { opacity: 0.9; }
.bomy-layer .layer-text { position: absolute; text-align: left; margin-right: 100%; bottom: -13px; margin-left: -200px; display: flex; font-size: 20px; font-weight: 600; color: #2c2c2c; line-height: 1.7em; width: 195px; align-items: center; gap: 20px; }
.bomy-layer .layer-text .line { flex: 1 1 auto; min-width: 0; width: 1%; height: 1px; border-top: 1px dashed #676767;}
.animate { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation-iteration-count: 1; stroke-opacity:.3; stroke:#000; }
.animate.on { animation: dash 2s linear forwards; }
@keyframes dash {
    top {
        stroke-dashoffset: 0;
    }
}

/* 프로젝트 */
.project-list ul {display:flex; flex-wrap:wrap; margin:0 -20px;}
.project-list ul li {width:33.3333%; padding:0 20px; margin-bottom:50px; text-align:left;}
.project-list ul li.none {width:100%; padding:70px 0; margin:0; text-align:center; color:#767676; border-top: 1px solid #1c1c1c; border-bottom: 1px solid #ddd;}
.project-list ul li a {display:block;}
.project-list ul li .thumb { padding-bottom: 75%; position: relative; overflow: hidden; display: block; border-radius: 8px; }
.project-list ul li .thumb img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
.project-list ul li .tit { margin: 24px 0 2px; font-size: var(--font-size24); font-weight: 600; line-height: 1.58em; color: #2c2c2c; }
.project-list ul li .date { font-size: var(--font-size18); color: #999; line-height: 1.77em; }

/* 자산 STORY */
.story-list { margin-bottom: 50px;}
.story-list ul {display:flex; flex-wrap:wrap; gap: 25px 15px;}
.story-list ul li { width: calc(100%/3 - 10px); }
.story-list ul li.none {width:100%; padding:70px 0; margin:0; text-align:center; color:#767676; border-top: 1px solid #1c1c1c; border-bottom: 1px solid #ddd;}

/* 프로젝트, Story 상세 공통 */
.view-head { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid #1c1c1c; flex-wrap: wrap; gap: 10px; }
.view-head h5 { font-size: var(--font-size20); font-weight: 500; line-height: 1.7em; color: var(--color-primary);}
.view-head h3 { font-size: var(--font-size40); font-weight: 600; line-height: 1.4em; color: #1c1c1c; margin-top: 8px; }
.view-head .date { font-size: var(--font-size20); line-height: 1.7em; font-weight: 500; color: #999; }
.view-head .left .date { margin-top: 30px; }
.project-big-thumb { position: relative; padding-bottom: 56.25%; border-radius: 16px; overflow: hidden; display: block; }
.project-big-thumb img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
.project-view-tit { margin: 60px 0 40px; border-bottom: 1px solid #eee;}
.project-view-tit span { display: inline-block; width: 25%; padding: 20px 10px; position: relative; font-size: var(--font-size20); line-height: 1.7em; font-weight: 600; color: var(--color-primary); text-align: center; }
.project-view-tit span::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: var(--color-primary); }

/* 공지사항 */
.noti-list { border-top: 2px solid #686868;}
.noti-list li { border-bottom: 1px solid #ddd;}
.noti-list li a { display: flex; padding: 40px; position: relative; align-items: center; }
.noti-list li .num { width: 56px; height: 56px; border-radius: 56px; display: flex; align-items: center; justify-content: center; margin-right: 40px; color: var(--color-primary); font-weight: 700; line-height: 1em; }
.noti-list li .num.label { background: var(--color-primary); color: #fff; }
.noti-list li .info { flex: 1 1 auto; min-width: 0; width: 1%; padding-right: 40px; }
.noti-list li .info .tit { line-height: 1.2em; font-size: var(--font-size20); font-weight: 600; color: #222; margin-bottom: 10px; overflow:hidden; text-overflow:ellipsis;  white-space:normal; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; transition: .2s;}
.noti-list li .info .tit img {vertical-align:middle; margin:0 4px 0;}
.noti-list li .info .etc { display: flex; flex-wrap: wrap; gap: 7px 20px;}
.noti-list li .info .etc span { font-size: 14px; font-weight: 300; color: #505050; line-height: 1.3em; }
.noti-list li a::after { content: "→"; position: absolute; right: 40px; top: 50%; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); font-size: 30px; font-weight: 700; color: #777; line-height: 1em; transition: .2s;}
.noti-list li a:hover { background: #F3F7FA;}
.noti-list li a:hover .info .tit { color: var(--color-primary);}
.noti-list li a:hover::after { color: var(--color-primary);}

/* 견적문의 */
.ct-form { padding: 30px 0 50px; border-top: 1px solid #1C1C1C; border-bottom: 1px solid #eee; display: flex; flex-wrap: wrap; gap: 20px 30px;}
.ct-form dl { width: calc(100%/2 - 15px); display: flex; align-items: center;} 
.ct-form dl.w100 { width: 100%; } 
.ct-form dl dt { width: 110px; line-height: 1.6em; color: #2c2c2c; font-weight: 600; }
.ct-form dl dt .required { color: var(--color-primary);}
.ct-form dl dd { flex: 1 1 auto; min-width: 0; width: 1%; }
.ct-form dl dd .input { width: 100%; padding: 15px 20px; border: none; border-radius: 8px; background-color: #f6f6f6; font-weight: 500; height: 60px; }
.ct-form dl dd select { color: #a8a8a8;}
.ct-form dl dd .input::placeholder { color: #a8a8a8; }
.file-upload {display:flex; height:60px; }
.file-button {display:flex; justify-content:center; align-items:center; height:100%; padding:0 20px; border:0; border-radius:8px 0 0 8px; background:#505050; color:#fff; cursor:pointer;}
.file-button:hover {background:#2c2c2c;}
.file-name {flex:1 1 auto; min-width:0; width:1%; display:flex; align-items:center; height:100%; padding:0 20px;  border-radius:0 8px 8px 0; background: #f6f6f6; color: #a8a8a8; }

/* 기술지원 */
.sub5-tab { display: flex; gap: 4px; flex-wrap: wrap;}
.sub5-tab li { width: auto;}
.sub5-tab li a { display: inline-block; padding: 12px 24px; font-size: var(--font-size18); font-weight: 600; line-height: 1.77em; color: #676767; border-radius: 35px; border: 1px solid #eee; }
.sub5-tab li.active a,
.sub5-tab li a:hover { color: var(--color-primary); border-color: var(--color-primary); }
.tab-pane { display: none; }
.tab-pane.active { display: block;}

/* 연락처 */
.contact-info { border-radius: 8px; background: #F9F9F9; display: flex; margin-bottom: 80px; }
.contact-info dl { padding: 24px 40px; display: flex; align-items: center; justify-content: space-between; width: calc(100%/2); position: relative; }
.contact-info dl::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; width: 1px; height: 24px; background: #dfdfdf; }
.contact-info dl:last-child::after { display: none; }
.contact-info dt { font-size: var(--font-size18); font-weight: 500; line-height: 1.66em; }
.contact-info dd { font-size: var(--font-size32); font-weight: 600; line-height: 1.43em; color: #2c2c2c; }
.contact-txt { margin-bottom: 40px; }
.contact-txt p { font-size: var(--font-size18); line-height: 1.77em; }
.contact-txt p::before { top: 13px; }
.contact-tit { font-size: var(--font-size20); margin-bottom: 20px; }
.contact-tit::before { top: 7px; }
.contact-list .item { display: flex; gap: 3px; flex-wrap: wrap; margin-bottom: 3px; }
.contact-list .item:last-child { margin-bottom: 0; }
.contact-list .item>div { width: calc(100%/3 - 2px); padding: 16px 10px; border-radius: 8px; border: 1px solid #EEE; background: #FFF; text-align: center; font-size: var(--font-size18); font-weight: 400; line-height: 1.66em; color: #676767; }
.contact-list .item .name { background: #f6f6f6; color: #2c2c2c; font-weight: 500; }
.contact-list .item .name span { color: #999; display: inline-block; padding-left: 10px; }
.contact-list .item .tel { padding: 0; }
.contact-list .item .tel a { display: block; padding: 16px 10px;}
.contact-flex { display: flex; gap: 28px; flex-wrap: wrap;}
.contact-flex>div { width: calc(100%/2 - 14px); }
.contact-bg { padding: 60px; border-radius: 16px; background: url(../images/sub/sub5-3-img.jpg) center no-repeat; background-size: cover; color: #fff; }
.contact-bg .subtit { color: #fff; padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid rgba(255, 255, 255, 0.10); }
.contact-bg .jum-txt p { color: #dfdfdf; font-size: var(--font-size18); font-weight: 500; line-height: 1.77em; }
.contact-bg .jum-txt p::before { top: 14px; }

/* 하이라이트 제품 */
.highlight-wrap { border-top: 1px solid #2c2c2c; }
.highlight-wrap .item { display: flex; align-items: center; padding: 20px 0; border-bottom: 1px solid #eee;}
.highlight-wrap .item>div { width: calc(100%/2);}
.highlight-wrap .item .info { padding-right: 20px; }

/* 제품셍산이력시스템 */
.gs-process-fx { display: flex; align-items: center; gap: 50px; margin-bottom: 40px; flex-wrap: wrap;}
.gs-process-fx>div { width: calc(100%/2 - 25px);}
.gs-process-fx .img { position: relative; border-radius: 8px; overflow: hidden; color: #fff; }
.gs-process-fx .img .abbox { position: absolute; left: 0; bottom: 0; padding: 30px; }
.gs-process-fx .img .abbox .tt { font-size: var(--font-size24); font-weight: 600; line-height: 1.58em; margin-bottom: 16px; }
.gs-process-fx .img .abbox .txt { font-size: var(--font-size18); line-height: 1.55em; color: rgba(255,255,255,0.8);}
.gs-process-fx .info p { font-size: var(--font-size20); line-height: 1.7em; }