@charset "UTF-8";

/******************************************************
*
*   1. property resset
*   2. font property
*   3. layout property
*
******************************************************/


/*  1. property resset */
/*----------------------------------------------------------------------------------------------------------------------------------------*/

html {
    margin: 0;
    /* setting border: 0 hoses ie6 win window inner well border */
    padding: 0;
}
body {
    margin: 0;
    /* setting border: 0 hoses ie5 win window inner well border */
    padding: 0;
    -webkit-text-size-adjust: none;
}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,h7,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0;}
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal;}
fieldset,img,object { border:0; vertical-align:bottom;}
img { font-size:0; line-height:0;}
table { border-collapse:collapse; border-spacing:0;}
caption,th { text-align:left;}
ul { list-style-type:none;}
h1,h2,h3,h4,h5,h6,h7 { font-size:100%; font-weight:normal;}
q:before,q:after { content:'';}
abbr,acronym { border:0;}

/* to preserve line-height and selector appearance */
sup { vertical-align:text-top;}
sub { vertical-align:text-bottom;}
input,textarea,select { font-family:inherit; font-size:inherit; font-weight:inherit;}

/*to enable resizing for IE*/
input,textarea,select { *font-size:100%;}
/*because legend doesn't inherit in IE */
legend { color:#000;}

hr { display: none;}
strong { font-weight: bold;}

/*\*/
a {
    outline: none;
    overflow: hidden;
}
/**/

/* for HTML5 */

article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

.clearfix:before,
.clearfix:after { content:""; display:table;}
.clearfix:after { clear:both;}
.clearfix { zoom:1;}

body{
    background: #f08300;
    width: 100%;
    height: 3000px;
}
header {
    width: 960px;
    height:67px;
    left: 50%;margin-left: -480px;
    position: fixed;
    z-index: 1000;
}
header .snscontainer{
    position: absolute;
    right: 0;top:25px;
    width: 150px;
}
.snscontainer li{
    overflow: hidden;
    display: block;
    float: left;
    margin-right: 6px;
}
.snscontainer li.fb{
    width: 70px;
}
.snscontainer li.tw{
    width: 68px;
}
h1{
    padding-top: 14px;padding-left: 17px;
}
.contentWrapper{
    position: fixed;
    top:0;left:0;
    width: 100%;
    height: 100%;
    /*min-height:700px;*/
    min-width: 960px;
    /*top:50%;margin-top: -350px ;*/

    overflow: hidden;
}
.container{
    width: 100%;
    position: fixed;
    top:0;left:0;
}
.menu{
    position: fixed;
    top:50%;left:0;
    height:191px;
    margin-top: -95px;
    z-index: 500;
}

.menu li a{
    display: block;
    position: relative;
    width: 30px;height: 30px;
    margin-bottom: 1px;
    background: url("../img/menu_bg.png") no-repeat;
}
.menu li a.on{
    background: url("../img/menu_bg_on.png") no-repeat right top;
}
.menu li img{
    position: absolute;
    right: 0;top:0;
}

.menu li a.updown:hover{
    background: url("../img/menu_bg_ov.png") no-repeat;
}
.top{
    height:600px;
    width: 960%;
    left: 50%;margin-left: -480px;
    top:50%;margin-top: -270px;
}
.topImage{
    position: absolute;
    left: 274px;top:0;
}
.topImage img{
    position: absolute;
    top:0;left:0;
}
.topImage .tsmoke{
    left:196px;top:-261px;
}
.top h2{
    overflow: hidden;
    width: 0;
}
.top .caption{
    position: absolute;
    left:103px;top:85px;
}
.captionText{
    position: absolute;
    overflow: hidden;
}
.captionText.ct01{left:0;top:0;width:341px;height: 51px;}
.captionText.ct02{left:350px;top:4px;width:25px;height: 47px;}
.captionText.ct03{left:0;top:69px;width:192px;height: 55px;}
.captionText.ct04{left:3px;top:145px;width:473px;height: 83px;}
.captionText.ct05{left:475px;top:172px;width:135px;height: 57px;}
.captionText.ct06{left:4px;top:249px;width:255px;height: 35px;}
.rotor{
    -moz-transform-origin:10px 43px;
    -webkit-transform-origin:10px 43px;
    -o-transform-origin:10px 43px;
    -ms-transform-origin:10px 43px;
}
.captionText.ct06 img{
    position: absolute;
}



.second{
    height: 700px;
    top:50%;margin-top: -350px;
    background: url("../img/sec_bg.jpg") repeat-x;
    overflow: hidden;
}

.second .secondContent{
    position: absolute;
    height: 5000px;
    width: 2658px;
    left:50%;margin-left: -1329px;   
}

.second .scrollImages{
    position: absolute;
    top:0;left: 0;
    width: 2658px;height: 5000px;
}
.second .story{
    position: absolute;
    left:735px;top:2952px;
    width: 960px;
    height: 700px;
}

.story h2{
    position: absolute;
    left:560px;top:140px;
}
.story .description{
    width: 466px;height: 321px;
    position: absolute;
    left:560px;top:201px;
    text-indent: 100%;
    background: url("../img/secstory_desc.png") no-repeat;
    white-space: nowrap;
    overflow: hidden;
}

.third {
    width: 100%;height: 700px;
    top:50%;margin-top: -350px;
    background:#D9D9D9;
    display: none;
}
.title{
    position: absolute;
    width: 100%;height: 700px;
    background: url("../img/third_title_bg.png");
    bottom:0;
    z-index: 10;
    /*display: none;*/
}
.third h2{
    position: absolute;
    top:50%;left:50%;
    margin-left: -173px;margin-top: -53px;
}
.tileContainer{
    position: absolute;
    width: 960px;height: 700px;
    left:50%;margin-left: -480px;
    top:0;
    
    /*overflow: hidden;*/
}
.tileContainer .tile{
    position: absolute;
    width: 480px;height:350px;
    
}
.tile article{
    position: absolute;
    padding-left:6px;padding-top: 30px;
}
.tile .tilewrapper{
    position: absolute;
    left:0;top:0;
    width: 480px;height:350px;
    cursor: pointer;
    overflow: hidden;
}
.tile .description{
    color:#fff;
    margin-top: 20px;margin-left: 5px;
    font-size: 13px;
    letter-spacing: 4px;
    display: none;
}

.tile.sec1{
    top:0;left: 0;
    z-index:4;
}
.tile.sec2{
    top:0;left: 480px;
    z-index:3;
}
.tile.sec3{
    top:350px;left: 0;
    z-index:1;
}
.tile.sec4{
    top:350px;left: 480px;
    z-index:2;
}


.sec1 article{
    left:136px;top:155px;
    background: url("../img/third_1_fig.png") no-repeat top left;
}
.sec2 article{
    left:141px;top:155px;
    background: url("../img/third_2_fig.png") no-repeat top left;
}
.sec3 article{
    left:142px;top:85px;
    background: url("../img/third_3_fig.png") no-repeat top left;
}
.sec4 article{
    left:149px;top:81px;
    background: url("../img/third_4_fig.png") no-repeat top left;
}
.third .numimage{
    position: absolute;
}
.sec1 .numimage{
    left:250px;top:74px;
}
.sec2 .numimage{
    left:200px;top:70px;
}
.sec3 .numimage{
    left:238px;top:48px;
}
.sec4 .numimage{
    left:200px;top:48px;
}

.forth{
    width: 100%;
    height: 100%;
    background: url("../img/forth_bg.jpg");
    z-index: 11;
    display: none;
}
.forth .title{
    height: 124px;
    background: url("../img/forth_h2_bg.png");
    z-index: 30;
}
.forth h2{
    position: absolute;
    top:50%;left:50%;
    margin-left: -173px;margin-top: -47px;
}
.forth .recipes{
    position: absolute;
    width: 960px;height: 700px;
    top:50%;left:50%;
    margin-left: -480px;margin-top:-350px;
}
.recipes .recipeWrapper{
    position: absolute;
    width: 281px;height: 281px;
    
    cursor: pointer;
    /*overflow: hidden;*/
}

.recipes .recipeWrapper.on{
    overflow: visible;
    cursor: default;
    z-index: 20;
}
.recipes .recipeWrapper:hover{
    z-index: 12;
}
.recipes .recipeWrapper.on .content{
    display: block;
}
.recipes .arrangeTitle{
    width: 281px;height: 281px;
    background: url("../img/forth_title_bg.png") no-repeat;
    /*display: none;*/
}
.recipes section{
    width:282px;height: 282px;
}
.recipes canvas,.recipes .arrangeTitle{
    position: absolute;
    top:0;left:0;
}
.recipes canvas{
    left:1px;top:1px;
}

.recipes .arrange1{left:18px;top:110px;}
.recipes .arrange2{left:245px;top:300px;}
.recipes .arrange3{left:473px;top:110px;}
.recipes .arrange4{left:700px;top:300px;}

.recipes .content{
    position: absolute;
    left:441px;top:99px;
    width: 360px;height: 359px;
    background: url("../img/forth_arrange_txt_bg.png") no-repeat;
    display: none;
}

.recipes .content h3,.recipes .content p{
    position: absolute;
    overflow: hidden;
}
.recipes .content p{
    
    text-indent: 100%;
    white-space: nowrap;
}
.forth .guard{
    position: absolute;
    width: 100%;height: 100%;
    z-index: 50;
}
.arrange1 h3{
    left:73px;top:-6px;
    width:330px;height:183px;
    padding-top: 86px;
    background: url("../img/forth_content_01_bg.png") no-repeat right top;
}

.arrange1 .content p{
    left:73px;top:190px;
    width:206px;height:125px;
    background: url("../img/forth_content_txt01.png") no-repeat;
}

.arrange2 h3{
    left:74px;top:49px;
    width:338px;height:203px;
    padding-top: 14px;
    background: url("../img/forth_content_02_bg.png") no-repeat right top;
}
.arrange2 .content p{
    left:74px;top:232px;
    width:190px;height:64px;
    background: url("../img/forth_content_txt02.png") no-repeat;
}

.arrange3 h3{
    left:73px;top:24px;
    width:316px;height:152px;
    padding-top: 59px;
    background: url("../img/forth_content_03_bg.png") no-repeat right top;
}
.arrange3 .content p{
    left:73px;top:205px;
    width:228px;height:90px;
    background: url("../img/forth_content_txt03.png") no-repeat;
}
.arrange4 h3{
    left:73px;top:0px;
    width:331px;height:199px;
    padding-top: 105px;
    background: url("../img/forth_content_04_bg.png") no-repeat right top;
}
.arrange4 .content p{
    left:73px;top:217px;
    width:222px;height:90px;
    background: url("../img/forth_content_txt04.png") no-repeat;
}
.forth .nav{
    position: absolute;
    right:70px;top:30px;
    overflow: hidden;
    width: 38px;
}
.forth .nav li{
    margin-bottom: 2px;
    width: 38px;height: 38px;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    cursor: pointer;
    background: url("../img/forth_nav_sprite.png") no-repeat;
}
.forth .nav li.back{
    background-position: 0 0;
}
.forth .nav li.back:hover{
    background-position: -39px 0;
}
.forth .nav li.next{
    background-position: 0 -39px;
}
.forth .nav li.next:hover{
    background-position: -39px -39px;
}
.forth .nav li.prev{
    background-position: 0 -78px;
}
.forth .nav li.prev:hover{
    background-position: -39px -78px;
}
.beans{
    position: absolute;
    width: 960px;height: 700px;
    top:50%;left:50%;
    margin-left: -480px;margin-top: -350px;
}
.beans img{
    position: absolute;
}
.beans .bean01{left:551px;top:1px;}
.beans .bean02{left:221;top:405px;}
.beans .bean03{left:1019px;top:524px;}
.beans .bean04{left:989px;top:97px;}
.beans .bean05{left:935px;top:72px;}
.beans .bean06{left:453px;top:51px;}
.beans .bean07{left:200px;top:337px;}
.beans .bean08{left:153px;top:472px;}
.beans .bean09{left:942px;top:136px;}
.beans .bean10{left:714px;top:392px;}
.beans .bean11{left:152px;top:420px;}
.beans .bean12{left:257px;top:328px;}



.fifth{
    width: 100%;
    height: 100%;
    background:#000;
    z-index: 60;
    /*display: none;*/
}
.fifth .fifthcontent{
    position: absolute;
    left:50%;top:50%;
    margin-left: -480px;margin-top: -350px;
    width: 960px;height: 700px;

}
.fifth .fifthbg{
    position: absolute;
    left:-388px;top:-152px;
}
.fifth h2{
    position: absolute;
    left:76px;top:120px;
	
}
.fifth h7{
    position: absolute;
    left:76px;top:470px;

}
.fifth .banner{
    position: absolute;
    width: 369px;height: 57px;
    left:14px;bottom: 55px;
}
.banner li{
    margin-right: 9px;
    float: left;
    background: #fff;
}
.fifth .product{
    position: absolute;
    left:559px;bottom:50px;
    text-align: right;
	
	
	
    color:#fff;
    font-size: 14px;

}
.fifth .cmgallery{
    position: absolute;
    left:621px;top:178px;
    width: 296px;height: 240px;
    overflow: hidden;
}
.fifth .cmgallery h3{
     height: 22px;
}
.cmgallery .list{
    position: absolute;
    top:205px;right: 0;
    width: 175px;height: 30px;

}
.cmgallery .list li{
    float: left;
    margin-left: 5px;
    background: #fff;
}
.cmgallery .thumbnail{
    position: absolute;
    top:30px;
    width:296px;height: 168px;
    overflow: hidden;
}
.cmgallery .thumbnail ul{
    display: block;
    width: 296px;height: 168px;

}
.cmgallery .thumbnail img{
    position: absolute;
    left:0;top:0;
}
.cmgallery .cover{
    width:296px;height: 168px;
    cursor: pointer;
    -moz-transform-origin:50% 50%;
    -webkit-transform-origin:50% 50%;
    -o-transform-origin:50% 50%;
    -ms-transform-origin:50% 50%;
}
.cmgallery h3{

}
.cmgallery a:hover,.banner a:hover{
    opacity: .6;
}

fifth.h7{opacity:1; transform: translateY(0px);}