.container { position: relative; margin-left: auto; margin-right: auto; width: 100%; max-width: 100%; padding-right: 20px; padding-left: 20px; } .container.-grid { padding-right: 20px; padding-left: 20px; } @media (min-width: 768px) { .container { max-width: 768px; padding-right: 40px; padding-left: 40px; } .container.-grid { padding-right: 40px; padding-left: 40px; } } @media (min-width: 1200px) { .container { max-width: 1280px; padding-right: 40px; padding-left: 40px; } .container.-grid { padding-right: 56px; padding-left: 56px; } } @media (min-width: 1920px) { .container { max-width: 1440px; padding-right: 40px; padding-left: 40px; } .container.-grid { padding-right: 60px; padding-left: 60px; } } @font-face { font-family: 'KlavikaWebBasic'; font-weight: 700; src: url(../../src/fonts/KlavikaWebBasicBold.woff2) format("woff2"), url(../../src/fonts/KlavikaWebBasicBold.woff) format("woff"), url(../../src/fonts/KlavikaWebBasicBold.otf) format("opentype"); font-display: swap; } @font-face { font-family: 'KlavikaWebBasic'; font-weight: 400; src: url(../../src/fonts/KlavikaWebBasicRegularSub.woff), url(../../src/fonts/KlavikaWebBasicRegular.woff2) format("woff2"), url(../../src/fonts/KlavikaWebBasicRegular.woff) format("woff"), url(../../src/fonts/KlavikaWebBasicRegular.otf) format("opentype"); font-display: swap; } .icon { line-height: 1; display: inline-block; } .icon[data-icon='fb']::before { text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: custom-u532d3; font-weight: normal; content: '\e000'; display: block; } .icon[data-icon='line']::before { text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: custom-u532d3; font-weight: normal; content: '\e001'; display: block; } .icon[data-icon='youtube']::before { text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: custom-u532d3; font-weight: normal; content: '\e002'; display: block; } .icon[data-icon='next']::before { text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: custom-u532d3; font-weight: normal; content: '\e003'; display: block; } .icon[data-icon='back']::before { text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: custom-u532d3; font-weight: normal; content: '\e004'; display: block; } .icon[data-icon='arrow-left']::before { text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: custom-u532d3; font-weight: normal; content: '\e005'; display: block; } .icon[data-icon='arrow-right']::before { text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: custom-u532d3; font-weight: normal; content: '\e006'; display: block; } .icon[data-icon='down']::before { text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: custom-u532d3; font-weight: normal; content: '\e007'; display: block; } .icon[data-icon='up']::before { text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: custom-u532d3; font-weight: normal; content: '\e008'; display: block; } .icon[data-icon='close']::before { text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: custom-u532d3; font-weight: normal; content: '\e009'; display: block; } .icon[data-icon='explore']::before { text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: custom-u532d3; font-weight: normal; content: '\e00a'; display: block; } .icon[data-icon='triangle']::before { text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: custom-u532d3; font-weight: normal; content: '\e00b'; display: block; } .icon[data-icon='mail-send']::before { text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: custom-u532d3; font-weight: normal; content: '\e00c'; display: block; } .icon[data-icon='item-plus']::before { text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: custom-u532d3; font-weight: normal; content: '\e00d'; display: block; } @-webkit-keyframes expandHeader { 0% { width: 0; } 100% { width: 80%; } } @keyframes expandHeader { 0% { width: 0; } 100% { width: 80%; } } @-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(359.9deg); transform: rotate(359.9deg); } } @keyframes rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(359.9deg); transform: rotate(359.9deg); } } @-webkit-keyframes drawMultiAssetSourceNumberStroke { 0% { stroke-dashoffset: 280; } 100% { stroke-dashoffset: -280; } } @keyframes drawMultiAssetSourceNumberStroke { 0% { stroke-dashoffset: 280; } 100% { stroke-dashoffset: -280; } } @-webkit-keyframes scaleLineLeft { 0% { -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: right center; transform-origin: right center; } 49% { -webkit-transform-origin: right center; transform-origin: right center; } 50% { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: left center; transform-origin: left center; } 100% { -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left center; transform-origin: left center; } } @keyframes scaleLineLeft { 0% { -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: right center; transform-origin: right center; } 49% { -webkit-transform-origin: right center; transform-origin: right center; } 50% { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: left center; transform-origin: left center; } 100% { -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left center; transform-origin: left center; } } @-webkit-keyframes scaleLineRight { 0% { -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left center; transform-origin: left center; } 49% { -webkit-transform-origin: left center; transform-origin: left center; } 50% { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: right center; transform-origin: right center; } 100% { -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: right center; transform-origin: right center; } } @keyframes scaleLineRight { 0% { -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left center; transform-origin: left center; } 49% { -webkit-transform-origin: left center; transform-origin: left center; } 50% { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: right center; transform-origin: right center; } 100% { -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: right center; transform-origin: right center; } } #wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: relative; width: 100%; } .-ie #wrapper { display: block; } #wrapper main { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; } body.o-index #wrapper main { padding-top: 70px; } @media (max-width: 1199px) { body.o-index #wrapper main { padding-top: 70px; } } @media (max-width: 767px) { body.o-index #wrapper main { padding-top: 55px; } } .a-hidden-seo-title { position: absolute; left: -9999px; } .a-pic { position: relative; } .a-pic img { display: block; max-width: 100%; } .a-checkbox { font-size: 14px; color: #67676e; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-width: 165px; margin: 0 16px 22px 0; margin: auto; width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; } body.-en .a-checkbox { font-size: 13px; line-height: 1.2; letter-spacing: normal; } @media (min-width: 1200px) { .a-checkbox:hover:before { -webkit-box-shadow: 0 0 8px 0 rgba(32, 32, 32, 0.3); box-shadow: 0 0 8px 0 rgba(32, 32, 32, 0.3); } } @media (max-width: 1199px) { .a-checkbox { font-size: 12px; } } @media (max-width: 767px) { .a-checkbox { min-width: 135px; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; } } .a-checkbox.-selected:before { background-color: #67676e; color: #f0f0f0; } .a-checkbox:before { content: ''; width: 100%; height: 100%; width: 18px; height: 18px; min-width: 18px; margin-right: 10px; border: 1px solid #67676e; border-radius: 2px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 15px; color: transparent; background-color: #fff; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: custom-u532d3; font-weight: normal; content: '\e00e'; font-size: 18px; -webkit-transition: all 0.24s ease; transition: all 0.24s ease; } .a-checkbox input { opacity: 0; margin: 0; } .a-vertical-animate-line { width: 2px; margin: auto; } @-webkit-keyframes drawVerticleLine { 0% { -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: center top; transform-origin: center top; } 33% { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: center top; transform-origin: center top; } 34% { -webkit-transform-origin: center bottom; transform-origin: center bottom; } 66% { -webkit-transform: scaleY(1); transform: scaleY(1); } 100% { -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: center bottom; transform-origin: center bottom; } } @keyframes drawVerticleLine { 0% { -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: center top; transform-origin: center top; } 33% { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: center top; transform-origin: center top; } 34% { -webkit-transform-origin: center bottom; transform-origin: center bottom; } 66% { -webkit-transform: scaleY(1); transform: scaleY(1); } 100% { -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: center bottom; transform-origin: center bottom; } } .o-index .a-vertical-animate-line:before, .o-index .a-vertical-animate-line:after { background-color: #6987b9; } .o-income .a-vertical-animate-line:before, .o-income .a-vertical-animate-line:after { background-color: #50beaf; } .o-asia .a-vertical-animate-line:before, .o-asia .a-vertical-animate-line:after { background-color: #b94b9b; } .o-tw-multi-asset .a-vertical-animate-line:before, .o-tw-multi-asset .a-vertical-animate-line:after { background-color: #1e9bd7; } .o-investing .a-vertical-animate-line:before, .o-investing .a-vertical-animate-line:after { background-color: #b1c425; } .o-mitigation .a-vertical-animate-line:before, .o-mitigation .a-vertical-animate-line:after { background-color: #ff9933; } .o-tw-esg .a-vertical-animate-line:before, .o-tw-esg .a-vertical-animate-line:after { background-color: #b1c425; } .a-vertical-animate-line:before { content: ''; width: 2px; height: 45px; display: block; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: center top; transform-origin: center top; -webkit-animation: drawVerticleLine 2s ease infinite; animation: drawVerticleLine 2s ease infinite; } .a-vertical-animate-line:after { content: ''; width: 2px; height: 11px; display: block; margin-top: 6px; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: center top; transform-origin: center top; -webkit-animation: drawVerticleLine 2s 0.66s ease infinite; animation: drawVerticleLine 2s 0.66s ease infinite; } .a-close-bg { position: fixed; z-index: 1000; background: rgba(0, 0, 0, 0.8); top: 0; left: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .a-close-bg.-open { opacity: 1; pointer-events: auto; } .a-close-bg.js-subscribe { opacity: 1; pointer-events: auto; } .a-close { position: fixed; top: 60px; right: 60px; z-index: 1001; width: 60px; height: 60px; cursor: pointer; } @media (max-width: 1199px) { .a-close { top: 40px; right: 40px; } } @media (max-width: 767px) { .a-close { top: 20px; right: 20px; } } .-pc .a-close:hover .a-circle-frame { -webkit-animation: rotate 0.5s cubic-bezier(0.7, 0, 0.3, 1); animation: rotate 0.5s cubic-bezier(0.7, 0, 0.3, 1); } .a-close:before, .a-close:after { content: ''; width: 24px; height: 2px; background: #fff; display: block; position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .a-close:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .a-circle-frame img { width: 100%; height: auto; } .a-retangle-btn { font-size: 18px; font-weight: 700; letter-spacing: 1px; line-height: 1.5; color: #fff; padding: 25px; width: 100%; position: relative; text-align: center; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .-lang-en .a-retangle-btn { font-family: KlavikaWebBasic, sans-serif; font-size: 24px; line-height: 0.9; letter-spacing: normal; } .-en .a-retangle-btn { line-height: 1.2; letter-spacing: normal; } @media (max-width: 1199px) { .a-retangle-btn { font-size: 15px; } .-lang-en .a-retangle-btn { font-size: 18px; line-height: 1.2; } } .o-index .a-retangle-btn { background-color: #6987b9; } .o-income .a-retangle-btn { background-color: #50beaf; } .o-asia .a-retangle-btn { background-color: #b94b9b; } .o-tw-multi-asset .a-retangle-btn { background-color: #1e9bd7; } .o-investing .a-retangle-btn { background-color: #b1c425; } .o-mitigation .a-retangle-btn { background-color: #ff9933; } .o-tw-esg .a-retangle-btn { background-color: #b1c425; } .a-retangle-btn:hover { opacity: 1; } .o-index.-pc .a-retangle-btn:hover { background-color: #f0e14b; } .o-income.-pc .a-retangle-btn:hover { background-color: #f0e14b; } .o-asia.-pc .a-retangle-btn:hover { background-color: #1e9bd7; } .o-tw-multi-asset.-pc .a-retangle-btn:hover { background-color: #fcba17; } .o-investing.-pc .a-retangle-btn:hover { background-color: #55469b; } .o-mitigation.-pc .a-retangle-btn:hover { background-color: #6ECDCC; } .o-tw-esg.-pc .a-retangle-btn:hover { background-color: #55469b; } .-pc .a-retangle-btn:hover .icon[data-icon='back'] { -webkit-transform: translateX(-10px); transform: translateX(-10px); } @media (max-width: 1199px) { .a-retangle-btn { padding: 13px 20px; } } .a-retangle-btn .icon[data-icon='back'] { font-size: 22px; position: absolute; left: 60px; top: calc(50% - 11px); -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } @media (max-width: 1199px) { .a-retangle-btn .icon[data-icon='back'] { left: 30px; } } @media (max-width: 767px) { .a-retangle-btn .icon[data-icon='back'] { left: 20px; } } .a-global-grid-back { overflow: hidden; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none; z-index: -1; z-index: 0; } .a-global-grid-back__box { position: absolute; width: 100%; height: 100%; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 0; pointer-events: none; overflow: hidden; } @media (max-width: 767px) { .a-global-grid-back__box { background-image: linear-gradient(#f0f0f0 1px, transparent 0); background-size: calc(100vw - 16px) calc(100vw - 16px); } } @media (min-width: 768px) { .a-global-grid-back__box { background: url(../../src/img/deco/horizontal-line-tablet.svg) left top/688px auto; } } @media (min-width: 1200px) { .a-global-grid-back__box { width: 3600px; background: url(../../src/img/deco/horizontal-line.svg) left top/1200px auto; } } .a-global-grid-back__group, .a-global-grid-back .container, .a-global-grid-back__line-block { height: 100%; } .a-global-grid-back .container { height: 100%; } @media (min-width: 768px) { .a-global-grid-back__group { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; -ms-grid-rows: auto; grid-template-rows: auto; } .a-global-grid-back__group > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } .a-global-grid-back__group > *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 2; } } @media (min-width: 1200px) { .a-global-grid-back__group { -ms-grid-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr; -ms-grid-rows: auto; grid-template-rows: auto; } .a-global-grid-back__group > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } .a-global-grid-back__group > *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 2; } .a-global-grid-back__group > *:nth-child(3) { -ms-grid-row: 1; -ms-grid-column: 3; } .a-global-grid-back__group > *:nth-child(4) { -ms-grid-row: 1; -ms-grid-column: 4; } } .a-global-grid-back__group.-center { border-left: 1px solid #f0f0f0; } .a-global-grid-back__group.-right, .a-global-grid-back__group.-left { position: absolute; width: 100%; top: 0; } @media (max-width: 1199px) { .a-global-grid-back__group.-right, .a-global-grid-back__group.-left { display: none; } } .a-global-grid-back__group.-right { left: 100%; border-left: 0; } @media (min-width: 768px) { .a-global-grid-back__group.-right { -webkit-transform: translateX(-40px); transform: translateX(-40px); } } @media (min-width: 1200px) { .a-global-grid-back__group.-right { -webkit-transform: translateX(-40px); transform: translateX(-40px); } } .a-global-grid-back__group.-left { right: 100%; } @media (min-width: 768px) { .a-global-grid-back__group.-left { -webkit-transform: translateX(40px); transform: translateX(40px); } } @media (min-width: 1200px) { .a-global-grid-back__group.-left { -webkit-transform: translateX(40px); transform: translateX(40px); } } .a-global-grid-back__line-block:not(:last-child) { border-right: 1px solid #f0f0f0; } @media (max-width: 1199px) { .a-global-grid-back__line-block:nth-child(3), .a-global-grid-back__line-block:nth-child(4) { display: none; } } @media (max-width: 767px) { .a-global-grid-back__line-block:nth-child(2) { display: none; } } .a-round-btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 16px; font-weight: 700; color: #fff; padding: 13px 30px; border-radius: 25px; min-width: 240px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .o-index .a-round-btn { background-color: #6987b9; } .o-income .a-round-btn { background-color: #50beaf; } .o-asia .a-round-btn { background-color: #b94b9b; } .o-tw-multi-asset .a-round-btn { background-color: #1e9bd7; } .o-investing .a-round-btn { background-color: #b1c425; } .o-mitigation .a-round-btn { background-color: #ff9933; } .o-tw-esg .a-round-btn { background-color: #b1c425; } @media (max-width: 1199px) { .a-round-btn { font-size: 15px; } } @media (max-width: 767px) { .a-round-btn { min-width: 220px; } } html.-lang-en .a-round-btn { font-weight: 700; letter-spacing: normal; line-height: 1.2; font-family: KlavikaWebBasic, sans-serif; font-size: 16px; text-transform: uppercase; } @media (max-width: 767px) { html.-lang-en .a-round-btn { font-size: 15px; } } .-en .a-round-btn { font-size: 18px; font-weight: 700; letter-spacing: 1px; line-height: 1.5; } .-lang-en .-en .a-round-btn { font-family: KlavikaWebBasic, sans-serif; font-size: 24px; line-height: 0.9; letter-spacing: normal; } .-en .-en .a-round-btn { line-height: 1.2; letter-spacing: normal; } @media (max-width: 1199px) { .-en .a-round-btn { font-size: 15px; } .-lang-en .-en .a-round-btn { font-size: 18px; line-height: 1.2; } } .a-round-btn:hover { opacity: 1; } .o-index.-pc .a-round-btn:hover { background-color: #f0e14b; } .o-income.-pc .a-round-btn:hover { background-color: #f0e14b; } .o-asia.-pc .a-round-btn:hover { background-color: #1e9bd7; } .o-tw-multi-asset.-pc .a-round-btn:hover { background-color: #fcba17; } .o-investing.-pc .a-round-btn:hover { background-color: #55469b; } .o-mitigation.-pc .a-round-btn:hover { background-color: #6ECDCC; } .o-tw-esg.-pc .a-round-btn:hover { background-color: #55469b; } .o-income.-pc .a-round-btn:hover { color: #67676e; } .a-to-top-btn { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; position: fixed; bottom: 110px; left: calc(100% - 45px - 6px); width: 22px !important; z-index: 30; opacity: 0; -webkit-transform: translateY(10px); transform: translateY(10px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } @media (max-width: 1199px) { .a-to-top-btn { left: calc(100% - 23px - 30px); width: 30px !important; } } .a-to-top-btn.-active { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); pointer-events: auto; } @media (max-width: 767px) { .a-to-top-btn { display: none; } } .-pc .a-to-top-btn:hover { -webkit-transform: translateY(-10px); transform: translateY(-10px); } .a-to-top-btn img { width: 28px; margin-bottom: 11px; } @media (max-width: 1199px) { .a-to-top-btn img { width: 22px; } } .a-to-top-btn__text { font-size: 20px; color: #67676e; font-weight: 700; font-family: KlavikaWebBasic, sans-serif; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; text-orientation: mixed; } @-webkit-keyframes showFirstArrow { 0% { opacity: 0; } 33% { opacity: 1; } 100% { opacity: 1; } } @keyframes showFirstArrow { 0% { opacity: 0; } 33% { opacity: 1; } 100% { opacity: 1; } } @-webkit-keyframes showSecondArrow { 0% { opacity: 0; } 33% { opacity: 0; } 66% { opacity: 1; } 100% { opacity: 1; } } @keyframes showSecondArrow { 0% { opacity: 0; } 33% { opacity: 0; } 66% { opacity: 1; } 100% { opacity: 1; } } @-webkit-keyframes showThirdArrow { 0% { opacity: 0; } 66% { opacity: 0; } 100% { opacity: 1; } } @keyframes showThirdArrow { 0% { opacity: 0; } 66% { opacity: 0; } 100% { opacity: 1; } } .a-tripple-arrow-down svg path { opacity: 0; } .a-tripple-arrow-down svg path:nth-child(1) { -webkit-animation: showFirstArrow 1.2s linear infinite; animation: showFirstArrow 1.2s linear infinite; } .a-tripple-arrow-down svg path:nth-child(2) { -webkit-animation: showSecondArrow 1.2s linear infinite; animation: showSecondArrow 1.2s linear infinite; } .a-tripple-arrow-down svg path:nth-child(3) { -webkit-animation: showThirdArrow 1.2s linear infinite; animation: showThirdArrow 1.2s linear infinite; } .a-topic-page-section-title { font-size: 42px; font-weight: 700; letter-spacing: 2px; line-height: 1.2; text-align: center; } .-lang-en .a-topic-page-section-title { line-height: 1.07; letter-spacing: 0.5px; font-family: KlavikaWebBasic, sans-serif; } .-en .a-topic-page-section-title { font-size: 30px; letter-spacing: 0.5px; } @media (max-width: 1199px) { .a-topic-page-section-title { font-size: 32px; } .-lang-en .a-topic-page-section-title { line-height: 1.19; } .-en .a-topic-page-section-title { font-size: 26px; line-height: 1.2; } } @media (max-width: 767px) { .a-topic-page-section-title { font-size: 26px; } .-lang-en .a-topic-page-section-title { line-height: 1.15; } .-en .a-topic-page-section-title { font-size: 22px; } } .-lang-en .a-topic-page-section-title, .-en .a-topic-page-section-title { text-transform: uppercase; } .a-topic-page-section-title.-tw { margin-top: 100px; } @media (max-width: 1199px) { .a-topic-page-section-title.-tw { margin-bottom: 0px; } } .a-mobile-sticky-btn { position: fixed; bottom: 0; width: 100%; color: #67676e; font-size: 15px; font-weight: 700; text-align: center; z-index: 99; opacity: 0; pointer-events: none; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-transform: translateY(100%); transform: translateY(100%); height: 55px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .o-index .a-mobile-sticky-btn { background-color: #f0e14b; } .o-income .a-mobile-sticky-btn { background-color: #f0e14b; } .o-asia .a-mobile-sticky-btn { background-color: #1e9bd7; } .o-tw-multi-asset .a-mobile-sticky-btn { background-color: #fcba17; } .o-investing .a-mobile-sticky-btn { background-color: #55469b; } .o-mitigation .a-mobile-sticky-btn { background-color: #6ECDCC; } .o-tw-esg .a-mobile-sticky-btn { background-color: #55469b; } html.-lang-en .a-mobile-sticky-btn { font-size: 18px; font-weight: 700; letter-spacing: normal; line-height: 1.2; } .-lang-en html.-lang-en .a-mobile-sticky-btn { font-family: KlavikaWebBasic, sans-serif; } @media (max-width: 767px) { .-lang-en html.-lang-en .a-mobile-sticky-btn { font-size: 15px; } } body.-en .a-mobile-sticky-btn { text-transform: uppercase; } .o-asia .a-mobile-sticky-btn, .o-tw-multi-asset .a-mobile-sticky-btn, .o-mitigation .a-mobile-sticky-btn { color: #fff; } .a-mobile-sticky-btn.-show { opacity: 0.8; pointer-events: auto; -webkit-transform: translateY(0); transform: translateY(0); } @media (min-width: 768px) { .a-mobile-sticky-btn { display: none; } } .quote-card { position: relative; border: 3px solid #55469b; z-index: 1; padding: 60px 0 80px; background-color: #fff; } @media (max-width: 767px) { .quote-card { padding: 30px 0; } } .quote-card__deco { position: absolute; width: 80px; height: 80px; background-color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; z-index: 2; } @media (max-width: 767px) { .quote-card__deco { width: 45px; height: 45px; } } .quote-card__deco::after { display: block; margin-right: auto; margin-left: auto; content: ''; width: 34px; height: 31px; background: url(../../src/img/deco/quote-mark.png) top left/cover; } @media (max-width: 767px) { .quote-card__deco::after { width: 17px; height: 15.5px; } } .quote-card__deco.-top { top: -3px; left: -3px; } .quote-card__deco.-top::after { margin-bottom: auto; -webkit-transform: translateY(-45%); transform: translateY(-45%); } .quote-card__deco.-bottom { bottom: -3px; right: -3px; } .quote-card__deco.-bottom::after { margin-top: auto; -webkit-transform: translateY(45%); transform: translateY(45%); } .quote-card__title, .quote-card__desc { position: relative; z-index: 3; min-width: 210px; width: 100%; margin: 0 auto; text-align: center; } .quote-card__title { font-size: 18px; font-weight: 400; letter-spacing: 1.5px; line-height: 1.5; color: #67676e; } .-lang-en .quote-card__title { letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .quote-card__title { letter-spacing: normal; } @media (max-width: 1199px) { .quote-card__title { font-size: 16px; letter-spacing: 0px; } .-lang-en .quote-card__title { line-height: 1.38; } .-en .quote-card__title { letter-spacing: normal; } } @media (max-width: 767px) { .quote-card__title { font-size: 15px; } .-lang-en .quote-card__title { line-height: 1.33; } } @media (max-width: 767px) { .quote-card__title { margin-bottom: 10px; } .quote-card__title br { display: none; } } .quote-card__desc { font-family: KlavikaWebBasic, sans-serif; font-size: 72px; font-weight: 700; letter-spacing: 2px; line-height: 1.2; color: #b1c425; position: relative; } .-lang-en .quote-card__desc { line-height: 1; letter-spacing: 1.5px; font-family: KlavikaWebBasic, sans-serif; } .-en .quote-card__desc { line-height: 1; letter-spacing: 1.5px; } @media (max-width: 1199px) { .quote-card__desc { font-size: 46px; } .-lang-en .quote-card__desc { letter-spacing: 1px; } .-en .quote-card__desc { letter-spacing: 0.5px; } } @media (max-width: 767px) { .quote-card__desc { font-size: 32px; } } @media (max-width: 1199px) { .quote-card__desc { font-size: 24px !important; } } .quote-card__desc-unit { margin-left: -15px; font-family: Noto Sans TC, sans-serif; font-size: 18px; font-weight: 400; letter-spacing: 1.5px; line-height: 1.5; font-weight: 400; } .-lang-en .quote-card__desc-unit { letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .quote-card__desc-unit { letter-spacing: normal; } @media (max-width: 1199px) { .quote-card__desc-unit { font-size: 16px; letter-spacing: 0px; } .-lang-en .quote-card__desc-unit { line-height: 1.38; } .-en .quote-card__desc-unit { letter-spacing: normal; } } @media (max-width: 767px) { .quote-card__desc-unit { font-size: 15px; } .-lang-en .quote-card__desc-unit { line-height: 1.33; } } @media (max-width: 1199px) { .quote-card__desc-unit { font-size: 16px !important; margin-left: -7px; } } body.-en .quote-card__desc-unit { margin-left: 0; } .quote-card-tw { position: relative; border: 3px solid #55469b; z-index: 1; padding: 60px 0 80px; background-color: #fff; } @media (max-width: 767px) { .quote-card-tw { padding: 30px 0; } } .quote-card-tw__deco { position: absolute; width: 80px; height: 80px; background-color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; z-index: 2; } @media (max-width: 767px) { .quote-card-tw__deco { width: 45px; height: 45px; } } .quote-card-tw__deco::after { display: block; margin-right: auto; margin-left: auto; content: ''; width: 34px; height: 31px; background: url(../../src/img/deco/quote-mark.png) top left/cover; } @media (max-width: 767px) { .quote-card-tw__deco::after { width: 17px; height: 15.5px; } } .quote-card-tw__deco.-top { top: -3px; left: -3px; } .quote-card-tw__deco.-top::after { margin-bottom: auto; -webkit-transform: translateY(-45%); transform: translateY(-45%); } .quote-card-tw__deco.-bottom { bottom: -3px; right: -3px; } .quote-card-tw__deco.-bottom::after { margin-top: auto; -webkit-transform: translateY(45%); transform: translateY(45%); } .quote-card-tw__title, .quote-card-tw__desc { position: relative; z-index: 3; min-width: 210px; width: 100%; margin: 0 auto; text-align: center; } .quote-card-tw__title { font-size: 18px; font-weight: 400; letter-spacing: 1.5px; line-height: 1.5; color: #67676e; } .-lang-en .quote-card-tw__title { letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .quote-card-tw__title { letter-spacing: normal; } @media (max-width: 1199px) { .quote-card-tw__title { font-size: 16px; letter-spacing: 0px; } .-lang-en .quote-card-tw__title { line-height: 1.38; } .-en .quote-card-tw__title { letter-spacing: normal; } } @media (max-width: 767px) { .quote-card-tw__title { font-size: 15px; } .-lang-en .quote-card-tw__title { line-height: 1.33; } } @media (max-width: 767px) { .quote-card-tw__title { margin-bottom: 10px; } .quote-card-tw__title br { display: none; } } .quote-card-tw__desc { font-size: 36px; font-family: KlavikaWebBasic, sans-serif; font-size: 72px; font-weight: 700; letter-spacing: 2px; line-height: 1.2; color: #b1c425; position: relative; } .-lang-en .quote-card-tw__desc { line-height: 1; letter-spacing: 1.5px; font-family: KlavikaWebBasic, sans-serif; } .-en .quote-card-tw__desc { line-height: 1; letter-spacing: 1.5px; } @media (max-width: 1199px) { .quote-card-tw__desc { font-size: 46px; } .-lang-en .quote-card-tw__desc { letter-spacing: 1px; } .-en .quote-card-tw__desc { letter-spacing: 0.5px; } } @media (max-width: 767px) { .quote-card-tw__desc { font-size: 32px; } } @media (max-width: 1199px) { .quote-card-tw__desc { font-size: 24px !important; } } .quote-card-tw__desc-unit { margin-left: -15px; font-family: Noto Sans TC, sans-serif; font-size: 18px; font-weight: 400; letter-spacing: 1.5px; line-height: 1.5; font-weight: 400; } .-lang-en .quote-card-tw__desc-unit { letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .quote-card-tw__desc-unit { letter-spacing: normal; } @media (max-width: 1199px) { .quote-card-tw__desc-unit { font-size: 16px; letter-spacing: 0px; } .-lang-en .quote-card-tw__desc-unit { line-height: 1.38; } .-en .quote-card-tw__desc-unit { letter-spacing: normal; } } @media (max-width: 767px) { .quote-card-tw__desc-unit { font-size: 15px; } .-lang-en .quote-card-tw__desc-unit { line-height: 1.33; } } @media (max-width: 1199px) { .quote-card-tw__desc-unit { font-size: 16px !important; margin-left: -7px; } } body.-en .quote-card-tw__desc-unit { margin-left: 0; } .quote-card-tw__desc.-tw { font-size: 36px; } .m-social-links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; height: 80px; color: #67676e; border-top: 1px solid #f0f0f0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (max-width: 1199px) { .m-social-links { height: 60px; } } @media (max-width: 767px) { .m-social-links { height: 50px; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } } .m-social-links__label { -ms-flex-preferred-size: 25%; flex-basis: 25%; width: 25%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; font-size: 18px; font-weight: 700; } .o-tw-esg .m-social-links__label { border-right: 1px solid #f0f0f0; } body.-en .m-social-links__label { letter-spacing: normal; line-height: 1.2; } @media (max-width: 1199px) { .m-social-links__label { font-size: 16px; } } @media (max-width: 767px) { .m-social-links__label { font-size: 14px; -ms-flex-preferred-size: 99px; flex-basis: 99px; width: 99px; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; padding: 0 20px; white-space: nowrap; border-right: 1px solid #f0f0f0; } body.-en .m-social-links__label { width: auto; } } .m-social-links__label:before, .m-social-links__label:after { content: ''; position: absolute; top: calc(50% - 1px); background-color: #67676e; height: 2px; } @media (max-width: 767px) { .m-social-links__label:before, .m-social-links__label:after { opacity: 0; } } .m-social-links__label:before { width: 8px; right: 17px; } @media (max-width: 767px) { .m-social-links__label:before { width: 3px; right: 10px; } } .m-social-links__label:after { width: 37px; right: -26px; } @media (max-width: 767px) { .m-social-links__label:after { width: 22px; right: -15px; } } .m-social-links__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100%; -webkit-box-flex: 0; -ms-flex: 0 1 25%; flex: 0 1 25%; width: 25%; font-family: KlavikaWebBasic, sans-serif; font-size: 20px; font-weight: 700; -webkit-transition: color 0.3s ease; transition: color 0.3s ease; } .o-tw-esg .m-social-links__item { -webkit-box-flex: 0; -ms-flex: 0 1 33%; flex: 0 1 33%; } body.-en .m-social-links__item { font-size: 16px; line-height: 1.2; letter-spacing: normal; } @media (max-width: 767px) { .m-social-links__item { -webkit-box-flex: 1; -ms-flex: 1 1 25%; flex: 1 1 25%; } } .o-index.-pc .m-social-links__item:hover { color: #f0e14b; } .o-income.-pc .m-social-links__item:hover { color: #f0e14b; } .o-asia.-pc .m-social-links__item:hover { color: #1e9bd7; } .o-tw-multi-asset.-pc .m-social-links__item:hover { color: #fcba17; } .o-investing.-pc .m-social-links__item:hover { color: #55469b; } .o-mitigation.-pc .m-social-links__item:hover { color: #6ECDCC; } .o-tw-esg.-pc .m-social-links__item:hover { color: #55469b; } .-pc .m-social-links__item:hover { opacity: 1; } @media (min-width: 768px) { .m-social-links__item:not(.-last) { border-right: 1px solid #f0f0f0; } } @media (max-width: 1199px) { .m-social-links__item-text { display: none; } } .m-social-links__item .icon { font-size: 24px; margin-right: 10px; } @media (max-width: 767px) { .m-social-links__item .icon { font-size: 20px; margin-right: 0; } } .m-social-links__top-btn { display: none; width: 70px; font-size: 14px; font-family: KlavikaWebBasic, sans-serif; font-weight: 700; border-left: 1px solid #f0f0f0; padding: 0 20px; } @media (max-width: 767px) { .m-social-links__top-btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .m-topic-card { width: 100%; position: relative; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } @media (min-width: 1200px) { body.-en .m-topic-card:hover .m-topic-card__desc { height: auto; max-height: 105px; } .m-topic-card:hover { opacity: 1; } .m-topic-card:hover .m-topic-card__desc { height: 48px; opacity: 1; } .m-topic-card:hover .m-topic-card__desc.-coming-soon { height: 24px; } .m-topic-card:hover .icon { -webkit-transform: translateX(10px); transform: translateX(10px); -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } } @media (max-width: 767px) { .m-topic-card { border: 1px solid #f0f0f0; } } .m-topic-card__main { width: 100%; height: 100%; position: relative; padding: 6px 20px; border-top: 6px solid; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } @media (max-width: 1199px) { .m-topic-card__main { padding: 10px; } } @media (max-width: 767px) { .m-topic-card__main { padding: 5px 10px; } } .m-topic-card__main.-income { border-color: #50beaf; } .m-topic-card__main.-asia { border-color: #b94b9b; } .m-topic-card__main.-mas { border-color: #1e9bd7; } .m-topic-card__main.-investing { border-color: #b1c425; } .m-topic-card__main.-alpha-generation { border-color: #1e9bd7; } .m-topic-card__main.-downside-protection { border-color: #b94b9b; } .m-topic-card__main.-investing { border-color: #b1c425; } .m-topic-card__main.-mitigation { border-color: #ff9933; } .m-topic-card__bg-img { background-size: cover; background-repeat: no-repeat; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .m-topic-card__bg-img:before { content: ''; width: 100%; height: 40%; position: absolute; z-index: 0; left: 0; bottom: 0; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.75))); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75)); } body.-en .m-topic-card__bg-img:before { height: 60%; } @media (max-width: 1199px) { .m-topic-card__bg-img:before { height: 60%; } } .m-topic-card__info { position: relative; padding-right: 30px; width: 100%; } @media (max-width: 767px) { .m-topic-card__info { padding-right: 24px; } .m-topic-card__info .m-topic-card__title, .m-topic-card__info .m-topic-card__desc { display: none; } } .m-topic-card__mobile-info { width: 100%; background-color: #fff; padding: 10px; } @media (min-width: 768px) { .m-topic-card__mobile-info { display: none; } } .m-topic-card__subtitle { font-size: 16px; letter-spacing: 1px; line-height: 1.5; margin-bottom: 6px; max-height: 32px; overflow: hidden; font-weight: 700; } @media (max-width: 1199px) { .m-topic-card__subtitle { font-size: 12px; } } .m-topic-card__title { font-size: 24px; font-weight: 700; letter-spacing: 1px; line-height: 1.5; max-height: 72px; overflow: hidden; } .-lang-en .m-topic-card__title { line-height: 1.25; letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .m-topic-card__title { font-size: 22px; letter-spacing: 0.5px; line-height: 1; } @media (max-width: 1199px) { .m-topic-card__title { font-size: 20px; } .-lang-en .m-topic-card__title { font-size: 24px; line-height: 1.2; } .-en .m-topic-card__title { font-size: 18px; } } @media (max-width: 767px) { .m-topic-card__title { font-size: 18px; } } @media (min-width: 1200px) { .m-topic-card__title { font-size: 22px; } } @media (max-width: 767px) { .m-topic-card__title { color: #67676e; line-height: 24px; max-height: 24px; } } body.-en .m-topic-card__title { text-transform: uppercase; max-height: 88px; } @media (max-width: 767px) { body.-en .m-topic-card__title { max-height: 33px; } } @media (max-width: 767px) { body.-en .m-topic-card__title:not(.-coming-soon) { min-height: inherit; max-height: 54px; } .-lang-en body.-en .m-topic-card__title:not(.-coming-soon) { max-height: 64px; } } @media (max-width: 767px) { .m-topic-card__title:not(.-coming-soon) { max-height: 48px; min-height: 48px; } } .m-topic-card__desc { font-size: 16px; letter-spacing: 1px; line-height: 24px; opacity: 0; height: 0; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; overflow: hidden; padding-right: 40px; } @media (max-width: 767px) { .m-topic-card__desc { color: #67676e; padding-right: 0; font-size: 12px; } } body.-en .m-topic-card__desc { line-height: 21px; } body.-en .m-topic-card__desc:not(.-coming-soon) { height: auto; max-height: 0; } @media (max-width: 1199px) { .m-topic-card__desc.-coming-soon { opacity: 1; height: auto; } } @media (max-width: 767px) { .m-topic-card__desc.-coming-soon { max-height: 24px; overflow: hidden; } } .m-topic-card .icon { position: absolute; right: 23px; bottom: 13px; -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; font-size: 24px; } @media (max-width: 1199px) { .m-topic-card .icon { right: 10px; font-size: 20px; } } .m-newsletter { padding-top: 40px; padding-bottom: 62px; } @media (max-width: 1199px) { .m-newsletter { padding-bottom: 86px; } } @media (max-width: 767px) { .m-newsletter { padding-bottom: 68px; } } .m-newsletter__title { font-size: 32px; font-weight: 700; letter-spacing: 2px; line-height: 1.2; margin: 37px 0 20px; text-align: center; } .-lang-en .m-newsletter__title { line-height: 1.19; letter-spacing: 0.5px; font-family: KlavikaWebBasic, sans-serif; } .-en .m-newsletter__title { font-size: 24px; letter-spacing: 0.5px; } @media (max-width: 1199px) { .m-newsletter__title { font-size: 26px; } .-lang-en .m-newsletter__title { line-height: 1.25; } .-en .m-newsletter__title { font-size: 20px; } } @media (max-width: 767px) { .m-newsletter__title { font-size: 22px; } .-lang-en .m-newsletter__title { font-size: 26px; } } .o-index .m-newsletter__title { color: #6987b9; } .o-income .m-newsletter__title { color: #50beaf; } .o-asia .m-newsletter__title { color: #b94b9b; } .o-tw-multi-asset .m-newsletter__title { color: #1e9bd7; } .o-investing .m-newsletter__title { color: #b1c425; } .o-mitigation .m-newsletter__title { color: #ff9933; } .o-tw-esg .m-newsletter__title { color: #b1c425; } body.-en .m-newsletter__title { text-transform: uppercase; } .m-newsletter__subtitle { font-size: 18px; font-weight: 700; letter-spacing: 1px; line-height: 1.5; color: #67676e; margin-bottom: 23px; text-align: center; } .-lang-en .m-newsletter__subtitle { font-family: KlavikaWebBasic, sans-serif; font-size: 24px; line-height: 0.9; letter-spacing: normal; } .-en .m-newsletter__subtitle { line-height: 1.2; letter-spacing: normal; } @media (max-width: 1199px) { .m-newsletter__subtitle { font-size: 15px; } .-lang-en .m-newsletter__subtitle { font-size: 18px; line-height: 1.2; } } .m-newsletter form { width: 100%; } .m-newsletter__input { position: relative; border-radius: 35px; margin: auto auto 20px; padding: 23px 112px 23px 52px; width: 100%; max-width: 611px; } .m-newsletter__input ::-webkit-input-placeholder { font-weight: 500; letter-spacing: 1px; color: #fff; font-size: 16px; } .m-newsletter__input :-moz-placeholder { font-weight: 500; letter-spacing: 1px; color: #fff; font-size: 16px; } .m-newsletter__input ::-moz-placeholder { font-weight: 500; letter-spacing: 1px; color: #fff; font-size: 16px; } .m-newsletter__input :-ms-input-placeholder { font-weight: 500; letter-spacing: 1px; color: #fff; font-size: 16px; } .o-index .m-newsletter__input { background-color: #6987b9; } .o-income .m-newsletter__input { background-color: #50beaf; } .o-asia .m-newsletter__input { background-color: #b94b9b; } .o-tw-multi-asset .m-newsletter__input { background-color: #1e9bd7; } .o-investing .m-newsletter__input { background-color: #b1c425; } .o-mitigation .m-newsletter__input { background-color: #ff9933; } .o-tw-esg .m-newsletter__input { background-color: #b1c425; } @media (max-width: 1199px) { .m-newsletter__input { padding: 13px 106px 13px 37px; } } @media (max-width: 767px) { .m-newsletter__input { padding: 14px 26px; height: auto; margin-bottom: 10px; } .m-newsletter__input ::-webkit-input-placeholder { font-weight: 500; letter-spacing: 1px; color: #fff; font-size: 15px; } .m-newsletter__input :-moz-placeholder { font-weight: 500; letter-spacing: 1px; color: #fff; font-size: 15px; } .m-newsletter__input ::-moz-placeholder { font-weight: 500; letter-spacing: 1px; color: #fff; font-size: 15px; } .m-newsletter__input :-ms-input-placeholder { font-weight: 500; letter-spacing: 1px; color: #fff; font-size: 15px; } } .m-newsletter__input input { color: #fff; background: none; width: 100%; font-size: 16px; font-weight: 500; letter-spacing: 1px; } @media (max-width: 767px) { .m-newsletter__input input { font-size: 15px; } } body.-en .m-newsletter__input input { font-family: KlavikaWebBasic, sans-serif; letter-spacing: normal; } .m-newsletter__submit-btn { position: absolute; top: 0; right: 0; width: 100px; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 3px solid; border-left: none; border-radius: 0 35px 35px 0; background-color: #fff; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .o-index .m-newsletter__submit-btn { color: #6987b9; border-color: #6987b9; } .o-income .m-newsletter__submit-btn { color: #50beaf; border-color: #50beaf; } .o-asia .m-newsletter__submit-btn { color: #b94b9b; border-color: #b94b9b; } .o-tw-multi-asset .m-newsletter__submit-btn { color: #1e9bd7; border-color: #1e9bd7; } .o-investing .m-newsletter__submit-btn { color: #b1c425; border-color: #b1c425; } .o-mitigation .m-newsletter__submit-btn { color: #ff9933; border-color: #ff9933; } .o-tw-esg .m-newsletter__submit-btn { color: #b1c425; border-color: #b1c425; } @media (max-width: 1199px) { .m-newsletter__submit-btn { border-width: 2px; } } .o-index.-pc .m-newsletter__submit-btn:hover { background-color: #f0e14b; border-color: #f0e14b; } .o-income.-pc .m-newsletter__submit-btn:hover { background-color: #f0e14b; border-color: #f0e14b; } .o-asia.-pc .m-newsletter__submit-btn:hover { background-color: #1e9bd7; border-color: #1e9bd7; } .o-tw-multi-asset.-pc .m-newsletter__submit-btn:hover { background-color: #fcba17; border-color: #fcba17; } .o-investing.-pc .m-newsletter__submit-btn:hover { background-color: #55469b; border-color: #55469b; } .o-mitigation.-pc .m-newsletter__submit-btn:hover { background-color: #6ECDCC; border-color: #6ECDCC; } .o-tw-esg.-pc .m-newsletter__submit-btn:hover { background-color: #55469b; border-color: #55469b; } .-pc .m-newsletter__submit-btn:hover { color: #fff; opacity: 1; } .-pc .m-newsletter__submit-btn:hover .icon { -webkit-transform: translateX(5px); transform: translateX(5px); } @media (max-width: 767px) { .m-newsletter__submit-btn { display: none; } } .m-newsletter__submit-btn .icon { width: 24px; height: 24px; font-size: 24px; -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } .m-newsletter__mobile-submit-btn { height: 55px; border-radius: 35px; border: solid 2px #f0f0f0; background-color: #fff; font-size: 15px; font-weight: 400; color: #67676e; padding: 12px 24px; width: 100%; margin: 0 0 20px; } .m-video-popup { position: fixed; z-index: 1001; background: #fff; max-width: 1000px; width: 100%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .m-video-popup:before { content: ''; padding-bottom: 56.25%; display: block; width: 100%; } .m-video-popup__iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .m-other-topics { width: 100%; padding-top: 100px; padding-bottom: 40px; overflow-x: hidden; } .m-other-topics__title { font-size: 32px; font-weight: 700; letter-spacing: 2px; line-height: 1.2; text-align: center; margin-bottom: 38px; } .-lang-en .m-other-topics__title { line-height: 1.19; letter-spacing: 0.5px; font-family: KlavikaWebBasic, sans-serif; } .-en .m-other-topics__title { font-size: 24px; letter-spacing: 0.5px; } @media (max-width: 1199px) { .m-other-topics__title { font-size: 26px; } .-lang-en .m-other-topics__title { line-height: 1.25; } .-en .m-other-topics__title { font-size: 20px; } } @media (max-width: 767px) { .m-other-topics__title { font-size: 22px; } .-lang-en .m-other-topics__title { font-size: 26px; } } body.-en .m-other-topics__title { text-transform: uppercase; } .m-other-topics .m-topic-card { height: 240px; } @media (max-width: 1199px) { .m-other-topics .m-topic-card { height: 210px; } } .basic-swiper-container { position: relative; margin: 0 0 25px !important; } @media (max-width: 1199px) { .basic-swiper-container { margin: 0 0 30px !important; overflow: visible !important; } } .basic-swiper-container .swiper-controller { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; } @media (max-width: 1199px) { .basic-swiper-container .swiper-controller { margin-top: 12px; } } .basic-swiper-container .swiper-pagination { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; height: 10px; bottom: auto; margin: 14px 0 15px; } .basic-swiper-container .swiper-pagination-lock { display: none !important; } .basic-swiper-container .swiper-pagination .swiper-pagination-bullet { width: 4px; height: 4px; opacity: 1; margin-right: 10px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; background-color: transparent; position: relative; } @media (min-width: 1200px) { .basic-swiper-container .swiper-pagination .swiper-pagination-bullet:hover { opacity: 0.7; } } .basic-swiper-container .swiper-pagination .swiper-pagination-bullet:before { content: ''; width: 4px; height: 100%; position: absolute; left: 0; top: 0; border-radius: 50%; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .o-index .basic-swiper-container .swiper-pagination .swiper-pagination-bullet:before { background-color: #f0e14b; } .o-income .basic-swiper-container .swiper-pagination .swiper-pagination-bullet:before { background-color: #f0e14b; } .o-asia .basic-swiper-container .swiper-pagination .swiper-pagination-bullet:before { background-color: #1e9bd7; } .o-tw-multi-asset .basic-swiper-container .swiper-pagination .swiper-pagination-bullet:before { background-color: #fcba17; } .o-investing .basic-swiper-container .swiper-pagination .swiper-pagination-bullet:before { background-color: #55469b; } .o-mitigation .basic-swiper-container .swiper-pagination .swiper-pagination-bullet:before { background-color: #6ECDCC; } .o-tw-esg .basic-swiper-container .swiper-pagination .swiper-pagination-bullet:before { background-color: #55469b; } .basic-swiper-container .swiper-pagination .swiper-pagination-bullet:after { content: ''; width: 0px; height: 100%; border-radius: 2px; position: absolute; left: 0; top: 0; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .o-index .basic-swiper-container .swiper-pagination .swiper-pagination-bullet:after { background-color: #f0e14b; } .o-income .basic-swiper-container .swiper-pagination .swiper-pagination-bullet:after { background-color: #f0e14b; } .o-asia .basic-swiper-container .swiper-pagination .swiper-pagination-bullet:after { background-color: #1e9bd7; } .o-tw-multi-asset .basic-swiper-container .swiper-pagination .swiper-pagination-bullet:after { background-color: #fcba17; } .o-investing .basic-swiper-container .swiper-pagination .swiper-pagination-bullet:after { background-color: #55469b; } .o-mitigation .basic-swiper-container .swiper-pagination .swiper-pagination-bullet:after { background-color: #6ECDCC; } .o-tw-esg .basic-swiper-container .swiper-pagination .swiper-pagination-bullet:after { background-color: #55469b; } .basic-swiper-container .swiper-pagination .swiper-pagination-bullet-active { width: 60px; pointer-events: none; } .basic-swiper-container .swiper-pagination .swiper-pagination-bullet-active:before { opacity: 0; } .basic-swiper-container .swiper-pagination .swiper-pagination-bullet-active:after { width: 100% !important; } .basic-swiper-container .swiper-button-prev, .basic-swiper-container .swiper-button-next { position: initial; width: 45px; height: 39px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-image: none; margin: 0; font-size: 16px; color: #67676e; } .o-index .basic-swiper-container .swiper-button-prev, .o-index .basic-swiper-container .swiper-button-next { background-color: #f0e14b; } .o-income .basic-swiper-container .swiper-button-prev, .o-income .basic-swiper-container .swiper-button-next { background-color: #f0e14b; } .o-asia .basic-swiper-container .swiper-button-prev, .o-asia .basic-swiper-container .swiper-button-next { background-color: #1e9bd7; } .o-tw-multi-asset .basic-swiper-container .swiper-button-prev, .o-tw-multi-asset .basic-swiper-container .swiper-button-next { background-color: #fcba17; } .o-investing .basic-swiper-container .swiper-button-prev, .o-investing .basic-swiper-container .swiper-button-next { background-color: #55469b; } .o-mitigation .basic-swiper-container .swiper-button-prev, .o-mitigation .basic-swiper-container .swiper-button-next { background-color: #6ECDCC; } .o-tw-esg .basic-swiper-container .swiper-button-prev, .o-tw-esg .basic-swiper-container .swiper-button-next { background-color: #55469b; } .o-asia .basic-swiper-container .swiper-button-prev, .o-asia .basic-swiper-container .swiper-button-next { color: #fff; } .o-investing .basic-swiper-container .swiper-button-prev, .o-investing .basic-swiper-container .swiper-button-next { color: #fff; } @media (max-width: 1199px) { .basic-swiper-container .swiper-button-prev, .basic-swiper-container .swiper-button-next { display: none; } } .-pc .basic-swiper-container .swiper-button-prev:hover, .-pc .basic-swiper-container .swiper-button-next:hover { opacity: 0.7; } .basic-swiper-container .swiper-button-prev.swiper-button-lock, .basic-swiper-container .swiper-button-next.swiper-button-lock { display: none; } .basic-swiper-container .swiper-button-prev { position: relative; left: auto; } .basic-swiper-container .swiper-button-prev:after { content: ''; width: 1px; height: 21px; background-color: #e8d50f; position: absolute; right: 0; top: 9px; } .o-asia .basic-swiper-container .swiper-button-prev:after { background-color: #258dbf; } .o-investing .basic-swiper-container .swiper-button-prev:after { background-color: #b1c425; } @-webkit-keyframes plane-float { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); } 50% { -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } } @keyframes plane-float { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); } 50% { -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } } .m-subscribe-success { position: fixed; z-index: 1001; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; max-width: 660px; background: #fff; padding: 55px 20px; border-top: 6px solid; } .o-index .m-subscribe-success { border-color: #6987b9; } .o-income .m-subscribe-success { border-color: #50beaf; } .o-asia .m-subscribe-success { border-color: #b94b9b; } .o-tw-multi-asset .m-subscribe-success { border-color: #1e9bd7; } .o-investing .m-subscribe-success { border-color: #b1c425; } .o-mitigation .m-subscribe-success { border-color: #ff9933; } .o-tw-esg .m-subscribe-success { border-color: #b1c425; } @media (max-width: 767px) { .m-subscribe-success { width: calc(100% - 40px); padding: 50px 20px; } } .m-subscribe-success__close { position: absolute; top: 40px; right: 40px; font-size: 24px; line-height: 1; cursor: pointer; z-index: 1; color: #67676e; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .-pc .m-subscribe-success__close:hover { opacity: 0.7; } @media (max-width: 767px) { .m-subscribe-success__close { top: 20px; right: 20px; } } .m-subscribe-success__img img { margin: auto; width: 110px; display: block; height: auto; -webkit-animation: plane-float 3s infinite ease; animation: plane-float 3s infinite ease; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .m-subscribe-success__desc { font-size: 24px; font-weight: 700; letter-spacing: 1px; line-height: 1.5; text-align: center; padding-top: 20px; padding-bottom: 20px; color: #67676e; } .-lang-en .m-subscribe-success__desc { line-height: 1.25; letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .m-subscribe-success__desc { font-size: 22px; letter-spacing: 0.5px; line-height: 1; } @media (max-width: 1199px) { .m-subscribe-success__desc { font-size: 20px; } .-lang-en .m-subscribe-success__desc { font-size: 24px; line-height: 1.2; } .-en .m-subscribe-success__desc { font-size: 18px; } } @media (max-width: 767px) { .m-subscribe-success__desc { font-size: 18px; } } @media (max-width: 767px) { .m-subscribe-success__desc { padding-top: 15px; padding-bottom: 15px; } } .m-subscribe-success .a-round-btn { margin: 0 auto; } .m-time-line { padding-top: 200px; } @media (max-width: 1199px) { .m-time-line { padding-top: 230px; } } .m-time-line .container { max-width: 1440px; padding-left: 0; padding-right: 0; } .m-time-line .swiper-container { overflow: visible; } .m-time-line__source { font-size: 12px; font-weight: 400; line-height: 1.8; text-align: center; color: #67676e; padding-top: 15px; padding-left: 20px; padding-right: 20px; } .-lang-en .m-time-line__source { line-height: 1.5; letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .m-time-line__source { font-size: 13px; line-height: 1.2; letter-spacing: normal; } html.-lang-en .m-time-line__source { width: 100%; max-width: 996px; margin: 0 auto; font-family: KlavikaWebBasic, sans-serif; font-size: 14px; line-height: 1.5; letter-spacing: normal; font-weight: 400; } .-lang-en html.-lang-en .m-time-line__source { font-family: KlavikaWebBasic, sans-serif; } @media (max-width: 767px) { .-lang-en html.-lang-en .m-time-line__source { font-size: 12px; } } @media (max-width: 1199px) { html.-lang-en .m-time-line__source { font-size: 12px; text-align: left; } } .m-time-line__group.swiper-slide { cursor: pointer; width: 20%; height: 80px; min-width: 20%; } @media (min-width: 1200px) { .m-time-line__group.swiper-slide { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-negative: 1; flex-shrink: 1; } } @media (max-width: 1199px) { .m-time-line__group.swiper-slide { height: 60px; width: 192px; } } @media (max-width: 767px) { .m-time-line__group.swiper-slide { width: 180px; } } .m-time-line__group.-tw { width: 14.28571%; min-width: 14.28571%; } .m-time-line__group:last-child .m-time-line__desc { -webkit-transform: translateX(calc(-50% - 15px)); transform: translateX(calc(-50% - 15px)); } .-ie .m-time-line__group:last-child .m-time-line__desc { -webkit-transform: translateX(-53%); transform: translateX(-53%); } @media (min-width: 1200px) { .m-time-line__group:last-child .m-time-line__year:after { display: none; } } .m-time-line__desc { position: absolute; bottom: 100%; width: 100%; max-width: 290px; left: 50%; -webkit-transform: translateX(calc(-50% + 15px)); transform: translateX(calc(-50% + 15px)); padding-bottom: 70px; opacity: 0; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .-ie .m-time-line__desc { -webkit-transform: translateX(-53%); transform: translateX(-53%); } @media (max-width: 1199px) { .m-time-line__desc { width: 290px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } .swiper-slide-active .m-time-line__desc { opacity: 1; } @media (min-width: 1200px) { .swiper-slide.-active .m-time-line__desc { opacity: 1; } } .m-time-line__desc:before { content: ''; width: 13px; height: 57px; position: absolute; background: url(../../src/img/deco/arrow-down-line-yellow.svg); display: block; bottom: 15px; left: 50%; -webkit-transform: translateX(-1px); transform: translateX(-1px); } .o-asia .m-time-line__desc:before { background: url(../../src/img/deco/arrow-down-line-blue.svg); } .o-investing .m-time-line__desc:before { background: url(../../src/img/deco/arrow-down-line-purple.svg); } .o-mitigation .m-time-line__desc:before { background: url(../../src/img/deco/arrow-down-line-cyan.svg); } .o-tw-esg .m-time-line__desc:before { background: url(../../src/img/deco/arrow-down-line-purple.svg); } .m-time-line__desc-ul { border: 2px solid; border-bottom: 0; padding: 12px 15px; background: #fff; } .o-index .m-time-line__desc-ul { border-color: #f0e14b; } .o-income .m-time-line__desc-ul { border-color: #f0e14b; } .o-asia .m-time-line__desc-ul { border-color: #1e9bd7; } .o-tw-multi-asset .m-time-line__desc-ul { border-color: #fcba17; } .o-investing .m-time-line__desc-ul { border-color: #55469b; } .o-mitigation .m-time-line__desc-ul { border-color: #6ECDCC; } .o-tw-esg .m-time-line__desc-ul { border-color: #55469b; } @media (max-width: 1199px) { .m-time-line__desc-ul { padding: 12px 30px; } } .m-time-line__desc-ul:before, .m-time-line__desc-ul:after { content: ''; position: absolute; display: block; height: 2px; width: 50%; left: 0; bottom: 70px; } .o-index .m-time-line__desc-ul:before, .o-index .m-time-line__desc-ul:after { background-color: #f0e14b; } .o-income .m-time-line__desc-ul:before, .o-income .m-time-line__desc-ul:after { background-color: #f0e14b; } .o-asia .m-time-line__desc-ul:before, .o-asia .m-time-line__desc-ul:after { background-color: #1e9bd7; } .o-tw-multi-asset .m-time-line__desc-ul:before, .o-tw-multi-asset .m-time-line__desc-ul:after { background-color: #fcba17; } .o-investing .m-time-line__desc-ul:before, .o-investing .m-time-line__desc-ul:after { background-color: #55469b; } .o-mitigation .m-time-line__desc-ul:before, .o-mitigation .m-time-line__desc-ul:after { background-color: #6ECDCC; } .o-tw-esg .m-time-line__desc-ul:before, .o-tw-esg .m-time-line__desc-ul:after { background-color: #55469b; } .m-time-line__desc-ul:after { right: 0; left: auto; width: calc(50% - 10px); } .m-time-line__desc-li { color: #67676e; font-size: 18px; font-weight: 400; letter-spacing: 1.5px; line-height: 1.5; padding-left: 30px; position: relative; } .-lang-en .m-time-line__desc-li { letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .m-time-line__desc-li { letter-spacing: normal; } @media (max-width: 1199px) { .m-time-line__desc-li { font-size: 16px; letter-spacing: 0px; } .-lang-en .m-time-line__desc-li { line-height: 1.38; } .-en .m-time-line__desc-li { letter-spacing: normal; } } @media (max-width: 767px) { .m-time-line__desc-li { font-size: 15px; } .-lang-en .m-time-line__desc-li { line-height: 1.33; } } @media (min-width: 1200px) { .m-time-line__desc-li { font-size: 16px; } } .m-time-line__desc-li:before, .m-time-line__desc-li:after { content: ''; width: 14px; height: 2px; display: block; position: absolute; top: 0; bottom: 0; margin: 11px auto; left: 0; } .o-index .m-time-line__desc-li:before, .o-index .m-time-line__desc-li:after { background-color: #f0e14b; } .o-income .m-time-line__desc-li:before, .o-income .m-time-line__desc-li:after { background-color: #f0e14b; } .o-asia .m-time-line__desc-li:before, .o-asia .m-time-line__desc-li:after { background-color: #1e9bd7; } .o-tw-multi-asset .m-time-line__desc-li:before, .o-tw-multi-asset .m-time-line__desc-li:after { background-color: #fcba17; } .o-investing .m-time-line__desc-li:before, .o-investing .m-time-line__desc-li:after { background-color: #55469b; } .o-mitigation .m-time-line__desc-li:before, .o-mitigation .m-time-line__desc-li:after { background-color: #6ECDCC; } .o-tw-esg .m-time-line__desc-li:before, .o-tw-esg .m-time-line__desc-li:after { background-color: #55469b; } .m-time-line__desc-li:after { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .m-time-line__desc-li:not(:last-child) { padding-bottom: 4px; } .m-time-line__year { text-align: center; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .m-time-line__year:before, .m-time-line__year:after { content: ''; position: absolute; top: 0; height: 100%; z-index: 1; } .m-time-line__year:before { width: 100%; left: 0; z-index: 0; -webkit-transform: scaleY(0.625); transform: scaleY(0.625); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transition: background 0.3s ease, -webkit-transform 0.3s ease; transition: background 0.3s ease, -webkit-transform 0.3s ease; transition: transform 0.3s ease, background 0.3s ease; transition: transform 0.3s ease, background 0.3s ease, -webkit-transform 0.3s ease; } .o-index .m-time-line__year:before { background-color: #6987b9; } .o-income .m-time-line__year:before { background-color: #50beaf; } .o-asia .m-time-line__year:before { background-color: #b94b9b; } .o-tw-multi-asset .m-time-line__year:before { background-color: #1e9bd7; } .o-investing .m-time-line__year:before { background-color: #b1c425; } .o-mitigation .m-time-line__year:before { background-color: #ff9933; } .o-tw-esg .m-time-line__year:before { background-color: #b1c425; } @media (max-width: 1199px) { .m-time-line__year:before { -webkit-transform: scaleY(0.66667); transform: scaleY(0.66667); } } .swiper-slide-active .m-time-line__year:before { -webkit-transform: scaleY(1); transform: scaleY(1); } .o-index .swiper-slide-active .m-time-line__year:before { background-color: #f0e14b; } .o-income .swiper-slide-active .m-time-line__year:before { background-color: #f0e14b; } .o-asia .swiper-slide-active .m-time-line__year:before { background-color: #1e9bd7; } .o-tw-multi-asset .swiper-slide-active .m-time-line__year:before { background-color: #fcba17; } .o-investing .swiper-slide-active .m-time-line__year:before { background-color: #55469b; } .o-mitigation .swiper-slide-active .m-time-line__year:before { background-color: #6ECDCC; } .o-tw-esg .swiper-slide-active .m-time-line__year:before { background-color: #55469b; } @media (min-width: 1200px) { .swiper-slide.-active .m-time-line__year:before { -webkit-transform: scaleY(1); transform: scaleY(1); } .o-index .swiper-slide.-active .m-time-line__year:before { background-color: #f0e14b; } .o-income .swiper-slide.-active .m-time-line__year:before { background-color: #f0e14b; } .o-asia .swiper-slide.-active .m-time-line__year:before { background-color: #1e9bd7; } .o-tw-multi-asset .swiper-slide.-active .m-time-line__year:before { background-color: #fcba17; } .o-investing .swiper-slide.-active .m-time-line__year:before { background-color: #55469b; } .o-mitigation .swiper-slide.-active .m-time-line__year:before { background-color: #6ECDCC; } .o-tw-esg .swiper-slide.-active .m-time-line__year:before { background-color: #55469b; } } .m-time-line__year:after { width: 1px; background: #41ae9f; right: 0; -webkit-transform: scaleY(0.625); transform: scaleY(0.625); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; } .o-asia .m-time-line__year:after { background: #a03d85; } @media (max-width: 1199px) { .m-time-line__year:after { -webkit-transform: scaleY(0.66667); transform: scaleY(0.66667); } } .m-time-line__year-text { position: relative; z-index: 2; display: block; line-height: 1; font-family: KlavikaWebBasic, sans-serif; font-weight: normal; font-size: 20px; -webkit-transform: translateY(15px); transform: translateY(15px); color: #fff; -webkit-transition: color 0.3s ease, -webkit-transform 0.3s ease; transition: color 0.3s ease, -webkit-transform 0.3s ease; transition: transform 0.3s ease, color 0.3s ease; transition: transform 0.3s ease, color 0.3s ease, -webkit-transform 0.3s ease; } @media (max-width: 1199px) { .m-time-line__year-text { font-size: 16px; -webkit-transform: translateY(10px); transform: translateY(10px); } } .swiper-slide-active .m-time-line__year-text { -webkit-transform: translateY(0px); transform: translateY(0px); } .o-income .swiper-slide-active .m-time-line__year-text { color: #67676e; } @media (min-width: 1200px) { .swiper-slide.-active .m-time-line__year-text { -webkit-transform: translateY(0px); transform: translateY(0px); } .o-income .swiper-slide.-active .m-time-line__year-text { color: #67676e; } } .m-anchor-list { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; max-width: 800px; margin: auto; -ms-flex-pack: distribute; justify-content: space-around; } .m-anchor-list:not(.-active) { opacity: 0; -webkit-transform: translateY(-10px); transform: translateY(-10px); } @media (max-width: 767px) { .m-anchor-list { display: none; } } .m-anchor-list__item { font-size: 18px; font-weight: 700; letter-spacing: 1px; line-height: 1.5; color: #67676e; padding: 0 20px; position: relative; height: 70px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; -webkit-transition: color 0.3s ease; transition: color 0.3s ease; } .-lang-en .m-anchor-list__item { font-family: KlavikaWebBasic, sans-serif; font-size: 24px; line-height: 0.9; letter-spacing: normal; } .-en .m-anchor-list__item { line-height: 1.2; letter-spacing: normal; } @media (max-width: 1199px) { .m-anchor-list__item { font-size: 15px; } .-lang-en .m-anchor-list__item { font-size: 18px; line-height: 1.2; } } html.-lang-en .m-anchor-list__item, body.-en .m-anchor-list__item { padding: 0; -ms-flex-negative: 1; flex-shrink: 1; text-transform: uppercase; height: 107px; -ms-flex-wrap: wrap; flex-wrap: wrap; text-align: center; padding: 0 5px; } @media (max-width: 767px) { html.-lang-en .m-anchor-list__item, body.-en .m-anchor-list__item { height: 75px; } } body.-en .m-anchor-list__item { font-size: 24px; line-height: 0.9; letter-spacing: normal; } @media (max-width: 1199px) { body.-en .m-anchor-list__item { font-size: 18px; line-height: 1.2; } } .m-anchor-list__item:before { content: ''; width: 100%; height: 100%; z-index: -2; position: absolute; top: 0; left: 0; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; } .o-index .m-anchor-list__item:before { background-color: #f0e14b; } .o-income .m-anchor-list__item:before { background-color: #f0e14b; } .o-asia .m-anchor-list__item:before { background-color: #1e9bd7; } .o-tw-multi-asset .m-anchor-list__item:before { background-color: #fcba17; } .o-investing .m-anchor-list__item:before { background-color: #55469b; } .o-mitigation .m-anchor-list__item:before { background-color: #6ECDCC; } .o-tw-esg .m-anchor-list__item:before { background-color: #55469b; } .o-asia .m-anchor-list__item.is-active, .o-tw-multi-asset .m-anchor-list__item.is-active { color: #fff; } .m-anchor-list__item.is-active:before { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; } .o-asia.-pc .m-anchor-list__item:hover, .o-tw-multi-asset.-pc .m-anchor-list__item:hover { color: #fff; } .-pc .m-anchor-list__item:hover { opacity: 1; } .-pc .m-anchor-list__item:hover:before { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; } .m-bracket-text { position: relative; padding: 22px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; max-width: 996px; margin: 0 auto; } @media (max-width: 1199px) { .m-bracket-text { padding: 13px; } } @media (max-width: 767px) { .m-bracket-text { padding: 20px 30px; } } .m-bracket-text__brackets { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } .m-bracket-text__brackets:before, .m-bracket-text__brackets:after { content: ''; width: 50%; height: 100%; background-color: #fff; position: absolute; -webkit-transition: -webkit-transform 1.6s ease; transition: -webkit-transform 1.6s ease; transition: transform 1.6s ease; transition: transform 1.6s ease, -webkit-transform 1.6s ease; } .-aos-active .m-bracket-text__brackets:before, .-aos-active .m-bracket-text__brackets:after { -webkit-transform: scaleX(0); transform: scaleX(0); } .m-bracket-text__brackets:before { left: 0; -webkit-transform-origin: left center; transform-origin: left center; } .m-bracket-text__brackets:after { right: 0; -webkit-transform-origin: right center; transform-origin: right center; } .m-bracket-text__brackets-item { width: 22px; height: 100%; border: 14px solid; position: absolute; -webkit-transition: all 1.6s ease, opacity 0.3s ease; transition: all 1.6s ease, opacity 0.3s ease; z-index: 1; } .o-index .m-bracket-text__brackets-item { border-color: #f0e14b; } .o-income .m-bracket-text__brackets-item { border-color: #f0e14b; } .o-asia .m-bracket-text__brackets-item { border-color: #1e9bd7; } .o-tw-multi-asset .m-bracket-text__brackets-item { border-color: #fcba17; } .o-investing .m-bracket-text__brackets-item { border-color: #55469b; } .o-mitigation .m-bracket-text__brackets-item { border-color: #6ECDCC; } .o-tw-esg .m-bracket-text__brackets-item { border-color: #55469b; } @media (max-width: 767px) { .m-bracket-text__brackets-item { border-width: 10px; width: 16px; } } .m-bracket-text__brackets-item.-left { border-right: none; left: calc(50% - 22px); opacity: 0; } .-aos-active .m-bracket-text__brackets-item.-left { left: 0; opacity: 1; } .m-bracket-text__brackets-item.-right { border-left: none; right: calc(50% - 22px); opacity: 0; } .-aos-active .m-bracket-text__brackets-item.-right { right: 0; opacity: 1; } .m-bracket-text__desc { width: 100%; max-width: 792px; font-size: 22px; font-weight: 700; letter-spacing: 0px; line-height: 1.5; text-align: center; } .-lang-en .m-bracket-text__desc { font-size: 24px; line-height: 1.25; letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .m-bracket-text__desc { font-size: 20px; line-height: 1.2; letter-spacing: normal; } @media (max-width: 1199px) { .m-bracket-text__desc { font-size: 18px; } .-lang-en .m-bracket-text__desc { line-height: 1.2; } .-en .m-bracket-text__desc { font-size: 16px; } } .o-index .m-bracket-text__desc { color: #f0e14b; } .o-income .m-bracket-text__desc { color: #f0e14b; } .o-asia .m-bracket-text__desc { color: #1e9bd7; } .o-tw-multi-asset .m-bracket-text__desc { color: #fcba17; } .o-investing .m-bracket-text__desc { color: #55469b; } .o-mitigation .m-bracket-text__desc { color: #6ECDCC; } .o-tw-esg .m-bracket-text__desc { color: #55469b; } @media (max-width: 1199px) { .m-bracket-text__desc { max-width: 445px; } } .m-img-swiper { width: 100%; max-width: 600px; overflow: visible; margin: 0 auto 107px !important; position: relative; padding: 10px 0 10px 10px; } body.-en .m-img-swiper { margin: 0 auto 127px !important; } body.-en .m-img-swiper__slide-text { max-height: 66px; } @media (max-width: 1199px) { .m-img-swiper { max-width: 454px; margin: 0 auto 88px; } } @media (max-width: 767px) { .m-img-swiper { margin: 0 auto 98px; max-width: 285px; padding: 6px 0 6px 6px; } } .m-img-swiper__border-deco { border: 3px solid; z-index: 10; position: absolute; left: 0; top: 0; width: calc(100% - 10px); height: 100%; } .o-index .m-img-swiper__border-deco { border-color: #f0e14b; } .o-income .m-img-swiper__border-deco { border-color: #f0e14b; } .o-asia .m-img-swiper__border-deco { border-color: #1e9bd7; } .o-tw-multi-asset .m-img-swiper__border-deco { border-color: #fcba17; } .o-investing .m-img-swiper__border-deco { border-color: #55469b; } .o-mitigation .m-img-swiper__border-deco { border-color: #6ECDCC; } .o-tw-esg .m-img-swiper__border-deco { border-color: #55469b; } @media (max-width: 1199px) { .m-img-swiper__border-deco { border: 2px solid; } } @media (max-width: 767px) { .m-img-swiper__border-deco { width: calc(100% - 10px); } } .m-img-swiper__border-deco:before, .m-img-swiper__border-deco:after { content: ''; display: block; width: 50px; height: 3px; position: absolute; z-index: 1; background-color: #fff; } @media (max-width: 767px) { .m-img-swiper__border-deco:before, .m-img-swiper__border-deco:after { height: 2px; } } .m-img-swiper__border-deco:before { top: -3px; right: -3px; } @media (max-width: 767px) { .m-img-swiper__border-deco:before { top: -2px; } } .m-img-swiper__border-deco:after { bottom: -3px; left: 52px; } @media (max-width: 767px) { .m-img-swiper__border-deco:after { bottom: -2px; } } .m-img-swiper .swiper-slide { position: relative; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .m-img-swiper .swiper-slide:before { content: ''; width: 100%; padding-bottom: 53.7%; display: block; } .m-img-swiper__slide-img { width: 100%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: all 0.6s ease; transition: all 0.6s ease; opacity: 0.5; } @media (min-width: 768px) { .m-img-swiper__slide-img { -webkit-transform: translateY(-50%) scale(0.6); transform: translateY(-50%) scale(0.6); } } @media (min-width: 768px) { .swiper-slide-next + .swiper-slide .m-img-swiper__slide-img { -webkit-transform: translate(-100%, -50%) scale(0.6); transform: translate(-100%, -50%) scale(0.6); } } .swiper-slide-active .m-img-swiper__slide-img, .swiper-slide-duplicate-active .m-img-swiper__slide-img { width: 100%; opacity: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media (min-width: 768px) { .swiper-slide-prev .m-img-swiper__slide-img, .swiper-slide-duplicate-prev .m-img-swiper__slide-img { -webkit-transform: translate(-32%, -50%) scale(0.6); transform: translate(-32%, -50%) scale(0.6); } } @media (max-width: 767px) { .swiper-slide-prev .m-img-swiper__slide-img, .swiper-slide-duplicate-prev .m-img-swiper__slide-img { -webkit-transform: translate(-52%, -50%); transform: translate(-52%, -50%); } } @media (min-width: 768px) { .swiper-slide-next .m-img-swiper__slide-img, .swiper-slide-duplicate-next .m-img-swiper__slide-img { -webkit-transform: translate(-70%, -50%) scale(0.6); transform: translate(-70%, -50%) scale(0.6); } } .m-img-swiper__slide-img:before { content: ''; width: 100%; padding-bottom: 53.7%; display: block; } .m-img-swiper__slide-text { font-size: 18px; font-weight: 400; letter-spacing: 1.5px; line-height: 1.5; font-weight: 700; color: #67676e; position: absolute; top: calc(100% + 38px); left: 0; width: 100%; opacity: 0; -webkit-transition: opacity 0.12s ease; transition: opacity 0.12s ease; max-height: 54px; overflow: hidden; } .-lang-en .m-img-swiper__slide-text { letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .m-img-swiper__slide-text { letter-spacing: normal; } @media (max-width: 1199px) { .m-img-swiper__slide-text { font-size: 16px; letter-spacing: 0px; } .-lang-en .m-img-swiper__slide-text { line-height: 1.38; } .-en .m-img-swiper__slide-text { letter-spacing: normal; } } @media (max-width: 767px) { .m-img-swiper__slide-text { font-size: 15px; } .-lang-en .m-img-swiper__slide-text { line-height: 1.33; } } @media (max-width: 1199px) { .m-img-swiper__slide-text { max-height: 48px; } } @media (min-width: 768px) { .m-img-swiper__slide-text { text-align: center; max-height: 66px; } } .swiper-slide-active .m-img-swiper__slide-text, .swiper-slide-duplicate-active .m-img-swiper__slide-text { -webkit-transition: opacity 0.3s 0.4s ease; transition: opacity 0.3s 0.4s ease; opacity: 1; } .m-img-swiper .swiper-controller { margin: 0; } .m-img-swiper .swiper-pagination { position: absolute; bottom: -14px; width: 100%; margin: 0; } .m-img-swiper .swiper-button-prev, .m-img-swiper .swiper-button-next { width: 62px; height: 62px; background-color: transparent !important; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); overflow: visible; color: #67676e !important; } .m-img-swiper .swiper-button-prev:active svg, .m-img-swiper .swiper-button-prev:active .icon, .m-img-swiper .swiper-button-next:active svg, .m-img-swiper .swiper-button-next:active .icon { opacity: 0.7; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .m-img-swiper .swiper-button-prev svg, .m-img-swiper .swiper-button-next svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .m-img-swiper .swiper-button-prev svg .play-circle-path, .m-img-swiper .swiper-button-next svg .play-circle-path { -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; -webkit-transform-origin: center; transform-origin: center; } .m-img-swiper .swiper-button-prev .icon:before, .m-img-swiper .swiper-button-next .icon:before { font-weight: 700; } .m-img-swiper .swiper-button-prev .icon:after, .m-img-swiper .swiper-button-next .icon:after { content: ''; width: 110px; height: 2px; background-color: #67676e; position: absolute; top: calc(50% - 1px); display: block; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } .m-img-swiper .swiper-button-prev { left: -90px; } .-ie .m-img-swiper .swiper-button-prev svg { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .-pc .m-img-swiper .swiper-button-prev:hover .play-circle-path { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .-pc .m-img-swiper .swiper-button-prev:hover .icon:after { -webkit-transform: scaleX(1); transform: scaleX(1); } .m-img-swiper .swiper-button-prev .play-circle-path { -webkit-transform: rotate(135deg); transform: rotate(135deg); } .m-img-swiper .swiper-button-prev:after { display: none; } .m-img-swiper .swiper-button-prev .icon:after { left: 28px; -webkit-transform-origin: right center; transform-origin: right center; } .m-img-swiper .swiper-button-next { right: -90px; } .-pc .m-img-swiper .swiper-button-next:hover .play-circle-path { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .-pc .m-img-swiper .swiper-button-next:hover .icon:after { -webkit-transform: scaleX(1); transform: scaleX(1); } .m-img-swiper .swiper-button-next .play-circle-path { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .m-img-swiper .swiper-button-next .icon:after { right: 28px; -webkit-transform-origin: left center; transform-origin: left center; } .m-rainbow-slideshow { overflow: visible; } body.-en .m-rainbow-slideshow__swiper-desc { height: auto; } @media (max-width: 767px) { .m-rainbow-slideshow { width: 100%; } } .m-rainbow-slideshow__deco-text { font-size: 180px; color: #fafafa; font-weight: 700; letter-spacing: -6.3px; position: absolute; } @media (min-width: 1200px) { .m-rainbow-slideshow__deco-text { left: 50%; top: 423px; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @media (max-width: 1199px) { .m-rainbow-slideshow__deco-text { font-size: 136px; right: 90px; top: 390px; line-height: 1.1; } } @media (max-width: 767px) { .m-rainbow-slideshow__deco-text { font-size: 153px; left: 50%; top: 190px; -webkit-transform: translateX(-50%); transform: translateX(-50%); letter-spacing: -5.37px; width: 300px; } } .m-rainbow-slideshow > .container { position: relative; } @media (max-width: 767px) { .m-rainbow-slideshow > .container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } } .m-rainbow-slideshow__swiper { overflow: visible; } @media (max-width: 767px) { .m-rainbow-slideshow__swiper { margin: -7px 0 20px !important; } } .m-rainbow-slideshow__swiper .swiper-slide { position: relative; overflow: visible; } .m-rainbow-slideshow__swiper .swiper-controller { display: none; } @media (max-width: 767px) { .m-rainbow-slideshow__swiper-animate-detector { display: none; } } .m-rainbow-slideshow__swiper-svg-wrapper { font-size: 18px; font-weight: 400; letter-spacing: 1.5px; line-height: 1.5; color: #67676e; width: 330px; height: 330px; margin: 110px auto 10px; overflow: visible; } .-lang-en .m-rainbow-slideshow__swiper-svg-wrapper { letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .m-rainbow-slideshow__swiper-svg-wrapper { letter-spacing: normal; } @media (max-width: 1199px) { .m-rainbow-slideshow__swiper-svg-wrapper { font-size: 16px; letter-spacing: 0px; } .-lang-en .m-rainbow-slideshow__swiper-svg-wrapper { line-height: 1.38; } .-en .m-rainbow-slideshow__swiper-svg-wrapper { letter-spacing: normal; } } @media (max-width: 767px) { .m-rainbow-slideshow__swiper-svg-wrapper { font-size: 15px; } .-lang-en .m-rainbow-slideshow__swiper-svg-wrapper { line-height: 1.33; } } @media (max-width: 1199px) { .m-rainbow-slideshow__swiper-svg-wrapper { margin: 0 0 0 auto; width: 50%; position: relative; opacity: 0.2; } } @media (max-width: 767px) { .m-rainbow-slideshow__swiper-svg-wrapper { display: none; } } .m-rainbow-slideshow__swiper-svg-wrapper svg { width: 100%; height: 90%; overflow: visible; } @media (max-width: 1199px) { .m-rainbow-slideshow__swiper-svg-wrapper svg { position: absolute; right: -64px; } } .m-rainbow-slideshow__swiper-svg-wrapper svg#asia_q1 #arrow_and_text { -webkit-transform-origin: center; transform-origin: center; will-change: transform; } @-webkit-keyframes character_e_shadow { 0% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } 20% { opacity: 1; } 100% { opacity: 0; -webkit-transform: scale(1.4); transform: scale(1.4); } } @keyframes character_e_shadow { 0% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } 20% { opacity: 1; } 100% { opacity: 0; -webkit-transform: scale(1.4); transform: scale(1.4); } } .m-rainbow-slideshow__swiper-svg-wrapper svg#asia_q1 #character_e_shadow { -webkit-transform-origin: 334px 127px; transform-origin: 334px 127px; -webkit-animation: character_e_shadow 1s ease infinite; animation: character_e_shadow 1s ease infinite; } .m-rainbow-slideshow__swiper-svg-wrapper svg#asia_q2 { overflow: visible; } .m-rainbow-slideshow__swiper-svg-wrapper svg#asia_q2 #wing_front { -webkit-transform-origin: 270px 170px; transform-origin: 270px 170px; will-change: transform; } .m-rainbow-slideshow__swiper-svg-wrapper svg#asia_q2 #wing_below { -webkit-transform-origin: 321px 146px; transform-origin: 321px 146px; will-change: transform; } .m-rainbow-slideshow__swiper-svg-wrapper svg#asia_q2 #foot_front { -webkit-transform-origin: 310px 170px; transform-origin: 310px 170px; will-change: transform; } .m-rainbow-slideshow__swiper-svg-wrapper svg#asia_q2 #foot_below { -webkit-transform-origin: 330px 170px; transform-origin: 330px 170px; will-change: transform; } body:not(.-ie) .m-rainbow-slideshow__swiper-svg-wrapper svg#asia_q3 #door_right_side.only-show-ie, body:not(.-ie) .m-rainbow-slideshow__swiper-svg-wrapper svg#asia_q3 #door_left_side.only-show-ie { display: none; } .-ie .m-rainbow-slideshow__swiper-svg-wrapper svg#asia_q3 #door_right_side, .-ie .m-rainbow-slideshow__swiper-svg-wrapper svg#asia_q3 #door_left_side { display: none; } .-ie .m-rainbow-slideshow__swiper-svg-wrapper svg#asia_q3 #door_right_side.only-show-ie, .-ie .m-rainbow-slideshow__swiper-svg-wrapper svg#asia_q3 #door_left_side.only-show-ie { display: block; } .m-rainbow-slideshow__swiper-svg-wrapper svg#asia_q3 #door_right_side { -webkit-transform: skew(0deg, -30deg) translate(-1px, 180px); transform: skew(0deg, -30deg) translate(-1px, 180px); } .m-rainbow-slideshow__swiper-svg-wrapper svg#asia_q3 #door_right_side .single_door.-left { -webkit-transform-origin: 242px 314px; transform-origin: 242px 314px; will-change: transform; -webkit-transform: perspective(900px) rotateY(130deg); transform: perspective(900px) rotateY(130deg); } .m-rainbow-slideshow__swiper-svg-wrapper svg#asia_q3 #door_right_side .single_door.-right { -webkit-transform-origin: 365px 255px; transform-origin: 365px 255px; will-change: transform; -webkit-transform: perspective(900px) rotateY(-130deg); transform: perspective(900px) rotateY(-130deg); } .m-rainbow-slideshow__swiper-svg-wrapper svg#asia_q3 #door_left_side { -webkit-transform: skew(0deg, 29deg) translate(2px, -50px); transform: skew(0deg, 29deg) translate(2px, -50px); } .m-rainbow-slideshow__swiper-svg-wrapper svg#asia_q3 #door_left_side .single_door.-left { -webkit-transform-origin: 34px 292px; transform-origin: 34px 292px; will-change: transform; -webkit-transform: perspective(900px) rotateY(128deg); transform: perspective(900px) rotateY(128deg); } .m-rainbow-slideshow__swiper-svg-wrapper svg#asia_q3 #door_left_side .single_door.-right { -webkit-transform-origin: 158px 290px; transform-origin: 158px 290px; will-change: transform; -webkit-transform: perspective(900px) rotateY(-109deg); transform: perspective(900px) rotateY(-109deg); } body:not(.-ie) .m-rainbow-slideshow__swiper-svg-wrapper svg .stroke-round { stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; } .m-rainbow-slideshow__swiper-desc { font-size: 18px; font-weight: 400; letter-spacing: 1.5px; line-height: 1.5; color: #67676e; position: absolute; left: 50%; -webkit-transform: translateX(217px); transform: translateX(217px); top: 243px; width: 384px; height: 190px; overflow: hidden; } .-lang-en .m-rainbow-slideshow__swiper-desc { letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .m-rainbow-slideshow__swiper-desc { letter-spacing: normal; } @media (max-width: 1199px) { .m-rainbow-slideshow__swiper-desc { font-size: 16px; letter-spacing: 0px; } .-lang-en .m-rainbow-slideshow__swiper-desc { line-height: 1.38; } .-en .m-rainbow-slideshow__swiper-desc { letter-spacing: normal; } } @media (max-width: 767px) { .m-rainbow-slideshow__swiper-desc { font-size: 15px; } .-lang-en .m-rainbow-slideshow__swiper-desc { line-height: 1.33; } } @media (max-width: 1199px) { .m-rainbow-slideshow__swiper-desc { position: absolute; width: 50%; right: 0; top: 50%; height: 96px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } } @media (max-width: 767px) { .m-rainbow-slideshow__swiper-desc { position: initial; -webkit-transform: none; transform: none; width: 100%; height: 90px; min-height: auto; } } .m-rainbow-slideshow__rainbow { position: absolute; left: 50%; top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 1; } @media (max-width: 1199px) { .m-rainbow-slideshow__rainbow { width: 100%; top: -120px; } } @media (max-width: 767px) { .m-rainbow-slideshow__rainbow { position: relative; top: 0; left: 0; -webkit-transform: none; transform: none; } } .m-rainbow-slideshow__rainbow-title-list { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; } .m-rainbow-slideshow__rainbow-title-list-item { position: absolute; font-size: 22px; font-weight: 700; letter-spacing: 0px; line-height: 1.5; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; color: #67676e; cursor: pointer; } .-lang-en .m-rainbow-slideshow__rainbow-title-list-item { font-size: 24px; line-height: 1.25; letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .m-rainbow-slideshow__rainbow-title-list-item { font-size: 20px; line-height: 1.2; letter-spacing: normal; } @media (max-width: 1199px) { .m-rainbow-slideshow__rainbow-title-list-item { font-size: 18px; } .-lang-en .m-rainbow-slideshow__rainbow-title-list-item { line-height: 1.2; } .-en .m-rainbow-slideshow__rainbow-title-list-item { font-size: 16px; } } .-pc .m-rainbow-slideshow__rainbow-title-list-item:hover { opacity: 0.7; } .active-index-0 .m-rainbow-slideshow__rainbow-title-list-item:nth-child(1) { -webkit-transform: scale(1.1); transform: scale(1.1); color: #1e9bd7; } .active-index-1 .m-rainbow-slideshow__rainbow-title-list-item:nth-child(2) { -webkit-transform: scale(1.1); transform: scale(1.1); color: #1e9bd7; } .active-index-2 .m-rainbow-slideshow__rainbow-title-list-item:nth-child(3) { -webkit-transform: scale(1.1); transform: scale(1.1); color: #1e9bd7; } .active-index-3 .m-rainbow-slideshow__rainbow-title-list-item:nth-child(4) { -webkit-transform: scale(1.1); transform: scale(1.1); color: #1e9bd7; } .m-rainbow-slideshow__rainbow-title-list-item:nth-child(1) { width: 176px; top: 380px; right: 813px; -webkit-transform-origin: right center; transform-origin: right center; will-change: transform; } @media (max-width: 1199px) { .m-rainbow-slideshow__rainbow-title-list-item:nth-child(1) { -webkit-transform-origin: left center; transform-origin: left center; will-change: transform; left: 200px; top: 150px; } } @media (max-width: 767px) { .m-rainbow-slideshow__rainbow-title-list-item:nth-child(1) { left: 76px; top: 48px; } } .m-rainbow-slideshow__rainbow-title-list-item:nth-child(2) { width: 200px; top: 130px; right: 702px; -webkit-transform-origin: right center; transform-origin: right center; will-change: transform; } @media (max-width: 1199px) { .m-rainbow-slideshow__rainbow-title-list-item:nth-child(2) { -webkit-transform-origin: left center; transform-origin: left center; will-change: transform; right: auto; top: 235px; left: 156px; } } @media (max-width: 767px) { .m-rainbow-slideshow__rainbow-title-list-item:nth-child(2) { top: 115px; left: 110px; } } .m-rainbow-slideshow__rainbow-title-list-item:nth-child(3) { width: 225px; top: 5px; left: 460px; -webkit-transform-origin: left center; transform-origin: left center; will-change: transform; } @media (max-width: 1199px) { .m-rainbow-slideshow__rainbow-title-list-item:nth-child(3) { -webkit-transform-origin: left center; transform-origin: left center; will-change: transform; top: 318px; right: auto; left: 135px; } } @media (max-width: 767px) { .m-rainbow-slideshow__rainbow-title-list-item:nth-child(3) { left: 110px; top: 185px; } } .m-rainbow-slideshow__rainbow-title-list-item:nth-child(4) { width: 225px; top: 130px; left: 708px; -webkit-transform-origin: left center; transform-origin: left center; will-change: transform; } @media (max-width: 1199px) { .m-rainbow-slideshow__rainbow-title-list-item:nth-child(4) { left: 122px; top: 404px; } } @media (max-width: 767px) { .m-rainbow-slideshow__rainbow-title-list-item:nth-child(4) { left: 76px; top: 258px; } } @media (max-width: 1199px) { .m-rainbow-slideshow__rainbow svg { width: 100%; } } @media (max-width: 767px) { .m-rainbow-slideshow__rainbow svg { width: auto; -webkit-transform: translateX(-103px); transform: translateX(-103px); } } .m-rainbow-slideshow__rainbow svg .rainbow-slide-button { cursor: pointer; } body:not(.-ie) .m-rainbow-slideshow__rainbow svg .circle-front, body:not(.-ie) .m-rainbow-slideshow__rainbow svg .line-front, body:not(.-ie) .m-rainbow-slideshow__rainbow svg .line-back { stroke-linecap: round; stroke-linejoin: round; } .m-rainbow-slideshow__rainbow #slide-1 .circle-front { stroke-dasharray: 270; stroke-dashoffset: 270; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; } .m-rainbow-slideshow__rainbow #slide-1 .icon { -webkit-transition: color 0.6s ease; transition: color 0.6s ease; } .m-rainbow-slideshow__rainbow #slide-1 .line-front { stroke-dasharray: 180; stroke-dashoffset: 180; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; } .-pc .m-rainbow-slideshow__rainbow #slide-1 { -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .-pc .m-rainbow-slideshow__rainbow #slide-1:hover { opacity: 0.6; } .m-rainbow-slideshow__rainbow .active-index-0 #slide-1 .circle-front { stroke-dashoffset: 0; -webkit-transition: all 1s linear; transition: all 1s linear; } .m-rainbow-slideshow__rainbow .active-index-0 #slide-1 .icon { fill: #1e9bd7; } .m-rainbow-slideshow__rainbow .active-index-0 #slide-1 .line-front { stroke-dashoffset: 0; -webkit-transition: all 4.6s linear; transition: all 4.6s linear; } .m-rainbow-slideshow__rainbow #slide-2 .circle-front { stroke-dasharray: 270; stroke-dashoffset: 270; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; } .m-rainbow-slideshow__rainbow #slide-2 .icon { -webkit-transition: color 0.6s ease; transition: color 0.6s ease; } .m-rainbow-slideshow__rainbow #slide-2 .line-front { stroke-dasharray: 180; stroke-dashoffset: 180; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; } .-pc .m-rainbow-slideshow__rainbow #slide-2 { -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .-pc .m-rainbow-slideshow__rainbow #slide-2:hover { opacity: 0.6; } .m-rainbow-slideshow__rainbow .active-index-1 #slide-2 .circle-front { stroke-dashoffset: 0; -webkit-transition: all 1s linear; transition: all 1s linear; } .m-rainbow-slideshow__rainbow .active-index-1 #slide-2 .icon { fill: #1e9bd7; } .m-rainbow-slideshow__rainbow .active-index-1 #slide-2 .line-front { stroke-dashoffset: 0; -webkit-transition: all 4.6s linear; transition: all 4.6s linear; } .m-rainbow-slideshow__rainbow #slide-3 .circle-front { stroke-dasharray: 270; stroke-dashoffset: 270; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; } .m-rainbow-slideshow__rainbow #slide-3 .icon { -webkit-transition: color 0.6s ease; transition: color 0.6s ease; } .m-rainbow-slideshow__rainbow #slide-3 .line-front { stroke-dasharray: 180; stroke-dashoffset: 180; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; } .-pc .m-rainbow-slideshow__rainbow #slide-3 { -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .-pc .m-rainbow-slideshow__rainbow #slide-3:hover { opacity: 0.6; } .m-rainbow-slideshow__rainbow .active-index-2 #slide-3 .circle-front { stroke-dashoffset: 0; -webkit-transition: all 1s linear; transition: all 1s linear; } .m-rainbow-slideshow__rainbow .active-index-2 #slide-3 .icon { fill: #1e9bd7; } .m-rainbow-slideshow__rainbow .active-index-2 #slide-3 .line-front { stroke-dashoffset: 0; -webkit-transition: all 4.6s linear; transition: all 4.6s linear; } .m-rainbow-slideshow__rainbow #slide-4 .circle-front { stroke-dasharray: 270; stroke-dashoffset: 270; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; } .m-rainbow-slideshow__rainbow #slide-4 .icon { -webkit-transition: color 0.6s ease; transition: color 0.6s ease; } .m-rainbow-slideshow__rainbow #slide-4 .line-front { stroke-dasharray: 180; stroke-dashoffset: 180; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; } .-pc .m-rainbow-slideshow__rainbow #slide-4 { -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .-pc .m-rainbow-slideshow__rainbow #slide-4:hover { opacity: 0.6; } .m-rainbow-slideshow__rainbow .active-index-3 #slide-4 .circle-front { stroke-dashoffset: 0; -webkit-transition: all 1s linear; transition: all 1s linear; } .m-rainbow-slideshow__rainbow .active-index-3 #slide-4 .icon { fill: #1e9bd7; } .m-rainbow-slideshow__rainbow .active-index-3 #slide-4 .line-front { stroke-dashoffset: 0; -webkit-transition: all 4.6s linear; transition: all 4.6s linear; } .m-organization-card { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 33.33333%; padding: 0 30px; } @media (max-width: 1199px) { .m-organization-card { padding: 0 14px; } } @media (max-width: 767px) { .m-organization-card { padding: 0; width: 100%; } } @media (max-width: 767px) { .m-organization-card + .m-organization-card { margin-top: 42px; } } .m-organization-card:first-child { padding-left: 0; padding-right: 60px; } @media (max-width: 1199px) { .m-organization-card:first-child { padding-left: 0; padding-right: 28px; } } @media (max-width: 767px) { .m-organization-card:first-child { padding: 0; } } .m-organization-card:last-child { padding-right: 0; padding-left: 60px; } @media (max-width: 1199px) { .m-organization-card:last-child { padding-right: 0; padding-left: 28px; } } @media (max-width: 767px) { .m-organization-card:last-child { padding: 0; } } .m-organization-card__top { width: 100%; border: 3px solid #b1c425; background-color: #b1c425; margin-bottom: 20px; } @media (max-width: 767px) { .m-organization-card__top { display: -webkit-box; display: -ms-flexbox; display: flex; height: 80px; margin-bottom: -3px; } } .m-organization-card__bottom { outline: 3px solid #b1c425; outline-offset: -3px; background-color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: justify; align-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: 372px; position: relative; overflow: hidden; } @media (max-width: 1199px) { .m-organization-card__bottom { min-height: 315px; } } @media (min-width: 768px) { .m-organization-card__bottom { -ms-flex-wrap: wrap; flex-wrap: wrap; } } @media (max-width: 767px) { .m-organization-card__bottom { min-height: 115px; padding: 17px; } } .m-organization-card__title { font-size: 24px; font-weight: 700; letter-spacing: 1px; line-height: 1.5; text-align: center; padding: 10px 0; color: #fff; } .-lang-en .m-organization-card__title { line-height: 1.25; letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .m-organization-card__title { font-size: 22px; letter-spacing: 0.5px; line-height: 1; } @media (max-width: 1199px) { .m-organization-card__title { font-size: 20px; } .-lang-en .m-organization-card__title { font-size: 24px; line-height: 1.2; } .-en .m-organization-card__title { font-size: 18px; } } @media (max-width: 767px) { .m-organization-card__title { font-size: 18px; } } @media (min-width: 768px) { .m-organization-card__title br { display: none; } } @media (max-width: 767px) { .m-organization-card__title { width: 50%; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .m-organization-card__logo { width: 100%; height: 165px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: bottom; -ms-flex-align: bottom; align-items: bottom; background-color: #fff; } @media (max-width: 1199px) { .m-organization-card__logo { height: 105px; } } @media (max-width: 767px) { .m-organization-card__logo { width: 50%; height: auto; } } .m-organization-card__logo-img { width: 230px; height: 120px; display: block; margin: auto; background-color: #fff; } @media (max-width: 1199px) { .m-organization-card__logo-img { width: 130px; height: 67.826px; } } @media (max-width: 767px) { .m-organization-card__logo-img { width: 115px; height: 60px; } } .m-organization-card__desc { font-size: 18px; font-weight: 400; letter-spacing: 1.5px; line-height: 1.5; color: #67676e; margin: 20px; text-align: center; min-height: 108px; } .-lang-en .m-organization-card__desc { letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .m-organization-card__desc { letter-spacing: normal; } @media (max-width: 1199px) { .m-organization-card__desc { font-size: 16px; letter-spacing: 0px; } .-lang-en .m-organization-card__desc { line-height: 1.38; } .-en .m-organization-card__desc { letter-spacing: normal; } } @media (max-width: 767px) { .m-organization-card__desc { font-size: 15px; } .-lang-en .m-organization-card__desc { line-height: 1.33; } } @media (max-width: 1199px) { .m-organization-card__desc br { display: none; } } @media (max-width: 767px) { .m-organization-card__desc { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; text-align: left; margin: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .m-organization-card__icon { width: 175px; height: 165px; margin-bottom: 32px; } @media (max-width: 1199px) { .m-organization-card__icon { width: 114px; height: 107px; } } @media (max-width: 767px) { .m-organization-card__icon { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 93px; height: 87px; margin: 0 17px 0 0; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } } .m-organization-card__desc::before, .m-organization-card__desc::after, .m-organization-card__icon::before, .m-organization-card__icon::after { display: block; content: ''; position: absolute; background-color: #b1c425; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-duration: 0.15s; transition-duration: 0.15s; } .m-organization-card__desc::before, .m-organization-card__icon::before { top: 0; bottom: 0; width: 3px; -webkit-transform: scaleY(0); transform: scaleY(0); } @media (hover: none) { .m-organization-card__desc::before, .m-organization-card__icon::before { -webkit-transform: scaleY(1); transform: scaleY(1); } } .m-organization-card__desc::after, .m-organization-card__icon::after { left: 0; right: 0; height: 3px; -webkit-transform: scaleX(0); transform: scaleX(0); } @media (hover: none) { .m-organization-card__desc::after, .m-organization-card__icon::after { -webkit-transform: scaleX(1); transform: scaleX(1); } } .m-organization-card__desc::before { left: 0; -webkit-transform-origin: bottom; transform-origin: bottom; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .m-organization-card__desc::after { -webkit-transform-origin: left; transform-origin: left; top: 0; -webkit-transition-delay: 0.15s; transition-delay: 0.15s; } .m-organization-card__icon::before { -webkit-transform-origin: top; transform-origin: top; right: 0; } .m-organization-card__icon::after { bottom: 0; -webkit-transform-origin: right; transform-origin: right; -webkit-transition-delay: 0.45s; transition-delay: 0.45s; } .m-organization-card:hover .m-organization-card__bottom { outline: none; } .m-organization-card:hover .m-organization-card__desc::before { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; -webkit-transform: scaleY(1); transform: scaleY(1); } .m-organization-card:hover .m-organization-card__desc::after { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; -webkit-transform: scaleX(1); transform: scaleX(1); } .m-organization-card:hover .m-organization-card__icon::before { -webkit-transition-delay: 0.45s; transition-delay: 0.45s; -webkit-transition-timing-function: cubic-bezier(0.3, 0.85, 0.05, 0.88); transition-timing-function: cubic-bezier(0.3, 0.85, 0.05, 0.88); -webkit-transition-duration: 1.5s; transition-duration: 1.5s; -webkit-transform: scaleY(0.9); transform: scaleY(0.9); } .m-organization-card:hover .m-organization-card__icon::after { -webkit-transform: scaleX(2) translateX(-10%); transform: scaleX(2) translateX(-10%); -webkit-transition-duration: 1.8s; transition-duration: 1.8s; -webkit-transition-timing-function: cubic-bezier(0, 1, 0.2, 0.2); transition-timing-function: cubic-bezier(0, 1, 0.2, 0.2); -webkit-transition-delay: 0s; transition-delay: 0s; } .m-organization-card-tw { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 33.33333%; padding: 0 30px; } @media (max-width: 1199px) { .m-organization-card-tw { padding: 0 14px; } } @media (max-width: 767px) { .m-organization-card-tw { padding: 0; width: 100%; } } @media (max-width: 767px) { .m-organization-card-tw + .m-organization-card-tw { margin-top: 42px; } } .m-organization-card-tw:first-child { padding-left: 0; padding-right: 60px; } @media (max-width: 1199px) { .m-organization-card-tw:first-child { padding-left: 0; padding-right: 28px; } } @media (max-width: 767px) { .m-organization-card-tw:first-child { padding: 0; } } .m-organization-card-tw:last-child { padding-right: 0; padding-left: 60px; } @media (max-width: 1199px) { .m-organization-card-tw:last-child { padding-right: 0; padding-left: 28px; } } @media (max-width: 767px) { .m-organization-card-tw:last-child { padding: 0; } } .m-organization-card-tw__top { width: 100%; border: 3px solid #b1c425; background-color: white; margin-bottom: 20px; } @media (max-width: 767px) { .m-organization-card-tw__top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 80px; margin-bottom: -3px; } } .m-organization-card-tw__bottom { outline: 3px solid #b1c425; outline-offset: -3px; background-color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: justify; align-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: 372px; position: relative; overflow: hidden; } @media (max-width: 1199px) { .m-organization-card-tw__bottom { min-height: 315px; } } @media (min-width: 768px) { .m-organization-card-tw__bottom { -ms-flex-wrap: wrap; flex-wrap: wrap; } } @media (max-width: 767px) { .m-organization-card-tw__bottom { min-height: 115px; padding: 17px; } } .m-organization-card-tw__title { font-size: 24px; font-weight: 700; letter-spacing: 1px; line-height: 1.5; text-align: center; padding: 10px 0; color: #fff; } .-lang-en .m-organization-card-tw__title { line-height: 1.25; letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .m-organization-card-tw__title { font-size: 22px; letter-spacing: 0.5px; line-height: 1; } @media (max-width: 1199px) { .m-organization-card-tw__title { font-size: 20px; } .-lang-en .m-organization-card-tw__title { font-size: 24px; line-height: 1.2; } .-en .m-organization-card-tw__title { font-size: 18px; } } @media (max-width: 767px) { .m-organization-card-tw__title { font-size: 18px; } } @media (min-width: 768px) { .m-organization-card-tw__title br { display: none; } } @media (max-width: 767px) { .m-organization-card-tw__title { width: 50%; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .m-organization-card-tw__logo { width: 100%; height: 165px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: bottom; -ms-flex-align: bottom; align-items: bottom; background-color: #fff; } @media (max-width: 1199px) { .m-organization-card-tw__logo { height: 105px; } } @media (max-width: 767px) { .m-organization-card-tw__logo { width: 50%; height: auto; } } .m-organization-card-tw__logo-img { width: 230px; height: 120px; display: block; margin: auto; background-color: #fff; } @media (max-width: 1199px) { .m-organization-card-tw__logo-img { width: 130px; height: 67.826px; } } @media (max-width: 767px) { .m-organization-card-tw__logo-img { width: 115px; height: 60px; } } .m-organization-card-tw__desc { font-size: 14px; line-height: 1.5; letter-spacing: normal; font-weight: 400; color: #67676e; font-size: 16px; margin: 20px; text-align: center; min-height: 108px; } .-lang-en .m-organization-card-tw__desc { font-family: KlavikaWebBasic, sans-serif; } @media (max-width: 767px) { .-lang-en .m-organization-card-tw__desc { font-size: 12px; } } @media (max-width: 1199px) { .m-organization-card-tw__desc { line-height: 18px; font-size: 14px; } .m-organization-card-tw__desc br { display: none; } } @media (max-width: 767px) { .m-organization-card-tw__desc { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; text-align: left; margin: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .m-organization-card-tw__icon { width: 175px; height: 165px; margin-bottom: 32px; } @media (max-width: 1199px) { .m-organization-card-tw__icon { width: 114px; height: 107px; } } @media (max-width: 767px) { .m-organization-card-tw__icon { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 93px; height: 87px; margin: 0 17px 0 0; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } } .m-organization-card-tw__desc::before, .m-organization-card-tw__desc::after, .m-organization-card-tw__icon::before, .m-organization-card-tw__icon::after { display: block; content: ''; position: absolute; background-color: #b1c425; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-duration: 0.15s; transition-duration: 0.15s; } .m-organization-card-tw__desc::before, .m-organization-card-tw__icon::before { top: 0; bottom: 0; width: 3px; -webkit-transform: scaleY(0); transform: scaleY(0); } @media (hover: none) { .m-organization-card-tw__desc::before, .m-organization-card-tw__icon::before { -webkit-transform: scaleY(1); transform: scaleY(1); } } .m-organization-card-tw__desc::after, .m-organization-card-tw__icon::after { left: 0; right: 0; height: 3px; -webkit-transform: scaleX(0); transform: scaleX(0); } @media (hover: none) { .m-organization-card-tw__desc::after, .m-organization-card-tw__icon::after { -webkit-transform: scaleX(1); transform: scaleX(1); } } .m-organization-card-tw__desc::before { left: 0; -webkit-transform-origin: bottom; transform-origin: bottom; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .m-organization-card-tw__desc::after { -webkit-transform-origin: left; transform-origin: left; top: 0; -webkit-transition-delay: 0.15s; transition-delay: 0.15s; } .m-organization-card-tw__icon::before { -webkit-transform-origin: top; transform-origin: top; right: 0; } .m-organization-card-tw__icon::after { bottom: 0; -webkit-transform-origin: right; transform-origin: right; -webkit-transition-delay: 0.45s; transition-delay: 0.45s; } .m-organization-card-tw:hover .m-organization-card-tw__bottom { outline: none; } .m-organization-card-tw:hover .m-organization-card-tw__desc::before { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; -webkit-transform: scaleY(1); transform: scaleY(1); } .m-organization-card-tw:hover .m-organization-card-tw__desc::after { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; -webkit-transform: scaleX(1); transform: scaleX(1); } .m-organization-card-tw:hover .m-organization-card-tw__icon::before { -webkit-transition-delay: 0.45s; transition-delay: 0.45s; -webkit-transition-timing-function: cubic-bezier(0.3, 0.85, 0.05, 0.88); transition-timing-function: cubic-bezier(0.3, 0.85, 0.05, 0.88); -webkit-transition-duration: 1.5s; transition-duration: 1.5s; -webkit-transform: scaleY(0.9); transform: scaleY(0.9); } .m-organization-card-tw:hover .m-organization-card-tw__icon::after { -webkit-transform: scaleX(2) translateX(-10%); transform: scaleX(2) translateX(-10%); -webkit-transition-duration: 1.8s; transition-duration: 1.8s; -webkit-transition-timing-function: cubic-bezier(0, 1, 0.2, 0.2); transition-timing-function: cubic-bezier(0, 1, 0.2, 0.2); -webkit-transition-delay: 0s; transition-delay: 0s; } @-webkit-keyframes squarerun { 0% { left: 0px; top: 0px; } 100% { right: 0px; top: 0px; } } @keyframes squarerun { 0% { left: 0px; top: 0px; } 100% { right: 0px; top: 0px; } } .m-video-swiper { width: 100%; overflow: visible; margin: 0 auto !important; position: relative; padding: 10px 0 10px 10px; } @media (max-width: 1199px) { .m-video-swiper { padding-left: 4px; } } @media (max-width: 767px) { .m-video-swiper { padding: 10px; } } .-pc .swiper-slide:hover .m-video-swiper__slide-text { color: #6ECDCC; } .-pc .swiper-slide:hover .m-video-swiper__slide-deco { border-color: transparent; } .-pc .swiper-slide:hover .m-video-swiper__slide-deco::before, .-pc .swiper-slide:hover .m-video-swiper__slide-deco::after { opacity: 0; } .-pc .swiper-slide:hover .m-video-swiper__slide-deco-border.-right { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transition: -webkit-transform .2s linear; transition: -webkit-transform .2s linear; transition: transform .2s linear; transition: transform .2s linear, -webkit-transform .2s linear; } .-pc .swiper-slide:hover .m-video-swiper__slide-deco-border.-bot { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transition: -webkit-transform .2s .2s linear; transition: -webkit-transform .2s .2s linear; transition: transform .2s .2s linear; transition: transform .2s .2s linear, -webkit-transform .2s .2s linear; } .-pc .swiper-slide:hover .m-video-swiper__slide-deco-border.-bot::before { -webkit-transform: scaleX(1) translateX(0); transform: scaleX(1) translateX(0); -webkit-transition: -webkit-transform .4s .2s ease-out; transition: -webkit-transform .4s .2s ease-out; transition: transform .4s .2s ease-out; transition: transform .4s .2s ease-out, -webkit-transform .4s .2s ease-out; } .-pc .swiper-slide:hover .m-video-swiper__slide-deco-border.-left { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transition: -webkit-transform .2s .4s linear; transition: -webkit-transform .2s .4s linear; transition: transform .2s .4s linear; transition: transform .2s .4s linear, -webkit-transform .2s .4s linear; } .-pc .swiper-slide:hover .m-video-swiper__slide-deco-border.-top { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transition: -webkit-transform .4s .6s ease-out; transition: -webkit-transform .4s .6s ease-out; transition: transform .4s .6s ease-out; transition: transform .4s .6s ease-out, -webkit-transform .4s .6s ease-out; } .-pc .swiper-slide:hover .m-video-swiper__slide-deco-border.-top::before { -webkit-transform: scaleX(1) translateX(0); transform: scaleX(1) translateX(0); -webkit-transition: -webkit-transform .4s .4s ease-out; transition: -webkit-transform .4s .4s ease-out; transition: transform .4s .4s ease-out; transition: transform .4s .4s ease-out, -webkit-transform .4s .4s ease-out; } .m-video-swiper .swiper-slide { position: relative; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; cursor: pointer; } .m-video-swiper__slide-box { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; } @media (max-width: 767px) { .m-video-swiper__slide-box { display: block; } } .-pc .m-video-swiper__slide-box:hover .m-video-swiper__slide-img-play .a-circle-frame { -webkit-animation: rotate 0.5s cubic-bezier(0.7, 0, 0.3, 1); animation: rotate 0.5s cubic-bezier(0.7, 0, 0.3, 1); } .m-video-swiper__slide-deco { width: calc(100% + 3px); height: calc(100% + 16px); position: absolute; top: -8px; left: -8px; display: block; border: 3px #6ECDCC solid; } @media (max-width: 1199px) { .m-video-swiper__slide-deco { width: calc(100% + 2px); height: calc(100% + 12px); top: -6px; left: -6px; border-width: 2px; } } .m-video-swiper__slide-deco::before, .m-video-swiper__slide-deco::after { width: 8px; height: 3px; content: ''; position: absolute; display: block; background-color: #fff; z-index: 2; } @media (max-width: 1199px) { .m-video-swiper__slide-deco::before, .m-video-swiper__slide-deco::after { width: 8px; height: 2px; } } .m-video-swiper__slide-deco::before { top: -3px; right: 0; } @media (max-width: 1199px) { .m-video-swiper__slide-deco::before { top: -2px; } } .m-video-swiper__slide-deco::after { bottom: -3px; left: 10px; } @media (max-width: 1199px) { .m-video-swiper__slide-deco::after { bottom: -2px; } } .m-video-swiper__slide-deco-border { position: absolute; display: block; background-color: #6ECDCC; z-index: 1; } .m-video-swiper__slide-deco-border.-right { width: 3px; height: calc(100% + 6px); top: -3px; right: -3px; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: top; transform-origin: top; -webkit-transition: -webkit-transform 0s; transition: -webkit-transform 0s; transition: transform 0s; transition: transform 0s, -webkit-transform 0s; } @media (max-width: 1199px) { .m-video-swiper__slide-deco-border.-right { width: 2px; height: calc(100% + 4px); top: -2px; right: -2px; } } .m-video-swiper__slide-deco-border.-bot { width: calc(100% + 6px); height: 3px; bottom: -3px; right: -3px; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: right; transform-origin: right; -webkit-transition: -webkit-transform 0s; transition: -webkit-transform 0s; transition: transform 0s; transition: transform 0s, -webkit-transform 0s; } @media (max-width: 1199px) { .m-video-swiper__slide-deco-border.-bot { width: calc(100% + 4px); height: 2px; bottom: -2px; right: -2px; } } .m-video-swiper__slide-deco-border.-bot::before { width: 8px; height: 3px; content: ''; position: absolute; bottom: 0; left: 13px; display: block; background-color: #fff; -webkit-transform: scaleX(0) translateX(40px); transform: scaleX(0) translateX(40px); -webkit-transform-origin: right; transform-origin: right; -webkit-transition: -webkit-transform 0s; transition: -webkit-transform 0s; transition: transform 0s; transition: transform 0s, -webkit-transform 0s; } @media (max-width: 1199px) { .m-video-swiper__slide-deco-border.-bot::before { left: 12px; } } .m-video-swiper__slide-deco-border.-left { width: 3px; height: calc(100% + 6px); bottom: -3px; left: -3px; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: bottom; transform-origin: bottom; -webkit-transition: -webkit-transform 0s; transition: -webkit-transform 0s; transition: transform 0s; transition: transform 0s, -webkit-transform 0s; } @media (max-width: 1199px) { .m-video-swiper__slide-deco-border.-left { width: 2px; height: calc(100% + 4px); bottom: -2px; left: -2px; } } .m-video-swiper__slide-deco-border.-top { width: calc(100% + 6px); height: 3px; top: -3px; left: -3px; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left; transform-origin: left; -webkit-transition: -webkit-transform 0s; transition: -webkit-transform 0s; transition: transform 0s; transition: transform 0s, -webkit-transform 0s; } @media (max-width: 1199px) { .m-video-swiper__slide-deco-border.-top { width: calc(100% + 4px); height: 2px; top: -2px; left: -2px; } } .m-video-swiper__slide-deco-border.-top::before { width: 8px; height: 3px; content: ''; position: absolute; top: 0; right: 3px; display: block; background-color: #fff; -webkit-transform: scaleX(0) translateX(40px); transform: scaleX(0) translateX(40px); -webkit-transform-origin: left; transform-origin: left; -webkit-transition: -webkit-transform 0s; transition: -webkit-transform 0s; transition: transform 0s; transition: transform 0s, -webkit-transform 0s; } @media (max-width: 1199px) { .m-video-swiper__slide-deco-border.-top::before { right: 2px; } } .m-video-swiper__slide-img { position: relative; display: block; width: 130px; -webkit-transform: translateZ(1px); transform: translateZ(1px); } @media (max-width: 767px) { .m-video-swiper__slide-img { margin: 0 auto; } } .m-video-swiper__slide-img::before { content: ''; display: block; padding-top: 53.0769%; } .m-video-swiper__slide-img-play { width: 50px; height: 50px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .m-video-swiper__slide-img-play img { width: 100%; height: 100%; } .m-video-swiper__slide-img-play .a-circle-frame { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .m-video-swiper__slide-img-play-icon { width: 30px; height: 30px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .m-video-swiper__slide-text { font-size: 18px; font-weight: 400; letter-spacing: 1.5px; line-height: 1.5; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-left: 16px; letter-spacing: 1px; font-weight: 600; color: #67676e; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: color .2s 0s ease; transition: color .2s 0s ease; } .-lang-en .m-video-swiper__slide-text { letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .m-video-swiper__slide-text { letter-spacing: normal; } @media (max-width: 1199px) { .m-video-swiper__slide-text { font-size: 16px; letter-spacing: 0px; } .-lang-en .m-video-swiper__slide-text { line-height: 1.38; } .-en .m-video-swiper__slide-text { letter-spacing: normal; } } @media (max-width: 767px) { .m-video-swiper__slide-text { font-size: 15px; } .-lang-en .m-video-swiper__slide-text { line-height: 1.33; } } @media (max-width: 767px) { .m-video-swiper__slide-text { margin: 8px auto 0; padding-left: 15px; width: 100%; max-width: 160px; } } .m-video-swiper .swiper-controller { margin-top: 20px; } .m-video-swiper .swiper-pagination { position: absolute; width: 100%; margin: 0; } .m-followus { padding-top: 40px; padding-bottom: 62px; } @media (min-width: 768px) { .m-followus .a-topic-page-section-title br { display: none; } } @media (max-width: 1199px) { .m-followus { padding-bottom: 86px; } } @media (max-width: 767px) { .m-followus { padding-bottom: 68px; } } .m-followus__header { position: relative; margin: 0 auto -30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 200px; } .m-followus__header__title { font-size: 32px; font-weight: 700; letter-spacing: 2px; line-height: 1.2; margin: 60px 0 59px; text-align: center; } .-lang-en .m-followus__header__title { line-height: 1.19; letter-spacing: 0.5px; font-family: KlavikaWebBasic, sans-serif; } .-en .m-followus__header__title { font-size: 24px; letter-spacing: 0.5px; } @media (max-width: 1199px) { .m-followus__header__title { font-size: 26px; } .-lang-en .m-followus__header__title { line-height: 1.25; } .-en .m-followus__header__title { font-size: 20px; } } @media (max-width: 767px) { .m-followus__header__title { font-size: 22px; } .-lang-en .m-followus__header__title { font-size: 26px; } } .o-index .m-followus__header__title { color: #6987b9; } .o-income .m-followus__header__title { color: #50beaf; } .o-asia .m-followus__header__title { color: #b94b9b; } .o-tw-multi-asset .m-followus__header__title { color: #1e9bd7; } .o-investing .m-followus__header__title { color: #b1c425; } .o-mitigation .m-followus__header__title { color: #ff9933; } .o-tw-esg .m-followus__header__title { color: #b1c425; } body.-en .m-followus__header__title { text-transform: uppercase; } .m-followus__header__deco { position: absolute; font-size: 180px; color: #f0f0f0; z-index: -1; letter-spacing: -6px; line-height: 1.11; font-family: KlavikaWebBasic, sans-serif; font-weight: 700; white-space: nowrap; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .o-tw-multi-asset .m-followus__header__deco { color: #34a6dc; } @media (max-width: 1199px) { .m-followus__header__deco { font-size: 120px; letter-spacing: -4.2px; } } @media (max-width: 767px) { .m-followus__header__deco { font-size: 70px; letter-spacing: -2.8px; } } .m-followus__bottom { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-pack: distribute; justify-content: space-around; width: 500px; margin: 0 auto; } @media (max-width: 479px) { .m-followus__bottom { width: 330px; } } .m-followus__bottom__socialIcon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .m-followus__bottom__socialIcon-qrcode { width: 100px; height: 100px; } .m-followus__bottom__socialIcon-bottom { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 20px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; } .m-followus__bottom__socialIcon-bottom-content { color: gray; font-size: 18px; font-weight: 700; letter-spacing: 1px; line-height: 1.5; margin-left: 10px; } .-lang-en .m-followus__bottom__socialIcon-bottom-content { font-family: KlavikaWebBasic, sans-serif; font-size: 24px; line-height: 0.9; letter-spacing: normal; } .-en .m-followus__bottom__socialIcon-bottom-content { line-height: 1.2; letter-spacing: normal; } @media (max-width: 1199px) { .m-followus__bottom__socialIcon-bottom-content { font-size: 15px; } .-lang-en .m-followus__bottom__socialIcon-bottom-content { font-size: 18px; line-height: 1.2; } } .o-footer { background: #fff; position: relative; } .o-footer__main { background-color: #f0f0f0; padding: 40px 0; color: #67676e; } @media (max-width: 1199px) { .o-footer__main { padding: 47px 0; } } @media (max-width: 767px) { .o-footer__main { padding: 30px 0 20px; } } @media (min-width: 1200px) { .o-footer__main .container { max-width: 1440px; } } html.-lang-en .o-footer__main { color: #67676e; } .o-footer__desc { font-size: 14px; line-height: 1.5; letter-spacing: normal; font-weight: 400; margin-bottom: 20px; } .-lang-en .o-footer__desc { font-family: KlavikaWebBasic, sans-serif; } @media (max-width: 767px) { .-lang-en .o-footer__desc { font-size: 12px; } } .o-footer__desc.-top { padding-bottom: 20px; border-bottom: 1px solid #c0c0c0; margin-bottom: 20px; } @media (max-width: 1199px) { .o-footer__desc { margin-bottom: 15px; } } html.-lang-en .o-footer__desc { font-family: KlavikaWebBasic, sans-serif; margin-bottom: 30px; } @media (max-width: 1199px) { html.-lang-en .o-footer__desc { font-size: 12px; } } @media (max-width: 1199px) { html.-lang-en .o-footer__desc { margin-bottom: 15px; } } body.-en .o-footer__desc { font-family: KlavikaWebBasic, sans-serif; margin-bottom: 30px; } @media (max-width: 1199px) { body.-en .o-footer__desc { margin-bottom: 15px; } } .o-footer__desc br { content: ''; display: block; margin-top: 10px; } html.-lang-en .o-footer__desc br, body.-en .o-footer__desc br { margin-top: 20px; } .o-footer__desc hr { border-top: 1px solid #d6d6d6; margin: 20px 0; } @media (max-width: 1199px) { .o-footer__desc hr { margin: 15px 0; } } .o-footer__desc b { font-weight: 700; } .o-index .o-footer__desc .-theme-color { color: #6987b9; } .o-income .o-footer__desc .-theme-color { color: #50beaf; } .o-asia .o-footer__desc .-theme-color { color: #b94b9b; } .o-tw-multi-asset .o-footer__desc .-theme-color { color: #1e9bd7; } .o-investing .o-footer__desc .-theme-color { color: #b1c425; } .o-mitigation .o-footer__desc .-theme-color { color: #ff9933; } .o-tw-esg .o-footer__desc .-theme-color { color: #b1c425; } .o-footer__desc a { position: relative; } .o-footer__desc a::after { content: ''; display: block; width: 100%; height: 1px; background-color: #67676e; position: absolute; bottom: 1px; left: 0; } .o-footer__copyright { font-size: 12px; font-weight: 400; line-height: 1.8; } .-lang-en .o-footer__copyright { line-height: 1.5; letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .o-footer__copyright { font-size: 13px; line-height: 1.2; letter-spacing: normal; } .o-header { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; border-bottom: 1px solid #f0f0f0; background-color: #fff; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; height: 70px; } @media (max-width: 1199px) { .o-header { height: 70px; } } @media (max-width: 767px) { .o-header { height: 55px; } } html.-lang-en .o-header, body.-en .o-header { height: 107px; } @media (max-width: 767px) { html.-lang-en .o-header, body.-en .o-header { height: 75px; } } body:not(.o-index) .o-header:not(.-active) { border: none; background-color: transparent; } body:not(.o-index) .o-header:not(.-active) .o-header__lang-switcher { color: #fff; border-left-color: transparent; } .o-header__left { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; position: relative; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .o-header__progress { width: 100%; height: 4px; position: absolute; left: 0; top: 0; z-index: -1; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left center; transform-origin: left center; -webkit-transition: opacity 0.3s ease, -webkit-transform 0.6s linear; transition: opacity 0.3s ease, -webkit-transform 0.6s linear; transition: transform 0.6s linear, opacity 0.3s ease; transition: transform 0.6s linear, opacity 0.3s ease, -webkit-transform 0.6s linear; display: none; } .o-index .o-header__progress { background-color: #6987b9; } .o-income .o-header__progress { background-color: #50beaf; } .o-asia .o-header__progress { background-color: #b94b9b; } .o-tw-multi-asset .o-header__progress { background-color: #1e9bd7; } .o-investing .o-header__progress { background-color: #b1c425; } .o-mitigation .o-header__progress { background-color: #ff9933; } .o-tw-esg .o-header__progress { background-color: #b1c425; } body:not(.o-index) .o-header__progress { display: block; } .o-header__progress:not(.-active) { opacity: 0; } .o-header__logo { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; margin: 0 40px; width: 102px; -webkit-transition: width 0.6s ease, opacity 0.3s ease; transition: width 0.6s ease, opacity 0.3s ease; position: relative; } @media (max-width: 767px) { .o-header__logo { margin: 0 17px; } } .o-header__logo.-is-white-at-top .o-header__logo-img.-black { opacity: 0; } .o-header__logo.-is-white-at-top .o-header__logo-img.-white { opacity: 1; } .o-header__logo-img { height: 36px; } html.-lang-en .o-header__logo-img, body.-en .o-header__logo-img { height: 52px; } @media (max-width: 767px) { html.-lang-en .o-header__logo-img, body.-en .o-header__logo-img { height: 37px; } } .o-header.-active .o-header__logo-img.-black { opacity: 1; } .o-header__logo-img.-white { position: absolute; left: 0; top: 0; opacity: 0; } .o-header.-active .o-header__logo-img.-white { opacity: 0; } html.-lang-en .o-header__logo, body.-en .o-header__logo { -ms-flex-negative: 0; flex-shrink: 0; margin: 0 35px 0 17px; width: 190px; } .o-header__anchor-list { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; } .o-header__lang-switcher { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; -ms-flex-item-align: stretch; align-self: stretch; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-left: 1px solid #f0f0f0; padding: 0 24px; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; color: #67676e; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } body.-en .o-header__lang-switcher { font-family: Noto Sans TC, sans-serif; } body.-zh .o-header__lang-switcher { font-family: KlavikaWebBasic, sans-serif; } .o-income-banner { position: relative; min-height: 630px; overflow: hidden; -webkit-transition: none !important; transition: none !important; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media (max-width: 1199px) { .o-income-banner { min-height: 780px; } } @media (max-width: 767px) { .o-income-banner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; max-height: 650px; min-height: 480px; background-image: none !important; height: auto; max-height: inherit; min-height: inherit; } } .o-income-banner__bg { position: absolute; left: 0; top: 0; height: 100%; width: 100%; } @media (max-width: 767px) { .o-income-banner__bg { -webkit-transform-origin: center center; transform-origin: center center; } } .-aos-active .o-income-banner__bg { -webkit-transform: scale(1); transform: scale(1); } .o-income-banner__bg:before { content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.6)), color-stop(85%, rgba(0, 0, 0, 0))); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 85%); } @media (max-width: 767px) { .o-income-banner__bg:before { height: 300px; } } .o-income-banner__bg-img { width: 100%; height: 100%; background-position: center center; background-size: cover; background-repeat: no-repeat; } @media (max-width: 767px) { .o-income-banner__bg-img { width: 100%; height: 300px; } } .o-income-banner__top { width: 100%; height: 210px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; padding-bottom: 22px; position: relative; } @media (max-width: 1199px) { .o-income-banner__top { height: 160px; } } @media (max-width: 767px) { .o-income-banner__top { height: 110px; padding-bottom: 5px; -ms-flex-negative: 0; flex-shrink: 0; } } .o-income-banner__top:before { content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .o-index .o-income-banner__top:before { background-color: #6987b9; } .o-income .o-income-banner__top:before { background-color: #50beaf; } .o-asia .o-income-banner__top:before { background-color: #b94b9b; } .o-tw-multi-asset .o-income-banner__top:before { background-color: #1e9bd7; } .o-investing .o-income-banner__top:before { background-color: #b1c425; } .o-mitigation .o-income-banner__top:before { background-color: #ff9933; } .o-tw-esg .o-income-banner__top:before { background-color: #b1c425; } .o-income-banner__en-title { font-size: 16px; line-height: 1.5; font-weight: 700; letter-spacing: 2.6px; color: #fff; font-family: KlavikaWebBasic, sans-serif; } @media (max-width: 1199px) { .o-income-banner__en-title { font-size: 12px; } } .o-income-banner__bottom { width: 100%; position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; } @media (max-width: 767px) { .o-income-banner__bottom { -webkit-box-flex: 0; -ms-flex: none; flex: none; height: auto; } } .o-income-banner__bottom:after { content: ''; background-position: center; background-size: cover; background-repeat: no-repeat; position: absolute; -webkit-transform: translateY(-30px); transform: translateY(-30px); opacity: 0; } .-aos-active .o-income-banner__bottom:after { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.4s 1600ms ease, -webkit-transform 0.6s 1600ms ease; transition: opacity 0.4s 1600ms ease, -webkit-transform 0.6s 1600ms ease; transition: transform 0.6s 1600ms ease, opacity 0.4s 1600ms ease; transition: transform 0.6s 1600ms ease, opacity 0.4s 1600ms ease, -webkit-transform 0.6s 1600ms ease; opacity: 1; } .o-income .o-income-banner__bottom:after { width: 685px; height: 654px; background-image: url(../../src/img/income/banner-deco.png); right: 0; top: -111px; } @media (max-width: 1199px) { .o-income .o-income-banner__bottom:after { width: 474px; height: 452.54891px; } } @media (max-width: 767px) { .o-income .o-income-banner__bottom:after { width: 216px; height: 206.22482px; } } @media (max-width: 1199px) { .o-income .o-income-banner__bottom:after { top: -77px; right: -130px; } } @media (max-width: 767px) { .o-income .o-income-banner__bottom:after { top: -35px; right: -93px; } } .o-asia .o-income-banner__bottom:after { width: 488px; height: 659px; background-image: url(../../src/img/asia/banner-asia@2x.png); right: 0; top: -145px; } @media (max-width: 1199px) { .o-asia .o-income-banner__bottom:after { width: 276px; height: 372.71311px; } } @media (max-width: 767px) { .o-asia .o-income-banner__bottom:after { width: 169px; height: 228.21926px; } } @media (max-width: 1199px) { .o-asia .o-income-banner__bottom:after { top: -82px; right: -25px; } } @media (max-width: 767px) { .o-asia .o-income-banner__bottom:after { top: -50px; right: -6px; } } .o-tw-multi-asset .o-income-banner__bottom:after { width: 451px; height: 650px; background-image: url(../../src/img/tw-multi-asset/banner-deco.svg); right: 0; top: -143px; } @media (max-width: 1199px) { .o-tw-multi-asset .o-income-banner__bottom:after { width: 288px; height: 415.07761px; } } @media (max-width: 767px) { .o-tw-multi-asset .o-income-banner__bottom:after { width: 162px; height: 233.48115px; } } @media (max-width: 1199px) { .o-tw-multi-asset .o-income-banner__bottom:after { top: -91px; right: -25px; } } @media (max-width: 767px) { .o-tw-multi-asset .o-income-banner__bottom:after { top: -51px; right: -6px; } } .o-investing .o-income-banner__bottom:after { width: 410px; height: 705px; background-image: url(../../src/img/investing/banner-pattern.png); background-position: left; right: 0; top: -140px; } @media (max-width: 1199px) { .o-investing .o-income-banner__bottom:after { width: 288px; height: 495.21951px; } } @media (max-width: 767px) { .o-investing .o-income-banner__bottom:after { width: 162px; height: 278.56098px; } } @media (max-width: 1199px) { .o-investing .o-income-banner__bottom:after { top: -98px; right: -25px; } } @media (max-width: 767px) { .o-investing .o-income-banner__bottom:after { top: -55px; right: -6px; } } .o-tw-esg .o-income-banner__bottom:after { width: 410px; height: 705px; background-image: url(../../src/img/tw-esg/banner-pattern.png); background-position: left; right: 0; top: -140px; } @media (max-width: 1199px) { .o-tw-esg .o-income-banner__bottom:after { width: 288px; height: 495.21951px; } } @media (max-width: 767px) { .o-tw-esg .o-income-banner__bottom:after { width: 162px; height: 278.56098px; } } @media (max-width: 1199px) { .o-tw-esg .o-income-banner__bottom:after { top: -98px; right: -25px; } } @media (max-width: 767px) { .o-tw-esg .o-income-banner__bottom:after { top: -55px; right: -6px; } } .o-income-banner__bottom > .container { position: relative; z-index: 1; } .o-income-banner__title { font-size: 72px; font-weight: 700; letter-spacing: 2px; line-height: 1.2; margin: 20px 0 20px; max-width: 690px; color: #fff; } .-lang-en .o-income-banner__title { line-height: 1; letter-spacing: 1.5px; font-family: KlavikaWebBasic, sans-serif; } .-en .o-income-banner__title { line-height: 1; letter-spacing: 1.5px; } @media (max-width: 1199px) { .o-income-banner__title { font-size: 46px; } .-lang-en .o-income-banner__title { letter-spacing: 1px; } .-en .o-income-banner__title { letter-spacing: 0.5px; } } @media (max-width: 767px) { .o-income-banner__title { font-size: 32px; } } .o-tw-esg .o-income-banner__title { max-width: 850px; } @media (max-width: 1199px) { .o-income-banner__title { max-width: 500px; margin: 10px 0; } } @media (max-width: 767px) { .o-income-banner__title { max-height: 152px; overflow: hidden; } } @media (max-width: 767px) and (max-width: 767px) { .o-income-banner__title { min-height: 242px; max-height: 270px; } } html.-lang-en .o-income-banner__title, body.-en .o-income-banner__title { letter-spacing: normal; text-transform: uppercase; max-width: 962px; } @media (max-width: 1199px) { html.-lang-en .o-income-banner__title, body.-en .o-income-banner__title { max-width: 440px; } } @media (max-width: 767px) { html.-lang-en .o-income-banner__title, body.-en .o-income-banner__title { max-width: 238px; max-height: 282px; } } @media (min-width: 1200px) { .o-income-banner__title br { display: block; content: ''; margin-top: 8px; } } .o-income-banner__content-wrapper { z-index: 2; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media (max-width: 767px) { .o-income-banner__content-wrapper { margin: 8px; } } .o-income-banner__content-wrapper > .container { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media (max-width: 767px) { .o-income-banner__content-wrapper > .container { diplay: block; background-color: #fff; border: solid 1px #f0f0f0; -webkit-box-flex: 0; -ms-flex: 0; flex: 0; padding: 14px 13px 36px; margin-top: auto; margin-bottom: 44px; } } .o-income-banner__desc { font-size: 18px; font-weight: 400; letter-spacing: 1.5px; line-height: 1.5; color: #fff; margin-bottom: 37px; max-width: 690px; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; } .-lang-en .o-income-banner__desc { letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .o-income-banner__desc { letter-spacing: normal; } @media (max-width: 1199px) { .o-income-banner__desc { font-size: 16px; letter-spacing: 0px; } .-lang-en .o-income-banner__desc { line-height: 1.38; } .-en .o-income-banner__desc { letter-spacing: normal; } } @media (max-width: 767px) { .o-income-banner__desc { font-size: 15px; } .-lang-en .o-income-banner__desc { line-height: 1.33; } } .o-tw-esg .o-income-banner__desc { max-width: 850px; } @media (max-width: 1199px) { .o-income-banner__desc { max-width: 500px; margin-bottom: 30px; } } @media (max-width: 767px) { .o-income-banner__desc { margin-bottom: 10px; color: #67676e; -webkit-box-flex: unset; -ms-flex: unset; flex: unset; } } @media (min-width: 1200px) { html.-lang-en .o-income-banner__desc { padding-left: 30px; } } @media (min-width: 768px) { html.-lang-en .o-income-banner__desc { padding-left: 30px; } } .o-income-banner__note { font-size: 12px; font-weight: 400; line-height: 1.8; color: #fff; max-width: 690px; font-weight: 400; } .-lang-en .o-income-banner__note { line-height: 1.5; letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .o-income-banner__note { font-size: 13px; line-height: 1.2; letter-spacing: normal; } @media (max-width: 1199px) { .o-income-banner__note { max-width: 500px; } } @media (max-width: 767px) { .o-income-banner__note { margin-bottom: 30px; color: #67676e; } } .o-income-banner__btn-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 15px 0; } .o-income-banner__btn-wrapper .a-round-btn { margin-bottom: 17px; } @media (max-width: 1199px) { .o-income-banner__btn-wrapper .a-round-btn { margin-bottom: 28px; } } @media (max-width: 767px) { .o-income-banner__btn-wrapper .a-round-btn { margin-bottom: 0; } } @media (max-width: 767px) { .o-income-banner__btn-wrapper .a-tripple-arrow-down { display: none; } } @media (max-width: 767px) { .o-income-banner__btn-wrapper { position: initial; -webkit-transform: none; transform: none; margin-top: auto; } } .o-income-reason { text-align: center; padding-top: 40px; position: relative; padding-bottom: 60px; } body.-en .o-income-reason { padding-top: 53px; } @media (max-width: 767px) { body.-en .o-income-reason { padding-top: 40px; } } @media (max-width: 1199px) { .o-income-reason { padding-bottom: 60px; } } @media (max-width: 767px) { .o-income-reason { margin-top: -10px; padding-top: 20px; padding-bottom: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } @media (min-width: 768px) { .o-income-reason:before { content: ''; width: 50%; right: 50%; height: 100%; background: #fdfdfd; display: block; top: 0; position: absolute; z-index: -1; } } .o-income-reason__list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; padding: 44px 0 0px; } @media (max-width: 1199px) { .o-income-reason__list { padding: 44px 0 0px; } } @media (max-width: 767px) { .o-income-reason__list { padding: 17px 0 0px; display: block; } } .o-income-reason__list-item { max-width: 240px; -webkit-box-flex: 1; -ms-flex: 1 1 33.33%; flex: 1 1 33.33%; margin: auto; } @media (min-width: 1200px) { .-lang-en .o-income-reason__list-item { max-width: 300px; } } @media (max-width: 1199px) { .o-income-reason__list-item { max-width: 200px; } } @media (max-width: 767px) { .o-income-reason__list-item { width: 100%; max-width: 360px; margin: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .o-income-reason__list-item:not(:last-child) { margin-bottom: 10px; } } html.-lang-en .o-income-reason__list-item { margin: 0 auto auto auto; } @media (max-width: 767px) { html.-lang-en .o-income-reason__list-item { margin-top: 10px; } } .o-income-reason__list-item img { width: 100%; margin-bottom: 34px; } @media (max-width: 1199px) { .o-income-reason__list-item img { max-width: 160px; margin-bottom: 10px; } } @media (max-width: 767px) { .o-income-reason__list-item img { margin-right: 20px; max-width: 140px; margin-bottom: 0; } } .o-income-reason__list-item svg { width: 100%; max-height: 240px; margin-bottom: 34px; } @media (max-width: 767px) { .o-income-reason__list-item svg { height: auto; } } @media (max-width: 1199px) { .o-income-reason__list-item svg { max-width: 160px; margin-bottom: 10px; } } @media (max-width: 767px) { .o-income-reason__list-item svg { margin-right: 20px; max-width: 140px; margin-bottom: 0; } } body.-windows.-chrome .o-income-reason__list-item svg#bq-1 #grass-front path, body.-mac .o-income-reason__list-item svg#bq-1 #grass-front path, body.-windows.-chrome .o-income-reason__list-item svg#bq-1 #grass-front line, body.-mac .o-income-reason__list-item svg#bq-1 #grass-front line, body.-windows.-chrome .o-income-reason__list-item svg#bq-1 #grass-back path, body.-mac .o-income-reason__list-item svg#bq-1 #grass-back path, body.-windows.-chrome .o-income-reason__list-item svg#bq-1 #grass-back line, body.-mac .o-income-reason__list-item svg#bq-1 #grass-back line { stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; } body.-windows.-chrome .o-income-reason__list-item svg#bq-3 .linecap_round, body.-mac .o-income-reason__list-item svg#bq-3 .linecap_round { stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; } .o-income-reason__list-item-desc { text-align: center; font-size: 24px; font-weight: 700; letter-spacing: 1px; line-height: 1.5; } .-lang-en .o-income-reason__list-item-desc { line-height: 1.25; letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .o-income-reason__list-item-desc { font-size: 22px; letter-spacing: 0.5px; line-height: 1; } @media (max-width: 1199px) { .o-income-reason__list-item-desc { font-size: 20px; } .-lang-en .o-income-reason__list-item-desc { font-size: 24px; line-height: 1.2; } .-en .o-income-reason__list-item-desc { font-size: 18px; } } @media (max-width: 767px) { .o-income-reason__list-item-desc { font-size: 18px; } } html.-lang-en .o-income-reason__list-item-desc { font-size: 22px; font-weight: 700; letter-spacing: 0px; line-height: 1.5; } .-lang-en html.-lang-en .o-income-reason__list-item-desc { font-size: 24px; line-height: 1.25; letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en html.-lang-en .o-income-reason__list-item-desc { font-size: 20px; line-height: 1.2; letter-spacing: normal; } @media (max-width: 1199px) { html.-lang-en .o-income-reason__list-item-desc { font-size: 18px; } .-lang-en html.-lang-en .o-income-reason__list-item-desc { line-height: 1.2; } .-en html.-lang-en .o-income-reason__list-item-desc { font-size: 16px; } } @media (max-width: 767px) { .o-income-reason__list-item-desc { text-align: left; width: calc(100% - 140px); } } .o-income-strength { position: relative; padding-bottom: 20px; overflow-x: hidden; } @media (min-width: 768px) { .o-income-strength { margin-top: -60px; padding-top: 100px; } } @media (min-width: 768px) { .o-income-strength:before { content: ''; width: 50%; left: 50%; height: 100%; background: #fdfdfd; display: block; top: 0; position: absolute; z-index: -1; } } .o-income-strength__bg-deco { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .o-income-strength__bg-deco img { position: absolute; } .o-income-strength__bg-deco img:nth-child(1) { right: 9px; top: 23px; } @media (max-width: 1199px) { .o-income-strength__bg-deco img:nth-child(1) { height: 455px; width: auto; right: 0; top: 155px; } } @media (max-width: 767px) { .o-income-strength__bg-deco img:nth-child(1) { height: 320px; right: -100px; top: 16px; } } .o-income-strength__bg-deco img:nth-child(2) { right: 576px; bottom: 70px; } @media (max-width: 1199px) { .o-income-strength__bg-deco img:nth-child(2) { height: 122px; right: 50%; bottom: 137px; } } @media (max-width: 767px) { .o-income-strength__bg-deco img:nth-child(2) { height: 86px; right: 103px; } } .o-income-strength__bg-deco img:nth-child(3) { right: 369px; bottom: 70px; } @media (max-width: 1199px) { .o-income-strength__bg-deco img:nth-child(3) { height: 122px; right: calc(50% - 122px); bottom: 137px; } } @media (max-width: 767px) { .o-income-strength__bg-deco img:nth-child(3) { height: 86px; right: 16px; } } body.-en .o-income-strength .a-topic-page-section-title { max-width: 996px; margin: 0 auto; } .o-income-strength__subtitle { display: none; text-align: center; margin: 5px 0 24px; font-size: 32px; font-weight: 700; letter-spacing: 2px; line-height: 1.2; font-weight: 700; } .-lang-en .o-income-strength__subtitle { line-height: 1.19; letter-spacing: 0.5px; font-family: KlavikaWebBasic, sans-serif; } .-en .o-income-strength__subtitle { font-size: 24px; letter-spacing: 0.5px; } @media (max-width: 1199px) { .o-income-strength__subtitle { font-size: 26px; } .-lang-en .o-income-strength__subtitle { line-height: 1.25; } .-en .o-income-strength__subtitle { font-size: 20px; } } @media (max-width: 767px) { .o-income-strength__subtitle { font-size: 22px; } .-lang-en .o-income-strength__subtitle { font-size: 26px; } } html.-lang-en .o-income-strength__subtitle { text-transform: lowercase; font-size: 24px; font-weight: 400; line-height: 1.5; letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; color: #67676e; } @media (min-width: 1200px) { html.-lang-en .o-income-strength__subtitle { display: block; width: 100%; max-width: 1003px; margin: 5px auto 55px auto; } } @media (max-width: 1199px) { html.-lang-en .o-income-strength__subtitle { line-height: 1.2; margin: 13px auto 55px auto; font-size: 18px; } } @media (max-width: 1199px) { .o-income-strength__subtitle { display: block; margin-top: 24px; } } .o-income-strength__center { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 37px; } @media (max-width: 1199px) { .o-income-strength__center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .o-income-strength__center-line { width: 217px; -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; overflow: hidden; } @media (max-width: 1199px) { .o-income-strength__center-line { width: 120px; -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; } .o-income-strength__center-line svg { width: 100%; } } .o-income-strength__center-line.-left .rotate-right-svg { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .o-income-strength__center-line.-left svg { -webkit-animation: scaleLineLeft 4s ease infinite; animation: scaleLineLeft 4s ease infinite; -webkit-transform-origin: right center; transform-origin: right center; } @media (max-width: 1199px) { .o-income-strength__center-line.-left svg#line-left { display: none; } } .o-income-strength__center-line.-left svg#line-right { -webkit-animation-name: scaleLineRight; animation-name: scaleLineRight; } @media (min-width: 1200px) { .o-income-strength__center-line.-left svg#line-right { display: none; } } .o-income-strength__center-line.-right { text-align: right; } .o-income-strength__center-line.-right svg { -webkit-animation: scaleLineRight 4s ease infinite; animation: scaleLineRight 4s ease infinite; -webkit-transform-origin: left center; transform-origin: left center; } .o-income-strength__center-box { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (max-width: 1199px) { .o-income-strength__center-box { -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; } } .o-income-strength__center-box-inner { position: relative; } .o-income-strength__center-text { font-size: 32px; font-weight: 700; letter-spacing: 2px; line-height: 1.2; position: absolute; top: calc(50% - 20px); white-space: nowrap; } .-lang-en .o-income-strength__center-text { line-height: 1.19; letter-spacing: 0.5px; font-family: KlavikaWebBasic, sans-serif; } .-en .o-income-strength__center-text { font-size: 24px; letter-spacing: 0.5px; } @media (max-width: 1199px) { .o-income-strength__center-text { font-size: 26px; } .-lang-en .o-income-strength__center-text { line-height: 1.25; } .-en .o-income-strength__center-text { font-size: 20px; } } @media (max-width: 767px) { .o-income-strength__center-text { font-size: 22px; } .-lang-en .o-income-strength__center-text { font-size: 26px; } } @media (max-width: 1199px) { .o-income-strength__center-text { display: none; } } .o-income-strength__center-text.-left { right: 100%; } .o-income-strength__center-text.-right { left: 100%; } body.-en .o-income-strength__center-text.-right { width: 354px; white-space: normal; } .o-income-strength__center-fifty { position: relative; } .o-income-strength__center-fifty:after { content: '+'; display: block; font-size: 100px; font-family: KlavikaWebBasic, sans-serif; font-weight: 700; line-height: 1; letter-spacing: normal; position: absolute; top: 0; right: 12px; } @media (max-width: 1199px) { .o-income-strength__center-fifty:after { font-size: 70px; } } @media (max-width: 767px) { .o-income-strength__center-fifty:after { font-size: 45px; top: 4px; right: 9px; } } .o-income-strength__center svg#line-50 { -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; } @media (max-width: 1199px) { .o-income-strength__center svg#line-50 { max-width: 275px; height: auto; } } @media (max-width: 767px) { .o-income-strength__center svg#line-50 { max-width: 204px; } } @-webkit-keyframes drawStrokeFifty { 0% { stroke-dashoffset: 480; } 100% { stroke-dashoffset: -480; } } @keyframes drawStrokeFifty { 0% { stroke-dashoffset: 480; } 100% { stroke-dashoffset: -480; } } body:not(.-ie) .o-income-strength__center svg#line-50 #yellow-line { stroke-dasharray: 480; stroke-dashoffset: 480; -webkit-animation: drawStrokeFifty 4s ease-out infinite; animation: drawStrokeFifty 4s ease-out infinite; } .o-income-strength__center svg tspan { font-family: KlavikaWebBasic, sans-serif; } .o-income-strength__desc { font-size: 18px; font-weight: 400; letter-spacing: 1.5px; line-height: 1.5; font-weight: 500; color: #67676e; max-width: 792px; text-align: center; margin: 20px auto 30px; } .-lang-en .o-income-strength__desc { letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .o-income-strength__desc { letter-spacing: normal; } @media (max-width: 1199px) { .o-income-strength__desc { font-size: 16px; letter-spacing: 0px; } .-lang-en .o-income-strength__desc { line-height: 1.38; } .-en .o-income-strength__desc { letter-spacing: normal; } } @media (max-width: 767px) { .o-income-strength__desc { font-size: 15px; } .-lang-en .o-income-strength__desc { line-height: 1.33; } } html.-lang-en .o-income-strength__desc { max-width: 884px; } @media (max-width: 1199px) { html.-lang-en .o-income-strength__desc { text-align: left; } } body.-en .o-income-strength__desc { text-align: left; } @media (max-width: 1199px) { .o-income-strength__desc { margin: 26px auto 30px; } } @media (max-width: 767px) { .o-income-strength__desc { margin: 24px auto 30px; } } .o-income-strength__desc sub { vertical-align: super; display: inline-block; -webkit-transform: scale(0.5); transform: scale(0.5); line-height: 0; } .o-income-strength__note { font-family: KlavikaWebBasic, sans-serif; font-size: 14px; line-height: 1.5; letter-spacing: normal; font-weight: 400; text-align: center; color: #67676e; margin-bottom: 300px; } .-lang-en .o-income-strength__note { font-family: KlavikaWebBasic, sans-serif; } @media (max-width: 767px) { .-lang-en .o-income-strength__note { font-size: 12px; } } @media (max-width: 1199px) { .o-income-strength__note { text-align: left; } } @media (max-width: 767px) { .o-income-strength__note { margin-bottom: 260px; } } .o-income-strength__note sub { vertical-align: super; display: inline-block; -webkit-transform: scale(0.5); transform: scale(0.5); } .o-income-strategy { position: relative; padding: 80px 0 73px; overflow: hidden; } @media (max-width: 767px) { html.-lang-en .o-income-strategy { padding: 60px 0 73px; } } .o-income-strategy:after { content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0.8; z-index: 0; } .o-index .o-income-strategy:after { background-color: #6987b9; } .o-income .o-income-strategy:after { background-color: #50beaf; } .o-asia .o-income-strategy:after { background-color: #b94b9b; } .o-tw-multi-asset .o-income-strategy:after { background-color: #1e9bd7; } .o-investing .o-income-strategy:after { background-color: #b1c425; } .o-mitigation .o-income-strategy:after { background-color: #ff9933; } .o-tw-esg .o-income-strategy:after { background-color: #b1c425; } .o-asia .o-income-strategy:after { opacity: 0.94; } .o-income-strategy:before { content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; } .o-index .o-income-strategy:before { background-color: #6987b9; } .o-income .o-income-strategy:before { background-color: #50beaf; } .o-asia .o-income-strategy:before { background-color: #b94b9b; } .o-tw-multi-asset .o-income-strategy:before { background-color: #1e9bd7; } .o-investing .o-income-strategy:before { background-color: #b1c425; } .o-mitigation .o-income-strategy:before { background-color: #ff9933; } .o-tw-esg .o-income-strategy:before { background-color: #b1c425; } .o-income-strategy__bg-deco { position: absolute; z-index: 1; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .o-income-strategy__bg-deco:first-child { left: 0; top: 100px; } @media (max-width: 1199px) { .o-income-strategy__bg-deco:first-child { height: 207px; top: 100px; } } @media (max-width: 767px) { .o-income-strategy__bg-deco:first-child { height: 146px; } } .o-income-strategy__bg-deco:nth-child(2) { right: 0; top: 118px; margin: 0 auto 2px; } @media (max-width: 1199px) { .o-income-strategy__bg-deco:nth-child(2) { height: 200px; top: 138px; right: -80px; } } @media (max-width: 767px) { .o-income-strategy__bg-deco:nth-child(2) { height: 140px; top: 124px; right: -75px; } } .o-income-strategy__bg-deco img { height: 100%; } .o-income-strategy > .container { position: relative; z-index: 1; } .o-income-strategy__header { position: relative; margin: 0 auto -30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 200px; } @media (max-width: 1199px) { .o-income-strategy__header { margin: 0 auto 2px; height: 132px; } } @media (max-width: 767px) { .o-income-strategy__header { height: 100px; } } .o-income-strategy__header-deco { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 180px; color: #69cbbd; z-index: -1; letter-spacing: -6px; line-height: 1.11; font-family: KlavikaWebBasic, sans-serif; font-weight: 700; white-space: nowrap; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .o-tw-multi-asset .o-income-strategy__header-deco { color: #34a6dc; } @media (max-width: 1199px) { .o-income-strategy__header-deco { font-size: 120px; letter-spacing: -4.2px; } } @media (max-width: 767px) { .o-income-strategy__header-deco { font-size: 80px; letter-spacing: -2.8px; } } .o-asia .o-income-strategy__header-deco { color: #c65ca9; } .o-income-strategy__header-text { font-size: 18px; font-weight: 700; letter-spacing: 1px; line-height: 1.5; text-align: center; color: #ffffff; } .-lang-en .o-income-strategy__header-text { font-family: KlavikaWebBasic, sans-serif; font-size: 24px; line-height: 0.9; letter-spacing: normal; } .-en .o-income-strategy__header-text { line-height: 1.2; letter-spacing: normal; } @media (max-width: 1199px) { .o-income-strategy__header-text { font-size: 15px; } .-lang-en .o-income-strategy__header-text { font-size: 18px; line-height: 1.2; } } @media (min-width: 768px) { .o-income-strategy__header-text :first-child { margin-right: 10px; } } @media (max-width: 767px) { .o-income-strategy__header-text :nth-child(n) { display: block; } } html.-lang-en .o-income-strategy__header-text { font-size: 18px; font-weight: 700; letter-spacing: 1px; line-height: 1.5; text-transform: uppercase; } .-lang-en html.-lang-en .o-income-strategy__header-text { font-family: KlavikaWebBasic, sans-serif; font-size: 24px; line-height: 0.9; letter-spacing: normal; } .-en html.-lang-en .o-income-strategy__header-text { line-height: 1.2; letter-spacing: normal; } @media (max-width: 1199px) { html.-lang-en .o-income-strategy__header-text { font-size: 15px; } .-lang-en html.-lang-en .o-income-strategy__header-text { font-size: 18px; line-height: 1.2; } } @media (max-width: 1199px) { html.-lang-en .o-income-strategy__header-text { max-width: 350px; margin: 0 auto; } } body.-en .o-income-strategy__header-text { font-size: 18px; font-weight: 700; letter-spacing: 1px; line-height: 1.5; text-transform: uppercase; letter-spacing: normal; } .-lang-en body.-en .o-income-strategy__header-text { font-family: KlavikaWebBasic, sans-serif; font-size: 24px; line-height: 0.9; letter-spacing: normal; } .-en body.-en .o-income-strategy__header-text { line-height: 1.2; letter-spacing: normal; } @media (max-width: 1199px) { body.-en .o-income-strategy__header-text { font-size: 15px; } .-lang-en body.-en .o-income-strategy__header-text { font-size: 18px; line-height: 1.2; } } @media (max-width: 1199px) { body.-en .o-income-strategy__header-text { max-width: 350px; margin: 0 auto; } } body.-en .o-income-strategy__header-text :first-child { margin-right: 0; } body.-en .o-income-strategy__header-text :first-child:after { content: " - "; } .o-income-strategy .a-topic-page-section-title { color: #ffffff; } @media (max-width: 767px) { .o-income-strategy .a-topic-page-section-title { margin-top: -45px; padding-top: 65px; } body.-en .o-income-strategy .a-topic-page-section-title { margin-top: -65px; padding-top: 85px; } } html.-lang-en .o-income-strategy .a-topic-page-section-title { margin-top: 6px; } @media (max-width: 1199px) { html.-lang-en .o-income-strategy .a-topic-page-section-title { width: 100%; max-width: 531px; margin: -63px auto 0 auto; padding-top: 44px; } } @media (max-width: 767px) { html.-lang-en .o-income-strategy .a-topic-page-section-title { margin: -36px auto 0 auto; max-width: 300px; } } .o-income-strategy__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-around; max-width: 1120px; margin: 60px auto 0; } @media (max-width: 1199px) { .o-income-strategy__list { margin: 40px auto 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; max-width: 500px; } } @media (max-width: 767px) { .o-income-strategy__list { margin-top: -70px; padding-top: 110px; } } .o-income-strategy__list-item { width: 300px; height: 300px; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; margin-bottom: 27px; -webkit-transition: color 0.3s ease, opacity 0.3s ease; transition: color 0.3s ease, opacity 0.3s ease; } @media (min-width: 1200px) { .o-income-strategy__list-item.-lg { width: 330px; height: 330px; } } @media (min-width: 1200px) { body.-en .o-income-strategy__list-item { padding: 0 40px; } } @media (max-width: 1199px) { .o-income-strategy__list-item { padding: 20px 28px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: auto; border: 2px solid #fff; } } .-pc.o-asia .o-income-strategy__list-item:hover { color: #fff; } .-pc.o-asia .o-income-strategy__list-item:hover:after { opacity: 0.86; background-color: #1e9bd7; } .-pc .o-income-strategy__list-item:hover { opacity: 1; color: #67676e; } .-pc .o-income-strategy__list-item:hover:after { background-color: #fffc8d; } .-pc .o-income-strategy__list-item:hover .o-income-strategy__list-item-circle-default { opacity: 0; } .-pc .o-income-strategy__list-item:hover .o-income-strategy__list-item-circle-hover { opacity: 1; } .-pc .o-income-strategy__list-item:hover .o-income-strategy__list-item-circle-default, .-pc .o-income-strategy__list-item:hover .o-income-strategy__list-item-circle-hover { -webkit-transform: rotateZ(-255deg); transform: rotateZ(-255deg); -webkit-transition: all 0.6s ease; transition: all 0.6s ease; } .-pc .o-income-strategy__list-item:hover .o-income-strategy__list-item-icon-wrapper { opacity: 1; -webkit-transform: translate(0); transform: translate(0); -webkit-transition: all 0.3s 0.6s ease; transition: all 0.3s 0.6s ease; } .o-income-strategy__list-item.-disable { pointer-events: none; opacity: 0.4; } .o-income-strategy__list-item:before, .o-income-strategy__list-item:after { content: ''; position: absolute; width: calc(100% - 30px); height: calc(100% - 30px); top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #fff; border-radius: 50%; -webkit-transition: background-color 0.3s ease; transition: background-color 0.3s ease; z-index: -1; } @media (max-width: 1199px) { .o-income-strategy__list-item:before, .o-income-strategy__list-item:after { width: calc(100% - 10px); height: calc(100% - 8px); border-radius: initial; } } .o-income-strategy__list-item-deco { height: 2px; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .o-income-strategy__list-item-deco:before, .o-income-strategy__list-item-deco:after { content: ''; position: absolute; height: 2px; width: 25px; display: block; } .o-index .o-income-strategy__list-item-deco:before, .o-index .o-income-strategy__list-item-deco:after { background-color: #6987b9; } .o-income .o-income-strategy__list-item-deco:before, .o-income .o-income-strategy__list-item-deco:after { background-color: #50beaf; } .o-asia .o-income-strategy__list-item-deco:before, .o-asia .o-income-strategy__list-item-deco:after { background-color: #b94b9b; } .o-tw-multi-asset .o-income-strategy__list-item-deco:before, .o-tw-multi-asset .o-income-strategy__list-item-deco:after { background-color: #1e9bd7; } .o-investing .o-income-strategy__list-item-deco:before, .o-investing .o-income-strategy__list-item-deco:after { background-color: #b1c425; } .o-mitigation .o-income-strategy__list-item-deco:before, .o-mitigation .o-income-strategy__list-item-deco:after { background-color: #ff9933; } .o-tw-esg .o-income-strategy__list-item-deco:before, .o-tw-esg .o-income-strategy__list-item-deco:after { background-color: #b1c425; } .o-income-strategy__list-item-deco:before { bottom: -2px; left: 30px; } .o-income-strategy__list-item-deco:after { top: -2px; right: 0; width: 74px; } @media (max-width: 767px) { .o-income-strategy__list-item-deco:after { width: 65px; } } .o-income-strategy__list-item-circle-default, .o-income-strategy__list-item-circle-hover { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } @media (min-width: 1200px) { .o-income-strategy__list-item-circle-default, .o-income-strategy__list-item-circle-hover { -webkit-transition: all 0.6s 0.15s ease; transition: all 0.6s 0.15s ease; } } @media (max-width: 1199px) { .o-income-strategy__list-item-circle-default, .o-income-strategy__list-item-circle-hover { display: none; } } @media (max-width: 1199px) { .o-income-strategy__list-item-circle-default { opacity: 0; } } .o-income-strategy__list-item-circle-hover { opacity: 0; } @media (max-width: 1199px) and (min-width: 768px) { .o-income-strategy__list-item-circle-hover { opacity: 1; } } .o-income-strategy__list-item-retangle-border { display: none; } @media (max-width: 767px) { .o-income-strategy__list-item-retangle-border { display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; } } .o-income-strategy__list-item-title { width: 100%; font-size: 32px; font-weight: 700; letter-spacing: 2px; line-height: 1.2; } .-lang-en .o-income-strategy__list-item-title { line-height: 1.19; letter-spacing: 0.5px; font-family: KlavikaWebBasic, sans-serif; } .-en .o-income-strategy__list-item-title { font-size: 24px; letter-spacing: 0.5px; } @media (max-width: 1199px) { .o-income-strategy__list-item-title { font-size: 26px; } .-lang-en .o-income-strategy__list-item-title { line-height: 1.25; } .-en .o-income-strategy__list-item-title { font-size: 20px; } } @media (max-width: 767px) { .o-income-strategy__list-item-title { font-size: 22px; } .-lang-en .o-income-strategy__list-item-title { font-size: 26px; } } html.-lang-en .o-income-strategy__list-item-title { font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; max-width: 208px; margin: 0 auto; text-transform: uppercase; } @media (max-width: 1199px) { html.-lang-en .o-income-strategy__list-item-title { line-height: 1.2; max-width: 100%; } } @media (max-width: 767px) { html.-lang-en .o-income-strategy__list-item-title { font-size: 18px; } } .o-income-strategy__list-item-subtitle { width: 100%; font-size: 18px; font-weight: 700; letter-spacing: 1px; line-height: 1.5; } .-lang-en .o-income-strategy__list-item-subtitle { font-family: KlavikaWebBasic, sans-serif; font-size: 24px; line-height: 0.9; letter-spacing: normal; } .-en .o-income-strategy__list-item-subtitle { line-height: 1.2; letter-spacing: normal; } @media (max-width: 1199px) { .o-income-strategy__list-item-subtitle { font-size: 15px; } .-lang-en .o-income-strategy__list-item-subtitle { font-size: 18px; line-height: 1.2; } } .o-income-strategy__list-item-desc { margin-top: 10px; width: 100%; font-size: 22px; font-weight: 700; letter-spacing: 0px; line-height: 1.5; } .-lang-en .o-income-strategy__list-item-desc { font-size: 24px; line-height: 1.25; letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .o-income-strategy__list-item-desc { font-size: 20px; line-height: 1.2; letter-spacing: normal; } @media (max-width: 1199px) { .o-income-strategy__list-item-desc { font-size: 18px; } .-lang-en .o-income-strategy__list-item-desc { line-height: 1.2; } .-en .o-income-strategy__list-item-desc { font-size: 16px; } } @media (max-width: 767px) { .o-income-strategy__list-item-desc { margin-top: 4px; } } html.-lang-en .o-income-strategy__list-item-desc { font-size: 18px; letter-spacing: 1px; line-height: 1.2; letter-spacing: normal; font-weight: 400; max-width: 201px; } .-lang-en html.-lang-en .o-income-strategy__list-item-desc { font-family: KlavikaWebBasic, sans-serif; } @media (max-width: 1199px) { html.-lang-en .o-income-strategy__list-item-desc { max-width: 100%; } } .o-income-strategy__list-item-icon-wrapper { position: absolute; top: 29px; right: 0; width: 60px; height: 60px; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: #67676e; } .o-index .o-income-strategy__list-item-icon-wrapper { background-color: #f0e14b; border-color: #f0e14b; } .o-income .o-income-strategy__list-item-icon-wrapper { background-color: #f0e14b; border-color: #f0e14b; } .o-asia .o-income-strategy__list-item-icon-wrapper { background-color: #1e9bd7; border-color: #1e9bd7; } .o-tw-multi-asset .o-income-strategy__list-item-icon-wrapper { background-color: #fcba17; border-color: #fcba17; } .o-investing .o-income-strategy__list-item-icon-wrapper { background-color: #55469b; border-color: #55469b; } .o-mitigation .o-income-strategy__list-item-icon-wrapper { background-color: #6ECDCC; border-color: #6ECDCC; } .o-tw-esg .o-income-strategy__list-item-icon-wrapper { background-color: #55469b; border-color: #55469b; } .o-asia .o-income-strategy__list-item-icon-wrapper { color: #fff; } @media (min-width: 1200px) { .o-income-strategy__list-item-icon-wrapper { opacity: 0; -webkit-transform: translate(-4px, 4px); transform: translate(-4px, 4px); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } } @media (max-width: 1199px) { .o-income-strategy__list-item-icon-wrapper { width: 50px; height: 50px; top: -18px; right: 12px; } } @media (max-width: 767px) { .o-income-strategy__list-item-icon-wrapper { width: 40px; height: 40px; top: -18px; right: 12px; } } .o-income-strategy__list-item-icon-wrapper .icon { font-size: 16px; } @media (max-width: 1199px) { .o-income-strategy__list-item-icon-wrapper .icon { font-size: 13px; } } .o-income-strategy-tw { position: relative; padding: 80px 0 73px; overflow: hidden; } @media (max-width: 767px) { html.-lang-en .o-income-strategy-tw { padding: 60px 0 73px; } } .o-income-strategy-tw:after { content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0.8; z-index: 0; } .o-index .o-income-strategy-tw:after { background-color: #6987b9; } .o-income .o-income-strategy-tw:after { background-color: #50beaf; } .o-asia .o-income-strategy-tw:after { background-color: #b94b9b; } .o-tw-multi-asset .o-income-strategy-tw:after { background-color: #1e9bd7; } .o-investing .o-income-strategy-tw:after { background-color: #b1c425; } .o-mitigation .o-income-strategy-tw:after { background-color: #ff9933; } .o-tw-esg .o-income-strategy-tw:after { background-color: #b1c425; } .o-asia .o-income-strategy-tw:after { opacity: 0.94; } .o-income-strategy-tw:before { content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; } .o-index .o-income-strategy-tw:before { background-color: #6987b9; } .o-income .o-income-strategy-tw:before { background-color: #50beaf; } .o-asia .o-income-strategy-tw:before { background-color: #b94b9b; } .o-tw-multi-asset .o-income-strategy-tw:before { background-color: #1e9bd7; } .o-investing .o-income-strategy-tw:before { background-color: #b1c425; } .o-mitigation .o-income-strategy-tw:before { background-color: #ff9933; } .o-tw-esg .o-income-strategy-tw:before { background-color: #b1c425; } .o-income-strategy-tw__bg-deco { position: absolute; z-index: 1; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .o-income-strategy-tw__bg-deco:first-child { left: 0; top: 100px; } @media (max-width: 1199px) { .o-income-strategy-tw__bg-deco:first-child { height: 207px; top: 100px; } } @media (max-width: 767px) { .o-income-strategy-tw__bg-deco:first-child { height: 146px; } } .o-income-strategy-tw__bg-deco:nth-child(2) { right: 0; top: 118px; margin: 0 auto 2px; } @media (max-width: 1199px) { .o-income-strategy-tw__bg-deco:nth-child(2) { height: 200px; top: 138px; right: -80px; } } @media (max-width: 767px) { .o-income-strategy-tw__bg-deco:nth-child(2) { height: 140px; top: 124px; right: -75px; } } .o-income-strategy-tw__bg-deco img { height: 100%; } .o-income-strategy-tw > .container-tw { position: relative; z-index: 1; } .o-income-strategy-tw__header { position: relative; margin: 0 auto -30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 200px; } @media (max-width: 1199px) { .o-income-strategy-tw__header { margin: 0 auto 2px; height: 132px; } } @media (max-width: 767px) { .o-income-strategy-tw__header { height: 100px; } } .o-income-strategy-tw__header-deco { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 180px; color: #69cbbd; z-index: -1; letter-spacing: -6px; line-height: 1.11; font-family: KlavikaWebBasic, sans-serif; font-weight: 700; white-space: nowrap; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .o-tw-multi-asset .o-income-strategy-tw__header-deco { color: #34a6dc; } @media (max-width: 1199px) { .o-income-strategy-tw__header-deco { font-size: 120px; letter-spacing: -4.2px; } } @media (max-width: 767px) { .o-income-strategy-tw__header-deco { font-size: 80px; letter-spacing: -2.8px; } } .o-asia .o-income-strategy-tw__header-deco { color: #c65ca9; } .o-income-strategy-tw__header-text { font-size: 18px; font-weight: 700; letter-spacing: 1px; line-height: 1.5; text-align: center; color: #ffffff; } .-lang-en .o-income-strategy-tw__header-text { font-family: KlavikaWebBasic, sans-serif; font-size: 24px; line-height: 0.9; letter-spacing: normal; } .-en .o-income-strategy-tw__header-text { line-height: 1.2; letter-spacing: normal; } @media (max-width: 1199px) { .o-income-strategy-tw__header-text { font-size: 15px; } .-lang-en .o-income-strategy-tw__header-text { font-size: 18px; line-height: 1.2; } } @media (min-width: 768px) { .o-income-strategy-tw__header-text :first-child { margin-right: 10px; } } @media (max-width: 767px) { .o-income-strategy-tw__header-text :nth-child(n) { display: block; } } html.-lang-en .o-income-strategy-tw__header-text { font-size: 18px; font-weight: 700; letter-spacing: 1px; line-height: 1.5; text-transform: uppercase; } .-lang-en html.-lang-en .o-income-strategy-tw__header-text { font-family: KlavikaWebBasic, sans-serif; font-size: 24px; line-height: 0.9; letter-spacing: normal; } .-en html.-lang-en .o-income-strategy-tw__header-text { line-height: 1.2; letter-spacing: normal; } @media (max-width: 1199px) { html.-lang-en .o-income-strategy-tw__header-text { font-size: 15px; } .-lang-en html.-lang-en .o-income-strategy-tw__header-text { font-size: 18px; line-height: 1.2; } } @media (max-width: 1199px) { html.-lang-en .o-income-strategy-tw__header-text { max-width: 350px; margin: 0 auto; } } body.-en .o-income-strategy-tw__header-text { font-size: 18px; font-weight: 700; letter-spacing: 1px; line-height: 1.5; text-transform: uppercase; letter-spacing: normal; } .-lang-en body.-en .o-income-strategy-tw__header-text { font-family: KlavikaWebBasic, sans-serif; font-size: 24px; line-height: 0.9; letter-spacing: normal; } .-en body.-en .o-income-strategy-tw__header-text { line-height: 1.2; letter-spacing: normal; } @media (max-width: 1199px) { body.-en .o-income-strategy-tw__header-text { font-size: 15px; } .-lang-en body.-en .o-income-strategy-tw__header-text { font-size: 18px; line-height: 1.2; } } @media (max-width: 1199px) { body.-en .o-income-strategy-tw__header-text { max-width: 350px; margin: 0 auto; } } body.-en .o-income-strategy-tw__header-text :first-child { margin-right: 0; } body.-en .o-income-strategy-tw__header-text :first-child:after { content: " - "; } .o-income-strategy-tw .a-topic-page-section-title { color: #ffffff; } @media (max-width: 767px) { .o-income-strategy-tw .a-topic-page-section-title { margin-top: -45px; padding-top: 65px; } body.-en .o-income-strategy-tw .a-topic-page-section-title { margin-top: -65px; padding-top: 85px; } } html.-lang-en .o-income-strategy-tw .a-topic-page-section-title { margin-top: 6px; } @media (max-width: 1199px) { html.-lang-en .o-income-strategy-tw .a-topic-page-section-title { width: 100%; max-width: 531px; margin: -63px auto 0 auto; padding-top: 44px; } } @media (max-width: 767px) { html.-lang-en .o-income-strategy-tw .a-topic-page-section-title { margin: -36px auto 0 auto; max-width: 300px; } } .o-income-strategy-tw__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; max-width: 1120px; margin: 60px auto 0; } @media (max-width: 1199px) { .o-income-strategy-tw__list { margin: 40px auto 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; max-width: 500px; } } @media (max-width: 767px) { .o-income-strategy-tw__list { margin-top: -70px; padding-top: 110px; } } .o-income-strategy-tw__list-item { width: 300px; height: 300px; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: 27px 70px; color: #55469b; -webkit-transition: color 0.3s ease, opacity 0.3s ease; transition: color 0.3s ease, opacity 0.3s ease; } @media (max-width: 479px) { .o-income-strategy-tw__list-item { margin: -60px 70px; } } @media (min-width: 1200px) { .o-income-strategy-tw__list-item.-lg { width: 330px; height: 330px; } } @media (min-width: 1200px) { body.-en .o-income-strategy-tw__list-item { padding: 0 40px; } } .-pc.o-asia .o-income-strategy-tw__list-item:hover { color: #fff; } .-pc.o-asia .o-income-strategy-tw__list-item:hover:after { opacity: 0.86; background-color: #1e9bd7; } .-pc .o-income-strategy-tw__list-item:hover { opacity: 1; color: white; } .-pc .o-income-strategy-tw__list-item:hover:after { background-color: #55469b; } .-pc .o-income-strategy-tw__list-item:hover .o-income-strategy__list-item-circle-default { opacity: 0; } .-pc .o-income-strategy-tw__list-item:hover .o-income-strategy__list-item-circle-hover { opacity: 1; } .-pc .o-income-strategy-tw__list-item:hover .o-income-strategy__list-item-circle-default, .-pc .o-income-strategy-tw__list-item:hover .o-income-strategy__list-item-circle-hover { -webkit-transform: rotateZ(-255deg); transform: rotateZ(-255deg); -webkit-transition: all 0.6s ease; transition: all 0.6s ease; } .-pc .o-income-strategy-tw__list-item:hover .o-income-strategy__list-item-icon-wrapper { opacity: 1; -webkit-transform: translate(0); transform: translate(0); -webkit-transition: all 0.3s 0.6s ease; transition: all 0.3s 0.6s ease; } .o-income-strategy-tw__list-item:hover .icon { -webkit-transform: translate(10px, -10px); transform: translate(10px, -10px); -webkit-transition-duration: 0.1s; transition-duration: 0.1s; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .o-income-strategy-tw__list-item:hover .o-income-strategy-tw__list-item-block { -webkit-transform: translate(5px, -5px); transform: translate(5px, -5px); -webkit-transition-duration: 0.1s; transition-duration: 0.1s; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .o-income-strategy-tw__list-item:hover .o-income-strategy-tw__list-item-rec-line { -webkit-transform: translateY(-15px); transform: translateY(-15px); -webkit-transition-duration: 0.1s; transition-duration: 0.1s; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .o-income-strategy-tw__list-item.-disable { pointer-events: none; opacity: 0.4; } .o-income-strategy-tw__list-item:before, .o-income-strategy-tw__list-item:after { content: ''; position: absolute; width: 348px; height: 272px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #fff; border-radius: 3px; -webkit-transition: background-color 0.3s ease; transition: background-color 0.3s ease; z-index: -1; } @media (max-width: 479px) { .o-income-strategy-tw__list-item:before, .o-income-strategy-tw__list-item:after { max-width: 308px; max-height: 135px; position: absolute; left: 160px; } } .o-income-strategy-tw__list-item-deco { height: 2px; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } @media (max-width: 479px) { .o-income-strategy-tw__list-item-deco { display: none; } } .o-income-strategy-tw__list-item-deco:before, .o-income-strategy-tw__list-item-deco:after { content: ''; position: absolute; height: 2px; width: 25px; display: block; } .o-index .o-income-strategy-tw__list-item-deco:before, .o-index .o-income-strategy-tw__list-item-deco:after { background-color: #6987b9; } .o-income .o-income-strategy-tw__list-item-deco:before, .o-income .o-income-strategy-tw__list-item-deco:after { background-color: #50beaf; } .o-asia .o-income-strategy-tw__list-item-deco:before, .o-asia .o-income-strategy-tw__list-item-deco:after { background-color: #b94b9b; } .o-tw-multi-asset .o-income-strategy-tw__list-item-deco:before, .o-tw-multi-asset .o-income-strategy-tw__list-item-deco:after { background-color: #1e9bd7; } .o-investing .o-income-strategy-tw__list-item-deco:before, .o-investing .o-income-strategy-tw__list-item-deco:after { background-color: #b1c425; } .o-mitigation .o-income-strategy-tw__list-item-deco:before, .o-mitigation .o-income-strategy-tw__list-item-deco:after { background-color: #ff9933; } .o-tw-esg .o-income-strategy-tw__list-item-deco:before, .o-tw-esg .o-income-strategy-tw__list-item-deco:after { background-color: #b1c425; } .o-income-strategy-tw__list-item-deco:before { bottom: -2px; left: 30px; } .o-income-strategy-tw__list-item-deco:after { top: -2px; right: 0; width: 74px; } @media (max-width: 767px) { .o-income-strategy-tw__list-item-deco:after { width: 65px; } } .o-income-strategy-tw__list-item-rec-default { position: absolute; top: 5px; left: -35px; } @media (max-width: 479px) { .o-income-strategy-tw__list-item-rec-default { -webkit-transform: scale(0.7); transform: scale(0.7); position: absolute; top: 53px; left: -52px; } } .o-income-strategy-tw__list-item-rec-line { position: absolute; width: 3px; height: 140px; background-color: #55469b; border-radius: 4px; left: -45px; top: 50px; } @media (max-width: 479px) { .o-income-strategy-tw__list-item-rec-line { -webkit-transform: scale(0.7); transform: scale(0.7); position: absolute; top: 70px; left: -12px; } } .o-income-strategy-tw__list-item-circle-default, .o-income-strategy-tw__list-item-circle-hover { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } @media (min-width: 1200px) { .o-income-strategy-tw__list-item-circle-default, .o-income-strategy-tw__list-item-circle-hover { -webkit-transition: all 0.6s 0.15s ease; transition: all 0.6s 0.15s ease; } } @media (max-width: 1199px) { .o-income-strategy-tw__list-item-circle-default, .o-income-strategy-tw__list-item-circle-hover { display: none; } } @media (max-width: 1199px) { .o-income-strategy-tw__list-item-circle-default { opacity: 0; } } .o-income-strategy-tw__list-item-circle-hover { opacity: 0; } @media (max-width: 1199px) and (min-width: 768px) { .o-income-strategy-tw__list-item-circle-hover { opacity: 1; } } .o-income-strategy-tw__list-item-retangle-border { display: none; } @media (max-width: 767px) { .o-income-strategy-tw__list-item-retangle-border { display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; } } .o-income-strategy-tw__list-item-title { width: 100%; position: absolute; margin-top: 30px; font-size: 22px; font-weight: bold; } @media (max-width: 479px) { .o-income-strategy-tw__list-item-title { position: absolute; margin-top: 90px; margin-left: 15px; } } html.-lang-en .o-income-strategy-tw__list-item-title { font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; max-width: 208px; margin: 0 auto; text-transform: uppercase; } @media (max-width: 1199px) { html.-lang-en .o-income-strategy-tw__list-item-title { line-height: 1.2; max-width: 100%; } } @media (max-width: 767px) { html.-lang-en .o-income-strategy-tw__list-item-title { font-size: 18px; } } .o-income-strategy-tw__list-item-subtitle { width: 100%; font-size: 18px; font-weight: 700; letter-spacing: 1px; line-height: 1.5; } .-lang-en .o-income-strategy-tw__list-item-subtitle { font-family: KlavikaWebBasic, sans-serif; font-size: 24px; line-height: 0.9; letter-spacing: normal; } .-en .o-income-strategy-tw__list-item-subtitle { line-height: 1.2; letter-spacing: normal; } @media (max-width: 1199px) { .o-income-strategy-tw__list-item-subtitle { font-size: 15px; } .-lang-en .o-income-strategy-tw__list-item-subtitle { font-size: 18px; line-height: 1.2; } } .o-income-strategy-tw__list-item-block { position: absolute; border-radius: 3px; width: 355px; height: 64px; right: 0px; bottom: 45px; background-color: #f0f0f0; } @media (max-width: 479px) { .o-income-strategy-tw__list-item-block { width: 325px; height: 45px; right: 5px; bottom: 95px; } } .o-income-strategy-tw__list-item-content, .o-income-strategy-tw__list-item-arrow { position: absolute; } .o-income-strategy-tw__list-item-content { margin: 18px; color: #55469b; font-weight: bold; } @media (max-width: 479px) { .o-income-strategy-tw__list-item-content { top: -10px; } } .o-income-strategy-tw__list-item-arrow { position: absolute; margin: 20px; right: 0px; color: #55469b; } @media (max-width: 479px) { .o-income-strategy-tw__list-item-arrow { top: -10px; } } @media (max-width: 767px) { .o-income-ai-wrapper { overflow-x: hidden; overflow-y: hidden; } } .o-income-ai { padding-top: 140px; padding-bottom: 100px; } @media (min-width: 1200px) { .o-income-ai { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 45px 1fr; grid-template-columns: 1fr 1fr; -ms-grid-rows: auto; grid-template-rows: auto; grid-gap: 0 45px; } .o-income-ai > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } .o-income-ai > *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 3; } .o-income-ai.-video-left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } } @media (max-width: 1199px) { .o-income-ai { padding-top: 100px; padding-bottom: 80px; } } @media (max-width: 767px) { .o-income-ai { padding-bottom: 50px; } } @media (max-width: 1199px) { html.-lang-en .o-income-ai { padding-top: 67px; } } .o-income-ai__left { position: relative; z-index: 10; } @media (min-width: 1200px) { .-video-left .o-income-ai__left { width: 50%; padding-left: 90px; } } .o-income-ai__left-inner { position: relative; } @media (min-width: 1200px) { .o-income-ai__left-inner { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); padding-top: 100px; } } html.-lang-en .o-income-ai__left-inner { padding-top: 27px; margin: 0 auto; max-width: 510px; } @media (max-width: 1199px) { html.-lang-en .o-income-ai__left-inner { max-width: 688px; } } @media (max-width: 479px) { html.-lang-en .o-income-ai__left-inner { max-width: 321px; } } .o-income-ai__left-title { position: relative; font-size: 32px; font-weight: 700; letter-spacing: 2px; line-height: 1.2; margin-bottom: 25px; } .-lang-en .o-income-ai__left-title { line-height: 1.19; letter-spacing: 0.5px; font-family: KlavikaWebBasic, sans-serif; } .-en .o-income-ai__left-title { font-size: 24px; letter-spacing: 0.5px; } @media (max-width: 1199px) { .o-income-ai__left-title { font-size: 26px; } .-lang-en .o-income-ai__left-title { line-height: 1.25; } .-en .o-income-ai__left-title { font-size: 20px; } } @media (max-width: 767px) { .o-income-ai__left-title { font-size: 22px; } .-lang-en .o-income-ai__left-title { font-size: 26px; } } @media (min-width: 1200px) { .o-income-ai__left-title { padding-right: 120px; } } @media (max-width: 1199px) { .o-income-ai__left-title { text-align: center; margin-bottom: 30px; } } @media (max-width: 767px) { .o-income-ai__left-title { margin-bottom: 25px; } } html.-lang-en .o-income-ai__left-title { text-transform: uppercase; } @media (min-width: 1200px) { html.-lang-en .o-income-ai__left-title { padding-right: 0; } } @media (max-width: 1199px) { html.-lang-en .o-income-ai__left-title { max-width: 465px; margin: 0 auto; } } body.-en .o-income-ai__left-title { text-transform: uppercase; padding-right: 130px; } @media (max-width: 1199px) { body.-en .o-income-ai__left-title { padding-right: 0; } } .o-income-ai__left-desc { /* font-size: 18px; */ font-weight: 400; letter-spacing: 1.5px; line-height: 1.5; color: #67676e; } .-lang-en .o-income-ai__left-desc { letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .o-income-ai__left-desc { letter-spacing: normal; } @media (max-width: 1199px) { .o-income-ai__left-desc { /* font-size: 16px; */ letter-spacing: 0px; } .-lang-en .o-income-ai__left-desc { line-height: 1.38; } .-en .o-income-ai__left-desc { letter-spacing: normal; } } @media (max-width: 767px) { .o-income-ai__left-desc { /* font-size: 15px; */ } .-lang-en .o-income-ai__left-desc { line-height: 1.33; } } @media (max-width: 1199px) { .o-income-ai__left-desc { padding-bottom: 45px; } } @media (max-width: 767px) { .o-income-ai__left-desc { padding-bottom: 40px; } } @media (max-width: 1199px) { html.-lang-en .o-income-ai__left-desc { padding-bottom: 55px; padding-top: 25px; } } @media (max-width: 1199px) { html.-lang-en .o-income-ai__left-desc { padding-right: 20px; padding-left: 20px; } } @media (max-width: 767px) { html.-lang-en .o-income-ai__left-desc { padding-right: 0px; padding-left: 0px; text-align: justify; } } @media (min-width: 1200px) { .-video-left .o-income-ai__right { width: 50%; } } .o-income-ai__right-video { position: relative; } .o-income-ai__right-video-deco-square { position: absolute; width: 75%; height: 100%; top: -40px; left: 50%; display: block; } .-video-left .o-income-ai__right-video-deco-square { left: auto; right: 50%; } @media (max-width: 1199px) { .o-income-ai__right-video-deco-square { top: -30px; } } @media (max-width: 767px) { .o-income-ai__right-video-deco-square { top: -20px; } } .o-income-ai__right-video-deco-square:before, .o-income-ai__right-video-deco-square:after { content: ''; width: 100%; position: absolute; top: 0; left: 0; display: block; } .o-index .o-income-ai__right-video-deco-square:before, .o-index .o-income-ai__right-video-deco-square:after { background-color: #6987b9; } .o-income .o-income-ai__right-video-deco-square:before, .o-income .o-income-ai__right-video-deco-square:after { background-color: #50beaf; } .o-asia .o-income-ai__right-video-deco-square:before, .o-asia .o-income-ai__right-video-deco-square:after { background-color: #b94b9b; } .o-tw-multi-asset .o-income-ai__right-video-deco-square:before, .o-tw-multi-asset .o-income-ai__right-video-deco-square:after { background-color: #1e9bd7; } .o-investing .o-income-ai__right-video-deco-square:before, .o-investing .o-income-ai__right-video-deco-square:after { background-color: #b1c425; } .o-mitigation .o-income-ai__right-video-deco-square:before, .o-mitigation .o-income-ai__right-video-deco-square:after { background-color: #ff9933; } .o-tw-esg .o-income-ai__right-video-deco-square:before, .o-tw-esg .o-income-ai__right-video-deco-square:after { background-color: #b1c425; } .o-income-ai__right-video-deco-square:before { height: calc(100% + 80px); } @media (max-width: 1199px) { .o-income-ai__right-video-deco-square:before { height: calc(100% + 60px); } } @media (max-width: 767px) { .o-income-ai__right-video-deco-square:before { height: calc(100% + 40px); } } .o-income-ai__right-video-deco-square:after { left: 50%; width: 50%; height: 60px; top: calc(100% + 80px); } .-video-left .o-income-ai__right-video-deco-square:after { left: auto; right: 50%; } @media (max-width: 1199px) { .o-income-ai__right-video-deco-square:after { top: calc(100% + 60px); height: 50px; } } @media (max-width: 767px) { .o-income-ai__right-video-deco-square:after { top: calc(100% + 40px); height: 30px; } } .o-income-ai__right-video-trigger { position: relative; cursor: pointer; } .-pc .o-income-ai__right-video-trigger:hover .o-income-ai__right-video-trigger-play .a-circle-frame { -webkit-animation: rotate 0.5s cubic-bezier(0.7, 0, 0.3, 1); animation: rotate 0.5s cubic-bezier(0.7, 0, 0.3, 1); } .o-income-ai__right-video-trigger-video { position: relative; width: 100%; height: auto; z-index: 0; } .o-income-ai__right-video-trigger-video:before { content: ''; display: block; padding-bottom: 56.25%; width: 100%; } .o-income-ai__right-video-trigger-video-thumb { width: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; position: absolute; top: 0; left: 0; } .o-income-ai__right-video-trigger-video-thumb:before { content: ''; width: 100%; padding-bottom: 56.25%; display: block; } .o-income-ai__right-video-trigger-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .o-income-ai__right-video-trigger-border-deco { content: ''; width: 100%; height: calc(100% + 24px); position: absolute; top: -12px; left: -12px; border: 3px solid gray; z-index: 2; } .o-index .o-income-ai__right-video-trigger-border-deco { border-color: #f0e14b; } .o-income .o-income-ai__right-video-trigger-border-deco { border-color: #f0e14b; } .o-asia .o-income-ai__right-video-trigger-border-deco { border-color: #1e9bd7; } .o-tw-multi-asset .o-income-ai__right-video-trigger-border-deco { border-color: #fcba17; } .o-investing .o-income-ai__right-video-trigger-border-deco { border-color: #55469b; } .o-mitigation .o-income-ai__right-video-trigger-border-deco { border-color: #6ECDCC; } .o-tw-esg .o-income-ai__right-video-trigger-border-deco { border-color: #55469b; } .o-income-ai__right-video-trigger-border-deco:before, .o-income-ai__right-video-trigger-border-deco:after { content: ''; width: 40px; height: 3px; position: absolute; } .o-income-ai__right-video-trigger-border-deco:after { left: 40px; bottom: -3px; background: #fff; } .o-index .-video-left .o-income-ai__right-video-trigger-border-deco:after { background-color: #6987b9; } .o-income .-video-left .o-income-ai__right-video-trigger-border-deco:after { background-color: #50beaf; } .o-asia .-video-left .o-income-ai__right-video-trigger-border-deco:after { background-color: #b94b9b; } .o-tw-multi-asset .-video-left .o-income-ai__right-video-trigger-border-deco:after { background-color: #1e9bd7; } .o-investing .-video-left .o-income-ai__right-video-trigger-border-deco:after { background-color: #b1c425; } .o-mitigation .-video-left .o-income-ai__right-video-trigger-border-deco:after { background-color: #ff9933; } .o-tw-esg .-video-left .o-income-ai__right-video-trigger-border-deco:after { background-color: #b1c425; } .o-income-ai__right-video-trigger-border-deco:before { top: 0; right: -3px; top: -3px; } .o-index .o-income-ai__right-video-trigger-border-deco:before { background-color: #6987b9; } .o-income .o-income-ai__right-video-trigger-border-deco:before { background-color: #50beaf; } .o-asia .o-income-ai__right-video-trigger-border-deco:before { background-color: #b94b9b; } .o-tw-multi-asset .o-income-ai__right-video-trigger-border-deco:before { background-color: #1e9bd7; } .o-investing .o-income-ai__right-video-trigger-border-deco:before { background-color: #b1c425; } .o-mitigation .o-income-ai__right-video-trigger-border-deco:before { background-color: #ff9933; } .o-tw-esg .o-income-ai__right-video-trigger-border-deco:before { background-color: #b1c425; } .-video-left .o-income-ai__right-video-trigger-border-deco:before { background: #fff; } .o-income-ai__right-video-trigger-border-deco-line { position: absolute; top: 50%; left: -120px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .-video-left .o-income-ai__right-video-trigger-border-deco-line { left: initial; right: -120px; } @media (max-width: 1199px) { .o-income-ai__right-video-trigger-border-deco-line { display: none; } } .o-income-ai__right-video-trigger-thumb { width: 100%; height: auto; } .o-income-ai__right-video-trigger-play { width: 89px; height: 89px; position: absolute; top: 0; left: 0; right: 0; bottom: 0px; margin: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; cursor: pointer; color: #fff; z-index: 2; border-radius: 50%; } .o-income-ai__right-video-trigger-play .a-circle-frame { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .o-income-ai__right-video-trigger-play img { display: block; } .o-income-team { padding-top: 100px; padding-bottom: 100px; } @media (min-width: 1200px) { .o-income-team { display: -ms-grid; display: grid; -ms-grid-columns: 3fr 140px 2fr; grid-template-columns: 3fr 2fr; -ms-grid-rows: auto; grid-template-rows: auto; grid-gap: 0 140px; } .o-income-team > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } .o-income-team > *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 3; } } @media (max-width: 1199px) { .o-income-team { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .o-income-team__left { position: relative; } .o-income-team__left-top { position: relative; } .o-income-team__left-deco { position: absolute; height: 100%; right: 0; -webkit-transform: translateX(100%); transform: translateX(100%); top: 0; } @media (max-width: 1199px) { .o-income-team__left-deco { display: none; } } @media (max-width: 1199px) { .o-income-team__left { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } } .o-income-team__left-map { position: relative; } .o-income-team__left-map img { width: 100%; height: auto; } .o-income-team__left-map svg { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .o-income-team__left-map svg#location text { letter-spacing: 0.3px; } html.-lang-en .o-income-team__left-map svg#location text, body.-en .o-income-team__left-map svg#location text { font-family: KlavikaWebBasic, sans-serif; } @media (max-width: 767px) { .o-income-team__left-map svg#location { display: none; } } @media (min-width: 768px) { .o-income-team__left-map svg#location-mobile { display: none; } } @-webkit-keyframes showLocation { 0% { opacity: 0; } 1% { opacity: 1; } 10% { opacity: 1; } 11% { opacity: 0; } 80% { opacity: 0; } 100% { opacity: 0; } } @keyframes showLocation { 0% { opacity: 0; } 1% { opacity: 1; } 10% { opacity: 1; } 11% { opacity: 0; } 80% { opacity: 0; } 100% { opacity: 0; } } .o-income-team__left-map svg > g > :nth-child(0) :not(ellipse):not(circle) { opacity: 0; -webkit-animation: showLocation 9s -1s linear infinite; animation: showLocation 9s -1s linear infinite; } .o-income-team__left-map svg > g > :nth-child(1) :not(ellipse):not(circle) { opacity: 0; -webkit-animation: showLocation 9s 0s linear infinite; animation: showLocation 9s 0s linear infinite; } .o-income-team__left-map svg > g > :nth-child(2) :not(ellipse):not(circle) { opacity: 0; -webkit-animation: showLocation 9s 1s linear infinite; animation: showLocation 9s 1s linear infinite; } .o-income-team__left-map svg > g > :nth-child(3) :not(ellipse):not(circle) { opacity: 0; -webkit-animation: showLocation 9s 2s linear infinite; animation: showLocation 9s 2s linear infinite; } .o-income-team__left-map svg > g > :nth-child(4) :not(ellipse):not(circle) { opacity: 0; -webkit-animation: showLocation 9s 3s linear infinite; animation: showLocation 9s 3s linear infinite; } .o-income-team__left-map svg > g > :nth-child(5) :not(ellipse):not(circle) { opacity: 0; -webkit-animation: showLocation 9s 4s linear infinite; animation: showLocation 9s 4s linear infinite; } .o-income-team__left-map svg > g > :nth-child(6) :not(ellipse):not(circle) { opacity: 0; -webkit-animation: showLocation 9s 5s linear infinite; animation: showLocation 9s 5s linear infinite; } .o-income-team__left-map svg > g > :nth-child(7) :not(ellipse):not(circle) { opacity: 0; -webkit-animation: showLocation 9s 6s linear infinite; animation: showLocation 9s 6s linear infinite; } .o-income-team__left-map svg > g > :nth-child(8) :not(ellipse):not(circle) { opacity: 0; -webkit-animation: showLocation 9s 7s linear infinite; animation: showLocation 9s 7s linear infinite; } .o-income-team__left-map svg > g > :nth-child(9) :not(ellipse):not(circle) { opacity: 0; -webkit-animation: showLocation 9s 8s linear infinite; animation: showLocation 9s 8s linear infinite; } .o-income-team__left-source { padding-top: 15px; font-size: 12px; font-weight: 400; line-height: 1.8; color: #67676e; } .-lang-en .o-income-team__left-source { line-height: 1.5; letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .o-income-team__left-source { font-size: 13px; line-height: 1.2; letter-spacing: normal; } @media (min-width: 1200px) { body.-en .o-income-team__left-source { white-space: nowrap; } } @media (max-width: 1199px) { .o-income-team__left-source { text-align: left; } } .o-income-team__left-top-intro { display: -webkit-box; display: -ms-flexbox; display: flex; color: #67676e; padding-bottom: 10px; -ms-flex-pack: distribute; justify-content: space-around; } @media (max-width: 1199px) { .o-income-team__left-top-intro { -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; } } @media (max-width: 479px) { .o-income-team__left-top-intro-count { max-width: 33%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } } .o-income-team__left-top-intro-count-number, .o-income-team__left-top-intro-count-text { display: block; text-align: center; } html.-lang-en .o-income-team__left-top-intro-count-number, body.-en .o-income-team__left-top-intro-count-number, html.-lang-en .o-income-team__left-top-intro-count-text, body.-en .o-income-team__left-top-intro-count-text { text-transform: uppercase; } .o-income-team__left-top-intro-count-number { font-size: 72px; font-family: KlavikaWebBasic, sans-serif; font-weight: bold; line-height: 1; } @media (max-width: 1199px) { .o-income-team__left-top-intro-count-number { font-size: 70px; } } @media (max-width: 767px) { .o-income-team__left-top-intro-count-number { font-size: 46px; } } .o-income-team__left-top-intro-count-text { font-size: 16px; font-weight: 400; letter-spacing: 1px; line-height: 1.5; font-weight: bold; } .-lang-en .o-income-team__left-top-intro-count-text { font-family: KlavikaWebBasic, sans-serif; letter-spacing: normal; } .-en .o-income-team__left-top-intro-count-text { letter-spacing: normal; } @media (max-width: 767px) { .o-income-team__left-top-intro-count-text { font-size: 15px; } } html.-lang-en .o-income-team__left-top-intro-count-text { font-size: 16px; font-weight: 700; letter-spacing: normal; line-height: 1.2; font-family: KlavikaWebBasic, sans-serif; } @media (max-width: 767px) { html.-lang-en .o-income-team__left-top-intro-count-text { font-size: 15px; } } .o-income-team__right { position: relative; } @media (min-width: 1200px) { .o-income-team__right { padding-bottom: 100px; } } .o-income-team__right-title { font-size: 32px; font-weight: 700; letter-spacing: 2px; line-height: 1.2; padding-bottom: 25px; } .-lang-en .o-income-team__right-title { line-height: 1.19; letter-spacing: 0.5px; font-family: KlavikaWebBasic, sans-serif; } .-en .o-income-team__right-title { font-size: 24px; letter-spacing: 0.5px; } @media (max-width: 1199px) { .o-income-team__right-title { font-size: 26px; } .-lang-en .o-income-team__right-title { line-height: 1.25; } .-en .o-income-team__right-title { font-size: 20px; } } @media (max-width: 767px) { .o-income-team__right-title { font-size: 22px; } .-lang-en .o-income-team__right-title { font-size: 26px; } } @media (max-width: 1199px) { .o-income-team__right-title { text-align: center; padding-bottom: 30px; } } html.-lang-en .o-income-team__right-title, body.-en .o-income-team__right-title { text-transform: uppercase; } @media (max-width: 479px) { html.-lang-en .o-income-team__right-title, body.-en .o-income-team__right-title { max-width: 265px; margin: 0 auto; } } .o-income-team__right-desc { font-size: 18px; font-weight: 400; letter-spacing: 1.5px; line-height: 1.5; color: #67676e; } .-lang-en .o-income-team__right-desc { letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .o-income-team__right-desc { letter-spacing: normal; } @media (max-width: 1199px) { .o-income-team__right-desc { font-size: 16px; letter-spacing: 0px; } .-lang-en .o-income-team__right-desc { line-height: 1.38; } .-en .o-income-team__right-desc { letter-spacing: normal; } } @media (max-width: 767px) { .o-income-team__right-desc { font-size: 15px; } .-lang-en .o-income-team__right-desc { line-height: 1.33; } } @media (max-width: 1199px) { .o-income-team__right-desc { padding-bottom: 10px; } } @media (max-width: 767px) { .o-income-team__right-desc { padding-bottom: 20px; } } @media (max-width: 1199px) { html.-lang-en .o-income-team__right-desc { padding-bottom: 10px; } } @media (max-width: 767px) { html.-lang-en .o-income-team__right-desc { padding-bottom: 35px; } } .o-income-team__right-inner { position: relative; } @media (min-width: 1200px) { .o-income-team__right-inner { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } } html.-lang-en .o-income-team__right-inner { max-width: 384px; } @media (max-width: 1199px) { html.-lang-en .o-income-team__right-inner { max-width: 688px; margin: 0 auto; } } .o-asia-timeline-block { position: relative; padding-bottom: 20px; overflow-x: hidden; } @media (min-width: 1200px) { body.-en .o-asia-timeline-block__center svg { -webkit-transform: translateX(15%); transform: translateX(15%); } } @media (max-width: 1199px) { body.-en .o-asia-timeline-block .m-time-line { padding-top: 250px; } } @media (max-width: 767px) { body.-en .o-asia-timeline-block .m-time-line { padding-top: 220px; } } @media (min-width: 768px) { .o-asia-timeline-block { margin-top: -60px; padding-top: 100px; } } @media (min-width: 768px) { .o-asia-timeline-block:before { content: ''; width: 50%; left: 50%; height: 100%; background: #fdfdfd; display: block; top: 0; position: absolute; z-index: -1; } } .o-asia-timeline-block__map { position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 100%; max-width: 1138px; height: auto; margin: 0 auto; display: block; padding: 0 40px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } @media (max-width: 767px) { .o-asia-timeline-block__map { width: 686.47415px; padding: 26px 20px 0; } } .o-asia-timeline-block .a-topic-page-section-title { position: relative; padding: 50px 0 30px; } @media (max-width: 1199px) { .o-asia-timeline-block .a-topic-page-section-title { padding-top: 20px; } } @media (max-width: 767px) { .o-asia-timeline-block .a-topic-page-section-title { padding: 0 0 17px; } } .o-asia-timeline-block__desc { font-size: 18px; font-weight: 400; letter-spacing: 1.5px; line-height: 1.5; font-weight: 500; color: #67676e; max-width: 792px; margin: 0 auto; position: relative; } .-lang-en .o-asia-timeline-block__desc { letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .o-asia-timeline-block__desc { letter-spacing: normal; } @media (max-width: 1199px) { .o-asia-timeline-block__desc { font-size: 16px; letter-spacing: 0px; } .-lang-en .o-asia-timeline-block__desc { line-height: 1.38; } .-en .o-asia-timeline-block__desc { letter-spacing: normal; } } @media (max-width: 767px) { .o-asia-timeline-block__desc { font-size: 15px; } .-lang-en .o-asia-timeline-block__desc { line-height: 1.33; } } @media (min-width: 1200px) { .o-asia-timeline-block__desc { text-align: center; } } .o-asia-timeline-block__center { position: relative; padding: 46px 0 0; } @media (max-width: 1199px) { .o-asia-timeline-block__center { padding: 16px 0 0; } } @media (max-width: 767px) { .o-asia-timeline-block__center { padding: 25px 0 0; } } .o-asia-timeline-block__center svg { display: block; margin: 0 auto; } @media (min-width: 1200px) { .o-asia-timeline-block__center svg { -webkit-transform: translateX(18.8%); transform: translateX(18.8%); } } @media (max-width: 767px) { .o-asia-timeline-block__center svg { width: 100%; max-width: 305px; } } @-webkit-keyframes drawEarthCircle { 0% { stroke-dashoffset: 650; } 100% { stroke-dashoffset: -650; } } @keyframes drawEarthCircle { 0% { stroke-dashoffset: 650; } 100% { stroke-dashoffset: -650; } } @-webkit-keyframes drawEarthCircleDesktopBelow { 0% { stroke-dashoffset: 430; } 100% { stroke-dashoffset: -430; } } @keyframes drawEarthCircleDesktopBelow { 0% { stroke-dashoffset: 430; } 100% { stroke-dashoffset: -430; } } @media (min-width: 1200px) { body:not(.-ie) .o-asia-timeline-block__center svg .circle { -webkit-transform: scale(1); transform: scale(1); stroke-dasharray: 650; stroke-dashoffset: -650; -webkit-animation: drawEarthCircle 4s ease-out infinite; animation: drawEarthCircle 4s ease-out infinite; } } @media (max-width: 1199px) { body:not(.-ie) .o-asia-timeline-block__center svg .circle { stroke-dasharray: 430; stroke-dashoffset: -430; -webkit-animation: drawEarthCircleDesktopBelow 4s ease-out infinite; animation: drawEarthCircleDesktopBelow 4s ease-out infinite; } } @media (min-width: 1200px) { .o-asia-timeline-block__center svg .line { -webkit-animation: scaleLine 4s ease infinite; animation: scaleLine 4s ease infinite; -webkit-transform-origin: 108px center; transform-origin: 108px center; } @-webkit-keyframes scaleLine { 0% { -webkit-transform: scaleX(0); transform: scaleX(0); } 49% { -webkit-transform-origin: 108px center; transform-origin: 108px center; } 50% { -webkit-transform-origin: 261px center; transform-origin: 261px center; -webkit-transform: scaleX(1); transform: scaleX(1); } 100% { -webkit-transform-origin: 261px center; transform-origin: 261px center; -webkit-transform: scaleX(0); transform: scaleX(0); } } @keyframes scaleLine { 0% { -webkit-transform: scaleX(0); transform: scaleX(0); } 49% { -webkit-transform-origin: 108px center; transform-origin: 108px center; } 50% { -webkit-transform-origin: 261px center; transform-origin: 261px center; -webkit-transform: scaleX(1); transform: scaleX(1); } 100% { -webkit-transform-origin: 261px center; transform-origin: 261px center; -webkit-transform: scaleX(0); transform: scaleX(0); } } } @media (max-width: 1199px) { .o-asia-timeline-block__center svg .line { -webkit-animation: scaleLine 4s ease infinite; animation: scaleLine 4s ease infinite; -webkit-transform-origin: 25% center; transform-origin: 25% center; } @-webkit-keyframes scaleLine { 0% { -webkit-transform: scaleX(0); transform: scaleX(0); } 49% { -webkit-transform-origin: 25% center; transform-origin: 25% center; } 50% { -webkit-transform-origin: right center; transform-origin: right center; -webkit-transform: scaleX(1); transform: scaleX(1); } 100% { -webkit-transform-origin: right center; transform-origin: right center; -webkit-transform: scaleX(0); transform: scaleX(0); } } @keyframes scaleLine { 0% { -webkit-transform: scaleX(0); transform: scaleX(0); } 49% { -webkit-transform-origin: 25% center; transform-origin: 25% center; } 50% { -webkit-transform-origin: right center; transform-origin: right center; -webkit-transform: scaleX(1); transform: scaleX(1); } 100% { -webkit-transform-origin: right center; transform-origin: right center; -webkit-transform: scaleX(0); transform: scaleX(0); } } } .o-asia-timeline-block .m-time-line { padding-top: 120px; } @media (max-width: 1199px) { .o-asia-timeline-block .m-time-line { padding-top: 214px; } } @media (max-width: 767px) { .o-asia-timeline-block .m-time-line { padding-top: 210px; } } @media (max-width: 1199px) { .o-asia-timeline-block .m-time-line .swiper-slide { width: 33.33%; } } .o-asia-grassroot { padding: 100px 0 120px; overflow-x: hidden; } @media (max-width: 1199px) { .o-asia-grassroot { padding: 100px 0 100px; } } @media (min-width: 768px) { .o-asia-grassroot { position: relative; } .o-asia-grassroot:before { content: ''; width: 50%; right: 50%; height: 100%; background: #fdfdfd; display: block; top: 0; right: 0; position: absolute; z-index: -1; } } .o-asia-grassroot .o-asia__section-desc { margin: 20px auto 47px; } @media (max-width: 1199px) { .o-asia-grassroot .o-asia__section-desc { margin-top: 30px; margin-bottom: 30px; } } @media (max-width: 767px) { .o-asia-grassroot .o-asia__section-desc { margin-top: 27px; margin-bottom: 20px; } } .o-asia-reason { position: relative; margin-top: -70px; padding-top: 117px; padding-bottom: 100px; } @media (max-width: 1199px) { .o-asia-reason { margin-top: -70px; padding-top: 125px; padding-bottom: 80px; } } @media (max-width: 767px) { .o-asia-reason { margin-top: -55px; padding-top: 78px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } @media (min-width: 768px) { .o-asia-reason:before { content: ''; width: 50%; right: 50%; height: 100%; background: #fdfdfd; display: block; top: 0; position: absolute; z-index: -1; } } .o-asia-reason .a-topic-page-section-title { margin-bottom: 40px; position: relative; z-index: 2; } @media (max-width: 1199px) { .o-asia-reason .a-topic-page-section-title { margin-bottom: 30px; } } .o-asia-reason__source { font-size: 12px; font-weight: 400; line-height: 1.8; color: #67676e; } .-lang-en .o-asia-reason__source { line-height: 1.5; letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .o-asia-reason__source { font-size: 13px; line-height: 1.2; letter-spacing: normal; } @media (min-width: 1200px) { .o-asia-reason__source { text-align: center; } } @media (min-width: 768px) { .o-investing-how-to .a-topic-page-section-title br { display: none; } } .o-investing-how-to-mobile-bg { z-index: -1; position: absolute; left: 50%; top: 56%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-family: KlavikaWebBasic, sans-serif; font-size: 55px; font-weight: bold; line-height: 0.91; letter-spacing: -1.92px; text-align: center; color: #fafafa; } .o-investing-how-to-desc { font-size: 18px; font-weight: 400; letter-spacing: 1.5px; line-height: 1.5; color: #67676e; text-align: center; margin-bottom: 60px; } .-lang-en .o-investing-how-to-desc { letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .o-investing-how-to-desc { letter-spacing: normal; } @media (max-width: 1199px) { .o-investing-how-to-desc { font-size: 16px; letter-spacing: 0px; } .-lang-en .o-investing-how-to-desc { line-height: 1.38; } .-en .o-investing-how-to-desc { letter-spacing: normal; } } @media (max-width: 767px) { .o-investing-how-to-desc { font-size: 15px; } .-lang-en .o-investing-how-to-desc { line-height: 1.33; } } @media (max-width: 767px) { .o-investing-how-to-desc br { display: none; } } .o-investing-how-to-source { font-size: 12px; font-weight: 400; line-height: 1.8; margin-top: 20px; color: #67676e; text-align: center; } .-lang-en .o-investing-how-to-source { line-height: 1.5; letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .o-investing-how-to-source { font-size: 13px; line-height: 1.2; letter-spacing: normal; } .o-investing-how-to__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; margin: 0 -12px; } .o-investing-how-to__item { -webkit-box-flex: 1; -ms-flex: 1 1 25%; flex: 1 1 25%; padding: 0 12px; color: #67676e; -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease; transition: opacity 0.3s ease, -webkit-transform 0.3s ease; transition: opacity 0.3s ease, transform 0.3s ease; transition: opacity 0.3s ease, transform 0.3s ease, -webkit-transform 0.3s ease; cursor: pointer; } @media (max-width: 1199px) { .o-investing-how-to__item { -webkit-box-flex: 1; -ms-flex: 1 1 180px; flex: 1 1 180px; } } .o-investing-how-to__item .white-fill { fill: #fff; } .o-investing-how-to__item.-active .o-investing-how-to__item-animate-icon { -webkit-transform: scale(1); transform: scale(1); } .o-investing-how-to__item.-active .o-investing-how-to__item-title { -webkit-transform: scale(1); transform: scale(1); } .o-investing-how-to__item.-active .o-investing-how-to__item-desc { opacity: 1; } .o-investing-how-to__item-animate-icon { position: relative; overflow: hidden; width: 218px; height: 218px; margin: 0 auto; -webkit-transform: scale(0.58); transform: scale(0.58); -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.75, -1.1, 0.3, 2.1) !important; transition: -webkit-transform 0.6s cubic-bezier(0.75, -1.1, 0.3, 2.1) !important; transition: transform 0.6s cubic-bezier(0.75, -1.1, 0.3, 2.1) !important; transition: transform 0.6s cubic-bezier(0.75, -1.1, 0.3, 2.1), -webkit-transform 0.6s cubic-bezier(0.75, -1.1, 0.3, 2.1) !important; } @media (max-width: 1199px) { .o-investing-how-to__item-animate-icon { width: 160px; height: 160px; } } .o-investing-how-to__item-animate-icon svg { overflow: visible; } body:not(.-ie) .o-investing-how-to__item-animate-icon svg path { stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; } .o-investing-how-to__item-title { font-size: 24px; font-weight: 700; letter-spacing: 1px; line-height: 1.5; -webkit-transform: scale(0.75); transform: scale(0.75); -webkit-transition: -webkit-transform 0.6s ease; transition: -webkit-transform 0.6s ease; transition: transform 0.6s ease; transition: transform 0.6s ease, -webkit-transform 0.6s ease; margin: 15px 0 0; text-align: center; } .-lang-en .o-investing-how-to__item-title { line-height: 1.25; letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .o-investing-how-to__item-title { font-size: 22px; letter-spacing: 0.5px; line-height: 1; } @media (max-width: 1199px) { .o-investing-how-to__item-title { font-size: 20px; } .-lang-en .o-investing-how-to__item-title { font-size: 24px; line-height: 1.2; } .-en .o-investing-how-to__item-title { font-size: 18px; } } @media (max-width: 767px) { .o-investing-how-to__item-title { font-size: 18px; } } @media (max-width: 1199px) { .o-investing-how-to__item-title { margin: 20px 0 0; -webkit-transform: scale(0.9); transform: scale(0.9); } } .o-investing-how-to__item-desc { font-size: 18px; font-weight: 400; letter-spacing: 1.5px; line-height: 1.5; text-align: center; margin-top: 10px; opacity: 0; -webkit-transition: opacity 0.6s ease; transition: opacity 0.6s ease; } .-lang-en .o-investing-how-to__item-desc { letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .o-investing-how-to__item-desc { letter-spacing: normal; } @media (max-width: 1199px) { .o-investing-how-to__item-desc { font-size: 16px; letter-spacing: 0px; } .-lang-en .o-investing-how-to__item-desc { line-height: 1.38; } .-en .o-investing-how-to__item-desc { letter-spacing: normal; } } @media (max-width: 767px) { .o-investing-how-to__item-desc { font-size: 15px; } .-lang-en .o-investing-how-to__item-desc { line-height: 1.33; } } .o-investing-how-to__mobile-list { position: relative; margin-top: -35px; } .o-investing-how-to__mobile-list.-active-0 svg#investing-mobile-slider .item:nth-child(1) .item__circle-yellow { stroke-dashoffset: 0; } .o-investing-how-to__mobile-list.-active-0 svg#investing-mobile-slider .item:nth-child(1) .item__icon { opacity: 1; } .o-investing-how-to__mobile-list.-active-0 .o-investing-how-to__mobile-list-item:nth-child(1) { color: #b1c425; } .o-investing-how-to__mobile-list.-active-1 svg#investing-mobile-slider .item:nth-child(2) .item__circle-yellow { stroke-dashoffset: 0; } .o-investing-how-to__mobile-list.-active-1 svg#investing-mobile-slider .item:nth-child(2) .item__icon { opacity: 1; } .o-investing-how-to__mobile-list.-active-1 .o-investing-how-to__mobile-list-item:nth-child(2) { color: #b1c425; } .o-investing-how-to__mobile-list.-active-2 svg#investing-mobile-slider .item:nth-child(3) .item__circle-yellow { stroke-dashoffset: 0; } .o-investing-how-to__mobile-list.-active-2 svg#investing-mobile-slider .item:nth-child(3) .item__icon { opacity: 1; } .o-investing-how-to__mobile-list.-active-2 .o-investing-how-to__mobile-list-item:nth-child(3) { color: #b1c425; } .o-investing-how-to__mobile-list svg#investing-mobile-slider { position: relative; left: -91px; } .o-investing-how-to__mobile-list svg#investing-mobile-slider .item__circle-yellow { stroke-dasharray: 235; stroke-dashoffset: 235; -webkit-transition: stroke-dashoffset 0.6s linear; transition: stroke-dashoffset 0.6s linear; } body:not(.-ie) .o-investing-how-to__mobile-list svg#investing-mobile-slider .item__circle-yellow { stroke-linecap: round; stroke-linejoin: round; } .o-investing-how-to__mobile-list svg#investing-mobile-slider .item__icon { opacity: 0.4; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .o-investing-how-to__mobile-list-static-img { position: absolute; left: -20px; top: 8px; } .o-investing-how-to__mobile-list-icon { position: absolute; top: 88px; left: 150px; z-index: -1; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .o-investing-how-to__mobile-list-main { position: absolute; left: 0; top: 0; padding: 35px 0; } .o-investing-how-to__mobile-list-item { padding: 13px 0 13px 96px; height: 80px; font-size: 18px; font-weight: 700; letter-spacing: 1px; line-height: 1.5; color: #67676e; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: color 0.3s ease; transition: color 0.3s ease; } .-lang-en .o-investing-how-to__mobile-list-item { font-family: KlavikaWebBasic, sans-serif; font-size: 24px; line-height: 0.9; letter-spacing: normal; } .-en .o-investing-how-to__mobile-list-item { line-height: 1.2; letter-spacing: normal; } @media (max-width: 1199px) { .o-investing-how-to__mobile-list-item { font-size: 15px; } .-lang-en .o-investing-how-to__mobile-list-item { font-size: 18px; line-height: 1.2; } } .o-investing-how-to__mobile-list-item:not(:last-child) { margin: 0 0 10px; } .o-investing-how-to__mobile-list-item:nth-child(2) { padding-left: 130px; } .o-investing-how-to__mobile-list-item-text { display: block; max-width: 188px; } .o-investing-how-to__mobile-list-desc { font-size: 18px; font-weight: 400; letter-spacing: 1.5px; line-height: 1.5; color: #67676e; -webkit-transition: color 0.3s ease; transition: color 0.3s ease; height: 90px; overflow: hidden; margin-top: -20px; } .-lang-en .o-investing-how-to__mobile-list-desc { letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .o-investing-how-to__mobile-list-desc { letter-spacing: normal; } @media (max-width: 1199px) { .o-investing-how-to__mobile-list-desc { font-size: 16px; letter-spacing: 0px; } .-lang-en .o-investing-how-to__mobile-list-desc { line-height: 1.38; } .-en .o-investing-how-to__mobile-list-desc { letter-spacing: normal; } } @media (max-width: 767px) { .o-investing-how-to__mobile-list-desc { font-size: 15px; } .-lang-en .o-investing-how-to__mobile-list-desc { line-height: 1.33; } } @media (max-width: 767px) { .o-investing-how-to__mobile-list-desc { margin-top: 0px; } } .quote { padding-top: 151px; } @media (max-width: 1199px) { .quote { padding-top: 55px; } } .quote__block { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .quote__wrapper { padding: 12.5px; width: 25%; } @media (max-width: 1199px) { .quote__wrapper { width: 50%; padding: 31.5px 27.5px; } } @media (max-width: 767px) { .quote__wrapper { width: 100%; padding: 23.5px 0; } } .quote__note { font-size: 12px; font-weight: 400; line-height: 1.8; margin-top: 20px; color: #67676e; text-align: center; } .-lang-en .quote__note { line-height: 1.5; letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .quote__note { font-size: 13px; line-height: 1.2; letter-spacing: normal; } .quote-tw { padding-top: 151px; } @media (max-width: 1199px) { .quote-tw { padding-top: 55px; } } .quote-tw__block { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .quote-tw__wrapper { padding: 12.5px; width: 20%; } @media (max-width: 1199px) { .quote-tw__wrapper { width: 50%; padding: 31.5px 27.5px; } } @media (max-width: 767px) { .quote-tw__wrapper { width: 100%; padding: 23.5px 0; } } .quote-tw__note { font-size: 12px; font-weight: 400; line-height: 1.8; margin-top: 20px; color: #67676e; text-align: center; } .-lang-en .quote-tw__note { line-height: 1.5; letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .quote-tw__note { font-size: 13px; line-height: 1.2; letter-spacing: normal; } .o-organization { margin-top: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; } @media (max-width: 1199px) { .o-organization { padding: 0 20px; } } @media (max-width: 767px) { .o-organization { margin-top: 80px; display: block; } } .o-organization-tw .m-organization-tw__group { margin-top: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (max-width: 1199px) { .o-organization-tw .m-organization-tw__group { padding: 0 20px; } } @media (max-width: 767px) { .o-organization-tw .m-organization-tw__group { margin-top: 80px; display: block; } } .o-investing-tree__head { text-align: center; width: 855px; max-width: 100%; margin: 0 auto; } .o-investing-tree__title { font-size: 42px; font-weight: 700; letter-spacing: 2px; line-height: 1.2; color: #b1c425; margin-bottom: 20px; } .-lang-en .o-investing-tree__title { line-height: 1.07; letter-spacing: 0.5px; font-family: KlavikaWebBasic, sans-serif; } .-en .o-investing-tree__title { font-size: 30px; letter-spacing: 0.5px; } @media (max-width: 1199px) { .o-investing-tree__title { font-size: 32px; } .-lang-en .o-investing-tree__title { line-height: 1.19; } .-en .o-investing-tree__title { font-size: 26px; line-height: 1.2; } } @media (max-width: 767px) { .o-investing-tree__title { font-size: 26px; } .-lang-en .o-investing-tree__title { line-height: 1.15; } .-en .o-investing-tree__title { font-size: 22px; } } .-en .o-investing-tree__title { text-transform: uppercase; } .o-investing-tree__main { position: relative; overflow: hidden; padding-bottom: 45%; } @media (max-width: 1199px) { .o-investing-tree__main { margin-top: 30px; padding-bottom: 60%; } } @media (max-width: 767px) { .o-investing-tree__main { height: auto; margin-top: 0px; margin-bottom: 15px; } } .o-investing-tree__main svg { pointer-events: none; width: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .o-investing-tree__main svg body:not(.-ie) path, .o-investing-tree__main svg body:not(.-ie) line, .o-investing-tree__main svg body:not(.-edge) path, .o-investing-tree__main svg body:not(.-edge) line, body:not(.-firefox) .o-investing-tree__main svg path, body:not(.-firefox) .o-investing-tree__main svg line { stroke-linecap: round; stroke-miterlimit: 10; } #tree_loop.animation-loop .o-investing-tree__main svg #sun-rotate { -webkit-animation: rotate-shine 10s linear forwards infinite; animation: rotate-shine 10s linear forwards infinite; } @-webkit-keyframes rotate-shine { 0% { opacity: 1; -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { opacity: 0.4; } 100% { opacity: 1; -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate-shine { 0% { opacity: 1; -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { opacity: 0.4; } 100% { opacity: 1; -webkit-transform: rotate(360deg); transform: rotate(360deg); } } #tree_loop.animation-loop .o-investing-tree__main svg #raindrops path { -webkit-animation: rainDrops 1.5s ease-in forwards infinite; animation: rainDrops 1.5s ease-in forwards infinite; opacity: 0; } @-webkit-keyframes rainDrops { 0% { opacity: 0; -webkit-transform: translateY(0); transform: translateY(0); } 50% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 70% { opacity: 0; -webkit-transform: translateY(50%); transform: translateY(50%); } } @keyframes rainDrops { 0% { opacity: 0; -webkit-transform: translateY(0); transform: translateY(0); } 50% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 70% { opacity: 0; -webkit-transform: translateY(50%); transform: translateY(50%); } } #tree_loop.animation-loop .o-investing-tree__main svg #raindrops path:nth-child(2) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } #tree_loop.animation-loop .o-investing-tree__main svg #raindrops path:nth-child(3) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } #tree_loop.animation-loop .o-investing-tree__main svg #raindrops path:nth-child(4) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .o-investing-tree__desc { font-size: 18px; font-weight: 400; letter-spacing: 1.5px; line-height: 1.5; color: #67676e; } .-lang-en .o-investing-tree__desc { letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .o-investing-tree__desc { letter-spacing: normal; } @media (max-width: 1199px) { .o-investing-tree__desc { font-size: 16px; letter-spacing: 0px; } .-lang-en .o-investing-tree__desc { line-height: 1.38; } .-en .o-investing-tree__desc { letter-spacing: normal; } } @media (max-width: 767px) { .o-investing-tree__desc { font-size: 15px; } .-lang-en .o-investing-tree__desc { line-height: 1.33; } } .o-investing-tree__source { font-size: 12px; font-weight: 400; line-height: 1.8; text-align: center; letter-spacing: normal; color: #67676e; margin-top: 30px; } .-lang-en .o-investing-tree__source { line-height: 1.5; letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .o-investing-tree__source { font-size: 13px; line-height: 1.2; letter-spacing: normal; } @media (max-width: 1199px) { .o-investing-tree__source { margin-top: 50px; } } @media (max-width: 767px) { .o-investing-tree__source { margin-top: 20px; text-align: left; } } .o-investing-tree__footer { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0 30px; } @media (max-width: 1199px) { .o-investing-tree__footer { padding: 0px; margin-top: 20px; } } @media (max-width: 767px) { .o-investing-tree__footer { display: none; } } @media (min-width: 768px) { .o-investing-tree__footer-mobile { display: none; } } .o-investing-tree__item { width: 33.33333%; -ms-flex-negative: 0; flex-shrink: 0; padding: 0 60px; text-align: center; } @media (max-width: 1199px) { .o-investing-tree__item { padding: 0 10px; } } .o-investing-tree__item:first-child { padding-left: 70px; padding-right: 50px; } @media (max-width: 1199px) { .o-investing-tree__item:first-child { padding-left: 0; padding-right: 20px; } } .o-investing-tree__item:last-child { padding-left: 50px; padding-right: 70px; } @media (max-width: 1199px) { .o-investing-tree__item:last-child { padding-left: 20px; padding-right: 0; } } .o-investing-tree__item-title { font-size: 22px; font-weight: 700; letter-spacing: 0px; line-height: 1.5; color: #b1c425; margin-bottom: 10px; } .-lang-en .o-investing-tree__item-title { font-size: 24px; line-height: 1.25; letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .o-investing-tree__item-title { font-size: 20px; line-height: 1.2; letter-spacing: normal; } @media (max-width: 1199px) { .o-investing-tree__item-title { font-size: 18px; } .-lang-en .o-investing-tree__item-title { line-height: 1.2; } .-en .o-investing-tree__item-title { font-size: 16px; } } .o-investing-tree__item-desc { font-size: 16px; font-weight: 400; letter-spacing: 1px; line-height: 1.5; color: #67676e; } .-lang-en .o-investing-tree__item-desc { font-family: KlavikaWebBasic, sans-serif; letter-spacing: normal; } .-en .o-investing-tree__item-desc { letter-spacing: normal; } @media (max-width: 767px) { .o-investing-tree__item-desc { font-size: 15px; } } .o-investing-tree-swip__item { position: relative; overflow: hidden; padding: 10px 16px; min-height: 130px; width: 33.33333%; } .o-investing-tree-swip__item-desc, .o-investing-tree-swip__item-title { text-align: center; } .o-investing-tree-swip__item-desc::before, .o-investing-tree-swip__item-desc::after, .o-investing-tree-swip__item-title::before, .o-investing-tree-swip__item-title::after { display: block; content: ''; position: absolute; background-color: #55469b; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; } .o-investing-tree-swip__item-desc::before, .o-investing-tree-swip__item-title::before { top: 0; bottom: 0; width: 2px; -webkit-transform: scaleY(0); transform: scaleY(0); } .o-investing-tree-swip__item-desc::after, .o-investing-tree-swip__item-title::after { left: 0; right: 0; height: 2px; -webkit-transform: scaleX(0); transform: scaleX(0); } .o-investing-tree-swip__item-desc { max-width: 280px; margin: 0 auto; font-size: 16px; font-weight: 400; letter-spacing: 1px; line-height: 1.5; color: #67676e; } .-lang-en .o-investing-tree-swip__item-desc { font-family: KlavikaWebBasic, sans-serif; letter-spacing: normal; } .-en .o-investing-tree-swip__item-desc { letter-spacing: normal; } @media (max-width: 767px) { .o-investing-tree-swip__item-desc { font-size: 15px; } } .o-investing-tree-swip__item-desc::before { left: 0; -webkit-transform-origin: bottom; transform-origin: bottom; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } .o-investing-tree-swip__item-desc::after { -webkit-transform-origin: left; transform-origin: left; top: 0; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .o-investing-tree-swip__item-title { font-size: 22px; font-weight: 700; letter-spacing: 0px; line-height: 1.5; color: #b1c425; margin-bottom: 10px; text-align: center; } .-lang-en .o-investing-tree-swip__item-title { font-size: 24px; line-height: 1.25; letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .o-investing-tree-swip__item-title { font-size: 20px; line-height: 1.2; letter-spacing: normal; } @media (max-width: 1199px) { .o-investing-tree-swip__item-title { font-size: 18px; } .-lang-en .o-investing-tree-swip__item-title { line-height: 1.2; } .-en .o-investing-tree-swip__item-title { font-size: 16px; } } .o-investing-tree-swip__item-title::before { -webkit-transform-origin: top; transform-origin: top; right: 0; } .o-investing-tree-swip__item-title::after { bottom: 0; -webkit-transform-origin: right; transform-origin: right; -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } .o-investing-tree-swip__item.swiper-slide-active .o-investing-tree-swip__item-desc::before { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; -webkit-transform: scaleY(1); transform: scaleY(1); } .o-investing-tree-swip__item.swiper-slide-active .o-investing-tree-swip__item-desc::after { -webkit-transition-timing-function: cubic-bezier(0.3, 0.85, 0.05, 0.88); transition-timing-function: cubic-bezier(0.3, 0.85, 0.05, 0.88); -webkit-transition-duration: 1.4s; transition-duration: 1.4s; -webkit-transition-delay: 0.6s; transition-delay: 0.6s; -webkit-transform: scaleX(1) translateX(-10%); transform: scaleX(1) translateX(-10%); } .o-investing-tree-swip__item.swiper-slide-active .o-investing-tree-swip__item-title::before { -webkit-transition-delay: 0; transition-delay: 0; -webkit-transform: scaleY(1); transform: scaleY(1); } .o-investing-tree-swip__item.swiper-slide-active .o-investing-tree-swip__item-title::after { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .o-investing-tree-swip .swiper-container { width: 320px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .o-investing-tree-swip .swiper-container .swiper-pagination-bullet::before, .o-investing-tree-swip .swiper-container .swiper-pagination-bullet::after { background-color: #55469b !important; } .o-investing-flower__desc { font-size: 16px; font-weight: 400; letter-spacing: 1px; line-height: 1.5; color: #676770; text-align: center; max-width: 1000px; margin: 0 auto; margin-bottom: 35px; } .-lang-en .o-investing-flower__desc { font-family: KlavikaWebBasic, sans-serif; letter-spacing: normal; } .-en .o-investing-flower__desc { letter-spacing: normal; } @media (max-width: 767px) { .o-investing-flower__desc { font-size: 15px; } } @media (max-width: 767px) { .o-investing-flower__desc { margin-bottom: 0; } .o-investing-flower__desc br { display: none; } } .o-investing-flower__source { margin-top: 20px; font-size: 12px; font-weight: 400; line-height: 1.8; letter-spacing: normal; color: #67676e; text-align: center; } .-lang-en .o-investing-flower__source { line-height: 1.5; letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .o-investing-flower__source { font-size: 13px; line-height: 1.2; letter-spacing: normal; } .o-investing-flower__main { position: relative; overflow: hidden; width: 100%; height: 514px; } @media (max-width: 767px) { .o-investing-flower__main { height: 640px; } } .o-investing-flower__wrapper { position: absolute; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: 0; left: 50%; width: 1200px; height: 514px; } @media (max-width: 767px) { .o-investing-flower__wrapper { width: 750px; height: 635px; } } @-webkit-keyframes float-cloud { 0% { -webkit-transform: translateX(0px); transform: translateX(0px); opacity: 1; } 50% { -webkit-transform: translateX(50px); transform: translateX(50px); opacity: 0; } 51% { -webkit-transform: translateX(-50px); transform: translateX(-50px); opacity: 0; } 100% { -webkit-transform: translateX(0px); transform: translateX(0px); opacity: 1; } } @keyframes float-cloud { 0% { -webkit-transform: translateX(0px); transform: translateX(0px); opacity: 1; } 50% { -webkit-transform: translateX(50px); transform: translateX(50px); opacity: 0; } 51% { -webkit-transform: translateX(-50px); transform: translateX(-50px); opacity: 0; } 100% { -webkit-transform: translateX(0px); transform: translateX(0px); opacity: 1; } } .o-investing-flower__wrapper.animation-loop svg path#cloud-L { -webkit-animation: float-cloud 10s linear infinite; animation: float-cloud 10s linear infinite; } .o-investing-flower__wrapper.animation-loop svg path#cloud-R { -webkit-animation: float-cloud 7s linear infinite; animation: float-cloud 7s linear infinite; } .o-investing-flower__leaf { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 10px; opacity: 0; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .o-investing-flower__leaf-title { font-size: 16px; font-weight: bold; line-height: 1.5; letter-spacing: 1px; color: #676770; max-width: 170px; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } @media (max-width: 767px) { .o-investing-flower__leaf-title { max-width: 135px; } } body.-en .o-investing-flower__leaf-title { max-width: 220px; } @media (max-width: 767px) { body.-en .o-investing-flower__leaf-title { max-width: 150px; letter-spacing: 0; line-height: 1.2; } } .o-investing-flower__leaf-num { font-size: 42px; font-weight: 700; letter-spacing: 2px; line-height: 1.2; font-family: KlavikaWebBasic, sans-serif; color: #676770; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; position: relative; } @media (max-width: 767px) { .o-investing-flower__leaf-num { font-size: 40px; } } .-ie .o-investing-flower__leaf-num { font-size: 36px; } .o-investing-flower__leaf-unit { font-size: 12px; position: absolute; left: 100%; bottom: 10px; } .o-investing-flower__leaf[data-index="0"] { left: 51.7%; top: 74%; } body.-en .o-investing-flower__leaf[data-index="0"] { top: 72%; left: 52.2%; } @media (max-width: 767px) { body.-en .o-investing-flower__leaf[data-index="0"] { top: 72%; } } @media (max-width: 767px) { body.-en .o-investing-flower__leaf[data-index="0"] .o-investing-flower__leaf-title { max-width: 154px; -webkit-transform: translate(-57px, 78px); transform: translate(-57px, 78px); } } .o-investing-flower__leaf[data-index="0"] .o-investing-flower__leaf-title { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; margin-left: 35px; } @media (max-width: 767px) { .o-investing-flower__leaf[data-index="0"] .o-investing-flower__leaf-title { max-width: 85px; margin-left: 0; -webkit-transform: translateY(60px); transform: translateY(60px); } } @media (max-width: 1199px) { .o-investing-flower__leaf[data-index="0"] { left: 51.3%; top: 73.3%; } } @media (max-width: 767px) { .o-investing-flower__leaf[data-index="0"] { top: 74.5%; } } .o-investing-flower__leaf[data-index="1"] { right: 52%; top: 65%; } body.-en .o-investing-flower__leaf[data-index="1"] { right: 51.5%; } @media (max-width: 767px) { body.-en .o-investing-flower__leaf[data-index="1"] { right: 52.5%; } } @media (max-width: 767px) { body.-en .o-investing-flower__leaf[data-index="1"] .o-investing-flower__leaf-title { margin-right: 0; -webkit-transform: translate(56px, -63px); transform: translate(56px, -63px); } } .o-investing-flower__leaf[data-index="1"] .o-investing-flower__leaf-title { margin-right: 35px; } @media (max-width: 767px) { .o-investing-flower__leaf[data-index="1"] .o-investing-flower__leaf-title { margin-right: 13px; -webkit-transform: translate(25px, -70px); transform: translate(25px, -70px); } } @media (max-width: 767px) { .o-investing-flower__leaf[data-index="1"] { top: 63%; right: 53%; } } .o-investing-flower__leaf[data-index="2"] { left: 51.8%; top: 54%; } .-ie .o-investing-flower__leaf[data-index="2"] { left: 51.4%; top: 53%; } body.-en .o-investing-flower__leaf[data-index="2"] { left: 52.2%; } @media (max-width: 767px) { body.-en .o-investing-flower__leaf[data-index="2"] .o-investing-flower__leaf-title { margin-right: 0; -webkit-transform: translate(-57px, -66px); transform: translate(-57px, -66px); } } .o-investing-flower__leaf[data-index="2"] .o-investing-flower__leaf-title { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; margin-left: 35px; } @media (max-width: 767px) { .o-investing-flower__leaf[data-index="2"] .o-investing-flower__leaf-title { margin-left: 0px; -webkit-transform: translate(-26px, -80px); transform: translate(-26px, -80px); } } @media (max-width: 767px) { .o-investing-flower__leaf[data-index="2"] { top: 52%; } } .o-investing-flower__leaf[data-index="3"] { right: 52.6%; top: 43.44%; } body.-en .o-investing-flower__leaf[data-index="3"] { top: 41%; right: 52%; } @media (max-width: 767px) { body.-en .o-investing-flower__leaf[data-index="3"] { right: 53%; } } @media (max-width: 767px) { body.-en .o-investing-flower__leaf[data-index="3"] .o-investing-flower__leaf-title { -webkit-transform: translate(56px, -89px); transform: translate(56px, -89px); } } .-ie .o-investing-flower__leaf[data-index="3"] { right: 53%; top: 44.44%; } .o-investing-flower__leaf[data-index="3"] .o-investing-flower__leaf-title { margin-right: 35px; } @media (max-width: 767px) { .o-investing-flower__leaf[data-index="3"] .o-investing-flower__leaf-title { margin-right: 0px; -webkit-transform: translate(55px, -95px); transform: translate(55px, -95px); text-align: right; } } @media (max-width: 767px) { .o-investing-flower__leaf[data-index="3"] { top: 41.44%; right: 54%; } } .o-investing-flower.-active .o-investing-flower__leaf { opacity: 1; } .o-investing-flower svg { display: block; width: 100%; } @media (max-width: 767px) { .o-investing-flower svg { -webkit-transform: translate(-43px, 10px); transform: translate(-43px, 10px); } } @media (max-width: 1199px) and (min-width: 768px) { .o-investing-flower svg #earth-L2 { -webkit-transform: scaleX(0.6) translateX(250px); transform: scaleX(0.6) translateX(250px); } .o-investing-flower svg #shovel, .o-investing-flower svg #earth-shovel { -webkit-transform: translateX(50px); transform: translateX(50px); } .o-investing-flower svg #cloud-L-trasform { -webkit-transform: translate(70px, -70px) scale(0.7); transform: translate(70px, -70px) scale(0.7); -webkit-transform-origin: center; transform-origin: center; } .o-investing-flower svg #cloud-R-trasform { -webkit-transform: translate(-70px, -20px) scale(0.7); transform: translate(-70px, -20px) scale(0.7); -webkit-transform-origin: center; transform-origin: center; } } body:not(.-ie) .o-investing-flower svg path { stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; } @media (min-width: 768px) { .o-mitigation-why-this .a-topic-page-section-title br { display: none; } } .o-mitigation-why-this-mobile-bg { z-index: -1; position: absolute; left: 50%; top: 55%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-family: KlavikaWebBasic, sans-serif; font-size: 55px; font-weight: bold; line-height: 0.91; letter-spacing: -1.92px; text-align: center; color: #fafafa; } .o-mitigation-why-this-desc { font-size: 18px; font-weight: 400; letter-spacing: 1.5px; line-height: 1.5; color: #67676e; text-align: center; margin-bottom: 60px; } .-lang-en .o-mitigation-why-this-desc { letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .o-mitigation-why-this-desc { letter-spacing: normal; } @media (max-width: 1199px) { .o-mitigation-why-this-desc { font-size: 16px; letter-spacing: 0px; } .-lang-en .o-mitigation-why-this-desc { line-height: 1.38; } .-en .o-mitigation-why-this-desc { letter-spacing: normal; } } @media (max-width: 767px) { .o-mitigation-why-this-desc { font-size: 15px; } .-lang-en .o-mitigation-why-this-desc { line-height: 1.33; } } @media (max-width: 767px) { .o-mitigation-why-this-desc br { display: none; } } .o-mitigation-why-this-source { font-size: 12px; font-weight: 400; line-height: 1.8; margin-top: 20px; color: #67676e; text-align: center; } .-lang-en .o-mitigation-why-this-source { line-height: 1.5; letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .o-mitigation-why-this-source { font-size: 13px; line-height: 1.2; letter-spacing: normal; } .o-mitigation-why-this__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; margin: 0 -12px; } .o-mitigation-why-this__item { -webkit-box-flex: 1; -ms-flex: 1 1 25%; flex: 1 1 25%; padding: 0 12px; color: #67676e; -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease; transition: opacity 0.3s ease, -webkit-transform 0.3s ease; transition: opacity 0.3s ease, transform 0.3s ease; transition: opacity 0.3s ease, transform 0.3s ease, -webkit-transform 0.3s ease; cursor: pointer; } @media (max-width: 1199px) { .o-mitigation-why-this__item { -webkit-box-flex: 1; -ms-flex: 1 1 180px; flex: 1 1 180px; } } .o-mitigation-why-this__item .white-fill { fill: #fff; } .o-mitigation-why-this__item.-active .o-mitigation-why-this__item-animate-icon { -webkit-transform: scale(1); transform: scale(1); } .o-mitigation-why-this__item.-active .o-mitigation-why-this__item-title { -webkit-transform: scale(1); transform: scale(1); } .o-mitigation-why-this__item.-active .o-mitigation-why-this__item-desc { opacity: 1; } .o-mitigation-why-this__item-animate-icon { position: relative; overflow: hidden; width: 218px; height: 218px; margin: 0 auto; -webkit-transform: scale(0.58); transform: scale(0.58); -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.75, -1.1, 0.3, 2.1) !important; transition: -webkit-transform 0.6s cubic-bezier(0.75, -1.1, 0.3, 2.1) !important; transition: transform 0.6s cubic-bezier(0.75, -1.1, 0.3, 2.1) !important; transition: transform 0.6s cubic-bezier(0.75, -1.1, 0.3, 2.1), -webkit-transform 0.6s cubic-bezier(0.75, -1.1, 0.3, 2.1) !important; } @media (max-width: 1199px) { .o-mitigation-why-this__item-animate-icon { width: 160px; height: 160px; } } .o-mitigation-why-this__item-animate-icon svg { overflow: visible; } body:not(.-ie) .o-mitigation-why-this__item-animate-icon svg path { stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; } .o-mitigation-why-this__item-title { font-size: 24px; font-weight: 700; letter-spacing: 1px; line-height: 1.5; -webkit-transform: scale(0.75); transform: scale(0.75); -webkit-transition: -webkit-transform 0.6s ease; transition: -webkit-transform 0.6s ease; transition: transform 0.6s ease; transition: transform 0.6s ease, -webkit-transform 0.6s ease; margin: 15px 0 0; text-align: center; } .-lang-en .o-mitigation-why-this__item-title { line-height: 1.25; letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .o-mitigation-why-this__item-title { font-size: 22px; letter-spacing: 0.5px; line-height: 1; } @media (max-width: 1199px) { .o-mitigation-why-this__item-title { font-size: 20px; } .-lang-en .o-mitigation-why-this__item-title { font-size: 24px; line-height: 1.2; } .-en .o-mitigation-why-this__item-title { font-size: 18px; } } @media (max-width: 767px) { .o-mitigation-why-this__item-title { font-size: 18px; } } @media (max-width: 1199px) { .o-mitigation-why-this__item-title { margin: 20px 0 0; -webkit-transform: scale(0.9); transform: scale(0.9); } } .o-mitigation-why-this__item-desc { font-size: 18px; font-weight: 400; letter-spacing: 1.5px; line-height: 1.5; text-align: center; margin-top: 10px; opacity: 0; -webkit-transition: opacity 0.6s ease; transition: opacity 0.6s ease; } .-lang-en .o-mitigation-why-this__item-desc { letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .o-mitigation-why-this__item-desc { letter-spacing: normal; } @media (max-width: 1199px) { .o-mitigation-why-this__item-desc { font-size: 16px; letter-spacing: 0px; } .-lang-en .o-mitigation-why-this__item-desc { line-height: 1.38; } .-en .o-mitigation-why-this__item-desc { letter-spacing: normal; } } @media (max-width: 767px) { .o-mitigation-why-this__item-desc { font-size: 15px; } .-lang-en .o-mitigation-why-this__item-desc { line-height: 1.33; } } .o-mitigation-why-this__mobile-list { position: relative; margin-top: -35px; } .o-mitigation-why-this__mobile-list.-active-0 svg#mitigation-mobile-slider .item:nth-child(1) .item__circle-yellow { stroke-dashoffset: 0; } .o-mitigation-why-this__mobile-list.-active-0 svg#mitigation-mobile-slider .item:nth-child(1) .item__icon { opacity: 1; } .o-mitigation-why-this__mobile-list.-active-0 .o-mitigation-why-this__mobile-list-item:nth-child(1) { color: #ff9933; } .o-mitigation-why-this__mobile-list.-active-1 svg#mitigation-mobile-slider .item:nth-child(2) .item__circle-yellow { stroke-dashoffset: 0; } .o-mitigation-why-this__mobile-list.-active-1 svg#mitigation-mobile-slider .item:nth-child(2) .item__icon { opacity: 1; } .o-mitigation-why-this__mobile-list.-active-1 .o-mitigation-why-this__mobile-list-item:nth-child(2) { color: #ff9933; } .o-mitigation-why-this__mobile-list.-active-2 svg#mitigation-mobile-slider .item:nth-child(3) .item__circle-yellow { stroke-dashoffset: 0; } .o-mitigation-why-this__mobile-list.-active-2 svg#mitigation-mobile-slider .item:nth-child(3) .item__icon { opacity: 1; } .o-mitigation-why-this__mobile-list.-active-2 .o-mitigation-why-this__mobile-list-item:nth-child(3) { color: #ff9933; } .o-mitigation-why-this__mobile-list svg#mitigation-mobile-slider { position: relative; left: -91px; } .o-mitigation-why-this__mobile-list svg#mitigation-mobile-slider .item__circle-yellow { stroke-dasharray: 235; stroke-dashoffset: 235; -webkit-transition: stroke-dashoffset 0.6s linear; transition: stroke-dashoffset 0.6s linear; } body:not(.-ie) .o-mitigation-why-this__mobile-list svg#mitigation-mobile-slider .item__circle-yellow { stroke-linecap: round; stroke-linejoin: round; } .o-mitigation-why-this__mobile-list svg#mitigation-mobile-slider .item__icon { opacity: 0.4; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .o-mitigation-why-this__mobile-list-static-img { position: absolute; left: -86px; top: 17px; height: 298px; } .o-mitigation-why-this__mobile-list-icon { position: absolute; top: 88px; left: 150px; z-index: -1; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .o-mitigation-why-this__mobile-list-main { position: absolute; left: 0; top: 0; padding: 35px 0; } .o-mitigation-why-this__mobile-list-item { padding: 13px 0 13px 96px; height: 80px; font-size: 18px; font-weight: 700; letter-spacing: 1px; line-height: 1.5; color: #67676e; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: color 0.3s ease; transition: color 0.3s ease; } .-lang-en .o-mitigation-why-this__mobile-list-item { font-family: KlavikaWebBasic, sans-serif; font-size: 24px; line-height: 0.9; letter-spacing: normal; } .-en .o-mitigation-why-this__mobile-list-item { line-height: 1.2; letter-spacing: normal; } @media (max-width: 1199px) { .o-mitigation-why-this__mobile-list-item { font-size: 15px; } .-lang-en .o-mitigation-why-this__mobile-list-item { font-size: 18px; line-height: 1.2; } } .o-mitigation-why-this__mobile-list-item:not(:last-child) { margin: 0 0 10px; } .o-mitigation-why-this__mobile-list-item:nth-child(2) { padding-left: 130px; } .o-mitigation-why-this__mobile-list-item-text { display: block; max-width: 188px; } .o-mitigation-why-this__mobile-list-desc { font-size: 18px; font-weight: 400; letter-spacing: 1.5px; line-height: 1.5; color: #67676e; -webkit-transition: color 0.3s ease; transition: color 0.3s ease; height: 90px; overflow: hidden; margin-top: -20px; } .-lang-en .o-mitigation-why-this__mobile-list-desc { letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .o-mitigation-why-this__mobile-list-desc { letter-spacing: normal; } @media (max-width: 1199px) { .o-mitigation-why-this__mobile-list-desc { font-size: 16px; letter-spacing: 0px; } .-lang-en .o-mitigation-why-this__mobile-list-desc { line-height: 1.38; } .-en .o-mitigation-why-this__mobile-list-desc { letter-spacing: normal; } } @media (max-width: 767px) { .o-mitigation-why-this__mobile-list-desc { font-size: 15px; } .-lang-en .o-mitigation-why-this__mobile-list-desc { line-height: 1.33; } } @media (max-width: 767px) { .o-mitigation-why-this__mobile-list-desc { margin-top: 0px; } } .o-mitigation-circle-cycle__main { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-top: 60px; } @media (max-width: 1199px) { .o-mitigation-circle-cycle__main { margin-top: 70px; } } @media (max-width: 767px) { .o-mitigation-circle-cycle__main { margin-top: 30px; } } .o-mitigation-circle-cycle__box { width: 464px; height: auto; position: relative; display: block; max-width: 100%; margin-bottom: 50px; } @media (max-width: 1199px) { .o-mitigation-circle-cycle__box { width: 564px; height: auto; } } @media (max-width: 767px) { .o-mitigation-circle-cycle__box { width: 293px; height: auto; margin-bottom: 0; } } .o-mitigation-circle-cycle__box-bg { width: 200px; height: 200px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: 14% auto auto; } @media (max-width: 1199px) { .o-mitigation-circle-cycle__box-bg { margin-top: 23%; } } @media (max-width: 767px) { .o-mitigation-circle-cycle__box-bg { width: 120px; height: 120px; margin-top: 20%; } } .o-mitigation-circle-cycle__box-bg svg { width: 100%; height: 100%; } .o-mitigation-circle-cycle__box-swiper { width: 234px; height: 200px; position: absolute; top: 15%; left: 0; right: 0; margin: auto !important; display: block; overflow: visible; } @media (max-width: 1199px) { .o-mitigation-circle-cycle__box-swiper { top: 25%; } } @media (max-width: 767px) { .o-mitigation-circle-cycle__box-swiper { width: 234px; height: auto; position: relative; top: auto; left: auto; right: auto; margin-top: 55px !important; } } .o-mitigation-circle-cycle__box-summary { width: 100%; height: 100%; font-size: 18px; font-weight: 400; letter-spacing: 1.5px; line-height: 1.5; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; color: #67676e; opacity: 0; -webkit-transition: opacity .3s; transition: opacity .3s; } .-lang-en .o-mitigation-circle-cycle__box-summary { letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .o-mitigation-circle-cycle__box-summary { letter-spacing: normal; } @media (max-width: 1199px) { .o-mitigation-circle-cycle__box-summary { font-size: 16px; letter-spacing: 0px; } .-lang-en .o-mitigation-circle-cycle__box-summary { line-height: 1.38; } .-en .o-mitigation-circle-cycle__box-summary { letter-spacing: normal; } } @media (max-width: 767px) { .o-mitigation-circle-cycle__box-summary { font-size: 15px; } .-lang-en .o-mitigation-circle-cycle__box-summary { line-height: 1.33; } } .swiper-slide-active .o-mitigation-circle-cycle__box-summary { opacity: 1; } .o-mitigation-circle-cycle__box-frame { width: 100%; height: 412px; position: relative; display: block; } @media (max-width: 1199px) { .o-mitigation-circle-cycle__box-frame { width: 100%; height: 519px; } } @media (max-width: 767px) { .o-mitigation-circle-cycle__box-frame { width: 100%; height: 273px; } } .o-mitigation-circle-cycle__box-frame.active-index-0 .o-mitigation-circle-cycle__box-button.-mid .circle-frame-border { stroke-dashoffset: 0; -webkit-transition: stroke-dashoffset 1s; transition: stroke-dashoffset 1s; } .o-mitigation-circle-cycle__box-frame.active-index-0 .o-mitigation-circle-cycle__box-button.-mid .o-mitigation-circle-cycle__box-button-icon .circle-cycle-icon-stroke { stroke: #6ECDCC; } .o-mitigation-circle-cycle__box-frame.active-index-0 .o-mitigation-circle-cycle__box-button.-mid .o-mitigation-circle-cycle__box-button-icon .circle-cycle-icon-fill { fill: #6ECDCC; } .o-mitigation-circle-cycle__box-frame.active-index-0 .o-mitigation-circle-cycle__box-arrow.-left .circle-cycle-arrow-left-border { stroke-dashoffset: 0; -webkit-transition: stroke-dashoffset 4.6s linear; transition: stroke-dashoffset 4.6s linear; } .o-mitigation-circle-cycle__box-frame.active-index-0 .o-mitigation-circle-cycle__box-topic.-mid { color: #6ECDCC; } .o-mitigation-circle-cycle__box-frame.active-index-1 .o-mitigation-circle-cycle__box-button.-left .circle-frame-border { stroke-dashoffset: 0; -webkit-transition: stroke-dashoffset 1s; transition: stroke-dashoffset 1s; } .o-mitigation-circle-cycle__box-frame.active-index-1 .o-mitigation-circle-cycle__box-button.-left .o-mitigation-circle-cycle__box-button-icon .circle-cycle-icon-stroke { stroke: #6ECDCC; } .o-mitigation-circle-cycle__box-frame.active-index-1 .o-mitigation-circle-cycle__box-button.-left .o-mitigation-circle-cycle__box-button-icon .circle-cycle-icon-fill { fill: #6ECDCC; } .o-mitigation-circle-cycle__box-frame.active-index-1 .o-mitigation-circle-cycle__box-arrow.-top .circle-cycle-arrow-top-border { stroke-dashoffset: 0; -webkit-transition: stroke-dashoffset 4.6s linear; transition: stroke-dashoffset 4.6s linear; } .o-mitigation-circle-cycle__box-frame.active-index-1 .o-mitigation-circle-cycle__box-topic.-left { color: #6ECDCC; } .o-mitigation-circle-cycle__box-frame.active-index-2 .o-mitigation-circle-cycle__box-button.-right .circle-frame-border { stroke-dashoffset: 0; -webkit-transition: stroke-dashoffset 1s; transition: stroke-dashoffset 1s; } .o-mitigation-circle-cycle__box-frame.active-index-2 .o-mitigation-circle-cycle__box-button.-right .o-mitigation-circle-cycle__box-button-icon .circle-cycle-icon-stroke { stroke: #6ECDCC; } .o-mitigation-circle-cycle__box-frame.active-index-2 .o-mitigation-circle-cycle__box-button.-right .o-mitigation-circle-cycle__box-button-icon .circle-cycle-icon-fill { fill: #6ECDCC; } .o-mitigation-circle-cycle__box-frame.active-index-2 .o-mitigation-circle-cycle__box-arrow.-right .circle-cycle-arrow-right-border { stroke-dashoffset: 0; -webkit-transition: stroke-dashoffset 4.6s linear; transition: stroke-dashoffset 4.6s linear; } .o-mitigation-circle-cycle__box-frame.active-index-2 .o-mitigation-circle-cycle__box-topic.-right { color: #6ECDCC; } .o-mitigation-circle-cycle__box-button { width: 140px; height: 140px; position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (max-width: 767px) { .o-mitigation-circle-cycle__box-button { width: 70px; height: 70px; } } .o-mitigation-circle-cycle__box-button.-mid { bottom: -13px; left: 0; right: 0; margin: auto; } @media (max-width: 767px) { .o-mitigation-circle-cycle__box-button.-mid { bottom: 0; } } .o-mitigation-circle-cycle__box-button.-left { top: 0; left: -13px; } @media (max-width: 1199px) { .o-mitigation-circle-cycle__box-button.-left { top: 90px; } } @media (max-width: 767px) { .o-mitigation-circle-cycle__box-button.-left { top: 0; left: 0; } } .o-mitigation-circle-cycle__box-button.-right { top: 0; right: -13px; } @media (max-width: 1199px) { .o-mitigation-circle-cycle__box-button.-right { top: 90px; } } @media (max-width: 767px) { .o-mitigation-circle-cycle__box-button.-right { top: 0; right: 0; } } .o-mitigation-circle-cycle__box-button .circle-frame-border { stroke-dasharray: 328; stroke-dashoffset: 329; -webkit-transition: stroke-dashoffset .6s; transition: stroke-dashoffset .6s; } .o-mitigation-circle-cycle__box-button-icon { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: block; } @media (max-width: 767px) { .o-mitigation-circle-cycle__box-button-icon { width: calc(100% + 20px); height: calc(100% + 20px); top: -10px; left: -10px; } } .o-mitigation-circle-cycle__box-button-icon svg { width: 100%; height: 100%; } .o-mitigation-circle-cycle__box-button-icon .circle-cycle-icon-stroke { stroke: #ff9933; -webkit-transition: stroke .2s; transition: stroke .2s; } .o-mitigation-circle-cycle__box-button-icon .circle-cycle-icon-fill { fill: #ff9933; -webkit-transition: fill .2s; transition: fill .2s; } .o-mitigation-circle-cycle__box-arrow { position: absolute; display: block; } .o-mitigation-circle-cycle__box-arrow::before { content: ''; display: block; } .o-mitigation-circle-cycle__box-arrow svg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .o-mitigation-circle-cycle__box-arrow.-left { width: 103px; height: auto; top: 170px; left: 40px; } @media (max-width: 1199px) { .o-mitigation-circle-cycle__box-arrow.-left { width: 123px; top: 252px; left: 30px; } } @media (max-width: 767px) { .o-mitigation-circle-cycle__box-arrow.-left { width: 66px; top: 143px; left: 10px; } } .o-mitigation-circle-cycle__box-arrow.-left::before { padding-bottom: 144.6601%; } .o-mitigation-circle-cycle__box-arrow.-top { width: 165px; height: auto; top: -12px; left: 0; right: 0; margin: auto; } @media (max-width: 1199px) { .o-mitigation-circle-cycle__box-arrow.-top { width: 185px; } } @media (max-width: 767px) { .o-mitigation-circle-cycle__box-arrow.-top { width: 106px; } } .o-mitigation-circle-cycle__box-arrow.-top::before { padding-bottom: 30.3030%; } .o-mitigation-circle-cycle__box-arrow.-right { width: 94px; height: auto; top: 170px; right: 40px; } @media (max-width: 1199px) { .o-mitigation-circle-cycle__box-arrow.-right { width: 114px; top: 260px; right: 30px; } } @media (max-width: 767px) { .o-mitigation-circle-cycle__box-arrow.-right { width: 62px; top: 135px; right: 10px; } } .o-mitigation-circle-cycle__box-arrow.-right::before { padding-bottom: 162.7659%; } .o-mitigation-circle-cycle__box-arrow .circle-cycle-arrow-left-border, .o-mitigation-circle-cycle__box-arrow .circle-cycle-arrow-top-border, .o-mitigation-circle-cycle__box-arrow .circle-cycle-arrow-right-border { -webkit-transition: stroke-dashoffset .6s linear; transition: stroke-dashoffset .6s linear; } .o-mitigation-circle-cycle__box-arrow .circle-cycle-arrow-left-border { stroke-dasharray: 189; stroke-dashoffset: 190; } .o-mitigation-circle-cycle__box-arrow .circle-cycle-arrow-top-border { stroke-dasharray: 189; stroke-dashoffset: 190; } .o-mitigation-circle-cycle__box-arrow .circle-cycle-arrow-right-border { stroke-dasharray: 188; stroke-dashoffset: 189; } .o-mitigation-circle-cycle__box-topic { font-size: 24px; font-weight: 700; letter-spacing: 1px; line-height: 1.5; width: 250px; height: auto; position: absolute; text-align: center; white-space: nowrap; color: #ff9933; -webkit-transition: color .2s; transition: color .2s; } .-lang-en .o-mitigation-circle-cycle__box-topic { line-height: 1.25; letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .o-mitigation-circle-cycle__box-topic { font-size: 22px; letter-spacing: 0.5px; line-height: 1; } @media (max-width: 1199px) { .o-mitigation-circle-cycle__box-topic { font-size: 20px; } .-lang-en .o-mitigation-circle-cycle__box-topic { font-size: 24px; line-height: 1.2; } .-en .o-mitigation-circle-cycle__box-topic { font-size: 18px; } } @media (max-width: 767px) { .o-mitigation-circle-cycle__box-topic { font-size: 18px; } } .o-mitigation-circle-cycle__box-topic.-mid { bottom: -50px; left: 0; right: 0; margin: auto; } @media (max-width: 767px) { .o-mitigation-circle-cycle__box-topic.-mid { bottom: -33px; } } .o-mitigation-circle-cycle__box-topic.-left { top: 12%; left: -280px; text-align: right; } @media (max-width: 1199px) { .o-mitigation-circle-cycle__box-topic.-left { top: 5%; left: -3px; width: 120px; text-align: center; white-space: normal; } } @media (max-width: 767px) { .o-mitigation-circle-cycle__box-topic.-left { top: 27%; left: -16px; width: 102px; } } .o-mitigation-circle-cycle__box-topic.-right { top: 12%; right: -280px; text-align: left; } @media (max-width: 1199px) { .o-mitigation-circle-cycle__box-topic.-right { top: 5%; right: -3px; width: 120px; text-align: center; white-space: normal; } } @media (max-width: 767px) { .o-mitigation-circle-cycle__box-topic.-right { top: 27%; right: -16px; width: 102px; } } .o-mitigation-circle-cycle__summary { font-size: 18px; font-weight: 400; letter-spacing: 1.5px; line-height: 1.5; position: absolute; top: 23%; left: 0; right: 0; margin: auto; display: block; width: 100%; max-width: 384px; text-align: center; color: #67676e; } .-lang-en .o-mitigation-circle-cycle__summary { letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .o-mitigation-circle-cycle__summary { letter-spacing: normal; } @media (max-width: 1199px) { .o-mitigation-circle-cycle__summary { font-size: 16px; letter-spacing: 0px; } .-lang-en .o-mitigation-circle-cycle__summary { line-height: 1.38; } .-en .o-mitigation-circle-cycle__summary { letter-spacing: normal; } } @media (max-width: 767px) { .o-mitigation-circle-cycle__summary { font-size: 15px; } .-lang-en .o-mitigation-circle-cycle__summary { line-height: 1.33; } } @media (max-width: 1199px) { .o-mitigation-circle-cycle__summary { top: 33%; } } @media (max-width: 767px) { .o-mitigation-circle-cycle__summary { position: relative; top: auto; left: auto; right: auto; margin-top: 15px; } } @media (max-width: 767px) { .o-mitigation-circle-cycle__summary br { display: none; } } @media (max-width: 767px) { .o-mitigation-ai-wrapper { overflow-x: hidden; overflow-y: hidden; } } .o-mitigation-ai { padding-top: 140px; padding-bottom: 100px; } @media (min-width: 1200px) { .o-mitigation-ai { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 45px 1fr; grid-template-columns: 1fr 1fr; -ms-grid-rows: auto; grid-template-rows: auto; grid-gap: 0 45px; } .o-mitigation-ai > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } .o-mitigation-ai > *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 3; } .o-mitigation-ai.-video-left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } } @media (max-width: 1199px) { .o-mitigation-ai { padding-top: 100px; padding-bottom: 80px; } } @media (max-width: 767px) { .o-mitigation-ai { padding-bottom: 50px; } } @media (max-width: 1199px) { html.-lang-en .o-mitigation-ai { padding-top: 67px; } } .o-mitigation-ai__left { position: relative; z-index: 10; } @media (min-width: 1200px) { .-video-left .o-mitigation-ai__left { width: 50%; padding-left: 90px; } } .o-mitigation-ai__left-inner { position: relative; } @media (min-width: 1200px) { .o-mitigation-ai__left-inner { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); padding-top: 0px; } } html.-lang-en .o-mitigation-ai__left-inner { padding-top: 27px; margin: 0 auto; max-width: 510px; } @media (max-width: 1199px) { html.-lang-en .o-mitigation-ai__left-inner { max-width: 688px; } } @media (max-width: 479px) { html.-lang-en .o-mitigation-ai__left-inner { max-width: 321px; } } .o-mitigation-ai__left-title { position: relative; font-size: 32px; font-weight: 700; letter-spacing: 2px; line-height: 1.2; margin-bottom: 25px; } .-lang-en .o-mitigation-ai__left-title { line-height: 1.19; letter-spacing: 0.5px; font-family: KlavikaWebBasic, sans-serif; } .-en .o-mitigation-ai__left-title { font-size: 24px; letter-spacing: 0.5px; } @media (max-width: 1199px) { .o-mitigation-ai__left-title { font-size: 26px; } .-lang-en .o-mitigation-ai__left-title { line-height: 1.25; } .-en .o-mitigation-ai__left-title { font-size: 20px; } } @media (max-width: 767px) { .o-mitigation-ai__left-title { font-size: 22px; } .-lang-en .o-mitigation-ai__left-title { font-size: 26px; } } @media (min-width: 1200px) { .o-mitigation-ai__left-title { padding-right: 140px; } } @media (max-width: 1199px) { .o-mitigation-ai__left-title { text-align: center; margin-bottom: 30px; } } @media (max-width: 767px) { .o-mitigation-ai__left-title { margin-bottom: 25px; } } html.-lang-en .o-mitigation-ai__left-title { text-transform: uppercase; } @media (min-width: 1200px) { html.-lang-en .o-mitigation-ai__left-title { padding-right: 0; } } @media (max-width: 1199px) { html.-lang-en .o-mitigation-ai__left-title { max-width: 465px; margin: 0 auto; } } body.-en .o-mitigation-ai__left-title { text-transform: uppercase; padding-right: 130px; } @media (max-width: 1199px) { body.-en .o-mitigation-ai__left-title { padding-right: 0; } } .o-mitigation-ai__left-desc { font-size: 18px; font-weight: 400; letter-spacing: 1.5px; line-height: 1.5; color: #67676e; } .-lang-en .o-mitigation-ai__left-desc { letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .o-mitigation-ai__left-desc { letter-spacing: normal; } @media (max-width: 1199px) { .o-mitigation-ai__left-desc { font-size: 16px; letter-spacing: 0px; } .-lang-en .o-mitigation-ai__left-desc { line-height: 1.38; } .-en .o-mitigation-ai__left-desc { letter-spacing: normal; } } @media (max-width: 767px) { .o-mitigation-ai__left-desc { font-size: 15px; } .-lang-en .o-mitigation-ai__left-desc { line-height: 1.33; } } @media (min-width: 1200px) { .o-mitigation-ai__left-desc { padding-right: 140px; } } @media (max-width: 1199px) { .o-mitigation-ai__left-desc { padding-bottom: 45px; text-align: center; } } @media (max-width: 767px) { .o-mitigation-ai__left-desc { padding-bottom: 40px; } } @media (max-width: 1199px) { html.-lang-en .o-mitigation-ai__left-desc { padding-bottom: 55px; padding-top: 25px; } } @media (max-width: 1199px) { html.-lang-en .o-mitigation-ai__left-desc { padding-right: 20px; padding-left: 20px; } } @media (max-width: 767px) { html.-lang-en .o-mitigation-ai__left-desc { padding-right: 0px; padding-left: 0px; text-align: justify; } } @media (min-width: 1200px) { .-video-left .o-mitigation-ai__right { width: 50%; } } .o-mitigation-ai__right-video { position: relative; } .o-mitigation-ai__right-video-deco-square { position: absolute; width: 75%; height: 100%; top: -40px; left: 50%; display: block; } .-video-left .o-mitigation-ai__right-video-deco-square { left: auto; right: 50%; } @media (max-width: 1199px) { .o-mitigation-ai__right-video-deco-square { top: -30px; } } @media (max-width: 767px) { .o-mitigation-ai__right-video-deco-square { top: -20px; } } .o-mitigation-ai__right-video-deco-square:before, .o-mitigation-ai__right-video-deco-square:after { content: ''; width: 100%; position: absolute; top: 0; left: 0; display: block; } .o-index .o-mitigation-ai__right-video-deco-square:before, .o-index .o-mitigation-ai__right-video-deco-square:after { background-color: #6987b9; } .o-income .o-mitigation-ai__right-video-deco-square:before, .o-income .o-mitigation-ai__right-video-deco-square:after { background-color: #50beaf; } .o-asia .o-mitigation-ai__right-video-deco-square:before, .o-asia .o-mitigation-ai__right-video-deco-square:after { background-color: #b94b9b; } .o-tw-multi-asset .o-mitigation-ai__right-video-deco-square:before, .o-tw-multi-asset .o-mitigation-ai__right-video-deco-square:after { background-color: #1e9bd7; } .o-investing .o-mitigation-ai__right-video-deco-square:before, .o-investing .o-mitigation-ai__right-video-deco-square:after { background-color: #b1c425; } .o-mitigation .o-mitigation-ai__right-video-deco-square:before, .o-mitigation .o-mitigation-ai__right-video-deco-square:after { background-color: #ff9933; } .o-tw-esg .o-mitigation-ai__right-video-deco-square:before, .o-tw-esg .o-mitigation-ai__right-video-deco-square:after { background-color: #b1c425; } .o-mitigation-ai__right-video-deco-square:before { height: calc(100% + 80px); } @media (max-width: 1199px) { .o-mitigation-ai__right-video-deco-square:before { height: calc(100% + 60px); } } @media (max-width: 767px) { .o-mitigation-ai__right-video-deco-square:before { height: calc(100% + 40px); } } .o-mitigation-ai__right-video-deco-square:after { left: 50%; width: 50%; height: 80px; top: -80px; } .-video-left .o-mitigation-ai__right-video-deco-square:after { left: auto; right: 50%; } @media (max-width: 1199px) { .o-mitigation-ai__right-video-deco-square:after { top: -60px; height: 60px; left: 70%; width: 30%; } } @media (max-width: 767px) { .o-mitigation-ai__right-video-deco-square:after { top: -40px; height: 40px; } } .o-mitigation-ai__right-video-trigger { position: relative; cursor: pointer; } .-pc .o-mitigation-ai__right-video-trigger:hover .o-mitigation-ai__right-video-trigger-play .a-circle-frame { -webkit-animation: rotate 0.5s cubic-bezier(0.7, 0, 0.3, 1); animation: rotate 0.5s cubic-bezier(0.7, 0, 0.3, 1); } .o-mitigation-ai__right-video-trigger-video { position: relative; width: 100%; height: auto; z-index: 0; } .o-mitigation-ai__right-video-trigger-video:before { content: ''; display: block; padding-bottom: 56.25%; width: 100%; } .o-mitigation-ai__right-video-trigger-video-thumb { width: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; position: absolute; top: 0; left: 0; } .o-mitigation-ai__right-video-trigger-video-thumb:before { content: ''; width: 100%; padding-bottom: 56.25%; display: block; } .o-mitigation-ai__right-video-trigger-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .o-mitigation-ai__right-video-trigger-border-deco { content: ''; width: 100%; height: calc(100% + 24px); position: absolute; top: -12px; left: -12px; border: 3px solid gray; z-index: 2; } .o-index .o-mitigation-ai__right-video-trigger-border-deco { border-color: #f0e14b; } .o-income .o-mitigation-ai__right-video-trigger-border-deco { border-color: #f0e14b; } .o-asia .o-mitigation-ai__right-video-trigger-border-deco { border-color: #1e9bd7; } .o-tw-multi-asset .o-mitigation-ai__right-video-trigger-border-deco { border-color: #fcba17; } .o-investing .o-mitigation-ai__right-video-trigger-border-deco { border-color: #55469b; } .o-mitigation .o-mitigation-ai__right-video-trigger-border-deco { border-color: #6ECDCC; } .o-tw-esg .o-mitigation-ai__right-video-trigger-border-deco { border-color: #55469b; } .o-mitigation-ai__right-video-trigger-border-deco:before, .o-mitigation-ai__right-video-trigger-border-deco:after { content: ''; width: 40px; height: 3px; position: absolute; } .o-mitigation-ai__right-video-trigger-border-deco:after { left: 40px; bottom: -3px; background: #fff; } .o-index .-video-left .o-mitigation-ai__right-video-trigger-border-deco:after { background-color: #6987b9; } .o-income .-video-left .o-mitigation-ai__right-video-trigger-border-deco:after { background-color: #50beaf; } .o-asia .-video-left .o-mitigation-ai__right-video-trigger-border-deco:after { background-color: #b94b9b; } .o-tw-multi-asset .-video-left .o-mitigation-ai__right-video-trigger-border-deco:after { background-color: #1e9bd7; } .o-investing .-video-left .o-mitigation-ai__right-video-trigger-border-deco:after { background-color: #b1c425; } .o-mitigation .-video-left .o-mitigation-ai__right-video-trigger-border-deco:after { background-color: #ff9933; } .o-tw-esg .-video-left .o-mitigation-ai__right-video-trigger-border-deco:after { background-color: #b1c425; } .o-mitigation-ai__right-video-trigger-border-deco:before { top: 0; right: -3px; top: -3px; } .o-index .o-mitigation-ai__right-video-trigger-border-deco:before { background-color: #6987b9; } .o-income .o-mitigation-ai__right-video-trigger-border-deco:before { background-color: #50beaf; } .o-asia .o-mitigation-ai__right-video-trigger-border-deco:before { background-color: #b94b9b; } .o-tw-multi-asset .o-mitigation-ai__right-video-trigger-border-deco:before { background-color: #1e9bd7; } .o-investing .o-mitigation-ai__right-video-trigger-border-deco:before { background-color: #b1c425; } .o-mitigation .o-mitigation-ai__right-video-trigger-border-deco:before { background-color: #ff9933; } .o-tw-esg .o-mitigation-ai__right-video-trigger-border-deco:before { background-color: #b1c425; } .-video-left .o-mitigation-ai__right-video-trigger-border-deco:before { background: #fff; } .o-mitigation-ai__right-video-trigger-border-deco-line { position: absolute; top: 50%; left: -120px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .-video-left .o-mitigation-ai__right-video-trigger-border-deco-line { left: initial; right: -120px; } @media (max-width: 1199px) { .o-mitigation-ai__right-video-trigger-border-deco-line { display: none; } } .o-mitigation-ai__right-video-trigger-thumb { width: 100%; height: auto; } .o-mitigation-ai__right-video-trigger-play { width: 89px; height: 89px; position: absolute; top: 0; left: 0; right: 0; bottom: 0px; margin: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; cursor: pointer; color: #fff; z-index: 2; border-radius: 50%; } .o-mitigation-ai__right-video-trigger-play .a-circle-frame { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .o-mitigation-ai__right-video-trigger-play img { display: block; } @media (min-width: 768px) { .o-mitigation-strength .a-topic-page-section-title br { display: none; } } .o-mitigation-strength .a-topic-page-section-desc { font-size: 18px; font-weight: 400; letter-spacing: 1.5px; line-height: 1.5; } .-lang-en .o-mitigation-strength .a-topic-page-section-desc { letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .o-mitigation-strength .a-topic-page-section-desc { letter-spacing: normal; } @media (max-width: 1199px) { .o-mitigation-strength .a-topic-page-section-desc { font-size: 16px; letter-spacing: 0px; } .-lang-en .o-mitigation-strength .a-topic-page-section-desc { line-height: 1.38; } .-en .o-mitigation-strength .a-topic-page-section-desc { letter-spacing: normal; } } @media (max-width: 767px) { .o-mitigation-strength .a-topic-page-section-desc { font-size: 15px; } .-lang-en .o-mitigation-strength .a-topic-page-section-desc { line-height: 1.33; } } .o-mitigation-strength__frame { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 30px; } @media (max-width: 767px) { .o-mitigation-strength__frame { margin-top: 10px; } } .o-mitigation-strength__wrapper { position: relative; display: block; padding: 10px; width: 25%; } @media (max-width: 1199px) { .o-mitigation-strength__wrapper { padding: 0; width: 50%; } } @media (max-width: 767px) { .o-mitigation-strength__wrapper { width: 100%; } } .o-mitigation-strength__wrapper:first-child::before { display: none; } @media (max-width: 1199px) { .o-mitigation-strength__wrapper:first-child::before { display: block; } } @media (max-width: 767px) { .o-mitigation-strength__wrapper:first-child::before { display: none; } } @media (max-width: 1199px) { .o-mitigation-strength__wrapper:nth-child(2n)::after { display: block; } } @media (max-width: 767px) { .o-mitigation-strength__wrapper:nth-child(2n)::after { display: none; } } .o-mitigation-strength__wrapper::before, .o-mitigation-strength__wrapper::after { width: 3px; height: 110px; content: ''; position: absolute; display: block; top: 270px; background-color: #ff9933; border-radius: 1.5px; } @media (max-width: 1199px) { .o-mitigation-strength__wrapper::before, .o-mitigation-strength__wrapper::after { width: 3px; height: 110px; top: 210px; } } @media (max-width: 767px) { .o-mitigation-strength__wrapper::before, .o-mitigation-strength__wrapper::after { display: none; } } .o-mitigation-strength__wrapper::before { left: -1.5px; } .o-mitigation-strength__wrapper::after { display: none; right: -1.5px; } .o-mitigation-strength__box { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 20px 10px; min-height: 400px; -webkit-box-sizing: border-box; box-sizing: border-box; } @media (max-width: 767px) { .o-mitigation-strength__box { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; padding: 10px 15px; min-height: 150px; } } .o-mitigation-strength__box-icon { width: 200px; height: 200px; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (max-width: 1199px) { .o-mitigation-strength__box-icon { width: 180px; height: 180px; } } @media (max-width: 767px) { .o-mitigation-strength__box-icon { width: 130px; height: 130px; margin-top: 0; } } .o-mitigation-strength__box-icon > img, .o-mitigation-strength__box-icon > svg { width: 100%; height: 100%; display: block; } .o-mitigation-strength__box-icon-move { width: 22px; height: 22px; position: absolute; display: block; top: -11px; left: -11px; } body.-ie .o-mitigation-strength__box-icon-move { display: none; } @media (max-width: 1199px) { .o-mitigation-strength__box-icon-move { width: 20px; height: 20px; top: -10px; left: -10px; } } @media (max-width: 767px) { .o-mitigation-strength__box-icon-move { width: 14px; height: 14px; top: -7px; left: -7px; } } .o-mitigation-strength__box-icon-move > svg { width: 100%; height: 100%; display: block; } .o-mitigation-strength__box-desc { width: 100%; height: auto; font-size: 18px; font-weight: 400; letter-spacing: 1.5px; line-height: 1.5; position: relative; display: block; margin-top: 20px; text-align: center; color: #67676e; } .-lang-en .o-mitigation-strength__box-desc { letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .o-mitigation-strength__box-desc { letter-spacing: normal; } @media (max-width: 1199px) { .o-mitigation-strength__box-desc { font-size: 16px; letter-spacing: 0px; } .-lang-en .o-mitigation-strength__box-desc { line-height: 1.38; } .-en .o-mitigation-strength__box-desc { letter-spacing: normal; } } @media (max-width: 767px) { .o-mitigation-strength__box-desc { font-size: 15px; } .-lang-en .o-mitigation-strength__box-desc { line-height: 1.33; } } @media (max-width: 1199px) { .o-mitigation-strength__box-desc { margin-top: 0; } } @media (max-width: 767px) { .o-mitigation-strength__box-desc { margin-left: 10px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; max-width: 180px; text-align: left; } } .o-mitigation-strength__box-desc b { letter-spacing: 0.5px; line-height: 1.8; font-size: 22px; font-weight: 600; } @media (max-width: 767px) { .o-mitigation-strength__box-desc b { line-height: 2; font-size: 16px; } } .o-mitigation-strength__box-desc .sub { color: #6ECDCC; } .o-mitigation-strength__source { font-size: 12px; font-weight: 400; line-height: 1.8; text-align: center; letter-spacing: normal; color: #67676e; margin-top: 10px; } .-lang-en .o-mitigation-strength__source { line-height: 1.5; letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .o-mitigation-strength__source { font-size: 13px; line-height: 1.2; letter-spacing: normal; } @media (max-width: 1199px) { .o-mitigation-strength__source { margin-top: 30px; } } @media (max-width: 767px) { .o-mitigation-strength__source { margin-top: 20px; text-align: left; } } .o-mitigation-videos { position: relative; padding-top: 168px; } @media (max-width: 1199px) { .o-mitigation-videos { padding-top: 100px; } } .o-mitigation-videos__bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: block; overflow: hidden; } @media (max-width: 1199px) { .o-mitigation-videos__bg { display: none; } } .o-mitigation-videos__bg:before, .o-mitigation-videos__bg:after { content: ''; position: absolute; right: 0; display: block; } .o-index .o-mitigation-videos__bg:before, .o-index .o-mitigation-videos__bg:after { background-color: #6987b9; } .o-income .o-mitigation-videos__bg:before, .o-income .o-mitigation-videos__bg:after { background-color: #50beaf; } .o-asia .o-mitigation-videos__bg:before, .o-asia .o-mitigation-videos__bg:after { background-color: #b94b9b; } .o-tw-multi-asset .o-mitigation-videos__bg:before, .o-tw-multi-asset .o-mitigation-videos__bg:after { background-color: #1e9bd7; } .o-investing .o-mitigation-videos__bg:before, .o-investing .o-mitigation-videos__bg:after { background-color: #b1c425; } .o-mitigation .o-mitigation-videos__bg:before, .o-mitigation .o-mitigation-videos__bg:after { background-color: #ff9933; } .o-tw-esg .o-mitigation-videos__bg:before, .o-tw-esg .o-mitigation-videos__bg:after { background-color: #b1c425; } .o-mitigation-videos__bg:before { width: 135px; height: 110px; top: 28px; } .o-mitigation-videos__bg:after { width: 465px; height: 450px; top: 138px; } .o-mitigation-videos__main { position: relative; } @media (min-width: 1200px) { .o-mitigation-videos__main { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .o-mitigation-videos__main > .o-mitigation-videos__column:nth-child(2n + 1) { width: calc(50% - 12px); max-width: calc(50% - 12px); -webkit-box-flex: 0; -ms-flex: 0 0 calc(50% - 12px); flex: 0 0 calc(50% - 12px); } .o-mitigation-videos__main > .o-mitigation-videos__column:nth-child(2n + 2) { width: calc(50% - 12px); max-width: calc(50% - 12px); -webkit-box-flex: 0; -ms-flex: 0 0 calc(50% - 12px); flex: 0 0 calc(50% - 12px); margin-left: 24px; } .o-mitigation-videos__main > .o-mitigation-videos__column.-os-l-1 { padding-left: calc(8.33333% + 2px); } .o-mitigation-videos__main > .o-mitigation-videos__column.-os-r-1 { padding-right: calc(8.33333% + 2px); } .o-mitigation-videos__main > .o-mitigation-videos__column.-os-l-2 { padding-left: calc(16.66667% + 4px); } .o-mitigation-videos__main > .o-mitigation-videos__column.-os-r-2 { padding-right: calc(16.66667% + 4px); } .o-mitigation-videos__main > .o-mitigation-videos__column.-os-l-3 { padding-left: calc(25% + 6px); } .o-mitigation-videos__main > .o-mitigation-videos__column.-os-r-3 { padding-right: calc(25% + 6px); } .o-mitigation-videos__main > .o-mitigation-videos__column.-os-l-4 { padding-left: calc(33.33333% + 8px); } .o-mitigation-videos__main > .o-mitigation-videos__column.-os-r-4 { padding-right: calc(33.33333% + 8px); } .o-mitigation-videos__main > .o-mitigation-videos__column.-os-l-5 { padding-left: calc(41.66667% + 10px); } .o-mitigation-videos__main > .o-mitigation-videos__column.-os-r-5 { padding-right: calc(41.66667% + 10px); } } .o-mitigation-videos__column { position: relative; } .o-mitigation-videos__video { position: relative; } .o-mitigation-videos__video-box { position: relative; } .o-mitigation-videos__video-box::before { content: ''; display: block; padding-bottom: 56.25%; } .o-mitigation-videos__video-thumb { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: block; background-position: center; background-repeat: no-repeat; background-size: cover; } .o-mitigation-videos__video iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .o-mitigation-videos__video-title { font-size: 32px; font-weight: 700; letter-spacing: 2px; line-height: 1.2; position: relative; margin-top: 15px; } .-lang-en .o-mitigation-videos__video-title { line-height: 1.19; letter-spacing: 0.5px; font-family: KlavikaWebBasic, sans-serif; } .-en .o-mitigation-videos__video-title { font-size: 24px; letter-spacing: 0.5px; } @media (max-width: 1199px) { .o-mitigation-videos__video-title { font-size: 26px; } .-lang-en .o-mitigation-videos__video-title { line-height: 1.25; } .-en .o-mitigation-videos__video-title { font-size: 20px; } } @media (max-width: 767px) { .o-mitigation-videos__video-title { font-size: 22px; } .-lang-en .o-mitigation-videos__video-title { font-size: 26px; } } .o-mitigation-videos__video-desc { font-size: 18px; font-weight: 400; letter-spacing: 1.5px; line-height: 1.5; position: relative; margin-top: 20px; color: #67676e; } .-lang-en .o-mitigation-videos__video-desc { letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .o-mitigation-videos__video-desc { letter-spacing: normal; } @media (max-width: 1199px) { .o-mitigation-videos__video-desc { font-size: 16px; letter-spacing: 0px; } .-lang-en .o-mitigation-videos__video-desc { line-height: 1.38; } .-en .o-mitigation-videos__video-desc { letter-spacing: normal; } } @media (max-width: 767px) { .o-mitigation-videos__video-desc { font-size: 15px; } .-lang-en .o-mitigation-videos__video-desc { line-height: 1.33; } } .o-mitigation-videos__list { width: 100%; height: 564px; position: relative; display: block; overflow: hidden; } @media (max-width: 1199px) { .o-mitigation-videos__list { width: 100%; height: 381px; margin-top: 20px; } } .o-mitigation-videos__list-box { width: 100%; height: 100%; position: relative; display: block; padding-bottom: 70px; -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(87%, black), color-stop(99%, rgba(0, 0, 0, 0))); -webkit-mask-image: linear-gradient(to bottom, black 87%, rgba(0, 0, 0, 0) 99%); mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(87%, black), color-stop(99%, rgba(0, 0, 0, 0))); mask-image: linear-gradient(to bottom, black 87%, rgba(0, 0, 0, 0) 99%); -webkit-mask-size: 100%; mask-size: 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: left top; mask-position: left top; } @media (max-width: 1199px) { .o-mitigation-videos__list-box { padding-bottom: 100px; -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(75%, black), color-stop(99%, rgba(0, 0, 0, 0))); -webkit-mask-image: linear-gradient(to bottom, black 75%, rgba(0, 0, 0, 0) 99%); mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(75%, black), color-stop(99%, rgba(0, 0, 0, 0))); mask-image: linear-gradient(to bottom, black 75%, rgba(0, 0, 0, 0) 99%); } } .-ie .o-mitigation-videos__list-box::after { width: 100%; height: 70px; content: ''; position: absolute; bottom: 0; left: 0; background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(white)); background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white); z-index: 1; } .o-mitigation-videos__list-swiper { width: 100%; height: 100%; overflow: visible; margin-bottom: 0 !important; } .o-mitigation-videos__list-item { width: 100%; height: 100%; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; max-height: 158px; cursor: pointer; } .o-mitigation-videos__list-item.-active .o-mitigation-videos__list-item-deco, .-pc .o-mitigation-videos__list-item:hover .o-mitigation-videos__list-item-deco { border-color: transparent; } .o-mitigation-videos__list-item.-active .o-mitigation-videos__list-item-deco::before, .o-mitigation-videos__list-item.-active .o-mitigation-videos__list-item-deco::after, .-pc .o-mitigation-videos__list-item:hover .o-mitigation-videos__list-item-deco::before, .-pc .o-mitigation-videos__list-item:hover .o-mitigation-videos__list-item-deco::after { opacity: 0; } .o-mitigation-videos__list-item.-active .o-mitigation-videos__list-item-deco-border.-right, .-pc .o-mitigation-videos__list-item:hover .o-mitigation-videos__list-item-deco-border.-right { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transition: -webkit-transform .2s linear; transition: -webkit-transform .2s linear; transition: transform .2s linear; transition: transform .2s linear, -webkit-transform .2s linear; } .o-mitigation-videos__list-item.-active .o-mitigation-videos__list-item-deco-border.-bot, .-pc .o-mitigation-videos__list-item:hover .o-mitigation-videos__list-item-deco-border.-bot { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transition: -webkit-transform .2s .2s linear; transition: -webkit-transform .2s .2s linear; transition: transform .2s .2s linear; transition: transform .2s .2s linear, -webkit-transform .2s .2s linear; } .o-mitigation-videos__list-item.-active .o-mitigation-videos__list-item-deco-border.-bot::before, .-pc .o-mitigation-videos__list-item:hover .o-mitigation-videos__list-item-deco-border.-bot::before { -webkit-transform: scaleX(1) translateX(0); transform: scaleX(1) translateX(0); -webkit-transition: -webkit-transform .4s .2s ease-out; transition: -webkit-transform .4s .2s ease-out; transition: transform .4s .2s ease-out; transition: transform .4s .2s ease-out, -webkit-transform .4s .2s ease-out; } .o-mitigation-videos__list-item.-active .o-mitigation-videos__list-item-deco-border.-left, .-pc .o-mitigation-videos__list-item:hover .o-mitigation-videos__list-item-deco-border.-left { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transition: -webkit-transform .2s .4s linear; transition: -webkit-transform .2s .4s linear; transition: transform .2s .4s linear; transition: transform .2s .4s linear, -webkit-transform .2s .4s linear; } .o-mitigation-videos__list-item.-active .o-mitigation-videos__list-item-deco-border.-top, .-pc .o-mitigation-videos__list-item:hover .o-mitigation-videos__list-item-deco-border.-top { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transition: -webkit-transform .4s .6s ease-out; transition: -webkit-transform .4s .6s ease-out; transition: transform .4s .6s ease-out; transition: transform .4s .6s ease-out, -webkit-transform .4s .6s ease-out; } .o-mitigation-videos__list-item.-active .o-mitigation-videos__list-item-box, .-pc .o-mitigation-videos__list-item:hover .o-mitigation-videos__list-item-box { width: calc(100% - 18px); height: calc(100% - 20px); } @media (max-width: 1199px) { .o-mitigation-videos__list-item.-active .o-mitigation-videos__list-item-box, .-pc .o-mitigation-videos__list-item:hover .o-mitigation-videos__list-item-box { width: calc(100% - 10px); height: calc(100% - 10px); } } @media (max-width: 1199px) { .o-mitigation-videos__list-item.-active .o-mitigation-videos__list-item-thumb, .-pc .o-mitigation-videos__list-item:hover .o-mitigation-videos__list-item-thumb { width: 150px; height: 100%; } } .o-mitigation-videos__list-item.-active .o-mitigation-videos__list-item-play .a-circle-frame, .-pc .o-mitigation-videos__list-item:hover .o-mitigation-videos__list-item-play .a-circle-frame { -webkit-animation: rotate 0.5s cubic-bezier(0.7, 0, 0.3, 1); animation: rotate 0.5s cubic-bezier(0.7, 0, 0.3, 1); } .o-mitigation-videos__list-item-deco { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: block; border-width: 3px; border-style: solid; } .o-index .o-mitigation-videos__list-item-deco { border-color: #f0e14b; } .o-income .o-mitigation-videos__list-item-deco { border-color: #f0e14b; } .o-asia .o-mitigation-videos__list-item-deco { border-color: #1e9bd7; } .o-tw-multi-asset .o-mitigation-videos__list-item-deco { border-color: #fcba17; } .o-investing .o-mitigation-videos__list-item-deco { border-color: #55469b; } .o-mitigation .o-mitigation-videos__list-item-deco { border-color: #6ECDCC; } .o-tw-esg .o-mitigation-videos__list-item-deco { border-color: #55469b; } @media (max-width: 1199px) { .o-mitigation-videos__list-item-deco { border-width: 2px; } } .o-mitigation-videos__list-item-deco::after { content: ''; position: absolute; display: block; background-color: #fff; z-index: 2; } .o-mitigation-videos__list-item-deco::after { width: 33px; height: 3px; bottom: -3px; left: 51px; } @media (max-width: 1199px) { .o-mitigation-videos__list-item-deco::after { width: 33px; height: 2px; bottom: -2px; } } .o-mitigation-videos__list-item-deco-border { position: absolute; display: block; z-index: 1; } .o-index .o-mitigation-videos__list-item-deco-border { background-color: #f0e14b; } .o-income .o-mitigation-videos__list-item-deco-border { background-color: #f0e14b; } .o-asia .o-mitigation-videos__list-item-deco-border { background-color: #1e9bd7; } .o-tw-multi-asset .o-mitigation-videos__list-item-deco-border { background-color: #fcba17; } .o-investing .o-mitigation-videos__list-item-deco-border { background-color: #55469b; } .o-mitigation .o-mitigation-videos__list-item-deco-border { background-color: #6ECDCC; } .o-tw-esg .o-mitigation-videos__list-item-deco-border { background-color: #55469b; } .o-mitigation-videos__list-item-deco-border.-right { width: 3px; height: calc(100% + 6px); top: -3px; right: -3px; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: top; transform-origin: top; -webkit-transition: -webkit-transform 0s; transition: -webkit-transform 0s; transition: transform 0s; transition: transform 0s, -webkit-transform 0s; } @media (max-width: 1199px) { .o-mitigation-videos__list-item-deco-border.-right { width: 2px; height: calc(100% + 4px); top: -2px; right: -2px; } } .o-mitigation-videos__list-item-deco-border.-bot { width: calc(100% + 6px); height: 3px; bottom: -3px; right: -3px; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: right; transform-origin: right; -webkit-transition: -webkit-transform 0s; transition: -webkit-transform 0s; transition: transform 0s; transition: transform 0s, -webkit-transform 0s; } @media (max-width: 1199px) { .o-mitigation-videos__list-item-deco-border.-bot { width: calc(100% + 4px); height: 2px; bottom: -2px; right: -2px; } } .o-mitigation-videos__list-item-deco-border.-bot::before { width: 33px; height: 3px; content: ''; position: absolute; bottom: 0; left: 54px; display: block; background-color: #fff; -webkit-transform: scaleX(0) translateX(20px); transform: scaleX(0) translateX(20px); -webkit-transform-origin: right; transform-origin: right; -webkit-transition: -webkit-transform 0s; transition: -webkit-transform 0s; transition: transform 0s; transition: transform 0s, -webkit-transform 0s; } @media (max-width: 1199px) { .o-mitigation-videos__list-item-deco-border.-bot::before { width: 33px; height: 2px; left: 53px; } } .o-mitigation-videos__list-item-deco-border.-left { width: 3px; height: calc(100% + 6px); bottom: -3px; left: -3px; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: bottom; transform-origin: bottom; -webkit-transition: -webkit-transform 0s; transition: -webkit-transform 0s; transition: transform 0s; transition: transform 0s, -webkit-transform 0s; } @media (max-width: 1199px) { .o-mitigation-videos__list-item-deco-border.-left { width: 2px; height: calc(100% + 4px); bottom: -2px; left: -2px; } } .o-mitigation-videos__list-item-deco-border.-top { width: calc(100% + 6px); height: 3px; top: -3px; left: -3px; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left; transform-origin: left; -webkit-transition: -webkit-transform 0s; transition: -webkit-transform 0s; transition: transform 0s; transition: transform 0s, -webkit-transform 0s; } @media (max-width: 1199px) { .o-mitigation-videos__list-item-deco-border.-top { width: calc(100% + 4px); height: 2px; top: -2px; left: -2px; } } .o-mitigation-videos__list-item-box { width: 100%; height: 100%; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; background-color: #fff; -webkit-transition: width .2s, height .2s; transition: width .2s, height .2s; z-index: 3; } @media (max-width: 1199px) { .o-mitigation-videos__list-item-box { border: 1px #f0f0f0 solid; } } .o-mitigation-videos__list-item-thumb { width: 47.7%; height: 100%; position: relative; display: block; background-position: center; background-repeat: no-repeat; background-size: cover; overflow: hidden; } @media (max-width: 1199px) { .o-mitigation-videos__list-item-thumb { width: 155px; height: 100%; -webkit-transition: width .2s; transition: width .2s; } } .o-mitigation-videos__list-item-play { width: 89px; height: 89px; position: absolute; top: 50%; left: 50%; display: block; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } @media (max-width: 1199px) { .o-mitigation-videos__list-item-play { -webkit-transform: translate3d(-50%, -50%, 0) scale(0.6); transform: translate3d(-50%, -50%, 0) scale(0.6); } } .o-mitigation-videos__list-item-play .a-circle-frame, .o-mitigation-videos__list-item-play-icon { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; display: block; max-width: 100%; } .o-mitigation-videos__list-item-texts { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 20px; } @media (max-width: 1199px) { .o-mitigation-videos__list-item-texts { padding: 10px; } } .o-mitigation-videos__list-item-title { font-size: 18px; font-weight: 700; letter-spacing: 1px; line-height: 1.5; display: -webkit-box; max-height: 108px; overflow: hidden; -webkit-line-clamp: 4; -webkit-box-orient: vertical; color: #67676e; } .-lang-en .o-mitigation-videos__list-item-title { font-family: KlavikaWebBasic, sans-serif; font-size: 24px; line-height: 0.9; letter-spacing: normal; } .-en .o-mitigation-videos__list-item-title { line-height: 1.2; letter-spacing: normal; } @media (max-width: 1199px) { .o-mitigation-videos__list-item-title { font-size: 15px; } .-lang-en .o-mitigation-videos__list-item-title { font-size: 18px; line-height: 1.2; } } @media (max-width: 1199px) { .o-mitigation-videos__list-item-title { max-height: 65px; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } } .o-mitigation-videos__list-controls { width: 100%; height: 70px; position: absolute; bottom: 0; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; z-index: 4; } @media (max-width: 1199px) { .o-mitigation-videos__list-controls { width: 100%; height: 100px; } } .o-mitigation-videos__list-controls-button { width: 35px; height: 35px; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-left: 7px; color: #fff; border-radius: 50%; overflow: hidden; } .o-index .o-mitigation-videos__list-controls-button { background-color: #f0e14b; } .o-income .o-mitigation-videos__list-controls-button { background-color: #f0e14b; } .o-asia .o-mitigation-videos__list-controls-button { background-color: #1e9bd7; } .o-tw-multi-asset .o-mitigation-videos__list-controls-button { background-color: #fcba17; } .o-investing .o-mitigation-videos__list-controls-button { background-color: #55469b; } .o-mitigation .o-mitigation-videos__list-controls-button { background-color: #6ECDCC; } .o-tw-esg .o-mitigation-videos__list-controls-button { background-color: #55469b; } .o-mitigation-videos__list-controls-button.-disabled { opacity: 0.2; pointer-events: none; } .o-mitigation-videos__list-controls-button .icon { width: 20px; height: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-left: 2px; } .o-investing-videos { position: relative; padding-top: 168px; } @media (max-width: 1199px) { .o-investing-videos { padding-top: 100px; } } .o-investing-videos__bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: block; overflow: hidden; } @media (max-width: 1199px) { .o-investing-videos__bg { display: none; } } .o-investing-videos__bg:before, .o-investing-videos__bg:after { content: ''; position: absolute; right: 0; display: block; } .o-index .o-investing-videos__bg:before, .o-index .o-investing-videos__bg:after { background-color: #6987b9; } .o-income .o-investing-videos__bg:before, .o-income .o-investing-videos__bg:after { background-color: #50beaf; } .o-asia .o-investing-videos__bg:before, .o-asia .o-investing-videos__bg:after { background-color: #b94b9b; } .o-tw-multi-asset .o-investing-videos__bg:before, .o-tw-multi-asset .o-investing-videos__bg:after { background-color: #1e9bd7; } .o-investing .o-investing-videos__bg:before, .o-investing .o-investing-videos__bg:after { background-color: #b1c425; } .o-mitigation .o-investing-videos__bg:before, .o-mitigation .o-investing-videos__bg:after { background-color: #ff9933; } .o-tw-esg .o-investing-videos__bg:before, .o-tw-esg .o-investing-videos__bg:after { background-color: #b1c425; } .o-investing-videos__bg:before { width: 135px; height: 110px; top: 28px; } .o-investing-videos__bg:after { width: 465px; height: 450px; top: 138px; } .o-investing-videos__main { position: relative; margin-bottom: 100px; } @media (min-width: 1200px) { .o-investing-videos__main { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .o-investing-videos__main > .o-investing-videos__column:nth-child(2n + 1) { width: calc(50% - 12px); max-width: calc(50% - 12px); -webkit-box-flex: 0; -ms-flex: 0 0 calc(50% - 12px); flex: 0 0 calc(50% - 12px); } .o-investing-videos__main > .o-investing-videos__column:nth-child(2n + 2) { width: calc(50% - 12px); max-width: calc(50% - 12px); -webkit-box-flex: 0; -ms-flex: 0 0 calc(50% - 12px); flex: 0 0 calc(50% - 12px); margin-left: 24px; } .o-investing-videos__main > .o-investing-videos__column.-os-l-1 { padding-left: calc(8.33333% + 2px); } .o-investing-videos__main > .o-investing-videos__column.-os-r-1 { padding-right: calc(8.33333% + 2px); } .o-investing-videos__main > .o-investing-videos__column.-os-l-2 { padding-left: calc(16.66667% + 4px); } .o-investing-videos__main > .o-investing-videos__column.-os-r-2 { padding-right: calc(16.66667% + 4px); } .o-investing-videos__main > .o-investing-videos__column.-os-l-3 { padding-left: calc(25% + 6px); } .o-investing-videos__main > .o-investing-videos__column.-os-r-3 { padding-right: calc(25% + 6px); } .o-investing-videos__main > .o-investing-videos__column.-os-l-4 { padding-left: calc(33.33333% + 8px); } .o-investing-videos__main > .o-investing-videos__column.-os-r-4 { padding-right: calc(33.33333% + 8px); } .o-investing-videos__main > .o-investing-videos__column.-os-l-5 { padding-left: calc(41.66667% + 10px); } .o-investing-videos__main > .o-investing-videos__column.-os-r-5 { padding-right: calc(41.66667% + 10px); } } .o-investing-videos__column { position: relative; } .o-investing-videos__video { position: relative; } .o-investing-videos__video-box { position: relative; } .o-investing-videos__video-box::before { content: ''; display: block; padding-bottom: 56.25%; } .o-investing-videos__video-thumb { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: block; background-position: center; background-repeat: no-repeat; background-size: cover; } .o-investing-videos__video iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .o-investing-videos__video-title { font-size: 32px; font-weight: 700; letter-spacing: 2px; line-height: 1.2; position: relative; margin-top: 15px; } .-lang-en .o-investing-videos__video-title { line-height: 1.19; letter-spacing: 0.5px; font-family: KlavikaWebBasic, sans-serif; } .-en .o-investing-videos__video-title { font-size: 24px; letter-spacing: 0.5px; } @media (max-width: 1199px) { .o-investing-videos__video-title { font-size: 26px; } .-lang-en .o-investing-videos__video-title { line-height: 1.25; } .-en .o-investing-videos__video-title { font-size: 20px; } } @media (max-width: 767px) { .o-investing-videos__video-title { font-size: 22px; } .-lang-en .o-investing-videos__video-title { font-size: 26px; } } .o-investing-videos__video-desc { font-size: 18px; font-weight: 400; letter-spacing: 1.5px; line-height: 1.5; position: relative; margin-top: 20px; color: #67676e; } .-lang-en .o-investing-videos__video-desc { letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .o-investing-videos__video-desc { letter-spacing: normal; } @media (max-width: 1199px) { .o-investing-videos__video-desc { font-size: 16px; letter-spacing: 0px; } .-lang-en .o-investing-videos__video-desc { line-height: 1.38; } .-en .o-investing-videos__video-desc { letter-spacing: normal; } } @media (max-width: 767px) { .o-investing-videos__video-desc { font-size: 15px; } .-lang-en .o-investing-videos__video-desc { line-height: 1.33; } } .o-investing-videos__list { width: 100%; height: 564px; position: relative; display: block; overflow: hidden; } @media (max-width: 1199px) { .o-investing-videos__list { width: 100%; height: 381px; margin-top: 20px; } } .o-investing-videos__list-box { width: 100%; height: 100%; position: relative; display: block; padding-bottom: 70px; -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(87%, black), color-stop(99%, rgba(0, 0, 0, 0))); -webkit-mask-image: linear-gradient(to bottom, black 87%, rgba(0, 0, 0, 0) 99%); mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(87%, black), color-stop(99%, rgba(0, 0, 0, 0))); mask-image: linear-gradient(to bottom, black 87%, rgba(0, 0, 0, 0) 99%); -webkit-mask-size: 100%; mask-size: 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: left top; mask-position: left top; } @media (max-width: 1199px) { .o-investing-videos__list-box { padding-bottom: 100px; -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(75%, black), color-stop(99%, rgba(0, 0, 0, 0))); -webkit-mask-image: linear-gradient(to bottom, black 75%, rgba(0, 0, 0, 0) 99%); mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(75%, black), color-stop(99%, rgba(0, 0, 0, 0))); mask-image: linear-gradient(to bottom, black 75%, rgba(0, 0, 0, 0) 99%); } } .-ie .o-investing-videos__list-box::after { width: 100%; height: 70px; content: ''; position: absolute; bottom: 0; left: 0; background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(white)); background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white); z-index: 1; } .o-investing-videos__list-swiper { width: 100%; height: 100%; overflow: visible; margin-bottom: 0 !important; } .o-investing-videos__list-item { width: 100%; height: 100%; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; max-height: 158px; cursor: pointer; } .o-investing-videos__list-item.-active .o-investing-videos__list-item-deco, .-pc .o-investing-videos__list-item:hover .o-investing-videos__list-item-deco { border-color: transparent; } .o-investing-videos__list-item.-active .o-investing-videos__list-item-deco::before, .o-investing-videos__list-item.-active .o-investing-videos__list-item-deco::after, .-pc .o-investing-videos__list-item:hover .o-investing-videos__list-item-deco::before, .-pc .o-investing-videos__list-item:hover .o-investing-videos__list-item-deco::after { opacity: 0; } .o-investing-videos__list-item.-active .o-investing-videos__list-item-deco-border.-right, .-pc .o-investing-videos__list-item:hover .o-investing-videos__list-item-deco-border.-right { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transition: -webkit-transform .2s linear; transition: -webkit-transform .2s linear; transition: transform .2s linear; transition: transform .2s linear, -webkit-transform .2s linear; } .o-investing-videos__list-item.-active .o-investing-videos__list-item-deco-border.-bot, .-pc .o-investing-videos__list-item:hover .o-investing-videos__list-item-deco-border.-bot { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transition: -webkit-transform .2s .2s linear; transition: -webkit-transform .2s .2s linear; transition: transform .2s .2s linear; transition: transform .2s .2s linear, -webkit-transform .2s .2s linear; } .o-investing-videos__list-item.-active .o-investing-videos__list-item-deco-border.-bot::before, .-pc .o-investing-videos__list-item:hover .o-investing-videos__list-item-deco-border.-bot::before { -webkit-transform: scaleX(1) translateX(0); transform: scaleX(1) translateX(0); -webkit-transition: -webkit-transform .4s .2s ease-out; transition: -webkit-transform .4s .2s ease-out; transition: transform .4s .2s ease-out; transition: transform .4s .2s ease-out, -webkit-transform .4s .2s ease-out; } .o-investing-videos__list-item.-active .o-investing-videos__list-item-deco-border.-left, .-pc .o-investing-videos__list-item:hover .o-investing-videos__list-item-deco-border.-left { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transition: -webkit-transform .2s .4s linear; transition: -webkit-transform .2s .4s linear; transition: transform .2s .4s linear; transition: transform .2s .4s linear, -webkit-transform .2s .4s linear; } .o-investing-videos__list-item.-active .o-investing-videos__list-item-deco-border.-top, .-pc .o-investing-videos__list-item:hover .o-investing-videos__list-item-deco-border.-top { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transition: -webkit-transform .4s .6s ease-out; transition: -webkit-transform .4s .6s ease-out; transition: transform .4s .6s ease-out; transition: transform .4s .6s ease-out, -webkit-transform .4s .6s ease-out; } .o-investing-videos__list-item.-active .o-investing-videos__list-item-box, .-pc .o-investing-videos__list-item:hover .o-investing-videos__list-item-box { width: calc(100% - 18px); height: calc(100% - 20px); } @media (max-width: 1199px) { .o-investing-videos__list-item.-active .o-investing-videos__list-item-box, .-pc .o-investing-videos__list-item:hover .o-investing-videos__list-item-box { width: calc(100% - 10px); height: calc(100% - 10px); } } @media (max-width: 1199px) { .o-investing-videos__list-item.-active .o-investing-videos__list-item-thumb, .-pc .o-investing-videos__list-item:hover .o-investing-videos__list-item-thumb { width: 150px; height: 100%; } } .o-investing-videos__list-item.-active .o-investing-videos__list-item-play .a-circle-frame, .-pc .o-investing-videos__list-item:hover .o-investing-videos__list-item-play .a-circle-frame { -webkit-animation: rotate 0.5s cubic-bezier(0.7, 0, 0.3, 1); animation: rotate 0.5s cubic-bezier(0.7, 0, 0.3, 1); } .o-investing-videos__list-item-deco { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: block; border-width: 3px; border-style: solid; } .o-index .o-investing-videos__list-item-deco { border-color: #f0e14b; } .o-income .o-investing-videos__list-item-deco { border-color: #f0e14b; } .o-asia .o-investing-videos__list-item-deco { border-color: #1e9bd7; } .o-tw-multi-asset .o-investing-videos__list-item-deco { border-color: #fcba17; } .o-investing .o-investing-videos__list-item-deco { border-color: #55469b; } .o-mitigation .o-investing-videos__list-item-deco { border-color: #6ECDCC; } .o-tw-esg .o-investing-videos__list-item-deco { border-color: #55469b; } @media (max-width: 1199px) { .o-investing-videos__list-item-deco { border-width: 2px; } } .o-investing-videos__list-item-deco::after { content: ''; position: absolute; display: block; background-color: #fff; z-index: 2; } .o-investing-videos__list-item-deco::after { width: 33px; height: 3px; bottom: -3px; left: 51px; } @media (max-width: 1199px) { .o-investing-videos__list-item-deco::after { width: 33px; height: 2px; bottom: -2px; } } .o-investing-videos__list-item-deco-border { position: absolute; display: block; z-index: 1; } .o-index .o-investing-videos__list-item-deco-border { background-color: #f0e14b; } .o-income .o-investing-videos__list-item-deco-border { background-color: #f0e14b; } .o-asia .o-investing-videos__list-item-deco-border { background-color: #1e9bd7; } .o-tw-multi-asset .o-investing-videos__list-item-deco-border { background-color: #fcba17; } .o-investing .o-investing-videos__list-item-deco-border { background-color: #55469b; } .o-mitigation .o-investing-videos__list-item-deco-border { background-color: #6ECDCC; } .o-tw-esg .o-investing-videos__list-item-deco-border { background-color: #55469b; } .o-investing-videos__list-item-deco-border.-right { width: 3px; height: calc(100% + 6px); top: -3px; right: -3px; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: top; transform-origin: top; -webkit-transition: -webkit-transform 0s; transition: -webkit-transform 0s; transition: transform 0s; transition: transform 0s, -webkit-transform 0s; } @media (max-width: 1199px) { .o-investing-videos__list-item-deco-border.-right { width: 2px; height: calc(100% + 4px); top: -2px; right: -2px; } } .o-investing-videos__list-item-deco-border.-bot { width: calc(100% + 6px); height: 3px; bottom: -3px; right: -3px; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: right; transform-origin: right; -webkit-transition: -webkit-transform 0s; transition: -webkit-transform 0s; transition: transform 0s; transition: transform 0s, -webkit-transform 0s; } @media (max-width: 1199px) { .o-investing-videos__list-item-deco-border.-bot { width: calc(100% + 4px); height: 2px; bottom: -2px; right: -2px; } } .o-investing-videos__list-item-deco-border.-bot::before { width: 33px; height: 3px; content: ''; position: absolute; bottom: 0; left: 54px; display: block; background-color: #fff; -webkit-transform: scaleX(0) translateX(20px); transform: scaleX(0) translateX(20px); -webkit-transform-origin: right; transform-origin: right; -webkit-transition: -webkit-transform 0s; transition: -webkit-transform 0s; transition: transform 0s; transition: transform 0s, -webkit-transform 0s; } @media (max-width: 1199px) { .o-investing-videos__list-item-deco-border.-bot::before { width: 33px; height: 2px; left: 53px; } } .o-investing-videos__list-item-deco-border.-left { width: 3px; height: calc(100% + 6px); bottom: -3px; left: -3px; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: bottom; transform-origin: bottom; -webkit-transition: -webkit-transform 0s; transition: -webkit-transform 0s; transition: transform 0s; transition: transform 0s, -webkit-transform 0s; } @media (max-width: 1199px) { .o-investing-videos__list-item-deco-border.-left { width: 2px; height: calc(100% + 4px); bottom: -2px; left: -2px; } } .o-investing-videos__list-item-deco-border.-top { width: calc(100% + 6px); height: 3px; top: -3px; left: -3px; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left; transform-origin: left; -webkit-transition: -webkit-transform 0s; transition: -webkit-transform 0s; transition: transform 0s; transition: transform 0s, -webkit-transform 0s; } @media (max-width: 1199px) { .o-investing-videos__list-item-deco-border.-top { width: calc(100% + 4px); height: 2px; top: -2px; left: -2px; } } .o-investing-videos__list-item-box { width: 100%; height: 100%; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; background-color: #fff; -webkit-transition: width .2s, height .2s; transition: width .2s, height .2s; z-index: 3; } @media (max-width: 1199px) { .o-investing-videos__list-item-box { border: 1px #f0f0f0 solid; } } .o-investing-videos__list-item-thumb { width: 47.7%; height: 100%; position: relative; display: block; background-position: center; background-repeat: no-repeat; background-size: cover; overflow: hidden; } @media (max-width: 1199px) { .o-investing-videos__list-item-thumb { width: 155px; height: 100%; -webkit-transition: width .2s; transition: width .2s; } } .o-investing-videos__list-item-play { width: 89px; height: 89px; position: absolute; top: 50%; left: 50%; display: block; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } @media (max-width: 1199px) { .o-investing-videos__list-item-play { -webkit-transform: translate3d(-50%, -50%, 0) scale(0.6); transform: translate3d(-50%, -50%, 0) scale(0.6); } } .o-investing-videos__list-item-play .a-circle-frame, .o-investing-videos__list-item-play-icon { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; display: block; max-width: 100%; } .o-investing-videos__list-item-texts { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 20px; } @media (max-width: 1199px) { .o-investing-videos__list-item-texts { padding: 10px; } } .o-investing-videos__list-item-title { font-size: 18px; font-weight: 700; letter-spacing: 1px; line-height: 1.5; display: -webkit-box; max-height: 108px; overflow: hidden; -webkit-line-clamp: 4; -webkit-box-orient: vertical; color: #67676e; } .-lang-en .o-investing-videos__list-item-title { font-family: KlavikaWebBasic, sans-serif; font-size: 24px; line-height: 0.9; letter-spacing: normal; } .-en .o-investing-videos__list-item-title { line-height: 1.2; letter-spacing: normal; } @media (max-width: 1199px) { .o-investing-videos__list-item-title { font-size: 15px; } .-lang-en .o-investing-videos__list-item-title { font-size: 18px; line-height: 1.2; } } @media (max-width: 1199px) { .o-investing-videos__list-item-title { max-height: 65px; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } } .o-investing-videos__list-controls { width: 100%; height: 70px; position: absolute; bottom: 0; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; z-index: 4; } @media (max-width: 1199px) { .o-investing-videos__list-controls { width: 100%; height: 100px; } } .o-investing-videos__list-controls-button { width: 35px; height: 35px; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-left: 7px; color: #fff; border-radius: 50%; overflow: hidden; } .o-index .o-investing-videos__list-controls-button { background-color: #f0e14b; } .o-income .o-investing-videos__list-controls-button { background-color: #f0e14b; } .o-asia .o-investing-videos__list-controls-button { background-color: #1e9bd7; } .o-tw-multi-asset .o-investing-videos__list-controls-button { background-color: #fcba17; } .o-investing .o-investing-videos__list-controls-button { background-color: #55469b; } .o-mitigation .o-investing-videos__list-controls-button { background-color: #6ECDCC; } .o-tw-esg .o-investing-videos__list-controls-button { background-color: #55469b; } .o-investing-videos__list-controls-button.-disabled { opacity: 0.2; pointer-events: none; } .o-investing-videos__list-controls-button .icon { width: 20px; height: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-left: 2px; } .o-cookie-term { position: fixed; top: 0; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; height: 100vh; z-index: 1000; opacity: 0; pointer-events: none; -webkit-transition: opacity .2s; transition: opacity .2s; } .o-cookie-term.-active { opacity: 1; pointer-events: all; } .o-cookie-term__mask { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; background-color: #67676e; opacity: 0.8; } .o-cookie-term__wrap { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; padding: 40px 0; width: 100%; height: 100%; } @media (max-width: 767px) { .o-cookie-term__wrap { padding: 20px 0; } } .o-cookie-term__box { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-negative: 0; flex-shrink: 0; margin: 0 auto; padding: 40px 30px; width: 688px; max-width: calc(100% - 80px); height: 100%; background-color: #000; } @media (max-width: 767px) { .o-cookie-term__box { padding: 20px; max-width: calc(100% - 40px); height: calc(100% - 100px); } } .o-cookie-term__box-content { position: relative; display: block; width: 100%; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow: auto; } .o-cookie-term__title { font-size: 42px; font-weight: 700; letter-spacing: 2px; line-height: 1.2; position: relative; width: 100%; margin-bottom: 15px; color: #fff; } .-lang-en .o-cookie-term__title { line-height: 1.07; letter-spacing: 0.5px; font-family: KlavikaWebBasic, sans-serif; } .-en .o-cookie-term__title { font-size: 30px; letter-spacing: 0.5px; } @media (max-width: 1199px) { .o-cookie-term__title { font-size: 32px; } .-lang-en .o-cookie-term__title { line-height: 1.19; } .-en .o-cookie-term__title { font-size: 26px; line-height: 1.2; } } @media (max-width: 767px) { .o-cookie-term__title { font-size: 26px; } .-lang-en .o-cookie-term__title { line-height: 1.15; } .-en .o-cookie-term__title { font-size: 22px; } } .o-cookie-term__desc { font-size: 16px; font-weight: 400; letter-spacing: 1px; line-height: 1.5; position: relative; width: 100%; color: #fff; } .-lang-en .o-cookie-term__desc { font-family: KlavikaWebBasic, sans-serif; letter-spacing: normal; } .-en .o-cookie-term__desc { letter-spacing: normal; } @media (max-width: 767px) { .o-cookie-term__desc { font-size: 15px; } } .o-cookie-term__desc a { color: #1e9bd7; } .o-cookie-term__buttons { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 30px; width: 100%; } @media (max-width: 767px) { .o-cookie-term__buttons { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-top: 20px; } } .o-cookie-term__button { font-size: 18px; font-weight: 700; letter-spacing: normal; line-height: 1.2; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-right: 27px; padding: 10px 20px; min-width: 180px; min-height: 50px; color: #000; background-color: #fff; border-radius: 25px; } .-lang-en .o-cookie-term__button { font-family: KlavikaWebBasic, sans-serif; } @media (max-width: 767px) { .-lang-en .o-cookie-term__button { font-size: 15px; } } @media (max-width: 767px) { .o-cookie-term__button { margin-top: 10px; margin-right: 0; } } .-ie .o-cookie-term__button { height: 50px; } .o-index__main { overflow: hidden; } .-ie .o-index__main { padding-top: 70px; } .o-index__deco-text { font-size: 170px; color: #fafafa; line-height: 0.88; letter-spacing: normal; font-weight: 700; font-family: KlavikaWebBasic, sans-serif; position: absolute; top: -16px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: -1; text-align: center; } @media (max-width: 1199px) { .o-index__deco-text { font-size: 119px; top: 64px; } } @media (max-width: 767px) { .o-index__deco-text { font-size: 60px; top: -8px; } } .o-index__header { position: relative; width: 950px; margin: 13px auto 0; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: 130px; } @media (max-width: 1199px) { .o-index__header { width: 688px; } } @media (max-width: 767px) { .o-index__header { width: 300px; } } @media (max-width: 1199px) { .o-index__header { min-height: 154px; } } @media (max-width: 767px) { .o-index__header { min-height: 62px; } } .o-index__header:before, .o-index__header:after { content: ''; width: 50%; height: 100%; background: #fff; position: absolute; top: 0; left: 0; -webkit-transform-origin: 0% 0; transform-origin: 0% 0; } .o-index__header:after { left: auto; right: 0; -webkit-transform-origin: 100% 0; transform-origin: 100% 0; } @media (max-width: 1199px) { .o-index__header { margin-top: 10px; } } body.-en .o-index__header { margin-top: 50px; } @media (max-width: 767px) { body.-en .o-index__header { margin-top: 30px; width: 100%; max-width: 360px; } } .o-index__header .o-index__header-bracket-deco { position: absolute; display: block; top: 0; width: 22px; height: 100%; border: 14px #6987b9 solid; -webkit-transition: opacity 0.4s 1800ms cubic-bezier(0.7, 0, 0.3, 1), -webkit-transform 1.5s 1800ms cubic-bezier(0.7, 0, 0.3, 1); transition: opacity 0.4s 1800ms cubic-bezier(0.7, 0, 0.3, 1), -webkit-transform 1.5s 1800ms cubic-bezier(0.7, 0, 0.3, 1); transition: transform 1.5s 1800ms cubic-bezier(0.7, 0, 0.3, 1), opacity 0.4s 1800ms cubic-bezier(0.7, 0, 0.3, 1); transition: transform 1.5s 1800ms cubic-bezier(0.7, 0, 0.3, 1), opacity 0.4s 1800ms cubic-bezier(0.7, 0, 0.3, 1), -webkit-transform 1.5s 1800ms cubic-bezier(0.7, 0, 0.3, 1); opacity: 0; } @media (max-width: 767px) { .o-index__header .o-index__header-bracket-deco { width: 16px; border-width: 10px; } } .o-index__header .o-index__header-bracket-deco.-left { left: 0; border-right: none; -webkit-transform: translateX(453px); transform: translateX(453px); } @media (max-width: 1199px) { .o-index__header .o-index__header-bracket-deco.-left { -webkit-transform: translateX(322px); transform: translateX(322px); } } @media (max-width: 767px) { .o-index__header .o-index__header-bracket-deco.-left { -webkit-transform: translateX(138px); transform: translateX(138px); } } .o-index__header .o-index__header-bracket-deco.-right { right: 0; border-left: none; -webkit-transform: translateX(-453px); transform: translateX(-453px); } @media (max-width: 1199px) { .o-index__header .o-index__header-bracket-deco.-right { -webkit-transform: translateX(-322px); transform: translateX(-322px); } } @media (max-width: 767px) { .o-index__header .o-index__header-bracket-deco.-right { -webkit-transform: translateX(-138px); transform: translateX(-138px); } } .o-index__header:before, .o-index__header:after { -webkit-transition: -webkit-transform 1.5s 1800ms cubic-bezier(0.7, 0, 0.3, 1); transition: -webkit-transform 1.5s 1800ms cubic-bezier(0.7, 0, 0.3, 1); transition: transform 1.5s 1800ms cubic-bezier(0.7, 0, 0.3, 1); transition: transform 1.5s 1800ms cubic-bezier(0.7, 0, 0.3, 1), -webkit-transform 1.5s 1800ms cubic-bezier(0.7, 0, 0.3, 1); } .o-index__header.-aos-active .o-index__header-bracket-deco { -webkit-transform: translateX(0px); transform: translateX(0px); opacity: 1; } .o-index__header.-aos-active:before, .o-index__header.-aos-active:after { -webkit-transform: scaleX(0); transform: scaleX(0); } .o-index__header-bracket-deco { width: 22px; height: 130px; position: absolute; z-index: 1; } @media (max-width: 1199px) { .o-index__header-bracket-deco { width: 22px; height: 154px; } } @media (max-width: 767px) { .o-index__header-bracket-deco { width: 12px; height: 62px; } } .o-index__header-visible-content { width: 100%; padding: 0 80px; } @media (max-width: 1199px) { .o-index__header-visible-content { padding: 0 32px; } } @media (max-width: 767px) { .o-index__header-visible-content { padding: 0 20px; } } @media (max-width: 1199px) { .o-index__header-visible-content body.-en { padding: 0 40px; } } @media (max-width: 767px) { .o-index__header-visible-content body.-en { padding: 0 25px; } } .o-index__header-title { font-size: 60px; letter-spacing: 2px; font-weight: 700; color: #6987b9; } @media (max-width: 1199px) { .o-index__header-title { font-size: 52px; } } @media (max-width: 767px) { .o-index__header-title { font-size: 32px; } } @media (max-width: 767px) { .o-index__header-title { font-size: 26px; } } body.-en .o-index__header-title { line-height: 60px; } @media (max-width: 767px) { body.-en .o-index__header-title { line-height: 1.2; letter-spacing: normal; } } .o-index__header-subtitle { font-size: 15px; color: #67676e; margin-top: 10px; } @media (max-width: 767px) { .o-index__header-subtitle { display: none; } } body.-en .o-index__header-subtitle { letter-spacing: 1px; } .o-index__topic-list-title { font-size: 18px; font-weight: 700; color: #67676e; margin: 30px 0 15px; text-align: center; } @media (max-width: 767px) { .o-index__topic-list-title { font-size: 16px; margin: 5px 0 10px; } } body.-en .o-index__topic-list-title { font-size: 18px; font-weight: 700; letter-spacing: 1px; line-height: 1.5; } .-lang-en body.-en .o-index__topic-list-title { font-family: KlavikaWebBasic, sans-serif; font-size: 24px; line-height: 0.9; letter-spacing: normal; } .-en body.-en .o-index__topic-list-title { line-height: 1.2; letter-spacing: normal; } @media (max-width: 1199px) { body.-en .o-index__topic-list-title { font-size: 15px; } .-lang-en body.-en .o-index__topic-list-title { font-size: 18px; line-height: 1.2; } } @media (max-width: 767px) { body.-en .o-index__topic-list-title { margin-top: 15px; } } .o-index__topic-list { display: -ms-grid; display: grid; -ms-grid-rows: 260px 20px 120px 20px 260px; grid-template-rows: 260px 120px 260px; -ms-grid-columns: 1fr 23px 1fr 23px 1fr; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px 23px; position: relative; } .o-index__topic-list > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } .o-index__topic-list > *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 3; } .o-index__topic-list > *:nth-child(3) { -ms-grid-row: 1; -ms-grid-column: 5; } .o-index__topic-list > *:nth-child(4) { -ms-grid-row: 3; -ms-grid-column: 1; } .o-index__topic-list > *:nth-child(5) { -ms-grid-row: 3; -ms-grid-column: 3; } .o-index__topic-list > *:nth-child(6) { -ms-grid-row: 3; -ms-grid-column: 5; } .o-index__topic-list > *:nth-child(7) { -ms-grid-row: 5; -ms-grid-column: 1; } .o-index__topic-list > *:nth-child(8) { -ms-grid-row: 5; -ms-grid-column: 3; } .o-index__topic-list > *:nth-child(9) { -ms-grid-row: 5; -ms-grid-column: 5; } @media (max-width: 1199px) { .o-index__topic-list { -ms-grid-rows: 240px 20px 205px 20px 205px; grid-template-rows: 240px 205px 205px; -ms-grid-columns: 1fr 20px 1fr; grid-template-columns: 1fr 1fr; grid-gap: 20px; } .o-index__topic-list > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } .o-index__topic-list > *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 3; } .o-index__topic-list > *:nth-child(3) { -ms-grid-row: 3; -ms-grid-column: 1; } .o-index__topic-list > *:nth-child(4) { -ms-grid-row: 3; -ms-grid-column: 3; } .o-index__topic-list > *:nth-child(5) { -ms-grid-row: 5; -ms-grid-column: 1; } .o-index__topic-list > *:nth-child(6) { -ms-grid-row: 5; -ms-grid-column: 3; } } @media (max-width: 767px) { .o-index__topic-list { -ms-grid-rows: 210px 8px 177px 8px 177px; grid-template-rows: 210px 177px 177px; -ms-grid-columns: 1fr 8px 1fr; grid-template-columns: 1fr 1fr; grid-gap: 8px; } .o-index__topic-list > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } .o-index__topic-list > *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 3; } .o-index__topic-list > *:nth-child(3) { -ms-grid-row: 3; -ms-grid-column: 1; } .o-index__topic-list > *:nth-child(4) { -ms-grid-row: 3; -ms-grid-column: 3; } .o-index__topic-list > *:nth-child(5) { -ms-grid-row: 5; -ms-grid-column: 1; } .o-index__topic-list > *:nth-child(6) { -ms-grid-row: 5; -ms-grid-column: 3; } body.-en .o-index__topic-list { -ms-grid-rows: 210px 8px 100px 8px 100px; grid-template-rows: 210px 100px 100px; } } .o-index__topic-list-item { opacity: 0; -webkit-transform: scale(0.79); transform: scale(0.79); -webkit-transition: all 1s cubic-bezier(0.43, 0.6, 0.47, 1.5) !important; transition: all 1s cubic-bezier(0.43, 0.6, 0.47, 1.5) !important; } .o-index__topic-list-item:nth-child(1) { -webkit-transition-delay: 3600ms !important; transition-delay: 3600ms !important; } @media (min-width: 768px) { .o-index__topic-list-item:nth-child(1) { -webkit-transition-delay: 3.6s !important; transition-delay: 3.6s !important; } } .o-index__topic-list-item:nth-child(2) { -webkit-transition-delay: 3600ms !important; transition-delay: 3600ms !important; } @media (min-width: 768px) { .o-index__topic-list-item:nth-child(2) { -webkit-transition-delay: 3.7s !important; transition-delay: 3.7s !important; } } .o-index__topic-list-item:nth-child(3) { -webkit-transition-delay: 3600ms !important; transition-delay: 3600ms !important; } @media (min-width: 768px) { .o-index__topic-list-item:nth-child(3) { -webkit-transition-delay: 3.8s !important; transition-delay: 3.8s !important; } } .o-index__topic-list-item:nth-child(4) { -webkit-transition-delay: 3600ms !important; transition-delay: 3600ms !important; } @media (min-width: 768px) { .o-index__topic-list-item:nth-child(4) { -webkit-transition-delay: 3.9s !important; transition-delay: 3.9s !important; } } .o-index__topic-list-item:nth-child(5) { -webkit-transition-delay: 3600ms !important; transition-delay: 3600ms !important; } @media (min-width: 768px) { .o-index__topic-list-item:nth-child(5) { -webkit-transition-delay: 4s !important; transition-delay: 4s !important; } } .-aos-init.-aos-active .o-index__topic-list-item { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .o-index__topic-list-item:nth-child(1) { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; -ms-grid-column: 1; -ms-grid-column-span: 3; -ms-grid-row: 1; -ms-grid-row-span: 3; } @media (max-width: 1199px) { .o-index__topic-list-item:nth-child(1) { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; -ms-grid-column: 1; -ms-grid-column-span: 3; -ms-grid-row: 1; -ms-grid-row-span: 1; } } @media (min-width: 1200px) { .o-index__topic-list-item:nth-child(2) { -ms-grid-column: 5; -ms-grid-column-span: 1; } } @media (max-width: 1199px) { .o-index__topic-list-item:nth-child(2) { -ms-grid-column: 1; -ms-grid-column-span: 1; -ms-grid-row: 3; -ms-grid-row-span: 1; } } @media (min-width: 1200px) { .o-index__topic-list-item:nth-child(3) { -ms-grid-column: 3; grid-column-start: 3; grid-column-end: 4; -ms-grid-row: 2; grid-row-start: 2; grid-row-end: 4; -ms-grid-column: 5; -ms-grid-column-span: 1; -ms-grid-row: 3; -ms-grid-row-span: 3; } } @media (max-width: 1199px) { .o-index__topic-list-item:nth-child(3) { -ms-grid-column: 3; -ms-grid-column-span: 2; -ms-grid-row: 3; -ms-grid-row-span: 1; } } @media (min-width: 1200px) { .o-index__topic-list-item:nth-child(4) { -ms-grid-row: 5; -ms-grid-row-span: 1; } } @media (max-width: 1199px) { .o-index__topic-list-item:nth-child(4) { -ms-grid-column: 1; -ms-grid-column-span: 1; -ms-grid-row: 5; -ms-grid-row-span: 1; } } @media (min-width: 1200px) { .o-index__topic-list-item:nth-child(5) { -ms-grid-row: 5; -ms-grid-row-span: 1; } } @media (max-width: 1199px) { .o-index__topic-list-item:nth-child(5) { -ms-grid-column: 3; -ms-grid-column-span: 2; -ms-grid-row: 5; -ms-grid-row-span: 1; } } .o-index__topic-list-item .m-topic-card { height: 100%; } .o-index__topic-list-item .m-topic-card.-disable { opacity: 0.5 !important; } @media (max-width: 767px) { body.-en .o-index__topic-list-item:not(:first-child) .m-topic-card__mobile-info { display: none; } } .o-index .a-round-btn { background-color: #6987b9; } .o-income { color: #50beaf; } .o-income.-ie > :nth-child(n) { overflow: hidden; } .o-income.-en #section-1 { margin-top: -97px; padding-top: 97px; } @media (max-width: 1199px) { .o-income.-en #section-1 { margin-top: -65px; padding-top: 65px; } } @media (max-width: 767px) { .o-income.-en #section-1 { margin-top: -65px; padding-top: 65px; } } .o-income #section-1 { margin-top: -60px; padding-top: 60px; } @media (max-width: 1199px) { .o-income #section-1 { margin-top: -60px; padding-top: 60px; } } @media (max-width: 767px) { .o-income #section-1 { margin-top: -45px; padding-top: 45px; } } @media (max-width: 1199px) { html.-lang-en .o-income #section-1 .a-topic-page-section-title { width: 100%; max-width: 360px; margin: 0 auto; } } @media (min-width: 480px) { .o-income #section-2 .a-topic-page-section-title br { display: none; } } @media (min-width: 480px) { .o-income #section-2 .o-income-strength__subtitle br.br1 { display: none; } } @media (min-width: 1200px) { .o-income #section-2 .o-income-strength__subtitle br.br2 { display: none; } } @media (max-width: 767px) { .o-income #section-2 .o-income-strength__subtitle br.br2 { display: none; } } .o-income .m-other-topics { margin-bottom: 16px; } .o-income.-pc .a-retangle-btn:hover { color: #67676e; background-color: #f0e14b; opacity: 1; } .o-income .a-retangle-btn { background-color: #50beaf; } .o-asia { color: #b94b9b; } .o-asia.-en main { overflow: hidden; } .o-asia.-en .m-other-topics .swiper-pagination { display: none; } .o-asia.-ie > :nth-child(n) { overflow: hidden; } .o-asia__section-desc { font-size: 18px; font-weight: 400; letter-spacing: 1.5px; line-height: 1.5; font-weight: 500; color: #67676e; max-width: 792px; margin: 0 auto; position: relative; } .-lang-en .o-asia__section-desc { letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .o-asia__section-desc { letter-spacing: normal; } @media (max-width: 1199px) { .o-asia__section-desc { font-size: 16px; letter-spacing: 0px; } .-lang-en .o-asia__section-desc { line-height: 1.38; } .-en .o-asia__section-desc { letter-spacing: normal; } } @media (max-width: 767px) { .o-asia__section-desc { font-size: 15px; } .-lang-en .o-asia__section-desc { line-height: 1.33; } } @media (min-width: 1200px) { .o-asia__section-desc { text-align: center; } } @media (min-width: 1920px) { .o-asia .o-income-ai__left-inner { padding-top: 100px; } } @media (min-width: 1200px) { .o-asia .o-income-ai__left-inner { top: 0; -webkit-transform: none; transform: none; } } @media (min-width: 1200px) and (max-width: 1919px) { .o-asia .o-income-ai__left-inner { padding-top: 80px; } } .o-404 main { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .o-404 main:before { content: ''; width: 50%; right: 50%; height: calc(100% - 80px); background: #fbfbfb; display: block; top: 0; position: absolute; z-index: -1; } .o-404-center { background: #fff; text-align: center; width: 100%; max-width: 460px; margin-bottom: 30px; position: relative; padding-top: 20px; } @media (max-width: 1199px) { .o-404-center { max-width: 400px; } } @media (max-width: 767px) { .o-404-center { max-width: 300px; } } .o-404-center-number { font-size: 180px; font-weight: 700; color: #6987b9; letter-spacing: -6.3px; font-size: 180px; line-height: 1.1; } @media (max-width: 1199px) { .o-404-center-number { font-size: 120px; } } @media (max-width: 767px) { .o-404-center-number { font-size: 100px; } } .o-404-center-text { font-size: 22px; font-weight: 700; color: #67676e; padding-bottom: 45px; } @media (max-width: 767px) { .o-404-center-text { padding-bottom: 30px; } } .o-404-center-deco { width: 20px; height: 20px; position: absolute; } @media (max-width: 1199px) { .o-404-center-deco { width: 17px; height: 17px; } } @media (max-width: 767px) { .o-404-center-deco { width: 13px; height: 13px; } } .o-404-center-deco:nth-child(1) { top: 0; left: 0; } .o-404-center-deco:nth-child(2) { top: 0; right: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); } .o-404-center-deco:nth-child(3) { bottom: 0; left: 0; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .o-404-center-deco:nth-child(4) { right: 0; bottom: 0; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .o-404-center-deco:before, .o-404-center-deco::after { content: ''; width: 20px; height: 8px; background: #f0f0f0; display: block; position: absolute; top: 0; left: 8px; } @media (max-width: 1199px) { .o-404-center-deco:before, .o-404-center-deco::after { width: 17px; } } @media (max-width: 767px) { .o-404-center-deco:before, .o-404-center-deco::after { width: 13px; } } .o-404-center-deco::after { width: 28px; -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: 0 0; transform-origin: 0 0; } @media (max-width: 1199px) { .o-404-center-deco::after { width: 25px; } } @media (max-width: 767px) { .o-404-center-deco::after { width: 21px; } } .o-404 .a-round-btn { background-color: #6987b9; } .o-investing { color: #b1c425; } @media (max-width: 1199px) { .o-investing .container { padding-right: 20px; padding-left: 20px; } } .o-investing.-ie > :nth-child(n) { overflow: hidden; } .o-investing.-ie .o-multi-asset-source__center { height: 630px; } .o-investing header .m-anchor-list__item.is-active, .o-investing header .m-anchor-list__item:hover { color: #fff; } .o-investing.-en .o-income-banner__bg::before { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.7)), to(rgba(0, 0, 0, 0.1))); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1) 100%); } .o-investing.-en .o-income-banner__desc { text-shadow: 0px 0px 3px #000000; } @media (max-width: 767px) { .o-investing.-en .o-income-banner__desc { text-shadow: none; } } .o-investing.-en .o-income-banner__note { text-shadow: 0px 0px 3px #000000; } @media (max-width: 767px) { .o-investing.-en .o-income-banner__note { text-shadow: none; } } @media (max-width: 1199px) { .o-investing.-en section#time-line .m-time-line #time-line-swiper .swiper-slide { min-width: 140px; } } @media (max-width: 767px) { .o-investing.-en section#time-line .m-time-line #time-line-swiper .swiper-slide { padding: 0 5px; width: auto; } } .o-investing.-en section#time-line .m-time-line__year-text { white-space: nowrap; } @media (max-width: 1199px) { .o-investing.-en .o-income-ai__left-title { font-size: 26px; } } @media (max-width: 767px) { .o-investing.-en .o-income-ai__left-title { font-size: 22px; } } .o-investing > * { overflow: hidden; } .o-investing-bg-rellax { background-size: cover; position: absolute; width: 197px; height: 559px; } .o-investing-bg-rellax[data-position="left-top"] { background-position: right top; background-image: url(../../src/img/investing/pattern_R.png); top: 500px; left: 0; } .o-investing-bg-rellax[data-position="left-bottom"] { background-position: right top; background-image: url(../../src/img/investing/pattern_R.png); top: 1500px; left: 0; } .o-investing-bg-rellax[data-position="right-top"] { background-position: left top; background-image: url(../../src/img/investing/pattern_L.png); top: 1000px; right: 0; } .o-investing-bg-rellax[data-position="right-bottom"] { background-position: left top; background-image: url(../../src/img/investing/pattern_L.png); top: 2000px; right: 0; } .o-investing-how-to { margin-top: 120px; } @media (max-width: 1199px) { .o-investing-how-to { margin-top: 70px; } } .o-investing-how-to-source { max-width: 700px; margin: 0 auto; margin-top: 20px; } .o-investing-flower { margin-top: 70px; } @media (max-width: 767px) { .o-investing-flower { margin-top: 100px; } } .o-investing-map { margin-top: 150px; } @media (max-width: 767px) { .o-investing-map { margin-top: 115px; } } .o-investing-tree { margin-top: 90px; margin-bottom: 30px; } .o-investing .o-income-strategy { overflow: hidden; } .o-investing .o-income-strategy__bg-deco:first-child { left: -314px; top: 100px; height: 515px; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .o-investing .o-income-strategy__bg-deco:nth-child(2) { right: -200px; top: 262px; height: 321px; } .o-investing .o-income-strategy__header-deco { color: #fff; opacity: 0.3; text-align: center; line-height: 0.8; margin-top: 60px; } @media (max-width: 1199px) { .o-investing .o-income-strategy__header-deco { margin-top: 55px; } } @media (max-width: 767px) { .o-investing .o-income-strategy__header-deco { margin-top: 20px; font-size: 60px; line-height: 1; } } @media (max-width: 767px) { .o-investing .o-income-strategy__header-text { line-height: 28px; margin-top: 10px; } } @media (max-width: 1199px) { .o-investing .o-income-strategy__list-item-desc br, .o-investing .o-income-strategy__list-item-title br { display: none; } } @media (max-width: 1199px) { .o-investing .o-income-strategy__list-item .o-income-strategy__list-item-icon-wrapper .icon { color: #fff; } } .o-investing .o-income-strategy__list-item:hover .o-income-strategy__list-item-title, .o-investing .o-income-strategy__list-item:hover .o-income-strategy__list-item-subtitle, .o-investing .o-income-strategy__list-item:hover .o-income-strategy__list-item-desc, .o-investing .o-income-strategy__list-item:hover .o-income-strategy__list-item-icon-wrapper .icon { color: #fff; } .o-investing .o-income-strategy__list-item:hover::after { -webkit-transition: background-color 0.3s ease, opacity 0.3s ease; transition: background-color 0.3s ease, opacity 0.3s ease; background-color: #55469b; opacity: 0.8; } .o-investing .a-topic-page-section-title { margin-bottom: 55px; } @media (min-width: 480px) { .o-investing .a-topic-page-section-title br { display: none; } } @media (max-width: 1199px) { .o-investing .a-topic-page-section-title { margin-bottom: 30px; } } .o-investing .line-drawing-map { max-width: 100%; width: 973px; margin: 0 auto; display: block; } @media (max-width: 1199px) { .o-investing .line-drawing-map { max-width: 686px; } } @media (max-width: 767px) { .o-investing .line-drawing-map { max-width: 100%; } } .o-investing .line-drawing-map #line-draw path { stroke-dasharray: 420px; stroke-dashoffset: 420px; } .o-investing section#time-line { padding-top: 0; } .o-investing section#time-line .m-time-line { padding-top: 0px; } .o-investing section#time-line .m-time-line #time-line-swiper .swiper-slide { width: 16.66667%; min-width: 16.66667%; } @media (min-width: 1200px) { .o-investing section#time-line .m-time-line #time-line-swiper .swiper-slide { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } } @media (max-width: 1199px) { .o-investing section#time-line .m-time-line #time-line-swiper .swiper-slide { min-width: 120px; } } .o-investing section#time-line .m-time-line #time-line-swiper .swiper-slide .m-time-line__year::after { background-color: #8fa017; } .o-investing section#time-line .m-time-line__year::after { background-color: #b1c425; } .o-investing .o-income-ai { padding-bottom: 250px; } @media (max-width: 1199px) { .o-investing .o-income-ai { padding-bottom: 180px; } } .o-investing .o-income-ai__left-inner { padding-top: 0; } .o-investing .o-income-ai__left-title { font-size: 42px; } .o-investing .basic-swiper-container .swiper-pagination .swiper-pagination-bullet::before, .o-investing .basic-swiper-container .swiper-pagination .swiper-pagination-bullet::after { background-color: #b1c425; } .o-investing .basic-swiper-container .swiper-button-next, .o-investing .basic-swiper-container .swiper-button-prev { background-color: #b1c425; } .o-investing .a-mobile-sticky-btn { color: #fff; } .o-tw-esg { color: #b1c425; } @media (max-width: 1199px) { .o-tw-esg .container { padding-right: 20px; padding-left: 20px; } } .o-tw-esg.-ie > :nth-child(n) { overflow: hidden; } .o-tw-esg.-ie .o-multi-asset-source__center { height: 630px; } .o-tw-esg header .m-anchor-list__item.is-active, .o-tw-esg header .m-anchor-list__item:hover { color: #fff; } .o-tw-esg.-en .o-income-banner__bg::before { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.7)), to(rgba(0, 0, 0, 0.1))); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1) 100%); } .o-tw-esg.-en .o-income-banner__desc { text-shadow: 0px 0px 3px #000000; } @media (max-width: 767px) { .o-tw-esg.-en .o-income-banner__desc { text-shadow: none; } } .o-tw-esg.-en .o-income-banner__note { text-shadow: 0px 0px 3px #000000; } @media (max-width: 767px) { .o-tw-esg.-en .o-income-banner__note { text-shadow: none; } } @media (max-width: 1199px) { .o-tw-esg.-en section#time-line .m-time-line #time-line-swiper .swiper-slide { min-width: 140px; } } @media (max-width: 767px) { .o-tw-esg.-en section#time-line .m-time-line #time-line-swiper .swiper-slide { padding: 0 5px; width: auto; } } .o-tw-esg.-en section#time-line .m-time-line__year-text { white-space: nowrap; } @media (max-width: 1199px) { .o-tw-esg.-en .o-income-ai__left-title { font-size: 26px; } } @media (max-width: 767px) { .o-tw-esg.-en .o-income-ai__left-title { font-size: 22px; } } .o-tw-esg > * { overflow: hidden; } .o-tw-esg-bg-rellax { background-size: cover; position: absolute; width: 197px; height: 559px; } .o-tw-esg-bg-rellax[data-position="left-top"] { background-position: right top; background-image: url(../../src/img/investing/pattern_R.png); top: 500px; left: 0; } .o-tw-esg-bg-rellax[data-position="left-bottom"] { background-position: right top; background-image: url(../../src/img/investing/pattern_R.png); top: 1500px; left: 0; } .o-tw-esg-bg-rellax[data-position="right-top"] { background-position: left top; background-image: url(../../src/img/investing/pattern_L.png); top: 1000px; right: 0; } .o-tw-esg-bg-rellax[data-position="right-bottom"] { background-position: left top; background-image: url(../../src/img/investing/pattern_L.png); top: 2000px; right: 0; } .o-tw-esg-how-to { margin-top: 120px; } @media (max-width: 1199px) { .o-tw-esg-how-to { margin-top: 70px; } } .o-tw-esg-flower { margin-top: 70px; } @media (max-width: 767px) { .o-tw-esg-flower { margin-top: 100px; } } .o-tw-esg-map { margin-top: 150px; } @media (max-width: 767px) { .o-tw-esg-map { margin-top: 115px; } } .o-tw-esg-tree { margin-top: 90px; margin-bottom: 30px; } .o-tw-esg .o-income-strategy { overflow: hidden; } .o-tw-esg .o-income-strategy__bg-deco:first-child { left: -314px; top: 100px; height: 515px; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .o-tw-esg .o-income-strategy__bg-deco:nth-child(2) { right: -200px; top: 262px; height: 321px; } .o-tw-esg .o-income-strategy__header-deco { color: #fff; opacity: 0.3; text-align: center; line-height: 0.8; margin-top: 60px; } @media (max-width: 1199px) { .o-tw-esg .o-income-strategy__header-deco { margin-top: 55px; } } @media (max-width: 767px) { .o-tw-esg .o-income-strategy__header-deco { margin-top: 20px; font-size: 60px; line-height: 1; } } @media (max-width: 767px) { .o-tw-esg .o-income-strategy__header-text { line-height: 28px; margin-top: 10px; } } @media (max-width: 1199px) { .o-tw-esg .o-income-strategy__list-item-desc br, .o-tw-esg .o-income-strategy__list-item-title br { display: none; } } @media (max-width: 1199px) { .o-tw-esg .o-income-strategy__list-item .o-income-strategy-tw__list-item-icon-wrapper .icon { color: #fff; } } .o-tw-esg .o-income-strategy__list-item:hover .o-income-strategy-tw__list-item-title, .o-tw-esg .o-income-strategy__list-item:hover .o-income-strategy-tw__list-item-subtitle, .o-tw-esg .o-income-strategy__list-item:hover .o-income-strategy-tw__list-item-desc, .o-tw-esg .o-income-strategy__list-item:hover .o-income-strategy-tw__list-item-icon-wrapper .icon { color: #fff; } .o-tw-esg .o-income-strategy__list-item:hover::after { -webkit-transition: background-color 0.3s ease, opacity 0.3s ease; transition: background-color 0.3s ease, opacity 0.3s ease; background-color: #55469b; opacity: 0.8; } .o-tw-esg .a-topic-page-section-title { margin-bottom: 55px; } @media (min-width: 480px) { .o-tw-esg .a-topic-page-section-title br { display: none; } } @media (max-width: 1199px) { .o-tw-esg .a-topic-page-section-title { margin-bottom: 30px; } } .o-tw-esg .line-drawing-map { max-width: 100%; width: 973px; margin: 0 auto; display: block; } @media (max-width: 1199px) { .o-tw-esg .line-drawing-map { max-width: 686px; } } @media (max-width: 767px) { .o-tw-esg .line-drawing-map { max-width: 100%; } } @media (max-width: 479px) { .o-tw-esg .line-drawing-map { margin-bottom: 120px; } } .o-tw-esg .line-drawing-map #line-draw path { stroke-dasharray: 420px; stroke-dashoffset: 420px; } .o-tw-esg section#time-line { padding-top: 0; } .o-tw-esg section#time-line .m-time-line { padding-top: 0px; } .o-tw-esg section#time-line .m-time-line #time-line-swiper .swiper-slide { width: 14.28571%; min-width: 14.28571%; } @media (min-width: 1200px) { .o-tw-esg section#time-line .m-time-line #time-line-swiper .swiper-slide { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } } @media (max-width: 1199px) { .o-tw-esg section#time-line .m-time-line #time-line-swiper .swiper-slide { min-width: 120px; } } .o-tw-esg section#time-line .m-time-line #time-line-swiper .swiper-slide .m-time-line__year::after { background-color: #8fa017; } .o-tw-esg section#time-line .m-time-line__year::after { background-color: #b1c425; } .o-tw-esg .o-income-ai { padding-bottom: 250px; } @media (max-width: 1199px) { .o-tw-esg .o-income-ai { padding-bottom: 180px; } } .o-tw-esg .o-income-ai__left-inner { padding-top: 0; } .o-tw-esg .o-income-ai__left-title { font-size: 42px; } .o-tw-esg .basic-swiper-container .swiper-pagination .swiper-pagination-bullet::before, .o-tw-esg .basic-swiper-container .swiper-pagination .swiper-pagination-bullet::after { background-color: #b1c425; } .o-tw-esg .basic-swiper-container .swiper-button-next, .o-tw-esg .basic-swiper-container .swiper-button-prev { background-color: #b1c425; } .o-tw-esg .a-mobile-sticky-btn { color: #fff; } .o-mitigation { color: #ff9933; } @media (max-width: 1199px) { .o-mitigation .container { padding-right: 20px; padding-left: 20px; } } .o-mitigation header .m-anchor-list__item.is-active, .o-mitigation header .m-anchor-list__item:hover { color: #fff; } .o-mitigation > * { overflow: hidden; } .o-mitigation .a-topic-page-section-title { margin-bottom: 55px; } @media (min-width: 480px) { .o-mitigation .a-topic-page-section-title br { display: none; } } @media (max-width: 1199px) { .o-mitigation .a-topic-page-section-title { margin-bottom: 30px; } } .o-mitigation .o-income-banner__bg::before { background-image: none; } .o-mitigation .o-income-banner__bg-img { background-position: center 16%; } .o-mitigation-why-this { padding-top: 120px; } @media (max-width: 1199px) { .o-mitigation-why-this { padding-top: 70px; } } .o-mitigation-map { position: relative; margin-top: 150px; } @media (max-width: 767px) { .o-mitigation-map { margin-top: 50px; } } .o-mitigation-map .a-topic-page-section-texts { position: absolute; top: 68px; display: block; width: 100%; text-align: center; z-index: 1; } @media (max-width: 1199px) { .o-mitigation-map .a-topic-page-section-texts { top: 29px; } } @media (max-width: 767px) { .o-mitigation-map .a-topic-page-section-texts { top: -10px; } } .o-mitigation-map .a-topic-page-section-texts br { display: block; } .o-mitigation-map .a-topic-page-section-title { position: relative; margin-bottom: 30px; } .o-mitigation-map .a-topic-page-section-desc { font-size: 18px; font-weight: 400; letter-spacing: 1.5px; line-height: 1.5; position: relative; margin: 0 auto; max-width: 792px; color: #67676e; } .-lang-en .o-mitigation-map .a-topic-page-section-desc { letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .o-mitigation-map .a-topic-page-section-desc { letter-spacing: normal; } @media (max-width: 1199px) { .o-mitigation-map .a-topic-page-section-desc { font-size: 16px; letter-spacing: 0px; } .-lang-en .o-mitigation-map .a-topic-page-section-desc { line-height: 1.38; } .-en .o-mitigation-map .a-topic-page-section-desc { letter-spacing: normal; } } @media (max-width: 767px) { .o-mitigation-map .a-topic-page-section-desc { font-size: 15px; } .-lang-en .o-mitigation-map .a-topic-page-section-desc { line-height: 1.33; } } @media (min-width: 1200px) { .o-mitigation-map .a-topic-page-section-desc { font-size: 19px; } } @media (max-width: 1199px) { .o-mitigation-map .o-multi-asset-source__center { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .o-mitigation-map__map { display: block; width: 100%; height: auto; margin: 0 auto; display: block; max-width: 985px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } @media (max-width: 1199px) { .o-mitigation-map__map { padding: 0; min-height: 364px; } } @media (max-width: 767px) { .o-mitigation-map__map { padding: 0; width: 686.54804px; min-height: 450px; } } .o-mitigation-circle-cycle { margin-top: 100px; } @media (max-width: 767px) { .o-mitigation-circle-cycle { margin-top: 100px; } } .o-mitigation-circle-cycle .a-topic-page-section-title { margin-bottom: 30px; } .o-mitigation-circle-cycle .a-topic-page-section-desc { font-size: 18px; font-weight: 400; letter-spacing: 1.5px; line-height: 1.5; position: relative; margin: 0 auto; max-width: 792px; text-align: center; color: #67676e; } .-lang-en .o-mitigation-circle-cycle .a-topic-page-section-desc { letter-spacing: normal; font-family: KlavikaWebBasic, sans-serif; } .-en .o-mitigation-circle-cycle .a-topic-page-section-desc { letter-spacing: normal; } @media (max-width: 1199px) { .o-mitigation-circle-cycle .a-topic-page-section-desc { font-size: 16px; letter-spacing: 0px; } .-lang-en .o-mitigation-circle-cycle .a-topic-page-section-desc { line-height: 1.38; } .-en .o-mitigation-circle-cycle .a-topic-page-section-desc { letter-spacing: normal; } } @media (max-width: 767px) { .o-mitigation-circle-cycle .a-topic-page-section-desc { font-size: 15px; } .-lang-en .o-mitigation-circle-cycle .a-topic-page-section-desc { line-height: 1.33; } } @media (min-width: 1200px) { .o-mitigation-circle-cycle .a-topic-page-section-desc { font-size: 19px; } } .o-mitigation-ai { padding-top: 200px; padding-bottom: 50px; } @media (max-width: 1199px) { .o-mitigation-ai { padding-top: 100px; } } .o-mitigation-ai__gallery { overflow: hidden; } @media (max-width: 1199px) { .o-mitigation-ai__gallery { margin-left: -10px; width: calc(100% - 10px); overflow: visible; } } @media (max-width: 767px) { .o-mitigation-ai__gallery { margin-left: auto; margin-right: auto; width: calc(100% - 160px); max-width: 300px; min-width: 150px; } } .o-mitigation-strength { margin-top: 120px; } @media (max-width: 767px) { .o-mitigation-strength { margin-top: 80px; } } .o-mitigation-strength .a-topic-page-section-title { margin-bottom: 30px; } .o-mitigation-strength .a-topic-page-section-title br { display: block; } .o-mitigation-strength .a-topic-page-section-desc { margin: 0 auto; max-width: 792px; text-align: center; color: #67676e; } @media (min-width: 1200px) { .o-mitigation-strength .a-topic-page-section-desc { font-size: 19px; } } .o-mitigation .line-drawing-map { max-width: 100%; width: 973px; margin: 0 auto; display: block; } @media (max-width: 1199px) { .o-mitigation .line-drawing-map { max-width: 686px; } } @media (max-width: 767px) { .o-mitigation .line-drawing-map { max-width: 100%; } } .o-mitigation .line-drawing-map #line-draw path { stroke-dasharray: 420px; stroke-dashoffset: 420px; } .o-mitigation section#time-line { padding-top: 0; } .o-mitigation section#time-line .m-time-line { padding-top: 0px; } .o-mitigation section#time-line .m-time-line #time-line-swiper .swiper-slide { width: 25%; min-width: 25%; } @media (min-width: 1200px) { .o-mitigation section#time-line .m-time-line #time-line-swiper .swiper-slide { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } } @media (max-width: 1199px) { .o-mitigation section#time-line .m-time-line #time-line-swiper .swiper-slide { min-width: 120px; } } .o-mitigation section#time-line .m-time-line #time-line-swiper .swiper-slide .m-time-line__year::after { background-color: #ffab58; } .o-mitigation section#time-line .m-time-line__year::after { background-color: #b1c425; } .o-mitigation .o-income-strategy { overflow: hidden; margin-top: 120px; } @media (max-width: 767px) { .o-mitigation .o-income-strategy { margin-top: 80px; } } .o-mitigation .o-income-strategy__bg-deco:first-child { top: -360px; left: -90px; height: 520px; -webkit-transform: rotate(180deg); transform: rotate(180deg); } @media (max-width: 1199px) { .o-mitigation .o-income-strategy__bg-deco:first-child { height: 460px; } } @media (max-width: 767px) { .o-mitigation .o-income-strategy__bg-deco:first-child { left: -160px; height: 320px; } } .o-mitigation .o-income-strategy__bg-deco:nth-child(2) { right: -90px; top: 500px; height: 520px; } @media (max-width: 1199px) { .o-mitigation .o-income-strategy__bg-deco:nth-child(2) { top: 300px; height: 460px; } } @media (max-width: 767px) { .o-mitigation .o-income-strategy__bg-deco:nth-child(2) { right: -160px; height: 320px; } } .o-mitigation .o-income-strategy__header-deco { color: #fff; opacity: 0.15; text-align: center; line-height: 0.8; margin-top: 60px; } @media (max-width: 1199px) { .o-mitigation .o-income-strategy__header-deco { margin-top: 55px; } } @media (max-width: 767px) { .o-mitigation .o-income-strategy__header-deco { margin-top: 20px; font-size: 60px; line-height: 1; } } @media (max-width: 1199px) { .o-mitigation .o-income-strategy__header-deco b { display: block; } } @media (max-width: 1199px) { .o-mitigation .o-income-strategy__header-deco br { display: none; } } @media (max-width: 767px) { .o-mitigation .o-income-strategy__header-text { line-height: 28px; margin-top: 10px; } } @media (max-width: 1199px) { .o-mitigation .o-income-strategy__list-item-desc br, .o-mitigation .o-income-strategy__list-item-title br { display: none; } } @media (max-width: 1199px) { .o-mitigation .o-income-strategy__list-item .o-income-strategy__list-item-icon-wrapper .icon { color: #fff; } } .o-mitigation .o-income-strategy__list-item:hover .o-income-strategy__list-item-title, .o-mitigation .o-income-strategy__list-item:hover .o-income-strategy__list-item-subtitle, .o-mitigation .o-income-strategy__list-item:hover .o-income-strategy__list-item-desc, .o-mitigation .o-income-strategy__list-item:hover .o-income-strategy__list-item-icon-wrapper .icon { color: #fff; } .o-mitigation .o-income-strategy__list-item:hover::after { -webkit-transition: background-color 0.3s ease, opacity 0.3s ease; transition: background-color 0.3s ease, opacity 0.3s ease; background-color: #6ECDCC; opacity: 0.8; } .o-mitigation #section-1 { position: relative; } .o-mitigation #section-1:before { content: ''; width: 50vw; height: calc(100% + 60px); display: block; position: absolute; right: 50%; top: 0; background-color: #fdfdfd; z-index: -1; } .o-mitigation #section-2 { position: relative; } .o-mitigation #section-2:before { content: ''; width: 50vw; height: calc(100% + 200px); display: block; position: absolute; left: 50%; top: -40px; background-color: #fdfdfd; z-index: -1; } .o-mitigation #circle-cycle { position: relative; } .o-mitigation #circle-cycle:before { content: ''; width: 50vw; height: calc(100% - 220px); display: block; position: absolute; right: 50%; top: -150px; background-color: #fdfdfd; z-index: -1; } @media (max-width: 767px) { .container.-small-padding { padding-left: 8px; padding-right: 8px; } } html.-lang-en .container.-small-padding { padding-left: 13px; padding-right: 13px; }