@import "common.css";

.mb {
    display: none;
}

/***** header ****/

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 101;
    padding: 30px 15px;
}

header .flexSb {
    background: #FFFFFFBD;
    padding: 0 24px 0 40px;
    border-radius: 40px;
    align-items: center;
    backdrop-filter: blur(8.399999618530273px);
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    z-index: 1
}
header nav a {
    color: var(--black);
}
header nav > ul {
    display: flex;
    gap: 14px;
    align-items: center;
}

header nav > ul > li > a {
    padding: 26px 15px;
    display: block;
    color: #47535C;
}
header li.active > a , header li:hover > a {
    color: var(--color);
}
header nav a {
    font-weight: 600;
    font-size:  1.6rem;
    line-height: 140%;
    color: #47535C;
}

header nav ul li:hover > a {
    color: var(--color);
}

header nav ul li a.btn {
    line-height: 1;
    border-radius: 30px;
    color: var(--color);
}
header nav ul li a.btn:hover {
    background: var(--color);
    color: var(--color2);
}

#bar {
    width: 21px;
    height: 14px;
    position: relative;
}
#bar span {
    display: block;
    width: 100%;
    height: 2.5px;
    background: var(--color);
    border-radius: 2px;
    position: absolute;
    transition: 0.3s ease;
    left: 50%;
    transform: translateX(-50%);
}
#bar span:nth-child(1){
    top: 0;
}
#bar span:nth-child(2){
    top: 50%;
    transform: translate(-50%, -50%);
}
#bar span:nth-child(3){
    bottom: 0;
}
.active #bar span:nth-child(1){
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}
.active #bar span:nth-child(2){
    opacity: 0;
}
.active #bar span:nth-child(3){
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
}
header .flex {
    gap:19px;
    align-items: center;
}
header nav > ul > li {
    position: relative;
}
header .pc .subMenu {
    position: absolute;
    top: 100%;
    left: 0;
    padding-top: 8px;
    display: none;
}
header .pc .subMenu > ul {
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.74);
    backdrop-filter: blur(8.399999618530273px);

}
header .pc .subMenu > ul > li {
    padding: 12px 16px;
}
header .pc .subMenu2 li {
    margin-top: 8px;
    font-weight: 500;
}
header .pc .subMenu2 a {
    font-weight: 500;
}
header .pc li:nth-child(1) .subMenu {width: 180px;}
header .pc li:nth-child(2) .subMenu {width: 204px;}
header .pc li:nth-child(3) .subMenu {width: 240px;}
header .pc li:nth-child(4) .subMenu {width: 240px;}



/***** footer ****/

footer {
    padding: 64px 100px;
    border-top: 1px solid var(--color);
}
footer h2 {
    font-size: 0
}
footer h2 a {
    display: block;
}
footer .flexSb {
    margin-bottom: 36px;
    align-items: baseline;
}

.ft_left .btn {
    width: 138px;
}

.ft_left h3 {
    margin: 24px 0 12px;
    white-space: pre-line;
    font-size: 3.6rem;
    font-weight: 500;
    line-height: 110%;
}

footer .copy {
    font-size:  1.6rem;
    font-weight: 500;
    line-height: 140%;
}

.ft_right {
    gap: 80px
}

.ft_right h4 {
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 140%;
    margin-bottom: 24px;
}

.ft_right ul li a, .ft_right ul li.flex {
    font-size:  1.6rem;
    font-weight: 500;
    line-height: 140%;
    display: flex;
    align-items: center;
    gap: 12px;
}
.ft_right ul li span {
    line-height: 1.4;
}

.ft_right > div:not(.ft_connect) ul li + li {
    margin-top: 20px;
}
.ft_right > div:not(.ft_connect) ul li:last-child {
    align-items: flex-start;
}
.ft_connect ul {
    display: flex;
    gap: 24px;
}


/******************************** main **********************************/

#main-container section {
    overflow: hidden;
}

#main-container .sec01 {
    padding: 625px 0 280px;
    background: url("/img/v3/mainImg.png") no-repeat top left / auto;
}

#main-container .sec01 .sec01_tt01 {
    padding-right: 70px;
    display: flex;
    justify-content: right;
    width: 100%;
    margin-bottom: 662px;
}

#main-container .sec01 .sec01_tt01 h2 {
    font-weight: 500;
    line-height: 110%;
}

.sec01_tt02 {
    display: flex;
    justify-content: center;
}

.sec01_tt02 h3 {
    font-size: 3.6rem;
    font-weight: 500;
    line-height: 130%;
    margin-bottom: 12px;
}

.sec01_tt02 .btn {
    width: 133px;
}

.smTt {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    gap: 24px;
}
.smTt h5 {
    text-transform: uppercase;
}
#main-container .sec02 ul,
#workWithUs-container .sec02 ul {
    display: flex;
    gap: 8px
}

#main-container .sec02 ul li,
#workWithUs-container .sec02 ul li {
    flex: 1;
    overflow: hidden;
    position: relative;
}
#main-container .sec02 ul li:before,
#workWithUs-container .sec02 ul li:before {
    content: "";
    display: block;
    background: rgba(0, 0, 0, 0);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: .7s;
    z-index: 2;
}
#main-container .sec02 ul li:hover:before,
#workWithUs-container .sec02 ul li:hover:before {
    background: rgba(0, 0, 0, .5);
}


#main-container .sec02 ul li a,
#workWithUs-container .sec02 ul li a {
    position: relative;
    display: block;
}

#main-container .sec02 ul li img,
#workWithUs-container .sec02 ul li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .7s;
}

#main-container .sec02 ul li:hover .img img,
#workWithUs-container .sec02 ul li:hover .img img {
    transform: scale(1.1);
}

#main-container .sec02 ul li .txt,
#workWithUs-container .sec02 ul li .txt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #FFFFFF;
    font-size: 3.2rem;
    font-weight: 600;
    padding: 0 106px 0 72px;
    width: 100%;
    line-height: 1.4;
    z-index: 2;
}
#main-container .sec02 ul li .txt p ,
#workWithUs-container .sec02 ul li .txt p{
    margin-top: 16px;
    font-size:2rem;
    line-height: 1.4;
    font-weight: 400;
    display: none;
}
#main-container .sec02 ul li:hover .txt p ,
#workWithUs-container .sec02 ul li:hover .txt p{
    display: block;
}

#main-container .sec02 ul li .txt:after,
#workWithUs-container .sec02 ul li .txt:after {
    width: 18px;
    height: 36px;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 72px;
    background: url("/img/v3/arrow_w.svg") no-repeat center / contain;
}

#main-container .sec03 {
    padding: 280px 0;
    background: url("/img/v3/mainImg02.png") no-repeat top -380px right / auto;
}

.mainSec0301 h3 {
    margin: 12px 0 30px;
    font-size: 8.8rem;
    line-height: 1;
}

.mainSec0301 img {
    max-width: 523px;
}

#main-container .sec03 .flex {
    gap: 137px;
}

.mainSec0302 {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 12px;
}

.mainSec0302 p {
    font-size: 3.6rem;
    font-weight: 500;
    line-height: 130%;
    margin-top: 34px;
}

#main-container .sec03 ul {
    display: flex;
    gap: 25.33px;
    flex-wrap: wrap;
    margin-top: 50px;
}

#main-container .sec03 ul li a {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 32px;
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 140%;
    color: #fff;
    border-radius: 8px;
    background: var(--color);
    width: 308px;
    position: relative;
}

#main-container .sec03 ul li a p {
    word-break: keep-all;
    white-space: pre-line;
}

#main-container .sec03 ul li a span {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    overflow: hidden;
}

#main-container .sec03 ul li:nth-child(1) span,
#main-container .sec03 ul li:nth-child(3) span {
    right: 16px;
}

#main-container .sec03 ul li:hover a span img {
    animation: right-arrow .5s linear;
}

#main-container .sec04 {
    padding-bottom: 280px;
}

#main-container .sec04 ul {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

#main-container .sec04 ul li {
    width: calc((100% - 48px) / 3);
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.01);
    backdrop-filter: blur(2.4000000953674316px);
    height: 355px;
    display: flex;
    padding: 32px 28px;
    align-items: end;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#main-container .sec04 ul li b {
    display: block;
    font-size: 3.6rem;
    font-weight: 700;
    margin-bottom: 4px;
}

#main-container .sec04 ul li p {
    font-size: 2.4rem;
    font-weight: 600;
}

#main-container .sec04 ul li:nth-child(1) {
    background-image: url("/img/v3/ourData01.jpg");
}

#main-container .sec04 ul li:nth-child(2) {
    background-image: url("/img/v3/ourData02.jpg");
}

#main-container .sec04 ul li:nth-child(3) {
    background-image: url("/img/v3/ourData03.jpg");
}

#main-container .sec04 ul li:nth-child(4) {
    background-image: url("/img/v3/ourData04.jpg");
}

#main-container .sec04 ul li:nth-child(5) {
    background-image: url("/img/v3/ourData05.jpg");
}

#main-container .sec04 ul li:nth-child(6) {
    background-image: url("/img/v3/ourData06.jpg");
}

.sec-bg {
    background: url("/img/v3/mainImpact_bg.jpg") no-repeat center / cover;
    display: flex;
    align-items: center;
    height: 1133px;
}

.sec-bg .wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
}

.sec-bg h5 {
    color: var(--color2);
    font-size: 2.4rem;
    font-weight: 600;
}

.sec-bg h4 {
    margin: 8px 0 16px;
    color: #FFF;
    font-size: 3.6rem;
    font-weight: 400;
    line-height: 130%;
    white-space: pre-line;
    word-break: keep-all;
}


#main-container .sec06 {
    padding: 452px 50px 256px;
}

#main-container .sec06 h5, #main-container .sec07 h5 {
    text-align: center;
    margin-bottom: 37px;
    text-transform: uppercase;
}

#main-container .sec06 .con, #main-container .sec07 .con {
    border-top: 2px solid var(--color);
}

#main-container .sec06 .con > div {
    padding: 36px 0;
    gap: 24px
}

#main-container .sec06 .con > div + div {
    border-top: 1.5px solid #B0D3F9
}

.sec06Tt {
    width: 415px;
}

.sec06Tt + div {
    flex: 1;
    padding-right: 110px;
}

.sec06Tt h4 {
    font-size: 3.2rem;
}

.sec06Tt p {
    font-size: 20px;
    font-weight: 600;
    line-height: 140%;
}

.tab-off ul {
    display: flex;
    flex-wrap: wrap;
    gap: 49px;
    align-items: center;
}

.tab-con {
    position: relative;
    padding-right: 0
}

.tab-arrow {
    position: absolute;
    right: 0;
    top: 10px;
    transform: rotate(90deg);
    cursor: pointer;
    transition: .3s;
}

.tab-on {
    padding-bottom: 64px;
    display: none;
}

.tab-tt {
    border-bottom: 1px solid #C6CACC;
    line-height: 150%;
    font-size: 20px;
    font-weight: 600;
    color: var(--black);
    padding: 4px 0;
    margin-bottom: 12px;
}

.tab-img {
    display: flex;
    width: 321px;
    gap: 24px;
    flex-wrap: wrap;
    align-items: center;
}

.tab-flex {
    gap: 9px;
    display: flex;
}

.tab-flex .tab-txt {
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    color: var(--black);
    flex: 1;
}

.tab-flex .tab-txt p + p {
    margin-top: 10px;
}

.tab-on > div + div {
    margin-top: 52px;
}

.tab-con.active .tab-arrow {
    transform: rotate(-90deg);
}

/*.tab-con.active .tab-on {
    display: block;
}

.tab-con.active .tab-off {
    display: none;
}*/


#main-container .sec07 {
    padding: 0 50px 337px;
}

#main-container .sec07 .con {
    padding: 65px 0;
}

#main-container .sec07 .con ul {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 29px;
    row-gap: 38px;
    padding: 0 23px;
}

#main-container .sec07 .con ul li {
    text-align: center;
    font-size: 12px;
    font-weight: 500;
}

#main-container .sec07 .con ul li .txt {
    padding-top: 11px;
    word-break: keep-all;
    line-height: 1.4;
}

#main-container .sec07 .con ul li:nth-child(10) {
    grid-column: span 2;
}

#main-container .sec07 .con ul li:nth-child(10) .img {
    display: flex;
    gap: 29px
}

#main-container .sec07 .con ul li:nth-child(10) .img img {
    width: calc(100% / 2 - 14px);
}

#main-container .sec07 .con ul li:nth-last-child(-n+2) {
    display: flex;
    flex-direction: column;
    justify-content: end;

}

#main-container .sec07 .con ul li:nth-last-child(-n+6) .txt {
    height: 54.107px;
}

#main-container .sec08 {
    padding: 200px 0;
    background: url("/img/v3/mainWorkWithUs.jpg") no-repeat center / cover;
}

#main-container .sec08 .flexSb {
    align-items: baseline;
}

#main-container .sec08 .flexSb h3 {
    font-size: 64px;
}

#main-container .sec08 .box {
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.74);
    backdrop-filter: blur(8.399999618530273px);
    padding: 32px 36px;
}

.workWithUs-form label {
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 140%;
    display: block;
    margin-bottom: 8px;
}

.workWithUs-form .box {
    width: 656px;
}

.workWithUs-form label span {
    color: #FF0000;
}

#main-container .sec08 .flex {
    gap: 24px;
}

.workWithUs-form ul li + li {
    margin-top: 44px;
}

.workWithUs-form ul li input, .workWithUs-form ul li textarea {
    border-radius: 8px;
    background: #FFF;
    border: 1px solid #AAB0B4;
    padding: 13px 16px;
    font-size: 20px;
    line-height: 150%;
}

.workWithUs-form ul li input::placeholder,
.workWithUs-form ul li textarea::placeholder{
    color: #AAB0B4;
}

.workWithUs-form ul li textarea {
    width: 100%;
    resize: none;
    height: 240px;
}

.workWithUs-form .btn-wrap {
    display: flex;
    justify-content: end;
    margin-top: 16px;
}

#main-container .sec09 {
    padding: 100px 0;
    background: var(--color);
    color: #fff;
}

#main-container .sec09 h3 {
    font-size: 64px;
    text-align: center;
    margin-bottom: 36px;
}

#main-container .sec09 .con {
    display: flex;

    justify-content: center;
    width: 100%;
}

#main-container .sec09 .con ul {
    display: flex;
    flex-wrap: wrap;
    width: 453px;
    gap: 24px;
}

#main-container .sec09 ul li {
    width: calc(100% / 2 - 36px)
}

#main-container .sec09 ul li a {
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    line-height: 140%;
    display: flex;
    align-items: center;
    gap: 12px;
}

/************************* our story ******************************/


#banner {
    position: relative;
    top: 0;
    height: 75vh;
    background-image: url("/img/v3/story_banner.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: end;
    padding-bottom: 90px;
    overflow: hidden;
    width: 100%;
    z-index: 10;
}

#banner .wrap {
    width: 100%;
    color: #fff;
}

#banner .wrap .txt h5 {
    font-size: 2.4rem;
    font-weight: 600;
    margin-bottom: 12px;
    opacity: 0;
    text-transform: uppercase;
    animation: aniTitle 1s ease-in-out forwards;
}

#banner .wrap h2 {
    opacity: 0;
    animation: aniTitle 1s .2s ease-in-out forwards;
    overflow: hidden;
    transition: .5s;
}

@keyframes aniTitle {
    0% {
        transform: translateX(-100px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1
    }
}

.subNav {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.74);
    backdrop-filter: blur(8.399999618530273px);
    padding: 16px 0;
}

.subNav ul {
    display: flex;
    gap: 36px;
    align-items: center;
    width: 100%;
    padding: 0 15px;
    max-width: 1330px;
    margin: 0 auto
}

.subNav ul li a {
    font-size:  1.6rem;
    font-weight: 600;
    line-height: 140%;
    display: block;
    color: #848C92;
}

.subNav ul li:hover a {
    color: var(--black);
}

.subNav ul li.active a {
    color: var(--color);
}

#story-container .sec01 {
    overflow: hidden;
    padding: 75px 0 384px;
    background: url("/img/v3/about_bg.png") no-repeat top 111px left;
}

#story-container .sec01 .txt01,
#story-container .sec01 .txt03 {
    display: flex;
    justify-content: center;
}

#story-container .sec01 p {
    text-align: left;
    font-size: 3.6rem;
    font-weight: 500;
    line-height: 130%;
}

#story-container .sec01 .txt02 {
    margin: 424px auto 458px;
    display: flex;
    justify-content: right;
    width: 100%;
}

#story-container .sec-bg {
    background: url("/img/v3/story_bg.jpg") no-repeat center / cover;
    height: 1022px;
}

#story-container .sec03 {
    padding: 280px 0;
}

#story-container .sec03 h3 {
    margin-bottom: 48px;
    text-align: center;
}

.boxList {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.boxList li {
    flex: 1;
    padding: 44px 40px;
    border-radius: 8px;
    background: var(--color);
    color: #fff;
}

.sec03Tt {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 28px;
    justify-content: center;
}

.sec03Tt span {
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 140%;
    display: block;
}

.boxList li p {
    font-size: 20px;
    font-weight: 400;
    line-height: 140%;
}

/******************************** history **********************************/

#history-container {
    padding-bottom: 280px;
}

#history-container .tt {
    padding: 192px 0 88px;
}

#history-container .tt h5 {
    font-size: 2.4rem;
    text-transform: uppercase;
    margin-bottom: 12px;
}

#history-container .tt h2 {
    margin-bottom: 48px;
}

#history-container .subNav {
    position: static;
}

#history-container .subNav ul {
    max-width: 100%;
    margin: 0;
    width: 100%;
}


#history-container .con .tab {
    width: 50%;
    display: flex;
}

#history-container .year {
    padding-top: 15px;
    padding-right: 30px;
    border-right: 1px solid #B0D3F9;
    position: relative;
}

#history-container .year span {
    display: block;
    position: absolute;
    right: -8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color);
    transition: top 0.3s ease;
}

#history-container .year ul li + li {
    margin-top: 24px;
}

#history-container .year li {
    font-size: 20px;
    font-weight: 600;
    line-height: 140%;
    display: block;
    cursor: pointer;
    padding: 0 16px;
    color: #848C92;
    transition: 0.3s ease;
}

#history-container .year li.active {
    padding: 8px 16px;
    color: #fff;
    border-radius: 1000px;
    background: var(--color);
    position: relative;
}

#history-container .year li:not(.active):hover {
    color: var(--color);
}

#history-container .month {
    padding-left: 54px;
    padding-top: 12px;
}

#history-container .month ul:not(.active) {
    display: none;
}

#history-container .month ul li {
    display: flex;
}

#history-container .month ul li + li {
    margin-top: 28px;
}

#history-container .month ul li span {
    font-size:  1.6rem;
    font-weight: 600;
    line-height: 140%;
    display: block;
    width: 55px;
}

#history-container .month ul li p {
    font-size:  1.6rem;
    font-weight: 500;
    line-height: 140%;
    flex: 1;
}

/************************* sustainability ******************************/


#Sustainability-container #banner {
    background-image: url("/img/v3/sustainability_banner.jpg");
}

#Sustainability-container .sec01.flex {
    padding: 75px 0 280px;
    gap: 68px
}

#Sustainability-container .sec01 h3 {

}

#Sustainability-container .sec01 p {
    font-size: 3.6rem;
    font-weight: 500;
    line-height: 130%;
    flex: 1;
}

#Sustainability-container .sec02Tt p {
    font-size: 20px;
    font-weight: 400;
    line-height: 150%;
    margin: 16px 0 40px;
    width: 640px;
    color: var(--black);
}

#Sustainability-container .sec02 .con ul {
    display: flex;
    gap: 24px;
}

#Sustainability-container .sec02 .txt {
    padding: 55px 110px 280px;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    row-gap: 100px;
}

#Sustainability-container .sec02 .txt > div {
    width: calc((100% - 24px) / 2);
}

#Sustainability-container .sec02 .txt .img {
    display: flex;
    align-items: center;
    justify-content: center;
}

#Sustainability-container .sec02 .txt .img img {
    width: 120px;
}

#Sustainability-container .sec02 .txt p {
    font-size: 20px;
    line-height: 150%;
    margin-top: 12px;
    color: var(--black);
}

#Sustainability-container .sec03 h5 {
    margin-bottom: 24px;
}

#Sustainability-container .sec03 .box {
    padding: 32px;
    border-radius: 8px;
    background: #E6F1FD;
}

#Sustainability-container .sec03 .boxTt {
    display: flex;
    gap: 24px;
    color: var(--black);
    margin-bottom: 32px;
}

#Sustainability-container .sec03 .boxTt img {
    width: 120px;
    margin-right: 24px;
}

#Sustainability-container .sec03 .boxTt h5 {
    line-height: 140%;
    margin-bottom: 16px;
}

#Sustainability-container .sec03 .boxTt p {
    font-size: 20px;
    font-weight: 500;
    line-height: 140%;
    white-space: pre-line;
}

#Sustainability-container .sec03 .box + .box {
    margin-top: 20px;
}

#Sustainability-container .sec03 .box ul {
    display: flex;
    gap: 48px;
}

#Sustainability-container .sec03 .box ul li b {
    font-size: 48px;
    font-weight: 600;
    line-height: 1.3;
}

#Sustainability-container .sec03 .box ul li p {
    font-size: 20px;
    line-height: 150%;
    color: var(--black);
}

#Sustainability-container .sec03 .box ul li:not(.flex1) {
    width: 33.333%;
}

.data2 li:not(.flex1) {
    flex: 1;
}

#Sustainability-container .sec03 .box ul li .flex {
    align-items: center;
    gap: 16px;
}

#Sustainability-container .sec04 {
    padding: 280px 0;
}

#Sustainability-container .sec04 h3 {
    margin-bottom: 16px;
}

#Sustainability-container .sec04 .flexSb {
    align-items: normal;
}

#Sustainability-container .sec04 h5 {
    line-height: 140%;
    margin-bottom: 16px;
    color: var(--black);
}
#Sustainability-container .sec04 h5 a {
    font-weight: 600;
    color: var(--black);
}
#Sustainability-container .sec04 h5.active {
    color: var(--color);
}

#Sustainability-container .sec04 .left li + li {
    margin-top: 12px;
}

#Sustainability-container .sec04 .left li ul {
    margin-left: 36px;
    margin-top: 12px;
}

#Sustainability-container .sec04 .left li a {
    font-size:  1.6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    color: #848C92;
    transition: .3s;
}

#Sustainability-container .sec04 .left li.active > a ,
#Sustainability-container .sec04 .left h5.active > a{
    color: var(--color);
}

#Sustainability-container .sec04 .left li:hover > a ,
#Sustainability-container .sec04 .left h5:hover > a{
    color: #1E2327;
}

#Sustainability-container .sec04 .policy-tab > div + div {
    margin-top: 32px;
}

.policy-tab {
    position: sticky;
    top: 100px;
    transition: .5s;
}

#Sustainability-container .sec04 .right {
    width: 636px;
    padding-top: 80px;
}

#Sustainability-container .sec04 .right h4 {
    font-size: 3.2rem;
    margin-bottom: 16px;
    color: var(--color);
}

.policy_list {
    color: var(--black);
}

.policy_list + .policy_list {
    margin-top: 160px;
}

#Sustainability-container .sec04 .right h6 {
    font-size: 2.4rem;
    line-height: 140%;
}

#Sustainability-container .sec04 .right .img {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 16px;
}

#Sustainability-container .sec04 .right .noFlex {
    margin-bottom: 56px;
}

#Sustainability-container .sec04 .right .noFlex h6 {
    margin-bottom: 16px;
}

#Sustainability-container .sec04 .right p {
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

#Sustainability-container .sec04 .right .txt {
    padding-left: 40px;
}

#Sustainability-container .sec04 .right .policy01 > div + div {
    margin-top: 40px;
}

#Sustainability-container .sec04 .right .txt div {
    padding-left: 20px;
    position: relative;
}

#Sustainability-container .sec04 .right .txt div + div {
    margin-top: 12px;
}

#Sustainability-container .sec04 .right .txt div span {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 20px;
    line-height: 150%;
}

#Sustainability-container .sec04 .right .policy02 > div:not(.noFlex) {
    padding-left: 40px;
}

#Sustainability-container .sec04 .right .policy02 > div:not(.noFlex) + div {
    margin-top: 40px;
}


/************************* publication ******************************/

#publication-container #banner, #patents-container #banner, #projects-container #banner {
    background-image: url("/img/v3/cs_banner.jpg");
}

#publication-container, #patents-container, #projects-container {
    padding-bottom: 280px;
}

.rndNav {
    margin-bottom: 16px;
    margin-top: 75px;
}

.rndNav ul {
    display: flex;
    align-items: center;
    gap: 20px;
}

.rndNav a {
    display: inline-block;
    font-size: 20px;
    font-weight: 600;
    line-height: 140%;
    color: #AAB0B4;
}

.rndNav li.active a {
    border-radius: 1000px;
    background: var(--color);
    color: #fff;
    padding: 8px 16px;
}

.rndSubNav {
    margin-bottom: 24px;
}

.rndSubNav ul {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rndSubNav ul li {
    padding: 0 16px;
}

.rndSubNav ul a {
    font-size:  1.6rem;
    font-weight: 600;
    line-height: 140%;
    display: block;
    color: #AAB0B4;
    position: relative;
    padding-bottom: 8px;
}

.rndSubNav ul li:hover a, .rndNav ul li:hover a, .rndSubNav ul li.active a {
    color: var(--color);
}

.rndSubNav ul li.active a:after {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    background: #B1DE65;
    position: absolute;
    bottom: 0;
    left: 0;
}

.rndSearch {
    padding: 16px 24px;
    border-radius: 8px;
    background: #E6F1FD;
    align-items: center;
    margin-bottom: 24px;
}

.rndSearch .search select, .rndSearch .search input {
    padding: 8px 12px;
    font-size:  1.6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    min-width: 90px;
    color: #B0D3F9;
    background: #fff;
}

.rndSearch .search select {
    background: #fff url(/img/v3/arrow_g.svg) no-repeat right 12px center / 24px 12px;
}

.rndSearch input::placeholder {
    color: #B0D3F9;
}

.rndSearch input {
    color: #000;
    width: 315px;
}

.rndSearch .search button {
    padding: 16px 20px;
    border-radius: 1000px;
    background: #FFF;
    font-size:  1.6rem;
    font-weight: 600;
    color: var(--color);
}

.rndSearch .search button:hover {
    background: var(--color);
    color: #fff;
}

.search form {
    display: flex;
    align-items: center;
    gap: 12px;
}

.paging {
    display: flex;
    align-items: center;
    gap: 24px;
}

.paging_input span {
    font-size:  1.6rem;
    font-weight: 600;
    line-height: 140%;
    color: #1E2327;
}

.paging_input {
    gap: 12px;
    display: flex;
    align-items: center;
}

.paging_input input {
    width: 42px;
    height: 32px;
    padding: 4px 8px;
    border-radius: 8px;
    outline: none;
    border: none;
    text-align: center;
}

.pagination {
    display: flex;
    align-items: center;
    gap: 16px
}

.pagination ul {
    display: flex;
    align-items: center;
    gap: 12px
}

.pagination ul a {
    font-size:  1.6rem;
    font-weight: 500;
    line-height: 140%;
    color: #1E2327;
}

.pagination ul li.active a {
    padding: 4px 10px;
    background: #fff;
    border-radius: 8px;
}

.last_btn img {
    transform: rotate(180deg);
}

.rndTable .table {
    background: #E6F1FD;
    border-radius: 8px;
}

.rndTable .table .thead {
    border-bottom: 2px solid #B0D3F9;
    gap: 24px;
    display: flex;
}

.rndTable .table .thead > div {
    font-size:  1.6rem;
    font-weight: 600;
    line-height: 140%;
    color: var(--black);
    padding: 16px 0;
}

.tb_no {
    width: 86px;
    text-align: center;
}

.tb_year {
    width: 86px;
}

.tb_journal {
    width: 195px;
}

.tb_author {
    width: 23.6%;
}

.tb_flex1 {
    flex: 1;
}

.rndTable .table a:hover {
    color: var(--color);
}
.rndTable .table .trow:active {
    background:  #EDEEEF
}
.rndTable .table .trow:active a {
    color: var(--black) !important
}

.rndTablePaging {
    margin: 24px 0;
    display: flex;
    flex-direction: column;
    align-items: end;
}

.rndTablePerPage {
    display: flex;
    align-items: center;
    justify-content: right;
    font-size:  1.6rem;
    font-weight: 600;
    line-height: 140%;
    gap: 12px
}

.rndTablePaging .pagination ul li.active a {
    background: #E6F1FD;
}

.rndTablePerPage select {
    padding: 8px 40px 8px 12px;
    border-radius: 8px;
    font-size:  1.6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    background: #E6F1FD url(/img/v3/arrow_g.svg) no-repeat right 12px center / 24px 12px;
}

.trow {
    border-bottom: 1px solid #fff;
    padding: 16px 0;
    display: flex;
    gap: 24px;
}

.trow div, .trow div a {
    font-size: 14px;
    font-weight: 500;
    line-height: 140%;
    color: var(--black);
}


/************************* patents ******************************/

.rndTable .table .thead .flexSb {
    width: 100%;
    padding-right: 16px;
}

#patents-container .tbody .img {
    width: 85.909px;
}

#patents-container .tbody .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#patents-container .tbody .trow {
    padding: 24px 0;
}

#patents-container .tbody .flex {
    gap: 24px
}

trow div a.rndTableTitle {
    font-size:  1.6rem;
    font-weight: 500;
    line-height: 140%;
    display: block;
}

.rndTableData {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 48px;
    row-gap: 9px;
    font-size: 14px;
    font-weight: 500;
    line-height: 140%;
}

#patents-container .tbody .trow .txt {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
}

.rndTableData > div {
    display: flex;
}

.rndTableData > div b {
    display: block;
    width: 140px;
    font-size: 14px;
    font-weight: 600;
}

.rndTableData > div span {
    flex: 1;
    display: block;
}


/************************* projects ******************************/

#projects-container section {
    padding-top: 75px;
}

#projects-container section h4 {
    font-size: 3.2rem;
    font-weight: 600;
    margin-bottom: 48px;
}

#projects-container .flex {
    gap: 30px;
}

#projects-container .flex .rndTable {
    flex: 1;
}

#projects-container section ul li + li {
    margin-top: 24px;
}

#projects-container section ul a {
    font-size: 20px;
    font-weight: 600;
    line-height: 140%;
    display: block;
    cursor: pointer;
    padding: 0 16px;
    color: #848C92;
    transition: 0.3s ease;
}

#projects-container section ul li.active a {
    padding: 8px 16px;
    color: #fff;
    border-radius: 1000px;
    background: var(--color);
    position: relative;
}

#projects-container section ul li:not(.active):hover a {
    color: var(--color);
}


.tb_period {
    width: 196px;
}

.tb_partner {
    width: 200px;
}


/************************* press ******************************/


#press-container {
    padding: 245px 0 280px
}

#press-container h2 {
    margin-bottom: 65px;
}

#press-container .con ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

#press-container .con ul li {
    width: 100%;
    border-radius: 16px;
}

#press-container .con ul li a {
    background: #E6F1FD;
    padding: 32px;
    border-radius: 8px;
    display: block;
    height: 100%;
}
#press-container .con ul li:active a {
    opacity: 0.6;
    background: #EDEEEF;
}
#press-container .con ul li .img {
    padding-bottom: 59.1%;
    overflow: hidden;
    position: relative;
}
#press-container .con ul li .img img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
    transition: 0.3s ease;
}
#press-container .con ul li:active a .txt p {
    color: var(--black) !important
}

#press-container .con ul li a .txt {
    padding-top: 20px
}

#press-container .con ul li a .txt > span {
    font-size:  1.6rem;
    font-weight: 600;
    line-height: 140%;
    display: block;
}

#press-container .con ul li a .txt p {
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 140%;
    color: var(--black);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    white-space: normal;
}
#press-container .con ul li:hover a .txt p {
    color: var(--color);
}

#press-container .con ul li a .txt div {
    text-align: right;
    color: #848C92;
    margin-top: 8px;
    font-size:  1.6rem;
    font-weight: 600;
}

#press-container .con ul li a .txt div img {
    vertical-align: middle;
    transform: rotate(-90deg);
}

#press-container .rndTablePaging {
    margin-top: 24px;
}


/************************* Work With Us ******************************/

#workWithUs-container {
    padding: 245px 0 180px
}

#workWithUs-container h2 {
    margin-bottom: 80px;
}

#workWithUs-container .sec03 h3 {
    margin: 160px 0 48px;
    font-size: 64px;
    color: var(--color);
}
#workWithUs-container .sec03 .flexSb {
    align-items: baseline;
}

#workWithUs-container .sec03 .box ul .flex {
    width: 100%;
    gap: 24px;
}
#workWithUs-container .sec03 .box ul .flex > div {
    flex: 1;
}
#workWithUs-container .sec03 .box .flex input {
    flex: 1;
    width: 100%;
}

#workWithUs-container .sec03 .connect a, #workWithUs-container .sec03 .connect_tt {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 20px;
    font-weight: 500;
    line-height: 140%;
}
#workWithUs-container .sec03 .connect_tt {
    align-items: flex-start;
    line-height: 1.4;
}
#workWithUs-container .sec03 .connect_tt span {
    line-height: 1.4;
    padding-bottom: 12px;
}

.connect_map {
    margin: 12px 0;
}

#workWithUs-container .sec03 .connect {
    width: 416px;
}

#workWithUs-container .sec03 .connect a + a {
    margin-top: 20px;
}

#workWithUs-container .sec03 .connect > li + li {
    margin-top: 20px;
}

#workWithUs-container .sec03 .connect li h4 {
    font-size: 2.4rem;
    line-height: 140%;

}

#workWithUs-container .sec03 .connect li ul {
    margin-top: 16px;
}

#workWithUs-container .sec03 .connect li ul li {
    padding-left: 35px;
    position: relative;
}

#workWithUs-container .sec03 .connect li ul li span {
    position: absolute;
    top: 3px;
    left: 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 140%;
}

#workWithUs-container .sec03 .connect li ul li p {
    font-size: 20px;
    font-weight: 500;
    line-height: 140%;
}

#workWithUs-container .sec03 .connect li ul li + li {
    margin-top: 10px;
}

/************************* our Team ******************************/

#ourTeam-container #banner {
    background-image: url("/img/v3/ourTeam_banner.jpg");
}

#ourTeam-container .sec01 .flex {
    gap: 194px;
    margin-top: 45px;
}

#ourTeam-container .sec01 .flex h3 {
    margin-top: 32px;
}

#ourTeam-container .sec01 .flex ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    row-gap: 52px;
    flex:1;
}

#ourTeam-container .sec01 .flex ul li {
    color: var(--black);
    cursor: pointer;
}

#ourTeam-container .sec01 .flex ul li b {
    display: block;
    margin: 16px 0 8px;
    font-size: 20px;
    font-weight: 600;
    line-height: 140%;
}

#ourTeam-container .sec01 .flex ul li p {
    font-size:  1.6rem;
    font-weight: 500;
    line-height: 140%;
}

#ourTeam-container .sec01 {
    margin-bottom: 280px;
}

#ourTeam-container .sec02 {
    padding: 120px 0;
    background: var(--color);
    color: #fff;
}

#ourTeam-container .sec02 h3 {
    text-align: center;
    font-size: 64px;
    margin-bottom: 72px;
}

#ourTeam-container .sec02 ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    row-gap: 60px
}

#ourTeam-container .sec02 ul li {
    display: flex;
    gap: 26px;
    align-items: center;

}
#ourTeam-container .sec02 ul li span {
    display: block;
    font-size: 20px;
    font-weight: 600;
    line-height: 140%;
}

#ourTeam-container .sec03 {
    padding: 280px 0;
}

#ourTeam-container .sec03 h3 {
    text-align: center;
    font-size: 64px;
    margin-bottom: 40px;
}

#ourTeam-container .sec03 ul {
    display: flex;
    gap: 24px;
}

#ourTeam-container .sec03 ul li {
    flex: 1;
}

#ourTeam-container .sec03 ul li div {
    display: flex;
    gap: 24px;
    align-items: center;
}

#ourTeam-container .sec03 ul li b {
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 140%;
}

#ourTeam-container .sec03 ul li p {
    font-size:  1.6rem;
    font-weight: 500;
    line-height: 140%;
    color: var(--black);
    margin-top: 16px
}

.modal_bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    background-blend-mode: multiply;
    z-index: 11;
    display: none;
}
.modal {
    position: fixed;
    top: -200%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 12;
    background: rgba(255, 255, 255, 0.74);
    backdrop-filter: blur(8.399999618530273px);
    border-radius: 8px;
    max-width: 615px;
    width: 100%;
}
.modal.active {
    top: 50%;
    transition: all 0.4s ease;
}
#ourTeam-container .modal .flex {
    gap:32px;
    padding: 16px;
    position: relative;
    margin-top: 0;
}
.modal .flex .close {
    cursor: pointer;
    position: absolute;
    top: 12px;
    right: 10px;
}
.modal .img {
    width: 196px;
    height: 253px;
    border-radius: 8px;
    overflow: hidden;
}
.modal .txt {
    flex: 1;
    color: var(--black);
}
.modal .txt h4 {
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 140%;
}
.modal .txt p {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 140%;
    margin-bottom: 16px;
    margin-top: 4px;
}
#ourTeam-container .sec01 .modal .flex ul {
    display: block;
}
.modal .txt ul li {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 140%;
    list-style: disc;
}
.modal .txt ul li + li {
    margin-top: 8px;
}

/************************* our technology ******************************/

#tech-container #banner {
    background-image: url("/img/v3/tech_banner.jpg");
}
#tech-container #banner .txt h5 , #services-container #banner .txt h5{
    opacity: 0;
    animation: none;
}
#tech-container #sec01 {
    padding: 107px 0 263.69px;
    background: url("/img/v3/tech_bg.png") no-repeat top -100px center / 900px auto;
}
#tech-container #sec01 .wrap {
    display: flex;
    justify-content: center;
}
#tech-container .sec01Tt {
    gap: 23.75px;
    align-items: end;
    font-size: 3.6rem;
    font-weight: 500;
}

#tech-container .sec01Tt .right {
    flex: 1;
    line-height: 1.3;
}

#tech-container .con {
    max-width: 1560px;
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}

#tech-container .con ul {
    margin-top: 48px;
    display: flex;
    gap: 24px;
}

#tech-container .con ul li {
    flex: 1;
}

#tech-container .con ul li .box {
    color: #fff;
    padding: 0 24px;
    background: var(--color);
    border-radius: 8px;
    align-items: center;
    display: flex;
    gap: 20px;
    height: 133px;
}

#tech-container .con ul li .box span {
    font-size: 20px;
    font-weight: 600;
    line-height: 140%;
    letter-spacing: -0.02em;
    flex: 1;
}

#tech-container .con ul li p {
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    padding: 20px;
}

#tech-container #sec02 {
    position: relative;
}

#tech-container #sec02 .bg {
    position: absolute;
    top: 0;
    left: calc((100vw - 1330px) / 2 - 15px);
    width: 493px;
}

#tech-container #sec02 > div:not(.bg) .wrap > div {
    width: 50%;
}

#tech-container #sec02 > div:not(.bg) .wrap {
    display: flex;
    align-items: center;
    justify-content: right;
    height: 100%;
}

#tech-container #sec02 > div:not(.bg):nth-child(odd) {
    background: var(--color);
    color: #fff;
}

#tech-container #sec02 #tech01 {
    height: 580px;
    padding-top: 21.31px;
}

#tech-container #sec02 #tech01 ul {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin: 32px 0 28px;
}

#tech-container #sec02 #tech02 {
    height: 556px;
}

#tech-container #sec02 #tech03 {
    height: 587px;
}

#tech-container #sec02 #tech04 {
    height: 430px;
}

#tech-container #sec02 #tech05 {
    height: 527px;
}

#tech-container #sec02 #tech01 .wrap {
    align-items: baseline;
}

#tech-container #sec02 h4 {
    font-size: 3.2rem;
    font-weight: 600;
    margin-bottom: 20px;
}

#tech-container #sec02 p span , #tech-container #sec02 p{
    display: block;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    color: var(--black);
}
#tech-container #sec02 p span + span {
    margin-top: 8px;
}

#tech-container #sec02 > div:not(.bg):nth-child(odd) p ,
#tech-container #sec02 > div:not(.bg):nth-child(odd) p span{
    color: #fff;
}


/************************* services ******************************/

#services-container #banner {
    background-image: url("/img/v3/services_banner.jpg");
}

#services-container #banner h2 , #services-container #banner h5 {
    color: var(--color);
}

.servicesTxt {
    padding: 75px 20px 0;
}

.servicesTxt p {
    font-size: 20px;
    font-weight: 400;
    line-height: 150%;
    color: var(--black);
    max-width: 637px;
}

#services01 {
    padding-top: 270px;
    background: url("/img/v3/solution_bg.png") no-repeat bottom right / 599px auto;
}

#services-container .tt h3 {
    white-space: pre-line;
    line-height: 1.2;
}

#services-container .tt p {
    margin: 24px 0 64px;
    font-size: 20px;
    font-weight: 400;
    line-height: 150%;
    color: var(--black);
    width: 55%;
}
#services-container .tt p span + span {
    margin-top: 8px;
    line-height: 150%;
    display: block;
}

#services-container .flex {
    gap: 70px;
}

#services-container .left {
    font-size: 3.2rem;
    font-weight: 600;
}

#services-container .right {
    flex: 1;
    color: #fff;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

#services-container .right > div {
    padding: 32px 40px;
    border-radius: 8px;
    background: var(--color);
}

#services-container .right .sv01Tt {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
}

#services-container .right .sv01Tt span {
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 140%;
}

#services-container .right p {
    font-size: 20px;
    font-weight: 400;
    line-height: 150%;
}
#services02 , #services03 ,#services04 {
    padding-top: 260px;
}
#services05 {
    padding-top: 260px;
    margin-bottom: 280px;
}
#services05 h3 {
    line-height: 1.4;
    margin-bottom: 24px;
}
#services05 .tt span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 500;
    line-height: 150%;
}
#services05 .tt span +span {
    margin-top: 8px;
}
#services-container #services05 .tt p {
    margin: 0 0 20px;
}
#services-container #services05 {
    background: url("/img/v3/solution_bg02.png") no-repeat bottom left / 645px auto;
}
#services-container #services05 .flex {
    justify-content: space-between;
}

@media screen and (max-width: 500px) {
    .sec-bg h4 {
        white-space: normal;
    }
}