/* =====================================================================================================
	                   (下拉選單 -1 ) 統一套顏色 >> Select Language Menu (2024)
===================================================================================================== */



/* Region Name + Item Name */
#top-bar ul.dropdown-menu li span.region, 
#top-bar ul.dropdown-menu a {
    color: rgba(0, 7, 34, 1.0);
    color: #000722;
    opacity: 1.0 !important;

    /*padding-left: 0 !important;*/
    padding: 0 20px !important;
    padding: 0 10px !important;
}


/* Region Name >> 每個 Region 距離 >> padding top */
#top-bar ul.dropdown-menu li span.region {
    line-height: 1.2em;
    padding-top: 10% !important;
}


/* Region Name >> 第一個 Region >> Padding 0 距離 */
#top-bar ul.dropdown-menu li:first-child span.region {
  padding-top: 0 !important;
}


/* Item Name >> color */
#top-bar ul.dropdown-menu a {
    color: rgba(0, 7, 34, 0.8) !important;
    color: rgba(0, 7, 34, 1.0) !important;
}


/* Item Name (Span > NoLink) >> color (White Menu) */
#top-bar ul.dropdown-menu li span {
    color: #95999f;
    color: rgba(149, 153, 159, 0.8);
}


/* Item Name (Hover) >> color */
#top-bar ul.dropdown-menu a:hover {
    color: rgba(0, 92, 170, 1.0) !important;
}



/* Region Name >> after (向下箭頭) */
#top-bar ul.dropdown-menu li span.region::after {
    content: "\f107";
    font-family: "FontAwesome";
    font-size: 1.16em;
    font-weight: 500;
    line-height: 1.4em;
    color: rgba(0, 92, 170, 1.0);
    color: #005caa;
    display: inline-block;
    position: relative;
    top: 1px;
    margin: 0 11px;
}




/* 新合併 >> 下的每個 Li + Region >> 左邊無 padding */
#top-bar ul.dropdown-menu li ul li {
    padding-left: 0px !important;
    padding-left: 5px !important;
}


/* 新合併 >> 下的每個 Li + Region >> 左邊無 padding */
#top-bar ul.dropdown-menu li ul li span.region, 
#top-bar ul.dropdown-menu li ul li span, 
#top-bar ul.dropdown-menu li ul li a {
    padding-left: 0px !important;
}



/*************** 【 Dark Language Menu  】 (Homepage/ Landing ) *****************/

/* Region Name (((Dark))) >> Color */
.dark#top-bar ul.dropdown-menu li span.region,
.dark#top-bar ul.dropdown-menu a {
    color: #fff;
    color: rgba(255,255,255, 1.0) !important;
    opacity: 1.0 !important;
}



/* Item Name (((Dark))) >> Color */
.dark#top-bar ul.dropdown-menu a {
    color: rgba(255,255,255, 0.8) !important;
    opacity: 1;
}


/* Item Name:Hover (((Dark))) >> Color */
.dark#top-bar ul.dropdown-menu a:hover {
    color: rgba(255,255,255, 1.0) !important;
    opacity: 1;
}


/* Region Name (((Dark)))  >> after (向下箭頭) */
.dark#top-bar ul.dropdown-menu li span.region::after {
    color: rgba(255,255,255, 0.8);
}






@Media (min-width: 1024px) {

    /* Language Menu 總寬高度 */
    #top-bar .dropdown-menu {
    column-count: 3;
    width: 600px;
    max-width: 55vw;
    max-height: 600px;
    padding: 1% 1.5% 2%;

    padding: 1% 1% 2%;
    }

    /* Region Name */
    #top-bar ul.dropdown-menu li span.region {
    font-size: 1.35em;
    font-size: 1.4em;
    }


    /* Item Name */
    #top-bar.dark ul.dropdown-menu li span:not(.region), 
    #top-bar ul.dropdown-menu li ul li span:not(.region), 
    #top-bar ul.dropdown-menu a {
    font-size: 1.2em !important;
    }


    #top-bar ul.dropdown-menu li.no-locale {
    height: 30px;
    }


}


@Media (max-width: 480px) {

    /* Language Menu 總寬高度 */
    #top-bar .dropdown-menu {
    /* column-count: 1; */
    width: 85vw; /* 3 column */
    width: 65vw; /* 2 column */
    max-width: 90vw;
    max-height: 80vh;
    }

}









 /* =======================================================================================================================
      (New 下拉選單 -2 >> 新增 Li 合併 Region + Language item) 統一套顏色 >> Select Language Menu (2024)
   .region_itn(全球) / .region_nam(北美) / .region_lam(拉美) / .region_ap(泛亞) / .region_eu(歐洲) / .region_af(非洲)
======================================================================================================================== */


/* Language Menu 總寬高度 */
#top-bar .dropdown-menu {
    padding: 0.8% 1% 1.3%;
}


/* 新 Li 合併 Region + Language item */
#top-bar ul.dropdown-menu li[class*="region_"] {
  display: block;
  margin-bottom: 15px;
  margin-bottom: 10px;
}


/* 最後一個地區 >> 底部無距離 (新 Li 合併 Region + Language item) */
#top-bar ul.dropdown-menu li[class*="region_"]:last-child {
  margin-bottom: 0px;
}


/* 新合併 >> 下的每個 Li + Region >> 左邊無 padding */
#top-bar ul.dropdown-menu li ul li {
    padding-left: 0px !important;
    padding-left: 5px !important;
}


/* 新合併 >> 下的每個 Li + Region >> 左邊無 padding */
#top-bar ul.dropdown-menu li ul li span.region, 
#top-bar ul.dropdown-menu li ul li a {
    padding-left: 0px !important;
}


/* 新合併 >> 下的每個 Li 行距 */
#top-bar ul.dropdown-menu li ul li {
    line-height: 1.4em;
}


/* 新合併 >> 下的每個 Li >> Region Name */
#top-bar ul.dropdown-menu li ul li span.region {
    padding-bottom: 5px !important;
    padding-bottom: 7px !important;
}

/* 新合併 >> 下的每個 Li >> Language item */
#top-bar ul.dropdown-menu li ul li a {
    line-height: 1.4em;
    height: auto;
    display: block;
    padding: 0 10px 10px 0 !important;

    padding: 0 10px 8px 0 !important;
    padding: 0 5px 8px 0 !important;
}

/* 新合併 >> 下的每個 Li >> Language item >> 加粗 (White & Black) */
#top-bar ul.dropdown-menu li ul li a, 
.dark#top-bar ul.dropdown-menu a {
    font-weight: 400;
}


/* 每一個 "新合併區塊" li 自成一欄位 (避免有些欄位太短,擠在一起) */
/* li.region_ap(泛亞) / li.region_eu(歐洲)  */
.region_ap {
    break-inside: avoid;
}


/* 每一個 "新合併區塊" li 自成一欄位 (避免有些欄位太短,擠在一起) */
/* li.region_ap(泛亞) / li.region_eu(歐洲)  */
.region_eu {
  break-inside: avoid;
}


@Media (min-width: 1024px) {

    /* Language Menu 總寬高度 (兩欄) */
    #top-bar .dropdown-menu {
    column-count: 3;
    width: 600px; /* 3 column */
    column-count: 2;
    width: 380px; /* 2 column */
    width: 360px; /* 2 column */
    max-width: 55vw;
    max-height: 600px;
    }


    /* Language Menu 總寬高度 (TW) (一欄) */
    body.locale_tw-zh #top-bar .dropdown-menu {
    column-count: 1;
    width: 185px; /* 1 column */
    width: 200px; /* 1 column */
    }

}




@Media (max-width: 480px) {

    /* Language Menu 總寬高度 */
    #top-bar .dropdown-menu {
    /* column-count: 1; */
    width: 85vw; /* 3 column */
    width: 70vw; /* 2 column */
    max-width: 90vw;
    max-height: 80vh;
    }

}


@Media (max-width: 375px) {

    /* Language Menu 總寬高度 */
    #top-bar .dropdown-menu {
    /* column-count: 1; */
    width: 90vw; /* 3 column */
    width: 70vw; /* 2 column */
    max-width: 90vw;
    max-height: 80vh;
    }

}