.zone-content{
    font-size: 22px;
}
.titel-textdev{
    font-size: 24px;
    font-weight: bold;
}
.sbox-head{
    background-color: #be0000;
    color: white;
    padding: 7px;
    font-size: 24px;
    font-weight: bold;
}
.sbox-body{
    background-color: white;
    border: 1px solid #be0000;
    min-height: 100px;
    padding: 7px;
}


@font-face {
    font-family: THSarabunNew;
    src: url(./font/THSarabunNew.ttf);

}


#copyright A:link{
    text-decoration:none;
}
#copyright A{
    color: white;
}
#copyright A:hover{
    color: red;
}
#copyright{
    color: black;
    font-size: 18px;
}
.footer-zone{
    background-color: #d3d3d3;
    height: 50px;
    color: black;
}
.title-register{

}
.ftt-box-title {
    padding: 0;
}
.ftt-box-title h2 {
    font-size: 23px;
}
.dev-zonelogin .panel-body {
    background-color: #F9FAF9;
    height: 300px;
}
.banni{
    padding-top: 150px;
}
/* Better box-sizing */
* { box-sizing: border-box; }


/* Loaded body */
body.loaded {
    opacity: 1;
    transition: 1s opacity;
}

/* Default banner */
.banner {
    position: relative;
    width: 100%;
    height: 50rem;
    padding: 0 5%;
    overflow: hidden;
    backface-visibility: hidden;
}

/* Default image container */
.banner .background {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    transform: translate3d(0,0,0) scale(1.25);
    background: black url(http://www.factorynetasia.com/wp-content/uploads/2016/09/Future1.jpg) no-repeat center center; 
    background-size: cover;
}

/* Loaded image container */
.loaded .banner .background {
    transform: scale(1);
    transition: 6.5s transform;
}

/* Other stuff */
.banner h1 {
    color: #EEE;
    margin: 0;
    line-height: 40rem;
    text-transform: uppercase;
    text-shadow: 0 0 .3rem black;
}

main { 
    width: 90%;
    margin: 5rem auto;
}

main p { margin: 0 0 3rem 0; }



.nav-menu p {
    font-size: 20px;
    /* white-space: nowrap; */
    text-align: center;
    color: black;
    font-weight: 600;
}
.nav-menu p:hover{
    color: red;
}
.nav-menu A:link	{
    text-decoration:none;
}
.nav-menu img {
    width: 50px;
    height: auto;
    display: block;
    margin: auto;
}
#ftt-logo img {
    height: 100px;
    width: auto;
}
@media only screen and (max-width: 768px){
    #ftt-logo img ,.nav-menu,.nav-sem{
        display: none;
    }
}
@media only screen and (min-width: 768px) {
    .nav-home-head {
        display: none;
    }
}
.navbar-brand img {
    height: 45px;
    width: auto;
    margin-top: -12px;
}
.navbar-toggle.navbar-left {
    float: left;
    margin-left: 10px;
}
.row-am{
    padding: 15px 15px 15px 15px;
}
.content-page{
    min-height: 900px;
}
.row {
    margin-right: 0px;
    margin-left: -15px;
}
.container-fluid {
    padding-right: 0px; 
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
/* Makes images fully responsive */

.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
    display: block;
    width: 100%;
    height: 600px;
}

/* ------------------- Carousel Styling ------------------- */


.carousel-caption {
    background-color: rgba(0,0,0,.5);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    padding: 0 0 10px 25px;
    color: #fff;
    text-align: left;
}

.carousel-indicators {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    z-index: 15;
    margin: 0;
    padding: 0 25px 25px 0;
    text-align: right;
}

.carousel-control.left,
.carousel-control.right {
    background-image: none;
}


/* ------------------- Section Styling - Not needed for carousel styling ------------------- */

.section-white {
    padding: 10px 0;
}

.section-white {
    background-color: #fff;
    color: #555;
}

@media screen and (min-width: 768px) {

    .section-white {
        padding: 1.5em 0;
    }

}

@media screen and (min-width: 992px) {

    .container {
        max-width: 930px;
    }

}
.text-red{
    color: red;
}
.text-green{
    color: green;
}
#allbox>.toolbar {
    width: 100%;
    padding: 6px 0;
    margin: 0;
    background: #333;
}
#allbox>.toolbar h1, #allbox>.toolbar label {
    color: #fff;
}
.toolbar h1 {
    font-size: 1.5rem;
    line-height: 28px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    margin-left: 20px;
}
[class*=column-] {
    float: left;
    position: relative;
    min-height: 1px;
    padding-left: .6rem;
    padding-right: .6rem;
}

/*
inspired from http://codepen.io/Rowno/pen/Afykb
& https://jsfiddle.net/q0rgL8ws/
*/
.carousel-fade .carousel-inner .item {
    opacity: 0;
    transition-property: opacity;
    overflow:hidden;
}
.item.active img {
    transition: transform 5000ms linear 0s;
    /* This should be based on your carousel setting. For bs, it should be 5second*/
    transform: scale(1.05, 1.05);
}
.carousel-fade .carousel-inner .active {
    opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    opacity: 0;
    z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}

.carousel-fade .carousel-control {
    z-index: 2;
}

/*
WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
now override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}


.l-header__row {
    -moz-justify-content: flex-end;
    -ms-justify-content: flex-end;
    justify-content: flex-end;
    position: relative;
    display: flex;
    max-width: 1150px;
    margin: 0 auto;
}
.l-header__logo {
    padding: 0;
    position: absolute;
    left: 0;
    top: 4rem;
    margin-right: auto;
    background: url(../../images/logo/logo_png.png) 50%/contain no-repeat;
    align-items: center;
    transition: opacity .2s ease-in-out;
    display: flex;
}
.l-header__nav {
    display: -moz-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    -moz-align-items: stretch;
    -ms-align-items: stretch;
    align-items: stretch;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    justify-content: space-between;
    -ms-flex-shrink: 0;
    flex-shrink: 0;
    padding-right: 0;
}
.l-header__gmenu {
    display: -moz-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    -moz-align-items: stretch;
    -ms-align-items: stretch;
    align-items: stretch;
}
.l-header__gmenu>a.current, .l-header__gmenu>a:focus, .l-header__gmenu>a:hover {
    text-decoration: none;
    color: #2b9c9e;
}
.l-header__gmenu>a {
    position: relative;
    display: block;
    min-width: 98px;
    padding: 3.65rem 1.5rem;
    font-size: 2.5rem;
    color: #fff;
    font-weight: 600;
    transition: all .2s ease-in-out;
    text-align: center;
    line-height: 1.7;
}
header#header {
    width: 100%;
}
.l-header {
    z-index: 3;
}
.l-header {
    position: absolute;
    background-color: transparent;
    z-index: 10;
}
.l-header__logo img {
    opacity: 0;
    width: 163px;
    height: 139px;
}
#content-zone{
    /*    background-image: url(../../images/service/bg/bg-home.png);*/
    height: 100%; 
    background-size: cover;
}
.content-zone{
    min-height: 1300px;
}
.htitle{
    padding: 10px;
    color: #003f77;
    font-size: 18px;
    font-weight: 600;
    background-color: #e6ecf1;
    text-align: center;
    margin-top: 20px;
}
.p-policy-block__title {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 4rem;
    line-height: 1.7;
    letter-spacing: .15em;
    font-weight: 600;
    color: #fff;
}
.p-policy-block__list {
    list-style: none;
    counter-reset: a 0;
}
.p-policy-block__subject {
    margin-bottom: .2em;
    font-size: 2.5rem;
    font-weight: 600;
    color: #003f77;
}
.p-policy-block__item {
    margin-bottom: 2rem;
    margin-left: 0;
}
@media (min-width: 768px){
    .p-policy-block__list {
        margin: 0 0 5rem 44%;
    }
}
.p-policy-block {
    position: relative;
    max-width: 860px;
    margin: 0 auto 5rem;
}
.p-policy-block .button-wrap {
    text-align: center;
}

@media (min-width: 768px){
    .p-policy-block__item:nth-child(2) {
        -webkit-transform: translateX(-7.5rem);
        transform: translateX(-7.5rem);
    }
}
@media (min-width: 768px){
    .p-policy-block__item:nth-child(3) {
        -webkit-transform: translateX(-15rem);
        transform: translateX(-15rem);
    }
}

@media (min-width: 768px){
    .p-policy-block__item:nth-child(4) {
        -webkit-transform: translateX(-22.5rem);
        transform: translateX(-22.5rem);
    }
}
.img-tzone img{
    height: 350px;
    width: 350px;
}
.img-tzone{
    position: absolute;
    right: 90px;
    top: 350px;

}
.img-szone img{
    height: 350px;
    width: 350px;
}
.img-szone{
    position: absolute;
    left: 150px;
    top:400;
}

.p-cont-block {
    position: relative;
    padding-bottom: 180px;
    margin-bottom: 5rem;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
}

@media (min-width: 768px){
    .p-cont-block:before {
        content: "";
        position: absolute;
        z-index: -1;
        top: -1091px;
        left: 50%;
        width: 1550px;
        height: 1550px;
        background: #003f77 url(../../images/service/cont_bg.jpg) 50%/cover no-repeat;
        -webkit-transform-origin: 100% 100%;
        transform-origin: 100% 100%;
        -webkit-transform: translateX(-1397px) rotate(-45deg);
        transform: translateX(-1397px) rotate(-45deg);
    }

}
.p-cont-block__list {
    display: -moz-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    max-width: 432px;
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transform: translateY(90px) rotate(45deg);
    transform: translateY(90px) rotate(45deg);
}
.p-cont-block__title {
    background-color: rgba(0,0,0,.3);
}
.p-cont-block__item-00, .p-cont-block__title-00 {
    -moz-order: 3;
    -ms-order: 3;
    order: 3;
}
.p-cont-block__item, .p-cont-block__title {
    display: -moz-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    margin: 0;
    width: 216px;
    height: 216px;
    color: #fff;
    font-size: 2.9rem;
    background: 50%/cover no-repeat;
    transition: opacity .2s ease-in-out;
}
.p-cont-block__item-00, .p-cont-block__title-00 {
    -moz-order: 3;
    -ms-order: 3;
    order: 3;
}
.p-cont-block__title h3 {
    color: #fff;
    margin: 0;
    padding: 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.p-cont-block__title h3>small {
    display: block;
    font-size: 1.8rem;
    color: #fff;
    text-align: center;
}
.p-cont-block__item-01, .p-cont-block__title-01 {
    -moz-order: 1;
    -ms-order: 1;
    order: 1;
    background-image: url(../../images/service/1423468.jpg);

}


.p-cont-block__title:hover{
    opacity: 50%;
}
.p-cont-block__item-02, .p-cont-block__title-02 {
    -moz-order: 2;
    -ms-order: 2;
    order: 2;
    background-image: url(../../images/service/cont_gaikan_bt.jpg);
}
.p-cont-block__item-03, .p-cont-block__title-03 {
    -moz-order: 4;
    -ms-order: 4;
    order: 4;
    background-image: url(../../images/service/cont_brast_bt.jpg);
}
.p-cont-block__item>span, .p-cont-block__title>span {
    color: #fff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
A:link	{
    text-decoration:none;
}

@media (min-width: 768px){
    .l-block-1:before {
        top: 0;
        left: 50%;
        margin-left: -1145px;
        width: 1200px;
        height: 1200px;
        background-color: #222;
        -webkit-transform-origin: 100% 0;
        transform-origin: 100% 0;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
}
.p-news-block {
    display: -moz-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    -moz-align-items: stretch;
    -ms-align-items: stretch;
    align-items: stretch;
    max-width: 906px;
    margin: 0 auto 5rem;
    background-color: #e6ecf1;
}
.l-block-1 {
    position: relative;
    padding-top: 3rem;
    width: 100%;
}

@media (min-width: 768px){
    .p-policy-block:after {
        display: block;
        position: absolute;
        bottom: -200px;
        right: -150px;
        content: "";
        background: url(../../images/service/servicem.png) 50%/contain no-repeat;
        width: 285px;
        height: 414px;
    }  
}

@media (min-width: 768px){

    .l-block-1:after {
        bottom: -135px;
        right: 50%;
        margin-right: -1200px;
        width: 1000px;
        height: 2000px;
        background-color: #acdfdf;
        -webkit-transform-origin: 0 100%;
        transform-origin: 0 100%;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
}
@media (min-width: 768px){
    .l-block-1:after, .l-block-1:before {
        content: "";
        position: absolute;
        z-index: -1;
    }   
}
*, :after, :before {
    box-sizing: border-box;
}
.p-message-block__text:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    box-shadow: 0 0 10px 10px #f0f5fa;
}
.p-message-block {
    margin-bottom: 10rem;
}
.p-message-block:before {
    display: block;
    position: absolute;
    content: "";
    width: 100%;
    height: 450px;
    background-color: #f0f5fa;
    z-index: -2;
}
.p-message-block__inner {
    position: relative;
    max-width: 860px;
    height: 450px;
    margin: 0 auto;
    padding: 5rem 0 5rem 400px;
}
.p-message-block__photo {
    position: absolute;
    top: -7rem;
    left: -5rem;
}
img {
    vertical-align: bottom;
}
.p-message-block__title {
    font-family: bebas;
    font-size: 5rem;
    letter-spacing: .05em;
    color: #003f77;
    margin-bottom: 2rem;
    line-height: 1;
}
.p-message-block__lead {
    font-size: 2rem;
    font-weight: 400;
}
.p-message-block__text {
    font-size: 1.3rem;
    position: relative;
    height: 56px;
    overflow: hidden;
}
.l-block-2 {
    position: relative;
    width: 100%;
}
.p-cont-footer {
    display: -moz-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    justify-content: space-between;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    max-width: 960px;
    margin: 0 auto 7rem;
    padding: 5.5rem;
    background-color: #2b9c9e;
}
.p-cont-footer__text {
    -moz-flex-grow: 1;
    -ms-flex-grow: 1;
    flex-grow: 1;
}
@media (min-width: 768px){
    .l-block-2:after, .l-block-2:before {
        content: "";
        position: absolute;
        z-index: -1;
    }  
}

@media (min-width: 768px){
    .l-block-2:after {
        bottom: -110px;
        right: 50%;
        margin-right: -1120px;
        width: 1100px;
        height: 2000px;
        background-color: #003f77;
        -webkit-transform-origin: 0 100%;
        transform-origin: 0 100%;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

}
footer {
    position: relative;
    background: #222 url(../../images/service/footer_map.png) 50% no-repeat;
}
.p-news-block__list {
    list-style: none;
    width: 100%;
    max-width: 772px;
    margin: 0;
}
p-news-block__link {
    display: -moz-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    padding: 1.1rem;
    padding-left: 0;
}
.p-news-block__title {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #222;
}
.p-news-block__cate {
    margin-left: 1em;
    white-space: nowrap;
}