@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */
.root_daum_roughmap {width:100% !important; height:clamp(250px, calc( 500 / var(--inner) * 100vw ), 500px) !important;}
.root_daum_roughmap .wrap_map {height:clamp(250px, calc( 500 / var(--inner) * 100vw ), 500px) !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(12px, calc( 15 / var(--inner) * 100vw ), 15px); margin-top:clamp(10px, calc( 24 / var(--inner) * 100vw ), 24px); line-height:1.3; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); color: var(--color-body);}
.bullet-item .bullet-list:first-child {margin-top:0;}
.bullet-item .bullet-list::before {position:absolute; content:''; left:0; top:clamp(8px, calc( 9 / var(--inner) * 100vw ), 9px); width:clamp(4px, calc( 6 / var(--inner) * 100vw ), 6px); height: clamp(4px, calc( 6 / var(--inner) * 100vw ), 6px); 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;}

.bg-gray {background:#f9f9f9;}
.overhidden {overflow: hidden;}
.subsec-pd {padding:clamp(50px, calc( 120 / var(--inner) * 100vw ), 120px) 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);}

.bdtitle {margin-bottom:clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px); padding-bottom: clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px); border-bottom: 1px solid #ddd; font-size:clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); font-weight: bold; line-height: 1.25;}

.sub1_1_1 .imgbx {flex: 1 0  clamp(300px, calc( 600 / var(--inner) * 100vw ), 600px); max-width:  clamp(300px, calc( 600 / var(--inner) * 100vw ), 600px); margin-right: clamp(15px, calc( 100 / var(--inner) * 100vw ), 100px);}
.sub1_1_1 .textbx {flex: 1 0 auto; width: 1%; letter-spacing: -0.5px;}
.sub1_1_1 .titlebx {padding-top: clamp(40px, calc( 70 / var(--inner) * 100vw ), 70px); position: relative; line-height: 1.33;}
.sub1_1_1 .titlebx .txt1 {font-size: clamp(20px, calc( 32 / var(--inner) * 100vw ), 32px); font-weight: bold;}
.sub1_1_1 .titlebx .txt2 {margin-top: 5px; font-size: clamp(24px, calc( 48 / var(--inner) * 100vw ), 48px); font-weight: bold;}
.sub1_1_1 .titlebx .engtit {position: absolute; top: -20px;left:0; font-size:clamp(70px, calc( 150 / var(--inner) * 100vw ), 150px); font-weight: bold; color: #f7f7f7; letter-spacing: -1.8px;z-index: -1; line-height: 1;} 
.sub1_1_1 .decbx {padding-top: clamp(25px, calc( 45 / var(--inner) * 100vw ), 45px);}
.sub1_1_1 .dec {font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); color: var(--color-body); line-height: 1.66;}
.sub1_1_1 .dec:not(:last-child) {margin-bottom: clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px);}
.sub1_1_1 .dec.last {margin-top:clamp(18px, calc( 30 / var(--inner) * 100vw ), 30px); text-align: right; color: #121212; font-size: 20px; font-weight: bold;}

.sub1_1_2 .flxWrap {align-items: center;flex-direction: row-reverse;}
.sub1_1_2 .textbx {flex: 1 0 auto; width: 1%;}
.sub1_1_2 .textbx .txt {font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); color: var(--color-body); line-height:1.77;}
.sub1_1_2 .textbx .txt + .txt {margin-top: clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px);}
.sub1_1_2 .imgbx {flex:1 0 50%; max-width: 50%; margin-left: 15px;}

.location-area .toptext {display: flex; flex-wrap: wrap; margin-bottom:  clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px); padding-bottom:  clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px); border-bottom: 2px solid #ddd;}
.location-area .titbx {flex: 1 0 50%; max-width: 50%; padding-right: 15px; font-size: clamp(20px, calc( 32 / var(--inner) * 100vw ), 32px); line-height: 1.375;}
.location-area .mapinfobx {flex: 1 0 auto; width: 1%;}
.mapinfobx .txt1 {margin-bottom: clamp(12px, calc( 20 / var(--inner) * 100vw ), 20px); font-size:clamp(18px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: 600;}
.mapinfobx .txt2 {font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px);}
.mapicnlist {display: flex; flex-wrap: wrap; margin: -10px; padding-top:clamp(12px, calc( 20 / var(--inner) * 100vw ), 20px);}
.mapicnitem {flex: 1 0 33.33%; max-width: 33.33%; padding: 10px; display: flex; align-items: center;}
.mapicnitem:last-child {flex: 1 0 100%; max-width: 100%;}
.mapicnitem .icn {flex: 1 0 30px; max-width: 30px; margin-right:10px;}
.mapicnitem .text {flex: 1 0 auto; width: 1%; font-size:clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); color: var(--color-body); line-height: 1.5;}

.subsectitbx {margin-bottom: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}
.subsectitbx.ty2 {margin-bottom: clamp(25px, calc( 50 / var(--inner) * 100vw ), 50px);}
.subsectitbx .subtitle {font-size:clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); font-weight: bold; line-height:1.4;}
.subsectitbx .subdec {display:none; margin-top: clamp(20px, calc( 65 / var(--inner) * 100vw ), 65px); font-size: clamp(16px, calc( 22 / var(--inner) * 100vw ), 22px); color: var(--color-body); line-height: 1.6;}
.subsectitbx .subdec2 {margin-top: clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px); font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); color: var(--color-body); line-height: 1.6;}
.subsectitbx .subdec .dec {display: block;font-weight: 600;}
.subsectitbx .subdec .dec:not(:last-child) {margin-bottom: 5px;}

.sub2_1_1 {background: url(../images/sub/sub2_1_1-bg.jpg) no-repeat center center / cover;}
.sub2_1_1 .textbx {position: relative;}
.sub2_1_1 .subsectitbx {position: absolute; top: 0; left: 0;}

.tabs {display: flex; align-items: center; padding-bottom: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);}
.tabs .tabitem:not(:last-child) {margin-right: clamp(15px, calc( 40 / var(--inner) * 100vw ), 40px);}
.tabs .tabitem .link {display: block; padding-left:clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px); position: relative; font-size:clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: bold; color: #878787;}
.tabs .tabitem .link:after {position: absolute; content: ''; left: 0; top: 50%; transform: translateY(-50%); width: clamp(5px, calc( 8 / var(--inner) * 100vw ), 8px); height: clamp(5px, calc( 8 / var(--inner) * 100vw ), 8px); background: #878787; border-radius: 50%;}
.tabs .tabitem.active .link {color: var(--color-primary);}
.tabs .tabitem.active .link:after {background: var(--color-primary);}

.tabimglist {display: flex; flex-wrap: wrap; margin: clamp(-10px, calc( -10 / var(--inner) * 100vw ), -5px); }
.tabimgitem {flex: 1 0 20%; max-width: 20%; padding: clamp(5px, calc( 10 / var(--inner) * 100vw ), 10px); text-align: center;}

.history-item {display: flex;}
.history-item:first-child .commpd {border-top: 2px solid #121212;}
.history-item .commpd {padding: clamp(25px, calc( 55 / var(--inner) * 100vw ), 55px) 0; border-bottom: 1px solid #ddd;}
.history-item .yearbx {flex: 1 0 clamp(90px, calc( 300 / var(--inner) * 100vw ), 300px); max-width: clamp(90px, calc( 300 / var(--inner) * 100vw ), 300px); margin-right: clamp(15px, calc( 60 / var(--inner) * 100vw ), 60px); font-size: clamp(22px, calc( 40 / var(--inner) * 100vw ), 40px); font-weight: 600; color: var(--color-primary); text-align: center;}
.history-item .textbx {flex: 1 0 auto; width: 1%;}

.sub3_1_1 {text-align: center; background: #ebf9ff;}
.sub3_1_1 .title {margin-bottom: clamp(50px, calc( 150 / var(--inner) * 100vw ), 150px); font-size: clamp(24px, calc( 56 / var(--inner) * 100vw ), 56px); font-weight: bold;}
.sub3_1_1 .title .color-1 {color: #00a4dd;}
.sub3_1_1 .title .color-2 {color: #0080c4;}
.sub3_1_1 .title .color-3 {color: #0064b2;}
.sub3_1_1 .title .color-4 {color: #5b808e;}

.sub3_1 .bullet-list {display: flex;}
.sub3_1 .bullet-list .name {flex:1 0 clamp(135px, calc( 170 / var(--inner) * 100vw ), 170px); max-width: clamp(135px, calc( 170 / var(--inner) * 100vw ), 170px); font-weight: bold;color: var(--color-primary);}
.sub3_1 .bullet-list .name.ty2 {flex:1 0 100%;max-width:100%;}
.sub3_1 .bullet-list .dec {flex: 1 0 auto; width: 1%;}
.sub3_1 .imglist {display: flex;flex-wrap: wrap; margin:clamp(-20px, calc( -20 / var(--inner) * 100vw ), -5px); padding-top:clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);}
.sub3_1 .imgitem {flex: 1 0 50%; max-width: 50%; padding: clamp(5px, calc( 20 / var(--inner) * 100vw ), 20px);}
.sub3_1 .imgitem img {width: 100%; height: 100%; object-fit: cover;}

.performance-grid+ .performance-grid {padding-top: clamp(5px, calc( 12 / var(--inner) * 100vw ), 12px) ;}
.performance-grid {display: flex; gap: clamp(5px, calc( 12 / var(--inner) * 100vw ), 12px); }
.performance-item {position: relative; height: clamp(40px, calc( 600 / var(--inner) * 100vw ), 600px); overflow: hidden; display: block; text-decoration: none; transition: flex 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); flex: 1; min-width: 0;}
.performance-item:hover,
.performance-item.active {flex: 2.4; z-index: 10;}
.performance-image {position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;}
.performance-image img {width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; transform-origin: center center;}
.performance-overlay {display: flex; align-items: flex-end; justify-content: center; padding: clamp(20px, calc( 45 / var(--inner) * 100vw ), 45px) 10px; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; color: #fff;letter-spacing: -0.6px; background: rgba(0,0,0,0.6);}
.performance-overlay .title {font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 600; line-height: 1.2; margin: 0; white-space: nowrap;text-align: center;}
.performance-item.active .performance-overlay {background: transparent;}
.performance-item.active .performance-overlay .title {font-size: clamp(20px, calc( 32 / var(--inner) * 100vw ), 32px); }

.commtoptxt {text-align: center;}
.commtoptxt .title {margin-bottom: clamp(25px, calc( 50 / var(--inner) * 100vw ), 50px); font-size: clamp(24px, calc( 56 / var(--inner) * 100vw ), 56px); font-weight: bold;}
.commtoptxt .title.ty2 {font-size:clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); line-height: 1.4;}
.commtoptxt .dec {font-size: clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px); color: var(--color-body); line-height: 1.66;}

.sub4_1_2 {background: url(../images/sub/sub4_1_1_bg.jpg) no-repeat center center / cover; text-align: center;color: #fff;}

.intxtbx {margin-bottom: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}
.intxtbx .eng {display: block; margin-bottom: clamp(12px, calc( 20 / var(--inner) * 100vw ), 20px); font-size: clamp(18px, calc( 32 / var(--inner) * 100vw ), 32px); font-weight: bold;color: var(--color-secondary);}
.intxtbx .tit1 {font-size:clamp(28px, calc( 72 / var(--inner) * 100vw ), 72px); line-height: 1.2; font-weight: 400;}
.intxtbx .tit2 {font-size:clamp(22px, calc( 48 / var(--inner) * 100vw ), 48px); line-height: 1.2; font-weight: 400;}

.intxtbx.quo {padding: 0 clamp(50px, calc( 140 / var(--inner) * 100vw ), 140px); padding-bottom: clamp(5px, calc( 60 / var(--inner) * 100vw ), 60px); position: relative;display: inline-block;}
.intxtbx.quo:before,
.intxtbx.quo:after {position: absolute; content: ''; width:clamp(30px, calc( 120 / var(--inner) * 100vw ), 120px); height: clamp(19px, calc( 74 / var(--inner) * 100vw ), 74px);}
.intxtbx.quo:before {left: 0; top: 10px; background: url(../images/sub/quo-1.png) no-repeat center center / contain;}
.intxtbx.quo:after {right: 0; bottom: 0; background: url(../images/sub/quo-2.png) no-repeat center center / contain;}
.intxtbx.quo .incommbox {margin-bottom: 120px !important; }

.incommbox {margin-top:clamp(60px, calc( 160 / var(--inner) * 100vw ), 160px);}

.visionlist {max-width: 1000px; width: 100%; margin: 0 auto;}
.visionitem:not(:last-child) {margin-bottom:10px;}
.visionitem .inner {display: flex; align-items: center; padding: clamp(16px, calc( 24 / var(--inner) * 100vw ), 24px) 10px; border: 1px solid rgba(255,255,255,0.5); background: rgba(255,255,255,0.1); letter-spacing: -0.5px;}
.visionitem .num {flex: 1 0 clamp(40px, calc( 180 / var(--inner) * 100vw ), 180px); max-width: clamp(40px, calc( 180 / var(--inner) * 100vw ), 180px); font-size:clamp(18px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: bold;color: rgba(255,255,255,0.5); text-align: right;}
.visionitem .dec {flex: 1 0 auto; width: 1%; padding-left: clamp(25px, calc( 40 / var(--inner) * 100vw ), 40px); font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); line-height: 1.5; text-align: left;}

.esg-wrap {position: relative; overflow: hidden;}
.esg-wrap:after {position: absolute; content: ''; top: 150px; left: 0; width: 100%; height: 1px; background: rgba(255,255,255,0.1); }
.esglist {display: flex;flex-wrap: wrap;justify-content: center; margin:0 clamp(-25px, calc( -75 / var(--inner) * 100vw ), -75px);}
.esgitem {flex: 1 0 33.33%; max-width: 33.33%; position: relative;}
.esgitem:not(:last-child):after {position: absolute; content: ''; top: 145px; right: -1px; width: 10px; height: 10px; background: #fff; border-radius: 50%;}
.esgitem .circle {display: flex; flex-direction: column; justify-content: space-between; padding: clamp(34px, calc( 38 / var(--inner) * 100vw ), 38px) 15px clamp(40px, calc( 50 / var(--inner) * 100vw ), 50px); border-radius: 50%; border: 1px solid rgba(255,255,255,0.5); background: rgba(255,255,255,0.1); aspect-ratio: 1 / 1; position: relative; width: 300px; margin: 0 auto;}
.esgitem .engbx span {display: block; text-align: center; line-height: 1;}
.esgitem .engbx .big {font-size: clamp(30px, calc( 64 / var(--inner) * 100vw ), 64px); font-weight: bold;}
.esgitem .engbx .small {padding-top: 5px; font-size: clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px); color: rgba(255,255,255,0.5);}
.esgitem .circle .text {font-size:  clamp(18px, calc( 24 / var(--inner) * 100vw ), 24px);line-height: 1.41;}
.esgitem .bulletlist {padding-top:  clamp(20px, calc( 35 / var(--inner) * 100vw ), 35px);}
.esgitem .bulletitem2 {font-size:  clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px);}
.esgitem .bulletitem2:not(:last-child) {margin-bottom:  clamp(5px, calc( 10 / var(--inner) * 100vw ), 10px);}



.safety-item:not(:last-child) {margin-bottom: clamp(60px, calc( 150 / var(--inner) * 100vw ), 150px);}
.safety-item {display: flex; align-items: center;flex-wrap: wrap;}
.safety-item .titbx {flex: 1 0 clamp(120px, calc( 245 / var(--inner) * 100vw ), 245px); max-width: clamp(120px, calc( 245 / var(--inner) * 100vw ), 245px); margin-right: clamp(20px, calc( 75 / var(--inner) * 100vw ), 75px); display: flex; align-items: center; justify-content: space-between;}
.safety-item .titbx .tit {font-size: clamp(22px, calc( 40 / var(--inner) * 100vw ), 40px); font-weight: bold;}
.safety-item .titbx img {width:clamp(10px, calc( 19 / var(--inner) * 100vw ), 19px);}

.safety-item .descbx {flex: 1 0 auto; width: 1%;}
.safety-item .quobx {display: inline-block; padding:0 clamp(30px, calc( 130 / var(--inner) * 100vw ), 130px); position: relative; font-size: clamp(18px, calc( 32 / var(--inner) * 100vw ), 32px); font-weight: bold; color: var(--color-primary);}
.safety-item .quobx:after ,
.safety-item .quobx:before {position: absolute; content: ''; top: 0; width:clamp(25px, calc( 70 / var(--inner) * 100vw ), 70px); height: clamp(13px, calc( 43 / var(--inner) * 100vw ), 43px);}
.safety-item .quobx:before {left: 0; background: url(../images/sub/quo2-1.png) no-repeat 50% 50% /contain;}
.safety-item .quobx:after {right: 0; background: url(../images/sub/quo2-2.png) no-repeat 50% 50% /contain;}
.safety-item .boxlist {display: flex; flex-wrap: wrap; margin:-10px;}
.safety-item .boxitem {flex: 1 0 25%; max-width: 25%; padding: 10px;}
.safety-item .boxitem .inner {display: flex;align-items: center;justify-content: center; padding: 10px; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); border: 1px solid var(--color-primary); height: clamp(65px, calc( 80 / var(--inner) * 100vw ), 80px); color: var(--color-primary); text-align: center; font-weight: bold;}
.safety-item .arrowlist {display: flex;flex-wrap: wrap; margin: -10px;}
.safety-item .arrowitem {flex: 1 0 25%; max-width: 25%; padding: 10px;}
.safety-item .arrowitem .inner {display: flex;flex-direction: column; justify-content: center; text-align: center;}
.safety-item .arrowitem .text {padding-bottom: clamp(45px, calc( 60 / var(--inner) * 100vw ), 60px); font-size:clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: bold; position: relative;}
.safety-item .arrowitem .text:after  {position: absolute; content: ''; left: 50%; bottom: clamp(15px, calc( 23 / var(--inner) * 100vw ), 23px); transform: translatex(-50%); width:clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px); height: clamp(18px, calc( 23 / var(--inner) * 100vw ), 23px); background: url(../images/sub/arrow2.png) no-repeat center center / contain;}
.safety-item .arrowitem .boxtxt {display: flex;align-items: center;justify-content: center;padding: 10px; height: 60px; width: 100%; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: bold; background: rgba(15,87,167,0.1);color: var(--color-primary);}

.safety-item .goal-list {display: flex; flex-wrap: wrap; margin:-21px;}
.safety-item .goal-item {flex: 1 0 33.33%;max-width: 33.33%; padding: 21px; position: relative;}
.safety-item .goal-item:not(:last-child):after {position: absolute; content: ''; right: -3px; top: 50%; transform: translateY(-50%); width:clamp(7px, calc( 12 / var(--inner) * 100vw ), 12px); height: clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px); background: url(../images/sub/arrow3.png) no-repeat center center / contain;}
.safety-item .goal-item .inner {padding: clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px) 10px; height: 100%; text-align: center;}
.safety-item .goal-item:nth-child(1) .inner {background: #58a3da;}
.safety-item .goal-item:nth-child(2) .inner {background: #3171b9;}
.safety-item .goal-item:nth-child(3) .inner {background: #0f57a7;}
.safety-item .goal-item .icn img {width: clamp(35px, calc( 40 / var(--inner) * 100vw ), 40px);}
.safety-item .goal-item .textbx {padding-top:clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px);color: #fff;}
.safety-item .goal-item .text {margin-bottom: 5px; font-weight: bold;}


.sub4_4 {padding-top: clamp(35px, calc( 110 / var(--inner) * 100vw ), 110px); background: url(../images/sub/earth-img.png) center bottom /cover;}
.sub4_4 .sub4_4-logo {margin-bottom: clamp(50px, calc( 80 / var(--inner) * 100vw ), 80px); text-align: center;}
.sub4_4 .sub4_4-logo img {width: clamp(190px, calc( 282 / var(--inner) * 100vw ), 282px);}
.icntxtlist {display: flex; flex-wrap: wrap; margin:-10px clamp(-15px, calc( -40 / var(--inner) * 100vw ), -40px);}
.icntxtitem {flex: 1 0 33.33%; max-width: 33.33%; padding: 10px clamp(15px, calc( 40 / var(--inner) * 100vw ), 40px);}
.icntxtitem:nth-child(1) .inner {border: 1px solid #58a3da;}
.icntxtitem:nth-child(2) .inner {border: 1px solid #6790d3;}
.icntxtitem:nth-child(3) .inner {border: 1px solid #7a7cc4;}
.icntxtitem .inner {padding:clamp(25px, calc( 35 / var(--inner) * 100vw ), 35px) 15px; padding-top: clamp(40px, calc( 70 / var(--inner) * 100vw ), 70px); position: relative; background: #fff; box-shadow:0 10px 20px rgba(0,0,0,0.1); text-align: center; height: 100%;}
.icntxtitem .icn {position: absolute; top: clamp(-50px, calc( -50 / var(--inner) * 100vw ), -30px); left: 50%; transform: translateX(-50%);}
.icntxtitem .icn img {width:clamp(60px, calc( 100 / var(--inner) * 100vw ), 100px);}
.icntxtitem .badge {display: inline-flex;align-items: center;justify-content: center; min-width: clamp(190px, calc( 250 / var(--inner) * 100vw ), 250px); height: clamp(32px, calc( 40 / var(--inner) * 100vw ), 40px); font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: bold; border-radius: 20px; color: #fff;}
.icntxtitem:nth-child(1) .badge {background: #58a3da;}
.icntxtitem:nth-child(2) .badge {background: #6790d3;}
.icntxtitem:nth-child(3) .badge {background: #7a7cc4;}
.icntxtitem .text {padding-top:clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px); color: var(--color-body); line-height:1.625;}

.sub4_5_2 .bg {padding: clamp(50px, calc( 120 / var(--inner) * 100vw ), 120px) 0 clamp(80px, calc( 200 / var(--inner) * 100vw ), 200px); background: url(../images/sub/sub4_5-bg.jpg) no-repeat center center / cover;}
.sub4_5_2 .commtoptxt {text-align: left; color: #fff !important;}
.sub4_5_2 .commtoptxt .title {color: #fff;}
.sub4_5_2 .commtoptxt .dec {color: #fff;}

.env-contain {margin-top:-100px;}
.env-list {display: flex; flex-wrap: wrap; margin:clamp(-20px, calc( -20 / var(--inner) * 100vw ), -10px);}
.env-item {flex: 1 0 33.33%; max-width: 33.33%; padding: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px);}
.env-item .inner {padding:clamp(30px, calc( 40 / var(--inner) * 100vw ), 40px) 20px; border: 1px solid #ddd;box-shadow:0 10px 20px rgba(0,0,0,0.1); background: #fff; text-align: center; height: 100%;}
.env-item .icn img {width: clamp(60px, calc( 80 / var(--inner) * 100vw ), 80px);}
.env-item .textbx {padding-top: clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px);}
.env-item .textbx span {display: block;}
.env-item .textbx .name {font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: bold;}
.env-item .textbx .dec {padding-top:clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px);color: var(--color-body); line-height:1.625;}