@charset "utf-8";

body { font-family: 'Noto Sans KR','Roboto', sans-serif;  line-height: 1.5; color: #333; font-size: 100%; }

.inner { max-width: calc(100% - 20.833%); margin: 0 auto; } /* 20.833=400px */

@media all and ( max-width: 1024px ){
    .inner { max-width: calc(100% - 10.416%); }
}


/* wrap */
#wrap { background: url('../images/bg.png') no-repeat center center fixed; overflow-x: hidden; background-size: cover; }

@media all and ( max-width:1024px ){
    #wrap { background: 0; }
}



/* header */
#header { position: absolute; left: 0; top: 0; width: 100%; z-index: 9; background: #fff; }
#header .inner { display: flex; justify-content: space-between; align-items: center; height: 100px; }
#header img { width: 60px; display: block; }
#header .gnb > li { float: left; }
#header .gnb > li > a { display: block; font-size: 25px; padding: 30px 0; width: 175px; text-align: center; transition: color 0.5s; }
#header .gnb > li:hover > a { color: #2085C4; }
#header .depth2 { position: absolute; background: #fff; padding: 20px 10px; text-align: center; width: 176px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); }
#header .depth2 li a { display: block; padding: 5px 10px; font-size: 18px; transition: background 0.5s, color 0.5s; }
#header .depth2 li a:hover { background: #2085C4; color: #fff; }

/* mgnb */
#header .ham { width: 30px; height: 30px; display: none; }
#header .ham img { width: 100%; }
#header .mgnb_wrap { position: fixed; right: -100%; top: 0; background: #fff url('../images/mgnb_bg.png') no-repeat right bottom; width: 400px; height: 500px; padding: 0 5.208%; }
#header .mgnb_wrap .mgnb_title { height: 100px; border-bottom: 1px solid rgba(0, 0, 0, 0.2); display: flex; justify-content: space-between; align-items: center; }
#header .mgnb_wrap .mgnb_title img { display: block; width: 20px; height: 20px; }
#header .mgnb_wrap .mgnb > li { margin: 20px 0; }
#header .mgnb_wrap .mgnb > li > a { display: block; font-size: 20px; font-weight: 600;cursor: pointer; }
#header .mgnb_wrap .mgnb .mdepth2 { padding: 10px 0 0 10px; }
#header .mgnb_wrap .mgnb .mdepth2 > li > a { display: block; font: 18px; padding: 5px 0; }
#header .mgnb_wrap .mgnb .on { color: #2085C4; }
#header.fix { position: fixed; left: 0; top: 0; }

@media all and ( max-width:1024px ){
    #header .gnb { display: none; }
    #header .ham { display: block; }
}

@media all and ( max-width:768px ){
    #header .inner { height: 60px; }
    #header h1 { transform: scale(0.5,0.5); }
    #header .mgnb_wrap { width: 300px; }
    #header .mgnb_wrap .mgnb_title { height: 60px; }
}

@media all and ( max-width:480px ){
    #header .mgnb_wrap { height: 100%; }
}



/* container */
#container { padding-top: 100px; }
@media all and ( max-width:768px ){
    #container { padding-top: 60px; }
}



/* main_visual */
#main_visual01 { width: 100%; height: 600px; background: url('../images/sub/menu_mv01.jpg') no-repeat center center fixed; color: #fff; text-align: center; position: relative; background-size: cover; }
#main_visual02 { width: 100%; height: 600px; background: url('../images/sub/menu_mv02.jpg') no-repeat center center fixed; color: #fff; text-align: center; position: relative; background-size: cover; }
#main_visual03 { width: 100%; height: 600px; background: url('../images/sub/menu_mv03.jpg') no-repeat center center fixed; color: #fff; text-align: center; position: relative; background-size: cover; }
#main_visual04 { width: 100%; height: 600px; background: url('../images/sub/menu_mv04.jpg') no-repeat center center fixed; color: #fff; text-align: center; position: relative; background-size: cover; }
article:before { content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0, 0, 0, 0.2); }
article .inner { height: 100%; position: relative; }
article .sub_txt { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); width: 100%; }
article .sub_txt h2 { display: inline-block; font-size: 50px; display: inline-block; border-bottom: 3px solid rgba(255, 255, 255, 0.5); padding-bottom: 10px; margin-bottom: 10px;}
article .sub_txt p { font-weight: normal; }
article .snb { position: absolute; left: 50%; bottom: 50px; transform: translateX(-50%); border: 1px solid #fff; width: 100%;}
article .snb li { float: left; width: calc(100%/4); }
article .snb li a { display: block; font-size: 20px; color: #fff; border-right: 1px solid #fff; padding: 10px 5px; transition: background 0.5s,color 0.5s; }
article .snb li:last-child a { border-right:0; }
article .snb li:hover a,article .snb li .on { background: #fff; color: #333; font-weight: 600; }

@media all and (max-width: 1024px) {
    article .sub_txt h2 { font-size: 40px; }
    #main_visual01 { height: 450px; }
    #main_visual02 { height: 450px; }
    #main_visual03 { height: 450px; }
    #main_visual04 { height: 450px; }
}

@media all and ( max-width: 768px ){
    article .sub_txt p { display: none; }
    article .snb li a { padding: 10px 2px; }

}

@media all and (max-width: 480px) {
    article .sub_txt { top: 40%; }
    article .sub_txt h2 { font-size: 30px; }
    article .inner { max-width: 100%; }
    article .snb { bottom: 0; }
    article .snb li { float: left; width: calc(100%/2); }
    article .snb li a { font-size: 18px; padding: 10px 2px; border-bottom: 1px solid #fff; }
    article .snb li:nth-child(2) a { border-right: 0; }
}



/* location */
#location { padding-top: 20px; height: fit-content; }
#location .breadcrumbs li { float: left; }
#location .breadcrumbs li a { display: block; padding: 0 20px; background: url('../images/sub/breadcrumbs_arrow.png') no-repeat 0 center; }
#location .breadcrumbs li:first-child a { text-indent: -9999px; background: url('../images/sub/breadcrumbs_home.png') no-repeat left top; }

@media all and ( max-width: 1024px ){
    #location { display: none; }
}



/* section */
section { padding: 100px 0; }
section ul { width: 100%; }
section h3 { font-size: 0; }
section .menu_title { padding-top: 10px; font-size: 18px; }
section .menu_price { color: #999; }

@media all and ( max-width: 768px ){
    section { padding: 80px 0; }
    section h3 span { display: block; }
}

@media all and ( max-width: 480px ){
    section { padding: 50px 0; }
    section h3 span { font-size: 18px; }
    section p { font-size: 16px; }
}



/* menu_pudding */
#menu_pudding .pudding_list li { float: left; width: calc((100% - 60px)/4); margin: 0 20px 50px 0; text-align: center; position: relative; }
#menu_pudding .pudding_list li:nth-child(4n){ margin-right: 0; }
#menu_pudding .pudding_list li:nth-child(1):before,#menu_pudding .pudding_list li:nth-child(2):before,#menu_pudding .pudding_list li:nth-child(3):before { content: 'BEST'; padding: 5px 10px; background: #000; color: #fff; position: absolute; left: 0; top: 0; z-index: 3; }
#menu_pudding .pudding_list li:nth-child(8):before { content: 'NEW'; padding: 5px 10px; background: #2085C4; color: #fff; position: absolute; left: 0; top: 0; z-index: 3; }
#menu_pudding .pudding_list li .img { width: 100%; overflow: hidden; }
#menu_pudding .pudding_list li .img img { width: 100%; height: 100%; display: block; transition: transform 0.5s; }
#menu_pudding .pudding_list li:hover .img img { transform: scale(1.2); }

@media all and ( max-width: 1024px ){
    #menu_pudding .pudding_list li { float: left; width: calc((100% - 40px)/3); margin: 0 20px 50px 0; text-align: center; position: relative; }
    #menu_pudding .pudding_list li:nth-child(4n){ margin: 0 20px 50px 0; }
    #menu_pudding .pudding_list li:nth-child(3n){ margin-right: 0; }
}

@media all and ( max-width: 768px ){
    #menu_pudding .pudding_list li { float: left; width: calc((100% - 20px)/2); margin: 0 20px 30px 0; text-align: center; position: relative; }
    #menu_pudding .pudding_list li:nth-child(3n){ margin: 0 20px 50px 0; }
    #menu_pudding .pudding_list li:nth-child(2n){ margin-right: 0; }
}



/* menu_cookie */
#menu_cookie .cookie_list li { float: left; width: calc((100% - 60px)/2); margin-right: 20px; text-align: center; position: relative; }
#menu_cookie .cookie_list li:last-child { margin-right: 0; }
#menu_cookie .cookie_list li:nth-child(1):before { content: 'BEST'; padding: 5px 10px; background: #000; color: #fff; position: absolute; left: 0; top: 0; z-index: 9; }
#menu_cookie .cookie_list li .img { width: 100%; overflow: hidden; }
#menu_cookie .cookie_list li .img img { width: 100%; display: block; transition: transform 0.5s; }
#menu_cookie .cookie_list li:hover .img img { transform: scale(1.2); }

@media all and ( max-width: 480px ){
    #menu_cookie .cookie_list li { width: 100%; margin: 0 0 50px ; }
}



/* menu_goods */
#menu_goods .goods_list li { float: left; width: calc((100% - 60px)/4); margin: 0 20px 50px 0; text-align: center; position: relative; }
#menu_goods .goods_list li:nth-child(4),#menu_goods .goods_list li:nth-child(8) { margin-right: 0; }
#menu_goods .goods_list li:nth-child(1):before { content: 'BEST'; padding: 5px 10px; background: #000; color: #fff; position: absolute; left: 0; top: 0; z-index: 3; }
#menu_goods .goods_list li:nth-child(7):before { content: 'NEW'; padding: 5px 10px; background: #2085C4; color: #fff; position: absolute; left: 0; top: 0; z-index: 3; }
#menu_goods .goods_list li .img { width: 100%; overflow: hidden; }
#menu_goods .goods_list li .img img { width: 100%; height: 100%; display: block; transition: transform 0.5s; }
#menu_goods .goods_list li:hover .img img { transform: scale(1.2); }

@media all and ( max-width: 1024px ){
    #menu_goods .goods_list li { float: left; width: calc((100% - 40px)/3); margin: 0 20px 50px 0; text-align: center; position: relative; }
    #menu_goods .goods_list li:nth-child(4n){ margin: 0 20px 50px 0; }
    #menu_goods .goods_list li:nth-child(3n){ margin-right: 0; }
}

@media all and ( max-width: 768px ){
    #menu_goods .goods_list li { float: left; width: calc((100% - 20px)/2); margin: 0 20px 30px 0; text-align: center; position: relative; }
    #menu_goods .goods_list li:nth-child(3n){ margin: 0 20px 50px 0; }
    #menu_goods .goods_list li:nth-child(2n){ margin-right: 0; }
}



/* menu_soap */
#menu_soap .soap_list li { float: left; width: calc((100% - 60px)/4); margin: 0 20px 50px 0; text-align: center; position: relative; }
#menu_soap .soap_list li:nth-child(4),#menu_goods .goods_list li:nth-child(8) { margin-right: 0; }
#menu_soap .soap_list li .img { width: 100%; overflow: hidden; }
#menu_soap .soap_list li .img img { width: 100%; height: 100%; display: block; transition: transform 0.5s; }
#menu_soap .soap_list li:hover .img img { transform: scale(1.2); }

@media all and ( max-width: 1024px ){
    #menu_soap .soap_list li { float: left; width: calc((100% - 40px)/3); margin: 0 20px 50px 0; text-align: center; position: relative; }
    #menu_soap .soap_list li:nth-child(4n){ margin: 0 20px 50px 0; }
    #menu_soap .soap_list li:nth-child(3n){ margin-right: 0; }
}

@media all and ( max-width: 768px ){
    #menu_soap .soap_list li { float: left; width: calc((100% - 20px)/2); margin: 0 20px 30px 0; text-align: center; position: relative; }
    #menu_soap .soap_list li:nth-child(3n){ margin: 0 20px 50px 0; }
    #menu_soap .soap_list li:nth-child(2n){ margin-right: 0; }
}





/* footer */
#footer { background: #7E6D64; text-align: center; color: #fff; padding: 80px 0 80px; }
#footer address { opacity: 0.5; }
#footer address span { display: inline-block; margin-left: 20px; }
#footer .copy { padding-top: 5px; opacity: 0.3; }

@media all and ( max-width:768px ){
    #footer { font-size: 14px; padding: 50px 0 50px; }
    #footer address span { display: block; }
}

@media all and ( max-width:480px ){
    #footer { font-size: 12px; padding: 50px 0 50px; }
}



/* go_top */
.go_top { background: #5D493E url('../images/btn_gotop.png') no-repeat center center ; width: 80px; height: 80px; font-size: 0; border-radius: 50px; position: fixed; right: 50px; bottom: 50px; opacity: 0.8; cursor: pointer; z-index: 999; }

@media all and ( max-width: 768px ){
    .go_top { width: 40px; height: 40px; background-size: 20px; right: 10px; bottom: 10px; }

}