@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */
.root_daum_roughmap {width:100% !important; height:clamp(250px, calc( 450 / var(--inner) * 100vw ), 450px) !important;}
.root_daum_roughmap .wrap_map {height:clamp(250px, 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:15px; 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:3px; height: 3px; background:var(--color-primary); border-radius: 50%;}
.bullet-item .bullet-list.none {padding-left: 0;}
.bullet-item .bullet-list.none::before {display: none;}

.bg-gray {background:#fafafa;}
.bg-blue {background: rgba(15, 87, 167, 0.03);}
.overhidden {overflow: hidden;}
.subsec-pd {padding: clamp(50px, calc( 100 / var(--inner) * 100vw ), 100px) 0;}

.greetflx {display: flex; flex-wrap: wrap; flex-direction: row-reverse;}
.greetflx .imgbx {flex: 1 0 42%; max-width: 42%; margin-left:clamp(15px, calc( 60 / var(--inner) * 100vw ), 60px);}
.greetflx .textbx {flex:1 0 auto; width: 1%; letter-spacing: -0.85px;}
.greetflx .title {font-size:clamp(18px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight: bold; line-height: 1.42;}
.greetflx .decbx {margin-top:clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}
.greetflx .dec {line-height: 1.75; color: var(--color-body);}
.greetflx .dec + .dec {padding-top: clamp(15px, calc( 28 / var(--inner) * 100vw ), 28px);}
.greetflx .signbx {display: flex; align-items: center; padding-top: clamp(20px, calc( 45 / var(--inner) * 100vw ), 45px);}
.greetflx .signbx span {display: inline-block; padding-right: clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px); font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: 600;}

.history-logobx {margin-bottom: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px); text-align: center;}
.history-logobx img {width:clamp(100px, calc( 180 / var(--inner) * 100vw ), 180px);}
.history-logobx .logoname {margin-top: clamp(10px, calc( 16 / var(--inner) * 100vw ), 16px); font-size: clamp(18px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight: 600; letter-spacing: -1px;}

.history-content {display: flex; flex-wrap: wrap; letter-spacing: -0.72px;}
.history-intro {flex: 1 0 auto; width: 1%; margin-bottom: clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px); padding-right: clamp(5px, calc( 80 / var(--inner) * 100vw ), 80px);}
.history-badge {display: block; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: 700; color: #acacac; margin-bottom: clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px); letter-spacing: -0.54px;}
.history-description {font-size: clamp(17px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: 600; line-height: 1.42;}
.history-description .highlight {background: linear-gradient(180deg, #0f57a7 0%, #1a3169 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 700;}
.timeline {flex: 1 0 50%; max-width: 50%; position: relative; border-top: 1px solid #242424;}
.timeline-item {display: flex; align-items: center; flex-wrap: wrap; position: relative; padding:clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px) 0; border-bottom: 1px solid #ddd;}
.timeline-year {flex: 1 0 clamp(110px, calc( 160 / var(--inner) * 100vw ), 160px); max-width: clamp(110px, calc( 160 / var(--inner) * 100vw ), 160px); font-size: clamp(20px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight: 600; letter-spacing: -0.84px; text-align: center;}
.timeline-events {flex: 1 0 auto; width: 1%; letter-spacing: -0.48px;}
.timeline-event {display: flex; align-items: flex-start; margin-bottom: 7px; line-height: 1.5;}
.timeline-event:last-child {margin-bottom: 0;}
.timeline-month {flex: 1 0 40px; max-width: 40px; padding-left:clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px); position: relative;  font-weight: 600;  margin-right: clamp(8px, calc( 15 / var(--inner) * 100vw ), 15px); }
.timeline-month:after {position: absolute; content: ''; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 3px; background: var(--color-primary); border-radius: 50%;}
.timeline-text {flex: 1;  color:var(--color-body); }

.location-area .map {height:clamp(250px, calc( 450 / var(--inner) * 100vw ), 450px); width: 100%;}
.location-area .map iframe {width: 100%; height: 100%;}

.contact-info {display: flex; justify-content: space-between; flex-wrap: wrap; margin:-15px -10px; padding-top: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px); }
.contact-item {flex: 1 0 33.33%; max-width: 33.33%; padding:15px 10px;  text-align: center; position: relative;}
.contact-item:not(:last-child)::after {content: ''; position: absolute; right: -20px; top: 50%; transform: translateY(-50%); width: 1px; height: 200px; background: #dddddd;}
.contact-content {margin-top: 25px;}
.contact-title {font-size: clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: 600; margin-bottom: clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px);}
.contact-details {font-size: clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px); color: var(--color-body); line-height: 1.62;}
.contact-details p + p {margin-top: 5px;}

.commtopcont {text-align: center; letter-spacing: -0.6px;}
.commtopcont .txt1 {font-size:clamp(18px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight: 600; line-height: 1.41;}
.commtopcont .txt2 {padding-top: clamp(12px, calc( 20 / var(--inner) * 100vw ), 20px); line-height: 1.75; color: var(--color-body);}
.commtopcont .imgbx {padding-top: clamp(25px, calc( 55 / var(--inner) * 100vw ), 55px) ;}

.textbgbx {margin-bottom: clamp(30px, calc( 55 / var(--inner) * 100vw ), 55px) ;}
.textbgbx .textbg {padding-left:clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px); position: relative; font-size:clamp(20px, calc( 32 / var(--inner) * 100vw ), 32px); font-weight: 600; letter-spacing: -0.5px;} 
.textbgbx .textbg:after {position: absolute; content: '';left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: clamp(20px, calc( 32 / var(--inner) * 100vw ), 32px); background: var(--color-primary); }
.textbgbx .textbg .depth {display: inline-block; padding-left: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); font-size: clamp(13px, calc( 16 / var(--inner) * 100vw ), 16px); font-weight: 500; color: var(--color-body); letter-spacing: -0.6px;}
.linkflx {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.linkflx .logolink {display: flex; align-items: center;}
.linkflx .logolink .txt {display: inline-block; padding-right: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); font-size: clamp(12px, calc( 14 / var(--inner) * 100vw ), 14px); font-weight: 600;}
.linkflx .logolink img {width:  clamp(100px, calc( 140 / var(--inner) * 100vw ), 140px);}

.service-cards {display: flex;  justify-content: center; flex-wrap: wrap; margin: -10px;}
.service-card {flex: 1 0 25%; max-width: 25%; position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px); padding: 10px;}
.service-content {position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px); width: clamp(160px, calc( 265 / var(--inner) * 100vw ), 265px); height: clamp(160px, calc( 265 / var(--inner) * 100vw ), 265px); border-radius: 50%;}
.service-content:after {position: absolute; content: ''; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 95%; height: 95%; border-radius: 50%; border: 1px dashed #ddd;}
.service-content.bg1 {background: var(--color-secondary); }
.service-content.bg2 {background: var(--color-primary); }
.service-content.bg3 {background: #0099E5; }
.service-content.bg4 {background: var(--color-tertiary); }
.service-icon {width: clamp(50px, calc( 88 / var(--inner) * 100vw ), 88px);}
.service-title {font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 700; color: #fff; text-align: center; letter-spacing: -0.8px; line-height: 1.2;}
.service-description {font-size: clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px); color: #454545; text-align: center; line-height: 1.5; letter-spacing: -0.64px;}

.strength-cards {display: flex;  justify-content: center; flex-wrap: wrap; margin: -15px;}
.strength-card {flex: 1 0 33.33%; max-width: 33.33%; padding:15px; }
.strength-card .inner {padding: clamp(30px, calc( 40 / var(--inner) * 100vw ), 40px) clamp(30px, calc( 35 / var(--inner) * 100vw ), 35px); display: flex; flex-direction: column; align-items: center; gap: clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px); height: 100%; background: #fff; border-radius: 16px; box-shadow: 0 0 8px rgba(0,0,0,0.1);}
.strength-icon {width: clamp(45px, calc( 64 / var(--inner) * 100vw ), 64px); }
.strength-content {display: flex; flex-direction: column; align-items: center; gap: clamp(12px, calc( 15 / var(--inner) * 100vw ), 15px); text-align: center; width: 100%; letter-spacing: -0.4px;}
.strength-card .smallnum {display: block; color: var(--color-primary); font-weight: 600;}
.strength-title {font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 600;   line-height: 1.2;}
.strength-description {font-size: clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px); color: var(--color-body); line-height: 1.6; }
.strength-cards.ty2 .strength-card {flex: 1 0 50%; max-width: 50% ;}

.partner-item + .partner-item {margin-top: clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px);}
.partner-item {display: flex; align-items: center; flex-wrap: wrap;}
.partner-logo {flex: 1 0 44%; max-width: 44%; margin-right: clamp(20px, calc( 60 / var(--inner) * 100vw ), 60px);   height: clamp(100px, calc( 200 / var(--inner) * 100vw ), 200px);}
.partner-logo .item {display: flex; align-items: center; justify-content: center; padding: clamp(35px, calc( 60 / var(--inner) * 100vw ), 60px); width: 100%; height: 100%; background: #fff; border-radius: 16px; box-shadow: 0 0 8px rgba(0,0,0,0.1);}
.partner-logo .item img {max-width: 100%; max-height: 100%; object-fit: contain;}
.partner-content {flex: 1; display: flex; flex-direction: column; gap: clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px); letter-spacing: -0.48px;}
.partner-title {font-size: clamp(18px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: 600;  line-height: 1.2;}
.partner-description {color: var(--color-body); line-height: 1.6; }

.imgtxtlist {display: flex; flex-wrap: wrap; margin:-30px -15px;}
.imgtxtitem {flex: 1 0 33.33%; max-width: 33.33%; padding:30px 15px; text-align: center;}
.imgtxtitem .image img {border-radius:16px;}
.imgtxtitem .text {display: block; padding-top:clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px); font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: 500; color: var(--color-body); text-align: center;}
.imgtxtlist.ty2 .imgtxtitem {flex: 1 0 25%; max-width: 25%; }

.commlogolist {display: flex; flex-wrap: wrap; margin: -15px;}
.commlogoitem {flex: 1 0 25%; max-width: 25%; padding: 15px;}
.commlogoitem .inner {display: flex; align-items: center; justify-content: center; padding: 15px 25px; border-radius: 8px; overflow: hidden; height: clamp(60px, calc( 100 / var(--inner) * 100vw ), 100px); border: 1px solid #ddd; background: #fff;}
.commlogoitem .inner img {max-width: 100%; max-height: 100%; object-fit: contain;}  

.gallerypaging {position:relative;padding-right:clamp(10px, calc( 110 / var(--inner) * 100vw ), 110px); padding-left:clamp(10px, calc( 110 / var(--inner) * 100vw ), 110px); max-width:1420px; width:100%; margin:0 auto;}
.galleryslide  .ginner {display: block; height: 100%;}
.galleryslide .imgbx {position:relative; padding-bottom:65.78%; overflow:hidden; border-radius: 16px;}
.galleryslide .imgbx img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:auto; max-width:100%; min-height:100%;object-fit : cover;}
.galleryslide .textbx {padding-top: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px);}
.galleryslide .title {font-size:clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight:600; line-height: 1.55; display:-webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp:1;}
.galleryslide .text {margin-top:12px; font-size:clamp(13px, calc( 15 / var(--inner) * 100vw ), 15px); color: var(--color-body); line-height: 1.6; display:-webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp:6;} 

.gallerytext  .ginner {display: block; padding: clamp(20px, calc( 35 / var(--inner) * 100vw ), 35px)  clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px); border: 1px solid #ddd; border-radius: 16px; height: clamp(230px, calc( 285 / var(--inner) * 100vw ), 285px); background: #fff;}
.gallerytext .textbx {display: flex; flex-direction: column; justify-content: space-between; height: 100%;}
.gallerytext .badge {display: inline-flex; align-items: center; justify-content: center; margin-bottom: clamp(12px, calc( 20 / var(--inner) * 100vw ), 20px); padding: 5px 12px; background: var(--color-primary); color: #fff; font-size:clamp(12px, calc( 14 / var(--inner) * 100vw ), 14px); font-weight: 500; letter-spacing: -0.5px; border-radius: 100px;}
.gallerytext .title {font-size:clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight:600; line-height: 1.55; display:-webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp:1;}
.gallerytext .text {margin-top:clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px); font-size:clamp(13px, calc( 15 / var(--inner) * 100vw ), 15px); color: var(--color-body); line-height: 1.6; display:-webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp:3;} 
.gallerytext .date {display:inline-block; padding-top:15px; color: #686868; font-size:clamp(11px, calc( 13 / var(--inner) * 100vw ), 13px) ;}

.process-card + .process-card {margin-top: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);}
.process-card {background: #fff; border: 1px solid #dddddd; border-radius: 16px; overflow: hidden;}
.process-content {padding: clamp(25px, calc( 35 / var(--inner) * 100vw ), 35px) clamp(20px, calc( 55 / var(--inner) * 100vw ), 55px);}
.process-steps {display: flex; justify-content: center; flex-wrap: wrap; margin:0 -50px;}
.process-step {flex: 1 0 25%; max-width: 25%; padding: 0 50px; display: flex; flex-direction: column; gap: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); position: relative;}
.step-icon {position: relative; width: clamp(120px, calc( 193 / var(--inner) * 100vw ), 193px); height: clamp(120px, calc( 193 / var(--inner) * 100vw ), 193px);border-radius: 50%; background: #fff; margin: 0 auto;}
.icon-bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%;border: clamp(5px, calc( 10 / var(--inner) * 100vw ), 10px) solid rgba(15, 87, 167, 0.08);border-radius: 50%;}
.icon-main {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.step-content {display: flex; flex-direction: column; align-items: center; gap: clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px); text-align: center;}
.step-number {font-size: clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px); font-weight: 600; color: var(--color-primary); letter-spacing: -0.48px;}
.step-title {font-size: clamp(17px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: 600; letter-spacing: -0.72px; line-height: 1.2;}
.step-description {font-size: clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px); color: var(--color-body); letter-spacing: -0.48px; line-height: 1.5;}
.process-footer {background: var(--color-primary); padding: clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px); text-align: center;}
.process-title {font-size: clamp(17px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: 600; color: #fff; letter-spacing: -0.72px;}
.process-steps .process-step:not(:last-child):after {content: ''; position: absolute; top: 28%; right: -5px;  width: clamp(10px, calc( 16 / var(--inner) * 100vw ), 16px); height: clamp(12px, calc( 18 / var(--inner) * 100vw ), 18px); background: url(../images/sub/right.png) no-repeat center center / contain;}
.process-steps.ty2 .process-step:not(:last-child):after {background: url(../images/sub/right2.png) no-repeat center center / contain;}
.process-steps.ty2 .step-number {color: var(--color-secondary);}
.process-footer.ty2 {background: var(--color-secondary);}

.commlasttext {margin-top:clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px); text-align: center; font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: bold; line-height: 1.5; letter-spacing: -0.5px;}

.tblbx table {border-top: 1px solid #242424;}
.tblbx table th, 
.tblbx table td {padding:clamp(12px, calc( 18 / var(--inner) * 100vw ), 18px) 10px; text-align: center; letter-spacing: -0.5px;border-bottom: 1px solid #ddd; color: var(--color-body);}
.tblbx table th:not(:last-child), 
.tblbx table td:not(:last-child) {border-right: 1px solid #ddd;}
.tblbx table th {background: #F8F8F8;font-size: clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px);font-weight: 600;}

.galleryimg .ginner {display: block; height: 100%;}
.galleryimg .imgbx {position:relative; padding-bottom:65.78%; overflow:hidden; }
.galleryimg .imgbx img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:auto; max-width:100%; min-height:100%;object-fit : cover;}
.galleryimg .name {padding-top: clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px); font-size:clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: 500; color: var(--color-body); letter-spacing: -0.5px; text-align: center;}
 

.subprocess .process-steps {margin: -30px;}
.subprocess .process-step {flex: 1 0 20%; max-width: 20%; padding: 30px;}

.incoterms-cards {display: flex; flex-wrap: wrap; margin: -15px;}
.incoterms-card {flex: 1 0 50%; max-width: 50%; padding: 15px;}
.incoterms-card .inner {background: #fff; border-radius: 24px; box-shadow: 0 0 8px rgba(0,0,0,0.1); padding: clamp(25px, calc( 40 / var(--inner) * 100vw ), 40px); height: 100%; display: flex; flex-direction: column; gap: clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px); letter-spacing: -0.4px;}
.incoterms-card .card-header {display: flex; align-items: center; gap: clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px);}
.incoterms-card .card-number {display: flex; align-items: center; justify-content: center; width: clamp(35px, calc( 40 / var(--inner) * 100vw ), 40px); height: clamp(35px, calc( 40 / var(--inner) * 100vw ), 40px); background: rgba(15, 87, 167, 0.05); border-radius: 50%; font-weight: 700; color: var(--color-primary); }
.incoterms-card .card-title {font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 600; }
.incoterms-card .card-description {color: #454545; line-height: 1.62; }

.network-content {display: flex; flex-direction: column; gap: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);}
.network-text {text-align: center;}
.network-title {margin-bottom: clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px); font-size: clamp(20px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight: 700; background: linear-gradient(180deg, #0f57a7 0%, #1a3169 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.0; letter-spacing: -0.84px;}
.network-description { color: #454545; line-height: 1.75; letter-spacing: -0.48px;}

/* 다국어 */
.step-title:lang(en) {font-size: clamp(16px, calc( 22 / var(--inner) * 100vw ), 22px);}
.step-description:lang(en) {font-size: clamp(13px, calc( 15 / var(--inner) * 100vw ), 15px);}
body,html:lang(zh-CN) {word-break: break-all;}
.step-title:lang(zh-CN) {font-size: clamp(16px, calc( 22 / var(--inner) * 100vw ), 22px);}
.step-description:lang(zh-CN) {font-size: clamp(13px, calc( 15 / var(--inner) * 100vw ), 15px);}
.service-content:lang(ru) {padding: clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px);}
.step-title:lang(ru) {font-size: clamp(16px, calc( 22 / var(--inner) * 100vw ), 22px);}
.step-description:lang(ru) {font-size: clamp(13px, calc( 15 / var(--inner) * 100vw ), 15px);}
.service-content:lang(vi) {padding: clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px);}
.step-title:lang(vi) {font-size: clamp(16px, calc( 22 / var(--inner) * 100vw ), 22px);}
.step-description:lang(vi) {font-size: clamp(13px, calc( 15 / var(--inner) * 100vw ), 15px);}

input[type="file"].file-input {color: transparent;}
input[type="file"].file-input.has-file {color: var(--color-body);}