/* 섹션1 - 메인 비주얼, 앱스토어 링크 */
.section01 {
    background-color: var(--main);
    width: 100%;
    padding: 250px 0;
    height: 800px;
}

.section01 .inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.section01 .inner span {
    color: var(--white);
    display: block;
    font-size: 80px;
    margin-bottom: 15px;
}

.section01 .inner p {
    color: var(--white);
    font-size: 48px;
}

.section01 .inner .link_wrap {
    display: flex;
    margin-top: 116px;
}

.section01 .inner .link_wrap a {
    display: flex;
    width: 240px;

}

.section01 .inner .link_wrap a img {
    width: 100%;
}

.section01 .inner .link_wrap a:first-child {
    margin-right: 38px;
}

/* 섹션2 - 텍스트 */
.section02 {
    padding: 325px 0;
}

.section02 p {
    font-size: 48px;
    text-align: center;
    line-height: 80px;
}

.pink_highlight {
    display: inline-block;
    position: relative;
}

.pink_highlight::after {
    content: '';
    display: block;
    width: 104%;
    height: 32px;
    background-color: var(--main);
    opacity: 0.2;
    position: absolute;
    bottom: -10px;
    left: -8px;
    z-index: -1;
}

/* 섹션3 - 자체상품 */
.section03 {
    padding: 60px 0 167px;
}

.category_wrap {
    display: flex;
}

.gray_border {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 40px;
    height: 40px;
    padding: 0 14px;
    background-color: var(--white);
    border: 1px solid #E7E7E7;
    margin-right: 7px;
    font-size: 16px;
}

.title_wrap h3 {
    font-size: 45px;
    margin: 20px 0;
}

.title_wrap p {
    font-size: 24px;
    line-height: 35px;
}

.section03 .item_list {
    margin-top: 58px;
}

.section03 .item_list .item_list_title {
    text-align: center;
    font-size: 24px;
}

.section03 .item_list .item_wrap {
    margin-top: 35px;
    display: flex;
}

.section03 .item_list .item_wrap>div {
    width: calc(100% / 2 - 10px);
}

.section03 .item_list .item_wrap .item_left_wrap {
    margin-right: 20px;
}

.section03 .item_list .item_wrap img {
    width: 100%;
    display: block;
}

.section03 .item_list .item_wrap .title_desc_wrap {
    margin-top: 12px;
}

.section03 .item_list .item_wrap .title_desc_wrap .price {
    font-size: 18px;
    margin-bottom: 4px;
}

.section03 .item_list .item_wrap .title_desc_wrap .price span {
    font-size: 24px;
}

.section03 .item_list .item_wrap .title_desc_wrap .title {
    margin-bottom: 12px;
    line-height: 20px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

.section03 .item_list .item_wrap .title_desc_wrap .date {
    color: #717171;
    font-size: 12px;
}

.section03 .item_list .item_wrap .item_right_wrap .img_list {
    display: flex;
    flex-wrap: wrap;
}

.section03 .item_list .item_wrap .item_right_wrap .img_list .img_wrap {
    width: calc(100% / 2 - 8.5px);
}

.section03 .item_list .item_wrap .item_right_wrap .img_list .img_wrap:not(:nth-child(2n)) {
    margin-right: 17px;
}

.section03 .item_list .item_wrap .item_right_wrap .img_list .img_wrap:not(:nth-child(n+2)) {
    margin-bottom: 17px;
}

/* 섹션4 - 공동구매 */
.section04 {
    padding: 68px 0;
}

.section04 .img_wrap {
    display: flex;
    justify-content: center;
    margin-top: -182px;
}

.section04 .img_wrap .img_left {
    transform: translateY(200px);
    margin-right: 32px;
    width: 510px;
    opacity: 0;
    transition: all .5s ease-in-out;
    transition-delay: .3s;
}

.section04 .img_wrap .img_right {
    width: 510px;
    opacity: 0;
    transition: all .5s ease-in-out;
}

.section04 .img_wrap.on .img_right {
    opacity: 1;
    transform: translateY(50px);
}

.section04 .img_wrap.on .img_left {
    opacity: 1;
    transform: translateY(272px);
}

.section05 {
    padding: 258px 0 116px;
}

.section05 .global_wrap {
    display: flex;
    justify-content: center;
}

.section05 .global_wrap .left {
    margin-right: 130px;
}

.section05 .global_wrap .top_wrap {
    margin-bottom: 58px;
}

.section05 .global_wrap .top_wrap .title_wrap span {
    font-size: 16px;
}

.section05 .global_wrap .top_wrap .title_wrap p {
    font-size: 45px;
    margin: 5px 0;
    line-height: normal;
}

.section05 .global_wrap .top_wrap .desc_wrap p {
    font-size: 14px;
    line-height: 21px;
}

.section05 .global_wrap .bottom_wrap .img_list .img_wrap img {
    display: block;
    width: 380px;
}

.section05 .global_wrap .bottom_wrap .img_list .img_wrap:not(:last-child) {
    margin-bottom: 18px;
}

/* 섹션6 - 장바구니 */
.section06 {
    padding: 60px 0 77px;
    overflow: hidden;
}

.section06 .item_wrap {
    display: flex;
    align-items: center;
    transform: translateX(35px);
}


.section06 .left_img {
    width: 636px;
    margin-top: 38px;
    z-index: 1;
    opacity: 0;
    transform: translateY(-50px);
    transition: all .5s ease-in-out;
}

.section06 .left_img img {
    width: 100%;
}

.section06 .item_wrap.on .left_img {
    transform: translateY(0);
    opacity: 1;
}

/* 확인 */
/* .section06 .right_list {
    transform: translateX(-149px);
    margin-bottom: 240px;
    display: flex;
} */

.section06 .right_list {
    transform: translateX(-95px);
    margin-bottom: 130px;
    display: flex;
}

.section06 .right_list>div {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    opacity: 0;
    transform: translateX(-50px);
    transition: all .5s ease-in-out;
}

.section06 .right_list .img_01 {
    transition-delay: .4s;
}

.section06 .right_list .img_02 {
    transition-delay: .8s;
}

.section06 .right_list .img_03 {
    transition-delay: 1.2s;
}

.section06 .item_wrap.on .right_list>div {
    opacity: 1;
    transform: translateX(0);
}

.section06 .right_list>div:not(:last-child) {
    margin-right: 22px;
}

.section06 .right_list .category_wrap {
    margin-bottom: 14px;
}

.section06 .right_list .category_wrap .gray_border {
    border-radius: 8px;
    font-size: 18px;
}

/* 확인 */
/* .section06 .right_list .img_wrap {
    width: 280px;
    height: 280px;
    position: relative;
} */

.section06 .right_list .img_wrap {
    width: 232px;
    height: 232px;
    position: relative;
}

.section06 .right_list .img_wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 섹션7 - 덕메기능 */
.section07 {
    padding: 60px 0;
    position: relative;
}

.section07 .item_wrap {
    display: flex;
    align-items: center;
    margin-bottom: -100px;
}

.section07 .left {
    transform: translateY(124px);
    position: static;
    z-index: 1;
    opacity: 0;
    transition: all .5s ease-in-out;
}

.section07 .item_wrap.on .left {
    transform: translateY(74px);
    opacity: 1;
}

.section07 .left img {
    width: 768px;
}

.section07 .right {
    position: absolute;
    top: 145px;
    left: 55%;
    transform: translateX(-50%);
    z-index: 0;
    opacity: 0;
    transition: all .5s ease-in-out;
    transition-delay: .3s;
}

.section07 .item_wrap.on .right {
    top: 95px;
    opacity: 1;
}

.section07 .right img {
    width: 770px;
}

/* 섹션8 - 안전거래 */
.section08 {
    padding: 227px 0 426px;
}

.section08 .item_list {
    margin-top: 70px;
    text-align: center;
    margin-bottom: 26px;
}

.section08 .item_list .title {
    font-size: 24px;
    margin-bottom: 26px;
}

.section08 .item_list ul {
    display: flex;
}

.section08 .item_list ul li {
    width: calc(100% / 4 - 15px);
}

.section08 .item_list ul li:not(:last-child) {
    margin-right: 20px;
}

.section08 .item_list ul li a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    width: 100%;
}

.section08 .item_list ul li a .img_wrap {
    width: 100%;
    padding-top: 100%;
    position: relative;
}

.section08 .item_list ul li a .img_wrap img {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section08 .item_list ul li a .title_desc_wrap {
    margin-top: 5px;
    width: 100%;
}

.section08 .item_list ul li a .title_desc_wrap .price {
    font-size: 24px;
    margin-bottom: 10px;
}

.section08 .item_list ul li a .title_desc_wrap .title {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 19px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

.section08 .item_list ul li a .title_desc_wrap .date {
    color: #717171;
    font-size: 14px;
}

/* 섹션9 - join us */
.section09 {
    background-color: var(--main);
    padding: 42px 0 59px;
}

.section09 .section_title {
    font-size: 48px;
    color: var(--black);
    margin-bottom: 68px;
}

.section09 .bottom {
    display: flex;
    justify-content: flex-end;
}

.section09 .bottom .contact_wrap .bottom_title {
    margin-bottom: 12px;
    background-color: var(--white);
    width: fit-content;
    display: flex;
    align-items: center;
    height: 34px;
    border-radius: 42px;
    padding: 0 16px;
    font-size: 18px;
}

.css {}

.section09 .bottom .contact_wrap .bottom_email {
    background-color: var(--black);
    width: fit-content;
    display: flex;
    align-items: center;
    height: 78px;
    border-radius: 97px;
    padding: 0 46px;
}

.section09 .bottom .contact_wrap .bottom_email p {
    color: var(--white);
    font-size: 30px;
}


@media screen and (max-width: 1600px) {
    .section06 .right_list .img_wrap {
        width: 230px;
        height: 230px;
    }

    .section07 .item_wrap {
        justify-content: center;
    }

    .section07 .left {
        margin-right: 180px;
    }

    .section07 .left img {
        width: 630px;
    }

    .section07 .right {
        left: 60%;
    }

    .section07 .right img {
        width: 632px;
    }
}

@media screen and (max-width: 1200px) {
    .pink_highlight::after {
        height: 25px;
        bottom: -5px;
        width: 102%;
        left: -4px;
    }

    .section01 {
        height: 600px;
        padding: 0;
        display: flex;
    }

    .section01 .inner span {
        font-size: 60px;
    }

    .section01 .inner p {
        font-size: 35px;
    }

    .section01 .inner .link_wrap {
        margin-top: 60px;
    }

    .section01 .inner .link_wrap a {
        width: 180px;
    }

    .section01 .inner .link_wrap a:first-child {
        margin-right: 25px;
    }

    .section02 {
        padding: 200px 0;
    }

    .section02 p {
        font-size: 35px;
        line-height: 60px;
    }

    .gray_border {
        font-size: 14px;
        height: 35px;
    }

    .title_wrap h3 {
        font-size: 30px;
        margin: 10px 0;
    }

    .title_wrap p {
        font-size: 18px;
        line-height: normal;
    }

    .section04 .img_wrap .img_left {
        width: 400px;
        height: auto;
    }

    .section04 .img_wrap .img_right {
        width: 400px;
    }

    .section05 .global_wrap .left {
        margin-right: 80px;
    }

    .section05 .global_wrap .top_wrap .title_wrap p {
        font-size: 30px;
    }

    .section05 .global_wrap .bottom_wrap .img_list .img_wrap img {
        width: 280px;
    }

    .section06 .item_wrap {
        transform: translateX(20px);
    }

    .section06 .right_list {
        margin-bottom: 118px;
        transform: translateX(-78px);
    }

    .section06 .right_list .img_wrap {
        width: 210px;
        height: 210px;
    }

    .section08 {
        padding: 175px 0 200px;
    }

    .section09 {
        padding: 30px 0 40px;
    }

    .section09 .section_title {
        font-size: 35px;
    }

    .section09 .bottom .contact_wrap .bottom_email {
        height: 70px;
        padding: 0 40px;
    }

    .section09 .bottom .contact_wrap .bottom_email p {
        font-size: 35px;
    }
}

@media screen and (max-width:1024px) {
    .section06 .right_list .img_wrap {
        width: 180px;
        height: 180px;
    }

    .section06 .right_list .category_wrap .gray_border {
        font-size: 16px;
    }
}

@media screen and (max-width: 840px) {
    .section04 .img_wrap .img_left {
        width: 250px;
    }

    .section04 .img_wrap .img_right {
        width: 250px;
    }

    .section05 .global_wrap .bottom_wrap .img_list .img_wrap img {
        width: 200px;
    }


    .section06 .right_list {
        margin-bottom: 95px;
    }

    .section06 .right_list .img_wrap {
        width: 150px;
        height: 150px;
    }

    .section07 .left {
        margin-right: 150px;
    }

    .section07 .left img {
        width: 500px;
    }

    .section07 .right {
        left: 60%;
    }

    .section07 .right img {
        width: 502px;
    }

    .section08 {
        padding: 120px 0 120px;
    }
}

@media screen and (max-width: 750px) {
    .section01 .inner span {
        font-size: 45px;
    }

    .section01 .inner p {
        font-size: 25px;
    }

    .section01 .inner .link_wrap a {
        width: 150px;
    }

    .section01 .inner .link_wrap a:first-child {
        margin-right: 10px;
    }

    .section02 {
        padding: 120px 0;
    }

    .section02 p {
        font-size: 30px;
    }

    .section03 {
        padding: 60px 0 60px;
    }

    .section04 {
        padding: 68px 0 160px;
    }

    .section04 .img_wrap .img_left {
        width: 200px;
        margin-right: 15px;
    }

    .section04 .img_wrap .img_right {
        width: 200px;
    }

    .section05 {
        padding: 150px 20px 116px;
    }

    .section05 .global_wrap .left {
        margin-right: 30px;
    }

    .section05 .global_wrap .bottom_wrap .img_list .img_wrap img {
        width: 100%;
    }

    .section06 .right_list {
        transform: translateX(-45px);
    }

    .section06 .right_list .img_wrap {
        width: 130px;
        height: 130px;
    }

    .section06 .item_wrap {
        transform: translateX(10px);
    }

    .section07 .left img {
        width: 350px;
    }

    .section07 .right {
        left: 60%;
    }

    .section07 .right img {
        width: 352px;
    }

    .section09 .bottom {
        justify-content: flex-start;
    }

    .section09 .bottom .contact_wrap .bottom_email {
        padding: 0 25px;
        height: 60px;
    }

    .section09 .bottom .contact_wrap .bottom_email p {
        font-size: 25px;
    }
}

@media screen and (max-width: 640px) {
    .section03 .item_list .item_wrap .item_right_wrap .img_list .img_wrap {
        width: calc(100% / 2 - 5px);
    }

    .section03 .item_list .item_wrap .item_right_wrap .img_list .img_wrap:not(:nth-child(2n)) {
        margin-right: 10px;
    }

    .section03 .item_list .item_wrap .item_right_wrap .img_list .img_wrap:not(:nth-child(n+2)) {
        margin-bottom: 10px;
    }

    .section03 .item_list .item_wrap .title_desc_wrap .price {
        font-size: 16px;
    }

    .section03 .item_list .item_wrap .title_desc_wrap .price span {
        font-size: 20px;
    }

    .section03 .item_list .item_wrap .title_desc_wrap .title {
        font-size: 14px;
    }

    .section06 .item_wrap {
        transform: translateX(-10px);
    }

    .section06 .left_img {
        width: calc(80% - 125px);
    }

    .section06 .right_list {
        flex-direction: column;
        transform: translateX(0);
        width: 20%;
        max-width: 125px;
        margin-bottom: 0;
    }

    .section06 .item_wrap {
        justify-content: center;
    }

    .section06 .item_wrap .right_list>div {
        width: 100%;
    }

    .section06 .right_list .img_wrap {
        width: 100%;
        padding-top: 100%;
        height: auto;
    }

    .section06 .right_list>div:not(:last-child) {
        margin-right: 0;
        margin-bottom: 20px;
    }

    .section06 .right_list .category_wrap .gray_border {
        height: 25px;
        font-size: 12px;
        padding: 0 10px;
    }


    .section07 .left {
        margin-right: 90px;
    }

    .section07 .left img {
        width: 300px;
    }

    .section07 .right {
        left: 70%;
    }

    .section07 .right img {
        width: 302px;
    }

    .section08 .item_list ul li a .title_desc_wrap .price {
        font-size: 14px;
    }

    .section08 .item_list ul li a .title_desc_wrap .title {
        font-size: 12px;
        /* height: 60px; */
        margin-bottom: 10px;
    }

    .section08 .item_list ul li a .title_desc_wrap .date {
        font-size: 12px;
    }
}

@media screen and (max-width: 570px) {
    .section02 p {
        font-size: 25px;
        line-height: 38px;
    }

    .section04 .img_wrap {
        margin-top: 0;
    }

    .section04 .img_wrap .img_left {
        transform: translateY(50px);
        width: calc(100% / 2 - 7.5px);
    }

    .section04 .img_wrap.on .img_left {
        transform: translateY(122px);
    }

    .section04 .img_wrap .img_right {
        width: calc(100% / 2 - 7.5px);
    }


    .section05 {
        padding-top: 100px;
    }

    .section06 .left_img {
        width: 80%;
    }

    .section06 .right_list {
        transform: translateX(-20px);
    }

    .section07 {
        padding-bottom: 120px;
    }

    .section07 .left img {
        width: 240px;
    }

    .section07 .right {
        left: 60%;
        /* top: 60%; */
        top: 320px;
    }

    .section07 .item_wrap.on .right {
        top: 270px;
    }

    .section07 .right img {
        width: 242px;
    }
}

@media screen and (max-width:400px) {
    .section06 .item_wrap {
        transform: translateX(-5px);
    }
}