@import url('index.css');
@import url('garbage-v2.css');

#main {
    background: #00c26d;
    padding: 30px 0;
    margin-top: 0;
}

/* areaServiceCategory */
.areaServiceCategory {
    background-color: #fff;
    padding: 61px 0 49px;
    margin-bottom: 81px;
}
.areaServiceCategory .cateWrap {
    display: flex;
    flex-wrap: wrap;
}
.areaServiceCategory .cateWrap .catePhoto {
    width: calc(100% - 373px);
}
.areaServiceCategory .cateWrap .serviceContactWrap  {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background-color: #DAF0E6;
    border-radius: 0 10px 10px 0;
}
.areaServiceCategory .cateWrap .serviceContact  {
    background-color: transparent;
    margin-top: 0;
}
.areaServiceCategory .cateWrap .pageAnchor {
    width: 100%;
    max-width: 900px;
    margin: 47px auto 0;
}
.areaServiceCategory .cateWrap .pageAnchor .pageAnchorList {
    justify-content: center;
    margin: 0;
}
.areaServiceCategory .cateWrap .pageAnchor .pageAnchorList li {
    width: auto;
    border-right: 1px solid #00C26D;
    padding: 0 20px;
    margin: 15px 0;
}
.areaServiceCategory .cateWrap .pageAnchor .pageAnchorList li:first-child,
.areaServiceCategory .cateWrap .pageAnchor .pageAnchorList li:nth-child(5) {
    border-left: 1px solid #00C26D;
}
.areaServiceCategory .cateWrap .pageAnchor .pageAnchorList li a {
    border-bottom: none;
    padding: 4px 41px 4px 9px;
}
.areaServiceCategory .cateWrap .pageAnchor .pageAnchorList li a::before {
    content: none;
}
.areaServiceCategory .cateWrap .pageAnchor .pageAnchorList li a::after {
    top: 55%;
    right: 9px;
    width: 19px;
    aspect-ratio: 1/1;
    height: auto;
    transform: translate(0, -50%) rotate(0);
    background: url(../images/service-garbage-v2/area-service-category-photo-02.svg)no-repeat top left/100%;
}
/* areaServiceCategory */

.bigTitle {
    font-size: 50px;
}

/* areaPriceChart */
.areaPriceChart {
    margin-bottom: 55px;
}
.areaPriceChart .bigTitle {
    margin-bottom: 31px;
}
.areaPriceChart .inner {
    max-width: 1261px;
}
.areaPriceChart .chartDetail {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    border-radius: 30px;
    background-color: #fff;
    padding: 49px 59px 51px;
}
.areaPriceChart .chartDetail .chartWrap {
    width: calc(100%/3 - 47px);
} 
.areaPriceChart .chartDetail .chartWrap:not(:last-child) {
    margin-right: 70px;
}
.areaPriceChart .chartDetail .chartWrap .chartBox {
    width: 100%;
}
.areaPriceChart .chartDetail .chartWrap .chartBox:not(:last-child) {
    margin-bottom: 70px;
}
.areaPriceChart .chartDetail .chartWrap .chartBox .chartName {
    font-size: 25px;
    font-weight: 700;
    color: #00C26D;
    text-align: center;
    margin-bottom: 29px;
}
.areaPriceChart .chartDetail .chartWrap .chartBox .chartList li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
}
.areaPriceChart .chartDetail .chartWrap .chartBox .chartList li:not(:last-child) {
    margin-bottom: 42px;
}
.areaPriceChart .chartDetail .chartWrap .chartBox .chartList li .photo {
    width: 110px;
}
.areaPriceChart .chartDetail .chartWrap .chartBox .chartList li .chartInfo {
    width: calc(100% - 138px);
    margin-top: -5px;
}
.areaPriceChart .chartDetail .chartWrap .chartBox .chartList li .chartInfo .name {
    font-size: 22px;
    margin-bottom: 5px;
}
.areaPriceChart .chartDetail .chartWrap .chartBox .chartList li .chartInfo .price {
    font-size: 18px;
    line-height: 1;
}
.areaPriceChart .chartDetail .chartWrap .chartBox .chartList li .chartInfo .price .number {
    display: inline-block;
    font-size: 35px;
    margin-right: 10px;
}
/* areaPriceChart */

/* areaIntro  */
.areaIntro {
    background: transparent;
    margin-bottom: 61px;
}
/* areaPlan */
.areaIntro .areaPlan {
    margin-bottom: 74px;
}
.areaIntro .areaPlan .bigTitle {
    margin-bottom: 103px;
}
.areaIntro .areaPlan .bigTitle .titleSub {
    margin-top: 45px;
}
.areaIntro .areaPlan .introPlan .planList li {
    position: relative;
}
.areaIntro .areaPlan .introPlan .planList li.numberOne::before {
    content: "";
    position: absolute;
    top: -8px;
    left: -8px;
    width: 100%;
    height: 97.1%;
    border: 8px solid #CC0000;
}
.areaIntro .areaPlan .introPlan .planList li:last-child.numberOne::before {
    height: calc(100% + 2px);
}
.areaIntro .areaPlan .introPlan .planList li.numberOne .numberOneSub {
    position: absolute;
    top: -52px;
    left: -8px;
    width: calc(100% + 16px);
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    background-color: #CC0000;
    padding: 5px 10px 10px;
    letter-spacing: 1px;
}
.areaIntro .areaPlan .introPlan .planList li .listCont {
    padding: 18px 21px 17px;
    margin-bottom: 29px;
}
.areaIntro .areaPlan .introPlan .planList li .listCont .contPrice .priceTax {
    font-size: 16px;
    transform: translateY(6px);
}
.areaIntro .areaPlan .introPlan .planList li .listCont .contSub {
    margin-bottom: 15px;
}
.areaIntro .areaPlan .introPlan .planList li .listCont .contMore {
    display: block;
    width: 100%;
}
.areaIntro .areaPlan .introPlan .planList li .listCont .contMore a {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background-color: #F08101;
    border-radius: 10px;
    padding: 7px 57px 6px 10px;
    line-height: 1.45;
}
.areaIntro .areaPlan .introPlan .planList li.purple .listCont .contMore a {
    background-color: #BB12D4;
}
.areaIntro .areaPlan .introPlan .planList li.blue .listCont .contMore a {
    background-color: #0095EA;
}
.areaIntro .areaPlan .introPlan .planList li.green .listCont .contMore a {
    background-color: #00C26D;
}
.areaIntro .areaPlan .introPlan .planList li .listCont .contMore a::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 18px;
    transform: translateY(-50%) rotate(90deg);
    width: 28px;
    aspect-ratio: 28/29;
    background: url(../images/common/icon-arrow.png)no-repeat top left/100%;
}
.areaIntro .areaPlan .introPlan .planList li .listCont:after {
    bottom: -21px;
    left: 49%;
    border-top-width: 35px;
}
/* areaPlan */

/* areaProblemTwo */
.areaProblemTwo {
    margin-bottom: 110px;
}
.problemHouse.areaProblemTwo {
    padding-top: 64px;
}
.areaProblemTwo .bigTitle {
    margin-bottom: 50px;
}
.areaProblemTwo .problemPhoto {
    width: 96.7%;
    padding: 0;
    margin: 0 auto;
}
/* areaProblemTwo */

.areaIntro .areaCharge {
    background: transparent;
    margin-bottom: 110px;
}
.areaIntro .areaCharge .bigTitle {
    margin-bottom: 35px;
}
.areaIntro .areaCharge .bigTitle .titleSub {
    margin-bottom: 15px;
}
.areaIntro .areaCharge .listCharge {
    width: 100%;
    max-width: 894px;
    margin: 0 auto 46px;
}
.areaIntro .areaCharge .listCharge li {
    width: calc(100% / 6 - 17px);
    margin-right: 20px;
}
.areaIntro .areaCharge .listCharge li:nth-child(6n) {
    margin-right: 0;
}
.areaIntro .areaCharge .listCharge li .chargePhoto {
    width: 100%;
    background: #fff;
    border-radius: 30px;
    padding: 10px 20px;
    margin-bottom: 17px;
}
.areaIntro .areaCharge .listCharge li .chargeTitle {
    font-size: 20px;
}
.areaIntro .areaCharge .chargeWrap {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    max-width: 1100px;
    background: #DAF0E6 url(../images/service-garbage-v2/charge-photo-v2-07.png)no-repeat bottom right 57px/173px;
    border-radius: 30px;
    padding: 30px 42px 31px;
    margin: 0 auto;
}
.areaIntro .areaCharge .chargeWrap .txtCharge {
    width: calc(100% - 243px);
    color: #2C8B60;
    line-height: 1.8;
    margin-bottom: 0;
}
.areaIntro .areaConvin .introConvin {
    flex-wrap: wrap;
    width: 100%;
    max-width: 1271px;
    margin: 0 auto 73px;
}
.areaIntro .areaConvin .introConvin .convinImg {
    position: relative;
    width: 28.3%;
    margin-left: 3.7%;
    margin-top: -26px;
}
.areaIntro .areaConvin .introConvin .convinBox {
    width: 62.7%;
}
.areaIntro .areaConvin .introConvin .convinBox .mediumTitle {
    position: relative;
    text-align: center;
    color: #000;
    font-size: 46px;
    border: 5px solid #00C26D;
    border-radius: 26px;
    background-color: #fff;
    padding: 23px 20px 25px;
    line-height: 1.21;
}
.areaIntro .areaConvin .introConvin .convinBox .mediumTitle::before {
    content: "";
    top: auto;
    bottom: -40px;
    left: 79px;
    width: 92px;
    height: auto;
    aspect-ratio: 88 / 56;
    background: url(../images/service-garbage-v2/area-convin-photo-triangle.png)no-repeat top left/100%;
}
.areaIntro .areaConvin .introConvin .convinBox .mediumTitle::after {
    content: none;
}
.areaIntro .areaConvin .introConvin .convinBox .mediumTitle .mediumSmall {
    font-size: 40px;
}
.areaIntro .areaConvin .introConvin .convinBox .convinList {
    position: relative;
    background-color: #fff;
    padding: 20px 23px 22px;
}
.areaIntro .areaConvin .introConvin .convinBox .convinList li {
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 0;
    padding: 0;
}
.areaIntro .areaConvin .introConvin .convinBox .convinList > li:not(:last-child) {
    position: relative;
    margin-bottom: 71px;
}
.areaIntro .areaConvin .introConvin .convinBox .convinList > li:not(:last-child)::before {
    content: "";
    position: absolute;
    bottom: -53px;
    left: 0;
    width: 100%;
    height: 40px;
    background: url(../images/service-garbage-v2/area-convin-photo-line.png)no-repeat top left/cover;
}
.areaIntro .areaConvin .introConvin .convinBox .convinList li .listPoint {
    font-weight: 400;
    font-size: 17px;
    background-color: #00C26D;
}
.areaIntro .areaConvin .introConvin .convinBox .convinList li .listInfo {
    width: calc(100% - 123px);
    padding: 0 28px 10px 0;
}
.areaIntro .areaConvin .introConvin .convinBox .convinList li .listInfo .listTitle {
    font-size: 24px;
    margin-bottom: 18px;
}
.areaIntro .areaConvin .introConvin .convinBox .convinList li .listInfo .listSmall li:nth-child(odd) {
    width: 35.7%;
}
.areaIntro .areaConvin .convinWrap{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    max-width: 1100px;
    background: #DAF0E6 url(../images/service-garbage-v2/area-convin-photo-02.png) no-repeat bottom right 57px / 173px;
    border-radius: 30px;
    padding: 30px 42px 31px 105px;
    margin: 0 auto;
}
.areaIntro .areaConvin .convinWrap .txtConvin {
    width: calc(100% - 290px);
    font-size: 22px;
    font-weight: bold;
    color: #2C8B60;
    line-height: 1.82;
    letter-spacing: 1px;
    margin-bottom: 0;
    text-align: center;
}
.areaNote .introNote .noteTitle,
.areaNote .introNote .noteImg,
.areaNote .introNote .noteImporta{
    display: none!important;
}
/* areaIntro  */

/* areaReportSlide */
.areaReportSlide.areaExamplePrice {
    padding: 134px 0 76px;
} 
.areaReportSlide.areaExamplePrice .bigTitle {
    margin-bottom: 18px;
    padding: 0 20px;
}
.areaReportSlide .bigTitle .titleSub {
    transform: translateY(2px);
}
/* areaReportSlide */

/* areaCustomerVoice */
.areaCustomerVoice {
    background: url(../images/service-garbage-v2/area-customer-voice-bg.jpg)no-repeat top left /100%;
    padding: 101px 0 122px;
    margin-bottom: 120px;
}
.areaCustomerVoice .bigTitle {
    color: #fff;
    margin-bottom: 131px;
}
.areaCustomerVoice .customerVoiceSlide .keen-slider__slide {
    background-color: #fff;
}
.areaCustomerVoice .customerVoiceSlide .keen-slider__slide .customerVoicePhoto {
    width: 100%;
}
.areaCustomerVoice .customerVoiceSlide .keen-slider__slide .customerVoicePhoto img {
    width: 100%;
    aspect-ratio: 380 / 204;
    object-fit: cover;
    object-position: center;
}
.areaCustomerVoice .customerVoiceSlide .keen-slider__slide .customerVoiceDetail {
    padding: 32px 30px 40px;
}
.areaCustomerVoice .customerVoiceSlide .keen-slider__slide .customerVoiceDetail .detailInfo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 9px;
}
.areaCustomerVoice .customerVoiceSlide .keen-slider__slide .customerVoiceDetail .detailInfo .infoAvatar {
    width: 50px;
    margin-right: 14px;
}
.areaCustomerVoice .customerVoiceSlide .keen-slider__slide .customerVoiceDetail .detailInfo .infoAvatar img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}
.areaCustomerVoice .customerVoiceSlide .keen-slider__slide .customerVoiceDetail .detailInfo .infoName {
    width: calc(100% - 64px);
    font-size: 16px;
    letter-spacing: 1px;
}
.areaCustomerVoice .customerVoiceSlide .keen-slider__slide .starPoint{
    padding-bottom: 6px;
    display: flex;
    align-items: center;
    padding-right: 1px;
}

.areaCustomerVoice .customerVoiceSlide .keen-slider__slide .starPoint li {
    width: 25px;
    position: relative;
    overflow: hidden;
    margin-right: 5px;
}

.areaCustomerVoice .customerVoiceSlide .keen-slider__slide .starPoint li:last-child {
    margin-right: 0;
}

.areaCustomerVoice .customerVoiceSlide .keen-slider__slide .starPoint li .scoreDetail {
    width: 100%;
    height: 25px;
    background: url('../images/common/icon_star_non.png') no-repeat top left/100%;
    padding: 0;
    background-size: 25px;
    position: relative;
    z-index: 1;
}

.areaCustomerVoice .customerVoiceSlide .keen-slider__slide .starPoint li .rating{
    position: absolute;
    top: -1px;
    left: 0;
    height: 100%;
    z-index: 0;
    background: #ffd800;
    display: block;
}
.areaCustomerVoice .customerVoiceSlide .keen-slider__slide .detailReview {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    font-size: 14px;
    line-height: 1.72;
    letter-spacing: 0.3px;
}
.areaCustomerVoice .navigation-wrapper {
    position: relative;
}
.areaCustomerVoice .arrow {
    position: absolute;
    top: 62.7%;
    left: 22px;
    transform: translateY(-50%);
    width: 73px;
    aspect-ratio: 1 / 1;
    background: url(../images/common/icon-customer-voice-prev.png) no-repeat top left / 100%;
    border-radius: 50%;
    cursor: pointer;
}
.areaCustomerVoice .arrow.arrow--right {
    left: auto;
    right: 22px;
    background-image: url(../images/common/icon-customer-voice-next.png);
}
/* areaCustomerVoice */

/* areaSale */
.areaSale {
    margin-bottom: 109px;
}
.areaSale .bigTitle {
    margin-bottom: 35px;
}
.areaSale .bigTitle .titleSub {
    font-size: 34px;
}
.areaSale .saleBtn {
    width: 100%;
    max-width: 800px;
    text-align: center;
    margin: 0 auto;
}
.areaSale .saleBtn a{
    display: inline-block;
}
.houseSale.areaSale .saleBtn  {
    max-width: 672px;
}
/* areaSale */

/* areaNote */
.areaNote .areaFaq {
    padding-top: 28px;
}
.areaNote .noteBig {
    display: none;
}
/* areaNote */

.areaCorres .bigTitle {
    margin-bottom: -2px;
}
.areaCorres .corresPhoto {
    width: 105.3%;
    margin: -95px  auto -147px;
    transform: translateX(-5.3%);
}

/* areaStep */
.areaStep {
    content-visibility: initial !important;
    padding: 55px 0 32px;
}
.areaStep .wrapTitle {
    position: relative;
    justify-content: center;
}
.areaStep .wrapTitle .bigTitle {
    padding-right: 5px;
}
.areaStep .wrapTitle .titlePhoto {
    position: absolute;
    right: -32px;
    top: -102px;
    width: 346px;
    height: 400px;
    overflow: hidden;
    margin: 0;
    z-index: 0;
}
.areaStep .listStep {
    position: relative;
    background-color: #fff;
    z-index: 1;
}
.areaStep .listStep>li  {
    position: relative;
    flex-wrap: wrap;
    padding: 20px 21px;
}
.areaStep .listStep>li:not(:last-child) {
    margin-bottom: 31px;
}
.areaStep .listStep>li:not(:last-child)::before {
    content: "";
    position: absolute;
    bottom: -31px;
    left: 0;
    width: 100%;
    height: 39px;
    background: url(../images/service-garbage-v2/area-step-photo-line.png) no-repeat top left / cover;
}
.areaStep .listStep>li .wrapNumberStep {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 214px;
    margin-right: 30px;
    padding: 31px 10px 20px 14px;
    background-color: #DAF0E6;
}
.areaStep .listStep>li .numberStep {
    width: 100%;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 3.6px;
    color: #2C8B60;
    padding: 0;
    margin: 0;
}
.areaStep .listStep>li .numberStep span {
    display: block;
    width: 100%;
    font-size: 50px;
    font-weight:700;
    letter-spacing: 6px;
    margin-top: -9px;
}
.areaStep .listStep>li .wrapStep {
    align-items: center;
    width: calc(100% - 244px);
    border: none;
    padding: 0;
}
.areaStep .listStep>li .wrapStep .stepPhoto {
    margin-right: 36px;
}
.areaStep .listStep>li .wrapStep .boxStep {
    width: calc(100% - 235px);
    margin-top: 11px;
}
.areaStep .listStep>li .wrapStep .boxStep .titleStep {
    margin-bottom: 20px;
}
.areaStep .listStep>li .wrapStep .boxStep .listInquiry li {
    margin-bottom: 10px;
    letter-spacing: 1px;
}
.areaStep .listStep>li .wrapStep .boxStep .listInquiry li span {
    margin-right: 3px;
}
/* areaStep */

.areaCorres {
    background: transparent;
}

@media(min-width: 1131px) {
    .areaIntro .areaPlan .introPlan .planList li .listCont .contPrice {
        letter-spacing: 0.9px;
        margin: -38px 0 8px;
    }
    .areaIntro .areaPlan .introPlan .planList li.green .listCont .contPrice {
        margin: -22px 0 -10px;
    }
}
@media (max-width: 1350px) and (min-width: 1264px) {
    .bigTitle {
        font-size: 35px
    }
    .bigTitle .titleSub {
        font-size: 18px;
    }
}

@media (max-width: 1300px) and (min-width: 769px) {
    .areaServiceCategory .cateWrap .serviceContact {
        padding: 0 30px;
    }


    .areaCorres .corresPhoto {
        margin-top: -55px;
    }
}
@media (max-width: 1200px) and (min-width: 769px) {
    .areaPriceChart .chartDetail {
        padding: 40px 30px;
    }
    .areaPriceChart .chartDetail .chartWrap {
        width: calc(100% / 3 - 33px);
    }
    .areaPriceChart .chartDetail .chartWrap:not(:last-child) {
        margin-right: 49px;
    }
    .areaPriceChart .chartDetail .chartWrap .chartBox .chartList li .photo {
        width: 100px;
    }
    .areaPriceChart .chartDetail .chartWrap .chartBox .chartList li .chartInfo {
        width: calc(100% - 120px);
    }
    .areaPriceChart .chartDetail .chartWrap .chartBox .chartList li .chartInfo .name {
        font-size: 18px;
    }
    .areaPriceChart .chartDetail .chartWrap .chartBox .chartList li .chartInfo .price .number {
        font-size: 32px;
    }
    .areaPriceChart .chartDetail .chartWrap .chartBox .chartList li .chartInfo .price {
        font-size: 16px;
    }
}
@media (max-width: 1180px)  and (min-width: 769px){
    .areaServiceCategory .cateWrap .catePhoto {
        width: 100%;
    }
    .areaServiceCategory .cateWrap .serviceContactWrap {
        width: 100%;
        border-radius: 0;
    }
    .areaServiceCategory .cateWrap .serviceContact {
        padding: 30px;
        margin: 0;
    }
}
@media (max-width: 1130px)  and (min-width: 769px){
    .areaIntro .areaPlan .introPlan .planList li .listCont .contMore a {
        padding-right: 35px;
    }
    .areaIntro .areaPlan .introPlan .planList li .listCont .contMore a::before {
        right: 10px;
        width: 20px;
    }
    .areaPlan .introPlan .planList li .listCont .contPrice {
        font-size: 40px;
        margin: -20px 0 15px;
    }
    .areaPlan .introPlan .planList li.green .listCont .contPrice {
        font-size: 26px;
        margin: -4px 0;
    }
}
@media (max-width: 1100px)  and (min-width: 769px){
    .areaIntro .areaConvin .introConvin .convinBox .convinList li .listInfo .listTitle {
        font-size: 20px;
    }
    .areaIntro .areaConvin .introConvin .convinBox .mediumTitle {
        font-size: 40px;
    }
    .areaIntro .areaConvin .introConvin .convinBox .mediumTitle .mediumSmall {
        font-size: 35px;
    }
    .areaIntro .areaConvin .introConvin .convinImg {
        margin-left: -3%;
    }
    .areaIntro .areaConvin .introConvin .convinBox {
        width: 73.9%;
    }
    .areaIntro .areaConvin .introConvin .convinBox .convinList li .listInfo .listSmall li:nth-child(odd), 
    .areaIntro .areaConvin .introConvin .convinBox .convinList li .listInfo .listSmall li {
        width: 100%;
    }
}
@media (max-width: 1050px) and (min-width: 769px) {
    .areaPriceChart .chartDetail .chartWrap {
        width: calc(100% / 3 - 20px);
    }
    .areaPriceChart .chartDetail .chartWrap:not(:last-child) {
        margin-right: 30px;
    }
    .areaPriceChart .chartDetail .chartWrap .chartBox .chartList li .photo {
        width: 85px;
    }
    .areaPriceChart .chartDetail .chartWrap .chartBox .chartList li .chartInfo {
        width: calc(100% - 95px);
    }
    .areaPriceChart .chartDetail .chartWrap .chartBox .chartList li .chartInfo .name {
        font-size: 16px;
    }
    .areaPriceChart .chartDetail .chartWrap .chartBox .chartList li .chartInfo .price .number {
        font-size: 28px;
    }
    .areaPriceChart .chartDetail .chartWrap .chartBox .chartList li .chartInfo .price {
        font-size: 14px;
    }
}
@media (max-width: 1000px)  and (min-width: 951px){
    .areaIntro .areaPlan .introPlan .planList li .listCont .contMore a {
        font-size: 13px;
    }
}
@media (max-width: 950px) and (min-width: 769px) {
    .areaIntro .areaPlan .introPlan .planList li.numberOne::before {
        height: 101%;
    }
    .areaIntro .areaPlan .introPlan .planList li.green.numberOne::before {
        height: calc(100% + 17px);
    }
    .areaStep .wrapTitle .bigTitle {
        margin-bottom: 70px;
    }
    .areaStep .wrapTitle .titlePhoto {
        right: -30px;
        top: -39%;
        width: 30%;
    }
    .areaCorres .corresPhoto {
        width: 100%;
        margin-bottom: -75px;
        transform: translateX(0);
    }
}
@media (max-width: 900px) and (min-width: 769px) {
    .areaIntro .areaConvin .introConvin .convinBox .mediumTitle {
        font-size: 36px;
    }
    .areaIntro .areaConvin .introConvin .convinBox .mediumTitle .mediumSmall {
        font-size: 30px;
    }
}
@media (min-width: 769px) {
    .areaServiceCategory .cateWrap .serviceContact .offerNote {
        font-size: 33px;
    }
    .areaServiceCategory .cateWrap .serviceContact .offerNote .number {
        font-size: 48px;
    }
    .areaIntro .areaPlan .introPlan {
        margin-bottom: 0;
    }
    .areaIntro .areaPlan .introPlan .planList li .listCont .contMore a:hover {
        opacity: 0.7;
    }
    .areaProblemTwo .problemPhoto.problemMovingPhoto {
        width: 97.7%;
    }
}

@media(max-width: 768px) {
    .serviceContact .offerSub {
        margin-bottom: 12px;
    }
    .serviceContact .btnPhone a {
        background-position-x: 39px;
    }

    /* areaServiceCategory */
    .areaServiceCategory {
        padding: 7px 0 0;
        margin-bottom: 50px;
    }
    .areaServiceCategory .inner {
        padding: 0;
    }
    .areaServiceCategory .cateWrap .catePhoto {
        width: 100%;
    }
    .areaServiceCategory .cateWrap .catePhoto img {
        width: 100%;
    }
    .areaServiceCategory .cateWrap .serviceContact {
        padding: 12px 25px 10px;
    }
    .serviceContact .btnPhone a::before {
        content: none;
    }
    .serviceContact .btnBox a {
        padding: 7px 10px 8px 24px;
    }
    .serviceContact .btnBox.mail a {
        padding: 7px 10px 8px 30px;
    }
    .serviceContact .btnBox.mail a .iconBtn {
        width: 18px;
        transform: translateY(4px);
        margin-right: 10px;
    }
    .areaServiceCategory .cateWrap .serviceContactWrap {
        width: 100%;
        padding-bottom: 22px;
        border-radius: 0;
    }
    .areaServiceCategory .cateWrap .pageAnchor {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 14px 15px 17px;
        margin: 0;
    }
    .areaServiceCategory .cateWrap .pageAnchor .pageAnchorList {
        justify-content: flex-start;
    }
    .areaServiceCategory .cateWrap .pageAnchor .pageAnchorList li {
        position: relative;
        width: 48%;
        border: none;
        padding: 0;
        margin: 10px 0;
    }
    .areaServiceCategory .cateWrap .pageAnchor .pageAnchorList li:first-child, .areaServiceCategory .cateWrap .pageAnchor .pageAnchorList li:nth-child(5) {
        border-left: none;
    }
    .areaServiceCategory .cateWrap .pageAnchor .pageAnchorList li:not(:nth-child(even)) {
        margin-right: 4%;
    }
    .areaServiceCategory .cateWrap .pageAnchor .pageAnchorList li:not(:nth-child(even))::before {
        content: "";
        position: absolute;
        top: 41%;
        right: -4%;
        transform: translateY(-50%);
        width: 1px;
        height: 100%;
        background-color: #00C26D;
    }
    .areaServiceCategory .cateWrap .pageAnchor .pageAnchorList li a {
        font-size: 15px;
        text-align: center;
        padding: 4px 40px 4px 7px;
    }
    .areaServiceCategory .cateWrap .pageAnchor .pageAnchorList li a::after {
        right: 15px;
    }
    /* areaServiceCategory */

    .bigTitle {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        font-size: 30px;
        line-height: 1.55;
    }
    .bigTitle .titleSub {
        display: block;
        width: 100%;
        font-size: 14px;
        line-height: 1.5;
    }

    /* areaPriceChart */
    .areaPriceChart {
        margin-bottom: 96px;
    }
    .areaPriceChart .bigTitle {
        margin-bottom: 35px;
    }
    .areaPriceChart .chartDetail {
        padding: 22px 15px 12px;
    }
    .areaPriceChart .chartDetail .chartWrap {
        width: 100%;
    }
    .areaPriceChart .chartDetail .chartWrap:not(:last-child) {
        margin: 0 0 9px;
    }
    .areaPriceChart .chartDetail .chartWrap .chartBox:not(:last-child) {
        margin-bottom: 10px;
    }
    .areaPriceChart .chartDetail .chartWrap .chartBox .chartName {
        font-size: 20px;
        text-align: center;
        border-bottom: 1px solid #00C26D;
        padding-bottom: 5px;
        margin-bottom: 17px;
    }
    .areaPriceChart .chartDetail .chartWrap .chartBox .chartList {
        display: flex;
        flex-wrap: wrap;
    }
    .areaPriceChart .chartDetail .chartWrap .chartBox .chartList li {
        align-items: flex-start;
        width: calc(25% - 10px);
    }
    .areaPriceChart .chartDetail .chartWrap .chartBox .chartList li:not(:last-child) {
        margin-bottom: 0;
        margin-right: 13px;
    }
    .areaPriceChart .chartDetail .chartWrap .chartBox .chartList li .photo {
        width: 60px;
    }
    .areaPriceChart .chartDetail .chartWrap .chartBox .chartList li .photo img {
        width: 100%;
    }
    .areaPriceChart .chartDetail .chartWrap .chartBox .chartList li .chartInfo {
        width: calc(100% - 70px);
        margin-top: -1px;
    }
    .areaPriceChart .chartDetail .chartWrap .chartBox .chartList li .chartInfo .name {
        font-size: 13px;
        line-height: 1.35;
        margin-bottom: 6px;
    }
    .areaPriceChart .chartDetail .chartWrap .chartBox .chartList li .chartInfo .price {
        font-size: 13px;
        line-height: 0.8;
    }
    .areaPriceChart .chartDetail .chartWrap .chartBox .chartList li .chartInfo .price .number {
        font-size: 18px;
        margin-right: 3px;
    }
    /* areaPriceChart */

    /* areaIntro */
    .areaIntro .areaPlan .inner {
        padding: 0px 3.4%;
    }
    .areaIntro .areaPlan .bigTitle {
        margin-bottom: 52px;
    }
    .areaIntro .areaPlan .bigTitle .titleSub {
        text-align: left;
        width: 80%;
        line-height: 1.7;
        letter-spacing: 1px;
        margin-top: 16px;
    }
    .areaPlan .introPlan .planList li {
        width: 48.5%;
        margin-bottom: 42px;
    }
    .areaIntro .areaPlan .introPlan .planList li .listCont {
        padding: 11px 10px;
        margin-bottom: 9px;
    }
    .areaIntro .areaPlan .introPlan .planList li .listCont .contPrice .priceTax {
        font-size: 9px;
        transform: translateY(8px);
        letter-spacing: -1px;
    }
    .areaIntro .areaPlan .introPlan .planList li .listCont .contPrice {
        font-size: 40px;
        letter-spacing: 0;
        margin: -30px 0 2px;
    }
    .areaIntro .areaPlan .introPlan .planList li.green .listCont .contPrice {
        font-size: 27px;
        margin: -18px 0 -13px;
    }
    .areaPlan .introPlan .planList li .listCont .contPrice .priceY {
        transform: translateY(-4px);
        display: inline-block;
    }
    .areaIntro .areaPlan .introPlan .planList li .listCont .contSub {
        margin-bottom: 7px;
    }
    .areaIntro .areaPlan .introPlan .planList li .listCont .contMore a {
        font-size: 12px;
        padding: 5px 28px 5px 10px;
    }
    .areaIntro .areaPlan .introPlan .planList li .listCont .contMore a::before {
        top: 50%;
        right: 12px;
        transform: translateY(-50%) rotate(0);
        width: 14px;
    }
    .areaIntro .areaPlan .introPlan .planList li.numberOne .numberOneSub {
        top: -28px;
        left: -4px;
        width: calc(100% + 8px);
        font-size: 12px;
        padding: 4px 10px;
    }
    .areaIntro .areaPlan .introPlan .planList li.numberOne::before {
        top: -4px;
        left: -4px;
        border-width: 4px;
        height: calc(100% + 12px);
    }
    .areaIntro .areaPlan .introPlan .planList li:last-child.numberOne::before {
        height: 98.7%;
    }
    .areaIntro .areaPlan .introPlan .planList li .listCont:after {
        bottom: -12px;
        left: 49%;
        border-left-width: 10px;
        border-right-width: 10px;
        border-top-width: 13px;
    }
    .areaPlan .introPlan .planList li.orange .listImg img {
        width: 84%;
    }
    /* areaIntro */

    .areaIntro {
        margin-bottom: 60px;
    }
    .areaIntro .areaPlan {
        margin-bottom: 38px;
    }
    .areaProblemTwo {
        margin-bottom: 70px;
    }
    .problemHouse.areaProblemTwo,
    .problemMoving.areaProblemTwo {
        padding-top: 51px;
    }
    .areaProblemTwo .bigTitle {
        margin-bottom: 37px;
    }
    .areaIntro .areaCharge .bigTitle .titleSub {
        font-size: 13px;
        margin-bottom: 10px;
    }
    .areaProblemTwo .problemPhoto {
        width: 100.2%;
        margin: 0 -3.5% 0 -0.1%;
        max-width: none;
    }
    .areaProblemTwo .problemPhoto.problemMovingPhoto {
        margin-bottom: -18px;
    }
    .areaProblemTwo .problemPhoto.problemHousePhoto {
        width: 96.7%;
        margin: -9px -3.5% -12px 1.6%;
    }
    .areaIntro .areaCharge {
        margin-bottom: 48px;
    }
    .areaIntro .areaCharge .bigTitle {
        margin-bottom: 39px;
    }
    .areaIntro .areaCharge .bigTitle .titleSub {
        margin-bottom: 4px;
    }
    .areaIntro .areaCharge .bigTitle {
        font-size: 30px;
        margin-bottom: 32px;
    }
    .areaIntro .areaCharge .listCharge {
        width: 92%;
    }
    .areaIntro .areaCharge .listCharge li {
        width: calc(100% / 6 - 8px);
        margin-right: 12px;
    }
    .areaIntro .areaCharge .listCharge li:nth-child(3n) {
        margin-right: 0;
    }
    .areaCharge .listCharge li:nth-child(-n + 6) {
        margin-top: 7px;
        margin-bottom: 0;
    }
    .areaIntro .areaCharge .listCharge li .chargePhoto {
        padding: 0 3px;
        background: transparent;
        margin-bottom: 5px;
    }
    .areaIntro .areaCharge .listCharge li .chargeTitle {
        font-size: 15px;
    }
    .areaIntro .areaCharge .chargeWrap {
        width: 102.6%;
        max-width: 450px;
        background: #DAF0E6 url(../images/service-garbage-v2/people-photo-sp.png)no-repeat bottom right 8px/ 86px;
        padding: 24px 29px 25px;
        margin: 0 auto;
    }
    .areaIntro .areaCharge .chargeWrap .txtCharge {
        width: 71.2%;
        font-size: 14px;
        line-height: 1.79;
        letter-spacing: 1px;
        text-align: justify;
    }
    .areaIntro .areaConvin .introConvin .convinBox {
        width: 100%;
    }
    .areaIntro .areaConvin .introConvin {
        margin-bottom: 19px;
    }
    .areaIntro .areaConvin .introConvin .convinBox .mediumTitle {
        width: 100%;
        max-width: 400px;
        font-size: 24px;
        padding: 13px 10px 15px;
        line-height: 1.25;
        letter-spacing: 0.9px;
        margin: 0 auto 230px;
    }
    .areaIntro .areaConvin .introConvin .convinBox .mediumTitle::before {
        left: auto;
        bottom: -25px;
        right: 29px;
        width: 58px;
        background: url(../images/service-garbage-v2/area-convin-photo-triangle-sp.png) no-repeat top left / 100%;
    }
    .areaIntro .areaConvin .introConvin .convinBox .mediumTitle .mediumSmall {
        font-size: 22px;
    }
    .areaIntro .areaConvin .introConvin .convinImg {
        position: absolute;
        width: 258px;
        top: 69px;
        left: 51.2%;
        margin: 0;
        transform: translateX(-50%);
    }
    .areaIntro .areaConvin .introConvin .convinBox .convinList {
        padding: 11px 12px 15px;
    }
    .areaIntro .areaConvin .introConvin .convinBox .convinList li {
        align-items: initial;
    }
    .areaIntro .areaConvin .introConvin .convinBox .convinList > li:not(:last-child) {
        margin-bottom: 56px;
    }
    .areaIntro .areaConvin .introConvin .convinBox .convinList > li:not(:last-child)::before {
        left: -12px;
        bottom: -53px;
        height: 42px;
        width: calc(100% + 24px);
        background-position-x: center;
    }
    .areaIntro .areaConvin .introConvin .convinBox .convinList li .listPoint {
        width: 60px;
    }
    .areaIntro .areaConvin .introConvin .convinBox .convinList li .listInfo {
        width: calc(100% - 69px);
        padding: 0 0px 6px 0;
    }
    .areaIntro .areaConvin .introConvin .convinBox .convinList li .listInfo .listSmall li:nth-child(odd), 
    .areaIntro .areaConvin .introConvin .convinBox .convinList li .listInfo .listSmall li {
        width: 100%;
    }
    .areaIntro .areaConvin .introConvin .convinBox .convinList li .listPoint .pointNum {
        font-size: 22px;
        margin-bottom: 0;
    }
    .areaIntro .areaConvin .introConvin .convinBox .convinList li .listInfo .listTitle {
        font-size: 15px;
        margin-bottom: 8px;
    }
    .areaConvin .introConvin .convinBox .convinList li .listPoint span {
        font-size: 10px;
        margin-bottom: -6px;
    }
    .areaIntro .areaConvin .convinWrap {
        width: 100%;
        max-width: 450px;
        background: #DAF0E6 url(../images/service-garbage-v2/people-photo-sp.png) no-repeat bottom right 2px / 24.7%;
        padding: 24px 29px 26px;
        margin: 0 auto;
    }
    .areaIntro .areaConvin .convinWrap .txtConvin {
        width: 75.2%;
        font-size: 14px;
        line-height: 1.79;
        letter-spacing: 1px;
        text-align: left;
    }
    .areaReportSlide.areaExamplePrice {
        padding: 85px 0 112px;
    }
    .areaReportSlide.areaExamplePrice .bigTitle {
        padding: 0 4%;    
    }
    .areaReportSlide.areaExamplePrice .bigTitle .titleSub {
        margin-top: 10px;
    }
    .areaCustomerVoice {
        background: url(../images/service-garbage-v2/area-customer-voice-bg-sp.jpg) no-repeat top left / 100%;
        padding: 66px 0 30px;
        margin-bottom: 107px;
    }
    .areaCustomerVoice .bigTitle {
        margin-bottom: 82px;
    }
    .areaCustomerVoice .customerVoiceSlide .keen-slider__slide .detailReview {
        -webkit-line-clamp: 5;
    }
    .areaCustomerVoice .arrow {
        top: 50.8%;
        left: 2px;
        width: 42px;
    }
    .areaCustomerVoice .arrow.arrow--right {
        left: auto;
        right: 2px;
    }
    .areaCustomerVoice .dots {
        display: flex;
        padding: 20px 0;
        justify-content: center;
    }
    .areaCustomerVoice .dot {
        border: none;
        width: 12px;
        height: 12px;
        background: #D9D9D9;
        border-radius: 50%;
        margin: 0 6.5px;
        cursor: pointer;
    }
    .areaCustomerVoice .dot:focus {
        outline: none;
    }
    .areaCustomerVoice .dot--active {
        background: #2C8B60;
    }
    .areaSale .bigTitle {
        margin-bottom: 30px;
    }
    .areaSale .bigTitle .titleSub {
        font-size: 21px;
        margin-top: -3px;
    }
    .areaStep {
        overflow: hidden;
        padding: 100px 0 32px;
    }
    .areaStep .wrapTitle .bigTitle {
        width: 100%;
        font-size: 30px;
        padding: 0;
        margin-bottom: 8px;
    }
    .areaStep .wrapTitle .titlePhoto {
        width: 42%;
        top: -143.1%;
        right: -27%;
    }
    .areaStep .inner {
        padding: 0 8%;
    }
    .areaStep .listStep>li {
        padding: 30px;
    }
    .areaStep .listStep>li:not(:last-child) {
        margin-bottom: 25px;
    }
    .areaStep .listStep>li:not(:last-child)::before {
        bottom: -15px;
        height: 25px;
        background-image: url(../images/service-garbage-v2/area-step-photo-line-sp.png);
        background-position-x: center;
    }
    .areaStep .listStep>li .wrapNumberStep {
        width: 100%;
        padding: 11px 10px 6px 14px;
        margin: 0;
    }
    .areaStep .listStep>li .numberStep {
        font-size: 14px;
        letter-spacing: 2.6px;
    }
    .areaStep .listStep>li .numberStep span {
        display: inline-block;
        font-size: 30px;
        width: auto;
        vertical-align: middle;
        margin-top: -7px;
        margin-left: 13px;
        letter-spacing: 4px;
    }
    .areaStep .listStep>li .wrapStep {
        flex-wrap: wrap;
        width: 100%;
    }
    .areaStep .listStep>li .wrapStep .boxStep .titleStep {
        text-align: center;
        font-size: 18px;
        margin-bottom: 8px;
    }
    .areaStep .listStep>li .wrapStep .stepPhoto {
        width: 100%;
        margin: 0 0 13px;
    }
    .areaStep .listStep>li .wrapStep .stepPhoto img {
        width: 100%;
    }
    .areaStep .listStep>li .wrapStep .boxStep {
        width: 100%;
        margin: 0;
    }
    .areaStep .listStep>li .wrapStep .boxStep .listInquiry {
        margin-left: 0;
        padding: 0 3px;
    }
    .areaStep .listStep>li .wrapStep .boxStep .listInquiry li {
        margin-bottom: 7px;
    }
    .areaStep .listStep>li .wrapStep .boxStep .listInquiry li span {
        font-size: 14px;
        line-height: 1.55;
        margin: 0;
    }
    .areaStep .listStep>li .wrapStep .boxStep .listInquiry li span:first-child {
        margin-right: 3px;
    }
    .areaStep .listStep>li .wrapStep .boxStep .listInquiry li span:last-child {
        padding-right: 17px;
    }

    .areaCorres {
        padding-top: 94px;
    }
    .areaCorres .corresPhoto {
        width: 100%;
        margin: 0 auto -55px;
        transform: translateX(0);
    }
    .areaCorres .bigTitle {
        margin-bottom: -9%;
    }
    .areaSale {
        margin-bottom: 112px;
    }
    .areaNote .introNote {
        padding: 51px 0 0;
    }
}


@media(max-width: 430px) {

    .areaServiceCategory .cateWrap .serviceContactWrap {
        width: 100%;
    }
    .areaServiceCategory .cateWrap .pageAnchor {
        width: 100%;
    }

    .areaPriceChart .chartDetail .chartWrap .chartBox .chartList li {
        width: calc(50% - 13px);
        margin-bottom: 24px;
    }
    .areaPriceChart .chartDetail .chartWrap .chartBox .chartList li:not(:last-child) {
        margin-bottom: 24px;
        margin-right: 0;
    }
    .areaPriceChart .chartDetail .chartWrap .chartBox .chartList li:not(:nth-child(even)) {
        margin-right: 20px;
    }
    .areaPriceChart .chartDetail .chartWrap .chartBox .chartList li .photo {
        width: 42px;
    }
    .areaPriceChart .chartDetail .chartWrap .chartBox .chartList li .chartInfo {
        width: calc(100% - 53px);
    }

    .areaIntro .areaCharge .chargeWrap {
        width: 102.6%;
        margin-left: -1.3%;
    }
    .areaIntro .areaCharge .listCharge li {
        width: calc(100% / 3 - 8px);
        margin-right: 12px;
    }
    .areaCharge .listCharge li:nth-child(-n + 6) {
        margin-top: 7px;
    }

    .areaStep .listStep>li {
        padding: 10px;
    }
    .areaStep .listStep>li:not(:last-child) {
        margin-bottom: 5px;
    }
    
    .areaCorres .corresPhoto {
        width: 109%;
        margin: 0 auto -55px -4.5%;
    }
}