@charset "utf-8"; /* font */

@font-face { font-family: 'noto'; font-style: normal; font-weight: 400; src: local('Noto Sans Regular'), local('NotoSans-Regular'); src: url(./font/notokr-regular.eot); src: url(./font/notokr-regular.eot?#iefix) format('embedded-opentype'),
 url(./font/notokr-regular.woff2) format('woff2'),
 url(./font/notokr-regular.woff) format('woff'),
 url(./font/notokr-regular.ttf) format('truetype'); font-display: swap; } 

@font-face { font-family: 'noto'; font-style: normal; font-weight: 600; src: local('Noto Sans bold'), local('notokr-bold'); src: url(./font/notokr-bold.eot); src: url(./font/notokr-bold.eot?#iefix) format('embedded-opentype'),
 url(./font/notokr-bold.woff2) format('woff2'),
 url(./font/notokr-bold.woff) format('woff'),
 url(./font/notokr-bold.ttf) format('truetype'); font-display: swap; } 

.alt_hidden{position: absolute;width:1px;height:1px;margin:-1px;clip:rect(0,0,0,0); overflow: hidden;}
/* reset */
[lang="ko"] { word-break:keep-all } 
body { word-wrap:break-word; background:#fff; } 
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select { margin:0; padding:0 } 
body,input,textarea,select,button,table { font-family:'noto'; font-weight: 400; font-size:14px; line-height:1.2; letter-spacing : -0.1rem; color:#333; vertical-align:middle } 
input[type='radio']/*,input[type='checkbox']*/,button { border:0; border-radius:0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } 
label,button { cursor:pointer } 
textarea { resize:none; border: 1px solid #aaa } 
button { background:none; border:0 } 
img,fieldset { border:0 } 
ul,ol { list-style:none } 
em,address { font-style:normal } 
a { text-decoration:none; color:#333 } 
a:hover,a:active,a:focus { text-decoration:none } 
.hidden { position:absolute; left:-10000px; top:auto; width:1px; height:1px; font-size:0; line-height:0; overflow:hidden } 
/* skip - navigation */
#skip-nav a { position:absolute; top:-500px } 
#skip-nav a:focus,
#skip-nav a:active,
#skip-nav a:hover { top:1px; z-index:99999; display:block; width:100%; height:40px; background-color:#019a99; line-height:40px; font-weight:700; color:#fff; text-align:center } 

/* layout */
#header { padding-top: 40px; position:relative; z-index:99; background: #fff; border-bottom: 1px solid #e7e7e7; } 
#container { display:block; position:relative; } 
#footer { position:relative; z-index:10 } 
.container { width:1160px; margin:0 auto; padding-top:20px } 
.container-full { padding-top:40px } 
.ie7 .container { zoom:1 } 
.container:after { display:block; content:''; clear:both } 
.container .content { width: 100%; float:none; } 
.container .content_right { width: 780px; margin-left: 270px; } 
.container .nav-left { display:none; } 
.inner { width:1160px; margin:0 auto } 
#wrap .bg { display: none; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.3); z-index: 3; } 

/* align */
.p-r { position:relative } 
.f-r { float:right } 
.f-l { float:left } 
.ie7 .after { zoom:1 } 
.after:after { display:block; content:''; clear:both } 
/* text */
.t-l { text-align:left !important } 
.t-r { text-align:right !important } 
.t-c { text-align:center !important } 
.tc-brand { color:#019a99 !important } 
.tc-gray { color:#888 } 
.tc-gray-light { color:#9b9d9d } 
.txt-link { color:#019a99; text-decoration:underline } 
.tx-under { text-decoration:underline } 
.fs12 { font-size:12px } 
.fs13 { font-size:13px } 
.fs15 { font-size:15px } 
.fs16 { font-size:16px } 
.fs18 { font-size:18px } 
.fs20 { font-size:20px } 
.fs24 { font-size:24px } 
.ellipsis_line { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis } 
.lh20 { line-height:20px } 
.lh22 { line-height:22px } 

/* P-M */
.mt5 { margin-top:5px !important } 
.mt10 { margin-top:10px !important } 
.mt15 { margin-top:15px !important } 
.mt20 { margin-top:20px !important } 
.mt30 { margin-top:30px !important } 
.mt50 { margin-top:50px !important } 
.mt80 { margin-top:80px !important } 
.mb5 { margin-bottom:5px !important } 
.mb10 { margin-bottom:10px !important } 
.mb15 { margin-bottom:15px !important } 
.mb20 { margin-bottom:20px !important } 
.mb30 { margin-bottom:30px !important } 
.mb60 { margin-bottom:60px !important } 
.mr30 { margin-right:30px !important } 
.ml5 { margin-left:5px !important } 
.ml10 { margin-left:10px !important } 
.ml20 { margin-left:20px !important } 
.mr5 { margin-right:5px !important } 
.mr10 { margin-right:10px !important } 
.mr20 { margin-right:20px !important } 

/* header */
.header .link-box { display: flex; justify-content: end; align-items: center; width: 400PX; height: 40px; position: absolute; right: 0; } 
.header .link-box a { display:block; margin-right: 5px; line-height: normal; font-size:13px; padding: 3px 10px; font-weight: 700; text-align: center; border-radius: 5px; border: 1px solid #ddd; color: #000; background: #fff; } 
.header .link-box a.black { background: #333; color: #fff; border: 1px solid #000; } 
.header .link-box a.user_name { border: none; color:#019a99; font-size: 14px; margin-right: -2px; letter-spacing: 0.01rem; background: none; } 
.header .link-box a.faq { border: none; position: relative; margin-right: 0; background: none; } 
.header .link-box a.faq::after, .link-box a.faq::before { content: ''; height: 18px; width: 1px; background: #ddd; position: absolute; top: 3px; left: 2px; display: block; } 
.header .link-box a.faq::before { left: 65px; } 
.link-box a.faq::before { left: 60px !important; } 

/* nav */
.top-section { position:absolute; top:0; left:0; width:100%; height:40px; background:#f5f5f5; text-align:right; } 
.nav-section { position: relative; height: auto; padding: 20px 0; border-bottom: none; display: flex; justify-content: flex-start; align-items: flex-end; } 
.nav-section .inner { position:relative; z-index:5; } 
.nav-section h1 { position: relative; top:0; } 
/* .nav-section h1 a { display: block; font-size: 0; background: url('https://cdn.hackershrd.com/img_hrd/main/re_210929/logo_black.png') 0 0 no-repeat; width: 165px; height: 37px; background-size: 100%; } */

.nav-box { width: 100%; height: auto; margin-left: 20px; display: flex; justify-content: center; align-items: center; position: relative; } 
.nav-box > li { position:relative; text-align: center; margin-left: auto; } 
.nav-box > li.menu { cursor: pointer; } 
.nav-box > li.evt-nav-lst { display: flex; flex-wrap: wrap; justify-content: space-evenly; } 
.nav-box > li.mnu5 { text-align: right; } 
.nav-box > li.mnu5 .nav-main-lst { width: 170px; } 
.nav-box > li > a { display: block; text-align:center; font-size:17px; color:#333; font-weight:700; letter-spacing:-1px; } 
.nav-box > li > a.edu_info { padding: 0 5px; border-left: 1px solid #e7e7e7; border-right: 1px solid #e7e7e7 } 

.ie7 .nav-main-lst { zoom:1 } 
.nav-main-lst { display: none; width: 200px; padding-top: 5px; position: absolute; top: 45px; background: #fff; border: 1px solid #c4c4c4; } 
.nav-main-lst li { width: auto; height: 50px; display: flex; align-items: center; } 
.nav-main-lst li.mouseleave_bridge { width: 100%; height: 25px; position: absolute; top: -25px; left: 0; } 
.nav-main-lst li.mouseleave_bridge:hover { background: none; } 
.nav-main-lst li:hover { background: #f0f0f0; } 
.nav-main-lst > li.on { background: #f0f0f0; } 
.nav-main-lst > li > a { padding: 15px; text-align: left; display: flex!important; align-items: center; font-size: 14px !important; font-weight: 700; color: #333; letter-spacing: -1px; } 
.nav-main-lst a p { display: inline-block; margin-left: 10px; } 
.nav-main-lst img:last-child { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); } 
.nav-sub-lst { display: none; width: 180px; padding-top: 5px; position:absolute; top: -6px; left: 200px; z-index: 5; border: 1px solid #c4c4c4; background: #fff; } 
.nav-sub-lst li a { height: auto; line-height: normal; padding: 15px; text-align: left; font-size: 14px !important; font-weight: 700; color: #333; letter-spacing: -1px; } 
.nav-main-lst li.on .nav-sub-lst li a { color: #333; } 
.nav-main-lst li.on > a > p,
.nav-main-lst li a:hover p,
.nav-sub-lst li a:hover p { color: #29a8a5; border-bottom: 1px solid #29a8a5; } 

.evt-nav-lst a { padding: 5px 0; transition: all .5s; } 
.evt-nav-lst a:hover { color: #2ba8a6; } 
.evt-nav-lst a.hgh { padding: 5px 0 5px 29px; position: relative; } 
.evt-nav-lst a.hgh::before { content: ''; width: 22px; height: 22px; left: 0; top:50.5%; transform: translateY(-50%); background: url('//cdn.hackershrd.com/hrd/images/common/evt_menu_icon.png')0 0 no-repeat; background-size: 100%; position: absolute; } 

/* footer */
.footer { padding:40px 0 38px; margin-top:80px; background:#f5f5f5; border-top:1px solid #ccc } 
.footer .logo-footer { position:absolute; top:0; left:0 } 
.footer .lg-info { position:absolute; top:0; right:0; text-align:center; } 
.footer .lg-info img { display:block; } 
.footer .lg-info a { display: inline-block; padding:4px 18.5px; border:1px solid #bbb; color: #656565; font-size:12px; margin:8px; } 
.footer .site-info { margin-left:188px; letter-spacing:0; font-size:13px } 
.footer .address { margin-top:20px; line-height:22px } 
.footer .address a { color:#000; font-weight:bold; } 


/* title */
.tit-box-h3 { position: static; padding-bottom:14px; margin-bottom:30px; border-bottom: none; } 
.tit-h3 { margin: 20px 0 10px; font-size: 26px; color:#333 } 
.sub-depth { position:static; margin: 5px 0; } 
.sub-depth span { font-size:14px; color:#888 } 
.sub-depth strong { font-size:14px } 
.tit-box-h4 { margin-bottom:19px } 
.tit-h4 { display:inline-block; font-size:23px; color:#333 } 
.ie7 .tit-h4 { display:inline; zoom:1 } 
.tit-box-h4 .sub-txt { display:inline-block; margin-left:8px; vertical-align:text-bottom; font-size:13px } 
.tit-box-h4 .bor-l { width: 4px; height: 23px; background: #019a99; display: inline-block; border-radius: 30px; margin-right: 10px; } 
.tit-box-sub { margin-bottom:22px; font-size:25px; position: relative; } 
.tit-box-sub strong { font-weight:500 } 
.tit-box-sub .share_btn { position: absolute; top:-10px; right: 0; display: block; width: 60px; height: 60px; } 
.tit-box-sub .share_btn img { width: 100%; } 
.dis-f_a-c { display: flex; align-items: center; } 

/* icon - sprite */
[class^='icon-'] { display:inline-block; background:url('//cdn.hackershrd.com/img_hrd/common/sp_icon.png') no-repeat; vertical-align:middle } 
[class^='icon-'] > span { display:block; text-indent:-99999px } 
.icon-home { width:13px; height:11px; background-position:0 0 } 
.icon-refresh { width:13px; height:14px; background-position:-15px 0 } 
.icon-arr { width:5px; height:7px; margin:0 5px; background-position:-192px 0 } 
.icon-search { width:19px; height:21px; margin:0 5px; background-position:-150px 0; } 
.lec_date span:nth-of-type(2) { color: #008684; } 

/* icon - text */
[class^='txt-icon'] { display:inline-block; min-width:33px; padding-left:10px; background:url('//cdn.hackershrd.com/img_hrd/common/sp_radius.png') 0 0 } 
[class^='txt-icon'] em { display:block; height:22px; padding-right:9px; background:url('//cdn.hackershrd.com/img_hrd/common/sp_radius.png') 100% 0; font-size:12px; line-height:20px; font-weight:700; color:#fff; text-align:center; vertical-align:top } 
[class^='txt-icon-line'],[class^='txt-icon-line'] em { background-position-y:-72px; color:#019a99 } 
.txt-icon-blue,.txt-icon-blue em { background-position-y:-24px } 
.txt-icon-gray,.txt-icon-gray em { background-position-y:-48px } 
.txt-icon-line-gray,.txt-icon-line-gray em { background-position-y:-96px; color:#555 } 

/* graphic */
[class^='graphic-'] { display:inline-block; background:url('//cdn.hackershrd.com/img_hrd/common/sp_graphic_info.png') no-repeat; vertical-align:middle } 
[class^='graphic-'] > span { display:block; text-indent:-99999px } 
/* btn */
[class^='btn'] { display:inline-block; background:#019a99; border:1px solid #019a99; font-weight:700; color:#fff; text-align:center; vertical-align:middle } 
[class^='btn-l'] { min-width:84px; height:60px; padding:0 50px; font-size:16px; line-height:58px } 
[class^='btn-m'] { min-width:78px; height:40px; padding:0 26px; line-height:38px } 
[class^='btn-s'] { min-width:75px; height:30px; padding:0 10px; line-height:28px } 
[class^='btn-l-line'],
[class^='btn-m-line'],
[class^='btn-s-line'] { background:#fff; color:#019a99 } 
[class^='btn-square'] { width:90px; height:60px; padding:20px 0 0 0; line-height:20px; font-size:16px } 
.btn-square-line { height:58px; background:#fff; border:1px solid #019a99; color:#019a99 } 
.btn-s-gray,
.btn-m-gray,
.btn-l-gray { background:#bbb; border-color:#bbb } 
.btn-s-dark,
.btn-m-dark,
.btn-l-dark { background:#555; border-color:#555 } 
.btn-s-line-gray { border-color:#888; color:#888 } 

.btn-s.v2 { float: right; font-size: 18px; padding: 0; } 

.box-btn { margin-top:20px; text-align:center } 
input[class^='btn-s'],button[class^='btn-s'] { min-width:95px; height:32px; line-height:30px } 
input[class^='btn-m'],button[class^='btn-m'] { min-width:130px; height:42px; line-height:40px } 

/* input */
.input-sel { width:200px; padding:4px 5px; border:1px solid #aaa; font-size:14px; color:#333 } 
.ie7 .input-sel { padding:5px 0 } 
.input-text { height:28px; padding:0 5px; line-height:28px; border:1px solid #aaa; vertical-align:middle } 

/* input */
.input-sp { height: 20px; position: relative; display: block; } 
.input-sp input { width: 20px; height: 20px; position: absolute; top: 1px; left: 1px; background:url("//cdn.hackershrd.com/img_hrd/common/null.png") repeat 0 0; opacity:0; filter: alpha(opacity=0); appearance:none; -webkit-appearance:none; } 
.input-sp span { line-height: 18px; height: 20px; padding-left: 26px; position: absolute; top: 0; left: 0; background-image: url("//cdn.hackershrd.com/img_hrd/common/sp_input.png"); background-repeat:no-repeat; } 
.input-sp.ico { width:20px; display: inline-block; vertical-align:middle } 
.input-sp.ico span { font-size:0; padding-left:26px; } 
.input-sp input[type=radio] + span { background-position:0 0; } 
.input-sp input[type=radio]:checked + span { background-position: 0 -22px; } /* 같이 ?���? ie7/8?��?�� ?��????�� ?��먹음 */
.ie7 .input-sp.on input[type=radio] + span,
.ie8 .input-sp.on input[type=radio] + span { background-position: 0 -22px; } 
.input-sp input[type=checkbox] + span { background-position:0 -44px; } 
.input-sp input[type=checkbox]:checked + span { background-position: 0 -66px; } /* 같이 ?���? ie7/8?��?�� ?��????�� ?��먹음 */
.ie7 .input-sp.on input[type=checkbox] + span,
.ie8 .input-sp.on input[type=checkbox] + span { background-position: 0 -66px; } 

/* 서브페이지 - 배너 */
.visual2 { width: 100%; height: 235px; position: relative; left: 50%; transform: translateX(-50%); } 
.visual2 .slid__wrap { height: 235px; margin-bottom: 30px; position: relative; border-radius: 15px; } 
.visual2 .slid__wrap li { border-radius: 15px; overflow: hidden; } 
.visual2 .slid__wrap li a { height: 235px; width: 100%; margin: 0 auto; display: block; } 
.visual2 .slid__wrap li a .main_img { width: 100%; } 
.visual2 .slid__wrap li img { width: 100%; } 
.visual2 .slid__wrap .bx-wrapper .bx-viewport { height: 235px !important; } 
.visual2 .slid__wrap .bx-default-pager { top:270px; right: 440px } 
.visual2 .slid__wrap .bx-default-pager .bx-pager-item a { background: #fff; border-radius: 30px; width: 5px; height: 5px; } 
.visual2 .slid__wrap .bx-default-pager .bx-pager-item a.active { background: #ffea00; width: 20px; } 
.visual2 .pager_control { position: absolute; top: 93%; left:50%; transform: translateX(-50%); z-index:55; } 
.visual2 .pager_control a { display:none; } 
/* .visual .pager_control a.stop_btn { padding: 10px 12px } */
.visual2 .pager_control a.active { display: block; } 
.visual2 .bx-wrapper .bx-prev { background:url("https://cdn.hackershrd.com/hrd/images/common/arrow/navi_left.png") no-repeat center;; left: 50%; top: 112%; margin-left: -58px; width: 35px; height: 32px; } 
.visual2 .bx-wrapper .bx-prev:hover { background-position: center; } 
.visual2 .bx-wrapper .bx-next { background:url("https://cdn.hackershrd.com/hrd/images/common/arrow/navi_right.png") no-repeat center; right: 50%; top: 112%; margin-right: -58px; width: 35px; height: 32px; } 
.visual2 .bx-wrapper .bx-next:hover { background-position: center; } 

/* layer_popup */
.layer-wrap { display:none } 
.layer-wrap-h3 { padding:20px 30px; border-bottom:1px solid #ccc; font-size:22px; color:#000; background:#fff } 
.layer-wrap-h4 { margin-bottom:14px; font-size:18px } 
.layer-wrap .bg { position:fixed; top:0; left:0; z-index:101; width:100%; height:100%; background:#000; opacity:0.3 } 
.ie7 .layer-wrap .bg,
.ie8 .layer-wrap .bg { filter:alpha(opacity=30) } 
.layer-wrap .layer-inner { position:fixed; top:50%; left:50%; z-index:102; width:795px; padding-bottom:20px; background:#fff } 
.layer-wrap .layer-content { overflow:auto; overflow-x:hidden; height:auto; max-height:500px; padding:30px; background:#fff } 
.layer-wrap .icon-layer-close { position:absolute; top:22px; right:30px } 
.icon-layer-close { width:25px; height:25px; background-position:-120px -24px } 
.layer-wrap .sbj { padding-left:15px } 

/* seaerch layer_popup */
.layer-search .layer-wrap-h3 { padding:0 0 0 10px; line-height:35px; background:#019a99; font-size:14px; color:#feffff; } 
.layer-search .layer-inner { border:1px solid #008684; background:#eaeaea; } 
.layer-search .layer-content { padding:12px 10px; background:#eaeaea; } 
.layer-search .layer-inner { width:600px; } 
.layer-search .btn-s-gray { width:80px; height:28px; border:1px solid #c9c9c9; background:#fbfbfc; line-height:26px; color:#333; } 
.layer-search .srch-box { padding:10px; border:1px solid #cacaca; } 
.result-box { min-height:250px; border:1px solid #cacaca; background:#fff; } 
.result-box table { border-collapse:collapse; background:#fff; } 
.result-box table th, .result-box table td { padding:6px 0; border-left:1px solid #cacaca; text-align:center; vertical-align:top; } 
.result-box table tr th:first-child, .result-box table tr td:first-child { border-left:0; } 
.result-box table th { background:#9d9d9d; color:#fff; text-align:center; } 
.result-box table tr td { cursor:pointer } 
.result-box table .select:hover { background:#019a99; color:#fff; } 

/* txt-align */
.ie7 .price-box dl { zoom:1 } 
.price-box dl:after { display:block; content:''; clear:both } 
.price-box dl:first-child { padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid #e7e7e7 } 
.price-box.nomal dl:first-child { padding-bottom:5px; margin-bottom:0; border-bottom:1px solid #e7e7e7 } 
.price-box.nomal dl.bottom { display: flex; justify-content: space-between; align-items: center; } 
.price-box.nomal dl.bottom dt { width: 48%; margin-right: auto; } 
.price-box.nomal dl.bottom dd.sale { font-size: 12px; font-weight: 400; background: #f05050; width: 23%; padding: 2px; text-align: center; color: #fff; border-radius: 3px; margin-left: 0; letter-spacing: 0.05rem; } 
.price-box.nomal dl.bottom dd.sale span { display: inline-block; width: 7px; height: 10px; background: url(//cdn.hackershrd.com/hrd/images/common/arrow/sale_arrow.png) 0 0 no-repeat; background-size: 100%; } 
.price-box.nomal dl.bottom dd { width: 38%; } 
.price-box dt,.price-box dd { float:left; width:50%; margin: 3px 0; } 
.price-box dd { font-weight:700; text-align:right } 
.price-box > strong { display:block; margin-bottom:5px } 

/*quick-bar */
.quick-bar { position:fixed; bottom:0; left:0; z-index:60; width:100%; height:40px; background:#3b3b3b; border-width:1px 0; border-style:solid; border-color:#2c2c2c } 
.quick-bar ul,.quick-bar li,.quick-bar dl,.quick-bar dt,.quick-bar dd { float:left } 
.quick-bar .txt { display:block; width:100px; border-left:1px solid #2d2d2d; color:#bbb; text-align:center; line-height:38px } 
.quick-bar .txt:before { border-left:1px solid #3f3f3f } 
.quick-bar dl .txt { width:140px } 
.quick-bar dd ul { margin-top:5px } 
.quick-bar dd li { margin-left:15px } 
.quick-bar dd li:first-child { margin-left:0 } 
.quick-bar button { position:absolute; top:0; right:0; width:40px; height:40px; background:url('//cdn.hackershrd.com/img_hrd/common/sp_icon.png') -174px -54px } 

/* tab */
.ie7 .info_tab { zoom:1 } 
.info_tab { display: flex; justify-content: left; } 
.info_tab li { width:150px; border:1px solid #29a8a5; border-left:none; height:29px; color:#29a8a5; font-size:16px; text-align:center; line-height:28px } 
.info_tab li:first-child { border-left:1px solid #29a8a5 } 
.info_tab li.active,.info_tab li:hover { color:#fff; background:#29a8a5; cursor: pointer; } 
.hrd_info_con { display:none } 
.hrd_info_con.active { display:block } 

/**/
.tbl-layout { border:0 } 
.tbl-layout th,.tbl-layout td { padding:0; background:none; border:0; text-align:left; font-weight:700; color:#019a99 } 

/*quick*/
.quick-wrap { position:absolute; top:150px; right: 2%; left: auto; width:100px; border-radius: 5px; margin-left:700px; z-index:10; border-radius: 5px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; background: #ddf0f1; } 
.quick-wrap.left { left: 50%; right: auto; margin-left: -756px; z-index: 999; top:340px } 
.quick-wrap.left.fixed { top:120px } 
.quick-wrap.left ul { border-top : none; } 
.quick-wrap.left ul li { margin-bottom: 20px; } 
.quick-wrap.left ul li a { width: 180px; display: block; animation: float 3s ease-in-out infinite; } 
.quick-wrap.left ul li a img { width: 100%; } 

@keyframes float { 
 0% { transform: translateY(0px); } 
 50% { transform: translateY(-10px); } 
 100% { transform: translateY(0px); } 
 }
.quick-wrap li a:hover img { display: block !important; } 
.quick-top { border-radius: 5px; border: 1px solid #dadada; background: #f5f5f5; overflow: hidden; width: 103px;; } 
.quick-wrap.bottom { position:absolute; bottom:300px } 
.tit_bg { padding: 3px 0; text-align: center; font-weight: 600; color: #c3e1e0; background: #29a8a5; letter-spacing: -1px; } 
.quick-wrap .quick-top li { margin: 5px; } 
.quick-wrap .quick-top li a { display: block; width: 93px; height: 114px; transition: all 0.5s; } 

.quick-bottom a { display: block; margin-top: 20px; width: 103px; height: 136px; background: url('//cdn.hackershrd.com/hrd/images/common/quick-menu_4_off.png')0 0 no-repeat; background-size: 100%; transition: all .5s; } 
.quick-bottom a:hover { background: url('//cdn.hackershrd.com/hrd/images/common/quick-menu_4_on.png')0 0 no-repeat; background-size: 100%; } 
.q_quest { text-align: center; margin-top: 15px; box-shadow: 0 5px 10px rgba(11, 158, 165,0.1); border-radius: 5px; z-index: 9999; } 
.q_quest a { display: block; } 
.q_quest a img { display: block; width: 100%; } 


.clear:after { content:''; clear:both; display:block; } 
.hidden_text { display:inline-block; width:0px; height:0px; opacity:0; overflow: hidden; } 
caption.hidden_text { display:table-caption; } 


.title_wrap { display: flex; justify-content: space-between; margin: 30px 0 10px; width: 1130px; align-items: end; } 
.title_wrap h3 { font-size: 25px; color:#333 } 
.view_more { display:block; text-align: right; text-decoration: underline; } 


/*개인정보/수집이용안내 */
.bg_gry { display:block; line-height:50px; text-align:center; background:#d9d9d9; color:#333; font-weight:bold; white-space: normal; } 
.b-table { table-layout:fixed; width:100%; border-collapse:collapse; border-top:1px solid #aaa; white-space: normal; } 
.b-table caption { font-size:0; } 
.b-table thead th { font-weight:bold; color:#000; } 
.b-table thead th , 
.b-table tbody td { padding:15px 10px; border:1px solid #333; text-align:center; } 
.b-table tbody th { border:1px solid #333; text-align:center; font-weight:bold; color:#000; } 
.b-table tbody td strong { font-size:16px; font-weight:bold; text-decoration:underline; } 
.b-table tbody td ol li { text-align:left; margin-bottom:10px; line-height:1.4; } 
.b-table tbody td .txt-deco { font-weight:bold; text-decoration:underline; } 
.b-table tbody td a { color:rgb(88, 102, 167) } 
.table_tip { margin-top:20px; font-size:13px; line-height:normal; white-space: normal; } 

/* 검색기능 */
.search-section * { font-family: noto,sans-serif; } 
.search-section { padding:100px 0; position: relative; z-index: 2; } 
.search-section.t4 { padding: 0; position: relative; z-index: 2; } 
.search-section .w1227 { width: 1227px; margin: 0 auto; padding: 50PX 0 40px 0; } 
.search-section .w1227 .search-input { right: 32% !important; } 
.search-section.t2 .w1227 .search-result { top: 73px; right: 390px; z-index: 9; } 
.search-section.t4 .search-result { top: 30px; right:0; z-index: 9; } 
.search-section.t4 .search-input { right: 0; width: auto; } 
.search-section .search_img { box-shadow: 0 15px 20px rgba(6, 211, 185,0.3); } 
.search-section .search-input { position: absolute; top: 50%; right: 75px; left: auto; transform: translateY(-50%); width: 1067px; height: 45px; display: flex; justify-content: flex-start; align-items: center; border: 1px solid #ccc; border-radius: 50px; background: #f4f4f4; overflow: hidden; } 
.search-section .search-input span { display: inline-block; width: 205px; text-align: left; font-size: 2.2em; color:#fff; font-weight: bold; } 
.search-section .search-input input, 
.search-section .search-input select, 
.search-section .search-input .lec_search_btn { height: 100%; display: block; margin-left: -1px; outline: none; background: none;; } 
.search-section .search-input .lec_search_btn { width: 60px; text-indent: -9999px; background: url('//gscdn.hackers.co.kr/hrd/img/common/search_btn.png') center center no-repeat; } 
.search-section .search-input input { width: 450px; border: none; box-sizing: border-box; padding: 0 20px; font-size: 16px; } 
.search-section .search-input input::placeholder { color:#bbbbbb } 
.search-section .search-input select { display: none; width: 230px; border: none; box-sizing: border-box; padding: 0 20px; font-size: 16px; border-right: 1px solid #ccc; } 


/* 검색결과 */
.search-section .search-result { position: absolute; right: 77px; width: 510px; border: 1px solid #ccc; border-radius: 10px; top: 98px; box-sizing: border-box; padding: 10px 5px; display: none; overflow: hidden; } 
.search-section .search-result::after { display: none; } 
.search-section .search-result .sticker { display: inline-block; padding: 3px 15px; font-size: 16px; color: #fff; background: #41b5ae; border-radius: 5px; } 
.search-section .search-result .sticker.v2 { background: #9c94f3; } 
.search-section .search-result .lst_wrap { width: 95%; margin: 0 auto; padding-top: 10px; } 
.search-section .search-result ul { overflow-y: auto; overflow-x: hidden; height: auto; } 
.search-section .search-result li { font-size: 18px; text-align: left; z-index: 1; } 
.search-section .search-result li a { color:#aaaaaa; padding: 10px 0; box-sizing: border-box; display: block; } 
.search-section .search-result ul::-webkit-scrollbar { width: 5px; background: transparent; } 
.search-section .search-result ul::-webkit-scrollbar-thumb { background: #ccc; width: 3px; border-radius: 3px; } 
.search-section .search-result ul::-webkit-scrollbar-track { background: transparent; } 

/* 서브페이지 */
.search-section.t2 { padding:0 } 
.search-section.t2 .search_img { width: 100%; display: block; box-shadow: 0 5px 10px rgba(6, 211, 185,0.3); } 
.search-section.t2 .search-input { width: auto; } 
.search-section.t2 .search-result { top: 23px; right: 0px; } 

/* */
.search-section.t3 { padding:0 } 
.search-section.t3 .search_img { width: 100%; display: block; box-shadow: 0 5px 10px rgba(6, 211, 185,0.3); } 
.search-section.t3 .search-input input, .search-section.t3 .search-input select, .search-section.t3 .search-input .lec_search_btn { height: 50px; } 
.search-section.t3 .search-input { width: 740px } 
.search-section.t3 .search-input select { width: 170px; } 
.search-section.t3 .search-input input { width: 515px; } 
.search-section.t3 .search-result { top: 170px; right: 20px; width: 570px; } 
.search-section.t3 .search-result::after { width: 530px; } 

.list-not-found { display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 50px 0; border-top: none; border-bottom: none; } 
.list-not-found p { display: block; margin-top: 50px; font-size: 18px; font-weight: bold; color:#888888; } 


/* popup */
.layer_bg { background:#000; opacity:0.5; position:fixed; top:0; left:0; width:100%; height:100%; display:none; z-index: 99; } 
.layer_pop.hrd { position:fixed; z-index:9999; left:80%; top:50%; transform: translate(-50%,-50%); display:none; } 
.layer_pop.hrd .pop_close_btn { font-size: 30px; position: absolute; top: 0; right: 0; width: 59px; height: 59px; line-height: 30px; text-align: center; } 
.layer_pop.hrd .pop_img { display:none; position:relative; } 


.layer_pop.hrd .tab_menu >h3 , .layer_pop.hrd .tab_menu > .search_wrap, .layer_pop.hrd .tab_menu >ul, .layer_pop.hrd .tab_con > .tab_t, .layer_pop.hrd .tab_con > .cont_wrap { position: absolute; top: 104px; margin: 0 20px; } 
.layer_pop.hrd .tab_menu >h3 { font-size: 24px; color: #019a99; } 
.layer_pop.hrd .tab_menu > .search { top: 168px; width: 87%; border-radius: 5px; border: solid 1px rgba(0, 0, 0, 0.3); display: flex; justify-content: center; align-items: center; } 
.layer_pop.hrd .tab_menu > .search a.search_btn { background: url('//gscdn.hackers.co.kr/hrd/img/common/search_btn.png')center center no-repeat; color: transparent; padding: 1%; } 
.layer_pop.hrd .tab_menu > .search input { width: 100%; padding:3% 0; border: none; } 
.layer_pop.hrd .tab_menu >ul { display: flex; flex-wrap: wrap; top: 220px; justify-content: space-between; } 
.layer_pop.hrd .tab_menu >ul>li { width: 48%; margin: 10px 0; } 
.layer_pop.hrd .tab_menu >ul>li>a { text-align: center; border: 1px solid #dddddd; box-sizing: border-box; padding: 16px 0; display: block; border-radius: 10px; font-size: 18px; font-weight: 700; } 
.layer_pop.hrd .tab_menu >ul>li a:hover { background: #00b7b6; color: #fff; border: none; } 
.layer_pop.hrd .tab_menu >ul>li a.active { background: #00b7b6; color: #fff; border: none; } 
.layer_pop.hrd .tab_con { display: none; } 
.layer_pop.hrd .tab_menu.active { display: none; } 
.layer_pop.hrd .tab_con.active { display: block; } 
.layer_pop.hrd .tab_con > .tab_t { display: flex; width: 55%; justify-content: space-between; align-items: center; } 
.layer_pop.hrd .tab_con > .tab_t>a { font-size: 22px; color: #444444; } 
.layer_pop.hrd .tab_con > .tab_t > h3 { font-size: 24px; color: #444444; } 
.layer_pop.hrd .tab_con > .cont_wrap { top: 167px; width: calc(100% - 40px); height: 66%; overflow-y: scroll; } 
.layer_pop.hrd .tab_con > .cont_wrap::-webkit-scrollbar { width: 8px; } 
.layer_pop.hrd .tab_con > .cont_wrap::-webkit-scrollbar-thumb { background-color: #d6d6d6; border-radius: 10px; } 
.layer_pop.hrd .tab_con > .cont_wrap::-webkit-scrollbar-track { background-color: transparent; } 
.layer_pop.hrd .tab_con > .cont_wrap >ul>li { border-bottom: 1px solid #eeeeee; font-size: 18px; padding: 20px 0; } 
.layer_pop.hrd .tab_con > .cont_wrap >ul>li:nth-last-of-type(1) { border: none; } 
.layer_pop.hrd .tab_con > .cont_wrap >ul>li>a>span { font-weight: bold; margin-right: 20px; } 
.layer_pop.hrd .tab_con > .cont_wrap >ul>li>a { color: #000; } 

/* 최근본상품 */
.vod_slide { padding: 5px 5px 15px; background: #fff; border: 1px solid #d7d7d7; } 
.visit_box { width: 120px; } 
.visit_box .tit { background:#0cadaa; color:#fff; padding: 10px 0; text-align: center; font-weight: bold; margin-top: 10px; } 
.quick-wrap .vod_txt { font-size: 12px; text-overflow: ellipsis; white-space: nowrap; width: 100%; overflow: hidden; display: block; padding-top: 5px } 
.quick-wrap .view_count { width: 20px; height: 20px; line-height: 20px; letter-spacing: 0; border-radius: 50%; background: #fff; color:#454545; display: inline-flex; justify-content: center; align-items: center; font-size: 12px; } 
.quick-wrap .view_vod { padding: 5px 0; border-bottom: 1px solid #ccc; display: block; } 
.quick-wrap .view_vod img { border: 1px solid #ccc; width: 100%; display: block; box-sizing: border-box; } 
.quick-wrap .view_vod:nth-child(2) { border-bottom: 0 } 
.quick-wrap .bx-wrapper .bx-controls-direction { top: 103% !important; } 
.quick-wrap .bx-wrapper .bx-controls-direction a { background: url("//cdn.hackershrd.com/hrd/images/common/arrow/arrow_box.jpg") 0 0 no-repeat; width: 17px; height: 16px; margin-top: 0; } 
.quick-wrap .bx-wrapper .bx-controls-direction a.bx-next { transform: scale(-1); } 
.vod_pager { text-align: center; margin-top: 5px; } 
/* hrd 자주 묻는 질문 검색어 */
.layer_pop.hrd .tab_menu > .search_wrap { top: 168px; width: 87%; border-radius: 5px; background: #f4f4f4; } 
.layer_pop.hrd .tab_menu .search { display: flex; justify-content: center; align-items: center; background: #f4f4f4; width: 100%; } 
.layer_pop.hrd .tab_menu .search a.search_btn { background: url('//gscdn.hackers.co.kr/hrd/img/common/search_btn.png')center center no-repeat; color: transparent; padding: 1%; } 
.layer_pop.hrd .tab_menu .search input { width: 100%; padding:3% 0; border: none; background: #f4f4f4; padding-left: 10px; } 
.layer_pop.hrd .tab_menu .search input::placeholder { color: #c3c3c3; } 
.layer_pop.hrd .rel_search { position: absolute; width: 100%; top: 50px; display: none; } 
.layer_pop.hrd .mint_f { color: #00b7b6; } 
.layer_pop.hrd .pop_rel_keywords { top: 167px; width: 100%; height: 66%; overflow-y: scroll; } 
.layer_pop.hrd .pop_rel_keywords>li { border-bottom: 1px solid #eeeeee; font-size: 18px; padding: 20px 0; } 
.layer_pop.hrd .pop_rel_keywords>li:nth-last-of-type(1) { border: none; } 
.layer_pop.hrd .pop_rel_keywords::-webkit-scrollbar { width: 8px; } 
.layer_pop.hrd .pop_rel_keywords::-webkit-scrollbar-thumb { background-color: #d6d6d6; border-radius: 10px; } 
.layer_pop.hrd .pop_rel_keywords::-webkit-scrollbar-track { background-color: transparent; } 

.price-box { height: 90px; padding: 5px 15px; border: 1px solid #dedede; border-radius: 5px; background: #eeeeee; display: flex; flex-direction: column; justify-content: space-between; } 
.price-box dd:first-child { font-weight: normal; } 
.list-bbs li { position:relative; border-bottom:1px solid #e7e7e7 } 
.list-bbs li a { display:block; height:50px } 
.list-bbs li a span { display:inline-block; vertical-align:top; line-height:50px } 
.list-bbs li a em { position:absolute; top:18px; right:13px } 

.star_rating { display: flex; align-items: center; justify-content: left; gap: 5px; width: 120px;padding-top: 20px;}
.star_rating span{display: inline-block; width: 20px; height: 20px;}
.star_rating span.on{background: url('//cdn.hackershrd.com/hrd/images/common/star_on.png') 0 0 no-repeat; background-size: 100%;}
.star_rating span.off{background: url('//cdn.hackershrd.com/hrd/images/common/star_off.png') 0 0 no-repeat; background-size: 100%;}
.review_wrap { padding-top: 20px; display: flex; align-items: center; justify-content: left; gap: 15px;}
.review_wrap a{color: #00b7b6; font-weight: 700; text-decoration: underline;}

.review_bottom_wrap .tit-box-h4 { display: flex; align-items: center; justify-content: left; gap: 15px; }
.review_bottom_wrap .review_star_wrap { display: flex; align-items: end; justify-content: left; gap: 15px; height: 20px; }
.review_bottom_wrap .review_star_wrap >span{font-size: 16px; display: flex; align-items: center; gap: 10px;}
.review_bottom_wrap .tit-box-h4 .star_rating { display: flex; align-items: center; justify-content: left; gap: 5px; width: 120px;}
.review_bottom_wrap .tit-box-h4 .star_rating span{display: inline-block; width: 20px; height: 20px;}
.review_bottom_wrap .tit-box-h4 .star_rating span.on{background: url('//cdn.hackershrd.com/hrd/images/common/star_on.png') 0 0 no-repeat; background-size: 100%;}
.review_bottom_wrap .tit-box-h4 .star_rating span.off{background: url('//cdn.hackershrd.com/hrd/images/common/star_off.png') 0 0 no-repeat; background-size: 100%;}
.review_bottom_wrap .tit-box-h4 .review_btn {color: #00b7b6; font-weight: 700; text-decoration: underline;}
.review_bottom_wrap table td, .review_bottom_wrap table th{text-align: center;padding: 15px 0;}
.review_bottom_wrap table .star_rating{display: flex; align-items: center; justify-content: left; gap: 5px; width: 120px; margin: 0 auto;padding-top: 0;}
.review_bottom_wrap table .star_rating span{display: inline-block; width: 20px; height: 20px;}
.review_bottom_wrap table .star_rating span.on{background: url('//cdn.hackershrd.com/hrd/images/common/star_on.png') 0 0 no-repeat; background-size: 100%;}
.review_bottom_wrap table .star_rating span.off{background: url('//cdn.hackershrd.com/hrd/images/common/star_off.png') 0 0 no-repeat; background-size: 100%;}

.img_box {position: relative;}
.lecture_time_box {position: absolute;top: 0px;right: -4px;width: 85px;height: 20px;}
.lecture_time_box span {position: absolute;top: 1px;right: 9%;color: #00A1FF;font-size: 14px;font-weight: bold;z-index: 2;}
.lecture_time_box .time_icon {width: 100%;height: 100%;object-fit: contain;z-index: 1;}