/*navigator menu*/

#nav-ul{

	list-style-type:none;

	width:1170px;

	margin:5px;

	margin-left:auto;

	margin-right:auto;

	padding:0;

	overflow:hidden;

	background-color:#194c7f;	

}

#client-ul{

	list-style-type:circle;

	line-height:1.5;

	margin-bottom:0px;

}

.nav-li{

	float:left;

}

.nav-a{

	display:block;

	color:white;

	text-align:center;

	padding:16px;

	text-decoration:none;

	font-size:15px;

}

.nav-a:hover{

	color:#ffbc44;

	background-color: #023568;

}

/*align*/

.center{

	display:block;

	margin-left:auto;

	margin-right:auto;

	width:100%;

}

.footer{

	display:block;

	margin-top:30px;

	margin-left:auto;

	margin-right:auto;

	width:1170px;

	color:#909090;

	text-align:center;

	font-family:Helvetica,Sans-serif;

	font-size:80%;

}

.services-sidebar{

	width:200px;

	border:0px solid blue;

	padding-left:10px;

	padding-right:10px;

	color:#606060;

	font-size:80%;

}

.article{

	display:block;

	width:100%;

	width:760px;

	border:0px solid blue;

	padding-left:10px;

	padding-right:10px;

	color:#606060;

}

.weblink-sidebar{

	width:100%;

	width:210px;

	border:0px solid blue;

	padding-left:10px;

	padding-right:10px;

	color:#606060;

	font-size:80%;

}

.weblink-a{

	color:rgba(2,122,198,1);

	text-decoration:none;

}

.weblink-a:hover{

	color:rgba(17,68,119,1);

}

.flex-container{

	display:flex;

	width:1170px;

	margin-left:auto;

	margin-right:auto;

	border:0px solid red;

}

.slideshow-container{

	width:760px;

	height:430px;

}

.slide{

	display:block;

	position:absolute;

	width:760px;

	height:430px;

}

.s1{

	animation: fade1 20s infinite;

}

.s2{

	animation: fade2 20s infinite;

}

.s3{

	animation: fade3 20s infinite;

}

@keyframes fade1{

	0%{opacity:1;}

	30%{opacity:1;}

	35%{opacity:0;}	

	95%{opacity:0;}

	100%{opacity:1;}	

}

@keyframes fade2{

	0% {opacity:0;}

	30%{opacity:0;}

	35%{opacity:1;}	

	65%{opacity:1;}

	70%{opacity:0;}

	100%{opacity:0;}

}

@keyframes fade3{

	0% {opacity:0;}	

	65%{opacity:0;}

	70%{opacity:1;}

	95%{opacity:1;}

	100%{opacity:0;}

}

.service-box{

	font-size:80%;

	width:740px;

	border:1px solid rgba(2,122,198,0.5);

	border-radius:10px;

	overflow:auto;

	padding:10px;

	margin-bottom:15px;

	vertical-align:top;

}



/* 1. Modal Background (พื้นหลังทึบ) */

.modal {

    display: none; /* ซ่อน Modal ไว้ก่อน */

    position: fixed; /* ให้อยู่กับที่เมื่อเลื่อนหน้าจอ */

    z-index: 1000; /* ให้อยู่เหนือทุกองค์ประกอบในหน้าเว็บ */

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    overflow: auto;

    background-color: rgba(0,0,0,0.7); /* พื้นหลังสีดำโปร่งใส */

}



/* 2. Modal Content (กล่องเนื้อหา Popup) */

.modal-content {

    background-color: #fefefe;

    margin: 5% auto; /* จัดให้อยู่ตรงกลาง (10% จากด้านบน, auto ซ้ายขวา) */

    padding: 0;

    border: 1px solid #888;

    width: 80%; /* ความกว้างของ Modal */

    max-width: 1000px; /* จำกัดความกว้างสูงสุด */

    position: relative;

    border-radius: 8px; /* ขอบโค้งมน */

}



/* 3. ปุ่มปิด */

.close-button {

    color: #aaaaaa;

    float: right;

    font-size: 28px;

    font-weight: bold;

    position: absolute; /* วางไว้มุมบนขวา */

    top: 5px; 

    right: 15px;

    z-index: 1001;

    cursor: pointer;

    background-color: white; /* เพื่อให้มองเห็นชัดเจน */

    padding: 0 8px;

    border-radius: 50%;

}



.close-button:hover,

.close-button:focus {

    color: #000;

    text-decoration: none;

    cursor: pointer;

}