.webboard-portfolio {
    margin: 0;
    padding: 0;
    min-height: 635px;
    background: #fff url(../images/wb-120-1/bg-webb.jpg) top center no-repeat;
    background-size: cover;
}

.webboard-block {
    margin: 0;
    padding: 0;
}

.webboard-block .wb-top {
    margin: 0;
    padding: 0;
    color: #000;
    margin-bottom: 20px;
    font: 28px/42px 'anakotmai-medium', Arial, sans-serif;
}

.webboard-block .wb-tab-row {
    margin: 0;
    padding: 0;
    /* background:url(../images/news-120-1/border.jpg) bottom left repeat-x; */
}

.webboard-block .wb-tab-row .wb-tap {
    width: 212px;
    height: 45px;
    text-align: center;
    font: 20px/53px 'anakotmai-medium', Arial, sans-serif;
}

.webboard-block .wb-tab-row .wb-tap .select {
    width: 100%;
    background: url(../images/wb-120-1/select.png) top center no-repeat;
    background-size: 100% 100%;
}

.webboard-block .wb-tab-row .wb-tap .select a {
    color: #020202;
}

.webboard-block .wb-tab-row .wb-tap .normal {
    width: 100%;
    background: url(../images/wb-120-1/normal.png) top center no-repeat;
    background-size: 100% 100%;
}

.webboard-block .wb-tab-row .wb-tap .normal:hover {
    cursor: pointer;
}

.webboard-block .wb-tab-row .wb-tap .normal a {
    color: #000;
}

.webboard-block .wb-tab-row .wb-tap .normal:hover a {
    color: #2a64e4;
}

.webboard-block .wb-mid {
    margin: 0;
    padding: 0;
}

.webboard-block .wb-mid a {
    color: #000;
}

.webboard-block .wb-mid a:hover {
    color: #da6700;
}

.webboard-block .wb-mid table thead {
    border-bottom: 3px solid #44cf00;
    color: #000;
}

.webboard-block .wb-mid table thead th {
    text-align: center;
    border-top: none;
}

.webboard-block .wb-mid table tbody {
    /*background: #5c1a80 top left repeat;*/
}

.webboard-block .wb-mid .table td {
    border-bottom: 1px solid #dedede;
    color: #000;
}

.webboard-block .wb-bottom {
    margin: 0;
    padding: 0;
}

.portfolio-block {
    margin: 0;
    padding: 0;
}

.portfolio-block .portfolio-top {
    margin: 0;
    padding: 0;
    color: #000;
    margin-bottom: 20px;
    padding-bottom: 20px;
    font: 28px/42px 'anakotmai-medium', Arial, sans-serif;
    background: url(../images/wb-120-1/line.png) bottom left no-repeat;
}

.portfolio-block .portfolio-mid {
    margin: 0;
    padding: 0;
}

.portfolio-block .portfolio-mid .pic {
    margin: 0;
    padding: 0;
    position: relative;
}

.portfolio-block .portfolio-mid .alpha {
    position: absolute;
    bottom: 1px;
    width: 100%;
    /* padding-top: 30px; */
}

.portfolio-block .portfolio-mid .text {
    padding: 20px;
    font: 18px/26px 'Kanit', Arial, sans-serif;
    background: #84a494;
    height: 100px;
}

.portfolio-block .portfolio-mid .text a {
    color: #fff;
}

.portfolio-block .portfolio-mid .text a:hover {
    color: #fff;
}

.portfolio-block .portfolio-mid .alpha .view {
    width: 92px;
    height: 29px;
    margin-left: 75%;
    margin-bottom: 10px;
    padding: 5px;
    padding-left: 44px;
    color: #fff;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    background: #84a494 url(../images/eye.png) 11px 8px no-repeat;
    font: 16px/22px 'anakotmai-medium', Arial, sans-serif;
}

.portfolio-block .portfolio-mid .pic img {
    max-width: 100%;
    height: auto;
}

.portfolio-block .portfolio-bottom {
    margin: 0;
    padding: 0;
}

.vdo-block {
    margin: 0;
    padding: 0;
}

.vdo-block .vdo-top {
    margin: 0;
    padding: 0;
    color: #000;
    margin-bottom: 20px;
    padding-bottom: 20px;
    font: 28px/42px 'anakotmai-medium', Arial, sans-serif;
    background: url(../images/wb-120-1/line.png) bottom left no-repeat;
}

.vdo-block .vdo-mid {
    margin: 0;
    padding: 0;
}

.vdo-block .vdo-mid .pic {
    margin: 0;
    padding: 0;
    position: relative;
}

.vdo-block .vdo-mid .alpha {
    position: absolute;
    bottom: 1px;
    width: 100%;
    /* padding-top: 30px; */
}

.vdo-block .vdo-mid .text {
    padding: 20px;
    font: 18px/26px 'Kanit', Arial, sans-serif;
    background: #39405a;
    height: 100px;
}

.vdo-block .vdo-mid .text a {
    color: #fff;
}

.vdo-block .vdo-mid .text a:hover {
    color: #fff;
}

.vdo-block .vdo-mid .alpha .view {
    width: 92px;
    height: 29px;
    margin-left: 75%;
    margin-bottom: 10px;
    padding: 5px;
    padding-left: 44px;
    color: #fff;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    background: #39405a url(../images/eye.png) 11px 8px no-repeat;
    font: 16px/22px 'anakotmai-medium', Arial, sans-serif;
}

.vdo-block .vdo-mid .pic img {
    max-width: 100%;
    height: auto;
}

.vdo-block .vdo-bottom {
    margin: 0;
    padding: 0;
}

@media (min-width: 320px) and (max-width: 767px) {
    .webboard-block .wb-mid .table th:last-child {
        display: none;
    }
    .webboard-block .wb-mid .table td:last-child {
        display: none;
    }
}

@media (max-width: 374px) {
    .webboard-block .wb-tab-row .wb-tap {
        width: 159px;
        font-size: 16px;
    }
    .portfolio-block .portfolio-mid .alpha .view {
        margin-left: 68%;
    }
    .portfolio-block .portfolio-mid .alpha .text {
        font: 15px/20px 'anakotmai-medium', Arial, sans-serif;
    }
}

@media (min-width: 375px) and (max-width: 419px) {
    .webboard-block .wb-tab-row .wb-tap {
        width: 165px;
        font-size: 16px;
    }
    .portfolio-block .portfolio-top {
        /* color:#333; */
    }
    .portfolio-block .portfolio-mid .alpha {
        padding-top: 8px;
    }
    .portfolio-block .portfolio-mid .alpha .text {
        font: 16px/23px 'anakotmai-medium', Arial, sans-serif;
    }
    .portfolio-block .portfolio-mid .alpha .view {
        margin-left: 70%;
    }
}

@media (min-width: 420px) and (max-width: 575px) {
    .webboard-block .wb-tab-row .wb-tap {
        width: 191px;
        font-size: 18px;
    }
    .portfolio-block .portfolio-top {
        color: #333;
    }
    .portfolio-block .portfolio-mid .alpha {
        padding-top: 8px;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    ...
}

@media (min-width: 768px) and (max-width: 991px) {
    .portfolio-block .portfolio-mid .alpha .view {
        margin-left: 85%;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .webboard-portfolio {
        /* min-height: 934px; */
    }
    .portfolio-block .portfolio-mid .alpha {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .portfolio-block .portfolio-mid .alpha .p-0 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .portfolio-block .portfolio-mid .alpha .d-flex {
        display: -ms-blockbox!important;
        display: block!important;
    }
    .portfolio-block .portfolio-mid .alpha .text {
        padding: 0px 20px;
        font: 14px/20px 'anakotmai-medium', Arial, sans-serif;
    }
    .portfolio-block .portfolio-mid .alpha .view {
        margin-top: 11px;
    }
}

@media (min-width: 1200px) and (max-width: 1280px) {
    .portfolio-block .portfolio-mid .alpha .text {
        padding: 20px;
        font: 15px/24px 'anakotmai-medium', Arial, sans-serif;
    }
}

@media (min-width: 1281px) and (max-width: 1366px) {
    .portfolio-block .portfolio-mid .alpha .text {
        padding: 20px;
        font: 15px/24px 'anakotmai-medium', Arial, sans-serif;
    }
}

@media (min-width: 1367px) and (max-width: 1440px) {
    .portfolio-block .portfolio-mid .alpha .text {
        padding: 20px;
        font: 15px/24px 'anakotmai-medium', Arial, sans-serif;
    }
}

@media (min-width: 1441px) and (max-width: 1600px) {
    .portfolio-block .portfolio-mid .alpha .text {
        padding: 20px;
        font: 18px/26px 'anakotmai-medium', Arial, sans-serif;
    }
}