@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:"위노베이트"; 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;}
.overhidden {overflow: hidden;}
.bullet-tit {margin-bottom: clamp(12px, calc( 20 / var(--inner) * 100vw ), 20px); padding-left: clamp(22px, calc( 30 / var(--inner) * 100vw ), 30px); position: relative; font-size:clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px); font-weight: 700;}
.bullet-tit::before {content: ''; position: absolute; left: 0; top: 0;  width: clamp(16px, calc( 22 / var(--inner) * 100vw ), 22px); height: clamp(14px, calc( 20 / var(--inner) * 100vw ), 20px); background: url(../images/sub/bullet-img.png) no-repeat; background-size: contain; }
.bullet-dec {font-size:clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 500; color: var(--color-body);}
.bullet-inbox {padding-left:clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px) ;}

.board-dis {border-top: 1px solid #242424;}
.board-dis .item {border-bottom: 1px solid #ddd;}
.board-dis .link {display: block; padding:clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px) 0; }
.board-dis .title {font-size:clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: 600; display:-webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1;}

.subrateitem {padding: clamp(30px, calc( 50 / var(--inner) * 100vw ), 50px) 0; border-bottom: 1px solid #ddd;}
.subrateitem:first-child {padding-top: 0;}
.subrateitem .inbox {padding-left: clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px);}
.bullet-dec + .inboxlist {margin-top: clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px);}
.inboxlist {display: flex; flex-wrap: wrap; margin:-7px;}
.inboxitem {flex: 1 0 16.66%; max-width: 16.66%; padding:7px;}
.inboxitem .in {padding:clamp(15px, calc( 22 / var(--inner) * 100vw ), 22px) clamp(12px, calc( 18 / var(--inner) * 100vw ), 18px); padding-right: 10px; background: #f8f8f8; letter-spacing: -0.5px;border-radius: 8px; height: 100%;}
.inboxitem .in.border {border: 2px solid var(--color-primary); background: #fff;}
.inboxitem .in span { font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); line-height:1.88;}
.inboxitem .in .month {display: block;font-weight: 500;}
.inboxitem .in .rate {display: block;font-weight: bold;}
.inboxitem .bttmlist {padding-top:clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px);}
.inboxitem .bttmitem {font-size:clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: 600; color:var(--color-body); line-height: 1.4;}
.inboxlist.ty2 .inboxitem {flex:1 0 25%; max-width: 25%;}
.subrateitem .intextbx .dec {font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 500; color:var(--color-body); line-height: 1.6;}

/* 예금 badge 공통스타일 */
.badgelist {display: flex; flex-wrap: wrap; margin:-5px;}
.badgeitem {padding: 5px;}
.badgeitem .badge {display: inline-flex; align-items: center; justify-content: center; padding:0 clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px); min-width:clamp(80px, calc( 110 / var(--inner) * 100vw ), 110px); height: clamp(30px, calc( 40 / var(--inner) * 100vw ), 40px); font-size: clamp(13px, calc( 16 / var(--inner) * 100vw ), 16px); border-radius: 20px; background:var(--color-primary); color: #fff; line-height: 1;}

.wkdeposit-list {padding-top: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px);}
.wkdeposit-list .wklist {display: flex; flex-wrap: wrap; margin:-20px;}
.wkdeposit-list .wkitem {flex: 1 0 33.33%; max-width: 33.33%; padding: 20px;}
.wkitem .inner {display: flex; flex-direction: column; justify-content: space-between; padding:clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); border-radius: 15px; border: 1px solid #ddd; height: 100%; letter-spacing: -0.5px; transition: all 0.3s;}
.wkitem .textbx {padding-top: clamp(20px, calc( 35 / var(--inner) * 100vw ), 35px);}
.wkitem .textbx .tit {font-size: clamp(18px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight: 600;}
.wkitem .textbx .dec {margin-top:clamp(10px, calc( 12 / var(--inner) * 100vw ), 12px);font-size: clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px); font-weight: 500; line-height:1.625;}
.wkitem .bottombtn {margin-top: clamp(15px, calc( 22 / var(--inner) * 100vw ), 22px);}
.wkitem .btn {display: inline-flex; align-items: center; justify-content: center; width:clamp(100px, calc( 170 / var(--inner) * 100vw ), 170px); height: clamp(38px, calc( 45 / var(--inner) * 100vw ), 45px); border-radius: 8px; border: 1px solid #ddd; }
.wkitem .inner:hover {background: linear-gradient(to top, #e9f0fb, #f7fafe);border-color: transparent;}
.wkitem .inner:hover .btn {border-color: var(--color-primary); color: var(--color-primary);}

.wkdeposit-detail {border-top: 1px solid #242424;}
.detail-titlebx {display: flex; justify-content: space-between; padding: clamp(20px, calc( 35 / var(--inner) * 100vw ), 35px) 0;}
.detail-titlebx .titlebx {padding-right: 20px;}
.detail-titlebx .titlebx .tit {font-size:clamp(18px, calc( 34 / var(--inner) * 100vw ), 34px); font-weight: 600;}
.detail-titlebx .titlebx .dec {margin-top:clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 500;}

.wkdetail-item {padding:clamp(20px, calc( 35 / var(--inner) * 100vw ), 35px) 0; border-bottom: 1px solid #ddd;}
.wkdetail-item:last-child {border-bottom:0;}
.wkdetail-item .name {display: block; font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: bold; color: var(--color-primary);}
.wkdetail-item .descbx {padding-top:12px; color: var(--color-body); line-height:1.625;}
.numitem { padding-left: 1.6em; text-indent: -1.6em;}
.wkdeposit {padding-top: clamp(30px, calc( 50 / var(--inner) * 100vw ), 50px);}
.wkdeposit .btn-pack {min-width:clamp(110px, calc( 170 / var(--inner) * 100vw ), 170px) !important; border-radius: 8px;}

.sub02_6_1 {margin-bottom: clamp(40px, calc( 100 / var(--inner) * 100vw ), 100px); padding:clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px) 20px; text-align: center; border-radius:30px; background: linear-gradient(to top, #e9f0fb, #f7fafe);font-weight: 600;}
.sub02_6_1 .title {font-size:clamp(18px, calc( 34 / var(--inner) * 100vw ), 34px); line-height: 1.35;}
.sub02_6_1 .dec {padding-top:clamp(15px, calc( 35 / var(--inner) * 100vw ), 35px); font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); color: var(--color-body);}

.dividend-history {display: flex;flex-wrap: wrap; margin:-15px -10px;}
.dividend-history .item {flex:12.28%; max-width: 12.28%; padding:15px 10px; position: relative; text-align: center; letter-spacing: -0.5px;}
.dividend-history .item:not(:last-child):after {position: absolute; content: ''; right: 0;top: 50%; transform: translateY(-50%); width: 1px; height: clamp(18px, calc( 25 / var(--inner) * 100vw ), 25px); background: #ddd;}
.dividend-history .icn img {width:clamp(50px, calc( 66 / var(--inner) * 100vw ), 66px);}
.dividend-history .numbx {padding-top: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px);}
.dividend-history .numbx .year {display: block; font-size: clamp(18px, calc( 30 / var(--inner) * 100vw ), 30px); font-weight: 600; color: var(--color-body); line-height: 1.1;}
.dividend-history .numflx {margin-top:10px; font-size: clamp(20px, calc( 36 / var(--inner) * 100vw ), 36px); color: var(--color-primary); font-weight: 600; letter-spacing: -1px;}

.categorywrap + .categorywrap {margin-top: clamp(35px, calc( 75 / var(--inner) * 100vw ), 75px);}
.categorywrap .link {display: inline-flex; align-items: center; justify-content: center; padding: 0 15px; width: 100%; height: clamp(40px, calc( 60 / var(--inner) * 100vw ), 60px);font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); text-align: center;}
.maincategory {display: flex; border-radius: 8px;border: 1px solid #ddd;overflow: hidden;}
.maincategory .categoryitem {flex: 1 0 50%; max-width: 50%; }
.maincategory .categoryitem .link {font-weight: 500; color: var(--color-body);}
.maincategory .categoryitem.active .link {background: var(--color-primary); color: #fff; font-weight: bold;}
.subcategory {display: flex; }
.subcategory .subcategoryitem {flex: 1 0 50%; max-width: 50%;  border-bottom: 1px solid #ddd;}
.subcategory .subcategoryitem .link {position: relative; color: #999999;}
.subcategory .subcategoryitem.active .link {color: #839ac3;font-weight: bold;}
.subcategory .subcategoryitem.active .link::after {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: clamp(2px, calc( 3 / var(--inner) * 100vw ), 3px); background: #839ac3;}
.tab-contentwrap {margin-top: clamp(40px, calc( 100 / var(--inner) * 100vw ), 100px);}

.intablist {display: flex; flex-wrap: wrap; margin:-15px -30px;}
.intabitem {flex: 1 0 50%; max-width: 50%; padding:15px 30px;}
.intabitem .inner {padding:clamp(25px, calc( 55 / var(--inner) * 100vw ), 55px) clamp(20px, calc( 50 / var(--inner) * 100vw ), 50px); border-radius: 30px; border: 1px solid #ddd; letter-spacing: -0.5px; height: 100%;}
.intabitem .title {font-size:clamp(18px, calc( 34 / var(--inner) * 100vw ), 34px); font-weight: bold;}
.intabitem .subtit {padding-top: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); color: var(--color-body); line-height:1.55;}
.intabitem .resentbx {padding-top: clamp(20px, calc( 43 / var(--inner) * 100vw ), 43px);}
.intabitem .resentbx span {display: block;}
.intabitem .resentbx .tt {margin-bottom:12px; font-size: clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px); color: var(--color-primary); font-weight: bold;}
.intabitem .resentbx .list {font-size:clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px); color:var(--color-body); line-height:1.625;}
.intabitem .resentbx .last {padding-top:clamp(15px, calc( 24 / var(--inner) * 100vw ), 24px); color: #242424;font-weight: bold;}

.subsec-pd {padding-top:clamp(50px, calc( 140 / var(--inner) * 100vw ), 140px) ;}

.sub01_1_1 {max-width:1920px; width: 100%; margin: 0 auto;}
.sub01_1_1 .bgsec {position: relative; padding-bottom: clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px);}
.sub01_1_1 .textbx {padding: clamp(25px, calc( 40 / var(--inner) * 100vw ), 40px) 16px; position: absolute; left: 0; bottom: 0; background: var(--color-primary);color: #fff;max-width: 860px; width: 100%; overflow: hidden;}
.sub01_1_1 .textbx:after {position: absolute; content: ''; right: -35px; bottom: -10px; width: clamp(70px, calc( 136 / var(--inner) * 100vw ), 136px); height: clamp(60px, calc( 117 / var(--inner) * 100vw ), 117px); background: url(../images/sub/sub01_1-logo1.png) no-repeat; background-size: contain;}
.sub01_1_1 .textbx .inwid {max-width: 600px; width: 100%;margin-left: auto;line-height: 1.6; font-size: clamp(16px, calc( 26 / var(--inner) * 100vw ), 26px);}

.sub01_1_2 {padding-left: clamp(15px, calc( 100 / var(--inner) * 100vw ), 100px); background: url(../images/sub/sub01_1-logo2.png) no-repeat right top; background-size:clamp(180px, calc( 400 / var(--inner) * 100vw ), 400px) auto;}
.sub01_1_2 .title {font-size:clamp(18px, calc( 32 / var(--inner) * 100vw ), 32px); font-weight: 600; line-height:1.4;}
.sub01_1_2 .decbx {padding-top:clamp(15px, calc( 33 / var(--inner) * 100vw ), 33px);}
.sub01_1_2 .dec + .dec {padding-top: clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px);}
.sub01_1_2 .dec {font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); color: var(--color-body); line-height: 1.6;}
.sub01_1_2 .last {padding-top:clamp(30px, calc( 70 / var(--inner) * 100vw ), 70px); font-size:clamp(17px, calc( 22 / var(--inner) * 100vw ), 22px); font-weight: 500;color: var(--color-body);}

.recorditem {display: flex; flex-wrap: wrap; padding:clamp(25px, calc( 43 / var(--inner) * 100vw ), 43px) 0; border-top: 1px solid #ddd;}
.recorditem:first-child { border-top:0; }
.recorditem .leftbx {flex:1 0 clamp(120px, calc( 285 / var(--inner) * 100vw ), 285px); max-width: clamp(120px, calc( 285 / var(--inner) * 100vw ), 285px); font-size:clamp(18px, calc( 26 / var(--inner) * 100vw ), 26px); font-weight: 600;}
.recorditem .rightbx {flex:1 0 auto; width: 1%;}
.recorditem .hisitem {display: flex; line-height: 1.6;}
.recorditem .hisitem + .hisitem {margin-top: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px);}
.recorditem .hisitem .years {flex:1 0 clamp(95px, calc( 115 / var(--inner) * 100vw ), 115px); max-width: clamp(95px, calc( 115 / var(--inner) * 100vw ), 115px); font-size:clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 500; color: var(--color-primary);}
.recorditem .hisitem .decbx {flex:1 0 auto; width: 1%;}
.recorditem .hisitem .dec {display: block; font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); color: var(--color-body); }
.recorditem .hisitem .dec + .dec {margin-top: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px);}

.history-wrap { position:relative; color: #454545; padding-top: 150px;}
.history-wrap:before {top:160px; bottom:0; position:absolute; left:clamp(350px, calc( 660 / var(--inner) * 100vw ), 660px); width:1px; background-color:#ddd; content:"";}
.history-item {padding-bottom:clamp(50px, calc( 100 / var(--inner) * 100vw ), 100px); display:flex; align-items:initial;}
.history-item:last-child {padding-bottom:0;}
.history-item.bigpd {padding-bottom: clamp(180px, calc( 235 / var(--inner) * 100vw ), 235px);}
.history-item .history-year {position:relative; top:0; left:0; width:clamp(350px, calc( 660 / var(--inner) * 100vw ), 660px); }
.history-item .imgtxtbx {position: absolute; left: 0; top: -130px;margin-right: 20%;}
.history-item .imgtxtbx .title {margin-bottom: clamp(25px, calc( 70 / var(--inner) * 100vw ), 70px); font-size:clamp(24px, calc( 60 / var(--inner) * 100vw ), 60px); font-weight: 800; color: var(--color-primary); line-height: 1;}
.history-month-box {padding-left:40px; flex:1; position: relative;}
.histofy-detailbx .year {margin-bottom:15px; font-size: clamp(22px, calc( 30 / var(--inner) * 100vw ), 30px); font-weight: bold; color: #242424;}
.history-detail {margin-bottom:15px; display:flex; font-size:clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); letter-spacing:-.03em; font-weight:500; transition:all 0.5s ease; line-height: 1.5;}
.history-detail:last-child {margin-bottom:0;}
.history-detail .month {width:clamp(60px, calc( 100 / var(--inner) * 100vw ), 100px); font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); display:block; font-weight: bold;}
.history-detail .decbx {flex:1;}
.history-detail .dec {font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); color: var(--color-body);}
.history-item .dots {width:22px; height:20px; top:9px; left:-11px; margin:0; position:absolute; background: url(../images/sub/bullet-img.png) no-repeat; background-size: contain;}
@media (max-width: 1600px) {
    .history-wrap {padding-top: 100px;}
    .history-item .imgtxtbx {top: -90px;}
    .history-wrap:before {top: 110px;}
}
@media (max-width: 1024px) {
    .history-wrap {padding-top: 0;}
    .history-item .imgtxtbx {top: 0px;}
    .history-wrap:before {top: 10px;}
    .history-item .dots {width: 18px; height: 16px; left: -9px;}
    .history-item .history-year {width: 300px;}
    .history-wrap:before {left: 300px;}
}

@media (max-width: 640px) {
    .history-item {display: block;}
    .history-item.bigpd {padding-bottom: 50px;}
    .history-item .imgtxtbx {position: inherit; margin-bottom: 20px;}
    .history-wrap:before {display: none;}
    .history-month-box {padding-left:0;}
    .history-item .dots {width: 16px; height: 14px; left: 0; top: 7px;}
    .histofy-detailbx .year {padding-left: 30px;}
}
.orgwrap {max-width: 1920px; width: 100%; margin: 0 auto; padding: clamp(30px, calc( 70 / var(--inner) * 100vw ), 70px) 16px; text-align: center; background: linear-gradient(to top , #e9f0fb , #f7fafe); border-radius: clamp(100px, calc( 300 / var(--inner) * 100vw ), 300px) 0 0 0;}

.maptblbox table {border-top: 1px solid #242424;}
.maptblbox table th,
.maptblbox table td {padding:clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px) clamp(12px, calc( 15 / var(--inner) * 100vw ), 15px); text-align: center;font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px);border-right: 1px solid #ddd;border-bottom: 1px solid #ddd;}
.maptblbox table th:last-child,
.maptblbox table td:last-child {border-right: 0;}
.maptblbox table th {background: #f6f9fe;font-weight: bold;}
.maptblbox table td {color: #505050;}
.maptblbox .txt1 {color: #505050; line-height: 2;}
.maptblbox .txt2 {padding-top:clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px); font-size: clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px); color: #999999; line-height: 1.6;}
.maptblbox .btn-map2 {display: inline-flex; align-items: center; justify-content: center; width:clamp(100px, calc( 120 / var(--inner) * 100vw ), 120px); height: clamp(38px, calc( 45 / var(--inner) * 100vw ), 45px); font-size: clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px); font-weight: 500; border-radius: 22px; background: #eeeeee;color: #242424;border: 0;}
.maptblbox .btn-map2:hover {background: var(--color-primary); color: #fff;}

.mapcarbox {padding-top: clamp(50px, calc( 110 / var(--inner) * 100vw ), 110px);}
.carinfoitem {display: flex; flex-wrap: wrap; padding:clamp(25px, calc( 50 / var(--inner) * 100vw ), 50px) 0; border-bottom: 1px solid #ddd;}
.carinfoitem:first-child {padding-top: 0;}
.carinfoitem .infobox {flex: 1 0 50%; max-width: 50%; }
.carinfoitem .tit {font-size:clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 500; color: var(--color-body);} 
.carinfoitem .declist {padding-top: clamp(12px, calc( 17 / var(--inner) * 100vw ), 17px);}
.carinfoitem .decitem {color: var(--color-body); line-height:1.625; padding-left: 0.6em; text-indent: -0.6em;}

.commpdtop {padding-top: clamp(50px, calc( 140 / var(--inner) * 100vw ), 140px);}

.commlogotop {padding: clamp(50px, calc( 100 / var(--inner) * 100vw ), 100px) 0 ; margin-bottom: clamp(30px, calc( 100 / var(--inner) * 100vw ), 100px); position: relative; text-align: center; }
.commlogotop:after {position: absolute; content: ''; left: 50%; top:50%; transform: translate(-50%, -50%);width: clamp(200px, calc( 400 / var(--inner) * 100vw ), 400px); height: clamp(172px, calc( 343 / var(--inner) * 100vw ), 343px); background: url(../images/sub/sub2_5-logo.png) no-repeat 50% 50% / contain;}
.commlogotop .title {font-size:clamp(18px, calc( 32 / var(--inner) * 100vw ), 32px); font-weight: 600; line-height: 1.4;}
.commlogotop .dec {padding-top:clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px); font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); color: var(--color-body); line-height: 1.66;}

.sub2_5_2 {margin-bottom: clamp(60px, calc( 155 / var(--inner) * 100vw ), 155px);}

.cardbglist {display: flex; flex-wrap: wrap; margin:-20px;}
.cardbgitem {flex: 1 0 33.33%; max-width: 33.33%; padding: 20px;}
.cardbgitem .inner {padding:clamp(25px, calc( 40 / var(--inner) * 100vw ), 40px) 15px; border-radius:24px; text-align: center; height: 100%; letter-spacing: -0.6px;}
.cardbgitem:nth-child(odd) .inner {background: linear-gradient(to top, #e9f0fb, #f7fafe);}
.cardbgitem:nth-child(even) .inner {background: #f8f8f8;}
.cardbgitem .inner .name {margin-bottom:clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px); font-size: clamp(16px, calc( 24 / var(--inner) * 100vw ), 24px); color: var(--color-primary); font-weight: bold;}
.cardbgitem .inner .icn img {width: clamp(60px, calc( 88 / var(--inner) * 100vw ), 88px);}
.cardbgitem .inner .dec {padding-top:clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px); font-size: clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px); color: var(--color-body); line-height:1.625;}
.cardbgitem .inner .dec .small {font-size: clamp(12px, calc( 14 / var(--inner) * 100vw ), 14px);}
.cardbglist.ty2 {margin: -14px;}
.cardbglist.ty2 .cardbgitem {flex:1 0 20%; max-width: 20%; padding: 14px;}
.cardbglist.ty3 .cardbgitem {flex:1 0 25%; max-width: 25%; }
.cardbglist.ty3 .inner .dec {font-size: clamp(16px, calc( 24 / var(--inner) * 100vw ), 24px);}
.cardbglist.ty4 .cardbgitem {flex:1 0 33.33%; max-width: 33.33%; }


.steplist {display: flex; flex-wrap: wrap; margin:-28px;}
.stepitem {flex: 1 0 25%; max-width: 25%; padding: 25px;}
.stepitem .inner {display: flex; flex-direction: column; justify-content: center; align-items: center; padding:clamp(15px, calc( 24 / var(--inner) * 100vw ), 24px) 15px; position: relative; border: 1px solid #ddd;border-radius: 8px; height: 100%; text-align: center;}
.stepitem:not(:last-child) .inner:after {position: absolute; content: ''; right: -40px; top: 50% ; transform: translateY(-50%); width:29px; height: 18px; background: url(../images/sub/right-arrow.png) no-repeat 50% 50% / contain; }
.stepitem .inner span {display: block;}
.stepitem .inner .step {color: var(--color-primary); font-weight: bold;}
.stepitem .inner .txt1 {padding-top: 7px; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); color: var(--color-body); font-weight: bold; }
.stepitem .inner .txt2 {padding-top: 7px; font-size: clamp(13px, calc( 15 / var(--inner) * 100vw ), 15px); color: var(--color-body);}
.steplist.ty2 .stepitem {flex: 1 0 33.33%; max-width: 33.33%;}
.steplist.ty2 .stepitem .inner .txt1 {line-height: 2; font-weight: 400;}

.hytxtitem { padding-left: 0.6em; text-indent: -0.6em; font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 500; color: var(--color-body);}
.hytxtitem  + .hytxtitem  {margin-top: clamp(10px, calc( 13 / var(--inner) * 100vw ), 13px);}

.btnwrap {margin-top:clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px);}
.btnlist {display: flex; justify-content: center; margin:-10px;}
.btnitem { padding: 10px; }
.btnitem .btn-pcak {display: inline-flex; align-items: center; justify-content: center;padding: 0 15px; min-width:clamp(200px, calc( 240 / var(--inner) * 100vw ), 240px); height: clamp(40px, calc( 50 / var(--inner) * 100vw ), 50px); border-radius: 25px; font-weight: 500;color: #fff;text-align: center;}
.btnitem .btn-pcak.medium {min-width: auto; width: clamp(120px, calc( 160 / var(--inner) * 100vw ), 160px) !important;}
.btnitem:nth-child(1) .btn-pcak {background: var(--color-primary);}
.btnitem:nth-child(2) .btn-pcak {background: #666666;}

.subprditem + .subprditem {margin-top:clamp(30px, calc( 50 / var(--inner) * 100vw ), 50px);}
.subprditem .inner {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; padding: clamp(30px, calc( 55 / var(--inner) * 100vw ), 55px) clamp(25px, calc( 80 / var(--inner) * 100vw ), 80px); position: relative; background: linear-gradient(to top, #e9f0fb, #f7fafe);border-color: transparent;border-radius: 30px; transition: all 0.3s;} 
.subprditem .inner:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border:clamp(2px, calc( 4 / var(--inner) * 100vw ), 4px) solid var(--color-primary);border-radius: 30px; opacity: 0;}
.subprditem .textbx {display: flex; align-items: center; flex-wrap: wrap;}
.subprditem .textbx .icn {flex: 1 0 clamp(80px, calc( 170 / var(--inner) * 100vw ), 170px); max-width: clamp(80px, calc( 170 / var(--inner) * 100vw ), 170px);}
.subprditem .textbx .icn img {width: clamp(50px, calc( 88 / var(--inner) * 100vw ), 88px);}
.subprditem .textbx .text {flex: 1 0 auto; width: 1%; line-height: 1.625;}
.subprditem .name {display: block; margin-bottom:15px; font-size:clamp(18px, calc( 32 / var(--inner) * 100vw ), 32px); font-weight: 600;}
.subprditem .txt1 {font-size: clamp(16px, calc( 22 / var(--inner) * 100vw ), 22px); font-weight: 500; color: var(--color-body);}
.subprditem .txt2 {font-size:clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: bold;}
.subprditem .txt3 {font-size:clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px); color: var(--color-body);}
.subprditem .txt4 {font-size:clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px); color: var(--color-body);}
.subprditem .pt {padding-top: 10px;}
.subprditem .btn-link {display: inline-flex; align-items: center; justify-content: center; width:clamp(120px, calc( 175 / var(--inner) * 100vw ), 175px); height: clamp(40px, calc( 50 / var(--inner) * 100vw ), 50px); font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); border-radius: 8px; background: var(--color-primary); color: #fff;}
.subprditem .inner:hover {background: #fff;}
.subprditem .inner:hover:after {opacity: 1;}
.subprditem .inner:hover .name {color: var(--color-primary);}

.sub5_4_bg {padding:clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px) 20px; margin-bottom: clamp(40px, calc( 100 / var(--inner) * 100vw ), 100px); text-align: center;background: linear-gradient(to top, #e9f0fb, #f7fafe); border-radius: 30px;}
.sub5_4_bg .title {margin-bottom:clamp(15px, calc( 35 / var(--inner) * 100vw ), 35px); font-size:clamp(18px, calc( 32 / var(--inner) * 100vw ), 32px); font-weight: 600;}
.sub5_4_bg .title .main-color {display: inline-block; position: relative;}
.sub5_4_bg .title .main-color:after {position: absolute; content: ''; left: -15px; top: -10px; width:23px; height: 19px; background: url(../images/sub/point.png) no-repeat; background-size: contain;}
.sub5_4_bg .dec {margin-top: 10px; font-size:clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); color: var(--color-body); line-height: 1.5;}
.sub5_4_1 + .sub5_4_1 {margin-top: clamp(40px, calc( 100 / var(--inner) * 100vw ), 100px);}

.sec6_1_1 {position: relative; padding-bottom: clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px); max-width: 1920px; width: 100%; margin: 0 auto;}
.sec6_1_1:after {position: absolute;content: ''; left: 0; bottom: 0;max-width: 51%; width: 100%; height: clamp(300px, calc( 500 / var(--inner) * 100vw ), 500px); border-radius: 0 150px 0 0;background: var(--color-primary);z-index: -1;}
.sec6_1_1 .flxWrap {align-items: flex-end;position: relative; }
.sec6_1_1 .flxWrap:after {position: absolute; content: ''; right: 0; top:0; width: clamp(200px, calc( 400 / var(--inner) * 100vw ), 400px); height: clamp(172px, calc( 343 / var(--inner) * 100vw ), 343px); background: url(../images/sub/sub2_5-logo.png) no-repeat 50% 50% / contain;}
.sec6_1_1 .imgbx {flex: 1 0 40%; max-width: 40%; margin-right:clamp(30px, calc( 200 / var(--inner) * 100vw ), 200px);}
.sec6_1_1 .textbx {flex: 1 0 auto; width: 1%; padding-bottom: clamp(30px, calc( 50 / var(--inner) * 100vw ), 50px); }
.sec6_1_1 .textbx .title {font-size: clamp(19px, calc( 32 / var(--inner) * 100vw ), 32px); font-weight: 600;}
.sec6_1_1 .textbx .dec {padding-top:clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); color: var(--color-body); line-height: 1.6;}

.sec6_1_2 {margin-top: clamp(50px, calc( 160 / var(--inner) * 100vw ), 160px);}
.sec6_1_2 .activeitem {padding:clamp(25px, calc( 50 / var(--inner) * 100vw ), 50px) 0; border-bottom: 1px solid #ddd;}
.sec6_1_2 .activeitem .inner {display: flex; flex-wrap: wrap; align-items: center;}
.sec6_1_2 .activeitem .imgbx {flex: 1 0 22%; max-width: 22%; margin-right:clamp(20px, calc( 150 / var(--inner) * 100vw ), 150px);}
.sec6_1_2 .activeitem .textbx {flex: 1 0 auto; width: 1%;}
.sec6_1_2 .activeitem .tit {margin-bottom: clamp(15px, calc( 38 / var(--inner) * 100vw ), 38px); font-size:clamp(18px, calc( 30 / var(--inner) * 100vw ), 30px); font-weight: 600;}
.sec6_1_2 .activeitem .numflx {display: flex; flex-wrap: wrap;}
.sec6_1_2 .activeitem .numlist2 {flex: 1 0 50%; max-width: 50%;}
.sec6_1_2 .activeitem .numlist2.wid-100 {flex: 1 0 100%; max-width: 100%;}
.sec6_1_2 .activeitem .numitem2 {display: flex; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px);}
.sec6_1_2 .activeitem .numitem2 + .numitem2 {margin-top: 12px;}
.sec6_1_2 .activeitem .num {flex: 1 0 clamp(30px, calc( 35 / var(--inner) * 100vw ), 35px); max-width: clamp(30px, calc( 35 / var(--inner) * 100vw ), 35px); color:var(--color-primary);font-weight: bold;}
.sec6_1_2 .activeitem .dec {flex: 1 0 auto; width: 1%; color: var(--color-body);}

.modal {padding: 0; max-width: 700px; border-radius: 18px; width: 100%;} 
.modal.small {max-width: 500px;}
.modal .modal-head {padding: clamp(12px, calc( 16 / var(--inner) * 100vw ), 16px) clamp(25px, calc( 48 / var(--inner) * 100vw ), 48px); background: var(--color-primary);  border-radius: 18px 18px 0 0; }
.modal .modal-head .tit {font-size: clamp(20px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: bold; color: #fff;}
.modal .modal-content {padding:clamp(25px, calc( 50 / var(--inner) * 100vw ), 50px) clamp(25px, calc( 48 / var(--inner) * 100vw ), 48px); border-radius:0 0 18px 18px;}
.telpoplist {display: flex; flex-wrap: wrap; margin:-23px -10px;}
.telpopitem {flex: 1 0 50%; max-width: 50%; padding: 23px 10px;}
.telpopitem.wid-100 {flex: 1 0 100%; max-width: 100%;}
.telpopitem .linktel {display: flex;}
.telpopitem .icn {flex:1 0 clamp(55px, calc( 68 / var(--inner) * 100vw ), 68px); max-width: clamp(55px, calc( 68 / var(--inner) * 100vw ), 68px);}
.telpopitem .icn img {width: clamp(35px, calc( 48 / var(--inner) * 100vw ), 48px);}
.telpopitem .telbx {flex: 1 0 auto; width: 1%; padding-top: clamp(4px, calc( 8 / var(--inner) * 100vw ), 8px);}
.telpopitem .telbx span {display: block;}
.telpopitem .telbx .txt1 {font-size:clamp(18px, calc( 22 / var(--inner) * 100vw ), 22px); font-weight: bold;}
.telpopitem .telbx .txt2 {padding-top: 6px; font-size:clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); }
.telpopitem .notice {padding-top:clamp(15px, calc( 35 / var(--inner) * 100vw ), 35px); padding-left:clamp(55px, calc( 68 / var(--inner) * 100vw ), 68px) ; color: #454545;}