@charset "utf-8";

/*
 * File    : sub-network.css
 * Author  : STUDIO-JT
 *
 * SUMMARY :
 * COMPONENT 
 * CUSTOM
 * HOVER
 */



/* **************************************** *
 * COMPONENT
 * **************************************** */
/* SWITCHER */
.network-switcher { display: flex; align-items: center; justify-content: center; gap: 2rem; margin-bottom: 20rem; }
.network-switcher a { display: block; min-width: 67rem; padding: 5rem; font-size: 15rem; line-height: 1.6; font-weight: 700; letter-spacing: var(--letter-spacing-01); text-align: center; color: rgba(255, 255, 255, .5); border-radius: var(--border-radius-06); transition: color .3s, background-color .3s; }
.network-switcher a.network-switcher--current { color: #181B13; background: var(--color-white); }

/* SOCIAL */
.network-social { position: absolute; right: 27rem; bottom: 112rem; }
.network-social__item { display: flex; align-items: center; justify-content: center; width: 66rem; height: 66rem; background: var(--color-white); border-radius: 50%; transition: background-color .3s; }
.network-social__item > .jt-icon { width: 35rem; }

/* OVERVIEW */
.network-overview { background: var(--color-white); }
.network-overview__inner { --clip-horizontal-space: 0%; position: relative; -webkit-clip-path: inset(0 var(--clip-horizontal-space) 0 var(--clip-horizontal-space) round 0); clip-path: inset(0 var(--clip-horizontal-space) 0 var(--clip-horizontal-space) round 0); }

.network-overview__intro { background: var(--color-quaternary); }

/* MILESTONES */
.network-milestones__chart { display: flex; align-items: flex-start; justify-content: space-between; padding: 160rem 0; border-bottom: 2rem solid var(--color-primary); }
.network-milestones__chart > li { text-align: center; }
.network-milestones__chart > li > b { color: var(--color-primary); }
.network-milestones__chart > li > p { margin-top: 20rem; }

/* GREETING (GRADIENT WRAP) */
.network-greeting { position: relative; }
.network-greeting:before { content: ''; width: 100%; height: calc(100% - 60rem); position: absolute; left: 0; bottom: 0; background: linear-gradient(180deg, #FFF 0%, #EBEEFF 100%); }

/* CEO */
.network-ceo { padding-top: 160rem; }

.network-ceo__inner { display: grid; grid-template-columns: 1fr 1.932fr 1.629fr; gap: 60rem; }

.network-ceo__message { display: flex; flex-direction: column; gap: 32rem; justify-content: space-between; }
.network-ceo__message-note { display: flex; flex-direction: column; gap: 32rem; }
.network-ceo__message-sign { display: flex; align-items: flex-end; justify-content: flex-end; gap: 12rem; }
.network-ceo__message-sign .jt-lazyload { mix-blend-mode: darken; }

.network-ceo__picture { border-radius: var(--border-radius-04); overflow: hidden; }
.network-ceo__picture .jt-lazyload { padding-top: 124%; }

/* GALLERY */
.network-gallery { padding: 260rem 0; position: relative; }

.network-gallery__picture { border-radius: var(--border-radius-03); overflow: hidden; }
.network-gallery__picture .jt-lazyload { padding-top: 100%; }
.network-gallery__picture:nth-child(1) { width: 385rem; }
.network-gallery__picture:nth-child(2) { width: 446rem; margin-left: auto; margin-top: -31rem; }
.network-gallery__picture:nth-child(2) .jt-lazyload { padding-top: 139.01%; }
.network-gallery__picture:nth-child(3) { width: 600rem; margin-left: -200rem; margin-top: -113rem; border-radius: 0 var(--border-radius-03) var(--border-radius-03) 0; }
.network-gallery__picture:nth-child(3) .jt-lazyload { padding-top: 113.33%; }
.network-gallery__picture:nth-child(4) { width: 400rem; margin-left: auto; margin-right: -200rem; margin-top: -88rem; border-radius: var(--border-radius-03) 0 0 var(--border-radius-03); }
.network-gallery__picture:nth-child(5) { width: 446rem; margin-top: -50rem; }
.network-gallery__picture:nth-child(5) .jt-lazyload { padding-top: 139.01%; }
.network-gallery__picture:nth-child(6) { width: 600rem; margin-left: auto; margin-top: -263rem; }
.network-gallery__picture:nth-child(7) { width: 400rem; margin-left: -200rem; margin-top: -59rem; border-radius: 0 var(--border-radius-03) var(--border-radius-03) 0; }

.network-gallery__typo { width: 100%; height: 100%; position: absolute; top: 62rem; left: 0; }
.network-gallery__typo-inner { display: flex; align-items: center; width: 100%; height: var(--section-fvh); text-align: center; color: var(--color-primary); }

/* CORPORATION */
.network-corporation { padding-top: 160rem; }

.network-corporation__title { padding-bottom: 31rem; margin-bottom: 48rem; border-bottom: 1px solid var(--color-gray-500); }

.network-corporation__list { display: flex; gap: 24rem; }
.network-corporation__list > li { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 80rem; padding: 32rem 32rem 52rem; position: relative; background: var(--color-bg-200); }
.network-corporation__list-name > p { margin-top: 8rem; color: var(--color-gray-800); }
.network-corporation__list-info { display: flex; flex-direction: column; gap: 17rem; }
.network-corporation__list-info > li { display: flex; justify-content: space-between; align-items: center; gap: 16rem; padding-bottom: 16rem; color: var(--color-gray-800); border-bottom: 1px solid var(--color-gray-400); }



/* **************************************** *
 * CUSTOM
 * **************************************** */
/* VIETNAM */
body.page-template-network-vietnam .network-ceo__message-sign > b { padding-bottom: 6rem; }
body.page-template-network-vietnam .network-ceo__message-sign .jt-lazyload { width: 110rem; aspect-ratio: 110 / 76; }

/* INDONESIA */
body.page-template-network-indonesia .network-ceo__message-sign .jt-lazyload { width: 156rem; aspect-ratio: 156 / 99; }

/* CHINA */
body.page-template-network-china .network-ceo__message-sign .jt-lazyload { width: 88rem; aspect-ratio: 88 / 88; }



/* **************************************** *
 * HOVER
 * **************************************** */
@media (hover: hover) and (pointer: fine) {

    /* COMPONENT */
    .network-switcher a:not(.network-switcher--current):hover { color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .2); }

    .network-social a:hover { background: var(--color-gray-300); }

}