/*@import url('http://fonts.cdnfonts.com/css/century-gothic');*/

.con{
	position: relative;
}
body{
	background: #000
}
.container_home{
    display: flex;
    max-width: 100vw;
	width: 99vw;
/*	background: url("img/sea_bg.gif");*/
	background: #000;
/*	background-repeat: no-repeat;*/
    height: auto;
    position: static;
    overflow: hidden;
	z-index: -1;
	align-items: center;
	justify-content: center;
	margin-top:-2px;
}

.swiper{
	    width: 55%;
    height: auto;
    display: flex;
}
.swiper-wrapper{
	    width: 100%;
    height: 100%;
    display: flex;
}
.swiper-slide{
	position: relative;
	width: 100%;
    height: 100%;
    display: flex;
}
.swiper-slide >img {
	    width: 100%;
    height: auto;
    transition: .3s ease;
    object-fit: contain;
}
.swiper-button-next, .swiper-button-prev
{
    color: black  !important;
}
.swiper .swiper-pagination-bullet {    /*.swiper .swiper-pagination-bullet-active */
/*  background: black !important;*/
  display:none
}
.flex-container {
/* position: absolute;*/
  max-width:100%;
  display: flex;
  flex-direction: row;
  font-size: auto;
  text-align: center;
	background-color: black;
	color:orange;
/*font-family: 'Century Gothic', sans-serif;*/
border: 1px solid orange;	
}


.f1{
/*  padding: 25px;*/
  flex: 16.5%;
/*  max-width: 15%;*/
  border-right: 1px solid orange;
}
.f1 > .our {
 width:100%;
 height:auto; 
 font-size: calc(18px + 0.390625vw);
}

.f2, .f3, .f4, .f5, .f6{
  padding: 25px;
  flex: 16.5%;
  max-width: 15%
}
.f2 > a > img, .f3 > a > img, .f4 > a > img, .f5 > a > img, .f6 > a > img {
 width:70%;
 height:auto; 	
}
.text {
background: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0; bottom: 0;	
max-width: 45%;	
width: 100%;	
/*font-family: 'Century Gothic', sans-serif;*/
font-size: calc(8px + 0.390625vw);
}
span{
font-family: 'Kanit', sans-serif;
font-size: calc(8px + 0.390625vw);	
}

.fontcap > h2, .fontcontent, .fontcap > span {
	color:white;
	font-size: calc(10px + 0.390625vw);
	width: 70%;
}
.fontcontent {
  text-align: center;
}

p > .a{
	display:none
}
.fontcap{
	
}

.button1{
font-size: calc(8px + 0.390625vw);	
background-color: orange;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
border:none;
border-radius: 15px;
padding: 3px;
margin:8px;	
/*font-family: 'Century Gothic', sans-serif;*/
}

.our{
	color:orange;
	padding-top: 6%;
}
.footer{
	background: black;
	max-width:100%;
	height:auto;
	color:#fff;
	text-align: center;
/*	padding: 10px;*/
/*  position: fixed;*/
  bottom: 0;
  left: 0;
  width: 100%;
	font-size: calc(8px + 0.390625vw);
/*	border: 1px solid white;*/
/*	margin-top: 10%;*/
}

/*
@media screen and (device-width: 540px){
	
}
*/
@media (max-width: 1024px) {
.fontcontent {
/*  margin-left: 45%;*/
}
}
@media (max-width: 540px) {
.fontcontent {
/*  margin-left: 40%;*/
}
}
@media (max-width: 1024px) {
	button{
		margin-bottom:10px
	}	
.swiper{
	    width: 100%;
    height: auto;
    display: flex;
}
.f2, .f3, .f4, .f5, .f6{
  padding: 10px;
	  max-width: 100%
}	
.f2 > a > img, .f3 > a > img, .f4 > a > img, .f5 > a > img, .f6 > a > img {
 width:25%;
 height:auto;
 margin:0;
}
	.our {
		padding:10px;
		width:100%;
/*		font-size: calc(35px + 0.390625vw);*/
	}
.f1{
  border-bottom: 1px solid orange;
}	
	  .flex-container, .flex-container2 {
    flex-direction: column;
  }
.text {
/*  top: 10%;*/
  right: 0%;
max-width: 100%;
width: 100%;
font-size: auto;
}	
.fontcap{	
margin-left: 2%;
margin-right: 2%;	
/*  font-size:900px;	*/
/*border-radius: 25px;*/	
}
.fontcap > h2, .fontcap > h4 {
/*	color:black;*/
/*	font-size: 5vw;*/
}
.footer{
	width:100%;
	height: 2vh;
	font-size: calc(8px + 0.390625vw);
}
}