@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: 1076px;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;
}

.draw--zone .draw_tools {
  position: absolute;
  top: 455px;
  left: -190px;
  z-index: 2;
}

.p2 .iw2 {
  position: absolute;
  top: 608px;
  left: 960px;
  width: 345px;
  display: flex;
}

.p2 .iw2 {
  flex-direction:column;
}
.p2 .iw2 .text_wrap {
  width: 271px;
  height: 40px;
  margin-bottom: 24px;
}

.p2 .iw2 .text_wrap:has(.form1) {
  margin-left: 101px;
  width: 170px;
}
.p2 .iw2 .text_wrap:has(.form2) {
  margin-bottom: 10px;
  margin-left: 86px;
  width: 183px;
}
.p2 .iw2 .text_wrap:has(.form3) {
  height: 123px;
}

.p2 .iw3 {
  position: absolute;
  top: 524px;
  left: 1302px;
  width: 385px;
  display: flex;
    flex-direction:column;
}

.p2 .iw3 .text_wrap {
  width: 311px;
  height: 40px;
  margin-bottom: 24px;
}

.p2 .iw3 .text_wrap:has(.form1) {
  margin-left: 101px;
  width: 190px;
}
.p2 .iw3 .text_wrap:has(.form2) {
  margin-bottom: 10px;
  margin-left: 86px;
  width: 223px;
}
.p2 .iw3 .text_wrap:has(.form3) {
  height: 59px;
}

.p2 .iw4 {
  position: absolute;
  top: 1024px;
  left: 990px;
  width: 385px;
  display: flex;
  flex-direction:column;
}

.p2 .iw4 .text_wrap {
  width: 591px;
  height: 40px;
  margin-bottom: 23px;
}

.p2 .iw4 .text_wrap:has(.form1) {
  margin-left: 86px;
  width: 505px;
}

.p2 .iw4 .text_wrap:has(.form2) {
  width: 533px;
}

.p3 .iw2 {
    flex-direction:column;
    position: absolute;
    top: 256px;
    left: 1314px;
    width: 512px;
    display: flex;
}

.p3 .iw2 .text_wrap {
  width: 258px;
  height: 45px;
  margin-bottom: 17px;
}

.p3 .iw2 .text_wrap:has(.form1) {
  margin-left: 76px;
  width: 184px;
}
.p3 .iw2 .text_wrap:has(.form2) {
  margin-left: 59px;
  width: 202px;
}
.p3 .iw2 .text_wrap:has(.form3) {
  /* margin-bottom: 35px; */
  width: 160px;
  margin-left: 100px;
}
.p3 .iw2 .text_wrap:has(.form4) {
  height: 110px;
}

.p3 .d1 {
  top: 201px;
  left: 944px;
  width: 330px;
  height: 370px;
  /* transform: rotate(45deg); */
}

.p3 .d1 canvas{
  width: 315px;
  height: 365px;
  transform: rotate(-3deg);
}
.p3 .d1 .btn_draw{
  position:absolute;
  top: 17px;
  left: 16px;
}
.p3 .d1 .draw_tools{
  top: 910px;
  left: -940px;
}








.p4 .iw2 {
  position:absolute;
  top: 528px;
  left: 618px;
  width: 680px;
}

.p4 .iw2 .text_wrap {
  position:absolute;
  width: 163px;
}
.p4 .iw2 .t1{
  transform: rotate(-7deg);
  height: 100px;
}

.p4 .iw3 {
  position:absolute;
  top: 803px;
  left: 134px;
  display:grid;
  grid-template: 82px 100px / repeat(3, 180px);
  gap: 90px 40px;
}
.p4 .iw3 .text_wrap {
  width:180px;
  height:82px;
}
.p4 .iw3 .t4 {
   grid-area:2/1/2/4;
   width: 620px;
   height:100px;
 }

.p6 .iw2 {
  position:absolute;
  left: 1333px;
  top: 961px;
}
.p6 .iw3 {
  position:absolute;
  left: 1426px;
  top: 997px;
}

.p6 .iw4 {
  position:absolute;
  left: 1382px;
  top: 1034px;
}
.p6 .iw5 {
  position:absolute;
  left: 1365px;
  top: 1070px;
}

.p6 .iw6 {
  position:absolute;
  top: 770px;
  left: 99px;
  /* display:grid; */
  /* grid-template: 82px 100px / repeat(3, 170px); */
  gap: 90px 40px;
}
.p6 .iw6 .text_wrap {
  width: 170px;
  height: 87px;
  position:absolute;
  top: 5px;
}
.p6 .iw6 .text_wrap .input {
  line-height:1;
}
.p6 .iw6 .text_wrap .clone_text{
  line-height:1;
}
.p6 .iw6 .t2 {
  left: 230px;
  top: 46px;
  width: 150px;
  height: 71px;
}

.p6 .iw6 .t3 {
  left: 440px;
  top: 45px;
  width: 151px;
  height: 75px;
}
.p6 .iw6 .t4 {
  left: 79px;
  top: 213px;
  width: 485px;
  height: 102px;
 }

.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: 815px;
	left: 818px;
}
.popup_content .pop_cont .txt2 {
	left: 821px;
	top: 967px;
}
.popup_content .pop_cont .txt3 {
	left: 823px;
	top: 1070px;
}

.popup_content .pop_cont .txt4 {
	left: 821px;
	top: 1195px;
}

.popup_content .pop_cont .txt5 {
	left: 707px;
	top: 1606px;
}
.popup_content .pop_cont .txt6 {
	left: 1166px;
	top: 1606px;
}
.popup_content .pop_cont .txt7 {
	left: 605px;
	top: 578px;
	font-size: 40px;
}
.popup_content .pop_cont .txt8 {
	left: 1007px;
	top: 578px;
	font-size: 40px;
}


/* 닫기 버튼 */
.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;
}