* {
    --common-width : 800px; /* 최대넓이 */
    --header-height: 6rem; /* 상단바 높이 */
    --footer-height: 6.5rem; /* 하단바 높이 */
}
main {
    width: 100%;
    margin: 0 auto;
    max-width: var(--common-width);
    padding-top: var(--header-height);
}
header {width: 100%;z-index: 100;background-color: #f5f6f8;height: var(--header-height);max-width: var(--common-width);display: flex;justify-content: space-between;align-items: center;position: fixed;left: 50%;top: 0;transform: translateX(-50%);transition: .3s cubic-bezier(0.075, 0.82, 0.165, 1);}
header::after {
    content: "";
    position: absolute;
    left: 50%;bottom: 0;
    width:calc(100% - 3rem);
    height: 1px;
    transform: translateX(-50%);
    background-color: #d0cdce;
}
header.color {background-color: #fff;}
header.color::after {background-color: transparent;}
header h1 {color: #383838;line-height: 1.4;font-size: 1.4rem;}
header h1 img {height: calc(var(--header-height) / 2);width: fit-content;object-fit: contain;margin-left: 1.5rem;}
header .plus {
    height: var(--header-height);
    width: var(--header-height);
    display: flex;align-items: center;justify-content: center;flex-direction: column;gap: .5rem;
    margin-right: 1rem;
    font-size: 1.2rem;
    font-weight: 800;
    color: #383838;
}
header .plus img {width: 2rem;height: 2rem;object-fit: contain;}
header .prev {
    height: var(--header-height);
    width: var(--header-height);
    background: url(../img/prev.png) no-repeat center / 2rem;
}






/* home =========================== */
#home {background-color: #f5f6f8;}
#home .intro {
    padding: 1.5rem;
    min-height: 20rem;
    display: flex;align-items: center;
    background:  url(../img/person.png) no-repeat calc(100% - 1.5rem) center / 36%;
}
#home .intro h2 {
    font-size: 2rem;
    font-weight: 800;
    color: #2e2222;
    line-height: 1.2;
}
#home .intro h2 b {
    line-height: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
}
#home .intro h2 b.red {color: #f4302f;font-weight: 900;}
#home .tabs {
    padding: 0 1.5rem;
    display: flex;justify-content: space-between;
    background-color: #fff;
    box-shadow: 0 -.3rem .5rem rgba(0, 0, 0, .1);
}
#home .tabs .tab {
    color: #251818;
    padding: .8rem 0;
    font-size: 1.6rem;
    font-weight: bold;
    text-align: center;
    display: block;
    width: 100%;
    border-bottom: 1px solid #bebebe;
}
#home .tabs .tab.on {
    font-weight: 800;
    border-bottom: 2px solid #f54b4a;
}
#home .deli {
    padding: 2rem 1.5rem;
    background-color: #fff;
    margin-bottom: 2rem;
}
#home .deli .top {
    margin-bottom: 3rem;
    display: flex;justify-content: space-between;align-items: center;
}
#home .deli .top h2 {
    font-size: 1.6rem;
    font-weight: 800;
    color: #f44443;
    line-height: 1.2;
}
#home .deli .top button {
    font-size: 1.2rem;
    font-weight: bold;
    color: #3a4665;
    display: flex;gap: .3rem; align-items: end;
}
#home .deli .top button img {width: 1.5rem;}
#home .deli .contents {}
#home .deli .contents .box {
    display: block;
    padding: 2rem 0;
    border-bottom: 1px solid #ebeaea;
}
#home .deli .contents .box:first-of-type {padding-top: 0;}
#home .deli .contents .box p:nth-of-type(1) {
    font-size: 1.6rem;
    font-weight: 800;
    color: #241717;
    line-height: 1.2;
    margin-bottom: .5rem;
    word-break: break-all;
    display: flex;justify-content: space-between;
}
#home .deli .contents .box p b {
    line-height: inherit;
    font-weight: normal;
    font-size: 1.2rem;
    color: #ccc;
    margin-top: .3rem;
    white-space: nowrap;
}
#home .deli .contents .box p:nth-of-type(2) {
    font-size: 1.6rem;
    color: #2a1d1d;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 2rem;
}
#home .deli .contents .box span {
    position: relative;width: 100%;display: block;margin: 7rem 0 1.5rem;
}
#home .deli .contents .box span img {
    width: 10rem;height: 4rem;object-fit: contain;
}
#home .deli .contents .box span::before {
    content: "소중한 상품이 도착했어요~";position: absolute;left:0;top: -4rem;
    color: #16244a;font-size: 1.2rem;font-weight: bold;
}
#home .deli_ing .contents .box span::before {
    content: "소중한 상품이 배송중이에요~";
}


#home .deli_end .contents .box span::before {right: 0;left: auto;}
#home .deli_end .contents .box span img {margin-left: auto;margin-right: 0;display: block;}



#home .deli .contents .box span::after {
    content: "";position: absolute;left:0;bottom: -.5rem;
    border-radius: 10rem;width: 100%;height: .5rem;background-color: #263356;
}
#home .deli .contents .banner {}
#noresult {
    font-size: 1.4rem;
    color: #ccc;
    margin: 2rem 0 4rem;
    text-align: center;
    line-height: 1.2;
}
#home .deli .contents .banner .logo {width: 10rem;display: block;}
#home .deli .contents .banner h3 {
    font-size: 1.4rem;
    font-weight: 800;
    color: #f44443;
    line-height: 1.2;
    margin-top: 1rem;
}

#home .deli .contents .banner span {
    position: relative;width: 100%;display: block;margin: 7rem 0 1.5rem;
}
#home .deli .contents .banner span img {
    width: 10rem;height: 4rem;object-fit: contain;left: 48%;position: relative;
}
#home .deli .contents .banner span::before {
    content: "소중한 내 택배";position: absolute;left:50%;top: -4rem;
    color: #16244a;font-size: 1.2rem;font-weight: bold;
}
#home .deli .contents .banner span::after {
    content: "";position: absolute;left:0;bottom: -.5rem;
    border-radius: 10rem;width: 100%;height: .5rem;background-color: #263356;
}
#home .deli .contents .banner button {
    font-size: 1.4rem;
    color: #fff;
    margin: 2rem 0;
    text-align: center;
    line-height: 1.2;
    border-radius: 1.5rem;
    padding: 1.5rem;
    font-size: 1.6rem;
    font-weight: bold;
    width: 100%;
    margin-top: 4rem;
    display: flex;align-items: center;gap: 1rem;justify-content: center;
    background-color: #263356;
}
#home .deli .contents .banner button b {
    line-height: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: #f43938;
}
#home .deli .contents .banner button img {width: 1.5rem;}
#home .deli_ing {}
#home .deli_end {}


/* order =========================== */
#order {}
#order .order_form {
    padding: 2rem 1.5rem;
    background: #f5f6f8;
}
#order h2 {
    font-size: 1.8rem;
    font-weight: 800;
    color: #2e2222;
    line-height: 1.2;
}
#orderForm {
    display: flex;flex-wrap: wrap;gap: 1.5rem;justify-content: center;
}
#orderForm select {
    border: 1px solid #333;
    margin: 2rem 0;
    height: 3.5rem;
    color: #111;
    font-size: 1.6rem;
    padding: .7rem 1rem;
    background: #fff url(../img/arrow.png) no-repeat calc(100% - 1rem) center / 1rem;
    width: 40%;
}
#orderForm input[type="number"] {
    border: 1px solid #333;
    margin: 2rem 0;
    height: 3.5rem;
    color: #111;
    font-size: 1.6rem;
    padding: .7rem 1rem;
    width: calc(60% - 1.5rem);
}
#orderForm input[type="number"]::placeholder {
    color: #ccc;
    text-align: center;
}
.commonBtn{
    font-size: 1.8rem;
    font-weight: bold;
    color: #fff;
    border-radius: 10rem;
    background-color: #263356;
    padding: .6rem 3rem;
    margin: 0 auto 2rem;
    display: block;
}








.order_result {}
.order_result h2 {
    background: #f5f6f8 url(../img/arrow2.png) no-repeat calc(100% - 1.5rem) center / 2rem;
    padding: 1.5rem;
    box-shadow: 0 .3rem .2rem rgba(0, 0, 0, .1);
}
.order_result h3 {
    font-size: 1.6rem;
    font-weight: 800;
    color: #f44443;
    line-height: 1.2;
    margin-bottom: 3rem;
}
.order_result p {
    font-size: 1.6rem;
    font-weight: 800;
    color: #555;
    line-height: 1.2;
    margin-bottom: .5rem;
}
.order_result pre {
    font-size: 1.6rem;
    color: #666;
    line-height: 1.2;
    margin-bottom: 2rem;
}
#order .none {
    font-size: 1.4rem;
    line-height: 1.4;
    color: #666;
    margin: 4rem auto;
    text-align: center;
}
#order .loading {
    font-size: 1.4rem;
    line-height: 1.4;
    color: #666;
    margin: 4rem auto;
    text-align: center;
}
.order_result .info {
    margin:2rem 1.5rem;
    border-bottom: 1px solid #ddd;
}
.order_result .phase {
    margin: 2rem 1.5rem;
}
.order_result .phase > span {
    display: flex;justify-content: space-between;flex-wrap: wrap;
}
.order_result .phase > span p {
    width: 50%;
    font-weight: bold;
    position: relative;
    padding: 1rem 0;
    margin: 0;
    display: flex;align-items: center;flex-wrap: wrap;gap: .5rem;
    padding-left: 2rem;
}
.order_result .phase > span p:nth-of-type(2n-1) {
    width: calc(50% - 2rem);
    padding-left: 0;
}
.order_result .phase > span p:nth-of-type(2n)::after {
    content: "";
    position: absolute;
    left: 0;top: 50%;
    transform: translate(-50%, -50%);
    width: 7px;height: 7px;
    background-color: #263356;
    border: 1px solid #111;
    border-radius: 100%;
}
.order_result .phase > span p:nth-of-type(2n)::before {
    content: "";
    position: absolute;
    left: 0;top: 0;
    width: 1px;height: 100%;
    background-color: #d8d8d8;
}
.order_result .phase > span p:nth-of-type(2)::before {
    height: 50%;top: 50%;
}
.order_result .phase > span p:nth-of-type(2)::after {
    background-color: #f43837;
}
.order_result .phase > span p:last-of-type::before {
    height: 50%;
}
.order_result b {
    line-height: inherit;
    font-weight: 800;
    font-size: 1.6rem;
    color: inherit;
    word-break: break-all;
}








.alert {
    position: fixed;
    color: #fff;
    line-height: 1.4;
    font-size: 1.4rem;
    text-align: center;
    padding: .7rem 2rem;
    border-radius: 10rem;
    left: 50%;bottom: 6rem;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, .5);
}








/* sub =========================== */
#sub {}
#sub .intro {
    padding: 1.5rem;
    min-height: 20rem;
    display: flex;align-items: center;justify-content: end;
    background: #f5f6f8 url(../img/boxicon2.png) no-repeat 1.5rem center / auto 90%;
}
#sub .intro h2 {
    font-size: 2rem;
    font-weight: 800;
    color: #2e2222;
    line-height: 1.2;
}
#sub .intro h2 b {
    line-height: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
}
#sub .intro h2 b.red {color: #f4302f;font-weight: 900;}
#sub .intro1 {}
#sub .intro2 {background: #f5f6f8 url(../img/boxicon3.png) no-repeat 100% 70% / 80% auto;justify-content: start;align-items: start;}