@charset "utf-8";
@import "notosans.css";

body {
	font-family: NanumGothic;
	font-size: 23px;
}

h1 {
	margin-bottom: 1.5vw;
}

p,
ol,
pre {
	margin: 0;
	/* font-size: 2; */
}

p.reference {
	font-size: 16px;
}

span.reference {
	font-size: 16px;
}


ul {
	list-style: none;
	/* font-size: 1.5vw; */
}

main {
	width: 100%;
	height: auto;
	min-width: 200px;
}


img {
	margin: auto;
	width: 90%;
	height: auto;
	text-align: center;
}

table {
	width: 100%;
	min-height: 15em;
	margin: auto;
	border-collapse: collapse;
}

th {
	/* font-size: 1.5vw; */
	border: none;
}

tr {
	padding-bottom: 1.5vw;
}

td {
	border: none;
	text-align: center;
	/* font-size: 1.5vw; */
}

main > .content {
	width: 100%;
	margin: 0;
	padding: 0;
}


.box {
	padding: 2vw;
	width: 70%;
	height: auto;
	margin: 5% auto;
	border: 0.15vw solid black;
	border-radius: 1vw;
	text-align: center;
}

.act {
	border-radius: 1vw;
	background-color: rgb(70, 87, 130);
	color: rgb(239, 239, 239);
	font-weight: bold;
	/* font-size: 1.5vw; */
	padding: 0.5vw 1vw;
}

.actNumber {
	background-color: rgb(239, 239, 239);
	border: 0.2vw solid rgb(70, 87, 130);
	border-radius: 1.5vw;
	padding: 0.5vw 1vw;
	margin: 0;
}

.B {
	font-weight: bold;
}

.blank {
	width: auto;
	min-width: 40%;
	border: 0.1em solid #000000;
	margin: 5%;
}

.bottomBorder {
	border-top: none;
	border-right: none;
	border-bottom: 0.2vw solid lightgray;
	border-left: none;
}

.cards {
	width: 80%;

	margin: 2.5vw auto;
	text-align: center;

	display: -ms-grid;
	display: grid;
	grid-gap: 2vw;

	-ms-grid-columns: 30% 3% 30% 3% 30%;
	-ms-grid-rows: 1fr;

	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 1fr;

}

.cardA {
	-ms-grid-row: 1;
	-ms-grid-column: 1;
	grid-row: 1;
	grid-column: 1;

}

.cardB {
	-ms-grid-row: 1;
	-ms-grid-column: 3;
	grid-row: 1;
	grid-column: 2;
}

.cardC {
	-ms-grid-row: 1;
	-ms-grid-column: 5;
	grid-row: 1;
	grid-column: 3;
}

.dotBorder {
	border: 0.15vw dotted black
}

.fitBox {
	border: 0.1vw solid black;
	display: inline-block;
	padding: 0 2vw;
	/* margin: 0.5vw; */
	margin: 1% auto;
	width: fit-content;
}

.actTitle,
.contentTitle,
.imageContainer,
.pageTitle,
.subTitle {
	width: inherit;
	height: auto;
}

.halfWidth {
	width: 50%;
}

.sampleContainer {
	min-height: fit-content;
	padding: 0;
	text-align: center;
	font-weight: bolder;
	vertical-align: top;
	width: 100%;
	display: inline-block;
	margin: 0;
	margin-bottom: 10px;

}

.sampleHeader {
	/*  
        2018-08-06, 16:06,
        width: 100% -> max-width100% 
        padding: 1% 1%
     */
	max-width: 100%;
	height: 10%;

	padding: 2% 2%;

	background-color: #456782;
	color: #FFFFFF;
}

.sampleHeader.flex {
	display: flex;
	flex-direction: row;
}

.sampleHeader.flex > div {
	flex-grow: 1;
}

.sampleBody {
	/* width: 100%; */
	height: 70%;

	margin: 2% 0;

	display: flex;
	flex-direction: row;
}

.sampleBody > div.c3 {
	/* padding: 5% 0; */
	padding: 2% 0;
}

.sampleBody > div.c3:nth-child(2n) {
	flex-grow: 1;
}

.sampleBody > div.c3:nth-child(2n+1) {
	flex-grow: 2;
}

.sampleBody > div.c4 {
	max-width: 50%;
	/* padding: 5% 0; */
	padding: 2% 0;
	flex-grow: 1;
}

.sampleBody > p {
	margin: 1% 0;
}

.sampleBody .c7,
.sampleFooter .c7 {
	flex-grow: 1;
}

/* .sampleBody .c7 img, .sampleFooter .c7 img { */
/* width: 15vw; */
/* height: 10vw; */
/* } */

.sampleFooter {
	width: 100%;
	height: 30%;

	padding: 5% 0 5% 0;

	border-top: 0.1em solid #000000;
}

.sampleFooter.flex {
	display: flex;
	flex-direction: row;
}

.sampleFooter.flex > div {
	flex-grow: 1;
}

.square-grid {
	/* 
        2018-08-06, 16:06
        width: 70% -> 30vw,
        height: 6vw
    */
	width: 20vw;
	height: 4vw;

	margin: auto;

	display: flex;

	flex-direction: row;
}


.square-grid:first-child .square-grid-item {
	border-top: 0.1em solid #000000;
}

.square-grid:first-child .square-grid-item:last-child {
	border-top: none;
}

.square-grid:last-child .square-grid-item {
	border-right: 0.1em dotted #000000;
}

.square-grid:last-child .square-grid-item:last-child {
	border-right: none;
}

.square-grid:last-child,
.square-grid:last-child .square-grid-item {
	color: #FF0000;
	border-left: none;
	border-bottom: none;
}

.square-grid-item {
	flex-basis: 8vw;
	flex-grow: 1;
	/* 
        2018-08-06, 16:06,
        display, align-items, justify-content 추가
     */
	display: flex;
	align-items: center;
	justify-content: center;
	border-right: 0.1em solid #000000;
	border-bottom: 0.1em solid #3b0707;
}

.square-grid-item:first-child {
	border-left: 0.1em solid #000000;
}

.square-grid-item:last-child {
	color: #FF0000;
	border-right: none;
	border-bottom: 0.1em dotted #000000;
}

.c3 .square-grid .square-grid-item {
	color: #000000;
	border-right: 0.1em solid #000000;
	border-bottom: 0.1em solid #000000;
}

.c3 .square-grid:first-child .square-grid-item:last-child {
	border-top: 0.1em solid #000000;
}

.c3 .square-grid:last-child .square-grid-item:first-child {
	border-left: 0.1em solid #000000;
}

.c3 .square-grid:last-child .square-grid-item:last-child {
	border-right: 0.1em solid #000000;
}

.inner-flex {
	/* display: flex; */
	/* flex-direction: column; */
	/* 0803 수정 */
	/* width: 100%; 0806 삭제 */
	display: flex;
	flex-direction: column;
}

.inner-flex > p {
	min-height: 1.5rem;
	margin: 1% 0;
	border-bottom: 0.1em solid #bfbfbf;
}

.inner-flex > p:nth-child(2n+1) {
	flex-grow: 1.5;
}

.inner-flex > p:nth-child(2n) {
	flex-grow: 1;
}

.inner-flex > span {
	min-height: 1.5rem;
	margin: 1% 0;
	border-bottom: 0.1em solid #bfbfbf;
}

.inner-flex > span:nth-child(2n+1) {
	flex-grow: 1.5;
}

.inner-flex > span:nth-child(2n) {
	flex-grow: 1;
}


.imageContainer {
	width: 80%;
	margin: 0vw auto;
	text-align: center;
	/* border: 10px solid black; */
	border: 10px solid rgba(0, 0, 0, 0.0);
}

.imageContainer.ready {
	width: 60%;
}

.imgBorder,
.sampleBorder {
	/* border: 10px solid black; */
		 border: 10px solid rgba(0,0,0,0.0); 
	box-sizing: border-box;
}

.br60 {
	border-radius: 60px;
}
.br30 {
	border-radius: 30px;
}
.br50 {
	border-radius: 35px;
}

.leftAlign {
	text-align: left;
}

.paragraph {
	width: 100%;
	margin-bottom: 3vw;
}

.red {
	color: red;
}

.subContent {
	clear: both;
}

.summarize {
	background-color: rgb(229, 244, 249);
	height: fit-content;
}

.titleNumber {
	color: white;
	margin-right: 1vw;
}

.titleText {
	font-weight: bold;
	line-height: 1.5em
}

.actTitle {
	margin-top: 5vw;
	margin-bottom: 2vw;
}

.actTitle .titleText {
	background-color: rgb(239, 239, 239);
	padding: 0.5vw 1.5vw 0.5vw 1vw;
	display: inline-block;
}

.contentTitle,
.pageTitle {
	/* margin-top: 10vw; */
	margin-top: 4vw;
	/* GH */
	margin-bottom: 1.5vw;
}

.contentTitle > .titleText {
	background: linear-gradient(90deg, rgb(70, 87, 130) 3vw, rgb(239, 239, 239) 3vw);
	border: 0.1vw solid rgb(70, 87, 130);
	border-radius: 0.75vw;
	width: fit-content;
	height: fit-content;
	padding: 0.2vw 4vw 0.2vw 1vw;
	/* font-size: 2vw; */
}

.subTitle .titleText {
	background: linear-gradient(90deg, rgb(70, 87, 130) 1%, rgb(255, 255, 255) 1%);
	padding-left: 1.15vw;
	/* font-size: 2vw */
}

.summarize .text {
	padding-left: 5px;
}

.summarize .sumText {
	font-weight: bold;
}

.summarize ol,
.paragraph ol,
.paragraph ul {
	margin-top: 1.5vw;
	margin-bottom: 1.5vw;
	padding-left: 5%;
}

.summarize li,
.paragraph li {
	list-style: decimal;
}

.imgswrap {
	margin-top: 30px;
	text-align: center;
}

.imgswrap .sampleContainer.boxtitle {
	width: 47%;
	margin-top: 0px;
	margin-bottom: 0px;
}

.orderbox {
	width: 47%;
	margin-top: 0px;
	margin-bottom: 0px;
	display: inline-block;
	vertical-align: top;
	padding: 10px;
	box-sizing: border-box;
}

.orderbox img {
	width: 100%;
	max-width: 700px;
	box-sizing: border-box;
	border: 10px solid #aecbe2;
}
.orderbox img.TTSBorder {
border:10px solid #00ff00;
}


.codetxtwrap1 {
	vertical-align:top; display:inline-block;
}
.codetxtwrap2 {
	display:inline-block; margin-left:8px; padding-left:10px; padding-right:10px;
}
.border,
.tdBorder td {
	/*    border: 2px solid black; */
	/*20190905*/
	border: 2px solid #aecbe2;
	border-radius: 25px;
	padding: 5px 2px;
}

.orderbox .border {
	overflow: hidden;
	padding: 0;
}

.noBorder {
	border: none;
}

.paragraph .titleText {
	text-indent: 0px;
}

.paragraph .text {
	/* text-indent: 2vw; */
	/* font-size: 1.5vw; */
	text-align: justify;
	text-indent: 23px;
}

.paragraph .actText {
	text-align: justify;
	text-indent: 23px;
	display: inline-block;
}

.paragraph .listText {
	text-align: justify;
	text-indent: 0px;
	margin-left: 50px;
	display: inline-block;
}

.poAbsol {
	position: absolute;
}

.paragraph .summarize {
	margin: 1.5vw 4vw;
	/* 
        2018-08-06, 16:06,
        padding: 1.5vw 0 -> 2% 1%
    */
	padding: 2% 1%;
	text-align: center;
}

.pageTitle .summarize {
	width: max-content;
    max-width: 1000px;
    min-width: 500px;

	padding: 25px;
}

@media (max-width:600px) {
		.pageTitle .summarize{
		min-width: 300px;
			width: fit-content
	}
}


.summarize .text {
	/* padding-left: 5px; */
	margin-left: 5px;
	text-indent: 0px;
	padding-left: 0px;
}

.sampleContainer > .imageContainer,
.box > .imageContainer,
table .imageContainer {
	width: 100%;
}

.text.long {
	text-align: left;
}

/* 0803 추가 */
.c7 p {
	margin: auto 0;
}

.flexBox {
	width: 100%;
	display: flex;
	flex-direction: row;
}

.flexBox > div {
	flex-grow: 1;
}

.flexBox img {
	width: 20vw;
	height: 20vw;
}

.c7-item {
	display: inline-block;
	/* width: 10vw;
    height: 10vh; */
}

.inner-flex img {
	width: 10vw;
	height: 10vw;
}

.inner-flex > div {
	flex-grow: 1;
}

.inner-flex .c7 {
	flex-grow: 1;
}

.inner-flex .c7:nth-child(2n+1) {
	background: #FFFFFF;
}

.inner-flex .c7:nth-child(2n) {
	background: #FFE4B5;
}


/* 0806 추가 */
.c6,
.c7,
.c8,
.c9 {
	margin: 0 auto;
	width: 100%;
	height: auto;
}

.sixBySix {
	flex-grow: 1;
	display: flex;
	flex-direction: row;
	width: 100%;
}

.sixBySix-item {
	border: 0.1em solid #000000;
	width: 33.3%;
}

.sixBySix:nth-child(2) .sixBySix-item,
.sixBySix:nth-child(3) .sixBySix-item {
	border-top: none;
}

.sixBySix .sixBySix-item:nth-child(2) {
	border-right: none;
	border-left: none;
}

.c10 {
	flex-grow: 1;
	flex-basis: 18vw;
	/* 
        2018-08-06, 16:06,
        display, align-items, justify-content 추가
    */
	display: flex;
	align-items: center;
	justify-content: center;
}


/* 2018-08-06, 16:05 추가 사항 */
.c5 {
	/* 2~4% */
	padding: 0 2%;
}

.c5 > p {
	margin: 3% 0;
}

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

/* 2018-08-06, 14:24 추가 사항 */
.c7-item > img {
	/* 10vw -> 8vw 수정 */
	width: 8vw;
	height: 8vw;
}

.c10 > img,
.ddruBoard > img {
	margin-top: 1%;
	width: 15vw;
	height: 15vw;
}

.ddruBoard {
	flex-grow: 1;
	flex-basis: 18vw;
	border: 0.1em solid #000000;
}

.inner-flex > .c10:first-child {
	border-top: 0.1em solid #000000;
}

.inner-flex:first-child > .c10 {
	border-right: 0.1em solid #000000;
	border-bottom: 0.1em solid #000000;
}

.inner-flex:first-child > .c10:last-child {
	border-bottom: none;
}

.inner-flex:last-child > .c10 {
	border-left: 0.1em solid #000000;
	border-bottom: 0.1em solid #000000;
}

.inner-flex:last-child > .c10:last-child {
	border-bottom: none;
}

.sampleBody.c7,
.sampleBody.c10 {
	margin: 0;
}

.sequenceTable {
	border-bottom: 0.1em solid #456782;
}

.sequenceTable td {
	font-size: 23px;
}

.sequenceTable thead th {
	background: #456782;
}

.square-grid:first-child {
	margin-top: 2%;
}

.square-grid:last-child {
	margin-bottom: 2%;
}



/* 0808 TTS 대응 */
.TTSBackground {
	background-color: #00FF00;
}

.TTSBackground td {
	background-color: #00FF00;
}

.TTSBorder {
	border: 10px solid #00FF00;
}

/* 0809 SKIP navigation */
.skip {
	position: absolute;
	top: 0;
	left: 0;
	width: inherit;
	height: 50%;
}

.skip a {
	position: absolute;
	top: -50px;
	left: 0;

	width: 150px;

	background: #000000;
	border-bottom-right-radius: 5px;
	padding: 10px;

	font-weight: bold;
	font-size: 16px;
	text-align: center;
	color: #FFFFFF;
	opacity: 0;
}

.skip a:focus {
	top: 0;
	outline: #3ec728 solid thin;
	z-index: 1111111;
	opacity: 1;
}

/* 
    0810
*/
.disabled {
	display: none;
}

/* 
    7차시 하단 악기 도표, GRID LAYOUT
*/
.inner-grid {
	width: 100%;
	height: 100%;
	display: -ms-grid;
	display: grid;

	-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	-ms-grid-rows: 1fr;

	grid-template-columns: repeat(30, 1fr);
	grid-template-rows: 1fr;
	grid-row-gap: 3%;
}

.inner-grid:nth-child(2n) {
	background: #FFE4B5;
}

.inner-grid:nth-child(2n+1) {
	background: #FFFFFF;
}

.inner-grid:not(:first-child) {
	border-top: 0.1em solid #000000;
}

.grid-item {
	margin: auto 0;
}

.grid-item.itemA {
	-ms-grid-column: 1;
	-ms-grid-row: 1;
	-ms-grid-column-span: 5;
	grid-column: 1;
	grid-column-end: 5;
	grid-row: 1;
}

.grid-item.itemB {
	-ms-grid-column: 6;
	-ms-grid-row: 1;
	-ms-grid-column-span: 5;
	grid-column: 6;
	grid-column-end: 10;
	grid-row: 1;
}

.grid-item.itemC {
	-ms-grid-column: 11;
	-ms-grid-row: 1;
	-ms-grid-column-span: 5;
	grid-column: 11;
	grid-column-end: 15;
	grid-row: 1;
}

.grid-item.itemD {
	-ms-grid-column: 16;
	-ms-grid-row: 1;
	-ms-grid-column-span: 5;
	grid-column: 16;
	grid-column-end: 20;
	grid-row: 1;
}

.grid-item.itemE {
	-ms-grid-column: 21;
	-ms-grid-row: 1;
	-ms-grid-column-span: 5;
	grid-column: 21;
	grid-column-end: 25;
	grid-row: 1;
}

.grid-item.itemF {
	-ms-grid-column: 26;
	-ms-grid-row: 1;
	-ms-grid-column-span: 5;
	grid-column: 26;
	grid-column-end: 31;
	grid-row: 1;
	margin: 0;

	border-left: 0.1em solid #000000;

	display: block;
}

.grid-item.itemA2 {
	-ms-grid-column: 4;
	-ms-grid-row: 1;
	-ms-grid-column-span: 5;
	grid-column: 4;
	grid-column-end: 8;
	grid-row: 1;
}

.grid-item.itemB2 {
	-ms-grid-column: 9;
	-ms-grid-row: 1;
	-ms-grid-column-span: 5;
	grid-column: 9;
	grid-column-end: 13;
	grid-row: 1;
}

.grid-item.itemC2 {
	-ms-grid-column: 14;
	-ms-grid-row: 1;
	-ms-grid-column-span: 5;
	grid-column: 14;
	grid-column-end: 18;
	grid-row: 1;
}

.grid-item.itemD2 {
	-ms-grid-column: 19;
	-ms-grid-row: 1;
	-ms-grid-column-span: 5;
	grid-column: 19;
	grid-column-end: 23;
	grid-row: 1;
}

/* .inner-grid:nth-child(2n) .grid-item.itemF {
    border-left: 0.2em solid #FFFFFF;
} */
/* .inner-grid:nth-child(2n+1) .grid-item.itemF {
    border-left: 0.1em solid #FFE4B5;
} */


.videoPlayBtn {
	position: relative;
	top: 0;
	width: 150px;
	height: 50px;
	margin: auto;
	font-size: 23px;
	text-indent: 0px;
	border: 0.4em solid #29abd2;
	border-radius: 2em;
	cursor: pointer;
}

.videoPlayBox {
	height:20%;display:inline-block; text-align: center; margin-bottom: 2vw;
}

.videoContainer, .videoContainer video {
	border: 10px solid transparent;
}

/* 코드 다운로드 버튼 */
.codeDownBtn {
	position: relative;
	top: 0;
	width: 170px;
	height: 50px;
	margin: auto;
	font-size: 23px;
	text-indent: 0px;
	border: 0.4em solid #fd8631;
	border-radius: 2em;
	cursor: pointer;
}
.codeDownBtn.plueImg {
	width: 200px;
    left: 50%;
    transform: translateX(-50%);;
}

/* 하단 차시(단원) 이동 버튼 */
.endBtnBox {
	width: 100%;
	margin-top: 50px;
	text-align: right;
}

.endBtn {
	width: 120px;
	height: 52px;
}

/* 상단 제목 위 여백 처리 */
#contents {
	margin-bottom: 124px;
	-ms-user-select: none;
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}
.divTableRow {
			width: 100%;
			display: table;
		}
		
		.divTableCell1 {
			width: 65%;
			display: table-cell;
			vertical-align: middle;
		}
		
		.divTableCell2 {
			width: 35%;
			display: table-cell;
			vertical-align: middle;
		}
		
		@media (max-width:700px) {
			.upnum {
				top:3px
			}
			
			.divTable {
				margin-top: 3vw;
			}
			
			.divTableCell1, 
			.divTableCell2 {
				width: 100%;
				display: block;
			}
		}


@media (max-width:750px) {
	main > .content {
		width: auto;
		margin: 0;
		padding: 0;
	}
	
}
@media (max-width:700px) {
	.orderbox {
		width: 93%;
	}