@charset "utf-8";
/* CSS Document */
*,*:after,*:before {box-sizing:border-box;}
img {max-width:100%; height: auto;}

/********** 主體內容 **********/
.hide-in-pc {display:block; }
.hide-in-phone {display:none; }
.hide-in-1240 {display:none; }

/* 展開收合效果 */
.flip, .flip1, .flip2, .flip3, .flip4, .flip5, .flip6, .flip7 {margin:0; padding: 5px 0; cursor:pointer; text-align: left; left: 0;}
.panel, .panel1, .panel2, .panel3, .panel4, .panel5, .panel6, .flip7 {margin:0; padding:0; border:solid 0px #c3c3c3; display:none;}

html, body, div, span, applet, object, iframe, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0; padding: 0; border: 0;  font-family: adamina,"微軟正黑體"; line-height: 1.6em;
    vertical-align: baseline; position: relative; -webkit-text-size-adjust: none;}
article {margin: 10px 0 0;}

body {background: #f6f6f6; color: #7f888f;}
body * {text-shadow: none;}
p {padding-bottom: 10px;}
section  {margin-top: 15px; padding: 0 30px;}

/* 選單固定效果 */
/*.navFixed {
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  margin-top: 0;
  min-width: 100%;
  opacity: 0.94;
  transition: opacity .5s ease-out;
}*/

/* 輸入框內文字color */
::placeholder { /* CSS 3 標準 */ color: #fff; opacity: 0.3;}
::-webkit-input-placeholder { /* Chrome, Safari */ color: #fff; opacity: 0.3;}
:-ms-input-placeholder { /* IE 10+ */ color: #fff; opacity: 0.3;}
::-moz-placeholder { /* Firefox 19+ */ color: #fff; opacity: 0.3;}

input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"], input[type="url"],
select, textarea {
    -moz-appearance: none; -webkit-appearance: none; -ms-appearance: none; appearance: none;
    background: #007fa0; color: #fff !important; font-size: 18px; text-decoration: none; padding: 10px 20px; margin: 50px auto 30px;
    border-radius: 0.375em; border: solid 2px rgba(255, 255, 255, 1); display: block; outline: 0; width: 180px;}
    input[type="text"]:invalid, input[type="password"]:invalid, input[type="email"]:invalid, input[type="tel"]:invalid, input[type="search"]:invalid, input[type="url"]:invalid,
    select:invalid, textarea:invalid {
            box-shadow: none; }
    input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="search"]:focus, input[type="url"]:focus,
    select:focus, textarea:focus {
            border-color: #fff;}

/* 搜尋 */
#search form {
    text-decoration: none; position: relative; }
    #search form:before {
        -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased;
        -moz-transform: scaleX(-1); -webkit-transform: scaleX(-1); -ms-transform: scaleX(-1); transform: scaleX(-1);
        color: #fff; font-style: normal; font-variant: normal; text-rendering: auto; display: inline-block;
        font-family: 'Font Awesome 5 Free'; font-weight: 900;
        /* 放大鏡 */
        content: '\f002'; cursor: default; display: block;
        font-size: 1.5em; text-align: center; height: 1.8em; line-height: 2em; opacity: 1;
        position: absolute; top: -2px; right: 10px; width: 2em;}
    #search form input[type="text"] {padding: 10px; margin: 20px auto;}

h2 {font-size: 28px; font-weight: bold; /*line-height: 1.5em;*/ color: #3d4449; position: absolute; margin-top: 0;}
h3 {font-size: 26px; font-weight: bold; line-height: 0;}
h4 {font-size: 24px; color: #007fa0; margin: 0; line-height: 2em;}

hr {border: 0; border-bottom: solid 1px rgba(210, 215, 217, 0.75); margin: 2em 0;}
hr.team {border-color: #c5dee5;}

ul li {list-style-type: none;}
ul.bluelist {list-style: none; padding: 0 0 0 20px;}
ul.bluelist li::before {content: "•"; color: #c5dee5; display: inline-block; width: 1em; margin-left: -1em;}
ul.crm li {list-style: decimal; margin-left: 25px; padding-left: 5px;}


a, a:link, a:active, a:visited, a:hover {
    -moz-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
    -webkit-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
    -ms-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
    color: #f56a6a; text-decoration: none;}
/*a:hover {border-bottom: 1px dotted #f56a6a;}*/

.menu_item a {font-size: 18px; color: #007fa0;}
.menu_item a:hover {border-bottom: dotted 1px; color: #f56a6a;}

#header {background: #e7faff url("../images/logo.png") center center no-repeat; background-size: /*contain*/516px 80px; padding: 40px 0; display: block;}

#main {background: #f6f6f6; font-size: 16px; transition: margin-left .3s; margin: 0 0 0 200px; padding: 0; z-index: 0;}

/* 目錄 */
#dire {background: #e9e9e9; font-size: 15px; color: #333333; padding: 0.5em 2em !important; margin: 0; }
#dire a {color: #f56a6a; font-size: 15px; text-decoration: underline;}
.menu_item { line-height: 1.5em; margin-bottom: 1em; top: -10px; right: 20px; float: right;}

#gotop {position: fixed; z-index: 90; right: 10px; bottom: 40px; display: none; width: 80px; height: 80px; background: url("../images/gotop.png") bottom right no-repeat; border-bottom: dotted 0px;}
#gotop:hover{border-bottom: 0 !important; background: url("../images/gotopa.png") top no-repeat; }

.title_index {border-bottom: 3px solid #61bed6; margin: 0 0 10px 0; /*padding-bottom: 33px;*/ !important}
.title {border-bottom: 3px solid #61bed6; margin: 0 0 10px 0; padding-bottom: 33px;}
.title_w {border-bottom: 3px solid #fff; color: #fff; margin: 0 2em 1em 0; padding-bottom: 1.5em;}
.title_team {background: #61bed6; font-size: 14px; color: #fff; text-align: center; padding: 0.2em 1em; position: relative; top: -0.5em;}
.t_edit {padding-bottom: 33px;}

.arr_right {float: right; margin-right: 0.5em;}
.arr_sms {color: #f56a6a !important; right: 0;}

.more, input[type="back"] {background: #61bed6; color: #fff !important; font-size: 15px; text-align: center; /*margin: 3px 0 -33px 0;*/ padding: 0.3em 1em; /*bottom: 10px;*/ position: relative; z-index: 1; float: right;}
input[type="back"] {border: 0; width: 80px; padding: 0.4em 0; outline:none;}
.more a {color: #ffffff !important;}
.more a:hover{color: #ffff00 !important;}

.new {color: #FF0004; font-size: 12px; border: 1px solid #FF0004; padding: 0 3px;}

.btn {text-align: center; margin: 2em 0;}

/*************** font color ***************/
.txt_w {color: #fff;}
.txt_b {color: #007fa0;}
.txt_lb {color: #4fd1d9;}
.txt_oran {color: #ffc950;}
.txt_pr {color: #f56a6a;}
.txt_left {text-align: left;}

.w100 {width: 100%;}
.h {padding: 20px;}
.h5 {margin-bottom: -10px;}
.h10 {margin: 10px 0 0; clear: both;}
.h30 {height: 30px; clear: both;}
.h_bluelist {padding: 0 5px 0 30px !important;}
.h_case {padding: 10px 40px 10px 50px !important;}
.h_activities {height: 65px;}

/* 圖片 mouseover */
.box_img {
	color: #fff; border-radius: 0.375em; position: relative; overflow: hidden;
	background-size: cover !important;
	background-position: center;
	background-repeat: no-repeat !important;
}

.box_img img {display: block; width: 100%; height: auto; transition: all 0.6s;}
.box_img:hover img {transform: scale(1.075);}
.box_img .box-hover {
    left: 0; top: 0; display: none;
    width: 100%; height: 100%; padding: 0 5%; margin: 0 auto; position: absolute;}
.box_img:hover .box-hover {display: flex; align-items: center /*垂直置中*/; justify-content: center /*水平置中*/;}
.box_img a {/*background: #f56a6a;*/ font-size: 20px; font-weight: bold; color: #fff; /*border-radius: 30px; padding: 2px 10px;*/ width: 100%;}
.box_img a:hover {background-color: rgba(0,0,0, 0.6);}
.box_img li {list-style-type: none;}

.layout_img {float: left; text-align: center; margin-bottom: 30px;}

/* FB粉專外掛 */
/* 廣告交換 */
.fb, .exlogo {width: 100% !important; padding: 0 !important; margin: 0.5em 0 !important; border: 0 !important; text-align: center;}
.exlogo a {margin: 0 !important;}
.exlogo a:hover {background: #FFF !important; color:#fff;}

.exlogo img {width: 180px;}

/* 聯絡資訊 */
#contact {background: #5aabc0; color: #fff; margin-top: 2em; padding: 50px 0 50px 30px;}
#contact a {border-bottom: dotted 1px; color: #fff; text-decoration: none; }
#contact a:hover {border-bottom-color: #ffff00; }
.contact1 {color: #fff; font-size: 1.2em; padding: 1em 0.2em 0 0.2em; width: 36%; float: left; line-height: 2em;}
.contact2 {color: #fff; font-size: 1.2em; padding: 1em 0.2em 0 0.2em; width: 24%; float: left; line-height: 2em;}
.contact3 {padding: 1em 2em 0 0.2em; width: 37%; float: right;}

/* Footer */
#footer .copyright {
  background: #5aabc0; color: #fff; font-size: 20px; text-align: center;
  padding: 0.5em; margin: 0; border-top: 1px solid #fff;}

/* about_Posts */
.about_posts {
  display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex;
  -moz-flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
  font-size: 22px; font-weight: bold; width: calc(100%); margin: 0;}
      .about_posts article {
        -moz-flex-grow: 0; -webkit-flex-grow: 0; -ms-flex-grow: 0; flex-grow: 0;
        -moz-flex-shrink: 1; -webkit-flex-shrink: 1; -ms-flex-shrink: 1; flex-shrink: 1;
        position: relative; width: calc(20% - 2em); margin: 1em;}
            .about_posts article:before {content: ''; display: block; width: 1px; height: calc(100% + 6em); left: -3em; top: 0; position: absolute;}
            .about_posts article:after {content: ''; display: block; width: calc(100% + 6em); height: 1px; bottom: -2em; right: 0; position: absolute;}
            .about_posts article > :last-child {margin-bottom: 0;}
            .about_posts article .image {display: block; margin: 0;}
            .about_posts article .image img {display: block; width: 100%;}

/*************** miles ***************/
.miles {width:100%;}
.miles .left{padding: 1%; color: #fff; font-size: 150%; width:15%; text-align: center; float:left; top: 0; bottom: 0;}
.miles .right{margin-left:15%; padding: 2%; background: #f6f6f6; }
.miles .space {padding-bottom: 2em;}

.miles_0 {
    background: #007fa0;
    background:linear-gradient(-15deg, transparent 48px, #007fa0 0) bottom right, linear-gradient(15deg, transparent 48px, #007fa0 0) bottom left;
    background-size: 50.1% 100%; background-repeat: no-repeat; height: 100px; width: 15%;}
.miles_1 {background: #ddeaed; border-top: 0px solid #ddeaed;}
.miles_2 {background: #c5dee5; border-top: 1px solid #c5dee5;}
.miles_3 {background: #acd2dc; border-top: 1px solid #acd2dc;}
.miles_4 {background: #94c6d4; border-top: 1px solid #94c6d4;}
.miles_5 {background: #7bbacb; border-top: 1px solid #7bbacb;}
.miles_6 {background: #62afc2; border-top: 1px solid #62afc2;}
.miles_7 {background: #49a2ba; border-top: 1px solid #49a2ba;}
.miles_8 {background: #3197b1; border-top: 1px solid #3197b1;}

/*************** sms ***************/
.sms_left {float: left; width: 65%;}
.sms_right {float: right; width: 30%; margin-right: 1%;}
.blueline {border-top: 1px solid #61bed6; padding: 4px 0;}

.sms_title {background: #61bed6; color: #fff; padding: 0.4em 0.5em;}
.sms_list {padding-top: 0.2em;}

.sms_100w {width: 100% !important;}
.sms_casetitle {background: #188ba8; color: #fff; text-align: center; padding: 0px 0; margin: 0;}

@media screen and (min-width: 1681px) {
    .about_posts article:nth-child(3n + 1):before {display: none;}
    .about_posts article:nth-child(3n + 1):after {width: 100%;}
    .about_posts article:nth-last-child(1),
    .posts article:nth-last-child(2),
    .posts article:nth-last-child(3) {margin-bottom: 1em;}
        .about_posts article:nth-last-child(1):before,
        .posts article:nth-last-child(2):before,
        .posts article:nth-last-child(3):before {height: 100%;}
            .about_posts article:nth-last-child(1):after,
            .posts article:nth-last-child(2):after,
            .posts article:nth-last-child(3):after {display: none;}
}

@media screen and (max-width: 1350px) {
    .about_posts article {width: calc(25% - 2em);}
        .about_posts article:nth-last-child(3) {margin-bottom: 1em;}
}

@media screen and (min-width: 481px) and (max-width: 1680px) {
    .about_posts article:nth-child(2n + 1):before {display: none;}
    .about_posts article:nth-child(2n + 1):after {width: 100%;}
    .about_posts article:nth-last-child(1),
    .posts article:nth-last-child(2) {margin-bottom: 1em;}
        .about_posts article:nth-last-child(1):before,
        .posts article:nth-last-child(2):before {height: 100%;}
        .about_posts article:nth-last-child(1):after,
        .posts article:nth-last-child(2):after {display: none;}
}

@media screen and (max-width: 1100px) {
    .about_posts {margin: 0 0 2em -1.5em; width: calc(100% + 1.5em);}
        .about_posts article {margin: 1em 0 1em 2.5em; width: calc(33.3% - 3.5em);}
            .about_posts article:before {height: calc(100% + 3.5em); left: -2.25em;}
            .about_posts article:after {bottom: -2.25em; width: calc(100% + 4.5em);}
            .about_posts article:nth-last-child(3) {margin-bottom: 1em;}
}

@media screen and (max-width: 800px) {
    .about_posts {margin: 1em 0; width: 100%;}
        .about_posts article {margin: 0 0 1em 1em; width:  calc(20% - 1em);}
            .about_posts article:before {display: none;}
            .about_posts article:after {width: 100%;}
            .about_posts article:last-child {margin-bottom: 0;}
                .about_posts article:last-child:after {display: none;}
}

.about1 {background: #e4edc9; color: #82a70e; text-align: center; padding: 1.8em 0; }
.about2 {background: #f5e3c5; color: #f39800; text-align: center; padding: 1.8em 0; }
.about3 {background: #c5dee5; color: #007fa0; text-align: center; padding: 1.8em 0; }
.about4 {background: #f7eeca; color: #c2a00c; text-align: center; padding: 1.8em 0; }
.about5 {background: #efd6d8; color: #d45561; text-align: center; padding: 1.8em 0; }

/*************** team ***************/
.photo_team {position: relative; /*width: 35%; float: right;*/ margin-bottom: 15px; height: 200px; overflow: hidden; background-size: cover !important;}
.photo_team img {width: 100%;}

/*************** team#b ***************/
.arealine1, .arealine2 {border-right: 1px solid #c5dee5;}

/*************** contactus ***************/
#contactus .txt_contact {text-align: center; margin: 50px 0 10px;}
#contactus .map {border: 5px solid #c5dee5; width: 98%;}
#contactus .photo {position: relative; width: 50%; margin: 0 25%;}
#contactus .photo img {width: 100%;}

/*************** box *****************/
.box_sms {border: 0px solid #188ba8; background: #61bed6; color: #fff; margin-bottom: 1em;}
.box_team {border: 1px solid #007fa0; width: 32%; height: 510px; padding: 1em; margin: 0 0.6% 20px; float: left;}
.box_teamb {width: 24.8%; padding: 10px 20px; /*margin: 20px 0;*/ float: left;}
.box_list {border: 1px solid #007fa0; width: 32%; height: 460px; padding: 1em; margin: 0 0.6% 20px; float: left;}
.box_case {background-color: transparent; color: #666; border: 1px solid #007fa0; width: 100%; /*padding: 0.25em 0 20px 0;*/}
.box_contact {border-right: 1px solid #c5dee5; width: 31%; padding: 20px; margin: 0 10px 20px; float: left;}
.box_noborder {border: 0 !important;}

/******************************************************************************************************************************/
/********** 側邊欄選擇器 **********/
.menu_open {
    background: /*#5aabc0*/ url(../images/bg_open.png) center right no-repeat; background-size: 100%; width: 25px; height: 45px;
    cursor: pointer; z-index: 1; right: -25px; float: right; position: absolute;}
.sidenav {
    background: #007fa0; width: 200px; /*原始寬度*/ padding-top: 0; margin-left: 0; transition: 0.3s; /*側欄延遲0.3s顯示*/ z-index: 2;}
/*側邊欄標籤選擇器*/
.sidenav a { /* icon_down.jpg */
    /*background: #007fa0;*/ border-bottom: 1px solid #fff; padding: 5px 10px 5px 20px;
    text-decoration: none; font-size: 24px; color: #FFFFFF;
    display: block; transition: 0s; /*標籤延遲0.2s顯示*/}
/*側欄標籤和關閉按鈕光標的效果*/
.sidenav a:hover, .offcanvas a:focus {
    background: #6bb3c5 url("../images/bg_submenu.jpg") right center no-repeat;}
/*側欄和關閉按鈕的位置選擇器*/
.sidenav .closebtn {
    /*background: #5aabc0 !important;*/ color: #fff; font-size: 36px; width: 25px; height: 45px; padding: 0;
    border: 0; position: absolute; /*top: 45px;*/ right:  -25px; z-index: 3;}

/********** 下拉二階選單 **********/
.cart a {background: #007fa0; display: block; text-decoration: none;} /* icon_down.jpg */
.cart > li > a {background: url("../images/icon_down.jpg") 100% center no-repeat;}
.cart > li > a:hover {background: #007fa0 url("../images/bg_menu.jpg") 100% center no-repeat; color:#fff;}
.cart > li > a.active {background: url("../images/icon_up.jpg") 100% center no-repeat;}
.cart ul {display: none; font-size: 18px;}
.cart ul li {background: #007fa0; list-style-type: none;}
.cart ul li a {border: 0; font-size: 20px; padding: 5px 0 5px 20px; text-align: left;}
.cart ul li a:hover {background: #007fa0 url("../images/bg_submenu.jpg") left center no-repeat;}

/********** 浮動式固定選單 **********/
#top-bar {background: #007fa0; /*width: 240px;*/ height: 100%; /*top:120px;*/ position:fixed; z-index: 2;}



/********** 首頁banner們 **********/
.posts {
  display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex;
  -moz-flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
  text-align: center; margin: 0 auto; width: calc(100%);}
      .posts article {
        -moz-flex-grow: 0; -webkit-flex-grow: 0; -ms-flex-grow: 0; flex-grow: 0;
        -moz-flex-shrink: 1; -webkit-flex-shrink: 1; -ms-flex-shrink: 1; flex-shrink: 1;
        margin: 10px; position: relative; width: calc(33.3% - 20px); display: flex;}
            .posts article:before {content: ''; display: block; width: 1px; height: calc(100% + 6em); top: 0; position: absolute;}
            .posts article:after {content: ''; display: block; width: calc(100% + 6em); height: 1px; bottom: -2em; right: 0; position: absolute;}
            .posts article > :last-child {margin-bottom: 0;}
            .posts article .image {display: block; margin: 0;}
            .posts article .image img {display: block; width: 100%;}

@media screen and (min-width: 1681px) {
    .posts article:nth-child(3n + 1):before {display: none;}
    .posts article:nth-child(3n + 1):after {width: 100%; }
    .posts article:nth-last-child(1),
    .posts article:nth-last-child(2),
    .posts article:nth-last-child(3) {margin-bottom: 1em;}
        .posts article:nth-last-child(1):before,
        .posts article:nth-last-child(2):before,
        .posts article:nth-last-child(3):before {height: 100%;}
        .posts article:nth-last-child(1):after,
        .posts article:nth-last-child(2):after,
        .posts article:nth-last-child(3):after {display: none;}
}

@media screen and (max-width: 1350px) {
    .posts article {width: calc(33.3% - 25px);}
        .posts article:nth-last-child(3) {margin-bottom: 0em;}
}


@media screen and (min-width: 1201px) and (max-width: 1680px) {
    .posts article:nth-child(2n + 1):before {display: none;}
    .posts article:nth-child(2n + 1):after {width: 100%;}
    .posts article:nth-last-child(1),
    .posts article:nth-last-child(2) {margin-bottom: 0.5em;}
        .posts article:nth-last-child(1):before,
        .posts article:nth-last-child(2):before {height: 100%;}
        .posts article:nth-last-child(1):after,
        .posts article:nth-last-child(2):after {display: none;}
}

@media screen and (max-width: 1200px) {
    .posts article {width: calc(50% - 25px);}
        .posts article:nth-last-child(3) {margin-bottom: 1em;}
}

@media screen and (max-width: 800px) {
    .posts {margin: 1em auto; width: 100%;}
        .posts article {margin: 0 0 1em 1em; width:  calc(100% - 25px);}
            .posts article:before {display: none;}
            .posts article:after {width: 100%;}
            .posts article:last-child {margin-bottom: 1em;}
                .posts article:last-child:after {display: none;}
}

@media screen and (max-width: 640px) {
    .posts {margin: 1em auto; width: 100%;}
        .posts article {margin: 0 0 1em 1em; width:  calc(100% - 35px);}
            .posts article:before {display: none;}
            .posts article:after {width: 100%;}
            .posts article:last-child {margin-bottom: 1em;}
                .posts article:last-child:after {display: none;}
}



/*@media screen and (min-width: 481px) and (max-width: 1680px) {
    .posts article:nth-child(2n + 1):before {display: none;}
    .posts article:nth-child(2n + 1):after {width: 100%;}
    .posts article:nth-last-child(1),
    .posts article:nth-last-child(2) {margin-bottom: 1em;}
        .posts article:nth-last-child(1):before,
        .posts article:nth-last-child(2):before {height: 100%;}
        .posts article:nth-last-child(1):after,
        .posts article:nth-last-child(2):after {display: none;}
}
*/

  @media screen and (max-width: 480px) {
    .posts {margin: 1em auto; padding-right: 0; width: 100%;}
        .posts article {margin: 1em 0; width:  calc(100%);}
            .posts article:before {display: none;}
            .posts article:after {width: 100%;}
            .posts article:last-child {margin-bottom: 1em;}
                .posts article:last-child:after {display: none;}
}


/*分頁page*/
div.center {
    text-align: center;
    clear: both;
}
ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}

ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}
/******************************************************************************************************************************/

@media only screen and (max-width: 1800px) {
    #header {padding: 30px 0; background-size: 387px 60px;}
    h4 {font-size: 20px; /*height: 20px; margin: 10px 0 20px;*/ padding: 5px 0;}
    .h_activities {height: 90px;}
    .box_team {height: 515px;}
    .box_list {height: 490px;}
}

@media only screen and (max-width: 1590px) {
    .box_team {height: 510px;}
    .box_list {height: 530px;}
}

@media only screen and (max-width: 1480px) {
    /********** 主體內容 **********/

    h2 {font-size: 26px;}
    h3 {font-size: 24px;}
    .h_activities {height: 90px;}

    /***** 聯絡資訊 *****/
    .contact1 {width: 60%;}
    .contact2 {width: 40%;}
    .contact3 {width: 100%;}

    /*************** contactus ***************/
    #contactus .photo {position: relative; width: 130px; margin: 0 10px 0 0; float: left;}
    #contactus ul {margin-top: 35px;}

    /*************** box *****************/
    .box_contact {border: 0; border-bottom: 1px solid #c5dee5; width: 49%; padding: 20px 0; margin: 0 0 20px; float: left;}
}


@media only screen and (max-width: 1240px) {
     /********** 主體內容 **********/
    .hide-in-1240 {display: block; }

    html, body, div, span, applet, object, iframe, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside,
    canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {font-size: 16px;}
    /*#header {padding: 30px 0;}*/


    input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"], input[type="url"], select, textarea {padding: 10px;}

    /*#search form:before {line-height: 1.7em; top: 0;}*/

    h2 {font-size: 24px; /*line-height: 2em;*/}
    h3 {font-size: 22px; line-height: 0;}
    h4 {/*font-size: 18px;*/ margin: 10px 0 15px;}
    .h_activities {height: 90px;}

    /********** 側邊欄選擇器 **********/
    .sidenav {height: 100%; top: 0;}


    /*************** team ***************/
    .box_team {width: 48%; height: 580px; padding: 1em; margin: 0 1% 20px;}
    .box_list {width: 48%; height: 500px; padding: 1em; margin: 0 1% 20px;}
    .photo_team {text-align: center; width: 100%; padding: 5px; /*float: right;*/}
    .photo_team img {width: 80%;}

    /*************** team#b ***************/
    .box_teamb {width: 47%; padding: 10px; float: left;}
    .arealine2 {border-right: 0;}

    /*************** sms ***************/
    .sms_left, .sms_right {width: 99%;}
    .sms_right {padding-bottom: 30px;}

}


@media only screen and (max-width: 1200px) {
    /*************** box *****************/
    .box_team {height: 565px;}
    .box_list {height: 550px;}
    .box_contact {border: 0; border-bottom: 1px solid #c5dee5; width: 98%; padding: 20px; margin: 0 0 20px; float: left;}
}

@media only screen and (max-width: 900px) {
     /********** 主體內容 **********/
    input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"], input[type="url"], select, textarea {padding: 10px;}

    /*#search form:before {top: 2px;}*/
    h4 {margin: 10px 0;}
    .h_activities {height: 65px;}

    /*#header {background-size: 25%; /*padding: 40px 0;*//*}*/


    .title {margin: 0 0 10px 0;}

    /***** 聯絡資訊 *****/
    .contact1, .contact2 {width: 100%;}
    .contact2 {padding: 0;}


    /*************** team ***************/
    .box_team {width: 95%; height: 560px; padding: 1em; margin: 0 2.5% 20px;}
    .box_list {width: 95%; height: 400px; padding: 1em; margin: 0 2.5% 20px;}
    .photo_team {/*width: 40%;*/ height: 120px;}
    .photo_team img {width: 85%;}

    /*************** team#b ***************/
    .box_teamb {width: 100%; padding: 10px; float: left;}
    .arealine1, .arealine2 {border-bottom: 1px solid #c5dee5; border-right: 0;}

    /*************** miles ***************/
    .miles .left{-webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; padding: 3% 0;}
    .miles_0 {background-size: 51.5% 100%;}
    .miles .space {padding-bottom: 3em;}

    /*************** contactus ***************/
    #contactus .photo {position: relative; width: 100px; margin: 0 0 0 1%; float: left;}
    #contactus ul {margin-top: 0;}

}


@media only screen and (max-width: 640px) {
    /*@media handheld*/
    .hide-in-pc {display:none;}
    .hide-in-phone {display:block;}

    /********** 主體內容 **********/
    html, body, div, span, applet, object, iframe, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside,
    canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {/*font-size: 20px;*/}
    section {margin-top: 30px; padding: 0 1.6em;}

    input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"], input[type="url"], select, textarea {font-size: 18px; padding: 15px;}

    input[type="back"] {top: 12px;}

    .h_case {padding: 0 10px 0 20px !important;}

    /* 搜尋 */
    #search form {
        text-decoration: none; position: relative; }
        /*#search form:before {
            /* 放大鏡 */
            /*font-size: 1.5em; height: 1.8em;
            position: absolute; top: -3px; right: 5%; width: 2em;}*/
        #search form input[type="text"] {width: 90%; padding-right: 2.75em;}

    /*h2 {margin-top: 0; line-height: 1em;}*/
    h4 {margin: 0 0 10px; font-size: 18px;}

    #header {background-size: 322px 50px; padding: 25px 0;}


    /*.title {padding: 0 0 40px;}*/
    .title_w {padding: 0 0 45px;}
    /*.more {/*margin: 0 0 -40px 0;*/ /*padding: 0 15px 3px; bottom: -15px;}*/

    /* 廣告交換 */
    .exlogo {width: 100% !important; margin: 0.5em auto!important;}

    /***** 聯絡資訊 *****/
    #contact {padding: 50px 0 20px 30px;}
    .contact1, .contact2 {width: 100%;}
    .contact2 {padding-top: 0;}

    #footer .copyright {font-size: 14px; line-height: 1.5em; padding: 20px;}


    /*************** team ***************/
    .box_team {width: 95%; padding: 2em 0.5% 1em;}
    .box_list {width: 95%; padding: 2em 0.5% 1em;}
    .photo_team img {width: 80%;}

    /*************** contactus ***************/
    #contactus .photo {position: relative; width: 25%; margin: 0 1%;}
    #contactus ul {margin-top: 25px;}

    /*************** box *****************/
    .box_contact {border: 0; border-bottom: 1px solid #c5dee5; width: 98%; padding: 20px; margin: 0;}
}


@media only screen and (max-width: 480px) {
    /********** 主體內容 **********/
    html, body, div, span, applet, object, iframe, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside,
    canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {font-size: 14px;}
    section {margin-top: 5px; padding-left: 30px;}

    .more {font-size: 12px;}

    input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"], input[type="url"], select, textarea {padding: 15px; margin: 25px auto;}

    /* 目錄 */
    #dire, #dire a {font-size: 14px;}

    #gotop, #gotop:hover {background-size: 65%; background-position: bottom right;}

    /* 搜尋 */
    #search form {
        text-decoration: none; position: relative; }
        /*#search form:before {
            /* 放大鏡 */
            /*top: 2px; right: 0; width: 90px;}*/

    h2 {font-size: 20px; /*line-height: 2.5em;*/}
    h3 {font-size: 18px;}
    h4 {font-size: 16px;}

    hr {margin: 10px 0;}
    /*#header {background-size: 322px 50px;}*/

    .box_img a {width: 100%;}

    /* fb粉專外掛 */
    .fb {}

    /* 廣告交換 */
    .exlogo {width: 100% !important; margin: 0.2em auto!important; float: left;}


    #contact {padding: 50px 0 50px 30px;}

    #footer .copyright {font-size: 12px; line-height: 1.6em; padding: 10px;}

    /********** 側邊欄選擇器 **********/
    .menu_open {right: -25px; float: right; position: absolute;}
    .sidenav {overflow: scroll; top: 0;}
    .sidenav a { padding: 5px 5px 10px 45px; font-size: 22px;}
    .closebtn {left: 0 !important; position: relative !important; z-index: 8 !important;}

    /********** 下拉二階選單 **********/
    .cart {/*margin-top: 90px;*/}
    .cart a {background: #007fa0; display: block; text-decoration: none;} /* icon_down.jpg */
    .cart > li > a {background: url("../images/icon_down.jpg") 95% center no-repeat; background-size: 50%;}
    .cart > li > a:hover {background: #6bb3c5 url("../images/bg_menu.jpg") right center no-repeat; color:#fff;}
    .cart > li > a.active {background: url("../images/icon_up.jpg") 95% center no-repeat; background-size: 50%;}
    .cart ul {display: none; font-size: 18px;}
    .cart ul li {background: #007fa0; list-style-type: none;}
    .cart ul li a {border: 0; font-size: 20px; padding: 5px 0 5px 67px; text-align: left;}
    .cart ul li a:hover {background: #007fa0 url("../images/bg_submenu.jpg") left center no-repeat;}


    /*************** team ***************/
    .photo_team {width: 100%; height: 100px; margin-bottom: 0;}
    .photo_team img {width: 60%;}

    /*************** team#b ***************/
    .box_team {height: 425px;}
    .box_teamb {margin: 5px 0; padding: 5px 0;}
    .box_list {height: 350px;}

    /*************** contactus ***************/
    #contactus .photo {position: relative; width: 40%; margin: 0 30%;}
    #contactus ul {margin-top: 25px;}

    /*************** box *****************/
    .box_contact {border: 0; border-bottom: 1px solid #c5dee5; width: 98%; padding: 20px; margin: 0;}
}