/* index_bs4_v28__OK.html inline style externalized to assets. */
@media (max-width: 800px) {
body {
/*padding-top: 50px;*/
}
}
@media (min-width: 801px) {
body {
/*padding-top: 80px;*/
}
}
/*body {
padding-top: 80px;
}*/
/**** A ****/
/**** nav第二層 ****/
.marginBottom-0 {margin-bottom:0;}
.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#555;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}
/**** nav第二層 end ****/
/**** nav透明 ****/
/*針對整體做動畫*/
*{
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
}
/*
但是全體做動畫有個缺點，當在LOGO裡面做圖的時候，文字隱藏的時候，
網站剛讀取會有動畫效果!超像bug的所以如果有在LOGO設圖片，要針對LOGO的地方動畫速度歸 0
*/
/*針對 .navbar 作一些我想要的修正*/
.navbar-scroll.navbar {
/* padding: 10px 0;
border-radius: 0px;
margin: 0;*/
}
/*也是針對想要的畫面做修正*/
.navbar-scroll.navbar-fixed-top{
/*padding:0px 0;*/
}
.navbar {
.navbar-inner {
/* background-color: #2c2c2c;
background-image: none;*/
}
}
/* navbar */
.navbar-fixed-top {
background:rgba(255,255,255, 0.0);
/*background-color: #333333;*/
/*border-color: #ffffff;*/
/*padding-bottom: 30px;*/
}
.navbar-normal{
background-color: #333333;
}
/**** nav透明 end ****/
ul.nav.navbar-nav{
padding-top: 30px;
}
.navbar-default{
/*background-color:#024DAA;*/
/*background-color:rgba(0, 0, 0, 0.8);*/
/*background-color:#333333;*/
}
.nav.navbar-nav>li>a{
color: #FFFFFF;
}
.nav.navbar-nav>.active>a{
background-color:#024DAA;
color: #FFFFFF;
}
/*.navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover{
background-color:#FFFFFF;
color: #fff000;
}*/
/*.dropdown:not(.-noChildren):hover .dropdown-toggle
{
background-color:#FFFFFF;
color: #024DAA;
border-bottom: 1px solid #fff000;
}*/
.dropdown:not(.-noChildren):hover .dropdown-toggle
{
background-color:#FFFFFF;
/*color: #024DAA;*/
/*border-bottom: 1px solid #fff000;*/
}
.dropdown-submenu:not(.-noChildren):hover .dropdown-toggle
{
background-color:#8C8C8C;
color: #FFFFFF;
}
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover{
background-color:#FFFFFF;
color: #333333;
/*border-bottom: 2px solid #FF1212;*/
}
.navbar-default .navbar-nav .navbar-right>a{
background-color:#024DAA;
color: #FFFFFF;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover{
background-color:#FFFFFF;
/*color: #fff000;*/
}
.navbar-default .navbar-toggle:hover{
background-color:#333333;
}
.navbar-default .navbar-toggle .icon-bar{
background-color: #FFFFFF;
}
.dropdown-menu{
width: 100%;
min-width:200px;
}
.dropdown-menu>li{
background-color:#FFFFFF;
color: #000000;
}
.dropdown-menu>li>a{
/*background-color:#024DAA;*/
/*color: #000000;*/
}
.dropdown-menu>li>a:hover{
background-color: #8C8C8C;
color: #ffffff;
}
.nav>li>a{
padding: 15px 10px;
}
.navbar-fixed-top .navbar-collapse{
max-height: 100%
}
.navbar-fixed-top {
border-bottom-width: 0px;
}
.widget_links li a{
padding: 0 3px 0 0;
}
/**** A END ****/
/**** b1 ****/
img {
display:block;
margin: auto;
}
.full-screen {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.item_100>a{
display: block;
height: 100%;
}
/*.item img{
width: 100vw;
height: 100vh;
}
.carousel-control{
height: 100vh;
}*/
h1{
font-family: "微軟正黑體", "新細明體", Arial;
}
p{
font-family: "微軟正黑體", "新細明體", Arial;
}
.carousel-page-0001-1{
top: 25%;
/*bottom: 15%;
left: 5%;
right: 5%;*/
z-index: 10;
text-align: center;
text-shadow: 0 1px 2px rgba(0,0,0,.6);
color: #000000;
}
.carousel-page-0001-1 h1{
font-size:40px;
line-height:50px;
}
.carousel-page-0001-1 p{
font-size:20px;
line-height:25px;
}
.carousel-page-0001-2{
top: 25%;
/*bottom: 15%
left: 0%;
right: 5%;*/
z-index: 10;
text-align: center;
text-shadow: 0 1px 2px rgba(0,0,0,.6);
color: #000000;
}
.carousel-page-0001-2 h1{
font-size:40px;
line-height:55px;
}
.carousel-page-0001-2 p{
font-size:20px;
line-height:25px;
}
.carousel-page-0001-3{
top: 10%;
/*bottom: 15%;*/
/*left: 5%;*/
/*right: 5%;*/
z-index: 10;
text-align: center;
text-shadow: 0 1px 2px rgba(0,0,0,.6);
color: #000000;
}
.carousel-page-0001-3 h1{
font-size:40px;
line-height:55px;
}
.carousel-page-0001-3 p{
font-size:20px;
line-height:25px;
}
.carousel-page-0002-1{
top: 15%;
/*bottom: 15%;*/
left: 1%;
/*right: 1%;*/
z-index: 10;
text-align: center;
text-shadow: 0 1px 2px rgba(0,0,0,.6);
color: #ffffff;
}
.carousel-page-0002-1 h1{
font-size:40px;
line-height:55px;
}
.carousel-page-0002-1 p{
font-size:20px;
line-height:25px;
}
.carousel-page-0003-1{
/*top: 25%;*/
/*bottom: 5%;*/
/*left: 1%;*/
/*right: 1%;*/
z-index: 10;
text-align: center;
text-shadow: 0 1px 2px rgba(0,0,0,.6);
color: #ffffff;
}
.carousel-page-0003-1 h1{
font-size:40px;
line-height:55px;
}
.carousel-page-0003-1 p{
font-size:20px;
line-height:25px;
}
.carousel-page-0004-1{
top: 25%;
/*bottom: 15%;*/
/*left: 1%;*/
/*right: 1%;*/
z-index: 10;
text-align: center;
text-shadow: 0 1px 2px rgba(0,0,0,.6);
color: #ffffff;
}
.carousel-page-0004-1 h1{
font-size:40px;
line-height:55px;
}
.carousel-page-0004-1 p{
font-size:20px;
line-height:25px;
}
.carousel-page-0004-2{
top: 25%;
/*bottom: 15%;*/
/*left: 1%;*/
/*right: 1%;*/
z-index: 10;
text-align: center;
text-shadow: 0 1px 2px rgba(0,0,0,.6);
color: #ffffff;
}
.carousel-page-0004-2 h1{
font-size:40px;
line-height:55px;
}
.carousel-page-0004-2 p{
font-size:20px;
line-height:25px;
}
.carousel-page-0004-3{
top: 25%;
/*bottom: 15%;*/
/*left: 1%;*/
/*right: 1%;*/
z-index: 10;
text-align: center;
text-shadow: 0 1px 2px rgba(0,0,0,.6);
color: #ffffff;
}
.carousel-page-0004-3 h1{
font-size:40px;
line-height:55px;
}
.carousel-page-0004-3 p{
font-size:20px;
line-height:25px;
}
.carousel-page-0005-1{
/*top: 25%;*/
/*bottom: 5%;*/
/*left: 1%;*/
/*right: 1%;*/
z-index: 10;
text-align: center;
text-shadow: 0 1px 2px rgba(0,0,0,.6);
color: #ffffff;
}
.carousel-page-0005-1 h1{
font-size:40px;
line-height:55px;
}
.carousel-page-0005-1 p{
font-size:20px;
line-height:25px;
}
.carousel-page-0005-2{
/*top: 25%;*/
bottom: 15%;
/*left: 1%;*/
/*right: 1%;*/
z-index: 10;
text-align: center;
text-shadow: 0 1px 2px rgba(0,0,0,.6);
color: #ffffff;
}
.carousel-page-0005-2 h1{
font-size:40px;
line-height:55px;
}
.carousel-page-0005-2 p{
font-size:20px;
line-height:25px;
}
.carousel-page-0006-1{
top: 22%;
/*bottom: 5%;*/
/*left: 1%;*/
/*right: 1%;*/
z-index: 10;
text-align: center;
text-shadow: 0 1px 2px rgba(0,0,0,.6);
color: #ffffff;
}
.carousel-page-0006-1 h1{
font-size:36px;
line-height:50px;
}
.carousel-page-0006-1 p{
font-size:18px;
line-height:25px;
}
.carousel-page-0007-1{
top: 12%;
/*bottom: 5%;*/
/*left: 5%;*/
/*right: 5%;*/
z-index: 10;
text-align: center;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
color: #000000;
}
.carousel-page-0007-1 h1{
font-size:40px;
line-height:55px;
}
.carousel-page-0007-1 p{
font-size:20px;
line-height:25px;
}
/**** b1 END ****/
/**** b2 ****/
h2{
margin: 0px 0px 20px 0px;
}
.highlight {
background-color: #fff;
}
.newStyle .heading-s {
font-size: 2rem;
font-weight: bold;
line-height: 1.5; }
.newStyle .heading-xl {
font-size: 2.25rem;
font-weight: bold;
line-height: 2.5; }
.newStyle .align-center {
text-align: center; }
.newStyle .container.max-width-d {
max-width: 90em; }
.newStyle .margin-top-s {
margin-top: 1rem; }
.newStyle .margin-top-0 {
margin-top: 0; }
.newStyle .margin-top-m {
margin-top: 2rem; }
.newStyle .margin-top-l {
margin-top: 3rem; }
/* --------------- PRODUCTS HIGHLIGHT -------------- */
.newStyle .highlight a {
display: block;
padding: 2rem 0;
text-decoration: none;
transition: all .3s ease;
margin: 0; }
.newStyle .highlight a:hover {
background-color: #f0f0f0; }
/*.newStyle .highlight a figure {
margin: 2em; }*/
.newStyle .highlight a img {
height: auto;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition: -webkit-transform 0.2s ease;
transition: -webkit-transform 0.2s ease;
transition: transform 0.2s ease;
width: 100%; }
.newStyle .highlight a:hover img {
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05); }
/* =========================================================
BS4 v2 page-specific minimal patch
Target: B2-APP grid only
Reason: Bootstrap 4 no longer uses BS3 float grid behavior; the original
B2 containers had col-* items without an active .row wrapper,
causing desktop cards to stack vertically.
Frozen: navbar / dropdown-submenu / mobile hamburger / B1-HERO carousel.
========================================================= */
.newStyle .container.max-width-d.highlight.margin-top-0 {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: stretch;
align-items: stretch;
}
.newStyle .container.max-width-d.highlight.margin-top-0 > .col-xs-12,
.newStyle .container.max-width-d.highlight.margin-top-0 > .col-12 {
float: none;
}
.newStyle .container.max-width-d.highlight.margin-top-0 > .col-xs-12 > .row,
.newStyle .container.max-width-d.highlight.margin-top-0 > .col-12 > .row {
height: 100%;
margin-left: 0;
margin-right: 0;
}
.newStyle .container.max-width-d.highlight.margin-top-0 > .col-xs-12 > .row > a,
.newStyle .container.max-width-d.highlight.margin-top-0 > .col-12 > .row > a {
width: 100%;
}
.newStyle .container.max-width-d.highlight.margin-top-0 figure {
margin: 0;
}
@media (max-width: 575.98px) {
.newStyle .container.max-width-d.highlight.margin-top-0 > .col-xs-12,
.newStyle .container.max-width-d.highlight.margin-top-0 > .col-12 {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
}
@media (min-width: 576px) {
.newStyle .container.max-width-d.highlight.margin-top-0 > .col-sm-3 {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
}
/* =========================================================
BS4 v9 page-specific minimal patch
Target: B2-APP text menu font size only
Reason: The eight B2-APP text menu labels need to be three font levels
smaller while preserving the verified 2 rows x 4 columns desktop
layout, mobile single-column stacking, images, links and DOM.
Frozen: navbar / dropdown-submenu / mobile hamburger / B1-HERO / B2 grid
/ B3-CTA / footer.
========================================================= */
.newStyle .container.max-width-d.highlight.margin-top-0 figure > h2.heading-xl.align-center {
font-size: 1.5rem !important;
}
/* =========================================================
BS4 v11 page-specific minimal patch
Target: B2-APP desktop column inner spacing only
Reason: The verified B2-APP 2 rows x 4 columns layout must keep the
original BS3 inner .row negative gutter ratio; v2 set the inner
row margin to 0, which made the four card texts/images appear
with excessive left/right blank space.
Frozen: navbar / dropdown-submenu / mobile hamburger / B1-HERO / B2 grid
count / B2 text font size / B3-CTA / footer.
========================================================= */
.newStyle .container.max-width-d.highlight.margin-top-0 > .col-xs-12 > .row,
.newStyle .container.max-width-d.highlight.margin-top-0 > .col-12 > .row {
margin-left: -15px !important;
margin-right: -15px !important;
}
/* =========================================================
BS4 v11 page-specific minimal patch
Target: B2-APP desktop card horizontal ratio only
Reason: Bootstrap 4 .container desktop widths are slightly narrower than
Bootstrap 3. Restore the original BS3 container breakpoint widths
for the B2-APP card containers only, so the 4 desktop cards match
the original index.html visual proportion with less left/right blank
space while preserving the verified 2 rows x 4 columns layout.
Frozen: navbar / dropdown-submenu / mobile hamburger / B1-HERO / B2 grid
count / B2 text font size / B3-CTA / footer.
========================================================= */
@media (min-width: 768px) {
.newStyle .container.max-width-d.highlight.margin-top-0 {
width: 750px !important;
max-width: 750px !important;
}
}
@media (min-width: 992px) {
.newStyle .container.max-width-d.highlight.margin-top-0 {
width: 970px !important;
max-width: 970px !important;
}
}
@media (min-width: 1200px) {
.newStyle .container.max-width-d.highlight.margin-top-0 {
width: 1170px !important;
max-width: 1170px !important;
}
}
/* =========================================================
BS4 v12 page-specific minimal patch
Target: B2 section title font size only
Reason: Original BS3 index.html uses inline font-size: 2.5rem for the
B2 title. Bootstrap 3 root font-size is 10px, so the original
visual size is about 25px. Bootstrap 4 root font-size is 16px,
causing the same 2.5rem inline style to render too large. Restore
the original visual ratio by overriding only this B2 title on
desktop to 1.5625rem (=25px).
Frozen: navbar / dropdown-submenu / mobile hamburger / B1-HERO / B2-APP
grid / B2 card spacing / B2 text menu font size / B3-CTA / footer.
========================================================= */
@media (min-width: 769px) {
body > .container > .row > h1[style*="font-size: 2.5rem"][style*="color: #337ab7"] {
font-size: 1.5625rem !important;
}
}
/**** b2 end ****/
/**** B3 ****/
.b_floor_3{
background-color: #0ca5d2;
margin-top: 2px;
}
#home_footer_bar .bar_item {
padding: 60px 20px 60px 20px;
background-color: #0ca5d2;
border-right: none;
margin-top: 0px;
}
#home_footer_bar .right_line {
border-right: 1px solid #ffffff;
}
/*手機版*/
@media (max-width: 768px) {
#home_footer_bar .right_line {
border-bottom: 2px solid #ffffff;
}
#home_footer_bar .bar_item h2 {
font-size: 1.5em;
font-weight: 200px;
/*
line-height: 1.6em;
*/
line-height: 5em;
word-spacing: 0.01em;
margin-left: none;
text-align: center;
margin-bottom: 12px;
color: #fff;
}
#home_footer_bar .bar_item p{
color: #fff;
font-weight: 200px;
line-height: 25px;
opacity: 0.8;
max-width: 340px;
}
#home_footer_bar .bar_item img {
margin-left: none;
display:block;
margin: 0 auto;
}
#home_footer_bar .bar_item a {
display: block;
max-width: 600px;
margin-right: auto;
width: 100%;
transition: all 0.5s linear 0s;
}
#home_footer_bar .bar_item a:hover{
opacity: 0.75;
filter: alpha(opacity=100);
transition: all 0.5s linear 0s;
}
#home_footer_bar .bar_item:first-child a {
margin-left: auto;
margin-right: 0;
}
}
/*手機版 end*/
/*pc版*/
@media (min-width: 769px) {
#home_footer_bar .bar_item h2 {
font-size: 1.5em;
font-weight: 200px;
/*
line-height: 1.6em;
*/
line-height: 5em;
word-spacing: 0.01em;
margin-left: 0;
margin-bottom: 12px;
color: #fff;
}
#home_footer_bar .bar_item p{
color: #fff;
font-weight: 200px;
line-height: 25px;
opacity: 0.8;
max-width: 340px;
}
#home_footer_bar .bar_item img {
margin-left: auto;
}
#home_footer_bar .bar_item a {
display: block;
max-width: 600px;
margin-right: auto;
width: 100%;
transition: all 0.5s linear 0s;
}
#home_footer_bar .bar_item a:hover{
opacity: 0.50;
filter: alpha(opacity=100);
transition: all 0.5s linear 0s;
}
#home_footer_bar .bar_item:first-child a {
margin-left: auto;
margin-right: 0;
}
}
/*pc版 end*/
/* =========================================================
BS4 v3 page-specific minimal patch
Target: B3-CTA only
Reason: Bootstrap 4 flex grid needs an explicit flex parent for the two
original BS3 .col-sm-6 CTA entries under #home_footer_bar.
Frozen: navbar / dropdown-submenu / mobile hamburger / B1-HERO / B2-APP.
========================================================= */
#home_footer_bar {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
}
#home_footer_bar > .bar_item {
float: none;
display: block;
}
#home_footer_bar > .bar_item > a {
display: block;
width: 100%;
height: 100%;
}
#home_footer_bar > .bar_item > a > .row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
height: 100%;
}
#home_footer_bar .bar_item img {
width: 130px;
max-width: 100%;
height: auto;
}
@media (max-width: 575.98px) {
#home_footer_bar > .bar_item {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
}
@media (min-width: 576px) {
#home_footer_bar > .bar_item.col-sm-6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
}
/* =========================================================
BS4 v4 page-specific minimal patch
Target: B3-CTA link underline only
Reason: Bootstrap 4 anchor default/hover state may show underline on the
two CTA links. Preserve B3 layout, blue background, and 130px icons.
Frozen: navbar / dropdown-submenu / mobile hamburger / B1-HERO / B2-APP / B3 grid.
========================================================= */
#home_footer_bar a,
#home_footer_bar a:link,
#home_footer_bar a:visited,
#home_footer_bar a:hover,
#home_footer_bar a:focus,
#home_footer_bar a:active {
text-decoration: none !important;
border-bottom: 0 !important;
}
#home_footer_bar a h2,
#home_footer_bar a p,
#home_footer_bar a .text-block {
text-decoration: none !important;
}
/**** B3 END****/
/**** footer ****/
/* ---------------------------------------------
Footer
-----------------------------------------------*/
.footer-widgets{
padding: 30px;
}
/*#footer {
position: relative;
background-color: #333333;
border-top: 0;
}*/
/**** footer-c ****/
.footer-c{
background-color: #333333;
color: #FFFFFF;
border-top: 1px solid #EEE;
}
.footer-widgets-c h4{
font-family: "微軟正黑體", "新細明體", Arial;
font-size: 16px;
text-transform: none;
letter-spacing: 1px;
word-spacing: 0px;
font-weight: normal;
font-style: normal;
color: #FFFFFF;
line-height:0px;
margin : 0 0 20px 40px;
}
.footer-widgets-c{
padding: 30px 15px;
}
.footer-widgets-c-short{
padding: 15px 15px;
}
.footer-c-dropdom-menu{
margin-left: 40px;
}
.widget_links-c ul,.widget_links-c li{
list-style-type:none;
list-style: none;
margin: 0;
}
.widget_links-c li a{
font-family: "微軟正黑體", "新細明體", Arial;
font-size: 14px;
text-transform: none;
letter-spacing: 1px;
word-spacing: 0px;
font-weight: normal;
font-style: normal;
color: #ccc;
line-height:2;
text-decoration:none;
}
.widget_links-c li a:hover{
color: #fff;
}
.widget_links-c .dropdown a{
font-family: "微軟正黑體", "新細明體", Arial;
font-size: 16px;
/*margin-left: 40px;*/
}
/**** footer-c end****/
/**** footer-button ****/
/*#footer{
background-color: #333333;
color: #FFFFFF;
}*/
.footer-button {
background-color: #292929;
color: #FFFFFF;
padding:30px;
}
.footer-button p{
font-family: "微軟正黑體", "新細明體", Arial;
font-size: 16px;
text-align:left;
text-transform: none;
}
/**** footer end ****/
/**** BS4 v1 homepage compatibility patch START ****/
/* Scope: transitional BS3 -> BS4 homepage test. Preserve visual parity; avoid content DOM rewrite. */
.navbar-fixed-top.fixed-top {
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
.navbar.navbar-default {
padding: 0;
border: 0;
border-radius: 0;
}
.navbar .container {
align-items: flex-start;
}
.navbar-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar-logo img {
max-width: 100%;
height: auto;
}
.navbar-toggle.navbar-toggler {
border: 1px solid rgba(255,255,255,.65);
padding: 9px 10px;
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
background-color: transparent;
}
.navbar-toggle.navbar-toggler .icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
background-color: #fff;
margin: 4px 0;
}
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a.dropdown-toggle,
.navbar-default .navbar-nav .dropdown-toggle {
display: block;
color: #fff;
text-decoration: none;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #333333;
background-color: #ffffff;
}
.navbar-default .navbar-nav .dropdown-menu > li > a,
.navbar-default .navbar-nav .dropdown-menu > a {
display: block;
padding: .25rem 1.5rem;
color: #292929;
text-decoration: none;
white-space: nowrap;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
background-color: #8C8C8C;
color: #ffffff !important;
}
.dropdown-submenu.show > .dropdown-menu {
display: block;
}
.dropdown-submenu > .dropdown-toggle::after {
display: none;
}
.dropdown-submenu > a:after {
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #cccccc;
margin-top: 8px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #555;
}
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px dashed;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
/* Bootstrap 3 visible/hidden helpers kept for homepage logo behavior. */
.visible-lg { display: none !important; }
.hidden-lg { display: block !important; }
@media (min-width: 992px) {
.visible-lg { display: block !important; }
.hidden-lg { display: none !important; }
}
/* Bootstrap 3 glyphicon fallback for BS4 test without adding icon font files. */
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-style: normal;
font-weight: normal;
line-height: 1;
}
.glyphicon-menu-right:before { content: ">"; }
.glyphicon-save-file:before { content: "⇩"; }
.glyphicon-globe:before { content: "◎"; }
.glyphicon-chevron-left:before { content: "‹"; font-size: 54px; font-weight: 300; }
.glyphicon-chevron-right:before { content: "›"; font-size: 54px; font-weight: 300; }
/* Bootstrap 3 img-responsive compatibility. */
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
.carousel-control {
opacity: .5;
color: #fff;
text-align: center;
text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.carousel-control:hover,
.carousel-control:focus {
color: #fff;
text-decoration: none;
opacity: .9;
}
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
position: absolute;
top: 50%;
z-index: 5;
display: inline-block;
}
.carousel-control .glyphicon-chevron-left {
left: 50%;
}
.carousel-control .glyphicon-chevron-right {
right: 50%;
}
.footer-c .dropdown-menu {
width: 100%;
min-width: 200px;
}
.footer-c .dropdown-menu > li > a {
display: block;
padding: .25rem 1.5rem;
text-decoration: none;
}
@media (min-width: 992px) {
.navbar .container > .row {
width: 100%;
}
.navbar-collapse {
display: flex !important;
flex-basis: auto;
}
.navbar-nav {
flex-direction: row;
}
.navbar-nav > li {
position: relative;
}
.navbar-nav > li.dropdown:hover > .dropdown-menu {
display: block;
}
.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
}
@media (max-width: 991.98px) {
.navbar .container,
.navbar .container > .row,
.navbar-header,
.navbar-collapse {
width: 100%;
}
.navbar-header {
min-height: 60px;
}
.navbar-collapse {
background-color: #333333;
}
ul.nav.navbar-nav {
padding-top: 0;
margin: 0;
width: 100%;
}
.navbar-nav > li > a {
padding: 12px 15px;
}
.dropdown-menu {
position: static;
float: none;
width: 100%;
margin: 0;
border-radius: 0;
border: 0;
}
.dropdown-submenu > .dropdown-menu {
position: static;
left: auto;
margin-left: 0;
}
}
/**** BS4 v1 homepage compatibility patch END ****/
/* =========================================================
BS4 v5 page-specific minimal patch
Target: A-NAV desktop hover-lock only
Reason: Bootstrap 4 dropdown state can clear the parent menu when moving
from a light-gray hover dropdown-submenu item into the third-level
submenu. This patch keeps the top-level parent and the active
dropdown-submenu open while the pointer remains inside the nav tree.
Frozen: B1-HERO / B2-APP / B3-CTA / mobile hamburger behavior.
========================================================= */
@media (min-width: 992px) {
.navbar-default .navbar-nav > li.dropdown.nav-hover-lock > .dropdown-menu,
.navbar-default .navbar-nav > li.dropdown:hover > .dropdown-menu,
.navbar-default .navbar-nav > li.dropdown.show > .dropdown-menu {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.navbar-default .navbar-nav > li.dropdown.nav-hover-lock > a.dropdown-toggle,
.navbar-default .navbar-nav > li.dropdown:hover > a.dropdown-toggle,
.navbar-default .navbar-nav > li.dropdown.show > a.dropdown-toggle {
background-color: #ffffff;
color: #333333;
text-decoration: none;
}
.navbar-default .navbar-nav .dropdown-submenu.nav-submenu-lock > .dropdown-menu,
.navbar-default .navbar-nav .dropdown-submenu:hover > .dropdown-menu,
.navbar-default .navbar-nav .dropdown-submenu.show > .dropdown-menu {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.navbar-default .navbar-nav .dropdown-submenu.nav-submenu-lock > a.dropdown-toggle,
.navbar-default .navbar-nav .dropdown-submenu:hover > a.dropdown-toggle,
.navbar-default .navbar-nav .dropdown-submenu.show > a.dropdown-toggle {
background-color: #8C8C8C !important;
color: #ffffff !important;
text-decoration: none;
}
.navbar-default .navbar-nav .dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
z-index: 1045;
}
.navbar-default .navbar-nav > li.dropdown > .dropdown-menu {
z-index: 1040;
}
}
/* =========================================================
BS4 v6 page-specific minimal patch
Target: A-NAV dropdown-submenu right-arrow indicator only
Reason: The BS4 compatibility rule for .dropdown-toggle::after hides the
original BS3 right-facing pseudo triangle. Restore the arrow only
on real .dropdown-submenu items. Normal links such as 投影幕 and
音響鼓膜 remain arrowless.
Frozen: navbar geometry / desktop hover-lock / mobile hamburger / B1-HERO /
B2-APP / B3-CTA / homepage text, images, links, main DOM.
========================================================= */
.navbar-default .navbar-nav .dropdown-submenu > a.dropdown-toggle::after,
.navbar-default .navbar-nav .dropdown-submenu > a.Text-16.dropdown-toggle::after {
display: block !important;
content: "" !important;
float: right;
width: 0;
height: 0;
margin-top: 8px;
margin-right: -10px;
margin-left: 8px;
vertical-align: middle;
border-top: 5px solid transparent !important;
border-bottom: 5px solid transparent !important;
border-left: 5px solid #cccccc !important;
border-right: 0 !important;
}
.navbar-default .navbar-nav .dropdown-submenu:hover > a.dropdown-toggle::after,
.navbar-default .navbar-nav .dropdown-submenu.nav-submenu-lock > a.dropdown-toggle::after,
.navbar-default .navbar-nav .dropdown-submenu.show > a.dropdown-toggle::after {
border-left-color: #ffffff !important;
}
/* =========================================================
BS4 v7 page-specific minimal patch
Target: A-NAV language caret and hover gray state only
Reason 1: Bootstrap 4 adds .dropdown-toggle::after while the legacy BS3
language item already contains , causing
「繁體中文 ▼ ▼」. Hide only the latter BS4 pseudo caret.
Reason 2: Keep A-NAV hover/open/locked states on the requested light gray
background (#f2f2f2) without changing nav geometry or submenu DOM.
Frozen: navbar geometry / dropdown-submenu count and expansion / mobile
hamburger / B1-HERO / B2-APP / B3-CTA / homepage text, images,
links, main DOM.
========================================================= */
.navbar-default .navbar-nav > li.dropdown:last-child > a.dropdown-toggle::after {
display: none !important;
content: none !important;
border: 0 !important;
margin: 0 !important;
}
@media (min-width: 992px) {
.navbar-default .navbar-nav > li.dropdown.nav-hover-lock > a.dropdown-toggle,
.navbar-default .navbar-nav > li.dropdown:hover > a.dropdown-toggle,
.navbar-default .navbar-nav > li.dropdown.show > a.dropdown-toggle,
.navbar-default .navbar-nav .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .dropdown-menu > li > a:focus,
.navbar-default .navbar-nav .dropdown-submenu.nav-submenu-lock > a.dropdown-toggle,
.navbar-default .navbar-nav .dropdown-submenu:hover > a.dropdown-toggle,
.navbar-default .navbar-nav .dropdown-submenu.show > a.dropdown-toggle {
background-color: #f2f2f2 !important;
color: #333333 !important;
text-decoration: none !important;
}
.navbar-default .navbar-nav .dropdown-submenu:hover > a.dropdown-toggle::after,
.navbar-default .navbar-nav .dropdown-submenu.nav-submenu-lock > a.dropdown-toggle::after,
.navbar-default .navbar-nav .dropdown-submenu.show > a.dropdown-toggle::after {
border-left-color: #555555 !important;
}
}
/* =========================================================
BS4 v8 page-specific minimal patch
Target: Footer / related recommendation dropdown item hover only
Reason: The global dropdown hover rule uses dark gray; the requested footer
related dropdown submenu hover background is light gray #f2f2f2.
Frozen: A-NAV / navbar geometry / dropdown-submenu count and expansion /
mobile hamburger / B1-HERO / B2-APP / B3-CTA / homepage text,
images, links, main DOM.
========================================================= */
.footer-c .footer-c-dropdom-menu .dropdown-menu > li > a:hover,
.footer-c .footer-c-dropdom-menu .dropdown-menu > li > a:focus,
.footer-c .footer-c-dropdom-menu .dropdown-menu > li > a:active {
background-color: #f2f2f2 !important;
color: #292929 !important;
text-decoration: none !important;
}
.footer-c .footer-c-dropdom-menu .dropdown-menu > li > a:hover i,
.footer-c .footer-c-dropdom-menu .dropdown-menu > li > a:focus i,
.footer-c .footer-c-dropdom-menu .dropdown-menu > li > a:active i {
color: #292929 !important;
}
/* =========================================================
BS4 v28 page-specific minimal patch
Target: Mobile viewport width guard + A-NAV product dropdown-submenu ▼ visibility
Reason: After v23/v24/v25, the reported mobile symptom is no longer only
that the ▼ symbol is hidden. The full mobile page appears enlarged,
shifted right/down, and about 20% of the right side is outside the
visible frame. The most likely front-end cause is mobile horizontal
overflow caused by BS4 transitional containers and unbounded carousel
images before/when JS transforms the 1920px hero images. This patch
first confines the mobile page to 100vw, then keeps the accepted
nav geometry: logo left-50px, hamburger right-20px, parent menus
arrowless, language span.caret preserved, and only the six real
產品應用 dropdown-submenu rows show a right-aligned ▼.
Frozen: desktop navbar / desktop dropdown-submenu right-arrow / mobile
collapse behavior / B1-HERO count and links / B2-APP grid and text
size / B3-CTA / footer / homepage text, images, links and main DOM.
========================================================= */
@media (max-width: 991.98px) {
html,
body {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
overflow-x: hidden !important;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
text-size-adjust: 100% !important;
zoom: 1 !important;
-webkit-transform: none !important;
-ms-transform: none !important;
transform: none !important;
}
body {
position: relative !important;
}
body > nav,
body > #mycarousel,
body > .container,
body > .newStyle,
body > .b_floor_3,
body > .footer-c,
body > .footer-button {
max-width: 100vw !important;
overflow-x: hidden !important;
box-sizing: border-box !important;
}
#mycarousel,
#mycarousel .carousel-inner,
#mycarousel .carousel-item,
#mycarousel .item,
#mycarousel .item_100 {
width: 100% !important;
max-width: 100vw !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
#mycarousel img,
.newStyle img,
#home_footer_bar img,
.footer-c img,
.footer-button img {
max-width: 100% !important;
height: auto !important;
box-sizing: border-box !important;
}
#mycarousel img {
width: 100% !important;
}
.navbar.navbar-default.navbar-fixed-top {
min-height: 60px !important;
max-width: 100vw !important;
overflow-x: hidden !important;
}
.navbar.navbar-default.navbar-fixed-top .container {
width: 100% !important;
max-width: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
.navbar.navbar-default.navbar-fixed-top .container > .row {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
.navbar.navbar-default.navbar-fixed-top .navbar-header {
position: relative !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-height: 60px !important;
height: 60px !important;
margin-left: 0 !important;
margin-right: 0 !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
.navbar.navbar-default.navbar-fixed-top .navbar-logo.hidden-lg {
position: absolute !important;
top: 50% !important;
left: 50px !important;
right: auto !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
-webkit-transform: translateY(-50%) !important;
-ms-transform: translateY(-50%) !important;
transform: translateY(-50%) !important;
z-index: 1031;
}
.navbar.navbar-default.navbar-fixed-top .navbar-logo.hidden-lg img {
display: block !important;
width: 218px !important;
max-width: calc(100vw - 150px) !important;
height: auto !important;
margin: 0 !important;
}
.navbar.navbar-default.navbar-fixed-top .navbar-logo.visible-lg {
display: none !important;
}
.navbar.navbar-default.navbar-fixed-top .navbar-toggle.navbar-toggler {
position: absolute !important;
top: 50% !important;
right: 20px !important;
left: auto !important;
float: none !important;
display: block !important;
margin: 0 !important;
-webkit-transform: translateY(-50%) !important;
-ms-transform: translateY(-50%) !important;
transform: translateY(-50%) !important;
z-index: 1032;
}
.navbar.navbar-default.navbar-fixed-top .navbar-collapse.navbar-ex1-collapse {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
border-top: 0 !important;
box-sizing: border-box !important;
background-color: #333333 !important;
overflow-x: hidden !important;
}
.navbar.navbar-default.navbar-fixed-top .navbar-collapse.navbar-ex1-collapse.show,
.navbar.navbar-default.navbar-fixed-top .navbar-collapse.navbar-ex1-collapse.in,
.navbar.navbar-default.navbar-fixed-top .navbar-collapse.navbar-ex1-collapse.collapsing {
display: block !important;
}
.navbar.navbar-default.navbar-fixed-top ul.nav.navbar-nav {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding-top: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
list-style: none !important;
-ms-flex-direction: column !important;
flex-direction: column !important;
box-sizing: border-box !important;
}
.navbar.navbar-default.navbar-fixed-top ul.nav.navbar-nav > li {
float: none !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
position: relative !important;
margin: 0 !important;
padding: 0 !important;
background-color: transparent !important;
box-sizing: border-box !important;
}
.navbar.navbar-default.navbar-fixed-top ul.nav.navbar-nav > li > a {
display: block !important;
width: 100% !important;
max-width: 100% !important;
padding: 10px 15px !important;
line-height: 20px !important;
min-height: 0 !important;
color: #ffffff !important;
text-decoration: none !important;
white-space: normal !important;
background-color: transparent !important;
box-sizing: border-box !important;
}
.navbar.navbar-default.navbar-fixed-top ul.nav.navbar-nav > li > a:hover,
.navbar.navbar-default.navbar-fixed-top ul.nav.navbar-nav > li > a:focus,
.navbar.navbar-default.navbar-fixed-top ul.nav.navbar-nav > li.show > a,
.navbar.navbar-default.navbar-fixed-top ul.nav.navbar-nav > li.open > a {
background-color: #f2f2f2 !important;
color: #333333 !important;
}
.navbar.navbar-default.navbar-fixed-top .navbar-nav .dropdown-menu {
position: static !important;
float: none !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
transform: none !important;
background-color: #ffffff !important;
box-sizing: border-box !important;
}
.navbar.navbar-default.navbar-fixed-top .navbar-nav .dropdown.show > .dropdown-menu,
.navbar.navbar-default.navbar-fixed-top .navbar-nav .dropdown.open > .dropdown-menu,
.navbar.navbar-default.navbar-fixed-top .navbar-nav .dropdown-submenu.show > .dropdown-menu,
.navbar.navbar-default.navbar-fixed-top .navbar-nav .dropdown-submenu.open > .dropdown-menu,
.navbar.navbar-default.navbar-fixed-top .navbar-nav .dropdown-submenu.nav-submenu-lock > .dropdown-menu {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.navbar.navbar-default.navbar-fixed-top .navbar-nav .dropdown-menu > li {
float: none !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
line-height: 20px !important;
background-color: #ffffff !important;
box-sizing: border-box !important;
}
.navbar.navbar-default.navbar-fixed-top .navbar-nav .dropdown-menu > li > a {
display: block !important;
width: 100% !important;
max-width: 100% !important;
padding: 5px 15px 5px 25px !important;
line-height: 20px !important;
min-height: 0 !important;
color: #292929 !important;
white-space: normal !important;
text-decoration: none !important;
box-sizing: border-box !important;
}
.navbar.navbar-default.navbar-fixed-top .navbar-nav .dropdown-submenu > .dropdown-menu {
position: static !important;
top: auto !important;
left: auto !important;
margin-top: 0 !important;
margin-left: 0 !important;
width: 100% !important;
max-width: 100% !important;
border-radius: 0 !important;
box-sizing: border-box !important;
}
.navbar.navbar-default.navbar-fixed-top .navbar-nav .dropdown-submenu > .dropdown-menu > li > a {
padding: 5px 15px 5px 40px !important;
line-height: 20px !important;
min-height: 0 !important;
}
.navbar.navbar-default.navbar-fixed-top .navbar-nav .dropdown-menu > li > a:hover,
.navbar.navbar-default.navbar-fixed-top .navbar-nav .dropdown-menu > li > a:focus,
.navbar.navbar-default.navbar-fixed-top .navbar-nav .dropdown-submenu.show > a.dropdown-toggle,
.navbar.navbar-default.navbar-fixed-top .navbar-nav .dropdown-submenu.open > a.dropdown-toggle,
.navbar.navbar-default.navbar-fixed-top .navbar-nav .dropdown-submenu.nav-submenu-lock > a.dropdown-toggle {
background-color: #f2f2f2 !important;
color: #333333 !important;
text-decoration: none !important;
}
/* Top-level parent menus stay arrowless except language span.caret. */
.navbar.navbar-default.navbar-fixed-top ul.nav.navbar-nav > li.dropdown:not(:last-child) > a.dropdown-toggle::after,
.navbar.navbar-default.navbar-fixed-top ul.nav.navbar-nav > li.dropdown:not(:last-child) > a.Text-16.dropdown-toggle::after {
display: none !important;
content: none !important;
border: 0 !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
}
.navbar.navbar-default.navbar-fixed-top ul.nav.navbar-nav > li.dropdown:last-child > a.dropdown-toggle::after,
.navbar.navbar-default.navbar-fixed-top ul.nav.navbar-nav > li.dropdown:last-child > a.Text-16.dropdown-toggle::after {
display: none !important;
content: none !important;
border: 0 !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
}
.navbar.navbar-default.navbar-fixed-top ul.nav.navbar-nav > li.dropdown:last-child > a.dropdown-toggle .caret {
display: inline-block !important;
width: 0 !important;
height: 0 !important;
margin-left: 2px !important;
vertical-align: middle !important;
border-top: 4px dashed !important;
border-right: 4px solid transparent !important;
border-left: 4px solid transparent !important;
}
/* Only the six real 產品應用 dropdown-submenu rows get a visible right-aligned ▼. */
.navbar.navbar-default.navbar-fixed-top ul.nav.navbar-nav > li.dropdown:nth-child(2) > ul.dropdown-menu > li.dropdown-submenu > a.dropdown-toggle,
.navbar.navbar-default.navbar-fixed-top ul.nav.navbar-nav > li.dropdown:nth-child(2) > ul.dropdown-menu > li.dropdown-submenu > a.Text-16.dropdown-toggle {
position: relative !important;
padding-right: 56px !important;
}
.navbar.navbar-default.navbar-fixed-top ul.nav.navbar-nav > li.dropdown:nth-child(2) > ul.dropdown-menu > li.dropdown-submenu > a.dropdown-toggle::after,
.navbar.navbar-default.navbar-fixed-top ul.nav.navbar-nav > li.dropdown:nth-child(2) > ul.dropdown-menu > li.dropdown-submenu > a.Text-16.dropdown-toggle::after {
display: none !important;
content: none !important;
border: 0 !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.navbar.navbar-default.navbar-fixed-top ul.nav.navbar-nav > li.dropdown:nth-child(2) > ul.dropdown-menu > li.dropdown-submenu > a.dropdown-toggle::before,
.navbar.navbar-default.navbar-fixed-top ul.nav.navbar-nav > li.dropdown:nth-child(2) > ul.dropdown-menu > li.dropdown-submenu > a.Text-16.dropdown-toggle::before {
display: block !important;
content: "▼" !important;
float: none !important;
position: absolute !important;
top: 50% !important;
right: 18px !important;
left: auto !important;
width: 16px !important;
height: 16px !important;
margin: -8px 0 0 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
color: #333333 !important;
font-family: Arial, "Microsoft JhengHei", "微軟正黑體", sans-serif !important;
font-size: 12px !important;
font-weight: normal !important;
line-height: 16px !important;
text-align: center !important;
text-indent: 0 !important;
opacity: 1 !important;
visibility: visible !important;
z-index: 9 !important;
pointer-events: none !important;
-webkit-transform: none !important;
-ms-transform: none !important;
transform: none !important;
}
.navbar.navbar-default.navbar-fixed-top ul.nav.navbar-nav > li.dropdown:nth-child(2) > ul.dropdown-menu > li:not(.dropdown-submenu) > a::before,
.navbar.navbar-default.navbar-fixed-top ul.nav.navbar-nav > li.dropdown:nth-child(2) > ul.dropdown-menu > li:not(.dropdown-submenu) > a::after,
.navbar.navbar-default.navbar-fixed-top ul.nav.navbar-nav > li.dropdown:last-child ul.dropdown-menu > li > a::before,
.navbar.navbar-default.navbar-fixed-top ul.nav.navbar-nav > li.dropdown:last-child ul.dropdown-menu > li > a::after {
display: none !important;
content: none !important;
border: 0 !important;
}
}