@charset "UTF-8";

.total-grapth > li{ width: 33.3333%; }
.total-grapth li .detail-score li .item{ width: 150px; }
.total-grapth li .detail-score li .item-score .se{width: 33px;}
@media screen and (max-width: 1200px){
    .total-grapth > li{width: 100%; padding: 0 41px; margin-bottom: 68px;}
    .total-grapth li .detail-score li.visi{display: none;}
    .detail-score.visi{display: none;}
}

.upset-wrap .upset-bg{width: 375px; height: 167px; margin-top: 0; margin-right: 40px;}

.crash .safe-wrap.safety09 .safety-button{background: url('../images/detail/safety09.png')no-repeat 60px center;}
.crash .safe-wrap.safety09 .safety-button.active{background: #202020 url('../images/detail/safety09-on.png')no-repeat 60px center;}

.crash .safe-wrap.safety10 .safety-button{background: url('../images/detail/safety10.png')no-repeat 60px center;}
.crash .safe-wrap.safety10 .safety-button.active{background: #202020 url('../images/detail/safety10-on.png')no-repeat 60px center;}

@media screen and (max-width: 1200px){
    
.crash .safe-wrap.safety09 .safety-button{background: url('../images/detail/safety09.png')no-repeat 9px center;}
.crash .safe-wrap.safety09 .safety-button.active{background: #202020 url('../images/detail/safety09-on.png')no-repeat 9px center;}

.crash .safe-wrap.safety10 .safety-button{background: url('../images/detail/safety10.png')no-repeat 9px center;}
.crash .safe-wrap.safety10 .safety-button.active{background: #202020 url('../images/detail/safety10-on.png')no-repeat 9px center;}
}

@media screen and (max-width: 767px){
    .prevention table tbody tr td{font-size: 14px;}
    .prevention table tbody tr td.fir{width: auto; padding-left: 10px;}
    .prevention table tbody tr td.score{width: 30%; text-align: center; padding-left: 0;}
    .prevention table tbody tr td.icon{width: 14%;}
    .prevention table tbody tr td.prev{width: 110px;}
}


.way-tab-wrap .tab-list ul li{width: 25%;}
.way-tab-wrap .tab-list ul li:last-child{width: 25%;}
.way-tab-wrap .tab-list ul li:nth-child(4n){border-right: none;}

.carSlider-inner .score-info{bottom: 74px;}

.video-wrap{margin-top:20px;}

.detail-slide-inner{
    width: 465px;
    margin: 0 auto 50px;

}
.detail-slide-inner .detail-imgWrap .detail-items{
    height: 300px;
}
.video-wrap{
    margin-top: 40px;
}

@media screen and (max-width: 767px){
    .way-tab-wrap .tab-list ul li{width: 50%;}
    .way-tab-wrap .tab-list ul li:last-child{width: 50%;}
    .way-tab-wrap .tab-list ul li:nth-child(4n){border-right: 1px solid #eee;;}


    .detail-slide-inner{
        width: auto;
        margin: 0;
    }
    .detail-slide-inner .detail-imgWrap .detail-items{
        height: auto;
    }
    .upset-wrap .upset-bg{
        width: 100%;
        height: 37vw;
        background-size: cover !important;
        margin-right: 0;
        margin-bottom: 40px;;
    }
}

.prevention table tbody tr td.type20{font-size: 14px; color:#952a19; font-weight: bold;}
.prevention table tbody tr td.type21{font-size: 14px; padding:14px 0;}
.prevention table tbody tr td.c{text-align:center;}
.prevention table tbody tr td.b{font-weight:bold;}

/* 20201007 - 리콜 아이콘 추가 */
.detail-info .detail-util ul > li > a.ico05{
    color:#bf1e2d;
}
.detail-info .detail-util ul > li > a.ico05::before{
    content:'';
    width: 35px;
    height: 34px;
    background: url(../images/detail/icon-recall.png)no-repeat 0 0;
    position: absolute; 
    top: 0; 
    left: 50%; 
    -webkit-transform: translateX(-50%); 
    -moz-transform: translateX(-50%); 
    transform: translateX(-50%);
}
.detail-info .detail-util ul > li > a.ico05:hover::before{
    background: url(../images/detail/icon-recall-hover.png)no-repeat 0 0;
}
.recall-info{
    position: relative;
    padding: 20px 0 20px 20px;
    line-height: 1.5;
    font-size: 14px;
    color:#666;
    word-break: keep-all;
}
.recall-info::before{
    content:"\f06a"; font-family: "Font Awesome 5 Free"; font-weight: 600; font-size: 14px; color:#bf1e2d; position: absolute; top: 22px; left: 0;
}

/* 20201007 - 리콜추가 */
.detail-info .detail-util > ul > li{position: relative; display: inline-block; width: 20%; vertical-align: top;  margin: 0 0 0px 0;}
@media screen and (max-width: 1200px){
    .detail-info .detail-util > ul > li{width: 25%; margin: 0 0 26px 0;}
}
@media screen and (max-width: 767px){
    .detail-info .detail-util > ul > li{width: 50%;}
    .recall-info{
        padding: 10px 0 10px 20px;
    }
    .recall-info::before{
        top: 11px;
    }
}