/**************************************************** header ****************************************************/
.sec-header{position:fixed; top:0; left:0; width: 100%; z-index:9;height: 100px; padding:0 4%; display:flex; align-items:center; justify-content:space-between; transition:all ease .35s;  }
.sec-header a{ font-weight: 600;}   
.sec-header.white a{color: #fff; } 
.sec-header.white .logo{    filter: brightness(0) invert(1);}
.sec-header.white{background-image: linear-gradient(0deg, transparent, rgba(0, 0, 0, 0.2)); } 
.sec-header.white .lang > ul{ background: rgba(0, 0, 0, 0.8);}
.sec-header.white .mo-btn span{background: #fff;}

.scroll-down .sec-header{transform:translateY(-100px) !important;}

.lang {position:relative;}
.lang > a{font-size: clamp(18px,1.3vw,24px); display:flex; gap:12px; align-items:center; font-weight: 500;}
.lang > a:after{content:'↓';   font-size: 13px;}
.lang > ul{position:absolute; left:-20%; width: 140%; top:calc(100% + 10px); padding:10px; border-radius:8px; opacity: 0;   visibility: hidden;     background: #f7f7f7; text-align: center; transition:all ease .35s;}
.lang > ul > li > a{opacity:.6;   padding:3px 0; display:block;  font-size: 14px; }
.lang > ul > li > a:hover,
.lang > ul > li > a.on{opacity:1;}
.lang:hover > ul{opacity:1; visibility:visible;}

.mo-btn{display:none; flex-direction:column; gap:6px; width: 30px; height: 30px; justify-content:center; cursor:pointer;}
.mo-btn span{width: 100%; height: 2px; background: #000; transition:all ease .35s;}
  

/**************************************************** footer ****************************************************/
.sec-footer{position:sticky; bottom:0;background: #F7F7F7; padding:clamp(60px,6.8vw,130px) 4% clamp(30px,3vw,60px); }
.sec-footer .ft-cont{position:relative; display:flex; justify-content:space-between;  border-bottom:1px solid #ddd; padding-bottom: 30px; align-items:flex-end;}
.sec-footer .ft-right{display:flex; flex-direction:column; gap:20px; }
.sec-footer .ft-sns{display:flex; align-items:center; gap:20px; font-size: 1.7em; justify-content:flex-end;}
.sec-footer .ft-info ul{display:flex; flex-wrap:wrap; gap:8px 4%; max-width:760px; margin-top: 40px;}
.sec-footer .ft-info ul li{width: 48%;display:flex;  color: #555;}
.sec-footer .ft-info ul li strong{display:block; flex:0 0 120px;}
.sec-footer .ft-link {display:flex;}
.sec-footer .ft-link a + a{margin-left: 16px;}
.sec-footer .ft-link a:first-child{color: #2E3192; font-weight: 750;}
.sec-footer .ft-copy{text-align:right; color: #666; padding-top: 30px;}
.top-btn{position:sticky; display:block; margin-left:auto; margin-right: clamp(10px,1.6vw,30px); margin-bottom:clamp(10px,1.6vw,30px); bottom:clamp(10px,1.6vw,30px); line-height: 1; z-index:8;background: #2E3192; color: #fff;width: clamp(40px,3vw,60px); height: clamp(40px,3vw,60px); margin-top: -100px; border-radius:10px; border:0; font-size: clamp(20px,1.3vw,24px);  opacity: 0;  pointer-events: none;  transition: opacity .3s ease;}
body.show-top-btn .top-btn {  opacity: 1;  pointer-events: auto;}


/**************************************************** common ****************************************************/
.inner{width: 90%; margin:0 auto; max-width:1600px;} 

.pg_wrap{margin:0 auto; width: 100%; text-align: center; margin-top: clamp(40px,5.2vw,100px); float:none;}
.pg{display:flex; justify-content:center; align-items:center; }
.pg_page, .pg_current{height: 40px; line-height: 1; font-size: 16px; width: 40px;display:flex; justify-content:center; align-items:center;  border-radius:6px; border:0; background-color: transparent;}
.pg_page:hover,
.pg_current{background-color:transparent; color: #2E3192; font-weight: 800;}
.pg_end:hover,
.pg_end{background: url('/images/sub/btn_end.svg') no-repeat center center / 15px;  background-color: #2E3192;   }
.pg_start:hover,
.pg_start{background: url('/images/sub/btn_first.svg') no-repeat center center / 15px;  background-color: #2E3192;  }
.pg_end{margin-left: 10px;}
.pg_start{margin-right: 10px;}


/**************************************************** main ****************************************************/
.main .sec-header{ transform:translateY(-100%);}
.main .sec-header.show{transform:translateY(0);  transition:all ease .6s .6s;}
.main .more-btn{width: clamp(40px,2.6vw,50px); height: clamp(40px,2.6vw,50px); background: #2E3192; color: #fff; border-radius:clamp(40px,2.6vw,50px); display:flex; align-items:center; justify-content:space-between; padding:0 clamp(11px,1vw,16px);   font-weight: 750;  transition:all ease .35s;}
.main .more-btn span{display:inline-block; width:0; overflow:hidden; opacity:0; white-space:nowrap;  transition:all ease .35s;} 
.main .more-btn i{font-size: 1.2em;}
.main .more-btn:hover span{width:auto; opacity:1;}
.main .more-btn:hover {width: 180px; padding:0 24px;}
.main-tit{  margin-bottom: clamp(40px,4vw,80px);}
.main-tit h2{font-size: clamp(24px, 2.5vw, 48px);}
.main-tit p{font-size: clamp(16px, 1vw, 20px); margin-top: 12px;}
.main-tit .stit{position:absolute; left:0; font-size: clamp(14px,1vw,18px); font-weight: 800; margin-top: 10px;} 
.main-tit:has(.stit){position:relative; padding-left: 16%; }
.main-tit .more-btn{margin-top: clamp(20px,2vw,40px); }
 

/* intro */
.main-intro{ width: 100%; height: 100vh;  left:0; top:0;  display:flex; flex-direction:column; align-items:center; justify-content:center; font-size: clamp(25px, 3.5vw, 68px); text-align: center; gap:clamp(10px, 2.1vw, 40px); font-weight: 750;  overflow:hidden; background: #fff; position:relative; z-index:10; }
.main-intro .line{width: 100%; height: 2px; background-image: linear-gradient(90deg, transparent, #000, transparent); }
.main-intro .txt1{margin-right: 40%;     white-space: nowrap;}
.main-intro .txt2{margin-left: 40%;     white-space: nowrap;}   
.main-intro.hide{ visibility:hidden; }     
 
/* visual */
.main-visual {  position: relative;  overflow: hidden;   margin:0 auto; border-radius:clamp(30px,3vw,60px) clamp(30px,3vw,60px) 0 0; width:90%;}
.main-visual .swiper-slide { height: 100vh; position: relative; display: flex;  align-items: center;  justify-content: center;  color: #fff;}
.main-visual .swiper-slide .bg{width: 100%; height: 100%; position:absolute; left:0; top:0; background: #000; z-index:-1;}
.main-visual .swiper-slide .bg img{width: 100%; height: 100%; object-fit:cover; opacity:.9; position:absolute; left:0; top:0;}
.main-visual .swiper-slide .bg .mo_bg{display:none;}
.main-visual .slide-content {padding:0 5%;}
.main-visual .slide-title {opacity:0;  font-size: clamp(30px, 3.5vw, 68px); text-align: center;}    
.main-visual .swiper-pagination {  position: absolute;  left: 0; width:100%; top:auto;   transform: none;  display: flex;  gap: clamp(10px, 2vw, 40px);  z-index: 4;    padding:0 4% clamp(30px,3vw,60px)  ; bottom:-20px; opacity:0;   transition:all .6s .6s ease;}
.main-visual .swiper-pagination .swiper-pagination-bullet { display:flex; flex-direction:column; align-items:flex-start; gap:clamp(10px, 1vw, 20px); width:25%;  max-width:280px; border-radius:0; background: transparent; opacity:1; height:auto; margin:0 !important;} 
.main-visual .swiper-pagination .swiper-pagination-bullet .pag-label { color: #fff; font-size: clamp(12px, 1vw, 16px); line-height: 1;  text-align:left; word-break: break-all;}  
.main-visual .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { }
.main-visual .swiper-pagination .progress{position:relative; width: 100%; height: 2px; background: rgba(255,255,255,0.4);}
.main-visual .swiper-pagination .progress span {  position: absolute;  left: 0;  top: 0;  height: 100%;width: 0%;  background: #fff;   z-index: 1;} 
.main-visual.show .slide-title{ opacity:1; transition:all .6s .6s ease; }
.main-visual.show .swiper-pagination{ opacity:1; bottom:0;} 


/* product */
.main-product { position:relative; z-index:0; background: #000; opacity:0;} 
.main-product.show{opacity:1;}
.main-product .pn-nav{position:fixed; left:4%; top:clamp(15vh,30vw,30%); z-index:2; font-size: clamp(12px, 1vw, 14px); }
.main-product .pn-nav > a{color: #fff; font-weight: 750; border-bottom:1px solid #fff; margin-top: 30px; display:block;  margin-left: 20px;} 
.main-product .pn-nav-list a{position:relative; color: rgba(255,255,255,0.5); padding:3px 0; display:block;  padding-left: 20px;}
.main-product .pn-nav-list a.active { color: #fff;}
.main-product .dot{display:block; width: 12px; height: 12px; border:1px solid #fff; border-radius:50%; position:absolute; left:0; top:6px; transition: top 0.3s ease;}
.main-product .panel {  position: relative;   height: 100vh;   top: 0;  width: 100%;     text-align: center; } 
.main-product .parallax {overflow:hidden;  position: fixed; width: 100%; height: 100%;   top:0; left:0;  background-position: center;  background-repeat: no-repeat;  background-size: cover;   color: #fff; }
.main-product .parallax1 {  background-image: url("/images/main_door.jpg"); } 
.main-product .parallax2 {  background-image: url("/images/main_showerbooth.jpg"); } 
.main-product .parallax3 {  background-image: url("/images/main_furniture.jpg"); } 
.main-product .parallax4 {  background-image: url("/images/main_commercal.jpg"); }
.main-product .parallax5 {  background-image: url("/images/main_residential.jpg"); height:calc(100vh + 100px); }
.main-product .pn-text { font-family: "Libre Caslon Display", serif; text-align:left; line-height: 1;  font-size: clamp(50px, 8vw, 160px);   position: fixed;  bottom:clamp(30px,3vw,60px);  left: 4%;  }
.main-product .pn-prd {max-width:clamp(160px, 22vw, 420px);  width: 100%;  position:fixed; right:10%; top:50%; transform:translateY(-40%);}
.main-product .pn-prd .thumb a{display:flex; align-items:flex-end; width: 100%; aspect-ratio:420 / 568;  background-repeat:no-repeat;     background-size: cover; background-position:center center; border:3px solid #fff; padding:clamp(12px,1.3vw,24px); }
.main-product .pn-prd p{   margin-top: clamp(15px,2vw,30px); font-weight: 500;}
.main-product .pn-prd .more-btn{font-size: 14px;}

/* project */
.main-project{background: #fff; border-radius:clamp(40px,5vw,100px) clamp(40px,5vw,100px) 0 0; padding: clamp(60px,10vw,200px) 5%;  position:relative; z-index:2; margin-top: clamp(-100px,-5vw,-40px);} 
.main-project .more-btn{background: #fff; color: #000; border:1px solid #e8e8e8;} 
.main-project .project-slider{height:calc(100vh - 100px); display:flex; gap:20px;  }
.main-project .project-slider .left-slider{position:relative; width: 32%; border-radius:clamp(20px,1.7vw,32px); overflow:hidden; background: #EAE4DF; text-align: center; display:flex; justify-content:center;align-items:center;} 
.main-project .project-slider .caption{font-size: clamp(14px,1vw,18px); font-weight: 750; position:absolute; left:0; top:clamp(24px,3vw,60px); width: 100%;}
.main-project .project-slider .right-slider{width: 68%; border-radius:clamp(20px,1.7vw,32px); overflow:hidden;}
.main-project .project-slider .image-area{ height: 100%; }
.main-project .project-slider .image-area .imageSwiper{height:100%;}
.main-project .project-slider .image-area .imageSwiper img{width: 100%; height: 100%; object-fit:cover;}
.main-project .project-slider .title-area{height: 100%;  width: 100%; text-align: center;   display: flex;  align-items: center;   justify-content: center;}
.main-project .titleSwiper{ height: clamp(243.3px,17.4vw,334px); width: 100%;     overflow: visible; }  
.main-project .titleSwiper .swiper-wrapper{  gap:40px;  } 
.main-project .titleSwiper .swiper-slide{color: #C1BCB8; font-size: clamp(28px, 2.5vw, 48px); font-weight: 750; height: clamp(42px,3.75vw,72px) !important;     display: flex; align-items: center;   justify-content: center; opacity:0; transition:all ease .35s;}
.main-project .titleSwiper .swiper-slide dl{opacity:0; height:0; transition:all ease .35s; display:flex;   line-height: .8; justify-content:center;  font-size: 16px; font-weight: 600;}
.main-project .titleSwiper .swiper-slide dl dd{margin-left: 10px; padding-left: 10px; border-left:1px solid #C1BCB8;}
.main-project .titleSwiper .swiper-slide-active{color: #000;  height: clamp(79.3px,6vw,110px) !important;   } 
.main-project .titleSwiper .swiper-slide-active dl{ opacity:0.4; height: 12px;  margin-top: 16px;  } 
.main-project .titleSwiper .swiper-slide-next,
.main-project .titleSwiper .swiper-slide-prev,
.main-project .titleSwiper .swiper-slide-active{opacity:1;} 
.main-project .pagination-area{position:absolute; left:0; width: 100%; bottom:clamp(20px,2vw,40px); }
.main-project .paginationSwiper .swiper-wrapper{ }
.main-project .paginationSwiper {  width: 100%;  overflow: visible;}
.main-project .paginationSwiper .swiper-slide {  width: auto;  font-size: 14px;  padding: clamp(10px, 1vw, 15px)  ;  white-space: nowrap;  cursor: pointer;   /  transition: transform 0.3s, color 0.3s;  color: #C1BCB8;}
.main-project .paginationSwiper .swiper-slide-active {  font-weight: 750;  color: #000;  }


/* catalog */
.main-catalog{padding:0 4%;}
.main-catalog .main-tit{text-align: center; }
.main-catalog .catalog-cont > ul{display:flex; gap:20px; height: 560px; }
.main-catalog .catalog-cont > ul > li{border-radius:clamp(20px,1.7vw,32px); background: #000; flex:1; padding:clamp(30px,3vw,60px); color: #fff; position:relative; font-size: clamp(12px,1vw,14px); font-weight: 800; background-size:cover; background-repeat:no-repeat; background-position:center center;}
.main-catalog .catalog-cont > ul > li .more-btn{position:absolute; right:clamp(30px,3vw,60px); bottom:clamp(30px,3vw,60px);}
.main-catalog .catalog-cont > ul > li h3{font-size: clamp(20px,1.5vw,28px); margin-top: clamp(20px,2vw,32px);}
.main-catalog .catalog-cont > ul > li:first-child{flex:0 0 50%;}
.main-catalog .catalog-cont > ul > li:nth-child(1){background-image:url('/images/main_catalog_bg01.jpg');}
.main-catalog .catalog-cont > ul > li:nth-child(2){background-image:url('/images/main_catalog_bg03.jpg');}
.main-catalog .catalog-cont > ul > li:nth-child(3){background-image:url('/images/main_catalog_bg02.jpg');}
 
/* partners */
.main-partners{padding:clamp(60px,10vw,200px) 0;}
.main-partners .main-tit{text-align: center;  }
.main-partners .partnerSwiper .swiper-wrapper { transition-timing-function: linear ; } 
.main-partners .partnerSwiper .swiper-slide{ border:1px solid #e5e5e5; aspect-ratio: 220 / 70; border-radius:10px;  overflow:hidden; }
.main-partners .partnerSwiper .swiper-slide img{width: 100%; height: 100%; object-fit:contain;}

/* banner */
.main-banner{padding:0 4% clamp(30px,3vw,60px);  }
.main-banner .banner-cont{padding:clamp(30px,6vw,120px); background: url('/images/main_banner.jpg') no-repeat center center / cover; border-radius:clamp(20px,1.7vw,32px); color: #fff;}
.main-banner .main-tit{margin-bottom: 0;}
.main-banner .main-tit h2{font-size: clamp(20px,2vw,40px);}
.main-banner .more-btn {width: 180px;   padding: 0 30px; background: rgba(0,0,0,0.1); backdrop-filter:blur(10px); color: #fff;   height: clamp(50px,3vw,60px);  font-size: clamp(14px,1vw,18px); margin-top: clamp(30px,3vw,60px);} 
.main-banner .more-btn:hover{padding:0 30px; }
 

/**************************************************** board ****************************************************/
/* btn */ 
a.btn, .btn{width: auto; font-size: clamp(15px,1vw,16px); background: #fff; border:1px solid #2E3192; color: #2E3192; border-radius:4px; padding:0 30px; line-height: 1; height:50px; display:flex; align-items:center; gap:10px;}
a.btn i, .btn i{ font-size: 1.4em;  }
a.btn:hover, .btn:hover{background: #fff; color: #2E3192;}


/* board */
#container textarea,
#container .textarea{padding:15px; border:1px solid #ddd; border-radius:10px; font-size: clamp(14px,1vw,18px); height: clamp(200px,15vw,300px);color: #000; overflow-y:auto;}
#container select, 
#container input[type=text]{padding:15px; border:1px solid #ddd; border-radius:10px; font-size: clamp(14px,1vw,18px); height: clamp(50px,3vw,60px); color: #000;}
#bo_w .bo_w_flie .frm_file{margin:0;}
#container select{padding-right: 45px;background: url('/images/ico_down.svg') no-repeat center right 15px;    appearance: none; -webkit-appearance: none;    -moz-appearance: none;  }
#bo_w .bo_w_flie .lb_icon,
#bo_w .bo_w_link label { height:60px;line-height:58px;width:60px; }
#bo_w .bo_w_flie .file_wr{height: 60px; display:flex; align-items:center;}
#bo_w .bo_w_tit #btn_autosave{font-size: 14px; top:14px; padding:0; right:20px;}

#bo_cate{margin:0 0 clamp(40px,3.6vw,70px);}
#bo_cate ul{display:flex; flex-wrap:wrap; gap:clamp(5px,0.5vw,10px);}
#bo_cate ul li{display:block; padding:0;}
#bo_cate a{display:flex; align-items:center; justify-content:center; height:clamp(40px,3vw,60px); padding:0 clamp(20px,2vw,40px);  text-align: center; font-size: clamp(15px,1vw,18px); border-radius:100px; font-weight: 500; transition:all ease .35s; background: #f9f9f9;  color: #aaa; border:0;}
#bo_cate a:focus, #bo_cate a:hover, #bo_cate a:active,
#bo_cate #bo_cate_on{background: #2E3192;  border:0;color: #fff; font-weight: 750; text-align: center; box-shadow:none;}

 

body:has(#bo_v,#bo_w) .sub-visual{display:none;}
#bo_w,
#bo_v{margin-top: clamp(50px,8.3vw,160px); margin-bottom: 0;}
#bo_v header{text-align: center; padding : 0 0 clamp(30px,3vw,60px);     border-bottom:1px solid #e5e5e5; margin-bottom: 40px;}
#bo_gall #gall_ul{margin:0;}
#bo_gall .gall_con{padding:40px 0;  display:flex; gap:80px;}
#bo_gall .gall_li{padding:0; border-bottom:1px solid #e5e5e5; }
#bo_gall .gall_li:first-child .gall_con{padding-top: 0;}
#bo_gall .gall_li .gall_chk{padding:0;}
.chk_box input[type="checkbox"] + label span{left:0;}
.all_chk.chk_box input[type="checkbox"] + label span{top:3px;}
#bo_gall .gall_img{aspect-ratio: 433 / 292;   max-width: 433px; border:0; background-color: #eee;}
#bo_gall .gall_img a{width: 100%; height: 100%;}
#bo_gall .gall_img img{width: 100%; height: 100%; object-fit:cover;}
#bo_gall .gall_text{width:calc(100% - 513px); }
#bo_gall .gall_box{margin:0;}
#bo_gall .bo_tit{font-size: clamp(22px,1.5vw,28px); margin-top: clamp(12px,1.3vw,24px); line-height: 1.5;     overflow: hidden;    text-overflow: ellipsis;    white-space: nowrap;}
#bo_gall .bo_cnt{color: #666; font-size: clamp(15px,1vw,18px); margin-top: clamp(10px,1.3vw,24px);     display: -webkit-box;    -webkit-line-clamp: 2; /* 두 줄 */    -webkit-box-orient: vertical;    overflow: hidden;    text-overflow: ellipsis;  line-height: 1.5;}
#bo_gall .gall_info .gall_date{margin:clamp(10px,2.6vw,50px) 0 0;}
.bo_v_cate,
.bo_cate_link{display:inline-block; padding:6px 16px; line-height: inherit; border-radius:4px; height:auto; font-size: clamp(14px,1vw,16px); font-weight: 600;     background:#F2EFEC; color: #6B543D; font-weight: 600 !important;}
#bo_v_title .bo_v_tit{margin:clamp(16px,1.6vw,30px) 0; font-size: clamp(24px,2vw,40px);}
#bo_w .btn_confirm{float:none; display:flex; justify-content:center; margin:clamp(30px,3vw,60px) 0 0; gap:10px;} 
#bo_v_con{font-size: clamp(16px,1vw,18px); min-height:auto; padding-bottom: clamp(40px,3vw,60px); border-bottom:1px solid #e5e5e5;}
#bo_v_con iframe{width: 100%;    aspect-ratio: 1600 / 823; height:auto;}
.bo_v_com{float:none; display:flex; justify-content:center; margin:clamp(30px,3vw,60px) 0 0; gap:10px;} 
.bo_v_com > li{margin:0;} 
.bo_v_nb{margin:0; display:flex; justify-content:space-between; gap:10%; font-size: clamp(14px,1vw,18px);}
.bo_v_nb li{border:0; width: 45%; display:flex; gap:10px; padding:0;}
.bo_v_nb li a{width:calc(100% - 100px);    overflow: hidden;    text-overflow: ellipsis;    white-space: nowrap; color: #666;}
.bo_v_nb li .nb_tit{padding:0; width: 100px; color: #000; font-weight: 700; display:flex; align-items:center;}
.bo_v_nb li i{font-size: 1.4em; color: #000;}
.bo_v_nb li:last-child{border:0; text-align:right; margin-left: auto;     justify-content: flex-end;}
.bo_v_nb li:last-child .nb_tit{justify-content:flex-end;}
.bo_v_nb li:hover{background: none;}
.bo_v_nb:after{display:none;}
.btn_bo_user{font-size: 1.4em;}

.more_opt{border-color:#e5e5e5;}
.more_opt:before{border-color: transparent transparent #e5e5e5 transparent;}
.more_opt li button, .more_opt li a{font-size: 14px; display:flex; justify-content:center; align-items:center; gap:5px;}

 



/**************************************************** sub ****************************************************/
.container-wr {padding:clamp(70px,5.2vw,100px) 0 clamp(90px,8.3vw,160px);}
.container-wr .page-tit{font-size: clamp(20px, 2.5vw, 48px); font-weight: 750; margin-bottom: clamp(30px,5.2vw,100px);} 
 

/* sub visual */
.sub-visual{position:relative; width: 100%; height: 100vh; background-repeat:no-repeat ; background-size:cover; background-position:center center; display:flex; align-items:center; justify-content:center; color: #fff; padding-bottom: clamp(20px,5.2vw,100px);}
.sub-visual .sub-tit{width: 90%;  margin: 0 auto;  text-align: center;  max-width: 1600px;font-size: clamp(40px,4vw,80px); font-weight: 750;}
.sub-visual:after{content:''; width: 100%; height:clamp(40px,5.2vw,100px); border-radius:clamp(50px,5.2vw,100px) clamp(50px,5.2vw,100px) 0 0; background: #fff; position:absolute; left:0; bottom:0;}
body:has(.product) .sub-visual{background-image:url('/images/sub/sub-visual01.jpg');}
body:has(.catalog) .sub-visual{background-image:url('/images/sub/sub-visual02.jpg');}
body:has(.contents) .sub-visual{background-image:url('/images/sub/sub-visual03.jpg');}
body:has(.contact) .sub-visual{background-image:url('/images/sub/sub-visual04.jpg');}
body:has(.location) .sub-visual{background-image:url('/images/sub/sub-visual05.jpg');}
body:has(.project) .sub-visual{background-image:url('/images/sub/sub-visual06.jpg');}

/* sub navi */
.sub-navi{display:flex; color: #fff; gap:10px; position:absolute; right:5%; bottom:clamp(80px,7.3vw,140px); z-index:8;     width: 90%;   justify-content: flex-end;}
.sub-navi .home{width: 60px; height: 60px; border-radius:50%; background: #2E3192; display:flex; align-items:center; justify-content:center; font-size: clamp(16px,1vw,20px); color: #fff;}
.sub-navi .depth{position:relative; width:250px;   }
.sub-navi .depth .drop-btn{font-size: 16px; padding:0 26px; display:flex; justify-content:space-between; align-items:center; height: 60px; border-radius:60px; background: rgba(0,0,0,0.4); border:1px solid rgba(255,255,255,0.2); backdrop-filter:blur(10px); cursor:pointer; font-weight: 750;}
.sub-navi .depth .drop-btn i{font-size: clamp(14px,1vw,18px); transition:all ease .35s;}
.sub-navi .depth:not(:has(ul)) .drop-btn i{display:none;}
.sub-navi .depth > ul{position:absolute; background: rgba(0,0,0,0.4);   width: 100%; border-radius:30px; top:calc(100% - 1px);   padding:  26px;border:1px solid rgba(255,255,255,0.2); backdrop-filter:blur(10px);   display:none;}
.sub-navi .depth > ul a{color: #fff; display:block; padding:5px 0; opacity:.6; transition:all ease .35s; font-size: 16px;}
.sub-navi .depth > ul a:hover{opacity:1;}
.sub-navi .depth:has(.open) .drop-btn i{transform:rotate(180deg); } 
 
/* btn */
.sub .btn-wr{text-align: center; margin-top:clamp(24px,1.6vw,30px);; }
.sub .more-btn{font-size: clamp(14px,1vw,18px); font-weight: 600; display:inline-flex;  gap:28px; align-items:center; background: #F2EFEC; color: #111; border-radius:50px; padding:16px 40px; justify-content:center;}
.sub .more-btn i{font-weight: 500; line-height: 1;}

 
/* 공통 popup */ 
.popup-layer {  position: fixed;  inset: 0;  background: rgba(0,0,0,.4);  display: none;  z-index: 9999;}
.popup-layer.active { display: flex;  align-items: center;justify-content: center;}
.popup-inner {position:relative;  background: #fff;  padding: 5%; width: 90%; max-width:1500px; height:80vh; overflow:hidden; }
.btn-open{padding:16px 30px; border-radius:50px; border:1px solid #ddd; background: #fff; font-size: 1.1em; color: #000;}
.btn-close{background: #fff;color: #000; border:0; font-size: clamp(30px,2vw,40px); position:absolute; right:clamp(18px,1.6vw,30px); top:clamp(18px,1.6vw,30px);}
.popup-content { height: 100%; overflow-y:auto;}
.popup-content .box{background: #F8F8F8; padding: clamp(20px,2vw,40px); margin-top: clamp(20px,2vw,40px); text-align: center; margin-bottom: clamp(20px,2vw,40px);} 
.popup-content h2{font-size: clamp(22px,2.3vw,45px);  padding-right: 30px;} 
.popup-content h3{margin-top: clamp(20px,2vw,40px); font-size: clamp(18px,1.3vw,24px);}
.popup-content > p{margin-top: clamp(10px,1vw,20px);}
.popup-content .bottom{padding-top: clamp(30px,3vw,60px); margin-top: clamp(30px,3vw,60px); border-top:1px solid #ddd; text-align: center;}
.popup-content .date{margin-top: clamp(30px,2vw,40px);}
.popup-content .name{margin-top: 10px; font-size: clamp(16px,1vw,20px); font-weight: 600;}


/* product */
.product .sec-nav{position:sticky; top:15px; width: 100%; max-width:1300px; margin:0 auto; z-index:2; transition:all ease .35s;} 
.scroll-up .product .sec-nav{top:clamp(70px,5.2vw,100px);}
.product .sec-nav ul{border-radius:100px;   background: #f6f6f6; padding:clamp(5px,0.5vw,10px); display:flex; flex-wrap:wrap;}
.product .sec-nav ul li{  flex: 1;}
.product .sec-nav ul li a{display:flex; align-items:center; justify-content:center; height:clamp(40px,3vw,60px);   text-align: center; font-size: clamp(12px,1vw,18px); border-radius:100px; font-weight: 750; transition:all ease .35s; line-height: 1.2;}
.product .sec-nav ul li a.active{ background: #2E3192; color: #fff;}
.product .sections section{ padding-top: clamp(70px,7.8vw,150px); display:flex; justify-content:space-between;}
.product .sections .sec-tit{font-size: clamp(26px,2vw,36px); font-weight: 750; width:100%; max-width:280px; padding-right: 20px; line-height: 1.3;}
.product .page-tit + .sections section:first-child{padding-top: 0;} 


.product .sections .sec-cont{width:calc(100% - 280px); font-size: clamp(17px,1vw,20px);} 
.product .sections .sec-cont .prd-list{display:flex; gap:60px 30px; flex-wrap:wrap; margin-top: clamp(30px,3vw,60px);}
.product .sections .sec-cont .prd-list > li{width:calc(25% - 30px);}
.product .sections .sec-cont .prd-list > li .thumb{border-radius:clamp(18px,1.3vw,24px); aspect-ratio: 1; overflow:hidden;}
.product .sections .sec-cont .prd-list > li .thumb img{width: 100%; height: 100%; object-fit:cover;}
.product .sections .sec-cont .prd-list > li .name{position:relative; margin-top: clamp(10px,1.3vw,24px); display:flex; justify-content:space-between; padding:5px  ; font-weight: 500; padding-right: 60px; min-height:40px;  font-size: clamp(19px,1vw,20px); font-weight: 600;}
.product .sections .sec-cont .prd-list > li .name i{position:absolute; right:5px; top:0;width: 40px; height: 40px; border:1px solid #e5e5e5; border-radius:50%; display:flex; align-items:center; justify-content:center;}

 
/* company */
body:has(.company) .sub-visual{display:none;}
.company {overflow:hidden;}
.company .heading{font-size: clamp(50px,6vw,120px);  line-height: 1;   font-family: "Libre Caslon Display", serif;}
.company .page-tit{ font-size: clamp(30px,3vw,60px);  font-weight: 750;}  
.cpn-intro .sec01{position:relative;width: 100%; height: 100vh; display:flex; align-items:center; text-align: center; justify-content:center; } 
.cpn-intro .shadow-tit{font-size: clamp(150px,16vw,320px);  color: #ebebeb; position:absolute;  text-align: center; top:50%; left:50%; transform:translate(-50%,-50%);  animation: clearBlur  2s ease forwards; z-index:-1; } 
@keyframes clearBlur {
  0% {
    filter: blur(10px);
    opacity: 0;
  }
  100% {
    filter: blur(0);
    opacity: 1;
  }
} 
.cpn-intro .sec02{position:relative; margin:0 auto; transform:translateY(-20vh); width: 90%; max-width:950px; height: 100vh; display:flex; text-align: center; align-items:center; justify-content:center;  color: #fff; z-index:2; border-radius:clamp(24px,2vw,40px) clamp(24px,2vw,40px) 0 0;  overflow:hidden; }
.cpn-intro .sec02 .page-tit{opacity:0; visibility:hidden; transform:translateY(20px); }
.cpn-intro .sec02 .bg{position:absolute; left:0; top:0; width: 100%; right:0; margin:0 auto;  height: 100%; z-index:-1; background: #000;}
.cpn-intro .sec02 .bg img{width: 100%; height: 100%; object-fit:cover; opacity:.8;}
.cpn-about{   width: 100%; height: 100vh;  }
.cpn-about .sec01{position:relative;   width: 100%; height: 100%; display:flex; align-items:center; text-align: center; justify-content:center;  color: #fff; z-index:2;   }
.cpn-about .sec01 .page-tit{width: 100%;  overflow: hidden;  height: clamp(49px,4vw,75px);}
.cpn-about .sec01 .bg{position:absolute; left:0; top:5%; width: 95%; right:0; margin:0 auto;  height: 90%; z-index:-1;border-radius:clamp(20px,2vw,40px) ; overflow:hidden; background: #000; }
.cpn-about .sec01 .bg img{width: 100%; height: 100%; object-fit:cover; opacity:.8;}
.cpn-about .sec01 .txt01{display:inline-flex; flex-direction:column;}
.cpn-about .sec01 .txt02{display:inline-flex; flex-direction:column;}
.cpn-about .sec01 .color{color: #2E3192;}
.cpn-about .sec02{position:absolute; left:0; width: 100%; height: 100%; top:0; background: #fff;  display:flex; align-items:center; justify-content:center; z-index:2; opacity:0; visibility:hidden; text-align: center;}
.cpn-about .sec02 strong{color: #2E3192;}
.cpn-identity{position:relative; background: #F2EFEC; color: #fff; width: 100%; height: 100vh;}
.cpn-identity .bg{position:absolute; right:clamp(30px,8vw,150px); top:clamp(60px,7vw,140px); width:40%; max-width: 598px; aspect-ratio: 598 / 340;border-radius:clamp(10px,1.3vw,24px) ; overflow:hidden; background: #000; }
.cpn-identity .bg img{width: 100%; height: 100%; object-fit:cover; opacity:.8;}
.cpn-identity .inner{position:absolute; left:0; right:0; margin:0 auto; z-index:3; bottom:130px; opacity:0; visibility:hidden; }
.cpn-identity .heading{ }
.cpn-identity .txt{font-size: clamp(16px,1vw,20px);  position:absolute; left:50%; width:50%; bottom:0;   transform: translateY(100%); } 
.cpn-art .sec01{width: 100%;   padding-bottom: clamp(70px,7vw,140px);}
.cpn-art .sec01 .inner{position:relative; padding-top: clamp(100px,20vw,400px);}
.cpn-art .txt{margin-top: clamp(30px,5vw,100px); font-size: clamp(16px,1vw,20px);}
.cpn-art .txt strong{font-size: clamp(18px,1.3vw,24px); display:block;}
.cpn-art .txt p{margin-top: clamp(16px,1vw,20px);}
.cpn-art .bg-txt{position:absolute; right:0; top:clamp(40px,8vw,160px); line-height: 1; font-size: clamp(90px,10vw,190px); color: #F2EFEC; font-weight: 800; z-index:-1;}
.cpn-art .bg-txt span{display:block; text-align:right;}
.cpn-art .bg-txt span:nth-child(1){padding-right: clamp(90px,10vw,190px);}
.cpn-art .sec02{width: 100%;  background: #F2EFEC;  display:flex; align-items:center; padding:80px 0; position:relative; height:100vh; overflow:hidden;}
.cpn-art .art-gallery{display:flex; gap:20px;   height:100%; justify-content: flex-start; transform:translateX(20%);}
.cpn-art .art-gallery li{aspect-ratio: 1;   width: 50vw;}
.cpn-art .art-gallery li img{width: 100%; height: 100%; object-fit:cover; border-radius:clamp(20px,1.6vw,30px);}



/* contact */
.contact .contact-form{display:flex; gap:clamp(20px,2vw,40px); flex-direction:column; font-size: clamp(17px,1vw,20px);}
.contact .contact-form p{  margin-bottom: clamp(12px,1vw,20px); font-weight: 600;}
.contact .contact-form p:after{content:'*'; color: #7DA7D9; margin-left: 4px; vertical-align:top; line-height: 1;}
.contact .contact-form textarea,
.contact .contact-form select,
.contact .contact-form input{width: 100%;}
.contact .contact-form .email{display:flex; gap:20px; align-items:center;}
.contact .privacy-box{margin-top: clamp(20px,4.2vw,80px);}
.contact .privacy-box .pr-tit{font-size: clamp(18px,2vw,36px); gap:6px; font-weight: 750;  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; margin-bottom: clamp(20px,2vw,40px);}
.contact .privacy-box .pr-tit span{font-size: clamp(14px,0.8vw,16px); color: #666; font-weight: 400;}
.contact .privacy-box textarea{background: #F5F5F5; width: 100%; padding:clamp(20px,2vw,40px) !important; height: clamp(200px,20vw,390px) !important;  line-height: 1.7;}
.contact .privacy-agree { margin-top: clamp(20px,3vw,60px); text-align: center; font-size: clamp(14px,1vw,18px); color: #666;} 
.contact .privacy-agree input[type="checkbox"] {  position: absolute;  opacity: 0;}
.contact .privacy-agree label {  display: inline-flex;  align-items: center;  gap: 8px;  cursor: pointer; }
.contact .custom-checkbox {  width: 20px;  height: 20px;  border: 1px solid #ddd;  border-radius: 4px;  background: #fff;  box-sizing: border-box;  position: relative;  transition: all 0.2s ease;}
.contact .custom-checkbox::after { content: "";  position: absolute;  top: 2px;  left: 6px;  width: 5px;  height: 10px;  border: solid #fff;  border-width: 0 2px 2px 0;  transform: rotate(45deg);  opacity: 0;}
.contact .privacy-agree input:checked + label .custom-checkbox { background: #2E3192;  border-color: #2E3192;}
.contact .privacy-agree input:checked + label .custom-checkbox::after {  opacity: 1;}
.contact .privacy-agree input:focus-visible + label .custom-checkbox {  outline: 2px solid #2E3192;  outline-offset: 2px;}
.contact .privacy-agree label:hover .custom-checkbox {  border-color: #2E3192;}
.contact .btn-inquiry{padding:20px 40px; border-radius:50px; background: #2E3192; color: #fff; text-align: center; border:none; margin: clamp(30px,2vw,40px) auto 0; width: 100%; max-width:180px; font-size: clamp(17px,1vw,18px); font-weight: 600; display:block;}

 
/* catalog */
.catalog-list{display:flex; gap:60px 40px; flex-wrap:wrap; margin-top: 60px; font-size: clamp(16px,1vw,20px);}
.catalog-list > li{width:calc(25% - 30px); }
.catalog-list > li .thumb { border:1px solid #E5E5E5; border-radius:clamp(18px,1.3vw,24px); padding:15%; text-align: center; font-size: 18px; }
.catalog-list > li .thumb .img{ aspect-ratio: 232 / 316; margin-bottom: clamp(10px,1vw,20px);}
.catalog-list > li .thumb .img img{width: 100%; height: 100%; object-fit:cover;}
.catalog-list > li > a{position:relative; margin-top: clamp(10px,1vw,20px); display:flex; justify-content:center; align-items:center; gap:28px; padding:5px 10px; font-weight: 750;   }
.catalog-list > li > a i{ width: 40px; height: 40px; border:1px solid #e5e5e5; border-radius:50%; display:flex; align-items:center; justify-content:center;}


/* location */
.location .map iframe{height: clamp(240px, 34.2vw, 657px); border-radius:20px; } 
.location .info-tit{font-size: clamp(24px, 2.5vw, 48px); font-weight: 800; margin-bottom: clamp(20px, 3vw, 60px);}
.location .loc-info{margin-top: clamp(30px, 4.2vw, 80px); font-size: clamp(14px,1vw,18px); font-weight: 500;}
.location .loc-info p{display:flex; align-items:center; gap:7px; line-height: 1;}
.location .loc-info p:first-child{font-size: clamp(18px,1vw,20px); font-weight: 750; margin-bottom: clamp(10px,1.3vw,24px);}
.location .loc-info > ul{display:flex; justify-content:space-between;  gap:5%; font-size: clamp(16px,1vw,18px);}
.location .loc-info > ul > li:first-child{width: 40%;}
.location .loc-info > ul > li{width: 15%;  }

 

/* esg */
body:has(.esg) .sub-visual{display:none;} 
.esg .page-tit{display:flex; flex-wrap:wrap; gap:clamp(12px,1vw,20px);}
.esg .page-tit h3{ width: 100%; font-size: clamp(30px,3vw,60px);  font-weight: 750;}  
.esg .page-tit small{font-size: clamp(17px,1.3vw,24px); font-weight: 600;}
.esg .page-tit p{font-size: clamp(16px,1vw,20px); } 
.esg-visual { position:relative;  } 
.esg-visual .dot{display:block; width: 12px; height: 12px; border:1px solid #fff; border-radius:50%; position:absolute; left:0; top:6px; transition: top 0.3s ease;}
.esg-visual .panel {  position: relative; overflow:hidden; top: 0;  width: 100%;  height: 100vh;  }  
.esg-visual .pn-text { position:relative; width: 90%; max-width:1600px;  font-size: clamp(18px,1.3vw,24px);   position: fixed;  height: 100vh; top:0; left: 0; right:0; margin:0 auto; display:flex;    flex-direction:column; justify-content:center;   gap:clamp(20px,2vw,40px);}
.esg-visual .pn-text h3{font-size: clamp(24px,3vw,60px);  } 
.esg-visual .parallax {overflow:hidden;  position: fixed; top:0; left:0; width: 100%; height: 100%;    background-position: center;  background-repeat: no-repeat;  background-size: cover;  max-height: 100%;  width: 100%;   padding:60px; color: #fff; }
.esg-visual .parallax1 .pn-text{color: #000; align-items:center;  animation: clearBlur 2s ease forwards; text-align: center;}  
.esg-visual .parallax2 {  background-image: url("/images/sub/esg-bg01.jpg"); } 
.esg-visual .parallax3 {  background-image: url("/images/sub/esg-bg02.jpg"); }  
.esg-contents{position:relative;   z-index:2; padding:clamp(60px,8vw,160px) 0; background: #fff;}
.esg-contents .esg-box + .esg-box{margin-top: clamp(80px,8vw,160px);}
.esg-contents .esg-box .btn-open{margin-left: auto;  }
.esg-contents .esg-list{display:flex; flex-wrap:wrap; gap:30px; margin-top: clamp(30px,2.5vw,50px); padding-top: clamp(40px,3vw,60px); border-top:1px solid #ddd;}
.esg-contents .esg-list > li{width: calc(33.33% - 20px);}
.esg-contents .esg-list > li .img{aspect-ratio:534 / 340; border-radius:16px; overflow:hidden;}
.esg-contents .esg-list > li .img img{width: 100%; height: 100%; object-fit:cover;}
.esg-contents .esg-list > li .sbj{font-size: clamp(20px,1.6vw,30px); margin-top: clamp(20px,1.6vw,30px); font-weight: 750;}
.esg-contents .esg-list > li .desc{ font-size: clamp(15px,1vw,18px); margin-top: clamp(5px,.5vw,10px);}



/* project */   
.project .prj-list{display:flex; gap:60px 40px; flex-wrap:wrap; margin-top: clamp(30px,3vw,60px);}
.project .prj-list > li .bo_v_cate{margin-top: clamp(14px,3vw,24px);}
.project .prj-list > li{width:calc(25% - 30px);}
.project .prj-list > li .thumb{border-radius:12px; aspect-ratio: 375 / 250; overflow:hidden;}
.project .prj-list > li .thumb img{width: 100%; height: 100%; object-fit:cover;}
.project .prj-list > li .sbj{position:relative; margin-top: 10px; display:flex; justify-content:space-between;   font-size: 20px; font-weight: 600;  } 
 
body:has(.project-detail) .sub-visual{display:none;} 
.project-detail .inner{padding-top: clamp(30px,6.3vw,120px); max-width:100%;} 
.project-detail .detail-area{width: 30%; padding-right: 5%; position:sticky; top:80px; align-self: start}
.project-detail .grid-sections{max-width:1280px; width: 70%;}
 
 
/* product */  
body:has(.product-detail) .sub-visual{display:none;} 
.product-detail .inner{padding-top: clamp(30px,6.3vw,120px); max-width:1550px;} 
.product-detail .detail-area{width: 50%; padding-left: 5%; max-width:670px;}
.product-detail .detail-img{width: 50%; border-radius:clamp(18px,1.3vw,24px); aspect-ratio:1; overflow:hidden;}
.product-detail .detail-img img{width: 100%; height: 100%; object-fit:cover;}
.product-detail .grid-sections{ padding-top: clamp(40px,5.2vw,100px); margin-top: clamp(50px,5.2vw,100px); border-top:1px solid #ddd; padding-bottom: clamp(40px,5.2vw,100px); margin-bottom: clamp(16px,1.6vw,30px); border-bottom:1px solid #ddd;}
.product-detail .flex-layout{align-items:center;} 

/* 공통 deetail */
.flex-layout{display:flex;}
.detail-area{font-size: clamp(16px,1vw,18px); }
.detail-area h2{font-size: clamp(30px,2.7vw,52px); margin-top: clamp(18px,1.3vw,24px); line-height: 1.3;}
.detail-area h3{font-size: clamp(18px,1.3vw,24px); margin-bottom: clamp(10px,1.3vw,24px);}
.detail-area .detail-info{border-bottom:1px solid #ddd; padding-bottom: clamp(30px,2vw,40px);  margin-top: clamp(10px,3vw,60px);}
.detail-area .detail-info dl{display:flex; flex-wrap:wrap; gap:10px;}
.detail-area .detail-info dl dt{width: 100px; padding-right: 10px; }
.detail-area .detail-info dl dd{width: calc(100% - 110px);}
.detail-area .btn-wr{display:flex; gap:clamp(10px,0.7vw,14px); flex-wrap:wrap; margin-top: clamp(30px,2vw,40px);}
.detail-area .btn-wr .more-btn{width: calc(50% - 7px); font-size: 16px;  padding:clamp(14px,0.8vw,16px); gap:10px; background: #fff; border:1px solid #ddd;}
.detail-area .btn-wr .more-btn:first-child{width: 100%; font-size: clamp(16px,1vw,18px); background: #4A3B2D; border-color:#4A3B2D; color: #fff; }

 
.grid-sections{font-size: clamp(17px,1vw,20px);}
.grid-sections .section { display: grid;  gap: clamp(12px,2vw,40px);   }
.grid-sections .section + .section{margin-top: clamp(50px,5.2vw,100px);}
.grid-sections .section .tit{font-size: clamp(20px,2vw,32px); font-weight: 750; } 
.grid-sections .section img{border-radius:clamp(10px,0.8vw,16px); overflow:hidden; aspect-ratio: 2; width: 100%; height: 100%; object-fit:cover;}  
.grid-sections .section figcaption{color: #666; margin-top: 12px; font-size: .9em;}
.grid-sections .grid-2 {  grid-template-columns: 1fr 1fr; align-items:center;}
.grid-sections .grid-2 .box .txt{ margin-bottom: 30px; padding:20px 0;}
.grid-sections .grid-2 .box .txt:has(ul){height: 100%;}
.grid-sections .grid-2 .box .txt ul{height: 100%;     display: flex; flex-direction:column; align-items: center;     justify-content: space-evenly; gap:20px;  }
.grid-sections .grid-2 .box{height: 100%;}
.grid-sections .grid-2 .txt {  grid-column: span 2;}
.grid-sections .grid-2 .img.square img{aspect-ratio: 1;}
.grid-sections .vertical img{aspect-ratio: 0.8;}
.grid-sections .grid-3 {  grid-template-columns: repeat(3, 1fr);}
.grid-sections .grid-3 .txt {  grid-column: span 3;}
.grid-sections .grid-3 img{aspect-ratio: 1;}
.grid-sections .grid-4 {  grid-template-columns: repeat(2, 1fr);} 
.grid-sections .grid-4 .txt {  grid-column: span 2;}
.grid-sections .grid-magazine {  grid-template-columns: repeat(2, 1fr);}
.grid-sections .grid-magazine .txt {  grid-column: span 2;}
.grid-sections .grid-magazine .big {  grid-column: span 1;  grid-row: span 2; } 
.grid-sections .grid-magazine .big img{     aspect-ratio: 0.914;  }  



body:has(.container-wr.privacy) .sub-visual{display:none;}
.privacy .inner { padding-top: clamp(30px, 6.3vw, 120px);   max-width: 100%;}
.privacy header{text-align: center; margin-bottom: clamp(40px,5.2px,100px);}
.privacy header h2{font-size: clamp(32px,2.6vw,52px); margin-top: clamp(18px,1.3vw,24px); line-height: 1.3;}
.privacy h3{margin-top: clamp(30px,2.7vw,50px); font-size: 1.3em; color: #000;}
.privacy p{margin:10px 0;}
.privacy .idt{padding-left: 15px; text-indent:-15px; margin-left: 18px;}
.privacy .box{background: #f7f7f7; margin-top: 30px;padding:clamp(20px,1.6vw,30px);}
.privacy .box li{position:relative; padding-left: 15px;}
.privacy .box li:before{content:'-'; position:absolute; left:0; top:0;}
.privacy .etc-table{margin:30px 0;}
.privacy .etc-table caption{visibility:hidden;overflow:hidden;width:0;height:0;font-size:0;line-height:0;}
.privacy .etc-table strong{background: #000; color: #fff; width: 100%; display:block; padding:10px; text-align: center;}
.privacy .etc-table table{width: 100%;     border-collapse: collapse;}
.privacy .etc-table table th{padding:10px; border:1px solid #ddd; background: #f7f7f7; border-left: 0;}
.privacy .etc-table table td{padding:10px; border:1px solid #ddd; border-right: 0;}



/**************************************************** responsive ****************************************************/
 
@media (min-width: 1201px) {
	/* header */ 
	.sec-header.white .gnb > ul{ background: rgba(0,0,0,0.1); }
	.sec-header.white .gnb > ul > li > ul{background: rgba(0,0,0,0.8); }
	.gnb{ text-align: center; }
	.gnb > ul{display:inline-flex; gap:80px; padding:0 30px; align-items:center; border-radius:16px; background: #f7f7f7; backdrop-filter:blur(24px);}
	.gnb > ul > li{position:relative;   }
	.gnb > ul > li > a{display:block; line-height: 56px; } 
	.gnb > ul > li > ul{position:absolute; width: 170px; left:50%; transform:translateX(-50%); top:calc(100% + 10px); border-radius:10px; background: #f7f7f7; padding: 14px 0; text-align: center; display:none;}
	.gnb > ul > li > ul > li > a{padding:7px 10px; display:block; }
	.gnb > ul > li > ul{display: block; opacity:0; visibility:hidden; transition:all ease .35s;}
    .gnb > ul > li:hover > ul { opacity:1; visibility:visible;}
	.gnb > ul > li > ul > li > a{ opacity:.6; transition:all ease .35s;}
	.gnb > ul > li > ul > li > a:hover{opacity:1;}
} 
@media (max-width: 1200px) {
	/* header */ 
	.open{overflow:hidden;}
	.open .sec-header{position:fixed;}
	.open .sec-header .mo-btn{z-index:2;}
	.open .sec-header .mo-btn span:nth-child(1){transform:translateY(4px) rotate(45deg);}
	.open .sec-header .mo-btn span:nth-child(2){display:none;}
	.open .sec-header .mo-btn span:nth-child(3){transform:translateY(-4px) rotate(-45deg);}
	.open .sec-header .gnb{right:0;  }
	.open .sec-header .logo{z-index:2}
	.mo-btn{display:flex;} 
	.gnb{position:fixed; right:-100%; top:0; width: 100%; background: #000; height: 100vh; padding:100px 5% 0; font-size: 24px;     transition: all ease .35s;}   
	.gnb > ul{overflow-y:auto; height: calc(100vh - 150px);}
	.gnb > ul > li > a{display:flex; justify-content:space-between; align-items:center; padding:10px 0; opacity:.6;}
	.gnb > ul > li:has(ul) > a:after{content:'↓'; }  
	.gnb > ul > li.active > a{opacity:1;}
	.gnb > ul > li.active:has(ul) > a:after{content:'↑'; }  
	.gnb > ul > li > ul {padding:0 10px 30px; display:none;}
	.gnb > ul > li > ul > li > a{font-size: 19px; padding:5px 0; display:block;}
	.lang{margin-left: auto; margin-right: 20px;}
 
	.main-project .project-slider .left-slider{width: 50%;  }
	.main-project .project-slider .right-slider{width: 50%;} 
	
	.product .sections .sec-cont .prd-list{ gap:40px;}
	.product .sections .sec-cont .prd-list > li{width: calc(50% - 20px);}

	
	.sub-visual{height: 50vh;}
	.detail-area .btn-wr{flex-direction:column;}
	.detail-area .btn-wr .more-btn{width: 100%;}
}


@media (max-width: 768px) {
	/* header */
	.sec-header{height:70px;} 
	.sec-header .logo img{max-width:150px;}

	/* footer */
	.sec-footer .ft-cont{ flex-direction: column; padding-bottom: 30px;}
	.sec-footer .ft-info ul{ flex-direction: column; margin:20px 0;}
	.sec-footer .ft-info ul li{width: 100%;}
	.sec-footer .ft-copy{padding-top: 10px; text-align: left;}
	.sec-footer .ft-cont{    align-items: flex-start;}
	.sec-footer .ft-sns{justify-content:flex-start; gap:14px;}
	.sec-footer .ft-right{gap:10px;} 
	.top-btn{margin-top: -50px;}
  
	/* main */  
	.main-tit:has(.stit){padding-left: 0;}
	.main-tit .stit{position:relative; margin-bottom: 15px;}
	.main-project .project-slider{flex-direction:column;}
	.main-project .project-slider .left-slider{width: 100%; height: 50%;}
	.main-project .project-slider .right-slider{width: 100%; height: 50%;}  
	.main-product .pn-prd{transform:translateY(0); top:17vh; right:5%; }
	.main-project .titleSwiper .swiper-slide{opacity:0;}
	.main-project .titleSwiper .swiper-slide-active{opacity:1;}
	.main-catalog .catalog-cont > ul{flex-direction:column; gap:15px;}
	.main-visual .swiper-pagination .swiper-pagination-bullet .pag-label{display:none;} 
	.main-visual .swiper-slide .bg .mo_bg{display:block;}



	/* main */ 
	.main-tit h2 br{display:none;}
	.main-visual .slide-title br{display:none;}
	.main-product .pn-prd p br{display:none;}
	.main-catalog .catalog-cont > ul > li h3 br{display:none;}


	/* sub */  
	.container-wr .page-tit br{display:none;}
 
	.sub-visual + .container-wr{  padding-top: 10px;} 
	.sub-navi{display:none}
	.sub-navi .depth{display:none;}
	.sub-navi .depth:last-child{display:block; width: calc(100% - 70px);}


	/* company */  
	.cpn-identity .inner{bottom:auto; top:0; padding:10vh 0; height: 100%; display: flex; justify-content: center;flex-direction: column; gap:40px;}
	.cpn-about .sec01 .bg{width: 90%;}
	.cpn-identity .txt{position:relative; width: 100%; font-size: 16px; left:0; transform:none !important;}
	.cpn-art .art-gallery{height:60%;}

	.esg .page-tit small{display:block;}
	.esg-contents .esg-list{flex-direction:column;}
	.esg-contents .esg-list > li{width: 100%;}
	.esg-contents .esg-box .btn-open{margin-left: 0; margin-top: 10px;}
 
	.product .sections section{flex-direction:column; gap:10px;}
	.product .sections .sec-tit{width: 100%;}
	.product .sections .sec-cont{width: 100%;}
	.product .sections .sec-cont .prd-list{flex-direction:column; gap:30px;}
	.product .sections .sec-cont .prd-list > li{width: 100%;} 
	.product .sections .sec-cont .prd-list > li .name i{font-size: 16px;}
	.product-detail .detail-img{width: 100%;  }
	.product-detail .detail-area{width: 100%; padding-left: 0; max-width:100%;} 
 


	.project-detail .detail-area{width: 100%; padding-right: 0; position:relative; top:auto;}
	.project-detail .grid-sections{width: 100%;}
	.project .prj-list > li{width: 100%;}
	.project .prj-list{flex-direction:column; gap:30px;}
	
	.flex-layout{flex-direction:column; gap:30px;} 
	.grid-sections .section { display:flex; flex-direction:column;} 
	.grid-sections .grid-2 .box .txt{margin-bottom: 0;} 

	 
	 .product .sec-nav ul{border-radius:20px;}
	 .product .sec-nav ul li{flex:auto; }
	 .product .sec-nav ul li a{padding:0 10px;}

	.bo_v_nb li .nb_tit{width: 60px;}
	.bo_v_nb li a {width:calc(100% - 60px);} 

	 
	.catalog-list{flex-direction:column; gap:30px; margin-top: 0;} 
	.catalog-list > li{width: 100%;} 


	#bo_gall .gall_con{flex-direction:column; gap:20px;} 
	#bo_gall .gall_text{width: 100%;}
	#bo_gall .gall_text_href{margin:0;}

	.contact .contact-form .email{flex-wrap:wrap; gap:10px;}
	.contact .contact-form .email input{width: calc(50% - 20px);}

	.location .loc-info > ul{flex-direction:column; gap:20px;} 
	.location .loc-info > ul > li,
	.location .loc-info > ul > li:first-child{width: 100%;} 
	.location .loc-info > ul > li{display:flex; align-items:center; } 
	.location .loc-info > ul > li p:first-child{margin-bottom: 0; width: 120px;}

	.popup-inner{padding:30px;}
 

 
}