@charset "utf-8";

/* CSS Document */

.focus_txt {
  background: url(fouces_txt.png);
  padding: 22px 30px;
  position: absolute;
  bottom: 30px;
  left: 30px;
  color: #fff;
  max-width: 90%
}

.swiper-container .swiper-slide {
  position: relative
}

.focus_txt h6 {
  font-size: 16px;
  margin-bottom: 20px;
}

.focus_txt h5 {
  font-size: 26px;
  margin-bottom: 20px;
  font-weight: normal;
}

.focus_txt p {
  font-size: 14px;
  line-height: 28px;
}

#swiper_top_pagination {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 30px
}

#swiper_top_pagination span {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: #fff;
  margin: 0 10px;
  box-shadow: 3px 3px 3px #e2e2e2
}

#swiper_top_pagination .swiper-active-switch {
  width: 100px;
  background: #126aaa
}

.search_tab li {
  float: left;
  height: 50px;
  line-height: 50px;
  color: #666;
  padding: 0 20px 0 50px;
  font-size: 18px;
  border-right: 1px solid #e2e5e7;
  border-radius: 0 8px 0 0;
  cursor: pointer;
}

.search {
  width: 1000px;
}

.search_ipt {
  height: 56px;
  width: 888px;
  border: 1px solid #dedddd;
  border-radius: 4px;
  -webkit-appearance: none;
  padding: 0
}

.search_sub {
  background: url(search_btn.png) no-repeat center #126aaa;
  width: 100px;
  height: 58px;
  border-radius: 4px;
  float: right;
  border: 0
}

.search_word {
  font-size: 16px;
  color: #666;
  margin-top: 18px
}

.search_word a {
  margin-left: 20px
}

.search_box {
  background: #fff;
  padding: 40px 0;
}

.ser_icon1 {
  background: url(search_icon1.png) no-repeat 16px center #f2f2f2;
}

.ser_icon2 {
  background: url(search_icon2.png) no-repeat 16px center #f2f2f2;
}

.ser_icon3 {
  background: url(search_icon3.png) no-repeat 16px center #f2f2f2;
}

.ser_icon4 {
  background: url(search_icon4.png) no-repeat 16px center #f2f2f2;
}

.ser_icon5 {
  background: url(search_icon5.png) no-repeat 16px center #f2f2f2;
}

.ser_icon6 {
  background: url(search_icon6.png) no-repeat 16px center #f2f2f2;
}

.ser_icon7 {
  background: url(search_icon7.png) no-repeat 16px center #f2f2f2;
}

.search_tab li.now {
  color: #fff
}

.ser_icon1.now {
  background: url(search_icon11.png) no-repeat 16px center #0d6cac;
}

.ser_icon2.now {
  background: url(search_icon22.png) no-repeat 16px center #0d6cac;
}

.ser_icon3.now {
  background: url(search_icon33.png) no-repeat 16px center #0d6cac;
}

.ser_icon4.now {
  background: url(search_icon44.png) no-repeat 16px center #0d6cac;
}

.ser_icon5.now {
  background: url(search_icon55.png) no-repeat 16px center #0d6cac;
}

.ser_icon6.now {
  background: url(search_icon66.png) no-repeat 16px center #0d6cac;
}

.ser_icon7.now {
  background: url(search_icon77.png) no-repeat 16px center #0d6cac;
}

.row_title {
  font-size: 28px;
  background: url(title_line.png) no-repeat left bottom;
  padding-bottom: 8px;
  margin-bottom: 40px;
  font-weight: normal;
}

.hight_list li {
  float: left;
  width: 392px;
  overflow: hidden;
  margin-right: 32px;
}

.hight_list li .imgbox {
  height: 220px;
  width: 100%;
  overflow: hidden;
}

.row_left {
  float: left;
  width: 848px;
}

.hight_list li p {
  font-size: 20px;
  line-height: 32px;
  margin: 40px 0 0;
  height: 106px;
}

.row_right {
  overflow: hidden;
}

.director_bg {
  background: #f0f0f0;
  margin-top: 126px;
  height: 630px;
  position: relative;
}

.director_box {
  width: 338px;
  height: 690px;
  position: absolute;
  top: -86px;
  left: 30px;
  background: #126aaa;
}

.director_box_bg {
  background: url(flower.jpg) no-repeat center bottom #126aaa;
}

.director_box .imgbox {
  width: 100%;
  overflow: hidden
}

.director_txt {
  height: 320px;
  color: #fff;
  padding: 0 30px;
  overflow: hidden
}

.director_txt h5 {
  font-size: 24px;
  line-height: 34px;
  margin: 20px 0;
  font-weight: normal
}

.director_txt p {
  font-size: 16px;
  line-height: 24px;
}

.director_more {
  float: right;
  font-size: 14px;
  color: #fff;
  text-decoration: underline;
  margin-top: 20px;
}

.row_title_center {
  text-align: center;
  background: url(title_line.png) no-repeat center bottom;
}

.data_box {
  background: #fff;
  height: 370px;
  margin: 0 16px;
}

.data_box .imgbox {
  height: 270px;
  overflow: hidden
}

.data_box p {
  font-size: 20px;
  text-align: center;
  margin-top: 44px
}

.data_swiper {
  position: relative;
  width: 1272px;
  margin-left: -16px;
}

#swiper-button-next,
#swiper-button-prev {
  width: 40px;
  height: 70px;
  top: 150px;
}

#swiper-button-next {
  background: url(swiper_right.png);
  right: 16px;
}

#swiper-button-prev {
  background: url(swiper_left.png);
  left: 16px
}

.topics {
  overflow: hidden;
}

.topics li {
  width: 50%;
  float: left;
  height: 260px;
  position: relative;
}

.topics li .imgbox {
  width: 50%;
  float: left;
  height: 260px;
  overflow: hidden;
  position: relative
}

.topics_txt {
  overflow: hidden;
  background: #f0f0f0;
  height: 260px;
  width: 50%;
}

.topics_num {
  position: absolute;
  font-size: 48px;
  color: #126aaa;
  left: 45.5%;
  top: 30px;
}

.topics_txt p {
  font-size: 16px;
  line-height: 28px;
  margin: 100px 24px 20px;
  height: 100px;
  word-break: break-all;
}

.topics_txt span {
  font-size: 14px;
  color: #999;
  margin: 0 24px;
}

.topics .topics_r .topics_txt {
  float: left;
}

.topics .topics_r .imgbox {
  float: right;
}

.topics_num span {
  display: inline-block;
  vertical-align: middle;
  width: 60px;
  height: 3px;
  background: #126aaa;
}

.topics .topics_r .topics_num {
  left: 36%;
}

.topics li:hover .topics_txt {
  background: #126aaa;
  transition: all 0.5s linear;
}

.topics li:hover .topics_txt span,
.topics li:hover .topics_txt,
.topics li:hover .topics_num {
  color: #fff;
}

.topics li:hover .topics_num span {
  background: #fff;
}

.topics .black {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.3);
  display: block;
}

.topics li:hover .black {
  display: none;
  transition: all 1s linear;
}

.public_list .imgbox {
  width: 496px;
  height: 289px;
  overflow: hidden;
  float: left;
  margin-right: 40px
}

.imgbox img {
  width: 100%;
  height: 100%;
}

.public_list {
  overflow: hidden;
}

.public_txt {
  overflow: hidden;
}

.public_txt h5 {
  font-size: 24px;
  color: #126aaa;
  font-weight: normal;
  margin-bottom: 26px;
}

.public_txt .row_title {
  margin-bottom: 30px;
}

.public_txt p {
  font-size: 16px;
  line-height: 24px;
  color: #999;
  height: 100px;
  overflow: hidden;
}

.public_more {
  width: 154px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #fff;
  font-size: 16px;
  background: #126aaa;
  display: inline-block;
  border-radius: 20px;
  margin-top: 10px;
}

.public_more:hover,
.director_more:hover {
  color: #fff;
  text-decoration: underline;
}

.public_list li {
  overflow: hidden;
  margin-top: 70px;
}

.country_list {
  position: relative;
  height: 194px;
  margin-top: 10px;
}

.country_list li {
  position: absolute;
  padding-bottom: 20px;
}

.country_list li a {
  color: #fff;
}

.country_bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0
}

.country_list li .country_img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0
}

.country_list li p {
  margin: 0 22px;
  line-height: 22px;
  word-break: break-all;
}

.country_list li h4 {
  font-size: 28px;
  text-align: center;
  font-weight: normal;
  margin-top: 60px;
  margin-bottom: 14px;
}

.country_list li img {
  position: absolute;
  top: 5px;
  left: 6px;
}

.country2 {
  width: 190px;
  min-height: 386px;
  left: 446px;
  bottom: 0;
}

.country2 .country_bg {
  background: rgba(243, 152, 0, 0.7);
}

.country1 {
  width: 436px;
  min-height: 410px;
  left: 0;
  bottom: 0;
}

.country1 .country_bg {
  background: rgba(255, 87, 34, 0.7);
}

.country3 {
  width: 392px;
  left: 647px;
  bottom: 0px;
  min-height: 130px;
}

.country3 .country_bg {
  background: rgba(0, 104, 183, 0.7);
}

.country4 {
  width: 190px;
  bottom: 0px;
  right: 0;
  height: 170px;
}

.country4 .country_bg {
  background: rgba(50, 117, 108, 0.7);
}

.country_list .country4 h4,
.country_list .country8 h4 {
  margin-top: 80px;
}

.country5 {
  width: 190px;
  top: 0px;
  left: 647px;
  min-height: 350px;
}

.country5 .country_bg {
  background: rgba(0, 160, 233, 0.7);
}

.country6 {
  width: 342px;
  top: 0px;
  right: 50px;
  min-height: 174px;
}

.country6 .country_bg {
  background: rgba(236, 105, 65, 0.7);
}

.country7 {
  width: 396px;
  top: 0px;
  left: 40px;
  min-height: 184px;
}

.country7 .country_bg {
  background: rgba(236, 105, 65, 0.7);
}

.country8 {
  width: 190px;
  top: 0px;
  left: 446px;
  height: 184px;
}

.country8 .country_bg {
  background: rgba(0, 104, 83, 0.7);
}

.country9 {
  width: 392px;
  top: 0px;
  right: 0px;
  min-height: 220px;
}

.country9 .country_bg {
  background: rgba(179, 221, 101, 0.7);
}

.country_list .country3 h4 {
  margin-top: 40px;
}

.row_public {
  padding: 0 0 70px;
}

#pageContent {
  height: 700px;
  overflow: hidden;
  position: relative;
}

#positionButtonDiv {
  background: rgb(58, 56, 63);
  background: rgba(58, 56, 63, 0.8);
  border: solid 1px #100000;
  color: #fff;
  padding: 8px;
  text-align: left;
  position: absolute;
}

#positionButtonDiv .positionButtonSpan img {
  float: right;
  border: 0;
}

.positionMapClass area {
  cursor: pointer;
}

.zoomButton {
  border: 0;
  cursor: pointer;
}

.zoomableContainer {
  width: 100%;
  height: 820px;
}

.mark li {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 152, 0, 0.6);
  list-style: none;
  border: 1px solid #fff;
  cursor: pointer;
}

.mark li.now {
  background: #ef6808;
}

#mark1 {
  top: 100px;
  left: 100px;
}

#mark2 {
  top: 200px;
  left: 200px;
}

#mark3 {
  top: 300px;
  left: 600px;
}

#mark4 {
  top: 200px;
  left: 600px;
}

.map_pos {
  position: relative;
}

.map_model {
  position: absolute;
  width: 300px;
  background: #fff;
  font-size: 20px;
  color: #2d72c9;
  top: 170px;
  left: 500px;
  z-index: 2;
  display: none;
}

.map_model P {
  height: 46px;
  line-height: 46px;
  padding: 0 20px;
}

.map_bg1 {
  background: #1b497f;
  color: #fff;
}

.map_bg2 {
  background: #2f75ca;
  color: #fff;
  text-align: center;
}

.map_model p a {
  color: #fff;
  display: block;
}

.map_model P span {
  float: right;
}

.world_tab {
  border: 2px solid #126aaa;
  border-radius: 6px;
  width:max-content;
  white-space:nowrap;
  margin: 0 auto 2rem;
}

.world_tab p {
  padding:0 2rem;
  height: 46px;
  line-height: 46px;
  display: inline-block;
  text-align: center;
  font-size: 20px;
  color: #0068b7;
  cursor: pointer;
}

.world_tab p.now {
  background: #0068b7;
  color: #fff;
}

.map_list {
  background: #fff;
  padding: 5px;
  overflow: hidden;
  display: none;
}

.map_left {
  width: 100%;
  float: none;
}

.map_left li {
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid #e4e4e4;
  background: url(icon_jt.png) no-repeat right center;
  cursor: pointer;
}

.map_left li p {
  padding-left: 48px;
}

[lang="AR"] .map_left li p {
  padding-left: 0;
  padding-right: 48px;
}

.map_icon1 {
  background: url(../images/map_icon1.png) no-repeat 5px center;
}

[lang="AR"] .map_icon1 {
  background: url(../images/map_icon1.png) no-repeat right 5px center;
}

.map_icon2 {
  background: url(../images/map_icon2.png) no-repeat 5px center;
}

[lang="AR"] .map_icon2 {
  background: url(../images/map_icon2.png) no-repeat right 5px center;
}

.map_left li.now .map_icon1 {
  background: url(../images/map_icon11.png) no-repeat 5px center;
}

[lang="AR"] .map_left li.now .map_icon1 {
  background: url(../images/map_icon11.png) no-repeat right 5px center;
}

.map_left li.now .map_icon2 {
  background: url(../images/map_icon22.png) no-repeat 5px center;
}

[lang="AR"] .map_left li.now .map_icon2 {
  background: url(../images/map_icon22.png) no-repeat right 5px center;
}

.map_left li.now {
  color: #0068b7;
}

.map_right {
  overflow: hidden;
}

.List {
  height: 60px;
  line-height: 60px;
  background: #edf5fb;
}

.List_tab {
  background-color:#f2f2f2;
  display:table;
  float: left;
  width:100%;
  margin-bottom:0;
}

.List_tab li {
  display:table-cell;
  padding:1rem; 
  text-align: center;
  font-size: 1rem;
  font-weight:500;
  -webkit-user-select: none; /* Safari */        
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */
  cursor:pointer;
  vertical-align:middle;
}

.List_tab li.now {
  color: #0068b7;
  background-color:#fff;
}

@media (max-width: 576px) {
  .List_tab li {
    float:left;
    display:list-item;
  }
}

@media (max-width: 768px) {
  .List_tab_reg li {
    float:left;
    display:list-item;
  }
}

.List_div h5 {
  padding: 30px 10px;
  border-bottom: 1px dashed #e3e3e3;
  font-weight: normal;
  line-height: 30px;
  overflow: hidden;
}

.List_div h5 span {
  font-size: 18px;
  text-align: right;
  float: left;
  width: 176px;
  margin-right: 30px;
}

.List_div h5 p {
  display: block;
  float: left;
  font-size: 16px;
  width: 700px;
}

.List_div h5 p a {
  color: #0068b7;
}

.map_con {
  display: none;
  width:100%;
  margin-bottom:2rem;
}

.List_div ul {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

.List_div li {
  padding:0 15px;
  margin-bottom:10px;
  display:table;
}

.List_div_Coun {
  width:100%;
}

.List_div_Coun li {
  float:left;
  width:50%;
}

.List_div_Coun li span,
.List_div_Coun li a {
  margin-bottom:10px; 
  display:block;
}

.List_div li a {
  display: block;
  font-size: 16px;
  color: #0068b7;
  line-height: 1.5;
  cursor:pointer;
}

.List_div li a:hover {
  text-decoration: underline;
}

.List_div li h6,
.List_div h6 {
  margin:2rem 0 3rem 0;
  font-size: 1.1rem;
  text-align:center;
  line-height:1.5;
  padding:0 1rem;
}

.List_div {
  display: none;
}

.List_div_Reg {
  width:100%;
}

/*.List_div[style*="display: block;"] {
  display:inline-block !important;
  width:100%:
}*/

@media (max-width: 576px) {
  .List_div_Coun li:nth-child(odd) {
    clear:left;
  }
}

@media (min-width: 576px) {
  .List_div ul {
    columns: 3;
    -webkit-columns: 3;
    -moz-columns: 3;
  }

  .List_div_Coun li {
    width:33%;
  }
}

@media (min-width: 768px) {
  .List_div ul {
    columns: 4;
    -webkit-columns: 4;
    -moz-columns: 4;
  }

  .List_div_Coun li {
    width:25%;
  }
}

@media (min-width: 992px) {
  .map_left {
    width:20%;
    float:left;
    margin-right:1rem;
  }

  [lang="AR"] .map_left {
    width:20%;
    float:right;
    margin-right:0;
    margin-left:1rem;
  }
}

@media screen and (max-width: 1280px) and (min-width: 1024px) {
  .row_left {
    width: 700px;
  }

  .hight_list li {
    width: 318px;
  }

  .hight_list li .imgbox {
    height: 178px;
  }

  .director_bg {
    height: 560px;
  }

  .director_box {
    width: 280px;
    left: 20px;
  }

  .director_txt {
    height: 346px;
  }

  .data_swiper {
    width: 1056px;
  }

  .data_box .imgbox {
    height: 218px;
  }

  .data_box {
    height: 334px;
  }

  .country1 {
    width: 328px;
  }

  .country2 {
    height: 160px;
    left: 338px;
  }

  .country3 {
    width: 325px;
    left: 538px;
  }

  .country4 {
    width: 148px;
  }

  .country7 {
    width: 288px;
  }

  .country8 {
    width: 187px;
    left: 340px;
  }

  .country5 {
    left: 539px;
    width: 160px;
  }

  .country6 {
    width: 283px;
    right: 30px;
  }

  .country9 {
    width: 313px;
  }

  .country_list li h4 {
    font-size: 26px;
  }

  .country_list {
    height: 210px;
  }

  .topics li {
    height: 215px;
  }

  .List_tab li {
  }

  .List_div h5 span {
    width: 130px;
  }

  .List_div h5 p {
    width: 560px;
  }
}

/* MAP POP-UP */

.mapboxgl-popup-content {
  background-color: #116aab;
  padding: 0px!important;
}

.mapboxgl-popup-country-title {
  background-color: #116aab;
  padding: 10px;
  font-size: 1.5em;
  font-weight: bold;
  color: white;
}

.mapboxgl-popup-country-title a,
.mapboxgl-popup-country-title a:hover {
  color: #fff;
}

.mapboxgl-popup-country-profile {
  background-color: #357cc8;
  padding: 10px 20px;
  font-weight: bold;
  color: white;
  text-align: center;
}

.mapboxgl-popup-country-profile a,
.mapboxgl-popup-country-profile a:hover {
  color: white;
}

#map .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
  border-top-color: #357cc8;
}

#map .mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
  border-top-color: #357cc8;
  border-bottom-color: #116aab;
}

#map .mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
  border-right-color: #357cc8;
}

#map .mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
  border-left-color: #357cc8;
}  

#map .mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip {
  border-top-color: #357cc8;
}

#map .mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip {
  border-bottom-color:#116aab;
}

#map .mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
  border-bottom-color:#116aab;
}

#map .mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
  border-top-color: #357cc8;
}

.mapboxgl-popup-close-button {
  display: none;
}


#map {
    position: relative;
    height: 700px;
}
.marker {
  background-image: url('http://www.fao.org/fileadmin/templates/faoboot/css/img/place-normal.svg');
  background-size: cover;
  width: 25px;
  height: 30px;
  cursor: pointer;
}
.mapboxgl-popup {
  /* max-width: 200px; */
}
.mapboxgl-popup-anchor-bottom, 
.mapboxgl-popup-anchor-bottom-left, 
.mapboxgl-popup-anchor-bottom-right {
   margin-top: 13px;
   margin-left: 3px;
}

.mapboxgl-popup-country-info{
    padding: 10px;
    font-size: 1.3em;
}
.mapboxgl-popup-country-project{
    display: flex;
}
.mapboxgl-popup-country-budget{
    display: flex;
}
.mapboxgl-popup-country-project-text{
    width: 50%;
}
.mapboxgl-popup-country-project-number{
    width: 50%;
    text-align: right;
}
.mapboxgl-popup-country-budget-text{
    width: 50%;        
}
.mapboxgl-popup-country-budget-number{
    width: 50%;
    margin-left: 5px;
    text-align: right;
}