@charset "utf-8";
/* CSS Document */

@media (max-width: 980px) {
  #banner-wrap h1 img {
    height: 120px;
  }

  #banner-wrap {
    padding-top: 25.563%;
    min-height: 200px;
  }

  #content .gallery table,
  #content .gallery thead,
  #content .gallery tbody,
  #content .gallery tr ,
  #content .other-info table,
  #content .other-info thead,
  #content .other-info tbody,
  #content .other-info tr {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
  }

  #content .gallery th,
  #content .gallery td,
  #content .other-info th,
  #content .other-info td {
    width: 49.8% !important;
    float: left;
    display: block;
  }

  #content .gallery td.blank ,
  #content .other-info td.blank {
    display: none;
  }

  #content .gallery .video-wrap>div ,
  #content .other-info .video-wrap>div {
    max-height: none;
  }

  #content .gallery .video-wrap a ,
  #content .other-info .video-wrap a {
    max-height: 240px;
  }
  #content .svg-map .popup-box{
	  position: relative;
	  max-width: none;
	  width: 100%;
	  left: 0!important;
	  top: 0!important;
  }
}

@media (max-width: 980px) and (min-width: 768px) {
  /* #content .tbl-wrap.wPagination.video table td:nth-child(odd) {
		padding-right: 10px;
	}
	#content .tbl-wrap.wPagination.video table td:nth-child(even) {
		padding-left: 10px;
	}
	#content .tbl-wrap.wPagination.video table td:before{
		width: calc(100% - 10px);
	}
	#content .tbl-wrap.wPagination.video table td:nth-child(even):before {
		left: 10px;
	} */
}

@media (max-width: 767px) {
  #banner-wrap {
    min-height: 160px;
  }

  #banner-wrap h1 img {
    height: 80px;
  }

  #content {
    padding-top: 20px;
    padding-bottom: 60px;
  }

  #content h2 {
    font-size: 1.7em;
    margin-bottom: 25px;
  }

  #content h3 {
    font-size: 1.4em;
    margin-bottom: 24px;
  }

  #content .chart-wrap {
    width: 100%;
    margin: 0 auto 20px;
  }

  #content .legend-wrap .legend span:first-child {
    flex: 0 1 16px;
    height: 16px;
    width: 16px;
    min-width: 16px;
  }

  #content .legend-wrap .legend {
    padding: 10px 0;
  }

  #content .legend-wrap.legco .legend span:nth-child(2) {
    flex: 0 1 136px !important;
  }

  #content .tab-wrap a {
    font-size: 1.1em;
    padding: 15px;
  }

  .tbl-wrap table tr.total td>div {
    font-size: 1.2em;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .tbl-wrap table td .icon-tick {
    width: 20px;
    height: 20px;
  }

  #content .btn-wrap a.back-btn {
    padding-left: 25px;
  }

  #content .btn-wrap a.back-btn:before {
    left: 12px;
  }

  #content .accordion-wrap .accordion-btn {
    padding: 11px 30px 11px 10px;
  }

  #content .accordion-wrap .accordion-btn:before,
  #content .accordion-wrap .accordion-btn:after {
    width: 14px;
    right: 5px;
  }

  #content .accordion-wrap .accordion-content {
    padding: 10px;
  }

  #content .tbl-wrap.wPagination.video table {
    table-layout: fixed;
  }

  #content .tbl-wrap.wPagination.video>div {
    overflow: hidden;
  }

  #content .tbl-wrap.wPagination.video table,
  #content .tbl-wrap.wPagination.video table tr,
  #content .tbl-wrap.wPagination.video table th,
  #content .tbl-wrap.wPagination.video table td {
    display: table;
    width: 100% !important;
    padding: 0 !important;
    min-width: 0;
  }

  #content .tbl-wrap.wPagination.video table td:before {
    display: none;
  }

  #content .video-wrap p {
    padding: 0 10px;
  }

  #content hr {
    margin: 20px 0;
  }

  #content .tbl-wrap + .btn-wrap {
    padding-top: 0px;
  }

  .img-content-wrap {
    display: block;
  }

  .img-content-wrap>div:first-child {
    padding-right: 0;
    margin-bottom: 20px;
  }

  .img-content-wrap .img-wrap {
    flex: inherit;
  }

  .bookletWrap {
    display: block;
  }

  .bookletWrap .booklet {
    width: 100%;
	margin-left: 0;
  }
  
	#content .accordion-wrap .accordion-content #booklet .booklet{
		width:100%;
	}
	#content .video-wrap.folder:before,
	#content .video-wrap.video:before{
		width: 40px;
		height: 40px;
	}
}

@media (max-width: 600px) {

  #content .gallery th,
  #content .gallery td,
  #content .other-info th,
  #content .other-info td {
    width: 100% !important;
    float: left;
  }
  .dataTables_wrapper .dataTables_paginate > span{
    margin: 0 8px;
  }
}

@media (max-width: 430px) {
  #banner-wrap h1 img {
    height: auto;
    max-width: 100%;
    max-height: 80px;
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button{
	  flex: 0 1 30px;
	  width: 30px;
    height: 30px;
    line-height: 17px;
  }
  .dataTables_wrapper .dataTables_paginate span a{
	  margin: 0 2px;
  }
  .dataTables_wrapper .dataTables_paginate .ellipsis {
		padding: 0 5px;
	}
}