@charset "utf-8";
/* CSS Document */


/*通用屬性部分*/
html
{
background-image: url("../images/BK_05.jpg");
background-size:cover;
background-repeat: no-repeat;
background-attachment: fixed;
padding-top:2%;  
padding-bottom:2%;
}


body
{
max-width: 1280px;  
margin: 0 auto;    
box-shadow: 0px 0px 5px #d3d3d3;
  
}

body::-webkit-scrollbar 
{
display: none;
width: 0 !important;
}

a
{
color: #000 !important;    
}

a:hover
{
color:#000 !important;    
}

h1
{
font-size: 24px !important;    
color:#009fb0 !important;
font-weight: 700 !important;    
}


/*class區塊*/
.header
{
background-color:#FFF; 
width:100%;    
overflow: hidden;
padding-top:1%; 
z-index:90000; 
border-bottom-color: #009fb0;
border-bottom-width: 4px;
border-bottom-style: solid;
}

.footer
{
background-color: #8f8f8f;
text-align:center;
font-size: 12px;
color:#FFF;    
line-height: 1.5; 
width:100%;
overflow: hidden;
padding:0;    
}

.top
{
width:100%;    
position: relative;    
margin: 0 auto;    
}

.logo_left
{
width:15%;
float:left;
margin-left:3%; 
}

.menu_phone
{
float:left;
width:60%;
text-align: center;       
display: none;       
}

.left_menu
{
color:#000;    
float: left;   
width:40%;
text-align: left;    
padding-top:3.5%; 
padding-right:0%;
padding-bottom:0.5%;
padding-left:3.5%;    
font-size:16px;
font-weight: 700;
display: block;    
}

.right_menu
{
color:#000;    
float: right;   
width:40%;
text-align: right;    
padding-top:3.5%; 
padding-right:3.5%;
padding-bottom:0.5%;    
font-size:16px;
font-weight: 700;
display: block;    
    
}

.middle_side_width_index
{
width:15%; 
position: relative;    
}

.product_list
{
width:85%;    
float: left;  
margin-left:15%;    
}

.middle_side_width
{
width:100%; 
overflow: hidden;    
}

.phone_display
{
display: none;       
}


/*幻燈片部分*/
.carousel-control-next, .carousel-control-prev
{
z-index:-1 !important;    
}



/*下方商品活動選單部分*/
.carousel-indicators_02 {
position: absolute;
width:100%;    
right: 0;
top: -35px !important;
left: 0 !important;
z-index: 0 !important;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
padding-left: 0 !important;
margin-right: auto !important;
margin-left: auto !important;
list-style: none;
}

.carousel-indicators_02 li {
box-sizing: content-box;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
width: 10% !important;
height: 25px !important;
margin-right: 3px;
margin-left: 3px;
padding-bottom:8px;
text-indent: 0 !important;
cursor: pointer;
background-color: rgba(255,255,255,0.0) !important;
background-clip: padding-box;
border-top: 0px solid transparent !important;
border-bottom: 2px solid #FFF !important;
opacity: .5;
transition: opacity 0.6s ease;
}


.banner_pic
{
padding-right:0.5%;    
padding-left:0.5%;
padding-bottom:0;    
width:22%;    
}



@media screen and (prefers-reduced-motion: reduce) {
.carousel-indicators_02 li 
{
transition: none;
}
}

.carousel-indicators_02 .active 
{
border-bottom: 2px solid #333333 !important;
}



/*幻燈片左方選單部分*/
.menu_bar
{
width:100%;
height:auto;    
margin: auto;
text-align:center;
font-size:16px;    
color:#fff;    
background-color: rgba(0,0,0,0.65);     
padding-top:13%;
padding-bottom:13%;
position: absolute;
left:0%;
top:0%;
z-index: 99999;
overflow:visible;
display: block;
}

.menu_bar ul
{
/* 取消ul樣式符號 */
list-style-type:none;
/* 重設ul邊界與留白為零 */
margin:0;
padding:0;
/* 內有浮動元件時，需設overflow才會自動調整大小 */
overflow:visible;   
}

 .menu_bar ul li ul {
/* 讓第二層ul跳脫文件流以利定位 */
position:absolute;
/* 固定寬度 */
width:100%;
height: auto;
/* 避免出現捲軸 */
overflow:visible;
/* 讓ul與母階層li相同位置 */
clear:left;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-left:5%; 
padding-right:0%;
padding-top:5%;
padding-bottom:5%; 
top:0; 
left:100%;
background-color: rgba(255,255,255,0.9); 
color:#000; 
}

.menu_bar ul li ul li ul
{
padding-top:2%;
background-color: rgba(255,255,255,0.8); 
}




 .menu_bar ul li ul li 
{
/* 覆寫繼承自第一層的浮動設定 */
float:none;
text-align: left;
padding-left:2%;
padding-right:0%; 
padding-top:1%;
padding-bottom:1%; 
font-size:18px;
height:70px; 
}

 .menu_bar ul li ul li ul li 
{
/* 覆寫繼承自第一層的浮動設定 */
float:none;
text-align: left;
padding-left:2%;
padding-right:0%; 
padding-top:1%;
padding-bottom:1%; 
font-size:18px;
height:53px; 
}

.menu_bar ul li ul 
{
/* 預先隱藏第二層 */
visibility:hidden;
}
.menu_bar ul li:hover ul 
{
/* 觸動第一層時，顯示第二層 */
visibility:visible;
}

.menu_bar ul li:hover ul li ul 
{
/* 顯示第二層時，隱藏第三層，避免同時彈出 */
visibility:hidden;
}
.menu_bar ul li ul li:hover ul 
{
/* 觸動第二層時，顯示第三層 */
visibility:visible;
}


 .menu_bar ul li:hover
{
background: #000;   
}

 .menu_bar ul li ul li:hover
{
background-color: rgba(255,255,255,0.00);   
}

 .menu_bar ul li
{
padding-top:1%; 
padding-bottom:1%;
height:65px; 
line-height: 65px; 
}

.menu_link
{
width:auto;
height:15%;    
}

.middle_side
{
position: relative;
width:100%; 
overflow: hidden;    
}

.middle_side_inside
{
position: relative;
width:15%;    
float: left;
}

/*連結部分*/
.link_01
{
color:#000; 
}

.link_01:hover
{
color:#8de3e3;    
}

.link_02
{
color:#FFF !important; 
font-size:18px;
}

.link_02:hover
{
color:#8de3e3 !important;    
}

/*手機版隱藏部分*/
.menu_logo
{
width:40%;
text-align: center;
display: block;
float: left;
display: none;
}

.center
{
width:100%;
padding-top:5%;    
padding-bottom:3%;
padding-left:10%;    
padding-right:10%;
text-align: center;
border-top-color:#888888;
border-top-style:solid;
border-top-width:1px;   
}

.center_list
{
width:100%;
overflow: hidden;    
}

.list_left
{
width:13%;    
float:left;
margin-left:5%;
padding-top:5%;     
}

.list_center
{
width:64.5%;    
float:left;
padding-left:1.5%;
padding-right:1.5%; 
padding-top:1.5%;
text-align: center;
}

.list_right
{
width:13%;    
float:left;
padding-top:5%;     
}    



/*手機版區塊*/
@media only screen and (max-width: 480px)
{
    

.menu_phone
{
float:left;
width:100%;
text-align: center;       
display: block;   
border-right-color: #FFF;
border-right-width: 0px;
border-right-style: solid;
}
    
.add
{
background-color: #FFF !important;    
border-color:#FFF !important;   
}
    
.add:focus
{
box-shadow: 0 0 0 rgba(255,255,255,0.0) !important;    
}
    
.link_03
{
padding-top:2%;
font-size:16px;
}
    
.link_03_first
{
padding-top:0%;
font-size:16px;
}    
    
    
.link_03_final
{
padding-top:2%;
padding-bottom:4%;
font-size:16px;
border-bottom-color: #808080;
border-bottom-style: solid;
border-bottom-width: 1px;
}    

    
.logo_left
{
width:40%;
float:left;
margin-left:30%; 
margin-right:30%;
}    
    
.left_menu
{
display: none;    
}

.right_menu
{

display: none;    
    
}  
    
.menu_bar
{
display: none; 
}   
    
.carousel-indicators_02 li 
{ 
width: 30% !important;
height: 25px !important;
}

.center
{    
padding-top:15%;    
}
    
.banner_pic
{
padding-right:1%;    
padding-left:1%;
padding-bottom:2%;
width:48%;    
}
 
.footer
{
background-color: #8f8f8f;
text-align:center;
font-size: 12px;
color:#FFF;    
line-height: 1.5; 
width:100%;
overflow: hidden;
padding:5%;    
}    
  
.phone_display
{
display: block;       
}   
    
}