@charset "utf-8";
/* Detail */
#mv-img img{margin: 0 20px 0 0;}

#detail h3{font-size: 3rem; text-align: center; margin: 0 0 20px;}
#detail h4{font-size: 2rem; line-height: 1.4; color: #1792e5; margin: 0 0 20px; position: relative;}
#detail h4:before{content: ''; position: absolute; top: 0; left: -20px; width: 6px; height: 100%; background: #1792e5; border-radius: 3px;}

#case{padding: 3px 0 5px; width: 216px; text-align: center; background: #1792e5; color: #fff; font-weight: 700; border-radius: 18px; margin: 0 auto 20px;}

#status{max-width: 865px; margin: 0 auto 30px; border-radius: 6px; padding: 14px 0; display: flex; align-items: center; background: rgba(23,146,229,.12);}
#status li:nth-of-type(1){width: 90px; text-align: center; font-weight: 700;}
#status li:nth-of-type(2){width: calc(100% - 90px); padding: 0 20px; border-left: 1px solid #303030;}

.detail-box{display: flex; justify-content: space-between; flex-wrap: wrap; padding: 0 0 20px;}
.detail-img{width: 39.82%;}
.detail-cont{width: 54.44%;}
.detail-item{margin: 0 0 60px;}

/* Responsive */
@media only screen and (max-width: 1023px){
    #detail h4{padding: 0 0 0 20px;}
    #detail h4:before{left: 0;}
    
    .detail-img{width: 100%; text-align: center; margin: 0 0 30px;}
    .detail-cont{width: 100%;}
}

@media only screen and (max-width: 767px){
    #mv{margin: 0 0 70px;}
    #mv h2{width: 134px;}
    
    #detail h3{font-size: 2.6rem;}
    
    #status{font-size: 1.4rem; padding: 8px 0;}
    #status li:nth-of-type(1){width: 80px;}
    #status li:nth-of-type(2){width: calc(100% - 80px);}
    
    .detail-box{padding: 0;}
    
}