@charset "utf-8";

/* 노토산스 */
/* static에서 가져오지 못해 구글 CDN 사용 */
@import url("notosanskr2.css");

/* 오픈산스 */
@import url("opensans.css");
/* static에서 가져오지 못해 구굴 CDN 사용 */

/* CSS Document */
* {padding:0;margin:0;font-size: 100%;font-family: "noto sans kr", sans-serif;letter-spacing: -0.02em;}
header,main,footer,section,article {display: block;}
html {position: relative;}
html.hidden {overflow: hidden;}
html,body {width:100%;height:100%;}
ul,ol,li,dl,dt,dd {list-style:none;}
i,em,address {font-style:normal;}
label,button {cursor:pointer;}
button {border:none;background: none;}
hr,legend {display:none;}
img,fieldset,iframe {border:none;}
img {vertical-align:top;}
caption {display:none;}
input,button {box-sizing: border-box;vertical-align:middle;-webkit-appearance: none;border-radius: 0;outline: none;}
select {box-sizing: border-box;vertical-align:middle;border-radius: 0;outline: none;appearance: none;-moz-appearance: none;-webkit-appearance: none;}
select::-ms-expand {display: none;}
table {border:none; border-collapse:collapse; padding:0; border-spacing:0;table-layout: fixed;}
input::placeholder {font: 10px/1em 'noto sans kr',sans-serif;}
input::-webkit-input-placeholder {font: 14px/1em 'noto sans kr',sans-serif;}
input::-moz-placeholder { /* Firefox 19+ */font: 14px/1em 'noto sans kr',sans-serif;}
input:-ms-input-placeholder { /* IE 10+ */font: 14px/1em 'noto sans kr',sans-serif;}

.btn-box {margin-top: 15px;font-size: 0;text-align: center;}
.btn-box a {display: inline-block;margin: 0 5px;}
.btn-box button {display: inline-block;margin: 0 5px;}
.bt-type1 {padding: 0 18px;color: #fff;line-height: 35px;border-radius: 3px}
.bt-color1 {background-color: #0061ad;}
.bt-color2 {background-color: #808080;}

.row,.col {box-sizing: border-box;}
.row:after {display: block;content: '';clear: both;}
.guide-line {position: relative;width: 1200px;margin: 0 auto;box-sizing: border-box;}
.guide-line:after {display: block;content: '';clear: both;}

.skip a {display:block;position:absolute;left:0;top:-9999em;width:100%;background-color:#272727;color:#aaa;font: bold 12px/3.4 arial,sans-serif;text-align:center;z-index: 99999;}
.skip a:hover,.skip a:active,.skip a:focus {top:0;}

a {text-decoration:none; color:#000;}
a:hover {text-decoration:none;}
.blind {display:block;overflow:hidden;top:-1000em;position:absolute;}

/* float */
.clearfix:after {content:''; display:block; clear:both;}
.fl-left {float:left;}
.fl-right {float:right;}

/*기본*/
#wrap {width:100%;}
.header {position:relative;}
.container {position:relative;padding-bottom: 60px;*zoom:1;}
.container:after {display:block;clear:both;content:'';}
.footer {position:relative;}

/*공통부분*/
textarea {border:1px solid #c9c9c9; padding:5px;}
.container-row:after {display: block;clear: both;content: '';}
.radio-box {display: flex;flex-wrap: nowrap;align-items: center;position: relative;height: 50px;margin-top: 10px;border: 1px solid #eaeaea;}
.radio-label__wrap {flex: 1 1 auto;width: 100%;text-align: center;box-sizing: border-box;}
.radio-box.radio-el2 .radio-label__wrap {width: 50%;}
.radio-box.radio-el3 .radio-label__wrap {width: 33.3333%;}
.radio-box.radio-el4 .radio-label__wrap {width: 25%;}
.radio-box .radio-label__wrap + .radio-label__wrap {border-left: 1px solid #eaeaea;}
.radio-label {position: relative;padding-left: 33px;line-height: 22px;}
.radio-label:before {content: '';position: absolute;top: 4px;left: 0;width: 18px;height: 18px;background-image: url('https://images.joins.com/ui_joins/joins_store/joins2019/sub/k_radio.png');background-size: 36px;}
.radio-inp:checked + .radio-label:before {background-position: -18px 0;}
input[type="checkbox"],
input[type="radio"] {width: 0;height: 0;}

/*페이징*/
#paging {width:100%;text-align:center;margin:10px 0;}
#paging a {display: inline-block;border: 1px solid #aaa;width: 25px;height: 25px;line-height: 23px;border-radius: 3px;box-sizing: border-box;text-align: center;transition: 0.3s;}
#paging a.num:hover {color: #fff;background: #666;border-color: #666;}
#paging a.num.on {color: #fff;background: #666;border-color: #666;}

/* 폰트 */
.gotham-b {font-weight: bold;font-family: 'gotham';}
.gotham-m {font-weight: 500;font-family: 'gotham';}
.opensans-b {font-weight: bold;font-family: 'open sans';}
.opensans-sb {font-weight: 600;font-family: 'open sans';}

/* 트랜지션 */
.trs1 {transition: .1s;}
.trs2 {transition: .2s;}
.trs3 {transition: .3s;}
.trs4 {transition: .4s;}
.trs5 {transition: .5s;}

/* 공통팝업 */
.lpop {display: none;position: fixed;top: 0;bottom: 0;left: 0;right: 0;z-index: 1000;background: rgba(0, 0, 0, .6);}
.lpop__content-wrap {position: absolute;top: 50%;left: 50%;width: 360px;background: #fff;transform: translate(-50%,-50%);box-shadow: 0 0 15px rgba(0, 0, 0, .25);}
.lpop__content {padding: 50px 20px;}
.lpop__content-txt {width: 100%;color: #0a0a0a;font-weight: 500;font-size: 16px;line-height: 24px;letter-spacing: -0.04em;text-align: center;}
.lpop__btn-wrap {display: flex;}
.lpop__btn {width: 100%;height: 50px;color: #fff;font-size: 14px;line-height: 50px;letter-spacing: -0.04em;text-align: center;}
.lpop__btn--grey {background: #acadb1;}
.lpop__btn--black {background: #000;}
.lpop .radio-box {height: auto;margin-top: 20px;border: 0;}
.lpop .radio-label__wrap {border: 0 !important;}

/* 북마크 팝업 */
.pop-bm {display: none;position: fixed;top: 0;bottom: 0;left: 0;right: 0;z-index: 202;background: rgba(10, 10, 10, .9);}
.pop-bm--active {display: block;}
.pop-bm__content {position: absolute;top: 60px;bottom: 60px;left: 50%;width: 900px;margin-left: -450px;background: #fff;box-sizing: border-box;}
.pop-bm__inner {overflow: hidden;position: relative;height: 100%;}
.pop-bm__header {position: relative;z-index: 2;height: 52px;padding: 0 20px;border-bottom: 2px solid #1d1d1d;background: #fff;box-sizing: border-box;}
.pop-bm__tit {float: left;font-size: 18px;line-height: 50px;}
.pop-bm__pdate {float: left;margin-left: 10px;color: #86888f;font-size: 14px;line-height: 50px;letter-spacing: -0.02em;}
.pop-bm__util {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.pb__util-group:after {content: '';display: block;clear: both;}
.pb__util-item {position: relative;float: left;margin: 0 20px 0 21px;}
.pb__util-item:before {content: '';position: absolute;top: 2px;left: -21px;width: 1px;height: 20px;background: #eaeaea;}
.pb__util-item.before-hide:before {display: none;}
.pb__util-item:first-child:before {display: none;}
.pb__util-item.hide {display: none;}
.pb__util-item.hide + .pb__util-item:before {display: none;}
.pb__util-group.magazine .pb__util-item:before {content: '';position: absolute;top: 0;left: -21px;width: 1px;height: 20px;background: #eaeaea;}
.pb__util-group.magazine .pb__util-item:after {content: '';position: absolute;top: 0;right: -21px;width: 1px;height: 20px;background: #eaeaea;}
.pb__util-group.magazine .pb__util-item:first-child:before {display: block;}

.pb__util-btn {display: block;background-image: url('https://images.joins.com/ui_joins/joins_store/joins2019/sub/k_library.png');background-size: 80px;}
.pb__util-bm {width: 18px;height: 24px;background-image: url('https://images.joins.com/ui_joins/joins_store/joins2019/sub/k_library.png');background-position: -2px -62px;background-size: 80px;}
.pb__util-bm:hover {background-position: -21px -62px;}
.pb__util-bm.active {background-position: -59px -62px;}
.pb__util-bm.active:hover {background-position: -59px -62px;}
.pb__util-txt {width: 22px;height: 24px;background-position: -2px -223px;}
.pb__util-txt.active,
.pb__util-txt:hover {background-position: -24px -223px;}
.pb__util-img {width: 20px;height: 24px;background-position: -2px -197px;}
.pb__util-img.active,
.pb__util-img:hover {background-position: -24px -197px;}
.pb__util-print {width: 26px;height: 26px;margin-top: -2px;background-position: -47px -197px;}
.pb__util-print:hover {background-position: -47px -223px;}

.pb-article {height: calc(100% - 52px);}
.pb-article .mCSB_container {height: 100%;}
.pb-atc__inner {height: 100%;box-sizing: border-box;}
.pb-atc__txt {height: 100%;}
.pb-atc__img {overflow: auto;height: 100%;box-sizing: border-box;padding: 30px 30px 0;text-align: center;}
.pb-atc__img img{max-width: 100%;margin-bottom: 30px;}

.pb-atc__tit {font-weight: bold;font-size: 36px;line-height: 54px;}
.pb-atc__hd2 {margin: 50px 0;padding-bottom: 10px;border-bottom: 1px solid #eaeaea;}
.pb-atc__date {float: left;margin-top: 10px;font-size: 0;}
.pb-atc__date-sub {position: relative;float: left;padding-right: 21px;color: #999;font-size: 14px;line-height: 20px;}
.pb-atc__date-sub:after {content: '';position: absolute;top: 5px;right: 10px;width: 1px;height: 12px;background: #999;}
.pb-atc__date-sub:last-child:after {display: none;}
.pb-atc__fz {position: relative;margin: 0 20px 0 10px;padding-right: 20px;}
.pb-atc__fz:after {content: '';position: absolute;top: 5px;right: 0;width: 1px;height: 20px;background: #eaeaea;}
.pb-atc__fz-sub {float: left;margin-left: -1px;}
.pb-atc__fz-btn {display: block;position: relative;width: 28px;border: 1px solid #e2e2e2;color: #999;font-size: 12px;line-height: 28px;text-align: center;}
.pb-atc__fz-btn.active {z-index: 1;width: 26px;border: 2px solid #000;color: #000;line-height: 26px;}
.pb-atc__fz-btn.fz1 {font-size: 12px;}
.pb-atc__fz-btn.fz2 {font-size: 14px;}
.pb-atc__fz-btn.fz3 {font-size: 16px;}
.pb-atc__fz-btn.fz4 {font-size: 18px;}
.pb-atc__fz-btn.fz5 {font-size: 20px;}
.pb-atc__btn-bm {display: block;width: 18px;height: 24px;background-image: url('https://images.joins.com/ui_joins/joins_store/joins2019/sub/k_library.png');background-position: -40px -62px;background-size: 80px;}
.pb-atc__btn-bm:hover {background-position: -59px -62px;}
.pb-atc__con.fz1 {font-size: 12px;}
.pb-atc__con.fz2 {font-size: 14px;}
.pb-atc__con.fz3 {font-size: 16px;}
.pb-atc__con.fz4 {font-size: 18px;}
.pb-atc__con.fz5 {font-size: 20px;}
.pb-atc__photo {text-align: center;}
.pb-atc__photo2 {margin: 10px 0 50px;color: #86888f;letter-spacing: -0.05em;}
.pb-atc__realation {margin: 50px 0;}
.pb-atc__realation-list {margin-top: 10px;padding: 10px 20px;background: #f4f4f5;border-top: 1px solid #171717;}
.pb-atc__realation-item {position: relative;padding-left: 14px;margin-bottom: 5px;}
.pb-atc__realation-item:last-child {margin-bottom: 0;}
.pb-atc__realation-item:before {content:'';position: absolute;top: 50%;left: 0;width: 4px;height: 4px;background: #171717;transform: translateY(-50%);}
.pb-atc__realation-btn:hover {text-decoration: underline;}
.pb-atc__writer {margin-top: 50px;}
.pb-atc__sns {margin: 50px 0;text-align: center;}
.pb-atc__sns-util {display: inline-block;}
.pb-atc__sns-util:after {content: '';display: block;clear: both;}
.pb-atc__sns-item {float: left;margin-left: -1px;}
.pb-atc__sns-btn {display: block;position: relative;width: 40px;height: 40px;border: 1px solid #e2e2e2;}
.pb-atc__sns-btn.active {position: relative;z-index: 1;}
.pb-atc__sns-btn:after {content: '';position: absolute;top: 50%;left: 50%;background-image: url('https://images.joins.com/ui_joins/joins_store/joins2019/sub/k_library.png');background-size: 80px;transform: translate(-50%,-50%);}
.pb-atc__sns-btn.ka-talk:after {width: 26px;height: 24px;background-position: -50px -111px;}
.pb-atc__sns-btn.fb:after {width: 10px;height: 18px;background-position: -2px -151px;}
.pb-atc__sns-btn.twitter:after {width: 20px;height: 16px;background-position: -57px -163px;}
.pb-atc__sns-btn.ka-story:after {width: 10px;height: 18px;background-position: -24px -151px;}
.pb-atc__sns-btn.line:after {width: 26px;height: 24px;background-position: -2px -171px;}
.pb-atc__sns-btn:hover.ka-talk:after {background-position: -50px -137px;}
.pb-atc__sns-btn:hover.fb:after {background-position: -13px -151px;}
.pb-atc__sns-btn:hover.twitter:after {background-position: -57px -181px;}
.pb-atc__sns-btn:hover.ka-story:after {background-position: -37px -151px;}
.pb-atc__sns-btn:hover.line:after {background-position: -30px -171px;}
.pop-bm__close {position: absolute;top: 17px;right: 20px;z-index: 3;width: 18px;height: 18px;background-position: -2px -248px;background-image: url('https://images.joins.com/ui_joins/joins_store/joins2019/sub/k_library.png');background-repeat: no-repeat;background-size: 80px;}
.pop-bm__close:hover {background-position: -22px -248px;}

/* 라인 */
.bdt0 {border-top: 0 !important;}

/* 스크롤바 */
.scroll-bar2 .mCSB_dragger_bar {width: 4px !important;background-color: rgba(172,173,177,1) !important;border-radius: 0 !important;}
.scroll-bar2 .mCSB_draggerRail {width: 2px !important;background-color: rgba(226,226,226,1) !important;}
.scroll-bar2 .mCSB_container {margin-right: 0 !important;}

/* 간격 */
.mt10 {margin-top: 10px !important;}
.mt30 {margin-top: 30px !important;}

/* 로딩 */
.loading {position: fixed;top: 0;bottom: 0;left: 0;right: 0;z-index: 1000;}
.loading.black {background: rgba(0,0,0,.5);}
.loading .loading-bar__wrap {position: absolute;top: 50%;left: 50%;width: 78px;height: 40px;text-align: center;font-size: 1rem;transform: translate(-50%, -50%);}
.loading .loading-bar__wrap > div {height: 100%;width: 6px;display: inline-block;margin: 0 2.5px;animation: loading 1.2s infinite ease-in-out;}
.loading.black .loading-bar__wrap > div {background-color: #fff;}
.loading .loading-bar2 {animation-delay: -1.1s !important;}
.loading .loading-bar3 {animation-delay: -1s !important;}
.loading .loading-bar4 {animation-delay: -.9s !important;}
.loading .loading-bar5 {animation-delay: -.8s !important;}
.loading.white {background: rgba(255,255,255,.5);}
.loading.white .loading-bar__wrap > div {background-color: #1d1d1d;}
.loading.white .loading-bar3 {background: #6a3efd !important;}
@keyframes loading {
  0%,
  40%,
  to {transform:scaleY(.4);}
  20%{transform:scaleY(1);}
}