@charset "utf-8";

@font-face {
    font-family: 'GS_B';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GS_M';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GS_L';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul,
li {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

html {
    font-size: 10px;
}

body {
    color: #101010;
    font-family: 'GS_M', 'GS_L', sans-serif;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    line-height: 1.25;
}

button {
    border: none;
    background-color: transparent;
}

/* reset */


/* layout */
header,
section,
footer {
    width: 100%;
    margin: 0 auto;
    position: relative;
}

.layout {
    width: 100%;
    padding: 0 10rem;
    margin: auto;
    position: relative;
    content: '';
    display: block;
    clear: both;
}

.w1300 {
    width: 1300px;
    margin: auto;
}

.flex_box {
    display: flex;
}

.gs_b {
    font-family: 'GS_B', sans-serif;
    ;
}

.gs_m {
    font-family: 'GS_M', sans-serif;
    ;
}

.gs_l {
    font-family: 'GS_L', sans-serif;
    ;
}

.c_white {
    color: #fff;
}

.c_logo {
    color: #ff53a0;
}

.c_orange {
    color: #ff642f;
}

.c_darkOr {
    color: #ff642f;
}

.c_pink {
    color: #ff0060;
}

.logo {
    width: 257px;
}

.img_w100 {
    width: 100%;
}

/* layout */



/* header */
.top_pop {
    padding: 1.8rem 0px;
    background: linear-gradient(45deg, hsl(338, 100%, 51%), #fb7446);
}

.top_pop h4 {
    font-size: 2.4rem;
    color: #fff;
    text-align: center;
    letter-spacing: 0.4rem;
}

.top_pop button {
    /* position: absolute;
    right: 10rem;
    top: -0.5rem; */
    float: right;
    margin-top: -3.5rem;
    width: 4.3rem;
    height: 4.3rem;
    border-radius: 50%;
    background-color: #fff;
    color: #fb7446;
    font-size: 2.4rem;
    cursor: pointer;
}

header::before {
    content: '';
    background-color: #ffecef;
    width: 100%;
    height: 766px;
    position: absolute;
    top: 0;
    left: 0;
}

.hd_box {
    justify-content: space-between;
    padding: 6rem 0;
    align-items: center;
}

.member {
    float: right;
    margin-top: -3rem;
    font-size: 2.0rem;
    font-family: 'GS_B';
    color: #606060;
}

.member li:first-child::after {
    content: '|';
    padding: 0 2rem;
}

.gnb {
    font-size: 2.4rem;
}

.gnb .flex_box li {
    padding: 2.2rem;
    white-space: nowrap;
}
.gnb .flex_box li a{
    transition: 0.45s;
}
.gnb .flex_box li:hover a{
    color:#fa2082;
    font-family: 'GS_B';
}

/* header */



/* section common */
section h2 {
    font-size: 5rem;
    text-align: center;
}

section .sub_tit {
    color: #606060;
    font-size: 2rem;
    text-align: center;
}

/* section common */



/* .main_visual  */
.main_visual {
    margin-bottom: 10rem;
}

.visual_box {
    justify-content: space-between;
}

.img_box {
    width: 64.5%;
    /*1240/1920px=64.5%*/
}

.img_box .slide {
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 60px;
    width: 100%;
    padding-top: 54.1%;
    /* padding-top: 34.9%; */
    /* 671/1920px=34.9% */
    position: relative;
    box-shadow: 3px 5px 6px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

.img_box ul li {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: 3s;
}

.img_box ul li.on {
    opacity: 1;
}

.img_box ul li a>img {
    width: 100%;
}

.sum_box {
    /* display: none; */
    width: 33%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 1rem
}

.sum_box h5 {
    font-size: 2rem;
    color: #505050;
    height: 6rem;
    display: flex;
    align-items: center;
    padding-left: 6rem;
    position: relative;
    font-family: 'GS_L';
    cursor: pointer;
    transition: 0.5s;
}

.sum_box h5.on {
    color: #fe0063;
    font-family: 'GS_B';
    background-color: #fff;
    border-left: 5px solid #fcb8c7;
    box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.1);
}

.sum_box h5.on::before {
    content: '';
    border-radius: 50%;
    height: 1.4rem;
    width: 1.4rem;
    background-color: #dbdbdb;
    position: absolute;
    top: 50%;
    left: 1.8rem;
    transform: translateY(-50%);
}

.sum_box h5.on::after {
    content: '';
    background-color: #fe0060;
    width: 7.7rem;
    height: 0.5rem;
    border-top-right-radius: 10rem;
    border-bottom-right-radius: 10rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -4.6rem;
}

/* .main_visual  */



/* section.info */
.info {
    margin-bottom: 22rem;
}

.flex_box.info_con {
    justify-content: space-between;
}

.info_con>div {
    width: calc(50% - 3rem);
    color: #fff;
    border-radius: 45px;
    padding: 5rem 5rem 1.5rem;
}

.info_con>div:nth-child(1) {
    background: linear-gradient(110deg, #fd1f72, #fb7446);
}

.info_con>div:nth-child(2) {
    background: linear-gradient(134deg, #0558b1, #f74d9a);
}

.info_con>div>h3 {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.info_con>div p {
    font-size: 2rem;
}

.info .icon_list {
    margin-top: 6rem;
    float: right;
}

.info .icon_list li {
    text-align: center;
    padding: 1.5rem;
    transition: all 0.2s ease-out;
}

.info .icon_list li:hover {
    margin-top: -6px;
}

.info .icon_list a i {
    color: #fff;
    font-size: 6.2rem;
    margin-bottom: 2rem;
}

/* section.info */



/* section.menu */
.menu {
    margin-bottom: 22rem;
}

.menu h2 {
    color: #003471;
    margin-bottom: 1rem;
}

.menu_con {
    justify-content: space-between;
    margin-top: 4rem;
    /* height: 54rem; */
}

.menu_con>div {
    width: calc(50% - 3rem);
}

.menu::before {
    content: '';
    background-color: #e6f8ff;
    width: 83.8%
        /*1610/1920px*/
    ;
    height: calc(100% + 20rem);
    position: absolute;
    right: 0;
    top: -10rem;
}

.white_box {
    background-color: #fff;
    box-shadow: -0.5px 6px 10px rgba(0, 0, 0, 0.2);
    border-radius: 45px;
}

.white_box h3 {
    color: #303030;
    font-size: 3.6rem;
    font-family: 'GS_B';
    text-align: center;
    margin-bottom: 3.6rem;
}

.white_box.big {
    padding: 5rem;
}

.big .flex_box {
    justify-content: space-between;
}

.big li {
    width: calc(30% - 4rem);
    text-align: center;
}

.big li .point {
    font-size: 1.6rem;
    display: inline-block;
    padding: 1rem 2rem;
    color: #fff;
    border-radius: 10rem;
    padding: 1rem 3rem 0.6rem;
    margin-bottom: 1.5rem;
}

.big li:nth-of-type(1) .point {
    background-color: #ff642f;
}

.big li:nth-of-type(2) .point {
    background-color: #fe5292;
}

.big li:nth-of-type(3) .point {
    background-color: #ff0060;
}

.big li>img {
    width: 100%;
}


.big li p {
    font-size: 1.8rem;
    margin-top: 1.5rem;
    color: #505050;
}

.sm_box {
    display: flex;
    justify-content: space-between;
    align-content: space-between;
    flex-wrap: wrap;
}

.sm_box .white_box {
    width: calc(50% - 2rem);
    height: calc(50% - 2rem);
    padding: 3.6rem;
    position: relative;
}

.sm_box h4 {
    font-size: 3rem;
    color: #303030;
    font-family: "GS_B";
}

.sm_box span {
    font-size: 1.8rem;
    position: absolute;
    bottom: 3.6rem;
    left: 3.6rem;
}

.sm_box img {
    position: absolute;
    right: -2rem;
    z-index: 1;
    transform: translateY(-10%);
}

.sm_box a:nth-of-type(1) img {
    transform: translateY(-23%);
}

/* section.menu */






/* section.delivery */
.delivery {
    margin-bottom: 22rem;
}

.delivery h2 {
    color: #fd541a;
    margin-bottom: 5rem;
}

.deli_con {
    margin-bottom: 15.5rem;
}

.deli_con .sub_tit {
    text-align: left;
}

.deli_con h4 {
    font-size: 4rem;
    color: #303030;
    margin-bottom: 1rem;
}

.deli_con h4 i {
    font-size: 4.5rem;
}

.deli_con h5.tel {
    font-size: 4.5rem;
    margin-bottom: 0.6rem;
}

.deli_con>div:nth-of-type(1) {
    width: 26%;
    border-right: 1px solid #d1d1d1;
    /* 340/1300px */
    ;
}

.deli_con>div:nth-of-type(2) {
    width: 74%;
    padding-left: 2.6rem;
}

.deli_con .icon_list {
    justify-content: space-between;
    margin-top: 2.5rem;
}

.deli_con .icon_list li {
    border: 6px solid;
    border-radius: 25px;
    border-color: #d5d5d5;
    width: 18.5%;
    height: 170px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
}

.deli_con .icon_list li a {
    display: block;
    z-index: 10;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 25px;
}

.deli_con .icon_list li img {
    transform: translateY(-20%);
    z-index: -1;
}

.deli_con .icon_list li p {
    color: #353535;
    font-size: 2rem;
    position: absolute;
    bottom: 1rem;
    transition: all 0.2s ease-out;
}

.deli_con .icon_list li:nth-of-type(1) {
    border-color: #5843bb;
}

.deli_con .icon_list li:nth-of-type(2) {
    border-color: #3cccc7;
}

.deli_con .icon_list li:nth-of-type(3) {
    border-color: #e01123;
}

.deli_con .icon_list li:nth-of-type(4) {
    border-color: #feda00;
}

.deli_con .icon_list li:nth-of-type(5) {
    border-color: #f75160;
}

.deli_con .icon_list li:hover p {
    font-weight: bold;
}

.deli_con .icon_list li:nth-of-type(1):hover p {
    color: #5843bb;
}

.deli_con .icon_list li:nth-of-type(2):hover p {
    color: #3cccc7;
}

.deli_con .icon_list li:nth-of-type(3):hover p {
    color: #e01123;
}

.deli_con .icon_list li:nth-of-type(4):hover p {
    color: #feda00;
}

.deli_con .icon_list li:nth-of-type(5):hover p {
    color: #f75160;
}


.map_bg {
    text-align: center;
    position: relative;
}

.map_bg::before {
    content: "";
    width: 100%;
    height: calc(100% + 20rem);
    background: url(../images/store_bg.jpg)no-repeat center;
    border-radius: 60px;
    position: absolute;
    top: -10rem;
    left: 0;
    z-index: -1;
}

.map_bg .gs_l {
    letter-spacing: 0.5rem;
    font-size: 1.6rem;
    margin-bottom: 0.8rem;
}

.map_bg h4 {
    font-size: 4rem;
    color: #534741;
}

.map_bg input {
    margin: 2rem auto;
    width: 36%;
    height: 4rem;
    border: none;
    box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.2);
}

.map_bg form i {
    right: 1rem;
    color: #b3b1ad;
    font-size: 2rem;
    transform: translate(-4rem, 2px);
}

.map_bg a {
    display: block;
    font-size: 1.8rem;
    color: #7f7c7b;
}

/* section.delivery */



/* section.video */
.video {
    margin-bottom: 12rem;
}

.video h2 {
    color: #f4166a;
    margin-bottom: 1rem;
}

.video .iframe_box {
    margin-top: 4rem;
    border-radius: 60px;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

/* section.video */



/* section.review */
.review {
    margin-bottom: 22rem;
    position: relative;
}

.review::before {
    content: '';
    background-color: #ffe8ec;
    width: 83.8%
        /*1610/1920px*/
    ;
    height: calc(100% + 44rem);
    position: absolute;
    left: 0;
    top: -36rem;
    z-index: -10;
}

.review h2 {
    color: #e8464c;
    margin-bottom: 1rem;
}

.review .flex_box {
    margin-top: 4rem;
    justify-content: space-between;
}

.review .flex_box a {
    width: calc(20% - 2rem);
}

.review .flex_box a>img {
    width: 100%;
}

/* section.review */



/* footer */
footer {
    border-top: solid 2px #ff0060;
    font-family: "GS_L";
    position: relative;
}

footer::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #f1f1f1;
    height: 77%;
    z-index: -10;
}

.ft_list .flex_box {
    justify-content: space-between;
    color: #505050;
    font-size: 2rem;
}

.ft_list .flex_box li {
    padding: 2.4rem 0;
}

.ft_list .flex_box li a {
    transition: all 0.2s ease-out;
}

.ft_list .flex_box li:hover a {
    font-weight: bold;
}

footer .btm {
    padding: 8rem 0;
    align-items: center;
}

footer .txt {
    font-size: 1.6rem;
    color: #656565;
    margin-left: 5rem;
}


/* footer */





/* mobile ver */
@media (max-width:1024px) {
    .pc_show {
        display: none !important;
    }

    html {
        font-size: 8px;
    }

    .logo {
        width: 200px;
    }

    .logo img {
        width: 100%;
    }

    .layout {
        padding: 0 2rem;
    }

    .w1300 {
        width: 100%;
    }

    .hd_box {
        padding: 4.3rem 0;
    }

    .ham_btn {
        border: none;
        cursor: pointer;
        position: absolute;
        right: 2rem;
        top: 5.4rem
    }

    .ham_btn i {
        color: #ff53a0;
        font-size: 5rem;
    }

    .img_box {
        width: 100%;
    }

    .sum_box {
        display: none;
    }

    .dot_con {
        position: absolute;
        left: 50%;
        bottom: -3rem;
        transform: translateX(calc(-50% - 4.4rem));
        z-index: 10;
    }

    .dot_con span {
        display: inline-block;
        width: 1.6rem;
        height: 1.6rem;
        background-color: #ccc;
        border-radius: 50%;
        color: transparent;
        margin: 0 0.3rem;
        cursor: pointer;
        position: absolute;
    }

    .dot_con span.on {
        background-color: #fe0060;
    }

    .dot_con .dot1 {
        left: 0;
    }

    .dot_con .dot2 {
        left: 2.2rem;
    }

    .dot_con .dot3 {
        left: 4.4rem;
    }

    .dot_con .dot4 {
        left: 6.6rem;
    }

    .dot_con .dot5 {
        left: 8.8rem;
    }

    .flex_box.info_con {
        flex-wrap: wrap;
    }

    .info_con>div {
        width: 100%;
        padding: 4rem 2rem 1.5rem;
    }

    .info_con>div:nth-child(1) {
        margin-bottom: 2rem;
    }

    .info .icon_list li {
        padding: 1rem;
    }

    .info .icon_list a i {
        font-size: 5rem;
    }

    .info .icon_list li p {
        white-space: nowrap;
    }

    .menu_con {
        flex-wrap: wrap;
        justify-content: center;

    }

    .menu_con>div {
        width: 100%;
    }

    .sm_box {
        flex-direction: column;
        margin-top: 2rem;
    }

    .sm_box .white_box {
        width: calc(50% - 1rem);
        height: calc(50% - 1rem);
    }

    .sm_box img {
        transform: translateY(-16%) scale(0.6);
        right: -6rem;
    }

    .sm_box a:nth-of-type(1) img {
        transform: translateY(-30%) scale(0.5);
    }

    .deli_con {
        flex-wrap: wrap;
    }

    .deli_con>div:nth-of-type(1),
    .deli_con>div:nth-of-type(2) {
        width: 100%;
        text-align: center;
    }

    .deli_con>div:nth-of-type(1) {
        border-right: none;
        border-bottom: #d1d1d1 solid 1px;
        padding-bottom: 3rem;
    }

    .deli_con .sub_tit {
        text-align: center;
    }

    .deli_con div:last-child h4 {
        margin-top: 3rem;
    }

    .deli_con .icon_list {
        flex-wrap: wrap;
    }

    .deli_con .icon_list li {
        height: 150px;
    }

    .deli_con .icon_list li img {
        transform: translateY(-20%) scale(0.8);
    }

    .review .flex_box {
        flex-wrap: wrap;
    }

    .review .flex_box a {
        width: calc(33% - 1rem);
    }

    .review .flex_box a:nth-of-type(4),
    .review .flex_box a:nth-of-type(5),
    .review .flex_box a:nth-of-type(6) {
        margin-top: 2rem;
    }

    /* .review .flex_box a:nth-of-type(4),
    .review .flex_box a:nth-of-type(5) {
        display: none;
    } */
}

@media (max-width:640px) {
    .ta_show {
        display: none !important;
    }

    .big li .point {
        font-size: 1.4rem;
        padding: 0.65rem;
        margin-bottom: 1.5rem;
    }

    .deli_con .icon_list li {
        width: calc(50% - 1rem);
    }

    .deli_con .icon_list li:nth-of-type(3),
    .deli_con .icon_list li:nth-of-type(4) {
        margin: 1.5rem 0;
    }

    .top_pop button {
        margin-top: -5rem;
    }
    
    .dot_con {
        bottom: -2.2rem;
        zoom: 0.8;
    }
}

@media (max-width:375px) {
    html {
        font-size: 7px;
    }

    .info_con>div p {
        font-size: 1.8rem;
    }

    .sm_box .white_box {
        padding: 2.6rem;
    }

    .sm_box h4 {
        font-size: 2.4rem;
    }

    .sm_box img {
        transform: translateY(-16%) scale(0.4);
        right: -9rem;
    }

    .sm_box a:nth-of-type(1) img {
        transform: translateY(-28%) scale(0.3);
    }

    .sm_box a:nth-of-type(3) img {
        right: -6rem;
    }

    .sm_box span {
        bottom: 2.6rem;
        left: 2.6rem;
    }
}

/* mobile ver */



/* tablet ver */
@media (max-width:768px) {

    .big li {
        width: calc(30%);
    }

    .ft_list .flex_box {
        flex-wrap: wrap;
    }

    .ft_list .flex_box li {
        width: 25%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .ft_list .flex_box li:nth-child(5),
    .ft_list .flex_box li:nth-child(6),
    .ft_list .flex_box li:nth-child(7) {
        width: 33.33%;
        padding-top: 0;
    }

    footer::before {
        height: 67%;
    }

    .ft_list .flex_box {
        font-size: 1.6rem;
    }

    footer .btm {
        padding: 6rem 0;
        flex-wrap: wrap;
        flex-direction: column;
    }

    footer .btm .logo {
        width: 100%;
    }

    footer .btm .logo a {
        width: 45%;
        display: block;
        margin: 0 auto 2rem;
    }

    footer .txt {
        margin-left: 0;
        width: 86%;
        text-align: center;
        font-size: 1.4rem;
    }

}

@media (min-width:641px) and (max-width:1024px) {
    br.m_show {
        display: none !important;
    }
}

/* tablet ver */




/* pc ver */
@media (min-width:1025px) {
    .m_show {
        display: none !important;
    }
}

@media (max-width:1300px) {
    .w1300 {
        width: 100%;
    }
}

@media (min-width:1025px) and (max-width:1500px) {
    html {
        font-size: 8px;
    }

    .layout {
        padding: 0 2rem
    }

    .gnb {
        font-size: 2.2rem;
    }

    .gnb .flex_box li {
        padding: 2.2rem 1rem;
        /* letter-spacing: -0.2rem; */
    }

    .sm_box img {
        transform: translateY(-8%) scale(0.6);
        right: -6rem;
    }

    .sm_box a:nth-of-type(1) img {
        transform: translateY(-23%) scale(0.6);
    }
}

@media (min-width:1501px) and (max-width:1700px) {
    .layout {
        padding: 0 4rem
    }

    .sm_box img {
        transform: translateY(-8%) scale(0.8);
        right: -4rem;
    }

    .sm_box a:nth-of-type(1) img {
        transform: translateY(-23%) scale(0.8);
    }
}