/* ---- layout setup ----*/
html, body {height:100%; overflow:hidden; background:#fff; color:#68708c; font-family: 'Noto Sans KR', sans-serif;}
a {color:#656d78; font-size:14px; text-decoration:none;}
a:hover {color:#656d78;}

/* ----------------------------------------------
login
------------------------------------------------*/
:root {
    --main-color:#5262bc;
}

.loginWrap {width:100%; height:100%; display:flex;}

/* loginBox */
.loginBox, .loginInfoBox {position:relative; z-index:2; height:100%;}
.loginBox .login,
.loginInfoBox .loginInfo {width:360px;}
/* loginInfoBox */
.loginInfoBox {width:70%; background:#5262bc; display:flex; align-items:center; justify-content: space-between; padding: 50px; box-sizing: border-box;}
.loginInfoBox .loginInfo {padding:0 30px; box-sizing:border-box; color:#fff;}
.loginInfoBox .loginInfo h2 {display:block; margin-bottom:20px; font-size:48px; line-height:50px; font-weight:700;}
.loginInfoBox .loginInfo p {font-size:18px;}
/*.icon_box*/
.loginInfoBox > div:first-child {flex: 0 0 auto;}
.loginInfoBox .tit {font-weight: 500; font-size: 28px; letter-spacing: -1px; margin: 8px 0 65px; position: relative; color: #fff;}
.loginInfoBox .tit::after {content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 510px; height: 2px; background: #fff; margin-left: 5px;}
.loginInfoBox.new {justify-content: flex-end; flex-direction: inherit; align-items: center;}
.loginInfoBox.new .loginInfo{width: auto; padding: 0 30px; width: 360px;}
.icon_box ul { list-style: none; padding: 0; margin: 0; display: grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr)); column-gap: 75px; row-gap: 50px;}
.icon_box li {display: flex; align-items: flex-start; position: relative; padding-bottom: 10px; flex-direction: column;}
.icon_box li a{width: 100%; height: 100%; display: block;}
.icon_box li::after {content: ""; position: absolute; left: 0;  right: 0;  bottom: 0; height: 2px; background: #fff;}
.icon_box .img {flex: 0 0 54px; margin-bottom:25px; display: flex; align-items: center; width:100%;}
.icon_box .img img {max-width: 100%; height: auto; display: block;}
.icon_box .txt span {display: block; font-size: 17px; font-weight: 500; line-height: 1.3; color:#fff;}
.icon_box .txt p {margin: 6px 0 0; font-size: 16px; color: #fff; line-height: 1.2em;}
.loginInfo {display: flex; flex-direction: column; align-items: flex-start; justify-content: center;}
.loginInfo h2 {margin: 0 0 8px; font-weight: 800; font-size: clamp(40px, 6vw, 64px); line-height: 1.05;}
.loginInfo p {margin: 0; font-size: clamp(16px, 2vw, 20px); opacity: .95;}




/* login */
.loginBox {width:30%; background:#fff; display:flex; align-items:center; flex-wrap:wrap; overflow:auto;}
.loginBox.fullWidth {width:100%; justify-content:center;}
.loginBox .login {padding:0 30px;}
.loginBox .login h1 {display:block; margin-bottom:20px; color:#5262bc; font-size:30px; line-height:30px; font-weight:500;}
.loginBox .login .loginForm {}
.loginBox .login .loginForm .inputWrap {margin-bottom:16px;}
.loginBox .login .loginForm .inputWrap .addon span,
.loginBox .login .loginForm .inputWrap input {}
.loginBox .login .loginForm .inputWrap .addon span {background:#eef0f4;}
.loginBox .login .loginForm .opt {display:block; margin-bottom:20px; color:#68708c;}
.loginBox .login .loginForm .opt .text {color:#68708c;}
.loginBox .login .loginForm .buttonBox {display:block; margin-bottom:20px; color:#68708c;}
.loginBox .login .loginForm .buttonBox button {font-weight:700; margin:10px 0;}
.loginBox .login .loginForm .infoText {display:block; position:relative; padding-left:24px; color:#68708c; font-size:16px; line-height:22px; margin-bottom:20px;}
.loginBox .login .loginForm .infoText i {position:absolute; top:0; left:0; font-size:20px;}
.loginBox .login .loginForm .infoText a {color:#5262bc; font-size:16px; text-decoration:underline; text-underline-position: under;}
.loginBox .login .loginForm .infoText a:hover {text-decoration:underline;}
.loginBox .login .loginForm .required {display:block; margin-bottom:20px; font-size:14px; text-align:center;}

.loginBox .notIE {padding:0 30px; height:500px;}
.loginBox .notIE .desc {display:flex; align-items: center; font-size:20px; line-height:26px; margin-bottom:20px;}
.loginBox .notIE .desc i {font-size:60px; color:#F60;}
.loginBox .notIE .desc p { margin:0 10px;}
.loginBox .notIE dl { margin:30px 0;}
.loginBox .notIE dl dt {display:flex; align-items: center; font-size:20px;}
.loginBox .notIE dl dt i {display:block; width:30px; height:30px; margin:0 10px;}
.loginBox .notIE dl dt i.edge {background:url(../img/edge.svg) no-repeat; background-size:contain;}
.loginBox .notIE dl dt i.chrome {background:url(../img/chrome.svg) no-repeat; background-size:contain;}
.loginBox .notIE dl dd {}
.loginBox .notIE dl dd a {display:block; font-size:18px; margin:10px; color:#5262bc;}
.loginBox .notIE dl dd a:hover {text-decoration:underline;}

/* ����ó */
.cs_table {}
.cs_table table thead th {border-top: 1px solid #5262bc;}
.cs_table table thead th:last-child {text-align: left;}
.cs_table table th {background: #f3f4fa;}
.cs_table table th, td {padding: 5px 12px; border-left: 1px solid #5262bc; border-bottom: 1px solid #5262bc;}
.cs_table table th:last-child {border-right: 1px solid #5262bc;}
.cs_table table tbody th:last-child {border-bottom: 1px solid #5262bc;}
.cs_table table td:last-child {border-right: 1px solid #5262bc; padding-right: 100px;}
.cs_table table tr:last-child {border-bottom: 1px solid #5262bc;}
@media (max-width:1980px) {
  .loginInfoBox{flex-direction: column-reverse; align-items: normal;}
  .icon_box ul{grid-template-columns:repeat(2, minmax(auto, 1fr)) !important; column-gap:50px;}
  .icon_box li a{display: flex; gap: 10px; width: 100%;}
  .icon_box .img{margin-bottom: 0;}
  .loginInfoBox .loginInfo{width: 100%; padding: 0; justify-content: flex-start;}
  .tit::after{display: none;}
}
@media (max-width:992px) {
	.loginWrap {display:block;}
	.loginBox .login {height:auto; padding:30px;}
	.loginInfoBox {width:100%; height: auto; padding: 0;}
	.loginInfoBox .loginInfo {width:100%; height:auto; padding:0 20px;}
	
	.loginInfoBox .loginInfo h2 {font-size:18px; line-height:20px; margin:10px 0;}
	.loginInfoBox .loginInfo p {display:none;}
	.loginBox {width:100%; height:calc(100% - 68px); justify-content:center;}
	
	.loginInfoBox .loginInfo h2 br{display: none;}
	.loginInfoBox > div:first-child{display: none;}
}