.warpper { color: #000;}
.font-medium { font-weight: 500;}
.font-bold { font-weight: 700;}

.font-12 { font-size: 12px;}
.font-16 { font-size: 16px;}
.font-18 { font-size: 18px;}
.font-20 { font-size: 20px;}

.color-white { color: #fff;}
.color-red { color: #e23336;}

.d-block { display: block;}

.text-center { text-align: center;}

.pt-2 { padding-top: 0.5rem;}
.pr-1 { padding-right: 0.25rem;}
.pr-2 { padding-right: 0.5rem;}
.p-1 { padding: 0.25rem;}
.p-2 { padding: 0.5rem;}
.p-5 { padding: 3rem;}

.img-fluid { max-width: 100%;}

.w-40 { width: 40%;}

/* TOP BANNER */
.top-banner {display: block;margin: 1rem auto;}
.top-banner img { width: 100%;}

/* ABOUT CAR */
.aboutcar { text-align: center; padding: 1rem 0 0;}
.aboutcar ul { display: flex; flex-wrap: wrap; justify-content: center;}
.aboutcar ul li { display: block; text-align: center; padding: 2rem;}
.aboutcar ul li .circle-red { padding: 1.5rem 0; border-radius: 50%; width: 190px; height: 190px;
    background: -webkit-gradient(linear, left top, right top, color-stop(50, #e23336), color-stop(50, #ec5154));
    background: -moz-linear-gradient(Left, #e23336 50%, #ec5154 50%);
    background: -ms-linear-gradient(Left, #e23336 50%, #ec5154 50%);
    background: -o-linear-gradient(Left, #e23336 50%, #ec5154 50%);
    background: linear-gradient(to right, #e23336 50%, #ec5154 50%);}
.aboutcar .triangle-top {  margin-top: 1rem; margin-bottom: -5px;
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 22.5px 20px 22.5px;
    border-color: transparent transparent #e23336 transparent;
}
.recommend { background: #ececec; color: #000; padding: 1.5rem 1rem; font-size: 22px; border-top: 4px solid #e23336; }

/* POINT */
.point { display: flex; flex-wrap: wrap; align-items: flex-start; margin: 2rem auto;}
.point .title-point { display: block; width: 30%; border-left: 8px solid #fff20b; padding: 3rem 1rem; font-size: 26px;}
.point .title-point small { display: block; font-size: 15px; font-weight: normal;}
.point .content-point { display: block; width: 70%;}

.ribbon-point { background: #fff20b; padding: 0.25rem 2rem 0.25rem 1rem; position: relative; display: inline-block;}
.ribbon-point::after { content:''; position: absolute; right: 0; top: 0; bottom: 0;
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 17.5px 14px 17.5px 0;
    border-color: transparent #fff transparent transparent;}
.items-point { display: flex; flex-wrap: wrap; width: 100%; margin: 2rem auto;}
.items-point .images { display: block; width: 245px;}
.items-point .text-point { display: block; padding:0.5rem 1rem;}

/* TABLE LEASE */
.bg-yellow-dot { background: url(../images/bg-dot-yellow.jpg); padding:2rem 0;}
.table-lease { width: 90%; margin: 2rem auto; border: 1px solid #000; border-collapse: collapse; background: #fff;}
.table-lease th,
.table-lease td { border: 1px solid #000; padding: 0.8rem 0.5rem;}
.table-lease .bg-stripe-pink { background: url(../images/stripe_pink.png); color: #f34195;}
.table-lease .bg-stripe-blue { background: url(../images/stripe_blue.png); color: #00a7e3;}


/* AGREEMENT FLOW */
.agreement { border: 3px solid #e3e3e3; width: 90%; margin: 3rem auto;}
.title-agreement { display: flex; justify-content: space-between; padding: 1.5rem; cursor: pointer;}
.title-agreement .icon-up { transition: all 0.5s;}
.title-agreement:hover .icon-up { transform: rotate(180deg);}

.flow { display: block; border-top: 8px solid #ff8c8e;}
.flow ul { display: block; width: 80%; margin: 3rem auto 1rem;}
.flow ul li { display: flex; flex-wrap: wrap; align-items: center; width: 100%;}
.flow ul li::after { content: url(../images/img-icon-down.png); display: block; width: 100%; padding: 1rem 1rem 1rem 90px;}
.flow ul li:last-child::after { content: '';}
.flow ul li div { padding: 1rem;}
.flow ul li .black { background: #000; color: #fff; width: 200px;}


/* LEASE PLAN */
.lease-plan { border-top: 4px solid #ee2222; padding: 1rem 0;}
.title-lease-plan { position: relative; display: inline-block; padding: 1rem 2rem; font-size: 26px;}
.title-lease-plan::before { content: url(../images/left.png); position: absolute; left: 0; top: 20px;}
.title-lease-plan::after { content: url(../images/right.png); position: absolute; right: 0; top: 20px;}

/* CAR */
.item-car ul { display: flex; flex-wrap: wrap; }
.item-car ul li { width: 33.33%; padding: 1rem 2rem;}
.car { border: 1px solid #ccc;}
.car .images-car { background: url(../images/bg-dot-gray.jpg); display: flex; width: 100%; height: 200px; align-items: center; justify-content: center;}
.ribbon-yellow { background: #fff20b; width: 102%; margin-left: -1%; text-align: center; color: #ee2222; padding: 0.5rem; position: relative;
    text-shadow: 
    #fff 2px 0px 0px, 
    #fff 1.75517px 0.958851px 0px, 
    #fff 1.0806px 1.68294px 0px, 
    #fff 0.141474px 1.99499px 0px, 
    #fff -0.832294px 1.81859px 0px, 
    #fff -1.60229px 1.19694px 0px, 
    #fff -1.97998px 0.28224px 0px, 
    #fff -1.87291px -0.701566px 0px, 
    #fff -1.30729px -1.5136px 0px, 
    #fff -0.421592px -1.95506px 0px, 
    #fff 0.567324px -1.91785px 0px, 
    #fff 1.41734px -1.41108px 0px, 
    #fff 1.92034px -0.558831px 0px;}
.ribbon-yellow strong { font-size: 25px;}
.ribbon-yellow::before { content: url(../images/ribbon-left.png); position: absolute; left: -22px; bottom: -24px;}
.ribbon-yellow::after { content: url(../images/ribbon-right.png); position: absolute; right: -22px; bottom: -24px;}
.title-car { border-bottom: 1px solid #ccc; margin-bottom: 0.5rem; height: 60px; overflow: hidden;}
.data { display: flex; flex-wrap: wrap; width: 100%;}
.data .data-left { display: block; width: 35%;}
.data .data-right { display: block; width: 65%; text-align: right;}
.btn-inquire { display: block; width: 210px; margin: 0 auto 0.5rem; background: #666666; text-align: center; color: #fff; padding: 0.8rem 0.5rem; transition: all 0.3s;}
.btn-inquire:hover { background: #000;}


/* Q&A */
.warpper-qanda{ background: #ecf2f4; padding: 2rem 0 4rem;}
.warpper-qanda .title-qa{ width: 100%; text-align: center;}
.warpper-qanda .title-qa div{ text-align: center; display: inline-block; margin: auto}
.warpper-qanda .title-qa div h2{font-size: 40px; font-weight: bold;}
.warpper-qanda .title-qa div small{ display: block; font-size: 14px; color: #494848;}
.warpper-qanda .title-qa div img{ width: 100%;}

.tab-accordion { position: relative; margin-bottom: 1px; width: 100%; color: #3e3e3e; overflow: hidden; list-style: none; border-bottom: 1px solid #ccc; }
.tab-accordion  input { position: absolute; opacity: 0; z-index: -1; }
.tab-accordion label::before{ content: "Q"; color: #007bda; font-size: 24px;  font-weight: bold; position: absolute; top: 0.5rem; left: 0; }
.tab-accordion label { position: relative; display: block; padding: 1rem 2rem; font-weight: bold; line-height: 1.8; cursor: pointer; }
.tab-accordion label:hover{ color: #007bda;}
.tab-accordion .tab-content { height: 0; overflow: hidden; }
.tab-accordion .tab-content p { margin: 1em; }
.tab-accordion .tab-content .ans{color: #3aa6f9; font-size: 20px;  font-weight: bold; margin-right: 12px;}
  /* :checked */
.tab-accordion input:checked ~ .tab-content { height: 100%; }
  /* Icon */
.tab-accordion label::after { position: absolute; right: 12px; top: 5px; display: block;line-height: 3; text-align: center; }
.tab-accordion input[type=checkbox] + label::after { content: url(../images/arrow-down-small.png); transform: rotate(0deg); }
.tab-accordion input[type=checkbox]:checked + label::after { transform: rotate(180deg); }



@media(max-width:991px) {
    /* ABOUT CAR */
    .aboutcar ul li { padding: 1rem;}

    /* POINT */
    .items-point .images { width: 40%;}
    .items-point .text-point { width: 60%; padding: 0.5rem;}
    .items-point .font-18 { font-size: 16px;}

     /* TABLE LEASE */
    .table-lease { font-size: 12px;}
    .table-lease td { border: 1px solid #000; padding: 0.8rem 0.3rem;}

    /* AGREEMENT FLOW */
    .flow ul li div { width: 50%;}

    /* LEASE PLAN */
    .item-car ul li { width: 50%;}

}

@media(max-width:680px) {
    .top-banner {margin: 1rem auto;} 
    /* ABOUT CAR */
    .aboutcar .font-20 {font-size: 4vw;}
    .recommend {font-size: 4vw;padding: 1.5rem 0.5rem;}

    /* POINT */
    .point .title-point {width: 100%;padding: 0.5rem 1rem;font-size: 20px;}
    .point .content-point { width: 100%;}
    .items-point .images { width: 100%; text-align: center;}
    .items-point .text-point { width: 100%; padding: 0.5rem;}

    /* TABLE LEASE */
    .scroll-table { width: 100%; overflow-x: auto;}
    .table-lease { width: 570px;}

    /* AGREEMENT FLOW */
    .flow ul li { justify-content: center;}
    .flow ul li div {width: 100%;text-align: center;}
    .flow ul li::after { padding: 1rem; text-align: center;}

    /* LEASE PLAN */
    .item-car ul li { width: 50%; padding: 1rem 0.25rem;}
    .car .images-car{height: 160px;}
    .ribbon-yellow.font-bold {font-size: 0.8rem;padding: 0.25rem;}
    .ribbon-yellow strong {font-size: 1.1rem;}
    .data .data-left {display: block;width: 100%;background: #f7f7f7;padding: 2px;}
    .data .data-right { display: block; width: 100%; text-align: right;}
    
    /* .ribbon-yellow::before {width: 13px;height: 23px;background-size: contain;background-repeat:no-repeat;content: '';background-image: url(../images/ribbon-left.png);left: -13px;bottom: -8px;}
    .ribbon-yellow::after {width: 13px;height: 23px;background-size: contain;background-repeat:no-repeat;content: '';background-image: url(../images/ribbon-right.png);right: -13px;bottom: -8px;} */
    .ribbon-yellow::before,.ribbon-yellow::after {display: none;}
    .btn-inquire{ width:95%; font-size:0.7rem}
}


@media(max-width:575px){
     /* ABOUT CAR */
     .aboutcar ul{ margin: 10px 0 0;}
     .aboutcar ul li {/*zoom: 0.6;*/padding: 0.1rem;}
   .aboutcar ul li .font-16 {font-size: 14px;}
 
 
   .aboutcar ul{
     display: block;    
   }
   .aboutcar ul li .circle-red {
     border-radius: 0;
     width: 100%;
     height: auto;
     padding: 1rem 0.5rem;
     display:flex;
     align-items: center;
     justify-content: center;
     }
   .aboutcar ul li .circle-rede .circle-blue-in {
     }
     .aboutcar ul li .circle-red img{
       width: 80px;
       margin: 0 15px 0 0;
     }
     .aboutcar ul li .circle-red div{
       width: calc(100% - 95px);
       margin:0;
       padding:0;
       text-align:left;
     }
      .aboutcar ul li .circle-red div br{
        display:none;
      }
 
     /* AGREEMENT FLOW */
    .agreement { width: 100%;}
    .title-agreement { padding: 1rem;}
    .title-agreement .font-20 { font-size: 16px;}
    .flow ul { width: 100%;}

    /* LEASE PLAN */
    .title-lease-plan { font-size: 18px;}

}