@charset "utf-8"; 

/* 경로명 설정시 libs , viewer 두개 경로 틀리지 않게 지정 */
/* ------------------------------------------------------------------------------------------------------------- */
/* Viewer - Header */
/* 각 학년에 사용하는 include/viewer/css/header.css에서 변동이 필요한 색상, 크기, 위치 등을 지정해 주세요. */
/* header.css는 전 학년 동일하게 사용합니다. */
#topBar {
    background-image: url("../../viewer/images/topBar_pattern.jpg");
}
#topBar .gnb .chapterMenu	{
	width:440px;
}
#topBar .gnb .gnbBar .lessonCell {
	background-color: #747820; 
}
#topBar .gnb .chapterMenu .chapter .depth1 .name {
	width:310px;line-height:1.1em
}

#topBar .gnb .gnbBar .chapterName {
	color: #747820; 
	letter-spacing:-0.03em
}

#topBar .gnb .gnbBar .partName {
	background-color: #dadfbc; 
	width:230px
}

/*페이지이동*/
#topBar .movePage {
    width: 190px;
}
#topBar .movePage .btnPageGo {
	background-color: #a7af39; 
}

#topBar .movePage .btnPageGo:hover {
    background-color: #868d25;
}

#topBar .tManager .btnTManager .tManagerBalloon {
	width: 198px;
	margin-left: -92px;
	background-image: url("../../viewer/images/tManagerBalloon.png");
	background-size: 198px 84px;
}

#topBar .tManager .btnTManager:hover .tManagerBalloon span.button:hover {
	color: #a6b34c; 
}

#topBar .volume {
    width: 60px;
}

#topBar .volume .volumeBox {
	border: solid 3px #e9eece; 
}

#topBar .volume .volumeBox .dragTrack .gauge {
	background-color: #747820; 
}

#topBar .volume .volumeBox .dragTrack .bar {
	background-color: #a6b34c; 
}

/*구분선*/
#topBar .divider {width:30px; line-height:78px; font-size:0; text-align:center;}

/* ------------------------------------------------------------------------------------------------------------- */
/* Viewer - Nav */
/* 각 학년에 사용하는 include/viewer/css/nav.css에서 변동이 필요한 색상, 크기, 위치 등을 지정해 주세요. */
/* nav.css는 전 학년 동일하게 사용합니다. */
/* ------------------------------------------------------------------------------------------------------------- */
/*추가학습*/
.btnMoreLearn {
    background-image: url("../../viewer/images/moreLearnBg.png");
}

.moreLearnWin {
	border: solid 1px #e5e5e5; 
	background-color: #e9eece; 
}

.moreLearnWin .vBar {
	background-color: #96a532; 
}

/* ------------------------------------------------------------------------------------------------------------- */
/*T매니저 창*/
.tManagerWin {
	background-color: #e5eed3; 
}

.tManagerWin .tabs .tab.on {
	background-color: #a6b34c; 
}

.tManagerWin .listOutWrap {
	border-top: solid 3px #a6b34c; 
}

.tManagerWin .listOutWrap .listArea .list {
	border-bottom: dashed 2px #a6b34c; 
}

.tManagerWin .listOutWrap .listArea .list:hover .page {
	color: #939f3c; 
}

.tManagerWin .listOutWrap .listArea .list .button .btnDel {
	background-color: #a6b34c; 
}

.tManagerWin .listOutWrap .listArea .list .button .btnDel:hover {
	background-color: #939f3c; 
}

/* ------------------------------------------------------------------------------------------------------------- */
/* Viewer - template */
/* 각 학년에 사용하는 include/viewer/css/template.css에서 변동이 필요한 색상, 크기, 위치 등을 지정해 주세요. */
/* template.css는 전 학년 동일하게 사용합니다. */

/* ------------------------------------------------------------------------------------------------------------- */
/* Content - Media */
/* 각 학년에 사용하는 include/libs/css/ui_media.css에서 변동이 필요한 색상, 크기, 위치 등을 지정해 주세요. */
/* media.css 는 전 학년 동일하게 사용합니다. */

.playerWrap {
	position: absolute; 
	top: 94px;
	left: 50%;
	margin-left:744px;
	transform-origin: top right; 
	z-index:999; 
}

.playerWrap .playerTab {
	position: absolute; 
	display: flex; 
	justify-content: center; 
	align-items: center; 
	top: 6px; 
	left: 0px;
	width: 73px;
	height: 76px;
	cursor: pointer; 
	background-image: url("../../libs/images/media/audio_player/playerIcon.png");
	z-index:999; 
}
.playerWrap .playerTab:hover {	background-image: url("../../libs/images/media/audio_player/playerIcon_hover.png");}
.playerWrap .playerTab .tooltip {
	position: absolute; 
	display: none; 
	top: -15px; 
	left: -35px; 
	justify-content: center; 
	align-items: center; 
	width: 62px; 
	height: 36px; 
	font-size: 18px; 
	color: #666666; 
	font-family: 'NotoSans'; 
	border: solid 1px #f0c99f; 
	box-sizing: border-box; 
	border-radius: 3px; 
	background-color: #fffbdb; 
}

.playerWrap .playerTab:hover .tooltip {
	display: flex; 
}

.playerWrap .controlBox {
	position: absolute;
	top:0px;
	left: 0px;
	display: flex; 
	justify-content: center; 
	align-items: center; 
	flex-direction: column; 
	width: 73px;
	height: 76px;
	/*overflow: hidden;*/
	border-radius: 14px;
	background: #FFF;
	padding: 0px;
	box-sizing: border-box;
	opacity: 0;
}
.playerWrap .playerCloseBtn {display: none; position: absolute; width: 33px; height: 33px; right: -192px; top: -15px;background: url("../images/media/audio_player/btn_close.png") no-repeat;}

/* 따라 말하기 경우 */

.playerWrap.followBox .controlBox { top: 38px;}
.playerWrap.followBox .playerCloseBtn {top: 23px;}


.audioControls {
	width:210px
}
.audioControls .mvTime {
	width: 100px;
}
.audioControls>div {
	margin-right: 0;
}

.playerWrap.player2 {
	top: 300px; 
}
.roleplayPannel {display: flex; gap: 7px;}


.playerWrap.player2 .tabs {
	position: absolute; 
	display: flex; 
	top: -20px; 
	padding-left: 9px; 
	box-sizing: border-box; 
	left: 0; 
}

.playerWrap.player2 .tabs .tab {
	width: 80px; 
	height: 20px; 
	display: flex; 
	justify-content: center; 
	align-items: center; 
	font-size: 14px; 
	color: #ffffff; 
	font-family: 'NotoSans'; 
	border-radius: 3px 3px 0 0; 
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.1); 
	cursor: pointer; 
}

.playerWrap.player2 .tabs .tab:nth-of-type(1) {
	background-color: #ff9309; 
}

.playerWrap.player2 .tabs .tab:nth-of-type(2) {
	background-color: #0c969e; 
}

.playerWrap.player2 .controlBox {
	border: solid 1px rgba(0, 0, 0, 0.1); 
	background-color: #ff9309; 
}

.playerWrap.player2 .playbackratePannel {
	color: #ffffff; 
	border: solid 1px #ffffff; 
}

.playerWrap.player2 .playbackratePannel>div {
	border-right: solid 1px #ffffff; 
}

/* ------------------------------------------------------------------------------------------------------------- */
/*퀵메뉴*/
.quickMenuCircle {
    background-color: #faa61a;
}

.quickMenuBody {
	background-color:#fef6e8;
    border: solid 3px #faa61a;
}

.quickMenuBody .btn {
	background-color: #fef6e8;
    border-bottom: solid 1px #fdcc84;
}

.quickMenuBody .btn:last-child {
    border-bottom: 0;
}

.quickMenuBody .btn:nth-of-type(2n) {
    background-color: #ffe6cb;
}

.quickMenuBody .btn.activity .balloonMenu {
    background-color: #f58220;
}

.quickMenuBody .btn.activity .balloonMenu ul li:hover {
    color: #973c00;
}

.quickMenuBody .btn.activity .balloonMenu ul li:hover .bullet {
    background-color: #973c00 !important;
}

.quickMenuBody .btn.activity .balloonMenu.right::after {
    border-right: 10px solid #f58220;
}

.quickMenuBody .btn.activity .balloonMenu.left::after {
    border-left: 10px solid #f58220;
}

.quickMenuBody .btn.activity .balloonMenu ul li:hover {color:#973c00;}
.quickMenuBody .btn.activity .balloonMenu ul li:hover .bullet {background-color:#973c00 !important;}

.quickMenuMemoWin .memoArea .memoHeader {
    border-top: solid 2px #f58220;
}

.quickMenuMemoWin .memoArea .memoHeader .btn {
    background-color: #f58220;
}

/*팝업창*/
.commonWin {   
    background-color: #a6b34c;
}

/*팝업창 - 스타일2*/
.commonWin2 {
    border-top:solid 2px #a6b34c;
}
.commonWin2 .winHead {background-color:#f7f5b9;}
.commonWin2 .winFoot {background-color:#f7f5b9;}

.flatButton {
    color:#ffffff;
    background-color: #a6b34c; /*확인 삭제버튼공통색*/
}
.flatButton.gray {background-color:#a9a9a9;}


/*그리기 쓰기*/
.drawAndWritePopup .winBody .drawButtonTable td .btn.on {background-color:#ffd58d;}
.drawAndWritePopup .winBody .colorAndThickness .thickCell.on {background-color:#f9a61a;}
.drawAndWritePopup .winBody .fontSize .sizeCell.on {color:#ffffff; background-color:#f9a61a;}

/*하단버튼*/
.drawAndWritePopup .winBody .bottomButtons {background-color:#f7f5b9;}

#memoTemplate {
	left: 50%;
	top: 50%;
	transform-origin: top left;
	z-index: 999;
	pointer-events: all;
}