@charset "utf-8";

@font-face {
    font-family: 'ChosunIlboMyungjo';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Chosunilbo_myungjo.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

@font-face {
	font-family:"warbler-deck";
	src:url("https://use.typekit.net/af/1ce072/0000000000000000775c2ef1/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/1ce072/0000000000000000775c2ef1/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/1ce072/0000000000000000775c2ef1/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
	font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
	}

:root{
	--kof:ChosunIlboMyungjo;
	--enf:warbler-deck;
}


.top_wrap{width: 100%; height: 1170px; display: flex; align-items: center; justify-content: center; padding-top: 180px;}

.top_wrap .top_box{
    width: 1760px; height: 912px; position: relative;
}

.image_grid_wrap { width: 1760px; height: 912px; position: relative; overflow: hidden; }
.image_grid_wrap img { position: absolute; z-index: 95;}

.image_grid_wrap .img_01 { width: 238px; height: 317px; left: 1403px; top: 436px; aspect-ratio: 238/317;}
.image_grid_wrap .img_02 { width: 452px; height: 302px; left: -13px; top: 0px; aspect-ratio: 226/151; }
.image_grid_wrap .img_03 { width: 302px; height: 196px; left: 199px; top: 617px; aspect-ratio: 151/98;}
.image_grid_wrap .img_04 { width: 238px; height: 317px; left: 781px; top: 218px; aspect-ratio: 238/317;}

/* 
@media(max-width:1200px){
    .image_grid_wrap { width: 93.75%; height: 912px; position: relative; overflow: hidden; }
    .image_grid_wrap .img_01 { width: 238px; height: 317px; left: unset; right: 0; top: 436px; aspect-ratio: 238/317;}
    .image_grid_wrap .img_02 { width: 452px; height: 302px; left: 0; top: 0px; aspect-ratio: 226/151; }
    .image_grid_wrap .img_03 { width: 302px; height: 196px; left: 0%; top: 617px; aspect-ratio: 151/98; }
    .image_grid_wrap .img_04 { width: 238px; height: 317px; right: 50%; top: 50%; aspect-ratio: 238/317; transform: translate(-155%, -35%);}
} */


 @media(max-width:1760px){

    .top_wrap{
        width: 100%;
        height: 66.48vw;        /* 1170 / 1760 * 100 */
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 180px;
    }
    .image_grid_wrap{
        position: relative;
        width: 93.75%;
        margin: 0 auto;
        height: 66.48vw;
    }
    
    .image_grid_wrap .img_01{
        width: 18vw;
        height: 22vw;
        left: 75.72vw;
        top: 25.77vw;
        aspect-ratio: 238/317;
    }
    
    .image_grid_wrap .img_02{
        width: 33vw;
        height: 24vw;
        left: -0.74vw;
        top: 0vw;
        aspect-ratio: 226/151;
    }
    
    .image_grid_wrap .img_03{
        width: 24vw;
        height: 18vw;
        left: 11.31vw;
        top: 35.06vw;
        aspect-ratio: 151/98;
    }
    
    .image_grid_wrap .img_04{
        width: 21vw;
        height: 25vw;
        left: 44.38vw;
        top: 12.39vw;
        aspect-ratio: 238/317;
    }
}


/* @media(max-width:1024px){
    .image_grid_wrap { width: 93.75%; height: 912px; position: relative; overflow: hidden; }
    .image_grid_wrap .img_01 {all:unset; width: 100%; height: 200px; top: 0px; filter: grayscale(100%);}
    .image_grid_wrap .img_02 {all:unset; width: 100%; height: 200px; top: 210px; filter: grayscale(100%);}
    .image_grid_wrap .img_03 {all:unset; width: 100%; height: 200px; top: 410px; filter: grayscale(100%);}
    .image_grid_wrap .img_04 {all:unset; width: 100%; height: 200px; top: 610px; filter: grayscale(100%);}
    
} */



.mid_wrap{
    width: 100%; height: 946px;
    position: relative; z-index: 95;
}
.mid_box{
    width: 100%; height: 100%; position: absolute; top: 0; left: 0;
    background:url('/img/mid_img_01.png') center center / cover no-repeat; filter: grayscale(100%);
    transition: filter 0.3s;
}

.mid_box:hover{filter: grayscale(0);}


.bot_wrap{width: 100%;display: flex; align-items: center; justify-content: center;
position: relative; z-index: 95;
}

.bot_wrap .bot_box{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 180px);
	display: flex; flex-direction: column; justify-content: center; align-items: start;
	width: 100%; max-width: 1000px; gap: 40px;
}

.bot_wrap .insta{width: 24px; height: 24px;}

.insta{display: flex;gap: 9px; align-items: center;}

.insta p {
    color: #fff;
    font-family: var(--enf);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize;
}

.card_box{display: flex; flex-wrap: wrap; gap: 20px;}

.bot_wrap .img_box{width: 184px;}

.bot_wrap .img_box img{width: 100%; aspect-ratio: 1/1;}


@media(max-width:1000px){

    .card_box{justify-content: space-between;}

    .bot_wrap .bot_box{
       width: 93.75%;
    }
    .bot_wrap .img_box{width: calc(33.3% - 27px);}
}