@charset "utf-8";
/* CSS Document */
/* common */
* { font-family: 'NanumGothic', '나눔고딕', 'Malgun Gothic', '맑은 고딕', arial, sans-serif;}

/* 다국어 폰트 정의 - 구글 웹폰트 로딩하지 않음 */
*:lang(ko)        { font-family: 'NanumGothic', '나눔고딕', 'Malgun Gothic', '맑은 고딕', 'Noto Sans CJK KR', "Noto Sans KR", Arial, Helvetica, sans-serif; }
*[lang="ko"]      { font-family: 'NanumGothic', '나눔고딕', 'Malgun Gothic', '맑은 고딕', 'Noto Sans CJK KR', "Noto Sans KR", Arial, Helvetica, sans-serif; }
*:lang(zh-Hans)   { font-family: 'Microsoft Yahei', '微软雅黑', STXihei, '华文细黑', SimHei, '黑体', Arial, Helvetica, sans-serif; }
*[lang="zh-Hans"] { font-family: 'Microsoft Yahei', '微软雅黑', STXihei, '华文细黑', SimHei, '黑体', Arial, Helvetica, sans-serif; }
*:lang(zh)        { font-family: 'Microsoft Yahei', '微软雅黑', STXihei, '华文细黑', SimHei, '黑体', Arial, Helvetica, sans-serif; }
*[lang="zh"]      { font-family: 'Microsoft Yahei', '微软雅黑', STXihei, '华文细黑', SimHei, '黑体', Arial, Helvetica, sans-serif; }

/* mobile style */
*{-webkit-text-size-adjust:none}
body, form, div, p, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li, fieldset, th, td, input, textarea,button,select{margin:0;padding:0;font-weight:normal}
body{-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}
li{list-style:none}
a{text-decoration:none}
a[href^="tel"]{ font-style:normal}
address, caption, em, var{font-style:normal;font-weight:normal}
input, textarea, select{letter-spacing:normal}
ol, ul, dl{list-style:none}
fieldset, img{border:0}
legend, caption{display:none}
img{border:0;vertical-align:top}
hr{display:none}
table{border-collapse:collapse;border-spacing:0}
br{letter-spacing:normal}
p{letter-spacing:normal}
input{vertical-align:middle}
input[type="text"], input[type="password"]{-webkit-appearance:none}
input[type="checkbox"]{-webkit-appearance:none;-webkit-border-radius:0}
input:checked[type="checkbox"]{-webkit-appearance:checkbox}
input[type="radio"]{border:none;-webkit-appearance:none}
button,input[type="button"],input[type="submit"],input[type="reset"],input[type="file"]{-webkit-appearance:button;border-radius:0}
textarea{-webkit-appearance:none}
select{-webkit-appearance:menulist-text}


.header.is-fixed {position: fixed;    top: 0;    right: 0;    left: 0; z-index: 1000;}
.header {padding-bottom: 18px; background-color:#FFF; border-bottom:2px solid #518dc1; font-family:'NanumGothic'!important}
.header .gnb {padding:15px; height:22px; margin-bottom:18px;  background-color:#3477b2;}
.header .gnb h1.hsk {float: left;   font-size: 20px;    font-weight:bold; height:22px;  color: #fff;}
.header .gnb .gnb_logo {float:right; width:85px; height:19px;  margin: 2px;}
.header .gnb .gnb_logo .logo_link {display: block;  overflow: hidden;    width: 105px;    height: 23px; }
.header .gnb .gnb_logo .logo_link img{width:85px; height:19px}


.header .btn_layerpop{position: absolute; right:8px; width:54px; top:62px;}
.header .layerpop{background-color: #f3f3f3; border: 1px solid #dcdcdc; box-sizing: border-box; width:100%; position: absolute; z-index:9999; padding: 20px 0px;}
.header .layerpop h1{ width: 80%; margin:0 auto; font-weight: bold; font-size:20px; background: url("../images/button_comment.png") no-repeat; background-size:30px 30px; padding: 5px 0 20px 34px;}
.header .layerpop .btnClose {display: block;  position: absolute;  top:20px;right:20px; cursor:pointer; z-index:100;}
.header .layerpop ul{width: 80%; margin:0 auto;}
.header .layerpop ul li{padding-bottom: 5px;}
.header .layerpop ul li input{width:97%; padding: 5px 0px; padding-left:2%;  padding-right: 1%;}
.header .layerpop ul li textarea.comment{width: 97%; height:150px;padding: 5px 0px; padding-left:2%; padding-right: 1%;}
.header .layerpop .btn_area{display: block; text-align: center;  padding: 10px 0px 15px;}
.header .layerpop .btn_area a{ padding:10px 35px; border-radius:25px;   font-size: 15px;    background: #3577b3;    color: #FFF;    border: none;}

.header .hsk_select {position: relative; margin:0 auto; width:250px;  margin-bottom:18px; }
.header .hsk_select_tab {position: relative;     white-space: nowrap;    padding: 4px;    border: 2px solid #f0f0f0;    -webkit-border-radius: 30px;    border-radius: 30px;    background-color: #FFF;}
.header .hsk_select_tab ul{width:100%; height: 40px; display:block; text-align:center;}
.header .hsk_select_tab ul li{width:49%; display:block; float:left;   padding:9px 0px; }
.header .hsk_select_tab ul li a{color:#979797; font-weight:bold;  font-size: 18px;}
.header .hsk_select_tab ul li a.hsk_tab_page span{ background-color: #fff;width:100%; padding:9px 33px; -webkit-border-radius: 19px;    border-radius: 19px; color:#000; }
.header .hsk_select_tab ul li a.hsk_tab_page span.on{ background-color: #000;width:100%; padding:9px 33px; -webkit-border-radius: 19px;    border-radius: 19px; color:#FFF; cursor:default;}
.header .hsk_select_tab ul li a.hsk_tab_level span{ background-color: #fff;width:100%; padding:9px 33px; -webkit-border-radius: 19px;    border-radius: 19px; color:#000; }
.header .hsk_select_tab ul li a.hsk_tab_level span.on{ background-color: #000;width:100%; padding:9px 33px; -webkit-border-radius: 19px;    border-radius: 19px; color:#FFF; cursor:default;}


.header .search{position: relative; margin:0 auto;  width:65%; max-width:450px; height:40px;  -webkit-border-radius: 4px;    border-radius: 4px;   border:2px solid #f0f0f0; z-index: 1010;}
.header .search input{border:none;}
.header .search input.num{ padding:5px; font-size:18px;font-weight:bold;  margin:0 auto; text-align:center; width:77%;  border:}
.header .search input.img-button_pre {background: url(images/button_pre.png) center no-repeat;  background-size:16px 16px;     width: 40px;    height: 40px; border-right:2px solid #f0f0f0; border:0px 2px 0px 0px;       cursor: pointer;  }
.header .search input.img-button_next {background: url(images/button_next.png) center no-repeat;  background-size:16px 16px;   width: 40px;    height: 40px; border-left:2px solid #f0f0f0; border:0px 0px 0px 2px;   float:right;   cursor: pointer; }

.header .grade{position: relative; margin:0 auto;  width:95%; max-width:470px; height:40px;  -webkit-border-radius: 4px;    border-radius: 4px;   border:2px solid #f0f0f0; z-index: 1010;}
.header .grade select{border:none; outline:0px; padding:5px; font-size:18px; line-height:40px; font-weight:bold;  margin:2px auto; text-align:center; width:100%;}


.header .tip{position:absolute; z-index:1000; top:120px; right:9px; background-image:url(../images/tip.png); width:235px; height:79px;}
.header .tip .tip_close{position:absolute; top:25px; right:13px;}
#page{font-family:'Noto Sans KR'; padding:160px 25px 0px 25px;}

#level{font-family:'Noto Sans KR'; padding:220px 50px 0px 25px;  }
.content{font-family:'Noto Sans KR'!important; font-size:14px; }
.content h3{ font-size:1em; font-weight:normal; color:#969b9f; border-bottom:1px solid #eff0f2; padding:10px 0px; margin-bottom:20px;}
.content .component_keyword{margin-bottom:50px;}
.content .component_keyword p{padding-top:10px; letter-spacing:-0.05em; font-weight:300; font-size:1.5em; line-height:26px; cursor:pointer;}
.content .component_keyword p a{ color:#353535}
.content .component_keyword p.selected{color:#005baa}
.content .component_keyword a{color:#000;}
.content .component_keyword a.selected{color:#005baa}
.content .component_keyword .ex_kor {padding-top:0.8em; letter-spacing:-0.05em; font-weight:300; font-size:1em; line-height:1.2em;}

strong.word{ font-size:2.3em;line-height: 42px; font-weight:900;}
span.phonetic{ font-size:1.3em; font-weight:300; color:#8f9194; font-family:Arial, Helvetica, sans-serif; background:url(../images/icon.png) no-repeat 2px 4px;  padding-left:25px; margin-left:10px;}
span.phonetic.selected{ color:#7facd4; background-position:2px -17px;}

.alphabet{position: fixed;  top:215px; right:12px; font-size:0.9em; line-height:1.3em;  text-align:center; width:1em; height:500px; min-height: 470px;}
.alphabet a{color:#b5b9bc;}
.alphabet a.sel{color:#005baa; font-weight:900; cursor:default;}
.alphabet a.dis{color:#eee; font-weight:100; cursor:default;}


@media (hover: hover) and (pointer: fine) {
	.content .component_keyword p:hover{color:#005baa}
	.content .component_keyword a:hover{color:#005baa}
	span.phonetic:hover{ color:#7facd4; background-position:2px -17px;}
	/*.alphabet a:hover{color:#005baa; font-weight:900}*/
	.alphabet a.hover{color:#005baa; font-weight:900}
}