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

.blocker {z-index: 100;}
.modal {max-width:980px; width: 100%;}

.bg-gray {background:#fafafa;}
.overhidden {overflow: hidden;}
.subsec-pd {padding: clamp(60px, calc( 150 / var(--inner) * 100vw ), 150px) 0;}

.radiobx {display: flex; flex-wrap: wrap;}
.radiobx .item {display: flex;align-items: center; min-height: clamp(38px, calc( 44 / var(--inner) * 100vw ), 44px);}
.radiobx .item:not(:last-child) {margin-right: clamp(15px, calc( 40 / var(--inner) * 100vw ), 40px);}

.greet {overflow: hidden;}
.greet .inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(40px, calc( 100 / var(--inner) * 100vw ), 100px); width: 100%; }
.greet .img { width: clamp(300px, calc( 600 / var(--inner) * 100vw ), 600px); border-radius: 16px; overflow: hidden;  }
.greet .img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.greet .txtbx { flex: 1 1 0; display: flex; flex-direction: column; gap: var(--padding-40); min-width: 0; max-width: 700px; width: 100%; }
.greet .cont-tit .tit { font-size: var(--font-size-30); font-weight: 600; color: #121212; letter-spacing: -0.03em; line-height: 1.4; }
.greet .cont-tit .tit .primary { color: var(--color-primary); }
.greet .cont .desc { display: flex; flex-direction: column; gap: var(--padding-25); font-size: var(--font-size-18); color: var(--color-body); letter-spacing: -0.03em; line-height: 1.67; }
.greet .signbx { display: flex; flex-wrap: wrap; align-items: center; gap: var(--padding-20); width: 100%; color: #121212; }
.greet .signbx .role { font-size: var(--font-size-20); font-weight: 500; letter-spacing: -0.03em; line-height: 1.5; }
.greet .sign img { display: block; width: clamp(60px, calc( 91 / var(--inner) * 100vw ), 91px); height: auto; object-fit: contain; }

.histban .wrap { position: relative; display: flex; align-items: flex-end; justify-content: flex-start; min-height: clamp(280px, calc( 450 / var(--inner) * 100vw ), 450px); padding: var(--padding-50); border-radius: 16px; overflow: hidden; }
.histban .img { position: absolute; inset: 0; z-index: 0; margin: 0; width: 100%; height: 100%; }
.histban .img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.histban .grad { position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0) 53%); pointer-events: none; }
.histban .box { position: relative; z-index: 2; width: 100%; max-width: 376px; padding: var(--padding-30); background: var(--color-primary); border-radius: 8px; box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.2); }
.histban .firm { font-size: var(--font-size-16); font-weight: 600; color: rgba(255, 255, 255, 0.7); letter-spacing: -0.03em; line-height: 1.5; }
.histban .tit { margin-top: var(--padding-20); font-size: var(--font-size-28); font-weight: 700; color: #fff; letter-spacing: -0.03em; line-height: 1.36; }

.histline {margin-top: var(--padding-80);}
.hisflxWrap {display: flex;gap:var(--padding-40); flex-wrap: wrap;}
.hisflxWrap:first-child .commpd {border-top: 2px solid #121212;}
.hisflxWrap .commpd {padding: var(--padding-40) 0; border-bottom: 1px solid #ddd;}
.hisflxWrap .yearbx {width:clamp(160px, calc( 300 / var(--inner) * 100vw ), 300px); display: flex;align-items: center;justify-content: center; text-align: center;}
.hisflxWrap .year {display: block; font-size:var(--font-size-48); font-weight: bold; letter-spacing: -0.1px;}
.hisflxWrap .historyinfobx {flex: 1; display: flex;flex-direction: column; gap: var(--padding-25); letter-spacing: -0.5px;}
.hisflxWrap .cont {padding-left:clamp(20px, calc( 25 / var(--inner) * 100vw ), 25px); position: relative; font-size: var(--font-size-18); color: var(--color-body);}
.hisflxWrap .cont::before {position: absolute; content: ''; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--color-primary); }


.mapwrap {position: relative; padding-bottom:var(--padding-110);}
.mapwrap .map {border-radius: 16px; overflow: hidden;}
.mapwrap .mapinfoflx {display: flex;align-items: flex-end; justify-content: space-between; gap: 20px; position: absolute;bottom: 0; left: 0; width: 100%; z-index: 100; letter-spacing: -0.5px;}
.mapwrap .maptitbx {display: flex;flex-direction: column;justify-content: space-between; padding: var(--padding-30); background: var(--color-primary); width:  clamp(200px, calc( 370 / var(--inner) * 100vw ), 370px); height:  clamp(180px, calc( 210 / var(--inner) * 100vw ), 210px); color: #fff; border-radius: 16px;}
.mapwrap .maptitbx .company {font-weight: 400; line-height: 2;}
.mapwrap .maptitbx .address {display: flex;flex-direction: column;gap: var(--padding-20);}
.mapwrap .maptitbx .tit {display: flex;align-items: center;gap:4px; font-size: var(--font-size-20);}
.mapwrap .maptitbx .tit img {width: clamp(16px, calc( 24 / var(--inner) * 100vw ), 24px); height: auto;}
.mapwrap .maptitbx .addr {font-size: var(--font-size-20); font-weight: 600;}
.mapwrap .mapinfolist {flex: 1; display: flex; justify-content: flex-end; gap: var(--padding-60); flex-wrap: wrap;}
.mapwrap .mapinfoitem {display: flex; align-items: center;}
.mapwrap .namebx {display: flex; align-items: center; gap: var(--padding-10); margin-right: 10px; padding-right: 10px; position: relative; color: var(--color-primary); font-weight: 600;}
.mapwrap .namebx img {width: clamp(16px, calc( 24 / var(--inner) * 100vw ), 24px); height: auto;}
.mapwrap .namebx::after {content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 10px; background: #ddd; }
.mapwrap .mapinfoitem .desc {font-size: var(--font-size-20); color: var(--color-body); white-space: nowrap;}

.busisec-wrapper {display: flex;flex-direction: column;gap :var(--padding-150);}
.topsecod {display: flex;flex-direction: column;gap: var(--padding-80);}
 
.topinnerbg {display: flex; align-items: center; gap: var(--padding-30);  padding: var(--padding-40) var(--padding-60);  border-radius: 8px; background: rgba(0, 57, 100, 0.05);}
.topinnerbg.ty2 {align-items: flex-start;}
.topinnerbg .icn img {width: clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px); height: auto;}
.topinnerbg .textbx {flex: 1; display: flex;flex-direction: column;gap:15px; width: 100%;}
.topinnerbg .textbx.ty2 {gap: var(--padding-40);}
.topinnerbg .textbx .tit {font-size:var(--font-size-24); font-weight: bold; color: var(--color-primary);}
.topinnerbg .textbx .desc {font-size: var(--font-size-18); color: var(--color-body); line-height: 1.66;}

.sectit {margin-bottom: var(--padding-30); font-size: var(--font-size-32); font-weight: bold; }
 
.checklist {display: flex;flex-wrap: wrap; gap: var(--padding-30);}
.checkitem {padding: var(--padding-20) var(--padding-30); width:  calc((100% - 1 * var(--padding-30)) / 2); border: 1px solid #ddd; border-radius: 8px;}
.checkitem.wid-100 {width: 100%;}
.checkitem .checkbx {padding-left: clamp(20px, calc( 33 / var(--inner) * 100vw ), 33px); position: relative;}
.checkitem .checkbx::before {content: ''; position: absolute; left: 0; top:2px;  width: clamp(12px, calc( 18 / var(--inner) * 100vw ), 18px); height: clamp(12px, calc( 18 / var(--inner) * 100vw ), 18px); background: url('/images/sub/check.svg') no-repeat center center; background-size: contain; }
.checkitem .title {font-weight: 600;}
.checkitem .numlist {display: flex; flex-direction: column;gap: var(--padding-10); margin-top:20px;}
.checkitem .bulletitem2 {font-size: var(--font-size-16); color: var(--color-body); }
.checkitem .last {margin-top: var(--padding-30); color: #878787;}

.process { --process-disc: clamp(90px, calc( 140 / var(--inner) * 100vw ), 140px); width: 100%; overflow: hidden;}
.process .list { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; width: 100%; }
.process .item { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.process .item .img { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; margin: 0; width: var(--process-disc); aspect-ratio: 1; border-radius: 50%; background: #f4f4f4; }
.process .item .img img { display: block; width: clamp(35px, calc( 64 / var(--inner) * 100vw ), 64px); height: auto; }
.process .txtbx { display: flex; flex-direction: column; align-items: center; gap: var(--padding-15); width: 100%; min-width: 0; }
.process .txtbx .badge { margin: 0; padding: 6px; background: var(--color-primary); color: #fff; font-size: var(--font-size-14); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; border-radius: 4px; }
.process .txtbx .tit { margin: 0; font-size: var(--font-size-18); font-weight: 600; color: #121212; letter-spacing: -0.03em; line-height: 1.4; }
.process .item:not(:last-child)::after { content: ''; position: absolute; z-index: 0; top: calc(var(--process-disc) * 0.5); left: 100%; width: clamp(20px, calc( 38 / var(--inner) * 100vw ), 38px); height: auto; aspect-ratio: 38 / 6; background: url('/images/sub/dot.svg') no-repeat 50% 50%; background-size: contain; transform: translate(-50%, -50%); }

.dotlistbg { padding: var(--padding-40); background: #f4f4f4; border-radius: 8px;}
.dotlistbg .bullet-item { display: flex; flex-direction: column; gap: var(--padding-20); }
.dotlistbg .bullet-item .bullet-list { margin-top: 0; padding-left: 15px; font-size: var(--font-size-16); color: var(--color-body); line-height: 1.5; }
.dotlistbg .bullet-item .bullet-list::before { top: 0.5em; width: 5px; height: 5px; border-radius: 0; background: var(--color-body); }

.consul .list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--padding-30) var(--padding-40);  }
.consul .item { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--padding-30); min-width: 0; padding: var(--padding-20); background: #fff; border-radius: 8px; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06); }
.consul .item .img { flex-shrink: 0; display: flex; align-items: center; justify-content: center;}
.consul .item .img img { display: block; width: clamp(20px, calc( 32 / var(--inner) * 100vw ), 32px); height: clamp(20px, calc( 32 / var(--inner) * 100vw ), 32px); object-fit: contain; }
.consul .item .txt { flex: 1 1 0; font-size: var(--font-size-16); color: var(--color-body); letter-spacing: -0.03em; line-height: 1.5; text-align: left; }

.numtxtlist {display: flex;flex-direction: column;gap:var(--padding-30);}
.numtxtitem {display: flex ;gap: var(--padding-15);}
.numtxtitem .num {flex: 1 0 18px; max-width: 18px; height: 18px; margin-top: clamp(3px, calc( 6 / var(--inner) * 100vw ), 6px); background: var(--color-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: var(--font-size-12); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2;}
.numtxtitem .desc {flex: 1; font-size: var(--font-size-18); color: var(--color-body); letter-spacing: -0.03em; line-height: 1.5;}

.reason .list { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: var(--padding-40); width: 100%; }
.reason .item { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; width: calc((100% - 1 * var(--padding-40)) / 2);  gap: var(--padding-30); padding: var(--padding-30); background: #fff; border: 1px solid #ddd; border-radius: 8px; box-sizing: border-box; }
.reason.ty2 .item { width: 100%; }
.reason .txtbx { display: flex; flex-direction: column; align-items: flex-start; gap: var(--padding-30); flex: 1 1 0; min-width: 0; }
.reason .badge {padding: 2px var(--padding-16); background: var(--color-primary); color: #fff; font-size: var(--font-size-16); font-weight: 600; line-height: 1.25; letter-spacing: -0.03em; border-radius: 4px; }
.reason .tit {font-size: var(--font-size-18); font-weight: 400; color: #121212; letter-spacing: -0.03em; line-height: 1.3; }
.reason .cont { display: flex; flex-direction: column; align-items: flex-start; gap: var(--padding-12); width: 100%; min-width: 0; }
.reason .note { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px;}
.reason .note .sub { font-size: var(--font-size-16); color: #878787; letter-spacing: -0.03em; line-height: 1.3; }
.reason .item .img { flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.reason .item .img img { display: block; width: clamp(30px, calc( 50 / var(--inner) * 100vw ), 50px); height: clamp(30px, calc( 50 / var(--inner) * 100vw ), 50px); object-fit: contain; }

.evalbx { display: flex; flex-direction: column; align-items: flex-start; gap: var(--padding-20); width: 100%; max-width: 1400px; padding: var(--padding-40); background: #f4f4f4; border-radius: 8px; }
.evalbx .lead { margin: 0; font-size: var(--font-size-20); font-weight: 600; color: #121212; letter-spacing: -0.03em; line-height: 1.3; }
.evalbx .inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--padding-20); width: 100%; }
.evalbx .row { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: var(--padding-20); width: 100%; }
.evalbx .card { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--padding-20); flex: 1 1 0; min-width: 0; max-width: 650px; padding: var(--padding-30); background: #fff; border-radius: 8px; }
.evalbx .card.wide { max-width: none; width: 100%; align-self: stretch; }
.evalbx .card .tit { margin: 0; font-size: var(--font-size-18); font-weight: 600; color: #121212; letter-spacing: -0.03em; line-height: 1.3; }
.evalbx .dotlist { display: flex; flex-direction: column; gap: var(--padding-20); width: 100%; margin: 0; padding: 0; list-style: none; }
.evalbx .dotlist .line { position: relative; margin: 0; padding-left: 15px; font-size: var(--font-size-16); font-weight: 400; color: var(--color-body); letter-spacing: -0.03em; line-height: 1.5; }
.evalbx .dotlist .line::before { position: absolute; content: ''; left: 0; top: 0.45em; width: 5px; height: 5px; background: #505050; }
.evalbx .colwrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--padding-20); width: 100%; }
.evalbx .colwrap .dotlist { flex: 1 1 0; }

.ristbx .list { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: var(--padding-20); width: 100%; }
.ristbx .item { display: flex; flex-direction: column; justify-content: center; align-items: center; flex:  calc((100% - 3 * var(--padding-20)) / 4); padding: var(--padding-30); background: #fff; border-radius: 16px; gap: var(--padding-30); text-align: center; }
.ristbx .item .num {font-size: var(--font-size-18); font-weight: 600; color: var(--color-primary); letter-spacing: -0.03em; line-height: 1.33; }
.ristbx .item .img { display: flex; align-items: center; justify-content: center;}
.ristbx .item .img img { display: block; width: clamp(30px, calc( 40 / var(--inner) * 100vw ), 40px); height: clamp(30px, calc( 40 / var(--inner) * 100vw ), 40px); object-fit: contain; }
.ristbx .item .txt { align-self: stretch;font-size: var(--font-size-16); font-weight: 400; color: #454545; letter-spacing: -0.03em; line-height: 1.5; }

.dotlistbg .discon { display: flex; flex-direction: column; align-items: flex-start; gap: var(--padding-50); width: 100%; }
.dotlistbg .discon .block { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; gap: 15px; width: 100%; }
.dotlistbg .discon .numbx {margin-top: clamp(2px, calc( 5 / var(--inner) * 100vw ), 5px);}
.dotlistbg .discon .cont { flex: 1 1 0; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; min-width: 0; width: 100%; }
.dotlistbg .discon .num { box-sizing: content-box; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px;  border-radius: 50%; background: var(--color-primary); color: #fff; font-size: var(--font-size-12); font-weight: 600; letter-spacing: -0.03em; line-height: 1; text-align: center; }
.dotlistbg .discon .tit { margin: 0; width: 100%; font-size: var(--font-size-18); font-weight: 600; color: #121212; letter-spacing: -0.03em; line-height: 1.56; word-wrap: break-word; }