.header-wrap.main + .contents-wrap { background: linear-gradient(to bottom, #fff, #F2F2F2); }

/* contents > individual-area */
.indivi-area { text-align: center; border-top: 2rem solid #ffffff; }
.indivi-area .indivi-subarea .custom-info-wrap { margin-top: 0.4rem; font-size: 1.6rem; line-height: 1.6rem; }
.indivi-area .indivi-subarea .custom-info-wrap .custom-id { margin-left: -0.3rem; }
.indivi-area .indivi-subarea .custom-info-wrap .custom-etc1 { margin-left: -0.2rem; }
.indivi-area .indivi-subarea .custom-info-wrap .custom-etc2 { margin-left: -0.2rem; }
.indivi-area > ul { width: 88.88%; margin: 0 auto; }
.indivi-area > ul::after { content: ""; display: block; clear: both; }
.indivi-area > ul > li { border-radius: 2.1rem; width: 48.4375%; padding: 1rem 0 1rem 0; float: left; background: #fff; box-shadow: 0 0.2rem 0.5rem 0 rgba(0, 0, 0, 0.16); }
.indivi-area > ul > li:nth-child(2n) { float: right; }
.indivi-area > ul > li:nth-child(1), .indivi-area > ul > li:nth-child(2) { margin-bottom: 1rem; }
.indivi-area > ul > li .indivi-tit { display: block; font-size: 1.4rem; margin-bottom: 0.6rem; }
.indivi-area > ul > li .indivi-cont { line-height: 3.3rem; display: block; margin: 0 auto; margin-bottom: 0; max-width: 95%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 2.6rem; font-weight: 800; color: #0339A6; }
.indivi-area > ul > li .unit { display: block; margin-top: 0.5rem; font-size: 1.4rem; font-weight: 400; }

.indivi2-area { text-align: center; }
.indivi2-area > ul { padding-bottom: 2rem; border-bottom: 0.1rem solid #e5e5e5; width: 88.88%; margin: 0 auto; }
.indivi2-area > ul::after { content: ""; display: block; clear: both; }
.indivi2-area > ul > li { border-radius: 2.1rem; width: 48.4375%; padding: 2rem 0 1.8rem 0; float: left; background: #fff; box-shadow: 0 0.2rem 0.5rem 0 rgba(0, 0, 0, 0.16); }
.indivi2-area > ul > li:nth-child(2n) { float: right; }
.indivi2-area > ul > li:nth-child(2), .indivi-area > ul > li:nth-child(2) { margin-bottom: 1rem; }
.indivi2-area > ul > li .indivi-tit { display: block; font-size: 1.4rem; margin-bottom: 0.6rem; }
.indivi2-area > ul > li .indivi-cont { line-height: 3.3rem; display: block; margin: 0 auto; margin-bottom: 0; max-width: 95%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 2.6rem; font-weight: 800; color: #0339A6; }
.indivi2-area > ul > li .unit { display: block; margin-top: 0.5rem; font-size: 1.4rem; font-weight: 400; }

.indivi3-area { width: 50%; text-align: center; border-top: .5rem solid #ffffff; }
.indivi3-area .indivi-subarea .custom-info-wrap { margin-top: 0.4rem; font-size: 1.6rem; line-height: 1.6rem; }
.indivi3-area .indivi-subarea .custom-info-wrap .custom-id { margin-left: -0.3rem; }
.indivi3-area .indivi-subarea .custom-info-wrap .custom-etc1 { margin-left: -0.2rem; }
.indivi3-area .indivi-subarea .custom-info-wrap .custom-etc2 { margin-left: -0.2rem; }
.indivi3-area > ul { width: 85%; margin-left: 10%; }
.indivi3-area > ul::after { content: ""; display: block; clear: both; }
.indivi3-area > ul > li { border-radius: 2.1rem; width: 45%; padding: 1.2rem 0 1.2rem 0; float: left; background: #fff; box-shadow: 0 0.2rem 0.5rem 0 rgba(0, 0, 0, 0.16); }
.indivi3-area > ul > li:nth-child(2n) { float: right; }
.indivi3-area > ul > li:nth-child(1), .indivi-area > ul > li:nth-child(2) { margin-bottom: 1rem; }
.indivi3-area > ul > li .indivi-tit { display: block; font-size: 1.4rem; margin-bottom: 0.6rem; }
.indivi3-area > ul > li .indivi-cont { line-height: 3.3rem; display: block; margin: 0 auto; margin-bottom: 0; max-width: 95%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 2.6rem; font-weight: 800; color: #0339A6; }
.indivi3-area > ul > li .unit { display: block; margin-top: 0.5rem; font-size: 1.4rem; font-weight: 400; }

.indivi4-area { width: 50%; text-align: center; }
.indivi4-area > ul { width: 90%; margin-left: 5.6%; }
.indivi4-area > ul::after { content: ""; display: block; clear: both; }
.indivi4-area > ul > li { border-radius: 2.1rem; width: 47%; padding: 2rem 0 1.8rem 0; float: left; background: #fff; box-shadow: 0 0.2rem 0.5rem 0 rgba(0, 0, 0, 0.16); }
.indivi4-area > ul > li:nth-child(2n) { float: right; }
.indivi4-area > ul > li:nth-child(1), .indivi-area > ul > li:nth-child(2) { margin-bottom: 1rem; }
.indivi4-area > ul > li .indivi-tit { display: block; font-size: 1.4rem; margin-bottom: 0.6rem; }
.indivi4-area > ul > li .indivi-cont { line-height: 3.3rem; display: block; margin: 0 auto; margin-bottom: 0; max-width: 95%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 2.6rem; font-weight: 800; color: #0339A6; }
.indivi4-area > ul > li .unit { display: block; margin-top: 0.5rem; font-size: 1.4rem; font-weight: 400; }


/* contents > common-area */
.common-area { padding: 0 5.5555% 2rem 5.5555%; }
.menu-area > ul { margin-bottom: 2rem; }
.menu-area > ul::after { content: ""; display: block; clear: both; }
.menu-area > ul > li { float: left; width: 25%; }
.menu-area > ul > li > a { display: inline-block; width: 100%; }
.menu-area > ul > li > a > img { position: relative; width: 100%; }
.menu-area > ul > li > a > .menuName { display: block; text-align: center; font-weight: 300; }
.menu-area > ul > li:nth-child(1) > a > img { position: relative; left: 0.5rem; }
.menu-area > ul > li:nth-child(2) > a > img { position: relative; left: -0.3rem; }
.menu-area > ul > li:nth-child(3) > a > img { position: relative; left: 0.2rem; }
.menu-area > ul > li:nth-child(4) > a > img { position: relative; left: -0.4rem; }

.notice-area { border-radius: 2.2rem; box-sizing: border-box; overflow: hidden; background: #fff; box-shadow: 0 0.3rem 0.6rem 0 rgba(0, 0, 0, 0.16); }
.notice-area.typeA { position: relative; height: 4.4rem; margin-bottom: 2rem; padding: 0.8rem 0.6rem; }
.notice-area.typeA .notice-tit { position: absolute; top: 50%; margin-top: -1.6rem; display: inline-block; width: 4.8rem; height: 3.2rem; line-height: 3.2rem; border-radius: 2rem; font-size: 1.4rem; font-weight: 600; color: #fff; background: #333; text-align: center; }
.notice-area.typeA .swiper-wrapper { padding-left: 5.7rem; }
.notice-area.typeA .swiper-wrapper .swiper-slide { max-width: 68%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 2.8rem; font-size: 1.4rem; }
.notice-area.typeA .swiper-button-wrap { position: absolute; top: 50%; margin-top: -1.6rem; height: 2.8rem; right: 0.6rem; }
.notice-area.typeA .swiper-button-wrap .swiper-button-next { margin-right: 1rem; float: right; width: 3.2rem; height: 100%; cursor: pointer; }
.notice-area.typeA .swiper-button-wrap .swiper-button-prev { float: right; width: 3.2rem; height: 100%; cursor: pointer; }

.notice-area.typeB { position: relative; }
.notice-area.typeB .swiper-wrapper { padding: 2.2rem 1.2rem 1.9rem 2rem; display: flex; }
.notice-area.typeB .swiper-wrapper .swiper-slide { flex-shrink: 0; }
.notice-area.typeB .swiper-wrapper .swiper-slide .slide-tit { max-width: 65%; overflow: hidden; white-space: nowrap; text-overflow:ellipsis; margin-bottom: 1.5rem; font-size: 1.8rem; font-weight: 600; }
.notice-area.typeB .swiper-wrapper .swiper-slide .slide-cont { font-size: 1.4rem; line-height: 1.8rem; max-width: 87.5%; overflow: hidden; text-overflow: ellipsis; display:-webkit-box; word-wrap:break-word; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height: 1.8rem; }
.notice-area.typeB .swiper-pagination { position: absolute; top: 2rem; right: 2rem; padding: 0.5rem 1rem; background: #F2F2F2; border-radius: 1.4rem; font-size: 1.2rem; color: #808080; background: #F2F2F2; }
.notice-area.typeB .swiper-pagination .swiper-pagination-current { font-weight: 600; color: #0339A6; }

.stationList-area { border-radius: 2.2rem; box-sizing: border-box; overflow: hidden; background: #fff; box-shadow: 0 0.3rem 0.6rem 0 rgba(0, 0, 0, 0.16); }

.divRight {
		width:230px;
	
	}
.main-item {
    background: #FFF;
    border-radius: 15px;
    width: 100%;
    box-shadow: 0 0 6px #0000000D;
    padding: 30px 20px;
}
#headLogo img {
    height: 30px;
    margin-top: 5px;
}
#myCar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 30px 1fr 75px;
}
#carName {
    font-size: 20px;
    font-weight: 700;
}
#carNumber {
    font-size: 14px;
    font-weight: 600;
}
#carImage {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    height: 70px;
}
#carImage img {
    height: 60px;
}
#monthHistory {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1px;
    border-radius: 10px;
    position: relative;
}
#monthHistory::after {
    position: absolute;
    left: 50%;
    top: 50%;
    content: "";
    display: block;
    width: 1px;
    height: 25px;
    transform: translate(-50%, -50%);
}
#monthHistory>div {
    padding: 10px;
    display: grid;
    grid-template-columns: 45px 1fr;
    grid-template-rows: 17px 1fr;
    width: 100%;
}
#monthHistory .img-center {
    grid-row: 1 / 3;
    grid-column: 1 / 2;
    display: flex;
    justify-content: center;
    align-items: center;
}
#monthCharging img {
    width: 30px;
    height: 30px;
}
#monthPayment img {
    width: 27px;
    height: 27px;
}
#monthHistory .title {
    font-size: 15px;
    color: #545454;
    font-weight: 400;
}
#monthHistory {
    font-size: 19px;
    font-weight: 600;
}
#mainMenu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 110px;
    width: 100%;
}
#mainMenu .main-item {
    padding: 0;
    height: 100%;
    width: 100%;
}
#mainMenu .main-item a {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
}
#mainMenu .main-item p {
    font-size: 13px;
    font-weight: 600;
}
#mainMenu .main-item:nth-child(1) img,
#mainMenu .main-item:nth-child(2) img {
    width: 43px;
    height: 43px;
    margin: 21px 0 11px;
}
#mainMenu .main-item:nth-child(3) img {
    width: 58px;
    height: 58px;
    margin: 13px 0 4px;;
}
#mainMenu .main-item:nth-child(4) img {
    width: 45px;
    height: 45px;
    margin: 20px 0 10px;;
}
.main-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}
.main-item-title {
    font-size: 20px;
    /* line-height: 28px; */
    font-weight: 700;
}
.main-item-head .more {
    display: flex;
    align-items: center;
    font-size: 14px;
    /* line-height: 18px; */
    color: #94999F;
    gap: 7px;
}
.main-item-head .more img {
    width: 8px;
    height: 14px;
}
.main-list {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}
.main-list-item {
    display: flex;
    align-items: center;
    justify-self: center;
    gap: 20px;
    width: 100%;
}
#mainPage {
    min-height: calc(100vh - 100px);
    width: 100%;
    background: #F7F9F8;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
    padding: 0 20px 20px;
}

.main-list-contents {
    flex: 1;
}
.main-list-title {
    font-weight: 600;
    /* line-height: 22px; */
}
.main-list-text {
    font-size: 14px;
    /* line-height: 19px; */
    color: #949494;
}
.main-list-button {
    width: auto;
    height: auto;
    font-size: 15px;
    font-weight: 700;
    background: #E7F8D3;
    color: #84C23D;
    padding: 5px 11px;
    border-radius: 5px;
}
.main-list-button.disable {
    background: #F9F9F9;
    color: #949494;
}