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

html { -webkit-text-size-adjust: 100%; /*解決IOS 翻轉螢幕字型會變大變小的問題 Prevent font scaling in landscape while allowing user zoom */ }
body { font-family:\5FAE\8EDF\6B63\9ED1\9AD4,Microsoft JhengHei,MingLiU,sans-serif; background:#f8f8f8;}
nav, div, ul, li, input { box-sizing:border-box;}
input { padding:10px; margin:5px 0; color:#000; background:#fff; border:solid; outline:none;border-width:1px;}
img { width:100%;}

.header { width:100%; background:#eeeeee;}
.top { width:1000px; height:110px; position:relative; margin:0 auto; }
.logo { width:330px; position:absolute; top:44px; left:255px;}
.header_pic { width:180px; position:absolute; bottom:-45px; right:210px;}

.title { width:100%; height:40px; background:#2bae64; color:#fff; font-size:1.5em; display:flex; justify-content:center; align-items:center;}

.btn-bg { margin:30px 0;}
.btn_search { margin:30px 0;}
.btn a { width:180px; margin:0 auto; display:flex; justify-content:center; align-items:center; padding:10px 0; font-size:1.25em; color:#f7893a; background:#fff;  border:3px solid #fdb67e; text-decoration:none;}
.btn a:hover { color:#fff; background:#fdb67e; transition:.5s;}
.btn a i { font-size:1em; margin-left:8px; color:#fdb67e; transition:.5s;}
.btn a:hover i { color:#fff; transition:.5s;}

h1 { font-size:1.25em; color:#ff6e00; margin-top:25px;}
h2 { font-size:1.25em; color:#575757; padding-bottom:24px; border-bottom:1px solid #dddddd;}
h2 span { color:#ff6e00;}
.menu-title { width:150px; height:35px; font-size:1.125em; color:#575757; background:#f3f3f3; display:flex; justify-content:center; align-items:center; flex-direction:row; margin-bottom:10px; position:relative;}
.menu-title img { width:25px; margin-right:5px;}
h4 { font-size:1em; color:#000; line-height:1.25em; font-weight:bold;}
p { font-size:1em; line-height:1.25em; color:#575757; }
p span { color:#ff6e00;}

.w100pa { width:100%;}
.w300 { width:480px;}
.content { margin:0 auto; padding-top:0px;}
.content_result { width:900px; background:#fff; margin:0 auto; margin-top:10px; padding:25px;}

.verify_code { display:flex; flex-direction:row; align-items:center;}
.verify_code input { width:40%; margin-right:10px;}
.verify_code i { color:#888888; font-size:1.5em; cursor:pointer; margin-left:10px;}
.verify_code img { width:auto;}

.banner { width:100%; max-width:600px; margin:0 auto; margin-top:10px;}

.result { display:flex; flex-direction:row;}

.m_news { display:none;}

.info { margin:25px 25px 0 0; padding:0 50px 0 25px; border-right:1px solid #dddddd;}
.info p { margin-bottom:20px;}

.shipping { margin:25px 0 0 0; padding:0 25px;}
ul.timeline { display:block; margin:40px 0 0 50px;}
ul.timeline li { height:65px; position:relative; border-left:1px solid #d8d8d8;}
ul.timeline li:last-child { border-left:none;}
ul.timeline li p { width:350px; position:absolute; top:-1.2em; left:2em;}
ul.timeline li .dot { width:16px; height:16px; border-radius:8px; background:#d8d8d8; position:absolute; top:-8px; left:-8px;}
ul.timeline li.active .dot { background:#ff6e00;}
ul.timeline li.active p { color:#ff6e00;}

.activate {
  display: none;
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 40px;
  margin: 0 0 0 -15px;
  opacity: 0;
}

/*=================================平版+手機=======================================*/
/* 平板版型 */ 
@media screen and (min-width: 641px) and (max-width: 1024px) {

	
}

/* 手機版型 */  
@media screen and (max-width: 899px) {
body.result_bg { background:#fff;}

.top { width:100%; height:80px; }
.logo { width:230px; top:20px; left:20px;}
.header_pic { width:90px; bottom:-15px; right:15px;}

.title { justify-content:flex-start; padding-left:20px;}

.btn-bg { width:100%; margin:0; background:#fff; padding:15px 21px 15px 15px; position:fixed; bottom:0; }
.btn_search { width:100%; margin:0 auto; margin-top:10px; padding:15px 21px 15px 15px;}
.btn a { width:100%;}

h2 { padding:20px; border-bottom:none; text-align:center;}
.menu-title { width:100%; height:50px; font-size:1.125em; color:#575757; background:#f3f3f3; display:flex; justify-content:center; align-items:center; flex-direction:row; margin-bottom:10px;}
.menu-title img { width:25px; margin-right:5px;}
h4 { font-size:1em; color:#000; line-height:1.25em; font-weight:bold;}
p { font-size:1em; line-height:1.25em; color:#575757; }
p span { color:#ff6e00;}


.w300 { width:90%;}
.content { padding-top:10px;}
.content_result { width:100%; margin-top:0px; padding:0 0 100px 0; display:flex; flex-direction:column; }
.banner { width:92%; margin-top:20px;}

.result { display:flex; flex-direction:column;}

.m_news { width:100%; padding:20px; color:#fff; font-size:1.25em; line-height:1.25em; text-align:center; background:#f27c32; display:block;}
.drop-down { display:block;}
.mbottom20 { margin-bottom:20px;}
.m_arr_t {width: 0; height: 0; border-style: solid; border-width: 0 10px 10px 0; border-color: transparent #a0a0a0 transparent transparent; position:absolute; top:0; right:0;}
.m_arr_b {width: 0; height: 0; border-style: solid; border-width: 0 0 10px 10px; border-color: transparent transparent #a0a0a0 transparent; position:absolute; bottom:0; right:0;}

.info { margin:10px 0 0 0; padding:0 20px; border-right:none;}
.info p { margin-bottom:20px;}

.shipping { margin:0px 0 0 0; padding:0 20px;}
ul.timeline { margin:40px 0 0 20px;}



/*下拉*/
.activate {
  display: none;
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 50px;
  margin: 0 0 0 -15px;
  opacity: 0;
}
.drop-down {
  max-height: 0;
  overflow: hidden;
}
.drop-down a {
  background: #222;
}
#ppsremark {
    background: none;
}
.activate:checked ~ .drop-down {
  max-height:100%;
}
.drop-down {
  -webkit-transform: translateZ(0);  
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

/* 下拉 Icon */
label::after {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 2.7em;
  height: 2.7em;
  line-height: 2.7;
  text-align: center;
  -webkit-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
}
input[type=checkbox] + label::after {
  content: "\2795";
}
input[type=checkbox]:checked + label::after {
  transform: rotate(135deg);
}
/*下拉end*/


}



/*================================其他CSS範本=====================================*/
/*----css 清除浮動技巧------*/
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
/*-------css 清除浮動技巧----*/

/*微軟正黑體下法  font-family:\5FAE\8EDF\6B63\9ED1\9AD4,Microsoft JhengHei,MingLiU,sans-serif;  */