@charset "utf-8";

/********* pretendard font *********/
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

/********* common_layout *********/
/* *:focus-visible{outline-color: #D1AA37;} */
body {position: relative; line-height: 1.5; color: #222222; font-family: "Pretendard Variable", Pretendard, 'Apple SD Gothic Neo', 'sans-serif'; font-size: 16px; min-width: 280px; letter-spacing: -0.025em; word-break: keep-all;}


/* header */
header .container{transition: background-color .3s;}

.log_wrap{
  width:100vw;height:100vh;background-color:#fff;
  position:fixed;top:0;left:0;z-index:999999;display:none;
}.log_wrap .login_tit{position: absolute;top: 60%;left: 50%;transform: translate(-50%, -50%);font-size:24px;font-weight:700}
.log_wrap .login_tit span{color:#2e63fd}
.log_wrap.municipal .login_tit span{color:#1A942B}

.loging_cont{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.loging_cont .boxes{--size:32px;--duration:800ms;height:calc(var(--size) * 2);width:calc(var(--size) * 3);position:relative;transform-style:preserve-3d;transform-origin:50% 50%;margin-top:calc(var(--size) * 1.5 * -1);transform:rotateX(60deg) rotateZ(45deg) rotateY(0) translateZ(0)}
.loging_cont .boxes .box{width:var(--size);height:var(--size);top:0;left:0;position:absolute;transform-style:preserve-3d}
.loging_cont .boxes .box:nth-child(1){transform:translate(100%,0);-webkit-animation:box1 var(--duration) linear infinite;animation:box1 var(--duration) linear infinite}
.loging_cont .boxes .box:nth-child(2){transform:translate(0,100%);-webkit-animation:box2 var(--duration) linear infinite;animation:box2 var(--duration) linear infinite}
.loging_cont .boxes .box:nth-child(3){transform:translate(100%,100%);-webkit-animation:box3 var(--duration) linear infinite;animation:box3 var(--duration) linear infinite}
.loging_cont .boxes .box:nth-child(4){transform:translate(200%,0);-webkit-animation:box4 var(--duration) linear infinite;animation:box4 var(--duration) linear infinite}
.loging_cont .boxes .box>div{--background:#5C8DF6;--top:auto;--right:auto;--bottom:auto;--left:auto;--translateZ:calc(var(--size) / 2);--rotateY:0deg;--rotateX:0deg;position:absolute;width:100%;height:100%;background:var(--background);top:var(--top);right:var(--right);bottom:var(--bottom);left:var(--left);transform:rotateY(var(--rotateY)) rotateX(var(--rotateX)) translateZ(var(--translateZ))}
.loging_cont .boxes .box>div:nth-child(1){--top:0;--left:0}
.loging_cont .boxes .box>div:nth-child(2){--background:#145af2;--right:0;--rotateY:90deg}
.loging_cont .boxes .box>div:nth-child(3){--background:#447cf5;--rotateX:-90deg}
.loging_cont .boxes .box>div:nth-child(4){--background:#DBE3F4;--top:0;--left:0;--translateZ:calc(var(--size) * 3 * -1)}

.municipal .loging_cont .boxes .box>div{--background: #33AB5B;}
.municipal .loging_cont .boxes .box>div:nth-child(2){--background: #4ebc72;}
.municipal .loging_cont .boxes .box>div:nth-child(3){--background: #248a45;}
.municipal .loging_cont .boxes .box>div:nth-child(4){}

@-webkit-keyframes box1 {
    0%, 50% {transform: translate(100%, 0);}
    100% {transform: translate(200%, 0);}
}

@keyframes box1 {
    0%, 50% {transform: translate(100%, 0);}
    100% {transform: translate(200%, 0);}
}

@-webkit-keyframes box2 {
    0% {transform: translate(0, 100%);}
    50% {transform: translate(0, 0);}
    100% {transform: translate(100%, 0);}
}

@keyframes box2 {
    0% {transform: translate(0, 100%);}
    50% {transform: translate(0, 0);}
    100% {transform: translate(100%, 0);}
}

@-webkit-keyframes box3 {
    0%, 50% {transform: translate(100%, 100%);}
    100% {transform: translate(0, 100%);}
}

@keyframes box3 {
    0%, 50% {transform: translate(100%, 100%);}
    100% {transform: translate(0, 100%);}
}

@-webkit-keyframes box4 {
    0% {transform: translate(200%, 0);}
    50% {transform: translate(200%, 100%);}
    100% {transform: translate(100%, 100%);}
}

@keyframes box4 {
    0% {transform: translate(200%, 0);}
    50% {transform: translate(200%, 100%);}
    100% {transform: translate(100%, 100%);}
}