@font-face {
    font-family: 'DaeguDongseongRo';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2511-1@1.0/DaeguDongseongro-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
    @font-face {
    font-family: 'JoseonGulim';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@1.0/ChosunGu.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

           html, body{
                height: 100%;
                margin: 0;
                padding: 0;
                background-color:rgb(250, 242, 215);
                font-family: 'JoseonGulim';
            }
            *{
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            #container{
                min-height: 100vh;
                display: flex;
                flex-direction: column;
            }
            header{
                width: 100%;
                height: 100px;
            }
            nav{
                float: right;
                width: 900px;
                height: 100px;
                padding: 40px;
            }
            ul{
                list-style: none;
            }
            #top_menu > li {
                float: left;
                position: relative;
            }
            a{text-decoration: none;
            }
            #top_menu > li > a{
                display: block;
                padding: 20px 50px;
                color: rgb(228, 171, 213);
                font-size: 1.1em;
                font-weight: 600;
                transition: transform 0.2s;
            }
            #top_menu > li > a:hover {
                /*font-size: 1.3em;*/
                color:rgb(173, 44, 130);
                text-shadow: 0 2px rgba(0, 0 , 0, 0.5);
                transform: scale(1.2);
            }
            .main_text{
                width: 100%;
                height: 200px;
                margin: 10px auto;
                text-align: center;
                margin-top: 50px;
                font-family: 'DaeguDongseongRo';
            }
            .main_text > p {
                font-size: 1.5em;
                color: rgb(211, 203, 92);
                letter-spacing: 0.5em;
            }
            .main_text > h1 {
                font-size: 4em;
                color: rgb(250, 145, 75);
                letter-spacing: 0.5em;
                margin-top: 15px;
            }
            .main_img {
                width: 100%;
                height: 100%;
                text-align: center;
            }
            .main_img > img {
                width: 25%;
                height: auto;
            }
            footer{
                width: 100%;
                background-color: rgb(238, 235, 212);
                color: black;
                text-align: center;
                font-size: 0.8em;
                line-height: 1.5em;
                padding: 20px;
            }
            .contents{
                flex: 1;
            }
            h2{
                font-size: 2em;
                color: rgb(255, 255, 255);
                text-align: center;
                text-shadow: 2px 2px 4px rgba(0, 0 , 0, 0.3);
                letter-spacing: 0.3em;
                margin-top: 20px;
            }
            .ct_text{
                font-size: 1.8em;
                color: rgb(104, 91, 48);
                text-align: center;
                font-weight: 500;
                line-height: 1.5em;
                margin: 30px;
                font-family: 'DaeguDongseongRo';
            }
            .ct_box {
                width: 400px;
                background-color: rgb(243, 234, 216);
                border-radius: 16px;
                padding: 40px;
                margin: 20px auto;
                text-align: center; 
                box-shadow: rgb(232, 225, 204) 3px 3px 6px 0px inset, rgba(216, 215, 212, 0.5) -3px -3px 6px 1px inset;
            }
            .ct_box > p {
                font-size: 1.2em;
                color: rgb(155, 116, 33);
                line-height: 1.5em;
                letter-spacing: 0.1em;
                font-weight: bold;
            }
            .ct_img {
                width: 400px;
                padding: 30px;
                margin: 20px auto;
                text-align: center;
            }
            .ct_img > img {
                width: 80%;
                height: auto;
            }
            .work2 {
                width: 100%;
                max-width: 1400px;
                margin: 0 auto;
                align-items: center;
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
            }
            .image-box {
                position: relative;
                width: 300px;
                height: 300px;
                overflow: hidden;
                border-radius: 16px;
                margin: 30px;
            }
            .image-box img {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                transition: opacity 0.5s ease;
            }
            .image-box .hover-img{
                opacity: 0;
            }
            .image-box:hover .hover-img{
                opacity: 1;
            }
            .modal {
                display: none;
                position: fixed;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                overflow: auto;
                background-color: rgba(0, 0, 0, 0.5);
                z-index: 1;
            }
            .modal-content {
                background-color: beige;
                width: 80%;
                max-width: 600px;
                margin: 5% auto;
                padding: 20px;            
            }
            .modal-content img {
                max-width: 100%;
                height: auto;
                display: block;
                margin: 0 auto;
            }
            .work {
                width: 100;
                max-width: 1000px;
                margin: 20px auto;
            }
            .work_list {
                list-style: none;
                padding: 0;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
            }
            .work_list li {
                margin: 20px;
                padding: 0;
                overflow: hidden;
                flex-basis: calc(33.333% - 40px);
                position: relative;
                border-radius: 16px;
            }
            .work_list a {
                width: 800px;
                margin:  30px auto;
                text-align: center;
            }
            .work_list img {
                width: 100%;
                height: auto;
                z-index: 5;
            }
            .work_list .caption {
                position: absolute;
                top: 200px;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0 , 0, 0.5);
                opacity: 0;
                z-index: 10;
                margin: 0 auto;
                text-align: center;
                padding: 20px;
                transition: all 0.5s ease-in-out;
            }
            .work_list li:hover .caption {
                opacity: 1;
                transform: translateY(-200px);
            }
            .cp_title {
                color: white;
                font-size: 1.5em;
                text-align: center;
                line-height: 2.5em;
                font-weight: bold;

            }
            .caption > p {
                color: white;
                font-size: 1.2em;
                text-align: left;
                line-height: 1.5em;
            }
            .about {
                width: 80%;
                height: 720px;
                margin: 50px auto;
                padding: auto;
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 20px;
            }
            .left {
                grid-row: span 4;
                margin: auto;
                text-align: center;
                align-items: center;
                justify-content: center;
            }
            .left > img {
                width: 250px;
                height: auto;
                border-radius: 50%;
                margin-bottom: 30px;
            }
            .about_text {
                background-color: rgba(255,255,255,0.5);
                border-radius: 16px;
                color: #333;
                width: 350px;
                margin: 0 auto;
                padding: 20px;
                text-align: center;
                box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
            }
           h4 {
                display: block;
                padding: 5px;
                font-size: 1.2em;
                font-weight: bold;
            }
           .vision {
                color: rgb(113, 155, 85);
                font-size: 1.5em;
                line-height: 1.5em;
                font-weight: bold;
                text-align: center;
                margin: 30px;
            }
           .right {
                background-color: rgba(255,255,255,0.5);
                border-radius: 16px;
                color: #333;
                box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
                padding: 20px;
            }
           .right > h3 {
                font-size: 1.2em;
                padding-bottom: 16px;
                color: rgb(121, 46, 190);
            }
           .right > p {
                line-height: 2em;
                padding-left: 16px;
            }
           .skill {
                position: relative;
                float: left;
            }
           .skill > ul {
                padding: 0;
                margin: 0;
                display: flex;
                padding-left: 16px;
            }
           .slill > ul > li {
                margin: 5px;
            }
           .skill > ul > li >img {
                width: 40%;
                height: auto;
            }