@charset "utf-8";
/* CSS Document */

.article {
	margin: 0;
	padding: 0;
	min-height: 669px;
	background: url(../images/article/bg.jpg) top center no-repeat;
}

.article .top {
	margin: 0;
	padding: 0;
	padding-top: 69px;
	padding-bottom: 40px;
	font: 45px/45px 'lineseed', Arial, sans-serif;
	color: #fff;
	text-align: center;
}

.article .top .text-yellow {
	color: #f5ff87;
}

.article .mid {
	margin: 0;
	padding: 0;
	position: relative;
}

.article .mid .btn-left {
	position: absolute;
	left: 50px;
	top: 150px;
}

.article .mid .btn-left img {
	max-width: 100%;
	height: auto;
}

.article .mid .btn-right {
	position: absolute;
	right: 50px;
	top: 150px;
}

.article .mid .btn-right img {
	max-width: 100%;
	height: auto;
}

.article-block {
	background: #fff;
	padding: 18px;
	/* width:260px; */
	min-height: 405px;
}

.article-block .pic {
	margin: 0;
	padding: 0;
}

.article-block .pic img {
	max-width: 100%;
	height: auto;
}

.article-block .text {
	margin: 0;
	padding: 0;
	margin: 15px 0px;
	font: 14px/18px 'Kanit', Arial, sans-serif;
}

.article-block .text a {
	color: #333;
}

.article-block .social {
	margin: 0;
	padding: 0;
	margin-top: 5px;
}

.article .bottom {
	margin: 0;
	padding: 0;
	text-align: right;
}

@media (max-width: 374px) {
	.article .mid .btn-left {
		left: 0;
	}

	.article .mid .btn-right {
		right: 0;
	}
}

@media (min-width: 375px) and (max-width: 419px) {
	.article .mid .btn-left {
		left: 0;
	}

	.article .mid .btn-right {
		right: 0;
	}
}

@media (min-width: 420px) and (max-width: 575px) {
	.article .mid .btn-left {
		left: 0;
	}

	.article .mid .btn-right {
		right: 0;
	}
}

@media (min-width: 576px) and (max-width: 767px) {
	.article .mid .btn-left {
		left: 0;
	}

	.article .mid .btn-right {
		right: 0;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.article .mid .btn-left {
		left: 0;
	}

	.article .mid .btn-right {
		right: 0;
	}
}

@media (min-width: 992px) and (max-width: 1199px) {

	.article .mid .justify-content-lg-center {
		-ms-flex-pack: left !important;
		justify-content: left !important;
	}
}

@media (min-width: 1200px) {
	...
}




/* ******************************************************* */
/* -------------------------------------- */

@media (min-width: 375px) and (max-width: 419px) {
	.article .owl-theme .owl-nav {
		left: -45px !important;
		right: -45px !important;
		margin-top: -10px !important;
	}

	.article .top {
		padding-top: 30px;
		padding-bottom: 30px;
		font: 35px/35px 'lineseed', Arial, sans-serif;
	}
	.article  .owl-carousel .owl-dots {
		bottom: -25px;
	}
	.article .bottom {
		margin-top: 40px;
	}
	.article {
		min-height: 629px;
	}
}

@media (min-width: 420px) and (max-width: 575px) {
	.article .owl-theme .owl-nav {
		left: -45px !important;
		right: -45px !important;
		margin-top: -10px !important;
	}

	.article .top {
		padding-top: 30px;
		padding-bottom: 30px;
		font: 35px/35px 'lineseed', Arial, sans-serif;
	}
	.article  .owl-carousel .owl-dots {
		bottom: -25px;
	}
	.article .bottom {
		margin-top: 40px;
	}
	.article {
		min-height: 629px;
	}
}

@media (min-width: 576px) and (max-width: 767px) {
	.article .owl-theme .owl-nav {
		left: -45px !important;
		right: -45px !important;
		margin-top: -10px !important;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.article .owl-theme .owl-nav {
		left: -45px !important;
		right: -45px !important;
		margin-top: -10px !important;
	}
	.article .top {
		padding-top: 30px;
		padding-bottom: 30px;
		font: 35px/35px 'lineseed', Arial, sans-serif;
	}
	.article  .owl-carousel .owl-dots {
		bottom: -25px;
	}
	.article .bottom {
		margin-top: 40px;
	}
	.article-block {
		min-height: 455px;
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
	.article .owl-theme .owl-nav {
		left: -45px !important;
		right: -45px !important;
		margin-top: -10px !important;
	}
}

@media (min-width: 1281px) and (max-width: 1366px) {
	.article .owl-theme .owl-nav {
		left: -45px !important;
		right: -45px !important;
		margin-top: -10px !important;
	}
}

@media (min-width: 1367px) and (max-width: 1440px) {
	.article .owl-theme .owl-nav {
		left: -45px !important;
		right: -45px !important;
		margin-top: -10px !important;
	}
}

@media (min-width: 1441px) and (max-width: 1600px) {
	.article .owl-theme .owl-nav {
		left: -45px !important;
		right: -45px !important;
		margin-top: -10px !important;
	}
}

@media (min-width: 1601px) and (max-width: 1920px) {
	.article .owl-theme .owl-nav {
		left: -45px !important;
		right: -45px !important;
		margin-top: -10px !important;
	}
}