html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
p {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    font-family: "Microsoft JhengHei", "微軟正黑體", Verdana, Geneva, sans-serif;
    list-style-type: none;
}
a {
    color: inherit;
    text-decoration: none;
}
/* -------------- 通用 -------------- */

body {
    width: 100%;
    color: #3d3d3d;
    line-height: 1.5em;
}

.title {
    margin-top: 5px;
}

.title > span {
    display: block;
    background-image: url(/images/project/kitchen/chapter_title.png);
    width: 100px;
    height: 73px;
    float: left;
    text-align: center;
    color: #ab3b3a;
    font-size: 14px;
    padding-top: 27px;
}

.title h1 {
    padding-top: 22px;
    font-size: 30px;
}

.title h1 span {
    font-size: 16px;
    display: block;
    color: #ab3b3a;
    padding-top: 8px;
}

.title h3 {
    display: block;
    text-align: center;
    margin: auto;
    margin-bottom: -30px;
    margin-top: 40px;
    width: 500px;
    font-size: 18px;
    font-weight: 800;
}

.title p {
    text-align: center;
    margin: auto;
    width: 500px;
    line-height: 2em;
    padding: 10px 0 15px 0;
    font-size: 16px;
}

.chap4 .title p,
.chap4 .title h3 {
    padding-right: 20px;
}

.chap4 .title h3 {
    margin-top: -10px;
}

.chap4 .title p {
    margin-top: 30px;
}

.chap2 {
    background-color: #f5f1e7;
}

.chap4 {
    background: #ebf9fb;
}

.kitchen,
.storage,
.video,
.survey,
.message {
    width: 900px;
    margin: auto;
    padding: 10px 50px;
}

.utensils,
.recipe {
    width: 1000px;
    margin: auto;
    padding: 10px 50px;
}

.utensils .title,
.recipe .title {
    margin-left: 14px;
}

.line img {
    display: block;
    padding: 35px;
    margin: auto;
}
/* -------------- 側邊選單 -------------- */

.slidnav {
    display: block;
    width: 71px;
    height: auto;
    position: fixed;
    right: 0;
    z-index: 9999;
}

.slidnav {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}

.slidnav li a {
    display: block;
    border: 1px solid #575859;
    background-color: #333;
    padding: 15px;
    text-align: center;
    line-height: 1.5em;
    font-size: 13px;
    color: #fff;
}

.slidnav li a:hover {
    color: #cda45e;
}
/* -------------- 主視覺 -------------- */

.main {
    width: 100%;
    background-color: #f8f8f8;
    height: 293px;
}

.main img {
    display: block;
    height: 287px;
    width: 1500px;
    margin: auto;
}
/* -------------- 主選單 -------------- */

.menu {
    width: 100%;
    background-color: #f5f3eb;
    height: 52px;
}

.menu ul {
    width: 1000px;
    margin: auto;
    text-align: center;
    padding-top: 15px;
}

.menu li {
    display: inline-block;
}

.menu li a {
    padding: 15px 30px;
    color: #333;
    background-color: #cda45e;
}

.menu li a:hover {
    color: #fff;
    background-color: #a93b3a;
}
/* -------------- chapter1 -------------- */

.chap1-tag li {
    display: inline-block;
}

.chap1-tag li a {
    padding: 15px 0;
    display: block;
    width: 297px;
    text-align: center;
    background-color: #d0c5a7;
}

.chap1-tag li a:hover {
    background-color: #544035;
    color: #fff;
}

.chap1-tag .k1 a,
.chap1-tag .k2 a,
.chap1-tag .k3 a {
    background-color: #544035;
    color: #fff;
}

.kitchen-area {
    position: relative;
    width: 900px;
    height: 586px;
}

.kitchen-area h4 {
    font-weight: 700;
    margin-bottom: 10px;
    color: #749440;
}

.kitchen-area p {
    font-size: 14px;
}

.kitchen-area a:hover h4,
.kitchen-area a:hover {
    color: #f19483;
}

.kitchen-area div {
    position: absolute;
}
/* ---- 頁籤 ---- */

.k01 {
    background-image: url(/images/project/kitchen/kitchen-area1.jpg);
}

.k01 .area01 {
    right: 60px;
    top: 60px;
    width: 250px;
}

.k01 .area02 {
    right: 537px;
    top: 360px;
    width: 250px;
}

.k01 .area03 {
    right: 30px;
    top: 383px;
    width: 150px;
}

.k02 {
    background-image: url(/images/project/kitchen/kitchen-area2.jpg);
}

.k02 .area01 {
    right: 65px;
    top: 62px;
    width: 310px;
}

.k02 .area02 {
    right: 410px;
    top: 370px;
    width: 150px;
}

.k02 .area03 {
    right: 30px;
    top: 323px;
    width: 150px;
}

.k03 {
    background-image: url(/images/project/kitchen/kitchen-area3.jpg);
}

.k03 .area01 {
    right: 50px;
    top: 43px;
    width: 250px;
}

.k03 .area02 {
    right: 588px;
    top: 324px;
    width: 200px;
}

.k03 .area03 {
    right: 36px;
    top: 429px;
    width: 250px;
}
/* -------------- chapter2 part1 -------------- */

.storage h2 {
    margin: 50px 50px 30px 50px;
    color: #fff;
    font-size: 18px;
    width: 260px;
    padding: 10px 20px 10px 10px;
    text-align: right;
    background: #897d6b url(/images/project/kitchen/chap2p1-title.png) no-repeat 5%;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;
    behavior: url(PIE.htc);
}

.storage_p1 {
    position: relative;
}

.storage_p1 .area01,
.storage_p1 .area02,
.storage_p1 .area03 {
    display: block;
    position: absolute;
    color: #fff;
    font-size: 15px;
    padding: 10px;
    background-color: #ab3b3a;
}

.storage_p1 .area01 {
    right: 770px;
    top: 200px;
    width: 110px;
}

.storage_p1 .area02 {
    right: 5px;
    top: 220px;
    width: 105px;
}

.storage_p1 .area03 {
    right: 500px;
    top: 480px;
    width: 130px;
}

.storage_p1 .area04 {
    position: absolute;
    font-size: 15px;
    font-weight: 800;
    color: #897d6b;
    width: 300px;
    right: 50px;
    top: 500px;
    line-height: 1.5em;
}

.storage_p2 > h2 {
    margin: 40px 50px;
    width: 190px;
    background: #897d6b url(/images/project/kitchen/chap2p2-title.png) no-repeat 5%;
}

.storage_p2 {
    position: relative;
}

.storage_p2 a > img {
    width: 584px;
    margin: -70px 40px 0 230px;
}

.storage_p2 > p {
    position: absolute;
    top: 125px;
    right: 258px;
    font-size: 15px;
    font-weight: 800;
    color: #897d6b;
}

.qa {
    position: relative;
    margin-top: 20px;
}

.qa span {
    position: absolute;
    color: #fff;
    line-height: 1.5em;
}

.qa h3 {
    padding-left: 65px;
    font-size: 18px;
}

.qa p {
    padding-top: 15px;
    font-size: 15px;
}

.qa .area01 {
    right: 80px;
    top: 28px;
    width: 320px;
}

.qa .area02 {
    right: 495px;
    top: 300px;
    width: 320px;
}

.qa .area02 h3 {
    padding-left: 68px;
}
/* -------------- chapter2 part2 -------------- */

.door {
    position: relative;
}

.door-title {
    margin-left: 45px;
    width: 430px;
    border-left: 5px solid #ab3b3a;
    padding-left: 20px;
}

.door h3 {
    font-weight: 800;
    font-size: 17px;
    padding-bottom: 10px;
}

.door p {
    font-size: 15px;
}

.book img {
    margin-left: 70px;
    margin-top: -45px;
}

.book p {
    position: absolute;
    top: 150px;
    right: 265px;
    font-size: 15px;
    font-weight: 800;
    color: #897d6b;
}

.door iframe {
    display: block;
    margin: auto;
    margin-top: 20px;
}

.chap2-tag ul {
    width: 796px;
    margin: auto;
    margin-top: 30px;
}

.chap2-tag li {
    display: inline-block;
}

.chap2-tag li a {
    padding: 15px 0;
    display: block;
    width: 156px;
    text-align: center;
    background-color: #d0c5a7;
}

.chap2-tag li a:hover {
    background-color: #ab3b3a;
    color: #fff;
}

.chap2-tag .d1 a,
.chap2-tag .d2 a,
.chap2-tag .d3 a,
.chap2-tag .d4 a,
.chap2-tag .d5 a {
    background-color: #ab3b3a;
    color: #fff;
}

.door-area {
    position: relative;
    width: 796px;
    height: 330px;
    background-color: #e1dbcf;
}

.door-area div {
    position: absolute;
}

.door-area h4 {
    margin-bottom: 10px;
    width: 120px;
    padding: 5px;
    background-color: #ab3b3a;
    color: #fff;
    text-align: center;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;
    behavior: url(PIE.htc);
}
/* ---- 頁籤2 ---- */

.d01 {
    display: block;
}

.d02 {
    display: block;
}

.d03 {
    display: block;
}

.d04 {
    display: block;
}

.d05 {
    display: block;
}

.door-area span {
    display: block;
    width: 182px;
    height: 150px;
    margin: 0px 80px;
    background: url(/images/project/kitchen/BOARD-1.png);
}

.d02 span {
    background: url(/images/project/kitchen/board-2.png);
}

.d03 span {
    background: url(/images/project/kitchen/board-3.png);
}

.d04 span {
    background: url(/images/project/kitchen/board-4.png);
}

.d05 span {
    background: url(/images/project/kitchen/board-5.png);
}

.door-area .area01 {
    right: 60px;
    top: 50px;
    width: 400px;
}

.door-area .area02 {
    right: 460px;
    top: 180px;
    width: 250px;
}

.door-area .area03 {
    right: 60px;
    top: 180px;
    width: 400px;
}

.d04 .area03,
.d05 .area03 {
    top: 200px;
}

.d05 .area01 {
    right: 110px;
    width: 350px;
}
/* -------------- chapter3 -------------- */

.video img {
    display: block;
    width: 548px;
    margin: auto;
}
/* -------------- chapter4 part1 -------------- */

.utensils h2 {
    margin: auto;
    background-color: #397890;
    color: #fff;
    margin-top: 20px;
    margin-bottom: 0px;
    font-size: 18px;
    width: 260px;
    text-align: center;
    padding: 10px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    behavior: url(PIE.htc);
}

.utensils-p1,
.utensils-p2 {
    position: relative;
}

.utensils-p1 img {
    display: block;
    width: 810px;
    margin: auto;
    margin-bottom: 30px;
}

.utensils-p1 h4 {
    color: #397890;
    font-weight: 800;
}

.utensils-p1 p {
    font-size: 15px;
}

.utensils-p1 div {
    text-align: center;
    width: 400px;
    position: absolute;
}

.utensils-p1 .area01:hover h4,
.utensils-p1 .area02:hover h4,
.utensils-p1 .area01:hover,
.utensils-p1 .area02:hover {
    color: #cabd24;
}

.utensils-p1 .area01 {
    top: 380px;
    right: 490px;
}

.utensils-p1 .area02 {
    top: 370px;
    right: 120px;
}
/* -------------- chapter4 part2 -------------- */

.utensils-p2 {
    border-top: 1px solid #ebf9fb;
    display: block;
    height: 600px;
    background-image: url(/images/project/kitchen/chap4-bg.jpg);
}

.utensils-p2 h2 {
    margin-bottom: 80px;
    margin-top: 50px;
}

.utensils-p2 img {
    display: block;
    width: 900px;
    margin: auto;
}

.utensils-p2 .area01,
.utensils-p2 .area02,
.utensils-p2 .area03 {
    position: absolute;
}

.utensils-p2 .area01:hover,
.utensils-p2 .area02:hover,
.utensils-p2 .area03:hover {
    color: #a78a00;
}

.utensils-p2 h4 {
    color: #a78a00;
    font-size: 20px;
    margin-bottom: 10px;
}

.utensils-p2 p {
    font-size: 14px;
}

.utensils-p2 .area01 {
    top: 130px;
    right: 510px;
}

.utensils-p2 .area02 {
    top: 460px;
    right: 530px;
    width: 270px;
}

.utensils-p2 .area03 {
    top: 400px;
    right: 305px;
}
/* -------------- chapter4 part3 -------------- */

.utensils-p3 {
    color: #2f6e86;
    background-image: url(/images/project/kitchen/chap4-bg.jpg);
}

.utensils-p3 .shop1 > span,
.utensils-p3 .shop2 > span,
.utensils-p3 .shop3 > span {
    display: block;
    padding: 3px 0 5px 90px;
    background-image: url(/images/project/kitchen/shop-1.png);
    background-repeat: no-repeat;
    margin: 0 100px;
}

.utensils-p3 .shop2 > span {
    margin-bottom: 50px;
    background-image: url(/images/project/kitchen/shop-2.png);
}

.utensils-p3 .shop3 > span {
    background-image: url(/images/project/kitchen/shop-3.png);
    margin-bottom: 50px;
}

.utensils-p3 h1 {
    font-size: 38px;
    padding: 7px 0 15px 0;
}

.utensils-p3 h3 {
    font-size: 20px;
}

.utensils-p3 span:hover h1,
.utensils-p3 span:hover h3 {
    color: #a78a00;
}

.utensils-p3 h4 {
    text-align: center;
    font-size: 18px;
    display: inline-block;
    border: 1px solid #2f6e86;
    letter-spacing: 0.1em;
    padding: 5px 15px;
    margin-bottom: 8px;
}

.utensils-p3 p {
    color: gray;
}

.utensils-p3 p span {
    font-size: 8px;
}

.shop1,
.shop2,
.shop3 {
    position: relative;
}

.shop1 div,
.shop2 div,
.shop3 div {
    position: absolute;
}
/* ----- shop1 ---- */

.shop1 .area01 {
    top: 210px;
    right: 490px;
    width: 150px;
}

.shop1 .area02 {
    top: 420px;
    right: 693px;
    width: 250px;
}

.shop1 .area03 {
    top: 385px;
    right: 15px;
    width: 200px;
}

.shop1 .area04 {
    top: 550px;
    right: 25px;
    width: 240px;
}

.shop1 .area05 {
    top: 750px;
    right: 403px;
    width: 230px;
}
/* ----- shop2 ---- */

.shop2 .area01 {
    top: 310px;
    right: 7px;
    width: 200px;
}

.shop2 .area02 {
    top: 465px;
    right: 56px;
    width: 220px;
}

.shop2 .area03 {
    top: 505px;
    right: 690px;
    width: 210px;
}

.shop2 .area04 {
    top: 620px;
    right: 20px;
    width: 200px;
}

.shop2 .area05 {
    top: 780px;
    right: 490px;
    width: 200px;
}
/* ----- shop3 ---- */

.shop3 .area01 {
    top: 405px;
    right: 697px;
    width: 260px;
}

.shop3 .area02 {
    top: 405px;
    right: 385px;
    width: 260px;
}

.shop3 .area03 {
    top: 405px;
    right: 73px;
    width: 260px;
}

.shop3 .area04 {
    top: 587px;
    right: 130px;
    width: 390px;
}
/* -------------- chapter5 part1  -------------- */

.chap5 {
    background-color: #f3f1e2;
}

.recipe .title {
    margin-bottom: 50px;
}

.recipe-1 {
    background-color: #a59a80;
    position: relative;
    padding-bottom: 20px;
}

.recipe-1 h1 {
    display: inline-block;
    position: absolute;
    color: #fff;
    top: 80px;
    left: 245px;
    font-size: 50px;
}

.recipe-1 h1 span {
    margin-left: 15px;
    font-size: 20px;
}

.recipe-1 h3 {
    text-align: center;
    display: inline-block;
    font-size: 17px;
    position: absolute;
    color: #fff;
    top: 88px;
    left: 120px;
}

.recipe-1 > span {
    color: #ede5d1;
    position: absolute;
}

.recipe-1 > span {
    top: 95px;
    right: 0px;
}

.recipe-1 > span a {
    display: block;
    padding: 10px;
    width: 300px;
    height: 130px;
}

.recipe-1 .area01,
.recipe-1 .area02,
.recipe-1 .area03 {
    position: absolute;
    line-height: 1.8em;
    font-size: 15px;
}

.recipe-1 .area01 {
    top: 260px;
    right: 247px;
    width: 260px;
}

.recipe-1 .area02 {
    top: 247px;
    right: 25px;
    width: 260px;
}

.recipe-1 .area03 {
    top: 500px;
    right: 130px;
    width: 370px;
}
/* -------------- chapter5 part2  -------------- */

.recipe-2 {
    background-color: #98cfd0;
    position: relative;
    padding-bottom: 20px;
}

.recipe-2 h1 {
    display: block;
    text-align: center;
    padding: 50px 0 20px 0;
    color: #fff;
    font-size: 36px;
}

.recipe-2 h3 {
    color: #fff;
    position: absolute;
    font-size: 26px;
}

.recipe-2 span a {
    color: #fff;
    position: absolute;
    width: 180px;
    height: 60px;
    top: 1205px;
    padding-left: 90px;
    right: 640px;
}

.recipe-2 span a:hover {
    color: #147575;
}

.recipe-2 .t01 {
    top: 170px;
    right: 540px;
}

.recipe-2 .t02 {
    top: 731px;
    right: 710px;
}

.recipe-2 .area01,
.recipe-2 .area02,
.recipe-2 .area03,
.recipe-2 .area04,
.recipe-2 .area05 {
    line-height: 1.8em;
    font-size: 15px;
    position: absolute;
}

.recipe-2 .area01 {
    top: 300px;
    right: 557px;
}

.recipe-2 .area02 {
    top: 485px;
    right: 405px;
    width: 290px;
}

.recipe-2 .area03 {
    top: 798px;
    right: 296px;
}

.recipe-2 .area04 {
    top: 787px;
    right: 130px;
}

.recipe-2 .area05 {
    top: 1042px;
    right: 110px;
    width: 430px;
}


/* -------------- chapter6 -------------- */

.message p {
    margin-top: 20px;
    width: 600px;
}

.message p span {
    display: block;
    margin: 20px 0;
    padding: 10px 55px;
    background-color: #e1f0f0;
    text-align: left;
    border: 1px dotted gray;
}

.message ul {
    width: 610px;
    margin: auto;
}

.message li {
    text-align: center;
    display: inline-block;
    margin-top: -20px;
}

.message ul img {
    width: 120px;
}

.message li p {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    width: 200px;
}

.message > span a {
    display: block;
    margin: auto;
    width: 200px;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 10px 10px 10px 15px;
    font-size: 18px;
    letter-spacing: 0.5em;
    background-color: #a93b3a;
    color: #fff;
    text-align: center;
}

.message > span a:hover {
    background-color: #e3715c;
}

/* -------------- chapter7 -------------- */

.chap7 {
    background-color: #e8eef7;
}

.survey {
    margin-top: 30px;
}

.survey .title {
    margin-bottom: 60px;
}

.note{ display:block; height:30px; background-color:#e8eef7; color:#333; text-align:center; font-size:12px; overflow: hidden; line-height: 30px; margin:0; padding-bottom:20px;}

/*code custom*/
.container #wrapper {line-height: 1.5em; width:100%; font-size:16px;}
footer { margin:0 }
/*.li_Socail .fb-like { position:fixed; right:0px; }
.share-button-num {
    text-align: right;
    margin: 10px 35px 0 0;
}*/
/*.li_Socail .fb-share-button {
     margin-left: 0px;
}*/

.fb_base {
    margin-left: 0px !important;
}

.fb_iframe_widget {    
    margin-top: 2px;    
}

div#fb_like {
    margin-left: -16px;
}

.fb_share {
    margin-left: 1px;
}

#fbcomment {
    max-width:700px;
    margin: 0 auto;
}