@charset "utf-8";

.main_list{margin: 240px 0 150px;}
.main_list ul.list.list{display: flex; gap: 80px 35px; flex-wrap: wrap;}
.main_list ul.list li{width: calc(100%/3 - 70px/3);transition: 0.3s; position: relative;}
.main_list ul.list li:hover a{opacity: 0.5; transition: 0.3s;}
.main_list ul.list li a{width: 100%; height: 100%; display: inline-block;}
.main_list ul.list li .img{width: 100%;border-radius: 10px; overflow: hidden; margin-bottom: 25px;}
.main_list ul.list li img{width: 100%;}
.main_list ul.list li .txt h4{color: #222; font-weight: 500; font-size: 1.4rem;}
.main_list ul.list li .txt h3{color: #7a5f3d; font-size: 2rem; margin: 5px 0 15px;}
.main_list ul.list li .txt p.cont{display: flex; gap: 2px; color: #666; font-weight: 500; font-size: 1.4rem;}
.main_list ul.list li .txt p.date{margin-top: 15px; font-size: 1.4rem; font-weight: 400;color: #999;}

#custom-cursor {position: fixed;width: 184px;height: 184px;border-radius: 50%;background-color: #d8a564;color: #fff;font-size: 14px;text-align: center;line-height: 184px;pointer-events: none;transform: translate(-20%, -25%);z-index: 9999;display: none;}
#custom-cursor span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-weight:600;font-size:16px;color:#fff;pointer-events:none;display: inline-block;width: 100%;}
body.custom-cursor-on {cursor: none;}

@media screen and (max-width:1600px){
    #custom-cursor {width: 150px; height: 150px; line-height: 150px;}
    #custom-cursor span{font-size: 14px;}
}
@media screen and (max-width:1280px){
    .main_list{margin: 200px 0 100px;}
    .main_list ul.list li{width: calc(100%/2 - 35px/2);}
}
@media screen and (max-width:780px){
    .main_list{margin: 160px 0 100px;}
    .main_list ul.list{gap: 50px 20px;}
    .main_list ul.list li{width: calc(100%/2 - 20px/2);}
    .main_list ul.list li .txt h3{font-size: 1.8rem; margin: 5px 0 10px;}
    .main_list ul.list li .txt p.date{margin-top: 10px; font-size: 1.4rem;}
}
@media screen and (max-width:600px){
    .main_list{margin: 120px 0 80px;}
    .main_list ul.list li{width: 100%;}
}
@media screen and (max-width:480px){
    .main_list ul.list{gap: 30px;}
    .main_list ul.list li .img{margin-bottom: 20px;}
    .main_list ul.list li .txt p.cont{font-size: 1.3rem;}
    .main_list ul.list li .txt p.date{font-size: 1.3rem;}
    #custom-cursor {width: 120px; height: 120px; line-height: 120px;}
    #custom-cursor span{font-size: 12px;}
}