@charset "utf-8";





h2#container_title {
    display: none;
}

/* Mobile화면으로 */
#device_change {display:block;margin:0.3em;padding:0.5em 0;border:1px solid #eee;border-radius:2em;background:#fff;color:#000;font-size:2em;text-decoration:none;text-align:center}

#sv .sv-box{width: 100%; height: 420px; border-bottom: 1px solid #eeeeee; position: relative; overflow: hidden;}

#sv {}
#sv .sv-img { animation: img-size 4s forwards; object-fit: cover; width: 100%; position: relative; z-index: -999;height: 100%;  filter: brightness(90%);}
@keyframes img-size {
	0% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(1);
	}
}
.lnb-bg {width: 50%;height: 70px;background: #fff;position: absolute;right: 0;bottom: 0;}
#sv .add{display: flex; align-items: center; width: 50%; height: 70px;position: absolute; right: 0; bottom: 0; gap: 50px;}
#sub-lnb {display: flex; align-items: center; width: 50%; height: 70px;position: absolute; right: 0; bottom: 0; }
#sub-lnb .menu01.depth2 {display: flex;gap: 50px;padding-left: 30px;}
.subTit {width:100%; max-width: 1500px; height: 100%; position:absolute; top:0; left:50%; transform: translateX(-50%); display: flex; align-items: flex-end; justify-content: space-between;}
.subTit h1{ letter-spacing: 0px;  font-weight: 600; color: #fff;}
.subTit b{display: block; font-size: 20px; margin: 15px 0 60px; }

#sv #sub-lnb.add .menu03.depth2  {display: flex; gap: 36px;}
#sv #sub-lnb .depth2 li a{font-size:18px; color: var(--color-font-five);}
#sv #sub-lnb.add .depth2 li a{font-size:15px; color: var(--color-font-five);}
#sv #sub-lnb .depth2 li:hover a{color:var(--color-font-one)}
#sv #sub-lnb .depth2 li:active a{color:var(--color-font-one)}
#sub-lnb .home_btn{height: 100%; width: 70px; align-items: center; display: flex; justify-content: center; background: var(--main-color)}
#sub-lnb i.xi-home {color: #fff;  }

img.sv-img.\30 3 {
  filter: contrast(0.7);
}
img.sv-img.\30 4 {
  filter: contrast(0.7);
}

.subTit h1 {
    letter-spacing: 0px;
    font-weight: 600;
    color: #fff;
    font-size: 72px;
}




#subConents{width: 100%;margin: 120px 0;}
#subConents .sub-page {width: 100%; max-width: 1340px; margin: 0 auto; }
#subConents .sub-page .top-area{text-align: center;}
#subConents .sub-page .top-area h2{font-size: 50px; margin-bottom: 50px;}
#subConents .sub-page .top-area p{font-size: 28px;}





/* 인사말 */


.item.greet-txt h3{
  text-align: center;
  margin-top: 80px;
  margin-bottom: 70px;
}

.greet.img-area{width: 100%;}
.greet.img-area img{object-fit: cover;     border-radius: 15px;  width: 100%;}

.item.greet-txt p {line-height: 1.7; padding-bottom: 20px; word-break: keep-all; text-align: center; font-size: 18px;}




/* 연혁 */

.history-item{display: flex; justify-content: space-between;     gap: 100px; align-items: flex-start;   padding: 30px 0 ;  border-bottom: 1px solid #efefef; }
.history-item h3{padding-right: 30px;     max-width: 126px;  width: 100%;}
.year-group {flex: 1;}

/* 개요 */
.outline-img-area {text-align: center; width: 100%;     margin-bottom: 100px;}
.outline-img-area img{ object-fit: cover;     border-radius: 15px;     width: 100%; height: 500px; }
.outline-txt h3{text-align: center; margin:100px 0 50px; line-height: 1.5;  color: var(--color-font-two);}
.outline-txt p{font-size: 17px;  word-break: auto-phrase; line-height: 1.8;}
.detail-area {display: flex;    justify-content: center; gap: 24px; background: #fafafa; padding: 50px 0; overflow-x: scroll;}
.detail-area img{border-radius: 8px;}
.txt-item-group {display: flex; align-items: flex-start; gap: 50px;    padding-bottom: 50px; border-bottom: 1px solid #efefef; }
.txt-item-group img{}

.outline-dl {  font-size: 19px; margin-bottom: 70px;     padding: 40px 50px; border: 1px solid #dbdbdb; border-radius: 15px;}
.outline-dl .d-flex{flex-wrap: wrap; }

.outline-dl dt{max-width: 150px; width: 100%; font-weight: 700; font-size: 1rem;}
.outline-dl dd{ font-weight: 500; font-size: 18px; }
dt.in_line { margin-top: 20px; line-height: 1.5; max-width: none;}
.d-flex.in_line { margin-top: 20px; align-items: baseline;}
/* .flex-wr {margin-top: 20px;} */
.d-flex.m-b{margin-bottom: 10px; align-items: baseline;}
dd.inline-block {display: inline-block;}
.d-flex.inline {align-items: baseline;}

.outline-img-area.item img{height: auto; border-radius: unset;}

.sns-con {}

.sns-con ul > li{line-height: 1.7; font-weight: 600;}
.sns-con ul > li > a > span{text-decoration: underline; color: #aaa; font-weight: 300;}
.sns-con ul > li > a > span:hover { color: var(--main-color02);}


/* 오시는 길 */





.loction {display: flex;justify-content: space-between; gap: 35px; margin-bottom: 70px;}
.loction h3{padding-bottom: 30px;}
.loction-desc{width:50%}
.loction span{color: var(--color-font-two); font-size: 24px; font-weight: 500;/*  text-align: right; */ font-family: 'Pretendard'; margin-bottom: 20px; display: block;  }
/* .desc_wr{ border-top: 1px solid #dbdbdb;}
.desc_wr i{color: var(--main-color-em,); font-size: 20px;}


.loction-desc dl{display: flex; gap: 10px; align-items: center; padding-bottom: 30px; }
dl.address {padding-top: 30px;}
dd {font-size: 20px;}*/

.map_area{width: 50%; height: 360px;} 

.desc_wr{ border-top: 1px solid #dbdbdb;     font-size: 18px;}
.desc_wr i{color: var(--main-color); font-size: 20px;}
.desc_wr dl{display: flex; gap: 10px;}
.desc_wr span{font-weight: 500;}

.loction-desc dl{display: flex; gap: 10px; align-items: center; padding-bottom: 30px; }
.partners .desc_wr dl{padding-top: 10px; display: flex; align-items: end;}
.partners .desc_wr dl.address{padding-top: 20px;}
dl.address {padding-top: 30px;}
/* dd {font-size: 20px;} */
.partners .desc_wr span {font-weight: 600;/* text-align: right; */font-size: 24px;margin-top: 10px; display: block;}

#subConents .tabs .map_area{width: 100%; height: 100%; overflow: hidden;}

#subConents .tabs .map_area iframe {width: 100%; height: 100%;transition: all 0.5s;}
section#bo_v_link {max-width: 1340px;margin: 0 auto;}


/* 사업분야 */

.glass-con {padding: 42px 40px; align-items: center; display: flex; justify-content: space-between; flex-wrap: wrap-reverse; box-shadow: 0px 0px 10px rgba(0, 0, 0, .10); border-radius: 15px; /* border: 1px solid #dbdbdb; */     gap: 50px;}
.glass-con h3{padding-left: 50px;}
.glass-detail {flex: 1;margin-left: 50px; line-height: 2; padding-left: 50px;}
.glass-detail li {position: relative; font-size: 18px}
.glass-detail li::before {position: absolute; content: ""; background: var(--main-color);  top:50%; left:-24px; width: 6px; height: 6px; border-radius: 50%;  transform: translate(0% , -50%);} 

.glass-con img{width: 400px; height:250px; object-fit: cover;}


/* tab 메뉴 */

a {
    text-decoration: none;
    color: inherit;
  }
  .tab {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    margin-bottom: 80px;
    gap:1rem;
    flex-wrap: wrap;
  }
  .tab__item {
    padding: 1rem 2rem;
    /* margin-right: 1rem; */
    border: 1px solid #ddd;
    border-radius: 2rem;
    font-size: 18px;
    font-weight: 500;
  }
  .tab__item.active {
    display: inline-block;
    /* border: 1px solid var(--main-color02); */
    background-color: var(--main-color02);
  /*   border: 1px solid #b81c0f;
    background-color: #b81c0f; */
    color: #fff;
    font-weight: 700;
  }
  .tab__content-wrapper { /* padding: 1rem */}
  .tab__content {
    display: none;
  }
  .tab__content.active {
    display: block;
  }

/* 두번째 탭 */
h3.tab-tit-h3 {
    font-size: 24px;
    margin-bottom: 24px;
    text-align: center;
}

  .tab_container {
    position: relative;
    width:100%;
    margin:auto;
  }
  .tab_container .tab_content {
    width:100%;
    padding: 30px 0;
  }
  
  .tabs ul {
    width: 100%;
    display:table;
    table-layout: fixed;
    padding:0
  }
  .tabs li {
    display: table-cell;
    background: #f6f7f9;
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    padding: 20px;
    border-bottom: 1px solid #222;
    text-align: center;
    vertical-align: middle;
    text-align: left;
  }
  .tabs li.active {
    background: #fff;
    border-top: 1px solid #222;
    border-left: 1px solid #222;
    border-right: 1px solid #222;
    border-bottom: 0;
  }
  .tabs li.active a {
    color: #0051a4;
    font-weight: 500;
  }
  .tabs li a {
    font-size: 14px;
    color: #222;
    display: block;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    text-decoration: none;color: #000
  }

  .tab_container .tab_content ul li{border: 1px solid #aaa; text-align: center; margin-bottom: 40px; padding: 20px 0; overflow-x: scroll;}
  .tab_container .tab_content ul h4{font-size: 20px; margin-bottom: 20px; }
  .tabs {margin-bottom: 50px;}

  /* 제품소개 */

  .product-item-con{}
  .product-item-con ul{display: flex; gap: 20px;     align-items: center; flex-wrap: wrap;}
  .product-item-con ul > li{width:calc(33.333% - 16px);     border: 1px solid #aaa; }
  .product-item-con ul > li img{width: 100%; height: 560px;}

  .product-item-con.tab3 img{border: 1px solid #aaa; width: 100%; max-width: 800px;}
  .product-item-con.tab3 {text-align: center;}


  ul.tab-flex {display: flex; gap: 50px; justify-content: center;     overflow-x: scroll;}
  ul.tab-flex li {padding: 0!important;}
  ul.tab-flex li img{max-width: 550px;}
  ul.tab-flex.con1-3 {flex-wrap: wrap;}
  ul.tab-flex.con1-1 {flex-wrap: wrap;}
  ul.tab-flex.con1-1 li{border: 1px solid #aaa;}

/* 일반창호 모달창 */
.over-wrap , .over-wrap1 , .over-wrap2 ,  .over-wrap3 {
    position: fixed; left:0; top:0; width:100vw; height:100vh; background:rgb(29 31 33 / 62%);
    pointer-events:none; opacity: 0; transition:opacity .3s ease;
    z-index: 9999;
}

.over-wrap.on , .over-wrap1.on ,.over-wrap2.on , .over-wrap3.on{  
    opacity: 1; pointer-events:auto;
}


#big-img{
    top:50%; left:50%; position: absolute;     
    transform: translate(-50%, -50%);
    height: auto;
    max-width: 558px;
    width: 100%;
}

#big-img_yj ,  #big-img_door , #big-img_only {    
    top:50%; left:50%; position: absolute;     
    transform: translate(-50%, -50%);
    height: auto;
    max-width: 1100px;
    width: 100%;
}

#big-img-AL {
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    height: auto;
    max-width: 650px;
    width: 100%;
}