@charset "UTF-8";
/* CSS Document */

/* login */
*{font-family: inherit}
html,body {margin:0;padding:0;width:100%;height:100%;font-size:12px;color:#213a50;background: #48438E;overflow: hidden;background-size: contain;

}
body {
/*background-image:url('../images/login_bg.png'), -webkit-gradient(linear, 55deg, 41%, from(#C7C7EF), to(#48438E));
background-image:url('../images/login_bg.png'), -webkit-linear-gradient(55deg,#C7C7EF,41%,#48438E);
background-image:url('../images/login_bg.png'), -moz-linear-gradient(55deg,#C7C7EF,41%,#48438E);
background-image:url('../images/login_bg.png'), -ms-linear-gradient(55deg,#C7C7EF,41%,#48438E);
background-image:url('../images/login_bg.png'), -o-linear-gradient(55deg,#C7C7EF,41%,#48438E);
background-image:url('../images/login_bg.png'), linear-gradient(55deg, #C7C7EF, #48438E);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C7C7EF', endColorstr='#48438E',GradientType=0 );*/
background: -webkit-linear-gradient(260deg, #65ACDF -8.31%, #877BD8 101.42%);
background: -moz-linear-gradient(260deg, #65ACDF -8.31%, #877BD8 101.42%);
background: linear-gradient(260deg, #65ACDF -8.31%, #877BD8 101.42%);
}

input:-webkit-autofill {background-color: #fff !important;}
input:-webkit-autofill:hover { background-color: #fff !important; }
input:-webkit-autofill:focus { background-color: #fff !important;  }


.loginAreaWrap {display: block;/* overflow: hidden; */position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}
.loginAreaWrap:before {content: "";position: absolute;right: -427px;top: 240px;width: 597px;height: 561px;background: url(../images/bg_login_sm_159x130.png) no-repeat left 222px top 209px, url(../images/bg_login_597x561.png) no-repeat center center;opacity: .1;z-index: 1;}
.LoginAreaInner {position:relative; padding: 58px 50px 20px 50px;background-color: #fff;border-radius: 10px;box-shadow: 2px 2px 16px rgba(0,0,0,0.3);overflow: hidden; z-index: 2;}
/* top */
.loginHeader{display: flex; align-items: center; justify-content: center; width: 460px; margin: 0 auto;}
.loginLogo{display: block; overflow: hidden; position: relative; width: 151px; padding-top: 69px; padding-right: 30px; font-size: 0; text-indent: -9999px; background: url(../images/header_logo_ai_121x69.svg) no-repeat left center;}
.loginLogo:after {content: ""; position: absolute; right: 0; top: calc(50% - 25px); width: 1px; height: 50px; background: #DFE3E8;}
.slogan {overflow: hidden; width: auto; height: auto; padding: 0 0 0 25px; letter-spacing: -1px; font-weight: 500; font-sizE: 30px; color: #454F5B;}


/* form */
.loginArea {width: 440px;overflow: hidden;margin: 33px auto 0;}
.loginBox {overflow: hidden;display: block;}
.loginBox input[type="text"], input[type="password"]{}
.loginBox select{width:100px; line-height:18px; margin-top:30px; margin-bottom:16px; }
.loginBox .logininput{overflow: hidden;}
.loginBox .logininput input{border: 0;border-bottom: 1px solid #dbdbec;padding: 10px;width: 100%;font-size: 17px;}
.userId {margin-bottom: 10px;overflow: hidden;}
.userPw {display: block;overflow: hidden;}

.loginBox .loginBtn {overflow: hidden;margin-top: 30px;}
.loginBox .loginBtn button {color: #FFF;vertical-align:middle;text-align:center;font-size: 18px;cursor: pointer;font-weight: bold;border: 2px solid #7171b5;color: #7171b5;background: none;outline: none;display: block;padding: 12px 0;width: 100%;border-radius: 5px;font-family: inherit;}
.loginBox .loginBtn button:hover {}
.loginBox .loginBtn button.chageBtn {margin-top: 10px;background-color: #7171b5;color: #fff;
}

.checkboxArea{margin-top: 10px;}
.checkboxCustom input[type="checkbox"]{ display: none; }
.checkboxCustom label{position: relative;padding-left: 24px;color: #575796;font-size: 15px;line-height: 32px;font-weight: 800;}
.checkboxCustom label:before, .checkboxCustom label:after{
    content: " ";
    display: inline-block;
    position: absolute;
    width: 15px;
    height: 15px;
    left: 0;
    cursor: pointer;
    top: 3px;
    border: 1px solid #C4C3C3;
	background-color:#fff;
    -webkit-transition: opacity 0.3s linear;
    -moz-transition: opacity 0.3s linear;
    -o-transition: opacity 0.3s linear;
    -ms-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear;
}
.checkboxCustom input[type="checkbox"]:checked+label::after {
    background: url('../images/icon_check.png') no-repeat 2px  3px;
}


/* auto Login tip chackbox */
#autoLoginSpan{display: block;}
.checkboxCustom #autoLoginSpan .infoBrowser{margin-left: 6px;}
.checkboxCustom #autoLoginSpan .autoLoginTip{
	background: #d8d8e7;
	display: inline-block;
	text-align: center;
	padding: 3px 4px 3px 5px;
	border-radius: 100px;
	font-weight: bold;
	font-family: serif; 
	color: #54539B;
	font-size: 13px;
	width: 20px;
	height: 20px;
	margin-left: 3px;
}

/* auto Login tip popup */
.layerMaskBackground{
	position: fixed;
	top:0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0,0,0,0.7);
	z-index:9;
	opacity:0;visibility:hidden;
}
.layerMaskBackground.on{
	opacity:1;
	visibility:visible;
}
.popup {
    background: #fff;
    padding: 0;
    max-width: 1140px;
    box-shadow: 1px 1px 20px rgb(0 0 0 / 50%);
    border-radius: 10px;
}
.poplayout {
    display: none;
    position: absolute;
    left: 50%;
    top: 15%;
    backface-visibility: hidden;
    z-index: 10;
    transform: translateX(-50%);
}
.popup .popupHeader {
    padding: 15px 20px 10px 25px;
    color: #fff;
    box-sizing: initial;
    overflow: hidden;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom: 1px solid #d9d9d9;
}
.popup .popupHeader h1 {
    font-size: 24px;
    color: #232323;
    letter-spacing: -0.8px;
    font-weight: bold;
}
.popup .popupHeader .btn_close {
    width: 35px;
    height: 0px !important;
    padding: 35px 0 0 0;
    overflow: hidden;
    display: block;
    position: absolute;
    top: 13px;
    right: 14px;
    background: url(../images/popup_btn_close2.png) 50% 50% no-repeat;
}
.popup .popupHeader .btn_close_qr {
    width: 35px;
    height: 0px !important;
    padding: 35px 0 0 0;
    overflow: hidden;
    display: block;
    position: absolute;
    top: 13px;
    right: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none'%3E%3Cpath d='M15.0009 13.2331L21.188 7.0459L22.9557 8.81366L16.7686 15.0009L22.9557 21.188L21.188 22.9557L15.0009 16.7686L8.81366 22.9557L7.0459 21.188L13.2331 15.0009L7.0459 8.81366L8.81366 7.0459L15.0009 13.2331Z' fill='white'/%3E%3C/svg%3E");
}
.popupContents {
    padding: 25px 25px 20px 25px;
    overflow: auto;
    max-height: 80vh;
    background-color: #f7f7f7;
    border-radius: 0 0 10px 10px;
}

.popupContents h2 {
    color: #41405A;
    padding-bottom: 16px;
    font-size: 21px;
    font-weight: 600;
    position: relative;
    padding-left: 16px;
}

.popupContents h2::before {
    content: '';
    width: 4px;
    height: 20px;
    background-color: #00B195;
    position: absolute;
    top: 5px;
    left: 0px;
}

.popupContents h3 {
    color: #232323;
    font-size: 16px;
    word-break: keep-all;
}

.popupContents .qrh3 {
    color: #232323;
    font-size: 20px;
    word-break: keep-all;
    text-align: center;
    padding-top: 30px;
    padding-bottom: 30px;
    font-weight: 700;
    line-height: normal;
}

.popupContents .qrh4 {
    color: #232323;
    font-size: 16px;
    word-break: keep-all;
    text-align: center;
    padding-top: 30px;
    padding-bottom: 30px;
    font-weight: 700;
}

.popupContents .qrh4 span{
    color: #de0000;
}

    
.popupContents .qrImg {
    width: 200px;
    height: 200px;
    border: 1px solid #eaeaea;
    margin: 20px auto 20px auto;
}

.popupContents .qrImg img{
    max-width: 200px;
    max-height: 200px;
    text-align: center;
}

    

.popupContents .grayBox {
    background-color: #fff;
    border-radius: 10px;
    padding: 13px;
    text-align: left;
}

.popupContents dl dt {
    font-weight: bold;
    font-size: 16px;
    padding: 8px 0 13px 0;
}
.popupContents p {
    font-size: 15px;  
    line-height: 24px;
    word-break: keep-all;
    color:#00abb1;
}
/* browser text */
.infoBrowser{font-size: 14px; color:#383838; margin-top: 10px;}


/* copyRight */
.infoArea {clear: both;margin-top: 31px;border-top: 1px solid #d3d3ea;padding: 15px 0;}
.infoArea p.copy{font-size: 13px;letter-spacing: 1px; color: #7171b5; text-align: center;}



.animation1 { width: 100%; height: 100%;   }




.cubeContainer {
  display: none;
  width: 20px;
  -webkit-perspective: 1000px;
  -ms-perspective: 1000px;
  perspective: 1000px;
  position: absolute;
  /* right: 58px; */
  left: 69px;
  top: 69px;
}
.cube {
  width: 25px;
  height: 25px;
  position: relative;
  color: #111;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.cube div {
  position: absolute;
  text-align: center;
  left: 0;
  top: 0;
  width: 25px;
  height: 25px;
  transform-origin: 50% 50% -15px;
  -webkit-transform-origin: 50% 50% -15px;
  opacity: 0.8;
}

.cube .side1 {
  background: #3E69AD;
  -webkit-animation: animate1 12s infinite linear;
  animation: animate1 12s infinite linear;
}
.cube .side2 {
  background: #D8256A;
  -webkit-animation: animate2 12s infinite linear;
  animation: animate2 12s infinite linear;
}
.cube .side3 {
  background: #FFE75A;
  -webkit-animation: animate3 12s infinite linear;
  animation: animate3 12s infinite linear;
}
.cube .side4 {
  background: #D0DD83;
  -webkit-animation: animate4 12s infinite linear;
  animation: animate4 12s infinite linear;
}
.cube .side5 {
  background: #EDA635;
  -webkit-animation: animate5 12s infinite linear;
  animation: animate5 12s infinite linear;
}
.cube .side6 {
  background: #72CEC8;
  -webkit-animation: animate6 12s infinite linear;
  animation: animate6 12s infinite linear;
}

/* for Chrome and Chrome */
@-webkit-keyframes animate1 {
  0% {
    -webkit-transform: perspective(600px) rotateX(0deg) rotateY(90deg) rotateZ(0deg);
  }
  100% {
    -webkit-transform: perspective(600px) rotateX(360deg) rotateY(450deg) rotateZ(0deg);
  }
}
@-webkit-keyframes animate2 {
  0% {
    -webkit-transform: perspective(600px) rotateX(0deg) rotateY(270deg) rotateZ(0deg);
  }
  100% {
    -webkit-transform: perspective(600px) rotateX(360deg) rotateY(630deg) rotateZ(0deg);
  }
}
@-webkit-keyframes animate3 {
  0% {
    -webkit-transform: perspective(600px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    -webkit-transform: perspective(600px) rotateX(450deg) rotateY(0deg) rotateZ(-360deg);
  }
}
@-webkit-keyframes animate4 {
  0% {
    -webkit-transform: perspective(600px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    -webkit-transform: perspective(600px) rotateX(270deg) rotateY(0deg) rotateZ(360deg);
  }
}
@-webkit-keyframes animate5 {
  0% {
    -webkit-transform: perspective(600px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    -webkit-transform: perspective(600px) rotateX(360deg) rotateY(360deg) rotateZ(0deg);
  }
}
@-webkit-keyframes animate6 {
  0% {
    -webkit-transform: perspective(600px) rotateX(0deg) rotateY(180deg) rotateZ(0deg);
  }
  100% {
    -webkit-transform: perspective(600px) rotateX(360deg) rotateY(540deg) rotateZ(0deg);
  }
}

/* for Firefox and IE10 */
@keyframes animate1 {
  0% {
    transform: perspective(600px) rotateX(0deg) rotateY(90deg) rotateZ(0deg);
  }
  100% {
    transform: perspective(600px) rotateX(360deg) rotateY(450deg) rotateZ(0deg);
  }
}
@keyframes animate2 {
  0% {
    transform: perspective(600px) rotateX(0deg) rotateY(270deg) rotateZ(0deg);
  }
  100% {
    transform: perspective(600px) rotateX(360deg) rotateY(630deg) rotateZ(0deg);
  }
}
@keyframes animate3 {
  0% {
    transform: perspective(600px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: perspective(600px) rotateX(450deg) rotateY(0deg) rotateZ(-360deg);
  }
}
@keyframes animate4 {
  0% {
    transform: perspective(600px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: perspective(600px) rotateX(270deg) rotateY(0deg) rotateZ(360deg);
  }
}
@keyframes animate5 {
  0% {
    transform: perspective(600px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: perspective(600px) rotateX(360deg) rotateY(360deg) rotateZ(0deg);
  }
}
@keyframes animate6 {
  0% {
    transform: perspective(600px) rotateX(0deg) rotateY(180deg) rotateZ(0deg);
  }
  100% {
    transform: perspective(600px) rotateX(360deg) rotateY(540deg) rotateZ(0deg);
  }
}