@charset "utf-8";

@font-face {
    font-family: 'Noto Sans CJK KR';
    src: url( '../font/NotoSansCJKkr-Medium.woff' );
}

@font-face {
    font-family: 'BMJUA';
    src: url( '../font/BMJUA.woff' );
}

@font-face {
    font-family: 'GodoM';
    src: url( '../font/GodoM.woff' );
}

@font-face {
    font-family: 'NanumGothicBold';
    src: url( '../font/NanumGothicBold.woff' );
}




/* base */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
}

body{
    margin: 0 auto;
}
* { 
	-webkit-tap-highlight-color:rgba(255,255,255,0)
}

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

*{-ms-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select:none;}
input{-ms-user-select: auto; -moz-user-select: -moz-auto; -webkit-user-select: auto; -khtml-user-select: auto; user-select:auto;}

/* common */
.blind{
	visibility:hidden;
	overflow:hidden;
	position:absolute;
	top:0;
	left:0;
	width:0;
	height:0;
	font-size:0;
	line-height:0
}

.empty { 
	color:rgba(0, 0, 0, 0);
	font-size:0
}

.hidden{display:none}

.al{text-align:left }
.ac{text-align:center }
.ar{text-align:right }
.vt{vertical-align:top }

.mt2{margin-top:2px }
.mt4{margin-top:4px }
.mt5{margin-top:5px }
.mt6{margin-top:6px }
.mt8{margin-top:8px }
.mt10{margin-top:10px }
.mt15{margin-top:15px }
.mt20{margin-top:20px }
.mt25{margin-top:25px }
.mt30{margin-top:30px }
.mt35{margin-top:35px }
.mt40{margin-top:40px }
.mt45{margin-top:45px }
.mt50{margin-top:50px }
.mt70{margin-top:70px }
.mt90{margin-top:90px }
.mt100{margin-top:100px }
.mt110{margin-top:110px }
.mt120{margin-top:120px }
.mt130{margin-top:130px }

.ml2{margin-left:2px }
.ml4{margin-left:4px }
.ml5{margin-left:5px }
.ml8{margin-left:8px }
.ml10{margin-left:10px }
.ml15{margin-left:15px }
.ml20{margin-left:20px }
.ml25{margin-left:25px }
.ml30{margin-left:30px }
.ml35{margin-left:35px }
.ml40{margin-left:40px }
.ml45{margin-left:45px }
.ml50{margin-left:50px }
.ml70{margin-left:70px }
.ml90{margin-left:90px }
.ml100{margin-left:100px }
.ml110{margin-left:110px }
.ml120{margin-left:120px }
.ml130{margin-left:130px }

.brtn{border-top:0 }
.brrn{border-right:0 }
.brbn{border-bottom:0 }
.brln{border-left:0 }
.mtn{margin-top:0 }
.mrn{margin-right:0 }
.mbn{margin-bottom:0 }
.mln{margin-left:0 }

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



/* common */
body { 
    width:1920px;
    height:1080px;
}

#wrap{
    width:100%;
    height:100%;
    overflow:hidden
}

#container{
    position:relative;
    width:100%;
    height:100%;
}
.swiper-button-prev,
.swiper-button-next {
    outline: none;
}



/* 팀플레이 공통 버튼 */




/* 드래그 마스크 */
.drag-mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.drag-mask .drag-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.drag-mask .mask-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
}

.drag-mask .drag-point {
    position: absolute;
    left: 0;
    top: 0;
    display: none;
}

.drag-mask .btn {
    position: absolute;
    width:85px;
    height:74px;
    cursor: pointer;
}

.drag-mask .drag-btn {
    position: absolute;
    left:921px;
    top:714px;
    width:85px;
    height:74px;
    cursor: pointer;
}



/* black opacity50 */
.black_opt50{
    position: absolute;
    width:100%;
    height:100%;
    background: #000;
    opacity: 0.5;
}



/* video-player */
.video-player {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-color:#000;
}

.video-player .video-con {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
}
 
.video-player .video-con video {
    width:100%;
    height:100%;
}

.video-player .player-con {
    position:absolute;
    left:330px;
    top:650px;
    width:631px;
    height:103px;
    /* background:url('../video-player/board_02.png') no-repeat; */
}

.video-player .player-con .play-btn,
.video-player .player-con .stop-btn,
.video-player .player-con .sound-btn {
    position:absolute;
}
.video-player .player-con .play-btn{
    left: 10px;
    top: 10px;
}
.video-player .player-con .stop-btn{
    left:100px;
    top:25px;
}
.video-player .player-con .sound-btn{
    left:390px;
    top:30px;
}
.video-player .player-con .play-btn img,
.video-player .player-con .stop-btn img,
.video-player .player-con .sound-btn img{
    position:absolute;
    left:0;
    top:0;
}
.video-player .player-con .play-btn img:nth-child(2),
.video-player .player-con .stop-btn img:nth-child(2),
.video-player .player-con .sound-btn img:nth-child(2) {
    display: none;
}
.video-player .player-con .play-btn.active img:nth-child(2),
.video-player .player-con .stop-btn.down img:nth-child(2),
.video-player .player-con .sound-btn.active img:nth-child(2) {
    display: block;
}
.video-player .player-con .play-btn.active img:nth-child(1),
.video-player .player-con .stop-btn.down img:nth-child(1), 
.video-player .player-con .sound-btn.active img:nth-child(1) {
    display: none;
}

.video-player .progress-con {
    position:absolute;
    left: 170px;
    top: 38px;
    width: 205px;
    height: 30px;
}
.video-player .progress-con .line-bg,
.video-player .progress-con .line {
    position:absolute;
    left: 0;
    top: 11px;
    width: 100%;
    height: 6px;
    border-radius: 2px;
}

.video-player .progress-con .line-bg{
    background-color:#fff;
}
.video-player .progress-con .line{
    background-color:#ffd700;
    width:0%;
}
.video-player .progress-con .bar{
    position:absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    cursor:grab;
}
.video-player .progress-con .bar:after{
    content:"";
    position:absolute;
    left: -15px;
    top: 0;
    width: 30px;
    height: 30px;
    /* background: url('../video-player/volume_icon.png') no-repeat; */
}

.video-player .volume-con{
    position:absolute;
    left: 451px;
    top: 35px;
    width:48px;
    height:36px;
}
.video-player .volume-con .box{
    position:absolute;
    top:0;
    width:11px;
    height:36px;
}
.video-player .volume-con .box:nth-child(1){
    left:0;
    /* background: url('../video-player/volume01.png') no-repeat; */
}
.video-player .volume-con .box:nth-child(2){
    left: 13px;
    /* background: url('../video-player/volume02.png') no-repeat; */
}
.video-player .volume-con .box:nth-child(3){
    left: 26px;
    /* background: url('../video-player/volume03.png') no-repeat; */
}
.video-player .volume-con .box:nth-child(4){
    left: 40px;
    /* background: url('../video-player/volume04.png') no-repeat; */
}

.video-player .time-con{
    position:absolute;
    left: 516px;
    top: 41px;
    font-family: 'Noto Sans CJK KR';
    font-size:15px;
    color:#fff;
}
.video-player .time-con > div{
    position:absolute;
    top:0;
}
.video-player .time-con .start{
    left:0;
}
.video-player .time-con .end{
    left: 49px;
}

.video-popup-close{
    position:absolute;
    right: 30px;
    top: 40px;
    width:83px;
    height:83px;
}

/* endPopup */
.endPopup{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.endPopup *{
    position: absolute;
}
.blk75{
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.5;
    pointer-events: none;
}
.endPopup .vis{
    left: 630px;
    top: 400px;
}
.endPopup .balloon{
    left: 870px;
    top: 150px;
}
.endPopup .endPopupBtn{
    transition: all ease 0s;
    transform-origin: center center;
    cursor: pointer;
}
.endPopup .endPopupBtn:nth-child(1){
    left: 1010px;
    top: 390px;
    width: 191px;
    height: 162px;
}
.endPopup .endPopupBtn:nth-child(2){
    left: 1220px;
    top: 390px;
    width: 189px;
    height: 162px;
}
.endPopup .endPopupBtn:hover{
    transform: scale(1.05);
    
}
.endPopup .vis{
    animation: scaleUpdown 1s infinite;
    transform-origin: bottom center;
    width: 384px;
    height: 450px;
}

@keyframes scaleUpdown{
    0%{
        transform: scaleY(1);
    }
    50%{
        transform: scaleY(1.05);
    }
    100%{
        transform: scaleY(1);
    }
}
/* util */
.util > div{
    position: absolute;
}
.util > div.down{
    transform: scale(1.02);
}
.util .full_btn{
    position: absolute;
    left: 1626px;
    top: 50px;
    display: none;
}
.util .end_btn{
    position: absolute;
    left: 1770px;
    top: 50px;
    display: none;
}
.util .back{
    position: absolute;
    /* left: 1478px;
    top: 50px; */
    left: 1740px;
    top: 50px;
}

/* 드로잉캔버스 */

#canvas{
    position: absolute;
    left: 284px;
    top: 258px;
}

.color{
    position: absolute;
    width: 100px;
    height: 100px;
}
#color1{
    left: 1700px;
    top: 380px;
}
#color2{
    left: 1700px;
    top: 490px;
}
#color3{
    left: 1700px;
    top: 605px;
}
.eraser{
    position: absolute;
    width: 100px;
    height: 100px;
    left: 1700px;
    top: 720px;
}

/* slide_set */
.slide_set li{
    position: absolute;
    left: 560px;
    top: 220px;
    list-style: none;
}
.slide_set .arrow{
    position: absolute;
    left: 430px;
    top: 500px;
}
.slide_set .arrow.right{
    left: 1410px;
}


.series_num{
    position: absolute;
    font-size: 70px;
    font-family: "NanumGothicBold";
    left: 80px;
    top: 70px;
    color: #b75252
}
/* 오버시 이미지 교체 */
.over_img img:nth-child(2){display: none;}
.over_img:hover img:nth-child(1){ display: none;}
.over_img:hover img:nth-child(2){ display: block;}