@charset "utf-8";


#icon_loading{text-align:center;display:none;padding-top:100px;}

#detail{position:fixed;width:100%;max-width:600px;top:50%;left:50%;transform:translate(-50%, -50%);z-index:603;height: 90vh;max-height: 90vh;display:none;}
#detail_inner_wrap{position:absolute;width:100%;height:100%;top:0;left:0;z-index:603;background-color:#fff;border-radius:30px;overflow:hidden;padding:30px 0 30px 30px;}
#detail_inner{position:relative;height:100%;overflow:auto;overflow-y: scroll;padding:0 15px 0 0;}

#detail_inner .detail_area{position:relative;color:#222;}
#detail_inner .detail_area .img_area{text-align:center;}
#detail_inner .detail_area .img_area img{border-radius:12px;}
#detail_inner .detail_area .top_area{padding:30px 0 0 0;}
#detail_inner .detail_area .top_area .type{font-size:14.2px;font-weight:600;padding:0 0 10px;position:relative;}
#detail_inner .detail_area .top_area .type a.link{position:absolute;top:-2px;right:0;background-color:#444;color:#fff;display:block;width:70px;line-height:24px;font-size:13.2px;font-weight:700;
border-radius:30px;text-align:center;}
#detail_inner .detail_area .top_area .type a.link img{width:22px;transform:translateY(1px);}
#detail_inner .detail_area .top_area .type a.link:hover{opacity:0.5;}

#detail_inner .detail_area .top_area .type .color1{color:#f37e00;}
#detail_inner .detail_area .top_area .type .color2{color:#00b3c3;}
#detail_inner .detail_area .top_area .subject{font-size:25.4px;font-weight:800;line-height:1.2;color:#222;}
#detail_inner .detail_area .top_area .name{font-size:16.4px;font-weight:700;line-height:1.5;color:#555;padding:3px 0 10px;}
#detail_inner .detail_area .top_area .name img{width:20px;transform:translate(-2px, 2px);}
#detail_inner .detail_area .top_area .comment{font-size:16.4px;line-height:1.7;padding:25px 0 30px 0;border-top:1px solid #ddd;margin-top:20px;}


.close_detail{position:absolute;top:-25px;left:50%;display:block;line-height:50px;width:50px;text-align:center;background-color:#333;transform:translateX(-50%);border-radius:50px;z-index:700;cursor:pointer;}
.close_detail img{width:30px;margin-top:10px;}
.close_detail:hover img{opacity:0.5;}

#detail_works_bg{position:fixed;width:100%;height:100%;top:0;left:0;background-color:rgba(0,0,0,0.35);z-index:600;}

@media screen and (max-width:600px) {
#detail{max-width:auto;width:96%;top:50%;left:2%;transform:translate(0, -50%);}
#detail_inner_wrap{padding:25px 0 25px 25px;}
#detail_inner{padding:0 10px 0 0;}

#detail_inner .detail_area .img_area img{border-radius:10px;}
#detail_inner .detail_area .top_area{padding:20px 0 0 0;}
#detail_inner .detail_area .top_area .type{}
#detail_inner .detail_area .top_area .subject{font-size:21.4px;}
#detail_inner .detail_area .top_area .name{font-size:17.4px;padding:0 0 10px;}
#detail_inner .detail_area .top_area .comment{font-size:15.4px;padding:20px 0 30px 0;margin-top:15px;}


.close_detail{position:absolute;top:-25px;left:50%;display:block;line-height:50px;width:50px;text-align:center;background-color:#333;transform:translateX(-50%);border-radius:50px;z-index:700;cursor:pointer;}
.close_detail img{width:30px;margin-top:10px;}
.close_detail:hover img{opacity:0.5;}

}