yangart / sejongOn_publish star
yanghyo 09-23
퍼블 세팅
@63d2789e05f86f448874b50209dd693792f4e38b
 
63d2789
.gitignore (added)
+++ .gitignore
@@ -0,0 +1,1 @@
+.vscode/settings.json
 
63d2789
resources/front/site/SITE_00000/css/custom/page/_hwa.scss (added)
+++ resources/front/site/SITE_00000/css/custom/page/_hwa.scss
@@ -0,0 +1,2836 @@
+/* sub */
+.aside-area {
+	$asideW: 12rem;
+    position: sticky;
+    top: calc(var(--header-height) + 2rem);
+    right:0;
+    z-index:0;
+    height:0;
+    display: flex;
+    width: calc(100% + $asideW + 4rem);
+    justify-content: flex-end;
+    z-index: 3;
+	@at-root .CONTENTS-WRAPPER:has(.aside-area) {
+		position: relative;
+		// z-index: 0;
+	}
+	.aside-list {
+		margin-left:$asideW;
+		width: $asideW;
+		background-color: $color-background-brand-secondary;
+		position: relative;
+	}
+	.export-area.is-active {
+		.popup-export {
+			display: grid;
+		}
+		.btn-export-toggle {
+			box-shadow: 1rem 1rem 3rem rgba(#0087FF, 0.3);
+		}
+	}
+	.popup-export {
+		$exportGap: 2.4rem;
+		//display: grid;
+		display: none;
+		grid-template-rows:6.4rem auto 6.4rem;
+		top:0;
+		left:-2rem;
+		transform: translateX(-100%);
+		position: absolute;
+		background-color: $color-background-default-primary;
+		border: $stroke-secondary;
+		border-radius: $radius-md;
+		width: 40rem;
+		height: 64rem;
+		max-height: calc(100vh - (var(--header-height) + 4rem));
+		box-shadow: $shadow-sm;
+		@keyframes export {
+			0% {
+				opacity: .5;
+				margin-left: 10%;
+			}
+			100% {
+				opacity: 1;
+				margin-left: 0;
+			}
+		}
+		animation: export .5s forwards;
+		.pop-header {
+			padding:0 $exportGap;
+			h1 {
+				display: flex;
+				align-items: center;
+				height:100%;
+				@include typo('tit-md');
+			}
+		}
+		.pop-body {
+			grid-template-rows: auto;
+			overflow-y: auto;
+			padding:0 $exportGap $exportGap;
+		}
+		.pop-footer {
+			display: flex;
+			button {
+				display: flex;
+				height:100%;
+				justify-content: center;
+				align-items: center;
+				flex:1;
+				background-color: $color-background-brand-secondary-inverse;
+				color:$color-white;
+				font-weight: 700;
+				border-radius: 0 0 $radius-md $radius-md;
+				font-size: var(--fs-lg);
+				&:hover {
+					background-color: $color-background-brand-secondary-inverse;
+				}
+				strong {
+					color: $color-font-brand-accent;
+				}
+				&:disabled {
+					cursor: default;
+					background-color: $color-font-default-tertiary;
+					opacity: 1;
+					pointer-events: none;
+				}
+			}
+		}
+	}
+	.export-list {
+		display: grid;
+		gap: $spacing-2xsm;
+		li {
+			display: flex;
+			position: relative;
+			border: $stroke-secondary;
+			border-radius: $radius-sm;
+			padding:.8rem 1.6rem;
+			min-height:8rem;
+			align-items: center;
+			min-width: 0;
+			gap:$spacing-xsm;
+			&:hover {
+				border-color: $color-stroke-default-secondary;
+				box-shadow: $shadow-sm;
+				.export-fnc {
+					display: block;
+				}
+			}
+		}
+		.txt-area {
+			display: flex;
+			flex-direction: column;
+			gap:$spacing-xsm;
+			overflow: hidden;
+			flex:1;
+			.editor-cont {
+				@include ellipsis(1);
+				@include editor-cont;
+			}
+		}
+		.img-area {
+			width: 9rem;			
+			figure {
+				display:block;
+				@include img-size;
+				border-radius: $radius-xsm;
+				border: $stroke-secondary;
+				background-color: $color-background-default-tertiary;
+				overflow: hidden;
+				img {
+					object-fit: cover;
+					width: 100%;
+					height:100%;
+				}
+			}
+		}
+		.export-fnc {
+			display: none;
+			position: absolute;
+			right:-1.6rem;
+			top:50%;
+			transform: translateY(-50%);
+			z-index: 2;
+		}
+	}
+	.btn-export-toggle {
+		display:flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		gap:$spacing-xsm;
+		width: $asideW;
+		height: $asideW;
+		background-color: $color-background-brand-primary-inverse;
+		border-radius: $radius-lg;
+		color:$color-white;
+		font-size:var(--fs-lg);
+		font-weight: 700;
+		&:before {
+			content:" ";
+			width: 4rem;
+			height:4rem;
+			background: url($url-img + 'common/ico-img/ico-img-folders.svg');
+			background-size: contain;
+		}
+		&:hover {
+			box-shadow: 1rem 1rem 3rem rgba(#0087FF, 0.3);
+		}
+	}  
+}
+.copy-area {
+	display: flex;
+	flex-direction: column;
+	flex-wrap: wrap;
+	gap: 0.4rem;
+	box-sizing: border-box;
+
+	&:has(.img-area) {
+		width:12rem;
+	}
+	.img-area {
+		img {
+			display: block;
+			max-width: 100%;
+		}
+	}
+	.txt-area {
+		@include typo('label-sm');
+	}
+	@at-root .checkradio input:disabled ~ label .copy-area {
+		.img-area {
+			opacity: .2;
+		}
+	}
+}
+
+.class-write-nav {
+	display: grid;
+	grid-template-columns: repeat(4, 1fr);
+	gap:$spacing-xsm;
+	> li {
+		position: relative;
+		
+		input {
+			width: 100%;
+			padding-right:8rem;
+			padding-left: 1.6rem;
+			cursor: pointer;
+		}
+		.nav-fnc {
+			position: absolute;
+			right:1.6rem;
+			top:50%;
+			transform: translateY(-50%);
+			display: flex;
+			gap: $spacing-xsm;
+		}
+		&.is-active {
+			input {
+				background-color: $spot;
+				color:$color-white;
+				&::placeholder {
+					color: $color-font-default-tertiary;
+				}
+			}
+			.ico-edit {
+				&::before {
+					background-image: url(pathIcon(map-get($icons, 'ico-edit'), $color-white));
+				}
+			}
+			.ico-delete {
+				&::before {
+					background-image: url(pathIcon(map-get($icons, 'ico-delete'), $color-white));
+				}
+			}
+		}
+	}
+}
+.class-write-result {
+	$sgap:2.4rem;
+	&::after {
+		content: " ";
+		display:block;
+		margin:$spacing-lg auto 0;
+		width: 4rem;
+		height: 4rem;
+		background:url($url-img + 'common/ico-img/ico-img-arrow-blue.svg') center center / cover no-repeat;
+	}
+	&.is-close {
+	&::after {
+		display: none;
+	}
+	}
+	.tabs-nav-lg {
+		margin-bottom: -0.2rem;
+	}
+	.search-cont-area {
+		> *:last-child {
+			border-radius: 0 0 $radius-md $radius-md;
+		}
+	}
+	.search-cont,
+	.search-etc {
+		border:0.2rem solid $spot;
+	}
+	.tabs-normal {
+		.search-cont {
+			display: none;
+		}
+	}
+	.search-cont {
+		display: flex;
+		flex-direction: column;
+		height: 84rem;
+		overflow:hidden;
+		padding:$sgap;
+		&.is-active {
+			display: flex;
+		}
+		.cont-header,
+		.cont-footer {
+			flex:none;
+			> * {
+				margin:0;
+			}
+		}
+		.cont-header {
+			padding-bottom: $sgap;
+		}
+		.cont-body {
+			position: relative;
+			flex:1;
+			overflow-y: auto;
+		}
+		.cont-footer {
+			padding-top: $sgap;
+		}
+	}
+
+	.search-etc {
+		border-top: none;
+		display: grid;
+		grid-template-columns: 16rem auto;
+		overflow: hidden;
+		align-items: stretch;
+		> *  {
+			padding:$sgap;
+		}
+		> cite {
+			display: flex;
+			align-items: center;
+			background-color: $color-background-info-primary;
+			@include typo('tit-sm');
+		}
+	}	
+}
+.popup-guide-classwrite {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: rgba($color-black, 0.8);
+	backdrop-filter: saturate(200%) blur(2rem);
+	border-radius: $radius-md;
+	z-index: 3;
+	.ico-close {
+		position: absolute;
+		top: 1.6rem;
+		right: 1.6rem;
+		left: auto;
+	}
+	.pop-body {
+		img {
+			display: block;
+			width: 100%;
+		}
+	}
+	.pop-fnc {
+		position: absolute;
+		bottom: 2rem;
+		left: 2rem;
+	}
+	&.is-active {
+		.pop-fnc {
+			display: none;
+		}
+	}
+	.checkradio input[type=checkbox] ~ label {
+		color: $color-font-default-quaternary;
+	}
+	.checkradio input[type=checkbox]:checked ~ label {
+		color: $color-white;
+	}
+	.checkradio input[type=checkbox] ~ label:before,
+	.checkradio input[type=radio] ~ label:before {
+		border-color: $color-font-default-tertiary;
+		background: none;
+	}
+	.checkradio input[type=checkbox]:checked ~ label:before,
+	.checkradio input[type=checkbox]:checked ~ label:after {
+		border-color: $color-white;
+	}
+}
+
+/* AI문항: 성취코드 */
+.achievecode {
+	display: flex;
+	flex-direction: column;
+	gap: 0.8rem;
+	max-height: 60rem;
+	overflow-y: auto;
+	.tit-area {
+		margin-bottom: 0.8rem;
+	}
+	> * {
+		margin: 0;
+	}
+	.btn-cont {
+		margin: 1.6rem 0 0;
+	}
+	.bg-border-box {
+		flex:none;
+	}
+	.box-body {
+		overflow: hidden;
+		flex:none;
+	}
+}
+.achievecode-list {
+	display: flex;
+	gap: $spacing-xsm;
+	overflow-x: auto;
+	> li {
+		flex: 1;
+		padding: 1.6rem;
+		border:  $stroke-secondary;
+		border-radius: $radius-sm;
+		background-color: $color-background-default-primary;
+		overflow: hidden;
+		min-width: 24rem;
+		box-sizing: border-box;
+		&.is-active {
+			border-width: 0.1rem;
+			border-color: #a0a0a0;
+			// background-color: rgba($spot, 0.03);
+		}
+	}
+	p {
+		display: block;
+		font-size: 1.5rem;
+		margin-bottom: $spacing-xsm;
+	}
+	.checkradio {
+		overflow: hidden;
+		.txt-area {
+			display: flex;
+			gap: $spacing-2xsm;
+		}
+		strong {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 4rem;
+			flex-basis: 4rem;
+			margin-top: -1.6rem;
+			margin-bottom: -1.6rem;
+			margin-left: -1.6rem;
+			align-self: stretch;
+		}
+		span {
+			flex: 1;
+		}
+		.font-color-red {
+			background-color: rgba($color-red50, 0.05);
+		}
+		.font-color-blue {
+			background-color: rgba($color-blue50, 0.05);
+		}
+		.font-color-green {
+			background-color: rgba($color-green50, 0.05);
+		}
+	}
+}
+.achievecode-add-area {
+	display: flex;
+	flex-direction: column;
+	max-height: 70rem;
+	flex-wrap: nowrap;
+	gap: 0.8rem;
+	.top-area {
+		display: flex;
+		flex-direction: column;
+		gap: 0.8rem;
+	}
+}
+.achievecode-add-item {
+	$padding: 2.4rem;
+	display: flex;
+	flex: none;
+	gap: 2.4rem;
+	background-color: $color-background-default-primary;
+	border:  $stroke-secondary;
+	border-radius: $radius-md;
+	padding: $padding;
+	overflow: hidden;
+	box-sizing: border-box;
+	.info-list {
+		flex: 1;
+		margin-bottom: 0;
+	}
+	.btn-full-h {
+		align-self: stretch;
+		background-color: $color-background-default-secondary;
+		margin: -$padding;
+		box-sizing: border-box;
+		flex-basis: 8rem;
+		width: 8rem;
+		border-left: $stroke-secondary;
+	}
+}
+.contents-sch-area {
+	display: flex;
+	flex-direction: column;
+	gap: 1.6rem;
+	margin: 0 0 1.2rem !important;
+
+	.contents-sch-top-area {
+		display: flex;
+		gap: 1.6rem;
+		height: 48rem;
+		box-sizing: border-box;
+		overflow: hidden;
+	}
+	.contents-sch-etc-area {
+		display: flex;
+		flex-direction: column;
+		flex-basis: 32rem;
+		height: 100%;
+		box-sizing: border-box;
+		.tit-area {
+			flex: none;
+			margin-bottom: 1.6rem;
+		}
+		.sch-etc-cont {
+			flex: 1;
+			overflow-y: auto;
+		}
+	}
+	.contents-sch {
+		display: flex;
+		flex-direction: column;
+		gap: 0.8rem;
+		flex: 1;
+		margin: 0;
+		overflow: hidden;
+	}
+	.sch-result-cont {
+		// flex:1;
+		// max-height: 41.2rem;
+		overflow-y: auto;
+		overflow-x: hidden;
+	}
+}
+.contents-add-area {
+	min-height: 40rem;
+	height: 40rem;
+	overflow-y: auto;
+}
+
+// inform
+@keyframes inform-on {
+	0% {
+		border: 0.1rem solid $color-stroke-default-tertiary;
+	}
+	100% {
+		border: 0.1rem solid $color-stroke-brand-primary;
+	}
+}
+
+.inform-list {
+    li {
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap: 2.4rem;
+        padding: 2.4rem;
+        border:  $stroke-secondary;
+        border-radius: $radius-md;
+        background: $color-background-default-secondary;
+        .img-area {
+            i {
+                display: block;
+                width: 3.2rem;
+                height: 3.2rem;
+                background-size: cover;
+                background-repeat: no-repeat;
+                background-position: 0 0;
+            }
+            .ico-confirm {
+                background-image: url($url-img + 'common/common/img_confirm.svg');
+            }
+            .ico-warning {
+                background-image: url($url-img + 'common/common/img_warning.svg');
+            }
+        }
+        .txt-area {
+            word-break: keep-all;
+            .profile-area {
+                gap: 0.8rem;
+                margin-bottom: 0.4rem;
+                .img-area {
+                    width: 2.4rem;
+                    height: 2.4rem;
+                }
+                .txt-area {
+                    cite {
+                        font-size: 1.2rem;
+                    }
+                }
+            }
+            h3 {
+                font-size: 1.6rem;
+                font-weight: 400;
+            }
+            p {
+                color: $color-font-default-tertiary;
+                margin-top: 0.2rem;
+            }
+            span {
+                display: block;
+                font-size: 1.2rem;
+                color: $color-font-default-tertiary;
+                margin-top: 0.6rem;
+            }
+        }
+        &.on {
+            background: $color-white;
+            animation: inform-on 0.5s 2 ease-out;
+        }
+        &.on::after {
+            content: "";
+            position: absolute;
+            top: 1.6rem;
+            right: 1.6rem;
+            display: block;
+            background-color: $color-background-brand-secondary-inverse;
+            width: 0.4rem;
+            height: 0.4rem;
+            border-radius: $radius-md;
+        }
+        & ~ li {
+            margin-top: 0.8rem;
+        }
+    }
+}
+.test-write-area {
+    display: flex;
+    flex-direction: column;
+    gap: 1.6rem;
+    > .tit-area,
+    .sch-box {
+        margin-bottom: 0;
+    }
+    .sch-box {
+        flex-basis: 30rem;
+    }
+    .test-cont {
+        display: flex;
+        > .l-area,
+        > .r-area {
+            flex: 1;
+			min-width: 0;
+        }
+        > .c-area {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            flex-basis: 5.6rem;
+            gap: 0.8rem;
+        }
+		.scroll-area {
+			display: flex;
+			flex-direction: column;
+			height:100%;
+			flex: 1;
+    		overflow: hidden;
+			.scroll {
+				flex:1;
+				overflow-y: auto;
+			}
+		}
+        .bg-border-box {
+            height: 64rem;
+            overflow: hidden;
+            .box-body {
+				display: flex;
+				flex-direction: column;
+                flex: 1;
+				overflow: hidden;
+            }
+			.tabs-cont {
+				height:100%;
+				overflow: hidden;
+			}
+            .box-footer{
+				display: flex;
+				align-items: center;
+				gap:$spacing-xsm;
+				justify-content: flex-end;
+            }
+			.total-txt {
+				font-size: 1.6rem;
+			}
+        }
+        .tabs-cont {
+            .fnc-area,
+            .tit-area {
+                margin-bottom: 0.8rem;
+            }
+        }
+    }
+}
+.quiz-add-list {
+
+}
+.test-achievecode-add-area {
+    display: flex;
+    flex-direction: column;
+    gap: 0.8rem;
+    .top-area {
+        display: flex;
+        flex-direction: column;
+        gap: 0.8rem;
+    }
+}
+.folder-list {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1.6rem;
+	font-size: 1.6rem;
+    li {
+        position: relative;
+        display: flex;
+        padding: 1.6rem;
+        align-items: center;
+        border:  $stroke-secondary;
+        height: 16rem;
+        box-sizing: border-box;
+        border-radius: $radius-md;
+        background-color: $color-background-default-primary;
+        gap: 1.6rem;
+        &:hover {
+            .folder-fnc-r { 
+                display: block;
+            }
+        }
+        &.default {
+            // background-color:rgba($color: $color-primary50, $alpha: .03);
+        }
+    }
+    &.col1 {
+        grid-template-columns: repeat(1, 1fr);
+    }
+	&.col4 {
+        grid-template-columns: repeat(4, 1fr);
+    }
+	&.sm {
+		li {
+			height:12rem;
+		}
+	}
+    .num {
+        flex: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 5.6rem;
+        height: 5.6rem;
+        background-color: $color-background-brand-primary;
+        font-size: 2.4rem;
+        font-weight: 700;
+        color: $spot;
+        border-radius: $radius-md;
+    }
+    p {
+        font-weight: 700;
+		color: $color-font-default-primary;
+    }
+    .folder-fnc-l,
+    .folder-fnc-r {
+        position: absolute;
+        top: 0.8rem;
+        z-index: 1;
+    }
+    .folder-fnc-l {
+        left: 0.8rem;
+    }
+    .folder-fnc-r {
+        display: block;
+        right: 0.8rem;
+    }
+    .add {
+        border-style: dashed;
+        border-width: 0.2rem;
+        flex-direction: column;
+        justify-content: center;
+        font-size: 1.4rem;
+        color: $color-font-default-tertiary;
+		gap: $spacing-xsm;
+        &::before {
+            content: " ";
+            @include ico($size-icon-md, plus);
+			background-color: $color-font-default-tertiary;
+        }
+    }
+    .etc-fnc-area {
+        li {
+            padding: initial;
+            height: auto;
+            border-radius: initial;
+            border: initial;
+        }
+    }
+}
+.folder-block-list {
+    @extend .folder-list;
+	display: flex;
+	flex-direction: column; 
+	// grid-template-columns:none;
+	// grid-template-rows:min-content;
+    gap: 0.8rem;
+    > li {
+		// height: initial;
+		height:8rem;
+    }
+    .num {
+        flex: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 4rem;
+        height: 4rem;
+        background-color: $color-background-brand-primary;
+        font-size: 1.6rem;
+        font-weight: 700;
+        color: $spot;
+        border-radius: $radius-sm;
+    }
+	p {
+		@include ellipsis(2);
+	}
+}
+
+.star {
+    position: relative;
+    display: inline-block;
+    width: 8rem;
+    height: 1.6rem;
+    background: url($url-img + 'common/common/btn_star.svg') top left repeat-x;
+    background-size: auto 3.2rem;
+    vertical-align: middle;
+    span {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        text-indent: -99999px;
+        background: url($url-img + 'common/common/btn_star.svg') 0 -1.6rem repeat-x;
+        background-size: auto 3.2rem;
+    }
+}
+.star-check {
+    button {
+        $size: 3.2rem;
+        width: $size;
+        height: $size;
+        background: url($url-img + 'common/common/btn_star.svg') no-repeat;
+        background-size: auto 6.4rem;
+        background-position: top left;
+        background-repeat: no-repeat;
+        overflow: hidden;
+        &.is-active,
+        &.is-hover {
+            background-position: 0 -3.2rem;
+        }
+    }
+}
+.star-check-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.8rem;
+    li {
+        display: flex;
+        flex-direction: column;
+        gap: 0.8rem;
+        background-color: $color-background-default-secondary;
+        border-radius: $radius-md;
+        padding: 1.6rem 2.4rem;
+        text-align: left;
+    }
+    .txt-area {
+        p {
+            font-size: 1.5rem;
+        }
+    }
+    .star-check {
+        text-align: center;
+    }
+}
+.step-list {
+    li {
+        visibility: hidden;
+        // filter: blur(0.5rem);
+        // opacity: 0.8;
+        // .star-check {
+        // 	position: relative;
+        // 	&::after {
+        // 		content: " ";
+        // 		position: absolute;
+        // 		top: 0;
+        // 		left: 0;
+        // 		right: 0;
+        // 		bottom: 0;
+        // 		background-color: transparent;
+        // 	}
+        // }
+        &.is-active {
+            visibility: visible;
+            animation: opacity 1s forwards;
+            // opacity: 1;
+            // filter: blur(0);
+            // .star-check {
+            // 	&::after {
+            // 		display: none;
+            // 	}
+            // }
+        }
+    }
+}
+.step-end {
+    display: none;
+    animation: opacityUp 0.5s forwards;
+}
+.mark-area {
+	display: flex;
+	gap: $spacing-lg;
+	
+	.sticky-cont {
+		position: relative;
+		box-sizing: border-box;
+		width: 24rem;
+		flex: none;
+		// .sticky {
+		// 	position: sticky;
+		// 	top: calc(var(--gnb-fnc-height) + 2rem);
+		// }
+	}
+    .sticky {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        background-color: $color-background-default-tertiary;
+        border-radius: $radius-md;
+        border:  $stroke-secondary;
+        padding: 2.4rem 1.6rem;
+        height: calc(100vh - (var(--header-height) + 4.8rem));
+        gap: 1.6rem;
+		top: calc(var(--header-height) + 2.4rem);
+    }
+    // .scroll-y {
+    // 	flex: 1;
+    // 	overflow-y: auto;
+    // }
+    .btn-flex-cont {
+        margin: 0;
+    }
+}
+.img-sch-area {
+    .sch-area {
+        position: sticky;
+        display: flex;
+        gap: 0.8rem;
+        top: -2rem;
+        z-index: 2;
+        background-color: $color-background-default-secondary;
+        padding: 2rem;
+        border: $stroke-secondary;
+        border-radius: $radius-md;
+        overflow: hidden;
+        .sch {
+            flex: 1;
+        }
+    }	
+    .img-sch-result {
+        padding: 4.8rem;
+        background-color: $color-background-default-secondary;
+        border-radius: $radius-md;
+    }
+    .img-sch-list {
+        $gap: 1.6rem;
+        display: flex;
+        flex-wrap: wrap;
+        gap: $spacing-md;
+
+        li {
+            position: relative;
+            width: calc((100% - $gap * 5 ) / 6);
+            &:hover {
+                z-index: 1;
+                figure {
+                    transform: scale(1.8);
+                }
+            }	
+        }
+        figure {
+            position: relative;
+            height: 0;
+            padding-top: 100%;
+            background-color: $color-background-default-secondary;
+            border:  $stroke-secondary;
+            border-radius: $radius-md;
+            img {
+                object-fit: cover;
+                position: absolute;
+                display: block;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                max-width: 100%;
+                max-height: 100%;
+            }
+        }
+    }
+}
+
+/* .test-list */
+.test-list {
+    display: flex;
+    flex-wrap: wrap;
+	gap: $spacing-md;
+    li {
+        flex-basis: calc((100% - 0.8rem) / 2);
+        display: flex;
+        flex-direction: column;
+        gap: 2.4rem;
+        justify-content: center;
+        .cont {
+            display: flex;
+            align-items: center;
+            gap: 2.4rem;
+        }
+        position: relative;
+        padding: 2.4rem 3.2rem;
+        box-sizing: border-box;
+        border-radius: 0.8rem;
+        border: $stroke-secondary;
+        min-width: 0;
+        .btn-flex-cont {
+            margin: 0;
+        }
+        .txt-area {
+            flex: 1;
+            .label-area {
+                margin-bottom: 1.2rem;
+            }
+            h3 {
+                font-size: 1.8rem;
+                font-weight: 500;
+                word-break: keep-all;
+                @include ellipsis(2, 1.25);
+            }
+            small {
+                display: block;
+                font-size: 1.2rem;
+                margin-top: 0.4rem;
+            }
+            .profile-area {
+                margin-top: 1.6rem;
+                gap: 0.8rem;
+                .img-area {
+                    width: 2.4rem;
+                    height: 2.4rem;
+                }
+                .txt-area {
+                    cite {
+                        font-size: 1.2rem;
+                        color: $color-font-default-tertiary;
+                    }
+                }
+            }
+        }
+        .score {
+            color: $color-font-default-tertiary;
+            background-color: $color-background-default-secondary;
+            width: 10rem;
+            height: 10rem;
+            line-height: 10rem;
+            text-align: center;
+            border-radius: 1.6rem;
+            em {
+                font-size: 2.4rem;
+                font-weight: 700;
+                color: $color-font-default-tertiary;
+            }
+        }
+    }
+	&.col3 {
+        li {
+            flex-basis: calc((100% - ($spacing-md * 2)) / 3);
+        }
+    }
+	.etc-fnc-area {
+        position: absolute;
+        right: $spacing-md;
+        top: $spacing-md;
+        li {
+            padding: initial;
+            border-radius: initial;
+            border: initial;
+        }
+    }
+}
+
+.q-option-list {
+	display: flex;
+	flex-direction: column;
+	gap:$spacing-xsm;
+}
+
+/* .summary */
+dl.summary {
+    display: flex;
+    background-color: $color-background-default-secondary;
+    padding: 1.6rem 2.4rem;
+    border-radius: $radius-md;
+    margin-bottom: 1.6rem;
+	word-break: keep-all;
+	align-items: center;
+    dt {
+        font-weight: 700;
+        margin-right: 1.6rem;
+    }
+    dd {
+        margin-right: 4rem;
+		display: flex;
+		align-items: center;
+		gap: $spacing-2xsm;
+		&:last-child {
+			margin-right: 0;
+		}
+    }
+}
+
+.test-add-list {
+	display: flex;
+	flex-direction: column;
+	gap:$spacing-xsm;
+	> li {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		justify-content: flex-start;
+		gap: $spacing-md;
+		margin-bottom: 0;
+		background-color: #fff;
+		border: $stroke-secondary;
+		padding: 1.6rem;
+		border-radius: $radius-sm;
+		
+		.item {
+			position: relative;
+			display: flex;
+			gap: $spacing-2xsm $spacing-xsm;
+			align-items: center;
+			margin-bottom: 0;
+			background-color: #fff;
+			width: 100%;
+			& ~ .item  {
+				border-top:$stroke-secondary;
+				padding-top:1.6rem;
+			}
+		}
+		.txt-area {
+			display: flex;
+			flex-direction: column;
+			gap:$spacing-xsm;
+			flex:1;
+		}
+		.editor-cont {
+			@include editor-cont;
+		}
+		.box-fnc {
+			display: flex;
+			gap:$spacing-xsm;
+			align-items: center;
+		}
+		&:has(.add-fnc) {
+			display: flex;
+			flex-direction: column;
+			padding-right:8rem;
+			.add-fnc {
+				position: absolute;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				gap: $spacing-2xsm;
+				width:8rem;
+				right:0;
+				top:50%;
+				transform: translateY(-50%);
+			}
+		}
+		&:has(> .checkradio) {
+			padding-left:40px;
+			& > .checkradio {
+				position: absolute;
+				top:50%;
+				left:1.2rem;
+				transform: translateY(-50%);
+			}
+		}	
+		&:has(.ico-move) {
+			padding-left:32px;
+		}
+	}
+	.ico-move {
+		position: absolute;
+		left:0;
+		top:50%;
+		transform: translateY(-50%);
+	}
+	.ico-sm-close {
+		position: absolute;
+		right:-0.8rem;
+		top:-0.8rem;
+	}
+	.txt-none {
+		border: none;
+		background-color: transparent;
+		height: 100%;
+		align-items: center;
+    	justify-content: center;
+	}
+}
+
+.basicquiz-stu-list {
+	display:grid;
+	gap:$spacing-xsm;
+	> li {
+		@extend .border-box;
+		margin-bottom: 0;
+		display:flex;
+		align-items: flex-start;
+	}
+	.cont-area {
+		flex:1;
+	}
+	.info-area {
+		display:flex;
+		justify-content: space-between;
+	}
+	.stu-info-list {
+		display:grid;
+		gap:$spacing-xsm;
+		&:has(li) {
+			margin-top: $spacing-md;
+		}
+		&:first-child {
+			margin-top:0;
+		}
+		li {
+			display: flex;
+			gap: $spacing-md;
+			padding:1.6rem 2.4rem;
+			min-height: 6.4rem;
+			background: $color-background-default-secondary;
+			border-radius: $radius-md;
+			align-items: center;
+			&.active {
+				background-color: $color-background-info-primary;
+				border: 4px solid $color-primary30;
+				color: $color-primary50;
+				cite {
+					color: $color-primary50;
+				}
+			}
+		}
+		.txt-area {
+			flex:1;
+			.label {
+				min-width: 5.6rem;
+			}
+			strong,
+			small {
+				display: block;
+			}
+		}
+		cite {
+			flex:none;
+			width:80px;
+			@include typo('tit-xsm');
+		}
+		.info {
+			display: flex;
+			flex-wrap: wrap;
+			align-items: center;
+			gap:$spacing-md;
+		}
+		.stu-fnc {
+			display: flex;
+			align-items: center;
+			gap:$spacing-xsm;
+		}
+	}
+}
+.num-input-list {
+	display: grid;
+	gap:$spacing-xsm;
+	grid-template-columns: repeat(5, 1fr);
+	li {
+		position:relative;
+		.num {
+			position:absolute;
+			width: 4.8rem;
+			height: 4.8rem;
+			line-height:4.8rem;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			left:0;
+			top:0;
+			bottom:0;
+			background-color: $color-background-default-tertiary;
+			@include typo('tit-xsm');
+			text-align:center;
+			border-radius: $radius-sm 0 0 $radius-sm;
+			z-index: -1;
+		}
+		input {
+			width: 100%;
+			min-width: 0;
+			padding-left:4.8em;
+			text-align: center;
+			background-color: transparent;
+		}
+	}
+}
+.num-list {
+	border: $stroke-secondary;
+	border-radius: $radius-sm;
+	overflow:hidden;
+	display: grid;
+	grid-auto-flow: column;
+    grid-template-rows: repeat(10, minmax(48px, auto));
+	margin:0;
+	padding:0;
+	li {
+		position:relative;
+		display: grid;
+		grid-template-columns: repeat(2, 1fr);
+		align-items: center;
+		border-bottom: $stroke-secondary;
+		border-right:$stroke-secondary;
+		&:nth-child(10n) {
+			border-bottom:none;
+		}
+		> * {
+			flex:1;
+		}
+		.num {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			background-color: $color-background-default-tertiary;
+			@include typo('tit-xsm');
+			text-align:center;
+			height:100%;			
+		}
+		.txt-area {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			padding:8px;
+		}
+	}
+}
+
+.row {
+	margin-bottom: $spacing-section-sm;
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+	gap:$spacing-sm;
+	> .section {
+		margin-bottom: 0;
+	}
+	.border-box {
+		height: 100%;
+	}
+	.col2 {
+		grid-column: span 2;
+	}
+}
+
+.box-img-list{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: $spacing-md $spacing-xsm;
+    li {
+        flex-basis: 240px;
+        a {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: $spacing-md;
+            border-radius: $radius-md;
+            border: $stroke-secondary;
+            min-height: 28rem;
+            padding: $spacing-lg;
+            box-sizing: border-box;
+            &:hover {
+                border: 2px solid $color-primary50;
+                box-shadow: $shadow-md;
+                transition: all .1s;
+                cite {
+                    color: $color-primary50;
+                }
+            }
+            cite {
+                font-size: 1.8rem;
+                font-weight: 500;
+            }
+        }
+    }
+}
+
+.group-list {
+    text-align: left;
+    li {
+        padding-bottom: $spacing-md;
+        margin-bottom: $spacing-md;
+        border-bottom: $stroke-secondary;
+        &:last-child {
+            padding-bottom: 0;
+            margin-bottom: 0;
+            border-bottom: none;
+        }
+        .label-area {
+            margin-bottom: $spacing-xsm;
+        }
+        .info-quiz {
+            font-weight: 500;
+            font-size: $size-font-md;
+        }
+        .editor-cont {
+            margin-top: $spacing-2xsm;
+            font-size: $size-font-md;
+            & > i {
+                margin-right: $spacing-2xsm;
+            }
+			br {
+				display: none;
+			}
+        }
+    }
+}
+
+.group-list-test {
+    li {
+        display: flex;
+        align-items: center;
+        min-height: 40px;
+        box-sizing: content-box;
+        &> * {
+            flex: 1;
+        }
+        & ~ li {
+            padding-top: $spacing-md;
+            margin-top: $spacing-md;
+            border-top: $stroke-secondary;
+        }
+        .txt-area {
+            display: flex;
+            align-items: center;
+            gap: $spacing-2xsm;
+            flex-basis: 42%;
+            text-align: left;
+            font-size: $size-font-md;
+            .editor-cont {
+                @include ellipsis(2);
+            }
+        }
+    }
+}
+
+.search-keyword-area {
+	background-color: $color-background-default-secondary;
+	padding: 3.2rem 4rem;
+	border-radius: $radius-md;
+	margin-bottom: 4rem;
+	cite {
+		font-size: $size-font-md;
+		font-weight: 700;
+		color: $color-font-default-tertiary;
+		display: block;
+		margin-bottom: 0.8rem;
+	}
+	ul {
+		display: flex;
+		flex-wrap: wrap;
+		gap: $spacing-2xsm;
+	}
+	li {
+		a {
+			display: block;
+			padding: 0.8rem 1.2rem;
+			background-color: $color-background-default-primary;
+			border-radius: 2rem;
+			border: $stroke-secondary;
+			&:hover {
+				background-color: $color-background-default-tertiary;
+			}
+		}
+	}
+}
+
+.basicquiz-score-area {
+	&.is-disabled {
+		background-color: $color-background-default-secondary;
+		padding:2.4rem;
+		border-radius: $radius-md;
+		margin-bottom: $spacing-md;
+		.tit-area {
+			margin-bottom: 0;
+		}
+		.write-type {
+			display: none;
+		}
+		& + .basicquiz-score-area:not(.is-disabled) {
+			margin-top:8rem;
+		}
+	}
+	.score-list {
+		display: grid;
+		grid-template-columns: repeat(5, 1fr);
+		gap:$spacing-xsm;
+		overflow: hidden;
+		li {
+			display: flex;
+			gap:$spacing-xsm;
+			align-items: center;
+			position: relative;
+			// background-color: $color-background-default-secondary;
+			border: $stroke-secondary;
+			border-radius: $radius-sm;
+			padding:1.6rem;
+			min-height: 16.4rem;
+			&.add-area {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				border:.2rem dashed $color-stroke-default-tertiary;
+			}
+		}
+		cite {
+			@include typo('tit-xsm');
+			display: block;
+			margin-bottom: $spacing-xsm;
+		}
+		fieldset {
+			display: grid;
+			gap:$spacing-xsm;
+			label {
+				position: relative;
+				display: flex;
+				overflow: hidden;
+				align-items: center;
+				gap: $spacing-2xsm;
+				span {
+					position: absolute;
+					display: flex;
+					align-items: center;
+					top:0.2rem;
+					left:0.2rem;
+					bottom:0.2rem;
+					flex:none;
+					width: 6.2rem;
+					font-size: var(--fs-sm);
+					font-weight: 700;
+					color: $color-font-default-tertiary;
+					background-color: $color-background-default-secondary;
+					border-radius: $radius-sm 0 0 $radius-sm;
+					padding-left:0.8rem;
+				}
+			}	
+			input {
+				min-width: 0;
+			}
+			input[type=number] {
+				width: 100%;
+				min-width: 0;		
+				padding-left:6.4rem + 1.6rem;
+				text-align: center;
+			}
+		}
+		& + .score-list {
+			margin-top:$spacing-xsm;
+		}
+	}
+}
+
+.storage-add-area {
+	display: grid;
+	gap:$spacing-xsm;
+	.btn-storage {
+		display:inline-flex;
+	}
+	.storage-add {
+		display: none;
+		gap: $spacing-xsm;
+		justify-content: center;
+		flex-wrap: wrap;
+		input{ 
+			width: 100%;
+		}
+	}
+	&.is-active {
+		.btn-storage {
+			display:none;
+		}
+		.storage-add {
+			display:flex;
+		}
+	}
+}
+
+.reference-list {
+	display: grid;
+	gap: $spacing-xsm;
+	grid-template-columns: repeat(2, 1fr);
+	li {
+		position: relative;
+		display: flex;
+		align-items: center;
+		gap:$spacing-sm;
+		background-color: $color-background-default-primary;
+		border: 1px solid $color-stroke-default-quaternary;
+		padding: $spacing-sm;
+		border-radius: $radius-sm;
+		&:hover {
+			font-weight: $size-font-weight-xlg;
+			color: $color-font-default-secondary
+		}
+		.img-weboffice-area {
+			img {
+				display: block;
+			}
+		}
+	}
+	.img-area {
+		@include img-size;
+		width: 16rem;
+		aspect-ratio: 16/9;
+		flex:none;
+	}
+	.img-weboffice-area {
+		width: 7.2rem;
+		padding: $spacing-xsm;
+		background-color: $color-background-default-primary;
+		border: $stroke-secondary;
+	}
+	.txt-area {
+		flex:1;
+		.txt {
+			margin-top:$spacing-xsm;
+			@include ellipsis(2);
+		}
+	}
+}
+
+.border-list {
+	border:$stroke-secondary;
+	border-radius: $radius-md;
+	background-color: $color-background-default-primary;
+	> li {
+	  @extend %flexArea;
+	  border-bottom: $stroke-secondary;
+	  padding: $spacing-md $spacing-lg;
+      flex-wrap: wrap;
+	  &:last-of-type {
+		border-bottom: none;
+	  }
+	  .num {
+		flex:none;
+	  }
+      .l-area {
+        flex:1;
+      }
+      .item-tit {
+        font-weight: $size-font-weight-md;
+      }
+	}
+} 
+
+// 나의 보관함
+.mystorage {
+	.row {
+		margin-bottom: $spacing-section-md;
+	}
+}
+.mystorage-header {
+	display: grid;
+	grid-template-columns: 16rem 1fr;
+	border:$stroke-secondary;
+	border-radius: $radius-md;
+	overflow-y: hidden;
+	overflow-x: auto;
+	margin-bottom: $spacing-3xlg;
+	.my-info {
+		display: flex;
+		flex-direction: column;
+		gap:$spacing-sm;
+		padding:$spacing-lg $spacing-sm;
+		background-color:$color-background-brand-primary-inverse;
+		.profile {
+			position: relative;
+			.profile-tit {
+				color: $color-font-default-primary-inverse;
+			}
+		}
+		.btn-group {
+			.btn {
+				background: $color-background-default-primary;
+				border-radius: 2em;
+			}
+		}
+	}
+	.contents-info{
+		min-width: 88rem;
+		display: grid;
+		grid-template-columns: 75% repeat(auto-fit, minmax(0, 1fr));
+		> li {
+			height:0;
+			> strong {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				height: 3.6rem;
+				padding: 0 $spacing-md;
+				border-bottom: $stroke-secondary;
+				background: $color-background-default-secondary;
+				@include typo('tit-xsm');
+				color: $color-font-default-tertiary;
+			}
+			> ul {
+				display: grid;
+				grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+				height:100%;
+			}
+		}
+		.item {
+			border-left: $stroke-secondary;
+			padding:$spacing-md $spacing-xsm;
+			display: grid;
+			gap:$spacing-md;
+			align-items: end;
+			height:100%;
+			figure {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				gap:$spacing-xsm;
+				text-align: center;
+				figcaption {
+					@include typo('tit-xsm');
+				}
+				img {
+					display: block;
+					width:4.8rem;
+				}
+			}
+			.txt-list {
+				display: grid;
+				border-radius: $radius-sm;
+				background: $color-background-brand-primary;
+				padding:$spacing-2xsm $spacing-xsm;
+				li {
+					display: flex;
+					justify-content: space-between;
+					border-top:$stroke-secondary;
+					padding:$spacing-xsm $spacing-xsm;
+					&:first-of-type {
+						border-top: none;
+					}
+					em {
+						@include typo ('label-md','strong');
+					}
+				}
+				strong {
+					font-weight: $size-font-weight-md;
+				}
+			}
+		}
+
+	}
+}
+.mystorage-best {
+	ul {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+		height:100%;
+		gap:$spacing-sm;
+		> li {
+			position: relative;
+			display: flex;
+			flex-direction: column;
+			gap:$spacing-sm;
+			align-items: center;
+			justify-content: center;
+			border-radius: $radius-md;
+			border: $stroke-secondary;
+			background: $color-background-default-secondary;
+			padding:$spacing-lg;
+		}
+		.label-img {
+			width: 4rem;
+			img {
+				width: 100%;
+			}
+		}
+	}
+}
+
+.user-info-area {
+	display: flex;
+	align-items: center;
+	margin-top: calc(var(--body-top-spacing) * -1);
+	margin-bottom: var(--body-top-spacing);
+	padding:$spacing-lg 0;
+	min-height: 16rem;
+	background: url($url-img + "custom/class/visual.png") center/cover $color-background-brand-primary-inverse;
+	color: $color-font-default-primary-inverse;
+	overflow: hidden;
+
+	.wrap {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		gap: $spacing-md;
+	}
+
+	.info-area {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		gap: $spacing-md;
+
+		.profile-area {
+			img {
+				width: 8rem;
+				height: 8rem;
+			}
+		}
+
+		.txt-area {
+			h3 {
+				@include typo('tit-lg');
+			}
+
+			.info-inline-list {
+				li {
+					color: $color-font-default-secondary-inverse;
+				}
+			}
+		}
+	}
+}
+
+.emotion-tbl-area {
+	overflow-x: auto;
+	th,
+	td {
+		word-break: break-all;
+	}
+	.emotion-tbl {
+		th {
+			color: $color-font-default-tertiary;
+			background-color: $color-background-default-secondary;
+		} 
+		thead {
+			th {
+				border-bottom: none;
+				padding:$spacing-md $spacing-sm;
+				&:first-of-type {
+					border-radius: $radius-sm 0 0 0;
+				}
+				&:last-of-type {
+					border-radius: 0 $radius-sm $radius-sm 0;
+				}
+			}
+		}
+		tbody {
+			th,
+			td {
+				border-bottom: $stroke-secondary;
+				border-left: $stroke-secondary;
+				&:first-of-type {
+					border-left: none;
+				}
+			}
+		}
+		td {
+			height:10rem;
+			padding: $spacing-sm $spacing-2xsm;
+		}
+		img {
+			max-width:4.8rem;
+			width: 100%;
+			margin: 0 auto;
+		}
+	}
+}
+.emotion-check-area {
+	background: $color-background-default-secondary;
+	border-radius: $radius-lg;
+	border:$stroke-secondary;
+	overflow: hidden;
+	header {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap:$spacing-2xsm;
+		padding:$spacing-md;
+		border-bottom: $stroke-secondary;
+		background: $color-background-default-primary;
+		strong {
+			@include typo('tit-label');
+		}
+		h3 {
+			@include typo('tit-lg');
+		}
+		p {
+			color: $color-font-default-secondary;
+		}
+	}
+	.emotion-check {
+		padding:$spacing-2xlg $spacing-lg;
+		ul {
+			display: grid;
+			grid-template-columns: repeat(5, 1fr);
+			gap:$spacing-xsm;
+			label {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				border-radius: $radius-md;
+				border: $stroke-secondary;
+				background: $color-background-default-primary;
+				padding: $spacing-lg $spacing-xsm;
+				gap:$spacing-2xsm;
+				cursor: pointer;
+				&:has(input:checked) {
+					border:none;
+					outline: $size-stroke-sm solid $color-stroke-brand-primary;
+				}
+				img {
+					width: 8rem;
+					aspect-ratio: 1;
+				}
+				strong {
+					@include typo('body-lg');
+					color: $color-font-default-secondary;
+				}
+			}
+			.emotion-none {
+				grid-column: 1 / -1;
+				
+				label {
+					flex-direction: row;
+					img {
+						width: 2.4rem;	
+					}
+				}
+			}
+		}
+	}	
+}
+.calendar-tbl {
+	.emotion {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap:$spacing-2xsm;
+		img {
+			width: 4.8rem;
+			aspect-ratio: 1;	
+		}
+		figcaption {
+			@include typo('body-sm');
+		}
+	}	
+}
+.survey-q-list {
+    > li {
+        padding: $spacing-lg 0;
+        border-bottom: $stroke-secondary;
+        display: flex;
+        flex-direction: column;
+        // grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+        gap:$spacing-lg;
+        align-items: center;
+		&:first-of-type {
+			padding-top: 0;
+		}
+    }
+    .q-area {
+        display: flex;
+        align-items: center;
+        gap: $spacing-md;
+        width: 100%;
+    }
+    .a-area {
+        width: 100%;
+    }
+    span {
+        color: $color-font-default-secondary;
+        @include typo('body-md');
+    }
+    .q-tit {
+        @include typo('tit-md');
+    }
+    .a-legend {
+        display: flex;
+        justify-content: space-between;
+        margin-top: $spacing-xsm;
+    }
+    .a-cont {
+        display: flex;
+        flex-direction: row;
+    	justify-content: space-between;
+        gap: $spacing-xsm;
+        word-break: keep-all;
+        text-align: center;
+        &:has(.a-des) {
+            padding-top:4.8rem;
+        }    
+        label {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: $spacing-xsm;
+            cursor: pointer;
+    
+            i {
+                position: relative;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 4.8rem;
+                height: 4.8rem;
+                border-radius: $radius-full;
+                background-color:  $color-icon-brand-primary-inverse;
+    
+                &::before {
+                    content: " ";
+                    display: block;
+                    width: 0;
+                    aspect-ratio: 1;
+                    border-radius: $radius-full;
+                    background-color: $color-icon-brand-primary;
+                    transition: all 0.2s;
+                }
+            }
+    
+            input:checked ~ i {
+                border: $size-stroke-xsm solid $color-icon-brand-primary;
+    
+                &::before {
+                    width: 60%;
+                }
+            }
+        }
+        %level1 {
+            i {
+                background-color: $color-icon-success-primary-inverse; 
+            }
+            input:checked ~ i {
+                border-color: $color-icon-success-primary;
+                &::before {
+                    background-color: $color-icon-success-primary;
+                }
+            }
+        }
+        %level2 {
+            i {
+                background-color: $color-icon-info-primary-inverse;
+            }
+            input:checked ~ i {
+                border-color: $color-icon-info-primary;
+                &::before {
+                    background-color: $color-icon-info-primary;
+                }
+            }
+        }
+        %level3 {
+            i {
+                background-color: $color-icon-danger-primary-inverse; 
+            }
+            input:checked ~ i {
+                border-color: $color-icon-danger-primary;
+                &::before {
+                    background-color: $color-icon-danger-primary;
+                }
+            }
+        }
+		@for $i from 1 through 3 {
+			.level#{$i} {
+				@extend %level#{$i};
+			}
+		}
+        //  // li가 1개일 때
+        // label:first-child:nth-last-child(1) {
+        //     @extend %level1;
+        // }
+
+        // // li가 2개일 때
+        // label:first-child:nth-last-child(2),
+        // label:first-child:nth-last-child(2) ~ label {
+        //     @extend %level1;
+        // }
+
+        // label:first-child:nth-last-child(2):nth-child(2),
+        // label:first-child:nth-last-child(2) ~ label:nth-child(2) {
+        //     @extend %level2;
+        // }
+
+        // // li가 3개일 때
+        // label:first-child:nth-last-child(3),
+        // label:first-child:nth-last-child(3) ~ label {
+        //     @extend %level1;
+        // }
+
+        // label:first-child:nth-last-child(3):nth-child(2),
+        // label:first-child:nth-last-child(3) ~ label:nth-child(2) {
+        //     @extend %level2;
+        // }
+
+        // label:first-child:nth-last-child(3):nth-child(3),
+        // label:first-child:nth-last-child(3) ~ label:nth-child(3) {
+        //     @extend %level3;
+        // }
+
+        // // li가 4개일 때
+        // label:first-child:nth-last-child(4),
+        // label:first-child:nth-last-child(4) ~ label {
+        //     @extend %level1;
+        // }
+
+        // label:first-child:nth-last-child(4):nth-child(2),
+        // label:first-child:nth-last-child(4) ~ label:nth-child(2) {
+        //     @extend %level2;
+        // }
+
+        // label:first-child:nth-last-child(4):nth-child(3),
+        // label:first-child:nth-last-child(4) ~ label:nth-child(3) {
+        //     @extend %level2;
+        // }
+
+        // label:first-child:nth-last-child(4):nth-child(4),
+        // label:first-child:nth-last-child(4) ~ label:nth-child(4) {
+        //     @extend %level3;
+        // }
+
+        // // li가 5개일 때
+        // label:first-child:nth-last-child(5),
+        // label:first-child:nth-last-child(5) ~ label {
+        //     @extend %level1;
+        // }
+
+        // label:first-child:nth-last-child(5):nth-child(2),
+        // label:first-child:nth-last-child(5) ~ label:nth-child(2) {
+        //     @extend %level1;
+        // }
+
+        // label:first-child:nth-last-child(5):nth-child(3),
+        // label:first-child:nth-last-child(5) ~ label:nth-child(3) {
+        //     @extend %level2;
+        // }
+
+        // label:first-child:nth-last-child(5):nth-child(4),
+        // label:first-child:nth-last-child(5) ~ label:nth-child(4) {
+        //     @extend %level3;
+        // }
+
+        // label:first-child:nth-last-child(5):nth-child(5),
+        // label:first-child:nth-last-child(5) ~ label:nth-child(5) {
+        //     @extend %level3;
+        // }
+
+        // // li가 6개일 때
+        // label:first-child:nth-last-child(6),
+        // label:first-child:nth-last-child(6) ~ label {
+        //     @extend %level1;
+        // }
+
+        // label:first-child:nth-last-child(6):nth-child(2),
+        // label:first-child:nth-last-child(6) ~ label:nth-child(2) {
+        //     @extend %level1;
+        // }
+
+        // label:first-child:nth-last-child(6):nth-child(3),
+        // label:first-child:nth-last-child(6) ~ label:nth-child(3) {
+        //     @extend %level2;
+        // }
+
+        // label:first-child:nth-last-child(6):nth-child(4),
+        // label:first-child:nth-last-child(6) ~ label:nth-child(4) {
+        //     @extend %level2;
+        // }
+
+        // label:first-child:nth-last-child(6):nth-child(5),
+        // label:first-child:nth-last-child(6) ~ label:nth-child(5) {
+        //     @extend %level3;
+        // }
+
+        // label:first-child:nth-last-child(6):nth-child(6),
+        // label:first-child:nth-last-child(6) ~ label:nth-child(6) {
+        //     @extend %level3;
+        // }
+
+        // // li가 7개일 때
+        // label:first-child:nth-last-child(7),
+        // label:first-child:nth-last-child(7) ~ label {
+        //     @extend %level1;
+        // }
+
+        // label:first-child:nth-last-child(7):nth-child(2),
+        // label:first-child:nth-last-child(7) ~ label:nth-child(2) {
+        //     @extend %level1;
+        // }
+
+        // label:first-child:nth-last-child(7):nth-child(3),
+        // label:first-child:nth-last-child(7) ~ label:nth-child(3) {
+        //     @extend %level2;
+        // }
+
+        // label:first-child:nth-last-child(7):nth-child(4),
+        // label:first-child:nth-last-child(7) ~ label:nth-child(4) {
+        //     @extend %level2;
+        // }
+
+        // label:first-child:nth-last-child(7):nth-child(5),
+        // label:first-child:nth-last-child(7) ~ label:nth-child(5) {
+        //     @extend %level2;
+        // }
+
+        // label:first-child:nth-last-child(7):nth-child(6),
+        // label:first-child:nth-last-child(7) ~ label:nth-child(6) {
+        //     @extend %level3;
+        // }
+
+        // label:first-child:nth-last-child(7):nth-child(7),
+        // label:first-child:nth-last-child(7) ~ label:nth-child(7) {
+        //     @extend %level3;
+        // }
+
+        .a-des {
+            position: absolute;
+            transform: translateY(calc(-100% - $spacing-xsm));
+            display: flex;
+            flex-direction: column;
+            gap:$spacing-2xsm;
+            @include typo('body-xsm');
+            max-width: 24rem;
+            &:after {
+                content: " ";
+                display: block;
+                width: 0;
+                height: 0;
+                border-style: solid;
+                border-right: .6rem solid transparent;
+                border-left: .6rem solid transparent;
+                border-top: .6rem solid $color-stroke-default-secondary;
+                border-bottom: 0;
+                margin:0 auto;
+            }
+        }
+    }
+}
+
+//초대
+.invite-area {
+	display: flex;
+	flex-direction: column;
+	gap:$spacing-xlg;
+	min-height: 100%;
+	justify-content: center;
+	padding-top:$spacing-xlg;
+	padding-bottom:$spacing-xlg;
+	> * {
+		margin:0;
+	}
+	.img-area {
+		img {
+			display: block;
+			max-width: 100%;
+			margin:0 auto;
+		}
+	}
+	.txt-area {
+		text-align: center;
+		display: flex;
+		flex-direction: column;
+		gap:$spacing-2xsm;
+		align-items: center;
+		justify-content: center;
+		> * {
+			margin:0;
+		}
+	}
+}
+
+//ai 맞춤학습
+.ai-gate-list {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+	gap:$spacing-sm;
+	a {
+		display: block;
+		width: 100%;
+		height: 100%;
+		border:$stroke-secondary;
+		padding:$spacing-xlg $spacing-lg;
+		border-radius: $radius-md;
+		&:hover {
+			border-top-width: $size-stroke-md;
+			border-top-color: $color-stroke-brand-primary;
+		}
+	}
+	.txt-area {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		gap:$spacing-2xsm;
+		h3 {
+			@include typo('tit-lg');
+		}
+		p {
+			color: $color-font-default-secondary;
+		}
+		.btn {
+			position: absolute;
+			right:0;
+			top:1.4rem;
+		}
+	}
+	.img-area {
+		margin-top:$spacing-md;
+		border-radius: $radius-md;
+		overflow: hidden;
+		background: $color-background-brand-primary;
+		img {
+			display: block;
+			max-width: 100%;
+			margin: 0 auto;
+		}
+	}
+	li:nth-child(2n) {
+		a:hover {
+			border-top-color: $color-stroke-brand-secondary;
+		}
+		.img-area{
+			background: $color-background-brand-secondary;
+		}
+	}
+}
+
+.ai-result-tag {
+	.txt-area {
+		display: grid;
+		gap:2.4rem;
+		grid-template-columns: 12rem 1fr;
+		align-items: center;
+	}
+	strong {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 12rem;
+		aspect-ratio: 1;
+		@include typo('tit-lg');
+		border-radius: $radius-md;
+		padding:$spacing-md;
+		text-align: center;
+		&.success {
+			background-color: $color-background-success-primary;
+			color:$color-font-success-primary;
+		}
+		&.warning {
+			background-color: $color-background-warning-primary;
+			color:$color-font-warning-primary;
+		}
+	}
+}
+.ai-result-info {
+	padding:$spacing-xlg 32rem $spacing-xlg $spacing-xlg;
+	border-radius: $radius-md;
+	background: url($url-img + 'custom/sub/img_ai_result_info_bg.png') right no-repeat;
+	background-color:$color-background-brand-primary;
+	background-size: contain;
+	.txt-area {
+		display:grid;
+		gap:$spacing-md;
+	}
+	.txt {
+		@include typo('body-lg');
+		color: $color-font-brand-primary;
+	}
+	.border-box {
+		border: none;
+	}
+	.bullet { 
+		background-color: $color-background-default-primary
+		;
+	}
+}
+.ai-result-tutor {
+	position: relative;
+	display: grid;
+	grid-template-columns: 16rem 1fr;
+	gap:$spacing-sm;
+	align-items: center;
+	&::before {
+		content: " ";
+		position: absolute;
+		top:-1.6rem;
+		right:4rem;
+		width: 10rem;
+		aspect-ratio: 100/92;
+		background: url($url-img + 'custom/sub/img_ai_info_obj.svg');
+		background-size: contain;
+		z-index:1;
+	}
+	.img-area {
+		max-width: 100%;
+	}
+	.txt-area {
+		position: relative;
+		display: flex;
+		padding: $spacing-lg 16rem $spacing-lg $spacing-lg;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: $spacing-xsm;
+		border-radius: $radius-lg;
+		background: $color-background-default-secondary;
+		min-height: 7.6rem;
+		&::before {
+			content: " ";
+			position: absolute;
+			left:0;
+			top:50%;
+			transform: translate(-50%, -100%);
+			width: 0;
+			height: 0;
+			border-style: solid;
+			border-top: .6rem solid transparent;
+			border-bottom: .6rem solid transparent;
+			border-right: 1.6rem solid $color-background-default-secondary;
+			border-left: 0;
+		}
+		h3 {
+			@include typo('tit-sm');
+			color: $color-font-brand-primary;
+		}
+	}
+}
+.ai-result-sel {
+	header {
+		border-radius: $radius-md;
+		display: flex;
+		min-height: 16rem;
+		padding: $spacing-xlg $spacing-2xlg;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		text-align: center;
+		gap: $spacing-xsm;
+		background: linear-gradient(90deg, $color-primary5 0%, $color-accent5 100%);
+		animation: ai-result-sel 6s ease infinite alternate-reverse;
+		@keyframes ai-result-sel {
+			0% {
+				filter: hue-rotate(0deg);
+			}
+			100% {
+				filter: hue-rotate(360deg);
+			}
+		}
+		h3 {
+			@include typo('tit-lg');
+		}
+		p {
+			color: $color-font-default-secondary;
+		}
+	}
+	.fnc {
+		position: relative;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		gap:$spacing-xsm;
+		padding-top:8rem;
+		%bar-ai-result-sel {
+			position: absolute;
+			left:50%;
+			display: block;
+			width: $size-stroke-sm;
+			height: 4rem;
+			background: $color-stroke-default-tertiary;
+		}
+		&::before {
+			content: "";
+			position: absolute;
+			left:50%;
+			display: block;
+			width: $size-stroke-sm;
+			height: 4rem;
+			background: $color-stroke-default-tertiary;
+			top:0;
+			transform: translateX(-50%);
+			@extend %bar-ai-result-sel;
+		}
+		button {
+			position: relative;
+			display: flex;
+			width: 36rem;
+			height: 8rem;
+			padding:0 $spacing-lg;
+			justify-content: center;
+			align-items: center;
+			gap: $spacing-xsm;
+			border-radius: 4rem;
+			border: $size-stroke-sm solid $color-stroke-brand-primary;
+			background: linear-gradient(100deg, $color-primary50 32%, $color-primary40 68%);
+			color: $color-font-default-primary-inverse;
+			@include typo('label-lg', 'em');
+			transition: all .3s;
+			&:hover {
+				background: linear-gradient(103deg, $color-primary50 32%, $color-primary50 68%);
+			}
+			&.seconadry {
+				border-color:$color-stroke-brand-secondary;
+				background: linear-gradient(103deg, $color-secondary50 32%, $color-secondary40 68%);
+				&:hover {
+					background: linear-gradient(103deg, $color-secondary50 32%, $color-secondary50 68%);
+				}
+			}
+			&::before {
+				content: "";
+				top:-$size-stroke-sm;
+				transform: translate(-50%, -100%);
+				@extend %bar-ai-result-sel;
+			}
+			&::after {
+				content: "";
+				position: absolute;
+				top:calc(-4rem - $size-stroke-sm);
+				left:50%;
+				height: $size-stroke-sm;
+				width:calc(50% + ($spacing-xsm/2));
+				background: $color-stroke-default-tertiary;
+			}
+			&:nth-of-type(2) {
+				&::after {
+					left: calc(-1 * $spacing-xsm / 2);
+				}			
+			}
+		}
+	}
+}
+.book-list {
+	display: grid;
+	grid-template-columns: repeat(5, 1fr);
+	gap: $spacing-xlg $spacing-lg;
+
+	li {
+		display: flex;
+		flex-direction: column;
+		gap: $spacing-md;
+		position: relative;
+
+		.item-checkradio {
+			position: absolute;
+			top: $spacing-md;
+			left: $spacing-md;
+		}
+
+		.img-area {
+			figure {
+				border-radius: $radius-sm;
+				border: 0.1rem solid var(--color-stroke-default-tertiary);
+				overflow: hidden;
+				width: 100%;
+				aspect-ratio: 7 / 9;
+
+				img {
+					display: block;
+					object-fit: cover;
+					width: 100%;
+					height: 100%;
+				}
+			}
+		}
+
+		.txt-area {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			gap: $spacing-2xsm;
+
+			strong {
+				@include typo('tit-sm');
+			}
+		}
+	}
+
+	&.col2 {
+		grid-template-columns: repeat(2, 1fr);
+	}
+
+	&.col3 {
+		grid-template-columns: repeat(3, 1fr);
+	}
+}
+
+.bookmark-list {
+	display: grid;
+	grid-template-columns: repeat(4, 1fr);
+	gap: $spacing-2xsm;
+
+	>li {
+		position: relative;
+		min-height: 10rem;
+		figure {
+			display: flex;
+			padding: $spacing-md $spacing-xsm;
+			flex-direction: column;
+			align-items: center;
+			gap: $spacing-xsm;
+			border-radius: $radius-md;
+
+			img {
+				display: block;
+				width: 3.2rem;
+				height: 3.2rem;
+			}
+
+			figcaption {
+				text-align: center;
+				color: $color-font-default-secondary;
+				word-break: keep-all;
+				@include ellipsis(2);
+				@include typo('label-sm');
+			}
+
+			&:hover {
+				background-color: $color-background-default-secondary;
+			}
+		}
+
+		.etc-fnc-area {
+			position: absolute;
+			top: 0;
+			right: 0;
+			border-radius: 20rem;
+
+			&:hover {
+				border: $stroke-secondary;
+				background-color: $color-background-default-primary;
+			}
+		}
+	}
+}
+
+.bookmark-txt-list {
+	@include typo('body-sm');
+	color: $color-font-default-secondary;
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	border-radius: $radius-sm;
+	border: $stroke-secondary;
+	overflow: hidden;
+
+	li {
+		border-bottom: $stroke-secondary;
+
+		a {
+			display: block;
+			text-align: center;
+			padding: $spacing-xsm;
+
+			&:hover {
+				background-color: $color-background-default-secondary;
+			}
+		}
+
+		&:nth-child(odd) {
+			border-right: $stroke-secondary;
+		}
+
+		&:last-child {
+			border-right: none;
+			border-bottom: none;
+		}
+
+		&:last-child:nth-child(odd) {
+			grid-column: 1 / -1;
+		}
+	}
+}
+.btn-item-add {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: $spacing-sm;
+    border: $size-stroke-xsm dashed $color-stroke-default-tertiary;
+    border-radius: $radius-md;
+    text-align: center;
+    color: $color-font-default-tertiary;
+    width: 100%;
+    height: 100%;
+}
+
+@include responsive(tabletSm) {
+	.row {
+		grid-template-columns:  1fr;
+		gap: $spacing-section-sm 0;
+	}
+}
+
+@include responsive(mobile) {
+	.reference-list {
+		grid-template-columns: initial;
+
+		.img-area {
+			max-width: 40%;
+			border-radius: $radius-xsm;
+		}
+	}
+
+	.mark-area {
+		flex-direction: column;
+
+		.sticky-cont {
+			width: 100%;
+		}
+
+		.sticky {
+			height: 48rem;
+		}
+	}
+
+	.user-info-area {
+		.wrap {
+			flex-direction: column;
+		}
+	}
+
+	.emotion-check-area {
+		.emotion-check {
+			padding: $spacing-md;
+
+			ul {
+				grid-template-columns: repeat(2, 1fr);
+				gap: $spacing-2xsm;
+
+				label {
+					padding: $spacing-sm $spacing-xsm;
+					border-radius: $radius-sm;
+
+					img {
+						width: 4.8rem;
+					}
+				}
+
+				.emotion-none {
+					label img {
+						width: 2.4rem;
+					}
+				}
+			}
+		}
+	}
+
+	.ai-gate-list {
+		grid-template-columns: initial;
+
+		.btn.ico-arrow-right {
+			display: none;
+		}
+	}
+
+	.ai-result-tag {
+		.txt-area {
+			grid-template-columns: initial;
+		}
+
+		strong {
+			width: 100%;
+			aspect-ratio: initial;
+		}
+	}
+
+	.ai-result-info {
+		padding: $spacing-lg;
+		background-image: none;
+	}
+
+	.ai-result-tutor {
+		grid-template-columns: initial;
+
+		&::before {
+			display: none;
+		}
+
+		.txt-area {
+			padding: $spacing-md;
+		}
+	}
+
+	.ai-result-sel {
+		.fnc {
+			padding-top: $spacing-lg;
+			gap: $spacing-2xsm;
+			flex-direction: column;
+
+			button {
+				width: 100%;
+				height: 6.4rem;
+
+				&::after,
+				&::before {
+					content: none;
+				}
+			}
+		}
+	}
+
+	.border-list>li {
+		padding: $spacing-sm $spacing-md;
+	}
+
+	.calendar-tbl .emotion img {
+		width: 3.2rem;
+	}
+}(파일 끝에 줄바꿈 문자 없음)
 
63d2789
resources/front/site/SITE_00000/css/custom/page/_sol.scss (added)
+++ resources/front/site/SITE_00000/css/custom/page/_sol.scss
@@ -0,0 +1,0 @@
1e24280
63d2789
resources/front/site/SITE_00000/css/style.css
--- resources/front/site/SITE_00000/css/style.css
+++ resources/front/site/SITE_00000/css/style.css
@@ -32741,4 +32741,3339 @@
 
   [data-responsive=true]:root .student-mn-quick.is-inactive menu {
 
     display: none;
 
   }
 
+}
 
+/* sub */
 
+.aside-area {
 
+  position: sticky;
 
+  top: calc(var(--header-height) + 2rem);
 
+  right: 0;
 
+  z-index: 0;
 
+  height: 0;
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  width: calc(100% + 12rem + 4rem);
 
+  -webkit-box-pack: end;
 
+      -ms-flex-pack: end;
 
+          justify-content: flex-end;
 
+  z-index: 3;
 
+}
 
+.CONTENTS-WRAPPER:has(.aside-area) {
 
+  position: relative;
 
+}
 
+
 
+.aside-area .aside-list {
 
+  margin-left: 12rem;
 
+  width: 12rem;
 
+  background-color: var(--color-background-brand-secondary);
 
+  position: relative;
 
+}
 
+.aside-area .export-area.is-active .popup-export {
 
+  display: grid;
 
+}
 
+.aside-area .export-area.is-active .btn-export-toggle {
 
+  -webkit-box-shadow: 1rem 1rem 3rem rgba(0, 135, 255, 0.3);
 
+          box-shadow: 1rem 1rem 3rem rgba(0, 135, 255, 0.3);
 
+}
 
+.aside-area .popup-export {
 
+  display: none;
 
+  grid-template-rows: 6.4rem auto 6.4rem;
 
+  top: 0;
 
+  left: -2rem;
 
+  -webkit-transform: translateX(-100%);
 
+          transform: translateX(-100%);
 
+  position: absolute;
 
+  background-color: var(--color-background-default-primary);
 
+  border: 0.1rem solid var(--color-stroke-default-tertiary);
 
+  border-radius: 2.4rem;
 
+  width: 40rem;
 
+  height: 64rem;
 
+  max-height: calc(100vh - (var(--header-height) + 4rem));
 
+  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.03), 4px 8px 16px 0 rgba(0, 0, 0, 0.04);
 
+          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.03), 4px 8px 16px 0 rgba(0, 0, 0, 0.04);
 
+  -webkit-animation: export 0.5s forwards;
 
+          animation: export 0.5s forwards;
 
+}
 
+@keyframes export {
 
+  0% {
 
+    opacity: 0.5;
 
+    margin-left: 10%;
 
+  }
 
+  100% {
 
+    opacity: 1;
 
+    margin-left: 0;
 
+  }
 
+}
 
+.aside-area .popup-export .pop-header {
 
+  padding: 0 2.4rem;
 
+}
 
+.aside-area .popup-export .pop-header h1 {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  height: 100%;
 
+  font-size: var(--font-tit-md);
 
+  font-weight: var(--size-font-weight-xlg);
 
+  line-height: var(--size-font-lineheight-sm);
 
+}
 
+.aside-area .popup-export .pop-body {
 
+  grid-template-rows: auto;
 
+  overflow-y: auto;
 
+  padding: 0 2.4rem 2.4rem;
 
+}
 
+.aside-area .popup-export .pop-footer {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+}
 
+.aside-area .popup-export .pop-footer button {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  height: 100%;
 
+  -webkit-box-pack: center;
 
+      -ms-flex-pack: center;
 
+          justify-content: center;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  -webkit-box-flex: 1;
 
+      -ms-flex: 1;
 
+          flex: 1;
 
+  background-color: var(--color-background-brand-secondary-inverse);
 
+  color: #fff;
 
+  font-weight: 700;
 
+  border-radius: 0 0 2.4rem 2.4rem;
 
+  font-size: var(--fs-lg);
 
+}
 
+.aside-area .popup-export .pop-footer button:hover {
 
+  background-color: var(--color-background-brand-secondary-inverse);
 
+}
 
+.aside-area .popup-export .pop-footer button strong {
 
+  color: var(--color-font-brand-accent);
 
+}
 
+.aside-area .popup-export .pop-footer button:disabled {
 
+  cursor: default;
 
+  background-color: var(--color-font-default-tertiary);
 
+  opacity: 1;
 
+  pointer-events: none;
 
+}
 
+.aside-area .export-list {
 
+  display: grid;
 
+  gap: 0.4rem;
 
+}
 
+.aside-area .export-list li {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  position: relative;
 
+  border: 0.1rem solid var(--color-stroke-default-tertiary);
 
+  border-radius: 1.2rem;
 
+  padding: 0.8rem 1.6rem;
 
+  min-height: 8rem;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  min-width: 0;
 
+  gap: 0.8rem;
 
+}
 
+.aside-area .export-list li:hover {
 
+  border-color: var(--color-stroke-default-secondary);
 
+  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.03), 4px 8px 16px 0 rgba(0, 0, 0, 0.04);
 
+          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.03), 4px 8px 16px 0 rgba(0, 0, 0, 0.04);
 
+}
 
+.aside-area .export-list li:hover .export-fnc {
 
+  display: block;
 
+}
 
+.aside-area .export-list .txt-area {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  gap: 0.8rem;
 
+  overflow: hidden;
 
+  -webkit-box-flex: 1;
 
+      -ms-flex: 1;
 
+          flex: 1;
 
+}
 
+.aside-area .export-list .txt-area .editor-cont {
 
+  text-overflow: ellipsis;
 
+  white-space: nowrap;
 
+  word-wrap: normal;
 
+  width: 100%;
 
+  overflow: hidden;
 
+}
 
+.aside-area .export-list .txt-area .editor-cont br {
 
+  display: none !important;
 
+}
 
+.aside-area .export-list .img-area {
 
+  width: 9rem;
 
+}
 
+.aside-area .export-list .img-area figure {
 
+  display: block;
 
+  position: relative;
 
+  display: block;
 
+  width: 100%;
 
+  aspect-ratio: 1/0.5656;
 
+  background: #F7F7F8;
 
+  overflow: hidden;
 
+  border-radius: 2.4rem;
 
+  border: 1px solid #B1B8BE;
 
+  -webkit-box-sizing: border-box;
 
+          box-sizing: border-box;
 
+  border-radius: 0.8rem;
 
+  border: 0.1rem solid var(--color-stroke-default-tertiary);
 
+  background-color: var(--color-background-default-tertiary);
 
+  overflow: hidden;
 
+}
 
+.aside-area .export-list .img-area figure img {
 
+  position: absolute;
 
+  top: 0;
 
+  left: 0;
 
+  right: 0;
 
+  bottom: 0;
 
+  display: block;
 
+  -o-object-fit: cover;
 
+     object-fit: cover;
 
+  width: 100%;
 
+  height: 100%;
 
+  -webkit-transition: all 0.5s;
 
+  transition: all 0.5s;
 
+}
 
+.aside-area .export-list .img-area figure img {
 
+  -o-object-fit: cover;
 
+     object-fit: cover;
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+.aside-area .export-list .export-fnc {
 
+  display: none;
 
+  position: absolute;
 
+  right: -1.6rem;
 
+  top: 50%;
 
+  -webkit-transform: translateY(-50%);
 
+          transform: translateY(-50%);
 
+  z-index: 2;
 
+}
 
+.aside-area .btn-export-toggle {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  -webkit-box-pack: center;
 
+      -ms-flex-pack: center;
 
+          justify-content: center;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  gap: 0.8rem;
 
+  width: 12rem;
 
+  height: 12rem;
 
+  background-color: var(--color-background-brand-primary-inverse);
 
+  border-radius: 3.2rem;
 
+  color: #fff;
 
+  font-size: var(--fs-lg);
 
+  font-weight: 700;
 
+}
 
+.aside-area .btn-export-toggle:before {
 
+  content: " ";
 
+  width: 4rem;
 
+  height: 4rem;
 
+  background: url("../images/common/ico-img/ico-img-folders.svg");
 
+  background-size: contain;
 
+}
 
+.aside-area .btn-export-toggle:hover {
 
+  -webkit-box-shadow: 1rem 1rem 3rem rgba(0, 135, 255, 0.3);
 
+          box-shadow: 1rem 1rem 3rem rgba(0, 135, 255, 0.3);
 
+}
 
+
 
+.copy-area {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  -ms-flex-wrap: wrap;
 
+      flex-wrap: wrap;
 
+  gap: 0.4rem;
 
+  -webkit-box-sizing: border-box;
 
+          box-sizing: border-box;
 
+}
 
+.copy-area:has(.img-area) {
 
+  width: 12rem;
 
+}
 
+.copy-area .img-area img {
 
+  display: block;
 
+  max-width: 100%;
 
+}
 
+.copy-area .txt-area {
 
+  font-size: var(--font-label-sm);
 
+  font-weight: var(--size-font-weight-md);
 
+  line-height: var(--size-font-lineheight-xsm);
 
+}
 
+.checkradio input:disabled ~ label .copy-area .img-area {
 
+  opacity: 0.2;
 
+}
 
+
 
+.class-write-nav {
 
+  display: grid;
 
+  grid-template-columns: repeat(4, 1fr);
 
+  gap: 0.8rem;
 
+}
 
+.class-write-nav > li {
 
+  position: relative;
 
+}
 
+.class-write-nav > li input {
 
+  width: 100%;
 
+  padding-right: 8rem;
 
+  padding-left: 1.6rem;
 
+  cursor: pointer;
 
+}
 
+.class-write-nav > li .nav-fnc {
 
+  position: absolute;
 
+  right: 1.6rem;
 
+  top: 50%;
 
+  -webkit-transform: translateY(-50%);
 
+          transform: translateY(-50%);
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  gap: 0.8rem;
 
+}
 
+.class-write-nav > li.is-active input {
 
+  background-color: var(--color-primary50);
 
+  color: #fff;
 
+}
 
+.class-write-nav > li.is-active input::-webkit-input-placeholder {
 
+  color: var(--color-font-default-tertiary);
 
+}
 
+.class-write-nav > li.is-active input::-moz-placeholder {
 
+  color: var(--color-font-default-tertiary);
 
+}
 
+.class-write-nav > li.is-active input:-ms-input-placeholder {
 
+  color: var(--color-font-default-tertiary);
 
+}
 
+.class-write-nav > li.is-active input::-ms-input-placeholder {
 
+  color: var(--color-font-default-tertiary);
 
+}
 
+.class-write-nav > li.is-active input::placeholder {
 
+  color: var(--color-font-default-tertiary);
 
+}
 
+.class-write-nav > li.is-active .ico-edit::before {
 
+  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 24 24' xml:space='preserve'%3E%3Cg fill='%23fff'%3E%3Cpath class='cls-2' d='M21.707,6.293l-4-4c-.391-.391-1.023-.391-1.414,0L2.293,16.293c-.188.188-.293.442-.293.707v4c0,.552.448,1,1,1h4c.265,0,.52-.105.707-.293l14-14c.391-.391.391-1.023,0-1.414ZM14,7.414l2.586,2.586-6.586,6.586-2.586-2.586,6.586-6.586ZM6.586,20h-2.586v-2.586l2-2,2.586,2.586-2,2ZM18,8.586l-2.586-2.586,1.586-1.586,2.586,2.586-1.586,1.586Z'/%3E%3C/g%3E%3C/svg%3E");
 
+}
 
+.class-write-nav > li.is-active .ico-delete::before {
 
+  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 24 24' xml:space='preserve'%3E%3Cg fill='%23fff'%3E%3Crect x='6' y='2' width='12' height='2'/%3E%3Crect x='9' y='9' width='2' height='9'/%3E%3Crect x='13' y='9' width='2' height='9'/%3E%3Cpath d='m19,22V7h1v-2H4v2h1v15h14Zm-2-15v13H7V7h10Z'/%3E%3C/g%3E%3C/svg%3E");
 
+}
 
+
 
+.class-write-result::after {
 
+  content: " ";
 
+  display: block;
 
+  margin: 2.4rem auto 0;
 
+  width: 4rem;
 
+  height: 4rem;
 
+  background: url("../images/common/ico-img/ico-img-arrow-blue.svg") center center/cover no-repeat;
 
+}
 
+.class-write-result.is-close::after {
 
+  display: none;
 
+}
 
+.class-write-result .tabs-nav-lg {
 
+  margin-bottom: -0.2rem;
 
+}
 
+.class-write-result .search-cont-area > *:last-child {
 
+  border-radius: 0 0 2.4rem 2.4rem;
 
+}
 
+.class-write-result .search-cont,
 
+.class-write-result .search-etc {
 
+  border: 0.2rem solid var(--color-primary50);
 
+}
 
+.class-write-result .tabs-normal .search-cont {
 
+  display: none;
 
+}
 
+.class-write-result .search-cont {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  height: 84rem;
 
+  overflow: hidden;
 
+  padding: 2.4rem;
 
+}
 
+.class-write-result .search-cont.is-active {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+}
 
+.class-write-result .search-cont .cont-header,
 
+.class-write-result .search-cont .cont-footer {
 
+  -webkit-box-flex: 0;
 
+      -ms-flex: none;
 
+          flex: none;
 
+}
 
+.class-write-result .search-cont .cont-header > *,
 
+.class-write-result .search-cont .cont-footer > * {
 
+  margin: 0;
 
+}
 
+.class-write-result .search-cont .cont-header {
 
+  padding-bottom: 2.4rem;
 
+}
 
+.class-write-result .search-cont .cont-body {
 
+  position: relative;
 
+  -webkit-box-flex: 1;
 
+      -ms-flex: 1;
 
+          flex: 1;
 
+  overflow-y: auto;
 
+}
 
+.class-write-result .search-cont .cont-footer {
 
+  padding-top: 2.4rem;
 
+}
 
+.class-write-result .search-etc {
 
+  border-top: none;
 
+  display: grid;
 
+  grid-template-columns: 16rem auto;
 
+  overflow: hidden;
 
+  -webkit-box-align: stretch;
 
+      -ms-flex-align: stretch;
 
+          align-items: stretch;
 
+}
 
+.class-write-result .search-etc > * {
 
+  padding: 2.4rem;
 
+}
 
+.class-write-result .search-etc > cite {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  background-color: var(--color-background-info-primary);
 
+  font-size: var(--font-tit-sm);
 
+  font-weight: var(--size-font-weight-xlg);
 
+  line-height: var(--size-font-lineheight-sm);
 
+}
 
+
 
+.popup-guide-classwrite {
 
+  position: absolute;
 
+  top: 0;
 
+  left: 0;
 
+  right: 0;
 
+  bottom: 0;
 
+  background-color: rgba(17, 17, 17, 0.8);
 
+  backdrop-filter: saturate(200%) blur(2rem);
 
+  border-radius: 2.4rem;
 
+  z-index: 3;
 
+}
 
+.popup-guide-classwrite .ico-close {
 
+  position: absolute;
 
+  top: 1.6rem;
 
+  right: 1.6rem;
 
+  left: auto;
 
+}
 
+.popup-guide-classwrite .pop-body img {
 
+  display: block;
 
+  width: 100%;
 
+}
 
+.popup-guide-classwrite .pop-fnc {
 
+  position: absolute;
 
+  bottom: 2rem;
 
+  left: 2rem;
 
+}
 
+.popup-guide-classwrite.is-active .pop-fnc {
 
+  display: none;
 
+}
 
+.popup-guide-classwrite .checkradio input[type=checkbox] ~ label {
 
+  color: var(--color-font-default-quaternary);
 
+}
 
+.popup-guide-classwrite .checkradio input[type=checkbox]:checked ~ label {
 
+  color: #fff;
 
+}
 
+.popup-guide-classwrite .checkradio input[type=checkbox] ~ label:before,
 
+.popup-guide-classwrite .checkradio input[type=radio] ~ label:before {
 
+  border-color: var(--color-font-default-tertiary);
 
+  background: none;
 
+}
 
+.popup-guide-classwrite .checkradio input[type=checkbox]:checked ~ label:before,
 
+.popup-guide-classwrite .checkradio input[type=checkbox]:checked ~ label:after {
 
+  border-color: #fff;
 
+}
 
+
 
+/* AI문항: 성취코드 */
 
+.achievecode {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  gap: 0.8rem;
 
+  max-height: 60rem;
 
+  overflow-y: auto;
 
+}
 
+.achievecode .tit-area {
 
+  margin-bottom: 0.8rem;
 
+}
 
+.achievecode > * {
 
+  margin: 0;
 
+}
 
+.achievecode .btn-cont {
 
+  margin: 1.6rem 0 0;
 
+}
 
+.achievecode .bg-border-box {
 
+  -webkit-box-flex: 0;
 
+      -ms-flex: none;
 
+          flex: none;
 
+}
 
+.achievecode .box-body {
 
+  overflow: hidden;
 
+  -webkit-box-flex: 0;
 
+      -ms-flex: none;
 
+          flex: none;
 
+}
 
+
 
+.achievecode-list {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  gap: 0.8rem;
 
+  overflow-x: auto;
 
+}
 
+.achievecode-list > li {
 
+  -webkit-box-flex: 1;
 
+      -ms-flex: 1;
 
+          flex: 1;
 
+  padding: 1.6rem;
 
+  border: 0.1rem solid var(--color-stroke-default-tertiary);
 
+  border-radius: 1.2rem;
 
+  background-color: var(--color-background-default-primary);
 
+  overflow: hidden;
 
+  min-width: 24rem;
 
+  -webkit-box-sizing: border-box;
 
+          box-sizing: border-box;
 
+}
 
+.achievecode-list > li.is-active {
 
+  border-width: 0.1rem;
 
+  border-color: #a0a0a0;
 
+}
 
+.achievecode-list p {
 
+  display: block;
 
+  font-size: 1.5rem;
 
+  margin-bottom: 0.8rem;
 
+}
 
+.achievecode-list .checkradio {
 
+  overflow: hidden;
 
+}
 
+.achievecode-list .checkradio .txt-area {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  gap: 0.4rem;
 
+}
 
+.achievecode-list .checkradio strong {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  -webkit-box-pack: center;
 
+      -ms-flex-pack: center;
 
+          justify-content: center;
 
+  width: 4rem;
 
+  -ms-flex-preferred-size: 4rem;
 
+      flex-basis: 4rem;
 
+  margin-top: -1.6rem;
 
+  margin-bottom: -1.6rem;
 
+  margin-left: -1.6rem;
 
+  -ms-flex-item-align: stretch;
 
+      align-self: stretch;
 
+}
 
+.achievecode-list .checkradio span {
 
+  -webkit-box-flex: 1;
 
+      -ms-flex: 1;
 
+          flex: 1;
 
+}
 
+.achievecode-list .checkradio .font-color-red {
 
+  background-color: rgba(238, 0, 0, 0.05);
 
+}
 
+.achievecode-list .checkradio .font-color-blue {
 
+  background-color: rgba(0, 116, 229, 0.05);
 
+}
 
+.achievecode-list .checkradio .font-color-green {
 
+  background-color: rgba(0, 149, 0, 0.05);
 
+}
 
+
 
+.achievecode-add-area {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  max-height: 70rem;
 
+  -ms-flex-wrap: nowrap;
 
+      flex-wrap: nowrap;
 
+  gap: 0.8rem;
 
+}
 
+.achievecode-add-area .top-area {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  gap: 0.8rem;
 
+}
 
+
 
+.achievecode-add-item {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-flex: 0;
 
+      -ms-flex: none;
 
+          flex: none;
 
+  gap: 2.4rem;
 
+  background-color: var(--color-background-default-primary);
 
+  border: 0.1rem solid var(--color-stroke-default-tertiary);
 
+  border-radius: 2.4rem;
 
+  padding: 2.4rem;
 
+  overflow: hidden;
 
+  -webkit-box-sizing: border-box;
 
+          box-sizing: border-box;
 
+}
 
+.achievecode-add-item .info-list {
 
+  -webkit-box-flex: 1;
 
+      -ms-flex: 1;
 
+          flex: 1;
 
+  margin-bottom: 0;
 
+}
 
+.achievecode-add-item .btn-full-h {
 
+  -ms-flex-item-align: stretch;
 
+      align-self: stretch;
 
+  background-color: var(--color-background-default-secondary);
 
+  margin: -2.4rem;
 
+  -webkit-box-sizing: border-box;
 
+          box-sizing: border-box;
 
+  -ms-flex-preferred-size: 8rem;
 
+      flex-basis: 8rem;
 
+  width: 8rem;
 
+  border-left: 0.1rem solid var(--color-stroke-default-tertiary);
 
+}
 
+
 
+.contents-sch-area {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  gap: 1.6rem;
 
+  margin: 0 0 1.2rem !important;
 
+}
 
+.contents-sch-area .contents-sch-top-area {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  gap: 1.6rem;
 
+  height: 48rem;
 
+  -webkit-box-sizing: border-box;
 
+          box-sizing: border-box;
 
+  overflow: hidden;
 
+}
 
+.contents-sch-area .contents-sch-etc-area {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  -ms-flex-preferred-size: 32rem;
 
+      flex-basis: 32rem;
 
+  height: 100%;
 
+  -webkit-box-sizing: border-box;
 
+          box-sizing: border-box;
 
+}
 
+.contents-sch-area .contents-sch-etc-area .tit-area {
 
+  -webkit-box-flex: 0;
 
+      -ms-flex: none;
 
+          flex: none;
 
+  margin-bottom: 1.6rem;
 
+}
 
+.contents-sch-area .contents-sch-etc-area .sch-etc-cont {
 
+  -webkit-box-flex: 1;
 
+      -ms-flex: 1;
 
+          flex: 1;
 
+  overflow-y: auto;
 
+}
 
+.contents-sch-area .contents-sch {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  gap: 0.8rem;
 
+  -webkit-box-flex: 1;
 
+      -ms-flex: 1;
 
+          flex: 1;
 
+  margin: 0;
 
+  overflow: hidden;
 
+}
 
+.contents-sch-area .sch-result-cont {
 
+  overflow-y: auto;
 
+  overflow-x: hidden;
 
+}
 
+
 
+.contents-add-area {
 
+  min-height: 40rem;
 
+  height: 40rem;
 
+  overflow-y: auto;
 
+}
 
+
 
+@keyframes inform-on {
 
+  0% {
 
+    border: 0.1rem solid var(--color-stroke-default-tertiary);
 
+  }
 
+  100% {
 
+    border: 0.1rem solid var(--color-stroke-brand-primary);
 
+  }
 
+}
 
+.inform-list li {
 
+  position: relative;
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  gap: 2.4rem;
 
+  padding: 2.4rem;
 
+  border: 0.1rem solid var(--color-stroke-default-tertiary);
 
+  border-radius: 2.4rem;
 
+  background: var(--color-background-default-secondary);
 
+}
 
+.inform-list li .img-area i {
 
+  display: block;
 
+  width: 3.2rem;
 
+  height: 3.2rem;
 
+  background-size: cover;
 
+  background-repeat: no-repeat;
 
+  background-position: 0 0;
 
+}
 
+.inform-list li .img-area .ico-confirm {
 
+  background-image: url("../images/common/common/img_confirm.svg");
 
+}
 
+.inform-list li .img-area .ico-warning {
 
+  background-image: url("../images/common/common/img_warning.svg");
 
+}
 
+.inform-list li .txt-area {
 
+  word-break: keep-all;
 
+}
 
+.inform-list li .txt-area .profile-area {
 
+  gap: 0.8rem;
 
+  margin-bottom: 0.4rem;
 
+}
 
+.inform-list li .txt-area .profile-area .img-area {
 
+  width: 2.4rem;
 
+  height: 2.4rem;
 
+}
 
+.inform-list li .txt-area .profile-area .txt-area cite {
 
+  font-size: 1.2rem;
 
+}
 
+.inform-list li .txt-area h3 {
 
+  font-size: 1.6rem;
 
+  font-weight: 400;
 
+}
 
+.inform-list li .txt-area p {
 
+  color: var(--color-font-default-tertiary);
 
+  margin-top: 0.2rem;
 
+}
 
+.inform-list li .txt-area span {
 
+  display: block;
 
+  font-size: 1.2rem;
 
+  color: var(--color-font-default-tertiary);
 
+  margin-top: 0.6rem;
 
+}
 
+.inform-list li.on {
 
+  background: #fff;
 
+  -webkit-animation: inform-on 0.5s 2 ease-out;
 
+          animation: inform-on 0.5s 2 ease-out;
 
+}
 
+.inform-list li.on::after {
 
+  content: "";
 
+  position: absolute;
 
+  top: 1.6rem;
 
+  right: 1.6rem;
 
+  display: block;
 
+  background-color: var(--color-background-brand-secondary-inverse);
 
+  width: 0.4rem;
 
+  height: 0.4rem;
 
+  border-radius: 2.4rem;
 
+}
 
+.inform-list li ~ li {
 
+  margin-top: 0.8rem;
 
+}
 
+
 
+.test-write-area {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  gap: 1.6rem;
 
+}
 
+.test-write-area > .tit-area,
 
+.test-write-area .sch-box {
 
+  margin-bottom: 0;
 
+}
 
+.test-write-area .sch-box {
 
+  -ms-flex-preferred-size: 30rem;
 
+      flex-basis: 30rem;
 
+}
 
+.test-write-area .test-cont {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+}
 
+.test-write-area .test-cont > .l-area,
 
+.test-write-area .test-cont > .r-area {
 
+  -webkit-box-flex: 1;
 
+      -ms-flex: 1;
 
+          flex: 1;
 
+  min-width: 0;
 
+}
 
+.test-write-area .test-cont > .c-area {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  -webkit-box-pack: center;
 
+      -ms-flex-pack: center;
 
+          justify-content: center;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  -ms-flex-preferred-size: 5.6rem;
 
+      flex-basis: 5.6rem;
 
+  gap: 0.8rem;
 
+}
 
+.test-write-area .test-cont .scroll-area {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  height: 100%;
 
+  -webkit-box-flex: 1;
 
+      -ms-flex: 1;
 
+          flex: 1;
 
+  overflow: hidden;
 
+}
 
+.test-write-area .test-cont .scroll-area .scroll {
 
+  -webkit-box-flex: 1;
 
+      -ms-flex: 1;
 
+          flex: 1;
 
+  overflow-y: auto;
 
+}
 
+.test-write-area .test-cont .bg-border-box {
 
+  height: 64rem;
 
+  overflow: hidden;
 
+}
 
+.test-write-area .test-cont .bg-border-box .box-body {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  -webkit-box-flex: 1;
 
+      -ms-flex: 1;
 
+          flex: 1;
 
+  overflow: hidden;
 
+}
 
+.test-write-area .test-cont .bg-border-box .tabs-cont {
 
+  height: 100%;
 
+  overflow: hidden;
 
+}
 
+.test-write-area .test-cont .bg-border-box .box-footer {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  gap: 0.8rem;
 
+  -webkit-box-pack: end;
 
+      -ms-flex-pack: end;
 
+          justify-content: flex-end;
 
+}
 
+.test-write-area .test-cont .bg-border-box .total-txt {
 
+  font-size: 1.6rem;
 
+}
 
+.test-write-area .test-cont .tabs-cont .fnc-area,
 
+.test-write-area .test-cont .tabs-cont .tit-area {
 
+  margin-bottom: 0.8rem;
 
+}
 
+
 
+.test-achievecode-add-area {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  gap: 0.8rem;
 
+}
 
+.test-achievecode-add-area .top-area {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  gap: 0.8rem;
 
+}
 
+
 
+.folder-list, .folder-block-list {
 
+  display: grid;
 
+  grid-template-columns: repeat(3, 1fr);
 
+  gap: 1.6rem;
 
+  font-size: 1.6rem;
 
+}
 
+.folder-list li, .folder-block-list li {
 
+  position: relative;
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  padding: 1.6rem;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  border: 0.1rem solid var(--color-stroke-default-tertiary);
 
+  height: 16rem;
 
+  -webkit-box-sizing: border-box;
 
+          box-sizing: border-box;
 
+  border-radius: 2.4rem;
 
+  background-color: var(--color-background-default-primary);
 
+  gap: 1.6rem;
 
+}
 
+.folder-list li:hover .folder-fnc-r, .folder-block-list li:hover .folder-fnc-r {
 
+  display: block;
 
+}
 
+.folder-list.col1, .col1.folder-block-list {
 
+  grid-template-columns: repeat(1, 1fr);
 
+}
 
+.folder-list.col4, .col4.folder-block-list {
 
+  grid-template-columns: repeat(4, 1fr);
 
+}
 
+.folder-list.sm li, .sm.folder-block-list li {
 
+  height: 12rem;
 
+}
 
+.folder-list .num, .folder-block-list .num {
 
+  -webkit-box-flex: 0;
 
+      -ms-flex: none;
 
+          flex: none;
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  -webkit-box-pack: center;
 
+      -ms-flex-pack: center;
 
+          justify-content: center;
 
+  width: 5.6rem;
 
+  height: 5.6rem;
 
+  background-color: var(--color-background-brand-primary);
 
+  font-size: 2.4rem;
 
+  font-weight: 700;
 
+  color: var(--color-primary50);
 
+  border-radius: 2.4rem;
 
+}
 
+.folder-list p, .folder-block-list p {
 
+  font-weight: 700;
 
+  color: var(--color-font-default-primary);
 
+}
 
+.folder-list .folder-fnc-l, .folder-block-list .folder-fnc-l,
 
+.folder-list .folder-fnc-r,
 
+.folder-block-list .folder-fnc-r {
 
+  position: absolute;
 
+  top: 0.8rem;
 
+  z-index: 1;
 
+}
 
+.folder-list .folder-fnc-l, .folder-block-list .folder-fnc-l {
 
+  left: 0.8rem;
 
+}
 
+.folder-list .folder-fnc-r, .folder-block-list .folder-fnc-r {
 
+  display: block;
 
+  right: 0.8rem;
 
+}
 
+.folder-list .add, .folder-block-list .add {
 
+  border-style: dashed;
 
+  border-width: 0.2rem;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  -webkit-box-pack: center;
 
+      -ms-flex-pack: center;
 
+          justify-content: center;
 
+  font-size: 1.4rem;
 
+  color: var(--color-font-default-tertiary);
 
+  gap: 0.8rem;
 
+}
 
+.folder-list .add::before, .folder-block-list .add::before {
 
+  content: " ";
 
+  width: var(--size-icon-md);
 
+  height: var(--size-icon-md);
 
+  -webkit-mask-size: cover;
 
+          mask-size: cover;
 
+  -webkit-mask-position: center;
 
+          mask-position: center;
 
+  -webkit-mask-repeat: no-repeat;
 
+          mask-repeat: no-repeat;
 
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 24 24' xml:space='preserve'%3E%3Cg fill='%23111'%3E%3Cpolygon points='13 3 11 3 11 11 3 11 3 13 11 13 11 21 13 21 13 13 21 13 21 11 13 11 13 3'/%3E%3C/g%3E%3C/svg%3E");
 
+          mask-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 24 24' xml:space='preserve'%3E%3Cg fill='%23111'%3E%3Cpolygon points='13 3 11 3 11 11 3 11 3 13 11 13 11 21 13 21 13 13 21 13 21 11 13 11 13 3'/%3E%3C/g%3E%3C/svg%3E");
 
+  background-color: var(--color-icon-default-primary);
 
+  background-color: var(--color-font-default-tertiary);
 
+}
 
+.folder-list .etc-fnc-area li, .folder-block-list .etc-fnc-area li {
 
+  padding: initial;
 
+  height: auto;
 
+  border-radius: initial;
 
+  border: initial;
 
+}
 
+
 
+.folder-block-list {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  gap: 0.8rem;
 
+}
 
+.folder-block-list > li {
 
+  height: 8rem;
 
+}
 
+.folder-block-list .num {
 
+  -webkit-box-flex: 0;
 
+      -ms-flex: none;
 
+          flex: none;
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  -webkit-box-pack: center;
 
+      -ms-flex-pack: center;
 
+          justify-content: center;
 
+  width: 4rem;
 
+  height: 4rem;
 
+  background-color: var(--color-background-brand-primary);
 
+  font-size: 1.6rem;
 
+  font-weight: 700;
 
+  color: var(--color-primary50);
 
+  border-radius: 1.2rem;
 
+}
 
+.folder-block-list p {
 
+  display: -webkit-box;
 
+  overflow: hidden;
 
+  line-height: 1.4;
 
+  width: 100%;
 
+  text-overflow: ellipsis;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-line-clamp: 2;
 
+}
 
+
 
+.star {
 
+  position: relative;
 
+  display: inline-block;
 
+  width: 8rem;
 
+  height: 1.6rem;
 
+  background: url("../images/common/common/btn_star.svg") top left repeat-x;
 
+  background-size: auto 3.2rem;
 
+  vertical-align: middle;
 
+}
 
+.star span {
 
+  position: absolute;
 
+  top: 0;
 
+  left: 0;
 
+  bottom: 0;
 
+  text-indent: -99999px;
 
+  background: url("../images/common/common/btn_star.svg") 0 -1.6rem repeat-x;
 
+  background-size: auto 3.2rem;
 
+}
 
+
 
+.star-check button {
 
+  width: 3.2rem;
 
+  height: 3.2rem;
 
+  background: url("../images/common/common/btn_star.svg") no-repeat;
 
+  background-size: auto 6.4rem;
 
+  background-position: top left;
 
+  background-repeat: no-repeat;
 
+  overflow: hidden;
 
+}
 
+.star-check button.is-active, .star-check button.is-hover {
 
+  background-position: 0 -3.2rem;
 
+}
 
+
 
+.star-check-list {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  gap: 0.8rem;
 
+}
 
+.star-check-list li {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  gap: 0.8rem;
 
+  background-color: var(--color-background-default-secondary);
 
+  border-radius: 2.4rem;
 
+  padding: 1.6rem 2.4rem;
 
+  text-align: left;
 
+}
 
+.star-check-list .txt-area p {
 
+  font-size: 1.5rem;
 
+}
 
+.star-check-list .star-check {
 
+  text-align: center;
 
+}
 
+
 
+.step-list li {
 
+  visibility: hidden;
 
+}
 
+.step-list li.is-active {
 
+  visibility: visible;
 
+  -webkit-animation: opacity 1s forwards;
 
+          animation: opacity 1s forwards;
 
+}
 
+
 
+.step-end {
 
+  display: none;
 
+  -webkit-animation: opacityUp 0.5s forwards;
 
+          animation: opacityUp 0.5s forwards;
 
+}
 
+
 
+.mark-area {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  gap: 2.4rem;
 
+}
 
+.mark-area .sticky-cont {
 
+  position: relative;
 
+  -webkit-box-sizing: border-box;
 
+          box-sizing: border-box;
 
+  width: 24rem;
 
+  -webkit-box-flex: 0;
 
+      -ms-flex: none;
 
+          flex: none;
 
+}
 
+.mark-area .sticky {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  -webkit-box-pack: justify;
 
+      -ms-flex-pack: justify;
 
+          justify-content: space-between;
 
+  background-color: var(--color-background-default-tertiary);
 
+  border-radius: 2.4rem;
 
+  border: 0.1rem solid var(--color-stroke-default-tertiary);
 
+  padding: 2.4rem 1.6rem;
 
+  height: calc(100vh - (var(--header-height) + 4.8rem));
 
+  gap: 1.6rem;
 
+  top: calc(var(--header-height) + 2.4rem);
 
+}
 
+.mark-area .btn-flex-cont {
 
+  margin: 0;
 
+}
 
+
 
+.img-sch-area .sch-area {
 
+  position: sticky;
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  gap: 0.8rem;
 
+  top: -2rem;
 
+  z-index: 2;
 
+  background-color: var(--color-background-default-secondary);
 
+  padding: 2rem;
 
+  border: 0.1rem solid var(--color-stroke-default-tertiary);
 
+  border-radius: 2.4rem;
 
+  overflow: hidden;
 
+}
 
+.img-sch-area .sch-area .sch {
 
+  -webkit-box-flex: 1;
 
+      -ms-flex: 1;
 
+          flex: 1;
 
+}
 
+.img-sch-area .img-sch-result {
 
+  padding: 4.8rem;
 
+  background-color: var(--color-background-default-secondary);
 
+  border-radius: 2.4rem;
 
+}
 
+.img-sch-area .img-sch-list {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -ms-flex-wrap: wrap;
 
+      flex-wrap: wrap;
 
+  gap: 1.6rem;
 
+}
 
+.img-sch-area .img-sch-list li {
 
+  position: relative;
 
+  width: calc((100% - 8rem) / 6);
 
+}
 
+.img-sch-area .img-sch-list li:hover {
 
+  z-index: 1;
 
+}
 
+.img-sch-area .img-sch-list li:hover figure {
 
+  -webkit-transform: scale(1.8);
 
+          transform: scale(1.8);
 
+}
 
+.img-sch-area .img-sch-list figure {
 
+  position: relative;
 
+  height: 0;
 
+  padding-top: 100%;
 
+  background-color: var(--color-background-default-secondary);
 
+  border: 0.1rem solid var(--color-stroke-default-tertiary);
 
+  border-radius: 2.4rem;
 
+}
 
+.img-sch-area .img-sch-list figure img {
 
+  -o-object-fit: cover;
 
+     object-fit: cover;
 
+  position: absolute;
 
+  display: block;
 
+  top: 50%;
 
+  left: 50%;
 
+  -webkit-transform: translate(-50%, -50%);
 
+          transform: translate(-50%, -50%);
 
+  max-width: 100%;
 
+  max-height: 100%;
 
+}
 
+
 
+/* .test-list */
 
+.test-list {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -ms-flex-wrap: wrap;
 
+      flex-wrap: wrap;
 
+  gap: 1.6rem;
 
+}
 
+.test-list li {
 
+  -ms-flex-preferred-size: calc((100% - 0.8rem) / 2);
 
+      flex-basis: calc((100% - 0.8rem) / 2);
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  gap: 2.4rem;
 
+  -webkit-box-pack: center;
 
+      -ms-flex-pack: center;
 
+          justify-content: center;
 
+  position: relative;
 
+  padding: 2.4rem 3.2rem;
 
+  -webkit-box-sizing: border-box;
 
+          box-sizing: border-box;
 
+  border-radius: 0.8rem;
 
+  border: 0.1rem solid var(--color-stroke-default-tertiary);
 
+  min-width: 0;
 
+}
 
+.test-list li .cont {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  gap: 2.4rem;
 
+}
 
+.test-list li .btn-flex-cont {
 
+  margin: 0;
 
+}
 
+.test-list li .txt-area {
 
+  -webkit-box-flex: 1;
 
+      -ms-flex: 1;
 
+          flex: 1;
 
+}
 
+.test-list li .txt-area .label-area {
 
+  margin-bottom: 1.2rem;
 
+}
 
+.test-list li .txt-area h3 {
 
+  font-size: 1.8rem;
 
+  font-weight: 500;
 
+  word-break: keep-all;
 
+  display: -webkit-box;
 
+  overflow: hidden;
 
+  line-height: 1.25;
 
+  width: 100%;
 
+  text-overflow: ellipsis;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-line-clamp: 2;
 
+}
 
+.test-list li .txt-area small {
 
+  display: block;
 
+  font-size: 1.2rem;
 
+  margin-top: 0.4rem;
 
+}
 
+.test-list li .txt-area .profile-area {
 
+  margin-top: 1.6rem;
 
+  gap: 0.8rem;
 
+}
 
+.test-list li .txt-area .profile-area .img-area {
 
+  width: 2.4rem;
 
+  height: 2.4rem;
 
+}
 
+.test-list li .txt-area .profile-area .txt-area cite {
 
+  font-size: 1.2rem;
 
+  color: var(--color-font-default-tertiary);
 
+}
 
+.test-list li .score {
 
+  color: var(--color-font-default-tertiary);
 
+  background-color: var(--color-background-default-secondary);
 
+  width: 10rem;
 
+  height: 10rem;
 
+  line-height: 10rem;
 
+  text-align: center;
 
+  border-radius: 1.6rem;
 
+}
 
+.test-list li .score em {
 
+  font-size: 2.4rem;
 
+  font-weight: 700;
 
+  color: var(--color-font-default-tertiary);
 
+}
 
+.test-list.col3 li {
 
+  -ms-flex-preferred-size: calc((100% - 3.2rem) / 3);
 
+      flex-basis: calc((100% - 3.2rem) / 3);
 
+}
 
+.test-list .etc-fnc-area {
 
+  position: absolute;
 
+  right: 1.6rem;
 
+  top: 1.6rem;
 
+}
 
+.test-list .etc-fnc-area li {
 
+  padding: initial;
 
+  border-radius: initial;
 
+  border: initial;
 
+}
 
+
 
+.q-option-list {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  gap: 0.8rem;
 
+}
 
+
 
+/* .summary */
 
+dl.summary {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  background-color: var(--color-background-default-secondary);
 
+  padding: 1.6rem 2.4rem;
 
+  border-radius: 2.4rem;
 
+  margin-bottom: 1.6rem;
 
+  word-break: keep-all;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+}
 
+dl.summary dt {
 
+  font-weight: 700;
 
+  margin-right: 1.6rem;
 
+}
 
+dl.summary dd {
 
+  margin-right: 4rem;
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  gap: 0.4rem;
 
+}
 
+dl.summary dd:last-child {
 
+  margin-right: 0;
 
+}
 
+
 
+.test-add-list {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  gap: 0.8rem;
 
+}
 
+.test-add-list > li {
 
+  position: relative;
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  -webkit-box-align: start;
 
+      -ms-flex-align: start;
 
+          align-items: flex-start;
 
+  -webkit-box-pack: start;
 
+      -ms-flex-pack: start;
 
+          justify-content: flex-start;
 
+  gap: 1.6rem;
 
+  margin-bottom: 0;
 
+  background-color: #fff;
 
+  border: 0.1rem solid var(--color-stroke-default-tertiary);
 
+  padding: 1.6rem;
 
+  border-radius: 1.2rem;
 
+}
 
+.test-add-list > li .item {
 
+  position: relative;
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  gap: 0.4rem 0.8rem;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  margin-bottom: 0;
 
+  background-color: #fff;
 
+  width: 100%;
 
+}
 
+.test-add-list > li .item ~ .item {
 
+  border-top: 0.1rem solid var(--color-stroke-default-tertiary);
 
+  padding-top: 1.6rem;
 
+}
 
+.test-add-list > li .txt-area {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  gap: 0.8rem;
 
+  -webkit-box-flex: 1;
 
+      -ms-flex: 1;
 
+          flex: 1;
 
+}
 
+.test-add-list > li .editor-cont br {
 
+  display: none !important;
 
+}
 
+.test-add-list > li .box-fnc {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  gap: 0.8rem;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+}
 
+.test-add-list > li:has(.add-fnc) {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  padding-right: 8rem;
 
+}
 
+.test-add-list > li:has(.add-fnc) .add-fnc {
 
+  position: absolute;
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  gap: 0.4rem;
 
+  width: 8rem;
 
+  right: 0;
 
+  top: 50%;
 
+  -webkit-transform: translateY(-50%);
 
+          transform: translateY(-50%);
 
+}
 
+.test-add-list > li:has(> .checkradio) {
 
+  padding-left: 40px;
 
+}
 
+.test-add-list > li:has(> .checkradio) > .checkradio {
 
+  position: absolute;
 
+  top: 50%;
 
+  left: 1.2rem;
 
+  -webkit-transform: translateY(-50%);
 
+          transform: translateY(-50%);
 
+}
 
+.test-add-list > li:has(.ico-move) {
 
+  padding-left: 32px;
 
+}
 
+.test-add-list .ico-move {
 
+  position: absolute;
 
+  left: 0;
 
+  top: 50%;
 
+  -webkit-transform: translateY(-50%);
 
+          transform: translateY(-50%);
 
+}
 
+.test-add-list .ico-sm-close {
 
+  position: absolute;
 
+  right: -0.8rem;
 
+  top: -0.8rem;
 
+}
 
+.test-add-list .txt-none {
 
+  border: none;
 
+  background-color: transparent;
 
+  height: 100%;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  -webkit-box-pack: center;
 
+      -ms-flex-pack: center;
 
+          justify-content: center;
 
+}
 
+
 
+.basicquiz-stu-list {
 
+  display: grid;
 
+  gap: 0.8rem;
 
+}
 
+.basicquiz-stu-list > li {
 
+  margin-bottom: 0;
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-align: start;
 
+      -ms-flex-align: start;
 
+          align-items: flex-start;
 
+}
 
+.basicquiz-stu-list .cont-area {
 
+  -webkit-box-flex: 1;
 
+      -ms-flex: 1;
 
+          flex: 1;
 
+}
 
+.basicquiz-stu-list .info-area {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-pack: justify;
 
+      -ms-flex-pack: justify;
 
+          justify-content: space-between;
 
+}
 
+.basicquiz-stu-list .stu-info-list {
 
+  display: grid;
 
+  gap: 0.8rem;
 
+}
 
+.basicquiz-stu-list .stu-info-list:has(li) {
 
+  margin-top: 1.6rem;
 
+}
 
+.basicquiz-stu-list .stu-info-list:first-child {
 
+  margin-top: 0;
 
+}
 
+.basicquiz-stu-list .stu-info-list li {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  gap: 1.6rem;
 
+  padding: 1.6rem 2.4rem;
 
+  min-height: 6.4rem;
 
+  background: var(--color-background-default-secondary);
 
+  border-radius: 2.4rem;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+}
 
+.basicquiz-stu-list .stu-info-list li.active {
 
+  background-color: var(--color-background-info-primary);
 
+  border: 4px solid var(--color-primary30);
 
+  color: var(--color-primary50);
 
+}
 
+.basicquiz-stu-list .stu-info-list li.active cite {
 
+  color: var(--color-primary50);
 
+}
 
+.basicquiz-stu-list .stu-info-list .txt-area {
 
+  -webkit-box-flex: 1;
 
+      -ms-flex: 1;
 
+          flex: 1;
 
+}
 
+.basicquiz-stu-list .stu-info-list .txt-area .label {
 
+  min-width: 5.6rem;
 
+}
 
+.basicquiz-stu-list .stu-info-list .txt-area strong,
 
+.basicquiz-stu-list .stu-info-list .txt-area small {
 
+  display: block;
 
+}
 
+.basicquiz-stu-list .stu-info-list cite {
 
+  -webkit-box-flex: 0;
 
+      -ms-flex: none;
 
+          flex: none;
 
+  width: 80px;
 
+  font-size: var(--font-tit-xsm);
 
+  font-weight: var(--size-font-weight-xlg);
 
+  line-height: var(--size-font-lineheight-sm);
 
+}
 
+.basicquiz-stu-list .stu-info-list .info {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -ms-flex-wrap: wrap;
 
+      flex-wrap: wrap;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  gap: 1.6rem;
 
+}
 
+.basicquiz-stu-list .stu-info-list .stu-fnc {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  gap: 0.8rem;
 
+}
 
+
 
+.num-input-list {
 
+  display: grid;
 
+  gap: 0.8rem;
 
+  grid-template-columns: repeat(5, 1fr);
 
+}
 
+.num-input-list li {
 
+  position: relative;
 
+}
 
+.num-input-list li .num {
 
+  position: absolute;
 
+  width: 4.8rem;
 
+  height: 4.8rem;
 
+  line-height: 4.8rem;
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  -webkit-box-pack: center;
 
+      -ms-flex-pack: center;
 
+          justify-content: center;
 
+  left: 0;
 
+  top: 0;
 
+  bottom: 0;
 
+  background-color: var(--color-background-default-tertiary);
 
+  font-size: var(--font-tit-xsm);
 
+  font-weight: var(--size-font-weight-xlg);
 
+  line-height: var(--size-font-lineheight-sm);
 
+  text-align: center;
 
+  border-radius: 1.2rem 0 0 1.2rem;
 
+  z-index: -1;
 
+}
 
+.num-input-list li input {
 
+  width: 100%;
 
+  min-width: 0;
 
+  padding-left: 4.8em;
 
+  text-align: center;
 
+  background-color: transparent;
 
+}
 
+
 
+.num-list {
 
+  border: 0.1rem solid var(--color-stroke-default-tertiary);
 
+  border-radius: 1.2rem;
 
+  overflow: hidden;
 
+  display: grid;
 
+  grid-auto-flow: column;
 
+  grid-template-rows: repeat(10, minmax(48px, auto));
 
+  margin: 0;
 
+  padding: 0;
 
+}
 
+.num-list li {
 
+  position: relative;
 
+  display: grid;
 
+  grid-template-columns: repeat(2, 1fr);
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  border-bottom: 0.1rem solid var(--color-stroke-default-tertiary);
 
+  border-right: 0.1rem solid var(--color-stroke-default-tertiary);
 
+}
 
+.num-list li:nth-child(10n) {
 
+  border-bottom: none;
 
+}
 
+.num-list li > * {
 
+  -webkit-box-flex: 1;
 
+      -ms-flex: 1;
 
+          flex: 1;
 
+}
 
+.num-list li .num {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  -webkit-box-pack: center;
 
+      -ms-flex-pack: center;
 
+          justify-content: center;
 
+  background-color: var(--color-background-default-tertiary);
 
+  font-size: var(--font-tit-xsm);
 
+  font-weight: var(--size-font-weight-xlg);
 
+  line-height: var(--size-font-lineheight-sm);
 
+  text-align: center;
 
+  height: 100%;
 
+}
 
+.num-list li .txt-area {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  -webkit-box-pack: center;
 
+      -ms-flex-pack: center;
 
+          justify-content: center;
 
+  padding: 8px;
 
+}
 
+
 
+.row {
 
+  margin-bottom: var(--spacing-section-sm);
 
+  display: grid;
 
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
 
+  gap: 1.2rem;
 
+}
 
+.row > .section {
 
+  margin-bottom: 0;
 
+}
 
+.row .border-box, .row .border-box-list > li, .row .basicquiz-stu-list > li {
 
+  height: 100%;
 
+}
 
+.row .col2 {
 
+  grid-column: span 2;
 
+}
 
+
 
+.box-img-list {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  -webkit-box-pack: center;
 
+      -ms-flex-pack: center;
 
+          justify-content: center;
 
+  -ms-flex-wrap: wrap;
 
+      flex-wrap: wrap;
 
+  gap: 1.6rem 0.8rem;
 
+}
 
+.box-img-list li {
 
+  -ms-flex-preferred-size: 240px;
 
+      flex-basis: 240px;
 
+}
 
+.box-img-list li a {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  -webkit-box-pack: center;
 
+      -ms-flex-pack: center;
 
+          justify-content: center;
 
+  gap: 1.6rem;
 
+  border-radius: 2.4rem;
 
+  border: 0.1rem solid var(--color-stroke-default-tertiary);
 
+  min-height: 28rem;
 
+  padding: 2.4rem;
 
+  -webkit-box-sizing: border-box;
 
+          box-sizing: border-box;
 
+}
 
+.box-img-list li a:hover {
 
+  border: 2px solid var(--color-primary50);
 
+  -webkit-box-shadow: 0rem 0.4rem 1.6rem rgba(17, 17, 17, 0.1);
 
+          box-shadow: 0rem 0.4rem 1.6rem rgba(17, 17, 17, 0.1);
 
+  -webkit-transition: all 0.1s;
 
+  transition: all 0.1s;
 
+}
 
+.box-img-list li a:hover cite {
 
+  color: var(--color-primary50);
 
+}
 
+.box-img-list li a cite {
 
+  font-size: 1.8rem;
 
+  font-weight: 500;
 
+}
 
+
 
+.group-list {
 
+  text-align: left;
 
+}
 
+.group-list li {
 
+  padding-bottom: 1.6rem;
 
+  margin-bottom: 1.6rem;
 
+  border-bottom: 0.1rem solid var(--color-stroke-default-tertiary);
 
+}
 
+.group-list li:last-child {
 
+  padding-bottom: 0;
 
+  margin-bottom: 0;
 
+  border-bottom: none;
 
+}
 
+.group-list li .label-area {
 
+  margin-bottom: 0.8rem;
 
+}
 
+.group-list li .info-quiz {
 
+  font-weight: 500;
 
+  font-size: var(--size-font-md);
 
+}
 
+.group-list li .editor-cont {
 
+  margin-top: 0.4rem;
 
+  font-size: var(--size-font-md);
 
+}
 
+.group-list li .editor-cont > i {
 
+  margin-right: 0.4rem;
 
+}
 
+.group-list li .editor-cont br {
 
+  display: none;
 
+}
 
+
 
+.group-list-test li {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  min-height: 40px;
 
+  -webkit-box-sizing: content-box;
 
+          box-sizing: content-box;
 
+}
 
+.group-list-test li > * {
 
+  -webkit-box-flex: 1;
 
+      -ms-flex: 1;
 
+          flex: 1;
 
+}
 
+.group-list-test li ~ li {
 
+  padding-top: 1.6rem;
 
+  margin-top: 1.6rem;
 
+  border-top: 0.1rem solid var(--color-stroke-default-tertiary);
 
+}
 
+.group-list-test li .txt-area {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  gap: 0.4rem;
 
+  -ms-flex-preferred-size: 42%;
 
+      flex-basis: 42%;
 
+  text-align: left;
 
+  font-size: var(--size-font-md);
 
+}
 
+.group-list-test li .txt-area .editor-cont {
 
+  display: -webkit-box;
 
+  overflow: hidden;
 
+  line-height: 1.4;
 
+  width: 100%;
 
+  text-overflow: ellipsis;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-line-clamp: 2;
 
+}
 
+
 
+.search-keyword-area {
 
+  background-color: var(--color-background-default-secondary);
 
+  padding: 3.2rem 4rem;
 
+  border-radius: 2.4rem;
 
+  margin-bottom: 4rem;
 
+}
 
+.search-keyword-area cite {
 
+  font-size: var(--size-font-md);
 
+  font-weight: 700;
 
+  color: var(--color-font-default-tertiary);
 
+  display: block;
 
+  margin-bottom: 0.8rem;
 
+}
 
+.search-keyword-area ul {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -ms-flex-wrap: wrap;
 
+      flex-wrap: wrap;
 
+  gap: 0.4rem;
 
+}
 
+.search-keyword-area li a {
 
+  display: block;
 
+  padding: 0.8rem 1.2rem;
 
+  background-color: var(--color-background-default-primary);
 
+  border-radius: 2rem;
 
+  border: 0.1rem solid var(--color-stroke-default-tertiary);
 
+}
 
+.search-keyword-area li a:hover {
 
+  background-color: var(--color-background-default-tertiary);
 
+}
 
+
 
+.basicquiz-score-area.is-disabled {
 
+  background-color: var(--color-background-default-secondary);
 
+  padding: 2.4rem;
 
+  border-radius: 2.4rem;
 
+  margin-bottom: 1.6rem;
 
+}
 
+.basicquiz-score-area.is-disabled .tit-area {
 
+  margin-bottom: 0;
 
+}
 
+.basicquiz-score-area.is-disabled .write-type {
 
+  display: none;
 
+}
 
+.basicquiz-score-area.is-disabled + .basicquiz-score-area:not(.is-disabled) {
 
+  margin-top: 8rem;
 
+}
 
+.basicquiz-score-area .score-list {
 
+  display: grid;
 
+  grid-template-columns: repeat(5, 1fr);
 
+  gap: 0.8rem;
 
+  overflow: hidden;
 
+}
 
+.basicquiz-score-area .score-list li {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  gap: 0.8rem;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  position: relative;
 
+  border: 0.1rem solid var(--color-stroke-default-tertiary);
 
+  border-radius: 1.2rem;
 
+  padding: 1.6rem;
 
+  min-height: 16.4rem;
 
+}
 
+.basicquiz-score-area .score-list li.add-area {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  -webkit-box-pack: center;
 
+      -ms-flex-pack: center;
 
+          justify-content: center;
 
+  border: 0.2rem dashed var(--color-stroke-default-tertiary);
 
+}
 
+.basicquiz-score-area .score-list cite {
 
+  font-size: var(--font-tit-xsm);
 
+  font-weight: var(--size-font-weight-xlg);
 
+  line-height: var(--size-font-lineheight-sm);
 
+  display: block;
 
+  margin-bottom: 0.8rem;
 
+}
 
+.basicquiz-score-area .score-list fieldset {
 
+  display: grid;
 
+  gap: 0.8rem;
 
+}
 
+.basicquiz-score-area .score-list fieldset label {
 
+  position: relative;
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  overflow: hidden;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  gap: 0.4rem;
 
+}
 
+.basicquiz-score-area .score-list fieldset label span {
 
+  position: absolute;
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  top: 0.2rem;
 
+  left: 0.2rem;
 
+  bottom: 0.2rem;
 
+  -webkit-box-flex: 0;
 
+      -ms-flex: none;
 
+          flex: none;
 
+  width: 6.2rem;
 
+  font-size: var(--fs-sm);
 
+  font-weight: 700;
 
+  color: var(--color-font-default-tertiary);
 
+  background-color: var(--color-background-default-secondary);
 
+  border-radius: 1.2rem 0 0 1.2rem;
 
+  padding-left: 0.8rem;
 
+}
 
+.basicquiz-score-area .score-list fieldset input {
 
+  min-width: 0;
 
+}
 
+.basicquiz-score-area .score-list fieldset input[type=number] {
 
+  width: 100%;
 
+  min-width: 0;
 
+  padding-left: 8rem;
 
+  text-align: center;
 
+}
 
+.basicquiz-score-area .score-list + .score-list {
 
+  margin-top: 0.8rem;
 
+}
 
+
 
+.storage-add-area {
 
+  display: grid;
 
+  gap: 0.8rem;
 
+}
 
+.storage-add-area .btn-storage {
 
+  display: -webkit-inline-box;
 
+  display: -ms-inline-flexbox;
 
+  display: inline-flex;
 
+}
 
+.storage-add-area .storage-add {
 
+  display: none;
 
+  gap: 0.8rem;
 
+  -webkit-box-pack: center;
 
+      -ms-flex-pack: center;
 
+          justify-content: center;
 
+  -ms-flex-wrap: wrap;
 
+      flex-wrap: wrap;
 
+}
 
+.storage-add-area .storage-add input {
 
+  width: 100%;
 
+}
 
+.storage-add-area.is-active .btn-storage {
 
+  display: none;
 
+}
 
+.storage-add-area.is-active .storage-add {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+}
 
+
 
+.reference-list {
 
+  display: grid;
 
+  gap: 0.8rem;
 
+  grid-template-columns: repeat(2, 1fr);
 
+}
 
+.reference-list li {
 
+  position: relative;
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  gap: 1.2rem;
 
+  background-color: var(--color-background-default-primary);
 
+  border: 1px solid var(--color-stroke-default-quaternary);
 
+  padding: 1.2rem;
 
+  border-radius: 1.2rem;
 
+}
 
+.reference-list li:hover {
 
+  font-weight: var(--size-font-weight-xlg);
 
+  color: var(--color-font-default-secondary);
 
+}
 
+.reference-list li .img-weboffice-area img {
 
+  display: block;
 
+}
 
+.reference-list .img-area {
 
+  position: relative;
 
+  display: block;
 
+  width: 100%;
 
+  aspect-ratio: 1/0.5656;
 
+  background: #F7F7F8;
 
+  overflow: hidden;
 
+  border-radius: 2.4rem;
 
+  border: 1px solid #B1B8BE;
 
+  -webkit-box-sizing: border-box;
 
+          box-sizing: border-box;
 
+  width: 16rem;
 
+  aspect-ratio: 16/9;
 
+  -webkit-box-flex: 0;
 
+      -ms-flex: none;
 
+          flex: none;
 
+}
 
+.reference-list .img-area img {
 
+  position: absolute;
 
+  top: 0;
 
+  left: 0;
 
+  right: 0;
 
+  bottom: 0;
 
+  display: block;
 
+  -o-object-fit: cover;
 
+     object-fit: cover;
 
+  width: 100%;
 
+  height: 100%;
 
+  -webkit-transition: all 0.5s;
 
+  transition: all 0.5s;
 
+}
 
+.reference-list .img-weboffice-area {
 
+  width: 7.2rem;
 
+  padding: 0.8rem;
 
+  background-color: var(--color-background-default-primary);
 
+  border: 0.1rem solid var(--color-stroke-default-tertiary);
 
+}
 
+.reference-list .txt-area {
 
+  -webkit-box-flex: 1;
 
+      -ms-flex: 1;
 
+          flex: 1;
 
+}
 
+.reference-list .txt-area .txt {
 
+  margin-top: 0.8rem;
 
+  display: -webkit-box;
 
+  overflow: hidden;
 
+  line-height: 1.4;
 
+  width: 100%;
 
+  text-overflow: ellipsis;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-line-clamp: 2;
 
+}
 
+
 
+.border-list {
 
+  border: 0.1rem solid var(--color-stroke-default-tertiary);
 
+  border-radius: 2.4rem;
 
+  background-color: var(--color-background-default-primary);
 
+}
 
+.border-list > li {
 
+  border-bottom: 0.1rem solid var(--color-stroke-default-tertiary);
 
+  padding: 1.6rem 2.4rem;
 
+  -ms-flex-wrap: wrap;
 
+      flex-wrap: wrap;
 
+}
 
+.border-list > li:last-of-type {
 
+  border-bottom: none;
 
+}
 
+.border-list > li .num {
 
+  -webkit-box-flex: 0;
 
+      -ms-flex: none;
 
+          flex: none;
 
+}
 
+.border-list > li .l-area {
 
+  -webkit-box-flex: 1;
 
+      -ms-flex: 1;
 
+          flex: 1;
 
+}
 
+.border-list > li .item-tit {
 
+  font-weight: var(--size-font-weight-md);
 
+}
 
+
 
+.mystorage .row {
 
+  margin-bottom: var(--spacing-section-md);
 
+}
 
+
 
+.mystorage-header {
 
+  display: grid;
 
+  grid-template-columns: 16rem 1fr;
 
+  border: 0.1rem solid var(--color-stroke-default-tertiary);
 
+  border-radius: 2.4rem;
 
+  overflow-y: hidden;
 
+  overflow-x: auto;
 
+  margin-bottom: 8rem;
 
+}
 
+.mystorage-header .my-info {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  gap: 1.2rem;
 
+  padding: 2.4rem 1.2rem;
 
+  background-color: var(--color-background-brand-primary-inverse);
 
+}
 
+.mystorage-header .my-info .profile {
 
+  position: relative;
 
+}
 
+.mystorage-header .my-info .profile .profile-tit {
 
+  color: var(--color-font-default-primary-inverse);
 
+}
 
+.mystorage-header .my-info .btn-group .btn {
 
+  background: var(--color-background-default-primary);
 
+  border-radius: 2em;
 
+}
 
+.mystorage-header .contents-info {
 
+  min-width: 88rem;
 
+  display: grid;
 
+  grid-template-columns: 75% repeat(auto-fit, minmax(0, 1fr));
 
+}
 
+.mystorage-header .contents-info > li {
 
+  height: 0;
 
+}
 
+.mystorage-header .contents-info > li > strong {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-pack: center;
 
+      -ms-flex-pack: center;
 
+          justify-content: center;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  height: 3.6rem;
 
+  padding: 0 1.6rem;
 
+  border-bottom: 0.1rem solid var(--color-stroke-default-tertiary);
 
+  background: var(--color-background-default-secondary);
 
+  font-size: var(--font-tit-xsm);
 
+  font-weight: var(--size-font-weight-xlg);
 
+  line-height: var(--size-font-lineheight-sm);
 
+  color: var(--color-font-default-tertiary);
 
+}
 
+.mystorage-header .contents-info > li > ul {
 
+  display: grid;
 
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
 
+  height: 100%;
 
+}
 
+.mystorage-header .contents-info .item {
 
+  border-left: 0.1rem solid var(--color-stroke-default-tertiary);
 
+  padding: 1.6rem 0.8rem;
 
+  display: grid;
 
+  gap: 1.6rem;
 
+  -webkit-box-align: end;
 
+      -ms-flex-align: end;
 
+          align-items: end;
 
+  height: 100%;
 
+}
 
+.mystorage-header .contents-info .item figure {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  -webkit-box-pack: center;
 
+      -ms-flex-pack: center;
 
+          justify-content: center;
 
+  gap: 0.8rem;
 
+  text-align: center;
 
+}
 
+.mystorage-header .contents-info .item figure figcaption {
 
+  font-size: var(--font-tit-xsm);
 
+  font-weight: var(--size-font-weight-xlg);
 
+  line-height: var(--size-font-lineheight-sm);
 
+}
 
+.mystorage-header .contents-info .item figure img {
 
+  display: block;
 
+  width: 4.8rem;
 
+}
 
+.mystorage-header .contents-info .item .txt-list {
 
+  display: grid;
 
+  border-radius: 1.2rem;
 
+  background: var(--color-background-brand-primary);
 
+  padding: 0.4rem 0.8rem;
 
+}
 
+.mystorage-header .contents-info .item .txt-list li {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-pack: justify;
 
+      -ms-flex-pack: justify;
 
+          justify-content: space-between;
 
+  border-top: 0.1rem solid var(--color-stroke-default-tertiary);
 
+  padding: 0.8rem 0.8rem;
 
+}
 
+.mystorage-header .contents-info .item .txt-list li:first-of-type {
 
+  border-top: none;
 
+}
 
+.mystorage-header .contents-info .item .txt-list li em {
 
+  font-size: var(--font-label-md);
 
+  font-weight: var(--size-font-weight-md);
 
+  line-height: var(--size-font-lineheight-xsm);
 
+  font-weight: var(--size-font-weight-lg);
 
+}
 
+.mystorage-header .contents-info .item .txt-list strong {
 
+  font-weight: var(--size-font-weight-md);
 
+}
 
+
 
+.mystorage-best ul {
 
+  display: grid;
 
+  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
 
+  height: 100%;
 
+  gap: 1.2rem;
 
+}
 
+.mystorage-best ul > li {
 
+  position: relative;
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  gap: 1.2rem;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  -webkit-box-pack: center;
 
+      -ms-flex-pack: center;
 
+          justify-content: center;
 
+  border-radius: 2.4rem;
 
+  border: 0.1rem solid var(--color-stroke-default-tertiary);
 
+  background: var(--color-background-default-secondary);
 
+  padding: 2.4rem;
 
+}
 
+.mystorage-best ul .label-img {
 
+  width: 4rem;
 
+}
 
+.mystorage-best ul .label-img img {
 
+  width: 100%;
 
+}
 
+
 
+.user-info-area {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  margin-top: calc(var(--body-top-spacing) * -1);
 
+  margin-bottom: var(--body-top-spacing);
 
+  padding: 2.4rem 0;
 
+  min-height: 16rem;
 
+  background: url("../images/custom/class/visual.png") center/cover var(--color-background-brand-primary-inverse);
 
+  color: var(--color-font-default-primary-inverse);
 
+  overflow: hidden;
 
+}
 
+.user-info-area .wrap {
 
+  width: 100%;
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  gap: 1.6rem;
 
+}
 
+.user-info-area .info-area {
 
+  -webkit-box-flex: 1;
 
+      -ms-flex: 1;
 
+          flex: 1;
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  gap: 1.6rem;
 
+}
 
+.user-info-area .info-area .profile-area img {
 
+  width: 8rem;
 
+  height: 8rem;
 
+}
 
+.user-info-area .info-area .txt-area h3 {
 
+  font-size: var(--font-tit-lg);
 
+  font-weight: var(--size-font-weight-xlg);
 
+  line-height: var(--size-font-lineheight-sm);
 
+}
 
+.user-info-area .info-area .txt-area .info-inline-list li {
 
+  color: var(--color-font-default-secondary-inverse);
 
+}
 
+
 
+.emotion-tbl-area {
 
+  overflow-x: auto;
 
+}
 
+.emotion-tbl-area th,
 
+.emotion-tbl-area td {
 
+  word-break: break-all;
 
+}
 
+.emotion-tbl-area .emotion-tbl th {
 
+  color: var(--color-font-default-tertiary);
 
+  background-color: var(--color-background-default-secondary);
 
+}
 
+.emotion-tbl-area .emotion-tbl thead th {
 
+  border-bottom: none;
 
+  padding: 1.6rem 1.2rem;
 
+}
 
+.emotion-tbl-area .emotion-tbl thead th:first-of-type {
 
+  border-radius: 1.2rem 0 0 0;
 
+}
 
+.emotion-tbl-area .emotion-tbl thead th:last-of-type {
 
+  border-radius: 0 1.2rem 1.2rem 0;
 
+}
 
+.emotion-tbl-area .emotion-tbl tbody th,
 
+.emotion-tbl-area .emotion-tbl tbody td {
 
+  border-bottom: 0.1rem solid var(--color-stroke-default-tertiary);
 
+  border-left: 0.1rem solid var(--color-stroke-default-tertiary);
 
+}
 
+.emotion-tbl-area .emotion-tbl tbody th:first-of-type,
 
+.emotion-tbl-area .emotion-tbl tbody td:first-of-type {
 
+  border-left: none;
 
+}
 
+.emotion-tbl-area .emotion-tbl td {
 
+  height: 10rem;
 
+  padding: 1.2rem 0.4rem;
 
+}
 
+.emotion-tbl-area .emotion-tbl img {
 
+  max-width: 4.8rem;
 
+  width: 100%;
 
+  margin: 0 auto;
 
+}
 
+
 
+.emotion-check-area {
 
+  background: var(--color-background-default-secondary);
 
+  border-radius: 3.2rem;
 
+  border: 0.1rem solid var(--color-stroke-default-tertiary);
 
+  overflow: hidden;
 
+}
 
+.emotion-check-area header {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  -webkit-box-pack: center;
 
+      -ms-flex-pack: center;
 
+          justify-content: center;
 
+  gap: 0.4rem;
 
+  padding: 1.6rem;
 
+  border-bottom: 0.1rem solid var(--color-stroke-default-tertiary);
 
+  background: var(--color-background-default-primary);
 
+}
 
+.emotion-check-area header strong {
 
+  font-size: var(--font-tit-label);
 
+  font-weight: var(--size-font-weight-xlg);
 
+  color: var(--color-font-default-tertiary);
 
+}
 
+.emotion-check-area header h3 {
 
+  font-size: var(--font-tit-lg);
 
+  font-weight: var(--size-font-weight-xlg);
 
+  line-height: var(--size-font-lineheight-sm);
 
+}
 
+.emotion-check-area header p {
 
+  color: var(--color-font-default-secondary);
 
+}
 
+.emotion-check-area .emotion-check {
 
+  padding: 4rem 2.4rem;
 
+}
 
+.emotion-check-area .emotion-check ul {
 
+  display: grid;
 
+  grid-template-columns: repeat(5, 1fr);
 
+  gap: 0.8rem;
 
+}
 
+.emotion-check-area .emotion-check ul label {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  -webkit-box-pack: center;
 
+      -ms-flex-pack: center;
 
+          justify-content: center;
 
+  border-radius: 2.4rem;
 
+  border: 0.1rem solid var(--color-stroke-default-tertiary);
 
+  background: var(--color-background-default-primary);
 
+  padding: 2.4rem 0.8rem;
 
+  gap: 0.4rem;
 
+  cursor: pointer;
 
+}
 
+.emotion-check-area .emotion-check ul label:has(input:checked) {
 
+  border: none;
 
+  outline: 0.2rem solid var(--color-stroke-brand-primary);
 
+}
 
+.emotion-check-area .emotion-check ul label img {
 
+  width: 8rem;
 
+  aspect-ratio: 1;
 
+}
 
+.emotion-check-area .emotion-check ul label strong {
 
+  font-size: var(--font-body-lg);
 
+  font-weight: var(--size-font-weight-md);
 
+  color: var(--color-font-default-secondary);
 
+}
 
+.emotion-check-area .emotion-check ul .emotion-none {
 
+  grid-column: 1/-1;
 
+}
 
+.emotion-check-area .emotion-check ul .emotion-none label {
 
+  -webkit-box-orient: horizontal;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: row;
 
+          flex-direction: row;
 
+}
 
+.emotion-check-area .emotion-check ul .emotion-none label img {
 
+  width: 2.4rem;
 
+}
 
+
 
+.calendar-tbl .emotion {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  gap: 0.4rem;
 
+}
 
+.calendar-tbl .emotion img {
 
+  width: 4.8rem;
 
+  aspect-ratio: 1;
 
+}
 
+.calendar-tbl .emotion figcaption {
 
+  font-size: var(--font-body-sm);
 
+  font-weight: var(--size-font-weight-md);
 
+}
 
+
 
+.survey-q-list > li {
 
+  padding: 2.4rem 0;
 
+  border-bottom: 0.1rem solid var(--color-stroke-default-tertiary);
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  gap: 2.4rem;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+}
 
+.survey-q-list > li:first-of-type {
 
+  padding-top: 0;
 
+}
 
+.survey-q-list .q-area {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  gap: 1.6rem;
 
+  width: 100%;
 
+}
 
+.survey-q-list .a-area {
 
+  width: 100%;
 
+}
 
+.survey-q-list span {
 
+  color: var(--color-font-default-secondary);
 
+  font-size: var(--font-body-md);
 
+  font-weight: var(--size-font-weight-md);
 
+}
 
+.survey-q-list .q-tit {
 
+  font-size: var(--font-tit-md);
 
+  font-weight: var(--size-font-weight-xlg);
 
+  line-height: var(--size-font-lineheight-sm);
 
+}
 
+.survey-q-list .a-legend {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-pack: justify;
 
+      -ms-flex-pack: justify;
 
+          justify-content: space-between;
 
+  margin-top: 0.8rem;
 
+}
 
+.survey-q-list .a-cont {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: horizontal;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: row;
 
+          flex-direction: row;
 
+  -webkit-box-pack: justify;
 
+      -ms-flex-pack: justify;
 
+          justify-content: space-between;
 
+  gap: 0.8rem;
 
+  word-break: keep-all;
 
+  text-align: center;
 
+}
 
+.survey-q-list .a-cont:has(.a-des) {
 
+  padding-top: 4.8rem;
 
+}
 
+.survey-q-list .a-cont label {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  gap: 0.8rem;
 
+  cursor: pointer;
 
+}
 
+.survey-q-list .a-cont label i {
 
+  position: relative;
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  -webkit-box-pack: center;
 
+      -ms-flex-pack: center;
 
+          justify-content: center;
 
+  width: 4.8rem;
 
+  height: 4.8rem;
 
+  border-radius: 100%;
 
+  background-color: var(--color-icon-brand-primary-inverse);
 
+}
 
+.survey-q-list .a-cont label i::before {
 
+  content: " ";
 
+  display: block;
 
+  width: 0;
 
+  aspect-ratio: 1;
 
+  border-radius: 100%;
 
+  background-color: var(--color-icon-brand-primary);
 
+  -webkit-transition: all 0.2s;
 
+  transition: all 0.2s;
 
+}
 
+.survey-q-list .a-cont label input:checked ~ i {
 
+  border: 0.1rem solid var(--color-icon-brand-primary);
 
+}
 
+.survey-q-list .a-cont label input:checked ~ i::before {
 
+  width: 60%;
 
+}
 
+.survey-q-list .a-cont .level1 i {
 
+  background-color: var(--color-icon-success-primary-inverse);
 
+}
 
+.survey-q-list .a-cont .level1 input:checked ~ i {
 
+  border-color: var(--color-icon-success-primary);
 
+}
 
+.survey-q-list .a-cont .level1 input:checked ~ i::before {
 
+  background-color: var(--color-icon-success-primary);
 
+}
 
+.survey-q-list .a-cont .level2 i {
 
+  background-color: var(--color-icon-info-primary-inverse);
 
+}
 
+.survey-q-list .a-cont .level2 input:checked ~ i {
 
+  border-color: var(--color-icon-info-primary);
 
+}
 
+.survey-q-list .a-cont .level2 input:checked ~ i::before {
 
+  background-color: var(--color-icon-info-primary);
 
+}
 
+.survey-q-list .a-cont .level3 i {
 
+  background-color: var(--color-icon-danger-primary-inverse);
 
+}
 
+.survey-q-list .a-cont .level3 input:checked ~ i {
 
+  border-color: var(--color-icon-danger-primary);
 
+}
 
+.survey-q-list .a-cont .level3 input:checked ~ i::before {
 
+  background-color: var(--color-icon-danger-primary);
 
+}
 
+.survey-q-list .a-cont .a-des {
 
+  position: absolute;
 
+  -webkit-transform: translateY(calc(-100% - 0.8rem));
 
+          transform: translateY(calc(-100% - 0.8rem));
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  gap: 0.4rem;
 
+  font-size: var(--font-body-xsm);
 
+  font-weight: var(--size-font-weight-md);
 
+  max-width: 24rem;
 
+}
 
+.survey-q-list .a-cont .a-des:after {
 
+  content: " ";
 
+  display: block;
 
+  width: 0;
 
+  height: 0;
 
+  border-style: solid;
 
+  border-right: 0.6rem solid transparent;
 
+  border-left: 0.6rem solid transparent;
 
+  border-top: 0.6rem solid var(--color-stroke-default-secondary);
 
+  border-bottom: 0;
 
+  margin: 0 auto;
 
+}
 
+
 
+.invite-area {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  gap: 3.2rem;
 
+  min-height: 100%;
 
+  -webkit-box-pack: center;
 
+      -ms-flex-pack: center;
 
+          justify-content: center;
 
+  padding-top: 3.2rem;
 
+  padding-bottom: 3.2rem;
 
+}
 
+.invite-area > * {
 
+  margin: 0;
 
+}
 
+.invite-area .img-area img {
 
+  display: block;
 
+  max-width: 100%;
 
+  margin: 0 auto;
 
+}
 
+.invite-area .txt-area {
 
+  text-align: center;
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  gap: 0.4rem;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  -webkit-box-pack: center;
 
+      -ms-flex-pack: center;
 
+          justify-content: center;
 
+}
 
+.invite-area .txt-area > * {
 
+  margin: 0;
 
+}
 
+
 
+.ai-gate-list {
 
+  display: grid;
 
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
 
+  gap: 1.2rem;
 
+}
 
+.ai-gate-list a {
 
+  display: block;
 
+  width: 100%;
 
+  height: 100%;
 
+  border: 0.1rem solid var(--color-stroke-default-tertiary);
 
+  padding: 3.2rem 2.4rem;
 
+  border-radius: 2.4rem;
 
+}
 
+.ai-gate-list a:hover {
 
+  border-top-width: 0.4rem;
 
+  border-top-color: var(--color-stroke-brand-primary);
 
+}
 
+.ai-gate-list .txt-area {
 
+  position: relative;
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  gap: 0.4rem;
 
+}
 
+.ai-gate-list .txt-area h3 {
 
+  font-size: var(--font-tit-lg);
 
+  font-weight: var(--size-font-weight-xlg);
 
+  line-height: var(--size-font-lineheight-sm);
 
+}
 
+.ai-gate-list .txt-area p {
 
+  color: var(--color-font-default-secondary);
 
+}
 
+.ai-gate-list .txt-area .btn {
 
+  position: absolute;
 
+  right: 0;
 
+  top: 1.4rem;
 
+}
 
+.ai-gate-list .img-area {
 
+  margin-top: 1.6rem;
 
+  border-radius: 2.4rem;
 
+  overflow: hidden;
 
+  background: var(--color-background-brand-primary);
 
+}
 
+.ai-gate-list .img-area img {
 
+  display: block;
 
+  max-width: 100%;
 
+  margin: 0 auto;
 
+}
 
+.ai-gate-list li:nth-child(2n) a:hover {
 
+  border-top-color: var(--color-stroke-brand-secondary);
 
+}
 
+.ai-gate-list li:nth-child(2n) .img-area {
 
+  background: var(--color-background-brand-secondary);
 
+}
 
+
 
+.ai-result-tag .txt-area {
 
+  display: grid;
 
+  gap: 2.4rem;
 
+  grid-template-columns: 12rem 1fr;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+}
 
+.ai-result-tag strong {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  -webkit-box-pack: center;
 
+      -ms-flex-pack: center;
 
+          justify-content: center;
 
+  width: 12rem;
 
+  aspect-ratio: 1;
 
+  font-size: var(--font-tit-lg);
 
+  font-weight: var(--size-font-weight-xlg);
 
+  line-height: var(--size-font-lineheight-sm);
 
+  border-radius: 2.4rem;
 
+  padding: 1.6rem;
 
+  text-align: center;
 
+}
 
+.ai-result-tag strong.success {
 
+  background-color: var(--color-background-success-primary);
 
+  color: var(--color-font-success-primary);
 
+}
 
+.ai-result-tag strong.warning {
 
+  background-color: var(--color-background-warning-primary);
 
+  color: var(--color-font-warning-primary);
 
+}
 
+
 
+.ai-result-info {
 
+  padding: 3.2rem 32rem 3.2rem 3.2rem;
 
+  border-radius: 2.4rem;
 
+  background: url("../images/custom/sub/img_ai_result_info_bg.png") right no-repeat;
 
+  background-color: var(--color-background-brand-primary);
 
+  background-size: contain;
 
+}
 
+.ai-result-info .txt-area {
 
+  display: grid;
 
+  gap: 1.6rem;
 
+}
 
+.ai-result-info .txt {
 
+  font-size: var(--font-body-lg);
 
+  font-weight: var(--size-font-weight-md);
 
+  color: var(--color-font-brand-primary);
 
+}
 
+.ai-result-info .border-box, .ai-result-info .border-box-list > li, .ai-result-info .basicquiz-stu-list > li {
 
+  border: none;
 
+}
 
+.ai-result-info .bullet {
 
+  background-color: var(--color-background-default-primary);
 
+}
 
+
 
+.ai-result-tutor {
 
+  position: relative;
 
+  display: grid;
 
+  grid-template-columns: 16rem 1fr;
 
+  gap: 1.2rem;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+}
 
+.ai-result-tutor::before {
 
+  content: " ";
 
+  position: absolute;
 
+  top: -1.6rem;
 
+  right: 4rem;
 
+  width: 10rem;
 
+  aspect-ratio: 100/92;
 
+  background: url("../images/custom/sub/img_ai_info_obj.svg");
 
+  background-size: contain;
 
+  z-index: 1;
 
+}
 
+.ai-result-tutor .img-area {
 
+  max-width: 100%;
 
+}
 
+.ai-result-tutor .txt-area {
 
+  position: relative;
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  padding: 2.4rem 16rem 2.4rem 2.4rem;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  -webkit-box-align: start;
 
+      -ms-flex-align: start;
 
+          align-items: flex-start;
 
+  gap: 0.8rem;
 
+  border-radius: 3.2rem;
 
+  background: var(--color-background-default-secondary);
 
+  min-height: 7.6rem;
 
+}
 
+.ai-result-tutor .txt-area::before {
 
+  content: " ";
 
+  position: absolute;
 
+  left: 0;
 
+  top: 50%;
 
+  -webkit-transform: translate(-50%, -100%);
 
+          transform: translate(-50%, -100%);
 
+  width: 0;
 
+  height: 0;
 
+  border-style: solid;
 
+  border-top: 0.6rem solid transparent;
 
+  border-bottom: 0.6rem solid transparent;
 
+  border-right: 1.6rem solid var(--color-background-default-secondary);
 
+  border-left: 0;
 
+}
 
+.ai-result-tutor .txt-area h3 {
 
+  font-size: var(--font-tit-sm);
 
+  font-weight: var(--size-font-weight-xlg);
 
+  line-height: var(--size-font-lineheight-sm);
 
+  color: var(--color-font-brand-primary);
 
+}
 
+
 
+.ai-result-sel header {
 
+  border-radius: 2.4rem;
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  min-height: 16rem;
 
+  padding: 3.2rem 4rem;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  -webkit-box-pack: center;
 
+      -ms-flex-pack: center;
 
+          justify-content: center;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  text-align: center;
 
+  gap: 0.8rem;
 
+  background: -webkit-gradient(linear, left top, right top, from(var(--color-primary5)), to(var(--color-accent5)));
 
+  background: linear-gradient(90deg, var(--color-primary5) 0%, var(--color-accent5) 100%);
 
+  animation: ai-result-sel 6s ease infinite alternate-reverse;
 
+}
 
+@keyframes ai-result-sel {
 
+  0% {
 
+    -webkit-filter: hue-rotate(0deg);
 
+            filter: hue-rotate(0deg);
 
+  }
 
+  100% {
 
+    -webkit-filter: hue-rotate(360deg);
 
+            filter: hue-rotate(360deg);
 
+  }
 
+}
 
+.ai-result-sel header h3 {
 
+  font-size: var(--font-tit-lg);
 
+  font-weight: var(--size-font-weight-xlg);
 
+  line-height: var(--size-font-lineheight-sm);
 
+}
 
+.ai-result-sel header p {
 
+  color: var(--color-font-default-secondary);
 
+}
 
+.ai-result-sel .fnc {
 
+  position: relative;
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-pack: center;
 
+      -ms-flex-pack: center;
 
+          justify-content: center;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  gap: 0.8rem;
 
+  padding-top: 8rem;
 
+}
 
+.ai-result-sel .fnc .fnc::before, .ai-result-sel .fnc button::before {
 
+  position: absolute;
 
+  left: 50%;
 
+  display: block;
 
+  width: 0.2rem;
 
+  height: 4rem;
 
+  background: var(--color-stroke-default-tertiary);
 
+}
 
+.ai-result-sel .fnc::before {
 
+  content: "";
 
+  position: absolute;
 
+  left: 50%;
 
+  display: block;
 
+  width: 0.2rem;
 
+  height: 4rem;
 
+  background: var(--color-stroke-default-tertiary);
 
+  top: 0;
 
+  -webkit-transform: translateX(-50%);
 
+          transform: translateX(-50%);
 
+}
 
+.ai-result-sel .fnc button {
 
+  position: relative;
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  width: 36rem;
 
+  height: 8rem;
 
+  padding: 0 2.4rem;
 
+  -webkit-box-pack: center;
 
+      -ms-flex-pack: center;
 
+          justify-content: center;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  gap: 0.8rem;
 
+  border-radius: 4rem;
 
+  border: 0.2rem solid var(--color-stroke-brand-primary);
 
+  background: linear-gradient(100deg, var(--color-primary50) 32%, var(--color-primary40) 68%);
 
+  color: var(--color-font-default-primary-inverse);
 
+  font-size: var(--font-label-lg);
 
+  font-weight: var(--size-font-weight-md);
 
+  line-height: var(--size-font-lineheight-xsm);
 
+  font-weight: var(--size-font-weight-xlg);
 
+  -webkit-transition: all 0.3s;
 
+  transition: all 0.3s;
 
+}
 
+.ai-result-sel .fnc button:hover {
 
+  background: linear-gradient(103deg, var(--color-primary50) 32%, var(--color-primary50) 68%);
 
+}
 
+.ai-result-sel .fnc button.seconadry {
 
+  border-color: var(--color-stroke-brand-secondary);
 
+  background: linear-gradient(103deg, var(--color-secondary50) 32%, var(--color-secondary40) 68%);
 
+}
 
+.ai-result-sel .fnc button.seconadry:hover {
 
+  background: linear-gradient(103deg, var(--color-secondary50) 32%, var(--color-secondary50) 68%);
 
+}
 
+.ai-result-sel .fnc button::before {
 
+  content: "";
 
+  top: -0.2rem;
 
+  -webkit-transform: translate(-50%, -100%);
 
+          transform: translate(-50%, -100%);
 
+}
 
+.ai-result-sel .fnc button::after {
 
+  content: "";
 
+  position: absolute;
 
+  top: -4.2rem;
 
+  left: 50%;
 
+  height: 0.2rem;
 
+  width: calc(50% + 0.4rem);
 
+  background: var(--color-stroke-default-tertiary);
 
+}
 
+.ai-result-sel .fnc button:nth-of-type(2)::after {
 
+  left: -0.4rem;
 
+}
 
+
 
+.book-list {
 
+  display: grid;
 
+  grid-template-columns: repeat(5, 1fr);
 
+  gap: 3.2rem 2.4rem;
 
+}
 
+.book-list li {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  gap: 1.6rem;
 
+  position: relative;
 
+}
 
+.book-list li .item-checkradio {
 
+  position: absolute;
 
+  top: 1.6rem;
 
+  left: 1.6rem;
 
+}
 
+.book-list li .img-area figure {
 
+  border-radius: 1.2rem;
 
+  border: 0.1rem solid var(--color-stroke-default-tertiary);
 
+  overflow: hidden;
 
+  width: 100%;
 
+  aspect-ratio: 7/9;
 
+}
 
+.book-list li .img-area figure img {
 
+  display: block;
 
+  -o-object-fit: cover;
 
+     object-fit: cover;
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+.book-list li .txt-area {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  gap: 0.4rem;
 
+}
 
+.book-list li .txt-area strong {
 
+  font-size: var(--font-tit-sm);
 
+  font-weight: var(--size-font-weight-xlg);
 
+  line-height: var(--size-font-lineheight-sm);
 
+}
 
+.book-list.col2 {
 
+  grid-template-columns: repeat(2, 1fr);
 
+}
 
+.book-list.col3 {
 
+  grid-template-columns: repeat(3, 1fr);
 
+}
 
+
 
+.bookmark-list {
 
+  display: grid;
 
+  grid-template-columns: repeat(4, 1fr);
 
+  gap: 0.4rem;
 
+}
 
+.bookmark-list > li {
 
+  position: relative;
 
+  min-height: 10rem;
 
+}
 
+.bookmark-list > li figure {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  padding: 1.6rem 0.8rem;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  gap: 0.8rem;
 
+  border-radius: 2.4rem;
 
+}
 
+.bookmark-list > li figure img {
 
+  display: block;
 
+  width: 3.2rem;
 
+  height: 3.2rem;
 
+}
 
+.bookmark-list > li figure figcaption {
 
+  text-align: center;
 
+  color: var(--color-font-default-secondary);
 
+  word-break: keep-all;
 
+  display: -webkit-box;
 
+  overflow: hidden;
 
+  line-height: 1.4;
 
+  width: 100%;
 
+  text-overflow: ellipsis;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-line-clamp: 2;
 
+  font-size: var(--font-label-sm);
 
+  font-weight: var(--size-font-weight-md);
 
+  line-height: var(--size-font-lineheight-xsm);
 
+}
 
+.bookmark-list > li figure:hover {
 
+  background-color: var(--color-background-default-secondary);
 
+}
 
+.bookmark-list > li .etc-fnc-area {
 
+  position: absolute;
 
+  top: 0;
 
+  right: 0;
 
+  border-radius: 20rem;
 
+}
 
+.bookmark-list > li .etc-fnc-area:hover {
 
+  border: 0.1rem solid var(--color-stroke-default-tertiary);
 
+  background-color: var(--color-background-default-primary);
 
+}
 
+
 
+.bookmark-txt-list {
 
+  font-size: var(--font-body-sm);
 
+  font-weight: var(--size-font-weight-md);
 
+  color: var(--color-font-default-secondary);
 
+  display: grid;
 
+  grid-template-columns: repeat(2, 1fr);
 
+  border-radius: 1.2rem;
 
+  border: 0.1rem solid var(--color-stroke-default-tertiary);
 
+  overflow: hidden;
 
+}
 
+.bookmark-txt-list li {
 
+  border-bottom: 0.1rem solid var(--color-stroke-default-tertiary);
 
+}
 
+.bookmark-txt-list li a {
 
+  display: block;
 
+  text-align: center;
 
+  padding: 0.8rem;
 
+}
 
+.bookmark-txt-list li a:hover {
 
+  background-color: var(--color-background-default-secondary);
 
+}
 
+.bookmark-txt-list li:nth-child(odd) {
 
+  border-right: 0.1rem solid var(--color-stroke-default-tertiary);
 
+}
 
+.bookmark-txt-list li:last-child {
 
+  border-right: none;
 
+  border-bottom: none;
 
+}
 
+.bookmark-txt-list li:last-child:nth-child(odd) {
 
+  grid-column: 1/-1;
 
+}
 
+
 
+.btn-item-add {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: column;
 
+          flex-direction: column;
 
+  -webkit-box-pack: center;
 
+      -ms-flex-pack: center;
 
+          justify-content: center;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  gap: 1.2rem;
 
+  border: 0.1rem dashed var(--color-stroke-default-tertiary);
 
+  border-radius: 2.4rem;
 
+  text-align: center;
 
+  color: var(--color-font-default-tertiary);
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+
 
+@media (max-width: 1023px) {
 
+  .row {
 
+    grid-template-columns: 1fr;
 
+    gap: var(--spacing-section-sm) 0;
 
+  }
 
+}
 
+@media (max-width: 767px) {
 
+  .reference-list {
 
+    grid-template-columns: initial;
 
+  }
 
+  .reference-list .img-area {
 
+    max-width: 40%;
 
+    border-radius: 0.8rem;
 
+  }
 
+  .mark-area {
 
+    -webkit-box-orient: vertical;
 
+    -webkit-box-direction: normal;
 
+        -ms-flex-direction: column;
 
+            flex-direction: column;
 
+  }
 
+  .mark-area .sticky-cont {
 
+    width: 100%;
 
+  }
 
+  .mark-area .sticky {
 
+    height: 48rem;
 
+  }
 
+  .user-info-area .wrap {
 
+    -webkit-box-orient: vertical;
 
+    -webkit-box-direction: normal;
 
+        -ms-flex-direction: column;
 
+            flex-direction: column;
 
+  }
 
+  .emotion-check-area .emotion-check {
 
+    padding: 1.6rem;
 
+  }
 
+  .emotion-check-area .emotion-check ul {
 
+    grid-template-columns: repeat(2, 1fr);
 
+    gap: 0.4rem;
 
+  }
 
+  .emotion-check-area .emotion-check ul label {
 
+    padding: 1.2rem 0.8rem;
 
+    border-radius: 1.2rem;
 
+  }
 
+  .emotion-check-area .emotion-check ul label img {
 
+    width: 4.8rem;
 
+  }
 
+  .emotion-check-area .emotion-check ul .emotion-none label img {
 
+    width: 2.4rem;
 
+  }
 
+  .ai-gate-list {
 
+    grid-template-columns: initial;
 
+  }
 
+  .ai-gate-list .btn.ico-arrow-right {
 
+    display: none;
 
+  }
 
+  .ai-result-tag .txt-area {
 
+    grid-template-columns: initial;
 
+  }
 
+  .ai-result-tag strong {
 
+    width: 100%;
 
+    aspect-ratio: initial;
 
+  }
 
+  .ai-result-info {
 
+    padding: 2.4rem;
 
+    background-image: none;
 
+  }
 
+  .ai-result-tutor {
 
+    grid-template-columns: initial;
 
+  }
 
+  .ai-result-tutor::before {
 
+    display: none;
 
+  }
 
+  .ai-result-tutor .txt-area {
 
+    padding: 1.6rem;
 
+  }
 
+  .ai-result-sel .fnc {
 
+    padding-top: 2.4rem;
 
+    gap: 0.4rem;
 
+    -webkit-box-orient: vertical;
 
+    -webkit-box-direction: normal;
 
+        -ms-flex-direction: column;
 
+            flex-direction: column;
 
+  }
 
+  .ai-result-sel .fnc button {
 
+    width: 100%;
 
+    height: 6.4rem;
 
+  }
 
+  .ai-result-sel .fnc button::after, .ai-result-sel .fnc button::before {
 
+    content: none;
 
+  }
 
+  .border-list > li {
 
+    padding: 1.2rem 1.6rem;
 
+  }
 
+  .calendar-tbl .emotion img {
 
+    width: 3.2rem;
 
+  }
 
 }/*# sourceMappingURL=style.css.map */
(파일 끝에 줄바꿈 문자 없음)
1e24280
63d2789
resources/front/site/SITE_00000/css/style.css.map
--- resources/front/site/SITE_00000/css/style.css.map
+++ resources/front/site/SITE_00000/css/style.css.map
This diff is too big to display.
1e24280
63d2789
resources/front/site/SITE_00000/css/style.min.css
--- resources/front/site/SITE_00000/css/style.min.css
+++ resources/front/site/SITE_00000/css/style.min.css
This diff is too big to display.
1e24280
63d2789
resources/front/site/SITE_00000/css/style.min.css.map
--- resources/front/site/SITE_00000/css/style.min.css.map
+++ resources/front/site/SITE_00000/css/style.min.css.map
This diff is too big to display.
1e24280
63d2789
resources/front/site/SITE_00000/css/style.scss
--- resources/front/site/SITE_00000/css/style.scss
+++ resources/front/site/SITE_00000/css/style.scss
@@ -82,4 +82,7 @@
 
 @import 'custom/page/class';
 
 @import 'custom/page/chart';
 
 @import 'custom/page/userStudent';
 
+@import 'custom/page/sol';
 
+@import 'custom/page/hwa';
 
+
Add a comment
List