@charset "utf-8";

/* 초기화 */
html {overflow-y:scroll}
body {
  margin:0;
  padding:0;
  font-size:0.9rem;
  font-family: 'Malgun Gothic', 'Dotum', Arial, Sans-serif;
  background:#fff;
}
ol, ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}
textarea, select {font-family:'Malgun Gothic', 'Dotum', Sans-serif;font-size:1em}
select {margin:0}
p {word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none}
.horUl:after {display:block;visibility:hidden;clear:both;content:""}
.row,
.row > * {
  margin: 0;
  padding: 0;
}

*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

button:focus {
  outline: none;
}
/* recommendBrowser */
.recommendBrowser {}
/* 화면낭독기 사용자용 */
#hd_login_msg {position:absolute;top:0;left:0;font-size:0;line-height:0;overflow:hidden}
.msg_sound_only, .sound_only {display:inline-block !important;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}

.screenOut {
  overflow: hidden;
	position: absolute;
	width: 0;
	height: 0;
	line-height: 0;
	text-indent: -9999px;
}
/* 쉐도우 */
.boxShadow3 {
  box-shadow: rgb(0 0 0 / 12%) 0px 3px 6px 1px;
}

/* flex */
.hanFlex {
  display: flex;
}

/* Element Open */
.open {
  display:block !important;
}

/* 마우스포인터 */
.pointer {cursor:pointer;}

.w-100per {
  width: 100%;
}
.w-50per {
  width: 50%;
}

.wrapperScreen {
  position: absolute;
  display: none;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.25) !important;
  z-index: 900;
}

.header {
  height: 80px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  box-shadow: rgba(0, 0, 0, 0.09) 0px 1px 12px;
  background-color: #fff;
}

.main-container {
  position: relative;
  padding: 80px 0 0;
  background-color: #fff;
}

.siteBrand {
  width: 170px;
}
.siteBrand .site-logo a {
  display: block;
  height: 39px;
  background: url('/img/logo.png') no-repeat;
}
.topNav {
  width: 170px;
}
.topNav {
  text-align: right;
}
.topNavShare {}
.topNavShare .openShare {
  border: 1px solid #ddd;
}
.topNavShare .openShare:hover {
  border-color: #aaa;
  background-color: #fafafa;
}
.topNavShare .openShare i {
  margin-right: 5px;
}
.topNavShare .openShare i,
.topNavShare .openShare .title {
  font-size: 0.85rem;
}

.container-inner,
.container-fluid {
  padding: 0;
}

/* sidebar 관련 */
.openSidebar {
  display: inline-flex;
  position: relative;
  height: 44px;
  padding: 0 5px 0 12px;
  vertical-align: middle !important;
  border: 1px solid #ddd !important;
  border-radius: 21px;
  text-align: inherit !important;
  user-select: auto !important;
  background-color: #fff;
}
.openSidebar:focus,
.openSidebar:hover {
  box-shadow: rgb(0 0 0 / 12%) 0px 3px 6px 1px;
}
.openSidebar div.icon.bar {
  line-height: 42px;
  padding-right: 12px;
}
.openSidebar div.icon.user {
  padding: 5px 0;
}
.openSidebar div.icon.bar i {
  font-size: 1rem;
}
.openSidebar div.icon.user i {
  font-size: 32px;
}
.openSidebar div.icon.user path {
  fill: #777;
}

.dropbtn {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 42px;
  z-index: 100;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  top: 52px;
  right: 0;
  background-color: #fff;
  border-radius: 10px;
  min-width: 160px;
  box-shadow: rgb(0 0 0 / 12%) 0px 0px 15px 0px;
  overflow: hidden;
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */


/* 페이징 */
.pg_wrap {
  clear:both;
  display:inline-block;
  padding: 30px 0;
}
.pg_wrap:after {
  display:block;
  visibility:hidden;
  clear:both;
  content:""
}
.pg {
  margin-left: -3px;
  text-align:center;
}
.pg_page, .pg_current {
  display:inline-block;
  vertical-align:middle;
}
.pg a:focus, .pg a:hover {
  text-decoration:none
}
.pg_page {
  color:#959595;
  font-size:1.083em;
  height:30px;
  line-height:28px;
  padding:0 5px;
  min-width:30px;
  text-decoration:none;
  border-radius:3px
}
.pg_page:hover {
  border-color: #3f51b5;
}
.pg_item {
  margin: 0 2px;
  background-color:#fff;
  border:1px solid #ddd;
}
.pg_item:hover {
  color: #fff;
  background-color: #3f51b5;
}
.pg_start {
  text-indent:-999px;
  overflow:hidden;
  background:url('../img/btn_first.gif') no-repeat 50% 50% #fff;
  padding:0;
}
.pg_prev {
  text-indent:-999px;
  overflow:hidden;
  background:url('../img/btn_prev.gif') no-repeat 50% 50% #fff;
  padding:0;
}
.pg_end {
  text-indent:-999px;
  overflow:hidden;
  background:url('../img/btn_end.gif') no-repeat 50% 50% #fff;
  padding:0;
}
.pg_next {
  text-indent:-999px;
  overflow:hidden;
  background:url('../img/btn_next.gif') no-repeat 50% 50% #fff;
  padding:0;
}
.pg_start:hover,.pg_prev:hover,.pg_end:hover,.pg_next:hover {
  background-color:#fafafa
}

.pg_current {
  display:inline-block;
  background:#7B88DB;
  border:1px solid #7B88DB;
  color:#fff;
  font-weight:bold;
  height:30px;
  line-height:30px;
  padding:0 5px;
  min-width:30px;
  border-radius:3px;
}



/* SNS설정 */
.snsMask {
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  background-color:#333;
  visibility: hidden;
  opacity: 0;
  /*visibility: visible;*/
  opacity: 0.7;
  transition: all 0.3s ease-in-out;
  z-index:99998;
}

.snsContainer {
  width: 100%;
  height: 400px;
  position: fixed;
  top: 50%;
  margin:0 auto 0;
  padding: 0 20px;
  /* background-color: #eee; */

  opacity: 0;
  /* visibility: visible; */
  visibility: hidden;
  opacity: 1;
  transition: all 0.3s ease-in-out;
  z-index:99999;
}

.snsMask.open {opacity:0.7;visibility:visible;}
.snsContainer.open {opacity:1;visibility:visible;}

.snsContent {
  width: 100%;
  max-width: 568px;
  height: 400px;
  display: block;
  margin: 0 auto 0;
  border-radius: 12px;
  box-shadow: rgb(0 0 0 / 12%) 0px 6px 16px;
  overflow-y: auto;

  background-color: #fff;

  /* transition: all 0.1s ease-in-out; */
}

.snsContInner {
  position: relative;
  padding: 20px;
}
.snsContInner:after {display:block;visibility:hidden;clear:both;content:""}

.closeBtnCont {
  margin: 0 0 20px 5px;
}
.closeBtnCont .closeSnsWindow {
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 49%;
  text-align: center;
  line-height: 32px;
  background-color: #fff;
}

.closeBtnCont .closeSnsWindow svg {
  font-size: 1rem;
  color: #555;
}

.closeBtnCont .closeSnsWindow:hover {
  background-color: #f0f0f0;
}

.snsUl {margin:0;padding:0;}
.snsUl:after {display:block;visibility:hidden;clear:both;content:""}
.snsUl li {float:left;width:50%;margin:0 0 10px 0;}
.snsUl li a {
  display:block;
  padding: 10px;
  border: 2px solid #fff;
  border-radius: 6px;
}
.snsUl li a:hover {border: 2px dashed #91aeec;}
.snsUl li a span {display:inline-block;}
.snsUl li a span.sns-image {float:left;width:24px;height:24px;line-height:24px;text-align:center;border-radius:4px;}
.snsUl li a span.sns-title {padding-left:7px;font-size:0.95rem;line-height:24px;}
.snsUl li a span.sns-image img {width:18px;height:18px;}
.snsUl li.twitter a span.sns-image {line-height:20px;background-color:#50abf1;}
.snsUl li.twitter a span.sns-image img {width:18px;height:18px;}
.snsUl li.facebook a span.sns-image {line-height:20px;background-color:#3b5a9a;}
.snsUl li.line a span.sns-image {line-height:20px;background-color:#4caf50;}
.snsUl li.katalk a span.sns-image {line-height:20px;background-color:#ffeb3b;}
.snsUl li.tumblr a span.sns-image {line-height:20px;background-color:#35465c;}
.snsUl li.naver a span.sns-image {line-height:20px;background-color:#1dc800;}
.snsUl li.kastory a span.sns-image {line-height:20px;background-color:#f8df00;}
.snsUl li.pinterest a span.sns-image {line-height:20px;background-color:#C8232C;}
.snsUl li.reddit a span.sns-image {line-height:20px;background-color:#ff5722;}
.snsUl li.telegram a span.sns-image {line-height:20px;background-color:#039be5;}
.snsUl li.pocket a span.sns-image {line-height:20px;background-color:#D81B60;}
.snsUl li.blogger a span.sns-image {line-height:20px;background-color:#ff7043;}

.snsContainer.open .snsContent {
  opacity: 1;
}

/* 광고 */
.adCode {
  text-align: center;
}

.adCodeTop1View,
.adCodeBtm1View {
  text-align: center;
  padding-bottom: 30px;
}
.adCodeTop1Main {
  padding-bottom: 20px;
}
.adCodeMid1View,
.adCodeMid2View {
  padding-bottom: 20px;
}

.footer {
  padding: 10px 15px;
  font-size: 0.8rem;
  color: #777;
  background-color: #fff;
  border-top: 1px solid #eaeaea;
}

/* goTop설정 */
.goContainer {
  position: fixed;
  right: 30px;
  bottom: 50px;
  width: 40px;
  height: 86px;
}

.goTop,
.goBottom {
  text-align: center;
  width: 40px;
  height: 40px;
  margin-top: 6px;
  line-height: 40px;
  border: 1px solid #ccc;
  background-color: #fff;
}

.goContainer button:hover {
  border-color: #3059c7;
  background-color: #3059c7;
}

.goContainer button:hover i {
  color: #fff;
}

@media screen and (min-width:1601px) {
	/* Desktop */
}
@media screen and (max-width: 1600px) {
	/* Tablet */
}
@media screen and (max-width: 1200px) {
	/* Tablet */
}
@media screen and (max-width: 1024px) {
  /*  */
}
@media screen and (max-width:768px){

  .header {
    height: 64px;
    padding: 0 20px;
  }
  .siteBrand {
    width: 40px;
  }
  .topNav {
    width: 40px;
  }
  .topNav .sbItemText {
    display: none;
  }
  .topNavShare .openShare i {
    margin-right: 0;
  }
  .siteBrand .site-logo a {
    background-image: url('/img/logoMobile.png');
  }

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