@charset "utf-8";

/* Facilities introduction */
.subcont-area.full {
    margin-bottom: 0;
}
.subcont-area.full .sub-cont {
    width: 100%;
    max-width: 100%;
}
.subcont-area .sub-cont.full {
    background-color: #f6fafd;
    width: 100%;
    max-width: 100%;
    padding: 60px 0 120px 0;
}
.container-in.full {
    background-color: #f6fafd;
}
h2 {
    font-size: var(--font-size-18);
    font-weight: 700;
}	
.sub-h-txt-area {
	padding-left: var(--padding-20-15);
    padding-right: var(--padding-20-15);
}
.sub-h-txt {
    background-color: #f6fafd;
    margin-top: var(--margin-80);
    font-size: var(--font-size-18);
    line-height: var(--line-height-30);
    font-weight: 500;
    padding: 20px 20px;
    max-width: var(--max-width-sub);
    margin-right: auto;
    margin-left: auto;
}
.sub-h-txt span dd {
    font-weight: 600;
    color: var(--sub-color-0);
}
.subtit-area h1 {
	padding-left: var(--padding-20-15);
    padding-right: var(--padding-20-15);
}
.container {
    max-width: var(--max-width-sub);
    margin: 0 auto;
}
.container.full {
    max-width: 100%;
    margin: 0 auto;
}
.container-in-area {
	padding-left: var(--padding-20-15);
    padding-right: var(--padding-20-15);
}
.container-in {
    max-width: var(--max-width-sub);
    margin: 0 auto;
}
.container-in.full {
    max-width: 100%;
    padding-top: var(--padding-120);
    padding-bottom: var(--padding-120);
	padding-left: var(--padding-20-15);
    padding-right: var(--padding-20-15);
}
.factory-name {
    color: var(--sub-color-0);
	font-size: var(--font-size-20);
    /*margin-top: 60px;*/    
    margin-bottom: var(--margin-40);  
	display: flex;
    align-items: center;
    gap: 10px
}
.factory-name.full {
    max-width: var(--max-width-sub);
    margin-right: auto;
    margin-left: auto;
}

.category-section-area {
	padding-left: var(--padding-20-15);
    padding-right: var(--padding-20-15);
}
.category-section {
    display: flex;
    gap: var(--gap-80);
    margin-bottom: 30px;
}
.category-section.full {
    max-width: var(--max-width-sub);
    margin-right: auto;
    margin-left: auto;
}
.category-section.m-botton-0 {
    margin-bottom: 0px;
}
.category-section.m-botton-60 {
    margin-bottom: var(--margin-60);
}
.category-section.m-botton-120 {
    margin-bottom: var(--margin-120);
}

.category-header {
    width: 25%;
}

.category-header h2 {
    font-size: var(--font-size-20);
    color: #333;
    margin-bottom: 20px;
}

.category-img {
    display: flex;
    width: 100%;
    height: auto;
    border: solid 1px #cecece;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: radial-gradient(circle, #ffffff 0%, #5e79ae 100%);
}
.category-img.pd-60 {
    padding: 20px 60px;
}
.category-img.pd-100 {
    padding: 20px 100px;
}
.category-img.full img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
}
.category-img img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
}

.content-wrapper {
    flex: 1;
}

.sub-category h3 {
    font-size: var(--font-size-18);
    color: #333;
    margin-bottom: 15px;
}

.sub-category h3 span {
    color: #0088cc;
    margin-right: 5px;
}

.product-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 30px;
}

.product-list li {
    background: #f4f7f9;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: var(--font-size-16);
    display: flex;
}

.product-list li span {
    color: #00aaff;
    margin-right: 10px;
}
.product-list li span.txt {
    color: #111111;
    margin-right: 0px;
}

.divider {   
	display: block;
    border: 0;
    border-top: 1px dashed #ccc;
    margin-top: var(--margin-40);
    margin-bottom: var(--margin-40);
}

.divider.full {   
    max-width: var(--max-width-sub);
    margin-right: auto;
    margin-left: auto;
}

/* 터빈 섹션용 그리드 레이아웃 */
.product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    flex: 1;
	align-content: center;
}
.product-grid {
    margin-top: 30px;
}

.grid-item {
    font-size: var(--font-size-16);
    display: flex;
    /*align-items: center;*/
}

.grid-item span {
    color: #0088cc;
    margin-right: 10px;
    font-weight: 600;
}
.grid-item span.txt {
    color: #111111;
    margin-right: 0px;
    font-weight: 400;
}
.tabs-area {
	padding-left: var(--padding-20-15);
    padding-right: var(--padding-20-15);
}

ul.tabs{
  margin-top: var(--margin-60);
  margin-bottom: var(--margin-60);
  padding: 0px;
  list-style: none;
  text-align: center;
}
ul.tabs li{
  background: none;
  color: var(--main-color-0);
  display: inline-block;
  padding: var(--padding-10) var(--padding-40);
  cursor: pointer;
  border: 1px solid var(--main-color-0);
  border-radius: 30px;
}
ul.tabs li h2{
	font-weight: 400;
}

ul.tabs li.current{
  background: var(--main-color-0);
  border: solid 1px var(--sub-color-0);
  color: #fff;
}
ul.tabs li.current h2{
	font-weight: 700;
}

ul.tabs li:focus, ul.tabs li:hover, ul.tabs li:active {text-decoration:none;background:var(--main-color-0);color:#fff}

.tab-content{
  display: none;  
  /*border-top:3px solid var(--sub-color-0);*/
}

.tab-content.current{
  display: inherit;
}


/* Large Devices, Wide Screens : ~ 1200px */
@media only screen and (max-width : 1200px) {
	.info-section { grid-template-columns: 1fr; }
	ul.tabs li {
		width: calc(50% - 2.1px);
		text-align: center;
	}
	.info-item-area {
		flex-direction: column;
	}
	.label {
		gap: 5px;
	}
	.content {
		width: 100%;
		padding-left: 30px;
	}
	.product-grid {
		grid-template-columns: 1fr;
	}
}


/* Medium Devices, Desktops : ~ 992px */
@media only screen and (max-width : 992px) {

}


/* Small Devices, Tablets : ~ 768px */
@media only screen and (max-width : 768px) {
	.category-section {
		flex-direction: column;
	}
	.category-header {
		width: 100%;
	}
	.product-list {
		grid-template-columns: 1fr;
	}
	.product-grid {
		margin-top: 0;
	}
	.category-section {
		margin-bottom: 0;
	}
}


/* Extra Small Devices, Phones : ~ 480px */
@media only screen and (max-width : 480px) {

}


/* Custom, iPhone Retina : ~ 320px */
@media only screen and (max-width : 320px) {

}