@charset "utf-8";

.wrapper.main {background: #000;}
.main-container {padding-top: 100px;}

.main-cont {background: #000;padding: 32px 0;border-top: 1px solid #55ffa5;max-width: 1180px;margin: 0 auto;border-bottom: 1px solid #55ffa5;}
.main-cont > ul {max-width: 1180px;margin: 0 auto;display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;border-right: 1px solid #55ffa5;border-left: 1px solid #55ffa5;}
.main-cont > ul > li {width: 50%;}
.video-area {overflow: hidden;height: 0;padding-top: 42%;position: relative;}
.video-area video {width: 100%;position: absolute;left: 0;top: 0;}
.visual-txt {font-family: 'bely-display', sans-serif;width: 55%;color: #55ffa5;font-size: 26px;padding: 0 20px;box-sizing: border-box;line-height: 1;border-left: 1px solid #55ffa5;}
.visual-txt > ul {display: flex;padding: 18px 0;}
.visual-txt > ul.type1 {font-size: 22px;}
.visual-txt > ul.type1 li:last-child {text-align: center;}
.visual-txt > ul > li {width: calc(50% - 10px);border-left: 1px solid #55ffa5;padding-left: 20px;}
.visual-txt > ul > li:first-child {margin-right: 10px;padding-left: 0;border-left: 0;}
.visual-txt > h2 {font-family: 'Pretendard', sans-serif;text-align: center;font-weight: 700;padding: 18px 0;border-bottom: 1px solid #55ffa5;border-top: 1px solid #55ffa5;font-size: 20px;line-height: 1.2;}
.visual-txt > p {text-align: center;padding-top: 18px;text-align: left;font-size: 22px;letter-spacing: 0;}

.main-visual .swiper-slide.bg-black {max-height: 377px;background: #000;text-align: center;}
.main-visual .swiper-slide img {max-width: 100%;}

.inner-container {max-width: 1180px; margin: 0 auto;}
/*post list*/
.post-list {display: flex;flex-wrap: wrap;margin-top: 30px;/* border-top: 1px solid #000; */border-left: 1px solid #000;background: #fff;}
.main-container .post-list {margin-bottom: 100px;}
.post-list.mt-30 {margin-top: -30px;}
.post-list.pb-none {padding-bottom: 0;}
.post-list > li {/* margin-right: 20px; */width: 33.333%;/* margin-top: 40px; *//* border-top: 5px solid #ea65f4; */background: #fff;box-sizing: border-box;padding: 10px;border-top: 1px solid #000;border-right: 1px solid #000;border-bottom: 1px solid #000;margin-top: -1px;}
.post-list li:nth-child(3n) {margin-right: 0;/* border-right: 0; */}
.post-img {position: relative;height: 0;padding-top: 55%;overflow: hidden;width: 100%;}
/* .post-img::after {position: absolute;content: '';width: 100%; height: 100%;left: 50%;top: 50%;transform: translate(-50%, -50%);background: linear-gradient(90deg, #000, #277ed5, #f5d18d, #fe51ff, #55ffa5);opacity: 0;box-shadow: inset 1px 1px 20px 2000px rgba(0,0,0,0.4); transition: all .3s;} */
.post-img.type-video::before {position: absolute; content:''; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; background: url('../../images/site/video-ico.png')50% 50% no-repeat; width: 70px; height: 50px;}
.post-img img {width: 100%;height: 100%;object-fit: cover;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); transition: all .5s;}
.post-txt {margin: 5px 0 0;}
.post-txt p.dot {height: 70px;overflow: hidden;font-size: 21px;font-weight: 700;color: #181818;line-height: 1.6;}
.post-txt span.dot {display: block;height: 105px;overflow: hidden;font-size: 17px;color: #484848;line-height: 1.6;}
/* .post-list > li:hover .post-img::after {opacity: 0.8;} */
.post-list > li:hover .post-img img {transform: translate(-50%, -50%) scale(1.1);}
.hash-tag-list > li > a:hover {border: 1px solid #000;}

.post-bottom {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.hash-tag-list {display: flex;flex-wrap: wrap;width: calc(100% - 66px);}
.hash-tag-list.en {width: calc(100% - 69px);}
.hash-tag-list > li {margin-right: 10px;}
.hash-tag-list > li:last-child {margin-right: 0;}
.hash-tag-list > li > a {font-size: 14px;font-weight: 500;padding: 10px 18px;background: #55ffa5;color: #26b569;border-radius: 100px;display: block;transition: all 0.3s;border: 1px solid transparent;}
.hash-tag-list > li > a.dot {max-width: 140px;box-sizing: border-box;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.hash-tag-list > li.hash-type2 > a {background: #4382d5; color: #9fc8ff;} /*blue*/
.hash-tag-list > li.hash-type3 > a {background: #ec62f7; color: #a936b2;}/*pink*/
.hash-tag-list > li.hash-type4 > a {background: #efd394; color: #ab9155;}/*yellow*/
.post-bottom .more-btn {/* font-family: 'bely-display', sans-serif; */font-size: 20px;color: #fff;display: flex;width: 66px;justify-content: space-between;align-items: center;position: relative;background: #000;padding: 10px 15px;box-sizing: border-box;text-transform: uppercase;font-size: 15px;font-weight: 700;}
.post-bottom .more-btn.en {width: 69px;}
.post-bottom .more-btn::before {position: absolute; content: ''; width: 100%; height: 8px; background: #4fea97; bottom: 0; left: 0; z-index: -1;}

@media screen and (max-width:1200px) {
	.main-cont {padding: 32px 20px;}
	.inner-container {padding: 0 20px;}
	.visual-txt {font-size: 26px;}
	.main-visual .swiper-slide.bg-black {max-height: none;}
}
@media screen and (max-width:1023px) {
	.main-container {padding-top: 85px;}
	.visual-txt {font-size: 16px;line-height: 1.4;}
	.post-list > li {width: 50%;}
	.post-list li:nth-child(2n) {margin-right: 0;}
	.hash-tag-list > li > a {padding: 8px 16px;}
	.hash-tag-list > li > a.dot {height: 32px;}
	
	.visual-txt > ul.type1 {font-size: 16px;}
}
@media screen and (max-width:767px) {
	.visual-txt {width: 100%; margin-top: 20px; font-size: 18px;}
	.visual-txt > ul, .visual-txt > h2 {padding: 15px 0;}
	.post-list > li {width: 100%;margin-right: 0;/* margin-top: 0; */}
	.post-list li:nth-child(3n) {margin-right: 0;}
	.post-bottom .more-btn {padding: 6px 15px; font-size: 14px;}
	.hash-tag-list > li > a.dot {height: 30px;}

	.main-cont > ul {flex-direction: column;}
	.main-cont > ul > li {width: 100%; border-left: 0;}
}
@media screen and (max-width:500px) {
	.visual-txt {font-size: 14px;}
	.post-txt p.dot {height: 65px; font-size: 20px;}
	.post-txt span.dot {height: 100px; font-size: 16px;}
	.hash-tag-list > li {margin-right: 5px;}
	.hash-tag-list > li > a {padding: 6px 13px;}
}