/* CSS Document */

.wrapSlide {
	display: flex;
	max-width: 1200px;
	margin: 0 auto;
}

.wrapSlide .main-slide { width: 54%; background: #ebebeb;}
.wrapSlide .main-slide img { width: 100%;}

.wrapSlide .sub-slide { width: 46%;}
.wrapSlide .sub-slide .slick-track {
  transform: unset !important;
}

.wrapSlide .sub-slide .slick-slide {
	float: none;
	width: 100% !important;
}

.slick-dotted.slick-slider { margin-bottom: 0;}

.wrapSlide .sub-slide .slick-current { background: #ebebeb;}

.slick-prev, .slick-next {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #FFF;
	z-index: 90;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
    color: transparent;
    outline: none;
    background: #FFF;
}
.slick-prev:before, .slick-next:before { 
	font-family: FontAwesome;
	color: #0063b2;
	font-weight: bold;
	font-size: 1.5rem;
	line-height: 1;
	opacity: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}
.slick-prev { left: 0.5rem;}
.slick-prev:before { content: '\f104';}
.slick-next { right: 0.5rem;}
.slick-next:before { content: '\f105';}

.slick-dots { 
	bottom: auto;
	top: 70%;
	z-index: 90;
}
.slick-dots li { width: 10px; height: 10px;}
.slick-dots li button { padding: 0;}
.slick-dots li button:before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	background: #FFF;
	border-radius: 50%;
	font-size: 0;
	opacity: 1;
}
.slick-dots li.slick-active button:before {
	opacity: 1;
	background: #0063b2;
}


.wrapSlide a { 
	text-decoration: none;
	color: #333;
}
.topSliders .thum-img { 
	height: 324px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	background: #FFF;
}
.wrapSlide .thum-img img {
	display: block;
	object-fit: cover;
}
.thum-title { 
	background: #ebebeb;
	padding: 1rem;
}
.thum-title ul {
	display: flex;
	align-items: center;
	gap: 0 0.5rem;
	margin-bottom: 0.5rem;
}
.thum-title ul li {
	padding: 0.2rem 1rem;
	font-size: 80%;
	color: #FFF;
	border-radius: 3rem;
	line-height: 1;
}
.thum-title ul li.thum-date { background: #333;}
.thum-title ul li.cate01 { background: var(--cate01_color);}
.thum-title ul li.cate02 { background: var(--cate02_color);}
.thum-title ul li.cate03 { background: var(--cate03_color);}
.thum-title ul li.cate04 { background: var(--cate04_color);}

.thum-title p { 
	font-weight: bold;
	font-size: 1.1rem;
	line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; 
    overflow: hidden;
	text-overflow: ellipsis;	
}

.sub-slide { 
	padding: 2rem;
	box-sizing: border-box;
	border: solid 2px;
}
.wrapSlide .sub-slide .slick-track { width: 100%;}

.cate01 .sub-slide { border-color:var(--cate01_color); }
.cate02 .sub-slide { border-color:var(--cate02_color); }
.cate03 .sub-slide { border-color:var(--cate03_color); }
.cate04 .sub-slide { border-color:var(--cate04_color); }

.sub-slide li {
	font-weight: bold;
	line-height: 1.4;
}
.sub-slide li:not(:first-child) { padding-top: 0.5rem;}
.sub-slide li:not(:last-child) {
	padding-bottom: 0.5rem;
	border-bottom: dashed 1px #a6a6a6;
}
.sub-slide li .date {
	display: block;
	font-size: 80%;
	color: #a6a6a6;
	margin-bottom: 0.2rem;
}

.btn-wrap {
	display: flex;
	justify-content: flex-end;
	max-width: 1200px;
	margin: 0 auto;
	padding-top: 2rem;
}
.btn-wrap ul { 
	display: flex;
	justify-content: flex-end;
	width: 46%;
}
 
.tab-wrap { 
	margin-bottom: 3rem;
}

.wrapSlide {visibility: hidden; height: 0; }
.wrapSlide.show { visibility: inherit; height: auto;}

@media (max-width: 820px){
	.wrapSlide { max-width: 100%;}
	.btn-wrap { max-width: 100%;}
	.btn-wrap ul { width: 100%;}
	.wrapSlide { flex-direction: column;}
	.wrapSlide .main-slide { width: 100%;}
	.wrapSlide .sub-slide { width: 100%;}
	
	.slick-dots { top: 68%;}
}

@media (max-width: 768px){
	.topSliders .thum-img { height: 50vw;}
	.slick-dots { top: 70%;}
	.tab-wrap { padding-top: 0;}
}
@media (max-width: 462px){
	.slick-dots { top: 56%;}
}


