@charset "utf-8";

@font-face { font-family: 'Noto Sans TC'; src: url('../fonts/NotoSansTC-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

@font-face { font-family: 'Noto Sans TC'; src: url('../fonts/NotoSansTC-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

@font-face { font-family: 'Noto Sans TC'; src: url('../fonts/NotoSansTC-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* 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,

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%;

    vertical-align: baseline;

}

tbody,

tfoot,

thead,

tr,

th,

td {

    margin: 0;

    padding: 0;

    font-size: 100%;

    vertical-align: baseline;

}

a,

p {

    word-break: break-all;

}

a,

a:hover {

    text-decoration: none;

}

article,

aside,

details,

figcaption,

figure,

footer,

header,

hgroup,

menu,

nav,

section {

    display: block;

}

body {

    line-height: 30px;

    margin: auto;

    color: #333333;

    font-size: 16px;

    background: #fff;

}

.p_price {

    font-size: 16px;

    color: red;

    text-align: center;

}

@media screen and (max-width: 500px) {

    body {

        font-size: 14px;

    }

}

.half_content {

    max-width: 1366px;

    margin: 0 auto;

    width: 100%;

}

.half_detail {

    width: 100%;

    /* max-width: 1100px !important; */

    margin: 0 auto;

}

.row {

    margin: 0;

}

@media screen and (max-width: 1366px) {

    .half_content {

        width: 100%;

    }

}

ol,

ul {

    list-style: none;

}

blockquote,

q {

    quotes: none;

}

blockquote:before,

blockquote:after {

    content: '';

    content: none;

}

q:before,

q:after {

    content: '';

    content: none;

}

table {

    border-collapse: collapse;

    border-spacing: 0;

}

* {

    font-family: '微軟正黑體';

    box-sizing: border-box;

}

a {

    text-decoration: none;

}

h3 {

    font-size: 2em;

    font-weight: 600;

    line-height: 1.8;

}

h2 {

    font-size: 1.4em;

    line-height: 1.8;

}

img {

    max-width: 100%;

    vertical-align: bottom;

}

button:focus,

input:focus,

select:focus,

textarea:focus {

    outline: none;

}

#container {

    width: 100%;

    margin: 0 auto;

}

:root {

    --Omain_color: #614E45;

    --Bsub_color: #95d3eb;

    --Gtxt_color: #444344;

    --Gbg_color: #f1f1f1;

    --Obg_color: #F0EAE5;

}

/*header*/

header {

    position: fixed;

    left: 0;

    top: 0px;

    width: 100%;

    height: 80px;

    z-index: 50;

    background-color: #fff;

    background-image: none;

    -webkit-box-shadow: 0 0 15px rgba(25, 37, 72, 0.15);

    box-shadow: 0 0 15px rgba(25, 37, 72, 0.15);

}

header.fixed {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    background: rgba(255, 255, 255, 0.8);

    box-shadow: 0px 0px 10px rgb(170 170 170 / 25%);

}

.head {

    text-align: center;

    margin-bottom: 20px;

}

.half_content>ul {

    display: flex;

    justify-content: center;

    align-items: center;

    padding-left: 15px;

}

.header_hemberger_btn {

    display: none;

}

@media screen and (max-width: 768px) {

    header {

        position: fixed;

        top: 0;

        background: #fff;

        height: 70px;

        box-shadow: 0px 0px 10px rgb(170 170 170 / 25%);

    }

    .header_logo>.half_content {

        height: 65px;

        display: flex;

        justify-content: space-between;

        align-items: center;

    }

    header.fixed .logo img {

        display: inline-block;

    }

    .half_content>ul {

        display: block;

    }

    .header_hemberger_btn {

        display: flex;

        justify-content: center;

        align-items: center;

        padding-right: 1rem;

        position: relative;

        height: 30px;

        cursor: pointer;

    }

    .header_hemberger_btn>span {

        position: relative;

        width: 30px;

        height: 3px;

        background: var(--Gtxt_color);

    }

    .header_hemberger_btn>span::after,

    .header_hemberger_btn>span::before {

        content: '';

        position: absolute;

        width: 30px;

        height: 3px;

        background: var(--Gtxt_color);

        -webkit-transition: all 0.3s ease-in-out;

        -moz-transition: all 0.3s ease-in-out;

        -o-transition: all 0.3s ease-in-out;

        transition: all 0.3s ease-in-out;

    }

    .header_hemberger_btn>span::before {

        bottom: -7px;

    }

    .header_hemberger_btn>span::after {

        top: -7px;

    }

    .header_hemberger_btn>img {

        width: 1.8rem;

    }

    /* newnewnewnewnewnew */

    nav {

        position: fixed;

        top: 0;

        left: -100%;

        height: 100vh;

        overflow: auto;

        width: 100%;

        max-width: 400px;

        padding: 7vh 0px;

        background: #efefef;

        box-shadow: 0px 0px 10px rgb(170 170 170 / 25%);

        transition: 0.5s;

        z-index: 99999;

    }

    /* 捲軸寬度 */

    nav::-webkit-scrollbar {

        width: 0px;

    }

    /* 捲軸背景色 */

    nav::-webkit-scrollbar-track {

        background: none;

    }

    /* 捲軸把手 */

    nav::-webkit-scrollbar-thumb {

        background: transparent;

    }

    .btn_tw {

        justify-content: flex-start;

        padding: 5px 3.5em;

    }

    .header_hemberger_btn.fixed {

        z-index: 99999;

    }

    .header_hemberger_btn.fixed>span {

        background: transparent;

    }

    .header_hemberger_btn.fixed>span::after {

        top: 0;

        transform: rotate(-45deg);

    }

    .header_hemberger_btn.fixed>span::before {

        bottom: 0;

        transform: rotate(45deg);

    }

    .hnav.fixed {

        left: 0;

        z-index: 101;

    }

    .fixedMask.fixed {

        position: fixed;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        background: rgba(255, 255, 255, 0.8);

        z-index: 9999;

    }

}

/*Banner*/

#banner {

    position: relative;

    overflow: hidden;

    z-index: 99;

}

#banner .img {

    white-space: nowrap;

    position: absolute;

}

#banner .img img {

    vertical-align: top;

    max-width: unset;

}

#banner_control {

    position: absolute;

    bottom: 1%;

    width: 100%;

    text-align: center;

    z-index: 100;

    display: none;

}

#banner_control img {

    width: 14px;

}

#banner #banner_control span {

    cursor: pointer;

    padding: 0px 4px;

}

#banner #banner_control span img:nth-child(2) {

    display: none;

}

#banner #banner_control span img:nth-child(1) {

    display: inline-block;

}

#banner #banner_control span:active img:nth-child(1),

#banner #banner_control span.now img:nth-child(1) {

    display: none;

}

#banner #banner_control span:active img:nth-child(2),

#banner #banner_control span.now img:nth-child(2) {

    display: inline-block;

}

/* index-video-banner */

.banner_video {

    width: 95%;

    max-width: 1366px;

    margin: 5vh auto;

}

.banner_video>.video_box {

    width: 100%;

    padding-top: 56.25%;

    position: relative;

    overflow: hidden;

}

.banner_video>.video_box>iframe {

    position: absolute;

    width: 120%;

    height: 120%;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}

@media screen and (max-width: 768px) {

    .banner_video {

        margin: 10vh auto 5vh auto;

    }

}

/*Banner End*/

/*menu*/

.btn_pic>img {

    margin: -3px 0;

}

nav#fixedNav{

    z-index: 20;

}

.mul>li {

    position: relative;

    cursor: pointer;

    padding: 0;

}

.mul>li:nth-child(1) {

    margin-right: 107px;

}

.mul>li:nth-child(2) {

    margin-left: 107px;

}

.mul>li a{

    height: 80px;

    line-height: 80px;

    padding: 0 5px;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 16px;

    background: url("../images/website_image/menu_line.jpg") repeat-x 0 80px;

}

.mul>li a:hover {

    color: #614E45;

    background-position: 0 76px;

}

.mul>li.has_sub_btn>ul {

    display: none;

}

.mul>li.has_sub_btn:hover>ul {

    display: block;

    margin: 10px 0 0;

}

.sul {

    position: absolute;

    z-index: 100;

    width: 100%;

    background-color: #ffffff;

}

.sli {

    text-align: center;

    padding: 0.5rem 0.5rem;

    line-height: 20px;

}

.sli>a {

    color: #000000 !important;

    font-size: 16px;

    font-weight: 100;

}

.sli:hover>a {

    color: #327288 !important;

    transition: 0.5s;

}

a {

    text-decoration: none;

}

.btn_tw {

    color: #333333;

    font-size: 16px;

    padding: 5px 45px;

    text-align: center;

    /* border-right: 1px #C9CACA solid; */

    line-height: 24px;

}

.mli:nth-child(6) .btn_tw {

    border-right: unset;

}

.mli:hover .btn_tw,

.mli:hover .btn_tw .subname {

    color: #614E45;

    transition: 0.5s;

}

.toggleBtn {

    display: none;

}

.subname {

    color: #838281;

    display: block;

    font-size: 15px;

}



@media screen and (max-width: 768px) {

    .mul>li a {

        height: 60px;

        line-height: 60px;

        background: url("../images/website_image/menu_line.jpg") repeat-x 0 60px;

    }

    .mul>li a:hover {

        background-position: 0 58px;

        background-color: #fff;

    }

    nav#fixedNav{

    z-index: 101;

}

    .half_content>ul {

        padding: 0;

    }

    .mli {

        padding: 3px 0;

    }

    .mli:hover .btn_tw {

        border-bottom: unset;

        transition: 0.5s;

    }

    .btn_tw {

        text-align: left;

        border: unset;

        display: flex;

        align-items: center;

        justify-content: center;

    }

    .btn_pic>img {

        margin: -3px 10px;

    }

    .sul {

        position: relative;

    }

    .sli>a {

        font-size: 18px;

        color: #ffffff !important;

    }

    .sli:hover>a {

        color: #ffffff !important;

    }

    .mul>li.has_sub_btn>ul {

        display: none;

        background: #614E45;

    }

    .mul>li.has_sub_btn:hover>ul {

        display: none;

    }

    .mul>li:nth-child(1) {

        margin-right: 0px;

    }

    .mul>li:nth-child(2) {

        margin-left: 0px;

    }

    .toggleBtn {

        display: block;

        width: 12px;

        height: 12px;

        background: url(../images/website_image/header_btn_down.png) no-repeat center center;

        background-size: 100%;

        position: absolute;

        top: 24px;

        right: 12vw;

    }

}

@media screen and (max-width: 500px) {

    .btn_tw,

    .sli>a {

        font-size: 16px;

    }

    .subname {

        font-size: 14px;

    }

}

/* news_list */

.newsList.bg,

.newsDetial.bg {

    background: var(--Obg_color);

    background-size: cover;

    padding: 1px;

}

.news_list {

    margin: 0 auto;

}

.news_list_box>div {

    margin: 2rem auto;

    display: flex;

    align-items: flex-start;

    background-color: #ffffff;

    box-shadow: 0px 0px 10px rgb(170 170 170 / 25%);

    position: relative;

}

.news_list_name {

    color: var(--Omain_color);

    font-weight: 600;

    font-size: 22px;

    margin: 0 0 8px;

}

.news_list_text {

    color: #595757;

}

.news_list_pic {

    width: 400px;

    height: 265px;

}

.news_list_pic>img {

    width: 400px;

    height: 265px;

    object-fit: cover;

}

.news_list_data {

    width: calc(100% - 400px);

    padding: 3rem 2rem;

}

.news_mark {

    position: absolute;

    top: 10px;

    left: 0px;

    background: var(--Omain_color);

    clip-path: polygon(0 0, 85% 0%, 100% 100%, 0% 100%);

    padding-right: 1em;

    padding-left: calc(0.5em + 2px);

    color: #fff;

    font-weight: 600;

    font-size: 1rem;

    letter-spacing: 2px;

    line-height: 2rem;

    text-transform: uppercase;

}

.news_more {

    position: absolute;

    bottom: 1rem;

    right: 1rem;

    padding-right: 1em;

    color: var(--Omain_color);

    font-weight: 600;

    font-size: 1rem;

    letter-spacing: 2px;

    line-height: 2rem;

    border-bottom: 1px solid var(--Omain_color);

    transform: translateX(-2rem);

    transition: 0.5s;

}

.news_more::after {

    content: '';

    width: 0.8rem;

    height: 1px;

    background: var(--Omain_color);

    position: absolute;

    bottom: 0;

    right: 0;

    transform: rotate(45deg) translate(1px, 0px);

    transform-origin: right;

}

.news_list_date {

    font-size: 18px;

    margin: 1rem 1rem 1rem 0;

    padding: 5px 10px;

    letter-spacing: 2px;

    padding-left: 0;

    font-weight: 600;

}

.news_list_box:hover .news_more {

    transform: translateX(0);

}

@media screen and (max-width: 1200px) {

    .news_list_box>div {

        width: 90%;

    }

    .news_list_pic,

    .news_list_pic>img {

        width: 310px;

        height: 260px;

    }

    .news_list_data {

        width: calc(100% - 300px);

    }

}

@media screen and (max-width: 900px) {

    .news_list_name>span:nth-child(2) {

        display: block;

        padding: 10px 0 0;

    }

}

@media screen and (max-width: 850px) {

    .news_list_pic,

    .news_list_pic>img {

        width: 200px;

        height: 190px;

    }

    .news_list_data {

        width: calc(100% - 200px);

    }

}

@media screen and (max-width: 768px) {

    .news_list_box>div {

        flex-wrap: wrap;

    }

    .news_list_pic,

    .news_list_data {

        width: 100%;

    }

    .news_list_pic>img {

        width: 100%;

        height: 100%;

        object-fit: cover;

    }

    .news_list_pic {

        text-align: center;

        margin: 0;

    }

    /* .news_list_pic,

    .news_list_data {

        text-align: center;

    } */

    .news_list_date {

        margin: 1rem 0;

    }

    .news_list_text {

        text-align: left;

    }

}

@media screen and (max-width: 600px) {

    .news_mark,

    .news_list_name,

    .news_list_date {

        font-size: 16px;

    }

    .news_list_text {

        font-size: 14px;

    }

    .news_list_box .news_more {

        transform: translateX(0);

    }

}

@media screen and (max-width: 400px) {

    .news_list_data {

        padding: 1.5rem 1.5rem 4rem 1.5rem;

    }

}

/* news_detail */

.news_detail_outer {

    background: #fff;

    margin: 5vh auto;

    padding: 3vh;

    border-radius: 1rem;

    box-shadow: 0px 0px 10px rgb(170 170 170 / 25%);

}

.news_detailBox {

    border-left: 5px solid var(--Omain_color);

    padding-left: 1em;

}

.news_detail_title {

    font-size: 28px;

    color: var(--Omain_color);

    font-weight: 600;

    margin: 1rem 0;

}

.news_detail_date span {

    font-size: 22px;

    color: var(--Omain_color);

    font-weight: 600;

}

.news_detail {

    width: 100%;

    display: flex;

    align-items: flex-start;

    justify-content: center;

    flex-wrap: wrap;

    margin: 2rem auto;

}

.news_detail_box {

    width: calc(100% - 400px);

    padding: 0 3%;

}

.news_detail_line {

    border-bottom: 1px solid #333;

}

@media screen and (max-width: 1200px) {

    .news_detail .news_list_pic,

    .news_detail .news_list_pic>img {

        width: 400px;

        text-align: center;

    }

}

@media screen and (max-width: 900px) {

    .news_detail_box {

        width: 100%;

        padding: 25px 3%;

    }

    .news_detail_title {

        font-size: 22px;

    }

    .news_detail_date {

        font-size: 18px;

    }

    .news_detail .news_list_pic,

    .news_detail .news_list_pic>img {

        width: 430px;

        height: 370px;

    }

}

@media screen and (max-width: 768px) {

    .news_detail_outer {

        padding: 10px 40px;

    }

    .news_detail {

        margin: 0 auto;

    }

    .news_detail_box {

        padding: 25px 0;

    }

    .news_detail_date span {

        font-size: 16px;

    }

    .news_detail_title {

        font-size: 20px;

    }

    .news_detail .news_list_pic {

        margin: 2rem auto 0.5rem auto;

    }

}

@media screen and (max-width: 500px) {

    .news_detail_outer {

        padding: 15px;

        margin: 4% 0;

    }

    .news_detail .news_list_pic {

        margin: 0.5rem auto;

    }

}

/* footer */

.icon_flex a {

    margin: 0px 10px;

}

.extral_txt:first-child {

    margin-bottom: 20px;

}

@keyframes fan {

    0% {

        transform: translateY(0%);

    }

    50% {

        transform: translateY(30%);

    }

    100% {

        transform: translateY(0%);

    }

}

.float_btn {

    position: fixed;

    right: 1%;

    bottom: 5vh;

    display: flex;

    flex-direction: column;

    z-index: 300;

}

.float_btn a {

    margin: 0.5vh 0;

}

.float_btn a {

    max-height: calc(80vh / 6);

    position: relative;

}

.cart_count {

    position: absolute;

    display: inline;

    background-color: #333;

    color: #fff;

    border-radius: 50%;

    padding: 0 5px;

    line-height: 25px;
    text-align: center;
    bottom: 0%;
    min-width: 25px;
    right: -10%;
    font-size: 13px;
}

.member_count {

    position: absolute;

    display: inline;

    background-color: #c1c1c1;

    color: #fff;

    border-radius: 50%;

    padding: 0 5px;

    line-height: 13px;

    border: 2px #a8a8a8 solid;

    bottom: 14%;

    right: -10%;

}

.member_count_login {

    position: absolute;

    display: inline;

    background-color: #b4e419;

    color: #fff;

    border-radius: 50%;

    padding: 0 5px;

    line-height: 13px;

    border: 2px #93d141 solid;

    bottom: 14%;

    right: -10%;

}

.float_btn a img {

    width: 50px;

}

/*top*/

#gotop {

    display: none;

    position: fixed;

    right: 1%;

    bottom: 0px;

    cursor: pointer;

    z-index: 999;

}

#gotop img {

    width: 50px;

    height: auto;

}

@media screen and (max-width: 1000px) {

    .icon_flex {

        margin: 20px 0px;

    }

}

@media screen and (max-width: 768px) {

    #gotop img,

    .float_btn a img {

        width: 35px;

    }

    footer {

        font-size: 16px;

    }

    .footer>.work>.flex {

        flex-direction: column;

        text-align: center;

        margin: 0 auto;

    }

    .cart_count {

        padding: 0 1px;

        line-height: 18px;

        bottom: -5px;

        right: -10%;

        font-size: 10px;

        min-width: 18px;

        text-align: center;

    }

}

@media screen and (max-width: 376px) {

    footer h2>a {

        font-size: 45px;

    }

}

/* 內頁標題 */

.title_box {

    padding: 0 0 2rem;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    position: relative;

    flex-wrap: wrap;

}

.title {

    color: #191919;

    font-size: 40px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 4px;

    font-family: "Noto Serif TC", serif;

    margin-top: 6px;

    position: relative;

}

.subtitle {

    color: #be8a43;

    font-size: 13px;

    line-height: normal;

    letter-spacing: 3.64px;

    font-weight: 500;

    font-family: "Noto Serif TC", serif;

}

.breadcrumb_area {

    font-size: 0.8em;

    padding-left: 1em;

}

.breadcrumb_area a {

    color: #333;

}

.breadcrumb_area span {

    display: inline-block;

    max-width: 120px;

    text-align: center;

}

.breadcrumb_area a:hover {

    text-shadow: 0.2em 0.2em 0.2em #8e8e8e88;

    transition: 0.5s;

}

@media screen and (max-width: 1500px) {

    .icontact {

        padding: 30px 70px 30px 10px;

    }

    .footer_nav ul li {

        width: 90px;

    }

}

@media screen and (max-width: 1200px) {

    .breadcrumb_area {

        right: 5%;

    }

}

@media screen and (max-width: 1024px) {

    .breadcrumb_area {

        position: relative;

        display: block;

        width: 100%;

        text-align: right;

    }

    .breadcrumb_area span {

        vertical-align: top;

    }

}

@media screen and (max-width: 768px) {

    .title_box {

        padding: 0 0 1rem;

    }

    .title {

        font-size: 27px;

    }

    .subtitle {

        letter-spacing: 0.64px;

    }

    .breadcrumb_area {

        bottom: -15%;

    }

    .icontact {

        padding: 15px 35px 15px 10px;

    }

    .footer_logo {

        text-align: center;

    }

    .footer_nav ul li {

        width: 85px;

    }

    .footer_bottom {

        padding: 10px 36px 10px 4px;

        line-height: 1.5;

    }

}

@media screen and (max-width: 500px) {

    .breadcrumb_area {

        position: relative;

        display: block;

        width: 100%;

        text-align: right;

    }

}

/* 標題樣式 */

.titleBox {

    position: relative;

    text-align: center;

    margin: 5vh auto;

}

@media screen and (max-width: 500px) {

    .titleBox {

        margin: 2vh auto;

    }

}

/*返回*/

.back {

    text-align: right;

    width: 100%;

    padding: 4rem 0;

}

.back a {

    position: relative;

    display: inline-block;

    color: #fff;

    background: #be8a43;

    width: 150px;

    padding: 5px 20px;

    text-align: center;

    font-size: 16px;

}

.back a > span {

    position: absolute;

    top: 13px;

    right: 10px;

    -webkit-transform: translateY(-50%);

    transform: translateY(-50%);

    display: block;

    width: 15px;

    height: 15px;

    -webkit-transform: rotate(-45deg);

    transform: rotate(-45deg);

    border-right: 1px solid #fff;

    border-bottom: 1px solid #fff;

    -webkit-transition: all 0.3s;

    transition: all 0.3s;

}

.back a > span::before {

    content: "";

    position: absolute;

    top: 50%;

    left: 50%;

    -webkit-transform: translate(-50%, -50%) rotate(-45deg);

    transform: translate(-50%, -50%) rotate(-45deg);

    display: block;

    width: 50%;

    height: 1px;

    background: #fff;

}

.back a:hover {

    background: rgba(57, 57, 57, 0.75);

}

.back a:hover > span {

    -webkit-transform: translateX(-10px) rotate(-45deg);

    transform: translateX(-10px) rotate(-45deg);

}



@media screen and (max-width: 768px) {

    .back {

        padding: 2rem 0;

    }

}

/* trans_form */

.trans_choose>label {

    width: 150px;

}

.transtyle>label>img {

    width: 137px;

    margin-right: 5px;

}

.trans_box {

    padding: 0rem 2rem 1rem;

    width: 100%;

}

.transtyle {

    display: flex;

    justify-content: flex-start;

    align-items: flex-start;

    align-content: flex-start;

    width: 100%;

    padding: 10px 0px;

}

.transtyle .trans_word {

    width: 140px;

    text-align: left;

}

.transtyle input,

.transtyle textarea {

    width: calc(100% - 140px);

    font-size: 1rem;

    border: 1px #9fa0a0 solid;

    border-radius: 0.4rem;

    padding: 0.5rem 1rem;

}

.trans_choose {

    display: flex;

    width: 100%;

    padding: 0.5em 1.6em;

}

.trans_choose>label {

    width: 150px;

}

.transtyle>label>img {

    width: 137px;

    margin-right: 5px;

    height: 39px;

}

.trans_btn {

    text-align: center;

    margin: 2rem 0px;

}

.trans_btn .reset_btn,

.trans_btn .submit_btn {

    border: unset;

    display: inline-block;

    color: #fff !important;

    border: 0px var(--Omain_color) solid;

    background: var(--Omain_color);

    font-size: 18px;

    letter-spacing: 0;

    padding: 0.5rem 3rem;

    font-weight: normal;

    line-height: unset;

    margin: 0 1rem;

    cursor: pointer;

}

.trans_btn .reset_btn{

    background-color: #333;

}

.trans_btn .reset_btn:hover,

.trans_btn .submit_btn:hover {

    opacity: 0.8;

    text-decoration: none;

    transition: 0.5s;

}

@media screen and (max-width: 1366px) {

    .trans_btn .reset_btn,

    .trans_btn .submit_btn {

        font-size: 1.2em;

        padding: 0.5rem 3rem;

    }

}

@media screen and (max-width: 1024px) {

    .trans_info {

        margin-left: 0;

    }

    .trans_info>p {

        padding: 0;

    }

}

@media screen and (max-width: 768px) {

    .trans_btn .reset_btn {

        padding: 5px 25px;

        margin-right: 10px;

    }

    .trans_btn .submit_btn {

        padding: 5px 25px;

    }

    .trans_box {

        padding: 0rem 0rem 1rem;

    }

}

@media screen and (max-width: 600px) {

    .transtyle {

        flex-wrap: wrap;

    }

    .transtyle .trans_word,

    .transtyle .form_item {

        width: 100% !important;

    }

    .trans_word {

        text-align: left;

    }

}

@media screen and (max-width: 580px) {

    .trans_top {

        padding: 2rem 1rem;

    }

    .trans_info>h2 {

        font-size: 20px;

    }

    .trans_info>p {

        font-size: 14px;

    }

}

@media screen and (max-width: 550px) {

    .trans_btn .reset_btn,

    .trans_btn .submit_btn {

        margin: 0.5rem 5px;

    }

}

@media screen and (max-width: 500px) {

    .trans_btn {

        margin: 0.5rem 0px;

    }

    .trans_btn .reset_btn,

    .trans_btn .submit_btn {

        font-size: 16px;

    }

}

@media screen and (max-width: 430px) {

    .trans_choose {

        flex-wrap: wrap;

    }

    .trans_content {

        padding: 0 1rem;

    }

}

@media screen and (max-width: 380px) {

    .transtyle {

        padding: 0;

    }

    .trans_btn .reset_btn {

        margin-right: 0;

    }

    .trans_btn .reset_btn,

    .trans_btn .submit_btn {

        margin: 0.5rem 0.2rem;

        width: 45%;

    }

}

/* trans_form_top */

.trans_content_box {

    text-align: center;

}

.trans_content_box img {

    width: 80px;

}

.trans_content_box_title {

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 0 20px;

}

.trans_content_box_title>span {

    color: #5a5a5a;

    font-weight: 600;

    margin: 0 0 0 18px;

    font-size: 22px;

}

@media screen and (max-width: 768px) {

    .trans_content_box img {

        width: 60px;

    }

    .trans_content_box_title {

        margin: 0 0 12px;

    }

    .trans_content_box_title>span {

        margin: 0 0 0 6px;

        font-size: 18px;

    }

}

@media screen and (max-width: 575px) {

    .trans_content_box {

        margin: 1rem 0;

    }

    .trans_content_box_title>span {

        font-size: 16px;

    }

}

/*product_list*/

.product_box {

    display: flex;

    align-items: flex-start;

    justify-content: flex-start;

    width: 98%;

    margin: auto;

    margin-bottom: 5vh;

}

.product_left {

    width: 240px;

    border: 1px solid #e0e4e9;

    border-radius: 8px;

    background: #fff;

    position: sticky;

    top: 3vh;

    padding: 1em 0;

}

.product_left .search_box {}

.product_left .search_box>form {

    display: flex;

    justify-content: center;

    align-items: center;

    align-content: center;

    width: 90%;

    border-radius: 0.4rem;

    overflow: hidden;

    border: 1px solid #e0e4e9;

    margin: 10px auto;

}

.product_left .search_box>form>input {

    padding: 0 1rem;

    font-size: 1.2rem;

    border: 0;

    width: calc(100% - 1.5rem);

    height: 2.2rem;

    border-radius: 0;

}

.product_left .search_box>form>button {

    float: right;

    padding: 0;

    border: none;

    cursor: pointer;

    height: 1rem;

    width: 1rem;

    background: url(../images/website_image/images/search.png) no-repeat center;

    background-size: contain;

}

.product_right {

    width: calc(100% - 250px);

    margin-left: 10px;

    padding: 1em 0;

    border: 1px solid #e0e4e9;

    border-radius: 8px;

    background: #fff;

}

.product_right>p {

    font-weight: 600;

    font-size: 24px;

    text-indent: 1em;

    line-height: 2;

}

.product_right .brandcrumb {

    display: flex;

    justify-content: flex-start;

    align-items: center;

    align-content: center;

    padding-left: 3em;

    position: relative;

    font-size: 16px;

}

.product_right .brandcrumb::after {

    content: '';

    position: absolute;

    width: 1em;

    height: 1em;

    background: url(../images/website_image/images/pin.png) center center no-repeat;

    background-size: contain;

    top: 50%;

    left: 1em;

    transform: translate(0%, -50%);

}

.product_right .brandcrumb a {

    color: var(--Omain_color);

}

.product_right .product_classification_list>.row>div {

    padding: 5px;

    width: 20%;

}

.product_right .product_classification_list>.row>div>a {

    display: block;

    height: 100%;

    border: 1px solid #f1f1f5;

    background: #fff;

    border-radius: 8px;

    overflow: hidden;

    padding: 5px;

}

.product_right .product-list-title {

    padding: 0;

}

.product_right .product-list-title>.product-list-name {

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

    text-overflow: ellipsis;

    line-height: 1.8;

    font-size: 18px;

}

.product_classification_title {

    color: var(--Gtxt_color);

    font-size: 24px;

    font-weight: 600;

    padding: 15px 20px;

    margin: 20px auto 10px auto;

    text-align: center;

    background: #f3f3f3;

    width: 90%;

    position: relative;

}

.product_classification_title span {

    display: none;

}

.product_classification {

    width: 18%;

    text-align: center;

    border-radius: 15px;

    padding: 0 20px 12px;

}

.product_classification_list {

    width: 100%;

}

.product_classification_list>.row {

    margin: 0;

    display: flex;

    justify-content: flex-start;

    flex-wrap: wrap;

    align-items: stretch;

    align-content: flex-start;

}

.product_classification_list>.row>div {

    padding: 0 18px;

}

.product_classification_list>.row>.noProduct {

    display: block;

    text-align: center;

    margin: 0 auto;

}

.pli {

    list-style: none;

    padding: 8px 0;

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    width: 90%;

    margin: 0 auto;

    cursor: pointer;

    position: relative;

    font-size: 18px;

}

.pli a {

    color: #595757;

    font-size: 15px;

}

.pli > span{

    font-weight: bold;

}

.psul {

    display: none;

    margin: 10px 0 0;

    width: 100%;

}

.psul li {

    padding: 0px 0;

}

.psul li:hover{

    background: #f3f3f3;

}

.psul li a {

    font-size: 18px;

    color: #8d8d8d;

    display: block;

    background-image: url(../images/website_image/icon_logo.png);

    background-repeat: no-repeat;

    background-size: 15px auto;

    background-position: left 5px center;

    padding: 8px 5px 8px 25px;

    transition: 0.5s;

}

.psul li a:hover {

    color: #614E45;

    padding: 8px 5px 8px 35px;

    background-position: left 12px center;

}

.pli span>i {

    width: 0.8em;

    height: 0.8em;

    border-left: 3px solid #898989;

    border-bottom: 3px solid #898989;

    border-radius: 0 0 0 3px;

    position: absolute;

    top: 1em;

    right: 1em;

    transform: rotate(-45deg);

    transition: 0.3s;

}

.pli span>i.p_arrow_up {

    transform: rotate(135deg);

    transition: 0.5s;

}

.product-list-box {

    text-align: center;

    background: #fff;

    /* padding: 12% 12% 0; */

}

.product-list-pic {

    width: 100%;

}

.product-list-pic>img {

    width: 100%;

    height: 100%;

    object-fit: contain;

}

.product-list-title {

    color: #000;

    text-align: center;

    padding: 22px 0;

    font-weight: 600;

}

.product-list-size {

    color: var(--Omain_color);

    font-weight: 600;

}

.product-list-info {

    font-size: 16px;

}

.product-list-box:hover {

    opacity: 0.8;

    transition: 0.5s;

}

.co_box>.flex>div {

    width: 95%;

    margin: 5vh auto;

    max-width: 1024px;

}

.co_box>.flex>div {

    display: flex;

    justify-content: center;

    align-items: center;

    align-content: center;

    flex-wrap: wrap;

}

.co_box>.flex>div>div {

    width: 25%;

}

@media screen and (max-width: 1200px) {

    .product_box {

        width: 95%;

        margin: 0 auto 5vh auto;

    }

    .product_right .product_classification_list>.row>div {

        width: 33.333333%;

    }

}

@media screen and (max-width: 1024px) {

    .product_box {

        flex-wrap: wrap;

    }

    .product_classification {

        width: 100%;

        text-align: center;

        margin: 1rem 0 3rem 0;

    }

    .product_right .product_classification_list>.row>div {

        width: 50%;

    }

    .product_classification_list {

        width: 90%;

        margin: 0 auto;

    }

}

@media screen and (max-width: 768px) {

    .product_box {

        margin: 0 auto 1vh auto;

    }

    .product_left {

        width: 100%;

        position: relative;

        top: 0;

    }

    .product_classification_title span {

        display: inline-block;

        padding-left: 1em;

    }

    .product_left>.asul {

        display: none;

    }

    .pli {

        width: 80%;

    }

    .product_left .search_box>form>input {

        font-size: 1em;

    }

    .product_right {

        width: 100%;

        margin: 3vh auto;

    }

    .product-list-box {

        /* padding: 7% 7% 0; */

        width: 100%;

        margin: auto;

    }

    .product-list-pic {

        width: 100%;

    }

    .product_left,

    .product_right {

        width: 100%;

    }

    .product_classification_title span {

        display: inline-block;

    }

    .product_classification_title span>i {

        width: 0.8em;

        height: 0.8em;

        border-left: 3px solid #898989;

        border-bottom: 3px solid #898989;

        border-radius: 0 0 0 3px;

        position: absolute;

        top: 1em;

        right: 1em;

        transform: rotate(-45deg);

        transition: 0.3s;

    }

    .product_classification_title span>i..p_arrow_up {

        transform: rotate(135deg);

        transition: 0.5s;

    }

    .asul {

        display: none;

    }

    .product_right {

        margin: 30px 0 0;

    }

    .product_classification_title {

        font-size: 18px;

        padding: 10px 0;

        margin: 10px auto 5px auto;

    }

    .product_right .product-list-title>.product-list-name,

    .product_right>p {

        font-size: 18px;

    }

    .pli,

    .psul li a {

        font-size: 16px;

    }

}

@media screen and (max-width: 500px) {

    .product_classification {

        margin: 1rem 0 28px 0;

    }

    .product_right .product-list-title>.product-list-name,

    .product-list-title {

        font-size: 14px;

    }

}

@media screen and (max-width: 400px) {

    .product-list-title {

        padding: 5px 0;

    }

    .pli,

    .psul li {

        padding: 5px 0;

    }

}

@media screen and (max-width: 360px) {

    .product_classification_list>.row>div {

        max-width: 100%;

        flex: 0 0 100%;

        padding: 0 20px;

    }

}

/* product_detail */

.product_detail_lightbox {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: #000000db;

    z-index: 9999;

    display: none;

}

.product_detail_lightbox>img {

    max-width: 40vw;

    height: auto;

    object-fit: contain;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}

.product_detail_lightbox>span {

    color: #fff;

    font-size: 36px;

    position: absolute;

    top: 5%;

    right: 5%;

    cursor: pointer;

}

.product_detail_outer {

    padding: 1em;

}

.product_detail {

    display: flex;

    align-items: flex-start;

    width: 100%;

}

.product_detail_pic {

    cursor: pointer;

    width: 450px;

}

.product_detail_box {

    width: calc(100% - 450px);

    padding: 1rem 0 0 5%;

}

.product_detail .product_title {

    color: #333;

    font-weight: 600;

    font-size: 26px;

}

.product_detail_line {

    margin: 10px 0 40px;

    border-bottom: 1px solid var(--Omain_color);

}

.product_big_pic {

    width: inherit;

    object-fit: contain;

}

.product_small_pic {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    flex-wrap: wrap;

}

.product_small_pic img {

    height: 120px;

    width: calc(33.3333% - 10px);

    margin: 15px 5px;

}

.product_tag {

    padding: 5vh 0 2vh 0;

}

.product_tag span {

    font-size: 24px;

    color: var(--Omain_color);

    font-weight: 600;

    padding: 3px 0;

    border-left: 5px solid var(--Omain_color);

    padding-left: 0.8em;

}

.product_description {

    font-size: 16px;

    overflow: auto;

}

.product_description>table {

    width: 50%;

    min-width: 600px;

}

.product_description>table span {

    background: unset !important;

}

.product_description>table td {

    padding: 2px 1em 2px 5px;

    border: 1px solid #000;

}

.product_cart_form_row span {

    color: var(--Omain_color);

}

.product_cart_form_row_title {

    margin: 0 15px 0 0;

}

.product_cart_form_row select,

.product_cart_form_row input {

    width: 200px;

    height: 30px;

    border: 1px solid var(--Omain_color);

    border-radius: 0.4rem;

    padding: 0 0.5em;

    color: var(--Gtxt_color);

}

.product_cart_form_row.my-3 {

    padding: 10px 0;

}

.product_cart_form_btn {

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.product_cart_form_btn button {

    margin: 30px 0;

    width: calc(46%);

    color: #fff;

    border: none;

    padding: 10px 10px;

    font-size: 1rem;

    cursor: pointer;

}

.product_cart_form_btn button:hover {

    opacity: 0.8;

    transition: 0.5s;

}

.product_cart_form_btn .pro_btn_buy {

    background: var(--Omain_color);

}

.product_cart_form_btn .pro_btn_cart {

    background: #333;

}

@media screen and (max-width: 1200px) {

    .product_detail_pic {

        width: 380px;

    }

    .product_detail_box {

        width: calc(100% - 380px);

    }

}

@media screen and (max-width: 991px) {

    .product_cart_form_btn button {

        width: calc(48%);

    }

    .product_detail {

        flex-wrap: wrap;

    }

    .product_list_pic {

        margin: 0 auto;

        text-align: center;

        width: 450px;

    }

    .product_detail_pic {

        margin: auto;

    }

    .product_detail_box {

        width: 100%;

        padding: 1rem 0 0 0;

    }

    .product_tag {

        padding: 20px 0 10px 0;

    }

}

@media screen and (max-width: 768px) {

    .product_detail_left {

        width: 100%;

    }

    .product_detail_outer {

        width: 100%;

        margin: 20px auto 0;

    }

    .product_detail_left .asul {

        display: none;

    }

    .product_detail_left .product_classification_title span {

        display: inline-block;

    }

    .product_detail .product_title {

        font-size: 22px;

    }

    .product_tag span {

        font-size: 20px;

    }

    .product_description {

        font-size: 18px;

    }

    .product_detail_lightbox>img {

        max-width: 80vw;

    }

}

@media screen and (max-width: 600px) {

    .product_list_pic {

        width: 380px;

    }

}

@media screen and (max-width: 500px) {

    .product_list_pic {

        width: 100%;

    }

}

@media screen and (max-width: 450px) {

    .product_small_pic img {

        height: 90px;

        margin: 8px 5px;

    }

}

@media screen and (max-width: 400px) {

    .product_list_pic {

        width: 100%;

    }

    .product_tag span {

        font-size: 16px;

    }

    .product_description {

        font-size: 14px;

    }

}

/*more*/

.more {

    text-align: center;

    padding: 30px 0 30px;

    width: 100%;

}

.more a{

    -webkit-transition: all 0.3s;

    transition: all 0.3s;

}

.more a > span {

    position: relative;

    display: inline-block;

    color: #fff;

    background: #be8a43;

    width: 250px;

    padding: 10px 20px;

}

.more a > span > span {

    position: absolute;

    top: 18px;

    right: 10px;

    -webkit-transform: translateY(-50%);

    transform: translateY(-50%);

    display: block;

    width: 15px;

    height: 15px;

    -webkit-transform: rotate(-45deg);

    transform: rotate(-45deg);

    border-right: 1px solid #fff;

    border-bottom: 1px solid #fff;

    -webkit-transition: all 0.3s;

    transition: all 0.3s;

}

.more a > span > span::before {

    content: "";

    position: absolute;

    top: 50%;

    left: 50%;

    -webkit-transform: translate(-50%, -50%) rotate(-45deg);

    transform: translate(-50%, -50%) rotate(-45deg);

    display: block;

    width: 50%;

    height: 1px;

    background: #fff;

}

.more a:hover > span {

    background: rgba(57, 57, 57, 0.75);

}

.more a:hover > span > span {

    -webkit-transform: translateX(-10px) rotate(-45deg);

    transform: translateX(-10px) rotate(-45deg);

}

@media screen and (max-width: 768px) {

    .more {

        padding: 40px 0 90px;

    }

    .more span {

        font-size: 20px;

    }

}

@media screen and (max-width: 500px) {

    .more {

        padding: 40px 0 70px;

    }

    .more span {

        font-size: 18px;

    }

}

/*頁碼*/

.page {

    text-align: center;

    padding: 0px 10px 0px;

    font-size: 20px;

}

.page ul {

    padding: 0;

    margin: 0;

    list-style-type: none;

}

.page ul li {

    display: inline-flex;

    width: 2em;

    height: 2em;

    border: 1px solid #ccc;

    justify-content: center;

    align-items: center;

}

.page ul li>a {

    display: block;

    width: 100%;

    height: 100%;

    color: #000;

    line-height: 1.8;

    transition: 0.5s;

}

.page ul li>a:hover {

    background: rgba(49, 154, 206, 50%);

}

.page ul li .general {

    padding: 0px 10px;

    margin: 0px 18px;

    display: block;

    text-decoration: none;

    color: #595757;

}

.page ul li .select {

    background: var(--Omain_color);

    color: #fff;

}

.page-arrow {

    padding: 1px 8px;

    display: block;

    text-decoration: none;

    color: #fff !important;

    background: #614E45 !important;

    border-radius: 50%;

    margin: 0px 18px;

}

@media screen and (max-width: 768px) {

    .page {

        padding: 15px 10px 40px;

    }

}

@media screen and (max-width: 500px) {

    .page {

        font-size: 16px;

    }

    .page ul li .general,

    .page-arrow {

        margin: 0px 5px;

    }

    .page-arrow {

        padding: 1px 6px;

    }

}

/* about */

@media screen and (max-width: 768px) {

}

/* customized */

.customized_box {

    display: flex;

    justify-content: flex-start;

    align-items: flex-start;

    padding: 3% 0;

}

.customized_box_pic {

    width: 47%;

}

.customized_box_pic:nth-child(2) {

    margin: 0 60px 60px 0;

}

.customized_box_content {

    width: 53%;

    position: relative;

    height: 520px;

}

.customized_box:nth-child(2) .customized_box_content {

    height: 440px;

}

.customized_box_pic {

    margin: 0 0 60px 60px;

}

.customized_box_pic>img {

    box-shadow: -60px 60px #bdbdbb;

}

.customized_box_pic:nth-child(2)>img {

    box-shadow: 60px 60px #bdbdbb;

}

.customized_box_content>img {

    position: absolute;

    bottom: 0;

    right: 0;

}

.customized_box:nth-child(2) .customized_box_content>img {

    right: 14%;

}

.customized_title {

    color: #614E45;

    padding: 20px 40px 8px;

    font-weight: 600;

    font-size: 22px;

    background: url(../images/website_image/customized_border.png) no-repeat;

    background-size: cover;

    height: 70px;

    width: 235px;

    display: inline-block;

    text-align: center;

}

.customized_tag {

    background: #614E45;

    color: #fff;

    padding: 4px 16px;

}

.customized_notice {

    padding: 3rem 10%;

    border: 1px #614E45 solid;

    margin: 60px 0 0;

    text-align: center;

}

.customized_notice_text {

    margin: 0 auto 15px;

    text-align: center;

}

.customized_notice_text span {

    background: #614E45;

    color: #fff;

    padding: 4px 16px;

    text-align: center;

    font-size: 22px;

}

.empty {

    height: 150px;

}

@media screen and (max-width: 1150px) {

    .customized_box {

        padding: 3% 3%;

    }

    .customized_box_pic {

        width: 40%;

    }

    .customized_box_content {

        width: 60%;

        padding: 0 0 0 5%;

    }

    .customized_box:nth-child(2) .customized_box_content {

        height: 32vw;

    }

    .customized_box_pic {

        margin: 0 0 40px 40px;

    }

    .customized_box_pic:nth-child(2) {

        margin: 0 40px 40px 0;

    }

    .customized_box_pic>img {

        box-shadow: -40px 40px #bdbdbb;

    }

    .customized_box_pic:nth-child(2)>img {

        box-shadow: 40px 40px #bdbdbb;

    }

    .customized_notice {

        width: 90%;

        margin: 60px auto 0;

    }

}

@media screen and (max-width: 768px) {

    .customized_box {

        flex-wrap: wrap;

    }

    .customized_box_pic {

        width: 70%;

        text-align: center;

        order: -1;

        margin: 0 auto 60px !important;

    }

    .customized_box_content {

        width: 100%;

    }

    .customized_box_content {

        height: 430px;

    }

    .customized_box:nth-child(2) .customized_box_content {

        height: 40vw;

    }

    .customized_title {

        font-size: 20px;

        padding: 12px 10px 9px;

        height: 54px;

        width: 180px;

    }

    .customized_box_content>img {

        width: 130px;

    }

    .customized_box:nth-child(2) .customized_box_content>img {

        right: 0;

    }

    .customized_notice_text span {

        font-size: 20px;

    }

    .empty {

        height: 100px;

    }

}

@media screen and (max-width: 550px) {

    .customized_box_content>img {

        width: 90px;

    }

}

@media screen and (max-width: 400px) {

    .customized_box {

        padding: 10% 3%;

    }

    .customized_box_pic {

        width: 70%;

    }

    .customized_box_pic {

        margin: 0 auto 20px !important;

    }

    .customized_box_pic>img {

        box-shadow: -20px 20px #bdbdbb;

    }

    .customized_box_pic:nth-child(2)>img {

        box-shadow: 20px 20px #bdbdbb;

    }

    .customized_title {

        font-size: 16px;

        padding: 8px 10px 9px;

        height: 45px;

        width: 150px;

    }

    .customized_notice_text span {

        font-size: 18px;

    }

    .empty {

        height: 70px;

    }

}

/* products */

.products_title {

    text-align: center;

}

.products_box_outer {

    margin: 1.5rem 0 0;

}

.products_box {

    text-align: center;

    padding: 0 1.5%;

}

.products_box p {

    font-weight: 600;

    color: #614E45;

    padding: 5px 0 40px;

    font-size: 22px;

    text-align: center;

}

@media screen and (max-width: 1200px) {

    .products_box_outer {

        padding: 0 3%;

    }

}

@media screen and (max-width: 350px) {

    .products_box p {

        padding: 0px 0 22px;

        font-size: 18px;

    }

}

/* index */

/* 通用設定 */

.edit {

    padding: 3vh 0;

}

.edit>.container {

    max-width: 100%;

    padding-right: 0;

    padding-left: 0;

    margin-right: 0;

    margin-left: 0;

}

.edit>.container .content {

    position: relative;

    font-size: 20px;

    line-height: 1.8;

    width: 95%;

    max-width: 1366px;

    margin: 0 auto;

    background: #fff;

    border-radius: 8px;

    border: 1px solid #e0e4e9;

}

@media screen and (max-width: 1024px) {

    .edit>.container .content {

        font-size: 18px;

    }

}

@media screen and (max-width: 768px) {

    .edit>.container .content {

        font-size: 16px;

    }

}

@media screen and (max-width: 500px) {

    .edit>.container .content {

        font-size: 14px;

    }

}

.edit>.container .flex {

    display: flex;

    justify-content: center;

    align-items: center;

    align-content: center;

}

.edit>.container h3 {

    font-size: 2em;

    font-weight: 600;

    line-height: 1.8;

}

.edit>.container h2 {

    font-size: 1.4em;

    line-height: 1.8;

}

.postBox {

    position: relative;

    line-height: 2;

    padding: 1em 3.5em;

    height: 3.5em;

    overflow: hidden;

    transition: 0.5s;

    cursor: pointer;

}

.postBox.down {

    height: auto;

}

.postBox::after {

    content: '';

    width: 0.8em;

    height: 0.8em;

    border-left: 3px solid #898989;

    border-bottom: 3px solid #898989;

    border-radius: 0 0 0 3px;

    position: absolute;

    top: 1em;

    right: 1em;

    transform: rotate(-45deg);

    transition: 0.3s;

}

.postBox.down::after {

    transform: rotate(135deg);

}

.postBox>img {

    position: absolute;

    width: 2em;

    top: 1em;

    left: 1em;

}

@media screen and (max-width: 768px) {

    .postBox {

        padding: 1em 3em;

    }

    .postBox>img {

        width: 1.5em;

    }

}



/*首頁*/

.homebox{

    width: 100%;

    display: flex;

    flex-wrap: wrap;

    margin-bottom: 30px;

    justify-content: center;

    padding: 0 10px;

}

.homebox .item {

    width: 30%;

    text-align: center;

    margin: 0 1.5%;

}

.homebox .item .img_icon {

    display: inline-flex;

    flex-direction: column;

    align-items: center;

    background-color: #614E45;

    padding: 40px 30px;

    border-radius: 20px;

    width: 100%;

    max-width: 260px;

}

.homebox .item .img_icon .img {

    width: 100px;

    height: 100px;

    display: flex;

    justify-content: center;

    align-items: center;

}

.homebox .item .img_icon img{

    max-width: 100px;

    max-height: 100px;

}

.homebox .item:nth-child(1) img{

    max-width: 85px;

}

.homebox .item .img_icon p {

    font-size: 24px;

    font-weight: bold;

    margin-top: 15px;

    color: #222;

    text-shadow: 2px 2px 2px #fff;

    background-color: rgb(221, 199, 190);

    padding: 2px 20px;

    line-height: 1.5;

    border-radius: 4px;

    border-bottom: 4px solid #8F7A6F;

}

@media screen and (max-width: 768px) {

.homebox .item {

    width: 97%;

    margin: 10px 1.5%;

}

}