@charset "utf-8";

/* common */
@media(max-width:1279px){
	.hide-tab{ display: none; }
}
@media(max-width:767px){
	.hide-mob{ display: none; }
}

/* visual */
.vis{ margin-bottom: clamp(70px, calc( 144 / var(--inr) * 100vw ), 144px); display: flex; align-items: center; height: clamp(300px, calc( 500 / var(--inr) * 100vw ), 500px); padding-bottom: .9%; background: #000 no-repeat 50% / cover; box-sizing: border-box; text-align: center; color: #fff; }
.vis.about{ background-image: url('/images/content/vis-1.jpg'); }
.vis .primary{ font-size: clamp(16px, calc( 20 / var(--inr) * 100vw ), 20px); font-weight: 500; }
.vis .secondary{ margin-top: 0.26785714em; font: 700 clamp(30px, calc( 56 / var(--inr) * 100vw ), 56px) var(--font-nexon); }

/* breadcrumb */
.breadcrumb{ display: flex; align-items: center; justify-content: end; gap: 12px; padding-right: 2px; font-size: 15px; color: #aaa; }
.breadcrumb .home{ position: relative; left: 4px; width: 14px; fill:#ccc;fill-rule:evenodd;stroke-width:0px; }
.breadcrumb .arrow{ width: 4px; height: 8px; background: #ccc; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.breadcrumb .secondary{ font-weight: 500; color: var(--primary); }
@media(min-width:768px){
	.breadcrumb{ margin-bottom: -24px; }
}

/* title */
.pageTitle{ font-family: var(--font-nexon); }
.pageTitle .eng{font-family:"Roboto", sans-serif; text-transform: uppercase; font-weight: 400; font-size: clamp(14px, calc( 16 / var(--inr) * 100vw ), 16px); letter-spacing: 0; color: var(--primary); }
.pageTitle .kor{ margin: 0.54347826em 0 clamp(50px, calc( 70 / var(--inr) * 100vw ), 70px); text-wrap: pretty; font-size: clamp(20px, calc( 46 / var(--inr) * 100vw ), 46px); line-height: 1.60869565; letter-spacing: 0; word-break: keep-all; }

#content h2:not(.kor){margin-top: 80px;margin-bottom: 30px;font-size:25px;color:#111;font-weight:400;text-align:center;font-weight: 700;word-break:keep-all;}
@media screen and (max-width:680px){
	#content h2:not(.kor){font-size:25px;}
}
@media screen and (max-width:420px){
	#content h2:not(.kor){margin-top:30px;font-size: 20px;}   
}
@media screen and (max-width:370px){
	#content h2:not(.kor){font-size:25px;}
}

/* introduce */
.heritage{ position: relative; display: flex; align-items: end; justify-content: end; padding-top: clamp(184px, calc( 345 / var(--inr) * 100vw ), 345px); font-family: var(--font-nexon); font-weight: 700; }
.heritage::before{ content: ''; position: absolute; inset: 0 0 14.6%; background: url('/images/content/about-bg.jpg') no-repeat 50% / cover; }
.heritage .list{ position: relative; display: grid; grid-template-columns: 1fr 1fr; max-width: clamp(350px, calc( 565 / var(--inr) * 100vw ), 565px); width: 90%; padding-top: clamp(32px, calc( 61 / var(--inr) * 100vw ), 61px); box-sizing: border-box; text-align: center; background: #fff; }
.heritage .list li + li{ margin-left: -1px; border-left: 1px solid #e5e5e5; }
.heritage .icon{ margin: 23px auto 0; background: no-repeat 50% / contain; font-size: clamp(40px, calc( 56 / var(--inr) * 100vw ), 56px); }
.heritage .icon.i1{ aspect-ratio: 52/49; width: 0.92857143em; background-image: url('/images/content/about-i1.svg'); }
.heritage .icon.i2{ aspect-ratio: 1; width: 0.89285714em; background-image: url('/images/content/about-i2.svg'); }
.heritage .data{ margin: 0.08928571em 0 -0.125em; font-size: clamp(30px, calc( 56 / var(--inr) * 100vw ), 56px); }
.heritage .year::after{ content: 'years'; margin-left: .625em; font-size: clamp(14px, calc( 16 / var(--inr) * 100vw ), 16px); font-weight: 400; letter-spacing: 0; color: #7f7f7f; }
.heritage .title{ font-size: clamp(14px, calc( 16 / var(--inr) * 100vw ), 16px); letter-spacing: 0; color: var(--primary); }
.greeting{ margin-top: 2.44444444em; font-size: clamp(16px, calc( 18 / var(--inr) * 100vw ), 18px); }
.greeting p{ letter-spacing: 0; }
.greeting p:first-child{ font-size: 1.22222222em; font-weight: 600; line-height: 1.78; color: #202020; }
.greeting p:not(:first-child){ margin-top: 1.05555556em; line-height: 1.77777778; color: #666; }
@media(min-width:768px){
	.heritage .list{ padding-right: clamp(0px, calc( 16 / var(--inr) * 100vw ), 16px); }
	.heritage .list li{ padding-left: clamp(0px, calc( 30 / var(--inr) * 100vw ), 30px); }
}

/* business area */
.pageTitle span{color:var(--primary); }
.cert_info{display:flex; gap:10%; padding:76px 8%; box-sizing:border-box; background-color:#f3f3f3;}
.cert_info .cert_info_img{flex-basis:26%; }
.cert_info .cert_info_img img{border:1px solid #ededed; box-shadow:2.5px 10.5px 5.5px -43px rgba(0, 0, 0, 0.06), 20px 84px 44px -43px rgba(0, 0, 0, 0.12);}
.cert_info .cert_info_text{flex-basis:74%; padding-top:8%; padding-left:0; line-height:2; font-size: clamp(14px, calc( 24 / var(--inr) * 100vw ), 24px); font-weight:200;}
.cert_info .cert_info_text b{font-weight:500;}
/*.cert_info .cert_info_text br{display:none;}*/
.business_area{padding-top:100px;}
.business_area > ul{display:flex; justify-content:space-between; flex-wrap:wrap; gap:30px 20px;}
.business_area > ul > li{position:relative; flex: 1 0 20%; height:500px; font-family: var(--font-nexon); color:#fff; background-repeat:no-repeat; background-size:cover; box-sizing:border-box;}
.business_area > ul > li[data-img="construct"]{background-image:url(../images/content/business_construct.jpg);}
.business_area > ul > li[data-img="ship"]{background-image:url(../images/content/business_ship.jpg);}
.business_area > ul > li[data-img="automobile"]{background-image:url(../images/content/business_automobile.jpg);}
.business_area > ul > li[data-img="steel"]{background-image:url(../images/content/business_steel.jpg);}
.business_area > ul > li[data-img="factory"]{background-image:url(../images/content/business_factory.jpg);}
.business_area > ul > li[data-img="motor"]{background-image:url(../images/content/business_motor.jpg);}
.business_area > ul > li[data-img="unit"]{background-image:url(../images/content/business_unit.jpg);}
.business_area > ul > li > div{position:absolute; left:30px; bottom:44px;}
.business_area > ul > li .en{font-size:13px; font-weight:200; letter-spacing:0;}
.business_area > ul > li .ko{padding-top:6px; font-size: clamp(18px, calc( 32 / var(--inr) * 100vw ), 32px); font-weight:700;}
.business_area > ul > li.title > div{top:80px; bottom:initial;}
.business_area > ul > li.title .tit{font-size: clamp(20px, calc( 46 / var(--inr) * 100vw ), 46px); color:#202020; font-weight:600;}
.business_area > ul > li.title .desc{padding-top:30px; line-height:1.65; font-family:'Pretendard'; font-weight:200; font-size: clamp(13px, calc( 18 / var(--inr) * 100vw ), 18px); color:#666666;}
@media(max-width:1280px){
    .business_area > ul{justify-content: flex-start;}
	.business_area > ul > li{flex:0 1 32%; }
}
@media(max-width:1040px){
    .business_area > ul{gap:30px 15px;}
}
@media(max-width:860px){
    .cert_info{flex-direction:column; text-align:center; padding:10%;}
    .cert_info .cert_info_text{padding-top:15%;}
    
    .business_area > ul{justify-content:space-between;}
	.business_area > ul > li{flex:0 1 48%; height:360px; background-size:cover; background-position: 50% 50%;}
    .business_area > ul > li.title > div{left:10px;}
    .business_area > ul > li.title .desc br{display:none;}
}
@media(max-width:420px){
    .business_area > ul > li{flex: 0 1 47%;}
}
@media(max-width:360px){
    .business_area{padding-top:0;}
    .business_area > ul{gap:20px;}
    .business_area > ul > li{flex:0 1 100%;}
    .business_area > ul > li.title{height:200px;}
}


/* location */
.location .layout{ display: grid; gap: 45px; }
.location .layout *{ letter-spacing: 0; }
.location .info{ display: flex; flex-wrap: wrap; gap: 1.08333333em 2.375em; font-size: clamp(16px, calc( 24 / var(--inr) * 100vw ), 24px); }
.location .info li:first-child{ width: 100%; font: 700 1.16666667em var(--font-nexon); }
.location .head{ margin-right: 1.33333333em; text-transform: uppercase; font-family: var(--font-nexon); }
.location .btn{ display: flex; align-items: center; justify-content: center; max-width: 17.5em; width: 100%; height: 4.75em; padding-top: .125em; border: 1px solid currentColor; box-sizing: border-box; font-family: var(--font-nexon); font-size: clamp(14px, calc( 16 / var(--inr) * 100vw ), 16px); font-weight: 700; color: #000; }
.location :is(.map, .map img){ width: 100%; }
@media(min-width:768px){
	.location .layout{ grid-template-columns: 1fr 280px; }
	.location .btn{ margin-top: 7px; }
	.location .map{ grid-column: 1 / 3; }
}

/* footer */
footer{ margin-top: clamp(70px, calc( 103 / var(--inr) * 100vw ), 103px); }