@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css');

body{margin:0;padding:0;background-color:#000;overflow:hidden;font-family:'Pretendard',sans-serif;color:#fff}
.image-background-div{width:100vw;height:100vh;overflow:hidden;position:relative;z-index:1;background-color:#333}
.image-background-div img{position:absolute;width:1920px;height:1200px;left:50%;top:0;transform:translateX(-50%)}
.content-wrapper{position:absolute;top:0;left:0;width:100%;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:2;box-sizing:border-box}
.content-div{width:100%;max-width:800px;padding:0;box-sizing:border-box;text-align:center;overflow-y:auto;max-height:100%;-ms-overflow-style:none;scrollbar-width:none}
.content-div::-webkit-scrollbar{display:none}
.content-div .logo-top { margin-top: 20px;}

.content-div h1{ color: transparent; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(to bottom, #f3c721, #e68a04); -webkit-text-stroke: 2px #000; font-size: 7rem; font-weight: 900; margin: 20px 0; }

.content-div .area { background-color: #191939; width: 100%; max-width: 770px; border-radius: 10px; padding: 15px; margin: 15px 0; }
.content-div .area .areain { background-color: #2c2851; border-radius: 10px; padding: 5px; width: 250px; margin: 0 auto; }
.content-div .area .areain span { color: transparent; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(to bottom, #f3c721, #e68a04); font-size: 1.5rem; font-weight: 900;}
.content-div .area .kr-domain { font-weight:900;color:#fff;font-size:6rem;text-shadow:1px 1px 3px transparent,-1px -1px 3px transparent,1px -1px 3px transparent,-1px 1px 3px transparent,2px 2px 3px transparent,-2px -2px 3px transparent,2px -2px 3px transparent,-2px 2px 3px transparent,3px 3px 3px transparent,-3px -3px 0 transparent,3px -3px 0 transparent,-3px 3px 0 transparent,4px 4px 3px transparent,-4px -4px 3px transparent,4px -4px 3px transparent,-4px 4px 3px transparent;animation:text-shadow-blink .5s infinite}
.content-div .area .explain { font-size: 1.2rem; }
.content-div .area h3 { font-size: 2.5rem; font-weight: 900; margin: 0;}
.content-div .area h2 { font-size: 3rem; font-weight: 900; margin: 0;}
.content-div .area h2 span { color: #9259ff; }
.content-div .area a{display:block;width:200px;font-size:1.2rem;color:#fff;padding:10px 14px;border-radius:10px;margin:25px auto;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:0;user-select:none;appearance:none;text-decoration:none;text-align:center;text-transform:none;-webkit-box-pack:center;-webkit-box-align:center;align-items:center;font-weight:900;letter-spacing:normal;box-shadow:#c56a18 0 -3px 0 0 inset,#ffea2f 0 2px 0 0 inset;transition:background-size .3s ease-in-out;background:linear-gradient(420deg,#ffce00 0%,#ffce00 49%,#eeaf0e 49%,#eeaf0e 100%) left center / 100% 100% no-repeat;text-shadow:-1px -1px 0 #c56a18,1px -1px 0 #c56a18,-1px 1px 0 #c56a18,1px 1px 0 #c56a18}

.content-div .footer-tele { display: flex; font-size: 3rem; justify-content: center; font-weight: 900; color: #fff; }
.content-div .column { display: flex; flex-direction: column; justify-content: center;}
.content-div .column:first-child { margin-right: 10px; }
.content-div .footer-greet { display: flex; font-size: 1.2rem; justify-content: center; margin: 10px 0; }
.content-div .footer-greet .footer-logo { width: 140px; }

@media only screen and ( max-width: 720px ) {
    .content-div { max-width:100%;}
    .content-div .logo-top { margin-top: 0;}
    .content-div .area { max-width: calc(100% - 20px); padding: 15px 5px; margin: 15px 5px;}
    .content-div .logo-top img { width: 240px; }
    .content-div h1 { font-size: 3rem; margin: 10px 0; }
    .content-div .area .areain span { font-size: 1.2rem; }
    .content-div .area .kr-domain { font-size: 2.8rem; margin: 10px 0; }
    .content-div .area .explain { font-size: 1rem; }
    .content-div .area h3 { font-size: 1.2rem; }
    .content-div .area h2 { font-size: 1.5rem; margin: 10px 0; }
    .content-div .area a { font-size: 1rem; margin: 15px auto; }
    .content-div .footer-tele .footer-tele-img { width: 40px; }
    .content-div .footer-tele { font-size: 1.5rem;}
    .content-div .footer-greet .footer-logo { width: 120px; }
    .content-div .footer-greet { font-size: 1rem;}
}

@keyframes text-shadow-blink {
    0%{text-shadow:1px 1px 3px #ffc738,-1px -1px 3px #ffc738,1px -1px 3px #ffc738,-1px 1px 3px #ffc738,2px 2px 3px #ffc738,-2px -2px 3px #ffc738,2px -2px 3px #ffc738,-2px 2px 3px #ffc738,3px 3px 3px #ffc738,-3px -3px 3px #ffc738,3px -3px 3px #ffc738,-3px 3px 3px #ffc738,4px 4px 3px #ffc738,-4px -4px 3px #ffc738,4px -4px 3px #ffc738,-4px 4px 3px #ffc738}
    20%{text-shadow:1px 1px 3px #ffc738,-1px -1px 3px #ffc738,1px -1px 3px #ffc738,-1px 1px 3px #ffc738,2px 2px 3px #ffc738,-2px -2px 3px #ffc738,2px -2px 3px #ffc738,-2px 2px 3px #ffc738,3px 3px 3px #ffc738,-3px -3px 3px #ffc738,3px -3px 3px #ffc738,-3px 3px 3px #ffc738,4px 4px 3px #ffc738,-4px -4px 3px #ffc738,4px -4px 3px #ffc738,-4px 4px 3px #ffc738}
    20.01%{text-shadow:1px 1px 3px transparent,-1px -1px 3px transparent,1px -1px 3px transparent,-1px 1px 3px transparent,2px 2px 3px transparent,-2px -2px 3px transparent,2px -2px 3px transparent,-2px 2px 3px transparent,3px 3px 3px transparent,-3px -3px 3px transparent,3px -3px 3px transparent,-3px 3px 3px transparent,4px 4px 3px transparent,-4px -4px 3px transparent,4px -4px 3px transparent,-4px 4px 3px transparent}
    100%{text-shadow:1px 1px 3px transparent,-1px -1px 3px transparent,1px -1px 3px transparent,-1px 1px 3px transparent,2px 2px 3px transparent,-2px -2px 3px transparent,2px -2px 3px transparent,-2px 2px 3px transparent,3px 3px 3px transparent,-3px -3px 3px transparent,3px -3px 3px transparent,-3px 3px 3px transparent,4px 4px 3px transparent,-4px -4px 3px transparent,4px -4px 3px transparent,-4px 4px 3px transparent}
}