@font-face{
    src: url(Korean_Calligraphy.ttf);
         font-family: Korean;
}
*{
    margin: 0 auto;
    padding: 0 auto;
    box-sizing: border-box;
}
main {display: grid; grid-template-columns: 300px 300px 300px; grid-template-rows: 300px 300px 300px;
      color: black;}
body {background-image: url('yoongireal.jpg'); background-size: cover; font-family: korean;
      color: whitesmoke; text-align: center;}
ul {font-size: xx-large;}
header {width: 100%; height: 100px; line-height: 100px;}
header .logo {width: 300px; height: 200px; float: left;}
header .logo h2 {letter-spacing: 3px;}
header nav {width: 800px; height: 100px; float: right;}
header nav li {list-style: none; float: left;}
header nav li a {text-decoration: none; color: whitesmoke; text-transform: uppercase;
                 padding: 10px 20px; margin-left: 5px; transition: 0.5s ease; position: relative;}
header nav li a:hover {color: mediumslateblue;}
header nav li a:before {content: ''; position: absolute; bottom: 0; left: 0;
                        width: 5px; height: 5px; background-color: mediumslateblue;
                        opacity: 0;transition: 0.5s ease;}
header nav li a:after {content: ''; position: absolute; bottom: 0; right: 0;
                        width: 5px; height: 5px; background-color: mediumslateblue;
                        opacity: 0; transition: 0.5s ease;}
header nav li a:hover:before {content: ''; position: absolute; bottom: 0; left: 0;
                            width: 50%; height: 5px; background-color: mediumslateblue;
                            opacity: 1;}
header nav li a:hover:after {content: ''; position: absolute; bottom: 0; right: 0;
                            width: 50%; height: 5px; background-color: mediumslateblue;
                            opacity: 1;}
.wrapper {display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 1em;}                           
.box1 {width: 300px; height: 300px;}
.box2 {width: 300px; height: 300px;}
.box3 {width: 300px; height: 300px;}
.box4 {width: 300px; height: 300px;}
.box5 {width: 300px; height: 300px;}
.box6 {width: 300px; height: 300px;}
.box7 {width: 300px; height: 300px;}
.box8 {width: 300px; height: 300px;}
.box9 {width: 300px; height: 300px;}
iframe {
    max-width:  100% !important;
    max-height: 100% !important;
}