/* normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } a { background-color: transparent; } a:active, a:hover { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } h1 { font-size: 2em; margin: 0.67em 0; } mark { background: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 1em 40px; } hr { box-sizing: content-box; height: 0; } pre { overflow: auto; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } button { overflow: visible; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"] { -webkit-appearance: textfield; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; } textarea { overflow: auto; } optgroup { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; } /* tiya-reset */ table { border-collapse: collapse; border-spacing: 0; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html, body { font-family: "khula", "Arial", "微軟正黑體", "sans-serif"; font-size: 14px; width: 100%; height: 100vh; height: 100%; line-height: 20px; margin: 0; position: relative; } a { display: inline-block; text-decoration: none; cursor: pointer; } label { cursor: pointer; } img { max-width: 100%; } input { outline: none; } textarea { outline: none; resize: none; } .slide-main-link, .slide-main-pic { width: 100%; } figure { margin: 0; } .inline-block { display: inline-block; } .hide { display: none; } .col-33 { width: 33.33%; } .col-50 { width: 50%; } .col-66 { width: 66.66%; } a { color: #000; } #topTitle { border-bottom: 1px solid primary_light; line-height: 30px; } #breadcrumb { position: relative; } #breadcrumb .title { display: inline-block; margin: 0; } #breadcrumb .home::after { margin: 0 5px 0 10px; content: '>'; display: inline-block; } #breadcrumb a { color: #000; line-height: 30px; font-size: 13px; } .wrapper { max-width: 1380px; margin: 0 auto; } .web-editor h1 { width: 100% !important; line-height: 30px !important; } .web-editor table { width: 100% !important; margin: 0 auto; } .web-editor img { height: inherit !important; } .web-editor td { font-size: 13px !important; line-height: 22px !important; } .web-editor iframe { width: 100%; } .web-editor * { word-wrap: break-word; word-break: break-all; word-spacing: initial; } .web-editor .item a { width: 100%; } #header-fixed { position: fixed; width: 100%; top: 0; left: 0; z-index: 100; background-color: #fff; transition: top 0.2s linear; -moz-box-shadow: 0 0 10px -2px rgba(0,0,0,0.6); -webkit-box-shadow: 0 0 10px -2px rgba(0,0,0,0.6); box-shadow: 0 0 10px -2px rgba(0,0,0,0.6); } #header_height { height: 120px; transition: height 0.2s linear; } header { height: 80px; } @media screen and (max-width: 1024px) { #header_height, header { height: 55px; } } @media screen and (max-width: 480px) { #header_height, header { height: 45px; } } .header-logo { margin: 0; position: absolute; z-index: 100; top: 0; -webkit-transition: top 0.2s linear; -moz-transition: top 0.2s linear; -o-transition: top 0.2s linear; transition: top 0.2s linear; } .header-logo .logo { width: 300px; } @media screen and (max-width: 1024px) { .header-logo .logo { width: 200px; } .header-logo .hide-1024 { width: 252px; } } @media screen and (max-width: 480px) { .header-logo .logo { width: 150px; } .header-logo .hide-1024 { display: none; } } .header-wrapper { position: relative; max-width: 1380px; margin: 0 auto; } .header-rightbox { display: inline-block; display: box; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; padding: 24px 10px; -webkit-justify-content: flex-end; -moz-justify-content: flex-end; -ms-justify-content: flex-end; -ms-flex-pack: flex-end; -o-justify-content: flex-end; justify-content: flex-end; } @media screen and (max-width: 1024px) { .header-rightbox { padding: 0; height: 55px; } } @media screen and (max-width: 480px) { .header-rightbox { height: 45px; } } #member { padding: 0 15px; font-size: 12px; line-height: 20px; color: #505050; height: 20px; margin-top: 5px; } #member .fa { font-size: 20px; vertical-align: middle; } @media screen and (max-width: 1024px) { #member { margin: 0; line-height: 55px; height: 55px; border-left: 1px solid #eee; padding: 0 10px; } .member-title { display: none; } } @media screen and (max-width: 480px) { #member { line-height: 40px; height: 40px; } } .language { padding: 0 15px; font-size: 12px; line-height: 20px; color: #505050; border-left: 1px solid #eee; height: 20px; margin-top: 5px; } @media screen and (max-width: 1024px) { .language { margin: 0; line-height: 55px; height: 55px; border-right: 1px solid #eee; padding: 0 10px; } } @media screen and (max-width: 480px) { .language { line-height: 40px; height: 40px; } } .donatebox { position: absolute; right: 10px; top: 83px; z-index: 100; border: 1px solid #0f6ca5; } .donate-button { background-color: #fff; color: #0f6ca5; width: 80px; text-align: center; line-height: 30px; font-weight: bold; border-radius: 3px; } @media screen and (max-width: 1024px) { .donatebox { display: none; } } #Top_Search { width: 200px; position: relative; } #Top_Search .fa-search, #Top_Search .open-search { font-size: 16px; top: 6px; position: absolute; right: 10px; color: #505050; } .open-search { display: none; } @media screen and (max-width: 1024px) { #Top_Search { width: 50px; border-left: 1px solid #eee; text-align: center; line-height: 55px; height: 55px; } #Top_Search .fa-search { top: 23px; right: 20px; } #Top_Search .open-search { display: inline-block; position: relative; top: 0; right: 0; } .search-wrapper { top: 56px; position: absolute; z-index: 100; background-color: #fff; right: 0; padding: 0 10px; border: 0px solid #eee; border-radius: 3px; width: 300px; line-height: 60px; height: 0; overflow: hidden; -webkit-transition: height 0.2s linear; -moz-transition: height 0.2s linear; -o-transition: height 0.2s linear; transition: height 0.2s linear; } #search-control:checked + .open-search::before { content: "\f00d"; } #search-control:checked ~ .search-wrapper { height: 60px; border: 1px solid #eee; } } @media screen and (max-width: 480px) { #Top_Search { line-height: 40px; height: 40px; position: initial; } .search-wrapper { width: 100%; border-radius: 0; top: 80px; } } #keywords { font-size: 12px; padding: 6px 10px; width: 100%; border-radius: 15px; border: 1px solid #aaa; } nav { background-color: #fff; color: #000; } .header-logo-m { display: none; } #header-nav { padding-left: 55px; max-width: 1380px; margin: 0 auto; display: inline-block; display: box; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; -ms-flex-pack: flex-start; -o-justify-content: flex-start; justify-content: flex-start; display: flex; text-align: center; font-size: 18px; line-height: 40px; } .nav-title { color: #000; } h3.nav-title { display: none; } .nav-subitembox { position: absolute; top: 40px; left: 0; z-index: 100; background-color: #0f6ca5; width: 200px; text-align: left; } .nav-subitem { color: #fff; padding: 0 20px; overflow: hidden; height: 0; display: block; -webkit-transition: height 0.2s linear; -moz-transition: height 0.2s linear; -o-transition: height 0.2s linear; transition: height 0.2s linear; } .nav-item { list-style-type: none; position: relative; padding: 0 20px; } .nav-item:first-child { width: 0px; padding: 0; overflow: hidden; } .nav-item:hover { background-color: #0f6ca5; } .nav-item:hover .nav-subitem { height: 40px; font-size: 16px; } .nav-item:hover .nav-title { color: #fff; } .nav-item.now { background-color: #0f6ca5; } .nav-item.now .nav-title { color: #fff; } @media screen and (max-width: 1024px) { #navbg, #navbox { position: fixed; height: 100%; top: 0; } #navbg { z-index: 100; display: none; left: 0; width: 100%; cursor: pointer; background-color: rgba(0,0,0,0.6); } #navbox { right: -85%; overflow: auto; width: 85%; z-index: 200; background-color: #fff; -webkit-transition: right 0.35s ease; -moz-transition: right 0.35s ease; -o-transition: right 0.35s ease; transition: right 0.35s ease; } .header-logo-m { display: block; padding: 10px; text-align: center; } #header-nav { display: block; background-color: #fff; padding: 0; } .nav-item { border-bottom: 1px solid #eee; padding: 0; } .nav-item:hover .nav-subitem { height: 0px; } .nav-item .fa-angle-down { float: right; right: 10px; position: relative; line-height: 40px; } .nav-title { display: none; } .nav-title-m, h3.nav-title-m { display: block; color: #000; margin: 0; font-weight: normal; cursor: pointer; font-size: 18px; } .nav-subitembox { position: relative; width: 100%; top: 0; text-align: center; background-color: #eee; } .nav-subitem { height: 0px; color: #666; font-size: 16px; } .open-nav#navbox { right: 0; } .overflow-hidden #navbg { display: block; } .overflow-hidden #navbox { right: 0; } .open .nav-subitem { height: 40px; } .open:hover .nav-subitem { height: 40px; } #header-nav .nav-item:first-child { display: none; } } @media screen and (max-width: 1024px) { #header-fixed .close { position: absolute; top: 0; right: 85%; width: 45px; height: 100%; padding: 0; margin: 0; } #header-fixed .close::before { top: 20px; left: 10px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); background-color: #fff; } #header-fixed .close span { top: 0; left: 0; width: 45px; height: 45px; background-color: #000; } #header-fixed .close::after { top: 20px; left: 10px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); background-color: #fff; } .menu-b { position: relative; z-index: 200; display: inline-block; width: 40px; right: 0; height: 35px; margin: 10px 5px; cursor: pointer; -webkit-transition: right 0.35s ease 0.1s, top 0.25s ease; -moz-transition: right 0.35s ease 0.1s, top 0.25s ease; -o-transition: right 0.35s ease 0.1s, top 0.25s ease; transition: right 0.35s ease 0.1s, top 0.25s ease; } .menu-b span, .menu-b::after, .menu-b::before { position: absolute; left: 5px; display: block; width: 28px; height: 3px; content: ''; -webkit-transition: none 0.35s ease; -moz-transition: none 0.35s ease; -o-transition: none 0.35s ease; transition: none 0.35s ease; x-transition-property: background-color, top, left, transform, height, width; background-color: #808080; } .menu-b::before { z-index: 2; top: 5px; } .menu-b span { z-index: 1; top: 15px; } .menu-b::after { z-index: 2; top: 25px; } } @media screen and (max-width: 480px) { .menu-b { margin: 4px 5px; } } #m_nav { display: none; opacity: 0; text-align: center; -webkit-transition: padding 0.35s linear; -moz-transition: padding 0.35s linear; -o-transition: padding 0.35s linear; transition: padding 0.35s linear; } #m_nav::after { content: ''; display: block; clear: both; } #m_nav .nav-item { float: left; width: 33.33%; } #m_nav .item-title { line-height: 40px; position: relative; width: 100%; font-size: 15px; -webkit-transition: padding 0.35s ease; -moz-transition: padding 0.35s ease; -o-transition: padding 0.35s ease; transition: padding 0.35s ease; text-align: center; } @media screen and (max-width: 1024px) { #m_nav { opacity: 1; display: block; overflow: hidden; background-color: #0f6ca5; } #m_nav .nav-item { height: 43px; } #m_nav .nav-item a { font-size: 14px; color: #fff; line-height: 20px; margin: 10px 0; } #m_nav .nav-item:nth-child(2) a { border-right: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; } #m_nav .nav-item:last-child { border-right: 0; } } .is-sticky #header-fixed { top: -80px; } .is-sticky #header_height { height: 40px; } .is-sticky #header-nav { padding: 0; } .is-sticky .nav-item:first-child { width: 60px; } .is-sticky .header-logo { top: -35px; } @media screen and (max-width: 1024px) { .is-sticky #header-fixed, .is-sticky .header-logo { top: 0px; } } footer { border-top: 4px solid #1e1e1e; background-color: #1e1e1e; } .footer-wrapper { background-color: #1e1e1e; color: #fff; padding: 20px 10px; width: 100%; max-width: 1380px; margin: 0 auto; display: inline-block; display: box; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -ms-flex-pack: space-between; -o-justify-content: space-between; justify-content: space-between; } .footer-block { padding: 0 1%; width: 50%; } .footer-block:first-child { flex: 0 0 58.3%; max-width: 58.3%; width: 58.3%; } .footer-block:nth-child(2) { flex: 0 0 41.7%; max-width: 41.7%; width: 41.7%; } .footer-menu { margin-bottom: 15px; width: 100%; } .footer-menu-item { color: #fff; font-size: 16px; line-height: 35px; padding-right: 30px; } .footer-title { margin: 0; font-size: 18px; font-weight: normal; line-height: 35px; } .footer-info { margin: 0; line-height: 30px; font-size: 13px; } .footer-emailText { width: 100%; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; padding: 7px; border: 0; font-size: 12px; margin: 10px 0; line-height: 20px; } .footer-emailButton { background-color: #333; border: 0; width: 100%; line-height: 30px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; color: #fff; } #copyright { background-color: #1e1e1e; text-align: center; line-height: 25px; padding: 8px 0; color: #fff; border-top: 1px solid #292929; } #copyright p { margin: 0px; } @media screen and (max-width: 1024px) { .footer-wrapper { -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; } .footer-block { padding: 20px 1%; } .footer-block:nth-child(1), .footer-block:nth-child(2) { flex: 0 0 100%; max-width: 100%; width: 100%; } } @media screen and (max-width: 600px) { .footer-block { padding: 10px; } } .ath-viewport * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .ath-viewport { position: relative; z-index: 2147483641; pointer-events: none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; -o-text-size-adjust: none; text-size-adjust: none; } .ath-modal { pointer-events: auto !important; background: rgba(0,0,0,0.6); } .ath-mandatory { background: #000; } .ath-container { pointer-events: auto !important; position: absolute; z-index: 2147483641; padding: 0.7em 0.6em 0em 0.6em; width: 18em; background: #007fbe; background-size: 100% auto; box-shadow: 0 0.2em 0 #124b8e; font-family: sans-serif; font-size: 15px; line-height: 1.5em; text-align: center; border-radius: 20px; } .ath-container small { font-size: 0.8em; line-height: 1.3em; display: block; margin-top: 0.5em; } .ath-ios.ath-phone { bottom: 1.8em; left: 50%; margin-left: -9em; } .ath-ios6.ath-tablet { left: 5em; top: 1.8em; } .ath-ios7.ath-tablet { left: 0.7em; top: 1.8em; } .ath-ios8.ath-tablet, .ath-ios9.ath-tablet, .ath-ios10.ath-tablet { right: 0.4em; top: 1.8em; } .ath-android { bottom: 1.8em; left: 50%; margin-left: -9em; } .ath-container:before { content: ''; position: relative; display: block; float: right; margin: -0.7em -0.6em 0 0.5em; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIQAAACECAMAAABmmnOVAAAAdVBMVEUAAAA5OTkzMzM7Ozs3NzdBQUFAQEA/Pz8+Pj5BQUFAQEA/Pz8+Pj5BQUFAQEA/Pz9BQUE+Pj4/Pz8/Pz8+Pj4/Pz8/Pz8/Pz8+Pj4/Pz8+Pj4/Pz8/Pz8/Pz8/Pz8/Pz8+Pj4/Pz8/Pz8/Pz8/Pz9AQEA/Pz+fdCaPAAAAJnRSTlMACQoNDjM4OTo7PEFCQ0RFS6ytsbS1tru8vcTFxu7x8vX19vf4+C5yomAAAAJESURBVHgBvdzLTsJAGEfxr4C2KBcVkQsIDsK8/yPaqIsPzVlyzrKrX/5p0kkXEz81L23otc9NpIbbWia2YVLqdnhlqFlhGWpSDHe1aopsSIpRb8gK0dC3G30b9rVmhWZIimTICsvQtx/FsuYOrWHoDjX3Gu31gzJxdki934WrAIOsAIOsAIOiAMPhPsJTgKGN0BVsYIVsYIVpYIVpYIVpYIVpYIVpYIVpYIVpYIVlAIVgEBRs8BRs8BRs8BRs8BRs8BRs8BRs8BRTNmgKNngKNngKNngKNngKNhiKGxgiOlZoBlaYBlaYBlaYBlaYBlaYBlaYBlaYBlZIBlBMfQMrVAMr2KAqBENSHFHhGEABhi5CV6gGUKgGUKgGUKgGUFwuqgEUvoEVsoEVpoEUpgEUggF+gKTKY+h1fxSlC7/Z+RrxOQ3fcEoAPPHZBlaYBlaYBlaYBlZYBlYIhvLBCstw7PgM7hkiWOEZWGEaWGEaWGEaIsakEAysmHkGVpxmvoEVqoEVpoEVpoEVpoEVpoEVpoEVkoEVgkFQsEFSsEFQsGEcoSvY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnmbNAUT2c2WAo2eAo2eAo2eAo2eAo2eArNEPFACjZ4CjZ4CjZ4CjaIird/rBvFH6llNCvewdli1URWCIakSIZesUaDoFg36dKFWk9zCZDei3TtwmCj7pC22AwikiIZPEU29IpFNliKxa/hC9DFITjQPYhcAAAAAElFTkSuQmCC"); background-image: url("/imgs/x.png"); background-color: rgba(0,127,190,0.8); background-size: 35%; background-repeat: no-repeat; background-position: 50%; width: 2.7em; height: 2.7em; text-align: center; overflow: hidden; color: #a33; z-index: 2147483642; } .ath-container.ath-icon:before { position: absolute; top: 0; right: 0; margin: 0; float: none; border-top-right-radius: 20px; } .ath-mandatory .ath-container:before { display: none; } .ath-container.ath-android:before { float: left; margin: -0.7em 0.5em 0 -0.6em; } .ath-container.ath-android.ath-icon:before { position: absolute; right: auto; left: 0; margin: 0; float: none; } .ath-action-icon { display: inline-block; vertical-align: middle; background-position: 50%; background-repeat: no-repeat; text-indent: -9999em; overflow: hidden; } .ath-ios7 .ath-action-icon, .ath-ios8 .ath-action-icon, .ath-ios9 .ath-action-icon, .ath-ios10 .ath-action-icon { width: 1.6em; height: 1.6em; background-image: url("data:image/png;base64,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"); background-image: url("/imgs/action-icon-ios7.png"); margin-top: -0.3em; background-size: auto 100%; } .ath-ios6 .ath-action-icon { width: 1.8em; height: 1.8em; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAAB0CAQAAADAmnOnAAAAAnNCSVQICFXsRgQAAAAJcEhZcwAAWwEAAFsBAXkZiFwAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAF4klEQVR4Ae3a/a+XdR3H8ec5HM45HDmKICoVohkZsxESRRCzcZM/2JKkdGR5MrSkleA0Pd00O4u5IVuNM2yYc6XSzCExU4oUNRPCJFdMUAhsYZpUGhscOHA4N8/WZzsL6HBxvofvdV3fa3yer//gsV3vH659KHzncBsJxUYhDzOEhCKQbORs+ip2wzgM+wvj+P9i35qAGLaHGcQSgKSTrxBLABJppZpYApCspoFYApBsZjSxBCD5OxOJJQBJG1cQSwCSLpqJJQCJ3MvgCGTinuSMCJS8LZwfgZL3FtMiUPIOcU0ESl4PLRHoRPsJtREoeRsYGYGS9yrvo6RmpbLaigWSfzOdErLs6+bLUMFA0sF1+QF1cz1UNlBYK9V5AHXyWSgEkKyiIWOgGh829Ki1lLcaxjCVK7mJRSxjBY+zgRf/u9pXcMB7jhEZAg32EUP3O6hMKOP5Iq2sZQeHMZXt5KKMgOpcY+iHVnFyjeQKlrCBdsxge5ieAVC9vzLUelI8H+A7bKIHM10H81IGGuKvDf1ggDxVTKOV1zG3/Yia1ICG+ltD32MgNTKfP2HuW0VDKkCNrjfUTOm9i6XswwrZJkaVHeh0f2fodkrtfO6jAytqrzG+rEDDfVG1x1sprZEs5RBW4PZxeT+Bbrf5hPu9arfzKaU6WjiAFbseWvoF1GW/6vYGSmkyW7Dit4xB5QHq9Br6Xx2t9GAhtp6zkoHsfNp1J9wX6H+jeR4LtJc4LxGopZZyNpN/YcG2mw9nBTSPLizgOmjKAujGgvJID3ekD7QYi7nGzkvmQtpA38Vi7iJf0TedlC7QTVjMfcY2QyvSBPpUMW/PIBfbo9pls1XpAX2EdizeznStob3OJpQO0DB2YfE21q2GtnghpAm0Gou3T9tm6BGHQppA12HRVt17eboNlydNoLHsx2JtmL801OYcQmkC/QKLtQt9ydBW3wNpA30ci7Ur3WdolUMhbaBqNhf/8qQJ9Hkszs5wjaH9XkUobaAqtmFRdoGbDb3sWMgG6DIs5852knO82RaXer+P+qyb3eWeo7ZNBrRZvm1otY2QFdBjeHIb6hTne49Put12+9ObMoDdYmfy5UkF6AK6cCCr9aM2u9IddptcOYCG+FNDB5xLKCugO7G01TndFp/xgAntdYvrfdwVLnORt3q9Vx25F27DUjbGPxr6qxMgW6Cd2N+d6wLXedA+6nKbK73Lr/pJxzusvE/wZrvX0FOOgGyBxmF/dprXutYOj6nNdS6xyYnWp/dGcaGdhr5vDWQN9E1MXrUzfcA2j2qPj/l1J1uT9iPOeh8w1O7nCGUN9HzyGZ7ndo9qp0ucanU2r1xH+wdDu5wIeQDVVx0+/kd1i697RNv8thdn+Qz4Uv9p6DeOhHyApmBfq3OBu+3Nfd7nVELZAX3Nw4ZarYG8gG7GY1dlk6/Zm3/2Rk8jlB1QvT82dNAmQjkBVf8Mj957fdrefM7ZVhPKEuidvmDob06CXIGGbsX/bZDf8KAhfdbJhLIGmuZuQ084HHIGatiLvRvrRkP6qldbBXkAzbfD0N0OhryBGqrEMOd50FC7d1hPKGugBh8ydMh5hPIGGouI1d5lj6F1vptQ9kDvcKOhN5wMlQH0QcRGnzC03yZCeQDN9G1D6xwBFQI07FI8x02GdjgB8gJqttPQcmuhYoAumzvG7YZWejrkA1TrPYYO+SVCFQO0aM4bqj0uJJQH0LluSP7PkyeQU9QOmyAvoBm+Zegpz4LKA/qYB/wE5AXUe3m81zqoRKAPOYWcuvP9dxvqcD6h7IAKkaNU3eUlHLcI9EzS5YlAi62h/zUy89QCqqKUmvgHywsJlEHnsQYxAvXVIJo5gIhnPhiBju1iNmLvLn85Ah1ZPYs5jBGo72awEzEC9dVwHqQHI9DxWoAYgSLQQKteGIESu/qhCJTYtT+PQBEoAkWgCBSBkotAEehUWwSKQBEoAkWg/BeBIlAEikARKAJFoFmealu4gVLy1Gt5dkARKAL9BzujPSurTmu/AAAAAElFTkSuQmCC"); margin-bottom: 0.4em; background-size: 100% auto; } .ath-android .ath-action-icon { width: 1.4em; height: 1.5em; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAANlBMVEVmZmb///9mZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZW6fJrAAAAEXRSTlMAAAYHG21ub8fLz9DR8/T4+RrZ9owAAAB3SURBVHja7dNLDoAgDATQWv4gKve/rEajJOJiWLgg6WzpSyB0aHqHiNj6nL1lovb4C+hYzkSNAT7mryQFAVOeGAj4CjwEtgrWXpD/uZKtwEJApXt+Vn0flzRhgNiFZQkOXY0aADQZCOCPlsZJ46Rx0jhp3IiN2wGDHhxtldrlwQAAAABJRU5ErkJggg=="); background-size: 100% auto; } .ath-container p { margin: 0; padding: 0; position: relative; z-index: 2147483642; text-shadow: 0 0.1em 0 #007fbe; font-size: 15px; color: #fff; line-height: 26px; } .ath-ios.ath-phone:after { content: ''; background: #007fbe; position: absolute; width: 1em; height: 1em; bottom: -0.3em; left: 50%; margin-left: -0.5em; -webkit-transform: scaleX(0.9) rotate(45deg); transform: scaleX(0.9) rotate(45deg); box-shadow: 0.2em 0.2em 0 #124b8e; } .ath-ios.ath-tablet:after { content: ''; background: #007fbe; position: absolute; width: 1em; height: 1em; top: -0.3em; left: 50%; margin-left: -0.5em; -webkit-transform: scaleX(0.9) rotate(45deg); transform: scaleX(0.9) rotate(45deg); z-index: 2147483641; } .ath-application-icon { position: relative; padding: 0; border: 0; margin: 0 auto 0.2em auto; height: 6em; width: 6em; z-index: 2147483642; } .ath-container.ath-ios .ath-application-icon { border-radius: 0.7em; /* box-shadow: 0 0.2em 0.4em rgba(0,0,0,0.3), inset 0 0.07em 0 rgba(255,255,255,0.5);*/ margin: 0 auto 0.4em auto; width: 48px; height: 48px; } @media only screen and (orientation: landscape) { .ath-container.ath-phone { width: 24em; } .ath-android.ath-phone { margin-left: -12em; } .ath-ios.ath-phone { margin-left: -12em; } .ath-ios6:after { left: 39%; } .ath-ios8.ath-phone { left: auto; bottom: auto; right: 0.4em; top: 1.8em; } .ath-ios8.ath-phone:after { bottom: auto; top: -0.9em; left: 68%; z-index: 2147483641; box-shadow: none; } } .slide_main .wrapper { max-width: 1380px; margin: 0 auto; height: 0px; position: relative; } .slide_main .title { color: #fff; position: absolute; top: 40px; width: 50%; padding: 20px; z-index: 10; font-size: 40px; } .slide_main .slide-button { background-color: #e70012; color: #fff; padding: 10px 40px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; font-size: 20px; } #numberbox { max-width: 1380px; margin: 0 auto; display: inline-block; display: box; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; padding: 60px 0; } .numberbox-pic { height: 100px; } .numberbox-item { width: 33.33%; margin: 0; padding: 0 5%; text-align: center; } .numberbox-title { font-size: 20px; padding: 0 10px; position: relative; top: 30px; background-color: #fff; font-weight: normal; } .numberbox-number { margin: 20px 0 0; border: 1px solid #444; font-size: 60px; line-height: 90px; color: #444; } .numberbox-word { color: #666; } @media screen and (max-width: 900px) { .numberbox-item { padding: 0 1%; } } @media screen and (max-width: 660px) { #numberbox { padding: 30px 0; } .numberbox-pic { float: left; } .numberbox-item { width: 100%; padding: 0 10px; } .numberbox-number { font-size: 52px; } } .about { background-color: #0f6ca5; position: relative; } .about-title { font-size: 38px; line-height: 50px; margin: 0; } .about-wrapper { position: relative; max-width: 1380px; color: #fff; margin: 0 auto; display: inline-block; display: box; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: flex-end; -moz-justify-content: flex-end; -ms-justify-content: flex-end; -ms-flex-pack: flex-end; -o-justify-content: flex-end; justify-content: flex-end; } .about-pic { position: absolute; width: 50%; right: 50%; height: 100%; top: 0; background-repeat: no-repeat; background-size: cover; } .about-word { width: 50%; padding: 20px; } .about-button { background-color: #e70012; color: #fff; padding: 10px 40px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; font-size: 16px; display: block; max-width: 230px; padding: 10px 0; margin: 0 auto; text-align: center; } @media screen and (max-width: 960px) { .about-pic { display: none; } .about-word { width: 100%; } } #picwall { background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-position: center; } .picwall-wrapper { max-width: 1380px; margin: 0 auto; padding: 40px 10px; display: inline-block; display: box; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; } /*商品櫥窗*/ .showcase-001 .picwall-col-50 { width: 50%; } .showcase-001 .picwall-col-25 { padding-left: 1%; display: inline-block; display: box; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; width: 25%; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -ms-flex-pack: space-between; -o-justify-content: space-between; justify-content: space-between; } .showcase-001 .picwall-col-25:last-child .picwall-item:last-child { margin-top: 4%; } .showcase-001 .picwall-pic { vertical-align: top; } .showcase-001 .picwall-title { position: absolute; width: 100%; left: 0; bottom: -50px; color: #fff; text-align: center; font-size: 28px; line-height: 30px; padding: 10px; height: 50px; opacity: 0.6; -webkit-transition: bottom 0.2s linear; -moz-transition: bottom 0.2s linear; -o-transition: bottom 0.2s linear; transition: bottom 0.2s linear; } .showcase-001 .picwall-title-big { position: absolute; width: 100%; left: 0; bottom: -100px; color: #fff; text-align: center; font-size: 28px; line-height: 30px; padding: 10px; height: 100px; line-height: 30px; opacity: 0.6; -webkit-transition: bottom 0.2s linear; -moz-transition: bottom 0.2s linear; -o-transition: bottom 0.2s linear; transition: bottom 0.2s linear; } .showcase-001 .picwall-title-big .font-small { font-size: 18px; line-height: 24px; } .showcase-001 .picwall-title-big .a_donate { text-decoration: underline; font-size: 22px; line-height: 50px; } .showcase-001 .picwall-item { overflow: hidden; position: relative; width: 100%; } .showcase-001 .picwall-item:hover .picwall-title, .showcase-001 .picwall-item:hover .picwall-title-big { bottom: 0; } @media screen and (max-width: 1024px) { .showcase-001 .picwall-title { bottom: 0; } } @media screen and (max-width: 660px) { .showcase-001 .picwall-col-50, .showcase-001 .picwall-col-25 { width: 100%; text-align: center; } .showcase-001 .picwall-item { display: inline-block; margin-bottom: 10px; } } .showcase-002 .picwall-wrapper { -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -ms-flex-pack: space-between; -o-justify-content: space-between; justify-content: space-between; -webkit-align-items: flex-start; -moz-align-items: flex-start; -ms-align-items: flex-start; -ms-flex-align: flex-start; -o-align-items: flex-start; align-items: flex-start; } .showcase-002 .picwall-pic { vertical-align: top; } .showcase-002 .picwall-title { position: absolute; width: 100%; left: 0; bottom: -50px; color: #fff; text-align: center; font-size: 28px; line-height: 30px; padding: 10px; height: 50px; opacity: 0.6; -webkit-transition: bottom 0.2s linear; -moz-transition: bottom 0.2s linear; -o-transition: bottom 0.2s linear; transition: bottom 0.2s linear; } .showcase-002 .picwall-title-big { position: absolute; width: 100%; left: 0; bottom: -100px; color: #fff; text-align: center; font-size: 28px; line-height: 30px; padding: 10px; height: 100px; line-height: 30px; opacity: 0.6; -webkit-transition: bottom 0.2s linear; -moz-transition: bottom 0.2s linear; -o-transition: bottom 0.2s linear; transition: bottom 0.2s linear; } .showcase-002 .picwall-title-big .font-small { font-size: 18px; line-height: 24px; } .showcase-002 .picwall-title-big .a_donate { text-decoration: underline; font-size: 22px; line-height: 50px; } .showcase-002 .picwall-item { overflow: hidden; position: relative; width: 49.5%; } .showcase-002 .picwall-item:first-child { width: 100%; margin-bottom: 10px; } .showcase-002 .picwall-item:hover .picwall-title, .showcase-002 .picwall-item:hover .picwall-title-big { bottom: 0; } @media screen and (max-width: 1024px) { .showcase-002 .picwall-title { bottom: 0; } } .showcase-003 .picwall-col-46 { padding-right: 0.56%; width: 46%; } .showcase-003 .picwall-col-53 { display: inline-block; display: box; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; width: 53%; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -ms-flex-pack: space-between; -o-justify-content: space-between; justify-content: space-between; -webkit-align-items: flex-start; -moz-align-items: flex-start; -ms-align-items: flex-start; -ms-flex-align: flex-start; -o-align-items: flex-start; align-items: flex-start; } .showcase-003 .picwall-col-53 .picwall-item:nth-child(4), .showcase-003 .picwall-col-53 .picwall-item:nth-child(5) { margin-top: 1%; } .showcase-003 .picwall-pic { vertical-align: top; } .showcase-003 .picwall-title { position: absolute; width: 100%; left: 0; bottom: -50px; color: #fff; text-align: center; font-size: 28px; line-height: 30px; padding: 10px; height: 50px; opacity: 0.6; -webkit-transition: bottom 0.2s linear; -moz-transition: bottom 0.2s linear; -o-transition: bottom 0.2s linear; transition: bottom 0.2s linear; } .showcase-003 .picwall-title-big { position: absolute; width: 100%; left: 0; bottom: -100px; color: #fff; text-align: center; font-size: 28px; line-height: 30px; padding: 10px; height: 100px; line-height: 30px; opacity: 0.6; -webkit-transition: bottom 0.2s linear; -moz-transition: bottom 0.2s linear; -o-transition: bottom 0.2s linear; transition: bottom 0.2s linear; } .showcase-003 .picwall-title-big .font-small { font-size: 18px; line-height: 24px; } .showcase-003 .picwall-title-big .a_donate { text-decoration: underline; font-size: 22px; line-height: 50px; } .showcase-003 .picwall-item { overflow: hidden; position: relative; width: 100%; } .showcase-003 .picwall-item:hover .picwall-title, .showcase-003 .picwall-item:hover .picwall-title-big { bottom: 0; } .showcase-003 .picwall-small { width: 32.5%; } @media screen and (max-width: 1024px) { .showcase-003 .picwall-title { bottom: 0; } } @media screen and (max-width: 660px) { .showcase-003 .picwall-col-46, .showcase-003 .picwall-col-53 { width: 100%; text-align: center; } .showcase-003 .picwall-item { display: inline-block; margin-bottom: 10px; } } .showcase-004 .picwall-col-33 { padding-left: 0.5%; width: 32.5%; } .showcase-004 .picwall-col-33 .picwall-item:last-child { margin-top: 2%; } .showcase-004 .picwall-col-66 { display: inline-block; display: box; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; width: 67%; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -ms-flex-pack: space-between; -o-justify-content: space-between; justify-content: space-between; } .showcase-004 .picwall-col-66 .picwall-item:last-child { margin-top: 1%; } .showcase-004 .picwall-pic { vertical-align: top; } .showcase-004 .picwall-title { position: absolute; width: 100%; left: 0; bottom: -50px; color: #fff; text-align: center; font-size: 28px; line-height: 30px; padding: 10px; height: 50px; opacity: 0.6; -webkit-transition: bottom 0.2s linear; -moz-transition: bottom 0.2s linear; -o-transition: bottom 0.2s linear; transition: bottom 0.2s linear; } .showcase-004 .picwall-title-big { position: absolute; width: 100%; left: 0; bottom: -100px; color: #fff; text-align: center; font-size: 28px; line-height: 30px; padding: 10px; height: 100px; line-height: 30px; opacity: 0.6; -webkit-transition: bottom 0.2s linear; -moz-transition: bottom 0.2s linear; -o-transition: bottom 0.2s linear; transition: bottom 0.2s linear; } .showcase-004 .picwall-title-big .font-small { font-size: 18px; line-height: 24px; } .showcase-004 .picwall-title-big .a_donate { text-decoration: underline; font-size: 22px; line-height: 50px; } .showcase-004 .picwall-item { overflow: hidden; position: relative; width: 100%; } .showcase-004 .picwall-item:hover .picwall-title, .showcase-004 .picwall-item:hover .picwall-title-big { bottom: 0; } .showcase-004 .picwall-small { width: 49.5%; } @media screen and (max-width: 1024px) { .showcase-004 .picwall-title { bottom: 0; } } @media screen and (max-width: 660px) { .showcase-004 .picwall-col-33, .showcase-004 .picwall-col-66 { width: 100%; text-align: center; } .showcase-004 .picwall-item { display: inline-block; margin-bottom: 10px; } .showcase-004 .picwall-item:last-child { margin-top: 0px; } } .showcase-005 .picwall-wrapper { -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -ms-flex-pack: space-between; -o-justify-content: space-between; justify-content: space-between; -webkit-align-items: flex-start; -moz-align-items: flex-start; -ms-align-items: flex-start; -ms-flex-align: flex-start; -o-align-items: flex-start; align-items: flex-start; } .showcase-005 .picwall-col-25 { width: 25%; } .showcase-005 .picwall-col-48 { display: inline-block; display: box; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; width: 48%; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -ms-flex-pack: space-between; -o-justify-content: space-between; justify-content: space-between; } .showcase-005 .picwall-pic { vertical-align: top; } .showcase-005 .picwall-title { position: absolute; width: 100%; left: 0; bottom: -50px; color: #fff; text-align: center; font-size: 28px; line-height: 30px; padding: 10px; height: 50px; opacity: 0.6; -webkit-transition: bottom 0.2s linear; -moz-transition: bottom 0.2s linear; -o-transition: bottom 0.2s linear; transition: bottom 0.2s linear; } .showcase-005 .picwall-title-big { position: absolute; width: 100%; left: 0; bottom: -100px; color: #fff; text-align: center; font-size: 28px; line-height: 30px; padding: 10px; height: 100px; line-height: 30px; opacity: 0.6; -webkit-transition: bottom 0.2s linear; -moz-transition: bottom 0.2s linear; -o-transition: bottom 0.2s linear; transition: bottom 0.2s linear; } .showcase-005 .picwall-title-big .font-small { font-size: 18px; line-height: 24px; } .showcase-005 .picwall-title-big .a_donate { text-decoration: underline; font-size: 22px; line-height: 50px; } .showcase-005 .picwall-item { overflow: hidden; position: relative; width: 100%; } .showcase-005 .picwall-item:first-child { margin-bottom: 10px; } .showcase-005 .picwall-item:hover .picwall-title, .showcase-005 .picwall-item:hover .picwall-title-big { bottom: 0; } .showcase-005 .picwall-small { width: 49.5%; } @media screen and (max-width: 1024px) { .showcase-005 .picwall-title { bottom: 0; } } @media screen and (max-width: 660px) { .showcase-005 .picwall-col-25, .showcase-005 .picwall-col-48 { width: 100%; text-align: center; } .showcase-005 .picwall-item { display: inline-block; margin-bottom: 10px; } } .showcase-006 .picwall-col-72 { padding-right: 0.5%; width: 72%; } .showcase-006 .picwall-col-28 { padding-left: 0.5%; display: inline-block; display: box; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; width: 28%; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -ms-flex-pack: space-between; -o-justify-content: space-between; justify-content: space-between; } .showcase-006 .picwall-col-28 .picwall-item:last-child { margin-top: 1%; } .showcase-006 .picwall-pic { vertical-align: top; } .showcase-006 .picwall-title { position: absolute; width: 100%; left: 0; bottom: -50px; color: #fff; text-align: center; font-size: 28px; line-height: 30px; padding: 10px; height: 50px; opacity: 0.6; -webkit-transition: bottom 0.2s linear; -moz-transition: bottom 0.2s linear; -o-transition: bottom 0.2s linear; transition: bottom 0.2s linear; } .showcase-006 .picwall-title-big { position: absolute; width: 100%; left: 0; bottom: -100px; color: #fff; text-align: center; font-size: 28px; line-height: 30px; padding: 10px; height: 100px; line-height: 30px; opacity: 0.6; -webkit-transition: bottom 0.2s linear; -moz-transition: bottom 0.2s linear; -o-transition: bottom 0.2s linear; transition: bottom 0.2s linear; } .showcase-006 .picwall-title-big .font-small { font-size: 18px; line-height: 24px; } .showcase-006 .picwall-title-big .a_donate { text-decoration: underline; font-size: 22px; line-height: 50px; } .showcase-006 .picwall-item { overflow: hidden; position: relative; width: 100%; } .showcase-006 .picwall-item:hover .picwall-title, .showcase-006 .picwall-item:hover .picwall-title-big { bottom: 0; } @media screen and (max-width: 1024px) { .showcase-008 .picwall-title { bottom: 0; } } @media screen and (max-width: 660px) { .showcase-008 .picwall-col-72, .showcase-008 .picwall-col-28 { width: 100%; text-align: center; } .showcase-008 .picwall-item { display: inline-block; margin-bottom: 10px; } .showcase-008 .picwall-item:last-child { margin-btop: 0px; } } .showcase-007 .picwall-col-33 { padding-right: 5px; width: 33%; } .showcase-007 .picwall-pic { vertical-align: top; } .showcase-007 .picwall-title { position: absolute; width: 100%; left: 0; bottom: -50px; color: #fff; text-align: center; font-size: 28px; line-height: 30px; padding: 10px; height: 50px; opacity: 0.6; -webkit-transition: bottom 0.2s linear; -moz-transition: bottom 0.2s linear; -o-transition: bottom 0.2s linear; transition: bottom 0.2s linear; } .showcase-007 .picwall-title-big { position: absolute; width: 100%; left: 0; bottom: -100px; color: #fff; text-align: center; font-size: 28px; line-height: 30px; padding: 10px; height: 100px; line-height: 30px; opacity: 0.6; -webkit-transition: bottom 0.2s linear; -moz-transition: bottom 0.2s linear; -o-transition: bottom 0.2s linear; transition: bottom 0.2s linear; } .showcase-007 .picwall-title-big .font-small { font-size: 18px; line-height: 24px; } .showcase-007 .picwall-title-big .a_donate { text-decoration: underline; font-size: 22px; line-height: 50px; } .showcase-007 .picwall-item { overflow: hidden; position: relative; width: 100%; margin-bottom: 1%; } .showcase-007 .picwall-item:last-child { margin-bottom: 0; } .showcase-007 .picwall-item:hover .picwall-title, .showcase-007 .picwall-item:hover .picwall-title-big { bottom: 0; } .showcase-007 .item-centertop { margin-bottom: 2.5%; } @media screen and (max-width: 1024px) { .showcase-007 .picwall-title { bottom: 0; } } @media screen and (max-width: 660px) { .showcase-007 .picwall-col-33 { width: 100%; text-align: center; } .showcase-007 .picwall-item { display: inline-block; margin-bottom: 10px; } } .showcase-008 .picwall-col-33 { padding-right: 0.3%; width: 33%; } .showcase-008 .picwall-col-66 { padding-left: 0.7%; display: inline-block; display: box; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; width: 66%; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -ms-flex-pack: space-between; -o-justify-content: space-between; justify-content: space-between; } .showcase-008 .picwall-pic { vertical-align: top; } .showcase-008 .picwall-title { position: absolute; width: 100%; left: 0; bottom: -50px; color: #fff; text-align: center; font-size: 28px; line-height: 30px; padding: 10px; height: 50px; opacity: 0.6; -webkit-transition: bottom 0.2s linear; -moz-transition: bottom 0.2s linear; -o-transition: bottom 0.2s linear; transition: bottom 0.2s linear; } .showcase-008 .picwall-title-big { position: absolute; width: 100%; left: 0; bottom: -100px; color: #fff; text-align: center; font-size: 28px; line-height: 30px; padding: 10px; height: 100px; line-height: 30px; opacity: 0.6; -webkit-transition: bottom 0.2s linear; -moz-transition: bottom 0.2s linear; -o-transition: bottom 0.2s linear; transition: bottom 0.2s linear; } .showcase-008 .picwall-title-big .font-small { font-size: 18px; line-height: 24px; } .showcase-008 .picwall-title-big .a_donate { text-decoration: underline; font-size: 22px; line-height: 50px; } .showcase-008 .picwall-item { overflow: hidden; position: relative; width: 100%; } .showcase-008 .picwall-item:first-child { margin-bottom: 10px; } .showcase-008 .picwall-item:hover .picwall-title, .showcase-008 .picwall-item:hover .picwall-title-big { bottom: 0; } .showcase-008 .picwall-small { width: 49.5%; } @media screen and (max-width: 1024px) { .showcase-008 .picwall-title { bottom: -50px; } } @media screen and (max-width: 660px) { .showcase-008 .picwall-col-33, .showcase-008 .picwall-col-66 { width: 100%; text-align: center; } .showcase-008 .picwall-item { display: inline-block; margin-bottom: 10px; } } .showcase-009 .picwall-wrapper { -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -ms-flex-pack: space-between; -o-justify-content: space-between; justify-content: space-between; -webkit-align-items: flex-start; -moz-align-items: flex-start; -ms-align-items: flex-start; -ms-flex-align: flex-start; -o-align-items: flex-start; align-items: flex-start; } .showcase-009 .picwall-pic { vertical-align: top; } .showcase-009 .picwall-title { position: absolute; width: 100%; left: 0; bottom: -50px; color: #fff; text-align: center; font-size: 28px; line-height: 30px; padding: 10px; height: 50px; opacity: 0.6; -webkit-transition: bottom 0.2s linear; -moz-transition: bottom 0.2s linear; -o-transition: bottom 0.2s linear; transition: bottom 0.2s linear; } .showcase-009 .picwall-title-big { position: absolute; width: 100%; left: 0; bottom: -100px; color: #fff; text-align: center; font-size: 28px; line-height: 30px; padding: 10px; height: 100px; line-height: 30px; opacity: 0.6; -webkit-transition: bottom 0.2s linear; -moz-transition: bottom 0.2s linear; -o-transition: bottom 0.2s linear; transition: bottom 0.2s linear; } .showcase-009 .picwall-title-big .font-small { font-size: 18px; line-height: 24px; } .showcase-009 .picwall-title-big .a_donate { text-decoration: underline; font-size: 22px; line-height: 50px; } .showcase-009 .picwall-item { overflow: hidden; position: relative; width: 46%; padding-bottom: 1%; position: relative; } .showcase-009 .picwall-item:nth-child(1) { width: 53%; } .showcase-009 .picwall-item:hover .picwall-title, .showcase-009 .picwall-item:hover .picwall-title-big { bottom: 0; } .showcase-009 .picwall-block { width: 53%; display: flex; flex-wrap: wrap; margin-left: 1%; justify-content: space-between; } .showcase-009 .picwall-block .picwall-item { width: 56.5%; position: relative; } .showcase-009 .picwall-block .picwall-item:nth-child(2), .showcase-009 .picwall-block .picwall-item:nth-child(1) { padding-bottom: 2%; } .showcase-009 .picwall-block .picwall-item:nth-child(2), .showcase-009 .picwall-block .picwall-item:nth-child(3) { width: 41.5%; } @media screen and (max-width: 1024px) { .showcase-009 .picwall-title { bottom: 0; } } @media screen and (max-width: 660px) { .showcase-009 .picwall-item { width: 100%; margin-bottom: 10px; } .showcase-009 .picwall-item:nth-child(1) { width: 100%; } .showcase-009 .picwall-block { width: 100%; margin: 0; text-align: center; } .showcase-009 .picwall-block .picwall-item { width: 50%; } } .showcase-010 .picwall-wrapper { -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -ms-flex-pack: space-between; -o-justify-content: space-between; justify-content: space-between; -webkit-align-items: flex-start; -moz-align-items: flex-start; -ms-align-items: flex-start; -ms-flex-align: flex-start; -o-align-items: flex-start; align-items: flex-start; } .showcase-010 .picwall-col-28 { width: 28%; } .showcase-010 .picwall-col-30 { width: 30%; } .showcase-010 .picwall-col-40 { width: 40%; } .showcase-010 .picwall-col-46 { width: 46%; } .showcase-010 .picwall-col-53 { width: 53%; } .showcase-010 .picwall-pic { vertical-align: top; } .showcase-010 .picwall-title { position: absolute; width: 100%; left: 0; bottom: -50px; color: #fff; text-align: center; font-size: 28px; line-height: 30px; padding: 10px; height: 50px; opacity: 0.6; -webkit-transition: bottom 0.2s linear; -moz-transition: bottom 0.2s linear; -o-transition: bottom 0.2s linear; transition: bottom 0.2s linear; } .showcase-010 .picwall-title-big { position: absolute; width: 100%; left: 0; bottom: -100px; color: #fff; text-align: center; font-size: 28px; line-height: 30px; padding: 10px; height: 100px; line-height: 30px; opacity: 0.6; -webkit-transition: bottom 0.2s linear; -moz-transition: bottom 0.2s linear; -o-transition: bottom 0.2s linear; transition: bottom 0.2s linear; } .showcase-010 .picwall-title-big .font-small { font-size: 18px; line-height: 24px; } .showcase-010 .picwall-title-big .a_donate { text-decoration: underline; font-size: 22px; line-height: 50px; } .showcase-010 .picwall-item { overflow: hidden; position: relative; width: 100%; } .showcase-010 .picwall-item:first-child { margin-bottom: 10px; } .showcase-010 .picwall-item:hover .picwall-title, .showcase-010 .picwall-item:hover .picwall-title-big { bottom: 0; } @media screen and (max-width: 1024px) { .showcase-010 .picwall-title { bottom: 0; } } @media screen and (max-width: 660px) { .showcase-010 .picwall-col-28, .showcase-010 .picwall-col-30, .showcase-010 .picwall-col-40, .showcase-010 .picwall-col-46, .showcase-010 .picwall-col-53 { width: 100%; text-align: center; } .showcase-010 .picwall-item { display: inline-block; margin-bottom: 10px; } } .listbox { display: inline-block; display: box; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; padding-top: 40px; max-width: 1380px; margin: 0 auto; } .list-item { width: 32%; margin-right: 2%; padding-bottom: 40px; } .list-item:nth-child(3n) { margin: 0; } @media screen and (max-width: 960px) { .list-item { width: 49%; } .list-item:nth-child(3n) { margin-right: 2%; } .list-item:nth-child(2n) { margin: 0; } } @media screen and (max-width: 600px) { .list-item { width: 100%; margin: 0; } .list-item:nth-child(3n) { margin: 0; } .list-item:nth-child(2n) { margin: 0; } } .list-title { display: inline-block; display: box; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -ms-flex-pack: space-between; -o-justify-content: space-between; justify-content: space-between; } .list-link { font-size: 24px; font-weight: normal; line-height: 40px; } .list-tag { color: #a9b7c0; font-size: 12px; font-weight: normal; border-radius: 50%; background-color: #f8f6f9; line-height: 40px; width: 40px; text-align: center; display: inline-block; } .list-pic-hover { position: absolute; top: 100%; left: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,0.9); -webkit-transition: top 0.35s linear; -moz-transition: top 0.35s linear; -o-transition: top 0.35s linear; transition: top 0.35s linear; display: inline-block; display: box; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .list-pic-hover .col-50 { display: inline-block; display: box; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -ms-flex-pack: center; -o-justify-content: center; justify-content: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -ms-flex-align: center; -o-align-items: center; align-items: center; } .list-pic-hover .col-50:last-child { padding-top: 25px; -webkit-align-items: flex-start; -moz-align-items: flex-start; -ms-align-items: flex-start; -ms-flex-align: flex-start; -o-align-items: flex-start; align-items: flex-start; } .list-pic-hover .icon { background-color: #258ebe; color: #fff; border-radius: 20px; line-height: 40px; width: 40px; margin: 0 5px; text-align: center; font-size: 13px; } .list-pic { position: relative; overflow: hidden; } .list-pic:hover .list-pic-hover { top: 0; } .phone { position: relative; padding: 30px 10px 0 10px; background-color: #dadada; border-radius: 20px 20px 0 0; } .phone:after, .phone:before { content: ''; position: absolute; } .phone:after { width: 5px; top: 15px; height: 4px; left: 70px; background-color: #b5b5b5; border-radius: 3px; } .phone:before { width: 35px; top: 15px; left: 80px; height: 4px; background-color: #b5b5b5; border-radius: 3px; } .list-word { color: #888; } aside { display: inline-block; display: box; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -ms-flex-pack: space-between; -o-justify-content: space-between; justify-content: space-between; } .tagbox { display: inline-block; display: box; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; } .tag-item { border: 1px solid #999; text-align: center; height: 60px; display: inline-block; width: 60px; margin-right: 10px; cursor: pointer; display: inline-block; display: box; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -ms-flex-align: center; -o-align-items: center; align-items: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -ms-flex-pack: center; -o-justify-content: center; justify-content: center; margin-top: 10px; } .tag-item.now { background-color: #258ebe; color: #fff; } .icon-all { width: 20px; display: block; margin: 0 auto; } /*品牌*/ .oneline-sixitem-01 { margin-top: 40px; } .oneline-sixitem-01 .wrapper { max-width: 1380px; margin: 0 auto; display: inline-block; display: box; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; border-top: 1px solid #f0f0f0; } .oneline-sixitem-01 .item { width: 15%; margin: 20px 0 0 1%; border-radius: 5px; padding-bottom: 10px; display: block; } @media screen and (max-width: 768px) { .oneline-sixitem-01 .item { width: 24%; } } @media screen and (max-width: 480px) { .oneline-sixitem-01 .item { width: 32%; } } /*品牌*/ .oneline-sixitem-01 { padding: 40px 0; } .oneline-sixitem-01 h2 { text-align: left; margin: 0; padding: 30px 0px; font-size: 24px; font-weight: normal; } .oneline-sixitem-01 h2 img { margin-right: 10px; } .oneline-sixitem-01 .wrapper::after { content: ''; display: block; clear: both; } .oneline-sixitem-01 .item { float: left; width: 13%; margin: 20px 0 0 3%; border-radius: 5px; padding-bottom: 10px; display: block; } .oneline-sixitem-01 .brand-title { display: block; padding: 15px 0; text-align: center; } .oneline-sixitem-01 .brand-button { float: left; width: 100%; text-align: center; margin-top: 20px; } .oneline-sixitem-01 .brand-button .about-button { background-color: #1e1e1e; font-size: 16px; display: block; max-width: 230px; padding: 10px 0; margin: 0 auto; text-align: center; } @media screen and (max-width: 768px) { .oneline-sixitem-01 .item { width: 24%; margin-left: 1%; } } @media screen and (max-width: 480px) { .oneline-sixitem-01 .item { width: 32%; } } #donatebox { text-align: center; background-repeat: no-repeat; background-size: cover; padding: 60px 10px; } #donatebox .wrapper { max-width: 1380px; margin: 0 auto; background-color: rgba(255,255,255,0.6); color: #333; padding: 10px; } #donatebox .title { font-size: 38px; line-height: 50px; margin: 0; } #donatebox .button { background-color: #e70012; color: #fff; padding: 10px 40px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; font-size: 20px; } .mask { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 1000; padding: 10px; display: inline-block; display: box; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -ms-flex-align: center; -o-align-items: center; align-items: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -ms-flex-pack: center; -o-justify-content: center; justify-content: center; } .mask-content { position: relative; width: 300px; height: 165px; background-color: rgba(255,255,255,0.8); background-color: #124b8e; border-radius: 15px; text-align: center; color: #fff; } .content-title { font-size: 20px; padding: 25px 0; } .content-str { color: #fff; width: 200px; height: 54px; font-size: 15px; margin: auto; text-align: justify; } .buttonbox { border-top: 1px solid #fff; display: flex; } .content-button-success, .content-button-cancel { width: 100%; border: 0; padding: 10px; color: #fff; background-color: rgba(230,230,230,0.8); background-color: #007fbe; font-size: 15px; font-weight: bold; outline: none; } .content-button-success { border-bottom-right-radius: 15px; } .content-button-cancel { border-right: 1px solid #fff; border-bottom-left-radius: 15px; }