@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */
.root_daum_roughmap {width:100% !important; height:clamp(250px, calc( 300 / var(--inner) * 100vw ), 300px) !important;}
.root_daum_roughmap .wrap_map {height:clamp(250px, calc( 300 / var(--inner) * 100vw ), 300px) !important;}
.roughmap_lebel_text {line-height:0 !important; font-size:0 !important;}
.roughmap_lebel_text:after {content:"P&H Tech"; 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;}
.bulletitem2 { padding-left: 0.6em; text-indent: -0.6em;}

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

.bg-gray {background:#F8F8F8;}
.overhidden {overflow: hidden;}
.subsec-pd {padding: clamp(50px, calc( 100 / var(--inner) * 100vw ), 100px) 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 .wrap { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; flex-direction: row-reverse; gap: clamp(40px, calc( 60 / var(--inner) * 100vw ), 60px); }
.greet .cont { flex: 1 ;  }
.greet .cap { font-size: var(--font-size-16); font-weight: 700; color: var(--color-primary); letter-spacing: -0.03em; line-height: 1; }
.greet .lead { display: flex; flex-direction: column; gap: var(--padding-20); margin-top: var(--padding-20); }
.greet .lead .txt { font-size: var(--font-size-32); color: var(--color-dark); line-height: 1.31; letter-spacing: -0.03em; }
.greet .desc {display: flex;flex-direction: column;gap: var(--padding-25); margin-top: clamp(36px, calc( 50 / var(--inner) * 100vw ), 50px); color: var(--color-body); font-size: var(--font-size-16); line-height: 1.875; letter-spacing: -0.03em; }
.greet .photo { position: relative; width: clamp(250px, calc( 440 / var(--inner) * 100vw ), 440px); }
.greet .photo .img img { display: block; width: 100%;  }
.greet .photo .sign { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--padding-20); margin-top: clamp(36px, calc( 50 / var(--inner) * 100vw ), 50px); color: var(--color-dark); }
.greet .photo .sign .tit { font-size: var(--font-size-20); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.greet .photo .sign .name { font-family: var(--font-yoon); font-size: var(--font-size-48); letter-spacing: -0.03em; line-height: 1; }

.history .imgbx {margin-bottom: 40px; }
.history .body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(24px, calc( 40 / var(--inner) * 100vw ), 40px); position: relative; }
.history .body .titleArea { flex: 0 0 clamp(200px, calc( 360 / var(--inner) * 100vw ), 360px); width: clamp(200px, calc( 360 / var(--inner) * 100vw ), 360px); max-width: 100%; position: -webkit-sticky; position: sticky; top: calc(var(--header-height) + 30px); align-self: flex-start; z-index: 2; }
.history .titleArea ul {margin-top: -.5em;}
.history .titleArea li {color: #ddd; font-size: var(--font-size-40); font-weight: 700; line-height: 1.2; letter-spacing: -.03em; margin-bottom: var(--padding-30);}
.history .titleArea li.active {color: var(--color-primary);}
.history .body .conArea { flex: 1 1 0; min-width: 0; padding-left: 0; }
.history .group {padding: clamp(30px, calc( 40 / var(--inner) * 100vw ), 40px) 0; border-bottom: 1px solid #ddd;}
.history .group:first-child {padding-top: 0;}
.history .group:last-child {padding-bottom: 0; border-bottom: 0;}
.history .group ul {display: flex;flex-direction: column;gap: var(--padding-30);}
.history .group ul li {display: flex; flex-wrap: wrap; position: relative; line-height: 1.78;}
.history .group .year {width: clamp(80px, calc( 130 / var(--inner) * 100vw ), 130px); font-size: var(--font-size-28); font-weight: bold;  letter-spacing: -.03em;}
.history .group .contbx {flex: 1; display: flex; flex-direction: column; gap: var(--padding-15); margin-top: clamp(1px, calc( 10 / var(--inner) * 100vw ), 10px);}
.history .group .cont {position: relative; padding-left: clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px); color: var(--color-body); font-size: var(--font-size-16); letter-spacing: -.03em;}
.history .group .cont:after {content: ''; position: absolute; left: 0; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: var(--color-primary); }


.vision_1 {position: relative;z-index: 2;}
.vision_1:after {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 264px; background: url(../images/sub/vision_1-bg.jpg) no-repeat center center; background-size: cover; z-index: -1;}
.vision_1 .toptit {font-size:var(--font-size-24); font-weight: bold; line-height: 1.66; text-align: center;}
.vision_1 .visbd { display: flex; flex-direction: column; align-items: center; gap: var(--padding-30); margin-top: var(--padding-60); }
.vision_1 .visbd .top { display: flex; flex-direction: column; align-items: center; text-align: center; }
.vision_1 .visbd .top .img img { display: block; width: clamp(120px, calc( 201 / var(--inner) * 100vw ), 201px); height: auto; }
.vision_1 .visbd .top .tit { margin-top: var(--padding-20); font-size: var(--font-size-22); font-weight: 600; color: var(--color-black); letter-spacing: -0.02em; line-height: 1.36; }
.vision_1 .visbd .vline { width: 1px; height: 40px; flex-shrink: 0; background: var(--color-primary); }
.vision_1 .visbd .list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--padding-30); width: 100%; }
.vision_1 .visbd .item { display: flex; flex-direction: column; align-items: center; width: calc((100% - 2 * var(--padding-30)) / 3); padding: var(--padding-40); border: 3px solid; border-radius: var(--border-radius-32); background: var(--color-white); gap: var(--padding-24); }
.vision_1 .visbd .item.ter { border-color: var(--color-tertiary); }
.vision_1 .visbd .item.sec { border-color: var(--color-secondary); }
.vision_1 .visbd .item.pri { border-color: var(--color-primary); }
.vision_1 .visbd .thumb { display: flex; align-items: center; justify-content: center;  }
.vision_1 .visbd .thumb img { width: clamp(50px, calc( 96 / var(--inner) * 100vw ), 96px); }
.vision_1 .visbd .txt { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; text-align: center; }
.vision_1 .visbd .eng { font-size: var(--font-size-16); font-weight: 600; color: #cacaca; letter-spacing: -0.03em; line-height: 1.5; }
.vision_1 .visbd .sub { font-size: var(--font-size-24); font-weight: 600; color: var(--color-dark); letter-spacing: -0.03em; line-height: 1.33; }
.vision_2 .subsecbx {margin-bottom: var(--padding-60); text-align: center;}
.vision_2 .subsecbx .cate {display: block; margin-bottom:var(--padding-16); font-size: var(--font-size-18); font-weight: 600; color: var(--color-primary); letter-spacing: -0.03em; line-height: 1.44;}
.vision_2 .subsecbx .tit {font-size: var(--font-size-32); font-weight: 700; letter-spacing: -0.03em; line-height: 1.25;}


.location-area {display: flex;flex-direction: column;gap:var(--padding-100);}
.location-area .mapwrap {display: flex;flex-direction: column;gap:var(--padding-60);}
.location-area .mapinfobx {display: flex;flex-wrap: wrap; gap:var(--padding-60);}
.location-area .mapinfobx.reverse {flex-direction: row-reverse;}
.location-area .mapbx {width:clamp(300px, calc( 600 / var(--inner) * 100vw ), 600px);}
.location-area .map {height:clamp(250px, calc( 300 / var(--inner) * 100vw ), 300px) ;}
.location-area .mapbx iframe {width: 100%; height: 100%;}
.location-area .locinfo {flex: 1; display: flex; flex-direction: column; gap: var(--padding-20); }
.location-area .locinfo .tit { font-size: var(--font-size-36); font-weight: 600; color: var(--color-dark); letter-spacing: -0.02em; line-height: 1.78; }
.location-area .locinfo .list { display: flex; flex-direction: column; gap: var(--padding-40); }
.location-area .locinfo .item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--padding-20); }
.location-area .locinfo .thumb img { display: block; width: clamp(40px, calc( 88 / var(--inner) * 100vw ), 88px); height: auto; }
.location-area .locinfo .txt { display: flex; flex-direction: column; gap: var(--padding-16); min-width: 0; }
.location-area .locinfo .item .txt { flex: 1 1 0; }
.location-area .locinfo .item:last-child .txt { gap: var(--padding-20); }
.location-area .locinfo .label { font-size: var(--font-size-24); font-weight: 600; color: var(--color-dark); letter-spacing: -0.02em; line-height: 1; }
.location-area .locinfo .cont { display: flex; flex-direction: column; gap: 0; }
.location-area .locinfo .desc { font-size: var(--font-size-18); color: var(--color-body); letter-spacing: -0.02em; line-height: 1.33; }
.location-area .locinfo .desc a { color: inherit; }

.oled_1 {padding: var(--padding-110) 0; position: relative; background: #000; color: #fff; z-index: 1;}
.oled_1:after {z-index: -1; position: absolute; content: ''; right: 0; top: 0; width:clamp(250px, calc( 960 / var(--inner) * 100vw ), 960px); height: 100%; background: url(../images/sub/oled_1-bg.jpg) no-repeat center center; background-size: cover; }
.oled_1 .textbx {display: flex;flex-direction: column;gap:var(--padding-40); letter-spacing: -0.5px; max-width: 600px; width: 100%;}
.oled_1 .textbx .title {font-size:var(--font-size-32); font-weight: bold;}
.oled_1 .textbx .descbx {display: flex;flex-direction: column;gap:var(--padding-20); }
.oled_1 .textbx .dec {color: rgba(255, 255, 255, 0.80); line-height: 1.75;}
.oled_1 .textbx .dec strong {color: #fff;}

.oled_2 .list { display: flex; flex-wrap: wrap; justify-content: center;  margin:clamp(-20px, calc( -20 / var(--inner) * 100vw ), -10px) ;}
.oled_2 .item { position: relative; display: flex; flex-direction: column; align-items: center; width:25%; padding:  var(--padding-20); text-align: center; gap: var(--padding-30); }
.oled_2 .item:not(:last-child)::after { content: ''; display: block; position: absolute; top: 15%; right: 0; bottom: 15%; width: 0; border-right: 1px dashed #ddd; }
.oled_2 .thumb { display: flex; align-items: center; justify-content: center;  }
.oled_2 .thumb img { width: clamp(35px, calc( 64 / var(--inner) * 100vw ), 64px); }
.oled_2 .txt { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.oled_2 .tit { font-size: var(--font-size-20); font-weight: 600; color: var(--color-dark); letter-spacing: -0.02em; line-height: 1.4; }
.oled_2 .desc { font-size: var(--font-size-16); color: #686868; letter-spacing: -0.02em; line-height: 1.5; }

.content-tit {margin-bottom: var(--padding-30); padding-left:clamp(22px, calc( 30 / var(--inner) * 100vw ), 30px); position: relative; font-size: var(--font-size-20); font-weight: 600; line-height: 1.5; letter-spacing: -0.4px;} 
.content-tit:after {position: absolute; content: ''; left: 0; top: 5px; width:clamp(14px, calc( 20 / var(--inner) * 100vw ), 20px); height:auto; aspect-ratio: 1/1; background: url(../images/sub/dot-tit.svg) no-repeat center center; background-size: contain; }
.commimgbx img {border-radius: clamp(10px, calc( 24 / var(--inner) * 100vw ), 24px);}
.contents-sec {display: flex;flex-direction: column; gap: var(--padding-60);}
.contents-sec .commsectitbx {margin-bottom: 0;}
.commsectitbx {margin-bottom: var(--padding-60 );}
.commsectitbx .sectit {font-size: var(--font-size-40); font-weight: 600; text-align: center;}
.commsectitbx .secdec {margin-top:var(--padding-30); color: var(--color-body); line-height: 1.5; text-align: center;}
.quobx {display: flex; flex-direction: column;gap: 20px; text-align: center; letter-spacing: -0.02em;}
.quobx .inline {display: inline-block; padding:0 clamp(26px, calc( 45 / var(--inner) * 100vw ), 45px); position: relative; font-size: var(--font-size-24); font-weight: 600;  }
.quobx .inline:after ,
.quobx .inline:before {position: absolute; content: ''; top: 0; width: clamp(20px, calc( 32 / var(--inner) * 100vw ), 32px); height: auto;  aspect-ratio: 1/1; background-size: contain; background-repeat: no-repeat;}
.quobx .inline:after {left: 0; background-image: url(../images/sub/quo1.svg);}
.quobx .inline:before {right: 0; background-image: url(../images/sub/quo2.svg);}
.quobx .dec {color: #686868; line-height: 1.5;}


.oled_3 .flow .list { display: flex; flex-wrap: wrap; justify-content: center; margin: clamp(-40px, calc( -40 / var(--inner) * 100vw ), -16px) ;}
.oled_3 .flow .item { position: relative; width: 25%; padding: clamp(16px, calc( 40 / var(--inner) * 100vw ), 40px); }
.oled_3 .flow .item:not(:last-child)::after { content: ''; position: absolute; top: 40%; right: 0; width: clamp(18px, calc( 40 / var(--inner) * 100vw ), 40px); height: clamp(18px, calc( 40 / var(--inner) * 100vw ), 40px); background: url(../images/sub/arrow.svg) no-repeat center center; background-size: contain; transform: translate(50%, -50%); }
.oled_3 .flow .top { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.oled_3 .flow .stit { padding: 8px var(--padding-10); border-radius: 16px 16px 0 0; font-size: var(--font-size-18); font-weight: 700; color: var(--color-white); text-align: center; letter-spacing: -0.02em; line-height: 1.44; }
.oled_3 .flow .crt .stit { background: #686868; }
.oled_3 .flow .lcd .stit,
.oled_3 .flow .oled .stit { background: linear-gradient(90deg, #192159, #2e3980); }
.oled_3 .flow .foled .stit { background: var(--color-tertiary); }
.oled_3 .flow .img { position: relative; overflow: hidden; height: clamp(160px, calc( 192 / var(--inner) * 100vw ), 192px); border: 1px solid #ddd; border-top: none; border-radius: 0 0 16px 16px; margin: 0; }
.oled_3 .flow .img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.oled_3 .flow .barbx { display: flex; flex-direction: column; gap: 8px; margin-top: var(--padding-20); }
.oled_3 .flow .labs { display: flex; justify-content: space-between; padding: 0 8px; font-size: var(--font-size-16); font-weight: 500; color: var(--color-dark); letter-spacing: -0.02em; line-height: 1; }
.oled_3 .flow .track { position: relative; height: 8px; overflow: hidden; border-radius: 50px; background: #ddd; }
.oled_3 .flow .fill { position: absolute; top: 0; right: 0; bottom: 0; border-radius: 50px; background: linear-gradient(90deg, #192159, #2e3980); }
.oled_3 .flow .lcd .fill { width: 50%; }
.oled_3 .flow .oled .fill { width: 90%; }
.oled_3 .flow .foled .fill { left: 0; width: 100%; background: linear-gradient(90deg, #7e1a1b, #d92628); }
.oled_3 .flow .pcts { display: flex; justify-content: space-between; padding: 0 8px; font-size: var(--font-size-16); letter-spacing: -0.02em; line-height: 1; }
.oled_3 .flow .crt .pct.l { color: var(--color-dark); font-weight: 700; }
.oled_3 .flow .crt .pct.r { color: #686868; }
.oled_3 .flow .lcd .pct.l,
.oled_3 .flow .oled .pct.l { color: #686868; }
.oled_3 .flow .lcd .pct.r,
.oled_3 .flow .oled .pct.r { color: var(--color-primary); font-weight: 700; }
.oled_3 .flow .foled .pct.l { color: #686868; }
.oled_3 .flow .foled .pct.r { color: var(--color-tertiary); font-weight: 700; }
.oled_3 .pngrid { width: 100%; }
.oled_3 .pngrid .list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--padding-40); }
.oled_3 .pngrid .item { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--padding-24); padding: var(--padding-40); border: 1px solid #ddd; border-radius: var(--border-radius-24); background: var(--color-white); }
.oled_3 .pngrid .txtbx { display: flex; flex-direction: column; gap: var(--padding-24); min-width: 0; }
.oled_3 .pngrid .num { font-size: var(--font-size-20); font-weight: 700; color: var(--color-primary); letter-spacing: -0.02em; line-height: 1.4; }
.oled_3 .pngrid .txt { display: flex; flex-direction: column; gap: 8px; }
.oled_3 .pngrid .tit { font-size: var(--font-size-24); font-weight: 700; color: var(--color-dark); letter-spacing: -0.02em; line-height: 1.33; }
.oled_3 .pngrid .desc { font-size: var(--font-size-16); color: #686868; letter-spacing: -0.02em; line-height: 1.5; }
.oled_3 .pngrid .thumb { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.oled_3 .pngrid .thumb img { display: block; width:  clamp(30px, calc( 64 / var(--inner) * 100vw ), 64px);}

.oled_4 .showlist { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: var(--padding-20); }
.oled_4 .showlist .item { display: flex; flex-direction: column; align-items: center; width: calc((100% - 4 * var(--padding-20)) / 5); gap: var(--padding-20); text-align: center; }
.oled_4 .showlist .img { position: relative; width: 100%; max-width: 225px; aspect-ratio: 1;  }
.oled_4 .showlist .img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.oled_4 .showlist .cap { font-size: var(--font-size-16); font-weight: 600; color: var(--color-dark); letter-spacing: -0.02em; line-height: 1.75; }

.oled_5 .techgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--padding-40); }
.oled_5 .techgrid .item { display: flex; flex-direction: column; align-items: stretch;  }
.oled_5 .techgrid .hd { display: flex; align-items: center; justify-content: center; padding: 8px var(--padding-10); border-radius: var(--border-radius-24) var(--border-radius-24) 0 0; background: linear-gradient(90deg, #1f2758, #2e3980); text-align: center; }
.oled_5 .techgrid .tit { margin: 0; font-size: var(--font-size-20); font-weight: 600; color: var(--color-white); letter-spacing: -0.02em; line-height: 1.6; }
.oled_5 .techgrid .cont { flex: 1 0 auto; display: flex; flex-direction: column; gap: 0; padding: var(--padding-40); border: 1px solid #2e3980; border-top: none; border-radius: 0 0 var(--border-radius-24) var(--border-radius-24); background: var(--color-white); text-align: center; }
.oled_5 .techgrid .cont .txt { font-size: var(--font-size-16); color: var(--color-body); letter-spacing: -0.02em; line-height: 1.75; }

.equi .list { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--padding-30); row-gap: var(--padding-60); }
.equi .item { display: flex; flex-direction: column; align-items: stretch; gap: var(--padding-20); text-align: center; }
.equi .img img { display: block; width: 100%; aspect-ratio: 380 / 260; object-fit: cover; border-radius: 16px; }
.equi .cap { font-size: var(--font-size-18); font-weight: 500; color: var(--color-dark); letter-spacing: -0.03em; line-height: 1.56; }

.patent-wrap {display: flex;flex-direction: column;gap: var(--padding-100);}
.patent-wrap .statgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--padding-30); }
.patent-wrap .statgrid .item { display: flex; flex-direction: column; min-width: 0; border: 1px solid #ddd; border-radius: 16px; overflow: hidden; background: var(--color-white); }
.patent-wrap .statgrid .chartbx { padding: var(--padding-50) var(--padding-45) ; border-bottom: 1px solid #ddd; text-align: center; }
.patent-wrap .statgrid .stit { margin: 0 0 var(--padding-16); font-size: var(--font-size-22); font-weight: 600; color: var(--color-dark); letter-spacing: -0.02em; line-height: 1.36; }
.patent-wrap .statgrid .chartbx .img { margin: 0; }
.patent-wrap .statgrid .chartbx .img img { display: block; width: 100%; height: auto; }
.patent-wrap .statgrid .legbx { display: flex; flex-direction: column; gap: var(--padding-16); padding: var(--padding-24); background: #f8f8f8; }
.patent-wrap .statgrid .leglist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--padding-16); }
.patent-wrap .statgrid .leglist.col3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.patent-wrap .statgrid .legitem { display: flex; align-items: center; gap: 12px;  }
.patent-wrap .statgrid .sw { flex-shrink: 0; width: clamp(18px, calc( 24 / var(--inner) * 100vw ), 24px); height: clamp(18px, calc( 24 / var(--inner) * 100vw ), 24px); border-radius: 4px; }
.patent-wrap .statgrid .y2021 { background: #00ace9; }
.patent-wrap .statgrid .y2022 { background: #0051ad; }
.patent-wrap .statgrid .y2023 { background: #5c6471; }
.patent-wrap .statgrid .y2024 { background: #2e3980; }
.patent-wrap .statgrid .y2025 { background: #389047; }
.patent-wrap .statgrid .y2026 { background: #d92628; }
.patent-wrap .statgrid .ly-cpl { background: #d92628; }
.patent-wrap .statgrid .ly-htl { background: #0051ad; }
.patent-wrap .statgrid .ly-etl { background: #2e3980; }
.patent-wrap .statgrid .ly-dop { background: #00ace9; }
.patent-wrap .statgrid .ly-pdop { background: #389047; }
.patent-wrap .statgrid .ly-host { background: #686868; }
.patent-wrap .statgrid .ly-etc { background: #ff9800; }
.patent-wrap .statgrid .ly-ncgl { background: #9c27b0; }
.patent-wrap .statgrid .txtbx { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.patent-wrap .statgrid .year { font-size: var(--font-size-16); font-weight: 700; color: var(--color-dark); letter-spacing: -0.02em; line-height: 1.5; }
.patent-wrap .statgrid .cnt { font-size: var(--font-size-16); color: #686868; letter-spacing: -0.02em; line-height: 1.5; }
.patent-wrap .statgrid .total { margin: 0; padding-top: var(--padding-16); border-top: 1px solid #ddd; font-size: var(--font-size-20); font-weight: 700; color: var(--color-dark); letter-spacing: -0.02em; line-height: 1.4; text-align: right; }

.ir-wrap {text-align: center;}

.env_1 .pillist { display: flex; flex-wrap: nowrap; justify-content: center; align-items: flex-start; margin: 0; padding: 0 28px 0 0; }
.env_1 .pillist .item { display: flex; flex-direction: column; align-items: center; gap: var(--padding-30); flex-shrink: 0; margin-right: -28px; position: relative; }
.env_1 .pillist .item:nth-child(1) { z-index: 1; }
.env_1 .pillist .item:nth-child(2) { z-index: 2; }
.env_1 .pillist .item:nth-child(3) { z-index: 3; }
.env_1 .pillist .item:nth-child(4) { z-index: 4; }
.env_1 .pillist .item:last-child { margin-right: 0; }
.env_1 .orb { box-sizing: border-box; width: clamp(240px, calc(320 / var(--inner) * 100vw), 320px); aspect-ratio: 1; padding: 10px; border-radius: 50%; }
.env_1 .orb.c1 { background: var(--color-tertiary); }
.env_1 .orb.c2 { background: var(--color-secondary); }
.env_1 .orb.c3 { background: var(--color-primary); }
.env_1 .orb.c4 { background: #464646; }
.env_1 .ring { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--padding-24); width: 100%; height: 100%; box-sizing: border-box; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, 0.8); }
.env_1 .num { font-size: var(--font-size-20); font-weight: 700; color: #fff; letter-spacing: -0.02em; line-height: 1.2; text-align: center; }
.env_1 .icn { display: flex; align-items: center; justify-content: center; width: clamp(30px, calc(64 / var(--inner) * 100vw), 64px); height: clamp(30px, calc(64 / var(--inner) * 100vw), 64px); }
.env_1 .icn img { display: block; width: 100%; height: 100%; object-fit: contain; }
.env_1 .titbx { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.env_1 .tit { font-size: var(--font-size-20); font-weight: 600; color: #fff; letter-spacing: -0.02em; line-height: 1.4; }
.env_1 .sub { font-size: var(--font-size-14); font-weight: 500; color: rgba(255, 255, 255, 0.4); letter-spacing: -0.02em; line-height: 1.57; }
.env_1 .desc { width: 100%; max-width: clamp(220px, calc(320 / var(--inner) * 100vw), 320px); padding: 0 30px; box-sizing: border-box; }
.env_1 .desc .txt { font-size: var(--font-size-16); color: #686868; letter-spacing: -0.02em; line-height: 1.5; text-align: center; }

.tabwrap {overflow-x: auto;}
.tabwrap .tabs {display: flex;justify-content: center; gap:var(--padding-10);}
.tabwrap .tabitem {background: #fff; border-radius:24px 24px 0 0;}
.tabwrap .tabitem .link {display: flex;align-items: center;justify-content: center; padding:var(--padding-12) var(--padding-24); min-width:clamp(110px, calc( 136 / var(--inner) * 100vw ), 136px); font-weight: 600; color: var(--color-primary); line-height: 1.5; letter-spacing: -0.5px;}
.tabwrap .tabitem.active {background: var(--color-primary);} 
.tabwrap .tabitem.active .link {color: #fff;}
.tabcontents {padding: var(--padding-60); border-radius: 24px; background: #FFF; box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.16);}
.env_2 .fieldlist { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: stretch; align-self: stretch;margin-top: var(--padding-40); }
.env_2 .fieldlist .row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--padding-40); width: 100%; max-width: 1080px; margin: 0 auto; padding: var(--padding-40); box-sizing: border-box; border-bottom: 1px dashed #ddd; }
.env_2 .fieldlist .row:last-child { border-bottom: none; }
.env_2 .fieldlist .titcol { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--padding-20); width: clamp(180px, calc( 240 / var(--inner) * 100vw ), 240px); flex-shrink: 0; }
.env_2 .fieldlist .no { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2px 12px; border-radius: 16px; background: var(--color-primary); font-size: var(--font-size-14); font-weight: 600; color: #fff; letter-spacing: -0.02em; line-height: 1.43; text-align: center; box-sizing: border-box; }
.env_2 .fieldlist .stit { font-size: var(--font-size-18); font-weight: 600; color: var(--color-dark); letter-spacing: -0.02em; line-height: 1.44; }
.env_2 .fieldlist .txtcol { flex: 1 1 0; display: flex; flex-direction: column; gap: 0; min-width: 0; }
.env_2 .fieldlist .para { font-size: var(--font-size-16); color: #454545; letter-spacing: -0.02em; line-height: 1.5; }
.env_2 .quobx { gap: var(--padding-20); }
.env_2 .quobx .dec { color: #454545; font-size: var(--font-size-16); letter-spacing: -0.02em; line-height: 1.5; }

.env_3 .safelist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--padding-20) var(--padding-30); margin: var(--padding-60) 0 0; }
.env_3 .safelist .item { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: var(--padding-16); box-sizing: border-box; border-radius: 50px; background: var(--color-primary); }
.env_3 .safelist .icn { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: clamp(16px, calc( 24 / var(--inner) * 100vw ), 24px); height: clamp(16px, calc( 24 / var(--inner) * 100vw ), 24px); }
.env_3 .safelist .icn img { display: block; width: 100%; height: 100%; object-fit: contain; }
.env_3 .safelist .tit { flex: 1 1 0; min-width: 0; font-size: var(--font-size-16); font-weight: 600; color: #fff; letter-spacing: -0.02em; line-height: 1.5; }

.gov { display: flex; flex-direction: column; align-items: center; gap: var(--padding-100); }
.gov .contain { display: flex; flex-direction: column; align-items: center; gap: var(--padding-100); width: 100%; }
.gov .board,
.gov .audit { display: flex; flex-direction: column; align-items: center; width: 100%; }
.gov .sechead { display: flex; align-items: center; justify-content: center; width: 100%; max-width: clamp(180px, calc( 380 / var(--inner) * 100vw ), 380px); padding: var(--padding-24) var(--padding-20); box-sizing: border-box; border-radius: 16px; background: linear-gradient(180deg, #808080, #555); font-size: var(--font-size-24); font-weight: 600; color: #fff; letter-spacing: -0.02em; line-height: 1.33; text-align: center; }
.gov .line { width: 100%; max-width: 820px; display: flex; justify-content: center; align-items: center; }
.gov .line img { display: block; width: 100%; height: auto; max-width: clamp(400px, calc( 820 / var(--inner) * 100vw ), 820px); }
.gov .audit .line { max-width: 60px; }
.gov .audit .line img { max-width: 60px; width: auto; height: auto; }
.gov .cardlist { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--padding-30); width: 100%;}
.gov .card { display: flex; flex-direction: column; align-items: center; gap: var(--padding-24); width:  calc((100% - 2 * var(--padding-30)) / 3); padding: var(--padding-30) var(--padding-20); box-sizing: border-box; border: 1px solid #ddd; border-radius: 16px; background: var(--color-white); }
.gov .avatar { display: flex; align-items: flex-start; justify-content: center; width: clamp(55px, calc( 80 / var(--inner) * 100vw ), 80px); height: clamp(55px, calc( 80 / var(--inner) * 100vw ), 80px); padding: var(--padding-20) var(--padding-20) 0; box-sizing: border-box; border-radius: 50%; }
.gov .avatar.ter { background: linear-gradient(180deg, #d92628, #c00007); }
.gov .avatar.sec { background: linear-gradient(180deg, #389047, #1a6226); }
.gov .avatar.pri { background: linear-gradient(180deg, #2e3980, #182260); }
.gov .avatar.gen { background: linear-gradient(180deg, #666, #232323); }
.gov .avatar .img { width: clamp(30px, calc(40 / var(--inner) * 100vw ),40px); height: clamp(30px, calc(40 / var(--inner) * 100vw ),40px); }
.gov .avatar .img img { display: block; width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1); }
.gov .namebx { display: flex; flex-direction: column; align-items: center; gap: var(--padding-10); width: 100%; text-align: center; }
.gov .role { font-size: var(--font-size-16); font-weight: 500; color: #868686; letter-spacing: -0.02em; line-height: 1.5; }
.gov .name { font-size: var(--font-size-28); font-weight: 700; color: var(--color-dark); letter-spacing: 0.02em; line-height: 1.29; }
.gov .infobox { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--padding-10); width: 100%; padding: var(--padding-24) var(--padding-20); box-sizing: border-box; border-radius: 8px; text-align: center; }
.gov .infobox.ter { background: rgba(217, 38, 40, 0.03); }
.gov .infobox.sec { background: rgba(56, 144, 71, 0.03); }
.gov .infobox.pri { background: rgba(46, 57, 128, 0.03); }
.gov .infobox.gen { background: rgba(51, 51, 51, 0.03); }
.gov .inftit { font-size: var(--font-size-20); font-weight: 700; letter-spacing: -0.02em; line-height: 1.4; width: 100%; }
.gov .infobox.ter .inftit { color: var(--color-tertiary); }
.gov .infobox.sec .inftit { color: var(--color-secondary); }
.gov .infobox.pri .inftit { color: var(--color-primary); }
.gov .infobox.gen .inftit { color: var(--color-dark); }
.gov .infdate { font-size: var(--font-size-16); color: #454545; letter-spacing: -0.02em; line-height: 1.5; width: 100%; }

.comsec-wrap {display: flex;flex-direction: column;gap: clamp(40px, calc( 60 / var(--inner) * 100vw ), 60px);}
.comsec-wrap .commtoptit {font-size: var(--font-size-24); font-weight: 500; line-height: 1.66; letter-spacing: -0.4px; text-align: center;}

.recproc .steplist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--padding-30); margin: 0 auto;  list-style: none; width: 100%; max-width: 1200px; box-sizing: border-box; }
.recproc .step { display: flex; flex-direction: column; align-items: flex-start; gap: var(--padding-10); padding: var(--padding-40); box-sizing: border-box; border-radius: var(--border-radius-24); background: var(--color-white); border: 1px solid; overflow: hidden; }
.recproc .step.pri { border-color: rgba(46, 57, 128, 0.3); }
.recproc .step.sec { border-color: rgba(56, 144, 71, 0.3); }
.recproc .steptit { display: flex; align-items: center; gap: var(--padding-14); min-height: 40px; width: 100%; }
.recproc .num { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 15px; font-size: var(--font-size-14); font-weight: 700; color: #fff; line-height: 1; text-align: center; }
.recproc .step.pri .num { background: var(--color-primary); }
.recproc .step.sec .num { background: var(--color-secondary); }
.recproc .tit { margin: 0; font-size: var(--font-size-22); font-weight: 600; color: var(--color-dark); letter-spacing: -0.02em; line-height: 1.82; }
.recproc .detail { margin: 0; padding: 0 0 0 var(--padding-24); list-style: disc; width: 100%; box-sizing: border-box; }
.recproc .detail li { font-size: var(--font-size-16); color: #454545; letter-spacing: -0.02em; line-height: 1.875; }
.recproc .step.pri .detail li::marker { color: var(--color-primary); }
.recproc .step.sec .detail li::marker { color: var(--color-secondary); }
.recproc .detail li.ind { list-style: none; margin-left: 0; padding-left: 0; }
.recproc .detail .mailto { color: var(--color-primary); text-decoration: underline; }

.recnote { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px; width: 100%; max-width: 900px; margin: 0 auto; padding: var(--padding-15) var(--padding-30); box-sizing: border-box; border-radius: 60px; background: rgba(217, 38, 40, 0.03); }
.recnote .icn { flex-shrink: 0; width: 26px; height: 26px; margin: 0; }
.recnote .icn svg { display: block; width: 100%; height: 100%; }
.recnote .txt { margin: 0; font-size: var(--font-size-16); font-weight: 400; color: var(--color-dark); letter-spacing: -0.02em; line-height: 1.875; text-align: center; }

.welfare .list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--padding-30); }
.welfare .item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--padding-30); padding: var(--padding-30); box-sizing: border-box; border: 1px solid rgba(46, 57, 128, 0.3); border-radius: var(--border-radius-24); background: var(--color-white); overflow: hidden; }
.welfare .img { display: flex; align-items: center; justify-content: center; width: clamp(30px, calc( 64 / var(--inner) * 100vw ), 64px); height: clamp(30px, calc( 64 / var(--inner) * 100vw ), 64px); margin: 0; }
.welfare .img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.welfare .txtbx { display: flex; flex-direction: column; align-items: center; gap: var(--padding-10); width: 100%; }
.welfare .tit { font-size: var(--font-size-20); font-weight: 600; color: var(--color-dark); letter-spacing: -0.02em; line-height: 2; text-align: center; }
.welfare .desc { font-size: var(--font-size-16); color: #454545; letter-spacing: -0.02em; line-height: 1.875; text-align: center; }