@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( 450 / var(--inner) * 100vw ), 450px) !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:12px; margin-top:5px; line-height:1.6;}
.bullet-item .bullet-list:first-child {margin-top:0;}
.bullet-item .bullet-list::before {position:absolute; content:''; left:0; top:clamp(9px, calc( 12 / var(--inner) * 100vw ), 12px); width:3px; height: 3px; background:#454545; border-radius: 50%;}
.bullet-item .bullet-list.none {padding-left: 0;}
.bullet-item .bullet-list.none::before {display: none;}
.bullet-item.type2 .bullet-list {font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px);}
.bullet-item.type3 .bullet-list {font-size: clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px);font-weight: 400;}

.bg-gray {background:#fafafa;}

.sub1-topbg {display: flex; align-items: center; justify-content: center; background: url(../images/sub/sub1-topbg.jpg) no-repeat; background-size: cover; height: clamp(180px, calc( 300 / var(--inner) * 100vw ), 300px);} 
.sub1-topbg .text {padding: 20px; font-size:  clamp(16px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: 500; color: #fff; text-align: center; line-height: 1.4;}
.sub1-topbg.bg2 { background: url(../images/sub/sub2-topbg.jpg) no-repeat;}
.sub1-topbg.bg3 { background: url(../images/sub/sub3-topbg.jpg) no-repeat;}
.sub1-topbg.bg4 { background: url(../images/sub/sub4-topbg.jpg) no-repeat;}
.sub1-topbg.bg5 { background: url(../images/sub/sub5-topbg.jpg) no-repeat;}
.sub1-topbg.bg6 { background: url(../images/sub/sub6-topbg.jpg) no-repeat;}


.textbg {margin-bottom:  clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); padding-left: clamp(30px, calc( 50 / var(--inner) * 100vw ), 50px); font-size:  clamp(20px, calc( 32 / var(--inner) * 100vw ), 32px); font-weight: bold; color: #242424; background: url(../images/sub/textbg.png) no-repeat left center; background-size:  clamp(18px, calc( 32 / var(--inner) * 100vw ), 32px) auto;} 
.btnbx {padding-top: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}
.btnbx .btn-apply {display: inline-flex; align-items: center; justify-content: center; padding: 0 20px; min-width:clamp(220px, calc( 240 / var(--inner) * 100vw ), 240px); height: clamp(42px, calc( 60 / var(--inner) * 100vw ), 60px); border-radius: 8px; background: var(--color-fourth); color: #fff; font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 500;}
.bottomtxt {padding-top: clamp(12px, calc( 18 / var(--inner) * 100vw ), 18px);font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); text-align: left; line-height: 1.45;}
.font-16 {font-size: clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px) !important;}

.subsecwrap {padding:  clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px) 0; overflow: hidden;}
.subsecwrap.nopd {padding: 0;}
.subsecwrap + .subsecwrap {border-top: 1px solid #ddd;}
.subsecwrap .text {font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); line-height: 1.6; letter-spacing: -0.5px;}
.subsecwrap .text + .img {margin-top: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);}
.subsecwrap .text + .img.type2 {margin-top: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}
.subsecwrap .text + .imgtxtflx {padding-top: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);}
.subsecwrap .text + .stepitem {padding-top: clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px);}
.subsecwrap .text + .inborderbx {margin-top: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}
.subsecwrap .text + .bullet-item {margin-top:clamp(10px, calc( 18 / var(--inner) * 100vw ), 18px);}
.subsecwrap .bullet-item + .img {margin-top: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}
.subsecwrap .text + .textbulletbx {margin-top: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}
.subsecwrap .text + .greetflxbx {padding-top: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}

.hbseritem {display: flex;flex-wrap: wrap; padding-top: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);}
.hbserlist {flex: 1 0 20%; max-width: 20%;margin-right: -1px; position: relative; border: 1px solid #ddd;}
.hbserlist:after {position: absolute; content: ''; right: -20px; top: 50%; transform: translateY(-50%); width:40px; height: 40px; border-radius: 50%; background: url(../images/sub/right.png) no-repeat; background-size: contain; z-index: 5;}
.hbserlist:last-child:after {display: none;}
.hbserlist:first-child {border-top-left-radius:16px; border-bottom-left-radius: 16px;}
.hbserlist:last-child {border-top-right-radius:16px; border-bottom-right-radius: 16px;}
.hbserlist .inner { padding:clamp(20px, calc( 35 / var(--inner) * 100vw ), 35px) clamp(15px, calc( 35 / var(--inner) * 100vw ), 35px); padding-right:clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px) ; letter-spacing: -0.5px; height: 100%;}
.hbserlist .bullet-item {padding-top: clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px);}
.hbserlist .bullet-list {margin-top: 5px;}
.hbserlist .bullet-list:first-child {margin-top: 0;}
.hbserlist .tt {font-size: clamp(19px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: bold; color:var(--color-tertiary);}

.processitem {display: flex; flex-wrap: wrap; margin: -20px;}
.processlist {flex: 1 0 25%; max-width: 25%; padding: 20px; position: relative;}
.processlist .inner {padding:clamp(25px, calc( 50 / var(--inner) * 100vw ), 50px) 10px; border: 1px solid #ddd; height: 100%; text-align: center; border-radius: 16px;}
.processlist .inner:after {position: absolute; content: ''; right: -7px; top: 50%; transform: translateY(-50%); background: url(../images/sub/right2.png) no-repeat; background-size: contain; width: 15px; height: 16px;}
.processlist .num {display: block; font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: bold;}
.processlist .img {padding-top:clamp(12px, calc( 18 / var(--inner) * 100vw ), 18px);}
.processlist .img img {height: clamp(30px, calc( 40 / var(--inner) * 100vw ), 40px);}
.processlist .dec {padding-top:18px; line-height: 1.6; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: 500;}
.processitem + .processitem {padding-top: 20px;}
.processitem.reverse {flex-direction: row-reverse;}
.processitem.reverse .processlist:first-child .inner::before {position: absolute; content: ''; left: 50%; top: -7px; transform: translatex(-50%) rotate(90deg); background: url(../images/sub/right2.png) no-repeat; background-size: contain; width: 15px; height: 16px;}
.processitem.reverse .processlist .inner:after {transform: rotate(-180deg) translateY(-50%);}

.imgtxtflx {display: flex; align-items: center; flex-direction: row-reverse; justify-content: space-between; flex-wrap: wrap;}
.imgtxtflx .imgbx {flex: 1 0 545px; max-width: 545px; margin-left: clamp(15px, calc( 55 / var(--inner) * 100vw ), 55px);}
.imgtxtflx .textbx {flex: 1 0 auto; width: 1%; letter-spacing: -0.5px;}
.imgtxtflx .txtitem {margin:-20px;}
.imgtxtflx .txtlist {padding:20px;}
.imgtxtflx .inner {padding: clamp(20px, calc( 35 / var(--inner) * 100vw ), 35px) clamp(15px, calc( 40 / var(--inner) * 100vw ), 40px); border: 1px solid #ddd; border-radius: 16px; min-height: clamp(140px, calc( 160 / var(--inner) * 100vw ), 160px);}
.imgtxtflx .tit {font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: bold; color:var(--color-tertiary);} 
.imgtxtflx .dec {padding-top:clamp(10px, calc( 12 / var(--inner) * 100vw ), 12px); line-height: 1.6;}
.imgtxtflx .text2 .decbx {padding-bottom: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px);}
.imgtxtflx .text2 .dec {padding-top:8px; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px);}

.imgtxtflx.type2 {flex-direction: row;}
.imgtxtflx.type2 .imgbx {margin-left: 0; }
.imgtxtflx.type2 .imgbx.img2 {flex: 1 0 610px; max-width: 610px;}
.imgtxtflx.type2 .imgbx.img3 {flex: 1 0 580px; max-width: 580px; margin-right: 35px;}

.imgtxtflx .ttdeclist + .ttdeclist {margin-top: clamp(18px, calc( 36 / var(--inner) * 100vw ), 36px);}
.imgtxtflx .ttdeclist .title {font-size:clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: bold;} 
.imgtxtflx .ttdeclist .desc {padding-top:13px; line-height: 1.4; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px);}

.subsecwrap .inaccharac {padding: clamp(25px, calc( 60 / var(--inner) * 100vw ), 60px) clamp(15px, calc( 50 / var(--inner) * 100vw ), 50px); border-radius:24px; background: #ececec;}
.inaccharac .flxWrap {flex-direction: row-reverse;}
.inaccharac .imgbx {flex: 1 0 480px; max-width: 480px;}
.inaccharac .textbx {flex: 1 0 auto; width: 1%;}
.inaccharac .bullet-list {font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px);font-weight: 500;}
.inaccharac .bullet-list::before {top: clamp(9px, calc( 12 / var(--inner) * 100vw ), 12px);}

.acpointitem {display: flex; flex-wrap: wrap; margin: -20px;}
.acpointlist {flex: 1 0 33.33%; max-width: 33.33%; padding: 20px;}
.acpointlist .inner {padding:clamp(20px, calc( 35 / var(--inner) * 100vw ), 35px) clamp(15px, calc( 40 / var(--inner) * 100vw ), 40px); display: flex; flex-direction: column; justify-content: space-between; border-radius:16px; color: #fff; height: 100%; min-height: clamp(160px, calc( 240 / var(--inner) * 100vw ), 240px); letter-spacing: -0.5px;}
.acpointlist .inner.bg1 {background: var(--color-fourth);}
.acpointlist .inner.bg2 {background: var(--color-primary);}
.acpointlist .inner.bg3 {background: var(--color-secondary);}
.acpointlist .num {display: block; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: bold;}
.acpointlist .bottombx {padding-top: 15px;}
.acpointlist .title {font-size: clamp(18px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: bold; line-height:1.3;}
.acpointlist .subdc {display: block; padding-top: 10px;}
.inacpoint .btmtxt {padding-top: 15px; text-align: right; color: #686868; line-height:1.6;}

.acpointitem.type2 {margin: -10px; padding-top: clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px);}
.acpointlist.type2 {flex: 1 0 100%; max-width: 100%; padding: 10px;}
.acpointlist.type2 .inner {position: relative; border: 1px solid #ddd; background: #fff; border-radius: 0; min-height: clamp(190px, calc( 215 / var(--inner) * 100vw ), 215px); color: #454545;}
.acpointlist.type2:nth-child(odd) .num {color: var(--color-fourth);}
.acpointlist.type2:nth-child(even) .num {color: var(--color-secondary);}
.acpointlist.type2 .title {color: #242424;}
.acpointlist.type2 .subdc {padding-top: clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px);}
.acpointlist.type2:nth-child(odd) .inner:after {position: absolute; content: ''; left: 0; top: 0; width: clamp(50px, calc( 100 / var(--inner) * 100vw ), 100px); height: 2px; background:#00b7cc;}
.acpointlist.type2:nth-child(odd) .inner::before {position: absolute; content: ''; left: 0; top: 0; width: 2px; height: clamp(50px, calc( 100 / var(--inner) * 100vw ), 100px); background:#00b7cc;}
.acpointlist.type2:nth-child(even) .inner:after {position: absolute; content: ''; left: 0; top: 0; width: clamp(50px, calc( 100 / var(--inner) * 100vw ), 100px); height: 2px; background:var(--color-secondary);}
.acpointlist.type2:nth-child(even) .inner::before {position: absolute; content: ''; left: 0; top: 0; width: 2px; height: clamp(50px, calc( 100 / var(--inner) * 100vw ), 100px); background:var(--color-secondary);}

.actypeitem {display: flex; flex-wrap: wrap; margin: -20px; padding-top: clamp(30px, calc( 75 / var(--inner) * 100vw ), 75px);}
.actypelist {flex: 1 0 50%; max-width: 50%; padding: 20px;}
.actypelist .inner {height: 100%; border: 1px solid #ddd;}
.actypelist .head {display: flex; align-items: center; justify-content: center; padding: clamp(12px, calc( 18 / var(--inner) * 100vw ), 18px) 10px; font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: bold; color: #fff; text-align: center; }
.actypelist .head.bg1 {background: var(--color-fourth);}
.actypelist .head.bg2 {background: var(--color-primary);}
.actypelist .head.bg3 {background: var(--color-secondary);}
.actypelist .head.bg4 {background: var(--color-tertiary);}
.actypelist .body {padding: clamp(20px, calc( 35 / var(--inner) * 100vw ), 35px) clamp(15px, calc( 35 / var(--inner) * 100vw ), 35px); line-height: 1.6;}
.actypeitem.type2 .actypelist  {flex: 1 0 47%; max-width: 47%;}
.actypeitem.type2 .actypelist.vs {padding: 0;flex: auto; max-width: auto;text-align: center; display: flex; align-items: center; justify-content: center; font-size: clamp(18px, calc( 32 / var(--inner) * 100vw ), 32px); font-weight: bold; color:var(--color-primary);}
.actypeitem.type3 .actypelist  {flex: 1 0 33.33%; max-width: 33.33%;}
.actypelist .body.height {height: clamp(420px, calc( 530 / var(--inner) * 100vw ), 530px);}
.actypelist .inbody {display: flex; flex-direction: column; justify-content: space-between; height: 100%;}
.actypelist .inbody .imgbx {margin-top: clamp(20px, calc( 35 / var(--inner) * 100vw ), 35px);text-align: center;}
.actypelist .inbody > .bullet-item > .bullet-list {margin-top: clamp(12px, calc( 25 / var(--inner) * 100vw ), 25px);}
.actypelist .inbody > .bullet-item > .bullet-list:first-child {margin-top: 0;}

.innerimg  {border: 1px solid #ddd;}
.innerimg .head {padding: clamp(10px, calc( 16 / var(--inner) * 100vw ), 16px) 10px;font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: bold; color: #fff; text-align: center;}
.innerimg .head.bg1 {background:var(--color-tertiary);}
.innerimg .body {padding:clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px) 5px clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}

.programlist + .programlist {margin-top:clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px);}
.programlist .title {font-weight: 600; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px);}
.programlist .decbx {padding-left:clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px); padding-top: 7px;}
.programlist .dec {line-height: 1.6; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px);}
.programlist .bullet-list {font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px);}

.programitem + .tblbx {margin-top:clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);}

.numtxtitem {display: flex; flex-wrap: wrap; margin: -20px;}
.numtxtlist {flex: 1 0 33.33%; max-width: 33.33%; padding: 20px;}
.numtxtlist .inner {padding:clamp(15px, calc( 33 / var(--inner) * 100vw ), 33px) clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); border: 1px solid #ddd; border-radius: 16px; height: 100%; text-align: center;}
.numtxtlist .num {font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: bold; color: var(--color-tertiary);}
.numtxtlist .bottombx {padding-top:clamp(20px, calc( 48 / var(--inner) * 100vw ), 48px);}
.numtxtlist .title {font-size: clamp(18px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight: bold;color: var(--color-tertiary);}
.numtxtlist .subdc {padding-top: 7px; line-height: 1.6;}

.tblbx th,
.tblbx td {padding:clamp(12px, calc( 20 / var(--inner) * 100vw ), 20px) clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px); text-align: center; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd;}
.tblbx thead th {font-weight: 600; background: #f9f9f9; border-top: 1px solid #ddd;}
.tblbx tbody th {font-weight: bold;}
.tblbx .bdr {border-right: 0;}
.tblbx .txtbx {display:inline-flex ; align-items: center; justify-content: center; padding: clamp(12px, calc( 18 / var(--inner) * 100vw ), 18px) 5px; min-width:clamp(100px, calc( 180 / var(--inner) * 100vw ), 180px); background:var(--color-fourth); color: #fff;}
.tblbx .bullet-item {padding-left: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); text-align: left;}

.stepitem {display: flex; flex-wrap: wrap; margin:-6px; padding-bottom: 35px; position: relative;}
.stepitem:after {position: absolute; content: ''; left: 50%; bottom: 0; transform: translateX(-50%); background: url(../images/sub/sub03_03-icn1.jpg) no-repeat ; width:1044px; height: 41px; background-size: contain;}
.steplist {flex: 1 0 14.28%; max-width: 14.28%; padding: 6px;}
.steplist .inner {display: flex; align-items: center;justify-content: center; padding:30px 10px; position: relative; border: 1px solid #ddd; border-radius: 16px; height:clamp(120px, calc( 160 / var(--inner) * 100vw ), 160px); text-align: center;}
.steplist .badge {display: inline-flex; align-items: center; justify-content: center; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: clamp(90px, calc( 100 / var(--inner) * 100vw ), 100px); height: clamp(36px, calc( 40 / var(--inner) * 100vw ), 40px); border-radius: 20px; color: #fff; font-weight:bold; line-height: 1;}
.steplist:nth-child(odd) .badge {background:var(--color-primary);}
.steplist:nth-child(even) .badge {background:var(--color-secondary);}
.steplist .dec {font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: 600; line-height:1.4;} 

.markbx {text-align: center;}
.markbx .mark {display: inline-block; position: relative; padding:0 10px 5px; font-size:clamp(20px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: 600; color: #242424;}
.markbx .mark:after {position: absolute; content: '';  left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; height:clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); background:rgba(252, 179, 71, 0.1);}
.markbx .markdec {padding-top: clamp(14px, calc( 17 / var(--inner) * 100vw ), 17px);}
.markbx + .img {margin-top:clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}

.inborderbx {padding: clamp(20px, calc( 60 / var(--inner) * 100vw ), 60px); border: 1px solid #ddd; text-align: center;}
.inborderbx .innerimg {border: 0;}
.inborderbx .innerimg .head {border-radius: 8px;}
.inborderbx .img {margin:20px 0;}
.inborderbx .foot {font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: 600;}

.intxtbx {margin-top: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); line-height: 1.6; letter-spacing: -0.5px;}
.intxtbx.bg {padding:clamp(18px, calc( 30 / var(--inner) * 100vw ), 30px) clamp(12px, calc( 35 / var(--inner) * 100vw ), 35px); background: #f9f9f9;}

.intxtbx .itxtlist {line-height: 2.22; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px);}
.intxtbx .itxtlist .tit {font-weight: bold;}
.bullet-item + .inborderbx {margin-top: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}

.soluitem {padding-top: 60px;}
.solulist + .solulist {margin-top: 40px;}
.solulist .inner {display: flex;flex-wrap: wrap;}
.solulist .bg1 {background: var(--color-fourth);}
.solulist .bg2 {background: var(--color-primary);}
.solulist .bg3 {background: var(--color-secondary);}
.solulist .bg4 {background: var(--color-tertiary);}

.solulist .icnbx {flex: 1 0 240px; max-width: 240px; display: flex; align-items: center; justify-content: center; flex-direction: column; margin-right:80px; position: relative; border-radius: 16px;}
.solulist .icnbx:after {position: absolute; content: ''; right: -60px; top: 50%; transform: translateY(-50%); width:40px; height: 1px; background: #ddd;}
.solulist .icnbx img {height: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);}
.solulist .icnbx .name {display: block; padding-top:clamp(10px, calc( 18 / var(--inner) * 100vw ), 18px); font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: bold; color: #fff;}
.solulist .textbx {flex: 1 0 auto; width: 1%; display: flex; align-items: center; justify-content: space-between; padding:30px clamp(15px, calc( 40 / var(--inner) * 100vw ), 40px); border-radius:16px; border: 1px solid #ddd; height: clamp(160px, calc( 240 / var(--inner) * 100vw ), 240px); font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); line-height: 1.6;} 
.solulist .btn-link {display: flex; align-items: center; justify-content: center; margin-left: 20px; flex:1 0 clamp(100px, calc( 140 / var(--inner) * 100vw ), 140px) ; max-width:clamp(100px, calc( 140 / var(--inner) * 100vw ), 140px); height: clamp(42px, calc( 60 / var(--inner) * 100vw ), 60px); border-radius: 8px; color: #fff; font-size:clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 500;}

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

.tabwrap {margin:clamp(30px, calc( 50 / var(--inner) * 100vw ), 50px) 0;}
.tabwrap.type2 {margin:clamp(40px, calc( 75 / var(--inner) * 100vw ), 75px) 0;}
.tabwrap .tabs {display: flex; justify-content: center; flex-wrap: wrap; margin: -10px;}
.tabwrap .tabs .list {flex: 1; padding: 10px;}
.tabwrap .tabs .link {display: flex; align-items: center;justify-content: center; padding: 0 10px; width: 100%; height: clamp(55px, calc( 80 / var(--inner) * 100vw ), 80px); border-radius: 8px; background: #f6f6f6; color: #aaaaaa; font-size: clamp(14px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 600; text-align: center;}
.tabwrap .tabs .list.active .link {background: var(--color-primary); color: #fff;}

.tab-content .tblbx {border-top: 1px solid #ddd;}
.tab-content .tblbx th {background: #f9f9f9;}
.tab-content .tblbx td {text-align: left;}
.tab-content .tblbx td:last-child {border-right: 0;}

.tabwrap .tabitem {display: flex; margin: 0; border-bottom: 2px solid var(--color-primary);}
.tabwrap .tabitem .list {flex:1; border:2px solid #dfdfdf; border-bottom:0; margin:0 -1px; padding: 0;}
.tabwrap .tabitem .list .link {display: flex; align-items: center; justify-content: center; background:transparent; height: clamp(40px, calc( 60 / var(--inner) * 100vw ), 60px);font-size: clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px); font-weight: 400; color: #505050; text-align: center;} 
.tabwrap .tabitem .list.active {position:relative; z-index:2; border-color:var(--color-primary);}
.tabwrap .tabitem .list.active:after {content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:#fff;}
.tabwrap .tabitem .list.active .link {color:var(--color-primary); font-weight:700;}

.cirproitem {margin: -10px; padding-top: clamp(20px, calc( 45 / var(--inner) * 100vw ), 45px); text-align: center;}
.cirprolist {padding: 10px;}

.textbulletbx + .textbulletbx {margin-top: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px);}
.textbulletbx .title {font-size: clamp(19px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: bold; color: #242424;}
.textbulletbx .textbullet-item {margin-top: 12px; line-height: 1.6;}

.textbulletbx .process {display: flex; flex-wrap: wrap; margin: -20px; padding-top: clamp(30px, calc( 40 / var(--inner) * 100vw ), 40px);}
.textbulletbx .processlist {flex: 1 0 25%; max-width: 25%; padding: 20px; position: relative;} 
.textbulletbx .processlist:after {position: absolute; content: ''; right: -5px; top: 50%; transform: translateY(-50%); width:clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px); height: clamp(11px, calc( 16 / var(--inner) * 100vw ), 16px); background:url(../images/sub/right2.png) no-repeat; background-size: contain;}
.textbulletbx .processlist:last-child:after {display: none;}
.textbulletbx .text {padding:clamp(10px, calc( 14 / var(--inner) * 100vw ), 14px) 10px; text-align: center; background: var(--color-primary); color: #fff;font-size: clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: bold; height: 100%;}

.bgimg {display: flex; align-items: center; margin-top: clamp(15px, calc( 35 / var(--inner) * 100vw ), 35px); padding: clamp(30px, calc( 80 / var(--inner) * 100vw ), 80px) clamp(15px, calc( 55 / var(--inner) * 100vw ), 55px); background: url(../images/sub/greet-img1.jpg) no-repeat; background-size: cover; height:clamp(180px, calc( 300 / var(--inner) * 100vw ), 300px); font-size: clamp(17px, calc( 22 / var(--inner) * 100vw ), 22px); font-weight: 600; color: #fff; line-height: 1.7;} 

.greetflxbx + .greetflxbx {margin-top: 40px;}
.greetflxbx .flxWrap {align-items: center;}
.greetflxbx .imgbx {flex: 1 0 580px; max-width: 580px; margin-right: clamp(15px, calc( 100 / var(--inner) * 100vw ), 100px); position: relative;}
.greetflxbx .num {display: flex; align-items: center; justify-content: center; position: absolute; right: -30px; top: 50%; transform: translateY(-50%); width: 60px; height: 60px; background:var(--color-primary); color: #fff; font-size: clamp(18px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight: bold;border-radius: 50%;}
.greetflxbx .num:after {position: absolute; content: ''; left: 50%; top: 50%; transform: translate(-50%, -50%); width:80px; height: 80px; border-radius: 50%; background: rgba(0, 129, 201, 0.2);z-index: -1;}
.greetflxbx .textbx {flex: 1 0 auto; width: 1%;}
.greetflxbx .textbx .title {font-size: clamp(20px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight: bold; color: #242424;} 
.greetflxbx .textbx .desc {padding-top:12px; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px);} 
.greetflxbx .flxWrap.reverse {flex-direction: row-reverse;}
.greetflxbx .flxWrap.reverse .imgbx {margin-right: 0; margin-left:clamp(15px, calc( 100 / var(--inner) * 100vw ), 100px) ;}
.greetflxbx .flxWrap.reverse .num {right: initial; left: -30px;}
.greetflxbx .flxWrap.reverse .textbx {text-align: right;}

.history-bnr {margin-bottom: 80px; border-radius: 20px; height: 240px; padding: 30px 75px; display: flex; align-items: flex-end; background:url('../images/sub/history-bnr.jpg') no-repeat 50% 50% / cover;}
.history-bnr h2 {font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1em; color: #fff;}
.history-bnr h2 span {font-size: 60px; margin-top: 20px; letter-spacing: -.03em; display: block;}
.history {padding-left: clamp(10px, calc( 95 / var(--inner) * 100vw ), 95px);}
.history .item {display:flex; position: relative; }
.history .item:before {position:absolute; content:""; background:#fff; margin-left:-15px; top:-4px; left:0; width:30px; height:30px; border-radius:100%; border:8px solid var(--color-primary);}
.history .item:after {position:absolute; content:""; left:0; top:0; width:1px; height:100%; background:#ddd; z-index:-1;}
.history .item h3 {margin-bottom:40px; padding-left: 50px;  font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1.4em; color: #242424; text-align:left; width:325px; line-height:1em; margin:-8px 0 0;}
.history .list {flex:1 1 auto; min-width:0; width:1%; padding-bottom: 70px ; position:relative;}
.history .list li {margin-bottom:20px; display:flex; line-height:1.4em; color: #454545;}
.history .list li:last-child {margin-bottom:0;}
.history .item:last-child .list {padding-bottom:0;} 
.history .item:last-child .list:after {display:none;}

@media (max-width: 1024px) {
	.history-bnr {height:160px; padding: 20px 30px; margin-bottom:50px;}
	.history-bnr h2 {font-size: 26px;}
	.history-bnr h2 span {font-size: 32px; margin-top: 10px;}
	.history .item h3 {width:260px;font-size: 32px; padding-left: 35px;}
	.history .list {padding-bottom:60px;}
	.history .list li {margin-bottom:15px;}
	.history .item:before {width:22px; height:22px; border-width:5px; margin-left:-11px; top:-3px}
	.history .item strong {font-size:18px;}
}

@media (max-width: 640px) {
	.history-bnr {height:120px; padding: 10px 15px; margin-bottom:30px; border-radius:10px;}
	.history-bnr h2 {font-size: 16px;}
	.history-bnr h2 span {font-size:20px;}
    .history {padding-left: 0;}
	.history .item {border:0; display:block; padding-bottom:40px;}
	.history .item h3 {font-size: 20px; margin-bottom:15px; padding-left:25px; width: 100%;}
	.history .list {padding-bottom:0; width:100%; padding-left:25px;}
	.history .list li {margin-bottom:10px;}
	.history .item:after {display:none;}
	.history .item:before {width:14px; height:14px; top:4px; margin-left:0; border-width: 4px;}
}

.addrs-list {display: flex; align-items: center; flex-wrap: wrap; padding: 35px 0; border-bottom: 1px solid #ddd;}
.addrs-list .icn {flex:1 0 clamp(85px, calc( 125 / var(--inner) * 100vw ), 125px); max-width: clamp(85px, calc( 125 / var(--inner) * 100vw ), 125px);}
.addrs-list .icn img {width: clamp(50px, calc( 88 / var(--inner) * 100vw ), 88px);}
.addrs-list .mapinfo {flex: 1 0 auto; width: 1%;}
.addrs-list .name {margin-bottom: 13px; font-size: clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: bold;}

.inquirytop {margin-bottom: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px); padding: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px) clamp(10px, calc( 30 / var(--inner) * 100vw ), 30px); background: #f6f6f6; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); line-height:1.6;}

.radioitem {display: flex; flex-wrap: wrap; margin:0 -20px;}
.radioitem .item {padding: clamp(5px, calc( 10 / var(--inner) * 100vw ), 10px) 20px;}