@charset "utf-8";
/* CSS Document */
.extension.rd .labels a {
	width: calc(100% / 5);
	box-sizing: border-box;
}
.field { background-color:white;     padding: 15px 30px;}
.field.list {
    padding: 50px;
    display: block;
}
.list { padding: 0 50px; }
.lesson { padding: 20px 0; display:block; }
.lesson > * { display: inline-block; vertical-align: middle; }
.lesson a.no { margin-right: 18px; opacity:0.5; }
.lesson a.no:hover { opacity:1; }
.lesson .text { font-size: 28pt; width:700px; }
.lesson *:hover { cursor:inherit; }
.lesson .text > * { word-wrap:break-word; line-height:28pt; }
.lesson .text .Ch { font-size: 20pt; margin-top: 10px; color: #808080; }
.lesson .text .Type {
	font-size: 12pt;
	line-height: 7px;
	position: relative;
	margin-top: 10px;
	color: #0B6A65;
}
.Type {
	font-size: 12pt;
	margin-top: 10px;
	color: #0B6A65;
}

.field.list .link .no { margin:0 30px; }
.field.list .text { width: 670px; }

.field.rd { padding-bottom:30px; margin-bottom:30px; }
.field.rd .picture .hidden { display:none; }
.field.rd .picture { text-align:center;     padding: 20px 0px;}
.field.rd .picture > img{ width:600px;}
.field.rd .audio_1 { display:block; margin:auto; }
.wrapper {
    padding: 0% 5%;
}
.field .view_article .Ab { font-size: 20pt;line-height: 32px; margin-bottom:30px;margin-top:30px;}
.field .view_article .Ch { font-size: 17pt; color:#999; margin-bottom:30px;line-height: 30px;font-weight: normal;}

.field .view_vocabulary { text-align:center; }
.field .view_vocabulary > * { padding:30px 0;  }
.field .view_vocabulary .Ab { font-size:48pt; }
.field .view_vocabulary .Ch { font-size:36pt; }
.field .view_vocabulary .audio_1 { display:inline-block; margin:auto; }
.field .view_vocabulary .controls > * { margin:0 20px; }

.field .view_culture .Ch { font-size: 20pt; margin-bottom:30px;margin-top:30px;line-height: 32px;font-weight: normal;}

button{
	cursor: pointer;
	background: transparent;
	border: 0;
	font-size: inherit;
	font-family: inherit;
}
button:focus{
	outline: 0;
}
.field .view_pirls {
	min-height: 80vh;
	padding: 20px;
	font-size: 16pt;
	background-color: white;
	box-sizing: border-box;
}
#pirls-text {
	line-height: normal;
}
#pirls-exam {
	padding: 20px;
}
#creat-btn{
	margin: auto;
	display: block;
	border: 1px solid #ccc;
	border-radius: 10px;
	font-size: 25pt;
	padding: 3px 15px;
}
#exam-submit-btn {
	display: none;
}
.exam-item {
	display: none;
	min-height: 300px;
}
.exam-item-top {
	display: flex;
	font-size: 20pt;
	padding: 10px 0;
}
.exam-item-opts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 20px;
}
.exam-item-opt {
	display: flex;
	padding: 10px 20px;
	border: 1px outset #999;
	border-radius: 10px;
}
.exam-item-opt.selected {
	background-color: skyblue;
}
.exam-item-ans-btn {
	border: 2px outset;
	border-radius: 10px;
	margin: 10px 0;
}
.exam-item-ans-txt {
	display: none;
	border: 2px solid #999;
	padding: 10px 5px;
	line-height: normal;
}
#pirls-btns {
	display: none;
	position: absolute;
	text-align: center;
	bottom: 0;
	left: 0;
	width: 100%;
}

#loading {
	font-size: 30pt;
	text-align: center;
	font-weight: bold;
}
.loader {
  width: 35px;
  padding: 8px;
  margin: 50px auto 20px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #000000;
  --_m: 
    conic-gradient(#0000 10%,#000),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-composite: source-out;
          mask-composite: subtract;
  animation: l3 1s infinite linear;
}
@keyframes l3 {to{transform: rotate(1turn)}}
/*------------------------------| RWD |-------------------------*/
@media screen and (min-width: 1000px) {
.extension.rd .tabs a { width:166px; height:51px; display:inline-block; margin-right: 5px; }
.extension.rd .panel { 
	width: 970px;
	padding: 15px;
}
.panel select { 
	padding: 5px;
	font-size: 14pt;
	    margin-right: 20px; }
}
@media only screen and (min-width: 680px) and (max-width: 1000px) {
.extension.rd .tabs a {  width: 23%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom left; }
.extension.rd .practice:hover, .extension.rd .practice.selected {  width: 23%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom left; }
.extension .tabs a {
    display: inline-block;
    margin-right: 10px;
	height:50px;
}
.extension.rd .tabs {
    height: 50px;
}
.extension.rd .panel {
    width: 90%;
    padding: 5%;
    border-radius: 5px;
}
.panel select { 
	padding: 5px;
	font-size: 14pt;
	margin-right: 20px;
	}
}
@media screen and (max-width: 680px){
.extension .tabs {
    height: 30px;
}
.extension.rd .tabs a {
	width: 30%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom left;
	height:30px; }
.extension.rd .practice:hover, .extension.rd .practice.selected {
    background-size: contain; }
.extension .tabs a {
    display: inline-block;
    margin-right: 5px;
	height:30px;
}
.extension.sp .tabs {
    height: 30px;
}
.extension.sp .panel {
    width: 90%;
    padding: 5%;
    border-radius: 5px;
}
.panel select {
    padding: 2%;
    font-size: 14pt;
    width: 100%;
    margin: 5% 0%;
}
.field .image {
	width:100%;
}
.field .image>img {
	width:100%;
	height:100%;
}
.field .word > div {
    margin: 50px 0 0 0px;
}
.field .word .text {
    text-align: center;
    font-size: 2em;
    width: 100%;
	margin-left: 0px;
}
.no{
	width:100%;
	height:100%;
}
.link{
	    width: 20%;
}
.field .lesson .text{
	 width: 100%;
}
.field.list {
    padding: 5%;
	width:90%;
}
.extension .header .prev_1{
	position: absolute;
    top: 5%;
	left:5%;
}
.extension .header .next_1{
	    position: absolute;
    top: 5%;
	    right: 5%;
}
.extension .header{
	 padding: 5%;
	width:90%;
}
.extension .header .title {
    width: 100%;
    text-align: left;
}
.extension .header .no {
    padding: 0;
    font-size: 3em;
    margin-top: 15%;
}
.extension.rd .labels a {
    width: 20%;
    padding: 2%;
    font-size: 1.5em;
    display: inline-block;
}
.field{
	width: 90%;
    padding: 5%;
}
.field.rd .picture >img{
	width:100%;
	height:100%;
}
}