#htmlShow{
  width:100%;
  height:100%;
  /* background: blue; */
}

.quizType{
  width:100%;
  height:100%;
  position: relative;
}

/* 타입7 : A 슬라이드 넘기기 */
#type1.typeA{
  background: url("../img/quiz/07/01/A_background.png") no-repeat;
  background-size: 1280px;
}

#type1.typeA .quiz{
  width:100%;
  height:100%;
}

#type1.typeA .object{
  position: absolute;
  width:187px;
  height:187px;
  cursor: pointer;
}
#type1.typeA .object1{top:263px;left:163px;background:url(../img/quiz/07/01/object1.png)}
#type1.typeA .object2{top:263px;left:429px;background:url(../img/quiz/07/01/object2.png)}
#type1.typeA .object3{top:263px;left:694px;background:url(../img/quiz/07/01/object3.png)}
#type1.typeA .object4{top:263px;left:960px;background:url(../img/quiz/07/01/object4.png)}

#type1.typeA .object1:hover{background:url(../img/quiz/07/01/object1_h.png)}
#type1.typeA .object2:hover{background:url(../img/quiz/07/01/object2_h.png)}
#type1.typeA .object3:hover{background:url(../img/quiz/07/01/object3_h.png)}
#type1.typeA .object4:hover{background:url(../img/quiz/07/01/object4_h.png)}
#type1.typeA .top{
  position: absolute;
  width:301px;
  height:85px;
  top:10px;
  left:19px;
  background:url(../img/quiz/07/01/top.png);
  pointer-events: none !important;
  z-index: 99999;
}

#type1.typeA .menu{
  position: absolute;
  width:195px;
  height:71px;
  top:0px;
  left:1058px;
  background:url(../img/quiz/07/01/menu.png);
  background-size: 195px 71px;
  z-index: 99998;
}

#type1.typeA .home{
  position: absolute;
  width:44px;
  height:44px;
  top: 10px;
  left: 20px;
  background:url(../img/quiz/07/01/home.png);
  background-size: 44px 44px;
  cursor: pointer;
  z-index: 99999;
}

#type1.typeA .menu .intro{
  position: absolute;
  width:42px;
  height:32px;
  top: 19px;
  left: 80px;
  background:url(../img/quiz/07/01/intro.png);
  background-size: 42px 32px;
  cursor: pointer;
  z-index: 99999;
}

#type1.typeA .full{
  position: absolute;
  width:40px;
  height:40px;
  top: 16px;
  left: 136px;
  background:url(../img/quiz/07/01/full.png);
  background-size: 40px 40px;
  cursor: pointer;
  z-index: 99999;
}

#type1.typeA .fullexit{
  display: none;
  position: absolute;
  width:40px;
  height:40px;
  top: 16px;
  left: 136px;
  background:url(../img/quiz/07/01/fullexit.png);
  background-size: 40px 40px;
  cursor: pointer;
  z-index: 99999;
}

#type1.typeA .popup{
  display: none;
  width:1280px;
  height:720px;
  position: absolute;
  top:0;
  left:0;
  z-index: 2;
  background: url(../img/quiz/07/01/notOpen.png);
}

#type1.typeA .popup1{
  background: url(../img/quiz/07/01/01/bg.png);
}

#type1.typeA .popup2{
  background: url(../img/quiz/07/01/02/bg.png);
}

#type1.typeA .popup3{
  background: url(../img/quiz/07/01/03/bg.png);
}

#type1.typeA .popup4{
  background: url(../img/quiz/07/01/04/bg.png);
}

#type1.typeA .popup > .junbi{
  /* display: none; */
  width:184px;
  height:184px;
  position: absolute;
  top:308px;
  left:672px;
  z-index: 2;
}



/* #type1.typeA .popup1 .slide{
  position: absolute;
  top: 150px;
  left: 50%;
  transform: translateX(-50%);
  width: 180%;
  height: 535px;
}
#type1.typeA .popup1 .image{
  width:774px;
  height:534px;
}

#type1.typeA .popup1 .image1{ background: url(../img/quiz/07/01/01/1.png);}
#type1.typeA .popup1 .image2{ background: url(../img/quiz/07/01/01/2.png);}
#type1.typeA .popup1 .image3{ background: url(../img/quiz/07/01/01/3.png);}
#type1.typeA .popup1 .image4{ background: url(../img/quiz/07/01/01/4.png);}
#type1.typeA .popup1 .image5{ background: url(../img/quiz/07/01/01/5.png);}
#type1.typeA .popup1 .image6{ background: url(../img/quiz/07/01/01/6.png);}
#type1.typeA .popup1 .image7{ background: url(../img/quiz/07/01/01/7.png);}
#type1.typeA .popup1 .image8{ background: url(../img/quiz/07/01/01/8.png);}
#type1.typeA .popup1 .image9{ background: url(../img/quiz/07/01/01/9.png);}
#type1.typeA .popup1 .image10{background: url(../img/quiz/07/01/01/10.png);}
#type1.typeA .popup1 .image11{background: url(../img/quiz/07/01/01/11.png);}
#type1.typeA .popup1 .image12{background: url(../img/quiz/07/01/01/12.png);}
#type1.typeA .popup1 .image13{background: url(../img/quiz/07/01/01/13.png);}

#type1.typeA .popup1 .slick-dots li.slick-active button:before {
  color:#3c7980 !important;
}

#type1.typeA .popup1 .slick-dots li button:before {
  opacity: 1 !important;
  font-size: 58px !important;
  top: -13px !important;
  color:#fff;
  text-shadow: 2px 2px 2px #0000002e;
} */

/* 1번 구역 */
#type1.typeA .popup1 .intro{
  position: absolute;
  width:1280px;
  height:720px;
  top:0px;
  left:0px;
  background: url(../img/quiz/07/01/01/intro.png);
  z-index: 10;
}

#type1.typeA .popup1 .intro .ok{
  display: none;
  position: absolute;
  width:323px;
  height:60px;
  top:494px;
  left:502px;
  background: url(../img/quiz/07/01/01/start.png);
  cursor: pointer;
  z-index: 11;
  animation: over 0.5s linear forwards;
}

#type1.typeA .popup1 .intro .ch{
  width:80px;
  height:32px;
  position: absolute;
  cursor: pointer;
  z-index: 11;
  animation: over 0.5s linear forwards;
}

#type1.typeA .popup1 .intro .ch1{left:155px;top:615px;display: none;}
#type1.typeA .popup1 .intro .ch2{left:155px;top:660px;display: none;}

#type1.typeA .popup1 .intro .text1{
  display: none;
  width:auto;
  height: auto;
  position: absolute;
  top:619px;
  left:248px;
  z-index: 11;
  animation: over 0.5s linear forwards;
}
#type1.typeA .popup1 .intro .text2{
  display: none;
  width:auto;
  height: auto;
  position: absolute;
  top:665px;
  left:248px;
  z-index: 11;
  animation: over 0.5s linear forwards;
}
#type1.typeA .popup1 .intro .smalltext{
  width:auto;
  height: auto;
  position: absolute;
  left:153px;
  z-index: 11;
  animation: over 0.5s linear forwards;
}
#type1.typeA .popup1 .intro .small1{top:178px;display: none;}
#type1.typeA .popup1 .intro .small2{top:218px;display: none;}
#type1.typeA .popup1 .intro .small3{top:258px;display: none;}
#type1.typeA .popup1 .intro .small4{top:298px;display: none;}
#type1.typeA .popup1 .intro .small5{top:338px;display: none;}
#type1.typeA .popup1 .intro .small6{top:378px;display: none;}
#type1.typeA .popup1 .intro .small7{top:418px;display: none;}
#type1.typeA .popup1 .intro .small8{top:458px;display: none;}

#type1.typeA .popup1 .countrybtn{
  position: absolute;
  bottom: 52px;
  left: 50%;
  transform: translateX(-50%);
  width: 954px;
  height: 46px;
  display: flex;
  justify-content: space-between;
  z-index: 10;
}

#type1.typeA .popup1 .countrybtn li{
  width:187px;
  height:46px;
  cursor: pointer;
}



#type1.typeA .popup1 .markicon{
  position: absolute;
  width: 21px;
  height: 29px;
  cursor: pointer;
}

#type1.typeA .popup1 .mark21{background:url(../img/quiz/07/01/01/mark21.png);background-size:21px 29px;}
#type1.typeA .popup1 .mark22{background:url(../img/quiz/07/01/01/mark22.png);background-size:21px 29px;}
#type1.typeA .popup1 .mark23{background:url(../img/quiz/07/01/01/mark23.png);background-size:21px 29px;}

#type1.typeA .popup1 .mark01{top:331px;left:624px;}
#type1.typeA .popup1 .mark02{top:331px;left:289px;}
#type1.typeA .popup1 .mark03{top:576px;left:435px;}
#type1.typeA .popup1 .mark04{top:581px;left:970px;}
#type1.typeA .popup1 .mark05{top:435px;left:813px;}
#type1.typeA .popup1 .mark06{top:464px;left:718px;}

#type1.typeA .popup1 .mark07{top:387px;left:305px;}
#type1.typeA .popup1 .mark08{top:331px;left:611px;}
#type1.typeA .popup1 .mark09{top:488px;left:721px;}
#type1.typeA .popup1 .mark10{top:417px;left:768px;}
#type1.typeA .popup1 .mark11{top:567px;left:986px;}
#type1.typeA .popup1 .mark12{top:509px;left:465px;}

#type1.typeA .popup1 .mark13{top:372px;left:653px;}
#type1.typeA .popup1 .mark14{top:384px;left:858px;}
#type1.typeA .popup1 .mark15{top:490px;left:708px;}
#type1.typeA .popup1 .mark16{top:533px;left:1045px;}
#type1.typeA .popup1 .mark17{top:360px;left:419px;}
#type1.typeA .popup1 .mark18{top:610px;left:461px;}


#type1.typeA .popup1 .mimg{
  display: none;
  position: absolute;
  width:1280px;
  height:720px;
  top:0;
  left:0;
}
#type1.typeA .popup1 .mimg .mimgarea1{
  position: relative;
  width:100%;
  height:100%;
}
#type1.typeA .popup1 .mimg .mimgarea1 .mimgarea2{
  position: absolute;
}
#type1.typeA .popup1 .mimg .mimgarea1 .mimgarea2 .closearea{
  position: relative;
  width:100%;
  height:100%;
}
#type1.typeA .popup1 .mimg .mimgarea1 .mimgarea2 .closearea .popup1inclose{
  position: absolute;
  width:41px;
  height:41px;
  top:10px;
  right:20px;
  cursor: pointer;

}

#type1.typeA .popup1 .Y2021{
  display: block;
}

#type1.typeA .popup1 .Y2022{
  display: block;
}

#type1.typeA .popup1 .Y2023{
  display: block;
}

#type1.typeA .popup1 .yearbtn{
  position: absolute;
  left: 54px;
  top: 512px;
  width:118px;
  height:168px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  z-index: 3;
}

#type1.typeA .popup1 .yearbtn li{
  cursor: pointer;
  width: 118px;
  height: 44px;
}

#type1.typeA .popup1 .btn2021{background: url(../img/quiz/07/01/01/2021.png);}
#type1.typeA .popup1 .btn2022{background: url(../img/quiz/07/01/01/2022.png);}
#type1.typeA .popup1 .btn2023{background: url(../img/quiz/07/01/01/2023.png);}
#type1.typeA .popup1 .btn2021.on{background: url(../img/quiz/07/01/01/2021_on.png);}
#type1.typeA .popup1 .btn2022.on{background: url(../img/quiz/07/01/01/2022_on.png);}
#type1.typeA .popup1 .btn2023.on{background: url(../img/quiz/07/01/01/2023_on.png);}


/* 2번 구역 */

#type1.typeA .popup2 .videoarea{
  position: absolute;
  top:56%;
  left:50%;
  transform: translate(-50%, -50%);
  width:750px;
  height:422px;
  border: 9px solid #006a61;
}
#type1.typeA .popup2 .videoarea video{
  width:100%;
  height:100%;
}

/* 3번 구역 */

#type1.typeA .popup3 .intro{
  /* display: none; */
  width:100%;
  height:100%;
  position: absolute;
  left:0;
  top:0;
  background: url(../img/quiz/07/01/03/intro.png);
  z-index: 2;
}

#type1.typeA .popup3 .intro .ok{
  display: none;
  width:193px;
  height:60px;
  position: absolute;
  top:487px;
  left:774px;
  cursor: pointer;
  z-index: 3;
  animation: over 0.5s linear forwards;
}

#type1.typeA .popup3 .intro .ch{
  width:80px;
  height:32px;
  position: absolute;
  cursor: pointer;
  z-index: 3;
  animation: over 0.5s linear forwards;
}
#type1.typeA .popup3 .intro .ch1{left:85px;top:597px;display: none;}
#type1.typeA .popup3 .intro .ch2{left:85px;top:642px;display: none;}

#type1.typeA .popup3 .intro .text1{
  display: none;
  width:auto;
  height: auto;
  position: absolute;
  top:499px;
  left:88px;
  z-index: 11;
  animation: over 0.5s linear forwards;
}
#type1.typeA .popup3 .intro .text2{
  display: none;
  width:auto;
  height: auto;
  position: absolute;
  top:601px;
  left:178px;
  z-index: 11;
  animation: over 0.5s linear forwards;
}
#type1.typeA .popup3 .intro .text3{
  display: none;
  width:auto;
  height: auto;
  position: absolute;
  top:647px;
  left:178px;
  z-index: 11;
  animation: over 0.5s linear forwards;
}
#type1.typeA .popup3 .intro .smalltext{
  width:auto;
  height: auto;
  position: absolute;
  left:87px;
  z-index: 11;
  animation: over 0.5s linear forwards;
}
#type1.typeA .popup3 .intro .small1{top:169px;display: none;}
#type1.typeA .popup3 .intro .small2{top:209px;display: none;}
#type1.typeA .popup3 .intro .small3{top:249px;display: none;}
#type1.typeA .popup3 .intro .small4{top:289px;display: none;}
#type1.typeA .popup3 .intro .small5{top:329px;display: none;}
#type1.typeA .popup3 .intro .small6{top:369px;display: none;}
#type1.typeA .popup3 .intro .small7{top:409px;display: none;}
#type1.typeA .popup3 .intro .small8{top:449px;display: none;}

#type1.typeA .popup3 .centersquare{
  width:1032px;
  height:444px;
  position: absolute;
  left:124px;
  top:236px;
  z-index: 2;
}


#type1.typeA .popup3 .question1_0{
  display: none;
  background: url(../img/quiz/07/01/03/question1_0.png);
}
#type1.typeA .popup3 .question2_0{
  display: none;
  background: url(../img/quiz/07/01/03/question2_0.png);
}
#type1.typeA .popup3 .question2_1{
  display: none;
  background: url(../img/quiz/07/01/03/question2_1.png);
}
#type1.typeA .popup3 .question3_0{
  display: none;
  background: url(../img/quiz/07/01/03/question3_0.png);
}
#type1.typeA .popup3 .question3_1{
  display: none;
  background: url(../img/quiz/07/01/03/question3_1.png);
}
#type1.typeA .popup3 .question3_2{
  display: none;
  background: url(../img/quiz/07/01/03/question3_2.png);
}
#type1.typeA .popup3 .question3_3{
  display: none;
  background: url(../img/quiz/07/01/03/question3_3.png);
}
#type1.typeA .popup3 .answer{
  display: none;
  background: url(../img/quiz/07/01/03/answer.png);
}

#type1.typeA .popup3 .flower{
  display: none;
  width:100%;
  height:100%;
  position: absolute;
  left:0;
  top:0;
  z-index: 2;
}



#type1.typeA .question .yes{
  width:193px;
  height:60px;
  position: absolute;
  top:301px;
  left:312px;
  cursor: pointer;
  z-index: 3;
}

#type1.typeA .question .no{
  width:193px;
  height:60px;
  position: absolute;
  top:301px;
  left:526px;
  cursor: pointer;
  z-index: 3;
}

#type1.typeA .popup3 .answer .ok{
  width:193px;
  height:60px;
  position: absolute;
  top:323px;
  left:422px;
  cursor: pointer;
  z-index: 3;
}

/* 4번 구역 */

#type1.typeA .popup4 .intro{
  /* display: none; */
  width:100%;
  height:100%;
  position: absolute;
  left:0;
  top:0;
  background: url(../img/quiz/07/01/04/intro.png);
  z-index: 2;
}

#type1.typeA .popup4 .intro .ok{
  display: none;
  width:293px;
  height:60px;
  position: absolute;
  top: 601px;
  left: 83px;
  cursor: pointer;
  z-index: 3;
  animation: over 0.5s linear forwards;
}

#type1.typeA .popup4 .intro .ch{
  width:80px;
  height:32px;
  position: absolute;
  cursor: pointer;
  z-index: 3;
  animation: over 0.5s linear forwards;
}
#type1.typeA .popup4 .intro .ch1{left:85px;top:356px;display: none;}
#type1.typeA .popup4 .intro .ch2{left:85px;top:402px;display: none;}
#type1.typeA .popup4 .intro .ch3{left:85px;top:448px;display: none;}
#type1.typeA .popup4 .intro .ch4{left:85px;top:494px;display: none;}
#type1.typeA .popup4 .intro .ch5{left:85px;top:540px;display: none;}

#type1.typeA .popup4 .intro .text1{
  display: none;
  width:auto;
  height: auto;
  position: absolute;
  top:359px;
  left:178px;
  z-index: 11;
  animation: over 0.5s linear forwards;
}
#type1.typeA .popup4 .intro .text2{
  display: none;
  width:auto;
  height: auto;
  position: absolute;
  top:405px;
  left:178px;
  z-index: 11;
  animation: over 0.5s linear forwards;
}
#type1.typeA .popup4 .intro .text3{
  display: none;
  width:auto;
  height: auto;
  position: absolute;
  top:451px;
  left:178px;
  z-index: 11;
  animation: over 0.5s linear forwards;
}
#type1.typeA .popup4 .intro .text4{
  display: none;
  width:auto;
  height: auto;
  position: absolute;
  top:498px;
  left:178px;
  z-index: 11;
  animation: over 0.5s linear forwards;
}
#type1.typeA .popup4 .intro .text5{
  display: none;
  width:auto;
  height: auto;
  position: absolute;
  top:545px;
  left:178px;
  z-index: 11;
  animation: over 0.5s linear forwards;
}
#type1.typeA .popup4 .intro .smalltext{
  width:auto;
  height: auto;
  position: absolute;
  left:87px;
  z-index: 11;
  animation: over 0.5s linear forwards;
}
#type1.typeA .popup4 .intro .small1{top:169px;display: none;}
#type1.typeA .popup4 .intro .small2{top:209px;display: none;}
#type1.typeA .popup4 .intro .small3{top:249px;display: none;}
#type1.typeA .popup4 .intro .small4{top:289px;display: none;}

#type1.typeA .popup4 .videoarea{
  position: absolute;
  top:56%;
  left:50%;
  transform: translate(-50%, -50%);
  width:750px;
  height:422px;
  border: 9px solid #006a61;
}
#type1.typeA .popup4 .videoarea video{
  width:100%;
  height:100%;
}

#type1.typeA .popup1 .skip, #type1.typeA .popup3 .skip, #type1.typeA .popup4 .skip{
	width: 90px;
	height: 30px;
	background: url(../../common/css/img/footer/skip_w.png);
	background-size: 90px 30px;
	position: absolute;
  bottom: 30px;
  right: 30px;
	cursor: pointer;
	opacity: 0.5;
}



@keyframes over {
  0% { margin-top: 10px;opacity: 0; }
  100% { margin-top:0px;opacity: 1;}
}