@charset "utf-8";
@import url("reset.css");
@import url("loading.css");
@import url("fontawesome_all.css");
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> Main <<<------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/



html { height:100% }
body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; -webkit-text-size-adjust:none; font-size:15px; overflow-x:hidden; overflow-y:scroll }
body, td, th { font-size:12px; font-family: 'Roboto Condensed', sans-serif; }
.iframe_ch { display:none }
.w100{ width:100%; }
.middle{ vertical-align:middle; }

.btn1{ color:#a89d93; cursor:pointer; }
.btn1:before{content:url(../../images/btn-icon-1.png);vertical-align: -20%;margin: 0 8px;}
.btn1:after{content:url(../../images/btn-icon-2.png);vertical-align: -0%;margin: 0 0 0 12px;}
.btn1:hover{ -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease}
 
.btn2{color: #d3474d !important;font-size:15px !important;width:auto !important;padding: 15px 40px;border: 1px solid #d3474d;cursor:hand;cursor:pointer;display: inline-block;}
.btn2:hover{ color:#d3474d !important; background:#fcdadc; border:1px solid #d3474d; -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease}
 
input:not([type="radio"]):not([type="checkbox"]),
select,
textarea {
    -ms-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -webkit-appearance: none;
}

.p_btn{ width:100%; margin:100px 0 35px 0; text-align:right; }
 
/*網頁大標題*/
.common-title{/* text-align: center; */font-size: 40px;color: #1c3464;/* font-weight:bold; */letter-spacing: 1px;line-height: 30px;padding: 0vw 0px 2.5vw 0vw;margin: 0 0 0 0;}
.common-title span{display: block;line-height: 30px;text-transform: uppercase;font-size: 20px;padding-bottom: 15px;color: #ad9b6d;/* font-weight: bold; */letter-spacing: 1px;font-family: 'Noto Sans TC', sans-serif;}
.common-title > .line{background: #c8bfb0;width: 250px;height: 1px;margin: 20px auto 20px auto;animation:1s ease-in-out 0.8s 1 widthGroup-1;}

.common-title2{width: 100%;text-align: center;font-size: 30px;color: #8d6013;font-weight:bold;letter-spacing: 10px;line-height: 30px;padding: 2vw 10px 2vw 10px;margin: 0 auto 0 auto;}
.common-title2 span{display: block;line-height: 30px;text-transform: uppercase;font-size: 30px;padding-bottom: 15px;color: #dcbc8a;/* font-weight: bold; */letter-spacing: 3px;font-family: 'Noto Sans TC', sans-serif;}

.pager{width:100%;margin:50px auto;text-align: center; font-size:16px;}

.editor {
    overflow: hidden;
    padding: 20px 0px;
    line-height: 30px;
    font-size: 16px;
    width: 100%;
    letter-spacing: 1px;
}

.gotop{ position:fixed; bottom:100px; right:20px; z-index:99; width:70px; }

.text-clamp {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
}

.image-fit {
    width: 100%; /* 確保圖片寬度填滿容器 */
    height: auto; /* 高度自動調整以保持比例 */
    object-fit: cover; /* 使圖片充滿容器並裁剪以保持比例 */
    object-position: center; /* 將圖片居中顯示 */
}
	
/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Common <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

#wrapper{ width:100%; margin:0 auto; }
#wrapper .common_wrap{max-width:1400px;min-height:800px;margin: 0px auto 0 auto;}

/*子選單*/
.submenu1{font-size:18px !important;overflow:hidden;background-color: rgba(232, 220, 208, 0.7);/* border:1px solid #EBEBEB; */position:absolute;margin-left: -25px;width: 130px;top: 130px;box-shadow:2px 2px 8px rgba(15%,15%,40%,0.1);border-bottom-left-radius: 15px;border-bottom-right-radius: 15px;}
.submenu1 a{
 font-size:18px !important;
 color: #776e64!important;
 font-weight:normal !important;
 display:block !important;
 /* border-bottom:1px solid #dedede; */
 padding: 11px 25px;
 -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease;
 }
.submenu1 a:hover{ color:#a98579 !important; /*background:#d3474d !important;*/ }

nav { -webkit-transition: all .4s ease;

 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease
}
.header_box { position: fixed; top: 0; left: 0; z-index: 4; padding: 0; width: 100%; background-color: #fff }
.header_box_main {max-width:1400px;/* overflow: hidden; */margin-right: 70px;margin-left: 70px;margin: 0px auto 0px auto;}
.header_box_line { /*padding-bottom: 20px;*/ /*border-bottom: 2px solid #fff;*/ }
.header_box .header_box_main .logo_box {
 position: relative;
 -webkit-transition: all .3s ease;
 -moz-transition: all .3s ease;
 -o-transition: all .3s ease;
 transition: all .3s ease;
 -ms-transition: all .3s ease;
}
.header_box .header_box_main .menu {
 margin-top: 10px;
 margin-bottom: 0px;
 height: 100%;
 line-height: 25px;
 /*text-transform: uppercase;*/
 font-weight: 700;
 font-size: 14px;
 -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease;
}
.header_box .header_box_main .menu { animation: 1s ease-out 0s 1 transiTop20; float: right!important }
.header_box .header_box_main .menu li {float: left;list-style: none;padding-right: 15px;padding-left: 15px;padding-bottom: 15px;}
.header_box .header_box_main .menu li a { }
.header_box .header_box_main .menu li img { padding:0 3px; }
.header_box .header_box_main .menu li a:hover { color: #a98579 }
/*原始選單*/
.header_box_scroll1 { background-color:#e8dcd0; top:-20px; }
.header_box_scroll1 .menu { margin-top: 35px; margin-bottom: 10px }
.header_box_scroll1 .menu li a {
 color: #776e64;
 font-size:18px;
 font-weight: normal;
 letter-spacing: 1px;
 text-decoration:none;
 -webkit-transition: all .2s ease-in-out;
 -moz-transition: all .2s ease-in-out;
 -o-transition: all .2s ease-in-out;
 transition: all .2s ease-in-out;
 -ms-transition: all .2s ease-in-out;
}

.header_box_scroll1 .logo-big{
	display:none;
 position: absolute;
 margin-top: 30px;
 max-width: 558px;
 opacity: 1;
 /*
 -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease;
 */
}
.header_box_scroll1 .logo-mid {
 position: absolute;
 margin-top: 30px;
 margin-left: 5px;
 max-width: 558px;
 opacity: 1;
 /*
 -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease;
 */
}
.header_box_scroll1 .logo-small { opacity: 0;
 /*
 -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease
 */
}
/*捲軸往下的變換選單*/
.header_box_scroll2 {padding: 0px 0;height: 75px;background: rgba(232, 220, 208);/* -webkit-box-shadow: 0 1px 4px rgba(211, 71, 77, .15); */-moz-box-shadow: 0 1px 4px rgba(211, 71, 77, .15);/* box-shadow: 0 1px 4px rgba(211, 71, 77, .15); */}
.header_box_scroll2 .menu { margin-top: 0; margin-bottom: 0; height: 100% }
.header_box_scroll2 .menu > li > a {
 /* color: #fff; */
 -webkit-transition: all .2s ease-in-out;
 -moz-transition: all .2s ease-in-out;
 -o-transition: all .2s ease-in-out;
 transition: all .2s ease-in-out;
 -ms-transition: all .2s ease-in-out
}
.header_box_scroll2 .logo-big, .header_box_scroll2 .logo-mid { opacity: 0; -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease
}
.header_box_scroll2 .logo-small {
 position: absolute;
 margin-top: -7px;
 margin-left: 10px;
 width: 115px;
 opacity: 1;
 -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease;
}


/*語系切換*/
#nav{position:absolute;right: 0px;top: 20px;z-index:9999;color: #3d4e59;font-size:15px;background: #AD9B6D;min-width: 470px;/*-webkit-transition: all .4s ease;-moz-transition: all .4s ease;-o-transition: all .4s ease;transition: all .4s ease;-ms-transition: all .4s ease;*/}
#nav span{ padding:5px 5px; display:inline-block; }
#nav a{color: #262e32;text-decoration:none;letter-spacing:2px;}
#nav a:hover{ text-decoration:underline; }


.overlay1 {/*margin-top:80px;*/height: 100%;width: 0%;position: fixed;overflow:auto;top: 0;right: 0;background-color: rgba(173, 155, 109, 0.9);overflow:auto;transition: 0.5s;z-index: 4;}
.overlay1-content { position: relative; top: 0%; width: 100%; text-align: center; }
.overlay1 a { padding: 8px; text-decoration: none; font-size: 36px; color: #818181; display: block; transition: 0.3s; }
.overlay1 a:hover, .overlay1 a:focus { color: #f1f1f1; }
.overlay1-title { width:100%; height:50px; margin-top:80px; }
.overlay1-title span { color:#FFF; border-bottom:2px solid #FFF; font-size:20px; letter-spacing:1px; }
.overlay1_options { width:80%; margin:0 auto; }
.overlay1_item { position:relative; text-align:left; padding:15px 5px; color:#EAEAE8; letter-spacing:1px; border-bottom:1px solid #d2d2d2; font-size:15px; letter-spacing:1px; cursor:hand; cursor:pointer; }
.overlay1_item a { font-size:15px; color:#fff; font-weight:bold; }
.overlay1_item a:hover { color:#e8dcd0; }
.overlay1_item span {position:absolute;right:0;top: 2px;padding: 20px 20px;font-size:18px;}
/*.overlay1_item:hover{ background:#000; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; }*/
.overlay1_event {width:100%;display:none;text-align:left;padding: 20px 5px;box-sizing:border-box;letter-spacing:1px;}
.overlay1_event a { display:block; font-size:15px; color:#fff; }
.overlay1_event a:hover { color:#e8dcd0; text-decoration:none; }

.show-1, .show-2, .show-3{ opacity:0; }


.common_title{border-right: 10px solid #d3474d;padding:0 20px;color: #d3474d;font-size:40px;line-height:50px;font-weight:bold;text-align:right;letter-spacing:3px;}
.common_title_s{ float:right; color:#80a9b8; font-size:16px; letter-spacing:2px; max-width:570px; text-align:right; line-height:30px; padding:20px 0; }

.inner_title{color:#252F31;font-size:30px;letter-spacing:2px;text-align:center;margin: 50px 0 100px 0;}
 
.sitemap{ text-align:right; line-height:25px; padding:10px 10px;}
.sitemap a{ color:#797979; }


.mark_product{padding-top: 90px;}

@media screen and (max-width: 1400px) {
	.common_title{ text-align:left; border-right:0; border-left:10px solid #252F31; }
	.common_title_s{ text-align:left; float:left; }
	.none1400{ display:none; }
}
@media screen and (max-width: 1024px) {
	
}

@media screen and (max-width: 768px) {
	.header_box_scroll1 .logo-big, .header_box_scroll1 .logo-mid{margin-top: 25px;margin-left: 5px;}
	.header_box_scroll1 .logo-big{ display:none; }
	.inner_title{margin: 0 0 30px 0;}
	.mark_product{ padding-top:30px; }	
}

@media screen and (max-width: 480px) {
	
	#wrapper{/* padding-top:150px; */}
	.common_title{ font-size:30px; }
	.p_btn{ margin-top:30px; }
}


/* Footer 主體樣式 */
#site_footer {
    width: 100%;
    background-color: #f6f4f1; /* 背景色可根據需求調整 */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}


/*內頁banner*/
#banner-box{width:100%;/*max-width: 1200px;*/margin: 75px auto 0 auto;overflow:hidden;background:#f1f1f1;}
#banner-inner .overlay{display:flex;align-items:center;/* justify-content: center; */width:100%;max-width: 1400px;margin: 0 auto;padding: 0 1vw 0 5vw;height: 100%;/* background-color: rgba(0, 0, 0, 0.5);*/}
#banner-inner .title{opacity:0;text-align:center;color:#ffffff;font-size: 30px;font-weight: bold;letter-spacing: 5px;padding: 0 0 10px 0;text-shadow: 2px 2px 2px #101010;}
#banner-inner .common-title{color: #c0aca5;/* text-shadow: 2px 2px 2px #999999; */font-size: 30px;text-shadow: 1px 1px 1px #CCCCCC;}
#banner-inner .common-title span{
    color: #ad9b6d;
    /* text-shadow: 2px 2px 2px #999999; */
    font-size: 28px;
    text-shadow: 1px 1px 1px #CCCCCC;
}
#banner-inner .common-title span:before{filter: brightness(0) invert(1);}
#banner-inner .common-title span:after{
    filter: brightness(0) invert(1);
}


/* Footer 內部容器 */
.footer_container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
}

/* 左側區塊樣式 */
.footer_left {
    width: 40%; /* 左邊區塊的寬度可根據需要調整 */


    display: flex;
    justify-content: flex-end;
    /* align-items: center; */
    background: #bfb59b;
}

.footer_logo {
    max-width: 100%;
    height: auto;
    padding: 20px 50px 0 50px;
}

/* 右側區塊樣式 */
.footer_right {
    width: 60%; /* 右邊區塊的寬度可根據需要調整 */
    display: flex;
    flex-direction: column;
    align-items: self-start;
    color: #6c757d; /* 文字顏色 */
    line-height: 1.6;
    letter-spacing: 1px;
    font-size: 15px;
}

/* 新增的內容容器，限制最大寬度 */
.footer_right_content {
    max-width: 800px;
    width: 100%;
    padding: 50px 30px 10px 30px;
    box-sizing: border-box;
    color: #81966e;
}

.footer_right p {
    margin: 0; /* 去除段落間的間距 */
    /* padding: 5px 0; */ /* 添加上下內邊距 */
}

.footer_right p.copyright{ color:#cfb094; }
.footer_right p.copyright a{ color:#cfb094; text-decoration:none; }
.footer_right p.copyright a:hover{ text-decoration:underline; }

.footer_right .designed_by {
    margin-top: 10px;
    align-self: flex-end; /* 右對齊 */
    color: #b39b86; /* 可根據設計需求調整顏色 */
    text-align: right;
    font-size: 15px;
    letter-spacing: 1px;
}

.footer_right .designed_by a{ color: #b39b86; text-decoration:none; }
.footer_right .designed_by a:hover{ text-decoration:underline;}

/* 響應式設計 */
@media (max-width: 768px) {
    .footer_container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        /* padding: 10px 0; */ /* 減少上下內邊距 */
    }

    .footer_left, .footer_right {
        width: 100%;
        text-align: center;
        justify-content: center;
        align-items: center; /* 內容居中 */
    }

    .footer_right {
        align-items: center; /* 小螢幕上內容居中 */
    }

    .footer_right .designed_by {
        align-self: center; /* 小螢幕上居中顯示 */
        text-align: center; /* 文字居中 */
    }
	.footer_right_content {
		padding: 30px 30px 10px 30px;
	}	
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Index <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

/*News*/
#index-activity{width:100%;padding: 40px 20px 40px 20px; background-color:#f6f4f1;}
#index-activity .wrap{display:flex;flex-wrap: wrap;width:100%;max-width: 1400px;margin:0 auto;}

#activity-list{display:flex;/* justify-content: space-between; */flex-wrap:wrap;width:100%;overflow:hidden;text-align: center;padding-bottom: 0vw;/* border-bottom: 1px dashed #878787; */}
#activity-list .items{display: inline-block;vertical-align: top;flex: 0 31%;margin: 10px 1% 30px 1%;box-sizing:border-box;text-align:center;/* background:#ffffff; */}
#activity-list .items .date{position:absolute;right: 0;top: 0;display:inline-block;color:#ffffff;font-weight:bold;font-size: 20px;letter-spacing: 2px;background: linear-gradient(to bottom, #ccbaa1, #a68e6e);padding: 28px 18px;}
#activity-list .items .date span{display:block;font-size: 35px;/* font-weight: normal; */}

.activity-detail-title{ color:#bc8e8e; font-size:18px; border-bottom:1px solid #bc8e8e; margin:30px 0; padding:0 0 10px 0; }
#activity-list .photo-mask-content span{ display:block; color:#ffffff; font-size:16px; line-height:22px; }
#activity-list .photo-mask-content img{filter: brightness(200%);}
#activity-list .photo-mask-content span i{ font-size:30px; }
#activity-list .items .title{
    font-size: 16px;
    /* font-weight: bold; */
    text-align: center;
    padding: 15px 0 15px 0;
    margin: 15px 0;
    line-height: 25px;
    max-height: 65px;
    /* border-bottom: 1px solid #d3af78; */
}
#activity-list .items .title a{font-size: 16px;color:#000000;text-decoration:none;letter-spacing: 1px;}
#activity-list .items .content{
    font-size: 15px;
    text-align: left;
    line-height: 20px;
    color: #606060;
}
#index-activity .btn-3{margin: 10px auto;}
#index-activity .pager{text-align:right;padding: 0 2%;}




@media screen and (max-width:800px) {
	#index-activity{padding: 40px 20px 0px 20px;}
	#activity-list .items{flex:0 46%;margin: 20px 1.5%;}	
}
@media screen and (max-width:480px) {
	#activity-list .items{flex:0 100%;margin: 20px 0 0 0%;}	
}


/*Product*/
#index-product {max-width:1500px;/* min-height:1000px; */overflow:hidden;margin:0 auto;padding: 50px 10px 50px 10px;box-sizing: border-box;}
#index-product .common-title{ text-align:center; }
#index-product .pager{text-align:right;padding: 0 2%;}
#index-product .title1{color:#140000;font-size:16px;margin: 20px 0;}
#index-product .title2{color:#a29988;font-size:22px;margin: 10px 0 20px 0;}

/*About*/
/* 外部容器設定 */
#index_about {
    width: 100%;
    display: flex;
    justify-content: center;
    /* padding: 20px; */
    box-sizing: border-box;
}

/* 內部容器設定 */
#index_about .index_about_contain {
    display: flex;
    width: 100%;
    /* max-width: 1200px; */
    box-sizing: border-box;
    /* height: 500px; */
}

/* 左邊區塊設定 */
#index_about .left-block {
    width: 50%;
    background:url(../../images/about-bg1.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end; /* 確保內容從左側對齊 */
    min-height: 100%; /* 保持區塊的最小高度 */
    padding: 70px 10% 0 0;
}
#index_about .left-block .contain{max-width:370px;padding: 30px 0 0px 0;}

/* 文字樣式 */
#index_about .left-block h2 {
    font-size: 1.5rem; /* 使用rem確保文字大小的可調整性 */
    color: #6c757d;
    margin-bottom: 10px;
    font-weight: 400;
    line-height: 1.2;
}

#index_about .left-block h3 {
    font-size: 2.25rem; /* 使用rem來保持一致性 */
    color: #27384b;
    margin-bottom: 20px;
    font-weight: 700;
    line-height: 1.3;
}

#index_about .left-block p {
    font-size: 18px;
    color: #333;
    margin-bottom: 20px;
    line-height: 1.6;
    padding: 0 10px;
}

#index_about .left-block .read-more {
    font-size: 1rem;
    color: #82b400;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    font-weight: 600;
}

#index_about .left-block .read-more::after {
    content: ' →';
    margin-left: 5px;
    transition: margin-left 0.3s ease; /* 增加動態效果 */
}

#index_about .left-block .read-more:hover::after {
    margin-left: 10px; /* 增加動態效果的明顯性 */
}

/* 右邊區塊設定 */
#index_about .right-block {
    width: 50%;
    background-image: url(../../images/about-bg2.jpg); /* 替換為實際圖片路徑 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100%; /* 保持區塊的最小高度 */
    display: flex;
    align-items: center;
    justify-content: center;
}

#index_about .pager{text-align: left;padding: 0 2%;}

/* 響應式設計 */
@media (max-width: 768px) {
	
    #index_about .index_about_contain {
        flex-direction: column;
    }

    #index_about .left-block, #index_about .right-block {
        width: 100%;
        min-height: auto; /* 取消最小高度以適應較小螢幕 */
    }
	#index_about .left-block .contain{max-width:none;}
    #index_about .left-block {
        padding: 20px;
    }
}

/*Story*/
#index_story {
    width: 100%;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    position: relative;
    background: url(../../images/story-bg.jpg) no-repeat top;
    /* background-size: cover; */
    /* background-position: center; */
    background-repeat: no-repeat;
    min-height: 635px;
    padding: 0px 0;
}

/* 內部容器設定 */
#index_story .index_story_contain {
    display: flex;
    width: 100%;
    max-width: 1000px;
    box-sizing: border-box;
    min-height: 600px;
    position: relative;
}

/* 左邊區塊設定 */
#index_story .left-block {
    width: 10%; /* 左邊區塊的寬度 */
    display: flex;
    justify-content: flex-start;
    align-items: end;
    background-color: transparent; /* 如果需要可以調整背景色 */
}

/* 垂直文字設定 */
#index_story .vertical-text {
    transform: rotate(-90deg); /* 文字向左旋轉90度 */
    font-size: 1.5rem;
    color: #27384b; /* 文字顏色 */
    /* font-weight: 700; */
    text-align: left;
    transform-origin: left top; /* 調整旋轉的基準點 */
    white-space: nowrap; /* 防止文字自動換行 */
}

/* 右邊區塊設定 */
#index_story .right-block {
    width: 80%; /* 右邊區塊的寬度 */
    position: relative;
    display: flex;
    align-items: self-start;
    justify-content: center;
     /* 替換為實際圖片路徑 */
    padding: 190px 0 0 50px;
}

/* 內容設定 */
#index_story .right-block .content {
    font-size: 18px;
    padding: 20px;
    /* background-color: rgba(255, 255, 255, 0.8); */ /* 半透明背景，確保文字可讀性 */
    max-width: 610px; /* 最大寬度 */
    /* box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); */
}

#index_story .right-block .content h2 {
    font-size: 20px;
    color: #333;
    margin-bottom: 20px;
    line-height: 1.3;
}

#index_story .right-block .content p {
    font-size: 18px;
    color: #333;
    margin-bottom: 20px;
    line-height: 1.6;
}

#index_story .right-block .content .read-more {
    font-size: 1rem;
    color: #82b400;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    font-weight: 600;
}

#index_story .right-block .content .read-more::after {
    content: ' →';
    margin-left: 5px;
    transition: margin-left 0.3s ease;
}

#index_story .right-block .content .read-more:hover::after {
    margin-left: 10px;
}

#index_story .pager{ text-align:left; }

/* 響應式設計 */
@media (max-width: 768px) {
    #index_story .index_story_contain {
        flex-direction: column; /* 讓內容堆疊 */
    }

    #index_story .left-block,
    #index_story .right-block {
        width: 100%;
    }

    #index_story .left-block {
        justify-content: center; /* 讓標題位於上方中央 */
        align-items: center; /* 垂直居中 */
        padding: 20px 0; /* 上下增加間距 */
    }

    #index_story .vertical-text {
        text-align: center; /* 讓文字在小螢幕上居中 */
        writing-mode: horizontal-tb; /* 垂直文字轉為水平排列 */
        transform: none; /* 取消旋轉 */
        font-size: 1.5rem; /* 根據需要調整字體大小 */
    }

    #index_story .right-block {
        padding: 20px; /* 為右邊區塊增加適當的內邊距 */
        align-items: flex-start; /* 讓內容從頂部開始 */
    }

    #index_story .right-block .content {
        max-width: 100%; /* 讓內容區塊全寬 */
        padding: 0; /* 移除內邊距，以便內容更貼合螢幕 */
    }
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Product <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

#product-list{width:100%;padding: 40px 20px 40px 20px; }
#product-list .wrap{display:flex;flex-wrap: wrap;width:100%;max-width: 1200px;margin:0 auto;}
#product-list .caption{font-size:20px;margin: 25px 0 0 0;font-weight: bold;}

#category-list {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* gap: 30px; */ /* 調整兩個分類之間的距離 */
    margin: 3vw 0;
}

.category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    border-left: 1px solid #dbc8b7;
    padding: 0 50px;
}


.category-item:last-child {
    border-right: 1px solid #dbc8b7;
}

.category-title {
    font-size: 16px; /* 調整文字大小 */
    color: #ad9b6d; /* 根據圖片中的顏色調整 */
}

.category-title{font-size: 20px;color: #ad9b6d;text-decoration:none;padding: 0 0 3px 0;border-bottom:3px solid transparent;}
.category-title:hover{ border-bottom:3px solid #9d8a6e; }

.bx-wrapper .bx-pager {
	text-align: center;
	margin-top: 10px;
}

.bx-wrapper .bx-pager.bx-default-pager a {
	background: #ffffff;
	text-indent: -9999px;
	display: inline-block;
	width: 15px;
	height: 15px;
	border: 1px solid #ccc;
	margin: 0 5px;
	outline: none;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}

.bx-wrapper .bx-pager.bx-default-pager a.active {
	background: #666;
}

.bxslider img {
	width: 100%;
	display: block;
}

.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto{ bottom:-40px !important; }

.product-list {

	width: 100%;
	max-width: 1200px;
	margin: 20px auto;
	display: flex;
	background-color: #fff;
	/* overflow: hidden; */
}

.bxslider-container {
	width: 40%;
	padding: 5px 20px;
	box-sizing: border-box;
	overflow: hidden;
}

.bxslider img {
	width: 100%;
	display: block;
	/* border-radius: 10px; */
}

.bx-pager-wrapper {
	text-align: center;
	margin-top: 10px;
}

.bx-pager-wrapper .bx-pager.bx-default-pager a {
	background: #ffffff;
	text-indent: -9999px;
	display: inline-block;
	width: 15px;
	height: 15px;
	border: 1px solid #ccc;
	margin: 0 5px;
	outline: none;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}

.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
	bottom: 30px;
}

.bx-pager-wrapper .bx-pager.bx-default-pager a.active {
	background: #666;
}

.product-info {
	width: 60%;
	padding: 20px;
	box-sizing: border-box;
}

.product-info table {
	width: 100%;
	border-collapse: collapse;
}

.product-info th, .product-info td {
	font-size: 18px;
	padding: 15px 5px;
	text-align: center;
	color: #676767;
	width: auto;
	/* border-bottom: 1px solid #ddd; */
}

.product-info th:first-child, 
.product-info td:first-child {
text-align: left;
}		

.product-info th {
	/* background-color: #f8f8f8; */
	color: #a59482;
	font-weight: normal;
	font-size: 18px;
	border-bottom: 1px solid #d9cfc4;
}

.product-info tbody tr:nth-child(even) {
	background-color: #f6f4f1;
}

.product-info tbody tr:hover {
	background-color: #f1f1f1;
}

.product-info .tips{color:#ffffff;font-size:15px;background:#bcad87;text-align:left !important;line-height: 20px;padding: 10px 20px;}

.product-content{ padding:0 20px; }

@media (max-width: 1200px) {
	.product-info th:nth-child(2), 
	.product-info td:nth-child(2) {
		display:none;
	}
}

@media (max-width: 1024px) {
	.product-list{ display:block;}
	#product-list .caption{ text-align:center; }
	#category-list{ display:none;}
	.bx-wrapper .bx-pager,
	.bx-wrapper .bx-controls-auto {
		bottom: 0px;
	}	
	
	.bxslider-container {
		width: 100%;
	}
	.product-info {
		width: 100%;
	}	
	
}

@media (max-width: 768px) {
    .product-info th, .product-info td {
        font-size: 14px; /* 調整文字大小 */
        padding:10px 5px; /* 調整內邊距 */
    }
}

/* 768px 及以上時，將最後三個 td 的寬度設為 100px */
@media (min-width: 768px) {
    .product-info td:nth-last-child(-n+3) {
        width: 130px;
    }
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 成為夥伴 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

#partner-list{width:100%;padding: 40px 20px 40px 20px;}
#partner-list .wrap{display:flex;flex-wrap: wrap;width:100%;max-width: 1200px;margin:0 auto;}
#partner-list .caption{font-size:20px;margin: 25px 0 0 0;font-weight: bold;}
#partner-list .b-title{ font-size:24px; margin:20px 0; color:#ad9b6d; font-weight:bold; }

.partner-list {
	width: 100%;
	max-width: 1200px;
	margin: 20px auto;
	display: flex;
	background-color: #fff;
	/* overflow: hidden; */
}

.contact-form{float:right;width:100%;/* max-width: 800px; */min-height:600px;margin: 0px 0;/* padding:10px; *//* height: 400px; */}
.contact-form .tips{width: 100%;/* max-width: 540px; */font-size: 18px;line-height: 30px;margin: 0 0 30px 0;color: #000000;}
.contact-form .require{color:#ff0012;font-size: 20px;padding: 5px;background: rgba(255, 255, 255, 0.7);}
.contact-form .input-item{width:100%;display: flex;align-items:center;justify-content: center;background: #f6f4f1;margin: 15px 0;/* padding: 15px 10px; *//* border: 1px solid #d7d7d7; *//* border-left:5px solid #414345; */transition: all 0.1s ease;border-radius: 40px;}
.contact-form .input-item:hover{/*border:1px solid #ed6f30; border-left:5px solid #ed6f30;*/}
.contact-form .input-item .left{flex:1;color: #000000;font-size: 16px;/* font-weight: bold; */letter-spacing: 1px;padding: 0px 20px;text-align: left;min-width: 145px;}
.contact-form .input-item .left span{color: #ff0000;vertical-align: middle;width: 15px;font-size: 20px;font-weight: bold;display:inline-block;padding: 0px 0 0 5px;}
.contact-form .input-item .right{flex: 5;/* display: flex; */padding: 0px 10px;margin: 15px 0px;border-left: 2px solid #e2dad1;}
.contact-form .input-item .right input:not([type="radio"]):not([type="checkbox"]){width:100%;font-size:16px;border:0;padding: 0px 0;background:transparent;}
.contact-form .input-item .right select{width:100%;font-size:16px;border:0;padding: 0px 0;background:transparent;}
.contact-form .input-item .right textarea{width:100%;font-size:16px;height:150px;border:0;padding: 10px;background:transparent;resize:none;}
.contact-form .input-item .right .rand-img{position:absolute;right: 0px;top: 0px;cursor:pointer}
.contact-form .pager .btn-1:before{ left:10px; }

.contact-form{ background:url(../../images/contact-bg.png) no-repeat; }
.contact-form .wrap{min-height:600px;display:flex; justify-content: space-between; flex-wrap:wrap; }
.contact-form .left{width:40%; padding:10px; }
.contact-form .left .css-table{ padding:10px; }
.contact-form .left .css-td:first-child{width: 20px; color:#71c6b2; }
.contact-form .left .css-td:nth-child(2){ width:40px; }
.contact-form .left .css-td{width:30px;padding: 15px 0;font-size: 16px;border-bottom: 1px dotted #cccccc;}
.contact-form .right{width:50%; padding:10px; }
.contact-form .right .map{width:100%;color:#385170;font-size:16px;display: flex;justify-content: flex-end;}
.contact-form .right .map .iframe{width:100%;/* max-width:500px; */height:400px;border:0;}
.contact-form .pager{ text-align:right; }
.contact-form .pager span{
    font-size: 15px;
    color: #888888;
}
.contact-form .pager a{
    margin: 0 20px 0 0;
    color: #888888;
}
.contact-form .pager a:hover{ color:#ed6e30; }


@media screen and (max-width : 1200px) {
	.contact-form .left{ flex:1; width:auto; }
	.contact-form .right{ flex:1; width:auto; }	
}
@media screen and (max-width : 1024px) {
	.contact-form .wrap{ display:block; }
}
@media screen and (max-width : 768px) {
	.contact-form .input-item .right{ flex:3; }
}
@media screen and (max-width : 480px) {
	.contact-form .input-item .right{ flex:1.5; }
	.contact-form .left .css-td:nth-child(2){ display:none; }
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 品牌故事 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

#story-list{width:100%;padding: 40px 20px 40px 20px; }
#story-list .wrap{display:flex;flex-wrap: wrap;width:100%;max-width: 1200px;margin:0 auto;}
#story-list .caption{font-size:20px;margin: 25px 0 0 0;font-weight: bold;}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 門市據點 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

#store-list {
    width: 100%;
    padding: 40px 0;
    background-color: #ffffff; /* 背景色，可以根據需求調整 */
}

#store-list .wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* 門市據點之間的空間平均分配 */
    max-width: 1000px;
    margin: 0 auto;
}

#store-list .store-location {
    width: 48%; /* 確保兩個門市據點塊在大螢幕時能佔據同一行的兩側 */
    padding: 20px;
    margin-bottom: 20px; /* 每個門市塊之間的間距 */
}

#store-list .store-location .caption {
    font-size: 20px;
    margin: 0 0 25px 0;
    padding: 10px 0;
    font-weight: bold;
    color: #333;
    text-align: center;
    border-bottom: 1px solid #d0c3b5;
}

#store-list .store-location .details {
    font-size: 18px;
    color: #676767;

    line-height: 1.6;
    letter-spacing: 1px;
}

#store-list .store-location .details span {
    display: block;
    margin: 10px 0;
}

#store-list .store-location .details span div{display:inline-block;color: #a59482;min-width: 95px;}

#store-list .store-location .details .address i {
    margin-right: 8px; /* 地址旁邊 i 標籤的間距 */
    color: #a59482; /* i 標籤的顏色 */
}

#store-list .store-location .btn-direction {
    display: block;
    margin-top: 20px;
    padding: 10px;
    text-align: center;
    background-color: #a59482;
    color: #ffffff;
    text-decoration: none;
    font-size: 18px;
    transition: background-color 0.3s;
}

#store-list .store-location .btn-direction:hover {
    background-color: #a3877a;
}

@media screen and (max-width : 768px) {
	#store-list .store-location{ width:100%;}
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 最新消息 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

#news-list {
    width: 100%;
    padding: 40px 0;
    background-color: #ffffff; 
}

#news-list .wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
}

.news-item {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    /* padding: 10px; */
    margin: 10px 0 5vw 0;
}

.item-left {
    flex: 0 0 30%;
    position: relative;
}

.item-left img {
    width: 100%;
    height: auto;
}

.item-left .date {
    position: absolute;
    right: 0;
    top: 0;
    display: inline-block;
    color: #ffffff;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 2px;
    background: linear-gradient(to bottom, #ccbaa1, #a68e6e);
    padding: 28px 18px;
}

.item-left .date span {
    display: block;
    font-size: 35px;
}

.item-right {
    flex: 0 0 70%;
    padding: 20px;
    line-height: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.item-right .content{ max-width:600px; }

.item-right h2 {
    margin: 30px 0 30px;
    font-size: 20px;
    font-weight: bold;
}

.item-right p {
    margin: 0 0 20px;
    font-size: 16px;
    color: #555;
    flex-grow: 1;
}

.btn1 {
    align-self: flex-end;
    display: inline-block;
    margin-top: 10px;
    padding: 10px 20px;
    color: #a89d93;
    /* background-color: #6b9f53; */
    text-decoration: none;
    /* font-weight: bold; */
    cursor: pointer;
    border-radius: 4px;
}

@media screen and (max-width: 768px) {
    .news-item {
        flex-direction: column;
    }

    .item-left, .item-right {
        flex: 0;
        margin-bottom: 15px;
		padding:0;
    }
	
	.item-right .content{ max-width:none; }

}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 最新消息內頁 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.news-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    position: relative;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 1px;
}

.news-caption .date {
    color: #ffffff;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 2px;
    background: linear-gradient(to bottom, #ccbaa1, #a68e6e);
    padding: 15px 15px;
    text-align: center;
    margin-right: 20px;
}

.news-caption .date span {
    display: block;
    font-size: 35px;
}

.caption-text {
    flex-grow: 1;
    font-size: 18px;
    color: #333;
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 聯絡我們 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/


/*聯絡我們*/
#index-contact{width:100%;max-width: 1200px;margin: 0 auto;min-height:400px;padding: 30px 20px;overflow:hidden;}
#index-contact .contact-form{display:flex;}
#index-contact .contact-form > .left{flex:1;padding: 15px 15px;background:url(../../images/contact-bg.png) no-repeat;background-position:bottom center;color: #262626;font-size: 18px;line-height: 40px;}
#index-contact .contact-form > .right{flex:1;padding: 0 15px;}

@media screen and (max-width : 1200px) {
	#contact-info .left{ flex:1; width:auto; }
	#contact-info .right{ flex:1; width:auto; }	
}
@media screen and (max-width : 1024px) {
	#contact-info .wrap{ display:block; }
	#index-contact .contact-form{padding-top: 0px;}
	.contact-form .input-item .left{ flex:2; }
}
@media screen and (max-width : 768px) {
	.contact-form .input-item .right{ flex:3; }
	#index-contact .contact-form{ display:block; }
	.contact-form .input-item .left{ flex:1; }
	
}
@media screen and (max-width : 480px) {
	.contact-form .input-item .right{ flex:1.5; }
	#contact-info .left .css-td:nth-child(2){ display:none; }
	#index-about .left .service-area{ display:block; text-align:center; }
	#index-about .left .service-area span{ margin:5px; }
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Cookie <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.cookie-notice {
    position: fixed;
    max-width: 1100px;
    font-size: 14px;
    margin: 0 auto;
    bottom: 30px;
    left: 0;
    right: 0;
    background-color: #AD9B6D;
    color: #fff;
    line-height: 22px;
    padding: 15px 20px;
    text-align: left;
    display: none; /* 預設隱藏 */
    border-radius: 10px;
    z-index: 99;
}

div#cookieNotice {}

div#cookieNotice {}

.cookie-notice button {
    background-color: #fff;
    color: #333;
    border: none;
    padding: 5px 20px;
    margin-top: 10px;
    cursor: pointer;
    display: block;
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Product輪播 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.swiper-slide {
  margin-top:75px;
  position: relative;
  transition: transform 0.3s ease-in-out;
}

.swiper-slide .figure {
  position: relative;
  overflow: hidden;
  cursor:pointer;
}

/* 默认所有图片都有遮罩 */
.swiper-slide .figure::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(213, 194, 178, 0.5);
  z-index: 99;
  transition: opacity 0.3s ease;
  border-radius: 250px; /* 保证遮罩是圆形的 */
  opacity: 1; /* 默认所有图片都有遮罩 */
}

.swiper-slide .figure::after {
  content: url('../../images/product-icon-1.png');
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 图片垂直水平居中 */
  z-index: 100; /* 保证图片在遮罩之上 */
  width: auto;
  height: auto;
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> RWD表格 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.rwd-table {
  display: flex;
  flex-wrap: wrap;
}
.rwd-table__item {
  flex: 0 0 50%; /* 默认每项占据50%的宽度 */
  box-sizing: border-box;
  padding: 0 10px; /* 适当的内边距 */
}
.rwd-table__item--full {
  flex: 0 0 100%; /* 第三行的项占据100%的宽度 */
}
@media (max-width: 600px) {
  .rwd-table__item, .rwd-table__item--full {
    flex: 0 0 100%; /* 在小屏幕上每项都占据100%的宽度 */
  }
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 區塊跳動效果 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.bannerArea{ z-index:999999; }
.bannerArea a.scrollDown{
	display:block;
	color:#000;
	text-align:center;
	width:80px;
	position:absolute;
	bottom:20px;
	left:50%;
	margin-left:-40px;
	z-index:999;}

.bannerArea a.scrollDown i{
	display:inline-block;
	text-align:center;
	font-size:25px;
	color:#FFF;
	text-align:center;}

/*------css3動畫--------*/
@-webkit-keyframes upDown {
  0%     {bottom:20px; opacity:1;}
  50%   {bottom:28px; opacity:0.5;}
  100% {bottom:20px; opacity:1;}

}
@-moz-keyframes upDown {
  0%     {bottom:20px; opacity:1;}

  50%   {bottom:28px; opacity:0.5;}
  100% {bottom:20px; opacity:1;}
}
@keyframes upDown {
  from     {bottom:20px; opacity:1;}
  50%   {bottom:28px; opacity:0.5;}
  to {bottom:20px; opacity:1;}
}
.upDown{
	-webkit-animation: upDown ease-out 1s infinite;
	-moz-animation: upDown ease-out 1s infinite;

	-o-animation: upDown ease-out 1s infinite;
	animation: upDown ease-out 1s infinite;}

/*scaleZoom*/
.scaleZoom {
	-webkit-animation: scaleZoom 2s ease both;
	animation: scaleZoom 2s ease both;
}
@-webkit-keyframes scaleZoom {
	from { opacity: 0; -webkit-transform: scale(1.2); }
}
@keyframes scaleZoom {
	from { opacity: 0; -webkit-transform: scale(1.2); transform: scale(1.2); }
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> checkbox/radio template <<<------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/


/* The container */
.container {
    display: inline-block;
    position: relative;
    color: #474747;
    letter-spacing: 2px;
    padding-left: 35px;
    padding-right: 20px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 16px;
    font-weight:normal;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #fff;
    border:1px solid #CCC;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
    background-color: #fff;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid #179ccb;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}



/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Swiper Slider <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

html, body { position: relative; height: 100%; }
.swiper-container { position:relative; width: 100%; height: 100%; }
.swiper-slide { text-align: center; font-size: 48px; color:#fff; letter-spacing:1px; background-size:cover; background-position: center; }
.swiper-word { display:none; width:100%; max-width:1200px; position:absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; font-size:2.75vw; bottom:30%; text-align:right; padding-right:4%; box-sizing:border-box; }
.swiper-word span { font-size:16px; }


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Transition Effect <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.infinite_effect{   animation: nudge 5s linear infinite alternate; }

@keyframes nudge {
  0%, 100% {
    transform: translate(0, 0);
  }
  
  50% {
    transform: translate(15px, 0);
  }
  
  50% {
    transform: translate(-15px, 0);
  }
}


@keyframes rotate-btn {

  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-360deg);
  }
}

@keyframes transiTop20 {  0% {
 transform: translateY(-20%);

}
 100% {
 transform: translateY(0);
}
}

/*image mask*/
.photo-mask{opacity:0;position:absolute;left:0;bottom:0;color:#ffffff;width:100%;height:100%;background-color: rgba(208, 186, 143, 0.8);letter-spacing:1px;text-align:center;padding:4vw;box-sizing:border-box;line-height:22px;-webkit-transition:.2s;-ms-transition:.2s;-moz-transition:.2s;}
.photo-mask-content{width:100%;height:100%;display:flex;align-items:center;justify-content: center;flex-direction: column;}
.photo-mask .line{border:1px solid #FFFFFF;}
.gallery{ position:relative; }
.gallery .photo-mask{ opacity:0; cursor:pointer; }
.gallery:hover .photo-mask{ opacity:1; }
.gallery:hover .title{ opacity:0; }	

/*image zoom*/
.photo-zoom {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.photo-zoom img {
  max-width: 100%;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.photo-zoom:hover img {

  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}	

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Loadaction <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.Loadaction_Box { position:relative; height: 100%; width: 0%; position: fixed; overflow:auto; top: 0; left: 0; overflow:auto; background-color:rgba(232, 220, 208, 0.7); z-index:100000000 }
.Loadaction {width: 220px;height: 90px;line-height: 18px;top: 42%;position: absolute;margin-left: auto;margin-right: auto;left: 0;right: 0;padding: 10px;background-color:rgba(232, 220, 208, 0.9);-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;}
.Actionupload_Text {font-size:13px;color:#FFFFFF;/* height:25px; */padding: 8px 0;letter-spacing: 2px;}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> pagelink <<<--------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.pageselect{border:1px solid #CCCCCC;padding: 4px 5px;font-size:16px;}
.pageselect:hover{ background:#ebebeb; }
a.pagelink_no{font-size:16px;color:#333333;text-decoration:none;border: 1px solid #cccccc;padding: 7px 8px;display: inline-block;margin: 5px 0;}
a.pagelink_no:hover{ background:#ebebeb; }
a.pagelink{font-size:16px;color:#333333;text-decoration:none;border: 1px solid #CCCCCC;padding: 5px 10px;}
a.pagelink:hover{ background:#ebebeb; }
a.pagelink_ch{font-size:16px;color:#333333;padding: 5px 10px;border: 1px solid #cccccc;background: #ebebeb;text-decoration:none;}