body {
	font-family: 'Nanum Gothic';
	background: url(../images/pattern.png);
	word-break: keep-all;
}
/* 포커스시 나타나는 이동 창*/
.skip {
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: 50%;
}
header ul, header li {
    display: inline-block;
}
.skip a:focus {
    top: 0;
    outline: #3ec728 solid thin;
    z-index: 1111111;
}
.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;
}
/* 최 상단 메뉴*/
#menuTop
{
	width:100%;
	height:64px;
	font-weight: 700;
	color: white;
	line-height: 68px;
	box-shadow: 0px 5px 34px 0px rgba(0, 0, 0, 0.14);
	border-bottom: #979ba6 1px solid;
	position: fixed;
    z-index: 7;
}
/*최 상단 메뉴 우측메뉴 버튼*/
/*
.toparea{
	display: block;
	position: absolute;
	top:0px;
	left:0px;
	width:100%;
	height:64px;
	font-size: 21px;

}
.menuOpen{
	height:64px;
	font-size:0px;
	margin-left:calc(100% - 80px);
	width:80px;
	vertical-align: top;
}
.menuimg{
	width:32px;
	height:30px;
}
*/

/*최 상단 메뉴 우측메뉴 버튼*/
.toparea{
	display: block;
	position: absolute;
	top:0px;
	left:0px;
	width:100%;
	height:64px;
	font-size: 21px;

}
.howtouse{
	display: block;
	height: 100%;
    color: white !important;
    text-indent: 15px;
    font-size: 22px;
    font-weight: 600;
    text-align: left;
    line-height: 78px;
}
.useback{
/*	background:#142b02 !important;*/
    background: #222222 !important;
}
.menuOpen{
	height:64px;
	font-size:0px;
	margin-left:calc(100% - 80px);
	width:80px;
	vertical-align: top;
}
.menuimg{
	width:32px;
	height:30px;
}


/*두번째 메뉴 공간*/
.secondArea{
	z-index: 9;
	width:calc(100% - 80px);
	height: 64px;
	position: absolute;
	top:0px;
	left:0px;
	border-radius: 0 25px 0 0;
}
.secTxtArea{
	display: inline-block;
	margin-left:50%;
	width:calc(50% - 70px);
	height: 64px;
    text-overflow: ellipsis;
    white-space: nowrap;
	word-wrap: normal;
	vertical-align: top;
}
.sectextset{
	width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.secArrows{
	display: inline-block;
	
}
.secArrows{
	vertical-align: top;
	width:60px;
	height:64px;
}
.secArrows a{
	display: inline-block;
	height:64px;
	visibility: hidden;
}
.secArrows img{
	width:24px;
	height:38px;
	margin-top: 13px;
}

/*첫 번째 메뉴 공간*/
.firstArea{
	z-index: 10;
	width:calc(50% - 70px);
	height: 64px;
	position: absolute;
	top:0px;
	left:0px;
	border-radius: 0 25px 0 0;
}
.firTxtArea{
	display: inline-block;
	width:calc(100% - 155px);
	margin-left:90px;
	text-overflow: ellipsis;
    white-space: nowrap;
	word-wrap: normal;
	vertical-align: top;
	height: 64px;
}
.firTxtSet{
	width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.firTxtlng{
	display: block;
}
.firTxtsht{
	display: none;
}
.downlist{
	display: inline-block;
	width:50px;
	height:64px;
	margin-top: -5px;
	line-height: 10px;
}
.downlist img{
	width:35px;
	height:22px;
	/*margin-top:10px;*/
}
/*홈메뉴 공간*/
.hombtn{
	z-index: 11;
	width:77px;
	height: 64px;
	position: absolute;
	top:0px;
	left:0px;
	display: block;
	text-align: center;
}
.hombtn a{
	display: block;
    height: 35px;
	width: 38px;
	position: absolute;
    top: 12px;
    left: 18px;
}

#homeSet{
	width:38px;
	height:35px;
	vertical-align: top;;
}

/* 첫 번째 메뉴 리스트 */
.firstlist{
	display: none;
	position: absolute;
	z-index: 8;
	top: -270px;
	/*높이가 64인 경우가 메뉴 열렸을 때임*/
	left: 0px;
	width:calc(50% - 70px);
	background:#f7fafc;
	color: #222;	
	border-radius: 0 0 25px 0;
	
}

.firstlist ul{
	margin-left:87px;
	width:calc(100% - 95px);
}
.firstlist ul li{
	width:100%;
	height:66px;
	display: block;
	text-overflow: ellipsis;
    white-space: nowrap;
	word-wrap: normal;
}
.firstlist ul li a{
	width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.firstlist ul li a.on{
	color: #4464b7;
}

/*퀵메뉴 공통영역*/
nav{
	box-shadow: 20px 20px 20px 20px;
	position: fixed;
	z-index: 99990;
	display: none;
	top:0px;
	right:-550px;
	width:500px;
	height:100%;
	overflow-y: auto;
}
.navon{
	-ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none;

	display: block;
}
.navon::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}
nav #commonnavul ,nav #commonnavul li, nav #commonnavul li a {
	display: block;
}
nav #commonnavul li a{
	height:78px;
	width: 100%;
    color: white;
	text-indent: 15px;
	line-height: 78px;
    font-weight: 600;
    display: inline-block;
    vertical-align: middle;
    font-size: 22px;
    cursor: pointer;
}
nav #commonnavul li a:hover {
    color: white;
}
.wordleft{
	background:#3d3d3d;
}
nav #commonnavul li:first-child{
	height:64px;
}
nav #commonnavul li{
	height:78px;	
}

/*퀵메뉴 개별영역*/
#deflnb{
	width:100%;
	padding-bottom: 100px;
}
.firsttitle{
	height:78px;
	text-overflow: ellipsis;
    white-space: nowrap;
	word-wrap: normal;
}
#deflnb li{
	width:100%;
}
.firsttitle button{
	height: 100%;
	color: white;
	text-indent: 15px;
	font-size: 22px;
	font-weight: 600;
	text-align: left;
	line-height: 78px;
}
#deflnb .on .secullnb{
	display: block;
}
.secullnb{
	display: none;
	background:white;
	padding:12px 0px;
	
}
.secullnb li{
	height:51px;
	display: block;
}
.secullnb li a{
    display: block;
	height: 51px;
	font-weight: 700;
	color: #222;
    text-decoration: none;
	font-family: 'Nanum Barun Gothic', sans-serif;
	font-size: 20px;
	text-indent:31px;
	line-height: 51px;
	width: 100%;
    overflow: hidden;
	text-overflow: ellipsis;
}

.secullnb li a {
    display: block;
    height: 51px;
    font-weight: 700;
    color: #222;
    text-decoration: none;
    font-family: 'Nanum Barun Gothic', sans-serif;
    font-size: 20px;
    text-indent: 31px;
    line-height: 51px;
}
.secullnb li a:hover, .secullnb li.on .seclid a {
    color: #4464b7;
    text-decoration: none;
}
.seclid{
	text-overflow: ellipsis;
    white-space: nowrap;
	word-wrap: normal;
}

/*상단메뉴 두번째*/
#menuBottom{
	background: #e5f4f9;

	height:64px;

	text-align: center;
	position: fixed;
	margin-top: 64px;
    width: 100%;
	z-index: 6;
}
.playerBar .playerBarLabel {
    display: inline-block;
    width: 110px;
    font-size: 20px;
    font-weight: 600;
    color: white;
    background-color: #383d4c;
    border: 2px solid #383d4c;
	border-radius: 14px;
	min-height: 34px;
	line-height: 34px;
	margin-top:13px;
}
.playerBar .playerBarLabelshort {
	display: none;
}
.playerBar button{
	display: inline-block;
	height:32px;
	width:30px;
	vertical-align: top;
	margin-top:16px;
	margin-right:2px;
	margin-left:2px;
}
.playerBar button img{
	height:32px;
	width:30px;
}
button.playBtn img, button.playBtn{
	width:34px;
	height:36px;
}
button.playBtn{
	margin-top:14px;
}
.Topcenter > div {
	display: inline-block;
	height:64px;
	vertical-align: top;
}
.pause #btnpause{
	display: none;
}
.pause #btnplay{
	display: block;
}
.play #btnpause{
	display: block;
}
.play #btnplay{
	display: none;
}
.speedBarLabel {
    width: 70px;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    color: #383d4c;
    border: 2px solid #383d4c;
	border-radius: 14px;
	min-height:34px;
	line-height: 34px;
	margin-top:13px;
}
.playerBar {
    margin-right: 10%;
}
.speedWrap > div{
	display: inline-block;
	vertical-align: top;
}
.speedBar > div{
	display: inline-block;
	height: 38px;
    line-height: 38px;
    vertical-align: top;
}
.speedBar > button{
	display: inline-block;
	height: 38px;
    vertical-align: top;
}
.speedBar {
    width: 150px;
    max-width: 150px;
    height: 38px;
    background: #465782;
	border-radius: 30px;
	margin-left:10px;
	margin-top:13px;
}
.speed {
    color: white;
    font-weight: 800;
	font-size: 25px;
	width: calc(100% - 76px);

}
.speedBar > button img{
	width:24px;
	height:38px;
}
.endBtnBox{
	display: none;
	text-align: right;
}

/*메인*/
.container {
	position: relative;
	z-index: 1;
	background: white;
    margin: 0 auto;
	box-shadow: 0px 10px 66px 12px rgba(0, 0, 0, 0.14);
	min-height: 900px;
	max-width:1500px;
	padding-top: 128px;
	padding-bottom:100px
}
.content {
    width: 80%;
    margin: 0 auto;
	padding: 0;
	height:100%;
}
.main{
	padding-top:34px;
	padding-bottom: 40px;
	display: block;
}
.title{
	font-weight: bold;
    font-size: 35px;
    display: block;
    min-height: 45px;
	line-height: 45px;
}
.summarize {
    display: table;
    max-width: 1000px;
    min-width: 500px;
	padding: 25px;
	background-color: rgb(229, 244, 249);
	margin-bottom:10px;
}
.summarize .titleText {
	font-weight: bold;

}
.summarize p {
		font-size:23px;
		min-height: 34px;
		line-height: 34px;;
	
}
.summarize .text{
	margin-left: 5px;
}
.smallline{
	width:100%;
	height:10px;
	margin:0 !important;
	padding:0 !important
}
.line{
	width:100%;
	height:20px;
	margin:0 !important;
	padding:0 !important
}
.middleline{
	width:100%;
	height:40px;
	margin:0 !important;
	padding:0 !important
}
.bigline{
	width:100%;
	height:60px;
	margin:0 !important;
	padding:0 !important
}
.paraText{
	text-align: justify;
	text-indent: 23px;
	font-size:23px;
	line-height: 30px;
    /*추가*/
    word-break: break-all
}
.largeImageBox{
	width:100%;
	text-align: center;
}
.largeImageBox img{
	display: block;
	width:70%;
	margin: 0 auto;
}
.imgInfo{
	display: block;
	text-align: center;
	margin:0 auto;
}
.largeImageBox .imgInfo{
width:70%;
}
.imgInfo{
	margin-top:5px;
	font-size:17px;
}
.middlenum{
	display: table;
}
.middlenumBox{
/*	background: #465782;*/
/*    width: 88px;*/
    width: auto;
    height: 28px;
    color: white;
    line-height: 32px;
    padding: 5px;
    vertical-align: top;
    font-size: 22px;
    text-align: left;
    padding-left: 10px;
    /*부제목없는 텍스트 스타일이랑 맞추려고 추가*/
    border-radius: 5px;
    margin-left: 5px;
    background: #337dec;
}
.middlenum > span{
	
/*	display: inline-block;*/
}
.middleBoxText{
	margin-left: 10px;
/*    width: calc(100% - 110px);*/
    min-height: 36px;
    line-height: 36px;
}
.middlenum{
	background:#eeefef;
	padding:7px 10px 7px 0px;
	border-radius: 10px;
	font-size: 28px;
    font-weight: 600;
}
.activeGroup{
	display: table;
	font-weight: 600;
	font-size: 25px;
}
.activeGroup > div{
	display: inline-block;
}
.actText{
	background: #465782;
    width: 50px;
    color: white;
    padding: 1px 51px 0px 16px;
    border-radius: 30px;
	
	height:35px;
	line-height: 35px;
	
}
.actTitle{
	margin-left: -25px;
	background:#eeefef;
	padding-right:11px;
	border-radius: 10px;
}
.actnum{
	height:38px;
	width:38px;
	background:white;
	border: 4px solid #465782;
	color:black;
	border-radius: 23px;
	display: inline-block;
	line-height:38px;
	text-align: center;
	margin-left:-20px;
	margin-right:8px;

}
.actSubTitle{
	color: #241d1a;
	font-family: 'Nanum Gothic';
	font-weight: bold;
	font-size: 23px;
	line-height: 25px;
	margin-bottom:3px;
}

.actSubText{
	font-size: 23px;
	min-height: 34px;
	line-height: 34px;
	margin-left: 23px;
}
.actSubText.actsubnum{
	padding-left:50px;
	text-indent:-27px;

}


.divtable{
	font-size:23px;
	display: table;
	width:90%;
	margin:0 auto;
	border:solid 2px black;
	border-bottom:0px;
}
.divcol{
	border-right:solid 2px black;
	border-bottom:solid 2px black;
}
.divrow .divcol:last-child, .divtable .divrow:last-child{
	border-right:0px;
}
.divrow{
	display: table-row;
}
.divcol{
	display: table-cell;
	vertical-align: middle;
}
.colnum{
	text-align: center;
	width:45px
}
.tableimg{
	padding:5px;
	width:calc(100% - 10px);
}
.tableimg img
{
	width:100%;
	margin: 0 auto;
    display: block;
}
.tabletext{
	padding:5px 10px;
	line-height: 30px;
}
.colnum{
	color:white;
	background:#456782;
}


/*학습지도안*/
.teachon{
	text-align: center;
}
.teachon button{
	background:#c6c6c6;
	width:200px;
	font-size:20px;
	font-weight: 600;
	border-radius: 5px;
	border: 2px solid #81868e;
}
.teachmain{
	display:none;
	margin-top:10px;
	border:solid 2px #6e87c8;
	border-radius: 10px;
	padding:25px 15px 15px 15px;
	font-size:19px;
}
.teachmain.on{
	display: block;
}
.teachmain>div{
	margin-bottom:8px;
	width:49%;
	min-width:240px;
	display: inline-block;
}
.teachfront{
	width:5px;
	height:23px;
	display: inline-block;
	background:#465782;
	float: left;
}
.teachTextmain{
	line-height: 23px;
	min-height:23px;
	padding-left:4px;
	vertical-align: top;
	display: inline-block;
	width:calc(100% - 12px);
	background:linear-gradient(to right, #eeefef 14px, white 74px, white);
	float: left;
}
.teachmain .teachfull{
	width:100%;
}
.studyPoint p::before{
	content: "-";
	margin-right:4px;
}
.teachtable{
	border-collapse: separate;
	width:100%;
	word-break: break-all;
	border:solid 2px #334983;
	border-radius: 3px;
}
.teachtable th, .teachtable td{
	width:calc(100% / 8);
	border:solid 1px #334983;
	height:30px;
	font-weight: bold;
	text-align: center;
}
.teachtable th{
	font-size:17px;
	border-top:0;
	background:#e2e2e2;
}
.teachtable th:first-child{
	border-bottom:0;
	border-left:0;
}
.teachtable td{
	line-height: 19px;
	font-size:19px;
	border-bottom:0;
}
.teachtable td:last-child, .teachtable th:last-child{
	border-right:0;
}
.teachmainslot{
	margin-left:15px;
}
.teachmainslot::before{
	/*	content:"-";*/
    content: "·";
	font-size: 17px;
    font-weight: bold;
	color:#334983;
	text-shadow: -1px 0 #334983, 0 1px #334983, 1px 0 #334983, 0 -1px #334983;
}
.teachmainsubtitle{
	margin-left:5px;
}
.teachmainsubtitle::before{
	content: "●";
	font-size: 13px;
    font-weight: bold;
	color:#334983;
}
.teachmainslot p{
	margin-left:25px;
	margin-top: 3px;
}
.teachmainslot p::before{
	content: "-";
}
.studyPoint .tiplink::before{
	padding-left:10px;
	content:"·";
	font-weight: bold;
}
.tiplink{
	font-size:18px;
}
/*학습내용확인하기*/
.lastcheck{
	padding: 20px 30px;
    border: solid 3px #337dec;
    border-radius: 15px;
}
.lastchTitle{
	font-size: 21px;
    font-weight: bold;
    padding: 6px 5px 5px 5px;
	display: table;
	background:#dedede;
	padding-left: 0px;
	border-radius: 8px;
}
.lastchTitle span{
	background: #1785d9;
    color: white;
    padding: 3px 8px;
	border-radius: 8px;
}
.lastchtxt{
	font-size:18px;
}
.lastchtxt .lctnum{
	width: 40px;
    height: 20px;
    padding: 4px;
    background: #337dec;
    color: white;
    text-align: center;
    display: inline-block;
    border-radius: 14px;
    margin-right: 5px;
    font-weight: bold;
    font-size: 21px;
	line-height: 23px;
	border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
.lastchtxt .lcttxt{
    display: inline-block;
    vertical-align: top;
    margin-top: 4px;
    font-size: 20px;
    font-weight: bold;
    line-height: 23px;
}


.sizedown{
	font-size:21px;
}
.articletable{
	width:100%;
	text-align: center;
}
.articletable th {
    font-size: 17px;
    border-top: 0;
    background: #e2e2e2;
}
.articletable td {
    line-height: 16px;
    font-size: 16px;
	border-bottom: 0;
	padding:15px;
}
.articletable th, .articletable td {
    border: solid 1px #334983;
    height: 30px;
    font-weight: bold;
    text-align: center;
}
.articletable tr td:last-child {
    line-height: 19px;
    font-size: 19px;
	padding:15px;
}
.lcthalf{
	display: inline-block;
}
.lctarr{
	display:inline-block;
	font-weight: bold;
	color:#334983;
}
.vernone{
	vertical-align: 0 !important;
}

.halfImageBox{
	width:100%;
	text-align: center;
}
.halfImageBox img{
	width:48%;
	display: inline-block;
	margin:5px;
	min-width:240px;
    /**/
    vertical-align: middle;
}
.activeDownBtn {
    top: 0;
    width: 200px;
    height: 40px;
    margin: 0 auto;
    font-size: 23px;
    text-indent: 0px;
    border: 4px solid #fd8631;
    border-radius: 15px;
    cursor: pointer;
	font-weight: bold;
    padding: 5px;
}
.activeDownback{
	text-align: center;
}
.activeDownBtn:hover {
	/*border: 5px solid #fd8631;*/
	color:#337dec;
	font-weight: bold;
}


/*별 점수*/
.star{
	cursor: pointer;
}
.star::before{
	content: '☆';
}
.star.on::before{
	content: '★';
}




/*************/
/*임의 추가영역*/
/*이미지 칸 나눠넣기*/
.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;*/
	/* border: 1px solid #cecece; */
}
.orderbox img.TTSBorder {
border:10px solid #00ff00;
}
/*
.imgs3>.orderbox_dashed:last-child{
    border-right: 3px solid #333;
}
.imgs2>.orderbox_dashed_black:last-child{
    border-right: 3px solid #363636;
}
.imgs2_dashed>.orderbox:first-child {
    border-right: none;
}
*/
/*************/



@media(max-width:900px){
	.firstArea{
		width:240px;
	}
	.firstlist{
		width:240px;
	}
	.secTxtArea{
		margin-left:250px;
		width:calc(100% - 320px);
	}
	.firTxtlng{
		display: none;
	}
	.firTxtsht{
		display: block;
	}
	.teachtable th{
		font-size:12px;
	}
}
@media(max-width:700px){
	.divrow{
		display: block;
		border-bottom:2px solid black;
	}
	.divcol{
		display: table-row;
		outline:1px solid black;
	}
	.colnum{
		line-height: 40px;
		height:40px;
	}

	.actnum{
		position: relative;
		top: -41px;
		left: 99px;
		text-indent: 0px;
	}
	.actTitle {
		margin-left: 0px;
		min-height: 46px;
	line-height: 46px;
	padding-left:10px;
	margin-left:13px;
	border-radius: 0px 10px 10px 10px;
	text-indent: -30px;
	}
	.activeGroup > div {
		display: block;
	}
	.playerBar {
		margin-right: 10px;
	}
	.firstArea{
		display: none;
	}
	.firstlist{
		display: none !important;
	}
	.secTxtArea{
		margin-left:90px;
		width:calc(100% - 160px);
	}
	.playerBar .playerBarLabel {
		display:none;
	}
	.playerBar .playerBarLabelshort {
		display: inline-block;
		width: 50px;
		font-size: 20px;
		font-weight: 600;
		color: white;
		background-color: #383d4c;
		border: 2px solid #383d4c;
		border-radius: 14px;
		min-height: 34px;
		line-height: 34px;
		margin-top: 13px;
	}
	.summarize{
		display: block;
		min-width:100px;
	}
}

@media(max-width:600px){
	.secondArea {
		width: calc(100% - 70px);
	}
	.speedBarLabel {
		width: 50px;
	}
	.speedBar{
		margin-left:3px;
	}
	nav {
		max-width:500px;
		width:calc(100% - 30px);
	}
}
@media(max-width:500px){
	.playerBar button {
		display: inline-block;
		height: 26px;
		width: 24px;
		vertical-align: top;
		margin-top: 19px;
		margin-right: 0px;
		margin-left: 2px;
	}
	.playerBar button img {
		height: 26px;
		width: 24px;
	}
	.speedBar {
		width: 100px;
	}
	.speed {
		width: 40px;
	}
	.largeImageBox img {
		width: 90% !important;
	}

	.articletable tr td:last-child, .articletable tr td {
		padding: 5px;
	}
	.wordbreakall{
		word-break: break-all !important;
	}
}
@media(max-width:400px){

	.secondArea{
		min-width:200px;
	}
	.Topcenter{
		min-width: 340px;
	}
	.playerBar button {
		margin-left: 0px;
	}
	.playerBar {
		margin-right: 5px;
	}
	.speedBar{
		width:80px;
		margin-left:0px;
	}
	.speedBar > button img {
		margin-top:3px;
		width: 18px;
		height: 30px;
	}
	.speed {
		font-size: 23px;
		width: 36px;
		line-height: 41px;
	}
	.lastcheck {
		padding: 10px 15px;
	}
}







/*글자 앞에 동그라미_우선 특수문자로 대체*/
.span_simbol{
    font-size: 12px;
    vertical-align: middle;
}
.span_simbol:before{
    content:"";
    vertical-align:sub;
}
/*핵심개념정리*/
.summarize_box_point {
    display: block;
    /*max-width: 1000px;
    min-width: 500px;*/
	padding: 15px 25px;
	/*margin-bottom:10px;*/
    font-size: 23px;
    border: 4px dashed rgb(70, 87, 130);
    border-radius: 10px;
}

.summarize_box_point p{
    line-height: 40px;
    font-size: 21px;
}
/*

.orderbox_dashed_black{
    margin: 0 auto;
    display: table-cell;
	border: 3px solid #363636;
    vertical-align: middle;
}
*/
input::placeholder {
	color: rgb(231, 231, 231);
}

.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;
}
*/


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


/*지도팁 이미지*/
.tip_border .toggle_btn img{width: 300px !important}
.tip_border .toggle_list span{display: block; margin-bottom: 20px}
.tip_border .toggle_list span:last-child{margin-bottom: 0px}

.tip_border .toggle_list img{width: 90% !important; display: block; margin: 0 auto; /*margin-top: 5px*/}

/*지도팁 클릭하면 나오는 팁*/
.tip_border .toggle_list{
	display:none;
	margin-top:10px;
	border:5px dashed #fd8631;
	border-radius: 10px;
	padding:15px;
	font-size:22px;
    line-height: 38px
}
.tip_border .toggle_list.on{
	display: block;
}



/*이미지,설명 칸 붙어있는 디자인*/
.imgs2_dashed>.orderbox>img {
    padding: 15px;
    border: none;
    display: block;
}
.imgs2_dashed>.orderbox:first-child{
    border-right: none
}
.imgs2_dashed{
    display: table
}
.imgs3>.orderbox_dashed{
    border-right: none;
}
.imgs3>.orderbox_dashed:last-child{
    border-right: 3px solid #333;
}
.imgs2>.orderbox_dashed_black:last-child{
    border-right: 3px solid #363636;
}
.orderbox_dashed{
    padding: 0; margin: 0 auto;
    display: table-cell;
	border: 3px solid #333;
    vertical-align: middle;
}
.orderbox_dashed_black{
    padding: 0; margin: 0 auto;
    display: table-cell;
	border: 3px solid #363636;
    vertical-align: middle;
}

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

.imgs3_page2_2{display: table; width: 100%}
.imgs3_page2_2>.orderbox {
	width: 33.4%;
    margin: 0 auto;
	display: table-cell;
	vertical-align: middle;
	padding: 0;
	box-sizing: border-box;
    font-size: 21px;
    font-weight: bold;
    border-bottom: none
}

    .imgs3_page2_2>.orderbox>img{width: calc((100% - 50px) / 3)}
.imgs3_page2_2>.orderbox_border{border: 3px solid #333}
.imgs3_page2_2>.orderbox:nth-child(1){width: 16%;}
.imgs3_page2_2>.orderbox:nth-child(2){width: 58%; border-right: none; border-left: none}
.imgs3_page2_2>.orderbox:nth-child(3){width: 26%;}

.imgs3_page2_2>.orderbox>img{border: none}

.imgs4>.orderbox {
	width: 23%;
	margin-top: 0px;
	margin-bottom: 0px;
	display: inline-block;
	vertical-align: top;
	padding:5px;
	box-sizing: border-box;
}

/*있는지 없는지 모르겠음*/
.orderbox_dashed_no2{border-top: none}
.img_dashed {
    border: 3px solid #333;
}

/*글자 입력 받기*/
[contenteditable=true]:empty:before{
  content: attr(placeholder);
  display: block; /* For Firefox */
}
div[contenteditable=true] {
  border: 3px solid #363636;
  color : #333;
  font-size: 21px;
  padding: 10px;
  display: block;
  word-break:break-all;
  min-height: 100px;
  max-height: 100px;
  overflow-y: auto;
  /*outline: none;*/
  text-indent: 0;  
}
span[contenteditable=true] {
  border: none;
  color : #333;
  font-size: 18px;
  padding:10px;
  display: block;
  word-break:break-all;
  min-height: 50px;
  max-height: 50px;
  overflow-y: auto;
  text-align: left;
  font-weight: normal;
  line-height: 20px;
  /*outline: none;*/
  text-indent: 0;  
}
span[contenteditable=true].summarize_textbox_span {  
  display: inline-block;
  vertical-align: middle;
  min-height: 30px;
  max-height: 30px;
}

/*3단원 블록 설명-tts용*/
.blockIMG{}


/*이미지,설명 칸 붙어있는 디자인_모바일*/
@media(max-width:500px){    
   .orderbox, .imgs3>.orderbox, .imgs4>.orderbox {
	width: 100% !important;
    }
    .imgs2_dashed>.orderbox>img {
        padding: 5px;
}
    .imgs2_dashed>.orderbox:first-child{
        border-right: 3px solid #333;
        border-bottom: none;
}
    .imgs2_dashed>.orderbox_dashed_black:first-child{
        border-right: 3px solid #363636;
        border-bottom: none;
}
    .orderbox_dashed_no2:last-child{border-top: 3px solid #333}
    .orderbox_dashed{
        padding: 0; margin: 0 auto;
        display: block
}
    .imgs3_page2_2>.orderbox {
        width: 100%;
        margin: 0 auto;
        display: block;
        vertical-align: middle;
        padding: 10px;
        box-sizing: border-box;
        font-size: 18px;
        font-weight: bold;
        
}
    
    .imgs3_page2_2>.orderbox_border{border: 3px solid #333}
    .imgs3_page2_2>.orderbox>img{width: 100%;}
    .imgs3_page2_2>.orderbox:nth-child(1){width: 100%; border-bottom: 3px solid #333;}
    .imgs3_page2_2>.orderbox:nth-child(2){width: 100%; border: 3px solid #333; border-bottom: none; border-top:none; }
    .imgs3_page2_2>.orderbox:nth-child(3){width: 100%; border: 3px solid #333;;margin-bottom: 10px}
    
    /*.halfImageBox img*/
    .halfImageBox img{display: block; width: 90%; margin: 0 auto; padding: 20px 0}
    
}
.imgdes {
  margin: 0px;
  text-indent: 0px;
  text-align: justify;
  font-weight: bold;
}


		.orderbox.quiz {
			width: 30%;
		}

		.orderbox.quiz .text {
			text-align: center;
			margin: 0px;
			text-indent: 0px;
			font-size: 24px;
		}

		.quiz .codertxtwrap {
			width: 98%;
			height: 310px;
			border-radius: 60px;
			border: 10px solid #456782;
			font-size: 150px;
			line-height: 300px;
			margin: auto;
			box-sizing: border-box;
			margin: 20px;
		}

		.quizblank {
			width: 33%;
			display: inline-block;
		}
.border,
.tdBorder td {
	/*    border: 2px solid black; */
	/*20190905*/
	border: 2px solid #aecbe2;
	border-radius: 25px;
	padding: 5px 2px;
}

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

	margin: 1% 0;

	display: flex;
	flex-direction: row;
}

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

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

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

.codeBody > div.c4 {
	/*20190905*/
	max-width: 100%;
	/* padding: 5% 0; */
	/*	padding: 2% 0; */
	flex-grow: 1;
	margin-bottom: -10px;
}

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

.codeBody .c7,
.codeFooter .c7 {
	flex-grow: 1;
}

.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;
}