@charset "utf-8";
/* webfont 설정 */
@import url("/css/notosans-kr.css");
/* All */
header,footer,section,article,aside,nav,menu,figure,figcaption{ display:block}
html,body{ min-height:100vh; margin:0}
body{ overflow-y:scroll; background:#f7fafc}
body,table,input,textarea,select,optgroup,button{ font-family:'Noto Sans KR','맑은 고딕','Malgun Gothic','돋움','Dotum','애플고딕','AppleGothic','Arial','sans-serif'; color:#505050}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td
{ margin:0; padding:0; border:0; border-collapse:separate; border-spacing:0; font-weight:inherit; font-style:inherit; text-decoration:none; list-style:none; letter-spacing:-0.02em; word-break:keep-all; font-weight:300}
img,object,embed{ height:auto; border:0}
a{ text-decoration:none}
/* Align - Clear */
.text-align-right{ text-align:right}
.text-align-left{ text-align:left}
.text-align-center{ text-align:center}
.clearfix:before,.clearfix:after{ content:""; display:table}
.clearfix:after{ clear:both}
/*! jquery.skipNav.css © yamoo9.net, 2015 */
.skip-contents	{ position:relative; display:block; background:#333}
.skip-contents>a{ position:absolute; display:block; padding:10px 21px; width:100%; height:1px; color:#fff; overflow:hidden}
.skip-nav{
	position:absolute;
	z-index:9999;
	top:0;
	left:0;
}
.a11y-hidden{
	overflow: hidden;
	position: absolute;
	clip:     rect(0 0 0 0);
	width:    1px;
	height:   1px;
	margin:   -1px;
	padding:  0;
	border:   0;
}
.a11y-hidden.focusable:focus,
.a11y-hidden.focusable:active{
	overflow: visible;
	position: static;
	clip:     auto;
	width:    auto;
	height:   auto;
	margin:   0;
}
/* Box Sizing */
html{ -webkit-text-size-adjust:none; -moz-text-size-adjust:none; -ms-text-size-adjust:none; text-size-adjust:none}
html{ box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box}
img{ box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box}
*, *:before, *:after{ box-sizing:inherit}
/* Layout */
.content,section{ outline:0; margin:0}
.container,.body,.content,section,.header,.header-content,.footer,.footer-content,section article{ position:relative; margin:0 auto}
.container		{ overflow:hidden}
.body:after,section:after,article:after{ content:""; display:block; clear:both}
.header			{ background:transparent url(/images/back-header.png) no-repeat center bottom}
.logo			{ position:absolute; z-index:1000; left:0; font-size:0; line-height:0}
.logo a,.logo img{ display:inline-block; vertical-align:middle}
.head-title h2	{ text-align:center}
.head-title h2 span,.head-title h2 strong{ display:block; color:#fff}
.head-title h2 strong{ font-weight:500}
.footer			{ text-align:center; border-top:1px solid #e3e3e3; background:#fff}
.footer a,.footer-content{ color:#666}
.footer .footer-content h1{ font-size:0; line-height:0}
.footer .footer-content h1,.footer .address{ display:inline-block; vertical-align:middle}
.footer .copyright{ letter-spacing:0}
/* 이미지 에니메이션 */
.main-article{ position:absolute; z-index:-1; top:0; left:0; width:100%; height:100%}
.main-article div{ position:absolute; z-index:1; font-size:0; line-height:0}
.main-article div.article1,.main-article div.article2{ z-index:10}
@keyframes box-ani-1{
	0% { transform:translate(0px, 0px)}
	100% { transform:translate(2px, -15px)}
}
@keyframes box-ani-2{
	0% { transform:translate(0px, 0px)}
	50% { transform:translate(-8px, -5px)}
	100% { transform:translate(-15px, 0px)}
}
#article1{
	display:flex;
	align-items:center;
	justify-content:center;
	animation:box-ani-1 1.5s infinite linear alternate forwards; /* 애니메이션 적용 */
}
#article2{
	display:flex;
	align-items:center;
	justify-content:center;
	animation:box-ani-2 2s infinite ease-in-out alternate forwards; /* 애니메이션 적용 */
}
/* Menu */
nav				{ display:flex; align-items:center; justify-content:space-between}
nav .menu-box	{ display:flex; flex-direction:column; align-items:center; justify-content:center; background:#fff; border-radius:10px; box-shadow:3px 3px 15px rgb(0,0,0, 0.1)}
nav .menu-box.active{ background-color:#ff9a48}
nav .menu-box .image-caption{ overflow:hidden}
nav .menu-box .image-caption img{ display:block; max-width:100%}
nav .menu-box small{ color:#707070}
nav .menu-box strong{ display:flex; flex-direction:column; align-items:center; justify-content:center; color:#505050; font-weight:500}
nav .menu-box.active strong{ color:#fff}
/* 카테고리 */
ul.category,ul.category li a{ display:flex; align-items:center; justify-content:center}
ul.category li	{ padding:0 1px; background:#f7fafc url(/images/category-dv.png) left center no-repeat}
ul.category li:first-child{ background-image:none}
ul.category li a,ul.category li button{ margin:0; padding:0; width:100%; height:100%; color:#101010; font-weight:400; text-align:center; background:#f7fafc; border:0; cursor:pointer}
ul.category li.active a,ul.category li.active button{ color:#074fb0; font-weight:700}
/* 탭 리스트 */
.list-wrap		{ position:relative; margin:0 auto}
.tab-box		{ position:relative; text-align:center; font-size:0}
.tab-box > li	{ display:inline-block}
.tab-box > li:first-of-type{ margin-left:0}
.tab-box > li > button{ color:#fff; border:1px solid #02b7c2; background-color:#02b7c2; cursor:pointer}
.tab-box > li > button:hover{ color:#fff; background-color:#074fb0; border-color:#074fb0; text-align:center}
.tab-box > li > div{ display:none; position:absolute; left:0; width:100%; padding-top:0}
.tab-box > li > div > .more{ display:block; position:absolute; right:0; color:#303030}
.tab-box > li.active > button{ color:#fff; background-color:#074fb0; border-color:#074fb0; text-align:center; font-weight:400}
.tab-box > li.active > div{ display:block}
.tab-box ol		{ text-align:left; position:relative}
.tab-box ol:after{ display:block; content:''; clear:both}
.tab-box ol > :nth-child(n){ float:left}
.tab-box ol > :nth-of-type(3n){ margin-right:0}
.tab-box ol > :not(:nth-of-type(3n + 1)){ clear:none}
.tab-box ol > :nth-of-type(3n + 1){ clear:both}
.tab-box ol > li{ display:flex; align-items:center}
.tab-box ol > li > a{ display:flex; align-items:center; justify-content:center; color:#fff; background:#074fb0; border-radius:5px}
.tab-box ol > li > div{ display:flex; align-items:center; flex:1}
.tab-box ol > li > .descrip span,.tab-box ol > li > .descrip strong{ color:#074fb0}
.tab-box ol > li > .descrip mark{ font-weight:500; color:#074fb0; background:transparent}
/* 저작권 안내 */
.notice-copyright{ display:flex; flex-direction:column; align-items:center; justify-content:center}
.notice-copyright mark,.notice-copyright strong{ color:#074fb0; background:transparent}
.notice-copyright span,.notice-copyright mark{ text-align:center}
.notice-copyright strong,.pdf-info{ font-weight:500}
.pdf-info		{ display:flex; align-items:center; justify-content:center}

/* PC */
body,table,input,textarea,select,optgroup{ font-size:16px}
/* Layout */
.header-content,.footer-content,section article,.body{ width:1200px}
.body			{ margin-top:-28px}
.header			{ height:432px}
.logo			{ top:20px}
.head-title		{ padding-top:40px}
.head-title h2 span{ margin-bottom:10px; font-size:18px}
.head-title h2 strong{ font-size:34px; font-weight:900; line-height:32px; text-transform:uppercase}
.footer .footer-content{ padding:30px 0}
.footer .footer-content h1{ margin-right:25px}
.footer .address,.footer .copyright{ font-size:15px; line-height:26px}
.footer .address span{ display:inline-block; width:25px; height:1px}
.footer .address span:nth-child(1),.footer .address span:nth-child(3){ display:block; width:1px}
@media only screen and (max-width:1250px) {
	.body,.body.main section article{ padding:0 30px}
	.body.main{ padding:0}
	.header-content,.footer-content,section article,.body{ width:100%}
	.header-content{ padding-left:30px; padding-right:30px}
	.logo{ left:30px}
	.footer .footer-content{ padding:30px}
}
@media only screen and (max-width:1024px) {
	.body,.body.main section article{ padding:0 20px}
	.body{ margin-top:15px}
	.header{ padding-bottom:30px; height:auto}
	.header .header-content{ padding-left:20px; padding-right:20px}
	.head-title h2 span{ font-size:16px}
	.head-title h2 strong{ font-size:28px; line-height:26px}
	.logo{ left:20px}
	.logo img{ width:230px}
	.footer .footer-content{ padding:20px}
	.footer .address,.footer .copyright{ font-size:14px; line-height:24px}
}
@media only screen and (max-width:768px) {
	.head-title{ padding-top:60px}
}
@media only screen and (max-width:550px) {
	body,table,input,textarea,select,optgroup{ font-size:15px}
	.body,.body.main section article{ padding:0 15px}
	.header .header-content{ padding-left:15px; padding-right:15px}
	.head-title{ padding-top:60px}
	.head-title h2 span{ margin-bottom:5px; font-size:15px}
	.head-title h2 strong{ font-size:24px; line-height:22px}
	.logo{ top:15px; left:15px}
	.logo img{ width:200px}
	.footer .footer-content{ padding:15px}
	.footer .footer-content h1{ margin-right:0}
}
@media only screen and (max-width:400px) {
	.head-title h2 strong{ font-size:22px; line-height:20px}
	.footer{ text-align:left}
	.footer .address span{ display:block; width:1px}
}
/* 이미지 에니메이션 */
.main-article div.article1{ top:610px; left:-50px}
.main-article div.article2{ top:700px; right:-100px}
@media only screen and (max-width:1350px) {
	.main-article div.article1 img{ width:370px}
	.main-article div.article2 img{ width:570px}
}
@media only screen and (max-width:1024px) {
	.main-article div.article1{ top:510px; left:-100px}
	.main-article div.article2{ top:600px; right:-150px}
}
@media only screen and (max-width:768px) {
	.main-article div.article1 img{ width:250px}
	.main-article div.article2 img{ width:350px}
	.main-article div.article2{ right:-100px}
}
@media only screen and (max-width:550px) {
	.main-article{ display:none}
}
/* Menu */
nav				{ padding-top:45px}
nav > a			{ margin-left:1.5%; width:calc(100% / 5)}
nav > a:first-child{ margin-left:0}
nav .menu-box	{ width:100%; height:200px}
nav .menu-box .image-caption{ margin-bottom:10px; height:80px}
nav .menu-box.active .image-caption img{ margin-top:-80px}
nav .menu-box small{ font-size:15px}
nav .menu-box strong{ height:55px; font-size:24px; line-height:26px; text-align:center}
nav .menu-box strong span{ display:block; width:1px; height:1px}
@media only screen and (max-width:1024px) {
	nav{ padding-top:30px}
	nav .menu-box{ height:150px}
	nav .menu-box .image-caption{ margin-bottom:5px; width:47px; height:50px}
	nav .menu-box.active .image-caption img{ margin-top:-50px}
	nav .menu-box strong{ height:45px; font-size:20px; line-height:24px}
}
@media only screen and (max-width:768px) {
	nav .menu-box{ height:130px}
	nav .menu-box small{ font-size:13px}
	nav .menu-box strong{ height:35px; font-size:18px; line-height:22px}
}
@media only screen and (max-width:600px) {
	nav .menu-box{ height:110px}
	nav .menu-box .image-caption{ width:38px; height:40px}
	nav .menu-box.active .image-caption img{ margin-top:-40px}
	nav .menu-box strong{ font-size:15px; line-height:18px}
}
@media only screen and (max-width:550px) {
	nav{ flex-wrap:wrap; justify-content:center; padding-top:20px}
	nav > a{ margin-left:15px; width:30%}
	nav > a:nth-child(4){ margin-left:0}
	nav > a:nth-child(4),nav > a:nth-child(5){ margin-top:15px}
}
@media only screen and (max-width:480px) {
	nav > a{ margin-left:10px}
	nav > a:nth-child(4),nav > a:nth-child(5){ margin-top:10px}
	nav .menu-box{ height:90px}
	nav .menu-box .image-caption{ width:33px; height:35px}
	nav .menu-box.active .image-caption img{ margin-top:-35px}
	nav .menu-box strong{ height:30px; font-size:14px; line-height:16px}
}
/* 카테고리 */
ul.category		{ margin-bottom:20px}
ul.category li a,ul.category li button{ padding:0 35px; height:40px; font-size:26px}
ul.category li.active a,ul.category li.active button{}
@media screen and (max-width:768px) { 
	ul.category li a,ul.category li button{ padding:0 15px; height:30px; font-size:20px}
}
@media screen and (max-width:480px) { 
	ul.category li a,ul.category li button{ height:25px; font-size:18px}
}
/* 탭 리스트 */
.list-wrap.mp3,.list-wrap.workbook{ width:1010px}
.list-wrap.pdf	{ width:670px}
.tab-box		{ padding-bottom:20px}
.tab-box > li	{ margin-left:10px}
.tab-box > li > button{ height:60px; font-size:20px; width:160px}
.tab-box > li > div{ top:80px}
.tab-box ol > :nth-child(n){ float:left; width:calc(100% - 0px); margin-right:0px}
.tab-box ol > :nth-of-type(1n){ margin-right:0}
.tab-box ol > :not(:nth-of-type(1n + 1)){ clear:none}
.tab-box ol > :nth-of-type(1n + 1){ clear:both}
.tab-box ol > li{ height:70px; border-bottom:1px solid #e3e3e3}
.tab-box ol > li:first-of-type{ padding-top:0}
.tab-box ol > li:last-of-type{ padding-bottom:0}
.tab-box ol > li > a{ width:75px; height:35px; font-size:15px}
.tab-box ol > li > div{ margin-left:25px}
.tab-box ol > li > .descrip strong{ margin-right:7px}
.tab-box ol > li > .descrip span,.tab-box ol > li > .descrip strong,.tab-box ol > li > .descrip mark{ font-size:17px}
.tab-box > li > div.phrases100 div.descrip{ flex-direction:column; align-items:flex-start}
.tab-box > li > div.phrases100 ol > li{ padding:15px 0; height:auto}
.tab-box > li > div.phrases100 ol > li > .descrip span{ margin-top:10px; padding-top:5px; color:#505050; border-top:1px solid #e3e3e3}
.tab-box > li > div.famous ol{ display:flex; flex-wrap:wrap; justify-content:space-between}
.tab-box > li > div.famous ol > :nth-child(n){ width:33.3333%}
.list-wrap.basic3 .tab-box > li > div{ top:0}
@media screen and (max-width:1100px) { 
	.list-wrap.mp3,.list-wrap.workbook{ width:100%}
	.tab-box{ width:100%}
	.tab-box > li{ float:left; margin-left:1.4%; width:15.5%}
	.tab-box > li > button{ padding:0; width:100%}
	.list-wrap.pdf .tab-box > li{ margin-left:1%; width:24.25%}
	.list-wrap.pdf .tab-box > li:first-child{ margin-left:0}
}
@media screen and (max-width:1024px) { 
	.tab-box{ padding-bottom:10px}
	.tab-box > li > button{ height:50px; font-size:17px}
	.tab-box > li > div{ top:60px}
	.tab-box ol > li{ height:60px}
	.tab-box ol > li > a{ width:55px; height:30px; font-size:14px}
	.tab-box ol > li > a img{ height:15px}
	.tab-box ol > li > div{ margin-left:15px}
	.tab-box ol > li > .descrip span,.tab-box ol > li > .descrip strong,.tab-box ol > li > .descrip mark{ font-size:16px}
}
@media screen and (max-width:820px) { 
	.list-wrap.pdf{ width:100%}
	.tab-box > li > button{ height:40px; font-size:15px}
	.tab-box > li > div{ top:50px}
	.tab-box ol > li > .descrip span,.tab-box ol > li > .descrip strong,.tab-box ol > li > .descrip mark{ font-size:15px; line-height:20px}
}
@media screen and (max-width:660px) { 
	.tab-box{ padding-bottom:50px}
	.tab-box > li > div{ top:90px}
	.tab-box > li{ margin:0 0 1.25% 1.25%; width:32.5%}
	.tab-box > li:nth-child(4){ margin-left:0}
	.tab-box > li:nth-child(1),.tab-box > li:nth-child(2),.tab-box > li:nth-child(3){ margin-top:0}
	.tab-box ol > li > div{ padding:5px 0}
	.tab-box ol > li{ height:auto; min-height:60px}
	.tab-box ol > li > a{ padding:0 5px}
	.tab-box > li > div.phrases100 ol > li{ padding:10px 0}
	.tab-box > li > div.famous ol > :nth-child(n){ width:50%}
	.list-wrap.pdf .tab-box > li{ margin:0 0 1.5% 1.5%; width:49.25%}
	.list-wrap.pdf .tab-box > li:nth-child(odd){ margin-left:0}
	.list-wrap.pdf .tab-box > li:nth-child(3),.list-wrap.pdf .tab-box > li:nth-child(4){ margin-bottom:0}
	.tab-box > li > div.pdf div.descrip{ flex-direction:column; align-items:flex-start}
}
/* 저작권 안내 */
.notice-copyright{ height:160px}
.notice-copyright span,.notice-copyright mark,.notice-copyright strong,.pdf-info{ line-height:28px}
.pdf-info		{ margin-top:40px}
@media only screen and (max-width:768px) {
	.notice-copyright,.pdf-info{ align-items:flex-start; padding:0 15px; height:120px}
	.notice-copyright span,.notice-copyright mark,.notice-copyright strong,.pdf-info{ font-size:15px; line-height:26px}
	.notice-copyright span,.notice-copyright mark,.pdf-info{ text-align:left}
	.pdf-info{ justify-content:flex-start; margin-top:30px; height:auto}
}
@media only screen and (max-width:480px) {
	.notice-copyright span,.notice-copyright mark,.notice-copyright strong,.pdf-info{ font-size:14px; line-height:22px}
	.pdf-info{ margin-top:20px}
}