@charset 'utf-8';
/*=============== info ======================================*/
.bl_info *, .info_blogbook * {
	font-family: 'KingSejongInstitute', sans-serif;
}

.bl_info * h2, .info_blogbook * h2 {
	font-size: 20px;
}

.bl_info * h3, .info_blogbook * h3 {
	font-size: 18px;
}

.bl_info * p, .info_blogbook * p {
	font-size: 16px;
	line-height: 25px;
}

.bl_info .noto_san {
	font-family: 'Noto Serif KR', sans-serif;
}

.bl_info .noto_se {
	font-family: 'Noto Serif KR', serif;
}

.bl_info .intro > .intro_txt {
	position: unset;
	padding-top: 40px;
}

.bl_info .intro_2 { 
	background: #f1f8e6;
	/*padding-bottom: 135%;*/
}

.bl_info .quote-block {
    background: #d8f3dc;
    border-left: 4px solid #2d6a4f;
    border-radius: 0 12px 12px 0;
    padding: 15px 10px;
    margin: 32px 0;
    font-family: 'Noto Serif KR', serif;
    font-size: 14px;
    color: #1B4332;
    line-height: 1.7;
    font-weight: 400;
    word-break: keep-all;
}

.bl_info .intro_guide {
	padding-bottom: 0;
}

.steps-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 24px;
	margin-top: 40px;
}

.step-card {
	background: #fafaf8;
	border: 1px solid #e0e8e2;
	border-radius: 20px;
	padding: 32px 24px;
	text-align: center;
	position: relative;
	transition: box-shadow 0.2s, transform 0.2s;
}

.step-card:hover { box-shadow: #fafaf8; transform: translateY(-4px); }
.step-num {
	width: 44px; height: 44px;
	background: #2d6a4f;
	color: #fff;
	border-radius: 50%;
	font-family: 'Noto Serif KR', serif;
	font-size: 18px;
	font-weight: 600;
	display: flex; align-items: center; justify-content: center;
	margin: 0 auto 20px;
}
.step-icon {
	font-size: 32px;
	margin-bottom: 12px;
	line-height: 1;
}
.step-card h3 {
	font-size: 18px;
	font-weight: 700;
	color: #1A1A1A;
	margin-bottom: 8px;
}
.step-card p {
	font-size: 16px;
	color: #888;
	line-height: 1.7;
	word-break: keep-all;
}
.step-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #52B788;
	font-size: 22px;
	padding-top: 16px;
}

.bl_info .bl_guide_link {
	display: flex;
	padding: 30px 10px;
	justify-content: center;
	gap: 20px;
}

.bl_info .bl_guide_link > a {
	width: 180px;
	padding: 10px 15px;
	border: 1px solid #e0e8e2;
	border-radius: 30px;
	background-color: #1B4332;
	font-family: 'KingSejongInstitute', sans-serif;
	font-weight: 600;
	color: #fff;
}

.bl_info .intro_3 { 
	background: #f2efe0;
}

.bl_info .intro_4 { 
	background: #e4e5ec;
}

.bl_info .intro_5 { 
	background: #609c46;
	color: #fff;
}

.bl_info .intro_6 { 
	background: #f3f3f3;
}

.bl_info .intro_cover { 
	background-image: url('/img/assets/nblog/m_info_7.jpg');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	padding: 40px 20px;
	position: relative;
}

.bl_info .intro_cover .swiper_cover {
	padding: 40px 30px 0;
	position: relative;
}

.bl_info .intro_cover .c_wrap {
	display: flex;
	flex-direction: row;
	gap: 20px;
}

.bl_info .intro_cover .c_slide {
	width: 50% !important;
	margin: 0px !important;
}

.swiper-button-prev:after,
.swiper-button-next:after {
	font-size: 28px;
	font-weight: 600;
}

.info_blogbook .size { 
	background: #f8fbf2;
}

.info_blogbook .size .bl_size_text {
	margin: 0px auto 20px;
	width: 350px;	
}

.info_blogbook .size .bl_size_img {
	display: flex;
	justify-content: space-evenly;
}

.info_blogbook .size .bl_size_img > div {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
}

.info_blogbook .price .content > div {
	float: unset;
	margin-top: 0;
}

.info_blogbook .price .section-center h2 {
	font-family: 'Noto Serif KR', serif;
}

.info_blogbook .price .section-center > p.bl_font {
	font-family: 'Noto Serif KR', sans-serif;
	font-size: 16px;
	color: #444;
	line-height: 28px;
	font-weight: 300;
	margin-top: 15px;
}

.info_blogbook .price .price-section {
	background: #FAFAF8;
	border-radius: 20px;
	border: 1px solid #E0E8E2;
	overflow: hidden;
	margin-top: 16px;
  }

.price-header {
    background: #1B4332;
    color: #fff;
    padding: 20px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
  }
.price-header h3 { font-size: 16px; font-weight: 500; }

.price-header span { font-size: 13px; opacity: 0.7; }

table.price-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	margin-top: 0px;
}

 table.price-table th {
	background: #F0F4F1;
	padding: 12px 16px;
	text-align: center;
	font-weight: 700;
	color: #1B4332;
	border-bottom: 1px solid #E0E8E2;
	font-size: 13px;
}

table.price-table td {
	padding: 14px 16px;
	text-align: center;
	border-bottom: 1px solid #E0E8E2;
	color: #444;
	font-weight: 500;
}
table.price-table td:first-child {
	font-weight: 700;
	color: #1A1A1A;
	text-align: left;
	padding-left: 24px;
}

table.price-table tr:last-child td { border-bottom: none; }
table.price-table tr:hover td { background: #F0FAF2; }

.price-notes {
	padding: 20px 5px;
	border-top: 1px solid #E0E8E2;
	text-align: left;
}

.price-note { font-size: 14px; color: #888; margin-bottom: 6px; padding-left: 14px; position: relative; }
.price-note::before { content: '·'; position: absolute; left: 4px; }

table.bulk-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	margin-top: 20px;
	border: 1px solid #E0E8E2;
	border-radius: 12px;
	overflow: hidden;
}

table.bulk-table th {
	background: #D8F3DC;
	padding: 12px 10px;
	font-size: 13px;
	font-weight: 700;
	color: #1B4332;
	border-bottom: 1px solid #E0E8E2;
	text-align: center;
}

table.bulk-table td {
	padding: 13px 10px;
	text-align: center;
	color: #444;
	border-bottom: 1px solid #E0E8E2;
}

table.bulk-table tr:last-child td { border-bottom: none; }

.highlight-discount {
	font-weight: 700;
	color:  #2D6A4F;
	font-size: 14px;
}

.info_blogbook .ending {
	background-image: url(/img/assets/nblog/m_info_9.jpg);
	color: #fff;
}

.info_blogbook .ending h2 {
	font-family: 'KingSejongInstitute', sans-serif;
}

.info_blogbook .ending p {
	font-family: 'KingSejongInstitute', sans-serif;
	font-size: 18px;
	line-height: 28px;
	font-weight: 300;
}

/*----------------------------------------------------------*/


figure {padding:0; margin:0}
iframe {width:100%; height:auto}
ol {padding:0}

[data-color='green'] {background-color:#37ab4b}
[data-color='red'] {background-color:#c75255}
[data-color='orange'] {background-color:#e87048}
[data-color='yellow'] {background-color:#fdc53a}
[data-color='yellow_green'] {background-color:#a7c062}
[data-color='blue'] {background-color:#85a8ae}
[data-color='lavender'] {background-color:#b7a9ca}
[data-color='indie_pink'] {background-color:#d19c98}
[data-color='brown'] {background-color:#b6916b}
[data-color='black'] {background-color:#000}
[data-color='white'] {background-color:#fff}

.top_tit {font-size:18px; display:block; margin:20px 0 10px}

/*.btn_next {position:fixed; left:0; bottom:0; width:100%; text-align:center; font-size:16px; padding:10px 0; background-color:#1fbbbb; border:1px solid #1fbbbb; color:#fff}*/
.bttom_btn {position:fixed; left:0; bottom:0; width:100%; height:47px; line-height:47px; z-index:2}
.bttom_btn button {width:50%; height:100%; float:left; font-size:14px}
.btn_ok {background-color:#1fbbbb; border:1px solid #1fbbbb; color:#fff}
.btn_close {border:1px solid #ccc; color:#787878}

.chk, 
.rdi > span{width:26px; height:26px; line-height:28px; border:1px solid #ccc}
.chk {float:left}
.rdi {line-height:28px}
.rdi > span{display:inline-block; border-radius:50%; float:left; margin-right:10px}
.chk:before ,
.rdi > span:before {content:'\f00c'; font-family:'Font Awesome 5 Free'; font-weight:900; color:#fff}
input:checked + .chk,
input:checked + .rdi > span {border-color:#1fbbbb; background-color:#1fbbbb}
.rdo_wrap label {width:calc(50% - 2px); height:30px; line-height:30px; text-align:center; border:1px solid #ccc; color:#787878; background-color:#fff; float:left}
.rdo_wrap input:checked + label {background-color:#1fbbbb; border-color:#1fbbbb; color:#fff}


.t_tit {width:calc(100% - 20px); min-height:30px; line-height:30px; padding:10px; border-bottom:1px solid #e6e6e6; display:inline-block}
.t_tit .pop_date {float:right}
.t_tit label {margin-right:5px}
.t_tit button {float:right; width:33px; height:33px; line-height:33px; border-radius:50%; text-align:center; font-size:23px; color:#ccc; border:1px solid #ccc}


.cover_img {position:relative; overflow:hidden}
.move_img {position:absolute; width:100%; height:100%; left:0; top:0; background-color:#efefef}
.move_img:before {content:'\c0ac\c9c4\0020\c120\d0dd'; width:100%; text-align:center; display:block; color:#999}
.move_img.on:before {display:none}
.img_move {position:absolute; left:0; top:0}


.t_setting {height:calc(100% - 190px); padding:10px 10px 0; overflow:hidden auto}
.t_setting article {width:100%; background-color:#fff; border:1px solid #e6e6e6; box-sizing:border-box; overflow:hidden; padding:15px; margin:0 0 10px 0}
.t_setting article h4 {margin-bottom:10px}
.t_setting article h4 a {float:right; padding:0 5px}
.t_setting article h4 i {font-size:20px}
.t_setting input[name=cover_title] {width:100%; margin:0 0 10px 0}
.t_setting .date input{width:calc(45% - 10px); padding:0 5px; float:left}
.t_setting .date .w5 {text-align:center}
.t_setting .rdo_wrap {margin:5px 0}

.select {padding:0 10px; height:calc(100% - 190px); overflow:hidden auto}
.select .list_folder {width:calc(100% - 10px); margin:20px 5px 10px; border-top:1px solid #e6e6e6; overflow-y:scroll}
.select .list_folder > li {height:35px; line-height:35px; padding-top:5px; text-align:left; border-bottom:1px solid #e6e6e6 }
.select .list_folder > li.group_sub {padding-left:25px; width:calc(100% - 25px); position:relative}
.select .list_folder > li.group_sub:before {content:'\2514'; position:absolute; left:5px}
.select .list_folder > li p {width:calc(100% - 110px); line-height:31px; float:left; color:#787878; padding:0 5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.select .list_folder > li p > span {background-color:#f5f5f5; border-radius:10px; padding:0 10px; margin:0 5px}
.select .btn_detail {display:inline-block; float:right; padding:0 10px; line-height:29px; background-color:#f5f5f5; border:1px solid #efefef; border-radius:2px; font-size:12px; color:#525252}


.select_twit {height:calc(100% - 212px)}
.select_twit .list_folder {height:calc(100% - 155px)}
.select_count {width:calc(100% - 20px); padding:0 10px; text-align:center; position:fixed; left:0; bottom:47px; border-top:1px solid #e6e6e6; background-color:#f5f5f5}
.select_count div {width:calc(28% - 20px); position:relative; padding-left:20px; display:inline-block}
.select_count label {width:20px; height:20px; line-height:20px; border:1px solid #e6e6e6; margin-right:5px; color:transparent; position:absolute; left:0; bottom:10px }
.select_count input:checked + label{color:#fff; background-color:#1fbbbb; border-color:#1fbbbb}
.select_count .count_sel:after {content:'\007c'; padding:0 0 0 5px; display:inline-block}
.select_count div:nth-child(2) {width:calc(49% - 33px); border-width:0 1px; padding:0 10px 0 30px; border-style:solid; border-color:#e6e6e6; box-sizing:border-box}
.select_count div:nth-child(2) label {left:10px}




.t_post {height:calc(100% - 47px); overflow:hidden}
.t_post .list_post {width:calc(100% - 20px); height:calc(100% - 80px); padding:10px 10px 0; background-color:#f5f5f5; overflow:hidden auto}
.t_post .list_post li {width:100%; min-height:100px; max-height:210px; border:1px solid #e6e6e6; background-color:#fff; margin-bottom:10px}
.t_post .list_post .date {height:40px; padding:0px 10px 0 0; position:relative}
.t_post .list_post .date label {position:absolute; left:0; top:0}
.t_post .list_post .date span:not(.fas) {display:inline-block; padding:5px 10px 0 30px}
.t_post .list_post .btn_detail {border:1px solid #ccc; height:30px; line-height:30px; padding:0 12px; margin:10px 0 0 0; border-radius:15px; float:right}
.t_post .list_post .txt {margin:10px; min-height:18px; max-height:45px; line-height:18px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.t_post .list_post .post_img {width:calc(100% - 30px); padding:0 15px 10px; display:inline-block}
.t_post .list_post .post_img > div { height:85px; background:center / cover no-repeat #f2f2f2; border:1px solid #ddd; box-sizing:border-box}
.t_post .list_post .post_img .w50{width:calc(50% - 5px); margin-left:5px; position:relative}
.t_post .list_post .post_img .img_more:before{content:'\002b'; position:absolute; width:100%; height:100%; background:rgba(0,0,0,0.6); color:#fff; text-align:center; line-height:85px; font-size:20px}

.t_post .list_post li.on,
.t_post .list_post li.on .btn_detail {border-color:#1fbbbb}
.t_post .list_post li.on input[type='checkbox'] + label {background-color:#1fbbbb; color:#fff; border-color:#1fbbbb}
.t_post .list_post li.on .btn_detail {background-color:#1fbbbb; color:#fff}

.tw_post {height:calc(100% - 47px); overflow:hidden}
.tw_post .tweet_list {width:100%; height:calc(100% - 60px); display:inline-block; overflow-y:scroll; overflow-x:hidden}
.tw_post .tweet_list > li {background-color:#fff; padding:10px; display:inline-block; border-bottom:1px solid rgb(239, 243, 244)}
.tw_post .tweet_list label {margin-right:10px}
.tw_post .user_info {display:inline-block}
.tw_post .user_info > div{display:inline-block; width:calc(100% - 40px)}
.tw_post .user_info small {display:block; color:rgb(83, 100, 113)}
.tw_post .user_info span {display:inline-block; line-height:40px; float:left; text-overflow:ellipsis; overflow:hidden; white-space:nowrap}
.tw_post .user_info .user_img {width:40px; height:40px; border-radius:50%; background:center / cover no-repeat; margin-right:10px}
.tw_post .user_info .user_nick {width:calc(40% - 45px); font-weight:bold}
.tw_post .user_info .user_name {width:calc(35% - 30px); padding:0 10px}
.tw_post .user_info .tweet_data {width:calc(25% - 25px)}
.tw_post .user_info button {float:right; font-size:16px; line-height:40px; margin-left:10px}

.tw_post .tweet_cont {padding:10px 0}
.tw_post .tweet_quote {border:1px solid rgb(207, 217, 222); margin:10px 0 10px 40px; border-radius:10px; display:inline-block; padding:5px 10px}
.tw_post .tweet_pic {width:100%; margin-top:15px; display:inline-block; border-radius:10px; overflow:hidden}
.tw_post .tweet_img {background:center / cover no-repeat; overflow:hidden; float:left}
.tw_post .tweet_pic:not(.pic_1) .tweet_img{width:calc(50% - 2px)}
.tw_post .pic_1 .tweet_img {width:100%}
.tw_post .pic_2 .tweet_img:nth-child(2) {margin-left:4px}
.tw_post .pic_3 .tweet_img:nth-child(2),
.tw_post .pic_3 .tweet_img:nth-child(3){margin-left:4px}
.tw_post .pic_3 .tweet_img:nth-child(3) {margin-top:4px}
.tw_post .pic_4 .tweet_img:nth-child(even) {margin-left:4px}
.tw_post .pic_4 .tweet_img:nth-child(3),
.tw_post .pic_4 .tweet_img:nth-child(4) {margin-top:4px}

.tw_post .tweet_media {width:100%}

.tw_graph {width:100%; height:85px; border-radius:10px; overflow:hidden; border:1px solid rgb(207, 217, 222); margin-top:10px}
.tw_graph li {display:inline-block}
.tw_graph .img {width:85px; height:100%; background:center / cover no-repeat; border-right:1px solid rgb(207, 217, 222); float:left}
.tw_graph .info {width:calc(100% - 111px); padding:10px}
.tw_graph .info * {display:block}
.tw_graph .info span {}
.tw_graph .info p {width:100%; height:20px; overflow:hidden; text-overflow:ellipsis}


.tweet_vote {margin-top:15px}
.tweet_vote strong {margin-bottom:10px; display:block}
.tweet_vote ul {display:inline-block; width:100%}
.tweet_vote li {width:100%; height:40px}
.tweet_vote span {display:inline-block; height:30px}
.tweet_vote div {max-width:calc(100% - 45px); position:relative}
.tweet_vote div span {position:absolute}
.tweet_vote .gauge {padding:0 3px; background-color:rgb(207, 217, 222); border-radius:3px; left:0; top:0}
.tweet_vote .txt {left:10px; right:10px; line-height:30px; z-index:2}
.tweet_vote .per {float:right; width:40px; text-align:right}


.tw_goods {border-width:1px 0; border-style:solid; border-color: rgb(207, 217, 222); line-height:40px}
.tw_goods span {display:inline-block}
.tw_goods span:first-child {padding-right:10px}
.tw_goods span b {margin-right:5px}
.tw_icon {width:100%}
.tw_icon > * {width:calc(33.33% - 3px); text-align:center; display:inline-block}



/*=========== cover =================================*/


.cover {height:calc(100% - 190px); overflow:hidden auto}
.cover .cover_style {padding:0 10px}
.cover .style {width:100%; display:inline-block; margin:20px 0 0px}
.cover .style li {width:calc(50% - 20px); padding:10px; float:left; text-align:center}
.cover .style li img {margin-bottom:15px; border:1px solid #ddd}
.cover .cover_wrap {width:300px;height:398px; margin:20px auto; position:relative; overflow:hidden; box-shadow:0 2px 8px rgb(0 0 0 / 50%)}
.cover .cover_wrap > *:not(.cover_img) {position:absolute}

.cover .blog_name {font-size:10px; position:relative; display:none} 
.cover .blog_name:after {content:'\b2d8\c758\0020\c2a4\d1a0\b9ac'}

.cover .cover_wrap:not([data-cover='white']) * {color:#fff} 
.cover .cover_wrap .t_logo {background:center / contain no-repeat}
.cover .cover_wrap[data-cover='story'] .t_logo,
.cover .cover_wrap[data-cover='white'] .t_logo {display:none}

.cover .cover_wrap[data-cover='wide'] .cover_img {width:100%; height:195px; margin-top:155px}
.cover .cover_wrap[data-cover='wide'] .move_img:before {line-height:195px}
.cover .cover_wrap[data-cover='wide'] .cover_title {width:calc(100% - 20px); text-align:center; top:60px; left:10px; font-family:'NanumSquare'; font-weight:800}
.cover .cover_wrap[data-cover='wide'] .cover_date {top:77px; left:0; width:100%; text-align:center; transform:scale(0.7)}
.cover .cover_wrap[data-cover='wide'] .cover_date span {font-size:10px; font-family:'ArialUnicodeMs-kopub'; font-weight:300}
.cover .cover_wrap[data-cover='wide'] .t_logo {
	width:60px; left:calc(50% - 30px); height:8px; 
	bottom:18px; background-image:url('/img/assets/nblog/logo_txt.png');
}
.cover .cover_wrap[data-cover='wide'] img.c_title_bg { display: none; }

.cover .cover_wrap[data-cover='square'] .blog_name {display:block; top:163px; transform:scale(0.7); margin-left:-17px; width:100%; font-family:'ArialUnicodeMs-kopub'}
.cover .cover_wrap[data-cover='square'] .blog_name:after {font-family:'ArialUnicodeMs-kopub'}
.cover .cover_wrap[data-cover='square'] .cover_title {top:175px; left:30px; font-size:10px; letter-spacing:-1.3px; font-family:'ArialUnicodeMs-kopub'; font-weight:bold}
.cover .cover_wrap[data-cover='square'] .cover_date {right:-50px; bottom:113px; transform:rotate(90deg)}
.cover .cover_wrap[data-cover='square'] .cover_date * {font-size:24px; font-family:'Bebas'; font-weight:bold}
.cover .cover_wrap[data-cover='square'] .start_date:after {content:'\002d'; display:inline-block; padding-left:5px}
.cover .cover_wrap[data-cover='square'] .cover_img{width:169px; height:169px; margin:199px 0 0 30px}
.cover .cover_wrap[data-cover='square'] .move_img:before {line-height:189px}
.cover .cover_wrap[data-cover='square'] .t_logo {
	width: 45px; height: 42px; right: 33px; top: 52px; 
	background-image:url('/img/assets/nblog/logo.png');
}
.cover .cover_wrap[data-cover='square'] img.c_title_bg { display: none; }

.cover .cover_wrap[data-cover='modern'] .blog_name {left:29px; top:33px; font-size:10px; transform:scale(0.8); display:block}
.cover .cover_wrap[data-cover='modern'] .cover_title{padding-left:33px; top:48px; font-size:10px; font-family:'ArialUnicodeMs-kopub'; font-weight:bold}
.cover .cover_wrap[data-cover='modern'] .cover_title:before {content:''; width:20px; height:3px; background-color:#fff; display:block; position:absolute; left:0; top:-10px}
.cover .cover_wrap[data-cover='modern'] .t_logo {
	width: 20px; height: 19px; top: 40px; right: 28px; 
	background-image:url('/img/assets/nblog/logo.png');
}
.cover .cover_wrap[data-cover='modern'] .cover_date {transform:rotate(-90deg); right:5px; bottom:45px}
.cover .cover_wrap[data-cover='modern'] .cover_date:before {content:'\004c\004f\0047\0020\004f\0046'; font-size:50px; font-family:'Bebas'; font-weight:bold}
.cover .cover_wrap[data-cover='modern'] .cover_date * {width:100%; display:block; font-size:50px; font-family:'Bebas'; font-weight:bold}
.cover .cover_wrap[data-cover='modern'] .cover_date .start_date:after{content:'\002d'; font-family:'Bebas'}
.cover .cover_wrap[data-cover='modern'] img.c_title_bg { display: none; }


.cover .cover_wrap[data-cover='story'] .cover_img {width:186px; height:249px; margin:50px auto 0}
.cover .cover_wrap[data-cover='story'] .move_img:before {line-height:249px}
.cover .cover_wrap[data-cover='story'] .cover_title {width:100%; font-size:12px; top:320px; text-align:center; font-family:'NanumSquare'; font-weight:bold}
.cover .cover_wrap[data-cover='story'] .cover_title:after {content:''; width:8px; height:1px; background-color:#fff; display:block; margin:10px auto 0; font-family:'NanumSquare'; font-weight:bold}
.cover .cover_wrap[data-cover='story'] .cover_date {text-align:center; bottom:22px; width:100%; font-size:10px; transform:scale(0.6)}
.cover .cover_wrap[data-cover='story'] img.c_title_bg { display: none; }

.cover .cover_wrap[data-cover='white'] {background:#fff}
.cover .cover_wrap[data-cover='white'] .cover_date {top:55px; width:100%; text-align:center; font-size:10px; transform:scale(0.7); font-family:'NanumSquare'; font-weight:200}
.cover .cover_wrap[data-cover='white'] .cover_title {width:100%; font-size:13px; top:70px; text-align:center; font-family:'KoPub Batang'}
.cover .cover_wrap[data-cover='white'] .cover_title:after {content:''; width:15px; height:1px; background-color:#6b6c6b; display:block; margin:25px auto 0; font-family:'KoPub Batang'}
.cover .cover_wrap[data-cover='white'] .cover_img {width:256px; height:202px; margin:170px auto 0}
.cover .cover_wrap[data-cover='white'] .move_img:before {line-height:202px}
.cover .cover_wrap[data-cover='white'] img.c_title_bg { display: none; }


.cover .cover_wrap[data-cover='FT'] .cover_img {
	width:100%; height: 100%; margin-top:0px;
}
.cover .cover_wrap[data-cover='FT'] .move_img:before {line-height: 398px}
.cover .cover_wrap[data-cover='FT'] .cover_title {
	width: /*calc(100% - 20px)*/ 224px; text-align:center; color: #333; font-family:'NanumSquare'; font-weight:800;
	top: 38px; left: calc(50% - 108px); z-index: 2;}
.cover .cover_wrap[data-cover='FT'] .cover_date {display: none;}
.cover .cover_wrap[data-cover='FT'] .t_logo {
	width: 20px; height: 19px;  left:calc(50% - 6px); bottom: 20px; 
	background-image:url('/img/assets/nblog/logo50.png');
}
.cover .cover_wrap[data-cover='FT'] img.c_title_bg { display: block; position: absolute; 
	width: 228px; left: calc(50% - 110px); top: 21px; z-index: 1;
}


.cover .cover_wrap[data-cover='FM'] .cover_img {
	width:100%; height: 100%; margin-top:0px;
}
.cover .cover_wrap[data-cover='FM'] .move_img:before {line-height: 398px}
.cover .cover_wrap[data-cover='FM'] .cover_title {
	width: /*calc(100% - 20px)*/ 224px; text-align:center; color: #333; font-family:'NanumSquare'; font-weight:800;
	top: 104px; left: calc(50% - 108px); z-index: 2;}
.cover .cover_wrap[data-cover='FM'] .cover_date {display: none;}
.cover .cover_wrap[data-cover='FM'] .t_logo {
	width: 20px; height: 19px;  right: 27px;  bottom: 20px; 
	background-image:url('/img/assets/nblog/logo50.png');
}
.cover .cover_wrap[data-cover='FM'] img.c_title_bg { display: block; position: absolute; 
	width: 228px; left: calc(50% - 110px); top: 87px; z-index: 1;
}


.cover .cover_wrap[data-cover='FB'] .cover_img {
	width:100%; height: 100%; margin-top:0px;
}
.cover .cover_wrap[data-cover='FB'] .move_img:before {line-height: 398px}
.cover .cover_wrap[data-cover='FB'] .cover_title {
	width: /*calc(100% - 20px)*/ 224px; text-align:center; color: #333; font-family:'NanumSquare'; font-weight:800;
	bottom: 47px; left: calc(50% - 108px); z-index: 2;}
.cover .cover_wrap[data-cover='FB'] .cover_date {display: none;}
.cover .cover_wrap[data-cover='FB'] .t_logo {
	width: 20px; height: 19px;  right: 27px;  top: 20px; 
	background-image:url('/img/assets/nblog/logo50.png');
}
.cover .cover_wrap[data-cover='FB'] img.c_title_bg { display: block; position: absolute; 
	width: 228px; left: calc(50% - 110px); bottom: 22px; z-index: 1;
}



.cover .cover_wrap[data-cover='FL'] .cover_img {
	width:100%; height: 100%; margin-top:0px;
}
.cover .cover_wrap[data-cover='FL'] .move_img:before {line-height: 398px}
.cover .cover_wrap[data-cover='FL'] .cover_title {
	width: /*calc(100% - 20px)*/ 224px; text-align:center; color: #333; font-family:'NanumSquare'; font-weight:800;
	bottom: 131px; left: 19px; z-index: 2;}
.cover .cover_wrap[data-cover='FL'] .cover_date {display: none;}
.cover .cover_wrap[data-cover='FL'] .t_logo {
	width: 20px; height: 19px;  right: 27px;  bottom: 20px; 
	background-image:url('/img/assets/nblog/logo50.png');
}
.cover .cover_wrap[data-cover='FL'] img.c_title_bg { display: block; position: absolute; 
	width: 228px; left: 18px; bottom: 106px; z-index: 1;
}


.cover .cover_color {padding:0 10px; text-align:center}
.cover .cover_color button {width:25px; height:25px; border-radius:50%}
.cover .cover_color button:before {font-family:'Font Awesome 5 Free'; font-style:normal; font-variant:normal; line-height:1; font-weight:900}
.cover .cover_color button:not(.on):before {content:'color'; color:transparent}
.cover .cover_color button.on:before {content:'\f00c'; color:#fff}
.cover dl {background-color:#f5f5f5; border-top:1px solid #e6e6e6}
.cover dl > * {margin:5px 0; display:block; float:left; font-size:12px}
.cover dl.opt {width:calc(100% - 30px); padding:15px; display:inline-block; border-bottom:1px solid #e6e6e6; text-align:center}
.cover dl.opt dt {width:80px; line-height:31px}
.cover dl.opt dd {width:calc(100% - 90px)}
.book_size {
    position: relative;
}

.big_chu {
	width: 30px;
	position: absolute;
	top: -8px;
	right: 0px;
}


/*=========== preview ==========================================*/


.preview {height:calc(100% - 175px); overflow:hidden auto}
.preview .price_txt .chk,
.preview .price_txt .chk:before{display:none}
.preview .price_txt input + label .chk {display:block}
.preview .price_txt .evt_info {width:calc(100% - 80px)}


.pop .pop_bottom a {border-radius:3px; margin:3px 5px; display:inline-block; padding:3px 12px}
.pop .pop_close {border:1px solid #ccc; color:#787878; box-sizing:border-box}
.pop .pop_ok {border:1px solid #1fbbbb; background-color:#1fbbbb; color:#fff}


.pop_blog .pop_top {padding:5px 15px}
.pop_blog .pop_wrap {padding:0}
.pop_blog ul {background-color:#f5f5f5; border-width:0 1px 1px; border-style:solid; border-color:#ddd}
.pop_blog ul li {border-top:1px solid #ddd; height:50px; padding:10px 15px}
.pop_blog .blog_info {width:calc(100% - 50px); float:left }
.pop_blog img {width:45px; height:45px; border-radius:50%}
.pop_blog .blog_tit {width:calc(100% - 60px); line-height:45px; float:right; padding:0 0 0 10px}
.pop_blog label {width:33px; height:33px; line-height:35px; border-radius:50%; font-size:19px; float:right; background-color:#fff; border:1px solid #ddd; margin-top:7px}
.pop_blog label i {color:transparent}
.pop_blog input:checked + label {border-color:#1fbbbb}
.pop_blog input:checked + label  i {color:#1fbbbb}

.pop_blog .pop_bottom {padding:10px 0px 0}
.pop_blog .pop_bottom button {line-height:28px; box-sizing:border-box; border-radius:3px; font-size:14px; padding:0 12px; margin:0 5px}
.pop_blog .pop_bottom .pop_close {border:1px solid #ccc; color:#787878;}
.pop_blog .pop_bottom .pop_ok {border:1px solid #1fbbbb; background-color:#1fbbbb; color:#fff}



div.layer {overflow:hidden}
.t_body {height:calc(100% - 118px); padding:10px; overflow:hidden auto}
.layer .pop_list {height:calc(100% - 60px); padding:10px 0 0 10px; overflow:hidden auto}
.layer .pop_list li {margin:0 10px 10px 0; background:center / cover no-repeat #efefef; border:1px solid #e6e6e6; box-sizing:border-box; float:left; position:relative}
.layer .pop_bottom {height:47px; width:100%; box-shadow:0 2px 8px rgb(0 0 0 / 36%)}
.layer .pop_bottom button {line-height:47px; font-size:16px; box-sizing:border-box}



.pop_change .cover_wrap {margin:20px auto; position:relative}
.pop_change .cover_wrap .cover_img {margin:0 auto; width:270px}
.pop_change .cover_wrap[data-cover='wide'] .cover_img{height:176px}
.pop_change .cover_wrap[data-cover='wide'] .move_img:before {line-height:176px}
.pop_change .cover_wrap[data-cover='square'] .cover_img{height:270px}
.pop_change .cover_wrap[data-cover='square'] .move_img:before {line-height:270px}
.pop_change .cover_wrap[data-cover='story'] .cover_img{height:361px}
.pop_change .cover_wrap[data-cover='story'] .move_img:before {line-height:361px}
.pop_change .cover_wrap[data-cover='white'] .cover_img{height:213px}
.pop_change .cover_wrap[data-cover='white'] .move_img:before {line-height:213px}
.pop_change .cover_wrap[data-cover='FT'] .cover_img,
.pop_change .cover_wrap[data-cover='FM'] .cover_img,
.pop_change .cover_wrap[data-cover='FB'] .cover_img,
.pop_change .cover_wrap[data-cover='FL'] .cover_img {height: 358px}
.pop_change .cover_wrap[data-cover='FT'] .move_img:before,
.pop_change .cover_wrap[data-cover='FM'] .move_img:before,
.pop_change .cover_wrap[data-cover='FB'] .move_img:before,
.pop_change .cover_wrap[data-cover='FL'] .move_img:before {line-height: 3528px}




.pop_change .btn_album {position:absolute; bottom:-20px; right:30px; width:50px; height:50px; background-color:#444; border-radius:50%; border:2px solid #fff}
.pop_change .btn_album i {color:#fff; font-size:20px}
.pop_change .btn_zoom {text-align:center; width:130px; margin:0 auto}
.pop_change .btn_zoom * {display:block; line-height:30px; float:left}
.pop_change .btn_zoom span {height:28px; padding:0 10px; border-width:1px 0; border-color:#ccc; border-style:solid}
.pop_change .btn_zoom span:after {content:'%'}
.pop_change .btn_zoom button{width:30px; height:30px; border:1px solid #ccc; border-radius:2px; background-color:#f5f5f5}

.pop_album_list .album_list li {width:calc(50% - 10px)}
.pop_album_list .album_list li span {background-color:rgba(255,255,255,0.7); padding:0px 8px; border-radius:3px; position:absolute; left:5px; top:5px}
.pop_pic_list .pic_list li {width:calc(33.33% - 10px); min-height:80px}



.layer_board .select {height:calc(100% - 70px); padding:0 10px; overflow:hidden}
.layer_board .select label {float:left}
.layer_board .chk:before {content:''}
.layer_board .list_post label {position:inherit; margin-right:10px}
.layer_board .list_post .chk {padding:0 !important}
.layer_board .select .list_folder {height:calc(100% - 130px); overflow-y:scroll}

.detail_post .cont {height:calc(100% - 70px); padding:10px; overflow:hidden auto}
.detail_post dl {display:inline-block; margin-top:15px}
.detail_post dl:not(.link) {width:calc(100% - 20px); padding:10px}
.detail_post dl dt {font-weight:bold}
.detail_post .quote {display:inline-block; width:100%; text-align:center; color:#797e82; font-family:'KoPub Batang'}
.detail_post .quote:before,
.detail_post .quote:after {content:''; display:block; width:20px; height:15px; background:center / contain no-repeat; margin:10px auto}
.detail_post .quote:before {background-image:url('/img/assets/tstory/ico_quote_before.png')}
.detail_post .quote:after {background-image:url('/img/assets/tstory/ico_quote_after.png')}
.detail_post .indent {}
.detail_post .line {margin:15px auto; width:70px; height:5px; background:center / contain url('/img/assets/tstory/ico_line.png') no-repeat}
.detail_post .cont_img {padding:5px 0}
.detail_post .cont_img img {width:auto; max-width:100%}
.detail_post .cont_move {margin-top:15px; position:relative}
.detail_post .cont_move:before {content:''; position:absolute; width:calc(100% - 15px); height:calc(100% - 15px)}
.detail_post .cont_move.play:before {background:right bottom / 10% url('/img/assets/tstory/ico_play.png') no-repeat}
.detail_post .cont_move.youtube:before {background:right bottom / 20% url('/img/assets/tstory/ico_youtube.png') no-repeat}
.detail_post .cont_caption {color:#515457; padding:5px 0}
.detail_post .list {margin:5px 0 0 0}
.detail_post .list li {color:#25408f; font-weight:lighter}
.detail_post .list li:before {content:'\00b7'; padding-right:5px}
.detail_post .link {width:100%; height:80px; overflow:hidden; border:1px solid #ddd; box-sizing:border-box}
.detail_post .link dt {width:80px; height:80px; background:center / cover #f5f5f5; float:left}
.detail_post .link dd {width:calc(100% - 100px); height:60px; float:left; padding:15px 10px 10px; overflow:hidden}
.detail_post .link dd p {overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#909090}
.detail_post .link dd span {font-size:12px}
.detail_post .tag {}
.detail_post .tag img {width:13px; height:13px; float:left; margin:3px 5px 0 0}
.detail_post .tag dd {display:inline-block; color:#4c5d95}
.detail_post .tag dd:not(:last-child):after {content:'\002c'}
.detail_post .cmt dd {padding:10px 0}
.detail_post .cmt dd.cmt_sub {padding-left:20px}
.detail_post .cmt dd:not(:last-child) {border-bottom:1px solid #f0f0f0}
.detail_post .cmt .cmt_name {color:#5b5a5b; font-weight:600; font-size:13px; padding-right:3px}
.detail_post .cmt .cmt_date {color:#797e82; font-size:12px; padding-left:11px; position:relative}
.detail_post .cmt .cmt_date:before {position:absolute; left:0; top:0; content:'\007c'; color:#5b5a5b}
.detail_post .cmt p {color:#777}
.detail_post .pop_bottom a {margin-top:8px; padding:3px 12px; border-radius:3px }
.detail_post .pop_bottom a.pop_move {margin-left:10px; border:1px solid #ddd}
.detail_post .pop_bottom a.pop_close {margin-right:10px; float:right; background-color:#1fbbbb; border:1px solid #1fbbbb; color:#fff}

.layer .tw_d_post{height:calc(100% - 67px); overflow-y:scroll; padding:10px}
.layer .tw_d_post span {display:inline-block}
.layer .tw_d_post .user_info {display:inline-block; width:100%}
.layer .tw_d_post .user_info .user_img {width:40px; height:40px; border-radius:50%; background:center / cover no-repeat; margin:0 10px}
.layer .tw_d_post .user_info > div {width:calc(100% - 90px); float:right}
.layer .tw_d_post .tweet_cont {margin-top:10px}
.layer .tw_d_img {position:relative; margin-top:10px}
.layer .tw_d_img label {position:absolute; left:10px; top:10px}
.layer .tw_d_img img {border-radius:10px;}
.layer .tweet_data {line-height:40px; color:rgb(83, 100, 113)}



.layer_board .t_post .list_post {height:calc(100% - 45px)}
.layer_board .t_post .list_post li {max-height:200px; height:auto}
.layer_board .t_post .list_post .post_img > div.w50 {display:inline-block; width:calc(50% - 8px); float:unset; min-height:85px}
.layer_board .t_post li.active {position:fixed; left:0; top:0;display:block; width:100%; height:calc(100% - 20px); padding:10px 0; z-index:2}
.layer_board .t_post li.active:before {display:none}
.layer_board .t_post li.active > label {margin-left:10px}
.layer_board .t_post li.active > p {margin-bottom:5px}
.layer_board .t_post li.active > .btn_detail {margin-right:10px}
.layer_board .t_post li.active .list_post li {padding-top:0}


.layer_board .tweet_list {display:none; border-top:1px solid #e6e6e6; margin-top:5px}
.layer_board .tw_post li.active {position:fixed; left:0; top:0; display:block; width:calc(100% - 20px); height:calc(100% - 20px); padding:10px; z-index:1}
.layer_board .tw_post li.active .tweet_list{display:inline-block}
.layer_board .tw_post .tweet_list > li{width:100%; padding:10px 0; border-bottom:0} 



.layer_cover .cover {height:calc(100% - 70px); padding:0}
.layer_cover .style {
	display:block; width:100%; height:145px; overflow-x:auto; background-color:#f5f5f5;
}
.layer_cover .style dl {
	display: flex;
	width:470px; height:110px; padding:10px 15px; text-align:center;
}
.layer_cover .style dd {width:80px; display:inline-block; float:none; padding:0 5px}
.layer_cover .style label {
	position:relative; width: 80px;
}
.layer_cover .style label:before {position:absolute; left:0; top:0; width:100%; height:calc(100% - 35px); background:rgba(0,0,0,0.6); white-space:pre; line-height:18px; padding-top:35px; font-weight:bold; display:none}
.layer_cover .style input:checked + label {outline:3px solid #1fbbbb}
.layer_cover .style input:checked + label:before {color:#1fbbbb; display:block}
.layer_cover .style label[for='wide']:before {content:'\f00c \A \0057\0069\0064\0065'}
.layer_cover .style label[for='square']:before {content:'\f00c \A \0053\0071\0075\0061\0072\0065'}
.layer_cover .style label[for='modern']:before {content:'\f00c \A \004d\006f\0064\0065\0072\006e'}
.layer_cover .style label[for='story']:before {content:'\f00c \A \0053\0074\006f\0072\0079'}
.layer_cover .style label[for='white']:before {content:'\f00c \A \0057\0068\0069\0074\0065'}

.pop_prev a:not(.btn_prev_colse){width:100%}
.pop_thumb ul li p {border-top:1px solid #ddd}