@charset "utf-8";

.sub_section_title_con{}

.list_type_wrap{display: none; position: absolute; z-index: 1; top:0; left: 0; font-size:0px; font-size:0rem; line-height:0px; line-height:0.0rem; }
.list_type_wrap .list_type{display: inline-block; width: 29px; height: 29px; background-color: transparent; border:1px solid #e3e5f0; margin-right: 5px; background-repeat: no-repeat; background-position: center; background-size: 13px 13px; cursor: pointer;}
.list_type_wrap .list_type:last-child{margin-right: 0;}
.list_type_wrap .list_type.type_1{background-image: url('../img/list_type_1_icon.png');}
.list_type_wrap .list_type.type_1.active{background-image: url('../img/list_type_1_icon_active.png');}
.list_type_wrap .list_type.type_2{background-image: url('../img/list_type_2_icon.png');}
.list_type_wrap .list_type.type_2.active{background-image: url('../img/list_type_2_icon_active.png');}
.list_type_wrap .list_type.active{border-color:#000; background-color: #000;}

.filter_list_wrap{display: none;}
.filter_list_wrap ul{font-size: 0; line-height: 0;}
.filter_list_wrap ul > li{position:relative; display: inline-block; vertical-align: middle; padding-right: 15px; margin-right: 15px;}
.filter_list_wrap ul > li:after{content:''; position: absolute; top:50%; right:0; height: calc(100% - 10px); margin-top: 1px; border-left:1px solid rgba(0,0,0,0.15); transform: translateY(-50%);}
.filter_list_wrap ul > li:last-child{padding-right: 0; margin-right: 0;}
.filter_list_wrap ul > li:last-child::after{border:none;}
.filter_list_wrap ul > li > a{display: inline-block;}
.filter_list_wrap ul > li > a > span{display: inline-block; position:relative; transition: all 0.2s ease; font-size: 14px; font-size: 1.4rem; line-height: 24px; line-height: 2.4rem; letter-spacing: -0.025em; font-weight: 300; word-break: keep-all; color:#000;}
.filter_list_wrap ul > li.active > a > span{font-weight: 700;}
.filter_list_wrap ul > li > a > span::after{content: ''; position: absolute; top:0; right:0; width: 0; height: 100%; opacity: 0; transition: all 0.15s ease;
    background-image: url("/weven_service/asset/img/arrow/arrow_6x11_black_right.png"); background-repeat: no-repeat; background-position: right center; background-size: 6px 11px;}

@media all and (min-width:992px){
    .list_type_wrap{display: block;}
    .filter_list_wrap{display: block; position: absolute; z-index: 1; top:5px; right: 0;}
}