body, html{ font-family: Arial, Verdana, 微軟正黑體,  DFHei-Bd-HK-BF; margin:0 auto;}

.container-fluid {width:100%; max-width:1200px;}
#bigImg{width:1200px; padding-left: 0px; padding-right: 0px; float:center;}
#bigImg .carousel .nav-pills > li {
    width:24.25%;
    float: left;
    background: #004a9c;
    font-family: Arial, Verdana, 微軟正黑體,  DFHei-Bd-HK-BF;
    font-size: 24px;
    font-weight:600;
    color: #FFFFF0;
    letter-spacing: 0;}

#bigImg .carousel .nav-pills > li > a {
    border-radius: 4px;
    color: #FFFFF0;}
#bigImg .carousel .nav-pills > li + li {
    margin-left: 2px; }

#bigImg .carousel .nav-pills > li.active > a{
    background: #006aa7;
    font-size: 24px;
    color: #FFFFF0;
    letter-spacing: 0;
    text-align: center; }

#bigImg .carousel .nav-pills > li.active > a:hover{
    background: #006aa7;
    font-size: 24px;
    color: #FFFFF0;
    letter-spacing: 0;
    text-align: center; }

#bigImg .carousel .nav-pills > li.active > a:focus{
    background: #006aa7;
    font-size: 24px;
    color: #FFFFF0;
    letter-spacing: 0;
    text-align: center; }

#bigImg .carousel .nav-pills > li > a:hover, .nav-pills > li> a:focus  {
    background: #006aa7;
    font-size: 24px;
    color: #FFFFF0;
    letter-spacing: 0;
    text-align: center; }

.SPDate { width: 100%; }
.hidden {display: none; }



.more{font-size:18px; font-family:Arial; float:right; letter-spacing:0; margin-top:15px; color: #006aa7;}
#mainC{width:101%; margin-top:10px; margin-left: 10px;}
#prod-tabs{ padding-bottom:25px; padding-top: 15px;}
.banner-prod{width:101%; margin-left:-2.5%;}
.box{margin-bottom:20px;}
.tab1{background: #DF634D;font-family: Arial, Verdana, 微軟正黑體,  DFHei-Bd-HK-BF;
      font-size: 20px;
      line-height:52px;
      color: #FFFFFF;
      letter-spacing: 5px;
      margin-bottom:5px;
      text-align: left;
      margin-left:0px;
      margin-right:-30px;
      padding-left:20px;}
.tab1:hover{background: #F9907B; font-family: Arial, Verdana, 微軟正黑體,  DFHei-Bd-HK-BF;}
.tab2{background: #A4BC91;font-family: Arial, Verdana, 微軟正黑體,  DFHei-Bd-HK-BF;
      font-size: 20px;
      line-height:51px;
      color: #FFFFFF;
      letter-spacing: 5px;
      margin-bottom:5px;
      text-align: left;
      margin-left:0px;
      margin-right:-30px;
      padding-left:20px;}
.tab2:hover{background: #d1ddc8; font-family: Arial, Verdana, 微軟正黑體,  DFHei-Bd-HK-BF;}
.tab3{background: #5581D3;font-family: Arial, Verdana, 微軟正黑體,  DFHei-Bd-HK-BF;
      font-size: 20px;
      line-height:51px;
      color: #FFFFFF;
      letter-spacing: 5px;
       margin-bottom:5px;
      text-align: left;
      margin-left:0px;
      margin-right:-30px;
      padding-left:20px;}
.tab3:hover{background: #aac0e9; font-family: Arial, Verdana, 微軟正黑體,  DFHei-Bd-HK-BF;}
.tab4{background: #B8CFD3;font-family: Arial, Verdana, 微軟正黑體,  DFHei-Bd-HK-BF;
      font-size: 20px;
      line-height:51px;
      color: #FFFFFF;
      letter-spacing: 5px;
      margin-bottom:5px;
      text-align: left;
      margin-left:0px;
      margin-right:-30px;
      padding-left:20px;}
.tab4:hover{background: #dbe7e9; font-family: Arial, Verdana, 微軟正黑體,  DFHei-Bd-HK-BF;}
.tab5{background: #E2AD63;font-family: Arial, Verdana, 微軟正黑體,  DFHei-Bd-HK-BF;
      font-size: 20px;
      line-height:51px;
      color: #FFFFFF;
      letter-spacing: 5px;
      text-align: left;
      margin-left:0px;
      margin-right:-30px;
      padding-left:20px;}
.tab5:hover{background: #f0d6b1; font-family: Arial, Verdana, 微軟正黑體,  DFHei-Bd-HK-BF;}

.spots{width:101.3%; margin-left:-30px;  margin-right:-15px;}
.DPic{ margin-top:30px; width:37%; margin-right:-3.7%; display:inline-block;}
.Grow{width:100%; height:40px;}
#mainD{width: 1200px; float:center;}
.Dbtn{ margin-bottom:0px; margin-right:0px; display:block;}
.Dbtn1{ margin-bottom:0px; margin-right:0px; display:block;}
.Dnav {width:114%;
       background-image: linear-gradient(-180deg, #D8D8D8 0%, #EEEEEE 100%);
       font-family: Arial, Verdana, 微軟正黑體,  DFHei-Bd-HK-BF;
       font-size: 26px;
       color: #626060;
       text-align:center;
       font-weight:600;
       letter-spacing: 6.82px;}
.Dnav:hover {width:114%;
       background: #DF634D;
       font-family: Arial, Verdana, 微軟正黑體,  DFHei-Bd-HK-BF;
       font-size: 26px;
       color: #FFFFFF;
       text-align:center;
       font-weight:600;
       letter-spacing: 6.82px;
       z-index:0;} 

.Dnav2 {width:104%;
       margin-top:10px;
       padding-left:30px;
       background-image: linear-gradient(-180deg, #D8D8D8 0%, #EEEEEE 100%);
       font-family: Arial, Verdana, 微軟正黑體,  DFHei-Bd-HK-BF;
       font-size: 26px;
       color: #626060;
       text-align:center;
       font-weight:600;
       letter-spacing: 6.82px;}
.Dnav2:hover {color:#004a9c;font-family: Arial, Verdana, 微軟正黑體,  DFHei-Bd-HK-BF; font-weight:600;}
.Dnav-under {width:114%; height:8px; background: #F9907B; }
.Dnav-under1 {width:104%; height:8.5px; background: #006aa7; margin-top:5px; padding-right:0px;}
.Dnav1{width:114%;
       line-height:52px;
       background: #DF634D;
       font-family: Arial, Verdana, 微軟正黑體,  DFHei-Bd-HK-BF;
       font-size: 26px;
       color: #FFFFFF;
       text-align:center;
       font-weight:600;
       letter-spacing: 6.82px;
       z-index:0;} 

.frame{ border: 3px solid #69A7F9; border-radius: 8px; padding:15px 0px;}
.ProWS{font-weight: 400;
       font-size: 15px; display:inline-block;}

@media screen and (min-width: 1201px){
#mainC{width:103%; margin-left:0px;}
#bigImg{width:102.7%; margin-left:-15px;}
#bigImg .carousel .nav{width:1233px; margin-left:0px;}
#bigImg .carousel .nav-pills > li {font-size: 22px;}
#bigImg .carousel .nav-pills > li.active > a{font-size: 22px;}
#bigImg .carousel .nav-pills > li.active > a:hover{font-size: 22px;}
#bigImg .carousel .nav-pills > li.active > a:focus{font-size: 22px;}
#bigImg .carousel .nav-pills > li > a:hover, .nav-pills > li> a:focus  {font-size: 22px;}
.BNzone{width:102%; margin-left:10px;}
.BNzonetitle{height:80%; margin-left:-30px; margin-right:-5px; display:inline-block;}
}

@media (min-width:992px) and (max-width:1200px){
#mainC{width:101%; margin-left:0.8%;}
#bigImg{width:100%; margin-left:0%;}
#bigImg .carousel .nav{width:100%; margin-left:0px;}
#bigImg .carousel .nav-pills > li > a {font-size: 18px;padding: 10px 5px;}
#bigImg .carousel .nav-pills > li {width: 24.82%; font-size: 18px;}
#bigImg .carousel .nav-pills > li.active > a{font-size: 18px;}
#bigImg .carousel .nav-pills > li.active > a:hover{font-size: 18px;}
#bigImg .carousel .nav-pills > li.active > a:focus{font-size: 18px;}
#bigImg .carousel .nav-pills > li > a:hover, .nav-pills > li> a:focus  {font-size: 18px;}
.frame{ border: 3px solid #69A7F9; border-radius: 8px; padding:1.3vh 0px;}
.BNzone{width:100%; margin-top:30px; margin-left:10px;}
.BNzonetitle{height:105%; margin-left:-15px; margin-right:-15px; display:inline-block;}
.DPic{ margin-top:30px; width:34%; margin-right:-0.7%; display:inline-block;}
.spots{width:100%;}
.banner-prod{width:100%; margin-left:-2%; margin-bottom:20px;}
}

@media (min-width:900px) and (max-width: 991px){
#mainC{width:106%; margin-left:-2%;}
#bigImg{width:104%; margin-left:-2%;}
#bigImg .carousel .nav{width:102.5%; margin-left:0px;}
#bigImg .carousel .nav-pills > li {width: 24.2%; font-size: 18px;}
#bigImg .carousel .nav-pills > li > a {font-size: 18px;padding: 10px 5px;}
#bigImg .carousel .nav-pills > li.active > a{font-size: 18px;}
#bigImg .carousel .nav-pills > li.active > a:hover{font-size: 18px;}
#bigImg .carousel .nav-pills > li.active > a:focus{font-size: 18x;}
#bigImg .carousel .nav-pills > li > a:hover, .nav-pills > li> a:focus  {font-size: 18px;}
.frame{ border: 3px solid #69A7F9; border-radius: 8px; padding:1.3vh 0px;}
.BNzone{width:100%; margin-top:30px; margin-left:-5px;}
.BNzonetitle{height:105%; margin-left:-15px; margin-right:-15px; display:inline-block;}
.DPic{ margin-top:30px; width:34%; margin-right:-0.7%; display:inline-block;}
.spots{width:100%;}
.banner-prod{width:100%; margin-left:-2%;}
}

@media (min-width:768px) and (max-width: 899px){
#bigImg{width:102%; margin-left:0px;}
#mainC{width:104%; margin-left:30px;}
#bigImg .carousel .nav{width:102.3%; margin-left:0px;}
#bigImg .carousel .nav-pills > li {font-size: 17px;}
#bigImg .carousel .nav-pills > li > a {font-size: 17px;padding: 10px 5px;}
#bigImg .carousel .nav-pills > li.active > a{font-size: 17px;}
#bigImg .carousel .nav-pills > li.active > a:hover{font-size: 17px;}
#bigImg .carousel .nav-pills > li.active > a:focus{font-size: 17px;}
#bigImg .carousel .nav-pills > li > a:hover, .nav-pills > li> a:focus  {font-size:17px;}
.frame{padding:1vh 0px; margin-left:-15px;}
.BNzone{width:99%; margin-top:30px; margin-left:20px; text-align:center;}
.BN{margin-bottom:10px;}
.DPic{ margin-top:30px; width:34%; margin-right:-0.7%; display:inline-block;}
.spots{width:100%;}
.banner-prod{width:98%; margin-left:-5.2%;}
}

@media (min-width:577px) and (max-width:767px){
#bigImg{width:99.9%; margin-left:2.2%;}
#mainC{width:93.5%; margin-left:0px;}
#bigImg .carousel .nav{width:102.2%; margin-left:-2.2%;}
#bigImg .carousel .nav-pills > li {font-size: 14px;}
#bigImg .carousel .nav-pills > li.active > a{font-size: 14px;}
#bigImg .carousel .nav-pills > li.active > a:hover{font-size: 14px;}
#bigImg .carousel .nav-pills > li.active > a:focus{font-size: 14px;}
#bigImg .carousel .nav-pills > li > a:hover, .nav-pills > li> a:focus  {font-size:14px;}
#bigImg .carousel .nav > li > a { padding: 8px 3px; }
.frame{ padding-top:10px; padding-bottom:0px;}
.BNzone{width:98%; margin-top:20px; margin-left:1%; text-align:center;}
.BN{width:37%; margin-bottom:10px; margin-left:-1.3%; margin-right:-3%;text-align:center;}
.box{margin-left:10px;}
.DPic{ margin-top:10px; width:35%; margin-left:1%; text-align:center; display:inline-block;}
.spots{width:100%;}
.banner-prod{width:105%; margin-left:-2.5%;}
}

@media (min-width:480px) and (max-width:576px){
#bigImg{width:100%; margin-left:0%;}
#mainC{width:100%; margin-left:0%;}
#bigImg .carousel .nav{display:none;}
.BNzone{width:98%; margin-top:30px; margin-left:1%; text-align:center;}
.BN{width:100%; margin-bottom:10px; text-align:center;}
.box{margin-left:-3px;}
.DPic{ margin-top:10px; width:120%;  margin-left:-10%; text-align:center; display:inline-block;}
.spots{width:100%; }
.Dnav-under{width:116%; height:6px; background: #F9907B;}
.banner-prod{width:99%; margin-left:-1%;}
.AEtitle, .unititle {width: 100%; font-size: 22px; margin-left: 0px;}
.ezbg1 {width:101%; margin-left:1%;}
}

@media (min-width:431px) and (max-width:479px){
#bigImg{width:100.5%; margin-left:0%;}
#mainC{width:100%; margin-left:-10px;}
#bigImg .carousel .nav{display:none;}
.BNzone{width:100%; margin-top:15px; text-align:center;}
.frame{ border: 3px solid #69A7F9; border-radius: 8px; padding-top:1vh; padding-bottom:2px;}
.BN{margin-bottom:10px;}
.DPic{ margin-top:10px; width:106%; margin-left:-1%; text-align:center; display:inline-block;}
.spots{width:100%; }
.Dnav-under{width:122%; height:6px; background: #F9907B;}
.banner-prod{width:98%; margin-left:1%;}
.AEtitle, .unititle {width: 100%; font-size: 22px; margin-left: 10px;}
.ezbg1 {width:106%; margin-left:1%;}
}

@media (min-width:371px) and (max-width:430px){
#bigImg{width:100%; margin-left:0%;}
#mainC{width:100%; margin-left:0.5%;}
#bigImg .carousel .nav{display:none;}
.BNzone{width:98%; margin-top:15px; text-align:center;}
.frame{ border: 3px solid #69A7F9; border-radius: 8px; padding-top:1vh; padding-bottom:2px;}
.BN{margin-bottom:10px;}
.DPic{ margin-top:10px; width:106%; margin-left:-1%; text-align:center; display:inline-block;}
.spots{width:100%; }
.banner-prod{width:100%; margin-left:-7px;}
.AEtitle, .unititle {width:100%; font-size: 22px; margin-left: -2px; padding-left:15px;}
.ezbg1 { width: 103%; margin-left:0px;}

}

@media screen and (max-width:370px){
#bigImg{width:100%; margin-left:0%;}
#mainC{width:100%; margin-left:-2%;}
#bigImg .carousel .nav{display:none;}
.BNzone{width: 97%; margin-left:1.5%; margin-top:15px; text-align:center;}
.frame{ border: 3px solid #69A7F9; border-radius: 8px; padding-top:1vh; padding-bottom:2px;}
.BN{margin-bottom:10px;}
.DPic{ margin-top:10px; width:106%; margin-left:-1%; text-align:center; display:inline-block;}
.spots{width:100%; }
.banner-prod{width:100%; margin-left:3px;}
.AEtitle, .unititle {width:100%; font-size: 22px; margin-left:5px;}
.ezbg1 {width: 106%; margin-left:5px;}
}