@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: beige;
                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: chocolate;
                font-size: 1.1em;
                font-weight: 600;
                transition: transform 0.2s;
            }
            #top_menu > li > a:hover {
                /*font-size:1.3em;*/
                color: darkgreen;
                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: darkgray;
                letter-spacing: 0.5em;
            }
            .main_text > h1 {
                font-size: 4em;
                color: burlywood;
                letter-spacing: 0.5em;
                margin-top: 20px;
            }
            .main_img {
                width: 100%;
                height: 100%;
                text-align: center;
            }
            .main_img > img {
                width: 25%;
                height: auto;
            }
            footer {
                width: 100%;
                background-color: rgb(204, 204, 204);
                color: rgb(53, 53, 53);
                text-align: center;
                font-size: 0.8em;
                line-height: 1.5em;
                padding: 20px;
            }
            .contents{flex: 1;
            }
            h2 {
                font-size: 2em;
                color:white;
                text-align: center;
                text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
                letter-spacing: 0.3;
                margin-top: 20px;
            }
            .ct_text {
                font-size: 2em;
                color: rgb(160, 146, 20);
                text-align: center;
                font-weight: 600;
                line-height: 2em;
                margin: 30px;
                font-family: 'DaeguDongseongRo';
            }
            .ct_box {
                width: 400px;
                background-color: rgb(240, 226, 207);
                border-radius: 16px;
                padding: 40px;
                margin: 20px auto;
                text-align: center;
                box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
            }
            .ct_box > p {
            font-size: 1.5em;
            color: gray;
            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: 1100px;
                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.8em;
                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(0, 0, 0, 0.15) 0px 3px 3px 0px;
            }
            h4 {
                display: block;
                padding: 5px;
                font-size: 1.2em;
                font-weight: bold;                
            }
            .vision {
                color: chocolate;
                font-size: 1.5em;
                line-height: 1.2em;
                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(0, 0, 0, 0.15) 0px 3px 3px 0px;
                padding: 20px;
            }
            .right > h3 {
                font-size: 1.2em;
                padding-bottom: 16px;
                color: chocolate;                
            }
            .right > p {
                line-height: 2em;
                padding-left: 16px;
            }
            .skill {
                position: relative;
                float: left;
            }
            .skill > ul {
                padding: 0px;
                margin: 0px;
                display: flex;
                padding-left: 16px;
            }
            .skill > ul > li {
                margin: 5px;                                
            }
            .skill > ul > li > img {
                width: 40%;
                height: auto;
            }
            iframe {
                border: 1px solid rgba(0,0,0,0.3);
                width: 1200px;
                height: 800px;
                display: block;
                margin: 30px auto;
                text-align: center;
            }