/*CSS Document*/
    /*import font style*/
    
    @font-face {
        font-family: Noto Sans SC;
        src: url(../fonts/NotoSansSC-Thin.otf) format('opentype');
        font-weight: 100;
        font-style: normal;
    }
    
    @font-face {
        font-family: Noto Sans SC;
        src: url(../fonts/NotoSansSC-Light.otf) format('opentype');
        font-weight: 300;
        font-style: normal;
    }
    
    @font-face {
        font-family: Noto Sans SC;
        src: url(../fonts/NotoSansSC-Regular.otf) format('opentype');
        font-weight: 400;
        font-style: normal;
    }
    
    @font-face {
        font-family: Noto Sans SC;
        src: url(../fonts/NotoSansSC-Medium.otf) format('opentype');
        font-weight: 500;
        font-style: normal;
    }
    
    @font-face {
        font-family: Noto Sans SC;
        src: url(../fonts/NotoSansSC-Bold.otf) format('opentype');
        font-weight: 700;
        font-style: normal;
    }
    
    @font-face {
        font-family: Noto Sans SC;
        src: url(../fonts/NotoSansSC-Black.otf) format('opentype');
        font-weight: 900;
        font-style: normal;
    }
    
    @font-face {
        font-family: Noto Sans TC;
        src: url(../fonts/NotoSansTC-Thin.otf) format('opentype');
        font-weight: 100;
        font-style: normal;
    }
    
    @font-face {
        font-family: Noto Sans TC;
        src: url(../fonts/NotoSansTC-Light.otf) format('opentype');
        font-weight: 300;
        font-style: normal;
    }
    
    @font-face {
        font-family: Noto Sans TC;
        src: url(../fonts/NotoSansTC-Regular.otf) format('opentype');
        font-weight: 400;
        font-style: normal;
    }
    
    @font-face {
        font-family: Noto Sans TC;
        src: url(../fonts/NotoSansTC-Medium.otf) format('opentype');
        font-weight: 500;
        font-style: normal;
    }
    
    @font-face {
        font-family: Noto Sans TC;
        src: url(../fonts/NotoSansTC-Bold.otf) format('opentype');
        font-weight: 700;
        font-style: normal;
    }
    
    @font-face {
        font-family: Noto Sans TC;
        src: url(../fonts/NotoSansTC-Black.otf) format('opentype');
        font-weight: 900;
        font-style: normal;
    }
    
    @font-face {
        font-family: Ropa Sans;
        src: url(../fonts/RopaSans-Regular.ttf) format('opentype');
        font-weight: 300;
        font-style: normal;
    }
    /*common*/
    
    html:lang(zh-Hant) body {
        font-family: Noto Sans Tc;
    }
    
    html:lang(zh-Hans) body {
        font-family: Noto Sans Sc;
    }
    
    html,
    body {
        width: auto!important;
        overflow-x: hidden!important
    }
    
    body {
        overflow-x: hidden;
        font-size: 0.875rem;
    }
    
    .container {
        max-width: 1230px;
    }
    
    h2,
    h3 {
        font-weight: 400;
    }
    
    h2 {
        font-size: 2rem;
        font-weight: 600;
    }
    
    h3 {
        font-size: 1.50rem;
    }
    
    h4 {
        font-size: 1.125rem;
    }
    
    p {
        font-size: 1rem;
    }
    
    span {
        display: block;
    }
    
    .opacity-0 {
        opacity: 0!important;
    }
    
    .big-num {
        font-size: 3.5rem;
        font-weight: 700;
        background: transparent !important;
        margin-bottom: 4rem;
        line-height: 0.5;
    }
    
    .underline,
    .topline {
        position: relative;
        padding-bottom: 1.5rem;
        display: inline-block;
    }
    
    .topline {
        padding-bottom: 0;
        padding-top: 0.75rem;
        font-size: 1.263em;
    }
    
    .underline::after {
        content: '';
        width: 100%;
        height: 3px;
        background: #004eaa;
        position: absolute;
        bottom: 0;
        left: 0;
    }
    
    .topline::after {
        content: '';
        width: 100%;
        height: 3px;
        background: #004eaa;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .box-wrapper {
        display: inline-block;
        padding: 0.15rem;
        border-top: 1px solid #000;
        border-right: 1px solid #000;
        position: relative;
    }
    
    .box-wrapper .box {
        padding: 0.5rem 0.5rem 1rem;
        border: 1px solid #000;
        margin-bottom: 0;
        min-width: 240px;
        min-height: 75px;
        display: flex;
        align-items: center;
    }
    
    .message .box {
        background-color: #fff8eb;
    }
    
    .box-wrapper::after,
    .box-wrapper::before {
        position: absolute;
        content: '';
        width: 0.8rem;
        height: calc(100% + 0.2rem);
        border: 1px solid #000;
        transform: skewY(-40deg);
    }
    
    .box-wrapper::after {
        width: calc(100% + 0.2rem);
        border-top: 0;
        border-left: 0;
        height: 0.8rem;
        bottom: -13px;
        margin-bottom: 0.5px;
        right: 0.23rem;
        margin-right: 0.5px;
        transform: skewX(-40deg);
    }
    
    .box-wrapper::before {
        top: 0.25rem;
        margin-top: 0.5px;
        left: calc(-0.8rem);
        margin-left: 0px;
        border-right: 0;
        border-bottom: 0;
    }
    /*menu*/
    
    header {
        position: relative;
        z-index: 9999;
    }
    
    #menu {
        position: fixed;
        width: 100%;
        transition: 0.3s;
        padding-top: 40px;
        padding-bottom: 40px;
    }
    
    #menu * {
        transition: all 0.3s ease-in-out;
    }
    
    #menu .logo {
        width: 268px;
        height: 134px;
        position: relative;
    }
    
    #menu .logo img {
        max-width: 268px;
        width: 100%;
        transition-duration: 0.2s;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    #menu.sticky .logo {
        width: 160px;
        height: 82px;
    }
    
    #menu.sticky .logo img {
        max-width: 160px;
    }
    
    #menu.sticky {
        background: #fff;
        z-index: 99999;
        padding-top: 20px;
        padding-bottom: 20px;
        top: 0;
    }
    
    #menu .logo .logo-dark {
        opacity: 0;
    }
    
    #menu .logo .logo-white {
        opacity: 1;
    }
    
    #menu.sticky .logo .logo-white {
        opacity: 0;
    }
    
    #menu.sticky .logo .logo-dark {
        opacity: 1;
    }
    
    #menu ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
    }
    
    #menu ul li {
        padding-right: 0.75rem;
    }
    
    #menu ul li:nth-of-type(6),
    #menu ul li:last-of-type {
        padding-right: 0;
    }
    
    #menu ul li img {
        max-height: 2rem;
        max-width: 2rem;
        width: 100%;
        height: 100%;
    }
    
    #menu ul li.lang a {
        color: #0056B3;
        font-size: 1.125rem;
        transition: all 0.3s ease-in-out;
        /* text-shadow: 0px 0px 5px black; */
    }
    
    #menu ul li.lang {
        position: relative;
        padding: 0 0.8rem 0 2rem;
    }
    
    #menu ul li.lang.last {
        padding: 0 2rem 0 0.8rem;
    }
    
    #menu ul li.lang::after {
        position: absolute;
        background: #0056b3;
        content: '';
        height: 100%;
        width: 1px;
        top: 0;
        left: 100%;
        transition: all 0.3s ease-in-out;
    }
    
    #menu .nav-menu {
        height: 100%;
        display: block;
        width: 100%;
    }
    
    #menu ul li.lang.last::after {
        display: none;
    }
    
    #menu ul {
        margin-top: 11px;
    }
    
    #menu .hamburger {
        padding: 0;
        display: flex;
    }
    
    #menu .hamburger-box {
        width: 38px;
        height: 38px;
    }
    
    #menu .hamburger-inner,
    #menu .hamburger-inner:after,
    #menu .hamburger-inner:before,
    #menu .hamburger.is-active .hamburger-inner,
    #menu .hamburger.is-active .hamburger-inner:after,
    #menu .hamburger.is-active .hamburger-inner:before {
        background-color: #0056b3;
        transition: all 0.3s ease-in-out;
    }
    
    #menu .hamburger--squeeze.is-active .hamburger-inner:before {
        top: 0;
        transition: top 75ms ease, opacity 75ms ease .12s;
        opacity: 0;
    }
    
    #menu .hamburger--squeeze.is-active .hamburger-inner:after {
        bottom: 0;
        transition: bottom 75ms ease, transform 75ms cubic-bezier(.215, .61, .355, 1) .12s;
        transform: rotate( -90deg);
    }
    
    #menu .hamburger-inner,
    #menu .hamburger-inner:after,
    #menu .hamburger-inner:before {
        width: 38px;
        height: 3px;
    }
    
    #menu .hamburger-inner:before {
        top: -11px;
    }
    
    #menu .hamburger-inner:after {
        bottom: -11px;
    }
    
    #menu .header {
        z-index: 9999;
        position: relative;
    }
    
    header .menu-all {
        position: fixed;
        overflow: hidden;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #F7FAFF;
        padding-top: 121px;
        transform: translateY(-100%);
        transition: transform 0.5s ease-in-out;
    }
    
    header .menu-all .container {
        height: 100%;
        overflow: auto;
    }
    
    header.open .menu-all {
        transform: translateY(0);
    }
    
    header .menu-all ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        height: 100%;
        padding-top: 7vh;
    }
    
    header .menu-all ul.share {
        padding-top: 0;
        flex-direction: row;
    }
    
    header .menu-all ul.share li {
        width: auto;
        padding-right: 0.5rem;
    }
    
    header .menu-all ul.share li .share_btn {
        width: 1.5rem;
        height: 1.5rem;
        cursor: pointer;
    }
    
    header .menu-all ul.share li a:after,
    header .menu-all ul.share li a:before {
        display: none;
    }
    
    header .menu-all .colorbar-short {
        left: 0;
        top: 1rem;
    }
    
    header .menu-all .colorbar-long {
        right: 0;
        bottom: 0;
    }
    
    header .menu-all ul li {
        margin-bottom: 1rem;
        width: 100%;
    }
    
    header .menu-all ul li a {
        display: block;
        width: 100%;
        max-width: 400px;
        position: relative;
        font-size: 1.125rem;
        color: #205DB1;
        -webkit-transition: all .4s ease;
        -moz-transition: all .4s ease;
        -o-transition: all .4s ease;
        -ms-transition: all .4s ease;
        transition: all .4s ease;
    }
    
    header .menu-all ul li a {
        text-decoration: none!important;
    }
    
    header .menu-all ul li a:hover,
    header .menu-all ul li a.active {
        font-size: 1.45rem;
    }
    
    header .menu-all ul li a:after {
        background: #005baa;
        width: 0;
        height: 3px;
        bottom: 2px;
        left: 0;
        content: "";
        display: block;
        -webkit-transition: all .4s ease;
        -moz-transition: all .4s ease;
        -o-transition: all .4s ease;
        -ms-transition: all .4s ease;
        transition: all .4s ease;
    }
    
    header .menu-all ul li a.active:after,
    header .menu-all ul li a:hover:after {
        width: 100%;
    }
    
    header .menu-all ul li a:before {
        content: '';
        position: absolute;
        left: calc(100% - 53px);
        top: 50%;
        transform: translateY(-50%);
        background-image: url(../../assets/images/arrow_menu.svg);
        background-position: center right;
        background-size: contain;
        background-repeat: no-repeat;
        width: 53px;
        height: 25px;
        opacity: 0;
        transition: all 0.2s ease-in-out;
    }
    
    header .menu-all ul li a.active::before,
    header .menu-all ul li a:hover::before {
        opacity: 1;
    }
    
    header .share_btn {
        width: 2rem;
        height: 2rem;
        background-position: center center;
        background-size: contain;
        background-repeat: no-repeat;
        transition: all 0.3s ease-in-out;
    }
    
    header .share_btn.facebook {
        background-image: url(../images/facebook.svg);
    }
    
    header .share_btn.twitter {
        background-image: url(../images/twitter.svg);
    }
    
    header .share_btn.linkedin {
        background-image: url(../images/linkedin.svg);
    }
    
    header .share_btn.instagram {
        background-image: url(../images/ig.svg);
    }
    
    header .share_btn.wechat {
        background-image: url(../images/wechat.svg);
    }
    
    header .share_btn.download {
        background-image: url(../images/download.svg);
    }
    /*
header .sticky .share_btn.faceboook {
background-image: url(../images/facebook_white.svg);
}

header .sticky .share_btn.twitter {
background-image: url(../images/twitter_white.svg);
}

header .sticky .share_btn.linkedin {
background-image: url(../images/linkedin_white.svg);
}

header .sticky .share_btn.instagram {
background-image: url(../images/ig_white.svg);
}

header .sticky .share_btn.wechat {
background-image: url(../images/wechat_white.svg);
}

header .sticky .share_btn.download {
background-image: url(../images/download_white.svg);
} */
    
    .bg-element,
    .bg-color {
        position: absolute;
    }
    
    .slogan {
        max-width: 330px;
        width: auto;
        height: auto;
    }
    
    .read_more {
        width: 180px;
        height: 37px;
        position: relative;
        display: block;
    }
    
    .more {
        width: 180px;
        height: 30px;
        position: relative;
    }
    
    .more::before {
        content: '';
        position: absolute;
        width: calc(100% - 39px);
        background-color: #0E55AD;
        height: 3px;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }
    
    .more p {
        margin-left: 0.9rem;
        width: 95px;
        height: auto;
        line-height: 1;
        padding: 0 0.8rem 0.8rem;
        color: #0E55AD;
        background-color: #F7FAFF;
        border-bottom: 3px solid;
        position: relative;
        text-align: center;
        cursor: pointer;
    }
    
    .more p::before {
        content: '';
        position: absolute;
        width: 100%;
        height: calc(48.8% + 2px);
        bottom: -1px;
        left: 0;
        border-left: 3px solid;
        border-right: 3px solid;
    }
    
    .more .arrow {
        position: absolute;
        right: 10px;
        top: 0;
        width: 0;
        height: 0;
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;
        border-left: 25px solid #0E55AD;
    }
    
    .wechatqrcode {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
        display: none;
    }
    
    .wechatqrcode .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.75);
        cursor: pointer;
    }
    
    .wechatqrcode .img-wrapper {
        max-width: 90vw;
        width: auto;
        height: auto;
        position: relative;
        padding: 1rem;
        background: #fff;
        border-radius: 2rem;
    }
    
    .wechatqrcode .img-wrapper img {
        max-width: 100%;
        width: auto;
        height: auto;
    }
    
    .wechatqrcode .img-wrapper .close {
        position: absolute;
        width: 30px;
        height: 30px;
        bottom: 102%;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        transform: rotateZ( 45deg);
        cursor: pointer;
    }
    
    .wechatqrcode .img-wrapper .close::before,
    .wechatqrcode .img-wrapper .close::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: #fff;
    }
    
    .wechatqrcode .img-wrapper .close::before {
        width: 2px;
        height: 100%;
    }
    /* banner */
    
    #banner {
        padding-top: 40px;
        padding-bottom: 40px;
        background: radial-gradient(circle, rgba(255, 255, 255, 1) 14%, #46C2EF 60%, #009FDF 95%);
        min-height: 800px;
        height: 100vh;
        height: auto;
    }
    
    #banner .bg-image {
        height: 100%;
        width: 100%;
        margin-top: -2rem;
        /* background-image: url(../images/topbanner.svg);
background-size: contain;
background-position: center center;
background-repeat: no-repeat; */
    }
    
    #banner .bg-image svg {
        max-height: 75vh;
        min-height: 500px;
    }
    
    #banner .container {
        position: relative;
        padding-top: 6.8rem;
    }
    
    #banner .bg-element {
        top: 0;
        right: 105%;
        position: absolute;
        width: 8px;
        height: 241px;
    }
    
    #banner h1 {
        margin-top: -10%;
        color: #FFF;
    }
    
    #banner h1 span {
        display: block;
    }
    
    #swiper {
        padding-top: 3.5rem;
        /* padding-bottom: 10rem; */
    }
    
    #swiper.box-1 {
        background: #f2f8ec;
    }
    
    #swiper.box-2 {
        background: #FFF8EA;
    }
    
    #swiper.box-3 {
        background: #EBFBFF;
    }
    
    #swiper.box-4 {
        background: #EBEFF8;
    }
    
    #swiper .arrow-prev,
    #swiper .arrow-next {
        position: absolute;
        width: 42px;
        height: 42px;
        transition: all 0.3s ease-in-out;
        z-index: 999;
        background-position: center center;
        background-size: contain;
        background-repeat: no-repeat;
        cursor: pointer;
        top: 50%;
    }
    
    #swiper .arrow-prev {
        right: 103%;
        transform: translateY(-50%);
    }
    
    #swiper .arrow-next {
        left: 103%;
        transform: translateY(-50%);
    }
    
    #swiper.box-1 .arrow-prev {
        background-image: url(../images/arrow_green.svg);
    }
    
    #swiper.box-1 .arrow-next {
        background-image: url(../images/arrow_green_next.svg);
    }
    
    #swiper.box-2 .arrow-prev {
        background-image: url(../images/arrow_yellow.svg);
    }
    
    #swiper.box-2 .arrow-next {
        background-image: url(../images/arrow_yellow_next.svg);
    }
    
    #swiper.box-3 .arrow-prev {
        background-image: url(../images/arrow_blue.svg);
    }
    
    #swiper.box-3 .arrow-next {
        background-image: url(../images/arrow_blue_next.svg);
    }
    
    #swiper.box-4 .arrow-prev {
        background-image: url(../images/arrow_d_blue.svg);
    }
    
    #swiper.box-4 .arrow-next {
        background-image: url(../images/arrow_d_blue_next.svg);
    }
    
    #swiper .box-wrapper {
        margin-left: 13px;
    }
    
    #swiper .text {
        padding-left: 1rem;
        padding-bottom: 2rem;
        padding-top: 5rem;
    }
    
    #swiper .box-container {
        display: none;
    }
    
    #swiper .box-container.active {
        display: block;
    }
    
    #swiper .box-container .image .sc_cover,
    #swiper .box-container .image img {
        width: 100%;
        height: auto;
    }
    
    #swiper .box-container .bg-element {
        top: 0;
        left: 105%;
    }
    
    #swiper .box-container .image .bg-element {
        top: 0;
        left: auto;
        right: 0;
        width: 130px;
        height: 33px;
    }
    
    #swiper .box-container .text .bg-element {
        top: -15%;
        left: auto;
        right: 110%;
    }
    
    #swiper .summary {
        position: relative;
        display: flex;
        /* bottom: calc(-0.75rem + 1px);
right: 0; */
        padding-top: 4rem;
        margin-bottom: -0.842em;
    }
    
    #swiper .summary .dot {
        width: 1.684em;
        height: 1.684em;
        box-shadow: 0 0 0 2px transparent;
        border-radius: 50%;
        cursor: pointer;
        margin-left: 2rem;
        transition: all 0.3s ease-in-out;
    }
    
    #swiper .summary .dot:first-of-type {
        margin-left: 0;
    }
    
    #swiper .summary .dot:hover {
        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5);
    }
    
    #swiper .summary .dot.active,
    #swiper.box-1 .dot.green,
    #swiper.box-2 .dot.orange,
    #swiper.box-3 .dot.blue,
    #swiper.box-4 .dot.dblue {
        box-shadow: 0 0 0 2px #000;
    }
    
    #swiper .image {
        width: 105%;
        margin-top: -1rem;
    }
    
    .colorbar {
        position: absolute;
        width: 8px;
        height: 241px;
    }
    
    #swiper .colorbar {
        bottom: -120px;
        left: 106%;
    }
    
    #swiper .big-num {
        font-family: 'Ropa Sans', sans-serif;
    }
    
    #swiper .desktop {
        display: inline-block;
    }
    
    #swiper .big-num span,
    #swiper .big-num small {
        display: inline-block;
    }
    
    #swiper .big-num small {
        font-size: 1.875rem;
        font-weight: 500;
    }
    
    #members .more,
    #members .read_more {
        margin-top: 5rem;
    }
    
    #members {
        background: linear-gradient(180deg, #f7fbfc, #f7faff);
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    
    #members .underline {
        margin-bottom: 0;
    }
    
    #members .bg-color {
        top: 0;
        right: 0;
        height: 100%;
        width: 50vw;
    }
    
    #members .pt-4 {
        padding-top: 3.5rem !important;
    }
    
    #members ul.member-list {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        width: 100%;
        height: 100%;
        margin-bottom: 0;
        position: relative;
    }
    
    #members ul.member-list.second {
        margin-left: 0;
        justify-content: flex-end;
    }
    
    #members ul.member-list::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 5px;
        background-color: #72c5f1;
        left: 0;
        bottom: 1.5rem;
    }
    
    #members .bg-element-1 {
        width: 100px;
        height: 75px;
        position: absolute;
        bottom: 1rem;
        right: 100%;
    }
    
    #members .bg-element-2 {
        width: 56px;
        height: 56px;
        position: absolute;
        bottom: 1rem;
        left: 100%;
    }
    
    #members ul.member-list li {
        width: calc(20% - 1rem);
        padding: 0 5px;
        position: relative;
    }
    
    #members ul.member-list li::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 5px;
        background-color: #72c5f1;
        left: 0;
        bottom: 1.5rem;
    }
    
    #members ul.member-list.third::before {
        background-color: #1b52a2;
    }
    
    #members ul.member-list li.ceo::before {
        background-color: #cbda43;
    }
    
    #members ul.member-list li.last::before {
        background-color: #1b52a2;
    }
    
    #members ul.member-list li .member img {
        width: 100%;
        height: auto;
    }
    
    #members ul.member-list li .member {
        position: relative;
        padding: 0 0.5rem;
    }
    
    #members ul.member-list li .member p {
        text-align: center;
        position: absolute;
        font-size: 1rem;
        top: 90%;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: auto;
        opacity: 0;
        transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    
    #members ul.member-list li .member:hover p {
        top: 102%;
        opacity: 1;
    }
    
    #message {
        padding: 4rem 0;
    }
    
    #message .box-2 {
        padding-top: 7rem;
        padding-bottom: 5rem;
    }
    
    #message .box-1 {
        padding-bottom: 7rem;
    }
    
    #message .name p {
        font-size: 1.5rem;
    }
    
    #message .name p.topline {
        color: #0E55AD;
    }
    
    #message .bg-color {
        width: 100vw;
        height: 60%;
        background: #e2eaf5;
        border-left: 2px solid;
        border-bottom: 2px solid;
        border-color: #0E55AD;
        bottom: 3rem;
        left: 15px;
    }
    
    #message .title {
        margin-bottom: -3.5rem;
        z-index: 1;
    }
    
    #message .bg-color::after {
        content: '';
        position: absolute;
        width: 70%;
        max-width: 703px;
        height: 2px;
        top: 0;
        left: 0;
        background: #0E55AD;
    }
    
    #message .bg-color::before {
        content: '';
        position: absolute;
        background-image: url(../images/pattern.svg);
        background-repeat: no-repeat;
        background-size: contain;
        transform: scaleX(-1);
        width: 100px;
        height: 75px;
        left: 720px;
        top: -44px;
    }
    
    #message .desc {
        position: relative;
        /* display: flex;
        align-items: flex-end; */
        z-index: 2;
    }
    
    #message .desc img {
        width: 500px;
        height: 579px;
        margin-left: 2.5rem;
        margin-bottom: 3.5rem;
    }
    
    #message .desc::after {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        max-width: 385px;
        max-height: 200px;
        background-image: url(../images/graphic2.svg);
        background-size: contain;
        background-repeat: no-repeat;
        top: -11%;
        left: 43%;
        z-index: -1;
    }
    
    #message .box-wrapper {
        position: absolute;
        top: 76%;
        right: 0;
        width: 50%;
    }
    /* #message .box-wrapper {
        position: relative;
        width: auto;
        margin-bottom: 3.5rem;
        margin-left: 2rem;
    } */
    /* @media screen and (min-width: 1200px) {
        #message .offset-xl-2 {
            margin-left: 10%;
        }
        #message .col-xl-10 {
            -ms-flex: 0 0 90%;
            flex: 0 0 90%;
            max-width: 90%;
        }
    } */
    
    #message .box-wrapper .box {
        width: 100%;
        /* min-height: 235px; */
        padding: 1.5rem 2.5rem 1.8rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    #message .box p {
        color: #0E55AD;
        font-size: 1.35rem;
        font-weight: 500;
        margin-bottom: 0;
        line-height: 1.4;
    }
    
    #message .more,
    #message .read_more {
        position: relative;
        /* width: 100px; */
    }
    
    #message .more p {
        background-color: #fff;
    }
    
    #message .box-wrapper {
        border: 1px solid #000;
    }
    
    #message .box-wrapper::before {
        margin-left: -3px;
        left: -15px;
        border-bottom: 1px solid #000;
        height: calc(100% + 1px);
        top: -8px;
        transform: skewY(38deg);
        width: 17px;
        margin-top: 1px;
    }
    
    #message .box-wrapper::after {
        transform: skewX(52deg);
        top: -14px;
        bottom: auto;
        width: calc(100% + 1px);
        height: 14px;
        border-top: 1px solid #000;
        margin-right: 0px;
        right: 8px;
    }
    
    #message .left .bg-color {
        transform: scaleX(-1);
        left: auto;
        right: 21.5%;
    }
    
    #message .left .desc {
        display: flex;
        flex-direction: row-reverse;
    }
    
    #message .left .box-wrapper {
        left: 13%;
        right: auto;
        max-width: 670px;
    }
    /* @media screen and (min-width:1200px) {
        #message .left .box-wrapper {
            margin-left: 16.666667%;
        }
    } */
    
    #message .left .bg-color::after {
        width: 70%;
        max-width: 590px;
    }
    
    #message .left .bg-color::before {
        left: 610px;
    }
    
    #message .left .more,
    #message .left .read_more {
        margin-left: auto;
        margin-right: 0;
        margin-top: 0;
    }
    
    #message .left .more::before {
        top: 51%;
    }
    
    #message .left .desc::after {
        transform: scaleX(-1);
        left: 38%;
    }
    
    #message .colorbar {
        right: 106%;
        top: -4.2rem;
    }
    
    #public,
    #public .top {
        position: relative;
    }
    
    #public {
        padding-bottom: 6rem;
    }
    
    #select {
        z-index: 99;
        position: relative;
    }
    
    #public .top {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    
    #public .top::before {
        position: absolute;
        content: '';
        width: 100vw;
        height: calc(100% + 3rem);
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
    }
    
    #public #orange-box .top::before {
        border-top: 3px solid #fcd259;
    }
    
    #public #blue-box .top::before {
        border-top: 3px solid #21A9DD;
    }
    
    #public #green-box .top::before {
        border-top: 3px solid #C8DC30;
    }
    
    #public #purple-box .top::before {
        border-top: 3px solid #8765A9;
    }
    
    #public .data.border-bottom {
        margin-top: -2rem;
    }
    
    #orange-box .data.border-bottom,
    #public #orange-box .top::before,
    #public #orange-box .more p {
        background-color: #fff8eb;
    }
    
    #blue-box .data.border-bottom,
    #public #blue-box .top::before,
    #public #blue-box .more p {
        background-color: #EBFBFF;
    }
    
    #green-box .data.border-bottom,
    #public #green-box .top::before,
    #public #green-box .more p {
        background-color: #F2F8EB;
    }
    
    #public #purple-box .top::before,
    #public #purple-box .more p {
        background-color: #EBEFF8;
    }
    
    #orange-box .data.border-bottom {
        background-color: #FFF2D5;
    }
    
    #blue-box .data.border-bottom {
        background-color: #DFF6FD;
        margin-top: -1.6rem;
    }
    
    #green-box .data.border-bottom {
        background-color: #FBFFE0;
    }
    
    #purple-box .data.border-bottom {
        background-color: #EDE2F2;
    }
    
    #orange-box .data.border-bottom {
        border-bottom: 3px solid #fcd259;
    }
    
    #blue-box .data.border-bottom {
        border-bottom: 3px solid #21A9DD;
    }
    
    #green-box .data.border-bottom {
        border-bottom: 3px solid #C8DC30;
    }
    
    #purple-box .data.border-bottom {
        border-bottom: 3px solid #8765A9;
    }
    
    #orange-box .data .row::after {
        background-color: #fcd259;
    }
    
    #blue-box .data.border-bottom .row::after {
        background-color: #21A9DD;
    }
    
    #green-box .data.border-bottom .row::after {
        background-color: #C8DC30;
    }
    
    #purple-box .data.border-bottom .row::after {
        background-color: #8765A9;
    }
    
    #green-box .green-1-box .text-wrapper {
        width: 40%;
    }
    
    #green-box .green-2-box .text-wrapper {
        width: 60%;
    }
    
    #green-box .green-2-box .box-wrapper {
        margin-bottom: 1.5rem;
        width: 100%;
    }
    
    #green-box .green-2-box .box-wrapper .box {
        font-size: 1rem;
        width: 100%;
        min-width: auto;
        min-height: auto;
        text-align: center;
        justify-content: center;
        line-height: 1.25;
    }
    
    #green-box .green-1-box #green_info1 {
        width: 60%;
        height: 100%;
    }
    
    #green-box .green-2-box #green_info2 {
        width: 40%;
        height: 100%;
        padding-right: 1rem;
    }
    
    #purple-box .data .text-wrapper {
        position: relative;
    }
    
    #purple-box .data .data {
        font-size: 3.8rem;
        font-weight: 700;
        line-height: 0.8;
        position: relative;
        font-family: 'Ropa Sans', sans-serif;
        /* margin-bottom: 2.5rem; */
        display: inline-block;
    }
    
    #purple-box .data small {
        font-size: 1.875rem;
        font-weight: 500;
        margin-left: 5px;
        line-height: 1;
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    
    #purple-box .purple-2-box,
    #purple-box .purple-3-box {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
    }
    
    #public .top p.desc {
        font-size: 1.25rem;
        font-weight: 500;
        max-width: 1010px;
        width: 100%;
        margin: 0 auto;
        margin: 1rem auto 6rem;
    }
    
    #public #select .sticky-btn {
        opacity: 1;
        position: fixed;
        top: 122px;
        width: 100%;
        transition: transform 0.3s ease-in-out;
        z-index: 2;
        transform: translateY(-350%);
    }
    
    #public #select .sticky-btn.show {
        transition: transform 0.3s ease-in-out;
        transform: translateY(0%);
    }
    
    #public #select .sticky-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        background-color: #fff;
        height: 55%;
    }
    
    #public #select .sticky-btn .list .box-wrapper .box {
        padding: 0.5rem;
        min-height: 85px;
        transition: all 0.5s ease-in-out;
        font-size: 1.25rem;
    }
    
    #purple-box .data .text-wrapper p {
        position: relative;
        font-size: 1rem;
        font-weight: 400;
        justify-content: center;
        align-items: flex-end;
    }
    
    #purple-box .data h4 {
        margin-top: 5rem;
        padding-bottom: 2rem;
        font-size: 1.5rem;
    }
    
    #purple-box .data .purple-2-box small {
        position: relative;
        font-family: 'Ropa Sans', sans-serif;
    }
    
    #purple-box .data .purple-1-box small {
        position: relative;
        font-family: 'Ropa Sans', sans-serif;
    }
    
    #public .more {
        margin-top: auto;
    }
    
    #public .colorbar {
        right: 106%;
        top: 4rem;
        z-index: 1;
    }
    
    #public .img-human {
        max-height: 450px;
        height: 100%;
    }
    
    #public .top .pattern {
        width: 130px;
        height: 100px;
        margin-bottom: 2.5rem;
    }
    
    #public .container {
        position: relative;
        z-index: 2;
    }
    
    #public .qr-code {
        width: 100%;
        max-width: 308px;
        height: 100%;
        max-height: 450px;
        display: flex;
        align-items: flex-end;
        position: absolute;
        left: 10rem;
        bottom: 0;
    }
    
    #public .qr-code svg {
        position: relative;
    }
    
    #public .list {
        padding-left: 29px;
    }
    
    #public .list .box-wrapper {
        width: 100%;
        height: 100%;
        display: block;
        cursor: pointer;
        box-shadow: 0px 0px 2px 0px #fff;
        transition: box-shadow 0.7s ease-in-out;
    }
    
    #public .list .box-wrapper:hover h3,
    #public .list.active .box-wrapper h3 {
        font-weight: 600;
    }
    
    #public .list .box-wrapper.orange:hover,
    #public .list.active .box-wrapper.orange {
        box-shadow: -15px 15px 2px 3px rgb(255 203 75 / 40%), -20px 20px 2px 4px rgb(255 203 75 / 30%), -25px 25px 2px 5px rgb(255 203 75 / 20%);
        transition: box-shadow 0.5s ease-in-out;
    }
    
    #public .list .box-wrapper.blue:hover,
    #public .list.active .box-wrapper.blue {
        box-shadow: -15px 15px 2px 3px rgb(51 164 213 / 40%), -20px 20px 2px 4px rgb(51 164 213 / 30%), -25px 25px 2px 5px rgb(51 164 213 / 20%);
        transition: box-shadow 0.5s ease-in-out;
    }
    
    #public .list .box-wrapper.green:hover,
    #public .list.active .box-wrapper.green {
        box-shadow: -15px 15px 2px 3px rgb(133 199 70 / 40%), -20px 20px 2px 4px rgb(133 199 70 / 20%), -25px 25px 2px 5px rgb(133 199 70 / 20%);
        transition: box-shadow 0.5s ease-in-out;
    }
    
    #public .list .box-wrapper.purple:hover,
    #public .list.active .box-wrapper.purple {
        box-shadow: -15px 15px 2px 3px rgb(122 91 153 / 40%), -20px 20px 2px 4px rgb(122 91 153 / 30%), -25px 25px 2px 5px rgb(122 91 153 / 20%);
        transition: box-shadow 0.5s ease-in-out;
    }
    
    #select .gallery-thumbs {
        margin-top: 3rem;
    }
    
    #select .gallery-bottom {
        overflow: initial;
    }
    
    #public .list .box-wrapper .box {
        display: flex;
        padding: 2rem 1rem;
        width: 100%;
        height: 100%;
        line-height: 1.3;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: #000;
        min-height: 150px;
        cursor: pointer;
        align-content: center;
        transition: all 0.3s ease-in-out;
    }
    
    #public .list .box-wrapper .box span {
        display: block;
    }
    
    #public .box-wrapper::before {
        top: 0.23rem;
        left: calc(-0.75rem);
    }
    /* #public .green-2-box .box-wrapper::before {
top: 0.25rem;
left: calc(-0.75rem);
height: calc(100% + 0.15rem);
} */
    
    #public .bg-color {
        width: 100vw;
        height: 100%;
        background-color: #fff8eb;
    }
    
    #public img.photo {
        width: 100%;
        height: auto;
    }
    
    #public .photo-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    
    #public .top .photo-wrapper p {
        width: 100%;
        text-align: left;
    }
    
    @media (min-width: 1200px) {
        #public .top .col-xl-7 {
            -ms-flex: 0 0 55%;
            flex: 0 0 55%;
            max-width: 55%;
        }
        #public .top .col-xl-5 {
            -ms-flex: 0 0 45%;
            flex: 0 0 45%;
            max-width: 45%;
        }
    }
    
    .case {
        padding-top: 4rem;
    }
    
    .case .name {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        position: relative;
        position: absolute;
        bottom: 4rem;
        left: 4rem;
    }
    
    .case .intro {
        flex-wrap: nowrap;
        align-items: center;
        position: relative;
        flex-direction: row;
        display: flex;
    }
    
    .case .intro .bg-color {
        width: 100vw;
        height: 100%;
        min-height: 210px;
        right: 0;
        top: 0;
        background-color: #FFCF5B;
    }
    
    #public .case .wrapper-text,
    #public .case .wrapper-text h2,
    #public .case .wrapper-text p {
        position: relative;
    }
    
    #public .case .wrapper-text {
        padding-bottom: 15%;
        padding-top: 7rem;
    }
    
    #public .case .wrapper-text::before {
        content: '';
        position: absolute;
        width: 100vw;
        background-color: #fff;
        height: 100%;
        top: 0;
        right: 0;
    }
    
    #public .case .bg-color {
        position: absolute;
        width: 100vw;
        height: 80%;
        right: 0;
        bottom: 2rem;
    }
    
    #orange-box .case .bg-color {
        background-color: #FFCF5B;
        bottom: 1.8rem;
    }
    
    #blue-box .case .bg-color {
        background-color: #22a9dd;
        right: 0;
        bottom: 1.55rem;
    }
    
    #blue-box .data .blue-3-box .num {
        max-height: 88px;
    }
    
    #green-box .case .bg-color {
        background-color: #C8DC30;
        bottom: 1.55rem;
    }
    
    .case .desc {
        width: 80%;
        max-width: 500px;
    }
    
    @media screen and (min-width:1199px) {
        #green-box .case .intro .wrapper {
            max-width: 380px;
        }
    }
    
    @media screen and (max-width:1199px) and (min-width:991px) {
        /* #green-box .case .name {
            padding-left: 28%;
        } */
        .case .name {
            left: 2rem;
        }
    }
    
    .case .intro img {
        height: 89px;
        width: 83px;
        position: relative;
    }
    
    .case .intro .wrapper {
        padding: 2.5rem 0.5rem 2.5rem 1.5rem;
        max-width: 500px;
    }
    
    #orange-box .case .intro p:first-child {
        margin-left: -0.5rem;
    }
    
    #green-box .case .intro .wrapper {
        padding: 2.5rem 1.5rem;
    }
    
    .case .intro p {
        line-height: 1.5;
        position: relative;
        font-weight: 700;
    }
    
    .case .name {
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
    }
    
    .case .name p {
        font-size: 1.5rem;
        color: #004eaa;
        display: block;
        margin-bottom: 0.5rem;
    }
    
    .case .name p.small {
        font-size: 1rem;
    }
    
    .case .bg-element {
        position: relative;
    }
    
    .case .bg-element img {
        height: auto;
        width: 105%;
    }
    
    #public .data .swiper-container {
        padding-top: 3rem;
        padding-bottom: 2rem;
    }
    
    #public .data .swiper-button-next {
        right: 0;
    }
    
    #public .data .swiper-button-prev {
        left: 0;
    }
    
    #public .data .swiper-button-next,
    #public .data .swiper-button-prev {
        width: 48px;
        height: 42px;
    }
    
    #public .data .swiper-button-next::after,
    #public .data .swiper-button-prev::after {
        content: '';
        width: 48px;
        height: 42px;
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
    }
    
    #public #orange-box .data .swiper-button-next::after,
    #public #orange-box .data .swiper-button-prev::after {
        background-image: url(../images/data_arrow_yellow.svg);
    }
    
    #public #blue-box .data .swiper-button-next::after,
    #public #blue-box .data .swiper-button-prev::after {
        background-image: url(../images/data_arrow_blue.svg);
    }
    
    #public #green-box .data .swiper-button-next::after,
    #public #green-box .data .swiper-button-prev::after {
        background-image: url(../images/data_arrow_green.svg);
    }
    
    #public #purple-box .data .swiper-button-next::after,
    #public #purple-box .data .swiper-button-prev::after {
        background-image: url(../images/data_arrow_purple.svg);
    }
    
    #public .data .swiper-button-next::after {
        transform: rotateZ(-180deg);
    }
    
    #public #blue-box .blue-1-box .desc {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-start;
    }
    
    #public #blue-box .swiper-wrapper,
    #public #green-box .swiper-wrapper {
        align-items: center;
    }
    
    #public #blue-box .blue-1-box {
        margin-right: -30px;
    }
    
    #public #blue-box .blue-1-box .num {
        margin-top: -6px;
    }
    
    #public #blue-box .blue-1-box .blue-text,
    #public #blue-box .blue-1-box ul {
        width: calc((100% - 270px)/2);
        padding-left: 30px;
        padding-right: 30px;
    }
    
    #public #blue-box .blue-1-box .blue-text h4 {
        font-size: 2.750rem;
    }
    
    #public #blue-box .blue-1-box .blue-text .num p {
        font-size: 1.125rem;
        font-weight: 500;
        line-height: 1.2;
        margin-bottom: 5px;
    }
    
    #public #blue-box .blue-1-box .blue-text p {
        font-size: 1.25rem;
        font-weight: 500;
        margin-bottom: 0;
    }
    
    #public #blue-box .blue-1-box ul {
        margin-bottom: 0;
    }
    
    #public #blue-box .blue-1-box ul li {
        padding-left: 1.5rem;
        font-size: 0.938rem;
        font-weight: 500;
        position: relative;
    }
    
    #public #blue-box .blue-1-box ul li::before {
        content: '';
        top: 4px;
        left: -5px;
        position: absolute;
        width: 14px;
        height: 14px;
        background-color: #000;
        border-radius: 10px;
        border: 4px solid #0055AD;
        box-shadow: 0 0 0 1px #000;
    }
    
    #public #blue-box .blue-1-box img {
        width: 270px;
        height: 270px;
    }
    /* #public #blue-box, */
    
    #public #green-box,
    #public #blue-box,
    #public #purple-box {
        display: none;
    }
    
    .data .row {
        position: relative;
    }
    
    .data .row::after {
        content: '';
        position: absolute;
        width: calc(100% + 6.25rem);
        height: 28px;
        background-color: #fcd259;
        bottom: -28px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .data .img {
        width: 255px;
        height: 255px;
    }
    
    .data .swiper-slide span {
        display: inline-block;
    }
    
    .data .swiper-slide .desc {
        text-align: center;
        width: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    #orange-box .data .swiper-slide .desc .text-wrapper {
        width: 100%;
    }
    
    .data .swiper-slide .decimals small {
        display: block;
    }
    
    .data .swiper-slide .desc .text-wrapper p:first-child,
    .data .swiper-slide.green-1-box .num p,
    .data .swiper-slide .num p {
        font-size: 3.5rem;
        font-weight: 700;
        line-height: 0.8;
        position: relative;
        font-family: 'Ropa Sans', sans-serif;
        margin-bottom: 1.5rem;
        /* margin-top: -1rem; */
    }
    
    .data .swiper-slide .num h4 {
        margin-top: -5px;
        text-align: right;
    }
    
    .data .swiper-slide .desc .text-wrapper small {
        font-size: 1.875rem;
        font-weight: 500;
        margin-left: 3px;
        position: relative;
        bottom: 0;
    }
    
    .data .swiper-slide .desc .text-wrapper small.special-1 {
        position: relative;
        bottom: 0;
    }
    
    #esg .container .row {
        padding-top: 4rem;
    }
    
    #esg .desc {
        position: relative;
        margin-bottom: 2rem;
    }
    
    #esg .bg-color {
        width: 100vw;
        height: calc(100% + 3rem);
        background-color: #ecfbff;
        top: -4rem;
        left: 0;
        position: absolute;
    }
    
    #esg .esg-img {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 1;
        top: 0;
        background: radial-gradient(circle, #FFFFFF 35%, #98DBF9 55%, #54C7F5 70%);
    }
    
    #esg h2 {
        display: block;
        margin-bottom: 2rem;
    }
    
    #esg .right {
        padding-left: 2rem;
        padding-top: 6rem;
        padding-bottom: 9rem;
    }
    
    @media (min-width: 768px) {
        #esg .col-md-7 {
            -ms-flex: 0 0 62%;
            flex: 0 0 62%;
            max-width: 62%;
        }
        #esg .offset-md-7 {
            margin-left: 62%;
        }
        #esg .col-md-5 {
            -ms-flex: 0 0 38%;
            flex: 0 0 38%;
            max-width: 38%;
        }
    }
    
    #esg .icon {
        padding-top: 2.5rem;
        padding-right: 3rem;
    }
    
    #esg .row-bottom h3 {
        font-weight: 500;
    }
    
    #esg .icon p {
        font-weight: 500;
    }
    
    #esg .icon img {
        width: 69px;
        height: 69px;
        margin-bottom: 1rem;
    }
    
    #esg .bg-color-1 {
        background-color: #31ABE5;
        transition: all 0.3s ease-in-out;
    }
    
    #esg .bg-color-1.active,
    #esg .bg-color-1:hover {
        box-shadow: -3px 9px 2px 3px rgb(49 172 229 / 40%), -9px 18px 5px 4px rgb(49 172 229 / 30%), -16px 27px 5px 5px rgb(49 172 229 / 20%);
    }
    
    #esg .bg-color-2 {
        background-color: #0E55AD;
        transition: all 0.3s ease-in-out;
    }
    
    #esg .bg-color-2.active,
    #esg .bg-color-2:hover {
        box-shadow: -3px 9px 2px 3px rgb(12 85 173 / 40%), -9px 18px 5px 4px rgb(12 85 173 / 30%), -16px 27px 5px 5px rgb(12 85 173 / 20%);
    }
    
    #esg .bg-color-1,
    #esg .bg-color-2 {
        display: flex;
        justify-content: center;
        padding: 2rem 1rem 3rem;
        height: 100%;
        cursor: pointer;
    }
    
    #esg .bottom-button .bg-color-1 .icon,
    #esg .bottom-button .bg-color-1 img {
        width: 70px;
        height: 100px;
    }
    
    #esg .bottom-button .bg-color-2 .icon,
    #esg .bottom-button .bg-color-2 img {
        width: 123px;
        height: 123px;
    }
    
    #esg .row-bottom .col-md-5 {
        padding-left: 2rem;
        padding-right: 2rem;
        margin-top: -3rem;
    }
    
    #esg .row-bottom,
    #esg .bottom-button {
        padding-top: 0!important;
    }
    
    #esg .colorbar {
        left: 120%;
        top: 9rem;
        z-index: 1;
    }
    
    #esg .bottom-box .bg-color {
        width: calc(100% + 6.25rem);
        height: 100%;
        left: 50%;
        transform: translateX(-50%);
        top: 0;
    }
    
    #esg .bottom-box #box-1 .bg-color {
        background-color: #F0F5FA;
        border-top: 3px solid #31ABE5;
    }
    
    #esg .bottom-box #box-2 .bg-color {
        background-color: #F0F5FA;
        border-top: 3px solid #0E55AD;
    }
    
    #esg .bottom-box {
        min-height: 600px;
        background: #fff;
    }
    
    #esg .bottom-box .box {
        width: 100%;
        padding-top: 2rem;
        padding-bottom: 2rem;
        position: relative;
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        transition: opacity 0.3s ease-in-out;
    }
    
    #esg .bottom-box .box.active {
        opacity: 1;
        z-index: 1;
    }
    
    #esg .img-bg {
        width: 100vw;
        height: calc(100% + 2rem);
        background-color: #54C7F5;
        top: 0;
        right: 15px;
        position: absolute;
        min-height: 750px;
    }
    
    #esg .left .img-wrapper {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        width: 100%;
        height: 100%;
        position: relative;
        min-height: 750px;
    }
    
    #esg .left .img-wrapper svg {
        margin-bottom: 1rem!important;
    }
    
    #esg .bottom-box .num {
        display: flex;
        align-items: flex-end;
        position: relative;
        font-family: 'Ropa Sans', sans-serif;
        margin-bottom: 2rem;
    }
    
    #esg .bottom-box .num h4 {
        font-size: 3.5rem;
        font-weight: 700;
        line-height: 0.8;
        margin-bottom: 0;
    }
    
    #esg .bottom-box .num p {
        font-size: 2.5rem;
        font-weight: 700;
        line-height: 0.8;
        margin-bottom: 0;
    }
    
    #esg #box-1 .box-1,
    #esg #box-1 .box-2,
    #esg #box-1 .box-3 {
        padding-left: 5%;
        padding-right: 5%;
    }
    
    #esg #box-1 .box-1::before,
    #esg #box-1 .box-2::before,
    #esg #box-2 .box-2::before {
        content: '';
        position: absolute;
        width: 44px;
        height: 28px;
        background-image: url(../images/equal.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        top: 50%;
        transform: translateY(-50%);
    }
    
    #esg #box-1 .box-1::before {
        right: -22px;
    }
    
    #esg #box-1 .box-2::before {
        right: -22px;
    }
    
    #esg #box-2 .box-2::before {
        left: -18px;
        width: 36px;
        height: 51px;
        background-image: url(../images/arrow-right.svg);
    }
    
    #esg .bottom-box .esg-icon {
        width: 80%;
        max-width: 250px;
        height: auto;
        margin: 0 auto;
    }
    
    #esg #box-2 .box-2 .text-wrapper {
        max-width: 250px;
        margin: 0 auto;
    }
    
    #report {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
    
    @media (min-width: 768px) {
        #report .col-lg-7 {
            -ms-flex: 0 0 62%;
            flex: 0 0 62%;
            max-width: 62%;
        }
        #report .col-md-5 {
            -ms-flex: 0 0 38%;
            flex: 0 0 38%;
            max-width: 38%;
        }
    }
    
    #report .left {
        padding-right: 2rem;
        padding-top: 10rem;
        padding-bottom: 10rem;
        z-index: 1;
    }
    
    #report .left h3 {
        font-size: 1.5rem;
    }
    
    #report .left .desc {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    
    #report .right {
        margin-top: 6rem;
        min-height: 720px;
    }
    
    #report .bg-color {
        width: 100vw;
        height: calc(100% + 2rem);
        background-color: #F2F8EB;
        top: -6rem;
        right: 15px;
        position: absolute;
    }
    
    #report .bg-color::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 100%;
        width: 75px;
        height: 75px;
        background-image: url(../images/report_elements.svg);
        background-position: center center;
        background-repeat: no-repeat;
    }
    
    #report .more p {
        background-color: #F2F8EB;
    }
    
    #report .img-bg {
        width: 100vw;
        height: 100%;
        height: calc(100% + 2rem);
        background-color: #7DB72E;
        top: 0;
        left: 15px;
        position: absolute;
        min-height: 750px;
    }
    
    #report .right .report-img {
        max-width: 692px;
        max-height: 628px;
        width: 100%;
        height: 100%;
        position: relative;
    }
    
    #report .right .img-wrapper {
        background: radial-gradient(circle, rgba(255, 255, 255, 1) 2%, rgba(203, 224, 168, 1) 35%, rgba(175, 207, 119, 1) 40%, rgba(164, 201, 101, 1) 50%, rgba(147, 193, 77, 1) 55%, rgba(131, 185, 54, 1) 60%, #7DB72E 72%);
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        width: 100%;
        height: 100%;
        position: relative;
    }
    
    #report .left .img-wrapper {
        background: radial-gradient(circle, rgba(255, 255, 255, 1) 2%, rgba(203, 224, 168, 1) 35%, rgba(175, 207, 119, 1) 40%, rgba(164, 201, 101, 1) 50%, rgba(147, 193, 77, 1) 55%, rgba(131, 185, 54, 1) 60%, #7DB72E 72%);
        position: relative;
        padding: 2rem;
        margin-bottom: 2rem;
    }
    
    #future {
        padding-top: 10rem;
        position: relative;
    }
    
    #future::before {
        content: '';
        background-color: #155098;
        position: absolute;
        top: 10rem;
        left: 0;
        width: 100%;
        height: calc(100% - 10rem);
    }
    
    #future h2 {
        font-size: 2.813em;
        margin-bottom: 0;
    }
    
    #future h2 span {
        display: inline-block;
    }
    
    #future .left {
        padding-top: 2rem;
        padding-left: 30px;
        padding-bottom: 16.5rem;
        z-index: 1;
        /* overflow: hidden; */
    }
    
    #future .white-box {
        position: relative;
        margin-top: 2rem;
        padding: 2rem 2rem 2rem 0;
    }
    
    #future .white-box::before {
        content: '';
        position: absolute;
        top: 0;
        left: -2.5rem;
        width: calc(100% + 3rem);
        height: calc(100% + 2rem);
        background-color: #E2EAF5;
    }
    
    #future .white-box::after {
        content: '';
        position: absolute;
        bottom: 92%;
        right: 104%;
        width: 103px;
        height: 77px;
        background-image: url(../images/menmber_bg_element_1.svg);
        background-position: center center;
        background-repeat: no-repeat;
    }
    
    #future .white-box p {
        position: relative;
        font-size: 1.125rem;
    }
    
    #future .right .line_img {
        position: absolute;
        width: 100%;
        max-width: 616px;
        max-height: 321px;
        height: auto;
        top: -15%;
        left: 30%;
    }
    
    #future .future_img {
        position: relative;
        width: 130%;
        height: auto;
        margin-left: -15%;
    }
    
    #future .left .line_img {
        position: absolute;
        width: 100%;
        max-width: 565px;
        max-height: 349px;
        height: auto;
        bottom: 0;
        left: -0.6rem;
    }
    
    #slogan {
        padding-top: 4rem;
        padding-bottom: 5rem;
    }
    
    #slogan .more p {
        width: 135px;
        margin-bottom: -4px;
        background-color: #fff;
    }
    
    #slogan .more p::before {
        bottom: 0;
        height: 56%;
    }
    
    #slogan .more:hover {
        text-decoration: none;
    }
    
    #slogan .more {
        width: 230px;
        height: 88px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    #slogan .more::before {
        width: 100vw;
        right: 0;
        left: auto;
    }
    
    #slogan .download_btn {
        width: 88px;
        height: 88px;
        position: absolute;
        right: -80px;
        top: 0;
    }
    
    #slogan .colorbar {
        left: 100%;
        bottom: 20%;
        z-index: 1;
    }
    
    #slogan img {
        max-width: 100%;
        height: auto;
    }
    
    footer {
        font-size: 0.875rem;
    }
    
    footer .footer-list {
        border-bottom: 3px solid #fff;
    }
    
    footer .footer-list ul a {
        color: #fff;
    }
    
    footer .footer-list ul {
        display: flex;
        justify-content: center;
        margin-bottom: 0;
        padding: 1rem 0;
        flex-wrap: wrap;
    }
    
    footer .footer-list ul li {
        padding: 0.5rem 1rem;
    }
    
    footer .footer-bottom {
        padding: 1.5rem 1rem;
    }
    
    footer .footer-bottom p {
        margin-bottom: 0;
        white-space: nowrap;
    }
    
    footer .logo_footer {
        max-width: 120px;
        width: auto;
        height: auto;
    }
    
    @media all and (-ms-high-contrast: none),
    (-ms-high-contrast: active) {
        #swiper .box-container .image .sc_cover svg {
            width: 100%!important;
            height: auto!important;
            min-height: 700px;
        }
        #banner .bg-image svg {
            min-height: 800px;
        }
        #esg .bg-color-1 svg,
        #esg .bg-color-2 svg {
            width: 123px!important;
            height: 123px!important;
        }
        #green-box .green-2-box #green_info2 svg {
            width: 398px!important;
            height: 382px!important;
        }
    }
    
    @media all and (-ms-high-contrast: none) and (max-width:991px),
    (-ms-high-contrast: active) and (max-width:991px) {
        #esg .bg-color-1 svg,
        #esg .bg-color-2 svg {
            width: 76px!important;
            height: 76px!important;
        }
        #esg .esg-img svg,
        #report .left .img-wrapper svg {
            min-height: 70vw!important;
        }
    }
    
    @media all and (-ms-high-contrast: none) and (max-width:767px),
    (-ms-high-contrast: active) and (max-width:767px) {
        #slogan .more {
            width: 250px;
        }
        #banner .bg-image svg,
        #swiper .box-container .image .sc_cover svg {
            min-height: 500px;
        }
    }