@charset "utf-8";
/* 簡單流變媒體
   注意: 流變媒體要求您必須移除 HTML 中媒體的高度和寬度屬性
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 不支援最大寬度，因此寬度預設為 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver 流變格線屬性
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	10;
	dw-gutter-percentage:	25;
	
	靈感來自於 Ethan Marcotte 的「具回應功能的網頁設計」 
	http://www.alistapart.com/articles/responsive-web-design
	
	以及 Joni Korpi 的「黃金格線系統」
	http://goldengridsystem.com/
*/

/* 行動版面: 480px 以下。 */



.Tips {
  background-color: white;
  top: 0;
  text-align:left;
  font-size: 30px; font-weight:bold;font-family:Microsoft JhengHei;
  color:#a40101;
  padding-top:20px;
  padding-bottom:5px;
}

.Tips26 {
  background-color: white;
  top: 0;
  text-align:left;	
  font-size: 30px; font-weight:bold;font-family:Microsoft JhengHei;
  color:#012ba4;
  padding-top:20px;
  padding-bottom:5px;
}

.half-box {
  border-left: 0px solid black;
  border-top: 0px solid black;
  position: relative;
  padding: 40px;
}

.half-box > .title {

  padding: 0 10px;
  padding-bottom:20px;
  position: absolute;
  top: 0;
  left: 30px;
  font-size: 65px; font-weight:bold;font-family: DFKai-sb;
  transform: translateY(-50%);
}

.half-box-right {
  border-right: 0px solid black;
  border-top: 0px solid black;
  position: relative;
  padding: 40px;
}

.half-box-right > .title-right {
  background-color: white;
  padding: 0 10px;
  position: absolute;
  top: 0;
  right: 30px;
  padding-bottom:20px;
  padding-top:30px;
  font-size: 65px; font-weight:bold;font-family: DFKai-sb;
  transform: translateY(-50%);
}

.half-box-end {
  border-top: 0px solid black;
  position: relative;

}

.half-box-end-mini {
  border-top: 0px solid black;
  position: relative;
  text-align:center;

}

.img {
  padding:10%;
  position: relative;
  text-align:center;

}

.half-box-end > .title {

  padding: 0 10px;
  padding-bottom:20px;
  position: absolute;
  top: 0;
  left: 0px;
  font-size: 65px; font-weight:bold;font-family: DFKai-sb;
  transform: translateY(-50%);
}
/******************************分隔線********************************/

.loadbox{position:fixed;width:100%;height:100%;background-color:#fff;z-index:9999;}
.loadbox .loadbk{background-color: #CCC;position: absolute;width: 20%;margin: 0 auto;height: 5px;top: 50%;left: 40%;}
.loadbox .loadbk .load{background-color:#4304c4;height:100%;width:0%;}
/******************************分隔線********************************/
.box{display:inline-block;transition:all 0.4s;text-align:center;vertical-align:middle;}
.fullbox{width:100%;padding: 2%;cursor:pointer;line-height:25px;}.halfbox{width:50%;padding:1.5%;cursor:pointer;}
.box-1over3{width:33%;padding: 1.5%;cursor:pointer;}.box-1over4{width:25%;cursor:pointer;}
.fullbox:hover , .halfbox:hover , .box-1over3:hover , .box-1over4:hover{}

.page > .fullbox , .page > .halfbox , .page > .box-1over3 , .page > .box-1over4{padding:0;cursor: default;}
/******************************分隔線********************************/
.header-box{width: 100%;border-bottom:#4304c4 5px solid;}
.header-box .header{
	width: 80%;
    max-width: 1536px;
    min-width: 768px;
    margin: 0 auto;
    text-align: center;
}
.header-box .header .logo{
	width: 27%;
    padding: 1.5% 1%;
	vertical-align:middle;
}
.header-box .header .logo:hover{}

.header-box .header .button-box{
	width:73%;
	vertical-align:middle;
	text-align:right;
}
.header-box .header .button-box .button{
	width: 33px;
    border-right: #808080 0px solid;
    padding: 2px 4px 2px 2px;
	vertical-align: middle;
}
.header-box .header .button-box .lang-bt-box{
	vertical-align: middle;
    font-size: 35px;
    color: #9e9e9e;
}
.header-box .header .button-box .lang-bt-box .lang-button{
	font-size: 35px;
    color: #4304c4;
}.header-box .header .button-box .lang-bt-box .lang-button.active{
	font-size: 35px;
    color: #4304c4;
}
.header-box .header .button-box .lang-bt-box .lang-button:hover{
	color: #4304c4;
}



/******************************分隔線********************************/
.body{width:100%;}


.body .news-box .page{
	width: 70%;
    min-width: 768px;
    max-width: 1280px;
    display: block;
    margin: 0 auto;
    background: #fff;
    padding: 1.5% 1%;
    box-shadow: #656565 0px 5px 10px 1px;
}

.body .news-box .page .title{margin-top: 1%;}
.body .news-box .page .title .line{width: 100%;left:0;position: absolute;height: 2px;background: #8e8e8e;}
.body .news-box .page .title .line.line01{top:45%;}
.body .news-box .page .title .line.line02{top:55%;}
.body .news-box .page .title .text{
	background-color: #fff;
    font-size:22px;font-size: 2.2rem;
    display: inline-block;
    padding: 0.5% 2%;
    color: #8e8e8e;
}
.body .news-box .page .sub-title{
	font-size: 10px;
    font-size: 1rem;
    margin: 2% 0 0;
    text-align: left;
	transition:all 0.2s;
    color: #525252;
    cursor: pointer;}
	
.body .news-box .page .sub-title:hover{color: #000;}
/******************************分隔線********************************/

.body .news-box .bigtitle{}
.body .news-box .bigtitle .text{
    width: 35%;
    min-width: 250px;
    padding: 1% 2.5%;
    margin: 0 auto;
}

/******************************分隔線********************************/
.body .news-box .pagetop{
    margin-top: -10%;
	background-image:url(../../../../E_Letter_Mar2018/E_Letter_Jan2018/images/icon/bg_category.jpg);
	background-position: top;
    background-repeat: repeat-x;
    background-size: 55%;
}

/******************************分隔線********************************/
.body .news-box .notepage{}
.body .news-box .notepage .box{padding:0;}
.body .news-box .notepage .box:hover{padding:0;}
.body .news-box .notepage .box .in-title{
    width: 100%;
    padding: 1%;font-size:22px;
    font-size: 2.2rem;
    background: #4304c4;
    color: #fff;
}
.body .news-box .notepage .box .in-title .bt-box{
    height: 100%;
    position: absolute;
	top:0;
	right: 5%;
}
.body .news-box .notepage .box .in-title .bt-box .bt-bar{
    width: 30px;
    height: 5px;
	position:absolute;
    border-radius: 50px;
    background: #fff;
	transition:ease-in 0.2s;
}
.body .news-box .notepage .box .in-title .bt-box .bt-bar.bartop{top:20%;}
.body .news-box .notepage .box .in-title .bt-box .bt-bar.barmid{top:40%;}
.body .news-box .notepage .box .in-title .bt-box .bt-bar.barbtm{top:60%;}

.body .news-box .notepage .box .in-title .bt-box:hover .bartop{top:25%;}
.body .news-box .notepage .box .in-title .bt-box:hover .barbtm{top:55%;}

.body .news-box .notepage .box .in-title .bt-box .bt-bar.bartop.active{
	top: 40%;
    transform: rotate(45deg);
}
.body .news-box .notepage .box .in-title .bt-box .bt-bar.barmid.active{
	opacity:0;
}
.body .news-box .notepage .box .in-title .bt-box .bt-bar.barbtm.active{
    top: 40%;
    transform: rotate(-45deg);
}

.body .news-box .notepage .box .in-summery{
    font-size:15px;font-size: 1.5rem;
    padding: 2% 8%;
    border: 1px rgba(167, 167, 167, 0.48) solid;
    border-top-width: 0px;
    color: #464646;
    line-height: 1.5;
    letter-spacing: 4px;
}
/******************************分隔線********************************/
.showlayer{position:relative;text-decoration:none;color:#666;font-size: 10px;}  
.showlayer:hover {color:#000000;font-size: 14px;}

.showlayer span {display: none;}
.showlayer:hover span {display:block;position:fixed; top:0px; left:20px; width:220px; height:100%; padding:10px; border:2px solid #bfbbbb; text-align:center; background-color: #FFF; z-index:1000;}

.KM { font-size:25px; font-weight:bold; color:#a40101;}
.KM26 { font-size:25px; font-weight:bold; color:#012ba4;}
.ProductName { font-size:18px; font-weight:bold; color:#424242;}
.caption { font-size:16px; font-weight:bold;}
.new { font-size:16px; font-weight:bold; color:#C00;}
.price { font-size:16px; font-weight:bold;}


/* 表格版面: 481px 到 768px。樣式繼承自: 行動版面。 */

@media only screen and (min-width: 481px) {

}

/* 桌面版面: 769px 到最大 1232px。樣式繼承自: 行動版面和表格版面。 */

@media only screen and (min-width: 769px) {

}