@charset "utf-8";
/* CSS Document */
body { width:100%; margin:0; padding:0; background: #F5F5F5 url('../images/background.png') no-repeat center top; background-size: auto; font-family:Microsoft JhengHei, Sans-Serif;}
.mob_show { display: none !important;}
.mob_show2 { display: none;}
.mob_hide { display: block;}
.mob_hide2 { display: inline;}
.show_550 { display: none;}
.show_370 { display: none;}
.bt_position { display: flow-root; text-align: center; margin: 2% auto 0; width: 100%;}
.bt_center { text-align:center; padding:10px 0;}
.bt_left { text-align:left; padding:10px 0; width:45%; float:right;}
.bt_right { text-align:right; padding:10px 0; width:45%; float:left;}
.page_number { width: 90%; font-size: 1.6rem ; color:#FFF; font-weight: normal; line-height:1.5;  text-align: center; display: table;}
.page_number ul li { margin: 2%; display:inline;}
.page_number ul li span { color:#F8FF00; font-weight: bold; text-decoration: underline; }
.page_number ul li a { color:#FFF; font-weight: normal; text-decoration: none; }
.page_number ul li a:hover { color:#FFF; font-weight: bold; text-decoration: underline; }

/*INDEX*/
/* 浮動容器固定在螢幕右側中間 */
#side_shoppingcar {
  position: fixed;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  text-align: center;
}

/* 小圓按鈕 */
#cart_toggle {
  width: 45px;
  height: 45px;
  background: #222222;
  color: #fff;
  font-size: 2.5rem;
  line-height: 1.5 !important;
  text-align: center;
  line-height: 45px;
  cursor: pointer;
  border-radius: 50%;
  margin: auto;
  transition: background 0.3s;
}

#cart_toggle:hover {
  background: #1A8229; /* hover 綠色 */
}

/* 收合內容 */
#cart_content {
  display: none;
  width: 85px;
  background: #222222;
  border-radius: 5px;
  padding-top: 10px;
  margin-top: 10px;
  color: #fff;
}
#cart_content p { font-size: 1.5rem;}

/* 展開時顯示 */
#side_shoppingcar.open #cart_content {
  display: block;
}
/* 返回頂端按鈕 */
#backToTop {
  width: 20px;
  height: 20px;
  background: #333; /* 綠色主色，可改橘色 */
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  margin: 10px auto 0 auto; /* 與 cart_toggle 間距 */
  display: block; /* 固定顯示 */
  transition: all 0.3s ease;
}

#backToTop:hover {
  background: #ffa000; /* hover 深綠 */
}

/* 商品項目 */
.choose_item {
  width: 65px;
  border: 2px solid #929292;
  background-color: #FFF;
  text-align: center;
  margin: 8px auto;
  position: relative;
  border-radius: 3px;
}

.choose_item img {
  max-width: 60px;
  max-height: 60px;
  padding: 5px;
}

/* 移除按鈕 */
.cancle_item {
  padding: 0 4px;
  background-color: #FF7043;
  color: #FFF;
  font-size: 0.8rem;
  font-weight: bold;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  border-radius: 0 3px 0 3px;
}

/* 洽詢客服 */
.goto_order { color:#FFF; background-color: #FF7043; padding: 10px 0 ; text-align: center; border-radius: 0 0 5px 5px; margin-top: 15px; }
a .goto_order:hover { background-color: #AD4B31}



#divMsg { font-size: 2rem; color: #FFF; width: 300px; text-align: center; vertical-align: middle; padding: 75px 10px ; background-color: #5f060a; border: 10px solid #FFF; -moz-box-shadow: 5px 5px 10px rgb(0,0,0,0.5); box-shadow: 5px 5px 10px rgb(0,0,0,0.5); display: table; position: absolute; top: calc((100VH - 170px )/3); left: calc((100VW - 320px )/2); z-index: 999;}

#page_header { width:100%; text-align: center; background-color: #FFF; border-bottom: 1px solid #333; margin: 0 auto; top:0; position: fixed; z-index: 999;}
.top_icons { width: 100%; max-width: 1200px; height: 70px; margin: 0 auto; text-align:center; vertical-align: middle; font-size: 2rem; line-height: 1.5; display: table;}
#giumonline_logo { float: left;}
#giumonline_logo img { width: auto; max-height: 70px;}
#menu_icons {  width: auto; height: 70px; text-align: center; vertical-align: middle; margin: 0 auto; display: table;}
#menu_icons a { color: #000; display: table-cell; vertical-align: middle;}
#menu_icons a:hover, a:active { color: #1A8229; text-decoration: none;}
.link_icons_right_line { width: calc((1200px - 500px)/ 5); font-size: 2rem; line-height: 0.8; padding: 5px 3px; text-align: center; border-right: 1px solid #AAAAAA; float: left;}
.link_icons_none_line { width: calc((1200px - 500px)/ 5); font-size: 2rem; line-height: 0.8; padding: 5px 3px; text-align: center; border: none; float: left;}
.shopping_link { width: auto; text-align: left; display: inline-block; float: right; }
.moto_shopping { width: auto; height: 70px; margin:0 2VW 0 0 ; text-align: center; font-size: 2rem; color: #000; display: table-cell; vertical-align: middle;}
.moto_shopping a { text-align: center; font-size: 2rem; color: #000; }
.moto_shopping:hover { color: #AD4B31; text-decoration: none;}
.count_shoppingcar { width: 25px; height: 25px; border-radius: 20px; background-color: #FF7043; font-size: 1.3rem; line-height: 2; color: #FFF; font-weight: bold; display: inline-block; margin:0 10px; }

.pad_hide { display: block;}
.pad_show { display: none;}



#top_banner { width: 100%; margin: 70px auto 0; text-align: center; display: block; position: relative; }
/*輪播banner*/
    /* 外層容器：維持比例 1200x435 ≈ 2.76:1 */
    .banner {
      position: relative;
      width: 100%;
      max-width: 1200px;
      aspect-ratio: 1200 / 435; /* 自動維持比例 */
      margin: auto;
      overflow: hidden;
      background: #000;
    }

    .slide {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      opacity: 0;
      transition: opacity 1s ease-in-out;
    }

    .slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scale(1.15);
      animation: zoomOut 6s ease-out forwards;
    }

    .slide.active {
      opacity: 1;
      z-index: 1;
    }

    @keyframes zoomOut {
      0%   { transform: scale(1.15); }
      100% { transform: scale(1.0); }
    }

    /* 左右按鈕 */
    .nav-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0,0,0,0.5);
      color: #fff;
      border: none;
      padding: 5px 12px;
      cursor: pointer;
      border-radius: 50%;
      font-size: 1.5rem;
	  line-height: 1.5;
      transition: background 0.3s;
      z-index: 2;
    }

    .nav-btn:hover {
      background: rgba(0,0,0,0.8);
    }

    .prev { left: 10px; }
    .next { right: 10px; }

    /* 圓點導航 */
    .dots {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;
      z-index: 2;
    }

    .dot {
      width: 10px;
      height: 10px;
      background: rgba(255,255,255,0.5);
      border-radius: 50%;
      cursor: pointer;
      transition: background 0.3s;
    }

    .dot.active {
      background: #fff;
    }

    /* 手機小螢幕優化 */
    @media (max-width: 768px) {
      .nav-btn {
        padding: 3px 6px;
        font-size: 1rem;
		line-height: 1.2;
      }
      .dot {
        width: 8px;
        height: 8px;
      }
    }


#moto_3steps { width: 100%; max-width: 1200px; text-align: center; margin: 0 auto; background-color: #1ea439; display: table;}
#moto_3steps img { width:100%; max-width: 1200px;}

#moto_All { width:100%; max-width:1200px; margin: 50px auto; position: relative; display: table;}
.moto_All_Table { width: 100%; max-width: 1200px; margin: 0 auto;}
.moto_All_Table td { width: 28%; margin: 2% calc( (16% - 6px)/6); float: left;}
.moto_window { width:100%; border: 1px solid #DDDDDD; background: #FFF;}
.moto_window_tags { width: calc(28% - 2px); padding: 8px; position: absolute; z-index: 5;}
.moto_window_year { font-size: 1.5rem; font-weight: bold; color: #FFF; font-family: Arial, sans-serif; background-color: #000; padding: 2px 5px; float: left; }
.moto_window_kind { font-size: 1.5rem; color: #FFF; font-family: Futura PT book, sans-serif; padding:2px 5px; float: right; }
.moto_new { background-color: #9B59B6;}
.moto_present { background-color: #27AE60; }
.moto_testdrive { background-color: #E67E22; }
.moto_used { background-color: #3498DB; }
.moto_window_event { font-size: 1.5rem; font-weight: bold; color: #FFF; background-color: #537E96; margin-top: 8px; padding:2px 5px; float: right; clear: right;}
.moto_window_sales { font-size: 1.5rem; font-weight: bold; color: #FFF; background-color: #E91E63; margin-top: 8px; padding:2px 5px; float: right; clear: right;}
.moto_window_pic { width: 100%; height: 280px; padding: 15px 0px; border: 5px solid #FFF; text-align: center; overflow: hidden;}
.moto_window_pic img { width: auto; max-width: 300px; max-height: 250px; text-align: center; transform: scale(1,1); transition: all 1s ease-out; }
.moto_window_pic img:hover {transform:scale(1.2,1.2);}
.bigsale { width: 27%; margin-top: 12%; margin-left: 1%; text-align: left; position: absolute; }
.bigsale img {  max-width: 100px; position: relative; z-index: 1; }
.moto_window_name { width: 100%; font-size: 2rem; font-weight: 600; line-height: 1.5; color:#000; padding: 5px; text-align: center; height: 65px;}
.moto_window_name a { color:#000;}
.moto_window_name a:hover { color: #1F9EE5; text-decoration: none;}
.moto_widow_original_price  { width: 100%; font-size: 1.6rem; line-height: 1; color:#999; padding: 10px 5px; text-align: center;}
.moto_window_price { width: 100%; font-size: 3rem; font-weight: bold; line-height: 1; color:#D82E3F; padding: 5px 5px 10px 5px; text-align: center; font-style: italic;}
.moto_window_price span { font-size: 1.8rem; padding-right: 3px; }
.moto_window_stock { font-size: 1.8rem; line-height: 2; color: #FFF; text-align: left; background-color: #333; padding: 5px 15px;}
.moto_window_add { width:100%; height: 50px; font-size: 1.8rem; font-weight: bold; line-height: 1.5; color:#FFF; padding: 10px 5px; text-align: center; display: block;}
.moto_window_add:hover, .moto_window_add:active { color:#FFF; text-decoration: none; }
.moto_window_add a:visited, .moto_window_add:visited { text-decoration: none;}
.green { background-color: #4CAF50; }
.green:hover { background-color: #218838; }
.orange { background-color: #ff7043; }
.orange:hover { background-color: #e64a19; }
.yellow { background-color: #ffc107; }
.yellow:hover { background-color: #ffa000; }
#page_bottom { width: 100%; height: auto; padding: 0; font-size: 1.5rem; line-height: 1.5; background-color: #222; bottom: 0; display: block; clear: both;}
.company { width: 100%; height: auto; padding: 10px calc( (100% - 1200px) /2); color: #FFFFFF;  text-align: left; vertical-align: bottom; background-color: #222; display: table;}
.info_left { width: 50%; text-align: left; float: left; display: inline-block;}
.info_right { width: 50%; text-align: right; float: right; display: inline-block; margin-top: 50px;}
.info_right img { margin: 0 5px;}
.copyright { width: 100%; height: auto; padding: 5px; color: #FFFFFF; font-size: 1.5rem; background-color: #1A8229; text-align: center; float: left; }
@media only screen and (max-width: 1240px)  {
	.company { width: 90%; margin:0 auto; text-align: center;}
}

/*moto_none*/
.moto_3steps_margin { margin-top: 70px !important;}
.moto_none_data { width: 100%; min-height: 300px; text-align: center; color: #000; font-size: 2rem;}
.moto_none_data td { padding: 50px;}
.moto_none_data h1 { font-size: 4rem;}
.moto_none_data h3 { font-size: 3.5rem;}
.moto_none_data p { font-size: 2rem;}
.moto_none_data span { color: #FF7043;}
.moto_none_data_LINE { width: auto; max-width: 200px; margin-top: 50px; border-radius: 5px; }
.moto_none_data_QRcode { width: 100%; max-width: 200px; border: 5px solid #FFF; padding: 10px; margin: 20px; background-color: #FFF; box-shadow: 2px 2px 10px 1px rgb(0 0 0 / 0.4);}
.moto_none_data h5 { font-size: 3.5rem; font-weight: bold; color: #1ea439;}

/*moto_Detail*/
#moto_Detail { width: 100%; max-width: 900px; margin: 50px auto 0; display: table;}
#moto_Detail_pics { width:48%; float:left; text-align:center; margin-right: 2%; }
#big_photo { width:100%; height: 500px; margin: 2.5% auto;}
.moto_Slides { max-height: 500px; max-width: 100%; margin: 0 auto;}
.noshow { display: none;}
#small_photo { width: 100%; margin: 2.5% auto; text-align: center;}
#small_photo img { max-width: 50px; max-height: 50px; margin: 0 2%; border:1px solid #dddddd; display: inline; cursor:pointer;}
#moto_Detail_words { width: 50%; font-size: 2rem; float: right; text-align: left; color: #000; display: table;}
.moto_brand { padding: 5px 10px; border-radius: 5px; background-color: #333333; color: #FFF; font-size: 2rem; display: inline-block;}
.moto_Detail_table { width: 100%; padding: 5px; display: table;}
.moto_Detail_tr { width: 100%; display: table-row;}
.moto_Detail_tr .big_td { width:100%; text-align: left;}
.moto_Detail_tr .td_t1 { width: 20%; min-width: 60px; padding: 10px; text-align: right; border-right:1px dashed #666666; border-bottom:1px dashed #666666; display: table-cell; vertical-align: middle;}
.moto_Detail_tr .td_t2 { width: 20%; min-width: 60px; padding: 10px; text-align: right; border-right:1px dashed #666666; border-bottom:1px dashed #666666; color: #F00; display:table-cell;}
.moto_Detail_tr .td_t3 { width: 20%; min-width: 60px; padding: 10px; text-align: right; border-right:1px dashed #666666; display: table-cell; vertical-align: middle;}
.moto_Detail_tr .td_t4 { width: 20%; min-width: 60px; padding: 10px; text-align: right; border-right:1px dashed #666666; border-bottom:1px dashed #666666; color: #6946F4; display:table-cell;}
.moto_Detail_tr .td_d1 { min-width: 100px; padding: 10px; text-align: left; border-bottom:1px dashed #666666; display:table-cell;}
.moto_Detail_tr .td_d2 { min-width: 100px; padding: 10px; text-align: left; border-bottom:1px dashed #666666; color: #F00; display:table-cell;}
.moto_Detail_tr .td_d3 { min-width: 100px; padding: 10px; text-align: left; display:table-cell;}
.moto_Detail_tr .td_d4 { min-width: 100px; padding: 10px; text-align: left; border-bottom:1px dashed #666666; color: #6946F4; display:table-cell;}
.moto_title { font-size: 3rem; padding-bottom: 10px;}
.moto_hint { font-size: 1.6rem; font-weight: bold; color: #1ea439; padding-bottom: 10px;}
.collection_name { font-size:2rem; background-color: #646161; color: #FFF; padding: 5px 10px; border-radius: 5px; display: inline-block;}
.moto_title span { font-size:3rem; padding-right: 10px;}
.moto_price { font-size: 3.2rem; font-weight: bold; line-height: 1; color:#d82e3f; font-style: italic;}
.moto_price span { font-size: 1.8rem; padding-right: 3px;}
.dollar_sign { font-weight: bold; line-height: 1; color:#d82e3f; font-style: italic;}
.original_price { font-size: 1.8rem; color:#999; font-weight: normal; text-decoration: line-through; font-style: italic; line-height: 2;}
.moto_Detail_add { width:100%; font-size: 2rem; font-weight: bold; color:#FFF; background-color: #4caf50; padding: 10px 5px; text-align: center ;margin: 15px 0; display: table;}
.moto_Detail_add:hover, .moto_Detail_add:active {  background-color: #218838; }
.moto_Detail_add_icon { width: auto; text-align: left; float: right; padding-right: 10px; margin-top: 2px;}
.moto_Detail_add_icon a, a:hover { color:#FFF; text-decoration: none; margin-top: 2px;}
#moto_Recommend { width: 100%; max-width: 900px; text-align: center; margin: 0 auto;}
#Recommend_Title { width: 100%; text-align: left; border-bottom: 1px dashed #666666; padding: 5px; margin: 30px auto; font-size: 3.5rem; font-weight: bold; color: #333333; }
#Recommend_Title img { margin: 0px 15px 5px 0px;}
#Recommend_Join { width: 100%; max-width: 900px; margin: 30px auto; font-size: 1.8rem; color: #000; text-align: justify; line-height: 2;}
.moto_join_line { width: 100%; min-height: 300px; text-align: center; color: #000; font-size: 2rem;}
.moto_join_line td { padding: 20px;}
.moto_join_line h1 { font-size: 4rem;}
.moto_join_line h3 { font-size: 3.5rem;}
.moto_join_line p { font-size: 2rem;}
.moto_join_line span { color: #FF7043;}
.moto_join_line_LINE { width: auto; max-width: 200px; margin-top: 10px; border-radius: 5px; }
.moto_join_line_QRcode { width: 100%; max-width: 200px; border: 5px solid #FFF; padding: 10px; margin: 20px; background-color: #FFF; box-shadow: 2px 2px 10px 1px rgb(0 0 0 / 0.4);}
.moto_join_line h5 { font-size: 3.5rem; font-weight: bold; color: #1ea439;}
#Recommend_Article { width: 100%; max-width: 900px; margin: 30px auto; font-size: 1.8rem; color: #000; text-align: justify; line-height: 2;}
.Recommend_Photo { width: 100%; text-align: center; margin: 50px auto; display: block;}
.Recommend_Photo img { width: 100%; max-width: 800px;}
.Recommend_Vedio { width: 100%; max-width: 800px; text-align: center; margin: 50px auto; display: block;}
.Recommend_Vedio iframe { width: 100%; height: 450px;}

/*Order_Step*/
#Order_Step { width:100%; max-width:900px; text-align: center; margin: 150px auto 0; position: relative; display: flex;}
.step_short { width: calc(((100% - 38px) / 4)*0.95); padding: 0 10px; border-left: 5px solid #FFF; background-color: #FFF; display: inline-block;}
.step_long { width: calc(((100% - 38px) / 4)*1.05); padding: 0 10px; border-left: 5px solid #FFF; background-color: #FFF; display: inline-block;}
.step_line { width: 5px; font-size: 6rem; border-right: 1px dashed #808080; background-color: #FFF; display: inline-block;}
.step_number { padding: 0 5px; font-size: 6rem; color: #000; font-family: Futura PT Book, Oblique; font-style: italic; text-align: center; display: inline-block;}
.step_words { width: 60%; text-align: left; margin-left: 8px; display: inline-block;}
.step_EN { font-family: Futura PT Book, Oblique; font-style: italic; color: #B2B2B2; font-size: 1.6rem; font-weight: 600; letter-spacing: 0.5pt; line-height: 0.8;}
.step_CH { font-family: Microsoft JhengHei, Sans-Serif; color: #000; font-size: 2rem;}
.step_no_line { width: calc(((100% - 38px) / 4)*0.95); padding: 0 10px; border-left: 5px solid #FFF; background-color: #FFF; display: inline-block;}
.step_now { background-color: #FFCBBF;}
.step_now .step_EN  { color: #8A0A11;}
#Order_List { width: 100%; max-width: 900px; text-align: center; margin: 0 auto;}
#Order_Title { width: 100%; text-align: left; border-bottom: 1px dashed #666666; padding: 5px; margin: 30px auto; font-size: 3.5rem; font-weight: bold; color: #333333; }
#Order_Title img { margin-right:2VW;}
.order_data_empty { width: 100%; max-width: 900px; font-size: 2rem; color: #000; margin: 5VW auto 20VW; text-align: center;}
.order_data_empty a { padding: 0 10px; color: #1ea439; font-weight: bold;}
.order_data_empty a:hover, .order_data_empty a:active { padding: 0 10px; color: #1ea439; font-weight: bold; text-decoration: underline; }
.order_data_table { width: 100%; max-width: 900px; border: 1px solid #dddddd; background-color: #FFF; font-size: 2rem; color: #000; margin: 0 auto 50px; display: table;}
.order_data_tr { width: 100%; padding: 20px 0; line-height: 2; border-bottom: 1px dashed #B2B2B2;}
.order_data_td1 { width: 97%; padding: 10px 1%; margin: 0 1.5%; text-align: left; vertical-align: middle; display: inline-block; table-layout: fixed;}
.order_data_td1 span { padding: 0 10px;}
.order_data_td1 a { color: #000; font-weight: normal; text-decoration: none;}
.order_data_td1 a:hover, .order_data_td1 a:active { font-weight: normal; text-decoration: none;}
.order_data_td1-1 { width: auto; text-align: left; line-height: 1.5; float: left;}
.order_data_td1-2 { width: 40px; margin:0 auto;}
.order_data_td2 { width: 20%; padding: 10px 1%; margin: 5px 1.5%; text-align: left; vertical-align: top; display: inline-block; table-layout: fixed;}
.order_data_td3 { width: 73%; padding: 10px 1%; margin: 5px 1.5%; text-align: right; vertical-align: top; display: inline-block; table-layout: fixed;}
.order_data_photo { width: auto; text-align: center; padding: 10px 10px 10px 25px; float: left; display: inline-block;}
.order_data_photo img { width: 100%; max-width: 90px; padding: 5px; border: 1px solid #DDDDDD; background-color: #FFF;}
.order_data_info { width: auto; text-align: left; padding: 15px; float: left; display: inline-block;}
.button_delete { color: #666; font-size: 2rem; text-align: center; display:block;}
a .button_delete { color: #666; font-weight: bold;}
a .button_delete:hover, a.button_delete:active { color: #FFF; background-color: #FF7043; font-weight: bold;}
.order_data_td5 { width: 73%; padding: 0 5px 0 10px; margin: 5px 1.5%; text-align: right; vertical-align: middle; display: inline-block; table-layout: fixed;}
.order_data_td6 { width: 20%; padding: 0 5px; margin: 5px 1.5%; text-align: right; vertical-align: middle; display: inline-block; table-layout: fixed;}
.order_photo { width: 100%; min-width: 105px; border: 1px solid #B2B2B2; padding: 5px; background-color: #FFF; table-layout: fixed;}
.order_moto_data { width:60%; float: left; table-layout: fixed;}
.order_moto_data a, a:active { color: #000; text-decoration: none;}
.order_moto_data a:hover { color: #000; text-decoration: underline;}
.order_black_word { font-size: 2rem; color: #000; line-height: 1.5;}
.order_black_word a:active, a:hover { color: #1ea439; text-decoration: none;}
.order_gray_word { font-size: 1.6rem; color: #808080; line-height: 1.5;}
.order_input { width: 80px; border: 1px solid #B2B2B2; text-align: center; margin-right: 10px;}
.order_event { font-size: 2rem; color: #F00; padding-top: 5px;}
.order_no_underline { border-bottom: none;}
.order_data_tr2 { width: 100%; line-height: 2;}
.order_count_line { width: 40% ; border-bottom: 1px solid #808080; margin-right: 1.5%; float: right; }
.order_big_word { font-size: 3rem;}
.order_red_word { color: #C02B3A; font-weight: bold; font-style: italic;}
.clear_right { clear: right;}
.order_agree { margin: 10Vmax auto 5Vmax; padding: 0 5Vmax; text-align: center; font-size: 3rem; font-weight: bold; color: #000; }
.order_agree input { width: 20px; height: 20px; margin-right: 15px; border: 1px solid #B2B2B2;}
.order_confirm { width: 100%; margin: 5Vmax auto; text-align: center; font-size: 3rem;}
.button_dark { width: 180px; padding:10px 0; margin: 0 1Vmax; background-color: #4caf50; color: #FFF; font-size: 2.5rem; text-align: center; display: inline-block;}
a .button_dark { color: #FFF;}
a .button_dark:hover, a.button_dark:active { color: #FFF; background-color: #218838; font-weight: normal;}
.button_light { width: 180px; padding:10px 0; margin: 0 1Vmax; background-color: #E5E5E5; color: #666; font-size: 2.5rem; text-align: center; display: inline-block;}
a .button_light { color: #666;}
a .button_light:hover, a.button_light:active { color: #DDDDDD; background-color: #333333; font-weight: normal;}


.order_person { padding: 10px 2%;}
.order_name { width: auto; padding: 10px 2%;}
.order_price { width: auto; min-width: 100px; padding: 10px 2%;}
.order_delete { width: auto; min-width: 80px; padding: 10px 2%;}
.order_moto_table1 { width: 100%;}
.order_moto_tr1 { width: 100%; line-height: 2;}
.dashed_line { border-bottom: 1px #B2B2B2 dashed;}
.order_moto_td1 { width: 20%; padding: 15px 2%; text-align: right; vertical-align: middle; table-layout: fixed; display: inline-block;}
.order_moto_td2 { width: 80%; padding: 15px 2%; text-align: left; vertical-align: middle; table-layout: fixed; display: inline-block;}
.order_moto_td1 span { color: #F00; padding-right: 2px;}
.order_input_short { width: 40%; padding: 0 10px; border: 1px solid #B2B2B2; text-align: left; }
.order_input_long { width: 70%; padding: 0 10px; border: 1px solid #B2B2B2; text-align: left; }
.order_moto_table2 { width: 100%; display: table;}
.order_moto_tr2 { width: 100%; padding: 20px 0; line-height: 2; border-bottom: 1px dashed #B2B2B2;}
.order_moto2_td1 { width: 97%; padding: 10px 1%; margin: 0 1.5%; text-align: left; vertical-align: middle; display: inline-block; table-layout: fixed;}
.order_moto2_td1 span { padding: 0 10px;}
.order_moto2_td1 a { color: #000; font-weight: normal; text-decoration: none;}
.order_moto2_td1 a:hover, .order_moto2_td1 a:active { font-weight: normal; text-decoration: none;}
.order_moto2_td2 { width: 20%; padding: 10px 1%; margin: 5px 1.5%; text-align: left; vertical-align: top; display: inline-block; table-layout: fixed;}
.order_moto2_td3 { width: 73%; padding: 10px 1%; margin: 5px 1.5%; text-align: right; vertical-align: top; display: inline-block; table-layout: fixed;}
.order_photo2 { width: 100%; min-width: 105px; border: 1px solid #B2B2B2; padding: 5px; background-color: #FFF; table-layout: fixed;}
.float_dollar { position: absolute; float: left;}
.order_moto_table3 { width: 100%; display: table;}
.order_moto_tr3 { width: 100%; line-height: 2; display: table-row;}
.order_moto3_td1 { width: 100%; border-bottom: 1px dashed #B2B2B2; display: table-cell;}
.order_shipping { padding: 15px 1.5%; margin: 0; font-size: 2rem; text-align: left;}
.order_moto_table5 { width: 100%; display: table;}
.order_moto_tr5 { width: 100%; line-height: 2; display: table-row;}
.order_moto5_td1 { width: auto; padding: 6px 2%; text-align: right; vertical-align: middle; display: table-cell;}
.order_moto5_td2 { width: 30%; padding: 6px 2%; text-align: right; vertical-align: middle; display: table-cell;}
.order_ps { width: 100%; padding: 20px 2.5%; }
.order_ps textarea { width: 90%; height: 10Vmax; padding: 0.5% 1.5%; border: 1px solid #B2B2B2; resize:none;}
.order_condition { width: 95%; margin: 40px auto; text-align: left; font-size: 1.8rem; color: #808080; line-height: 2;}
.order_condition ul { margin-left: -10px;}
.order_condition ul li { margin: 20px;}
.order_black_bg { padding: 0; background-color: #000; color: #FFF; border-bottom: none;}
.order_red_bg { padding: 0; background-color: #701419; color: #FFF; border-bottom: none;}
.order_yellow_bg { padding: 0; background-color: #C59309; color: #FFF; border-bottom: none;}
.order_beige_bg { background-color: #FFFDD6; }
#Welcome_Join { width: 80%; margin: 50px auto; text-align: left; line-height: 2; padding-bottom: 50px; border-bottom: 1px #b2b2b2 dashed;}
.welcome_title { font-size: 2.5rem; color: #ff7043;}

/* about_us */
#about_us_banner { width: 100%; margin: 70px auto 0; text-align: center; display: block; position: relative; max-width: 1200px; overflow: hidden; /* 超出範圍隱藏 */}
#about_us_banner img { width: 100%; height: auto; display: block; margin: 0 auto;}
.about_us_table { width: 100%; max-width: 1000px; margin: 0 auto; padding: 50px; text-align: left;}
.about_us_logo { width: 30%; vertical-align: top; }
.about_us_logo img { width: 100%; max-width: 200px; padding-right: 20px;}
.about_us_detail { width: 70%; padding-left: 20px; font-size: 2rem; line-height: 2; color: #000; vertical-align: top; text-align: justify;}
.about_us_detail h1 { font-size: 4rem; font-weight: bold;}
.about_us_detail span { font-size: 3rem; font-weight: bold; color: #4CAF50;}
#about_us_photo { margin: 50px 15VW 100px; width: 70VW; display: table;}
.square-h { width:20VW; height: 20VW; margin: calc((100VW - 30VW - (20VW * 3)) /6); border-radius: 20px; float: left; overflow: hidden;}
.square-h img { height: 100%; display: inline;}
.square-w { width:20VW; height: 20VW; margin: calc((100VW - 30VW - (20VW * 3)) /6); border-radius: 20px; float: left; overflow: hidden;}
.square-w img { width: 100%; display: inline;}
.fix_10 { position:relative; left: -10%;}
.fix_20 { position:relative; left: -20%;}
.fix_30 { position:relative; left: -30%;}

/*news*/
#news_banner { width: 100%; margin: 70px auto 0; text-align: center; display: block; position: relative; max-width: 1200px; overflow: hidden; /* 超出範圍隱藏 */}
#news_banner img { width: 100%; height: auto; display: block; margin: 0 auto;}
.news_list { width: 100%; max-width: 1000px; margin: 0 auto 50px; padding: 50px; text-align: left;}
.news_line { line-height: 2; border-bottom: 1px dashed #808080; }
.news_date { width:100px; font-size: 1.8rem; color: #ffa000; font-weight: bold; line-height: 2; text-align: right; margin: 5px 20px; display: inline-block;}
.news_link { font-size: 1.8rem; color: #000000; font-weight: bold; line-height: 2; text-align: left; margin: 5px 20px; display: inline-block;}
.news_table { width: 100%; max-width: 1000px; margin: 0 auto; padding: 50px; text-align: left;}
.news_title { font-size: 4rem; font-weight: bold;}
.news_photo { width: 100%; margin: 0 auto; padding: 50px 0; text-align: center;}
.news_photo img { width: 100%; max-width: 800px;}
.news_word { width: 100%; font-size: 2rem; line-height: 2; color: #000; vertical-align: top; text-align: justify;}