@charset "UTF-8";

.main-container{
    width: var(--width-content);
    margin: var(--main-margin);
}


.main-container.subpage{
    margin:0 auto 7rem auto;
}
.main-container.viewpage{
    margin:4rem auto 7rem auto;
}

.header-top{
    position: relative;
    height: 110px;
    
}
.header-right{
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: end;
    padding: 15px 0;
    gap: 3rem;
}
.header-right-top {
    
}
.logo{
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.header-right-top li{
    display: inline-block;
    color: #0d0d0d;
}
.header-right-top li img{
    margin-right: 4px;
}
.header-right-top li:after{
    content:'';
    display: inline-block;
    margin-left: 7px;
    margin-right: 5px;
    width: 1px;
    height: 8px;
    background: #ada387;
}
.header-right-top li:last-child:after{
    display: none;
}
.header-right-bottom input[type=text],
.header-right-bottom input[type=password]{
    height: 20px;
    width: 79px;
    border:1px solid #b09477;
}
.header-right-bottom ul{
    display: flex;
    align-items: center;
    gap: 5px;

}

.gnb-wrap{

    background: #35a207;
    border-top: 1px solid #257a26;

    border-bottom: 3px solid #6a4c4a;
}
.gnb{
    width: var(--width-content);
    margin:var(--main-margin);
    display: flex;
    height: 49px;
}
.gnb li{
    flex: 1 1 0;
    display: inline-flex;
    text-align: center;
    border-left:1px solid #257a26;
    align-items: center;
}
.gnb li:last-child{
    border-right:1px solid #257a26;
}
.gnb li a{
    color: #fff;
    font-size: 1.6rem;
    font-weight: 600;
    width: 100%;
    text-align: center;
    line-height: 48px;
}
.gnb li a:hover{
    color: #dc1e0e;
}

.topbanner-wrap{
    border:2px solid #a8867d;
    margin-top: 15px;
    margin-bottom: 18px;
    padding: 5px 40px;
}
.topbanner-wrap ul{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    gap: 2rem;
}

.bx-wrapper{
    box-shadow: none;
    border:0;
    margin-bottom: 0;
}
.mainslider-wrap{
    margin-bottom: 15px;
}

.contbox-wrap{
    display: flex;
    gap: 12px;
}
.cs-num-wrap h1,
.bank-num-wrap h1{
    background: #000;
    color: #fff;
    text-align: center;
    height: 3.5rem;
    line-height: 3.5rem;
    font-size: 1.5rem;
    font-weight: 400;
}
.contbox-01{
    width: 215px;
  
}
.cs-num-wrap{
    border:1px solid #ccc;
}
.cs-tel{
    background: #35a207;
    font-size: 3rem;
    color: #FFFF00;
    text-align: center;
    padding: 3px 0 0;
}
.cs-tel2{
    font-size: 2.5rem;
}
.cs-text{
    background: #F6FAB8;
   font-weight: 500;
   padding: 5px 0 4px 2rem;
}
.cs-tel-line{
    background: #fff;
    width: 83%;
    height: 1px;
    margin: 0 auto;
}
.contbox-02{
    width: 230px;
}
.contbox-03 a{
    display: block;
}
.contbox-03 img{
    height: 100%;

}
.bank-num-wrap{
    border:1px solid #ccc;
    text-align: center;
    font-weight: 500;
}
.bank-01{
    padding: 15px 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.bank-02{
   background:#FEE972;
   font-size: 2.3rem;
    color: #FF0000;
    font-weight: 300;
    padding: 5px;

}
.bank-03{
    font-size: 1.2rem;
    padding: 10px 0;
    font-weight: 600;
}

.contbox-05{
    width: 266px;
    border:1px solid #ccc;
}
.contbox-05 h1{
    background: #f1f1f1;
    color: #000;
    font-size: 1.5rem;
    height: 35px;
    border-bottom: 1px solid #ccc;
    display: flex;
    align-items: center;
    padding: 0 10px;
    justify-content: space-between;
}
.contbox-05 h1 a{
    font-size: 1.2rem;
}
.star{
    color: #ff0000
}
.review-01 {
    
}
.review-01 ul{
    width: 95%;
    margin:0 auto;
    margin-top: 6px;

}
.review-01 ul li{
    margin-bottom: 8px;
    line-height: 1.5;
}
.review-01 ul li:last-child{
    margin-bottom: 0;
}
.review-text{
    margin-top: 2px;
    text-overflow: ellipsis;
   overflow: hidden;
   word-break: break-word;
    
   display: -webkit-box;
   -webkit-line-clamp: 2; 
   -webkit-box-orient: vertical
}


/* review-write */
.review-write-area{
    padding: 20px 0;
}
.review-write-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.review-writer{
    width: 15%;
}
.review-write-star{
    color: #ff0000
}
.reivew-write-bottom {
    padding: 10px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.reivew-write-bottom textarea{
    width: calc(100% - 80px);
    height: 100px;

}

/* 제품 리스트 */
.prolist-wrap{
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.title-wrap{
    height: 40px;
    border-bottom: 1px solid #e7e7e7;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.title-wrap h1{
    font-size: 1.8rem;
    color: #815745;
    background:url('/images/pro.png') no-repeat;
    background-position: 0 0;
    padding-left: 2.8rem;
    height: 3.4rem;
    line-height: 3.4rem;
   
}

.title-wrap.type02 {
    margin-bottom: 2rem;
}
.title-wrap.type02 h1{
    background:url('/images/s_icon.jpg') no-repeat;
    background-position: left center;
    padding-left: 1rem;
    height: 3.4rem;
    line-height: 3.4rem;
    font-size: 1.5rem;
    color: #000;
    font-weight: bold;
}
.prolist-thumb{
    width:100%;
    
    border:1px solid #cccccc;
    aspect-ratio: 1/1;
}
.prolist-thumb img{
    width: 100%;
    height: 100%;
}

.title-side{
    font-size: 1.4rem;
    color: #000000;
}
.title-more{
    font-size: 1.2rem;
    color: #000000;
}
.prolist-list{
    display: flex;
    gap: 4rem 2%;
    flex-wrap: wrap;
    justify-content: start;
}
.prolist-box{
    width: 23.5%;
}
.prolist-name{
 
    color: #000000;
    font-size: 14px;
    font-weight: bold;
    padding-top: 10px;
    line-height: 20px;
    cursor: pointer;

    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-word;
     
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical

}
.prolist-info a{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}
.prolist-price-before{
    color: #999;
    text-decoration: line-through;
    font-weight: bold;
}
.prolist-price{
    font-size: 18px;
    color: #FF0000;
    font-weight: bold;
}


/* sub */
.subslider-wrap{
    margin:3rem 0 2rem 0;
}
.subslider-wrap img{
    width: 100%;
}

.submenu-wrap{
    margin:2rem auto 3rem;
    
}
.submenu{
    display: flex;
    justify-content: space-between;
}
.submenu li{
    width: 19.2%;
    display: flex;
    align-items: center;
}
.submenu >li>a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border: 1px solid #999999;
    font-weight: bold;
    color: #000000;
    text-align: center;
    height: 4.4rem;
}
.submenu >li>a:hover,
.submenu >li>a.active{
    background-color: #35a207;
    color: #FFFFFF;
}

.article-wrap.type02{
    display: flex;
    gap: 2rem;

}
.leftmenu-wrap{
    width: 20%;
}
.leftmenu-title{
    color: #ffffff;
    font-size: 22px;
    display: flex;
    align-items: end;
    justify-content: center;
    border-bottom: 2px solid #2e7d16;
    background:#3ba11e;
    height: 5.5rem;
    font-weight: normal;
    padding-bottom:1rem;
}
.h1-small{
    font-size: 1.2rem;
    font-weight: normal;
    vertical-align:bottom;
    margin-left: 1rem;
    margin-bottom: 0.3rem;
}
.lnb>li{
    border-bottom: 1px solid #dfdfdf;
    border-left: 1px solid #dfdfdf;
    border-right: 1px solid #dfdfdf;
}
.lnb>li>a{
    display: flex;
    height: 5.4rem;
    justify-content: start;
    align-items: center;
    color: #666;
    font-weight: bold;
    background:url('/images/left_icon.jpg') no-repeat;
    background-position: 2rem 52%;
    padding-left: 3.5rem;
}
.lnb>li>a:hover{
    color:#1a94ac;
    font-weight:bold;
    background-color:#f7f7f7
}
.lnb + .lnb{
    margin-top: 1rem;
    border-top: 1px solid #dfdfdf;
}
.left-cs,
.left-bank{
    margin-top:2rem;
}
.topinfo-cs,
.topinfo-bank{
    margin-bottom:2rem;
}
.content-wrap{
    width: calc(80% - 2rem);
}
.content-wrap.type02{
    width: 100%;
}
.content-wrap .title-wrap{
    width: 100%;
}

/* 인사말 */
.company-01{
    display:flex;
    justify-content: space-between;
    align-items: start;
    gap: 1rem;
    font-size: var(--font-size-large);
}
.company-01-01{
    display: flex;
    gap: 1rem;
    flex-direction: column;
}
.company-cont li{
    margin-bottom: 2rem;
}
.company-cont + .company-cont {
    margin-top: 5rem;
}
.company-text01{
    font-size:2.2rem;
    color:#0066CC
}

.company-01-02{
    width: calc(100% - 410px);
}

.history-wrap {
    margin-top:4rem;
    border-top:1px solid #CCC;
    padding-top: 4rem;
}
.history li{
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;

}

.h-date{
    width: 15%;
    position: relative;
}
.h-date:after{
    content:'|';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.company-02{
    margin-top: 4rem;
    display: flex;
    justify-content: space-between;
}

/* 약관 */
.userterm-wrap{
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--font-color-black);
}
.userterm-wrap h1{
    text-align: center;
    font-size: 1.2rem;
    font-weight: normal;
    margin-bottom: 2rem;
}
.userterm-title{
    border-top: 3px solid #7EAE2C;
    font-size: 1.2rem;
    border-bottom: 1px solid #7EAE2C;
    height: 3rem;
    line-height: 3rem;
    font-weight: normal;
    margin-bottom: 2rem;
}
.userterm-cont{
    margin-bottom: 2rem;
}
/* 상품 상세 */
.viewpage-wrap{
    margin-top: 3rem;
}
.viewpage-top{
    display: flex;
    justify-content: space-between;
    align-items: start;
}
.viewpage-bottom{
    margin-top: 4rem;
}
.topinfo-01{
    width: 37.5%;
}
.topinfo-02{
    width:40%;
}
.topinfo-03{
    width: 20%;
}
.view-photo-wrap .bx-wrapper{
    border: 1px solid #E1E1E1;
}
.prophoto-slider{
    width: 100%;
    
}
.prophoto-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-top: 1rem;
}
.prophoto-thumb a{
    width: 13%;
    border: 1px solid #cbcaca;
}
.prophoto-thumb a img{
    width: 100%;
}
.naver-review-wrap{
    margin-top: 2rem;
}
.naver-review-wrap h1{
    font-size: 1.2rem;
    margin-bottom: 1rem;
}
.proinfo-title{
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0 1rem 1rem;
    padding-left: 1rem;
    border-bottom: 1px solid #000000;
    font-size: 1.6rem;
    padding-bottom: 1rem;
}
.proinfo-detail{
    padding-top: 1.5rem;
}
.proinfo-detail >ul>li{
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    margin-bottom: 2.4rem;
}

.proinfo-detail >ul>li:last-child{
    margin-bottom: 1.4rem;
}

.detail-title{
    width: 100px;
    text-align: center;
    color: #8A8A8A;
    font-weight: bold;
}
.detail-cont{
    width: calc(100% - 100px);
    color: #000;
    text-align: left;
    line-height: 1.4;
}
.detail-cont-text{
    color: #585858;
    margin-bottom:1rem;
}
.proinfo-detail .prolist-price{
    margin-left: 1rem;
    font-weight: normal;
}
.detail-icon{
    margin-right: 0.5rem;
}
.proinfo-end{
    border-top: 1px solid #000;
    border-bottom: 2px solid #000;
    
}
.proinfo-end .detail-title{
    font-weight:bold;
    color: #000;
}
.proinfo-end .detail-cont {
    text-align: right;
    padding-right: 7rem;
}
.pro-numnber{
    display: flex;
    padding: 2rem 0;
    align-items: center;
    border-bottom: 1px solid #000;
    background: #f7f7f7;
}
.select-number{
    display: inline-flex;
    height: 23px;
    align-items: center;
    margin-right: 2rem;
}
.select-number .input-selnumber{
    width: 4.6rem;
    height:23px;
    border:1px solid #c7c7c7;
    text-align:center;
    line-height: 0;
}
.btn-updown{
    display: flex;
    flex-direction: column;
    height: 23px;
    gap: 0;
    align-items: center;
    letter-spacing: 0;
}
.btn-updown button{
    line-height: 0;
}


.pro-total{
    padding: 1rem 0;
    display: flex;
    align-items: center;
    justify-content: end;
}
.pro-total .detail-cont{
    width: 41%;
}
.total-price{
    color:#FF0000;
    font-size:2.5rem;
    font-weight: bold;
}

.proinfo-order{
    display: flex;
    margin: 3.6rem auto 0 auto;
    width: 88%;
    flex-wrap: wrap;
    gap: 0.5rem 2%;
}
.proinfo-order:last-child{
    margin-top:1.4rem;
    justify-content: center;
}
.proinfo-order-naver{
    display: flex;
	text-align:center;
    margin: 1rem 0 0 10rem;
    width: 88%;
}

.proinfo-order .btn-gray{
    width: 49%;
   
}

.view-img{
    margin-top: 2rem;
    text-align: center;
}
/* 아용후기 */
.review-wrap{
    margin-top: 3rem;
}
.review-title,
.delivery-title {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #000000;
    align-items: center;
}
.review-title h1,
.delivery-title h1{
    font-size: 1.2rem;
    font-weight: bold;
    border: 1px solid #000000;
    color: #FFFFFF;
    width: 30rem;
    background-color: #3D3D3D;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    
}
.review-list ul{
    border-top: 1px solid #a6a6a6;
    margin-top: 4rem;
}
.review-list li{
    display: flex;
    justify-content: space-between;
    padding: 1rem 0;    
    border-bottom: 1px solid #A6A6A6;
}
.review-list li .rv-star{
    width: 10%;
    color: #ff0000;
    text-align: center;
}
.review-list li .rv-cont{
    width: 74%;
    text-align: left;
    color: #757575;
}
.review-list li .rv-writer{
    width: 16%;
    text-align: center;
    color: #0066CC;
}

/* 배송,반품 */
.dv-text{
    font-weight: bold;
    margin-top: 2rem;
}
.dv-box{
    border: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}
.dv-box + .dv-box{
    border-top: 0;
}
.dv-box-title{
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #ccc;
    width:20%;
    text-align:center;
    font-weight: bold;
}
.dv-box-cont{
    padding: 1rem;
    text-align: left;
    width: 80%;
    line-height: 1.5;
}
/* paging  */
.paging{
    margin-top: 1rem;
}
.paging ul{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}

.paging a{
    color: #000;
}
.paging a.active{
    color: red;
    font-size: 1.6rem;
}
.paging a:hover{
    color: red;
}


/* quick-cs */
.quick-cs{
    border: 1px solid #000;
    background: #f1f1f1;
}
.quick-cs input, 
.quick-cs textarea{
    border: 1px solid #767676;
    border-radius: 2px;
}

.quick-cs h1{
    font-size: 1.5rem;
    background: #000;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
    font-weight: bold;
}
.quick-cs-cont{
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
    text-align: center;
    margin:0 auto;
    padding: 0.5rem 1rem;
}
.quick-cs-form{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.quick-cs-form input{
    width: 76%;
}
.quick-cs-cont textarea{
    height:125px;overflow-y:hidden;
    width: 100%;
}
.quick-cs-agree{
    text-align: left;
    padding: 1rem 0 ;

}
.quick-cs-btn{
    width: 100%;
}
.quick-cs-btn button{
    width: 100%;
    height: 4rem;
    font-weight: bold;
}
/* tab */

.tab-type01 ul{
    display: flex;
    width: 100%;

}
.tab-type01 li{
    background: #f7f7f7;
    border: 1px solid #eee;
    height: 5rem;
   font-weight: bold;
   border-bottom: 1px solid #000000;
}
.tab-type01 li.active{
    background: #3d3d3d;
    color: #fff;
    border: 1px solid #000000;
}
.tab-type01 li a{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

}
.tab-type01.col-4 li{
    width: 25%;
}
/* footer */
.footer-top-wrap{
    border-top: 1px solid #333333;
    border-bottom: 1px solid #333333;

}
.footer-top-inner{
    width: var(--width-content);
    margin:var(--main-margin);
    padding: 10px 26px;
}

.footer-top-inner ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer-link-wrap{
    border-bottom: 1px solid #333333;
}
.footer-link-inner{
    width: var(--width-content);
    margin:var(--main-margin);
    padding: 10px 0;
}
.footer-link-inner ul{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    color: #000;
    gap: 8px;
   
}
.footer-link-inner ul >li{
    position: relative;
    padding-right: 8px;
    display: inline-flex;
    align-items: center;
    
}
.footer-link-inner ul> li:after{
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-70%);
    display: inline-block;
    width: 1px;
    height: 8px;
    background: #000;
}
.footer-link-inner ul> li:last-child:after{
    display: none;
}
.footer-link-inner ul li a{
    display:block;
}

.footer-bottom-inner{
    width: var(--width-content);
    margin:var(--main-margin);
    padding: 14px 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer-copy{
    display: flex;
    width: 70%;
    gap: 40px;
    align-items: center;
}
.footer-copy h1,
.footer-copy ul{
    display: inline-block;
}
.footer-copy ul{
    line-height: 1.5;
}


/* 동영상자료 */
.movie-wrap{
    text-align: center;
    width: 77%;
    margin: 0 auto;
}
.movie-title{
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 1rem;
}
.movie-text{
    font-weight: bold;
    margin-bottom: 3rem;
}
.movie-video{
    margin-bottom: 3rem;
}

/* 이용후기 */
.review-wrap.type2{
    border: 1px solid #ddd;
}
.review-toptext{
    margin-left: 1rem;
    margin-top: 1rem;
}
.review-toptext li{
    color: #0033FF;
    line-height: 1.4;
}
.review-toptext strong{
    color: #FF0000;
    font-weight: bold;
}
.review-list-title{
    background: #e1e1e1;

}
.review-wrap.type2 .review-list ul li.review-list-title{
    border-bottom: 1px solid #373737;
}

.review-list li.review-list-title .rv-star,
.review-list li.review-list-title .rv-cont,
.review-list li.review-list-title .rv-writer{
    color: #000;
    font-weight: bold;
    text-align: center;
}

.review-wrap.type2 .review-list li .rv-cont,
.review-wrap.type2 .review-list li .rv-writer{
    color: #000;
}
.review-wrap.type2 .review-list ul{
    border-top: 0;
    margin-top: 1rem;
}
.review-wrap.type2 .review-list ul li{
    cursor: pointer;
    border-bottom: 1px solid #dddddd;
}
.rv-link{
    color: #0033FF
}

/* 회원가입 */
.member-top{
    border-bottom: 2px solid #000;
    padding-bottom: 1rem;
}
.member-top ul{
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 1.5rem;
}
.member-top li{
    position: relative;
}
.member-top li a{
    font-weight: bold;
    font-size: 1.5rem;
    padding-right: 1.5rem;
}
.member-top li:after{
    content: '';
    display: inline-block;
    width: 2px;
    height: 1rem;
    background: #000;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-60%);
}
.member-top li:last-child a{
    padding-right: 0;
}
.member-top li:last-child:after{
    display: none;
}
.member-title{
    border-bottom: 1px solid #dedede;
    margin-top: 3rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
}
.member-title h1{
    font-size: 1.7rem;
    text-align: center;
    font-weight: bold;
}
.member-cont{
    padding: 1.5rem;
}
.member-cont.join{
    border:1px solid #ddd;
}

.member-cont .title-wrap{
    border-bottom: 0;
    margin-bottom: 0;
}
.member-cont .title-wrap.type02 h1{
    font-size: 1.2rem;
}

.member-cont textarea.usecont{
    color: #585858;
    border: 1px solid #999;
    width: 100%;
    height: 10rem;
}
.member-cont-box + .member-cont-box{
    margin-top: 3rem;
}
.usecheck{
    font-size: 1.4rem;
    font-weight: bold;
    text-align: right;
    margin-top: 1rem;
}
.usecheck label{
    font-weight: bold;
}
.inputform-wrap{
    border: 5px solid #E5E5E5;
    color: #000;
}
.inputform-wrap.type-order{
    border: 1px solid #E5E5E5;
    margin-top: 3rem;
}
.inputform-wrap.type-order .form-address {
    width: 100%;
}
.inputform-wrap.type-order .form-address input.address-01{
    width: 70%;
}
.inputform >li{
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    border-bottom: 1px solid #E5E5E5;
}
.inputform >li:last-child{
    border-bottom: 0;
}
.inputform-title-1{
    display: flex;
    align-items: center;
    justify-content: start;
    background: #EDF6F6;
    padding: 1rem 2rem;
    color: #000;
    font-weight: bold;
}
.inputform-title{
    width: 15%;
    background: #F8F8F8;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: start;
    padding-left: 10px;
    padding-right: 1rem;
    font-weight: bold;
}
.inputform-title-2{
    width: 15%;
    background: #EDF6F6;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: end;
    padding-right: 1rem;
    font-weight: bold;
}
.inputform-cont{
    width: 85%;
    padding: 0.8rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 2.8rem;
}
.inputform-cont input[type=text],
.inputform-cont input[type=password]{
    /* width: 20%; */
    height: 2.8rem;
}
.inputform-cont .info-text{
    font-weight: bold;
    min-height: 2.8rem;
    display: inline-flex;
    align-items: center;
}
.btn-doublecheck{
    color: #CC0000;
    font-weight:  bold;
    font-size: var(--font-size-base);
    margin-right: 0.6rem;
}

.email-accept-wrap{
    padding: 1rem;
    display: flex;
    align-items: center;
}
.email-accept{
    margin-left: 1rem;
}
.inputform-btn{
    margin: 1rem 0;
    text-align: center;
}
.inputform-btn .btn{
    width: 30%;
}

.inputform-sublist {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 14px;
}
.inputform-sublist input[type=text]{
    width: 40px;
}
.inputform-sublist input + label {
    margin-right: 0.4rem;
}

.adtext{
    line-height: 1.6;
    margin: 1rem 0;
}
/* login */
.member-cont.login{
    margin: 11rem 0;
    text-align: center;
}
.member-cont.login .inputform-btn .btn {
    width: 100%;
}
.login-text{
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 4rem;
}
.login-text strong{
    color: #006699;
}
.login-text-small{
    font-size: 1.2rem;
    font-weight: normal;
    margin-top:1rem;
    color: #666;
    line-height: 1.5;
}
.form-login{
    width: 32%;
    margin: 0 auto;
}
.form-login li{
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
    margin-bottom: 2rem;
    padding: 1rem 0 0;
}
.form-login li input{
    border: 0;
    width: 70%;
    height: 4rem;
}
.form-login li label{
    display: inline-block;
    width: 30%;
    padding: 0.5rem 0;
    text-align: left;
}
.form-login .form-tel{
    width: 100%;
}

/* 정보수정 */
.tab-mypage ul{
    display: inline-flex;
    align-items: center;
    gap:0.6rem;
}
.tab-mypage a{
   border: 2px solid #81c7df;
    color: #a1a1a1;
    border-radius: 3rem;
    padding: 0.5rem 1.2rem;
    font-weight: bold;
}
.tab-mypage a.active{
    color: #267792;
   border: 2px solid #55a8c3;
}

/* 회원탈퇴 */
.memberout-title{
    background: #F8F8F8;
    text-align: center;
    border-top: 2px solid #E5E5E5;
    border-bottom: 1px solid #E5E5E5;
    padding: 1rem 0;
    font-size: 1.2rem;
    font-weight: normal;
}
.memberout-cont{
    border-bottom: 1px solid #E5E5E5;
 
}
.memberout-cont ul{
    margin: 3rem 17rem;
}
.memberout-cont ul li{
    font-weight: normal;
    margin-bottom: 2rem;
    
}

/* form */
.form-birth{
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 20%;
}
.form-birth input{
    width: 22%;
}
.form-birth input.year{
    width: 26%;
}

.form-tel{
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 20%;
}
.form-tel input{
    width: 28%;
}
.form-email{
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 40%;

}
.form-email input{
    width: 46%;
}

.form-address{
    width: 70%;
}
.form-address ul li{
    display:flex;
    align-items: center;
    justify-content: start;
    margin-bottom: 0.5rem;
    gap: 0.5rem;
}
.form-address ul li:last-child{
    margin-bottom: 0;
}
.form-address input{
    width: 100%;
}
.form-address input.postnumber{
    width: 22%;

}


/* 입금계좌번호안내 */
.money-cont-wrap {
    margin-bottom: 3rem;
}
.money-cont-wrap h2{
    font-size: 1.2rem;
    padding: 0.5rem 1rem;
    border: 1px solid #5592be;
    border-radius: 0.8rem;
    background: #ffffff;
    background: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(216, 234, 244, 1) 100%);
}
.money-cont-01 {
    border-bottom: 1px solid #e7e7e7;
    padding: 2rem 0;
    line-height: 1.5;
    margin-bottom: 2rem;
    
}
.money-cont-02{
    margin-bottom: 3rem;
}
.money-cont-01 ul{
    width: 35%;
    display: block;
    margin: 0 auto;
}
.money-cont-01 li{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.money-text01{
    color: #585858;
    font-weight: bold;
}
.money-text02{
    color: #585858;
    font-weight: bold;
    background: #E2EEF3;
    padding: 0.8rem;
}
.money-text03{
    background: #E2EEF3;
    padding: 0.8rem;
}
.money-table{
    border: 1px solid #c5c5c5;
}
.money-table li{
    display: flex;
    align-items: stretch;
    justify-content: start;
    border-bottom: 1px solid #c5c5c5;
   
}
.money-table li:last-child{
    border-bottom: 0;
}
.m-t-title{
    width: 10%;
    background: #f4f4f4;
    display: inline-flex;
    align-items: center;
    padding-left: 1rem;
}
.m-t-cont{
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem;
}
.money-list li{
    border: 1px solid #70a2a3;
    padding: 1rem;
}
.money-list li + li{
    border-top: 0;
}
.money-list + .money-text03{
    margin-top: 2rem;
}
.banking-list{
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    margin: 2rem 0;
}




/* 게시판 table */

.board-top{
    display: flex;
    background:#EAF4FE;
    border-top: 1px solid #D2D2D2;
    border-bottom: 1px solid #000;
    justify-content: start;
    gap: 1rem;
}
.board-top .col{
    display: inline-flex;
    text-align: center;
    height: 3.8rem;
    align-items: center;
    justify-content: center;
    color: #000;
    font-weight: bold;
}
.board-body{
    border-bottom: 1px solid #000;
}
.board-list>li{
    display: flex;
    justify-content: start;
    gap: 1rem;
}
.board-list>li:hover{
    background:#E8F8FF;
}
.board-list .col{
    height: 3.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;

}
.board-top .col.col-check,
.board-body .col.col-check{
    width: 3%;
}
.board-top .col.col-num,
.board-body .col.col-num{
    width:4%;
}
.board-top .col.col-title{
    width: 70%; 
}
.board-body .col.col-title{
    width: 70%;
    justify-content: start;
}
.board-top .col.col-writer,
.board-body .col.col-writer{
    width: 8%;
}
.board-top .col.col-date,
.board-body .col.col-date{
    width: 8%;
}
.board-top .col.col-view,
.board-body .col.col-view{
    width: 5%;
}
.col-title a{
    color: #004080;
}


/* board-vidw */
.board-wrap.type-view{
    border-top: 1px solid #ccc;
   
}
.board-view-top{
    border-bottom: 1px solid #ccc;
}
.board-view-title{
    padding: 1rem;
    font-size: 1.4rem;
    font-weight: bold;
}
.board-view-info {
    padding: 0.5rem 1rem;
}
.board-view-info ul{
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 1rem;
    color: #333;
}
.board-view-info ul li{
    position: relative;
    padding-right: 1rem;
}
.board-view-info ul li:after{
    content:'';
    display: inline-block;
    background: #b8b8b8;
    width: 1px;
    height: 1rem;
    position: absolute;
    right: 0;
    top: 50%;
    transform:translateY(-50%);
}
.board-view-info ul li:last-child:after{
    display: none;
}

.board-view-body{
    padding:1rem;
    line-height: 1.6;
    border-bottom: 1px solid #ccc;
}

.board-view-foot{
    
}
.board-foot-btn{
    text-align: center;
    padding: 2rem 0;
}
.board-prevnext ul{
    border-bottom: 1px solid #ccc;
}
.board-prevnext ul> li{
    display: flex;
    align-items: stretch;
    border-top: 1px solid #ccc;
    min-height: 36px;
}
.prevnext-title{
    background: #f6f6f6;
    color: #000;
    font-weight: bold;
    width: 15%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.prevnext-cont{
    padding: 1rem
}
.prevnext-cont a{
    color: #004080;
}


.board-bottom{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2rem;
}




/* board-write */
.board-wrap.type-write .inputform-wrap{
    border-width: 2px;

}

.board-wrap.type-write .inputform-cont input[type=text],
.board-wrap.type-write .inputform-cont input[type=password]{
    width: 50%;
}


.board-wrap.type-write .board-bottom {
    justify-content: center;
    gap: 0.6rem;
}
.title-text{
    line-height: 1.4;
    text-align: center;
    font-weight: 500;
    margin-bottom: 1rem;
}


/* 댓글달기 */
.reply-wrap{
    border: 1px solid #ccc;
    margin-bottom: 2rem;
}
.reply-top{
    padding: 1rem;
}
.reply-top img{
    margin-right: 1rem;
    vertical-align: middle;
}
.reply-cont{
    display: flex;
    gap: 1rem;
    border-top: 1px solid #ccc;
}
.reply-name{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15%;
    text-align: center;
    background: rgb(249, 249, 249);;
}
.reply-textarea {
    width: 70%;
    padding: 1rem 0;
}
.reply-textarea textarea{
    width: 100%;
    border: 1px solid #ddd;
    height: 100px;
}
.reply-btn{
    width: 15%;
}

.btn-reply{
    background: #333333;
    color: #fff;
    width: 100%;
    height: 100%;
}

.reply-cont.type-view .reply-name{
    color: #004080;
    font-weight: 600;
}
.reply-cont.type-view .reply-textarea{
    line-height: 1.6;
}
.reply-cont.type-view .reply-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.reply-del{
    margin-left: 0.5rem;
}




/* 장바구니 */
.mypage-wrap{
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
.mypage-list-top{
    background: #f8f8f8;
    height: 3.5rem;
    font-weight: 600;
    color: #000;
}
.mypage-list.type-orderlist>li> div{
    text-align: center;
  
   
}
.mypage-list .mylist-text{
    margin-bottom: 0.6rem;
}
.mypage-list .mylist-text:last-child{
    margin-bottom: 0;
}

.mypage-list .mylist-col01{
    width: 52%;
    display: inline-flex;
    align-items: center;
   
    gap: 1rem;
}
.mypage-list .mylist-col02{
    width: 10%;
    text-align: center;
}
.mypage-list .mylist-col03{
    width: 10%;
    text-align: center;
}
.mypage-list .mylist-col04{
    width: 20%;
    text-align: center;
}
.mypage-list .mylist-col05{
    width: 8%;
    text-align: center;
}
.mypage-list-top .mylist-col01{
    justify-content: center;
}

.mylist-thumb{
    width: 5.4rem;
    height: 5.4rem;
}
.mylist-thumb img{
    width:100%
}
.mylist-title{
    text-align: left;
    font-size: 1.3rem;
    line-height: 1.4;
    letter-spacing: -0.04em;
    color: #333;
    width:calc(100% - 5.4rem - 24%);
    
}
.mylist-price{
    width: 24%;
}
.mypage-list li{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;
    padding: 1rem;
    min-height: 5rem;
}
.mypage-list li:last-child{
    border-bottom: 0;
}
.mypage-list .select-number{
    margin-right: 0;
}
.total-price{
    color: #FF0000;
    font-size: 1.6rem;
}

.mylist-bottom{
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    margin-top: 3rem;
}
.total-text{
    color: #000;
    font-weight: 600;
}

.title-textbox ul li{
    margin-bottom: 0.6rem;
}
.title-textbox.type-nonmem{
    text-align: center;
    margin-bottom: 4rem;
}
/* 주문내역 */

.mylist-col02-1{
    width: 4%;
}
.mylist-col02-2{
    width: 10%;
}
.mylist-col02-3{
    width: 46%;
    
   
    padding: 1rem;
}
.mylist-col02-3-top{
    width: 34%;
}
.mylist-col02-03-inner{
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 0.8rem;
    width: 100%;
    padding: 5px 0;
}
.mylist-col02-03-inner + .mylist-col02-03-inner{

    border-top: 1px solid #ddd;
}
.mypage-list-top .mylist-col02-3{
    justify-content: center;
}
.mylist-col02-4{
    width: 12%;
}
.mylist-col02-5{
    width: 11%;
}
.mylist-col02-6{
    width: 10%;
}
.mylist-col02-7{
    width: 9%;
}
.mylist-col02-8{
    width: 10%;
}

.mylist-bottom-banner{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 4rem;
}

/* pop */
.pop-wrap{
    padding: 1rem;
}
/* table */
.table thead th,
.table th.allth{
    background: #aed9ea;
    border: 1px solid #a0a0a0;
    color: #000;
    padding: 0.8rem;
}
.table tbody th{
    background: #efefef;
    color: #000;
    border: 1px solid #a0a0a0;
    padding: 0.8rem;
}
.table td{
    border: 1px solid #a0a0a0;
    padding: 0.8rem;
}
.table + .table{
    border-top: none;
}
.table.type2 th{
background:#f8f8f8;
border-color: #ccc;
}
.table.type2 td{
    border-color: #ccc;
}
.text-01{
    margin-top: 3rem;
    margin-bottom: 1rem;
}

/* quick */
.quick{
    position: fixed;
    left:calc(50% + 620px);
    top: 170px;
    
}
.quick-title{
    border:1px solid #c3c3c3;
    border-bottom: 0;
    background: #f0efef;
    padding: 1rem 0.8rem;
    text-align: center;
}
.recent-view-wrap{
    border:1px solid #c3c3c3;
}
.recent-view  li{
    margin-bottom: 0.4rem;
}
.recent-view  li:last-child{
    margin-bottom: 0;
}
.recent-view a{
    display: inline-block;
    width: 9rem;
    height: 9rem;
    border-bottom:1px solid #c3c3c3;
}
.recent-view a img{
    width: 100%;
}
.recent-no{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
}
.quick-banner li{
    margin-top: 1rem;
    text-align: center;
}

.sidemenu-wrap{
    display: none;
}



/* 주문내역 - mobile */
.orderlist-wrap{
    display: flex;
    padding: 2rem 0;
    flex-wrap: wrap;
    gap: 4rem 2%;
    
}
.orderlist-box{
    width: 49%;
}
.orderlist-top{
    border: 1px solid #ddd;
    position: relative;
    text-align: left;
    background: #f8f8f8;
    padding: 1rem;
}
.orderlist-top-right{
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
}
.orderlist-body{
    display: flex;
    justify-content: start;
    padding: 2rem;
    border-bottom: 1px solid #ddd;
}
.orderlist-body-left{
    width: 7rem;
}
.orderlist-body-right{
    width: calc(100% - 7rem);
}
.orderlist-title{
    line-height: 1.5;
}
.orderlist-num{
    color: #666;
}
.orderlist-body2{
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 1rem;
    padding: 1rem 2rem;
    border-bottom: 1px solid #ddd;
}
.orderlist-body3{
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 1rem;
    padding: 1rem 2rem;
    border-bottom: 1px solid #ddd;
}

/* 비회원 주문조회 */
.nonmem-check-wrap{
    border: 1px solid #ddd;
}
.nomem-top{
    background: #F8F8F8;
    color: #000;
    text-align: center;
    padding: 1.5rem;
    font-weight: 600;
    font-size: 1.5rem;
}
.nonmem-body{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 2rem;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
.nonmem-body:last-child{
    border-bottom: 0;
}
.nonmem-left{
    width: 30%;
    text-align: right;
    
}
.nonmem-body ul li{
    display: flex;
    margin-bottom: 1rem;
    gap: 1rem;
    align-items: center;
}
.nonmem-body .form-tel{
    width: 40%;
}
.nonmem-body .form-calendar{
    width: 66%;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.nonmem-body .form-calendar input{
    width: 35%;
}
/* 포인트적립내역 */
.pointlist-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 2%;
}
.pointlist-box{
    width: 49%;
    border: 1px solid #ddd;
}
.pointlist-top{
    border-bottom: 1px solid #ddd;
    position: relative;
    text-align: left;
    background: #f8f8f8;
    padding: 1rem;
}
.pointlist li{
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 0.8rem;
    border-bottom: 1px solid #ddd;
}
.pointlist li:last-child{
    border-bottom: 0;
}
.ptlist-title{
    width: 20%;

}
.pointlist-total{
    border: 1px solid #ddd;
    display: flex;
    width: 100%;
    background: #f8f8f8;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    gap: 1rem;
}
.pointlist-total-title{
    color: #000;
    font-weight: 600;

}
    .type-mobile{
        display: none;
    }



@media screen and (max-width: 1199px) {
    .header-top.type-pc{
        display: none;
    }
    .header-top.type-mobile{
        display: block;
        height: initial;
    }
   


    .topbanner-wrap{
        display: none;
    }
    .leftmenu-wrap{
        display: none;
    }
    .content-wrap{
        width: 96%;
        margin: 0 auto;
    }
    .footer-top-wrap{
        display: none;
    }
    .footer-bottom-inner{
        flex-wrap: wrap;
        padding:1rem;
        gap: 2rem;
    }
    .footer-copy{
        flex-wrap: wrap;
        width: 100%;
        gap: 2rem;
    }
    .quick{
        display: none;
    }
    .view-img img{
        width: 100%;
    }
    .naver-review-wrap img{
        width: 100%;
    }
    .bank-01{
        flex-direction: column;
        padding: 8px 0;
    }

    /* 입금계좌번호 안내 */
    .banking-list{
        flex-wrap: wrap;
        justify-content: start;
    }
    .money-cont-01 ul{
        width: 70%;
    }


    .header-right{
        /* display: none; */
    }

    .gnb-wrap.type-pc{
        display: none;
    }


    .subslider-wrap{
        margin: 1rem 0 2rem 0
    }


    /* 모바일 사이드 메뉴 */
    .sidemenu-wrap{
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 200;
        display: none;
        overflow: auto;
       
    }

    .sidemenu-wrap.show{
        display: block;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 200;
        width: 100%;
      
        animation-name: show;
        animation-duration: 0.1s;
    }

    @keyframes show {
        0% { width: 0;opacity: 0; }
        100% { width: 100%; opacity: 1;}
    }

    .sidemenu-bg{
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        display:none;
        background: rgba(0, 0, 0, 0.6);
    }
    .sidemenu-inner{
        width: 80%;
        height: 100%;
        background: #fff;
        opacity: 1;
        border: 4px solid #0066cc;
    }
    .sidemenu-inner h1{
        padding: 2rem;
        background: #0066cc;
        color: #fff;
        font-size: 2.4rem;
    }
    .sidemenu-inner h1 img{
        width: 20rem;
    }
    .m-btn-left{
        background: #ebedf0;
        color: #686868;
        padding: 0 10px;
        height: 2.8rem;
        border-radius: 2px;
    }
    .sidemenu-top-home{
        background: #6e9c16;
        height: 6rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        font-size: 1.5rem;
    }
    .m-sidemenu-user{
        font-size: 2rem;
        color: #fff;
    }
    .sidemenu-top {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        font-size: 1.5rem;
    }
    .sidemenu-top-login{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
    }
    .sidemenu-top-login button{
        width: 25%;
    }
    .btn-sidemenu-close{
        position: absolute;
        left:80%;
        top: 10px;
        width: 6.6rem;
        height: 5.8rem;
        background: #0066cc;
        padding-left: 15px;
        border-radius: 0 50% 50% 0;
        text-align: left;
    }
    .btn-sidemenu-close img{
        width: 2rem;
    }
    .sidemenu-top button{
        width: 40%;
        font-size: 1.5rem;
    }
    .sidemenu-gnb{
        
    }
    .sidemenu-gnb >li{
        position: relative;
        font-size: 1.7rem;
        padding-left: 2rem;
        padding-top: 1.4rem;
        padding-bottom: 1.4rem;
        border-bottom: 1px solid #eee;
    }
    .sidemenu-gnb >li:after{
        content: '';
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        display: inline-block;
        width: 12px;
        height: 22px;
        background: url('/images/m_arrow_right.png') no-repeat;
        background-size:100% 100%;
 
    }
    .sidemenu-gnb >li>a{
        display: block;
        color: #575757;
    }
    .sidemenu-gnb >li:last-child{
        margin-bottom: 0;
    }
    .menu-2depth li{
        margin-bottom: 2rem;
    }
    .menu-2depth li:last-child{
        margin-bottom:0;
    }
    .menu-2depth-wrap{
        background: #eee;
        padding: 2rem  ;
        margin-right: 2rem;
        border-radius: 6px;
        margin-top: 1rem;
    }
    .mylist-bottom-banner{
        flex-wrap: wrap;
    }
    .mylist-bottom-banner a{
        flex: 1;
    }
    .mylist-bottom-banner a img{
        width: 100%;
    }

    .sidemenu-btns{
        display: flex;
        justify-content: space-between;
        align-items: center;

    }
       .sidemenu-btns button{
        width: 33%;
        height: 40px;
       }


    /* mobile-header */
    .contbox-wrap{
        display: none;
    }
    .m-header-links{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 5.4rem;
    }
    .m-links{
        display:inline-flex;

    }
    .m-links li{
        position: relative;
        display: inline-block;
        font-size: 1.6rem;
        padding: 4px 7px 4px 4px;
        font-weight: 600;
    }
    .m-links li:after{
        content: '|';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);

    }
    .m-links li:last-child{
        padding-right: 0;
    }
    .m-links li:last-child:after{
        display: none;

    }
    .btn-menu-mo{
        position: absolute;
        left: 2%;
        top: 50%;
        transform: translateY(-50%);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.6rem;
        height: 2.6rem;
        background: url('/images/btn_menu.png') no-repeat;
        background-size: 100% 100% ;
    }
    .mo-tel-btn{
        position: absolute;
        right: 2%;
        top: 50%;
        transform: translateY(-50%);
        display: inline-flex;
        border: 2px solid #000;
        border-radius: 8px;
        padding: 4px;
    }
    .mo-tel-btn img{
        width: 22px;
    }
    .m-logo{
        background: #83b724;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 5.5rem;
    }
    .m-nav-wrap{
        border-bottom: 1px solid #ccc;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 5rem;
    }
    .m-nav li{
        position: relative;
        display: inline-flex;
        font-size: 1.6rem;
        padding: 6px 10px 6px 4px;
        font-weight: 600;
    }
    .m-nav li:after{
        content: '';
        position: absolute;
        display: inline-block;
        width: 1px;
        height: 12px;
        background: #222;
        right: 0;
        top: 46%;
        transform: translateY(-50%);
    }
    .m-nav li:last-child{
        padding-right: 0;
    }
    .m-nav li:last-child:after{
        display: none;
    }

    .mainslider-wrap.main-container{
        margin:0;
        width: 100%;
    }
    .m-add-wrap{
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 1px solid #ccc;
        font-size: 2rem;
        font-weight: 600;
        height: 5.4rem;
        border-top: 3px solid #ececec;
    }

    .footer-btns{
        display: none;
    }
    

}

@media screen and (min-width:901px) and (max-width: 1199px) {
    .contbox-wrap{
        flex-wrap: wrap;
    }
    .contbox-01{
        width: 32%;
        align-items: stretch;
        height: 100%;
    }
    .contbox-03{
        width: 32%;
    }
    .contbox-03 img{
        width: 100%;
    }
    .contbox-03 a{
        display: block;
        height: 172px;
    }
    .contbox-02{
        width: 33%;
    }
    .contbox-04{
        width: 32%;
    }
    .contbox-04 img{
        width: 100%;
    }
    .contbox-05{
        width: 66%;
    }
}

@media screen and (max-width: 900px) {
    .board-top,
    .board-body .col.col-view{
        display: none;
    }
    .board-list>li{
        flex-wrap: wrap;
        justify-content: start;
        border-top: 1px solid #D2D2D2;
    }
    .board-top .col.col-title{
        width: 80%; 
    }
    .board-body .col.col-title{
        width: 80%;
        justify-content: start;
    }
    .col.col-check{
        align-self: center;
        height: 100%;

    }

    .board-body .col.col-writer{
        width: auto;
        margin-left:calc(7% + 20px);
        margin-top: -1rem;
        height: 2rem;
        justify-content: start;
    }

    .board-body .col.col-date{
        width: auto;
        height: 2rem;
        margin-top: -1rem;
        justify-content: start;
    }
    .bank-01{
        padding: 10px 0;
    }
    .bank-02{
        font-size: 2rem;
    }


    /* 메인 */
    .contbox-wrap{
        flex-wrap: wrap;

    }
    
    .contbox-01,
    .contbox-02,
    .contbox-wrap >section{
        width:calc(50% - 6px);
    }
    .contbox-wrap >section img{
        width: 100%;
    }
    .contbox-wrap .contbox-05{
        width: 100%;
    }



    .prolist-box {
        width: 32%;
    }
    .prolist-info a{
        flex-direction: column;
        gap: 0.6rem;
    }
    .board-view-body img{
        width: 100%;
    }


    .orderlist-box{
        width: 100%;
    }
    .pointlist-box{
        width: 100%;
    }
}
@media screen and (min-width:641px) and (max-width: 1199px) {
    .viewpage-top{
        flex-wrap: wrap;
        gap: 2%;
    }
    .topinfo-01{
        width: 49%;
    }
    .topinfo-02{
        width: 49%;
    }
    .topinfo-03{
        margin-top: 2rem;
        width: 100%;
        display: flex;
        justify-content: space-between;
        gap: 0.3%;
    }
    .topinfo-03 > section{
        width: 33%;
    }


     /* 인사말 */
    
    .company-01-03{
        display: none;
    }
    .company-01-02 {
        width: calc(100% - 250px);
    }
    .h-date{
        width:26%;
    }
    .company-02 img{
        width: 49%;
    }


}
@media screen  and (max-width: 640px) {
    .viewpage-top{
        flex-direction: column;
    }
    .topinfo-01{
        width: 100%;
    }
    .topinfo-02{
        width: 100%;
        margin-top: 2rem;
    }
    .proinfo-title{
        font-size: 2rem;
        flex-wrap: wrap;
    }
    .topinfo-03{
        width: 100%;
        margin-top: 2rem;
        display: flex;
        gap: 2%;
        flex-wrap: wrap;
    }
    .topinfo-cs{
        width: 49%;
    }
    
    .topinfo-bank{
        width: 49%;
    }
    .quick-cs {
        width: 100%;
    }
    .naver-review-wrap{
        display: none;
    }

    .review-title h1, .delivery-title h1{
        width:15rem;
    }
    .review-list li{
        flex-wrap: wrap;
        flex-direction: column;
        gap: 0.5rem;
    }
    .review-list li .rv-star{
        width: 100%;
        text-align: left;
    }
    .review-list li .rv-cont{
        width: 100%;
    }
    .review-list li .rv-writer{
        text-align: left;
    }
    .title-wrap.type02 h1{
        font-size: 2rem;
    }
    /* 인사말 */
    .company-01{
        flex-direction: column;
    }
    .company-01-01{
        flex-direction: row;
    }
    .company-01-01 img{
        width: 50%;
    }
    .company-01-02{
        width: 100%;
    }
    .company-01-02 img{
        width: 100%;
    }
    .company-02 img{
        width: 49%;
    }
    .company-cont li{margin-bottom: 0.6rem;}
    .company-01-03{
        display: none;
    }
    .h-date{
        width:26%;
    }

    /* mypage list */
    .mypage-list li.mypage-list-top{
        display: none;
    }
    .mypage-list li{
        flex-wrap: wrap;
        justify-content: start;
    }
    .mypage-list .mylist-col01{
        width: 80%;
    }
    .mylist-thumb{
        width: 6rem;
        height: auto;
    }
    .mypage-list .mylist-col05{
 
        width: 14%;
    }
    .mypage-list .mylist-col02{
        width: 22%;
        margin-left: 4em;
    }
    .mypage-list .mylist-col03{
        width: 25%;
    }
   
.mylist-bottom .wd-10, .btn.wd-10 {
    width: 20%;
}

.inputform-sublist{
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: start;
    align-items: start;
}
.inputform-sublist li{
    text-align: left;
}
.form-login {
    width: 80%;
}
.form-email{
    width: 100%;
}
.form-tel,
.form-birth,
.form-address {
    width: 100%;
}
.email-accept-wrap {
    flex-wrap: wrap;
}
    
}

@media screen and (max-width: 480px) {
    /* .header-top{
        justify-content: center;
        padding-top: 2rem;
    } */
    .logo {
        width: 70%;
    }
    .logo a{
        width: 100%;
        display: block;
    }
   
    .logo img{
        width: 30%;

    }
    .logo .logo-img{
        width: 70%;
    }
    
   
    .mainslider-wrap{
        margin-top: 1rem;
    }
    
    .title-wrap{
        height: initial;
        flex-wrap: wrap;
        gap: 1rem;
    }
    .title-wrap h1{
        height: initial;
        line-height: 1.6;
    }
    .title-side{
        display: block;
    }
    .prolist-box{
        width: 49%;
    }
   
    .btn-purchase{
        width: 6rem;
        height: 3rem;
    }
    .footer-link-inner ul{
        flex-wrap: wrap;
    }
    .footer-link-inner ul li:nth-child(6),
    .footer-link-inner ul li:nth-child(7){
        display: none;
    }



    .proinfo-end .detail-cont {
        text-align: right;
        padding-right: 3rem;
    }

    /* 입금계좌번호 안내 */
    .banking-list li{
        width: 32%;
        
    }
    .banking-list li img{
        width: 100%;
    }
    .m-t-title{
        width: 15%;
    }
    .m-t-cont{
        flex-wrap: wrap;
    }
    
    .memberout-title{
        font-size: 1.6rem;
    }
    .memberout-cont ul {
        margin: 3rem 3rem;
    }

    .inputform-title,
    .inputform-title-2{
        width: 30%;
     
    }
    
    .inputform-cont{
        width: 70%;
        flex-wrap: wrap;
    }
    .inputform-cont >input[type=text],
    .inputform-cont >input[type=password]{
        width: 50%;
    }
   
    .tab-mypage{
        height: 26px;
    }


    .nonmem-body .form-tel{
        width: 67%;
    }

    /* 주문내역 */
    /* .mypage-list li.mypage-list-top{
        display: none;
    }
    .mypage-list li{
        flex-wrap: wrap;
     
    }
    .mylist-col02-1{
        width: 10%;
    }
    .mylist-col02-2{
        width: 90%;
    }
    .mylist-col02-3{
        width: 100%;
    } */
}