/* ////////////////////sub_mid//////////////////// */
.sub_mid{
    margin-top: 136px;
    margin-bottom: 35px;
    overflow: hidden;
}

.mid_num{
    float: left;
    font-size: 23px;
    font-family: 'NanumSquare', sans-serif !important;
    font-weight: 600;
}

.mid_num > span{
    color: #ed5c22;
}

.mid_ex{
    float: right;
    text-transform: uppercase;
    font-size: 13px;
    color: #a3a3a3;
}



/* ////////////////////items//////////////////// */
.item_container{overflow: hidden;}

.pro_items{
    width:calc((100% - (33px * 2)) / 3);
    border: 1px solid #dad9d9;
    padding:20px 0 50px 0;
    box-sizing: border-box;
    float: left;
    margin:0 33px 45px 0;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.pro_items:nth-child(3n){
    margin-right: 0;
}

.sec_body{
    text-align: center;
    font-size: 0;
}

.sec_body img{
    width:85%;
}

.line{
    width:75%;
    height:1px;
    background-color: #dad9d9;
    margin: 0 auto;
}

.item_label{
    text-align: center;
    margin-top: 40px;
}

.label{
    display: inline-block;
    font-size: 9px;
    color: #fff;
    text-align: center;
    padding: 4px 17px;
    box-sizing: border-box;
    border-radius: 20px;
    margin-left: 5px;
}

.label1{
    background-color: #231916;
}

.label2{
    background-color: #ffa800;
}

.label3{
    background-color: #bb2b20;
}

.label:last-child{
    margin-right: 0;
}

.item_info{
    text-align: center;
}

.info_title{
    font-size: 15px;
    font-weight: 400;
    color: #222;
    margin-top: 20px;
}

.info_price{
    font-size: 25px;
    color: #ed5c22;
    font-weight: 600;
    margin-top: 10px;
    font-family: 'NanumSquare', sans-serif !important;
}


.ani_line{
    position: absolute;
    transition: all 0.5s;
    opacity: 0;
    background-color: #ed5c22;
    
}

#line_top{
    width:100%;
    height: 2px;
    top:0;
    left:-100%;
}
#line_right{
    width:2px;
    height: 100%;
    top:-100%;
    right:0;
}
#line_bot{
    width:100%;
    height: 2px;
    bottom:0;
    left:100%;
}
#line_left{
    width:2px;
    height: 100%;
    top:100%;
    left:0;
}
.pro_items:hover #line_top {opacity: 1; transition-delay: 0s; }
.pro_items:hover #line_right {opacity: 1; transition-delay: 0.3s; }
.pro_items:hover #line_bot {opacity: 1; transition-delay: 0.6s; }
.pro_items:hover #line_left {opacity: 1; transition-delay: 0.9s; }

.pro_items:hover #line_top,
.pro_items:hover #line_bot{
    left:0;
}

.pro_items:hover #line_right,
.pro_items:hover #line_left{
    top:0;
}