@charset "utf-8";

/* CSS Document */

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,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}


/* HTML5 display-role reset for older browsers */

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

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

a {
    text-decoration: none;
}

@font-face {
    font-family: 'DFLiSong';
    src: url(DFLiSong.ttf)
}


/*LiSong.ttf*/

body {
    background: #94b10b;
    font-family: arial, sans-serif;
}


/* min-width: 1050px; */

header {
    /* width: 1050px;*/
    width: 100%;
    margin: 0 auto;
    position: absolute;
    top: 0;
    /*left: calc(50vw - 50%);*/
    z-index: 999;
}

.top {
    display: block;
    width: 100%;
    background: #000;
    height: 35px;
    min-width: 1050px;
    max-width: 1050px;
    margin: 0 auto;
}

.top a {
    display: block;
    float: left;
    width: calc(100%/3 - 2px);
    font: 13px/35px 新細明體;
    color: #fff;
    text-align: center;
}

.top span {
    display: inline-block;
    float: left;
    width: 1px;
    height: 17px;
    margin: 9px 0;
    background: #fff;
}

header .menu-part {
    min-width: 1050px;
    max-width: 1050px;
    margin: 0 auto;
}

header .logo {
    float: left;
    margin: 17px 0 0;
}

header .nav {
    width: calc(100%/3*2);
    float: right;
    background: rgba(255, 255, 255, 0.5);
    height: 27px;
    margin: 23px 0 0;
    font: 15px/27px 微軟正黑體;
}

header .nav a {
    color: #000;
    text-align: center;
}

header .menu {
    float: left;
}

header .menu li {
    float: left;
    margin-right: 20px;
}

header .menu li a {
    padding: 0 25px;
}

header .ver {
    float: right;
}

header .ver li {
    float: left;
}

header .ver li a {
    display: block;
    width: 40px;
}

header .ver li a:hover {
    background: #fff;
}

header .index {
    display: none;
}

header .index:hover {
    display: none;
}

.index_container {
    width: 100%;
}

.index_container ul {}

.index_container li {
    display: block;
    width: 100%;
    height: 800px;
    margin-top: -100px;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
    min-height: 480px;
}

.index_container li:nth-child(odd) {}

.index_container li:nth-child(even) {}

.index_container li:nth-child(1) {
    background-image: url(../images/img01.jpg);
    z-index: 5;
    margin-top: 0;
    height: 48.9584vw;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
}

.index_container li:nth-child(2) {
    background-image: url(../images/img02.jpg);
    z-index: 4;
    height: 43.75vw;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}

.index_container li:nth-child(3) {
    background-image: url(../images/img03.jpg);
    z-index: 3;
    height: 41.0417vw;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
}

.index_container li:nth-child(4) {
    background-image: url(../images/img04.jpg);
    z-index: 2;
    height: 37.9167vw;
}

.index_container li:nth-child(5) {
    background-image: url(../images/img05.jpg);
    z-index: 1;
    height: 27.3438vw;
    min-height: 350px;
}

.index_container li a {
    position: absolute;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
}

.index_container li:nth-child(1) a {
    background-image: url(../images/w01.png);
    width: 30.75%;
    height: 6.85%;
    top: 40%;
    left: 48.9%;
}

.index_container li:nth-child(2) a {
    background-image: url(../images/w02.png);
    width: 17.552%;
    height: 32.6191%;
    top: 24.0477%;
    left: 52.3385%;
}

.index_container li:nth-child(3) a {
    background-image: url(../images/w03.png);
    width: 21.8603%;
    height: 33.1219%;
    top: 26.0153%;
    left: 45.7173%;
}

.index_container li:nth-child(4) a {
    background-image: url(../images/w04.png);
    width: 16.4478%;
    height: 29.3957%;
    top: 30.2198%;
    left: 28.6916%;
}

.index_container li:nth-child(5) a {
    background-image: url(../images/w05.png);
    width: 19.7058%;
    height: 13.1429%;
    top: 45.0477%;
    left: 35.9433%;
}

footer {
    background: #000;
    color: #fff;
    width: 100%;
    float: left;
}

footer .footer_container {
    width: 100%;
    margin: 0 auto;
    padding: 55px 0;
    min-height: 140px;
    min-width: 1050px;
    max-width: 1050px;
}

footer {
    background: #000;
    color: #fff;
}

footer .footer_container a {
    color: #fff;
}

footer .logo {
    display: block;
    width: 100%;
}

footer p {
    font: 13px/200% arial, 新細明體;
    width: 35%;
    float: left;
}

footer p a {}

footer ul {
    font: 15px/27px 微軟正黑體;
}

footer .menu {
    width: 15%;
    float: left;
    font: 16px/36px 新細明體;
    padding-top: 45px;
}

footer .menu li {}

footer .menu a {}

footer .ver {
    float: right;
    margin: 90px 0 0;
}

footer .ver li {
    float: left;
    margin-left: 1px;
}

footer .ver a {
    display: block;
    width: 36px;
    height: 27px;
    text-align: center;
    background: #fff;
    color: #000;
}

footer .ver a.fb_btn {
    background: #485a96 url(../images/fb_btn.png) no-repeat center center;
    background-size: cover;
}

footer .ver a:hover {
    opacity: 0.75;
}

footer span {
    display: block;
    width: 50%;
    float: right;
    text-align: right;
    margin-top: 15px;
}

footer .m_foorer {
    display: none;
}

.page_container {
    width: 100%;
    float: left;
    min-height: 250px;
    margin: 200px auto 35px;
}

.content {
    width: 1050px;
    margin: 0 auto 90px auto;
    background: #fff;
    /*padding: 0 0 90px;*/
    position: relative;
}

.title {
    font: bold 48px/60px 'DFLiSong';
    color: #24292b;
    display: inline-block;
    margin: 80px 0 50px 50px;
}

.location {
    display: inline-block;
    margin-left: 25px;
}

.location li {
    display: inline-block;
    font: 12px/24px 標楷體;
    color: #969696;
}

.location li a {
    font: 16px/24px 微軟正黑體;
    color: #969696;
    display: inline-block;
    margin: 0 15px;
}

ul.pdlist {
    width: calc(100% - 100px);
    margin: 0 auto;
    height: auto;
    column-count: 4;
    column-gap: 0;
    column-rule: 0;
    display: flex;
}

ul.pdlist li {
    display: inline-block;
    width: calc(100% - 1px);
    border-right: solid 1px #fff;
    /*float: left;*/
}

ul.pdlist li:last-child {
    border-right: none;
}

ul.pdlist a {}

ul.pdlist a img {
    width: 100%;
    height: auto;
}

ul.pdlist span {
    display: block;
    width: 150px;
    height: 40px;
    border: solid 1px #877f8a;
    line-height: 40px;
    margin: 40px auto;
    text-align: center;
    color: #877f8a;
    font-family: 'DFLiSong';
}

.pd {
    height: 660px;
}

.ultra-ind {
    border-top: solid 1px #ebdfda;
    background: url(../images/ultra-img.png) no-repeat calc(100% - 35px) 75px, url(../images/ultrabg.png) repeat-x center top;
    background-color: #ebdfda;
}

.pdtxt {
    width: 450px;
    float: left;
    margin-left: 50px;
}

.pd_title {
    margin-top: 60px;
    margin-bottom: 45px;
}

.ultra-ind span.pd_title {
    display: block;
    width: 250px;
    height: 34px;
    background: url(../images/ultra-title.png) no-repeat;
}

.ultra-ind p {
    font: 12px/18px 新細明體;
    line-height: 200%
}

.ultra-ind br {
    line-height: 36px;
}

.ultra-ind a {
    display: block;
    background: #3f3531 url(../images/ultra-logo.png) no-repeat center 70px;
    position: absolute;
    left: 50px;
    bottom: -90px;
    padding: 20px;
}

.ultra-ind a span {
    display: block;
    width: 320px;
    height: 320px;
    color: #fff;
    border: solid 1px #fff;
    text-align: center;
}

.spiritqi-ind {
    border-top: solid 1px #ebdfda;
    background: url(../images/spiritqi-img.png) no-repeat calc(100% - 35px) 75px;
    background-color: #d9e0cd
}

.spiritqi-ind span.pd_title {
    display: block;
    width: 259px;
    height: 34px;
    background: url(../images/spiritqi-title.png) no-repeat;
}

.spiritqi-ind p {
    font: 12px/18px 新細明體;
    line-height: 200%
}

.spiritqi-ind br {
    line-height: 36px;
}

.spiritqi-ind a {
    display: block;
    background: #3f3531 url(../images/spiritqi-logo.png) no-repeat center 70px;
    position: absolute;
    left: 50px;
    bottom: -90px;
    padding: 20px;
}

.spiritqi-ind a span {
    display: block;
    width: 320px;
    height: 340px;
    color: #fff;
    border: solid 1px #fff;
    text-align: center;
}

.spiriteo-ind {
    background: #ffe040 url(../images/spiriteo-img-r.jpg) no-repeat right top;
}

.spiriteo-ind span.pd_title {
    display: block;
    height: 34px;
    background: url(../images/spiriteo-title.png) no-repeat;
}

.spiriteo-ind p {
    font: 12px/18px 新細明體;
    line-height: 200%
}

.spiriteo-ind br {
    line-height: 36px;
}

.spiriteo-ind a {
    display: block;
    background: #24292b url(../images/spiriteo-logo.png) no-repeat center center;
    position: absolute;
    left: 50px;
    bottom: -90px;
    padding: 20px;
}

.spiriteo-ind a span {
    display: block;
    width: 320px;
    height: 320px;
    color: #fff;
    border: solid 1px #fff;
    text-align: center;
}

.chakra-ind {
    background: #ffe040 url(../images/chakra-img-r.jpg) no-repeat left top;
}

.chakra-ind span.pd_title {
    display: block;
    height: 34px;
    background: url(../images/chakra-title.png) no-repeat;
}

.chakra-ind p {
    font: 12px/24px 新細明體;
    color: #fff;
}

.chakra-ind br {
    line-height: 36px;
}

.chakra-ind a {
    display: block;
    background: #230b2b url(../images/chakra-logo.png) no-repeat center center;
    position: absolute;
    left: 50px;
    bottom: -90px;
    padding: 20px;
}

.chakra-ind a span {
    display: block;
    width: 320px;
    height: 320px;
    color: #fff;
    border: solid 1px #fff;
    text-align: center;
}

.pd-detail {}

.pd-detail .title_detail {
    display: block;
    width: 360px;
    height: 180px;
    margin: 0 30px 30px 50px;
    float: left;
}

.pd-detail .title_detail span {
    display: block;
    border: solid 1px #fff;
    border-top: none;
    width: 320px;
    height: 160px;
    margin: 0 auto;
}

.ultra-page {}

.ultra-page .title_detail {
    background: #3f3531 url(../images/ultra-logo2.png) no-repeat center center;
}

.description {
    display: block;
    float: right;
    width: calc(100% - 470px);
    margin: 55px 30px 0 0;
}

.description p {
    color: #aaa9a8;
    font: 12px/24px 新細明體;
    border-bottom: solid 1px #e5e5e5;
    padding-bottom: 25px;
    margin-bottom: 18px;
}

.description .location {
    margin-left: -15px;
}

.ultra-list {
    width: 100%;
    padding: 20px 0px 20px 0px
}

.ultra-list ul {
    padding: 0 50px;
    clear: both;
}

.ultra-list li {
    width: 470px;
    display: inline-block;
    height: 390px;
}

.ultra-list li:nth-child(odd) {
    margin-right: 5px;
}

.ultra-list img {
    display: block;
    width: 100%;
    height: auto;
}

.ultra-list li div {
    display: inline-block;
    float: left;
    text-align: center;
    width: 160px;
    margin: 50px 0;
    font: 13px/24px 微軟正黑體;
}

.ultra-list li strong {
    display: block;
    font: bold 24px/32px meiryo;
}

.ultra-list li:nth-child(1) strong {
    color: #318f95;
}

.ultra-list li:nth-child(2) strong {
    color: #be5d3c;
}

.ultra-list li:nth-child(3) strong {
    color: #a5825c;
}

.ultra-list li:nth-child(4) strong {
    color: #edbf1b;
}

.ultra-list li:nth-child(5) strong {
    color: #6eb3dc;
}

.ultra-list li:nth-child(6) strong {
    color: #b5e5a0;
}

.ultra-list li:nth-child(7) strong {
    color: #8fcbe7;
}

.ultra-list li:nth-child(8) strong {
    color: #f6c1c4;
}

.ultra-list li:nth-child(9) strong {
    color: #cbace5;
}

.ultra-list p {
    display: inline-block;
    width: calc(100% - 195px);
    font: 11px/16px 新細明體;
    padding-left: 30px;
    background: url(../images/line01.jpg) no-repeat left top;
    float: right;
    margin: 60px 0;
}

.ultra-list p span {
    display: block;
    margin-left: 36px;
    text-indent: -36px;
}

.spiritqi-list {
    width: 100%;
    padding: 20px 0px 20px 0px
}

.spiritqi-list ul {
    padding: 0 50px;
    clear: both;
}

.spiritqi-list li {
    width: 470px;
    display: inline-block;
    height: 390px;
}

.spiritqi-list li:nth-child(odd) {
    margin-right: 5px;
}

.spiritqi-list img {
    display: block;
    width: 100%;
    height: auto;
}

.spiritqi-list li div {
    display: inline-block;
    float: left;
    text-align: center;
    width: 180px;
    margin: 40px 0;
    font: 16px/24px 微軟正黑體;
}

.spiritqi-list li strong {
    display: block;
    font: bold 32px/48px meiryo;
}

.spiritqi-list li:nth-child(1) strong {
    color: #837f80;
}

.spiritqi-list li:nth-child(2) strong {
    color: #808081;
}

.spiritqi-list li:nth-child(3) strong {
    color: #fb0808;
}

.spiritqi-list li:nth-child(4) strong {
    color: #fb0808;
}

.spiritqi-list li:nth-child(5) strong {
    color: #3d292d;
}

.spiritqi-list li:nth-child(6) strong {
    color: #38262a;
}

.spiritqi-list li:nth-child(7) strong {
    color: #302428;
}

.spiritqi-list li:nth-child(8) strong {
    color: #086265;
}

.spiritqi-list li:nth-child(9) strong {
    color: #026466;
}

.spiritqi-list li:nth-child(10) strong {
    color: #aa9f41;
}

.spiritqi-list li:nth-child(11) strong {
    color: #fb0808;
}

.spiritqi-list li:nth-child(12) strong {
    color: #362629;
}

.spiritqi-list li:nth-child(13) strong {
    color: #b58f23;
}

.spiritqi-list li:nth-child(14) strong {
    color: #c9252b;
}

.spiritqi-list li:nth-child(15) strong {
    color: #086265;
}

.spiritqi-list li:nth-child(16) strong {
    color: #FB0808;
}

.spiritqi-list li:nth-child(17) strong {
    color: #b58f23;
}

.spiritqi-list p {
    display: inline-block;
    width: calc(100% - 210px);
    font: 11px/16px 新細明體;
    padding-left: 30px;
    background: url(../images/line01.jpg) no-repeat left top;
    float: right;
    margin: 60px 0;
}

.spiritqi-list p span {
    display: block;
    margin-left: 36px;
    text-indent: -36px;
}

.spiritqi-item {}

.spiritqi_ul .spiritqi-item img {
    margin: auto;
    display: block;
    max-width: 355px;
    width: 100%;
}

.spiritqi_ul .spiritqi-item div:not(.mobile_product_bg) {
    font-size: 20px;
    max-width: 355px;
    margin: auto;
    padding-left: 20px;
    line-height: 300%;
    letter-spacing: 2px;
    margin-top: 20px;
}

.spiritqi_ul .spiritqi-item div:not(.mobile_product_bg) strong {
    font-size: 35px;
    font-weight: bold;
}

.spiritqi_ul .spiritqi-item span {
    display: block;
    max-width: 355px;
    margin: auto;
    padding-left: 20px;
    font-size: 12px;
    line-height: 150%;
}

.spiritqi_ul li:nth-child(1) div:not(.mobile_product_bg) strong {
    color: #837f80;
}

.spiritqi_ul li:nth-child(2) div:not(.mobile_product_bg) strong {
    color: #808081;
}

.spiritqi_ul li:nth-child(3) div:not(.mobile_product_bg) strong {
    color: #fb0808;
}

.spiritqi_ul li:nth-child(4) div:not(.mobile_product_bg) strong {
    color: #fb0808;
}

.spiritqi_ul li:nth-child(5) div:not(.mobile_product_bg) strong {
    color: #3d292d;
}

.spiritqi_ul li:nth-child(6) div:not(.mobile_product_bg) strong {
    color: #38262a;
}

.spiritqi_ul li:nth-child(7) div:not(.mobile_product_bg) strong {
    color: #302428;
}

.spiritqi_ul li:nth-child(8) div:not(.mobile_product_bg) strong {
    color: #086265;
}

.spiritqi_ul li:nth-child(9) div:not(.mobile_product_bg) strong {
    color: #026466;
}

.spiritqi_ul li:nth-child(10) div:not(.mobile_product_bg) strong {
    color: #aa9f41;
}

.spiritqi_ul li:nth-child(11) div:not(.mobile_product_bg) strong {
    color: #fb0808;
}

.spiritqi_ul li:nth-child(12) div:not(.mobile_product_bg) strong {
    color: #362629;
}

.spiritqi_ul li:nth-child(13) div:not(.mobile_product_bg) strong {
    color: #b58f23;
}

.spiritqi_ul li:nth-child(14) div:not(.mobile_product_bg) strong {
    color: #c9252b;
}

.spiritqi_ul li:nth-child(15) div:not(.mobile_product_bg) strong {
    color: #086265;
}

.spiritqi_ul li:nth-child(16) div:not(.mobile_product_bg) strong {
    color: #FB0808;
}

.spiritqi_ul li:nth-child(17) div:not(.mobile_product_bg) strong {
    color: #b58f23;
}

.spiriteo-page {}

.spiriteo-page .title_detail {
    background: #24292b url(../images/spiriteo-logo2.png) no-repeat center center;
}

.spiriteo-list {
    width: 100%;
    padding: 20px 0px 20px 0px
}

.spiriteo-introduction {
    width: calc(100% - 100px);
    margin: 0 50px;
    float: left;
}

.spiriteo-introduction img.essential-oil {
    float: left;
    margin: 0 85px 0 60px;
}

.spiriteo-introduction span {
    display: block;
    font: 18px/30px meiryo;
    color: #000;
    margin: 20px 0 10px;
}

.spiriteo-introduction span img {
    display: inline-block;
    margin-left: 10px;
}

.spiriteo-introduction p {
    display: inline-block;
    float: left;
    color: #aaa9a8;
    font: 12px/24px 新細明體;
}

.spiriteo-list ul.spiriteo-item {
    padding: 0 50px;
    clear: both;
}

.spiriteo-item li {
    max-width: 470px;
    width: 100%;
    ;
    display: inline-block;
    margin-bottom: 60px;
}

.spiriteo-item img {
    display: block;
    width: 150px;
    height: 150px;
    float: left;
    margin: 0 35px 0 25px
}

.spiriteo-item li div {
    font: 20px/20px meiryo;
    color: #000;
    float: left;
    margin-top: 10px;
}

.spiriteo-item {
    margin-top: 35px;
}

.spiriteo-item li {}

.spiriteo-item li:nth-child(1) {
    display: block;
    float: left;
    width: calc(100% - 150px);
    height: 60px;
    line-height: 60px;
    border-top: solid 1px #8b8d8e;
    border-bottom: solid 2px #24292b;
    margin: 35px 0 60px;
    padding: 0 75px;
}

.spiriteo-item li:nth-child(1) span {
    display: inline-block;
    color: #939393;
    padding-left: 45px;
    margin-left: 75px;
    background: url(../images/line01.jpg) no-repeat left center;
}

.spiriteo-item img {}

.spiriteo-item span {
    display: block;
    text-align: left;
    font: 12px/24px 新細明體;
}

.spiriteo-item span:nth-child(1) {
    font: 11px/20px meiryo;
    color: #585858;
    margin-bottom: 10px;
}

.spiriteo-item span:nth-child(2)::before {
    content: "原產地";
    letter-spacing: 5px;
}

.spiriteo-item span:nth-child(3)::before {
    content: "萃取部位";
}

.spiriteo-item span:nth-child(4)::before {
    content: "萃取方式";
}

.spiriteo-item span:nth-child(5)::before {
    content: "使用禁忌";
}

.spiriteo-list table {
    width: calc( 100% - 100px);
    margin: 40px 50px 0;
    padding: 0 20px;
    text-align: center;
}

.spiriteo-list tr {
    border-bottom: solid 1px #8b8d8e;
    font-size: 12px;
}

.spiriteo-list td {
    height: 60px;
    vertical-align: middle;
}

.spiriteo-list tr:nth-child(odd) {
    background: #f2f2f2;
}

.spiriteo-list tr:nth-child(1) {
    background: #fff;
    border-bottom: solid 2px #24292b;
    border-top: solid 1px #8b8d8e;
    font: 16px meiryo;
}

.spiriteo-list td:nth-child(1) {
    width: 32.25%;
    text-align: right;
    padding-right: 3.75%;
    font: 20px/20px meiryo;
    color: #000;
    background: url(../images/line01.jpg)no-repeat right center;
}

.spiriteo-list tr:nth-child(1) td:nth-child(1) {
    background: none;
}

.spiriteo-list td:nth-child(1) span {
    display: block;
    font: 11px/10px meiryo;
    color: #585858;
}

.spiriteo-list td:nth-child(2) {
    width: 13.5%;
    padding-left: 1.5%;
}

.spiriteo-list td:nth-child(3) {
    width: 13.5%;
}

.spiriteo-list td:nth-child(4) {
    width: 13.5%;
}

.spiriteo-list td:nth-child(5) {
    width: 20%;
    padding-right: 2%;
    line-height: 14px;
    font-size: 11px
}

.chakra-page {}

.chakra-page .title_detail {
    background: #230b2b url(../images/chakra-logo2.png) no-repeat center center;
}

.chakra-list {
    width: 100%;
    padding: 20px 0px 20px 0px
}

.chakra-list ul {
    padding: 0 50px;
    clear: both;
}

.chakra-list li {
    width: 470px;
    display: inline-block;
}

.chakra-list li:nth-child(odd) {
    margin-right: 5px;
}

.chakra-list img {
    display: block;
    width: 100%;
    margin: -1px;
    height: auto;
    border: solid 1px #cacaca;
}

.chakra-list li div {
    font: 11px/24px 微軟正黑體;
    color: #585858;
    width: 170px;
    padding-right: 30px;
    text-align: right;
    float: left;
    margin: 30px 0 0;
}

.chakra-list li strong {
    display: block;
    font: bold 20px/32px meiryo;
}

.chakra-list li:nth-child(1) strong {
    color: #e02013;
}

.chakra-list li:nth-child(2) strong {
    color: #f39700;
}

.chakra-list li:nth-child(3) strong {
    color: #fed100;
}

.chakra-list li:nth-child(4) strong {
    color: #6eb92b;
}

.chakra-list li:nth-child(5) strong {
    color: #278ed0;
}

.chakra-list li:nth-child(6) strong {
    color: #584c9e;
}

.chakra-list li:nth-child(7) strong {
    color: #894a9c;
}

.chakra-list li:nth-child(8) strong {
    color: #7f7f7f;
}

.chakra-list p {
    display: inline-block;
    width: calc(100% - 200px);
    font: 11px/16px 新細明體;
    height: 115px;
    margin-top: 35px;
    float: right;
}

.chakra-list p span {
    display: block;
    margin-left: 36px;
    text-indent: -36px;
}

.contact {
    width: calc(100% - 100px);
    margin: 0 auto;
    height: 775px;
    border-top: solid 1px #d9d9d9;
    padding: 50px 50px 0;
}

.contact-info {
    margin-left: 50px;
    width: 460px;
    float: left;
}

.contact-info span {
    font: 24px/30px 微軟正黑體;
}

.contact-info span.sub {
    display: block;
    font-size: 16px;
    margin-bottom: 40px;
}

.contact-info ul {}

.contact-info li {
    height: 25px;
    font: 14px/25px 微軟正黑體;
    margin-bottom: 30px;
    padding-left: 48px;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
}

.contact-info li:nth-child(1) {
    background-image: url(../images/info_icon01.png);
}

.contact-info li:nth-child(2) {
    background-image: url(../images/info_icon02.png);
}

.contact-info li:nth-child(3) {
    background-image: url(../images/info_icon03.png);
}

.contact-info li:nth-child(4) {
    background-image: url(../images/info_icon04.png);
    margin-bottom: 35px;
}

.contact-info p {
    font: 14px/30px 微軟正黑體;
}

.contact-info strong {
    display: block;
    font-size: 18px;
    margin: 30px 0 15px;
}

.form {
    margin-right: 50px;
    width: 300px;
    float: right;
}

input,
select,
textarea {
    display: block;
    width: calc(100% - 2px);
    height: 36px;
    border-radius: 5px;
    border: solid 1px #cacaca;
    margin-bottom: 20px;
    text-indent: 20px;
    font: 14px/25px 微軟正黑體;
}

::-webkit-input-placeholder {
    color: #8f8f8f;
}

:-moz-placeholder {
    color: #8f8f8f;
}

::-moz-placeholder {
    color: #8f8f8f;
}

:-ms-input-placeholder {
    color: #8f8f8f;
}

select {
    height: 40px;
    color: #8f8f8f;
    width: calc(100% + 2px);
}

select option {
    color: #000;
}

textarea {
    height: 300px;
    width: calc(100% - 4px);
}

input[name="checkCode"] {
    width: calc(100% - 160px);
    float: left;
}

.form img {
    float: right;
}

input[value="送出"] {
    cursor: pointer;
    background: #24292b;
    color: #fff;
    font: 18px/45px 微軟正黑體;
    height: 45px;
    text-indent: inherit;
}


/* mobile */

@media screen and (min-width: 1060px) {
    .hidden-md {
        display: none !important;
    }
    .mmenu {
        display: none !important;
    }
    .pdlist-m {
        display: none !important;
    }
    .spiriteo-ind-m {
        display: none !important;
    }
    .content-intro {
        display: none !important;
    }
}


/* @media screen and (min-width: 801px) and (max-width: 991px) { .hidden-sm { display: none !important; }  .mmenu  { display: none !important; } .pdlist-m  { display: none !important; } .spiriteo-ind-m { display: none !important; }.content-intro{ display: none !important; }} */

@media screen and (min-width: 481px) and (max-width: 1059px) {
    .hidden-smxs {
        display: none !important;
    }
    /*.mmenu  { display: none !important; } .pdlist-m  { display: none !important; } .spiriteo-ind-m { display: none !important; }.content-intro{ display: none !important; } */
}

@media screen and (max-width: 480px) {
    body {
        margin: 0;
        background-color: #94b10b;
        max-width: none !important;
    }
    .hidden-xs {
        display: none !important;
    }
}

@media screen and (min-width: 1060px) and (max-width: 1199px) {
    header .menu-part {
        min-width: none;
        max-width: 1050px;
        margin: 0 auto;
    }
    footer .footer_container {
        min-width: none;
        max-width: none;
    }
}


/* @media screen and (min-width: 801px) and (max-width: 991px) { 
	header .menu-part{ min-width: none; max-width: none; margin: 0 auto;}
	footer .footer_container { min-width: none; max-width: none; }


} */


/*@media screen and (min-width: 481px) and (max-width: 800px) { 
	header .menu-part{ min-width: none; max-width: none; margin: 0 auto;}
	footer .footer_container { min-width: none; max-width: none; }
	
	.index_container{ width: 100%; }
	.index_container ul{}
	.index_container li{display: block; width: 100%; height: 800px; margin-top: -100px; position: relative; background-size: cover; background-repeat: no-repeat; background-position:center bottom; min-height: 480px;}
	.index_container li:nth-child(odd){}
	.index_container li:nth-child(even){}
	.index_container li:nth-child(1){background-image: url(../images/b1_m.png); z-index: 5; margin-top: 0; height: 48.9584vw;
		-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%); }
	.index_container li:nth-child(2){background-image: url(../images/b2_m.png); z-index: 4; height: 43.75vw;
		-webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);}
	.index_container li:nth-child(3){background-image: url(../images/b3_m.png); z-index: 3; height: 41.0417vw;
		-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%); }
	.index_container li:nth-child(4){background-image: url(../images/img04.jpg); z-index: 2; height: 37.9167vw; }
	.index_container li:nth-child(5){background-image: url(../images/img05.jpg); z-index: 1; height: 27.3438vw; min-height: 350px; }

	.index_container li a{ position: absolute; display: block; background-size:contain; background-repeat: no-repeat; }
	.index_container li:nth-child(1) a{ background-image: url(../images/w01.png); width: 85%; height: 20%; top: 68.5%; left: 10%; }
	.index_container li:nth-child(2) a{ background-image: url(../images/w02.png); width: 17.552%; height: 32.6191%; top: 24.0477%; left: 52.3385%;}
	.index_container li:nth-child(3) a{ background-image: url(../images/w03.png); width: 21.8603%; height: 33.1219%; top: 26.0153%; left: 45.7173%;}
	.index_container li:nth-child(4) a{ background-image: url(../images/w04.png); width: 33%; height: 29.3957%; top: 35.2198%; left: 12.6%;}
	.index_container li:nth-child(5) a{ background-image: url(../images/w05.png); width: 19.7058%; height: 13.1429%; top: 45.0477%; left: 35.9433%;}
}
*/

@media screen and (max-width: 1059px) {
    header .logo {
        float: left;
        /* margin: 5% 0 0 5.25%;*/
        margin: 20px 15px 0 20px;
        box-sizing: border-box;
    }
    header .menu-part {
        margin: 0 auto;
        /*max-width: 480px;*/
        min-width: 240px;
        width: 100%;
    }
    header .index {
        display: block;
        width: 100%;
        z-index: 9999;
    }
    header .index:hover {
        display: block;
        width: 100%;
    }
    header .index img {
        /*margin-top: 6.25% ; margin-left:calc(100% - 298px) ;*/
        margin-top: 26px;
        margin-left: calc(100% - 318px);
    }
    footer .footer_container {
        min-width: 100%;
        max-width: none;
        min-height: 55px;
    }
    footer .m_foorer {
        display: block;
    }
    footer .m_foorer .logo {
        display: block;
        width: 20%;
        float: left;
        margin-left: 6.5%;
        ;
    }
    footer .m_foorer p {
        font: 14px/160% arial, 新細明體;
        width: 70%;
        float: left;
        margin-left: 10px;
    }
    .index_container {
        width: 100%;
    }
    .index_container ul {}
    .index_container li {
        display: block;
        width: 100%;
        height: 800px;
        margin-top: -100px;
        position: relative;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center bottom;
        min-height: 480px;
    }
    .index_container li:nth-child(odd) {}
    .index_container li:nth-child(even) {}
    .index_container li:nth-child(1) {
        background-image: url(../images/img01.jpg);
        z-index: 5;
        margin-top: 0;
        height: 58.9584vw;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 96%);
    }
    .index_container li:nth-child(2) {
        background-image: url(../images/b2_m.png);
        z-index: 4;
        height: 170vw;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 98%, 0 100%);
    }
    .index_container li:nth-child(3) {
        background-image: url(../images/b3_m.png);
        z-index: 3;
        height: 151vw;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 98%);
    }
    .index_container li:nth-child(4) {
        background-image: url(../images/b4_m.png);
        z-index: 2;
        height: 147.8vw;
    }
    .index_container li:nth-child(5) {
        background-image: url(../images/b5_m.png);
        z-index: 1;
        height: 153.5vw;
    }
    .index_container li a {
        position: absolute;
        display: block;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .index_container li:nth-child(1) a {
        background-image: url(../images/w01_m.png);
        width: 70%;
        height: 20%;
        top: 62.5%;
        left: 27.6%;
    }
    .index_container li:nth-child(2) a {
        background-image: url(../images/w02.png);
        width: 67.52%;
        height: 30.176%;
        top: 24%;
        left: 27.2%;
    }
    .index_container li:nth-child(3) a {
        background-image: url(../images/w03_m.png);
        width: 90.188%;
        height: 70%;
        top: 23.153%;
        left: 8.38%;
    }
    .index_container li:nth-child(4) a {
        background-image: url(../images/w04_m.png);
        width: 63.188%;
        height: 16.845%;
        top: 23.89%;
        left: 18.9%;
    }
    .index_container li:nth-child(5) a {
        background-image: url(../images/w05_m.png);
        width: 82.25%;
        height: 16.1429%;
        top: 26.88%;
        left: 9.25%;
    }
    /* product */
    .page_container {
        width: 100%;
        float: left;
        min-height: 100px;
        margin: 80px auto 20px;
    }
    .content {
        width: calc(100% - 20px);
        margin: 0 auto;
        margin: 10px 10px 10px 10px;
        min-height: 760px;
        /*padding:0 0 10px;*/
        padding: 0 0 0px;
    }
    .title {
        font: bold 1.8em/2.2em 'DFLiSong', arial, 新細明體;
        color: #24292b;
        display: inline-block;
        margin: 0 0 0 1.25em;
    }
    .location {
        display: block;
        margin: 0 0 0 2em;
    }
    .location li {
        display: inline-block;
        font: 1em 標楷體;
        color: #969696;
    }
    .location li a {
        font: 0.8em/3em 微軟正黑體;
        color: #969696;
        display: inline-block;
        margin: 0 5px 0 5px;
    }
    ul.pdlist-m {
        width: calc(100% - 36px);
        margin: 0 auto;
        height: auto;
        max-width: 360px;
    }
    ul.pdlist-m li {
        display: inline-block;
        width: 100%;
        float: left;
    }
    ul.pdlist-m li:last-child {
        border-right: none;
    }
    ul.pdlist-m a img {
        width: 100%;
        height: auto;
    }
    .spiriteo-ind-m {
        background: #ffe040 url(../images/spiriteo-img-m-r.jpg) no-repeat right bottom;
        min-height: 600px;
        margin-top: 30px;
    }
    .pd_title img {
        /*display: inline-block; margin:-50px 0 0 10px ; width: calc(100% - 20px);  height: auto; */
        display: block;
        position: relative;
        top: -30px;
        margin: auto;
        /*width:280px;*/
    }
    .pdtxt2 {
        width: 80%;
        margin: -50px auto;
    }
    .spiriteo-ind-m p {
        font: 12px/18px 新細明體;
    }
    .spiriteo-ind-m br {
        line-height: 36px;
    }
    .spiriteo-ind-m a span {
        display: block;
        width: 320px;
        height: 320px;
        color: #fff;
        border: solid 1px #fff;
        text-align: center;
    }
    .spiriteo-detail-m {
        /*background:#fff url(../images/spiriteo-detail-m.png) no-repeat top ;*/
        background-size: 101% auto;
        min-height: 600px;
    }
    .spiriteo-detail-m .pd_title {
        border-top: solid 1px #dcdcdc;
    }
    .spiriteo-detail-p {
        font: 12px/16px 新細明體;
        color: #666;
        line-height: 20px;
        margin: 0 auto;
        width: 72%;
    }
    .content-intro {
        width: calc(100% - 20px);
        margin: 0 auto;
        margin: 10px 10px 10px 10px;
        /* height: 6800px; */
        height: 7020px;
        padding: 0 0 10px;
        background: #fff;
    }
    .spiriteo-introduction img {
        margin: 0 0 0 12.9%;
        width: 49.8vw;
        height: auto;
    }
    .spiriteo-introduction p {
        display: inline-block;
        float: left;
        color: #666;
        font: 12px/24px 新細明體;
        padding-top: 30px;
    }
    .spiriteo-item {
        width: 320px;
        margin: 0 auto;
    }
    .spiriteo-item li {
        display: inline-block;
        margin-bottom: 35px;
        max-width: 92.8vw;
    }
    .spiriteo-item li div {
        font: 20px/20px meiryo;
        color: #000;
        float: left;
        /* margin: 25px 0 0 13.5vw;*/
        margin: 25px 25px 15px;
    }
    .spiriteo-item li:nth-child(1) {
        display: block;
        float: left;
        height: 50px;
        line-height: 50px;
        border-top: solid 1px #8b8d8e;
        border-bottom: solid 2px #24292b;
        margin: 35px 0 60px;
        font: 1.32em/2.2em 微軟正黑體;
        text-align: center;
    }
    .spiriteo-item li:nth-child(1) span {
        display: inline-block;
        color: #939393;
        padding-left: 45px;
        margin-left: 75px;
        background: url(../images/line01.jpg) no-repeat left center;
    }
    .spiriteo-item li:last-child {
        display: block;
        float: left;
        height: 50px;
        line-height: 50px;
        border-top: solid 1px #8b8d8e;
        border-bottom: solid 2px #24292b;
        margin: 35px 0 60px;
        font: 1.32em/2.2em 微軟正黑體;
        text-align: center;
        /*width:90vw;*/
        width: 100%;
    }
    .spiriteo-item li:last-child span {
        display: inline-block;
        color: #939393;
        padding-left: 45px;
        margin-left: 75px;
        background: url(../images/line01.jpg) no-repeat left center;
    }
    .spiriteo-item p {
        display: inline-block;
        float: left;
        color: #666;
        font: 12px/24px 新細明體;
        width: 76%;
        margin: -35px 0 20px 12.5%;
    }
    .spiriteo-item img {
        display: block;
        /*width: 65vw; padding-left:6vw;  height: 62.2vw;*/
        width: 320px;
        height: auto;
        margin: 0;
        float: left;
    }
    .spiriteo-item2 {
        width: 320px;
        margin: 0 auto;
    }
    .spiriteo-item2 li {
        display: inline-block;
        /*max-width:92.5vw; padding: 10px 0 10px 10px; margin: 0 0 0 9.5vw; */
        padding: 10px;
        width: calc(100% - 20px)
    }
    .spiriteo-item2 li div {
        font: 20px/20px meiryo;
        color: #000;
        float: left;
    }
    .spiriteo-item2 li div a {
        font: 20px/20px meiryo;
        color: #000;
        float: left;
    }
    .spiriteo-item2 li:nth-child(1) div {
        font: 20px/20px meiryo;
        color: #000;
        float: left;
        margin-top: -35px;
    }
    .spiriteo-item2 li span.txt {
        display: none;
        text-align: left;
        font: 12px/24px 新細明體;
    }
    .spiriteo-item2 li span.sub {
        display: block;
        text-align: left;
        font: 11px/20px meiryo;
        color: #585858;
    }
    .spiriteo-item2 li:nth-child(even) {
        background: #EAEAEA;
        border-top: solid 1px #8b8d8e;
        border-bottom: solid 1px #8b8d8e;
        /*width:69.5vw;*/
        width: calc(100% - 20px);
    }
}


/* mobi menu */

.mmenu {
    position: fixed;
    width: 85%;
    padding-right: 15%;
    padding-top: 75px;
    padding-bottom: calc(100vh - 400px);
    max-height: 480px;
    top: 0;
    /*left: 5%;*/
    left: 0;
    z-index: 55;
    background: rgba(77, 95, 40, .75);
    /* background: rgba(225, 255, 120, .95); rgba(55,70,33,.65); */
    font: 1em arial, 新細明體;
    border-bottom: 1px solid #5D7235;
    -webkit-box-shadow: inset -10px 0 6px -9px rgba(0, 0, 0, .95);
    -moz-box-shadow: inset -10px 0 6px -9px rgba(0, 0, 0, .95);
    box-shadow: inset -10px 0 6px -9px rgba(0, 0, 0, .95);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.mmenu .inn {
    display: block;
    height: 44px;
    line-height: 44px;
    color: #000;
    background: #cad885;
    padding: 0 35px;
    border-bottom: 1px solid #5D7235;
    text-decoration: none;
    text-align: right;
}

.mmenu .inn:hover {
    background: #fff;
    color: #000;
}

.mmenu .ext {
    display: block;
    height: 44px;
    line-height: 44px;
    color: #fff;
    background: #000;
    padding: 0 35px;
    border-bottom: 1px solid #5D7235;
    text-decoration: none;
    text-align: right;
}

.mmenu .ext:hover {
    background: #3B4922;
    color: #FFF;
}

.mmenu .ver {
    width: 10%;
    float: right;
    padding: 15px;
    text-align: center;
    border-left: 1px solid #5D7235;
    border-bottom: none;
}

.mmenu .fb {
    background: #485a96 url(../images/fb_btn.png) no-repeat center bottom;
    background-size: contain;
    text-indent: -100vw;
}

.mmenu a:nth-child(n+7) {
    height: auto;
    padding: 0 15px!important;
}

.mmenu a:last-child::after {
    display: block;
    width: 85%;
    background: #cad885;
    content: "";
    height: 44px;
    position: absolute;
    left: 0;
    margin-top: -44px;
    z-index: -1;
}