a, a:link, a:visited, a:hover, a:active{text-decoration:none; outline:0px !important; -webkit-appearance:none;}
* html a, a:link, a:visited, a:hover, a:active{text-decoration:none; outline:0px !important; -webkit-appearance:none;}
*+html a, a:link, a:visited, a:hover, a:active{text-decoration:none; outline:0px !important; -webkit-appearance:none;}
a, a:link, a:visited, a:hover, a:active{text-decoration:none\0/; outline:0px !important; -webkit-appearance:none;}
button:focus,button:active{ outline: none!important; outline:0px !important; -webkit-appearance:none;}

body{
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.5;
    background: #000000;
}

.doa{
    width: 100%;
    height: auto;
    overflow: hidden;
}
.doa .bgz{
    position: relative;
    display: block;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 1;
}

.doa .bgz .videobg {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%; 
    overflow: hidden;
    /*display: none;*/
}
.doa .bgz .videobg video {
    top: 0;
    min-width: 100%;
    width: 100%;
    height: auto;
    position: absolute;
}

.doa .bgz .imgbg{
    width: 100%;
    height: auto;
    overflow: hidden;
    display: none;
}
.doa .bgz .imgbg img{
    width: 100%;
    height: auto;
}

.doa .bgz .imgbg .img_parent{ display: none;}

.doa .btn-rightz{
    position: absolute;
    z-index: 2;
    right: 20px;
    top: 30px;
}
.doa .btn-rightz ul li{ margin-bottom: 5px;}
.doa .btn-rightz a img{ width: 120px; }



.overlay{
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(67, 67, 67, 0.70);
    z-index: 1;
    top: 0;
    display: none;
}
/*########################################
########################################*/
.doa .bgz .btnzone{
    position: absolute;
    width: 100%;
    height: auto;
    overflow: hidden;
}
.doa .bgz .btnzone img{
    width: 100%;
    height: auto;
}

.doa .bgz .btnzone .ovbtn{
    position: absolute;
    width: 10%;
    min-height: 120px;
    height: auto;
    z-index: 2;
    transition: all 2s ease-out;
}
.doa .bgz .btnzone .ovbtn img{
    display: none;
    width: 130%;
}
.doa .bgz .btnzone .ovbtn:hover img{ display: block;}

.ovbtn01{
    top: 20%;
    left: 19%;
}
.ovbtn02{
    top: 22%;
    left: 30%;
}
.ovbtn03{
    top: 24%;
    left: 41.5%;
}
.ovbtn04{
    top: 22%;
    left: 52.5%;
}
.ovbtn05{
    top: 20%;
    left: 65%;
}

.ovbtn06{
    top: 63%;
    left: 3%;
}
.doa .bgz .btnzone .ovbtn06 img{
    display: block;
    width: 90%;
}

.ovbtn07{
    top: 48%;
    left: 10%;
}
.ovbtn08{
    top: 45%;
    left: 26%;
}
.ovbtn09{
    top: 45%;
    left: 41.5%;
}
.ovbtn10{
    top: 45%;
    left: 57%;
}
.ovbtn11{
    top: 47%;
    left: 73%;
}
.ovbtn12{
    /*
    top: 60%;
    right: 5%;
    */
    top: 66%;
    right: 5%;
}
.doa .bgz .btnzone .ovbtn12 img{
    display: block;
    width: 90%;
}
.ovbtn13{
    top: 67%;
    left: 43.5%;
}


/*########################################
########################################*/
.doa .tt{
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(67, 67, 67, 0.90);
    z-index: 1002;
    color: #ffffff;
    display: none;
}
.doa .tt .btn{
    color: #ffffff;
    background: #F7802C;
    border-radius: 0;
}
.doa .tt .btn:hover{  background: #F7992C; }

.doa .tt .zone{
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
}

/*
*/
.doa .tt .step1{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.doa .tt .step1 .img{
    width: 67%;
    margin: 5% auto 0 14.5%;
}
.doa .tt .step1 .img img{ width: 100%;}

.doa .tt .step1 .step1_text{
    font-size: 22px;
    margin:15px 0 0 0;
}
.doa .tt .step1 .step1_text .btn{
    width: 153px;
    margin-top: 10px;
}

/*
*/
.doa .tt .step2{
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin:23% 0 0 0;
}
.doa .tt .step2 .img{
    width: 82%;
    margin: auto;
}
.doa .tt .step2 .img img{ width: 100%;}
.doa .tt .step2 .step2_text{ margin-bottom: 15px;}
.doa .tt .step2 .step2_text > div{
    display: inline-block;
    padding-right: 15px;
}
.doa .tt .step1 .step1_text .btn{
    width: 153px;
}

/*########################################
########################################*/
.fancybox-content{
    max-width: 90%;
    padding: 44px 20px 20px 20px;
}
.fancybox-content .title{
    font-weight: 500;
    font-size: 20px;
}

.fancybox-content .toptitle{
    font-weight: 600;
    font-size: 16px;
}
.fancybox-content .toptitle h4{
    color: #F7802C;
    font-weight: 800;
}
.fancybox-content .toptitle h5 {font-weight: 800;}

.fancybox-bg{ background: none;}

.fancybox-content strong{ font-weight: 600;}


/*
*/
.fancybox-content .table-bordered thead th,
.fancybox-content .table-bordered thead td {
    font-weight: 400;
    border-bottom-width: 1px;
    background: #F7802C;
    color: #ffffff;
}
.fancybox-content .table-bordered th,
.fancybox-content .table-bordered td {
    border: 1px solid #1A1818;
}

/*
*/
.fancybox-content .table-striped thead th{
    vertical-align: bottom;
    background: #F7802C;
    border-bottom: none;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
}
.fancybox-content .table-striped thead th:nth-child(1){ width: 80px;}
.fancybox-content .table-striped thead th:nth-child(3){ width: 250px;}

.table_desktop{ display: table-cell;}
.table_mobile{ display: none;}

@media (max-width: 680px){
    .table_desktop{ display: none;}
    .table_mobile{ 
        display: table-cell;
        width: 100%;
    }
    .table_mobile .cola{
        flex: 0 0 136px;
        width: 136px;
    }
    .table_mobile .colb{ width: calc( 100% - 136px ); }
}

/*
*/
.list-person{
    list-style: none;
    padding-left: 0;

    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.list-person > li{
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
}
.list-person > li .img{
    margin: 0 auto 5px auto;
    width: 80%;
}
.list-person > li .img img{ width: 100%;}
.list-person > li .text{
    text-align: center;
    font-size: 0.75em;
}
.list-person > li .text div:nth-child(1){
    font-weight: 500;
    font-size: 1em;
}

/*########################################
content-03
########################################*/
#content-03{ padding: 20px 20px 20px 20px;}
#content-03 .toptitle{
    font-weight: 600;
    font-size: 16px;
}
#content-03 .toptitle .logo{
    width: 95px;
    margin-bottom: 5px;
}
#content-03 .toptitle h4{
    color: #F7802C;
    margin-top: 15px;
    font-weight: 800;
}

/*########################################
content-01 02 04 05
########################################*/
#content-01,
#content-02,
#content-04,
#content-05{ padding: 20px 20px 20px 20px; width: 800px; }

/*########################################
content-13
########################################*/
#content-13{ padding: 20px 20px 20px 20px; width: 800px; }
#content-13 .toptitle{
    font-weight: 600;
    font-size: 16px;
}
#content-13 .toptitle .logo{
    width: 95px;
    margin-bottom: 5px;
}
#content-13 .toptitle h4{
    color: #F7802C;
    margin-top: 15px;
    font-weight: 800;
}

#content-13 p{ text-indent: 40px;}


/*########################################
photoframe
########################################*/
#photoframe{ min-width: 40%;}
#photoframe a{color: #000000;}
#photoframe a:hover{ color: #F7802C; }
#photoframe .img{
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-bottom: 10px;
    border-radius: 100%;
}
#photoframe .img img{ width: 100%;}