/*!
 * 2023 Renewal of website brand image
 */
.brand-icon-2023 { width: 150px; height: 40px; display: block; background-image: url("../images/components/brand-2023.png"); background-repeat: no-repeat; background-position: center center; text-indent: -9999px; margin: 0 auto; padding: 10px 0; }

.content-container h1, .content-container h2 { color: #0172E5; }
.header-width-scale-2023 { max-width: 70em; }

.brand + .navigation { width: 35%; float: left; text-align: right; }
.navigation ul { font-size: 0; display: block; height: 3px; line-height: 90px; }                    /*For New Header*/
.navigation ul li { display: none; vertical-align: middle; font-size: 1rem; position: relative; }    /*For New Header*/

.navigation li.toolbar-2023.lang { line-height: 30px; height: 30px; display: inline-block; text-align: right; font-size: .9rem; }
.navigation li.toolbar-2023 { position: relative; margin-right: 1.5em; }
.navigation li.toolbar-2023 a:hover { background-color: transparent; }
.navigation li.toolbar-2023 a + ul { position: absolute; top: 36px; left: 50%; z-index: 9; }
.navigation li.toolbar-2023 a.active + ul { display: block; }
.navigation li.toolbar-2023 a span { display: inline-block; vertical-align: middle; font-size: 1.4em; }
.navigation li:last-child.toolbar-2023 { display: inline-block; margin-bottom: 1.5em; }
.navigation li:last-child.toolbar-2023 a { background-color: transparent; color: #1f1f1f; }
.navigation li:last-child.toolbar-2023 ul li a:hover { background-color: #cccccc; }
.navigation li:last-child.toolbar-2023 a + ul li a { background-color: #0172E5; color: white; }
.navigation li.toolbar-2023 ul { display: none; margin-left: -40px; width: 80px; }
.navigation li.toolbar-2023 ul li { display: block; margin: 0; width: 100%; background-color: #ffffff; }
.navigation li.toolbar-2023 ul li a { text-align: center; background-color: #0172E5; border-top: 1px solid #f2f2f2; padding: .5em .3em; line-height: 1.6; }
.navigation li.toolbar-2023 ul li:last-child a { border-bottom: 0; }

.sb-slidebar { z-index: 1; }

#sitemap { padding: 2em; }
#sitemap .share { display: flex; flex-wrap: nowrap; justify-content: center; align-items: stretch; margin: auto; }
#sitemap .share .item { display: inline-block; vertical-align: middle; position: relative; right: 5%; padding: 2.5em 2.7em; }
#sitemap .sitemap-inner .sitemap-list > ul.sitemap-list-container-2023 > li { width: 15%; float: left; }
#sitemap .sitemap-inner .sitemap-list > ul.sitemap-list-container-2023 > li:nth-child(6n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; }
#sitemap .sitemap-inner .sitemap-list > ul.sitemap-list-container-2023 > li:nth-child(6n + 2) { margin-left: 16%; margin-right: -100%; clear: none; }
#sitemap .sitemap-inner .sitemap-list > ul.sitemap-list-container-2023 > li:nth-child(6n + 3) { margin-left: 32%; margin-right: -100%; clear: none; }
#sitemap .sitemap-inner .sitemap-list > ul.sitemap-list-container-2023 > li:nth-child(6n + 4) { margin-left: 48%; margin-right: -100%; clear: none; }
#sitemap .sitemap-inner .sitemap-list > ul.sitemap-list-container-2023 > li:nth-child(6n + 5) { margin-left: 64%; margin-right: -100%; clear: none; }
#sitemap .sitemap-inner .sitemap-list > ul.sitemap-list-container-2023 > li:nth-child(6n + 6) { margin-left: 80%; margin-right: -100%; clear: none; }

.content-container > .slogan-center-2023 { padding: 1em 2em ; width: 100%; }

.flex { display: flex; flex-wrap: wrap; }

.container-grid { display: table; }
.container-grid .row { display: table-row; }
.container-grid .row .cell { display: table-cell; }

.content-container .content-container-inner .block .title:after { display: none; }

.background .video-wrap { width: 100%; height: 300px; }
.background .video-wrap video { position: relative; left: 50%; transform: translateX(-50%); height: 200px; }
.content-container .variable-wrapper { justify-content: center; align-items: baseline; }
.content-container .variable-wrapper .variable-item { flex-basis: 90%; margin: 1em 2em; }
.content-container .content-container-inner .link-wrapper { justify-content: space-around; align-items: baseline; }
.content-container .content-container-inner .link-wrapper .link-item { flex-basis: 90%; margin: 1em 0.3em; }
.content-container .content-container-inner .link-wrapper .link-item .cate { font-weight: 700; color: #595959; margin-top: 0.5em; }
.content-container .content-container-inner .link-wrapper .link-item h2 { margin: 0.5em 0; }
.content-container .content-container-inner .link-wrapper .link-item .link-more { text-decoration: underline; color: #939498; }
.content-container .flex .intro_icon {  max-width: 120px; max-height: 120px; }

.aspect-ratio-box { width: 100%; position: relative; padding-top: 35%; }
.aspect-ratio-box img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.aspect-ratio-box.home-banner { display: none; }
.verbxslider.home-banner-mobile { display: block; }

.btn.basic { background-color: #0172E5; }
.btn.reverse { background-color: #0172E5; }
.btn.gray:hover { background-color: #0172E5; }

#certificate-head { padding: 1em 0; background-repeat: no-repeat; background-size: cover; }
#certificate-head h1 { color: #0172E5; }
#certificate { justify-content: center; }

#certificate .cert-item { background-color: #0172E5; width: 100%; display: flex; align-items: center; flex-direction: column; gap: 24px; margin-bottom: 40px; text-align: left; } 
#certificate .cert-img { display: block; width: 100%; height: auto; }
#certificate .cert-img img { display: block; width: 100%; height: auto; }
#certificate .cert-content { flex: 1; width: 100%; }
#certificate .cert-item .cert-content h2 { color: #ffffff; margin: 1rem 2rem; font-size: xx-large; }
#certificate .cert-item .cert-content h3,#certificate .cert-item .cert-content p { color: #ffffff; margin: 0.3rem 2rem; }
#certificate .cert-item:first-child, #certificate .cert-item:last-child { background-color: #ffffff; }
#certificate .cert-item:first-child .cert-content h2, #certificate .cert-item:last-child .cert-content h2 {  color: #0172E5; }
#certificate .cert-item:first-child h3,#certificate .cert-item:last-child h3 { color: #0172E5; }
#certificate .cert-item:first-child p, #certificate .cert-item:last-child p { color: #1f1f1f; }

.qs-slider { max-width: 100%; margin: 0 0 40px; --qs-page-width: clamp(10px, 4vw, 60px); }
.qs-item { box-sizing: border-box; }
.qs-page { display: block; height: 8px; border-radius: 999px; background: #ddd; cursor: pointer; }
.qs-viewport { overflow: visible; }
.qs-pagination { display: none; }

#awards .page-list { margin: 3em 0; }
#awards .recognition-section { --mobile-image-size: 120px; --mobile-axis-width: 34px; --mobile-item-gap: 24px; --mobile-side-gap: 10px; --mobile-line-top: 10px; --mobile-line-width: 35px; --mobile-line-shift-left: 4px;
    --desktop-card-width: 240px; --desktop-image-width: 160px; --desktop-image-height: 160px; --desktop-title-height: 52px; --desktop-axis-height: 54px; --desktop-card-gap: 28px; --desktop-line-height: 45px; --desktop-line-right: 0;
    --icon-size-mobile: 16px; --icon-size-desktop: 18px; --icon-gap-mobile: 8px; --icon-gap-desktop: 8px; --icon-top-mobile: 0; --icon-top-desktop: 8px;
    --line-color: #0172E5;
    width: 100%; box-sizing: border-box; margin-bottom: 3em; }
#awards .recognition-section *, #awards .recognition-section *:before, #awards .recognition-section *:after { box-sizing: border-box; }
#awards .recognition-wrap { position: relative; width: 100%; }
#awards .recognition-slider { width: 100%; overflow: visible; }
#awards .recognition-list { position: relative; display: flex; flex-direction: column; gap: var(--mobile-item-gap); width: 100%; padding: 0; }
#awards .recognition-list:before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); border-left: 2px dashed var(--line-color); z-index: 0; }
#awards .recognition-item { position: relative; z-index: 1; display: flex; align-items: flex-start; width: 100%; min-width: 0; }
#awards .recognition-item-image-wrap { flex: 0 0 calc(50% - (var(--mobile-axis-width) / 2)); max-width: calc(50% - (var(--mobile-axis-width) / 2)); display: flex; justify-content: flex-end; padding-right: var(--mobile-side-gap); }
#awards .recognition-item-image { width: var(--mobile-image-size); height: var(--mobile-image-size); background: var(--image-bg-color); display: flex; align-items: center; justify-content: center; overflow: hidden; }
#awards .recognition-item-image img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; border: 4px solid transparent; }
#awards .recognition-item-image img.has-frame { border-color: #0172E5; }
#awards .recognition-item-axis { position: relative; flex: 0 0 var(--mobile-axis-width); width: var(--mobile-axis-width); min-height: var(--mobile-image-size); }
#awards .recognition-item-axis:before { content: ""; position: absolute; top: var(--mobile-line-top); left: calc(50% - var(--mobile-line-shift-left)); width: var(--mobile-line-width); border-top: 2px solid var(--line-color); transform: translateX(-50%); z-index: 2; }
#awards .recognition-item-right { position: relative; text-align: left; flex: 0 0 calc(50% - (var(--mobile-axis-width) / 2)); max-width: calc(50% - (var(--mobile-axis-width) / 2)); min-width: 0; padding-left: calc(var(--mobile-side-gap) + var(--icon-size-mobile) + var(--icon-gap-mobile)); }
#awards .recognition-item-icon { position: absolute; top: var(--icon-top-mobile); left: var(--mobile-side-gap); width: var(--icon-size-mobile); height: var(--icon-size-mobile); z-index: 3; }
#awards .recognition-item-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
#awards .recognition-item-title { margin: 0 0 8px; font-size: 18px; line-height: 1.4; font-weight: 700; color: #0172E5; overflow-wrap: break-word; word-break: break-word; }
#awards .recognition-item-body { min-width: 0; }
#awards .recognition-item-subtitle { margin: 0 0 8px; font-size: 14px; line-height: 1.6; font-weight: 600; color: #0172E5; overflow-wrap: break-word; word-break: break-word; }
#awards .recognition-item-desc { font-size: 14px; line-height: 1.8; color: #7E7E7E; overflow-wrap: break-word; word-break: break-word; }
#awards .recognition-arrow { display: none; position: absolute; top: 50%; transform: translateY(-50%); width: auto; height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: pointer; z-index: 5; }
#awards .recognition-arrow img { display: block; width: 39px; height: 39px; margin: 0 auto; }
#awards .recognition-arrow-prev { left: 0; }
#awards .recognition-arrow-next { right: 0; }
#awards .recognition-arrow.is-disabled { opacity: 0.35; pointer-events: none; }

#awards .segment-section { width: 100%; box-sizing: border-box; margin-bottom: 3em; }
#awards .segment-section *, #awards .segment-section *:before, #awards .segment-section *:after { box-sizing: border-box; }
#awards .segment-wrap { width: 100%; }
#awards .segment-list { display: flex; flex-wrap: wrap; gap: 20px; width: 100%; }
#awards .segment-item { width: 100%; background: #0172E5; padding: 20px; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
#awards .segment-item-image-wrap { width: 100%; margin-bottom: 16px; }
#awards .segment-item-image { width: 100%; height: 180px; display: flex; align-items: flex-start; justify-content: flex-start; overflow: hidden; }
#awards .segment-item-image img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
#awards .segment-item-title { margin: 0; font-size: 22px; line-height: 1.4; font-weight: 700; color: #FFFFFF; text-align: left; overflow-wrap: break-word; word-break: break-word; }
#awards .segment-item-subtitle { margin: 0 0 10px; font-size: 16px; line-height: 1.6; font-weight: 600; color: #FFFFFF; text-align: left; overflow-wrap: break-word; word-break: break-word; }
#awards .segment-item-desc { font-size: 14px; line-height: 1.8; color: #FFFFFF; text-align: left; margin-bottom: 25px; overflow-wrap: break-word; word-break: break-word; }

#esh .content-container-inner .content p { line-height: 2; font-size: 1.1em; }

.oem-banner { position: relative; width: 100%; overflow: hidden; background-color: #000; }
.oem-banner-slider { position: relative; width: 100%; height: 60vw; min-height: 210px; max-height: 320px; }
.oem-banner-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; z-index: 1; transition: opacity 0.45s ease, visibility 0.45s ease; }
.oem-banner-slide.is-active { opacity: 1; visibility: visible; z-index: 2; }
.oem-banner-media, .oem-banner-image, .oem-banner-video { position: absolute; inset: 0; width: 100%; height: 100%; }
.oem-banner-image, .oem-banner-video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.oem-banner-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 48px; height: 48px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.oem-banner-arrow img { display: block; width: 100%; height: 100%; object-fit: contain; }
.oem-banner-arrow-prev { left: 12px; }
.oem-banner-arrow-next { right: 12px; }
.oem-banner-pagination { position: absolute; right: 16px; bottom: 16px; z-index: 3; display: flex; align-items: center; gap: 8px; }
.oem-banner-dot { position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: #ffffff; cursor: pointer; overflow: hidden; transition: width 0.25s ease, background 0.25s ease; }
.oem-banner-dot.is-active { width: 42px; background: #ffffff; border-radius: 999px; }
.oem-banner-dot.is-active::after { content: ''; position: absolute; top: 0; right: 0; width: 16px; height: 100%; background: #2F70DE; border-radius: 999px; }

.oem-title.content-container { min-height: auto; }
.oem-produce-slogan { width: 100%; background-color: #141C2E; color: #FFFFFF; padding: 0.2rem 0; }
.oem-design-list { display: flex; flex-wrap: wrap; margin: 1rem; padding: 0; }
.oem-design-item { width: 100%; margin: 0 0 24px 0; box-sizing: border-box; }
.oem-design-media { position: relative; width: 100%; aspect-ratio: 17 / 9; overflow: hidden; margin: 0 0 16px 0; border-radius: 16px; }
.oem-design-media img, .oem-design-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.oem-design-content { text-align: left; }
.oem-design-content h3, .oem-design-content h4 { margin: 0 0 8px 0; color: #0172E5; text-align: left; }
.oem-design-content p { margin: 0; text-align: left; line-height: 1.8; }

.oem-produce-title { color: #0172E5; }
.oem-produce-list { width: 100%; margin: 0; padding: 0; }
.oem-produce-row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100%; margin: 0; padding: 0; }
.oem-produce-row:last-child { margin-bottom: 0; }
.oem-produce-row.row-1 .oem-produce-item, .oem-produce-row.row-2 .oem-produce-item, .oem-produce-row.row-3 .oem-produce-item { width: 100%; }
.oem-produce-item { position: relative; overflow: hidden; aspect-ratio: 4 / 3; cursor: default; background: #eee; margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }
.oem-produce-item.has-subtitle { cursor: pointer; }
.oem-produce-item img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-transition: transform .4s ease; transition: transform .4s ease; }
.oem-produce-item::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient( to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.28) 38%, rgba(0, 0, 0, 0) 70% ); z-index: 1; pointer-events: none; }
.oem-produce-caption { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; min-height: 32px; text-align: left; }
.oem-produce-caption h3, .oem-produce-caption h4 { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; color: #fff; -webkit-transition: opacity .3s ease, -webkit-transform .3s ease; transition: opacity .3s ease, transform .3s ease; }
.oem-produce-caption h3 { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); font-size: 20px; line-height: 1.3; font-weight: 700; }
.oem-produce-caption h4 { opacity: 0; -webkit-transform: translateY(10px); transform: translateY(10px); font-size: 15px; line-height: 1.5; }
.oem-produce-item.has-subtitle.is-open .oem-produce-caption h3 { opacity: 0; transform: translateY(-8px); }
.oem-produce-item.has-subtitle.is-open .oem-produce-caption h4 { opacity: 1; transform: translateY(0); }

.oem-global h1 { color: #0172E5; }
.oem-global-container { padding-top: 1rem; border-top: 15px solid #2F70DE; border-left: 15px solid #2F70DE; border-right: 15px solid #2F70DE; }
.oem-global-img img { display: block; width: 100%; height: auto; }

.oem-quality-list { display: flex; flex-wrap: wrap; margin-left: -10px; margin-right: -10px; }
.oem-quality-item { position: relative; width: calc(100% - 20px); margin: 15px 50px; overflow: hidden; cursor: pointer; box-sizing: border-box; }
.oem-quality-item:before { content: ""; display: block; padding-top: 150%; }
.oem-quality-bg, .oem-quality-overlay, .oem-quality-inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.oem-quality-bg { display: block; z-index: 0; object-fit: cover; }
.oem-quality-overlay { z-index: 1; background: rgba(0, 102, 153, 0); transition: background 0.35s ease; }
.oem-quality-inner { z-index: 2; overflow: hidden; }
.oem-quality-content-slider { display: flex; width: 200%; height: 100%; transform: translateX(-50%); transition: transform 0.45s ease; }
.oem-quality-panel { width: 50%; height: 100%; padding: 25px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; text-align: left; }
.oem-quality-panel-default { align-items: flex-start; }
.oem-quality-title { margin: 0; color: #fff; font-size: 22px; line-height: 1.4; font-weight: bold; }
.oem-quality-arrow { display: block; width: 45px; height: auto; margin-top: 12px; margin-left: 0; margin-right: 0; }
.oem-quality-panel-detail { align-items: flex-start; }
.oem-quality-detail-title { margin: 0; color: #fff; font-size: 22px; line-height: 1.4; font-weight: bold; }
.oem-quality-detail-divider { display: block; width: 135px; height: 2px; margin: 14px 0; background: #E81F76; }
.oem-quality-detail-text { margin: 0; color: #fff; line-height: 1.7; }
.oem-quality-item.active .oem-quality-content-slider { transform: translateX(0); }
.oem-quality-item.active .oem-quality-overlay { background: rgba(47, 112, 222, 0.75); }
.oem-quality-item.active .oem-quality-panel-detail { justify-content: center; gap: 8px; }

.oem-recognize-list { display: flex; flex-wrap: wrap; margin-left: -10px; margin-right: -10px; }
.oem-recognize-item { position: relative; display: block; width: 100%; margin: 5px; overflow: hidden; text-decoration: none; box-sizing: border-box; color: inherit; }
.oem-recognize-bg { display: block; width: 100%; height: auto; }
.oem-recognize-item::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)); z-index: 1; pointer-events: none; }
.oem-recognize-content { position: absolute; left: 0; bottom: 0; width: 100%; padding: 25px; box-sizing: border-box; text-align: left; z-index: 2; }
.oem-recognize-title { margin: 0; color: #ffffff; font-size: 20px; line-height: 1.4; font-weight: bold; text-align: left; }
.oem-recognize-arrow-wrap { position: relative; display: inline-block; width: 28px; height: 28px; margin-top: 12px; vertical-align: top; }
.oem-recognize-arrow { position: absolute; top: 0; left: 0; display: block; width: 28px; height: auto; transition: opacity 0.3s ease; }
.oem-recognize-arrow-default { opacity: 1; }
.oem-recognize-arrow-hover { opacity: 0; }
.oem-recognize-item:hover .oem-recognize-arrow-default { opacity: 0; }
.oem-recognize-item:hover .oem-recognize-arrow-hover { opacity: 1; }

.oem-tail-context p { margin-top: 0; margin-bottom: 3rem; }

.oem-contact-section { width: 100%; background-color: #2F70DE; color: #ffffff; padding: 24px 0; overflow: hidden; }
.oem-contact-section-inner { width: min(100% - 48px, 1400px); margin: 0 auto; }
.oem-contact-card { display: flex; flex-direction: column; gap: 0; }
.oem-contact-card + .oem-contact-card { margin-top: 48px; padding-top: 48px; border-top: 1px solid rgba(255, 255, 255, 0.25); }
.oem-contact-col-left, .oem-contact-col-right { display: contents; }
.oem-contact-card-image { order: 1; width: calc(100% + 24px); margin-right: -24px; display: flex; justify-content: flex-end; }
.oem-contact-card-left { order: 2; width: 100%; display: flex; flex-direction: column; gap: 14px; margin-top: 30px; }
.oem-contact-list-info { order: 3; width: 100%; margin-top: 3em; }
.oem-contact-card-brief { order: 4; width: 100%; display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.oem-contact-section-img { display: block; width: 100%; max-width: none; height: auto; object-fit: contain; object-position: right top; }
.oem-contact-page-title { margin: 0; font-size: 3em; line-height: 1.1; }
.oem-contact-page-desc { margin: 0; line-height: 1.8; font-weight: bold; white-space: pre-wrap; }
.oem-contact-list-title { margin: 0; line-height: 1.25; }
.oem-contact-list-subtitle { margin-top: 1em; line-height: 1; white-space: pre-wrap; }
.oem-contact-divider { width: 100%; height: 1px; background-color: rgba(255, 255, 255, 0.95); }
.oem-contact-list-brief { margin: 0; line-height: 1.3; white-space: pre-wrap; }
.oem-contact-page-desc p, .oem-contact-list-brief p { margin: 0; }
.oem-contact-section a { color: #ffffff; text-decoration: none; }

.news-list-wrapper .news-list li:hover { border: 4px solid #0172E5; }
.news-list-wrapper .news-list .content .title h2 { font-size: larger; }
.news-list-wrapper .news-list .article { display: table; min-height: 512.55px; padding: 1em 1em 0.5em 1em; }
.news-list-wrapper .news-list .article .article-head { display: table-row; height: 230px; }
.news-list-wrapper .news-list .article .thumb { display: table-row; }
.news-list-wrapper .news-list .article .article-footer { display: table-row; height: 60px; }
.news-list-wrapper .news-list .article .article-footer .content { display: table; width: 100%; padding: 1em 0 0 0; }
.news-list-wrapper .news-list .article .article-footer .fb-icon { display: table-cell; width: 30%; padding: 0 0 0 1em; }
.news-list-wrapper .news-list .article .article-footer .read-full { display: table-cell; width: 70%; text-decoration: underline; padding: 0 0 0 1em; }
.news-list-wrapper .news-list-inner .article .content h1 { padding-left: 12px; border-left: 7px solid #E81F76; line-height: 1.4; }
.news-list-wrapper .news-list-inner .article .content .icons-back { color: #0172E5; vertical-align: middle; font-size: 2.5em; }
.news-list-wrapper .news-list-inner .article .content .icons-link { vertical-align: middle; color: #cccccc; margin: 0 2px; font-size: 2.5em; }

.investor-wrapper .investor-reports .investor-reports-table:first-child thead { background-color: #595959; }
ul.spokesperson li { border-bottom: 4px solid #0172E5; }
ul.spokesperson li .mail a:hover { color: #0172E5; }

.group-list li a { color: #0172E5; }

#hrm .content-container-inner li { margin: 1em; }
#hrm .content-wrapper .content { color: #1f1f1f; }
#hrm .main { text-align: left; }
#hrm .main .wrapper h1 { font-size: 2em; }
#hrm .more-link-2023 a { color:#A5BBCB; }
#hrm .more-link-2023 p { margin: auto; }

.esg-banner { height: 300px }
.esg-banner ul { display: flex; flex-wrap: wrap; top: 18%; justify-content: center; align-items: center; height: 75%; position: relative; }
.esg-banner ul > li:nth-child(n+2) { display: none; }
.esg-banner ul > li { width: 32vmin; height: 32vmin; border-radius: 50%; margin: 0 2vmin; background-image: linear-gradient(180deg, rgb(255,255,255), rgb(255,255,255),rgb(255,255,255,0.7),transparent); box-shadow: 5px 5px 8px 1px rgb(31,31,31,0.5); color: #0172E5; vertical-align: middle; }
.esg-banner ul > li .bg-flex-content { display: flex; flex-wrap: nowrap; flex-direction: column; height: 100%; justify-content: center; margin: 0 0.5em; }
.esg-banner ul > li .bg-flex-content h2,.esg-banner ul > li .bg-flex-content p { margin: 0; font-size: 2.5vmin; }
.esg-banner ul > li .bg-flex-content h2 span { font-size: 6vmin; }
.content-container .content-container-inner.esg-header { padding: 1em; }
.esg-wrapper .ns_wrapper { width: 100%; }
.esg-wrapper .ns_wrapper a { display: flex; flex-wrap: nowrap; }
.esg-wrapper .ns_wrapper a .ns_arrow { flex-basis: 15%; }
.esg-wrapper .ns_wrapper a .ns_date { flex-basis: 20%; }
.esg-wrapper .ns_wrapper a .ns_title { flex-basis: 65%; }
.esg-wrapper .ns_wrapper a h3 { color: #1f1f1f; padding: 0 0.5em; }
.esg-wrapper .ns_wrapper .ns_more { text-align: right; }
.esg-wrapper .ns_wrapper .ns_more a { display: inline-block; color: #5b5b5b; }
.esg-wrapper .ns_wrapper .ns_more a p { display: inline-block; margin: auto; }
.esg-wrapper .ns_wrapper .ns_more a span { display: none; }
.esg-wrapper .content .py_wrapper { display: flex; flex-wrap: wrap; justify-content: center;}
.esg-wrapper .content .py_wrapper .py_thumb { width: 100%; height: 100%; max-width: 100px; max-height: 100px; flex-shrink: 0; }
.esg-wrapper .is_wrapper { background-color: #f2f2f2; }
.esg-wrapper .is_wrapper .content h3 { color: #0172E5; }
.esg-wrapper .filter-list { display: none; }
.esg-wrapper .i-6-list ul > li { flex-basis: 100%; margin: 0.5em 0; }
.esg-wrapper .filter-item { display: none; margin: 2.5em 0; }
.esg-wrapper .filter-item.active { display: block; }
.esg-wrapper .filter-btn .is_arrow { color: #ffffff; }
.esg-wrapper h1.report-year { padding: 0 2rem; text-decoration: underline; }
.esg-wrapper .area-item { display: none; }
.esg-wrapper .area-item a { color: rgb(128,128,131); }
.esg-wrapper .area-item a:hover { color: #E81F76; }
.esg-wrapper .area-item.active { display: block; margin-left: 15%; }

.ns_list { --g: 15px; display: flex; flex-wrap: wrap; align-items: center; gap: var(--g); list-style: none; padding: 0; margin: 0; }
.ns_list > li{ flex: 0 1 calc((100% - (var(--g) * 2)) / 3); box-sizing: border-box; flex-basis: 100%; }
.ns_list .ns_link{ display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; text-decoration: none; color: inherit; }
.ns_list .ns_link:hover{ color: #E81F76; }
.ns_list .ns_icon{ flex: 0 0 auto; padding-right: 30px; height: 30px; margin: 10px 0; }
.ns_list .ns_text{ min-width: 0; word-break: break-word; }

.slider-flex-wrapper { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-around; }
.slider-flex-wrapper .slider-flex-btn { flex: 1 1 0; padding: 3em 0; }
.slider-flex-wrapper .slider-flex-btn a { display: inline-block; color: #ffffff; background-color: #08162c; padding: 2em 0.5em; opacity: 0.9; }
.slider-flex-wrapper .slider-flex-content { flex: 10 1 0; }

#scrollToTop { display: none; position: fixed; right: 2em; bottom: 2em; z-index: 9; }
#scrollToTop a { color: #0172E5; }

#stake .content-container-inner { margin: 0 1em; }
#stake .content-container-inner header { padding-right: 2em; }
#stake .list-wrapper { margin: 1em 0; }
#stake .list-wrapper .list-item { flex-basis: 85%; margin: 1em; }
#stake .list-wrapper .list-item .list-icon { width: 120px; height: 120px; margin-left: 0; margin-right: 1em; }
#stake .list-wrapper .list-item .list-cont { flex-basis: 100%; }
#stake .list-wrapper .list-item .list-cont h2 { color: #1f1f1f; font-size: 2em; margin: 0.5em 0; }
#stake .list-wrapper .list-item .list-cont h3 { margin: 0.5em 0; font-size: 1.2em; }
#stake .list-wrapper .list-item .list-cont .mailto { color: #1f1f1f; }
#stake .list-wrapper .list-item .list-cont .mailto:hover { color: #0172E5; text-decoration: underline; }
#stake .list-wrapper .list-item .list-cont .list-link-title { color: #0172E5; }
#stake .list-wrapper .list-item .list-cont .list-link { color: #E81F76; }

#location .site-list { margin: 0 3em;}
#location .site-list .site-info .flex-align { flex-direction: column; justify-content: flex-start;}
#location .site-list .site-info h3 { margin: 0; }
#location .site-list .site-info .map-link { align-self: center;}
#location .site-list .site-info .map-link img { margin: 0.3em 0; }

table.directors-list th, table.directors-list td { white-space: pre-wrap; }

/* Survey Message */
.popup-wrap { width: 100%; height: 100%; display: none; position: fixed; top: 0px; left: 0px; content: ''; z-index: 1; }
.popup-box { width: 80%; padding: 20px 20px; transform: translate(-50%, -50%) scale(0.5); position: absolute; top: 65%; left: 50%; 
            box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.5); border-radius: 20px; background: #ffffff; text-align: left; }
.popup-box ul > li:first-child a { color: #ffffff; background-color: #0172E5; }
.popup-btn { color:#0172E5; display: inline-block; width: 70%; padding: 0.3em; margin: 0.5em; border: 3px #0172E5 solid; border-radius: 10px; text-align: center; }
.popup-box ul > li a:hover { color: #ffffff; background-color: #E81F76; border: 3px #E81F76 solid; };
.transform-in, .transform-out { display: block; -webkit-transition: all ease 0.5s; transition: all ease 0.5s; }
.transform-in { transform: translate(-50%, -50%) scale(1); }
.transform-out { transform: translate(-50%, -50%) scale(0.5); }
/* Survey Message */


@media (min-width: 768px) {.copyrights .text { padding-top: 4.5em; }
.content-container .variable-wrapper .variable-item { flex-basis: 40%; }
.content-container .content-container-inner .link-wrapper .link-item { flex-basis: 20%; }
.content-container .content-container-inner .content.full { width: 100%; padding: 0; }
.content-container > .slogan-center-2023 { padding: 1em 10em ; width: 100%; }
.aspect-ratio-box.home-banner { display: block; }
.verbxslider.home-banner-mobile { display: none; }
.background .video-wrap video { height: 250px; }
.timeline li ul li:after { border: 4px solid #0172E5; }
.timeline li ul li:hover:after { background-color: #0172E5; }
.products-grid li .caption { background-color: rgba(60, 60, 60, 0.8); }
#hrm .content-container-inner ul { text-align: left; }
#hrm .content-container-inner li { margin: 1em; width: 28%; display: inline-block; float: left; }
#hrm .thumb { display: inline-block; vertical-align: middle; float: left; width: 33%; }
#hrm .content-wrapper { display: inline-block; vertical-align: middle; text-align: left; margin-left: 1em; width: 58%; }
.esg-banner { height: 560px }
.esg-banner ul { flex-wrap: nowrap; top: 20%; }
.esg-banner ul > li { width: 15vmin; height: 15vmin; margin: 0 0.8vmin; transform: translateY(0); transition: transform 0.4s linear 0s; }
.esg-banner ul > li:nth-child(n+2) { display: list-item; }
.esg-banner ul > li:nth-child(odd) { position: relative; top: -5vmin; }
.esg-banner ul > li:hover { transform: translateY(-25px); transition: transform 0.4s linear 0s; }
.esg-banner ul > li .bg-flex-content h2,.esg-banner ul > li .bg-flex-content p { font-size: 1vmin; }
.esg-banner ul > li .bg-flex-content h2 span { font-size: 2.5vmin; }
.esg-wrapper .ns_wrapper a .ns_arrow { flex-basis: 6%; }
.esg-wrapper .ns_wrapper a .ns_date { flex-basis: 10%; }
.esg-wrapper .ns_wrapper a .ns_title { flex-basis: 84%; }
.esg-wrapper .ns_wrapper .ns_more a { width: 56px; overflow: hidden; white-space: nowrap; }
.esg-wrapper .ns_wrapper .ns_more a:hover { width: 90px; transition: width 0.6s linear 0s; }
.esg-wrapper .ns_wrapper .ns_more a span { display: inline-block; }
.esg-wrapper .content .py_wrapper { flex-wrap: nowrap; justify-content: space-between; flex: 1 1 32%; margin-right: 1%; max-width: 32%; text-align: left; }
.esg-wrapper .content a { outline: none; }
.esg-wrapper .content a h3 { margin: 15px 0 5px 0; }
.esg-wrapper .content .filter-btn a { color: #5b5b5b; display: flex; flex-direction: column; flex-grow: 1; justify-content: flex-start; }
.esg-wrapper .i-6-list ul { align-items: stretch; justify-content: space-around; }
.esg-wrapper .i-6-list ul.flex-start { align-items: flex-start; }
.esg-wrapper .i-6-list ul > li { flex-basis: 16%; max-width: 16%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-end; }
.esg-wrapper .filter-list { display: flex; flex-wrap: wrap; }
.esg-wrapper .filter-btn img { max-width: 100px; max-height: 100px; }
.esg-wrapper .is_wrapper { position: relative; top: -34px; }
.esg-wrapper .filter-btn.active .is_arrow { color: #f2f2f2; }
.esg-wrapper .area-item.active { margin-left: 25%; }
.ns_list > li{ flex: 0 1 calc((100% - (var(--g) * 2)) / 3); box-sizing: border-box; }
.slider-flex-wrapper .slider-flex-btn { display: none; }
#stake .list-wrapper .list-item { flex-basis: 50%; margin: 2em 0; }
#stake .list-wrapper .list-item .list-icon { margin: 0 0.5em; }
#stake .list-wrapper .list-item .list-cont { flex-basis: 64%; }
#stake .list-wrapper .list-item .list-cont h2 { margin: 0 0 0.5em 0; }
.r-4-12 { display: inline-block; width: 30%; }
.popup-wrap { width: 100%; height: 100%; display: none; position: fixed; top: 0px; left: 0px; content: ''; z-index: 1; }
.popup-box { width: 40%; padding: 40px 60px; transform: translate(-50%, -50%) scale(0.5); position: absolute; top: 65%; left: 50%; 
            box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.5); border-radius: 20px; background: #ffffff; text-align: left; }
.popup-box li { display: inline; }
.popup-box ul > li:first-child a { color: #ffffff; background-color: #0172E5; }
.popup-btn { color:#0172E5; display: inline-block; width: 40%; margin: 0.5em; border: 3px #0172E5 solid; border-radius: 10px; text-align: center; }
.popup-box ul > li a:hover { color: #ffffff; background-color: #E81F76; border: 3px #E81F76 solid; };
.transform-in, .transform-out { display: block; -webkit-transition: all ease 0.5s; transition: all ease 0.5s; }
.transform-in { transform: translate(-50%, -50%) scale(1); }
.transform-out { transform: translate(-50%, -50%) scale(0.5); }}


@media (min-width: 1024px) { .brand-icon-2023 { padding: 20px 0; margin: 0; }
.brand + .navigation { width: 90%; float: left; text-align: right; }
nav ul { display: block; height: 50px; line-height: 100px; }
.navigation ul { font-size: 0; display: block; height: 30px; line-height: 30px; } 
.navigation ul li { display: inline-block; vertical-align: middle; font-size: 1rem; position: relative; margin-top: 1.5em; } 
.navigation li.toolbar-2023 { display: inline-block; position: relative; margin-right: .8em; }
.navigation li.toolbar-2023 a:hover { background-color: transparent; }
.navigation li.toolbar-2023 a + ul { position: absolute; top: 36px; left: 50%; z-index: 9; }
.navigation li.toolbar-2023.lang a + ul { top: 40px; }
.navigation li.toolbar-2023 a.active + ul { display: block; }
.navigation li.toolbar-2023 a span { display: inline-block; vertical-align: middle; font-size: 1em; }
.navigation li:last-child.toolbar-2023 { display: inline-block; margin-bottom: 0.5em; }
.navigation li:last-child.toolbar-2023 ul { width: 68px; margin-left: -23px; }
.navigation li:last-child.toolbar-2023 a { background-color: transparent; color: #ffffff; }
.navigation li.toolbar-2023 ul li a:hover { background-color: #cccccc; color: white; }
.navigation li.toolbar-2023 ul { display: none; margin-left: -60px; width: 160px; }
.navigation li.toolbar-2023 ul li { margin: 0; width: 78%; background-color: #ffffff; }
.navigation li.toolbar-2023 ul li a { text-align: center; background-color: #0172E5; border-top: 1px solid #f2f2f2; padding: .5em .3em; line-height: 1.6; }
.navigation li.toolbar-2023.lang ul li:last-child a { border-bottom: 0; font-size: .9rem; }
#sitemap .sitemap-inner .sitemap-list { display: block; width: 90%; float: right; margin-right: 0; }
.background.static-cover h1 { color: #0172E5; }

#certificate .cert-img { display: block; width: 45%; height: auto; }
#certificate .cert-img img { display: block; height: auto; }
#certificate .cert-item { flex-direction: row; flex-wrap: nowrap; }
#certificate .cert-item:nth-child(even) { flex-direction: row-reverse; display: flex; align-items: flex-start; }
#certificate .cert-item:nth-child(even) .cert-content { margin-left: 12rem; margin-top: 3vw; }
#certificate .cert-item:nth-child(odd) .cert-content { margin-right: 12rem; }

.qs-slider { max-width: 45%; }
.qs-viewport { overflow: hidden; }
.qs-track { position: relative; left: 0; transition: left .4s ease; }
.qs-track.is-slider { display: flex; }
.qs-page-inner { flex: 0 0 100%; box-sizing: border-box; padding-right: 24px; }
.qs-pagination { display: flex; gap: 8px; margin-top: 15px; margin-left: 23px; }
.qs-page { display: block; height: 8px; border-radius: 999px; background: #ddd; cursor: pointer; flex: 0 0 var(--qs-page-width); max-width: 100%; }
.qs-page.is-active { background: #E81F76; }

#awards .recognition-wrap { padding: 0 56px; }
#awards .recognition-slider { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; }
#awards .recognition-slider::-webkit-scrollbar { display: none; }
#awards .recognition-list { position: relative; display: flex; flex-direction: row; align-items: flex-start; gap: var(--desktop-card-gap); width: max-content; min-width: 100%; padding-bottom: 8px; }
#awards .recognition-list:before { content: ""; position: absolute; top: calc( var(--desktop-image-height) + var(--desktop-title-height) + (var(--desktop-axis-height) / 2)); left: 0; right: 0; bottom: auto; transform: none; border-left: 0; border-top: 2px dashed var(--line-color); z-index: 0; }
#awards .recognition-item { position: relative; flex: 0 0 var(--desktop-card-width); width: var(--desktop-card-width); display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
#awards .recognition-item-image-wrap { order: 1; flex: 0 0 auto; width: 100%; max-width: 100%; height: var(--desktop-image-height); display: flex; justify-content: flex-end; align-items: center; padding: 0; margin: 0; align-self: stretch; }
#awards .recognition-item-image { width: var(--desktop-image-width); height: var(--desktop-image-height); margin: 0 0 0 auto; display: flex; align-items: center; justify-content: flex-end; align-self: flex-end; }
#awards .recognition-item-image img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; margin-left: auto; margin-right: 0; }
#awards .recognition-item-right { display: contents; }
#awards .recognition-item-title { order: 2; max-width: 100%; min-height: var(--desktop-title-height); margin: 0 0 0 auto; padding-top: 12px; display: flex; align-items: flex-start; justify-content: flex-end; font-size: 20px; line-height: 1.4; text-align: right; align-self: flex-end; }
#awards .recognition-item-axis { order: 3; position: relative; flex: 0 0 auto; width: 100%; height: var(--desktop-axis-height); min-height: var(--desktop-axis-height); align-self: stretch; }
#awards .recognition-item-axis:before { content: ""; position: absolute; top: 50%; right: 1px; left: auto; width: 0; height: var(--desktop-line-height); border-top: 0; border-left: 2px solid var(--line-color); transform: translateY(-50%); z-index: 2; }
#awards .recognition-item-icon { order: 4; position: static; width: var(--icon-size-desktop); height: var(--icon-size-desktop); margin-top: var(--icon-top-desktop); margin-bottom: var(--icon-gap-desktop); align-self: flex-end; flex: 0 0 auto; }
#awards .recognition-item-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
#awards .recognition-item-body { order: 5; max-width: 100%; min-width: 0; margin: 0 0 0 auto; padding-left: 37px; text-align: right; align-self: flex-end; }
#awards .recognition-item-subtitle { margin: 0 0 8px; font-size: 15px; line-height: 1.6; text-align: right; }
#awards .recognition-item-desc { font-size: 14px; line-height: 1.8; text-align: right; }
#awards .recognition-arrow { display: block; }

#awards .segment-list { gap: 28px; }
#awards .segment-item { width: calc((100% - 28px) / 2); padding: 22px; }
#awards .segment-item-image { align-items: flex-start; }

#location .site-list { margin: 0;}
#location .site-list .site-info .flex-align { flex-direction: row; align-items: center;}
#location .site-list .site-info h3 { margin: 0; }
#location .site-list .site-info .map-link { align-self: center;}
#location .site-list .site-info .map-link img { width: 50%; margin: 0 0.5em; }

.oem-banner-slider { height: 38vw; min-height: 380px; max-height: 560px; }
.oem-banner-arrow { width: 58px; height: 58px; }
.oem-banner-arrow-prev { left: 24px; }
.oem-banner-arrow-next { right: 24px; }
.oem-banner-pagination { right: 32px; bottom: 24px; gap: 10px; }
.oem-banner-dot { width: 9px; height: 9px; }
.oem-banner-dot.is-active { width: 56px; }
.oem-banner-dot.is-active::after { width: 20px; }

.oem-design-list { margin: 0 -24px; padding: 0; }
.oem-design-item { width: 50%; padding: 0 24px; margin: 0 0 48px 0; }
.oem-produce-row { margin-bottom: 1rem; }
.oem-produce-row.row-1 .oem-produce-item { width: 100%; }
.oem-produce-row.row-2 .oem-produce-item { width: 50%; }
.oem-produce-row.row-3 .oem-produce-item { width: 33.333333%; }
.oem-produce-caption { left: 24px; right: 24px; bottom: 24px; }
.oem-produce-caption h3 { font-size: 20px; line-height: 1.3; }
.oem-produce-caption h4 { font-size: 16px; line-height: 1.5; }
.oem-global-container { border-top: 25px solid #2F70DE; border-left: 25px solid #2F70DE; border-right: 25px solid #2F70DE; }

.oem-quality-item { width: calc(33.333% - 20px); margin: 10px; }
.oem-quality-item:before { padding-top: 155%; }
.oem-quality-panel { padding: 35px; }
.oem-quality-title { font-size: 22px; }
.oem-quality-arrow { width: 45px; margin-top: 15px; }
.oem-quality-detail-title { font-size: 23px; }
.oem-quality-detail-divider { width: 155px; margin: 16px 0; }
.oem-quality-detail-text { line-height: 1.8; }

.oem-recognize-item { width: calc(50% - 20px); }
.oem-recognize-content { padding: 45px; }
.oem-recognize-title { font-size: 24px; }
.oem-recognize-arrow-wrap { width: 32px; height: 32px; margin-top: 14px; }
.oem-recognize-arrow { width: 32px; }

.oem-contact-section { padding: 56px 0; }
.oem-contact-section-inner { width: 100%; max-width: none; margin: 0; }
.oem-contact-card { --desktop-gap: clamp(12px, 2vw, 24px); --desktop-left-space: clamp(120px, 12vw, 280px);
    display: flex; flex-direction: row-reverse; align-items: flex-start; gap: var(--desktop-gap); width: calc(100% - var(--desktop-left-space)); margin-left: var(--desktop-left-space); box-sizing: border-box; }
.oem-contact-col-left, .oem-contact-col-right { display: flex; flex-direction: column; }
.oem-contact-col-left { flex: 0 0 calc((100% - var(--desktop-gap)) * 0.4); max-width: calc((100% - var(--desktop-gap)) * 0.4); gap: 18px; margin-top: 5em; align-items: flex-end; }
.oem-contact-col-right { flex: 0 0 calc((100% - var(--desktop-gap)) * 0.6); max-width: calc((100% - var(--desktop-gap)) * 0.6); gap: 20px; margin-left: auto; }
.oem-contact-card-image { order: initial; width: 100%; margin-right: 0; display: flex; justify-content: flex-end; }
.oem-contact-card-left { order: initial; width: 100%; margin-top: 0; gap: 14px; }
.oem-contact-list-info { order: initial; width: 100%; }
.oem-contact-card-left, .oem-contact-list-info { width: min(100%, 460px); margin-left: auto; }
.oem-contact-card-brief { order: initial; width: 100%; margin-top: 0; gap: 0; }
.oem-contact-divider { display: none; }
.oem-contact-section-img { width: 100%; max-width: none; max-height: 520px; object-fit: contain; object-position: right top; }
.oem-contact-page-title { margin-top: 6px; }
.oem-contact-page-desc { max-width: 460px; }
.oem-contact-list-subtitle { max-width: 460px; }
.oem-contact-list-brief { max-width: 560px; margin-left: 40%; margin-right: 10px; }
.oem-contact-card--no-list .oem-contact-col-left { flex: 0 0 calc((100% - var(--desktop-gap)) * 0.3); max-width: calc((100% - var(--desktop-gap)) * 0.3); }

.esg-banner ul > li { width: 17vmin; height: 17vmin; }
.esg-banner ul > li .bg-flex-content h2,.esg-banner ul > li .bg-flex-content p { font-size: 1.5vmin; }
.esg-banner ul > li .bg-flex-content h2 span { font-size: 3.2vmin; }
#stake .list-wrapper .list-item { flex-basis: 50%; margin: 2em 0; }
#stake .list-wrapper .list-item .list-icon { margin: 0 0.5em; }
#stake .list-wrapper .list-item .list-cont { flex-basis: 73%; }}


/** subscribe 20230706 will **/
#subscribe-content{
    padding:0  10px;
}
.mb-3{
    margin-bottom: 1.5rem !important; 
}
.text-center{
    text-align: center;
}
#subscribe {
    max-width:100%;
}

#subscribe .form-control{
    margin-bottom:20px;
    display: flex;
    /* position: relative; */
}

#subscribe .form-control > label{
    min-width:100px;
    display: flex;
    align-items: center;
}
label.require::before{
    content: "* ";
    color:red;
}
#subscribe .form-control input[type='text'],
#subscribe .form-control input[type='email'], 
#subscribe .form-control input[type='number'], 
#subscribe .form-control input[type='file'], 
#subscribe .form-control input[type='textarea'],
#subscribe .form-control select{
    border:#0172E5 solid 1px;
    border-radius: 5px;
    width: calc(100% - 100px);
    height:44px;
    padding-left:10px;
}
#subscribe .form-control input::placeholder{
    color:#bbb;
}
#subscribe .form-control input[type='checkbox']{
    display: none;
}
#subscribe .form-control input[type='checkbox'] + span {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
}
#subscribe .form-control input[type="checkbox"] + span:before {
    content: '';
    position: absolute;
    left: 0;
    top: -15px;
    width: 20px;
    height: 20px;
    border: 1px solid #0172E5;
    background: #fff;
    border-radius: 5px;;
}
#subscribe .form-control input[type="checkbox"]:checked + span:after {
    content: '\2714';
    position: absolute;
    left: 5px;
    top: -16px;
    border-radius: 5px;
    color:#0172E5;
}

.form-control .check-group{
    display: flex;
    flex-wrap: wrap;
}
.form-control .check-group > div{
    display: flex;
    align-items: baseline;
}
.form-control .check-group label{
    margin-right:30px;
}

select.form-select {
    appearance: none; /* 隱藏原生的箭頭 */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="23" height="14" fill="%230172E5" viewBox="0 0 23 14"><path d="m0 2.8l2.8-2.8 11.2 11.2-2.8 2.8z"/><path d="m11.8 14l-2.8-2.8 11.2-11.2 2.8 2.8z"/></svg>');
    background-position: right 10px center; /* 調整背景位置 */
    background-repeat: no-repeat;
    padding-right: 30px; /* 增加右邊的 padding 來容納箭頭 */
}

select.form-select:focus-visible {
    border: 1px solid #0172E5;
    outline: none;
}
p.cancelNotify{
    padding-left:100px;
    color:red;
}
p.cancelNotify::before{
    content: "* ";
}
.btn-subscribe{
    margin: .25rem .125rem;
    color:#fff;
    background-color: #0172E5;
    border: none;
    outline: none;
    padding: .5rem 2rem;
}
.btn-subscribe:hover{
    background-color: #0066cc;
}
.btn-subscribe:active{
    background-color: #025ab3;
}

/** dialog 20230712 will **/
.d-none{
    display:none;
}
.dialog-box {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}
.dialog-info{
    position:fixed;
    max-width:75%;
    width:400px;
    padding:1.5rem;
    top:50%;
    left:50%;
    transform: translateX(-50%) translateY(-50%);
    background-color: #fff;
    box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.5);
    border-radius: 20px;
}
.dialog-content{
    margin-bottom: 15px;
}
.dialog-btn{
    text-align: center;
}
.dialog-btn .btn{
    width:40%;
    margin: 5px 10px;
    border-radius: 10px;
    padding:.25rem 1rem;
    
}
.btn-ok{
    border: solid 2px #0172E5;
    background-color: #0172E5;
    color:#fff;
}
.btn-ok:hover{
    background-color: #0068cf;
}
.btn-no{
    border: solid 2px #E81F76;
    background-color: #E81F76;
    color:#fff;
}
.btn-no:hover{
    background-color: #c41b64;
}