@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:"인천 부평구 마장로24"; 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:#f7fafe;}
.overhidden {overflow: hidden;}
.subsec-pdt {padding-top:clamp(50px, calc( 120 / var(--inner) * 100vw ), 120px);}
.subsec-pd {padding:clamp(50px, calc( 120 / var(--inner) * 100vw ), 120px) 0;}
.subsec-tit {margin-bottom:clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px); font-size: clamp(20px, calc( 34 / var(--inner) * 100vw ), 34px); font-weight: bold;}

.sectitbx {margin-bottom: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);}
.sectitbx .sectitle {font-size: clamp(22px, calc( 50 / var(--inner) * 100vw ), 50px); font-weight: bold;}
.sectitbx .subtit {margin-top: 8px; font-size: clamp(16px, calc( 22 / var(--inner) * 100vw ), 22px); font-weight: bold; line-height: 1.6;}

.subtab-wrap {margin-bottom:clamp(30px, calc( 90 / var(--inner) * 100vw ), 90px);}
.subtablist {display: flex; padding:4px; border-radius:29px; border: 1px solid #ddd;}
.subtabitem {flex: 1;}
.subtabitem .link {display: flex; align-items: center;justify-content: center; padding:0 20px; height: clamp(40px, calc( 50 / var(--inner) * 100vw ), 50px); font-size:clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: 600; color: #999999;border-radius: 25px; text-align: center; white-space: nowrap;}
.subtabitem.active .link {background: var(--color-primary); color: #fff;}

.bulletitem {padding-left: 0.6em;text-indent: -0.6em; color: var(--color-body); line-height:1.75;}
.bulletitem + .bulletitem {margin-top: 6px;}

.sub1_1-bg {position: relative; background: url(../images/sub/sub1_1-bg.jpg) no-repeat center center; background-size: cover; height: clamp(200px, calc( 500 / var(--inner) * 100vw ), 500px);}
.sub1_1-bg .contain {display: flex;align-items: center; height: 100%;}
.sub1_1-bg .title {font-size:clamp(22px, calc( 54 / var(--inner) * 100vw ), 54px) ; font-weight: bold; line-height:1.4;}
.sub1_1 .flxWrap {flex-direction: row-reverse;}
.sub1_1 .imgbx {flex: 1 0 33%; max-width: 33%; transform: translateY(-26%);}
.sub1_1 .imgbx .txt {padding-top:clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px); font-size:clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); color: var(--color-body); text-align: center;}
.sub1_1 .textbx {flex: 1 0 auto; width: 1%; padding-top:clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px);}
.sub1_1 .dec + .dec {margin-top:clamp(15px, calc( 27 / var(--inner) * 100vw ), 27px);}
.sub1_1 .dec {color: var(--color-body); line-height: 1.75;}

.sub1_2_1_1 {padding-bottom:clamp(100px, calc( 240 / var(--inner) * 100vw ), 240px); max-width: 1920px;width: 100%; margin: 0 auto;}
.sub1_2_1_1 .contain {max-width: 1660px !important; margin-right: 0; padding-right: 0;}
.sub1_2_1_1 .flxWrap {align-items: center;justify-content: flex-end;}
.sub1_2_1_1 .imgbx {flex: 1 0 47%; max-width: 47%;}
.sub1_2_1_1 .textbx {flex: 1 0 auto; width: 1%;}
.sub1_2_1_1 .title {font-size: clamp(18px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: bold; line-height:1.4;}
.sub1_2_1_1 .text {padding-top: clamp(20px, calc( 50 / var(--inner) * 100vw ), 50px);font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); line-height:1.66;}
.sub1_2_1_1 .dec + .dec {margin-top: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px);}
.sub1_2_1_1 .text2 {padding-top: clamp(35px, calc( 100 / var(--inner) * 100vw ), 100px);}
.sub1_2_1_1 .text2 .tit {margin-bottom:clamp(10px, calc( 12 / var(--inner) * 100vw ), 12px); font-size:clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: bold; color: var(--color-primary);}

.sub1_2_1_2 .sub1icnlist {padding-top:clamp(30px, calc( 70 / var(--inner) * 100vw ), 70px); padding-left:clamp(5px, calc( 40 / var(--inner) * 100vw ), 40px);}
.sub1_2_1_2 .sub1icnitem {display: flex; align-items: center; flex-wrap: wrap; }
.sub1_2_1_2 .sub1icnitem + .sub1icnitem {margin-top: clamp(30px, calc( 70 / var(--inner) * 100vw ), 70px);}
.sub1_2_1_2 .sub1icnitem .icn {flex: 1 0 clamp(45px, calc( 78 / var(--inner) * 100vw ), 78px); max-width: clamp(45px, calc( 78 / var(--inner) * 100vw ), 78px); margin-right: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px);}
.sub1_2_1_2 .sub1icnitem .textbx {flex: 1 0 auto; width: 1%;}
.sub1_2_1_2 .sub1icnitem .tit {margin-bottom:clamp(10px, calc( 13 / var(--inner) * 100vw ), 13px); font-size:clamp(16px, calc( 22 / var(--inner) * 100vw ), 22px); font-weight: bold; }
.sub1_2_1_2 .sub1icnitem .dec {font-size:clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); color: var(--color-body); line-height:1.5;}

.sub1_2_1_3 {max-width: 1920px; width: 100%; margin: 0 auto; padding-bottom:clamp(50px, calc( 110 / var(--inner) * 100vw ), 110px); margin-top: clamp(60px, calc( 150 / var(--inner) * 100vw ), 150px); position: relative;z-index: 1;}
.sub1_2_1_3:after {position: absolute; content: ''; left: 0; bottom: 0; width:88%; height: clamp(500px, calc( 600 / var(--inner) * 100vw ), 600px); border-radius: 0 clamp(200px, calc( 280 / var(--inner) * 100vw ), 280px) clamp(100px, calc( 280 / var(--inner) * 100vw ), 280px) 0; background: #f8f8f8;z-index: -1;}
.sub1_2_1_3 .flxWrap {align-items: flex-end;}
.sub1_2_1_3 .imgbx {flex: 1 0 47%; max-width: 47%; padding-right: 20px;}
.sub1_2_1_3 .textbx {flex: 1 0 auto; width: 1%; padding-bottom:clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px);}
.sub1_2_1_3 .tit {margin-bottom:clamp(15px, calc( 38 / var(--inner) * 100vw ), 38px); font-size:clamp(18px, calc( 34 / var(--inner) * 100vw ), 34px); font-weight: bold; color: var(--color-primary);}
.sub1_2_1_3 .bulletitem {font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px);}

.performwork-list {display: flex; flex-wrap: wrap; margin:-60px -35px}
.performwork-item {flex: 1 0 33.33%; max-width: 33.33%; padding:60px 35px;}
.performwork-item .inner {background: url(../images/sub/sub1_2_2-bg.jpg) no-repeat center center / cover; padding:clamp(30px, calc( 50 / var(--inner) * 100vw ), 50px) clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px); text-align: center; border-radius: 15px; min-height: clamp(400px, calc( 610 / var(--inner) * 100vw ), 610px); letter-spacing: -0.6px;}
.performwork-item .title {font-size:clamp(17px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight: bold;}
.performwork-item .text {margin-top:10px; font-weight: 600;color: var(--color-primary); line-height:1.5;}
.performwork-item .imginfo {padding-top:clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px); }
.performwork-item .imginfo span {display: block;}
.performwork-item .date {margin-bottom: clamp(10px, calc( 12 / var(--inner) * 100vw ), 12px); font-weight: 500; color: var(--color-body);}
.performwork-item .images {position:relative; padding-bottom:50%; overflow:hidden;border-radius: 15px; max-width: 300px; width: 100%; margin: 0 auto;}
.performwork-item .images img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:auto; max-width:100%; min-height:100%;object-fit : cover;}
.performwork-item .name {margin-top:clamp(12px, calc( 15 / var(--inner) * 100vw ), 15px); font-weight: bold;}

.su1_2_3_1 .borderbx {display: flex; align-items: center; flex-wrap: wrap; padding: clamp(30px, calc( 68 / var(--inner) * 100vw ), 68px) clamp(20px, calc( 68 / var(--inner) * 100vw ), 68px); border: 1px solid #ddd;}
.su1_2_3_1 .imgbx {flex: 1 0 clamp(400px, calc( 630 / var(--inner) * 100vw ), 630px); max-width: clamp(400px, calc( 630 / var(--inner) * 100vw ), 630px); padding-right: 20px;}
.su1_2_3_1 .textbx {flex: 1 0 auto; width: 1%;}
.su1_2_3_1 .title {font-size:clamp(18px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: 600; line-height:1.5;}
.su1_2_3_1 .text {margin-top: clamp(12px, calc( 20 / var(--inner) * 100vw ), 20px); font-size:clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); line-height:1.75;}
.su1_2_3_1 .downlist {max-width:400px; width: 100%; padding-top: clamp(30px, calc( 50 / var(--inner) * 100vw ), 50px);}
.su1_2_3_1 .downitem + .downitem {margin-top: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px);}
.su1_2_3_1 .downitem .link {display: flex; align-items: center; justify-content: center; padding: 14px 10px; border-radius:5px; color: #fff; letter-spacing: -0.5px;}
.su1_2_3_1 .downitem .link img {margin-left: 10px;width: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px);}
.su1_2_3_1 .downitem:nth-child(1) .link {background: var(--color-primary);}
.su1_2_3_1 .downitem:nth-child(2) .link {background: #555555;}

.su1_2_3_2 .flxWrap {margin:-35px;}
.su1_2_3_2 .logobx {flex: 1 0 50%; max-width: 50%; padding:35px;}
.su1_2_3_2 .logobx .inner {display: flex;align-items: center;justify-content: center; padding: 20px; border: 1px solid #ddd; height: clamp(180px, calc( 350 / var(--inner) * 100vw ), 350px);}
.su1_2_3_2 .logobx:nth-child(2) .inner {background: #111111;border-color: #111;}

.memberlist {display: flex;flex-wrap: wrap; margin:-30px -20px; padding-bottom:clamp(30px, calc( 50 / var(--inner) * 100vw ), 50px); border-bottom: 1px solid #ddd;}
.memberitem {flex: 1 0 50%; max-width: 50%; padding:30px 20px;}
.memberitem .inner {display: flex; justify-content: center; flex-wrap: wrap;  padding: clamp(30px, calc( 50 / var(--inner) * 100vw ), 50px) clamp(20px, calc( 50 / var(--inner) * 100vw ), 50px); border: 1px solid #ddd; border-radius:16px; letter-spacing: -0.5px; height: 100%;} 
.memberitem .imgbx {flex: 1 0 clamp(180px, calc( 220 / var(--inner) * 100vw ), 220px); max-width: clamp(180px, calc( 220 / var(--inner) * 100vw ), 220px); margin-right: clamp(15px, calc( 35 / var(--inner) * 100vw ), 35px); margin-top: clamp(30px, calc( 50 / var(--inner) * 100vw ), 50px);}
.memberitem .images {position:relative; padding-bottom:145.45%; overflow:hidden;border-radius: 8px;}
.memberitem .images img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:auto; max-width:100%; min-height:100%;object-fit : cover;}
.memberitem .textbx {flex: 1 0 auto; width: 1%;}
.memberitem .title {margin-bottom: clamp(18px, calc(25 / var(--inner) * 100vw ),25px); padding-bottom: clamp(12px, calc( 16 / var(--inner) * 100vw ), 16px); font-size:clamp(16px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: bold;border-bottom: 1px solid #ddd;}
.memberitem .meminfoitem + .meminfoitem {margin-top: 6px;}
.memberitem .meminfoitem {display: flex; color: var(--color-body); line-height: 1.625;}
.memberitem .name {flex: 1 0 clamp(68px, calc( 72 / var(--inner) * 100vw ), 72px); max-width: clamp(68px, calc( 72 / var(--inner) * 100vw ), 72px); font-weight: bold;}
.memberitem .desc {flex: 1 0 auto; width: 1%;font-weight: 500;}
.memberitem .meminfoitem .link {display: inline-block; text-decoration: underline;}


.history-wrap {border-top: 1px solid #242424;}
.historyitem {display: flex; flex-wrap: wrap; padding:clamp(15px, calc( 38 / var(--inner) * 100vw ), 38px) 0;border-bottom: 1px solid #ddd; letter-spacing: -0.5px;} 
.historyitem .yearbx {flex: 1 0 clamp(180px, calc( 300 / var(--inner) * 100vw ), 300px); max-width: clamp(180px, calc( 300 / var(--inner) * 100vw ), 300px); padding-left:20px;}
.historyitem .years {display: inline-block; position: relative; font-size:clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px); font-weight: 900; color: #333;} 
.historyitem .years.dot:after {position: absolute; content: ''; right: -10px; top: -4px;width: clamp(6px, calc( 8 / var(--inner) * 100vw ), 8px); height: clamp(6px, calc( 8 / var(--inner) * 100vw ), 8px); border-radius: 50%; background: var(--color-primary);}
.historyitem .descbx {flex: 1 0 auto; width: 1%; color: var(--color-body); padding-top: clamp(3px, calc( 6 / var(--inner) * 100vw ), 6px);}
.historyitem .dec + .dec {margin-top: 8px;}
.historyitem .dec {font-size:clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); line-height:1.6;}
.historyitem .cate {display: inline-block; flex: 1 0 50px; max-width: 50px; color: var(--color-primary);font-size:clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); line-height: 1.6;font-weight: bold;}
.historyitem .flxWrap .dec {flex: 1 0 auto; width: 1%;}
.historyitem .flxWrap + .flxWrap {margin-top: 8px;}

.tblbx table {border-top: 1px solid #242424;}
.tblbx table th,
.tblbx table td {padding:clamp(16px, calc( 22 / var(--inner) * 100vw ), 22px) 10px; border-bottom: 1px solid #ddd; text-align: center;font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); color: var(--color-body); letter-spacing: -0.5px;} 
.tblbx table th {background: #f8f8f8; font-weight: bold; color: #242424;}
.tblbx .bdright {border-right: 1px solid #ddd;}
.tblbx .lasttxt {padding-top:clamp(10px, calc( 16 / var(--inner) * 100vw ), 16px); color: #999999;}
.tblbx .lasttxt .bulletitem {color: #999;}
.tblbx .bulletlist {padding-left: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px);}
.tblbx .bulletitem {font-size: clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px);}
.tblbx.ty2 table th:not(:last-child),
.tblbx.ty2 table td:not(:last-child) {border-right: 1px solid #ddd;}

.location-area .wrap {margin-bottom: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);}

.mapflxWrap + .mapflxWrap {padding-top: clamp(50px, calc( 120 / var(--inner) * 100vw ), 120px);}
.mapflxWrap {display: flex; flex-wrap: wrap;}
.mapflxWrap .titlebx {flex: 1 0 clamp(220px, calc( 420 / var(--inner) * 100vw ), 420px); max-width: clamp(220px, calc( 420 / var(--inner) * 100vw ), 420px);}
.mapflxWrap .titlebx .title {font-size:clamp(18px, calc( 34 / var(--inner) * 100vw ), 34px); font-weight: bold;color: #333;}
.mapflxWrap .titlebx .desc {padding-top:clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px); color: var(--color-body); line-height:1.625;}

.mapflxWrap .mapinfobx {flex: 1 0 auto; width: 1%;}
.mapflxWrap .mapitem {display: flex; flex-wrap: wrap; padding:clamp(15px, calc( 28 / var(--inner) * 100vw ), 28px) 0; border-top: 2px solid #242424;}
.mapflxWrap .mapitem .icn {flex:clamp(55px, calc( 78 / var(--inner) * 100vw ), 78px); max-width: clamp(55px, calc( 78 / var(--inner) * 100vw ), 78px);}
.mapflxWrap .mapitem .icn img {width: clamp(40px, calc( 56 / var(--inner) * 100vw ), 56px);}
.mapflxWrap .mapitem .textbx {flex: 1 0 auto; width: 1%; padding-top: 10px;}

.mapflxWrap .addrlist {display: flex; flex-wrap: wrap; margin: -10px;}
.mapflxWrap .addritem {flex: 1 0 50%; max-width: 50%; padding: 10px;}
.mapflxWrap .addritem.wid-100 {flex: 1 0 100%; max-width: 100%;}
.mapflxWrap .addritem.wid-60 {flex: 1 0 60%; max-width: 60%;}
.mapflxWrap .addritem.wid-auto {flex: 1 0 auto; max-width: fit-content; width: 1%;}
.mapflxWrap .addritem span {display: block;}
.mapflxWrap .addritem .name {margin-bottom:12px; font-weight: bold; color: var(--color-primary);}
.mapflxWrap .addrtit {margin-bottom:clamp(15px, calc( 28 / var(--inner) * 100vw ), 28px); font-size:clamp(18px, calc( 30 / var(--inner) * 100vw ), 30px); font-weight: bold;}
.mapflxWrap .addrtitsub {margin-bottom: clamp(10px, calc( 16 / var(--inner) * 100vw ), 16px) ; font-weight: bold; color: var(--color-body);line-height:1.625;}
.mapflxWrap .addritem .dec + .dec {margin-top: 5px;}
.mapflxWrap .addritem .last {margin-top: 10px; color: #999999; letter-spacing: -0.6px;}
.mapflxWrap .inmapflx {display: flex; flex-wrap: wrap; margin: -26px;}
.mapflxWrap .commbox {flex: 1 0 50%; max-width: 50%; padding: 26px;}

.schedule-list {border-top: 1px solid #242424;}
.schedule-list .schitem {padding: clamp(25px, calc( 50 / var(--inner) * 100vw ), 50px) 0; border-bottom: 1px solid #ddd;}
.schedule-list .inner {display: flex; align-items: center; flex-wrap: wrap;}
.schedule-list .imgbx {flex:1 0 clamp(200px, calc( 300 / var(--inner) * 100vw ), 300px); max-width: clamp(200px, calc( 300 / var(--inner) * 100vw ), 300px); margin-right:clamp(15px, calc( 90 / var(--inner) * 100vw ), 90px);}
.schedule-list .image {position:relative; padding-bottom:141.6%; overflow:hidden;border-radius: 16px;}
.schedule-list .image img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:auto; max-width:100%; min-height:100%;object-fit : cover;}
.schedule-list .image:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid #ddd; border-radius: 16px;}
.schedule-list .textbx {flex: 1 0 auto; width: 1%;}
.schedule-list .badtelist {display: flex; padding-bottom:clamp(15px, calc( 28 / var(--inner) * 100vw ), 28px);}
.schedule-list .badtelist .badge {display: inline-flex;align-items: center;justify-content: center;padding: clamp(5px, calc( 8 / var(--inner) * 100vw ), 8px) clamp(12px, calc( 16 / var(--inner) * 100vw ), 16px);  font-size: clamp(10px, calc( 14 / var(--inner) * 100vw ), 14px); border-radius:5px;color: #fff;font-weight: bold; line-height: 1;}
.schedule-list .badtelist .badge:not(:last-child) {margin-right:clamp(5px, calc( 10 / var(--inner) * 100vw ), 10px);}
.schedule-list .badtelist .badge.color1 {background: #527cbf;}
.schedule-list .badtelist .badge.color2 {background: #1d285a;}
.schedule-list .badtelist .badge.color3 {background: #6b886c;}
.schedule-list .tit {margin-bottom: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px); font-size:clamp(18px, calc( 30 / var(--inner) * 100vw ), 30px); color: #333; line-height: 1.4;}
.schedule-list .tit .smalltt {display: block; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px);}
.schedule-list .prdinfoitem + .prdinfoitem {margin-top: 8px;}
.schedule-list .prdinfoitem {font-size: clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px);}
.schedule-list .detailbx {margin-top: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}

.booking-list {display: flex; flex-wrap: wrap; margin:-20px;}
.booking-item {flex: 1 0 33.33%; max-width: 33.33%; padding: 20px;}
.booking-item .inner {display: flex;flex-direction: column;justify-content: space-between; padding:clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px) clamp(20px, calc( 50 / var(--inner) * 100vw ), 50px); background: #f8f8f8; border-radius: 18px; height: clamp(350px, calc( 440 / var(--inner) * 100vw ), 440px);}
.booking-item .icn {width:clamp(50px, calc( 72 / var(--inner) * 100vw ), 72px);}
.booking-item .textbx {padding-top:clamp(16px, calc( 32 / var(--inner) * 100vw ), 32px);}
.booking-item .textbx .tit {font-size: clamp(20px, calc( 34 / var(--inner) * 100vw ), 34px); font-weight: bold; }
.booking-item .subtxtbx {padding-top: clamp(12px, calc( 20 / var(--inner) * 100vw ), 20px);}
.booking-item .subtxtbx span {display: block;}
.booking-item .subtxtbx .subtt {margin-bottom:10px; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: 600;color: var(--color-primary);}
.booking-item .subtxtbx .txt1 + .txt2 {padding-top: clamp(12px, calc( 19 / var(--inner) * 100vw ), 19px);}
.booking-item .bottombox {margin-top: 30px;}

.sub4_1 .imgbx {flex: 1 0  clamp(400px, calc( 600 / var(--inner) * 100vw ), 600px); max-width:  clamp(400px, calc( 600 / var(--inner) * 100vw ), 600px); margin-right: clamp(20px, calc( 150 / var(--inner) * 100vw ), 150px);}
.sub4_1 .textbx {flex: 1 0 auto; width: 1%; padding-top: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);}
.sub4_1 .textbx .title {font-size: clamp(20px, calc( 34 / var(--inner) * 100vw ), 34px); font-weight: bold;}
.sub4_1 .descbx {padding-top: clamp(20px, calc( 55 / var(--inner) * 100vw ), 55px);}
.sub4_1 .dec + .dec {padding-top: 8px;}
.sub4_1 .dec {font-size:  clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); color: var(--color-body); line-height:1.6;}

.su4_2_1 .borderbox {padding:clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px) clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px); position: relative; border-radius:8px;background: #fafafa;overflow: hidden;}
.su4_2_1 .borderbox:after {position: absolute; content: ''; right: 0; bottom: -10px; width:clamp(100px, calc( 207 / var(--inner) * 100vw ), 207px);height: clamp(51px, calc( 105 / var(--inner) * 100vw ), 105px); background: url(../images/sub/sub4_2-bg.png) no-repeat center center / contain;}
.su4_2_1 .textlist {display: flex;flex-wrap: wrap; margin: -13px;}
.su4_2_1 .textitem {flex: 1 0 50%; max-width: 50%; padding: 13px;}
.su4_2_1 .textitem .text {font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); color: var(--color-body);}
.su4_2_1 .flxWrap {margin: -50px; padding-top: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);}
.su4_2_1 .imgbx {flex:1 0 50%; max-width: 50%; padding: 50px;}
.su4_2_1 .imgbx img {width: 100%;}
.su4_2_1 .downbox {padding-top:clamp(30px, calc( 75 / var(--inner) * 100vw ), 75px) ;}

.downbox {text-align: center;}
.downbox .btn-down {display: inline-flex;align-items: center;justify-content: center; padding:0 clamp(25px, calc( 38 / var(--inner) * 100vw ), 38px); min-width:clamp(150px, calc( 200 / var(--inner) * 100vw ), 200px); height: clamp(40px, calc( 50 / var(--inner) * 100vw ), 50px); border-radius: 5px; background:var(--color-primary); color: #fff;}
.downbox .btn-down .txt {display: inline-block; padding-right:10px; }
.downbox .btn-down img {width:clamp(12px, calc( 18 / var(--inner) * 100vw ), 18px) ;}

.steplist {display: flex;flex-wrap: wrap; justify-content: center; padding-top: 10px; margin: -6px;}
.stepitem {flex: 1; text-align: center; position: relative; padding: 6px;}
.stepitem:not(:last-child):after {position: absolute; content: ''; right: -8px; top: 32%; width:20px; height: 13px; background: url(../images/sub/arrow-right2.png) no-repeat 50% 50% /contain; }
.stepitem .circle {display: flex;align-items: center;justify-content: center; position: relative; aspect-ratio: 1 / 1; width:clamp(110px, calc( 150 / var(--inner) * 100vw ), 150px); margin: 0 auto;border-radius: 50%;}
.stepitem .circle:after {position: absolute; content: '';left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px solid #ddd;width:100%; height:100%; object-fit:cover;border-radius: 50%;}
.stepitem .circle img {width:clamp(40px, calc( 64 / var(--inner) * 100vw ), 64px);}
.stepitem span {display: block;}
.stepitem .textbx {padding-top:14px;}
.stepitem .step {color: var(--color-primary); font-weight: bold;}
.stepitem .dec {padding-top: clamp(10px, calc( 14 / var(--inner) * 100vw ), 14px); font-weight: 600; color: var(--color-body);}
.sub4_3_1 .borderbox {margin-top: clamp(40px, calc( 100 / var(--inner) * 100vw ), 100px); padding:clamp(20px, calc( 50 / var(--inner) * 100vw ), 50px) clamp(25px, calc( 58 / var(--inner) * 100vw ), 58px); border: 1px solid #ddd;}
.sub4_3_1 .bulletitem {font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px);}
.sub4_3_1 .bulletitem + .bulletitem {margin-top: clamp(10px, calc( 16 / var(--inner) * 100vw ), 16px);}

.sub4_3_3 .downbox {padding-top: clamp(30px, calc( 80 / var(--inner) * 100vw ), 80px);}

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

.sub5_1_1 {text-align: center;}
.sub5_1_1 .title {margin-bottom: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px); font-size:clamp(22px, calc( 44 / var(--inner) * 100vw ), 44px); font-weight: bold; line-height:1.35;}
.sub5_1_1 .title .small {display: block; font-size: clamp(18px, calc( 30 / var(--inner) * 100vw ), 30px); font-weight: 500; }
.sub5_1_1 .descbx {padding-top: clamp(25px, calc( 50 / var(--inner) * 100vw ), 50px);}
.sub5_1_1 .dec + .dec {padding-top: clamp(15px, calc( 28 / var(--inner) * 100vw ), 28px);}
.sub5_1_1 .dec {font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); color: var(--color-body); line-height:1.55;}

.introbusi-list {display: flex;flex-wrap: wrap;margin:-20px;}
.introbusi-item {flex: 1 0 33.33%; max-width: 33.33%; padding: 20px;}
.introbusi-item .inner {padding:clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px) 10px; text-align: center; border: 1px solid #ddd; border-radius: 24px; background: #fff; height: 100%;}
.introbusi-item .tit {margin-bottom: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px); font-size:clamp(18px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: bold; color: var(--color-primary);}
.introbusi-item .icn img {width: clamp(50px, calc( 88 / var(--inner) * 100vw ), 88px);}
.introbusi-item .desc {padding-top:clamp(12px, calc( 22 / var(--inner) * 100vw ), 22px); font-weight: 500; color: var(--color-body); line-height:1.625;}

.honorwrap {padding-top: 20px; border-top: 1px solid #242424;}
.honorlist {display: flex; flex-wrap: wrap; margin:-10px; }
.honoritem {flex:1 0  16.66%; max-width: 16.66%; padding: 10px;}
.honoritem .inner {display: flex;align-items: center;justify-content: center; padding: 12px; min-height: clamp(52px, calc( 60 / var(--inner) * 100vw ), 60px); border-radius: 4px; border: 1px solid #ddd; text-align: center; height: 100%;}
.honoritem .inner span {display: block;color: var(--color-body);line-height: 1.5;}
.honoritem .inner .tit {font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: bold;} 
.honorlist.ty2 .honoritem {flex: 1 0 12.5%; max-width: 12.5%;}

.sub5_3 .applywrap { max-width: 880px;width: 100%; margin: 0 auto; padding-top: clamp(30px, calc( 70 / var(--inner) * 100vw ), 70px);}
.sub5_3 .applylist {display: flex;flex-wrap: wrap;justify-content: space-between; margin: -8px;}
.sub5_3 .applyitem {flex: 1 0 33.33%; max-width: 33.33%; padding: 8px;text-align: center;}
.sub5_3 .applyitem .icn img {width:clamp(70px, calc( 130 / var(--inner) * 100vw ), 130px);}
.sub5_3 .applyitem .textbx {padding-top:clamp(12px, calc( 18 / var(--inner) * 100vw ), 18px);}
.sub5_3 .applyitem span {display: block; color: var(--color-body); font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); line-height:1.6;}
.sub5_3 .downbox {padding-top: clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px);}