@charset "UTF-8";
/* 不改變文字單位 */
/*! normalize.css v2.0.1 | MIT License | git.io/normalize */
/* ========================================================================== HTML5 display definitions ========================================================================== */
* { box-sizing: border-box; }

*::after, *::before { box-sizing: border-box; }

/** Correct `block` display not defined in IE 8/9. */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; }

/** Correct `inline-block` display not defined in IE 8/9. */
audio, canvas, video { display: inline-block; }

/** Prevent modern browsers from displaying `audio` without controls. Remove excess height in iOS 5 devices. */
audio:not([controls]) { display: none; height: 0; }

/** Address styling not present in IE 8/9. */
[hidden] { display: none; }

/* ========================================================================== Base ========================================================================== */
/** 1. Set default font family to sans-serif. 2. Prevent iOS text size adjust after orientation change, without disabling user zoom. */
html { font-family: sans-serif; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -ms-text-size-adjust: 100%; /* 2 */ }

/** Remove default margin. */
body { margin: 0; }

/* ========================================================================== Links ========================================================================== */
/** Address `outline` inconsistency between Chrome and other browsers. */
a:focus { outline: thin dotted; }

/** Improve readability when focused and also mouse hovered in all browsers. */
a:active, a:hover { outline: 0; }

/* ========================================================================== Typography ========================================================================== */
/** Address variable `h1` font size within `section` and `article` contexts in Firefox 4+, Safari 5, and Chrome. */
h1 { font-size: 2em; }

/** Address styling not present in IE 8/9, Safari 5, and Chrome. */
abbr[title] { border-bottom: 1px dotted; }

/** Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. */
b, strong { font-weight: bold; }

/** Address styling not present in Safari 5 and Chrome. */
dfn { font-style: italic; }

/** Address styling not present in IE 8/9. */
mark { background: #ff0; color: #000; }

/** Correct font family set oddly in Safari 5 and Chrome. */
code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; }

/** Improve readability of pre-formatted text in all browsers. */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

/** Set consistent quote types. */
q { quotes: "\201C" "\201D" "\2018" "\2019"; }

/** Address inconsistent and variable font size in all browsers. */
small { font-size: 80%; }

/** Prevent `sub` and `sup` affecting `line-height` in all browsers. */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sup { top: -0.5em; }

sub { bottom: -0.25em; }

/* ========================================================================== Embedded content ========================================================================== */
/** Remove border when inside `a` element in IE 8/9. */
img { border: 0; }

/** Correct overflow displayed oddly in IE 9. */
svg:not(:root) { overflow: hidden; }

/* ========================================================================== Figures ========================================================================== */
/** Address margin not present in IE 8/9 and Safari 5. */
figure { margin: 0; }

/* ========================================================================== Forms ========================================================================== */
/** Define consistent border, margin, and padding. */
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }

/** 1. Correct `color` not being inherited in IE 8/9. 2. Remove padding so people aren't caught out if they zero out fieldsets. */
legend { border: 0; /* 1 */ padding: 0; /* 2 */ }

/** 1. Correct font family not being inherited in all browsers. 2. Correct font size not being inherited in all browsers. 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. */
button, input, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 2 */ margin: 0; /* 3 */ }

/** Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet. */
button, input { line-height: normal; }

/** 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls. 2. Correct inability to style clickable `input` types in iOS. 3. Improve usability and consistency of cursor style between image-type `input` and others. */
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ }

/** Re-set default cursor for disabled elements. */
button[disabled], html input[disabled] { cursor: default; }

/** 1. Address box sizing set to `content-box` in IE 8/9. 2. Remove excess padding in IE 8/9. */
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }

/** 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome (include `-moz` to future-proof). */
input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; }

/** Remove inner padding and search cancel button in Safari 5 and Chrome on OS X. */
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/** Remove inner padding and border in Firefox 4+. */
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/** 1. Remove default vertical scrollbar in IE 8/9. 2. Improve readability and alignment in all browsers. */
textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */ }

/* ========================================================================== Tables ========================================================================== */
/** Remove most spacing between table cells. */
table { border-collapse: collapse; border-spacing: 0; }

/* ========================================================================== Typography ========================================================================== */
html { font-size: 100%; line-height: 1.65; }

body { font-family: "Microsoft YaHei","微软雅黑", "Microsoft Jhenghei","微軟正黑體", 'Meiryo', "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; -webkit-text-size-adjust: none; text-rendering: optimizeLegibility; color: #444; }

h1, h2, h3, h4, h5, h6 { margin-top: 0; color: #444; font-family: "Microsoft YaHei","微软雅黑", "Microsoft Jhenghei","微軟正黑體", 'Arimo', sans-serif; letter-spacing: 1px; }

h1 { font-size: 2rem; line-height: 1.125; margin-bottom: 1.65rem; }

h2 { font-size: 1.5rem; line-height: 2; margin-bottom: 1.65rem; }

h3 { font-size: 1.25rem; line-height: 1.2; margin-bottom: 1.65rem; }

h4 { font-size: 1.125rem; line-height: 1.33; margin-bottom: 1.65rem; }

h5 { font-size: 1rem; line-height: 1.5; }

p, li { font-family: "Microsoft YaHei","微软雅黑",'Meiryo', "Microsoft Jhenghei","微軟正黑體", "新細明體", 'Roboto', Tahoma, Geneva, sans-serif; font-size: 1rem; line-height: 1.65; margin-bottom: 1.65rem; }

th, td { font-size: 1rem; line-height: 1.5; }

p.small { font-size: 0.875rem; line-height: 1.5; }

ul { line-height: 1; }

ul li { margin-bottom: 0.4125rem; }

ul li:last-child { margin-bottom: 0; }

/* ========================================================================== form ========================================================================== */
/* ====================  input  ==================== */
input[type="text"]::placeholder, input[type="tel"]::placeholder, input[type="mail"]::placeholder { color: #aaa; }

/* ==================== Select ==================== */
select::placeholder { color: #aaa; }

/* ==================== textarea ==================== */
textarea::placeholder { color: #aaa; }

/* ==================== checkbox, radio ==================== */
input.full[type="checkbox"], input.full[type="radio"] { -moz-appearance: none; border-radius: inherit; cursor: pointer; height: 100%; left: 0px; margin: 0; max-height: 100%; max-width: 100%; min-height: 100%; min-width: 100%; opacity: 0; outline: 0 none; position: absolute; top: 0px; width: 100%; z-index: 2; }

/* ==================== Button ==================== */
button:hover[type="button"], input:hover[type="button"], input:hover[type="submit"], input:hover[type="reset"] { transform: scale(0.95); }

/* ========================================================================== mixins ========================================================================== */
/************************************* 表格 */
table.table_about { width: 100%; margin: 0 auto 20px auto; border-top: #01B1AE 1px solid; border-left: #01B1AE 1px solid; }

table.table_about th, table.table_about td { padding: 8px 10px; border-right: #01B1AE 1px solid; border-bottom: #01B1AE 1px solid; }

table.table_about thead tr th, table.table_about tbody th, table.table_about th { background-color: #E1FFFE; }

table.table_about thead tr td { font-weight: bold; background-color: #E1FFFE; }

table.table_about tr.odd, table.table_about tbody.odd tr:nth-child(2n+2), table.table_contact tbody.odd table.table_about tr:nth-child(2n+2) { background: #e5fffe; }

table.table_contact { width: 100%; margin: 0 auto 20px auto; border-top: #5E90B5 1px solid; border-left: #5E90B5 1px solid; }

table.table_contact th, table.table_contact td { padding: 8px 10px; border-right: #5E90B5 1px solid; border-bottom: #5E90B5 1px solid; }

table.table_contact thead tr th, table.table_contact tbody th, table.table_contact th { background-color: #DFF1FF; }

table.table_contact thead tr td { font-weight: bold; background-color: #DFF1FF; }

table.table_contact tr.odd, table.table_about tbody.odd table.table_contact tr:nth-child(2n+2), table.table_contact tbody.odd tr:nth-child(2n+2) { background: white; }

/************************************* RWD 隱藏顯示處理 */
.desktop { display: block; }

.desktop_table { display: table; }

.mobile, .mobile_table { display: none; }

@media (min-width: 30rem) and (max-width: 45rem) { .desktop { display: block; }
  .desktop_table { display: table; }
  .mobile, .mobile_table { display: none; } }

@media (max-width: 30rem) { .desktop, .desktop_table { display: none; }
  .mobile { display: block; }
  .mobile_table { display: table; } }

.text_center { text-align: center; }

.text_left { text-align: left; }

.text_right { text-align: right; }

img.center { margin: 0 auto; display: block; }

.por { position: relative; }

.poa { position: absolute; }

.fl { float: left; }

.fr { float: right; }

.gradient-pattern { box-sizing: content-box; border: none; text-overflow: clip; background: linear-gradient(-45deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 75%, rgba(140, 140, 140, 0.03) 75%, rgba(140, 140, 140, 0.03) 100%), linear-gradient(45deg, rgba(140, 140, 140, 0.03) 0, rgba(140, 140, 140, 0.03) 25%, rgba(140, 140, 140, 0) 25%, rgba(255, 255, 255, 0) 100%), linear-gradient(-45deg, rgba(140, 140, 140, 0.03) 0, rgba(140, 140, 140, 0.03) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%), linear-gradient(45deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 75%, rgba(140, 140, 140, 0.03) 75%, rgba(140, 140, 140, 0.03) 100%), white; background-origin: padding-box; background-clip: border-box; background-size: 50px 50px; }

/* ========================================================================== Layout ========================================================================== */
/************************************* body */
html { box-sizing: border-box; }

*, *:before, *:after { box-sizing: inherit; }

html body { background: #E6E6E6 url(../images/bottom.jpg) repeat-x center top; }

.row { box-sizing: border-box; }

.row::after { clear: both; content: ""; display: block; }

#container_index::after, #content::after { clear: both; content: ""; display: block; }

#container { margin-top: 30px; }

.w960 { width: 960px; margin: 0 auto; }

@media (min-width: 45rem) { #container_index { width: 960px; margin: 0 auto; /* background: url(../images/gray-bottom.png)no-repeat right 200px; */ }
  main.page { width: 960px; margin: 30px auto 20px; }
  main.page::after { clear: both; content: ""; display: block; }
  header.web, body footer { width: 960px; } }

@media (max-width: 30rem) { #container_index, main.page, header.web, body footer { width: 1 1 1 1; }
  #container_index::after, main.page::after, header.web::after, body footer::after { clear: both; content: ""; display: block; } }

/************************************* header */
header.web { margin: 0 auto; /* display: grid; grid-template-columns: 2fr 7fr; grid-template-rows: auto auto; grid-template-areas: "img home_menu" "head_bottom_box head_bottom_box"; */ }

header.web::after { clear: both; content: ""; display: block; }

header.web .logo { float: left; width: 20%; margin-top: 20px; margin-right: 1%; }

header.web .logo img { /*  grid-area: img; */ }

header.web nav.home_menu { float: right; width: 79%; margin-bottom: 15px; /* grid-area: home_menu; */ }

header.web nav.home_menu ul { padding: 0; margin: 0; list-style-type: none; text-align: center; /* display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-column-gap:10px;  */ }

header.web nav.home_menu li { width: 15%; float: left; margin-right: 15px; margin-bottom: 0; font-size: 0.9375rem; line-height: 1.6; }

header.web nav.home_menu li a { width: 100%; padding: 60px 2px 10px; display: block; color: #257C8C; border: #666 1px solid; border-top: 0px none; border-radius: 0 0 5px 5px; background-repeat: no-repeat; background-position: center 10px; background-size: 40%; }

header.web nav.home_menu li a:hover { width: 100%; padding: 60px 2px 10px; display: block; color: #257C8C; border: none; background-color: #fff; box-shadow: 1px 1px 5px #444; text-decoration: none; }

header.web nav.home_menu li:last-child { margin-right: 0; }

header.web nav.home_menu li.new a { background-image: url(../images/sstc-icon-01.svg); }

header.web nav.home_menu li.about a { background-image: url(../images/sstc-icon-02.svg); }

header.web nav.home_menu li.cloud a { background-image: url(../images/sstc-icon-03.svg); }

header.web nav.home_menu li.data a { background-image: url(../images/sstc-icon-04.svg); }

header.web nav.home_menu li.box a { background-image: url(../images/sstc-icon-05.svg); }

header.web nav.home_menu li.link a { background-image: url(../images/sstc-icon-06.svg); }

header.web .head_bottom_box { /* margin-top: 10px; */ text-align: right; /* grid-area: head_bottom_box; */ }

header.web .head_bottom_box ul { padding: 0; margin: 5px 20px 0 0; list-style-type: none; display: inline-block; vertical-align: top; }

header.web .head_bottom_box li { padding: 0 10px 0 0; margin-right: 5px; margin-bottom: 0; display: inline-block; border-right: #444 1px solid; }

header.web .head_bottom_box li a { color: #444; }

header.web .head_bottom_box li:last-child { padding-right: 0; margin-right: 0; border-right: 0px none; }

header.web .head_bottom_box .google_search { width: 30%; display: inline-block; }

header.web .head_bottom_box .google_search img { width: 70px; vertical-align: baseline; }

header.web .head_bottom_box .google_search .google_search_input { display: inline-block; border: #ddd 1px solid; background-color: #fff; border-radius: 5px; }

header.web .head_bottom_box .google_search .google_search_input input[type="text"] { width: 150px; float: right; padding: 2px 5px; border: 0px none; background-color: transparent; }

header.web .head_bottom_box .google_search .google_search_input button { width: 40px; height: 30px; float: right; border: 0px none; transform: scale(1); background-color: #aaa; border-radius: 0 5px 5px 0; }

header.web .head_bottom_box .google_search .google_search_input button i { display: block; }

header.web .head_bottom_box .google_search .google_search_input button img.mobile { display: none; }

.Mobile_nav { display: none; }

@media (min-width: 30rem) and (max-width: 45rem) { header.web { grid-template-columns: 1fr; grid-template-areas: "img" "home_menu" "head_bottom_box"; }
  header.web .logo { float: left; width: 100%; margin-top: 0px; margin-right: 0; }
  header.web .logo img { margin: 10px auto 15px; display: block; }
  header.web nav.home_menu { width: 100%; }
  header.web nav.home_menu li { width: 15%; float: left; margin-right: 10px; }
  header.web nav.home_menu li a { min-height: 120px; }
  header.web nav.home_menu li.active a { border: none; background-color: #eee; border: #666 1px solid; box-shadow: none; }
  header.web nav.home_menu li a:hover { border: #666 1px solid; }
  header.web nav.home_menu li.new a, header.web nav.home_menu li.about a, header.web nav.home_menu li.cloud a, header.web nav.home_menu li.data a, header.web nav.home_menu li.box a, header.web nav.home_menu li.link a { height: 100%; border-top: #666 1px solid; background-position: center 20px; }
  header.web .head_bottom_box ul { margin-bottom: 10px; }
  header.web .head_bottom_box .google_search { margin-right: 20px; } }

@media (max-width: 30rem) { header.web { grid-template-columns: 1fr; grid-template-rows: auto auto; grid-template-areas: "img" "home_menu" "head_bottom_box"; }
  header.web .logo { float: left; width: 100%; margin-top: 0px; margin-right: 0; }
  header.web .logo img { margin: 10px auto 15px; display: block; width:200px; }
  header.web .home_menu { display: none; }
  header.web .head_bottom_box { padding: 0 2%; }
  header.web .head_bottom_box ul { margin: 0 auto 15px; display: block; text-align: center; }
  header.web .head_bottom_box .google_search { width: 100%; float: left; }
  header.web .head_bottom_box .google_search img { display: none; }
  header.web .head_bottom_box .google_search .google_search_input { width: 100%; float: left; }
  header.web .head_bottom_box .google_search .google_search_input input[type="text"] { width: 70%; }
  header.web .head_bottom_box .google_search .google_search_input button { width: 30%; }
  header.web .head_bottom_box .google_search .google_search_input button i { display: none; }
  header.web .head_bottom_box .google_search .google_search_input button img.mobile { margin: 0 auto; display: block; }
  header.web .Mobile_nav { position: absolute; z-index: 99999999; top: 0; left: 0; display: block; }
  header.web .Mobile_nav li img { width: 10%; margin-right: 2%; } }

/************************************* footer */
body footer { padding: 20px; margin: 0 auto; background-color: #D0F6F6; font-size: 0.875rem; line-height: 1.5; /*  display: grid; grid-template-columns: 2fr 2fr 107px; grid-column-gap:10px; place-items: center center; */ }

body footer::after { clear: both; content: ""; display: block; }

body footer .text_box { float: left; width: 43%; margin-right: 1%; }

body footer .text_box a { width: 90px; float: right; margin: 0 0 10px 10px; display: block; }

body footer .text_box a img { width: 100%; }

body footer p { color: #666; }

body footer .service_box { float: left; width: 43%; margin-right: 1%; }

body footer .service_box img { width: 49.5%; float: left; margin-top: 12px; }

body footer .accessibility { float: right; width: 12%; text-align: right; }

body footer .accessibility img { margin-top: 40px; }

@media (min-width: 30rem) and (max-width: 45rem) { body footer { grid-template-columns: 1fr; }
  body footer .text_box { width: 100%; margin-right: 0; margin-bottom: 10px; }
  body footer .service_box { width: 100%; margin-right: 0; margin-bottom: 10px; }
  body footer .service_box img { margin-top: 0; }
  body footer .accessibility { width: 100%; text-align: center; }
  body footer .accessibility img { margin-top: 0; } }

@media (max-width: 30rem) { body footer { grid-template-columns: 1fr; }
  body footer .text_box { width: 100%; margin-right: 0; margin-bottom: 10px; }
  body footer .service_box { width: 100%; margin-right: 0; margin-bottom: 10px; }
  body footer .service_box img { margin-top: 0; }
  body footer .accessibility { width: 100%; text-align: center; }
  body footer .accessibility img { margin-top: 0; } }

/************************************* index */
.big_image { width: 960px; position: relative; margin: 20px auto 40px; }

.big_image #index_big_images { padding: 1% 1% 4%; border: #fff 1px solid; }

.big_image #index_big_images .carousel-control-prev, .big_image #index_big_images .carousel-control-next { display: none; }

.big_image #index_big_images .carousel-indicators { padding: 0; margin: 0 0 0 720px; bottom: 95px; }

.big_image #index_big_images .carousel-indicators li { width: 15px; height: 15px; margin-bottom: 0; border-radius: 10px; }

.big_image img.big_image_text { position: absolute; right: 0px; bottom: 0px; }

.big_image:before { width: 325px; height: 256px; content: ""; top: 0; right: -326px; position: absolute; background: url(../images/Image-map.png) no-repeat 0px 0px; }

@media (min-width: 30rem) and (max-width: 45rem) { .big_image { width: 100%; }
  .big_image #index_big_images { width: 100%; padding: 1% 1% 8%; }
  .big_image #index_big_images .carousel-indicators { padding: 0; margin: 0; bottom: 70px; }
  .big_image:before { display: none; } }

@media (max-width: 30rem) { .big_image { width: 100%; }
  .big_image #index_big_images { width: 100%; padding: 1% 1% 8%; }
  .big_image #index_big_images .carousel-indicators { padding: 0; margin: 0; bottom: 60px; }
  .big_image:before { display: none; } }

.new_box { position: relative; margin-bottom: 30px; }

.new_box h3 { width: 100%; padding: 5px 0; position: relative; text-align: center; font-size: 1.125rem; line-height: 1.33; color: #fff; background-color: #F7B52B; }

.new_box h3 img { position: absolute; top: -7px; left: 50%; margin-left: -114px; }

.new_box .new_box_content { width: 100%; padding: 20px; margin: 0 auto; background-color: #D0F6F6; border: #9BDCE4 1px solid; /* display: grid; grid-template-columns: 1fr 1fr; */ }

.new_box .new_box_content::after { clear: both; content: ""; display: block; }

.new_box .new_box_content div { width: 50%; float: left; min-height: 230px; }

.new_box .new_box_content div img { float: left; margin: 30px 20px 10px 0; }

.new_box .new_box_content div .text_box { float: left; width: 70%; }

.new_box .new_box_content div h4 { padding: 5px 0; color: #E80000; border-top: #fff 1px solid; border-bottom: #fff 1px solid; }

.new_box a.more { position: absolute; bottom: 5px; right: 120px; }

@media (min-width: 30rem) and (max-width: 45rem) { .new_box .new_box_content { width: 100%; /* grid-template-columns: 1fr 1fr; grid-column-gap:20px; */ }
  .new_box .new_box_content div { margin-bottom: 10px; }
  .new_box .new_box_content div img { margin-top: 0; }
  .new_box .new_box_content div .text_box { width: 100%; }
  .new_box a.more { width: 100%; padding: 10px 0; position: static; text-align: center; display: block; background-color: #D0F6F6; border: #9BDCE4 1px solid; } }

@media (max-width: 30rem) { .new_box { margin-bottom: 20px; }
  .new_box .new_box_content { width: 100%; grid-template-columns: 1fr; }
  .new_box .new_box_content div { width: 100%; margin-bottom: 10px; }
  .new_box .new_box_content div img { margin-top: 0; }
  .new_box .new_box_content div .text_box { width: 100%; }
  .new_box a.more { width: 100%; padding: 10px 0; position: static; text-align: center; display: block; background-color: #D0F6F6; border: #9BDCE4 1px solid; } }

.video_box { float: left; width: 49.5%; margin-right: .5%; margin-bottom: 40px; background-color: rgba(255, 255, 255, 0.5); }

.video_box h3 { width: 100%; padding: 5px 0; position: relative; text-align: center; font-size: 1.125rem; line-height: 1.33; color: #fff; background-color: #8EC220; }

.video_box h3 img { position: absolute; top: -10px; left: 50%; margin-left: -114px; }

.video_box .video_box_content { padding: 10px; vertical-align: top; }

@media (min-width: 30rem) and (max-width: 45rem) { .video_box { float: none; width: 100%; margin-right: 0; margin-bottom: 20px; } }

@media (max-width: 30rem) { .video_box { float: none; width: 100%; margin-right: 0; margin-bottom: 20px; } }

.live_box { float: left; width: 49.5%; margin-left: .5%; margin-bottom: 40px; background-color: rgba(255, 255, 255, 0.5); }

.live_box h3 { width: 100%; padding: 5px 0; position: relative; text-align: center; font-size: 1.125rem; line-height: 1.33; color: #fff; background-color: #00ACDA; }

.live_box h3 img { position: absolute; top: -10px; left: 50%; margin-left: -145px; }

.live_box .live_box_content { padding: 10px 15px 18px; vertical-align: top; }

.live_box .live_box_content img { width: 100%; }

@media (min-width: 30rem) and (max-width: 45rem) { .live_box { float: none; width: 100%; margin-left: 0; margin-bottom: 20px; } }

@media (max-width: 30rem) { .live_box { float: none; width: 100%; margin-left: 0; margin-bottom: 20px; } }

.new_photo_box { float: left; width: 100%; margin-bottom: 40px; }

.new_photo_box::after { clear: both; content: ""; display: block; }

.new_photo_box h3 { width: 100%; padding: 5px 0; position: relative; text-align: center; font-size: 1.125rem; line-height: 1.33; color: #fff; background-color: #E471EA; }

.new_photo_box h3 img { position: absolute; top: -10px; left: 50%; margin-left: -174px; }

.new_photo_box .new_photo_box_content { width: 100%; height: 698px; position: relative; background: url(../images/photo.svg) no-repeat 0px 0px; }

.new_photo_box .new_photo_box_content img.p1 { width: 170px; height: 120px; top: 78px; left: 175px; position: absolute; }

.new_photo_box .new_photo_box_content img.p2 { width: 170px; height: 120px; top: 54px; left: 373px; position: absolute; }

.new_photo_box .new_photo_box_content img.p3 { width: 150px; height: 100px; top: 72px; left: 589px; position: absolute; }

.new_photo_box .new_photo_box_content img.p4 { width: 190px; height: 130px; top: 276px; left: 48px; position: absolute; }

.new_photo_box .new_photo_box_content img.p5 { width: 230px; height: 150px; top: 217px; left: 262px; position: absolute; }

.new_photo_box .new_photo_box_content img.p6 { width: 200px; height: 130px; top: 192px; left: 519px; position: absolute; }

.new_photo_box .new_photo_box_content img.p7 { width: 160px; height: 100px; top: 178px; left: 727px; position: absolute; }

.new_photo_box .new_photo_box_content img.p8 { width: 200px; height: 130px; top: 436px; left: 67px; position: absolute; }

.new_photo_box .new_photo_box_content img.p9 { width: 200px; height: 130px; top: 397px; left: 284px; position: absolute; }

.new_photo_box .new_photo_box_content img.p10 { width: 170px; height: 110px; top: 344px; left: 511px; position: absolute; }

.new_photo_box .new_photo_box_content img.p11 { width: 200px; height: 140px; top: 349px; left: 703px; position: absolute; }

.new_photo_box .new_photo_box_content img.p12 { width: 190px; height: 130px; top: 500px; left: 505px; position: absolute; }

@media (min-width: 30rem) and (max-width: 45rem) { .new_photo_box { float: none; margin-bottom: 10px; }
  .new_photo_box .new_photo_box_content { height: auto; background: none; /* display: grid; grid-template-columns: 1fr 1fr; grid-column-gap:10px; */ }
  .new_photo_box .new_photo_box_content img.p1, .new_photo_box .new_photo_box_content img.p3, .new_photo_box .new_photo_box_content img.p5, .new_photo_box .new_photo_box_content img.p7, .new_photo_box .new_photo_box_content img.p9, .new_photo_box .new_photo_box_content img.p11 { float: left; width: 49%; margin-right: 1%; height: auto; margin-bottom: 10px; position: static; }
  .new_photo_box .new_photo_box_content img.p2, .new_photo_box .new_photo_box_content img.p4, .new_photo_box .new_photo_box_content img.p6, .new_photo_box .new_photo_box_content img.p8, .new_photo_box .new_photo_box_content img.p10, .new_photo_box .new_photo_box_content img.p12 { float: right; width: 49%; height: auto; margin-bottom: 10px; position: static; } }

@media (max-width: 30rem) { .new_photo_box { float: none; margin-bottom: 10px; }
  .new_photo_box .new_photo_box_content { height: auto; background: none; /* display: grid; grid-template-columns: 1fr 1fr; grid-column-gap:10px; */ }
  .new_photo_box .new_photo_box_content img.p1, .new_photo_box .new_photo_box_content img.p3, .new_photo_box .new_photo_box_content img.p5, .new_photo_box .new_photo_box_content img.p7, .new_photo_box .new_photo_box_content img.p9, .new_photo_box .new_photo_box_content img.p11 { float: left; width: 49%; margin-right: 1%; height: auto; margin-bottom: 10px; position: static; }
  .new_photo_box .new_photo_box_content img.p2, .new_photo_box .new_photo_box_content img.p4, .new_photo_box .new_photo_box_content img.p6, .new_photo_box .new_photo_box_content img.p8, .new_photo_box .new_photo_box_content img.p10, .new_photo_box .new_photo_box_content img.p12 { float: right; width: 49%; height: auto; margin-bottom: 10px; position: static; } }

.index_foot_box { float: left; width: 100%; }

.index_foot_box ul { padding: 0; margin: 0; list-style-type: none; /* display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-column-gap:15px; place-items: center center; */ }

.index_foot_box li { float: left; width: 15.8%; margin-right: 1%; margin-bottom: 0; display: block; position: relative; }

.index_foot_box li a { width: 100%; height: 175px; padding: 60px 10px 10px; display: block; text-align: center; color: #fff; font-size: 1.125rem; line-height: 1.33; }

.index_foot_box li a:hover { text-decoration: none; }

.index_foot_box li:last-child { margin-right: 0; }

.index_foot_box li:before { content: ""; width: 100px; position: absolute; top: 125px; left: 50%; margin-left: -50px; border-bottom: #fff 2px solid; }

.index_foot_box li.i1 { background: url(../images/hexagonalcolor-01.svg) no-repeat center 0px/147px 100%; }

.index_foot_box li.i2 { background: url(../images/hexagonalcolor-02.svg) no-repeat center 0px/147px 100%; }

.index_foot_box li.i3 { background: url(../images/hexagonalcolor-03.svg) no-repeat center 0px/147px 100%; }

.index_foot_box li.i4 { background: url(../images/hexagonalcolor-04.svg) no-repeat center 0px/147px 100%; }

.index_foot_box li.i5 { background: url(../images/hexagonalcolor-05.svg) no-repeat center 0px/147px 100%; }

.index_foot_box li.i6 { background: url(../images/hexagonalcolor-06.svg) no-repeat center 0px/147px 100%; }

@media (min-width: 30rem) and (max-width: 45rem) { .index_foot_box { float: none; margin-bottom: 20px; }
  .index_foot_box ul { grid-template-columns: 1fr 1fr 1fr; }
  .index_foot_box li { width: 33%; margin-right: 0; } }

@media (max-width: 30rem) { .index_foot_box { float: none; margin-bottom: 20px; }
  .index_foot_box ul { grid-template-columns: 1fr 1fr; }
  .index_foot_box li { width: 50%; margin-right: 0; } }

/************************************* page */
.title_box { width: 100%; height: 40px; position: relative; text-align: center; font-size: 1.125rem; line-height: 1.33; color: #fff; }

.title_box h3 { padding: 8px 15px 5px; position: absolute; top: -10px; font-size: 1.125rem; line-height: 1.33; border-radius: 5px; }

.title_box .svg { vertical-align: middle; }

.title_box .svg path, .title_box .svg polygon { fill: #fff !important; }

.path { width: 960px; margin: 0 auto; }

.path ul { padding: 0; margin: 0 0 20px 0; list-style-type: none; }

.path li { margin: 0; display: inline-block; }

.path li a { color: #444; }

@media (min-width: 30rem) and (max-width: 45rem) { .title_box { margin-bottom: 30px; }
  .path { width: 96%; margin: 0 2%; } }

@media (max-width: 30rem) { .title_box { margin-bottom: 30px; }
  .path { width: 96%; margin: 0 2%; } }

body .pagination_box::after { clear: both; content: ""; display: block; }

body .pagination_box ul { padding: 0; margin: 10px auto 0; text-align: center; display: block; }

body .pagination_box ul li { padding: 0; margin: 0; display: inline-block; }

body .pagination_box ul li a { width: 25px; height: 25px; display: block; color: #1578B7; }

/************************************* news 最新消息 */
.title_box.news { background-color: #F7B52B; }

.title_box.news h3 { background-color: #F7B52B; }

.new_content { padding: 25px; background-color: white; border-radius: 5px; }

.new_content ul.text_list { padding: 0; margin: 0; list-style-type: none; }

.new_content ul.text_list li { padding-left: 40px; padding-bottom: 7px; margin-bottom: 7px; border-bottom: #F7B52B 1px dashed; background: url(../images/icon-new.svg) no-repeat 0px 0px/3%; }

.new_content ul.text_list a { color: #1578B7; }

.new_content ul.text_list a .date { color: #444; }

.new_content h3 { padding-left: 32px; padding-bottom: 10px; margin-bottom: 15px; font-size: 1.125rem; line-height: 1.33; color: #1578B7; border-bottom: #F7B52B 1px dashed; background: url(../images/icon-new.svg) no-repeat 0px -1px/3%; }

.new_content h3 span.date { float: right; color: #444; }

.new_content section.img a { display: block; color: #FF5D1E; }

@media (min-width: 30rem) and (max-width: 45rem) { .new_content { margin-bottom: 20px; }
  .new_content ul.text_list li { background-size: 5%; }
  .new_content h3 { padding-left: 0; background-image: none; } }

@media (max-width: 30rem) { .new_content { margin-bottom: 20px; }
  .new_content ul.text_list li { background-size: 9%; }
  .new_content h3 { padding-left: 0; background-image: none; }
  .new_content h3 span.date { float: none; margin-top: 7px; display: block; } }

/************************************* about 關於我們 */
.title_box.about { background-color: #01B1AE; }

.title_box.about h3 { background-color: #01B1AE; }

.about_content { /* display: grid; grid-template-columns: 1fr 3fr; grid-column-gap:20px; */ }

.about_content::after { clear: both; content: ""; display: block; }

.about_content .about_nav { float: left; width: 25%; }

.about_content article { float: left; width: 73%; margin-left: 2%; padding: 25px; background-color: white; border-radius: 5px; }

.about_content article h2 { color: #01B1AE; font-size: 1.5rem; line-height: 2; }

.about_content article h3 { padding-bottom: 10px; margin-top: 40px; margin-bottom: 15px; font-size: 1.125rem; line-height: 1.33; color: #01B1AE; border-bottom: #01B1AE 1px dashed; }

.about_content article h3:first-child { margin-top: 0; }

.about_content article img { width: 100%; }

.about_content article img.w60 { width: 60%; }

.about_content article h2 + h3 { margin-top: 20px; }

.about_content article .about_photo_item p { margin-top: 30px; }

.about_content article ul.photo { padding: 0; margin: 0; list-style-type: none; /* display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap:10px; */ }

.about_content article ul.photo li { float: left; width: 31.5%; margin-right: 1.5%; }

.about_content article ul.photo img { border-radius: 5px; box-shadow: 0px 1px 3px #444; }

@media (min-width: 30rem) and (max-width: 45rem) { .about_content { margin-bottom: 20px; /* grid-template-columns: 1fr; */ }
  .about_content aside.about_nav { width: 98%; padding: 0 2%; margin: 10px; }
  .about_content aside.about_nav .card-header a, .about_content aside.about_nav .card-header button { border-radius: 5px; }
  .about_content article { width: 100%; margin-left: 0; }
  .about_content article ul { padding: 0 15px; }
  .about_content article ul.photo { grid-template-columns: 1fr 1fr; }
  .about_content article ul.photo li { width: 48.5%; margin-bottom: 10px; }
  .about_content article img.w60 { width: 100%; } }

@media (max-width: 30rem) { .about_content { margin-bottom: 20px; /*  grid-template-columns: 1fr; */ }
  .about_content aside.about_nav { width: 98%; padding: 0 2%; margin: 10px; }
  .about_content aside.about_nav .card-header a, .about_content aside.about_nav .card-header button { border-radius: 5px; }
  .about_content article { width: 100%; margin-left: 0; }
  .about_content article ul { padding: 0 15px; }
  .about_content article ul.photo { grid-template-columns: 1fr; }
  .about_content article ul.photo li { width: 100%; margin-right: 0%; margin-bottom: 10px; }
  .about_content article img.w60 { width: 100%; } }

/************************************* cloud 替代役家族雲 */
.title_box.cloud { background-color: #8CC222; }

.title_box.cloud h3 { background-color: #8CC222; }

.cloud_content { padding: 25px; background-color: white; border-radius: 5px; }

.cloud_content h3 { padding-bottom: 10px; margin-top: 40px; margin-bottom: 15px; font-size: 1.125rem; line-height: 1.33; color: #8CC222; border-bottom: #8CC222 1px dashed; }

.cloud_content h3:first-child { margin-top: 0; }

.cloud_content .form-group { width: 45%; display: inline-block; }

.cloud_content .form-group label { display: inline-block; }

.cloud_content .form-group .form-control { width: 80%; display: inline-block; }

.cloud_content ul { padding: 0; margin: 0; list-style-type: none; /* display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap:10px; */ }

.cloud_content ul::after { clear: both; content: ""; display: block; }

.cloud_content li { float: left; width: 24.5%; margin-right: .5%; }

.cloud_content li img { width: 100%; margin-bottom: 10px; }

.cloud_content a.link { width: 100%; padding: 10px 0; display: block; color: #444; background-color: #eee; text-align: center; }

.cloud_content a.link.mobile { display: none; }

.cloud_content p { margin: 30px auto 0; display: inline-block; }

@media (min-width: 30rem) and (max-width: 45rem) { .cloud_content { margin-bottom: 20px; }
  .cloud_content .form-group { width: 49%; }
  .cloud_content .form-group .form-control { width: 95%; }
  .cloud_content ul { grid-template-columns: 1fr 1fr; }
  .cloud_content li { width: 49.5%; } }

@media (max-width: 30rem) { .cloud_content { margin-bottom: 20px; }
  .cloud_content .form-group { width: 100%; display: block; }
  .cloud_content .form-group .form-control { width: 100%; display: block; }
  .cloud_content ul { grid-template-columns: 1fr; }
  .cloud_content li { width: 100%; }
  .cloud_content a.link.mobile { margin-bottom: 10px; display: block; } }

/************************************* memories 焦點回顧 */
.title_box.memories { background-color: #8CC222; }

.title_box.memories h3 { background-color: #8CC222; }

.memories_video { width: 960px; margin: 30px auto 0; background: #fff; /* display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 10px; */ }

.memories_video div { width: 49.55%; display: inline-block; vertical-align: top; }

.memories_video div:nth-child(2n) { float: right; }

.memories_video p { padding-left: 20px; padding-right: 20px; }

@media (min-width: 30rem) and (max-width: 45rem) { .memories_video { width: auto; margin-bottom: 20px; /* grid-template-columns: 1fr 1fr; */ }
.memories_video div { width: 49.55%; display: inline-block; margin-bottom: 10px; } }

@media (max-width: 30rem) { .memories_video { width: auto; margin-bottom: 20px; /* grid-template-columns: 1fr; */ }
.memories_video div { width: 100%; display: inline-block; margin-bottom: 20px; } }

.memories_content { padding: 25px; background-color: white; border-radius: 5px; }

.memories_content ul.text_list { padding: 0; margin: 0; list-style-type: none; }

.memories_content ul.text_list li { padding-left: 35px; padding-bottom: 7px; border-bottom: #ccc 1px dashed; background: url(../images/icon-new-g.svg) no-repeat 0px 0px; }

/************************************* left 訓練班服役點滴 */
.title_box.life { background-color: #00ADDB; }

.title_box.life h3 { background-color: #00ADDB; }

.life_content article { padding: 25px; background-color: white; border-radius: 5px; }

.life_content article h3 { padding-bottom: 10px; margin-top: 40px; margin-bottom: 15px; font-size: 1.125rem; line-height: 1.33; color: #00ADDB; border-bottom: #00ADDB 1px dashed; }

.life_content article h3 a { float: right; font-size: 1rem; line-height: 1.65; color: #444; }

.life_content article h3:first-child { margin-top: 0; }

.life_content article .item_box_left::after { clear: both; content: ""; display: block; }

.life_content article .item_box_left img { width: 40%; float: left; margin: 0 10px 10px 0; }

.life_content article .item_box_left p { overflow: auto; }

.life_content article .item_box_right::after { clear: both; content: ""; display: block; }

.life_content article .item_box_right img { width: 40%; float: right; margin: 0 0 10px 10px; }

.life_content article .item_box_right p { overflow: auto; }

@media (min-width: 30rem) and (max-width: 45rem) { .life_content { margin-bottom: 20px; }
  .life_content article h3 { text-align: center; }
  .life_content article h3 a { float: none; margin-top: 10px; display: block; } }

@media (max-width: 30rem) { .life_content { margin-bottom: 20px; }
  .life_content article h3 { text-align: center; }
  .life_content article h3 a { float: none; margin-top: 10px; display: block; }
  .life_content article .item_box_left img, .life_content article .item_box_right img { width: 100%; float: none; margin: 0 0 10px 0; } }

/************************************* glory 榮譽專區 */
.title_box.glory { background-color: #D4568A; }

.title_box.glory h3 { background-color: #D4568A; }

.glory_content { padding: 25px; background-color: white; border-radius: 5px; }

.glory_content h3 { padding-bottom: 10px; margin-top: 40px; margin-bottom: 15px; font-size: 1.125rem; line-height: 1.33; color: #D4568A; border-bottom: #D4568A 1px dashed; }

.glory_content h3:first-child { margin-top: 0; }

.glory_content .form-row { margin-bottom: 20px; }

.glory_content .form-group { margin-right: 10px; }

.glory_content .form-group .btn { color: #fff; background-color: #D4568A; }

.glory_content ul { padding: 0; margin: 0; list-style-type: none; /* display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap:10px;  */ }

.glory_content ul::after { clear: both; content: ""; display: block; }

.glory_content li { float: left; width: 24.5%; margin-right: .5%; }

.glory_content li img { width: 100%; }

.glory_content li p { padding: 0 5px; }

@media (min-width: 30rem) and (max-width: 45rem) { .glory_content { margin-bottom: 20px; }
  .glory_content .form-row .form-group { width: 100%; }
  .glory_content .form-row .form-group .btn { width: 100%; }
  .glory_content ul { grid-template-columns: 1fr 1fr; }
  .glory_content li { width: 49.5%; } }

@media (max-width: 30rem) { .glory_content { margin-bottom: 20px; }
  .glory_content .form-row .form-group { width: 100%; }
  .glory_content .form-row .form-group .btn { width: 100%; }
  .glory_content ul { grid-template-columns: 1fr; }
  .glory_content li { width: 100%; } }

/************************************* contact 聯絡我們 */
.title_box.contact { background-color: #5E90B5; }

.title_box.contact h3 { background-color: #5E90B5; }

.contact_content { padding: 25px; background-color: white; border-radius: 5px; }

.contact_content h3 { padding-bottom: 10px; margin-top: 40px; margin-bottom: 15px; font-size: 1.125rem; line-height: 1.33; color: #5E90B5; border-bottom: #5E90B5 1px dashed; }

.contact_content h3:first-child { margin-top: 0; }

.contact_content table.table_contact thead tr th { text-align: center; }

.contact_content a { color: #5E90B5; }

@media (min-width: 30rem) and (max-width: 45rem) { .contact_content { margin-bottom: 20px; } }

@media (max-width: 30rem) { .contact_content { margin-bottom: 20px; } }

/************************************* QA 常見問題 */
#about06 { width: 100%; }

#about06 .card { margin-bottom: 5px; }

#about06 .card-header { width: 100%; padding: 0; border: 0px none; box-shadow: none; background-color: transparent; }

#about06 .card-header button { width: 100%; padding: 15px 20px; text-align: left; color: #444; background-color: #D8EFFC; transform: scale(1); white-space: initial; }

#about06 .card-header button:hover { text-decoration: none; background-color: #FBFCD8; }

#about06 .collapse .card-body { word-break: break-all; }

/************************************* about */
.about_nav .card { border: 0px none; background-color: transparent; }

.about_nav .card-header { width: 100%; padding: 0; margin: 0 0 10px 0; border: 0px none; background-color: transparent; }

.about_nav .card-header a, .about_nav .card-header button { width: 100%; height: 40px; padding: 5px 20px 1px 60px; position: relative; display: block; text-align: left; color: #007786; border: #01B1AE 1px solid; border-radius: 0 5px 5px 0; transform: scale(1); }

.about_nav .card-header a, .about_nav .card-header button:hover { background-color: #fff; box-shadow: 2px 2px 6px -2px #444; text-decoration: none; }

.about_nav .card-header .svg { width: 30px; height: 30px; display: inline-block; top: 5px; left: 20px; position: absolute; }

.about_nav .card-header .svg g g path:first-child { fill: #01B1AE !important; }

.about_nav .card-body { padding: 15px 0; }

.about_nav .card-body ul { padding: 0; margin: 0; list-style-type: none; }

.about_nav .card-body li { width: 100%; padding-left: 20px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: #aaa 1px dashed; }

.about_nav .card-body li a { width: 100%; color: #444; display: block; }

/* ========================================================================== Activity Page ========================================================================== */
/* ========================================================================== Plug mixins ========================================================================== */
.pt0 { padding-top: 0; }

.pt5 { padding-top: 5px; }

.pt10 { padding-top: 10px; }

.pt15 { padding-top: 15px; }

.pt20 { padding-top: 20px; }

.pt25 { padding-top: 25px; }

.pt30 { padding-top: 30px; }

.pt35 { padding-top: 35px; }

.pt40 { padding-top: 40px; }

.pt45 { padding-top: 45px; }

.pt50 { padding-top: 50px; }

.pb0 { padding-bottom: 0; }

.pb5 { padding-bottom: 5px; }

.pb10 { padding-bottom: 10px; }

.pb15 { padding-bottom: 15px; }

.pb20 { padding-bottom: 20px; }

.pb25 { padding-bottom: 25px; }

.pb30 { padding-bottom: 30px; }

.pb35 { padding-bottom: 35px; }

.pb40 { padding-bottom: 40px; }

.pb45 { padding-bottom: 45px; }

.pb50 { padding-bottom: 50px; }

.pl0 { padding-left: 0; }

.pl5 { padding-left: 5px; }

.pl10 { padding-left: 10px; }

.pl15 { padding-left: 15px; }

.pl20 { padding-left: 20px; }

.pl25 { padding-left: 25px; }

.pl30 { padding-left: 30px; }

.pl35 { padding-left: 35px; }

.pl40 { padding-left: 40px; }

.pl45 { padding-left: 45px; }

.pl50 { padding-left: 50px; }

.pr0 { padding-right: 0; }

.pr5 { padding-right: 5px; }

.pr10 { padding-right: 10px; }

.pr15 { padding-right: 15px; }

.pr20 { padding-right: 20px; }

.pr25 { padding-right: 25px; }

.pr30 { padding-right: 30px; }

.pr35 { padding-right: 35px; }

.pr40 { padding-right: 40px; }

.pr45 { padding-right: 45px; }

.pr50 { padding-right: 50px; }

.mt0 { margin-top: 0; }

.mt5 { margin-top: 5px; }

.mt10 { margin-top: 10px; }

.mt15 { margin-top: 15px; }

.mt20 { margin-top: 20px; }

.mt25 { margin-top: 25px; }

.mt30 { margin-top: 30px; }

.mt35 { margin-top: 35px; }

.mt40 { margin-top: 40px; }

.mt45 { margin-top: 45px; }

.mt50 { margin-top: 50px; }

.mb0 { margin-bottom: 0; }

.mb5 { margin-bottom: 5px; }

.mb10 { margin-bottom: 10px; }

.mb15 { margin-bottom: 15px; }

.mb20 { margin-bottom: 20px; }

.mb25 { margin-bottom: 25px; }

.mb30 { margin-bottom: 30px; }

.mb35 { margin-bottom: 35px; }

.mb40 { margin-bottom: 40px; }

.mb45 { margin-bottom: 45px; }

.mb50 { margin-bottom: 50px; }

.ml0 { margin-left: 0; }

.ml5 { margin-left: 5px; }

.ml10 { margin-left: 10px; }

.ml15 { margin-left: 15px; }

.ml20 { margin-left: 20px; }

.ml25 { margin-left: 25px; }

.ml30 { margin-left: 30px; }

.ml35 { margin-left: 35px; }

.ml40 { margin-left: 40px; }

.ml45 { margin-left: 45px; }

.ml50 { margin-left: 50px; }

.mr0 { margin-right: 0; }

.mr5 { margin-right: 5px; }

.mr10 { margin-right: 10px; }

.mr15 { margin-right: 15px; }

.mr20 { margin-right: 20px; }

.mr25 { margin-right: 25px; }

.mr30 { margin-right: 30px; }

.mr35 { margin-right: 35px; }

.mr40 { margin-right: 40px; }

.mr45 { margin-right: 45px; }

.mr50 { margin-right: 50px; }
/*服役點滴文字限制顯示三行*/
.ellipsis {
text-overflow:ellipsis;	
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 限制文字只出現 3 行, 結尾出現省略號*/
}
/* ========================================================================== responsive mixins ========================================================================== */