/******************** OUR MARKET *******************/
section.market {
   background-image: url('img/market/Map/bg_market.webp');
   background-position: center;
   background-size: cover;
   height: 100vh;
}

.con-market {
   height: 100%;
   display: flex;
   flex-direction: column;
   padding-top: 10em;
}

/******************************************************/
/* map */
/******************************************************/

.show-map2 {
   display: block;
   position: relative;
   height: 60vh;
   width: 100vh;
   text-align: center;
   left: 50%;
   transform: translateX(-50%);
   margin-top: 3rem;

   background-image: url('img/market/Map/6-continents.webp');
   background-position: top center;
   background-size: contain;
   background-repeat: no-repeat;
}

.hide {
   display: block;
   position: absolute;
   width: 0;
   height: 0;
   text-indent: -9999999px;
   overflow: hidden;
}

.pc-hide {
   display: none !important;
}

.show-list {
   display: none;
}

.map-detail {
   display: block;
   position: absolute;
   padding: 15px 25px;
   text-align: left;
   overflow: hidden;
   box-sizing: border-box;

   right: -800%;
   transition: all 0.6s ease;
   opacity: 0;
}

.map-detail>p {
   position: relative;
   margin-bottom: 1rem;
   color: gold;
   left: -1rem;
   font-size: 1.8rem;
   font-weight: 500;
   line-height: 38px;
}

.map-detail>ul li {
   position: relative;
   padding-left: 5px;
   box-sizing: border-box;
   font-size: 14px;
}

.map-detail>ul {
   width: 100%;
}

.map-detail>ul.world-list3 {
   width: 390px;
}

.map-detail>ul.world-list4 {
   width: 510px;
   display: flex;
}

.show-map2 [class^="map-"] {
   position: absolute;
   background-repeat: no-repeat;
}

.show-map2 [class^="map-"]>a {
   display: block;
   width: 100%;
   height: 100%;
}

.map-eu {
   right: 28%;
   z-index: 5;
   width: 32%;
   height: 48%;
   background-image: url(img/market/Map/4europe.webp);
   background-size: 100vh;
   background-position-x: 58.9%;
   opacity: 0;
   transition: all 0.2s ease;
}

.map-asia {
   right: 0;
   top: 0;
   z-index: 3;
   width: 38%;
   height: 72%;
   background-image: url(img/market/Map/5asia.webp);
   background-size: 100vh;
   background-position: right top;
   opacity: 0;
   transition: all 0.2s ease;
}

.map-middleEast {
   z-index: 9;
   top: 39%;
   right: 0;
   width: 46%;
   height: 20%;
   background-image: url(img/market/Map/3middle-east.webp);
   background-size: 100vh;
   background-position-x: 100%;
   background-position-y: center;
   opacity: 0;
   transition: all 0.2s ease;
}

.map-africa {
   bottom: 0;
   right: 0;
   z-index: 2;
   width: 60%;
   height: 100%;
   background-image: url('img/market/Map/2africa.webp');
   background-size: 100vh;
   background-position: right top;
   opacity: 0;
   transition: all 0.2s ease;
}

.map-oceania {
   z-index: 8;
   right: 0;
   bottom: 2%;
   width: 20%;
   height: 35%;
   background-image: url('img/market/Map/6oceania.webp');
   background-size: 100vh;
   background-position: right bottom;
   opacity: 0;
   transition: all 0.2s ease;
}

.map-northAmerica {
   z-index: 1;
   width: 54%;
   height: 100%;
   background-image: url('img/market/Map/1america.webp');
   background-size: 100vh;
   background-position: top left;
   opacity: 0;
   transition: all 0.2s ease;
}

.show-map2 [class^="map-"]:hover,
.show-map2 [class^="map-"]:focus,
.show-map2 [class^="map-"]:active {
   z-index: 8;
}

.map-eu:hover,
.map-eu:focus,
.map-eu:active {
   opacity: 1;
}

.map-asia:hover,
.map-asia:focus,
.map-asia:active {
   opacity: 1;
}

.map-middleEast:hover,
.map-middleEast:focus,
.map-middleEast:active {
   opacity: 1;
}

.map-africa:hover,
.map-africa:focus,
.map-africa:active {
   opacity: 1;
}

.map-oceania:hover,
.map-oceania:focus,
.map-oceania:active {
   opacity: 1;
}

.map-northAmerica:hover,
.map-northAmerica:focus,
.map-northAmerica:active {
   opacity: 1;
}

.map-northAmerica>.map-detail {
   top: 30%;
   left: 175%;
   width: fit-content;
}

.show-map2 [class^="map-"]:hover>.map-detail,
.show-map2 [class^="map-"]:focus>.map-detail,
.show-map2 [class^="map-"]:active>.map-detail {
   display: block;
   opacity: 1;
   width: fit-content;
}

.map-eu:hover>.map-detail,
.map-eu:focus>.map-detail,
.map-eu:active>.map-detail {
   top: 50%;
   left: 170%;
}

.map-asia:hover>.map-detail,
.map-asia:focus>.map-detail,
.map-asia:active>.map-detail {
   top: 30%;
   left: 85%;
}

.map-middleEast:hover>.map-detail,
.map-middleEast:focus>.map-detail,
.map-middleEast:active>.map-detail {
   top: 0;
   left: 80%;
}

.map-africa:hover>.map-detail,
.map-africa:focus>.map-detail,
.map-africa:active>.map-detail {
   top: 40%;
   left: 85%;
}

.map-oceania:hover>.map-detail,
.map-oceania:focus>.map-detail,
.map-oceania:active>.map-detail {
   left: 70%;
   bottom: 160%;
}

.map-northAmerica:hover>.map-detail,
.map-northAmerica:focus>.map-detail,
.map-northAmerica:active>.map-detail {
   top: 30%;
   right: -105%;
   width: fit-content;
}

/******************************************************/
/* map */
/******************************************************/

/******************** OUR MARKET ******************  */



@media (max-width: 1280px) {
   section.market {
      height: 100%;
   }

   .con-market{
      padding-bottom: 5rem;
      padding-top: 8em;
   }
}