/* Add by Pundarik - ERC */

.dps_cont {
    width: 100%;
    height: auto;
    margin: 0px auto 48px auto;
    display: block;
    flex-wrap: wrap;
    background-color: rgba(239, 242, 244, 0.5);
    padding: 32px 50px;
    border-radius: 4px;
    font-family: 'Sarabun';
    max-width: 1170px;
}

.dsp_box {
    width: 49%;
    float: left;
    margin-left: 1%;
    background-image: url('../img/dps-bg-1.jpg');
    background-size: cover;
    background-position: center;
    height: 250px;
    border-radius: 4px;
}

.dsp_box:hover,
.dsp_box-2:hover {
    opacity: 0.9;
    transition: 0.8s;
    transform: scale(1.01)
}

.dsp_box:hover h3,
.dsp_box-2:hover h3 {
    color: #6ab96f;
}

.dsp_box-2 {
    width: 49%;
    float: left;
    margin-left: 1%;
    background-image: url('../img/dps-bg-2.jpg');
    background-size: cover;
    background-position: center;
    height: 250px;
    border-radius: 4px;
}

.dsp_box h3,
.dsp_box-2 h3 {
    width: 100%;
    z-index: 1;
    color: #FFF;
    font-size: 1.7em;
    padding: 18% 1%;
    display: inline-block;
    text-align: center;
    font-family: 'dbheavent' !important;
}

.eia_boxs {
    width: 49%;
    float: left;
    margin-left: 1%;
    background-image: url('../img/img_eia_.jpg');
    background-size: cover;
    background-position: center;
    height: 250px;
    border-radius: 4px;
}

.eia_boxs:hover,
.eia_boxs2:hover {
    opacity: 0.9;
    transition: 0.8s;
    transform: scale(1.01)
}

.eia_boxs:hover h3,
.eia_boxs2:hover h3 {
    color: #6ab96f;
}

.eia_boxs2 {
    width: 49%;
    float: left;
    margin-left: 1%;
    background-image: url('../img/img_eia_2.jpg');
    background-size: cover;
    background-position: center;
    height: 250px;
    border-radius: 4px;
}

.eia_boxs h3,
.eia_boxs2 h3 {
    width: 100%;
    z-index: 1;
    color: #FFF;
    font-size: 1.7em;
    padding: 18% 1%;
    display: inline-block;
    text-align: center;
}

select.year-qt {
    width: 30%;
    float: left;
    margin-left: 2rem;
    font-size: 16px;
    line-height: 26px;
    text-align: center;
    color: rgba(255, 255, 255, 1);
    background-color: #004370;
    border-radius: 4px;
    padding: 10px 16px 10px 16px;
    transition: 0.2s all;
    cursor: pointer;
    filter: saturate(1);
    font-family: 'Sarabun';
    background-image: url('../img/select.svg');
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
}

p.dps_overview {
    font-family: 'Sarabun';
    font-size: 17px;
}

.dps-result {
    width: 100%;
    background-color: rgba(239, 242, 244, 0.5);
    height: auto;
    margin: auto;
    display: inline-block;
    padding: 32px 83px;
}

.download-all {
    display: block;
    border-bottom: 1px solid #c7cdd2;
    padding-bottom: 30px;
}

p.dps-file {
    font-family: 'Sarabun';
    font-size: 17px;
    width: 70%;
    float: left;
}

.dps-download {
    text-align: right;
    width: 20%;
    font-family: 'Sarabun';
}

.download-spp {
    margin-top: 2rem;
}

.dpsdoc_col {
    width: 31.2%;
    height: 80px;
    min-height: 78px;
    margin: 1%;
    position: relative;
    transition: 0.1s;
    padding: 16px 16px 12px 16px;
    color: rgb(67, 67, 67);
    background-color: rgba(255, 255, 255, 1);
    border: 0px solid rgba(216, 216, 216, 0.8);
    border-radius: 4px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.03) 1px 1px 1px 1px;
    box-shadow: rgba(0, 0, 0, 0.03) 1px 1px 1px 1px;
    float: left;
}

.dpsdoc_col:hover {
    background-color: #004370;
    color: #FFF;
}

.dpsdoc_col:hover .dpsdoc_col_ico {
    color: #FFF;
}

.dpsdoc_sect_main {
    width: 100%;
    height: auto;
    margin: auto;
    padding: 64px 2% 64px 2%;
    background-color: rgba(239, 242, 244, 0.8);
    z-index: 15;
    position: relative;
}

.dpsdoc_col_ico {
    width: 32px;
    height: auto;
    float: left;
    letter-spacing: 0.3px;
    margin-right: 2px;
    font-size: 24px;
    color: rgba(0, 67, 112, 1);
}

.dpsdoc_col_l {
    width: 80%;
    height: auto;
    float: left;
    letter-spacing: 0.3px;
}

.dpsdoc_col_r {
    width: 12%;
    height: auto;
    float: right;
    text-align: right;
    color: #4A84B4;
    font-size: 15px;
    cursor: pointer;
    transition: 0.4s;
    position: absolute;
    right: 16px;
    bottom: 8px;
    filter: saturate(1);
}

.dpsdoc_col_r:hover {
    color: #6ab96f;
    transition: 0.4s;
    filter: saturate(1.5);
}

.title-fix {
    text-transform: none;
}


/* Add by Pundarik - Sustain */

.sustain_cont {
    width: 100%;
    height: auto;
    margin: auto;
    display: inline-block;
    flex-wrap: wrap;
    background-color: rgba(239, 242, 244, 0.5);
    padding: 32px 50px;
    border-radius: 4px;
    font-family: 'Sarabun';
}

.sustain_box {
    width: 48%;
    float: left;
    margin-left: 1%;
    background-image: url('../img/sustain-bg-doc.jpg');
    background-size: cover;
    background-position: center;
    height: 250px;
    margin-bottom: 1%;
}

.sustain_box_2 {
    width: 48%;
    float: left;
    margin-left: 1%;
    background-image: url('../img/sustain-bg-doc-02.jpg');
    background-size: cover;
    background-position: center;
    height: 250px;
    margin-bottom: 1%;
}

.sustain_box:hover,
.sustain_box_2:hover {
    opacity: 0.9;
    transition: 0.8s;
    transform: scale(1.01)
}

.sustain_box h3,
.sustain_box_2 h3 {
    width: 100%;
    z-index: 1;
    color: #FFF;
    font-size: 1.7em;
    padding: 18% 1%;
    display: inline-block;
    text-align: center;
}

.sustain_box:hover h3,
.sustain_box_2:hover h3 {
    color: #6ab96f;
}

@media only screen and (max-height: 850px) {
    .about_comp_sub {
        font-size: 28px;
        margin-top: 2.5%;
        margin-left: 0.5%;
    }
    .about_ani_main {
        transform: translate(-50%, -4%) scale(0.85);
    }
}

@media only screen and (max-height: 820px) {
    .about_comp_sub {
        font-size: 28px;
        margin-top: 2.7%;
        margin-left: 0.5%;
    }
    .timeline_main_sect {
        bottom: 420px !important;
    }
}

@media only screen and (max-height: 768px) {
    .about_comp_sub {
        font-size: 28px;
        margin-top: 4.7%;
        margin-left: 0.5%;
    }
}

@media only screen and (max-height: 640px) {
    .about_comp_sub {
        font-size: 28px;
        margin-top: 5.5%;
        margin-left: 0.5%;
    }
}

@media only screen and (max-width: 1120px) {
    .overview_bg_sect {
        padding: 200px 4% 80px 4%;
    }
    .dps_cont {
        width: 100%;
        padding: 3%;
    }
    .dsp_box,
    .dsp_box-2 {
        width: 49%;
        margin-bottom: 1%;
        height: auto;
        border-radius: 3px;
    }
    .eia_boxs,
    .eia_boxs2 {
        width: 49%;
        margin-bottom: 1%;
        height: auto;
        border-radius: 3px;
    }
    .dps-result {
        padding: 3%;
    }
    .dpsdoc_col {
        width: 47.5%;
    }
    .sustain_box,
    .sustain_box_2 {
        width: 100%;
        height: auto;
    }
}

@media only screen and (max-width: 640px) {
    .dsp_box,
    .dsp_box-2 {
        width: 100% !important;
        margin-bottom: 1%;
        height: auto !important;
        border-radius: 3px;
    }
    .eia_boxs,
    .eia_boxs2 {
        width: 100% !important;
        margin-bottom: 1%;
        height: auto !important;
        border-radius: 3px;
    }
    .dpsdoc_col {
        width: 100% !important;
    }
}

@media only screen and (max-width: 991px) {
    .dps_cont {
        width: 100%;
        padding: 3%;
    }
    .dsp_box,
    .dsp_box-2 {
        width: 49%;
        margin-bottom: 1%;
        height: 180px;
        border-radius: 3px;
    }
    .eia_boxs,
    .eia_boxs2 {
        width: 49%;
        margin-bottom: 1%;
        height: 180px;
        border-radius: 3px;
    }
    .dps-result {
        padding: 3%;
    }
    .dpsdoc_col {
        width: 47.5%;
    }
    .about_sect3_col {
        width: 100%;
        height: auto;
        transition: 0.3s all;
        cursor: pointer;
        margin: 1.5% 1.5% 32px 1.5%;
    }
    .about_sect3_title {
        width: 40%;
        margin: 0px 0px 24px 0px;
        float: left;
    }
    .about_sect3_txt {
        width: 60%;
        height: auto;
        margin: unset;
        text-align: left;
        float: right;
    }
    .board_cont_col {
        width: 31.2%;
        margin: 1%;
    }
    .board_cont_col:hover {
        width: 31.2%;
    }
    .overview_cont_txt {
        top: 50%;
        right: 0%;
        transform: translate(-0%, 0%);
    }
    .corp_vid_col {
        width: 31.2%;
        height: auto;
    }
    .vision_cont_r {
        padding: 44px 32px;
    }
    .vision_cont2_r {
        padding: 44px 32px;
    }
    .recognit_col {
        width: 22.9%;
    }
    .overview_cont_l {
        width: 30%;
    }
    .overview_cont_r {
        width: 65%;
    }
    .newlist_related_title {
        width: 100%;
    }
    .newlist_related_sect {
        width: 100%;
    }
    .logo_gulf_icon {
        width: 100%;
        max-width: 170px;
        height: auto;
    }
    .leaf_txt_title {
        font-size: 40px;
        line-height: 52px;
    }
    .leaf_txt_cont {
        font-size: 17px;
        line-height: 28px;
    }
    .leaf_txt_details {
        font-size: 20px;
        line-height: 28px;
    }
    .leaf_img_cont {
        width: 60%;
        padding: 24px 32px 32px 32px;
    }
    .about_comp_sub {
        font-size: 21px;
        line-height: 28px;
        margin-top: 0%;
    }
}

@media only screen and (max-width: 860px) {
    .footer_ani_sect {
        width: 100%;
        height: auto;
        padding: 32px 1% 32px 3%;
        background-color: rgba(248, 248, 248, 1);
        margin: auto;
        display: flex;
    }
    select.year-qt {
        width: 100%;
        padding: 10px;
        margin-left: 0;
        margin-bottom: 10px;
    }
    select.year-qt:after {
        content: "\e93a";
        display: block;
    }
    p.dps-file {
        text-align: center;
        width: 100%;
        float: left;
        margin-bottom: 10px;
    }
    .dps-download {
        text-align: center;
        width: 100%;
    }
}