/* introSection */
.introSection {
    background: #BAE7FF url(../images/index/index-bg.png)repeat-y top center/ 100%;
    margin-bottom: 9px;
}

.introSection .introWrap {
    padding: 11px 1.7% 0;
    margin-bottom: 20px;
}

.introSection .introTop .photoWrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 102.3%;
}

.introSection .introTop .introPhoto {
    width: 52.7%;
    margin: -4.5% -5% 0 0.3%;
}

.introSection .introTop .introPhotoArea {
    width: 42.5%;
}

.introSection .introTop .introNote {
    font-size: clamp(24px, 5.6vw, 40px);
    line-height: 1;
    color: #0B3F7E;
    margin: -6% 0 5.9%;
}

.introSection .introTop .introNote .noteBg {
    display: inline-block;
}

.introSection .introTop .introNote .noteBg:not(:first-child) {
    margin-top: -0.5vw;
}

.introSection .introTop .introNote .noteBg .bgSub {
    position: relative;
    display: inline;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 0%, white 0%, white 100%);
    white-space: break-spaces;
    -webkit-box-decoration-break: clone;
    border-radius: 5px;
    padding: 7px 9px 6px;
    font-weight: 900;
    z-index: 1;
}

.introSection .introTop .introNote .noteBg:first-child .bgSub {
    padding: 2px 12px 0 9px;
    z-index: 2;
}

.introSection .introTop .introNote .noteBg .yellow {
    position: relative;
    display: inline-block;
    font-size: clamp(36px, 8vw, 70px);
    line-height: 1;
    z-index: 1;
}

.introSection .introTop .introNote .noteBg .yellow::before {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 53%;
    background-color: #FCDF03;
    border-radius: 5px;
    z-index: -1;
}

.introSection .introTop .introSub {
    position: relative;
    display: inline-block;
    font-weight: 900;
    font-size: clamp(27px, 6.3vw, 48px);
    color: #0B3F7E;
    line-height: 1;
    z-index: 1;
    padding: 0px 8px 14px;
}

.introSection .introTop .introSub::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 3px;
    z-index: -1;
}

.introSection .introTop .introSub::after {
    content: "";
    position: absolute;
    bottom: -32.4%;
    right: -34%;
    width: 43%;
    aspect-ratio: 136/88;
    background: url(../images/index/intro-section-photo-02.png)no-repeat top left/ 100%;
}

.introSection .introTop .introSub .subYellow {
    position: relative;
    display: inline-block;
}

.introSection .introTop .introSub .subYellow::before {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 99%;
    height: 59%;
    background-color: #FCDF03;
    border-radius: 3px;
    z-index: -1;
}

.introSection .introTop .introSub .subYellow .subVertical {
    display: inline-block;
    writing-mode: vertical-rl;
    font-size: clamp(14px, 3.2vw, 20px);
    margin: 0px -5px 0 4px;
    transform: translateY(3px);
    letter-spacing: 1.2px;
}

.introSection .introTop .introSub .subYellow .subNumber {
    font-size: clamp(47px, 10.95vw, 80px);
    line-height: 0.9;
}

.introSection .introTop .introSub .fs23 {
    font-size: clamp(23px, 5.4vw, 38px);
}

.introSection .introSlide {
    margin-bottom: 20px;
}

.introSection .introLet {
    padding: 0 1.7%;
    margin-bottom: 1.8%;
}

.introSection .introLet .letTitle {
    font-size: clamp(20px, 4.65vw, 36px);
    font-weight: 900;
    color: #0B3F7E;
    text-align: center;
    padding: 0 10px;
    margin-bottom: 0.9vw;
}

.introSection .introLet .letTitle .line {
    position: relative;
}

.introSection .introLet .letTitle .line::before,
.introSection .introLet .letTitle .line::after {
    content: "";
    position: absolute;
    bottom: -9%;
    left: -4.3%;
    width: clamp(15px, 3.5vw, 30px);
    aspect-ratio: 15/20;
    background: url(../images/index/icon-line.png)no-repeat top left/ 100%;
}

.introSection .introLet .letTitle .line::after {
    bottom: -1.2%;
    left: auto;
    right: -3.7%;
    transform: rotate(86deg);
}

.introSection .introLet .letList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.introSection .introLet .letList li {
    width: calc(25% - 5px);
    text-align: center;
    background-color: #FCFDFF;
    border-radius: 10px;
    padding: 2.3% 1%;
}

.introSection .introLet .letList li .letPhoto {
    width: 90%;
    margin: 0 auto 0.3vw;
}

.introSection .introLet .letList li .letPhoto img {
    width: 100%;
}

.introSection .introLet .letList li .letName {
    font-size: clamp(17px, 4vw, 28px);
    font-weight: bold;
    color: #062B57;
}

.introSection .introInsure {
    background-color: #fff;
    text-align: center;
    padding: 2.6% 1%;
}

.introSection .introInsure .insureName {
    font-size: clamp(19px, 4.4vw, 32px);
    color: #0B3F7E;
    margin-bottom: 0.7%;
}

.introSection .introInsure .insureName .fs13 {
    font-size: clamp(13px, 3vw, 18px);
}

.introSection .introInsure .insuPhoto {
    width: 93%;
    margin: 0 auto;
}

.introSection .introInsure .insuPhoto img {
    width: 100%;
}

/* introSection */

/* procedureSection */
.procedureSection {
    background-color: #DCF1F8;
    border-radius: 5px;
    padding: 3.3% 0 4.2%;
    margin-bottom: 5%;
}

.procedureSection .proceTitle {
    text-align: center;
    font-size: clamp(20px, 4.65vw, 36px);
    font-weight: 900;
    color: #0B3F7E;
    line-height: 1.4;
    margin-bottom: 2.7%;
}

.procedureSection .proceTitle .number {
    position: relative;
    display: inline-block;
    font-size: clamp(35px, 8.2vw, 50px);
    vertical-align: bottom;
    line-height: 1;
    padding-left: 25px;
    margin-right: 4px;
}

.procedureSection .proceTitle .number::before {
    content: "";
    position: absolute;
    top: 9px;
    left: -20px;
    width: clamp(24px, 5.6vw, 40px);
    aspect-ratio: 1/1;
    background: url(../images/index/icon-light-bulb.png)no-repeat top left/ 100%;
}

.procedureSection .proceWrap {
    display: inline-block;
    width: 98.3%;
    overflow-x: auto;
	overflow-y: hidden;
    margin-left: 1.7%;
}

.procedureSection .proceScroll {
    overflow-x: auto;
}
.procedureSection .proceScroll .proceManga {
    width: 380vw;
    max-width: 380%;
}

.procedureSection .proceWrap .proceList {
    display: flex;
    flex-wrap: wrap;
    width: max-content;
    padding-right: 1.7%;
}

.procedureSection .proceWrap .proceList li {
    position: relative;
    width: 350px;
    background-color: #FFFFFF;
    border-radius: 5px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
}

.procedureSection .proceWrap .proceList li:not(:last-child) {
    margin-right: 8px;
}

.procedureSection .proceWrap .proceList li .proceIntro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.procedureSection .proceWrap .proceList li .proceIntro .number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(35px, 8.2vw, 50px);
    aspect-ratio: 35/33;
    font-size: clamp(18px, 4.2vw, 34px);
    font-weight: bold;
    line-height: 1;
    color: #fff;
    background-color: #083D83;
    border-radius: 5px 0 5px 0;
    margin-right: clamp(10px, 2vw, 20px);
    padding-bottom: 2px;
}

.procedureSection .proceWrap .proceList li .proceIntro .name {
    width: calc(100% - 70px);
    font-size: clamp(17px, 4vw, 28px);
    font-weight: bold;
    color: #062B57;
}

.procedureSection .proceWrap .proceList li .procePhoto {
    width: 100%;
}

.procedureSection .proceWrap .proceList li .procePhoto img {
    width: 100%;
    aspect-ratio: 350 / 191;
}

.procedureSection .proceWrap .proceList li .proceBox {
    padding: 7% 4%;
}

.procedureSection .proceWrap .proceList li .proceBox .proceSub {
    font-size: clamp(15px, 3.5vw, 24px);
    font-weight: 500;
    color: #151515;
}

.procedureSection .proceWrap .proceList li .proceBox .proceSub~.proceNote {
    margin-top: 12px;
}

.procedureSection .proceWrap .proceList li .proceBox .proceNote {
    position: absolute;
    display: inline-block;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
}

.procedureSection .proceWrap .proceList li .proceBox .proceNote .noteBox {
    position: relative;
    z-index: 1;
}

.procedureSection .proceWrap .proceList li .proceBox .proceNote .noteBox:before {
    content: "";
    position: absolute;
    bottom: -4px;
    left: -3px;
    width: 106%;
    height: 61%;
    background-color: #FCDF03;
    border-radius: 3px;
    z-index: -1;
}

.procedureSection .proceWrap .proceList li .proceBox .proceNote .noteBox .icon {
    display: inline-block;
    margin-right: -5px;
    margin-left: -3px;
    transform: translateY(-0.4vw);
    width: 7%;
}

.procedureSection .proceWrap .proceList li .proceBox .proceNote .noteBox .icon img {
    width: 100%;
}

.procedureSection .proceWrap .proceList li .proceBox .proceNote .noteBox .sub {
    font-size: clamp(17px, 4vw, 28px);
    font-weight: bold;
    color: #062B57;
    letter-spacing: 0.4px;
}

/* procedureSection */
.procedureSection+.areaCta {
    margin-bottom: 2.5%;
}

/* problemSection */

.problemSection {
    padding: 7.9% 0 8.6%;
    background: #DCF1F8 url(../images/index/index-bg.png)repeat-y top center/ 100%;
    border-radius: 5px;
    margin-bottom: 2.2%;
}

.problemSection .sectionTitle .bg::before {
    bottom: 1%;
}

.problemSection .problemBox:first-child {
    position: relative;
    margin-bottom: clamp(57px, 14.1vw, 80px);
}

.problemSection .problemBox:first-child::before {
    content: "";
    position: absolute;
    bottom: clamp(-60px, -9.2vw, -39px);
    left: 50%;
    transform: translateX(-50%);
    width: clamp(37px, 8.5vw, 60px);
    aspect-ratio: 37/20;
    background: url(../images/index/icon-triangle.png)no-repeat top left/100%;
}

.problemSection .problemBox .sectionTitle {
    margin-bottom: 1.7vw;
    line-height: 1.43;
}

.problemSection .problemBox .sectionTitle .car {
    position: relative;
}

.problemSection .problemBox .sectionTitle .car::before {
    content: "";
    position: absolute;
    top: -0.6vw;
    left: clamp(-60px, -3.4vw, -60px);
    width: 70px;
    aspect-ratio: 1/1;
    background: url(../images/index/problem-section-photo-01.png)no-repeat top left/ 100%;
}

.problemSection .problemBox .problemList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 2.3vw;
}

.problemSection .problemBox .problemList li {
    width: 48.5%;
    margin-bottom: 2.4vw;
}

.problemSection .problemBox .problemList li .problemIntro {
    color: #103460;
    text-align: center;
    font-size: clamp(18px, 4.2vw, 34px);
    font-weight: bold;
    margin-left: -4px;
    margin-bottom: 6px;
}

.problemSection .problemBox .problemList li .problemIntro .case {
    display: inline-block;
    text-align: center;
    font-size: clamp(9px, 2.1vw, 16px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transform: translateY(2px);
    margin-left: 6px;
    margin-right: -1px;
}

.problemSection .problemBox .problemList li .problemIntro .case .number {
    display: block;
    font-size: clamp(23px, 5.4vw, 38px);
    line-height: 0.7;
}

.problemSection .problemBox .problemList li .problemPhoto {
    width: 100%;
    margin-bottom: 7px;
}

.problemSection .problemBox .problemList li .problemPhoto img {
    width: 100%s;
}

.problemSection .problemBox .problemList li .areaBtn a {
    font-size: clamp(13px, 3vw, 18px);
    padding: 2px 35px 2px;
}

.problemSection .problemBox .problemList li .areaBtn a::before {
    top: 57%;
    right: 9px;
    width: clamp(5px, 1.2vw, 7px);
    height: auto;
    aspect-ratio: 5/11;
}

.problemSection .problemBox .problemMore {
    background-color: #fff;
    color: #103460;
    border-radius: 5px;
    padding: 12px 4% 9px;
}

.problemSection .problemBox .problemMore .moreSub {
    text-align: center;
    font-size: clamp(18px, 4.2vw, 34px);
    font-weight: bold;
    margin-bottom: 6px;
}

.problemSection .problemBox .problemMore .moreList li {
    position: relative;
    font-size: clamp(18px, 4.2vw, 34px);
    font-weight: 500;
    padding-left: 10%;
}

.problemSection .problemBox .problemMore .moreList li:not(:last-child) {
    margin-bottom: 4px;
}

.problemSection .problemBox .problemMore .moreList li::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 7px;
    width: clamp(20px, 4.7vw, 40px);
    aspect-ratio: 1/1;
    background: url(../images/index/icon-choice.png)no-repeat top left/ 100%;
}

.problemSection .problemBox .problemMore .etc {
    text-align: center;
    font-size: clamp(15px, 3.5vw, 24px);
    font-weight: 500;
}

.problemSection .problemBox.problemTime .sectionTitle {
    margin-bottom: clamp(17px, 4.8vw, 35px);
}

.problemSection .problemBox.problemTime .sectionTitle .car::before {
    top: -0.3vw;
    left: -80px;
    width: 70px;
    background: url(../images/index/problem-section-photo-06.png)no-repeat top left/ 100%;
}

.problemSection .problemBox.problemTime .timeSub {
    font-size: clamp(15px, 3.5vw, 24px);
    font-weight: 500;
    background-color: #FFFFFF;
    border-radius: 5px;
    padding: 2.7% 3.3% 3%;
    line-height: 1.4;
    margin-bottom: 14px;
}

/* problemSection */

/* sectionBox */
.sectionBox {
    background-color: #fff;
    border-radius: 35px;
}

.sectionBox .boxName {
    position: relative;
    display: block;
    width: 100%;
    font-size: clamp(14px, 3.2vw, 20px);
    font-weight: bold;
    text-align: center;
    color: #103460;
    padding: 1.5% 6% 1.7%;
    cursor: pointer;
}

.sectionBox .boxName::before,
.sectionBox .boxName::after {
    content: "";
    position: absolute;
    top: 52%;
    right: 14px;
    transform: translateY(-50%);
    width: clamp(10px, 2.4vw, 15px);
    height: clamp(1px, 0.5vw, 2px);
    border-radius: 10px;
    background-color: #103460;
    transition: all .3s;
}

.sectionBox .boxName::after {
    transform: translateY(-50%) rotate(90deg);
}

.sectionBox .boxName.open::after {
    transform: translateY(-50%) rotate(0);
}

.sectionBox .boxOpen {
    display: none;
    font-size: clamp(15px, 3.5vw, 24px);
    font-weight: 500;
    padding: 4.6% 6.3% 6.5%;
    line-height: 1.4;
}

.sectionBox .boxOpen .openSub:not(:last-child) {
    margin-bottom: 15px;
}

.sectionBox .boxOpen .openList {
    margin-bottom: 17px;
}

.sectionBox .boxOpen .openList li {
    position: relative;
    display: block;
    padding-left: 6.9%;
}

.sectionBox .boxOpen .openList li:not(:last-child) {
    margin-bottom: 5px;
}

.sectionBox .boxOpen .openList li::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 0px;
    width: clamp(20px, 4.7vw, 30px);
    aspect-ratio: 1/1;
    background: url(../images/index/icon-choice.png)no-repeat top left/ 100%;
}

/* sectionBox */

/* recomSection */
.recomSection {
    background: #BAE7FF url(../images/index/index-bg.png) repeat-y top center / 100%;
    border-radius: 5px;
    padding: 3.6% 0 6%;
    margin-bottom: 4.1%;
    content-visibility: inherit !important;
}

.recomSection .titleEn {
    margin-bottom: 44px;
}

.recomSection .recomList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.recomSection .recomList {
    margin-bottom: 33px;
}

.recomSection .recomList li {
    position: relative;
    width: calc(100%/3 - 5px);
    color: #103460;
    background-color: #fff;
    border-radius: 5px;
    text-align: center;
    padding: 16px 5px 17px;
}

.recomSection .recomList li .point {
    position: absolute;
    top: -31px;
    left: 0px;
    width: clamp(44px, 5vw, 60px);
}

.recomSection .recomList li .recomPhoto {
    width: 59%;
    margin: 0 auto -9px;
}

.recomSection .recomList li .recomPhoto img {
    width: 100%;
}

.recomSection .recomList li .recomName {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    min-height: 30%;
    font-size: clamp(18px, 4.2vw, 34px);
    font-weight: bold;
    line-height: 1.14;
    margin-bottom: 7px;
}

.recomSection .recomList li .recomName .fs14 {
    font-size: clamp(14px, 3.2vw, 20px);
}

.recomSection .recomList li .recomName .fs14 .number {
    font-size: clamp(24px, 5.6vw, 40px);
    line-height: 1;
}

.recomSection .recomList li .recomSub {
    font-size: clamp(14px, 3.2vw, 20px);
    font-weight: bold;
}

.recomSection .recomBox {
    position: relative;
    background-color: #fff;
    border-radius: 5px;
    padding: 3.4% 5% 2.5%;
    margin-bottom: 11px;
}

.recomSection .recomBox .boxTitle {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 48.1%;
    text-align: center;
}

.recomSection .recomBox .boxTitle img {
    width: 100%;
}

.recomSection .recomBox .boxList li {
    position: relative;
    display: block;
    font-size: clamp(15px, 3.5vw, 24px);
    color: #103460;
    padding-left: 6.7%;
}

.recomSection .recomBox .boxList li:not(:last-child) {
    margin-bottom: 3px;
}

.recomSection .recomBox .boxList li::before {
    content: "";
    position: absolute;
    top: 2px;
    left: -5px;
    width: clamp(20px, 4.7vw, 30px);
    aspect-ratio: 1/1;
    background: url(../images/index/icon-choice.png)no-repeat top left/ 100%;
}

/* recomSection */

.recomSection+.areaCta {
    margin-bottom: 2%;
}

/* areaSection */
.areaSection {
    background: #DCF1F8 url(../images/index/index-bg.png)repeat-y top center/ 100%;
    border-radius: 5px;
    padding: 4% 0 2.5%;
    margin-bottom: 2.9%;
}

.areaSection .areaMap {
    width: 85.4%;
    margin: -3% auto 1.5%;
}

.areaSection .areaMap img {
    width: 100%;
}

.areaSection .areaNote {
    font-size: clamp(15px, 3.5vw, 24px);
    font-weight: 500;
    margin-left: 1.8%;
    margin-bottom: 4%;
}

.areaSection .areaNote .time {
    position: relative;
    display: inline-block;
    padding-left: 22px;
}

.areaSection .areaNote .time:not(:last-child) {
    margin-right: 12px;
}

.areaSection .areaNote .time::before {
    content: "";
    position: absolute;
    bottom: 30%;
    left: 5px;
    width: 12px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: #EB8267;
}

.areaSection .areaNote .time:nth-child(2):before {
    background-color: #87CFB6;
}

.areaSection .areaNote .time:nth-child(3):before {
    background-color: #FF971D;
}

.areaSection .areaNote .time .fs19 {
    font-size: clamp(19px, 3.5vw, 34px);
}

.areaSection .areaSub {
    font-size: clamp(15px, 3.5vw, 24px);
    font-weight: 500;
    color: #103460;
    background-color: #fff;
    border-radius: 5px;
    padding: 8px 13px 7px;
    line-height: 1.7;
    margin-bottom: 14px;
}

/* areaSection */

/* flowSection */
.flowSection {
    background: #DCF1F8 url(../images/index/index-bg.png) repeat-y top center / 100%;
    border-radius: 5px;
    padding: 4.5% 0 5.2%;
    margin-bottom: 2.2%;
}

.flowSection .titleEn {
    margin-bottom: 2.4%;
}

.flowSection .proceWrap .proceList {
    margin-left: 3.4%;
    padding-right: 3.4%;
}

/* flowSection */

/* priceSection */
.priceSection {
    background: #BAE6FF url(../images/index/index-bg.png)repeat-y top center/ 100%;
    padding: 3.7% 0 1.9%;
    margin-bottom: 5%;
}

.priceSection .titleEn {
    margin-bottom: 6px;
}

.priceSection .priceWrap .priceTop {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 28px;
}

.priceSection .priceWrap .priceTop li {
    position: relative;
    width: 49.2%;
    text-align: center;
    font-size: clamp(17px, 4vw, 28px);
}

.priceSection .priceWrap .priceTop li::before {
    content: "";
    position: absolute;
    bottom: -14px;
    left: 0;
    width: 100%;
    height: 8px;
    border-radius: 5px;
    background-color: #C3CBD5;
}

.priceSection .priceWrap .priceTop li.active:after {
    content: "";
    position: absolute;
    bottom: -22px;
    left: 50.6%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #103460;
}

.priceSection .priceWrap .priceTop li.active:before {
    background-color: #103460;
}

.priceSection .priceWrap .priceTop li a {
    font-weight: bold;
    color: #103460;
    text-align: center;
}

.priceSection .priceWrap .priceTop li .topBox {
    position: relative;
    display: inline-block;
}

.priceSection .icon {
    position: absolute;
    top: 14px;
    right: -18px;
    width: 16px;
    aspect-ratio: 1/1;
    cursor: pointer;
    line-height: 1;
}

.priceSection .icon img {
    width: 100%;
}

.priceSection .icon .iconPhoto {
    position: relative;
}

.priceSection .icon .iconPhoto img:hover~.tooltip {
    visibility: visible;
}

.priceSection .tooltip {
    position: absolute;
    visibility: hidden;
    display: inline-block;
    min-width: 316px;
    max-width: 225px;
    background-color: #ffffff;
    color: #272727;
    font-size: clamp(13px, 3vw, 19px);
    font-weight: 500;
    border-radius: 3px;
    padding: 15px 13px 12px;
    z-index: 1;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
    top: -155px;
    right: -88px;
    text-align: left;
}

.priceSection .tooltip::before {
    content: "";
    position: absolute;
    bottom: -14px;
    right: 27%;
    width: 20px;
    aspect-ratio: 24/19;
    background: url(../images/index/icon-triangle-2.svg)no-repeat top left/100%;
}

.priceSection .tooltip .toolSub {
    display: block;
    margin-bottom: 5px;
}

.priceSection .tooltip .toolBottom {
    line-height: 1.62;
}

.priceSection .priceWrap .priceBox {
    background-color: #FDFEFF;
    border-radius: 5px;
    padding: 20px 32px 25px;
    margin-bottom: 15px;
}

.priceSection .priceWrap .priceBox .priceList {
    display: none;
}

.priceSection .priceWrap .priceBox .priceList.showTab {
    display: block;
}

.priceSection .priceWrap .priceBox .priceList .listDetail {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

.priceSection .priceWrap .priceBox .priceList li:not(:last-child) {
    margin-bottom: 19px;
}

.priceSection .priceWrap .priceBox .priceList li:first-child .listDetail {
    font-size: clamp(16px, 3.6vw, 26px);
    font-weight: 500;
    color: #103460;
}

.priceSection .priceWrap .priceBox .priceList li .listDetail p {
    text-align: center;
    background-color: #FDFEFF;
}

.priceSection .priceWrap .priceBox .priceList li .listDetail .priceItem {
    position: relative;
    width: 34%;
    text-align: left;
    padding-left: 1%;
    justify-content: flex-start;
}

.priceSection .priceWrap .priceBox .priceList li:not(:first-child) .listDetail .priceItem::before {
    content: "";
    position: absolute;
    top: 19px;
    right: -15px;
    width: 7vw;
    height: 1px;
    background-color: #707070;
}

.priceSection .priceWrap .priceBox .priceList li:nth-child(4) .listDetail .priceItem::before {
    width: 4vw;
}

.priceSection .priceWrap .priceBox .priceList li:last-child .listDetail .priceItem::before {
    width: 5vw;
}

.priceSection .priceWrap .priceBox .priceList li .listDetail .detailBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 57%;
    font-size: clamp(14px, 3.2vw, 20px);
}

.priceSection .priceWrap .priceBox .priceList li .listDetail .boxInfo {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}

.priceSection .priceWrap .priceBox .priceList li .listDetail .detailTime {
    width: 26%;
}

.priceSection .priceWrap .priceBox .priceList li .listDetail .detailNumber {
    width: 44%;
}

.priceSection .priceWrap .priceBox .priceList li .listDetail .detailBox .boxInfo:not(:last-child) {
    margin-bottom: 12px;
}

.priceSection .priceWrap .priceBox .priceList li .listDetail .fs11 {
    width: 100%;
    font-size: clamp(12px, 2.6vw, 16px);
}

.priceSection .priceWrap .priceBox .priceList li:first-child .listDetail .priceItem,
.priceSection .priceWrap .priceBox .priceList li:first-child .listDetail .detailBox .detailTime,
.priceSection .priceWrap .priceBox .priceList li:first-child .listDetail .detailBox .detailNumber {
    font-size: clamp(16px, 3.6vw, 26px);
}

.priceSection .priceWrap .priceBox .priceList li .listDetail .priceItem {
    font-size: clamp(14px, 3.2vw, 20px);
}

.priceSection .priceWrap .priceBox .priceList li .listDetail .priceItem .fs11 .fs10 {
    font-size: clamp(10px, 2.4vw, 15px);
}

.priceSection .priceWrap .priceBox .priceList li .listDetail .boxInfo .priceItem {
    font-size: clamp(13px, 3vw, 19px);
    margin-left: 11px;
}

.priceSection .priceWrap .priceBox .priceList li .listDetail .priceItem .line {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 5px;
}

.priceSection .priceWrap .priceBox .priceList li .listDetail .boxInfo .infoTime {
    position: relative;
    font-size: clamp(14px, 3.2vw, 20px);
}

.priceSection .priceWrap .priceBox .priceList li:not(:first-child) .listDetail .boxInfo .infoTime:before {
    content: "";
    position: absolute;
    top: 15px;
    right: -8vw;
    width: 7vw;
    height: 1px;
    border-bottom: 1px dashed #707070;
}

.priceSection .priceWrap .priceBox .priceList li .listDetail .boxInfo .infoNumber {
    width: 43%;
    font-size: clamp(14px, 3.2vw, 20px);
}

.priceSection .priceWrap .priceBox .priceList li.grey {
    background: #F3F5F8;
    border-radius: 3px;
    padding: 6px 0;
}

.priceSection .priceWrap .priceBox .priceList li.grey .listDetail p {
    background-color: #F3F5F8;
}

.priceSection .priceWrap .priceBox .priceList li.grey .listDetail:not(:last-child) {
    margin-bottom: 25px;
}

.priceSection .priceWrap .priceBox .priceList li.grey .listDetail .priceItem {
    padding: 0 0 0 10px;
}

.priceSection .sectionBox {
    margin-bottom: 14px;
}

.priceSection .sectionBox .boxName {
    font-size: clamp(17px, 4vw, 28px);
    padding: 1.5% 6% 2%;
}

.priceSection .sectionBox .boxOpen .workList li {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.priceSection .sectionBox .boxOpen .workList li:not(:last-child) {
    margin-bottom: 15px;
}

.priceSection .sectionBox .boxOpen .workList li.title {
    margin-bottom: 21px;
}

.priceSection .sectionBox .boxOpen .workList li.title p {
    font-size: clamp(16px, 3.6vw, 26px);
    font-weight: 500;
}

.priceSection .sectionBox .boxOpen .workList li .workItem {
    position: relative;
    max-width: 230px;
    font-size: clamp(13px, 3vw, 19px);
    text-align: start;
    padding-left: 21px;
    background: #fff;
    z-index: 1;
}

.priceSection .sectionBox .boxOpen .workList li .workItem .icon {
    top: 5px;
    right: 7px;
}

.priceSection .sectionBox .boxOpen .workList li.title .workItem {
    padding-left: 35px;
    padding-right: 20px;
}

.priceSection .sectionBox .boxOpen .workList li .workPrice {
    padding-left: 14px;
    background: #fff;
    z-index: 2;
    font-size: clamp(13px, 3vw, 19px);
    text-align: left;
    width: 24.3%;
    letter-spacing: 0.4px;
}

.priceSection .sectionBox .boxOpen .workList li.title .workPrice {
    text-align: center;
    padding-left: 10px;
}

.priceSection .sectionBox .boxOpen .workList .workItem .itemBox {
    position: relative;
    display: inline-block;
    background-color: #fff;
    padding-right: 30px;
    z-index: 1;
}

.priceSection .sectionBox .boxOpen .workList li::before {
    content: "";
    position: absolute;
    top: 11px;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    height: 1px;
    border-bottom: 1px dashed #707070;
}

.priceSection .sectionBox .boxOpen .workList li.title::before {
    content: "";
    display: none;
}

.priceSection .sectionBox .boxOpen .workList li .fs13 {
    font-size: clamp(13px, 3vw, 19px);
}

.priceSection .sectionBox .boxOpen .workList li .fs12 {
    font-size: clamp(12px, 2.8vw, 17px);
}

.priceSection .sectionBox .boxOpen .workList li .fs11 {
    font-size: clamp(11px, 2.6vw, 15px);
}

.priceSection .sectionBox .boxOpen .tooltip {
    /* padding: 9% 10% 12%;
    top: -176px;
    right: -4.2vw; */
}

.priceExample {
    background-color: #FDFEFF;
    border-radius: 5px;
    padding: 11px 9px 37px;
    margin-bottom: 15px;
}

.priceExample .exampleTitle {
    font-size: clamp(17px, 4vw, 28px);
    font-weight: bold;
    color: #103460;
    margin-bottom: 18px;
    text-align: center;
}

.priceExample .exampleBox:not(:last-child) {
    margin-bottom: 37px;
}

.priceExample .exampleBox .exampleName {
    font-size: 15.5px;
    font-weight: bold;
    color: #103460;
    margin-bottom: 7px;
    text-align: center;
}

.priceExample .exampleBox:not(:last-child) .exampleList {
    padding: 0 13px;
}

.priceExample .exampleBox .exampleList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.priceExample .exampleBox .exampleList li {
    position: relative;
    display: inline-block;
    text-align: center;
}

.priceExample .exampleBox .exampleList li:not(:last-child)::before {
    content: "＋";
    position: absolute;
    top: 3px;
    right: -27px;
    font-size: clamp(12px, 2.8vw, 17px);
    font-weight: 500;
}

.priceExample .exampleBox .exampleList li .name {
    font-size: clamp(14px, 3.2vw, 20px);
    font-weight: 500;
    margin-bottom: 3px;
}

.priceExample .exampleBox .exampleList li .price {
    font-size: clamp(23px, 5.4vw, 38px);
    font-weight: 500;
    line-height: 1;
}

.priceExample .exampleBox .exampleList li .unit {
    font-size: clamp(16px, 3.6vw, 26px);
}

.priceExample .exampleBox:last-child {
    justify-content: space-between;
}

.priceExample .exampleBox:last-child .exampleList li:not(:last-child)::before {
    top: 1px;
    right: -22px;
}

/* priceSection */

.serviceSection {
    background: #BAE7FF url(../images/index/index-bg.png)repeat-y top center/ 100%;
    padding: 6.2% 0 2.3%;
    margin-top: 2%;
    border-radius: 5px;
}

.serviceSection .sectionTitle {
    margin-bottom: 16px;
}

.serviceSection .serviceNote {
    font-size: clamp(15px, 3.5vw, 24px);
    font-weight: 500;
    color: #103460;
    margin-bottom: 13px;
}

.serviceSection .serviceLoad {
    font-size: clamp(16px, 3.6vw, 26px);
    font-weight: bold;
    color: #103460;
    margin-bottom: 4px;
}

.serviceSection .serviceWrap {
    width: 103.4%;
    overflow-x: auto;
    margin-bottom: 18px;
}

.serviceSection .serviceWrap .servicePhoto {
    display: flex;
    flex-wrap: wrap;
    width: max-content;
    padding-right: 3.4%;
}

.serviceSection .serviceWrap .servicePhoto li {
    width: 348px;
}

.serviceSection .serviceWrap .servicePhoto li:not(:last-child) {
    margin-right: 7px;
}

.serviceSection .serviceSub {
    font-size: clamp(15px, 3.5vw, 24px);
    font-weight: 500;
    color: #103460;
    background-color: #fff;
    border-radius: 5px;
    padding: 6px 11px 8px;
    line-height: 1.4;
    margin-bottom: 14px;
}

.serviceSection .serviceList {
    background-color: #fff;
    border-radius: 5px;
    padding: 3.4% 3.9% 4.9%;
    margin-bottom: 11px;
}

.serviceSection .serviceList li {
    position: relative;
    display: block;
    font-size: clamp(15px, 3.5vw, 24px);
    padding-left: 6.7%;
    line-height: 1.6;
}

.serviceSection .serviceList li:not(:last-child) {
    margin-bottom: 7px;
}

.serviceSection .serviceList li::before {
    content: "";
    position: absolute;
    top: 2px;
    left: -4px;
    width: clamp(20px, 4.7vw, 30px);
    aspect-ratio: 1 / 1;
    background: url(../images/index/icon-choice.png) no-repeat top left / 100%;
}

@media(min-width:431px) {
    .areaSection .areaNote .time {
        padding-left: 30px;
    }
    .areaSection .areaNote .time::before {
        bottom: 20%;
        left: 5px;
        width: 20px;
    }
}
@media(max-width: 768px) {
    .problemSection .problemBox.problemTime .sectionTitle .car::before {
        top: -3.9vw;
        left: -14.9vw;
        width: 13.3vw;
    }

    .recomSection .recomList li .point {
        width: 8vw;
    }
}

@media(max-width: 430px) {
    .introSection .introTop .introSub .subYellow {
        min-width: 90px;
    }

    .introSection .introTop .introNote {
        margin: -5% 0 5.9%;
    }

    .introSection .introTop .introNote .noteBg:not(:first-child) {
        margin-top: 0.4vw;
    }

    .recomSection .recomList li .point {
        width: clamp(44px, 5vw, 60px);
    }

    .procedureSection .proceWrap .proceList li .proceIntro .name {
        width: calc(100% - 48px);
    }

    .procedureSection .proceTitle .number::before {
        left: 0;
    }

    .procedureSection .proceWrap .proceList li {
        width: 220px;
    }

    .procedureSection .proceWrap .proceList li .proceBox .proceNote .noteBox .icon {
        transform: translateY(2px);
    }

    .problemSection .problemBox .sectionTitle .car::before {
        top: -2vw;
        left: -10.6vw;
        width: 11.3vw;
    }

    .problemSection .problemBox .problemMore {
        padding: 12px 4% 9px;
    }

    .problemSection .problemBox.problemTime .sectionTitle .car::before {
        top: -3.9vw;
        left: -14.9vw;
        width: 13.3vw;
    }

    .recomSection .recomList li .recomName {
        min-height: 41px;
    }

    .areaSection .areaNote .time::before {
        bottom: 5px;
        left: 5px;
        width: 12px;
    }

    .priceSection .icon {
        top: 4px;
        right: -13px;
        width: 13px;
    }

    .priceSection .tooltip {
        min-width: 206px;
        padding: 8px 0 7px 11px;
        top: -104px;
        right: -59px;
    }

    .priceSection .sectionBox .boxOpen .tooltip {
        /* padding: 9% 10% 12%; */
        /* top: -126px; */
        /* right: -65px; */
    }

    .priceSection .priceWrap .priceBox .priceList li .listDetail .priceItem {
        padding-left: 3%;
    }

    .priceSection .priceWrap .priceBox .priceList li:not(:first-child) .listDetail .priceItem::before {
        top: 11px;
        right: -15px;
        width: 53px;
    }

    .priceSection .priceWrap .priceBox .priceList li:nth-child(4) .listDetail .priceItem::before {
        width: 30px;
    }

    .priceSection .priceWrap .priceBox .priceList li:last-child .listDetail .priceItem::before {
        width: 40px;
    }

    .priceSection .priceWrap .priceBox .priceList li:not(:first-child) .listDetail .boxInfo .infoTime:before {
        top: 10px;
        right: -60px;
        width: 11vw;
        height: 1px;
    }

    .priceSection .tooltip {
        /* min-width: 206px; */
        /* max-width: 225px; */
    }

    .priceSection .sectionBox .boxOpen .tooltip {
        /* padding: 9% 10% 12%; */
        /* top: -123px; */
        /* right: -17.8vw; */
        padding: 8px 11px 7px;
    }

    .priceExample .exampleBox .exampleList li:not(:last-child)::before {
        right: -6vw;
    }

    .priceSection .sectionBox .boxOpen .workList li .workItem .icon {
        top: 0px;
        right: 14px;
    }

    .priceSection .priceWrap .priceBox .priceList li .listDetail .priceItem .line {
        margin-top: 0;
    }

    .problemSection .problemBox .problemList li .areaBtn a {
        padding: 1px 26px;
    }
}
@media(max-width: 420px) {
    .introSection .introTop .introNote {
        font-size: clamp(20px, 5.6vw, 38px);
    }
    .introSection .introTop .introNote .noteBg .yellow {
        font-size: clamp(32px, 8vw, 50px);
    }
}

@media(max-width: 414px) {

    .introSection .introTop .introSub .subYellow .subNumber {
        font-size: 42px;
    }

    .problemSection .problemBox .problemMore {
        padding: 12px 4% 9px;
    }

    .priceSection .tooltip {
        /* top: -107px; */
        /* right: -17.2vw; */
    }

    .priceSection .priceWrap .priceBox .priceList li:not(:first-child) .listDetail .priceItem::before {
        top: 13px;
        right: -4vw;
        width: 13vw;
    }

    .priceSection .priceWrap .priceBox .priceList li:not(:first-child) .listDetail .boxInfo .infoTime:before {
        width: 10vw;
        right: -12vw;
    }

    .priceSection .priceWrap .priceBox .priceList li:nth-child(4) .listDetail .priceItem::before {
        width: 5vw;
    }

    .priceSection .priceWrap .priceBox .priceList li:last-child .listDetail .priceItem::before {
        width: 8vw;
    }
}

@media(max-width: 390px) {
    .introSection .introTop .introSub {
        font-size: clamp(24px, 5vw, 44px)
    }

    .introSection .introLet .letTitle {
        font-size: 18px;
    }

    .problemSection .problemBox .problemList li .problemIntro .case {
        margin-left: 0;
    }

    .priceSection .tooltip {
        /* top: -107px; */
        /* right: -18.4vw; */
    }

    .priceSection .priceWrap .priceBox .priceList li:not(:first-child) .listDetail .priceItem::before {
        width: 11vw;
    }

    .priceSection .priceWrap .priceBox .priceList li:not(:first-child) .listDetail .boxInfo .infoTime:before {
        width: 10vw;
    }

    .priceSection .priceWrap .priceBox .priceList li:nth-child(4) .listDetail .priceItem::before {
        width: 5vw;
    }

    .priceSection .priceWrap .priceBox .priceList li:last-child .listDetail .priceItem::before {
        width: 6vw;
    }
}

@media(max-width: 375px) {
    .introSection .introTop .introNote {
        font-size: clamp(18px, 5.3vw, 36px);
    }
    .introSection .introTop .introNote .noteBg .yellow {
        font-size: clamp(30px, 7vw, 45px);
    }

    .introSection .introTop .introSub {
        font-size: clamp(22px, 5vw, 40px)
    }

    .introSection .introTop .introSub .fs23 {
        font-size: clamp(20px, 5.4vw, 34px);
    }

    .problemSection .problemBox .problemList li .problemIntro {
        font-size: 16px;
    }

    .priceSection .tooltip {
        right: -48px;
        top: -109px;
    }

    .priceSection .tooltip::before {
        right: 45px;
    }

    .priceSection .priceWrap .priceBox {
        padding: 20px 10px 25px;
    }

    .priceSection .priceWrap .priceBox .priceList li:not(:first-child) .listDetail .boxInfo .infoTime:before {
        right: -14vw;
    }

    .priceExample .exampleBox .exampleList li .name {
        font-size: 13px;
    }

    .priceExample .exampleBox .exampleList li .price {
        font-size: 20px;
    }

    .priceSection .sectionBox .boxOpen .workList .workItem .itemBox {
        max-width: 180px;
    }

    .priceSection .sectionBox .boxOpen .workList li .workPrice {
        min-width: 75px;
    }

    .priceSection .sectionBox .boxOpen .workList li .workItem {
        padding-left: 0;
    }
}

@media(max-width: 360px) {
    .introSection .introTop .introNote {
        font-size: clamp(17px, 5vw, 34px);
    }
    .introSection .introTop .introNote .noteBg .yellow {
        font-size: clamp(28px, 7vw, 40px);
    }

    .priceExample .exampleBox .exampleList li:not(:last-child)::before {
        right: -5vw;
    }
}

@media(min-width:769px) {
    .areaCta .ctaWrap .ctaWrapNote {
        top: -4px;
        width: 250px;
    }

    .areaCta .ctaWrap p {
        padding-top: 40px;
    }
}