@charset "utf-8";

:root{
   --border-primary: 2px solid #2C4FCA;
}

/* 폰트 */
@font-face {
    font-family: 'GmarketSans';
    font-weight: 300;
    font-style: normal;
    src: local('GmarketSans'),
    url('../fonts/GmarketSansLight.eot'),
    url('../fonts/GmarketSansLight.otf') format('opentype'),
    url('../fonts/GmarketSansLight.ttf') format('truetype'),
    url('../fonts/GmarketSansLight.woff') format('woff'),
    url('../fonts/GmarketSansLight.woff2') format('woff2')
}
@font-face {
    font-family: 'GmarketSans';
    font-weight: 500;
    font-style: normal;
    src: local('GmarketSans'),
    url('../fonts/GmarketSansMedium.eot'),
    url('../fonts/GmarketSansMedium.otf') format('opentype'),
    url('../fonts/GmarketSansMedium.ttf') format('truetype'),
    url('../fonts/GmarketSansMedium.woff') format('woff'),
    url('../fonts/GmarketSansMedium.woff2') format('woff2')
}
@font-face {
    font-family: 'GmarketSans';
    font-weight: 700;
    font-style: normal;
    src: local('GmarketSans'),
    url('../fonts/GmarketSansBold.eot'),
    url('../fonts/GmarketSansBold.otf') format('opentype'),
    url('../fonts/GmarketSansBold.ttf') format('truetype'),
    url('../fonts/GmarketSansBold.woff') format('woff'),
    url('../fonts/GmarketSansBold.woff2') format('woff2')
}

/* common layout */
.show-mobile{display: none;}
#reusable{color: #000000; font-family:'NS', sans-serif; letter-spacing: 0; line-height: 1.6; font-size: 24px;}
#reusable main .inner{max-width: 1500px; margin: 0 auto;}
#reusable .section01 {padding: 100px 0;}
#reusable .section02{padding: 100px 0; background: #F5F5F5;}
#reusable .section03{padding: 100px 0; background: #2C4FCA; color: #ffffff}
.section-text{text-align: center;}
[class*=title]{font-size: 50px; font-weight: 500; font-family: "GmarketSans", sans-serif; line-height: 1; }
.section-title{font-weight: 700;}
.section-title + .sub-text{margin-top: 18px;}
.sub-text .fs-small{font-size: 20px; margin-bottom: 20px;}
.color-green{color: #ACC231;}
.color-blue{color: #2C4FCA;}
.bold{font-weight: 700}

.btn-round{display: inline-block; line-height: 60px; width: 360px; height: 60px; font-size: 24px; font-family: 'NSB', sans-serif;  background: #2C4FCA; color: #ffffff; border-radius: 50px; margin-top: 30px; text-align: center;}
.btn-round.green{ background: #ACC231; color:#ffffff;}
.btn-round.white{ background: #FFFFFF; color: #2c4fca;}
/*.btn-round:visited{color: #ffffff;}
.btn-round.white:visited{color: #2c4fca;}
*/

/* 배너 */
#banner{margin-top: 125px; padding-top: 58px; text-align: center}
#banner .banner-title01{margin-bottom: 23px;}
#banner .banner-title02{font-size: 70px; font-weight: 700}
#banner img{width: 100%; margin-top: 42px;}

/* 서비스 소개 */
.about-reusable .section-content{margin-top: 95px; background: #2C4FCA;  border-radius: 197px; display: flex; align-items: center; padding: 0 69px 0 0; width: 100%; box-sizing: border-box; overflow: hidden;}
.about-reusable .section-content .left-img{width: 22%; padding-left: 100px; margin-top: 50px;}
.about-reusable .section-content .about-inner{display: flex; align-items: center; justify-content: space-between; background: #ffffff; border-radius: 150px; height: 100%; padding: 20px 0 20px 74px; margin-left: auto;}
/*.about-reusable .section-content .txt-cont{flex: 1;}*/
.about-reusable .section-content .about-title{font-size: 40px; color: #2C4FCA; font-weight: 700; margin-bottom: 28px; }
.about-reusable .section-content .right-img{margin-right: -70px; width: 45%;}

/* 세척과정 */
.cleaning {margin-top: 100px;}
.cleaning .section-content {margin-top: 40px;}
.cleaning .section-content img {width: 100%}
.cleaning .section-content .steps-wrap {display: flex; justify-content: space-between; margin: 0 auto; max-width: 87%; }
.cleaning .section-content .steps-wrap .step{text-align: center;}
.cleaning .section-content .steps-wrap .step .label{background: #2C4FCA; border-radius: 50px; color: #ffffff; padding: 4px 24px; font-size: 16px;}
.cleaning .section-content .steps-wrap .step .eng{font-size: 16px;}

/* 다회용기를 선택하면 */
.detail-wrap{display: flex; justify-content: space-between; width: 100%; gap: 19px; margin-top: 40px; }
.detail-wrap .detail{width: calc( (100% - 38px) /3 ); background: #ffffff; border: var(--border-primary); border-radius: 10px; padding: 30px 20px; position: relative; display: flex; align-items: center; gap: 30px; box-sizing: border-box;}
.detail-wrap .detail .label{width: 50px; height: 50px; border-radius: 50%; background: #2C4FCA; color: #ffffff; font-size: 20px; font-weight: 800; display: flex; justify-content: center; align-items: center; position: absolute; top: -25px; left: 50%; transform: translateX(-50%)}
.detail-wrap .detail .detail-point{font-size: 30px; font-weight: 800; font-family: 'NSEB', sans-serif; margin-bottom: 8px;}

.plus-advantage{display: flex; justify-content: center; margin-top: 40px;}
.plus-advantage p{ color:#ffffff; display: flex; background: #2C4FCA; border-radius: 50px; padding: 12px 24px; }
.plus-advantage img{margin-right: 6px; vertical-align: middle;}

.advantage-wrap{margin-top: 40px; text-align: center; display: flex; justify-content: space-between; position: relative;}
.advantage-wrap .advantage{width: calc((100% - 20px) / 2); padding: 40px 0 30px; background: #ffffff; border: var(--border-primary); border-radius: 10px; position: relative;}
.advantage-wrap .advantage a:visited{color: #ffffff;}
.advantage-wrap .advantage a:link{color: #fff;}
.advantage-wrap .advantage .label{background: #ffffff; border: var(--border-primary); border-radius: 10px; height: 50px; padding: 0 30px; display: flex; justify-content: center; align-items: center; position: absolute; top: -25px; left: 50%; transform: translateX(-50%); font-family: "GmarketSans", sans-serif; font-weight: 800; font-size: 26px; }
.advantage-wrap .advantage .label p{min-width: fit-content}
.advantage-wrap .advantage .label .green{color:#598F61;}
.advantage-wrap .advantage .label .blue{color: #5280A5;}
.advantage-wrap .advantage .label img{display: block;}
.advantage-wrap .advantage .advantage-point{font-family: 'NSEB', sans-serif; margin-bottom: 6px;}
.advantage-wrap .advantage .advantage-subs{font-size: 20px;}
.advantage-wrap .advantage-double{width: 118px; height: 118px; border-radius: 50%; background: #2c4fca; color: #ffffff; font-size: 16px; font-weight: 800; display: flex; justify-content: center; align-items: center; flex-direction: column;gap: 6px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 100;}

/* 주문방법 */
.order .section-content{margin-top: 50px; display: flex; justify-content: space-between}
.order-step{width: calc((100% - 60px)/3); position: relative;}
.order-step img{border: 1px solid #2c4fca; border-radius: 53px;}
.order-step .howto{background: #2c4fca; color: #ffffff; text-align: center; border-radius: 53px; padding: 30px 0 20px; position: absolute; bottom: 0; width: 100%;}
.order-step .howto .label{background: #ffffff; color: #2c4fca; border: var(--border-primary); display: inline-block; width: 53px; height: 53px; line-height: 53px; border-radius: 50px; font-size: 20px; font-family: 'NSEB',sans-serif; position:  absolute; top: -26.5px; left: 50%; transform: translateX(-50%) }

/* 반납방법 */
.return {margin-top: 100px;}
.return .section-content{margin-top: 50px; display: flex; justify-content: space-between;}
.return .return-step{border: 1px solid #D7D7D7; padding: 20px; display: flex; flex-direction: column; align-items: center;}
.return .return-step img{margin-bottom: 20px;}
.return .return-step .label{background: #2c4fca; color: #ffffff;  width: 130px; height: 40px; line-height: 40px; border-radius: 50px; margin-bottom: 12px;}
.return .return-step p{text-align: center; font-family: 'NSB', sans-serif;}

/* 할인받아 이용 */
.discount .section-content{margin-top: 40px; padding: 0 20px; display: flex; flex-direction: column; align-items: center;}

/* 가맹점 */
.franchise .section-title {display:inline-block; position: relative;}
.franchise .section-title .franchise-badge{position: absolute; right: -104px; top: -52px;}
.franchise .section-content {margin-top: 50px;}
.franchise .section-content .benefit-wrap{display: flex; justify-content: center; gap: 20px;}
.franchise .section-content .benefit-wrap .benefit .benefit-cont{background: #404040; color: #ffffff; display: flex; align-items: center; gap: 30px; padding: 30px; height: 213px; box-sizing:border-box;}
.franchise .section-content .benefit-wrap .benefit .benefit-cont .benefit-detail .phrase{font-size: 30px;}
.franchise .section-content .benefit-wrap .benefit .benefit-cont .benefit-detail .explanation{font-size: 20px; margin-top: 9px;}
.franchise .section-content .benefit-btn-wrap{display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 50px;}
.franchise .section-content .benefit-btn-wrap .apply-btn{ background: #2c4fca; color: #ffffff; padding: 20px 40px; border-radius: 10px; display: flex; align-items: center; gap: 14px;}
.franchise .section-content .benefit-btn-wrap .apply-btn.green{ background: #ACC231; }
.franchise .section-content .guide-comment{margin-top: 20px; color: #2c4fca; text-align: center; font-size: 16px;}

.about-reusable .benefit-wrap{display}
.about-reusable .apply-btn{ background: #2c4fca; color: #ffffff; padding: 10px 40px; border-radius: 10px; display: flex; align-items: center; gap: 14px;  justify-content:center; text-align:center; font-size:20px; margin-top: 50px; }
.discount .btn-round.white{margin-top: 50px; font-size:24px; display: flex; align-items: center; justify-content: center; width: unset; height: unset; padding: 10px 20px;}
/* 지역행사 */
.festival .section-text .news{color: #2c4fca; font-family: 'NSB', sans-serif; margin-top: 40px;}
.festival .section-text .news p + p{margin-top: 20px;}
.festival .section-content{margin-top: 20px;}
.festival .swiper {width: 100%; height: 100%;}
.festival .swiper-slide { display: flex;  justify-content: center; align-items: center;}
.festival .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 486/336;}
.festival .swiper-pagination{position: unset; margin-top: 10px;}
.festival .swiper-pagination-bullet{width: 12px; height: 12px; background: #565656;}
.festival .swiper-pagination-bullet-active{background: #2C4FCA}


/* common layout */
@media all and (max-width:1080px){
    :root{
        --border-primary: 1px solid #2C4FCA;
    }

    /*공통*/
    .hide-mobile{display: none}
    .show-mobile{display: block}
    #reusable{font-size: 18px;}
    #reusable main .inner{padding: 0 20px;}
    #reusable .section01 {padding: 50px 0;}
    #reusable .section02{padding: 50px 0; }
    #reusable .section03{padding: 50px 0; }
    [class*=title]{font-size: 32px; line-height: 1.2;}
    .section-title + .sub-text{margin-top: 10px;}
    .sub-text .fs-small{font-size: 16px; margin-bottom: 16px;}

    .btn-round{width: 260px; height: 30px; font-size: 14px; margin-top: 12px; line-height: 30px;}
    .btn-round.green{ background: #ACC231;}
    .btn-round.white{ background: #FFFFFF; color: #2c4fca;}
    .btn-round:visited{color: #ffffff;}
    .btn-round.white:visited{color: #2c4fca;}

    /* 배너 */
    #reusable #banner{padding-top: 0;}
    #reusable #banner .banner-title01{font-size: 18px; margin-bottom: 5px;}
    #reusable #banner .banner-title02{font-size: 25px;}

    /* 서비스 소개 */
    .about-reusable .section-content{flex-direction: column; padding:0 30px 60px; max-width: 420px; margin: 95px auto}
    .about-reusable .section-content .left-img{margin-top: 35px; padding-left: 0; width: 80%; max-width: 300px}
    .about-reusable .section-content .right-img{margin-bottom: -30px; margin-right: 0; width: 50%; min-width: 300px}
    .about-reusable .section-content .about-inner{flex-direction: column; margin-left: 0; padding: 27px 12px 0 12px; height: unset; width: 100%; text-align: center; border-radius: 44px;}
    .about-reusable .section-content .about-title{font-size: 26px; margin-bottom: 10px; }

    /* 세척과정 */
    .cleaning {margin-top: 50px;}
    .cleaning .section-content {margin-top: 16px;}
    .cleaning .section-content .show-mobile .imgage {margin-top: 15px;}
    .cleaning .section-content .show-mobile .icon {display: block; margin:15px auto 16px;  max-width: 400px;}
    .cleaning .section-content .show-mobile .steps-wrap {max-width: 310px;}
    .cleaning .section-content .show-mobile .steps-wrap.three {max-width: 370px;}
    .cleaning .section-content .show-mobile .steps-wrap .step .label{font-size: 12px; padding: 3px 18px;}
    .cleaning .section-content .show-mobile .steps-wrap .step .eng{font-size: 12px}
    .cleaning .section-content .show-mobile .steps-wrap .step .kor{font-size: 16px}

    /* 다회용기를 선택하면 */
    .detail-wrap .detail{width: 100%; padding: 18px 12px;}
    .detail-wrap .detail img{width: 60px;}
    .detail-wrap .detail .label{font-size: 12px; width: 28px; height: 28px; top: -14px;}
    .detail-wrap .detail .detail-point{font-size: 16px;}

    .plus-advantage p{ width: 100%; justify-content: center; padding: 3px 48px;}

    .advantage-wrap{flex-direction: column; align-items: center;}
    .advantage-wrap .advantage{width: 100%; padding: 16px 0;}
    .advantage-wrap .advantage .label{font-size: 12px; height: 24px; top: -12px; border-radius: 4px; width: 183px;}
    .advantage-wrap .advantage .label img{width: 88px;}
    .advantage-wrap .advantage .advantage-point{margin-bottom: 2.5px;}
    .advantage-wrap .advantage .advantage-subs{font-size: 12px;}
    .advantage-wrap .advantage .btn-round{margin-top: 12px;}
    .advantage-wrap .advantage-double{position: unset; width: 90px; height: 90px; font-size: 14px; transform: unset; margin-top: 10px; margin-bottom: 20px}
    .advantage-wrap .advantage-double img{ width: 14px; }

    /* 주문방법 */
    .order .section-content{flex-direction: column; gap: 20px;}
    .order-step{width: 100%; max-width: 500px; margin: 0 auto;}
    .order-step img{width: 100%;}
    .order-step .howto{padding: 18px 0 12px; border-radius: 32px;}
    .order-step .howto .label{width: 32px; height: 32px; font-size: 12px; top: -16px; line-height: 32px;}

    /* 반납방법 */
    .return {margin-top: 50px;}
    .return .section-content{flex-direction: column; gap: 20px;}
    .return .return-step{max-width: 500px; margin: 0 auto;}
    .return .return-step img{width: 100%}
    .return .return-step .label{width: 76px; height: 24px; line-height: 24px;}

    /* 할인받아 이용 */
    .discount .section-content{margin-top: 40px; padding: 0 20px; display: flex; flex-direction: column; align-items: center;}

    /* 가맹점 */
    .franchise .section-title .franchise-badge{top: -30px; right: -10px; width: 50px;}
    .franchise .section-content .benefit-wrap{flex-direction: column}
    .franchise .section-content .benefit-wrap .benefit{max-width: 500px; margin: 0 auto;}
    .franchise .section-content .benefit-wrap .benefit img{width: 100%;}
    .franchise .section-content .benefit-wrap .benefit .benefit-cont{padding: 16px; height: unset; gap: 18px;}
    .franchise .section-content .benefit-wrap .benefit .benefit-cont img{ width: 53px;}
    .franchise .section-content .benefit-wrap .benefit .benefit-cont .benefit-detail .phrase{font-size: 16px;}
    .franchise .section-content .benefit-wrap .benefit .benefit-cont .benefit-detail .explanation{font-size: 12px;}
    .franchise .section-content .benefit-btn-wrap .apply-btn{padding: 14px 28px;}
}

@media all and (max-width: 768px){
    #reusable{font-size: 14px;}
    .detail-wrap{flex-direction: column; }
    [class*=title]{font-size: 26px; line-height: 1.2;}
    .sub-text .fs-small{font-size: 12px; margin-bottom: 16px;}
    .franchise .section-content .benefit-btn-wrap{flex-direction: column; margin-top: 20px;}
    .cleaning .section-content .show-mobile .icon{max-width: 270px;}
    .cleaning .section-content .show-mobile .icon.three{max-width: 400px;}
    .cleaning .section-content .show-mobile .steps-wrap{max-width: 230px;}
}