.ans-drama {
|
width: 100%;
|
height: 100%;
|
font-family: "宋体", "STKaiti", SimSun, sans-serif;
|
|
span.un1 {
|
-webkit-text-emphasis-style: dot;
|
-moz-text-emphasis-style: dot;
|
-ms-text-emphasis-style: dot;
|
text-emphasis-style: dot;
|
-webkit-text-emphasis-position: under;
|
-moz-text-emphasis-position: under;
|
-ms-text-emphasis-position: under;
|
text-emphasis-position: under;
|
}
|
|
// audio{
|
// width: 300px;
|
// height: 54px;
|
// }
|
|
.rhombusFather {
|
position: relative;
|
text-indent: 3em;
|
}
|
.rhombus {
|
position: absolute;
|
left: -23px;
|
}
|
.rhombuSpecial {
|
position: absolute;
|
left: -23px;
|
|
}
|
ul {
|
list-style-type: none;
|
}
|
|
li {
|
list-style-type: none;
|
}
|
|
.ls1 {
|
font-family: "HiFont Hei GB";
|
color: #30AAD1;
|
font-weight: bold;
|
}
|
|
.hs {
|
color: #B0441D;
|
}
|
|
.hs1 {
|
font-size: 40px;
|
color: #E78D2D;
|
font-weight: bold;
|
}
|
|
.zs1 {
|
font-family: "HiFont Hei GB";
|
color: #857EB4;
|
font-weight: bold;
|
}
|
|
span.under1 {
|
border-bottom: 2px solid #F0BD4A;
|
border-width: 2px;
|
|
}
|
|
div.bodystyle {
|
text-align: justify;
|
margin: 0 12%;
|
line-height: 30px;
|
|
}
|
|
span.zt-0 {
|
color: #0087AF;
|
}
|
|
p.pzt-0 {
|
color: #0087AF;
|
font-size: 18px;
|
}
|
|
p.pzt-0-right {
|
font-size: 18px;
|
color: #0087AF;
|
text-align: right;
|
}
|
|
p.pzt-1 {
|
font-weight: bold;
|
color: #0087AF;
|
font-size: 18px;
|
}
|
|
.note {
|
font-size: 0.85em;
|
padding: 0 9%;
|
}
|
|
.img {
|
text-align: center;
|
font-size: 0.8em;
|
color: #5D78BB;
|
margin-left: 0%;
|
margin-right: 0%;
|
text-indent: 0em;
|
}
|
|
.img1 {
|
text-align: right;
|
font-size: 0.85em;
|
margin-left: 0%;
|
margin-right: 2em;
|
text-indent: 0em;
|
}
|
|
p {
|
//margin-top:1em;
|
margin: 0;
|
text-indent: 2em;
|
line-height: 30px;
|
text-align: justify;
|
}
|
|
.cover {
|
width: 100%;
|
padding: 0px;
|
}
|
|
.center {
|
text-align: center;
|
margin-left: 0%;
|
margin-right: 0%;
|
text-indent: 0em;
|
}
|
|
.center1 {
|
font-family: "STKaiti";
|
text-align: center;
|
margin-left: 0%;
|
margin-right: 0%;
|
font-size: 1.2em;
|
text-indent: 0em;
|
font-weight: bold;
|
}
|
|
|
.left {
|
text-indent: 0em;
|
margin-left: 0%;
|
margin-right: 0%;
|
}
|
|
.left1 {
|
// font-family:"STKaiti";
|
text-indent: 0em;
|
margin-left: 0%;
|
margin-right: 0%;
|
}
|
|
.right {
|
text-align: right;
|
margin-left: 0%;
|
margin-right: 0%;
|
}
|
|
.right1 {
|
font-family: "STKaiti";
|
text-align: right;
|
margin-left: 0%;
|
margin-right: 0%;
|
}
|
|
.quote {
|
margin-top: 0%;
|
margin-bottom: 0%;
|
margin-left: 1em;
|
margin-right: 1em;
|
text-align: justify;
|
font-family: "cnepub", serif;
|
}
|
|
h1 {
|
|
font-family: "STKaiti";
|
text-align: center;
|
font-size: 1.8em;
|
color: #515594;
|
margin-bottom: 0%;
|
margin-top: 0.5cm;
|
}
|
|
h1.left-h1 {
|
text-indent: 0em;
|
text-align: left;
|
text-indent: 0em;
|
}
|
|
|
h2 {
|
font-family: "STKaiti";
|
text-align: center;
|
font-size: 1.5em;
|
margin-top: 0%;
|
margin-bottom: 1.8em;
|
text-indent: 0em;
|
}
|
|
h2.whleft2 {
|
|
text-align: left;
|
color: #AF0206;
|
font-size: 1.2em;
|
margin-top: 0.2em;
|
margin-bottom: 0.2em;
|
text-indent: 0em;
|
}
|
|
h3 {
|
font-family: "STKaiti";
|
color: #EF495D;
|
font-weight: bold;
|
font-size: 1.2em;
|
margin-top: 2em;
|
text-align: center;
|
margin-bottom: 2em;
|
text-indent: 0em;
|
}
|
|
h3.lefth3 {
|
text-align: left;
|
margin-top: 0.2em;
|
margin-bottom: 1.2em;
|
margin-left: 2em;
|
text-indent: 0em;
|
|
}
|
|
h4 {
|
|
font-weight: bold;
|
color: #5877BA;
|
font-size: 1.1em;
|
margin-top: 0.2em;
|
margin-bottom: 1em;
|
text-indent: 0em;
|
}
|
|
h5 {
|
|
font-weight: bold;
|
color: #C96653;
|
font-size: 1em;
|
margin-top: 0.2em;
|
margin-bottom: 1em;
|
text-indent: 2em;
|
}
|
|
h6 {
|
|
font-family: "cnepub", serif;
|
color: #36C3F4;
|
font-size: 1.1em;
|
margin-top: 10px;
|
text-indent: 2em;
|
margin-bottom: 10px;
|
}
|
|
.u {
|
|
text-decoration: underline;
|
}
|
|
.img-0 {
|
display: flex;
|
width: 100%;
|
}
|
|
.imz {
|
width: 96%;
|
text-align: center;
|
|
|
}
|
|
.img-a {
|
width: 95%;
|
}
|
|
.img-b {
|
width: 80%;
|
}
|
|
.img-c {
|
width: 70%;
|
}
|
|
.img-d {
|
width: 60%;
|
}
|
|
.img-e {
|
width: 50%;
|
}
|
|
.img-f {
|
width: 40%;
|
}
|
|
.img-g {
|
width: 30%;
|
}
|
|
.img-gh1 {
|
width: 30%;
|
text-align: right;
|
}
|
|
.img-gh2 {
|
width: 45%;
|
text-align: right;
|
}
|
|
.img-h {
|
width: 25%;
|
}
|
|
.img-i {
|
width: 10%;
|
}
|
|
.img-j {
|
width: 5%;
|
}
|
|
.inline {
|
height: 2em;
|
margin-bottom: -0.5em;
|
}
|
|
.inline1 {
|
height: 1.5em;
|
margin-top: -1em;
|
margin-bottom: -0.4em;
|
}
|
|
.inline2 {
|
height: 2.5em;
|
margin-top: 2em;
|
margin-bottom: -0.4em;
|
}
|
|
.inline3 {
|
height: 4em;
|
margin-top: 2em;
|
margin-bottom: -0.4em;
|
}
|
|
.block {
|
font-family: "STKaiti";
|
font-size: 1.15em;
|
font-weight: 400;
|
}
|
|
.block1 {
|
font-family: "STKaiti";
|
color: #08A496;
|
text-align: right;
|
font-size: 1.15em;
|
margin-right: 2em;
|
text-indent: 0em;
|
}
|
|
.block2 {
|
font-family: "STKaiti";
|
font-size: 1.15em;
|
text-align: center;
|
text-indent: 0em;
|
}
|
|
.block3 {
|
font-weight: bold;
|
font-family: "STKaiti";
|
font-size: 1.2em;
|
}
|
|
div.bj {
|
border: 2px solid #E04239;
|
background: #FDECD2;
|
border-style: solid none none none;
|
padding: 0.2em 0.4em 0.2em 0.4em;
|
margin-top: 1em;
|
margin-left: 0.5em;
|
margin-right: 0.5em;
|
margin-bottom: -0.8em;
|
font-size: 1.1em;
|
box-shadow: 0.3em 0.3em 0px 0px #C3C2C0;
|
}
|
|
|
.bj2 {
|
border: 2px solid #E04239;
|
background: #FDECD2;
|
border-style: solid none none none;
|
padding: 0.2em 0.4em 0.2em 0.4em;
|
margin-top: 1em;
|
margin-left: 0.5em;
|
margin-right: 0.5em;
|
margin-bottom: -0.8em;
|
font-size: 1.1em;
|
box-shadow: 0.3em 0.3em 0px 0px #C3C2C0;
|
}
|
|
.kaiti {
|
font-family: "STKaiti";
|
}
|
|
|
div.bk {
|
border: 4px dashed #3FB135;
|
padding: 0.79em;
|
margin-bottom: 2em;
|
margin-top: 1em;
|
}
|
|
div.bj1 {
|
padding: 0.01em 1em 0.01em 1em;
|
margin-top: -2.95em;
|
margin-left: -1em;
|
margin-right: -1em;
|
|
}
|
|
.img-gn {
|
height: 2em;
|
margin-bottom: -1.9em;
|
}
|
|
.img-gn1 {
|
height: 2.5em;
|
}
|
|
div.bj3 {
|
background: #C6DFA5;
|
padding: 0.2em 0.5em 0.2em 0.5em;
|
margin-top: 1em;
|
margin-left: 1em;
|
margin-right: 1em;
|
border-radius: 1em;
|
margin-bottom: 1.5em;
|
font-size: 1.1em;
|
padding-left: 1em;
|
}
|
|
// 自定义
|
.page-box {
|
position: relative;
|
box-sizing: border-box;
|
min-height: 1150px;
|
margin-bottom: 20px;
|
box-shadow: 0 3px 6px 1px #00000029;
|
background-color: #fff;
|
padding-bottom: 117px;
|
}
|
|
.fw-b {
|
font-weight: bold;
|
}
|
|
.t-l {
|
text-align: left;
|
}
|
|
textarea {
|
outline: none;
|
font-family: "STkaiti";
|
font-size: 1em;
|
margin-top: 1em;
|
}
|
|
.textarea-focused {
|
border-color: #42b983;
|
box-shadow: 0 0 5px rgba(66, 185, 131, 0.5);
|
}
|
|
input {
|
font-family: "STkaiti";
|
|
}
|
|
.folder {
|
color: brown;
|
display: flex;
|
align-items: center;
|
margin-right: 7%;
|
}
|
|
.folder>img {
|
color: brown;
|
height: 20px;
|
width: auto;
|
margin-top: 1px;
|
}
|
|
.Options {
|
display: flex;
|
flex-direction: row;
|
cursor: pointer;
|
}
|
|
.text {
|
margin: 0 8%;
|
font-family: "STkaiti";
|
}
|
|
.text1 {
|
margin-bottom: 3%;
|
font-family: "STkaiti";
|
font-size: 1.15em;
|
}
|
|
.text2 {
|
margin: 0 8%;
|
font-family: "STkaiti";
|
text-align: left;
|
}
|
|
.text3 {
|
margin: 6% 8%;
|
font-family: "STkaiti";
|
font-size: 1.58em;
|
}
|
|
//底部参考文献的样式
|
.references {
|
font-family: "STkaiti";
|
font-size: 0.8em;
|
}
|
|
//视频底部字体及图片样式
|
.videoname {
|
display: flex;
|
justify-content: center;
|
}
|
|
.collect-btn {
|
cursor: pointer;
|
width: 20px;
|
height: 20px;
|
margin-left: 10px;
|
margin-top: 0.8%;
|
}
|
|
.problem {
|
font-family: "kaiti";
|
font-size: 1.6em;
|
font-weight: normal;
|
}
|
|
.lesson1 {
|
margin-top: 0%;
|
}
|
|
ul {
|
list-style: none;
|
margin: 0;
|
padding: 0;
|
}
|
|
.fl {
|
display: flex;
|
}
|
|
.fw-wr {
|
flex-wrap: wrap;
|
}
|
|
.fl-cl {
|
flex-direction: column;
|
}
|
|
.ju-bt {
|
justify-content: space-between;
|
}
|
|
.ju-end {
|
justify-content: flex-end;
|
}
|
|
.al-cn {
|
align-items: center;
|
}
|
|
.wh-nr {
|
white-space: nowrap;
|
}
|
|
.w100 {
|
width: 100%;
|
}
|
|
.m0 {
|
margin: 0;
|
}
|
|
.mr-8 {
|
margin-right: 8px;
|
}
|
|
.mt-20 {
|
margin-top: 20px;
|
}
|
|
.mt-40 {
|
margin-top: 40px !important;
|
}
|
|
.mb-20 {
|
margin-bottom: 20px;
|
}
|
|
.mb-40 {
|
margin-bottom: 40px;
|
}
|
|
.ml-40 {
|
margin-left: 40px;
|
}
|
|
.mr-40 {
|
margin-right: 40px;
|
}
|
|
.pg-mh {
|
min-height: 1150px;
|
}
|
|
.dl-ib {
|
display: inline-block;
|
}
|
|
.w-min {
|
width: min-content;
|
}
|
|
.w40 {
|
width: 40px;
|
}
|
|
.pb-box {
|
position: absolute;
|
bottom: 0;
|
}
|
|
.m16-0 {
|
margin: 16px 0;
|
}
|
|
.auido-text {
|
font-size: 1.15em;
|
font-family: "FangSong", "PMingLiU", serif;
|
font-weight: bold;
|
}
|
|
.input-bottom-border {
|
border: 0;
|
border-bottom: 1px solid #000000;
|
width: 40%;
|
|
&:focus {
|
outline: none;
|
}
|
}
|
|
// 整行的input标签
|
.input-w-60 {
|
width: 60%;
|
}
|
|
.headerimg {
|
margin-left: 5%;
|
}
|
|
.page-footer {
|
position: relative;
|
display: flex;
|
align-items: center;
|
position: absolute;
|
bottom: 0;
|
/* 垂直居中 */
|
}
|
|
.page-footer-image {
|
/* 图片样式 */
|
max-width: 100%;
|
height: auto;
|
position: relative;
|
/* 确保.page-footer-number可以相对于图片定位 */
|
z-index: 1;
|
/* 确保页码数字在图片上方 */
|
}
|
|
.ends {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
/* 当屏幕宽度至少为600px时应用此样式 */
|
@media screen and (max-width: 430px) {
|
.ends {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
}
|
}
|
|
.option {
|
position: relative;
|
display: flex;
|
flex-direction: row;
|
//flex-wrap: nowrap;
|
width: 170px;
|
height: 250px;
|
height: min-content;
|
}
|
|
.page-footer-number-left {
|
color: black;
|
left: 15%;
|
position: absolute;
|
/* 绝对定位页码 */
|
font-size: 2em;
|
/* 你可以根据需要调整字体大小 */
|
z-index: 2;
|
|
/* 确保页码数字在图片上方 */
|
/* 使用::before伪元素创建绿色圆形背景 */
|
&::before {
|
content: "";
|
position: absolute;
|
top: 50%;
|
/* 垂直居中 */
|
left: 50%;
|
/* 水平居中 */
|
transform: translate(-50%, -50%);
|
/* 移动到中心 */
|
width: 1.2em;
|
/* 你可以根据需要调整圆形大小 */
|
height: 1.2em;
|
border-radius: 50%;
|
/* 圆形 */
|
background-color: rgba(208, 226, 179);
|
/* 背景颜色 */
|
z-index: -1;
|
/* 确保圆形背景在文本下方 */
|
}
|
}
|
|
.page-footer-number-right {
|
color: black;
|
right: 15%;
|
position: absolute;
|
/* 绝对定位页码 */
|
font-size: 2em;
|
/* 你可以根据需要调整字体大小 */
|
z-index: 2;
|
|
/* 确保页码数字在图片上方 */
|
/* 使用::before伪元素创建绿色圆形背景 */
|
&::before {
|
content: "";
|
position: absolute;
|
top: 50%;
|
/* 垂直居中 */
|
left: 50%;
|
/* 水平居中 */
|
transform: translate(-50%, -50%);
|
/* 移动到中心 */
|
width: 1.2em;
|
/* 你可以根据需要调整圆形大小 */
|
height: 1.2em;
|
border-radius: 50%;
|
/* 圆形 */
|
background-color: rgba(208, 226, 179);
|
/* 背景颜色 */
|
z-index: -1;
|
/* 确保圆形背景在文本下方 */
|
}
|
}
|
}
|
|
/* 媒体查询做基础响应式布局 */
|
@media (max-width: 660px) {
|
.ans-drama {
|
.pg-mh {
|
min-height: 815px !important;
|
}
|
|
/* 分页padding */
|
.page-padding {
|
padding: 104px 20px;
|
}
|
|
.padding-96 {
|
padding: 0 20px 104px 20px;
|
}
|
|
/* video大小 */
|
.video-box {
|
max-width: 260px;
|
}
|
|
.page-box {
|
min-height: 500px;
|
}
|
}
|
}
|
|
@media (min-width: 660px) {
|
.ans-drama {
|
.page-padding {
|
padding: 104px 96px;
|
}
|
|
.padding-96 {
|
padding: 0 96px 104px 96px;
|
}
|
|
.video-box {
|
max-width: 370px;
|
}
|
|
}
|
}
|
|
::-webkit-scrollbar {
|
width: 8px;
|
height: 10px;
|
}
|
|
::-webkit-scrollbar-track-piece {
|
background-color: rgba(0, 0, 0, 0.1);
|
-webkit-border-radius: 6px;
|
}
|
|
::-webkit-scrollbar-thumb:vertical {
|
height: 5px;
|
background-color: rgba(125, 125, 125, 0.3);
|
-webkit-border-radius: 6px;
|
}
|
|
::-webkit-scrollbar-thumb:horizontal {
|
width: 5px;
|
background-color: rgba(125, 125, 125, 0.3);
|
-webkit-border-radius: 6px;
|
}
|
