/*reset*/



.c-inline{display: inline!important;}
.none{ display: none; }
.mb-80{ margin-bottom: 80px; }
.mb-30{ margin-bottom:30px; }
.mb-10{ margin-bottom:10px; }
.mt-30{margin-top: 30px;}
.ml-10{ margin-left: 10px; }
.mr-6{ margin-right: 6px;}
.mr-30{ margin-right: 30px;}
.pb-30{ padding-bottom: 30px; }

.w-100{ width: 100px!important;}
.f-20{ font-size: 20px; }

.color-F05A24{ color: #F05A24;}
.c-black{ color:#000; }

.float-r{ float: right; }
.inline-b{ display: inline-block; }
.d-block{ display: block; }
.border-bottom{ border-bottom: 1px solid #ccc; }


/*tool*/
.text-d-s{text-decoration:line-through;}
.justify{ text-align: justify!important; }
.clear{ clear:both; }
.f-36{ font-size: 36px; }
.f-24{ font-size: 24px; }
.f-20{ font-size: 20px; }
.f-18{ font-size: 18px!important; }
.f-12{ font-size: 12px!important; }
.f-16{ font-size: 16px; }
.c-000{ color:#000; }
.c-fff{ color:#fff!important; }
.c-1D2D90{ color:#1D2D90; }
.c-604C3F{color: #604C3F;}
.c-AF7E46{color: #AF7E46;}
.bgc-535d97{ background-color: #535d97; }
.bgc-fff{ background-color: #fff; }
.bg-888{background-color: #888888;}
.bg-3443a4{ background-color: #3443a4; }
.bg-000{ background-color: #000; }
.bg-ccc{ background-color: #ccc!important; }
.line-h-1{line-height:2!important;}
.width-90{ width:90%; margin: auto;}
.width-80{ width:80%; margin: auto;}
.m-open{ display: none; }
.f-w-900{ font-weight: 900!important; }
.f-w-700{ font-weight: 700!important; }
.pd-10{ padding:10px; }
.pd-50{ padding:50px; }

.pb-20{ padding-bottom:20px; }
.pb-40{padding-bottom: 40px;}
.mb-20{ margin-bottom: 20px;}
.mb-30{margin-bottom: 30px!important;}
.mb-50{margin-bottom: 50px!important;}
.mt-50{ margin-top:50px; }
.mr-20{ margin-right:20px; }
.ml-20{ margin-left:20px; }
.height-233{ height: 233px;}

.inline-block{display: inline-block;}
.block{ display: block; }
.t-boder-b{ border-bottom:1px solid #4C4B4B; }

.t-boder-t{ border-top:1px solid #AF7E46; }
.border-000{border: 1px solid #000;}
.radius-non{ border-radius: unset!important;}
.float-r{ float: right;}
.float-l{ float: left;}
.clear{ clear:both: }
.m-open{display: none;}


/*複製以下這區就好*/


/*car*/
.num-bt{ display: flex; }
.pp-block{ display: flex; margin-bottom: 30px;}
.pp-block select{ margin-left: 45px; }
.pp-block .num-bt{ margin-left: 45px;}
.minus ,.plus{width: 30px; height: 30px; border-radius: 50%;}
.price{width: 170px;}

/*shopping-list*/
.shopping-step{width: 100%; margin: auto; margin-bottom: 80px;}
.shopping-step ul{ list-style: none; display: flex; justify-content: center; }
.shopping-step ul li{ background-color: #ccc; color:#fff; box-shadow: 1px 1px 4px #888; padding:10px 120px; font-size: 18px; letter-spacing:3px ; font-weight: 900; }
.shopping-step ul li.active{ background-color:#000; }
.submit{ padding:5px 20px; background-color: #607381;  border: unset; color: #fff;}
.revise{ padding:10px 20px; background-color: #ccc; border: unset; color: #000;}
.shopping{ padding: 50px 30px; background: #fff;}

.car-align{ padding: 30px!important;}

.list-finish{ width: 100%; border: 1px solid #607381; padding: 30px;  margin-bottom: 100px;}
.list-finish p{ font-size: 20px; color: #607381; text-align: center;}

  /*shopping ul*/
.shopping-list-main .none{display: none!important;}
.shopping-list-main{width: 100%; margin:0 auto 50px auto; display: block; overflow: hidden;}
.shopping-list-main h2{ font-size: 18px; display: block; background-color: #000; color:#fff; text-align: center!important; padding: 10px 50px; }

.shopping-box{display: flex;display: flex;  width: 100%; justify-content: space-between;}
.shopping-list-info{  width: 100%;}
.part{display: flex; width: 100%;}
.shopping-cash{display: flex; width: 100%;}
.s-box-name{width: 30%;}
.s-box-average{}
.shopping-list-title{ width: 80%; display: inline-flex;  font-weight: 900; font-size: 16px;  }
.shopping-list-data{ padding: 20px 30px; text-align: center; }
.shopping-img{overflow: hidden;width: 70px;height: 70px; position: relative;margin-right: 10px;}
.shopping-img img{position: absolute;top: 50%;left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; object-fit: cover;}
.shopping-title-content{ width: 80%;}
.shopping-title-content p{ margin:0; }
.shopping-list-data input{min-height: 30px; width: 60px!important; }
.ss-color-type{ display: inline; margin-left: 20px; }
.clear-list{ float: left; }
.re-list{float: right;}
.list-btn-bar{ border-bottom:1px solid #ccc ; border-top: 1px solid #ccc; padding: 20px; }
.shopping-btn0{ color: #000!important;}
.shopping-btn1{ background-color: #dcdcdc!important; color: #000; f3efef}
.shopping-btn2{ background-color: #f3efef!important; color: #000; }
.shopping-btn3{ background-color: #000; color: #fff; box-shadow: 1px 2px 10px #708b9f; padding: 10px 30px 9px 30px; display: block; margin:auto; }
.shopping-next a{  margin-top: 50px;   margin-bottom: 10px; }
.total p{ float: right; font-size: 20px; font-weight: 900; margin-right: 20px; margin-top: 10px; letter-spacing: 3px;}

/*login*/
.bg-AF7E46{background-color: #AF7E46;}
.login{ width: 30%; margin:auto; display: block;  border: 1px solid #AF7E46; padding: 20px 50px;}

/*register*/

.register{  width: 50%; margin:auto; display: block;}
.register button{ border: unset; color: #fff; background-color:#AF7E46 ; }

/*shopping*/
.shopping-cart-num{ background-color: #ff9900; display: inline-block; color: #fff; border-radius: 26px;width: 20px; height: 20px;font-size: 12px; position: absolute;right: 6px; top: -2px; text-align: center;
 line-height: 1.5;}
 .scn-position{ background-color: #ff9900!important; right: 24px!important;top: 5px!important; }
/*---*/

.logo img{ width:32%; margin:5px 0; }
.breadcrumb-section{padding: unset!important;}
.navbar.navbar-default .navbar-nav{ margin-top: 31px; }
.copyright-section{ padding: 10px 0px 1px 0;}
.chead-accordion01{ border-radius: 10px; }
.chead-accordion01 .panel-body{    padding: 0 18px 0 19px; background-color: #fff; }
.chead-accordion01 .panel{ border: 1px solid #fed74e; border-radius: 5px; }
.chead-accordion01 .panel-heading a.collapsed{ background-color: #000; color: #fff;}
.chead-accordion01 .panel-heading a:hover, .chead-accordion01 .panel-heading a{ background-color: #000; color:#fff; }
.chead-accordion01 .panel-heading:before{ background-color: transparent; }
.chead-accordion01 .panel-heading .arrow{ border-left: unset!important; }
.chead-accordion01 .panel+.panel{ margin-top: unset!important; }
.chead-accordion01 .panel-heading a{ padding: 8px 54px 8px 20px; font-size: 20px; border-radius: 5px; }
.navbar-default{ background-color: #f7c845!important;border-color: #f7c845!important; }


.main-2304{ width: 1200px; margin: auto;  padding: 20px 150px;}
.font-title-1{ font-size: 20px; color: #000; font-weight: 700; margin-bottom: 10px;}
.moto-img{ margin-right: 30px; float: left;position: relative; width: 80px; height: 80px; overflow: hidden; }
.moto-img img{ position: absolute; width: 100%;height: 100%;object-fit: cover;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.moto li{ border-bottom: 1px solid #ccc; padding: 30px 0; }
.moto li:last-child{ border-bottom: unset!important; }
.num-1{ display: flex;align-items: center; margin-bottom: 10px;  justify-content: flex-end;}
.num-2{ display: flex;align-items: center; }
.num-1 p, .num-2 p{ margin:0; position: relative; left: -22px; color: #000;}
.cash{ padding: 20px; background-color: #fff;}
.cash h4{ color:#000; font-weight: 900; }
.sum{ display: flex; align-items: center; }
.pay2304{ display: flex; ;}
.pay{ }
.code{ display: flex; align-items: center;}

.deco-2304{ text-decoration: underline; color:#554826; }
.deco-2304:hover{ color:#312c21;text-decoration: underline; opacity: 0.7; }
.submit{ display: block;  margin: 58px auto; padding:10px 30px 9px 30px; background-color: #34313f; color: #fff;}
.submit:hover{ background-color: #3B3960; }
.border-2304{ border: 1px solid #ccc; background-color: #fff; width: 80px; margin-left: 20px; height: 35px;}
.border-2304 p{   left: 22px!important;  }
.border-2304 h4{ font-weight: 900; margin-left: 50%; transform: translate(-50%); }

input::-webkit-input-placeholder{ position:relative!important; right: -60%!important; color: #000;} 
.moto-num input{ width: 50px; color: #000; }


.cash-2304{ font-size: 18px; color: #000; font-weight: 400;}
.cash h4{ font-size: 24px; }
.stock{ /*font-size: 18px; */}
.stock span{ color: #c91818;  }
.car-add{ width:40px; height:40px;padding: 0px 10px;margin-left: 5px; margin-top: 4px;border-radius: 50%; background-color: #f7c845;color: #000; font-size: 26px;border: unset!important;}
.car-add:hover{opacity: 0.8;}
.shopping-info-main span{ margin-left: 20px; font-weight: 900; color:#000 }
.shopping-info-main li{ margin-bottom: 20px; border-bottom: 1px solid #ccc; }
.shopping-info-main li:last-child {border-bottom: unset!important;}
.shopping-flex-next{display: flex; justify-content: flex-end;     align-items: center;}
.shopping-flex-next button{ margin-right: 20px;     padding: 14px 30px!important; margin-top: 40px; }
.shopping-next a:hover{ color:#fff; }
.moto-info h3{ font-size: 20px!important;color: #000; text-transform: unset!important;  overflow: hidden; width: 500px; }

.btn-2408{display: block; width: 180px; height: 40px; font-size: 14px; background-color: #000; color: #fff;border-radius: 3px; margin:0 auto 20px auto; border: unset!important; box-shadow: 0 0 3px #000;}
.btn-2408:hover{opacity: 0.8;}
.moto-info p{color: #000;}
.moto-info .c-price{color: #666666;font-weight: 500;}
.moto-info .stock{  color: #666666;font-weight: 900;}

.copyright-section .copyright-text p{color: #fff;}

.back-to-top{ background: #000!important; }

@media (max-width: 1200px){
    .main-2304{ width: 95%; margin: auto; padding: 20px 20px; }
}

@media screen and (min-width: 992px){
    .navbar.navbar-default .navbar-nav > li > a{ color:#000!important; font-weight: 900 !important;}
    .navbar.navbar-default{ background: #f7c845!important; }
    .sum2304{ position: relative; bottom: -425px; }
}



@media (max-width: 991px){
    .navbar .navbar-toggle:focus, .navbar .navbar-toggle:hover{ background-color: #000!important;}
    .m-top-bg{ background-image: url(../../assets/images/m-top-bg.jpg)!important; background-size: cover!important; background-position: right!important;}
    .m-close{display: none;}
    .m-open{display: block!important;}

    .logo img{ margin: 0 auto;display: block; }

    .logo { display: block!important; }
    .moto-img{ margin-right: 10px; float: left;position: relative;   }


        /*shopping*/
    .shopping-step ul li{ padding:10px 20px; font-size: 12px; letter-spacing: 0; }
    .car-align a{ display: block; width: 70px!important;  }
    /*shopping ul*/
    .shopping-list-main h2{ font-size: 16px; letter-spacing: 3px;}
    .shopping-list-main{width: 95%;}
    .shopping-list-info{ width: 100%;}
    .part{display: unset; width: 100%;}
    .shopping-img{width: 80px; height: 80px;}
    .shopping-cash{display: unset; width: 100%;}
    .shopping-title-content{  width: unset; padding-left: 0;}
    .ss-color-type{ display: block; margin-left: unset; }
    .s-box-name{width: 100%;}
    .s-box-average{ width: 100%;}
    .list-btn-bar{ /*border-bottom:unset; border-top:unset;*/ }
    .shopping-list-title{  border-bottom:unset; text-align: left!important; padding: 10px 10px;font-size: 14px;width: 100%;}
    .shopping-list-data{text-align: right;  display: flex; flex-direction: column;align-items: flex-end;  padding: 10px 10px; width: 100%;}

    .shopping-box{ padding: 10px 0; display: block; }
    .shopping-list-data input{text-align: right;  }

    .re-list{float: unset;}
    .clear-list{float: unset;}
    .shopping-btn1{ width: 100%; margin-bottom: 20px;}
    .shopping-btn2{ width: 100%;}
    .m-block{display: block; margin-bottom: 20px;}
    .m-b-line{ border-bottom: 1px solid #ebebeb;}

    /*login*/
    .login{ width: 90%; }

    .moto-info h3{ font-size: 20px;  overflow: hidden; width: 245px; max-height: 67px;}
    .main-2304{padding: 20px 5px;}

    .navbar.navbar-default .navbar-nav > li > a{ color: #000!important;}
    .navbar.navbar-default .navbar-nav > li > a:hover, .navbar.navbar-default .navbar-nav > li > a:active{color: #000!important; opacity: 0.9;}
   

}

@media (max-width: 768px){
    .logo img{ width: 33%; }
  
}

@media (max-width: 460px){
    
    .moto-info h3{ font-size: 16px; overflow: hidden; width: 150px; }
    .chead-accordion01 .panel-body{   padding: 0 5px 0 5px!important; }
    .num-1 input{ width: 35px!important; }
    .car-add { padding: 0px 5px!important; }
    .chead-accordion01 .panel-heading a{     font-size: 18px; }
}

@media (max-width: 360px){
    .moto-info h3{ font-size: 16px; overflow: hidden; width: 140px; }
}