@charset "UTF-8";
@font-face {
	font-family:'supermarket';
	src: url('/public/layout/template/font/supermarket.ttf');
	font-weight: normal;
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+0022-0E5B;
}
h1,h2,h3,h4,h5{ 
	font-family:'supermarket';
	font-weight: normal;
	color: #fff;
	margin: 0;
}

h4.modal-title{ 
	color: #000;
}
a{
	text-decoration: unset;
}


body{
	margin: 0;
	background: linear-gradient(#e0e2e1,#fff 20%);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
}

body:not(.defaultpage){
	background-image: url(/public/layout/template/images/bg.jpg);
}

body.defaultpage{
	background-size: 100% 100%;
}

.header{
	width: 100%;
	min-height: 90px;
	background: linear-gradient(#004c91,#00214e);
	border-bottom: solid 1px #00c4fb;
	box-sizing: border-box;
}
.header .inner{
	max-width: 1200px;
	margin: 0 auto;
	width: 100%;
}
.header .inner .logo{
	padding: 5px 18px 0 5px;
}
.header .inner .name{
	padding-top: 5px;
}
.header .inner .name h1{
	font-size: 1.9rem;
    /*padding-top: 8px;*/
}
.header .inner>div {
    display: flex;
    justify-content: space-between;
}
.header .inner .manual {
    width: 300px;
    padding: 5px;
    background: linear-gradient(#ffffff, #c9c8cc);
    border-radius: 30px;
    text-align: center;
}
.header .inner .manual h2 {
    font-size: 1.5rem;
    color: #000;
    margin: 0;
    line-height: 1.4;
}
div.eservice{
	width: 100%;
	height: 499px;
	background: url(/public/layout/template/images/eservice-bg.jpg)no-repeat center top;
	margin: 0 auto;
}
div.eservice .inner{
	width: 1200px;
	margin: 0 auto;
	position: relative;
	top: 25px;
	font-family: 'supermarket';
	font-size: 25px;
}
.eservice .inner .box1{
	position: absolute;
	top: 0;
	left: 20px;
}
.eservice .inner .box2{
	position: absolute;
	top: 107px;
	left: 20px;
}
.eservice .inner .box3{
	background: url(/public/layout/template/images/eservice/btn_bg.png)no-repeat center top;
	width: 462px;
	height: 127px;
	position: absolute;
	top: 288px;
	left: 20px;
}
.eservice .box3 .toptxt{
	margin-top: 13px;
	text-align: center;
}
.eservice .box3 .toptxt h2{
	font-size: 34px;
}
.eservice .box3 .btnBox{
	position: relative;
	left: 90px;
}
.eservice .box3 .btn{
	float: left;
	width: 263px;
	margin: 0 10px;
	background: linear-gradient(#ffffff,#c9c8cc);
	border-radius: 30px;
	text-align: center;
}
.eservice .box3 .btn a{
	color: #002b75;
	font-size: 25px;
	line-height: 32px;
}
.eservice .box3 .btn a:hover{
	color: #e91e63;
}
.eservice .inner .box4{
	position: absolute;
	top: 429px;
	left: 55px;
}
.eservice .inner .box4 img{
	position: relative;
	top: -3px;
}
.eservice .inner .box5{
	width: 855px;
	position: absolute;
	top: 0;
	right: 0;
}
.eservice .inner span{
	color: #1572c2;
	font-size: 30px;
}
.eservice .inner .box6{
	position: absolute;
	top: 55px;
	right: 280px;
}
.eservice .inner .box7{
	position: absolute;
	top: 424px;
	right: 168px;
}
.eservice .inner .box8{
	position: absolute;
	top: 70px;
	right: 20px;
}
.eservice .inner .box8 img{
	width: 85%;
}
.eservice a{
	color: #000;
}
.eservice a:hover{
	color: #e91e63;
}
.footer{
	width: 100%;
	min-height: 191px;
	/*background-size: 100% 100%;*/
}

@media only screen and (min-width: 540px) {
	.footer{
		background: url(/public/layout/template/images/footer-bg.jpg)no-repeat center bottom;
	}



}


.editData .form-group.row {
    text-align: right;
}
.editData .form-group.row.formBtn {
    text-align: center;
}

#frmregsiter .form-group.row {
    text-align: left;
}
@media (max-width:1199px) {
    .editData {
        padding-left: 15px;
        padding-right: 15px;
    }
    .editData .form-group.row {
        text-align: left;
    }




}
	#announceBox{
		min-height: 800px;
	}

@media only screen and (max-width: 540px) {

	div.downloadBlc>a>img{
		width: 287px!important;

	}
	.footer .top{
		height: 100%!important;
	}

	.footer{
		background: linear-gradient(#1b86be ,#00376a ,#002a74);
		border-top: solid #0394d3 1px;
		border-bottom: solid #001946 1px;
	}

	.footer .bottom h6{
		font-size: 13px;
	}

	.footer .top .box{
		padding: 5px 0px;
		border-bottom: 1px solid #fff;
	}
		#announceBox{
		min-height: auto;
	}

	.header .inner .name h1{
		padding-top: 0px!important;
		font-size: 20px;
		overflow-wrap: break-word;

	}

	.header .inner .name{
		max-width:294px;
	}

	div.list-group-item-head-eservice{
		width: 100%!important;
	}
	div.header-title-eservice{
		padding-top: 0px!important;
	}

	div.member-menu-viewmember{
		padding-top: 14px;
		padding-bottom: 14px;
	}
}
	div.list-group-item-head-eservice{
		width: 80%;
	}                

.defaultpage .footer{                                
	margin-top: 20px;

}
.footer .top{
	max-width: 1200px;
	margin: 0 auto;
	height: 160px;
	width: 100%
}
.footer .top .box{
	margin-top: 5px;
	/*float: left;*/
}
/*.footer .top .box:nth-child(1){
	width: 378px;
}
.footer .top .box:nth-child(2){
	width: 358px;
}
.footer .top .box:nth-child(3){
	width: 299px;
}
.footer .top .box:nth-child(4){
	width: 165px;
	}*/
	.footer .top .ico{
		float: left;
		width: 50px;
		padding-top: 8px;
	}
	.footer .top .category{
		float: left;
	}
	.footer .category h3{
		font-size: 25px;
		padding-top: 10px;
	}
	.footer .top .txt{
		float: left;
		width: 100%;
		min-height: 83px;
	}
	.footer .txt h4{
		font-size: 18px;
		line-height: 24px;
	}
	.footer .bottom{
		max-width: 1200px;
		margin: 0 auto;
		min-height: 50px;
		text-align: center;
		width: 100%
	}
	.footer .bottom h6{
		font-size: 14px;
		font-weight: normal;
		color: #fff;
		margin: 0;
		padding-top: 8px;
	}


		div.avatar{
		padding-left: 0px;
   		padding-right: 0px;
	}
	div.ddMember{
		height: 100%;
		padding-left: 0px;
	}
	
	div.ddMember>div#member_dropdown{
		padding-left: 0px;
	}	

	div.ddMember>div#member_dropdown>button,div.avatar>img{
		height: 45px;
	}

div.category a,div.bottom a{
	color: #ffffff;
	text-decoration:none;
}

div.category a:hover,div.bottom a:hover{
	color: #ffeb3b;
	text-decoration:none;
}


#exampleModalLabel{
	color: #000000;
}


.list-group-item-head-eservice {
    position: relative;
    margin: 0px auto;
    display: block;
    padding: 0.75rem 3rem;
    font-size: 20px;
    color: #ffffff;
    background: linear-gradient(#0f76d3,#0f58a7);
    border: 1px solid #11529c;
    border-radius: 0 0 1.5rem 1.5rem!important;
    margin-bottom: 10px!important;
    -webkit-box-shadow: 0px 5px 10px -5px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 5px 10px -5px rgba(0,0,0,0.4);
    box-shadow: 0px 5px 10px -5px rgba(0,0,0,0.4);
}

div.oss-head>h3{
	color: #000000;
}
div.header-title-eservice{
	padding-top: 20px;
}

div.btn-member-register{
	padding-left: 6px;
}




@media only screen and (max-width: 1366px) {
	.footer{
		background-size: auto;
	}




}
              
@media only screen and (min-width: 1600px) {
	.footer{
		background-size: 100%;
	}



}

div.downloadBlc{
	text-align: center;
	
}

div.downloadBlc>a>img{
	width:471px;

}
div.panel-heading>h1{
	color: black;
}

 div.panel-heading{
	padding-top: 12px;
    padding-bottom: 15px;
 }

/************************************/
.top-bar{
	width: 80%;
	margin: 0px auto;
}
div.list-group-item-head-eservice.width-left{
	width: 65%;
	display: flex;
    align-items: center;
}
div.list-group-item-head-eservice.width-right{
	width: 30%;

	button{
		/* font-family: 'supermarket'; */
		color: black;
    	font-size: 1.3rem;
		border-radius: 2rem;
		cursor: pointer; /* ทำให้เป็นรูปมือ */
        padding: 0;
	}
}
/************************************/