@charset "utf-8";

/* 로그인 */
html, body {
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto
}
body {
	background: #f8fbff;
	color: #0b1b36
}
.cms-login {
	position: relative;
	min-height: 100vh;
	padding: 32px 3vw 28px;
	overflow: hidden;
	box-sizing: border-box;
	background-color: #fff;
	background-image: url("./img/bg.png");
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 100% auto;
}
.cms-login__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns:minmax(220px, 1.08fr) minmax(636px, 1.67fr);
	gap: 36px;
	align-items: center;
	width: 100%;
	max-width: 1760px;
	min-height: calc(100vh - 60px);
	box-sizing: border-box;
	margin: 0 auto
}
.cms-panels {
	display: grid;
	grid-template-columns:minmax(360px, .95fr) minmax(240px, .72fr);
	gap: 36px;
	align-items: start;
	align-self: center
}
.cms-intro {
	position: relative;
	align-self: center;
	padding: 20px 0 40px
}
.cms-intro h1 {
	margin: 0;
	font-size: clamp(44px, 4vw, 70px);
	line-height: 1.35;
	letter-spacing: -.055em;
	font-weight: 800;
	color: #0a1a34
}
.cms-intro h1 strong {
	color: #0755cf;
	font-weight: 800
}
.cms-intro__line {
	display: block;
	width: 52px;
	height: 6px;
	margin: 34px 0 24px;
	border-radius: 10px;
	background: #0b5be2
}
.cms-intro__desc {
	margin: 0;
	color: #556176;
	font-size: 20px;
	line-height: 1.8;
	letter-spacing: -.02em
}
.cms-features {
	display: grid;
	gap: 24px;
	margin: 72px 0 0;
	padding: 0;
	list-style: none
}
.cms-features li {
	display: flex;
	align-items: center;
	gap: 20px;
	font-size: 18px;
	font-weight: 700;
	color: #17243a
}
.cms-icon {
	display: inline-flex;
	flex: 0 0 62px;
	width: 62px;
	height: 62px;
	align-items: center;
	justify-content: center;
	border: 1px solid #dce6f5;
	border-radius: 50%;
	background: #fff;
	color: #075bd9;
	font-size: 28px;
	box-shadow: 0 8px 20px rgba(34, 74, 125, .1)
}
.cms-card {
	box-sizing: border-box;
	border: 1px solid #e6ebf2;
	border-radius: 22px;
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 10px 30px rgba(20, 49, 89, .12)
}
.cms-form {
	padding: 48px 50px 40px
}
.cms-form__head {
	text-align: center
}
.cms-form__lock {
	display: inline-flex;
	width: 88px;
	height: 88px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #eef5ff;
	color: #075bd9;
	font-size: 42px
}
.cms-form h2 {
	margin: 24px 0 10px;
	font-size: 34px;
	line-height: 1.3;
	letter-spacing: -.04em
}
.cms-form__head p {
	margin: 0;
	color: #657187;
	font-size: 18px;
	line-height: 1.7
}
.cms-form__body {
	margin-top: 34px;
	padding-top: 32px;
	border-top: 1px solid #dce3ec
}
.cms-field {
	margin-bottom: 26px
}
.cms-field label {
	display: block;
	margin-bottom: 10px;
	font-size: 17px;
	font-weight: 700;
	color: #142039
}
.cms-input {
	position: relative
}
.cms-input > i {
	position: absolute;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
	color: #7e899c;
	font-size: 22px
}
.cms-input input {
	box-sizing: border-box;
	width: 100%;
	height: 64px;
	padding: 0 54px;
	border: 1px solid #ccd5e1;
	border-radius: 10px;
	background: #fff;
	color: #101c32;
	font-size: 17px;
	outline: 0;
	transition: .2s
}
.cms-input input::placeholder {
	color: #929cad
}
.cms-input input:focus {
	border-color: #075bd9;
	box-shadow: 0 0 0 3px rgba(7, 91, 217, .1)
}
.cms-password-toggle {
	position: absolute;
	right: 16px;
	top: 50%;
	width: 36px;
	height: 36px;
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	background: none;
	color: #758197;
	font-size: 19px;
	cursor: pointer
}
.cms-login-options {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 4px 0 26px;
	color: #657187;
	font-size: 15px
}
.cms-login-options label {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer
}
.cms-login-options input {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: #075bd9
}
.cms-login a {
	color: #075bd9;
	text-decoration: none
}
.cms-login a:hover {
	text-decoration: underline
}
.cms-submit {
	width: 100%;
	height: 68px;
	border: 0;
	border-radius: 10px;
	background: linear-gradient(90deg, #075bdd, #0648c8);
	color: #fff;
	font-size: 21px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 9px 18px rgba(7, 79, 200, .2)
}
.cms-submit:hover {
	background: #0648c8
}
.cms-form__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 34px;
	padding-top: 24px;
	border-top: 1px solid #e1e6ed;
	color: #667287;
	font-size: 14px
}
.cms-form__foot span i {
	margin-right: 7px
}
.cms-side {
	display: grid;
	gap: 20px;
	align-self: start
}
.cms-info {
	padding: 28px 30px
}
.cms-info h3 {
	margin: 0 0 24px;
	font-size: 21px;
	letter-spacing: -.03em
}
.cms-role, .cms-mode {
	display: flex;
	gap: 18px;
	align-items: flex-start
}
.cms-role + .cms-role, .cms-mode + .cms-mode {
	margin-top: 25px
}
.cms-role .cms-icon, .cms-mode .cms-icon {
	flex-basis: 54px;
	width: 54px;
	height: 54px;
	border: 0;
	box-shadow: none;
	font-size: 24px
}
.cms-role:nth-of-type(2) .cms-icon {
	background: #e8fff5;
	color: #0aaa55
}
.cms-role:first-of-type .cms-icon {
	background: #f1edff;
	color: #6948e8
}
.cms-role strong, .cms-mode strong {
	display: block;
	margin: 2px 0 5px;
	font-size: 17px
}
.cms-mode .cms-icon {
	background: #075bd9;
	color: #fff
}
.cms-mode + .cms-mode .cms-icon {
	background: #13ad70
}
.cms-mode + .cms-mode strong {
	color: #0ca468
}
.cms-copyright {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 9px;
	z-index: 1;
	margin: 0;
	text-align: center;
	color: #7b8798;
	font-size: 13px
}

/* 비밀번호 초기화 문의 */
.cms-password-help-blocker.blocker {
	background-color: rgba(26, 45, 72, .35)
}
.cms-password-help {
	display: none
}
.cms-password-help.jmodal {
	max-width: 860px
}
.cms-password-help .content {
	border: 0;
	border-radius: 14px;
	box-shadow: 0 18px 50px rgba(17, 35, 61, .22)
}
.cms-password-help__header {
	position: relative;
	display: flex;
	gap: 18px;
	align-items: center;
	padding: 30px 34px 22px
}
.cms-password-help__lock {
	display: inline-flex;
	flex: 0 0 50px;
	width: 50px;
	height: 50px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #edf5ff;
	color: #075bd9;
	font-size: 22px
}
.cms-password-help__header h2 {
	margin: 0 0 7px;
	font-size: 23px;
	letter-spacing: -.04em
}
.cms-password-help__header p {
	margin: 0;
	color: #68758a;
	font-size: 13px;
	line-height: 1.6
}
.cms-password-help__close {
	position: absolute;
	top: 18px;
	right: 22px;
	padding: 0;
	border: 0;
	background: none;
	color: #68758a;
	font-size: 24px;
	cursor: pointer
}
.cms-password-help__body {
	padding: 0 34px 22px;
	overflow-y: auto
}
.cms-password-help__body h3 {
	margin: 0 0 14px;
	font-size: 15px
}
.cms-password-help__roles {
	padding: 20px;
	border: 1px solid #dfe6ef;
	border-radius: 10px
}
.cms-password-help__role-list {
	display: grid;
	grid-template-columns:repeat(2, 1fr);
	gap: 16px
}
.cms-password-help__role {
	display: flex;
	gap: 16px;
	align-items: center;
	padding: 18px;
	border: 1px solid #e2e8f0;
	border-radius: 9px
}
.cms-password-help__role > span {
	display: inline-flex;
	flex: 0 0 50px;
	width: 50px;
	height: 50px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 23px
}
.cms-password-help__role.operator > span {
	background: #e8fbf2;
	color: #16b568
}
.cms-password-help__role.admin > span {
	background: #edf3ff;
	color: #075bd9
}
.cms-password-help__role strong {
	display: block;
	margin-bottom: 5px;
	font-size: 15px
}
.cms-password-help__role.operator strong {
	color: #13a960
}
.cms-password-help__role.admin strong {
	color: #075bd9
}
.cms-password-help__role p {
	margin: 0;
	color: #6b778a;
	font-size: 12px;
	line-height: 1.55
}
.cms-password-help__guide {
	display: grid;
	grid-template-columns:1fr 1fr;
	gap: 28px;
	margin-top: 22px
}
.cms-password-help__guide > section + section {
	padding-left: 28px;
	border-left: 1px solid #e0e6ee
}
.cms-password-help__contacts {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none
}
.cms-password-help__contacts li {
	display: flex;
	gap: 13px;
	align-items: center;
	min-height: 54px;
	padding: 8px 13px;
	box-sizing: border-box;
	border: 1px solid #e1e7ef;
	border-radius: 8px;
	color: #6b778a;
	font-size: 11px
}
.cms-password-help__contacts i {
	width: 24px;
	color: #718096;
	font-size: 21px;
	text-align: center
}
.cms-password-help__contacts strong {
	display: block;
	margin-bottom: 3px;
	color: #27354a;
	font-size: 12px
}
.cms-password-help__steps ol {
	display: grid;
	gap: 13px;
	margin: 0;
	padding: 0;
	list-style: none
}
.cms-password-help__steps li {
	position: relative;
	display: flex;
	gap: 12px;
	align-items: flex-start
}
.cms-password-help__steps li > span {
	display: inline-flex;
	position: relative;
	z-index: 1;
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #eaf2ff;
	color: #075bd9;
	font-size: 12px;
	font-weight: 700
}
.cms-password-help__steps li:not(:last-child)::after {
	position: absolute;
	top: 27px;
	left: 13px;
	width: 2px;
	height: 18px;
	background: #d9e3f1;
	content: ''
}
.cms-password-help__steps strong {
	display: block;
	margin-bottom: 3px;
	font-size: 12px
}
.cms-password-help__steps p {
	margin: 0;
	color: #6b778a;
	font-size: 11px;
	line-height: 1.45
}
.cms-password-help__footer {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	padding: 17px 34px 24px;
	border-top: 1px solid #e3e8ef
}
.cms-password-help__button {
	height: 46px;
	border: 1px solid #d5dce6;
	border-radius: 7px;
	background: #fff;
	color: #27354a;
	font-weight: 700;
	cursor: pointer
}
.cms-password-help__button i {
	margin-right: 6px;
	color: #68758a
}
.cms-password-help__button.primary {
	border-color: #075bd9;
	background: #075bd9;
	color: #fff
}

@media (max-width: 1400px) {
	/* 로그인 */
	.cms-login {
		padding: 24px 2.5vw
	}
	.cms-login__grid {
		min-height: calc(100vh - 48px);
		grid-template-columns:minmax(220px, .9fr) minmax(670px, 1.78fr);
		gap: 20px
	}
	.cms-panels {
		grid-template-columns:minmax(390px, 1fr) minmax(260px, .78fr);
		gap: 20px
	}
	.cms-intro h1 {
		font-size: 48px
	}
	.cms-intro__desc {
		font-size: 16px
	}
	.cms-features {
		margin-top: 40px;
		gap: 15px
	}
	.cms-features li {
		gap: 14px;
		font-size: 14px
	}
	.cms-icon {
		flex-basis: 48px;
		width: 48px;
		height: 48px
	}
	.cms-form {
		padding: 34px 36px 28px
	}
	.cms-info {
		padding: 22px
	}
	.cms-info h3 {
		margin-bottom: 18px
	}
	.cms-role p, .cms-mode p {
		font-size: 13px
	}
	.cms-role + .cms-role, .cms-mode + .cms-mode {
		margin-top: 18px
	}
}

@media (min-width: 901px) and (max-height: 900px) {
	/* 로그인 */
	.cms-login {
		padding: 16px 2.5vw
	}
	.cms-login__grid {
		min-height: calc(100vh - 32px);
		gap: 18px
	}
	.cms-panels {
		gap: 18px
	}
	.cms-intro {
		padding: 10px 0
	}
	.cms-intro h1 {
		font-size: 42px
	}
	.cms-intro__line {
		height: 4px;
		margin: 18px 0
	}
	.cms-intro__desc {
		font-size: 14px;
		line-height: 1.6
	}
	.cms-features {
		margin-top: 28px;
		gap: 11px
	}
	.cms-features li {
		font-size: 13px
	}
	.cms-icon {
		flex-basis: 42px;
		width: 42px;
		height: 42px
	}
	.cms-form {
		padding: 22px 28px 18px
	}
	.cms-form__lock {
		width: 54px;
		height: 54px
	}
	.cms-form h2 {
		margin: 12px 0 6px;
		font-size: 26px
	}
	.cms-form__head p {
		font-size: 14px;
		line-height: 1.5
	}
	.cms-form__body {
		margin-top: 16px;
		padding-top: 16px
	}
	.cms-field {
		margin-bottom: 12px
	}
	.cms-field label {
		margin-bottom: 6px;
		font-size: 14px
	}
	.cms-input input {
		height: 48px;
		font-size: 14px
	}
	.cms-login-options {
		margin: 2px 0 13px;
		font-size: 13px
	}
	.cms-login-options input {
		width: 17px;
		height: 17px
	}
	.cms-submit {
		height: 50px;
		font-size: 17px
	}
	.cms-form__foot {
		margin-top: 16px;
		padding-top: 13px;
		font-size: 11px
	}
	.cms-side {
		gap: 12px
	}
	.cms-info {
		padding: 16px 18px
	}
	.cms-info h3 {
		margin-bottom: 13px;
		font-size: 17px
	}
	.cms-role p, .cms-mode p {
		font-size: 11px;
		line-height: 1.45
	}
	.cms-role, .cms-mode {
		gap: 12px
	}
	.cms-role + .cms-role, .cms-mode + .cms-mode {
		margin-top: 12px
	}
	.cms-role .cms-icon, .cms-mode .cms-icon {
		flex-basis: 40px;
		width: 40px;
		height: 40px
	}
	.cms-role strong, .cms-mode strong {
		margin: 0 0 3px;
		font-size: 14px
	}
	.cms-copyright {
		bottom: 4px;
		font-size: 11px
	}
}

@media (max-width: 900px) {
	/* 로그인 */
	html, body {
		height: auto;
		overflow-x: hidden;
		overflow-y: auto
	}
	.cms-login {
		height: auto;
		min-height: 100vh;
		padding: 24px 18px 30px;
		overflow: hidden
	}
	.cms-login__grid {
		display: block;
		height: auto
	}
	.cms-panels {
		display: block
	}
	.cms-intro {
		padding: 24px 4px 36px
	}
	.cms-intro h1 {
		font-size: 38px
	}
	.cms-intro__desc {
		font-size: 16px
	}
	.cms-features {
		display: none
	}
	.cms-form {
		padding: 36px 24px 28px
	}
	.cms-form__lock {
		width: 70px;
		height: 70px
	}
	.cms-form h2 {
		font-size: 28px
	}
	.cms-form__head p {
		font-size: 15px
	}
	.cms-side {
		display: grid;
		grid-template-columns:1fr;
		margin-top: 24px
	}
	.cms-info {
		min-height: 0
	}
	.cms-form__foot {
		display: grid;
		gap: 12px
	}
	.cms-copyright {
		position: relative;
		bottom: auto;
		margin: 24px 0 0
	}

	/* 비밀번호 초기화 문의 */
	.cms-password-help__header {
		padding: 24px 22px 18px
	}
	.cms-password-help__header p br, .cms-password-help__role p br {
		display: none
	}
	.cms-password-help__body {
		padding: 0 22px 18px
	}
	.cms-password-help__role-list, .cms-password-help__guide {
		grid-template-columns:1fr
	}
	.cms-password-help__guide > section + section {
		padding: 20px 0 0;
		border-top: 1px solid #e0e6ee;
		border-left: 0
	}
	.cms-password-help__footer {
		padding: 14px 22px 20px
	}
	.cms-password-help__button.primary {
		grid-column:1 / -1;
		grid-row:1
	}
}