@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
@font-face {
    font-family:'RixYeoljeongdo_Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2102-01@1.0/RixYeoljeongdo_Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}html{
    font-size:16px;
}
.wrap .realm{
    height:100vh;
    display:table;
}
#main-wrap article, #footer-wrap article{
    
    display:table-cell;
    vertical-align:middle;
    
}
#main-wrap .center-wrap, #footer-wrap .center-wrap{
    width:74%;
    margin:auto;
}
a{
    text-decoration:none; 
    color:#333;
}
.modal{
    background:rgba(0,0,0,0.5);
    width:100%;
    height:100%;
    position:fixed;
    left:0;
    top:0;
    display:none;
    z-index:9;
     cursor:pointer;
}
.modal_btn{
    width:100px;
    height:100px;
    float:right;
    background-color:#333;
    color:#fff;
    text-align:center;
    font-size:5rem;
    cursor:pointer;
}
.header-wrap{
    width:100%;
    position:fixed;
    left:0;
    top:0;
    z-index:5;
    background:rgba(255,255,255,0.2);
    transition: all 1s;
}
h1{
    width:300px;
    padding-top:20px;
    margin:auto;
}
h1 img{
    width:100%
}
.realm h2{
    color:#fff;
    font-family: 'Monoton', cursive;
    font-size:4.375rem;
    text-align:center;
    writing-mode:vertical-lr; 
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    font-weight:normal;
}
#visual-wrap h2, footer h3{
    opacity:0;
    font-size:0;
}
nav{
    width:60%;
    margin:auto;
}
.nav-btn{
    display:none;
}
.wheel-box{
    width:50px;
    height:50px;
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:150px;
    animation:mouseani 3s infinite;
}
@keyframes mouseani{
    0%{bottom:150px}
    50%{bottom:170px}
    100%{bottom:150px}
}  
.wheel-box img{
    width:100%;
}
.main-menu{
    display: flex;
    justify-content: space-around;
    margin: auto;
}
.main-menu a{
    width:100%;
    height:100%;
    transition:all 0.5s;
    color:#fff;
    font-size:1.125rem;
    display:inline-block;
    text-align:center;
    padding:10px 0;
    letter-spacing: 5px;
}
.main-menu li>a.highlight{
    background-color:#ffff;
    color:#000;
    text-align:center;
}
.main-menu li>a.highlight:hover{
    background-color:#555;
}
.main-menu a:hover{
    color:skyblue;

}
#main-wrap{
    width:100%;
}
section{
    width:100%;
}
#visual-wrap{
    width:100%;
    height:1080px;
    background:url('../img/space.png');
    background-size:cover;
    background-attachment: fixed;
    position:relative;
}
#profile-wrap{
    background: linear-gradient(to bottom, #4eb8b9, #27aae1);
    background-size:cover;
    background-repeat:no-repeat;
}
#icon-wrap,#profile-wrap{
    width:100%;
    position:relative;
}
#icon-wrap{
      background-color:#81d3eb;
     background-attachment: fixed;
     background: linear-gradient(to bottom, #27aae1,#9e7eb9);
}
.profile-info p, .profile-info h3{
    line-height:2;
    color:#fff;
}
.name{
    font-size:2rem;
    font-weight:bold;
   
}
.pagehide{
    opacity:0;
    transition:all 2s;
}    
.pageshow{
    opacity:1;
    transition:all 2s;
}
h2.pageshow{
    opacity:0.5;
}
.greeting-list{
    width:100%;
    height:100px;
    padding-top:400px;   
}
.greeting-list>p, #visual-wrap{
    transition:all 1s;
}
.greeting-list>p{
    width:100%;
    color:#fff;
    font-family: 'Righteous', cursive;
    font-size:6.25rem;
    display:none;
    text-align:center;   
}
.greeting-list>p:first-child{
    display:block;
}
.profile-img{
    width:250px;
    height:250px;
    overflow:hidden;
    margin:auto;
    border-radius: 100%;
    border:2px solid #000;
    background-color:rgb(176, 223, 216);
}
.profile-img img{
    width:100%;
}
.profile-info{
    width:100%;
    margin-top:40px;
}
.profile-info>ul:after{
    display:block;
    content:"";
    clear:both;
}
.profile-info li{
    float:left;
    width:25%;
    height:350px;
    border:2px solid #eee;
    box-sizing:border-box;
    padding:1%;
    border-radius:20px 20px 20px 20px;

}
.profile-info li:nth-child(2){
    width:40%;
    margin:0 5% 0 5%;
}
.profile-title{
    font-size:1.875rem;;
    font-weight:normal;
    margin:20px 0;
    font-family:'RixYeoljeongdo_Regular';
    
}
.content-title{
    font-weight:bold;
    font-size:1.25rem;
}
.icon-list, .web-list{
    width: 100%;
    margin:auto;
    padding: 50px 0;
}
.icon-list:after{
    clear:both;
    display:block;
    content:"";
}
.icon-list{
    display:flex;
    justify-content: center;
}
.icon-list li{
    width:16%;
    height:410px;
    margin-right:5%;
    position:relative;
}
.icon-list li:nth-child(even){
    padding:250px 0 0 0;
}
.icon-list li:last-child{
    margin-right:0;
}

.icon-bg{
    width:200px;
    height:200px;
    margin:auto;
    border-radius: 50%;
    animation:iconani 3s infinite;
}
@keyframes iconani{
    0% {transform:scale(90%, 90%)}
    50%{transform:scale(100%, 110%)}
    100%{transform:scale(90%, 90%)}
}  
.icon-space{
    width:80%;
    height:80%;
    background-color:#fff;
    border-radius:50%;
    overflow:hidden;
    position:relative;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%)
}
.icon-space span{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    font-family:'RixYeoljeongdo_Regular';
    text-align:center;
    line-height:1.875rem;
}
.donut-control{
    width:40px;
    height:40px;
    cursor: pointer;
    border:1px solid #fff;
    position:absolute;
    left:50%;
    top:90%;
    transform:translateX(-50%);
}    
.icon-list img{
    position:absolute;
    left:50%;
    top:50%;
    width:70%;
    transform:translate(-50%, -50%);
}
.icon-list .icon-con{
    margin-top:20px;
    font-size:0.875rem;
    line-height:1.5;
    background-color:transparent;
    color:#fff;
    border:1px solid #fff;
    box-sizing:border-box;
    padding:10px;
}
.icon-list .icon-title{
    width:100%;
    color:#fff;
    text-align:center;
    font-size:1.25rem;
    font-weight:bold;
    padding:30px 0;
}
#web-wrap{
    background: linear-gradient(to bottom,#9e7eb9,#bbb8dc);
    position:relative;
}
.web-list:after{
    clear:both;
    display:block;
    content:"";
}
.web-list li{
    width: 30%;
    float: left;
    margin-bottom: 5%;
    margin-right: 5%;
    box-shadow: 5px 5px 5px 5px rgb(115 8 119 / 30%);
    cursor: pointer;
}
.web-list li:nth-child(3){
    margin-right:0;
}
.web-list li:nth-child(4),.web-list li:nth-child(5){
    margin-bottom:0;
}
.web-img{
    width:100%;
    height:200px;
    overflow:hidden;
    position:relative;
}
.web-list>li>p{
    background:#fff;
    text-align:center;
    line-height:2;
}
.web-list>li>p>a{
    display:inline-block;
    color:blue;
    padding:0 10px;
    height:100%;
}
.web-list>li>p>a:hover{
    background-color:skyblue;
    color:#fff
}
.web-list span, .web-list h3{
    display:inline-block;
    width:100%;
    height:50px;
    text-align:center;
    color:#333;
    background-color:#fff;
    box-sizing:border-box;
    font-weight:bold;
    font-size:1.375rem;
    line-height:50px;
}
.web-list .web-source{
    height:35px;
    line-height:35px;
    font-size: 0.8rem;
    color:#555;  
}
.web-list .web-source mark{
    margin:0 2px;
    background-color:#9e7eb9;
    color:#fff;
    padding:5px 3px;
}
.web-list li:hover .web-img>img{
     transition:all 2s;
    top:-300px;
}
.web-list li:first-child:hover .web-img>img{
    top:-800px;
}
.web-list li:hover span, .web-list li:hover h3{
    background-color:#8552b1;
    color:#fff;
}
.web-list li:nth-child(2):hover .web-img>img{
    top:-850px;
}
.web-list li:nth-child(5):hover .web-img> img{
    top:-70px;
}

.web-list li:nth-child(6):hover .web-img> img{
    top:-10px;
}
.web-list li:nth-child(7):hover .web-img> img{
    top:-100px;
}

.web-list img{
    width:100%;
    position:absolute;
    top:0;
}
.web-info{
    overflow-Y:scroll;
    width:70%;
    height:70%;
    border:5px solid #000;
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    background: #fff;
    z-index:10;
    display:none;
    padding:50px;
    
}
.web-info::-webkit-scrollbar {
    width: 20px;
}
.web-info::-webkit-scrollbar-thumb {
    background-color: #fff;
    border:1px solid #555;
    box-sizing:border-box;
    border-radius:10px;
}
.web-info::-webkit-scrollbar-track {
    background-color: #fff;
}
.web-info .info-title{
    font-size:1.875rem;
    text-align:center;
    font-weight:bold;
}
.info-con{
    width:70%;
    margin:auto;
    margin-bottom:100px;
}
.web-info p.info-margin{
    margin-bottom:110px;
}
.info-con p{
    margin: 30px auto;
    font-size:1.25rem;
    line-height:150%;
    font-weight:bold;
    text-align: center;
}
.info-con img{
    width:100%;
    position:static;
}
.web-list>li:nth-child(2) .web-info{
    display:none;
}
.web-info a{
    display:block;
    width:100%;
    height:50px;
    line-height:50px;
    box-sizing:border-box;
    background-color:skyblue;
    color:#fff; 
    text-align:center;
}
.left-btn, .right-btn{
    display:none;
}
.web-info li.main-btn{
    width:100%;
    margin-right:0;
}
.web-info .green-list a{
    background-color:#419400;
}
.web-info .green-list a:hover{
    background-color:#01682f;
}
.web-info .black-list a{
    background-color:#555;
}
.web-info .black-list a:hover{
    background-color:#000;
}
.web-info .sky-list a{
    background-color:#14b8db;
}
.web-info .sky-list a:hover{
    background-color:#1facc0;;
}
.web-info .purple-list a{
    background-color:#7808b9;
}
.web-info .purple-list a:hover{
    background-color:#4f047a;;
}
.web-info .white-list a{
    background-color:#fff;
    border:1px solid #000;
    box-sizing:border-box;
    color:#333;
    transition:all 0.5s;
}
.web-info .white-list a:hover{
    background-color:#000;
    color:#fff
}
.web-info ul{
    width:50%;
    margin:auto;
}
.web-info ul:after{
    display:block;
    content:"";
    clear:both;
}
.web-info li{
    width:22%;
    float:left;
    margin-right:4%;
    margin-bottom:4%;
}
.web-info li:nth-child(4n+1){
    margin-right:0;
}
.web-info li a{
    letter-spacing:-1px;
}
.mobile-box{
    width:300px;
}
#footer-wrap{
    background: linear-gradient(to bottom, #bbb8dc, #b0dfd8);
    position:relative;
}
#footer-wrap .center-wrap>p{
    width:100%;
    text-align: center;
    font-family:'RixYeoljeongdo_Regular';
    font-size:2rem;
    color:#fff;
    padding-bottom:20px;
}

#footer-wrap p.thankyou{
    width:45%;
    margin:auto;
    font-size:2.5rem;
}
#contact-wrap{
    margin:auto;
 
}
.contact-form{
    width:50%;
}
.contact-phone{
    width:100%;
    /* height:60px; */
    margin:5% auto;
    overflow:hidden;
    font-family:'RixYesoljeongdo_Regular';
    font-size: 3rem;
    color:#fff;
    vertical-align:middle;
    text-align:center
}
.contact-phone a{
    color:#fff
} 
.contact-phone span{
    vertical-align: middle;
    font-weight:bold;
}
.phone-icon{
    display:inline-block;
    width:50px;
    height:50px;
}
.phone-icon img{
    width:100%;
}

.foot-logo-list{
    width:35%;
    display:flex;
    justify-content: center;
    align-items: center;
    margin:auto;
    padding:20px 0 0 0;
    opacity:0.5;
}
.foot-logo-list li{
    width:60%;
}
.foot-logo-list li:last-child{
    width:35%;
    margin-left:5%;
}
.foot-logo-list img{
    width:100%;
}