@charset "utf-8";

/*
關於CSS設定說明
CSS屬性是會繼承的，而且還是由上往下繼承。
同樣元素設定16px 後 12px 再 15px 最後會以最後設定的15px為準
但是有兩種情況除外:
1.絕對路徑命名. 如: .xx .yy .zz p {設定值;}
2.important.  如: .xx p {設定值 !important;}

CSS3選取器語法 :nth-child(n) 

*/

/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */

/*上方選單解除滑動固定
.header_area.sticky { position:relative;}
*/
/*top
.nav-brand {
   
    width: 250px;}
.main_header_area {
    background: #fff;
	
}
#menuTop li {
    margin-top: 23px;
    border-right: 1px solid #e7b010;
    padding: 0 10px;
}

li.tp_links {
    display: none;
}
.nav-header {
     top: 14px;}
	 
	 .nav-menu>li>a {
    padding: 18px 15px;
    font-weight: bold;}*/

/*上方選單右邊設定 臉書/LINE/電話/信箱
.tp_links a:before {寬高大小設定}
.tp_links a.me_tp_fb {}
.tp_links a.me_tp_fb:before {背景換圖/建議.SVG}
.tp_links a.me_tp_line {}
.tp_links a.me_tp_line:before {背景換圖/建議.SVG}
.tp_links a.me_tp_call {}
.tp_links a.me_tp_call:before {背景換圖/建議.SVG}
.tp_links a.me_tp_mail {}
.tp_links a.me_tp_mail:before {背景換圖/建議.SVG}
*/

/*電腦LOGO
.nav-brand {}
*/

/*手機LOGO
.nav-brand-m {}
*/
.other_promotion .pmtTime {
    display: none;
}
.promotion_title {
    display: none;
}
.footer_logo img {

}

.swiper-banner {
    margin: 0;
}
/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */

/*預設解除背景輪播*/
#content_main {
    margin: 0;
    position: relative;
}

#content_main:before{
    content: "";
    position: absolute;
    background-image: url(../images/ft_footer_bg.png);
    width: 100%;
    height: 30px;
    left: 0;
    bottom: 0;
    z-index: 999;
}

#content{
    position: relative;
}

.bannerindex {
    position: static;
    height: auto;
}
.swiper-banner {
    position: static;
    margin: 0;
    height: auto;
}
.swiper-slide img {
    height: auto;
}
@media screen and (max-width: 768px) {
    .bannerindex {
        padding: 0;
        margin: 0;
    }

    .header_area {
        position: fixed !important;
        width: 100%;
        top: 0;
    }
    .swiper-banner {
        margin: 95px 0 0;
    }
}

/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */
.right_member_in { width:36px;}
.right_member_in ul { margin: 0px auto;}
.right_member_in img {max-width: 14px;}
.right_member_in a { color: #444F6A;}



.nav-menu li.rwd_show,
.nav-menu li.tp_links {
    display: none;
}




.animated-arrow {

}

/*內頁BANNER 設定*/
.banner{height: 380px;background-image: url(../images/box98_bg020.jpg);position:relative;background-size: cover;}
.banner h5{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color: #595044;font-size: 80px;letter-spacing: 2px;font-family: "LXGW Marker Gothic", sans-serif;z-index: 999;}
.banner:before{
  content: "";
  position: absolute;
  background-image: url(../images/box98_img052.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 23vw;
  height: 18.5vw;
  left: 7.5vw;
  bottom: -2.5vw;
  z-index: 5;
  animation: floatFast 2s ease-in-out infinite;
}
.banner:after{
  content: "";
  position: absolute;
  background-image: url(../images/box98_img053.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 21vw;
  height: 18.5vw;
  right: 6vw;
  bottom: -5vw;
  z-index: 5;
  animation: floatFast 3s ease-in-out infinite;
}

@keyframes floatFast{
  0%{transform: translateY(0);}
  50%{transform: translateY(-12px);}
  100%{transform: translateY(0);}
}

@media screen and (max-width: 1190px) {
  
  .banner{height: 300px;}
  .banner h5{font-size: 50px;}
  .banner:before{
    width: 23vw;
    height: 18.5vw;
    left: 7.5vw;
    bottom: -1vw;
  }
  .banner:after{
    width: 21vw;
    height: 18.5vw;
    right: 6vw;
    bottom: -2.5vw;
  }

}

@media screen and (max-width: 800px) {
  
  .banner{height: 200px;}
  .banner h5{font-size: 35px;}
  .banner:before{
    width: 160px;
    height: 160px;
    left: 25px;
    bottom: 25px;
  }
  .banner:after{
    width: 160px;
    height: 160px;
    right: 25px;
    bottom: 25px;
  }

}

@media screen and (max-width: 400px) {
  
  .banner:before{
    left: -25px;
    bottom: inherit;
    top: -25px;
  }
  .banner:after{
    right: -25px;
    bottom: -25px;
  }

}

/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */

.animated-arrow {
    display: none;
}


@media screen and (max-width: 768px) {

	.nav-menu li.rwd_show { display:block;}
	
    #to_top {
        bottom: 60px;
    }
    #content {
        width: 100%;
        margin-top: 70px;
    }
	
	/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */
	
	.product-layer-two {display: none;}
	
	/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */
	
	.product-wrapper img { width:auto !important; max-width:100%; height:auto !important;}
	
	
	/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */
	
	.footer { padding: 25px 0 35px 0;}
	#bottom_menu { display: flex; width: 100%; z-index:10000;}
	
	/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */
	
	.right_member_in { width:50%; bottom:0; top:auto; right:0; z-index:100000;height: 36px;padding: 5px;display: none;}
	.right_member_in ul { display:inline-block; margin:inherit; width:auto;;}
	.right_member_in img {}
	.right_member_in a {}
	.right_member_in input { background:#fff; border-radius:3px; margin:0 2px; padding:0 3px;}

}