@charset "utf-8";
/* ****************** 서브 공통 ********************** */
:root {
 --sub-top-padding:5.250em;
 --sub-bg-color:#F6F9F7;
 }

#subCont .inner { padding-top:var(--sub-top-padding); padding-bottom:var(--sub-top-padding); }
#subCont .tit { margin-bottom: 2em; font-size: 3.5rem; line-height: 1.3; }
#subCont .sub-tit { margin-bottom: 1em; color: var(--main-color); font-size: 1.8rem; line-height: 1.5; letter-spacing:-0.03em; }
#subCont .sub-tit span { display: block; margin-bottom: 0.4em; }
#subCont .sub-tit-area {position: relative; width: 100%; height: 500px;}
#subCont .sub-tit-area .sub-bg-img {width: 100%; height: 100%; object-fit: cover;/* animation:img-zum 5s forwards;transform: scale(1);*/}
@keyframes img-zum {
    from {transform: scale(1.05);}
      to {transform: scale(1);}
  }
#subCont .sub-tit-area .inner { position: absolute;z-index: 1; display: grid; align-content: center;width: 100%; height: 100%; padding-top: 0; padding-bottom: 0; }
#subCont .sub-tit-area .tit-wr { color: #fff; text-align: center; }
#subCont .sub-tit-area .tit-wr .tit { margin-bottom: 0; font-size: 4.8rem; }
#subCont .sub-tit-area .tit-wr .txt { color: #fff; font-size: 1.6rem; }
#subCont .sub-tit-area .dropdown-wr { position: absolute; left: calc((100% - 1300px)/2); bottom: 2.313em; display: flex; align-items: center; }
#subCont .sub-tit-area .dropdown-wr .home-btn { width: 51px; height: 51px; margin-right: 0.5em; border-radius: 100%; background: var(--main-color); text-align: center; }
#subCont .sub-tit-area .dropdown-wr .material-symbols-outlined { color: #fff; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48; line-height: 48px; }
#subCont .sub-tit-area .dropdown .btn { width: 209px; padding: 0.4em 0.2em; border-bottom: 1px solid #D7D8D5; color: #fff; text-align: left; font-size: 1.8rem; font-weight: 400; font-family: 'Poppins','Noto Sans KR'; }
#subCont .sub-tit-area .dropdown .btn span { float: right; padding-top: 0.25em; font-size: 1.8rem; }
#subCont .sub-tit-area .dropdown-menu { padding: 0.8em 0.5em; }
#subCont .sub-tit-area .dropdown-menu a { line-height: 2; color:var(--sub-color); transition: .3s; }
#subCont .sub-tit-area .dropdown-menu a:hover { color: inherit; }
#subCont .sub-tit-area .dropdown-menu.bo-radius { border-radius:0 0 1.8rem 1.8rem; }
#subCont .sub-tit-area .btn { display: inline-block; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; user-select: none; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; }
#subCont .sub-tit-area .dropdown-toggle { white-space: nowrap; }
#subCont .sub-tit-area [type=button]:not(:disabled), #subCont .sub-tit-area [type=reset]:not(:disabled), #subCont .sub-tit-area[type=submit]:not(:disabled), #subCont .sub-tit-areabutton:not(:disabled) { cursor: pointer; }
#subCont .sub-tit-area button:focus:not(:focus-visible) { outline: 0; }
#subCont .sub-tit-area .dropdown-menu { position: absolute; visibility: hidden; width: 209px; margin: 0; background: #fff; text-align: left; list-style: none; opacity: 0; filter: drop-shadow(0em 0em 0.2em rgba(0,0,0,.2)); }
#subCont .sub-tit-area .dropdown-menu.show { visibility: visible; opacity: 1; }


/* ****************** 회사소개 ********************** */
#subCont.story-comp #sec01 .inner { display: flex; align-content: center; }
#subCont.story-comp #sec01 .img-box { position: relative; width: 406px; height: 583px; margin-right: 3.611em; z-index: 1; }
#subCont.story-comp #sec01 .img-box::after { position: absolute; bottom: -0.8em; right: -2.3em; z-index: -1; width: 100%; height: 100%; background: url("../img/comp_img01_bg.png")no-repeat center / cover; content: ''; }
#subCont.story-comp #sec01 .tit-box { width: 690px; margin-top: 5em; }
#subCont.story-comp #sec01 .table { display: flex; flex-wrap: wrap; margin-top: 2em; border-top:2px solid #1A2606; }
#subCont.story-comp #sec01 .table .txt { padding-right: 1.250em; border-bottom: 1px solid #D7D8D5; line-height: 64px; text-align: left; font-size: 1.5rem; }
#subCont.story-comp #sec01 .table .txt span { display: inline-block; width: 130px; margin-right: 1.250em; background: #F5F5F5; color: #1A2606; text-align: center; }
#subCont.story-comp #sec01 .table .com-name, #subCont.story-comp #sec01 .table .ceo-name,#subCont.story-comp #sec01 .table .com-num,#subCont.story-comp #sec01 .table .sell-num { width: 50%; }
#subCont.story-comp #sec01 .table .com-addr { width: 100%; }

#subCont.story-comp #sec02 { background:var(--sub-bg-color); }
#subCont.story-comp #sec02 .inner { display: grid; grid-template-columns: 516px 1fr; align-items: center; }
#subCont.story-comp #sec02 .txt { position: relative; margin-bottom: 1em; margin-left: 1em; line-height: 1.8; }
#subCont.story-comp #sec02 .txt:before { position: absolute; top: 0; left: -1em; content: '>'; font-family: 'Poppins'; }
#subCont.story-comp #sec02 .txt span { color: #586D3E; font-weight: 500; }
#subCont.story-comp #sec02 .addition { margin-top: 3em; padding: 0.5em; background: #fff; }
#subCont.story-comp #sec02 .addition .txt { margin: 1em; font-size: 1.6rem; line-height: 1.5; }
#subCont.story-comp #sec02 .addition .txt::before { display: none; }
#subCont.story-comp #sec02 .img-box img { width: auto; margin-left: auto; }
#subCont.story-comp #sec02 .img-box-mo img{display: none;}

#subCont.story-comp #sec03 { display: grid; grid-template-columns: 1fr 1fr; height: 700px; }
#subCont.story-comp #sec03 .img-box { background: url(../img/comp_img03.jpg)no-repeat center / cover; }
#subCont.story-comp #sec03 .tit-box { display: grid; justify-content: start; align-content: center; margin-left: 7em; background: url(../img/comp_img03_bg.png)no-repeat 113% 85%; }
#subCont.story-comp #sec03 .history-wr .year-wr { display: flex; margin-bottom: 1.5em; }
#subCont.story-comp #sec03 .history-wr .year-wr:last-child { margin-bottom:0; }
#subCont.story-comp #sec03 .history-wr .year-wr .year { font-size: 2rem; font-weight: 600; }
#subCont.story-comp #sec03 .history-wr .year-wr .arrow-icon { padding-top: 0.1em; margin: 0 1em; color: #919888; }
#subCont.story-comp #sec03 .history-wr .year-wr .txt { margin-top: -0.2em; line-height: 2; }

#subCont.story-comp #sec04 { background: var(--sub-bg-color); }
#subCont.story-comp #sec04 .inner { padding-right: 0; }
#subCont.story-comp #sec04 .swiper { overflow: hidden; }
#subCont.story-comp #sec04 .swiper .txt { margin-top: 0.5em; text-align: center; }
#subCont.story-comp #sec04 .swiper .swiper-slide { width: 342px; }
#subCont.story-comp #sec04 .swiper .swiper-slide .bo-radius { border: 1px solid #D7D8D5; }

/* ****************** 탄생스토리 ********************** */
#subCont.story-birth #sec01 { text-align: center; }
#subCont.story-birth #sec01 .inner { padding-top: calc(var(--sub-top-padding)*1.5); padding-bottom: calc(var(--sub-top-padding)*1.5); }
#subCont.story-birth #sec01 .sub-tit { padding-top: var(--sub-top-padding); }
#subCont.story-birth #sec01 .txt-box { background: url("../img/birth_img02.jpg")no-repeat center / cover; text-align: left; }
#subCont.story-birth #sec01 .txt-box .tit { margin-bottom: 1em; color: #fff; font-size: 3.8rem; letter-spacing: 0; font-weight: 600; }
#subCont.story-birth #sec01 .txt-box .txt { color: #fff;    line-height: 2; }
#subCont.story-birth #sec02 .inner { display: flex; justify-content: space-between; }
#subCont.story-birth #sec01 img { width: auto; margin: 3em auto 8em; text-align: center; }
#subCont.story-birth #sec02 img { width: auto; }


/* ****************** 생산설비현황 ********************** */
#subCont.story-status #sec01 { position: relative; }
#subCont.story-status #sec01 .bg { position: absolute; z-index: -1; top:38em; left: 0; width: 100%; height: calc(100% - 38em); background:var(--sub-bg-color); }
#subCont.story-status #sec01 .tit img.icon { margin-right: 0.3em; }
#subCont.story-status #sec01 .status-wr { margin-top: 4em; }
#subCont.story-status #sec01 .status-wr .img-box { display: grid; grid-template-columns: repeat(4,1fr); gap: 0.5em; }


/* ****************** 오시는길 ********************** */
#subCont.story-map #sec01 .map-info { margin-bottom: 1em; }
#subCont.story-map #sec01 .map-info .txt { padding: 2em 4em; margin-top: 1em; background: var(--sub-bg-color) url("../img/map_bg.jpg")no-repeat center / cover; }
#subCont.story-map #sec01 .map-info .txt li { line-height: 2; color: #bbb; font-weight: 300; }
#subCont.story-map #sec01 .map-info .txt li strong { display: inline-block; width: 120px; color: #fff; font-weight: 600; }
#subCont.story-map #sec01 .map-info .txt li span.material-symbols-outlined { display: inline-block; vertical-align: sub; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48; margin-right: 0.3em; }
#subCont.story-map #sec01 .map-info .txt li a.mo_color{color: #bbb;}


/* ****************** 브랜드소개 ********************** */
/* ****************** 차별성 ********************** */
#subCont.brand-differ #sec01 .tit-wr {text-align: center;margin-bottom: 6em;}
#subCont.brand-differ #sec01 .tit-wr .tit {margin-bottom: 1em;}
#subCont.brand-differ #sec01 .box-wr .box {display: grid; grid-template-columns: 1fr 1fr;}
#subCont.brand-differ #sec01 .box-wr .box .text-box {display: grid; align-content: center;padding: 2em; }
#subCont.brand-differ #sec01 .box-wr .box .text-box .txt {padding-top: 1em; border-top: 1px solid #D7D8D5;}
#subCont.brand-differ #sec01 .box-wr .box .text-box .tit {margin-bottom: 0.3em;}

#subCont.brand-differ #sec01 .box-wr .box:nth-child(even) {direction: rtl;}
#subCont.brand-differ #sec01 .box-wr .box:nth-child(even) .text-box {direction: ltr;}


/* ****************** 제품소개 ********************** */
#subCont.product #sec01 .txt-wr .icon { margin-top: 0.5em; margin-bottom: 0.3em; }
#subCont.product #sec01 .txt-wr .txt { color: #1A2606; font-weight: 500; }
#subCont.product #sec01 .box-wr { display: grid; grid-template-columns: repeat(3, 1fr); gap:3em 0.5em; }
#subCont.product #sec01 .box-wr .box { position: relative; display: inline-block; }
#subCont.product #sec01 .box-wr .box img { transition: .5s; }
#subCont.product #sec01 .box-wr .box::after { position: absolute; top: 0; width: 100%; height: 100%; border: 0 solid var(--main-color); border-radius: 1.8rem; box-sizing: border-box; content: ''; z-index: 1; transition: .3s; }
#subCont.product #sec01 .box-wr .box:hover::after { border: 5px solid var(--main-color); }
#subCont.product #sec01 .box-wr .box:hover img { transform: scale(1.03); }
#subCont.product #sec01 .box-wr .box .more-btn { position:absolute; right:2em; bottom: 2.5em; z-index: 2; transition: .3s; }
#subCont.product #sec01 .box-wr .box .more-btn.one span { background: #ffffff70; border: 1px solid #fff; color: #1A2606; text-align: center; line-height: 67px; }


/*반응형 */
/* ****************** 서브 공통 ********************** */
 @media all and (max-width:1300px) {
   #subCont .tit{font-size: 3.2rem;word-break: keep-all;line-height: 1.5;}
   #subCont .sub-tit-area .dropdown-wr {left: 60px;}
 }
 @media all and (max-width:900px) {
   #subCont .sub-tit-area .dropdown .btn{width: 160px;}
   #subCont .sub-tit-area .dropdown-menu{width: 160px;}
    #subCont .sub-tit-area .dropdown-wr{left: 43px;}
 }
 @media all and (max-width:500px) {
   #subCont .sub-tit-area{height: 360px;}
   #subCont .sub-tit{font-size: 2.4rem;margin-bottom: 0.5em;}
   #subCont .tit{font-size: 3.1rem;}
   #subCont .sub-tit-area .dropdown-wr {left: 26px;}
   #subCont .sub-tit-area .dropdown .btn{width: 120px;}
   #subCont .sub-tit-area .dropdown-menu{width: 120px;}
 }
 @media all and (max-width:450px) {
  #subCont .sub-tit-area .tit-wr .txt{font-size: 1.95rem;}
  #subCont .sub-tit-area .tit-wr .tit{font-size: 3.8rem;}
  #subCont .sub-tit-area .dropdown-wr .home-btn{width: 45px;height: 45px;}
  #subCont .sub-tit-area .dropdown-wr .material-symbols-outlined{font-size: 21px;line-height: 44px;}

}

 @media all and (max-width:400px) {
  #subCont .sub-tit-area .dropdown-wr .home-btn{width: 40px;height: 40px;}
  #subCont .sub-tit-area .dropdown-wr .material-symbols-outlined {font-size: 19px;line-height: 40px;}
}



/* ****************** 회사소개 ********************** */
 @media all and (max-width:1200px) {
   #subCont.story-comp #sec01 .inner{flex-direction: column;}
  #subCont.story-comp #sec02 .img-box img{width: 100%}
  #subCont.story-comp #sec03 .tit-box{margin-left: 3em;margin-right: 2em;background-size: contain;}
}

 @media all and (max-width:800px) {
  #subCont.story-comp #sec01 .tit-box{width:100%;}
   #subCont.story-comp #sec01 .img-box{width: 100%;height: 250px;}
   #subCont.story-comp #sec01 .bo-radius{width: 100%;height: 100%;object-fit: cover;}
   #subCont.story-comp #sec02 .inner{grid-template-columns: 1fr}
   #subCont.story-comp #sec02 .img-box img{display: none}
   #subCont.story-comp #sec02 .img-box-mo img{display: block;}
   #subCont.story-comp #sec03{grid-template-columns: 1fr}
}
@media all and (max-width:590px) {
  #subCont.story-comp #sec01 .tit-box{width:100%;}
  #subCont.story-comp #sec01 .table .txt span{width:100%; margin-right:0;}
  #subCont.story-comp #sec01 .table .txt{padding-right:0; text-align: center;}
}
@media all and (max-width:500px) {
  
}


/* ****************** 탄생스토리 ********************** */
 @media all and (max-width:1200px) {
  #subCont.story-birth #sec02 .inner{display: grid;grid-template-columns: repeat(3,1fr);grid-gap: 20px;}
  #subCont.story-birth #sec02 img{width: 100%}
}

 @media all and (max-width:500px) {
  #subCont.story-birth #sec01 .txt-box { background: url("../img/birth_img02.jpg")no-repeat 58% / cover; text-align: left; }
   #subCont.story-birth #sec01 img {width: 89%;margin: 3em 1em 8em;}
   #subCont.story-birth #sec02 .inner{grid-gap: 8px}
 }


/* ****************** 생산설비현황 ********************** */
 @media all and (max-width:700px) {
  #subCont.story-status #sec01 .status-wr .img-box{grid-template-columns: repeat(3,1fr)}
}

@media all and (max-width:500px) {
  #subCont.story-status #sec01 .tit img.icon{width: 37px;}
  #subCont.story-status #sec01 .status-wr .img-box{grid-template-columns: repeat(2,1fr)}
}


/* ****************** 오시는길 ********************** */
@media all and (max-width:700px) {
  #subCont.story-map #sec01 .map-info .txt{padding:2em 1.5em;}
  #subCont.story-map #sec01 .map-info .txt li strong{width: 105px;}
}

@media all and (max-width:500px) {
  #subCont.story-map #sec01 .map-info .tit br.br_pc{display: none;}
  #subCont.story-map #sec01 .map-info .txt li{font-size: 1.8rem;}
  #subCont.story-map #sec01 .map-info .txt li strong{width: 87px;}
  #subCont.story-map #sec01 .map-info .txt li span.material-symbols-outlined{font-size: 20px;}
  #subCont.story-map .root_daum_roughmap .wrap_map{height: 400px !important}
}

@media all and (max-width:400px) {
  #subCont.story-map .root_daum_roughmap .wrap_map{height: 360px !important}
}
/* ****************** 브랜드소개 ********************** */
/* ****************** 차별성 ********************** */
 @media all and (max-width:1200px) {
  #subCont.brand-differ #sec01 .box-wr .box .text-box{padding:1.5em;}
}
 @media all and (max-width:900px) {
  #bo_gall #gall_ul{display: grid;grid-template-columns: repeat(3,1fr) !important;grid-gap: 10px;}
  .gall_row .col-gn-4{width:100% !important;}
  #subCont.brand-differ #sec01 .box-wr .box .text-box{padding: 0.8em;}
  #subCont.brand-differ #sec01 .box-wr .box01 .text-box img.icon{width: 45px;}
  #subCont.brand-differ #sec01 .box-wr .box02 .text-box img.icon{width: 55px;}
  #subCont.brand-differ #sec01 .box-wr .box03 .text-box img.icon{width: 44px;}

}
 @media all and (max-width:600px) {
  #bo_gall #gall_ul{display: grid;grid-template-columns: repeat(2,1fr) !important;grid-gap: 10px;}
   #subCont.brand-differ #sec01 .box-wr .box{grid-template-columns: 1fr}
 }
 @media all and (max-width:500px) {
  #bo_gall #gall_ul{display: grid;grid-template-columns: repeat(1,1fr) !important;grid-gap: 10px;}
  
 }


/* ****************** 제품소개 & 커뮤니티 (게시판) ********************** */
@media all and (min-width:601px){
  #bo_gall #gall_ul{display: grid;grid-template-columns: repeat(4,1fr);grid-gap: 15px;}
}

@media all and (max-width:600px) {
  .gall_row .col-gn-3{width:100% !important;}
  #bo_gall #gall_ul{display: grid;grid-template-columns: repeat(2,1fr);grid-gap: 15px;}
  #bo_gall .gall_li{width: 100%;}
  #subCont.product .gall_info_wr .subject{font-size: 2.5rem;}
}
@media all and (max-width:500px) {
  #bo_list_total{font-size: 2rem;}
  #bo_gall #gall_ul{display: grid;grid-template-columns: 1fr;grid-gap: 0;}

}



/* ****************** 제품소개 ********************** */
 @media all and (max-width:1100px) {
  #subCont.product .more-btn.one span{line-height: 55px;}
}
 @media all and (max-width:900px) {
  #subCont.product .more-btn{right: 1em;bottom: 1.5em;}
}



/* ****************** 커뮤니티 ********************** */
 @media all and (max-width:500px) {
   #subCont.community #bo_gall h3.subject{font-size: 2.2rem;line-height: 2;}
   #subCont.community #bo_gall .gall_text_href .content{font-size: 1.9rem;line-height: 1.5;}
   #subCont.community #bo_gall .gall_text_href .date{font-size: 1.6rem;}
 }


 /* ****************** 공지사항 ********************** */
@media all and (max-width:600px) {
  .bo_sch select{width:130px;}
  .bo_sch .sch_bar{width: 290px;}
}

@media all and (max-width:480px) {
  .bo_sch select{width:70px;}
  .bo_sch .sch_bar{width: 200px;}
}

@media all and (max-width:420px) {
    #subCont.community .tbl_head01 td .bo_tit{width: 180px;overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:break-word; word-break:break-all;}
}