/*修改*/
body{
  width: 100%;
  background-color: #012146!important;
  background: url(../images/bg.jpg) repeat top fixed !important;
  text-align: center;
  overflow-x: hidden;
}
a{ text-decoration: none; }
a:link {
  color: #FFF;
}
a:visited {
  color: #FFF;
}
img { border:0; /*display: block; margin: auto;*/  }

.header{background-color: #666 !important;}
.footer{background-color: #000 !important;}

/*.wrapper{background: url(../images/kv_bg.png) no-repeat top;position: relative;}*/
.wrap-topview, .main-section{background-color: transparent !important;}
/*.main-section{background: url(../images/bg_m.jpg) repeat top !important;}*/
.mobile{display: none !important;}
.pc{display: block;}
.wrap-topview{display: block !important;position: relative;}
.m-wrap-topview{display: none;}


/* kv */
.title{padding: 0 0;}
.title_kv{width: 100%;max-width: 1320px;margin: 1% auto 2%;}
.kv{width: 100%;margin: 0 auto;display: block;padding-top: 85px;max-width: 1278px;
    -webkit-animation: brightness-play 2.3s infinite;
      animation: brightness-play 2.3s infinite;}

.contentBox{display: none;}
.contentBox.show{display: block;}
.contentBox .toppic-title {display: none;}

.toppic-pid-box{position: relative; text-align: center;background:rgba(252,252,252) !important;padding: 2% 2%!important;/*margin-bottom: 0 !important;*/}
.box2{padding: 2% 4%!important;}
.pid_box{text-align: center;background:#fbfbfb !important;border-radius: 1rem;}
.container .toppic-title{display: none;}

/* content-tab */
.tab_bar {width: 100%;margin: 2% auto 0;padding: 0 2rem;}
.tab_bar ul{margin-bottom: 0;display: flex;justify-content: space-evenly;}
.tab_bar ul li{width: 40%;display: inline-block;margin: 0 auto 2%;cursor: pointer;}
/* content-tab_m */
.sticky.is-sticky {left: 0;right: 0;top: 0;z-index: 1000;width: 100%;}
.m_tab_bar {display: none;width: 100%;margin: 0 auto;}
.m_tab_bar ul {margin-bottom: 0;display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: space-evenly;}
.m_tab_bar ul li{width: 48%;border: none;text-align: center;padding: 0.5rem 0;}
.toppic-pid-box .deals-list-box{padding: 0;}
.tab_btn a img{width: 100%;max-width: 680px;}

.content_tit_01{width: 100%;max-width: 675px;margin: 2% auto 5%;}
.content_tit_02{width: 100%;max-width: 535px;margin: 2% auto 5%;}

/*好康*/
.bouns_box img{width: 100%;}
.bouns_top,.bouns_bottom{margin: 0 auto 3%;}
.bouns_s{max-width: 265px;margin: 0 auto;}
.bouns_l{max-width: 824px;margin: 0 auto;}
.mascot_01{max-width: 240px;}
.txt_01{max-width: 530px;margin-top: 2%;}
.btn_go{
  background-color: #000;
  width: 20%;
  border-radius: 50px;
  font-size: 1.3rem;
  margin: 0 auto;
  padding: 1%;
  cursor: pointer;
}
.btn_go a{color: #FFF !important;}
.arrow {width: 100%;max-width: 17px;animation: move 1s infinite;padding-bottom: 3px;}
@keyframes move {
  0% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(8px, 0, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

/*導購*/
.shop_go img{width: 100%;}
.txt_02{display: block;max-width: 705px;margin: 0 auto;}
.shop_btnbox{display: flex;flex-direction: row;justify-content: space-evenly;flex-wrap: wrap;margin: 3% 0;}
.shop_btn{max-width: 355px;}

/*好處*/
.icon_box{display: flex;flex-wrap: wrap;flex-direction: row;justify-content: center;}
.icon_img{width: 100%;max-width: 210px;margin: 0 2% 3%;}
.icon_item{width: 100%;}
.icon_item p{color: #333;font-size: 1rem;}
.directions{width: 100%;max-width: 750px;margin: 2% auto 5%;}
.directions_m{width: 100%;max-width: 915px;}

/*企業介紹*/
.company h2{font-size: 2.5rem;color: #333;font-weight: bold;margin: 0 auto 2%;}
.introduce_box{background: url(../images/line.png) no-repeat bottom center;background-size: contain;padding-bottom: 6%;}
.introduce_item{display: flex;flex-direction: row;margin: 2% auto 5%;align-items: flex-start;gap: 2%;}
.introduce_item.introduce_02{display: flex;flex-direction: row-reverse;}
.introduce_pic{position: relative;width: 41%;vertical-align: middle;}
.introduce_pic img{width: 100%;max-width: 490px;}
.introduce_item .txt{width: 53%;vertical-align: middle;flex: 1;}
.introduce_item .txt p{width: 100%;color: #000;margin: 0 auto;font-size: 1.2rem;text-align: left;line-height: 1.8;}
.introduce_tit{text-align: left;color: #00621b;font-size: 1.8rem;font-weight: bold; margin-bottom: 2%;}


/* 輪播圖片的特殊設定 */
#slider {
    position: relative;
}

#slider img {
    position: absolute;
    top: 0;
    left: 0;
}

#slider img:first-child {
    position: relative;
}


/*標章*/
.mark_box{margin-top: 5%; background: url(../images/line.png) no-repeat bottom center;background-size: contain;padding-bottom: 6%;}
.mark_item{margin: 4% auto 0;}
.mark_box .mark_tit{text-align: left;color: #00621b;font-size: 1.8rem;font-weight: bold;}
.mark_box .left{display: inline-block;width: 18%;vertical-align: middle;}
.mark_box .left img{width: 100%;max-width: 175px;}
.mark_box .right{display: inline-block;width: 79%;vertical-align: middle;padding-left: 20px;}
.mark_box .right p{width: 100%;color: #333;margin: 0 auto;font-size: 1.2rem;text-align: left;}


/*3大品牌*/
.brand{margin-bottom: 5%;}
.brand h3{font-size: 2.5rem;margin: 3% auto;}
.brand .logo{width: 100%;max-width: 640px;margin-bottom: 5%;}
.brand_vedio_box .left{display: inline-block;width: 38%;vertical-align: middle;}
.brand_vedio_box .left img{width: 100%;max-width: 210px;}
.brand_vedio_box .right{display: inline-block;width: 60%;vertical-align: middle;}
.brand_vedio_box .right p{width: 100%;color: #333;margin: 0 auto;font-size: 1.5rem;text-align: left;}
.mascot_02{width: 1005; max-width: 240px;}
.vedio_go a{
  background-color: #00631b;
  border-radius: 50px;
  font-size: 1.2rem;
  margin: 0 auto;
  padding: 1% 3%;
  color: #FFF;
  line-height: 2.6;
}

.tabBox ul li{margin: 1% auto !important;}
.tabBox ul{width: 80%;}
.nav-tabs .nav-item {width: 20% !important;}
.nav-tabs .nav-item img{width: 100%;}
.nav-tabs .nav-item a.nav-link{
    border: 0 !important;
    background-color: transparent !important;
    text-indent: -9999px;
    height: 145px !important;
}
.nav-tabs .nav-item a.active{background-position-y: -150px;}

/*說明*/
.policyBox{background-color: #222;}
.policy {padding: 0 1.8rem 2rem !important;}
#policy h3{border: 1px solid #fff;border-radius: 2rem;width: 30% !important;color: #fff !important;text-align: center;margin: 2rem auto;padding: 0.5rem 0;}
.policy .sub-title{font-weight: bold;font-size: 1.5rem !important;color: #ffd800 !important;}
.sub-title{color: #ffd800;}
.policy ul li{list-style: disc inside!important;padding: 0.5rem 0 0 0.5rem!important;}
/*.policy ul li span{box-shadow: 0 1px;padding-bottom: 2px;}*/
.policy ul li a{color: #6ad9f1;box-shadow: 0 1px;padding-bottom: 2px;font-weight: 600;}
.policy ul li a:hover{color: #9ee8f8;}
.policy p b{color: #ffe9bd;font-size: 1.2rem;}
.policy p{margin-top: 2vh;}
.policy p span.highlight,.policy ul li span.highlight{color: #ff9bda;margin-top: 1vh;font-weight: 600;}
.policy ul li span.highlight_p{color: #bfacff;margin-top: 1vh;font-weight: 600;}



.sweet-alert button{
  background-color: #ed68a4 !important;
}
.sweet-alert .sa-icon.sa-success .sa-placeholder{
  border: 4px solid #ed68a4 !important;
}
.sweet-alert .sa-icon.sa-success .sa-line{
  background-color: #ed68a4 !important;
}
.sweet-alert h2{font-size: 20px !important;}

/* RESPONSIVE */
@media (max-width: 1400px) {
  .shop_btn {max-width: 330px;}
}

@media (max-width: 1200px) {
}

@media(max-width: 1198px){
  .mobile{display: block !important;}
  .pc{display: none !important;}
  .shop_btn {max-width: 280px;}
}

/* iPad 橫式 1024x768 */
@media(max-width: 1025px){
}
/* iPad 直式 size800x600 */
@media(max-width: 970px){
  body{background: url(../images/bg_m.png) no-repeat top center fixed !important;background-color: #012146!important;}
  
  .wrapper{background: unset;}
  .wrap-topview{display: none !important;margin-top:0 !important;}
  .m-wrap-topview{display: block;position: relative;overflow: hidden;}
  .kv_bg_m{width: 100%;margin: 0 auto;display: block;}

  .tab_bar ul li{width: 47%;}

  .content_tit_01 {width: 95%;margin: 5% auto;}
  .bouns_s{width: 45% !important;}
  .bouns_l{width: 95% !important;}
  .mascot_01{display: none;}
  .btn_go{width: 45%;font-size: 1.1rem;}

  .container{width: 100% !important;max-width: 1140px !important;border-radius: 0 !important;}
  .toppic-pid-box {border-radius: 0 !important;margin: 0% 0 5% !important;padding: 4% 3% 6%!important;}
}

@media(max-width: 768px){
  .m-wrap-topview{display: block;position: relative;overflow: hidden;margin-top: 0;}
  .kv{margin: 0 auto;display: block;padding-top: 0;max-width: 816px;}

  .tab_bar{padding: 0;}

  .mark_box .left{width: 100%;}
  .mark_box .right{width: 100%;padding: 0 !important;}
  .mark_box .mark_tit {text-align: center;font-size: 1.5rem;}
  .mark_box .right p{text-align: center;}

  .introduce_item{display: flex;flex-direction: row;align-items: flex-start;flex-wrap: wrap;gap: 1rem;}
  .introduce_item .introduce_pic{flex: 0 0 100%;max-width: 100%;}
}

/* APP and mobile */
@media (max-width: 500px){
	.container .toppic-title h3.m-title{display: block;}
	.container .toppic-title h3{font-size: 1.4rem !important;line-height: 1.1 !important;}
  .container .toppic-title{margin-bottom: -0.5rem !important;display: block;border-radius: 0 !important;background-color: #ffc89c !important;}
  .contentBox .toppic-title {margin-bottom: -0.5rem !important;display: block;}

	.toppic-pid-box h4{font-size: 1.4rem;padding: 0.3rem 0;}

  .title_kv{width: 100%;margin:0;display: block;}
  .title_kv img{max-width: 100%;height: auto;}

  .txt_01 {margin-top: 5%;}
  .btn_go {margin: 5% auto 0;}

  .shop_btn {max-width: 230px; margin: 0 auto 8%;}
  .icon_img {max-width: 130px;margin: 0 4% 3%;}

  .company h2 {font-size: 2.2rem;}
  .introduce_item .txt p{font-size: 1.1rem;line-height: 1.6;}
  .introduce_tit_03{margin-top: 60%;}

  .mark_box {margin-top: 10%;}
  .mark_item h4{padding: 1rem 0 0;}

  .brand h3{font-size: 2rem;margin-top: 6%;}
  .brand_vedio_box .right p{font-size: 1rem;font-weight: bold;}
  .vedio_go a{font-size: 1rem;padding: 2% 10%;line-height: 3;}

  #policy h3{width: 90% !important;}
  .policyBox {padding: 0rem 0 1rem !important;}

  .tab_m,.mm-topBanner-box,.m_tab_bar {display: block;padding: 0;}
  .m_tab_bar {margin: 0 auto;}
  .tab_bar {display: none;}
  .tab_m .tab a {font-size: 1rem;}

}
@media(max-width: 415px){
}
@media (max-width: 393px){
}
@media (max-width: 375px){
  .se{display: block;}
}
@media (max-width: 360px){
}
@media (max-width: 320px){
}