@layer layout {
	.l-guide-cont {
		width: 100%;
		gap: 30px;
	}
	@media (max-width: 999px) {
		.l-guide-cont {
			gap: 20px;
		}
	}
}

/* --------- News Archive --------- */
@layer page {
 .sec-news-archive .l-inner ul{
  display: flex;
  flex-wrap: wrap;
  gap: 50px 20px;
 }
 .sec-news-archive .l-inner ul li{
  width: calc((100% - 60px) / 4);
 }
 .sec-news-archive .l-inner ul li a:hover{
  opacity: 0.7;
 }
 .sec-news-archive .thumbnail{
  width: 245px;
  height: 245px;
  background-size: cover;
  background-position: center center;
  border-radius: 10px;
  margin: 0 auto;
 }
 .sec-news-archive .title{
  margin: 15px 0 0;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.8;
  text-decoration: underline;
 }
 .sec-news-archive .news-info{
  margin: 20px 0 0;
  display: flex;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
 }
 .sec-news-archive .news-info .cat{
  position: relative;
  padding: 0 0 0 10px;
 }
 .sec-news-archive .news-info .cat:before{
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 1px;
  height: 10px;
  transform: rotate(45deg);
  background: #333;
 }
 .pagination{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 50px 0 0;
 }
 .pagination span,
 .pagination a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: #F5F5F5;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
 }
 .pagination span.current,
 .pagination a:hover{
  color: #fff;
  background: linear-gradient(to bottom left, #39B2CA, #297BD5);
 }
 .pagination a.next,
 .pagination a.prev{
  width: 100px;
  gap: 10px;
  color: #fff;
  background: linear-gradient(to bottom left, #39B2CA, #297BD5);
 }
 .pagination a.next .c-arrow-box,
 .pagination a.prev .c-arrow-box{
  width: 30px;
  height: 30px;
 }
 .pagination a.next .c-arrow-box > i,
 .pagination a.prev .c-arrow-box > i{
  width: 8px;
  height: 8px;
  background-image: url("../images/common/icon-arrow-right-bl.svg");
 }
 .pagination a.prev .c-arrow-box > i{
  transform: rotate(180deg);
 }
 @media (max-width: 768px) {
  .sec-news-archive .l-inner ul{
   display: grid;
   gap: 30px;
  }
  .sec-news-archive .l-inner ul li{
   width: 100%;
  }
  .sec-news-archive .thumbnail{
   width: 100%;
  }
  .sec-news-archive .title{
   margin: 10px 0 0;
  }
  .sec-news-archive .news-info{
   margin: 5px 0 0;
  }
  .pagination{
   flex-wrap: wrap;
   gap: 10px;
  }
 }
}

/* --------- News Single --------- */
@layer page {
 .sec-news-single .l-inner{
  display: grid;
  gap: 30px;
 }
 .sec-news-single .l-inner .title{
  font-size: 24px;
  font-weight: 500;
  line-height: 1.1;
  border-bottom: solid 1px;
  padding: 0 0 20px;
 }
 .sec-news-single .l-inner .news-info{
  display: flex;
  justify-content: right;
  gap: 5px;
  color: #666;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
 }
 .sec-news-single .l-inner .news-info .cat{
  position: relative;
  padding: 0 0 0 15px;
 }
 .sec-news-single .l-inner .content{
  margin: 20px 0 0;
 }
 .sec-news-single .l-inner .content p{
  font-size: 14px;
  line-height: 1.8;
  margin: 0 0 15px;
 }
 .sec-news-single .l-inner .content p strong{
  font-weight: bold;
 }
 .sec-news-single .l-inner .content h2{
  font-size: 18px;
  font-weight: 500;
  padding: 0 0 20px;
  margin: 0 0 30px;
  border-bottom: solid 1px;
 }
 .sec-news-single .l-inner .content h3{
  position: relative;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  padding: 0 0 0 10px;
  margin: 0 0 20px;
 }
 .sec-news-single .l-inner .content h3:before{
  position: absolute;
  width: 1px;
  height: 18px;
  content: "";
  background: #242526;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
 }
 .sec-news-single .l-inner .content h4{
  font-size: 16px;
  font-weight: bold;
  line-height: 1.7;
  margin: 0 0 20px;
 }
 .sec-news-single .l-inner .content > *:last-child{
  margin: 0;
 }
	@media (max-width: 1200px) {
		
	}
	@media (max-width: 999px) {
		
	}
	@media (max-width: 768px) {
  .sec-news-single .l-inner{
   gap: 20px;
  }
  .sec-news-single .l-inner .content{
   margin: 0;
  }
	}
}