@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */
.root_daum_roughmap {width:100% !important; height:clamp(250px, calc( 540 / var(--inner) * 100vw ), 540px) !important;}
.root_daum_roughmap .wrap_map {height:clamp(250px, calc( 540 / var(--inner) * 100vw ), 540px) !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:7px; margin-top:10px; line-height:1.3; color: #505050; font-size:clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px);}
.bullet-item .bullet-list:first-child {margin-top:0;}
.bullet-item .bullet-list::before {position:absolute; content:''; left:0; top:11px; width:2px; height:2px; background:#505050;}
.bullet-item .bullet-list.nobullet {padding-left: 0;}
.bullet-item .bullet-list.nobullet::before {display: none;}
.bullet-item .bullet-list .small {display: block; font-size: clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px); font-weight: 400; color: #878787; line-height: 1.6;}

.bg-gray {background:#fafafa;}
.areaWrap + .areaWrap {padding-top: clamp(40px, calc( 120 / var(--inner) * 100vw ), 120px);}
.areaWrap.type2 + .areaWrap.type2 {padding-top: clamp(40px, calc( 100 / var(--inner) * 100vw ), 100px);}
.areaWrap.type3 {padding-top: clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px);}
.areaWrap.type3 + .areaWrap.type3 {padding-top: clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px);}
.textbg {margin-bottom: clamp(15px, calc( 35 / var(--inner) * 100vw ), 35px); padding-left: 16px; position: relative; font-size: clamp(18px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: 600;}
.textbg::before {position: absolute; content: ''; left: 0; top: 50%; transform: translateY(-50%); width: clamp(4px, calc( 6 / var(--inner) * 100vw ), 6px); height:clamp(20px, calc( 24 / var(--inner) * 100vw ), 24px); background: var(--color-1);} 
.buttonsbx {display: flex; justify-content: center; }
.buttonsbx .btn-link {display: flex; align-items: center; justify-content: center; margin: 0 clamp(5px, calc( 10 / var(--inner) * 100vw ), 10px); padding: 0 clamp(15px, calc( 36 / var(--inner) * 100vw ), 36px); min-width: clamp(180px, calc( 250 / var(--inner) * 100vw ), 250px); height: clamp(48px, calc( 60 / var(--inner) * 100vw ), 60px); border-radius:30px; background: #484848 ; color: #fff; transition: all 0.3s;}
.buttonsbx .btn-link span {display: inline-block; padding-right: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); font-size: clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: 600;}
.buttonsbx .btn-link img {width:clamp(7px, calc( 10 / var(--inner) * 100vw ), 10px);}
.buttonsbx .btn-link:hover {background:var(--color-1);}

/* table */
.tblbx + .tblbx {padding-top: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}
.tblbx .tbltext {padding-bottom: clamp(10px, calc( 18 / var(--inner) * 100vw ), 18px); font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 400;}
.tblbx .tbltext2 {padding-bottom: clamp(20px, calc( 35 / var(--inner) * 100vw ), 35px); font-size: clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: 400; color: #505050;}
.tblbx table {border-top:2px solid #121212;}
.tblbx table th,
.tblbx table td {padding: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px) ; text-align: center; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd;}
.tblbx table th:last-child,
.tblbx table td:last-child {border-right: 0;}
.tblbx table th {font-weight: 600; font-size: clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px); background: #f4f4f4;}
.tblbx table td {color: #505050; font-size:clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px) ;}
.tblbx table .small {display: inline-block; padding-top: 3px; font-size: clamp(12px, calc( 14 / var(--inner) * 100vw ), 14px); color: #878787;}
.tblbx table .bullet-list {padding-top: 5px; font-size: clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px);}
.tblbx table .bullet-list:first-child {padding-top: 0;}
.tblbx.type2 td {padding: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px) 5px; font-size: clamp(12px, calc( 14 / var(--inner) * 100vw ), 14px); }


/* 회사소개 */
.greeting-area .flxWrap {align-items: center;}
.greeting-area .imgbx {flex: 1 0 520px; max-width: 520px; margin-right: clamp(20px, calc( 78 / var(--inner) * 100vw ), 78px);}
.greeting-area .textbx {flex: 1 0 auto; width: 1%; letter-spacing: -0.5px;}
.greeting-area .badge {display: inline-block; padding:1px 10px; background: var(--color-1) ; color: #fff; font-size: clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px);}
.greeting-area .title {padding-top:clamp(10px, calc( 13 / var(--inner) * 100vw ), 13px); font-size:clamp(20px, calc( 48 / var(--inner) * 100vw ), 48px); font-weight: bold; color:var(--color-1);}
.greeting-area .subtitle {padding-top: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px); font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 600; line-height: 1.6;}
.greeting-area .decbx {padding-top: clamp(15px, calc( 26 / var(--inner) * 100vw ), 26px); line-height: 1.7; color: #505050;}
.greeting-area .dec {padding-top: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); font-size: clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px);}
.greeting-area .dec:first-child {padding-top: 0;}
.greeting-area .ceo {padding-top: clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px); text-align: right; font-weight: 600; color: #121212;}

.boxbg {display: flex; align-items: center; justify-content: center; height:clamp(120px, calc( 160 / var(--inner) * 100vw ), 160px); border-radius: 8px; overflow: hidden;}
.boxbg .inner {color: #fff; font-size: clamp(18px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight: bold;}
.boxbg.bg1 {background:url(../images/sub/boxbg-1.jpg) no-repeat 50% 50%;}
.boxbg.bg2 {background:url(../images/sub/boxbg-2.jpg) no-repeat 50% 50%;}
.boxbg.bg3 {background:url(../images/sub/boxbg-3.jpg) no-repeat 50% 50%;}
.boxbg.bg4 {background:url(../images/sub/boxbg-4.jpg) no-repeat 50% 50%;}
.boxbg.bg5 {background:url(../images/sub/boxbg-5.jpg) no-repeat 50% 50%;}
.boxbg + .bulletbox{padding-top:clamp(20px, calc( 45 / var(--inner) * 100vw ), 45px);}
/* .textbg + .bullet {padding-top: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px);} */
.bullet .bulletlist {font-size: clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px); color: #505050; line-height: 1.7;}
.bulletbox .widbox {flex: 1 0 50%; max-width: 50%;} 
.bulletbox .widbox.wid-100 {flex: 1 0 100%; max-width: 100%;}

.mapinfoWrap {padding-bottom: clamp(40px, calc( 100 / var(--inner) * 100vw ), 100px); margin-bottom: clamp(40px, calc( 100 / var(--inner) * 100vw ), 100px); border-bottom: 2px solid #dddddd;}
.mapinfoWrap .titlebx {flex: 1 0 auto; width: 1%; font-size:clamp(22px, calc( 32 / var(--inner) * 100vw ), 32px); font-weight: 600; line-height: 1.4;letter-spacing:-0.6px;}
.mapinfoWrap .infobx {flex: 1 0 50%; max-width: 50%; padding-left: clamp(15px, calc( 40 / var(--inner) * 100vw ), 40px);}
.mapinfoWrap .subtt {padding-top:clamp(10px, calc( 18 / var(--inner) * 100vw ), 18px); position: relative; font-size: clamp(18px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: 500;}
.mapinfoWrap .subtt::after {position: absolute; content: ''; left: 0; top: 0; width: 40px; height: 4px; background: #121212;} 
.mapinfoWrap .subtt2 {padding-top:clamp(15px, calc( 28 / var(--inner) * 100vw ), 28px); font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 500;}
.mapinfoWrap .subtt2 + .subtt2 {padding-top:5px;}
.mapinfoWrap .addritem {display: flex; flex-wrap: wrap; padding-top: clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px); margin-top: -15px;}
.mapinfoWrap .addrlist {flex: 1 0 50%; max-width: 50%; padding-top: 15px;}
.mapinfoWrap .addrlist:last-child {flex: 1 0 100%; max-width: 100%;}
.mapinfoWrap .inner {display: flex; align-items: center;}
.mapinfoWrap .icn {margin-right:clamp(5px, calc( 10 / var(--inner) * 100vw ), 10px);}
.mapinfoWrap .icn img {width: clamp(25px, calc( 30 / var(--inner) * 100vw ), 30px);}
.mapinfoWrap .dec {font-size: clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px); color: #505050;}

/* 신규건설업신청 */
.stepWrap {padding-top: clamp(30px, calc( 40 / var(--inner) * 100vw ), 40px);}
.stepflx {display: flex; justify-content: space-between; flex-wrap: wrap; margin-right: -90px;}
.stepflx .bigbox {flex: 1 0 33.33%; max-width: 33.33%; padding-right: 90px;}
.bigbox.box1 {background:url(../images/sub/arrow-type1.png) no-repeat right top 50px; }
.bigbox.box2 {background:url(../images/sub/arrow-type2.png) no-repeat right top 80px; }
.bigbox.box3 {background:url(../images/sub/arrow-type3.png) no-repeat right top 100px; }
.bigbox.box4 {background:url(../images/sub/arrow-type4.png) no-repeat right bottom 100px; }
.smallbx {margin-bottom: 55px; padding: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px); position: relative; background: #f9f9f9; box-shadow:rgba(0, 0, 0,0.1) 3px 0 7px; letter-spacing: -1px;}
.smallbx::after {position: absolute; content: ''; bottom: -35px; left: 50%; transform: translateX(-50%); width: 24px; height: 16px; background: url(../images/sub/busi-arrow.png) no-repeat 50% 50%; background-size:clamp(16px, calc( 24 / var(--inner) * 100vw ), 24px) auto;}
.smallbx:last-child {margin-bottom: 0;}
.smallbx:last-child::after {display: none;}
.smallbx .flxWrap {align-items: center; flex-wrap: nowrap;}
.smallbx .icn {margin-right:clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px);}
.smallbx .icn img {width: clamp(50px, calc( 79 / var(--inner) * 100vw ), 79px);}
.smallbx span {display: block;}
.smallbx .step {font-weight: 500; color:var(--color-1);}
.smallbx .name {padding-top:2px; font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 600;}
.smallbx .bullet-item {padding-top: clamp(15px, calc( 26 / var(--inner) * 100vw ), 26px); margin-top: 10px; border-top: 1px solid #eeeeee;}
.stepWrap + .buttonsbx {padding-top: clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px); margin: 0;}
.tblbx + .buttonsbx {padding-top: clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px); margin: 0;}
.areaWrap + .buttonsbx {padding-top: clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px); margin: 0;}

.inquirytext {padding: clamp(25px, calc( 50 / var(--inner) * 100vw ), 50px) 0 clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px); font-size: clamp(18px, calc( 32 / var(--inner) * 100vw ), 32px); font-weight: 600;}
.radioitem {display: flex; align-items: center; height: clamp(38px, calc( 44 / var(--inner) * 100vw ), 44px);}
.radioitem .item {margin-right: clamp(10px, calc( 38 / var(--inner) * 100vw ), 38px);}
.radioitem .item:last-child {margin-right: 0;}
.inquiry-area .buttons .cen .btn-pack  {min-width:clamp(160px, calc( 250 / var(--inner) * 100vw ), 250px); height: clamp(50px, calc( 60 / var(--inner) * 100vw ), 60px); border-radius: 30px; font-weight: 600;}

/* 건설관련정보 */
.coporatetop {padding-bottom: clamp(40px, calc( 90 / var(--inner) * 100vw ), 90px);}
.coporatetop .imgbx {flex:1 0 450px; max-width: 450px; margin-left:clamp(20px, calc( 60 / var(--inner) * 100vw ), 60px);}
.coporatetop .textbx {flex: 1 0 auto; width: 1%;  }
.coporatetop .title {display: inline-block; padding:clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); position: relative; line-height: 1.3; font-size:clamp(20px, calc( 48 / var(--inner) * 100vw ), 48px); font-weight: bold;}
.coporatetop .title::after {position: absolute; content: ''; left: 0; top: 0; width: clamp(20px, calc( 46 / var(--inner) * 100vw ), 46px); height: clamp(17px, calc( 39 / var(--inner) * 100vw ), 39px); background:url(../images/sub/build-q1.png) no-repeat; background-size: cover;}
.coporatetop .title::before {position: absolute; content: ''; right: 0; bottom: 0; width: clamp(20px, calc( 46 / var(--inner) * 100vw ), 46px); height: clamp(17px, calc( 39 / var(--inner) * 100vw ), 39px); background:url(../images/sub/build-q1.png) no-repeat; background-size: cover;}
.coporatetop .decbx {padding-top: clamp(15px, calc( 35 / var(--inner) * 100vw ), 35px); letter-spacing: -1px;}
.coporatetop .dec {padding-top:clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); line-height: 1.6; color: #505050;}
.coporatetop .dec:first-child {padding-top: 0;}
.coporatetop .dec.last {font-weight: 600; color: #121212;}

.coporbox + .coporbox {padding-top: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);}
.coporbox .flxWrap {align-items: center;}
.coporbox .imgbx {flex: 1 0 600px; max-width: 600px; margin-right: clamp(10px, calc( 60 / var(--inner) * 100vw ), 60px);}
.coporbox .textbx {flex: 1 0 auto; width: 1%;}
.coporbox .num {display: block; font-weight: 600;  color:var(--color-1); text-decoration: underline;}
.coporbox .tit {padding-top:12px; font-size: clamp(18px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: 600;}
.coporbox .hanmoon {font-weight: 500; font-family:var(--font1);}
.coporbox .dec {padding-top: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); font-size: clamp(12px, calc( 14 / var(--inner) * 100vw ), 14px); color: #505050; line-height: 1.6;}

.tabitem {display: flex; padding-bottom: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);}
.tablist {flex: 1; }
.tablist .link {display:flex; align-items: center; justify-content: center; position: relative; width: 100%; height:clamp(45px, calc( 60 / var(--inner) * 100vw ), 60px); border-bottom: 1px solid #ddd; text-align: center; font-size:clamp(13px, calc( 18 / var(--inner) * 100vw ), 18px); color: #666666;}
.tablist .link::after {position: absolute; content: ''; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height:clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px); background: #eeeeee;} 
.tablist:last-child .link::after {display: none;}
.tablist .link.active {background:var(--color-1); color: #fff; font-weight: 600;}
.tablist .link.active::after {display: none;}
.contentwrap {padding-top: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}
.tabWrap {max-width: 1000px; width: 100%; margin: 0 auto;}
.tabWrap.type2 {max-width: 1200px;}
.tabs {display: flex; justify-content: center; flex-wrap: wrap; margin: -5px;}
.tabs .list {flex: 1 0 16.66%; max-width: 16.66%;  padding: 5px; }
.tabs .s-link  {display: flex; align-items: center; justify-content: center; border: 1px solid #ddd; border-radius: 4px; height: clamp(38px, calc( 50 / var(--inner) * 100vw ), 50px); color: #878787; text-align: center; font-size: clamp(12px, calc( 16 / var(--inner) * 100vw ), 16px);}
.tabs .list.active .s-link {background: #484848; border-color: #484848; color: #fff;}
.textbg + .subtabs {padding-top: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}
.subtabs {display: flex; flex-wrap: wrap; margin: -5px;}
.subtabs .list { padding: 5px; }
.subtabs .s-link  {display: flex; align-items: center; justify-content: center; padding: 0 20px; border: 1px solid #ddd; border-radius: 17px; min-width: clamp(80px, calc( 192 / var(--inner) * 100vw ), 192px); height: clamp(30px, calc( 34 / var(--inner) * 100vw ), 34px); color: #878787; font-size: clamp(12px, calc( 14 / var(--inner) * 100vw ), 14px);}
.subtabs .list.active .s-link {background: #484848; border-color: #484848; color: #fff;}
.tab-content .titlebx {display: flex; align-items: center; justify-content: center; height: clamp(70px, calc( 100 / var(--inner) * 100vw ), 100px); border-radius: 4px; background: #f4f4f4; box-shadow: var(--box-shadow); font-size: clamp(18px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight: 600;}
.contetswrap {margin-top: clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px);}
.icnitem {display: flex; flex-wrap: wrap;}
.icnlist {flex:1 0 50%; max-width: 50%; padding-right: clamp(20px, calc( 100 / var(--inner) * 100vw ), 100px);}
/* .icnitem .textbg {margin-bottom:  clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);} */
.icnitem .flxWrap {margin-right: -40px;}
.icnitem .innerbx {flex: 1 0 50%; max-width: 50%; padding-right: clamp(10px, calc( 40 / var(--inner) * 100vw ), 40px); }
.icnitem .innerbx .inner {padding: clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px) 12px; border-radius:8px; box-shadow: var(--box-shadow); overflow: hidden; text-align: center; height: clamp(250px, calc( 300 / var(--inner) * 100vw ), 300px);}
.icnitem .innerbx.type2 .inner {height: clamp(300px, calc( 350 / var(--inner) * 100vw ), 350px);}
.icnitem .innerbx:nth-child(odd) .inner {background: #f9f9f9; }
.icnitem .innerbx:nth-child(even) .inner {background: #505050; color: #fff;}
.icnitem .icn img {height: clamp(45px, calc( 79 / var(--inner) * 100vw ), 79px);}
.icnitem .name {display: block; padding-top: clamp(8px, calc( 12 / var(--inner) * 100vw ), 12px); font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight:600; padding-bottom: clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px); margin: 0 10px clamp(15px, calc( 35 / var(--inner) * 100vw ), 35px) ; border-bottom: 1px solid #eee;}
.icnitem .decbx { letter-spacing: -1px;}
.icnitem .decbx .text {display: block;  font-size: clamp(18px, calc( 22 / var(--inner) * 100vw ), 22px); font-weight: 600;}
.icnitem .decbx .small {font-size:clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px);}
.icnitem .decbx .small.type2 {font-size:clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px); font-weight: 400;}
.icnitem .decbx .dec {padding-top: 12px;}
/* .textbg + .areatext {padding-top:clamp(20px, calc( 35 / var(--inner) * 100vw ), 35px);} */
.areatext {font-size: clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px); color: #505050; line-height: 1.7; letter-spacing: -0.5px;}
.areatext .bullet-item2 {padding-left: clamp(10px, calc( 17 / var(--inner) * 100vw ), 17px);}
.areatext .bullet-item .bullet-list {line-height: 1.7;}
.bullet-item2 .bullet-list2  {line-height: 1.7;}
.areaWrap + .contentwrapsub {padding-top: clamp(50px, calc( 100 / var(--inner) * 100vw ), 100px);}
.areabutton {padding-top: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px);}
.areabutton .btn-area {display: flex; align-items: center; justify-content: center; width: clamp(200px, calc( 270 / var(--inner) * 100vw ), 270px); height: clamp(35px, calc( 40 / var(--inner) * 100vw ), 40px); border-radius: 4px; background:var(--color-1); color: #fff;}
.areabutton  + .areatext  {padding-top: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px);}
.areatext + .tblbx {padding-top: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}
.tblbx + .areatext {padding-top: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}
.areatext .color-body {padding-bottom: 5px;}
.areatext .dec {padding-top: clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px);}
.areatext .dec.type2 {padding-top: 5px; font-size: clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px);}
.areatext .dec:first-child {padding-top: 0;}

.typeicnitem {display: flex; flex-wrap: wrap; margin: -10px;}
.typeicnlist {flex: 1 0 16.66%; max-width: 16.66%; padding: 10px;}
.typeicnlist .inner {display: block; padding: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px) clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); text-align: center; box-shadow: var(--box-shadow); height: clamp(190px, calc( 260 / var(--inner) * 100vw ), 260px); background: #f9f9f9 url(../images/sub/type-plus.png) no-repeat bottom clamp(10px, calc( 30 / var(--inner) * 100vw ), 30px) center; background-size: clamp(18px, calc( 24 / var(--inner) * 100vw ), 24px) auto; border-radius: 4px;}  
.typeicnlist .icn img {height: clamp(45px, calc( 63 / var(--inner) * 100vw ), 63px);}
.typeicnlist .name {padding-top: clamp(10px, calc( 17 / var(--inner) * 100vw ), 17px); font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 600;}
.typeicnlist .name .small {display: block; padding-top: 5px; font-size: clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px); font-weight: 600;}
.typeicnlist .subname {display: block; padding-top: 8px; font-size: 14px; color: #505050;}
.setpitem {display: flex; flex-wrap: wrap; margin: -20px;}
.steplist {flex: 1 0 16.66%; max-width: 16.66%; padding: 20px; background: url(../images/sub/step-right.png) no-repeat right center;}
.steplist:last-child {background: none;}
.steplist .stepn {display: flex; align-items: center;justify-content: center; height: clamp(28px, calc( 30 / var(--inner) * 100vw ), 30px); background: #505050; color: #fff; border-radius:15px; font-weight: 600;}
.steplist .icn {padding-top: 12px; text-align: center;}
.steplist .icn img {height: clamp(60px, calc( 92 / var(--inner) * 100vw ), 92px);}
.steplist .text {padding-top: 18px; text-align: center; line-height: 1.6; color: #505050;}
.inareabx + .inareabx {padding-top:clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);}
.inareabx .areatt {padding-bottom: clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px); font-size:clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 400;}


.bgtopbx {display: flex; align-items: center; justify-content: center; margin-bottom: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);  height: clamp(280px, calc( 350 / var(--inner) * 100vw ), 350px);}
.bgtopbx.bg1 {background:url(../images//sub/bgtop-img.jpg) no-repeat 50% 50%; background-size: cover;}
.bgtopbx.bg2 {background:url(../images//sub/bgtop-img2.jpg) no-repeat 50% 50%; background-size: cover;}
.bgtopbx.bg3 {background:url(../images//sub/bgtop-img3.jpg) no-repeat 50% 50%; background-size: cover;}
.bgtopbx.bg4 {background:url(../images//sub/bgtop-img4.jpg) no-repeat 50% 50%; background-size: cover;}
.bgtopbx .bginner {padding: 20px; color: #fff; text-align: center;}
.bgtopbx .title {font-size: clamp(20px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight: 600;}
.bgtopbx .decbx {padding-top: 15px;}
.bgtopbx .dec {padding-top:clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); font-size: clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px); line-height: 1.6;}
.bgtopbx .dec:first-child {padding-top: 0;}
.tblbx + .inareabx {padding-top: clamp(20px, calc( 35 / var(--inner) * 100vw ), 35px);}

.areatext + .rateitem {padding-top: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}
.rateitem {display: flex; flex-wrap: wrap; margin: -20px;}
.ratelist {flex: 1 0 33.33%; max-width: 33.33%; padding: 20px;}
.ratelist .inner {padding-bottom: clamp(15px, calc( 24 / var(--inner) * 100vw ), 24px); text-align: center; border-bottom:2px solid #121212; height: 100%;}
.ratelist .icn {text-align: center;}
.ratelist .icn img {height: clamp(30px, calc( 39 / var(--inner) * 100vw ), 39px);}
.ratelist .text {padding-top: 10px; line-height: 1.6; color: #505050;}
.rateitem.type2 .ratelist {flex: 1 0 25%; max-width: 25%;}

.ratetextlist { padding:clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px) 0; border-bottom: 1px solid #ddd;}
.ratetextlist:first-child {padding-top: 0;}
.ratetextlist .titlebx {flex: 1 0 400px; max-width: 400px; padding-right: clamp(15px, calc( 40 / var(--inner) * 100vw ), 40px);}
.ratetextlist .textbx {flex: 1 0 auto; width: 1%; padding-top: clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px);}
.ratetextlist .num {font-weight: 600; color:var(--color-1); text-decoration: underline;}
.ratetextlist .tit {padding-top: 10px; font-size: clamp(18px, calc( 22 / var(--inner) * 100vw ), 22px); font-weight: 600; }
.ratetextlist .subtt {padding-top: clamp(15px, calc( 22 / var(--inner) * 100vw ), 22px); line-height: 1.6; font-size: clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px);}
.ratetextlist .box + .box {padding-top:clamp(15px, calc( 22 / var(--inner) * 100vw ), 22px);}
.ratetextlist .boxtt {font-weight: 600; color: var(--color-1);}
.ratetextlist .areatext {padding-top:clamp(10px, calc( 14 / var(--inner) * 100vw ), 14px); font-size: clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px); color: #505050;}

.typeboxitem {display: flex; flex-wrap: wrap; margin: -40px;}
.typeboxlist {padding: 40px;}
.typeboxlist:nth-child(odd) {flex: 1 0 47%; max-width: 47%; position: relative;}
.typeboxlist:nth-child(odd)::after {position: absolute; content: ''; right: -4px;top: 50%; width: clamp(10px, calc( 16 / var(--inner) * 100vw ), 16px); height: clamp(15px, calc( 24 / var(--inner) * 100vw ), 24px); background: url(../images/sub/sub04-arrow.png) no-repeat ; background-size: contain;}
.typeboxlist:nth-child(even){flex: 1 0 auto; width: 1%;}
.typeboxlist .head {display: flex; align-items: center; justify-content: center; margin-bottom: 10px; height: clamp(40px, calc( 50 / var(--inner) * 100vw ), 50px); font-size: clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: bold; color: #fff; border-radius: 4px; box-shadow: var(--box-shadow);}
.typeboxlist .head.bg1 {background: var(--color-2);}
.typeboxlist .head.bg2 {background: var(--color-1);}
.typeboxlist .head.subbg1 {background: #e7ebf7; color: var(--color-2);}
.typeboxlist .head.subbg2 {background: #e7f7f0; color: var(--color-1);}
.typeboxlist .body {padding:30px 25px;  background: #f9f9f9; letter-spacing: -0.5px; height: 245px;}
.typeboxlist .body.type2 {height: 185px;}
.typeboxlist .inner {box-shadow: var(--box-shadow);}
.typeboxlist .bodybx + .bodybx {padding-top: clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px);}
.typeboxlist .flxwrap {display: flex; align-items: center; justify-content: center; height: 100%;}
.typeboxlist .tit {padding-bottom: 8px; font-size:clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: 600;}
.typeboxlist .dec {color: #505050; line-height: 1.6;}
.typeboxlist .smalldec {font-size: clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px); color: #505050;}
.typeboxlist .inflxwrap {display: flex; flex-wrap: wrap; margin: -10px;}
.typeboxlist .intypelist {flex: 1 0 50%; max-width: 50%; padding: 10px;}

.proccimg {padding-top: clamp(25px, calc( 40 / var(--inner) * 100vw ), 40px);}
.tblflxwrap {display: flex; flex-wrap: wrap;}
.tblflxwrap .tblbx {flex: 1 0 50%; max-width: 50%; border-right: 1px solid #ddd;}
.tblflxwrap .tblbx:last-child {border-right: 0;}

.tblbx + .referbx {padding-top: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}
.referbx .tit {padding-bottom: clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px); font-size: clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: 600; color:var(--color-1);}
.referbx .bullet-item .bullet-list {font-size: clamp(12px, calc( 14 / var(--inner) * 100vw ), 14px); color: #878787;}