@charset "UTF-8";
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.flex-justify-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-justify-center {
  display: flex;
  justify-content: center;
}

.flex-align-center {
  display: flex;
  align-items: center;
}

.cnt {
  position: relative;
  margin: 50px 0 100px 0;
}
@media screen and (max-width: 1023px) {
  .cnt {
    margin: 4.0322580645vw 0 8.064516129vw 0;
  }
}

.word-line {
  white-space: pre-line;
  overflow-wrap: break-word;
  word-break: break-word !important;
}

.ai-writing button {
  -webkit-tap-highlight-color: transparent;
}
.ai-writing button i {
  position: relative;
  z-index: 2;
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform, opacity;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.ai-writing button:disabled, .ai-writing button.disabled {
  cursor: default !important;
}
.ai-writing {
  letter-spacing: -0.0806451613vw;
}
@media screen and (max-width: 1240px) {
  .ai-writing .mt100 {
    margin-top: 8.064516129vw !important;
  }
  .ai-writing .mt50 {
    margin-top: 4.0322580645vw !important;
  }
  .ai-writing .mt30 {
    margin-top: 2.4193548387vw !important;
  }
  .ai-writing .mt20 {
    margin-top: 1.6129032258vw !important;
  }
}
@media screen and (max-width: 1280px) {
  .ai-writing .inner {
    max-width: 100vw;
    padding: 0 10px;
  }
}
@media screen and (max-width: 1240px) {
  .ai-writing .inner {
    max-width: 100vw;
    padding: 0 0.8064516129vw;
  }
}
.ai-writing .report-list-wrap {
  margin: 50px 0;
}
@media screen and (max-width: 1023px) {
  .ai-writing .report-list-wrap {
    margin: 65px 0;
  }
}
@media screen and (max-width: 1240px) {
  .ai-writing .report-list-wrap {
    margin: 4.0322580645vw 0;
  }
}
.ai-writing .report-top {
  margin: 50px auto 20px;
}
@media screen and (max-width: 1240px) {
  .ai-writing .report-top {
    margin: 50px auto 1.6129032258vw;
  }
}
.ai-writing .local-nav {
  margin-top: 50px;
}
@media screen and (max-width: 1240px) {
  .ai-writing .local-nav {
    margin-top: 4.0322580645vw;
  }
}
@media screen and (max-width: 1240px) {
  .ai-writing .local-nav {
    gap: 1.8548387097vw;
    margin-bottom: 2.4193548387vw;
  }
  .ai-writing .local-nav .lnb-list {
    font-size: 1.1290322581vw;
  }
  .ai-writing .local-nav .lnb-list::after {
    right: -1.0483870968vw;
    top: 0.4838709677vw;
    width: 0.6451612903vw;
    height: 0.8064516129vw;
  }
  .ai-writing .local-nav .home-item {
    width: 0.8870967742vw;
    height: 0.8870967742vw;
    background-size: contain;
  }
  .ai-writing .local-nav .home-item::after {
    top: 0.2419354839vw;
  }
}
@media screen and (max-width: 1023px) {
  .ai-writing .local-nav {
    display: flex;
  }
}
@media screen and (max-width: 1240px) {
  .ai-writing .report-title {
    font-size: 2.0967741935vw;
  }
}
.ai-writing .select-wrap {
  text-align: left;
}
.ai-writing .select-wrap .select-btn:disabled {
  cursor: default;
}
@media screen and (max-width: 1023px) {
  .ai-writing .select-wrap {
    width: auto;
  }
}
@media screen and (max-width: 1240px) {
  .ai-writing .select-wrap .select-btn {
    min-width: 13.7096774194vw;
    height: 3.2258064516vw;
    padding: 0 3.8709677419vw 0 1.4516129032vw;
    font-size: 1.2096774194vw;
    border-radius: 0.7258064516vw;
  }
  .ai-writing .select-wrap .select-btn::after {
    top: unset;
    right: 1.4516129032vw;
    width: 1.0483870968vw;
    height: 0.564516129vw;
    margin-top: 0.2419354839vw;
  }
  .ai-writing .select-wrap .select-list {
    margin-top: -0.0806451613vw;
    border-bottom-left-radius: 0.7258064516vw;
    border-bottom-right-radius: 0.7258064516vw;
  }
  .ai-writing .select-wrap .select-list a {
    padding: 0px 1.4516129032vw 0.9677419355vw;
    font-size: 1.1290322581vw;
  }
  .ai-writing .select-wrap .select-list li:nth-child(1) a {
    padding-top: 0.9677419355vw;
  }
  .ai-writing .select-wrap .select-list a {
    padding: 0 1.4516129032vw 0.9677419355vw;
    font-size: 1.1290322581vw;
  }
}
.ai-writing .select-wrap + .member {
  margin-left: 5px;
}
.ai-writing .btn-wrap-position {
  position: relative;
}
.ai-writing .btn-wrap-position .btn-right {
  position: absolute;
  left: 50%;
  margin-left: 275px;
}
.ai-writing .btn-wrap-position .btn-left {
  position: absolute;
  right: 50%;
  margin-right: 275px;
}
@media screen and (max-width: 1280px) {
  .ai-writing .btn-wrap-position .btn-right {
    margin-left: 275px;
  }
  .ai-writing .btn-wrap-position .btn-left {
    margin-right: 275px;
  }
}
@media screen and (max-width: 1240px) {
  .ai-writing .btn-wrap-position {
    gap: 0.8064516129vw;
  }
  .ai-writing .btn-wrap-position .btn-right {
    margin-left: 22.1774193548vw;
  }
  .ai-writing .btn-wrap-position .btn-left {
    margin-right: 22.1774193548vw;
  }
}
.ai-writing .btn-defalut, .ai-writing .btn-defalut-line {
  width: 260px;
  height: 55px;
}
.ai-writing .btn-defalut.size-s, .ai-writing .btn-defalut-line.size-s {
  width: 85px;
  height: 35px;
}
.ai-writing .btn-defalut.h40, .ai-writing .btn-defalut-line.h40 {
  width: auto;
  height: 40px;
  line-height: 1;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 400;
}
@media screen and (max-width: 1240px) {
  .ai-writing .btn-defalut, .ai-writing .btn-defalut-line {
    width: 20.9677419355vw;
    height: 4.435483871vw;
    font-size: 1.2096774194vw;
    border-radius: 0.6451612903vw;
  }
  .ai-writing .btn-defalut.size-s, .ai-writing .btn-defalut-line.size-s {
    width: 6.8548387097vw;
    height: 2.8225806452vw;
  }
  .ai-writing .btn-defalut.h40, .ai-writing .btn-defalut-line.h40 {
    height: 3.2258064516vw;
    padding: 0 0.8064516129vw;
    font-size: 0.9677419355vw;
  }
}
@media screen and (max-width: 1240px) {
  .ai-writing .badge-type02 {
    min-width: 3.2258064516vw;
    height: 1.7741935484vw;
    padding: 0 0.564516129vw;
    font-size: 0.9677419355vw;
    border-radius: 0.4838709677vw;
    margin-right: 0.7258064516vw;
  }
}
.ai-writing .btn-type03 {
  line-height: 1;
  height: 26px;
  padding: 0 10px;
  font-size: 12px;
}
.ai-writing .btn-type03.ai {
  background-image: linear-gradient(to right, #1f8bff, #8257ff);
}
.ai-writing .btn-type03.ai.disabled {
  color: #9e9e9e;
  background-color: #ebebeb;
  background-image: none;
}
@media screen and (max-width: 1240px) {
  .ai-writing .btn-type03 {
    width: auto;
    height: 2.0967741935vw;
    padding: 0 0.8064516129vw;
    font-size: 0.9677419355vw;
    border-radius: 0.6451612903vw;
  }
}
@media screen and (max-width: 1023px) {
  .ai-writing .btn-type03 {
    width: auto;
  }
}
@media screen and (max-width: 1240px) {
  .ai-writing .toggle-btn {
    width: 3.8709677419vw;
    height: 2.0967741935vw;
    border-radius: 1.0483870968vw;
  }
  .ai-writing .toggle-btn .checkbox:checked + .knobs::before {
    left: 2.0967741935vw;
  }
  .ai-writing .toggle-btn .knobs::before {
    top: 0.3225806452vw;
    left: 0.3225806452vw;
    width: 1.4516129032vw;
    height: 1.4516129032vw;
  }
  .ai-writing .toggle-btn .layer {
    border-radius: 0.9677419355vw;
  }
}
@media screen and (max-width: 1240px) {
  .ai-writing .tab-menu-type03 {
    height: 3.8709677419vw;
    border-radius: 1.935483871vw;
    padding: 0 0.4032258065vw;
  }
  .ai-writing .tab-menu-type03 li {
    display: flex;
    align-items: center;
    height: 2.9032258065vw;
  }
  .ai-writing .tab-menu-type03 li a {
    width: 7.2580645161vw;
    height: 2.9032258065vw;
    border-radius: 1.4516129032vw;
    font-size: 1.2096774194vw;
  }
}

@media screen and (max-width: 1023px) {
  .writing-project-wrap.cnt {
    margin-top: 100px;
  }
}
@media screen and (max-width: 800px) {
  .writing-project-wrap.cnt {
    margin-top: 80px;
  }
}
.writing-project-wrap .writing-title {
  line-height: 1;
  font-size: 26px;
  font-weight: 700;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .writing-title {
    font-size: 2.0967741935vw;
  }
}
.writing-project-wrap .btn-file {
  min-width: 80px;
  height: 40px;
  line-height: 1;
  font-size: 12px;
  font-weight: 500;
  color: #333;
  border: 1px solid #333;
  border-radius: 8px;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .btn-file {
    min-width: 6.4516129032vw;
    height: 3.2258064516vw;
    font-size: 0.9677419355vw;
    border-radius: 0.6451612903vw;
  }
}
.writing-project-wrap .file-btn + .mode-btn {
  margin-left: 10px;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .file-btn + .mode-btn {
    margin-left: 0.8064516129vw;
  }
}
.writing-project-wrap .mode-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  margin-bottom: 10px;
  padding: 0 10px;
  line-height: 1;
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  background-color: #333;
  border-radius: 8px;
}
.writing-project-wrap .mode-btn.blue {
  background-color: #108EFF !important;
}
.writing-project-wrap .mode-btn + .mode-btn {
  margin-left: 10px;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .mode-btn {
    height: 2.8225806452vw;
    margin-bottom: 0.8064516129vw;
    padding: 0 0.8064516129vw !important;
    line-height: 2.8225806452vw;
    font-size: 1.1290322581vw !important;
    border-radius: 0.6451612903vw;
  }
  .writing-project-wrap .mode-btn + .mode-btn {
    margin-left: 0.8064516129vw;
  }
}
.writing-project-wrap input {
  width: 100%;
  height: 40px;
  padding-left: 10px;
  font-size: 16px;
  border: 1px solid #d7d7d7;
  outline-color: #222;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap input {
    height: 3.2258064516vw;
    padding-left: 0.8064516129vw;
    font-size: 1.2903225806vw;
    border-radius: 0.7258064516vw;
  }
  .writing-project-wrap input::placeholder {
    font-size: 1.2096774194vw;
  }
  .writing-project-wrap input[type=checkbox] + label {
    padding-left: 2.2580645161vw;
    font-size: 1.4516129032vw;
  }
  .writing-project-wrap input[type=checkbox] + label::before {
    width: 1.4516129032vw;
    height: 1.4516129032vw;
    margin-top: -0.6451612903vw;
  }
}
.writing-project-wrap .tooltip-wrap {
  gap: 6px;
}
.writing-project-wrap .tooltip-wrap:first-child .toggle-tit {
  margin-left: 0;
}
.writing-project-wrap .tooltip-wrap.btn-type .tooltip-btn {
  position: absolute;
  top: -9px;
  right: -4px;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .tooltip-wrap {
    gap: 0.4838709677vw;
  }
  .writing-project-wrap .tooltip-wrap.btn-type .tooltip-btn {
    top: -0.7258064516vw;
    right: -0.3225806452vw;
  }
}
.writing-project-wrap .tooltip-wrap .tooltip-btn {
  position: relative;
  top: 1px;
  right: 0;
  width: 18px;
  height: 18px;
  background-image: url(../../images/common/ico_tooltip_type02.png);
  z-index: 1;
}
.writing-project-wrap .tooltip-wrap .tooltip-btn.type02 {
  top: 0;
  width: 14px;
  height: 14px;
  background: url(../../images/common/ico_tooltip_type03.png) no-repeat;
  background-size: contain;
}
.writing-project-wrap .tooltip-wrap .tooltip-btn.red {
  padding: 0;
  background-image: url(../../images/common/ico_tooltip.png);
  background-color: transparent;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .tooltip-wrap .tooltip-btn {
    top: 0.0806451613vw;
    width: 1.4516129032vw;
    height: 1.4516129032vw;
  }
  .writing-project-wrap .tooltip-wrap .tooltip-btn.type02 {
    width: 1.1290322581vw;
    height: 1.1290322581vw;
  }
}
.writing-project-wrap .tooltip-wrap .tooltip-txt {
  top: calc(100% - 2px);
  left: calc(100% - 25px);
  padding: 10px;
  height: auto;
  line-height: normal;
  text-align: left;
  font-size: 14px;
  border: 1px solid #333;
  border-radius: 0;
  background-color: #fff;
}
.writing-project-wrap .tooltip-wrap .tooltip-txt::after {
  display: none;
}
.writing-project-wrap .tooltip-wrap .tooltip-txt.right {
  left: unset;
  right: -20px;
}
.writing-project-wrap .tooltip-wrap .tooltip-txt.btn-top {
  top: unset;
  right: -30px;
  bottom: calc(100% + 10px);
  left: unset;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .tooltip-wrap .tooltip-txt {
    padding: 0.8064516129vw;
    font-size: 1.1290322581vw;
  }
  .writing-project-wrap .tooltip-wrap .tooltip-txt.right {
    right: -1.6129032258vw;
  }
  .writing-project-wrap .tooltip-wrap .tooltip-txt.btn-top {
    right: -2.4193548387vw;
    bottom: 100%;
  }
}
.writing-project-wrap .tooltip-wrap .toggle-tit {
  margin-right: 4px;
  margin-left: 20px;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .tooltip-wrap .toggle-tit {
    margin-right: 0.3225806452vw;
    margin-left: 1.6129032258vw;
  }
}
.writing-project-wrap .textarea-wrap {
  display: grid;
}
.writing-project-wrap .textarea-wrap::after {
  content: attr(data-replicated-value) " ";
  white-space: pre-wrap;
  visibility: hidden;
}
.writing-project-wrap .textarea-wrap > textarea {
  resize: none;
  overflow: hidden;
  outline-color: #222;
}
.writing-project-wrap .textarea-wrap > textarea::placeholder {
  color: #A4A4A4;
  font-size: 15px;
}
.writing-project-wrap .textarea-wrap > textarea, .writing-project-wrap .textarea-wrap::after {
  min-height: 74px;
  line-height: 1.4;
  padding: 10px;
  border: 1px solid #D7D7D7;
  border-radius: 8px;
  font: inherit;
  grid-area: 1/1/2/2;
  box-sizing: border-box;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .textarea-wrap > textarea::placeholder {
    font-size: 1.2096774194vw;
  }
  .writing-project-wrap .textarea-wrap > textarea, .writing-project-wrap .textarea-wrap::after {
    min-height: 5.9677419355vw;
    padding: 0.8064516129vw;
    font-size: 1.2096774194vw;
    border-radius: 0.6451612903vw;
  }
}
.writing-project-wrap .table-wrap.write-table {
  margin-bottom: 30px;
  border-top: 1px solid #333;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .table-wrap.write-table {
    margin-bottom: 2.4193548387vw;
    margin-top: 1.6129032258vw;
    font-size: 1.2903225806vw;
  }
}
.writing-project-wrap .table-wrap.write-table th,
.writing-project-wrap .table-wrap.write-table td {
  padding: 12px 10px 11px;
  line-height: 1.5;
  border: 1px solid #D7D7D7;
  letter-spacing: -0.8px;
}
.writing-project-wrap .table-wrap.write-table th .notice-txt,
.writing-project-wrap .table-wrap.write-table td .notice-txt {
  margin-right: 10px;
  line-height: 22.5px;
  font-size: 14px;
  color: #7E7E7E;
  letter-spacing: -0.2px;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .table-wrap.write-table th,
  .writing-project-wrap .table-wrap.write-table td {
    padding: 0.9677419355vw 0.8064516129vw 0.8870967742vw;
  }
  .writing-project-wrap .table-wrap.write-table th .notice-txt,
  .writing-project-wrap .table-wrap.write-table td .notice-txt {
    margin-right: 0.8064516129vw;
    line-height: 1.814516129vw;
    font-size: 1.1290322581vw;
    letter-spacing: -0.0161290323vw;
  }
}
.writing-project-wrap .table-wrap.write-table tbody tr:first-child td {
  border-top: 0;
}
.writing-project-wrap .table-wrap.write-table tbody td input.txt-num {
  width: 80px;
  margin-right: 6px;
}
.writing-project-wrap .table-wrap.write-table tbody td input.txt-num + span {
  margin-right: 10px;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .table-wrap.write-table tbody td input.txt-num {
    width: 6.4516129032vw;
    margin-right: 0.4838709677vw;
  }
  .writing-project-wrap .table-wrap.write-table tbody td input.txt-num + span {
    margin-right: 0.8064516129vw;
  }
}
.writing-project-wrap .table-wrap.write-table tbody td .select-wrap.disabled .select-btn {
  min-width: 315px;
  color: #B2B2B2;
  background-color: #E8E8E8;
  border: 0;
}
.writing-project-wrap .table-wrap.write-table tbody td .select-wrap.disabled .select-btn::after {
  opacity: 0.3;
}
.writing-project-wrap .table-wrap.write-table tbody td .select-wrap + .notice-txt {
  margin-top: 10px;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .table-wrap.write-table tbody td .select-wrap.disabled .select-btn {
    min-width: 25.4032258065vw;
  }
  .writing-project-wrap .table-wrap.write-table tbody td .select-wrap + .notice-txt {
    margin-top: 0.8064516129vw;
  }
}
.writing-project-wrap .table-wrap.write-table tbody td .input-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.writing-project-wrap .table-wrap.write-table tbody td .input-wrap .select-wrap {
  width: 200px;
}
.writing-project-wrap .table-wrap.write-table tbody td .input-wrap .select-btn {
  min-width: 200px;
}
.writing-project-wrap .table-wrap.write-table tbody td .input-wrap .btn-delete img {
  width: 20px;
}
.writing-project-wrap .table-wrap.write-table tbody td .input-wrap .extra {
  max-width: 769px;
  margin-right: 30px;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .table-wrap.write-table tbody td .input-wrap {
    flex-direction: row;
    gap: 0.8064516129vw;
    margin-bottom: 0.8064516129vw;
  }
  .writing-project-wrap .table-wrap.write-table tbody td .input-wrap .select-wrap {
    width: 16.1290322581vw;
  }
  .writing-project-wrap .table-wrap.write-table tbody td .input-wrap .select-btn {
    min-width: 16.1290322581vw;
  }
  .writing-project-wrap .table-wrap.write-table tbody td .input-wrap .btn-delete img {
    width: 1.6129032258vw;
  }
  .writing-project-wrap .table-wrap.write-table tbody td .input-wrap .extra {
    max-width: 62.0161290323vw;
    margin-right: 2.4193548387vw;
  }
  .writing-project-wrap .table-wrap.write-table tbody td .input-wrap .btn-add img {
    width: 1.935483871vw;
  }
}
.writing-project-wrap .table-wrap.write-table tbody td .btn-upload {
  width: 100%;
  height: 54px;
  margin-bottom: 10px;
  background: #F8FCFF;
  border: 1px solid #108eff;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .table-wrap.write-table tbody td .btn-upload {
    height: 4.3548387097vw;
    margin-bottom: 0.8064516129vw;
    border-radius: 0.6451612903vw;
  }
  .writing-project-wrap .table-wrap.write-table tbody td .btn-upload img {
    width: 1.935483871vw;
    height: 1.935483871vw;
  }
}
.writing-project-wrap .table-wrap.write-table tbody td #file {
  display: none;
}
.writing-project-wrap .table-wrap.write-table tbody td .textarea-wrap {
  width: 1008px;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .table-wrap.write-table tbody td .textarea-wrap {
    width: 81.2903225806vw;
  }
}
.writing-project-wrap .table-wrap.write-table tbody td .textarea-wrap::after,
.writing-project-wrap .table-wrap.write-table tbody td .textarea-wrap textarea {
  width: 100%;
  max-width: 1008px;
  min-height: 110px;
  padding: 10px;
  border: 1px solid #D7D7D7;
  border-radius: 8px;
  margin-bottom: 5px;
}
.writing-project-wrap .table-wrap.write-table tbody td .textarea-wrap::after::placeholder,
.writing-project-wrap .table-wrap.write-table tbody td .textarea-wrap textarea::placeholder {
  font-size: 15px;
  color: #A4A4A4;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .table-wrap.write-table tbody td .textarea-wrap::after,
  .writing-project-wrap .table-wrap.write-table tbody td .textarea-wrap textarea {
    max-width: 81.2903225806vw;
    min-height: 8.8709677419vw;
    padding: 0.8064516129vw;
    border-radius: 0.6451612903vw;
    margin-bottom: 0.4032258065vw;
  }
  .writing-project-wrap .table-wrap.write-table tbody td .textarea-wrap::after::placeholder,
  .writing-project-wrap .table-wrap.write-table tbody td .textarea-wrap textarea::placeholder {
    font-size: 1.2096774194vw;
  }
}
.writing-project-wrap .table-wrap.write-table tbody td .essential {
  color: red;
  margin-left: 3px;
}
.writing-project-wrap .table-wrap.write-table tbody td .btn-wrap {
  margin-bottom: 10px;
}
.writing-project-wrap .table-wrap.write-table th:first-child,
.writing-project-wrap .table-wrap.write-table td:first-child {
  border-left: 0;
}
.writing-project-wrap .table-wrap.write-table th:last-child,
.writing-project-wrap .table-wrap.write-table td:last-child {
  border-right: 0;
}
.writing-project-wrap .report-tbl-order {
  position: relative;
  top: 0;
  width: 18px;
  height: 18px;
  margin-left: 3px;
  background: url(../../images/common/ico_order.svg) no-repeat;
  background-size: cover;
}
.writing-project-wrap .report-tbl-order.active {
  background: url(../../images/common/ico_order_blue.svg) no-repeat;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .report-tbl-order {
    width: 1.4516129032vw;
    height: 1.4516129032vw;
    margin-left: 0.2419354839vw;
  }
}
.writing-project-wrap .report-tbl-filter {
  top: 0;
}
.writing-project-wrap .none-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 640px;
}
.writing-project-wrap .none-data img {
  margin-bottom: 20px;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .none-data {
    height: 51.6129032258vw;
  }
  .writing-project-wrap .none-data img {
    width: 4.0322580645vw;
    margin-bottom: 1.6129032258vw;
  }
  .writing-project-wrap .none-data p {
    font-size: 1.0483870968vw;
  }
}
.writing-project-wrap .table.tbl-report .badge-type02 {
  margin-right: 0;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .table.tbl-report .badge-type02 {
    min-width: auto;
    height: 1.3709677419vw;
    font-size: 0.9677419355vw;
    border-radius: 0.2419354839vw;
    padding: 0 0.4032258065vw;
  }
}
.writing-project-wrap .table.tbl-report .thead span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  padding: 0 5px;
  font-size: 18px;
}
.writing-project-wrap .table.tbl-report .thead span.num-th {
  font-size: 16px;
  flex-direction: column;
}
.writing-project-wrap .table.tbl-report .thead span.num-th em {
  display: inline-block;
}
.writing-project-wrap .table.tbl-report .thead span.num-th em i {
  color: #108EFF;
  font-style: normal;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .table.tbl-report .thead span {
    height: 4.8387096774vw;
    padding: 0 0.4032258065vw;
    font-size: 1.4516129032vw;
  }
  .writing-project-wrap .table.tbl-report .thead span.num-th {
    font-size: 1.2903225806vw;
  }
}
.writing-project-wrap .table.tbl-report .tbody .col.disabled {
  background-color: #f5f5f5;
}
.writing-project-wrap .table.tbl-report .tbody .col span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  padding: 0 15px;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .table.tbl-report .tbody .col span {
    height: 5.1612903226vw;
    padding: 0 1.2096774194vw;
    font-size: 1.2903225806vw;
  }
}
.writing-project-wrap .table.tbl-report .tbody .col span.txt {
  justify-content: flex-start;
  line-height: 1.2;
}
.writing-project-wrap .table.tbl-report .tbody .col span.txt a {
  text-decoration: underline;
  cursor: pointer;
}
.writing-project-wrap .table.tbl-report .tbody .col span.txt a, .writing-project-wrap .table.tbl-report .tbody .col span.txt em {
  text-align: left;
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
}
.writing-project-wrap .table.tbl-report .tbody .col span.num em i {
  color: #108EFF;
  font-style: normal;
}
.writing-project-wrap .table.tbl-report span:nth-child(1) {
  width: 11%;
  order: unset;
}
.writing-project-wrap .table.tbl-report span:nth-child(2), .writing-project-wrap .table.tbl-report span:nth-child(3) {
  width: 27%;
  order: unset;
  border-top: 0;
  border-left: 1px solid #e8e8e8;
}
.writing-project-wrap .table.tbl-report span:nth-child(4), .writing-project-wrap .table.tbl-report span:nth-child(5) {
  width: 17.5%;
  order: unset;
  border-top: 0;
  border-left: 1px solid #e8e8e8;
}
.writing-project-wrap .table.tbl-report.student span:nth-child(1) {
  width: 10%;
}
.writing-project-wrap .table.tbl-report.student span:nth-child(3) {
  width: 26.5%;
}
.writing-project-wrap .table.tbl-report.student span:nth-child(4) {
  width: 33.8%;
}
.writing-project-wrap .table.tbl-report.student span:nth-child(2), .writing-project-wrap .table.tbl-report.student span:nth-child(5), .writing-project-wrap .table.tbl-report.student span:nth-child(6) {
  width: 9.5%;
}
.writing-project-wrap .paging-wrap {
  margin-top: 30px;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .paging-wrap {
    margin-top: 2.4193548387vw;
  }
  .writing-project-wrap .paging-wrap .page {
    width: 2.4193548387vw;
    height: 2.4193548387vw;
    margin: 0 0.4032258065vw;
    font-size: 1.2903225806vw;
  }
  .writing-project-wrap .paging-wrap .prev,
  .writing-project-wrap .paging-wrap .next {
    width: 2.0161290323vw;
    height: 2.0161290323vw;
    margin: 0 0.8064516129vw;
    background-size: 2.0161290323vw;
  }
  .writing-project-wrap .paging-wrap .first,
  .writing-project-wrap .paging-wrap .last {
    width: 2.0161290323vw;
    height: 2.0161290323vw;
    background-size: 2.0161290323vw;
  }
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .report-tbl-filter {
    top: 0.2419354839vw;
    width: 1.4516129032vw;
    height: 1.4516129032vw;
    margin-left: 0.2419354839vw;
  }
}
.writing-project-wrap .filter-area {
  display: none;
  overflow: hidden;
  position: absolute;
  top: 45px;
  width: 155px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
  z-index: 1;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .filter-area {
    top: 3.6290322581vw;
    width: 12.5vw;
    border-radius: 0.8064516129vw;
  }
}
.writing-project-wrap .filter-area.active {
  display: block;
}
.writing-project-wrap .filter-area li {
  position: relative;
  padding: 5px;
  cursor: pointer;
}
.writing-project-wrap .filter-area li:nth-child(1) {
  padding-top: 10px;
}
.writing-project-wrap .filter-area li:last-child {
  padding-bottom: 10px;
}
.writing-project-wrap .filter-area li.active {
  background-color: #e1edff;
}
.writing-project-wrap .filter-area li.active em::after {
  position: absolute;
  left: -20px;
  top: 8px;
  content: "";
  display: block;
  clear: both;
  width: 12px;
  height: 12px;
  border-radius: 100%;
  background: url(../../images/common/input_check_on_type02.png) no-repeat;
  background-size: cover;
}
.writing-project-wrap .filter-area li em {
  position: relative;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .filter-area li {
    padding: 0.4032258065vw;
  }
  .writing-project-wrap .filter-area li:nth-child(1) {
    padding-top: 0.8064516129vw;
  }
  .writing-project-wrap .filter-area li:last-child {
    padding-bottom: 0.8064516129vw;
  }
  .writing-project-wrap .filter-area li.active em::after {
    left: -1.6129032258vw;
    top: 0.6451612903vw;
    width: 0.9677419355vw;
    height: 0.9677419355vw;
  }
}
.writing-project-wrap .writing-tit-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  width: 100%;
  padding-bottom: 20px;
  border-bottom: 1px solid #757575;
}
.writing-project-wrap .writing-tit-wrap .tit {
  display: flex;
  align-items: center;
  margin-right: 30px;
  gap: 20px;
}
.writing-project-wrap .writing-tit-wrap .txt {
  font-size: 26px;
  font-weight: 700;
  color: #333;
}
.writing-project-wrap .writing-tit-wrap .txt em {
  display: inline-block;
  font-weight: 700;
  margin-right: 5px;
}
.writing-project-wrap .writing-tit-wrap .btn-arrow {
  display: inline-block;
  width: 12px;
  height: 18px;
  background: url(../../images/common/ico_arrow_left.png) no-repeat;
}
.writing-project-wrap .writing-tit-wrap .btn-print {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-block;
  width: 38px;
  height: 36px;
  background: url(../../images/common/ico_print.svg) center no-repeat;
  background-size: contain;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .writing-tit-wrap {
    padding-bottom: 1.6129032258vw;
  }
  .writing-project-wrap .writing-tit-wrap .tit {
    gap: 1.6129032258vw;
    margin-right: 2.4193548387vw;
  }
  .writing-project-wrap .writing-tit-wrap .txt {
    font-size: 2.0967741935vw;
  }
  .writing-project-wrap .writing-tit-wrap .txt em {
    margin-right: 0.4032258065vw;
  }
  .writing-project-wrap .writing-tit-wrap .btn-arrow {
    width: 0.9677419355vw;
    height: 1.4516129032vw;
    background-size: contain;
  }
  .writing-project-wrap .writing-tit-wrap .btn-print {
    width: 3.064516129vw;
    height: 2.9032258065vw;
  }
  .writing-project-wrap .writing-tit-wrap .badge-type01 {
    height: 2.2580645161vw;
    padding: 0 0.8064516129vw;
    font-size: 1.2096774194vw;
    border-radius: 0.4838709677vw;
    margin-right: 0.7258064516vw;
  }
}
.writing-project-wrap .writing-item-wrap {
  align-items: flex-start !important;
}
.writing-project-wrap .writing-item-wrap .writing-item-txt {
  width: 100%;
  margin-right: 10px;
  font-size: 15px;
}
.writing-project-wrap .writing-item-wrap .writing-item-txt.bold {
  font-weight: 700;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .writing-item-wrap .writing-item-txt {
    margin-right: 0.8064516129vw;
    font-size: 1.2096774194vw;
  }
}
.writing-project-wrap .word-btn {
  width: auto;
  padding: 0 27px 0 10px;
  height: 26px;
  line-height: 26px;
  color: #108EFF;
  font-size: 12px;
  background-image: url(../../images/common/ico-cancel-blue.svg);
  background-repeat: no-repeat;
  background-size: 14px;
  background-position: right 8px center;
  background-color: #E7F4FF;
  border-radius: 8px;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .word-btn {
    padding: 0 2.1774193548vw 0 0.8064516129vw;
    height: 2.0967741935vw;
    line-height: 2.0967741935vw;
    font-size: 0.9677419355vw;
    background-size: 1.1290322581vw;
    background-position: right 0.6451612903vw center;
    border-radius: 0.6451612903vw;
  }
}
.writing-project-wrap .toggle-btn .knobs::before {
  background-color: #fff;
}
.writing-project-wrap .toggle-btn .layer {
  background-color: #B2B2B2;
  border: 0;
}
.writing-project-wrap .date-wrap .date-box {
  position: relative;
  display: inline-block;
}
.writing-project-wrap .date-wrap .date-box input {
  position: relative;
  width: 200px;
  padding-right: 40px;
}
.writing-project-wrap .date-wrap .date-box img {
  position: absolute;
  top: 11px;
  right: 10px;
}
.writing-project-wrap .date-wrap + p {
  margin-top: 10px;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .date-wrap .date-box input {
    width: 16.1290322581vw;
    padding-right: 3.2258064516vw;
  }
  .writing-project-wrap .date-wrap .date-box img {
    top: 0.8870967742vw;
    right: 0.8064516129vw;
    width: 1.3709677419vw;
  }
  .writing-project-wrap .date-wrap + p {
    margin-top: 0.8064516129vw;
  }
}
.writing-project-wrap .report-view-wrap .report-cnt .justify-box {
  flex-direction: row;
  align-items: stretch;
}
.writing-project-wrap .report-view-wrap .report-cnt .justify-box .box-wrap + .box-wrap {
  margin: 0;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .report-view-wrap .user-wrap {
    padding-top: 1.6129032258vw;
  }
  .writing-project-wrap .report-view-wrap .user-wrap .info {
    font-size: 1.2096774194vw;
  }
  .writing-project-wrap .report-view-wrap .user-wrap .info em {
    font-size: 1.2096774194vw;
  }
  .writing-project-wrap .report-view-wrap .user-wrap .badge {
    width: 7.6612903226vw;
    height: 3.2258064516vw;
    border-radius: 0.6451612903vw;
    font-size: 1.2096774194vw;
    margin-left: 1.2096774194vw;
  }
}
.writing-project-wrap .report-view-wrap .title-wrap {
  margin: 40px 0 20px;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .report-view-wrap .title-wrap {
    margin: 3.2258064516vw 0 1.6129032258vw;
  }
}
.writing-project-wrap .report-view-wrap .title-wrap .arrow {
  position: relative;
  width: auto;
  height: 35px;
  padding: 7px 13px 7px 30px;
  font-size: 14px;
  font-weight: 500;
}
.writing-project-wrap .report-view-wrap .title-wrap .arrow::before {
  position: absolute;
  left: 15px;
  top: 50%;
  content: "";
  display: block;
  clear: both;
  width: 12px;
  height: 8px;
  margin-top: -3px;
  background: url(../../images/common/ico_acc_arrow_up.png) no-repeat;
  transform: rotate(-90deg);
  background-size: contain;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .report-view-wrap .title-wrap .arrow {
    height: 2.8225806452vw;
    line-height: normal;
    padding: 0.564516129vw 1.0483870968vw 0.564516129vw 2.4193548387vw;
    font-size: 1.1290322581vw;
    border-radius: 0.6451612903vw;
  }
  .writing-project-wrap .report-view-wrap .title-wrap .arrow::before {
    left: 1.2096774194vw;
    width: 0.9677419355vw;
    height: 0.6451612903vw;
    margin-top: -0.2419354839vw;
  }
}
.writing-project-wrap .report-view-wrap .title-wrap .title {
  display: flex;
  align-items: center;
}
.writing-project-wrap .report-view-wrap .title-wrap .title em {
  margin-left: 10px;
  font-size: 18px;
  color: #7E7E7E;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .report-view-wrap .title-wrap .title {
    font-size: 1.935483871vw;
    padding-left: 2.0161290323vw;
  }
  .writing-project-wrap .report-view-wrap .title-wrap .title::before {
    width: 1.2903225806vw;
    height: 1.2903225806vw;
  }
  .writing-project-wrap .report-view-wrap .title-wrap .title em {
    margin-left: 0.8064516129vw;
    font-size: 1.4516129032vw;
  }
}
.writing-project-wrap .report-view-wrap .title-wrap .btn-wrap button {
  margin: 0;
  border-radius: 8px;
}
.writing-project-wrap .report-view-wrap .title-wrap .btn-wrap button:disabled {
  background-color: #E8E8E8 !important;
  border: 1px solid #d9d9d9;
  color: #B2B2B2;
  cursor: default;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .report-view-wrap .title-wrap .btn-wrap {
    gap: 0.8064516129vw;
  }
  .writing-project-wrap .report-view-wrap .title-wrap .btn-wrap button {
    border-radius: 0.6451612903vw;
  }
}
.writing-project-wrap .report-view-wrap .justify-box .box-wrap .box {
  height: auto;
}
.writing-project-wrap .report-view-wrap .box-wrap {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .report-view-wrap .box-wrap {
    gap: 0.9677419355vw;
  }
}
.writing-project-wrap .report-view-wrap .box-wrap .box {
  overflow: hidden;
  min-height: 208px;
  min-width: 285px;
  padding: 30px;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .report-view-wrap .box-wrap .box {
    min-height: 16.7741935484vw;
    min-width: 22.9838709677vw;
    padding: 1.6129032258vw;
  }
}
.writing-project-wrap .report-view-wrap .box-wrap .box.table-box {
  display: table;
  width: 53%;
  max-width: 646px;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .report-view-wrap .box-wrap .box.table-box {
    max-width: 52.0967741935vw;
  }
}
.writing-project-wrap .report-view-wrap .box-wrap .box.chart-box {
  flex-direction: column;
}
.writing-project-wrap .report-view-wrap .box-wrap .box.chart-box .badge-type01 {
  height: 31px;
  margin-right: 0;
  margin-bottom: 10px;
  border-radius: 16px;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .report-view-wrap .box-wrap .box.chart-box .badge-type01 {
    height: 2.5vw;
    margin-bottom: 0.8064516129vw;
    font-size: 1.1290322581vw;
    border-radius: 1.2903225806vw;
  }
}
.writing-project-wrap .report-view-wrap .box-wrap .box.chart-box .badge-type01.disabled {
  color: #A4A4A4;
  background-color: #E8E8E8;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .report-view-wrap .box-wrap .box.chart-box .chart-wrap {
    width: 18.5483870968vw;
    height: 11.2903225806vw;
  }
  .writing-project-wrap .report-view-wrap .box-wrap .box.chart-box .chart-wrap canvas {
    top: -4.0322580645vw;
  }
}
.writing-project-wrap .report-view-wrap .box-wrap .box.grade-box {
  flex-direction: column;
  min-width: 240px;
}
.writing-project-wrap .report-view-wrap .box-wrap .box.grade-box h3 {
  color: #108EFF;
  font-size: 100px;
  font-weight: 700;
}
.writing-project-wrap .report-view-wrap .box-wrap .box.grade-box p {
  margin-top: 10px;
  font-size: 18px;
  font-weight: 700;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .report-view-wrap .box-wrap .box.grade-box {
    min-width: 19.3548387097vw;
  }
  .writing-project-wrap .report-view-wrap .box-wrap .box.grade-box h3 {
    font-size: 8.064516129vw;
  }
  .writing-project-wrap .report-view-wrap .box-wrap .box.grade-box p {
    margin-top: 0.8064516129vw;
    font-size: 1.4516129032vw;
  }
}
.writing-project-wrap .report-view-wrap .box-wrap .box .comment-chart {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 428px;
  height: 300px;
}
.writing-project-wrap .report-view-wrap .box-wrap .box .comment-chart canvas {
  width: auto !important;
}
.writing-project-wrap .report-view-wrap .box-wrap .box .comment-chart + .textarea-wrap {
  width: 490px;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .report-view-wrap .box-wrap .box .comment-chart {
    width: 34.5161290323vw;
    height: 24.1935483871vw;
  }
  .writing-project-wrap .report-view-wrap .box-wrap .box .comment-chart + .textarea-wrap {
    width: 39.5161290323vw;
  }
}
.writing-project-wrap .report-view-wrap .box-wrap .box textarea.comment-box {
  padding: 10px;
  min-height: 288px;
  border-radius: 8px;
  border: 1px solid #D7D7D7;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .report-view-wrap .box-wrap .box textarea.comment-box {
    padding: 0.8064516129vw;
    min-height: 23.2258064516vw;
    border-radius: 0.6451612903vw;
  }
}
.writing-project-wrap .report-view-wrap .box-wrap .box .comment-box {
  width: 460px;
  height: 100%;
  line-height: 1.6;
  margin-left: 30px;
  font-size: 15px;
  letter-spacing: -0.2px;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .report-view-wrap .box-wrap .box .comment-box {
    width: 37.0967741935vw;
    margin-left: 2.4193548387vw;
    font-size: 1.2096774194vw;
    letter-spacing: -0.0161290323vw;
  }
}
.writing-project-wrap .report-view-wrap .table-wrap.type01 th {
  padding: 9px 10px;
  font-size: 16px;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .report-view-wrap .table-wrap.type01 th {
    padding: 0.7258064516vw 0.8064516129vw;
    font-size: 1.2903225806vw;
  }
}
.writing-project-wrap .report-view-wrap .table-wrap.type01 td {
  height: 54px;
  padding: 5px 15px;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .report-view-wrap .table-wrap.type01 td {
    height: 4.3548387097vw;
    padding: 0.4032258065vw 1.2096774194vw;
    font-size: 1.2903225806vw;
  }
}
.writing-project-wrap .report-view-wrap .table-wrap.type05 td {
  width: auto;
  height: 50px;
}
.writing-project-wrap .report-view-wrap .table-wrap.type05 td input[type=checkbox] + label::before {
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-size: contain;
}
.writing-project-wrap .report-view-wrap .table-wrap.type05 td input[type=checkbox]:disabled + label::before {
  background-image: url(../../images/common/input_check_disabled_type02.png);
}
.writing-project-wrap .report-view-wrap .table-wrap.type05 td input[type=checkbox]:checked:disabled + label::before {
  background-image: url(../../images/common/input_checked_disabled_type02.png);
}
.writing-project-wrap .report-view-wrap .table-wrap.type05 th {
  padding: 8px 0;
  font-weight: 500;
}
.writing-project-wrap .report-view-wrap .table-wrap.type05 button:has(i.detail.disabled) {
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.writing-project-wrap .report-view-wrap .table-wrap.type05 i.detail {
  margin-top: 5px;
  background-size: 20px 20px;
}
.writing-project-wrap .report-view-wrap .table-wrap.type05 i.detail.disabled {
  filter: grayscale(100%);
  opacity: 0.7;
}
.writing-project-wrap .report-view-wrap .table-wrap.type05 .badge-report.retry-btn {
  gap: 4px;
  width: auto;
  padding: 0 10px 0 27px;
  line-height: 28px;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  background-color: #108EFF;
  background-image: url(../../images/common/ico_retry_wh.svg);
  background-repeat: no-repeat;
  background-size: 12px;
  background-position: 10px center;
  border-radius: 8px;
}
.writing-project-wrap .report-view-wrap .table-wrap.type05 .badge-report.retry-btn:disabled {
  color: #A4A4A4;
  background-color: #E8E8E8;
  background-image: url(../../images/common/ico_retry_g.svg);
  cursor: default;
}
@media screen and (max-width: 1240px) {
  .writing-project-wrap .report-view-wrap .table-wrap.type05 table {
    width: 100%;
    font-size: 1.2903225806vw;
  }
  .writing-project-wrap .report-view-wrap .table-wrap.type05 td {
    height: 4.0322580645vw;
  }
  .writing-project-wrap .report-view-wrap .table-wrap.type05 td input[type=checkbox] + label {
    padding-left: 1.4516129032vw;
  }
  .writing-project-wrap .report-view-wrap .table-wrap.type05 td input[type=checkbox] + label::before {
    width: 1.2903225806vw;
    height: 1.2903225806vw;
  }
  .writing-project-wrap .report-view-wrap .table-wrap.type05 th {
    padding: 0.6451612903vw 0;
    font-size: 1.2903225806vw;
  }
  .writing-project-wrap .report-view-wrap .table-wrap.type05 i.detail {
    width: 1.935483871vw;
    height: 1.935483871vw;
    margin-top: 0.4032258065vw;
    background-size: contain;
  }
  .writing-project-wrap .report-view-wrap .table-wrap.type05 .report-tbl-sort {
    top: 0.0806451613vw;
    width: 1.1290322581vw;
    height: 1.1290322581vw;
  }
}

.step-summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  max-width: 740px;
  margin: 0 auto 50px;
  z-index: 0;
}
@media screen and (max-width: 1240px) {
  .step-summary {
    max-width: 59.6774193548vw;
    gap: 3.2258064516vw;
    margin-bottom: 4.0322580645vw;
  }
}
.step-summary:not(:has(> div:nth-of-type(4))) {
  max-width: 480px;
}
.step-summary:not(:has(> div:nth-of-type(4))) > .line {
  max-width: 400px;
}
@media screen and (max-width: 1240px) {
  .step-summary:not(:has(> div:nth-of-type(4))) {
    max-width: 38.7096774194vw;
  }
  .step-summary:not(:has(> div:nth-of-type(4))) > .line {
    max-width: 32.2580645161vw;
  }
}
.step-summary:not(:has(> div:nth-of-type(3))) {
  max-width: 300px;
}
.step-summary:not(:has(> div:nth-of-type(3))) > .line {
  max-width: 190px;
}
@media screen and (max-width: 1240px) {
  .step-summary:not(:has(> div:nth-of-type(3))) {
    max-width: 24.1935483871vw;
  }
  .step-summary:not(:has(> div:nth-of-type(3))) > .line {
    max-width: 15.3225806452vw;
  }
}
.step-summary .line {
  position: absolute;
  content: "";
  max-width: 650px;
  width: 100%;
  height: 1px;
  background-color: #D7D7D7;
  top: 42px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}
@media screen and (max-width: 1240px) {
  .step-summary .line {
    width: 52.4193548387vw;
    height: 0.0806451613vw;
    top: 3.3870967742vw;
  }
}
.step-summary > div {
  width: 107px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 11px;
  z-index: 1;
}
@media screen and (max-width: 1240px) {
  .step-summary > div {
    width: 8.6290322581vw;
    gap: 0.8870967742vw;
  }
}
.step-summary > div p {
  color: #A4A4A4;
  font-size: 16px;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -0.2px;
}
@media screen and (max-width: 1240px) {
  .step-summary > div p {
    font-size: 1.2903225806vw;
    letter-spacing: -0.0161290323vw;
  }
}
.step-summary > div span {
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 100%;
  background-color: #D7D7D7;
}
@media screen and (max-width: 1240px) {
  .step-summary > div span {
    width: 1.935483871vw;
    height: 1.935483871vw;
  }
}
.step-summary > div.current-step p {
  color: #108EFF;
}
.step-summary > div.current-step span {
  background: url(../../images/common/ico_check_on.png) no-repeat center;
  background-size: contain;
}

.write-outline {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}
@media screen and (max-width: 1240px) {
  .write-outline {
    max-width: 100vw;
  }
}
.write-outline::-webkit-scrollbar {
  height: 5px;
}
.write-outline::-webkit-scrollbar-track {
  background-color: transparent;
  margin-top: 7px;
  margin-bottom: 7px;
}
.write-outline::-webkit-scrollbar-thumb {
  background-color: #D7D7D7;
  border-radius: 5px;
}
.write-outline .title-cnt img {
  width: 50px;
  margin-right: 8px;
}
.write-outline .title-cnt .writing-tip {
  display: inline-block;
  color: #333;
  font-size: 16px;
  font-weight: 700;
  margin-right: 10px;
}
@media screen and (max-width: 1240px) {
  .write-outline .title-cnt img {
    width: 4.0322580645vw;
    margin-right: 0.6451612903vw;
  }
  .write-outline .title-cnt .writing-tip {
    font-size: 1.2903225806vw;
  }
}
.write-outline .feedback-wrap {
  margin-bottom: 30px;
  padding: 30px;
  border-radius: 16px;
  border: 1px solid #E8E8E8;
  background-color: #FFF;
  box-shadow: 3px 3px 14px 0 rgba(0, 0, 0, 0.09);
}
@media screen and (max-width: 1240px) {
  .write-outline .feedback-wrap {
    width: 98.3870967742vw;
    margin-bottom: 2.4193548387vw;
    padding: 2.4193548387vw;
    border-radius: 1.2903225806vw;
    box-shadow: none;
  }
}
.write-outline .feedback-wrap .badge-report {
  width: auto;
  max-width: 100%;
  height: 30px;
  padding: 0 10px;
}
.write-outline .feedback-wrap .badge-report + .badge-report {
  margin-left: 10px;
}
@media screen and (max-width: 1240px) {
  .write-outline .feedback-wrap .badge-report {
    height: 2.4193548387vw;
    padding: 0 0.8064516129vw;
    border-radius: 0.4032258065vw;
    font-size: 1.0483870968vw;
  }
  .write-outline .feedback-wrap .badge-report + .badge-report {
    margin-left: 0.8064516129vw;
  }
}
.write-outline .feedback-wrap .feedback-content {
  display: flex;
  margin-top: 20px;
}
.write-outline .feedback-wrap .feedback-content .feedback {
  width: 50%;
}
.write-outline .feedback-wrap .feedback-content .feedback + .feedback {
  margin-left: 20px;
}
.write-outline .feedback-wrap .feedback-content .feedback + .feedback span {
  margin-left: 20px;
}
.write-outline .feedback-wrap .feedback-content .feedback + .feedback .txt {
  padding-left: 20px;
  border-left: 1px solid #D7D7D7;
}
.write-outline .feedback-wrap .feedback-content .feedback .txt {
  margin-top: 12px;
  font-size: 15px;
}
@media screen and (max-width: 1240px) {
  .write-outline .feedback-wrap .feedback-content {
    margin-top: 1.6129032258vw;
  }
  .write-outline .feedback-wrap .feedback-content .feedback + .feedback {
    margin-left: 1.6129032258vw;
  }
  .write-outline .feedback-wrap .feedback-content .feedback + .feedback span {
    margin-left: 1.6129032258vw;
  }
  .write-outline .feedback-wrap .feedback-content .feedback + .feedback .txt {
    padding-left: 1.6129032258vw;
  }
  .write-outline .feedback-wrap .feedback-content .feedback .txt {
    margin-top: 0.9677419355vw;
    font-size: 1.2096774194vw;
  }
}
.write-outline .feedback-wrap .feedback-table {
  border-top: 1px solid #757575;
}
.write-outline .feedback-wrap .feedback-table li {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e8e8e8;
}
.write-outline .feedback-wrap .feedback-table li.select-item {
  border-bottom: 0;
}
.write-outline .feedback-wrap .feedback-table .item-grade-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 156px;
  height: 100%;
}
.write-outline .feedback-wrap .feedback-table .item-grade-wrap span {
  margin: 0;
}
.write-outline .feedback-wrap .feedback-table .item-grade-wrap .select-wrap .select-btn {
  min-width: 83px;
  font-size: 20px;
  font-weight: 700;
}
.write-outline .feedback-wrap .feedback-table .item-grade-wrap .grade {
  font-size: 30px;
  font-weight: 700;
}
@media screen and (max-width: 1240px) {
  .write-outline .feedback-wrap .feedback-table .item-grade-wrap {
    gap: 0.9677419355vw;
    min-width: 12.5vw;
  }
  .write-outline .feedback-wrap .feedback-table .item-grade-wrap .select-wrap .select-btn {
    min-width: 6.6935483871vw;
    font-size: 1.6129032258vw;
  }
  .write-outline .feedback-wrap .feedback-table .item-grade-wrap .grade {
    font-size: 2.4193548387vw;
  }
}
.write-outline .feedback-wrap .feedback-table .feedback-comment-wrap {
  display: flex;
  gap: 20px;
  padding: 15px 20px;
  border-left: 1px solid #e8e8e8;
}
@media screen and (max-width: 1240px) {
  .write-outline .feedback-wrap .feedback-table .feedback-comment-wrap {
    width: 80.6451612903vw;
    gap: 1.6129032258vw;
    padding: 1.2096774194vw 1.6129032258vw;
  }
}
.write-outline .feedback-wrap .feedback-table .feedback-comment-wrap .feedback {
  width: 482px;
}
.write-outline .feedback-wrap .feedback-table .feedback-comment-wrap .feedback .textarea-wrap {
  margin-top: 10px;
  max-width: 482px;
}
.write-outline .feedback-wrap .feedback-table .feedback-comment-wrap .feedback .textarea-wrap textarea, .write-outline .feedback-wrap .feedback-table .feedback-comment-wrap .feedback .textarea-wrap::after {
  max-width: 482px;
  height: auto;
  min-height: 92px;
}
@media screen and (max-width: 1240px) {
  .write-outline .feedback-wrap .feedback-table .feedback-comment-wrap .feedback .textarea-wrap {
    margin-top: 0.8064516129vw;
    max-width: 38.8709677419vw;
  }
  .write-outline .feedback-wrap .feedback-table .feedback-comment-wrap .feedback .textarea-wrap textarea, .write-outline .feedback-wrap .feedback-table .feedback-comment-wrap .feedback .textarea-wrap::after {
    max-width: 38.8709677419vw;
    min-height: 7.4193548387vw;
  }
}
.write-outline .feedback-wrap .feedback-table .feedback-comment-wrap .feedback .show-feedback {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.4;
}
@media screen and (max-width: 1240px) {
  .write-outline .feedback-wrap .feedback-table .feedback-comment-wrap .feedback .show-feedback {
    margin-top: 0.8064516129vw;
    font-size: 1.2096774194vw;
  }
}

.writing-contents {
  display: flex;
  justify-content: center;
  gap: 10px;
  max-width: 1240px;
  margin-bottom: 30px;
}
@media screen and (max-width: 1240px) {
  .writing-contents {
    gap: 0.8064516129vw;
    max-width: 100vw;
    margin-bottom: 2.4193548387vw;
    font-size: 1.2903225806vw;
    border-radius: 1.2903225806vw;
  }
}
.writing-contents .left-area-wrap {
  width: 605px;
  height: 100vh;
  flex-shrink: 0;
}
@media screen and (max-width: 1240px) {
  .writing-contents .left-area-wrap {
    width: 48.7903225806vw;
  }
}
.writing-contents .left-area {
  width: 605px;
  overflow-y: auto;
  margin-top: 20px;
  background-color: #fff;
}
@media screen and (max-width: 1240px) {
  .writing-contents .left-area {
    width: 48.7903225806vw;
    margin-top: 1.2096774194vw;
    border-radius: 1.2903225806vw;
  }
}
.writing-contents .left-area .writing-list-box {
  height: 100%;
  background-color: #fff;
}
.writing-contents .left-area .writing-list-box .mode-btn {
  margin-bottom: 0;
}
.writing-contents .left-area.is-fixed {
  position: fixed;
  top: 0px;
  height: 100vh;
}
@media screen and (max-width: 1023px) {
  .writing-contents .left-area.is-fixed {
    top: 50px;
  }
}
.writing-contents .right-area-wrap {
  flex: 1;
  width: 605px;
}
@media screen and (max-width: 1240px) {
  .writing-contents .right-area-wrap {
    width: 48.7903225806vw;
  }
}
.writing-contents .right-area {
  width: 605px;
  padding: 20px;
  margin-top: 20px;
  border-radius: 16px;
  border: 1px solid #E8E8E8;
}
@media screen and (max-width: 1240px) {
  .writing-contents .right-area {
    width: 48.7903225806vw;
    padding: 1.2096774194vw;
    margin-top: 1.2096774194vw;
    border-radius: 1.2903225806vw;
  }
}
.writing-contents .right-area .no-data-box {
  border: 0;
  height: 100%;
}
.writing-contents .right-area .no-data-box h3 {
  margin-top: 30px;
  font-size: 26px;
  font-weight: 700;
}
.writing-contents .right-area .no-data-box .noti-txt {
  margin-top: 20px;
}
.writing-contents .right-area .no-data-box h1 {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 18px;
}
.writing-contents .right-area .no-data-box .btn-wrap button {
  width: 180px;
  height: 50px;
  font-size: 16px;
}
@media screen and (max-width: 1240px) {
  .writing-contents .right-area .no-data-box {
    margin-top: 2.4193548387vw;
    padding: 7.6612903226vw 2.4193548387vw;
  }
  .writing-contents .right-area .no-data-box h3 {
    margin-top: 2.4193548387vw;
    font-size: 2.0967741935vw;
  }
  .writing-contents .right-area .no-data-box .noti-txt {
    margin-top: 1.6129032258vw;
  }
  .writing-contents .right-area .no-data-box h1 {
    font-size: 1.7741935484vw;
    margin-bottom: 1.4516129032vw;
  }
  .writing-contents .right-area .no-data-box p {
    font-size: 1.4516129032vw;
  }
  .writing-contents .right-area .no-data-box .btn-wrap button {
    width: 14.5161290323vw;
    height: 4.0322580645vw;
    font-size: 1.2903225806vw;
  }
}
.writing-contents .right-area + .btn-wrap {
  gap: 10px;
  width: 605px;
  margin-top: 20px;
}
@media screen and (max-width: 1240px) {
  .writing-contents .right-area + .btn-wrap {
    gap: 0.8064516129vw;
    width: 48.7903225806vw;
    margin-top: 1.6129032258vw;
  }
}
.writing-contents .right-area .table-wrap .textarea-wrap {
  max-width: 331px;
}
.writing-contents .right-area .table-wrap .textarea-wrap::after,
.writing-contents .right-area .table-wrap .textarea-wrap textarea {
  max-width: 331px;
}
@media screen and (max-width: 1240px) {
  .writing-contents .right-area .table-wrap .textarea-wrap {
    max-width: 26.6935483871vw;
  }
  .writing-contents .right-area .table-wrap .textarea-wrap::after,
  .writing-contents .right-area .table-wrap .textarea-wrap textarea {
    max-width: 26.6935483871vw;
  }
}
.writing-contents .right-area .table-wrap table td[colspan="2"] .textarea-wrap {
  max-width: 430px;
}
.writing-contents .right-area .table-wrap table td[colspan="2"] .textarea-wrap::after,
.writing-contents .right-area .table-wrap table td[colspan="2"] .textarea-wrap textarea {
  max-width: 430px;
}
@media screen and (max-width: 1240px) {
  .writing-contents .right-area .table-wrap table td[colspan="2"] .textarea-wrap {
    max-width: 34.6774193548vw;
  }
  .writing-contents .right-area .table-wrap table td[colspan="2"] .textarea-wrap::after,
  .writing-contents .right-area .table-wrap table td[colspan="2"] .textarea-wrap textarea {
    max-width: 34.6774193548vw;
  }
}
.writing-contents .writing-list .table-wrap table {
  border-top: 10px solid #e8e8e8;
  border-bottom: 10px solid #e8e8e8;
}
@media screen and (max-width: 1240px) {
  .writing-contents .writing-list .table-wrap table {
    border-top: 0.8064516129vw solid #e8e8e8;
    border-bottom: 0.8064516129vw solid #e8e8e8;
  }
}
.writing-contents .table-wrap {
  margin-top: 10px;
}
.writing-contents .table-wrap::-webkit-scrollbar {
  width: 5px;
}
.writing-contents .table-wrap::-webkit-scrollbar-thumb {
  background-color: #D9D9D9;
  border-radius: 10px;
}
@media screen and (max-width: 1240px) {
  .writing-contents .table-wrap {
    margin-top: 0.8064516129vw;
  }
  .writing-contents .table-wrap::-webkit-scrollbar {
    width: 0.4032258065vw;
  }
}
.writing-contents .table-wrap table {
  width: 100%;
  border-collapse: collapse;
  background-color: #FFF;
}
.writing-contents .table-wrap table th,
.writing-contents .table-wrap table td {
  border: 1px solid #D7D7D7;
  padding: 12px 20px;
  text-align: center;
}
.writing-contents .table-wrap table th {
  border-top: 1px solid #333;
  height: 60px;
}
.writing-contents .table-wrap table td {
  height: 50px;
  font-size: 15px;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: -0.2px;
  word-break: break-all;
}
.writing-contents .table-wrap table .highlight {
  background-color: #E7F4FF;
}
.writing-contents .table-wrap table .no-padding {
  padding: 0 0;
}
.writing-contents .table-wrap table th:first-child,
.writing-contents .table-wrap table td:first-child {
  border-left: none;
}
.writing-contents .table-wrap table th:last-child,
.writing-contents .table-wrap table td:last-child {
  border-right: none;
}
.writing-contents .table-wrap table tr td:last-child {
  text-align: left;
}
@media screen and (max-width: 1240px) {
  .writing-contents .table-wrap table td {
    padding: 0.9677419355vw 1.6129032258vw;
  }
  .writing-contents .table-wrap table th {
    height: 4.8387096774vw;
    padding: 0.9677419355vw 1.6129032258vw;
    font-size: 1.2903225806vw;
  }
  .writing-contents .table-wrap table td {
    height: 4.0322580645vw;
    font-size: 1.2096774194vw;
    letter-spacing: -0.0161290323vw;
  }
}
.writing-contents .table-wrap table .feedback-box {
  position: relative;
  padding: 10px 10px 10px 76px;
  color: #7e7e7e;
  font-size: 15px;
  line-height: 24px;
  text-align: left;
  background-color: #F9F9F9;
  text-align: justify !important;
}
.writing-contents .table-wrap table .feedback-box::after {
  position: absolute;
  content: "AI 피드백";
  height: 20px;
  padding: 0 5px;
  line-height: 20px;
  top: 12px;
  left: 10px;
  color: #108eff;
  font-size: 12px;
  font-weight: 500;
  background-color: #fff;
  border: 1px solid #108eff;
  border-radius: 6px;
}
@media screen and (max-width: 1240px) {
  .writing-contents .table-wrap table .feedback-box {
    padding: 0.8064516129vw 0.8064516129vw 0.8064516129vw 6.1290322581vw;
    font-size: 1.2096774194vw;
    line-height: 1.935483871vw;
  }
  .writing-contents .table-wrap table .feedback-box::after {
    height: 1.6129032258vw;
    padding: 0 0.4032258065vw;
    line-height: 1.6129032258vw;
    top: 0.9677419355vw;
    left: 0.8064516129vw;
    font-size: 0.9677419355vw;
    border-radius: 0.4838709677vw;
  }
}
.writing-contents .chatting-wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: calc(100% - 45px);
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid #D7D7D7;
}
@media screen and (max-width: 1240px) {
  .writing-contents .chatting-wrap {
    padding: 1.6129032258vw;
    border-radius: 0.6451612903vw;
  }
}
.writing-contents .chatting-wrap .chatting-list {
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.writing-contents .chatting-wrap .chatting-list::-webkit-scrollbar {
  display: none;
}
.writing-contents .chatting-wrap .chatting-list .chat-left {
  display: flex;
  gap: 14px;
}
.writing-contents .chatting-wrap .chatting-list .chat-left .img {
  display: flex;
  align-items: center;
  width: 66px;
  height: 66px;
  background-color: #E7F4FF;
  border-radius: 50%;
}
.writing-contents .chatting-wrap .chatting-list .chat-left .img img {
  width: 100%;
}
.writing-contents .chatting-wrap .chatting-list .chat-left p {
  max-width: 350px;
  width: 90%;
  padding: 12px;
  border-radius: 0 14px 14px 14px;
  background-color: #F5F5F5;
  align-self: flex-start;
}
.writing-contents .chatting-wrap .chatting-list .chat-right {
  align-self: flex-end;
  max-width: 320px;
  padding: 12px;
  color: #fff;
  font-size: 15px;
  background-color: #108EFF;
  border-radius: 14px 14px 0 14px;
}
.writing-contents .chatting-wrap .chatting-list .chat-left p,
.writing-contents .chatting-wrap .chatting-list .chat-right p {
  text-align: left;
  font-size: 15px;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: -0.2px;
}
@media screen and (max-width: 1240px) {
  .writing-contents .chatting-wrap .chatting-list {
    margin-bottom: 1.6129032258vw;
    gap: 1.6129032258vw;
  }
  .writing-contents .chatting-wrap .chatting-list .chat-left {
    gap: 1.1290322581vw;
  }
  .writing-contents .chatting-wrap .chatting-list .chat-left .img {
    width: 5.3225806452vw;
    height: 5.3225806452vw;
  }
  .writing-contents .chatting-wrap .chatting-list .chat-left p {
    max-width: 28.2258064516vw;
    padding: 0.9677419355vw;
  }
  .writing-contents .chatting-wrap .chatting-list .chat-right {
    max-width: 25.8064516129vw;
    padding: 0.9677419355vw;
    font-size: 1.2096774194vw;
    border-radius: 1.1290322581vw 1.1290322581vw 0 1.1290322581vw;
  }
  .writing-contents .chatting-wrap .chatting-list .chat-left p,
  .writing-contents .chatting-wrap .chatting-list .chat-right p {
    font-size: 1.2096774194vw;
    letter-spacing: -0.0161290323vw;
  }
}
.writing-contents .chatting-wrap .chat-input {
  width: 100%;
  height: 48px;
  padding: 0 10px 0 20px;
  gap: 20px;
  border-radius: 8px;
  border: 1px solid #D7D7D7;
  background-color: #F5F5F5;
}
.writing-contents .chatting-wrap .chat-input input[type=text] {
  width: 100%;
  height: 24px;
  border: none;
  padding: 0;
  background-color: #F5F5F5;
}
.writing-contents .chatting-wrap .chat-input input[type=text]::placeholder {
  color: #A4A4A4;
  font-size: 15px;
  font-weight: 400;
  line-height: 160%;
}
.writing-contents .chatting-wrap .chat-input input[type=text]:focus {
  outline: none;
  border-radius: 0;
}
@media screen and (max-width: 1240px) {
  .writing-contents .chatting-wrap .chat-input {
    height: 3.8709677419vw;
    padding: 0 0.8064516129vw 0 1.6129032258vw;
    gap: 1.6129032258vw;
    border-radius: 0.6451612903vw;
  }
  .writing-contents .chatting-wrap .chat-input input[type=text] {
    height: 1.935483871vw;
  }
  .writing-contents .chatting-wrap .chat-input input[type=text]::placeholder {
    font-size: 1.2096774194vw;
  }
  .writing-contents .chatting-wrap .chat-input .send img {
    width: 3.2258064516vw;
  }
}
.writing-contents .handwriting-box {
  width: 100%;
  height: auto;
  min-height: 500px;
  margin-top: 10px;
  background-color: #f5f5f5;
  background-image: url(../../images/common/ico_image_file.svg);
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px;
}
@media screen and (max-width: 1240px) {
  .writing-contents .handwriting-box {
    min-height: 40.3225806452vw;
    margin-top: 0.8064516129vw;
    border-radius: 0.6451612903vw;
  }
}
.writing-contents .student-writing-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.writing-contents .student-writing-wrap input {
  margin-bottom: 10px;
  padding-left: 10px;
  flex-shrink: 0;
}
.writing-contents .student-writing-wrap .textarea-wrap {
  flex-grow: 1;
  display: grid;
  max-width: 563px;
}
.writing-contents .student-writing-wrap .textarea-wrap > textarea, .writing-contents .student-writing-wrap .textarea-wrap::after {
  width: 563px;
  min-height: 500px;
}
@media screen and (max-width: 1240px) {
  .writing-contents .student-writing-wrap input {
    margin-bottom: 0.8064516129vw;
    padding-left: 0.8064516129vw;
    font-size: 1.1290322581vw;
    border-radius: 0.7258064516vw;
  }
  .writing-contents .student-writing-wrap .textarea-wrap {
    max-width: 45.4032258065vw;
  }
  .writing-contents .student-writing-wrap .textarea-wrap > textarea, .writing-contents .student-writing-wrap .textarea-wrap::after {
    max-width: 45.4032258065vw;
    min-height: 40.3225806452vw;
  }
}
.writing-contents + .btn-wrap {
  margin-left: 625px;
}
@media screen and (max-width: 1240px) {
  .writing-contents + .btn-wrap {
    gap: 0.8064516129vw;
    margin-left: 50.4032258065vw;
  }
}

.writing-preview-wrap {
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #D7D7D7;
  box-shadow: 1px 2px 7px rgba(0, 0, 0, 0.09);
}
@media screen and (max-width: 1240px) {
  .writing-preview-wrap {
    padding: 2.4193548387vw;
    border-radius: 0.6451612903vw;
    border: 1px solid #e8e8e8;
    box-shadow: 1px 2px 7px rgba(0, 0, 0, 0.09);
  }
}
.writing-preview-wrap .writing-contents {
  margin: 0;
}
.writing-preview-wrap .writing-contents .table-wrap {
  margin: 0;
}

.writing-preview-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1240px;
  padding: 60px 0;
  background: linear-gradient(to bottom, transparent 39px, #CDF2FF 39px) 0 0/100% 40px repeat-y, linear-gradient(to right, transparent 39px, #CDF2FF 39px) 0 0/40px 100% repeat-x #F4FAFF;
  border: 1px solid #CDF2FF;
}
@media screen and (max-width: 1240px) {
  .writing-preview-box {
    max-width: 100vw;
    padding: 4.8387096774vw 0;
  }
  .writing-preview-box + .btn-wrap {
    gap: 0.8064516129vw;
  }
}
@media screen and (max-width: 1024px) {
  .writing-preview-box {
    background: linear-gradient(to bottom, transparent 29px, #CDF2FF 29px) 0 0/100% 30px repeat-y, linear-gradient(to right, transparent 29px, #CDF2FF 29px) 0 0/30px 100% repeat-x #F4FAFF;
    border: 1px solid #CDF2FF;
  }
}
@media screen and (max-width: 600px) {
  .writing-preview-box {
    background: linear-gradient(to bottom, transparent 19px, #CDF2FF 19px) 0 0/100% 20px repeat-y, linear-gradient(to right, transparent 19px, #CDF2FF 19px) 0 0/20px 100% repeat-x #F4FAFF;
    border: 1px solid #CDF2FF;
  }
}

.writing-preview {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 30px;
  font-family: "RIDIBatang", serif;
  color: #000;
  background-color: #fff;
  border: 3px solid #A7D5FF;
  border-radius: 50px;
}
.writing-preview .writing-tit {
  text-align: center;
  font-size: 30px;
}
.writing-preview .writing-txt {
  margin-top: 15px;
  font-size: 24px;
}
@media screen and (max-width: 1240px) {
  .writing-preview {
    max-width: 87.0967741935vw;
    padding: 2.4193548387vw;
    border: 0.2419354839vw solid #A7D5FF;
    border-radius: 4.0322580645vw;
  }
  .writing-preview .writing-tit {
    font-size: 2.4193548387vw;
  }
  .writing-preview .writing-txt {
    margin-top: 1.2096774194vw;
    font-size: 1.935483871vw;
  }
}

/* 데이트피커 */
.ui-widget.ui-widget-content {
  width: 312px;
  min-height: 340px;
  padding: 20px;
  font-family: "Noto Sans KR";
  border: 1px solid #D7D7D7;
  border-radius: 20px;
  box-shadow: 3px 3px 14px 0 rgba(0, 0, 0, 0.09);
  z-index: 2 !important;
}

.ui-datepicker .ui-widget-header {
  font-size: 14px;
  font-weight: 500;
  background-color: #fff;
  border: 0;
}
.ui-datepicker .ui-widget-header .ui-icon {
  background-position: center;
}
.ui-datepicker .ui-icon-circle-triangle-e {
  background-image: url(../../images/common/ico_arrow_right.svg);
}
.ui-datepicker .ui-icon-circle-triangle-w {
  background-image: url(../../images/common/ico_arrow_left.svg);
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  border: 1px solid #D7D7D7;
  border-radius: 8px;
  cursor: pointer;
}
.ui-datepicker .ui-datepicker-title {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
}
.ui-datepicker .ui-datepicker-year::after {
  content: ".";
  margin-left: 2px;
}
.ui-datepicker .ui-datepicker-month::after {
  content: ".";
  margin-left: 2px;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  top: 0;
  width: 32px;
  height: 32px;
}
.ui-datepicker table {
  margin-top: 16px;
}
.ui-datepicker td {
  width: 40px;
  height: 40px;
}

.ui-state-default, .ui-widget-content .ui-state-default {
  text-align: center;
  color: #333;
  font-size: 14px;
  background: transparent;
  border: 0;
}

.ui-state-active, .ui-widget-content .ui-state-active {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: #fff;
  background-color: #108EFF;
  border: 0;
  border-radius: 50%;
}

.no-data-box {
  flex-direction: column;
  margin-top: 30px;
  padding: 95px 30px;
  border: 1px solid #D7D7D7;
  border-radius: 13px;
}
.no-data-box.no-border {
  border: 0;
}
.no-data-box .noti-character img {
  width: 145px;
}
.no-data-box .icon + p {
  margin-top: 20px;
}
.no-data-box h5 {
  margin: 20px 0 10px;
  font-size: 26px;
  font-weight: 700;
}
.no-data-box p {
  font-size: 18px;
  letter-spacing: -0.2px;
}
.no-data-box .btn-defalut {
  width: 180px;
}
@media screen and (max-width: 1240px) {
  .no-data-box {
    margin-top: 2.4193548387vw;
    padding: 7.6612903226vw 2.4193548387vw;
    border-radius: 1.0483870968vw;
  }
  .no-data-box .noti-character img {
    width: 11.6935483871vw;
  }
  .no-data-box .icon img {
    width: 4.0322580645vw;
  }
  .no-data-box .icon + p {
    margin-top: 1.6129032258vw;
  }
  .no-data-box h5 {
    margin: 1.6129032258vw 0 0.8064516129vw;
    font-size: 2.0967741935vw;
  }
  .no-data-box p {
    font-size: 1.4516129032vw;
    letter-spacing: -0.0161290323vw;
  }
  .no-data-box .btn-defalut {
    width: 14.0322580645vw;
    height: 3.2258064516vw;
    font-size: 1.2096774194vw;
    border-radius: 0.6451612903vw;
  }
}

.notice-box {
  display: flex;
  gap: 15px;
  padding: 20px 25px;
  margin-top: 24px;
  background-color: #F8FCFF;
  border: 1px solid #108EFF;
  border-radius: 13px;
}
.notice-box .noti-character {
  display: flex;
  align-items: center;
  justify-content: center;
}
.notice-box .noti-character img {
  width: 112px;
}
.notice-box h4 {
  line-height: 1.2;
  margin-top: 5px;
  font-size: 18px;
  font-weight: 700;
}
.notice-box h4 + p {
  margin-top: 10px;
}
.notice-box p {
  color: #7E7E7E;
  font-size: 16px;
}
.notice-box p + p {
  margin-top: 10px;
}
.notice-box p.noti-txt {
  display: flex;
}
.notice-box p.noti-txt img {
  margin-right: 5px;
}
@media screen and (max-width: 1240px) {
  .notice-box {
    gap: 1.2096774194vw;
    padding: 1.6129032258vw 2.0161290323vw;
    margin-top: 1.935483871vw;
    border-radius: 1.0483870968vw;
  }
  .notice-box .noti-character img {
    width: 9.0322580645vw;
  }
  .notice-box h4 {
    margin-top: 0.4032258065vw;
    font-size: 1.4516129032vw;
  }
  .notice-box h4 + p {
    margin-top: 0.8064516129vw;
  }
  .notice-box p {
    font-size: 1.2903225806vw;
  }
  .notice-box p img {
    width: 1.4516129032vw;
  }
  .notice-box p + p {
    margin-top: 0.8064516129vw;
  }
  .notice-box p.noti-txt img {
    margin-right: 0.4032258065vw;
  }
}

.toast-pop {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  position: fixed;
  bottom: -100px;
  left: 50%;
  transform: translate(-50%, 0);
  padding: 15px 20px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 12px;
  color: #fff;
  letter-spacing: -0.2px;
  transition: opacity 0.5s, bottom 0.5s;
  z-index: 11;
}
.toast-pop.active {
  opacity: 100%;
  bottom: 30px;
}
.toast-pop .tit {
  margin-bottom: 5px;
  font-size: 18px;
  font-weight: 700;
}
.toast-pop .txt {
  font-size: 16px;
}
@media screen and (max-width: 767px) {
  .toast-pop {
    gap: 1.3037809648vw;
    bottom: -13.037809648vw;
    padding: 1.9556714472vw 2.6075619296vw;
    border-radius: 1.5645371578vw;
    letter-spacing: -0.0260756193vw;
  }
  .toast-pop.active {
    bottom: 3.9113428944vw;
  }
  .toast-pop .tit {
    margin-bottom: 0.6518904824vw;
    font-size: 2.3468057366vw;
  }
  .toast-pop .txt {
    font-size: 2.0860495437vw;
  }
  .toast-pop img {
    width: 3.1290743155vw;
  }
}

.project-list-wrap .que-class-list {
  position: relative;
}
@media screen and (max-width: 1240px) {
  .project-list-wrap .que-class-list {
    border-radius: 1.0483870968vw;
    font-size: 1.2903225806vw;
  }
  .project-list-wrap .que-class-list + .que-class-list {
    margin-top: 0.8064516129vw;
  }
}
.project-list-wrap .que-class-list .btn-wrap {
  position: absolute;
  top: 13px;
  right: 50px;
  padding: 0;
  height: 34px;
  font-size: 14px;
  cursor: default;
}
.project-list-wrap .que-class-list .btn-wrap button:disabled {
  background-color: #E8E8E8;
  border: 1px solid #d9d9d9;
  cursor: default;
}
.project-list-wrap .que-class-list .btn-wrap button:disabled:hover i.share {
  background-image: url(../../images/common/ico_share.png);
}
.project-list-wrap .que-class-list .btn-wrap span {
  cursor: default;
}
@media screen and (max-width: 1240px) {
  .project-list-wrap .que-class-list .btn-wrap {
    top: 0.9677419355vw;
    right: 4.0322580645vw;
    gap: 0.8064516129vw;
    height: 2.7419354839vw;
    font-size: 1.1290322581vw;
  }
  .project-list-wrap .que-class-list .btn-wrap .btn-icon {
    width: 2.1774193548vw;
    height: 2.1774193548vw;
  }
  .project-list-wrap .que-class-list .btn-wrap .btn-icon i {
    left: 0.0806451613vw;
    width: 1.1290322581vw;
    height: 1.1290322581vw;
  }
}
.project-list-wrap .que-class-list .que-class-btn {
  height: 60px;
}
.project-list-wrap .que-class-list .que-class-btn.disabled {
  background-color: #F5F5F5;
  border-radius: 12px;
  cursor: pointer !important;
}
.project-list-wrap .que-class-list .que-class-btn.disabled.active {
  border-radius: 12px 12px 0 0;
}
.project-list-wrap .que-class-list .que-class-btn.disabled + .que-class-cnt {
  background-color: #F5F5F5;
  border-radius: 0 0 12px 12px;
}
.project-list-wrap .que-class-list .que-class-btn .que-class-tit {
  width: 700px;
  color: #000;
  font-weight: 500;
}
.project-list-wrap .que-class-list .que-class-btn .que-class-tit .badge-type02 {
  width: 46px;
  background-color: #fff;
}
@media screen and (max-width: 1240px) {
  .project-list-wrap .que-class-list .que-class-btn {
    height: 4.8387096774vw;
    padding: 0 1.2096774194vw;
  }
  .project-list-wrap .que-class-list .que-class-btn:disabled {
    border-radius: 0.9677419355vw;
  }
  .project-list-wrap .que-class-list .que-class-btn:disabled.active {
    border-radius: 0.9677419355vw 0.9677419355vw 0 0;
  }
  .project-list-wrap .que-class-list .que-class-btn:disabled + .que-class-cnt {
    background-color: #F5F5F5;
    border-radius: 0 0 0.9677419355vw 0.9677419355vw;
  }
  .project-list-wrap .que-class-list .que-class-btn .que-class-tit {
    width: 56.4516129032vw;
    font-size: 1.1290322581vw;
  }
  .project-list-wrap .que-class-list .que-class-btn .que-class-tit .badge-type02 {
    width: 3.7096774194vw;
    min-width: 3.2258064516vw;
    height: 1.7741935484vw;
    padding: 0 0.564516129vw;
    margin-right: 0.7258064516vw;
    font-size: 0.9677419355vw;
    border-radius: 0.4838709677vw;
  }
  .project-list-wrap .que-class-list .que-class-btn .acc-arrow {
    width: 0.8870967742vw;
    height: 0.4838709677vw;
  }
}
.project-list-wrap .que-class-list .que-class-cnt {
  cursor: default;
}
.project-list-wrap .que-class-list .que-class-cnt .que-class-item {
  align-items: center;
  margin: 0;
  cursor: default;
}
.project-list-wrap .que-class-list .que-class-cnt .class-item-tit {
  width: auto;
}
.project-list-wrap .que-class-list .que-class-cnt .class-item-tit .badge-type02 {
  min-width: 35px;
}
.project-list-wrap .que-class-list .que-class-cnt .class-item-tit .class-item-txt {
  width: auto;
  max-width: 740px;
  padding-right: 2px;
  font-size: 15px;
}
@media screen and (max-width: 1240px) {
  .project-list-wrap .que-class-list .que-class-cnt {
    padding: 0.8064516129vw 0;
  }
  .project-list-wrap .que-class-list .que-class-cnt .que-class-item {
    padding: 0.4032258065vw 0 0.6451612903vw 0;
  }
  .project-list-wrap .que-class-list .que-class-cnt .class-item-tit {
    padding-left: 2.4193548387vw;
  }
  .project-list-wrap .que-class-list .que-class-cnt .class-item-tit .badge-type02 {
    min-width: 2.8225806452vw;
    height: 1.7741935484vw;
    padding: 0 0.564516129vw;
    margin-right: 0.7258064516vw;
    font-size: 0.9677419355vw;
    border-radius: 0.4838709677vw;
  }
  .project-list-wrap .que-class-list .que-class-cnt .class-item-tit .class-item-txt {
    max-width: 59.6774193548vw;
    padding-right: 0.1612903226vw;
    font-size: 1.2096774194vw;
  }
}
.project-list-wrap .que-class-list .class-item-state {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 261px;
  margin-right: 20px;
  font-size: 14px;
}
@media screen and (max-width: 1240px) {
  .project-list-wrap .que-class-list .class-item-state {
    gap: 0.8064516129vw;
    min-width: 21.0483870968vw;
    margin-right: 1.6129032258vw;
    font-size: 1.1290322581vw;
  }
}
.project-list-wrap .que-class-list .badge-report.cancel-btn {
  gap: 4px;
  width: auto;
  padding: 0 10px 0 27px;
  line-height: 26px;
  color: #ff569a;
  font-size: 12px;
  background-image: url(../../images/common/ico-cancel.svg);
  background-repeat: no-repeat;
  background-size: 14px;
  background-position: 10px center;
  border: 1px solid #ff569a;
  border-radius: 8px;
}
.project-list-wrap .que-class-list .badge-report.cancel-btn:disabled {
  background-image: url(../../images/common/ico-cancel-off.svg);
}
.project-list-wrap .que-class-list .badge-report.report-btn {
  width: auto;
  max-width: auto;
  padding: 0 10px;
  line-height: 26px;
  background-color: #333;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  border-radius: 8px;
}
.project-list-wrap .que-class-list .badge-report:disabled {
  color: #B2B2B2;
  background-color: #E8E8E8;
  border: 0;
}
@media screen and (max-width: 1240px) {
  .project-list-wrap .que-class-list .badge-report {
    max-width: unset;
    height: 2.0967741935vw;
    font-size: 1.0483870968vw;
    border-radius: 0.4032258065vw;
  }
  .project-list-wrap .que-class-list .badge-report.cancel-btn {
    gap: 0.3225806452vw;
    padding: 0 0.8064516129vw 0 2.0161290323vw;
    line-height: 2.0967741935vw;
    font-size: 0.9677419355vw;
    background-size: 1.1290322581vw;
    background-position: 0.6451612903vw center;
    border-radius: 0.6451612903vw;
  }
  .project-list-wrap .que-class-list .badge-report.report-btn {
    padding: 0 0.8064516129vw;
    line-height: 2.0967741935vw;
    font-size: 0.9677419355vw;
    border-radius: 0.6451612903vw;
  }
}
.project-list-wrap .que-class-list .date {
  font-size: 14px;
}
.project-list-wrap .que-class-list .writing-order .active {
  color: #108EFF;
  font-weight: 700;
}

.writing-list-wrap {
  width: 100%;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid #E8E8E8;
}
@media screen and (max-width: 1240px) {
  .writing-list-wrap {
    padding: 1.2096774194vw;
    border-radius: 1.2903225806vw;
  }
}
.writing-list-wrap.preview-tab {
  padding: 0;
  border: 0;
}
.writing-list-wrap .scroll-list {
  overflow-y: auto;
  max-height: 300px;
  border: 1px solid #D7D7D7;
  border-radius: 16px;
}
.writing-list-wrap .scroll-list::-webkit-scrollbar {
  width: 5px;
}
.writing-list-wrap .scroll-list::-webkit-scrollbar-track {
  background-color: transparent;
  margin-top: 7px;
  margin-bottom: 7px;
}
.writing-list-wrap .scroll-list::-webkit-scrollbar-thumb {
  background-color: #D7D7D7;
  border-radius: 5px;
}
.writing-list-wrap .scroll-list.recommend-writing {
  width: 755px;
  max-height: 450px;
  margin-top: 10px;
}
.writing-list-wrap .scroll-list.recommend-writing .writing {
  display: inline-block;
  max-width: 550px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-right: 10px;
  padding-right: 2px;
}
.writing-list-wrap .scroll-list.recommend-writing .btn-type03.size-s {
  width: 43px;
  height: 26px;
  font-size: 12px;
  font-weight: 400;
}
.writing-list-wrap .scroll-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  padding: 0 20px;
  text-align: left;
}
.writing-list-wrap .scroll-list li:has(input[type=checkbox]:checked) {
  background-color: #E7F4FF;
  position: relative;
}
.writing-list-wrap .scroll-list li + li {
  border-top: 1px solid #D7D7D7;
}
.writing-list-wrap .scroll-list li input[type=checkbox] {
  width: 0;
  height: 0;
  position: unset;
}
.writing-list-wrap .scroll-list label {
  width: 100%;
  padding-top: 13px;
  padding-bottom: 13px;
}
.writing-list-wrap .info-text {
  text-align: left;
  margin-top: 10px;
  margin-bottom: 20px;
  line-height: 21px;
  color: #7E7E7E;
  font-size: 14px;
  letter-spacing: -0.2px;
}
.writing-list-wrap h3 {
  font-size: 20px;
  font-weight: 600;
}
.writing-list-wrap .txt {
  margin-top: 20px;
  font-size: 18px;
}
.writing-list-wrap .tab-list {
  display: flex;
  margin-left: 10px;
}
.writing-list-wrap .tab-list .tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 46px;
  color: #A4A4A4;
  font-size: 16px;
  background-color: #fff;
  border: 1px solid #D7D7D7;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
}
.writing-list-wrap .tab-list .tab.active {
  color: #fff;
  background-color: #108EFF;
  border: 1px solid #108EFF;
}
.writing-list-wrap .tab-list .tab span {
  font-size: 14px;
}
.writing-list-wrap .tab-list ~ .writing-list-box {
  display: none;
}
.writing-list-wrap .tab-list ~ .writing-preview-wrap {
  display: none;
}
@media screen and (max-width: 1240px) {
  .writing-list-wrap .tab-list {
    margin-left: 0.8064516129vw;
  }
  .writing-list-wrap .tab-list .tab {
    width: 8.3870967742vw;
    height: 3.7096774194vw;
    font-size: 1.2903225806vw;
    border-radius: 0.6451612903vw 0.6451612903vw 0 0;
  }
  .writing-list-wrap .tab-list .tab span {
    font-size: 1.1290322581vw;
  }
}
.writing-list-wrap .writing-list-box {
  overflow-y: auto;
  padding: 20px;
  min-height: 500px;
  max-height: calc(100vh - 125px);
  border: 1px solid #D7D7D7;
  border-radius: 10px;
}
.writing-list-wrap .writing-list-box.active {
  display: block;
}
.writing-list-wrap .writing-list-box::-webkit-scrollbar {
  width: 5px;
}
.writing-list-wrap .writing-list-box::-webkit-scrollbar-track {
  background-color: transparent;
  margin-top: 7px;
  margin-bottom: 7px;
}
.writing-list-wrap .writing-list-box::-webkit-scrollbar-thumb {
  background-color: #D7D7D7;
  border-radius: 5px;
}
.writing-list-wrap .writing-list-box:has(> .table-wrap) {
  border: 0;
  padding: 0;
}
.writing-list-wrap .writing-list-box:has(> .table-wrap) .table-wrap {
  margin-top: 0;
}
@media screen and (max-width: 1240px) {
  .writing-list-wrap .writing-list-box {
    padding: 1.6129032258vw;
    min-height: 40.3225806452vw;
    max-height: 87vh;
    border-radius: 0.8064516129vw;
  }
  .writing-list-wrap .writing-list-box::-webkit-scrollbar {
    width: 0.4032258065vw;
  }
  .writing-list-wrap .writing-list-box::-webkit-scrollbar-track {
    margin-top: 0.564516129vw;
    margin-bottom: 0.564516129vw;
  }
}
@media screen and (max-width: 1023px) {
  .writing-list-wrap .writing-list-box {
    max-height: 83vh;
  }
}
.writing-list-wrap .writing-list-box .flex-align-center:has(.writing-list-tit) {
  align-items: flex-start;
}
.writing-list-wrap .writing-list-box .writing-list-tit {
  width: 100%;
  font-weight: 700;
}
.writing-list-wrap .writing-list-box .writing-list-txt {
  margin-left: 10px;
  color: #7e7e7e;
  font-size: 14px;
  letter-spacing: -0.2px;
}
@media screen and (max-width: 1240px) {
  .writing-list-wrap .writing-list-box .writing-list-txt {
    margin-left: 0.8064516129vw;
    font-size: 1.1290322581vw;
    letter-spacing: -0.0161290323vw;
  }
}
.writing-list-wrap .writing-list-box .writing-list {
  text-align: left;
}
.writing-list-wrap .writing-list-box .writing-list > li {
  margin-top: 30px;
}
.writing-list-wrap .writing-list-box .writing-list .list-tit {
  font-size: 16px;
}
@media screen and (max-width: 1240px) {
  .writing-list-wrap .writing-list-box .writing-list > li {
    margin-top: 2.4193548387vw;
  }
  .writing-list-wrap .writing-list-box .writing-list .list-tit {
    font-size: 1.2903225806vw;
  }
  .writing-list-wrap .writing-list-box .writing-list .list-tit img {
    width: 1.2903225806vw;
  }
}
.writing-list-wrap .writing-list-box .writing-list .writing {
  padding: 10px 7px;
  margin-top: 10px;
  line-height: 1.5;
  font-size: 15px;
  border-top: 1px solid #333;
  border-bottom: 1px solid #D7D7D7;
  letter-spacing: -0.2px;
  word-break: break-all;
}
.writing-list-wrap .writing-list-box .writing-list .writing .key_point {
  display: flex;
}
.writing-list-wrap .writing-list-box .writing-list .writing .key {
  display: inline-block;
  word-break: keep-all;
  min-width: 40px;
  margin-right: 5px;
}
.writing-list-wrap .writing-list-box .writing-list .writing .point {
  color: #FF569A;
}
@media screen and (max-width: 1240px) {
  .writing-list-wrap .writing-list-box .writing-list .writing {
    padding: 0.8064516129vw 0.564516129vw;
    margin-top: 0.8064516129vw;
    font-size: 1.2096774194vw;
    letter-spacing: -0.0161290323vw;
  }
  .writing-list-wrap .writing-list-box .writing-list .writing .key {
    min-width: 3.2258064516vw;
    margin-right: 0.4032258065vw;
  }
}
.writing-list-wrap .writing-list-box .writing-list .writing .img-btn {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  margin-bottom: 5px;
}
.writing-list-wrap .writing-list-box .writing-list .writing .img-btn button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  font-size: 14px;
  color: #A4A4A4;
  background-color: #E8E8E8;
  border-radius: 4px;
}
.writing-list-wrap .writing-list-box .writing-list .writing .img-btn button.active {
  color: #fff;
  background-color: #108EFF;
}
@media screen and (max-width: 1240px) {
  .writing-list-wrap .writing-list-box .writing-list .writing .img-btn {
    gap: 0.3225806452vw;
    margin-bottom: 0.4032258065vw;
  }
  .writing-list-wrap .writing-list-box .writing-list .writing .img-btn button {
    width: 1.6129032258vw;
    height: 1.6129032258vw;
    font-size: 1.1290322581vw;
    border-radius: 0.3225806452vw;
  }
}
.writing-list-wrap .writing-list-box .writing-list .writing .data-box {
  width: 100%;
  padding: 20px;
  background-color: #F5F5F5;
  border-radius: 8px;
}
.writing-list-wrap .writing-list-box .writing-list .writing .data-box.img {
  height: 250px;
  padding: 0;
}
.writing-list-wrap .writing-list-box .writing-list .writing .data-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.writing-list-wrap .writing-list-box .writing-list .writing .data-box .file-tit {
  color: #A4A4A4;
}
.writing-list-wrap .writing-list-box .writing-list .writing .data-box a {
  display: block;
  color: #108EFF;
  text-decoration: underline;
  font-weight: 600;
}
@media screen and (max-width: 1240px) {
  .writing-list-wrap .writing-list-box .writing-list .writing .data-box {
    height: 8.064516129vw;
    padding: 1.6129032258vw;
    border-radius: 0.6451612903vw;
  }
  .writing-list-wrap .writing-list-box .writing-list .writing .data-box.img {
    height: 20.1612903226vw;
  }
  .writing-list-wrap .writing-list-box .writing-list .writing .data-box .file-tit {
    margin-right: 1.2903225806vw;
  }
  .writing-list-wrap .writing-list-box .writing-list .writing .data-box .file-tit::after {
    top: 0.4032258065vw;
    right: -0.6451612903vw;
    width: 0.0806451613vw;
    height: 0.9677419355vw;
  }
}
.writing-list-wrap .writing-list-box .notice-box {
  padding: 10px;
  gap: 8px;
}
.writing-list-wrap .writing-list-box .notice-box .noti-character img {
  width: 53px;
}
.writing-list-wrap .writing-list-box .notice-box p {
  color: #333;
  font-size: 14px;
  font-weight: 500;
}
@media screen and (max-width: 1240px) {
  .writing-list-wrap .writing-list-box .notice-box {
    padding: 0.8064516129vw;
    gap: 0.6451612903vw;
  }
  .writing-list-wrap .writing-list-box .notice-box .noti-character img {
    width: 4.2741935484vw;
  }
  .writing-list-wrap .writing-list-box .notice-box p {
    font-size: 1.1290322581vw;
  }
}
.writing-list-wrap .writing-preview-wrap.active {
  display: block;
}

.pop-wrap.responsive .pop-inner {
  overflow: hidden;
}
.pop-wrap.responsive .pop-content .writing-list-wrap {
  border: 0;
}
.pop-wrap.responsive .pop-header {
  height: auto;
  padding: 14px 20px;
  color: #fff;
  background-color: #333;
  border-radius: 16px 16px 0 0;
}
.pop-wrap.responsive .pop-content:has(.writing-list-wrap) {
  max-width: 795px;
  padding: 20px 0 0;
}
.pop-wrap.responsive .pop-footer {
  border-radius: 0 0 16px 16px;
}
.pop-wrap.responsive .pop-footer .btn-defalut {
  max-width: 200px;
  margin: 0 auto;
}
.pop-wrap.responsive.alert-type .pop-inner {
  width: 450px;
}
.pop-wrap.responsive.alert-type .pop-inner h3 {
  line-height: 1.2;
}
.pop-wrap.responsive.alert-type .pop-inner .txt {
  margin-top: 20px;
  font-size: 18px;
}
.pop-wrap.responsive.alert-type .pop-footer {
  padding: 0 40px 20px;
}
.pop-wrap.responsive.simple-type .pop-inner {
  width: 600px;
}
.pop-wrap.responsive.simple-type .pop-content {
  border-radius: 16px;
}
.pop-wrap.responsive.simple-type .pop-content .writing-list-box {
  margin-top: 15px;
}
@media screen and (max-width: 1240px) {
  .pop-wrap.responsive.simple-type .pop-content .writing-list-box {
    padding: 20px;
    min-height: 500px;
    border-radius: 10px;
  }
  .pop-wrap.responsive.simple-type .pop-content .writing-list-box::-webkit-scrollbar {
    width: 5px;
  }
  .pop-wrap.responsive.simple-type .pop-content .writing-list-box::-webkit-scrollbar-track {
    margin-top: 7px;
    margin-bottom: 7px;
  }
  .pop-wrap.responsive.simple-type .pop-content .writing-list-box .writing-list-txt {
    margin-left: 10px;
    font-size: 14px;
    letter-spacing: -0.2px;
  }
  .pop-wrap.responsive.simple-type .pop-content .writing-list-box .writing-list > li {
    margin-top: 30px;
  }
  .pop-wrap.responsive.simple-type .pop-content .writing-list-box .writing-list .list-tit {
    font-size: 16px;
  }
  .pop-wrap.responsive.simple-type .pop-content .writing-list-box .writing-list .writing {
    padding: 10px 7px;
    margin-top: 10px;
    font-size: 15px;
    letter-spacing: -0.2px;
  }
  .pop-wrap.responsive.simple-type .pop-content .writing-list-box .writing-list .writing .key {
    min-width: 40px;
    margin-right: 5px;
  }
  .pop-wrap.responsive.simple-type .pop-content .writing-list-box .writing-list .writing .img-btn {
    gap: 4px;
    margin-bottom: 5px;
  }
  .pop-wrap.responsive.simple-type .pop-content .writing-list-box .writing-list .writing .img-btn button {
    width: 20px;
    height: 20px;
    font-size: 14px;
    border-radius: 4px;
  }
  .pop-wrap.responsive.simple-type .pop-content .writing-list-box .writing-list .writing .data-box {
    height: 100px;
    border-radius: 8px;
  }
  .pop-wrap.responsive.simple-type .pop-content .writing-list-box .writing-list .writing .data-box.img {
    height: 250px;
  }
  .pop-wrap.responsive.simple-type .pop-content .writing-list-box .writing-list .writing .data-box .file-tit {
    margin-right: 16px;
  }
  .pop-wrap.responsive.simple-type .pop-content .writing-list-box .writing-list .writing .data-box .file-tit::after {
    top: 5px;
    right: -8px;
    width: 1px;
    height: 12px;
  }
  .pop-wrap.responsive.simple-type .pop-content .writing-list-box .notice-box {
    padding: 10px;
    gap: 8px;
  }
  .pop-wrap.responsive.simple-type .pop-content .writing-list-box .notice-box .noti-character img {
    width: 53px;
  }
  .pop-wrap.responsive.simple-type .pop-content .writing-list-box .notice-box p {
    font-size: 14px;
  }
}
@media screen and (max-width: 767px) {
  .pop-wrap.responsive .pop-inner {
    border-radius: 2.0860495437vw;
  }
  .pop-wrap.responsive .pop-header {
    padding: 1.8252933507vw 2.6075619296vw;
    font-size: 2.0860495437vw;
    border-radius: 2.0860495437vw 2.0860495437vw 0 0;
  }
  .pop-wrap.responsive .pop-content {
    padding: 7.8226857888vw 1.3037809648vw 3.9113428944vw;
  }
  .pop-wrap.responsive .pop-content:has(.writing-list-wrap) {
    padding: 2.6075619296vw 0 0;
  }
  .pop-wrap.responsive .pop-content .writing-list-wrap .scroll-list {
    max-height: 39.1134289439vw;
    font-size: 2.0860495437vw;
    border-radius: 2.0860495437vw;
  }
  .pop-wrap.responsive .pop-content .writing-list-wrap .scroll-list li {
    height: 6.518904824vw;
    padding: 0 2.6075619296vw;
  }
  .pop-wrap.responsive .pop-content .writing-list-wrap .scroll-list label {
    padding-top: 1.6949152542vw;
    padding-bottom: 1.6949152542vw;
  }
  .pop-wrap.responsive .pop-content .writing-list-wrap .scroll-list input[type=checkbox] + label {
    padding-left: 3.6505867014vw;
  }
  .pop-wrap.responsive .pop-content .writing-list-wrap .scroll-list input[type=checkbox] + label::before {
    width: 2.3468057366vw;
    height: 2.3468057366vw;
    margin-top: -1.0430247718vw;
  }
  .pop-wrap.responsive .pop-content .writing-list-wrap .scroll-list.recommend-writing {
    width: 91.2646675359vw;
    max-height: 58.6701434159vw;
    margin-top: 1.3037809648vw;
  }
  .pop-wrap.responsive .pop-content .writing-list-wrap .scroll-list.recommend-writing .writing {
    max-width: 71.7079530639vw;
  }
  .pop-wrap.responsive .pop-content .writing-list-wrap .scroll-list.recommend-writing .btn-type03.size-s {
    padding: 0 1.3037809648vw;
    width: 5.6062581486vw;
    height: 3.3898305085vw;
    font-size: 1.5645371578vw;
    border-radius: 1.0430247718vw;
  }
  .pop-wrap.responsive .pop-content .writing-list-wrap .info-text {
    margin-top: 1.3037809648vw;
    margin-bottom: 2.6075619296vw;
    line-height: 2.7379400261vw;
    font-size: 1.8252933507vw;
    letter-spacing: -0.0260756193vw;
  }
  .pop-wrap.responsive .pop-content .writing-list-wrap .writing-list-box {
    padding: 2.6075619296vw;
    margin-top: 1.3037809648vw;
    min-height: 65.1890482399vw;
    border-radius: 1.3037809648vw;
  }
  .pop-wrap.responsive .pop-content .writing-list-wrap .writing-list-box .writing-list .list-tit {
    font-size: 2.0860495437vw;
  }
  .pop-wrap.responsive .pop-content .writing-list-wrap .writing-list-box .writing-list .list-tit img {
    width: 2.0860495437vw;
  }
  .pop-wrap.responsive .pop-content .writing-list-wrap .writing-list-box .writing-list .writing {
    padding: 1.3037809648vw 0.9126466754vw;
    margin-top: 1.3037809648vw;
    font-size: 1.9556714472vw;
    letter-spacing: -0.0260756193vw;
  }
  .pop-wrap.responsive .pop-content .writing-list-wrap .writing-list-box .writing-list .writing .img-btn {
    gap: 0.5215123859vw;
    margin-bottom: 0.6518904824vw;
  }
  .pop-wrap.responsive .pop-content .writing-list-wrap .writing-list-box .writing-list .writing .img-btn button {
    width: 2.6075619296vw;
    height: 2.6075619296vw;
    font-size: 1.8252933507vw;
    border-radius: 0.5215123859vw;
  }
  .pop-wrap.responsive .pop-content .writing-list-wrap .writing-list-box .writing-list .writing .key {
    min-width: 5.2151238592vw;
    margin-right: 0.6518904824vw;
  }
  .pop-wrap.responsive .pop-content .writing-list-wrap .writing-list-box .notice-box {
    padding: 1.3037809648vw;
    gap: 1.0430247718vw;
  }
  .pop-wrap.responsive .pop-content .writing-list-wrap .writing-list-box .notice-box .noti-character img {
    width: 6.9100391134vw;
  }
  .pop-wrap.responsive .pop-content .writing-list-wrap .writing-list-box .notice-box p {
    font-size: 1.8252933507vw;
  }
  .pop-wrap.responsive .pop-content .badge-type01 {
    height: 3.6505867014vw;
    padding: 0 0.9126466754vw;
    font-size: 1.8252933507vw;
    border-radius: 0.7822685789vw;
    margin-right: 0.9126466754vw;
  }
  .pop-wrap.responsive .pop-content .badge-type02 {
    min-width: 5.2151238592vw;
    height: 2.8683181226vw;
    padding: 0 0.9126466754vw;
    font-size: 1.5645371578vw;
    border-radius: 0.7822685789vw;
    margin-right: 1.1734028683vw;
  }
  .pop-wrap.responsive .pop-close {
    top: 2.0860495437vw;
    right: 2.6075619296vw;
    width: 2.0860495437vw;
    height: 2.0860495437vw;
    background-size: contain;
  }
  .pop-wrap.responsive .pop-footer {
    gap: 1.3037809648vw;
    padding: 0 2.6075619296vw 2.6075619296vw;
    border-radius: 0 0 2.0860495437vw 2.0860495437vw;
  }
  .pop-wrap.responsive .pop-footer .btn-defalut {
    max-width: 26.075619296vw;
  }
  .pop-wrap.responsive .pop-footer button {
    height: 6.518904824vw;
    font-size: 1.9556714472vw;
    border-radius: 1.0430247718vw;
  }
  .pop-wrap.responsive.alert-type .pop-inner {
    width: 58.6701434159vw;
    margin: 0 auto;
    border-radius: 2.0860495437vw;
  }
  .pop-wrap.responsive.alert-type .pop-inner h3 {
    font-size: 2.6075619296vw;
  }
  .pop-wrap.responsive.alert-type .pop-inner .txt {
    margin-top: 2.6075619296vw;
    font-size: 2.3468057366vw;
  }
  .pop-wrap.responsive.alert-type .pop-footer {
    padding: 0 5.2151238592vw 2.6075619296vw;
  }
  .pop-wrap.responsive.simple-type .pop-inner {
    width: 78.2268578879vw;
    font-size: 2.0860495437vw;
  }
  .pop-wrap.responsive.simple-type .pop-content {
    border-radius: 2.0860495437vw;
  }
}

@media screen and (max-width: 767px) {
  .new-loading p {
    margin-top: 1.9556714472vw;
    font-size: 2.8683181226vw;
  }
}