@charset "utf-8";

.eventMain{padding: 175px 0 0;position:relative;overflow: hidden;}
.eventMain:after{content:'';width:100%;height: 400px; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 70%);
/*background: url('../images/event-effect-w.png') repeat center;*/ position: absolute;bottom:0;left: 0;}
.eventMain .title{font-size:60px;text-align: center;line-height: 1;margin-bottom:215px;color:#a0a0a0;font-family: 'BMDOHYEON';font-weight: normal;}
.eventMain .title > span{color:#8b0028;}
.eventMain .list{max-width: 1560px;margin:0 auto;}
.eventMain .list > ul{display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 20px;}
.eventMain .list > ul li{position:relative;}
.eventMain .list > ul li:nth-child(3n-1){top: -100px;}
.eventMain .list > ul li:nth-child(3n){top:-50px;}

.eventMain .list > ul li .thumb{overflow: hidden;}
.eventMain .list > ul li:hover .thumb{animation: swing-in-top-bck 2s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;}


@keyframes swing-in-top-bck {
  0% {
            transform: scale(1);
            filter: blur(1px);
  }
  100% {
            transform: scale(1.005);
            filter: blur(0px);
  }
}


.eventMain .list > ul li .thumb img{width:520px;height:670px;object-fit: cover;transition:all ease 1s;}
.eventMain .list > ul li:hover .thumb img{transform: scale(1.1);}
.eventMain .list > ul li .con{position: absolute;left:30px;bottom: 0;text-align: left;opacity:0;transition:all ease 1s;padding-right:50px;max-width: 98%;}
.eventMain .list > ul li .subjectText{font-size:27px;color:#fff;font-family: 'Noto Medium';display: block;padding-bottom: 25px;margin-bottom: 30px;line-height: 1.25;position: relative;}
.eventMain .list > ul li .subjectText:after{content:'';width:0;height:1px;background:#fff;position:absolute;bottom:0;left:0;transition:all ease 0.85s;}
.eventMain .list > ul li .subjectText > span{display: -webkit-box;word-wrap: break-word;-webkit-line-clamp: 2;-webkit-box-orient: vertical;text-overflow: ellipsis;overflow: hidden;}
.eventMain .list > ul li .content{font-size:18px;color:#fff;font-family: 'Noto Light';opacity: 0.7;line-height:1.5;display: -webkit-box;word-wrap: break-word;-webkit-line-clamp: 3;-webkit-box-orient: vertical;text-overflow: ellipsis;overflow: hidden;}
.eventMain .list > ul li .date{display: none;}
.eventMain .list > ul li .readMore{display: none;}
.eventMain .list > ul li:nth-child(n+10){opacity: 0;height:0;overflow: hidden;}

.eventMain .list > ul li:hover .thumb img{filter:brightness(0.6);}
.eventMain .list > ul li:hover .con{opacity:1;bottom:25px;}
.eventMain .list > ul li:hover .subjectText:after{width:100%;}

.eventMain .list > ul li:nth-last-child(1):hover .con,
.eventMain .list > ul li:nth-last-child(2):hover .con,
.eventMain .list > ul li:nth-last-child(3):hover .con{opacity: 0;}
/* ���� more
.eventMain .more{text-indent: 999px;
display: block !important; transition:cubic-bezier(0, 0.9, 0.48, 0.96) all .5s;
background-position: center !important; overflow:hidden;
border: 4px solid #fff; position: absolute; height:55px; width:55px; left:50%;bottom: 200px;z-index: 9;  border: 3px solid #8b0028;color: #8b0028;font-size: 17px;border-radius: 100px;padding: 12px 27px;background: rgba(0,0,0,0) url('../images/c-plus.png') no-repeat 85% center;line-height: 1.7;}
*/
.eventMain .more{position: absolute;left:50%;bottom: 200px;z-index: 9;display: inline-block;}
.eventMain .more > p{width: 245px;margin-left: -75px;transition:all ease 1s;}
.eventMain .more strong,
.eventMain .more span{background-color:rgba(71, 71, 71, 0.8);background-repeat:no-repeat;display: inline-block;vertical-align: middle;background-position:center;transition: ease all 0.5s;}
.eventMain .more strong{color: rgba(255, 255, 255, 0.7);font-size: 20px;width:70px;position:relative;right:-77px;border-radius:50px;opacity:0;overflow: hidden;white-space: nowrap;margin-right: 7px;height: 70px;line-height: 70px;padding: 0 0;}
.eventMain .more strong i{opacity:0;transition:all ease 1s;}
.eventMain .more span{background-image: url('./../images/w-plus.png') ; width: 70px;border-radius: 100%; height: 70px;}
.eventMain .more:hover > p{width: 245px;margin-left: -120px;}
.eventMain .more:hover span{transform:rotate(180deg)}
.eventMain .more:hover strong{border-radius: 50px;padding: 0 50px;opacity:1;right:0;opacity:1;width:auto;transition-delay:.25s;}
.eventMain .more:hover strong i{opacity:1;transition-delay:.5s;}

@media (max-width: 1600px) {
.eventMain .inner{padding:0 25px;}
}

@media (max-width: 1400px) {
.eventMain{padding-top:135px;}    
.eventMain .title{font-size:50px;margin-bottom: 190px;}    
.eventMain .list > ul{grid-gap:12px;}
.eventMain .list > ul li .thumb img{width:420px;height:540px;}
.eventMain .list > ul li .subjectText{font-size:22px;margin-bottom:15px;padding-bottom:12px;}
.eventMain .list > ul li .content{font-size:15px;}
}

@media (max-width: 1000px) {
.eventMain{padding-top:100px;}       
.eventMain .title{font-size:37px;margin-bottom: 170px;}
.eventMain .list > ul li .thumb img{height:375px;}
.eventMain .list > ul li .subjectText{font-size:17px;margin-bottom:15px;padding-bottom:12px;}
.eventMain .list > ul li .content{font-size:12px;margin-bottom:12px;}
.eventMain .more{width:115px;font-size:12px;background-size: 12px;margin-left: -57.5px;padding: 7px 22px;bottom: 100px;}
}

@media (max-width: 767px) {
.eventMain .inner{padding:0 10px;}    
.eventMain .title{margin-bottom:150px;}    
.eventMain .list > ul{grid-gap:10px;grid-template-columns: repeat(2, 1fr);}
.eventMain .list > ul li:nth-child(3n-1){top: 0;}
.eventMain .list > ul li:nth-child(3n){top:0;}
.eventMain .list > ul li:nth-child(2n-1){top: -50px;}
.eventMain .list > ul li:nth-child(2n){top: -100px;}
.eventMain .list > ul li .con{opacity:1;bottom: 12px !important;left: 15px;}
.eventMain .list > ul li .subjectText:after{width:100%;}
.eventMain .list > ul li .subjectText{font-size:16px;}
.eventMain .list > ul li .content{font-size:13px;}
.eventMain .list > ul li .thumb img{height:287px;}
.eventMain .list > ul li + li + li + li + li + li + li{display:none;}
.eventMain .more{bottom:75px;width: auto;font-size: 13px;left: 50%;padding: 0;margin-left: -25px;}    

.eventMain .more strong{display:none;}  
.eventMain .more > p{width:50px !important;margin-left: 0 !important;}  
.eventMain .more span{width:50px;height:50px;}  
}