@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(253, 175, 72);
                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(5, 5, 5);
                font-size: 1.1em;
                font-weight: 600;
                transition: transform 0.2s;
            }
            #top_menu > li > a:hover {
                /*font-size: 1.3em;*/
                color: rgb(255, 243, 240);
                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.2em;
                color: rgb(175, 56, 56);
                letter-spacing: 0.3em;
            }
            .main_text > h1 {
                    font-size: 3.5em;
                    color: rgb(253, 114, 22);
                    letter-spacing: 0.5em;
                    margin-top: 20px;
                }
            .main_img {
                width: 100%;
                height: 100%;
                text-align: center;
            }
            .main_img > img {
                width: 15%;
                height: auto;
            }
            footer {
                width: 100%;
                background-color: rgb(236, 234, 234);
                color: rgb(66, 66, 66);
                text-align: center;
                font-size: 0.8em;
                line-height: 1.5em;
                padding: 20px;
            }
            .contents{
                flex: 1;
            }
            h2 {
                font-size: 1.8em;
                color: white;
                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.2em;
                color: rgb(180, 85, 93);
                text-align: center;
                font-weight: 500;
                line-height: 1.5em;
                margin: 80px;
                font-family: 'DaeguDongseongRo';
            }
            .ct_box {
                width: 350px;
                background-color: rgb(218, 218, 218);
                border-radius: 16px;
                padding: 40px;
                margin: 30px auto;
                text-align: center;
                box-shadow: rgb(119, 119, 119) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;

            }
            .ct_box > p {
                font-size: 1.0em;
                color: rgb(56, 56, 56);
                line-height: 1.5em;
                letter-spacing: 0.1em;
                font-weight: 600;

            }
            .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: antiquewhite;
                width: 80%;
                max-width: 600px;
                margin: 5% auto;
                padding: 20px;
            }
            .modal-content img {
                max-width: 100%;
                height: auto;
                display: block;
                margin: 0 auto;
            }
            .work {
                max-width: 1100px;
                width: 100%;
                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.7em;
                text-align: center;
                line-height: 3.5em;
                font-weight: bold;
            }
            .caption > p {
                color: white;
                font-size: 1.1em;
                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.24) 0px 3px 8px;
            }
            h4 {
                display: block;
                padding: 5px;
                font-size: 1.0em;
                font-weight: bold;
            }
            .vision {
                color: chocolate;
                font-size: 1.0em;
                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(0, 0, 0, 0.24) 0px 3px 8px;
                padding: 20px;
            }
            .right > h3 {
                font-size: 1.2em;
                padding-bottom: 16px;
                color: rgb(141, 71, 21);
            }
            .right > p {
                line-height: 2em;
                padding-left: 16px;
            }
            .skill {
                position: relative;
                float: left;
            }
            .skill > ul {
                padding: 0;
                margin: 0;
                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;
            }