@charset "utf-8"; @import url("reset.css"); @import url(https://fonts.googleapis.com/css?family=Roboto); /* CSS Document */ a { color: #003A70; -webkit-tap-highlight-color: rgba(0,0,0,0); outline: none; } a:hover { color: #EC681E; } /*-------font effect-----------*/ .clear { clear: both; height: 0px; line-height: 0px; } .bold { font-weight: bold; } .red { color: #F00; } .orange { color: #EC681E; } .blue { color: #003A70 } .align_r { text-align: right; } .align_c { text-align: center; } .italic { font-style: italic; opacity: 0.7; font-weight: normal; } .nowrap { width: auto; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .lightLine { height: 1px; line-height: 1px; border-bottom: 1px solid #e0e0e0; margin: 20px auto; } .divider { height: 10px; line-height: 10px; } ol.number { list-style: decimal; margin-left: 20px; display: inline-block; } ol.dot { list-style: disc; margin-left: 20px; display: inline-block; font-size: 13px; } ol.number li { padding-bottom: 5px; } ol.number li:last-child, ol.dot li:last-child { padding-bottom: 0; } .smallFont { font-size: 13px; } /*-------a:visited-------*/ ul.listNews li a:visited, .rightnewsList li a:visited { color: #999; } /*-------img effect-----------*/ .addShadow { border: 1px solid #f5f5f5; box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 1px 5px 0px rgba(0,0,0,0.12); } .squareThumb { width: 100%; height: 0; padding-bottom: 100%; } .rectThumb { width: 100%; height: 0; padding-bottom: 66%; } /*-------btn effect-----------*/ .btn { -webkit-appearance: none; /*取消手機預設樣式*/ } .btnStyle { text-decoration: none; cursor: pointer; display: inline-block; border: 0; border-radius: 30px; color: #fff; background: #EC681E; } .btnStyle:hover { color: #FFF; background: #003A70; } /*------------------form effect-------------------*/ input, textarea, body select { font-family: "微軟正黑體", "Roboto", sans-serif; font-size: 15px; padding: 0; color: #333; /*避免select長度不一*/ box-sizing: border-box; display: inline-block; outline: none; } input:focus { outline: none; } ::-webkit-input-placeholder { /* WebKit browsers */ color: #999; } :-ms-input-placeholder { /* WebKit browsers */ color: #999; } .textStyle { border: 1px solid #ddd; border-radius: 5px; width: inherit; } .textStyle:focus { border: 1px solid #A6C1CE; background: #F6FBFE; } .formTitle { margin-bottom: 5px; font-weight: bold; } .largeItem { width: 1.2em; height: 1.2em; vertical-align: text-bottom; } .refresh { display: inline-block; width: 25px; height: 25px; text-indent: -9999px; background-image: url(../images/refresh.svg); background-repeat: no-repeat; background-size: 100% 100%; } .refreshO { background-image: url(../images/refreshOrange.svg); } /*-------------table Display--------------------*/ .tableDisplay { border-collapse: collapse; } .tableDisplay th { padding: 6px 10px; word-break: break-all; background: #EC681E; color: #fff; } .tableDisplay td { word-break: break-all; border-bottom: 1px solid #E0E0E0; padding: 6px 10px; } .tableDisplay tr:nth-child(even) td { background: #f9f9f9; } /*------------page--------------*/ #page { color: #666; overflow: auto; margin-top: 20px; text-align: center; } #page span { display: inline-block; margin: 0 6px 6px 0; } #page span a { color: #333; display: block; text-decoration: none; padding: 3px 10px; border: solid 1px #e0e0e0; background: #f5f5f5; border-radius: 3px; } #page span a:hover { background: #FFF; box-shadow: 0 0px 5px 0 rgba(0, 0, 0, 0.2); } #page span.current a, #page span.current a:hover { background: none; color: #666; border: none; box-shadow: none; } /*---------------------- toTop ------------------------*/ #toTop { position: fixed; right: 30px; bottom: 50px; width: 40px; height: 40px; background: url(../images/icon_top.svg) no-repeat rgba(0,0,0,0.3) center center; cursor: pointer; display: none; z-index: 123; text-indent: -9999px; -webkit-border-radius: 20px; border-radius: 20px; } #toTop:hover { background: url(../images/icon_top.svg) no-repeat #F26529 center center; } /*-----------------------innerTitle-----------------------*/ #innerTitle.BG1 { background-image: url(../images/inner/1.jpg); } #innerTitle.BG2 { background-image: url(../images/inner/2.jpg); } #innerTitle.BG3 { background-image: url(../images/inner/3.jpg); } /*-----------------------footer-----------------------*/ footer a, footer a:hover { color: #fff; } footer ul li { background-image: url(../images/map.svg); background-position: left center; background-repeat: no-repeat; background-size: 16px 16px; padding-left: 22px; } footer ul li:nth-child(2) { background-image: url(../images/tel.svg); } footer ul li:nth-child(3) { background-image: url(../images/mail.svg); } footer p a { background-image: url(../images/fb.svg); background-repeat: no-repeat; background-size: 16px 16px; background-position: left 10px center; } footer p a:nth-child(2) { background-image: url(../images/wechat.svg); } /*-----------------------for PC-----------------------*/ @media screen and (min-width:801px) { /*-----------------------body-----------------------*/ html, body { margin: 0; padding: 0; color: #333; font-size: 15px; line-height: 160%; font-family: "微軟正黑體", "Roboto", sans-serif; overflow-x: hidden; } .NoShowInPC { display: none; } p { line-height: 160%; } h1, h2, h3, h4 { line-height: 120%; } .btn { padding: 6px 25px; line-height: 160%; font-size: 19px; } .btnSmall { padding: 8px 15px; line-height: 100%; font-size: 15px; } .textStyle { padding: 10px; } .largeFont { font-size: 17px; } .googleMap { width: 100%; height: 500px; } /*-----------------header---------------*/ #headerWrapper { position: fixed; left: 0; top: 0; width: 100%; height: 80px; z-index: 9999; background: #fff; } header { position: relative; margin: 0 auto; height: 80px; min-width: 1024px; max-width: 1440px; z-index: 10; width: 80%; } header h1 a { width: 250px; height: 50px; text-indent: -9999px; position: absolute; left: 0; background-image: url(../images/logo.png); background-repeat: no-repeat; background-size: cover; top: 15px; } /*----------------language------------------*/ #language { position: absolute; right: 0; top: 20px; } #language li { float: left; margin-left: 20px; } #language li a { color: #666; display: block; text-decoration: none; } #language li a span { display: inline-block; height: 40px; width: 40px; line-height: 40px; text-align: center; background: #d5d5d5; border-radius: 40px; } #language li a:hover { color: #EC681E; } #language li a:hover span { color: #fff; background: #EC681E; } /*------------------menu------------------------*/ #menuWrapper { width: 100%; height: 50px; background: #EC681E; min-width: 1024px; z-index: 9998; box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2); position: fixed; left: 0; top: 80px; } h4.openMenu { display: none; } #menu { width: 80%; margin: 0 auto; min-width: 1024px; max-width: 1440px; height: 50px; } #menu li { float: left; width: 14.28%; position: relative; } #menu li a { display: block; text-align: center; line-height: 50px; font-size: 17px; text-decoration: none; color: #FFF; cursor: pointer; text-align: center; } #menu li.selected { background: #333F48; } #menu li a:hover { background: #333F48; } #menu li ul { position: absolute; display: none; width: 100%; } #menu li ul li { border: 0; position: relative; z-index: 995; float: none; width: 100%; } #menu li ul li a { display: block; background: #46545B; line-height: 40px; color: #fff; font-weight: normal; font-size: 15px; border-bottom: 1px solid #333F48; } #menu li ul li:last-child a { border-bottom: 0; } #menu li ul li a:hover { background: #333F48; } #menu li ul li.selected a { background: #333F48; } /*-------------content--------------------*/ article { width: 80%; margin: 0 auto; min-width: 1024px; max-width: 1440px; /*min-height: 600px;*/ padding: 30px 0; } #left { float: left; width: 280px; } #right { width: auto; margin-left: 320px; } /*-----------------h1----------------*/ h1.indexTitle { color: #fff; font-size: 25px; height: 50px; } h1.indexTitle em { border-bottom: 1px solid #fff; text-transform: uppercase; font-style: italic; line-height: 100%; padding-bottom: 10px; display: inline-block; vertical-align: top; } h1.indexTitle span { line-height: 75px; display: inline-block; font-style: italic; vertical-align: text-bottom; } h1.orange { color: #EC681E; } h1.orange em { border-color: #EC681E; } h2 { font-size: 25px; font-weight: normal; } h3 { font-size: 17px; font-weight: normal; } /*---------left----------*/ #left h4 { display: none; } #left ul { border-left: 1px solid #EC681E; border-right: 1px solid #EC681E; padding: 0 20px; background-image: url(../images/airplain.svg); background-repeat: no-repeat; background-size: 50px 50px; background-position: right 15px top; } #left ul li a { display: block; padding: 10px 0; font-size: 17px; color: #666; text-decoration: none } #left ul li:last-child a { margin-bottom: 0; } #left ul li.selected a, #left ul li a:hover { color: #EC681E; } #sidebar.sticky { float: none; position: fixed; top: 0; z-index: 6; left: auto; width: 280px; } /*---------------innerTitle-----------------*/ #innerTitle { width: auto; padding: 70px 10% 70px 10%; background-position: center bottom; background-size: cover; background-repeat: no-repeat; margin-top: 130px; } /*------------------ newsList ----------------------*/ #newsList li { border-bottom: 1px solid #e0e0e0; padding: 15px; overflow: auto; } #newsList li:last-child { margin: 0; } #newsList li div.newsListLeft { width: 20%; float: left; position: relative; } #newsList li div.newsListRight { float: right; width: 78%; } #newsList li h4 { margin-bottom: 10px; } #newsList li a { color: #333; display: block; } #newsList li:hover { background: #f5f5f5; } /*-------------download--------------------*/ #download li { width: 32%; margin: 0 2% 2% 0; padding: 20px; text-align: center; float: left; border: 1px solid #f1f1f1; box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 1px 5px 0px rgba(0,0,0,0.12); } #download li p { min-height: 50px; margin-bottom: 10px; } #download li:nth-child(3n) { margin-right: 0; } #download .btn { width: 100%; background: #ffa300; } /*----gallery-----*/ .gallery li { float: left; width: 32%; margin: 0 2% 2% 0; position: relative; } .gallery li:nth-child(3n) { margin-right: 0; } .gallery li a p { width: 100%; position: absolute; left: 0; bottom: 0; padding: 10px; background: rgba(0,0,0,0.5); color: #FFF; } .gallery li a p span { display: block; color: #FFF; } .gallery li div.hoverDesc { color: rgba(255,255,255,0); background-color: rgba(0, 0, 0,0); background-image: url(../images/zoom-in.svg); background-repeat: no-repeat; background-size: 40% auto; background-position: center center; opacity: 0; position: absolute; left: 0; top: 0; overflow: hidden; transition: all 0.3s ease-out; width: 100%; height: 0; padding-bottom: 66%; } .gallery li:hover div.hoverDesc { color: rgba(255,255,255,1); background-color: rgba(0, 0, 0, 0.5); opacity: 1; } /*-----------------gallery detail--------------------*/ .galleryInner li { width: 18.4%; } .galleryInner li:nth-child(3n) { margin-right: 2%; } .galleryInner li:nth-child(5n) { margin-right: 0; } /*-----------------contact--------------------*/ #conLeft { float: left; width: 49%; } #conRight { float: right; width: 48%; } #conLeft ul { vertical-align: text-top; } #conLeft ul li { width: 49%; float: left; margin-bottom: 20px; } #conLeft ul li:nth-child(3), #conLeft ul li:nth-child(4) { margin-bottom: 0; } /*-------------table form--------------------*/ .maxText { width: 100%; } .largeText { width: 80%; } .midText { width: 50%; } .smallText { width: 120px; } .validcode { margin: 0 5px; } /*-------------footer--------------------*/ footer { background: #EC681E; color: #fff; font-size: 13px; } #footer { margin: 0 auto; padding: 40px 0; position: relative; width: 80%; } #footer p { position: absolute; right: 0; top: 30px; } #footer img { /*width: 450px;*/ } #footer p a { display: block; width: 120px; line-height: 25px; text-align: center; text-decoration: none; border: 1px solid #fff; border-radius: 50px; margin-bottom: 10px; } #footer ul { position: absolute; right: 150px; top: 25px; } #copyright { background: #003A70; line-height: 40px; text-align: center; font-style: italic; } /*-----------tab btn-----------*/ #track a, #money a { width: 48px; height: 168px; position: fixed; right: 0; background-repeat: no-repeat; background-position: top left; background-size: cover; z-index: 15; } #track a { top: 200px; background-image: url(../images/btnTrack.png); } #money a { top: 350px; background-image: url(../images/btnMoney.png); } #track a:hover, #money a:hover { width: 60px; } } /*------------------for mobile------------------------*/ @media screen and (max-width:800px) { /*-----------------------body-----------------------*/ html { width: 100%; min-height: 100%; margin: 0; padding: 0; -moz-text-size-adjust: none; -ms-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; font-family: "微軟正黑體", "Roboto", sans-serif; } body { color: #333; line-height: 150%; font-size: 15px; font-family: "微軟正黑體", "Roboto", sans-serif; width: 100%; min-height: 100%; } p { line-height: 150%; } h1, h2, h3, h4 { line-height: 120%; } .btn { font-size: 17px; padding: 8px 15px; -webkit-appearance: none; /*取消手機預設樣式*/ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .textStyle { padding: 8px; } .alignCenterMobile { text-align: center } input, textarea, select { font-size: 15px; line-height: 150%; } .btnSmall { padding: 8px 15px; line-height: 100%; font-size: 16px; } .picForMobile { width: 100%; height: auto; } .NoShowInMobile { display: none; } .googleMap { width: 100%; height: 400px; } /*-------------table Display--------------------*/ .tableDisplay td { font-size: 14px; padding: 5px; } /*------------------menu------------------------*/ h4.openMenu { display: block; position: fixed; width: 70px; height: 70px; top: 0; right: 0; background-image: url(../images/bars.svg); background-size: auto 50%; background-repeat: no-repeat; background-position: center center; text-indent: -9999px; z-index: 200; } h4.changColor { background-color: #eee; background-image: url(../images/close.svg); } #menu { width: 100%; background: #eee; position: fixed; top: 70px; right: 0; display: none; box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 1px 5px 0px rgba(0,0,0,0.12); z-index: 9999; height: 100%; overflow: auto; padding-bottom: 100px; /**重要!!*/ } #menu li { border-bottom: 1px solid #ddd; } #menu li:last-child { border-bottom: none; } #menu li a { color: #333; display: block; text-decoration: none; padding: 10px 0 10px 20px; } #menu li ul { display: none; } #menu li ul li { border-bottom: 0; border-top: 1px solid #ccc; } #menu li ul li a { background: #ddd; padding-left: 40px; } #menu li ul li a:hover { background: #EC681E; color: #fff; } #menu li.selected { background: #ccc; } /*-----------------header---------------*/ header { box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 1px 5px 0px rgba(0,0,0,0.12); position: fixed; left: 0; top: 0; width: 100%; background: #fff; z-index: 99; height: 70px; } header h1 a { width: 200px; height: 40px; text-indent: -9999px; background-image: url(../images/logo.png); background-repeat: no-repeat; background-size: cover; display: block; margin: 15px 0 0 15px; } /*----------------language------------------*/ #language { position: absolute; right: 80px; top: 20px; } #language li { float: left; margin-left: 5px; } #language li a { display: block; height: 30px; width: 30px; line-height: 30px; text-align: center; background: #d5d5d5; border-radius: 30px; color: #333; text-decoration: none; font-size: 14px; } #language li a:hover { color: #fff; background: #EC681E; } #language li em { display: none; } /*-------------content--------------------*/ article { padding: 20px 15px; } /*---------------innerTitle-----------------*/ #innerTitle { width: auto; padding: 40px 15px; background-position: left -100px bottom; background-size: cover; background-repeat: no-repeat; margin-top: 60px; } /*-----------------h1----------------*/ h1.indexTitle { color: #fff; font-size: 22px; height: 40px; } h1.indexTitle em { border-bottom: 1px solid #fff; text-transform: uppercase; font-style: italic; line-height: 100%; padding-bottom: 8px; display: inline-block; vertical-align: top; font-size: 18px; } h1.indexTitle span { line-height: 60px; display: inline-block; font-style: italic; vertical-align: text-bottom; } h1.orange { color: #EC681E; } h1.orange em { border-color: #EC681E } article h2 { font-size: 21px; font-weight: normal; } h3 { font-size: 17px; font-weight: normal; } /*-------------left menu--------------------*/ #left h4 { position: fixed; right: 15px; top: 195px; text-indent: -9999px; display: block; width: 35px; height: 35px; background-color: rgba(99,99,99,0.1); background-image: url(../images/more.svg); background-size: auto 70%; background-repeat: no-repeat; background-position: center center; border-radius: 50px; z-index: 1999; } #left h4.gray { background-color: #ddd; } #left ul { display: none; position: fixed; right: 15px; top: 235px; border: 1px solid #e0e0e0; box-shadow: 0 0px 5px 0 rgba(0, 0, 0, 0.2); background: #fff; z-index: 993; } #left ul li a { display: block; color: #333; text-decoration: none; background-position: left 10px center; background-repeat: no-repeat; background-size: 20px 20px; border-bottom: 1px solid #e0e0e0; padding: 8px 15px; } #left ul li:last-child a { border: none; } #left ul li.selected a { background: #f1f1f1; } #left ul li a:hover { background: #EC681E; color: #fff; } /*-------------download--------------------*/ #download li { margin-bottom: 15px; padding: 15px; text-align: center; border: 1px solid #f1f1f1; box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 1px 5px 0px rgba(0,0,0,0.12); } #download li p { min-height: 35px; margin-bottom: 10px; } #download .btn { width: 100%; background: #ffa300; } /*----gallery-----*/ .gallery li { float: left; width: 49%; margin: 0 2% 2% 0; } .gallery li:nth-child(2n) { margin-right: 0; } .gallery li a { display: block; position: relative; } .gallery li a p { width: 100%; font-size: 13px; line-height: 120%; padding: 7px 10px; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,0.6); color: #FFF; } /*-----------------contact--------------------*/ #conLeft ul li { margin-bottom: 20px; } #conLeft ul li:nth-child(4) { margin-bottom: 0; } /*-------------table form--------------------*/ .contentBox, .maxText, .largeText, .midText, .btnMax { width: 100%; } .smallText { width: 100px; } .tinyText { width: 70px; } .validcode { margin: 0 4px; } /*-------------footer--------------------*/ footer { background: #EC681E; color: #fff; font-size: 13px; } #footer { padding: 20px 10px; } #footer img { height: 30px; } #Content img { width: 100%; } #footer ul { margin: 20px 0; opacity: 0.9; } footer p a { display: inline-block; width: 120px; line-height: 25px; text-align: center; text-decoration: none; border: 1px solid #fff; border-radius: 50px; margin-bottom: 10px; opacity: 0.9; margin-right: 10px; } footer p a:hover { opacity: 1; } #copyright { background: #00397B; line-height: 40px; text-align: center; opacity: 0.8; font-style: italic; } /*------------------toTop------------------------*/ #toTop { right: 10px; bottom: 60px; } }