@charset 'utf-8';
@import url('common.css');



/* header */
.head nav ul li:nth-child(4) > a{ background-color: #0088e7; color: white; }


/* menu */

.menu{ margin-top: 101px; border-top: 1px solid rgb(248, 248, 248);
    left: 0; top: 101px; width: 100%; height: 50px; background-color: rgb(248, 248, 248);}
.menu ul{ width: 80%; height: 100%; margin: 0 auto;  position: relative;}
.menu ul li{width: 180px; margin: 11px 0 ; position: absolute; right: 0px; top: 0; }
.menu ul li a{ color: #333; margin: 0 10px; }
.menu ul li a:nth-child(1){ color: #0088e7;}


/* title */
.title{
    left: 0; top: 101px; width: 80%; height: 70px; margin: 0 auto; padding: 50px 0 0 0;
    display: flex; align-items: center; justify-content: flex-start;
}
.title p{width: 30px; margin-right: 10px; transform: translateY(-10%) }
.title p img{width: 100%; ;
    transform-style: preserve-3d; perspective: 20px; animation: a3 2s infinite;
}
@keyframes a3 {
    0%{transform: rotateY(0deg);}
    100%{transform: rotateY(360deg);}
}
.title h2{ left: 0; top: 0; font-size: 22px; }



/* mapnav */
.mapnav{ left: 0; top: 0; width: 80%; margin: 0 auto;}
.mapnav ul{display: flex; align-items: center; justify-content: center;}
.mapnav ul li{    border: 2px solid lightgray; border-left: none;
    width: 100%; padding: 10px 20px; box-sizing: border-box;}
.mapnav ul li:nth-child(1){border-left: 2px solid lightgray;}
.mapnav ul li a{display: flex; align-items: center; justify-content: space-between;
    height: 25px; width: 100%;}
.mapnav ul li a p img{ width: 20px;}

.mapnav .a{width: 15%;}
.mapnav .b{width: 15%;}
.mapnav .c{width: 40%;}
.mapnav .d{width: 11%; background-color: #0088e7; border: 2px solid #0088e7;}
.mapnav .e{width: 19%;}

.mapnav .d p img{width: 20px;}
.mapnav .d div{color: white;}

.mapnav .e img{width: 20px}
.mapnav .e:hover div{ color: #0088e7;}

.mmnav{display: none;}



/* delivery */
.delivery{width: 80%; margin: 0 auto; margin-top: 50px; position: relative;}
.delivery figure{}
.delivery figure > p{ }
.delivery figure > p img{width: 100%; height: 400px; object-fit: cover;}
.delivery figure > p span{ display: block; left: 0; top: 0; position: absolute;
    width: 100%; height: 100%; font-size: 0;
    background: linear-gradient( to right, rgba(0,0,0,0), rgba(0,0,0,0.8));
}

.delivery figure article{ position: absolute; left: 58%; top: 30%;  width: 40%;
}
.delivery figure article h2{ color: white; font-size: 25px; padding-bottom: 20px; font-family: 'Chosunilbo_myungjo';}
@font-face {
    font-family: 'Chosunilbo_myungjo';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Chosunilbo_myungjo.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
.delivery figure article ul{}
.delivery figure article ul li{ display: flex; align-items: flex-start; justify-content: space-between; line-height: 1.5;}
.delivery figure article ul li span{ color: #c6c6c6; width:15%;}
.delivery figure article ul li p{ color: white; width: 80%; padding-bottom: 20px;}





/* best */
.best{ width: 80%; margin: 0 auto; left: 0; top: 0; margin-top: 130px;}
.best h2{text-align: center; font-size: 25px; margin-bottom: 40px;}
.best > div{ display: flex; align-items: flex-start; justify-content: space-between;}
.best > div > div{ width: 32%; height: 340px; overflow: hidden;
    display: flex; align-items: center; justify-content: space-between; flex-direction: column;
}
.best > div > div > a {width: 100%;}

/* 메뉴 */
.best1 a figure{ position: relative; width: 100%; }
.best2 a figure{ position: relative; width: 100%;  overflow: hidden;}
.best3 a figure{ position: relative; width: 100%;  overflow: hidden;}

.best1 > a figure > div{height: 350px;}
.best2 > a figure > div{height: 160px;}
.best3 > a figure > div{height: 160px;}

/* 이미지 */
.best1 > a figure > div > img{width: 100%; height: 100%; object-fit: cover;}
.best2 > a figure > div > img{width: 100%; height: 100%; object-fit: cover;}
.best3 > a figure > div > img{width: 100%; height: 100%; object-fit: cover;}

.best > div div > a figure > div > img{transition: .5s;}
.best > div div > a:hover figure > div > img{transform: scale(1.2);}




/* 하단정보 */
.best1 > a figure figcaption{ position: absolute; left: 0%; bottom: 0;
    background-color: rgba(0,0,0,0.5); width: 100%; height: 170px; text-align: center; padding: 40px 20px; box-sizing: border-box;
}
.best2 > a figure figcaption{ position: absolute; left: 0%; bottom: 0;
    background-color: rgba(0,0,0,0.5); width: 100%; height: 100px; text-align: center; padding: 10px 20px; box-sizing: border-box;
}
.best3 > a figure figcaption{ position: absolute; left: 0%; bottom: 0;
    background-color: rgba(0,0,0,0.5); width: 100%; height: 100px; text-align: center; padding: 10px 20px; box-sizing: border-box;
}
.best > div > div > a figure figcaption small{ color: #c6c6c6; font-size: 13px;}
.best > div > div > a figure figcaption > h2{ color: white; margin: 0; font-size: 17px;}
.best > div > div > a figure figcaption div{ display: flex; align-items: baseline; justify-content: center;}
.best > div > div > a figure figcaption div > p{ padding: 0 10px;}
.best > div > div > a figure figcaption div > p:nth-of-type(1){ color: #fad354;}
.best > div > div > a figure figcaption div > p:nth-of-type(2){ color: white;}

.best > div > div > a figure figcaption{transform: translateY(100%); transition: 0.5s;}
.best > div > div > a:hover figure figcaption{transform: translateY(0);}



/* 더보기 버튼 */

.best > div > div > a figure > figure img{ width: 37px;}
.best > div > div > a figure > figure{position: absolute; right: -88%; bottom: 6%;}




/* new title */

.new{width: 80%; margin: 0 auto; left: 0; top: 0; margin-top: 150px;}
.new h2{ text-align: center; font-size: 25px; margin-bottom: 50px;}

.new nav{ border-bottom: 2px solid lightgray;
    display: flex; align-items: flex-start; justify-content: space-between;
}
.new nav a{  padding: 0 20px; font-size: 17px; color:lightgray; transform: translateY(2px); cursor: pointer; }
.new nav a:nth-child(7){margin-right: 30px;}
.new nav a:nth-child(1){ margin-left: 30px;}
.new nav a.view{ color: #333; border-bottom: 2px solid #333;}

.new nav a:hover{ color: #0088e7; border-bottom: 2px solid #0088e7;}



/* item */

.item{ width: 80%; margin: 0 auto; margin-top: 50px;}
.item > div{ display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
    margin-bottom: 30px; display: none;
}
.item > div.view{display: flex;}
.item > div a{ width: 32%; border-top: 2px solid rgb(244, 244, 244); margin-bottom: 50px;
}

/* 제품이미지 */
.item > div a figure{position: relative; transition: .5s;}
.item > div a figure > div > img{width: 100%; height: 180px; object-fit: cover;transition: .5s;}

/* 주석 */
.item > div a figure > span{ display: inline-block; position: absolute; left: 3%; top: 5%; transition: .5s; }
.item > div a figure > span b{  color: white; padding: 0 13px ; background: #0088e7; border-radius: 25px;}

/* 아이콘 */
.item > div a figure > p{ position: absolute; right: 4%; bottom: 5%;}
.item > div a figure > p img{width: 37px;}

/* 이미지 호버 */
.item > div a:hover figure > div > img{opacity: 70%;}


/* 판매내용 */
.item > div a article{ margin-top: 12px; line-height: 1.5;}
.item > div a article small{ color: #c6c6c6; font-size: 14px;}
.item > div a article h2{margin: 3px 0; color: #5a5a5a; font-size: 19px;}
.item > div a article > div{ display: flex; align-items: baseline; justify-content: flex-start;}
.item > div a article > div p:nth-child(1){color: #0088e7; padding-right: 10px; font-weight: bold;}
.item > div a article > div h3{ padding-right: 10px;}
.item > div a article > div p:nth-child(3){ color: #c6c6c6; text-decoration: line-through;}



.item > p{
    margin: 0 auto; margin-top: 30px; display: block; cursor: pointer;
    width: 10%; padding: 15px 40px; font-size: 18px;
    text-align: center; transition: .3s; color: #0088e7;background-color: white;
    border: 1.5px solid #c6c6c6; border-radius: 30px;
}
.item > p:hover{
    border: 1.5px solid #0088e7;
    box-shadow: 1px 5px 5px rgba(0, 0, 0, 0.1);
}





@media (max-width:1111px) and (min-width:1047px){
    .new nav a:nth-child(7){margin-right: 0;}
    .new nav a:nth-child(1){ margin-left: 0;}
}

@media (max-width:1046px){

    .header{    height: 85px; left: 0; top: 0; background-color: rgba( 255, 255, 255, 0 );
        border-bottom: none; margin: 0; padding: 5px 0; box-sizing: border-box; 
        width: 100%;  position: relative; z-index: 10;}
    .head{display: none;}
    header:hover::after{ display: none; }

    /* .mhead */
    .mhead{ display: block; width: 80%; margin: 0 auto; }
    .mhead ul{width: 100%; display: flex; align-items: center; justify-content: space-between; margin-top: 30px;}
    .mhead ul li{ display: flex; align-items: center; justify-content: space-between;}
    
    .mhead ul li:nth-child(1){width: 20px;}
    .mhead ul li:nth-child(1) a img{width: 100%;}

    .mhead ul li:nth-child(2) a{width: 20px; z-index: 20;}
    .mhead ul li:nth-child(2) a img{width: 100%;}

    .bgmenu{ position: fixed; width: 50%; height: 100%; right: 0; top: 0; background-color: rgba(255, 255, 255);
        display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column;
        z-index: 10; transform: translateX(100%); transition: .5s; box-shadow: -10px 0 10px rgba(0, 0, 0, 0.05);
    }
    .bgmenu > div{ width: 80%; transform: translateY(20%); border-top: 2px solid #e3e3e3;}
    .bgmenu div > div{width: 100%; margin: 0px 0; line-height: 1.5; margin: 30px 0;}
    .bgmenu div div > h2{ font-size: 19px; margin: 5px 0;}
    .bgmenu div div > a p{ color: #999; font-size: 17px;}
    .bgmenu div > p{width: 40%; position: fixed; right: 0; bottom: 0; transform: translateY(250px);}
    .bgmenu div > p img{width: 100%;}

    .bgmenu.active{transform: translateX(0);}
    .active div > a p:hover{color: #0088e7;}


    /* menu */

    .menu{ margin-top: 0; border-top: none;
        left: 0; top: 0; width: 100%; height: 50px; background-color: white;}
    .menu ul{ width: 80%; height: 100%; margin: 0 auto; border-bottom: 2px solid #e3e3e3;}
    .menu ul li{  width: 100%;  text-align: center; margin: 0 auto; transform: translateX(0);
        display: flex; align-items: center; justify-content: center; position: inherit;
    }
    .menu ul li a{ margin: 0; width: 100%; height: 32.5px; color: #adadad;
        display: block; font-size: 20px; transform: translateY(50%);
    }
    .menu ul li a:nth-child(1){ color: #0088e7; border-bottom: 2px solid #0088e7}

    /* title, mapnav */
    .title{ display: none;}
    .mapnav{display: none;}

    /* mmnav */
    .mmnav{display: block; width: 80%; margin: 0 auto;}
    .mmnav div{display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid rgb(173,173,173);
        padding: 10px 10px; margin-top: 50px;
    }
    .mmnav div p{font-size: 20px; color: rgb(173,173,173);}
    .mmnav div a{width: 30px;}
    .mmnav div a img{width: 100%;}


    /* delivery */
    .delivery{width: 80%; margin: 0 auto; margin-top: 40px; position: relative;}
    .delivery figure > p{border-radius: 10px; overflow: hidden; }
    .delivery figure > p span{border-radius: 10px; overflow: hidden; background: linear-gradient( to bottom, rgba(0,0,0,0), rgba(0,0,0,0.8));}

    .delivery figure article{ position: absolute; left: 5%; top: 65%;  width: 100%;
        display: flex; align-items: center; justify-content: space-between;
    }
    .delivery figure article h2{ color: white; font-size: 25px; padding-bottom: 0;}
    .delivery figure article ul{width: 70%;}
    .delivery figure article ul li{ display: flex; align-items: flex-start; justify-content: space-between; line-height: 1.2;}
    .delivery figure article ul li span{ color: #c6c6c6; width:15%;}
    .delivery figure article ul li p{ color: white; width: 80%; padding-bottom: 10px;}



    /* best */
    .best{display: none;}

    /* new title */

    .new{margin-top: 70px;}
    .new h2{ margin-bottom: 30px;}

    .new nav{ border-bottom: none;
        display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
    }
    .new nav a{ width: 33%; height: 24px; margin-top: 10px; padding: 0; transform: translateY(0); text-align: center;
        border-bottom: 2px solid rgba(0, 0, 0, 0);
    }
    .new nav a:nth-child(7){margin-right: 0;}
    .new nav a:nth-child(1){ margin-left: 0;}




    /* item */

    .item{ width: 80%; margin: 0 auto; margin-top: 0px;}
    .item > div{ display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 0; display: none; }
    .item > div.view{display: flex;}
    .item > div a{ width: 48%; padding-top: 60px; border-top: none; margin-bottom: 20px; display: block;}
    .item > div:nth-child(1) a{padding-top: 50px;}

    /* 제품이미지 */
    .item > div a figure > div > img{width: 100%; height: 270px; object-fit: cover; border-radius: 10px;}

    /* 이미지 호버 */
    .item > div a:hover figure{transform: translate(0);}
    .item > div a:hover figure > div > img{ opacity: 70%; box-shadow: none; }


    /* 판매내용 */
    .item > div a article{ margin-top: 15px; line-height: 1.5;}
    .item > div a article small{ color: #c6c6c6; font-size: 14px;}
    .item > div a article h2{ margin-top: 5px; color: #5a5a5a;}
    .item > div a article > div{ display: flex; align-items: baseline; justify-content: flex-start;}
    .item > div a article > div p:nth-child(1){color: #0088e7; font-size: 21px; padding-right: 10px;}
    .item > div a article > div h3{ font-size: 21px; padding-right: 10px;}
    .item > div a article > div p:nth-child(3){ color: #c6c6c6; text-decoration: line-through;}



    .item > p{
        margin: 0 auto; margin-top: 60px; display: block;
        width: 15%; padding: 15px 40px; font-size: 18px;
    } 

    /* footer */
    .footer{ left: 0; top: 0;
        width: 100%; height: 110px; background-color: rgb(248, 248, 248));}
    .footer > div{ width: 100%; left: 0; top: 0; margin: 0 auto; padding-top: 20px;
        display: inherit; align-items: flex-start; justify-content: space-between;}

    /* logo */
    .logo{  width: 25%; min-width: 250px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px;}
    .logo p{ margin: 6px;}
    .logo p img{ width: 100%;}

    /* 안내 */
    .text{  width: 80%; margin: 0 auto; display: flex; justify-content: center; align-items: center; flex-direction: column;}
    .text li{ margin: 0; font-size: 12px; color: #999;}
    .text > li:nth-child(1) a{ font-size: 12px; padding: 0 10px; color: #999;}
    .text > li  small{ font-size: 11px; color: #c6c6c6;}

    /* sns */
    .sns{ display: none;}

}


@media (max-width:700px){
    .menu ul li a{font-size: 18px;}
    
    .delivery figure article{ position: absolute; left: 5%; top:50%;  width: 100%; display: inherit;}
    .delivery figure article h2{ padding-bottom: 25px;}
    .delivery figure article ul{width: 100%;}
    .delivery figure article ul li{ line-height: 1.5; }
    .delivery figure article ul li span{font-size: 15px; }
    .delivery figure article ul li p{font-size: 15px;}

    .item > a{ width: 20%;}
    .item > div a{ width: 100%;}

    .new nav a{ width: 48%;}
}

@media (max-width:479px){
    .delivery figure article{ left: 5%; top: 50%;}
}