div, p, span, h1, h2, tr, td {word-break: keep-all;}





.sub_visual_new { padding: 100px 0; }
.sub_visual2 img { width: 100%; }
.brand_color { color: #0d3573!important; }
.brand_color02 { color: #d60000!important; }
.wrap_wid_1400 { width: 100%; max-width: 1400px; margin: 0 auto; }
.pd100 { padding: 100px 0; }
.pd150 { padding: 150px 0; }



/* red_btn */
.cta_btn_all_wrap { padding: 100px 0 150px 0; }
.cta_btn_wrap { margin: 0 auto; display: flex; justify-content: center; align-items: center; }
.cta_btn_wrap a { font-size: 20px; position: relative; overflow: hidden; padding: 20px 24px; border-radius: 8px; background: #d60000; color: #fff; text-decoration: none; transition: background-color 0.3s ease; display: flex; gap: 10px; align-items: center; }
.cta_btn_wrap a::before { content: ""; position: absolute; top: 0; left: -120%; width: 120%; height: 100%; background: linear-gradient( 120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 100% ); transition: left 0.6s ease; }
.cta_btn_wrap a:hover::before { left: 120%; }
.cta_btn_wrap a:hover { background: #b80000; }
.bredcrumb_wh * { color: #fff; }
.bredcrumb_wh { display: flex; gap: 10px; align-items: center; }
.sub_con_title { padding: 20px 0; border-bottom: 1px solid #999; font-size: 36px; font-weight: 700; }



/* sub_02_01 */
.cladding .sub_sec_01 .sub_txt { display: grid; grid-template-columns: 3fr 7fr; }
.cladding .sub_sec_02 { background: url(../images/sub/sub_02_01_con_bg.png) no-repeat top center/cover; padding: 100px 0; }
.cladding .sub_sec_02 .sub_sec_in { display: grid; grid-template-columns: repeat(4,1fr); gap: 30px; margin: 0 auto; }
.cladding .sub_sec_02 .sub_sec_in .sub_sec_in_con { display: flex; flex-direction: column; align-items: center; }



/* sub_02_02 */
.engineering .sub_sec_01 .sub_txt { display: grid; grid-template-columns: 3fr 7fr; }
.engineering .sub_sec_02 .sub_sec_in { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; }
.engineering .sub_sec_02 .sub_sec_in_con_01 { border-radius: 40px; overflow: hidden; }
.engineering .sub_sec_02 .sub_sec_in_con_01 img { object-fit: cover; height: 100%; }
.engineering .sub_sec_in_con_02_in { border-top: 1px solid #000; }
.engineering .sub_sec_in_con_02_01 { display: flex; gap: 30px; align-items: center; padding: 20px 40px; border-bottom: 1px solid #000; }





/* sub_03_00 */
.product { padding: 250px 0 150px 0; }
.product .main_collection .cont_box { padding-top: 100px; }


/* sub_03_01*/
.kale .subPageWrap { min-height: 100vh; background: linear-gradient(to bottom, rgba(255,255,255,0) 80%, #fff 0%), url(../images/sub/sub_03_01_sub_visual.png) no-repeat center top / cover; }
.kale .sub_visual_con { padding: 200px 0 0 0; }
.kale .sub_visual_con_tit { display: flex; justify-content: space-between; }
.kale .sub_visual_con_des { display: flex; justify-content: space-between; }
.kale .sub_feature_all_wrap { padding: 40px 0; }
.kale .sub_feature_wrap { display: grid; grid-template-columns: repeat(2,1fr); gap: 80px 40px; }
.kale .sub_feature_icon { background: #f1f1f1; min-width: 100px; min-height: 100px; border-radius: 16px; }
.kale .sub_feature { display: flex; gap: 30px; align-items: center; }
.kale .sub_certificate_all_wrap { position: relative; padding: 40px 0 80px; overflow: hidden; }
.kale .sub_certificate_all_wrap img { width: 100%; display: block; }
.kale .sub_certificate_all_wrap .owl-nav { position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; gap: 14px; margin-top: 0; }
.kale .sub_certificate_all_wrap .owl-nav button { width: 60px; height: 60px; border-radius: 999px; background: #f3f3f3; border: 0; font-size: 0; line-height: 1; cursor: pointer; }
.kale .sub_certificate_all_wrap .owl-nav button:hover { background: #e9e9e9; }
.kale .sub_certificate_all_wrap .owl-prev::before, .kale .sub_certificate_all_wrap .owl-next::before { font-family: xeicon; font-size: 20px; color: #555; line-height: 44px; display: block; text-align: center; transform: translateY(-11px); }
.kale .sub_certificate_all_wrap .owl-next::before { content: "\e93b"; }
.kale .sub_certificate_all_wrap .owl-prev::before { content: "\e93e"; }


/* 시공상세도 */
.kaleStage_inner { position: relative; width: 100%; height: 800px; border-radius: 8px; overflow: hidden; background: #cfc9bc; }
.kaleStage_center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.kaleStage_center img { /* max-width: 90%; */
    height: auto; display: block; /* margin-bottom: 80px; */
}
.kaleStage_leftTabs { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 999px; background: rgba(255,255,255,.55); backdrop-filter: blur(6px); }
.kaleStage_leftTabs .ltab { width: 54px; height: 54px; border-radius: 999px; border: 0; background: rgba(255,255,255,.9); cursor: pointer; }
.kaleStage_leftTabs .ltab.is-active { background: #0f2240; color: #fff; }
.kaleStage_bottomTabs { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; gap: 8px; padding: 10px; border-radius: 999px; background: rgba(255,255,255,.55); backdrop-filter: blur(6px); }
.kaleStage_bottomTabs .btab { min-width: 64px; height: 38px; padding: 0 14px; border-radius: 999px; border: 0; background: rgba(255,255,255,.9); cursor: pointer; }
.kaleStage_bottomTabs .btab.is-active { background: #0f2240; color: #fff; }






/* 색상표 */
 .kaleTabWrap { display: flex; gap: 40px; align-items: flex-start; }
 .kaleTabSide { width: 260px; flex: 0 0 260px; }
 .kaleTabSideBox { background: #fff; border-radius: 8px; padding: 18px 14px; position: sticky; top: 120px; background: #fafafa; }
 .kaleAcc { display: flex; flex-direction: column; }
 .kaleAccItem { border-bottom: 1px solid #e8e8e8; overflow: hidden; }
 .kaleAccItem:last-child{border: none;}
 .kaleAccHead { width: 100%; text-align: left; padding: 16px; border: 0; background: transparent; cursor: pointer; font-size: 18px; color: #777; border-radius: 6px; display: flex; align-items: center; justify-content: space-between; }
 .kaleAccHead.is-active { color: #000; font-weight: 700; }
 .kaleAccItem.is-open .kaleAccHead i { transform: rotate(180deg); }
 .kaleAccBody { display: none; padding: 6px 6px 12px; }
 .kaleAccItem.is-open .kaleAccBody { display: block; }
 .kaleAccSub { width: 100%; text-align: left; padding: 8px 12px; border: 0; background: transparent; cursor: pointer; font-size: 16px; color: #777; border-radius: 6px; }
 .kaleAccSub.is-active { color: #111; font-weight: 600; }
 .kaleDownBtn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; margin-top: 16px; border-radius: 8px; background: #0f2240; color: #fff; text-decoration: none; font-size: 16px; }
 .kaleTabContent { flex: 1; min-width: 0; }
 .kalePane { display: none; }
 .kalePane.is-active { display: block; }
 .kaleHead { margin-bottom: 22px; }
 .kaleTitle { font-size: 22px; font-weight: 800; color: #111; }
 .kaleTitle span { margin: 0 8px; color: #999; font-weight: 300; }
 .kaleDesc { margin-top: 20px;  }
 .kaleGrid { display: grid; grid-template-columns: repeat(5,1fr); gap:30px 16px; }
 .kaleCard { text-decoration: none; color: inherit; }
 .kaleThumb { width: 100%; aspect-ratio: 16/7; border-radius: 2px; background: #eee no-repeat center/cover; }
 .kaleName { margin-top: 10px; color: #222; font-size: 16px; font-weight: 700;}
 .kaleHead_img_wrap{display: grid; grid-template-columns:2fr 3fr ; gap: 20px;}
 .kaleHead_img {overflow: hidden; border-radius: 16px;}
 .kaleHead_img img{width: 100% ; height: 100%; object-fit: cover;}
@media (max-width:1200px) {
     .kaleGrid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width:900px) {
     .kaleTabWrap { flex-direction: column; }
     .kaleTabSide { width: 100%; flex: 0 0 auto; }
     .kaleTabSideBox { position: static; }
     .kaleGrid { grid-template-columns: repeat(2,1fr); }
}





/* sub_03_02*/
.panel .subPageWrap { min-height: 100vh; background: linear-gradient( to bottom, #fff 60%, rgba(255,255,255,0) 40% ), url(../images/sub/sub_03_02_sub_visual.png) no-repeat center bottom / cover; }
.panel .sub_sec_01 {display: flex; flex-direction: column; align-items: center;}
.panel .bace_sub_sec_01_in {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px;} 
.panel .bace_sub_sec_01_in_con {padding: 40px; border-radius: 20px; background: #f1f1f1; transition: 0.5s;}
.panel .bace_sub_sec_01_in_con * {transition: 0.5s;}
.panel .bace_sub_sec_01_in_con .bace_sub_sec_01_in_img { display: flex; justify-content: flex-end; padding-bottom: 100px; }
.panel .bace_sub_sec_01_in_con:hover * {color: #fff;}
.panel .bace_sub_sec_01_in_con01:hover{background: url(../images/sub/bace_03_bg_01.jpg)no-repeat center center/cover;}
.panel .bace_sub_sec_01_in_con02:hover{background: url(../images/sub/bace_03_bg_02.jpg)no-repeat center center/cover;}
.panel .bace_sub_sec_01_in_con03:hover{background: url(../images/sub/bace_03_bg_03.jpg)no-repeat center center/cover;}


@media (max-width:1920px) {.panel .subPageWrap { min-height: 120vh; background: linear-gradient( to bottom, #fff 60%, rgba(255,255,255,0) 00% ), url(../images/sub/sub_03_02_sub_visual.png) no-repeat center bottom / cover; }}



.panel .sub_sec_02 img{object-fit: contain;}
.panel .sub_visual_con { padding: 200px 0 0 0; }
.panel .sub_visual_con_tit { display: flex; justify-content: space-between; }
.panel .sub_visual_con_des { display: flex; justify-content: space-between; }
.panel .sub_feature_all_wrap { padding: 40px 0; }
.panel .sub_feature_all_wrap { padding: 40px 0; }
.panel .sub_feature_wrap { display: grid; grid-template-columns: repeat(2,1fr); gap: 80px 40px; }
.panel .sub_feature_icon { background: #f1f1f1; min-width: 100px; min-height: 100px; border-radius: 16px; }
.panel .sub_feature { display: flex; gap: 30px; align-items: center; }




/* 구성도 */
.panel .panelTabWrap { display: flex; gap: 40px; align-items: center; }
.panel .panelTabs { width: 220px; display: flex; flex-direction: column; gap: 10px; }
.panel .panelTabs .ptab { width: 100%; height: 50px; border-radius: 999px; border: 0; background: #f2f2f2; color: #555; text-align: center; font-size: 18px; padding: 0 16px; cursor: pointer; }
.panel .panelTabs .ptab.is-active { background: #0f2240; color: #fff; }
.panel .panelView { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; }
.panel .panelView img { width: auto; height: 40vh; display: block; }

/* 설치방법 */
.panel .stepFlow { display: flex; align-items: stretch; gap: 0; border-radius: 28px; overflow: hidden; background: #0f2240; }
.panel .stepCard { flex: 1; padding: 60px; color: #fff; min-height: 170px; position: relative; }
.panel .stepCard.s1 { background: #0b1f3a; }
.panel .stepCard.s2 { background: #0d3a73; }
.panel .stepCard.s3 { background: #2f66b5; }
.panel .stepTop { font-size: 18px; font-weight: 600; opacity: .65; letter-spacing: .02em; margin-bottom: 10px; }
.panel .stepTit { font-size: 30px; font-weight: 800; line-height: 1.15; margin-bottom: 14px; }
.panel .stepDesc { font-size: 18px; line-height: 1.7;font-weight: 300;  }

.panel .stepArrow { width: 0; position: relative; flex: 0 0 0; display: flex; align-items: center; justify-content: center; z-index: 2; }
.panel .stepArrowIn { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 54px; height: 54px; border-radius: 999px; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 22px rgba(0,0,0,.18); }
.panel .stepArrowIn i { font-size: 26px; color: #0f2240; }

@media (max-width:900px) {
    .panel .stepFlow { flex-direction: column; border-radius: 18px; }
    .panel .stepArrow { width: 100%; height: 0; }
    .panel  .stepArrowIn { position: relative; left: auto; top: auto; transform: none; margin: -18px auto; width: 48px; height: 48px; }
    .panel .stepArrowIn i { transform: rotate(90deg); }
    .panel .stepCard { padding: 26px 22px 22px; min-height: auto; }
    .panel  .stepTit { font-size: 22px; }
}














/* sub_03_03*/

.terracotta .sub_visual_con { padding: 200px 0 0 0; }
.terracotta .sub_visual_con_tit { display: flex; justify-content: space-between; }
.terracotta .sub_visual_con_des { display: flex; justify-content: space-between; }
.terracotta .sub_feature_all_wrap { padding: 40px 0; }
.terracotta .sub_sub_visual {width: 100%;}
.terracotta .sub_sub_visual img {width: 100%; object-fit: cover;}



.terracotta .sub_con_tab_wrap_all{display:flex;flex-wrap:wrap;align-items:center;}
.terracotta .sub_con_tab_wrap_all .sub_con_s_tit{width:50%;}
.terracotta .sub_con_tab_wrap_all .sub_con_tab_wrap{width:50%;overflow:hidden;}
.terracotta .sub_con_tab_wrap_all .sub_con_tab_wrap .tab-swiper{width:100%;}
.terracotta .sub_con_tab_wrap{border-radius:100px;background-color:#eee;}
.terracotta .sub_con_tab_wrap .tab-swiper .swiper-wrapper{display:flex;justify-content:center;}
.terracotta .sub_con_tab_wrap .tab-swiper .swiper-slide{flex:1;flex-shrink:0;}
.terracotta .sub_con_tab_wrap .tab-swiper .swiper-slide a{display:block;text-decoration:none;}
.terracotta .sub_con_tab_wrap .tab a .sub_con_tab{padding:30px;display:block;cursor:pointer;transition:all 0.3s;text-align:center;color:#777;white-space:nowrap;transition:all 0.3s ease;}
.terracotta .sub_con_tab_wrap .tab.active{border-radius:100px;background-color:#d60000;}
.terracotta .sub_con_tab_wrap .tab.active a .sub_con_tab{font-weight:700;color:#fff;}


.terracotta .sub_feature_all_wrap { padding: 40px 0; }
.terracotta .sub_feature_wrap { display: grid; grid-template-columns: repeat(2,1fr); gap: 80px 40px; }
.terracotta .sub_feature_icon { background: #f1f1f1; min-width: 100px; min-height: 100px; border-radius: 16px; }
.terracotta .sub_feature { display: flex; gap: 30px; align-items: center; }






/* sub_03_03_01*/
.exagres .sub_visual_con { padding: 200px 0 0 0; }
.exagres .sub_visual_con_tit { display: flex; justify-content: space-between; }
.exagres .sub_visual_con_des { display: flex; justify-content: space-between; }
.exagres .subPageWrap {position: relative; min-height: 100vh; background: linear-gradient( to bottom, #fff 65%, rgba(255,255,255,0) 40% ), url(../images/sub/sub_03_03_01_sub_visual.png) no-repeat center bottom / cover; }

@media (max-width:1920px) {.exagres .subPageWrap { min-height: 120vh; background: linear-gradient( to bottom, #fff 70%, rgba(255,255,255,0) 00% ), url(../images/sub/sub_03_03_01_sub_visual.png) no-repeat center bottom / cover; }}

.exagres .subPageWrap::after { content: ''; position: absolute; right: 0; bottom: -13%; width: 30%; height: 75vh; background: url(../images/sub/exagres_01.png) no-repeat center / cover; }
.exagres .sub_visual_con_inner_flex {display: flex; justify-content:space-between; width: 100%;}
.exagres .sub_sec_02_flex {display: flex; justify-content: space-between; align-items: center;}




/* sub_03_04*/


.bace .sub_visual_con { padding: 200px 0 0 0; }
.bace .sub_visual_con_tit { display: flex; justify-content: space-between; }
.bace .sub_visual_con_des { display: flex; justify-content: space-between; }
.bace .sub_sub_visual { width: 100%; transform: translateY(-100px); }
.bace .sub_sub_visual img {width: 100%; object-fit: cover;}
.bace .sub_feature_all_wrap { padding: 40px 0; }
.bace .sub_feature_wrap { display: grid; grid-template-columns: repeat(2,1fr); gap: 80px 40px; }
.bace .sub_feature_icon { background: #f1f1f1; min-width: 100px; min-height: 100px; border-radius: 16px; }
.bace .sub_feature { display: flex; gap: 30px; align-items: center; }
.bace .sub_sec_02_con_flex {display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; padding: 20px 0;}
.bace .sub_sec_02_con_flex_in { height: 600px; border: 1px solid #ececec; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding:20px;}

.bace .sub_sec_02_con_flex_in_img img {height: 560px; object-fit: contain;}
.bace .kalePane1 .kaleGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 16px; }
.bace .kalePane1 .kaleThumb { width: 100%; aspect-ratio: 16 / 10; border-radius: 2px; background: #eee no-repeat center / cover; }

.bace .kalePane2 .kaleGrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 30px 16px; }
.bace .kalePane2 .kaleThumb { width: 100%; aspect-ratio: 10 / 10; border-radius: 2px; background: #eee no-repeat center / cover; }