@charset "utf-8";   
 
/* main-5 */
.main5__sec , .main5__inner { width:100% }
.main5__sec   { padding:6rem 0 }
.main5__inner { margin-bottom:3rem ; font-size:0 ; text-align:center }  

.main5__title {
    font-size:3.4rem ; line-height:140% ; font-weight:600 ; color:#111111 ; text-align:center ;
    margin-bottom:3rem ; letter-spacing:-0.1rem ;
}

.main5__more {
    display:block ; width:9rem ; padding:1rem ; margin:auto ; 
    font-size:1.4rem ; line-height:110% ; text-align:center ;
    border:solid 1px rgba(0,0,0,0.1) ; border-radius:0.4rem ;
    transition:0.3s all ;
}
.main5__more:hover {
    background-color:#111111 ; border-color:#111111 ;
    color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.2) ;
}

.main5__item { display:none ; width:90% ; max-width:32rem ; margin:0 0.5rem 2rem ; position:relative }
.main5__item:nth-child(1) , .main5__item:nth-child(2) , .main5__item:nth-child(3) , .main5__item:nth-child(4) { display:inline-block }
.main5__img , .main5__img > span , .main5__img::after { display:block ; width:100% ; }
.main5__img  { overflow:hidden ; height:20rem ; border-radius:0.4rem ; position:relative }
.main5__img > span  , .main5__img::after  {
    height:100% ; display:block ; transition:0.3s all ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) scale(1.01) ;
}
.main5__img > span { background-repeat:no-repeat ; background-position:center ; background-size:cover }
.main5__img::after { background-color:#000000 ; content:"" ; opacity:0.1 } 
.main5__item:hover .main5__img > span { transform:translate(-50%,-50%) scale(1.1) }
.main5__item:hover .main5__img::after { opacity:0.3 }
 
.main5__icon , .main5__icon::before , .main5__icon::after { 
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
    transition:0.3s all ;
} 
.main5__icon { 
    top:12rem ; opacity:0 ;
    width:6rem ; height:6rem ; border-radius:100% ;
    background-color:rgba(0,0,0,0.4) ;
} 
.main5__item:hover .main5__icon { top:10rem ; opacity:0.9 }

.main5__icon::before , .main5__icon::after { 
    display:block ; content:"" ; box-sizing:border-box 
}
.main5__icon::before { 
    width:2rem ; height:2rem ; border-radius:100% ;
    border:solid 0.2rem #ffffff ;
    left:48% ; top:48% ;
}
.main5__icon::after {
    width:0.8rem ; height:0.2rem ; border-radius:1rem ;
    background-color:#ffffff ;
    left:62% ; top:62% ;
    transform:translate(-50%,-50%) rotate(45deg)
}

.main5__item__title {
    display:block ; padding:1rem 0.2rem 1.2rem ;
    font-size:1.6rem ; line-height:140% ; text-align:center ;
    border-bottom:solid 1px rgba(0,0,0,0.1) ;
    word-wrap:break-word ; white-space:nowrap ; overflow:hidden ; text-overflow:ellipsis ;
    transition:0.3s all 
}
.main5__item:hover .main5__item__title { color:#111111 ; border-color:rgba(0,0,0,0.4) }

 



@media screen and (min-width:1024px){ 
     
    /* main-5 */
    .main5__sec   { padding:8rem 0 }
    .main5__title { font-size:4rem ; margin-bottom:4rem }
    .main5__inner { width:100% ; padding:0 ; margin:0 auto 3rem } 
    .main5__inner::after { display:block ; content:"" ; clear:both }

    .main5__item:nth-child(1) , .main5__item:nth-child(2) , .main5__item:nth-child(3) , .main5__item:nth-child(4) ,
    .main5__item { display:block }
    .main5__item { float:left ; width:20% ; max-width:none ; margin:0 ; position:relative }
    .main5__item , .main5__img { height:24rem }
    .main5__img  { border-radius:0 }

    .main5__item__title {
        padding:0 ; width:100% ; border:none ;
        position:absolute ; left:0 ; top:77% ; opacity:0 ;
        font-size:1.8rem  ; text-align:center ;

    }
    .main5__item:hover .main5__item__title { 
        top:70% ; opacity:1 ;
        color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.2) ;
    }

    .main5__icon { top:60% }
    .main5__item:hover .main5__icon { top:50% } 

}
  




@media print {  }