@charset "utf-8";
/* CSS Document */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

a {
	text-decoration:none;
}

.banner-logo{
	background-color: rgba(255,255,255,1.00);
	
}

.banner-text p{
	display: inline;	
}

.change-langue p{
	border:solid rgba(255,255,255,1.00);
	color:rgba(255,255,255,1.00);
	display: inline;
	padding: 2px;
	border-radius: 6px;
	line-height: 35px;
}

.change-langue a{
	text-decoration: none;
}



.banner-text a{
	text-decoration: none;
	font-size: 1.2rem;
	color: rgba(255,255,255,1.00);
}

.btnlogin{
	background-color: #000;
}

.btnlogin:hover{
	background-color: #000;
}

.banner-login-text{
	font-size: 1.2rem;
	padding-left: 25px;
	line-height: 0.6;
	padding-top: 9px;
	color:#fff;
}

.banner-login{
	background: #000;
}

.login-1{
	float:left;
    width:65px;
	font-size: 1.2rem;
	font-weight:bold;
	padding-left: 5px;
	color:#fff;
}

.login-2{
	width: calc(100% - 65px);
}

.login-icon input{
	background: #fc8700;
	border-radius: 10px;
	padding: 5px;
}

.reg a{
	text-decoration: none;
	color: #ffbf00;
	font-weight: bold;
}

.reg{
	text-align: center;
}

.adv-1{
	width: 720px;
	height: 90px;
}


.article-pic p{
	color:#2d9d96;
	padding-top: 5px;
}

.article-ad {
	text-align: center;
	padding-bottom: 10px;
}

.article-reporter{
	font-size: 0.8rem;
}

.navbar-nav {
  width: 100%; 
  display: flex;
  flex-wrap: no-wrap;
  justify-content: space-between;
}

.navbar-nav > li {
  flex-grow: 1;
}

.article-title h2{
	color:#006699;
}

.keyword p{
	display: inline-block;
}

.keyword u{
	text-decoration: none;
}

.keyword{
	padding-bottom: 6px;
}

.keyword a{
	border: 1px solid rgba(130,130,130,1.00);
	border-radius: 1rem;
	padding: 5px 10px;
	color: rgba(255,110,0,1.00);
	text-decoration: none;
}

.relative-news p{
	padding-left: 10px;
	color: #2d9d96;
	margin:2px auto;
}

.relative-news a{
	text-decoration:none;
	color: #2d9d96;
}

.relative-article p{
	padding-left: 10px;
}


.relative-article a{
	text-decoration:none;
	color: #2d9d96;
}

.relative-product p{
	margin:2px auto;
	padding-left: 10px;
}

.relative-product a{
	text-decoration:none;
	color: #2d9d96;
}
.footer-text p{
	display: inline-block;
	font-size: 0.8rem;
}

.footer-text a{
	text-decoration: none;
	color: #FFFFFF;
}


.footer{
	background: #5E5E5E;
	color: #FFFFFF
}

/*圖說文字*/
.adv { 
	color:#2d9d96;
	font-size:11px;
	line-height:13px;
}

.b_logo{
	max-width:300px;
	max-height:80px;
}

.show-title a{	
	color:#000;
	font-weight:bold;	
}
.show-title1 a{	
	color:#000;
	font-weight:bold;	
}

.show-title{
	font-size:1.5em;
	line-height: 1.5em; /* 設定行高 */
      height: 4.5em; /* 三行的高度 (1.5 * 3 = 4.5) */
      overflow: hidden; /* 隱藏超出部分 */
      text-overflow: ellipsis; /* 添加省略號 */
      display: -webkit-box;
      -webkit-line-clamp: 3; /* 限制顯示的行數 */
      -webkit-box-orient: vertical;
}

.show-title1{
	font-size:1em;
	line-height: 1em; /* 設定行高 */
      max-height: 3em; /* 三行的高度 (1.5 * 3 = 4.5) */
      overflow: hidden; /* 隱藏超出部分 */
      text-overflow: ellipsis; /* 添加省略號 */
      display: -webkit-box;
      -webkit-line-clamp: 3; /* 限制顯示的行數 */
      -webkit-box-orient: vertical;
}



.price{
	color:#ff0000;
	font-weight:bold;
}


.typetitle{
	background-color: #000;
	color:#fff;
	border-radius:5px;
	padding: 5px 10px;
	font-size:1rem;
}
.typetitlebox{
	padding:12px 0;
}


.author1, .publisher1, .publishdate1{
	font-size:0.8rem;
}

.price1{
	color:#ff0000;
	font-weight:bold;
	font-size:0.8rem;
}

.cate-side{
	color:#fff;
	background-color:#5F8D4E;
	padding:5px 0;
	
}

.bg-head{
	background-color: #5dc2c9;
	
	
}

.mympc{
	padding-top:4px;
}
.mpc_icon {
	width:30%;
}
.mympc a{
	color:#000;
}


.headsearch1{
	line-height: 18px;
	background-color: #929292;
	border: none;
	border-radius:  0 3px 3px 0;
	color: #FFFFFF;
	padding:2px 3px;
}

.nav_color{
	background-color:#2c80c4;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

 .navbar-toggler {
      border-radius: 50%;
      padding: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
.slide_in{
	background-color:#f2f2f2;		
	padding:20px 15px;
	height:100%;
	border-radius:10px;
}
.slide_in1{
	background-color:#f2f2f2;		
	padding:15px 10px;
	height:100%;
	border-radius:5px;
}

.des_in{
	height: 4.5em; /* 三行的高度 (1.5 * 3 = 4.5) */
      overflow: hidden; /* 隱藏超出部分 */
      text-overflow: ellipsis; /* 添加省略號 */
      display: -webkit-box;
      -webkit-line-clamp: 3; /* 限制顯示的行數 */
      -webkit-box-orient: vertical;
}

.swiper-button-prev {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill%3D%22%23fff%22%20height%3D%2232px%22%20width%3D%2232px%22%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20%0A%20%20%20%20%20viewBox%3D%220%200%20512.01%20512.01%22%20xml%3Aspace%3D%22preserve%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cfilter%20id%3D%22shadow%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CfeDropShadow%20dx%3D%2210%22%20dy%3D%2210%22%20stdDeviation%3D%225%22%20flood-color%3D%22rgba%280%2C0%2C0%2C0.5%29%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2Ffilter%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20filter%3D%22url%28%23shadow%29%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M505.756%2C475.589L286.171%2C256.005L505.755%2C36.421c6.101-6.101%2C7.936-15.275%2C4.629-23.253%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20c-3.285-7.979-11.093-13.163-19.712-13.163H256.005c-5.675%2C0-11.093%2C2.24-15.083%2C6.251L6.256%2C240.922%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20c-8.341%2C8.341-8.341%2C21.824%2C0%2C30.165l234.667%2C234.667c3.989%2C4.011%2C9.408%2C6.251%2C15.083%2C6.251h234.667%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20c8.619%2C0%2C16.427-5.184%2C19.712-13.163C513.692%2C490.863%2C511.857%2C481.69%2C505.756%2C475.589z%22%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E") !important;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 48px; /* 根據需要調整大小 */
  height: 48px; /* 根據需要調整大小 */
}

.swiper-button-next {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill%3D%22%23fff%22%20height%3D%22800px%22%20width%3D%22800px%22%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20%0A%20%20%20%20%20viewBox%3D%220%200%20512.01%20512.01%22%20xml%3Aspace%3D%22preserve%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cfilter%20id%3D%22shadow%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22150%25%22%20height%3D%22150%25%22%3E%0A%20%20%20%20%20%20%3CfeDropShadow%20dx%3D%2210%22%20dy%3D%2210%22%20stdDeviation%3D%225%22%20flood-color%3D%22black%22%20flood-opacity%3D%220.5%22%2F%3E%0A%20%20%20%20%3C%2Ffilter%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cg%20filter%3D%22url%28%23shadow%29%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M505.754%2C240.923L271.088%2C6.256c-3.989-4.011-9.408-6.251-15.083-6.251H21.338c-8.619%2C0-16.427%2C5.184-19.712%2C13.163%0A%20%20%20%20%20%20c-3.307%2C7.979-1.472%2C17.152%2C4.629%2C23.253l219.584%2C219.584L6.256%2C475.59c-6.101%2C6.101-7.936%2C15.275-4.629%2C23.253%0A%20%20%20%20%20%20c3.285%2C7.979%2C11.093%2C13.163%2C19.712%2C13.163h234.667c5.675%2C0%2C11.093-2.24%2C15.083-6.251l234.667-234.667%0A%20%20%20%20%20%20C514.096%2C262.747%2C514.096%2C249.264%2C505.754%2C240.923z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A") !important;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 48px; /* 根據需要調整大小 */
  height: 48px; /* 根據需要調整大小 */
}


.swiper-button-prev::after,
.swiper-button-next::after {
  display: none; /* 隱藏默認的箭頭圖標 */
}

.mpcimg img{
	width: 100%;
	height: auto;
	box-shadow:4px 4px 4px #ccc;
	
}
.mpcimg{
	text-align: center;
}

.mcp_link{
	max-width:100px;
}

.search_i{
	color:#000;
	font-weight: bold;
	-webkit-text-stroke: 2px;
}

.new_mpcimg img{
	width: 100%;
	height: auto;	
	box-shadow:4px 4px 4px #ccc;
}	

.new_mpcimg{
	text-align: center;	
	padding:20px;
}	
.space{
	height:1.5rem;
}
.responsive-svg {
    width: 100%;
    height: auto;
}
.d_pad{
	padding:0 45px
}
.SVGICON{
	max-width: 100px;
	width: 100%;
	height: auto;
}

.SVGICON1{
	max-width: 40px;
	width: 100%;
	height: auto;
}

.icon-links .icon-link {
    margin-right: 0.5rem; /* 縮小間距 */
  }

  /* 取消最後一個圖示的右間距 */
  .icon-links .icon-link:last-child {
    margin-right: 0;
  }
  
.icon-links .icon-link {
    margin-right: 0.5rem; /* 縮小間距 */
  }

  /* 取消最後一個圖示的右間距 */
  .icon-links .icon-link:last-child {
    margin-right: 0;
  }
.roll_info{
	font-size:1.2rem;
	font-weight:600;
}
.mpc_roll{
	padding:0 4rem;
}

.roll_info1{
	color:#de0b00;
}
.typetitle2{
			padding-left:8px;
}
.ADV_BG{
	background-image:url("/MPC/IMG/PC_BG.PNG");
	background-repeat:no-repeat;
	text-align:center;
}

	/* 登入表單容器 */
/* 登入表單容器 */
.login-container {
    max-width: 400px; /* 限制表單寬度 */
    margin: 0 auto; /* 置中 */
    padding: 15px; /* 減少內距 */
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background-color: #f9f9f9;
}

/* 標籤文字 */
.login-label {
    display: block;
    font-size: 13px; /* 減小文字大小 */
    margin-bottom: 4px; /* 減少與輸入框的間距 */
    color: #333;
}

/* 輸入框 */
.login-input {
    width: 100%;
    padding: 8px; /* 減少內距 */
    margin-bottom: 12px; /* 減少每個輸入框之間的間距 */
    border: 1px solid #000;
    border-radius: 5px;
    font-size: 13px; /* 減小文字大小 */
    box-sizing: border-box; /* 確保寬度包含內距和邊框 */
}

/* 按鈕 */
.login-button {
    width: 100%;
    padding: 8px; /* 減少內距 */
    background-color: #000;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 14px; /* 減小按鈕文字大小 */
    cursor: pointer;
    text-align: center;
}

/* 按鈕的懸停效果 */
.login-button:hover {
    background-color: #444;
}

/* 連結容器 */
.login-links {
    margin-top: 15px; /* 減少與按鈕的間距 */
    text-align: center;
    font-size: 13px; /* 減小文字大小 */
}

/* 連結樣式 */
.login-link {
    margin: 0 8px; /* 減少連結之間的間距 */
    text-decoration: none;
    color: #007bff;
}

.login-link:hover {
    text-decoration: underline;
}

/* 使用者資訊容器 */
.user-info {
    font-size: 14px; /* 基本字體大小 */
    color: #333;
}

/* 問候語容器 */
.greeting {
    font-size: 20px; /* 字體變大 */
    font-weight: bold;
    margin-bottom: 8px; /* 與動作區域的間距 */
}

/* 使用者 ID */
.user-id {
    color: #000; /* 黑色字體 */
}

/* 動作連結容器 */
.user-actions {
    display: flex;
    gap: 15px; /* 連結間距 */
    font-size: 14px;
}

/* 連結樣式 */
.user-link {
    text-decoration: none;
    color: #007bff; /* 藍色 */
}

.user-link:hover {
    text-decoration: underline; /* 滑過時顯示底線 */
}

/* 登出連結 */
.logout-link {
    color: #d9534f; /* 登出為紅色 */
}

.logout-link:hover {
    color: #c9302c; /* 滑過時加深 */
}

.list_tail{
	font-size:0.8rem;
}
.bg-tail{
	background-color:#000;
	color:#fff;
}

.sidebar-thing a{
	color:#3727a1;
}

.cf_t{
	padding-top:3px;
	font-size:1.3rem;
	font-weight:600;
	text-align: center;
}
.typetitle1 {
                /* 確保字體更粗 */
                font-weight: 700 !important; 
                font-size: 1.25rem; /* 保持原大小或根據需要調整 */
            }
            /* 原始要求 2: typetitlebox1整個底色是深綠色，跟上下多出一點留白空間，typetitle2字體顏色白色 */
            .typetitlebox1 {
                background-color: #006400; /* 深綠色 (DarkGreen) */
                padding: 0.5rem 0; /* 上下留白空間 */
                margin-top: 0.75rem !important; /* 與上方的區塊增加距離 */
                margin-bottom: 0.75rem !important; /* 與下方的區塊增加距離 */
            }
            .typetitlebox1 .typetitle2 {
                color: #ffffff; /* 白色字體 */
                padding-left: 1rem; /* 可選: 增加標題左側內邊距 */
            }
           	
@media (max-width: 768px) {
        .b_logo {
            width: 35vw; /* 使用 viewport 寬度的 30% */
			padding-top:8px;
        }
		.new_mpcimg{
			text-align: center;	
			padding:4px;
		}	
		.swiper-button-prev {
			  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill%3D%22%23fff%22%20height%3D%2232px%22%20width%3D%2232px%22%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20%0A%20%20%20%20%20viewBox%3D%220%200%20512.01%20512.01%22%20xml%3Aspace%3D%22preserve%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cfilter%20id%3D%22shadow%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CfeDropShadow%20dx%3D%2210%22%20dy%3D%2210%22%20stdDeviation%3D%225%22%20flood-color%3D%22rgba%280%2C0%2C0%2C0.5%29%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2Ffilter%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20filter%3D%22url%28%23shadow%29%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M505.756%2C475.589L286.171%2C256.005L505.755%2C36.421c6.101-6.101%2C7.936-15.275%2C4.629-23.253%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20c-3.285-7.979-11.093-13.163-19.712-13.163H256.005c-5.675%2C0-11.093%2C2.24-15.083%2C6.251L6.256%2C240.922%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20c-8.341%2C8.341-8.341%2C21.824%2C0%2C30.165l234.667%2C234.667c3.989%2C4.011%2C9.408%2C6.251%2C15.083%2C6.251h234.667%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20c8.619%2C0%2C16.427-5.184%2C19.712-13.163C513.692%2C490.863%2C511.857%2C481.69%2C505.756%2C475.589z%22%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E") !important;
			  background-size: contain;
			  background-repeat: no-repeat;
			  background-position: center;
			  width: 24px; /* 根據需要調整大小 */
			  height: 24px; /* 根據需要調整大小 */
			}
		.swiper-button-next {
			  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill%3D%22%23fff%22%20height%3D%22800px%22%20width%3D%22800px%22%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20%0A%20%20%20%20%20viewBox%3D%220%200%20512.01%20512.01%22%20xml%3Aspace%3D%22preserve%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cfilter%20id%3D%22shadow%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22150%25%22%20height%3D%22150%25%22%3E%0A%20%20%20%20%20%20%3CfeDropShadow%20dx%3D%2210%22%20dy%3D%2210%22%20stdDeviation%3D%225%22%20flood-color%3D%22black%22%20flood-opacity%3D%220.5%22%2F%3E%0A%20%20%20%20%3C%2Ffilter%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cg%20filter%3D%22url%28%23shadow%29%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M505.754%2C240.923L271.088%2C6.256c-3.989-4.011-9.408-6.251-15.083-6.251H21.338c-8.619%2C0-16.427%2C5.184-19.712%2C13.163%0A%20%20%20%20%20%20c-3.307%2C7.979-1.472%2C17.152%2C4.629%2C23.253l219.584%2C219.584L6.256%2C475.59c-6.101%2C6.101-7.936%2C15.275-4.629%2C23.253%0A%20%20%20%20%20%20c3.285%2C7.979%2C11.093%2C13.163%2C19.712%2C13.163h234.667c5.675%2C0%2C11.093-2.24%2C15.083-6.251l234.667-234.667%0A%20%20%20%20%20%20C514.096%2C262.747%2C514.096%2C249.264%2C505.754%2C240.923z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A") !important;
			  background-size: contain;
			  background-repeat: no-repeat;
			  background-position: center;
			  width: 24px; /* 根據需要調整大小 */
			  height: 24px; /* 根據需要調整大小 */
			}
		.d_pad{
			padding:0 10px
		}
		
		.typetitle{
			background-color: #000;
			color:#fff;
			border-radius:5px;
			padding: 5px 10px;
			font-size:1rem;				
		}		
		.typetitlebox{
			padding:10px 0;
		}
		.roll_info{
			font-size:1rem;
			font-weight:600;			
		}
		.mpc_roll{
			padding:0 2rem;
		}
		.SVGICON1{
			max-width: 30px;
			width: 100%;
			height: auto;
		}
		.roll_info1_div{
			margin:auto;
			padding-top:3px;
		}
		.roll_info_div{
			margin:auto;
			text-align:center;
		}	
		.custom-toggler .navbar-toggler-icon {
			width: 20px; /* 調整寬度 */
			height: 20px; /* 調整高度 */
		  }

		  .custom-toggler {
			padding: 0.25rem 0.25rem; /* 調整按鈕的內邊距 */
		  }
		.SVGICON2{
			width: 30px;
		}
}