@charset "utf-8";

/* 초기화 */
html {overflow-y:scroll}
body { position: relative; margin:0; padding:0; font-size:1rem; font-family:'Noto Sans KR','Exo 2', 'Work Sans', 'Montserrat'; font-weight: 300; background:#fff; }
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 { }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
ul, dl,dt,dd {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img { vertical-align:middle; }
input, button {margin:0;padding:0;}
input[type="submit"] {cursor:pointer}
button {cursor:pointer}
textarea { resize: none; }
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none}
a:hover {color:#000;text-decoration:none}
*, :after, :before {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

input[type=text],input[type=password], textarea {
-webkit-transition:all 0.30s ease-in-out;
-moz-transition:all 0.30s ease-in-out;
-ms-transition:all 0.30s ease-in-out;
-o-transition:all 0.30s ease-in-out;
outline:none;
}

input[type=text]:focus,input[type=password]:focus, textarea:focus,select:focus {
-webkit-box-shadow:0 0 5px #9ed4ff;
-moz-box-shadow:0 0 5px #9ed4ff;
box-shadow:0 0 5px #9ed4ff;
border:1px solid #558ab7;
}

/* mobile-media-set */
@media (max-width: 992px) {
.mobile-padding { padding: 0 10px !important; }
.mobile-none { display: none !important; }
.mobile-only { display: block !important; }
}
@media (min-width: 992px) {
.mobile-only { display: none !important; }
}

/* reset */
.sound-only, .sound_only {display:inline-block !important;position:absolute;top:0;left:0;width:0;height:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}

/* 사이드뷰 */
.sv_wrap { position:relative; display: flex; letter-spacing: -1px; }
.sv_wrap .sv_member { display: flex; }
.sv_wrap .sv_member .profile_img { display: inline-block; align-self: center; }
.sv_wrap .sv_member .profile_img img { border-radius: 50%; }
.sv_wrap .sv_member .profile_name { display: inline-block; padding: 0 5px; align-self: center; }
.sv_wrap .sv { z-index:1000; display:none; font-size: .75rem; margin:5px 0 0; background:#333; -webkit-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2); -moz-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);
box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2); }
.sv_wrap .sv:before { content:""; position:absolute; top:-6px; left:15px; width: 0; height: 0; border-style: solid; border-width: 0 6px 6px 6px; border-color:transparent transparent #333 transparent; }
.sv_wrap .sv a { display:block; margin:0; padding:0 10px; line-height:30px; width:100px; color:#bbb; }
.sv_wrap .sv a:hover { background:#000; color:#fff; }
.sv_on { display: block !important; position: absolute; top:23px; left:0px; width:auto; height:auto; }
.sv_nojs .sv { display: block; }

/* 페이징 */
.pg_wrap { display: block; margin: 0 auto; padding: 20px 0 0; text-align: center; }
.pg { display: inline-block; }
.pg_page, .pg_current { display: inline-block; float: left; padding: 0 5px; min-width: 32px; line-height: 30px; text-decoration: none; border: 1px solid #ddd; margin: 0 2px; font-size: 14px; }
.pg a { background-color: #fff; }
.pg a:focus, .pg a:hover { background-color: #f3f3f3; }
.pg a.pg_empty:focus, .pg a.pg_empty:hover { background-color: #fff; }
.pg > a:first-child { /* border-top-left-radius: 5px; border-bottom-left-radius: 5px; */ }
.pg > a:last-child { /* border-top-right-radius: 5px; border-bottom-right-radius: 5px; */ }
.pg_page { background: #fff; text-decoration: none; }
.pg_start { background: url(../img/page_1.png) 50% 50% no-repeat; width: 32px; text-indent: -9999em; overflow: hidden; }
.pg_prev  { background: url(../img/page_2.png) 50% 50% no-repeat; width: 32px; text-indent: -9999em; overflow: hidden; }
.pg_next  { background: url(../img/page_3.png) 50% 50% no-repeat; width: 32px; text-indent: -9999em; overflow: hidden; }
.pg_end   { background: url(../img/page_4.png) 50% 50% no-repeat; width: 32px; text-indent: -9999em; overflow: hidden; }
.pg_current { display: inline-block; background: #3f4553 !important; border-color: #3f4553 !important; color: #fff !important; font-weight: normal; }
.pg_empty.pg_start { background-image: url(../img/page_empty_1.png); }
.pg_empty.pg_prev  { background-image: url(../img/page_empty_2.png); }
.pg_empty.pg_next  { background-image: url(../img/page_empty_3.png); }
.pg_empty.pg_end   { background-image: url(../img/page_empty_4.png); }


/* mymodal basic */
html.noscroll body { padding-right: 16px; }
.myModal { position: fixed; top: 0; left: 0; z-index: 1050; display: none; width: 100%; height: 100%; overflow: hidden; outline: 0; overflow-x: hidden; overflow-y: auto; transition: all 0.5s ease-in-out; background: rgba(0,0,0,.7); }
.myModal-dialog { position: relative; display: flex; width: 100%; pointer-events: none; max-height: calc(100% - 1.5rem); margin: 1.75rem auto; }
.myModal-content { position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; width: 100%; pointer-events: auto; background-color: #fff; border: 1px solid rgba(0,0,0,.2); border-radius: .3rem; outline: 0; overflow: hidden; max-height: calc(100vh - 3.5rem); top: -100px; transition: all 0.5s ease-in-out; }
.myModal-content.open { top: 0; opacity:1; visibility: visible; transition: all 0.5s ease-in-out; }
.myModal-header { display: -ms-flexbox; display: flex; -ms-flex-align: start; align-items: flex-start; -ms-flex-pack: justify; justify-content: space-between; padding: 1rem 1rem; border-bottom: 1px solid #dee2e6; border-top-left-radius: .3rem; border-top-right-radius: .3rem; -ms-flex-negative: 0; flex-shrink: 0; }
.myModal-body { position: relative; -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 1rem; overflow-y: auto; }
.myModal-footer { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: end; justify-content: flex-end; padding: 1rem; border-top: 1px solid #dee2e6; border-bottom-right-radius: .3rem; border-bottom-left-radius: .3rem; -ms-flex-negative: 0; flex-shrink: 0; }
.myModal .myModal-header button.closex,
.myModal .myModal-footer button.closex{ position: relative; width: 60px; height: 60px !important; padding: 0 !important; border-radius: 0; border: 0; background: transparent; outline: none; box-shadow: none; }
.myModal .myModal-header button.closex:before,
.myModal .myModal-header button.closex:after,
.myModal .myModal-footer button.closex:before, 
.myModal .myModal-footer button.closex:after{ content: ""; margin: auto; display: block; width: 50%; height: 1px; background: #fff; }
.myModal .myModal-header button.closex:before,
.myModal .myModal-footer button.closex:before{ transform: rotate(-45deg); }
.myModal .myModal-header button.closex:after,
.myModal .myModal-footer button.closex:after{ transform: rotate(45deg); }
@media (max-width: 992px) {
.myModal .myModal-dialog { max-height: 100%; margin: 0 auto; }
.myModal .myModal-content { max-height: 100vh; }
}

/*캡챠*/
#captcha { display: flex; font-size: 1rem; }
#captcha #captcha_audio { display: none; }
#captcha #captcha_mp3 { display: none; }
#captcha #captcha_info { display: none; }
#captcha #captcha_img,
#captcha #captcha_key,
#captcha #captcha_reload { position: relative; border: 1px solid #ddd; border-radius: 0; background: #fff; color: #3f4553; height: calc(1.5em + .75rem + 2px); padding: .375rem .75rem; }

#captcha #captcha_img { display: block;  width: 100px !important; }
#captcha #captcha_key { display: block;  min-width: 120px !important; margin: 0 5px 0 5px; max-width: 160px; }
#captcha #captcha_reload { display: block; width: 40px; text-indent: -999px; overflow: hidden; }
#captcha #captcha_reload:after { position: absolute; content: "\f021"; left: 0; right: 0; top: 0; bottom: 0; font-family: 'FontAwesome'; font-size: 20px; text-indent: 0; -webkit-flex: 1; -ms-flex: 1; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; -ms-flex-pack: center; }