/*
* @Author: Clickr Jason
* @Date:   2019-09-04 15:09:54
* @Last Modified by:   Clickr Jason
* @Last Modified time: 2019-09-16 11:36:57
*/


/*
  importing
*/
@import url('cssreset.css');
@import url('../js/bootstrap/css/bootstrap.min.css');
@import url('../js/swiper/css/swiper.min.css');
@import url('../js/fontawesome5/css/all.min.css');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:400,700|Roboto:400,700&display=swap&subset=chinese-traditional');




/*
  initialize
*/
body{font-family: 'Noto Sans TC','Roboto','Microsoft Yahei',sans-serif;color: #303030;overflow-x: hidden;}
h1,h2,h3,h4,h5,h6{color: #303030;}
a,a:hover,a:focus{text-decoration: none;}




/*
  components
*/

/*spacings*/
.mt-3{margin-top: 30px;}
.mb-3{margin-bottom: 30px;}
.mt-4{margin-top: 40px;}
.mb-4{margin-bottom: 40px;}
.mt-5{margin-top: 50px;}
.mb-5{margin-bottom: 50px;}
.mt-8{margin-top: 80px;}
.mb-8{margin-bottom: 80px;}

.pt-6{padding-top: 60px;}
.pb-6{padding-bottom: 60px;}


/*buttons*/
.btn{outline: none;}

.btn-light{background: #FFF;color: #303030;}

.btn-gra-orange{background: rgb(255,123,25);background: -moz-linear-gradient(-45deg,  rgba(255,123,25,1) 0%, rgba(255,180,64,1) 100%);background: -webkit-linear-gradient(-45deg,  rgba(255,123,25,1) 0%,rgba(255,180,64,1) 100%);background: linear-gradient(135deg,  rgba(255,123,25,1) 0%,rgba(255,180,64,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7b19', endColorstr='#ffb440',GradientType=1 );color: #FFF;}
.btn-gra-orange:hover,.btn-gra-orange:focus{background: rgb(255,123,25);background: -moz-linear-gradient(left,  rgba(255,123,25,1) 0%, rgba(255,180,64,1) 100%);background: -webkit-linear-gradient(left,  rgba(255,123,25,1) 0%,rgba(255,180,64,1) 100%);background: linear-gradient(to right,  rgba(255,123,25,1) 0%,rgba(255,180,64,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7b19', endColorstr='#ffb440',GradientType=1 );color: #FFF;}

/*container*/
.container{max-width: 1170px;padding-left: 0;padding-right: 0;}

/*img-responsive*/
.img-responsive{display: inline-block;}

/*logo*/
.logo{display: inline-block;}

/*footer*/
.footer{background-color: #303030;}
.footer-contact{padding: 40px 0;}
.footer-contact .btn{border-radius: 60px;font-size: 24px;padding:15px;border: 0;}
.footer-contact i , .footer-contact span{position: relative;z-index: 10; }
.footer-contact i{margin-right: 10px;}
.footer-contact a{position: relative;overflow: hidden;}
.footer-contact a:after{position:absolute;content: '';left: 0;right: 0;bottom: 0;height: 0;background: rgb(255,123,25);background: -moz-linear-gradient(left,  rgba(255,123,25,1) 0%, rgba(255,180,64,1) 100%);background: -webkit-linear-gradient(left,  rgba(255,123,25,1) 0%,rgba(255,180,64,1) 100%);background: linear-gradient(to right,  rgba(255,123,25,1) 0%,rgba(255,180,64,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7b19', endColorstr='#ffb440',GradientType=1 );transition: all .2s;}
.footer-contact a:hover:after{height: 100%;}
.footer-contact a:hover{color: #FFF;}
.footer-address{padding:40px 0;position: relative;background: #454545 url(../img/address_left_bg.png) no-repeat left bottom;color: #FFF;}
.footer-address::after {content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: url(../img/address_right_bg.png) no-repeat right bottom;}
.footer-address h5{font-size: 24px;color: #FFF;}
.footer-address p{font-size: 15px;}
.footer-address .grid-container {position: relative; z-index: 1;}
.footer-copy{padding: 15px 0;color: #FFF;}
/*swiper*/
.swiper-pagination-bullet{width: 12px;height: 12px;background: #ff7b19;opacity: 0.2;}
.swiper-pagination-bullet-active{opacity: 1;}

/*contact-form*/
.contact-form{overflow:hidden; margin:auto; max-width: 880px;}
.contact-form .form-group{margin-bottom: 25px;}
.contact-form label{color: #939393;font-weight: 400;}
.contact-form .required>label:after{content: '*';color: #F00;}
.contact-form input[type='text'],
.contact-form select{height: 48px;}
.contact-form .btn{padding: 10px 50px;border-radius: 60px;font-size: 18px;}

/* Customize Checkbox*/
.custom-checkbox {display: block;position: relative;padding-left: 30px;cursor: pointer;font-size: 14px;user-select: none;}
.custom-checkbox input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
.checkmark {position: absolute;top: 0;left: 0;height: 20px;width: 20px;border:2px solid #e6e6e6;}
.custom-checkbox:hover input ~ .checkmark {border-color:#e6e6e6;}
.custom-checkbox input:checked ~ .checkmark {background-color: #FF811D;border-color: #FF811D;}
.checkmark:after {content: "";position: absolute;display: none;}
.custom-checkbox input:checked ~ .checkmark:after {display: block;}
.custom-checkbox .checkmark:after {left: 5px;top: 3px;width: 5px;height: 10px;border: solid white;border-width: 0 3px 3px 0;transform: rotate(45deg);}

.asking-form-list li{padding: 10px 0;border-bottom: 2px dashed #f6f6f6;}
.asking-form-list label{position: relative;margin-bottom: 0;}


/*b2t*/
.b2t{width: 44px;height: 44px;line-height: 44px;text-align: center;color: #ff7b19;background: #FFF;border-radius: 50%;position: fixed;right: 1em;bottom: 3em;font-size: 24px;box-shadow:0 0 10px 0 rgba(0,0,0,0.125);opacity: 0.7;cursor: pointer;transition: all .3s;}
.b2t:hover{opacity: 1;}




/*
  list
*/

/*brand-list*/
.brand-list .item{display: block;border: 1px solid #dcdcdc;}
.brand-list .swiper-button-prev ,
.brand-list .swiper-button-next{background: #ff7b19;width: 30px;height: 30px;box-shadow: 0 0 10px 0 rgba(0,0,0,0.125);border-radius: 50%;line-height: 30px;text-align: center;color: #FFF;margin-top: -15px;font-size: 20px;}
.brand-list .swiper-button-prev{left: 5px;}
.brand-list .swiper-button-next{right: 5px;}

/*site-list*/
.site-list .item{display: block;}
.site-list figure{border: 1px solid #dcdcdc;}
.site-list .content{padding:15px 0;font-size: 20px;line-height: 36px;color: #303030;text-overflow: ellipsis;white-space: nowrap;
    overflow: hidden;}
.site-list .tags{border: 1px solid #dcdcdc;border-radius: 5px;font-size: 15px;display: inline-block;color: #878787;padding:0 25px;margin-right: 5px;}

/*case-list*/
.case-list{display: flex;flex-direction: row;position: relative;}
.case-list .item{min-height: 160px;padding:15px;border: 1px solid #fffaf7;}
.case-list h5{margin:0 0 10px 0;font-size: 24px;color: #000;text-align: center;}
.case-list p{color: #878787;font-size: 15px;text-align: center;}
.case-list ul{color: #555555;line-height: 24px;font-size: 15px;}
.case-list li:before{content: '·';color: #ff7b19;font-size: 30px;position: relative;top: 5px;}
.case-list .old-price{font-size: 18px;color: #555555;text-align: center;font-family: 'Roboto',sans-serif;text-decoration:line-through}
.case-list .now-price{font-size: 24px;color: #ff7b19;text-align: center;font-size: 700;font-family: 'Roboto',sans-serif;}

.case-box-container{flex:1;display: flex;flex-direction: row;}

.case-box{width: 33.3%;transition: all .3s;cursor: pointer;position: relative;}
.case-box .item{background: #FFF;display: flex;flex-direction: column;justify-content: center;transition: all .3s;}
.case-box .item .featured { font-size:18px; line-height: 180%;color: #ff7b19; }
.case-box a{color: #ff7b19;}

.case-box:hover{box-shadow:0 0 10px 0 rgba(255,123,25,0.4);z-index: 10;cursor:auto;}
.case-box:hover .item{background: #FFF;}
.case-box:hover .first{background: #ff7b19;}
.case-box:hover .first h5,.case-box:hover .first p{color: #FFF;}

.case-box-title{width: 25%;height: 100%;}
.case-box-title .item{background: none;font-size: 24px;text-align: right;padding-right: 40px;}
.case-box-title .item:nth-child(3){min-height: 252px;}
.case-box-title:hover{box-shadow:none;}
.case-box-title:hover .item{background: none;}

.case-instruction{display: none;}

/*func-list */
.func-list{background: #FFF;border-radius: 15px;box-shadow: 0 0 20px 0 rgba(0,0,0,0.125);}
.func-list .row{margin:0;}
.func-list .row>div{padding: 0;}
.func-list .item{padding:30px 50px;border-bottom: 1px solid #ededed;border-right: 1px solid #ededed;display: flex;flex-direction: row;align-items: center;cursor: auto;}
.func-list .icon-area{margin-right: 15px;}
.func-list .content{color: #000;font-size: 18px;}
.func-list .item:hover .content{color: #ff7b19; cursor: auto;}





/*
  home
*/

/*backgrounds*/
.home-bg01{background: url('../img/bg01.jpg') no-repeat center bottom;background-size: cover;}
.home-bg02{background: url('../img/bg02.jpg') no-repeat center bottom;background-size: cover;}
.home-bg03{background: url('../img/bg03.jpg') no-repeat center bottom;background-size: cover;}
.home-bg04{background: #fffaf7;}

/*home-words*/
.home-words h3{font-size: 38px;}
.home-words p{font-size: 18px;color: #878787;}

/*home-swiper*/
.home-swiper { max-width: 880px; margin:auto; }
.home-swiper .swiper-container{padding-bottom: 80px;}

/*home-title-box*/
.home-title-box .icon-area{width: 60px;height: 60px;margin-left:auto;margin-right:auto;display: flex;flex-direction: column;align-items: center;justify-content: center;font-size: 24px;color: #FFF;border-radius: 50%;background: rgb(255,123,25);background: -moz-linear-gradient(-45deg,  rgba(255,123,25,1) 0%, rgba(255,180,64,1) 100%);background: -webkit-linear-gradient(-45deg,  rgba(255,123,25,1) 0%,rgba(255,180,64,1) 100%);background: linear-gradient(135deg,  rgba(255,123,25,1) 0%,rgba(255,180,64,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7b19', endColorstr='#ffb440',GradientType=1 );}
.home-title-box h5{font-size: 24px;}
.home-title-box p{font-size: 18px;line-height: 180%; color: #878787;max-width: 600px;margin-right: auto;margin-left: auto;}

/*home-counter*/
.home-counter{font-size: 24px;color: #000;line-height: 50px;}
.home-counter .number{font-size: 50px;color: #ff7b19;font-family: 'Roboto',sans-serif;font-weight: 700;}

/*home-section-pic*/
.home-section-pic{padding: 0;}

/*home-site-swiper*/
.home-site-swiper{position: relative;}
.home-site-swiper .swiper-container{padding-bottom: 80px;}

/*home-qrcode*/
.home-qrcode .pic{width: 216px;height: 216px;display: inline-block;background: rgb(255,123,25);background: -moz-linear-gradient(-45deg,  rgba(255,123,25,1) 0%, rgba(255,180,64,1) 100%);background: -webkit-linear-gradient(-45deg,  rgba(255,123,25,1) 0%,rgba(255,180,64,1) 100%);background: linear-gradient(135deg,  rgba(255,123,25,1) 0%,rgba(255,180,64,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7b19', endColorstr='#ffb440',GradientType=1 );position: relative;}
.home-qrcode .pic>span{background: #FFF;display: flex;position: absolute;top: 4px;bottom: 4px;left: 4px;right: 4px;align-items: center;justify-content: center;}
.home-qrcode p{margin-top: 15px;}
.home-qrcode .clipboard-btn{padding: 10px 50px;border-radius: 60px;font-size: 18px;}
#home_qrcode_func{display: none;}




/*
  responsive
*/
@media only screen and (max-width: 992px){


  /*
    components
  */

  /*footer*/
  .footer-contact .row>div:last-child{margin-top: 15px;}



  /*
    list
  */

  /*case-list*/
  .case-list .item{border: 1px solid #fffaf7;}
  .case-list h5{font-size: 20px;}
  .case-list p{font-size: 16px;}
  .case-list ul{line-height: 20px;font-size: 14px;}
  .case-list .old-price{font-size: 14px;}
  .case-list .now-price{font-size: 16px;}

  .case-box-title .item{font-size: 16px;padding-right: 20px;}


}


@media only screen and (max-width: 768px){


  /*
    components
  */

  /*container*/
  .container{padding-left: 15px;padding-right: 15px;}
  
  .home-words h3{font-size: 30px;}
  .home-title-box p{font-size: 15px;line-height: 120%; }


/*spacings*/
.mt-3{margin-top: 15px;}
.mb-3{margin-bottom: 15px;}
.mt-4{margin-top: 20px;}
.mb-4{margin-bottom: 20px;}
.mt-5{margin-top:25px;}
.mb-5{margin-bottom: 25px;}
.mt-8{margin-top: 40px;}
.mb-8{margin-bottom: 40px;}

.pt-6{padding-top: 30px;}
.pb-6{padding-bottom:30px;}

  /*
    list
  */

  /*case-list*/
  .case-list{display: block;}

  .case-box-container{overflow-x: auto;margin-left: 30%;flex: auto;display: block;white-space: nowrap;}

  .case-box-container .case-box{width: 100%;display: inline-block;vertical-align: top;}

  .case-box-title{width: 30%;position: absolute;z-index: 10;left: 0;}
  .case-box-title:after{content: '';position: absolute;left: 100%;width: 15px;height: 100%;top: 0;background: -moz-linear-gradient(left,  rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);background: -webkit-linear-gradient(left,  rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);background: linear-gradient(to right,  rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d000000', endColorstr='#00000000',GradientType=1 );opacity: 0.125;}

  .case-instruction{display:block;position: absolute;right: 5px;top: 5px;border-radius: 30px;line-height: 30px;padding: 5px 10px;color: #FFF;z-index: 200;font-size: 16px;background: -moz-linear-gradient(top,  rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 100%);background: -webkit-linear-gradient(top,  rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.3) 100%);background: linear-gradient(to bottom,  rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.3) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99000000', endColorstr='#4d000000',GradientType=0 );opacity: .6;}

  .case-box-title .item:nth-child(3){min-height: 224px;}

  /*func-list */
  .func-list .item{padding:15px;flex-direction: column;}
  .func-list .icon-area{margin-right: 0;margin-bottom: 10px;}
  .func-list .icon-area img{max-width: 50px;}
  .func-list .content{font-size: 14px;}

  /*
    home
  */

  /*home-counter*/
  .home-counter{font-size: 18px;line-height: 40px;}
  .home-counter .number{font-size: 36px;}

  /*home-qrcode*/
  #home_qrcode_func{display: block;}


}