@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */
.root_daum_roughmap {width:100% !important; height:500px !important;}
.root_daum_roughmap .wrap_map {height:500px !important;}
.roughmap_lebel_text {line-height:0 !important; font-size:0 !important;}
.roughmap_lebel_text:after {content:"더원케미칼인터내셔널"; font-size:12px; line-height:15px;}


.doc-tit {position:relative; width: fit-content; margin: 0 auto var(--margin-50); font-weight:700; font-size: var(--font-size-40); letter-spacing: -0.02em; color: #242424; text-align:center;} 
.doc-tit::after {content: ""; position: absolute; top: -4px; right: -4px; width: 8px; height: 8px; background-color: rgba(237, 28, 36, 0.8);} 

.doc-cnt {padding:var(--padding-80) 0;} 
.doc-cnt:last-child {padding-bottom:0;} 
.doc-cnt.bg-grey {background-color: #f4f4f4;} 

.bullet-item .bullet-list {position:relative; padding-left:9px; margin-top:10px; line-height:1.3;}
.bullet-item .bullet-list:first-child {margin-top:0;}
.bullet-item .bullet-list::before {position:absolute; content:''; left:0; top:9px; width:2px; height:2px; border-radius:50%; background:#242424;}
.bullet-item.type2 .bullet-list {padding-left:14px; margin-top:clamp(10px, 0.5rem + 0.3125vw, 14px);}
.bullet-item.type2 .bullet-list:first-child {margin-top:0;}
.bullet-item.type2 .bullet-list::before {width:4px; height:4px; border-radius:0; background:rgba(1, 104, 165, 0.3)}


/* 공통 */
.sub-titlebx .sec-tit {padding-left:29px; position:relative; font-size:var(--font-size-26-18); font-weight:600; color:#242424;}
.sub-titlebx .sec-tit::before {position:absolute; content: ''; left:0; top:8px; width:20px; height:20px; background:#fff; border-radius:50%; border:6px solid var(--color-1);} 


/* 회사소개 */
.greeting-area {overflow:hidden;}
.greeting-area .imgbx {flex:1 0 500px; max-width:500px; margin-right:clamp(20px, 0rem + 3.125vw, 60px);}
.greeting-area .textbx {flex:1 0 auto; width:1%;}
.greeting-area .title {font-size:var(--font-size-24-18); font-weight:bold; color:#242424;}
.greeting-area .dec {padding-top:clamp(15px, 0.625rem + 0.7813vw, 25px); font-size:var(--font-size-18-15);}
.greeting-area .dec.last {padding-top:clamp(20px, calc( 50 / var(--inner) * 100vw ), 50px);}
.greeting-area .sign-box {margin-top:15px; text-align:right;}
.greeting-area .name {font-size:var(--font-size-18-15);}

.head-bg {position:relative; background:url(../images/sub/his-bg.jpg) no-repeat; background-size:cover; height:clamp(220px, 11.25rem + 6.25vw, 300px); border-radius:30px; overflow:hidden;}
.head-bg .text {position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); color:#fff; text-align:center; font-family:'Montserrat'; text-shadow:3px 0px 10px #000000; line-height:1.1;}
.head-bg .text .years {display:block; font-size:var(--font-size-23-17); font-weight:bold;}
.head-bg .text .tit {display: block; margin-top:8px; font-size:var(--font-size-40-20); font-weight:bold;}
.history-box {margin-top:clamp(40px, 1.25rem + 3.125vw, 80px);}
.history-list {position: relative; background:url(../images/sub/his-logo.png) no-repeat right -30px bottom -30px;} 
.history-detail-item {display: flex; padding-bottom:clamp(30px, 0.9375rem + 2.3438vw, 60px);}
.history-detail-item .year { position:relative; font-size:var(--font-size-32-20); font-weight: bold; flex: 1 0 135px; max-width:135px; line-height:1; color:var(--color-1);}
.history-detail-item .year::after {position: absolute; content: ""; top:5px; right:-11px; width:21px; height:21px; border-radius: 50%; background:#fff; border:6px solid #ddd; z-index: 2;}
.history-detail-item .cont-wrap {display:flex; flex:1 0 auto; width:1%;  padding-left:50px;}
.history-detail-item .cont {display: flex; flex-direction:column; flex:1 0 auto; width:1%; margin-top:5px;}
.history-detail-item .cont .text {display: inline-flex; margin-bottom:10px; }
.history-detail-item .cont .month {display:inline-block; color: #242424; font-weight:600; width:40px; }
.history-detail-item .cont .txt {flex:1;}
.progress-container {position:absolute; left:135px; top:7px; height:100%; width: 1px; background:#ddd;}
.progress-container .progress-bar {width:1px; background:var(--color-1);}

.cert-box + .cert-box {margin-top:28px;}
.certi-item {display:flex; flex-wrap:wrap; margin:-10px; padding-top:clamp(15px, 0.6563rem + 0.7031vw, 24px);}
.certi-list {flex:1 0 20%; max-width:20%; padding:10px;}
.certi-list .tit {padding-top:11px; text-align:center;}

.location-area + .location-area {margin-top:clamp(40px, 1.25rem + 3.125vw,80px);}
.location-area .map-tit {font-size:var(--font-size-23-18); font-weight:bold; color:#242424;}
.location-area .wrap {margin-top:clamp(15px, 0.7188rem + 0.5469vw, 22px); margin-bottom:clamp(25px, 1.3125rem + 0.625vw, 33px); border-radius:30px; overflow:hidden;}
.location-area .wrap iframe {height:clamp(250px, calc( 500 / var(--inner) * 100vw ), 500px); width:100%;}
.location-area .box1 {flex:1 0 55%; max-width:55%;}
.location-area .box2 {flex:1 0 auto; width:1%;}
.location-area .addr-list {display:flex; align-items:center; }
.location-area .box2 .addr-list {padding-top:clamp(20px, 0.3125rem + 2.3438vw, 50px);}
.location-area .box2 .addr-list:first-child {padding-top:0;}
.location-area .icn {margin-right:clamp(010px, 0.0938rem + 1.3281vw, 27px); flex:1 0 66px; max-width:66px;}
.location-area .tit {margin-bottom:5px; font-size:var(--font-size-20-16); font-weight:bold; color:#333333;}
.location-area .addr {display:inline-block; padding-right:5px;}

/* 사업분야 */
.busi-item {border-top:2px solid var(--color-1);}
.busi-list {padding:clamp(15px, 0.6875rem + 0.625vw, 23px) clamp(10px, 0.3125rem + 0.7813vw,20px); border-bottom:1px solid #ddd; }
.busi-item .flxWrap {height:100%;}
.busi-item .titlebx {flex:1 0 301px; max-width:301px; display:flex; justify-content:center; flex-direction:column;}
.busi-item .decbx {flex:1 0 auto; width:1%; display:flex; align-items:center;}
.busi-item .titlebx span {display:block;}
.busi-item .titlebx .big {font-size:var(--font-size-20-16); font-weight:600; color:#242424; letter-spacing:-1px;}
.busi-item .titlebx .small {padding-top:7px;}
.busi-item .titlebx .small:lang(ko) {display:none;}

.box-section {margin-top:clamp(50px, 1.75rem + 3.4375vw, 94px);}
.box-section:first-child {margin-top:0;}
.table-wrap {margin-top:28px;}
.table-wrap table {width:100%; border-collapse:collapse; border-spacing:0px;}
.table-wrap th,
.table-wrap td {padding:17px 10px; text-align:center; border-right:1px solid #ddd; border-bottom:1px solid #ddd;}
.table-wrap .border-r {border-right:0;}
.table-wrap thead th {background:var(--color-1); color:#fff; font-weight:600;}
.box-section .video-bx {position:relative; padding-bottom:53.33%; overflow:hidden; margin-top:clamp(15px, 0.6563rem + 0.7031vw, 24px);}
.box-section .video-bx video {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:auto; max-width:100%; min-height:100%;}
.down-box {margin-top:50px; text-align:center;}
.down-box .btn-down {display:inline-block; padding:0 clamp(15px, 0.5313rem + 1.0156vw, 28px); width:clamp(180px, 10.4688rem + 2.7344vw, 220px); height:clamp(50px, 2.8125rem + 0.7813vw, 60px); line-height:clamp(50px, 2.8125rem + 0.7813vw, 60px); font-size:var(--font-size-18-15); color:#fff; background:var(--color-1) url(../images/sub/down.png) no-repeat right 28px center; text-align:left;}
.down-box .btn-down:lang(en) {width: clamp(220px, 12.5rem + 3.125vw, 260px);}
/* 제품 */
.product-area {overflow:hidden;}
.p-tabs {display:flex; flex-wrap:wrap; margin:clamp(50px, 1.25rem + 4.6875vw, 110px) 0 clamp(35px, 1.3125rem + 2.1875vw, 63px);}
.p-tabs .tab {flex:1 0 25%; max-width:25%; margin-top:-1px; margin-right:-1px; border:1px solid #ddd; text-align:center;}
.p-tabs .tab.active {background:var(--color-1); color:#fff; border-color:var(--color-1);}
.p-tabs .link {display:inline-block; padding:clamp(10px, 0.375rem + 0.625vw, 18px) 5px; width:100%; font-size:var(--font-size-18-15); font-weight:500;}
.sub-title2 {margin-bottom:clamp(35px, 1.4063rem + 1.9531vw, 60px); text-align:center;}
.sub-title2 .flxWrap {align-items:center; justify-content:center;}
.sub-title2 h1 { font-size:var(--font-size-35-20); line-height:var(--line-height-sm); color:#242424; font-weight:bold;} 
.sub-title2 .sub-tit {font-size:var(--font-size-18-15); letter-spacing:normal;}
.sub-title2 span {font-weight:bold; color:#242424;}
.sub-title2 .wid {padding:0 10px;}
.detail-view {padding-top:10px;}
.detail-view .img-bx {flex:1 0 510px; max-width:510px; margin-right:clamp(20px, 0rem + 3.125vw, 60px);}
.detail-view .image {position:relative; padding-bottom:68.62%; overflow:hidden; border:1px solid #ddd;}
.detail-view .image img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:auto; max-width:100%; min-height:100%;}
.detail-view .text-bx {flex:1 0 auto; width:1%;}
.detail-view .text-bx .title {margin-bottom:clamp(15px, 0.5938rem + 0.8594vw, 26px); padding-bottom:clamp(10px, 0.4063rem + 0.5469vw, 17px); border-bottom:1px solid #ddd; font-size:var(--font-size-24-18); font-weight:600; color:#242424;}
.detail-view .bullet-list {display:flex; font-size:var(--font-size-18-15);}
.detail-view .bullet-list .name {flex:1 0 148px; max-width:148px; font-weight:500; color:#242424;}
.detail-view .bullet-list .dec {flex:1 0 auto; width:1%;}

.desc-wrap {margin-top:clamp(30px, 0.9375rem + 2.3438vw, 60px);}
.desc-wrap h2 {border-bottom:1px solid #ddd;}
.desc-wrap .title {display:inline-block; padding:0 clamp(15px, 0.6563rem + 0.7031vw, 24px);  height:clamp(40px, 2.1875rem + 0.7813vw, 50px); line-height:clamp(40px, 2.1875rem + 0.7813vw, 50px); background:var(--color-1); color:#fff; font-size:var(--font-size-20-16); font-weight:600;}
.desc-wrap .bullet-item {padding-top:clamp(20px, 0.6875rem + 1.4063vw, 38px);}