.sub_con {width:100%;  padding-bottom:100px; margin:0 auto;   font-size:16.5px;  font-weight:300; line-height:1.55 ; }

.sub_con h3 {font-size:2em}
h3.tit {margin-bottom:50px; }

 aside {width:100%;  margin:0 auto; background-color:#fff; margin-top:0px;    border-bottom:1px solid #ddd }
 aside ul {width:100%; display:flex; justify-content:center;  }
 aside ul li { font-size:1.15em;  padding:18px 0;  margin:0 20px; position:relative; box-sizing:border-box; text-align:Center; font-weight:400;}
 aside ul li a {color:#222}
 aside ul li.ov {border-bottom:4px solid var(--main_c);}
 aside ul li.ov * {color:var(--main_c); font-weight:500}

hr.sub_hr {height:100px}


@media all and (max-width:900px) {
		.sub_con {font-size:15px }
		aside ul { padding:0 2%; box-sizing:border-box;  justify-content:flex-start; overflow-x:auto }
		aside ul li { font-size:1.06em; font-weight:300;  margin:0 10px;  white-space:nowrap}
		.sub_con h3 {font-size:1.6em}
		h3.tit {margin-bottom:30px; }
		hr.sub_hr {height:70px}

 }
 
.sub_vi {position:relative; width:100%;   height:700px; overflow:hidden}
.sub_vi .in {position:Absolute;  position:absolute; left:50%; top:55%; transform: translate(-50%, -50%);  color:#111;  text-shadow:4px 4px 10px rgba(0,0,0,.1)}
.sub_vi .in .flex {gap:20px; margin-top:20px}
.sub_vi .in h3 {font-weight:500; color:#fff; font-size:2em; text-shadow:2px 2px 10px rgba(0,0,0,.5) }
.sub_vi .in p {font-size:1.2em; font-weight:300; color:#fff; text-shadow:2px 2px 10px rgba(0,0,0,.5) }

.sub_vi .img {
  animation: zoomOut2 4s ease-out forwards;
  width: 100%;
  height: 100%;
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center center;
  
  }

  @keyframes zoomOut2 {
  0% {
    transform: translate(-50%, -50%) scale(1.15);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}


@media all and (max-width:900px) {
	.sub_vi {height:500px}
	.sub_vi .in {padding:0 10%; box-sizing:border-box}

	.sub_vi .in h3 {  font-size:1.6em;   }
	.sub_vi .in p {font-size:1em;  }


}
.about .b_t {font-size:22px; line-height:1.6; margin-top:20px; font-weight:500; padding:0 10%; box-sizing:border-box}
.about .flex {gap:60px}
.about .img {width:450px; flex-shrink:0; text-align:center}


@media all and (max-width:900px) {
	.about .b_t {padding:0; font-size:1.2em}
	.about .img {width:50%; margin:0 auto}

}


.history {width:100%; position:Relative; padding-top:35px; padding-bottom:35px;  display:flex; flex-wrap:wrap}
.history .line {height:100%; width:1px; background-color:var(--main_c); display:inline-block; position:absolute; top:0; left:calc(25% + 6px);}
.history  h3 {font-size:2rem; line-height:1; width:25%; flex-shrink:0; }
.history > div.box_wrap { width:75%; margin-left:auto; }
.history > div > div.box {width:100%; }
.history > div > div.box:nth-child(n + 2) {margin-top:45px}
.history > div > div.box p.year {width:100%; position:Relative; margin-bottom:22px; line-height:13px; font-weight:700; font-size:1.7em; flex-shrink:0; color:var(--main_c); padding-left:50px; box-sizing:border-box}
 .history > div > div.box p.year:before {width:13px; height:13px; background-color:var(--main_c);  box-sizing:border-box;  border-radius:50%; display:inline-block; content:''; position:absolute; left:0; top:0; }  
.history > div > div.box p.year:after { width:13px; height:13px;  content: '';display: block; background-color: var(--main_c); opacity:0.2; border-radius: 50%; position: absolute; left:0; top:0; z-index: -1;  animation: dots 1.5s ease-in-out infinite;  }
 

.history > div > div.box ul {  margin-bottom:-7px; width:100%; position:Relative}
.history > div > div.box ul li {display:flex; align-items:center; width:100%;  box-sizing:border-box; padding-left:50px;  margin-bottom:6px; position:relative  }


.history > div > div.box ul li span {width:90px; flex-shrink:0; font-weight:600; font-size:1.05em; color:#111; }
.history > div > div.box ul li p { }

.history .dep2 {margin-top:100px;   }

@keyframes dots {
    0%{
      opacity: 0.5;
      transform: scale(1);
    }
    100%{
      opacity: 0;
      transform: scale(3.5);
    }
}


@media all and (max-width:900px) {
		.history > div.box_wrap { width:100%; margin-bottom:100px}
		.history > div > div.box:nth-child(n + 2) {margin-top:40px}
		.history .dep2 {margin-top:0}
		.history  h3 {margin-bottom:50px; padding-left:50px; box-sizing:border-box}
		.history .line { left:calc(4% + 6px);}
		.history > div > div.box ul li {align-items:flex-start; }
		.history > div > div.box ul li span {width:30px; }
 }
 
.about5 ul {display:flex; flex-wrap:wrap; gap:50px 20px;  }
.about5 ul li {width:calc(20% - 16px); text-align:center; }
.about5 ul li div {width:100%; height:320px; border:1px solid #ddd;  box-sizing:border-box; box-sizing:border-box; padding:10px; display:flex; align-items:center; justify-content:Center; overflow:hidden }
.about5 ul li img { width:100% }
.about5 ul li h5 {font-size:1em; margin-top:8px; font-weight:300}



@media all and (max-width:1200px) {
	.about5 ul li div {height:22vw }

}
@media all and (max-width:900px) {

	.about5 ul {gap:20px 0; justify-content:space-between }
	.about5 ul li {width:49%;  }
	.about5 ul li div {height:61vw }


}
.organization {position:Relative; width:100%;  text-align:center}
.organization p {background-color:var(--main_c); color:#fff; font-size:1.2em; border-radius:50px;  font-weight:400; margin:0px auto; box-sizing:border-box; width:220px; line-height:61px; position:relative}
.organization p + p {background-color:var(--main_c2); margin-top:50px}
.organization p:after {content:''; width:calc(100% + 20px); height:calc(100% + 20px); position:absolute; background-color:#fff; border:2px solid var(--main_c); left:-10px; top:-10px; z-index:-9; box-sizing:border-box; border-radius:50px}
.organization p + p:after { border:2px solid var(--main_c2);  }
.organization p:before {width:1px; height:50px; content:''; display:inline-block; background-color:#ddd; bottom:-50px; left:50%; position:absolute; z-index:-9}

.organization ul {display:flex; gap:2%; margin-top:80px; position:relative}
.organization ul:before {width:calc(85.3% - 2px);  height:1px; content:''; display:inline-block; background-color:#ddd; top:-30px; left:calc(7.6% - 2px); position:absolute; z-index:-9}
.organization ul li {background-color:#f4fcf5;   box-sizing:border-box;  width:100%; padding:19px 0;  display:inline-block; text-align:center; position:relative; color:#333; font-size:1.05em; font-weight:400}
.organization ul li:before {width:1px; height:30px; content:''; display:inline-block; background-color:#ddd; top:-30px; left:50%; position:absolute; z-index:-9}
 

@media all and (max-width:1200px) {
	.organization ul {flex-wrap:wrap; justify-content:space-between; gap:0}
	.organization ul li {width:33%; padding:15px 0; margin-bottom:10px}
	.organization ul:before {left:16.5%; width:67%}
 
}

@media all and (max-width:900px) {
  .organization p {font-size:1.1em; width:150px; line-height:55px}


}

.map_info {margin-top:30px}
.map_info dl {display:flex; gap:30px}
.map_info dt {margin-right:-10px; font-weight:500}
.map_info dl + dl {margin-top:10px}

@media all and (max-width:900px) {
		.map_info dl {flex-wrap:wrap; gap:0 30px}
		.map_info dt {margin-right:-10px; }
		.map iframe {height:200px}


}
.prod-table {width:100%}
.prod-table th {padding:13px; background-color:#333; color:#fff; font-weight:500; border:1px solid #ddd}
.prod-table td {padding:13px; text-align:center; border:1px solid #ddd; color:#333}
.prod-table td:first-child {background-color:#f1f1f1;  }
.prod-table td:last-child {text-align:left}

@media (max-width: 900px) {
  .prod-table thead {
    display: none; /* 헤더 숨기기 */
  }
  .prod-table,
  .prod-table tbody,
  .prod-table tr,
  .prod-table td {
    display: block;
    width: 100%;
  }

  .prod-table tr {
     border: 1px solid #ddd;
     overflow: hidden;
     
    background: #fff;
  }

  /* 각 셀을 "라벨 : 값" 2열 그리드로 */
  .prod-table td {
    border: 0;
    border-bottom: 1px solid #f2f4f7;
    padding: 12px 14px;
    display:  flex;
	box-sizing:border-box; 
	text-align:left;
     
   }
  .prod-table td:last-child {
    border-bottom: 0;
  }
 .prod-table td:nth-child(1) {justify-content:center}
  /* 라벨(가상요소) 지정 — HTML 수정 없이 적용 */
   .prod-table td:nth-child(3)::before { content: "SIZE";  width:100px; flex-shrink:0}
  .prod-table td:nth-child(4)::before { content: "PURITY";  width:100px; flex-shrink:0 }
  .prod-table td:nth-child(5)::before { content: "USAGE";  width:100px; flex-shrink:0 }

  .prod-table td::before {
    font-weight: 700;
    color: #6b7280;
   }

   
  .prod-table td:nth-child(2) img {
    width: 100%;
    height: auto;
  }

   
}
 

.business h5 {font-size:1.25em; font-weight:600; margin-top:40px;   margin-bottom:10px}
.business h6 {font-size:1.07em; font-weight:600; margin-bottom:7px }
.business ul.basic {border:2px solid #ddd; box-sizing:border-box; width:100%; padding:20px; }
 
.business .bg_box {background:url('/common/img/business_bg.png') no-repeat center; background-size:cover;  text-align:center; color:#fff; width:100%; box-sizing:border-box; padding:80px 60px; display:inline-block}


@media (max-width: 900px) {

		.business .bg_box {padding:50px}
		.business h5 {font-size:1.2em;  margin-top:30px;  }

}