@charset "UTF-8"; /* * CSS Document * ========================================================================== * 版權所有 2019 鉅潞科技網頁設計公司，並保留所有權利。 * 網站地址: http://www.grnet.com.tw * ========================================================================== * $Author: 大美女 $ * $Date: 2019-04-29 (一) $ */ @font-face { font-family: 'Roboto'; src: url("../fonts/Roboto-Regular.woff2") format("woff2"), url("../fonts/Roboto-Regular.woff") format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: 'Roboto'; src: url("../fonts/Roboto-Thin.woff2") format("woff2"), url("../fonts/Roboto-Thin.woff") format("woff"); font-weight: 100; font-style: normal; } @font-face { font-family: 'Roboto'; src: url("../fonts/Roboto-Light.woff2") format("woff2"), url("../fonts/Roboto-Light.woff") format("woff"); font-weight: 300; font-style: normal; } @font-face { font-family: 'Roboto'; src: url("../fonts/Roboto-Bold.woff2") format("woff2"), url("../fonts/Roboto-Bold.woff") format("woff"); font-weight: 700; font-style: normal; } /*reset*/ html { font-size: 16px; } body { width: 100%; color: #222; font-size: 1rem; line-height: 1.7; font-family: 'Roboto', 'Microsoft JhengHei', sans-serif; overflow-x: hidden; -webkit-text-size-adjust: none; -webkit-font-smoothing: antialiased; -ms-overflow-style: scrollbar; } html, body { margin: 0; } a, a:visited, a:hover, a:focus, a:active { text-decoration: none; outline: none; } *:focus, *:active { outline: 0; } h1, h2, h3, h4, h5, h6 { font-weight: normal; line-height: 1.7; } label { font-weight: inherit; } input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; outline: 0; } textarea { resize: vertical; } ol.reset, ul.reset { margin: 0; padding: 0; list-style: none; } input, button, textarea, select { *font-size: 100%; } code, kbd, samp, tt { font-size: 100%; } *, *:after, *::before { -webkit-box-sizing: border-box; box-sizing: border-box; } /*scroll-view*/ .scroll-fade { opacity: 0; -webkit-transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, -o-transform 0.8s; transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s, -webkit-transform 0.8s; } .scroll-fade.scroll-view { opacity: 1; } .scroll-fade-down { -webkit-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); opacity: 0; -webkit-transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, -o-transform 0.8s; transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s, -webkit-transform 0.8s; } .scroll-fade-down.scroll-view { opacity: 1; } .scroll-fade-down.scroll-view { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } .scroll-fade-up { -webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); opacity: 0; -webkit-transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, -o-transform 0.8s; transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s, -webkit-transform 0.8s; } .scroll-fade-up.scroll-view { opacity: 1; } .scroll-fade-up.scroll-view { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } .scroll-fade-left { -webkit-transform: translateX(-50px); -ms-transform: translateX(-50px); transform: translateX(-50px); opacity: 0; -webkit-transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, -o-transform 0.8s; transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s, -webkit-transform 0.8s; } .scroll-fade-left.scroll-view { opacity: 1; } .scroll-fade-left.scroll-view { -webkit-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); } .scroll-fade-right { -webkit-transform: translateX(50px); -ms-transform: translateX(50px); transform: translateX(50px); opacity: 0; -webkit-transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, -o-transform 0.8s; transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s, -webkit-transform 0.8s; } .scroll-fade-right.scroll-view { opacity: 1; } .scroll-fade-right.scroll-view { -webkit-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); } .scroll-scale-in { -webkit-transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); opacity: 0; -webkit-transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, -o-transform 0.8s; transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s, -webkit-transform 0.8s; } .scroll-scale-in.scroll-view { opacity: 1; } .scroll-scale-in.scroll-view { -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } .svg-defs { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; pointer-events: none; } @media only screen and (max-width:991px) { .svg-defs { display: none; } } /*header*/ #header { background-color: #f1f1f1; position: relative; z-index: 999; } #header .logo { float: left; width: 300px; margin: 20px 0 0; } #header .options { float: right; margin-top: 65px; } #header .options .btn-nav { font-size: 1.5rem; color: #d6151a; width: 50px; height: 40px; text-align: center; display: inline-block; } #header .options .btn-lang { display: inline-block; position: relative; } #header .options .btn-lang .lang-box { position: absolute; top: 100%; left: 50%; background-color: #fff; width: auto; white-space: nowrap; font-size: 0; z-index: 2; opacity: 0; -webkit-filter: drop-shadow(0px 0px 4px #ccc); filter: drop-shadow(0px 0px 4px #ccc); -webkit-transform: translateX(-50%) scale(0); -ms-transform: translateX(-50%) scale(0); transform: translateX(-50%) scale(0); -webkit-transition: opacity 0.25s, -webkit-transform 0s 0.25s; transition: opacity 0.25s, -webkit-transform 0s 0.25s; -o-transition: opacity 0.25s, transform 0s 0.25s; transition: opacity 0.25s, transform 0s 0.25s; transition: opacity 0.25s, transform 0s 0.25s, -webkit-transform 0s 0.25s; } #header .options .btn-lang .lang-box:before { content: ""; position: absolute; top: 0; left: 50%; margin-top: -5px; margin-left: -5px; border-style: solid; border-width: 0 5px 5px 5px; border-color: transparent transparent #fff transparent; } #header .options .btn-lang .lang-box li { display: inline-block; vertical-align: middle; padding: 0; margin: 0; position: relative; } #header .options .btn-lang .lang-box li:after { content: ""; position: absolute; top: 50%; margin-top: -6px; height: 11px; width: 1px; border-left: 1px dotted #aaa; } #header .options .btn-lang .lang-box li:first-child:after { display: none; } #header .options .btn-lang .lang-box li a { color: #000; font-size: 0.812rem; line-height: 1; padding: 0 5px; width: 30px; height: 28px; line-height: 28px; display: block; text-align: center; } #header .nav-menu { background-color: #2d3539; } #header .nav-menu .container > ul { width: calc(100% - 300px); } @media only screen and (min-width:992px) { #header .options .btn-nav:hover { color: #900e12; } #header .options .btn-lang .lang-box li:hover a { color: #d6151a; } #header .options .btn-lang:hover .lang-box { opacity: 1; -webkit-transform: translateX(-50%) scale(1); -ms-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); -webkit-transition: opacity 0.35s, -webkit-transform 0s; transition: opacity 0.35s, -webkit-transform 0s; -o-transition: opacity 0.35s, transform 0s; transition: opacity 0.35s, transform 0s; transition: opacity 0.35s, transform 0s, -webkit-transform 0s; } #header .switch { display: none; } #header .nav-menu { background-color: #2d3539; margin-top: 20px; } #header .nav-menu .container > ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; float: right; } #header .nav-menu .container > ul > li { display: inline-block; vertical-align: middle; position: relative; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-top: -5px; } #header .nav-menu .container > ul > li:first-child > a { border-left: 1px solid #ab1115; } #header .nav-menu .container > ul > li:first-child:before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 5px 5px; border-color: transparent transparent #900e12 transparent; margin-left: -5px; } #header .nav-menu .container > ul > li:last-child:before { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 5px 0 0 5px; border-color: transparent transparent transparent #900e12; margin-right: -5px; } #header .nav-menu .container > ul > li > a { display: block; text-align: center; background-color: #d6151a; padding: 15px; color: #fff; font-size: 1.125rem; border-right: 1px solid #ab1115; position: relative; } #header .nav-menu .container > ul > li > a > * { position: relative; z-index: 2; } #header .nav-menu .container > ul > li > a:before { content: ""; position: absolute; z-index: 0; background-color: #000; opacity: 0; width: 100%; height: 100%; display: block; left: 0; top: 0; -webkit-transition: opacity 0.35s; -o-transition: opacity 0.35s; transition: opacity 0.35s; } #header .nav-menu .container > ul > li ul { position: absolute; min-width: 100%; left: 0; top: 100%; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); opacity: 0; display: block; -webkit-transition: opacity 0.35s, -webkit-transform 0s 0.35s; transition: opacity 0.35s, -webkit-transform 0s 0.35s; -o-transition: opacity 0.35s, transform 0s 0.35s; transition: opacity 0.35s, transform 0s 0.35s; transition: opacity 0.35s, transform 0s 0.35s, -webkit-transform 0s 0.35s; } #header .nav-menu .container > ul > li ul li { display: block; margin: 0; background-color: rgba(181, 13, 17, 0.95); } #header .nav-menu .container > ul > li ul li a { color: #fff; display: block; text-align: center; font-size: 1.06rem; padding: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.3); } #header .nav-menu .container > ul > li ul li:hover a { background-color: rgba(0, 0, 0, 0.1); } #header .nav-menu .container > ul > li.current a:before { opacity: 0.2 !important; } #header .nav-menu .container > ul > li:hover a:before { opacity: 0.1; } #header .nav-menu .container > ul > li:hover ul { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; -webkit-transition: opacity 0.35s, -webkit-transform 0s; transition: opacity 0.35s, -webkit-transform 0s; -o-transition: opacity 0.35s, transform 0s; transition: opacity 0.35s, transform 0s; transition: opacity 0.35s, transform 0s, -webkit-transform 0s; } #header .langBox { display: none !important; } } @media only screen and (max-width:1199px) { #header .logo { width: 250px; } #header .nav-menu .container > ul { width: calc(100% - 200px); } } @media only screen and (max-width:991px) { #header { padding-top: 35px; } #header .logo { width: 200px; margin: 10px 0; } #header .options { margin-top: 0px; position: absolute; top: 0; left: 0; width: 100%; font-size: 0; background-color: #d6151a; text-align: right; } #header .options .btn-nav { color: #fff; font-size: 1rem; width: 40px; height: 35px; border-left: 1px solid rgba(255, 255, 255, 0.5); } #header .options .btn-nav i { line-height: 35px; } #header .switch { background: #d6151a; border: none; color: #fff; width: 40px; height: 40px; float: right; margin-top: 25px; position: relative; vertical-align: bottom; } #header .switch .icon { position: absolute; top: 50%; left: 50%; margin-left: -13px; margin-top: -13px; width: 26px; height: 26px; display: inline-block; } #header .switch .icon i { display: block; width: 100%; height: 2px; background: #fff; position: absolute; left: 50%; top: 50%; margin-left: -13px; -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; -o-transition: transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; } #header .switch .icon .linetop { margin-top: -7px; } #header .switch .icon .linebottom { margin-top: 7px; } #header .switch.on .icon .linetop { margin-top: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } #header .switch.on .icon .linemiddle { width: 0; } #header .switch.on .icon .linebottom { margin-top: 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } #header .nav-menu { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); position: absolute; top: 100%; left: 0; width: 100%; } #header .nav-menu.open-menu { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } #header .nav-menu .container { width: 100%; padding: 0; } #header .nav-menu .container > ul { width: 100%; float: none; display: block; } #header .nav-menu .container > ul > li { display: block; } #header .nav-menu .container > ul > li > a { display: block; padding: 15px; color: #fff; font-size: 1rem; border-bottom: 1px solid #666; position: relative; } #header .nav-menu .container > ul > li > a i { position: absolute; display: block; width: 8px; height: 8px; border-top: 1px solid #fff; border-right: 1px solid #fff; right: 20px; top: 50%; margin-top: -6px; opacity: 0.85; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } #header .nav-menu .container > ul > li > a.on { background-color: #d6151a; border-bottom: none; } #header .nav-menu .container > ul > li > a.on i { -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); } #header .nav-menu .container > ul > li ul { display: none; } #header .nav-menu .container > ul > li ul li { display: block; margin: 0; } #header .nav-menu .container > ul > li ul li a { color: #000; display: block; font-size: 1rem; padding: 10px 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); background-color: #fff; } #header .langBox { position: fixed; z-index: 1000; background-color: rgba(0, 0, 0, 0.85); top: 0; left: 0; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-perspective: 1000; perspective: 1000; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0s 0.35s; transition: opacity 0.35s, -webkit-transform 0s 0.35s; -o-transition: transform 0s 0.35s, opacity 0.35s; transition: transform 0s 0.35s, opacity 0.35s; transition: transform 0s 0.35s, opacity 0.35s, -webkit-transform 0s 0.35s; } #header .langBox .langClose { position: absolute; top: 50%; right: 50%; margin: -70px -110px 0 0; border: none; border-radius: 50%; background: #d6151a; width: 40px; height: 40px; font-size: 0; z-index: 2; opacity: 0; } #header .langBox .langClose:before, #header .langBox .langClose:after { content: ""; width: 50%; height: 1px; background-color: #fff; display: block; position: absolute; top: 50%; left: 50%; margin-left: -25%; } #header .langBox .langClose:before { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } #header .langBox .langClose:after { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } #header .langBox ul { width: 180px; -webkit-transform: translate(0, -30px) rotateX(40deg); transform: translate(0, -30px) rotateX(40deg); opacity: 0; -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; transform-origin: 0% 0%; } #header .langBox ul li { background-color: #fff; text-align: center; } #header .langBox ul li a { display: block; padding: 10px; color: #000; border-bottom: 1px solid #eee; font-size: 0; } #header .langBox ul li a:before { content: attr(title); font-size: 1rem; } #header .langBox.shown { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: opacity 0s, -webkit-transform 0s; transition: opacity 0s, -webkit-transform 0s; -o-transition: transform 0s, opacity 0s; transition: transform 0s, opacity 0s; transition: transform 0s, opacity 0s, -webkit-transform 0s; } #header .langBox.shown .langClose { opacity: 1; -webkit-transition: opacity 0.5s 0.125s; -o-transition: opacity 0.5s 0.125s; transition: opacity 0.5s 0.125s; } #header .langBox.shown ul { opacity: 1; -webkit-transform: translate(0, 0) rotateX(0deg); transform: translate(0, 0) rotateX(0deg); -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, -webkit-transform 0.5s; -o-transition: transform 0.5s, opacity 0.5s; transition: transform 0.5s, opacity 0.5s; transition: transform 0.5s, opacity 0.5s, -webkit-transform 0.5s; } } @media only screen and (max-width:767px) { #header .logo { width: 160px; } #header .switch { margin-top: 15px; } } /*footer*/ #footer { background-color: #363f45; } #footer .f-logo { width: 210px; float: left; margin-top: 20px; } #footer .f-content { width: calc(100% - 210px); float: right; padding: 30px 0 30px 50px; } #footer .f-content .f-menu { font-size: 0; margin-bottom: 10px; } #footer .f-content .f-menu li { display: inline-block; } #footer .f-content .f-menu li:after { content: ""; display: inline-block; vertical-align: middle; width: 1px; height: 15px; background-color: #fff; opacity: 0.5; margin: 0 20px; } #footer .f-content .f-menu li:last-child:after { display: none; } #footer .f-content .f-menu li a { color: #fff; font-size: 1rem; display: inline-block; vertical-align: middle; } #footer .f-content .infos { font-size: 0; opacity: 0.5; } #footer .f-content .infos li { display: inline-block; font-size: 1rem; color: #fff; margin-right: 20px; } #footer .f-content .infos li a { color: #fff; } #footer .f-content .infos li:last-child { margin-right: 0px; } #footer .f-content .copyright { color: #fff; opacity: 0.5; } #footer .f-content .copyright a { color: #fff; } @media only screen and (max-width:1199px) { #footer .f-logo { width: 210px; float: none; margin: 20px auto; } #footer .f-content { width: 100%; float: none; padding: 0; margin-bottom: 20px; text-align: center; font-size: 0.875rem; } #footer .f-content .f-menu li a { font-size: 0.875rem; } #footer .f-content .infos li { font-size: 0.875rem; } #footer .f-content .infos li:first-child { display: block; } #footer .f-content .copyright { margin-top: 5px; } } @media only screen and (max-width:991px) { #footer .f-content .f-menu li { padding: 3px; } #footer .f-content .f-menu li:after { display: none; } #footer .f-content .f-menu li a { padding: 4px 10px; border: 1px solid rgba(255, 255, 255, 0.15); } } /*other gobal*/ .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background: #000; display: block; z-index: 998; -webkit-transition: opacity 0.4s; -o-transition: opacity 0.4s; transition: opacity 0.4s; pointer-events: none; } .overlay.in { pointer-events: fill; opacity: 0.8; } @media only screen and (min-width:992px) { .overlay { display: none; } } .page-wrap { overflow: hidden; } .img-preset { opacity: 0; -webkit-transition: opacity 0.5s; -o-transition: opacity 0.5s; transition: opacity 0.5s; } .img-is-loaded { opacity: 1; -webkit-transition: opacity 0.5s; -o-transition: opacity 0.5s; transition: opacity 0.5s; } .go-top { position: fixed; bottom: 100px; right: 50px; background: none; border: none; z-index: 990; width: 50px; cursor: default; } .go-top .text { display: block; -webkit-transform: rotate(-90deg) translateY(-50%); -ms-transform: rotate(-90deg) translateY(-50%); transform: rotate(-90deg) translateY(-50%); -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; color: #fff; text-shadow: 0 0 3px #666; position: absolute; top: 0; left: 50%; font-size: 1rem; -webkit-transition: top 0.5s; -o-transition: top 0.5s; transition: top 0.5s; } .go-top .text:before { content: "TOP"; color: #666; font-size: 0; visibility: hidden; text-shadow: none; -webkit-transition: visibility 0.5s; -o-transition: visibility 0.5s; transition: visibility 0.5s; } .go-top i { display: block; margin: 10px auto; width: 1px; height: 100px; background-color: #aaa; -webkit-animation: drewline 1.5s 0.00001s ease infinite; animation: drewline 1.5s 0.00001s ease infinite; } .go-top.scroll-view { cursor: pointer; } .go-top.scroll-view .text { font-size: 0; top: calc(100% + 30px); } .go-top.scroll-view .text:before { font-size: 1rem; visibility: visible; } @media only screen and (max-width:991px) { .go-top { right: 20px; bottom: 50px; } .go-top .text { color: #666; } } @media only screen and (max-width:767px) { .go-top { right: 0px; } .go-top i { height: 50px; } } .container-1600 { padding: 0 15px; } @media only screen and (min-width:1480px) { .container-1600 { width: 1460px; } } @media only screen and (min-width:1600px) { .container-1600 { width: 1600px; } } .container-1460 { padding: 0 15px; } @media only screen and (min-width:1480px) { .container-1460 { width: 1460px; } } .container-1300 { padding: 0 20px; } @media only screen and (min-width:1480px) { .container-1300 { width: 1300px; } } .no-data { min-height: 200px; margin: 20px 0; text-align: center; background: #fff; } .no-data .text { padding: 100px 0; } .no-data .red { color: #d6151a; } .no-data .buttons { text-align: center; margin-top: 30px; } .g-title { margin: 0; color: #000; font-size: 2.5rem; padding-left: 60px; position: relative; font-weight: 700; font-style: italic; } .g-title:before { content: ""; width: 50px; height: 2px; background-color: #d6151a; display: block; position: absolute; left: 0; top: 50%; margin-top: -1px; } @media only screen and (max-width:767px) { .g-title { font-size: 1.875rem; } } .g-button { border: none; border-radius: 30px; position: relative; overflow: hidden; display: inline-block; vertical-align: middle; padding: 8px; min-width: 150px; text-align: center; } .g-button span { color: #fff; position: relative; z-index: 2; font-size: 0.875rem; letter-spacing: 1px; } .g-button.style-red { background: #d6151a; } @media only screen and (min-width:992px) { .g-button { -webkit-transition: -webkit-box-shadow 0.35s; transition: -webkit-box-shadow 0.35s; -o-transition: box-shadow 0.35s; transition: box-shadow 0.35s; transition: box-shadow 0.35s, -webkit-box-shadow 0.35s; } .g-button:hover { -webkit-box-shadow: inset 3px 3px 3px rgba(0, 0, 0, 0.15); box-shadow: inset 3px 3px 3px rgba(0, 0, 0, 0.15); } .g-button:hover:before { left: 25%; } .g-button.style-red:hover { background: #c81418; } } @media only screen and (min-width:992px) { .hover-style { position: relative; } .hover-style i { font-style: normal; position: absolute; left: 50%; top: 50%; z-index: 1; width: 60px; height: 60px; display: block; text-align: center; line-height: 60px; font-size: 1.875rem; margin: -30px 0 0 -30px; border: 1px solid rgba(255, 255, 255, 0.5); color: #fff; -webkit-transform: scale(0) rotate(90deg); -ms-transform: scale(0) rotate(90deg); transform: scale(0) rotate(90deg); -webkit-transition: color 0.5s, -webkit-transform 0.35s, -webkit-box-shadow 0.4s; transition: color 0.5s, -webkit-transform 0.35s, -webkit-box-shadow 0.4s; -o-transition: transform 0.35s, box-shadow 0.4s, color 0.5s; transition: transform 0.35s, box-shadow 0.4s, color 0.5s; transition: transform 0.35s, box-shadow 0.4s, color 0.5s, -webkit-transform 0.35s, -webkit-box-shadow 0.4s; } .hover-style i:hover { -webkit-box-shadow: inset 0 0 0 50px rgba(255, 255, 255, 0.9); box-shadow: inset 0 0 0 50px rgba(255, 255, 255, 0.9); color: #000; } .hover-style img { -webkit-transition: opacity 0.35s; -o-transition: opacity 0.35s; transition: opacity 0.35s; } .hover-style:hover i { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .hover-style:hover img { opacity: 0.8; } } @media only screen and (max-width:991px) { .hover-style i { display: none; } } .text-edit { line-height: 2; } .text-edit img { height: auto !important; max-width: 100%; } .p-pager { text-align: center; margin: 40px 0 0; font-size: 0; } .p-pager .numbers { display: inline-block; vertical-align: middle; } .p-pager .numbers li { display: inline-block; vertical-align: middle; } .p-pager .numbers li a { width: 35px; height: 35px; line-height: 35px; background: transparent; border: 1px solid #ddd; margin: 0 5px; color: #000; border-radius: 50%; text-align: center; display: block; font-size: 1rem; } .p-pager .numbers li.current a { background: #d6151a !important; border-color: #d6151a !important; color: #fff !important; } .p-pager button.prev, .p-pager button.next { background: transparent; border: none; color: #000; text-align: center; display: inline-block; vertical-align: middle; font-size: 0; } .p-pager button.prev i, .p-pager button.next i { font-size: 1.25rem; } .p-pager button.prev { margin-right: 5px; } .p-pager button.prev:before { border-width: 5px 10px 5px 0; margin-left: 10px; left: 0%; border-color: transparent #fff transparent transparent; } .p-pager button.prev:after { content: "PREV"; } .p-pager button.next { margin-left: 5px; } .p-pager button.next:before { border-width: 5px 0 5px 10px; border-color: transparent transparent transparent #fff; margin-left: -20px; left: 100%; } .p-pager button.next:after { content: "NEXT"; } @media only screen and (min-width:992px) { .p-pager .numbers li:hover a { background: #fff; } } @media only screen and (max-width:991px) { .p-pager button.prev { float: left; } .p-pager button.next { float: right; } } @-webkit-keyframes drewline { 0% { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: center bottom; transform-origin: center bottom; } 50% { -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: center bottom; transform-origin: center bottom; } 51% { -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: center top; transform-origin: center top; } 100% { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: center top; transform-origin: center top; } } @keyframes drewline { 0% { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: center bottom; transform-origin: center bottom; } 50% { -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: center bottom; transform-origin: center bottom; } 51% { -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: center top; transform-origin: center top; } 100% { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: center top; transform-origin: center top; } } @-webkit-keyframes drewline2 { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: right center; transform-origin: right center; } 50% { -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: right center; transform-origin: right center; } 51% { -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left center; transform-origin: left center; } 100% { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: left center; transform-origin: left center; } } @keyframes drewline2 { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: right center; transform-origin: right center; } 50% { -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: right center; transform-origin: right center; } 51% { -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left center; transform-origin: left center; } 100% { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: left center; transform-origin: left center; } } /*index*/ #index .banner { position: relative; overflow: hidden; z-index: 2; } #index .banner .banner-slick .item { position: relative; } #index .banner .banner-slick .item .cover { position: absolute; text-align: center; top: 60%; left: 50%; width: 100%; opacity: 0; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); pointer-events: none; } #index .banner .banner-slick .item .cover p { margin: 0; } #index .banner .banner-slick .item .cover .txt1 { font-size: 4.375rem; line-height: 1.3; color: #fff; font-weight: bold; font-style: italic; text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1); } #index .banner .banner-slick .item .cover .txt2 { font-size: 1.25rem; line-height: 1.3; color: #d6151a; text-shadow: 1px 1px 0 #000; max-width: 550px; margin: auto; } #index .banner .banner-slick .item.view .cover { top: 50%; opacity: 1; -webkit-transition: top 1s, opacity 1s; -o-transition: top 1s, opacity 1s; transition: top 1s, opacity 1s; } @media only screen and (max-width:1199px) { #index .banner .banner-slick .item .cover .txt1 { font-size: 3.125rem; } #index .banner .banner-slick .item .cover .txt2 { font-size: 1.125rem; } } @media only screen and (max-width:767px) { #index .banner .banner-slick .item .cover { padding: 20px 20px 50px; position: static; -webkit-transform: none; -ms-transform: none; transform: none; background-color: #2d3539; opacity: 1; } #index .banner .banner-slick .item .cover .txt1 { font-size: 1.875rem; } #index .banner .banner-slick .item .cover .txt2 { font-size: 1rem; } } #index .sec-about { padding: 100px 0; position: relative; z-index: 1; } #index .sec-about:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.1; background: url(../images/bg-shape.svg) no-repeat left center #f6f6f6; background-size: auto 100%; z-index: -1; } #index .sec-about #about-bg { position: absolute; z-index: -1; left: 0; top: 0; height: 100%; opacity: 0.1; pointer-events: none; } #index .sec-about .pic { float: left; width: 60%; position: relative; z-index: 2; } #index .sec-about .pic:before { content: ""; position: absolute; z-index: -1; right: 0; top: 30%; background-color: #d6151a; width: 100%; height: 60%; display: block; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transition: -webkit-transform 1s; transition: -webkit-transform 1s; -o-transition: transform 1s; transition: transform 1s; transition: transform 1s, -webkit-transform 1s; } #index .sec-about .pic img { max-width: 90%; position: relative; z-index: 2; } #index .sec-about .pic.scroll-view:before { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } #index .sec-about .content { float: right; width: 40%; padding-left: 80px; } #index .sec-about .content .g-title { font-size: 3.75rem; } #index .sec-about .content .text-edit { padding-left: 60px; color: #555; } #index .sec-about .content .readmore { border: 1px solid #d6151a; margin-left: 60px; margin-top: 30px; color: #000; padding: 15px; width: 200px; display: block; text-align: center; overflow: hidden; position: relative; } #index .sec-about .content .readmore:before { content: ""; position: absolute; left: 0; top: 0; width: 0; height: 100%; z-index: -1; background-color: #d6151a; -webkit-transform: skew(-20deg); -ms-transform: skew(-20deg); transform: skew(-20deg); -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transition: width 0.8s, -webkit-transform 0.55s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.25s; transition: width 0.8s, -webkit-transform 0.55s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.25s; -o-transition: width 0.8s, transform 0.55s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.25s; transition: width 0.8s, transform 0.55s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.25s; transition: width 0.8s, transform 0.55s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.25s, -webkit-transform 0.55s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.25s; } #index .sec-about .content .readmore i { display: inline-block; vertical-align: middle; position: relative; width: 10px; height: 10px; margin-top: -1px; margin-left: 15px; } #index .sec-about .content .readmore i:before, #index .sec-about .content .readmore i:after { content: ""; width: 1px; height: 11px; background-color: #000; display: block; position: absolute; } #index .sec-about .content .readmore i:after { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } @media only screen and (min-width:992px) { #index .sec-about .content .readmore:hover { color: #fff; } #index .sec-about .content .readmore:hover:before { width: 100%; -webkit-transform: skew(0); -ms-transform: skew(0); transform: skew(0); } #index .sec-about .content .readmore:hover i:before, #index .sec-about .content .readmore:hover i:after { background-color: #fff; } } @media only screen and (max-width:1599px) { #index .sec-about .pic { width: 50%; padding: 0; } #index .sec-about .content { width: 50%; } #index .sec-about .content .g-title { font-size: 3.125rem; } } @media only screen and (max-width:1199px) { #index .sec-about .content { width: 50%; padding: 0; } #index .sec-about .content .g-title { font-size: 2.8125rem; } #index .sec-about .content .g-title:before { width: 100px; left: -50px; } } @media only screen and (max-width:991px) { #index .sec-about { padding: 60px 0; } #index .sec-about .pic { width: 100%; } #index .sec-about .content { width: 100%; margin-top: 30px; } #index .sec-about .content .g-title:before { width: 50px; left: 0px; } #index .sec-about .content .text-edit { padding-left: 0px; } #index .sec-about .content .readmore { margin-left: 0px; } } @media only screen and (max-width:767px) { #index .sec-about .content .g-title { font-size: 2.1875rem; } } #index .sec-news { position: relative; padding: 80px 0; } #index .sec-news:before { content: ""; position: absolute; width: 100%; height: 50%; left: 0; top: 0; background-color: #d6151a; z-index: -1; } #index .sec-news .g-title { color: #fff; } #index .sec-news .g-title:before { background-color: #fff; } #index .sec-news .txt { color: #fff; font-size: 1rem; } #index .sec-news .news-slick { margin: 0 -10px; margin-top: 40px; } #index .sec-news .news-slick .slick-list { overflow: visible; } #index .sec-news .news-slick .slick-list .slick-slide.temp .item:before, #index .sec-news .news-slick .slick-list .slick-slide.slick-active .item:before { opacity: 0; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: opacity 0.35s, -webkit-transform 0s 0.35s; transition: opacity 0.35s, -webkit-transform 0s 0.35s; -o-transition: opacity 0.35s, transform 0s 0.35s; transition: opacity 0.35s, transform 0s 0.35s; transition: opacity 0.35s, transform 0s 0.35s, -webkit-transform 0s 0.35s; } #index .sec-news .news-slick .item { padding: 0 10px; position: relative; } #index .sec-news .news-slick .item:before { content: ""; position: absolute; top: 0; left: 10px; width: calc(100% - 20px); height: 100%; background-color: #fff; opacity: 0.8; z-index: 10; -webkit-transition: opacity 0.35s, -webkit-transform 0s; transition: opacity 0.35s, -webkit-transform 0s; -o-transition: opacity 0.35s, transform 0s; transition: opacity 0.35s, transform 0s; transition: opacity 0.35s, transform 0s, -webkit-transform 0s; } #index .sec-news .news-slick .item .pic { background-color: #000; } #index .sec-news .news-slick .item .content { padding: 20px 0; } #index .sec-news .news-slick .item .content .date { font-size: 0.875rem; color: #666; margin: 0; } #index .sec-news .news-slick .item .content .tit { font-size: 1.125rem; margin: 0; color: #000; } @media only screen and (max-width:991px) { #index .sec-news { padding: 60px 0; } #index .sec-news .news-slick .item .content .tit { line-height: 1.5; } } #index .sec-products { padding: 80px 0; } #index .sec-products .item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 50px 0; } #index .sec-products .item.style1 .pic:before { content: ""; z-index: -1; background-color: #f6f6f6; bottom: -20px; left: -500px; right: 170px; top: 30%; position: absolute; display: block; } #index .sec-products .item.style2 .pic:before { content: ""; z-index: -1; background-color: #f6f6f6; bottom: 30%; left: 80px; right: -100px; top: -60px; position: absolute; display: block; } #index .sec-products .item a { display: block; } #index .sec-products .item .pic { width: 60%; position: relative; z-index: 2; } #index .sec-products .item .pic .bg { position: absolute; display: block; z-index: -1; width: 100%; height: 90%; top: 0; left: 0; background-color: #000; } #index .sec-products .item .content { width: 40%; padding: 58px; text-align: center; position: relative; z-index: 2; } #index .sec-products .item .content .tit { font-size: 3.125rem; line-height: 1.5; margin: 0 0 10px 0; color: #000; font-weight: 700; } #index .sec-products .item .content .description { color: #666; } #index .sec-products .item .content .view { margin: 30px auto 0; position: relative; width: 60px; height: 60px; display: block; z-index: 1; } #index .sec-products .item .content .view i { width: 100%; height: 100%; background-color: #fff; border: 1px solid #d6151a; display: block; } #index .sec-products .item .content .view i:before, #index .sec-products .item .content .view i:after { content: ""; position: absolute; top: 50%; left: 50%; height: 13px; width: 1px; margin-top: -6px; background-color: #000; display: block; } #index .sec-products .item .content .view i:after { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } #index .sec-products .item:nth-child(even) { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } @media only screen and (min-width:992px) { #index .sec-products .item .content .tit { -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; -o-transition: transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; } #index .sec-products .item .content:hover .tit { -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } #index .sec-products .item .content .view:before { content: ""; background-color: #d6151a; opacity: 0.3; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; } #index .sec-products .item .content .view:hover { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; -o-transition: transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; } #index .sec-products .item .content .view:hover i { background-color: #d6151a; -webkit-transition: background-color 0.25s; -o-transition: background-color 0.25s; transition: background-color 0.25s; } #index .sec-products .item .content .view:hover i:before, #index .sec-products .item .content .view:hover i:after { background-color: #fff; } #index .sec-products .item .content .view:hover:before { -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); opacity: 0; -webkit-transition: opacity 0.25s 0.25s, -webkit-transform 0.25s 0.25s; transition: opacity 0.25s 0.25s, -webkit-transform 0.25s 0.25s; -o-transition: transform 0.25s 0.25s, opacity 0.25s 0.25s; transition: transform 0.25s 0.25s, opacity 0.25s 0.25s; transition: transform 0.25s 0.25s, opacity 0.25s 0.25s, -webkit-transform 0.25s 0.25s; } } @media only screen and (max-width:1199px) { #index .sec-products .item .content { padding: 0 40px; } #index .sec-products .item .content .tit { font-size: 1.875rem; } } @media only screen and (max-width:991px) { #index .sec-products { padding: 0 0 30px 0; } #index .sec-products .item { padding: 30px 0; display: block; } #index .sec-products .item .pic { width: 100%; } #index .sec-products .item .content { width: 100%; padding: 20px 0; } } @media only screen and (max-width:767px) { #index .sec-products .item .content .tit { font-size: 1.625rem; } } /*product*/ #product .product-slick { padding: 80px 0; } #product .product-slick .item { opacity: 0.8; -webkit-transform: scale(0.7, 0.7); -ms-transform: scale(0.7, 0.7); transform: scale(0.7, 0.7); -webkit-transition: ease 0.3s; -o-transition: ease 0.3s; transition: ease 0.3s; position: relative; } #product .product-slick .item:before { content: ""; position: absolute; z-index: 100; top: -20px; left: -20px; right: -20px; bottom: -20px; } #product .product-slick .item .title { color: #000; opacity: 0; } #product .product-slick .item .title .tit { margin: 0; font-weight: 300; font-size: 3.125rem; line-height: 1.3; -webkit-transition: letter-spacing 0.35s; -o-transition: letter-spacing 0.35s; transition: letter-spacing 0.35s; } #product .product-slick .item .title .type { margin: 0; font-weight: 700; font-size: 3.75rem; line-height: 1; } #product .product-slick .item .title .type:before { content: ""; width: 40px; height: 2px; margin: 0 10px 10px 0; background-color: #d6151a; display: inline-block; vertical-align: bottom; } #product .product-slick .item .pic { position: relative; } #product .product-slick .item .pic .text { line-height: 0.7; font-size: 45vw; font-weight: bold; display: block; color: #000; opacity: 0; -webkit-transform: skew(-8deg) translateX(50px); -ms-transform: skew(-8deg) translateX(50px); transform: skew(-8deg) translateX(50px); -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; } #product .product-slick .item .pic img { position: absolute; z-index: 2; right: 10%; bottom: 0; width: 80%; } #product .product-slick .slick-slide.slick-current .item, #product .product-slick .slick-slide.view .item { opacity: 1; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } #product .product-slick .slick-slide.slick-current .item:before, #product .product-slick .slick-slide.view .item:before { -webkit-transform: scale(0, 0); -ms-transform: scale(0, 0); transform: scale(0, 0); } #product .product-slick .slick-slide.slick-current .item .title, #product .product-slick .slick-slide.view .item .title { opacity: 1; } #product .product-slick .slick-slide.slick-current .item .pic .text, #product .product-slick .slick-slide.view .item .pic .text { opacity: 0.1; -webkit-transform: skew(-8deg) translateX(0px); -ms-transform: skew(-8deg) translateX(0px); transform: skew(-8deg) translateX(0px); -webkit-transition: opacity 0.5s, -webkit-transform 0.8s; transition: opacity 0.5s, -webkit-transform 0.8s; -o-transition: opacity 0.5s, transform 0.8s; transition: opacity 0.5s, transform 0.8s; transition: opacity 0.5s, transform 0.8s, -webkit-transform 0.8s; } #product .product-slick .slick-slide.slick-current .item .pic img, #product .product-slick .slick-slide.view .item .pic img { width: 88%; right: 0; } #product .product-slick .slick-list { overflow: visible; } @media only screen and (min-width:992px) { #product .product-slick .item:hover .title .tit { letter-spacing: 1px; } #product .product-slick .item:hover .title .type:before { -webkit-animation: drewline2 1.3s 0.00001s ease infinite; animation: drewline2 1.3s 0.00001s ease infinite; } } @media only screen and (max-width:1440px) { #product .product-slick .item .title .tit { white-space: nowrap; font-size: 2.5rem; } #product .product-slick .item .title .type { font-size: 3.125rem; } } @media only screen and (max-width:991px) { #product .product-slick { padding: 40px 0; font-size: 0; } #product .product-slick .item { opacity: 1; padding: 40px; display: inline-block; vertical-align: top; width: 50%; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } #product .product-slick .item:before { -webkit-transform: scale(0, 0); -ms-transform: scale(0, 0); transform: scale(0, 0); } #product .product-slick .item .title { opacity: 1; margin-bottom: 20px; } #product .product-slick .item .title .tit { font-size: 1.875rem; white-space: normal; } #product .product-slick .item .title .type { margin-top: 8px; font-size: 2.5rem; } #product .product-slick .item .pic .text { opacity: 0.1; -webkit-transform: skew(-8deg) translateX(0px); -ms-transform: skew(-8deg) translateX(0px); transform: skew(-8deg) translateX(0px); -webkit-transition: opacity 0.5s, -webkit-transform 0.8s; transition: opacity 0.5s, -webkit-transform 0.8s; -o-transition: opacity 0.5s, transform 0.8s; transition: opacity 0.5s, transform 0.8s; transition: opacity 0.5s, transform 0.8s, -webkit-transform 0.8s; position: absolute; z-index: -1; top: 0; left: 0; font-size: 50vw; } #product .product-slick .item .pic img { position: static; width: 100%; } #product .product-slick .slick-slide.slick-current .item, #product .product-slick .slick-slide.view .item { -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } #product .product-slick .slick-slide.slick-current .item .pic img, #product .product-slick .slick-slide.view .item .pic img { width: 100%; } } @media only screen and (max-width:480px) { #product .product-slick .item { width: 100%; } #product .product-slick .item .pic .text { font-size: 100vw; } } #product .move { position: relative; } #product .pro-ban { position: relative; width: 100%; height: 100vh; left: 0; } #product .pro-ban:before { content: ""; position: absolute; top: -25%; left: 0; width: 100%; height: 150%; z-index: -1; display: block; background-color: #f9f9f9; } #product .pro-ban .container { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #product .pro-ban .container .block { width: 50%; } @media only screen and (min-width:1480px) { #product .pro-ban .container { width: 1360px; } } @media only screen and (max-width:991px) { #product .pro-ban { height: auto; } #product .pro-ban .container { display: block; } #product .pro-ban .container .block { width: 100%; } } #product .page-main { position: relative; z-index: 2; background: #fff; } #product .sec-cover { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 100; pointer-events: none; } #product .sec-cover .bg { position: absolute; top: -25%; left: 0; width: 100%; height: 150%; z-index: -1; display: block; } #product .sec-cover .content { color: #fff; line-height: 1; margin-top: -150px; text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.05); } #product .sec-cover .content .title { font-size: 4.375rem; font-weight: 300; margin: 0; position: relative; text-shadow: 5px 5px 10px rgba(0, 0, 0, .3); } #product .sec-cover .content .type { font-size: 4.375rem; font-weight: 700; margin: 0 0 30px; text-shadow: 5px 5px 10px rgba(0, 0, 0, .3); } #product .sec-cover .content .type:after { content: ""; display: block; width: 50px; height: 2px; margin-top: 15px; background-color: #d6151a; } #product .sec-cover .content .description { font-size: 1.25rem; font-weight: 300; margin-top: 40px; text-shadow: 1px 1px 1px rgba(0, 0, 0, .6); } #product .sec-cover .pic { position: relative; z-index: 2; } #product .sec-cover .pic .text { font-size: 50vw; color: #fff; opacity: 0.35; font-weight: 700; -webkit-transform: skew(-10deg); -ms-transform: skew(-10deg); transform: skew(-10deg); position: absolute; left: -50px; bottom: 0; line-height: 0.7; z-index: -1; -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; transform-origin: 0% 0%; text-shadow: 5px 5px 10px rgba(0, 0, 0, .3); } @media only screen and (max-width:1479px) { #product .sec-cover .content .title, #product .sec-cover .content .type { font-size: 3.75rem; } #product .sec-cover .pic .text { font-size: 60vw; } } @media only screen and (max-width:1199px) { #product .sec-cover .content .title, #product .sec-cover .content .type { font-size: 3.125rem; } } @media only screen and (max-width:992px) { #product .sec-cover { display: none; } } #product .sec1 { height: 100%; padding: 100px 0; } #product .sec1 .album { position: relative; } #product .sec1 .album .loading-cover { position: absolute; top: 0%; bottom: 0; left: 50%; max-width: 600px; width: 100%; -webkit-transform: translate(-50%, 0%); -ms-transform: translate(-50%, 0%); transform: translate(-50%, 0%); background: url(../images/loading.gif) no-repeat 50% 50% rgba(255, 255, 255, 0.5); background-size: 50px 50px; z-index: 20; display: block; display: none; } #product .sec1 .album .controls { text-align: center; } #product .sec1 .album .controls > * { display: inline-block; vertical-align: middle; } #product .sec1 .album .controls .album-prev, #product .sec1 .album .controls .album-next { background: none; width: 12px; height: 12px; padding: 0; font-size: 0; border: none; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } #product .sec1 .album .controls .album-prev { border-left: 1px solid #aaa; border-bottom: 1px solid #aaa; } #product .sec1 .album .controls .album-next { border-top: 1px solid #aaa; border-right: 1px solid #aaa; } #product .sec1 .album .controls .album-dots { min-width: 150px; } #product .sec1 .album .controls .album-dots ul { padding: 0; margin: 0; } #product .sec1 .album .controls .album-dots ul li { padding: 0 2px; display: inline-block; vertical-align: bottom; } #product .sec1 .album .controls .album-dots ul li button { border: none; width: 2px; height: 7px; padding: 0; background-color: #c9c9c9; font-size: 0; -webkit-transition: height 0.35s, -webkit-transform 0.35s 0.2s; transition: height 0.35s, -webkit-transform 0.35s 0.2s; -o-transition: height 0.35s, transform 0.35s 0.2s; transition: height 0.35s, transform 0.35s 0.2s; transition: height 0.35s, transform 0.35s 0.2s, -webkit-transform 0.35s 0.2s; } #product .sec1 .album .controls .album-dots ul li.slick-active button { background-color: #d6151a; height: 12px; -webkit-transform: translateY(-3px); -ms-transform: translateY(-3px); transform: translateY(-3px); } #product .sec1 .content { padding-left: 150px; } #product .sec1 .content .title { font-size: 3.125rem; font-weight: 300; margin: 0; line-height: 1.2; } #product .sec1 .content .type { font-size: 3.75rem; font-weight: 700; margin: 0; line-height: 1.2; position: relative; padding-left: 50px; } #product .sec1 .content .type:after { content: ""; display: block; position: absolute; left: 0; bottom: 0; width: 40px; height: 2px; margin-bottom: 15px; background-color: #d6151a; } #product .sec1 .content .color-theme { padding: 20px 0; } #product .sec1 .content .color-theme p { color: #999; } #product .sec1 .content .color-theme p .text-underline { color: #000; text-decoration: underline; } #product .sec1 .content .color-theme .color-style { margin: 5px 10px 5px 0; } #product .sec1 .content .color-theme .color-style input { display: none; } #product .sec1 .content .color-theme .color-style input + span { width: 50px; height: 50px; display: block; border-radius: 50%; border: 4px solid #f9f9f9; -webkit-box-shadow: 0 0 0 1px #ddd; box-shadow: 0 0 0 1px #ddd; overflow: hidden; position: relative; -webkit-transition: border 0.25s; -o-transition: border 0.25s; transition: border 0.25s; cursor: pointer; } #product .sec1 .content .color-theme .color-style input + span i { position: absolute; pointer-events: none; top: 50%; left: 50%; color: #fff; z-index: 1; display: block; font-size: 1.25rem; opacity: 0; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: opacity 0.25s; -o-transition: opacity 0.25s; transition: opacity 0.25s; } #product .sec1 .content .color-theme .color-style input:checked + span { border: 0 solid #f9f9f9; } #product .sec1 .content .color-theme .color-style input:checked + span i { opacity: 1; } #product .sec1 .content .description { border-top: 1px solid #d4d4d4; border-bottom: 1px solid #d4d4d4; padding: 20px 0; } #product .sec1 .content .description p { position: relative; padding-left: 15px; font-size: 1rem; margin: 5px 0; color: #666; } #product .sec1 .content .description p:before { content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 2px; margin-top: -1px; background-color: #f0a6ae; } #product .sec1 .content .buttons { font-size: 0; margin: 0 -2px; margin-top: 40px; } #product .sec1 .content .buttons a, #product .sec1 .content .buttons button { display: inline-block; vertical-align: middle; margin: 0 2px; width: calc(50% - 4px); padding: 20px 0px; font-size: 0.812rem; text-align: center; text-transform: uppercase; color: #fff; border: none; background-color: #000; } #product .sec1 .content .buttons .num { width: 20px; height: 20px; display: inline-block; border-radius: 50%; background: rgba(255, 255, 255, 0.2); } #product .sec1 .content .buttons .join { background-color: #d6151a; -webkit-transition: background-color 0.35; -o-transition: background-color 0.35; transition: background-color 0.35; } #product .sec1 .content .buttons .join i { width: 20px; display: inline-block; margin-right: -20px; opacity: 0; -webkit-transition: opacity 0.35s, margin 0.35s; -o-transition: opacity 0.35s, margin 0.35s; transition: opacity 0.35s, margin 0.35s; } #product .sec1 .content .buttons .join.added { background-color: #bf1317; cursor: not-allowed; } #product .sec1 .content .buttons .join.added i { margin-right: 0px; opacity: 1; } @media only screen and (min-width:992px) { #product .sec1 .content .buttons a:hover, #product .sec1 .content .buttons button:hover { opacity: 0.85; -webkit-transition: opacity 0.35s; -o-transition: opacity 0.35s; transition: opacity 0.35s; } } @media only screen and (max-width:1199px) { #product .sec1 .content { padding-left: 50px; } #product .sec1 .content .title { font-size: 2.5rem; } #product .sec1 .content .type { font-size: 3.125rem; } } @media only screen and (max-width:992px) { #product .sec1 { opacity: 1 !important; } #product .sec1 .album .product-album { opacity: 1 !important; } #product .sec1 .content { opacity: 1 !important; -webkit-transform: none !important; -ms-transform: none !important; transform: none !important; } } @media only screen and (max-width:991px) { #product .sec1 { height: auto; } #product .sec1 .album { max-width: 500px; margin: auto; } #product .sec1 .album .controls { margin: 20px 0; } #product .sec1 .content { padding-left: 0px; text-align: center; } #product .sec1 .content .title { font-size: 2.1875rem; } #product .sec1 .content .type { display: inline-block; padding: 0; font-size: 2.5rem; } #product .sec1 .content .type:after { position: static; margin: auto; } #product .sec1 .content .description { text-align: left; } } @media only screen and (max-width:767px) { #product .sec1 { padding: 40px 0; } #product .sec1 .content .buttons { margin-top: 20px; } #product .sec1 .content .buttons a, #product .sec1 .content .buttons button { width: 100%; margin: 2px 0; } #product .sec1 .album .controls .album-next, #product .sec1 .album .controls .album-prev { width: 20px; height: 20px; } } #product .sec2 { padding: 80px 0; } #product .sec2 .product-title { font-size: 3.75rem; font-weight: 700; color: #000; -webkit-transform: skew(-10deg); -ms-transform: skew(-10deg); transform: skew(-10deg); } #product .sec2 .product-text { font-size: 1.25rem; color: #666; max-width: 800px; margin: auto; } #product .sec2 .product-img-wrap { margin: 40px 0; font-size: 0; } #product .sec2 .product-img-wrap .box { display: inline-block; vertical-align: middle; width: 33.33%; padding: 0 5px; } #product .sec2 .product-img-wrap .box:nth-child(even) { -webkit-transform: translateY(40px); -ms-transform: translateY(40px); transform: translateY(40px); } @media only screen and (max-width:1199px) { #product .sec2 .product-title { font-size: 2.5rem; } #product .sec2 .product-text { font-size: 1rem; } } @media only screen and (max-width:767px) { #product .sec2 { padding: 40px 0; } #product .sec2 .product-title { font-size: 1.875rem; } #product .sec2 .product-img-wrap .box { width: 100%; margin: 5px 0; display: block; } #product .sec2 .product-img-wrap .box:nth-child(even) { -webkit-transform: none; -ms-transform: none; transform: none; } } #product .sec3 { background-position: center center; background-size: cover; overflow: hidden; padding: 80px 0; } #product .sec3 .title { font-weight: 700; color: #fff; text-align: center; font-size: 3.75rem; -webkit-transform: skew(-10deg); -ms-transform: skew(-10deg); transform: skew(-10deg); margin: 0; } #product .sec3 .block { text-align: center; margin-top: 150px; position: relative; } #product .sec3 .block .img { position: relative; max-width: 740px; margin: auto; display: block; z-index: 2; } #product .sec3 .block .img:after { content: ""; position: absolute; top: 92%; left: -25%; width: 150%; height: 100px; z-index: -1; background-image: -owg-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 75%); background-image: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 75%); background-image: -o-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 75%); background-image: radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 75%); } #product .sec3 .block .img img { display: block; } #product .sec3 .block .text { color: #ff4700; position: absolute; bottom: 20%; left: 50%; display: block; z-index: 1; line-height: 0.6; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); font-size: 3.75rem; } #product .sec3 .block .text .num { font-size: 56.25rem; font-weight: 100; letter-spacing: 30px; background: -webkit-linear-gradient(#d61219, #ff4700); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } #product .sec3 .block .text .km { position: relative; left: -65px; } @media only screen and (max-width:1199px) { #product .sec3 .title { font-size: 2.5rem; } #product .sec3 .block .img { max-width: 600px; } #product .sec3 .block .text .num { font-size: 46.875rem; } } @media only screen and (max-width:991px) { #product .sec3 .block { margin-top: 100px; } #product .sec3 .block .img { max-width: 480px; } #product .sec3 .block .text .num { font-size: 34.375rem; } } @media only screen and (max-width:767px) { #product .sec3 { padding: 50px 0; } #product .sec3 .title { font-size: 1.875rem; } #product .sec3 .block { margin-top: 40px; } #product .sec3 .block .img { margin: 0 20px; } #product .sec3 .block .text { bottom: 100%; left: 0; width: 100%; text-align: center; font-size: 1.125rem; -webkit-transform: none; -ms-transform: none; transform: none; text-indent: 30px; } #product .sec3 .block .text .num { font-size: 2.5rem; font-weight: 700; letter-spacing: 0; margin-right: 10px; } #product .sec3 .block .text .km { left: 0; } } #product .sec4 { padding: 50px 0; } #product .sec4 .block { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 20px; margin: 60px 0; } #product .sec4 .block .pic { width: 60%; } #product .sec4 .block .content { width: 40%; padding-left: 50px; } #product .sec4 .block .content .title { font-size: 2.5rem; font-style: italic; color: #000; font-weight: 700; margin-bottom: 40px; text-transform: uppercase; } #product .sec4 .block .content .title:after { content: ""; display: block; width: 40px; height: 2px; background: #d6151a; } #product .sec4 .block .content .description { font-size: 1rem; color: #666; } #product .sec4 .block:nth-child(odd) { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } #product .sec4 .block:nth-child(odd) .content { padding: 0 50px 0 0; } #product .sec5 .xs-bg { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; background-size: cover; background-position: center; } @media only screen and (max-width:1199px) { #product .sec4 .block .content .title { font-size: 1.875rem; margin-bottom: 30px; } } @media only screen and (max-width:991px) { #product .sec4 .block { display: block; } #product .sec4 .block .pic, #product .sec4 .block .content { width: 100%; } #product .sec4 .block .content { padding: 0 !important; } } @media only screen and (max-width:767px) { #product .sec4 .block { margin: 30px 0; padding: 0; } #product .sec4 .block .content .title { font-size: 1.625rem; } } #product .sec5 { background-size: cover; background-position: center center; position: relative; height: 40vw; } #product .sec5 .block { position: absolute; left: 50%; top: 50%; max-width: 1000px; color: #fff; text-align: center; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #product .sec5 .block .title { font-size: 2.5rem; font-weight: 700; font-style: italic; } @media only screen and (max-width:991px) { #product .sec5 { padding: 100px 0; height: auto; } #product .sec5 .block { position: static; width: 100%; padding: 20px; -webkit-transform: none; -ms-transform: none; transform: none; } } @media only screen and (max-width:767px) { #product .sec5 { padding: 60px 0; background: none !important; } #product .sec5 .xs-bg { display: block; } #product .sec5 .block { position: relative; z-index: 1; left: auto; top: auto; } #product .sec5 .block .title { font-size: 1.75rem; } } #product .sec6 { padding: 80px 0; } #product .sec6 .block { max-width: 1000px; margin: 0 auto 50px; text-align: center; } #product .sec6 .block .title { font-size: 2.5rem; margin: 0; color: #000; font-weight: 700; font-style: italic; } #product .sec6 .block .description { color: #666; } #product .sec6 .video { max-width: 1030px; margin: auto; position: relative; } #product .sec6 .video .play { position: relative; display: block; } #product .sec6 .video .play:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #000; opacity: 0.5; } #product .sec6 .video .play .icon-play { position: absolute; top: 50%; left: 50%; z-index: 2; width: 60px; height: 60px; margin: -30px; height: -30px; display: block; background: #fff; border-radius: 50%; } #product .sec6 .video .play .icon-play i { position: absolute; top: 50%; left: 50%; color: #000; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #product .sec6 .video #my-player { position: absolute; top: 0; left: 0; width: 100%; height: 0; z-index: 3; padding-bottom: 56.31%; } #product .sec6 .video #my-player iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #product .sec6 .video #my-player .video-close { position: absolute; z-index: 2; top: 5px; right: 5px; width: 50px; height: 50px; text-align: center; font-size: 1.5rem; line-height: 45px; color: #000; font-weight: 300; background: #fff; display: block; } @media only screen and (max-width:1199px) { #product .sec6 .video { max-width: 768px; } } @media only screen and (max-width:991px) { #product .sec6 { padding: 80px 20px; } #product .sec6 .video { margin: 0 auto; } } @media only screen and (max-width:767px) { #product .sec6 { padding: 50px 20px; } #product .sec6 .block .title { font-size: 1.625rem; margin: 0; } } #product .sec7 { padding: 80px 0 150px; background: #f6f6f6; } #product .sec7 .title { font-size: 1.5rem; margin: 0; font-weight: 700; color: #000; font-style: italic; margin-bottom: 5px; } #product .sec7 .list .box { width: 46%; float: left; } #product .sec7 .list .box.right { float: right; } #product .sec7 .list .box li { font-size: 0; border-bottom: 1px solid #ddd; padding: 5px 0; } #product .sec7 .list .box li > p { margin: 0; display: inline-block; vertical-align: top; font-size: 1rem; } #product .sec7 .list .box li .tit { width: 200px; color: #555; } #product .sec7 .list .box li .content { width: calc(100% - 200px); color: #777; } .notice-area { padding-top: 20px; font-size: 13px; color: #777; line-height: 22px; } @media only screen and (max-width:991px) { #product .sec7 { padding: 60px 0; } #product .sec7 .list .box { width: 100%; } .notice-area { max-width: 100%; } } @media only screen and (max-width:767px) { #product .sec7 { padding: 40px 0; } #product .sec7 .list .box li .tit { width: 150px; } #product .sec7 .list .box li .content { width: calc(100% - 150px); } } #product .sec8 { padding: 80px 0; } #product .sec8 .list { float: left; max-width: 50%; } #product .sec8 .list .subti { color: #666; } #product .sec8 .list ul { max-width: 80%; margin-top: 30px; } #product .sec8 .list ul li { border: 1px solid #eee; padding: 8px 25px; margin: 10px 0; } #product .sec8 .list ul li a { display: block; position: relative; } #product .sec8 .list ul li a:before, #product .sec8 .list ul li a:after { content: ""; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } #product .sec8 .list ul li a:before { width: 25px; height: 25px; right: 0px; background: #666; border-radius: 50%; } #product .sec8 .list ul li a:after { width: 0; height: 0; right: 9px; border-style: solid; border-width: 4px 0 4px 6px; border-color: transparent transparent transparent #fff; } #product .sec8 .list ul li p { margin: 0; } #product .sec8 .list ul li .ti { color: #000; font-size: 1.125rem; } #product .sec8 .list ul li .date { color: #999; font-size: 0.875rem; } #product .sec8 .pic { float: right; margin-top: -190px; max-width: 50%; } @media only screen and (min-width:992px) { #product .sec8 .list ul li:hover { border-color: #d6151a; } #product .sec8 .list ul li:hover a:before { background: #d6151a; } } @media only screen and (max-width:991px) { #product .sec8 { padding: 60px 0; } #product .sec8 .pic { display: none; } #product .sec8 .list { max-width: 100%; float: none; } #product .sec8 .list ul { max-width: 100%; } } @media only screen and (max-width:767px) { #product .sec8 { padding: 40px 0; } } /*無限載入 */ .grid-list { margin: 50px 0; } .grid-list.are-images-unloaded { opacity: 0; } .grid-list.are-images-unloaded .image-grid__item { opacity: 0; } .grid-list .grid-item, .grid-list .grid-col-sizer { width: 32%; } .grid-list .grid-gutter-sizer { width: 2%; } .grid-list .grid-item { margin-bottom: 20px; float: left; background: #fff; -webkit-transition: background 0.25s; -o-transition: background 0.25s; transition: background 0.25s; } .grid-list .grid-item .content { padding: 20px; } .grid-list .grid-item .content .date { color: #d6151a; margin: 0; font-size: 1rem; } .grid-list .grid-item .content .title { margin: 10px 0; color: #222; font-size: 1.4375rem; } .grid-list .grid-item .content .description { color: #222; font-size: 1rem; line-height: 2; } @media only screen and (min-width:992px) { .grid-list .grid-item:hover { background: #516070; } .grid-list .grid-item:hover .pic:before { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .grid-list .grid-item:hover .pic img { opacity: 0.8; } .grid-list .grid-item:hover .content .date, .grid-list .grid-item:hover .content .title, .grid-list .grid-item:hover .content .description { color: #fff; } } @media only screen and (max-width:1199px) { .grid-list .grid-item .content .title { font-size: 1.25rem; } .grid-list .grid-item .content .description { font-size: 0.937rem; } } @media only screen and (max-width:767px) { .grid-list .grid-item, .grid-list .grid-col-sizer { width: 49%; } } @media only screen and (max-width:480px) { .grid-list .grid-item, .grid-list .grid-col-sizer { width: 100%; } .grid-list .grid-gutter-sizer { width: 0%; } } .page-load-status { display: none; position: relative; z-index: 100; padding-top: 20px; text-align: center; color: #777; } .page-load-status .infinite-scroll-last, .page-load-status .infinite-scroll-error { text-align: center; border-radius: 5px; color: #000; font-size: 0.95rem; opacity: 0.5; } .loader-ellips { font-size: 20px; position: relative; width: 80px; height: 1em; margin: 10px auto; } .loader-ellips .loader-ellips__dot { display: block; width: 15px; height: 15px; border-radius: 0.5em; background: #d6151a; position: absolute; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .loader-ellips .loader-ellips__dot:nth-child(1), .loader-ellips .loader-ellips__dot:nth-child(2) { left: 0; } .loader-ellips .loader-ellips__dot:nth-child(3) { left: 1.5em; } .loader-ellips .loader-ellips__dot:nth-child(4) { left: 3em; } .loader-ellips .loader-ellips__dot:nth-child(1) { -webkit-animation-name: reveal; animation-name: reveal; } .loader-ellips .loader-ellips__dot:nth-child(2), .loader-ellips .loader-ellips__dot:nth-child(3) { -webkit-animation-name: slide; animation-name: slide; } .loader-ellips .loader-ellips__dot:nth-child(4) { -webkit-animation-name: reveal; animation-name: reveal; animation-direction: reverse; } @-webkit-keyframes reveal { from { -webkit-transform: scale(0.001); -ms-transform: scale(0.001); transform: scale(0.001); } to { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @keyframes reveal { from { -webkit-transform: scale(0.001); -ms-transform: scale(0.001); transform: scale(0.001); } to { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @-webkit-keyframes slide { to { -webkit-transform: translateX(1.5em); -ms-transform: translateX(1.5em); transform: translateX(1.5em); } } @keyframes slide { to { -webkit-transform: translateX(1.5em); -ms-transform: translateX(1.5em); transform: translateX(1.5em); } } /*g-tab*/ .g-tab ul { text-align: center; margin: 0 -5px; font-size: 0; } .g-tab ul li { display: inline-block; vertical-align: middle; padding: 5px; } .g-tab ul li a { border-radius: 30px; border: 1px solid #ddd; padding: 10px 15px; min-width: 150px; display: block; color: #999; font-size: 1.06rem; text-transform: uppercase; } .g-tab ul li.active a { border-color: #d6151a; color: #000; } @media only screen and (min-width:992px) { .g-tab ul li a:hover { color: #d6151a; } } @media only screen and (max-width:767px) { .g-tab ul li { display: inline-block; vertical-align: middle; padding: 5px; } .g-tab ul li a { padding: 5px 15px; min-width: inherit; font-size: 0.937rem; } } /*about*/ #about { padding: 80px 0; } #about .g-title { text-align: center; text-transform: uppercase; margin: 0 0 10px 0; padding: 0; } #about .g-title:before { display: none; } #about .sec .block { margin: 20px 0; padding: 50px 0; } #about .sec .b1 .pic { float: left; width: 60%; position: relative; z-index: 2; } #about .sec .b1 .pic:before { content: ""; position: absolute; z-index: -1; right: 0; top: 30%; background-color: #d6151a; width: 100%; height: 60%; display: block; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transition: -webkit-transform 1s; transition: -webkit-transform 1s; -o-transition: transform 1s; transition: transform 1s; transition: transform 1s, -webkit-transform 1s; } #about .sec .b1 .pic img { max-width: 90%; position: relative; z-index: 2; } #about .sec .b1 .pic.scroll-view:before { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } #about .sec .b1 .content { float: right; width: 40%; padding: 40px 0; padding-left: 80px; } #about .sec .b1 .content .g-title { text-align: left; } #about .sec .b1 .content .g-title:before { display: block; left: -60px; } #about .sec .b1 .content .text { color: #666; } #about .sec .b1.half .pic, #about .sec .b1.half .content { width: 50%; } #about .sec .b2 > p { padding: 0 50px; color: #666; } #about .sec .b2 .ti { font-size: 1.625rem; color: #000; font-weight: bold; position: relative; background: url(../images/dotdot.jpg) no-repeat 10px 0; } #about .sec .b2 ul { text-align: center; margin-top: 50px; } #about .sec .b2 ul li { display: inline-block; width: 25%; } #about .sec .b2 ul li:first-child { border-right: 1px solid #ddd; } #about .sec .b2 ul li img, #about .sec .b2 ul li div { display: inline-block; vertical-align: middle; } #about .sec .b2 ul li div { text-align: left; color: #666; padding: 0 20px; } #about .sec .b2 ul li div .num { font-size: 1.875rem; color: #000; font-weight: bold; margin: 0; } #about .sec .b3 .half { float: left; width: 50%; } #about .sec .b3 .flex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; margin-bottom: 50px; } #about .sec .b3 .pic { float: right; width: 55%; } #about .sec .b3 .pic .img1 { float: left; width: 42%; -webkit-transform: translate(80px, 40%); -ms-transform: translate(80px, 40%); transform: translate(80px, 40%); position: relative; } #about .sec .b3 .pic .img1:before { content: ""; background: #d6151a; width: 100%; height: 80%; position: absolute; top: 10%; left: 0px; z-index: -1; -webkit-transition: left 0.5s 0.25s; -o-transition: left 0.5s 0.25s; transition: left 0.5s 0.25s; } #about .sec .b3 .pic .img2 { width: 58%; float: right; } #about .sec .b3 .pic .img3 { position: relative; display: block; z-index: 2; float: right; } #about .sec .b3 .pic .img3:before { content: ""; background: #d6151a; width: 100%; height: 80%; position: absolute; top: 10%; left: 0px; z-index: -1; -webkit-transition: left 0.5s 0.25s; -o-transition: left 0.5s 0.25s; transition: left 0.5s 0.25s; } #about .sec .b3 .pic.scroll-view .img1:before, #about .sec .b3 .pic.scroll-view .img3:before { left: -50px; } #about .sec .b3 .content { float: left; width: 45%; } #about .sec .b3 .content p { padding: 0 50px; color: #666; } #about .sec .b3 .content .ti { font-size: 1.625rem; color: #000; line-height: 1.5; font-weight: bold; position: relative; background: url(../images/dotdot.jpg) no-repeat 10px 0; } @media only screen and (max-width:1199px) { #about .sec .block { margin: 0; padding: 50px 0; } #about .sec .b1 .pic { width: 50%; } #about .sec .b1 .content { width: 50%; padding: 0 0 0 40px; } #about .sec .b1 .content .g-title { font-size: 1.875rem; } #about .sec .b1 .content .g-title:before { left: -90px; width: 75px; } #about .sec .b2 ul li { width: 33.33%; } #about .sec .b3 .pic { width: 50%; } #about .sec .b3 .content { width: 50%; } } @media only screen and (max-width:991px) { #about .sec .block { padding: 50px 0 20px; } #about .sec .b1 .pic { width: 100%; } #about .sec .b1 .content { width: 100%; margin-top: 30px; } #about .sec .b1 .content .g-title { font-size: 1.875rem; } #about .sec .b1 .content .g-title:before { left: -40px; width: 30px; } #about .sec .b1.half .pic, #about .sec .b1.half .content { width: 100%; } #about .sec .b2 ul { font-size: 0; } #about .sec .b2 ul li { width: 50%; font-size: 1rem; } #about .sec .b3 .flex { display: block; margin-bottom: 0px; } #about .sec .b3 .half { width: 100%; } #about .sec .b3 .pic, #about .sec .b3 .content { width: 100%; } #about .sec .b3 .pic .img1 { float: left; width: 42%; -webkit-transform: translate(25px, 40%); -ms-transform: translate(25px, 40%); transform: translate(25px, 40%); position: relative; } #about .sec .b3 .content { margin-top: 50px; } } @media only screen and (max-width:767px) { #about { padding: 50px 0; } #about .sec { margin-top: 20px; } #about .sec .block { padding: 20px 0; } #about .sec .b1 .content .g-title { font-size: 1.625rem; } #about .sec .b2 > p { padding: 0 0 0 40px; } #about .sec .b2 .ti { font-size: 1.375rem; background-position: 0 0; } #about .sec .b2 ul { margin-top: 20px; } #about .sec .b2 ul li img, #about .sec .b2 ul li div { display: block; margin: auto; text-align: center; padding: 0; } #about .sec .b2 ul li div .num { font-size: 1.25rem; } #about .sec .b3 .content p { padding: 0 0 0 40px; } #about .sec .b3 .content .ti { font-size: 1.375rem; background-position: 0 0; } } /*download*/ #download { padding: 80px 0; } #download .g-title { text-align: center; text-transform: uppercase; margin: 0 0 10px 0; padding: 0; } #download .g-title:before { display: none; } #download .list { font-size: 0; margin: 30px 0; } #download .list .item { display: inline-block; vertical-align: top; width: 25%; padding: 15px; } #download .list .item .pic { border-bottom: 4px solid #d6151a; -webkit-transition: -webkit-transform 0.35s, -webkit-box-shadow 0.35s 0.15s; transition: -webkit-transform 0.35s, -webkit-box-shadow 0.35s 0.15s; -o-transition: transform 0.35s, box-shadow 0.35s 0.15s; transition: transform 0.35s, box-shadow 0.35s 0.15s; transition: transform 0.35s, box-shadow 0.35s 0.15s, -webkit-transform 0.35s, -webkit-box-shadow 0.35s 0.15s; } #download .list .item .pic a { display: block; position: relative; } #download .list .item .pic a:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0; -webkit-transition: opacity 0.35s; -o-transition: opacity 0.35s; transition: opacity 0.35s; } #download .list .item .pic a .btn-download { position: absolute; top: 50%; left: 50%; width: 110px; height: 110px; margin-top: -55px; margin-left: -55px; background: #d6151a; border-radius: 50%; color: #fff; font-size: 0.875rem; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-top: 25px; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: transform 0.35s, opacity 0.35s; transition: transform 0.35s, opacity 0.35s; transition: transform 0.35s, opacity 0.35s, -webkit-transform 0.35s; } #download .list .item .pic a .btn-download:before { content: ""; display: block; position: absolute; width: 22px; height: 22px; margin: auto; background: url(../images/icon-download.png) no-repeat; background-size: 100% 100%; -webkit-transform: translate(0, -25px); -ms-transform: translate(0, -25px); transform: translate(0, -25px); } #download .list .item .content { text-align: center; } #download .list .item .content .ti { margin: 15px 0 0 0; color: #000; font-size: 1.25rem; } #download .list .item .content .date { color: #999; font-size: 1rem; } @media only screen and (min-width:992px) { #download .list .item:hover .pic { -webkit-box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2); box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2); -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); } #download .list .item:hover .pic a:before { opacity: 0.5; } #download .list .item:hover .pic a .btn-download { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @media only screen and (max-width:991px) { #download .list .item { width: 50%; } } @media only screen and (max-width:767px) { #download { padding: 40px 0; } #download .list { margin: 20px 0; } #download .list .item { padding: 5px; } #download .list .item .content .ti { margin: 10px 0 0 0; font-size: 1rem; } #download .list .item .content .date { color: #999; font-size: 0.875rem; } } /*resources*/ #resources { padding: 80px 0; background: #f9f9f9; } #resources .g-title { text-align: center; text-transform: uppercase; margin: 0 0 10px 0; padding: 0; color: #000; } #resources .g-title:before { display: none; } #resources .list { margin: 30px 0; font-size: 0; font-size: 0; } #resources .list .grid-gutter-sizer { width: 2%; } #resources .list .item { position: relative; width: 100%; margin-bottom: 30px; background-color: #fff; } #resources .list .item .pic { display: inline-block; width: 470px; vertical-align: middle; background: #000; } #resources .list .item .content { display: inline-block; width: calc(100% - 470px); vertical-align: middle; padding: 30px; overflow: hidden; background: #fff; } #resources .list .item:before { content: ""; width: 0; height: 2px; background: #d6151a; position: absolute; left: 0; bottom: 0; -webkit-transition: width 0.6s; -o-transition: width 0.6s; transition: width 0.6s; } #resources .list .item .content .date { margin: 0; font-size: 1rem; color: #999; float: right; } #resources .list .item .content .date:before { content: ""; width: 40px; height: 1px; background: #d6151a; display: inline-block; margin: 0 8px 4px 0; } #resources .list .item .content .tit { margin: 0; color: #000; font-size: 1.25rem; line-height: 1.5; font-weight: 700; } #resources .list .item .content .description { color: #666; font-size: 1rem; margin: 10px 0 20px; } @media only screen and (min-width:991px) { #resources .list .item a { display: block; -webkit-transition: -webkit-box-shadow 0.35s; transition: -webkit-box-shadow 0.35s; -o-transition: box-shadow 0.35s; transition: box-shadow 0.35s; transition: box-shadow 0.35s, -webkit-box-shadow 0.35s; } #resources .list .item a:hover { -webkit-box-shadow: 3px 3px 30px rgba(0, 0, 0, 0.1); box-shadow: 3px 3px 30px rgba(0, 0, 0, 0.1); } #resources .list .item a:hover .pic img { opacity: 0.6; } #resources .list .item a:hover .pic i { opacity: 1; -webkit-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } #resources .list .item:hover:before { width: 100%; } } @media only screen and (max-width:991px) { #resources { padding: 40px 0; } #resources .list .item .pic { width: 340px; } #resources .list .item .content { width: calc(100% - 340px); } #resources .list .item .content .description { height: 50px; overflow: hidden; } } @media only screen and (max-width:480px) { #resources .list .item { width: 100%; margin-bottom: 10px; } #resources .list .item a .pic { width: 120px; } #resources .list .item a .content { width: calc(100% - 120px); padding: 0 10px; } #resources .list .item .content .tit { font-size: 1rem; line-height: 1.2rem; } #resources .list .item .content .date { margin-top: 5px; font-size: .9rem; } #resources .list .item .content .description { display: none; } } /*innovation*/ #innovation p.color-red, #innovation p.color-red a { color: #d6151a; } #innovation .g-title { text-align: center; text-transform: uppercase; padding: 0; } #innovation .g-title:before { display: none; } #innovation .g-tab { padding: 80px 0; } #innovation .g-tab .container { position: relative; } #innovation .g-tab ul { position: absolute; text-align: center; width: 100%; left: 0; } #innovation .g-tab ul.fixed { position: fixed; top: 0; left: 0; width: 100%; z-index: 990; margin: 0; background: rgba(246, 246, 246, 0.85); } #innovation .g-tab ul.fixed li a { background: #fff; color: #666; } #innovation .g-tab ul.fixed li.active a { background: #d6151a; color: #fff; } @media only screen and (min-width:992px) { #innovation .g-tab ul li:hover a { background: #d6151a; color: #fff; } } @media only screen and (max-width:991px) { #innovation .g-tab { padding: 60px 0 40px; } } @media only screen and (max-width:767px) { #innovation .g-tab { padding: 40px 0; } } @media only screen and (max-width:480px) { #innovation .g-tab { padding-bottom: 80px; } #innovation .g-tab ul { margin: 0; } #innovation .g-tab ul li { width: 50%; } #innovation .g-tab ul.fixed { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0; padding: 0; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } #innovation .g-tab ul.fixed li { padding: 0; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-left: -1px; } #innovation .g-tab ul.fixed li a { border-radius: 0; padding: 10px; } #innovation .g-tab ul.fixed li.active { position: relative; z-index: 20; } } #innovation .sec { padding: 80px 0; } @media only screen and (max-width:767px) { #innovation .sec { padding: 40px 0; } } #innovation .text { color: #555; } #innovation #design .pic { width: 60%; float: left; max-width: 800px; } #innovation #design .pic .img1 { position: relative; z-index: 1; display: block; } #innovation #design .pic .img1:before { content: ""; width: 100%; height: 70%; background: #d6151a; right: -50px; bottom: 50px; position: absolute; z-index: -1; } #innovation #design .pic .btm { text-align: right; position: relative; margin: 0 -5px; } #innovation #design .pic .btm .img2, #innovation #design .pic .btm .img3, #innovation #design .pic .btm .img4 { margin: 10px 5px; display: inline-block; vertical-align: top; } #innovation #design .pic .btm .img2 { max-width: 23%; } #innovation #design .pic .btm .img3 { max-width: 63%; } #innovation #design .pic .btm .img4 { position: absolute; left: 100%; top: -30px; width: 455px; max-width: 58%; } #innovation #design .content { width: 35%; float: right; margin-top: 150px; padding-left: 50px; } #innovation #design .content .g-title { text-align: left; padding: 0; } #innovation #design .content .g-title:before { display: block; left: -60px; width: 40px; } @media only screen and (max-width:1479px) { #innovation #design .content { margin-top: 100px; } } @media only screen and (max-width:1199px) { #innovation #design .pic { width: 55%; } #innovation #design .content { width: 40%; margin-top: 30px; position: relative; z-index: 3; text-shadow: 1px 1px 1px #fff, -1px 1px 1px #fff, -1px -1px 1px #fff, 1px -1px 1px #fff; } } @media only screen and (max-width:991px) { #innovation #design .pic { width: 100%; } #innovation #design .pic .btm { margin: 0 -5px; } #innovation #design .pic .btm .img2 { max-width: calc(20% - 30px); } #innovation #design .pic .btm .img3 { max-width: 40%; } #innovation #design .pic .btm .img4 { position: static; max-width: 40%; } #innovation #design .content { width: 100%; margin-top: 20px; } } @media only screen and (max-width:767px) { #innovation #design .pic .btm .img2 { max-width: calc(39.1% - 30px); } #innovation #design .pic .btm .img3 { max-width: 29.3%; } #innovation #design .pic .btm .img4 { max-width: 31.6%; } } #innovation #technology { background: #f6f6f6; } #innovation #technology .pic { width: 60%; float: right; max-width: 800px; } #innovation #technology .pic .img1 { position: relative; z-index: 1; display: block; } #innovation #technology .pic .img1:before { content: ""; width: 100%; height: 65%; background: #d6151a; left: -50px; bottom: 40px; position: absolute; z-index: -1; } #innovation #technology .pic .btm { position: relative; margin: 0 -5px; } #innovation #technology .pic .btm .img2, #innovation #technology .pic .btm .img3, #innovation #technology .pic .btm .img4 { margin: 10px 5px; display: inline-block; vertical-align: top; } #innovation #technology .pic .btm .img2 { position: absolute; right: 100%; top: -40px; width: 365px; max-width: 46%; } #innovation #technology .pic .btm .img3 { max-width: 45%; } #innovation #technology .pic .btm .img4 { max-width: 21%; } #innovation #technology .content { width: 35%; float: left; margin-top: 100px; padding-right: 50px; } #innovation #technology .content .g-title { text-align: left; padding: 0; } #innovation #technology .content .g-title:before { display: block; left: -60px; width: 40px; } #innovation #technology .content .sub-ti { color: #d6151a; font-size: 1.625rem; font-style: italic; font-weight: 700; margin-top: -15px; margin-bottom: 30px; } @media only screen and (max-width:1479px) { #innovation #technology .content { margin-top: 0px; } } @media only screen and (max-width:1199px) { #innovation #technology .pic { width: 55%; } #innovation #technology .content { width: 40%; position: relative; z-index: 3; text-shadow: 1px 1px 1px #fff, -1px 1px 1px #fff, -1px -1px 1px #fff, 1px -1px 1px #fff; } } @media only screen and (max-width:991px) { #innovation #technology .pic { width: 100%; } #innovation #technology .pic .btm { margin: 0 -5px; } #innovation #technology .pic .btm .img2 { position: static; max-width: 37.5%; } #innovation #technology .pic .btm .img3 { max-width: 37.5%; } #innovation #technology .pic .btm .img4 { max-width: calc(25% - 30px); } #innovation #technology .content { width: 100%; padding: 0; margin-top: 20px; } } @media only screen and (max-width:767px) { #innovation #technology .pic .btm .img2 { max-width: 35.5%; } #innovation #technology .pic .btm .img3 { max-width: 35.5%; } #innovation #technology .pic .btm .img4 { max-width: calc(29% - 30px); } } #innovation #future { background: url(../images/future_bg.jpg) no-repeat center center; background-size: cover; } #innovation #future .container { max-width: 900px; } #innovation #future .g-title { color: #fff; } #innovation #future .sub-ti { font-style: italic; font-weight: 700; font-size: 1.625rem; color: #fff; margin-bottom: 30px; } #innovation #future .text { margin-bottom: 30px; color: #fff; } #innovation #future img { display: inline-block; } @media only screen and (max-width:767px) { #innovation #future .sub-ti { line-height: 1.5; font-size: 1.375rem; } } #innovation #eco .container { padding: 0 60px; } #innovation #eco .g-title { text-align: left; padding: 0; } #innovation #eco .g-title:before { display: block; left: -60px; } #innovation #eco .sub-ti { color: #d6151a; font-size: 1.625rem; font-style: italic; font-weight: 700; margin-top: -15px; margin-bottom: 30px; } #innovation #eco .flex { margin-top: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } #innovation #eco .flex > div { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } #innovation #eco .flex .pic { float: left; } #innovation #eco .flex .text { float: right; padding-left: 50px; } #innovation #eco .flex .text ul li { padding-left: 20px; margin: 3px 0; position: relative; } #innovation #eco .flex .text ul li:before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; background: #d6151a; margin-top: -4px; display: block; border-radius: 50%; } @media only screen and (max-width:1199px) { #innovation #eco .flex { display: block; } #innovation #eco .flex .text { padding-left: 0px; } } @media only screen and (max-width:767px) { #innovation #eco .container { padding: 0 20px; } #innovation #eco .g-title { padding: 0 60px; } #innovation #eco .g-title:before { left: 0px; } } /*form*/ .form .text { max-width: 1000px; margin: auto; margin-bottom: 50px; } .form .text p { margin: 0 0 5px; } .form .half { float: left; width: 49%; } .form .half.right { float: right; } .form .f-row { margin-bottom: 20px; font-size: 0; position: relative; display: block; background: #fff; border: 1px solid #ddd; padding: 5px; display: block; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: stretch; -ms-flex-pack: stretch; justify-content: stretch; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .form .f-row.msg { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .form .f-row > div { display: inline-block; vertical-align: top; } .form .f-row .f-tit { font-size: 1.125rem; color: #999; white-space: nowrap; padding: 10px 20px; -webkit-box-flex: 1; -ms-flex: auto auto 130px; flex: auto auto 130px; } .form .f-row .f-content { -webkit-box-flex: 1; -ms-flex: auto; flex: auto; } .form .input-box { background: none; border: none; width: 100%; height: 50px; padding: 0 10px; color: #000; font-size: 1rem; -webkit-transition: background 0.35s; -o-transition: background 0.35s; transition: background 0.35s; } .form .input-box:focus { background: #f6f6f6; } .form .textarea { background: none; border: none; width: 100%; height: 200px; padding: 10px; color: #000; font-size: 1rem; -webkit-transition: background 0.35s; -o-transition: background 0.35s; transition: background 0.35s; } .form .textarea:focus { background: #f6f6f6; } .form .sned { float: right; background: #d6151a; color: #fff; width: 250px; height: 50px; border: none; font-size: 0.875rem; } .form .red { color: #d6151a; } @media only screen and (min-width:992px) { .form .sned:hover { opacity: 0.8; } } @media only screen and (max-width:991px) { .form .half { float: none; width: 100%; } .form .half.right { float: none; } .form .sned { margin: auto; float: none; width: 100%; display: block; } } @media only screen and (max-width:767px) { .form .f-row { margin-bottom: 10px; } .form .f-row.msg { display: block; } .form .f-row .f-tit { padding: 10px; font-size: 1rem; } } .finished { max-width: 1000px; margin: 30px auto 50px; } .finished .text { margin: 20px 0; } /*contact*/ #contact .g-title { text-align: center; text-transform: uppercase; margin: 0 0 10px 0; padding: 0; } #contact .g-title:before { display: none; } #contact .contact-list { position: relative; z-index: 2; background: #f6f6f6; padding: 80px 0; } #contact .contact-list:before, #contact .contact-list:after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; opacity: 0.1; z-index: -1; } #contact .contact-list:before { left: 0%; background: url(../images/bg-shape.svg) no-repeat -25% top; } #contact .contact-list:after { left: 55%; background: url(../images/bg-shape.svg) no-repeat 0% bottom; } #contact .contact-list .list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } #contact .contact-list .list .box { width: calc(25% - 20px); border: 1px solid #eee; margin: 10px; padding: 25px; background: #fff; } #contact .contact-list .list .box .ti { color: #d6151a; font-weight: 700; text-align: center; font-size: 1.5rem; font-style: italic; margin: 20px 0 0 0; } #contact .contact-list .list .box ul { border-top: 1px solid #ddd; margin-top: 20px; padding: 15px 0; } #contact .contact-list .list .box ul li { padding-left: 40px; position: relative; margin: 10px 0; } #contact .contact-list .list .box ul li a { color: #000; } #contact .contact-list .list .box ul li:before { content: ""; position: absolute; left: 0; top: 0; width: 25px; height: 25px; background: url(../images/icon-contact.jpg) no-repeat; } #contact .contact-list .list .box ul li:nth-child(1):before { background-position: 0% 0; } #contact .contact-list .list .box ul li:nth-child(2):before { background-position: 25% 0; } #contact .contact-list .list .box ul li:nth-child(3):before { background-position: 50% 0; } #contact .contact-list .list .box ul li:nth-child(4):before { background-position: 75% 0; } #contact .contact-list .list .box ul li:nth-child(5):before { background-position: 100% 0; } @media only screen and (min-width:992px) { #contact .contact-list .list .box ul li a:hover { text-decoration: underline; } } @media only screen and (max-width:1479px) { #contact .contact-list .list .box ul li { font-size: 0.937rem; } } @media only screen and (max-width:1366px) { #contact .contact-list:before { left: -25%; } #contact .contact-list:after { left: 60%; } } @media only screen and (max-width:1199px) { #contact .contact-list:before { left: 0%; background: url(../images/bg-shape.svg) no-repeat 0% top; background-size: auto 100%; } #contact .contact-list:after { display: none; } #contact .contact-list .list { -ms-flex-wrap: wrap; flex-wrap: wrap; } #contact .contact-list .list .box { width: calc(50% - 20px); } } @media only screen and (max-width:767px) { #contact .contact-list { padding: 40px 0; } #contact .contact-list .list .box { padding: 15px; width: calc(100% - 20px); } } #contact .form { padding: 80px 0; } @media only screen and (max-width:767px) { #contact .form { padding: 40px 0; } } /*inquery*/ #inquery .g-title { text-align: center; text-transform: uppercase; margin: 0 0 10px 0; padding: 0; } #inquery .g-title:before { display: none; } #inquery .inquery-list { padding: 80px 0; } #inquery .inquery-list .list-table .flex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 15px; } #inquery .inquery-list .list-table .flex .box { display: inline-block; vertical-align: top; padding: 15px; font-size: 1rem; } #inquery .inquery-list .list-table .flex .b1 { -webkit-box-flex: 1; -ms-flex: 1 1 25%; flex: 1 1 25%; } #inquery .inquery-list .list-table .flex .b2 { -webkit-box-flex: 1; -ms-flex: 1 1 60%; flex: 1 1 60%; } #inquery .inquery-list .list-table .flex .b3 { -webkit-box-flex: 1; -ms-flex: 1 1 15%; flex: 1 1 15%; text-align: center; } #inquery .inquery-list .list-table .head { background: #000; } #inquery .inquery-list .list-table .head .box { font-size: 1.125rem; color: #fff; text-transform: uppercase; } #inquery .inquery-list .list-table .list-content .item { border-bottom: 1px solid #eee; } #inquery .inquery-list .list-table .list-content .item .pic { max-width: 170px; display: block; } #inquery .inquery-list .list-table .list-content .item .ti { margin: 0; font-weight: 300; color: #000; font-size: 1.375rem; } #inquery .inquery-list .list-table .list-content .item .type { color: #000; font-weight: 700; font-size: 1.375rem; } #inquery .inquery-list .list-table .list-content .item .btn-del { width: 60px; height: 60px; display: block; border: none; margin: auto; background: none; position: relative; z-index: 1; font-size: 0; padding: 0; } #inquery .inquery-list .list-table .list-content .item .btn-del i { width: 100%; height: 100%; border: 1px solid #d6151a; display: block; background: #fff; } #inquery .inquery-list .list-table .list-content .item .btn-del i:before, #inquery .inquery-list .list-table .list-content .item .btn-del i:after { content: ""; position: absolute; top: 50%; left: 50%; height: 13px; width: 1px; margin-top: -6px; background-color: #000; display: block; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } #inquery .inquery-list .list-table .list-content .item .btn-del i:after { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } #inquery .inquery-list .list-table .list-content .item .btn-del:before { content: ""; background-color: #d6151a; opacity: 0.3; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; } #inquery .back { width: 250px; background: #d6151a; color: #fff; display: block; padding: 15px 10px; text-align: center; border-radius: 0; margin: 30px auto 0; text-transform: uppercase; font-size: 0.937rem; } #inquery .back i { margin-right: 10px; font-size: 1rem; } #inquery .back:hover { opacity: 0.8; } @media only screen and (min-width:992px) { #inquery .inquery-list .list-table .list-content .item a { display: inline-block; } #inquery .inquery-list .list-table .list-content .item a:hover .ti, #inquery .inquery-list .list-table .list-content .item a:hover .type { color: #d6151a; } #inquery .inquery-list .list-table .list-content .item .btn-del:hover { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; -o-transition: transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; } #inquery .inquery-list .list-table .list-content .item .btn-del:hover i { background-color: #d6151a; -webkit-transition: background-color 0.25s; -o-transition: background-color 0.25s; transition: background-color 0.25s; } #inquery .inquery-list .list-table .list-content .item .btn-del:hover i:before, #inquery .inquery-list .list-table .list-content .item .btn-del:hover i:after { background-color: #fff; } #inquery .inquery-list .list-table .list-content .item .btn-del:hover:before { -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); opacity: 0; -webkit-transition: opacity 0.25s 0.25s, -webkit-transform 0.25s 0.25s; transition: opacity 0.25s 0.25s, -webkit-transform 0.25s 0.25s; -o-transition: transform 0.25s 0.25s, opacity 0.25s 0.25s; transition: transform 0.25s 0.25s, opacity 0.25s 0.25s; transition: transform 0.25s 0.25s, opacity 0.25s 0.25s, -webkit-transform 0.25s 0.25s; } } @media only screen and (max-width:767px) { #inquery .inquery-list { padding: 40px 0; } #inquery .inquery-list .list-table .flex { padding: 0; } #inquery .inquery-list .list-table .flex .box { display: inline-block; vertical-align: top; padding: 15px 6px; font-size: 1rem; } #inquery .inquery-list .list-table .flex .b1 { -webkit-box-flex: 1; -ms-flex: 1 1 25%; flex: 1 1 25%; } #inquery .inquery-list .list-table .flex .b2 { -webkit-box-flex: 1; -ms-flex: 1 1 60%; flex: 1 1 60%; } #inquery .inquery-list .list-table .flex .b3 { -webkit-box-flex: 1; -ms-flex: 1 1 15%; flex: 1 1 15%; text-align: center; } #inquery .inquery-list .list-table .head .box { font-size: 0.875rem; } #inquery .inquery-list .list-table .list-content .item .ti { font-size: 1rem; } #inquery .inquery-list .list-table .list-content .item .type { font-size: 1.125rem; } #inquery .inquery-list .list-table .list-content .item .btn-del { width: 35px; height: 35px; } } #inquery .form { background: #f6f6f6; padding: 80px 0; } @media only screen and (max-width:767px) { #inquery .form { padding: 40px 0; } } /*news*/ #news { padding: 80px 0; background: #f9f9f9; } #news .g-title { text-align: center; text-transform: uppercase; margin: 0 0 10px 0; padding: 0; color: #000; } #news .g-title:before { display: none; } #news .list { margin: 30px 0; font-size: 0; font-size: 0; } #news .list .grid-gutter-sizer { width: 2%; } #news .list .item { position: relative; width: 100%; margin-bottom: 30px; background-color: #fff; } #news .list .item .pic { display: inline-block; width: 470px; vertical-align: middle; background: #000; } #news .list .item .content { display: inline-block; width: calc(100% - 470px); vertical-align: middle; padding: 30px; overflow: hidden; background: #fff; } #news .list .item:before { content: ""; width: 0; height: 2px; background: #d6151a; position: absolute; left: 0; bottom: 0; -webkit-transition: width 0.6s; -o-transition: width 0.6s; transition: width 0.6s; } #news .list .item .content .date { margin: 0; font-size: 1rem; color: #999; float: right; } #news .list .item .content .date:before { content: ""; width: 40px; height: 1px; background: #d6151a; display: inline-block; margin: 0 8px 4px 0; } #news .list .item .content .tit { margin: 0; color: #000; font-size: 1.25rem; line-height: 1.5; font-weight: 700; } #news .list .item .content .description { color: #666; font-size: 1rem; margin: 10px 0 20px; } @media only screen and (min-width:991px) { #news .list .item a { display: block; -webkit-transition: -webkit-box-shadow 0.35s; transition: -webkit-box-shadow 0.35s; -o-transition: box-shadow 0.35s; transition: box-shadow 0.35s; transition: box-shadow 0.35s, -webkit-box-shadow 0.35s; } #news .list .item a:hover { -webkit-box-shadow: 3px 3px 30px rgba(0, 0, 0, 0.1); box-shadow: 3px 3px 30px rgba(0, 0, 0, 0.1); } #news .list .item a:hover .pic img { opacity: 0.6; } #news .list .item a:hover .pic i { opacity: 1; -webkit-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } #news .list .item:hover:before { width: 100%; } } @media only screen and (max-width:991px) { #news { padding: 40px 0; } #news .list .item .pic { width: 340px; } #news .list .item .content { width: calc(100% - 340px); } #news .list .item .content .description { height: 50px; overflow: hidden; } } @media only screen and (max-width:480px) { #news .list .item { width: 100%; margin-bottom: 10px; } #news .list .item a .pic { width: 120px; } #news .list .item a .content { width: calc(100% - 120px); padding: 0 10px; } #news .list .item .content .tit { font-size: 1rem; line-height: 1.2rem; } #news .list .item .content .date { margin-top: 5px; font-size: .9rem; } #news .list .item .content .description { display: none; } } /*experience*/ #experience { padding: 80px 0; background: #f9f9f9; } #experience .g-title { text-align: center; text-transform: uppercase; margin: 0 0 10px 0; padding: 0; color: #000; } #experience .g-title:before { display: none; } #experience .list { margin: 30px 0; font-size: 0; } #experience .list .grid-gutter-sizer { width: 4%; } #experience .list .item { width: 100%; display: inline-block; vertical-align: top; margin-bottom: 40px; } #experience .list .item a { display: block; background-color: #fff; -webkit-box-shadow: 3px 3px 30px rgba(0, 0, 0, 0.1); box-shadow: 3px 3px 30px rgba(0, 0, 0, 0.1); } #experience .list .item a .pic { display: inline-block; vertical-align: middle; width: 470px; background: #000; } #experience .list .item a .content { display: inline-block; vertical-align: middle; width: calc(100% - 470px); padding: 30px; background: #fff; } #experience .list .item a .content .date { margin: 20px 0 0; font-size: 1rem; color: #999; } #experience .list .item a .content .tit { margin: 0; color: #000; font-size: 1.25rem; line-height: 1.5; font-weight: 700; } #experience .list .item a .content .aw { font-size: 0; width: 40px; height: 30px; margin-top: 20px; display: block; position: relative; -webkit-transition: width .3s ease-in-out; -moz-transition: width .3s ease-in-out; -ms-transition: width .3s ease-in-out; -o-transition: width .3s ease-in-out; transition: width .3s ease-in-out; } #experience .list .item a .content .aw:before { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: #d6151a; } #experience .list .item a .content .aw:after { content: ""; position: absolute; display: block; top: 50%; margin-top: -6px; margin-left: -16px; left: 100%; width: 13px; height: 13px; border-top: 1px solid #d6151a; border-right: 1px solid #d6151a; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } #experience .list .item:hover a .content .aw { width: 90px; } @media only screen and (max-width:1199px) { #experience .list .grid-gutter-sizer { width: 2%; } #experience .list .item { width: 100%; } #experience .list .item a .pic img { position: static; height: auto; max-width: 100%; min-width: 100%; -webkit-transform: none !important; -ms-transform: none !important; transform: none !important; } #experience .list .item a .content:before { display: none; } #experience .list .item a .content .date { margin: 10px 0 0; } } @media only screen and (max-width:991px) { #experience { padding: 40px 0; } #experience .list .item { width: 100%; margin-bottom: 10px; } #experience .list .item a .pic { width: 300px; } #experience .list .item a .content { width: calc(100% - 300px); } #experience .list .item a .content .tit { font-size: 1rem; line-height: 1.2rem; overflow: hidden; max-height: 38px; } #experience .list .item a .content .date { margin: 0; font-size: .9rem; } #experience .list .item a .content .aw { display: none; } } @media only screen and (max-width:480px) { #experience .list .grid-gutter-sizer { width: 0; } #experience .list .item { width: 100%; } #experience .list .item a .pic { width: 120px; } #experience .list .item a .content { width: calc(100% - 120px); padding: 0 10px; } } #detail-view { padding: 80px 0; background: #f9f9f9; } #detail-view .container { background: #fff; padding: 0; } #detail-view .title { border-bottom: 3px solid #ddd; padding: 30px; } #detail-view .title .cate { font-size: 0.937rem; border: 1px solid #d6151a; color: #d6151a; padding: 3px 20px; display: inline-block; border-radius: 30px; text-transform: uppercase; } #detail-view .title .ti { font-size: 2.5rem; color: #000; margin: 10px 0; font-weight: 700; line-height: 1.35; } #detail-view .title .date { font-size: 1rem; color: #999; } #detail-view .title .date:before { content: ""; display: inline-block; vertical-align: middle; width: 40px; height: 1px; margin: 0 5px 3px 0; background: #d6151a; } #detail-view .text-edit { padding-bottom: 80px; } #detail-view .text-edit .text { padding: 0 50px; color: #666; } #detail-view .text-edit .video { max-width: 1000px; margin: 50px auto 0; } #detail-view .back { width: 250px; background: #d6151a; color: #fff; display: block; padding: 20px 10px; text-align: center; border-radius: 0; margin: 30px auto 0; text-transform: uppercase; font-size: 0.937rem; } #detail-view .back i { margin-right: 10px; font-size: 1rem; } @media only screen and (max-width:991px) { #detail-view { padding: 40px 20px; } #detail-view .container { width: 100%; } #detail-view .title .ti { font-size: 1.875rem; } } @media only screen and (max-width:767px) { #detail-view .title { padding: 20px; } #detail-view .title .ti { font-size: 1.4375rem; } #detail-view .text-edit .text { padding: 20px; } } /*history*/ #history { padding: 80px 0; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; } #history .g-title { text-align: center; text-transform: uppercase; margin: 0 0 10px 0; padding: 0; color: #000; } #history .g-title:before { display: none; } #history .list { margin: 50px 0; position: relative; z-index: 2; } #history .list .year-main { padding-top: 50px; } #history .list .block .main { position: relative; padding-left: 190px; display: block; margin: 0 auto; max-width: 900px; min-height: 150px; } #history .list .block .year { position: absolute; top: 10px; left: 10px; z-index: 2; width: 120px; height: 120px; border: 5px solid #d6151a; background: #d6151a; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 2rem; font-style: italic; font-weight: 700; border-radius: 50%; } #history .list .block .year:before { content: ""; position: absolute; width: 70px; height: 70px; bottom: -15px; right: -15px; border-right: 1px dashed #d6151a; border-bottom: 1px dashed #d6151a; border-radius: 0 0 70px 0; } #history .list .block .text-edit { padding: 15px 0; color: #666; max-width: 600px; } #history .list .block .text-edit .img { margin: 20px 0; } #history .list .block .text-edit .img img { max-width: 100%; width: auto; height: auto!important; } #history .list .block .text-edit .dot-template li { padding: 30px 0 30px 20px; line-height: 30px; position: relative; border-top: 1px solid #ddd; } #history .list .block .text-edit .dot-template li:first-child { border-top: none; } #history .list .block .text-edit .dot-template li:before { content: ""; width: 8px; height: 8px; border-radius: 50%; display: block; position: absolute; top: 40px; left: 0; background: #d6151a; } #history .list .block.awards .year span:after { content: "AWARDS"; display: block; text-align: center; font-size: 1rem; font-weight: normal; margin-top: -10px; } #history .year-dot { position: relative; padding: 0 60px; text-align: center; } #history .year-dot:before { pointer-events: none; content: ""; position: absolute; bottom: 6px; left: 60px; width: calc(100% - 120px); height: 2px; background-color: #ddd; } /*#history .year-dot .slick-disabled { pointer-events: none !important; opacity: .2 !important; }*/ #history .year-dot .slick-arrow { position: absolute; top: 18px; z-index: 2; width: 50px; height: 50px; -webkit-border-radius: 50%; border-radius: 50%; border: 2px solid #aaa; font-size: 0; background-color: transparent; } #history .year-dot .slick-arrow:before { pointer-events: none; content: ""; position: absolute; top: 17px; left: 18px; width: 12px; height: 12px; border-right: 2px solid #aaa; border-top: 2px solid #aaa; } #history .year-dot .slick-prev { left: 0; } #history .year-dot .slick-next { right: 0; } #history .year-dot .slick-prev:before { -webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); } #history .year-dot .slick-next:before { left: 14px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } #history .year-dot .slick-arrow:hover { background-color: #d6151a; border-color: #d6151a; } #history .year-dot .slick-arrow:hover:before { border-color: #fff; } #history .year-dot .year button { display: block; width: 100%; position: relative; padding-bottom: 15px; color: #aaa; font-size: 20px; background-color: transparent; border: none; font-weight: bold; } #history .year-dot .year button:before { pointer-events: none; content: ""; position: absolute; z-index: 1; bottom: 0; left: 50%; margin-left: -6px; width: 12px; height: 12px; -webkit-border-radius: 50%; border-radius: 50%; background-color: #aaa; } #history .year-dot .slick-current .year button { color: #d6151a; } #history .year-dot .slick-current .year button:before { background-color: #d6151a; } .rwd-img { width: 100%; max-width: 100%; } @media only screen and (max-width:991px) { #history .list { margin: 50px 0 20px 0; } #history .list .block .year { width: 90px; height: 90px; font-size: 1.625rem; } #history .list .block .year:before { width: 55px; height: 55px; } #history .list .block .text-edit { font-size: 0.937rem; } #history .list .block.awards .year span:after { font-size: 0.875rem; } #history .list .block .main { padding-left: 140px; } } @media only screen and (max-width:767px) { #history { padding: 40px 0; } #history .list { background-position: 30px 0; margin: 40px 0 20px 0; } #history .list .block { width: 100%; padding-right: 0px; padding-left: 0; } #history .list .block .year { position: relative; top: auto; left: auto; margin: 0 auto; } #history .list .block.awards .year span:after { font-size: 0.75rem; } #history .list .block .main { padding: 0; } } /*worldwide*/ #locations .g-title { text-align: center; text-transform: uppercase; margin: 0 0 20px 0; padding: 0; color: #fff; } #locations .g-title:before { display: none; } #locations .search-wrap { padding: 80px 0 0px; position: relative; -webkit-transition: padding 0.5s, background 0.5s; -o-transition: padding 0.5s, background 0.5s; transition: padding 0.5s, background 0.5s; } #locations .search-wrap:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 90%; background: #f6f6f6; z-index: -1; -webkit-transition: height 0.5s, background 0.5s; -o-transition: height 0.5s, background 0.5s; transition: height 0.5s, background 0.5s; } #locations .search-wrap .g-title { color: #000; } #locations .search-wrap .text { font-size: 1.125rem; color: #666; } #locations .search-wrap .search { width: 500px; margin: 20px auto 0; display: block; position: relative; } #locations .search-wrap .search input { border: 5px solid #d6151a; width: 100%; height: 60px; line-height: 60px; padding: 0 60px 0 15px; background: #fff; } #locations .search-wrap .search input::-webkit-input-placeholder { color: #ccc; } #locations .search-wrap .search input::-moz-placeholder { color: #ccc; } #locations .search-wrap .search input:-ms-input-placeholder { color: #ccc; } #locations .search-wrap .search .send { position: absolute; top: 0; right: 0; width: 60px; height: 100%; background: #d6151a; color: #fff; border: none; font-size: 1.25rem; } #locations .search-wrap.full { position: relative; z-index: 2; background: #f6f6f6; padding: 200px 0 250px; display: -webkit-box; display: -ms-flexbox; display: flex; } #locations .search-wrap.full:before, #locations .search-wrap.full:after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; opacity: 0.11; z-index: -1; } #locations .search-wrap.full:before { left: 0%; background: url(../images/bg-shape.svg) no-repeat -25% top; } #locations .search-wrap.full:after { left: 55%; background: url(../images/bg-shape.svg) no-repeat 0% bottom; } @media only screen and (max-width:1366px) { #locations .search-wrap.full:before { left: -25%; } #locations .search-wrap.full:after { left: 60%; } } @media only screen and (max-width:991px) { #locations .search-wrap.full:before { left: 0; background-size: auto 100%; } #locations .search-wrap.full:after { display: none; } } @media only screen and (max-width:767px) { #locations .search-wrap { padding: 50px 0 0px; } #locations .search-wrap .search { width: 100%; } #locations .search-wrap.full { padding: 80px 0 100px; } } #locations .map-ban { background: url(../images/worldwide_bg.jpg) no-repeat center center; background-size: cover; padding: 80px 0; } #locations .map-ban .map { max-width: 1200px; margin: auto; position: relative; } #locations .map-ban .map svg g { cursor: pointer; -webkit-transition: fill 0.35s; -o-transition: fill 0.35s; transition: fill 0.35s; } #locations .map-ban .map svg g text { pointer-events: none; fill: #fff; font-weight: 700; font-size: 1rem; text-transform: uppercase; } #locations .map-ban .map svg g.active { fill: #d6151a; } @media only screen and (min-width:992px) { #locations .map-ban .map svg g:hover { fill: #d6151a; } } @media only screen and (max-width:1199px) { #locations .map-ban .map { height: 0; padding-bottom: 50%; } #locations .map-ban .map svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } } @media only screen and (max-width:991px) { #locations .map-ban { padding: 60px 0; } #locations .map-ban .title { margin-bottom: 30px; } #locations .map-ban .map svg { -webkit-transform: scale(1.15); -ms-transform: scale(1.15); transform: scale(1.15); } } @media only screen and (max-width:767px) { #locations .map-ban { padding: 40px 0; } } #locations .service-list { padding: 50px 0; display: none; } #locations .service-list .category { margin-bottom: 50px; text-align: center; font-size: 0; } #locations .service-list .category ul { margin: 0 -5px; } #locations .service-list .category ul li { display: inline-block; vertical-align: middle; padding: 5px; } #locations .service-list .category ul li button { border-radius: 30px; border: 1px solid #ddd; font-size: 1rem; color: #666; padding: 10px; width: 160px; background: none; text-transform: uppercase; -webkit-transition: border 0.35s, color 0.35s; -o-transition: border 0.35s, color 0.35s; transition: border 0.35s, color 0.35s; } #locations .service-list .category ul li.active button { border-color: #d6151a; color: #fff !important; background: #d6151a; } #locations .service-list .results-text { color: #999; margin-bottom: 15px; font-size: 1.125rem; } #locations .service-list .list-table .flex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 15px; } #locations .service-list .list-table .flex .box { display: inline-block; vertical-align: top; padding: 15px; font-size: 1rem; } #locations .service-list .list-table .flex .b1 { -webkit-box-flex: 1; -ms-flex: 1 1 15%; flex: 1 1 15%; } #locations .service-list .list-table .flex .b2 { -webkit-box-flex: 1; -ms-flex: 1 1 40%; flex: 1 1 40%; } #locations .service-list .list-table .flex .b3 { -webkit-box-flex: 1; -ms-flex: 1 1 15%; flex: 1 1 15%; } #locations .service-list .list-table .flex .b4 { -webkit-box-flex: 1; -ms-flex: 1 1 20%; flex: 1 1 20%; } #locations .service-list .list-table .flex .b5 { -webkit-box-flex: 1; -ms-flex: 1 1 10%; flex: 1 1 10%; text-align: center; } #locations .service-list .list-table .head { background: #000; } #locations .service-list .list-table .head .box { font-size: 1.125rem; color: #fff; text-transform: uppercase; } #locations .service-list .list-table .list-content .item { border-bottom: 1px solid #eee; } #locations .service-list .list-table .list-content .item:nth-child(even) { background: #f6f6f6; } #locations .service-list .list-table .list-content .item .tel, #locations .service-list .list-table .list-content .item .fax { padding-left: 32px; margin: 0; position: relative; overflow: hidden; } #locations .service-list .list-table .list-content .item .tel:before, #locations .service-list .list-table .list-content .item .fax:before { content: ""; position: absolute; left: 0; top: 0; background-image: url(../images/icons-tel.png); background-size: auto 25px; width: 25px; height: 25px; } #locations .service-list .list-table .list-content .item .tel:before { background-position: 0 0; } #locations .service-list .list-table .list-content .item .fax:before { background-position: 100% 0; } #locations .service-list .list-table .list-content .item a { color: #000; } #locations .service-list .list-table .list-content .item .link { font-size: 1.875rem; color: #d6151a; } @media only screen and (min-width:992px) { #locations .service-list .category ul li:hover button { border-color: #d6151a; color: #000; } #locations .service-list .list-table .list-content .item .link { position: relative; z-index: 2; } #locations .service-list .list-table .list-content .item .link:before { content: ""; position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; display: block; z-index: -1; border-radius: 50%; background: #d6151a; -webkit-transform: translate(-50%, -50%) scale(0); -ms-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); } #locations .service-list .list-table .list-content .item .link:hover { color: #fff; -webkit-transition: color 0.25s; -o-transition: color 0.25s; transition: color 0.25s; } #locations .service-list .list-table .list-content .item .link:hover:before { -webkit-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); -webkit-transition: -webkit-transform 0.25s; transition: -webkit-transform 0.25s; -o-transition: transform 0.25s; transition: transform 0.25s; transition: transform 0.25s, -webkit-transform 0.25s; } } @media only screen and (max-width:1479px) { #locations .service-list .list-table .flex .b1 { -webkit-box-flex: 1; -ms-flex: 1 1 18%; flex: 1 1 18%; } #locations .service-list .list-table .flex .b2 { -webkit-box-flex: 1; -ms-flex: 1 1 35%; flex: 1 1 35%; } #locations .service-list .list-table .flex .b3 { -webkit-box-flex: 1; -ms-flex: 1 1 20%; flex: 1 1 20%; } #locations .service-list .list-table .flex .b4 { -webkit-box-flex: 1; -ms-flex: 1 1 22%; flex: 1 1 22%; } #locations .service-list .list-table .flex .b5 { -webkit-box-flex: 1; -ms-flex: 1 1 5%; flex: 1 1 5%; } } @media only screen and (max-width:1199px) { #locations .service-list .category { margin-bottom: 40px; } #locations .service-list .category ul li button { font-size: 0.937rem; width: 140px; padding: 10px 5px; } #locations .service-list .list-table .flex .box { font-size: 0.937rem; padding: 13px 10px; } #locations .service-list .list-table .head .box { font-size: 1rem; } #locations .service-list .list-table .list-content .item .tel, #locations .service-list .list-table .list-content .item .fax { padding-left: 25px; } #locations .service-list .list-table .list-content .item .tel:before, #locations .service-list .list-table .list-content .item .fax:before { background-size: auto 20px; width: 20px; height: 20px; top: 2px; } } @media only screen and (max-width:991px) { #locations .service-list .category { margin-bottom: 0px; } #locations .service-list .category ul { margin: 0 -2px 0 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } #locations .service-list .category ul li { width: 33.33%; padding: 0; margin: -1px 0 0 -1px; } #locations .service-list .category ul li button { width: 100%; height: 100%; border-radius: 0; background: #aaa; color: #fff; padding: 10px 0; } #locations .service-list .list-table .flex { display: block; } #locations .service-list .list-table .flex .box { display: block; padding: 0; } #locations .service-list .list-table .flex .b1 { color: #d6151a; font-size: 1rem; font-weight: 700; margin: 5px 0; } #locations .service-list .list-table .flex .b5 { position: absolute; right: 20px; top: 50%; width: 50px; height: 50px; margin-top: -25px; } #locations .service-list .list-table .head { display: none; } #locations .service-list .list-table .list-content { border-top: 2px solid #aaa; } #locations .service-list .list-table .list-content .item { padding: 15px 60px 15px 20px; position: relative; } #locations .service-list .list-table .list-content .item .link-mail { color: #2156c1; } #locations .service-list .list-table .list-content .item .link { width: 100%; height: 100%; border-radius: 50%; background: #d6151a; color: #fff; display: block; font-size: 1.25rem; } #locations .service-list .list-table .list-content .item .link i { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } @media only screen and (max-width:767px) { #locations .service-list .category ul li { width: 50%; } #locations .service-list .list-table .flex .b5 { width: 40px; height: 40px; margin-top: -20px; } } /*sitemap*/ #sitemap { padding: 100px 0; position: relative; z-index: 1; background: #f6f6f6; } #sitemap:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.1; background: url(../images/bg-shape.svg) no-repeat left center; background-size: auto 100%; z-index: -1; } #sitemap .g-title { text-align: center; text-transform: uppercase; margin: 0; padding: 0; } #sitemap .g-title:before { display: none; } #sitemap .list { font-size: 0; margin: 40px -15px 0; position: relative; z-index: 2; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } #sitemap .list > li { width: 100%; display: inline-block; vertical-align: top; font-size: 1rem; margin: 15px; padding: 30px 40px 20px 40px; background: #fff; } #sitemap .list > li .ti { font-size: 1.625rem; color: #000; font-weight: 700; margin: 0 0 5px 0; text-transform: uppercase; position: relative; } #sitemap .list > li .ti:before { content: ""; position: absolute; width: 40px; height: 2px; background: #d6151a; left: -50px; top: 50%; margin-top: -1px; } #sitemap .list > li ul li { display: inline-block; vertical-align: top; position: relative; padding: 0 30px 0 20px; } #sitemap .list > li ul li:before { content: ""; position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #d6151a; } #sitemap .list > li ul li a { color: #666; font-size: 1.125rem; } @media only screen and (min-width:992px) { #sitemap .list > li ul li a:hover { text-decoration: underline; } } @media only screen and (max-width:1199px) { #sitemap .list > li .ti { font-size: 1.25rem; } #sitemap .list > li ul li a { font-size: 1rem; } } @media only screen and (max-width:991px) { #sitemap { padding: 60px 0; } #sitemap .list > li { width: calc(50% - 30px); } } @media only screen and (max-width:767px) { #sitemap .title { font-size: 1.875rem; } #sitemap .list { display: block; } #sitemap .list > li { width: calc(100% - 30px); } } /*other*/ #other .container { padding: 80px 20px; } #other .container .g-title { padding: 0; margin: 0; } #other .container .g-title:before { display: none; } #other .container .text { margin: 50px 0; }