@charset "utf-8";
/* 1280px 이하 */
@media all and (max-width:1280px){
      :root {
          --shop-header-height: 140px; /* shop height */
      }
  
      /* #header .logo{min-height:100px;background-size:auto 100px; } */
      body.shop #header .m_open{padding-bottom:0px; }
  
      #header{gap:0 10px;}
      #header .logoArea{flex:1; }
      #gnb-shop {display:none;}
      #header .util{display:none;}
      #header .language{display:none;}
    
      #header .m_open{padding-bottom:20px; }
      #header .logo{min-height:90px;background-size:auto 90px; }
  
  
      .swiper_1 .swiper-wrapper{/*justify-content:flex-start;*/ gap:30px; }
      .swiper_1 .swiper-slide img{height:60px;}
  
  
  }
  
  
	
/* Mobile 768px 이하 */
@media all and (max-width:768px) {   
  .pc_only{display: none !important;}	
  .mo_only{display: inline-block !important;}

  .mMenu {right:-100%; width:100%;}

  .lnav li a {font-size:16px;} 
  .lnav > li li a {font-size:14px;}

  #header .logo{min-height:85px;background-size:auto 85px; }

    .footer .f_cont li > p{width:100%;font-size:13px;}

  .col50{width:100% !important; }

  .login-wrap .box{padding:60px;}
  .login--sns .sns--btn{font-size:13px;}    
  .login--sns .sns--naver{ background-size:14px 14px;min-height:18px;padding-left:20px;}
  .login--sns .sns--kakao{ background-size:18px 18px; min-height:18px;padding-left:20px;}
  .login--sns .sns--google{ background-size:18px 18px;min-height:18px;padding-left:20px;}
  
  .txt-lg{font-size:18px;}
  .txt-md{font-size:16px;}
  .txt-s{font-size:15px;}
  .tit-md{font-size:20px;}

  .join-wrap .box{padding:40px;}

/* form */
.form_sty ul{display: flex;flex-wrap: wrap; padding:15px 0;}
.form_sty li.top{padding-top:0px;}
.form_sty li{padding:0px;min-height:auto;}
.form_sty li:nth-child(3){margin-top:15px;}
.form_sty .tit{flex:0 0 100%;margin-bottom:10px;}
.form_sty .cont{flex:0 0 100%; }
.form_sty .tit > *{font-size:14px;}

  .list-typeB li{width:48%;margin:0 0% 40px 4%;}
  .list-typeB li:nth-child(odd){margin:0 0% 40px 0% !important;}
  .list-typeB li:nth-child(even){margin:0 0% 40px 4% !important;}

  /*sub*/
  .title{font-size:35px;}
  .f-group-A .sm{font-size:13px;}

  .list-typeA ul{gap:40px; }
  .gallery--wrap .text--wrap{padding:20px 10px;}
  .gallery--wrap .tit{font-weight:600;font-size:18px; }
  .gallery--wrap .price{font-size:16px;}

  .detail-title{font-size:24px;}

.list--category{padding:15px;}
.list--category ul{gap:10px 0;}
.list--category a{font-size:14px; padding-left:8px; margin-left:15px;}
.list--category a::before {width:4px; height:4px;}

.joinOk{margin:60px auto 60px;}
.joinOk > p{font-size:18px; }


}

/*mobile 640 이하 */
@media all and (max-width:640px){
.footer .f_cont{flex:0 0 100%;order:2;margin-bottom:30px;}
.footer .f_right{position:static; right:auto; top:auto;bottom:auto; display:flex;flex-direction: column; width:100%; text-align:left;order:3;}
.footer .f_right > p{font-size:13px;line-height:1.2; }
.footer .f_right .qr{margin-top:8px;}
.footer .f_right .qr img{width:70px;}

}

/*mobile 540 이하 */
@media all and (max-width:540px){
    .btn_up_layer {width:40px;  height:40px;background-size:auto 16px; }

    #header .logo{min-height:85px;background-size:auto 85px; }  

    .footer .f_cont li > p{font-size:12px;}
    .f_smenu {margin-bottom:20px;}
    .f_smenu > a {font-size:12px;padding-left:16px;}
    .f_smenu > a::after {width: 4px;height: 4px;margin-left:6px; }
    .f_copy{font-size:11px;}
    .footer .f_logo{min-height:40px;background-size:auto 40px;}
    .footer .f_right > p{font-size:12px;}

    .swiper_1 .swiper-slide img{height:50px;}

    .login-wrap .box{padding:40px 30px;}
    .login-wrap .btn-login{font-size:16px;}
    .login-wrap .btn-join{font-size:16px;}  
    .login-form .tit{flex:0 0 60px;font-size:14px;}
    .login--sns{flex-wrap: wrap; gap:0; }
    .login--sns > *{flex:0 0 48.5%; margin-bottom:3%; margin-left:3%;}
    .login--sns > *:nth-of-type(2n-1){ margin-left:0%;}
    .login--sns .sns--naver{ background-size:12px 12px;min-height:16px;padding-left:18px;}
    .login--sns .sns--kakao{ background-size:16px 16px; min-height:16px;padding-left:18px;}
    .login--sns .sns--google{ background-size:16px 16px;min-height:16px;padding-left:18px;}

    .login-wrap .box2{padding:30px; }
    
    .bullet-list{padding-left:9px;font-size:14px;}
    .bullet-list::before {margin-top:8px;}

    .join-wrap .box{padding:25px;}

  .list-typeB li{width:100%;margin:0 0% 40px 0%;}
  .list-typeB li:nth-child(odd){margin:0 0% 40px 0% !important;}
  .list-typeB li:nth-child(even){margin:0 0% 40px 0% !important;}

  .list-typeA ul{gap:0px; flex-wrap: wrap; }
  .list-typeA li{flex:0 0 100%; margin:0 0% 40px 0%;}
  .list-typeA li:nth-child(odd){margin:0 0% 40px 0% !important;}
  .list-typeA li:nth-child(even){margin:0 0% 40px 0% !important;}

  .title{font-size:28px;margin-bottom:40px;}

  .inputfile-wrap label.btn {width:80px;margin-left:5px;font-size:13px;}

  .f-group-A.email{flex-wrap: wrap;}
  .f-group-A > * {margin-left:10px;}
  .f-group-A > *:nth-child(4){margin-left:0px;}
  .f-group-A .w2{width:50%;}
  .f-group-A .select-w{width:100%; margin-top:10px;}
  .f-group-A .input-tel{flex:1;}

  .noPage .txt{font-size:16px;}


  .detail--wrap .detail--cont .p-category{font-size:14px;}
  .detail--wrap .detail--cont .p-tit{font-size:20px;margin-bottom:20px;}
  .detail--wrap .detail--cont .p-price{font-size:24px;}
  .detail--wrap .detail--cont .o-price{font-size:13px;}    
  .detail--wrap .detail--cont .total-price{gap:5px;margin-bottom:20px }
  .detail--wrap .detail--cont .total-price .tit{font-size:14px;}
  .detail--wrap .detail--cont .total-price .price{font-size:14px; }
  .detail--wrap .detail--cont .total-price .price > span{font-size:28px; }    
  .detail--wrap .detail--cont .text-wrap{margin-bottom:20px;}
  .detail--wrap .detail--cont .text-wrap dt{width:60px;font-size:14px;}
  .detail--wrap .detail--cont .text-wrap dd{flex:1; font-size:14px; }
  
  .detail--wrap .detail--cont .btn-area {display: flex; margin:0px 0 10px; gap:5px}
  .detail--wrap .detail--cont .btn-area > * {flex:1; }
  .detail--wrap .detail--cont .wish-btn {flex:0 0 45px; height:45px;}

  .btn-type.btn-lg {height:45px;font-size:15px;}

  .detail-title{font-size:20px;}

}


/*mobile 420 이하 */
@media all and (max-width:420px){  
  #header .logo{min-height:80px;background-size:auto 80px; }
}


/*mobile 375 이하 */
@media all and (max-width:375px){
  .login-wrap .btn-area{margin-top:15px;}
  .login-wrap .btn-login{height:40px;font-size:15px;}
  .login-wrap .btn-join{height:40px;font-size:15px;}  
  .login-wrap .txt{font-size:13px; }
  .login--sns .sns--btn{height:34px;}

  .txt-lg{font-size:17px;}
  .txt-md{font-size:15px;}
  .txt-s{font-size:14px;}
  .txt-xs{font-size:13px;}

  .title{font-size:26px;margin-bottom:40px;}
 

}

/*mobile 360 이하 */
@media all and (max-width:360px){  
  .footer .f_cont li > p{font-size:11px;}
  .f_smenu > a {font-size:11px;padding-left:16px;}
  .f_smenu > a::after {width: 4px;height: 4px;margin-left:6px; }
  .f_copy{font-size:10px; }	


  .login-wrap .box{padding:30px 20px;}
  .tit-md{font-size:18px;}

}



/*mobile 320 이하 */
@media all and (max-width:320px){
  :root {
    --shop-header-height: 100px; /* shop height */
  }

    #header{height:100px;}
    #header .logo{min-height:65px;background-size:auto 65px; }

    #header.bg_on .hamburger-inner,
    #header.bg_on .hamburger-inner:after,
    #header.bg_on .hamburger-inner:before {position: absolute; width: 22px; height: 2px; background-color: #333 !important;transition: transform .3s ease .2s, background-color .3s ease .2s, opacity .3s ease .3s;}

    .hamburger-box {width: 22px; height:18px;}
    .hamburger-inner,
    .hamburger-inner:after,
    .hamburger-inner:before {width: 22px; height: 2px;}
    .hamburger-inner:before { top:8px; left: -8px;}
    .hamburger-inner:after { top: 16px;   width: 21px;}

    .hamburger-active .hamburger-box {width:24px; height:24px;}
    .hamburger-active .hamburger-inner,
    .hamburger-active .hamburger-inner:after { width:22px; height: 2px;}
    .hamburger-active .hamburger-inner { -webkit-transform: translate3d(0, 8px, 0) rotate(45deg); transform: translate3d(0, 8px, 0) rotate(45deg);}
    .hamburger-active .hamburger-inner:after {width: 22px;-webkit-transform: translate3d(0, -16px, 0) rotate(-90deg); transform: translate3d(0, -16px, 0) rotate(-90deg);}

    .mMenu .mclose { position:absolute;  top:20px;right:20px; }
    .lnav li a { padding:16px 25px;} 
    .lnav > li li a {padding: 12px 25px 12px 35px;}



}