@charset "UTF-8";

@font-face {
	font-family: 'Pretendard Variable';
	font-weight: 45 920;
	font-style: normal;
	font-display: swap;
	src: url('../fonts/PretendardVariable.woff2') format('woff2-variations');
}


/* Scroll Design */

::-webkit-scrollbar {
	position: fixed;
	width: 10px;
	height: 10px;
	cursor: ns-resize;
}
::-webkit-scrollbar-track {
	margin: 1px 0;
	background: transparent;
}
::-webkit-scrollbar-thumb {
	border: 2px solid transparent;
	border-radius: 10px;
	background-color: rgb(0 0 0 / 10%);
	background-clip: padding-box;
	cursor: ns-resize;
}
::-webkit-scrollbar-thumb:hover {
	border-width: 1px;
	background-color: rgb(0 0 0 / 20%);
}

*,
*::before,
*::after {
	word-break: break-all;
	box-sizing: border-box;
}
@media (prefers-reduced-motion: no-preference) {
	:root {
		scroll-behavior: smooth;
	}  }

html {
	height: 100%;
	font-size: 14px;
}
body {
	display: flex;
	flex-direction: column;
	height: 100%;
	line-height: 1.5;
	font-family: 'Pretendard Variable', sans-serif;
	font-weight: 500;
	color: #222;
	letter-spacing: -0.2px;
	margin: 0;
	overflow-y: overlay;
	overflow-x: hidden;
}
.none {
	display: none;
}
a {
	display: inline-block;
	color: #222;
	text-decoration: none;
	transition: all 0.2s ease;
}
a:hover {
	color: #aaa;
}
a:focus {
	outline: none;
	appearance: none;
	box-shadow: none !important;
}
a:not([href]):not([class]), a:not([href]):not([class]):hover {
	color: inherit;
	text-decoration: none;
}
strong {
	font-weight: 700;
}
p {
	margin: 0;
	user-select: none;
}
small {
	font-size: 12px;
}
figure {
	margin: 0;
}
input,
button,
select,
optgroup,
textarea {
	line-height: inherit;
	font-family: inherit;
	font-size: 14px;
	margin: 0;
	outline: none;
}
input:hover,
input:focus {
	border-color: #aaa;
}
input:not([type="file"])::placeholder {
	color: #aaa;
}

button,
select {
	text-transform: none;
	transition: all 0.2s ease;
}
[role=button] {
	cursor: pointer;
}
select {
	word-wrap: normal;
}
select:disabled {
	opacity: 1;
}
[list]::-webkit-calendar-picker-indicator {
	display: none;
}
em {
	display: inline-block;
	font-style: normal;
}
textarea {
	width: 100%;
	line-height: 24px;
	color: #222;
	padding: 15px;
	border: 1px solid #ccc;
	border-radius: 10px;
	background: transparent;
	resize: vertical;
	transition: all 0.2s ease;
}
textarea:hover,
textarea:focus {
	outline: none;
	border-color: #aaa;
}
textarea.no_resize {
	resize: none !important;
}

.cp {
	cursor: pointer;
}
.cp:hover {
	text-decoration: underline;
	text-underline-position: under;
	text-decoration-color: #aaa;
}

.mo_view {
	display: none !important;
}

h1 {
	line-height: 50px;
	font-size: 40px;
}
h2 {
	line-height: 45px;
	font-size: 34px;
}
h3 {
	line-height: 40px;
	font-size: 30px;
}
h4 {
	line-height: 32px;
	font-size: 24px;
}
h5 {
	line-height: 28px;
	font-size: 20px;
}
h1, h2, h3, h4, h5, dl, dd, ul {
	margin: 0;
	padding: 0;
	user-select: none;
}
li {
	list-style: none;
}
.flex {
	display: flex !important;
	align-items: center;
}
.f_column {
	flex-direction: column !important;
}
.f_center {
	justify-content: center !important;
}
.f_between {
	justify-content: space-between !important;
}
.f_baseline {
	align-items: baseline !important;
}
.f_auto {
	flex: 1;
}
.f_100 {
	flex: 0 0 100% !important;
}
.f_wrap {
	flex-wrap: wrap !important;
}
.fluid {
	width: 100% !important;
}

.w100 {
	width: 100%;
}
.h100 {
	height: 100%;
}

.cut {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.hide {
	display: none !important;
}

button {
	border: none;
	background-color: transparent;
}
.btn {
	line-height: 30px;
	font-weight: 500;
	color: #fff;
	padding: 0 15px;
	white-space: nowrap;
	border: none;
	border-radius: 10px;
	background: #aaa;
}
.btn:hover {
	color: #fff;
	background: #777;
}
.btn:hover:focus {
	color: #fff;
}
.btn.alt {
	line-height: 20px;
	color: #222;
	padding: 0 5px;
	background: transparent;
}
.btn.sm {
	line-height: 24px;
	font-size: 12px;
	padding: 0 10px;
	border-radius: 7px;
}
.btn.big {
	line-height: 50px;
	font-size: 16px;
	padding: 0 25px;
	border-radius: 10px;
}
.btn.alt:hover {
	color: #555;
}
.btn.primary {
	background: #003664;
}
.btn.primary:hover {
	background: #091f70;
}
.btn.blue {
	background: #0C70F5 !important;
}
.btn.blue:hover {
	background: #005bd7 !important;
}
.btn.red {
	background: #C13531;
}
.btn.red:hover {
	background: #b40000;
}
.btn.black {
	background: #222;
}
.btn.black:hover {
	background: #000;
}
.btn:disabled {
	color: #fff;
	background: #aaa;
}
.btn.line {
	line-height: 28px;
	color: #555;
	border: 1px solid #ccc;
	background: transparent !important;
}
.btn.line:hover {
	color: #555;
	border-color: #aaa;
	background: transparent;
}
.btn.line:hover:focus {
	color: #555;
}
.btn.big.line {
	line-height: 38px;
	font-size: 15px;
	padding: 0 20px;
	border-radius: 10px;
}
.btn.line.primary {
	color: #003664;
	border-color: #003664;
}
.btn.line.black {
	color: #333;
	border-color: #333;
}
.btn.line.red {
	color: #C13531;
	border-color: #C13531;
}
.btn.line.red:hover {
	color: #b40000;
	border-color: #b40000;
}
.btn.icon {
	line-height: unset;
	padding: 0;
	background: transparent;
}
.btn.icon:hover {
	background: transparent;
}
.btn.line:disabled {
	color: #aaa;
	border-color: #aaa;
	background: transparent;
}
.btn > img {
	width: 16px;
	margin-right: 10px;
}

.a_box {
	display: inline-block;
	line-height: 36px;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	padding: 0 20px;
	border-radius: 15px;
	cursor: default;
}
.a_box.sm {
	line-height: 26px;
	font-size: 12px;
	padding: 0 15px;
	border-radius: 10px;
}
.a_box.sub {
	color: #333;
	background: #f2f2f2;
}
.a_box.purple {
	color: #fff;
	background: #8A6EF3;
}
.a_box.mint {
	color: #fff;
	background: #31afd7;
}
.a_box.red {
	color: #fff;
	background: #C13531;
}
.a_box.green {
	color: #fff;
	background: #0BC677;
}

.t_gray {
	color: #999 !important;
}
.t_blue {
	color: #0C70F5 !important;
}
.t_red {
	color: #E13731 !important;
}
.t_green {
	color: #0BC677 !important;
}

.mt5 {
	margin-top: 5px !important;
}
.mt10 {
	margin-top: 10px !important;
}
.mt20 {
	margin-top: 20px !important;
}
.mt30 {
	margin-top: 30px !important;
}
.mt40 {
	margin-top: 40px !important;
}
.mt50 {
	margin-top: 50px !important;
}
.mt100 {
	margin-top: 100px !important;
}
.mt240 {
	margin-top: 240px !important;
}
.mr5 {
	margin-right: 5px !important;
}
.mr10 {
	margin-right: 10px !important;
}
.mr20 {
	margin-right: 20px !important;
}
.mr30 {
	margin-right: 30px !important;
}
.mr40 {
	margin-right: 40px !important;
}
.mr50 {
	margin-right: 50px !important;
}
.mta {
	margin-top: auto !important;
}
.mla {
	margin-left: auto !important;
}
.mra {
	margin-right: auto !important;
}
.ml5 {
	margin-left: 5px !important;
}
.ml10 {
	margin-left: 10px !important;
}
.ml20 {
	margin-left: 20px !important;
}
.ml30 {
	margin-left: 30px !important;
}
.ml40 {
	margin-left: 40px !important;
}
.ml50 {
	margin-left: 50px !important;
}
.ml100 {
	margin-left: 100px !important;
}
.mb0 {
	margin-bottom: 0 !important;
}
.mb10 {
	margin-bottom: 10px !important;
}
.mb20 {
	margin-bottom: 20px !important;
}
.mb30 {
	margin-bottom: 30px !important;
}
.mb40 {
	margin-bottom: 40px !important;
}
.mb50 {
	margin-bottom: 50px !important;
}

.t_center {
	text-align: center !important;
}
.t_left {
	text-align: left !important;
}
.t_right {
	text-align: right !important;
}
.bold {
	font-weight: 700 !important;
}

.mo {
	display: none !important;
}

.divider {
	margin: 50px 0;
	border-top: 1px solid #eee;
}

.modal-dialog.modal-md {
	max-width: 800px;
}
.modal-dialog.modal-lg {
	max-width: 1200px;
}

.modal-content {
	padding: 30px;
	border: none;
	border-radius: 20px;
}
.modal-header {
	padding: 0 0 20px;
	border-bottom: 1px solid #ebebeb;
}
.modal-title {
	font-weight: 700;
}

.modal-body {
	padding: 20px;
}
.modal-body .table_wrap:first-child {
	margin-top: 0;
}

.modal-footer {
	justify-content: center;
	padding: 20px 0 0;
	border-top: none;
}
.modal-footer .btn {
	min-width: 120px;
	line-height: 40px;
	padding: 0 20px;
}

.quest_count {
	display: flex;
	align-items: center;
	gap: 5px;
}
.quest_count li {
	line-height: 10px;
	font-size: 16px;
	font-weight: 700;
	margin: 5px 0;
}
.quest_count li + li {
	padding-left: 10px;
	margin-left: 10px;
	border-left: 1px solid #ccc;
}

.table_wrap {
	position: relative;
	margin-top: 15px;
}
.table_wrap .table_top {
	display: flex;
	align-items: center;
	font-weight: 700;
	color: #0C70F5;
}
.table_wrap table {
	width: 100%;
	caption-side: bottom;
	border-collapse: collapse;
	border-spacing: 0;
	background: #fff;
}
.table_wrap table.fixed {
	table-layout: fixed;
}
.table_wrap table thead {
	border-top: 2px solid #222;
	border-bottom: 1px solid #ddd;
	background: #fafafa;
}
.table_wrap table thead td {
	background: #fff;
}
.table_wrap .border tr > * {
	border-left: 2px solid #ddd;
	border-right: 2px solid #ddd;
	border-bottom: 2px solid #ddd;
}
.table_wrap table tr > * {
	font-size: 20px;
	padding: 10px;
	text-align: center;
}
.table_wrap table tr th {
	font-weight: 700;
	border-bottom: 1px solid #ddd;
}
.table_wrap table tr td {
	height: 50px;
	font-weight: 500;
	border-bottom: 1px solid #ddd;
}
.table_wrap table tr th.fault,
.table_wrap table tr td.fault {
	color: #C13531;
	background: #ffdad9;
}

button.close {
	width: 24px;
	height: 24px;
	border-radius: 5px;
	background: url("../images/cancel.svg") no-repeat center / 15px;
}
button.close:hover {
	background-color: #f5f5f5;
}

/* index */

#index header {
	background: #0C70F5;
}
#index header .inner {
	display: flex;
	align-items: center;
	width: 1200px;
	height: 80px;
	color: #fff;
	margin: 0 auto;
}
#index header .inner figure {
	width: 200px;
}
#index article .inner {
	width: 1200px;
	padding: 50px 0;
	margin: 0 auto;
}
#index article .inner > h5 {
	margin-bottom: 10px;
}
#index article .inner > ul {
	margin-bottom: 20px;
}
#index article .inner > ul li:before {
	display: inline-block;
	content: "ㆍ";
	padding: 0 5px;
}
#index article .inner > ul li + li {
	margin-top: 5px;
}
#index article .inner > ul li a {
	font-size: 13px;
	font-weight: 700;
	color: #555;
}



/* landing */

#landing header {
	background: #fff;
}
#landing header .btn_wrap button {
	font-weight: 500;
	color: #222;
}

#landing > article {
	height: calc(100% - 80px);
	padding-bottom: 100px;
	overflow: overlay;
}
#landing .top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 1200px;
	margin: 0 auto;
	padding: 20px 0;
}
#landing .txt_space {
	position: relative;
}
#landing .txt_space > h1 {
	line-height: 50px;
	font-size: 40px;
	font-weight: 700;
}
#landing .txt_space > p {
	line-height: 24px;
	font-size: 16px;
	font-weight: 500;
	margin-top: 20px;
}
#landing .txt_space .btn_wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 50px;
}
#landing .txt_space .btn_wrap .goTest {
	width: 220px;
}
#landing .txt_space .btn_wrap .inquiry {
	width: 160px;
	background: #eee;
}
#landing .txt_space .btn_wrap .inquiry:hover {
	color: #222;
	background: #ccc;
}
#landing .txt_space .date {
	margin-top: 50px;
}
#landing .txt_space .date .d_wrap > label {
	line-height: 25px;
	font-weight: 500;
	color: #777;
}
#landing .txt_space .date .d_wrap > h5 {
	font-weight: 700;
}
#landing .txt_space .date .d_wrap + .d_wrap {
	margin-top: 20px;
}
#landing .txt_space .info {
	font-size: 13px;
	margin-top: 50px;
}
#landing .txt_space .info > .install {
	font-weight: 700;
	color: #133AA5;
	text-decoration:  underline;
	text-underline-position: under;
}

#landing .img_space {
	max-width: 600px;
}

#landing .bot {
	width: 1320px;
	padding: 60px;
	margin: 80px auto 0;
	border-radius: 50px 0;
	background: #DAEEFF url("../images/bot_bg.png") no-repeat top right;
}
#landing .bot > h5 {
	font-weight: 500;
	color: #005BAB;
}
#landing .bot > h3 {
	font-size: 30px;
	font-weight: 700;
	margin-top: 10px;
}
#landing .bot > p {
	font-size: 16px;
	font-weight: 500;
	margin-top: 20px;
}
#landing .apply {
	position: relative;
	display: flex;
	gap: 20px;
	width: 1060px;
	margin-top: 50px;
}
#landing .apply li {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-direction: column;
	gap: 30px;
	height: 180px;
	padding: 20px;
	border-radius: 10px;
	background: #fff;
}
#landing .apply li.step1 {
	flex: 0 0 230px;
}
#landing .apply li.step2 {
	flex: 0 0 230px;
}
#landing .apply li.step3 {
	flex: 0 0 290px;
}
#landing .apply li.step4 {
	flex: 0 0 250px;
}
#landing .apply li.step4:before {
	position: absolute;
	top: -95px;
	left: -25px;
	width: 80px;
	height: 146px;
	content: "";
	background: url("../images/character_1.svg") no-repeat center / 100%;
}
#landing .apply li.step4:after {
	position: absolute;
	right: -135px;
	bottom: -10px;
	width: 150px;
	height: 127px;
	content: "";
	background: url("../images/character_2.svg") no-repeat center / 100%;
}
#landing .apply li > figure {
	max-width: 50px;
}
#landing .apply li > p {
	height: 40px;
	line-height: 20px;
	font-weight: 500;
	text-align: center;
}
#landing .apply li > p > b {
	color: #185BCC;
}

/* login */

#login header {
	background: #fff;
}
#login header .btn_wrap button {
	font-weight: 500;
	color: #222;
}
#login form[name='login_form'] {
	width: 400px;
	text-align: center;
	margin: 0 auto;
	padding: 100px 0;
}
#login form[name='login_form'] > h1 {
	font-size: 40px;
	font-weight: 700;
}
#login form[name='login_form'] > h5 {
	font-weight: 500;
	color: #005BAB;
	margin-top: 20px;
}
#login form[name='login_form'] .input_wrap {
	margin-top: 50px;
}
#login form[name='login_form'] .input_wrap > input {
	width: 100%;
	line-height: 30px;
	font-size: 16px;
	font-weight: 500;
	color: #222;
	padding: 10px 20px;
	border: 1px solid #ccc;
	border-radius: 10px;
}
#login form[name='login_form'] .input_wrap > input + input {
	margin-top: 15px;
}
#login form[name='login_form'] .btn.login {
	height: 50px;
	font-size: 16px;
	font-weight: 700;
	margin-top: 30px;
}

/* check_results */

#check_results > article {
	height: 100%;
	overflow: overlay;
}
#check_results .inner2 {
	position: relative;
	width: 1200px;
	margin: 0 auto;
	padding: 80px 0;
}
#check_results .inner2 h1 {
	font-weight: 700;
	text-align: center;
}
#check_results .inner2 button.close {
	position: absolute;
	top: 50px;
	right: 0;
}
#check_results article .inner > h4 {
	font-weight: 700;
}
#check_results .result_con {
	display: flex;
	gap: 30px;
	height: 440px;
	/*margin-top: 50px;*/
}

#check_results .result_con2 {
	display: flex;
	gap: 30px;
	height: 380px;
	/*margin-top: 50px;*/
}

#check_results .result_con .chart {
	width: 340px;
	height: 100%;
	background: #f5f5f5;
}

#check_results .result_con2 .chart {
	width: 340px;
	height: 100%;
	background: #f5f5f5;
}

#check_results .result_con ul {
	flex: 1;
}

#check_results .result_con2 ul {
	flex: 1;
}

#check_results .result_con ul li {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 80px;
}

#check_results .result_con2 ul li {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 80px;
}

#check_results .result_con ul li + li {
	margin-top: 10px;
}

#check_results .result_con2 ul li + li {
	margin-top: 10px;
}

#check_results .result_con ul li label {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 150px;
	height: 100%;
	line-height: 25px;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	color: #fff;
	padding: 15px;
	border-radius: 20px;
	background: #0C70F5;
}

#check_results .result_con2 ul li label {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 150px;
	height: 100%;
	line-height: 25px;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	color: #fff;
	padding: 15px;
	border-radius: 20px;
	background: #0C70F5;
}

#check_results .result_con ul li p {
	display: flex;
	align-items: center;
	max-width: 265px;
	height: 100%;
	line-height: 18px;
	font-size: 13px;
	padding: 13px 15px;
	border: 1px solid #ddd;
	border-radius: 20px;
	background: #fff;
}

#check_results .result_con2 ul li p {
	display: flex;
	align-items: center;
	max-width: 265px;
	height: 100%;
	line-height: 18px;
	font-size: 13px;
	padding: 13px 15px;
	border: 1px solid #ddd;
	border-radius: 20px;
	background: #fff;
}

#check_results .result_con ul li .score {
	display: flex;
	align-items: center;
	max-width: 340px;
	width: 100%;
	height: 100%;
	gap: 5px;
	padding-left: 10px;
}

#check_results .result_con2 ul li .score {
	display: flex;
	align-items: center;
	max-width: 340px;
	width: 100%;
	height: 100%;
	gap: 5px;
	padding-left: 10px;
}

#check_results .result_con ul li .score span {
	flex: 1;
	position: relative;
	height: 40px;
	background: #eee;
}

#check_results .result_con2 ul li .score span {
	flex: 1;
	position: relative;
	height: 40px;
	background: #eee;
}

#check_results .result_con ul li .score span:not(:first-child):before {
	position: absolute;
	left: 0;
	content: "";
	border: 20px solid transparent;
	border-left-color: #fff;
}

#check_results .result_con2 ul li .score span:not(:first-child):before {
	position: absolute;
	left: 0;
	content: "";
	border: 20px solid transparent;
	border-left-color: #fff;
}

#check_results .result_con ul li .score span:after {
	position: absolute;
	left: 100%;
	content: "";
	border: 20px solid transparent;
	border-left-color: #eee;
	z-index: 1;
}

#check_results .result_con2 ul li .score span:after {
	position: absolute;
	left: 100%;
	content: "";
	border: 20px solid transparent;
	border-left-color: #eee;
	z-index: 1;
}

#check_results .result_con ul li .score span.s_1 {
	background: #0C70F5;
	z-index: 7;
}

#check_results .result_con2 ul li .score span.s_1 {
	background: #0C70F5;
	z-index: 7;
}

#check_results .result_con ul li .score span.s_1:after {
	border-left-color: #0C70F5;
}

#check_results .result_con2 ul li .score span.s_1:after {
	border-left-color: #0C70F5;
}

#check_results .result_con ul li .score span.s_2 {
	background: #2986ff;
	z-index: 6;
}

#check_results .result_con2 ul li .score span.s_2 {
	background: #2986ff;
	z-index: 6;
}

#check_results .result_con ul li .score span.s_2:after {
	border-left-color: #2986ff;
}

#check_results .result_con2 ul li .score span.s_2:after {
	border-left-color: #2986ff;
}

#check_results .result_con ul li .score span.s_3 {
	background: #4a96ff;
	z-index: 5;
}

#check_results .result_con2 ul li .score span.s_3 {
	background: #4a96ff;
	z-index: 5;
}

#check_results .result_con ul li .score span.s_3:after {
	border-left-color: #4a96ff;
}

#check_results .result_con2 ul li .score span.s_3:after {
	border-left-color: #4a96ff;
}

#check_results .result_con ul li .score span.s_4 {
	background: #61a4ff;
	z-index: 4;
}

#check_results .result_con2 ul li .score span.s_4 {
	background: #61a4ff;
	z-index: 4;
}

#check_results .result_con ul li .score span.s_4:after {
	border-left-color: #61a4ff;
}

#check_results .result_con2 ul li .score span.s_4:after {
	border-left-color: #61a4ff;
}

#check_results .result_con ul li .score span.s_5 {
	background: #8abcff;
	z-index: 3;
}

#check_results .result_con2 ul li .score span.s_5 {
	background: #8abcff;
	z-index: 3;
}

#check_results .result_con ul li .score span.s_5:after {
	border-left-color: #8abcff;
}

#check_results .result_con2 ul li .score span.s_5:after {
	border-left-color: #8abcff;
}

#check_results .result_con ul li .score span.s_6 {
	background: #a4ccff;
	z-index: 2;
}

#check_results .result_con2 ul li .score span.s_6 {
	background: #a4ccff;
	z-index: 2;
}

#check_results .result_con ul li .score span.s_6:after {
	border-left-color: #a4ccff;
}

#check_results .result_con2 ul li .score span.s_6:after {
	border-left-color: #a4ccff;
}

#check_results .result_con ul li .score span.s_7 {
	background: #bbd8ff;
	z-index: 1;
}

#check_results .result_con2 ul li .score span.s_7 {
	background: #bbd8ff;
	z-index: 1;
}

#check_results .result_con ul li .score span.s_7:after {
	border-left-color: #bbd8ff;
}

#check_results .result_con2 ul li .score span.s_7:after {
	border-left-color: #bbd8ff;
}

#check_results .result_con ul li .score span.b_1 {
	background: #434343;
	z-index: 7;
}

#check_results .result_con2 ul li .score span.b_1 {
	background: #434343;
	z-index: 7;
}

#check_results .result_con ul li .score span.b_1:after {
	border-left-color: #434343;
}

#check_results .result_con2 ul li .score span.b_1:after {
	border-left-color: #434343;
}

#check_results .result_con ul li .score span.b_2 {
	background: #434343;
	z-index: 6;
}

#check_results .result_con2 ul li .score span.b_2 {
	background: #434343;
	z-index: 6;
}

#check_results .result_con ul li .score span.b_2:after {
	border-left-color: #434343;
}

#check_results .result_con2 ul li .score span.b_2:after {
	border-left-color: #434343;
}

#check_results .result_con ul li .score span.b_3 {
	background: #434343;
	z-index: 5;
}

#check_results .result_con2 ul li .score span.b_3 {
	background: #434343;
	z-index: 5;
}

#check_results .result_con ul li .score span.b_3:after {
	border-left-color: #434343;
}

#check_results .result_con2 ul li .score span.b_3:after {
	border-left-color: #434343;
}

#check_results .result_con ul li .score span.b_4 {
	background: #434343;
	z-index: 4;
}

#check_results .result_con2 ul li .score span.b_4 {
	background: #434343;
	z-index: 4;
}

#check_results .result_con ul li .score span.b_4:after {
	border-left-color: #434343;
}

#check_results .result_con2 ul li .score span.b_4:after {
	border-left-color: #434343;
}

#check_results .result_con ul li .score span.b_5 {
	background: #434343;
	z-index: 3;
}

#check_results .result_con2 ul li .score span.b_5 {
	background: #434343;
	z-index: 3;
}

#check_results .result_con ul li .score span.b_5:after {
	border-left-color: #434343;
}

#check_results .result_con2 ul li .score span.b_5:after {
	border-left-color: #434343;
}

#check_results .result_con ul li .score span.b_6 {
	background: #434343;
	z-index: 2;
}

#check_results .result_con2 ul li .score span.b_6 {
	background: #434343;
	z-index: 2;
}

#check_results .result_con ul li .score span.b_6:after {
	border-left-color: #434343;
}

#check_results .result_con2 ul li .score span.b_6:after {
	border-left-color: #434343;
}

#check_results .result_con ul li .score span.b_7 {
	background: #434343;
	z-index: 1;
}

#check_results .result_con2 ul li .score span.b_7 {
	background: #434343;
	z-index: 1;
}

#check_results .result_con ul li .score span.b_7:after {
	border-left-color: #434343;
}

#check_results .result_con2 ul li .score span.b_7:after {
	border-left-color: #434343;
}


/* information */

#information > article {
	height: 100%;
	overflow: overlay;
}
#information .inner2 {
	position: relative;
	width: 1200px;
	text-align: center;
	margin: 0 auto;
	padding: 80px 0;
}
#information .inner2 h1 {
	font-weight: 700;
}
#information .inner2 .info_con {
	margin-top: 50px;
	padding: 50px 0;
	border-top: 1px solid #ccc;
}
#information .inner2 .info_con > p {
	line-height: 25px;
	font-size: 16px;
}
#information .inner2 > button.btn {
	width: 220px;
	height: 50px;
	font-size: 16px;
	margin-top: 20px;
}

#ready .remaining_time {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 30px;
	margin: 0 auto;
	padding: 50px 0 85px;
}
#ready .remaining_time .txt p {
	font-size: 20px;
}
#ready .remaining_time .txt h1 {
	font-size: 40px;
	font-weight: 700;
	color: #E13731;
}

/* header */

header {
	flex: 0 0 80px;
	width: 100%;
	background: #0C70F5;
	z-index: 10;
}
header .inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 1400px;
	height: 100%;
	margin: 0 auto;
}
header .center {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}
header .center h3 {
	font-weight: 800;
	color: #fff;
}
header .clock {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 18px;
	margin-left: auto;
	padding: 10px 20px;
	border-radius: 10px;
	background: #fff;
}
header .clock > * {
	line-height: 20px;
	font-weight: 700;
	color: #0C70F5;
}
header .clock p {
	font-weight: 700;
	color: #102E81;
}

/* footer */

footer {
	flex: 0 0 80px;
	background: #E0F0FF;
	z-index: 10;
}
footer .inner {
	position: relative;
	display: flex;
	align-items: center;
	width: 1400px;
	height: 100%;
	padding: 15px 0;
	margin: 0 auto;
}
footer button:not(.icon) {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	font-weight: 700;
	color: #0C70F5;
	padding: 5px 15px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 5px 5px 10px rgb(0 0 0 / 5%);
}
footer button:not(.icon) > img {
	width: 14px;
}
footer button:not(.icon) > span {
	line-height: 20px;
	font-size: 18px;
	padding: 0 20px;
}
footer button:not(.icon).btn {
	color: #fff;
}
footer .right button {
	justify-content: flex-end;
	color: #fff;
	background: #0C70F5;
}
footer .right button.btn {
	justify-content: center;
}
footer .center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
footer .center h3 {
	line-height: 38px;
}
footer .center button > img {
	width: 20px;
}

.sound_check {
	display: flex;
	align-items: center;
	gap: 20px;
	width: 100%;
}
.sound_check.disabled {
	filter: contrast(50%) grayscale(100%);
}
.sound_track {
	flex: 1;
}
.sound_track.range_bar input[type="range"] {
	flex: 1;
}

.range_bar {
	display: flex;
	align-items: center;
	gap: 15px;
	height: 50px;
	padding: 10px 40px;
	border-radius: 25px;
	background: #fff;
}
.range_bar p {
	line-height: 20px;
	font-weight: 700;
}
.range_bar > img {
	width: 20px;
}
.range_bar input[type="range"] {
	width: 100px;
}

input[type=range] {
	-webkit-appearance: none;
	width: 100%;
	height: 4px;
	border-radius: 2px;
	background: #ccc;
	transition: background 450ms ease-in;
	box-shadow: inset 0 1px 0 #ccc;
	cursor: pointer;
}
input[type=range]:focus {
	outline: none;
}
input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 10px;
	height: 10px;
	border: none;
	border-radius: 50%;
	background: #102E81;
	cursor: pointer;
}
input[type=range]::-moz-range-thumb {
	-webkit-appearance: none;
	width: 10px;
	height: 10px;
	border: none;
	border-radius: 50%;
	background: #102E81;
	cursor: pointer;
}

.nice-select {
	min-width: 200px;
	height: 40px;
	line-height: 38px;
	font-size: 16px;
	text-align: center !important;
	border-radius: 10px;
	background: #fff;
}
.nice-select .option {
	line-height: 40px;
	text-align: center;
}

article {
	flex: 1;
	height: calc(100% - 160px);
}
article > section {
	display: flex;
	flex-direction: column;
	width: 1400px;
	height: 100%;
	margin: 0 auto;
	padding: 30px 50px;
	border-left: 1px solid #ebebeb;
	border-right: 1px solid #ebebeb;
	background: #fff;
	box-shadow: 5px 5px 10px rgb(0 0 0 / 5%);
	overflow: overlay;
}

h4.title {
	position: relative;
	display: flex;
	align-items: center;
	font-weight: 500;
	color: #333;
	padding: 20px 0;
	border-bottom: 1px solid #ccc;
}
h4.title p {
	line-height: 24px;
	font-size: 16px;
	font-weight: 500;
}
h4.title p:before {
	line-height: 24px;
	font-size: 12px;
	color: #aaa;
	content: "ㅣ";
	padding: 0 10px;
	vertical-align: top;
}
h4.title .question_number {
	color: #0C70F5;
	padding: 2px 12px;
	border: 2px solid #0C70F5;
	border-radius: 10px;
}

.top_side {
	display: flex;
	align-items: center;
	height: 70px;
	gap: 10px;
	border: 1px solid #ddd;
	padding: 0 30px;
}

.top_info {
	position: absolute;
	top: 15px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 30px;
}
.top_info:before {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	height: 2px;
	content: "";
	background: #ccc;
}
.top_info li {
	position: relative;
	width: 120px;
	line-height: 26px;
	font-size: 20px;
	font-weight: 700;
	color: #333;
	text-align: center;
	padding: 7px 0 3px;
	border: 2px solid #ccc;
	border-radius: 10px;
	background: #fff;
	z-index: 1;
}
.top_info li:before {
	position: absolute;
	top: -15px;
	left: 50%;
	transform: translateX(-50%);
	line-height: 20px;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
	padding: 0 10px;
	border-radius: 5px;
	background: #ccc;
}
.top_info li.on:before {
	color: #fff;
	background: #5AC857;
}
.top_info li.ready:before {
	content: "대기";
}
.top_info li.count:before {
	content: "듣기 횟수";
}
.top_info li.question:before {
	content: "풀이";
}
.top_info li.on {
	color: #5AC857;
	border-color: #5AC857;
	background: #EEFFEE;
}

.content {
	flex: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	padding-top: 50px;
}
.content.flex {
	align-items: flex-start;
}

h4.exam_title {
	font-weight: 700;
	text-align: left;
	padding-bottom: 40px;
}
h4.exam_title span {
	font-weight: 500;
}
h4.exam_title strong {
	font-weight: 900;
	color: #0C70F5;
	text-decoration: underline;
	text-underline-position: under;
}

.exam_image {
	max-width: 100%;
	margin-bottom: 40px;
}
.exam_image:empty {
	display: none;
}

.exam_txt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	padding: 20px 30px;
	margin-bottom: 50px;
	border: 1px solid #e6e6e6;
	background: #fbfbfb;
}
.exam_txt > * {
	flex: 1;
	max-width: 600px;
}
.exam_txt ul li {
	display: flex;
	align-items: center;
	gap: 20px;
	font-size: 16px;
}
.exam_txt ul li + li {
	margin-top: 10px;
}
.exam_txt ul li span {
	color: #0C70F5;
}
.exam_txt ul li span:before {
	content: "ㆍ";
	margin-right: 5px;
}

.blackboard {
	position: relative;
	width: 1200px;
	color: #fff;
	aspect-ratio: 12/7;
	margin: 0 auto;
	padding: 60px 70px;
	background: url("../images/blackboard.svg") no-repeat center / cover;
}
.blackboard .title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 30px;
}
.blackboard .title:before {
	width: 30px;
	height: 30px;
	content: "";
	background: url("../images/pen_w.svg") no-repeat center / 100%;
}
.blackboard .board_con {
	display: flex;
	align-items: center;
	padding: 50px;
}
.blackboard .board_con .chalk {
	flex: 1;
	max-width: 580px;
	line-height: 36px;
	font-size: 22px;
	aspect-ratio: 65/50;
	padding: 50px;
	background: url("../images/border_line.png") no-repeat center / 100%;
}
.blackboard .board_con .ai_bot {
	flex: 0 0 260px;
	margin-left: auto;
}

.exam_content {
	position: relative;
}
.exam_content.w800 {
	width: 800px;
	margin: 0 auto;
}
.exam_content.w1000 {
	width: 1000px;
	margin: 0 auto;
}
.exam_content.example {
	padding: 30px 30px 0;
	margin-top: 40px;
	border: 1px solid #ddd;
	border-bottom: none;
	background: #fbfbfb;
}
.exam_content.example:before {
	position: absolute;
	top: -40px;
	left: 0;
	width: 150px;
	line-height: 40px;
	font-size: 24px;
	font-weight: 700;
	text-align: center;
	color: #fff;
	content: "보기";
	background: #333;
}
.exam_content.flex {
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
}
.exam_content.flex > div {
	flex: 1;
}
.exam_content .q_title {
	font-size: 24px;
}
.exam_content .left_side {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	gap: 20px;
	width: 100%;
}
.exam_content .txt_wrap {
	width: 100%;
	font-size: 24px;
	padding: 20px;
	border: 1px solid #e6e6e6;
	border-radius: 20px;
	background: #fff;
}
.exam_content .txt_wrap.flex {
	gap: 10px;
}
.exam_content .img_wrap {
	justify-content: center;
	width: 100%;
}
.exam_content .img_wrap > img {
	width: 90%;
	max-width: 100%;
}

/* drag & drop */

.exam_content .drop_wrap {
	position: relative;
	display: flex;
	justify-content: center;
	width: 100%;
	border: 1px solid #ddd;
	background: #fafafa;
}
.exam_content .drop_wrap .drop_label,
.exam_content .drag_field .drag_label  {
	position: absolute;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
	width: max-content;
	line-height: 24px;
	font-size: 22px;
	padding: 7px 50px;
	border: 1px solid #ddd;
	border-radius: 20px;
	background: #fff;
}
.exam_content .drop_wrap .drop {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	font-weight: 500;
	color: #555;
	padding: 5px;
	border: 1px dashed #ccc;
	border-radius: 10px;
	background: #eee;
	user-select: none;
}
.exam_content .drop_wrap .drop.active {
	font-weight: 700;
	color: #222;
	border: 1px solid #0C70F5;
	background: #fff;
	cursor: pointer;
}
.exam_content .drag_field {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	border: 1px solid #ddd;
	background: #fafafa;
}
.exam_content .drag_field label {
	position: absolute;
	top: 20px;
	left: 30px;
	line-height: 20px;
	font-size: 20px;
	font-weight: 700;
	color: #0C70F5;
}
.exam_content .drag_field .active {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	min-height: 44px;
	font-weight: 700;
	color: #222;
	padding: 10px;
	border: 1px solid #0C70F5;
	border-radius: 25px;
	background: #fff;
	user-select: none;
	cursor: pointer;
	font-size: 17px;
}
.exam_content .drag_field span {
	position: absolute;
	top: 0;
	left: 0;
	width: 30px;
	line-height: 30px;
	font-size: 16px;
	font-weight: 900;
	text-align: center;
	color: #fff;
	background: #0C70F5;
}
.exam_content .drag_field p {
	font-weight: 500;
	text-align: center;
}
.exam_content .drag_field ul {
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	gap: 20px;
	width: 100%;
}

.exam_content .model_side {
	flex: 0 0 200px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}
.exam_content .model_side > img {
	max-width: 120px;
}
.exam_content .model_side .progress {
	width: 100%;
	height: 20px;
}

/* BLK */

.exam_content.blk.simple .left_side {
	flex: 0 0 630px;
}
.exam_content.blk.complicated .left_side {
	flex: 0 0 700px;
}
.exam_content.blk.simple .drop_wrap {
	height: 430px;
	background: #fafafa url("../images/blk_simple.png") no-repeat center / 575px;
}
.exam_content.blk.complicated .drop_wrap {
	height: 800px;
	background: #fafafa url("../images/blk_complicated.png") no-repeat center / 615px;
}
.exam_content.blk .drop_wrap .drop {
	position: absolute;
	width: 200px;
	height: 44px;
	border-radius: 25px;
}
.exam_content.blk .drop_wrap .drop.active:before {
	position: absolute;
	top: 50%;
	right: 5px;
	transform: translateY(-50%);
	width: 14px;
	height: 14px;
	content: "";
	border-radius: 50%;
	/* background: #ccc url('../images/cancel.svg') no-repeat center / 6px; */
	cursor: pointer;
}
.exam_content.csr .drop_wrap .drop.active {
	position: relative; /* 내부 아이콘을 정확히 위치시키기 위해 필요 */
	padding-right: 11px; /* 테두리 내부에 아이콘 공간 추가 */
}
.exam_content.csr .drop_wrap .drop.active:before {
	position: absolute;
	top: 50%;
	right: 5px;
	transform: translateY(-50%);
	width: 14px;
	height: 14px;
	content: "";
	border-radius: 50%;
	background: #ccc url('../images/cancel.svg') no-repeat center / 6px;
	cursor: pointer;
}
.exam_content.blk.simple .drop_wrap .drop.area_1 {
	top: 92px;
	left: 110px;
}
.exam_content.blk.simple .drop_wrap .drop.area_2 {
	top: 149px;
	left: 85px;
}
.exam_content.blk.simple .drop_wrap .drop.area_3 {
	top: 206px;
	left: 213px;
}
.exam_content.blk.simple .drop_wrap .drop.area_4 {
	top: 263px;
	left: 105px;
}

.exam_content.blk.complicated .drop_wrap .drop.area_1 {
	top: 236px;
	left: 232px;
}
.exam_content.blk.complicated .drop_wrap .drop.area_2 {
	top: 380px;
	left: 232px;
}
.exam_content.blk.complicated .drop_wrap .drop.area_3 {
	top: 440px;
	left: 195px;
}

.exam_content.simple .drag_field {
	height: 430px;
}
.exam_content.complicated .drag_field {
	height: 800px;
}

/* DDD */

.exam_content.ddd .drop_wrap {
	width: 100%;
	margin-top: 0;
	border: none;
}
.exam_content.ddd .drop_wrap .drop {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 75px;
	font-size: 20px;
	font-weight: 500;
	color: #555;
	padding: 5px;
	border: 1px dashed #ccc;
	border-radius: 10px;
	background: #eee;
	user-select: none;
}
.exam_content.ddd .drop_wrap .drop.active {
	font-weight: 700;
	border: 1px solid #0C70F5;
	background: #fff;
	cursor: pointer;
}
.exam_content.ddd .drag_field {
	padding: 30px;
}
.exam_content.ddd .drag_field .active {
	min-height: 75px;
	border-radius: 10px;
}

/* DND */

.exam_content.dnd .drop_wrap {
	align-items: center;
	gap: 10px;
	padding: 50px 30px;
}
.exam_content.dnd .drop_wrap .drop {
	position: relative;
	gap: 20px;
	width: 100%;
	height: 90px;
	font-size: 20px;
	padding: 10px 15px;
}
.exam_content.dnd .drop_wrap .drop > img {
	height: 70px;
}
.exam_content.dnd .drop_wrap .drop.active {
	justify-content: flex-start;
}
.exam_content.dnd .drop_wrap .arrows {
	width: 20px;
	height: 35px;
	content: "";
	margin-bottom: -20px;
	background: url("../images/arrow_down_blue.svg") no-repeat center / 100%;
	z-index: 1;
}
.exam_content.dnd .drop_wrap .arrows.big {
	width: 40px;
	height: 70px;
}
.exam_content.dnd .drop_wrap .drop.drop_result {
	position: absolute;
	top: calc(100% + 40px);
	left: 30px;
	width: calc(100% - 60px);
	cursor: default;
}

.exam_content.dnd .drag_field {
	justify-content: flex-start;
	gap: 20px;
	padding: 50px 30px;
}
.exam_content.dnd .drag_field .active {
	justify-content: flex-start;
	gap: 20px;
	width: 100%;
	height: 90px;
	font-size: 20px;
	padding: 10px 15px;
	border-radius: 10px;
}
.exam_content.dnd .drag_field .active > img {
	height: 70px;
}
.exam_content.dnd .drag_field .active > p {
	font-weight: 700;
	text-align: left;
}

/* PTP */

.exam_content.ptp > div {
	display: flex;
	justify-content: center;
	flex-direction: row;
}
.exam_content.ptp .ptp_wrap {
	width: 400px;
	text-align: center;
}
.exam_content.ptp .ptp_wrap > label {
	width: 200px;
	height: 40px;
	line-height: 30px;
	font-size: 22px;
	font-weight: 700;
	text-align: center;
	color: #fff;
	padding: 5px;
	border-radius: 20px;
	background: #0C70F5;
}
.exam_content.ptp .ptp_wrap ul {
	margin-top: 45px;
}
.exam_content.ptp .ptp_wrap ul li {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 120px;
	color: #555;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 10px;
}
.exam_content.ptp .ptp_wrap ul li + li {
	margin-top: 35px;
}
.exam_content.ptp .ptp_wrap ul li p.title {
	position: absolute;
	top: -15px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 180px;
	height: 30px;
	line-height: 20px;
	border: 1px solid #ccc;
	background: #fff;
	font-size : 16px;
}
.exam_content.ptp .ptp_wrap ul li span {
	font-size: 12px;
	text-align: center;
	padding: 5px;
}
.exam_content.ptp .ptp_wrap ul li strong {
	font-size: 22px;
	text-align: center;
	padding: 5px;
}
.exam_content.ptp .ptp_wrap ul li span > img {
	width: 100%;
}

.exam_content.ptp .left_side .ptp_wrap ul li:before {
	position: absolute;
	top: 50%;
	left: calc(100% - 10px);
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	content: "";
	border: 2px solid #0C70F5;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
}
.exam_content.ptp .right_side .ptp_wrap ul li:before {
	position: absolute;
	top: 50%;
	right: calc(100% - 10px);
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	content: "";
	border-radius: 50%;
	background: #0C70F5;
	cursor: pointer;
}



/* CSR */

.exam_content.csr .drop_wrap {
	justify-content: flex-start;
	padding: 40px;
}
.exam_content.csr .drop_wrap li {
	font-size: 22px;
	padding-left: 50px;
}
.exam_content.csr .drop_wrap li + li {
	margin-top: 5px;
}
.exam_content.csr .drop_wrap li > label {
	margin: 0 10px 0 -50px;
}
.exam_content.csr .drop_wrap li .drop {
	display: inline-flex;
	width: 100px;
	margin: 0 10px;
}

.exam_content.csr .drag_field {
	flex-direction: row;
	padding: 60px 40px 40px 40px;
}
.exam_content.csr .drag_field .active {
	width: 100px;
	border-radius: 10px;
	font-size: 20px;
}

/* LSEL, LMCN */

.exam_content.book .left_side {
	display: flex;
	flex-direction: row;
	gap: 25px;
}
.exam_content.book .book_wrap {
	position: relative;
	width: 300px;
	height: 200px;
	padding: 30px;
	border: 1px solid #ddd;
	border-radius: 10px;
	background: #F6F9F8;
}
.exam_content.book .left_side > .book_wrap {
	margin-top: 80px;
}
.exam_content.book .book_wrap > label {
	position: absolute;
	top: -50px;
	left: 50%;
	transform: translateX(-50%);
	height: 80px;
	border: 1px solid #ddd;
}
.exam_content.book .book_wrap > label > img {
	height: 100%;
}
.exam_content.book .book_wrap > label > span {
	position: absolute;
	top: -40px;
	left: 50%;
	transform: translateX(-50%);
	width: 100px;
	line-height: 35px;
	font-size: 20px;
	font-weight: 700;
	text-align: center;
	border: 1px solid #ddd;
	border-radius: 5px;
	background: #fff;
}
.exam_content.book .book_wrap ul {
	display: flex;
	justify-content: center;
	gap: 15px;
	text-align: center;
	margin-top: 20px;
}
.exam_content.book .book_wrap ul li > img {
	width: 80px;
}
.exam_content.book .book_wrap ul li > p {
	line-height: 16px;
	font-size: 16px;
	margin-top: 5px;
}
.exam_content.book .grouping {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 80px 25px 20px 25px;
	border: 1px solid #ddd;
	background: #fafafa;
}
.exam_content.book .grouping .book_wrap {
	background: #F5F5F0;
}
.exam_content.book .grouping .book_wrap > label > span {
	color: #fff;
	border-color: #EBC747;
	background: #EBC747;
}
.exam_content.book .right_side {
	width: 100%;
}
.exam_content.book .book_select {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 15px 20px;
	width: 100%;
	line-height: 24px;
	font-size: 20px;
	font-weight: 700;
	padding: 30px;
	border: 1px solid #ddd;
	background: #fafafa;
}

/* LMCN */

.exam_content.book .multiple_choice .img_type img {
	width: 150px;
}

/* CHO */

.exam_content.cho .drop_wrap {
	align-items: center;
	gap: 30px;
}
.exam_content.cho .drop_wrap .drop {
	width: 150px;
	height: 150px;
	text-align: center;
	overflow: hidden;
}
.exam_content.cho .drop_wrap .drop > img {
	height: 150px;
}
.exam_content.cho .drag_field {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 15px;
	padding: 50px 30px;
}
.exam_content.cho .drag_field .active {
	width: auto;
}
.exam_content.cho .drag_field .active > img {
	width: 80px;
	height: 80px;
	object-fit: cover;
}

/* DIV */

.exam_content.div .drop_wrap {
	align-items: center;
	gap: 30px;
	padding: 50px 80px;
}
.exam_content.div .drop_wrap .drop {
	width: 100px;
	height: 100px;
	text-align: center;
	overflow: hidden;
}
.exam_content.div .drop_wrap .drop > img {
	height: 100px;
}
.exam_content.div .drag_field {
	flex-direction: row;
	flex-wrap: wrap;
	padding: 50px 80px;
}
.exam_content.div .drag_field .active {
	width: auto;
}
.exam_content.div .drag_field .active > img {
	height: 80px;
}

/* OX */

.exam_content.ox .table_wrap th {
	height: 50px;
}
.exam_content.ox .table_wrap td img {
	max-height: 100px;
}
.exam_content.ox .table_wrap td button {
	width: 120px;
	height: 80px;
	font-size: 30px;
	font-weight: 700;
	color: #aaa;
	border-radius: 20px;
	background: #f5f5f5;
}
.exam_content.ox .table_wrap td button.on {
	color: #0C70F5;
	background: #e5f0ff;
}

/* LDIV */

.exam_content.ldiv .drop_wrap .drop_label,
.exam_content.ldiv .drag_field .drag_label {
	padding: 7px 30px;
}
.exam_content.ldiv .drop_wrap {
	justify-content: flex-start;
	gap: 10px;
	padding: 50px 30px 30px;
}
.exam_content.ldiv .drop_wrap .drop {
	height: 40px;
}
.exam_content.ldiv .drag_field {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
	padding: 50px 30px 30px;
}
.exam_content.ldiv .drag_field .active {
	width: 400px;
	height: 40px;
	border-radius: 10px;
}

/* LRST */

.exam_content.lrst .model_side {
	flex: 0 0 150px;
}
.exam_content.lrst .left_side {
	flex-direction: row;
}
.exam_content.lrst .drop_wrap {
	justify-content: flex-start;
	align-items: center;
	gap: 40px;
	padding: 30px;
}
.exam_content.lrst .drop_wrap .drop {
	width: 400px;
	height: 44px;
}
.exam_content.lrst .drag_field .drag_label {
	padding: 7px 30px;
}
.exam_content.lrst .right_side {
	gap: 50px;
	padding: 80px 30px 30px;
	border: 1px solid #ddd;
}
.exam_content.lrst .right_side > label {
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 16px;
	font-weight: 700;
}
.exam_content.lrst .drag_field {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
	padding: 50px 30px 30px;
}
.exam_content.lrst .drag_field .active {
	width: 400px;
	border-radius: 10px;
}
.exam_content.lrst .lrst_wrap {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 40px;
}
.exam_content.lrst .lrst_wrap .result_btn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 20px;
}
.exam_content.lrst .lrst_wrap .result_btn > img {
	width: 50px;
}
.exam_content.lrst .lrst_wrap .result_view {
	flex: 0 0 300px;
	position: relative;
	height: 100px;
	padding: 40px 20px 20px;
	border: 1px solid #ddd;
	background: #eee;
}
.exam_content.lrst .lrst_wrap .result_view > label {
	position: absolute;
	top: 10px;
	left: 20px;
	font-weight: 700;
	color: #0C70F5;
}
.exam_content.lrst .lrst_wrap .result_view > h3 {
	font-weight: 700;
}
.exam_content.lrst .lrst_wrap .lrst_btn {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* DMD */

.exam_content.dmd .drop_wrap {
	gap: 20px;
	padding: 50px 30px;
}
.exam_content.dmd .drop_wrap .drop {
	height: 50px;
}
.exam_content.dmd .drag_field {
	padding: 50px 30px;
}
.exam_content.dmd .drag_field .active {
	width: 100%;
	height: 50px;
	border-radius: 10px;
}

/* PPP */

.exam_content.ppp > div {
	display: flex;
	justify-content: center;
	flex-direction: row;
}
.exam_content.ppp .ppp_wrap {
	width: 330px;
	text-align: center;
}
.exam_content.ppp .ppp_wrap > label {
	width: 200px;
	height: 40px;
	line-height: 30px;
	font-size: 22px;
	font-weight: 700;
	text-align: center;
	color: #fff;
	padding: 5px;
	border-radius: 20px;
	background: #0C70F5;
}
.exam_content.ppp .ppp_wrap ul {
	margin-top: 45px;
}
.exam_content.ppp .ppp_wrap ul li {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 100px;
	color: #555;
	padding: 20px 30px;
	border: 1px solid #ccc;
	border-radius: 10px;
}
.exam_content.ppp .ppp_wrap ul li + li {
	margin-top: 35px;
}
.exam_content.ppp .ppp_wrap ul li span {
	font-size: 12px;
	text-align: center;
	padding: 5px;
}
.exam_content.ppp .ppp_wrap ul li strong {
	font-size: 18px;
	text-align: center;
	padding: 5px;
}

.exam_content.ppp .center_side .ppp_wrap {
	width: 200px;
}
.exam_content.ppp .center_side .ppp_wrap > label {
	border-radius: 20px 0;
	background: #0ebcc2;
}
.exam_content.ppp .center_side .ppp_wrap li {
	border-radius: 50px;
}

.exam_content.ppp .left_side .ppp_wrap ul li:before,
.exam_content.ppp .center_side .ppp_wrap ul li:after {
	position: absolute;
	top: 50%;
	left: calc(100% - 10px);
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	content: "";
	border: 2px solid #0C70F5;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
}
.exam_content.ppp .right_side .ppp_wrap ul li:before,
.exam_content.ppp .center_side .ppp_wrap ul li:before {
	position: absolute;
	top: 50%;
	right: calc(100% - 10px);
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	content: "";
	border-radius: 50%;
	background: #0C70F5;
	cursor: pointer;
}
.exam_content.ppp > div:not(.center_side) .ppp_wrap ul li.selected:before,
.exam_content.ppp .center_side .ppp_wrap ul li.selected.after:after {
	border-color: #aaa;
}
.exam_content.ppp > div:not(.center_side) .ppp_wrap ul li.selected:after,
.exam_content.ppp .center_side .ppp_wrap ul li.selected.before:before {
	background: #aaa;
}

/* SEL */

.exam_content.sel .table_wrap {
	width: 100%;
	margin-top: 0;
}
.exam_content.sel .table_wrap .table_top {
	line-height: 20px;
	font-size: 20px;
	font-weight: 700;
	color: #0C70F5;
	margin-bottom: 10px;
}
.exam_content.sel .table_wrap table thead th {
	height: 60px;
}
.exam_content.sel .right_side {
	padding-top: 30px;
}
.exam_content.sel .sel_field {
	position: relative;
	display: flex;
	align-items: center;
	flex-direction: column;
	width: 100%;
	padding: 50px 30px 30px;
	border: 1px solid #ddd;
	background: #fafafa;
}
.exam_content.sel .sel_field > label {
	position: absolute;
	top: -25px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 300px;
	height: 50px;
	font-size: 18px;
	font-weight: 700;
	border: 1px solid #ccc;
	border-radius: 25px;
	background: #fff;
}
.exam_content.sel .sel_field .sel_con {
	width: 100%;
	padding: 20px 30px;
	border: 1px solid #ddd;
	background: #fff;
}
.exam_content.sel .sel_field .sel_con .sel_wrap {
	display: flex;
	align-items: center;
	gap: 20px;
}
.exam_content.sel .sel_field .sel_con .sel_wrap > p {
	flex: 0 0 100px;
	font-weight: 700;
}
.exam_content.sel .sel_field .sel_con .sel_wrap .nice-select {
	flex: 1;
}

/* CIQ */

.exam_content.ciq .left_side {
	padding-top: 25px;
}
.exam_content.ciq .sel_field {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 70px 30px 50px;
	border: 1px solid #ddd;
	background: #fafafa;
}
.exam_content.ciq .sel_field > label {
	position: absolute;
	top: -25px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 300px;
	height: 50px;
	font-size: 20px;
	font-weight: 700;
	border: 1px solid #ccc;
	border-radius: 25px;
	background: #fff;
}
.exam_content.ciq .sel_field .sel_con {
	width: 100%;
	padding: 20px 30px;
	border: 1px solid #ddd;
	background: #fff;
}
.exam_content.ciq .sel_field .sel_wrap {
	display: flex;
	align-items: center;
	font-size: 20px;
}
.exam_content.ciq .sel_field .sel_wrap + .sel_wrap {
	margin-top: 20px;
}
.exam_content.ciq .sel_field .sel_wrap > p {
	flex: 0 0 100px;
	font-weight: 700;
}
.exam_content.ciq .sel_field .sel_wrap > span {
	margin-left: 10px;
}
.exam_content.ciq .drawing_wrap {
	padding: 20px;
	border: 1px solid #ddd;
}
.exam_content.ciq .drawing_wrap.null {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 10px;
	color: #666;
}
.exam_content.ciq + .btn_wrap {
	display: flex;
	justify-content: center;
	margin-top: 30px;
}
.exam_content.ciq + .btn_wrap .btn {
	width: 150px;
	height: 45px;
	font-size: 18px;
}

.exam_content .info_wrap {
	width: 100%;
	line-height: 36px;
	font-size: 20px;
	font-weight: 500;
	padding: 50px;
	border: 1px solid #ccc;
	background: #fafafa;
}
.exam_content .info_wrap.blue {
	color: #0C70F5;
	border: 1px solid #0C70F5;
	background: #DAEEFF;
}
.exam_content .info_wrap.red {
	color: #E13731;
	border: 1px solid #E13731;
	background: #FFE0DF;
}
.exam_content .info_wrap label {
	position: absolute;
	top: 20px;
	left: 30px;
	line-height: 20px;
	font-size: 20px;
	font-weight: 700;
	color: #0C70F5;
}
.exam_content .info_wrap > ul {
	padding-left: 20px;
}
.exam_content .info_wrap > ul > li {
	list-style: auto;
}
.exam_content .info_wrap > strong {
	display: block;
}
.exam_content .info_wrap > strong > em {
	text-decoration: underline;
	text-underline-position: under;
}

form[name="agree_form"] {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 30px 0;
}
.check_wrap {
	display: flex;
	align-items: center;
	justify-content: center;
}
.check_wrap input {
	width: 24px;
	height: 24px;
}
.check_wrap label {
	line-height: 30px;
	font-size: 20px;
	font-weight: 700;
	padding-left: 10px;
	cursor: pointer;
}

.v_divider {
	width: 1px;
	height: 100%;
	content: "";
	background: #ebebeb;
}

.multiple_choice {
	padding-bottom: 30px;
}
.multiple_choice ul.img_type li {
	align-items: flex-start;
}
.multiple_choice ul.choice1 {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 40px;
}
.multiple_choice ul.choice1.img_type li > img {
	max-width: 40%;
}
.multiple_choice ul.choice2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 80px;
}
.multiple_choice ul.choice2.img_type li > img {
	max-width: 500px;
}
.multiple_choice ul.choice4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 80px;
}
.multiple_choice ul.choice4.img_type li > img {
	max-width: 80%;
}

.multiple_choice .q_title {
	font-size: 24px;
}
.multiple_choice .q_title strong {
	font-weight: 900;
	color: #0C70F5;
	text-decoration: underline;
	text-underline-position: under;
}
.multiple_choice .q_title + ul,
.multiple_choice .q_title + .t_choice {
	margin-top: 30px;
}
.multiple_choice ul + .q_title,
.multiple_choice .t_choice + .q_title {
	margin-top: 50px;
}
.multiple_choice li,
.multiple_choice li > label {
	display: flex;
	align-items: center;
	gap: 20px;
	font-size: 24px;
	font-weight: 700;
	cursor: pointer;
}
.multiple_choice li > span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	min-width: 40px;
	height: 40px;
	font-size: 24px;
	font-weight: 700;
	color: #555;
	border: 1px solid #bbb;
	border-radius: 50%;
}
.multiple_choice li.active span {
	color: #102E81;
	background: #E0F0FF;
}
.multiple_choice li > p {
	font-size: 22px;
}
.multiple_choice li .form-check-input {
	width: 30px;
	height: 30px;
	margin: 0;
	border: 1px solid #aaa;
	border-radius: 5px;
	cursor: pointer;
}
.multiple_choice li .form-check-input:disabled {
	pointer-events: auto;
	opacity: 1;
}
.multiple_choice .t_choice {
	width: 100%;
}
.multiple_choice .t_choice td {
	height: 50px;
	font-size: 24px;
	font-weight: 500;
	text-align: center;
	border: 1px solid #aaa;
}
.multiple_choice .t_choice td.rhombus img {
	width: 20px;
}
.multiple_choice .t_choice td.t_left {
	padding: 0 10px;
}
.multiple_choice .t_choice td button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 24px;
	padding: 0;
	transition: all 0.2s ease;
}
.multiple_choice .t_choice td button:hover,
.multiple_choice .t_choice td button.active {
	color: #0C70F5;
	background: #E0F0FF;
}

/* 답안 제출 */

.tab_wrap {
	display: flex;
	align-items: center;
	gap: 10px;
}
.tab_wrap > button {
	line-height: 20px;
	font-size: 14px;
	font-weight: 500;
	color: #222;
	padding: 10px 15px;
	border-radius: 10px;
	background: #eee;
}
.tab_wrap > button.active {
	color: #fff;
	background: #0C70F5;
}
.submit_txt {
	line-height: 30px;
	font-size: 16px;
	text-align: center;
	padding-top: 20px;
}
.submit_txt > strong {
	color: #C13531;
}


@media screen and (max-width: 1600px) {

	h1 {
		line-height: 40px;
		font-size: 32px;
	}
	h2 {
		line-height: 36px;
		font-size: 28px;
	}
	h3 {
		line-height: 34px;
		font-size: 24px;
	}
	h4 {
		line-height: 30px;
		font-size: 20px;
	}
	h5 {
		line-height: 24px;
		font-size: 18px;
	}

	header {
		flex: 0 0 70px;
	}
	header .clock {
		font-size: 18px;
	}

	footer {
		flex: 0 0 70px;
	}
	footer button:not(.icon) {
		min-height: 40px;
		padding: 0 15px;
	}
	footer button:not(.icon) > span {
		font-size: 18px;
		padding: 0 10px;
	}

	article {
		height: calc(100% - 140px);
	}
	article > section {
		padding: 20px 40px;
	}
	h4.title {
		padding: 10px 0 20px;
	}

	.content {
		padding-top: 20px;
	}

	.multiple_choice ul.choice1,
	.multiple_choice ul.choice2,
	.multiple_choice ul.choice4 {
		gap: 20px;
	}
	.multiple_choice li span {
		width: 30px;
		min-width: 30px;
		height: 30px;
		font-size: 20px;
	}
	.multiple_choice li,
	.multiple_choice li > label {
		gap: 10px;
		font-size: 20px;
	}

	.multiple_choice ul.choice1.img_type li > img {
		max-width: 30%;
	}
	.multiple_choice ul.choice2.img_type li > img {
		max-width: 50%;
	}
	.multiple_choice ul.choice4.img_type li > img {
		max-width: 70%;
	}

}

@media screen and (max-width: 1440px) {

	h1 {
		line-height: 36px;
		font-size: 28px;
	}
	h2 {
		line-height: 34px;
		font-size: 24px;
	}
	h3 {
		line-height: 30px;
		font-size: 20px;
	}
	h4 {
		line-height: 24px;
		font-size: 18px;
	}
	h5 {
		line-height: 20px;
		font-size: 14px;
	}

	header {
		flex: 0 0 60px;
	}
	header .inner {
		width: 100%;
		padding: 0 30px;
	}
	header .clock {
		font-size: 16px;
	}

	footer {
		flex: 0 0 60px;
	}
	footer .inner {
		width: 100%;
		padding: 15px 30px;
	}
	footer button:not(.icon) > span {
		font-size: 16px;
	}
	footer button:not(.icon) > img {
		width: 12px;
	}
	footer .center button > img {
		width: 16px;
	}

	article {
		height: calc(100% - 120px);
	}
	article > section {
		width: 100%;
		padding: 20px 30px;
		border: none;
	}

	h4.title .question_number,
	.exam_content .q_title,
	.multiple_choice li,
	.multiple_choice li > label,
	.multiple_choice li span {
		font-size: 16px;
	}
	.multiple_choice li span {
		width: 26px;
		min-width: 26px;
		height: 26px;
	}

	.multiple_choice ul.choice1.img_type li > img {
		max-width: 20%;
	}
	.multiple_choice ul.choice2.img_type li > img {
		max-width: 40%;
	}
	.multiple_choice ul.choice4.img_type li > img {
		max-width: 60%;
	}

	.exam_content .img_wrap > img {
		max-height: 300px;
	}

}