#content-wrapper{
  max-width: 850px;
  margin: 0 auto;
}

#content-wrapper .creation {
  padding: 20px;
  padding-bottom: 30rem;
  min-height: calc(100vh - 52px);
}

#content-wrapper .banner {
  width: 100%;
}

header {
  padding:  20px 15px 10px !important;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 3px;
}

header h2{
  font-size: 30px;
  text-align: center;
  font-family: 'GmarketSans';
}

.creation .box{ 
  margin-top: 40px;
}

.creation .sub-area .sub-of-title{ 
  font-size: 24px;
  font-family: 'Pretendard';
  font-weight: 800px;
  margin-left: 20px;
  line-height: 1.3;
}

#content-wrapper .creation .sub-area .sub-of-title .charType3{ 
  font-size: 30px;
  font-family: 'GmarketSans';
  font-weight: 600;  
   margin-bottom: 8px;
  display: inline-block;
}

#content-wrapper .creation .title-area {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 10px;
  width: 100%;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
#content-wrapper .title-area .img_content-wrapper{
  width: 20%
}

/* 용석 추가  */
.sub-area .img_content-wrapper img {
  width: 30px;
}

.display-flex { 
  display: flex;
  gap: 10px;
}

#content-wrapper .title-area img{
  width:100%;
  height: auto;
  max-width: 150px;
}

#content-wrapper  .title-area .title{
  font-size: 20px;
  margin-left: 10px;
  font-family: 'GmarketSansMedium';
  line-height: 1.3;
}

.button-class .button-class-img1 {
 width: 40%;
}

#content-wrapper .button-class {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding:  20px 40px;
  text-align: left;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  border-radius: 10px;
  max-width: calc(900px - 40px);
  max-height:200px;
  margin-top: 10px;
}

.button-class .button-class-img1 {
  width: 30%;
  position: absolute;
  left: 0;
  bottom: 0;
}

#content-wrapper .button-class .button-class_txt {
  font-size: 24px;
  font-family: 'GmarketSansMedium';
  width: 70%;
  line-height: 1.3;
}

#content-wrapper .button-class .button-class_txt .charType1 {
  font-size: 28px;
  font-family: 'GmarketSans';
}

.button-class .button-class-img1 img {
  width:85%;
  height: auto;
  max-width: 130px;
}

#content-wrapper .button-class .button-class-img2 {
text-align: right; width: 30%;
}

#content-wrapper .button-class .button-class-img2 svg {
  width: 90px;
}

#content-wrapper .button-class .button-class-img2 img {
  width: 40%;
  height: auto;
}

.title-area .title .charType2{
  font-size: 22px;
  font-family: 'GmarketSans';
  font-weight: 700;
}

.button-class .button-class_txt .charType5 {
  font-size: 28px;
  font-family: 'GmarketSans';
}

.title-area .title .charType2{
  font-size: 22px;
  font-family: 'GmarketSans';
  font-weight: 700;
}

.creation .box{ 
  margin-top: 40px;
}

.creation .sub-area .sub-of-title, .contents .creation .sub-area .sub-of-title, .creation .sub-area .sub-of-title, .question .creation .sub-area .sub-of-title{ 
  font-size: 24px;
  font-family: 'Pretendard';
  font-weight: 800;
  line-height: 1.3;
}

/* 추가 */
.image-area {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.subdescription {
  padding: 10px 20px;
}

.sub_description {
  font-size: 18px;
  font-family: 'Pretendard';
  font-weight: 400;
  line-height: 2;
}

.content_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.boldText {
  font-weight: bold !important;
  font-size: 19px !important;
}

@media screen and (max-width: 900px) {
  .content_grid {
    grid-template-columns: repeat(1, 1fr);
  }
}

.content_card {
  border: 1px solid #ddd;
  border-radius: 10px;
  min-height: 150px;
}

.content_grid .content-datas {
  border: none !important;
}

.font-small .content-datas {
  font-size: 18px !important;
}

/* 추가 end */

.creation .content-datas, .contents .creation .content-datas, .creation .content-datas{ 
 border: 1px solid #ddd;
 border-radius: 10px;
 padding: 15px;
 margin: 10px 0;
 font-size: 18px;
 font-family: 'Pretendard';
 line-height: 2;
}

#content-wrapper .creation .content-datas .charType4{ 
 font-size: 24px;
 font-family: 'Pretendard';
 line-height: 1.5;
 font-weight: 800;
}

#content-wrapper .creation .content-datas .charType2 {
  font-size: 18px;
  font-family: 'Prentendard';
  font-weight: 700;
}

.button-class .button-class-img1 {
  width: 40%;
}

.button-class .button-class-img1 {
   width: 30%;
   position: absolute;
   left: 0;
   bottom: 0;
}

.button-class .button-class-img1 img {
   width:85%;
   max-width: 130px;
   height: auto;
}

.button-class .button-class_txt .charType5 {
  font-size: 28px;
  font-family: 'GmarketSans';
}

.contents .title-area .title .charType5{
  font-size: 20px;
  font-family: 'GmarketSansMedium';
  margin-left: 10px;
  line-height: 1.3;
  font-weight: 700;
}
.contents .title-area .title .charType2{
  font-size: 37px;
  font-family: 'GmarketSans';
  font-weight: 700;
}

.contents .button-class .button-class-img1 {
  width: 40%;
}

.contents .button-class .button-class-img1 {
   width: 30%;
   position: absolute;
   left: 0;
   bottom: 0;
}

.contents .button-class .button-class_txt .charType5 {
  font-size: 28px;
  font-family: 'GmarketSans';
}
.button-class .button-class_txt .charType5 {
  font-size: 28px;
  font-family: 'GmarketSans';
}

.contents .button-class .button-class-img1 img {
   width:85%;
   height: auto;
   max-width: 130px;
}

.creation .box{ 
  margin-top: 0;
}

.button-class .button-class-img1 {
  width: 40%;
}
.creation .content-datas .charType3{ 
  font-size:18px;
  font-family: 'Pretendard';
  line-height: 1.5;
  font-weight: 800;
}

.button-class .button-class-img1 {
   width: 30%;
   position: absolute;
   left: 0;
   bottom: 0;
}

.button-class .button-class-img1 img {
   width:85%;
   height: auto;
   max-width: 130px;
}

.question-box .title-area .title{
  font-size: 20px;
  font-family: 'GmarketSansMedium';
  margin-left: 10px;
  line-height: 1.3;
}
.question-box .title-area .title .charType2{
  font-size: 22px;
  font-family: 'GmarketSans';
  font-weight: 700;
}

.question-box .creation .box{ 
  margin-top: 40px;
}
.question-box .creation .sub-area { 
  display: inline-flex; 
  border-radius: 10px; 
  border: 1px solid #ddd; 
  padding: 10px 20px;
gap: 10px;
}


.question-box .creation .sub-area img {
  text-align: center; 
  width: 20px;
  height: 20px;
}

.question-box .creation .sub-area .sub-of-title{ 
  font-size: 24px;
  font-family: 'Pretendard';
  font-weight: 800;
  line-height: 1.3;
}

.question-box .creation .content-datas{ 
  border: 1px solid #ddd;
 border-radius: 10px;
 margin: 10px 0;
 font-size:16px;
 font-family: 'Pretendard';
 line-height: 1.5;
}
.question-box .creation .content-datas .charType6 {  
  font-size: 18px;
  font-family: 'Pretendard';
  line-height: 1.5;
  display: inline-block;
  width: 100%;
  position: relative;
  font-weight: 600;
  padding: 20px 35px 20px 10px;
  border-bottom: none;
}

.question-box .creation .content-datas.on .charType6 {  
  border-bottom: 1px solid #ddd;
}

.question-box .creation .content-datas.on .charType7 {  
  font-size:18px;
  display: block;
  font-family: 'Pretendard';
  line-height: 1.5;
  padding: 20px 10px;
}

.question-box .creation .content-datas.on .charType8 {  
  font-size:16px;
  line-height: 1.3;
}

.question-box .creation .content-datas .charType7 {  
  display: none;
}

.question-box .button-class .button-class-img1 {
  width: 40%;
}

.question-box .button-class .button-class-img1 {
   width: 30%;
   position: absolute;
   left: 0;
   bottom: 0;
}

.question-box .button-class .button-class-img1 img {
   width:85%;
   height: auto;
   max-width: 130px;
}

.question-box .button-class .button-class_txt .charType5 {
  font-size: 28px;
  font-family: 'GmarketSans';
}


@media screen and (min-width: 900px) {
  .creation .sub-area .sub-of-title{ 
      font-size: 30px;
      font-family: 'Pretendard';
      font-weight: 600;
      margin-left: 20px;
      line-height: 1.3;
   }
   
  .creation .sub-area .sub-of-title .charType3{ 
      font-size: 37px;
      font-family: 'GmarketSans';
      font-weight: 600;  
       margin-bottom: 8px;
      display: inline-block;
   
   }
   #content-wrapper .title-area .title{
      font-size: 30px;
      margin-left: 10px;
      font-family: 'GmarketSansMedium';
      line-height: 1.3;
  }
   .title-area .title .charType2{
      font-size: 37px;
      font-family: 'GmarketSans';
      font-weight: 700;
  }

   .title-area .title .charType2{
      font-size: 37px;
      font-family: 'GmarketSans';
      font-weight: 700;
  }
  .contents .title-area .title .charType5{
      font-size: 30px;
      font-family: 'GmarketSansMedium';
      margin-left: 10px;
      line-height: 1.3;
      font-weight: 700;
  }
  .contents .title-area .title .charType2{
      font-size: 37px;
      font-family: 'GmarketSans';
      font-weight: 700;
  }

  .question-box .title-area .title .charType2{
      font-size: 37px;
      font-family: 'GmarketSans';
      font-weight: 700;
  }
}
@media screen and (max-width: 767px) {
 .creation .sub-area .sub-of-title .charType3 { font-size: 20px;}
  
}