@charset "utf-8";



/* CSS Document */





/***ad-box-index******************************************************/



#banner-box {

    /*width: 100%; */

    height: auto;

    margin: 0 auto;

    float: left;

}

#banner-box .banner {

    width: 744px;

    height: 375px;

    margin: 0 auto;

    position: relative;

    /* float: right; */

}

#banner-box .banner .dot {

    width: auto;

    height: auto;

    position: absolute;

    z-index: 5;

    right: 55px;

    top: 348px;

}



/***about******************************************************/



#about-box {

    width: 482px;

    height: 81px;

    position: absolute;

    z-index: 1;

    top: 467px;

    left: 518px;

    overflow: hidden;

}

.main-top:after {

    content: '';

    display: block;

    clear: both;

}



/***main_box********************************************************/



.products-box-left {

    width: 256px;

    height: auto;

    margin: 0 auto;

    position: relative;

    float: left;

    background: url(../data/index/products-box-left.jpg);

}

.products-box-left .photobox:hover a {

    COLOR: #3D140B;

    TEXT-DECORATION: none;

}

.products-box-left .photobox:hover .caption {

    COLOR: #EB6400;

    TEXT-DECORATION: none;

    background: #BFD901;

}

.products-box-left .photobox {

    height: 355px;

    width: 235px;

    display: inline-block;

    padding-top: 20px;

    position: relative;

    background: url(../data/index/photobox_bg.jpg);

}

.products-box-left .photo {

    height: auto;

    width: 200px;

    margin: 0 auto;

    border: 1px #FFFFFF solid;

}

.products-box-left .frame_info {

    color: #72482D;

    width: 200px;

    height: auto;

    margin: auto;

    margin: 0 auto;

    margin-top: 15px;

}

.products-box-left .caption {

    padding-top: 7px;

    width: 200px;

    height: 28px;

    text-align: center;

    margin: 0 auto;

    margin-bottom: 20px;

    text-overflow: ellipsis;

    overflow: hidden;

    background: #FFF;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

}

.products-box-left .caption a {

    COLOR: #3D150B;

    TEXT-DECORATION: none;

    font-size: 16px;

    font-weight: bold;

}

.products-box-left .hot {

    width: auto;

    height: auto;

    position: absolute;

    z-index: 5;

    right: -3px;

    top: 60px;

}



/***products******************************************************/



#products-box {

    background-image: url(../data/index/photobox_bg2.jpg);

    height: auto;

    width: 1000px;

    padding: 15px 0px 10px 0px;

    font-size: 13px;

    letter-spacing: 2px;

    float: left;

    position: relative;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

}

.products {}

.products a {

    color: #F0EADF;

    TEXT-DECORATION: none;

    -webkit-transition: color 120ms linear;

    -moz-transition: color 120ms linear;

    -o-transition: color 120ms linear;

    transition: color 120ms linear;

}

.products .photobox:hover a {

    COLOR: #F0EADF;

    TEXT-DECORATION: none;

}

.products .photobox:hover .caption {

    background: url(../data/index/photobox_caption-.png);

}

.products .photobox {

    height: auto;

    width: 242px;

    display: inline-block;

    margin: 2px 1px 2px 2px;

    position: relative;

}

.products .photo {

    height: auto;

    width: 235px;

    margin: auto;

    margin-top: 5px;

    overflow: hidden;

}

.products .frame_info {

    width: 224px;

    height: auto;

    margin: auto;

}

.products .caption {

    background: url(../data/index/photobox_caption.png);

    left: 16px;

    top: 20px;

    position: absolute;

    z-index: 1;

    font-size: 13px;

    width: 200px;

    height: 25px;

    padding: 5px 0px 0px 5px;

    text-align: left;

    float: right;

    white-space: nowrap;

    text-overflow: ellipsis;

    overflow: hidden;

    -webkit-transition: background-image 300ms linear;

    -moz-transition: background-image 300ms linear;

    -o-transition: background-image 300ms linear;

    transition: background-image 300ms linear;

}

.products .caption a {

    COLOR: #5F423A;

    TEXT-DECORATION: none;

}



/***mood******************************************************/



#mood-box {

    background-image: url(../data/index/mood_bg_2.jpg);

    height: unset;

    width: 1000px;

    margin: 0px 0px 29px 0px;

    font-size: 13px;

    letter-spacing: 1px;

    float: left;
    background-position: top;
    position: relative;
    text-align: center;

}
#mood-box:before {
    content: "";
    background-image: url(../data/index/mood_bg_1.jpg);
    height: 44px;
    width: 1000px;
    position: absolute;
    left: 0;
    top: 1px;
}
#mood-box:after {
    content: "";
    background-image: url(../data/index/mood_bg_3.jpg);
    height: 44px;
    width: 1000px;
    position: absolute;
    left: 0;
    bottom: -19px;
    background-repeat: no-repeat;
}

.mood {

    padding: 40px 0px 0px 5px;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    display: flex;
    flex-wrap: wrap;
    /*justify-content: center;*/

}

.mood .photobox {

    height: auto;

    width: 20%;

    margin: 0px;

    float: left;
    text-align: center;
    margin-bottom: 20px;

}

.mood .photo_0 a {

    height: 44px;

    width: 42px;

    margin: 0 auto;

    margin-top: 5px;

    background: url(../data/index/mood.png) 0 0 no-repeat;

    display: block;

}

.mood .photo_1 a {

    height: 44px;

    width: 42px;

    margin: 0 auto;

    margin-top: 5px;

    background: url(../data/index/mood.png) -70px 0 no-repeat;

    display: block;

}

.mood .photo_2 a {

    height: 44px;

    width: 42px;

    margin: 0 auto;

    margin-top: 5px;

    background: url(../data/index/mood.png) -138px 0 no-repeat;

    display: block;

}

.mood .photo_3 a {

    height: 44px;

    width: 42px;

    margin: 0 auto;

    margin-top: 5px;

    background: url(../data/index/mood.png) -207px -1px no-repeat;

    display: block;

}

.mood .photo_4 a {

    height: 44px;

    width: 42px;

    margin: 0 auto;

    margin-top: 5px;

    background: url(../data/index/mood.png) -277px 0 no-repeat;

    display: block;

}

.mood .photo_5 a {

    height: 44px;

    width: 42px;

    margin: 0 auto;

    margin-top: 5px;

    background: url(../data/index/mood.png) -345px 0 no-repeat;

    display: block;

}

.mood .photo_6 a {

    height: 44px;

    width: 42px;

    margin: 0 auto;

    margin-top: 5px;

    background: url(../data/index/mood.png) -412px 0 no-repeat;

    display: block;

}

.mood .photo_7 a {

    height: 44px;

    width: 42px;

    margin: 0 auto;

    margin-top: 5px;

    background: url(../data/index/mood.png) -482px 0 no-repeat;

    display: block;

}

.mood .photo_8 a {

    height: 44px;

    width: 42px;

    margin: 0 auto;

    margin-top: 5px;

    background: url(../data/index/mood.png) -552px 0 no-repeat;

    display: block;

}

.mood .photo_9 a {

    height: 44px;

    width: 42px;

    margin: 0 auto;

    margin-top: 5px;

    background: url(../data/index/mood.png) -621px 0 no-repeat;

    display: block;

}

.mood .photo_10 a {

    height: 44px;

    width: 42px;

    margin: 0 auto;

    margin-top: 5px;

    background: url(../data/index/mood.png) -688px 0 no-repeat;

    display: block;

}

.mood .photo_11 a {

    height: 44px;

    width: 42px;

    margin: 0 auto;

    margin-top: 5px;

    background: url(../data/index/mood.png) -758px 0 no-repeat;

    display: block;

}

.mood .photo_12 a {

    height: 44px;

    width: 42px;

    margin: 0 auto;

    margin-top: 5px;

    background: url(../data/index/mood.png) -828px 0 no-repeat;

    display: block;

}

.mood .photo_13 a {

    height: 44px;

    width: 42px;

    margin: 0 auto;

    margin-top: 5px;

    background: url(../data/index/mood.png) -895px 0 no-repeat;

    display: block;

}

.mood .caption {

    font-size: 13px;

    width: 100%;

    height: 25px;

    padding: 5px 0px 0px 0px;

    text-align: center;

    float: right;

    white-space: nowrap;

    text-overflow: ellipsis;

    overflow: hidden;

}

.mood .caption a {

    COLOR: #5F423A;

    TEXT-DECORATION: none;

}

.mood .caption a:hover {

    color: #5F423A;

    text-decoration: none;

}



/***contact******************************************************/



#contact-box {

    background-image: url(../data/index/contact_box.jpg);

    height: 142px;

    width: 237px;

    padding: 0px 0px 0px 0px;

    font-size: 13px;

    letter-spacing: 1px;

    float: left;

    float: none;
    margin: auto;
    clear: both;

}

.contact {

    padding: 40px 0px 0px 5px;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

}

.contact .fb {

    height: 80px;

    width: 62px;

    margin: 0px 0px 0px 5px;

    float: left;

}

.contact .fb a {

    height: 80px;

    width: 62px;

    margin: 0 auto;

    background: url(../data/index/contact_bg.png) 0 0 no-repeat;

    display: block;

    -webkit-transition: background-image 300ms linear;

    -moz-transition: background-image 300ms linear;

    -o-transition: background-image 300ms linear;

    transition: background-image 300ms linear;
    transition: all .3s ease;

}

.contact .fb:hover a {

    background: url(../data/index/contact_bg.png) 0 0 no-repeat;
    opacity: 0.7;

}

.contact .lnst {

    height: 80px;

    width: 79px;

    margin: 0px 0px 0px 5px;

    float: left;

}

.contact .lnst a {

    height: 80px;

    width: 79px;

    margin: 0 auto;

    background: url(../data/index/contact_bg.png) -62px 0 no-repeat;

    display: block;

    -webkit-transition: background-image 300ms linear;

    -moz-transition: background-image 300ms linear;

    -o-transition: background-image 300ms linear;

    transition: background-image 300ms linear;
    transition: all .3s ease;

}

.contact .lnst:hover a {

    background: url(../data/index/contact_bg.png) -62px 0 no-repeat;
    opacity: 0.7;

}

.contact .mail {

    height: 80px;

    width: 61px;

    margin: 0px 0px 0px 5px;

    float: left;
    transition: all .3s ease;

}

.contact .mail a {

    height: 80px;

    width: 61px;

    margin: 0 auto;

    background: url(../data/index/contact_bg.png) -141px 0 no-repeat;

    display: block;

    -webkit-transition: background-image 300ms linear;

    -moz-transition: background-image 300ms linear;

    -o-transition: background-image 300ms linear;

    transition: background-image 300ms linear;

}

.contact .mail:hover a {

    background: url(../data/index/contact_bg.png) -141px 0 no-repeat;
    opacity: 0.7;

}



/***fb******************************************************/



#fb-box {

    background-image: url(../data/index/fb_box.jpg);

    height: 132px;

    width: 227px;

    padding: 10px 0px 0px 10px;

    margin-left: 20px;

    font-size: 13px;

    letter-spacing: 1px;

    float: left;

}

/***recipe******************************************************/



#recipe-box {
    height: 142px;
    width: 237px;
    padding: 0px 0px 0px 0px;
    margin-left: 15px;
    float: left;
    display: none;
}

#recipe-box a {
    height: 142px;
    width: 237px;
    background-image: url(../data/index/recipe.jpg);
    display: block;
    -webkit-transition: background-image 500ms linear;
    -moz-transition: background-image 500ms linear;
    -o-transition: background-image 500ms linear;
    transition: background-image 500ms linear;
}

#recipe-box:hover a {
    background-image: url(../data/index/recipe-.jpg);
}


/***green******************************************************/



#green-box {
    height: 142px;
    width: 237px;
    padding: 0px 0px 0px 0px;
    margin-left: 15px;
    float: left;
    display: none;
}

#green-box a {
    height: 142px;
    width: 237px;
    background-image: url(../data/index/green.jpg);
    display: block;
    -webkit-transition: background-image 500ms linear;
    -moz-transition: background-image 500ms linear;
    -o-transition: background-image 500ms linear;
    transition: background-image 500ms linear;
}

#green-box:hover a {
    background-image: url(../data/index/green-.jpg);
}



/***plan******************************************************/



#plan-box {

    height: 142px;

    width: 237px;

    padding: 0px 0px 0px 0px;

    margin-left: 15px;

    float: left;

    display: none;
}

#plan-box a {

    height: 142px;

    width: 237px;

    background-image: url(../data/index/plan.jpg);

    display: block;

    -webkit-transition: background-image 500ms linear;

    -moz-transition: background-image 500ms linear;

    -o-transition: background-image 500ms linear;

    transition: background-image 500ms linear;

}

#plan-box:hover a {

    background-image: url(../data/index/plan-.jpg);

}