@charset "UTF-8";


/*********** common ************/
.hidden {
    display: none !important;
}

.disable {
    pointer-events: none !important;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.content-wrap {
    position: relative;
}

*[data-button] {
    cursor: pointer;
}







/*********** range-slider ************/

.range-slider.hor {
    position: absolute;
    left:0;
    top:0;
    width:150px;
    height:10px;
    background-color: lightgrey;
    border-radius: 5px;
    cursor: move;
    box-sizing: border-box;
}
.range-slider.hor .bar{
    position: absolute;
    left:0%;
    top:0;
}
.range-slider.hor .bar:before{
    content:'';
    position: absolute;
    left:-8px;
    top:-2px;
    display: inline-block;
    width:15px;
    height:15px;
    background-color: #000;
    border-radius: 50%;
}
.range-slider.hor .line {
    position: absolute;
    left:0;
    top:0;
    width:0%;
    height:100%;
    background-color:#4a4a4a;
    border-radius: 5px;
}

.range-slider.ver {
    position: absolute;
    left:0;
    top:0;
    width:10px;
    height:150px;
    background-color: lightgrey;
    border-radius: 5px;
    cursor: move;
    box-sizing: border-box;
}
.range-slider.ver .bar{
    position: absolute;
    left:0;
    top:0%;
}
.range-slider.ver .bar:before{
    content:'';
    position: absolute;
    left:-3px;
    top:-8px;
    display: inline-block;
    width:15px;
    height:15px;
    background-color: #000;
    border-radius: 50%;
}
.range-slider.ver .line {
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:0%;
    background-color:#4a4a4a;
    border-radius: 5px;
}


/*********** audio-player ************/
.audio-player {
    position: relative;
    width: 325px;
    height: 60px;
    border: solid 1px gray;
    box-sizing: border-box;
}

.audio-player > div {
    padding: 15px 10px;
}

.audio-player .play-btn,
.audio-player .pause-btn,
.audio-player .stop-btn {
    display: inline-block;
    width: 25px;
    height: 25px;
    background-color: #000;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
}

.audio-player .play-btn.down,
.audio-player .pause-btn.down,
.audio-player .stop-btn.down {
    background-color: gray;
}

.audio-player .play-btn:after,
.audio-player .pause-btn:after,
.audio-player .stop-btn:after{
    color:#fff;
    font-size:12px;
}
.audio-player .play-btn:after {
    content: "▶";
}
.audio-player .pause-btn:after {
    content: "||";
}
.audio-player .stop-btn:after {
    content: "■";
}

.audio-player .progress {
    position: relative;
    margin-left:10px;
    display: inline-block;
    width:120px;
    height:10px;
    vertical-align: middle;
    background-color: lightgrey;
    cursor:pointer;
    border-radius: 5px;
}
.audio-player .progress .bar{
    position: absolute;
    left:0%;
    top:0;
}
.audio-player .progress .bar:before{
    content:'';
    position: absolute;
    left:-8px;
    top:-2px;
    display: inline-block;
    width:15px;
    height:15px;
    background-color: #000;
    border-radius: 50%;
}
.audio-player .progress .line {
    position: absolute;
    left:0;
    top:0;
    width:0%;
    height:100%;
    background-color:#4a4a4a;
    border-radius: 5px;
}

.audio-player .start-time {
    position: absolute;
    left: 220px;
    top: 16px;
}

.audio-player .end-time {
    position: absolute;
    left: 270px;
    top: 16px;
}


/*********** video-player ************/
.video-control{
    position: absolute;
    left:0;
    top:0;
    width:640px;
    height:360px;
    overflow:hidden;
    box-sizing: border-box; 
    transform: translate3d(0,0,0);   
}
.video-control.fullscreen {
    position: fixed !important;
    width: 100% !important;
    height:100% !important;
    left:0 !important;
    top:0 !important;
}

.video-control video {
    width: 100%;
    height: 100%;
}
.video-control .caption {
    position: absolute;
    left: 0;
    bottom: 60px;
    width: 100%;
    height: 80px;
    background-color: rgba(0,0,0,0.3);
    display: none;
    transform: translate3d(0,0,0);
}
.video-control .caption-text {
    width:100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'nq';
    font-size: 24px;
    font-weight: 500;
    color: #fff;
    text-shadow: 0px 0px 4px #000;
    text-align: center;
    box-sizing: border-box;
    padding: 0 10px;
    line-height: 30px;
    transform: translate3d(0,0,0);
}

.video-control .poster {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height:100%;
    background-size: auto 100%;
    background-position: center center;
    background-color: #fff;
    background-repeat: no-repeat;
}

.video-control .start-btn {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(100% - 65px);
    cursor: default;
}
.video-control .start-btn > span{
    position: absolute;
    left:50%;
    top: 50%;
    display: inline-block;
    width: 190px;
    height:190px;
    margin-left: -97px;
    margin-top: -85px;
    cursor: pointer;
    background: url('../../img/video_player/start_btn.png') no-repeat;
}

.video-control.playing .start-btn > span {
    background-position: 0 100%;
}

.video-control .jump-btns {
    position: absolute;
    right: 10px;
    top: 10px;
}
.video-control .jump-btns .jump-btn {
    display: inline-block;
}


.video-player{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
}
.video-player .player-wrap{
    position: absolute;
    left:0;
    top:40px;
    width: 100%;
    height: 60px;
    background-color: rgba(0,0,0,0.7);
}
.video-player .play-btn{
    position: absolute;
    left: 32px;
    top: 21px;
    width: 28px;
    height: 28px;
    background: url('../../img/video_player/play_btn.png') no-repeat center;
}
.video-player .pause-btn{
    position: absolute;
    left: 32px;
    top: 21px;
    width: 28px;
    height: 28px;
    background: url('../../img/video_player/pause_btn.png') no-repeat center;
}
.video-player .stop-btn{
    position: absolute;
    left: 80px;
    top: 21px;
    width: 28px;
    height: 28px;
    background: url('../../img/video_player/stop_btn.png') no-repeat center;
}

.video-player .progress {
    position: absolute;
    left:10px;
    top: -1px;
    padding: 0 10px;
    width: calc(100% - 20px);
    height:10px;
    box-sizing: border-box;
    background-color: #e7e7e7;
    border-radius: 0;
}
.video-player .progress:before {
    position: absolute;
    left: -10px;
    top:0;
    content: '';
    display: inline-block;
    width:11px;
    height:10px;
    background-color: #ffe400;
}
.video-player .progress:after {
    position: absolute;
    right: -10px;
    top:0;
    content: '';
    display: inline-block;
    width: 11px;
    height:10px;
    background-color: #e7e7e7;
}
.video-player .progress .bar{
    position: absolute;
    left:0%;
    top:0;
    z-index: 1;
}
.video-player .progress .bar:before{
    content:'';
    position: absolute;
    left:-10px;
    top:-4px;
    display: inline-block;
    width:20px;
    height:20px;
    background-color: #ffd200;
}
.video-player .progress .line {
    position: absolute;
    left:0;
    top:0;
    width:0%;
    height:100%;
    background-color: rgb(255, 228, 0);
    border-radius: 0;
}

.video-player .volume-btn{
    position: absolute;
    left: 130px;
    top: 20px;
    width: 34px;
    height: 31px;
    background: url('../../img/video_player/volume_btn.png') no-repeat;
    background-position: 0 100%;
}

.video-player .volume-btn.active{
    background-position: 0 0; 
}

.video-player .volume-progress {
    position: absolute;
    left: 178px;
    top: 31px;
    width: 84px;
    height:8px;
    border-radius: 0;
}

.video-player .volume-progress .line {
    position: absolute;
    left:0;
    top:0;
    width:0%;
    height:100%;
    background-color:#ffe400;
    border-radius: 0;
}
.video-player .volume-progress .bar:before{
    content:'';
    position: absolute;
    left:-10px;
    top:-5px;
    display: inline-block;
    width:20px;
    height:20px;
    background-color: #ffd200;
}

.video-player .start-time,
.video-player .end-time {
    position: absolute;
    font-size: 20px;
    color: #fff;
    font-family: 'nq';
    font-weight: 400;
    top: 25px;
}

.video-player .start-time{
    left: 290px;
}

.video-player .end-time{
    left: 355px;
}
.video-player .end-time:before{
    content:'/';
    margin-right: 10px;
}

.video-player .fullscreen-btn {
    position: absolute;
    left: 448px;
    top: 20px;
    width: 30px;
    height: 30px;
    background: url('../../img/video_player/fullscreen_btn.png') no-repeat;
}
.video-player .fullscreen-btn.active {
    background-position: 0 100%;
}


.video-player .caption-btn {
    position: absolute;
    left: 500px;
    top: 21px;
    width: 33px;
    height: 32px;
    background: url('../../img/video_player/caption_btn.png') no-repeat;
}
.video-player .caption-btn.active {
    background-position: 0 100%;
}





/*********** draggable ************/
.draggable .drag-area,
.draggable .drag-item {
    position: absolute;
    left: 0;
    top: 0;
}

.draggable .drag-item { 
    cursor: move;
}
.draggable .drag-item.active{
    cursor: default;
}
.draggable.redrag .drag-item.active{
    cursor: move;
}

.draggable .drag-area .area,
.draggable .drag-item .area {
    position: absolute;
    left: 10%;
    top: 10%;
    display: inline-block;
    width: 80%;
    height: 80%;
}
.draggable .svg-item.active{
    pointer-events:none;
}



/*********** drawline ************/
.drawline {
    position: absolute;
    left: 0;
    top: 0;
    width:100%;
    height:100%;
}
.drawline .line-item {
    position: absolute;
    left: 0;
    top: 0;
    width:30px;
    height:30px;
    cursor:pointer;
}
.drawline .line-item:before {
    content: '';
    position: absolute;
    left: 9px;
    top: 9px;
    width:12px;
    height:12px;
    border-radius:50%;
    background-color:#000;
}
.drawline .line-item.check:before {
    background-color:blue;
}


/*********** swiper ************/
.swiper-content {
    width: 100%;
    height:100%;
    overflow: hidden;
}
.swiper-button-next,
.swiper-button-prev {
    outline: none;
}


/*********** zoomable ************/
.zoomable {
    overflow: hidden;
}

.zoomable .zoom-target,
.zoomable .zoom-area{
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
}


/*********** sequence ************/
.sequence {
    position: absolute;
    left: 0;
    top: 0;
}

.sequence > img{
    position: absolute;
    left: 0;
    top: 0;
}




/* scrollbar-flex */
.scrollbar .scroll-element,
.scrollbar .scroll-element div {
    border: none;
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 10;
}

.scrollbar .scrollbar-con{
    width: 100%;
    height:100%;   
}
 
.scrollbar .scroll-element {
    background-color: #ffffff;
}
 
.scrollbar .scroll-element div {
    display: block;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
}
 
.scrollbar-flex .scroll-element.scroll-x {
    bottom: 0;
    height: 12px;
    left: 0;
    width: 100%;
}
 
.scrollbar .scroll-element.scroll-y {
    height: 100%;
    right: 0;
    top: 0;
    width: 12px;
}
 
.scrollbar .scroll-element.scroll-x .scroll-element_outer { height: 8px; top: 2px; }
.scrollbar .scroll-element.scroll-y .scroll-element_outer { left: 2px; width: 8px; }
 
.scrollbar .scroll-element .scroll-element_outer { overflow: hidden; }
.scrollbar .scroll-element .scroll-element_track { background-color: #eeeeee; }
 
.scrollbar .scroll-element .scroll-element_outer,
.scrollbar .scroll-element .scroll-element_track,
.scrollbar .scroll-element .scroll-bar {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}
 
.scrollbar .scroll-element .scroll-bar:hover { background-color: #c2c2c2; }
.scrollbar .scroll-element .scroll-bar { background-color: #d9d9d9; }
.scrollbar .scroll-element.scroll-draggable .scroll-bar { background-color: #919191; }
 
.scrollbar .scroll-content.scroll-scrolly_visible { left: -12px; margin-left: 12px; }
.scrollbar .scroll-content.scroll-scrollx_visible { top:  -12px; margin-top:  12px; }
 
.scrollbar .scroll-element.scroll-x .scroll-bar { min-width: 10px; }
.scrollbar .scroll-element.scroll-y .scroll-bar { min-height: 10px; }

.scrollbar .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -14px; }
.scrollbar .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -14px; }
 
.scrollbar .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -14px; }
.scrollbar .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -14px; }


.scrollbar .scroll-element.scroll-y .scroll-arrow { height: 15px; z-index: 11;}
.scrollbar .scroll-element.scroll-y .scroll-arrow_less { top: 0; }
.scrollbar .scroll-element.scroll-y .scroll-arrow_more { top: auto; bottom: 0}
.scrollbar .scroll-element.scroll-y .scroll-arrow_less:after{position: absolute;content:'▲';left:-2px;top:-2px}
.scrollbar .scroll-element.scroll-y .scroll-arrow_more:after{position: absolute;content:'▼';left:-2px;top:-4px}

.scrollbar .scroll-element.scroll-y.scroll-element_arrows_visible .scroll-element_outer{ top:20px;}
.scrollbar .scroll-element.scroll-y.scroll-element_arrows_visible .scroll-element_size{ top:-40px;}
.scrollbar .scroll-element.scroll-y.scroll-element_arrows_visible .scroll-element_inner-wrapper{ height: calc(100% - 40px)}


/**** drawing ***/
.drawing canvas {
    width: 100%;
    height: 100%;
}


/*********** magnify ************/
.magnify {
    position: absolute;
    left:0;
    top:0;
}

.magnify .magnify-target {
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
}

.magnify .glass {
    position: absolute;
    left:0;
    top:0;
    width: 190px;
    height: 190px;
    pointer-events: none;
}

.magnify .glass:before {
    content:'';
    position: absolute;
    left: -11px;
    top: -11px;
    width: 240px;
    height: 240px;
    background: url('../../img/common/zoomview.png') no-repeat;
}

.magnify .glass-target {
    position: absolute;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #fff;
    overflow:hidden;
}