/* Import Kanit Font */
@import url('https://fonts.googleapis.com/css?family=Kanit:100,200,300,400,500,600,700&subset=thai');

html {
	overflow-x: hidden;
}

body {
/*	background: url(../image/v02/bg-mini.png);*/
	background-repeat: repeat;
	background-size: 60%;
	background-color: #fff;
}

html,
body {
	height: 100%;
	overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Kanit', sans-serif;
	margin: 0 0 35px;
	letter-spacing: 1px;
}


/* Navbar */
.navbar-custom.other-active, .navbar-collection--mobile.other-active {
	background-color: transparent;
	color: #2B3043;
	border-bottom: 1px solid rgba(186, 186, 186, .5);
}

.navbar-left .navbar-list-left li.navbar-item a.navbar-link,
.navbar-right .navbar-list-right li.navbar-item a.navbar-link,
.navbar-right .navbar-list-right li.navbar-item a.navbar-link:hover, .navbar-right .navbar-list-right li.navbar-item a.navbar-link:focus,
.mobile-top-nav-link {
	color: #2B3043;
}

.count-noti-user-collection span {
	color: #fff;
}

.navbar-light .navbar-nav .nav-login-btn2 .user-info-collection img.user-info-pic {
	border-color: #2B3043;
}
/* /Navbar */


.content-collection {
	margin-bottom: 30px;
	margin-top: 30px;
}

.head-section-container {
	padding-bottom: 30px;
	border-bottom: 5px solid #273B72;
}

.head-section-txt-1,
.head-section-txt-2 {
	font-weight: 500;
	margin-bottom: 0;
}

.head-section-txt-1 {
	color: #273B72;
}

.head-section-txt-2 {
	color: #F21529;
}

.all-content-txt-container {
	padding-top: 30px;
	padding-bottom: 30px;
	border-bottom: 10px solid #273B72;
}

.each-content-container {
	margin-bottom: 15px;
}

.each-content-img {
	width: 80%;
	display: block;
}

.each-content-img.img-left {
	margin-left: auto;
}

.each-content-txt-container {
	color: #273B72;
}

.each-content-head-txt {
	margin-bottom: 10px;
	font-weight: 400;
}

.do-dont-container {
	padding-top: 50px;
	padding-bottom: 50px;
}

.do-dont-head-container {
	text-align: center;
}

.do-dont-head-txt {
	margin-bottom: 0;
	font-weight: 400;
	color: #f21529;
}

.do-dont-sub-head-txt {
	margin-bottom: 0;
	font-weight: 300;
	color: #262626;
}

.do-dont-body-container {
	margin-top: 40px;
	margin-bottom: 40px;
}

.do-dont-body-head-txt-container {
	background-color: #E3E3E3;
}

.do-dont-body-head-txt {
	margin-bottom: 0;
	text-align: center;
	font-size: 1.7rem;
	color: #273B72;
	padding: .5rem 1rem;
	font-family: 'Kanit', sans-serif;
}

.each-do-body-container {
	border: 4px solid #273B72;
	flex: 0 0 49%;
	max-width: 49%;
}

.each-do-body-container:nth-child(even) {
	margin-left: 1%;
}

.each-do-body-container:nth-child(odd) {
	margin-right: 1%;
}

.do-dont-body-container .row {
	margin-left: 0;
	margin-right: 0;
}

.each-do-head-body-container {
	margin-left: -15px;
	margin-right: -15px;
	background-color: #273B72;
}

.each-do-head-body-txt {
	text-align: center;
	color: #fff;
	font-family: 'Kanit', sans-serif;
	font-size: 1.7rem;
	margin-bottom: 0;
	padding: .5rem 1rem;
}

.each-do-content-list {
	padding-left: 20px;
}

.each-do-content-list li p {
	margin-bottom: 0;
}

.each-do-content-img-container {
	text-align: center;
	margin-top: 25px;
	margin-bottom: 25px;
}

.each-do-content-img {
	max-width: 70%;
}

.bottom-container {
	max-width: 85%;
	margin: auto;
}

.bottom-img-container,
.bottom-txt-container {
	display: inline-block;
	vertical-align: middle;
}

.bottom-img-container {
	width: 20%;
}

.bottom-txt-container {
	width: 75%;
	border-top: 7px solid #f21529;
	padding-top: 10px;
}

.bottom-img {
	width: 100%;
}

.bottom-txt {
	margin-bottom: 0;
	font-family: 'Kanit', sans-serif;
	font-size: 1.8rem;
	color: #273B72;
	font-weight: 600;
}

.bottom-txt span {
	color: #f21529;
}

.head-number-txt-container {
	width: 50px;
	height: 50px;
	line-height: 50px;
	background-color: #273B72;
	border-radius: 100%;
	text-align: center;
}

.head-number-txt {
	display: inline-block;
	color: #fff;
	margin-bottom: 0;
	font-weight: 400;
	line-height: 50px;
}

.how-to-create-head-txt {
	margin-bottom: 45px;
	font-weight: 500;
	color: #273B72;
}

.each-content-txt {
	color: #273B72;
	margin-bottom: 0;
	font-size: 1.15rem;
	font-family: 'Kanit', sans-serif;
	font-weight: 400;
}

.each-edit-content-txt {
	font-weight: 500;
	font-size: 1.45rem;
}

.each-content-txt span {
	color: #f21529;
}

.each-content-txt .suggest-content {
	display: block;
	color: #273B72;
	font-size: 1rem;
	margin-top: 20px;
}

.each-edit-content-container {
	margin-bottom: 25px;
}

.each-content-edit-img {
	max-width: 60%;
}

.other-content-container {
	padding-top: 30px;
	padding-bottom: 30px;
	border-bottom: 10px solid #273B72;
}

.other-content-container:last-child {
	border-bottom: none;
}

.other-content-head-txt {
	margin-bottom: 0;
	font-weight: 600;
	color: #273B72;
}

.othet-content-txt {
	margin-bottom: 0;
	font-size: 1.3rem;
	color: #484848;
	font-family: 'Kanit', sans-serif;
	font-weight: 500;
}

.othet-content-txt span {
	color: #f21259;
}

.other-img-container-d,
.other-img-container-m{
	text-align: center;
}

.other-img-container-d .other-img-container {
	width: 70%;
}

.other-img-container-m .other-img-container {
	width: 100%;
}

@media(min-width: 320px) {
	
	.each-do-body-container {
		flex: 0 0 100%;
		max-width: 100%;
		border: none;
	}
	
	.each-do-body-container:nth-child(odd) {
		margin-right: 0%;
	}
	
	.each-do-body-container:nth-child(even) {
		margin-left: 0%;
	}
	
	.do-dont-body-head-txt-container {
		background: #273B72;
	}
	
	.do-dont-body-head-txt {
		color: #fff;
		text-align: left;
	}
	
	.each-do-head-body-container {
		display: none;
	}
	
	.each-do-head-body-txt {
		color: #273B72;
		text-align: left;
	}
	
	.each-do-head-body-txt.dont {
		color: #f21529;
	}
	
	.do-dont-body-container {
		margin-left: -15px;
		margin-right: -15px;
	}
	
	.all-content-txt-container-d {
		display: none;
	}
	
	.each-content-img {
		margin: auto;
	}
	
	.head-section-txt-1,
	.head-section-txt-2 {
		font-size: 1.45rem;
	}
	
	.each-content-img-container {
		margin-bottom: 15px;
	}
	
	.other-img-container-d {
		display: none;
	}
	
	.other-img-container-m {
		display: block;
	}
	
	.other-content-head-txt {
		font-size: 1.8rem;
	}
	
	.othet-content-txt {
		font-size: 1rem;
		margin-bottom: 15px;
	}
	
	.bottom-txt {
		font-size: 1rem;
	}
	
	.head-number-txt-container,
	.each-edit-content-txt {
		display: inline;
	}
	
	.head-number-txt-container {
		background-color: transparent;
		line-height: inherit;
	}
	
	.each-edit-content-txt {
		font-size: 1.15rem;
	}
	
	.head-number-txt {
		color:#273B72;
		line-height: 1;
	}
}

@media(min-width: 768px) {
	
	.head-number-txt-container,
	.each-edit-content-txt {
		display: block;
	}
	
	.head-number-txt-container {
		background-color: #273B72;
		line-height: 50px;
	}
	
	.head-number-txt {
		color: #fff;
		line-height: 50px;
	}
	
	.each-edit-content-txt {
		font-size: 1.45rem;
	}
	
	.each-do-body-container {
		border: 4px solid #273B72;
		flex: 0 0 49%;
		max-width: 49%;
	}
	
	.each-do-body-container:nth-child(odd) {
		margin-right: 1%;
	}
	
	.each-do-body-container:nth-child(even) {
		margin-left: 1%;
	}
	
	
	.do-dont-body-head-txt-container {
		background: #E3E3E3;
	}
	
	.do-dont-body-head-txt {
		color: #273B72;
		text-align: center;
	}
	
	.each-do-head-body-container {
		display: block;
	}
	
	.each-do-head-body-txt {
		color: #fff;
		text-align: center;
	}
	
	.do-dont-body-container {
		margin-left: 0px;
		margin-right: 0px;
	}
	
	.each-do-head-body-container-m {
		display: none;
	}
	
	.all-content-txt-container-d {
		display: block;
	}
	
	.all-content-txt-container-m {
		display: none;
	}
	
	.head-section-txt-1,
	.head-section-txt-2 {
		font-size: 2.5rem;	
	}
	
	.each-content-img-container {
		margin-bottom: 0;
	}
	
	.other-img-container-d {
		display: block;
	}
	
	.other-img-container-m {
		display: none;
	} 
	
	.other-content-head-txt {
		font-size: 2.2rem;
	}
	
	.othet-content-txt {
		font-size: 1.4rem;
	}
	
	.bottom-txt {
		font-size: 1.8rem;
	}
}