@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */
.root_daum_roughmap {width:100% !important; height:clamp(240px, calc( 450 / var(--inner) * 100vw ), 450px) !important;}
.root_daum_roughmap .wrap_map {height:clamp(240px, calc( 450 / var(--inner) * 100vw ), 450px) !important;}
.roughmap_lebel_text {line-height:0 !important; font-size:0 !important;}
.roughmap_lebel_text:after {content:"(주)에이치엘산업"; font-size:12px; line-height:15px;}

.bullet-item .bullet-list {position:relative; padding-left: clamp(16px, calc( 22 / var(--inner) * 100vw ), 22px); margin-top:10px; line-height:1.3; color: #454545;}
.bullet-item .bullet-list:first-child {margin-top:0;}
.bullet-item .bullet-list::before {position:absolute; content:''; left:0; top:7px; width:5px; height:5px; background:var(--color-1); border-radius: 50%;}

.bg-gray {background:#fafafa;}
.textbg {padding-left:34px; margin-bottom:  clamp(20px, calc( 38 / var(--inner) * 100vw ), 38px); font-size: clamp(20px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: bold; background:url(../images/sub/textbg.png) no-repeat left center;}
.textbg.type2 {color: #fff; background: url(../images/sub/textbg2.png) no-repeat left center;}
.subsec-pd {padding: clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px) 0;}

.topbg .bg {padding:  clamp(60px, calc( 120 / var(--inner) * 100vw ), 120px) 0; text-align: center; color: #fff; background: url(../images/sub/bu-bg.jpg ) no-repeat 50% 50%; background-size: cover;}
.topbg .tt {font-size:  clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); font-weight: 600; }
.topbg .text1 {padding-top: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px); font-size:  clamp(18px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: 600;}
.topbg .text2 {padding-top: 10px; line-height: 1.6;}

.secitems {padding-top: clamp(35px, calc( 60 / var(--inner) * 100vw ), 60px);}
.seclist {padding-top: clamp(30px, calc( 40 / var(--inner) * 100vw ), 40px);}
.seclist:first-child {padding-top: 0;}
.seclist .imgbx {flex: 1 0 clamp(480px, calc( 580 / var(--inner) * 100vw ), 580px); max-width: clamp(480px, calc( 580 / var(--inner) * 100vw ), 580px); margin-right: clamp(18px, calc( 40 / var(--inner) * 100vw ), 40px);}
.seclist .textbx {flex: 1 0 auto; width: 1%; padding-top: clamp(20px, calc( 38 / var(--inner) * 100vw ), 38px);}
.seclist .solu {display: block; font-weight: 600; color:var(--color-1);}
.seclist .tit {padding-top:12px; font-size:clamp(20px, calc( 32 / var(--inner) * 100vw ), 32px); font-weight: 600;}
.seclist .decbx {padding-top: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px);}
.seclist .declist {display:flex; color: #454545; line-height: 1.6;}
.seclist .name {display: inline-block; padding-right: 5px; white-space: nowrap;}
.seclist .flxWrap.reverse {flex-direction: row-reverse;}
.seclist .flxWrap.reverse .imgbx {margin-right: 0; margin-left: clamp(18px, calc( 40 / var(--inner) * 100vw ), 40px);}
.haveitems {margin-top: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}
.haveitems .title {margin-bottom:clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px); font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 600;}
.haveitem {display: flex; flex-wrap: wrap; margin: -20px;}
.havelist {flex: 1 0 33.33%; max-width: 33.33%; padding: 20px;}
.havelist .image {margin-bottom:clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px);}
.havelist table {border-top:2px solid #555555;} 
.havelist table th,
.havelist table td {padding: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px) clamp(5px, calc( 10 / var(--inner) * 100vw ), 10px) ; text-align: center; border-bottom:1px solid #ddd; border-right: 1px solid #ddd; letter-spacing: -1px;}
.havelist table th:last-child,
.havelist table td:last-child {border-right: 0;}
.havelist table th {font-weight: 600; background: #f9f9f9;}
.havelist table td {font-weight: 400; color: #454545;}
.pduitem {display: flex; flex-wrap: wrap; margin: -20px;}
.pdulist {flex: 1 0 25%; max-width: 25%; padding: 20px;}
.pdulist .image {position:relative; padding-bottom:100%; overflow:hidden; border-radius: 16px;}
.pdulist .image img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:auto; max-width:100%; min-height:100%;}

.tabitem {display: flex; justify-content: center; flex-wrap: wrap; margin:-6px ;}
.tablist {padding: 6px;}
.tablist .link {display: flex; align-items: center; justify-content: center; padding: 0 10px; border: 1px solid #ddd; border-radius: 24px; font-size: clamp(13px, calc( 18 / var(--inner) * 100vw ), 18px); color: #454545; height: clamp(38px, calc( 48 / var(--inner) * 100vw ), 48px); width: clamp(76px, calc( 109 / var(--inner) * 100vw ), 109px); letter-spacing: -1px; text-align:center;}
.tablist .link.active {background:var(--color-1); color: #fff;}
.busi2Flxbx .imgbx {flex: 1 0 clamp(480px, calc( 580 / var(--inner) * 100vw ), 580px); max-width: clamp(480px, calc( 580 / var(--inner) * 100vw ), 580px); margin-right:clamp(18px, calc( 40 / var(--inner) * 100vw ), 40px) ;}
.busi2Flxbx .textbx {flex: 1 0 auto; width: 1%; letter-spacing: -1px;}
.busi2Flxbx .subtt {display: block; color: var(--color-1); font-weight: 600; text-transform: uppercase;}
.busi2Flxbx .maintt {padding-top:12px; font-size:clamp(22px, calc( 32 / var(--inner) * 100vw ), 32px); font-weight: 600;}
.busi2Flxbx .dec {padding-top:clamp(15px, calc( 28 / var(--inner) * 100vw ), 28px); line-height: 1.6; color: #454545;}
.busiicnitem {display: flex; flex-wrap: wrap; margin: -20px;}
.busiicnlist {flex: 1 0 33.33%; max-width: 33.33%; padding:  20px;}
.busiicnlist .inner {padding: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px) clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); border-radius: 16px; border: 1px solid #ddd; text-align: center; height: 100%;}
.busiicnlist .icn img {height: clamp(60px, calc( 98 / var(--inner) * 100vw ), 98px);}
.busiicnlist .name {padding-top: clamp(20px, calc( 38 / var(--inner) * 100vw ), 38px); font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 600; color:var(--color-1);}
.busiicnlist .text {padding-top:10px; color: #454545; line-height: 1.7;}
.busiicnitem.type2 .busiicnlist {flex: 1 0 50%; max-width: 50%; }
.busiicn-text {color: #454545; line-height: 1.5;} 
.busiicnitem + .busiicn-text {padding-top:clamp(20px, calc( 36 / var(--inner) * 100vw ), 36px);}
.busiicn-text + .busiicnitem {padding-top:clamp(20px, calc( 36 / var(--inner) * 100vw ), 36px);}

.busibgitem {display: flex; flex-wrap: wrap; margin: -20px;}
.busibglist {flex: 1 0 50%; max-width: 50%; padding: 20px;}
.busibglist .inner {padding: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px) clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); border-radius: 16px; background: #f9f9f9; text-align: center; height: 100%;}
.busibglist .title {font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 600; color:var(--color-1);}
.busibglist .dec {padding-top:10px; color: #454545; line-height: 1.7;}
.busibgwrap {background:url(../images/sub/busi-bg2.jpg) no-repeat 50% 50%; background-size: cover; margin-bottom: -1px;}
.circleitem {display: flex; flex-wrap: wrap; justify-content: center; margin: 0 -40px;}
.circlelist { padding: 0 40px; text-align: center;}
.circlelist .box {display: flex; align-items: center; justify-content: center; flex-direction: column;padding: 20px; color: #fff; height: clamp(220px, calc( 320 / var(--inner) * 100vw ), 320px); width: clamp(220px, calc( 320 / var(--inner) * 100vw ), 320px); border-radius: 50%; background: rgba(255,255, 255, 0.2);}
.circlelist .tit {font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 600; }
.circlelist .desc {padding-top:10px; line-height: 1.7; }
.circle-text {padding-top:  clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px); text-align: center; font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); line-height: 1.5; color: #fff;}

.pdsection {padding:clamp(40px, calc( 60 / var(--inner) * 100vw ), 60px) 0; border-bottom:1px solid #ddd;}
.pdsection:first-child {padding-top: 0;}
.pdsection .titbx {padding-bottom:clamp(25px, calc( 38 / var(--inner) * 100vw ), 38px); text-align: center;}
.pdsection .eng {display: block; text-transform: uppercase; color:var(--color-1); font-weight: 600;}
.pdsection .tit {padding-top:10px; font-size:clamp(22px, calc( 32 / var(--inner) * 100vw ), 32px); font-weight: 600;}
.pdimgitem {display: flex; justify-content: center; flex-wrap: wrap; margin: -20px;}
.pdimglist {flex: 1 0 25%; max-width: 25%; padding: 20px;}
.pdimglist .image {position:relative; padding-bottom:100%; overflow:hidden; border-radius: 16px;}
.pdimglist .image img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:auto; max-width:100%; min-height:100%;}

.pdborder-text {margin-bottom:clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px); padding: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px) clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); border: 1px solid #ddd; text-align: center; color: #454545;}
.asitem {display: flex; flex-wrap: wrap; margin: -30px -20px;}
.aslist {flex: 1 0 33.33%; max-width: 33.33%; padding: 30px 20px;}
.aslist .images {position:relative; padding-bottom:72.38%; overflow:hidden; border-radius: 16px;}
.aslist .images img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:auto; max-width:100%; min-height:100%;}
.aslist .textbx {padding-top:clamp(15px, calc( 36 / var(--inner) * 100vw ), 36px); text-align: center;}
.aslist .title {font-size: clamp(18px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: 600;}
.aslist .desc {padding-top: 10px; color: #454545; line-height: 1.6;}
.asbg {margin-top: clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px); padding:clamp(40px, calc( 70 / var(--inner) * 100vw ), 70px) 0; background: url(../images/sub/as-bg.jpg) no-repeat 50% 50%; background-size: cover;}
.asbg .btnarrow .btn-link:hover {background: var(--color-1); border-color: var(--color-1); color: #fff;}
.asbg .flxWrap {align-items: center; justify-content: space-between;}
.asbg .textbx {color: #fff;}
.asbg .tt {font-size:clamp(22px, calc( 32 / var(--inner) * 100vw ), 32px); font-weight: 600;}
.asbg .dec {padding-top: 10px; line-height: 1.6;}

.directions {display: flex;  flex-wrap: wrap; margin-top:clamp(30px, calc( 40 / var(--inner) * 100vw ), 40px);}
.directions .address-info {flex:1 0 50%; max-width: 50%; padding-right:30px;}
.directions .address-info .comp {color:var(--color-1); font-weight:500; margin-bottom:12px;}
.directions .address-info .addr {font-size:clamp(18px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight:600; line-height:1.33em; letter-spacing:-.03em; margin-bottom:5px;}
.directions .address-info .etc {color:#454545;}
.directions .address-info .etc span {display:inline-block; margin-right:clamp(10px, calc( 16 / var(--inner) * 100vw ), 16px);}
.directions .address-info .etc span:last-child {margin-right:0;}
.directions .contact-info {flex: 1 0 auto; width: 1%; line-height:1.5em;}
.directions .contact-info dl {display:flex; padding:clamp(5px, calc( 10 / var(--inner) * 100vw ), 10px) 0; }
.directions .contact-info dl:first-child {padding-top: 0;}
.directions .contact-info dt {width:120px; font-weight:500;}
.directions .contact-info dt svg {vertical-align:middle; margin:-.2em 15px 0 0;}
.directions .contact-info dt path {fill:var(--color-1);}
.directions .contact-info dd {flex:1 1 auto; min-width:0; width:1%; color:#454545;}