@charset "utf-8";

/* 
230620 sjh 탑배너정리
html > page > top_banner.php
*/


.sub_menu_box .topbanner_depth2 .cate_ul{margin-bottom:70px; text-align:center}
.sub_menu_box .topbanner_depth2 .cate_li{display:inline-block; width:14.375%; }
.sub_menu_box .topbanner_depth2 .cate_li + .cate_li{margin-left:-4px}
.sub_menu_box .topbanner_depth2 .cate_li.on{position:relative; z-index:2}
.sub_menu_box .topbanner_depth2 .cate_li a{display:inline-block; width:100%; border:1px solid #e1e1e1; background-color:#fff; font-size:17px; line-height:57px; padding: 0; color:#666; border-radius:0}
.sub_menu_box .topbanner_depth2 .cate_li.on a{border-color:#222; background-color:#fff; font-weight:500; color:initial;}

@media(max-width:991px){
    .sub_menu_box .topbanner_depth2 .cate_ul{margin-bottom:35px; text-align:left; overflow:hidden; padding-bottom:1px;}
	.sub_menu_box .topbanner_depth2 .cate_li{width:auto; float:left;}
	.sub_menu_box .topbanner_depth2 .cate_li + .cate_li{margin-left:-1px; }
	.sub_menu_box .topbanner_depth2 .cate_li:nth-child(5n){margin-left:0;}
	.sub_menu_box .topbanner_depth2 .cate_li a{padding:0 10px; font-size:14px; line-height:42px; display:block; margin-bottom:-1px;}
        
    .m_sub_menu{}
    .m_sub_menu .dropdown{margin-bottom: 60px;}
    .m_sub_menu .dropdown > a{background: #f08200; color:#fff; padding: 15px; font-size:14px; border-radius:43px !important; position: relative; line-height: 1;}
    .m_sub_menu .dropdown > a:after{content:'>'; display: block; position: absolute; right: 20px; top: 50%; transform:translate(-50%) rotate(90deg); transform-origin: center top; font-family:serif; }
    .m_sub_menu .dropdown-menu{width: 100%; text-align: center;}
}

.related_tit{
    font-size: 25px;
    font-weight:500;
    margin-bottom: 3%;
}
.related_box{
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.related_box .con_box{
    width: 50%;
    display: flex;
    align-items: center;
    margin-bottom: 2%;
}
.related_box .con_box .img_box img{
    width: 200px;
    height: 200px;
    object-fit: cover;
}
.related_box .con_box .text_box{
    margin-left:10%;
}
.related_box .con_box .text_box h2{
    font-size: 24px;
    font-weight: 500;
}
.related_box .con_box .text_box p{
    font-size: 16px;

}
.related_box .con_box .text_box .discount_price_box{
    display: flex;
    margin:5% 0;
}
.related_box .con_box .text_box .price{
    font-size:18px;
    font-weight:500;
}
.related_box .con_box .text_box .discount_price{
    text-decoration:  line-through;
    color: #aaa;
}
.related_box .con_box .text_box .discount_pre{
    margin-left: 10%;
    color: red;
}

.related_item_btn_box{
    display: flex;
    align-items: center;
}
.related_item_input_btn{
        width: 100%;
        padding:15px;
        text-align: center;
        border-radius: 5px;
        background: #ddd;
        
}

.related_item_btn_box	.related_item_input_btn{
    width: 100%;
    padding:15px;
    text-align: center;
    border-radius: 5px;
    background: #ddd;
            font-size: 15px;
}
.related_item_heigh_rep{
    width:auto;
    display:flex;
flex-wrap: wrap;
    justify-content: space-between;
}
.related_item_rep{
    display: flex;
justify-content: space-between;
align-items: center;
width: 48%;
}
.del_pro_box{
    text-align:center;
}
.related_item_rep{
    margin-bottom:2%;
}
.related_item_rep .img_box{
    width: 100px;
height: 100px;
object-fit: cover;
}
.write-wrap h2{
    width: 25%;
}


@media(max-width:991px){
    .related_tit{
        font-size: 16px;
        margin-bottom: 5%;
    }
    .related_box .con_box .img_box img{
        width:100px;
        height: 100px;
    }
    .related_box .con_box{
        width: 100%;
        margin-bottom: 4%;
    }
    .related_box .con_box .text_box h2{
        font-size: 16px;
    }
    .related_box .con_box .text_box p{
        font-size:12px;
    }
    .related_box .con_box .text_box .price{
        font-size: 16px;
    }

    .related_item_input_btn{
        width: 100%;
        padding:8px;
        text-align: center;
        font-size:13px;
        border-radius: 5px
        
}

    .related_item_rep .img_box{
        width: 30%;
    }
    .related_item_rep{
        width:100%;
    }
    .write-wrap h2{
        font-size: 12px;
        text-align:center;
        width: 39%;
    }
    .write-wrap p{
        font-size:10px;
    }
    .del_pro_box{
        width:15%;
    }
}