@charset "utf-8";
/****************************
* main.css
* [Last Change Date] : 2022.12.28
* [worker] : yoon
* [Description] : 메인 페이지 Style
****************************/
body.page-main header{position: absolute;left: 0;top:0;z-index: 1}
body.page-main main .main{display:flex;justify-content:center;align-items:center;width: 100%;height: 100%;}
body.page-main main .main::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display: block;width: 120%;height: 120%;background-image: url("../images/background.png");background-size: cover;background-position: 50% 50%;animation: background-motion 15s infinite linear alternate ;}
body.page-main main .main .main-circle{font-size:1rem;width: 600em;height: 600em;position: relative;}
body.page-main main .main .main-circle .circle{position: relative;overflow: hidden;height: 50%;}
body.page-main main .main .main-circle .circle:after{content:'';position: absolute;left: 0;top:0;width: 600em;height: 600em;box-sizing: border-box;border-radius: 50%;border: 3rem solid transparent;box-shadow: inset 0 0 0 0 #ffffff40;}
body.page-main main .main .main-circle .circle.top:after{border-top-color:var(--white-color);border-left-color: var(--white-color);transform: rotate(-135deg);animation: spin-circle-top .6s 1s 1 linear both;}
body.page-main main .main .main-circle .circle.bottom:after {border-top-color:var(--white-color);border-left-color: var(--white-color);top:-301em;transform: rotate(45deg);animation: spin-circle-bottom  .6s 1s 1 linear both;}
body.page-main main .main .main-circle .circle-center-box{position: absolute;width: 100%;height: 100%;left: 50%;top:50%;transform: translate(-50%,-50%);border-radius: 50%;display: flex;justify-content: center;align-items: center;}
body.page-main main .main .main-circle .circle-center-box .text-box{width:100%;height:100%;display:flex;flex-direction: column;justify-content:center;align-items:center;position:absolute;left:0%;top:0;opacity: 0;transition-duration: 1s;transform:translateY(30em);transition-property: opacity,transform;}
body.page-main main .main .main-circle .circle-center-box .text-box h2{font-size: 36em;font-weight: 700;color: var(--white-color);}
body.page-main main .main .main-circle .circle-center-box .text-box p{font-size: 20em;text-align:center;line-height:1.5em;font-weight: 400;color: var(--white-color);margin-top: 20rem;opacity: 0;transition-duration: 1s;transition-property: opacity;}

body.page-main main .main.load .main-circle .circle:after{box-shadow: inset 0 0 25rem 35rem #ffffff40;transition-duration: 1s;transition-property:box-shadow; }
body.page-main main .main.load .main-circle .circle-center-box .text-box.active{opacity: .8;transition-delay: 1s;transform:translateY(0)}
body.page-main main .main.load .main-circle .circle-center-box .text-box.active p{opacity: 1;transition-delay: 1.5s;}

@keyframes spin-circle-top { form{transform: rotate(-135deg);} to{transform: rotate(45deg);}}
@keyframes spin-circle-bottom { form{transform: rotate(45deg);} to{transform: rotate(225deg);}}

@keyframes background-motion{
    0%{transform:translate(calc(-50% - 0em),calc(-50% + 0em));}
    25%{transform:translate(calc(-50% + 20em),calc(-50% + 20em));}
    50%{transform:translate(calc(-50% + 0em),calc(-50% + 40em));}
    75%{transform:translate(calc(-50% - 20em),calc(-50% + 20em));}
    100%{transform:translate(calc(-50% - 0em),calc(-50% + 0em));}
}
body.page-main footer{position: absolute;left: 0;bottom:0;}
@media screen and (max-height : 1080px) {
    body.page-main main .main .main-circle{font-size: 0.0925925925925926vh;}
}