@charset "utf-8";
@font-face {font-family: 'Noto Sans';font-style: normal;font-weight: 300; src: url('../font/NotoSansKR-Light.woff2') format('woff2'),url('../font/NotoSansKR-Light.woff') format('woff'),url('../font/NotoSansKR-Light.otf') format('opentype')}
@font-face {font-family: 'Noto Sans';font-style: normal;font-weight: 400; src: url('../font/NotoSansKR-Regular.woff2') format('woff2'),url('../font/NotoSansKR-Regular.woff') format('woff'),url('../font/NotoSansKR-Regular.otf') format('opentype')}
@font-face {font-family: 'UhBeeyoongdi'; src: url('../font/UhBeeyoongdi.woff') format('woff'),url('../font/UhBeeyoongdi.eot')}


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; font-family:'Noto Sans', 'Noto Sans', dotum, gulim, verdana, sans-serif; font-size: 100%}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, body , html {display: block}

html, body { height: 100%; line-height: 1; background: #f9f9f9;}
ol, ul {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}
input, textarea, select { vertical-align: middle; }
/*
::-webkit-input-placeholder {color:#888}
:-moz-placeholder {color:#888}
::-moz-placeholder {color:#888}
:-ms-input-placeholder {color:#888}
*/
textarea {overflow:auto; padding:10px; line-height:22px}
input[type=checkbox] {width:13px; height:13px; vertical-align:middle; cursor: pointer;}
input[type=radio] {width:13px; height:13px; margin-top:-1px; vertical-align:middle; cursor: pointer;}
input[type='button'] { cursor: pointer;}
input[type="text"], textarea, select {font-family:'Noto Sans', 'Noto Sans', dotum, gulim, verdana, sans-serif;} 
label { vertical-align: middle; cursor: pointer; }
button {font-family:'Noto Sans'; cursor:pointer}

a{color:#393333;text-decoration:none}
a:focus, a:hover {color:#2c5189}


a.skip { position: fixed; left: -9999px; top: -9999px; display: block; width:100%; line-height: 3em; background: #40b2cd; color: #fff; text-align: center}
a.skip:hover,
a.skip:focus { left: 0; top: 0; z-index: 1000 }



/* layout */
.container { width: 1200px; margin: 0 auto; position: relative; }

.header { height: 90px; padding: 30px 0 0 3%;  position: fixed; left: 0; top: 0; width: 97%; z-index: 100;  transition: all 0.4s ease 0s; background: rgba(249,249,249,0.85)}
.intro .header { background: none}
.jsHeaderTop .header { height: 75px; padding-top: 15px; border-bottom: rgba(0,0,0,0.1) 1px solid; background: rgba(255,255,255,1);}

.h1 { width: 312px; float: left}
.h1 a { display: block; height: 62px; text-indent:-9999px; overflow: hidden; background: url('../images/h1_logo.png') no-repeat 0 bottom}
.nav {float: right; padding:22px 2% 0 0; width: 61%; text-align: right; position: relative; }
.nav>a { padding: 5px 5% 3px 5%; font-size: 18px; color: #666; display: inline-block; word-break: keep-all;}
.nav a.b10_intro { padding-left:0}
.nav a.f10_faq {padding-right:1%}
.nav a:hover,
.nav a:focus {color:#00a2c5}

.nav input[type="button"].btn_navClose,
.nav input[type="button"].btn_navOpen { display: none; width: 30px;height: 30px; background: url(../images/btn_navClose.png) no-repeat center center; background-size: contain; color: #fff; border: none; overflow: hidden;text-indent: -9999px; }
.nav input[type="button"].btn_navOpen { background-image:url(../images/btn_navOpen.png)  }

.logBtn { position: absolute; right:3%; top:-15px; width: 100%; text-align: right;}

.logBtn input,
.logBtn span,
.logBtn a { vertical-align: middle}
.nav .user_name { font-size: 14px; color:#00b2d9; padding-right:15px }
.libLink { border: #ededed 1px solid; border-radius:4px; color: #777; background: #fff; padding:0 8px}


input.btnLlogin { border:none; border-radius:4px; background: #00b2d9; color:#fff; font-family:'Noto Sans', 'Noto Sans', dotum, gulim, verdana, sans-serif; font-size: 14px}
input.btnLlogin:hover,
input.btnLlogin:focus { background: #00a2c5}

.nav .logBtn a {font-size: 14px}


.header a.btn_login,
.header a.btn_logout { display: inline-block;  padding:0; margin:-12px -2px 0 10px; background: rgba(0,0,0,0.02) url("../images/btn_logout.png") no-repeat right center ; background-size: contain; vertical-align: middle; width:50px; height: 50px; border:solid 1px #ddd; border-radius: 50%; text-indent: -9999px; font-size: 0 ;overflow:hidden; float: right; }
.header a.btn_logout { background-image: url("../images/btn_login_on.png")}
.header a.btn_login:hover,
.header a.btn_login:focus,
.header a.btn_logout:hover,
.header a.btn_log:focus { background-image:url("../images/btn_logout_on.png") }
.header a.btn_logout:hover { background-image:url("../images/btn_login.png") }

.h2 { font-size: 50px; color: #666; padding:40px 0 ; text-align: center; font-weight: 400; border-bottom: solid 1px #34C3DB; }
.jsHeaderTop .header .h2 {padding: 55px 0 25px ;}
.h2 span { color: #aaa }

.h3 { color: #666; font-size: 22px; font-weight: 400; padding: 20px 0 15px 0; }

.index .section { min-height: 100%; }

.footer { width: 100%; padding: 40px 0; text-align: center; font-size: 13px; color: #666; line-height: 1.3em }
.footlogo { width: 175px; height: 88px; background: url('../images/logo.png') no-repeat center; margin: 0 auto; text-indent: -9999px; overflow: hidden; color: #fff}
.footer p { padding:7px 0; }
.footer span { display: block; }
.footer .copyright { color: #b8b7b7; font-size: 10px; line-height: 1.2em}
.btn_top { display: block; width: 32px; height: 32px; text-indent:-9999px; overflow:hidden; border:#ddd solid 1px; border-radius:4px; background:#fff url('../images/btn_arrowUp.png') no-repeat center; position: absolute; right:0; top:0 ; opacity: 0.5}
.btn_top:hover,
.btn_top focus { opacity: 0.8} 


/* intro index */

.intro .section {height: 100%}
.intro .footer { position: absolute; /* top: 2000px; */  }
.intro .h2 {width: 1200px; margin: 0 auto;}

.intro_nav {position: fixed; width: 1px; height: 40%; top:30%; right: 3%; background: rgba(0,0,0,0.07); z-index: 100}
.intro_nav a { display: block; width: 9px; height: 9px; overflow: hidden; border-radius: 50%; text-indent: -9999px; background: rgba(0,0,0,.2); border:solid 2px rgba(255,255,255,1); position: absolute; margin: -6px 0 0 -6px; transition: all 0.3s ease 0s }
.intro_nav a.on { background: #32c2db; width: 15px;height: 15px; margin: -9px 0 0 -9px; }
.intro_nav a.go_intro_content {top: 33.3%;}
.intro_nav a.go_masscomm {top: 66.6%;}
.intro_nav a.go_history { bottom: 0; }



/* 인트로 메인 비주얼 캐치프레이즈 */
article.catchphrase { min-height: 100%; width: 100%; position: relative; background:#f2f2f2 url('../images/catchphrase_visual.png') no-repeat center 75%; transition: all 0.3s ease 0s }

.h2_catchphrase {width: 100%; margin: 0 auto; position: absolute; top: 10%; text-align: center; text-indent: -15% }
.h2_catchphrase span { font-family: 'UhBeeyoongdi'; font-size: 83px; font-weight: lighter; line-height: 1.1em}

.catchphrase1 {font-size: 83px; color: #616161 }
.catchphrase1 .catch_word,
.catchphrase2 .catch_word { color: #32c2db; font-size: 93px }
.catchphrase2 { display: block; text-indent: 7%; color: #929292 }

.btn_more_intro_content { display: block; width: 100px; height: 100px; left: 50%; margin-left:-50px; bottom: 5%; position: absolute;  background:rgba(0,0,0,0.2) url('../images/btn_arrowDown.png') no-repeat center; background-size: contain; border-radius: 50%; text-indent: -9999px; overflow:hidden;; opacity: 0.3 }
.btn_more_intro_content:hover,
.btn_more_intro_content:focus { opacity: 0.5 }

/* 희망도서바로대출은? */
article.intro_content { min-height: 92%; padding: 4% 0 0; width: 100%; background: #fff ;transition: all 0.3s ease 0s}
article.intro_content:after { display: block; content: ""; clear: both; height: 40px; }
.intro_text { font-size: 20px; color: #666; text-align: center; padding: 30px 0; line-height: 1.2em; font-weight: 300}

.intro_content dl { text-align: center; margin: 0 auto; background: #fff }
.intro_content dt,
.intro_content dd { display: inline-block;color: #939598; font-size: 14px}
.intro_content dt { color: #2fb0d0; padding: 0 0 0 12px }

.flow_img1 { background: url('../images/flow_img1.png') no-repeat center; background-size:contain ; height: 400px; width: 1000px; margin: 0 auto }

.user_content { width: 1000px; margin: 0 auto; }
.user_content:after { display: block;content: ""; clear: both; height: 30px; }

p.note1 {background: #f9f9f9; color: #ec4d33; font-size:21px; border:solid 1px #f58674; text-indent: 1em; width: 1000px;  margin:0 auto 0 auto; text-align: center; padding: 10px 0; line-height: 1.5;}
p.note1 span {display: block; font-size: 17px}

.howtouse,
.about_refuse { color: #666; line-height: 1.3em; float: right; width: 48%; }
.howtouse {  float: left;}

.howtouse ol,
.about_refuse > ul { padding: 5px 0; }
.howtouse ol>li { background: url('../images/deco_dot10.gif') no-repeat 4px 10px; padding: 3px 0 3px 15px }
.howtouse ol ul { padding: 5px 0 10px 18px; }
.howtouse ol ul li { font-size: 14px; color: #8a8a8a; }
li.note1 { color: #dc732e; text-indent: 4px; padding: 4px 0}

.about_refuse li { background: url('../images/deco_dot10.gif') no-repeat 4px 10px; padding: 2px 0 2px 15px}
.about_refuse li li { font-size: 14px; color: #8a8a8a; padding:2px 0; background: none }

.btn_center { padding: 80px 0; text-align: center; }
.btn_go { position: absolute; bottom: 58%; left: 50%; margin-left: -120px; width: 240px; text-align: center; display: block; background:#32c2db; color: #fff; font-size: 18px; padding: 15px 0; border-radius: 30px}


/* 매스컴 & 수상내역 */
article.masscomm { min-height: 92%; padding: 4% 0 0; width: 100%; background: #f8f8f8 ;transition: all 0.3s ease 0s }

.awards { background: url('../images/bg_trophy.png') no-repeat 3% 0; color: #666; width: 550px; margin: 0 auto; padding: 30px 0 30px 230px; min-height: 180px }
.awards li {padding: 6px 0;}


.masscomm1 { width: 900px; margin: 0 auto; padding:40px 0 20px 0; display: none}
.masscomm1:after {display: block; content: ""; clear: both;}
.masscomm1 li {width: 32%; margin: 0 0.5%; height:270px; float: left}
.masscomm1 li span { display: block; color: #555 ;white-space:nowrap;word-wrap:normal;width:100%;overflow:hidden;text-overflow:ellipsis; }
.masscomm1 li span.img { background: #ddd no-repeat center; background-size: cover; display: block; height: 150px }
.masscomm1 li span.youtube { background: #ddd; display: block; height: 150px; vertical-align: middle; }
.masscomm1 li span.text1 { display: block; padding: 10px 0 0 0 ; height: 20px; }
.masscomm1 li span.text2 { opacity: 0.7; font-size: 13px }


.masscomm2 { width: 900px; margin: 0 auto; padding:20px 0; font-size: 14px; color: #777}
.masscomm2:after {display: block; content: ""; clear: both;}
.masscomm2 li { padding: 5px 2% 5px 0; width: 48%; float: left; height: 18px; white-space:nowrap; word-wrap:normal; overflow:hidden; text-overflow:ellipsis; }
.masscomm2 span { font-size: 12px; color: #999; float: left; display: inline-block; width: 100px; background: #888; color: #fff; padding: 5px 10px; margin-right: 15px}


article.history { min-height: 90%; padding: 10% 0 0; width: 100%; transition: all 0.3s ease 0s}
.history ul{ background: url('../images/bg_clock.png') no-repeat 0 30px; color: #666; width: 550px; margin: 0 auto; padding: 30px 0 30px 280px; min-height: 180px }
.history li {padding: 6px 0;}


#skip { padding: 100px 0 0 0 }




/* 협약서점 c00 c10_store */

.c10_store .table {width: 1200px; margin: 40px auto}
.c10_store .table caption { text-align: center; background: none; color: #999; font-size:26px; padding: 20px 0; }

.stroe_name {width: 15%;}
.location_btn {width: 5%;}
.store_tel {width: 12%; word-break:keep-all; text-align: center}

.btn_view_map { display: block; margin: 0 auto; width: 46px;height: 46px;background: url('../images/icon_map.png') no-repeat center; padding: 0;border: none; text-indent: -9999px; overflow: hidden;}

.table tbody th label {margin: 0;}
.table tbody td .working_time { color:#999 }

.c10_store .table { border-top:none}



/* d10 */
table tbody th { min-width: 100px }
.useAgree,
.thirdPartyAgree {clear: both; width: 1200px; padding: 0 0 3px 0; margin: 0 auto}
.useAgree textarea,
.thirdPartyAgree textarea { height:150px; border: solid 1px #ddd; width: 96% }
.useAgree .btn,
.thirdPartyAgree .btn { float: left;  display: inline-block; width: 45%; padding:5px 0; text-align: center; vertical-align: middle; background: #fff; border:#ddd solid 1px; color: #777}
.useAgree .btn:hover,
.useAgree .btn:focus,
.thirdPartyAgree .btn:hover,
.thirdPartyAgree .btn:focus { background: #e2e2e2; color: #444}


.useAgree .jsSlide.btn,
.thirdPartyAgree .jsSlide.btn { position: absolute; width: 45%;  top: 0; }
.checkbox_wrap { position: absolute; right: 3%; top: 0; }
.jsSlide_container {}


.d10_booking_wrap .table { margin: 0 auto 20px auto}
.d10_booking .table caption { background: none; color: #333; padding-top: 30px; font-size: 18px }


#searchForm { background: #fff; padding: 25px 2% 25px 2%; border: solid 1px #bbb; margin: 15px auto; }
.d10_booking #searchForm { padding-bottom:7px}
#searchForm label { color: #777; font-size: 15px}
#totalSearchBtn.btn {width:8%; height:32px; background:#00b2d9 url('../images/btn_searchW.png') no-repeat 55% 49%; font-size: 0; margin-left: -8px;border-radius:0 4px 4px 0}

#indPubReqPop { float: right; margin:2px 0 0 0}


#detailSearchDiv {  position: relative; height:0; overflow:hidden; transition: all 0.3s ease 0s; padding:15px 0 0 0}
#detailSearchDiv.on { height:71px;padding:15px 23% 10px 0; margin: 15px 0 0 0; border-top: dotted 1px #ddd;}
#detailSearchDiv td { word-break:keep-all }

#detailSearchBtn,
#detailSearchCloseBtn { position: absolute; right: 0; top: 16px; width:7%; height: 70px; padding:0; }
#detailSearchBtn { right: 10%; width: 12%}
#detailSearchCloseBtn {background:#fff url('../images/btn_arrowUp.png') no-repeat center center; border:solid 1px #ddd; text-indent: -9999px; overflow: hidden; }
.search_table td {font-size: 15px; color: #999}

article.bookInf { position: relative; padding: 20px 10% 40px 100px; min-height:95px; border-bottom: #ddd solid 1px ;line-height: 1.3em }
article.bookInf .bookCover{ display: block; position:absolute; left:0; top:20px; width: 80px; margin:0 15px 0 0; height: 120px; background: #d9d9d9 no-repeat center; background-size: cover; outline: rgba(0,0,0,.07) 1px solid; box-shadow:0 2px 4px rgba(0,0,0,0.1)}
.jsDiv article.bookInf { margin: 10px 0 0 2%; padding-right:2%; border:none; border-top: #ddd solid 1px}


h4.bookTitle { font-weight: 400; color: #666; padding:0 0 12px 0; }
h4.bookTitle b { color: #e84f37 }
h4.bookTitle span,
.bookDesc span{ position: fixed; left:-9999px}

.bookAuthor,
.bookPublisher,
.bookYearTitle,
.bookISBN,
.bookPrice { font-size: 14px; color: #00a2c5 }

.bookAuthor span,
.bookPublisher span,
.bookYearTitle span,
.bookISBN span,
.bookPrice span {color: #999; padding-right: 20px }

.bookDesc { padding: 10px 0; color: #888; font-size: 14px;  }
.bookDesc b { color: #e84f37 }
.btn_booking { position: absolute; right: 0; top:20px}

article.note2 {background: #fff url('../images/icon_notification.png') no-repeat 20px 10px; color: #6c747a; font-size:15px; border:solid 1px #00b2d9; border-radius:4px; padding:15px 0 15px 125px; margin-bottom:100px; text-indent: 1em; line-height: 1.5em}
article.note2 p { padding:0 0 0 8px; background: url('../images/deco_dot20.png') no-repeat 10px 10px}
/* p.note2 span {display: block; font-size: 17px} */


/* e00  */
.e00 #searchForm { padding:25px 3% }
.icon_new { display: inline-block; padding:0 5px 7px 5px; width: 7px; height: 12px; background:#fcd000; overflow: hidden; font-size:10px; color:#777; letter-spacing: 5px; border-radius:8px 0}

.article_header { padding: 30px 0 20px 0; border-bottom: solid 2px #999}
.article_header h3 { font-size: 28px; font-weight: 400; padding:0 0 8px 0}
.article_header span { font-size: 13px; color: #999}
.article_content {padding: 30px 0}

.attach_info { padding:10px 0; font-size: 15px; border-bottom: solid 1px #ddd }
.attach_info strong { display: inline-block; width: 24px; height: 24px; border-radius:50%; overflow: hidden; text-indent: -9999px; background: #ddd url('../images/icon_attach_file.png') no-repeat center center; background-size: contain; vertical-align: middle;}
.attach_info strong,
.attach_info a { margin:0 8px 0 0}

.list_ba { border-top: solid 1px #ddd ; border-bottom: solid 1px #ccc }
.list_ba span {display:inline-block; width: 80px; color: #777}
.list_ba li { padding:10px 0; border-top: dotted 1px #ddd; font-size: 15px;}
.list_ba li:first-child { border-top:none}

.e10_history #searchForm .btn.btn_search{ padding:5px 5%; border-radius:4px; position: absolute; right:2%; top: 28px}
.ui-datepicker-trigger { background: #00b2d9 url('../calendar.png') no-repeat center; background-size: 100% ; padding:4px; width: 24px; height: 24px; border-radius:0 4px 4px 0; vertical-align: middle; margin: 0 0 0 -4px }
.ui-datepicker-trigger:hover,
.ui-datepicker-trigger:focus { background-color: #00a2c5} 

#transaction_code,
#date_option { margin: 0 12px 0 0}

td.trans_code,
td.date_req,
td.date_loan,
td.date_req { text-align: center;}
td.date_req span,
td.date_loan span { display:block}

a.btn_helpTable { display: block; width: 20px ; height: 20px; border-radius:50%; overflow: hidden; position: relative; float: right; }
a.btn_helpTable:before { display: block; content: "?"; color: #fff; font-size: 16px; position: absolute; left: 0; top:0; width: 20px; height: 20px;  background:#00b2d9; font-weight: 300}

.table tbody td.reason_note { color: #ee8765; line-height: 1.2em}

/* f10 */
.faq_container { width: 1000px; margin: 0 auto; padding: 50px 0; position: relative; }
.faq_container h3 a{ display: block; padding: 19px 3% 19px 70px; border-top: solid 1px #E1DFDB; line-height: 1.2em }
.faq_container h3 { position: relative}
.faq_container h3:before { width: 34px;height: 27px; padding: 7px 0 0 0; text-align: center; border-radius: 50%; display: inline-block; content: "Q"; position: absolute; left: 20px; top: 13px; background: #32c2db; color: #fff  }
.faq_a {height: 0; overflow: hidden; padding: 0 3% 0 70px; color: #777;transition: all 0.3s ease 0s; opacity: 0 }


.faq_container h3.on a{ display: block; padding: 20px 3% 20px 70px; background:#E1DFDB; }
.faq_container h3 { position: relative}
.faq_container h3:before { width: 34px;height: 27px; padding: 7px 0 0 0; text-align: center; border-radius: 50%; display: inline-block; content: "Q"; position: absolute; left: 20px; top: 13px; background: #32c2db; color: #fff  }
.faq_a.on{ height: inherit; padding: 20px 3% 20px 70px; line-height: 1.3em; color: #777; opacity: 1 }


#baroloanReqDlg .useAgree,
#baroloanReqDlg .thirdPartyAgree { width:96% }
.jsDiv_container .useAgree,
.jsDiv_container .thirdPartyAgree { width:96%; position: relative;}

div.jsSlide {/* height: 0; */ overflow: hidden;; padding-top:30px; padding-bottom:0; transition:all 0.3s ease 0s }
div.jsSlide.on { /* height: 200px */}

#indPubUseAgreeDiv .jsSlideClose,
#indPubthirdPartyAgree .jsSlideClose,
.useAgree .jsSlideClose,
.thirdPartyAgree .jsSlideClose { background: #ddd url('../images/btn_arrowUp.png') no-repeat center;  width: 60px; height: 20px; text-indent: -9999px; overflow: hidden; margin:-2px 0 0 49.5% }

#useAgreeDiv.jsSlide .jsSlideClose,
#thirdPartyAgreeDiv.jsSlide .jsSlideClose,
#indPubUseAgreeDiv .jsSlideClose,
#indPubthirdPartyAgree.jsSlide .jsSlideClose{ display: none; border:none}

#useAgreeDiv.jsSlide.on .jsSlideClose,
#thirdPartyAgreeDiv.jsSlide.on .jsSlideClose,
#indPubUseAgreeDiv.on .jsSlideClose,
#indPubthirdPartyAgree.jsSlide.on .jsSlideClose{ display:block; border:#cdcdcd solid 1px; border-radius:0 0 3px 3px;}

div.jsSlide .jsSlide_container { height: 0; padding: 0; overflow:hidden; background: #fff; color: #777; font-size: 15px;  line-height: 1.25em;transition: all 0.3s ease 0s}
div.jsSlide.on .jsSlide_container,
div.jsSlide.on .jsSlide_container {border:solid 1px #ddd; padding:10px 2%; height: 200px; overflow:auto}

#indPubthirdPartyAgree .table,
#thirdPartyAgreeDiv .table { margin-top:20px}

/* g10  */

/* jsDiv */
body.no_scroll { overflow: hidden;}

div.jsDiv,
article.jsDiv{ display: none; position: fixed; left: 0;top: 0; width: 100%; height: 100%; z-index: 1000; background: rgba(0, 0, 0, 0.5); }
div.jsDiv.on,
article.jsDiv.on { display: block; }


.jsDiv_container { width: 90%; height: 85%; padding: 0; margin: 4.5% auto 0 auto; background: #f9f9f9; position: relative;border: solid 1px rgba(0,0,0,0.7); border-radius:6px; overflow: hidden; overflow-y: auto; box-shadow: 0 3px 5px rgba(0,0,0,.2)}
.jsDiv_container .h4 { text-align: center; font-size: 18px; padding: 15px 0; border-bottom: solid 1px #ddd; background: #666;  color: #fff }
.jsDiv_container .input { background: #fff }
/* 
#map_wrap .jsDiv_container { height: 80% }
#map_wrap .jsDivClose { display: block; width: 30px;height: 30px; padding: 0; border: none; position: absolute; }
*/

.jsDivClose{ background: url(../images/btn_navClose.png) no-repeat center center; display: block; width: 28px; height: 28px; padding: 0; position: absolute; right:5%; top:2.5%; border: #ddd 1px solid; border-radius:4px; text-indent: -9999px;overflow: hidden; opacity:.6 }
.jsDivClose { display: block; width: 30px;height: 30px; padding: 0; border: none; position: absolute; right:5%; top:2.5%; text-indent: -9999px;overflow: hidden; opacity:.6 }
.jsDivClose:hover,
.jsDivClose:focus { opacity: 1 }

.btn_area a.btn.jsDivClose { position: static; }

article.jsDiv .btn_area { text-align: center; border-top:solid 1px #ebebeb; padding: 10px 0 0 0; height: 44px; background: #fff;  }
article.jsDiv .btn_area .btn {float: none;}

.h3_jsDiv { background: #00a2c5; color: #fff; padding:20px 0; text-align: center; font-size: 18px;; border-radius:6px 6px 0 0 }

.jsDiv .btn_area_C { padding:20px 0; background: #fff; border-top:solid 1px #ededed; border-radius:0 0 6px 6px}

/* commom */
.hidden,
.none { position: fixed; left: -9999px; }

.float_l { float: left }
.float_r { float: right }
.text_c {text-align: center;}

input[type="button"] { cursor: pointer; }

/* table */

table {width: 100%}

.table {margin: 0 0 20px 0;  border-top: solid 1px #aaa;}
.table caption { background: #363844; color: #fff; font-size: 15px; text-align: left; padding: 12px 0; text-indent: 15px; font-weight: lighter; border-bottom: #cacac9 solid 1px; }
.table caption.caption { background:none; padding: 30px 0 11px 0; text-indent: 0; border-bottom: #cacac9 solid 1px; }
.table caption.caption span{ background: #363844; color: #fff; font-size: 16px; padding: 6px 20px; border-radius: 16px 0 }
.table th,
.table td { vertical-align: middle; word-break: keep-all; }
.table thead th { background: #e1dfdb;padding: 10px; border:#ccc solid 1px ; border-top:none; line-height: 1.3em; color: #555 }
.table tbody th,
.table tbody td { border:#e1e1e0 solid 1px; border-top:none; padding: 8px 15px; background: #fff; line-height: 1.3em; color: #666 }
.table tbody th { background:#f0efed; font-weight: normal; color: #555}
.table tbody th label {color: #555}
.table tbody td { color: #999 }
.table tbody td.no_data,
.table tbody td.text_c { text-align: center; }

.table label { margin-right:10px; }
.table td.title,
.table td.msg_content { text-align: left }

/* 왼쪽 정렬인 테이블 */
.table10 tbody th,
.table10 tbody td { text-align: left; }

.icon_must { display: inline-block; width: 7px;height: 7px; margin-left:7px; background: #f60; border-radius: 50%; text-indent: -9999px;overflow: hidden; }

/* 가운데 정렬인 테이블 */
.table20 tbody th,
.table20 tbody td { text-align: center;}

.search_area2 + .table { border-top:none; }

.page_nav { text-align: center; padding: 0 0 30px 0;position: relative;}
.page_nav a,
.page_nav strong { display: inline-block; height: 26px; width: 38px; padding: 12px 0 0; border: solid 1px #ddd; background: #fff; margin: 0 -3px 0 -2px;overflow: hidden; }
.page_nav a.btn_first,
.page_nav a.btn_before,
.page_nav a.btn_next,
.page_nav a.btn_last{ background: #f0f0f0 url(../images/btn_pagenation.png) no-repeat 0 0; text-indent: -9999px;  }
.page_nav a.btn_before { background-position: -38px 0 }
.page_nav a.btn_next { background-position: -76px 0 }
.page_nav a.btn_last { background-position: -114px 0 }
.page_nav a:hover,
.page_nav a:focus { background-color: #ddd }
.page_nav strong { background: #777; color: #fff; border-color:#777; }
.page_nav .paging :first-child { border-radius: 8px 0 0 8px }
.page_nav .paging :last-child { border-radius: 0 8px 8px 0}
.view_quantity { position: absolute; right: 0; }

#total_count { font-size: 13px; color: #999}
.pageNav select { background: #fff; color: #999}

.pageNav { text-align:center; padding:30px 0 50px 0; overflow: hidden;}
.ui-dialog .pageNav { margin: 10px 0} 
#paging a,
#paging strong,
#paging span { display:inline-block; width:36px; height:26px; padding:10px 0 0 0;  border:#d1d4d7 1px solid; background:#fff; font-size: 13px; line-height:1.2em; vertical-align: middle; margin:0 -1px}
#paging span,
#paging strong { background:#6f7481; border-color:#6f7481;  color:#fff; text-decoration:underline}
#paging a.pageFirst,
#paging a.pageBefore,
#paging a.pageNext,
#paging a.pageLast {background:#f9f9f9 url(../images/btnTableArrow.png) no-repeat 7px 7px; color:#777; overflow: hidden; text-indent: -9999px; overflow: hidden  }
#paging a.pageBefore {background-position: -18px 7px}
#paging a.pageNext { background-position: -43px 7px}
#paging a.pageLast {background-position: -66px 7px}
#paging a:hover,
#paging a:focus {background-color:#6f7481; background-position: 7px -18px; color:#fff; border-color:#6f7481; }
#paging a.pageBefore:hover,
#paging a.pageBefore:focus { background-position: -18px -18px }
#paging a.pageNext:hover,
#paging a.pageNext:focus {background-position:-43px -18px}
#paging a.pageLast:hover,
#paging a.pageLast:focus {background-position:-66px -18px}
#paging :last-child { border-radius:0 8px 8px 0}
#paging :first-child { border-radius:8px 0 0 8px}


/* btn */

.btn {background: #777; color: #fff; font-size: 14px; border:none; border-radius: 4px; padding: 5px 30px; cursor: pointer; font-family:'Noto Sans', 'Noto Sans', dotum, gulim, verdana, sans-serif  }
.btn:hover, .btn:focus {color: #fff; background-color: #666 }
.pri {background:#00b2d9}
.pri:hover, .pri:focus,
.btn.btn_search:hover, .btn.btn_search:focus {background-color:#00a2c5}
.wrn {background:#ed8f14}
.wrn:hover, .wrn:focus {background-color:#dc8b22}
.dis { opacity: 0.5; cursor: default; }

.btn_area { text-align: right; padding:20px 0; clear: both; }
.btn_area_C {padding:0 0 20px 0; clear: both; text-align: center; }
.btn_area_C .btn { padding:5px 30px;}

.btn_area .btn,
.btn_area_center .btn { padding:10px 30px; border-radius: 4px; display: inline-block;}

.btn.btn_search {width:50px; height:32px; background:#00b2d9 url('../images/btn_searchW.png') no-repeat 55% 49%; font-size: 0; margin-left: -8px;border-radius:0 4px 4px 0}
.btn.btn_search2 { background:#00b2d9 url('../images/btn_searchW2.png') no-repeat 18% 52%; text-indent:23px}
.c10_setup_list .btn_area { border-bottom: solid 1px #ddd ; margin: 0 0 25px 0}
.c10_setup_list .btn_area_center { padding: 10px 0 0 0}

article.jsDiv .btn_area { text-align: center;border-top:solid 1px #ebebeb; padding: 14px 0}


.btn2_del { background: #fff url(../images/bg_input.png) no-repeat -60px 0px; border:#00a2c5 solid 1px;  display: inline-block; width: 15px;height: 15px; border-radius: 4px; overflow: hidden; vertical-align: middle; text-indent: -9999px; margin: -2px 12px 0 2px }
.btn2_del:hover,
.btn2_del:focus { background: #00a2c5 url(../images/bg_input.png) no-repeat -60px -60px;}



/* checkbox / radio */

input[type="checkbox"] {  }
input[type="checkbox"] + label::before,
input[type="checkbox"]:checked + label::before { cursor: pointer; content:""; display:inline-block; width: 18px;height: 18px; background: url("../images/bg_input.png") no-repeat 0 -30px; margin: 0 6px 3px -20px; vertical-align: middle }

input[type="checkbox"]:hover + label::before,
input[type="checkbox"]:focus + label::before {background-position: 0 -60px}
input[type="checkbox"]:hover + label,
input[type="checkbox"]:focus + label { color: #00b2d9 }

input[type="checkbox"]:checked + label::before { background: url("../images/bg_input.png") no-repeat 0 0;  }
input[type="checkbox"]:checked + label { color: #00b2d9 }


input[type="radio"] + label::before,
input[type="radio"]:checked + label::before { cursor: pointer; content:""; display:inline-block; width: 18px;height: 18px; background: url("../images/bg_input.png") no-repeat -30px -30px; margin: -1px 6px 3px -21px; vertical-align: middle;  }

input[type="radio"]:hover + label::before,
input[type="radio"]:focus + label::before {background-position: -30px -60px;}
input[type="radio"]:hover + label,
input[type="radio"]:focus + label { color: #00b2d9 }


input[type="radio"]:checked + label::before { background: url("../images/bg_input.png") no-repeat -30px 0;  }
input[type="radio"]:checked + label { color: #00b2d9 }

/* input */
.input { border: solid 1px #e3e3e3; border-radius: 3px; background: #f8f8f8; padding: 0 5px; margin: 2px; height: 32px; line-height: 1em;  box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
select.input {padding: 0 0 0 5px; }
textarea.input { height: auto; }
.input:hover,
.input:focus { border-color:#40b2cd; }

.input02 { width: 2% }
.input03 { width: 3% }
.input04 { width: 4% }
.input05 { width: 5% }
.input06 { width: 6% }
.input07 { width: 7% }
.input08 { width: 8% }
.input09 { width: 9% }
.input10 { width: 10% }
.input15 { width: 15% }
.input20 { width: 20% }
.input25 { width: 25% }
.input30 { width: 30% }
.input35 { width: 35% }
.input40 { width: 40% }
.input45 { width: 45% }
.input50 { width: 50% }
.input55 { width: 55% }
.input60 { width: 60% }
.input65 { width: 65% }
.input70 { width: 70% }
.input75 { width: 75% }
.input80 { width: 80% }
.input85 { width: 85% }
.input86 { width: 86% }
.input87 { width: 87% }
.input88 { width: 88% }
.input89 { width: 89% }
.input90 { width: 90% }
.input95 { width: 95% }
.input98 { width: 98% }
.input99 { width: 99% }

.width02,
.width03,
.width04,
.width05,
.width06,
.width07,
.width08,
.width09,
.width10,
.width15,
.width20,
.width25,
.width30,
.width35,
.width40,
.width45,
.width50,
.width55,
.width60,
.width65,
.width70,
.width75,
.width80,
.width85,
.width86,
.width87,
.width88,
.width89,
.width90,
.width95,
.width98 { position: relative; margin: 0 auto }

.width02 { width: 2% }
.width03 { width: 3% }
.width04 { width: 4% }
.width05 { width: 5% }
.width06 { width: 6% }
.width07 { width: 7% }
.width08 { width: 8% }
.width09 { width: 9% }
.width10 { width: 10% }
.width15 { width: 15% }
.width20 { width: 20% }
.width25 { width: 25% }
.width30 { width: 30% }
.width35 { width: 35% }
.width40 { width: 40% }
.width45 { width: 45% }
.width50 { width: 50% }
.width55 { width: 55% }
.width60 { width: 60% }
.width65 { width: 65% }
.width70 { width: 70% }
.width75 { width: 75% }
.width80 { width: 80% }
.width85 { width: 85% }
.width86 { width: 86% }
.width87 { width: 87% }
.width88 { width: 88% }
.width89 { width: 89% }
.width90 { width: 90% }
.width95 { width: 95% }
.width98 { width: 98% }


@media screen and (max-width:1300px){

	.nav>a {padding: 5px 4% 3px 4%; font-size: 17px}
	
	.user_name { padding-left: 1.5% }
	.container,
  .c10_store .table {  width: 96%; }
  .intro .h2 { width: 900px; }
  .article.catchphrase { background-position: center 86%; }
  .btn_more_intro_content {bottom: 3%}
  .useAgree,
  .thirdPartyAgree {width: inherit; padding: 0 3% 5px 3%}
  .jsDiv_container {margin-top: 7%}
  
  .btn.btn_reqCancel,
  .btn.btn_returnDelay { padding:5px; margin: 0 auto}
  
  .table th, .table td { font-size: 15px}
  .table tbody th, .table tbody td { padding: 8px }
    
}


@media screen and (max-width:960px){
    .h1 { width: 32%;}
    .h1 a {background-size: contain; background-position: 0 center}
    .nav { width: 65% }
    .nav>a { padding:4px 2%}
    .user_name { font-size: 17px; padding-left:1%}
    .header a.btn_login, .header a.btn_logout { width: 46px; height: 46px}
    .header a.btn_logout { margin-left:5px}
    .intro .h2,
    .user_content,
    .flow_img1,
    .masscomm2,
    .masscomm1,
    .faq_container,
    .container,
    ul.history_li,
    p.note1,
    .jsDiv_container { width: 96%;}
    
    .history ul { box-sizing: border-box}
    .c10_store .table { width: auto; }
    
    .c10_store .table td.store_tel {word-break: keep-all; min-width: 112px }
    
    /* d10 */
    #detailSearchBtn.btn.btn_search2 { background-position: center 10px;padding-top: 20px; text-indent: 0}
    .bookPublisher:before{ display: block;content: ""}
    
    /* e10 */
    #baroloanInfoTbl thead { position: fixed; left: -9999px}
    #baroloanInfoTbl tbody tr { display: block; position: relative; border: #ddd solid 1px; padding-bottom:6px; margin: 0 0 10px 0; border-radius:4px}
    #baroloanInfoTbl tbody td { display: inline-block; background:none; border:none; font-size: 14px; color: #999; padding:5px 10px 5px 0}
    #baroloanInfoTbl tbody td.title { display: block; padding: 12px 100px 10px 10px; color: #555; background: #f0efed; font-size: 16px}
    #baroloanInfoTbl tbody td.author:before,
    #baroloanInfoTbl tbody td.store_name:before,
    #baroloanInfoTbl tbody td.lib_name:before,
    #baroloanInfoTbl tbody td.date_req:before,
    #baroloanInfoTbl tbody td.date_loan:before,
    #baroloanInfoTbl tbody td.date_return:before,
    #baroloanInfoTbl tbody td.trans_code:before,
    #baroloanInfoTbl tbody td.td_note:before { display: inline-block; color:#00a2c5; padding:0 5px}
    
    #baroloanInfoTbl tbody td.author:before {content:"저작자"}
    #baroloanInfoTbl tbody td.store_name:before{content:"신청서점"}
    #baroloanInfoTbl tbody td.lib_name:before{content:"비치(예정)도서관"}
    #baroloanInfoTbl tbody td.date_req:before{content:"신청일~만기일"}
    #baroloanInfoTbl tbody td.date_loan:before{content:"대출일~반납예정일"}
    #baroloanInfoTbl tbody td.date_return:before{content:"반납일"}
    #baroloanInfoTbl tbody td.trans_code:before{content:"상태"}
    #baroloanInfoTbl tbody td.td_note:before{content:"비고"}
    

    td.date_req span,
    td.date_loan span{ display:inline; padding:0 3px}
    td.date_req span:before,
    td.date_loan span:before { display:inline; content: "~"}

    
    .btn_do1,
    .btn_do2,
    .btn_do3,
    .btn_do { position: absolute; right: 5px; top:0}
    
    #baroloanInfoTbl tbody td.reason_note { color: #ee8765}
    
    /* common */
    .btn { padding:5px 15px}
    
    .table thead th,
    .table thead td,
    .table tbody th,
    .table tbody td { border-left: none; border-right: none; padding: 8px 2px 8px 5px }

}


@media screen and (max-width:800px){
	
	.h2 { font-size: 36px; padding: 20px 0}
    .nav>a { font-size: 16px }
    .header a.btn_login, .header a.btn_logout { margin-left:0.5%; width: 40px; height: 40px}
    
    #book_search_total.input50 { width: 45%}
    #searchForm .btn {padding: 5px 12px}
    
    
    article.catchphrase { background-size: contain }
    .h2_catchphrase{ top: 15%; }
    .intro .h2 { width: 90%; }
    .jsDiv_container {margin-top: 10%}
    
    .intro .h2 { padding: 80px 0 30px 0}
    
    .masscomm1 li { height: 200px}
    .masscomm1 li span.img,
    .masscomm1 li span.youtube { height: 125px}

    
    /* 협약서점 c00 c10_store */
    .c10_store .table caption { border-top: none}
    
    /* */
    #searchForm label { position: fixed; left: -9999px}
    
    
    /* d00 */
    .bookPublisher:before { display: none}
    .bookISBN:before { display: block; content: ""}
    
    /* e10 */
    #start_date,
    #end_date { width: 15%}
    
}


@media screen and (max-width:640px){

    body{ font-size: 14px }
    .nav { min-width: inherit; }
    .header a.btn_login,
		.header a.btn_logout { position: fixed; right: 3%; top:38px}
		.header a.btn_login,
		.header a.btn_logout { top:46px}
    
    .intro .header { padding-top: 60px }
    .header { padding:20px 0 0 2% }
    .jsHeaderTop .header { top:-300px;}
    
    .h1 { float: none; margin: 0 auto; width: 60% }
	.h1 a {height: 50px; background-position: center}

    .nav input[type="button"].btn_navOpen.on,
    .nav input[type="button"].btn_navClose.on { display: block; position: fixed; left: 3%; top: 10px;}
    .jsHeaderTop .header .nav input[type="button"].btn_navOpen,
    .jsHeaderTop .header .nav input[type="button"].btn_navClos,
    .jsHeaderTop .header a.btn_login,
	.jsHeaderTop .header a.btn_logout { display: none}
    .nav { float: none; position: fixed; top: 0; left:-30%; z-index: 600; padding:15% 0 0 0; width: 30%; height: 100%; background: rgba(50,194,219,0.9) ;transition: all 0.3s ease 0s; display: table }
    .nav.on {left: 0;}
    .nav>a { display: inline-block; display: table-row; width: 100%; height: 9%; line-height:4em; text-align: center; padding: 0;vertical-align:middle; color: #fff; background: url("../images/border_BG.png") repeat-x 0 0;  }
    .nav>a:hover,
    .nav>a:hover { background-color: rgba(43,109,164,0.1); color:#fff}
    .logBtn {display:block; background: url("../images/border_BG.png") repeat-x 0 0 ;position: static; text-align: center;}
    
    
    .nav .logBtn * { display: block; line-height: 1em; text-align: center; margin: 5px auto;}
    .nav .user_name { color: #fff; font-size: 15px; padding: 20px 0 3px 0; }
    input.btnLlogin { width: 70%; padding:10px 0}
    .nav .logBtn .libLink { border:none; background:none; color:#fff; padding:5px 0; margin-top:20px}
    
    
    .h2_catchphrase{ top: 30%; text-indent:0 }
    .h2_catchphrase span { font-size: 40px; line-height: 1.4em }
    
    .catchphrase1 {font-size: 43px }
    .catchphrase1 .catch_word,
    .catchphrase2 .catch_word { font-size: 43px }
    .catchphrase2 { text-indent:0}

    .intro_nav.off { display: none }

    .h2 { font-size: 30px; padding: 10px 0 }
    .intro .h2 { padding-bottom:20px;}
        
    .btn_go { bottom: 42%; font-size: 14px; padding: 10px 0; width: 50%; margin-left: -25%;}

    .btn_more_intro_content {width: 50px; height: 50px; left: 50%; margin-left:-25px; bottom: 7%;}


    .intro_text {font-size: 15px; padding: 30px 5% 20px 5% }
    .intro_content dt, .intro_content dd { font-size: 13px }
    .flow_img1 {width: auto; margin: 0 5%; height: 160px }

    .user_content { width: 90%;}
    .howtouse, .about_refuse { width: auto; line-height: 1.1em }
    .howtouse ol ul,
    .about_refuse li ul {padding: 5px 0 10px}
    .howtouse ol>li { font-size: 14px; padding: 2px 0 2px 17px; text-indent: -15px; }
    .howtouse ol li li,
    .about_refuse li li {font-size: 13px; padding:1px 0 2px 0px; text-indent: -10px; line-height: 1.2em}
    .about_refuse li { font-size: 14px}
    p.note1 {width: 90%; margin:0 auto;}

    .awards { font-size: 14px; background-size: 10%; background:none; width: auto;padding: 0 0 0 5% }
    .awards li {padding: 2px 0;}

    .masscomm1,
    .masscomm2,
    .history ul { width: 90%; margin: 0 auto; }

    .masscomm1 li { width: 49%; height:230px}
    .masscomm1 li span.img,
    .masscomm1 li span.youtube { height: 155px }
    .masscomm2 li { width: inherit; }
    .btn_center {padding-top: 40px }

    .history ul { background: none;padding: 39px 0;}
    .history ul li { text-indent: -61px; padding: 4px 0 4px 61px; line-height: 1.2em }
    
    /* d10 */
    #book_search_total.input50 { width: 35%}
    #searchForm .btn {padding: 5px 2%}
   	#detailSearchBtn.btn{ padding-left:0; padding-right:0}
    
    .btn.btn_search {width: 35px}
    .btn { padding:5px 5px}
    .btn.btn_search2 { background-image:url('../images/btn_searchW2.png')}
    
    .bookPublisher:before { display: block; content: ""}
    
    /* e10 */
    #transaction_code, #date_option { margin: 0}
    select.input {padding: 0}
    
    #display_sel,
	#total_count { display: none}
		
	/* g10_board */
	#noticeTbl .writer {display: none}
}
	
	
@media screen and (max-width:480px){
		
	.masscomm1 li { height: 180px}
    .masscomm1 li span.img,
    .masscomm1 li span.youtube { height:110px}
    
    
	.c10_store table thead { position: fixed; left: -9999px;}
	.c10_store table th,
	.c10_store table td { border:none; background: none; text-align: left}
	.c10_store table tbody tr { display: block; position: relative; border-bottom: solid #ededed 1px}
	.c10_store table tbody th { font-size: 16px;}
	.c10_store table tbody th,
	.c10_store table tbody td.stroe_addr { display: block}
	
	.c10_store table tbody .location_btn { position: absolute; right:10%; top: -6px}
	.c10_store table tbody .store_tel { position: absolute; right:20%; top: 0; text-align: right;}
	
	.c10_store table th.stroe_name { width: inherit; background: #f0efed}
	.btn_view_map { width: 32px; height: 32px; background-size: cover}
	
	td.store_addr>div { padding: 0 0 7px 0 }
	td.store_addr>div.working_time { padding: 7px 0 0 0; border-top: #ededed solid 1px }
		
	/* d10 */
	#book_search_total.input50 { width: 30%}
    #detailSearchBtn.btn.btn_search2 { background-position: center 22px; padding:0; text-indent: -9999px; overflow: hidden}
	#searchForm .btn {padding: 5px 1%}
	#totalSearchBtn.btn { width: 10%}
	#indPubReqPop { font-size: 12px; height: 32px}
	
	.bookAuthor:before,
	.bookISBN:before,
	.bookPrice:before { display: block; content: "" }
	
	article.note2 { font-size: 13px; background-size: 66px 60px; background-position:10px 15px; padding-left:80px }
	article.note2 p { background-size: 4px 4px; padding:1px 0 1px 20px; background-position:10px 8px; text-indent: 0; line-height: 1.2em}
	
	/* e10  */
	
	.e00 #searchForm { padding: 18px 3%}
	#searchForm label[for="start_date"] { position: static; display: block; width:80%; height: 4px; line-height: 0; text-indent: -9999px; overflow: hidden; border-top:dotted 1px #ddd}
	#start_date, #end_date { width:30% }
	#transaction_code, #date_option { width: 38%; margin: 2px 2px 6px 2px}
	.e10_history #searchForm .btn.btn_search { padding: 38px 8%; top:22px}
}

.table_col_info {
	margin-bottom: 30px;
	font-size: 20px;
}

#loading_div { position: fixed; left:0; top:0; height:75%; width:100%; padding:25% 0 0 0; z-index: 3000; text-align: center;}
#loading_div img { padding:30px; border-radius:50%; background: #fff}
#loading_div p { padding:20px 0 0 0; color:#fff; font-size: 16px}

/* ~180227 1회용 이벤트 탑 배너 */

.alert180226 { background: rgba(255,143,33,0.9) url('../images/eventBG_180226.png') no-repeat center 100px ; color: #fff; text-align: center; width: 100%; height: 0; padding:0; position: fixed; left: 0; top: 0; z-index: 1000; overflow: hidden; transition: all 0.4s ease 0s}
.alert180226.on { height: 100%}
.alert180226 h2 { font-size: 42px;}
.eventH2_1 { padding:350px 0 0 0}
.eventH2_2 { padding:5px 0 20px 0}
.alert180226 p { font-size: 18px; padding:4px 0 }
.btnAlertClose { font-size: 16px; background: #fff; color:#666; border:none; padding:5px 30px; margin: 20px 0 0 0; border-radius:5px; font-family:'Noto Sans', 'Noto Sans', dotum, gulim, verdana, sans-serif;}
.btnAlertClose:hover,
.btnAlertClose:focus { background: #f9f9f9}

.home_info_span_red {color: red;}