@charset "utf-8"; 

html {font-size:16px;color:var(--txt_color);  background:var(--bg_color)}
body{ font-size:16px;    
    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;    /*전체 가운데 배치 */ ; background:var(--bg_color);margin-top: 1em;} 
/* wrapper == main_body */

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

    

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

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

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);
}


.main_txt_center  {
    display: block;
    margin-left: 0em;
    margin-top: 0.5em;
    margin-bottom: 0em;
    text-align: left;
    font-size: 2em;
    line-height: 1;
    font-weight: var(--txt-regular);
    color: black;
    text-decoration-line: underline;
}


header{    position:relative;top:0;left:0;right:0;width:100%;z-index:999999;transition:all .5s;
}

    .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) ; margin-left: 2em; margin-right: 2em;}

    .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:1.5em;  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.5em}
    
    #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: 0px; 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); 
    }    


    

    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;
    }


    #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-size: 1em;  margin-bottom: 1em;  line-height: 1.5em;  text-align: center;font-weight: bold}
 .desc_t {   font-size: 2em;  margin-top: 1em; margin-bottom: 1em;    text-align: center;font-weight: bold; line-height: 1.3em;}
 .desc_sub {font-size: 1em;  margin-bottom: 1em;  line-height: 1em;  text-align: center;font-weight: bold}

 .desc_red {font-size: 1.2em;  margin-bottom: 1em;  line-height: 1em;  text-align: center;font-weight: bold; color: red; text-decoration: underline;}


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

#notice .kakao_fix { position: absolute; top:unset;right:10rem; width: 8em;  margin-top: 1em;}




/*footer*/
footer {     padding: 1em 0; font-size: 1em;  background-color: var(--bg_color);     border-top-style: double;}
footer p {text-align: center;    color: black;    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: black;    position: relative; }

.quick_etc a:after {
    content: '';
    width: 0.2em;
    height: 1em;
    display: block;
    background-color: var(--bg_color);
    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;
}





.fee_box {
    position: absolute;
    top: 0;
    right: 0;
    transform: scale(1);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter : blur(3px);
    background: var(--color_pmy);
    transition: .4s;
    box-shadow: 0 20px 10px rgb(0 0 0 / 10%);
    overflow: hidden;
    z-index: 2;
  }
  
  .fee_box::before {
    content: '';
    position: absolute;
    top: -35%;
    left: -35%;
    transform: rotate(45deg);
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: -1;
    opacity: .15;
  }
  
  .fee_box h3 {
    font-size: 1.3rem;
    padding-top: .2rem;
  }
  
  .fee_box h3 strong {
    font-size: 1.7rem;
    padding-right: .3rem
  }



.gift_items {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 4rem;
    margin-top: 2rem;
  }
  
  .gift_items > li {
    position: relative;
    text-align: center;
    padding: 1.5rem;
    border: 1px solid gray;
    border-radius: 1rem;
    font-size: 1.4rem;
    /* box-shadow: 0 2px 15px rgb(227 230 236 / 65%); */
    background: #fff;
    transition: .4s;
  }
  
  .gift_items > li:hover {
    /* border-color: var(--color_pmy); */
    box-shadow: 0 20px 26px rgb(227 230 236 / 60%)
  }
  
  .gift_items > li img {
    position: relative;
    width: 100%;
    border-radius: .5em;
  }
  
  .gift_img {
    position: relative;
    overflow: hidden;
  }
  
  .gift_img::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    transform: skew(25deg);
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 100%);
    transition: .45s;
  }
  
  .gift_items > li:hover .gift_img::after {
    left: 120%;
  }


  .gift_items > li:hover .gift_img::after {
    left: 120%;
  }



.gift_items li:nth-child(1):hover{color: var(--color_red_a)}
.gift_items li:nth-child(2):hover{color: var(--color_red_a)}
.gift_items li:nth-child(3):hover{color: var(--color_red_a)}
.gift_items li:nth-child(4):hover{color: var(--color_red_a)}



  
  .gift_items > li > p {
    position: relative;
    font-size: 1.2rem;
    color: var(--color_title);
    transition: .2s;
    z-index: 3;
  }

  
  .desc_text_box {
    position: relative;
    margin-top: 1em;
    padding: 0.5em;
    font-size: 2em;
    line-height: 1.5;
    color: red;
    margin-left: 1em;
    margin-right: 10em;
    margin-bottom: 1em;
    border-radius: 1em;
    border-width: 3px;
    border: 1px solid var(--color_red_a);
  }

  
  .desc_text_box > strong {
    position: relative;
    color: var(--color_pmy);;
  }
  

  /** 메인 게시판 **/
#mainBoard { display: inline-block; width: 100%; background-color: var(--bg_color); padding: 100px 0; margin-top: 100px; }
#mainBoard ul { position: relative; left: -40px; width: calc(100% + 160px); }
#mainBoard ul li { display: inline-block; float: left; width: calc(33.33% - 122px); margin: 0 20px; padding: 36px 40px; border: solid 1px #ddd; border-radius: 15px; background-color: var(--bg_color); }
#mainBoard ul li .title { margin-bottom: 20px; }
#mainBoard ul li .title > img { margin-right: 20px; vertical-align: middle; }
#mainBoard ul li .title span {  font-size: 24px; line-height: 34px; vertical-align: middle; }
#mainBoard ul li .title .more { float: right; }
#mainBoard ul li .subject { font-size: 18px; line-height: 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mainBoard ul li .subject img { vertical-align: middle; margin-right: 5px; }
#mainBoard ul li .subject a { vertical-align: middle; }
.commonWrap {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    font-size: 0;
}




@media all and (min-width:1280px) and (max-width:9980px)  {

  html{  font-size:14px}
  body{ width:1280px; font-size:14px; padding:0 1em calc(8.5em + env(safe-area-inset-bottom)) 1em}
  #wrapper{ width:1280px; margin: 0 auto; margin-top: 1em;}

}
@media all and (min-width:768px) and (max-width:1280px) { 
  html{  font-size:14px}
  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: 1em;}
  .m_item{    display:none!important}

  #nav ul {  gap: 1.1em;}
  #wrapper{ width: 100%;}
  .main_body{ width: 100%;}
}

/* 모바일 가로, 모바일 세로 (해상도 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;}

     #nav ul {  gap: 1.0em;}
     #nav ul li a, header nav ul li form a {   font-size: 1em;
}

@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;}
    #nav .hd__btns a{   padding:0 0.1em; }
   .saygift {font-size: 1em; }

      #nav ul {  gap: 0.5em;}
      #nav ul li a, header nav ul li form a {   font-size: 1em;
      }
    
}