@charset "utf-8";*{padding:0;margin:0}
.tmp_img{display:none}
::selection{background:rgba(90,150,200,.6);color:#fff;}
::-moz-selection{background:rgba(90,150,200,.6);color:#fff;}
a:hover{text-decoration:none}
input{outline-style:none;box-shadow:none;border-color:transparent;}
.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.anim{-webkit-transition:.6s ease-in-out;-moz-transition:.6s ease-in-out;-o-transition:.6s ease-in-out;transition:.6s ease-in-out;}
.gradient{background:linear-gradient(to right, #cc99cc 0%,#7399bc 50%,#89e882 100%);background:-moz-linear-gradient(left, #cc99cc 0%, #7399bc 50%, #89e882 100%);background:-webkit-linear-gradient(left, #cc99cc 0%,#7399bc 50%,#89e882 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#cc99cc", endColorstr="#89e882",GradientType=1);background:linear-gradient(271deg, #b59dce, #7399bc, #89e882, #b59dce, #7399bc, #89e882);background-size:300% 300%;-webkit-animation:AnimationName 15s ease infinite;-moz-animation:AnimationName 15s ease infinite;animation:AnimationName 15s ease infinite;}
@-webkit-keyframes AnimationName{0%{background-position:0% 50%}
50%{background-position:100% 51%}
100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName{0%{background-position:0% 50%}
50%{background-position:100% 51%}
100%{background-position:0% 50%}
}
@keyframes AnimationName{0%{background-position:0% 50%}
50%{background-position:100% 51%}
100%{background-position:0% 50%}
}
#upper_line{height:12px;}
#menu_btn{position:absolute;top:33px;left:20px;z-index:11;width:80px;cursor:pointer;opacity:1;transition:all .4s ease-out;}
#menu_btn:hover{opacity:.7}
#menu_btn:active .text{top:2px}
#menu_btn .icon{display:block;width:25px;height:22px;}
#menu_btn .icon span{display:block;height:2px;position:absolute;background:#C3CBD1;transition:all 0.3s ease-out;}
#menu_btn .icon span:nth-child(1){width:25px}
#menu_btn .icon span:nth-child(2){width:20px;top:5px}
#menu_btn .icon span:nth-child(3){width:23px;top:10px}
#menu_btn .icon span:nth-child(4){width:16px;top:15px}
#menu_btn .icon span:nth-child(5){width:16px;top:20px}
#menu_btn.close .icon span{background:#C3CBD1}
#menu_btn.close .icon span:nth-child(1),
#menu_btn.close .icon span:nth-child(2),
#menu_btn.close .icon span:nth-child(3),
#menu_btn.close .icon span:nth-child(4),
#menu_btn.close .icon span:nth-child(5){width:25px;top:10px}
#menu_btn.close .icon span:nth-child(1),
#menu_btn.close .icon span:nth-child(2),
#menu_btn.close .icon span:nth-child(3){-webkit-transform:rotate(135deg);-moz-transform:rotate(135deg);-o-transform:rotate(135deg);transform:rotate(135deg);}
#menu_btn.close .icon span:nth-child(4),
#menu_btn.close .icon span:nth-child(5){-webkit-transform:rotate(-135deg);-moz-transform:rotate(-135deg);-o-transform:rotate(-135deg);transform:rotate(-135deg);}
#lngs{position:absolute;top:34px;right:24px}
#lngs a{text-decoration:none;opacity:.4;color:#5E81A8;opacity:.4}
#lngs li{display:block;float:left;margin-left:4px;font-size:14px;color:#5E81A8;font-weight:bold;}
#lngs a:hover{opacity:1;color:#4CCC42}
body{font-family:"Roboto"}
header{height:230px;width:100%;min-width:360px}
header .fb-like{position:absolute;top:135px;left:40px}
header a.logo{position:absolute;top:60px;left:30px;}
header a.logo img{width:100px}
header a.logo{text-decoration:none;height:57px}
header a.logo b{font-size:36px;font-weight:400;color:#000;position:absolute;top:8px;left:108px}
header a.logo span{color:#D2D8DB}
header .descr{position:absolute;top:70px;left:330px;font-size:14px;line-height:22px;}
@media screen and (min-width:978px){.inner{width:980px;margin:0 auto}
}
@media screen and (max-width:978px){header a.logo{top:50px;left:50%;margin-left:-135px}
header .descr{width:100%;text-align:center;left:0;top:110px;font-size:13px;line-height:17px}
header .fb-like{left:50%;margin-left:-144px;top:160px;}
#hangul_block .head_block{height:105px!important}
#hangul_block h1{opacity:0;display:none}
#hangul_block h2{opacity:0;display:none}
#letter_switcher{top:30px!important;left:50%!important}
#hangul_block .share_option{opacity:0;display:none}
}
.inner{position:relative;margin:0 auto;}
#audio_files{height:0;overflow:hidden;}
#hangul_block{width:100%;position:relative;}
#hangul_block .head_block{width:100%;height:145px;background:#f5f6f7}
#hangul_block h1{font-size:20px;font-weight:500;position:absolute;top:34px;left:40px}
#hangul_block h2{padding-right:40px;display:block;font-size:13px;line-height:18px;position:absolute;top:72px;left:40px;font-weight:400}
#letter_switcher{width:220px;height:40px;font-size:14px;line-height:42px;border-radius:4px;position:absolute;top:50px;left:52.5%;margin-left:-110px;color:#6D7A84;background:#CAD4D8;}
#letter_switcher ul{position:absolute;width:220px}
#letter_switcher li{display:block;float:left;border-radius:4px;cursor:pointer;text-align:center;width:110px}
#letter_switcher .selector{background:#fff;color:#000;position:absolute;top:-2px;width:110px;height:44px;border-radius:4px;-webkit-box-shadow:0px 1px 4px 2px rgba(70,70,90,.08);-moz-box-shadow:0px 1px 4px 2px rgba(70,70,90,.08);box-shadow:0px 1px 4px 2px rgba(70,70,90,.08);transition:.3s ease-in-out;}
#letter_switcher .selector.left{left:0px}
#letter_switcher .selector.right{left:110px}
#letter_switcher div:active{opacity:0.9}
.share_option{font-size:14px;position:absolute}
.share_option .link{border-bottom:2px solid #C9D1D3;color:#4F5A66;text-decoration:none}
.share_option .link:hover{border-color:rgba(0,0,0,0);cursor:pointer}
#hangul_block .share_option{right:120px;top:60px}
.share_option img{width:20px;height:17px;position:absolute;right:-25px;top:-2px}
.share_option .iconblock{border-radius:5px;overflow:hidden;-webkit-transition:.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);-moz-transition:.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);transition:.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.share_option .iconblock.open{position:absolute;top:-40px;left:-10px;width:200px;height:100px;background:#fff;-webkit-box-shadow:0px 4px 20px 5px rgba(0,0,0,0.08);box-shadow:0px 4px 20px 5px rgba(0,0,0,0.08)}
.share_option .iconblock.close{position:absolute;top:-20px;left:60px;opacity:0;width:0px;height:0px;background:#fff;}
.close10x10{position:absolute;width:16px;height:16px;top:10px;right:10px;cursor:pointer}
.close10x10 .stroke{background:#9AA4AB;width:16px;height:2px;position:absolute;top:7px;}
.close10x10 .stroke.s1{transform:rotate(45deg)}
.close10x10 .stroke.s2{transform:rotate(-45deg)}
.close10x10:active{top:11px}
.close10x10:hover .stroke{background:#65BC54}
#hangul_block .ya-share2{width:112px;position:absolute;top:24px;left:47px;background:#fff}
#hangul_block .ya-share2__item{padding-bottom:4px}
#hangul_block .alphabit{background:#E6E9EB;padding:50px 30px;padding-bottom:20px;text-align:center}
#hangul_block .alphabit .hide{display:none}
#hangul_block .options{background:#E6E9EB;text-align:center;padding-bottom:40px}
#hangul_block .choice_font h4{font-size:13px;font-weight:400;padding-left:10px;margin-bottom:10px;color:#6D7A82}
#hangul_block .choice_font li{display:inline-block;font-size:35px;cursor:pointer;transition:.2s ease-in-out;}
#hangul_block .choice_font li:hover{transform:scale(1.2)}
#hangul_block .choice_font li span{color:#ABB6BA}
#hangul_block .choice_font li span.current{color:#000}
#hangul_block .item{width:60px;display:inline-block;margin:0 2px;margin-bottom:25px;}
#hangul_block .mgroup{display:inline-block;word-wrap:nowrap;white-space:nowrap}
#hangul_block .row{margin-bottom:10px}
#hangul_block .item div{text-align:center!important;word-wrap:nowrap;white-space:nowrap;font-size:12px;}
#hangul_block .item .kr{transition:.2s ease-in-out;}
#hangul_block .item .kr:hover{transform:scale(1.4)}
#hangul_block .item .kr:active{transform:scale(0.9)}
.kr{font-size:54px!important;margin-bottom:10px;cursor:pointer;margin-bottom:10px}
.kr_batang{font-family:'Batang'}
.kr_gungsuh{font-family:'Gungsuh'}
.kr_malgun{font-family:'Malgun Gothic'}
.kr_papyrusm{font-family:'Papyrus M'}
.kr_ylee{font-family:'Ylee'}
.name{color:#888;font-size:10px!important;line-height:14px!important;margin-bottom:5px;font-family:arial}
.name b{font-size:13px}
.ipa{line-height:20px;font-family:arial}
.vowels .ipa{color:#44B827;}
.consonants .ipa{color:#457CAD;}
.layout{max-width:900px;padding:40px;padding-top:0px;margin:0 auto;margin-bottom:50px;margin-top:10px}
.layout:after{content:'';display:table;clear:both;}
.layout .page{width:calc(100% - 340px);float:left;margin-right:40px;}
.layout .sidebar{width:300px;float:left;}
.layout .sticked{top:0px;position:sticky;}
.layout .sidebar .banner{position:relative;width:100%;background:#fff;margin-bottom:40px;box-shadow:0px 3px 22px -4px rgba(94,69,39,.22);}
@media screen and (max-width:641px){.layout .page{width:100%!important;margin-right:0px}
.layout .sidebar{display:none}
}
@media screen and (min-width:641px) and (max-width:800px){.layout .page{width:calc(100% - 240px);}
.layout .sidebar{width:200px;}
.sidebar .donate h4{font-size:18px!important}
.sidebar .donate p{font-size:14px}
.sidebar .donate p span{display:none}
.sidebar .donate p br{display:none}
.sidebar .donate .options{padding-left:0px!important}
.sidebar .ya-share2{width:112px;text-align:center;display:left}
.sidebar .ya-share2__item{padding-bottom:4px}
.sidebar .ya-share2_inited{margin-left:50px !important}
}
@media screen and (min-width:801px) and (max-width:960px){.layout .page{width:calc(100% - 340px)}
}
article h2{font-size:20px;line-height:26px;font-weight:500;padding-top:30px;margin-bottom:20px}
article h2 a{color:#000;text-decoration:none}
article h2 b{font-weight:500;}
article p{font-size:14px;line-height:22px;text-align:justify;margin-bottom:20px}
article img{margin-bottom:10px}
article p.imgdescr{text-align:center;font-size:13px;color:#555;line-height:18px;margin-bottom:6px}
article quote{position:relative;display:block;background:#EBF0F2;padding:30px;padding-left:120px;font-size:12px;line-height:22px;text-align:justify;color:#415056;margin-bottom:25px}
article quote a{color:#3EAD27}
article quote img{width:70px;position:absolute;top:24px;left:28px;}
article ul{margin-left:20px;font-size:14px}
article li{line-height:30px}
article li.vowels span{color:#3AB530}
article li.consonants span{color:#1D7FB3}
.sidebar h3{font-size:20px;line-height:26px;font-weight:500;margin-top:30px;margin-bottom:20px}
.sidebar h3 a{color:#3AB530}
.sidebar h4{font-size:16px;line-height:22px;margin-bottom:20px}
.sidebar ul.nav{margin-bottom:40px}
.sidebar .nav li{font-size:14px;line-height:18px;margin-left:20px;margin-bottom:10px}
.sidebar .nav li a{color:#000}
.sidebar .nav li a:hover{text-decoration:none}
.sidebar p{font-size:14px;line-height:20px}
.sidebar .poster a img{box-shadow:0px 1px 4px 2px rgba(70,70,90,.14);margin-bottom:20px}
.sidebar .poster a:hover img{box-shadow:0px 4px 16px 4px rgba(70,70,90,.12);transform:translateY(-3px);transition:.2s ease-in-out;}
.sidebar .poster p a{color:#000}
.sidebar .donate{margin-bottom:40px}
.sidebar .donate h4{margin-bottom:10px;text-align:center;padding-right:20px}
.sidebar .donate h4 b{color:#2BA51E}
.sidebar .donate h4 span{height:20px}
.sidebar .donate{border-radius:6px;padding:20px;box-shadow:0px 4px 22px 4px rgba(70,70,90,.14);}
.sidebar .donate p{line-height:22px;margin-bottom:20px;text-align:center}
.sidebar .donate span{position:relative;width:16px;height:16px;display:inline-block}
.sidebar .donate span img{position:absolute;top:0;left:0}
.sidebar .donate label{color:#456A8A;font-size:13px;padding-right:8px}
.sidebar .donate input[type=input], .sidebar .donate input[type=number]{width:50px;padding:0 8px;height:34px;border:3px solid #EAEAEA;border-radius:5px;margin-right:4px}
.sidebar .donate .sum{margin-bottom:20px;}
.sidebar .pt{display:inline-block;width:66px;height:42px;border-radius:5px;border:3px solid #EAEAEA;transition:.3s ease-in-out;cursor:pointer}
.sidebar .pt.current{border:3px solid #78D171}
.sidebar .pt.bankcards{margin-right:8px}
.sidebar .donate .payement label{display:block;margin-bottom:14px}
.sidebar .donate .payement{margin-bottom:10px}
.sidebar .donate .payement input{display:none}
.sidebar .donate input[type=submit]{display:inline-block;background:#5CBF4D;height:46px;line-height:46px;width:100%;border-radius:23px;border:0px;font-size:16px;font-weight:500;color:#fff;box-shadow:0px 2px 0px 2px rgba(100,200,90,.3);cursor:pointer;margin-bottom:16px;margin-top:16px;}
.sidebar .donate input[type=submit]:hover{background:#5FD84A;transition:.3s ease-in-out;}
.sidebar .donate input[type=submit]:active{line-height:50px;background:#41A82C;box-shadow:0px 2px 0px 2px rgba(100,200,90,.0);}
.sidebar .donate .options{padding-left:50px}
.sidebar .share{text-align:center;margin-top:30px}
.sidebar .share h4{font-weight:500;font-size:14px;text-align:center;margin-bottom:10px}
.comments{border-top:2px solid #DADFE3;padding:20px 0}
.comments .inner{max-width:900px;padding:0 40px;margin:0 auto;padding-bottom:40px}
.comments h4{font-size:20px;line-height:26px;font-weight:500;padding-top:30px;margin-bottom:20px}
footer .line{height:10px;margin-bottom:64px}
footer a.logo{display:block;margin:0 auto;width:270px;height:70px;position:relative}
footer a.logo img{width:100px}
footer a.logo{text-decoration:none;height:57px}
footer a.logo b{font-size:36px;font-weight:400;color:#000;position:absolute;top:8px;left:108px}
footer a.logo span{color:#D2D8DB}
footer h3{font-size:15px;line-height:22px;font-weight:500;text-align:center;margin-top:5px;margin-bottom:30px;padding:0 40px}
footer .wish{font-size:15px;font-weight:500;text-align:center;margin-top:30px}
footer .fb-like{margin-bottom:10px}
footer .descr{max-width:600px;font-size:13px;line-height:20px;margin:0 auto;padding:0 40px;text-align:justify}
footer .copyright{text-align:center;font-size:12px;margin:60px auto}
footer .copyright a{color:#888;}