@charset "utf-8";
/* VISUAL */
.visual { height:30rem }


    
/* SEARCH BAR */
.search_bar , .search_input , .search_btn { width:100% ; box-sizing:border-box }
.search_bar { display:block ; margin-bottom:2rem }
.search_input , .search_btn {
    font-size:1.8rem ; line-height:2.8rem ; 
    border-radius:0.6rem ;
    padding:1rem 1.5rem 1.2rem ;
}
.search_input { border:solid 1px rgba(0,0,0,0.1) ; margin-bottom:0.5rem }
.search_btn {
    background-color:#111111 ; border:solid 1px #111111 ;
    color:#ffffff ; font-weight:600 ; transition:0.3s all ;
}
.search_btn:hover , .search_btn:focus { background-color:#ffde00 ; border-color:#e5c700 ; color:#111111 }



/* LIST */
.list , .list_item , .item__right , .item__li , .noData{ width:100% ; box-sizing:border-box }
.list { border-top:solid 0.3rem #ffde00 ; margin-bottom:2rem }

.list_item { 
    position:relative ; transition:0.3s all ;
    padding:1.5rem 0.3rem ; border-bottom:solid 1px rgba(0,0,0,0.1) }
.list_item:hover { 
    border-color:rgba(0,0,0,0.2) ;
    background-color:rgba(0,0,0,0.03) ;
}    
.item__img { display:none } 
.item__li { margin-bottom:0.5rem }
.item__li:last-child { margin-bottom:0 }
.item__li:nth-child(1) , .item__li:nth-child(2) { display:inline-block ; width:auto }
.item__li:nth-child(1) { margin-right:3rem }

.item__li > b { 
    display:inline-block ; border-radius:0.4rem ; padding:0.3rem 1rem 0.5rem ; margin-right:0.5rem ;
    font-size:1.4rem ; line-height:1.8rem ; color:#ffffff ; font-weight:500 ;
    background-color:#111111 ; position:relative ; top:0.2rem
}
.item__li > span { font-size:1.8rem ; line-height:2.8rem }
.item__link {
    display:block ; width:100% ; height:100% ; 
    position:absolute ; left:0 ; top:0 ;
    font-size:0 ; color:transparent
}

.noData {
    font-size:2rem ; line-height:2.8rem ; font-weight:600 ; text-align:center ;
    padding:2rem 0.5rem 2.2rem ;
    border-bottom:solid 1px rgba(0,0,0,0.1)
}

.list__total { font-size:1.6rem ; line-height:2.4rem ; margin-bottom:1rem }



/* PAGE */
.paging { width:100% ; box-sizing:border-box ; text-align:center ; font-size:0 }
.page , .page.prev::before , .page.next::before , .page.link { transition:0.3s all }
.paging span , .page  { 
    display:inline-block ; margin:0.5rem 0.3rem ; padding:0.5rem 0.8rem 0.7rem ; 
    font-size:1.6rem ; line-height:1.8rem }
.paging span { padding-left:0 ; padding-right:0 }
.page {
    box-sizing:border-box ;
    border-radius:0.4rem ; border:solid 1px rgba(0,0,0,0.1) ; 
     
}
.page.prev , .page.next { 
    padding:0 ; width:3.2rem ; height:3.2rem ;
    font-size:0 ; color:transparent ;
    position:relative ;
}
.page.prev:hover , .page.prev:focus ,
.page.next:hover , .page.next:focus { background-color:#111111 ; border-color:#111111 } 
.page.prev { margin-right:2rem }
.page.next { margin-left:2rem }

.page.prev::before , .page.next::before {
    display:block ; content:"" ; width:0.8rem ; height:0.8rem ;
    border:solid 0.1rem #111111 ; opacity:0.6 ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) rotate(45deg) ;
}
.page.prev::before { border-top:0 ; border-right:0 ; left:55% }
.page.next::before { border-bottom:0 ; border-left:0 ; left:45% }

.page.prev:hover::before , .page.prev:focus::before ,
.page.next:hover::before , .page.next:focus::before { border-color:#ffffff ; border-width:0.2rem ; opacity:1 }


.page.link:hover , .page.link:focus { 
    border-color:rgba(0,0,0,0.3) ; color:#111111 ;
    background-color:rgba(0,0,0,0.05) 
}
.page.now , .page.now:hover , .page.now:focus {
    background-color:#ffde00 ; border:solid 1px #e5c700 ;
    color:#111111 ; font-weight:600 ;
}





/* PC **********/
@media screen and (min-width:1100px){
 
    /* VISUAL */
    .visual { height:50rem }


    /* SEARCH BAR */
    .search_bar { text-align:center ; font-size:0 }
    .search_col , .search_btn { display:inline-block }
    .search_col { width:25rem ; margin-right:0.5rem }
    .search_btn { 
        width:5.2rem ; height:5.2rem  ; padding:0 ;
        font-size:0 ; color:transparent ; 
        position:relative ;
    }
    .search_btn::before { 
        width:3rem ; height:3rem ; display:block ; content:"" ;
        background:url(../img/icon_fun.png) no-repeat left bottom ; background-size:auto 6rem ;
        position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
        transition:0.3s all ;
    }
    .search_btn:hover::before , .search_btn:focus::before { background-position:left top }



    /* LIST */
    .item__img { 
        display:block ; overflow:hidden ; width:10rem ; height:10rem ;
        background-repeat:no-repeat ; background-position:center ; background-size:cover ;
        position:absolute ; left:0.5rem ; top:1.5rem ;
        border:solid 1px rgba(0,0,0,0.1) ; border-radius:0.4rem ;
        font-size:0 ; color:transparent ; 
    }
    .item__right { padding-left:12rem ; min-height:10rem }
    .list_item:hover .item__img { border-color:rgba(0,0,0,0.2) }


    .list { display:flex ; flex-wrap:wrap }
    .list_item { width:50% } 
 
} 




/* PRINT **********/
@media print { 
    .visual { height:auto }
}