@font-face {
    font-family :  'fontello';
    src :  url('../font/fontello.eot?54586004');
    src :  url('../font/fontello.eot?54586004#iefix') format('embedded-opentype'),
        url('../font/fontello.woff?54586004') format('woff'),
        url('../font/fontello.ttf?54586004') format('truetype'),
        url('../font/fontello.svg?54586004#fontello') format('svg');
    font-weight :  normal;
    font-style :  normal;
}

@font-face {
    font-family: 'UID DEEPSEA 2021 News';
    src: url('../font/UIDDEEPSEA2021-News.woff2') format('woff2'),
        url('../font/UIDDEEPSEA2021-News.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FC Iconic';
    src: url('../font/FCIconicBoldItalic.woff') format('woff'),
        url('../font/FCIconicBoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'FC Iconic';
    src: url('../font/FCIconicRegular.woff') format('woff'),
        url('../font/FCIconicRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FC Iconic';
    src: url('../font/FCIconicItalic.woff') format('woff'),
        url('../font/FCIconicItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'FC Iconic';
    src: url('../font/FCIconicBold.woff') format('woff'),
        url('../font/FCIconicBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

*{

    margin:0px;
    padding:0px;
    font-family: "Bai Jamjuree";

}

.carousel-item{

    height:100vh;
}

.img-box{

    width:10%;
    border:1px solid #000;
    position:relative;
}

.pic-one{

    width:100%;
}

.pic-two{

    width:100px;
    position:absolute;
    left:15px;
    bottom:20px;
}

.pic-three{
    width:75px;
    position:absolute;
    left:150px;
    bottom:70px;
}

.pic-four{
width:160px;
position:absolute;
left:40px;
top:110px;
}

.pic-five{
width:110px;
position:absolute;
right:20px;
bottom:0;
}

.pic-six{
width:160px;
position:absolute;
right:160px;
bottom:35px;
}

h1
{
    font-family: "FC Iconic", sans-serif;
    margin: 0;
    padding: 0 0 0px;
    font-size: 2.8em;
    line-height:40px;
    color:#fff;
    
}

p {

    color:#fff;
    
}

.carousel-item .row{
    margin: 12% 0;
}

.carousel-item h1{
    margin-top:40px;

}

.carousel-item p{

    margin:30px 0 50px;
    font-size:1.3em;
    
}

.carousel-item button{

    padding:8px 20px;
    background:#0c5ce3;
    border:0;
    outline:none;
    border-radius:20px;
    color:#fff;
    font-size:13px;
}


.slide-one{
    background:#142850;
}

.slide-one h1, .slide-one p{
    color:#fff;
}

.slide-two{
    background:#00909e;
    color:#fff;
}

.slide-two h1, .slide-two p{
    color:#fff;
}


.slide-three{
    background:#27496d;
    color:#fff;
}

.slide-three h1, .slide-three p{
    color:#fff;
}

.img-one{

    width:100%;
}

.slide-two button{

    background: linear-gradient(to right, #feb154, #f25555);

}

.row :: after 
{

    content :  "";
    clear :  both;
    display : table;

}

[class *= "col-"]
{

    float : left;
    padding : 10px;
    /* font-size:1em; */

}

/* For mobile phones */
[class *= "col-"] 
{

    width :  100%;
    /* font-size:1em;  */
    font-family : 'Bai Jamjuree', fontello;

}

[class *= "form-"]
{

    float : left;
    /* font-size: 1em; */
    color : #0094cd;
    padding : 15px;
    font-family : 'Bai Jamjuree', fontello;

}

[class *= "form-"] 
{

    width :  96%;
    margin : 2%;
    float : left;
    padding : 15px;

}

/* For tablets */
@media only screen and (min-width :  600px) 
{

    .col-s-1 {width :  8.33%;}
    .col-s-2 {width :  16.66%;}
    .col-s-3 {width :  25%;}
    .col-s-4 {width :  33.33%;}
    .col-s-5 {width :  41.66%;}
    .col-s-6 {width :  50%;}
    .col-s-7 {width :  58.33%;}
    .col-s-8 {width :  66.66%;}
    .col-s-9 {width :  75%;}
    .col-s-10 {width :  83.33%;}
    .col-s-11 {width :  91.66%;}
    .col-s-12 {width :  100%;}

}

/* มือถือ */
@media all and (max-width: 768px) 
{
    .carousel-item p{

        font-size:0.8em;
        margin:20px 0 20px;
    }

    .carousel-item h1{
        margin-top:20px;
    }

    .col-1 {width :  100%;padding-left:5%; padding-right:5%; border:0px solid #000;margin-top:70px;}
    .col-2 {width :  100%; padding:5%; margin-top:0px; border:0px solid #000;}
    .col-3 {width :  100%; padding:10px; margin-top:0px; border:0px solid #000;}
    .col-9 {width :  100%; padding:5%; margin-top:70px; border:0px solid  blue; font-size:1em; padding-top:0px;}
    .col-10 {width :  100%; padding:5%; margin-top:0px; border:0px solid  blue; font-size:1em; padding-top:0px;} /*เฉพาะไฟล์ read.php เลย*/
    .footer{width:100%; padding:0px; padding-left: 5%;padding-right: 5%;}

}

/* For desktop */
@media only screen and (min-width :  768px) 
{

    .col-1 {width :  100%;padding-left:15%; padding-right:15%; border:0px solid #000;margin-top:70px;}
    .col-2 {width :  40%; padding:10px; margin-top:70px; margin-left: 10%; border:0px solid rgb(51, 51, 51)}
    .col-3 {width :  25%; padding:10px; margin-top:70px; border:0px solid rgb(51, 51, 51)}
    .col-4 {width :  33.33%;}
    .col-5 {width :  41.66%;}
    .col-6 {width :  50%;}
    .col-7 {width :  58.33%;}
    .col-8 {width :  66.66%;}
    .col-9 {width :  50%; padding:10px; margin-top:70px;}
    .col-10 {width :  40%; padding:10px; margin-top:70px;} /*เฉพาะไฟล์ read.php เลย*/
    .col-11 {width :  91.66%;}
    .col-12 {width :  100%;}

}

/* For desktop */
@media only screen and (min-width :  768px) 
{

     /* สำหรับแบบฟอร์ม */

     .form-3 {width:46%; margin:2%}

     .footer {

        width:50%; margin-left:25%

     }

}

.imageauto{
    width:100%

    height:auto;
}