html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, 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, input[type=number], input[type=text], input[type=password], input[type=date], input[type=time], input[type=email], textarea, button, select { margin: 0; padding: 0; border: 0; font: inherit; word-break: break-all; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; vertical-align: baseline; -moz-appearance: none; -webkit-appearance: none; border-radius: 0; } body { font-family: 'Arial', '微軟正黑體', sans-serif, Arial, '文泉驛正黑', "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "Microsoft JhengHei", sans-serif; font-weight: 300; font-size: 1em; } *[data-toUrl], label, button, *[data-setActive] { cursor: pointer; } button { background-color: transparent; } button, a, img { transition: all .2s ease-out 0s; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } picture, img { display: block; max-width: 100%; } a, a:hover, a:focus, textarea:focus, input:focus, button:focus, select { outline: none; text-decoration: none; } .wrap { padding: 0px calc(50% - 600px); } @media (max-width: 1220px) { .wrap { padding: 0px calc(50% - 512px); } } @media (max-width: 1024px) { .wrap { padding: 0px 10px; } } picture img { width: 100%; } body { border-top: 5px solid #b53f45; } .pic, a picture, *[data-toUrl] picture { overflow: hidden; } .pic img, a picture img, *[data-toUrl] picture img { transform: scale(1,1); transition: all .5s ease-out; } .pic img:hover, a picture img:hover, *[data-toUrl] picture img:hover { transform: scale(1.2,1.2); } .pic img.nore:hover, a picture img.nore:hover, *[data-toUrl] picture img.nore:hover { transform: scale(1,1); } #head { padding-top: 30px; padding-bottom: 30px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; } #head #logo { padding-left: 20%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; width: 60%; } #head .fa-bars { display: none; } #head #social_list { width: 20%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; } #head #social_list li { padding: 10px; } #head #social_list li a { background: #b53f45; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; width: 32px; height: 32px; display: block; line-height: 32px; text-align: center; color: #fff; } #head #social_list li a:hover { background: #e55e5e; } #main_menu ul { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; padding-top: 10px; padding-bottom: 10px; border-top: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1; } #main_menu ul li { flex: 1; text-align: center; } #main_menu ul li a { display: block; border-right: 1px solid #e1e1e1; color: #787878; padding: 5px 0; } #main_menu ul li a:hover { color: #b53f45; } #main_menu ul li:last-child a { border-right: 0px; } @media (max-width: 1024px) { #head { padding: 0px 10px; border-bottom: 1px solid #b53f45; } #head #logo { width: 100%; padding: 0px; } #head .fa-bars { display: block; position: absolute; right: 0px; width: 50px; height: 50px; top: 5px; text-align: center; line-height: 50px; color: #b53f45; } #main_menu { display: none; } body { padding-bottom: 50px; } body.active #head .fa-bars { position: fixed; z-index: 2000; } body.active #main_menu { display: block; position: fixed; top: 0px; left: 0px; width: 100%; height: 100vh; background: #fff; z-index: 1000; border: 5px solid #b53f45; } body.active #main_menu ul { display: flex; flex-direction: column; border: 0px; } body.active #main_menu ul li { width: 100%; } body.active #main_menu ul li a { border: 0px; padding: 20px 0; border-bottom: 1px solid #e1e1e1; } #head #social_list { background: rgba(255,255,255,0.5); z-index: 1000; position: fixed; bottom: 0px; left: 0px; width: 100%; } } #foot { background: #333; } #foot .wrap { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; padding-top: 50px; padding-bottom: 50px; } #foot .wrap .foot_menu { width: 60%; padding-right: 10px; } #foot .wrap .foot_menu picture { display: inline-block; } #foot .wrap .foot_menu ul { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; } #foot .wrap .foot_menu ul li { width: 33%; padding: 10px 0; } #foot .wrap .foot_menu ul li a { color: #fff; } #foot .wrap .foot_menu ul li a:hover { color: #e55e5e; } #foot .wrap .foot_content { width: 40%; padding-left: 10px; } #foot .wrap .foot_content h5 { font-size: 200%; color: #fff; } #foot .wrap .foot_content ul li { padding: 10px 0; } #foot .wrap .foot_content ul a { color: #fff; } #foot .wrap .foot_content ul a:hover { color: #e55e5e; } @media (max-width: 600px) { #foot .wrap { display: block; } #foot .wrap .foot_menu, #foot .wrap .foot_content { padding: 20px 0; width: 100%; } #foot .wrap .foot_menu ul li { width: 50%; } } #copyright { background: #000; font-size: 80%; color: #fff; text-align: center; padding: 5px 0; } #copyright a { color: #fff; } #body .more span { display: inline-block; width: 80px; height: 80px; background: #b53f45; color: #fff; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; line-height: 80px; text-align: center; cursor: pointer; } #body .more span:hover { transition: all .2s ease-out 0s; background: #e55e5e; } #body .line_more { text-align: center; position: relative; } #body .line_more::after { content: ' '; width: 100%; height: 1px; background: #ccc; position: absolute; top: 50%; left: 0px; } #body .line_more a, #body .line_more span { transition: all .2s ease-out 0s; position: relative; z-index: 10; display: inline-block; background: #fff; width: 80px; height: 80px; line-height: 80px; color: #b53f45; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } #body .line_more a:hover, #body .line_more span:hover { background: #b53f45; color: #fff; } #body #banner { padding-top: 50px; padding-bottom: 50px; } #body #banner img { width: 100%; } #body #top_about { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; } #body #about { width: 50%; padding-right: 20px; display: flex; flex-direction: column; } #body #about h1 { margin-bottom: 20px; } #body #about h1 a { color: #b53f45; font-size: 200%; font-weight: 900; } #body #about p { line-height: 150%; flex: 1; font-size: 110%; } #body #news { padding-left: 20px; width: 50%; } #body #news .section_list { margin-bottom: 20px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; } #body #news .section_list section { width: calc(50% - 10px); margin: 0 10px; } #body #news .section_list section:nth-child(2n) { margin-right: 0px; } #body #news .section_list section:nth-child(2n + 1) { margin-left: 0px; } #body #news .section_list section h2 { margin-bottom: 20px; } #body #news .section_list section h2 a { color: #333; line-height: 150%; font-size: 110%; } #body #news .section_list section h2 a:hover { color: #b53f45; } #body #news .section_list section time { color: #999; display: block; margin-bottom: 10px; font-size: 90%; } #body #news .section_list section .picture { position: relative; overflow: hidden; } #body #news .section_list section .picture p { transition: all .2s ease-out 0s; z-index: 10; padding: 10px; line-height: 150%; color: #fff; position: absolute; top: 100%; left: 0px; } #body #news .section_list section .picture .more { transition: all .2s ease-out 0s; z-index: 10; text-align: right; position: absolute; bottom: -100%; left: 0px; width: 100%; height: 100px; padding: 10px; } #body #news .section_list section .picture::before { transition: all .2s ease-out 0s; z-index: 10; content: ' '; width: 100%; height: 100%; position: absolute; left: 0px; top: 100%; background: rgba(0,0,0,0.5); } #body #news .section_list section .picture:hover p { top: 0px; } #body #news .section_list section .picture:hover .more { bottom: 0px; } #body #news .section_list section .picture:hover::before { top: 0px; } @media (max-width: 600px) { #body #top_about { display: block; } #body #top_about #about, #body #top_about #news { padding: 10px 0; width: 100%; } } #body #product { padding-top: 100px; padding-bottom: 100px; } #body #product h2 { text-align: center; } #body #product h2 a { font-size: 200%; color: #b53f45; font-weight: 900; } #body #product h2 a:hover { color: #e55e5e; } #body #product ul { padding-top: 50px; padding-bottom: 50px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; } #body #product ul li { margin: 0 10px 20px 10px; width: calc((100% - 60px) / 4); } #body #product ul li:nth-child(4n) { margin-right: 0px; } #body #product ul li:nth-child(4n + 1) { margin-left: 0px; } #body #product ul li a span { display: block; color: #333; line-height: 150%; } #body #product ul li a span:hover { color: #b53f45; } @media (max-width: 600px) { #body #product ul li { margin: 0 10px 20px 10px; width: calc((100% - 20px) / 2); } #body #product ul li:nth-child(4n) { margin-right: 10px; } #body #product ul li:nth-child(4n + 1) { margin-left: 10px; } #body #product ul li:nth-child(2n) { margin-right: 0; } #body #product ul li:nth-child(2n + 1) { margin-left: 0; } } #body #service h2 { font-size: 200%; font-weight: 900; text-align: center; } #body #service h2 a { color: #b53f45; } #body #service h2 a:hover { color: #e55e5e; } #body #service ul { padding-top: 50px; padding-bottom: 50px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; } #body #service ul li { padding: 10px; text-align: center; } #body #service ul li picture { width: 150px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; background: #b53f45; margin-bottom: 20px; } #body #service ul li span { color: #333; } #body #service ul li span:hover { color: #b53f45; } #body #knowledge { padding-top: 50px; padding-bottom: 50px; } #body #knowledge h2 { font-size: 200%; font-weight: 900; text-align: center; } #body #knowledge h2 a { color: #b53f45; } #body #knowledge h2 a:hover { color: #e55e5e; } #body #knowledge .data_list { padding-top: 50px; padding-bottom: 50px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: stretch; } #body #knowledge .data_list .box { width: calc((100% - 40px) / 3); margin: 0 10px 20px 10px; display: flex; flex-direction: column; } #body #knowledge .data_list .box:nth-child(3n) { margin-right: 0px; } #body #knowledge .data_list .box:nth-child(3n + 1) { margin-left: 0px; } #body #knowledge .data_list .box h3 { margin-bottom: 10px; } #body #knowledge .data_list .box h3 a { color: #333; font-size: 120%; line-height: 150%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } #body #knowledge .data_list .box h3 a:hover { color: #e55e5e; } #body #knowledge .data_list .box p { line-height: 150%; color: #999; padding: 10px 0; flex: 1; } #body #knowledge .data_list .box .foot { font-size: 95%; border-bottom: 1px solid #f1f1f1; padding-bottom: 10px; } #body #knowledge .data_list .box .foot time { color: #ccc; } #body #knowledge .data_list .box .foot span { float: right; color: #b53f45; } @media (max-width: 600px) { #body #knowledge .data_list .box { width: calc((100% - 20px) / 2); } #body #knowledge .data_list .box:nth-child(3n) { margin-right: 10px; } #body #knowledge .data_list .box:nth-child(3n + 1) { margin-left: 10px; } #body #knowledge .data_list .box:nth-child(2n) { margin-right: 0; } #body #knowledge .data_list .box:nth-child(2n + 1) { margin-left: 0; } }