@charset "utf-8";


#pageWrap .page.p1 {
  background: url(../img/p10_1.jpg) no-repeat center / 100%;
}
#pageWrap .page.p2 {
  background: url(../img/p10_2.jpg) no-repeat center / 100%;
}
#pageWrap .page.p3 {
  background: url(../img/p10_3.jpg) no-repeat center / 100%;
}
#pageWrap .page.p4 {
  background: url(../img/p10_4.jpg) no-repeat center / 100%;
}
#pageWrap .page.p5 {
  background: url(../img/p10_5.jpg) no-repeat center / 100%;
}
#pageWrap .page.p6 {
  background: url(../img/p10_6.jpg) no-repeat center / 100%;
}
.input_wrap.iw1 {top: 1096px;left: 1051px;}

.input_wrap.iw1 .text_wrap {
  width: 40px;
  height: 33px;
}

.input_wrap.iw1 .text_wrap:nth-child(2) {
  margin-left: 67px;
}
.input_wrap.iw1 .text_wrap:nth-child(3) {
  margin-left: 43px;
}
.input_wrap.iw1 .text_wrap:nth-child(4){
  width: 135px;
  margin-left: 103px;
}

.iw4 .draw--zone .btn_draw {
  position: absolute;
  left: 20px;
  top: 36px;
  z-index: 999;
}
.iw4 .draw--zone .draw_tools{
   position: absolute;
  top: 455px;
  left: -190px;
  z-index: 2;
}
.draw--zone .draw_tools {
  position: absolute;
  top: 389px;
  left: -967px;
  z-index: 2;
}

.p2 .iw2 {
  position: absolute;
  top: 411px;
  left: 951px;
  width: 693px;
  height: 463px;
  display: flex;
}


.p2 .iw2 .text_wrap{
 position:absolute;
 width: 100px;
 height: 77px;
 left: 202px;
 top: 77px;
 border-radius: 20px;
 overflow:hidden;
 z-index: 999;
}

.p2 .iw2 .t2 {
  left: 349px;
  top: 77px;
}
.p2 .iw2 .t3{
  left: 500px;
  top: 90px;
  width: 117px;
}
.p2 .iw2 .t4 {
  left: 67px;
  top: 194px;
}
.p2 .iw2 .t5 {
  left: 223px;
  top: 218px;
}
.p2 .iw2 .t6 {
  left: 398px;
  top: 230px;
}

.p2 .iw2 .t7 {
  left: 275px;
  top: 334px;
}
.p2 .iw2 .t8 {
  left: 76px;
  top: 340px;
}
.p2 .iw2 .draw--zone{
  width: 693px;
  height: 463px;
  top: 0;
  left: 0;
}
.p2 .iw2 .draw--zone canvas{
  width: 693px;
  height: 463px;
  z-index:0 !important;
}
.p2 .iw2 .draw--zone .draw_tools {
  top: 702px;
  left: -947px;
}

.p2 .iw2 .btn_draw {
  position: absolute;
  top: 9px;
  left: 17px
}
.p2 .iw3 {
  position: absolute;
  top: 137px;
  left: 1462px;
  width: 178px;
  height: 108px;
  }

.p2 .iw3 .text_wrap {
  height:33px;
  width: 117px;
}
.p2 .iw3 .text_wrap.t1 {
  margin-left: 51px;
  margin-bottom: 3px;
}
.p2 .iw3 .text_wrap.t2 {
  width: 166px;
  margin-bottom: 4px;
}
.p2 .iw3 .text_wrap.t3 {
  width: 141px;
}


.p2 .iw4 {
  position:absolute;
  top: 1058px;
  left: 1118px;
}

.p2 .iw4 .text_wrap {
  height:45px;
  width: 403px;
}
.p3 .iw2 {
    flex-direction:column;
    position: absolute;
    top: 788px;
    left: 1322px;
    width: 278px;
    display: flex;
}


.p3 .iw2 .text_wrap {
  width: 283px;
  height: 45px;
  margin-bottom: 15px;
}

.p3 .iw2 .text_wrap:has(.form1)  {
  margin-left: 57px;
  width: 224px;
}
.p3 .iw2 .text_wrap:has(.form2) {
  margin-left: 57px;
  width: 224px;
  margin-bottom: 7px;
}
.p3 .iw2 .text_wrap:has(.form3) {
  width: 282px;
  height: 70px;
}
.p3 .iw2 .text_wrap .form3, .p3 .iw2 .text_wrap:has(.form3) .clone_text {
 line-height:1.1;
}
.p3 .iw2 .text_wrap:has(.form4){
    margin-left: 100px;
    width: 182px;
    margin-bottom: 7px;
}
.p3 .iw2 .text_wrap:has(.form5){
  height: 59px;
}

.p3 .iw3{
  position:absolute;
  top: 725px;
  left: 970px;
}

.p3 .iw3 .draw--zone{
  top: 0;
  left:0;
}
.p3 .iw3 .draw--zone canvas {
  width: 310px;
  height: 380px;
}

.p3 .iw3 .draw--zone .btn_draw{
  position:absolute;
  bottom: 17px;
  left: 6px;
}
.p4 .iw2 {
  position:absolute;
  top: 860px;
  left: 213px;
  width: 680px;
}

.p4 .iw2 .text_wrap {
  width: 207px;
  height: 60px;
  margin-bottom: 25px;
}

.p4 .iw3 {
  position:absolute;
  top: 841px;
  left: 433px;
  /* width: 680px; */
}
.p4 .iw3 .draw--zone{
  position:absolute;
  top: 0;
  left: 0;
  width: 340px;
  height: 270px;
}
.p4 .iw3 .draw--zone .btn_draw{
  position:absolute;
  top: 50px;
  left: 40px;
}
.p4 .iw3 .draw--zone .draw_tools{
  position:absolute;
  top: 272px;
  left: -430px;
}
.p4 .iw3 .draw--zone canvas{
  width: 340px;
  height: 270px;
}
.p4 .iw4 {
  position:absolute;
  top: 146px;
  left: 1063px;
  width: 680px;
  display:grid;
  grid-template: 45px 100px 45px/ 550px;
  gap: 23px;
}
.p5 .iw2 {
  position:absolute;
  top: 499px;
  left: 1450px;
  width: 146px;
  transform: rotate(4deg);
}
.p5 .iw2 .text_wrap {
    width: 146px;
    height: 81px;
}

.p5 .iw3 {
  position:absolute;
  top: 915px;
  left: 1128px;
  width: 146px;
}

.p5 .iw3 .text_wrap{
  height: 51px;
  width: 485px;
  margin-bottom: 6px;
}
.p5 .iw3 .t3{height: 68px;}
.p6 .iw2 {
  position:absolute;
  left: 1442px;
  top: 961px;
}
.p6 .iw3 {
  position:absolute;
  left: 1462px;
  top: 997px;
}.p6 .iw4 {
  position:absolute;
  left: 1384px;
  top: 1034px;
}.p6 .iw5 {
  position:absolute;
  left: 1400px;
  top: 1070px;
}
.p6 .star_wrap {
  display:flex;
  gap: 1px;
}
.btn_star {
  width: 0;
  height: 0;
  display: none;
  text-indent: -99999px;
  cursor: pointer;
}

.star_chck {
  cursor: pointer;
}

.btn_star+label {
  width: 26px;
  height: 23px;
  display: block;
  cursor: pointer;
}

.btn_star:checked+label {
  background: url(../img/star_btn2.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  
}

.sound--zone {
  position: absolute;
  right: -70px;
  top: -11px;
}

.del_box {
  width: 332px;
  height: 163px;
  background: #fffcfa;
  align-content: center;
  display: grid;
  gap: 15px;
  position: absolute;
  top: 11px;
  left: -20px;
  z-index: 10000000;
  display: none;
}

.del_box, .del_box button:not(.close) {
  border: 2px solid #FF6C00;
  font-size: 26px;
  text-align: center;
  text-indent: 0px;
  border-radius: 30px;
  font-size: 20px;
}

.del_box button:not(.close) {
  border-radius: 30px;
  color: #FF6C00;
  background: #fff;
  font-weight: 700;
  padding: 8px 20px;
}

.close {
  background: url(../img/del_close.png) no-repeat center / 100%;
  width: 24px;
  height: 24px;
  position: absolute;
  right: 15px;
  top: 9px;
  text-indent: -999999px;
}

/** 3번 문항 check_box **/
/* 공통 체크 표시 */
.check_box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  /* height: 25px; */
  gap: 2px;
}

.check_box .check_item {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  height: 25px;
  position: absolute;
}

.check_box .check_item:first-child {
  top: 0;
}

.check_box .check_item:nth-child(2) {
  top: 25px;
}

.check_box .check_item:nth-child(3) {
  top: 0;
  left: 307px;
}

.check_box .check_item:nth-child(4) {
  top: 25px;
  left: 307px;
}

.check_item input[type="checkbox"] {
  display: none;
}

.check_item label {
  cursor: pointer;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  transition: all 0.3s;
}

.check_item input[type="checkbox"]:checked + label {
  background: url(../img/check_on.png) 0 0 / 100% 100% no-repeat;
}

/* check_box 나의 감정 */
.input_wrap.iw2 .check_box.cw1 {
  width: 233px;
}

.input_wrap.iw2 .check_box.cw1 .check_item:nth-of-type(1), .input_wrap.iw2 .check_box.cw1 .check_item:nth-of-type(3) {
  width: 67px;
}

.input_wrap.iw2 .check_box.cw1 .check_item:nth-of-type(2), .input_wrap.iw2 .check_box.cw1 .check_item:nth-of-type(4) {
  width: 85px;
}

/* check_box 표현 기법 */
.input_wrap.iw2 .check_box.cw2 {
  width: 488px;
}

.input_wrap.iw2 .check_box.cw2 .check_item:nth-of-type(1), .input_wrap.iw2 .check_box.cw2 .check_item:nth-of-type(3) {
  width: 173px;
}

.input_wrap.iw2 .check_box.cw2 .check_item:nth-of-type(2) {
  width: 138px;
}

.input_wrap.iw2 .check_box.cw2 .check_item label {
  margin-top: 3px;
}

/* popup style */
#guidePopup {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2010px;
  height: 1920px;
  background: url(../img/guide_bg.png) 0 0 / 100% 100% no-repeat;
  z-index: 100;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.popHide {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#guidePopup::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 2010px;
  height: 1920px;
  background: url(../img/guide_arrow.png) 0 0 / 100% 100% no-repeat;
  animation: blink 1s ease-in-out 3;
}

@keyframes blink {
  0% {
      opacity: 1;
  }

  50% {
      opacity: 0;
  }

  100% {
      opacity: 1;
  }
}

.pop_container * {
  color: #fff;
  font-family: 'GyeonggiTitleOTF';
  font-weight: 500;
  font-size: 26px;
  line-height: 1.3;
  letter-spacing: 0.03em;
  text-shadow: 3px 2px 2px rgba(0, 0, 0, 0.3);
}

.pop_container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.popup_content {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 55px 80px;
}

/* popup header */
.pop_header {
  text-align: center;
}

.pop_header h2 {
  margin-bottom: 30px;
  font-size: 40px;
  font-weight: 700;
}

/* 내용 */
.popup_content .pop_cont {
  width: 100px;
  height: auto;
}

.popup_content .pop_cont P {
  position: absolute;
  display: block;
}

.popup_content .pop_cont .txt1 {
  top: 930px;
  left: 1326px;
}

.popup_content .pop_cont .txt2 {
  left: 1156px;
  top: 1302px;
}

.popup_content .pop_cont .txt3 {
  left: 1166px;
  top: 1606px;
}

.popup_content .pop_cont .txt4 {
  left: 706px;
  top: 1604px;
}


/* 닫기 버튼 */
.popup_content .closePopup {
  position: absolute;
  right: 35px;
  top: 65px;
  width: 44px;
  height: 44px;
  background: url(../img/btn_close.png) 0 0 / 100% 100% no-repeat;
}

.popup_content .closePopup span {
  display: block;
  text-indent: -9999em;
}

/* 창 다시 보지 않기 */
.popup_content .pop_bottom {
  position: absolute;
  bottom: 55px;
  left: 50%;
  transform: translateX(-50%);
}

.popup_content .pop_bottom .check_box {
  position: relative;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.popup_content .pop_bottom .check_box input[type="checkbox"] {
  display: none;
}

.popup_content .pop_bottom .check_box label {
  position: relative;
  width: 26px;
  height: 26px;
}

.popup_content .pop_bottom .check_box label .check {
  cursor: pointer;
  display: inline-block;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  border: 4px solid #fff;
  transition: background-color 0.3s, border-color 0.3s;
}

.popup_content .pop_bottom .check_box input[type="checkbox"]:checked+label .check {
  border: none;
  background: url(../img/guidepop_checked.png) 0 0 / 100% 100% no-repeat;
}