@font-face {

    font-family: 'db_helvethaica';

    src: url('../font/db_helvethaica_x_thin_v3.2-webfont.woff2') format('woff2'),

        url('../font/db_helvethaica_x_thin_v3.2-webfont.woff') format('woff');

    font-weight: 100;

    font-style: normal;

}



@font-face {

    font-family: 'db_helvethaica';

    src: url('../font/db_helvethaica_x_li_v3.2-webfont.woff2') format('woff2'),

        url('../font/db_helvethaica_x_li_v3.2-webfont.woff') format('woff');

    font-weight: 300;

    font-style: normal;

}



@font-face {

    font-family: 'db_helvethaica';

    src: url('../font/db_helvethaica_x_v3.2-webfont.woff2') format('woff2'),

        url('../font/db_helvethaica_x_v3.2-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal;

}



@font-face {

    font-family: 'db_helvethaica';

    src: url('../font/db_helvethaica_x_bd_v3.2-webfont.woff2') format('woff2'),

        url('../font/db_helvethaica_x_bd_v3.2-webfont.woff') format('woff');

    font-weight: 500;

    font-style: normal;

}



@font-face {

    font-family: 'db_helvethaica';

    src: url('../font/db_helvethaica_x_blk_v3.2-webfont.woff2') format('woff2'),

        url('../font/db_helvethaica_x_blk_v3.2-webfont.woff') format('woff');

    font-weight: bold;

    font-style: normal;

}



.container {

    max-width: 575px;

}



.backgorund-person {

    background-image: url('../img/bg.png');

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center top;

    padding-bottom: 15px;

    display: flex;

    min-height: 100dvh;

    flex-direction: column;

    /* background-attachment: fixed; */

}



.backgorund-person.active {

    background-image: none;

}



.hero-header {

    position: fixed;

    left: 0;

    right: 0;

    margin: auto;

    max-width: 575px;

    padding: 0 15px;

    bottom: 15px;

    z-index: 999;

}



.super-header {

    background-color: #001D60;

    padding: 20px 25px 15px 25px;

    border-radius: 10px 10px 40px 40px;

    margin: 0 15px;

}



.nav-pills {

    margin: 0 -10px;

}



.nav-pills li {

    padding: 0 10px;

    width: calc(100%/4);

}



.nav-pills .nav-link {

    background-color: #fff;

}



.nav-pills .nav-link.active {

    background: linear-gradient(#0c63ac 0%, #00257b 100%);

}



.nav-pills .nav-link.active img {

    filter: brightness(0) invert(1);

}



.nav-pills .nav-link.active .icon svg {

    filter: brightness(0) invert(1);

}



.nav-pills .nav-item button {

    margin: auto;

    border: none;

    border-radius: 50%;

    padding: 0;

    height: 55px;

    width: 55px;

}



.nav-pills .nav-item button:focus {

    outline: none;

}





.nav-pills .nav-item .title {

    color: #fff;

    text-align: center;

    margin-top: 6px;

    font-size: 17px;

    font-weight: 400;

}





/* body */



/* section person */



.head-person img {

    width: 100%;

}



.information-person {

    --webkit-backdrop-filter: blur(30px);

    -webkit-backdrop-filter: blur(30px);

            backdrop-filter: blur(30px);

    background-color: rgb(255 255 255 / 80%);

    padding: 15px 30px 30px 30px;

    border-radius: 10px 10px 10px 10px;

    margin: -23% 20px 0px 20px;

    position: relative;

}





.information-person .neme-member {

    text-align: center;

    color: #192635;

}



.information-person .neme-member h1 {

    font-size: 38px;

    margin: 0;

    font-weight: 500;

    line-height: 1;

}



.information-person .neme-member h2 {

    font-size: 28px;

    font-weight: 500;

}



.information-person .line-ez {

    background-color: #1276C1;

    margin: auto;

    height: 1.5px;

    width: 75px;

    margin-top: 30px;

    margin-bottom: 20px;

}







.title-ps {

    display: table;

    width: 100%;

    margin-top: 10px;

}



.title-ps>div {

    display: table-cell;

    /* vertical-align: top; */

}



.title-ps .thumb {

    width: 30px;

}



.title-ps .thumb .icon-ps {

    text-align: center;

    width: 43px;

    height: 43px;

    background: linear-gradient(#011646 0%, #0f4b81 100%);

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

}



.title-ps .thumb .icon-ps svg {

    vertical-align: middle;

    width: 50%;

}



.title-ps .inner {

    padding-left: 14px;

    padding-top: 5px;

    font-size: 28px;

}



.title-ps .inner h4,

.title-ps .inner a {

    margin: 0;

    font-size: 26px;

    color: #192635;

    font-weight: 500;

    text-decoration: none;

    line-height: 1;

}









.qr-code {

    position: relative;

    text-align: center;

    margin-top: 40px;

}



.qr-code .wrapper-qrcode {

    display: inline-block;

    position: relative;

}





.qr-code .rotate-text {

    font-size: 19px;

    color: #fff;

    transform: rotate(270deg);

    position: absolute;

    left: 0;

    bottom: 0;

    margin-left: -90px;

    margin-bottom: 60px;

    font-weight: bold;

}





.qr-code .qr-code-title {

    font-size: 19px;

    color: #fff;

    font-weight: 400;

}



.section-person .qr-code {

    margin-top: 30px;

    margin-bottom: 145px;

}



.qr-code-thumb {

    padding: 10px;

    background-color: #fff;

    border-radius: 20px;

}



.qr-code-thumb .cover {

    width: 135px;

    padding-bottom: 100%;

}



/* .head-person .cover-head{

    max-width: 575px;

    padding-bottom: 100%;

}



.cover-head .cover-head-img{

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

} */





/* section company */



.section-company .head-bg-company img {

    width: 100%;

}



.head-bg-company {

    background-image: url(../img/company-bg.png);

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center;

    padding: 30px 15px 130px 15px;

}



.head-cpn .qr-code .rotate-text {

    font-size: 19px;

    color: #707070;

    font-weight: bold;

}



.head-cpn .qr-code .qr-code-title {

    font-size: 19px;

    color: #707070;

    font-weight: 400;

}



.section-company .information-company {

    --webkit-backdrop-filter: blur(30px);

    -webkit-backdrop-filter: blur(30px);

            backdrop-filter: blur(30px);

    background-color: rgb(255 255 255 / 80%);

    padding: 15px 30px 30px 30px;

    border-radius: 10px 10px 10px 10px;

    margin: -120px 20px 160px 20px;

    position: relative;

}



.information-company .neme-member {

    color: #192635;

}



.information-company .neme-member h1 {

    font-size: 34px;

    margin: 0;

    font-weight: 500;

    line-height: 1;

}



.information-company .neme-member h2 {

    font-size: 25px;

    font-weight: 500;

}



.information-company .title-ps {

    width: 100%;

    margin-top: 10px;

}



.information-company .title-ps .icon-wwp img {

    width: 70px;

    margin-top: 10px;

}





/* TAEM */



/* .section-team .bg-team{

    background-image: url(../img/company-bg.png);

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center;

    padding: 30px 15px 215px 15px;

} */



.swiper-container {

    width: 100%;

    height: 300px;

    margin: 20px auto;

}



.swiper-slide-container {

    text-align: center;

    height: auto;

    max-width: 600px;

    margin: auto;

    /* Center slide text vertically */

    display: -webkit-box;

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    -webkit-justify-content: center;

    justify-content: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    -webkit-align-items: center;

    align-items: center;

}



.gallery-top {

    height: 80%;

    width: 100%;

}



.gallery-thumbs {

    height: 20%;

    box-sizing: border-box;

    padding: 60px 0 0 0px;

}



.gallery-thumbs .swiper-slide {

    width: 20%;

    height: 100%;

    opacity: 0.4;

}



.gallery-thumbs .swiper-slide-active {

    opacity: 1;

}





.gallery-thumbs .swiper-wrapper {

    transition-duration: 0ms;

}



.cover-identification {

    width: 65px;

    padding-bottom: 100%;

}



.cover-team {

    border: 3px solid transparent;

    background-color: #ffff;

    border-radius: 50%;

    opacity: 1;

    padding: 2px;

}



.gallery-thumbs .swiper-slide-active .cover-team {

    border-color: #1276C1;

}







/* .cover-team:active{

    border: 3px solid #1276C1;

} */



.identification-title {

    line-height: 20px;

    font-size: 20px;

    font-weight: bold;

    color: #192635;

    opacity: 0;

    transition: 0.5s;

    margin-top: 10px;

}



.swiper-slide-active .identification-title {

    opacity: 1;

}



.team-wrapper {

    background-color: #F2F3F7;

    width: 100%;

    border-radius: 11px;

    margin-bottom: 20px;

}



.team-share {

    width: 100%;

    border-radius: 11px;

    background: linear-gradient(#0c63ac 0%, #00257b 100%);

    margin-bottom: 115px;

    padding: 10px;

    font-size: 30px;

    font-weight: bold;

    color: #fff;

    font-family: 'db_helvethaica';

    text-decoration: none;

}





.team-wrapper .title-ps .thumb .icon-ps {

    background: none;

}



.team-wrapper .inner-team {

    line-height: 24px;

}



.team-wrapper .title-top {

    display: flex;

    font-size: 22px;

    font-weight: 500;

}



.team-wrapper .title-below ,

.team-wrapper .title-below a {

    display: flex;

    font-size: 22px;

    font-weight: 400;

    color: #707070;

    text-decoration: none;

}



.team-wrapper .title-ps {

    display: table-cell;

    width: 100%;

    padding-bottom: 10px;

    padding-left: 5px;

}



.identification-img {

    width: max-content;

    margin: auto;

}





.pointer-events-none {

    pointer-events: none;

}



.team-below {

    width: 100%;

    padding: 40px;

    margin-top: -155px;

}



.team-wrapper .icon-ps {

    position: relative;

    top: 4px;

}



.section-team .head-bg-company {

    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 120%),url(../img/company-bg.png);

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center;

    padding: 30px 15px 100px 15px;

}





/* team รวม */



.item-list .link .cover {

    width: 100%;

    padding-bottom: 77%;

}



.section.-II .container {

    padding: 0 15px;

}



.title-team-wwp {

    text-align: center;

    font-size: 30px;

    font-weight: bold;

    color: #192635;

}



.team-wwp .head-bg-company {

    padding: 30px 15px 140px 15px;

}



.team-wwp .item-list {

    margin-top: -115px;

}



.team-wwp .item-list li {

    width: 100%;

    margin-bottom: 15px;

}



.team-wwp .item-list li .link {

    background-color: #ffff;

    display: block;

    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

    border-radius: 10px;

    text-decoration: none;

    overflow: hidden;



}



.team-wwp .item-list li .inner {

    padding: 30px 20px;

    height: 100%;

}



.team-wwp .item-list li .inner .name-th{

    font-size: 22px;

    font-weight: bold;

    color: #192635;

    line-height: 1;

}



.team-wwp .item-list li .inner .name-en{

    font-size: 14px;

    font-weight: bold;

    color: #192635;

}



.team-wwp .item-list li .inner .title-wwp{

    font-size: 16px;

    font-weight: 400;

    color: #192635;

}



.team-wwp .item-list li .inner .line-ez {

    background-color: #1276C1;

    height: 1.5px;

    width: 30px;

    margin: 10px 0;

}



.section.-II {

    max-width: 575px;

    margin: auto;

}



/* modifly */



.information-company .title-ps.title-wwp {

    margin-bottom: 30px;

}