@charset "UTF-8";

/*
 * The pen 개편 (Moneyist/ Lifeist) M
 * 2021.01
 */

 /* web font */
/* @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800&family=Noto+Sans+KR:wght@400;700;900&display=swap'); */

/* IR */
.page-writer .sub-intro .search-area .btn-search::before {
  background-image:url('https://static.hankyung.com/img/www/w/thepen/2021/spr-icon.svg');
  background-repeat:no-repeat;
}

/* common */
#container {background:#f3f2f8}

.pannel {margin:6px 0; background:#fff}
.pannel:first-of-type {margin-top:0}
.pannel:last-of-type {margin-bottom:0}

.badge-best {position:absolute; top:-12px; left:55%; width:70px; height:65px; background:url('https://static.hankyung.com/img/www/w/thepen/2021/badge-best.svg') no-repeat 0 0/contain; transform:scale(0.6)}
.badge-best.life {background-image:url('https://static.hankyung.com/img/www/w/thepen/2021/badge-best-life.svg')}

.thumb {position:relative; border-radius:10px; overflow:hidden} 
.thumb > a {display:block; width:100%; height:100%}
.thumb img {width:100%; min-height:100%; object-fit:cover; object-position:center top}
.column-tit,
.event-tit {display:block; display:-webkit-box; text-overflow:clip; overflow:hidden; /*word-break:keep-all;*/ word-wrap:break-word; -webkit-box-orient:vertical}
.column-tit > a {display:block}

.writer-thumb {background:url('https://static.hankyung.com/img/www/w/thepen/2021/thumb-writer-default.png') no-repeat 0 0/cover; overflow:hidden}
.writer-thumb img {width:100%; height:100%; object-fit:cover; object-position:center top; vertical-align:top}

.series-tit,
.series-tit > a,
.event-period {color:var(--hk-text-secondary)}

.marker {display:inline-block; text-decoration:none !important; overflow-wrap:break-word; word-wrap:break-word; word-break:break-word; -webkit-tap-highlight-color:rgba(0,0,0,0); transition:all ease-in .3s}
.lifeist .marker {box-shadow:inset 0 -15px 0 #96ffb8}
.lifeist .marker:hover {box-shadow:inset 0 -35px 0 #96ffb8}
.moneyist .marker {box-shadow:inset 0 -15px 0 #feff6d}
.moneyist .marker:hover {box-shadow:inset 0 -35px 0 #feff6d}

.btn_more_wrap {padding:15px}

.slick-dots {text-align:center; line-height:1}
.slick-dots li {display:inline-block; margin:0; vertical-align:top}
.slick-dots li:first-child {margin-left:0}
.slick-dots button {position:relative; width:25px; height:20px; overflow:hidden; color:transparent}
.slick-dots button::before {content:''; position:absolute; top:50%; left:50%; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:5px; vertical-align:top; background:#ddd}
.slick-dots .slick-active button::before {background-color:#121212}


.category {overflow:hidden; position:relative; min-height:50px}
.category::before,
.category::after {content:''; display:block; position:absolute; top:0; width:25px; height:46px; z-index:10}
.category::before {left:0; background:-moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0.75) 51%, rgba(255,255,255,0) 100%); background:-webkit-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0.75) 51%, rgba(255,255,255,0) 100%); background:linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0.75) 51%, rgba(255,255,255,0) 100%)}
.category::after {right:0; background:-moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.75) 51%, rgba(255,255,255,1) 100%); background:-webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.75) 51%, rgba(255,255,255,1) 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.75) 51%, rgba(255,255,255,1) 100%)}

/* .category .inner-scroll {overflow-y:hidden; overflow-x:auto; position:absolute; top:0; left:10px; right:10px; height:0; padding-bottom:80px; -webkit-overflow-scrolling:touch}
.category ul {display:inline-flex; justify-content:space-between; width:100%; padding:0 10px}
.category li {padding:0 8px}
.category li a {display:block; position:relative; padding:0 2px; font-size:17px; line-height:50px; text-align:center; text-decoration:none; white-space:nowrap; overflow:hidden}
.category li.on a {font-weight:bold}
.category li.on a::before {content:''; position:absolute; left:0; right:0; bottom:-1px; height:4px; background:#121212} */


.category .inner-scroll {overflow-y:hidden; overflow-x:auto; height:auto; padding:0 10px; -webkit-overflow-scrolling:touch}
.category .inner-scroll::-webkit-scrollbar {display:none}
.category ul {display:inline-flex; justify-content:space-between; min-width:100%}
.category li {flex:0 0 auto; padding:0 10px;font-size: 16px; white-space:nowrap}
.category li a {position:relative; display:inline-block; padding:0 2px; font-size:17px; line-height:50px; box-sizing:border-box}
.category li.on a {font-weight:bold}
.category li.on a::before {content:''; position:absolute; left:0; right:0; bottom:-1px; height:4px; background:#121212}



.column-list-wrap .category {margin-bottom:-1px} 
.column-list-wrap .column-series-tit {padding:10px 20px; font-weight:bold; font-size:18px}
.column-list-wrap .column-list {border-top:1px solid #ededed}
.column-list > li {border-bottom:1px solid #ededed}
.column-list .column-cont {display:flex; flex-direction:row-reverse; justify-content:space-between; align-items:center; gap:10px; padding:15px 20px}
.column-list .column-cont .thumb-cont {flex:0 0 auto; width:120px}
.column-list .column-cont .thumb {position:relative; width:120px; height:75px}
.column-list .column-cont .txt-cont {flex:1 1 auto; width:calc(100% - 130px)}
.column-list .column-cont .series-tit {margin-bottom:5px; font-size:13px}
.column-list .column-cont .column-tit {font-weight:normal; font-size:19px; line-height:1.3; -webkit-line-clamp:2}
.column-list > li.event {background:#f3f3f3}
.column-list > li.event .column-cont {flex-direction:row; padding:20px}
.column-list > li.event .thumb-cont {width:150px; margin:0}
.column-list > li.event .thumb {width:150px; height:96px}
.column-list > li.event .txt-cont {flex:0 0 auto; width:calc(100% - 170px)}
.column-list > li.event .series-tit {margin-bottom:2px}
.column-list > li.event .event-tit {height:44px; font-weight:normal; font-size:18px; line-height:22px; -webkit-line-clamp:2}
.column-list > li.event .event-period {margin-top:4px; font-size:13px}
.column-list > li.event .slick-dots {transform:translateY(-10px)}
.column-list .date {display:block; margin-top:5px; font-size:12px}

.column-list-wrap .column-list .column-cont .by-writer {position:relative; width:70px}
.column-list-wrap .column-list .column-cont .by-writer .writer-thumb {width:70px; height:70px; border:1px solid #ddd; border-radius:100%}
.column-list-wrap .column-list .column-cont .by-writer + .txt-cont {flex:0 0 auto; width:calc(100% - 80px)}
.column-list-wrap .column-list .column-cont .by-writer .badge-best {top:-15px; left:49%}
.column-list-wrap .column-list .column-cont .thumb::after {content:''; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid rgba(0,0,0,.1); border-radius:10px; box-sizing:border-box; pointer-events:none}

.columnist-detail .column-list-wrap .column-list {border-top:1px solid #121212}
.columnist-detail .column-list .column-cont {padding:15px 0}
/* .columnist-detail .column-list .column-cont .thumb-cont {flex:0 0 auto; width:120px}
.columnist-detail .column-list .column-cont .thumb {width:120px; height:75px}
.columnist-detail .column-list .column-cont .txt-cont {flex:1 1 auto; width:calc(100% - 130px)} */
.columnist-detail .btn_more_wrap {padding-right:0; padding-left:0}

.list_loading {padding:15px 0; text-align:center}

.link-move {position:relative; padding-right:8px}
.link-move::after {content:''; display:inline-block; position:absolute; top:50%; right:0; width:6px; height:6px; border-top:1px solid #121212; border-right:1px solid #121212; transform:rotate(45deg) translateY(-50%)}

/* form */
.form-cont + .form-cont {margin-top:40px}
.form-cont .con-tit-wrap {position:relative; margin-bottom:6px}
.form-cont .con-tit-wrap .con-tit {display:inline-block; font-weight:900; font-size:25px; font-family:'Noto Sans KR', sans-serif; letter-spacing:-.05em; vertical-align:middle}
.form-cont .con-tit-wrap .con-tit > span {font-weight:800; font-family:'Montserrat', sans-serif; letter-spacing:0}
.form-cont .con-tit-wrap .con-tit-desc {display:inline-block; margin-left:10px; color:#888; vertical-align:middle}
.form-cont .con-tit-wrap .etc-area {margin-top:20px; display:flex; align-items:center; justify-content:space-between}
.form-cont .form-field {display:table; table-layout:fixed; width:100%; margin-top:35px}
.form-cont .form-field .cell {display:table-cell; vertical-align:top}
.form-cont .msg {margin-top:5px; color:#585858; font-size:14px}
.form-cont .gap {width:40px; font-size:20px; line-height:40px; text-align:center}

.inp-txt {-webkit-tap-highlight-color:rgba(255, 255, 255, 0)}
.form-cont .inp-txt::placeholder {color:#999}
.form-cont .inp-txt:-ms-input-placeholder {color:#999}
.form-cont .inp-txt::-ms-input-placeholder {color:#999}

.form-cont .inp-txt {display:block; width:100%; min-height:40px; padding:0 5px; border:none; border-bottom:1px solid #ddd; border-radius:0; font-size:20px; line-height:40px; outline:none; box-sizing:border-box; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; transition:all ease .1s}
.form-cont .inp-txtarea {display:block; width:100%; min-height:120px; padding:0 5px; border:none; border-bottom:1px solid #ddd; border-radius:0; font-size:20px; line-height:1.5; outline:none; overflow:hidden; overflow-x:auto; box-sizing:border-box}
.form-cont .inp-txtarea:focus,
.form-cont .inp-txt:not([readonly]):focus {border-bottom-width:2px; border-bottom-color:#121212}

.attach-file {position:relative}
.attach-file .inp-file {position:absolute; width:1px; height:1px; padding:0; border:none; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); outline:none}
.attach-file .btn-file {position:absolute; top:50%; left:5px; right:5px; width:calc(100% - 10px); min-height:40px; border:none; border-radius:0; font-size:16px; line-height:40px; text-align:center; cursor:pointer; box-sizing:border-box; transform:translateY(-50%); text-align:right}
.attach-file .inp-txt {padding-right:27%}
.inp-file:hover + .inp-txt,
.inp-file:focus + .inp-txt {border-bottom-width:2px; border-bottom-color:#121212}

.select-style {display:block; position:relative; min-height:40px; overflow:hidden; box-sizing:border-box}
.select-style select {position:relative; z-index:2; width:100%; height:100%; padding:0 30px 0 5px; border:none; border-bottom:1px solid #ddd; border-radius:0; background:transparent; font-size:20px; line-height:40px; vertical-align:middle; cursor:pointer; appearance:none; -webkit-appearance:none; -moz-appearance:none; -o-appearance:none; outline:none; box-sizing:border-box; transition:all ease .1s}
.select-style select:focus {border-bottom-width:2px; border-bottom-color:#121212}
.select-style select::-ms-expand {opacity:0}
.select-style select:focus::-ms-value {color:#121212; background:transparent}
.select-style:after {content:''; position:absolute; top:50%; right:5px; width:10px; height:10px; border-right:1px solid #121212; border-bottom:1px solid #121212; transform:rotate(45deg) translateY(-50%)}
.ie9 .select-style select {width:120%}

.radio-btn {margin:0 -10px}
.radio-btn li {float:left; padding:10px; box-sizing:border-box}
.radio-btn li label {display:block; height:60px; padding:0 5px; border:1px solid #ddd; border-radius:10px; color:#aaa; font-weight:800; font-size:18px; line-height:58px; font-family:'Montserrat', sans-serif; letter-spacing:0; text-align:center; cursor:pointer; box-sizing:border-box}
.radio-btn li input[type='radio'] {position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:none; overflow:hidden; clip:rect(0 0 0 0); color:transparent}
.radio-btn li input[type='radio']:checked + label {border-color:#121212; color:#121212}
.radio-btn:after {content:''; display:block; clear:both}
.radio-btn.num2 li {width:50%}

.check-style label {display:inline-flex; align-items:center; gap:6px; cursor:pointer}
.check-style label:before {content:''; display:inline-block; width:24px; height:24px; border:1px solid #585858; border-radius:5px; box-sizing:border-box}
.check-style input[type='checkbox'] {position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:none; overflow:hidden; clip:rect(0 0 0 0); color:transparent}
.check-style input[type='checkbox']:checked + label:before {border-color:#121212; background:#121212 url('https://static.hankyung.com/img/common/form/check-14x10@2x.png') no-repeat 50% 50%; background-size:14px 10px}

.btn-action-wrap {margin-top:40px; text-align:center}
.btn-action-wrap [class^="btn-"] {width:100%; min-height:60px; padding:0 15px; border-radius:9px; font-weight:900; font-size:22px; line-height:60px; font-family:'Noto Sans KR', sans-serif; letter-spacing:0; text-align:center; box-sizing:border-box}
.btn-submit {max-width:360px; background:#121212; color:#fff}

/* AD */
.ad-area,
.ad-bottom {text-align:center}
.ad-area > div,
.ad-bottom > div {margin:0 auto}

/* MAIN */
.main-top-tit {position:relative; text-align:center}
.main-top-tit::before {content:''; display:block; width:100%; height:50px}
.main-top-tit .tit,
.main-top-tit .go-pane {position:absolute; top:0; height:50px; display:flex; align-items:center; justify-content:center; font-weight:900; font-family:'Montserrat', sans-serif; white-space:nowrap; box-sizing:border-box; outline:none}
.main-top-tit .tit > a,
.main-top-tit .go-pane {overflow:hidden}
.main-top-tit .sub-tit {padding:14px 0; font-size:15px; text-align:center}
.main-top .column-list > li:last-child {border-bottom:none}
.main-top .column-list > li:first-child .column-cont {display:block; padding-top:0}
.main-top .column-list > li:first-child .column-cont .thumb-cont {flex:none; width:100%; margin:0}
.main-top .column-list > li:first-child .column-cont .thumb {position:relative; width:100%; height:0; padding-bottom:62.5%; overflow:hidden}
.main-top .column-list > li:first-child .column-cont .thumb > a {display:block; position:absolute; top:0; left:0; width:100%; height:100%}
.main-top .column-list > li:first-child .column-cont .txt-cont {flex:none; width:100%}
.main-top .column-list > li:first-child .column-cont .column-tit {/*max-height:60px;*/ margin-top:15px; font-weight:bold; font-size:22px; line-height:30px; -webkit-line-clamp:2}
.main-top .by-writer {margin-top:10px; font-size:14px; line-height:25px}
.main-top .by-writer .writer-thumb {display:inline-block; width:25px; height:25px; margin-right:10px; border-radius:100%; overflow:hidden; vertical-align:top}

/* lifeist */
.lifeist .main-top {background:#96ffb8}
.lifeist .main-top-tit::before {background:#feff6d}
.lifeist .main-top-tit .tit {right:0; z-index:2; width:calc(62% - 30px); background:#96ffb8; font-size:25px}
.lifeist .main-top-tit .tit span {position:relative; top:-5px; margin-right:3px; font-size:15px}
.lifeist .main-top-tit .tit::before {content:''; position:absolute; left:-30px; top:0; width:0; height:0; border-style:solid; border-width:0 0 50px 30px; border-color:transparent transparent #96ffb8 transparent}
.lifeist .main-top-tit .go-pane {left:0; width:38%; background:#feff6d; color:#757533; font-size:18px}
.lifeist .main-top-tit .go-pane > span {position:relative; top:-3px; margin-right:3px; font-size:11px}

.lifeist .main-top .column-list > li {border-bottom-color:#80df9f}
.lifeist .main-top .by-writer .writer-name {color:#585858}
.writer-lifeist {position:relative; padding:30px 0; text-align:center}
.writer-lifeist::before {content:''; display:block; position:absolute; top:0; left:0; right:0; bottom:0; background:url('https://static.hankyung.com/img/www/m/thepen/2021/bg-life-writer.png') no-repeat 50% 0/contain, url('https://static.hankyung.com/img/www/w/thepen/2021/bg-pattern.png') repeat 0 0/25px 25px}
.writer-lifeist .subject {position:relative; font-weight:900; font-size:25px; line-height:35px; font-family:'Noto Sans KR', sans-serif; letter-spacing:-.05em}
.writer-lifeist .desc {position:relative; margin:15px 0 40px; color:#888; font-size:14px; line-height:19px}
.writer-lifeist .link-writer {display:inline-block; position:relative; margin:0 15px; padding:0 5px; font-size:20px}
.writer-lifeist::after {content:''; display:block; position:absolute; top:35px; left:50%; width:75px; height:149px; margin-left:-170px; background:url('https://static.hankyung.com/img/www/w/thepen/2021/img-pen@2x.png') no-repeat 0 0/contain; transition:all ease-in-out .5s; opacity:0}
.writer-lifeist.active::after {opacity:1}

/* moneyist */
.moneyist .main-top {background:#feff6d}
.moneyist .main-top-tit::before {background:#96ffb8}
.moneyist .main-top-tit .tit {left:0; z-index:2; width:calc(62% - 30px); background:#feff6d; font-size:25px}
.moneyist .main-top-tit .tit span {position:relative; top:-5px; margin-right:3px; font-size:15px}
.moneyist .main-top-tit .tit::before {content:''; position:absolute; right:-30px; top:0; width:0; height:0; border-style:solid; border-width:50px 0 0 30px; border-color:transparent transparent transparent #feff6d}
.moneyist .main-top-tit .go-pane {right:0; width:38%; background:#96ffb8; color:#306f44; font-size:18px}
.moneyist .main-top-tit .go-pane > span {position:relative; top:-3px; margin-right:3px; font-size:11px}

.moneyist .main-top .column-list > li {border-bottom-color:#e2e35d}
.moneyist .main-top .by-writer .writer-name {color:#585858}
.writer-moneyist {position:relative; padding:15px 0 20px; background:url('https://static.hankyung.com/img/www/w/thepen/2021/bg-pattern.png') repeat 0 0/25px 25px; box-sizing:border-box}
.writer-moneyist .writer-info {position:relative}
.writer-moneyist .tit {margin:0 20px 15px 20px; font-weight:900; font-size:22px; font-family:'Noto Sans KR', sans-serif; letter-spacing:-.05em}
.writer-moneyist .desc {margin:10px 0 15px; color:#888; font-size:12px; line-height:1.5}
.writer-moneyist .writer-list {position:relative; text-align:center}
.writer-moneyist .writer-list::before,
.writer-moneyist .writer-list::after {content:''; display:block; position:absolute; top:0; z-index:2; width:35px; height:100%}
.writer-moneyist .writer-list::before {left:0; background:url('https://static.hankyung.com/img/www/w/thepen/2021/bg-overlay-l.png') repeat-y 0 0/35px 25px}
.writer-moneyist .writer-list::after {right:0; background:url('https://static.hankyung.com/img/www/w/thepen/2021/bg-overlay-r.png') repeat-y 0 0/35px 25px}
.writer-moneyist .writer-list .item {outline:none; min-height:145px}
.writer-moneyist .writer-list .item a {display:block; position:relative; text-decoration:none; outline:none}
.writer-moneyist .writer-list .item .writer-thumb {display:inline-block; width:80px; height:80px; border-radius:100%; overflow:hidden}
.writer-moneyist .writer-list .item .writer-thumb img {width:100%; min-height:100%; object-fit:cover; object-position:center top}
.writer-moneyist .writer-list .item .writer-name {display:block; margin:7px 0 3px; padding:0 4px; font-weight:bold; font-size:14px; word-break:keep-all}
.apply-writer-moneyist {position:absolute; top:17px; right:12px}
.apply-writer-moneyist .link-writer {padding:0 5px; font-size:16px}

/* SUB */
.sub-intro {position:relative; padding:30px 90px 30px 30px; background:url('https://static.hankyung.com/img/www/m/thepen/2021/bg-note-line.png') repeat-y center top/360px 30px, url('https://static.hankyung.com/img/www/w/thepen/2021/bg-pattern.png') repeat; word-break:keep-all; box-sizing:border-box}
.sub-intro::before {content:''; display:block; position:absolute; top:30px; right:30px; width:130px; height:259px; background:url('https://static.hankyung.com/img/www/w/thepen/2021/img-pen@2x.png') no-repeat 0 0/contain; transform:scale(.5); transform-origin:right top}
.sub-intro .sub-tit {margin-bottom:10px; font-weight:900; font-size:25px; font-family:'Noto Sans KR', sans-serif; letter-spacing:-.05em}
.sub-intro .intro-msg {position:relative; line-height:1.6}
.sub-intro .intro-msg p:not(.contact) {color:#585858}
.sub-intro .intro-msg p + p {margin-top:10px}

/* 필진신청 */
.page-apply .form-cont-wrap {padding:20px}
.page-apply .must-msg {margin-bottom:20px; text-align:center}
.page-apply .agree-check .check-style,
.page-apply .agree-check .link-move {vertical-align:top}
.page-apply .agree-check .link-move {line-height:24px}

/* 필진소개 */
.page-writer .sub-intro {min-height:176px}
.page-writer .sub-intro .search-area {position:relative; margin:20px 25px 0 0}
.page-writer .sub-intro .search-area .inp-txt {width:100%; height:50px; padding:0 45px 0 15px; border:1px solid #ddd; border-radius:10px; font-size:20px; line-height:50px; background:#fff; box-sizing:border-box; box-shadow:5px 5px 15px rgba(102,102,102,.26); outline:none}
.page-writer .sub-intro .search-area .inp-txt:focus {box-shadow:5px 5px 15px rgba(102,102,102,.5)}
.page-writer .sub-intro .search-area .btn-search {position:absolute; top:12px; right:10px; padding:5px}
.page-writer .sub-intro .search-area .btn-search::before {content:''; display:inline-block; width:17px; height:17px; outline:none; background-position:0 0; vertical-align:top}
.page-writer .filter-area {padding:20px}

.select-box-style {display:block; position:relative; min-height:50px; overflow:hidden; box-sizing:border-box}
.select-box-style select {position:relative; z-index:2; width:100%; height:100%; padding:0 50px 0 15px; border:1px solid #ddd; border-radius:10px; background:transparent; font-weight:bold; font-size:20px; line-height:50px; vertical-align:middle; cursor:pointer; appearance:none; -webkit-appearance:none; -moz-appearance:none; -o-appearance:none; outline:none; box-sizing:border-box}
.select-box-style select:focus {border-color:#121212}
.select-box-style select::-ms-expand {opacity:0}
.select-box-style select:focus::-ms-value {color:#121212; background:transparent}
.select-box-style:after {content:''; position:absolute; top:15px; right:20px; width:10px; height:10px; border-right:1px solid #121212; border-bottom:1px solid #121212; transform:rotate(45deg)}

.filter-alphabet-wrap {position:relative; min-height:30px; margin-top:20px; overflow:hidden; white-space:nowrap}
.filter-alphabet-wrap .inner-scroll {overflow-x:scroll; overflow-y:hidden; box-sizing:border-box; -webkit-overflow-scrolling:touch}
.filter-alphabet-wrap ul {display:inline-flex; justify-content:space-between; min-width:100%}
.filter-alphabet-wrap li {flex:0 0 auto; padding:0 7px; font-size:18px}
.filter-alphabet-wrap li a {display:inline-block; height:30px; padding:0 5px; line-height:30px; box-sizing:border-box}
.filter-alphabet-wrap ul:first-of-type li:first-child {padding-left:14px}
.filter-alphabet-wrap ul:last-of-type li:last-child {padding-right:14px}
.filter-alphabet-wrap li.on a {font-weight:bold}
.filter-alphabet-wrap:before,
.filter-alphabet-wrap:after {content:''; display:block; position:absolute; top:0; width:15px; height:50px; z-index:99}
.filter-alphabet-wrap:before {left:0; background:-moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0.75) 51%, rgba(255,255,255,0) 100%); background:-webkit-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0.75) 51%, rgba(255,255,255,0) 100%); background:linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0.75) 51%, rgba(255,255,255,0) 100%)}
.filter-alphabet-wrap:after {right:0; width:25px; background:-moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.75) 51%, rgba(255,255,255,1) 100%); background:-webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.75) 51%, rgba(255,255,255,1) 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.75) 51%, rgba(255,255,255,1) 100%)}

.columnist-list > ul > li {position:relative; padding:20px; box-sizing:border-box}
.columnist-list > ul > li + li {border-top:6px solid #ececec}
.columnist-list .writer-thumb {display:block; border:1px solid #ddd; border-radius:100%; box-sizing:border-box}
.columnist-list .writer-name {font-weight:900; font-size:25px; font-family:'Noto Sans KR', sans-serif; letter-spacing:-.05em}
.columnist-list .marker {padding:0 3px; font-weight:800; font-size:15px; font-family:'Montserrat', sans-serif; letter-spacing:0;}
.columnist-list .columnist-tit-wrap {display:flex; gap:20px; position:relative; align-items:center}
.columnist-list .columnist-tit-wrap .badge-best {top:-20px; left:40px;}
.columnist-list .columnist-tit-wrap .writer-thumb {flex:0 0 auto; width:75px; height:75px}
.columnist-list .columnist-tit {flex:1 1 auto; max-width:calc(100% - 200px); box-sizing:border-box}
.columnist-list .columnist-tit .writer-name {display:block}
.columnist-list .columnist-tit .marker + .writer-name {margin-top:4px}
.columnist-list .btn-profile {flex:0 0 auto; min-width:75px; min-height:30px; border:1px solid #585858; border-radius:15px; font-size:14px; line-height:28px; text-align:center; cursor:pointer; box-sizing:border-box; outline:none}
.columnist-list .series-tit {margin-top:20px; font-size:15px}
.columnist-list .series-tit a {color:#121212}
.columnist-list .latest-column {margin-top:10px}
.columnist-list .latest-column > li {position:relative; padding-left:15px}
.columnist-list .latest-column > li::before {content:''; display:inline-block; position:absolute; top:50%; left:4px; width:2px; height:2px; background:#121212; transform:translateY(-50%)}
.columnist-list .latest-column .column-tit {font-weight:normal; font-size:20px; line-height:35px; -webkit-line-clamp:1}
.no_list {padding:70px 0; font-size:20px; text-align:center}

.layer-profile {position:fixed; left:50%; top:calc(50% + 53px); display:flex; flex-direction:column; width:calc(100vw - 40px); max-width:680px; max-height:calc(100vh - 150px); z-index:-5; padding:20px; border:1px solid #ddd; border-radius:10px; background:#fff; box-shadow:0 0 25px rgba(0,0,0,.2); box-sizing:border-box; opacity:0; transform:translate(-50%, -50%) scale(.6); transition:all cubic-bezier(.175,.885,.32,1.275) .2s}
.layer-profile .writer-thumb {flex:0 0 auto; width:120px; height:120px; margin:0 auto}
.layer-profile dl {overflow-y:auto}
.layer-profile dl {overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#ddd transparent}
.layer-profile dl::-webkit-scrollbar {width:8px}
.layer-profile dl::-webkit-scrollbar-thumb {background-color:#ddd; border-radius:4px; background-clip:padding-box}
.layer-profile dl::-webkit-scrollbar-track {background-color:transparent}
.layer-profile dt {text-align:center}
.layer-profile dt .marker {margin:13px 0 7px}
.layer-profile dt .writer-name {display:block}
.layer-profile dd {margin-top:30px; font-size:16px; line-height:28px}
.layer-profile .btn-closed-profile {position:absolute; top:30px; right:30px}
.btn-closed-profile {width:30px; height:30px; outline:none}
.btn-closed-profile::before,
.btn-closed-profile::after {content:''; position:absolute; left:50%; top:0; width:2px; height:30px; background-color:#121212}
.btn-closed-profile:before {transform:translate(-50%) rotate(45deg)}
.btn-closed-profile:after {transform:translate(-50%) rotate(-45deg)}
.layer-profile.active {z-index:999; opacity:1; transform:translate(-50%, -50%) scale(1)}

/* 필진 상세 */
.columnist-detail {padding:0 20px}
.columnist-detail .columnist-tit {display:flex; align-items:center; gap:20px; padding:25px 0}
.columnist-detail .columnist-tit .writer-thumb-area {position:relative; flex:0 0 auto; width:100px}
.columnist-detail .columnist-tit .writer-thumb {display:block; width:100px; height:100px; border:1px solid #ddd; border-radius:100%; overflow:hidden}
.columnist-detail .columnist-tit .badge-best {top:-10px; right:-20px; left:auto}
.columnist-detail .columnist-tit .writer-info-area {flex:1 1 auto; width:calc(100% - 110px)}
.columnist-detail .marker {margin-left:-5px; padding-left:5px; font-weight:800; font-size:15px; font-family:'Montserrat', sans-serif; letter-spacing:0}
.columnist-detail .columnist-tit .writer-name {font-weight:900; font-size:24px; font-family:'Noto Sans KR', sans-serif; letter-spacing:-.05em; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.columnist-detail .columnist-tit .column-series-tit {font-size:15px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.columnist-detail .columnist-tit .etc {display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-top:5px}
.columnist-detail .columnist-tit .etc [class^="btn-"] {min-width:65px; min-height:25px; padding:0 5px; border:1px solid #ddd; border-radius:25rem; font-size:13px; line-height:23px; text-align:center; cursor:pointer; box-sizing:border-box; outline:none}
.columnist-detail .columnist-profile {display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:99999999; background:#fff; padding:55px 20px 20px 20px; font-size:15px; line-height:1.7; overflow-x:hidden; overflow-y:auto; box-sizing:border-box}
.columnist-detail.active .columnist-profile {display:block; }
.columnist-detail.active .columnist-profile .btn-closed-profile {position:absolute; top:20px; right:20px}


/* 베스트머니이스트 */
.bestwriter-area {padding:17px 7px; background-color:#fff}
.bestwriter-area .badge-best {top:-30px; left:49%; transform:scale(0.48)}
.bestwriter-area .tit {margin-bottom:10px; margin-left:13px; font-weight:900; font-size:22px; font-family:'Noto Sans KR', sans-serif; letter-spacing:-.05em;}
.bestwriter-area .bestwriter-list {display:flex; width:100%; border:1px solid #efefef; border-radius:15px; box-sizing:border-box; overflow:hidden}
.bestwriter-area .bestwriter-list .item {flex:1 1 auto; width:33.33336%; position:relative; outline:none; padding:20px 0 10px; vertical-align:middle; text-align:center}
.bestwriter-area .bestwriter-list .item:nth-child(2n) {background-color:#f8f8f8}
.bestwriter-area .bestwriter-list .item::before {content:''; display:block; position:absolute; top:16px; left:50%; width:100px; height:85px; background:url('https://static.hankyung.com/img/www/w/thepen/2021/laurel.svg') no-repeat; background-size:cover; transform:translateX(-50%)}
.bestwriter-area .bestwriter-list .item a {display:block; position:relative; text-decoration:none; outline:none}
.bestwriter-area .bestwriter-list .item .writer-thumb {display:inline-block; width:80px; height:80px; border-radius:100%; overflow:hidden}
.bestwriter-area .bestwriter-list .item .writer-thumb img {width:100%; min-height:100%; object-fit:cover; object-position:center top}
.bestwriter-area .bestwriter-list .item .writer-name {display:block; margin-bottom:1px; padding:0 4px; font-weight:bold; font-size:16px; letter-spacing:-0.075em; word-break:keep-all}
.bestwriter-area .bestwriter-list .item .writer-category {color:#4a4a4a; font-size:12px}

@media screen and (max-width:359px) {
	.columnist-list .columnist-tit-wrap {display:block}
	.columnist-list .columnist-tit-wrap .writer-thumb {float:left; margin-right:20px; margin-bottom:20px}
	.columnist-list .columnist-tit {width:auto; padding:0; max-width:unset}

	.bestwriter-area .bestwriter-list .item .writer-thumb {transform:scale(.8)}
	.bestwriter-area .bestwriter-list .item::before {transform:translateX(-50%) scale(.8)}
}
@media screen and (min-width:450px) {
    .category ul {justify-content:space-around}
}

/* OS dark mode */
@media (prefers-color-scheme: dark) {
    #container {background:#272729}
    .icon-arrow path {stroke:#fff}
    .logo-thepen {filter:invert(1)}
    .slick-dots li button,
	.btn-submit {background:#1c1c1e}
    .slick-dots li.slick-active button {background:#fff}
    .marker {box-shadow:inset 0 -15px 0 #323235 !important}
	/* .lifeist .marker {box-shadow:inset 0 -15px 0 #3d8b56}
	.moneyist .marker {box-shadow:inset 0 -15px 0 #7f8017} */

    .pannel,
    .main-top,
    .main-top-tit .tit,
    .writer-lifeist::before,
    .bestwriter-area {background:#000 !important}
    .main-top-tit::before,
    .main-top-tit .go-pane,
    .bestwriter-area .bestwriter-list .item:nth-child(2n) {background:#1c1c1e !important}
    .main-top .column-list > li,
    .bestwriter-area .bestwriter-list {border-width:0.5px; border-color:#323235 !important}
    .main-top-tit .go-pane,
    .main-top .by-writer .writer-name {color:#bdbdbd !important}
    .lifeist .main-top-tit .tit::before {border-bottom-color:#000}
    .moneyist .main-top-tit .tit::before {border-left-color:#000}
    .category::before,
	.filter-alphabet-wrap:before {background:-moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.75) 51%, rgba(0,0,0,0) 100%); background:-webkit-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.75) 51%, rgba(0,0,0,0) 100%); background:linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.75) 51%, rgba(0,0,0,0) 100%)}
    .category::after,
	.filter-alphabet-wrap:after {background:-moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 51%, rgba(0,0,0,1) 100%); background:-webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 51%, rgba(0,0,0,1) 100%); background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 51%, rgba(0,0,0,1) 100%)}
    .category li.on a::before {background:#fff}
    .writer-moneyist .writer-list::before,
    .writer-moneyist .writer-list::after {width:50px}
    .writer-moneyist .writer-list::before {background:linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 100%)}
    .writer-moneyist .writer-list::after {background:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%)}
    .apply-writer-moneyist {background-image:url('https://static.hankyung.com/img/www/w/thepen/2021/bg-money-writer@2x-dark.png')}
    .column-list-wrap .column-list,
    .column-list > li {border-width:0.5px; border-color:#323235}
    .column-list > li.event {background:#000}
    .column-list-wrap .column-list .column-cont .by-writer .thumb {border-width:0.5px}
    .check-style label:before {border-color:#bdbdbd}
	.form-cont .inp-txtarea,
    .form-cont .inp-txt,
	.select-style select,
	.select-box-style select,
	.columnist-detail .columnist-tit .send-mail {border-color:#323235}
    .link-move::after,
    .select-style:after,
    .form-cont .inp-txtarea:focus,
    .form-cont .inp-txt:not([readonly]):focus,
	.select-style select:focus,
	.select-box-style:after,
	.inp-file:hover + .inp-txt,
	.inp-file:focus + .inp-txt,
	.columnist-detail .btn-more-profile::before,
	.columnist-detail .btn-more-profile::after {border-color:#fff}
	.columnist-list .btn-profile,
	.page-writer .sub-intro .search-area .inp-txt {border-color:#1c1c1e; background:#1c1c1e; box-shadow:none}
	.page-writer .sub-intro .search-area .inp-txt:focus {box-shadow:none}
	.page-writer .sub-intro .search-area .btn-search::before,
	.columnist-detail .btn-mailto::before {filter:invert(1)}
	/* .columnist-list .series-tit a {color:#888} */
	.columnist-list > ul > li + li {border-color:#272729}
	.columnist-list .latest-column > li::before {background:#fff}
	.columnist-detail .columnist-profile.hidden::after {background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%)}

	.layer-profile {border:none; background:#1c1c1e}
    .bestwriter-area .bestwriter-list .item .writer-category {color:#fff}

	.columnist-detail .columnist-tit .etc [class^="btn-"] {border:none; background:#1c1c1e}
	.columnist-detail.active .columnist-profile {background:#000}
	.btn-closed-profile::before,
	.btn-closed-profile::after {background:#fff}
}