@font-face {
        font-family: BB-Regular;
        src: url(webfonts/BB-Regular.woff2) format("woff2"),url(webfonts/BB-Regular.woff) format("woff");
        font-display: swap
    }
    
    @font-face {
        font-family: BB-Cond;
        src: url(webfonts/BB-Cond.woff2) format("woff2"),url(webfonts/BB-Cond.woff) format("woff");
        font-display: swap
    }
    
    @font-face {
        font-family: BB-CondBold;
        src: url(webfonts/BB-CondBold.woff2) format("woff2"),url(webfonts/BB-CondBold.woff) format("woff");
        font-display: swap
    }
    
    body {
    background: #fff;
    color: #000;
    font-family: BB-Regular,Helvetica Neue,Helvetica,Arial,sans-serif;
    font-size: .875rem;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0;
    margin: 0;
}


:root {
    --vh: 1vh;
    --safe-area-inset-top: env(safe-area-inset-top);
    --safe-area-inset-bottom: env(safe-area-inset-bottom);
    --ease: cubic-bezier(.4,0,.2,1);
    --ease-fade: cubic-bezier(.19,1,.22,1);
    --ease-transform: cubic-bezier(.22,1,.36,1);
    --ease-bounce: cubic-bezier(.65,-.55,.25,1.5);
    --ease-out-quint: cubic-bezier(.22,1,.36,1);
}
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}
*, :after, :before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#colorbox{
    -webkit-box-sizing:content-box;
    box-sizing: content-box;
}
img {
    max-width: 100%;
    height: auto;
    border: 0;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0;
}
ul {
    list-style-type: none; padding: 0px; margin: 0px;
}
a {
    -webkit-transition: -webkit-box-shadow .15s ease-out;
    transition: -webkit-box-shadow .15s ease-out;
    transition: box-shadow .15s ease-out;
    transition: box-shadow .15s ease-out,-webkit-box-shadow .15s ease-out;
    -webkit-box-shadow: 0 0 0 0 #aaaaac;
    box-shadow: 0 0 0 0 #aaaaac;
    color: #000;
    text-decoration: none;
}


    .headerbar{
        width: 100%; padding: 0px 1%; height: 50px;    z-index: 99;    border-bottom: 1px solid #000;    background-color: #fff;
        position: fixed;    top: 0;
        display: -webkit-box;    display: -ms-flexbox;    display: flex;    -ms-flex-wrap: wrap;    flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
        -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row;flex-direction: row;
    }
    .banner{ width:220px;  position:absolute; left: calc(50% - 120px);}
    
    
    .nav { display:flex;}
    .nav ul.menu{ display:flex;}
    .headerbar a,.bardpath a{ 
        border: 1px solid #fff; border-radius: 0.25rem;
        transition: border-color .15s ease-out,box-shadow .15s ease-out,-webkit-box-shadow .15s ease-out;
        font-size: .75rem; font-weight: 400; line-height: 130%; letter-spacing: .03em; text-transform: uppercase;
        text-decoration: none;
        height: 1.75rem; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
        align-items: center; padding: 0 0.5rem; white-space: nowrap;
    }
    .headerbar a:hover,.bardpath a:hover{ border-color:#000; }
    .cart,.cart ul{ display:flex;}
    .fa{ font-size:1.1rem;margin-left:0.5rem;}
    
    .nav ul li ul,.searchbar{ display:none; position:absolute; top:37px; width:300px; height:150px; border-radius:10px; border: 1px solid #ddd; background-color:#fff; padding:10px;}
    .nav ul li ul li a{ width:100%;}
    
    .searchbar{ right:20px; width:400px;}
    .search_group {
        height: 40px;
        background-color: #f2f2f2;
        color: #b7b7b7;
        margin: 40px 0px 0px 40px;
    }
    .input-group {
        position: relative;
        display: table;
        border-collapse: separate;
    }
    .search_group input.form-control {
        border-radius: 5px;
        box-shadow: none;
        color: #585A5A;
        padding: 0px 0px 0px 15px;
        height: 40px;
        background: transparent;
        border: none;
    }
    .search_group button {
        background-color: #000000;
        color: #fff;
        height: 40px;
        font-size: 16px;
        margin-top: -1px;
        border-radius: 5px;
    }
    .input-group-btn {
        position: relative;
        font-size: 0;
        white-space: nowrap;
    }
    
    .categorybanner{ width:100%; height:170px; line-height:170px;  text-align: center; margin-top:50px;text-transform: uppercase; border-bottom: 1px solid #000; font-size: 0.8rem; font-family: BB-CondBold,Helvetica Neue,Helvetica,Arial,sans-serif; font-weight: 400; letter-spacing: .05em;}
    
    .catebiglist{ width:100%;}
    .catebiglist ul{ width:100%; }
    .catels img{ width:100%;}
    li.ls-line{ height:0px; position:relative;}
    .ls-info{ position: absolute; bottom:30px; z-index:1; width:300px; left:50%; margin-left:-150px; text-align:center;text-transform: uppercase; font-family: BB-CondBold,Helvetica Neue,Helvetica,Arial,sans-serif; font-weight: 400; letter-spacing: .05em; line-height:3em;}
    
    .ls-info a{ padding:10px 20px; border: 1px solid #000; background-color:#fff; font-weight:normal; border-radius:5px;}
    
    
    .about{ font-family: BB-CondBold,Helvetica Neue,Helvetica,Arial,sans-serif; font-weight: 400; letter-spacing: .05em; line-height:2em; background-color:#c9c9c0; background-image:url(images/about_right.png); background-position: center center; background-repeat: no-repeat;}
    .about-contents{ width:50%; margin-left:25%; padding-top:2em; padding-bottom: 2em; text-align:center;}
    .about-contents p{ font-size:1rem; padding-top:2em; text-align:left; text-indent: 2em;}
    
    .feeter{ line-height:50px; background-color:#555; text-align:center; height:50px;}
    .footer-contents{line-height:50px; text-align:center;}

    .button{ color: #fff; background-color: #000; border: 1px solid #000; border-radius: 5px; line-height: 3em; cursor: pointer;}
    .button.b70{ width: 70%; margin: 4em 15%;}

    .entNav{ display: flex;}
    .entNav span{ font-size: 16px; line-height: 1em; padding: 5px;}
    .entNav .left,.entNav .right{ width: 50%;}
    .entNav .right{ text-align: right;}




    .bardpath{margin-top:50px; height: 45px; line-height: 45px; width: 100%; padding: 0px 1%;  border-bottom: 1px solid #000; background-color: #fff;}
    .categorybanner{margin-top:0px; height: 400px; background-size:cover; background-position: center center; background-repeat: no-repeat;}
    .categorybanner h1{ width: 100%; height: 80px; padding-top: 320px; text-align: center; color: rgb(255, 255, 255); line-height: 50px; text-shadow:2px 3px 1px #000; }
    .boardlist{ width: 100%;}
    .boardlist ul{ width: 100%; display: flex; flex-wrap: wrap;}
    .listitem{ width: 25%; border-bottom: #000 1px solid; border-right: #000 1px solid;}
    .listitem:nth-child(4n+4){width: calc(25% - 3px); border-right: none;}
    .listitem a img{ width: 100%;}
    .listitem h4,.listitem h5{ text-align: center; line-height: 30px;}
    .listitem h4{ margin-top: 20px;}
    .listitem h5{ font-weight: normal; margin-bottom: 20px;}