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

@import url('https://fonts.googleapis.com/css?family=Prompt:200,400,600,700&display=swap&subset=latin-ext,thai,vietnamese');

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css");

*:focus{
    outline: none;
}
html{
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
}
body{
	font-family: Prompt,Helvetica,Arial,Tahoma;
    -webkit-font-smoothing: antialiased;
    transition: all 0.4s ease;
    font-style: normal;
    font-size: 16px;
}

#page,#page2{
	display:none !important;
}
button{
    border: 0;
    padding: 0;
    font-family: Prompt,Helvetica,Arial,Tahoma;
    text-align: center;
}
input,select{
    font-family: Prompt,Helvetica,Arial,Tahoma;
    box-sizing: border-box;
    border-radius: 5px;
}
input[type="text"], input[type="password"], textarea, select{
	width: auto;
	box-sizing: border-box;
	padding: 5px 10px;
	border: 0;
    border-radius: 5px;
    font-size: 14px;
}
input[type="text"],input[type="password"],  select{
}
input[type="checkbox"], input[type="radio"] {
    top: 2px;
    position: relative;
}

a:link, a:visited{	
	color:#000;
    text-decoration: none;
}
a:hover{
}
a:active,
a:focus{
    outline: none;
}
div{
    position: relative;
	box-sizing: border-box;
}
img {
    vertical-align: middle;
    width: auto;
    max-width: 100%;
    height: auto;
}
ul{
    padding: 0;
    margin: 0;
}
.txt-red{
    color: #F00;
}
.txt-org{
    color: #ed4e00;
}
.txt-blue{
    color: #2a5b92;
}
.txt-green{
    color: #5db547;
}
.txt-gray{
    color: #414141;
}
.txt-left{
    text-align: left;
}
.txt-center{
    text-align: center;
}
.txt-right{
    text-align: right;
}
.logo-box{
    position: absolute;
}
.lang-box,
.social-box{
    display: inline-block;
    margin: 10px 0;
}
.lang-box{
    margin-left: 20px;
    border-left: 2px solid #FFF;
}
.lang-box a:link,
.lang-box a:visited{
    color: #FFF;
    font-size: 16px;
    margin-left: 20px;
}
.lang-box img{
    width: auto;
    height: 20px;
}
.social-box{
}
.social-box a{
    margin-left: 10px;
}
.social-box img{
    width: auto;
    height: 20px;
}
.banner-box{
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
    margin: 0;
    width: 100%;
    padding-top: 50%;
}
.banner-box-scale{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 0;
}
.banner-box-scale img{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    object-fit: cover;
    object-position: center;
    transition: all 0.3s;
}
.banner-box:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px 0 0 100vw;
    border-color: transparent transparent transparent #FFF;
    position: absolute;
    left: 0;
    bottom: 0;
}
.main-box{
    margin: 30px auto;
}
.main-content{
    margin: 30px auto;
}

.footer-box {
    margin: 5em auto 0 auto;
    padding: 20px 0;
    width: 100%;
    max-width: 1200px;
    display: table;
}
.footer-box-row {
    display: table;
    table-layout: fixed;
    width: 100%;
}
.footer-box-port,
.footer-box-address{
    display: table-cell;
    vertical-align: top;
    width: 50%;
}
.footer-box-port{
    padding-right: 40px;
}
.footer-box-address{
    padding-left: 40px;
}
.footer-title{}
.footer-title-txt{
    font-size: 20px;
}
.footer-title-txt img{
    height: 50px;
}
.footer-box-port ul{
    list-style: none;
    padding: 0;
    margin: 0 -10px;
    display: flex;
    flex-wrap: wrap;
}
.footer-box-port li {
    width: 33.33%;
    padding: 0 10px;
    margin: 0;
    box-sizing: border-box;
    text-align: center;
    max-height: 100px;
}
.footer-box-port li a{
display: block;
width: 100%;
height: 100%;
}
.footer-box-port li img {
    object-position: center;
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-height: 80px;
}
.footer-box-address ul{
    padding: 0;
    margin: 10px 0;
    list-style: none;
}
.footer-box-address li{
    position: relative;
    padding: 5px 0 5px 50px;
}
.footer-box-address li label {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 3px;
    left: 0;
}
.footer-box-address li label img {
    width: auto;
    height: 100%;
    object-fit: contain;
}
.main-img1x1{
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
    margin: 0;
    width: 100%;
    padding-top: 100%;
}
.main-img1x1-scale{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 0;
}
.main-img4x3{
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
    margin: 0;
    width: 100%;
    padding-top: 75%;
}
.main-img4x3-scale{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 0;
}
.main-img16x9{
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
    margin: 0;
    width: 100%;
    padding-top: 75%;
}
.main-img16x9-scale{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 0;
}
.main-img1x1 img,.main-img4x3 img,.main-img16x9 img{
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    object-position: center;
    transition: all 0.3s;
}
.main-title{
    margin-bottom: 3em;
}
.main-title-txt{
    font-size: 30px;
    text-align: center;
}
/********************************************************************************************************/

.about-box {
    padding: 0px 0px 50px 0px;
}
.about-desktop{
    display: block;
}
.about-mobile{
    display: none;
}
.about-box-row{
    max-width: 1200px;
    margin: 0 auto;
    display: table;
    width: 100%;
}
.about-box-content,
.about-box-object {
    display: table-cell;
    vertical-align: middle;
}
.about-box-content {
    width: 440px;
    padding-right: 40px;
}
.about-box-object {
}
.about-title{
}
.about-box-content p{
    text-indent: 30px;
}
.about-title-txt{
    font-size: 30px;
    text-align: right;
}
.about-box-content-txt{
    word-break: break-word;
}
.about-box-object ul,
.about-box-object ol{
    list-style: none;
    padding: 0;
    margin: 0;
}

.about-box-object dt{
    margin-bottom: 10px;
}
.about-box-object li{
    list-style: none;
    padding: 0 0 0 25px;
    margin: 0;
    position: relative;
}
.about-box-object li:before {
    content: "●";
    position: absolute;
    left: 0;
    color: #00a7e9;
}
.about-box-object ol li {
    list-style: decimal;
    margin-left: 15px;
    padding-left: 10px;
}
.about-box-object ol li:before{
    display: none;
}
.line-break {
    display: block;
    position: relative;
    width: 100%;
    height: 2px;
    margin-bottom: 30px;
}
.line-break:before {
    display: block;
    content: '';
    position: absolute;
    right: 0vw;
    top: 0px;
    width: 100vw;
    height: 100%;
    border-bottom: 2px dotted #CCC;
    opacity: 1;
}
.about-img {
    display: flex;
    padding: 70px 0;
}
.about-img:before {
    content: "";
    position: absolute;
    width: 50%;
    height: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
    border: 2px dotted #ccc;
    top: 50%;
    transform: translateY(-50%);
}
.about-img-col{
    flex: 1;
}
.about-img-col:first-child{
    top: 70px;
}
.about-img-col:last-child{
    top: -70px;
}
.about-img-col.animate1 {
    animation: fadeup 0.7s ease;
}

.btn-go {
    position: absolute;
    bottom: 6px;
    left: 55%;
    z-index: 99;
}
.btn-go a {
    background-color: #FFF;
    border: 1px solid #00a7e9;
    padding: 5px 20px;
    font-size: 18px;
}
.btn-go a:link,
.btn-go a:visited{
    color: #00a7e9;
}

/**************************************************************************/
.service-box{
    background-color: #00a7e9;
    overflow: hidden;
    color: #FFF;
}
.service-box-line{
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    text-align: center;
}
/*.service-box:before {
    content: "";
    width: 100%;
    height: 100%;
    background-image: url("../images/bg-blue.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.75;
}*/
.service-box:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width:  0 0 30px 100vw;
    border-color: transparent transparent transparent #FFF;
    position: absolute;
    left: 0;
    top: 0;
}
.service-box-row{
    max-width: 1200px;
    margin: 0 auto;
    display: table;
    width: 100%;
}
.service-box-content,
.service-box-object {
    display: table-cell;
    vertical-align: middle;
}
.service-box-content {
    width: 440px;
    padding: 3em 40px 3em 0;
}
.service-box-object {
}
.service-title{
}
.service-title-txt{
    font-size: 30px;
    text-align: right;
}
.service-box-content-txt{
    word-break: break-word;
}
.service-box .line-break:before{
    border-color: #FFF;
}
.service-box-content p{
    text-indent: 30px;
}
.service-box ul{
    padding: 0;
    margin: 0;
}
.service-box ul dt{
    margin-bottom: 10px;
}
.service-box li {
    list-style: none;
    padding: 0 0 0 25px;
    margin: 0 0 0 10px;
    position: relative;
}
.service-box li:before{
    content: "●";
    position: absolute;
    left: 0;
    color: #FFF;
}
.service-img {
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.service-img:before {
    content: "";
    position: absolute;
    width: 70%;
    height: 60%;
    left: 0;
    right: 0;
    margin: 0 auto;
    border: 2px dotted #FFF;
    top: 50%;
    transform: translateY(-50%);
}
.service-img-col {
    flex: 1;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.service-img-col:first-child{
    top:0;
}
.service-img-col:last-child{
    top:0;
}
.service-img-col.animate1 {
    animation: fadeup 0.7s ease;
}
.service-img-col .main-img {
    width: 100%;
    height: 70%;
    overflow: hidden;
    top: 0;
    position: absolute;
}
.service-img-col:nth-child(2) .main-img {
    top: auto;
    bottom: 0;
}
.service-img-col .main-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
}

/**************************************************************************/
.port-box {
    background: rgb(0,167,233);
    background: linear-gradient(90deg, rgba(0,167,233,1) 75%, rgba(0,167,233,0) 100%);
    color: #FFF;
    padding: 2em 0px 7em 0;
    background-image: url(../../images/port_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.port-box:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 15px;
    background-image: url(../../images/port_object_bg.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 100vw;
    height: 80px;
}
.port-box:after {
    content: "";
    border-style: solid;
    border-width:  30px 0 0 100vw;
    border-color: transparent transparent transparent #FFF;
    position: absolute;
    width: 0;
    height: 0;
    left: 0;
    bottom: 0;
    
}
.port-box-row {
    max-width: 1200px;
    margin: 0 auto;
}
.port-box-content,
.port-box-object{
}
.port-box-content {
    width: 440px;
    padding: 0 40px 6em 0;
    float: left;
}
.port-box-object {
}
.port-title {
    width: 400px;
}
.port-title-txt{
    font-size: 30px;
    text-align: right;
}
.port-box-content-txt{
    word-break: break-word;
}
.port-box .line-break:before{
    border-color: #FFF;
    left: auto;
    right: 0vw;
}
.list-port {
    list-style: none;
    padding: 0;
    margin: 3em 0 0 0;
    display: block;
}
.regular4{
    display: flex;
    margin: 20px -20px;
    flex-wrap: wrap;
}
.regular4 > div{
    width: 33.33%;
    padding:20px;
}
.regular4 div .port-img {
    margin: 0 auto 20px auto;
    padding: 0;
    text-align: center;
}
.regular4 div .port-content{
    width: auto;
    padding: 0;
}
.regular4 div .port-img-scale{
    width: auto;
    padding: 0;
}
.port-img-scale img {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 170px!important;
    max-height: 170px!important;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    object-fit: contain;
    border: 5px solid #0098d5;
    border-radius: 100%;
    box-sizing: border-box;
}
.port-box-content p{
    text-indent: 30px;
}
.box-slide{
    display: block;
}
.regular4 div .slide-txt {
    padding: 0;
    width: auto;
}
.regular4 div .slide-txt ul {
    padding: 0;
    margin: 0;
    float: none;
    display: block;
    width: auto;
}
.regular4 div .slide-txt li {
    width: auto;
    text-align: left;
    margin: 0;
    font-size: 14px;
    padding: 2px 0 2px 25px;
}
.mask {
    background: rgba(57,164,232,0);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    border-radius: 50%;
    transition: all 0.2s linear;
    text-align: center;
    color: rgba(255,255,255,0);
}
.mask label{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    font-size: 20px;
}
.mask label img {
    width: auto!important;
    height: 20px!important;
    border: 0!important;
    border-radius: 0;
}
.mask:hover{
    background: rgba(57,164,232,0.9);
    color: rgba(255,255,255,1)
}

.testi-box-row .mask {
    background: rgba(57,164,232,0);
    width: 170px;
    height: 170px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto!important;
    border-radius: 50%;
    transition: all 0.2s linear;
    text-align: center;
    color: rgba(255,255,255,0);
}
.testi-box-row .mask:hover{
    background: rgba(57,164,232,0.9);
    color: rgba(255,255,255,1)
}

/***********************************************************/

@keyframes fadeup {
  0%   {transform: translateY(100px); opacity: 0;}
  50% {transform: translateY(0px); opacity: 1;}
  100% {transform: translateY(0px); opacity: 1;}
}
.about-img-col.animate2 {
    animation: fadedown 0.7s ease;
}
@keyframes fadedown {
  0%   {transform: translateY(-100px); opacity: 0;}
  50%   {transform: translateY(-100px); opacity: 0;}
  100% {transform: translateY(0px); opacity: 1;}
}

.logo-mobile{
    display: none;
}
.setmenu{
    display: table-cell;
    text-align: right;
    vertical-align: middle;
}
ul.list-cer{
    padding: 0;
    margin: 0 -10px;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}
.list-cer li{
    width: 33.33%;
    padding: 0 10px;
    margin: 0;
    box-sizing: border-box;
}
.list-cer li:before{
    display: none;
}

/***************************************************************/

.client-box{
}
.client-box-row{
    max-width: 1200px;
    margin: 0 auto;
    display: block;
    width: 100%;
}
ul.list-client{
    list-style: none;
    padding: 0;
    margin: 0 -10px;
    display: flex;
    flex-wrap: wrap;
}
.list-client li{
    width:25%;
    padding: 0 10px;
    margin-bottom: 40px;
    box-sizing: border-box;
}
.client-img{
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
    margin: 0;
    width: 100%;
    padding-top: 0;
    margin-bottom: 20px;
}
.client-img:before{
    content: "";
    background-color: rgba(0,0,0,0.5);
    width: 100%;
    height: 80%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.client-img-scale{
    position: relative;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 0;
}
.client-img-scale img {
    position: relative;
    left: 0;
    top: 0;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    border: 1px solid #CCC;
    box-sizing: border-box;
}
.client-txt{
    text-align: center;
}
.client-box-content,
.client-box-object {
    display: block;
}

.client-box-content {
}


.client-box-content p{
    text-indent: 30px;
}
.client-box-content dt {
    margin-bottom: 10px;
}
.client-box-content li {
    list-style: none;
    padding: 0 0 0 25px;
    margin: 0;
    position: relative;
}
.client-box-content li:before {
    content: "●";
    position: absolute;
    left: 0;
    color: #00a7e9;
}
.client-box-object {
    margin-top: 50px;
}

/*********************************/

.job-form{}
.job-form-row{
    display: flex;
    margin: 0 -10px;
    flex-wrap: wrap;
}
.job-form-col{
    width: 50%;
    padding: 0 10px;
    margin-bottom: 20px;
}
.job-form-col:last-child{
    width: 100%;
}
.job-form-col label{
    display: block;
    margin-bottom: 10px;
}
.job-form-col input{
    width: 100%;
    border:1px solid #CCC;
    padding: 5px 10px;
    box-sizing: border-box;
}
.job-form-col textarea{
    width: 100%;
    border:1px solid #CCC;
    padding: 5px 10px;
    box-sizing: border-box;
}
.location-box{
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px dotted #CCC;
}
.location-form{
    margin: 10px 0;
}
.location-form-row{
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}
.location-form-col{
    width: 50%;
    padding: 0 10px;
    margin-bottom: 20px;
}
.location-form-col label{
    display: block;
    margin-bottom: 10px;
}
.location-form-col input{
    width: 100%;
    border:1px solid #CCC;
    padding: 5px 10px;
}
.location-form-col textarea{
    width: 100%;
    border:1px solid #CCC;
    padding: 5px 10px;
}
.location-form-col:last-child{
    width: 100%;
}
.btn-form {
    background-color: #00a7e9;
    margin: 0 auto;
    padding: 10px 30px;
    border-radius: 5px;
    color: #FFF;
    border: 0;
}
.map-box{
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
    margin: 0;
    width: 100%;
    padding-top: 100%;
}
.map-box-scale{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 0;
}
.map-box-scale iframe{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    object-position: center;
    transition: all 0.3s;
}

/**************************************************************************/
.about-desktop{
    display: block;
}
.about-mobile{
    display: none;
}
.testi-box {
    color: #000;
    padding: 2em 0px;
}
.testi-box-row {
    max-width: 1200px;
    margin: 0 auto;
    table-layout: fixed;
}
.testi-box-content,
.testi-box-object{
    vertical-align: middle;
}
.testi-box-content {
    width: 440px;
    float: left;
    padding: 0 40px 6em 0;
}

.testi-box-object {
}
.testi-title {
}
.testi-title-txt{
    font-size: 30px;
    text-align: right;
}
.testi-box-content-txt{
    word-break: break-word;
}
.testi-box .line-break:before{
    border-color: #ccc;
    left: auto;
    right: 0vw;
}
.testi-box-content p{
    text-indent: 30px;
}
.testi-box ul {
    padding: 0;
    margin: 0;
    float: right;
}
.testi-box li {
    list-style: none;
    padding: 0 0 0 25px;
    margin: 0;
    position: relative;
}
.testi-box li:before{
    content: "●";
    position: absolute;
    left: 0;
    color: #00a7e9;
}
.testi-title.mobile{
    display: none;
}
.testi-title.desktop{
    display: block;
}
a.btn-outgo {
    display: block!important;
    width: 100px!important;
    background-color: #00a7e9;
    border: 1px solid #FFF;
    margin: 30px auto 0 auto;
    padding: 5px 10px;
    color: #FFF;
    text-align: center;
    min-width: 100px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
.port-img {
    margin: 0 auto 20px auto;
    width: 170px;
    height: 170px;
    position: relative;
}
.port-img-scale {
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.slide-txt {
    padding: 0;
    width: auto;
}
.slide-txt ul {
    padding: 0;
    margin: 0;
    float: none;
    display: block;
    width: auto;
}
.slide-txt dt{
    text-align: center;
    margin-bottom: 10px;
    font-weight: bold;
}
.slide-txt li {
    width: auto;
    text-align: left;
    margin: 0;
    font-size: 14px;
    padding: 5px 0;
    margin-left: 40px;
}

.slide-txt ul li a {
    color: #FFF;
}

.testi-box .slide-txt ul li a {
    color: #000;
}

.news-box-row {
    max-width: 1200px;
    margin: 0 auto;
    display: block;
    width: 100%;
}
.news-box-list,.newsdetail-box{
margin-top: 50px;
}
ul.list-news  {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
    padding: 0;
    row-gap: 40px;
    list-style: none;
    flex-direction: row;
}
.list-news li{
width: 25%;
padding: 0 10px;
margin: 0;
box-sizing: border-box;
}
.news-box-content{
display: flex;
row-gap: 10px;
flex-direction: column;
}
.news-box-content-date{
display: flex;
margin: 0;
flex-wrap: wrap;
column-gap: 15px;
}
.news-box-content-date span{
display: flex;
column-gap: 10px;
flex: auto;
}
.news-box-content-date span img{
max-height: 20px;
}
.news-box-content-title{
font-size: 18px;
font-weight: bold;
}
.news-box-content-subtitle{
display: block;
overflow: hidden;
}
.news-box-content-title span,.news-box-content-subtitle span {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-align: left;
}
.news-box-content-title span{
    -webkit-line-clamp: 1;
    line-clamp: 1;
}
.news-box-content-subtitle span {
    -webkit-line-clamp: 3;
    line-clamp: 3;
}
.news-box-content-title span a{
display: block;
}
.newsdetail{
display: flex;
justify-content: space-between;
align-items: baseline;
}

.newsdetail .btn-back{
display: flex;
align-items: center;
column-gap: 5px;
font-size: 15px;
}

.news-searchbox{
display: flex;
border-radius: 5px;
border: 1px solid #CCC;
width: 100%;
max-width: 75%;
margin: 60px  auto;
padding: 2px;
}
.news-searchbox input{
border: 0;
padding: 10px;
background-color: transparent;
flex: auto;
}
.btn-search{
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
background-color: #00a7e9;
width: 100px;
flex: none;
color: #FFF;
column-gap: 10px;
}
.btn-search i{
font-size: 20px;
}
.btn-search:hover{
background-color: #00c0e9;
}