/*---------------Header---------------*/
.title-header{background: url(../images/bg-leasing.jpg) center no-repeat;}

.sub-title { 
    display: block; 
    padding: 4px 0; 
}
.sub-title h2 { 
    font-weight: bold; 
    font-size: 20px; 
    position: relative; 
}
.sub-title .line-title { 
    position: relative; 
    width: 50px; 
    height: 2px; 
    background: #000; 
    display: inline-block; 
    top: -6px; 
}
.sub-title small { 
    font-weight: normal; 
    font-size: 14px; 
}

img.full-img { 
    width: 100%; 
}
img.max-img { 
    max-width: 100%; 
    width: auto !important; 
}
.line-black { 
    display: block; 
    width: 100%; 
    height: 2px; 
    background: #000; 
    margin: 40px auto;
}

/* background */
.bg-gray { 
    background: #f6f6f6; 
}
.bg-white { 
    background: #fff; 
}

/* text color */
.color_darkblue { 
    color: #38457f; 
}
.color-white { 
    color: #fff; 
}

/* text position */
.t_center { 
    text-align: center; 
}
.t_left { 
    text-align: left; 
}

/* font size */
.font_16 { 
    font-size: 16px; 
}
.font_18 { 
    font-size: 18px; 
}
.font_22{ 
    font-size: 22px; 
}
.font_b { 
    font-weight: bold; 
}

/* padding */
.padding_4 { 
    padding: 4px; 
}
.padding_12 { 
    padding: 12px; 
}

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

/* margin */
.margin_t8 { 
    margin-top: 8px; 
}
.margin_t18 { 
    margin-top: 18px; 
}

/* btn-more */
.btn-more{
    width: 240px; 
    transition: all 0.2s; 
    position: relative; 
    margin:20px auto 0; 
    border: 2px solid #000; 
    border-radius: 25px; 
    padding: 10px 0; 
    font-size: 20px; 
    display: block; 
    text-align: center; 
    background: #FFF;
}
.btn-more svg{
    width: 20px; 
    fill:#000; 
    height: 20px; 
    display: inline-block; 
    vertical-align: middle; 
    position: absolute; 
    right:15px; 
    top:15px;
}
.btn-more:hover{
    background: #000; 
    color: #FFF !important;
}
.btn-more:hover svg{
    fill: #FFF;
}


/* leasing */
.leasing {
     display: flex; 
     flex-wrap: wrap; 
     margin: 50px 0; 
}
.leasing .leasing-left { 
    width: 60%; 
}
.leasing .leasing-right { 
    width: 40%; 
}
.leasing-left h3 { 
    color: #606060; 
    font-size: 20px; 
    font-weight: bold;
}
.leasing-left h2 { 
    color: #000; 
    font-size: 24px; 
    font-weight: bold;
}
.text-leasing { 
    padding-right: 4%; 
}

/* fee */
.lease-fee { 
    display: flex; 
    flex-wrap: wrap; 
    margin: 14px 0; 
}
.lease-fee .fee { 
    display: block; 
    width: 70%; 
    padding-right: 22px; 
}
.lease-fee .residual { 
    display: block; 
    width: 30%; 
    text-align: right; 
}

.lease-fee .residual img { 
    max-width: 100%; 
}
.residual .bg-gray { 
    position: relative; 
}
.residual .bg-gray::after { 
    content: ''; 
    bottom: -20px; 
    left: 50%; 
    position: absolute; 
    width:0; 
    height:0;  
    border-right:10px solid transparent; 
    border-top:10px solid #f6f6f6; 
    border-left:10px solid #f6f6f6; 
    border-bottom:10px solid transparent;  
}
.residual figure { 
    text-align: left; 
}

.fee .title-fee { 
    font-size: 22px; 
}
.fee .title-fee span { 
    font-size: 18px; 
}
.fee .bg-gray { 
    position: relative; 
}
.fee .bg-gray::after { 
    content: ''; 
    right: -20px; 
    top: 50%; 
    position: absolute;
    width: 0; 
    height: 0; 
    border-right: 10px solid transparent; 
    border-top: 10px solid transparent; 
    border-left: 10px solid #f6f6f6; 
    border-bottom: 10px solid #f6f6f6;  
}
.fee ul { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-between; 
    margin-top: 12px; 
}
.fee ul li{ 
    width: 18%; 
    display: block; 
}
.fee ul li img { 
    width: 100%; 
}

/* lease-fee reduced */
.lease-fee.reduced { 
    display: flex; 
    flex-wrap: wrap;
    margin: 14px 0 80px; 
}
.lease-fee.reduced .fee { 
    display: block; 
    width: 50%; 
    padding-right: 22px; 
}
.lease-fee.reduced .residual { 
    display: block; 
    width: 50%; 
    position: relative; 
    text-align: left; 
}
.lease-fee.reduced .reduced-value { 
    position: absolute; 
    top: 0; 
    right: 0; 
    padding: 12px 12px 0 30px; 
}
.lease-fee.reduced .residual img { 
    max-width: 100%; 
    position: relative; 
    bottom: -30px; 
}
.lease-fee.reduced .residual .bg-gray::after { 
    width: 0;
    height: 0; 
    border-right: 10px solid #f6f6f6; 
    border-top: 10px solid transparent; 
    border-left: 10px solid transparent; 
    border-bottom: 10px solid #f6f6f6; 
    bottom: 50%; 
    left: -18px; 
}

/* lease-fee payment */
.lease-fee.payment .fee ul li{ 
    width: 15%; 
    display: block; 
}
.lease-fee.payment .img-plus { 
    text-align: center; 
    padding-top: 15px; 
}


/* tab */
.content-tab{
    margin: 20px 0;
}
.content-tab .line-tab { 
    border-bottom: 4px solid #000; 
}
.content-tab .tabs { 
    list-style: none;
}
.content-tab .tabs li { 
    color:#000000; 
    display: inline-block; 
    padding: 12px 35px; 
    text-align: center; 
    cursor: pointer; 
    background: #d9d9d9;
    margin: 22px 8px 0 0; 
    font-size: 18px; 
    font-weight: bold; 
}

.content-tab .tabs li.current { 
    background: #000000; 
    color: #fff;
}
.content-tab .tab-pane { 
    display: none; 
    margin: 0 auto;
}
.content-tab .tab-pane.current { 
    display: block;
}
.content-tab .tab-contents{ 
    background: #fff; 
    margin: 22px auto; 
}

/* title feature */
.feature { 
    display: block; 
}
.feature-title { 
    height: 40px; 
    overflow: hidden;
    background: -webkit-gradient(linear, left top, right top, color-stop(50, #e9e9e9), color-stop(50, #ffffff), color-stop(100, #ffffff));
    background: -moz-linear-gradient(Left, #e9e9e9 50%, #ffffff 50%, #ffffff 100%);
    background: -ms-linear-gradient(Left, #e9e9e9 50%, #ffffff 50%, #ffffff 100%);
    background: -o-linear-gradient(Left, #e9e9e9 50%, #ffffff 50%, #ffffff 100%);
    background: linear-gradient(to right, #e9e9e9 50%, #ffffff 50%, #ffffff 100%); 
}
.feature-step { 
    display: block; 
    width: 150px; 
    background: #e9e9e9; 
    padding: 4px 12px 4px 0; 
    color: #000; 
    font-size: 22px; 
    font-weight:bold; 
    position: relative; 
    height: 40px; 
}
.feature-step::after { 
    content: url(/loan/images/feature-title.png); 
    position: absolute; 
    top: 0;
    right: -60px 
}
.feature-text { 
    display: block; 
    margin: 50px auto; 
}
.feature-text h2 { 
    font-size: 26px; 
    font-weight: bold; 
}

/* purchase */
.purchase { 
    display: block; 
    margin: 18px auto 50px; 
}
.purchase .title-black { 
    background: #000; 
    color: #fff; 
    font-size: 18px; 
    font-weight:bold; 
    padding: 8px; 
    display: inline-block; 
}
.purchase h3 { 
    color: #606060; 
    font-size: 22px; 
    font-weight:bold; 
    margin: 14px auto; 
}
.purchase ul { 
    display: block; 
    text-align: center; 
    margin: 12px auto; 
}
.purchase ul li { 
    display: inline-block; 
    width: 18%; 
    position: relative; 
}
.purchase ul li img { 
    max-width: 100%; 
}
.purchase ul li::after { 
    content: url(../images/arrow-gray.png); 
    position: absolute; 
    right: -25px; 
    bottom: 14%;
}
.purchase ul li:last-child::after { 
    content: ''; 
}

/* maintenance */
.maintenance { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-between; 
}
.maintenance .column-maintenance { 
    width: 49%; 
    display: block; 
}
.maintenance .service { 
    display: block; 
    background: #e3e3e3;
}
.maintenance .title-service { 
    background: #6a6a6a; 
    color: #fff; 
    font-weight: bold;  
    position: relative; 
    padding: 8px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    height: 56px; 
}
.maintenance .title-service::after { 
    content: ''; 
    width: 20px; 
    height: 0; 
    border-top: 20px solid #6a6a6a; 
    border-left: 10px solid transparent; 
    border-right: 10px solid transparent; 
    position: absolute; 
    bottom: -18px; 
    left: 50%; 
}
.maintenance .logo-service { 
    padding: 0 14px 14px; 
}
.maintenance .logo-service figure { 
    display: block; width: 100%; 
    background: #fff; 
    padding: 35px 14px; 
    text-align: center; 
}
.maintenance .logo-service img {
     max-width: 100%; 
}

/* safe-road */
.safe { 
    margin: -20px auto 50px; 
}
.safe-road { 
    display: block; 
    margin: 24px auto; 
}
.safe-road .title-safe-road { 
    display: block; 
    color: #c7002a; 
    font-weight: bold; 
    font-size: 18px; 
}
.safe-road .title-safe-road span { 
    display: inline-block; 
    background: #000; 
    color: #fff; 
    padding: 8px; 
    margin-right: 12px; 
}
.safe-road ul { 
    display: table; 
    width: 100%; 
    margin: 12px auto;
}
.safe-road ul li { 
    display: table-row; 
}
.safe-road ul li span { 
    display: table-cell; 
    padding: 8px; 
    border-bottom: 1px solid #000; 
}
.safe-road ul li span:first-child { 
    background: #f6f6f6; 
    text-align: center; 
    width: 20%; 
}


/* service */
.logo { 
    display: block; 
}
.logo figure { 
    display: block; 
}
.logo figure img { 
    max-width: 100%; 
}
.logo h2 { 
    font-size: 24px; 
    font-weight: bold; 
    margin: 12px auto; 
}

/* service-flow */
.service-flow { 
    display: flex; 
    flex-wrap: wrap; 
    align-items: center; 
}
.service-flow .img-flow1 { 
    display: flex; 
    width: 22%; 
    align-items: center; 
    justify-content: space-between; 
}
.service-flow .img-flow1 figure { 
    display: inline-block;
}
.service-flow .img-flow1 .icon-plus { 
    width: 80px; 
    text-align: center;
}
.service-flow .img-flow2 { 
    display: block;
     width: 33%; 
     padding: 0 2%; 
}
.service-flow .img-flow3 { 
    display: block; 
    width: 45%; 
    padding: 0 2%; 
}
.service-flow img {
     max-width: 100%; 
}


.remark { 
    padding: 30px 0; 
    line-height: 1.8; 
    font-size: 14px; 
}
.remark .content-remark { 
    background: #fff; 
    padding: 22px; 
}

/* compare-table */
.compare-table { 
    padding: 50px 0; 
}
.sub-title { 
    display: block; 
    padding: 4px 0; 
    margin-bottom: 12px; 
}
.sub-title h2 { 
    font-weight: bold; 
    font-size: 26px; 
    position: relative; 
}
.sub-title .line-title { 
    position: relative; 
    width: 50px; 
    height: 2px; 
    background: #000; 
    display: inline-block; 
    top:-6px; 
    margin: 0 4px; 
}
.sub-title small { 
    font-weight: normal; 
    font-size: 14px; 
}
.sub-title.color-white { 
    color: #fff; 
    margin-bottom: 0; 
}
.sub-title.color-white .line-title { 
    background: #fff; 
}
.bg-title-topic { 
    background: #606060; 
    padding: 4px; 
}
.title-topic-left {
    background: -webkit-gradient(linear, left top, right top, color-stop(50, #ffffff), color-stop(50, #606060));
    background: -moz-linear-gradient(Left, #ffffff 50%, #606060 50%);
    background: -ms-linear-gradient(Left, #ffffff 50%, #606060 50%);
    background: -o-linear-gradient(Left, #ffffff 50%, #606060 50%);
    background: linear-gradient(to right, #ffffff 50%, #606060 50%);
 }

 /* positon button footer */
.bg-black { 
    background: #000; 
    padding: 24px 8px; 
    text-align: center; 
}
.position-btn { 
    display: block; 
    width: 100%; 
    margin: 12px auto 0; 
}
.position-btn .btn-default { 
    width: 30%; 
    background: #fff; 
    padding: 14px 4px; 
    display: inline-block; 
    text-align: center; 
    font-size: 20px; 
    font-weight: 700; 
    margin: 8px 1%; 
    transition: all 0.3s; 
}
.position-btn .btn-red { 
    color: #c7002a; 
    border: 2px solid #c7002a; 
}
.position-btn .btn-blue { 
    color: #0071ac; 
    border: 2px solid #0071ac; 
}
.btn-default:hover { 
    box-shadow: 2px 2px 2px rgba(255, 255, 255, 0.8); 
}

@media(max-width:1048px) {
    .purchase ul li::after { 
        content: '';
    }
}

@media(max-width:920px) {
    .lease-fee.reduced .residual img { 
        max-width: 70%; 
    }
}

@media(max-width:768px) {
    .leasing-left h3 { 
        font-size: 15px;
    }
    .leasing-left h2 { 
        font-size: 18px; 
    }

    .fee .title-fee { 
        font-size: 16px; 
    }
    .fee .title-fee span { 
        font-size: 14px; 
    }

    .feature-text h2 { 
        font-size: 18px;
    }

    .purchase .title-black { 
        font-size: 14px; 
    }
    .purchase h3 { 
        font-size: 16px; 
    }

    .safe-road .title-safe-road { 
        font-size: 16px; 
    }
    .safe-road .title-safe-road span { 
        font-size: 12px; 
    }
    .safe-road ul li span { 
        font-size: 12px; 
    }

    .lease-fee.reduced .residual img { 
        max-width: 65%; 
    }
    
}

@media(max-width:720px) {
    .maintenance .title-service br { 
        display: none; 
    }

    .logo h2 { 
        font-size: 18px; 
    }
}

@media (max-width: 680px) {
    .position-btn .btn-default { 
        width: 45%; 
    }

    .sub-title { 
        margin-bottom: 0; 
    }
    .sub-title h2 { 
        font-size: 18px; 
    }

    
}

@media(max-width:620px) {
    .leasing .leasing-left, .leasing .leasing-right { 
        display: block; 
        width: 100%; 
        padding: 8px 0; 
    }

    .lease-fee.reduced .fee, 
    .lease-fee.reduced .residual { 
        width: 100%; 
        padding: 8px 0; 
    }
    .lease-fee.reduced .residual {
         text-align: center; 
        }
    .fee .bg-gray::after { 
        content: ''; 
        right: unset; 
        border: none; 
    }

    .safe-road ul li span:first-child { 
        width: 35%; 
    }

    .content-tab .tabs li { 
        padding: 12px 8px; 
        font-size: 16px; 
    }
}

@media(max-width:580px) {
    .maintenance .title-service { 
        height: 70px; 
        font-size: 13px; 
    }
    .column-maintenance .btn-more { 
        width: 180px; 
    }

    .service-flow .img-flow1 { 
        display: block; 
        width: 100%; 
    }
    .service-flow .img-flow1 figure { 
        display: block; 
        text-align: center;
        width: 100%;
        padding: 8px 0;  
    }
    .service-flow .img-flow1 .icon-plus { 
        width: 100%; 
        padding: 8px 0;
    }
    .service-flow .img-flow2 { 
        display: block; 
        width: 100%; 
        padding: 8px 0; 
        text-align: center; 
    }
    .service-flow .img-flow3 { 
        display: block; 
        width: 1000%; 
        padding: 8px 0; 
        text-align: center; 
    }
    

}


@media(max-width:460px) { 
    .position-btn .btn-default { 
        width: 100%; 
        margin: 4px auto; 
    }
    .maintenance .column-maintenance { 
        width: 100%; 
        padding: 8px 0; 
    }
    .maintenance .title-service { 
        height: auto; 
    }

    .lease-fee .fee,
    .lease-fee .residual { 
        width: 100%; 
        padding: 8px 0; 
    }
    .residual figure { 
        text-align: center; 
    }
    .text-leasing { 
        padding: 0;
    }

    .lease-fee.reduced .reduced-value { 
        position: relative; 
        float: right;
    }
    .lease-fee.reduced .residual img { 
        max-width: 50%;
    }

    .safe-road ul li span:first-child { 
        width: 40%; 
    }

    .purchase ul { 
        display: flex; 
        flex-wrap: wrap; 
        /*margin: 0 -2% 0 0; */
    }
    .purchase ul li { 
        width: 31.33%; 
        margin: 8px 2% 0 0; 
        display: block; 
    }

    .logo h2 { 
        font-size: 16px; 
    }

    .leasing-left h2 { 
        font-size: 16px; 
    }
    .leasing-left h3 { 
        font-size: 14px; 
    }

    body{
        font-size:13px;
    }
}


@media(max-width:420px) {
    .content-tab .tabs { 
        display: flex; 
    }
    .content-tab .tabs li{ 
        padding: 12px 4px; 
        font-size: 14px; 
        margin: 1px;
    }
}