Untitled
unknown
plain_text
a year ago
39 kB
4
Indexable
Never
(function () {
if (!document.querySelector(".eg-test-activated"))
try {
var debug = 0;
var variation_name = "";
var path = "id-id";
var testData = {
heroCardsData: [{
"href": 'https://www.business.hsbc.co.id/' + path + '/solutions/open-account',
"src": 'https://www.business.hsbc.co.id/-/jssmedia/media/indonesia/images/solutions/remote-working.jpg?h=982&iar=0&w=1010&hash=7F1883B5E12CE3E3B5B740A4CA912847',
"title": 'Pembiayaan Berkelanjutan',
"para": 'Business Banking selalu siap memberikan layanan dan dukungan yang luas untuk mengembangkan bisnis Anda lebih jauh'
},
{
"href": 'https://www.business.hsbc.co.id/' + path + '/solutions/our-digital-solutions',
"src": "https://www.business.hsbc.co.id/-/jssmedia/media/indonesia/images/solutions/digital-solutions.jpg?h=982&iar=0&w=1010&hash=41723D9503FAB5DE18317BFD2696681E",
"title": 'Business Banking HSBC',
"para": 'Selangkah lebih maju bersama kami'
},
{
"href": 'https://www.business.hsbc.co.id/' + path + '/solutions/hsbcnet',
"src": 'https://www.business.hsbc.co.id/-/jssmedia/media/indonesia/images/solutions/graphs.jpg?h=982&iar=0&w=1010&hash=197F53E840AB85D4A8D0DB498CC42B0E',
"title": 'HSBCnet',
"para": 'Melakukan semua transaksi dalam satu platform akan mempermudah kinerja sehingga Anda dapat lebih fokus pada kemajuan bisnis'
}
],
tilesContent: [
{
"title": "Forfaiting",
"linkText": "Lebih lanjut",
"link": 'https://www.business.hsbc.co.id/' + path + '/solutions/forfaiting',
"para": "Melindungi dan membiayai perdagangan setelah pengapalan dengan layanan forfaiting yang dapat membiayai sekaligus mengelola risiko",
"img": "https://www.business.hsbc.co.id/-/jssmedia/media/indonesia/images/solutions/landscapes-cargo-ship.jpg?h=982&iar=0&w=1010&hash=06AD0C9E10F82FA349499774A3133C5A"
},
{
"title": "Pembiayaan perdagangan",
"linkText": "Lebih lanjut",
"link": 'https://www.business.hsbc.co.id/' + path + '/solutions/hsbc-trade-finance',
"para": "Manfaatkan jaringan internasional HSBC untuk melakukan bisnis di seluruh dunia",
"img": "https://www.business.hsbc.co.id/-/jssmedia/media/indonesia/images/solutions/bank-sme-mme.jpg?h=982&iar=0&w=1010&hash=09D13B2CBFB2B8B8870625C394016B1F"
},
{
"title": "HSBC Evolve",
"linkText": "Lebih lanjut",
"link": 'https://www.business.hsbc.co.id/' + path + '/solutions/hsbc-evolve',
"para": "Cara lebih cerdas dalam melakukan trading. Proses jual beli mata uang asing yang sepenuhnya terintegrasi dan dapat disesuaikan dengan kebutuhan Anda , dari sebelum hingga setelah proses trading.",
"img": "https://www.business.hsbc.co.id/-/jssmedia/media/indonesia/images/solutions/building-shadows.jpg?h=982&iar=0&w=1010&hash=998370B2D422E72CDBC0E789D8CD117B"
}
],
heroHeadingText: "Explore our range of Business Banking solutions",
copyObject: {
'id-id': {
"TabTitle": "Useful Links",
"TabListItem1": "Internet Banking",
"TabListItem2": "Tetap terhubung dengan Kami",
"TabListItem3": "Pusat Pengunduhan",
"TabListItem4": "Regulasi : infomasi penting",
"InternetBankingTitle": "Masuk ke Internet Banking Bisnis",
"InternetBankingDropDownItem1": "HSBCnet",
"InternetBankingDropDownItem2": "HSBC SmartServe",
"InternetBankingDropDownBtn": "Masuk",
"InternetBankingFooterText": "Belum memiliki akun? Daftar untuk internet banking <span class='eg_inline'>bisnis sekarang</span>",
"InternetBankingFooterTextLink": "/solutions/hsbcnet",
"InternetBankingImg": "/-/jssmedia/media/illustrations/hsbc-illustrations.jpg?h=720&iar=0&w=1280&hash=4E3E64B31417E96F93738379AF48A402",
"GetContactTitle": "Tetap terhubung dengan Kami",
"GetContactSubTitle": "Jika Anda nasabah baru maupun eksisting, kami selalu siap membantu. Hubungi kami dengan pertanyaan Anda hari ini.",
"GetContactCtaText": "Hubungi kami",
"GetContactCtaTextLink": "/id-id/contact-us",
"GetContactImg": "/-/jssmedia/media/illustrations/hsbc_future-skills_illustration_personal-skills.jpg?h=1080&iar=0&w=1920&hash=6C0F91971D05C7BA64162FAF531B24A9",
"DownloadCentreTitle": "Kunjungi Pusat Pengunduhan Kami",
"DownloadCentreSubTitle": "Unduh formulir terkait transaksi dan PDF informasi penting dari Pusat Unduhan kami.",
"DownloadCentreCtaText": "Cari tahu lebih lanjut",
"DownloadCentreCtaTextLink": "/id-id/download-center",
"DownloadCentreImg": "/-/jssmedia/media/illustrations/hsbc-dart-omni-collect-tab-image-v2.jpg?h=720&iar=0&w=1280&hash=AF361E169F38EE757289A9151A4425CD",
"RegulationTitle": "Baca mengenai informasi penting",
"RegulationSubTitle": "Cari tahu lebih lanjut mengenai jadwal jam operasional operasional bank saat hari libur, regulasi baru dan yang lainnya.",
"RegulationCtaText": "Cari tahu lebih lanjut",
"RegulationCtaTextLink": "/id-id/regulations/important-information",
"RegulationImg": "/-/jssmedia/media/illustrations/hsbc-dart-omni-collect-tab-image-v2.jpg?h=720&iar=0&w=1280&hash=AF361E169F38EE757289A9151A4425CD",
}
},
svgIcon: `<svg font-size="m" class="SvgIcon" size="28" focusable="false" viewBox="0 0 18 18" color="#333" aria-hidden="true" role="presentation" data-testid="ProductsAndServicesIcon" data-id="Icon" opacity="1" fill="000"><path fill="none" d="M0 0h18v18H0z" opacity=".25"></path><path d="M14.2 0H6v5.8h1.2V1.2H13V5h3.8v7.8h-.6V14H18V3.8L14.2 0zm0 3.8V1.697L16.303 3.8H14.2zM13.5 7h-12C.675 7 0 7.675 0 8.5v8c0 .825.675 1.5 1.5 1.5h12c.825 0 1.5-.675 1.5-1.5v-8c0-.825-.675-1.5-1.5-1.5zm.3 9.5c0 .163-.137.3-.3.3h-12c-.163 0-.3-.137-.3-.3v-5.3h12.6v5.3zm0-6.5H1.2V8.5c0-.163.137-.3.3-.3h12c.163 0 .3.137.3.3V10zM12 12.8H9V14h3v-1.2z"></path></svg>`,
arrowIcon: `<svg font-size="m" class="SvgIcon" focusable="false" viewBox="0 0 18 18" color="#333" aria-hidden="true" role="presentation" data-testid="ChevronUpIcon" data-id="Icon" opacity="1" fill="#333"><path d="M1 13.804l8-7.998 8 7.998v-1.696l-8-8-8 8z"></path><path fill="none" d="M0 0h18v18H0z"></path></svg>`
}
function waitForElement(selector, trigger, delayInterval, delayTimeout) {
var interval = setInterval(function () {
if (
document &&
document.querySelector(selector) &&
document.querySelectorAll(selector).length > 0
) {
clearInterval(interval);
trigger();
}
}, delayInterval);
setTimeout(function () {
clearInterval(interval);
}, delayTimeout);
}
function live(selector, event, callback, context) {
function addEvent(el, type, handler) {
if (el.attachEvent) el.attachEvent("on" + type, handler);
else el.addEventListener(type, handler);
}
this.Element &&
(function (ElementPrototype) {
ElementPrototype.matches =
ElementPrototype.matches ||
ElementPrototype.matchesSelector ||
ElementPrototype.webkitMatchesSelector ||
ElementPrototype.msMatchesSelector ||
function (selector) {
var node = this,
nodes = (node.parentNode || node.document).querySelectorAll(selector),
i = -1;
while (nodes[++i] && nodes[i] != node);
return !!nodes[i];
};
})(Element.prototype);
function live(selector, event, callback, context) {
addEvent(context || document, event, function (e) {
var found,
el = e.target || e.srcElement;
while (el && el.matches && el !== context && !(found = el.matches(selector))) el = el.parentElement;
if (el && found) callback.call(el, e);
});
}
live(selector, event, callback, context);
}
/*
====== HERO CARDS DATA UPDATING - START ======
*/
function initDes() {
document.body.classList.add("eg-test-activated");
const egCard1 = document.querySelector("html body div[class*='collections-hero__cards--desktop'] div[class*='collection-cards__card']:nth-child(1)");
const egCard2 = document.querySelector("html body div[class*='collections-hero__cards--desktop'] div[class*='collection-cards__card']:nth-child(2)");
const egCard3 = document.querySelector("html body div[class*='collections-hero__cards--desktop'] div[class*='collection-cards__card']:nth-child(3)");
const heroHeading = document.querySelector('html body [class^="collections-hero__heading"]');
heroHeading.innerText = testData.heroHeadingText;
if (document.querySelector("html body div[class*='collections-hero__filter--desktop'] div[role='radiogroup'] > button:nth-child(1):disabled")) {
// changing card data
[egCard1, egCard2, egCard3].forEach((card, i) => {
card.querySelector("a[class*='collection-card__link']").href = testData.heroCardsData[i].href;
card.querySelector("img[class*='collection-card__image']").src = testData.heroCardsData[i].src;
if (testData.heroCardsData[i].title !== "") {
let egTitle = card.querySelector("h3[class*='collection-card__title']");
egTitle.childNodes[0].textContent = testData.heroCardsData[i].title;
}
if (testData.heroCardsData[i].para !== "") {
if (card.querySelector("p[class*='collection-card__description']")) {
card.querySelector("p[class*='collection-card__description']").innerHTML = testData.heroCardsData[i].para + "<span style='display:none;' class='eg-card'></span>";
} else {
if (!card.querySelector(".eg-para")) {
card.querySelector("h3[class*='collection-card__title']").insertAdjacentHTML("afterend", `<p class="eg-para">${testData.heroCardsData[i].para}<span style='display:none;' class='eg-card'></span></p>`);
}
}
}
});
}
// removing para if exists
live("html body div[class*='collections-hero__cards--desktop'] div[class*='collection-cards__card']:nth-child(1) button[class*='collection-card__dismiss-control']", 'click', function () {
if (egCard1.querySelector(".eg-para")) {
egCard1.querySelector(".eg-para").remove();
}
});
live("html body div[class*='collections-hero__cards--desktop'] div[class*='collection-cards__card']:nth-child(2) button[class*='collection-card__dismiss-control']", 'click', function () {
if (egCard2.querySelector(".eg-para")) {
egCard2.querySelector(".eg-para").remove();
}
});
live("html body div[class*='collections-hero__cards--desktop'] div[class*='collection-cards__card']:nth-child(3) button[class*='collection-card__dismiss-control']", 'click', function () {
if (egCard3.querySelector(".eg-para")) {
egCard3.querySelector(".eg-para").remove();
}
});
live("html body div[class*='collections-hero__filter--desktop'] div[role='radiogroup'] > button:nth-child(n + 2)", 'click', function () {
document.querySelectorAll(".eg-para").forEach(el => el.remove());
});
// calling init if it is first filter
live("html body div[class*='collections-hero__filter--desktop'] div[role='radiogroup'] > button:nth-child(1)", "click", function () {
waitForElement("html body div[class*='collections-hero__cards--desktop'] div[class*='collection-cards__card']:nth-child(3) h3[class*='collection-card__title']", initDes, 150, 15000);
});
}
function initMob(cardNum = 0) {
document.body.classList.add("eg-test-activated");
let card;
card = document.querySelector("html body div[class*='collections-hero__cards--mobile'] div[class*='collection-cards__card']:nth-child(1)");
let checked = document.querySelector('html body div[class*="collections-hero__filter--mobile"] div[class*="focus_dropdown"] select option:checked').innerText.trim();
if (checked.indexOf('Select All') != -1) {
// changing card data
card.querySelector("a[class*='collection-card__link']").href = testData.heroCardsData[cardNum].href;
card.querySelector("img[class*='collection-card__image']").src = testData.heroCardsData[cardNum].src;
if (testData.heroCardsData[cardNum].title !== "") {
let egTitle = card.querySelector("h3[class*='collection-card__title']");
egTitle.childNodes[0].textContent = testData.heroCardsData[cardNum].title;
}
if (testData.heroCardsData[cardNum].para !== "") {
if (card.querySelector("p[class*='collection-card__description']")) {
card.querySelector("p[class*='collection-card__description']").innerHTML = testData.heroCardsData[cardNum].para + "<span style='display:none;' class='eg-card'></span>";
} else {
if (!card.querySelector(".eg-para")) {
card.querySelector("h3[class*='collection-card__title']").insertAdjacentHTML("afterend", `<p class="eg-para">${testData.heroCardsData[cardNum].para}<span style='display:none;' class='eg-card'></span></p>`);
}
}
}
}
// removing para if exists
live("html body div[class*='collections-hero__cards--mobile'] div[class*='collection-cards__card']:nth-child(1) button[class*='collection-card__dismiss-control']", 'click', function () {
if (card.querySelector(".eg-para")) {
card.querySelector(".eg-para").remove();
}
});
// cheking for first select option
live('html body div[class*="collections-hero__filter--mobile"] div[class*="focus_dropdown"] select', "click", function () {
let checked = document.querySelector('html body div[class*="collections-hero__filter--mobile"] div[class*="focus_dropdown"] select option:checked').innerText.trim();
let cardpos = parseInt(document.querySelector('div[class*="collections-hero__index-indicator"] > span').innerText);
if ((checked.indexOf('Select All') != -1) &&
(cardpos == 1)) {
initMob();
} else {
document.querySelectorAll(".eg-para").forEach(ele => ele.remove());
}
});
}
function checkCardNumber() {
waitForElement('div[class*="collections-hero__index-indicator"] > span', function () {
const element = document.querySelector('div[class*="collections-hero__index-indicator"] > span');
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
let num = parseInt(mutation.target.textContent.trim()) - 1;
setTimeout(() => {
if (num < 1) {
initMob(0);
}
}, 100);
});
});
const config = { characterData: true, subtree: true };
observer.observe(element, config);
}, 50, 15000);
}
if (window.innerWidth > 767) {
waitForElement("html body div[class*='collections-hero__cards--desktop'] div[class*='collection-cards__card']:nth-child(3) h3[class*='collection-card__title']", initDes, 1000, 15000);
} else if (window.innerWidth < 768) {
waitForElement("html body div[class*='collections-hero__cards--mobile'] div[class*='collection-cards__card']:nth-child(1) h3[class*='collection-card__title']", initMob, 1000, 15000);
checkCardNumber();
}
/*
====== HERO CARDS DATA UPDATING - END ======
*/
/*
===== TILES CONTENT UPDATE =====
*/
function updateTilesContent() {
[...document.querySelectorAll('html body [class^="home__content"] [class^="carousel__item-container"] [class^="carousel__item"]:nth-child(-n+3)')].forEach((card, index) => {
const data = testData.tilesContent[index];
if (card) {
// updating title
const titleEl = card.querySelector('[class^="category-card__title"]');
titleEl.innerText = data.title;
// updating link
const linkEl = card.querySelector('a[class^="category-card"]');
linkEl.setAttribute("href", data.link);
card.querySelector('[class^="category-card__cta"]').childNodes[0].textContent = data.linkText;
// updating hover para
card.addEventListener("mouseover", function () {
const paraEl = this.querySelector('[class^="category-card__description"]');
if (paraEl) paraEl.innerText = data.para;
});
// updating image
const imgEl = card.querySelector('[class^="category-card__background"]');
imgEl.setAttribute("src", data.img);
}
});
}
waitForElement('html body [class^="home__content"] [class^="carousel__item-container"] [class^="carousel__item"]:nth-child(3)', updateTilesContent, 1000, 15000);
/*
===== TILES CONTENT UPDATE =====
*/
/*
===== NEW TABLE ======
*/
var copyObject = testData.copyObject;
function getCopy(language, copyObject) {
if (language in copyObject) {
return copyObject[language];
}
}
var copy = getCopy(path, copyObject);
var eg_useful_links =
`<div class="eg_useful_link">
<div class="eg_tab_container">
<h2 class="eg_title">${copy.TabTitle}</h2>
<div class="eg_dropdown_list">
<div class="eg_dropdown_container">
<button>
<span>
<div class="eg_dropdown_item">
<div class="eg_dropdown_svg">
${testData.svgIcon}
</div>
<div class="eg_dropdown_label">${copy.TabListItem1}</div>
</div>
</span>
<div class="eg_down_icon">
${testData.arrowIcon}
</div>
</button>
<ul class="eg_dropdown_list_box">
<li class="eg_selected" data-id="eg_internet_banking">
<span>
<div class="eg_dropdown_item">
<div class="eg_dropdown_svg">
${testData.svgIcon}
</div>
<div class="eg_dropdown_label">${copy.TabListItem1}</div>
</div>
</span>
</li>
<li data-id="eg_get_contact">
<span>
<div class="eg_dropdown_item">
<div class="eg_dropdown_svg">
${testData.svgIcon}
</div>
<div class="eg_dropdown_label">${copy.TabListItem2}</div>
</div>
</span>
</li>
<li data-id="eg_download_centre">
<span>
<div class="eg_dropdown_item">
<div class="eg_dropdown_svg">
${testData.svgIcon}
</div>
<div class="eg_dropdown_label">${copy.TabListItem3}</div>
</div>
</span>
</li>
<li data-id="eg_regulation">
<span>
<div class="eg_dropdown_item">
<div class="eg_dropdown_svg">
${testData.svgIcon}
</div>
<div class="eg_dropdown_label">${copy.TabListItem4}</div>
</div>
</span>
</li>
</ul>
</div>
</div>
<div class="eg_tab_list">
<button class="eg_selected" data-id="eg_internet_banking">
<div class="eg_icon">
${testData.svgIcon}
</div>
<h3>${copy.TabListItem1}</h3>
</button>
<button data-id="eg_get_contact">
<div class="eg_icon">
${testData.svgIcon}
</div>
<h3>${copy.TabListItem2}</h3>
</button>
<button data-id="eg_download_centre">
<div class="eg_icon">
${testData.svgIcon}
</div>
<h3>${copy.TabListItem3}</h3>
</button>
<button data-id="eg_regulation">
<div class="eg_icon">
${testData.svgIcon}
</div>
<h3>${copy.TabListItem4}</h3>
</button>
</div>
</div>
<div class="eg_tab_content_container">
<div class="eg_tab_panel eg_internet_banking eg_active">
<div class="eg_content_info">
<h3>${copy.InternetBankingTitle}</h3>
<div class="eg_dropdown_list">
<div class="eg_dropdown_container">
<button>
<span>
<div class="eg_dropdown_item">
<div class="eg_dropdown_svg">
${testData.svgIcon}
</div>
<div class="eg_dropdown_label">${copy.InternetBankingDropDownItem1}</div>
</div>
</span>
<div class="eg_down_icon">
${testData.arrowIcon}
</div>
</button>
<ul class="eg_dropdown_list_box">
<li class="eg_selected">
<span>
<div class="eg_dropdown_item">
<div class="eg_dropdown_svg">
${testData.svgIcon}
</div>
<div class="eg_dropdown_label">${copy.InternetBankingDropDownItem1}</div>
</div>
</span>
</li>
<li>
<span>
<div class="eg_dropdown_item">
<div class="eg_dropdown_svg">
${testData.svgIcon}
</div>
<div class="eg_dropdown_label">${copy.InternetBankingDropDownItem2}</div>
</div>
</span>
</li>
</ul>
</div>
<div class="eg_go_btn">
${copy.InternetBankingDropDownBtn}
</div>
</div>
<div class="eg_footer_link">
<a href="${copy.InternetBankingFooterTextLink}">
${copy.InternetBankingFooterText}
<span class="eg_down_icon">${testData.arrowIcon}</span>
</a>
</div>
</div>
<div class="eg_content_image">
<img alt=" " width="1280" height="720" title=" " src="${copy.InternetBankingImg}">
</div>
</div>
<div class="eg_tab_panel eg_get_contact">
<div class="eg_content_info">
<h3>${copy.GetContactTitle}</h3>
<span class="eg_sub_heading">${copy.GetContactSubTitle}</span>
<a class="eg_tab_panel_btn" href="${copy.GetContactCtaTextLink}">
<span>
<span aria-hidden="true">${copy.GetContactCtaText}</span>
</span>
</a>
</div>
<div class="eg_content_image">
<img alt=" " width="1280" height="720" title=" " src="${copy.GetContactImg}">
</div>
</div>
<div class="eg_tab_panel eg_download_centre">
<div class="eg_content_info">
<h3>${copy.DownloadCentreTitle}</h3>
<span class="eg_sub_heading">${copy.DownloadCentreSubTitle}</span>
<a class="eg_tab_panel_btn" href="${copy.DownloadCentreCtaTextLink}">
<span>
<span aria-hidden="true">${copy.DownloadCentreCtaText}</span>
</span>
</a>
</div>
<div class="eg_content_image">
<img alt=" " width="1280" height="720" title=" " src="${copy.DownloadCentreImg}">
</div>
</div>
<div class="eg_tab_panel eg_regulation">
<div class="eg_content_info">
<h3>${copy.RegulationTitle}</h3>
<span class="eg_sub_heading">${copy.RegulationSubTitle}</span>
<a class="eg_tab_panel_btn" href="${copy.RegulationCtaTextLink}">
<span>
<span aria-hidden="true">${copy.RegulationCtaText}</span>
</span>
</a>
</div>
<div class="eg_content_image">
<img alt=" " width="1280" height="720" title=" " src="${copy.RegulationImg}">
</div>
</div>
</div>
</div>`;
function initChangeTable() {
document.querySelector('#main > [class^="resources-and-inspiration"]').insertAdjacentHTML('beforebegin', eg_useful_links);
// toggle between tabs
live('.eg_tab_list button, .eg_tab_container .eg_dropdown_list li', 'click', function () {
var tab_list_btn = document.querySelector('.eg_tab_list button.eg_selected');
var tab_list = document.querySelector('.eg_tab_container .eg_dropdown_list li.eg_selected');
tab_list_btn && tab_list_btn.classList.remove('eg_selected');
tab_list && tab_list.classList.remove('eg_selected');
this.classList.add('eg_selected');
var getDataId = this.getAttribute('data-id');
document.querySelector('.eg_tab_panel.eg_active').classList.remove('eg_active');
document.querySelector('.eg_tab_panel.' + getDataId).classList.add('eg_active');
})
internetBankingEvents();
}
function internetBankingEvents() {
live('.eg_dropdown_list button', 'click', function () {
var get_parent = this.closest('.eg_dropdown_list');
get_parent.classList.toggle('eg_active');
})
live('.eg_dropdown_list .eg_dropdown_list_box li', 'click', function () {
var get_parent = this.closest('.eg_dropdown_list');
var getValue = this.querySelector('.eg_dropdown_label').innerText;
get_parent.querySelector('.eg_selected').classList.remove('eg_selected')
this.classList.add('eg_selected');
get_parent.classList.remove('eg_active');
get_parent.querySelector('.eg_dropdown_label').innerText = getValue;
})
live('.eg_dropdown_list .eg_go_btn', 'click', function () {
var selectedValue = document.querySelector('.eg_tab_content_container .eg_dropdown_container>button .eg_dropdown_label').innerText;
var redirectUrls = {
"HSBCnet": "https://www.secure.hsbcnet.com/",
"HSBC SmartServe": "https://smartserve.hsbc/dbs-auth-ui/auth/#/"
};
if (redirectUrls.hasOwnProperty(selectedValue)) {
window.location.href = redirectUrls[selectedValue];
}
})
}
waitForElement('#main > [class^="resources-and-inspiration"]', initChangeTable, 1000, 15000);
/*
==== NEW TABLE END ===
*/
} catch (e) {
if (debug) console.log(e, "error in Test" + variation_name);
}
})();
/* ====== HERO CARDS DATA UPDATING - START ====== */
html body .eg-para {
margin-top: 0.5rem;
line-height: 1.5;
opacity: 0;
transition: opacity 0.3s;
}
html body div[class*='collections-hero__cards--desktop'] div[class*='collection-cards__card'] div[class*='collection-card--swipe-enter']:hover .eg-para {
opacity: 1;
}
html body div[class*='collections-hero__cards--mobile'] div[class*='collection-cards__card']:nth-child(1)>div[class*='collection-card__overlayintro'],
html body div[class*='collections-hero__cards--mobile'] div[class*='collection-cards__card']:nth-child(1) div[class*='collection-card__overlay'],
html body div[class*='collections-hero__cards--desktop'] div[class*='collection-cards__card']:has(.eg-card) div[class*='collection-card__type-label'],
html body div[class*='collections-hero__cards--mobile'] div[class*='collection-cards__card']:has(.eg-card) div[class*='collection-card__type-label'] {
display: none !important;
}
html body .eg-link {
background: #000;
color: white !important;
padding: 20px;
}
html body .eg-link>a {
color: white;
text-decoration: none;
display: inline-flex;
margin-top: 8px;
font-size: 1rem;
align-items: center !important;
}
html body .eg-link>p {
font-size: 1.1875rem;
}
html body .eg-icon {
width: 16px;
padding-top: 8px;
padding-left: 10px;
}
/* ====== HERO CARDS DATA UPDATING - END ====== */
/* ====== TEST #2 CSS - START ===== */
html body [class^="home__content"] {
display: flex;
flex-direction: column;
}
html body [class^="home__content"]>[class^="home-container"]:last-child {
order: -1;
}
/* ====== TEST #2 CSS - END =====*/
/* ====== NEW TABLE CSS - START ===== */
html body [class^="home__content"]>[class^="home-container"]:first-child [class*="content-item"]:last-child {
display: none !important;
}
html body [class^="home__content"]>[class^="home-container"]:first-child [class*="content-item"] {
margin-bottom: 0 !important;
}
.eg_useful_link {
display: flex;
max-width: 1216px;
margin: 0 auto;
padding: 4rem 1.5rem;
}
.eg_tab_container {
display: flex;
flex-direction: column;
justify-content: center;
width: 25%;
}
.eg_tab_content_container {
display: flex;
align-items: center;
box-sizing: border-box;
width: 75%;
background-color: #fff;
padding: 2.5rem 2.5rem 2.5rem 6rem;
}
.eg_title {
font-size: 1.75rem;
line-height: 2.25rem;
font-weight: 300;
max-width: 13.625rem;
padding-right: 1.25rem;
}
.eg_tab_list button {
display: flex;
width: 100%;
box-sizing: border-box;
align-items: center;
margin-top: 1.5rem;
border: none;
background: transparent;
padding: 0;
text-align: left;
}
.eg_tab_list button.eg_selected {
padding-left: 0.5rem;
}
.eg_tab_list button.eg_selected::after {
content: "";
width: 0;
height: 0;
margin-left: auto;
border-top: 0.75rem solid transparent;
border-bottom: 0.75rem solid transparent;
border-right: 0.75rem solid #fff;
}
.eg_tab_list .eg_icon {
display: inline-flex;
position: relative;
flex-shrink: 0;
width: 18px;
height: 18px;
}
.eg_tab_list button.eg_selected .eg_icon {
width: 28px;
height: 28px;
}
.eg_tab_list button h3 {
font-size: 1rem;
line-height: 1.5rem;
font-weight: 400;
margin-left: 0.5rem;
padding-right: 0.5rem;
cursor: pointer;
}
.eg_tab_list button.eg_selected h3 {
font-weight: 500;
}
.eg_tab_panel {
display: none;
}
.eg_tab_panel.eg_active {
display: flex;
align-items: center;
width: 100%;
min-height: 214px;
}
.eg_content_info {
/* max-width: 26rem; */
}
.eg_content_image {
min-width: 30%;
padding-left: 1.5rem;
max-width: 17rem;
max-height: 16.625rem;
margin-left: auto;
}
.eg_content_image img {
object-fit: contain;
max-width: 100%;
height: auto;
}
.eg_dropdown_list {
display: flex;
margin: 20px 0;
}
.eg_dropdown_list .eg_dropdown_container {
border: 0.0625rem solid #333;
background: transparent;
display: inline-block;
position: relative;
max-width: 280px;
flex: 1;
}
.eg_dropdown_list button {
color: #333;
padding: 0 0.625rem;
display: flex;
width: 100%;
align-items: center;
border: none;
background-color: transparent;
font-family: "UniversNext", Arial, sans-serif;
line-height: 2.5rem;
}
.eg_dropdown_list button span {
position: relative;
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.eg_dropdown_list .eg_dropdown_item {
width: 95%;
display: flex;
align-items: center;
overflow: hidden;
}
.eg_dropdown_list .eg_dropdown_svg {
display: inline-flex;
position: relative;
flex-shrink: 0;
width: 1.125rem;
height: 1.125rem;
}
.eg_dropdown_list .eg_dropdown_svg svg {
font-size: 18px;
width: 1.125rem;
height: 1.125rem;
color: rgb(51, 51, 51);
position: absolute;
top: 0px;
left: 0px;
opacity: 1;
user-select: none;
display: inline-block;
flex-shrink: 0;
}
.eg_dropdown_list .eg_dropdown_label {
font-size: .875rem;
line-height: 1.25rem;
margin-left: 0.75rem;
overflow: hidden;
text-overflow: ellipsis;
padding: 0.625rem 0;
}
.eg_dropdown_list .eg_down_icon {
margin-left: 0.625rem;
display: inline-flex;
position: relative;
flex-shrink: 0;
width: 1.125rem;
height: 1.125rem;
}
.eg_dropdown_list:not(.eg_active) .eg_down_icon {
transform: rotate(180deg);
}
.eg_down_icon svg {
font-size: 18px;
width: 1.125rem;
height: 1.125rem;
color: rgb(51, 51, 51);
position: absolute;
top: 0px;
left: 0px;
opacity: 1;
user-select: none;
display: inline-block;
flex-shrink: 0;
}
.eg_dropdown_list .eg_dropdown_list_box {
width: 100%;
position: absolute;
left: -1px;
min-width: 10.375rem;
z-index: 1000;
border: 0.0625rem solid #333;
right: -0.0625rem;
display: none;
}
.eg_dropdown_list.eg_active .eg_dropdown_list_box {
display: block;
}
.eg_dropdown_list .eg_dropdown_list_box li {
background-color: #fff;
color: #333;
position: relative;
cursor: pointer;
display: flex;
align-items: center;
padding: 0.625rem;
white-space: nowrap;
}
.eg_dropdown_list .eg_dropdown_list_box li.eg_selected {
background-color: #f3f3f3;
}
.eg_dropdown_list .eg_dropdown_list_box li span {
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.25;
}
.eg_dropdown_list .eg_dropdown_list_box .eg_dropdown_label {
padding: 0;
}
.eg_dropdown_list .eg_go_btn {
margin-left: 10px;
background: #000;
color: #fff;
padding: 0 15px;
display: flex;
cursor: pointer;
font-size: 16px;
line-height: 38px;
}
.eg_tab_panel .eg_tab_panel_btn:hover,
.eg_dropdown_list .eg_go_btn:hover {
background-color: rgb(64, 64, 64);
}
.eg_internet_banking .eg_footer_link a {
color: #000;
text-decoration: none;
line-height: 24px;
position: relative;
}
.eg_internet_banking .eg_footer_link svg {
right: -14px;
bottom: 0;
top: auto;
left: auto;
transform: rotate(90deg);
width: 0.75rem;
height: 1rem;
fill: #db0010;
transition: right 0.3s ease-in-out;
}
.eg_internet_banking .eg_footer_link a:hover svg {
right: -18px;
transition: right 0.3s ease-in-out;
}
.eg_tab_panel h3 {
font-size: 2.1875rem;
line-height: 2.625rem;
font-weight: 300;
}
.eg_tab_panel .eg_sub_heading {
display: inline-block;
margin-top: 1rem;
width: 100%;
font-size: 1rem;
line-height: 1.5rem;
max-width: 26rem;
}
.eg_tab_panel .eg_tab_panel_btn {
padding: 0px 1.1875rem;
appearance: none;
box-shadow: none;
text-decoration: none;
display: inline-flex;
-webkit-box-align: center;
align-items: center;
cursor: pointer;
position: relative;
flex-shrink: 0;
border-width: 1px;
border-style: solid;
overflow: hidden;
border-radius: 0px;
transition: background-color 0.1s ease-out 0s, color 0.1s ease-out 0s, border 0.1s ease-out 0s;
background-color: rgb(0, 0, 0);
border-color: rgb(0, 0, 0);
color: rgb(255, 255, 255);
height: 2.5rem;
box-sizing: border-box;
align-items: center;
font-family: "UniversNext", Arial, sans-serif;
font-size: 1rem;
line-height: 1.5rem;
margin-top: 1.5rem;
}
.eg_tab_container .eg_dropdown_list {
display: none;
}
.eg_internet_banking .eg_footer_link a .eg_inline {
display: inline-block;
}
@media (min-width: 960px) {
.eg_useful_link {
padding: 2.5rem 5.125rem;
}
}
@media (max-width: 1279px) {
.eg_tab_panel h3 {
font-size: 1.375rem;
line-height: 1.9375rem;
}
.eg_internet_banking .eg_footer_link a,
.eg_tab_panel .eg_sub_heading {
font-size: .75rem;
line-height: 1rem;
}
.eg_internet_banking .eg_footer_link svg {
bottom: -2px;
}
.eg_dropdown_list {
flex-direction: column;
gap: 20px;
}
.eg_dropdown_list .eg_go_btn {
margin: 0;
max-width: max-content;
}
.eg_tab_panel.eg_active {
min-height: 240px;
}
.eg_tab_panel .eg_tab_panel_btn {
font-size: .75rem;
line-height: 1rem;
}
}
@media (max-width: 959px) {
.eg_useful_link .eg_title {
font-size: 1rem;
line-height: 1.5rem;
}
.eg_tab_list button h3 {
font-size: .625rem;
}
.eg_tab_panel h3 {
font-size: 1rem;
line-height: 1.5rem;
}
.eg_tab_content_container {
padding-left: 2.5rem;
}
.eg_dropdown_list .eg_dropdown_label,
.eg_dropdown_list .eg_go_btn,
.eg_tab_panel .eg_tab_panel_btn {
font-size: .5rem;
}
}
@media screen and (max-width: 759px) {
.eg_useful_link {
flex-direction: column;
}
.eg_tab_content_container {
flex-direction: column-reverse;
align-items: flex-start;
height: auto;
width: 100%;
box-sizing: border-box;
padding: 2rem 1.25rem 2.5rem;
margin-top: 1.5rem;
}
.eg_tab_panel {
flex-direction: column-reverse;
}
.eg_tab_panel .eg_content_info {
margin-top: 2.25rem;
max-width: unset;
}
.eg_tab_panel .eg_content_image {
margin: 0 auto;
max-width: unset;
max-height: unset;
padding-left: 0;
padding-right: 0;
}
.eg_tab_panel .eg_sub_heading {
max-width: 100%;
}
.eg_tab_panel h3 {
font-size: 1.375rem;
line-height: 1.9375rem;
}
.eg_tab_panel .eg_sub_heading {
display: block;
font-size: 1rem;
line-height: 1.5rem;
}
.eg_dropdown_list .eg_dropdown_label,
.eg_dropdown_list .eg_go_btn,
.eg_tab_panel .eg_tab_panel_btn {
font-size: 1rem;
}
.eg_useful_link .eg_title {
font-size: 1.5rem;
font-weight: 500;
width: 100%;
max-width: 100%;
margin-bottom: 1.5rem;
}
.eg_tab_container {
width: 100%;
box-sizing: border-box;
}
.eg_tab_container .eg_tab_list {
display: none;
}
.eg_tab_container .eg_dropdown_list {
margin: 0;
display: block;
}
.eg_tab_container .eg_dropdown_list .eg_dropdown_container {
width: 100%;
max-width: 100%;
}
}
/* ====== NEW TABLE CSS - END ======= */