/*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: }



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


/*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:#34313f; }
.submit{ padding:5px 20px; background-color: #607381;  border: unset; color: #fff;}
.revise{ padding:10px 20px; background-color: #ccc; border: unset; color: #000;}


.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: #34313f; 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: 15%;position: relative;}
.shopping-img img{position: absolute;top: 0;left: 0;}
.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: #34313f; 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:27%; margin:20px 0; }
.breadcrumb-section{    padding: 183px 0;}
.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 #000859; border-radius: 5px; }
.chead-accordion01 .panel-heading a.collapsed{ background-color: #34313f; color: #fff;}
.chead-accordion01 .panel-heading a:hover, .chead-accordion01 .panel-heading a{ background-color: #34313f; 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: #2D2A36!important;border-color: #2D2A36!important; }


.main-2304{ width: 1200px; margin: auto; background-color: #fbfbfb; padding: 20px 150px;}
.font-title-1{ font-size: 20px; color: #1D1660; font-weight: 700; margin-bottom: 10px;}
.moto-img{ margin-right: 30px; float: left;position: relative; top: 66px;  }
.moto-img img{ margin-top: -66px; }
.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:#1D1660; 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:#1D1660; }
.deco-2304:hover{ color:#5955A0; }
.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; }


.cash-2304{ font-size: 18px; }
.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: #302c3a;color: #fff; font-size: 26px;}
.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; text-transform: unset!important;  overflow: hidden; width: 500px; }



@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:#fff!important; }
    .navbar.navbar-default{ background: #2D2A36!important; }
    .sum2304{ position: relative; bottom: -425px; }
}



@media (max-width: 991px){
    
    .m-top-bg{ background-image: url(../../assets/images/m-top-bg.jpg)!important; background-size: cover!important; background-position: right!important;}
    .breadcrumb-section{     padding: 210px 0;   }

    .logo img{ margin: 20px auto;display: block; }

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


        /*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: 25%;}
    .shopping-cash{display: unset; width: 100%;}
    .shopping-title-content{     width: 100%; padding-left: 20px;}
    .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: #fff!important;}
    .navbar.navbar-default .navbar-nav > li > a:hover, .navbar.navbar-default .navbar-nav > li > a:active{color: #fff!important; opacity: 0.9;}
   

}

@media (max-width: 768px){
    .logo img{ width: 40%; }
   body .breadcrumb-section{     padding: 156px 0;   }
}

@media (max-width: 460px){
    body .breadcrumb-section{     padding: 130px 0;   }
    .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; }
}