@charset "utf-8";
/* CSS Document */

html, body { margin:0px; }

body { width:100%; font-size-adjust:100%; -webkit-text-size-adjust:100%; box-sizing:border-box; position:relative; color:#000000; font-size:16px; font-family:"Cabin", "微軟正黑體", "Microsoft JhengHei", sans-serif; }

a { outline:none; text-decoration:none; }

ul, ol { list-style:none; margin:0; padding:0; }
li { vertical-align:top; }

h1, h2, h3, h4, h5, p { padding:0; margin:0; }

img { border:none; }

.object_fit_photo img { width:100%; height:100%; object-fit:contain; }
.object_fit_photo.compat-object-fit { background-repeat:no-repeat; background-position:center center; background-size:contain; }

input, select, textarea { -webkit-appearance:none; -moz-appearance:none; -o-appearance:none; appearance:none; font-family:Arial, Helvetica, sans-serif; }

input:focus, select:focus, textarea:focus { border-color:#66afe9; outline:0; -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); outline:thin dotted; outline:5px auto -webkit-focus-ring-color; outline-offset:-2px; }

input::-webkit-inner-spin-button, 
input::-webkit-outer-spin-button { -webkit-appearance:none; appearance:none; margin:0; }
input[type=date],
input[type=datetime-local] { padding-right:0; }

button, input[type=submit], input[type=reset], input[type=button] { -webkit-appearance:none; -moz-appearance:none; appearance:none; }

/* ---------------- clear fix ---------------- */

.clearfix:after { content:"."; display:block; clear:both; visibility:hidden; xline-height:0; height:0; font-size:0; }
.clearfix { display:inline-block; }
html[xmlns] .clearfix { display:block; }
* html .clearfix { height:1%; }

/*-------------------------------------------------------------------------------------*/
/* LAYOUT */

#wrap { width:100%; background-color:#ffffff; box-sizing:border-box; position:relative; left:0; z-index:1000; transition:all 0.5s ease; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease;  }
#wrap .container { width:100%; max-width:1054px; padding-left:15px; padding-right:15px; margin:0px auto; position:relative; box-sizing:border-box; display:block; }
#wrap .overlay { position:absolute; left:0; top:0; z-index:5000; width:0; height:0; background-color:rgba(0,0,0,0.3); opacity:0; transition-delay:0.3s; -webkit-transition-delay:0.3s; -moz-transition-delay:0.3s; }

#wrap .back_to_top { position:fixed; right:25px; bottom:14px; display:none; z-index:999; }
#wrap .back_to_top.overFooterOnBottom { position:fixed !important; bottom:14px !important; }
#wrap .back_to_top a { display:block; width:50px; height:50px; background-color:#81776d; border-radius:6px; box-sizing:border-box; text-align:center; color:#ffffff; font-weight:bold; transition:all 0.2s ease; }
#wrap .back_to_top a:hover { background-color:#2b1a09; box-shadow:0 0 10px 2px #ffffff; }
#wrap .back_to_top a i { font-size:42px; line-height:48px; }

#top { width:100%; background-color:#2b1a09; position:relative; z-index:101; display:block; }
#top .logo { float:left; width:382px; padding:31px 0 50px 0; }
#top .logo img { width:100%; display:block; }

#top .mobile_btn { position:absolute; right:15px; top:50%; z-index:10; display:none; margin-top:-20px; }
#top .mobile_btn a { display:block; width:40px; height:40px; background-color:#81776d; box-sizing:border-box; border-radius:6px; text-align:center; text-transform:uppercase; font-weight:700; font-size:0; color:#ffffff; line-height:40px; }
#top .mobile_btn a i { font-size:28px; line-height:inherit; }
#top .mobile_btn a:hover { text-decoration:none; }

#top .toolbar { display:inline-block; vertical-align:top; }
#top .toolbar ul { text-align:right; }
#top .toolbar ul li { display:inline-block; vertical-align:top; padding:9px 6px; }
#top .toolbar ul li i { font-size:20px; line-height:1; }
#top .toolbar ul li a { color:#ffffff; }

#top .lang_area { display:inline-block; vertical-align:top; width:86px; padding:6px 12px; box-sizing:border-box; }
#top .lang_area select { width:100%; height:29px; background-color:transparent; border:none; box-sizing:border-box; position:relative; font-size:17px; color:#ffffff; }
#top .lang_area option { color:#000000; }
#top .lang_area .select_area { display:inline-block; vertical-align:top; width:100%; background-color:transparent; position:relative; border-radius:0; box-sizing:border-box; outline:none; cursor:pointer; }
#top .lang_area .select_area:before { position:absolute; right:4px; top:50%; z-index:1; content:"\f107"; font:normal normal normal 18px/1 FontAwesome; color:#ffffff; transform:translateY(-50%); }
#top .lang_area .select_area select { padding-left:5px; padding-right:22px; background-color:transparent; z-index:2; -webkit-appearance:none; -moz-appearance:none; appearance:none; }
#top .lang_area .select_area select:focus { border-color:transparent; outline:0; -webkit-box-shadow:none; box-shadow:none; }

#top .menu_side { position:absolute; right:15px; top:0; height:100%; text-align:right; }

#top .menu_area { position:absolute; right:0; bottom:0; display:block; }
#top .menu_area ul.menu_list { margin:0 -16px; text-align:right; font-size:0; white-space:nowrap; }
#top .menu_area ul.menu_list > li { display:inline-block; vertical-align:top; box-sizing:border-box; position:relative; }
#top .menu_area ul.menu_list > li.mobile_only { display:none; }
#top .menu_area ul.menu_list > li > a.lv1 { display:block; padding:12px 16px; position:relative; text-align:center; font-size:16px; color:#ffffff; font-weight:600; text-transform:uppercase; transition:all 0.3s ease; }
#top .menu_area ul.menu_list > li > a.lv1 i { display:none; }
#top .menu_area ul.menu_list > li > a.lv1:before { position:absolute; left:0; bottom:0; content:""; width:100%; height:4px; background-color:#c9ae83; display:none; }

#top .menu_area ul.menu_list > li:hover > a.lv1,
#top .menu_area ul.menu_list > li > a.lv1:hover { }
#top .menu_area ul.menu_list > li.active > a.lv1:before { display:block; }

#top .menu_area ul.dropdown_menu { position:absolute; left:0; top:calc(100% - 4px); z-index:10; width:180px; padding:20px 0 16px 0; background-color:#ffffff; border-top:4px solid #c9ae83; box-sizing:border-box; font-family:'Dosis', "微軟正黑體", "Microsoft JhengHei", sans-serif; }
#top .menu_area ul.dropdown_menu > li { display:block; text-align:left; }
#top .menu_area ul.dropdown_menu > li > a.lv2 { display:block; width:100%; padding:4px 22px; background-color:transparent; box-sizing:border-box; position:relative; font-size:13px; color:#2b1a08; transition:all 0.3s ease; }
#top .menu_area ul.dropdown_menu > li > a.lv2:hover { background-color:#2b1a09; color:#ffffff; }

#top .menu_area ul.menu_list > li.last_child > ul.dropdown_menu { left:auto; right:0; }
#top .menu_area .fallback { display:none; }

#banner { position:relative; }
#banner .banner_show { width:100%; }
#banner .banner { width:100%; background-repeat:no-repeat; background-position:center center; background-size:cover; display:block; }
#banner .banner img { width:100%; display:block; -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:moz-none; -ms-user-select:none; user-select:none; }

#banner .banner_show .owl-dots { position:absolute; left:50%; bottom:26px; width:100%; max-width:1024px; padding:0 47px; box-sizing:border-box; transform:translateX(-50%); text-align:right; }
#banner .banner_show .owl-dot { display:inline-block; vertical-align:top; margin:0 6px; width:12px; height:12px; background-color:#ffffff; border-radius:100%; outline:none; transition:all 0.3s ease; }
#banner .banner_show .owl-dot.active,
#banner .banner_show .owl-dot:hover { background-color:#c9ae83; }

#banner .inner_banner { border-bottom:2px solid #e8e8e8; background-image:url(../img/inner_banner.jpg); }

#banner .banner_title { position:absolute; left:0; bottom:20px; width:100%; text-align:left; }
#banner .banner_title h2 { font-size:45px; color:#ffffff; font-weight:500; line-height:1; text-transform:uppercase; }

#main { width:100%; background:url(../img/main_bg.jpg) no-repeat #e8e8e8 center bottom; position:relative; display:block; }
#main:before { position:absolute; left:0; top:0; content:""; width:100%; height:8px; background:url(../img/main_shadow.png) repeat-x center top; }

#main .content_area { width:100%; padding-top:32px; padding-bottom:36px; position:relative; display:block; }

#main .common_content { min-height:900px; padding:24px 0; box-sizing:border-box; font-size:19px; color:#2b1a09; line-height:1.2; }
#main .common_content h3 { padding-bottom:28px; font-size:38px; text-align:center; }
#main .common_content p { padding-bottom:46px; text-align:justify; }
#main .common_content img { width:100%; display:block; }

#main .multipage { padding-top:34px; margin:0 -7px; font-size:0; text-align:center; clear:both; }
#main .multipage a { display:inline-block; zoom:1; *display:inline; vertical-align:top; width:22px; height:22px; margin:0 2px; text-align:center; line-height:22px; font-size:13px; color:#000000; transition:all 0.2s ease; }
#main .multipage a.row,
#main .multipage a.back,
#main .multipage a.next { width:26px; margin:0 7px; background-color:#797979; color:#ffffff; font-size:10px; }
#main .multipage a.onpage, 
#main .multipage a:hover { background-color:#2f1c09; color:#ffffff; }
#main .multipage .select_area { display:none; vertical-align:top; width:100%; max-width:160px; background-color:#ffffff; vertical-align:top; border-radius:2px; position:relative; cursor:pointer; }
#main .multipage .select_area:before { position:absolute; right:8px; top:50%; z-index:1; content:"\f107"; font:normal normal normal 18px/1 FontAwesome; transform:translateY(-50%); }
#main .multipage .select_area select { width:100%; height:38px; padding-left:10px; padding-right:40px; background-color:transparent; border:1px solid #dbdad8; box-sizing:border-box; border-radius:2px; position:relative; z-index:2; font-size:13px; color:#000000; -webkit-appearance:none; -moz-appearance:none; appearance:none; outline:none; }

#footer { padding:19px 0; background-color:#2f1c09; position:relative; }
#footer .copyright { display:block; font-size:12px; color:#ffffff; }
#footer .copyright p { float:left; }
#footer .copyright p:last-child { float:right; }
#footer .copyright a { color:#ffffff; }
#footer .copyright a:hover { text-decoration:underline; }

/*-------------------------------------------------------------------------------------*/
/* INDEX */

.section_area { padding-bottom:37px; display:block; margin:0 -7px; }
.section_area .section_left { float:left; width:676px; }
.section_area .section_right { float:right; width:348px; }

.section { float:left; width:100%; padding:26px 7px 12px 7px; box-sizing:border-box; }
.section .section_title { width:100%; height:50px; text-align:center; color:#2b1a09; font-size:28px; }
.section .section_title span { font-size:20px; }
.section .section_title img { vertical-align:middle; }
.section .section_content { display:block; width:100%; height:624px; position:relative; }
.section .section_content .loading { position:absolute; left:50%; top:50%; max-width:100%; transform:translate(-50%,-50%); }
.section .section_content .loading img { max-width:100%; display:block; }
.section .section_more { width:100%; height:34px; padding-top:14px; box-sizing:border-box; text-align:right; }
.section .section_more a { font-size:14px; color:#2b1a09; line-height:1; }

.index_prd_tab { padding-bottom:9px !important; }
.index_prd_tab .tab_list { border-bottom:1px solid #2b1a09; }
.index_prd_tab .tab_list ul { display:table !important; width:100%; table-layout:fixed; position:relative; margin:0 !important; }
.index_prd_tab .tab_list ul li { display:table-cell !important; vertical-align:top; width:auto !important; max-width:none !important; padding:0 2px 0 0 !important; }
.index_prd_tab .tab_list ul li:last-child { padding-right:0 !important; }
.index_prd_tab .tab_list ul li a { display:block !important; height:32px; padding:0 !important; font-size:16px !important; line-height:32px !important; }

.index_prd_list { margin:-7px -6px !important; }
.index_prd_list .prd_item { float:left; width:33.33334% !important; padding:7px 6px !important; }
.index_prd_list .prd_photo { height:284px !important; }

.index_fb_area { width:100%; height:100%; overflow:hidden; }
.index_fb_area img { width:100%; display:block; }
.index_fb_area iframe { width:100%; height:100%; border:none; overflow:hidden; }

.index_contact_area { width:100%; height:100%; background-color:#72654f }
.index_contact_area .index_contact_photo { width:100%; }
.index_contact_area .index_contact_photo img { width:100%; display:block; }
.index_contact_area .index_contact_info { width:100%; padding:0 24px; box-sizing:border-box; font-size:18px; color:#ffffff; line-height:1.2; }
.index_contact_area .index_contact_info h3 { padding:22px 0; font-size:22px; }
.index_contact_area .index_contact_info p { display:-ms-flexbox; display:flex; -ms-flex-wrap:no-wrap; flex-wrap:no-wrap; width:100%; padding-bottom:16px; }
.index_contact_area .index_contact_info i { flex:0 0 30px; -ms-flex:0 0 30px; width:30px; font-size:22px; }
.index_contact_area .index_contact_info hr { margin:15px 0; border:none; height:1px; background-color:#887d6b; }
.index_contact_area .index_contact_info img { max-width:100%; }
.index_contact_area .index_contact_info .social { max-width:42px; margin-right:10px; }

/*-------------------------------------------------------------------------------------*/
/* PRODUCT */

.product_content { }

.prd_tab { width:100%; padding-bottom:34px; }
.prd_tab .tab_list { width:100%; box-sizing:border-box; }
.prd_tab .tab_list ul { display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap; margin:-1px; }
.prd_tab .tab_list ul li { display:-ms-flexbox; display:flex; -ms-flex:0 0 155px; flex:0 0 155px; width:100%; max-width:155px; padding:1px; box-sizing:border-box; -ms-flex-pack:justify; justify-content:space-between; }
.prd_tab .tab_list ul li a { display:-ms-flexbox; display:flex; width:100%; padding:6px 10px 8px 10px; background-color:#81776d; box-sizing:border-box; -ms-flex-pack:center; justify-content:center; -ms-flex-align:center; align-items:center; text-align:center; font-size:18px; color:#ffffff; line-height:1.2; transition:all 0.3s ease; }
.prd_tab .tab_list ul li a.active,
.prd_tab .tab_list ul li a:hover { background-color:#2b1a09; }

.prd_tab .tab_select { display:none; width:100%; }
.prd_tab .tab_select select { width:100%; height:40px; border:none; box-sizing:border-box; position:relative; }
.prd_tab .tab_select .select_area { display:inline-block; vertical-align:top; width:100%; background-color:#81776d; position:relative; border-radius:0; box-sizing:border-box; outline:none; cursor:pointer; }
.prd_tab .tab_select .select_area:before { position:absolute; right:12px; top:50%; z-index:1; content:"\f107"; font:normal normal normal 20px/1 FontAwesome; color:#ffffff; transform:translateY(-50%); }
.prd_tab .tab_select .select_area select { padding-left:15px; padding-right:38px; background-color:transparent; z-index:2; font-size:17px; color:#ffffff; -webkit-appearance:none; -moz-appearance:none; appearance:none; }
.prd_tab .tab_select .select_area select:focus { border-color:transparent; outline:0; -webkit-box-shadow:none; box-shadow:none; }
.prd_tab .tab_select .select_area select option { background-color: #81776d;}
.prd_tab .brand_desc { margin-top: 20px; }

.prd_list { display:block; margin:-8px -6px; }
.prd_list .prd_item { float:left; width:25%; padding:8px 6px; box-sizing:border-box; }
.prd_list .prd { width:100%; position:relative; display:block; }
.prd_list .prd_photo { width:100%; height:328px; overflow:hidden; xbackground-color: white; }
.prd_list .prd_photo img { max-width:100%; display:block; }
.prd_list .prd_overlay { position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); opacity:0; display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap; -ms-flex-direction:column; flex-direction:column; -ms-flex-align:center; align-items:center; -ms-flex-pack:center; justify-content:center; transition:all 0.3s ease; }
.prd_list .prd_info { padding:15px; box-sizing:border-box; text-align:center; color:#ffffff; }
.prd_list .prd_title { padding-bottom:6px; border-bottom:1px solid #ffffff; font-size:26px; line-height:1.2; }
.prd_list .prd_desc { display:block; display:-webkit-box; max-height:72px; box-sizing:border-box; word-wrap:break-word; word-break:normal; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; margin-top:16px; font-size:17px; }
.prd_list .prd_price { margin-top:12px; font-size:24px; }
.prd_list .prd:hover .prd_overlay { opacity:1; }

.prd_detail { display:block; }
.prd_detail .prd_detail_photo { float:left; width:506px; padding-top:46px; }
.prd_detail .prd_detail_photo .large_photo { width:100%; position:relative; box-sizing:border-box; }
.prd_detail .prd_detail_photo .large_photo .jqzoom { display:block; }
.prd_detail .prd_detail_photo .large_photo img.resize { width:100%; display:block; box-sizing:border-box; }

.prd_detail .prd_detail_photo .zoomPad { float:none; width:100%; }
.prd_detail .prd_detail_photo .zoomPad:before { position:absolute; left:0; top:0; content:""; width:100%; height:100%; border:3px solid rgba(255,255,255,0.6); box-sizing:border-box; }
.prd_detail .prd_detail_photo .zoomPad:after { position:absolute; right:0; bottom:0; content:"Zoom"; padding:6px 33px; background-color:rgba(255,255,255,0.86); font-size:17px; color:#81776d; text-align:center; }

.prd_detail .prd_detail_photo .popup_list { width:100%; display:none; }
.prd_detail .prd_detail_photo .popup_list .popup { display:none; width:100%; position:relative; }
.prd_detail .prd_detail_photo .popup_list .popup img { width:100%; }
.prd_detail .prd_detail_photo .popup_list .popup.active { display:block; }
.prd_detail .prd_detail_photo .popup_list .popup.active:before { position:absolute; left:0; top:0; content:""; width:100%; height:100%; border:3px solid rgba(255,255,255,0.6); box-sizing:border-box; }
.prd_detail .prd_detail_photo .popup_list .popup.active:after { position:absolute; right:0; bottom:0; content:"Zoom"; padding:6px 33px; background-color:rgba(255,255,255,0.86); font-size:17px; color:#81776d; text-align:center; }

.prd_detail .prd_detail_photo .thumb_area { width:100%; padding-top:31px; box-sizing:border-box; }
.prd_detail .prd_detail_photo .thumb_list { margin:-5px; }
.prd_detail .prd_detail_photo .thumb_item { float:left; width:33.33334%; padding:5px; box-sizing:border-box; }
.prd_detail .prd_detail_photo .thumb { width:100%; height:217px; position:relative; overflow:hidden; background-color: transparent;; }
.prd_detail .prd_detail_photo .thumb:before { position:absolute; left:0; top:0; z-index:-1; content:""; width:100%; height:100%; border:5px solid #81776d; box-sizing:border-box; opacity:0; transition:all 0.2s ease; }
.prd_detail .prd_detail_photo .thumb img { width:100%; display:block; }
.prd_detail .prd_detail_photo .thumb.active { box-shadow:5px 5px 5px rgba(0,0,0,0.2); }
.prd_detail .prd_detail_photo .thumb.active:before { z-index:1; opacity:1; }

.prd_detail .prd_detail_info { float:left; width:404px; padding-top:78px; padding-right:38px; padding-left:76px; color:#2b1a09; }
.prd_detail .prd_detail_header { padding:0 2px 20px 2px; border-bottom:1px solid #81776d; margin-bottom:22px; }
.prd_detail .prd_detail_brand { padding-bottom:6px; font-size:46px; font-weight:700; line-height:1.2; }
.prd_detail .prd_detail_title { font-size:41px; font-weight:700; line-height:1.2; }
.prd_detail .prd_detail_price { padding:0 2px; margin-bottom:90px; font-size:31px; font-weight:700; line-height:1.2; }
.prd_detail .prd_detail_desc { padding:0 2px !important; }
.prd_detail .prd_detail_line { display:block; width:100%; max-width:130px; height:6px; background-color:#81776d; margin-bottom:10px; }
.prd_detail .prd_detail_back { float:left; width:100%; padding-top:46px; text-align:right; }
.prd_detail .prd_detail_back a { display:inline-block; vertical-align:top; padding:7px 33px; background-color:#2b1a09; font-size:24px; color:#ffffff; }

/*-------------------------------------------------------------------------------------*/
/* EDITOR CONTENT */

.editor_content { display:block; color:#000000; font-size:16px; }
.editor_content:after { content:""; display:block; width:100%; clear:both; }
.editor_content .table_area { width:100%; overflow-x:auto; }
.editor_content iframe { max-width:100%; box-sizing:border-box; }
.editor_content img { max-width:100%; box-sizing:border-box; }
.editor_content table { max-width:100%; box-sizing:border-box; border-collapse:collapse; border-style:solid; }

/* Tag default values */
.editor_content ul, 
.editor_content ol { display:block; xmargin:1em 0; xpadding-left:40px; padding-left:20px; }
.editor_content ul { list-style-type:disc; }
.editor_content ol { list-style-type:decimal; }
/*
.editor_content h1 { margin:0.67em 0; }
.editor_content h2 { margin:0.83em 0; }
.editor_content h3 { margin:1em 0; }
.editor_content h4 { margin:1.33em 0; }
.editor_content h5 { margin:1.67em 0; }
.editor_content h6 { margin:2.33em 0; }
.editor_content p { margin:1em 0; }
*/


/*john 2020-3-26 add*/
  .shareIcon{
    margin-bottom: 20px;
  }
  .shareIcon span{
    display: inline-block;
    width: 50px;
    height: 50px;
  }
  .shareIcon>span:nth-of-type(1){
    background-image: url(../img/shareIcon.png);
    background-repeat: no-repeat;
    background-position: 7px -25px;
  }
  .shareIcon>span:nth-of-type(2){
    background-image: url(../img/shareIcon.png);
    background-repeat: no-repeat;
    background-position: -84px -25px;
  }
  .shareIcon>span:nth-of-type(3){
    background-image: url(../img/shareIcon.png);
    background-repeat: no-repeat;
    background-position: -176px -25px;
  }
  .shareIcon>span:nth-of-type(3) a{
    display: inline-block;
    width: 50px;
    height: 50px;
  }
  .shareIcon>span:nth-of-type(4){
    background-image: url(../img/shareIcon.png);
    background-repeat: no-repeat;
    background-position: -222px -25px;
  }
  .layui-layer-shade{
    background-color: rgba(255,255,255,0.1) !important;
  }