@media only screen and (max-width: 1340px) {
    .page-wrapper {
        overflow: hidden;
    }

    /*------single------*/
    .panel-two .panel-txt .note {
        position: relative;
    }
}

/*plus*/
@media (min-width: 1280px) {
    .nav-container .owl-prev {
        left: -1%;
    }

    .nav-container .owl-next {
        right: -1%;
    }

    .nav-container .owl-prev:hover, .nav-container .owl-prev:focus {
        left: calc(-1% - 3px);
    }

    .nav-container .owl-next:hover, .nav-container .owl-next:focus {
        right: calc(-1% - 3px);
    }
}

@media (max-width: 1280px) {

    /*------header------*/
    .main-menu > li > a {
        padding: 22px 12px !important;
        font-size: 17px;
    }

    .main-menu .icon-arrow::after {
        margin-left: 0;
        vertical-align: -3.5px;
    }
}

/*pc*/
@media (min-width: 992px) {

    /*------header------*/
    .main-header .auto-container {
        padding: 0px 50px;
    }
}

/*pad*/
@media (max-width: 991px) {

    /*menu*/
    .main-header .navbar-collapse {
        background: #fff;
        box-shadow: 0px 3px 6px rgba(0,0,0,0.2);
        min-height: 0;
        padding: 0;
        margin-left: -15px;
        width: calc(100% + 30px);
        position: absolute;
        top: 63px;
        z-index: 1000;
    }

    .main-menu.navbar-nav {
        float: none;
        display: block;
    }

    .main-menu .auto-container {
        padding: 0px 20px;
    }

    .main-menu > li:before {
        content: none;
    }

    .main-menu > li {
        float: none;
        padding: 0;
        border-top: 1px solid #dae7f3 !important;
    }

        .main-menu > li:first-child {
            border-top: none;
        }

        .main-menu > li, .main-menu > li > a {
            height: auto;
        }

            .main-menu > li > a,
            .main-menu > li > a:hover,
            .main-menu > li > a:focus,
            .main-menu > li.active > a,
            .main-menu > li:hover > a {
                padding: 12px 30px !important;
                font-weight: 400;
                text-shadow: none;
                line-height: 25px;
                font-size: 16px;
                position: relative;
            }

            .main-menu > li.dropdown > a:after {
                content: none;
            }

    .main-menu .dropdown .sub-menu {
        position: relative;
        float: none;
        width: calc(100% - 12px);
        border: none;
        padding: 5px 0;
        top: 0;
        left: 6px;
        box-shadow: none;
        background: #dae7f3;
        border-top: 2px solid #91bcda;
    }

        .main-menu .dropdown .sub-menu.show {
            display: block;
        }

        .main-menu .dropdown .sub-menu li {
            border: none;
            padding: 3px 10px 3px 40px;
            width: 100%;
            font-size: 15px;
            float: none;
        }

            .main-menu .dropdown .sub-menu li.main-item {
                display: none;
            }

            .main-menu .dropdown .sub-menu li a {
                color: #f4f3f2;
            }


    /*------footer------*/
    .footer_area .footer-menu > li; {
        width: 33%;
    }

    /*-------block-------*/
    .block .box .box-inner .block-content .block-title {
        font-size: 19px;
    }

    .section_area .area-title h4,
    .section_area .area-title span {
        font-size: 21px;
    }

    .section_area .area-title h4 {
        padding: 8px 16px;
    }

    .section-about .sub-title {
        font-size: 18px;
    }

    .section-about .title-about {
        font-size: 22px;
    }

    .section-about .title-circle {
        font-size: 15px;
    }

    .section-about .sub-title,
    .section-about p, .section-about a {
        font-size: 17px;
    }

    .section-about .row p span {
        margin-bottom: 2px;
    }

    .section-about .text-address {
        font-size: 13px;
    }


    .section-video .block .box {
        padding: 0 15px;
        margin-bottom: 20px;
    }

    .list_area.section-photograph .block .box {
        margin-bottom: 32px;
    }

    /*table*/
    .detail_area table td, .detail_area table th {
        padding: 5px 4px;
        font-size: 16px;
    }

    /*five*/
    .five-block {
        margin-bottom: -15px;
    }

        .five-block .box {
            flex-basis: 33.3333%; /* =1/3 */
            padding-bottom: 15px;
        }

            .five-block .box:nth-child(4) {
                margin-left: 16.666667%;
            }

    /*------single------*/
    .single_area .auto-container-xs {
        padding: 0px 50px;
    }

    .panel-two .panel-txt h4, .title-circle {
        font-size: 21px;
        margin-bottom: 40px;
    }

    .panel-two .panel-txt p, .panel-txt p,
    .detail_area ul li, .detail_area ol li {
        font-size: 17px;
    }

    .panel-two .panel-txt .note {
        font-size: 15px;
        padding-top: 30px;
    }

    .single_area blockquote {
        font-size: 21px;
    }
}

/*not phone*/
@media (min-width: 768px) {
    /*menu hover*/
    .main-menu .dropdown:hover .sub-menu {
        display: block;
    }

    /*------timeline------*/
    .timeline > li.left .title:before {
        left: 0;
        right: initial;
    }

    .timeline > li.left .title:after {
        right: -6px;
        left: initial;
    }

    .timeline > li.left .title {
        margin-right: -25px;
        padding-right: 25px;
        margin-left: 0;
        padding-left: 0;
    }

    /*------block------*/
    .list-construction .block .box .box-inner .block-content .block-txt {
        /*one line*/
        overflow: hidden;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
    }
}

/*phone*/
@media (max-width: 767px) {

    /*------all------*/
    .auto-container, .auto-container-xs,
    .single_area .auto-container-xs {
        padding: 0px 15px;
    }

    /*------header------*/
    /*top*/
    .navbar, .navbar-brand {
        height: 60px;
    }

    .main-header {
        padding: 0;
        height: 60px !important;
        display: block;
    }

        .main-header.main-header.fixed-top + * {
            margin-top: 60px;
        }


    /*------footer------*/
    .footer_area .footer-logo {
        width: 50%;
        max-width: 150px;
        padding-left: 5%;
    }

    .footer_area .footer-inner {
        flex-wrap: wrap;
        padding: 40px 0 0 0;
    }

    .footer_area .footer-menu {
        padding: 10% 0 0;
    }

        .footer_area .footer-menu > li {
            width: 50%;
            padding-bottom: 5%;
        }

    /*------banner------*/
    /*owl*/
    .owl-prev .fa, .owl-next .fa {
        font-size: 60px;
    }

    .bannerArea-item .banner-box h1,
    .bannerArea-item .banner-box h2 {
        font-size: 30px;
        /*one line*/
        overflow: hidden;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        white-space: nowrap;
    }

    .bannerArea-item .banner-box p {
        font-size: 17px;
        /*one line*/
        overflow: hidden;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        white-space: nowrap;
    }

    .btn-arrow {
        height: 34px;
        padding: 10px 43px 0 22px;
        font-size: 13px;
    }

        .btn-arrow .icon-arrow-white::after {
            height: 18px;
            width: 18px !important;
            right: 10px;
            top: 8px;
        }

        .btn-arrow.btn-ethics {
            padding-left: 38px;
        }

            .btn-arrow.btn-ethics .icon_hammer::after {
                height: 17px;
                width: 17px !important;
                left: 13px;
                top: 10px;
            }

    /*top-bannerArea*/
    .top-bannerArea .banner-box h1,
    .top-bannerArea .banner-box h2 {
        font-size: 26px;
    }

    .top-bannerArea .banner-box h3 {
        font-size: 19px;
    }

    .top-bannerArea .banner-box .empty-message {
        font-size: 40px;
    }

    /*-------block-------*/

    .section_area {
        padding: 40px 0 30px 0;
    }

        .section_area .area-title h4,
        .section_area .area-title span {
            font-size: 19px;
        }

        .section_area .area-title {
            margin-bottom: 40px;
        }

    .block .box .box-inner .block-content .block-title {
        font-size: 18px;
        font-weight: 500;
    }

    .block .box .box-inner .block-content .block-txt {
        font-size: 15px;
    }

    .section-news {
    }

        .section-news .block {
            position: relative;
            width: 100%;
            height: 100px;
            min-width: 0;
            margin-bottom: 0;
        }

            .section-news .block .box {
                height: 100px;
            }

            .section-news .block .tag-category {
                float: none;
                width: auto;
                margin-bottom: 4px;
            }

            .section-news .block .block-date {
                float: none;
                margin-left: 2px;
                margin-bottom: 2px;
            }

            .section-news .block .block-title {
                margin-left: 2px;
            }

            .section-news .block .box a {
                padding: 14px 0;
            }

    /*.section-about .row > div {
        padding-bottom: 12px;
    }*/

    .section-video .block .box .box-inner .block-content .block-title,
    .section-photograph .block .box .box-inner .block-content .block-title {
        font-size: 16px;
    }

    .list_area.section-photograph .block .box {
        margin-bottom: 25px;
    }

    /*five*/
    .five-block .box {
        flex-basis: 50%; /* =1/2 */
    }

        .five-block .box:nth-child(4) {
            margin-left: 0;
        }

        .five-block .box:nth-child(5) {
            margin-left: 25%;
        }

    /*--------full-map--------*/
    .full-map, .section_area .area-inner.full-map {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

        .full-map .map-box .map-tower-panel:before {
            bottom: -60px;
        }

        .full-map .map-box .map-tower-panel:after {
            content: none;
        }

        .full-map .map-box .map-title {
            left: -5px;
        }


    /*list*/
    .bg-panel {
        padding: 12px 22px;
    }

    .list_area {
        padding: 30px 0;
    }

        .list_area .bg-panel {
            padding: 40px 20px;
        }

    .list-news .block .box {
        padding: 0 10px;
        margin-bottom: 20px;
    }

    .list-construction .block .box .box-inner .block-content {
        padding: 17px 55px 15px calc(15px + 1%);
    }

    .list-construction .block .box .box-inner .icon-arrow::after {
        height: 38px;
        width: 38px !important;
        right: calc(15px + 1%);
        top: 40px;
    }

    /*-----table-----*/
    .css-table {
        display: block;
    }

    .css_tr {
        display: block;
    }

    .css_th, .css_td {
        display: block;
    }

    .list-report .css-table .css_tr .css_th:not(:first-child), .list-report .css-table .css_tr .css_td:not(:first-child) {
        text-align: left;
    }

    .list-report .css_th {
        display: none;
    }

    .list-report .css_td {
        font-size: 18px;
        border: none;
    }

    .list-report .css-table .css_tr .css_td:nth-child(2) {
        float: left;
        padding-top: 2px;
    }

    .list-report .css-table .css_tr .css_td:last-child {
        text-align: right;
        padding-top: 2px;
    }

    .list-report .icon-file-pdf {
        width: 16px;
    }

        .list-report .icon-file-pdf + span {
            display: inline-block;
        }

    /*--------detail-------*/
    .detail_area > div {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .detail_area .bg-blue-light:not(.section-photograph) {
        padding: 5px 0 30px 0;
    }

    .detail_area h1 {
        font-size: 20px;
        font-weight: 500;
    }

    .detail_area blockquote {
        margin: 30px 0 30px -15px;
        font-size: 19px;
        width: 90%;
    }

    .detail_area .detail-top + blockquote {
        margin-top: -45px;
    }

    .detail_area p,
    .detail_area ul li, .detail_area ol {
        font-size: 16px;
    }

    .detail_area figcaption {
        font-size: 14px;
    }

    .detail_area .row:not(.block) {
        flex-direction: column;
    }

    /*table*/
    .detail_area table thead th {
        font-weight: 500;
    }

    .detail_area table td, .detail_area table th {
        padding: 4px 2px;
        font-size: 13px;
    }

    /*------single------*/
    .single_area {
        padding: 30px 0;
    }

        .single_area > .auto-container-xs > div + div {
            margin-top: 30px;
        }

    .panel-two {
        flex-direction: column;
    }

        .panel-two.reverse {
            flex-direction: column-reverse;
        }

        .panel-two .panel-txt,
        .panel-two .panel-img {
            display: block !important;
            width: 100% !important;
            float: initial;
            padding-right: 0 !important;
        }

        .panel-two:not(.reverse) > div:first-child,
        .panel-two.reverse > div:last-child {
            padding-bottom: 30px;
        }


        .panel-two .panel-img {
            max-width: 500px;
            margin: 0 auto;
        }

        .panel-two .panel-txt h4, .title-circle {
            font-size: 19px;
            margin-bottom: 35px;
        }

        .panel-two .panel-txt p, .panel-txt p,
        .detail_area ul li, .detail_area ol li {
            font-size: 16px;
        }

            .panel-two .panel-txt p:last-child, .panel-txt p:last-child {
                margin: 0;
            }

        .panel-two .panel-txt .note {
            font-size: 14px;
            padding-top: 20px;
        }

    .single_area blockquote {
        font-size: 20px;
    }

    .single_area .image-block {
        margin-left: -12px !important;
        margin-right: -12px !important;
        margin-bottom: -12px;
    }

        .single_area .image-block .box {
            flex-basis: 33.33%; /* =1/3 */
            padding: 0 12px;
            padding-bottom: 24px;
        }

    .single_area .detail-txt-box {
        font-size: 20px;
        padding: 20px 20px;
    }

    .single-menu .col-sm-4 + .col-sm-4 {
        margin-top: 8px;
    }

    .single-menu .btn-arrow {
        min-width: 90%;
    }
    /*------timeline------*/
    .history_area {
        padding: 40px 5px;
    }

        .history_area > div {
            margin-right: 0;
        }

    .timeline::before {
        width: 2px;
        left: -1px;
    }

    .timeline::after {
        left: -6px;
    }

    .timeline > li.top {
        left: -9px !important;
    }

    .timeline > li {
        width: calc(100% - 25px) !important;
        margin-top: 0 !important;
        left: 25px !important;
    }

        .timeline > li.right .date, .timeline > li.right .title,
        .timeline > li.left .date, .timeline > li.left .title,
        .timeline > li.center {
            text-align: left;
        }

        .timeline > li .year {
            margin-bottom: 25px;
            margin-left: -10px;
        }
}


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

/*min*/
@media (max-width: 600px) {
}

@media (max-width: 400px) {
    .bannerArea-item .banner-box h1,
    .bannerArea-item .banner-box h2 {
        font-size: 24px;
    }

    .bannerArea-item .banner-box p {
        font-size: 14px;
        padding-bottom: 24px;
    }

    .bannerArea-item .banner-box .btn {
        height: 34px;
        padding-top: 9px;
    }

    .top-bannerArea .banner-box {
        top: 5%;
    }

        .top-bannerArea .banner-box h1,
        .top-bannerArea .banner-box h2 {
            font-size: 24px;
        }

        .top-bannerArea .banner-box h3 {
            font-size: 17px;
        }

        .top-bannerArea .banner-box .empty-message {
            font-size: 30px;
            bottom: 10%;
        }
}