@charset "utf-8";

/*
 * File    : sub-about.css
 * Author  : STUDIO-JT
 *
 * SUMMARY :
 * ABOUT
 * HOVER
 */



/* **************************************** *
 * ABOUT
 * **************************************** */
/* INTRO */
.about-intro { padding: 40rem 0 93rem; }
.about-intro p { font-size: 30rem; line-height: 1.25; font-weight: 500; text-transform: uppercase; }
.about-intro p + p { margin-top: 30rem; }
.about-intro p > a { text-decoration: underline; text-underline-offset: 5rem; text-decoration-thickness: 2rem; }

/* ORGANIZATION */
.about-organization__list { width: 1202rem; height: 1235rem; position: relative; counter-reset: item; }
.about-organization__list > li { position: absolute; }
.about-organization__list > li:before { content: ''; position: absolute; width: 1px; height: 1px; background: no-repeat center / contain; z-index: -1; }

.about-organization__dot { display: block; width: 42rem; height: 42rem; }
.about-organization__dot > i { display: block; width: 100%; height: 100%; background: var(--color-black); border-radius: 50%; transition: opacity .3s, filter .3s; }
.about-organization__dot:before { content: counter(item); counter-increment: item; position: absolute; top: -2rem; right: calc(100% + 4rem); font-size: 17rem; font-weight: 500; line-height: 1.25; white-space: pre; }
.about-organization__list > li:has(.about-organization__profile) .about-organization__dot { cursor: pointer; }

.about-organization__profile { width: 300rem; padding: 20rem; position: absolute; top: 0; left: calc(100% + 10rem); z-index: 2; opacity: 0; visibility: hidden; transition: opacity .3s; }
.about-organization__profile:after{ content: ''; width: 10rem; height: 100%; position: absolute; top: 0; left: -10rem; }
.about-organization__profile:before { content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: var(--color-white); filter: blur(9rem); z-index: -1; }
.about-organization__profile > span { display: block; font-size: 18rem; font-weight: 500; }
.about-organization__profile > b { display: block; min-height: calc(35rem * 1.25 * 2); font-size: 35rem; font-weight: 500; line-height: 1.25; text-decoration: underline; text-underline-offset: 4rem; }
.about-organization__profile .jt-lazyload { margin-top: 20rem; padding-top: 86.92%; }
.about-organization--hover .about-organization__profile { opacity: 1; visibility: visible; }

.about-organization__list:has(> :nth-child(1)):not(:has(> :nth-child(2))) { height: 43rem; }
.about-organization__list:has(> :nth-child(2)):not(:has(> :nth-child(5))) { height: 178rem; }
.about-organization__list:has(> :nth-child(5)):not(:has(> :nth-child(10))) { height: 535rem; }
.about-organization__list:has(> :nth-child(10)):not(:has(> :nth-child(11))) { height: 682rem; }
.about-organization__list:has(> :nth-child(11)):not(:has(> :nth-child(14))) { height: 764rem; }
.about-organization__list:has(> :nth-child(14)):not(:has(> :nth-child(15))) { height: 858rem; }
.about-organization__list:has(> :nth-child(15)):not(:has(> :nth-child(16))) { height: 935rem; }
.about-organization__list:has(> :nth-child(16)):not(:has(> :nth-child(20))) { height: 1142rem; }

.about-organization__list > li:nth-child(1) { top: 1rem; left: 23.2%; }
.about-organization__list > li:nth-child(2) { top: 136rem; left: 1.1%; }
.about-organization__list > li:nth-child(2):before { width: 246rem; height: 138rem; top: -116rem; left: 20rem; background-image: url(../images/sub/about/organization-line-02.svg); }
.about-organization__list>li:nth-child(3) { top: 136rem; left: 23.2%; }
.about-organization__list > li:nth-child(3):before { width: 396rem; top: 21rem; left: -310rem; background-image: url(../images/sub/about/organization-line-03.svg); }
.about-organization__list > li:nth-child(4) { top: 76rem; left: 38.82%; }
.about-organization__list > li:nth-child(5) { top: 315rem; left: 23.2%; }
.about-organization__list > li:nth-child(5):before { width: 439rem; height: 441rem; top: -222rem; left: 21rem; background-image: url(../images/sub/about/organization-line-05.svg); }
.about-organization__list > li:nth-child(6) { top: 76rem; left: 58%; }
.about-organization__list > li:nth-child(6):before { width: 108rem; height: 114rem; top: 20rem; left: -86rem; background-image: url(../images/sub/about/organization-line-06.svg); }
.about-organization__list > li:nth-child(7) { top: 400rem; left: 57.1%; }
.about-organization__list > li:nth-child(7):before { width: 408rem; height: 465rem; top: -343rem; left: -386rem; background-image: url(../images/sub/about/organization-line-07.svg); }
.about-organization__list > li:nth-child(8) { top: 481rem; left: 67.4%; }
.about-organization__list > li:nth-child(8):before { width: 126rem; height: 81rem; top: -60rem; left: -103rem; background-image: url(../images/sub/about/organization-line-08.svg); }
.about-organization__list > li:nth-child(9) { top: 481rem; left: 86.2%; }
.about-organization__list > li:nth-child(9):before { width: 225rem; top: 20rem; left: -204rem; background-image: url(../images/sub/about/organization-line-09.svg); }
.about-organization__list > li:nth-child(10) { top: 640rem; left: 86.2%; }
.about-organization__list > li:nth-child(10):before { height: 160rem; top: -138rem; left: 20rem; background-image: url(../images/sub/about/organization-line-10.svg); }
.about-organization__list > li:nth-child(11) { top: 721rem; left: 96.5%; }
.about-organization__list > li:nth-child(11):before { width: 126rem; height: 81rem; top: -59rem; left: -104rem; background-image: url(../images/sub/about/organization-line-11.svg); }
.about-organization__list > li:nth-child(12) { top: 549rem; left: 23.2%; }
.about-organization__list > li:nth-child(13) { top: 549rem; left: 44.4%; }
.about-organization__list > li:nth-child(13):before { width: 257rem; top: 20rem; left: -236rem; background-image: url(../images/sub/about/organization-line-13.svg); }
.about-organization__list > li:nth-child(14) { top: 815rem; left: 44.4%; }
.about-organization__list > li:nth-child(14):before { height: 273rem; top: -246rem; left: 20rem; background-image: url(../images/sub/about/organization-line-14.svg); }
.about-organization__list > li:nth-child(15) { top: 892rem; left: 44.4%; }
.about-organization__list > li:nth-child(16) { top: 892rem; left: 6.5%; }
.about-organization__list > li:nth-child(16):before { width: 459rem; height: 223rem; top: 27rem; left: 19rem; background-image: url(../images/sub/about/organization-line-16.svg); }
.about-organization__list > li:nth-child(17) { top: 969rem; left: 23.2%; }
.about-organization__list > li:nth-child(18) { top: 969rem; left: 44.4%; }
.about-organization__list > li:nth-child(18):before { width: 257rem; top: 20rem; left: -236rem; background-image: url(../images/sub/about/organization-line-18.svg); }
.about-organization__list > li:nth-child(19) { top: 1099rem; left: 44.4%; }
.about-organization__list > li:nth-child(19):before { height: 129rem; top: -109rem; left: 20rem; background-image: url(../images/sub/about/organization-line-19.svg); }
.about-organization__list > li:nth-child(20) { top: 1192rem; left: 59.9%; }
.about-organization__list > li:nth-child(20):before { width: 185rem; height: 95rem; top: -74rem; left: -166rem; background-image: url(../images/sub/about/organization-line-20.svg); }

.about-organization__list > li:nth-child(n+8):nth-child(-n+11) .about-organization__profile { left: auto; right: calc(100% + 7rem); }

.about-organization--cat-branding .about-organization__list > li:not(.about-organization--branding) .about-organization__dot > i,
.about-organization--cat-logo .about-organization__list > li:not(.about-organization--logo) .about-organization__dot > i,
.about-organization--cat-graphic .about-organization__list > li:not(.about-organization--graphic) .about-organization__dot > i,
.about-organization--cat-edit .about-organization__list > li:not(.about-organization--edit) .about-organization__dot > i,
.about-organization--cat-space .about-organization__list > li:not(.about-organization--space) .about-organization__dot > i { opacity: 0.5; filter: blur(5rem); }
 
/* CERTIFICATE */
.about-certificate { display: flex; justify-content: end; margin-top: 150rem; }

.about-certificate__list { width: 602rem; padding-bottom: 20rem; border-bottom: 1px solid var(--color-black); }
.about-certificate__list > li { display: grid; grid-template-columns: 164rem 1fr; min-height: 46rem; padding: 5rem 0; }
.about-certificate__list > li > * { display: flex; align-items: center; }
.about-certificate__name { padding-left: 20rem; }
.about-certificate__name > p { font-size: 14rem; font-weight: 700; }

.about-certificate__list > li.about-certificate--instagram { padding-bottom: 25rem; margin-bottom: 16rem; border-bottom: 1px solid var(--color-black); }
.about-certificate__list > li.about-certificate--instagram .about-certificate__logo > a { display: block; width: 100%; }
.about-certificate__list > li.about-certificate--instagram .about-certificate__logo .jt-lazyload { width: 29rem; aspect-ratio: 29 / 29; }
.about-certificate__list > li.about-certificate--instagram .about-certificate__name { padding-left: 0; }
.about-certificate__list > li.about-certificate--instagram .about-certificate__name > a { display: inline-block; padding-left: 20rem; }
.about-certificate__list > li.about-certificate--instagram .about-certificate__name .jt-lazyload { width: 83rem; aspect-ratio: 83 / 26; }
.about-certificate__list > li.about-certificate--reddot .about-certificate__logo .jt-lazyload { width: 73rem; aspect-ratio: 73 / 39; }
.about-certificate__list > li.about-certificate--if .about-certificate__logo .jt-lazyload { width: 60rem; aspect-ratio: 60 / 29; }
.about-certificate__list > li.about-certificate--mss .about-certificate__logo .jt-lazyload { width: 139rem; aspect-ratio: 139 / 28; }
.about-certificate__list > li.about-certificate--pps .about-certificate__logo .jt-lazyload { width: 80rem; aspect-ratio: 80 / 28; }
.about-certificate__list > li.about-certificate--women .about-certificate__logo .jt-lazyload { width: 34rem; aspect-ratio: 34 / 35; }
.about-certificate__list > li.about-certificate--daegu .about-certificate__logo .jt-lazyload { width: 111rem; aspect-ratio: 111 / 26; }
.about-certificate__list > li.about-certificate--public .about-certificate__logo .jt-lazyload { width: 66rem; aspect-ratio: 66 / 19; }
.about-certificate__list > li.about-certificate--kidp .about-certificate__logo .jt-lazyload { width: 118rem; aspect-ratio: 118 / 20; }
.about-certificate__list > li.about-certificate--edc .about-certificate__logo .jt-lazyload { width: 104rem; aspect-ratio: 104 / 26; }
.about-certificate__list > li.about-certificate--koita .about-certificate__logo .jt-lazyload { width: 48rem; aspect-ratio: 48 / 29; }



/* **************************************** *
 * HOVER
 * **************************************** */
@media (hover: hover) and (pointer: fine) and (min-width: 861px) {

    /* ABOUT */
    .about-intro p > a:hover { font-weight: 700; }

}