@font-face {
    font-family: 'Graycliff CF';
    src: local('Graycliff CF Light'),
    url("../fonts/greycliff-cf-light.woff") format("woff"),
    url("../fonts/greycliff-cf-light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Graycliff CF';
    src: local('Graycliff CF Light Oblique'),
    url("../fonts/greycliff-cf-light-oblique.woff") format("woff"),
    url("../fonts/greycliff-cf-light-oblique.woff2") format("woff2");
    font-weight: 300;
    font-style: oblique;
}


@font-face {
    font-family: 'Graycliff CF';
    src: local('Graycliff CF Regular'),
    url("../fonts/greycliff-cf-regular.woff") format("woff"),
    url("../fonts/greycliff-cf-regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Graycliff CF';
    src: local('Graycliff CF Regular Oblique'),
    url("../fonts/greycliff-cf-regular-oblique.woff") format("woff"),
    url("../fonts/greycliff-cf-regular-oblique.woff2") format("woff2");
    font-weight: normal;
    font-style: oblique;
}

@font-face {
    font-family: 'Graycliff CF';
    src: local('Graycliff CF Demi Bold'),
    url("../fonts/greycliff-cf-demi-bold.woff") format("woff"),
    url("../fonts/greycliff-cf-demi-bold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Graycliff CF';
    src: local('Graycliff CF Demi Bold Oblique'),
    url("../fonts/greycliff-cf-demi-bold-oblique.woff") format("woff"),
    url("../fonts/greycliff-cf-demi-bold-oblique.woff2") format("woff2");
    font-weight: 600;
    font-style: oblique;
}

@font-face {
    font-family: 'Graycliff CF';
    src: local('Graycliff CF Bold'),
    url("../fonts/greycliff-cf-bold.woff") format("woff"),
    url("../fonts/greycliff-cf-bold.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Graycliff CF';
    src: local('Graycliff CF Bold Oblique'),
    url("../fonts/greycliff-cf-bold-oblique.woff") format("woff"),
    url("../fonts/greycliff-cf-bold-oblique.woff2") format("woff2");
    font-weight: bold;
    font-style: oblique;
}

body {
    margin: 0;
    font-family: "Graycliff CF" ,Helvetica, Arial, sans-serif;
    font-weight: 400;
    line-height: 1.4;
    color: #50565d;
    text-align: left;
    background-color: #fff;
    -webkit-font-smoothing:antialiased;
    -webkit-tap-highlight-color:rgba(233, 22, 140, 0.5);
    -moz-osx-font-smoothing:grayscale;
}


.banner-slides{width:250px;height:250px;overflow:hidden;position:relative; cursor: pointer;}.small-sidebanner{font-size:14px;line-height:15px;display:block;background-color:#de0075;padding:5px;height:240px;width:240px;text-decoration:none;color:#404040;float:left}.small-sidebanner span{display:block}.small-side-inner{border-radius:5px;background:#fff;width:100%;height:208px;overflow:hidden}.small-side-inner img{margin:-41px -5px 0;display:block;width:250px}.small-logo{background:url(../image/svg/hb-logo.svg) no-repeat 0 0;margin:-6px auto 0 auto;height:38px;width:150px;position:relative;z-index:10}.small-side-text{position:absolute;padding:30px 10px 0;height:75px;left:5px;right:5px;bottom:5px;z-index:10;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;background:url(../image/angle-side.png) no-repeat}.small-prices{background:url(../image/prices-bg.png) no-repeat right bottom;height:50px;position:absolute;left:5px;bottom:5px;right:5px;z-index:11}.small-show{color:#e10078;width:65px;padding-left:10px;padding-top:12px;float:left;font-size:11px}.small-percent{float:left;color:#e10078;font-size:14px;padding-top:13px;width:45px;margin-left:43px;text-align:center}.small-offprice,.small-realprice{position:absolute;right:8px;bottom:8px;color:#fff;font-size:24px;z-index:12;text-align:left;width:70px}.small-offprice{bottom:25px;color:#e7a9ca;font-size:12px;text-decoration:line-through;width:55px}.small-sidebanner:hover .small-show{text-decoration:underline}