/* common_int */
i {
    font-style: normal;
    text-align: center;
    font-size: 40px;
}
i.off{
    display: none;
}
.tir {
}
.tir.off{
    text-indent: -9999px;
    position: absolute;
    top: -999px;
}

.blk{
    display: block !important;
}
.none{
    display: none !important;
}
.dis{
    pointer-events: none !important;
}
.center{
    text-align: center;
}

.mc {
    left: 0px;
    top: 0px;
    display: block;
    position: absolute;
    opacity: 1.0;
    transform-origin: 0 0;
    background-repeat: no-repeat;
    background-position: 0 0;
}
.box{
    width: 100px;
    height: 100px;
    position: absolute;
    background-color: rgba(255, 0, 255, 0.5);
    user-select: none;
    z-index: 999;
    line-height: 100px;
    font-size: 20px;
    text-align: center;
}
.box.resetAll {
    top: auto;
    bottom: 0px;
    cursor: pointer;
    pointer-events: all;
}
.box.cursor{
    cursor: pointer;
}
.circle{
    border-radius: 50px;
}
h1.guide{
    line-height: 1080px;
    text-align: center;
    font-size: 100px;
}
/*
.tit-1{
    color:#ea5442;
    font-size:177.118px;
    font-weight:700;
    font-style:italic;
    font-family:'Noto Sans KR','맑은 고딕','Malgun Gothic',sans-serif;
    -webkit-text-stroke:2.964px #000;
    text-shadow:3.952px 1.976px 3.952px rgba(0,0,0,0.5);
    top:196.688px;
    margin-left:-133.152px;
    animation:spinner 1s linear;
    animation-fill-mode:both;
    transform:rotate(-9deg);
    transform-style:preserve-3d;
    perspective:50px;
    -webkit-transform-style: preserve-3d;
    -webkit-perspective:50px;
}
 */


/* hit영역 확인용 배경 */
#wrap .setContent li,
.contents.writePage textarea#Textbox,
.contents.writePage .tobtn,
.contents.toPage .tobtn,
.contents .btnWrap .btnSound,
.contents .btnWrap .btnPop,
.contents.clickPage .objWrap .obj,
.contents.clickPage .textWrap .textarea,
.contents .clickContent .clickItem,
.contents .connect_btn,
.contents .cardGame .front,
.contents .cardGame .back,
.contents .objWrap .front,
.contents .objWrap .back,
#wrap .btnPop,
#wrap .solpop .btnClose,
.notesWrap.zoom,
.mapZoom .btn,
.colorPicker ul > li,
.gamePage .finger .btnClick,
.pageWrap .prev,
.pageWrap .next,
.pageWrap .pageing,
.pageWrap .pageing .dot,
.pageWrap .closeBtn,
.btn[move-num],
.pop .clickItem,
.pop .close{
    /* background-color: rgba(0, 0, 0, 0.5) !important; */
    /* background-color: rgba(255, 0, 255, 0.5) !important; */
}

.clickItem{
    /* border: 1px solid black; */
    opacity: 0;
}

.clickGuide {
    left: 0px;
    top: 0px;
    position: absolute;
    width: 105px;
    height: 109px;
    border-radius: 15px;
    background-color: #e6e6e6;
    pointer-events: none;
}


.videoPage~.btnPop {
    left: 1672px;
    top: 733px;
    position: absolute;
    display: none;
    width: 240px;
    height: 320px;
    background: url('../images/popItem/popBtnTip.png') 0 0 no-repeat;
    cursor: pointer;
    z-index: 9;
}


/* .pc.chrome .videoFrame .vdo-wrap video {
    object-fit: fill;
}

.pc.ie .videoFrame .vdo-wrap video {
    background: url('inc/images/09/thumbnail.png') no-repeat 0 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
} */

/* css3 motion sharpen */
.sharpen,
.sharpen > *{
    image-rendering: -webkit-optimize-contrast;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* -webkit-filter: blur(0);
    filter: blur(0); */
    -webkit-transform: translateZ(0) scale(1, 1) translate3d(0,0,0);
    transform: translateZ(0) scale(1, 1) translate3d(0,0,0);
    /* transform: rotate(0.001deg); */
}

/* 버튼 */
.btn2{
    left: 860px;
    top: 540px;
    position: absolute;
    width: 500px;
    height: 113px;
    cursor: pointer;
    background: #99c352 0 0 no-repeat;
    font-size: 40px;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    line-height: 123px;
}

div2, img2 {
	position: absolute;
	margin:auto;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none;   /* Chrome/Safari/Opera */
	-khtml-user-select: none;    /* Konqueror */
	-moz-user-select: none;      /* Firefox */
	-ms-user-select: none;       /* Internet Explorer/Edge */
	user-select: none;			 /* Non-prefixed version, currently not supported by any browser */

	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-tap-highlight-color: transparent;
}

/* 테스터 */
.tt,
.tt1{
    width: 100%;
    height: 100%;
    position: absolute;
    /* background: url('../images/04/tt1.png') 0 0 no-repeat; */
    opacity: 1.0;
}
.tt.blk~.musicPage,
.tt.blk~.gamePage,
.tt.blk~.contents{
    opacity: 0.7;
}

.test, .test1{
    background-color: rgba(0, 0, 0, 0.5);
}
.test2{
    background-color: rgba(255, 0, 255, 0.5);
}


/* sing test css */
.testWrap{
    left: 0px;
    top: 0px;
    position: absolute;
    z-index: 999;
}
.testWrap ul{
    left: 0px;
    top: 0px;
    position: absolute;
    width: 230px;
    background-color: rgba(153, 154, 156, 0.7);
}
.testWrap li{
    position: relative;
    margin: 0px 0px 5px 0px;
    width: 220px;
    height: 20px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 0, 0, 1);
    color: rgba(255, 255, 0, 1.0);
    font-size: 16px;
    font-weight: 900;
    text-align: left;
    line-height: 20px;
    font-family: 'goyang'!important;
    letter-spacing: 0.02em;
}

.testWrap li.start{
    color: rgba(252, 83, 18, 1.0);
    margin-bottom: 20px;
}
.testWrap.waypoint{
    left: 1600px;
}
.testWrap li.title{
    color: rgba(255, 255, 255, 1);
    border: none;
}
.testWrap li.page01{
    color: rgba(252, 255, 0, 1.0);
}
.testWrap li.page02{
    color: rgba(186,252,18,1.0);
}
.testWrap li.page03{
    color: rgba(18,187,252,1.0);
}
#wrap .btnTest{
    top: auto;
    bottom: 0px;
    z-index: 999;
}



/*
#wrap:before {
    content: '';
    top: 0px;
    left: 0px;
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(28-1920x1080.jpg) 0 0 no-repeat !important;
    opacity: 0.7;
}
*/

/* <img/> Sequence Animation */
.wrapAni {
    display: block;
    position: absolute;
    overflow: hidden;
    animation-play-state: running;
}

.wrapAni>img {
    left: -10000px;
    top: 0px;
    position: absolute;
    display: none;
    width: 100%;
}

.wrapAni>img.show {
    left: 0px;
    display: block;
}

.wrapAni > img.hide{
    left: -10000px;
    display: none;
}

.wrapAni>.wrapLoad {
    top: 0px !important;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0.01 !important;
}

.wrapAni>.wrapLoad>img {
    position: absolute !important;
    display: block !important;
    width: 100px !important;
    height: 100px !important;
}


/* 페이지 네비게이션 */
.pageWrap .prev {
    background: url('../images/naviitem/btn_prev.png') no-repeat;
    background: none;
    width: 100px;
    height: 100px;
    left: 125px;
    top: 492px;
}
.pageWrap .next {
    background: url('../images/naviitem/btn_next.png') no-repeat;
    background: none;
    width: 100px;
    height: 100px;
    left: 1698px;
    top: 492px;
}


.pageWrap .next.dis,
.pageWrap .prev.dis{
    display: none;
}

.pageWrap .pageing:before,
.pageWrap .pageing:after{
    display: none;
}

.pageWrap .pageing .dot{
    width: 26px;
    height: 26px;
   /*  margin: 16px 16px; */
    margin: 15px 16px;
}


/* 팝업창 닫기 */
.pop .close{
    width: 109px;
    height: 109px;
    top: 16px;
    right: 137px;
    cursor: pointer;
    position: absolute;
    background: url('../images/helpitem/close.png') 0 0 no-repeat;
}



.pageWrap .prev,
.pageWrap .next,
.pageWrap .pageing,
.pageWrap .pageing .dot,
.pageWrap .pageing .dot.on,
.pop .close{
    background: none;
}






/* 일반 페이지 */
#container{
    background: none;
}

.contents{
	display: none;
}

/* 인트로 페이지 */
#container.intro{
    background: none;
}

#wrap > .colorPicker{
    position: absolute;
    top: 92px;
    left: 1446px;
}

#wrap > .colorPicker li{
    float: left;
    margin-right: 9px;
    width: 73px;
    height: 37px;
    border-radius: 22px;
}

#wrap > .colorPicker li.on{
	border: 5px solid #e54334;
}


/* 입력 페이지*/
.to{
    position: absolute;
    top: 300px;
    left: 750px;
    display: none;
}

#Textbox{
    width: 1600px;
    height: 641px;
    position: absolute;
    top: 234px;
    left: 151px;
	background: url('../images/inputItem/icon.png') 19px 33px no-repeat;
	background-size: 77px 82px;
    resize: none;
	font-family: NotoSan_kr;
	font-weight: bold;
}

.writePage textarea{
    font-size: 90px;
    /* color: #acacac;*/
}

.writePage textarea::placeholder{
	color: #acacac;
}

.writePage textarea:-ms-input-placeholder {
	color: #acacac;
}


/* 클릭 페이지 */
.contents.clickPage{
    width: 100%;
	height: 100%;
}

/* 애니 페이지(마무리하기) */
.contents.aniPage{
    width: 100%;
    height: 100%;
}

/* 게임 페이지 */
.contents.gamePage{
	width: 100%;
	height: 100%;
    /* background: url('../../common/images/bg_temp.png') center bottom no-repeat; */
   /*  background: rgba(255, 255, 255, 0.8) center bottom no-repeat; */
}

/* 비디오 페이지 */
.contents.videoPage {
	width: 100%;
	height: 100%;
}

/* 음악 페이지 */
.musicPage{
    left: 0px;
    top: 0px;
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* background: url('../../common/images/bg_temp.png') center bottom no-repeat;*/
    /* background: url(../images/04/music_bg1.png) center bottom no-repeat; */
}
.musicPage.onlyPlayer{
    width: auto;
	height: auto;
	overflow: visible;
    background: url('../images/bg_temp.png') center bottom no-repeat;
}

/* 확대축소 페이지 */
.contents.zoomPage{
    width: 100%;
    height: 100%;
}

/* 그리기 페이지 */
.contents.drawPage{
    width: 100%;
    height: 100%;
}

/* 확대축소 페이지 */
.contents.zoomPage{
    width: 100%;
    height: 100%;
}


/* 마무리하기(캐릭터3개) */
/* 팝업버튼 */
.aniPage .btnPop{
    left: 0px;
    top: 574px;
    position: absolute;
    width: 428px;
    height: 460px;
    cursor: pointer;
}

.aniPage .btnPop1{
    left: 162px;
}

.aniPage .btnPop2{
    left: 730px;
}

.aniPage .btnPop3{
    left: 1358px;
}

.aniPage .btnPop1.animotion{
    left: 120px;
    top: 560px;
    width: 490px;
    height: 490px;
    background: #fff url('../images/aniitem/aniitem1.png') 0 0 no-repeat;
}

.aniPage .btnPop2.animotion{
    left: 710px;
    top: 570px;
    width: 490px;
    height: 490px;
    background: #fff url('../images/aniitem/aniitem2.png') 0 0 no-repeat;
}

.aniPage .btnPop3.animotion{
    left: 1320px;
    top: 556px;
    width: 510px;
    height: 505px;
    background: #fff url('../images/aniitem/aniitem3.png') 0 0 no-repeat;
}

/*===================== 버튼들 */
/* 모두보기 */
.ansbtnAll {
    position: absolute;
    width: 286px;
    height: 65px;
    /* background: url(../images/06/comBtn.png) no-repeat; */
    background: url('../images/clickitem/answer_all.png') 0 0 no-repeat;
    cursor: pointer;
    top: 991px;
    left: 1576px;
}
/* 모두보기의 다시하기 */
.ansbtnAll.re{
    background: url('../images/clickitem/replay.png') 0 0 no-repeat;
}


/* .clickContent의 정답보기 */
.clickContent .ansbtn{
    width: 286px;
    height: 65px;
}

/* 정답보기 */
.ansbtn{
    position: absolute;
    width: 286px;
    height: 65px;
    /* background: url(../images/06/comBtn.png) no-repeat; */
    background: url('../images/clickitem/answer.png') 0 0 no-repeat;
    cursor: pointer;
    top: 991px;
    left: 1576px;
}
/* 정답보기의 다시하기 */
.ansbtn.re{
    background: url('../images/clickitem/replay.png') 0 0 no-repeat;
}
/* 다시한번더 */
.repop{
    width: 277px;
    height: 239px;
    background: url('../images/clickitem/rebtn.png') 0 0 no-repeat;
    position: absolute;
    left: 1643px;
    top: 756px;
    z-index: 9;
}
.repop .solpop{
    background: url('../images/clickitem/rebtn_rement.png') 0 0 no-repeat;
    width: 419px;
    height: 168px;
    position: absolute;
    top: -125px;
    left: -191px;
    pointer-events: none;
}

/* 함께읽기 */
.tobtn {
    position: absolute;
    top: 994px;
    left: 1570px;
    background: url('../images/clickitem/tobtn.png') center bottom no-repeat;
    width: 296px;
    height: 76px;
    cursor: pointer;
}
/* 이어보기 */
.connect_btn {
    width: 286px;
    height: 64px;
    background: url('../images/clickitem/connect_btn.png') 0 0 no-repeat;
    position: absolute;
    bottom: 17px;
    right: 59px;
    cursor: pointer;
}
/* 노랫말보이기 */
.showlyricsbtn{
    left: 1484px;
    top: 991px;
    position: absolute;
    width: 377px;
    height: 65px;
    background: url('../images/clickitem/lyricsbtnAll.png') 0 0 no-repeat;
    cursor: pointer;
}
.showlyricsbtn.re{
    background-position-x: -377px;
}



/* 팝업창 */
.aniPage .solpop .btnClose{
    width: 80px;
    height: 80px;
    position: absolute;
    top: 18px;
    right: 15px;
    cursor: pointer;
}

.aniPage .solpop{
    position: absolute;
    height: 413px;
    top: 198px;
}


/* 팝업창에 audio */
.pop .sound{
	top: 261px;
	left: 1589px;
    position: absolute;
    width: 73px;
	height: 73px;
	background: url('../images/music/pop_btn_sheet.png') 0 0 no-repeat;
    background-position-x: 0px;
	cursor: pointer;
}
.pop .sound.off{
    background-position-x: -73px;
    background-position-y: -1px;
	top: 260px;
}


/* simple audio */
.btnSound{
    left: 0px;
    top: 0px;
    position: absolute;
    width: 80px;
    height: 80px;
    background: url('../images/music/btnSound_sheet.png') 0 0 no-repeat;
    cursor: pointer;
}
.btnSound.play{
    background-position-x: -80px;
}
.btnSound.stop{
    background-position-x: 0px;
}

.btnSound.play:hover,
.btnSound.play.on{
    background-position-x: -80px;
}
.btnSound.stop:hover,
.btnSound.stop.on{
    background-position-x: 0px;
}


/* simple audio(그림자) */
.btnSound.shadow{
    width: 133px;
    height: 133px;
    background: url('../images/music/btnSound_shadow_sheet.png') 0 0 no-repeat;
}
.btnSound.shadow.play{
    background-position-x: -133px;
}
.btnSound.shadow.stop{
    background-position-x: 0px;
}

.btnSound.shadow.play:hover,
.btnSound.shadow.play.on{
    background-position-x: -133px;
}
.btnSound.shadow.stop:hover,
.btnSound.shadow.stop.on{
    background-position-x: 0px;
}


/* simple audio player */
.adoCtrlWrap {
    left: 1690px;
    top: 180px;
    position: absolute;
}
/* 배경에 그림자 있음 */
.adoCtrlWrap .bg {
    left: 0px;
    top: 0px;
    position: absolute;
    width: 190px;
    height: 110px;
    background: url('../images/music/simple_control_bg.png') 0 0 no-repeat;
    pointer-events: none;
}
.adoCtrlWrap .btn{
    left: 0px;
    top: 25px;
    position: absolute;
    width: 58px;
    height: 60px;
    cursor: pointer;
    background: url('../images/music/simple_control_btn_sheet.png') 0 0 no-repeat;
}
.adoCtrlWrap .btn.play{
    left: 30px;
    background-position-x: 0px;
}
.adoCtrlWrap .btn.pause{
    left: 30px;
    background-position-x: -58px;
}
.adoCtrlWrap .btn.stop{
    left: 98px;
    background-position-x: -116px;
}

.adoCtrlWrap .btn.play:hover,
.adoCtrlWrap .btn.play.on{
    background-position-x: 0px;
}
.adoCtrlWrap .btn.pause:hover,
.adoCtrlWrap .btn.pause.on{
    background-position-x: -58px;
}
.adoCtrlWrap .btn.stop:hover,
.adoCtrlWrap .btn.stop.on{
    background-position-x: -116px;
}
/* 배경에 그림자 없음 */
.adoCtrlWrap.type2{
    left: 70px;
    top: 142px;
}
.adoCtrlWrap.type2 .bg{
    width: 164px;
    height: 76px;
    background: url('../images/music/simple_control_bg2.png') 0 0 no-repeat;
}
.adoCtrlWrap.type2 .btn{
    top: 6px;
}
.adoCtrlWrap.type2 .btn.play,
.adoCtrlWrap.type2 .btn.pause{
    left: 20px;
}
.adoCtrlWrap.type2 .btn.stop{
    left: 88px;
}



/*
// use
{
    animation-duration: 0.7s;
}
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
*/




.twinkle_3{
	animation:twinkle 2s 3;
}
@keyframes twinkle{
    0%{opacity:0;}
    50%{opacity:1;}
    100%{opacity:0;}
}


.scale_105{
    transition-property: transform;
    animation-name: scale_change105;
    animation-direction: alternate;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes scale_change105{
    from{ transform: scale(1);}
    to{transform: scale(1.05);}
}
.scale_110{
    transition-property: transform;
    animation-name: scale_change110;
    animation-direction: alternate;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes scale_change110{
    from{ transform: scale(1);}
    to{transform: scale(1.1);}
}


.clockwise{
    transition-property: transform;
    animation-name: clockwise_change;
    animation-direction: alternate;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes clockwise_change{
    from{transform: rotate(0deg);}
    to{transform: rotate(-10deg);}
}
.rotate_-30{
    transition-property: transform;
    animation-name: rotate_change_-30;
    animation-direction: alternate;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes rotate_change_-30{
    from{transform: rotate(0deg);}
    to{transform: rotate(-30deg);}
}


.rotate_clockwise{
    transition-property: rotate;
    animation-name: rotate_change_clockwise;
    animation-fill-mode: both;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes rotate_change_clockwise{
    from{ transform: rotate(0deg); }
    to{ transform: rotate(359deg);}
}

.rotate_anticlockwise{
    transition-property: rotate;
    animation-name: rotate_change_anticlockwise;
    animation-fill-mode: both;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes rotate_change_anticlockwise{
    from{ transform: rotate(360deg); }
    to{ transform: rotate(1deg);}
}



.cloud_y5{
    transition-property: transform;
    animation-name: cloud_change_y5;
    animation-direction: alternate;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes cloud_change_y5{
    from{ transform: translateY(0px);}
    to{transform: translateY(5px);}
}
.move_y10, .cloud_y10{
    transition-property: transform;
    animation-name: cloud_change_y10;
    animation-direction: alternate;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes cloud_change_y10{
    from{ transform: translateY(0px);}
    to{transform: translateY(10px);}
}


.move_y5{
    transition-property: transform;
    animation-name: move_change_y5;
    animation-direction: alternate;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes move_change_y5{
    from{ transform: translateY(0px);}
    to{transform: translateY(5px);}
}
.move_y-5{
    transition-property: transform;
    animation-name: move_change_y-5;
    animation-direction: alternate;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes move_change_y-5{
    from{ transform: translateY(0px);}
    to{transform: translateY(-5px);}
}



.move_x-10{
    transition-property: transform;
    animation-name: move_change_x-10;
    animation-direction: alternate;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes move_change_x-10{
    from{ transform: translateX(0px);}
    to{transform: translateX(-10px);}
}

@keyframes spinner{
    0%{transform:rotate(-9deg) rotateY(0);}
    100%{transform:rotate(-9deg) rotateY(360deg);}
}
@keyframes op{
    0%{opacity:0;}
    100%{opacity:1;}
}

@keyframes hand{
    0%{opacity:1;top:-126.42px;margin-left:69.265px;}
    50%{opacity:1;top:-94.92px;margin-left:37.765px;}
    100%{opacity:1;top:-126.42px;margin-left:69.265px;}
}
@keyframes check{
    0%{opacity:0;}
    100%{opacity:1;}
}

/* https://codepen.io/oaviv/pen/EydZOq/ */
.metronome-2 {
    /* animation: metronome 0.5s ease-in-out infinite; */
    transform-origin: center bottom;
    transition-property: transform;
    animation-name: move_metronome-2;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
    /* animation-play-state: paused; */
}

@keyframes move_metronome-2 {
    0%,
    100% {
        transform: rotate(2deg);
    }
    50% {
        transform: rotate(-2deg);
    }
}


/* 2021-04-23 16:18:00 - JGY video.css 통합교과 커스텀 */
.videoFrame{
    top: 250px;
    left: 50%;
    transform-origin: left;
    transform: translateX(-50%);
}

.videoFrame .r-con .r-btn{
	background: #85d0f9;
}

.videoFrame .r-box div.on{
	background: #85d0f9;
}

.videoFrame .control-wrap .c-con .progress span{
	background: #85d0f9;
}

.videoFrame .control-wrap .c-con .time .currentTime{
	color: #85d0f9;
}

.videoFrame .control-wrap .s-con .s_icon {
    background: url('../images/video/sound_int.png') 1px 0 no-repeat;
}

/* 제목이 1줄 */
.videoFrame.type1,
.videoFrame.one{
    transform: scale(1.113) translateX(-50%) translateY(-39px);
}

/* 제목이 1줄 + 영상제공(=출처)*/
.videoFrame.type1.source,
.videoFrame.one.source{
    top: 247px;
}

/* 제목이 1줄 + 팝업페이지 영상*/
.videoFrame.type1.popvideo,
.videoFrame.one.popvideo{
    top: 185px;
}

/* 제목이 1줄 + 팝업페이지 영상 + 영상 우측 팁*/
.videoFrame.type1_2.popvideo,
.videoFrame.one_tab.popvideo{
    transform: scale(1.07) translateX(-54%) translateY(-37px);
    top: 190px;
}

/* 제목이 1줄 + 탭 */
/*
.videoFrame.type1_2,
.videoFrame.one_tab{
    transform: scale(1.0) translateX(-50%) translateY(-45px);
}
*/

/* 2021-05-14 - pge */
.videoFrame.type1_2,
.videoFrame.one_tab{
    transform: scale(1.07) translateX(-50%) translateY(-37px);
	top: 262px;
}

/* 2021-05-14 - pge */
/* 제목이 1줄 + 탭 + 영상제공(=출처) */
.videoFrame.type1_2.source,
.videoFrame.one_tab.source{
	transform: scale(1.07) translateX(-50%) translateY(-37px);
    top: 262px;
}

/* 제목이 2줄(기본) */
.videoFrame.type2,
.videoFrame.two{
}

/* 제목이 2줄 + 탭 */
.videoFrame.type2_2,
.videoFrame.two_tab{
    transform: scale(0.945) translateX(-50%) translateY(24px);
}

/* 제목이 1줄 + 팝업(네비) + 좌측탭 */
.videoFrame.pop_nav{
    transform: scale(1.07) translateX(-43%) translateY(-121px);
}
/* 제목이 1줄 + 팝업(네비) */
.videoFrame.pop_nav.no_tab{
    transform: scale(1.07) translateX(-50%) translateY(-92px);
}

/* 비디오 좌측 탭 */
.tabbox {
    left: -202px;
}
.tabbox .tab {
    font-family: 'goyang';
    font-weight: 400;
    font-size: 32px;
    margin-top: 16px;
    width: 202px;
    padding-right: 70px;
    padding-top: 14px;
    padding-bottom: 9px;
    line-height: 48px;
}
.tabbox .tab .rolemode {
    top: 22px;
    left: 152px;
}
.tabbox .tab .rolemode.on {
    background: url('../images/video/role_on.png') 0 0 no-repeat;
}

/* 2021-05-14 - pge */
/* 제목이 1줄 + 탭 + 영상제공(=출처)의 영상 출처 */
.videoPage .videoInfo{
	font-size: 20px;
    font-family: 'NotoSan_kr';
    position: absolute;
    bottom: 10px;
    right: 275px;
    font-weight: 600;
	text-align: right;
}

/* 제목이 1줄 + 영상제공(=출처)의 영상 출처 */
.videoPage .one.videoInfo,
.videoPage .one.videoInfo{
	right: 249px;
}

/* 제목이 1줄 + 팝업 + 네비*/
.pop_nav .tabbox{
    left: -211px;
}
.pop_nav .tabbox .tab {
    margin-top: 21px;
    width: 211px;
}