/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
ul {
list-style: none;
padding-left: 0;
margin-bottom: 0;
}
a {
text-decoration: none;
color: #303031;
}
a:hover {
text-decoration: none;
color: #303031;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.table td {
border-top: none
}
input:focus {
outline: none;
}
.form-control:focus {
border-color: #ced4da;
outline: none;
box-shadow: none;
}
h2{ font-size: 1.8rem;}
h3 {
font-size: 1.5rem;
}
/*===RWD img===*/
img {
max-width: 100%;
height: auto;
}
* {
margin: 0;
padding: 0;
border: 0;
font-weight: 300;
vertical-align: baseline;
box-sizing: border-box;
}
body {
font-size: 1rem;
line-height: 1.5;
letter-spacing: .05em;
color: var(--dark-color);
position: relative;
font-family: 'Poppins', sans-serif;
font-family: 'Noto Sans TC', sans-serif;
}
button:focus,
a:focus {
outline: none;
}
:root {
--main-color: #1F4886;
--sub-color: #D5AD4F;
--mark: #FFDE5D;
--dark-color: #5a5a5a;
--gray-color: #E9E9E9;
}
.moreBtn{
background-color: var(--main-color);
color: var(--white);
font-size: 85%;
}
.moreBtn a {
color: var(--white);
}
.mainBtn {
background: linear-gradient(to bottom, #e6bd5c 0%, #e6bd5c 28%, #c7a045 100%);
color: var(--white);
}
.mainBtn a {
color: var(--white) !important;
}
.btn.focus,
.btn:focus {
box-shadow: none;
}
.w1400 {
max-width: 1366px;
width: 100%;
height: 100%;
margin: auto;
}
.content_block {
max-width: 1920px;
margin: auto;
position: relative;
overflow: hidden;
}
section{padding: 2.5rem 0;}
.gotop {
position: fixed;
right: 5px;
bottom: 40px;
text-align: center;
display: block;
cursor: pointer;
z-index: 100;
width: 50px;
height: 50px;
border-radius: 50%;
line-height: 50px;
color: var(--white);
background-color:var(--main-color) ;
border: 1px solid var(--main-color);
font-size: 14px;
transition: all .5s;
animation: 3s arrowTop ease-out infinite;
}
.gotop:hover {
background-color: var(--main-color);
color: #ffffff;
}
@keyframes arrowTop {
0%,
100%,
20%,
50%,
80% {
-webkit-transform: translateY(0);
transform: translateY(0)
}
40% {
transform: translateY(-20%)
}
60% {
transform: translateY(-10%)
}
}
@media (min-width: 991px) {
section {
padding: 4rem 0;
}
.title {
font-size: 1.6rem;
}
.subtitle {
font-size: 1.125rem;
}
}
/* footer 區域 */
footer {
background: var(--gray-color);
position: relative;
}
footer p,
footer a {
color: var(--dark-color);
line-height: 1.7;
margin-bottom: 5px;
}
footer p span{margin-left: .5rem;}
footer .footer-item {
padding: 2rem 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
footer .footer-item .item h4 {
font-size: 1.125rem;
font-weight: 600;
}
footer .footer-item .item ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
footer .footer-item .item ul li {
flex: 1 0 auto;
margin: 1% 5% 1% 0;
}
footer .footer-item .item {
margin-bottom: 1rem;
flex: 1 0 100%;
}
footer .footer-item .item.logo img {
display: block;
margin: auto;
width: 200px;
}
footer .footer-item .item.map iframe {
width: 100%;
height: 100%;
}
footer a:hover {
color: var(--dark-color);
text-decoration: underline;
}
.copy {
background-color: var(--main-color);
padding: 1rem 0;
font-size: 85%;
}
.copy .container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.copy p {
color: var(--white);
flex: 1 0 auto;
}
.photonic-footer {
display: flex;
flex-wrap: wrap;
}
.photonic-footer li:not(:last-child)::after {
content: '|';
color: var(--white);
padding: 0 5px;
}
.photonic-footer li a {
padding: 0;
text-align: center;
color: var(--white);
}
.photonic-footer li a:hover {
color: var(--white);
}
footer .item.logo a {
margin: 0;
width: 100%;
padding: 0;
}
@media (min-width: 992px) {
footer .footer-item .item {
flex: 1 0 24%;
margin: 0 1%;
}
footer .item.logo {
flex: 1 0 13%;
}
footer .footer-item .conta-info {
flex: 1 0 25%;
position: relative;
margin-right: 15px;
}
footer .footer-item .conta-info:after {
content: '';
width: 1px;
height: 85%;
background-color: var(--white);
position: absolute;
right: 0;
top: 0;
}
.copy p {
flex: 0 0 50%;
}
}
/* footer 區域 end*/
/* 手機漢堡選單 */
.brand {
position: absolute;
right: 1rem;
top: 1rem;padding: 5px;
}
.brand label{margin-bottom: 0; position: relative;}
.brand label div{
position: relative;
top: 3px;
height:2px;
background-color: #666666;
margin-bottom: 6px;
transition: 0.3s ease transform,
0.3s ease top,
0.3s ease width,
0.3s ease right;
border-radius: 2px;
width: 26px;
}
.brand label div:first-child {
transform-origin: 12px;
}
.brand label div:last-child {
margin-bottom: 0;
transform-origin: 26px;
}
.brand label div:nth-child(2) {
right: 0;
width: 85%;
}
#menu_checkbox:checked+label div:first-child {
top:6px;
transform: rotateZ(45deg);
}
#menu_checkbox:checked+label div:last-child {
top: 4px;
transform: rotateZ(45deg);
}
#menu_checkbox:checked+label div:nth-child(2) {
width: 30px;
top: 0;
transform: rotateZ(-45deg);
}
#menu_checkbox{display: none;}
/* 手機漢堡選單end */
/* 主選單開始 */
.navbar {
padding: 0;
position: fixed;
display: block;
top: 0;
left: 0;
width: 100%;
background-color: var(--white);
box-shadow: 0 5px 10px rgb(0 0 0 / 2%);
z-index: 100;
}
.navbar-header {
padding: 0;
}
.navbar-nav {
opacity: 0;
transform: translate(0 , -100%);
transition: all .5s ease-in-out;
}
.navbar-header .menuBottom{width: 100%; display: block;text-align: left;padding: 15px;margin-top: 1.5rem; font-size: 90%; line-height: 1.5;opacity: 0;transform: translate(0 , 100%); transition: all .5s ease-in-out;animation-delay: 1.5s;}
.navbar-collapse.show .menuBottom{opacity: 1; transform: translate(0 , 0);}
.navbar-collapse.show .navbar-nav {
opacity: 1;
transform: translate(0 , 0);
}
@media (min-width: 1025px) {
.navbar-nav {
height: 100%;
opacity: 1;
transform: translate(0);
align-items: center;
flex-direction: row;
}
.navbar-nav li {
height: 100%;
}
.navbar-header {
display: flex;
justify-content: space-between;
padding: 0;
}
.navbar-header .menuBottom {
display: none;
}
}
@media (min-width: 1025px) {
.brand {
display: none;
}
#navbar-menu {
display: flex;
justify-content: flex-end;
position: relative;
overflow-y: auto;
}
}
.logo a {
width: 90px;
padding-top: 48px;
background-size: cover;
display: block;
margin: .5rem .5rem .5rem 2%;
}
.bootsnav ul.nav>li>a {
color: var(--dark-color);
text-decoration: none;
text-align: center;
padding: .5rem 1.5rem;
height: 100%;
display: flex;
align-items: center;
position: relative;
font-weight: 300;
}
.bootsnav ul.nav>li.active>a,
.bootsnav ul.nav>li>a:hover{
color: var(--sub-color);
}
.contact_menu span {
display: block;
margin-right: 5px;
}
@media (min-width: 992px) {
.logo a {
margin: .5rem .5rem .5rem 4rem;
width: 116px;
padding-top: 60px;
}
.bootsnav ul.nav>li:not(:last-child)>a:after {
content: '';
height: 25px;
width: 1px;
background-color: #ccc;
position: absolute;
left: 0;
}
.bootsnav ul.nav>li:first-child>a:after {
display: none;
}
}
@media (max-width: 1024px) {
.navbar-collapse {
overflow-y: auto;
background-color: #f9f9f9;
height: 100vh;
text-align: center;
position: relative;
}
.bootsnav .navbar-collapse ul.nav>li>a {
font-weight: 500;
font-size: 1.125rem;
border-bottom: 1px solid #d8d8d8;
/* justify-content: center; */
padding: 1rem 2rem;
}
}
/* slick輪播 */
.slider {
position: relative;
overflow: hidden;
width: 100%;
margin-top: 64px;
}
.slider .slick-dotted.slick-slider {
margin-bottom: -6px;
}
.slider .slick-next {
width: 80px;
height: 80px;
background-color: rgba(153, 153, 153, 0.25);
border-radius: 50%;
position: absolute;
top: calc(50% - 0px);
right: -40px;
cursor: pointer;
transition: background-color 0.3s ease-in-out,
color 0.3s ease-in-out;
}
.slider .slick-next:before{
content: "";
width: 10px;
height: 10px;
position: absolute;
left: 20%;
top: calc(50% - 5px);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
border-width: 3px;
border-color: transparent #fff #fff transparent;
border-style: solid;
}
.slider .slick-prev {
width: 80px;
height: 80px;
background-color: rgba(153, 153, 153, 0.25);
border-radius: 50%;
position: absolute;
top: calc(50% - 0px);
left: -40px;
cursor: pointer;
z-index: 1;
transition: background-color 0.3s ease-in-out,
color 0.3s ease-in-out;
}
.slider .slick-prev:before {
content: "";
width: 10px;
height: 10px;
position: absolute;
right: 20%;
top: calc(50% - 5px);
transform: rotate(-45deg);
border-width: 3px;
border-color: #fff transparent transparent #fff;
border-style: solid;
z-index: 1;
}
.slick-dotted.slick-slider{margin-bottom: 0;}
@media (min-width: 992px) {
.slider .slick-prev,
.slider .slick-next {
width: 150px;
height: 150px;
}
.slider .slick-prev{
left: -75px;
}
.slider .slick-next {
right: -75px;
}
.slider .slick-next:before,
.slider .slick-prev:before {
width: 20px;
height: 20px;
top: calc(50% - 10px);
}
}
@media (min-width: 992px) {
.slider {
margin-top: 65px;
}
.slider .slick-dots {
position: absolute;
width: 30px;
bottom: 5%;
right: 2rem;
}
.slider .slick-dots li button:before {
color: transparent;
border: 2px solid var(--white);
border-radius: 50%;
width: 14px;
height: 14px;
line-height: 14px;
opacity: 1;
}
.slider .slick-dots li.slick-active button:before {
background-color: #F3E166;
border: 2px solid #F3E166;
color: transparent;
opacity: 1;
}
}
/* slider輪播 end*/
/* 特色 */
.feature-box {
background-color: var(--gray-color);
}
.index-title {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
margin: 0 15px;
margin-bottom: 1rem;
justify-content: space-between;
}
.title-txt {
color: var(--main-color);font-weight: 600;font-size: 2em;margin-bottom: 0;
}
.title-txt span{ color: var(--sub-color); font-size: 1rem; margin-left: 5px;display: inline-block;}
.index-title .title-txt span {
display: block;
}
.feature-box .slick-slide{ margin: 0 15px;}
.feature {
position: relative;
}
.feature .img{padding-top: 50%; border-radius: 0 0 15px 0;background-size: cover;background-repeat: no-repeat;margin-bottom: 0.5rem;}
.feature .title{color:var(--main-color);font-weight: 600; font-size: 1.4rem;}
.feature p{font-size: 1.125rem;}
.feature .slick-arrow {
background-color: var(--white);
border-radius: 50%;width: 40px;
height: 40px;
position: absolute;
z-index: 10;
}
.feature .slick-prev{left:-15px;}
.feature .slick-next {
right: -15px;
}
.feature .slick-prev:before {
font-family: 'Material Icons';
content:'arrow_back_ios';
color: var(--dark-color);
}
.feature .slick-next:before{
font-family: 'Material Icons';
content:'arrow_forward_ios';
color: var(--dark-color);
}
.feature .slick-dots li button:before {
color: var(--main-color);
}
.feature .slick-dots li.slick-active button:before {
color: var(--white);
}
@media (min-width: 992px) {
.index-title .title-txt span { display: inline;}
}
@media (min-width: 1440px) {
.feature .slick-prev {
left: -40px;
}
.feature .slick-next {
right: -40px;
}
}
/* 特色 end*/
/* 快手特助簡介 */
.performaance-box {
position: relative;
background: url(/frontEndPackage/images/performaance-bg.png),#6188C5;
background-position: bottom center;
background-size: contain;
background-repeat: no-repeat;
padding: 0;
}
.performaance{display: flex;flex-wrap: wrap; }
.performaance .title-txt,
.performaance .title-txt span {
color: var(--white);
margin-bottom: .8rem;
}
.performaance .txt {
padding: 4rem 1rem 2rem;
color: var(--white);
line-height: 1.5;
letter-spacing: 1px;
}
.performaance .txt p{font-size: 1.125rem;}
.performaance .img{
margin-top: -1.5rem;
margin-bottom: -1.5rem;
}
.performaance .img img{
width: 100%;
}
@media (min-width: 992px) {
.performaance .txt {
flex: 0 0 45%;
padding: 4rem 4rem 2rem;
}
.performaance .img { flex:0 0 55%;}
}
/* 快訊報告 */
.news-box{position: relative;}
.news-box:after {
content: '';
width: 100%;
height: 50%;
background: url(/frontEndPackage/images/bg.png);
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
}
.news-box ul.news-item{display: flex;flex-wrap: wrap;width: 100%;margin: 0;}
.news-box .slick-slide {
margin: 0 30px;
}
.news-box .slick-dots li.slick-active button:before {
color: var(--white);
}
.news-box .slick-dots li button:before {
color: var(--white);
}
.news-box ul li a{display: flex;flex-wrap:wrap;width: 100%;padding:1.5rem 0 0;}
.news-box ul .img{
padding-bottom: 35%;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 100%;
}
.news-box ul .txt {
background-color: var(--white);
box-shadow: 0 20px 50px rgba(19, 19, 26, 16%);
border-radius: 0 0 20px 0;
min-height: 200px;
width: 100%;padding: 1rem ;
}
.news-box ul .txt h3{color: var(--main-color);font-weight: 600;}
.news-box ul .txt span.date {
color: var(--sub-color);margin-bottom: .5rem;display: inline-block;
}
.news-box ul .txt p{font-size: 1.125rem;margin-bottom: 0;}
.news-box .slick-arrow {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid #ccc;
background-color: var(--white);
z-index: 1;
}
.news-box .slick-prev {
left: 0;
}
.news-box .slick-next {
right: 0;
}
.slick-prev:before {
font-family: 'Material Icons';
content: 'arrow_back_ios';
color: var(--dark-color);
}
.slick-next:before{
font-family: 'Material Icons';
content:'arrow_forward_ios';
color: var(--dark-color);
}
@media (min-width: 768px){
.news-box .slick-prev {
left: 30px;
}
.news-box .slick-next {
right: 30px;
}
}
@media (min-width: 992px) {
.news-box ul .img {
width: 31%;
padding-bottom: 20%;
margin: 1.5rem 0 1.5rem 4%;
margin-right: -1%;
}
.news-box ul .txt {
width: 62%;
padding: 1.5rem;
margin-right: 4%;
}
.news-box .slick-prev {
left: 60px;
}
.news-box .slick-next {
right: 60px;
}
}
@media (min-width: 1200px){
.news-box ul .txt {
padding: 3rem 2rem;
}
.news-box .slick-prev {
left: 280px;
}
.news-box .slick-next {
right: 280px;
}
}
/* 首頁結束 */
/* 內頁開始 */
.page-banner {
position: relative;
background-size: cover;
background-repeat: no-repeat;
background-position:55% bottom;
width: 100%;
height: 80px;margin-top: 64px;
}
.crm-banner {
height: 240px;
background-size: cover;
background-position:50% top ;
}
.page-banner .container{
display: flex;
align-items: flex-end;
}
.page-banner .txt{
color: #fff;
letter-spacing: 1px;
margin-bottom: 0;
text-shadow: 0 0 20px rgba(0, 0, 0, .5);
}
.page-banner .txt .title {
font-size: 1.6rem;
text-shadow: 0 0 15px rgba(0, 0, 0, .5);
}
.page-banner .txt p{line-height: 1.5;}
.page-content-box{padding: 0; }
.page-content-box .container-bg:after {
content: '';
position: absolute;
background-color: var(--white);
background-image: linear-gradient(to right, #f2f2f2 0, #f2f2f2 100%),
linear-gradient(to right, #f2f2f2 0, #f2f2f2 100%),
linear-gradient(to right, #f2f2f2 0, #f2f2f2 100%);
background-size: 1px 100%;
background-position:
33.33% 0,
66.66% 0,
99.99% 0;
background-repeat: no-repeat;
width: 100%;
height: 100%;
z-index: -1;
left: 0;
top: 0;
}
.breadcrumbs{display: flex; align-items: center;flex-wrap: wrap; padding: .5rem 30px ;}
.breadcrumbs li a {
color: var(--dark-color);
font-size: 14px;
text-shadow: 0 0 5px rgb(0 0 0 / 5%);
}
.breadcrumbs li:not(:last-child)::after {
content: '/';
padding: 0 .5rem;
color: var(--dark-color);
}
.breadcrumbs li:last-child {
font-size: 14px;
color:var(--sub-color);
}
.page-content {
background: url(../images/bg3.png) no-repeat bottom center/contain;
width: 100%;
}
.content-box{width: 100%;display: flex;flex-wrap: wrap;justify-content: space-between;}
.content-box .category-list {
flex: 1 0 100%;
order: -1;
transition: all .5s ease-out;
}
.content-box .category-list.sticky{position: fixed;right: 0;top: 64px;z-index: 10;width: 100%; }
.content-all {
flex:1 0 100%;
padding:0 20px;
letter-spacing: .08em;
min-height: 400px;
}
.title-name{
color: var(--main-color);
font-size: 1.6rem;
text-align: center;
margin:1.5rem auto 2rem;
}
.title-name span{background-color: var(--white);display: inline-block;text-align: center;font-weight: bold;position: relative;}
.title-name span:before,.title-name span:after {content:''; height: 1px;width: 60px;background-color: var(--main-color);position: absolute;}
.title-name span:before {left: -70px;top: 50%;}
.title-name span:after { right: -70px;top: 50%;}
.category-list{
/* background-color: var(--white); */
margin-bottom: 2rem;position: relative;
}
.all-btn {
background: var(--main-color);
color: var(--white);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 1rem;
margin: 0 30px ;font-weight: 600;
font-size: 1.125rem;
cursor: pointer;
}
.all-btn span:before{
font-family: 'Material Icons';
content:'keyboard_arrow_up';
}
.all-btn.open span:before{
font-family: 'Material Icons';
content:'keyboard_arrow_down';
}
.all-btn:hover{
color: var(--white);
}
.slideLink {
margin: 0 30px;
display: none;
position: absolute;
background: #fff;
border: 1px solid #eaeaea;
top: 40px;
width: calc(100% - 60px);
z-index: 1;
}
.slideLink li a{display: block; padding: .5rem;}
.slideLink li a:hover {
background-color: #909caf17;
}
.slideLink li.active a {
color:var(--main-color);
background-color: #6686b621;
}
.slideLink li:not(:last-child) a{ border-bottom: 1px solid #eaeaea;}
.page-num-item {
display: flex;
justify-content: center;
align-items: center;
margin: 1rem;
}
.page-num-item a.disabled{opacity: .5;}
.page-num-item a{ border: 1px solid #cccccc;border-radius: 5px; width:36px;height:36px;line-height:36px;text-align: center;display: block;margin: 0 .5rem;}
.page-num-item a span {
line-height: 36px;
}
@media (min-width: 1100px) {
.page-content-box .container-bg {
position: relative;
margin-top: -2rem;
}
.page-content-box .container-bg:before {
content: '';
width: 100%;
height: 80px;
position: absolute;
top: -2rem;
left: 0;
z-index: -2;
box-shadow: rgba(0, 0, 0, 0.15) 0px 25px 50px;
}
.page-content-box .container-bg:after{
background-image: linear-gradient(to right, #f2f2f2 0, #f2f2f2 100%),
linear-gradient(to right, #f2f2f2 0, #f2f2f2 100%),
linear-gradient(to right, #f2f2f2 0, #f2f2f2 100%),
linear-gradient(to right, #f2f2f2 0, #f2f2f2 100%),
linear-gradient(to right, #f2f2f2 0, #f2f2f2 100%),
linear-gradient(to right, #f2f2f2 0, #f2f2f2 100%);
background-size: 1px 100%;
background-position: 0% 0,
20% 0,
40% 0,
60% 0,
80% 0,
100% 0;
}
.page-banner {
margin-top: 76px;
background-size: cover;
height: 160px;
}
.title-name {
font-size: 1.8rem;
}
.page-banner .txt .title{font-size: 2rem;margin-bottom: 1rem;}
.page-banner .txt{margin-bottom: 2rem;}
.crm-banner {
height: 320px;
background-position:center 80%;
}
.content-all {
flex: 0 0 80%;
padding:0 20px;
line-height: 1.5;
}
.content-all-2{
flex: 0 0 100%;
}
.content-box .category-list {
width: 20%;
flex: 0 0 20%;
order: 1;
}
.content-box .category-list.sticky {
position: relative;
right: auto;
top: auto;
width: 20%;
}
.content-box .all-btn {
background: transparent;
color: var(--main-color);
border-bottom: 2px solid var(--main-color);
padding: 0.5rem 1rem;
margin:0 0 .5rem;
cursor:auto;
}
.content-box .all-btn span {
display: none;
}
.content-box .all-btn:hover {
color: var(--main-color);
}
.content-box .slideLink {
margin: 0;
display: block;
width: 100%;
top: 42px;
border:none;
background-color: transparent;
}
}
.main-page-num{display: flex;justify-content: center;margin-bottom: 2rem;margin-top: 1rem;}
.main-page-num li a{display: block;margin: 0 .5rem;}
.main-page-num li a:hover{text-decoration: underline;}
.pageAd{width: 100%;height: 100%; margin:0;position: relative;}
.pageAd .img {
background-repeat: no-repeat;
background-size: cover;
background-position: 80% top;
position:absolute;
top: 0;
width: 100%;
padding-top: 85%;
}
.pageAd .txt{width: 100%;padding:2rem 0 0;}
.pageAd .txt .moreBtn{margin: 0 15px;}
@media (min-width: 768px) {
.pageAd .img {
padding-top: 30%;
min-height:400px;
position: relative;
top: 0;
left: 0;
background-position: center bottom;
background-size: cover;
}
.pageAd .txt {
width: 45%;
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
font-size:1.125rem;}
}
@media (min-width: 1200px) {
.pageAd .img{
padding-top:20%;
}
.pageAd .txt {
width: 38%;}
}
/* 快訊報告 */
.news-items li a{display: flex;flex-wrap: wrap; margin-bottom: 3rem;}
.news-items li a .img{flex:0 0 100%;padding-top: 40%;margin-bottom: 0.5rem; background-repeat: no-repeat; background-position: center;}
.news-items li a .txt{padding:0 ; font-size: 1.125rem;letter-spacing: 1px;}
.news-items li a .txt h2.title{color:var(--main-color);font-weight: 600; font-size: 1.4rem;}
.date{color: var(--sub-color);font-size: 85%;margin-bottom: 0.5rem;}
@media (min-width: 992px) {
.news-items li a .img {
flex: 1 0 40%;
background-size: cover;
padding-top: 20%;
}
.news-items li a .txt {
flex: 0 0 60%;
padding:0 20px;
}
}
/* QA */
.content-page .container-bg:after{ background-image: none;}
.content-page .content-box{position: relative;z-index: 2;}
.content-page .content-all {
padding: 0;
position: relative;
}
.content-page .content-all:after {
content: '';
height: 360px;
width: 100%;
background: url(/frontEndPackage/images/bg.png)no-repeat right bottom /cover,#1F4886 ;
position: absolute;
top: 8%;
z-index: -1;
}
.content-page .content-all .qa-items-box {
background-color: var(--white);
border-radius: 5px;
padding:1.5rem 20px;
margin-bottom: 3rem;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.content-page .content-all .qa-items-box .articleEditorBox{min-height: 360px;}
.qa-items li {
position: relative;
padding: 0.5rem 0.5rem 0.8rem 2.5rem;
border-bottom: 1px dashed #ccc;letter-spacing: 1px;
}
.QAtitle {
position: relative;
padding: 0.5rem 15px 0.8rem 2.5rem;
margin:0 1rem;
color: var(--main-color);
font-weight: 600;
}
.qa-items li:before,
.QAtitle:before {
content:'Q';
width: 30px;
line-height: 30px;
height: 30px;
font-size: 1.125rem;
text-align: center;
border-radius: 50%;
background-color: var(--main-color);
color: #fff;
display: block;
position: absolute;
left: 0;
}
@media (min-width: 992px) {
.content-page .content-all .qa-items-box {
padding:1.5rem 30px;
}
}
/* CRM檢測 */
.detectbg{background: url(/frontEndPackage/images/gobal.png) no-repeat center /contain; padding-bottom: 1rem;}
.detect-box .title{color: var(--main-color);font-size: 1.1rem;}
.detect-box .form-check-label {
font-size: 1.1rem;
}
.detect-box ul{display: flex;flex-wrap: wrap; border-bottom: 1px solid #cccccc;}
.detect-box .detect-ans{margin-left: 1rem;display: flex;margin-bottom: 5px;}
.detect-form,
.contact-form {
padding: 2rem 0;
}
.detect-form .subtitle {
margin-bottom: 1rem;
font-weight: 600;
color: var(--main-color);
font-size: 1.25rem;
}
.detect-box ul li .form-group {
margin-bottom: 2rem;
}
.detect-items,.contact-items{display: flex;
flex-wrap: wrap;}
#formVerification .verify-code-area {
width:49% !important;
flex: 0 0 49%;
margin-right: 2%;
order:-1;
}
label .mark{ color: var(--sub-color);font-size: 85%; background-color: transparent;}
.submitBox .moreBtn{margin: auto;width: 200px;padding: 0.5rem .8rem;display: block;}
@media (min-width: 992px) {
.detect-box ul li {
flex: 0 0 50%;
padding-right: 15px;
}
}
.about-cont .img {
margin-bottom: 1rem;
}
.about-cont{display: flex;flex-wrap: wrap;justify-content: center;}
.about-cont .txt h3{color: var(--main-color);text-decoration: underline;font-size: 1.4rem;text-align: center;font-weight: 600;}
@media (min-width: 992px) {
.about-cont .img{flex:0 0 150px;margin-right: 1rem;}
.about-cont .txt {
flex: 0 0 40%;
}
.about-cont .txt h3 {
text-align: left;
}
}