@charset "utf-8";
/* inno-layout */
.inno-layout{overflow:hidden!important;min-height: 100vh;display: flex;flex-direction: column;justify-content: space-between;}

.inno-layout .inno-mcontainer .dev-contents{padding:96px 0}
.inno-layout .container-inner{}
.about-container-inner{width: 100%!important;}
.about-container-inner .dev-contents .page-top{width: 1320px;margin: 0 auto;}

.inno-layout .inno-scontainer{padding-top:72px;}
.inno-layout .inno-scontainer .container-inner{width: 1320px;margin: 0 auto;}
.inno-layout .inno-scontainer .signup-front, .inno-layout .inno-scontainer .signin-front{max-width:424px;margin: 0 auto;}
.inno-layout .inno-scontainer .signup-gate, .inno-layout .inno-scontainer .signup-form, .inno-layout .inno-scontainer .signup-complete{max-width:872px;margin: 0 auto;}

/* --------------header------------- */
.gnb >ul > li.green-li > a:hover{color: #fff!important;}

#inno-header{position: fixed; width: 100%;height: 72px;z-index: 100000;}
.header{position: relative;width: 1320px;margin: 0 auto;box-sizing: border-box;height: 72px;display: flex;align-items: center;justify-content: space-between;}
.logo{width: 84px!important;height: 72px;object-fit: cover;}
.logo a{display: block; width: 84px;height: 38px;background-image: url(../images/logo-white.svg); background-size: 100%;position: absolute;left: 0; top: 50%;transform: translateY(-50%);background-repeat: no-repeat;}

.header-left{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 48px;
  white-space: nowrap;
}

/* my user */
.my-user{display: flex;align-items:center ;justify-content: flex-end;width: fit-content!important;flex-direction: row;gap: 16px;height: 72px!important;flex: 1;}
.my-user-menu, .login-menu{display: flex;flex-direction: row;gap: 16px;align-items: center;white-space: nowrap;}
.my-user a{font-size: 14px;font-weight: 600;line-height: 14px;color: #222;}
.my-user-menu a, .login-menu a{position: relative;}
.my-user-menu a::after, .login-menu a::after{position: absolute;content: "";width: 1px;height: 12px;background-color: #ccc;top: 50%;transform: translateY(-50%);right: -9px;}
.global-btn{position: relative;}
.global-btn i{font-size: 16px;color: #525252;margin-left: 4px;vertical-align: middle;}
.change-text{display: flex;align-items: center;font-size: 14px;font-weight: 600;color: #525252;flex-grow: 1;line-height: 14px;}
.change-text p{width: 36px!important;white-space: nowrap;}
.global-btn-box{width: 52px;}

/* common */
.global-lang{display: none; position: absolute;top: 25px;left: 0%;; border: 1px solid #656565; box-shadow: 0px 2px 2px rgba(0, 0, 0, 2.5%), 0px 4px 4px rgba(0, 0, 0, 5%),0px 8px 8px rgba(0, 0, 0, 6.75%),0px 16px 16px rgba(0, 0, 0, 8%);border-radius: 4px;background-color: #525252;}
.global-lang.active{display: block;} 
.global-lang > li > a{color: #999;font-size: 14px;display: block;padding: 20px;text-align: left;white-space: nowrap;}
.global-lang > li:first-child > a{padding-bottom:0px!important;}
.global-lang > li.active > a{font-weight: 600;color: #6AEAD3;}

/* gnb */
.gnb{display: flex;align-items: center;justify-content: center;}
.gnb > ul{display: flex;flex-direction: row;justify-content: space-evenly;gap: 32px;}
.gnb > ul > li{position: relative;height: 72px;display: flex;align-items: center;}
.gnb > ul > li > a{font-weight: 400; color: #444;display: block;height: 72px;display: flex;align-items: center;justify-content: center;width: 100%;position: relative;font-size: 16px;transition: all 0.3s}

.gnb-sub{display: none; position: absolute;border-radius: 4px;background-color: #525252;border: 1px solid #656565;z-index: 100000000;top: 80%;left: 0;}
.gnb-sub.active{display: block;}
.gnb-sub > li{white-space: nowrap;padding: 16px 16px 0px 16px;}
.gnb-sub > li:last-child{padding-bottom: 16px;}
.gnb-sub > li > a{color: #eee;transition: all 0.3s;display: block;}
.gnb-sub > li > a:hover, .gnb > ul > li.active > a{color: #6AEAD3!important;}

.fixed{position: fixed!important;}
.register-ch-btn{color: #fff!important;font-size: 14px!important;height: 35px!important;font-weight: 500!important;}
.register-ch-btn:hover{color: #fff!important;}

/* header hover&active(black)*/
#inno-header:hover{background-color: rgba(0, 0, 0, 0.8);}
#inno-header.black{background-color: rgba(0, 0, 0, 0.8)!important;}
#inno-header.black .logo a,#inno-header:hover .logo a{background-image: url(../images/logo-black.svg);}
#inno-header:hover .gnb > ul > li > a,#inno-header:hover .global-btn p{color: #fff;}
#inno-header.black .gnb > ul > li > a,#inno-header.black .global-btn p{color: #fff;}
#inno-header:hover .gnb > ul > li:hover > a, #inno-header.black .gnb > ul > li:hover > a, #inno-header:hover .my-user a:hover{color: #6AEAD3;}
#inno-header:hover .my-user a, #inno-header:hover .global-btn i{color: #fff;}
#inno-header.black .my-user a, #inno-header.black .global-btn i{color: #fff;}
#inno-header .global-btn:hover p, #inno-header .global-btn:hover i{color: #6AEAD3;}

/* footer */
#inno-footer{background-color: #222;margin-top: 96px;}
.footer{width: 1320px!important;margin: 0 auto;box-sizing: border-box;height: auto;padding: 40px 0px;display: flex;flex-direction: row;}
.footer > div{transition: all 0.3s;}
.footer-l{width: 60%;}
.footer-r{width: 40%;}
.foot-logo{width: 130px;height: 142px;}
.foot-logo a{display: block;}
.foot-address{margin-top: 30px;}
.foot-address address, .foot-copy p{font-size: 14px;font-weight: 300;line-height: 150%;}
.foot-address address{color: #eee;}
.foot-copy p{color: #999;margin-top:4px;}
.footer-r{display: flex;flex-direction: column;align-items: flex-end;justify-content: space-between;}
.foot-kakao{background-color: #FFE500;}
.foot-kakao:hover{background-color: rgb(255, 221, 0)!important;}
.foot-kakao img{vertical-align: middle;width: 16px;height: 16px;margin-right: 5px;}
.foot-kakao p{color: #191919!important;font-weight: 500;}
.foot-btn{display: flex;flex-direction: column;align-items: end;}
.foot-btn > a{cursor: pointer;width: fit-content; height: 40px;border: 1px solid #444;border-radius: 4px;margin-bottom: 8px;display: flex;align-items: center;justify-content: space-between;padding: 0 12px;}
.foot-btn > a:first-child{padding: 0 16px;background-color: #60D1BD;color: #fff;font-size: 14px;}
.foot-btn > a:first-child:hover{background-color: #55B6A4;}
.foot-btn > a:last-child:hover{background-color: #444;border: inset 1px solid #444;}
.foot-btn > a:last-child{margin-bottom: 0;}
.foot-btn p{font-size: 14px;color: #fff;display: inline-block;letter-spacing: -0.6px;white-space: nowrap;font-weight: 500;}
.foot-btn i{color: #fff;font-size: 15px;margin-left: 5px;}
.foot-sns{margin-top: 20px;display: flex;gap:8px;}
.foot-sns a{width: 28px;height: 28px;background-color: #fff;border-radius: 50%;display: block;display: flex;align-items: center;justify-content: center;}
.foot-sns i{color: #444;}
.foot-terms{display: flex;flex-direction: row;align-items: flex-end;margin-top: 20px;gap: 24px;}
.foot-terms div{display: flex;flex-direction: row;gap: 4px;align-items: center;position: relative;}
.foot-terms div::after{position: absolute;content: "";width: 1px;height:15px;background-color: #525252;right: -12px;top: 50%;transform: translate(-50%,-50%);}
.foot-terms div:last-child::after{display: none;}
.foot-terms a{font-size: 16px;color: #ccc;font-weight: 300;line-height: 150%;}
.foot-terms i{font-size: 16px;color: #fff;vertical-align: middle;}

/* tool-tip */
.tippy-tooltip.blue-theme{
  background:linear-gradient(90deg, black, gray);
  border: 1px solid #111;
  border-radius: 30px;
  color: #fff;
  box-shadow: 5px 5px 10px #555;
  padding: 10px 0;
}
.tippy-tooltip.blue-theme .tippy-arrow{
  border-bottom-color: linear-gradient(90deg, black, gray);
}



/* **************************************** *
 * error
 * **************************************** */
.error-layout{overflow:hidden;display:flex; flex-direction:column; position:relative; height:100%; box-sizing:border-box}
.inno-error{flex:1; display:flex; align-items:center; justify-content:center; position:relative; background:linear-gradient(to right, #DAF8F3, #FFEECE)}
.inno-error .error-inner{display:flex; flex-direction:column; justify-content:center; justify-content:flex-start; width:100%; height:100%}
.inno-error .error-cont{display:flex; align-items:center; justify-content:center; flex:1}
.inno-error .error-bottom{display:flex; align-items:center; justify-content:center; position:relative; height:400px; }

.inno-error .error-logo{display:flex; justify-content:center; margin:55px 0}
.inno-error .error-logo > a{display:block; width:114px; height:48px; background:url(../images/logo-white.svg) 50% 50% no-repeat; background-size:114px 48px}

.inno-error .error-message{display:flex; flex-direction:column; align-items:center; position:relative; padding-top:15px; z-index:1}
.inno-error .error-message .message-tit{line-height:1.2em; text-align:center; color:#222; font-size:25px; font-weight:500; letter-spacing:-0.5px}
.inno-error .error-message .message-info{margin-top:10px}
.inno-error .error-message .message-info p{line-height:1.8em; text-align:center; color:#525252; font-size:18px; font-weight:400; letter-spacing:-0.2px}
.inno-error .error-message .message-btn{display:flex; align-items:center; justify-content:center; position:relative; height:48px; margin-top:30px; padding:0 25px; color:#fff; font-size:16px; font-weight:500; letter-spacing:-0.2px; background-color:#60D1BD; border-radius:200px; transition: all .20s ease; box-sizing:border-box}
.inno-error .error-message .message-btn:hover{background-color:#55B6A4}

.inno-error .error-code strong{letter-spacing: -12px; display:block; position:relative; left:258px; bottom:-40px; font-weight:800; font-size:440px; color:#bbb; opacity:0.64; transform:rotate(-8deg); transform-origin:bottom left}

.inno-error .error-wave{position:absolute; bottom:0; left:0; width:100%; height:5%}
.inno-error .error-wave .wave-motion
{
	position:absolute; top:-80px; width:6400px; height:198px; background:url(../images/error-wave-motion.svg) repeat-x;
	animation:wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
	transform:translate3d(0, 0, 0);
	opacity:0.9
}
.inno-error .error-wave .wave-motion:nth-of-type(2)
{
	top:-155px;
	animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite, swell 7s ease -1.25s infinite;
	opacity:0.5;
}
.inno-error .error-wave .wave-back01{position:absolute; width:100%; top:-560px; height:1068px; background:url(../images/error-wave-back01.svg) no-repeat right 0}
.inno-error .error-wave .wave-back02{position:absolute; width:100%; top:-255px; height:291px; background:url(../images/error-wave-back02.svg) no-repeat left bottom}
@keyframes wave{0%{margin-left:0} 100%{margin-left:-1600px}}
@keyframes swell
{
  0%,
  100%{transform: translate3d(0, -25px, 0)}
  50%{transform: translate3d(0, 5px, 0)}
}