@charset "utf-8";
/*
 * Table of contents
 * ------------------------------------------------------
 * 01) Hero
 * 02) Common
 * 03) About
 * 04) Business
 * 05) Core Value
 * 06) Products
 * 07) News
 * 08) Media queries
 */

 main{background-color: #f9fafb;}

 .m-title-1 {font-size:var(--font-size-lg-1);font-weight:var(--font-weight-semibold);letter-spacing: var(--letter-spacing-lg);line-height: var(--line-height-lg);text-align: center;margin-bottom:35px;}
 .m-text-1 {font-size:var(--font-size-sm-2);font-weight:var(--font-weight-normal);letter-spacing: var(--letter-spacing-sm);line-height: var(--line-height-sm);text-align: center;}
 
.root{--black:#333d4b;}
.root{--darkpurple: #2b58a7;}

.en-spaced {
    letter-spacing: -0.0185em !important; /* 영문에만 적용하고 싶은 자간 값 */
}

/* *********************************************
 * Hero
 ******************************************** */
.hero {height: 100vh}
.hero .hero-swiper, .hero .swiper-wrapper, .hero .swiper-slide {height: 100%}
.hero .swiper-slide {position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden}
.hero .swiper-slide::before {content: ''; position: absolute; display: block; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0,0,0,.24); z-index: 5}
.hero .swiper-slide .hero-video {position: absolute; display: block; top: 0; left: 0; width: 100% !important; height: 100% !important; object-fit: cover; pointer-events: none; z-index: 1}
.hero .swiper-slide .hero-caption {position: relative; display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; z-index: 10}
.hero .swiper-slide .hero-caption .caption-inner {width: 100%}
.hero .swiper-slide .hero-caption h2 {font-size: 60px; font-weight: 680; color: #f5f5f7; letter-spacing: -0.02em; line-height: 1.33;}
.hero .swiper-slide .hero-caption p {font-size: 28px; font-weight: 500; color: #f5f5f7; letter-spacing: -0.02em; line-height: 1.54; margin-top: 6px;}
.hero .count-indicator {position: absolute; top: 30%; left: 0; right: 0; font-size: 0; z-index: 10}
.hero .count-indicator strong, .hero .count-indicator span {display: inline-block; font-size: 18px; font-weight: 900; color: #f5f5f7}
.hero .count-indicator span {opacity: .3}
.hero .count-indicator span::before {content: '/'; display: inline-block; margin: 0 16px; transform: rotate(15deg)}
.hero .custom-elements-group {position: absolute; bottom: 30%; left: 0; right: 0; font-size: 0; z-index: 10}
.hero .custom-elements-group .swiper-pagination {position: static; display: inline-block; text-align: left; width: auto; vertical-align: middle}
.hero .custom-elements-group .swiper-pagination-bullet {position: relative; width: 32px; height: 32px; margin: 0; background-color: transparent; opacity: 1}
.hero .custom-elements-group .swiper-pagination-bullet::before, .hero .custom-elements-group .swiper-pagination-bullet::after {content: ''; position: absolute; display: block; top: 50%; left: 50%; border-radius: 50%; transform: translate(-50%, -50%)}
.hero .custom-elements-group .swiper-pagination-bullet::before {width: 6px; height: 6px; background-color: rgba(255,255,255,.52); transition: background-color .2s}
.hero .custom-elements-group .swiper-pagination-bullet::after {width: 24px; height: 24px; border: 1px solid #f5f5f7; opacity: 0; transition: opacity .2s}
.hero .custom-elements-group .swiper-pagination-bullet-active::before {background-color: #f5f5f7}
.hero .custom-elements-group .swiper-pagination-bullet-active::after {opacity: 1}
.hero .custom-elements-group .swiper-toggle-controller {width: 32px; height: 32px; margin-left: 8px; padding: 0; font-size: 20px; color: #f5f5f7; border: 0; background-color: transparent; outline: 0}

/* *********************************************
 * Common
 ******************************************** */
.section .section-heading {text-align: center}
.section .section-about {background-color: #f9fafb;}
.section .section-heading h4 {font-size: 22px; font-weight: 620; color: #2b58a7; line-height: 1.1; letter-spacing: -0.015em; margin-bottom: 1rem;}
.section .section-heading h2 {font-size: 45px; font-weight: 680; color: #333d4b; letter-spacing: -0.015em; line-height: 1.33}
.section .col-controller {font-size: 0}
.section .col-controller button {position: relative; display: inline-block; font-size: 32px; color: #8b95a1; line-height: 1; padding: 0 10px; border: 0; background-color: transparent; outline: 0; transition: color .3s}
.section .col-controller button + button::before {content: ''; position: absolute; top: 50%; left: -6px; display: block; width: 2px; height: 16px; margin: 0 6px; background-color: #e5e5e5; transform: translateY(-50%)}
.section .col-controller button:hover {color: #333d4b}
.section .col-controller button.swiper-button-disabled, .section .col-controller button:disabled {color: #dee2e6; cursor: not-allowed}
.section .col-controller .button-more-view {display: inline-flex; width: 48px; height: 48px; margin-left: 10px; font-size: 28px; color: #999; border: 2px solid #dee2e6; border-radius: 50%; align-items: center; justify-content: center; vertical-align: middle; transition: color .3s, border-color .3s, box-shadow .3s}
.section .col-controller .button-more-view:hover {color: #666; border-color: #666; box-shadow: 2px 2px 4px rgba(0,0,0,.08)}

/* *********************************************s
 * About
 ******************************************** */
.about {padding: 60px 20px}
.about .about-cover {display: flex; border-radius: 2rem; max-width: 1840px; height: 550px; margin: auto; background-image: url(../images/main/about_cover.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; align-items: center}
.about .about-cover .col-typo h4 {font-size: 18px; font-weight: 500; color: #f5f5f7; line-height: 1.1; margin-bottom: 14px}
.about .about-cover .col-typo p {font-size: 1.95rem; font-weight: 660; color: #f5f5f7; letter-spacing: -0.01em; line-height: 1.44}
.about .about-cover .col-typo .button-more-arrow {margin-top: 64px}
.about .about-cover .col-link-items {display: flex; font-size: 0; transform: translateY(50px)}
.about .about-cover .col-link-items .link-item {display: inline-flex; width: 33.3334%; padding: 30px; background-color: #f8f9fa}
.about .about-cover .col-link-items .link-item .link-inner {width: 100%}
.about .about-cover .col-link-items .link-item .icon-img {display: flex; height: 56px; font-size: 42px; color: #333d4b; margin-bottom: 16px; align-items: center}
.about .about-cover .col-link-items .link-item .icon-img i {opacity: .3}
.about .about-cover .col-link-items .link-item .en-text {display: block; font-size: 12px; font-weight: 500; text-align: left; color: #333d4b; letter-spacing: 0em; opacity: .3}
.about .about-cover .col-link-items .link-item h4 {display: flex; font-size: 20px; font-weight: 600; color: #333d4b; letter-spacing: -0.02em; margin-top: 4px; align-items: center; justify-content: space-between}
.about .about-cover .col-link-items .link-item h4 .icon {position: relative; display: inline-flex; width: 24px; height: 24px; font-size: 18px; color: #f5f5f7; align-items: center; justify-content: center; transition: transform .3s ease-in-out; z-index: 5}
.about .about-cover .col-link-items .link-item h4 .icon::before {content: ''; position: absolute; display: block; top: 0; left: 0; bottom: 0; right: 0; border-radius: 50%; transform: translateX(8px); transition: transform .3s ease-in-out; z-index: -1}
.about .about-cover .col-link-items .link-item:nth-child(1) {background-color: #2b58a7;}
.about .about-cover .col-link-items .link-item:nth-child(1) h4 .icon {color: #2b58a7;}
.about .about-cover .col-link-items .link-item:nth-child(1) h4 .icon::before {background-color: #f5f5f7}
.about .about-cover .col-link-items .link-item:nth-child(2) {background-color: #f1f3f5}
.about .about-cover .col-link-items .link-item:nth-child(2) h4 .icon::before {background-color: #555}
.about .about-cover .col-link-items .link-item:nth-child(3) {background-color: #333d4b}
.about .about-cover .col-link-items .link-item:nth-child(3) h4 .icon {color: #333d4b}
.about .about-cover .col-link-items .link-item:nth-child(3) h4 .icon::before {background-color: #f5f5f7}
.about .about-cover .col-link-items .link-item:hover h4 .icon::before {transform: translateX(0)}



.about {padding: 60px 20px}
.about .about-cover2 {display: flex; border-radius: 2rem; max-width: 1840px; height: 400px; margin: auto; background-image: url(../images/main/arm.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; align-items: center}
.about .about-cover2 .col-typo h4 {font-size: 18px; font-weight: 500; color: #f5f5f7; line-height: 1.1; margin-bottom: 14px}
.about .about-cover2 .col-typo p {font-size: 2rem; font-weight: 660; color: #f5f5f7; letter-spacing: -0.015em; line-height: 1.38}
.about .about-cover2 .col-typo .button-more-arrow {margin-top: 64px}
.about .about-cover2 .col-link-items {display: flex; font-size: 0; transform: translateY(50px)}
.about .about-cover2 .col-link-items .link-item {display: inline-flex; width: 33.3334%; padding: 30px; background-color: #f8f9fa}
.about .about-cover2 .col-link-items .link-item .link-inner {width: 100%}
.about .about-cover2 .col-link-items .link-item .icon-img {display: flex; height: 56px; font-size: 42px; color: #333d4b; margin-bottom: 16px; align-items: center}
.about .about-cover2 .col-link-items .link-item .icon-img i {opacity: .3}
.about .about-cover2 .col-link-items .link-item .en-text {display: block; font-size: 12px; font-weight: 500; text-align: left; color: #333d4b; letter-spacing: 0em; opacity: .3}
.about .about-cover2 .col-link-items .link-item h4 {display: flex; font-size: 20px; font-weight: 600; color: #333d4b; letter-spacing: -0.02em; margin-top: 4px; align-items: center; justify-content: space-between}
.about .about-cover2 .col-link-items .link-item h4 .icon {position: relative; display: inline-flex; width: 24px; height: 24px; font-size: 18px; color: #f5f5f7; align-items: center; justify-content: center; transition: transform .3s ease-in-out; z-index: 5}
.about .about-cover2 .col-link-items .link-item h4 .icon::before {content: ''; position: absolute; display: block; top: 0; left: 0; bottom: 0; right: 0; border-radius: 50%; transform: translateX(8px); transition: transform .3s ease-in-out; z-index: -1}
.about .about-cover2 .col-link-items .link-item:nth-child(1) {background-color: #2b58a7;}
.about .about-cover2 .col-link-items .link-item:nth-child(1) h4 .icon {color: #2b58a7;}
.about .about-cover2 .col-link-items .link-item:nth-child(1) h4 .icon::before {background-color: #f5f5f7}
.about .about-cover2 .col-link-items .link-item:nth-child(2) {background-color: #f1f3f5}
.about .about-cover2 .col-link-items .link-item:nth-child(2) h4 .icon::before {background-color: #555}
.about .about-cover2 .col-link-items .link-item:nth-child(3) {background-color: #333d4b}
.about .about-cover2 .col-link-items .link-item:nth-child(3) h4 .icon {color: #333d4b}
.about .about-cover2 .col-link-items .link-item:nth-child(3) h4 .icon::before {background-color: #f5f5f7}
.about .about-cover2 .col-link-items .link-item:hover h4 .icon::before {transform: translateX(0)}

/* *********************************************
 * Business
 ******************************************** */

.business {padding: 120px 0}
.business .section-heading {margin-bottom: 70px}
.business .business-wrapper {max-width: 1840px; margin: auto}
.business .col-business a {display: block}
.business .col-business a figure {position: relative; margin-bottom: 0; overflow: hidden; z-index: 5}
.business .col-business a figure::before {content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0,0,0,.45); z-index: 2; transition: opacity .3s;}
.business .col-business a figure img {display: block; width: 100%; -webkit-filter: grayscale(100%); filter: grayscale(100%);}
.business .col-business a figure figcaption {position: absolute; bottom: 0; left: 0; right: 0; padding: 60px; transform: translateY(calc(100% - 180px)); transition: transform .3s; z-index: 3}
.business .col-business a figure figcaption .category {display: block; font-size: 16px; font-weight: 500; color: #f5f5f7; margin-bottom: 6px}
.business .col-business a figure figcaption h4 {font-size: 28px; font-weight: 600; color: #f5f5f7; letter-spacing: -0.015em; line-height: 1.1}
.business .col-business a figure figcaption p {font-size: 18px; color: rgba(255,255,255,.7); letter-spacing: -0.015em; line-height: 1.48; margin-top: 10px; opacity: 0; transition: opacity .3s}
.business .col-business a:hover figure::before {opacity: .3;}
.business .col-business a:hover figure img {-webkit-filter: none; filter: none;}
.business .col-business a:hover figure figcaption {transform: none}
.business .col-business a:hover figure figcaption p {opacity: 1}
.business .col-business a:hover figure figcaption .category {color: #d45bdc}


/* *********************************************
 * Business2
 ******************************************** */

 .business2 {padding: 120px 0}
 .business2 .section-heading {margin-bottom: 70px}
 .business2 .business-wrapper {max-width: 1840px; margin: auto}
 .business2 .col-business2 a {display: block}
 .business2 .col-business2 a figure {position: relative; margin-bottom: 0; overflow: hidden; z-index: 5}
 .business2 .col-business2 a figure::before {content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0,0,0,.45); z-index: 2; transition: opacity .3s;}
 .business2 .col-business2 a figure img {display: block; width: 100%; -webkit-filter: grayscale(100%); filter: grayscale(100%);}
 .business2 .col-business2 a figure figcaption {position: absolute; bottom: 0; left: 0; right: 0; padding: 60px; transform: translateY(calc(100% - 180px)); transition: transform .3s; z-index: 3}
 .business2 .col-business2 a figure figcaption .category {display: block; font-size: 16px; font-weight: 500; color: #f5f5f7; margin-bottom: 6px}
 .business2 .col-business2 a figure figcaption h4 {font-size: 28px; font-weight: 600; color: #f5f5f7; letter-spacing: -0.015em; line-height: 1.1}
 .business2 .col-business2 a figure figcaption p {font-size: 18px; color: rgba(255,255,255,.7); letter-spacing: -0.015em; line-height: 1.48; margin-top: 10px; opacity: 0; transition: opacity .3s}
 .business2 .col-business2 a:hover figure::before {opacity: .3;}
 .business2 .col-business2 a:hover figure img {-webkit-filter: none; filter: none;}
 .business2 .col-business2 a:hover figure figcaption {transform: none}
 .business2 .col-business2 a:hover figure figcaption p {opacity: 1}
 .business2 .col-business2 a:hover figure figcaption .category {color: #d45bdc}



/* *********************************************
 * Core value
 ******************************************** */
.core-value {padding-top: 120px; padding-bottom: 120px; background-color:var(--gray-dark);}
.core-value .col-heading {position: relative; margin-bottom: 70px; z-index: 5; line-height: 1.44;}
.core-value .col-heading::before {content: ''; position: absolute; top: 24%; left: -100px; font-size: 110px; font-weight: 800; color: #000; line-height: 1; width: 170%; opacity: .04; z-index: -1}
.core-value .col-visual-items {position: relative; z-index: 5}
.core-value .col-visual-items .col-img figure {margin-bottom: 0}
.core-value .col-visual-items .col-img figure img {display: block; width: 100%; border-top-left-radius: 1rem; border-top-right-radius: 1rem;}
.core-value .col-visual-items .col-img figure figcaption {position: relative; margin: -40px 0 0 0; padding: 32px 22px; background-color: #f5f5f7; z-index: 10; border-bottom-right-radius:1rem; border-bottom-left-radius: 1rem;}
.core-value .col-visual-items .col-img figure figcaption .en-heading {display: block; font-size: 14px; font-weight: 500; color: #2b58a7; line-height: 1.3; margin-bottom: 10px}
.core-value .col-visual-items .col-img figure figcaption h4 {font-size: 22px; font-weight: 600; color: #333d4b; letter-spacing: -0.015em; line-height: 1.44}
.core-value .col-visual-items .col-img:nth-child(2) {margin-top: 56px}
.core-value .col-visual-items .col-img:nth-child(4) {margin-top: 56px}
.core-value .col-visual-items figcaption h4 {font-size: 29px; letter-spacing: -0.01em; line-height: 1.1}


/* *********************************************
 * Products & newsroom
 ******************************************** */
.products {padding: 120px 0; background-color: #f9fafb}
.products.newsroom {background-color:#f9fafb}
.products .row-heading {margin-bottom: 70px}
.products .col-controller {font-size: 0}
.products .products-swiper {padding-bottom: 10px}
.products .products-swiper .swiper-slide {height: auto}
.products .products-swiper .swiper-slide a {display: block; height: 100%; background-color: #f9fafb; border-radius: 1rem;}
.products .products-swiper .swiper-slide a figure {margin-bottom: 0;}
.products .products-swiper .swiper-slide a figure img {display: block; width: 100%; border-top-left-radius: 1rem; border-top-right-radius: 1rem;}
.products .products-swiper .swiper-slide .info {padding: 28px; border-bottom-right-radius:1rem; border-bottom-left-radius: 1rem;}
.products .products-swiper .swiper-slide .info .category {display: block; font-size: 14px; font-weight: 500; color: #8b95a1; margin-bottom: 7px}
.products .products-swiper .swiper-slide .info h5 {font-size: 25px; font-weight: 600; color: #333d4b; letter-spacing: -0.015em; line-height: 1.4}
.products .products-swiper .swiper-scrollbar {left: 0; width: 100%; height: 3px; border-radius: 0}
.products .products-swiper .swiper-scrollbar-drag {border-radius: 0; background-color: rgba(0,0,0,.7)}


/* *********************************************
 * Products & newsroom
 ******************************************** */
.newsroom {padding: 120px 0; background-color: #f5f5f7}
.newsroom .row-heading {margin-bottom: 70px}
.newsroom .col-controller {font-size: 0}
.newsroom .newsroom-swiper {padding-bottom: 10px}
.newsroom .newsroom-swiper .swiper-slide {height: auto}
.newsroom .newsroom-swiper .swiper-slide a {display: block; height: 100%; background-color: white; border-radius: 2rem;}
.newsroom .newsroom-swiper .swiper-slide a figure {margin-bottom: 0; overflow: hidden; border-top-left-radius: 2rem; border-top-right-radius: 2rem;}
.newsroom .newsroom-swiper .swiper-slide a figure img {display: block; width: 100%; height:auto; max-width: 100%; transition: transform .5s;}
.newsroom .newsroom-swiper .swiper-slide a:hover figure img {transform: scale(1.1)}
.newsroom .newsroom-swiper .swiper-slide .info {padding: 1.8rem; border-bottom-right-radius:1rem; border-bottom-left-radius: 1rem;}
.newsroom .newsroom-swiper .swiper-slide .info .category {display: block; font-size: 15px; font-weight: 500; color: #8b95a1; margin-bottom: 6px}
.newsroom .newsroom-swiper .swiper-slide .info h5 {font-size: 24px; font-weight: 660; color: #333d4b; letter-spacing: -0.015em; line-height: 1.4}
.newsroom .newsroom-swiper .swiper-scrollbar {left: 0; width: 100%; height: 3px; border-radius: 0}
.newsroom .newsroom-swiper .swiper-scrollbar-drag {border-radius: 0; background-color: rgba(0,0,0,.7)}



/* *********************************************
 * News
 ******************************************** */
.news {padding: 36px 0; border-top: 1px solid #e9e9e9}
.news .row-news .col-title h3 {font-size: 24px; font-weight: 700; color: #333d4b; letter-spacing: -0.015em}
.news .row-news .col-news-item {max-width: calc(100% - 312px)}
.news .row-news .col-news-item .news-swiper .swiper-slide {font-size: 0}
.news .row-news .col-news-item .news-swiper .swiper-slide a, .news .row-news .col-news-item .news-swiper .swiper-slide .date {display: inline-block; vertical-align: middle}
.news .row-news .col-news-item .news-swiper .swiper-slide a {max-width: calc(100% - 100px); font-size: 17px; color: #555; letter-spacing: -0.015em; text-overflow: ellipsis; white-space: nowrap; overflow: hidden}
.news .row-news .col-news-item .news-swiper .swiper-slide .date {font-size: 15px; color: #999; width: 90px; margin-left: 10px}


/* *********************************************
 * Blog
 ******************************************** */

.blog .blog-swiper {overflow-x: hidden;overflow-y: visible;}
.blog .blog-swiper .swiper-wrapper {padding: 0;}
.blog .b-navi-next {cursor: pointer;font-size: var(--font-size-sm-2);font-weight: var(--font-weight-medium);letter-spacing: var(--letter-spacing-sm);}
.blog .b-navi-prev {cursor: pointer;font-size: var(--font-size-sm-2);font-weight: var(--font-weight-medium);letter-spacing: var(--letter-spacing-sm);}
.blog .b-navi-disabled {opacity: 0.4;}
.blog .b-progress {width: 100%; max-width:70px; height:2px;position: relative;margin: 0 12px;}
.blog .b-progress .swiper-pagination {height: 2px;background-color: var(--gray-100);}
.blog .b-progress .swiper-pagination .swiper-pagination-progressbar-fill {background-color: var(--blueblack);}
.blog .b-item {box-sizing: border-box !important;border: 1px solid var(--gray-100);}
.blog .b-item .b-img-wrap {display: block;overflow: hidden;position: relative;}
.blog .b-item .b-img-wrap::after {content: "";display: block;padding-bottom: 70.55%;}
.blog .b-item .b-img-wrap img {transition: transform var(--expoOut) 1.6s;position: absolute;width: 100%;height: 100%;object-fit: cover;}
.blog .b-item .b-img-wrap .cate {position: absolute;bottom: 0px;right: 0;padding: 5px 11px;background: var(--blueblack);color: var(--white-100);font-size: var(--font-size-xs-1);}
.blog .b-item .b-text-wrap {padding: 40px 30px;}
.blog .b-item .b-text-wrap .b-title {font-size: var(--font-size-sm-3);font-weight: var(--font-weight-semibold);letter-spacing: var(--letter-spacing-sm);margin-bottom:30px;}
.blog .b-item .b-text-wrap .b-text {font-size: var(--font-size-xs-2);font-weight: var(--font-weight-normal);letter-spacing: var(--letter-spacing-xs);line-height: var(--line-height-xs);margin-bottom: 35px;height: 79px;}
.blog .b-item .b-text-wrap .date {position: absolute;bottom: 40px;right: 30px;font-size: var(--font-size-xs-1);color: var(--gray-300);opacity: 0.8;}
.blog .b-item .b-text-wrap .more {font-size: var(--font-size-xs-2);font-weight: var(--font-weight-normal);letter-spacing: var(--letter-spacing-xs);}
.blog .b-item .b-text-wrap .more::after {content: '\F144';font-family: bootstrap-icons !important;opacity: 0.0001;transform: scale(0.2) translate(10px, 10px);font-size: 12px;display: inline-block;transition: all var(--expoOut) 0.6s;}

/* *********************************************
 * Partner
 ******************************************** */

.partner {padding: 140px 0; background-color: #f7f7f7}
.partner .row-heading {margin-bottom: 60px}
.partner .col-controller {font-size: 0}
.partner .partner-swiper {padding-bottom: 60px}
.partner .partner-swiper .swiper-slide {height: auto}
.partner .partner-swiper .swiper-slide a {display: block; height: 100%; background-color: #f5f5f7}
.partner .partner-swiper .swiper-slide a figure {margin-bottom: 0}
.partner .partner-swiper .swiper-slide a figure img {display: block; width: 100%}
.partner .partner-swiper .swiper-slide .info {padding: 28px}
.partner .partner-swiper .swiper-slide .info .category {display: block; font-size: 14px; font-weight: 700; color: #2b58a7; margin-bottom: 4px}
.partner .partner-swiper .swiper-slide .info h5 {font-size: 19px; font-weight: 600; color: #333d4b; letter-spacing: -0.015em; line-height: 1.48}
.partner .partner-swiper .swiper-scrollbar {left: 0; width: 100%; height: 3px; border-radius: 0}
.partner .partner-swiper .swiper-scrollbar-drag {border-radius: 0; background-color: rgba(0,0,0,.7)}
.partner-w ul {display: flex; width: 100%; flex-wrap: wrap; justify-content: space-between;}
.partner-w ul li {width: 23.5%; text-align: center; padding-top: 40px;}
.partner-w ul li:nth-child(-n+4) {padding-top: 0;}
.partner-w ul li .img img {width: 100%; border: 1px solid #DDDDDD; margin-bottom: 10px;}
.partner-w ul li p {color: #000; font-size: 18px;}

/* *********************************************
 * Prodcts
 ******************************************** */



/* *********************************************
 * Button Wrapper
 ******************************************** */

#btnwrapper{
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    margin: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 100;
    --aap-accent-color: #2b58a7;
    --aap-background-color: transparent;
    --aap-icon-color: #1d1d1f;
    --aap-icon-color-alt: rgb(245,245,247);
    --aap-active-fill-color: white;
    --aap-inactive-fill-color: white;
    --aap-button-hover: rgb(0, 0, 0);
    --aap-button-active: white;
    animation: fadeout0 0.8s;
    -moz-animation: fadeout0 0.8s; /* Firefox */
    -webkit-animation: fadeout0 0.8s; /* Safari and Chrome */
    -o-animation: fadeout0 0.8s; /* Opera */
    opacity: 0;
}
#btnwrapper div#all-access-pass div#all-access-pass__background button#glow-on-hover{
    animation: fadeout 0.8s;
    -moz-animation: fadeout 0.8s; /* Firefox */
    -webkit-animation: fadeout 0.8s; /* Safari and Chrome */
    -o-animation: fadeout 0.8s; /* Opera */
    opacity: 0;
}
#btnwrapper div#all-access-pass div#all-access-pass__background button#glow-on-hover span#aap-base__text{
    animation: fadeout 0.8s;
    -moz-animation: fadeout 0.8s; /* Firefox */
    -webkit-animation: fadeout 0.8s; /* Safari and Chrome */
    -o-animation: fadeout 0.8s; /* Opera */
    opacity: 1;
}
@keyframes fadeout {
    from {
        opacity: 1;
        width: 100%;
        font-size: 100%;
    }
    to {
        opacity: 0;
        width: 0%;
        font-size: 0%;
    }
}
@-moz-keyframes fadeout { /* Firefox */
    from {
        opacity: 1;
        width: 100%;
        font-size: 100%;
    }
    to {
        opacity: 0;
        width: 0%;
        font-size: 0%;
    }
}
@-webkit-keyframes fadeout { /* Safari and Chrome */
    from {
        opacity: 1;
        width: 100%;
        font-size: 100%;
    }
    to {
        opacity: 0;
        width: 0%;
        font-size: 0%;
    }
}
@-o-keyframes fadeout { /* Opera */
    from {
        opacity: 1;
        width: 100%;
        font-size: 100%;
    }
    to {
        opacity: 0;
        width: 0%;
        font-size: 0%;
    }
}
@keyframes fadeout0 {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@-moz-keyframes fadeout0 { /* Firefox */
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@-webkit-keyframes fadeout0 { /* Safari and Chrome */
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@-o-keyframes fadeout0 { /* Opera */
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
#btnwrapper.--show{
    animation: fadein0 0.8s;
    -moz-animation: fadein0 0.8s; /* Firefox */
    -webkit-animation: fadein0 0.8s; /* Safari and Chrome */
    -o-animation: fadein0 0.8s; /* Opera */
    opacity: 1;
}
#btnwrapper.--show div#all-access-pass div#all-access-pass__background button#glow-on-hover{
    animation: fadein 0.8s;
    -moz-animation: fadein 0.8s; /* Firefox */
    -webkit-animation: fadein 0.8s; /* Safari and Chrome */
    -o-animation: fadein 0.8s; /* Opera */
    opacity: 1;
}
#btnwrapper.--show div#all-access-pass div#all-access-pass__background button#glow-on-hover span#aap-base__text{
    animation: fadein 0.8s;
    -moz-animation: fadein 0.8s; /* Firefox */
    -webkit-animation: fadein 0.8s; /* Safari and Chrome */
    -o-animation: fadein 0.8s; /* Opera */
    opacity: 1;
}
@keyframes fadein {
    from {
        opacity: 0;
        width: 0%;
        font-size: 0%;
    }
    to {
        opacity: 1;
        width: 100%;
        font-size: 100%;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity: 0;
        width: 0%;
        font-size: 0%;
    }
    to {
        opacity: 1;
        width: 100%;
        font-size: 100%;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity: 0;
        width: 0%;
        font-size: 0%;
    }
    to {
        opacity: 1;
        width: 100%;
        font-size: 100%;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity: 0;
        width: 0%;
        font-size: 0%;
    }
    to {
        opacity: 1;
        width: 100%;
        font-size: 100%;
    }
}
@keyframes fadein0 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-moz-keyframes fadein0 { /* Firefox */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-webkit-keyframes fadein0 { /* Safari and Chrome */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-o-keyframes fadein0 { /* Opera */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
#all-access-pass{
    --aap-min-height: 56px;
    --aap-blur: 7px;
    --aap-font-size: 17px;
    --aap-font-weight: 600;
    --aap-mobile-font-size: 10px;
    --aap-hint-scale: 1;
    --aap-hint-opacity: 0;
    --aap-margin: 30px;
    --aap-margin-bottom: 60px;
    --aap-background-transition-duration: 250ms;
    align-items: center;
    bottom: var(--aap-margin);
    display: flex;
    margin-bottom: var(--aap-margin-bottom);
    margin-top: var(--aap-margin);
    bottom:15px;
    will-change: transform;
    transform: matrix(1, 0, 0, 1, 0, 0);
    --aap-hint-opacity: 1;
    --aap-hint-scale: 0;
    opacity: 1;
    width: calc(15%);
    height: calc(5%);
    min-width: 20em;
    border: none;
    outline: none;
    color: #f5f5f7;
    cursor: pointer;
    position: fixed;
    z-index: 0;
    border-radius: 32px;
}
#all-access-pass__background{
    transform: matrix(1, 0, 0, 1, 0, 0);
    width: calc(150%);
    -webkit-backdrop-filter: blur(var(--aap-blur));
    backdrop-filter: blur(var(--aap-blur));
    background-color: var(--aap-background-color);
    border-radius: 32px;
    box-shadow: inset 0 0 1px var(--aap-inner-glow-color);
    color: var(--aap-text-color);
    display: flex;
    will-change: transform;
    z-index: 1;
    transition: linear var(--aap-background-transition-duration) background-color;

}

#all-access-pass_background::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-backdrop-filter: blur(var(--aap-blur));
    backdrop-filter: blur(var(--aap-blur));
    z-index: -1;
}

#glow-on-hover{
    align-items: center;
    box-sizing: border-box;
    display: flex;
    background-color: rgba(255,255,255,0.35);
    backdrop-filter: blur(3px);
    --button-margin: 10px;
    border-radius: 32px;
    justify-content: space-between;
    min-height: var(--aap-min-height);
    overflow: hidden;
    pointer-events: auto;
    position: relative;
    width: 100%;
    border: 0.25px solid rgba(0, 0, 0, 0.35);
}
#aap-base__text{
    --offset: 16px;
    display: inline-block;
    font-weight: var(--aap-font-weight);
    letter-spacing: -0.015em;
    line-height: 1.2353em;
    margin-inline-start: 24px;
    margin-inline-end: calc(var(--aap-min-height) + var(--offset) - var(--button-margin));
    max-width: 40em;
    padding: 15px 0 16px;
    text-align: left;
    word-break: keep-all;
    will-change: opacity; opacity: 1;
    color:rgb(0, 0, 0);
}

#aap-base__icon{
    align-items: center;
    box-sizing: border-box;
    display: flex;
    background-color: var(--aap-accent-color);
    border-radius: 50px;
    height: calc(var(--aap-min-height) - var(--button-margin)*2);
    justify-content: center;
    margin-inline-end: var(--button-margin);
    padding: 9px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: calc(var(--aap-min-height) - var(--button-margin)*2);
    will-change: transform;
    transform: matrix(1, 0, 0, 1, 0, -18);
}

#glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #7a00ff, #ff00c8, #7a00ff);
    position: absolute;
    top: 0px;
    left:0px;
    background-size: 430%;
    z-index: 0;
    filter: blur(3px);
    -webkit-filter: blur(3px);
    -o-filter: blur(3px);
    width: calc(100%);
    height: calc(100%);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 32px;
    color: #f5f5f7;
}
#glow-on-hover:active {
    -webkit-text-fill-color: white;
}
#glow-on-hover:active:after {
    background-color: rgba(97, 97, 97, 0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
#glow-on-hover:hover:before{
    opacity: 1;
    color:rgb(255, 255, 255);
}
#glow-on-hover:hover{
    -webkit-text-fill-color: white;
}
#glow-on-hover:after {
    color: #f5f5f7 !important;
    z-index: -1!important;
    content: '';
    position: absolute!important;
    width: 100%;
    height: 100%;
    background: rgb(255,255,255,0.45);
    left: 0px;
    top: 0px;
    border-radius: 32px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}



/* *********************************************
 * Media queries
 ******************************************** */
@media (max-width: 1288px) {
    .core-value .col-heading {margin-bottom: 60px}
    .core-value .col-heading::before {top: 68%; left: 10px; font-size: 90px; line-height: 0.9}
    .partner ul li p {font-size: 17px;}
}

@media (max-width: 991px) {
    .hero .swiper-slide .hero-caption h2 {font-size: 52px}
    .hero .swiper-slide .hero-caption p {font-size: 22px}

    .section .section-heading h4 {font-size: 22px;}
    .section .section-heading h2 {font-size: 42px; line-height: 1.4}

    .about .about-cover {height: 480px}
    .about .about-cover .col-typo h4 {font-size: 18px}
    .about .about-cover .col-typo p {font-size: 33px}
    .about .about-cover .col-typo .button-more-arrow {margin-top: 50px}
    .about .about-cover .col-link-items .link-item {padding: 24px}
    .about .about-cover .col-link-items .link-item .icon-img {height: 48px; font-size: 36px}
    .about .about-cover .col-link-items .link-item .en-text {font-size: 12px}
    .about .about-cover .col-link-items .link-item h4 {font-size: 20px}

    .business {padding-top: 120px}
    .business .col-business a figure figcaption {padding: 40px; transform: translateY(calc(100% - 140px))}
    .business .col-business a figure figcaption h4 {font-size: 30px}
    .business .col-business a figure figcaption p {font-size: 16px}
    .core-value .col-visual-items figcaption p {font-size: 16px}

    .business2 {padding-top: 120px}
    .business2 .col-business2 a figure figcaption {padding: 40px; transform: translateY(calc(100% - 140px))}
    .business2 .col-business2 a figure figcaption h4 {font-size: 30px}
    .business2 .col-business2 a figure figcaption p {font-size: 16px}

    .core-value {padding-top: 120px; padding-bottom: 80px}
    .core-value .col-heading::before {font-size: 72px}
    .core-value .col-visual-items figcaption h4 {font-size: 30px}

    .products {padding: 100px 0}

    .news .row-news .col-title h3 {font-size: 20px}
    .partner-w ul li p {font-size: 16px;}

}

@media (max-width: 767px) {

    a.button-more-arrow{font-size:14px;}

    .container, .container-lg, .container-md, .container-sm, .container-xl{
        padding-left: 8%; padding-right: 8%;
    }

    #footer .footer-top .col-left .footer-info .logo img{max-width:48%;}


    .hero .swiper-slide .hero-caption h2 {font-size: 42px; text-align: left; margin-top: 0em; font-weight: 700; line-height:1.33; br{
        display: inline-block;
        content: " ";
        padding: 0 0px;
     }}
    .hero .swiper-slide .hero-caption p {font-size: 16px; text-align: left; margin-top: 15px; font-weight:400; line-height:1.48;}

    #header .col-logo .logo img {width:80%}

    .section .section-heading h4 {font-size: 18px; text-align:left;}
    .section .section-heading h2 {font-size: 34px; font-weight: 660; text-align: left;}

    .section .col-controller button {font-size: 20px}
    .section .col-controller button + button::before {height: 12px}
    .section .col-controller .button-more-view {width: 36px; height: 36px; font-size: 20px}

    .about .about-cover .col-typo h4 {font-size: 15px; margin-bottom: 12px}
    .about .about-cover .col-typo p {font-size: 28px; line-height: 1.42;}
    .about .about-cover .col-typo .button-more-arrow {margin-top: 36px}

    .business {padding: 80px 0}
    .business .section-heading {margin-bottom: 60px}

    .business .col-business a figure figcaption {padding: 30px; transform: translateY(calc(100% - 120px))}
    .business .col-business a figure figcaption .category {font-size: 12px}
    .business .col-business a figure figcaption h4 {font-size: 22px}
    .business .col-business a figure figcaption p {font-size: 14px}
    .core-value .col-visual-items figcaption p {font-size: 14px}

    .business2 {padding: 80px 0}
    .business2 .section-heading {margin-bottom: 60px}

    .business2 .col-business2 a figure figcaption {padding: 40px; transform: translateY(calc(100% - 120px))}
    .business2 .col-business2 a figure figcaption .category {font-size: 12px}
    .business2 .col-business2 a figure figcaption h4 {font-size: 22px}
    .business2 .col-business2 a figure figcaption p {font-size: 14px}

    .core-value .col-visual-items figcaption h4 {font-size: 20px}

    .core-value {padding-top: 80px; padding-bottom: 80px}
    .core-value .col-visual-items .col-img figure figcaption {margin: -32px 0 0 0; padding: 24px 20px}
    .core-value .col-visual-items .col-img figure figcaption .en-heading {font-size: 12px}
    .core-value .col-visual-items .col-img figure figcaption h4 {font-size: 20px}

    .products {padding: 80px 0}
    .products .row-heading {margin-bottom: 60px}
    .products .col-controller {margin-top: 16px}

    .newsroom {padding: 80px 0}
    .newsroom .col-controller {margin-top: 16px}
    .newsroom .row-heading {
    margin-bottom: 60px;
}

    .products .products-swiper .swiper-slide .info {padding: 24px}
    .products .products-swiper .swiper-slide .info .category {font-size: 14px}
    .products .products-swiper .swiper-slide .info h5 {font-size: 20px}


    .newsroom .newsroom-swiper .swiper-slide .info .category {display: block; font-size: 14px;}
    .newsroom .newsroom-swiper .swiper-slide .info h5 {font-size: 20px;}



    .news .row-news .col-news-item {max-width: calc(100% - 280px)}

    .partner-w ul li {width: 49%; padding-top: 30px;}
    .partner-w ul li:nth-child(3),
    .partner-w ul li:nth-child(4) {
        padding-top: 30px;
    }

    .hero .swiper-slide .hero-caption h2 br {
    display: contents;
    }

}

@media (max-width: 575px) {
    .hero .custom-elements-group {bottom: 15vh}

    .section .col-controller {text-align: right}

    .about .about-cover {padding-top: 60px; padding-bottom:60px; height: auto}
    .about .about-cover .col-link-items {flex-direction: column}
    .about .about-cover .col-link-items .link-item {width: 100%}

    .business .col-business a figure::before {opacity: .3}
    .business .col-business a figure figcaption {transform: none !important}
    .business .col-business a figure figcaption p {opacity: 1 !important}


    .business2 .col-business2 a figure::before {opacity: .3}
    .business2 .col-business2 a figure figcaption {transform: none !important}
    .business2 .col-business2 a figure figcaption p {opacity: 1 !important}

    .core-value .col-heading {margin-bottom: 48px}
    .core-value .col-heading::before {top: 90%; font-size: 12vw; width: 90%}
    .core-value .col-visual-items .col-img:nth-child(2) {margin-top: 32px}

    .news .row-news .col-title {margin-bottom: 16px}
    .news .row-news .col-title h3 {font-size: 18px}
    .news .row-news .col-news-item {max-width: inherit}
    .news .row-news .col-news-item .news-swiper .swiper-slide a {font-size: 15px; max-width: calc(100% - 90px)}
    .news .row-news .col-news-item .news-swiper .swiper-slide .date {font-size: 13px; width: 80px}
    .news .row-news .col-controller {margin-top: 20px}

    .partner-w ul li {width: 100%;}
    .partner-w ul li:nth-child(2) {padding-top: 30px;}
    .partner-w ul li .img img {width: 100%; border: 1px solid #DDDDDD; margin-bottom: 5px;}

    .hero .swiper-slide .hero-caption h2 br {
    display: contents;
    }

}

@media (hover: hover) {
    .blog .b-item .b-link:hover img {
      transform: scale(1.08);
      transition: transform var(--expoOut) 1.6s;
    }
  }