@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{padding-top:2px;padding-left:5px;float: left;}
  .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%;}
}