@charset "utf-8";

.contents.service-list-contents {
    overflow: unset;
}

.header-wrap .page-title {
    font-size: 14px;
    letter-spacing: -1px;
}

.button-item.button-primary {
    position: relative;
    background-color: #1943d4;
    border-color: #1943d4;
    font-weight: 500;
}

.button-item.button-l.button-primary > .label-txt {
    color: #fff;
    font-size: 14px;
}

.service-subcopy {
    padding: 16px;
}

.table-flex .row .service-content.mg-r-1u {
   width: 100%;
   margin-right: 4px;
}

.table-flex .row .service-content.mg-l-1u {
   width: 100%;
   margin-left: 4px;
}

.button-square {
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* background-color: #f9f9f9; */
    border-radius: 8px;
    width: 100%;
    height: auto;
    padding: 0 0 0 4px;
    /* box-shadow: 0 1px 1px 0 rgb(0, 0, 0, 10%); */
}

.button-square .flex-half {
    flex: 1;
}

.button-square .label-txt {
    position: relative;
    padding: 14px 0 14px 16px; 
    z-index: 1;
    /* background-color: #fff; */
    text-align: left;
    line-height: 140%;
}

.inner-shadow {
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.inner-shadow::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 90%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, .15);
    border-radius: 100%;
    filter: blur(8px);
    z-index: -1;
}
/* 
.inner-shadow::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
} */



.label-thumb.icon-assist01 {
    display: inline-block;
    width: 48px; 
    height: 68px;
    background-size: 48px 48px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: url(/images/mv/plan/ico_assist01.png);
}

.label-thumb.icon-assist02 {
    display: inline-block;
    width: 48px; 
    height: 68px;
    background-size: 48px 48px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: url(/images/mv/plan/ico_assist02.png);
}

.label-thumb.icon-assist03 {
    display: inline-block;
    width: 48px; 
    height: 48px;
    background-size: 48px 48px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: url(/images/mv/plan/ico_assist03.png);
}

.label-thumb.icon-assist04 {
    display: inline-block;
    width: 48px; 
    height: 48px;
    background-size: 48px 48px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: url(/images/mv/plan/ico_assist04.png);
}

.label-thumb.icon-assist05 {
    display: inline-block;
    width: 48px; 
    height: 48px;
    background-size: 48px 48px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: url(/images/mv/plan/ico_assist05.png);
}

.label-thumb.icon-assist06 {
    display: inline-block;
    width: 48px; 
    height: 48px;
    background-size: 48px 48px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: url(/images/mv/plan/ico_assist06.png);
}

.label-thumb.icon-assist07 {
    display: inline-block;
    width: 48px; 
    height: 48px;
    background-size: 48px 48px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: url(/images/mv/plan/ico_assist07.png);
}



.button-square .label-txt {
    font-size: 14px;
    font-weight: 500;
    margin: 0;
}

.border-b-neutral2 {
    border-bottom: 1px solid #f1f1f1;
}

.label-thumb.icon-counsel05 {
    display: inline-block;
    width: 24px; 
    height: 24px;
    background-image: url(/images/mv/plan/ico_counsel05.png);
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: 0 0;
}

.list-faq-accordian button {
    width: 100%;
    padding-left: 0;
    text-align: left;
}

.tab-hero {
    width: 100%;
    height: 45px;
    line-height: 45px;
    background: #fff;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    left: 0;
    overflow: hidden;
    font-size: 0;
    z-index: 800;
}

.tab-hero.no-sticky {
    position: relative;
    top: auto;
    z-index: auto;
}

.tab-hero.indicator-off::before {
    display: none;
}

.tab-hero::before {
    content: '';
    display: block;
    width: 100%;
    height: 0;
    border-bottom: 1px solid #d9dbdc;
    position: absolute;
    left: 0;
    bottom: 0;
}

.tab-hero > a {
    display: inline-block;
    text-decoration: none;
    width: auto;
    height: inherit;
    line-height: 44px;
    text-align: center;
    color: #adadad;
    font-size: 14px;
    font-weight: 600;
    padding: 0 12px;
    position: relative;
    cursor: default;
    white-space: nowrap;
}

.tab-hero:not(.on-layer) > a:active {
    background: rgba(0, 0, 0, .05);
}

.tab-hero > a.on {
    color: #121212;
    font-weight: 600;
}

.tab-hero > a.disabled {
    color: #e3e5e8;
    pointer-events: none;
}

.tab-hero > .indicator {
    position: absolute;
    display: block;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background-color: #121212;
    min-width: 0;
    transition: left ease-in-out .16s, width ease-in-out .16s;
}

.tab-hero > .indicator.off {
    display: none;
}

.tab-hero.list-size-equal > a:first-of-type:nth-last-of-type(0) { width: 100%; }

.tab-hero.list-size-equal > a:first-of-type:nth-last-of-type(2),
.tab-hero.list-size-equal > a:first-of-type:nth-last-of-type(2) ~ a { width: calc(100% / 2); }

.tab-hero.list-size-equal > a:first-of-type:nth-last-of-type(3),
.tab-hero.list-size-equal > a:first-of-type:nth-last-of-type(3) ~ a { width: calc(100% / 3); }

.tab-hero.list-size-equal > a:first-of-type:nth-last-of-type(4),
.tab-hero.list-size-equal > a:first-of-type:nth-last-of-type(4) ~ a { width: calc(100% / 4); }

.tab-hero.list-size-equal > a:first-of-type:nth-last-of-type(5),
.tab-hero.list-size-equal > a:first-of-type:nth-last-of-type(5) ~ a { width: calc(100% / 5); }

.tab-hero.list-size-equal > a:first-of-type:nth-last-of-type(6),
.tab-hero.list-size-equal > a:first-of-type:nth-last-of-type(6) ~ a { width: calc(100% / 6); }

.util-wrap .button-gnb {
    display: none;
}

.util-wrap .button-gnb.active {
    display: block;
}

.section-switch {
    position: absolute;
    right: 16px;    
    top: 18px;
    border-radius: 12px;
    border-bottom-right-radius: 0;    
    border-bottom-left-radius: 0;
    /* background-color: #f8f8f8; */
    /* background-color: #f9f9f9; */
}

/* .section-switch::before,
.section-switch::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: #f9f9f9;
    border-radius: 12px;
} */

.section-switch::before{
    background-color: #f9f9f9;
    left: -7px;
    top: 30px;
}


.section-switch::after {
    background-color: #fff;
    left: -16px;
    top: 22px;
}


.section-switch .switch {
    position: relative;
    display: block;
    width: 140px;
    height: 38px;
    margin: auto;
    background-color: transparent
}

.section-switch .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}

.section-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background-color: #f8f8f8; */
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 38px;
}

.section-switch .slider:before {
    position: absolute;
    content: "";
    height: 30px;
    width: 66px;
    left: 10px;
    bottom: 4px;
    /* background: linear-gradient(38deg, rgb(25 67 212) 50%, rgba(108, 68, 255, 1) 100%); */
    background-color: rgba(25, 67, 212, 1);
    transition: .4s;
    border-radius: 28px;
    /* box-shadow: 0 1px 1px 0 rgb(0, 0, 0, 10%); */
    background: linear-gradient(to left, rgba(25, 67, 212, 1) 0%, rgb(77 117 255 / 90%) 100%);
    box-shadow: 0px 4px 8px #d8e0ff;

}

.section-switch input:checked + .slider:before {
    transform: translateX(66px);
    width: 54px;
    background: linear-gradient(to left, rgb(0 160 134) 0%, rgb(19 180 124) 100%);
     /* background-color: rgb(0, 182, 105); */
    transition: .4s;
    /* box-shadow: 0 1px 1px 0 rgb(0, 0, 0, 10%); */
}

.section-switch .label-txt {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    color: #101840;
    pointer-events: none; /* 레이블 클릭 시 스위치 작동 방지 */
    padding: 8px 20px;
}

.section-switch .label-txt > span {
    opacity: 1;
    transition: opacity 0.4s;
}

.section-switch input:checked + .slider + .label-txt span,
.section-switch input + .slider + .label-txt {
    color: #fff;
}

.section-switch input:checked + .slider + .label-txt,
.section-switch input + .slider + .label-txt span {
    color: #adadad;
}

.hero-contents {
    position: relative;
    display: none;
    width: 100%;
    height: auto;
}

.hero-contents.on-modal-with-header {
    padding-top: 45px;
}

.hero-contents.on {
    display: block;
}



.list-myinsure-info .insure-info-more {
    display: block;
    position: relative;
    padding-left: 40px;
}

.list-myinsure-info .insure {
    overflow: hidden;
    position: absolute;
    display: inline-block;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 16px;
    /* box-shadow: 0 1px 1px 0 rgb(0 0 0 / 10%); */
}

.list-myinsure-info .insure-amount {
    letter-spacing: -.5px;
}

.list-myinsure-info .insure-name {
    word-break: break-word;
}

.header-wrap.mv-logo {
	background-image: url(../../images/common/header-logo.png);
    background-size: auto 22px;
    background-position: 22px 50%;
    background-repeat: no-repeat;
}

.tab-item.sub-tab {
    display: flex;
    width: auto;
    align-items: center;
    overflow: initial;
}

.tab-item.sub-tab::before,
.tab-item.sub-tab .indicator {
    display: none;
}

.tab-item.sub-tab a {
    height: 28px;
    margin-right: 4px;
    line-height: 26px;
    border-radius: 19px;
    color: #101840;
    font-weight: 600;
}

.tab-item.sub-tab a.on {
    color: #fff;
    /* background-color: #1943d4; */
    font-weight: 600;
    /* box-shadow: 0 1px 1px 0 rgb(0 0 0 / 10%); */
    background: linear-gradient(to left, rgba(25, 67, 212, 1) 0%, rgb(77 117 255 / 90%) 100%);
    box-shadow: 0px 4px 8px #d8e0ff;
} 

.hero-wrap {
    overflow: hidden;
    position: relative;
    background-color: #fff;
    border-radius: 16px;
    /* border-top-right-radius: 0; */
    /* box-shadow: 0 1px 1px 0 rgb(0, 0, 0, 10%); */
}

.hero-wrap .graph-type-case6 {
    height: 177px;
}

.account-button-wrap {
    padding-top: 220px;
}

.account-button-wrap::after,
.account-button-wrap::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 58px;
    height: 195px;
    background-image: url(/images/promotion/img-account1.png);
    background-size: auto 200px;
    background-repeat: no-repeat;
    background-position: center 14px;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 88%, rgba(0,0,0,0) 100%);
}

.account-button-wrap::before {
    z-index: 1;
}

.account-button-wrap::after {
    /* filter: blur(24px); */
    opacity: .3;
}

.account-button-wrap .button-account {
    position: absolute;
    bottom: 24px;
    left: 16px;
    right: 16px;
    z-index: 4;
    background: linear-gradient(to left, rgba(25, 67, 212, 1) 40%, rgb(77 117 255 / 90%) 100%);
    box-shadow: 0px 8px 8px #d8e0ff;
}

.find-insure,
.my-insure {
    display: none;
}

.find-insure.active,
.my-insure.active {
    display: block;
}

.section-hero-graph {
    overflow: hidden;
    position: relative;
    margin-top: 8px;
    background-color: #f9f9f9;
    border-radius: 16px;
    /* border-top-right-radius: 0; */
    /* box-shadow: 0 1px 1px 0 rgb(0, 0, 0, 10%); */
}

.graph-type-case1 .graph-rod {
    position: relative;
    font-size: 12px;
    font-weight: 700;
    height: 40px;
} 

.graph-type-case1  {
    margin-left: 40px;
}

.graph-type-case1 .wrap-road {

}

.graph-type-case1 .graph-rod {
    background-color: transparent;
    background-image: linear-gradient(to left, rgba(236, 236, 236, 1) 0%, rgba(236, 236, 236, 1) 100%);
    box-shadow: inset 0 0 2px rgba(0 0 0 / 10%);
    border-bottom: 1px solid #fff;
    border-radius: 12px;
}

.graph-type-case1 .wrap-road.my-graph .graph-rod {
    background-image: linear-gradient(to left, rgba(25, 67, 212, 1) 40%, rgba(25, 67, 212, .4) 100%);    
    box-shadow: inset 0 0 1px rgb(111, 121, 156);
}

.graph-type-case1 .graph-rod .label-txt {
    position: absolute;
    left:  -40px;
    top: 50%;
    transform: translateY(-50%)
}

.graph-type-case1 .graph-rod .won {
    position: absolute;
    right:  14px;
    top: 50%;
    transform: translateY(-50%)
}

.graph-type-case1 .wrap-road.my-graph .won {
    color: #fff;
}

.graph-type-case1 .wrap-road {
    width: 100%;
    border-radius: 12px;
    box-shadow: inset 0 0 3px rgba(187, 187, 187, 1);
}

.graph-type-case1 .wrap-road.my-graph {
    width: 100%;
    border-radius: 12px;
    box-shadow: inset 0 0 3px rgba(25, 67, 212, .8);
}

.wrap-tab-myinsure {
    border-radius: 12px;
    background-color: #f9f9f9;
    padding: 4px
}

.wrap-tab-myinsure .tab-my-insure {
    overflow: unset;
    background-color: transparent;
    height: 34px;
    line-height: 34px;
}

.tab-my-insure .item {
    height: 34px;
    line-height: 34px;
    color: #adadad;
    font-weight: 500;
    background-color: transparent;
}

.tab-my-insure .item.on {
    color: #fff;
    font-weight: 500;
}

.tab-my-insure .indicator {
    top: 0;
    bottom: 0;
    height: auto;
    z-index: -1;
    background: linear-gradient(to left, rgba(25, 67, 212, 1) 0%, rgb(77 117 255 / 90%) 100%);
    box-shadow: 0px 4px 8px #d8e0ff;
    border-radius: 16px;
}

.tab-my-insure.tab-item::before {
    display: none;
}

.insure-info-more .wrap-company {
    display: flex;
    align-items: center;
}

.insure-info-more .label-company-logo.insure {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.insure-info-more .label-company-name {
    margin-left: 8px;
}

.graph-gauge .gauge {
    height: 6px;
    border-radius: 4px;
    background-color: #f9f9f9;
}

.graph-gauge .gauge .inner-gauge {
    display: block;
    width: 0;
    height: 6px;
    border-radius: 4px;
    background-color: #1943d4;
    transition: all 0.6s ease-in;
}

.graph-gauge .wrap-label {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
}

.graph-gauge .wrap-label .inner-txt {
    color: #1943d4;
}

.graph-gauge .wrap-label .label-txt {
    color: #868e96;
}

.bg-gray {
    background-color: #f9f9f9;
}

.section-insure-amount .bg-gray {
    border-radius: 8px;
}

.modal-item .modal-pannel .modal-header .button-popup-close {
    right: initial;
    left: 12px;
}

[data-ref=lendingDrawer].drawer .banner-wrap {
    width: 100%; 
    height: 275px;
    background-image: url(/images/common/banner-main.png);
    background-size: 375px auto;
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-color: #2b2b2b;
}

[data-ref=lendingDrawer].drawer.modal-item .modal-pannel .modal-action {
    padding-top: 0;
    background-color: #2b2b2b;
}

[data-ref=lendingDrawer].drawer .list-size-equal {
    display: block;
}

[data-ref=lendingDrawer].drawer .modal-pannel .list-size-equal > li {
    width: 100%;
    margin-left: 0;
}

[data-ref=lendingDrawer].drawer .list-size-equal > li:first-child:nth-last-child(2) ~ li .button-item {
    margin-top: 4px;
    border: 0;
}

[data-ref=lendingDrawer].drawer .modal-action .button-item {
    border: 1px solid #1943d4;
    font-weight: 500;
    background-color: #2b2b2b;
    color: #fff;
}

[data-ref=lendingDrawer].drawer .modal-action .button-item.button-primary {
    background-color: #1943d4;
    color: #fff;
}

[data-ref=lendingDrawer].drawer .button-item.button-l > .label-txt {
    font-size: 14px;
}

.icon-web {
    position: relative;
    padding-left: 18px;
}

.icon-web::before {
    content: "";
    display: inline-block;
    position: absolute;
    left: 2px;
    top: 50%;    
    width: 14px;
    height: 14px;
    margin-top: -7px;    
    background-image: url(../../images/onboarding/icon-web.png);    
    background-size: 14px 14px;
    background-position: left top;
}

.legal-coypright-wrap {
    padding-top: 44px;
    background-image: url(../../images/onboarding/footer-logo.png);    
    background-size: auto 22px;
    background-position: center 6px;   
    background-repeat: no-repeat; 
}

.radio-item input[type="radio"]:checked ~ .labelling .label-txt {
    color: #1943d4;
}

.section-insure-amount.hide {
    display: none;
}

[data-ref=myInsure].modal-item .modal-pannel .modal-header,
[data-ref=myInsure].modal-item .modal-pannel .modal-body,
[data-ref=myInsure].modal-item .modal-pannel .modal-action {
    background-color: #f9f9f9;
}

.content-pannel {
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px 2px rgb(93 93 93 / 4%);   
}



.modal-my-insure .bg-gray {
    border-radius: 12px;
}

.graph-type-case6.graph-rod-wrap .graph-rod {
    height: 109px;
    justify-content: space-around;
}

.graph-type-case6.graph-rod-wrap .graph-rod::before {
    display: none;
}

.graph-type-case6.graph-rod-wrap .graph-rod .rod {
    width: 28px;
    background-color: #ececec;
    border-radius: 12px;
}

.graph-type-case6.graph-rod-wrap .graph-rod .rod:nth-child(1) {
    background-color: #ccc;
    background-image: linear-gradient(to bottom, rgba(221, 221, 221, 1) 40%, rgba(221, 221, 221, .6) 100%);
    background: linear-gradient(38deg, rgba(0, 182, 105, 1) 44%,  rgba(0, 160, 136, 1) 88%,  rgba(0, 115, 254, 1) 100%);
    box-shadow: inset 0 0 2px #00a086;
}

.graph-type-case6.graph-rod-wrap .graph-rod .rod:nth-child(1) .label-txt,
.graph-type-case6.graph-rod-wrap .graph-rod .rod:nth-child(1) .skeleton-copy {
    color: #101840;
}

.hero-wrap .graph-type-case4 .wrap-road.my-graph .graph-rod {
    width: 0;
    background: linear-gradient(to left, rgba(25, 67, 212, 1) 0%, rgb(77 117 255 / 90%) 100%);
    box-shadow: inset 0 0 1px rgb(0 0 0 / 40%);
}

.banner-list {
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.banner-list::after {
    display: none;
}

.banner-list .banner-item {
    flex: 4;
    border-radius: 8px;
}

.banner-list .banner-item .label-wrap {
    display: block;
    position: relative;
    /* height: 80px; */
    background-position: 50% 6px;
    /* background-color: #f9f9f9; */
    /* box-shadow: 0 1px 1px 0 rgb(0 0 0 / 10%); */
    background-size: 40px auto;
    border-radius: 12px;
}

.banner-list .banner-item .label-wrap .thumb-icon {
    position: relative;
    display: block;
    /* background-color: #f9f9f9; */
    /* box-shadow: 0 1px 1px 0 rgb(0 0 0 / 10%); */
    border-radius: 12px;
    width: 48px;
    height: 48px;
    margin: auto;
    /* z-index: -1; */
}



.banner-list .banner-item .label-wrap .thumb-icon.hot::after {
    content: "HIT";
    display: inline-block;
    position: absolute;
    left: 50%;
    margin-left: -16px;
    top: -4px;
    width: 24px;
    height: 16px;
    font-size: 10px;
    line-height: 16px;
    letter-spacing: -1px;
    text-align: center;
    color: #fff;
    border-top-left-radius: 8px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 0;
    background: linear-gradient(38deg, rgb(0, 182, 105) 66%, rgba(0, 115, 254, 1) 100%);
    box-shadow: 0 1px 1px 0 rgb(0 0 0 / 10%);
    z-index: 0;
    transform: translateX(-50%);
}

.subcopycase-list .subcopycase-item .label-wrap {
    align-items: center;
}

.subcopycase-list .subcopycase-item .label-wrap .new {
    display: flex;
    align-items: center;
    border-radius: 4px;
    color: rgba(25, 67, 212, 1);
    border: 1px solid rgba(25, 67, 212, 1);
    vertical-align: middle;
    padding: 1px 4px;
    font-size: 8px;
    height: 20px;
    margin-left: 8px;
    font-weight: 400;
}

.banner-list .banner-item .label-wrap .thumb-icon.new::after {
    content: "NEW";
    display: inline-block;
    position: absolute;
    left: 50%;
    margin-left: -16px;
    top: -4px;
    width: 24px;
    height: 16px;
    font-size: 10px;
    line-height: 16px;
    letter-spacing: -1px;
    text-align: center;
    color: #fff;
    border-top-left-radius: 8px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 0;
    background: linear-gradient(to left, rgba(25, 67, 212, 1) 0%, rgb(77 117 255 / 90%) 100%);
    box-shadow: 0 1px 1px 0 rgb(0 0 0 / 10%);
    z-index: 0;
    transform: translateX(-50%);
}
.banner-list .banner-item .label-copy-wrap {
    padding: 0;
    text-align: center;
}

.table-flex-list {
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.badge-hit {
    border-radius: 4px;
    color: #1943d4;
    border: 1px solid #1943d4;
    vertical-align: middle;
    padding: 1px 4px;
    font-size: 8px;
    margin-left: 4px;
    /* font-weight: 400; */
}

.button-square.hot::after {
    content: "HOT";
    display: inline-block;
    position: absolute;
    left: -8px;
    right: -8px;
    top: 11px;
    width: 53px;
    height: 16px;
    font-size: 10px;
    line-height: 16px;
    letter-spacing: -1px;
    text-align: center;
    color: #fff;
    /* border-top-left-radius: 8px; */
    /* border-top-right-radius: 0; */
    /* border-bottom-right-radius: 8px; */
    /* border-bottom-left-radius: 0; */
    font-weight: 500;
    /* background: linear-gradient(38deg, rgb(25 67 212) 10%, rgba(108, 68, 255, .6) 100%); */
    background: linear-gradient(to left, rgba(25, 67, 212, 1) 40%, rgb(77 117 255 / 90%) 100%);
    box-shadow: 0 0 6px 0 rgb(192 196 255);
    transform: rotate(-45deg) translateY(-50%);
    z-index: 1;
}

[data-ref="categoryModal"] .button-item.button-primary,
[data-ref=myInsure] .button-item.button-primary {
    background: linear-gradient(to left, rgba(25, 67, 212, 1) 40%, rgb(77 117 255 / 90%) 100%);
    box-shadow: 0px 8px 8px #d8e0ff;
}

.button-square .label-thumb {
    background-position: 50% 50%;
}


.wrap-bg  {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

}

.wrap-bg .bg {
    width: 44%;
    height: 124px;
    position: absolute;
    top: 100px;
    left: 50%;
    opacity: 0;
    border-radius: 80%;
    filter: blur(20px);
    animation: name 1.5s ease-out forwards .5s;
    transform:translateX(-50%);
}

.wrap-bg .bg-01 {      
    top: 40px;
    left: 170px;
    width: 180px;
    height: 180px;
    background-color: rgb(206 224 255);
} 

.wrap-bg .bg-02 {      
    top: 4px;
    left: 234px;
    width: 80px;
    height: 80px;
    background-color: rgba(242, 247, 255);
    filter: blur(12px);
} 

.wrap-bg .bg-03 {      
    top: 90px;
    left: 280px;
    width: 80px;
    height: 80px;
    background-color: rgba(242, 247, 255);
} 

.wrap-bg .bg-04 {      
    top: 250px;
    left: 160px;
    width: 180px;
    height: 180px;
    background-color: rgba(242, 247, 255);
} 


@keyframes name {
    0% {
      opacity: 0;
    }
  
    100% {
      opacity: .5;
    }
  }

.icon-container {
    position: absolute;
    left: 50%;
    top:  50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%) rotate(0deg);
    z-index: 3;
}

.icon-container .icon {
    position: absolute;
    width: 48px;
    height: 48px;
    background-size: 48px auto;
    background-position: 0 0;   
    background-repeat: no-repeat; 
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

.icon-container .icon-am1 {
    background-image: url(../../images/mv/plan/ico_assist01.png);    
    top: 19%;
    left: 25%;
    transform: translate(-10%, -50%) rotate(324deg) scale(.8);
    filter: blur(1.5px);
    opacity: .5;
    animation: floatYa 2.8s ease-in-out infinite;
}

.icon-container .icon-am2 {
    background-image: url(../../images/mv/plan/ico_assist02.png); 
    top: 33%;
    right: 16%;
    transform: translate(-50%, -50%) rotate(32deg) scale(1);
    animation: floatYb 2.8s ease-in-out infinite;
    /* animation-delay: .5s; */
    filter: blur(1px);
    opacity: .8;
}

.icon-container .icon-am3 {
    background-image: url(../../images/mv/plan/ico_assist03.png);    
    top: 60%;
    left: 41%;
    animation-delay: 0s;
    z-index: 999999;
    transform: translate(-26%, -30%) rotate(39deg) scale(.7);
    animation: floatYc 2.8s ease-in-out infinite;
    /* filter: blur(1px); */
    opacity: .8;
}

.icon-container .icon-am4 {
    background-image: url(../../images/mv/plan/ico_assist04.png); 
    top: 56%;
    left: 17%;
    transform: translate(-50%, -50%) rotate(32deg) scale(.5);
    animation: floatYd 2.8s ease-in-out infinite;
    filter: blur(3px);
    opacity: .7;
}

.icon-container .icon-am5 {
    background-image: url(../../images/mv/plan/ico_assist05.png);    
    top: 56%;
    right: 8%;
    animation-delay: 0s;
    z-index: 999999;
    transform: translate(-50%, -50%) rotate(39deg) scale(.6);
    animation: floatYe 2.8s ease-in-out infinite;
    filter: blur(3px);
    opacity: .6;
}


@keyframes floatYa {
  0% {
     transform: translate(-10%, -50%) rotate(324deg) scale(.8);
  }
  25% {
     transform: translate(-18%, -58%) rotate(324deg) scale(.8);
  }
  50% {
     transform: translate(-10%, -50%) rotate(324deg) scale(.8);
  }
  75% {
     transform: translate(-18%, -58%) rotate(324deg) scale(.8);
  }
  100% {
     transform: translate(-10%, -50%) rotate(324deg) scale(.8);
  }
}

@keyframes floatYb {
  0% {
     transform: translate(-50%, -50%) rotate(32deg) scale(1);
  }
  25% {
     transform: translate(-42%, -58%) rotate(32deg) scale(1);
  }
  50% {
     transform: translate(-50%, -50%) rotate(32deg) scale(1);
  }
  75% {
     transform: translate(-42%, -58%) rotate(32deg) scale(1);
  }
  100% {
     transform: translate(-50%, -50%) rotate(32deg) scale(1);
  }
}


@keyframes floatYc {
  0% {
     transform: translate(-26%, -30%) rotate(39deg) scale(.7);
  }
  25% {
     transform: translate(-26%, -38%) rotate(39deg) scale(.7);
  }
  50% {
     transform: translate(-26%, -30%) rotate(39deg) scale(.7);
  }
  75% {
     transform: translate(-26%, -38%) rotate(39deg) scale(.7);
  }
  100% {
     transform: translate(-26%, -30%) rotate(39deg) scale(.7);
  }
}


@keyframes floatYd {
  0% {
     transform: translate(-10%, -50%) rotate(324deg) scale(.5);
  }
  25% {
     transform: translate(-18%, -58%) rotate(324deg) scale(.5);
  }
  50% {
     transform: translate(-10%, -50%) rotate(324deg) scale(.5);
  }
  75% {
     transform: translate(-18%, -58%) rotate(324deg) scale(.5);
  }
  100% {
     transform: translate(-10%, -50%) rotate(324deg) scale(.5);
  }
}

@keyframes floatYe {
  0% {
     transform: translate(-50%, -50%) rotate(43deg) scale(.6);
  }
  25% {
     transform: translate(-42%, -58%) rotate(43deg) scale(.6);
  }
  50% {
     transform: translate(-50%, -50%) rotate(43deg) scale(.6);
  }
  75% {
     transform: translate(-42%, -58%) rotate(43deg) scale(.6);
  }
  100% {
     transform: translate(-50%, -50%) rotate(43deg) scale(.6);
  }
}



#body.login-before .hero-wrap {
    /* background-color: #fff; */
}

#body.login-before .section-switch {
    /* background-color: #fff; */
}


.subcopycase-list .subcopycase-item .label-wrap {
    background-size: 36px auto;
}

.subcopycase-list .subcopycase-item .label-copy-wrap {
    padding-left: 40px;
}   

.preparing {
    position: relative;
}

.preparing .label-headcopy {
    color: #868e96;
}

.preparing::after {
    content: "준비중";
    display: flex;
    font-size: 9px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .2);
    color: #fff;;
    /* box-shadow: 0 1px 1px 0 rgb(0 0 0 / 10%); */
    border-radius: 12px;
    z-index: 1;
    align-items: center;
    justify-content: center; 
    font-weight: 600;
        backdrop-filter: blur(10px);
}

.service-list-contents > .my-insure ,
.service-list-contents > .find-insure {
    /* padding-bottom: 40px; */
    background-color: #f9f9f9;
}

.service-content {
    overflow: hidden;
    margin: 8px 16px 0;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px 2px rgb(93 93 93 / 4%);
}

.header {
    /* background-color: #f9f9f9;; */
}

.section-hero-graph,
.hero-wrap {
    background-color: #fff;
    box-shadow: 0 2px 12px 2px rgb(93 93 93 / 4%);
}

.header {
    height: 68px;
}

.contents {
    margin-top: 68px;;
}

.graph-type-case6.graph-rod-wrap .graph-rod .rod:nth-child(1) .rod-amount {
    padding: 0 8px;
    border-radius: 32px;
    white-space: nowrap;
    transition: all .4s;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 2px 12px 2px rgb(93 93 93 / 14%);
}