@charset "utf-8"; body { line-height:1.8; letter-spacing:2px; color:#555; font-family: "微軟正黑體", "Microsoft JhengHei", "Segoe UI", "Arial", sans-serif; } body,ul,li { margin:0; padding:0 } /* mobile 隱藏選單(左邊距) padding:0 */ body { background-image: url('../../img/product_bg.gif'); background-size: cover; /* 使背景圖像覆蓋整個視口 */ background-attachment: fixed; /* 固定背景 */ background-position: center; /* 背景圖像置中 */ } /* 內連方式 */ /* .content-text strong { color:#AC3F26; margin-bottom: 20px;} */ .my-div { width: 100%; /* 或根據需要設置寬度 */ transition: text-align 0.3s; /* 添加過渡效果 */ } @media (min-width: 769px) { .my-div { text-align: left; /* 當解析度大於768時靠左 */ } } @media (max-width: 768px) { .my-div { text-align: center; /* 當解析度小於或等於768時置中 */ } } .content-text strong { color: #444; } .content-text strong.block { color: #AC3F26; margin-top: 20px; margin-bottom: 0px; display: block; } .text-secondary-bold { font-weight: bold; /* 粗體 */ color: #666; /* 指定字體顏色 */ } /* 用法 - 重點字： */ /* 用法 - 非重點字： */ .text-primary { color: blue; /* 藍色文字 */ } .text-bold { font-weight: bold; /* 粗體字 */ } .text-underline { text-decoration: underline; /* 底線文字 */ } /* 用法 -

這是一段藍色文字。

*/ .content-text p { line-height: 1.8; /* 設定段落行距 */ margin-top: 20px; margin-bottom: 20px; } .content-text { font-size: 1.4rem; color: #555; } .content-text h1 { color: #666; font-size: calc(1.4rem + 0.5rem); position: relative; display: block; margin-top: 20px; /* 預留空間 */ margin-bottom: 20px; /* 統一間距 */ line-height: 1.8; } .content-text h2, .content-text h3, .content-text h4, .content-text h5, .content-text h6 { color: #800080; font-size: calc(1.4rem + 0.4rem); position: relative; display: block; margin-top: 20px; margin-bottom: 20px; line-height: 1.8; } .content-text strong.block { font-size: calc(1.4rem + 0.3rem); } /* 新增 br 的間距樣式 */ .content-text br { display: inline; /* 預設行內元素 */ } /* 在小螢幕時新增下方間距 */ @media (max-width: 600px) { .content-text br { display: block; /* 將 br 的行為改為區塊 */ margin-bottom: 10px; /* 新增下方間距 */ } } @media (min-width: 600px) and (max-width: 1200px) { .content-text { font-size: calc(1.4rem + (1.5 - 1.4) * ((100vw - 600px) / 600)); } .content-text h1 { font-size: calc(1.4rem + 0.5rem + (1.5 - 1.4) * ((100vw - 600px) / 600)); } .content-text h2, .content-text h3, .content-text h4, .content-text h5, .content-text h6 { font-size: calc(1.4rem + 0.4rem + (1.5 - 1.4) * ((100vw - 600px) / 600)); } .content-text strong.block { font-size: calc(1.4rem + 0.3rem); } } @media (min-width: 1200px) { .content-text { font-size: 1.5rem; } .content-text h1 { font-size: calc(1.5rem + 0.5rem); } .content-text h2, .content-text h3, .content-text h4, .content-text h5, .content-text h6 { font-size: calc(1.5rem + 0.4rem); } .content-text strong.block { font-size: calc(1.5rem + 0.3rem); } } /* .content_box .list_box .list_class li 下橫示選單字型大小 */ .content_box .list_box .list_class li { font-size: 1.4rem;} /* color: #000; 使用實際的顏色值 */ @media (min-width: 600px) and (max-width: 1200px) { .content_box .list_box .list_class li { font-size: calc(1.4rem + (1.5-1.4) * ((100vw - 600px) / (1200 - 600))); } } @media (min-width: 1200px) { .content_box .list_box .list_class li { font-size: 1.5rem;} } /* 下橫示選單字型大小END */ /* 網頁內容 */ /* .content-text {width:auto;text-align:left;padding-left:50px; padding-right:80px; line-height:188%;} */ /* .content-text { line-height:188%; } */ /* .content-text h1 { font-size: 1.8rem; position:relative; top:320px; color: #660033; display: inline; } */ /* 不要產生產生間距加 display:inline */ /* .content-text h2, .content-text h3 { font-size:1.6rem; position:relative; top:20px; color:#800080; display:inline;} */ /* 網頁內容 -H2 color:#1D3956; 位置無法調整時 --> 改用相對位置 position:relative; top:10px; */ /* .content-text h4, .content-text h5 { font-size:1.6rem; position:relative; top:20px; color:#333333; display:inline;} */ /* 網頁內容 -H2 color:#1D3956; 位置無法調整時 --> 改用相對位置 position:relative; top:10px; */ /* .content-text h3 { font-size:1.8rem; line-height:250%; position:relative; top:20px; margin-bottom:30px; color:#1D3956; display:inline;} */ /* 位置無法調整時 --> 改用相對位置 position:relative; top:10px; */ /* .content-text IMG */ /* 2023-11-12--- .content-text img { height:auto; box-shadow: 1px 3px 4px #888888;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;} */ .content-text img { height: auto; box-shadow: 1px 3px 4px #888888; border-radius: 8px; /* 直接使用border-radius */ } /* 隱藏捲軸 .content-text { overflow-x:hidden; overflow-y:auto;} */ /* .container-width { max-width:95%;margin: 0px auto;} */ /* .container-width 版面大小 */ @media only screen and (min-width: 1920px) { .container-width { max-width:92%;margin: 0px auto;} .container-width dfn { font-size:22px;} } @media only screen and (min-width: 1600px) and (max-width: 1920px) { .container-width { max-width:94%;margin: 0px auto; } .container-width dfn { font-size:22px;} } @media only screen and (min-width: 1280px) and (max-width: 1600px) { .container-width { max-width:96%;margin: 0px auto; } .container-width dfn { font-size:22px;} } @media only screen and (min-width: 1024px) and (max-width: 1280px) { .container-width { max-width:94%;margin: 0px auto;} .container-width dfn { font-size:22px;} } @media only screen and (min-width: 544px) and (max-width: 1024px) { .container-width { max-width:92%;margin: 0px auto;} .container-width dfn { font-size:20px;} } @media only screen and (max-width: 544px) { .container-width { max-width:90%;margin: 0px auto;} .container-width dfn { font-size:22px;} } @media only screen and (min-width: 1024px) { .container-width-criticism { max-width:96%;margin: 0px auto;} /* 評論表單 PC */ } @media only screen and (max-width: 1024px) { .container-width-criticism { max-width:92%;margin: 0px auto;} /* 評論表單 RWD */ } @media only screen and (max-width: 479px) { .content-text img {max-width:96%;} } @media only screen and (max-width: 768px) { .content-text img { margin-top:15px; margin-bottom:10px;} } @media only screen and (min-width: 480px) and (max-width: 767px) { .content-text img {max-width:520px;} } @media only screen and (min-width: 768px) and (max-width: 959px) { .content-text img {max-width:720px;} } @media only screen and (min-width: 960px) and (max-width: 1199px) { .content-text img {max-width:780px;} } @media only screen and (min-width: 1200px) and (max-width: 1599px) { .content-text img {max-width:900px;} } @media only screen and (min-width: 1600px) and (max-width: 1919px) { .content-text img {max-width:1280px;} } @media only screen and (min-width: 1920px) { .content-text img {max-width:1500px;} } /* .content-text IMG END */ /* .main { padding:0 10px; } ====== */ /* touch menu */ .top-main-content { display:none; } .touch-top-wrapper .touch-logo img { } /* LOGO圖 */ .touch-toggle li { height:120px;} .touch-toggle li a { height:120px; } .touch-toggle li i { width:28px; height:28px; margin-top:10px; } .touch-top-wrapper { padding:0px 0px; background-color:#555; } /* 抬頭背景.位置 */ .touch-logo { float:left; } /* .touch-navigation { display:none; } */ .touch-navigation { display:none; } /* 常態開啟 */ .touch-toggle-wrapper { margin:0 0px; } .touch-toggle { position:absolute; right:15px; top:42px; } /* 選單三槓右間距＆垂直位置 */ /* .touch-toggle li { float:left; height:70px; padding:0 12px; text-align:center; } */ /* .touch-toggle li a { height:70px; } */ /* .touch-toggle li:hover, .touch-toggle li:active { } */ .touch-toggle .touch-toggle-item-first { border-left:none; } .touch-toggle .touch-toggle-item-last { border-right:none; } .touch-toggle li a { display:block; font-size:20px; } /* 導航span文字大小 */ /* .touch-toggle li i { display:inline-block; width:32px; height:32px; overflow:hidden; margin-top:100px; background-repeat:no-repeat; background-position:center center; background-size:contain; } */ .touch-toggle li i { display:inline-block; overflow:hidden; background-repeat:no-repeat; } /* 選單三槓顯示 */ .touch-toggle .touch-icon-language { background-image:url(../../img/touch-icon-language.png); } .touch-toggle .touch-icon-user { background-image:url(../../img/touch-icon-user.png); } .touch-toggle .touch-icon-search { background-image:url(../../img/touch-icon-search.png); } .touch-toggle .touch-icon-menu { background-image:url(../../img/menu.png); } /* 選單三槓圖 */ .touch-toggle li span { display:none; text-align:center; } .drawer-section { background-color:#444; padding:20px; display:none; } /* 選單文字背景- */ .drawer-section { background-color:#e0a502; } /* 選單整體背景 - 選單最底層 */ .drawer-section ul li i { padding:4px; } /* 選單＋－控制 */ .drawer-section-menu { padding:0px; } /* 選單內縮顯示左右間距 */ .touch-menu ul li { border-bottom:2px solid #efcf79; position:relative; background-color:#6A0DAD;} /*#efcf79選單文字間線 background-color:#6A0DAD;主選單文字顯示區，背景 #6A0DAD 橙 */ /*.touch-menu ul li a { color:#fff; display:block; font-family:"微軟雅黑","新細明體","Microsoft Yahei","mingliu","Arial Black","verdana"; font-weight:bold; font-size:20px; line-height:180%; height:50px; line-height:52px; padding-left:20px; } */ /*.touch-menu ul li a { color:#fff; display:block; font-family:"微軟雅黑","新細明體","Microsoft Yahei","mingliu","Arial Black","verdana"; font-weight:bold; font-size:20px; height:36px; padding:20px 0 0 20px; } 選單文字大小顏色*/ .touch-menu ul li a { color:#fff; display:block; font-size:20px; padding-left: 20px; height: 50px; line-height: 60px; } /*選單文字大小顏色*/ .touch-menu-left-margin { padding-left: 35px; /* 調整左邊距大小以控制，群組選單內容向右移動的程度 */ } /* 群組選單圖位置 */ @media only screen and (max-width: 554px) { .touch-menu ul li img { margin-top:-10px; padding-right:6px;} } @media only screen and (min-width: 555px) and (max-width: 1024px) { .touch-menu ul li img { margin-top:-12px; padding-right:6px; } } @media only screen and (min-width: 1024px) { .touch-menu ul li img { padding-right:6px; } } /* .touch-menu ul li a:link { background-color:#444; } 選單初始未連結-- */ .touch-menu ul ul li a { color:#fff; display:block; font-family:"微軟雅黑","新細明體","Microsoft Yahei","mingliu","Arial Black","verdana"; font-weight:bold; font-size:20px; height:38px; line-height:38px; padding-left:20px; } /*次選單文字大小顏色*/ .touch-menu ul li a:hover, .touch-menu ul li a:active { background-color:#fab802; } /* 滑鼠移到選單文字的背景 #fab802 */ /* .touch-menu ul li a:visited { background-color:#cc3306; } 選單已被點擊連結-- */ /* 選單＋－控制 */ .touch-menu ul li i { position:absolute; top:20px; right:30px; display:block; width:13px; height:13px; overflow:hidden; background-position:center center; background-repeat:no-repeat; background-size:contain; } /*選單＋－背景*/ .touch-menu ul li i.touch-arrow-down { background-image:url(../../img/touch-arrow-d.png); } /*選單下圖示箭頭*/ .touch-menu ul li i.touch-arrow-up { background-image:url(../../img/touch-arrow-u.png); } /*選單上圖示箭頭*/ /*.touch-menu ul ul { display:none; margin:0; padding:10px 0px 0px 0px; } 群組背景 padding */ /* .touch-menu ul ul { margin:0; padding:10px 0px 0px 0px; background-color:#cc3307;} padding:0 1px 0px 1px; 群組邊框*/ /* .touch-menu ul ul { margin:0; padding:0px 0px 0px 0px; background-image:url(cart.jpg);} 群組背景 padding + 邊框padding:0 2px 0px 2px; */ .touch-menu ul ul { display:none; } /* 使用 display:none; 將群組次選單預設隱藏，移除則顯示，群組主選單，預使用背景，由 rwd_menu添加