/* TOP Banner */
.top-banner { background: #f7f3f3;}
.top-banner .slide-right { 
    position: absolute;
    bottom: 0; 
    right: -195px;
    width: 265px;
    height: 380px;
    background: #f92231;
    transform: skew(-20deg);
    -webkit-transform: skew(-20deg);
    z-index: 3; }
.single-item img { width: 100%;}
/* slider banner */
.item-banner { position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; /*height: 440px;*/}
.item-banner .text-slide { position: absolute;left: 14rem;top: 4rem; display: block; font-size: 28px; padding: 0 1.5rem}

/* BUY SELL */
/* BUY SELL */
.buy-sell {
    background: #a6fbdc;
/*     background: -webkit-gradient(linear, left top, right top, color-stop(50, #feff81), color-stop(50, #a6fbdc));
   background: -moz-linear-gradient(Left, #feff81 50%, #a6fbdc 50%);
   background: -ms-linear-gradient(Left, #feff81 50%, #a6fbdc 50%);
   background: -o-linear-gradient(Left, #feff81 50%, #a6fbdc 50%);
   background: linear-gradient(to right, #feff81 50%, #a6fbdc 50%); */
}
.buy { background: #feff81; padding-right: 3rem;}
.buy .line-vertical { margin-top: -8rem;}
.sell { background: #a6fbdc; padding-left: 3rem;}
.sell .line-vertical { margin-top: -8rem;}
/* .sell::after { content: ''; background: url(../images/curve1.jpg) no-repeat top left; background-size: cover; width: 75px; height: 100%; position: absolute; top: 0; left: -37px; } */



/* NEW TOPIC */
.bg-newtopic { background: url(../images/zigzag.png) no-repeat top left #fff; background-size: auto; min-height: 345px;}
.topic { padding-top: 9rem;}
.topic .items-topic {width: 25%;/* height: 169px; */margin: 0 3%;position: relative;overflow: hidden;}
.topic .items-topic img {height: 100%;}
.topic .items-topic::before { content: ''; background: rgba(0, 0, 0, 0.6); position: absolute; width: 0; height: 200%; top: 50%; left: 50%; opacity: 0;
    -webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
    -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.topic .items-topic:hover::before { width: 200%; opacity: 1;}
.topic .items-topic .date { width: 100%; height: 100%; top: 0; left: 0; opacity: 0; transition: all 0.3s;}
.topic .items-topic:hover .date { opacity: 1;}
.topic .items-topic .link { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; margin: 4px auto;}
.arrow-black { position: absolute; right: -15px; top: 85px;}
.items-topic-in {
    padding: 100% 0 0;
    background-size: cover;
}

/* PURCHASE */
.bg-purchase { background: #f0fbff; position: relative;}
.bg-purchase .linecurve { width: 100%;}

#purchase .line-vertical { margin-top: -8rem;     height: 75px;}
#purchase h3{ margin: 20px 0 0 0; padding: 45px 0 0 0;}
.bg-purchase .font-20 { font-size: 19px;}


/* LOCATION */
.img-store { position: absolute; left: 0; top: 3rem;}
.location { padding-top: 3rem; margin-top: 3rem;}
.title-location { margin-top: 3rem;}
.title-location::before {content: ''; position: absolute; top: 0; left:-69px;
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 69px 69px 0;
    border-color: transparent #f92231 transparent transparent;
}


.slide_pc{ display: block;}
.slide_sp{ display: none;}



@media(max-width:1300px) {
    /* LOCATION */
    .map { margin-top: 4rem;}
}

@media(max-width:1200px) {
    /* TOP Banner */
    .item-banner .text-slide  { font-size: 20px;}

    /* NEW TOPIC */
    .topic .items-topic { margin-left: 1rem;}

    /* SELL CAR */
    .content-sell { padding: 1rem 2rem;}
    .arrow-black { top: 70px;}

    /* LOCATION */
    .img-store { width: 445px;}
    .map { margin-top: 0;}
}

@media(max-width:1024px) {
    /* TOP Banner */
    .top-banner .slide-right { right: -260px;}
    .item-banner .text-slide { right: 4rem;}
}

@media(max-width:991px) {
    /* TOP Banner */
    .top-banner .slide-right { display: none;}  

    /* BUY SELL */
    .buy-sell .font-16 { font-size: 13px;}

    /* NEW TOPIC */
    .topic .items-topic { width: 31.33%; margin: 0 1%;}

    /* LOCATION */
    .img-store { width: 375px; top: 8rem;}

    /* PURCHASE */
    .bg-purchase .font-20 { font-size: 16px;}
}

@media(max-width:768px) {
    .font-32 { font-size: 22px;}
    .font-38 { font-size: 28px;}

    /* LOCATION */
    .location { padding-top: 0; margin-top: 0;}
    .img-store { top: 5rem;}

    .item-banner .text-slide {
        left: 8rem;
        top: 1rem;
        padding: 0;
    }
    .map iframe{
        height: 350px;
    }


}

@media(max-width:767px) {
    /* NEW TOPIC */
    .topic { padding-top: 3rem;}

    /* BUY SELL */
    .buy-sell { background: -webkit-gradient(linear, left top, left bottom, color-stop(50, #ffff81), color-stop(50, #a6fbdc));
        background: -moz-linear-gradient(Top, #ffff81 50%, #a6fbdc 50%);
        background: -ms-linear-gradient(Top, #ffff81 50%, #a6fbdc 50%);
        background: -o-linear-gradient(Top, #ffff81 50%, #a6fbdc 50%);
        background: linear-gradient(to bottom, #ffff81 50%, #a6fbdc 50%);}
    .content-sell { padding-top: 2rem;}
    .arrow-black { transform: rotate(90deg); top: auto; bottom: -20px; left: 48%; }
    .sell::after { content: ''; background: url(../images/curve1-1.jpg) no-repeat top center; background-size: cover; height: 75px; width: 100%; position: absolute; top: -3rem; left: 0; }

    /* LOCATION */
    .location .w-50 { width: 80%!important;}
    .img-store { position: relative; top: 0; width: 100%;}
    .title-location { margin-top: -2rem; }

    
}

@media(max-width:575px) {
    .font-18 { font-size: 15px;}
    .font-38 { font-size: 24px; }


    /* TOP Banner */
    .item-banner .text-slide { font-size: 16px; right: 0;}
    

    /* BUY SELL */
    .buy { padding: 1.5rem;}
    .sell { padding: 1.5rem;}    
    .btn-border-red.font-18 { font-size: 16px;}

    /* LOCATION */
    .location .w-50 { width: 100%!important;}
    .title-location { width: 78%; font-size: 18px!important; padding: 0.5rem 1rem !important;}
    .title-location::before { left: -53px; border-width: 0 53px 53px 0;}

    /* NEW TOPIC */
    .topic .items-topic { width: 169px; margin: 1rem auto;}

    .slide_pc{ display: none;}
    .slide_sp{ display: block;}
    

}