@charset "utf-8";
body{ overflow-x:hidden;}
body{ color:#3e3a39; height:auto; box-sizing:border-box; font-size:14px; padding-top: 0px; background-color: #f5f5f5;}
.course{-moz-user-select: none; /*火狐*/
-webkit-user-select: none;  /*webkit浏览器*/
-ms-user-select: none;   /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;}
a{ color:#3e3a39; text-decoration:none;}
a:hover{ text-decoration:none; color:#2662a7;}
i,em{ font-style:normal;}

.ffffffffff{font-family:"iconfont" !important; font-size:1em; font-style:normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.ttttttttt{transition: all 0.3s ease-out;}
.ddddddddd{ transform:scale(1.05,1.05);}

.init{ position: fixed; left: 0px; top: 0px; bottom: 0px; right: 0px; z-index: 99;}
.initFl{ position: fixed; left: 0px; top: 0px; bottom: 0px; width: 456px; z-index: 5;background: rgba(255,255,255,.8); backdrop-filter: blur(50px); border-right: 1.5px solid rgba(255,255,255,.9); display: flex; justify-content: center; align-items: center;}
.initLogo{ position: absolute; left:30px; top: 30px;}
.initLogo img{ height: 32px; width: auto; display: block;}
.initCon{ width: 304px;}

.fileInfoA{ margin-bottom: 50px;}
.fileInfoA .pd{ display: flex;}
.fileInfoA .img{ width: 100px; height: 100px; display: flex; justify-content: center; align-items: center; line-height: 1; font-size: 48px; text-align: center; background: #fff; border-radius: 50%; color: #fff;box-shadow: 0 2px 6px 0 rgba(0,0,0,0.1);}
.fileInfoA .img svg{ width: 1em; height: 1em; display: block;}
.fileInfoA .text{ padding-left: 16px; box-sizing: border-box; width:calc(100% - 100px); display: flex; align-items: center; flex-wrap: wrap; align-content: center;}
.fileInfoA .h3{ font-size: 18px; line-height: 1.3; height: 2.6em; margin-bottom: 0.2em; overflow: hidden; color: #000;}
.fileInfoA .p{ color: #666;}
.filePassword{}
.filePassword li{ margin-bottom: 28px;}
.filePassword li:last-child{ margin-bottom: 0px;}
.filePassword .pd{}
.ipt_t1{ width: 100%; height: 54px; display: block; border-radius: 27px; font-size: 18px; padding: 0 40px;border: 2px solid rgba(0,0,0,.05);background: rgba(255,255,255,.15); box-sizing: border-box;}
.ipt_b1{ width: 100%; box-sizing: border-box; height: 56px; border: none; background: #06a7ff; color: #fff; font-size: 18px; font-weight: bold; border-radius: 28px;}
.ipt_b1:hover{ background: #8f0020;}
.initFr{ position: fixed; left: 0px; top: 0px; right: 0px; bottom: 0px; z-index: 4;}
.initFr img{ display: block; width: 100%; height: 100%; object-fit: cover; }

.wp{ position: relative; width: 1160px; margin: 0 auto;}
.frame{ padding:64px 0 0 0;}
.frameHead{ background: #fff; position: fixed; left: 0px; top: 0px; right: 0px; box-shadow: 0 2px 6px 0 rgba(0,0,0,.05); padding: 16px 0; z-index: 6;}
.frameHead .wpd{ display: flex; justify-content: space-between;}
.frameLogo{ font-size: 32px;}
.frameLogo img{ height: 1em; width: auto; display: block;}
.frameMenu{ font-size: 16px;}
.frameMenu ul{ display: flex; justify-content: flex-end; align-items: center;}
.frameMenu li{ margin-left: 16px;}
.frameMenu li a{ height: 32px; line-height: 32px; display: block; font-size: 16px;}
.frameCon{ padding: 30px 0;}
.frameCon .wpd{}
.frameFl{ background: #fff; border-radius: 12px; margin-right: 180px;}
.frameFl .wpd{ padding: 20px;}
.frameTop{border-bottom: 1px solid #f6f6f6; padding-bottom: 20px; align-items: center; position: relative; z-index: 3;}

.fileInfoB{ margin-right: 192px;}
.fileInfoB .pd{ overflow: hidden;}
.fileInfoB .img{ width: 48px; height: 48px; display: flex; justify-content: center; align-items: center; line-height: 1; font-size: 24px; text-align: center; background:rgba(73, 83, 102, 0.1); border-radius: 5px; color: #fff;box-shadow: 0 2px 6px 0 rgba(0,0,0,0.1); float: left;}
.fileInfoB .img svg{ width: 1em; height: 1em; display: block;}
.fileInfoB .text{ padding-left: 16px; box-sizing: border-box; margin-left: 48px; display: flex; align-items: center; flex-wrap: wrap; align-content: center;}
.fileInfoB .h3{ font-size: 16px; line-height: 1.3; min-height: 1.3em; color: #000; font-weight: bold; margin-bottom: 0.2em;}
.fileInfoB .p{ color: #666; font-size: 12px;}
.fileInfoB .p ul{ display: flex;}
.fileInfoB .p li{ padding-right: 10px; position: relative; margin-right: 10px;}
.fileInfoB .p li:before{ content: ''; position: absolute; right:0px; width: 1px; height: 8px; background:#999999; top: 50%; margin-top: -4px;}
.fileInfoB .p li:last-child{ margin-right: 0px; padding-right: 0px;}
.fileInfoB .p li:last-child:before{ display: none;}



.frameTool{}
.frameTool ul{ display: flex; background-color: #f0faff; border-radius: 18px; padding: 0 1em;}
.frameTool li{ position: relative;}
.frameTool li:before{ content: ''; position: absolute; right: 0px; height: 12px; top: 50%; margin-top: -6px; width: 1px; background-color: rgba(6, 167, 255, 0.23);}
.frameTool li:last-child:before{ display: none;}
.frameTool .pd{ height: 36px; justify-content: center; align-items: center;  display: flex; padding: 0 0.5em; color: #0098EA;}
.frameTool i{ display: block; margin-right: 0.25em; font-size: 1em; line-height: 1;}
.frameTool span{ font-weight: bold;}

.frameBtn{ position: absolute; right: 0px; top: 0px;}
.frameBtn ul{ display: flex;}
.frameBtn li{ margin-left: 10px; position: relative;}
.frameBtn .h3 .pd{ display: flex; justify-content: center; align-items: center; height: 36px; line-height: 36px; background:#06a7ff; color: #fff; padding: 0 1.5em; border-radius: 20px;}
.frameBtn .h3 i{ display: block; font-size: 1em; line-height: 1;}
.frameBtn .h3 span{ display: block; padding-left: 0.25em;}
.frameBtn .h3 .pd:hover{ background: #8f0020;}
.frameBtn .box{ position: absolute; width: 140px; left: 50%; top: 100%; margin-left: -70px; padding-top: 10px; display: none;}
.frameBtn .box .pd:before {content: '';position: absolute;left: 50%; top:0px; margin: 0 0 0 -7px;width: 0;height: 0;border-left: 6px solid transparent;border-right: 6px solid transparent; border-bottom: 10px solid #fff; opacity:1;}

.frameBtn .box .pd{ padding: 20px; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.1); border-radius: 5px;}
.frameBtn .box .li{}
.frameBtn .box .t{ display: flex; align-items: center;}
.frameBtn .box .t i{ margin-right: 0.25em; font-size: 1em; line-height: 24px; display: block;}
.frameBtn .box .t span{ line-height: 24px; height: 24px;}
.frameBtn .box .c{ padding-top: 5px;}
.frameBtn .box .c img{ width: 100%; height: auto; display: block;}

.frameBtn li:hover .box{ display: block;}

#copy-button{ cursor: pointer;}
#copy-button:hover{ color: #06a7ff;}
.copy{ opacity: 0; width: 1px; height: 1px; overflow: hidden;}
#copy-text{ opacity: 0; width: 1px; height: 1px; overflow: hidden;}
#output canvas{ width: 100%; height: auto; display: block;}

.frameFile{ min-height: calc(100vh - 290px); position: relative; z-index: 2;}


.fileIframe{}
.fileIframe iframe{ width: 100%; /*min-height:600px;*/ height: auto; border: none;}

.fileIframePDF iframe{ aspect-ratio: 210/297;}

.fileImg{}
.fileImg img{ max-width: 100%; height: auto; display: block;}

.fileVideo{}
.fileVideo video{ width: 100%; max-width: 100%; height: auto; display: block;}

.fileInfoC{ font-size: 16px; line-height: 1.75; background: #FFF; padding: 2em 0;}
.fileInfoC img{ max-width: 100%; height: auto; display: block;}
.fileInfoC video{ width: 100%; max-width: 100%; height: auto; display: block;}
.fileInfoC iframe{ width: 100%; min-height:600px; height: auto; border: none;}

.fileOther{ padding: 140px 0; display: flex; justify-content: center; align-items: center; text-align: center; background: #f6f9fd;}
.fileOther .img{ font-size: 64px; line-height: 1; margin-bottom: 20px;}
.fileOther .img svg{ width: 1em; height:1em; display: block; margin: 0 auto;}
.fileOther .text{ font-size: 18px; }

.fileError{ padding: 140px 0; display: flex; justify-content: center; align-items: center; text-align: center; background: #f6f9fd;}
.fileError .img{ font-size: 64px; line-height: 1; margin-bottom: 20px;}
.fileError .img svg{ width: 1em; height:1em; display: block; margin: 0 auto;}
.fileError .text{ font-size: 18px; }

.frameBottom{ border-top: 1px solid #f6f6f6; padding-top: 20px; display: flex; justify-content:flex-end;}



.frameFr{ position: absolute; right: 0px; top: 0px; width:140px;}
.frameCode{ background: #fff; border: 1px solid #D9DADC; padding: 16px; margin-bottom: 16px; border-radius: 6px;}
.frameCode .img{ margin-bottom: 8px;}
.frameCode .text{ text-align: center;}
.frameCode .h3{ font-size: 14px; line-height: 20px;}

.frameFooter{ padding: 12px 0; line-height: 20px;}
.frameFooter .wpd{ display: flex; justify-content: space-between; color: #666;}
.frameFooter a{ color: #666;}
.frameFooterFl{}
.frameFooterFr{}

#your_div_id_result{ width: 100%; font-size: 12px; position: relative; z-index: 2; overflow-x: hidden; overflow-y: scroll; height: calc(100vh - 290px);}
#all_slides_warpper{ transform-origin: center top; width: 1280px;}
#your_div_id_result .slide{ z-index: 2; /*zoom:0.734375;*/}


.titLs{ text-align: center; font-size: 1.5em; padding: 1em 0; border-bottom: 1px solid #ccc; margin-bottom: 1em; color: #8f0020; font-weight: bold; display: none;}
@media screen and (min-width:1920px){
}
@media screen and (max-width:1680px){
}
@media screen and (max-width:1600px){
}
@media screen and (max-width:1440px){
}
@media screen and (max-width:1366px){
}
@media screen and (max-width:1280px){
.wp{ width: 1080px;}

}
@media screen and (max-width:1024px){
.wp{ width: auto; margin: 0 30px;}

.frameBtn .box{left:auto; right: -12px;}
.frameBtn .box .pd:before{ left: auto; right: 26px;}
}
@media screen and (max-width:980px){
.fileInfoB{ margin-right: 52px;}
.fileInfoB .text{ padding-left: 10px; }
.frameBtn .h3 .pd{ height: 32px; line-height: 32px; padding: 0 1em;}

.frameFr{ display: none;}
.frameFl{ margin-right: 0px;}
.frameBtn .h3 span{ display: none;}
}
@media screen and (max-width:768px){
}

@media screen and (max-width:480px){
body{ background: #fff;}
.wp{ margin: 0 25px;}
.frameFl .wpd{ padding: 0px;}
.frameTop{ display: block;}


.frameBtn{ max-width: inherit; position: absolute; right: 0px; top: 0px; z-index: 999;}
.frameBtn ul{  display: block;}
.frameBtn li{ margin: 0 0 2px 0;}
.frameBtn li:last-child{ margin-bottom: 0px;}

.initFl{ width: auto; bottom: auto; position: fixed; padding:50px 30px; border: none; display: block;}
.initLogo{ position: relative; left: auto; top: auto; margin-bottom: 30px;}
.initCon{ width: 100%;}


}
@media screen and (max-width:413px){
.wp{ margin: 0 20px;}
.frameLogo{ font-size: 28px;}
.frameMenu li a{ font-size: 14px;}

}
@media screen and (max-width:374px){
.wp{ margin: 0 15px;}
.frameLogo{ font-size: 24px;}
.frameMenu li a{ font-size: 12px;}
.fileInfoB .p ul{ flex-wrap: wrap;}
}

.navA{ padding:0; background: #fff; margin-bottom: 30px;}
.navA ul{ display: flex; padding: 0; flex-wrap: wrap;}
.navA li{ margin-bottom: 5px;}
.navA li a{ display: block; height: 2.5em; line-height: 2.5; background: #f5f5f5; padding: 0 1em; margin: 0 3px; border-radius: 5px; font-size: 14px; display: flex; justify-content: center; align-items: center;}
.navA li a i{ margin-left: 0.5em; display: none;}
.navA li.curr a{ background: #06a7ff; color: #fff;}
.mian{ padding: 30px 0; background: #f5f5f5;}
.mianFl{ width: 260px; position: absolute; left: 0px; top: 0px; background: #fff; border-radius: 12px; padding: 20px; box-sizing: border-box;}
.navB{}
.navB li{  position: relative;}
.navB li:before{ content: ''; position:absolute; left: 0px; bottom: 0px; right: 0px; height: 1px; background: rgba(0,0,0,0.05);}
.navB a{ display: flex; justify-content: space-between; height: 3em; line-height: 3; position: relative; font-size: 16px;}
.navB span{ display: block; position: relative;}
.navB i{ display: block; width:2em; height: 2em; position: absolute; right: 0px; top: 50%; margin-top: -1em; font-size: 1em; line-height: 2em; text-align: center; border-radius: 50%;}
.navB span:before{ content: ''; position: absolute; left: 0px; width: 0%; height:3px; bottom: 0px; background: #06a7ff;}
.navB li.curr a{ font-weight: bold; color: #06a7ff;}
.navB li.curr span:before{ width: 100%;}
.navB li.curr i{ color: #06a7ff;}
.mianFr{ margin-left: 280px; min-height: 660px; padding: 30px; background: #fff; border-radius: 12px; box-sizing: border-box;}

.downListA{}
.downListA li{ padding:15px 0px; border-bottom:1px dashed #ccc;}
.downListA .pd{ display:block; position:relative; padding-right:120px; min-height: 116px;}
.downListA .img{ width: 100px; position: absolute; left: 42px; top: 0px; border: 1px solid #ccc; box-sizing: border-box;}
.downListA .text{ margin-left: 162px; padding: 0 0 0 0;}
.downListA .i{ position: absolute; left: 0px; top:0px; display: flex; justify-content: center; align-items: center; text-align: center; background:rgba(0,0,0,0.5); border-radius:16px; height: 32px; text-align: center; min-width: 32px; box-sizing: border-box; padding: 0 0.25em; color: #fff; font-size: 18px;}
.downListA .h3{ position:relative; margin-bottom:6px; display:block;}
.downListA .h3 .icon{ position:absolute; left:0px; top:5px; font-size:18px; line-height:1; width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden;}
.downListA .h3 strong{ font-size:18px; display: block; line-height: 1.5em; min-height:1.5em;}
.downListA .p{ margin-bottom: 0px; color: #666; min-height: 1.5em; line-height: 1.5;}
.downListA .p span{ color: #000; font-weight: bold;}
.downListA .p.p1{ min-height: 3em; line-height: 1.5;}
.downListA .em{ margin-bottom: 8px; color: #000;}
.downListA .tool{ overflow:hidden; color:#999; line-height: 24px;}
.downListA .tool i{ margin-right: 0.2em;}
.downListA .tool span{ color:#000;}
.downListA .tool em{ color:#f12535;}
.downListA .li{ float:left; margin-right:2em;}
.downListA .li:last-child{ margin-right: 0px;}
.downListA .m{ position:absolute; right:0px; top:50%; width:100px; transform: translateY(-50%);}
.downListA .m a{ display:block;}
.downListA .m a:first-child{ margin-bottom:5px;}
.downListA .m a:last-child{ background:#06a7ff; margin-bottom: 0px;}

.more2{ display:inline-block; vertical-align:bottom; background:#3aae2a; color:#fff; padding:0 1em; text-align:center; border-radius:3px; box-sizing:border-box; font-size: 14px;}
.more2 i{ display:inline-block; vertical-align:bottom; line-height:2.5; height:2.5em; font-size:1em; margin-left:0.5em;}
.more2 span{ display:inline-block; vertical-align:bottom; line-height:2.5; height:2.5em; font-size:1em;}
.more2:hover{ background:#f12535; color:#fff;}

.mianCon{padding: 30px; background: #fff; border-radius: 12px; box-sizing: border-box;}

.downSearch{ border-bottom: 1px solid #f5f5f5; padding-bottom: 20px; margin-bottom: 0px;}
.downSearch .pd{ position: relative; display: block;}
.ipt_t2{ width: 100%; height: 54px; display: block; border-radius: 27px; font-size: 18px; padding: 0 40px;border: 2px solid rgba(0,0,0,.05);background: rgba(255,255,255,.15); box-sizing: border-box;}
.ipt_b2{ width: 6em; box-sizing: border-box; height: 54px; border: none; background: #06a7ff; color: #fff; font-size: 18px; font-weight: bold; border-radius: 28px; position: absolute ;right: 0px; top: 0px;}
.ipt_b2:hover{ background: #8f0020;}

@media screen and (max-width:1024px){
.navA ul{ justify-content: flex-start;}
.navA li a{ font-size: 14px;}
}
@media screen and (max-width:980px){
.mianFl{ width: auto; position: relative; margin-bottom: 20px; padding:0; background: none;}
.mianFr{ margin: 0px;}
.navB ul{ display: flex; flex-wrap: wrap;	}
.navB li{ margin-bottom: 5px;}
.navB i{ display: none;}
.navB a{ border: 1px solid #fff; line-height: 2.5; height: 2.5em; padding: 0 1em; background: #fff;}
.navB li.curr a{ background: #06a7ff; color: #fff;}
.downListA .pd{ padding-right:0px;}
.downListA .m{ position:static; padding-top:20px; width: auto;}
.downListA .li{ margin-right: 1em;}
.downListA .h3 .icon{ top: 4px; margin-top: 0px;}
.downListA .tool{ margin-bottom: 20px;}
.downListA .m{ transform: none; padding-top: 0px;}
}
@media screen and (max-width:720px){
.downListA .img{ position: static; margin-bottom: 20px;}
.downListA .text{ margin-left: 0px;}
.mianCon{ padding: 20px}
.ipt_t2{ font-size: 14px; height: 40px; padding: 0 1.5em;}
.ipt_b2{ font-size: 14px; height: 40px;}

}


/*分页*/
.fpage{ text-align:center; padding:30px 0 0 0; font-size:20px;}
.fpage ul{ display:inline-block; vertical-align:bottom;}
.fpage li{ padding:0 0.25em; float:left;}
.fpage .disabled{}
.fpage a{}
.fpage a,
.fpage span{height: 38px;line-height: 36px;display: block;border-radius:3px;color: #fff;font-size: 14px;float: left; min-width: 30px; text-align: center; padding: 0 5px; box-sizing: border-box;background: rgba(255,255,255,0.5); border: 1px solid #d9d9d9; color: #333;}

.fpage .active a,
.fpage .active span{ background:#06a7ff; color:#fff; border-color:#06a7ff;}

@media screen and (max-width:640px){
.fpage li{ padding: 0 3px;}
.fpage a,
.fpage span{ height: 24px; line-height: 24px; font-size: 10px; min-width: 24px;}

}