@import url("css2.css");

/* reset css */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, p, th, td {margin:0; padding:0; -webkit-text-size-adjust:none;}
th{font-weight:normal; text-align:left;}
table{border-collapse:collapse; border-spacing:0;}
img{border:0;}
ol, ul{list-style:none;}
.clear{ clear:both;}
a{outline:none; hlbr:expression(this.onFocus=this.blur()); text-decoration:none; cursor:pointer;}
input , select , textarea , button{outline:none; border-radius:0; font-family:arial , Microsoft YaHei;}
button{cursor:pointer;}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:none;}
a:active {text-decoration:none;}
.blank30{ height:30px; clear:both;}
.blank10{ height:10px; clear:both;}
body{font-family:arial,"微軟正黑體";  font-size:16px; line-height:28px; color:#333333;overflow-x: hidden;
}
#xs_index_wap{ display: none;}
#xs_index_web{ display: block;}
.container{width:96%; margin-left:auto; margin-right:auto ; max-width:1200px; min-width:280px;}
.container2{width:96%; margin-left:auto; margin-right:auto ; max-width:1200px; min-width:280px;}

/*** 導航開始 ***/

.toplang{background-color: #000;color:#fff;padding-top:5px;padding-bottom:5px;text-align: right;}
.yuyan{position: relative;width:100px;padding-right:15px;float: right;cursor: pointer;}
.yuyan i{margin-left:10px;}
.yuyan ul{display:none;position: absolute;top:30px;background-color: #000;width:100px;text-align: center;padding-top:10px;padding-bottom:10px;}
.yuyan ul li a{color:#fff;display: block;line-height:30px;}
.yuyan ul li a:hover{color:#cccccc}
.yuyan:hover ul{display:block;}

.language{padding-top:30px;padding-bottom:20px;}
.language a{color:#fff;margin-left:20px;margin-right:auto;}

.logo{text-align: center;border-bottom:solid 1px #CDCDCD;padding-top:15px;padding-bottom:15px;}
.logo img{width:100%;display: block;max-width:360px;margin-left:auto;margin-right:auto;}

.header_top{ height:60px;background-color:#fff;}
.head{position: relative;width:100%;}
.head .navbox{width:100%; margin-left:auto; margin-right:auto ;}
.head .nav{display: block; float: right;width:calc(100% - 10px);}
.head .nav .nav_pc{ width: 100%;}
.head .nav ul li{float:left;position: relative;box-sizing: border-box;z-index: 999;}
.head .nav ul li span{display:none;}
.head .nav ul li .f_a{display:block;text-align:center;font-size:16px;color:#222222; font-weight: bolder;line-height: 60px;}
.head .nav ul li:hover .f_a{color: #222222; transition:all .3s;background-image: url(../images/nav_bg.png);background-repeat: no-repeat;background-position:top center;}
.head .nav ul li .s_navbox{display:none;position: absolute;left: 0;width: 100%; background:#fff;background-color: #2467EC;z-index: 9999;box-sizing: border-box}
.head .nav ul li .s_navbox .s_a a{color:#fff;font-size:14px;text-transform:uppercase;display:block;text-align: center;padding: 10px 0;border-bottom: 1px solid #fff;}
.head .nav ul li .s_navbox .s_a a:hover{background-color:#666;color: #fff;}
.m_nav{display:none}
.headlf .m_logo{display: none}
.headrg .m_menuimg{display: none}
#select{color: #222222; transition:all .3s;background-image: url(../images/nav_bg.png);background-repeat: no-repeat;background-position:top center;}
/* 下拉侧边菜单 */
.sidenav{position: relative;width:180px;display: block; float: left;}
.sidenav label {width:180px;display: block;padding-left: 55px;box-sizing: border-box; background: #A4CC76;position: relative;height: 48px;line-height: 48px;color: #fff;font-size: 16px;}
.sidenav label i {width: 30px;height: 30px;display: block;position: absolute;background-size: 20px;left: 25px;top: 16px;}
.sidenav .side {display: inline-block;position: absolute;top: 48px;left: 0;z-index: 999;width: 180px;background: #fff;border-top: none;background-color: rgba(255, 255, 255, .95);box-sizing: border-box;}
.sidenav .side li {position: relative;width:100%; padding:5px 0px;border-bottom: 1px solid #cccccc;box-sizing: border-box}
.sidenav ul.side li:first-child {cursor: pointer;}
.sidenav .side li a {color: #333;height: 40px;line-height: 40px;padding: 8px 0 8px 0;display: block;font-size: 16px;}
.sidenav .side li a:hover {background: none;color: #0085cd;}
.sidenav .side li a i {transition: all 0.3s ease 0s;}
.sidenav .side li a i.side_t {margin-left:10px; width: 40px;height: 40px;display: inline-block;vertical-align: middle;background-size: 30px;}
.sidenav .side li a:hover i {margin-left: 15px;}
.icon1{background: url(../imgs/sideIcon1.png) no-repeat;}
.icon2{background: url(../imgs/sideIcon1.png) no-repeat;}
.icon3{background: url(../imgs/sideIcon1.png) no-repeat;}
.icon4{background: url(../imgs/sideIcon1.png) no-repeat;}
.icon5{background: url(../imgs/sideIcon1.png) no-repeat;}
.icon6{background: url(../imgs/sideIcon1.png) no-repeat;}
.icon7{background: url(../imgs/sideIcon1.png) no-repeat;}
.sidenav .side li:hover .side_main {display: block;z-index: 999;}
.sidenav .side .side_main {display: none;width: 500px;background: #FFFFFF;position: absolute;left: 180px;top:0;box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);border: 1px #cecece solid;z-index: 7;}
.sidenav .side .side_main dl {margin: 20px;padding: 0;}
.sidenav .side .side_main dl dt {font-size: 18px;margin-bottom: 10px;color: #0173b2;font-weight: bold;}
.sidenav .side .side_main dl dt b{font-size: 15px;}
.sidenav .side .side_main dl dd {margin-bottom: 10px;display: inline-block;}
.sidenav .side .side_main dl dd a {position: relative; display: inline-block;color: #777;font-size: 14px;margin:0 4px ;padding: 0 5px;border-right: 2px solid #bbbbbb; height: auto;line-height: 1.5;transition: all 0.2s ease 0s;}
i.icon-hot,i.icon-new {display: inline-block;height: 9px;width: 24px;background: url(../imgs/img_public.png) no-repeat;vertical-align: middle;}
i.icon-hot {background-position: 0 -240px;}
i.icon-new {background-position: -40px -240px;}
.sidenav .side .side_main dl dd a span {color: #999;}
.sidenav .side .side_main dl dd a:hover {background: none;color: #cf1322;transform:translateY(-2px);}
.sidenav .side .side_main dl dd a:hover b {color: #40adf5;}
.sidenav .side .side_main dl dd a:hover span {color: #40adf5;}

/*** 首頁幻燈片開始 ***/
.banner-slider{}
.slider-item{position:relative; margin:0 auto;}
.slider-item img{display:block; width:100%; height:auto;}
.banner-slider .owl-dot{background-color: transparent;}
.banner-slider .owl-dots {line-height: 1;margin-top: 0 !important; position: absolute; left: 0px;bottom: 30px;display: block; width: 100%; max-width: 1320px;margin: auto; right: 0;text-align: center;}
.banner-slider .owl-dots .owl-dot span {width: 10px; height: 10px;margin: 0 6px;border-radius: 50%;-webkit-transition: all ease 0.5s;
transition: all ease 0.5s;position: relative;border:solid 2px #fff;background-color: transparent;}
.banner-slider .owl-dots .owl-dot:hover span {background: #fff;}
.banner-slider .owl-dots .owl-dot.active span { background: #fff;}
/*** 首頁幻燈片結束 ***/

/*** 首頁搜索開始 ***/
.searchform{width:50%;margin:0 auto;border: solid 2px #fff;border-radius: 10px;}
.searchtxt{float: left;width:75%;background-color: #F0EBE8;border:none;border-radius: 7px 0px 0px 7px;height:50px;line-height: 50px;text-indent: 20px;color:#8A5237}
.searchbtn{float: right;width:25%;background-color: #8A5237; color:#fff;border:none;height:50px;border-radius: 0px 7px 7px 0px;background-image:url(../images/search.jpg);background-repeat: no-repeat;background-position:50% 50%;}
/*** 首頁搜索結束 ***/

.hengimgall{height:0; width:100%;  margin:0%;position: relative; padding-bottom:100%;  overflow: hidden;background-color: #666666;}
.hengimgall img{cursor: pointer;position: absolute;  left: 0; top: 0;width: 100%  ; height: 100%;display: block;}


/*** 首頁三個單頁開始 ***/
.haochulist{border-radius: 10px 10px 0px 0px;background-color: #FCFAF8;margin-top:50px;padding-bottom:30px;width:100%;}
.haochuimg{display: block;width:100%;}
.haochuimg img{width:100%;display: block;border-radius: 10px 10px 0px 0px;}
.haochuinfo{width:90%;margin:0 auto;}
.haochuinfo h3{color:#3F3F3F;font-size:24px;letter-spacing: 2px;font-weight: bolder;margin-top:30px;text-align: center;}
.haochuinfo h4{color:#8a5237;font-size: 18px;margin-top:20px;text-align: center;}
.haochuinfo h5{color:#878787;font-size: 16px;margin-top:15px;line-height: 28px;}
.haochumore{margin-top:15px;text-align: center;}
.haochumore a{display:inline-block;border:solid 2px #8a5237;color:#8a5237;padding:5px 20px;border-radius: 20px;font-weight: bolder;}
.haochumore a:hover{background-color: #8a5237; color:#fff;}

/*** 首頁實境環景看屋開始 ***/
.shijing{margin-top:50px;background-color: #FCFAF8;padding-top:50px;padding-bottom:50px;}
.indextitle{text-align: center;color:#3F3F3F;font-size:30px;letter-spacing: 2px;font-weight: bolder;}
.sjlist{border:solid 2px #F3EFEC;background-color: #FFFFFF;margin-top:50px;}
.sjimg{float: left;width:25%;background-size:cover;height:200px;background-position: center;position: relative;}
.sjwap{display:none;position: relative;}
#sj360{position: absolute;top:35%; left:0px; width:100%;text-align: center;}
#sj360 img{max-width: 170px;}

.sjinfo{float: left;width:65%;margin-left:5%;}
.sjinfo h3{color:#3F3F3F;font-size:24px;letter-spacing: 2px;font-weight: bolder;margin-top:30px;}
.sjinfo h3 a{color:#3F3F3F}
.sjinfo h3 a:hover{color:#8a5237;}
.sjinfo p{color:#878787;font-size: 16px;margin-top:10px;line-height: 28px;height:58px;overflow: hidden;}
.sjmore{margin-top:10px}
.sjmore a{color:#8a5237;font-size: 16px;}
.sjmore a:hover{color:red;}

@media screen and (max-width:960px){
  .sjimg{width:35%;}
  .sjinfo{width:55%;}
}


/*** 關於我們幻燈片開始 ***/
#xs_about_web{display: block;}
#xs_about_wap{display: none;}

.about-slider .owl-dot{background-color: transparent;}
.about-slider .owl-dots {line-height: 1;margin-top: 0 !important; position: absolute; left: 0px;bottom: 30px;display: block; width: 50%; max-width: 1320px;margin: auto; right: 0;text-align: left;}
.about-slider .owl-dots .owl-dot span {width: 10px; height: 10px;margin: 0 6px;border-radius: 50%;-webkit-transition: all ease 0.5s;
transition: all ease 0.5s;position: relative;border:solid 2px #fff;background-color: transparent;}
.about-slider .owl-dots .owl-dot:hover span {background: #fff;}
.about-slider .owl-dots .owl-dot.active span { background: #fff;}
/*** 關於我們幻燈片結束 ***/
.aboutkang{position: absolute;left:50%;top:0px;z-index: 9;width:50%;height:100%;background-image: url(../images/bgabout.png);}
.aboutkang article{padding:60px;}
.abouttitle{color:#fff;font-weight: bolder;font-size: 30px;letter-spacing: 3px;}
.abouttxt{margin-top:50px;width:90%;}
.abouttxt h3{font-size:18px;letter-spacing: 2px;color:#FEFEFE;}
.abouttxt h3 i{margin-right:10px;}
.abouttxt p{color:#C4AA9D;line-height: 28px;height:110px;overflow: hidden;margin-top:10px;}
.aboutline{height:1px;background-color: #AA826E;margin-top:50px;}
.aboutmore{margin-top:50px;}
.aboutmore a{display:inline-block;border:solid 2px #fff;color:#fff;padding:5px 20px;border-radius: 20px;font-weight: bolder;}
.aboutmore a:hover{background-color: #fff; color:#000;}

.nav_wap_line{height:60px;display: none;}
@media screen and (max-width:1600px){
  .aboutkang article{padding:30px;}
  .abouttxt{margin-top:30px;width:95%;}
  .aboutline{margin-top:30px;}
  .aboutmore{margin-top:30px;}
}
@media screen and (max-width:1210px){
  .abouttxt p{height:58px;}
}
@media screen and (max-width:990px){
  #xs_about_web{display: none;}
  #xs_about_wap{display: block;}
  .about-slider .owl-dots {bottom: 20px;text-align: center;}
  .abouttxt{width:100%;}
  .aboutkang{position:static;left:0px;top:0px;z-index: 9;width:100%;height:auto;}
.abouttxt p{height:auto;overflow:auto;margin-top:10px;}

}


/*** 幸福快訊開始 ***/

.indexnews{padding-top:50px;padding-bottom:50px;}
.newsshare a{background-color: #3D5A9A;color:#fff;display:block;border-radius: 50px;text-align: center;padding-top:10px;padding-bottom:10px;margin-top:30px}
.newsshare a i{font-size:30px;margin-right:10px;vertical-align: middle;}

/*** 尾巴開始 ***/
footer{background-color: #000;padding-top:20px;padding-bottom:20px;}
.endnav{text-align: center;font-size: 18px;color:#fff}

#btn {
  width:40px;
  height: 40px;
 position:fixed;
  right:10px;
  bottom:20px;
  background:url(../images/top.png)  no-repeat  left top ;
  margin-left: 610px;
  z-index: 999;
}
#btn:hover {
  background:url(../images/top.png)  no-repeat  left -40px;
}


/**** 內頁開始 ***/
#box{border-top:solid 1px #f1f1f1;height:300px;}

.companyinfoleft{float: left;width:50%;}
.companyinforight{float:right;width:50%;padding-top:50px;padding-bottom:50px;}

.companyinfo{background-color: #B0B7CA;}


  .flex-container {
    display: flex;
    align-items: center;
    gap: 30px;
  }
  
  .flex-container img {
    width: 40%;  /* 图片占40%宽度 */
    height: auto;
  }


  .flex-container .text {
    width: 60%;  /* 文字占60%宽度 */
  }
  .flex-container .text article{width:90%;margin:0 auto;font-size:22px;line-height:48px;font-weight:bolder;}
  
  @media (max-width: 768px) {
    .flex-container {
      flex-direction: column;
      padding-bottom:30px;
    }
    
    .flex-container img,
    .flex-container .text {
      width: 100%;
    }


      .flex-container .text article{width:90%;margin:0 auto;font-size:18px;line-height:36px;font-weight:bolder;}
  }


.proleft{float:left;width:40%;}
.proright{float:right;width:50%;}
.proright h3{font-size:30px;font-weight: bolder;}
.proremark{margin-top:30px;font-size:18px;font-weight: bolder}
.procontent{margin-top:20px;}

#yingpic{margin-top:50px}
#yingpic img{display:block;width:100%;}

.yinginfo h3{font-size:30px;font-weight: bolder;}

.newsnav{margin-top:30px;color:#878787;font-weight: bolder;}


.news{background-color: #B0B7CA;padding-top:1px;padding-bottom:80px;}
.newsitem{padding-top:30px;padding-bottom:30px;background-color: #fff;margin-top:30px;}
.newsitem article{width:90%;margin:0 auto;}
.newsimg{float:left;width:40%;}
.newsimg img{width:100%;}
.newsinfo{float:right;width:55%;}
.newsinfo span{color:#999}
.newsinfo h3{margin-top:15px;}
.newsinfo p{margin-top:20px;}
.newsmore{margin-top:20px;text-align: center;}
.newsmore a{display: inline-block;padding-left:20px;padding-right:20px;background-color: #000;color:#fff;border-radius: 50px;}
.newsmore a:hover{background-color:#D75D3F ;}

.pagerdiv{text-align: center;}
.pagination {
  display: inline-block;
  padding-left: 0;
  margin: 50px 0;
  border-radius: 4px;
  margin-top:50px;
  
}

.pagination > li {
  display: inline;
}

.pagination > li > a,
.pagination > li > span {
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.42857143;
  color: #666666;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #ddd;
}

.pagination > li:first-child > a,
.pagination > li:first-child > span {
  margin-left: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.pagination > li:last-child > a,
.pagination > li:last-child > span {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  z-index: 2;
  color: #23527c;
  background-color: #eee;
  border-color: #ddd;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  z-index: 3;
  color: #fff;
  cursor: default;
  background-color: #666666;
  border-color: #666666;
}

.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
  color: #777;
  cursor: not-allowed;
  background-color: #fff;
  border-color: #ddd;
}

.contactpic{width:100%;}
.contactpic img{display: block;width:100%;}
.contactwarp{padding-top:50px;padding-bottom:50px;}
.contactinfo{float:left;width:32%;box-shadow:0px 0px 8px #f1f1f1;min-height:500px;padding-top:30px;padding-bottom:30px;}
.contactinfo article{width:90%;margin:0 auto;}
.contacttitle{font-size: 30px;font-weight:bolder;line-height:30px;margin-top:20px;}
.contacttitle svg{vertical-align: middle;margin-right:10px;}
.contact_address{margin-top:30px;font-size:16px;font-weight: bolder;
  line-height:35px;border-bottom:solid 1px #333;padding-bottom:30px;}
.contactbbs{float: right;width:65%;box-shadow:0px 0px 8px #f1f1f1;min-height:500px;padding-bottom:30px;}
.contactbbs article{width:90%;margin:0 auto;}
.bbstxt{border-radius: 3px;background-color: #F5F5F5;border:none;margin-top:50px;width:100%;padding:8px;padding-top:10px;
padding-bottom:10px;}

.submitbbs{margin-top:50px;background-color: #D75D3F;display: inline-block;border:none;color:#fff;padding:10px;border-radius: 3px;min-width:120px;}

.supports{background-color: #fff;padding-top:1px;padding-bottom:80px;}

.supcate{box-shadow:0px 0px 8px #ccc;padding-top:20px;padding-bottom:20px;margin-top:40px;}
.supcate span{display: block;width:90%;margin:0 auto;font-weight: bolder;font-size:20px;letter-spacing: 5px;}

.filelist{width:100%;}
.filelist li{border-bottom: solid 1px #000;padding-bottom:15px;margin-top:40px;}
.filename{float: left;width:40%;font-size:17px;font-weight:bolder;text-indent:25px;}
.zhongwen{float: right;width:60%;text-align: right;}
.zhongwen a{margin-left:25px;margin-right:25px;font-size:17px;font-weight:bolder;}
@media screen and (max-width:768px){

  .contactinfo{float:none;width:100%;min-height:auto;padding-bottom:10px;}

.contactbbs{float: none;width:100%;margin-top:50px;min-height:auto;padding-bottom:50px;}


  .newsimg{float:none;width:100%;}
  .newsinfo{float:none;width:100%;margin-top:30px;}

  .news{padding-top:1px;padding-bottom:50px;}

.proleft{float: none;width:90%;margin:0 auto;}
.proright{float:none;width:100%;margin-top:30px;}

  .companyinfoleft{float: none;width:100%;}
.companyinforight{float:none;width:100%;padding-top:50px;padding-bottom:50px;}
.companyinforight article{width:90%;margin:0 auto;font-size:16px;line-height:32px;}


  #xs_index_wap{ display: block;}
  #xs_index_web{ display: none;}
.nav_wap_line{height:20px;display: block;}

  .logo{display: none;}
  .head{display:none}
.m_img {
  display: block;
  background: #fff;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: 9999;
  border-bottom: 0px solid #136A80;
  overflow: hidden;
  padding-top: 5px;
  padding-bottom: 5px;
}

.m_img .headlf {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 2px;
  /* 移除 padding-left: 5px; 以保证完全居中 */
}

.m_img .headlf .m_logo {
  height: 45px;
  display: block;
}

.m_img .headrg {
  padding-right: 10px;
  padding-top: 14px;
  float: right;
}
  .m_menucart{float: right;}
  .m_menucart img{vertical-align: middle;margin-top:5px;margin-right:10px; display: inline-block;}
  .m_menucart a{position: relative;}
  .m_menucart a span{position: absolute;width:23px;height:23px;background-color: red;color:#fff;border-radius: 50px; text-align: center;line-height: 23px;top:-7px;left:15px;}
  .m_img .headrg a .m_menuimg{height:16px;vertical-align:top;display:inline-block}
  .m_nav {display:block;position:fixed;top:0px;left:0px;width:0px;height:0px;overflow:hidden;z-index:10000}
  .m_nav .closecover{position:absolute;width:100%;height:100%;background:#231816;filter:alpha(opacity=0);opacity:0;left:0px;top:0px;z-index:1}
  .m_nav .closeicon{position:absolute;width:20%;left:10px;top:5%;z-index:100;text-align:center;filter:alpha(opacity=0);opacity:0}
  .m_nav .m_navList{position:absolute;width:80%;right:0px;top:0px;background:#231816;height:100%;z-index:100;right:-80%;overflow-y: scroll;}
  .m_nav .m_navList ul{padding-left:5%;padding-right:5%}
  .m_nav .m_navList ul li{border-bottom:1px solid #333}
  .m_nav .m_navList ul li a{display:block;height:45px;color:#fff;line-height:45px;padding-left:5%;font-size:16px}
  .m_nav .m_navList ul li .m_f_a{display: flex;align-items: center;justify-content: space-between; width: 100%}
  .m_nav .m_navList ul li .m_f_a a{flex: 1;}
  .m_nav .m_navList ul li .m_f_a i{width: 40px;height:35px;box-sizing: border-box; padding:0 5px; display: block;}
  .icon{ background:url(../images/plus.png) 100% no-repeat;background-position: 50% 50%; -webkit-transition:all 0s;-moz-transition:all 0s;transition:all 0s}
  .icon_on{background:url(../images/reduce.jpg) 50% no-repeat!important;background-position: 50% 50%;-webkit-transition:all 0s;-moz-transition:all 0s;transition:all 0s}
  .m_nav .m_navList ul li .m_s_nav{display:none;width: 100%;}
  .m_nav .m_navList ul li .m_s_nav a{display: block; height:40px;line-height:40px;font-size:14px;padding-left:10%;overflow: hidden; white-space: nowrap;width: 90%;text-overflow: ellipsis;}

  .banner-slider .owl-dots {bottom: 10px;}
  .searchform{width:70%;}


  .sjimg{float: none;width:100%;height:auto;background-image: none;}
  .sjwap{display:block;width:100%;position: relative;}
  .sjwap img{width:100%;}

  .sjinfo{float: none;width:90%;margin-left:0%;margin:0 auto;padding-bottom:20px;}

}

@media screen and (max-width:480px){
  .searchform{width:90%;}
  .searchtxt{width:70%;}
  .searchbtn{width:30%;}
}



.procontent ul{padding-left: 1.5rem;}
.procontent ul li{list-style-type:disc;list-style-position: outside;}

.newsinfo ul{padding-left: 1.5rem;}
.newsinfo ul li{list-style-type:disc;list-style-position: outside;}

      /* ========== 社交悬浮按钮 ========== */
   /* 基础样式 */
   
        /* 悬浮按钮容器 */
        .floating-buttons-container {
            position: fixed;
            right: 30px;
            bottom: 95px;
            display: flex;
            flex-direction: column;
            gap: 15px;
            z-index: 1000;
        }
        
        /* 悬浮按钮基础样式 */
        .social-fab {
            position: relative;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            transition: all 0.3s ease;
            overflow: hidden;
        }
        
        /* 按钮悬停效果 */
        .social-fab:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
        }
        
        /* 按钮激活效果 */
        .social-fab:active {
            transform: translateY(-1px);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
        }
        
        /* Facebook 按钮样式 */
        #facebookBtn {
            position: relative;
            color: white;
        }


        #facebookBtn:hover {
            background: linear-gradient(135deg, #E19D43, #E19D43);
        }
        
        /* Line 按钮样式 */
        #lineBtn {
            background: linear-gradient(135deg, #00B900, #00A000);
            color: white;
        }
        
        #lineBtn:hover {
            background: linear-gradient(135deg, #00A000, #00B900);
        }


        /* Facebook 按钮样式 */
        #orderingbtn {
            background: linear-gradient(135deg, #D9232E, #EA5557);
            color: white;    font-size: 18px;
    font-weight: bold;
    color: white;
    letter-spacing: 1px;
    cursor: pointer;
        }
        
        #orderingbtn:hover {
            background: linear-gradient(135deg, #FF6B6B, #E6212A);
        }
        
        
        /* 图标样式 */
        .social-icon {
            width: 28px;
            height: 28px;
            transition: transform 0.3s ease;
        }
        
        .social-fab:hover .social-icon {
            transform: scale(1.1);
        }
        
        /* 按钮标签（可选的文字标签） */
        .social-fab::after {
            content: attr(aria-label);
            position: absolute;
            right: 70px;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 8px 12px;
            border-radius: 4px;
            font-size: 14px;
            white-space: nowrap;
            opacity: 0;
            transform: translateX(10px);
            transition: all 0.3s ease;
            pointer-events: none;
        }
        
        .social-fab:hover::after {
            opacity: 1;
            transform: translateX(0);
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .floating-buttons-container {
                right: 30px;
                bottom: 90px;
                gap: 10px;
            }
            
            .social-fab {
                width: 50px;
                height: 50px;
            }
            
            .social-icon {
                width: 24px;
                height: 24px;
            }
            
            /* 在移动设备上隐藏文字标签 */
            .social-fab::after {
                display: none;
            }
        }
        
        /* 小屏幕设备 */
        @media (max-width: 480px) {
            
        }
        
        /* 动画效果 - 入场动画 */
        @keyframes floatIn {
            from {
                opacity: 0;
                transform: translateY(20px) scale(0.9);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
        
        /* 应用入场动画 */
        .social-fab {
            animation: floatIn 0.5s ease forwards;
            opacity: 0;
        }
        
        /* 为每个按钮设置不同的动画延迟 */
        #facebookBtn {
            animation-delay: 0.2s;
        }
        
        #lineBtn {
            animation-delay: 0.4s;
        }
        
        /* 可选的：添加更多按钮时的样式 */
        .social-fab.whatsapp {
            background: linear-gradient(135deg, #25D366, #128C7E);
        }
        
        .social-fab.instagram {
            background: linear-gradient(135deg, #E4405F, #833AB4);
        }
        
        .social-fab.twitter {
            background: linear-gradient(135deg, #1DA1F2, #0D8BD9);
        }

        
/* ========== 滚动到顶部按钮 ========== */
.scroll-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: #003380;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(18, 62, 108, 0.3);
}

.scroll-top-btn.visible {
    opacity: 1;
    visibility: visible;
}

.scroll-top-btn:hover {
    background-color: #1a5a9e;
    transform: translateY(-5px);
}