.ex1 {
  display: flex;
  justify-content: space-between;
  gap:1rem;
  margin-top: 2rem;
  position: relative;
}
/* .ex1 button {
  position: absolute;
  width: 100%;
  height: 100%;
  top:0; left:0;
  z-index: 1;
} */
.ex1-scroll {
  display: flex;
  flex-direction: column;
  gap:0;
  align-items: center;
  position: relative;
  flex:1;
}
.ex1-wrap {
  display: flex;
  justify-content: space-between;
  gap:1rem;
}
.ex1-scroll [data-toggle-target] {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}
.ex1-scroll--main{
  position: relative;
}

.ex1-scroll--header{
  position: relative;
  height: 3.8rem;
  width: 100%;
  flex-shrink:0;
}
.ex1-scroll--header[data-toggle-object="ex1"] {
  background: url(./images/scroll-top1.png) no-repeat 0 0 / 100% 100%;
}
.ex1-scroll--header[data-toggle-object="ex2"] {
  background: url(./images/scroll-top2.png) no-repeat 0 0 / 100% 100%;
}
.ex1-scroll--header[data-toggle-object="ex3"] {
  background: url(./images/scroll-top3.png) no-repeat 0 0 / 100% 100%;
}
.ex1-scroll--header::before{
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top:0; left:0;
  opacity: 0;
}
.ex1-scroll--header[data-toggle-object="ex1"]::before {
  background: url(./images/scroll-top1-hover.png) no-repeat 0 0 / 100% 100%;
}
.ex1-scroll--header[data-toggle-object="ex2"]:before {
  background: url(./images/scroll-top2-hover.png) no-repeat 0 0 / 100% 100%;
}
.ex1-scroll--header[data-toggle-object="ex3"]:before {
  background: url(./images/scroll-top3-hover.png) no-repeat 0 0 / 100% 100%;
}
.ex1-scroll--header:focus::before,
.ex1-scroll--header:hover::before{opacity: 1;}


.ex1-scroll--header img{
  display: block;
  width: 100%;
}
.ex1-scroll--header span{
  position: absolute;
  top:0; left:0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 500;
  color:#fff;
}

.my-answer .ex1-scroll--main,
.complete .ex1-scroll--main,
[data-toggle-target][data-toggle-state="true"],
[data-toggle-state="true"] .ex1-scroll--main {
  height: 100%;
}
[data-toggle-state="true"] .ex1-scroll--main ol {
  min-height:28rem;
}
/* [data-n1] .ex2--select-radio[value="1"] {pointer-events: none; opacity: .3;}
[data-n2] .ex2--select-radio[value="2"] {pointer-events: none; opacity: .3;}
[data-n6] .ex2--select-radio[value="6"] {pointer-events: none; opacity: .3;}
[data-n8] .ex2--select-radio[value="8"] {pointer-events: none; opacity: .3;}
[data-n9] .ex2--select-radio[value="9"] {pointer-events: none; opacity: .3;} */
.ex1-scroll--main {
  overflow: hidden;
  height: .6rem;
  transition: height .3s ease-out;
  border-left:.6rem solid #5F8896;
  border-right:.6rem solid #5F8896;
  background-color: #F1E4B9;
  padding: 0 .8rem;
  width: calc(100% - 1.3rem);
  box-shadow: inset 0 .3rem .3rem rgba(0, 0, 0, 0.2);
}
.ex1-scroll:nth-of-type(2) .ex1-scroll--main {
  border-left:.6rem solid #9D8251;
  border-right:.6rem solid #9D8251;
}
.ex1-scroll:nth-of-type(3) .ex1-scroll--main {
  border-left:.6rem solid #637B55;
  border-right:.6rem solid #637B55;
}
.ex1-scroll > [data-toggle-target]::after {
  content:"";
  display: block;
  width: 100%;
  height: 1.4rem;

  background: url(./images/scroll-bottom1.png) no-repeat 0 0 / 100% 100%;
}
.ex1-scroll:nth-of-type(1) > [data-toggle-target]::after {
  background: url(./images/scroll-bottom1.png) no-repeat 0 0 / 100% 100%;
}
.ex1-scroll:nth-of-type(2) > [data-toggle-target]::after {
  background: url(./images/scroll-bottom2.png) no-repeat 0 0 / 100% 100%;
}
.ex1-scroll:nth-of-type(3) > [data-toggle-target]::after {
  background: url(./images/scroll-bottom3.png) no-repeat 0 0 / 100% 100%;
}
.ex1-scroll--main ol{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 1.9rem;
  padding-bottom: 1.9rem;

}
.ex1-scroll--main li {
  position: relative;
  padding-left: 2.2rem;
  font-size: 1.6rem;
  line-height: 2.8rem;
  text-align: justify;
  word-break: break-all;
}
.ex1-scroll--main li .num {
  display: flex;
  font-weight: 500;
  font-size: 1.2rem;
  display: flex;
  padding-top:0rem;
  text-indent: -.1rem;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0.5rem;
  left:0;
  color:#fff;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background-color: #6B7B84;
  font-family: 'pt';
}

.ex2 {
  position: relative;
  width: 100%;
  height: 19rem;
}
[data-mode="complete"] .ex2 .ex2--history-number.box input[data-result-answer="X"] {
  outline:0 !important
}
.ex2::before{
  content:"";
  position: absolute;
  display: block;
  width: 100%;
  height: 0.9rem;
  background: url(./images/arrow-l.svg) no-repeat 0 0 / 100%;
  top:13rem;
  left: 0;
}
.ex2::after{
  content:"";
  position: absolute;
  display: block;
  width: .2rem;
  height: 16.8rem;
  background: url(./images/line-dot.png) repeat-y 0 0 / .2rem;
  bottom: 0rem;
  left: calc(50% - -0.5rem);
}
.ex2--select-div {
  width: 23.8rem;
  height: 7.1rem;
  background: url(./images/tooltip.svg) no-repeat 0 0 / cover;
  display: none;
  align-items: center;
  justify-content: center;
  gap:1.2rem;
  padding-bottom:1.4rem;
  position: absolute; 
  top: -7.5rem; 
  left: 50%;
  transform: translate(-50%, 0);
}
.ex2--select-div[aria-hidden="true"] {display: none;}
.ex2--select-div[aria-hidden="false"] {display: flex;}
.ex2--select-radio:focus {
  outline: .2rem solid #000;
}
.ex2--select-radio {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #808184;
  font-size: 1.5rem;
  color: #fff;
  font-family: 'pt';
}
.ex2--select-radio:hover {
  background-color:#414246;
}
.ex2--before {
  position: absolute;
  top: 4rem;
  left: 0;
  width: calc(50% - -0.6rem);
  justify-content: flex-end;
  display: flex;
  gap:1.8rem;
  align-items: center;
}
.ex2--before::after{
  content: "";
  display: block;
  width: 5.5rem;
  height: .9rem;
  background: url(./images/arrow-before.svg) no-repeat 0 50% / cover;
}
.ex2--after {
  position: absolute;
  top: 4rem;
  left: calc(50% - -0.6rem);
  display: flex;
  gap:1.8rem;
  align-items: center;
}
.ex2--after::before{
  content: "";
  display: block;
  width: 5.5rem;
  height: .9rem;
  background: url(./images/arrow-after.svg) no-repeat 0 50% / cover;
}
.ex2--history-item {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap:3rem;
  top: 8.1rem;
  z-index: 2;
}
.ex2--history-item.n1 {left: 2rem;}
.ex2--history-item.n2 {left: 14.2rem;}
.ex2--history-item.n3 {left: 24.9rem;}
.ex2--history-item.n4 {left: 32.1rem;}
.ex2--history-item.n5 {left: 41.5rem;}
.ex2--history-item.n6 {left: 46.6rem;}
.ex2--history-item.n7 {left: 52.1rem;}
.ex2--history-item.n8 {left: 56.7rem;}
.ex2--history-item.n9 {left: 64.1rem;}

.ex2--history-item[data-view="select"] .ex2--select-div{
  display: flex;
}

.ex2--select-button{
  position: absolute;
  top:0;
  left:calc(50% - 1.5rem); 
  width: 3rem;
  height: 3rem;
  z-index: 2;
}
.ex2--history-year {
  height: 2.3rem;
  display: flex;
  justify-content: center;
  
}
/* .page .ex2--history-year .katex{font-size: 1.8rem;} */
.ex2--history-number.box input{
  position: relative;
  z-index: 1;
}
[data-mode="complete"]e .ex2--history-number.box [data-result-answer="X"] {
  border: 0 !important;
}
[data-mode="complete"] .ex2--history-number.box [data-result-answer="X"] + span {
  border: 0.1rem solid #D54551 !important;
  background-color: #fff5f6 !important;
  color: #D54551 !important;
}
.ex2--history-number.box span {
  pointer-events: none;
  position: absolute;
  width: 3.6rem;
  height: 3.6rem;
  border: .1rem solid #000;
  z-index: 0;
}
.ex2--select-button:hover ~ .ex2--history-number.box span {
  background-color:#EBF1F5;
}
.ex2--history-number {
  position: relative;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #808184;
  font-size: 1.6rem;
  line-height:1;
  color: #fff;
  font-family: 'pt';
  
}
.ex2--select-button ~ .ex2--history-number {
  background-color: transparent;
  border:.1rem solid transparent;
} 
.ex2--history-number input[data-input="true"] {
  border:.1rem solid #808184;
  background-color: #808184;
  color: #fff;
}
.ex2--history-number input{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  text-align: center;
  border:none;
  background-color: transparent;
  color: #fff !important;
}
.ex2--history-number::before{
  content:"";
  display: block;
  width: .6rem;
  height: 2.5rem;
  background: url(./images/arrow-s.svg) no-repeat 50% 0 / cover;
  top: 3.2rem;
  left:calc(50% - .3rem);
  position: absolute;
}
.ex2--history-year {
  width: 4.5rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
}
.ex2--history-year input {
  width: 100%;
  height: 2.4rem;
  text-align: center;
  border:.1rem solid #000;
  background-color: #fff;
  font-family:'KaTeX_Main' !important;
  font-size:1.21em;
}

.ex2-result {
  position: absolute;
  top:0; 
  left:0;
}
.page-result--item .ex2 p{margin-bottom: 2rem;}
.page-result--item .ex2{
  width: 100%;
  transform-origin: 50% 0;
}
.page-result--item .ex2--history-number.box span{background-color: #fff; z-index: -1;}
.ex2[data-toggle-state="true"]{pointer-events: none;}
.ex2--history-year.box {
  border:.1rem solid #000;
  background-color: #fff;
  padding:.4rem .6rem;
  font-size:1.6rem;
}

[data-mode="complete"] .ex1-scroll--main {height:29rem; max-height: 80rem;}
[data-mode="complete"] .ex1-scroll--main {height:29rem; max-height: 80rem;}
[data-mode="complete"] .ex1-scroll--main {height:29rem; max-height: 80rem;}
[data-mode="complete"] .ex2--select-button{pointer-events: none;}
[data-mode="complete"] .ex1-scroll--header{pointer-events: none;}
[data-answer-group="1"] {
  position: relative;
}
.btn-reset {
  position: absolute;
  top:9rem;
  right:0rem;
}
[data-mode="complete"] .ex2--history-number [data-result-answer="X"] {
  border: 1px solid transparent !important;
}
[data-mode="complete"] .ex2--history-number [data-result-answer="X"][data-input="true"] {
  border: 1px solid #D54551 !important;
  background-color: #D54551 !important;
  color: #fff5f6 !important;
}