html, body {
    
    height: 100%;
} 
body {
  font-family: "微軟正黑體","蘋果儷中黑", Arial, Helvetica, sans-serif;
  background-color: #fff;
  font-size: 20px;
  color:#000;
}
a:hover{text-decoration: none !important;}
img{ width: 100%; height:auto; }
.bg-dark {
    background-color: #0b1a35!important;
}
.navbar{width: 320px; height: 100%; 
-webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
 padding: 47px 0 20px 0;}

@media (min-width: 768px){
    .navbar-expand-md .navbar-nav {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}
.navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show>.nav-link {
    color: #fff;
}

.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
    color: #dae6f7; 
}
.navbar-dark .navbar-nav .nav-link {
   color: #fff;
}
.navbar-dark .navbar-toggler {
    background: #846051;
}
.nav-link img:hover{opacity: 0.8;}
.nav-line{margin-top: 20px !important; margin-bottom: 20px !important;}

.navbar-collapse {
    align-items: flex-start;
    margin-top: 15px;
}

.navbar-brand{ padding-top: 0; padding-bottom: 0; margin-right: 0;}
.logo{ max-width: 200px; height: auto; }
.f16{ font-size:16px;}
.f18{ font-size:18px;}
.nav-item{ margin:0 10px;}

.phone-style{font-size: 30px; font-family: Arial; padding-top: 10px; color: #cad0ea;}
.nav-item:hover .phone-style{color: #67aeff;}


.main{width: calc( 100% - 320px ); float: right; 
    padding-right: 15px;
    padding-left: 15px;}
.big-title{font-size: 48px; }
.small-title{font-size: 20px; margin-bottom: 14px;}
.small-title:after{ content: "—"; padding-left: 10px; }
.slogan{ font-size: 36px; }

.top-area{width: 100%; }

.top-area-word{background: rgba(196,107,72,.9); color: #fff;
padding: 50px 25px 40px;  float: right;}

.top-area > .row{justify-content:flex-end; 
background: url(../img/top-photo.jpg) no-repeat;
background-size: cover;

}
.top-area-word .row.qr-code{margin: 0;}
.qr-code{text-align: center; }
.qr-code h5{font-size: 18px;}
.qr-code img{width: 100%; height: auto; max-width: 235px;}
.btn-contact-area > div { justify-content: flex-start; 
  
  display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
  display: -moz-box; /* Firefox 17- */
  display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
  display: -moz-flex; /* Firefox 18+ */
  display: -ms-flexbox; /* IE 10 */
  display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */

}
.btn-contact-area > div:first-child{justify-content: flex-end;}

.btn-contact{border-radius: 20px; color: #fff; justify-content: center;
padding: 10px 24px; display: inline-flex;width: 100%;  max-width: 740px;
transition: all 0.3s; margin-bottom: 10px;}
.btn-contact img{width: 100%; height: auto; max-width: 79px;display: inline-block;}
.btn-contact h6{align-self: center; font-size: 30px; padding-left: 15px;}
.btn-contact-phone{  background-color: #67aeff; }
.btn-contact-online{ background-color: #ff748f; }
.btn-contact:hover{color: #fff; text-decoration: none;}

.btn-contact-phone:hover{background-color: #4c93e4;}
.btn-contact-online:hover{background-color: #fd5979;}

/*----首頁-徵信項目 servive-item-area-----*/
.unit-item-title{font-size: 40px; font-weight: 700; color: #c46b48; position: relative;}
.unit-item-title:after{position: absolute;content: "—"; padding-left: 10px; font-family: Arial; font-weight: 400;
font-size: 30px; margin-top: 5px;  top: 0;}
.unit-item-title:before{content: ""; width: 34px; height: 34px; display: inline-block;
background: url(../img/icon01.png) no-repeat; background-size: 34px; margin-right: 8px;}
.servive-item-area img{width: 100%; height: auto; border-radius: 20px;}
.servive-item-area a{transition:all 0.3s; font-size: 30px; color: #000; text-align: center; margin-bottom: 30px;display: block; }
.servive-item-area a:hover{color: #c46b48; }
.servive-item-area a:hover img{opacity: .8;}
.servive-item-area a h2{ margin-top: 17px; }
/*-----//servive-item-area-----*/
.item-price{font-size: 40px; color:#c46b48; }

.d-line{height: 1px; background-color: #ccc; border:none; width: 90%;
margin-left: 5%;}
.d-line2{height: 1px; background-color: #ccc; border:none; clear: both;}
.btn-more{transition: all 0.3s; padding: 8px 20px; border-radius: 10px;
  color: #fff; background-color: #c46b48;}
.btn-more:hover{background-color: #b25438; color: #fff; }
.btn-more i{ padding-left: 10px; }

.article-list{width: 100%; list-style: none; padding-left: 0;}

.article-list li a{color: #000; display: block; border-bottom: 1px dotted #ccc;
padding: 10px;}
.article-list li a:link{color: #000;}
.article-list li a:visited{    color: #b32828;}
.article-list li a:hover{color: #b25438;}

.article-list li a:before{content: "\f097"; font-family: 'FontAwesome'; padding-right: 5px;color: #b25438;}

.set-left-area{ border-right: 1px solid #ccc; padding-right: 30px; }
.device-area img{width: 100%; height: auto;}
.device-area{ padding: 0 30px; }

/*---口碑推薦---*/
.good-area{}
.good-area .photo-area img{ max-width: 200px; float: right; }
.good-area img{width: 100%; height: auto; border-radius: 20px;}
.good-area a{transition:all 0.3s; color: #000; text-align: center; margin-bottom: 30px;display: block; }
.good-area a:hover{color: #c46b48; }
.good-area a:hover img{opacity: .8;}
.good-area a h2{ margin-top: 17px; font-size: 20px;}

/*-------------*/
.article-h2{font-size: 22px;}
/*------內頁-------*/
.path{ color:#000;padding: 10px; background-color: #eee; font-size: 14px;}
.path a{color:#000; text-decoration: underline;}
.top-banner{}
.article-title {color:#c46b48;}
.article-title i{padding-right: 10px;}
.word_contentpage_gray a{color:#000;}
.servive-item-area.inner a{
  font-size: 20px; margin-bottom: 10px;
  border-radius: 5px; border: 1px solid #000;
  padding: 10px;
}
.servive-item-area.inner a h2{padding: 0; margin: 0; font-size: 20px;}
.table-default h2{font-size: inherit; }
.table-default tr:nth-child(2n){ background-color: #ADDCEE; }
.table-default th, .table-default td{padding: 5px 8px;}
.table-default th{background-color: #eee;}
.btn-area{margin: 20px 10px; text-align:center;}
.btn-back{transition: all 0.3s; padding: 8px 20px; border-radius: 10px;
  color: #fff; background-color: #c46b48;}
.btn-back:hover{background-color: #b25438; color: #fff;}
.tag{width: 100%;}
.tag h3{font-size: 18px; padding: 0 8px; display: inline-block;}
.tag h3 a{color: #39F; text-decoration: underline;}

.case-item{ border-bottom: 2px solid #000; font-size: 24px;padding: 10px; }
.phone-text24h{font-size: 16px;}

/*------footer-------*/
footer{ margin-top: 30px; padding-top: 35px; background:#efefef; color:#26436d; }

footer .name{font-size: 30px; }
.d-line3{
  border: none;  border-top:1px solid #26436d; 
  border-bottom:1px solid #26436d;
  height: 6px;
}
.footer-phone, .footer-phone .phone-style{ color: #26436d; }

.good-link, .good-link a{color: #26436d; }
.good-link .set-a{color:#39f;}
.good-link a:hover{color:#39f;}
.card {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 20px 40px;
    border-radius: 10px;
    border: none;
    background-color: rgba(11,26,53,0.1);
    -webkit-transition: all .4s ease-out 0s;
    -o-transition: all .4s ease-out 0s;
    -moz-transition: all .4s ease-out 0s;
    transition: all .4s ease-out 0s;
    color:#0b1a35;
}
.card a{color:#0b1a35;}
.card a:hover{color:#39f;}
.btn-line{max-width: 226px;}
.copyright{ background-color: #666; color: #fff; font-size: 14px;
padding: 15px; text-align: center; }

.gotop{ width:50px; height:50px; background:#000; text-align:center; position:fixed; line-height:50px;
bottom:55px; right:10px; border-radius:75px;
-o-border-radius:75px;
-webkit-border-radius:75px; color:#f8dd08;}

.gotop:after{ font-size:20px; font-family:'FontAwesome'; content:"\f062";}
.gotop:hover{ color:#fff;}

#back-top{ width:50px; height:50px; background:#2196F3; text-align:center; position:fixed; line-height:50px;
bottom:55px; right:10px; border-radius:75px;
-o-border-radius:75px;
-webkit-border-radius:75px; color:#fff;}
#back-top:after{ font-size:20px; font-family:'FontAwesome'; content:"\f062";}
#back-top:hover{ color:#f8dd08; text-decoration:none;}

/*----RWD----*/
.pc-show{}
.mobile-show{display:none;}

@media (max-width: 1500px) {
  .btn-contact-area h6 span{display: block;}
}

@media (max-width: 1300px){
    .top-area-word {       
        padding: 50px 20px 20px;
        height: auto;
       /* float: right;*/
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .top-area {  height: auto;}  
}




@media (max-width: 1200px) {
  body{font-size: 18px;}
  .navbar{width: 200px;  padding: 10px 0 10px 0}
  .logo {max-width: 150px;}
  .main { width: calc( 100% - 200px );}
  .navbar-expand-md .navbar-collapse{width: 100%; height: 80vh; }
  .phone-style {font-size: 20px;}
  .nav-line {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
   }
   .good-area img {border-radius: 10px;}
   .btn-contact{margin-bottom: 10px;}
   .card{padding: 10px 20px;}
   .unit-item-title, .servive-item-area a h2{font-size: 20px;  }
   footer .name, .card h4{font-size: 20px;  }
}

@media (max-width: 1024px){
  .navbar-expand-md .navbar-collapse {
      overflow-y: scroll;
  }
}
@media (max-width: 992px) {
  .set-left-area{border-right: none;}
}

.mobile-ask-area{display: none;}





@media (max-width: 768px) {
  .pc-show{display:none;}
  .mobile-show{display:block;}
  /*--設定 --*/

  /*---蓋掉原本BS4的設定----*/
  .navbar-expand-md .navbar-toggler {
    display: block;
}


.navbar-expand-md .navbar-collapse {   
    display: none!important; /*---蓋掉原本BS4的設定---*/
    flex-basis: auto; 
}

.navbar-expand-md .navbar-collapse.show{ display: block!important; /*---蓋掉原本BS4的設定---*/}

  .navbar{width: 100%;  height: auto; padding: 10px; 
      -webkit-box-orient: horizontal; 
-webkit-box-direction: normal; 
-webkit-flex-direction: row; 
    -ms-flex-direction: row; 
        flex-direction: row;

        justify-content: space-between;/*----蓋掉原本BS4的設定----*/
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
	.nav-item {
		margin: 0;
	}
  .navbar-nav{padding: 20px;}
  
  .logo{height: 45px;}
  .main{width: 100%; padding-top: 65px;   padding-bottom: 50px;}
	.card{border-radius: 0;}
  .btn-contact h6 {font-size: 20px;}
  .big-title { font-size: 30px;}

  .mobile-ask-area{display: block; position: fixed; bottom: 0; width: 100%;
    z-index: 10000000;}
  
  .btn-ask{background-color: #9c27b0; font-size:22px; width: 100%; color: #fff; 
    text-align: center; padding: 10px; letter-spacing: 10px;}
  .area-call{width: 100%; display: none;}
  .area-call a{display: block; width: 33.3%; float: left; text-align: center;
    padding: 10px 5px; color: #fff;}
    .area-call a:not([href]){color: #fff;}
  .area-call img {
    width: 100%;
    height: auto;
    max-width: 79px;    
  }
  .area-call h5{margin-bottom: 0; }
  .btn-ask-phone{ background-color: #67aeff; }
  .btn-ask-line{ background-color: #00c200; }
  .btn-ask-text{ background-color: #fd5979; }
   #back-top{bottom: 80px;} 
   .card a {
      padding: 8px 0;
  }

}

@media (max-width: 480px) {
   .dropdown-item{padding: 10px 1.5rem;}
   .navbar-nav {
        padding: 10px;
    }
}


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