@charset "utf-8";


/*@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css); 
- 익스플로러 미지원으로 노토산스 주석처리 18-01-25 보미
- 노토산스 경량화 버전으로 수정, 400대 이하 번짐현상으로 스포카로 대체, 
- 400의 타이틀의 경우를 위해 DemiLight를 200으로 설정(익스는 두껍게나오므로 Light로)
- 18-03-15 보미
*/
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700);


@font-face{
	font-family: "Noto Sans KR";
	src: url('/fonts/NotoSans-Medium.eot?#iefix') format('embedded-opentype'),
		 url('/fonts/NotoSans-Medium.woff') format('woff');
	font-weight: 500;
}

@font-face{
	font-family: "Noto Sans KR";
	src: url('/fonts/Spoqa Han Sans Regular.woff');
	font-weight: 400;
}

@font-face{
	font-family: "Noto Sans KR";
	src: url('/fonts/NotoSans-Thin.eot?#iefix') format('embedded-opentype'),
		 url('/fonts/NotoSans-Light.woff') format('woff');
	font-weight: 300;
}

@font-face{
	font-family: "Noto Sans KR";
	src: url('/fonts/NotoSans-Light.eot?#iefix') format('embedded-opentype'),
		 url('/fonts/NotoSans-DemiLight.woff') format('woff');
	font-weight: 200;
}


/* CSS Reset, Personal Reset_Yu Bomi*/


/* CSS Reset */
img{vertical-align: top; padding: 0; margin: 0;border:0 none;}
a{text-decoration: none; }
li{list-style: none; }
em{font-style: normal}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-family:'Roboto','Noto Sans KR',"Apple SD Gothic Neo",Helvetica,arial,Dotum,Tahoma,Geneva,sans-serif;
	-webkit-font-smoothing: antialiased;
	font-size: 15px;
	color: #333;
}
input, select, textarea, button{font-family:'Roboto','Noto Sans KR',"Apple SD Gothic Neo",Helvetica,arial,Dotum,Tahoma,Geneva,sans-serif; color: #333; font-size: 15px; -webkit-font-smoothing: antialiased;}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

* {
	-webkit-text-size-adjust:none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);	
}
:focus {
	outline: 0;
	border:none;
	/*color: rgba(0, 0, 0, 0);*/
}

input[type='password'],input[type='button'],input[type='text'],input[type='email'],input[type='search'],input[type='date'],input[type='tel'],input[type='number'],textarea{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 1px solid #aeaeae;
	border-radius: 3px;
	padding: 0 10px;
	height: 40px;
	transition:0.2s all;
	line-height: 1.2em;
}
input[type='checkbox']{
	-webkit-appearance: none;
	 -moz-appearance: none; 
	 appearance: none;
	 width: 20px; 
	 height: 20px; 
	 border: 1px solid #aeaeae; 
	 background-color: #fff; 
	 border-radius: 1px; 
	 display: inline-block;
	}
input[type='checkbox']:checked{
	background: url(../img/checked.png) no-repeat 50% 50%; background-color: #fff;
}
input[type='radio']{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1px solid #ccc;
	vertical-align: middle;	
	display: inline-block;
}
input[type='radio']:checked{
	border: 1px solid #aaa;
	padding: 2px;
	position: relative;
}
input[type='radio']:checked:after{
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	background: #f96b6b;
	text-align: center;
	vertical-align: middle;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -4px;
	margin-left: -4px
}
select{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background:url(../img/main-select.png) no-repeat 90% 50%;
	background-size: 15px; 
	padding: 0 35px 0 10px;
	height: 40px;
	cursor: pointer;
	box-sizing:border-box;
	background-color: #fff;
	border: 1px solid #aeaeae; 
	border-radius: 3px;
	color: #777;
	font-size: 15px;
}
select:hover,
textarea:hover,
input:hover{border: 1px solid #ccc;}
input:active,
input:focus,
textarea:active,
textarea:focus,
select:active,
select:focus{border: 1px solid #aaa;}

button{-webkit-appearance: none; -moz-appearance: none; padding: 0;margin: 0; border: 0; cursor: pointer;}
input[type='button']{-webkit-appearance: none; -moz-appearance: none; padding: 0; border: 0; cursor: pointer;}

/* IE 10, 11 */
select::-ms-expand { 
  display: none;
}

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #b5b5b5;
    font-size: 15px;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #b5b5b5;
   opacity:  1;
   font-size: 15px;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #b5b5b5;
   opacity:  1;
   font-size: 15px;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
   color:#b5b5b5;
   font-size: 15px;
}


ul{ 
	list-style:none;
}
a:link{
	text-decoration:none;
}
a:visited{
	text-decoration:none;
}
a:hover{
	text-decoration:none;
}
body{
	border:0;
	margin:0px auto;
	min-width:320px;
	width:100%;
	max-width:100%;
	overflow-y: scroll;
	overflow-x: hidden;
}

@media screen and (max-width: 768px){
	body,html,ul,li,ol,li,dl,dt,dd,*{letter-spacing: -1px;}
	
	.sound_bookstore  {width: 100%;}
}

i.material-icons{vertical-align: middle;}

/* Css Reset End */


/* Skip */
.skip{
	position: absolute;
	left: 0;
	top: -9999em;
	z-index: 9999;
	display: block;
	width: 100%;
	background: #039;
	color: #eee;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 30px;
}
.skip a:focus{
	top: 0;
}
/*Skip End*/



/* Personal Reset */
.clearfix{
	*zoom:1;
}
.clearfix:after{
	content: '';
	display: block;
	clear: both;
}
.left{float: left;}
.right{float: right;}
/* .w100{width: 100%; margin: 0 auto; max-width: 1230px; box-sizing: border-box; padding: 0 23px;} */
.w100{width: 100%; margin: 0 auto; max-width: 990px; box-sizing: border-box;}
.hidden{display: none;}
.pen{font-family:'나눔펜', NanumPen, 'fontnp', 'Nanum Pen Script';}

/* Personal End */

/* All paging style */
.paging.include{text-align: center; }
.paging.include ul{width: 100%; overflow-x: hidden; padding: 0 20px; line-height: 40px; box-sizing: border-box;}
.paging.include ul li{display: inline-block; }
.paging.include ul li button{width: 35px; height: 35px; line-height: 35px; text-align: center; background-color: #fff; border-radius: 3px; font-size: 14px; color: #aeaeae; margin: 0 3px;}
.paging.include ul li button:hover{background-color: #fafafa;}
.paging.include ul li.on button{background: #999; color: #fff; }
.paging.include ul li button.icon{background-image: url(/duranno/img/paging-icon.svg); background-position: 0 0; background-repeat: no-repeat; text-indent: -9999em;}
.paging.include ul li button.icon.next{transform: rotate(180deg)}
.paging.include ul li button.icon.finish{background-position: 0 -35px; transform: rotate(0deg)}
.paging.include ul li button.icon.first{background-position: 0 -35px; transform: rotate(180deg)}

.w800{width: 100%; max-width: 800px; margin: 0 auto;}
.w990{width: 100%; max-width: 990px!important; margin: 0 auto;}

.reply{width: 100%; max-width: 800px; margin: 0 auto; text-align: center;}
.reply .like-area{position: relative; top: 0; padding: 0 0 88px 0; margin: 0;}
.reply .like-area button{border-radius: 50%; width: 75px; height: 75px; position: relative; text-align: center; background-size: cover; background-position: 50% 50%;}
.reply .like-area p{margin-top: 15px;}
.reply .like-area .sub{font-size: 14px; color: #999; line-height: 1.5em; width: 300px; margin: 15px auto 0;}
.reply .count{text-align: left; font-weight: 400; border-bottom: 1px solid #ccc; padding-bottom: 20px; color: #666;}
.reply .count span{color: #F1779A; padding-left: 5px; font-weight: 500;}
.reply .box{width: 100%;}
.reply .box dl{display: table; padding: 20px 0; border-bottom: 1px solid #e3e3e3; width: 100%;}
.reply .box dl dt{display: table-cell; vertical-align: top; width: 10%; max-width: 50px;}
.reply .box dl dt .person{width: 48px; height: 48px; border-radius: 50%; margin: 0 auto; background-position: 50% 50%; background-size: cover;}
.reply .box dl dd{display: table-cell; vertical-align: top; text-align: left; width: 90%; padding: 0 20px;}
.reply .box dl dd span{display: block; font-size: 13px; color: #999; margin-bottom: 15px}
.reply .box dl dd span.name{display: inline-block; color: #656565; margin-bottom: 0;}
.reply .box dl dd em{font-size: 15px; color: #656565; line-height: 1.6em; vertical-align: middle;}
.reply .box dl dd .remove{width: 10px; height: 10px; display: inline-block; text-indent: -9999em; background: url(/duranno/img/sns-icon.svg) 0 -210px no-repeat; vertical-align: middle; margin-left: 5px;}


.sns-link{text-align: center;}
.sns-link li{display: inline-block;}
.sns-link li button{text-indent: -9999em; width: 35px; height: 35px; background: url(/duranno/img/sns-icon.svg) 0 0 no-repeat; border-radius: 50%; margin-left: 6px; background-size: 100%;}
.sns-link li button.tw{background-position: 0 -35px;}
.sns-link li button.kt{background-position: 0 -70px;}
.sns-link li button.lk{background-position: 0 -105px;}

.mt-50{margin-top: 50px;}
.mb-50{margin-bottom: 50px;}

.pt-50{padding-top: 50px;}
.pb-50{padding-bottom: 50px;}
.text-center{text-align: center;}
.text-right{text-align: right;}
.text-left{text-align: left;}

.img-comment .now div{margin: 50px 0 0;}
.img-comment .now div p{border-bottom: 1px solid #e1e1e1; border-top: 1px solid #e1e1e1; background: #7b88c8; padding: 13px 10px; color: #fff; width: 70%; margin: 0 auto; font-size: 24px; border-radius: 32px; position: relative; bottom: -30px;}
.img-comment .now div p:after{content: ""; display: block; width: 14px; height: 10px; background: url(/subscribe/img/event-icon.svg) 0 -116px no-repeat; position: absolute; left: 50%; bottom: -10px; margin-left: -7px;}
.img-comment .now div p i{color: #ccc; font-size: 48px;}
.img-comment .now div p span{color: #ffe349; vertical-align: middle; font-size: inherit;}
.img-comment .now div p .big{font-size: 24px; font-weight: 700;}
.img-comment .now div p em{vertical-align: middle; color: inherit; font-size: inherit;}
.img-comment .now div p em.italic{font-style: italic!important;}
.img-comment .now div p .icon{display: inline-block; width: 40px; height: 35px; background: url(/subscribe/img/event-icon.svg) 0 -81px no-repeat; vertical-align: middle; margin-right: 15px;}
.img-comment .now.no2 div p{bottom: 0; background: #eb7c8e; font-size: 22px;} 
.img-comment .now.no2 div{margin-bottom: 50px; margin-top: 80px;}
.img-comment .now.no2 div p:after{background-position: -14px -116px;}
.img-comment .now.no2 div p .icon{background-position: 0 -51px; height: 30px; margin-right: 10px;}
.img-comment .write .input-wrap{padding: 15px 30px; display: table; width: 100%; box-sizing: border-box;}
.img-comment .id{padding-right: 0; width: 145px; display: table-cell; vertical-align: top;}
.img-comment .id span{width: 52px; height: 52px; border-radius: 50%; display: inline-block; box-shadow: inset 0px 0px 2px rgba(255,255,255,0.8); background-size: cover; background-color: #d4d4d4; vertical-align: middle;}
.img-comment .id .name{display: inline-block; text-align: center; width: auto; font-size: 15px; color: #777; margin-top: 8px;}
.img-comment .id .icon{display:block; width: 22px; height: 26px; background: url(/subscribe/img/event-icon.svg) 0 0 no-repeat; margin: 13px auto 0;}
.img-comment .write{margin-right: 0; margin-left: 0; background: #fafafa; padding-top: 85px;}
.img-comment .write img{width: 100%;}
.img-comment .write .comment-input{width: auto; display: table-cell; vertical-align: top;}
.img-comment .write .comment-input .input-inner{background: #fff; border-radius: 22.5px; border: 1px solid #e1e1e1; margin-top: 3px; position: relative;}
.img-comment .write .comment-input textarea{min-height: 45px; padding: 12px 65px 12px 25px; width: 100%; position: relative; box-sizing: border-box; border:0; background: transparent; overflow-y: hidden;}
.img-comment .write .comment-input .icon.camera{position: absolute; top: 14px; right: 22px; width: 30px; height: 25px; background: url(/subscribe/img/event-icon.svg) 0 -26px no-repeat;}
.img-comment .write .comment-input .icon.camera.done{background: #ccc;}
.img-comment .write .comment-input .btn-area{padding-top: 15px; padding-bottom: 55px; padding-right: 0;}
.img-comment .write .comment-input .btn-area button{background: #969696; color: #fff; height: 35px; line-height: 35px; padding: 0 15px; border-radius: 1px; font-size: 15px; margin-left: 15px; width: 102px;}
.img-comment .write .comment-input .btn-area button:first-child{background: #3da5cc}
.img-comment .write .comment-input .add-img{background: transparent; padding: 16px 25px 40px;}
.img-comment .write .comment-input .add-img button{background: transparent;}
.img-comment .write .comment-input .add-img button i{color: #999;}
.img-comment .write .comment-input .add-img img{width: 100%; max-width: 250px;}
.img-comment .more{margin-top: 80px;}
.img-comment .more button{width: 100%; max-width: 300px; padding: 18px 10px; font-size: 16px; font-weight: 400; color: #fff; background: #969696;}
.img-comment .grid{box-sizing: border-box;}
.img-comment .grid img{width: 100%;}
.img-comment .grid div{padding-left: 2.5%;}
.img-comment .grid .grid-item{position: relative; margin-bottom: 20px; cursor: pointer; width:30%;}
.img-comment .grid .grid-item .item-inner{position: absolute; left: 0; bottom: 0; padding-left: 5px; padding-right: 5px; width: 100%; z-index: 1;}
.img-comment .grid .grid-item .id{width: 100%; background: #fff; padding: 15px; padding-bottom: 24px; box-sizing: border-box; box-shadow: 1px 1px 2px rgba(0,0,0,0.1); display: block;}
.img-comment .grid .grid-item .id span{vertical-align: middle; width: 30px; height: 30px;}
.img-comment .grid .grid-item .id em{vertical-align: middle; color: #777; padding-left: 5px;}
.img-comment .grid .grid-item .id p{padding-top: 10px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; line-height: 1.4em; color: #555;}
.img-comment .grid .grid-item .id .right{line-height: 26px;}
.img-comment .grid .grid-item .id .right em{color: #999999;}
.img-comment .grid .grid-item .upside{position: absolute; top: 0; left: 0; height: 100%; z-index: 0;}
.img-comment .img-pop{width: 100%; height:100%; position: fixed; top: 0; left: 0; z-index: 9999; background: rgba(0,0,0,0.8); display: none; overflow-y: auto; padding-bottom: 100px;}
.img-comment .img-pop .table{display: table; background: #000; padding-right: 0; padding-left: 0; margin-bottom: 0;}
.img-comment .img-pop .table-cell{width: 50%; display: table-cell; vertical-align: middle; padding-right: 0; padding-left: 0;}
.img-comment .img-pop .cell-right{width: 100%; padding: 15px; box-sizing: border-box; background: #fff; vertical-align: top;}
.img-comment .img-pop .id p{margin-top: 20px; line-height: 26px;}
.img-comment .img-pop .id em{color: #777; padding-left: 5px;}
.img-comment .img-pop .id .right{height: 52px; line-height: 50px;}
.img-comment .img-pop .id .right em{color: #999;}
.img-comment .img-pop .pop-close button{color: #fff; background: transparent;}
.img-comment .img-pop .pop-close button i{color: #fff;}
.img-comment .img-pop .reload-btn{background: #969696; color: #fff; height: 35px; line-height: 35px; padding: 0 15px; border-radius: 1px; font-size: 14px; margin-left: 15px; width: auto; position: absolute; bottom: 15px; right: 30px;}
.img-comment .img-pop.relative{position: relative; display: block; background: transparent; z-index: 0; padding-bottom: 0;}
.img-comment .img-pop.relative .table{background: transparent; position: relative; padding: 15px;}
.img-comment .img-pop.relative .cell-left{padding: 0 15px;}
.img-comment .img-pop.relative .cell-right{background: transparent;}
.img-comment .img-pop.relative .inner{margin-top: 0; width: 100%;}
.img-comment .img-pop.relative .id p{padding-bottom: 45px;}

.img-comment .img-pop.absolute .cell-left a{display: block; position: relative;}
.img-comment .img-pop.absolute .cell-left .img-big{top: 10px; right: 10px;}


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

}



@media screen and (max-width: 650px){
	.img-comment .write{background: transparent; padding-top: 60px;}

	.img-comment .now div p{width: 85%; font-size: 18px; padding: 23px 10px; border-radius: 37px; position: relative; bottom: 0; box-sizing: border-box;}
	.img-comment .now div p .icon{width: 30px; background-size: 50px; background-position: 0 -57px; height: 25px; margin-right: 10px;}	

	.img-comment .now.no2 div{margin-bottom: 40px;}
	.img-comment .now.no2 div p,.img-comment .now div p .big{font-size: 18px;}
	.img-comment .now.no2 div p .icon{background-position: 0 -42px; height: 26px; width: 30px; background-size: 60px; margin-right: 5px;}
	

	.img-comment .id{padding-left: 0; width: 50px;}
	.img-comment .id span{width: 45px; height: 45px; margin-top: 3px;}
	.img-comment .id .icon{width: 19px; background-size: 60px; height: 22px; margin-top: 11px;}
	.img-comment .id .name{font-size: 14px;}

	.img-comment .write .input-wrap{padding: 15px;}
	.img-comment .write .comment-input{padding-right: 0; padding-left: 10px;}
	.img-comment .write .comment-input .btn-area{padding-bottom: 0;}

	.img-comment .write .comment-input textarea{padding: 12px 50px 12px 20px; font-size: 14px;}
	.img-comment .write .comment-input .icon.camera{right: 15px;}
	.img-comment .write .comment-input .add-img{padding: 16px 20px 30px;}
	
	.img-comment .grid .grid-item{width: 44%;}
	.img-comment .grid div{padding-left: 4%}

	.img-comment .img-pop{overflow-y: scroll;}
	.img-comment .img-pop.relative{overflow-y: auto;}
	.img-comment .img-pop.relative .cell-left{padding: 0;}	
	.img-comment .img-pop .inner{margin-top: 20px;}
	.img-comment .img-pop .table{display: block; background: transparent;}
	.img-comment .img-pop .table-cell{width: 100%; display: block;}
	.img-comment .img-pop .reload-btn{right: 15px;}

	.img-comment .img-pop.relative .table-cell img{max-width: 400px; margin: 0 auto; display: block;}

}