/*
Theme Name: kmuart-exhibition-theme
Text Domain: kmuart-exhibition-theme
Version: 1.0
Tested up to: 6.0
Requires at least: 4.7
Requires PHP: 5.2.4
Description: kmuart-exhibition-theme web site
Author URI: fshwanjun@gmail.com
Theme URI: fshwanjun@gmail.com
License: kmuart-exhibition-theme
License URI: kmuart-exhibition-theme
*/
:root {
    --color-info: #113E2F;
    --color-exhibition: #47278B;
    --color-project: #6A0F1C;
    --color-publish: #F0832C;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: none;
}

/* import font */
html, body {
    font-size: 16px;
    /* 500, 700 */
    font-family: futura-pt, pretendard, sans-serif;
    /* 500, 600, 700 */
    font-weight: 500;
    font-style: normal;
    font-size: 16px;
    line-height: 1.6em;
    word-break: keep-all;
    cursor: none;
    /* background-color: white; */
}

/* a 초기화 */
a {
    text-decoration: none;
    color: black;
    cursor: none;
}
body{
    position: absolute;
    top: 0;
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
}
body main {
    overflow: hidden;
}
#cursor{
    position: fixed;
    z-index: 200;
    width: 20px;
    height: 20px;
    background-color: #e7cacad6;
    border-radius: 20px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    mix-blend-mode: difference;
    border: 1px solid white;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
}
#cursor img {
    display: none;
}

#bg{
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background-image: url("./assets/bg.png");
    background-position: center;
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
}
.landing{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    opacity: 1;
}

#bg img {
    position: absolute;
}
.landing img {
    position: absolute;
}

#bg img.img {
    width: 45vh;
    min-width: 300px;
}
.landing img.img {
    width: 45vh;
    min-width: 300px;
}
img.img.lump{
    animation: ani ease-in-out 3.6s infinite alternate;
}
img.img.incar{
    animation: ani ease-in-out 3.2s infinite alternate;
}
img.img.plate{
    animation: ani ease-in-out 4s infinite alternate;
}

img.lump{
    top: 10vh;
    left: 10vw;
}
img.incar{
    bottom: 28vh;
    right: 20vw;
}
img.plate{
    bottom: 10vh;
    left: 30vw;
}


.landing img.title-svg {
    height: 10vh;
    min-width: 300px;
    z-index: 60;
}
.landing img.title-svg.lump{
    top: 15vh;
    left: 20vw;
}
.landing img.title-svg.incar{
    bottom: 43vh;
    right: 12vw;
}
.landing img.title-svg.plate{
    bottom: 10vh;
    left: 36vw;
}

@keyframes ani {
    0%{
        transform: translate(0,0) rotate(-4deg);
    }
    100%{
        transform: translate(0,15px) rotate(2deg);
    }
}
.grid{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 24px;
    padding: 0 32px;
}
.fixed{
    position: fixed;
    width: 100vw;
    bottom: 32px;
}
.search-wrap {
    width: 100%;
    grid-column: 11/13;
    font-family: pretendard, sans-serif;
    /* 500, 600, 700 */
    font-weight: 500;
}
.search-wrap input[type="text"]{
    width: 100%;
    border-radius: 35px;
    background-color: white;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25);
    font-size: 1rem;
    padding: 0.4em 1em;
    border: none;
}
.search-wrap input[type="text"]:focus{
    border: 1px solid rgba(0, 0, 0, 0.4);
    outline: none;
}

.search-wrap .change-wrap{
    border-radius: 12px;
    background-color: white;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25);
    padding-bottom: 1em;
}
.search-wrap .change-wrap>a{
    display: block;
    text-align: center;
    font-size: 1.3rem;
    line-height: 1.7em;
    color: #c2c2c2;
}
.search-wrap .change-wrap>a:hover{
    color: #000;
}
.search-wrap .change-wrap .change-btn{
    position: relative;
    border-radius: 12px;
    background-color: white;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25);
    margin: 8px 0 1em;
    display: flex;
}
.search-wrap .change-wrap .change-btn>a{
    position: relative;
    z-index: 15;
    width: 50%;
    text-align: center;
    transition: all 0.1s ease-out 0.1s;
}
.checked{
    color: #fff;
}
.hide { 
    display: none;
    opacity: 0;
    pointer-events: none; /* 요소가 숨겨진 후에는 이벤트를 비활성화 */
    transition: opacity 0.3s ease;
}
#checked{
    z-index: 14;
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    border-radius: 12px;
    background-color: black;
    color: white;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25);
    transition: left 0.3s ease-in-out;
}
#selected{
    color: black;
}
header {
    position: fixed;
    z-index: 100;
    top: 0;
}
header #b-box {
    background-color: #000;
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}
header #logo {
    display: inline-block;
    font-size: 2rem;
    color: black;
    position: fixed;
    top: 24px;
    left: 32px;
    line-height: 1.2em;
}
header #logo:hover b{
    display: inline-block;
}
header #logo b{
    display: none;
}
header #logo .mobile{
    display: none;
}
header .menu-wrap {
    position: fixed;
    top: 24px;
    right: 32px;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
header .menu-wrap li{
    margin-bottom: 1em;
    display: inline;
}
header .menu-wrap li:hover a{
    background-color: #000;
    color: #fff;
    box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.5);
    transform: translate(0, -2px);
}
header .menu-wrap li a{
    display: inline-block;
    font-size: 1.2rem;
    background-color: white;
    /* border: 1px solid black; */
    border-radius: 50px;
    padding: 8px 20px;
    color: black;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25);
}
.insta{
    display: inline;
    width: 40px;
}
.insta svg{
    width: 100%;
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.4));
}
.insta svg:hover path{
    fill: black;
}


.container {
    /* margin: 80px 0; */
    grid-column: 2/11;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap; /* 넘칠 경우 줄바꿈 */
    gap: 12px;
    align-items: start;
    padding: 80px 0 32px;
}
.container .item{
    flex: calc(33.333% - 8px); /* 각 아이템이 3분할로 나눠지도록 함 (12px 갭을 제외한 크기로 조절) */
    max-width: calc(33.333% - 8px); /* 각 아이템의 최대 크기 제한 (갭 포함) */
    position: relative;
    text-align: right;
    opacity: 1;
    transition: all 1s ease-in-out;
}
.container .item:hover > img{
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.5);
    transform: translate(0, -2px);
}
.container .item:hover .sticker-wrap img{
    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.5));
    transform: translate(0, -2px);
}
.container .item:hover .sticker-wrap .sticker-white{
    display: none;
}
.container .item:hover .sticker-wrap .sticker-black{
    display: block;
}
.container .item>img{
    background-color: rgb(255, 255, 255);
    border-radius: 12px;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25);
}

.container .item h2 .sticker-wrap{
    position: absolute;
    top: -15px;
    left: 0;
}
.container .item h2 .sticker-wrap img{
    width: 30px;
    filter: drop-shadow(0px 2px 2px #1d1d1f63);
    transform: translate(0, 0);
    /* cursor: pointer; */
}
.container .item h2{
    position: relative;
    font-size: 1.3rem;
    padding: 0.5em 0 0.1em 2em;
    word-break: keep-all;
}
.container .item h3{
    padding-bottom: .5em;
}

#single{
    /* top: 120px; */
    position: fixed;
    width: 100vw;
    padding: 72px 32px;
    height: 100vh;
    z-index: 5;
    align-content: start;
}

iframe {
    width: 100%;
}
.title-wrap{
    grid-column: 2/6;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 24px;
    vertical-align: baseline;
    margin-bottom: 32px;
    align-items: baseline
}
.title-wrap h1{
    display: inline;
    font-size: 2.5rem;
    line-height: normal;
    grid-column: 1/4;
    word-break: keep-all;
}
.title-wrap h2{
    display: inline;
    font-size: 1.6rem;
    line-height: normal;
    text-align: right;
}
.text-wrap {
    grid-column: 2/6;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(3px);
    /* height: 70vh; */
    max-height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 16px 32px;
    font-family: pretendard, sans-serif;
}
.text-wrap p{
    padding-bottom: 1em;
}


#img-section{
    width: 100vw;
    padding: 72px 32px 64px;
    /* margin-top: 80px; */
}
#img-section .title-wrap {
    grid-column: 2/6;
    opacity: 0;
    visibility: hidden;
}
#img-section table {
    grid-column: 6/7;
    opacity: 0;
    visibility: hidden;
}
.img-wrap {
    grid-column: 6/11;
    z-index: 15;
    display: flex;
    
    flex-direction: column;
}

figcaption {
    font-size: 0.9rem;
    line-height: 1.2em;
    text-align: center;
}
.img-wrap figure {
    margin-bottom: 24px;
}


figure img{
    cursor: zoom-in;
}

/* popup-img */
.popup-img {
    position: fixed;
    display: flex;
    justify-content: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(3px);
    overflow: hidden;
    z-index: 100;
    cursor: zoom-out;
}
.popup-box {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 55px;
    width: calc(100% - 60px);
    height: calc(100vh - 110px);
}
.popup-img .popup-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: zoom-out;
}


#item-2 {
    top: 300px;
    left: 400px;
}

.item-wrap {
    position: absolute;
    top: 200px;
    left: 200px;
    /* cursor: pointer; */
}
.item-wrap .sticker-wrap {
    position: absolute;
    z-index: 10;
    animation: rotate 30s linear infinite;
    /* cursor: pointer; */
    display: inline-block;
    width: max-content;
}
.item-wrap .hover-img {
    display: none;
    position: absolute;
    background-color: #113E2F;
    width: 200px;
    left: 0;
    bottom: 0;
    border-radius: 8px;
}
.item-wrap:hover .hover-img{
    display: block;
    box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.5);
    z-index: 40;
}
.item-wrap:hover .sticker-wrap{
    animation-play-state: paused;
    z-index: 45;
}
.item-wrap:hover .sticker-wrap .sticker-white{
    display: none;
}
.item-wrap:hover .sticker-wrap .sticker-black{
    display: block;
}
.sticker-wrap img {
    width: 30px;
    position: absolute;
    filter: drop-shadow(0px 2px 2px #1d1d1f63);
    transform: translate(-50%, -50%);
    /* cursor: pointer; */
}
.sticker-wrap .sticker-white {
    display: block;
    /* cursor: pointer; */
}
.sticker-wrap .sticker-black {
    display: none;
    /* cursor: pointer; */
}

@keyframes rotate {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

#about {
    margin-top: 80px;
    padding: 20px 32px 64px;
}
.about-fixed{
    position: fixed;
    width: 100vw;
    top: 50%;
    transform: translate(0, -50%);
}
.poster-img{
    grid-column: 2/6;
    width: 100%;
    cursor: zoom-in;
}
#about .about-text{
    grid-column: 7/11;
    width: 100%;
}
#about .about-text h1{
    font-size: 2.8rem;
    line-height: 1em;
    padding-bottom: 0.5em;
}
#about .about-text h2{
    font-size: 1.2rem;
    line-height: 1.5em;
    padding-bottom: 1em;
    padding-left: 32px;
    letter-spacing: -0.3px;
    word-spacing: -0.3px;
}
#about .about-text .text-wrap{
    height: auto;
    overflow: hidden;
}
strong{
    font-weight: 700;
}

.kmu-logo{
    position: fixed;
    right: 32px;
    bottom: 24px;
    width: 140px;
    display: none;
}
.left-info{
    position: fixed;
    left: 32px;
    bottom: 24px;
}



.about-text .grid-info{
    width: 100%;
    display: grid;
    column-gap: 24px;
    grid-template-columns: repeat(7, 1fr);
}

.about-text .grid-info .type-name {
    grid-column: 1/3;
    font-weight: 700;
    line-height: 1.3em;
}

.about-text .grid-info .type-desc {
    grid-column: 3/8;
    line-height: 1.3em;
}


#support {
    margin-top: 80px;
}
#support h1 {
    padding-bottom: 16px;
    font-size: 3rem;
    grid-column: 2/11;
    line-height: 2em;
}
#support .support-wrap{
    grid-column: 2/11;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}
#support .support-wrap .support-item{
    width: calc(50% - 8px);
    padding: 2rem;
    background-color: #fff;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25);
    border-radius: 16px;
    margin-bottom: 16px;
}
#support .support-wrap .support-item h2 {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 2em;
    border-bottom: 1px solid black;
    margin-bottom: 1em;
}
#support .support-wrap .support-item a {
    text-decoration: underline;
    padding-right: 1em;
}
#support .support-wrap .support-item p {
    padding: 0 0 1em 0;
}
#support .support-wrap .support-item img{
    width: 100%;
    max-width: 200px;
}

#contact > .container {
    grid-column: 2/11;
    flex-direction: column;
    flex-wrap: nowrap;
}
#contact > .container > h1 {
    font-size: 3rem;
    line-height: 2em;
}
#contact > .container > .contact-wrap {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(9, 1fr);
    column-gap: 24px;
    margin-bottom: .5em;
    border-bottom: 1px solid black;
}
#contact > .container > .contact-wrap .ctct-name {
    grid-column: 1/3;
    z-index: 10;
    border-bottom: 1px solid rgba(0, 0, 0, 0);
}
#contact > .container > .contact-wrap .ctct-text {
    grid-column: 3/6;
    z-index: 10;
    border-bottom: 1px solid rgba(0, 0, 0, 0);
}
#contact > .container > .contact-wrap .ctct-link {
    grid-column: 6/10;
    z-index: 10;
    border-bottom: 1px solid rgba(0, 0, 0, 0);
}
#contact > .container > .contact-wrap .ctct-link span,
#contact > .container > .contact-wrap .ctct-link a{
    padding-right: 1rem;
}
#contact > .container > .contact-wrap .ctct-link a:hover{
    text-decoration: underline;
}
#contact > .container > .contact-wrap .ctct-name:hover{
    text-decoration: underline;
}

#contact > .container > .contact-wrap:hover > *{
    backdrop-filter: blur(3px);
    background-color: rgba(255, 255, 255, 0.5);
}
#contact > .container > .contact-wrap:hover .follow-img {
    display: block;
}
.follow-img {
    display: none;
    position: absolute;
    z-index: 5;
    pointer-events: none;
    border-radius: 4px;
    transform: translate(0, -50%);
}

@media (max-width:1100px) { 
    #cursor{
        display: none;
    }
    html, body{
        font-size: 14px;
    }
    header ol.menu-wrap{
        flex-direction: row;
        align-items: flex-end;
        flex-wrap: wrap;
        top: 20px;
        right: 16px;
        justify-content: flex-end;
        width: 70vw;
        gap: 8px;
    }
    header #logo{
        position: relative;
        top: 20px;
        left: 16px;
    }
    header #logo:hover .mobile{
        display: block;
    }
    .insta{
        display: flex;
        width: 32px;
        display: none;
    }
    header .menu-wrap li{
        position: relative;
        margin-bottom: 0;
    }
    header .menu-wrap li a {
        padding: 4px 12px;
    }
    .left-info{
        left: 16px;
        bottom: 20px;
    }
    .kmu-logo{
        right: 16px;
        bottom: 20px;
    }
    .grid{
        column-gap: 12px;
        padding: 0 12px;
    }
    #single{
        padding: 122px 16px 12px;
        height: auto;
        position: relative;
    }
    .title-wrap{
        grid-column: 1/13;
    }
    .text-wrap{
        grid-column: 1/13;
        overflow: hidden;
        font-size: 1rem;
        padding: 16px 24px;
    }
    #img-section{
        padding: 12px 16px 64px;
    }
    #img-section .title-wrap,
    #img-section table {
        display: none;
    }
    .img-wrap{
        grid-column: 1/13;
    }
    /* works */
    .container{
        grid-column: 1/13;
        padding: 140px 0 32px;
        justify-content: space-between;
    }
    .container .item{
        flex: calc(50% - 8px);
        max-width: calc(50% - 8px);
    }
    .sticker-wrap img{
        width: 24px;
    }
    .fixed{
        z-index: 20;
        bottom: 0;
        display: none;
    }
    .search-wrap{
        grid-column: 1/13;
    }
    #about{
        margin-top: 0;
    }
    .about-fixed {
        position: relative;
        transform: none;
        padding-top: 110px;
        top: 0;
    }
    .poster-img {
        grid-column: 1/13;
    }
    #about .about-text {
        margin-top: 16px;
        grid-column: 1/13;
    }
    #about .about-text h1{
        /* padding-left: 16px; */
        font-size: 2.4rem;
    }
    #about .about-text h2{
        padding-left: 0;
        font-size: 1rem;
        padding-bottom: 2em;
    }
    .about-text .grid-info{
        column-gap: 8px;
    }
    .about-text .grid-info .type-name{
        grid-column: 1/4;
    }
    .about-text .grid-info .type-desc {
        grid-column: 4/8;
    }
    #contact > .container{
        grid-column: 1/13;
        padding: 72px 0 32px;
    }
    #contact > .container > .contact-wrap{
        column-gap: 8px;
        border-bottom: none;
        margin-bottom: 1em;
        row-gap: 4px;
    }
    #contact > .container > .contact-wrap .ctct-name{
        grid-column: 1/6;
        order: 3;
    }
    #contact > .container > .contact-wrap .ctct-link{
        grid-column: 6/13;
        order: 3;
    }
    #contact > .container > .contact-wrap .ctct-text{
        grid-column: 2/13;
        order: 2;
        padding: 2px 12px;
        background-color: rgba(255, 255, 255, 0.95);
        box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25);
        backdrop-filter: blur(3px);
        border-radius: 8px 8px 8px 0;
    }
    .follow-img{
        display: block;
        order: 1;
        width: 100%;
        grid-column: 1/2;
        position: relative;
        transform: none;
    }

    header #b-box {
        width: 16px;
        height: 16px;
    }

    img.img {
        width: 40vh;
        min-width: 200px;
    }
    
    img.lump{
        top: 2vh;
        left: 0vw;
    }
    img.incar{
        bottom: 28vh;
        right: 2vw;
    }
    img.plate{
        bottom: 7vh;
        left: 8vw;
    }
    
    .landing img.title-svg {
        display: none;
    }
    #support h1{
        grid-column: 1/13;
    }
    #support .support-wrap{
        grid-column: 1/13;
        flex-direction: column;
    }
    #support .support-wrap .support-item {
        width: 100%;
    }
    #support .support-wrap .support-item img{
        max-width: 100%;
    }
}