/*=======CAR SEARCH=========*/

.car_search_panel {
    background-color: #ffeeee;
}

.car_search_panel h3 {
    text-align: center;
    font-size: 23px;
    font-weight: bold;
    display: -webkit-box;
    display: -ms-flexbox;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.car_search_panel h2 {
    text-align: center;
    font-size: 23px;
    font-weight: bold;
    display: -webkit-box;
    display: -ms-flexbox;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
#body_area {
    justify-content: space-between;
}

#body_area li {
    width: 14%;
}

#body_area li input {
    display: none;
}

#body_area li label {
    display: block;
    height: 105px;
}

#body_area li label div {
    border: 3px solid #ffd7d7;
    background-color: #FFF;
    border-radius: 10px;
    height: 100%;
    cursor: pointer;
    text-align: center;
    background-repeat: no-repeat;
    background-size: auto 48px;
    background-position: center top 15px;
    line-height: 158px;
    font-weight: bold;
    font-size: 15px;
}

#body_area li input:checked+div {
    border: 3px solid #ff0000;
}

#chk_body_type_kbn6+div {
    background-image: url('/common/images/car_search_car01.png?2024');
}

#chk_body_type_kbn5+div {
    background-image: url("/common/images/car_search_car02.png?2024");
}

#chk_body_type_kbn0+div {
    background-image: url("/common/images/car_search_car03.png?2024");
}

#chk_body_type_kbn2+div {
    background-image: url("/common/images/car_search_car04.png?2024");
}
#chk_body_type_kbn3+div {
    background-image: url("/common/images/car_search_car04.png?2024");
}
#chk_body_type_kbn4+div {
    background-image: url("/common/images/car_search_car05.png?2024");
}
#chk_body_type_kbn9+div {
    background-image: url("/common/images/car_search_car07.png?2024");
}
#chk_body_type_kbn11+div {
    background-image: url("/common/images/car_search_car06.png?2024");
}
#chk_body_type_kbn1+div {
    background-image: url("/common/images/car_search_car08.png?2024");
}

#maker_area {
    justify-content: center;
}

#maker_area li {
    width: 114px;
    margin: 0 3px;
}

#maker_area li input {
    display: none;
}

#maker_area li label {
    display: block;
    height: 114px;
}

#maker_area li label div {
    border: 3px solid #FFF;
    box-shadow: 0 3px 0 #ffd7d7;
    background-color: #FFF;
    height: 100%;
    cursor: pointer;
    text-align: center;
    background-repeat: no-repeat;
    background-size: auto 50px;
    background-position: center top 20px;
    line-height: 165px;
    font-weight: bold;
}
    #maker_area li:last-child label div {
        font-size: 17px;
        line-height: 113px;
    }
#maker_area li input:checked+div {
    border: 3px solid #ff0000;
}

#radio_maker_kbn1+div {
    background-image: url("/common/images/car_search_maker01.png");
}

#radio_maker_kbn2+div {
    background-image: url("/common/images/car_search_maker02.png");
}

#radio_maker_kbn3+div {
    background-image: url("/common/images/car_search_maker03.png");
}

#radio_maker_kbn4+div {
    background-image: url("/common/images/car_search_maker04.png");
}

#radio_maker_kbn5+div {
    background-image: url("/common/images/car_search_maker05.png");
}

#radio_maker_kbn6+div {
    background-image: url("/common/images/car_search_maker06.png");
}
#radio_maker_kbn7+div {
    background-image: url("/common/images/car_search_maker07.png");
}
#radio_maker_kbn9+div {
    background-image: url("/common/images/car_search_maker08.png");
}
#radio_maker_kbn10+div {
    background-image: url("/common/images/car_search_maker10.png");
}
#model_area {
    display: flex;
    width: 40%;
    max-width: 600px;
    margin: auto;
}
#model_area div{
    width: calc(100% - 70px);
    margin: 0 0 0 15px;
    /* height: 40px; */
}

#price_and_shift{
    display: flex;
    width: 80%;
    margin: auto;
}

#price_area {
    display: flex;
    width: 67%;
    /* max-width: 600px; */
    margin: auto;
}
#shift_area {
    display: flex;
    width: 33%;
    /* max-width: 600px; */
    margin: auto;
}
#shift_area div{
    width: calc(100% - 70px);
    margin: 0 0 0 15px;
    /* height: 40px; */
}


#price_area h3,#model_area h3,#shift_area h3 {
    line-height: 50px;
}

#price_area ul {
    display: flex;
    width: 100%;
    width: calc(100% - 105px);
    margin: 0 0 0 15px;
}

#price_area ul li:nth-child(1),
#price_area ul li:nth-child(3) {
    width: calc(50% - 16px);
    /* height: 40px; */
}

#price_area ul li:nth-child(2) {
    width: 33px;
    text-align: center;
    box-sizing: border-box;
    line-height: 50px;
    font-weight: 700;
}

#price_area ul select,#model_area select,#shift_area select {
    width: 100%;
    height: 50px;
    position: relative;
    cursor: pointer;
    border: none;
    border-radius: 10px;
    border-bottom: 3px solid #ffd7d7;
    color: #000;
}

.price_search_select,.model_search_select,.shift_search_select {
    position: relative;
}

.price_search_select::before ,.model_search_select::before ,.shift_search_select::before {
    content: "";
    background: #0a0a0a;
    height: 47px;
    width: 44px;
    position: absolute;
    right: 0px;
    border-radius: 0 10px 10px 0;
    pointer-events: none;
    z-index: 2;
}

.price_search_select::after,.model_search_select::after,.shift_search_select::after {
    content: "";
    width: 10px;
    height: 10px;
    display: block;
    border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
    position: absolute;
    top: 45%;
    right: 17px;
    transform: translateY(-50%) rotate(45deg);
    pointer-events: none;
    z-index: 3;
}
/*--color--*/
#color_area{
    display: flex;
    width: 100%;
}
#color_area div {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    width: calc(100% - 106px);
    margin: 0 0 0 15px;
    border-radius: 10px;
    background-color: #FFF;
    padding: 15px;
}
/* filter color */
.color-list .fillter-color{ position: relative;}
.color-list .fillter-color:before{content:'';width: 25px;height: 25px;/* border: 2px solid #000; */border-radius: 5px;position: absolute;margin: 2px;left: 0;top: 0;}
.color-list .fillter-color{display: inline-block;border: none;line-height: 31px;position: relative;padding: 0px 0 0 34px;font-size: 14px;width: 16%;text-align: left;}
.color-list .fillter-color.color1:before{background: #fff;border: 1px solid #e3e3e3;}
.color-list .fillter-color.color2:before{ background: #000;}
.color-list .fillter-color.color3:before{ background: #ff1800;}
.color-list .fillter-color.color4:before{ background: #0036ff;}
.color-list .fillter-color.color5:before{ background: #fcff00;}
.color-list .fillter-color.color6:before{ background: #15e000;}
.color-list .fillter-color.color7:before{ background: #ac7500;}
.color-list .fillter-color.color8:before{
    background: rgb(223,181,49);
    background: linear-gradient(62deg, rgba(223,181,49,1) 0%, rgba(255,249,190,1) 50%, rgba(223,181,49,1) 100%);    
}
.color-list .fillter-color.color9:before{
    background: #cbcbcb;
    background: -moz-linear-gradient(45deg, #cbcbcb 0%, #ffffff 50%, #cbcbcb 100%);
    background: -webkit-gradient(left bottom, right top, color-stop(0%, #cbcbcb), color-stop(50%, #ffffff), color-stop(100%, #cbcbcb));
    background: -webkit-linear-gradient(45deg, #cbcbcb 0%, #ffffff 50%, #cbcbcb 100%);
    background: -o-linear-gradient(45deg, #cbcbcb 0%, #ffffff 50%, #cbcbcb 100%);
    background: -ms-linear-gradient(45deg, #cbcbcb 0%, #ffffff 50%, #cbcbcb 100%);
    background: linear-gradient(45deg, #cbcbcb 0%, #ffffff 50%, #cbcbcb 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cbcbcb', endColorstr='#cbcbcb', GradientType=1 );

}
.color-list .fillter-color.color10:before{ background: #dcdcdc;}
.color-list .fillter-color.color11:before{ background: #ff9c00;}
.color-list .fillter-color.color12:before{ background: #ba00ff;}
.color-list .fillter-color.color13:before{ background: #ffa4dc;}
.color-list .fillter-color.color14:before{ background: #ffebb0;}
.color-list .fillter-color.color15:before{
    border: 1px solid #e7e7e7;
    background: rgb(249,232,181);
    background: linear-gradient(62deg, rgba(249,232,181,1) 0%, rgba(255,255,255,1) 50%, rgba(249,232,181,1) 100%);    
}
.color-list .fillter-color.color16:before{ background: #6e6e6e;}
.color-list .fillter-color.color17:before{ background: #002aa3;}
.color-list .fillter-color.color18:before{
    background-color: #000000;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #e2e2e2), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #e2e2e2),color-stop(.75, #e2e2e2), color-stop(.75, transparent),to(transparent));
    -webkit-background-size: 6px 6px;    
}
.color-list input[type=checkbox]{ display:none }
.color-list input[type=checkbox]:checked + span:before{
    border-left: 3px solid #ff0000;
    border-bottom: 3px solid #ff0000;
    width: 12px;
    height: 7px;
    -webkit-transform:rotate(-45deg);
    transform:rotate(-45deg);
    left: 8px;
    top: 9px;
    content:'';
    position: absolute;
}
.color-list input[type=checkbox]#color-02:checked + span:before{
    border-left: 3px solid #FFF;
    border-bottom: 3px solid #FFF;
}






.go_search {
    margin: auto;
    display: block;
    width: 305px;
}



/*======= RESPONSIVE =========*/

@media screen and (min-width: 992px) and (max-width: 1240px) {
    /*=======CAR SEARCH=========*/
    #body_area li label div {
        font-size: 13px;
    }
    #maker_area li label div {
        font-size: 13px;
    }
    #maker_area li:last-child label div {
        font-size: 17px;
        line-height: 113px;
    }       

}
@media screen and (min-width: 993px) and (max-width: 1200px) {

    #maker_area li {
       
        margin: 0 2px;
    }

}
@media screen and (max-width: 992px) {
    /*=======CAR SEARCH=========*/
    #maker_area {
        flex-wrap: wrap;
    }
    #maker_area li {
        width: 60px;
        margin: 0 3px;
        font-size: 13px;
    }
    #maker_area li label {
        display: block;
        height: 80px;
    }
    #maker_area li label div {
        line-height: 112px;
        background-size: auto 30px;
        background-position: center top 15px;
    }
    #maker_area li:last-child label div {
        font-size: 17px;
        line-height: 102px;
    }    
    #body_area li {
        width: 25%;
    }
    #body_area li label div {
        font-size: 13px;
    }
    #body_area {
        flex-wrap: wrap;
    }
    #price_and_shift{
        flex-wrap: wrap;
    
    }    
    .car_search_panel h2 {
        font-size: 18px;

    }    
    .car_search_panel h3 {
        font-size: 18px;

    }
    #price_and_shift {
        width: 100%;
    }
    #body_area li label div {
        font-size: 12px;
    }
    .color-list .fillter-color {
        width: 25%;
        font-size: 13px;
    }

}

@media screen and (max-width: 767px) {
    /*=======CAR SEARCH=========*/
    #price_area,#model_area ,#shift_area ,#color_area {
        flex-wrap: wrap;
        width: 100%;
    }
    #price_area h3, #price_area h2, #model_area h3,#shift_area h3,#color_area h3 {
        line-height: 50px;
        width: 46px;
        font-size: 14px;
    }
    #price_area ul,#model_area div,#shift_area div,#color_area div {
        width: calc(100% - 60px);
        margin: 0 0 0 5px;
    }

    #color_area div {
        padding: 5px;
    }
    .color-list{
       justify-content:space-between;
    }
    .color-list .fillter-color {
        line-height: 0.7rem;
        padding: 4px 0 0 26px;
        font-size: 11px;
        letter-spacing:-1px;
        width: 33%;
        height:20px;
    }
    .color-list .fillter-color:before {
        width: 20px;
        height: 20px;
        /* border: 2px solid #000; */
    }
    .color-list input[type=checkbox]:checked + span:before {
        left: 6px;
        top: 7px;
    } 
    


}

@media screen and (max-width: 560px) {

    /*=======CAR SEARCH=========*/
    #body_area li label div {
        font-size: 12px;
        letter-spacing: -1px;
    }
}

@media screen and (max-width: 355px) {
    /*=======CAR SEARCH=========*/
    #maker_area li {
        width: 90px;
        margin: 0 3px;
        font-size: 12px;
    }
    #maker_area li label {
        display: block;
        height: 90px;
    }
    #maker_area li label div {
        font-size: 10px;
        background-size: auto 40px;
        background-position: center top 15px;
        line-height: 130px;
    }
    #maker_area li:last-child label div {
        font-size: 16px;
        line-height: 90px;
    }     
    #body_area li label div {
        font-size: 10px;
        letter-spacing: -1px;
        background-size: auto 40px;
        background-position: center top 15px;
    }
}