/* sub visual */
.subVisual{ 
	&{ overflow: hidden; position:relative; padding: calc( var(--header-height) + clamp(70rem, calc( 115 / var(--inr) * 100vw ), 115rem)) 0 clamp(70rem, calc( 105 / var(--inr) * 100vw ), 105rem); text-align:center; color: #fff; }
	&::before{ content: ''; position: absolute; inset: 0; background: no-repeat 50% / cover; }
	.subHeading{ min-height: 1.5em; font-weight: 500; font-size: 20rem; color: #dce0df; text-shadow: 0 5rem 10rem rgba(85, 85, 85, 0.2); }
	.heading{ margin-top: 2rem; min-height: 1.5em; font: 700 var(--fs45) var(--font-rok);  text-shadow: 0 10rem 20rem rgba(85, 85, 85, 0.25); }
	.breadcrumb{ margin-top: 24rem; display: flex; align-items: center; justify-content: center; gap: 19rem; min-height: 1.5em; font-size: 15rem; }
	.home{ translate: 1rem 1rem; width: 12rem; height: 12rem; fill: currentColor; }
	.part.isFallback{ display: none; }
	.dot{ margin-left: 2rem; width: 5rem; height: 5rem; background: currentColor; border-radius: 50%; opacity: .4; }
	.dot:has(+.isFallback){ display: none; }
	@media(min-width:768px){
		&.business::before{ background-image:url('/images/content/subVisual-1-pc.webp'); }
		&.about::before{ background-image:url('/images/content/subVisual-2-pc.webp'); }
		&.esg::before{ background-image:url('/images/content/subVisual-3-pc.webp'); }
		&.customer::before{ background-image:url('/images/content/subVisual-4-pc.webp'); }
		&.common::before{ background-image:url('/images/content/subVisual-common-pc.webp'); }
		&.breadcrumb{ position: relative; top: -2rem; right: -1rem; }
	}
	@media(max-width:767px){
		&.business::before{ background-image:url('/images/content/subVisual-1-mob.webp'); }
		&.about::before{ background-image:url('/images/content/subVisual-2-mob.webp'); }
		&.esg::before{ background-image:url('/images/content/subVisual-3-mob.webp'); }
		&.customer::before{ background-image:url('/images/content/subVisual-4-mob.webp'); }
		&.common::before{ background-image:url('/images/content/subVisual-common-mob.webp'); }
	}
}
@media(prefers-reduced-motion:no-preference){
	.subVisual::before{ animation: subVisual_bg 1.8s both; }
	@keyframes subVisual_bg {
		0%{ transform: scale(1.05); }
		100%{ transform: scale(1); }
	}
	.subVisual .inr > *{ opacity: 0; animation: subVisualText .6s .2s both; }
	.subVisual .inr > *:nth-child(2){ animation-delay: .4s; }
	@keyframes subVisualText {
		0%{ transform: translateY(40rem); opacity: 0; }
		100%{ transform: translateY(0); opacity: 1; }
	}
}

/* common content */
#content{ min-height:300px; padding: clamp(70rem, calc( 100 / var(--inr) * 100vw ), 100rem) 0; }
.sub_title{ margin-bottom: 3.75em;}
.sub_title h2{ text-align:center; font-size:var(--fs35);}
h2.subTit1{position:relative; padding-top:15rem; margin-bottom:30rem; font-size:var(--fs35); color:#000; border-top:1px solid #ededed;}
h2.subTit1:before{content:''; display:block; position:absolute; left:0; top:-4rem; width:120rem; height:6rem; background:var(--primary);}
h2.subTit2{position:relative; padding-left:20rem; margin-bottom:15rem; font-size:var(--fs22); color:#111;}
h2.subTit2:before{content:''; display:block; position:absolute; left:0; top:10rem; width:12rem; height:12rem; background:var(--primary);}

ul.imgList.grid2{display:grid; grid-template-columns:repeat(2, 1fr); gap:30rem;}
ul.imgList.grid3{display:grid; grid-template-columns:repeat(3, 1fr); gap:30rem;}
ul.imgList.grid4{display:grid; grid-template-columns:repeat(4, 1fr); gap:30rem;}
ul.imgList .img{display:block; width:100%;}
ul.imgList img{display:block; width:100%;}
ul.imgList em{display:block; margin-top:15rem; padding-bottom:15rem; font-size:18rem; color:#333; font-weight:500;}
.imgList.hasVideo :where(img){ aspect-ratio: 447/335; object-fit: cover; }
.imgList.hasVideo > li:first-child{ grid-column: 1/-1; }
.imgList video{ display: block; width: 100%; }
.imgList figure{ position: relative; }
.imgList figcaption{ position: absolute; inset: auto 0 0; padding: 10rem; background: #00000080; font-size: clamp(14rem, calc( 16 / var(--inr) * 100vw ), 16rem); color: #fff; text-align: center; }
ul.txtboxList1.grid2{display:grid; grid-template-columns:repeat(2, 1fr); gap:30rem;}
ul.txtboxList1.grid3{display:grid; grid-template-columns:repeat(3, 1fr); gap:30rem;}
ul.txtboxList1 li{padding:30rem; border:1px solid #ddd;}
ul.txtboxList1 span{display:block; margin-bottom:20rem; font-size:16rem; font-weight:600; font-family:var(--font-gol); color:var(--primary);}
ul.txtboxList1 em{display:block; margin-bottom:10rem; font-weight:700; font-size:20rem; color:#111;}
ul.txtboxList1 i{font-style:normal;}
ul.txtboxList1 p{font-size:18rem; color:#444;}

li.bullet1{position:relative; padding-left:12rem; font-size:18rem; color:#444;}
li.bullet1:before{content:'·'; display:block; position:absolute; left:0; top:0; font-weight:900;}
li.bullet1+li.bullet1{margin-top:8rem;}

.mt40{margin-top:40rem;}
.mt120{margin-top:120rem;}

.common_table{ border-top: 2px solid #222; text-align: center; }
.common_table :is(th, td){ padding: 14rem 1em 12rem; border: 1rem solid #e5e5e5; }
.common_table col:is(:nth-of-type(1), :nth-of-type(2)){ width: 18.33333333%; }
.common_table :is(th, td):first-child{ border-left: 0; }
.common_table :is(th, td):last-child{ border-right: 0; }
.common_table :is(thead, tfoot){ background: #f6f7f9; font-size: 17rem; font-weight: 500; }
.tableWrap table.table{margin-top:0;}
.tableWrap table.table thead th{background:#e5edef;}
.tableWrap table.table th, .tableWrap table.table td{padding:14rem 10rem;}
@media(max-width:1279px){
    ul.imgList.grid2{gap:15rem;}
    ul.imgList.grid3{gap:15rem;}
    ul.imgList.grid4{grid-template-columns:repeat(3, 1fr); gap:15rem;}
    ul.txtboxList1.grid2{gap:15rem;}
    ul.txtboxList1.grid3{gap:15rem;}
    ul.txtboxList1 li{padding:20rem 15rem;}
    
    .mt120{margin-top:90rem;}
}
@media(max-width:767px){
    h2.subTit1{font-size:28rem;}
    
    ul.imgList.grid3{grid-template-columns:repeat(2, 1fr);}
    ul.imgList.grid4{grid-template-columns:repeat(2, 1fr);}
    ul.txtboxList1.grid2,
    ul.txtboxList1.grid3{grid-template-columns:repeat(1, 1fr);}
    
    .mt40{margin-top:30rem;}
    .mt120{margin-top:60rem;}
}
@media(max-width:520px){
    ul.imgList.grid2{grid-template-columns:repeat(1, 1fr); gap:10rem;}
    ul.imgList.grid3{grid-template-columns:repeat(1, 1fr); gap:10rem;}
    ul.imgList.grid4{grid-template-columns:repeat(1, 1fr); gap:10rem;}
}

/* 사업분야 공통 */
.sideBox1{display:flex;}
.sideBox1 span{display:block; padding-right:30rem; width:45%;}
.sideBox1 img{display:block; width:100%;}
.sideBox1 .tableWrap{width:55%;}
.sideBox1 .tableWrap table.table tbody th{background:#f5f8f9;}
/* 사업분야 > 측면가공기 */
.sideCnt1 h3{padding:12rem 15rem; font-size:20rem; background:#222; color:#fff; text-align:center; font-weight:500;}
.sideCnt1 ul{padding:40rem 30rem; border:1px solid #ddd; border-top:0;}
.sideCnt2 .sideSpec{width:100%;}
.sideCnt2 table.table{width:100%;}
.sideSpec table.table{width:100%;}
.sideSpec table.table tbody th{background:#e5edef;}
.sideSpec table.table tbody td:nth-of-type(1){background:#f5f8f9; text-align:center;}
.sideCnt2_video_only{ display: block; width: 100%; aspect-ratio: 16/9; }
.sideCnt2_video{display:flex; justify-content:space-between;}
.sideCnt2_video__wrap{width:calc(50% - 15rem);}
.sideCnt2_video__div{position:relative; padding-bottom:56.25%; height:0; width:100%; overflow:hidden;}
.sideCnt2_video__iframe{position:absolute; top:0; left:0;}
.sideCnt3_info .sideSpec.tableWrap table.table tbody th{background:#e5edef;}
.sideOption_img{display:flex; justify-content:space-between;}
.sideOption_img span{display:block; width:calc(50% - 15rem);}
.sideOption_img img{display:block; width:100%;}
.sideCnt5{font-size:0; display:flex; justify-content:center;}
.sidePurchase_btn{display:inline-block; padding:17rem 46rem 16rem; border:1px solid #333; background:#333; font-size:17rem; color:#fff; font-weight:500; border-radius:5em; transition:0.3s ease;}
@media(hover:hover){
    .sidePurchase_btn:hover{background:#000;}
}
@media(max-width:1279px){
    .sideBox1 span{padding-right:20rem;}
    .sideCnt1 ul{padding:25rem 15rem;}
    .sideCnt2_video__wrap,
    .sideOption_img span{width:calc(50% - 10rem);}
}
@media(max-width:767px){
    .sideBox1{display:block;}
    .sideBox1 span{margin-bottom:15rem; padding-right:0; width:100%;}
    .sideBox1 .tableWrap{width:100%;}
    .biz .tableWrap{overflow-x:scroll;}
    .sideCnt2_video{display:block;}
    .sideCnt2_video__wrap{width:100%;}
    .sideCnt2_video > div{margin-bottom:15rem;}
    .sideOption_img{display:block;}
    .sideOption_img span{width:100%;}
    .sideOption_img span+span{margin-top:15rem;}
}


/* 사업분야 > 이차전지 */
.batteryCnt4_img{padding:30rem 20rem; border:1px solid #ddd;}
.batteryCnt4_img img{display:block; margin:auto; max-width:800rem; width:100%;}
.batteryCnt4_table{margin-top:20rem; width:100%;}
.batteryCnt4_table table{width:100%;}
.batteryCnt4_table table td:last-child{text-align:left;}


/* 사업분야 > 공작기계 */
.mtCnt1_boxWrap{display:grid; grid-template-columns:1fr 1fr; gap:40rem 30rem;}
.mtCnt1_box__img{display:grid; grid-template-columns:1fr 1fr; gap:10rem;}
.mtCnt1_box__img img{display:block; width:100%;}
@media(max-width:1279px){
    .mtCnt1_boxWrap{grid-template-columns:1fr; gap:40rem;}
}
@media(max-width:767px){
    .mtCnt1_boxWrap{gap:30rem;}
}


/* 회사소개 > 인사말 */
.greet h2{font-size:var(--fs40); color:var(--gray); font-weight:500;}
.greet h2 em{color:var(--primary); font-weight:bold;}
.greetImg{display:block; margin:50rem 0; width:100%;}
.greetImg img{display:block; width:100%; height:100%; object-fit:cover; object-position:left;}
.greetTxt{position:relative; padding-left:30%;}
.greetTxt:before{content:''; display:block; position:absolute; left:0; top:6rem; width:300rem; height:3rem; background:var(--primary);}
.greetTxt p{font-size:18rem; color:#444;}
.greetTxt p+p{margin-top:15rem;}
@media(max-width:1279px){
    .greetImg{margin:30rem 0 40rem;}
    .greetTxt{padding-left:20%;}
    .greetTxt:before{top:7rem; width:120rem;}
    .greetTxt p > br{display:none;}
}
@media(max-width:767px){
    .greet h2{font-size:28rem;}
    .greetImg{margin:20rem 0 30rem; height:170rem;}
    .greetTxt{padding-left:0;}
    .greetTxt:before{display:none;}
}


/* 회사소개 > 연혁 */
.history{position:relative;}
.historyBox{position:relative; padding-left:clamp(20rem, 6.07142857%, 85rem); box-sizing:border-box;}
.historyBox + div{ margin-top: 35rem; }
.historyBox::before{ content: ''; position:absolute; top:10rem; left:-6rem; width:12rem; height:12rem; background:#fff; border:3px solid var(--primary); border-radius:50%; box-sizing:border-box; }
.historyBox_year{margin-bottom:15rem; font-size:var(--fs30); font-weight:800; color:var(--primary);}
.historyBox_ul1{font-size:18rem; color:#444; }
.historyBox_ul1__li{display:flex; margin-top: 7rem; }
.historyBox_ul1__li.mt15{margin-top:15rem;}
.historyBox_ul1__li em{font-weight:bold; color:#111; display:block; width:125rem;}
.historyBox_ul1__li p{width:calc(100% - 125rem);}
.historyBar{ overflow: hidden; position: absolute; inset: 14rem 0 6rem; width: 1px; background: #ddd; z-index: -1; }
.historyBar::before{ content: ''; position: absolute; inset: 0; background: var(--primary); z-index: 1; }
@media(prefers-reduced-motion:no-preference){
	.historyBox,
	.historyBox::before{ transition: .4s; }
	.historyBox:not(.seActive){ opacity: .7; }
	.historyBox:not(.seActive)::before{ border-color: #ddd; }
	.historyBar::before{ height: var(--height); }
}
@media(min-width:768px){
	.historyBox{width:50%; }
	.historyBox:nth-child(odd){ margin-left: auto; }
	.historyBox:nth-child(even){ padding: 0 clamp(20rem, 6.07142857%, 85rem) 0 0; text-align: right; }
	.historyBox:nth-child(even)::before{ left: auto; right: -6rem;  }
    .historyBox:nth-child(even) li{flex-direction:row-reverse;}
	.historyBar{ margin: auto; }
}
@media(max-width:767px){
    .historyBox::before{top:15rem;}
    .historyBar{inset:16rem 0 6rem;}
}


/* 회사소개 > 조직도 */
.group img{display:block; margin:auto; max-width:600rem; width:100%;}


/* 회사소개 > 오시는 길 */
.location{display:flex;}
.locationInfo{display:flex; flex-direction:column; justify-content:space-between; padding:20rem 0; width:45%; padding-right:80rem;}
.locationInfo h2{font:700 var(--fs40) var(--font-gol);}
.locationInfo span{color:var(--gray);}
.locationInfo ul{border-top:3px solid var(--primary);}
.locationInfo li{display:flex; padding:15rem; font-size:18rem; border-bottom:1px dashed #ccc;}
.locationInfo em{display:block; width:80rem; font-weight:600; color:#111;}
.locationInfo a{display:block; width:calc(100% - 80rem); color:#444;}
.locationMap{width:55% !important; height:500rem;}
.locationMap .wrap_map{height:100% !important;}
.locationMap .map_border,
.locationMap .wrap_controllers{display:none !important;}
@media(max-width:1279px){
    .locationInfo{padding-right:40rem;}
    .locationMap{height:400rem;}
}
@media(max-width:767px){
    .location{flex-direction:column-reverse;}
    .locationInfo{padding:0; margin-top:30rem; width:100%;}
    .locationInfo ul{margin-top:20rem;}
    .locationMap{width:100% !important; height:500rem;}
}


/* ESG */
.ESG{display:grid; grid-template-columns:repeat(3, 1fr); gap:40rem; margin:auto;}
.esgBox{position:relative; padding:40rem 30rem; background:#fff; box-shadow:20rem 20rem 50rem rgba(0,0,0,0.15);}
.esgBox:before{content:''; display:block; position:absolute; left:50%; top:0; transform:translateX(-50%); width:0; height:5rem; background:var(--primary); transition:0.3s ease;}
.esgBox span{display:block; margin:auto; width:200rem;}
.esgBox img{display:block; width:100%;}
.esgBox_txt{margin-top:25rem; text-align:center;}
.esgBox_txt em{display:block; margin-bottom:25rem; font-size:var(--fs30); color:#111; font-weight:600;}
.esgBox_txt em i{display:block; font-size:18rem; color:var(--primary); font-weight:500; font-style:normal;}
.esgBox_txt p{display:block; color:#555; font-size:18rem;}
@media(hover:hover){
    .esgBox:hover:before{width:100%;}
}
@media(max-width:1279px){
    .ESG{gap:20rem;}
    .esgBox{padding:30rem 20rem;}
}
@media(max-width:767px){
    .ESG{display:block;}
    .esgBox{display:flex;}
    .esgBox+.esgBox{margin-top:20rem;}
    .esgBox span{width:120rem;}
    .esgBox_txt{margin-top:0; padding-left:30rem; width:calc(100% - 120rem); text-align:left;}
    .esgBox_txt em{margin-bottom:10rem;}
    .esgBox_txt em i{display:inline-block; margin-left:15rem;}
}


/* 구매문의 */
.purchase__list{ display: grid; gap: 40rem;
    input:not([type="checkbox"]), select{ width: 100%; height: 52rem; }
    .bbsForm_data:not(:first-child){ margin-top: 0; }
    #option{ display: grid; }
    @media(min-width:768px){
        grid-template-columns: repeat(3, 1fr);
        .bbsForm_data:has(textarea){ grid-column: 1/4; }
    }
    @media(min-width:1280px){
        grid-template-columns: repeat(4, 1fr);
        .bbsForm_data:has(textarea){ grid-column: 1/5; }
    }
    @media(max-width:1279px){
        label small{ display: none; }
    }
    @media(max-width:768px){
        .wdt30{ max-width: none; }
    }
}