@charset "utf-8";

#pageWrap .page.p1 {
  background: url(../img/p10_1.png) no-repeat center / 100%;
}


/* 1번 문항  입력창 */
.input_wrap.iw2 {
  position: relative;
  top: 409px;
  left: 278px;
  width: 672px;
  display: grid;
  gap: 8px;
}
.input_wrap.iw2 .text_wrap{height: 61px;}

/* 2반 문항 그리기 */
.draw--zone .btn_draw {
  position: absolute;
  top: -542px;
  left: -22px;
}
.draw--zone canvas {
  position: absolute;
  top: -533px;
  left: 413px;
}



/** 3번 문항 check_box **/
/* 공통 체크 표시 */
.check_box.cw1 {
  display: flex;
  align-items: center;
  position: absolute;
  top: 564px;
  left: 310px;
}
.check_box.cw1 .check_item {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  height: 25px;
}
.check_box.cw1 .check_item + .check_item{
  margin-left: 64px;
}
.check_box.cw1 .check_item:nth-child(3){
  margin-left: 105px;
}
.check_box.cw1 .input_wrap.form .input{
  position: relative;
  top: -6px;
  left: 4px;
  text-align: left;
  height: 34px;
  width: 117px;
}
.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;
}

.area3{
  position: absolute;
  top: 685px;
  left: 133px;
  display: grid;
  gap: 11px;
}
.block, .block .input_wrap{display: flex;align-items: center;}
.block{gap: 277px;}
.block .input_wrap{gap: 12px;}
.block .text_wrap{width: 131px;height: 136px;}
.block .text_wrap.t2{width: 404px;}
.img_area{position: absolute;width: 257px;height: 134px;left: -267px;top: -45px;}
.attach--img{position: relative;}

.input_wrap.iw3{position: absolute;top: 1197px;left: 127px;}
.input_wrap.iw3 .text_wrap {width: 823px;height: 120px;}

/* popup style */
#guidePopup {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1080px;
  height: 1920px;
  background: url(../img/guide_bg_1.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;
  left: 45.2%;
  top: 50.3%;
  transform: translate(-50%, -50%);
  width: 788px;
  height: 1302px;
  background: url(../img/guide_arrow_1.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 {
  right: 271px;
  top: 408px;
}
.popup_content .pop_cont .txt2 {
  left: 363px;
  top: 361px;
}
.popup_content .pop_cont .txt3 {
  top: 1107px;
  left: 240px;
}
.popup_content .pop_cont .txt4 {
  left: 146px;
  top: 1325px;
}
.popup_content .pop_cont .txt5 {
  left: 239px;
  top: 1491px;
}  
.popup_content .pop_cont .txt6 {
  left: 697px;
  top: 1491px;
}                      
/* 닫기 버튼 */
.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;
}