@opedu/app/dist/style-mobile.min.css

오피유커스 e-Learning HTML5 콘텐츠 라이브러리

/*! OpEduApp v1.2.7 (build 20210628.43577) */
@import url(https://fonts.googleapis.com/css2?family=Jua&family=Lexend+Deca&display=swap);
#app.mobile *{-webkit-tap-highlight-color:transparent}#app.mobile>.container{position:absolute;-webkit-transform-origin:left top;transform-origin:left top}#app.mobile>.container>#content{bottom:0}#app.mobile.resized{position:fixed;left:0;top:0;-webkit-transform-origin:0 0;transform-origin:0 0}#app.mobile #footer{position:absolute;left:0;right:0;bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;color:#fff;overflow:hidden;z-index:2}#app.mobile #footer div{overflow:hidden}#app.mobile #footer .row,#app.mobile #footer .btn,#app.mobile #footer .txt{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}#app.mobile #footer .row{width:100%}#app.mobile #footer .row>.wrap{padding:0 3rem}#app.mobile #footer .tbox.btn{border:2px solid #eee;border-radius:2rem;width:auto !important;height:auto !important;padding:.5rem 1rem}#app.mobile #footer .btn *{pointer-events:none}#app.mobile #footer .txt{font-family:"Lexend Deca",sans-serif}#app.mobile:not(.has-poplayer) #footer{height:.5rem}#app.mobile:not(.has-poplayer).touch-ui #footer{height:100%;background-color:rgba(0,0,0,.75)}#app.mobile:not(.has-poplayer).touch-ui #footer>.row.top{height:7rem}#app.mobile:not(.has-poplayer).touch-ui #footer>.row.middle{height:14rem}#app.mobile:not(.has-poplayer).touch-ui #footer>.row.bottom{height:13rem}#app.mobile:not(.has-poplayer).touch-ui #footer>.row.bottom>.btn-grp.wrap{height:5rem}#app.mobile:not(.has-poplayer).touch-ui #footer>.row.bottom>.media-bar.wrap{height:5rem}#app.mobile #footer>.row.top{position:absolute;left:0;top:0;right:0;height:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;font-size:1.5rem}#app.mobile #footer>.row.top .page-nav>li.text.wrap{margin:0 1.5rem;width:auto}#app.mobile #footer>.row.top .page-nav>li.text.wrap>span{font-size:2rem;font-weight:inherit;color:inherit}#app.mobile #footer>.row.top .page-nav>li.text.wrap>span.delim{font-size:auto;font-weight:auto;padding:0 6px 0 8px;opacity:.7;background-image:none}#app.mobile #footer>.row.top .page-nav>li.btn{background-image:none}#app.mobile #footer>.row.top .page-nav>li.btn.disabled{opacity:.25}#app.mobile.learning-complete #footer>.row.top .page-nav>li.tbox.next{background-color:#fff;border-color:#000;color:#000}#app.mobile #footer>.row.bottom{display:block;position:absolute;left:0;bottom:0;right:0;height:.5rem}#app.mobile #footer>.row.bottom>.media-bar.wrap{display:-webkit-box;display:-ms-flexbox;display:flex;height:0;overflow:hidden;-ms-flex-pack:distribute;justify-content:space-around;-webkit-box-align:center;-ms-flex-align:center;align-items:center}#app.mobile #footer>.row.bottom>.media-bar.wrap>.txt{font-size:3rem;width:20rem}#app.mobile #footer>.row.bottom>.media-bar.wrap>.txt.current{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}#app.mobile #footer>.row.bottom>.media-bar.wrap>.txt.total{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}#app.mobile.media-seeking #footer>.row.bottom>.media-bar.wrap>.txt.current{opacity:.5}#app.mobile #footer>.row.bottom .media-slider{background-color:transparent;border-radius:0;overflow:visible}#app.mobile #footer>.row.bottom .media-slider .area{background-color:rgba(153,153,153,.9)}#app.mobile #footer>.row.bottom .media-slider.main{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%}#app.mobile #footer>.row.bottom .media-slider.main .area,#app.mobile #footer>.row.bottom .media-slider.main .area>div{border-radius:1rem;overflow:visible}#app.mobile #footer>.row.bottom .media-slider.main>.area{height:1rem}#app.mobile #footer>.row.bottom .media-slider.main>.area .fill,#app.mobile #footer>.row.bottom .media-slider.main>.area .marker{background-color:#ff4500}#app.mobile #footer>.row.bottom .media-slider.main>.area>.fill{position:relative;top:auto;left:auto;bottom:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}#app.mobile #footer>.row.bottom .media-slider.main>.area>.fill>.marker{position:absolute;right:-1.25rem;width:2.5rem;height:2.5rem;border-radius:2.5rem}#app.mobile.seq-learning:not(.learning-complete) #footer>.row.bottom .media-slider.main>.area>.played{border-right-width:4px;border-top-right-radius:0;border-end-end-radius:0}#app.mobile #footer>.row.bottom .media-slider.side{position:absolute;bottom:0;left:0;right:0;height:.5rem;border-radius:0}#app.mobile #footer>.row.bottom .media-slider.side>.area>.fill{background-color:#ffd900}#app.mobile.touch-ui #footer>.row.bottom>.media-slider.side{height:0}#app.mobile #footer>.row.bottom>.btn-grp.wrap{height:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}#app.mobile #footer>.row.bottom>.btn-grp.wrap>.btn{width:5rem;height:100%}#app.mobile #footer>.row.bottom>.btn-grp.wrap>.btn>i,#app.mobile #footer>.row.bottom>.btn-grp.wrap>.btn svg{font-size:3rem}#app.mobile #footer>.row.bottom>.btn-grp.wrap>.btn[data-role=toc]{font-size:1.5em}#app.mobile #footer>.row.bottom>.btn-grp.wrap>.btn[data-role=volume]>.mute{color:red;display:none}#app.mobile #footer>.row.bottom>.btn-grp.wrap>.btn[data-role=volume].muted>.mute{display:block}#app.mobile #footer>.row.bottom>.btn-grp.wrap>.btn[data-role=volume].muted>.volume-up{display:none}#app.mobile #footer>.row.middle{height:0}#app.mobile #footer>.row.middle>.wrap{width:42rem;height:100%;display:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}#app.mobile #footer>.row.middle>.wrap>div{width:12rem;height:12rem}#app.mobile #footer>.row.middle>.wrap>div.jump{visibility:hidden;width:9rem;height:9rem;font-size:2rem;position:relative}#app.mobile #footer>.row.middle>.wrap>div.jump>svg{opacity:.75;position:absolute;width:100%;height:100%}#app.mobile #footer>.row.middle>.wrap>div.jump:after{content:"s"}#app.mobile.touch-ui:not(.media-seeking) #footer>.row.middle>.media-btn-grp,#app.mobile.touch-ui.media-seeking #footer>.row.middle>.media-seeking-hint{display:-webkit-box;display:-ms-flexbox;display:flex}#app.mobile #footer>.row.middle .media-btn-grp>.btn[data-role=play]{border-radius:12rem;border:.25rem solid #fff;font-size:4rem}#app.mobile #footer>.row.middle .media-btn-grp>.btn[data-role=play]>.play{display:none;padding-left:1rem}#app.mobile #footer>.row.middle .media-btn-grp>.btn[data-role=play]>.replay{display:none}#app.mobile #footer>.row.middle .media-btn-grp>.btn[data-role=play].paused>.pause{display:none}#app.mobile #footer>.row.middle .media-btn-grp>.btn[data-role=play].paused:not(.ended)>.play{display:block}#app.mobile #footer>.row.middle .media-btn-grp>.btn[data-role=play].paused.ended>.replay{display:block}#app.mobile #footer>.row.middle .media-btn-grp>.btn.jump.active{visibility:visible}#app.mobile #footer>.row.middle .media-seeking-hint *{pointer-events:none}#app.mobile #footer>.row.middle .media-seeking-hint .txt{color:rgba(255,250,250,.5)}#app.mobile #footer>.row.middle .media-seeking-hint .txt>.delim{opacity:.75;padding:0 2px}#app.mobile #footer>.row.middle .media-seeking-hint>.seeking{width:17rem;font-size:5rem;color:snow}#app.mobile #footer>.row.middle .media-seeking-hint>.seeking span{font-family:"Jua",sans-serif}#app.mobile #footer>.row.middle .media-seeking-hint.forward .jump.forward,#app.mobile #footer>.row.middle .media-seeking-hint.backward .jump.backward{visibility:visible}#toc_mobile{position:absolute;left:0;right:0;top:0;bottom:0;display:none;padding:2rem;background-color:rgba(0,0,0,.75);z-index:2;color:#fefefe}#toc_mobile *{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#toc_mobile>.title.wrap{height:5rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;font-size:2.5rem}#toc_mobile>.content.wrap{margin-top:2rem;width:100%;height:26rem;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;font-size:1.5rem}#toc_mobile>.content.wrap.no-page-link .grp-item li,#toc_mobile .grp-item li.locked{pointer-events:none}#toc_mobile>.content.wrap:not(.no-page-link) .grp-item li.locked>i,#toc_mobile>.content.wrap:not(.no-page-link) .grp-item li.locked>svg{opacity:.5}#toc_mobile>.content.wrap:not(.no-page-link) .grp-item li.locked>i+span,#toc_mobile>.content.wrap:not(.no-page-link) .grp-item li.locked>svg+span{margin-left:5px}#app.mobile.toc.has-poplayer #toc_mobile{display:block}#toc_mobile>.close.btn{position:absolute;top:2rem;right:2rem;width:5rem;height:5rem;border-radius:1rem;background-color:rgba(0,0,0,.5);font-size:3rem;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}#toc_mobile>.close.btn:hover{color:gold}#toc_mobile>.close.btn:active{color:#ff0}#toc_mobile>.wrap .grp-item{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;padding:.5rem;background-color:rgba(0,0,0,.25);-webkit-box-flex:1;-ms-flex:1;flex:1;border-radius:1rem;border:1px solid rgba(255,255,255,.25)}#toc_mobile>.wrap .grp-item+.grp-item{margin-left:1rem}#toc_mobile>.wrap .grp-item>.title{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;background-color:rgba(0,0,0,.5);padding:1rem;margin-bottom:1rem;border-radius:1rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-family:"Open Sans","NanumBarunGothic",sans-serif;font-size:1.5rem;font-weight:bolder}#toc_mobile>.wrap .grp-item ul{margin-left:2rem;padding:0}#toc_mobile>.wrap .grp-item li{position:relative;overflow:visible;list-style:disc;padding:0;font-weight:400;color:#ddd;line-height:100%}#toc_mobile>.wrap .grp-item li+li{margin-top:1.5rem}#toc_mobile>.wrap .grp-item li *{pointer-events:none}#toc_mobile>.wrap .grp-item li.active,#toc_mobile>.wrap .grp-item li:hover,#toc_mobile>.wrap .grp-item li.current{color:#ff0;text-decoration:underline}#toc_mobile>.wrap .grp-item li:hover{text-decoration:underline}#toc_mobile>.wrap .grp-item li.current{cursor:default;pointer-events:none}#app.mobile .touch-ui-trigger{position:absolute;top:2rem;left:2rem;padding:1rem 1.5rem;font-size:2rem;background-color:rgba(0,0,0,.75);color:#eee;border-radius:1rem;display:none;z-index:2}#app.mobile:not(.touch-ui,.has-poplayer) .touch-ui-trigger.active{display:block}