.detail-symbol { width: 1em; height: 1em; font-size: 26px; } .loading-container { position: absolute; text-align: center; display: block; z-index: 10; width: 100%; height: 100%; } .loading-container .loading-masker-container { filter: blur(1px); position: relative; pointer-events: none; width: 100%; height: 100%; } .loading-container .loading-masker { content: ""; position: absolute; inset: 0; opacity: 0.4; z-index: 99; background-color: #fff; } .loading-container .loading-indicator-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .loading-container .loading-indicator-container .loading-indicator { display: inline-block; position: relative; margin: 0; width: 48px; height: 48px; animation-duration: 5.6s; animation-timing-function: linear; animation-name: vectorRoute; animation-iteration-count: infinite; top: 50%; } .loading-container .loading-indicator-container .loading-indicator .loading-indicator-item { position: absolute; width: 12px; height: 12px; border-radius: 50%; background-color: #ff6a00; animation-duration: 1.4s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; margin: auto; } .loading-container .loading-indicator-container .loading-indicator .loading-indicator-item:nth-child(1) { top: 0; bottom: 0; left: 0; animation-name: vectorDotsX; } .loading-container .loading-indicator-container .loading-indicator .loading-indicator-item:nth-child(2) { left: 0; right: 0; animation-name: vectorDotsY; opacity: 0.8; } .loading-container .loading-indicator-container .loading-indicator .loading-indicator-item:nth-child(3) { top: 0; bottom: 0; right: 0; animation-name: vectorDotsXR; opacity: 0.6; } .loading-container .loading-indicator-container .loading-indicator .loading-indicator-item:nth-child(4) { left: 0; right: 0; bottom: 0; animation-name: vectorDotsYR; opacity: 0.2; } @keyframes vectorRoute { 0% { transform: rotate(0); } 5% { transform: rotate(90deg); } 25% { transform: rotate(90deg); } 30% { transform: rotate(180deg); } 50% { transform: rotate(180deg); } 55% { transform: rotate(270deg); } 75% { transform: rotate(270deg); } 80% { transform: rotate(360deg); } to { transform: rotate(360deg); } } @keyframes vectorDotsX { 25% { left: 0; } 45%, 50% { left: 16.8px; width: calc(12px * 1.2); height: calc(12px * 1.2); } 90% { left: 0; height: 12px; width: 12px; } } @keyframes vectorDotsY { 25% { top: 0; } 45%, 50% { top: 16.8px; height: calc(12px * 1.2); width: calc(12px * 1.2); } 90% { top: 0; height: 12px; width: 12px; } } @keyframes vectorDotsXR { 25% { right: 0; } 45%, 50% { right: 16.8px; width: calc(12px * 1.2); height: calc(12px * 1.2); } 90% { right: 0; height: 12px; width: 12px; } } @keyframes vectorDotsYR { 25% { bottom: 0; } 45%, 50% { bottom: 16.8px; width: calc(12px * 1.2); height: calc(12px * 1.2); } 90% { bottom: 0; height: 12px; width: 12px; } } #the-new-header { margin-bottom: 10px; } #the-new-header.tnh-fixed .sub-menu-layout { display: flex; flex-direction: row; gap: 40px; margin: 0 auto; padding: 0 40px; min-width: 1240px; max-width: 1600px; } #the-new-header.tnh-fixed .sub-menu-layout .sub-menu-item { display: inline-block; position: relative; transition: color 0.3s; border-bottom: 4px solid #fff; color: #222; font-size: 14px; line-height: 36px; -webkit-text-decoration: none; text-decoration: none; } #the-new-header.tnh-fixed .sub-menu-layout .sub-menu-item:after, #the-new-header.tnh-fixed .sub-menu-layout .sub-menu-item:before { position: absolute; bottom: 0; transition: width 0.3s, transform 0.3s; background: #222; width: 0; height: 3px; content: ""; } html[dir="ltr"] #the-new-header.tnh-fixed .sub-menu-layout .sub-menu-item:before { left: 50%; transform: translate(-50%); } html[dir="rtl"] #the-new-header.tnh-fixed .sub-menu-layout .sub-menu-item:before { right: 50%; transform: translate(50%); } html[dir="ltr"] #the-new-header.tnh-fixed .sub-menu-layout .sub-menu-item:after { right: 50%; transform: translate(50%); } html[dir="rtl"] #the-new-header.tnh-fixed .sub-menu-layout .sub-menu-item:after { left: 50%; transform: translate(-50%); } #the-new-header.tnh-fixed .sub-menu-layout .sub-menu-item:hover { -webkit-text-decoration: none; text-decoration: none; } #the-new-header.tnh-fixed .sub-menu-layout .sub-menu-item:hover:after { width: 100%; } #the-new-header.tnh-fixed .sub-menu-layout .sub-menu-item.active:after, #the-new-header.tnh-fixed .sub-menu-layout .sub-menu-item.active:before { width: 100%; } .icbu-buyer-pc-top-banner:empty { display: none; }