/* imac 27 4k inch Styles here */
/* @media only screen
and (max-width : 2880px)
and (max-height : 5120px) {
#banner { height: 800px; }
#banner .banner-content p {padding-right: 4vw;}

} */
/* imac 21 4k inch Styles here */
@media (min-width: 1920px) and (max-width: 2560px) {

}
@media only screen
and (max-width : 2304px)
and (max-height : 4096px) {
/* Styles here */
/*    #banner { height: 800px; }
#banner .banner-content p {padding-right: 4vw;} */
}

/* imac 21 inch Styles here */
@media only screen
and (max-width : 1080px)
and (max-height : 1920px) {
/*       #banner { height: 800px; }
#banner .banner-content p {padding-right: 4vw;} */
/* Styles here */
}

@media (min-width: 1920px) and (max-width: 2560px) {


}


@media (min-width: 1600px) and (max-width: 1919px) {

}


@media only screen and (min-width: 1400px) and (max-width: 1599px) {
.smallTitle {font-size: 16px;}
.page-title2,.page-title3,.page-title { font-size: 32px; }
#banner .container .baner_content h1 {font-size: 45px;}
#banner .container .baner_content h1 span {height: 55px;}

.nosInfo .nos {font-size: 40px;}
.nosInfo .nos .cr {font-size: 20px;}
#chairman .chairmanright {
    margin-top: 70px;
}
#CreateValue .nosInfo small {font-size: 16px;}
#whatwedo #rightContent {
    height: 750px;
}

#reserch {height: 740px;}

}

@media only screen and (min-width: 1200px) and (max-width: 1399px)  {
.smallTitle {font-size: 16px;}
.page-title2,.page-title3,.page-title { font-size: 32px; }
#banner .container .baner_content h1 {font-size: 45px;}
#banner .container .baner_content h1 span {height: 55px;}

.nosInfo .nos {font-size: 36px;}
.nosInfo .nos .cr {font-size: 20px;}
#chairman .chairmanright {
    margin-top: 70px;
}
#CreateValue .nosInfo small {font-size: 16px;}
#whatwedo #rightContent {
    height: 750px;
}

#reserch {height: 710px;}
#reserch p {margin: 20px 0px;font-size: 16px;}

#bannerBottom .desc {padding: 0px 280px;}
.nosInfo small {font-size: 16px;}
#chairman .chairmanright .q {font-size: 18px;}
.commonCta {padding: 10px 12px;font-size: 12px;}
#whatwedo .whatwedoLeft {padding-top: 40px;}
#whatwedo .accordion-item .accordion-button {font-size: 28px;}

#whatwedo .right_wrap {
    position: absolute;
    top: 160px;
    left: 60px;
}

#whatwedo h3 {margin-top: 20px;}
#CreateValue .nosInfo .nos {font-size: 36px;}
#esg .swiper-slide .esg_mid {padding: 60px 60px;height: 600px;}
#downloadCenter .downloadAnnualReportBt,#downloadCenter .downloadAnnualReport {font-size: 15px;}
#downloadCenter .downloadAnnualReportBt img,#downloadCenter .downloadAnnualReport img { width: 40px;}

}


@media only screen and (min-device-width: 768px) and (max-device-width: 1199px) and (orientation: landscape) 

{

.row { margin: 0px; margin: 0px; }
.page-title {font-size: 32px!important;line-height: 101%!important;}
#header img { width: 115px; }
#header { padding-left: 10px;  }

.smallTitle {font-size: 16px;}
.page-title2,.page-title3,.page-title {font-size: 30px;}
.fs22 {
font-size: 20px;
line-height: 28px;
}
.nosInfo small {font-size: 18px;}
#header {padding: 10px 0px;}
#header .common-container .logo-btn-wrp {padding-right: 70px;}
#header .container .logo img {
width: 120px;
}
#banner .container .baner_content h1 {font-size: 30px;}
#banner .container .baner_content h1 span {height: 42px;}
#banner .container .baner_content .reportBt {margin-top: 20px; padding-bottom: 70px; }
#banner .container {justify-content: end;}
#banner .container .scrollDown { display: none; }
#banner .container .baner_content h3 {font-size: 20px;}
#wedont {padding: 20px 0px;}
#wedont .wedontleft,#wedont .wedontright .wedontSlider .swiper-slide h2 {font-size: 25px;line-height: 1.1;}
#wedont .wedontleft {margin-right: 9px;}
#wedont .wedontright .wedontSlider {height: 55px; margin-top: -1px; }
#wedont {height: 530px;}
#wedont .horse-pawn {
position: absolute;
left: -50px;
bottom: 0px;
width: 140px;
}
#aboutUs{padding: 30px 0px;}
#aboutUs .highlights h2{top: 0px;position: relative;}
#aboutUs .highlights {margin: 30px auto;}
#aboutUs .highlight-value{font-size: 36px;}
#aboutUs .highlight-label,.perfromances .highlight-label {font-size: 14px;}
#aboutUs .highlights h2 {font-size: 16px;}
#ourPresence {padding: 30px 0px;}
.page-title2,.page-title3 br, .page-title br { display: none; }
#ourPresence .regulators,.perfromances .highlights h2 { position: relative;left: 0px;bottom: 10px; }
#ourPresence .regulators ul li {font-size: 12px;}
.mobilemap { padding: 3% 0px; }

#Chairperson {padding: 30px 0px;}
#Chairperson .chairperson_Right {
padding-top: 20px;
padding-left: 0px;
}
#Chairperson .chairperson_Right .quote {font-size: 22px;}
#Chairperson .nav-tabs { position: relative; justify-content: center; margin-bottom: 25px; }
#Chairperson .nav-tabs .nav-link {font-size: 13px;width: 105px;padding: 10px 3px; line-height: 1; }
#ResponsibleApproach,.perfromances .highlights {padding: 0px 0px;}
.perfromances .highlights { margin: 0px; }
.perfromances .highlights h2 {top: 0px;}
.perfromances { height: auto; padding: 30px 0px; }
.perfromances .highlight-value {max-width: max-content;}
.perfromances .arrow-up {
position: absolute;
right: 123px;
top: 20px;
transform: scale(0.7);
}
.perfromances .highlight-label {padding-right: 20px; text-align: start; }
.perfromances .highlight-value {
font-size: 28px;
}
.perfromances .highlight-row { display: block;  padding-bottom: 20px; }
#ResponsibleApproach .item .horse-pawn { display: none; }
#ResponsibleApproach .wrapper {
height: auto;
}
#ResponsibleApproach .list { display: block; }
#ResponsibleApproach .item { position: relative; }
#our-year-in-review .our-year-right {
padding: 10px 0px 30px 10px;
}
.our-year-right .row { text-align: center; }
#our-year-in-review .our-year-right .mid {
margin-top: 10px;
width: 200px;
text-align: center;
margin-left: 50px;
}
#our-strategic-direction {padding: 30px 0px;}
#our-strategic-direction .strategicCards {padding: 20px;}
#our-strategic-direction .strategicCards .hoverText {opacity: 1;
visibility: visible;
transform: translateY(0px);}
#our-strategic-direction .strategicCards .hoverText p {font-size: 16px;
line-height: 23px;}
#our-strategic-direction .strategicCards .arrow { display: none; }
#our-strategic-direction .strategicCards .hoverText ul li {font-size: 16px;}
#our-strategic-direction .strategicCards h2 {font-size: 18px;}
#our-strategic-direction { padding-bottom: 100px; }

#our-strategic-direction .commonCta {
margin-top: 40px;
}
#governance {
padding: 40px 0px;
padding-bottom: 0px;
}

#scope{padding: 20px 0px;}
#scope .accordion-button {font-size: 18px;}
#scope td,#scope .td-flex p {font-size: 14px;line-height: 19px; background-position: left 3px;}
.accordion-body { overflow-x: scroll; }
#scope table {
width: 680px;
border-collapse: collapse;
}
#downloadCenter .pawns {
position: relative;
right: 0px;
bottom: 0px;
transform: scale(0.5);padding-top: 180px;
}
#downloadCenter { padding-bottom: 0px; }
#downloadCenter .downloadBt {padding: 20px 54px;font-size: 16px;}
#our-strategic-direction .swiper,#governance .swiper {
overflow: hidden;
}
#ResponsibleApproach .item .checkbox {
position: absolute;
left: -510px;
bottom: 0px;
}
#downloadCenter .pawns span:nth-child(1) {
    left: -40px;
}
#downloadCenter .pawns span:nth-child(2) {
    left: 120px;
    top: 28px;
}
#downloadCenter .pawns span:nth-child(3) {
    left: 240px;
}

#our-year-in-review .our-year-right .cricle1 img,#our-year-in-review .our-year-right .cricle2 img {
    width: 140px;
}
#our-year-in-review .our-year-right .mid p {}
.perfromances .arrow-up.exleft {
    right: 130px;
}
}


@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) 
{

.row { margin: 0px; margin: 0px; }
.page-title {font-size: 32px!important;line-height: 101%!important;}
#header img { width: 115px; }
#header { padding-left: 10px;  }

.smallTitle {font-size: 16px;}
.page-title2,.page-title3,.page-title {font-size: 30px;}
.fs22 {
font-size: 20px;
line-height: 28px;
}
.nosInfo small {font-size: 18px;}
#header {padding: 10px 0px;}
#header .common-container .logo-btn-wrp {padding-right: 70px;}
#header .container .logo img {
width: 120px;
}
#banner .container .baner_content h1 {font-size: 30px;}
#banner .container .baner_content h1 span {height: 42px;}
#banner .container .baner_content .reportBt {margin-top: 20px; padding-bottom: 70px; }
#banner .container {justify-content: end;}
#banner .container .scrollDown { display: none; }
#banner .container .baner_content h3 {font-size: 20px;}

#wedont {padding: 20px 0px;}
#wedont .wedontleft,#wedont .wedontright .wedontSlider .swiper-slide h2 {font-size: 25px;line-height: 1.1;}
#wedont .wedontleft {margin-right: 9px;}
#wedont .wedontright .wedontSlider {height: 55px; margin-top: -1px; }
#wedont {height: 530px;}
#wedont .horse-pawn {
position: absolute;
left: -50px;
bottom: 0px;
width: 140px;
}
#aboutUs{padding: 30px 0px;}
#aboutUs .highlights h2{top: 0px;position: relative;}
#aboutUs .highlights {margin: 30px auto;}
#aboutUs .highlight-value{font-size: 36px;}
#aboutUs .highlight-label,.perfromances .highlight-label {font-size: 14px;}
#aboutUs .highlights h2 {font-size: 16px;}
#ourPresence {padding: 30px 0px;}
.page-title2,.page-title3 br, .page-title br { display: none; }
#ourPresence .regulators,.perfromances .highlights h2 { position: relative;left: 0px;bottom: 10px; }
#ourPresence .regulators ul li {font-size: 12px;}
.mobilemap { padding: 3% 0px; }

#Chairperson {padding: 30px 0px;}
#Chairperson .chairperson_Right {
padding-top: 20px;
padding-left: 0px;
}
#Chairperson .chairperson_Right .quote {font-size: 22px;}
#Chairperson .nav-tabs { position: relative; justify-content: center; margin-bottom: 25px; }
#Chairperson .nav-tabs .nav-link {font-size: 13px;width: 105px;padding: 10px 3px; line-height: 1; }
#ResponsibleApproach,.perfromances .highlights {padding: 0px 0px;}
.perfromances .highlights { margin: 0px; }
.perfromances .highlights h2 {top: 0px;}
.perfromances { height: auto; padding: 30px 0px; }
.perfromances .highlight-value {max-width: max-content;}
.perfromances .arrow-up {
position: absolute;
right: 123px;
top: 20px;
transform: scale(0.7);
}
.perfromances .highlight-label {padding-right: 20px; text-align: start; }
.perfromances .highlight-value {
font-size: 28px;
}
.perfromances .highlight-row { display: block;  padding-bottom: 20px; }
#ResponsibleApproach .item .horse-pawn { display: none; }
#ResponsibleApproach .wrapper {
height: auto;
}
#ResponsibleApproach .list { display: block; }
#ResponsibleApproach .item { position: relative; }
#our-year-in-review .our-year-right {
padding: 10px 0px 30px 10px;
}
.our-year-right .row { text-align: center; }
#our-year-in-review .our-year-right .mid {
margin-top: 10px;
width: 200px;
text-align: center;
margin-left: 50px;
}
#our-strategic-direction {padding: 30px 0px;}
#our-strategic-direction .strategicCards {padding: 20px;}
#our-strategic-direction .strategicCards .hoverText {opacity: 1;
visibility: visible;
transform: translateY(0px);}
#our-strategic-direction .strategicCards .hoverText p {font-size: 16px;
line-height: 23px;}
#our-strategic-direction .strategicCards .arrow { display: none; }
#our-strategic-direction .strategicCards .hoverText ul li {font-size: 16px;}
#our-strategic-direction .strategicCards h2 {font-size: 18px;}
#our-strategic-direction { padding-bottom: 100px; }

#our-strategic-direction .commonCta {
margin-top: 40px;
}
#governance {
padding: 40px 0px;
padding-bottom: 0px;
}

#scope{padding: 20px 0px;}
#scope .accordion-button {font-size: 18px;}
#scope td,#scope .td-flex p {font-size: 14px;line-height: 19px; background-position: left 3px;}
.accordion-body { overflow-x: scroll; }
#scope table {
width: 680px;
border-collapse: collapse;
}
#downloadCenter .pawns {
position: relative;
right: 0px;
bottom: 0px;
transform: scale(0.5);padding-top: 180px;
}
#downloadCenter { padding-bottom: 0px; }
#downloadCenter .downloadBt {padding: 20px 54px;font-size: 16px;}
#our-strategic-direction .swiper,#governance .swiper {
overflow: hidden;
}
#ResponsibleApproach .item .checkbox {
position: absolute;
left: -510px;
bottom: 0px;
}
#downloadCenter .pawns span:nth-child(1) {
    left: -40px;
}
#downloadCenter .pawns span:nth-child(2) {
    left: 120px;
    top: 28px;
}
#downloadCenter .pawns span:nth-child(3) {
    left: 240px;
}

#our-year-in-review .our-year-right .cricle1 img,#our-year-in-review .our-year-right .cricle2 img {
    width: 140px;
}
#our-year-in-review .our-year-right .mid p {}
.perfromances .arrow-up.exleft {
    right: 130px;
}
}

/* Extra small */
@media (min-width: 320px) and (max-width: 767px)
{

.row { margin: 0px; margin: 0px; }
.page-title {font-size: 32px!important;line-height: 101%!important;}
#header img { width: 115px; }
#header { padding-left: 10px;  }

.smallTitle {font-size: 16px;}
.page-title2,.page-title3,.page-title {font-size: 25px;}
.fs22 {
font-size: 20px;
line-height: 28px;
}
.nosInfo small {font-size: 16px;}
#header {padding: 10px 0px;}
#header .common-container .logo-btn-wrp {padding-right: 70px;}
#header .container .logo img {
width: 120px;
}
#esg .esgSlider {margin-top: 70px;}
#banner .container .baner_content h1 {font-size: 25px;}
#banner .container .baner_content h1 span {height: 42px;}
#banner .container .baner_content .reportBt {margin-top: 20px; padding-bottom: 70px; }
#banner .container {justify-content: end;}
#banner .container .scrollDown { display: none; }
#banner .container .baner_content h3 {font-size: 20px;}
#banner .BannerContainer {padding: 0px 20px;padding-top: 100px;}
#banner .BannerContainer h2 {font-size: 36px;}
#banner .BannerContainer h3 {font-size: 32px;}
#bannerBottom { height: auto; }
#bannerBottom .hikalLogo {
    margin-top: 0px;
}
#bannerBottom .desc {padding: 0px 0px;font-size: 20px;}
#bannerBottom .big-dna1 {
    position: relative;
    bottom: 0px;
    left: 0px;
    pointer-events: none;
    margin-top: 20px;
}
#bannerBottom .big-dna1 img { width: 150px; }
#bannerBottom .hikal-symbol {opacity: 0.5;}
#Innovating {padding-top: 30px;}
#Innovating .FinancialHighlights {padding: 20px 10px;}
#Innovating .small-dna1 { display: none; }
.nosInfo .nos {font-size: 34px;}
.nosInfo .nos .cr {
    font-size: 17px;
}
#chairman {padding-top: 30px; padding-bottom: 30px; }
.ser-line { width: 100%; }
#chairman .chairmanright {
    margin-top: 20px;
}
#chairman .chairmanright .q {font-size: 20px;}
.commonCta {padding: 10px 10px;font-size: 12px;}
#Global {padding: 30px 0px;}
.map {padding-top: 30px;}
#kpi {padding-top: 30px;}
#kpi .swiper-button-next, #kpi .swiper-button-prev {
    top: 130px;
}
#kpi .swiper-button-next {right: 20px;}
#kpi .longterm {width: 100%;font-size: 22px;height: 155px;}
#whatwedo .whatwedoLeft {width: 100%;padding-top: 30px;}
#whatwedo .accordion-item .accordion-button {font-size: 23px;}
p {font-size: 16px;}
#whatwedo #rightContent { display: none; }
#whatwedo { padding-bottom: 30px; }

#CreateValue {padding: 20px 0px;}
#CreateValue #data1 .input-wrap {padding: 20px 0px;height: auto;}
#CreateValue .nosInfo .nos {font-size: 32px;}
#CreateValue .nosInfo small,#CreateValue .data-text h6 {font-size: 16px;}
#reserch {height: auto;background-color: #00437b;}
#reserch .reserchanner {position: relative;}
#reserch .container { padding-top: 20px; }
#reserch .container p {
    margin: 10px 0px;
}
#reserch .swiper-pagination-bullet {width: 8px;}
#esg {padding: 30px 0px;}
.blue-ser { width: 100%; }
#esg .swiper-slide .esgImg { position: relative; border-radius: 10px; }
#esg .swiper-slide .esg_mid {padding: 10px 10px;background-color: #00437b; height: auto; }
#esg .swiper-button-next, #esg .swiper-button-prev {
    top: 150px;
}
#esg .Info_wrap { margin-top: 30px; height: 100%; padding: 12px; }
#esg .Info_wrap h5 { font-size: 18px; }
#esg .nosInfo .nos {font-size: 30px;}
#awards {padding: 20px 0px;}

#awards .mt-5 {
    margin-top: 1rem !important;
}
#downloadCenter {padding: 30px 0px;}
#downloadCenter .page-title2 { margin-top: 30px; }
#esg .swiper-button-next {right: 20px;}
#CreateValue .slider-button {width: 30px; height: 30px;place-content: center;
        text-align: center;}

#CreateValue .mt-5 {
    margin-top: 2rem!important;
}

#Global .mt-5 {
    margin-top: 1rem !important;
}

#CreateValue #catgory-slider {width: 100%;}
#CreateValue .category-button {width: 145px;padding-left: 30px;background-size: 15px;}
#CreateValue #data3 .output-wrap,#CreateValue #data4 .outcome-wrap {padding: 20px 10px;
    padding-left: 10px;background-color: #e1f3f3; height: auto;}
#CreateValue .slider-button {background-color: #00437b;}
    #CreateValue .slider-button.swiper-button-disabled {
    opacity: 1;
    visibility: visible;
}
.mobil-pb-l { padding-left: 0px !important; }
.chairmanright .commonCta.whiteCta { margin-bottom: 10px; }

}