@CHARSET "EUC-KR";

/******************************************
			�ǹ�ư
*******************************************/
.tab_section{ margin-top:17px; }
.tab_btn{ font-family:Tahoma, "Malgun Gothic", "Mangal", "Apple Gothic", sans-serif, "��������", Dotum, "����", Gulim; }
.tab_btn{ font-size:15px; padding:0 8px; display:inline-block; height:33px; line-height:33px; text-align:center; margin-right:1px; }
.tab_btn{ color:#8C8C8C; border:2px solid #B9B9B9; border-bottom:none; }
.tab_btn{ cursor:pointer; border-top-left-radius:5px; border-top-right-radius:5px; }
.tab_btn.active{ color:white; border:2px solid #546172; border-bottom:none; background:#546172; }
.tab_section .btn_Registration{ position:absolute; top:20px; right:0px; cursor:pointer; }
/******************************************
	����
*******************************************/
.course_section{ font-family:Tahoma, "Malgun Gothic", "Mangal", "Apple Gothic", sans-serif, "��������", Dotum, "����", Gulim; }
.course_section{ text-align:center; margin-top:15px; position:relative; }
.course_section .name{ color:#334357; line-height:normal; font-size:34px; font-weight:bold; }
.course_section .btn_box{ font-size:13px; position:absolute; top:13px; right:0px; }
.course_section .btn_box .right_btn{ line-height:20px; padding:0 3px; cursor:pointer; color:white; display:inline-block; }
.course_section .btn_box .right_btn.ko{ background:#3AB0A2; }
.course_section .btn_box .right_btn.en{ background:#E86458; }
.course_section .btn_box *{vertical-align:middle;color:#202020}
.course_section .btn_box button{margin-left:4px;background:none;padding:0;border:none;outline:none;cursor:pointer;}
.course_section .btn_box button::-moz-focus-inner { padding: 0;border: none;overflow:visible;outline:none;}
.course_section .d_btn{ position:absolute; top:18px; font-size:13px; color:#333; background:#CFDCED; line-height:20px; padding:0 3px; }
.course_section .d_btn:hover{ background:#B4C8E1; cursor:pointer; }
.course_section .prev_btn{ left:0px; }
.course_section .next_btn{ left:112px; }
/******************************************
	ǥ
*******************************************/
.story_section{ -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
.story_section{ height:930px; margin-top:10px; font-family:Tahoma, "Malgun Gothic", "Mangal", "Apple Gothic", sans-serif, "��������", Dotum, "����", Gulim; margin-bottom:100px; }
.story_section img{ display:inline-block; }
.story_section a{ display:inline-block; }
.story_section .inner{ text-align:left; }
.story_section .inner .tit_wrap{ position:relative; }
.story_section .inner .tit_wrap .right_article{ float:right; }
.story_section .inner .contents_wrap{ border:1px solid #575F6C; }
.story_section .inner .contents_wrap .page_btn_box{ position:relative; border-bottom:1px solid #575F6C; background:#BAC3D4; }
.story_section .inner .contents_wrap .page_btn_box{ height:37px; }
.story_section .inner .contents_wrap .page_btn_box .in_class{ font-size:13px; font-weight:bold; line-height:37px; margin-left:15px; }
.story_section .inner .contents_wrap .page_btn_box .btns{ position:absolute; top:4px; right:18px; }
.story_section .inner .contents_wrap .page_btn_box .btns button{ display:inline-block; margin-left:13px; cursor:pointer; color:#565E69; border:1px solid #7B91A8; background:#D4E0EE; border-radius:3px; width:27px; height:27px; }
.story_section .inner .contents_wrap .page_btn_box .btns button:hover,
.story_section .inner .contents_wrap .page_btn_box .btns button.active{ color:white; border:1px solid #197ED6; background:#3598ED }
/**/
.story_section .inner .contents_wrap .table_box table .ARR_LEFT{ cursor:no-drop; background-color:#DCDCDC; }
.story_section .inner .contents_wrap .table_box table .ARR_LEFT{ border-top:none; width:9px; color:white; }
.story_section .inner .contents_wrap .table_box table.left .ARR_LEFT{ cursor:pointer; background-color:#A5BFE4; border-right:1px solid #575F6C; border-left:1px solid #575F6C; }
.story_section .inner .contents_wrap .table_box table .ARR_RIGHT{ cursor:no-drop; background-color:#DCDCDC; }
.story_section .inner .contents_wrap .table_box table .ARR_RIGHT{ border-top:none; width:9px; color:white; }
.story_section .inner .contents_wrap .table_box table.right .ARR_RIGHT{ cursor:pointer; background-color:#A5BFE4; border-left:1px solid #575F6C; }
.story_section .inner .contents_wrap .table_box{ position:relative; }
.story_section .inner .contents_wrap .table_box table{ width:100%; border-collapse:collapse; border-spacing:0; }
.story_section .inner .contents_wrap .table_box table{ }
.story_section .inner .contents_wrap .table_box table tr{ height:50px; }
.story_section .inner .contents_wrap .table_box table tr td{ text-align:center; font-size:12px; vertical-align:middle; border-top:1px solid #D0D0D0; border-left:1px solid #D0D0D0; text-align:center; }
.story_section .inner .contents_wrap .table_box table tr.head td{ background:#E4E4EC; }
/*.story_section .inner .contents_wrap .table_box table tr.head.first td{ font-weight:bold; }*/
.story_section .inner .contents_wrap .table_box table tr.head.time td{ font-size:11px; font-weight:normal; background:#F6F6F6; }
.story_section .inner .contents_wrap .table_box table tr.head.with td{ font-size:11px; font-weight:normal; background:#F6F6F6; }
.story_section .inner .contents_wrap .table_box table .td_btn{ width:11px; display:table-cell; !important; border-top:none !important; }
.story_section .inner .contents_wrap .table_box table tr .story_title{ text-align:left; padding-left:13px;position:relative;}
.story_section .inner .contents_wrap .table_box table tr .story_title strong{display:block;position:absolute;top:18px;left:13px;}
.story_section .inner .contents_wrap .table_box table tr .story_title span{display:block;margin-left:15px;}
/* added by So Young Ae (2020.07.21) : LSCH-76 */
.story_section .inner .contents_wrap .table_box table tr .story_title .title_align { display:inline-block; text-align:center; }
.story_section .inner .contents_wrap .table_box table tr .story_title .btn_timer { margin-top:4px; border:1px solid #9b9b9b; border-radius:2px; font-size:11px; font-family:Tahoma; background:#fff; cursor:pointer; }
/*--// added by So Young Ae (2020.07.21) : LSCH-76 */
/**/
.story_section .inner .contents_wrap .table_box table tr td .ic_wrap{ }
.story_section .inner .contents_wrap .table_box table tr td .ic_wrap{ }
.story_section .inner .contents_wrap .table_box table tr td .ic_wrap{ position:relative; height:45px; line-height:45px; margin:0 auto; }
.story_section .inner .contents_wrap .table_box table tr td .ic_wrap > a > img{ vertical-align:middle; }
.story_section .inner .contents_wrap .table_box table tr td .ic_wrap .ic{ position:absolute; top:0; left:0; }
.story_section .inner .contents_wrap .table_box table tr td .pro_bar{ width:100%; height:4px; }
.story_section .inner .contents_wrap .table_box table tr td .pro_bar.active{ background:#6B73FE; }
.story_section .inner .contents_wrap .table_box table tr td .pro_bar.none{ background:none; border-top:none; }




/* added by myalee(2017.03.27) */
/* .course_section .btn_box button.btn-green { border:1px solid #667994; background-color:#009498; color:#fff; border-radius:2px; padding:1px 10px; font-size:14px; line-height:1em; } */
/* .com-btn > .lbl { display:inline-block; height:21px; line-height:21px; color:#fff; padding-left:21px; background:no-repeat left center; }
.com-btn > .lbl.file_pdf 	{ padding-left:24px; background-image:url('/common/images/vocabulary_works/icon_file_pdf.png'); } */


/* added by myalee(2017.03.27) */
.course_section .btn_box { top:0; }
.course_section .btn_box button { margin:0; margin-left:-1px; }
.course_section .btn_box .com-btn  { border:1px solid #b3b3b3; color:#fff; border-radius:2px; padding:4px 10px 3px; font-size:12px; line-height:1em; }
.course_section .btn_box button.btn-green  { background-color:#009498; }
.course_section .btn_box button.btn-purple { background-color:#8b3ca9; margin-left:9px; }

.com-btn > .lbl { display:inline-block; height:21px; width:56px; line-height:21px; color:#fff; padding-left:21px; background:no-repeat left center; }
.com-btn > .lbl.file_pdf 	{ padding-left:24px; background-image:url('/common/images/vocabulary_works/icon_file_pdf.png'); line-height:1em; height:auto; }

.tab_btn { font-size:18px; height:38px; line-height:38px; }
.story_section { margin-top:-1px; }


.ttl_course_name { position:absolute; left:0; right:0; top:0; margin:auto; width:250px; height:30px; background:no-repeat center 0; }
.ttl_course_name > span { position:absolute; clip:rect(0, 0, 0, 0); }

.ttl_course_name.c { height:30px; background-image:url('/common/images/curriculum/course_name_c.png'); }
.ttl_course_name.d { height:30px; background-image:url('/common/images/curriculum/course_name_d.png'); }
.ttl_course_name.e { height:30px; background-image:url('/common/images/curriculum/course_name_e.png'); }

.ttl_course_name.m1_1 { background-position:center 0; }
.ttl_course_name.m1_2 { background-position:center -38px; }
.ttl_course_name.m1_3 { background-position:center -77px; }
.ttl_course_name.m1_4 { background-position:center -114px; }
.ttl_course_name.m1_5 { background-position:center -152px; }
.ttl_course_name.m1_6 { background-position:center -191px; }

.ttl_course_name.m2_1 { background-position:center -252px; }
.ttl_course_name.m2_2 { background-position:center -291px; }
.ttl_course_name.m2_3 { background-position:center -329px; }
.ttl_course_name.m2_4 { background-position:center -368px; }
.ttl_course_name.m2_5 { background-position:center -407px; }
.ttl_course_name.m2_6 { background-position:center -446px; }

.ttl_course_name.m3_1 { background-position:center -503px; }
.ttl_course_name.m3_2 { background-position:center -541px; }
.ttl_course_name.m3_3 { background-position:center -579px; }
.ttl_course_name.m3_4 { background-position:center -617px; }
.ttl_course_name.m3_5 { background-position:center -655px; }
.ttl_course_name.m3_6 { background-position:center -693px; }

.ttl_course_name.m4_1 { background-position:center -755px; }
.ttl_course_name.m4_2 { background-position:center -794px; }
.ttl_course_name.m4_3 { background-position:center -833px; }
.ttl_course_name.m4_4 { background-position:center -872px; }
.ttl_course_name.m4_5 { background-position:center -911px; }
.ttl_course_name.m4_6 { background-position:center -949px; }

.ttl_course_name.m5_1 { background-position:center -1006px; }
.ttl_course_name.m5_2 { background-position:center -1044px; }
.ttl_course_name.m5_3 { background-position:center -1082px; }
.ttl_course_name.m5_4 { background-position:center -1121px; }
.ttl_course_name.m5_5 { background-position:center -1159px; }
.ttl_course_name.m5_6 { background-position:center -1197px; }


/* added by myalee(2017.09.20) */
.ic_wrap.ed-170920 { height:auto !important; line-height:normal !important; padding:0 12px; }
.ic_wrap.ed-170920 > span { display:inline-block; text-align:center; vertical-align:top; width:auto; max-width:55px; height:auto; line-height:0; }
.ic_wrap.ed-170920 > span.m2 { margin-left:14px; }
.ic_wrap.ed-170920 > span > a { line-height:1em; }



/* added by myalee(2017.10.11) */
.sub_tnb { margin-top:20px; }

.section.story_section { height:auto; margin-bottom:0; }
.special_content.grammar .course_name { position:absolute; left:0; right:0; top:65px; width:400px; margin:0 auto; }


/* added by myalee(2017.10.19) - ���߽� �Ʒ� �ּ��� �����ϼ���. */
/* .ttl_course_name { top:-35px; } */
/* .tab_section { margin-top:50px; } */
/* .course_section .btn_box { top:-35px; } */

/* added by myalee(2018.01.11) */
.section.s_title { width:98%; margin:0 25px; }
.section_title { font-family:Arial, sans-serif; font-size:18px; font-weight:bolder; color:#00479d; padding:20px 0 8px;  }

/* 201807 ������ */
.vaM {vertical-align:middle;}

/* added by So Young Ae (2020.07.21) : LSCH-76 */
.printables_title { display:block; padding:12px 0; color:#fff; font-size:21px; font-family:Arial, sans-serif; text-align:center; }
.C1 .printables_title { background:#0062b1; }
.C2 .printables_title { background:#00853c; }
.C3 .printables_title { background:#ea5504; }
.C4 .printables_title { background:#b71a86; }

.D1 .printables_title { background:#006c96; }
.D2 .printables_title { background:#5e8535; }
.D3 .printables_title { background:#9b583b; }
.D4 .printables_title { background:#7e2f6a; }

.E1 .printables_title { background:#005b74; }
.E2 .printables_title { background:#397c2c; }
.E3 .printables_title { background:#cf8e32; }
.E4 .printables_title { background:#685f8c; }

.printables_table { padding:40px; }
.printables_table table { width:100%; border-spacing:0; border-top:2px solid #00479d;}
.printables_table tbody th { padding:9px 0 6px; border-right:1px solid #c9c9c9; border-bottom:1px solid #c9c9c9; color:#333; font-size:13px; font-weight:normal; line-height:1.2; vertical-align:middle; background:#ecf3fa; }
.printables_table tbody td { padding:9px 0 6px; border-left:1px solid #c9c9c9; border-bottom:1px solid #c9c9c9; }
.printables_table tbody td.align_center { text-align:center; }
.printables_table tbody td .link { display:inline-block; font-size:10px; text-decoration:none; text-align:center; }
.printables_table tbody .line_point th, 
.printables_table tbody .line_point td { border-bottom-color:#666; }

/*파닉스웍스*/
.renew-section .btn_box{
	position: static;
	padding:29px 0 10px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 5px;
}

.renew-section .btn_box button{
	position: relative;
	height:30px;
	padding:0 10px 0 33.5px;
	margin:0;
	border:1px solid #828282;
	border-radius:3px;
	box-sizing: border-box;
	font-size:13px;
	color:#333;
	
}

.renew-section .btn_box button.down{
	background:url('/common/images/curriculum/ico_down.png')no-repeat 10px center;
}

.story_section.renew-section .inner .contents_wrap{
	border:0;
}
.story_section.renew-section .table_box table{
	border:1px solid #546172;
	border-top-width: 2px;
}

.story_section.renew-section .table_box table thead th{
	vertical-align: middle;
	border-left:1px solid #c9c9c9;
	border-bottom:1px solid #c9c9c9;
	font-size:14px;
	text-align: center;
	background-color:#EEEFF1;
}
.story_section.renew-section .table_box table thead tr:first-child th:first-child{
	border-left:0;
}

.story_section.renew-section .inner .contents_wrap .table_box table tbody tr td{
	font-size:14px;
	border-left:1px solid #c5c5c5;
	border-top:1px solid #c5c5c5;
}

.story_section.renew-section .inner .contents_wrap .table_box table tbody tr td:first-child{
	border-left:0;
}
.story_section.renew-section .inner .contents_wrap .table_box table tbody tr:first-child td{
	border-top:0;
}

.story_section.renew-section .inner .contents_wrap .table_box table tbody tr td.bg-blue{
	background:#E5F7FF;
}

.story_section.renew-section .inner .contents_wrap .table_box table tbody tr td.bg-blue.t2{
	background:#E5F1FF;
}

.story_section.renew-section .inner .contents_wrap .table_box table tbody tr td.bg-blue.t3{
	background:#E3EEFF;
}

.story_section.renew-section .inner .contents_wrap .table_box table tbody tr td.bg-blue.t4{
	background:#ECF0FF;
}

.story_section.renew-section .inner .contents_wrap .table_box table tr{
	height:40px;
}

.story_section.renew-section .inner .contents_wrap .table_box table tbody tr td.ico a{
	display: inline-block;
	width: 30px;
	height:30px;
	text-indent:-9999px;
}

.story_section.renew-section .inner .contents_wrap .table_box table tbody tr td.ico.play a{
	background:url('/common/images/curriculum/ico_play_phonics.png')no-repeat 0 0;
}
.story_section.renew-section .inner .contents_wrap .table_box table tbody tr td.ico.booksound a{
	background:url('/common/images/curriculum/ico_booksound_phonics.png')no-repeat 0 0;
}
.story_section.renew-section .inner .contents_wrap .table_box table tbody tr td.ico.song a{
	background:url('/common/images/curriculum/ico_songs_phonics.png')no-repeat 0 0;
}
.story_section.renew-section .inner .contents_wrap .table_box table tbody tr td.ico.story a{
	background:url('/common/images/curriculum/ico_story_phonics.png')no-repeat 0 0;
}
.story_section.renew-section .inner .contents_wrap .table_box table tbody tr td.ico.storysong a{
	background:url('/common/images/curriculum/ico_storysong_phonics.png')no-repeat 0 0;
}
.story_section.renew-section .inner .contents_wrap .table_box table tbody tr td.ico.flash a{
	background:url('/common/images/curriculum/ico_flaschcard_phonics.png')no-repeat 0 0;
}

/*교재사운드*/
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
.book-sound-wrap{
	display: flex;
	width: 100%;
	height: 100vh;
	min-width: 1024px;
	justify-content: center;
	color:#333;
	font-family: "Pretendard", sans-serif;
	background:#E5F7FF;
}

.book-sound-wrap * {
	box-sizing: border-box;
}

.book-sound-wrap .inner{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: calc((1768 / 2560) * 100vw);
}

.book-sound-wrap .inner .cont{width:100%;}

.book-sound-wrap .tit{
	width: 100%;
}

.book-sound-wrap .tit h2{
	font-size:calc((58 / 2560) * 100vw);
	font-weight:700;
	color:#333;
	text-align: center;
}

.book-sound-wrap .sub-tit{
	position: relative;
	display: flex;
	align-items: center;
	border-radius:30px;
	margin:calc((47 / 2560) * 100vw) 0 calc((60 / 2560) * 100vw);
	background:#D6EBF5;
}

.book-sound-wrap .sub-tit:after{
	clear: both;
	content:"";
	position: absolute;
	bottom:calc((-13 / 2560) * 100vw);
	right:calc((51 / 2560) * 100vw);
	width: calc((224 / 2560) * 100vw);
	height:calc((224 / 2560) * 100vw);
	background:url('/common/images/book_sound/bg_subtit.png')no-repeat 0 0;
	background-size:contain;
}

.book-sound-wrap .sub-tit span{
	padding:calc((49 / 2560) * 100vw) calc((75 / 2560) * 100vw);
	color:#fff;
	border-radius: 30px 30px 0 30px;
	font-size:calc((40 / 2560) * 100vw);
	background:#20B1F9;
}

.book-sound-wrap .sub-tit p{
	padding-left:calc((66 / 2560) * 100vw);
	font-size:calc((40 / 2560) * 100vw);
	font-weight:400;
}

.book-sound-wrap .cont .sound-list{
	display: flex;
	flex-wrap: wrap;
	gap: calc((40 / 2560) * 100vw);
	width: 100%;
	justify-content:flex-start;
}

.book-sound-wrap .cont .sound-list li{
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: calc((412 / 2560) * 100vw);
	padding:calc((43 / 2560) * 100vw) calc((19 / 2560) * 100vw) calc((22 / 2560) * 100vw);
	border-radius:30px;
	box-sizing: border-box;
	background-color: #fff;
}

.book-sound-wrap .cont .sound-list li strong{
	text-align: center;
	font-size:calc((68 / 2560) * 100vw);
	font-weight:700;
}

.book-sound-wrap .cont .sound-list li a{
	width: calc((238 / 2560) * 100vw);
	height:calc((238 / 2560) * 100vw);
	margin:0 auto;
	text-align: center;
	background:url('/common/images/book_sound/btn_sound_default.png')no-repeat 0 0;
	background-size:contain;
}

.book-sound-wrap .cont .sound-list li.on a{
	background:url('/common/images/book_sound/btn_sound_pause.png')no-repeat 0 0;
	background-size:contain;
}

.book-sound-wrap .cont .sound-list li a span{
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: polygon(0 0, 0 0, 0 0);
}

.book-sound-wrap .cont .sound-list li p{
	text-align: right;
	color:#9d9d9d;
	font-size:calc((34 / 2560) * 100vw);
	padding-right:5px;
}

@media (max-width: 1024px){
	.book-sound-wrap .inner{
		width: 707px;
	}
	.book-sound-wrap .tit h2{
		font-size:23px;
	}
	.book-sound-wrap .tit{
		padding-top:31px;
	}

	.book-sound-wrap .sub-tit{
		margin:18px 0 24px;

	}
	.book-sound-wrap .sub-tit span{
		padding:19px 30px;
		font-size:19px;
	}
	.book-sound-wrap .sub-tit p{
		font-size:16px;
		padding-left:26px;
	}
	.book-sound-wrap .sub-tit:after{
		width: 90px;
		height:90px;
		bottom: -5px;
		right: 30px;
	}
	.book-sound-wrap .cont .sound-list{
		gap: 16px;
	}
	.book-sound-wrap .cont .sound-list li{
		width: 164px;
		padding:17px 8px 9px;
	}
	.book-sound-wrap .cont .sound-list li strong{
		font-size:27px;
	}
	.book-sound-wrap .cont .sound-list li a{
		width: 95px;
		height:95px;	
	}
	.book-sound-wrap .cont .sound-list li p{
		font-size:13px;
	}


}