@charset "utf-8"; 

html {font-size:14px;color:var(--txt_color);  background:#f6f5f5}

body{ font-size:14px;    
    margin:0 auto;    padding:0 1em;    color:var(--txt_color);
    font-family: 'Noto Sans KR';
    box-sizing:border-box;transition:all .3s;
    font-weight:500;    line-height:24px;     -webkit-text-size-adjust:none;/*overflow-y:scroll;*/
}

#wrapper{ margin: 0 auto;   width: 800px;  /*전체 가운데 배치 */ ; background:white;
border-style: solid;
border-width: 2px;
border-color: rgb(193, 180, 180);
border-radius: 8px;
margin-top: 1em;
} 
/* wrapper == main_body */

.main_body{ margin: 0 auto;   width: 800px;  /*전체 가운데 배치 */ ; background:white;
    border-style: solid;
    border-width: 2px;
    border-color: rgb(193, 180, 180);
    border-radius: 8px;
    margin-top: 1em;
    } 

    

.m_item{    display:none!important}
.saygift { font-family: 'Lobster', cursive !important;  border-radius: 10px; font-size: 1.5em;
    border-style: solid; border-width: 0px; border-color: var(--color_hana)!important; 
    color: red !important;  text-shadow: 1px 1px 1px #f54 !important;
    }
    .saygift:hover{ color: yellow !important; text-shadow: 1px 1px 1px var(--color_hana) !important; }
.point{ font-family: 'Lobster',cursive !important;  color: red !important; font-size: 0.8em !important;  text-decoration: none !important; 
    display: inline-block !important; padding-left: 1em !important; padding-right: 1em !important;}

.pdshow { height: 2.0em; }

.no_show { position: absolute; right: -20px; opacity: 0;}

@media all and (min-width:768px) and (max-width:1023px) { 
    html{  font-size:16px}
    body{ width:100%; font-size:16px; padding:0 1em calc(8.5em + env(safe-area-inset-bottom)) 1em}
    #wrapper{ width:100%; margin: 0 auto; margin-top: 1em;}
    .m_item{    display:none!important}
}

/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/
@media all and (max-width:767px) { 
    .m_item{    display:block  !important}
    .pc_item{    display:none!important}
    body{ width:100%; font-size:14px; padding:0 1em calc(8.5em + env(safe-area-inset-bottom)) 1em}
    #wrapper{ width:100%; margin: 0 auto; margin-top: 0em;}
}

@media all and (max-width:480px) { 
    .m_item{    display:block  !important}
    .pc_item{    display:none!important}
    body{ width:100%; font-size:12px; padding:0 1em calc(8.5em + env(safe-area-inset-bottom)) 1em}
    #wrapper{ width:100%; margin: 0 auto; margin-top: 0em;}
    .saygift {font-size: 1em; }
}





html,h1,h2,h3,h4,h5,h6,form,fieldset,img{ margin:0;    padding:0;border:0}
h1,h2,h3,h4,h5,h6{font-size:1em;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{    display:block}
ul,ol,dl,dt,dd{    margin:0;    padding:0;    list-style:none}

.top_image {width:10em; !important}
.top_title {font-size: 0.8em; color: black;     margin-left: 2em;}
.top_icon { line-height: 0%; margin-bottom: -7px;    font-size: 1.8em;}
    
legend{    position:absolute;    margin:0;    padding:0;    font-size:0;    line-height:0;    text-indent:-9999em;    overflow:hidden}
    
label,input,button,select,img{    vertical-align:middle;    font-size:1em}
input,button{    margin:0;    padding:0; font-size:1em;border:0; }
input[type=submit]{    cursor:pointer}



button{    cursor:pointer;    transition:all .3s}    
p{    margin:0;    padding:0;    word-break:break-all}

/*
hr{    display:none}
*/


a{    color:var(--txt-color-def);    text-decoration:none; }
br{    font-size:0}
    
*,:after,:before{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;box-sizing:border-box}
    
input[type=text],input[type=password],textarea{    -webkit-transition:all .3s ease-in-out;    -moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;outline:none}
    
code{        -webkit-appearance:none;-moz-appearance:none;appearance:none;font-weight:var(--txt-regular);color:var(--color-gray-900)}

pre{ overflow-x:auto;white-space:pre-line;-webkit-appearance:none;-moz-appearance:none;appearance:none;
  line-height: 1.5em;
}

input[type=text],input[type=password],input[type=tel],input[type=email],input[type=date],input[type=url],input[type=search],input[type=number],input[type=submit]{    -webkit-appearance:none;-moz-appearance:none;appearance:none;
    }

input[type=text]:focus,input[type=password]:focus,input[type=tel]:focus,input[type=email]:focus,input[type=date]:focus,input[type=url]:focus,input[type=search]:focus,input[type=number]:focus,textarea:focus,select:focus{
    -webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:0 0 1em 0 rgba(0,0,0,.2)}
input::placeholder,textarea::placeholder{
    font-size:2em;color:var(--color-gray-500)}
textarea,select,button{
    -webkit-appearance:none;-moz-appearance:none;appearance:none;;background:0 0;color:var(--txt-color-def)}
img{    max-width:100%;height:auto}


.color_main{    color:var(--color-main)}
.color_hana{ color:var(--hana_color)}
.color_point{    color:var(--color-point)}
.color_sub_point{    color:var(--color-sub-point)}
.color_red{    color:var(--color-red)}
.line_one{border: 1px; height: 1px;}

.sub_title  {
    display: block;
    margin-left: 10px;
    margin-top: 20px;
    margin-bottom: 3px;
    text-align: left;
    font-size: 1.5em;
    line-height: 1.6;
    font-weight: var(--txt-regular);
    color: var(--hana_color);
    font-family: 'hanaB';
}





header{    position:relative;top:0;left:0;right:0;width:100%;z-index:999999;transition:all .5s;
    font-family: 'hanaB', Courier, monospace;}

    .align_cnt{    text-align:center}
    .align_left{    text-align:left}
    .align_right{    text-align:right}
    .flex_nml{    display:-ms-flexbox;display:-webkit-flexbox;display:flex}
    .flex_inline{    display:inline-flex}
    
    .flex_btw{    display:-ms-flexbox;display:-webkit-flexbox;display:flex;justify-content:space-between; gap:1rem calc(6%/3) }
    .flex_btw2{    display:-ms-flexbox;display:-webkit-flexbox;display:flex; gap:1rem calc(6%/3) }
    .flex_cnt{    display:-ms-flexbox;display:-webkit-flexbox;display:flex;justify-content:center}
    .flex_ard{    display:-ms-flexbox;display:-webkit-flexbox;display:flex;justify-content:space-around}
    .flex_end{    display:-ms-flexbox;display:-webkit-flexbox;display:flex;justify-content:flex-end}

    .flex_left{    display:-ms-flexbox;display:-webkit-flexbox;display:flex;justify-content:left; gap:1rem calc(10%/3) }


    .flex_col{    flex-flow:column}
    .flex_wrap{    flex-wrap:wrap}
    .items_base{    align-items:baseline}
    .items_str{    align-items:start}
    .items_cnt{    align-items:center}
    .items_end{    align-items:end}

    input.input_cst{    box-sizing:border-box;width:90%;height:auto;padding:1em 1em;font-size:1em;font-weight:var(--txt-medium);border:1px solid transparent;background:#fff;border-radius:.5em}
    input.input_cst:focus{    -webkit-appearance:none;-moz-appearance:none;appearance:none;border-color:var(--color-main);outline:none}
    input.input_cst.readonly,input.input_cst.readonly:focus,input.input_cst:read-only:focus{    border-color:transparent;box-shadow:none;cursor:default}
    input.input_cst:disabled{    border:1px solid var(--color-gray-300);background-color:transparent}

    input.input_cst_two{    box-sizing:border-box;width:100%;height:auto;padding:1.25em 1em;font-size:1.5em;font-weight:var(--txt-medium);border:1px solid transparent;background:#fff;border-radius:.5em}
    input.input_cst_two:focus{    -webkit-appearance:none;-moz-appearance:none;appearance:none;border-color:var(--color-main);outline:none}
    input.input_cst_two.readonly,input.input_cst_two.readonly:focus,input.input_cst_two:read-only:focus{    border-color:transparent;box-shadow:none;cursor:default}
    input.input_cst_two:disabled{    border:1px solid var(--color-gray-300);background-color:transparent}


    .material-icons {
        font-family: 'Material Icons';        font-weight: normal;        font-style: normal;        font-size: 24px;  /* Preferred icon size */
        display: inline-block;        line-height: 1;        text-transform: none;        letter-spacing: normal;        word-wrap: normal;
        white-space: nowrap;        direction: ltr;
      
        /* Support for all WebKit browsers. */
        -webkit-font-smoothing: antialiased;
        /* Support for Safari and Chrome. */
        text-rendering: optimizeLegibility;
          /* Support for Firefox. */
        -moz-osx-font-smoothing: grayscale;
        /* Support for IE. */
        font-feature-settings: 'liga';
      }

     
    
    #topBnr~header{    top:5rem}
    #topBnr.hidden~header{    top:0}
    header .hd__inner{    height:10rem;padding:0 5rem; margin-left:2%; margin-right: 2%;}
    header h1 a{    display:block;padding:0 3em;line-height:10em}
    header h1 img{    max-height:10%}
    #nav{  background:rgba(255,255,255,.8);gap:2em ; color: var(--hana_color) ;
    margin-top: 20px;}
    #nav ul{    gap:1em;  align-items: end; }
    #nav ul li{  position:relative; align-items: end;margin-left: 1em; }
    #nav ul li a, header nav ul li form a{ color: var(--hana_color);    display:block;line-height:2em;font-size:1.0em}
    
    #nav ul li a:hover {  color: red;}

    #nav ul li a:hover span{    color:var(--color-main);transition:all .5s}
    #nav .hd__btns a{   padding:0 0.8em;line-height:4vh;color:var(--color-main);font-weight:var(--txt-medium);font-size:2em;border:1px solid var(--color-main);border-radius:50em;gap:.5em}
    #nav .hd__btns a:after{    background:var(--color-main)}
    #nav .btn_cart{  position:relative;display:block;width:5rem;height:5rem;line-height:5.5rem;font-size:3.3rem;text-align:center;color:#fff;background-color:var(--color-main);border-radius:50em;display: none;  }
    #nav .btn_cart .cart_count{position:absolute;top:0;right:0;font-size:1rem;background:var(--color-point);width:2rem;height:2rem;border-radius:50em;display: none;  }


    h3{    
        display:block; margin-left: 10px; margin-top: 20px; margin-bottom:3px; text-align: left;  
        font-size:1.5em;line-height:1.6;font-weight:var(--txt-regular);
        color:var(--hana_color); 
    font-family: 'hanaB';}    


    

    footer_old { display:block; margin-left: 3em; margin-top: 10em; margin-bottom:3em; text-align: center;  
        font-size:1em;line-height:1.6;font-weight:var(--txt-regular);
        color:var(--color-gray-900); text-decoration: underline;
    font-family: 'hanaB';}


    #fixBar{
        position:fixed;left:0;right:0; left:0;right:0;bottom:0;width:100%;padding-bottom:env(safe-area-inset-bottom)
        ;background:#fff;border-radius:1.5em 1.5em 0 0;box-shadow:0 0 3rem 0 rgba(0,0,0,.15);z-index:99999}
    
    #fixBar ul{    height:8em}
    #fixBar li{    width:20%;height:100%}
    #fixBar li form{    align-items:center;flex-flow:column;display:flex;justify-content:center;width:100%;height:100%}
    #fixBar li a{    width:100%;height:100%;color:var(--hana_color);font-size:1.0em}
    #fixBar li a i{    font-size:2em}
    #fixBar li.home a{    width:4em;height:5.5em;margin:1em auto 0;color:var(--hana_color);background-color:var(--color-main);border-radius:10px}
    #fixBar li.home a i{    font-size:4em}



 .desc {font-family: 'Noto Sans KR'; font-size: 1em;  margin-bottom: 1em;  line-height: 1.5em;  text-align: center;font-weight: bold}
 .desc_t {  font-family: 'hanaB'; font-size: 2em;  margin-top: 1em; margin-bottom: 1em;    text-align: center;font-weight: bold; line-height: 1.3em;}
 .desc_sub {font-family: 'Noto Sans KR'; font-size: 1em;  margin-bottom: 1em;  line-height: 1em;  text-align: center;font-weight: bold}

#notice .info { margin-top: 3em;}
#notice .kakao { position: relative; top:0;left:25%; width: 8em; height: 8em; margin-top: 1em;}



/*footer*/
footer {     padding: 1em 0; font-size: 0.8em;}
footer p {text-align: center;    color: #b2b2b2;    margin-bottom : 1em; }

.quick_etc {    width: 100%;    display: flex;    flex-direction: row;    padding-bottom: 1em;}

.quick_etc a {    display: flex;    align-items: center;    justify-content: center;    width: 30%;
    text-align: center;    color: #b2b2b2;    position: relative; }

.quick_etc a:after {
    content: '';
    width: 0.2em;
    height: 1em;
    display: block;
    background-color: #b2b2b2;
    position: absolute;
    right: 0;
}

.quick_etc a.morebtn {
    width: 40%;
}

.quick_etc a .more_address {
    font-size: 0;
    text-indent: -9999rem;
    background-image: url(../images/arrow-down.svg);
    width: 1em;
    height: 1em;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100%;
    margin-left: 1em;
}

.quick_etc a.morebtn:after {
    display: none;
}

address {
    padding: 1em 0 0;
    margin: 0 1em;
    font-style: normal;
    display: none;
}

address p {
    font-size: 1em;
    text-align: left;
    color: #b2b2b2;
    margin-bottom: 0;
    font-weight: 300;
    line-height: 1.6;
}