@font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400; src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype'); }
@font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 500; src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype'); }

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; vertical-align: baseline; }
html { height: 100%; min-height: 100%; }
body { position: relative; min-width: 1000px; min-height: 100%; background: #fff; color: #333; font-family: 'Noto Sans KR', 'Nanum Gothic', Malgun Gothic, �섎닎怨좊뵓, �뗭�, roboto, sans-serif; font-size: 14px; font-weight: 400; -webkit-font-smoothing: antialiased;  -webkit-text-size-adjust: 100%; }
nav ul, li { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
*, *:before, *:after { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
a, a:hover, a:focus { background: transparent; text-decoration: none; }
button { border: 0; background: transparent; font: inherit; outline: none; cursor: pointer; }
button:hover, button:focus { outline: none; }
pre, input, select, textarea { margin: 0; padding: 0; border: 0; border-radius: 0; outline: 0; color: #333; font: inherit; font-size: 16px; }
input:focus, select:focus, textarea:focus { outline: none; }
input[type=text]::-ms-clear { display: none; }

.hover_css:hover { text-decoration:underline; text-decoration-color:#FC9EBD; }

#bo_v_con { 
    padding: 5px;
}
#bo_v_con h1 { 
    color: #f85024;
    margin-top: 15px;
    margin-bottom: 20px;
}

.btn { display: inline-block; padding: 0 16px; color: #fff; font-size: 16px; text-align: center; vertical-align: middle; line-height: 36px; cursor: pointer; }
.btn.black { background: #333; border-radius: 5px; }
.btn.black.btn_cancel { width:65px; }
.btn.red { background: #f85024; }
.btn.lg { width: 200px; height: 60px; font-size: 20px; line-height: 60px; }
.wrap-btn { margin-top: 60px; font-size: 0; text-align: center; }
.wrap-btn .btn { margin: 0 10px; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.text-note { font-size: 16px; }

.editorview { margin: 8px; padding: 8px; }
.editorview div             { display: block; unicode-bidi: embed; }
.editorview li              { display: list-item }
.editorview head            { display: none }
.editorview caption         { display: table-caption }
.editorview caption         { text-align: center }

.editorview h1 {
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}

.editorview h2              { font-size: 1.5em; margin: .75em 0; font-weight: bolder }
.editorview h3              { font-size: 1.17em; margin: .83em 0; font-weight: bolder }
.editorview h4              { font-size: .83em; margin: 1.5em 0; font-weight: bolder	}
.editorview h4              { font-size: .83em; margin: 1.5em 0; font-weight: bolder	}
.editorview h5              { font-size: .83em; margin: 1.5em 0; font-weight: bolder }
.editorview h6              { font-size: .75em; margin: 1.67em 0; font-weight: bolder }

.editorview strong          { font-weight: bolder }
.editorview b			     { font-weight: bolder }
.editorview blockquote      { margin-left: 40px; margin-right: 40px }

header { position: relative; z-index: 1; font-size: 0; text-align: center; }
header .topnav { display: inline-block; width: 100%; max-width: 1000px; height: 100px; }
/*
header .topnav h1 { float: left; margin-top: 10px; }
header .topnav h1 a { display: block; width: 208px; height: 80px; background: url(/img/logo.png) no-repeat 0 0; text-indent: -999999px; }
*/
header .topnav h1 { float: right; /*margin-top: 10px;*/ }
header .topnav h1 a { display: block; width: 253px; height: 90px; background: url(/img/logo_readandtalknet.png) no-repeat 0 0; text-indent: -999999px; }
header .topnav nav { float: left; font-size: 0; text-align: right; }
header .topnav nav > ul > li { display: inline-block; position: relative; text-align: center; }
header .topnav nav > ul > li > a { display: table-cell; height: 100px; padding-right: 20px; padding-left: 20px; color: #333; font-size: 16px; line-height: 20px; vertical-align: middle; }
header .topnav nav > ul > li:hover > a, header .topnav nav > ul > li.active > a { color: #f85024; }
header .topnav nav > ul > li:hover > span, header .topnav nav > ul > li.active > span { position: absolute; top: 0; left: 0; width: 100%; height: 4px; padding: 0 8px; }
header .topnav nav > ul > li:hover > span:before, header .topnav nav > ul > li.active > span:before { display: block; width: 100%; height: 100%; background: #f85024; content: ''; }
header .topnav nav > ul > li:hover .navmenu { display: block; }
header .topnav nav .navmenu { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); }
header .topnav nav .navmenu:before { position: absolute; top: 0; left: 50%; width: 0; height: 0; margin-left: -6px; border-top: 6px solid #fff; border-right: 6px solid transparent; border-left: 6px solid transparent; content: ''; }
header .topnav nav .navmenu ul { display: inline-block; padding: 8px 0; background: rgba(0,0,0,0.8); }
header .topnav nav .navmenu a { display: block; width: 100%; padding: 12px 24px; color: #fff; font-size: 16px; white-space: nowrap; }
header .topnav nav .navmenu a:hover { color: #f85024; }

header .topnav nav > ul > li > a { display: table-cell; height: 100px; padding-right: 20px; padding-left: 20px; color: #333; font-size: 20px; line-height: 20px; vertical-align: middle; }
header .topnav nav > ul > li > a small { font-size: 16px; }

.subnav ul li a { display: block; position: relative; padding: 14px 24px 14px 16px; padding-right: 24px; padding-left: 16px; color: #888; font-size: 20px; line-height: 28px; }

header .topmenu { background: #eee; }
header .topmenu form { max-width: 1000px; margin: 0 auto; padding: 8px 0; font-size: 0; text-align: right; }
header .topmenu form .input { width: 160px; height: 36px; margin-left: 8px; padding: 8px 12px; font-size: 16px; line-height: 20px; vertical-align: middle; border-radius: 4px;}
header .topmenu form .btn { display: inline-block; margin-left: 8px; font-size: 16px; line-height: 36px; vertical-align: middle; border-radius: 4px;}
header .topmenu form .user-id { display: inline-block; margin-right: 16px; vertical-align: middle; }
header .topmenu form .user-id b { font-weight: 500; }

footer { position: absolute; bottom: -50px; left: 0; z-index: 1; width: 100%; background: #d5e2ef; padding: 40px 0; font-size: 14px; }
footer .footer { max-width: 1000px; margin: 0 auto; }
footer .copy { margin-top: 12px; }

.main-slider { overflow: hidden; position: relative; width: 100%; height: 440px; }
.bx-wrapper { position: relative; height: 100%; }
.bx-wrapper .bx-viewport { min-height: 100%; transform: translatez(0); -webkit-transform: translatez(0); -moz-transform: translatez(0); -ms-transform: translatez(0); -o-transform: translatez(0); }
.main-slider .slide { position: relative; width: 100%; height: 100%; }
.main-slider .img { /*position: absolute; width: 100%; height: 100%;*/ height: 100%; background-repeat: no-repeat; background-position: 50% 50%; }
.main-slider .img1 { background-image: url(/img/bg_slide01.jpg); }
.main-slider .img2 { background-image: url(/img/bg_slide02.jpg); }
.main-slider .img3 { background-image: url(/img/bg_slide03.jpg); }
.main-slider .img4 { background-image: url(/img/bg_slide04.jpg); }
.main-slider .img-bg { position: absolute; top: 0; left: 50%; z-index: -1; width: 50%; height: 100%; }
.main-slider .img-bg.left { transform: translateX(-100%); -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); }
.main-slider .img1 .left { background: #48433c; }
.main-slider .img1 .right { background: #98866a; }
.main-slider .img2 .left { background: #3d3e3a; }
.main-slider .img2 .right { background: #636f64; }
.main-slider .img3 .left { background: #565453; }
.main-slider .img3 .right { background: #dfdddd; }
.main-slider .img4 .left { background: #5f6060; }
.main-slider .img4 .right { background: #edeff0; }
.main-slider .cont-slide { display: table; position: relative; z-index: 0; width: 100%; max-width: 1000px; height: 100%; margin: 0 auto; padding-bottom: 32px; color: #fff; }
.main-slider .cont-slide .wrap-txt { display: table-cell; padding-bottom: 48px; vertical-align: bottom; }
.main-slider .cont-slide h2 { font-size: 36px; line-height: 40px; }
.main-slider .cont-slide h2 strong { color: #f85024; }
.main-slider .cont-slide .list { margin-top: 32px; }
.main-slider .cont-slide .list li { position: relative; margin-top: 8px; padding-left: 16px; font-size: 16px; line-height: 24px; }
.main-slider .cont-slide .list li:before { position: absolute; top: 7px; left: -2px; width: 8px; height: 8px; border: 2px solid #fff; border-bottom: 0; border-left: 0; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); content: ''; }
.main-slider .bx-controls { position: absolute; bottom: 10px; left: 50%; margin-left: -500px; }
.main-slider .bx-controls .bx-pager .bx-pager-item { float: left; margin-right: 8px; }
.main-slider .bx-controls .bx-pager .bx-pager-item a { display: block; width: 24px; height: 24px; border-radius: 50%; background: #333; color: #fff; font-size: 14px; font-weight: 500; line-height: 22px; text-align: center; opacity: 0.4; }
.main-slider .bx-controls .bx-pager .bx-pager-item a.active { background: #f85024; color: #fff; opacity: 1; }
/*
.main-slider .wrap-book { position: absolute; bottom: 40px; right: 0; text-align: right; }
.main-slider .wrap-book .book { margin-bottom: 16px; font-size: 0; }
.main-slider .wrap-book .book img { margin-left: 8px; box-shadow: 4px 4px 20px rgba(0,0,0,0.4); }
.main-slider .img4 .wrap-book .book img { width: 24%; }
.main-slider .wrap-book p { color: #E6270A; font-size: 20px; font-weight: 500; }
*/
.main-slider .wrap-book { position: absolute; bottom: 14px; right: 0; text-align: right; border:0px solid #FF0000; }
.main-slider .wrap-book .book { margin-top:0px;margin-bottom: 0px; font-size: 0; }
.main-slider .wrap-book .book img {margin-left: 8px;}
.main-slider .wrap-book p { color: #E6270A; font-size: 30px; font-weight: 900; }


.main-btn { display: table; width: 1000px; margin: 20px auto 0; }
.main-btn ul { margin-right: -10px; margin-left: -10px; font-size: 0; }
.main-btn ul li { display: table; float: left; width: 146px; padding: 0 10px; }
.main-btn ul li:first-child, .main-btn ul li:last-child { width: 145px; }
.main-btn ul li a { display: table-cell; position: relative; width: 100%; height: 100px; padding-bottom: 12px; border-radius: 16px; color: #fff; text-align: center; vertical-align: middle; }
.main-btn ul li .ir { background: #3fceec; }
.main-btn ul li .er { background: #2ca9f0; }
.main-btn ul li .st { background: #4993f8; }
.main-btn ul li .ee { background: #77d850; }
.main-btn ul li .pg { background: #34c255; }
.main-btn ul li .wd { background: #35c39c; }
.main-btn ul li .lq { background: #3dc4c6; }
.main-btn ul li a h2 { padding-bottom: 8px; font-size: 24px; font-weight: 500; line-height: 28px; letter-spacing: -1px; }
.main-btn ul li a h2 small { font-size: 16px; letter-spacing: -2px; }
.main-btn ul li a p { position: absolute; bottom: 12px; left: 0; width: 100%; font-size: 12px; }
.main-btn ul li a:hover, .main-btn ul li a.active { background: transparent; border-width: 2px; border-style: solid; }
.main-btn ul li .ir:hover, .main-btn ul li .ir.active { border-color: #3fceec; color: #3fceec; }
.main-btn ul li .er:hover, .main-btn ul li .er.active { border-color: #2ca9f0; color: #2ca9f0; }
.main-btn ul li .st:hover, .main-btn ul li .st.active { border-color: #4993f8; color: #4993f8; }
.main-btn ul li .ee:hover, .main-btn ul li .ee.active { border-color: #77d850; color: #77d850; }
.main-btn ul li .pg:hover, .main-btn ul li .pg.active { border-color: #34c255; color: #34c255; }
.main-btn ul li .wd:hover, .main-btn ul li .wd.active { border-color: #35c39c; color: #35c39c; }
.main-btn ul li .lq:hover, .main-btn ul li .lq.active { border-color: #3dc4c6; color: #3dc4c6; }

.main-shortcut { max-width: 1000px; margin: 20px auto 0; }
.main-shortcut ul { margin-right: -10px; margin-left: -10px; font-size: 0; }
.main-shortcut ul li { display: inline-block; margin: 0 10px; background: #fff3f0; border-radius: 50%; }
.main-shortcut ul li a { display: block; overflow: hidden; position: relative; width: 235px; height: 235px; padding: 28px 20px 20px; border-radius: 50%; color: #333; font-size: 32px; text-align: center; line-height: 1.2; }
.main-shortcut ul li a:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: 100% 100%; opacity: 0.5; content: ''; }
.main-shortcut ul .shortcut01 a:before { background-image: url(/img/btn_shortcut01.png); }
.main-shortcut ul .shortcut02 a:before { background-image: url(/img/btn_shortcut02.png); }
.main-shortcut ul .shortcut03 a:before { background-image: url(/img/btn_shortcut03.png); }
.main-shortcut ul .shortcut04 a:before { background-image: url(/img/btn_shortcut04.png); }
.main-shortcut ul li a span { font-size: 16px; }
.main-shortcut ul li a:hover { color: #f85024; }
.main-shortcut ul li a:hover:before { opacity: 1; }

.main-banner { position: relative; margin-top: 20px; background-image: url(/img/img_banner.jpg); background-repeat: no-repeat; background-position: 50% 50%; }
.main-banner .banner { position: relative; z-index: 0; max-width: 1000px; height: 500px; margin: 0 auto; padding: 40px 0; }
.main-banner .banner h3 { font-size: 32px; font-weight: 400; line-height: 40px; }
.main-banner .banner h3 strong { color: #f85024; font-size: 40px; font-weight: 500; }
.main-banner .banner ul { display: inline-block; width: 800px; margin-top: 40px; font-size: 18px; line-height: 24px; letter-spacing: -1px; }
.main-banner .banner ul li { display: block; float: left; position: relative; width: 340px; padding-left: 40px; }
.main-banner .banner ul li span { position: absolute; top: 0; left: 0; color: #f85024; font-size: 40px; line-height: 48px; }
.main-banner .banner ul li:nth-child(2n) { margin-top: 32px; }
.main-banner .img-bg { position: absolute; top: 0; left: 50%; z-index: -1; width: 50%; height: 100%; }
.main-banner .img-bg.right { background: #f2f3f3; }
.main-banner .img-bg.left { background: #fff; transform: translateX(-100%); -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); }

.main-cur { background: #bad4ef; }
.main-cur .cur { max-width: 1000px; margin: 0 auto; padding: 40px 0; font-size: 0; text-align: center; }
.main-cur .cur h3 { margin-bottom: 40px; }
.main-cur .cur h3 img { display: block; margin: 0 auto; }
.main-cur .cur .wrap-book { display: inline-block; font-size: 0; }
.main-cur .cur .book { display: inline-block; margin-left: 10px; vertical-align: top; }
.main-cur .cur .book:first-child { margin-left: 0; }
.main-cur .cur .book-img { display: table-cell; height: 251px; vertical-align: bottom; }
.main-cur .cur .book-img img { box-shadow: 2px 2px 8px rgba(0,0,0,0.4); transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s; }
.main-cur .cur .book-title { text-align: left; letter-spacing: -0.5px; }
.main-cur .cur .book-title h4 { margin: 12px 0 4px; font-size: 20px; }
.main-cur .cur .book-title p { font-size: 14px; line-height: 20px; }
.main-cur .cur .book a:hover img { box-shadow: 2px 2px 16px rgba(0,0,0,0.6); }

.main-movie { max-width: 1000px; margin: 20px auto; }
.main-movie .wrap-movie { margin-right: -10px; margin-left: -10px; font-size: 0; }
.main-movie .movie { display: inline-block; width: 33.333333%; padding: 0 10px; }
.main-movie .movie video { background: #ddd; }

.main-bottom { background: #212932; height:320px}
.main-bottom .wrapper { max-width: 1000px; margin: 0 auto; padding: 20px 0; font-size: 0; }
.main-bottom .box { display: inline-block; width: 320px; height: 253px; margin-left: 20px; padding: 16px; border: 1px solid #555; vertical-align: top; }
.main-bottom .box:first-child { margin-left: 0; }
.main-bottom .box-title { position: relative; margin-bottom: 28px; padding-right: 24px; }
.main-bottom .box-title h4 { overflow: hidden; width: 100%; color: #fff; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
.main-bottom .box-title .btn-go { position: absolute; top: 0; right: 0; width: 24px; height: 24px; }
.main-bottom .box-title .btn-go span { position: absolute; top: 50%; left: 50%; background: #fff; }
.main-bottom .box-title .btn-go .line1 { width: 16px; height: 2px; margin-top: -1px; margin-left: -8px; }
.main-bottom .box-title .btn-go .line2 { width: 2px; height: 16px; margin-top: -8px; margin-left: -1px; }
.main-bottom .board { font-size: 16px; line-height: 20px; }
.main-bottom .board li { position: relative; margin-top: 16px; padding-right: 56px; }
.main-bottom .board li a { display: block; overflow: hidden; width: 100%; color: #fff; text-overflow: ellipsis; white-space: nowrap; opacity: 0.6; }
.main-bottom .board li a:hover { opacity: 1; }
.main-bottom .board li span { position: absolute; top: 0; right: 0; color: #afafaf; font-size: 14px; }
.main-bottom .contact { padding-left: 68px; background: url(/img/img_contact.png) no-repeat 0 0; }
.main-bottom .contact ul { margin-top: 16px; }
.main-bottom .contact ul li { margin-top: 10px; color: #fff; font-size: 16px; }
.main-bottom .contact ul li strong { font-size: 24px; line-height: 48px; }
.main-bottom .contact ul li span { display: inline-block; width: 48px; }

.container { max-width: 1000px; margin: 0 auto; }
.container:after { display: block; clear: both; content: ''; }
.subnav { float: left; position: relative; z-index: 1; width: 216px; margin-top: -52px; border-left: 1px solid #eee; border-right: 1px solid #eee; }
.subnav .subnav-header { display: table; width: 216px; height: 160px; margin: 0 -1px; padding: 16px; background: #f85024; }
.subnav .subnav-header h2 { display: table-cell; color: #fff; font-size: 28px; font-weight: 500; line-height: 32px; letter-spacing: -1px; vertical-align: bottom; }
.subnav ul li { margin-right: -1px; border-bottom: 1px solid #eee; }
.subnav ul li a { display: block; position: relative; padding: 14px 24px 14px 16px; padding-right: 24px; padding-left: 16px; color: #888; font-size: 20px; line-height: 28px; }
.subnav ul li a:after { position: absolute; top: 50%; right: 16px; width: 12px; height: 12px; margin-top: -6px; border: 2px solid transparent; border-bottom: 0; border-left: 0; content: ''; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); }
.subnav ul li a:hover:after { border-color: #888; }
.subnav ul li.active { border-right: 1px solid #fff; }
.subnav ul li.active a { color: #f85024; font-weight: 500; pointer-events: none; cursor: default; }
.subnav ul li.active a:after { border-color: #f85024; }
.subnav + .content { width: 784px; padding-left: 40px; }

.path { padding-top: 20px; font-size: 0; text-align: right; }
.path ul li { display: inline-block; position: relative; padding-left: 20px; font-size: 14px; }
.path ul li:before { position: absolute; top: 50%; left: 6px; margin-top: -3px; width: 6px; height: 6px; border: 1px solid #b9b9b9; border-bottom: 0; border-left: 0; content: ''; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); }
.path ul li, .path ul li a { color: #444; }
.path ul li:first-child { padding-left: 0; }
.path ul li:first-child:before { content: none; }

.content { float: left; position: relative; z-index: 0; width: 100%; padding-bottom: 120px; }
.content-header { height: 108px; border-bottom: 1px solid #eee; }
.content-header h3 { margin-top: 12px; font-size: 38px; font-weight: 500; letter-spacing: -1px; }
.content-body { padding-top: 10px; padding-bottom: 100px; }
.content-body:after { display: block; clear: both; content: ''; }
.content-body { color: #444; line-height: 180%; }
.content-body p { color: #444; font-size: 16px; line-height: 28px; }
/*.content-body strong { color: #f85024; font-weight: 400; }*/
.content-body b { color: #333; font-weight: 500; }
.content-body .list li { position: relative; margin-top: 8px; padding-left: 20px; line-height: 1.4; font-size: 20px;}
.content-body .list li:before { position: absolute; top: 12px; left: 0; width: 8px; height: 8px; margin-top: -2px; content: ''; }
.content-body .list.angle li:before { border: 2px solid #888; border-bottom: 0; border-left: 0; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); }
.content-body .list.blue li:before { border: 2px solid #0c62e3; border-radius: 50%; }
.content-body video { margin: 20px 0; }

.col-2 { width: 16.666666%; }
.col-3 { width: 16.666666%; }
.col-4 { width: 33.333333%; }
.col-6 { width: 50%; }
.col-12 { width: 100%; }
.cont-tit { margin: 40px 0 32px; padding-top: 36px; border-top: 1px solid #eee; color: #0c62e3; font-size: 28px; font-weight: 500; line-height: 40px; }
.cont-tit:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.cont-img { margin: 16px -8px; }
.cont-img:after { display: block; clear: both; content: ''; }
.cont-img .img-item { float: left; padding-right: 8px; padding-left: 8px; }
.cont-img .img-item div { position: relative; width: 100%; border: 0px solid #eee; }
.cont-img .img-item img { display: block;margin-left:auto;margin-right:auto }
.item-header { margin: 0 0 20px; color: #333; font-size: 24px; font-weight: 500; }

.cont-book { margin: 36px -10px 0; }
.cont-book:after { display: block; clear: both; content: ''; }
.cont-book .book-img { float: left; padding-right: 10px; padding-left: 10px; }
.cont-book .book-img .book-item { margin: -8px; font-size: 0; }
.cont-book .book-img .book-item img { display: inline-block; margin: 8px; /*box-shadow: 2px 2px 8px rgba(0,0,0,0.4);*/ }

.cont-diagram { margin: 36px 0; font-size: 0; text-align: center; }
.cont-diagram .diagram-item { display: inline-block; position: relative; vertical-align: top; }
.cont-diagram .diagram-item img { display: block; margin: 0 auto; }
.cont-diagram .diagram-tit { padding: 16px 0; color: #333; font-size: 24px; font-weight: 500; }
.cont-diagram p { font-size: 20px; }
.cont-diagram .diagram-arrow { position: absolute; top: 80px; left: 0; width: 80px; height: 4px; margin-top: -2px; margin-left: -40px; background: #888; }
.cont-diagram .diagram-arrow:after { position: absolute; top: 50%; right: -2px; width: 0; height: 0; margin-top: -8px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 8px solid #888; content: ''; }
.cont-diagram .diagram-add { position: absolute; top: 80px; left: 0; width: 80px; height: 80px; margin-top: -40px; margin-left: -40px; }
.cont-diagram .diagram-add:before { position: absolute; top: 50%; left: 50%; width: 80px; height: 4px; margin-top: -2px; margin-left: -40px; background: #888; content: ''; }
.cont-diagram .diagram-add:after { position: absolute; top: 50%; left: 50%; width: 4px; height: 80px; margin-top: -40px; margin-left: -2px; background: #888; content: ''; }
.cont-diagram .diagram-vs { position: absolute; top: 80px; left: 0; width: 60px; height: 40px; margin-top: -20px; margin-left: -30px; }
.cont-diagram .diagram-vs:before { display: block; color: #888; font-size: 40px; font-weight: 500; line-height: 40px; content: 'VS'; }

.member-step { margin-bottom: 60px; font-size: 0; }
.member-step ul { margin-right: -16px; margin-left: -16px; }
.member-step ul li { display: inline-block; vertical-align: middle; }
.member-step ul .step { margin: 0 16px; }
.member-step ul .step span { display: inline-block; width: 60px; height: 60px; border-radius: 50%; background: #888; color: #fff; font-size: 32px; text-align: center; line-height: 60px; }
.member-step ul .step h4 { display: inline-block; padding-left: 12px; color: #444; font-size: 32px; font-weight: 400; }
.member-step ul .line { width: 168px; height: 1px; background: #888; }
.member-step ul .step.active span { background: #f85024; }
.member-step ul .step.active h4 { color: #f85024; }
.member-step ul .step.done span { position: relative; background: #f85024; text-indent: -999999px; }
.member-step ul .step.done span:before { position: absolute; top: 50%; left: 50%; width: 16px; height: 24px; margin-top: -14px; margin-left: -8px; border: 3px solid #fff; border-top: 0; border-left: 0; content: ''; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); }
.member-tit { margin-top: 60px; margin-bottom: 24px; font-size: 28px; }
.member-tit:first-child { margin-top: 0; }
.member-textarea { overflow-y: scroll; width: 100%; height: 260px; padding: 16px; border: 1px solid #eee; color: #555; font-size: 16px; line-height: 1.4; }
.member-textarea h3 { margin-top: 20px; margin-bottom: 12px; color: #444; font-size: 20px; font-weight: 500; }
.member-textarea h4 { margin-top: 12px; margin-bottom: 8px; color: #444; font-weight: 500; }
.member-textarea ol ol { padding-left: 16px; }
.member-textarea > ol > li { list-style-type: decimal; list-style-position: inside; }
.member-textarea > ol > li > ol > li { list-style-type: hangul-consonant; list-style-position: inside; }
.member-textarea > ul > li { list-style-type: circle; list-style-position: inside; }
.wrap-check { margin-top: 12px; font-size: 16px; margin-bottom: 50px;}
.wrap-check .check-link { color: #0c62e3; text-decoration: underline; }
.wrap-radio label { margin-right: 36px; }

.form { min-height: 40px; padding: 8px 12px; border: 1px solid #ddd; border-radius: 0; background: #fff; font-size: 16px; line-height: 16px; }
.form.xs { width: 60px; }
.form.sm { width: 120px; }
.form.md { width: 200px; }
.form.xl { width: 100%; }
select.form { height: 40px; }
textarea.form { resize: none; height: 160px; }
.wrap-search { margin-bottom: 12px; }
.wrap-search .search { display: inline-block; }
.wrap-search .search select { float: left; width: 100px; height: 40px; background: #fff; border: 1px solid #ddd; }
.wrap-search .search input { float: left; width: 160px; height: 40px; background: #fff; margin: 0 8px; padding: 8px 12px; border: 1px solid #ddd; line-height: 16px; }
.board-write { margin-bottom: 12px; }
.board-btn { margin-top: 12px; }
.board-left { float: left; }
.board-right { float: right; }

.table { width: 100%; margin-top: 12px; border-top: 4px solid #888; border-bottom: 1px solid #888; color: #444; font-size: 16px; line-height: 1.4; }
.table tr { border-top: 1px solid #cecece; }
.table tr td { height: 60px; padding: 8px; vertical-align: middle; }
.table tr td .form { vertical-align: middle; }
.table tr td .form-name { margin-left: 8px; }
.table tr td .form-txt { display: block; margin-top: 4px; line-height: 24px; }
.table-board { text-align: center; }
.table-board th { height: 48px; background: #fdfbfa; vertical-align: middle; }
.table-board tr:hover, .table-board tr.active { background: #eee; }
.table-board tr td { height: 48px; }
.table-board tr td a { color: #444; }
.table-board .table-tit { text-align: left; }
.table-board .board div { padding: 8px; font-size: 20px; text-align: left; line-height: 32px; white-space: pre-line; word-break: break-all; }
.table-board .board:hover { background: none; }
.member-table tr .th { width: 163px; padding-right: 12px; padding-left: 12px; background: #fdfbfa; color: #888; font-size: 20px; }
.member-table img.letter { width: auto; height: 54px; vertical-align: middle; }

.pagination { margin-top: 20px; text-align: center; font-size: 0; }
.pagination ul li { display: inline-block; width: 36px; height: 36px; margin: 0 4px; border-radius: 4px; background: transparent; font-size: 16px; vertical-align: top; line-height: 35px; }
.pagination ul li a { display: block; width: 36px; height: 36px; border-radius: 4px; background: #eee; color: #333; }
.pagination ul li.active { background: #f85024; color: #fff; }
.pagination ul .num a:hover { background: #444; color: #fff; }
.pagination ul .arrow { position: relative; }
.pagination ul .arrow a { background: transparent; }
.pagination ul .arrow a:hover span { border-color: #333; }
.pagination ul .arrow span { position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; margin-top: -4px; border: 2px solid #888; }
.pagination ul .arrow.prev span { margin-left: -2px; border-top: 0; border-right: 0; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); }
.pagination ul .arrow.next span { margin-left: -6px; border-bottom: 0; border-left: 0; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); }

.wrap-benefit { margin: 36px 0; }
.benefit { margin-top: 36px; }
.benefit:first-child { margin-top: 0; }
.benefit:after { display: block; clear: both; content: ''; }
.benefit .bene-img { float: left; padding-right: 24px; }
.benefit .bene-txt { float: left; }
.benefit .bene-txt .bene-tit { margin-bottom: 16px; font-size: 24px; font-weight: 500; }

.panel-group { border-top: 4px solid #f85024; border-bottom: 1px solid #f85024; }
.panel { border-top: 1px solid #cecece; }
.panel:first-child { border-top: 0; }
.panel .panel-header { position: relative; padding: 16px 64px 16px 20px; font-size: 20px; line-height: 28px; cursor: pointer; }
.panel .panel-header:after { position: absolute; top: 50%; right: 24px; width: 16px; height: 16px; margin-top: -12px; border: 2px solid #cecece; border-top: 0; border-left: 0; content: ''; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); }
.panel .panel-header:hover { background: #fdfbfa; }
.panel .panel-body { height: 0; overflow: hidden; }
.panel .panel-body .panel-cont { padding: 36px; border-top: 1px solid #eee; background: #fdfbfa; }
.panel.active .panel-header { color: #f85024; }
.panel.active .panel-header:after { margin-top: -4px; border-color: #f85024; transform: rotate(-135deg); -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); }
.panel.active .panel-header:hover { background: #fff; }
.panel.active .panel-body { height: auto; }
.panel-btn { margin-bottom: 4px; }
.panel-btn:after { display: block; clear: both; content: ''; }
.panel-btn ul { margin: -4px; }
.panel-btn ul li { float: left; margin: 4px; padding: 0 24px; border-radius: 8px; background: #eee; color: #444; font-size: 20px; line-height: 48px; cursor: pointer; }
.panel-btn ul li:hover { color: #f85024; }
.panel-btn ul li.active { background: #f85024; color: #fff; }

.wrap-map { margin-bottom: 40px; }
.wrap-map:after { display: block; clear: both; content: ''; }
.btn-map-tit { margin-top: 24px; }
.btn-map { width: 100%; }
.btn-map ul { margin: -2px; }
.btn-map ul li { float: left; width: 33.333333%; padding: 2px; }
.btn-map ul li a { display: block; background: #444; color: #fff; line-height: 36px; text-align: center; }
.btn-map ul li a:hover, .btn-map ul li a.active { background: #f85024; }
#canvas { float: left; position: relative; width: 320px; height: 400px; margin-right: 40px; }
#canvas h2{ margin: 0; padding: 0; font-size: 14px; }
#south { position: absolute; top: 0px; left: 0; width: 320px; height: 400px; }
#seoul, #gygg, #incheon, #gangwon, #chungbuk, #chungnam, #daejeon, #sejong, #jeonbuk, #jeonnam, #gwangju, #gyeongbuk, #gyeongnam, #daegu, #busan, #ulsan, #jeju { display: none; position: absolute; height: 24px; padding: 0 4px; background-color: #444; color: #fff; text-align: center; line-height: 22px; }
#seoul{ left:80px; top:75px; }
#gygg{ left:80px; top:45px; }
#incheon{ left:60px; top:75px; }
#gangwon{ left:150px; top:45px; }
#chungbuk{ left:120px; top:145px; }
#chungnam{ left:60px; top:165px; }
#daejeon{ left:80px; top:165px; }
#sejong{ left:70px; top:145px; }
#jeonbuk{ left:60px; top:205px; }
#jeonnam{ left:60px; top:260px; }
#gwangju{ left: 60px; top:260px; }
#gyeongbuk{ left:150px; top:165px; }
#gyeongnam{ left:130px; top:240px; }
#daegu{ left:170px; top:210px; }
#busan{ left:190px; top:250px; }
#ulsan{ left:200px; top:225px; }
#jeju{ left:80px; top:340px; }
#map_right_wrapper{float:left; margin-left:0px; width:340px;}
.map_right_title1 {margin:20px 0 7px 0;}
.map_right_title2 {margin:30px 0 7px 0;}

.wrap-depth { max-width: 1000px; margin: 36px auto 56px ; }
.depth-path { margin-bottom: 36px; font-size: 0; }
.depth-path ul li { display: inline-block; position: relative; padding-left: 28px; color: #444; font-size: 18px; line-height: 24px; }
.depth-path ul li:before { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin-top: -6px; margin-left: 6px; border: 2px solid #888; border-bottom: 0; border-left: 0; content: ''; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); }
.depth-path ul li:first-child { padding-left: 0; }
.depth-path ul li:first-child:before { display: none; }
.depth-path ul li a { display: block; color: #444; }
.depth-path ul li a:hover { color: #f85024; }
.depth:after { display: block; clear: both; content: ''; }
.depth ul { margin: -4px; }
.depth ul li { float: left; padding: 4px; }
.depth ul li a { display: table; width: 100%; height: 80px; border-radius: 8px; background: #94bce6; color: #fff; text-align: center; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12); transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s; padding: 2px;}
.depth ul li a:hover { background: #b5cfea; box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18), 0 4px 15px 0 rgba(0,0,0,0.15); }
.depth ul li.block a { height: auto; min-height: 48px; padding: 0 16px; text-align: left; }
.depth ul li a p { display: table-cell; font-size: 20px; font-weight: 500; line-height: 24px; vertical-align: middle; word-break: keep-all;}

.note .note-top { width: 100%; height: 72px; background: url(/img/note_top.png) no-repeat 0 0; }
.note .note-bottom { width: 100%; height: 60px; background: url(/img/note_bottom.png) no-repeat 0 0; }
.note .note-middle { position: relative; }
.note .note-middle .note-left { position: absolute; top: 0; left: 0; width: 36px; height: 100%; background: url(/img/note_left.png) repeat-y; }
.note .note-middle .note-right { position: absolute; top: 0; right: 0; width: 36px; height: 100%; background: url(/img/note_right.png) repeat-y; }
.note .note-middle { padding: 0 60px; background: #fffad1; }
.note .note-header { padding: 40px 0; border-bottom: 4px solid #e2ddba; background: url(/img/logo.png) no-repeat 100% 20px; }
.note .note-header h3 { color: #6e3f22; font-size: 36px; font-weight: 400; line-height: 40px; }
.note .note-body { position: relative; padding: 48px 0; }
.note .wrap-check { margin-top: 60px; }
.note .wrap-check:first-child { margin-top: 0; }
.note .wrap-check .form { margin-right: 20px; border-color: #888; background: transparent; }

.note .wrap_check { margin: 0 265px 0 265px; text-align: center; vertical-align: top; width:350px; }
.note .wrap_check .tts { width:300px; }
.player_interval { padding: 4px; margin-left: 4px; }
.tts_speed { padding: 4px; margin-left: 4px; }

.time { position: absolute; top: 16px; right: 0; font-size: 20px; }
.word .word-tit { color: #444; font-size: 48px; }
.word .word-eng { color: #000; font-size: 48px; font-weight: 500; }
.word .word-kor { margin-top: 12px; color: #f85024; font-size: 36px; }
.word .example { margin-top: 48px; }
.word .example .ex-eng { color: #444; font-size: 32px; }
.word .example .ex-kor { margin-top: 12px; color: #888; font-size: 28px; }
.word .word-choice { margin-top: 48px; position:relative}

/*
.word .word-choice li { margin-top: 16px; color: #444; font-size: 28px; list-style-type: decimal; list-style-position: inside; }
*/
.word .word-choice li { position:relative; margin-top: 16px; color: #444; font-size: 24px; list-style-position: inside; }
.word .word-choice li button { padding: 0; color: #444; line-height:36px; text-align:left; }
.word .word-choice li button:hover { color: #f85024; }
.word .wrap-text { position: relative; }
.word .text-tit { margin-top: 48px; margin-bottom: 8px; color: #444; font-size: 28px; }
.word .text-sub-tit { margin-top: 48px; font-size: 28px; }
.word .text-sub-tit h3 { color: #f85024; }
.word .text-sub-tit span { display: block; margin-top: 4px; padding-left: 28px; font-size: 20px; }
.word .row { margin-top: 48px; }
.word .row:after { display: block; clear: both; content: ''; }
.word .text-txt { float: left; padding-left: 20px; }
.word .text-txt:first-child { padding-left: 0; }
.word .text-txt .text-eng { color: #000; font-size: 36px; }
.word .text-txt .text-kor { padding-top: 8px; color: #555; font-size: 20px; }
.word .word-movie { position: absolute; top: 0; right: 50%; margin-right: -440px; }
.word .word-audio { margin-top: 48px; }
.word .wrap-quiz { margin-top: 48px; }
.word .wrap-quiz > ol > li { margin-top: 48px; }
.wrap-quiz .quiz-tit { margin-bottom: 16px; color: #444; font-size: 28px; }
.wrap-quiz .quiz-btn { padding-left: 28px; }
.wrap-quiz .quiz-choice { margin-top: 20px; padding-left: 28px; }
.wrap-quiz .quiz-choice li { margin-top: 8px; font-size: 28px; }
.wrap-quiz .quiz-choice li input, .wrap-quiz .quiz-choice li label { vertical-align: middle; }
.wrap-quiz img { margin-left: 30px; }

/* �붿긽�곸뼱 媛뺤쓽��*/
.vchat-btn { display: table; width: 1000px; margin: 20px auto 0; }
.vchat-btn ul { margin-right: -10px; margin-left: -10px; font-size: 0; }
.vchat-btn ul li { display: table; float: left; width: 300px; min-height:200px;padding: 0 10px; margin-bottom:20px;}
.vchat-btn ul li:first-child, .vchat-btn ul li:last-child { width: 300px; }
.vchat-btn ul li a { display: table-cell; position: relative; width: 100%; height: 100px; padding-top:10px;padding-bottom: 12px; border-radius: 16px; /*color: #fff;*/ text-align: center; vertical-align: top; }
.vchat-btn ul li .er { background: #2ca9f0; }
.vchat-btn ul li a h2 { padding-bottom: 8px; font-size: 24px; font-weight: 500; line-height: 28px; letter-spacing: -1px; }
.vchat-btn ul li a h2 small { font-size: 16px; letter-spacing: -2px; }
.vchat-btn ul li a p { /*position: absolute; bottom: 12px; left: 0;*/ width: 100%; font-size: 12px; }
.vchat-btn ul li a:hover, .vchat-btn ul li a.active { background: transparent; border-width: 2px; border-style: solid; }

/*
audio::-internal-media-controls-download-button {
 display:none;
}

audio::-webkit-media-controls-enclosure {
     overflow:hidden;
}

audio::-webkit-media-controls-panel {
     width: calc(100% + 30px); /* Adjust as needed /
}


video::-internal-media-controls-download-button {
 display:none;
}

video::-webkit-media-controls-enclosure {
     overflow:hidden;
}

video::-webkit-media-controls-panel {
     width: calc(100% + 30px); /* Adjust as needed /
}


audio::-webkit-media-controls {
    overflow: hidden !important
}
audio::-webkit-media-controls-enclosure {
    width: calc(100% + 30px);
    margin-left: auto;
}
*/