@charset "utf-8";

* {
  -webkit-tap-highlight-color: transparent;
}

@page {
    margin-left: 0;
    margin-right: 0;
}

html{/* background: rgba(255,9,0,0.5); */
  font-family: 'NanumSquareRound';
}

body {
  width: 1280px;
  height: 720px;
  overflow: hidden;
}

.handler {
  cursor: pointer;
}

.italic {
  font-style: italic !important;
}

/* 초기화 */
img {
  width: 100%;
  display: block;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
/* sup, */
tt,
var,
b,
u,
i,
center,
button,
img,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: none;
  vertical-align: top;
  outline: none;
  box-sizing: border-box;
  font-family: 'NanumSquareRound';
  font-size: 44px;
  user-select: none;
  -ms-user-select: none;
}

table,
tr,
th,
td {
  vertical-align: middle;
}

/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

ol,
ul,
li {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-spacing: 0;
  table-layout: fixed;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: inherit;
  text-decoration: none;
}

caption,
legend {
  display: none;
}

button {
  margin: 0;
  padding: 0;
  color: none;
  border: none;
  outline: none;
  background: none;
}

/*input type*/

textarea {
  resize: none;
  font-family: 'NanumSquareRound';
  background: transparent;
  font-size: 44px;
  line-height: 60px;
  color: #0000ff;
  border: none;
  overflow: hidden;
  outline: none;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
  padding: 0;
  vertical-align: top;
  height: 120px;
  min-width:900px;
}

input {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    box-shadow: none;
    border-radius: 0;
}
input[type=checkbox] {
    display: none;
}

input[type="text"] {
  font-size: inherit;
  font-family: 'NanumSquareRound';
  font-size: 44px;
  height: 50px;
  line-height: 50px;
  vertical-align: top;
  color: #0000ff;
  padding: 0;
  box-sizing: border-box;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  z-index: 10;
}

input[type=text]::-ms-clear{
  display:none;
}

#wrap{
  width: 1280px;
  height: 720px;  
  background: url(../images/bg.png) left top/100% no-repeat;  
}

.main{
  width:1260px;
  height: 646px;
  background: url(../images/bg_01.png) left top/100% no-repeat;
  position: absolute;
  left:10px;
  top:64px;
  border:1.5px solid #d25c04;
  border-radius: 20px;
}
.main.on{background: url(../images/bg_02.png) left top/100% no-repeat;}

.main.cur{background:#fff;}

.main > ol{display: none;position: absolute;left: 714px;top: -40px;}
.main > ol > li{  
  width: 152px;
  height: 38.5px;
  float:left;
  background-position: left bottom;
  background-size:100%;
}
.main > ol > li + li{ margin-left:10px; }
.main > ol > li.over,
.main > ol > li.on{height: 47.5px; margin-top:-7px;}

.main > ol > li:nth-child(1){background-image: url(../images/tap_01.png);}
.main > ol > li:nth-child(2){background-image: url(../images/tap_02.png);}
.main > ol > li:nth-child(3){background-image: url(../images/tap_03.png);}
.main > ol > li.over:nth-child(1),
.main > ol > li.on:nth-child(1){background-image: url(../images/tap_01_o.png);}
.main > ol > li.over:nth-child(2),
.main > ol > li.on:nth-child(2){background-image: url(../images/tap_02_o.png);}
.main > ol > li.over:nth-child(3),
.main > ol > li.on:nth-child(3){background-image: url(../images/tap_03_o.png);}

.main > ol.semester > li:nth-child(2){background-image: url(../images/tap_04.png);}
.main > ol.semester > li.over:nth-child(2),
.main > ol.semester > li.on:nth-child(2){background-image: url(../images/tap_04_o.png);}

.main > ol.semester > li:nth-child(3){background-image: url(../images/tap_05.png);}
.main > ol.semester > li.over:nth-child(3),
.main > ol.semester > li.on:nth-child(3){background-image: url(../images/tap_05_o.png);}


.main.on > ol,
.main.cur > ol{display: block;}

.main ul.contents{ position: absolute; left: 219px; top:184px; }
.main ul.contents > li{ width: 388px; height: 223px; float:left; }
.main ul.contents > li + li{ margin-left:47px; }
.main ul.contents > li:nth-child(1){ background: url(../images/first_choice_btn_01.png) left top/100% no-repeat; }
.main ul.contents > li:nth-child(2){ background: url(../images/first_choice_btn_02.png) left top/100% no-repeat; }
.main ul.contents > li.over:nth-child(1){ background: url(../images/first_choice_btn_01_o.png) left top/100% no-repeat; }
.main ul.contents > li.over:nth-child(2){ background: url(../images/first_choice_btn_02_o.png) left top/100% no-repeat; }

.main > p{
  position: absolute;
  left:10px;
  top: 22px;
  color:#782b01;
  font-family: 'NanumSquareRound';
  font-size: 33px;
  font-weight: bold;
  padding-left: 34px;
  background: url(../images/title_icon.png) 6px 8px/21px no-repeat;
}

.main > p > span{
  font-family: 'Nanum Square';
  font-size: 0.8em;
  color:#b0460a;
  vertical-align: top;
  line-height: 1.1em;
  padding-left: 16px;
  letter-spacing: -2.2px;
  margin-left: 2px;
  background: url(../images/title_separation.png) left 7px/4px no-repeat;
}

/* btn wrap */
.btnwrap{
  position: static;
}

.firstBtn,
.undosBtn,
.undoBtn,
.selBtn,
.nextBtn{
  width: 122.5px;
  height: 42px;
  position: absolute;
  bottom:11px;
}

.firstBtn{
  background: url(../images/btn/first_btn.png) left top/contain no-repeat;
  right: 15px;
}
.firstBtn.over{
  background: url(../images/btn/first_btn_o.png) left top/contain no-repeat;
}
.undoBtn{
	  background: url(../images/btn/btn.png) left top/contain no-repeat;
	  right: 148px;
	  right: 15px;
	font-size:17px;
	color: #fff;
	text-align:center;
	padding-top: 8px;
}
.undoBtn.over{
  background: url(../images/btn/btn_o.png) left top/contain no-repeat;
}

.undosBtn{
  background: url(../images/btn/zuruckwerfen_btn.png) left top/contain no-repeat;
  right: 15px;
}
.undosBtn.over{
  background: url(../images/btn/zuruckwerfen_btn_o.png) left top/contain no-repeat;  
}

.selBtn{
	background: url(../images/btn/btn.png) left top/contain no-repeat;
	right: 15px;
	font-size:17px;
	color: #fff;
	text-align:center;
	padding-top: 8px;
}

.selBtn.over{  
  background: url(../images/btn/btn_o.png) left top/contain no-repeat;
}


/* content */
.content411 ul{ position: absolute; left:238px; top: 189px;}
.content411 ul li{ width: 368px; height: 303px; float: left;  }
.content411 ul li + li{ margin-left:47px; }
.content411 ul li:nth-child(1){ background: url(../images/choice_btn_01.png) left top/contain no-repeat; }
.content411 ul li:nth-child(2){ background: url(../images/choice_btn_02.png) left top/contain no-repeat; }
.content411 ul li.over:nth-child(1){ background-image: url(../images/choice_btn_01_o.png);}
.content411 ul li.over:nth-child(2){ background-image: url(../images/choice_btn_02_o.png);}

.content412 ul{
  position: absolute;
  left:97.5px;
  top:136px;
  width: 566.5px;
  height: 397.5px;
  background: url(../images/object/triangle_bg.png) left top/100% no-repeat;
}

.content412 ul li{ position: absolute;}
.content412 ul li:nth-child(1){
  left:357px;
  top:45.5px;
  width: 161px;
  height: 150px;
  background: url(../images/object/triangle_01.png) left top/contain no-repeat;
}

.content412 ul li:nth-child(2){
  left:321.5px;
  top:134px;
  width: 111.5px;
  height: 199.5px;
  background: url(../images/object/triangle_02.png) left top/contain no-repeat;
}

.content412 ul li:nth-child(3){
  left:144px;
  top:42px;
  width: 167.5px;
  height: 260.5px;
  background: url(../images/object/triangle_03.png) left top/contain no-repeat;
}

.content412 ul li:nth-child(4){ left:33.5px; top:201.5px; width: 136.5px; height: 156.5px;  background: url(../images/object/triangle_04.png) left top/contain no-repeat; }
.content412 ul li:nth-child(5){ left:43px; top:45px; width: 122.5px; height: 105.5px;  background: url(../images/object/triangle_05.png) left top/contain no-repeat; }

.content412 svg{
  position: absolute;
  left:97.5px;
  top:136px;
  width: 566.5px;
  height: 397.5px;
}

.content412 svg polygon{ fill: transparent; }
.content412 .img01{    
  position: absolute;
  left:773px;
  top:75px;
  width: 287px;
  height: 485px;  
  background-image:url(../images/object/triangle.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.content412 + .btnwrap .Btn,
.content413 + .btnwrap .Btn{
  position: absolute;
  left:1101px;
  top:583.5px;
  width: 143px;
  height: 40px;
  background: url(../images/btn/cut_btn.png) left top/contain no-repeat;
}

.content412 + .btnwrap .Btn.over{
  background: url(../images/btn/cut_btn_o.png) left top/contain no-repeat;  
}

.content413 + .btnwrap .Btn{
  background: url(../images/btn/collage_btn.png) left top/contain no-repeat;
}
.content413 + .btnwrap .Btn.over{
  background: url(../images/btn/collage_btn_o.png) left top/contain no-repeat;
}

.content413 [class^="img"]{
  position: absolute;
  left:499.5px;
  top:100px;
  width: 288.5px;
  height: 481.5px;
}

.content413 .cut{
  position: absolute;
  left:1124px;
  top:486.5px;
  width: 75.5px;
  height: 70.5px;
  background: url(../images/object/scissors.png) left top/100% no-repeat;
}

.content413 .img01{
  background: url(../images/object/triangle.png) center/contain no-repeat;
}

.content413 .img02{padding:20px; opacity: 0; pointer-events: none; user-select: none; }
.content413 .img02.on{ opacity: 1; pointer-events: all; user-select: auto; }
.content413 .img02 > div{ position: absolute; display: inline-block; transform-origin: center; }
.content413 .img02 > div:nth-child(1){
  left: 65px;
  top: -11px;
  width: 141.5px;
  height: 253px;  
  transform: translate(9px, 16px );
}

.content413 .img02 > div:nth-child(1) > div{
  width: 100%;
  height: 100%;
  background: url(../images/object/triangle_cut01.png) left top/contain no-repeat;
}

.content413 .img02 > div:nth-child(1) .rotimg{
  left: 56px;
  top: 125px;
  z-index: 10;
  transform-origin: 56px 125px;
}

.content413 .img02 > div:nth-child(2){
  right: -10px;
  bottom: 91px;
  width: 171px;
  height: 242.5px;
  transform: translate(-4px, 4px );
}

.content413 .img02 > div:nth-child(2) > div{
  width: 100%;
  height: 100%;
  background: url(../images/object/triangle_cut02.png) left top/contain no-repeat;
}

.content413 .img02 > div:nth-child(3){
  left: -3px;
  bottom: -6px;
  width: 140.5px;
  height: 239.5px;  
  transform: translate(14px, -5px );
}

.content413 .img02 > div:nth-child(3) > div{
  width: 100%;
  height: 100%;
  background: url(../images/object/triangle_cut03.png) left top/contain no-repeat;
}

.content413 .img02.on > div{
  transform: translate(0);
  transition:transform 0.5s 0s ease-in-out;
}

.content413 .img02.on > div > span{
  opacity: 1;
  transition:all 0.5s 0.5s ease-in-out;
}

.ui-rotatable-handle {
  height: 22px;
  width: 22px;
  cursor: pointer;
  background: url(../images/object/rotate.png) center/contain no-repeat;
  position: absolute;
  top: -30%;
  left: -5%;
  z-index: 3;
}
#draggable3 .ui-rotatable-handle {top: -15%; left: 47%;}

.add0 .ui-rotatable-handle {top: -43%; left: 35%;}
.add1 .ui-rotatable-handle {top: -22%; left: 43%;}
.add2 .ui-rotatable-handle {top: -41%; left: 43%;}
.add3 .ui-rotatable-handle {top: -39%; left: 37%;}
.add4 .ui-rotatable-handle {top: -42%; left: 43%;}
.add5 .ui-rotatable-handle {top: -20%; left: 23%;}

.content414 + .gnb{left:379.5px; top:516px; }

.con414ul{position: absolute; left:742px; top:163px; }
.con414ul li + li{ margin-top:10px;}
.con414ul li{ width: 141px; height: 80.5px; }

.con414ul li:nth-child(1){ background: url(../images/btn/roll_btn.png) left top/100% no-repeat; }
.con414ul li:nth-child(2){ background: url(../images/btn/reverse_btn.png) left top/100% no-repeat; }
.con414ul li:nth-child(3){ background: url(../images/btn/turn_btn.png) left top/100% no-repeat; }

.con414ul li.over:nth-child(1),
.con414ul li.on:nth-child(1){ background: url(../images/btn/roll_btn.png) left top/100% no-repeat; }

.con414ul li.over:nth-child(1),
.con414ul li.on:nth-child(1){ background: url(../images/btn/roll_btn_o.png) left top/100% no-repeat; }
.con414ul li.over:nth-child(2),
.con414ul li.on:nth-child(2){ background: url(../images/btn/reverse_btn_o.png) left top/100% no-repeat; }
.con414ul li.over:nth-child(3),
.con414ul li.on:nth-child(3){ background: url(../images/btn/turn_btn_o.png) left top/100% no-repeat; }

.content414 .bg{
  position: absolute;
  left:379.5px;
  top:127.5px;
  width: 334.5px;
  height: 335px;
  background: url(../images/object/graphpaper_01.png) left top/100% no-repeat;
}

.content415{
  position: absolute;
  left:354.5px;
  top:76px;  
  width: 545px;
  height: 545px;
  background: url(../images/object/graphpaper_02.png) left top/545px no-repeat;
}

.content415 li{position: absolute;z-index: 1;}

.content415 > div{
  position: absolute;
  left:202px;
  top:201.5px;
  width: 142px;
  height: 142px;
  background-color: rgba(255,0,0,0.5);
}
.content415 > div > div{
  position: absolute;
  left:0px;
  top:0px;
  width: 100%;
  height: 100%;
  transform: translate(0,0) rotate(0deg) scale(1,1);
  opacity: 0;
  background-color: rgba(0,84,255,0.5);
  z-index: 1;
}
.content415 > div > div.on{  
  opacity: 1;
}
/* 밀기 */
.content415.type1 li:nth-child(odd){width: 25px; height: 33px; left:261px; }
.content415.type1 li:nth-child(even){width: 33px;height: 25px;top: 260.5px;}
.content415.type1 li:nth-child(1){background: url(../images/push1.png) left top/contain no-repeat; top:157px; }
.content415.type1 li:nth-child(2){background: url(../images/push2.png) left top/contain no-repeat;left: 357.5px;}
.content415.type1 li:nth-child(3){background: url(../images/push3.png) left top/contain no-repeat; top:355px; }
.content415.type1 li:nth-child(4){background: url(../images/push4.png) left top/contain no-repeat;left: 152.5px;}

.content415.type1 > div > div.on{transition: all 0.5s ease-in-out;}
.content415.type1 > div > div.on:nth-child(1){
  transform: translate(0,-199px);
}
.content415.type1 > div > div.on:nth-child(2){
  transform: translate(199px,0);
}
.content415.type1 > div > div.on:nth-child(3){
  transform: translate(0,199px);
}
.content415.type1 > div > div.on:nth-child(4){
  transform: translate(-200px,0);
}

/* 뒤집기 */
.content415.type2 li:nth-child(odd){width: 142px;height: 33px;left: 202px;}
.content415.type2 li:nth-child(even){width: 30px;height: 142px;top: 202.5px;}
.content415.type2 li:nth-child(1){ background: url(../images/arrow_01_top.png) left top/contain no-repeat; top:157px; }
.content415.type2 li:nth-child(2){ background: url(../images/arrow_03_right.png) left top/contain no-repeat;left: 357.5px;}
.content415.type2 li:nth-child(3){background: url(../images/arrow_04_bottom.png) left top/contain no-repeat;top: 357px;}
.content415.type2 li:nth-child(4){background: url(../images/arrow_02_left.png) left top/contain no-repeat;left: 157.5px;}

.content415.type2 > div > div.on{
  transition: opacity 0.5s ease-in-out,
              transform 0.5s 0.5s ease-in-out,
              left 0.5s 0.5s ease-in-out,
              top 0.5s 0.5s ease-in-out;
}
.content415.type3 > div > div.on{
  transition: opacity 0.5s ease-in-out,
              transform 1s 0.5s ease-in-out,
              left 0.5s 1.5s ease-in-out,
              top 0.5s 1.5s ease-in-out;
}

.content415.type2 > div > div.on:nth-child(1){
  transform: scale(1,-1);
  top:-199px;
}
.content415.type2 > div > div.on:nth-child(2){
  transform: scale(-1,1);
  left:199px;
}
.content415.type2 > div > div.on:nth-child(3){
  transform: scale(1,-1);
  top:199px;  
}
.content415.type2 > div > div.on:nth-child(4){
  transform: scale(-1,1);
  left:-200px;
}

/* 돌리기 */
.content415.type3 li:nth-child(odd){width: 33px;height: 33px;left: 256px;}
.content415.type3 li:nth-child(even){width: 33px;height: 33px;top: 257.5px;}
.content415.type3 li:nth-child(1){background: url(../images/rot1.png) left top/contain no-repeat;top: 155px;}
.content415.type3 li:nth-child(2){background: url(../images/rot2.png) left top/contain no-repeat;left: 356.5px;}
.content415.type3 li:nth-child(3){ background: url(../images/rot3.png) left top/contain no-repeat; top:355px; }
.content415.type3 li:nth-child(4){background: url(../images/rot4.png) left top/contain no-repeat;left: 154.5px;}

.content415.type3 > div > div.on:nth-child(1){
  animation: spin 1s 0.5s 1 linear;
  top:-199px;
}
.content415.type3 > div > div.on:nth-child(2){
  transform: rotate(90deg);
  left:199px;
}
.content415.type3 > div > div.on:nth-child(3){
  top:199px;
  transform: rotate(-180deg);
}
.content415.type3 > div > div.on:nth-child(4){
  animation: spin2 1s 0.5s 1 linear;
  left:-200px;
}

@keyframes spin { 
  from { 
      transform: rotate(0deg); 
  } to { 
      transform: rotate(360deg); 
  }
}

@keyframes spin2 { 
  from { 
      transform: rotate(0deg);
  } to { 
      transform: rotate(270deg); 
  }
}

.content421 svg{
  position: absolute;
  top:83.5px;
  left:125.5px;
  width: 997.5px;
  height: 474.5px;
  background: url(../images/object/4_2_1_bg.jpg) left top/contain no-repeat;
}

.content421 svg > g *{
  stroke-width: 5px;
  stroke: transparent;
  fill: transparent;
}

.content421 svg > g.over *{  
  fill: #fff200;
}

.content422{
  position: absolute;
  left:0px;
  bottom:0px;
  width: calc( 100% - 83.5px);
  height: 592px;
}

.content422.on0{
  background: url(../images/object/img-01.png) 541px 78px/626px no-repeat;
}
.content422.on1{
  background: url(../images/object/img-02.png) 541px 78px/626px no-repeat;
}
.content422.on2{
  background: url(../images/object/img-03.png) 541px 64px/626px no-repeat;
}
.content422.on3{
  background: url(../images/object/img-04.png) 541px 42px/614px no-repeat;
}
.content422.on4{
  background: url(../images/object/img-05.png) 541px 55px/626px no-repeat;
}
.content422.on5{
  background: url(../images/object/img-06.png) 543px 21px/614px no-repeat;
}


.content422 ul{
  position: absolute;
  left:116px;
  top:80px;
}
.content422 ul > li{ position: absolute; transform-origin: center; cursor:pointer;}
.content422 .ui-rotatable-handle{
  top:50%;
  margin-top:-11px;
  left: 50%;
  margin-left: -11px;
}
.content422 ul > li:nth-child(1){
  left: 31px;
  top: 26px;
  width: 75.5px;
  height: 62.5px;
  background: url(../images/object/figure01.png) center/contain no-repeat;
}
.content422 ul > li:nth-child(2){
  left:175px;
  top:0px;
  width: 154px;
  height: 129px;
  background: url(../images/object/figure02.png) center/contain no-repeat;
}
.content422 ul > li:nth-child(3){
  left: 22px;
  top: 190px;
  width: 115px;
  height: 64px;
  background: url(../images/object/figure03.png) center/contain no-repeat;
}
.content422 ul > li:nth-child(4){
  left: 212px;
  top: 185px;
  width: 74px;
  height: 74px;
  background: url(../images/object/figure04.png) center/contain no-repeat;
}
.content422 ul > li:nth-child(5){
  left:0px;
  top: 334px;
  width: 147px;
  height: 63px;
  background: url(../images/object/figure05.png) center/contain no-repeat;
}
.content422 ul > li:nth-child(6){
  left: 228px;
  top: 292px;
  width: 38px;
  height: 147px;
  background: url(../images/object/figure06.png) center/contain no-repeat;
}
.content422 .selBtn{
  width: 123px;
  height: 40px;
  position: absolute;
  background: url(../images/btn/sel.png) center/contain no-repeat;
}

.content423 ul{position: absolute; left:354px; top:205.5px; }
.content423 li{ float:left;  height: 180px; }
.content423 li:nth-child(1){width: 209px;position: relative;background-color:#02a71a;}
.content423 li:nth-child(2){ width: 180px; background-color:#0072bb; margin-left:159.5px;}
.content423 li span{ width: 100%; height: 100%; background: transparent; display: inline-block; }
.content423 li:nth-child(1):after,
.content423 li:nth-child(1):before{
  content: "";
  width: 50%;
  height: 116%;
  position: absolute;
  top: -54px;
  /* left:0px; */
  background-color: rgba(255,255,255,1);
}

.content423 li:nth-child(1):after{
  transform-origin: left top;
  transform: rotate(30deg);
  left: 14px;  
}

.content423 li:nth-child(1):before{
  transform-origin: right top;
  transform: rotate(-30deg);
  right: 14px;
}

.content424 ul{position: absolute;left:30px;top: 358px;width: 141px;}
.content424 li{ width: 141px; height: 80.5px; float:left;}
.content424 li+li{margin-top: 10px;}
.content424 li:nth-child(1){ background: url(../images/btn/ruler_btn.png) center/contain no-repeat;}
.content424 li:nth-child(2){ background: url(../images/btn/triangle_btn.png) center/contain no-repeat;}
.content424 li:nth-child(3){ background: url(../images/btn/protractor_btn.png) center/contain no-repeat;}

.content424 li.over:nth-child(1),
.content424 li.showOn:nth-child(1){ background: url(../images/btn/ruler_btn_o.png) center/contain no-repeat;}
.content424 li.over:nth-child(2),
.content424 li.showOn:nth-child(2){ background: url(../images/btn/triangle_btn_o.png) center/contain no-repeat;}
.content424 li.over:nth-child(3),
.content424 li.showOn:nth-child(3){ background: url(../images/btn/protractor_btn_o.png) center/contain no-repeat;}

.ruler {
  display: inline-block;    
  cursor: move;
  transform: rotate(0deg);
  position: relative;
  left: 488px;
  top: 522px;
  z-index: 10;

  width: 500px;
  height: 50px;
  background: url(../images/ja.png) no-repeat;
  background-size: contain;    
}

.protractor {
  position: relative;
  display: inline-block;
  left: -190px;
  top: 400px;
  width: 380px;
  height: 208px;
  background: url(../images/protractor3.png) top no-repeat;
  background-size: contain;
  cursor: move;
  transform: rotate(0deg);
  transform-origin: 50% 191px;
  z-index: 1;
}

.tri {
  position: relative;
  display: inline-block;
  left: 126px;
  top: 320px;
  width: 190px;
  height: 283px;
  background: url(../images/tri.png) no-repeat;
  background-size: contain;
  cursor: move;
  transform: rotate(0deg);
  z-index: 3;
  transform-origin: 81px 179px;
}


/*******************************/

#second_pop,#third_pop{
	width: 30000px;
	height: 30000px;
	position: absolute;
	top:50%;
	left:50%;
	margin-left:-15000px;
	margin-top:-15000px;
	z-index:50;
	display: none;
}


#second_pop,#third_pop{
	background: rgba(0,0,0,0.5);	
}

#second_pop > div,#third_pop > div{
	width: 1280px;
	height: 720px;	
	position: absolute;
	left:50%;
	top:50.01%;
	margin-left: -640px;
	margin-top: -363px;	
}

/*******************************/
.fourth_pop{
	width: 1280px;
	height: 720px;
	position: absolute;
  top: 0px;
	left:0px;
  z-index:60;
  display: none;
}

.fourthframe{
	width: 1280px;
	height: 720px;	
	position: absolute;
	left:0px;
	top:0px;

}

.sub_pop{
  position: absolute;
  left: 177px;
  top: 69px;
  width: 1080px;
  height: 565px;
  display: none;
}

.subframe{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1080px;
  height: 565px;
}


.nextBtn{
	background: url(../images/btn/btn.png) left top/contain no-repeat;
	right: 15px;
	font-size:17px;
	color: #fff;
	text-align:center;
	padding-top: 8px;
}

.nextBtn.over{
  background: url(../images/btn/btn_o.png) left top/contain no-repeat;
}


.picBtn.on *{  
  fill: #fff200;
}


.add0{background: url(../images/object/figure01.png) center/contain no-repeat; cursor:pointer;}
.add1{background: url(../images/object/figure02.png) center/contain no-repeat; cursor:pointer;}
.add2{background: url(../images/object/figure03.png) center/contain no-repeat; cursor:pointer;}
.add3{background: url(../images/object/figure04.png) center/contain no-repeat; cursor:pointer;}
.add4{background: url(../images/object/figure05.png) center/contain no-repeat; cursor:pointer;}
.add5{background: url(../images/object/figure06.png) center/contain no-repeat; cursor:pointer;}

.btn424 .undoBtn{
  right: 156px;
}

.btn422 .undoBtn{
  right: 149px;
}
.btn_img{
	 background: url(../../plugins/images/11_dic/close_btn_over.png.png) center/100% no-repeat;
	 background-size:50px 50px;
	 width: 50px;
     height: 50px;
     top: -66px;
     right: 2px;
	 position:absolute;
	 
}