html, body { margin: 0; }
body { font-family: 'Nanum Myeongjo', serif; font-size: 15px; font-weight: 700; letter-spacing: -0.05em; }

/* Reset */
* { box-sizing: border-box; }
ul, ol { list-style: none; margin: 0; padding: 0; }
a { color: #000; text-decoration: none; }
a:hover { color: #ed7a2f; }
img { max-width: 100%; }

#page { padding-top: 95px; width: 100%; }

#header { position: fixed; z-index: 100; width: 100%; top: 0; height: 95px; background-color: #fff; transition: 0.3s; }
#header h1 { float: left; margin: 18px 0 0 45px; transition: 0.3s; }
#header h1 a { display: block; width: 40px; height: 59px; background: url(images/logo.png) no-repeat 0 0/100% 100%; color: transparent; font-size: 0; }
#header #nav { text-align: center; }
#header #nav li { display: inline-block; }
#header #nav li a { display: inline-block; padding: 0 1.3em; font-family: 'Markazi Text', serif; font-size: 21px; font-weight: 700; line-height: 95px; letter-spacing: .2em; text-decoration: none; transition: 0.3s; }
#header #sns { float: right; margin: 35px 45px 0 0; transition: 0.3s; }
#header.black { background-color: #000; }
#header.black h1 a { background-image: url(images/logo-white.png); }
#header.black #sns a { color: #fff; }
#header.black #nav li a { color: #fff; }
#header #nav li a.current,
#header.black #nav li a:hover { color: #ed7a2f; }
#mobile-nav { display: none; }
#article { margin-top: 0; }
#article.nm { margin-top: 0; }
#footer { margin: 7em 0 3em; text-align: center; font-family: 'Markazi Text', serif; font-size: 15px; font-weight: 700; letter-spacing: .2em; }
#page.short { padding-top: 60px; }
#page.hide-nav { padding-top: 0; }
.short #header { height: 60px; }
.short #header h1 { margin-top: 8px; }
.short #header h1 a { width: 30px; height: 44px; }
.short #header #nav li a { line-height: 60px; }
.short #header #sns { margin-top: 20px; }

.vp { display: block; }
.vpi { display: inline-block; }
.vm { display: none; }


/* Common class */
.cols { zoom: 1; }
.clear:after,
.cols:after { content: ''; display: table; clear: both; }
.cols .col { float: left; margin-left: 4%; }
.cols .col:first-child { margin-left: 0; }
.cols .col.col-12 { width: 100%; }
.cols .col.col-11 { width: 91.33%; }
.cols .col.col-10 { width: 82.66%; }
.cols .col.col-9 { width: 74%; }
.cols .col.col-8 { width: 65.33%; }
.cols .col.col-7 { width: 56.66%; }
.cols .col.col-6 { width: 48%; }
.cols .col.col-5 { width: 39.33%; }
.cols .col.col-4 { width: 30.66%; }
.cols .col.col-3 { width: 22%; }
.cols .col.col-2 { width: 13.33%; }
.cols .col.col-1 { width: 4.666%; }
.wrap { margin: 0 auto; width: 100%; max-width: 1000px; }
.en { font-family: 'Markazi Text', serif; letter-spacing: .15em; font-weight: 500; }
.page-title { margin: 0; padding: 80px 0 0; font-size: 40px; text-align: center; }
.page-title i { margin-top: -.2em; font-size: 22px; vertical-align: middle; }
.page-title > span { display: block; font-size: 21px; letter-spacing: 3px; text-transform: uppercase; color: #999; }
.page-title > span .en { font-size: 1.4em; }
.page-title > span.kr { margin-top: 5px; font-size: 16px; letter-spacing: 0; }
.page-title > span i { font-size: 15px; }
.page-title.type-kr { padding-top: 84px; font-size: 33px; }
.sns-icon a { display: inline-block; margin-right: 8px; width: 22px; height: 22px; color: transparent; font-size: 17px; color: #000; }
.sns-icon a.fb { margin-right: 4px; }
.sns-icon a:hover { color: #ed7a2f !important; }
.sns-icon a:last-child { margin-right: 0; }
.slick-dots { display: block; position: absolute; width: 20px; height: auto; top: 50%; bottom: auto; right: 45px; transform: translateY(-50%); }
.slick-dots li{ display: block; }
.slick-dots li button:before { color: white; }
.slick-dots li.slick-active button:before { color: white; }
.slick-dots li button:before { font-size: 20px; content: 'ㆍ'; }
.slick-dotted.slick-slider { margin-bottom: 0; }
.news-grid .grid-sizer, .news-grid .grid-item { width: 30.66%; }
.news-grid .grid-item { margin-bottom: 4%; }
.news-grid .gutter-sizer { width: 4%; }
.news-grid a { display: block; }
.news-grid a img { display: block; }
.news-grid a span { display: block; }
.news-grid a span.title { margin-top: 1em; line-height: 1.5; }
.news-grid a span.en { font-size: 18px; color: #aaa; }
.pagination { clear: both; margin-top: 50px; text-align: center; }
.pagination a, .pagination strong { display: inline-block; padding: 0.7em; font-size: 21px; line-height: 0.5; }
.pagination strong { color: #ccc; }

/* Home */
#home h3 { font-size: 21px; font-weight: 700; }
#home-banner { background-color: #000; text-align: center; height: 600px; overflow: hidden; }
#home-banner .item .wrap {  }
#home-banner .item { background-repeat: no-repeat; background-position: center center; background-size: auto 100%; }
#home-banner .item a { position: relative; display: block; width: 100%; height: 600px; }
#home-banner .item a .txt { position: absolute; display: block; bottom: 2em; width: 100%; }
#home-banner .item a .txt .kr { display: block; font-size: 30px; color: #fff; }
#home-banner .item a .txt .kr strong { color: #ed7a2f; }
#home-banner .item a .txt .en { font-size: 21px; line-height: 1.5; letter-spacing: .15em; color: #aaa; text-transform: uppercase; }
#home-release { margin-top: 3em; }
#home-release h3 { margin: 0 0 1em; }
#home-release ul {  }
#home-release li { float: left; width: 45.5%; margin-right: 19px; }
#home-release li a { position: relative; display: block; background-repeat: no-repeat; background-position: center center; background-size: cover; filter: grayscale(100%); }
#home-release li a::before { display: block; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 1px solid rgba(0, 0, 0, .1); box-sizing: border-box; }
#home-release li a:hover { filter: grayscale(0); }
#home-release li a img { display: block; width: 100%; }
#home-news { margin-top: 3em; }
#home-news h3 { margin: 0 0 .6em; }
#home-news li { margin: 0 0 .4em; }
#home-news li a { float: left; width: calc(100% - 115px); line-height: 1.7; text-overflow: ellipsis; white-space: nowrap;  overflow: hidden;  }
#home-news li span { float: right; width: 105px; font-size: 20px; letter-spacing: .1em; color: #aaa; text-align: right; word-spacing: -0.1em; }

#artist-list .cols { padding-top: 2.5em; }
#artist-list .cols:first-child { padding-top: 5em; }
#artist-list a { display: block; padding: 25px 15px 0; height: 370px; text-align: center; background-repeat: no-repeat; background-size: cover; background-position: center center; text-decoration: none; transition: 0.3s; filter: grayscale(100%); }
#artist-list a span.kr { display: block; margin-bottom: 0.4em; font-size: 20px; }
#artist-list a span.kr strong { color: #ed7a2f; }
#artist-list a span.en { display: block; font-size: 21px; line-height: 0.9; color: #aaa; text-transform: uppercase; }
#artist-list a:hover span { color: #ed7a2f; }
#artist-list a:hover { background-position: center 101%; filter: grayscale(0); }

#goto-jnhmusic { position: absolute; z-index: 8000; top: 20px; left: 25px; font-size: 20px; color: #777; }
#goto-jnhmusic:hover { color: #fff; }
#artist-banner { margin-bottom: 0; height: 550px; overflow: hidden; background-color: #000; text-align: center; }
#artist-banner .item .wrap { height: 100%; }
#artist-banner .item { height: 100%; background-repeat: no-repeat; background-position: center center; background-size: auto 100%; }
#artist-banner .slick-list,
#artist-banner .slick-track { height: 100%; }
#artist-nav { position: absolute; margin-top: -51px; width: 100%; height: 51px; text-align: center; }
#artist-nav::before { display: block; position: absolute; content: ''; width: 100%; height: 51px; background-color: rgba(0, 0, 0, 0.6); }
#artist-nav ul { position: relative; }
#artist-nav ul li { display: inline-block; }
#artist-nav ul li a { display: inline-block; padding: 0 1em; font-size: 21px; font-weight: 700; line-height: 51px; letter-spacing: .2em; text-decoration: none; color: #fff; }
#artist-nav ul li a.current,
#artist-nav ul li a:hover { color: #ed7a2f; }
#artist-nav ul li::before { display: inline-block; content: '|'; margin: 19px 8px 0 0; width: 1px; height: 13px; overflow: hidden; background-color: #444; font-size: 0; color: transparent; vertical-align: top; }
#artist-nav ul li:first-child::before { display: none; }
#artist-header { border-bottom: 1px solid #000; }
#artist-header .img { background-repeat: no-repeat; background-position: center 120%; background-size: auto 90%; }
#artist-header .txt { position: relative; padding: 5em 0 4em; text-align: center; }
#artist-header .txt span.kr { display: block; margin: 0 0 5px; font-size: 30px; }
#artist-header .txt span.kr strong { color: #ed7a2f; }
#artist-header .txt span.en { font-size: 21px; line-height: 1; color: #aaa; text-transform: uppercase; }
#artist-header .txt .sns { margin-top: 1em; text-align: center; }
#artist-header .txt h2 { margin: .5em 0 0; font-size: 40px; color: #ed7a2f; }
#artist-album #release-list { padding-top: 0; }
#artist-video #video-list { padding-top: 0; }
#artist h3 { font-size: 21px; font-weight: 700; }
#artist-profile { margin-top: 1em; }
#artist-profile .kr { padding-right: 2em; line-height: 1.8; }
#artist-profile .en { font-family: 'Bitter', serif; font-size: 14px; font-weight: 400; letter-spacing: 0; line-height: 1.7; }
#artist-news .news-grid { margin-top: 3em; }
#artist-news li { padding: .5em 0; border-bottom: 1px solid #ccc; }
#artist-news li a { float: left; width: calc(100% - 105px); line-height: 1.7; }
#artist-news li span { float: right; width: 105px; font-size: 20px; letter-spacing: .05em; color: #aaa; }

#release-list { padding-top: 2.5em; }
#release-list .cols { margin-top: 3em; text-align: center; }
#release-list .col a,
#release-list .col a span { display: block; }
#release-list .col a img { display: block; width: 100%; }
#release-list .col a span.img { position: relative; overflow: hidden; background-repeat: no-repeat; background-position: center center; background-attachment: scroll; background-size: cover; filter: grayscale(100%); }
#release-list .col a span.img::before { display: block; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 1px solid rgba(0, 0, 0, .1); box-sizing: border-box; }
#release-list .col a span.title { margin-top: 1em; }
#release-list .col a span.artist { margin-top: .5em; font-size: 13px; color: #999; }
#release-list .col a:hover span.img { filter: grayscale(0); }

#release-info { padding-top: 5em; }
#release-info h3 { margin: 0 0 13px; font-size: 21px; color: #aaa; }
#release-info .img { position: relative; }
#release-info .img::before { display: block; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 1px solid rgba(0, 0, 0, .1); box-sizing: border-box; }
#release-info .img img { display: block; width: 100%; }
#release-info .cols { position: relative; padding: 40px 0 0; line-height: 1.6; border-top: 1px solid #000; }
#release-info .track { position: relative; margin-top: 1em; line-height: 1.6; font-size: 14px; font-style: italic; }
#release-info .track a.itunes { display: block; position: absolute; top: 2px; right: 0; width: 120px; height: 22px; background-color: #000; border-radius: 11px; color: #fff; font-size: 20px; text-align: center; line-height: 22px; transition: background-color 0.1s; }
#release-info .track a.itunes i { display: inline-block; margin-right: 5px; width: 10.5px; height: 10.5px; background: url(images/btn-itunes.png) no-repeat 0 0; background-size: 100% 100%; vertical-align: middle; }
#release-info .track a.itunes:hover { background-color: #ed7a2f; }
#release-info .intro { line-height: 1.6; }
#release-info .intro h3 { margin-bottom: 0; }
#release-info .intro p:first-child { margin-top: 0; }

#video-list { padding-top: 2.5em; }
#video-list .cols { margin-top: 3em; text-align: center; }
#video-list .col a { display: block; position: relative; text-align: center; }
#video-list .col a::before { position: absolute; z-index: 1; content: ''; top: 50%; left: 50%; margin: -65px 0 0 -37px;  display: table; width: 74px; height: 75px; background: url(images/video-play.png) no-repeat; }
#video-list .col a img { display: block; width: 100%; filter: grayscale(100%); }
#video-list .col a span { display: block; }
#video-list .col a span.img { position: relative; overflow: hidden; background-repeat: no-repeat; background-position: center center; background-attachment: scroll; background-size: cover; filter: grayscale(100%); }
#video-list .col a span.img::before { display: block; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 1px solid rgba(0, 0, 0, .1); box-sizing: border-box; }
#video-list .col a span.title { margin-top: 1em; }
#video-list .col a span.artist { margin-top: .5em; font-size: 13px; color: #999; }
#video-list .col a:hover span.img { filter: grayscale(0); }

#video-player { display: none; position: fixed; z-index: 101; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); }
#video-player iframe { position: absolute; top: 50%; left: 50%; }

#news-list { padding-top: 5.5em; }
#news-list .grid-item a { filter: grayscale(100%); }
#news-list .grid-item a:hover { filter: grayscale(0); }
#news-read .cols { margin: 80px auto 0; max-width: 1000px; padding-top: 30px; border-top: 1px solid #000; }
#news-read .cols .article { line-height: 1.7; }
#news-read .cols .latest .item { margin-bottom: 15px; padding-top: 15px; border-top: 1px solid #f1f1f1; }
#news-read .cols .latest .item a { display: block; filter: grayscale(100%); }
#news-read .cols .latest .item a:hover { filter: grayscale(0); }
#news-read .cols .latest .item .thumbnail { margin-left: 15px; width: 70px; height: 50px; float: right; background-repeat: no-repeat; background-position: center center; background-size: cover; }
#news-read .cols .latest .item .title { display: block; line-height: 1.4; }
#news-read .cols .latest .item .date { display: block; font-size: 1.3em; letter-spacing: .1em; color: #999; }
#news-read .cols .latest .item:first-child { border-top: 0 none; }
#news-read .cols .latest .item:first-child .title { margin-top: 0; }
#news-read .redactor-styles { padding: 0; min-height: 400px; font-family: 'Nanum Myeongjo', serif; font-size: 15px; font-weight: 700; }
#news-read .redactor-styles figure { text-align: center; }
#news-read .redactor-styles figcaption { margin-top: 7px; text-align: center; }

#about { margin-top: 5.5em; }
#about .kr { padding-right: 2em; line-height: 1.8; }
#about .en { font-family: 'Bitter', serif; font-size: 14px; font-weight: 400; letter-spacing: 0; line-height: 1.7; }

#contact { padding-top: 5.5em; }
#contact .txt { text-align: center; line-height: 1.6; }
#contact .txt .en { font-family: 'Bitter', serif; letter-spacing: .05em; }

#popup { display: none; position: fixed; z-index: 9000; top: 0; left: 0; width: 100%; height: 100%; }
#popup::before { display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 1; }
#popup #popup-content { position: relative; max-width: 1080px; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); }
#popup #popup-close { position: absolute; top: 20px; right: 20px; font-size: 50px; color: #fff; cursor: pointer; }
#popup #popup-close:hover { color: #ed7a2f; }

@media only screen and (max-width: 1120px) {
	#header #nav li a { padding: 0 .8em; }
}

@media only screen and (max-width: 1000px) {
	.wrap { padding: 0 25px; width: 100%; max-width: 1000px; }
	#header #nav li a { padding: 0 .7em; letter-spacing: .2em; }
	#header h1 { margin-left: 25px; }
	#header #sns { margin-right: 25px; }
	#header #sns a { margin-right: 0; }
	#header #sns a.fb { width: 18px; }
}

@media only screen and (max-width: 950px) {
	#page { padding-top: 70px; }
	#header { height: 70px; }
	#header h1 { position: absolute; left: 50%; top: 13px; float: none; margin: 0 0 0 -15px; }
	#header h1 a { width: 30px; height: 44px; }
	#header #nav { display: none; position: fixed; z-index: 99; top: 0; left: 0; width: 100%; background-color: #fff; text-align: center; opacity: 0; transition: 1s; }
	#header #nav li { display: block; border-top: 1px solid #eee; }
	#header #nav li a { display: block; line-height: 40px; }
	#header #sns { display: none; }
	#mobile-nav { display: block; position: absolute; top: 13px; right: 20px; padding: 15px 0 0; width: 44px; height: 44px; overflow: hidden; border-radius: 46px; background-color: #000; color: #fff; text-align: center; font-family: sans-serif; font-weight: 900; font-size: 11px; line-height: 1; cursor: pointer; }
	#mobile-nav i { margin-top: 2px; font-size: 8px; }
	#mobile-nav i.fa-arrow-up { display: none; }
	#mobile-nav i.fa-arrow-down { display: block; }
	#header.open #mobile-nav i.fa-arrow-up { display: block; }
	#header.open #mobile-nav i.fa-arrow-down { display: none; }
	#header.open #nav { display: block; top: 70px; opacity: 1; }
	#header.black #mobile-nav { background-color: #fff; color: #000; }
	#header.black #nav { background-color: #000; }
	#header.black #nav li { border-top: 1px solid #222; }
	.short #header { height: 70px; }
	.short #header h1 { margin-top: 0; }
	.short #header #nav li a { line-height: 40px; }
	.short #header #sns { margin-top: 20px; }
	#home-banner,
	#home-banner .item a { height: 600px; }
	#home-release li::last-child { margin-right: 0; }
	#article { margin-top: 40px; }
	.page-title { padding-top: 60px !important; }
	#release-info .intro { padding-left: 0; padding-right: 0; }
}

@media only screen and (max-width: 930px) {
	.slick-dots { right: 25px; }
	#home .cols .col { float: none; margin-left: 0; width: 100%; }
	#home-release li { width: 48%; }
	#home-release li:first-child { margin-right: 2%; }
	#home-release li:last-child { margin-right: 0; margin-left:2%; }
	#home-news { margin-top: 4em; padding-top: 1em; border-top: 1px solid #000; }
	#artist-profile .kr { padding-right: 0; }
}

@media only screen and (max-width: 900px) {
	#release-info .track {  }

}

@media only screen and (max-width: 700px) {
	#home-banner,
	#home-banner .item a { height: 500px; }
	#goto-jnhmusic { top: 25px; left: 25px; }
	#artist-nav ul li a { padding: 0 0.5em; }
	.kr { letter-spacing: -0.05em; }
	.news-grid .grid-sizer, .news-grid .grid-item { width: 48%; }
}

@media only screen and (max-width: 650px) {
	.vpi,
	.vp { display: none; }
	.vm { display: block; }
	.cols { margin-top: 0 !important; padding-top: 0 !important; }
	.cols .col { float: none; margin-top: 1.5em; margin-left: 0; }
	.cols .col.col-12,
	.cols .col.col-11,
	.cols .col.col-10,
	.cols .col.col-9,
	.cols .col.col-8,
	.cols .col.col-7,
	.cols .col.col-6,
	.cols .col.col-5,
	.cols .col.col-4,
	.cols .col.col-3,
	.cols .col.col-2,
	.cols .col.col-1 { width: 100% !important; }
	.page-title { padding-top: 0 !important; font-size: 30px; }
	.page-title.en { font-size: 40px; }
	.page-title > span.kr { font-size: 13px; }
	.page-title .vm { display: block; }
	.page-title .hm { display: none; }
	#artist-list,
	#release-list,
	#release-info,
	#video-list,
	#contact { padding-top: 0; margin-top: 2.7em; }
	#artist-banner { height: 350px; }
	#artist-nav { margin-top: -80px; height: 80px; }
	#artist-nav::before { height: 80px; }
	#artist-nav ul { padding: 0 100px; }
	#artist-nav ul::before { display: block; content: ''; position: absolute; left: 0; top: 40px; width: 100%; height: 1px; overflow: hidden; background-color: #333; }
	#artist-nav ul li::before { margin-top: 14px; }
	#artist-nav ul li:nth-child(4)::before { display: none; }
	#artist-nav ul li a { line-height: 40px; }
	#artist-video #video-list,
	#artist-album #release-list { padding-left: 0; padding-right: 0; }
	#release-info .cols { padding-top: 0; border-top: 0 none; }
	#release-info .cols .col-7 { margin-top: 0; }
	#release-info .cols .col-5 { margin-top: 40px; }
	#release-info .track { text-align: center; }
	#release-info .track a.itunes { position: static; margin: 20px auto 30px; }
	#release-info .intro { padding-top: 40px; }
	#news-read .cols { margin-top: 1.7em !important; }
	#news-read .cols .latest { border-top: 1px solid #000; }
}

@media only screen and (max-width: 550px) {
	#artist-nav ul { padding: 0 60px; }
	#goto-jnhmusic { display: block; top: 0; left: 0; width: 100%; height: 25px; background-color: #000; font-size: 18px; color: #999; line-height: 25px; text-align: center; }
	.news-grid .grid-sizer, .news-grid .grid-item { width: 100%; }
	.news-grid .gutter-sizer { display: none; width: 0%; }
	#artist-header .txt { padding: 3em 0 2em; }
}

@media only screen and (max-width: 520px) {
	#home-banner .item a .txt { bottom: 1em; }
	#home-banner .item a .txt .kr { margin-bottom: 5px; line-height: 1.2; }
	#home-banner .item a .txt .kr strong { display: block; }
	#home-banner .item a .txt .en { line-height: 0.5; }
}

@media only screen and (max-width: 480px) {
	#home-banner,
	#home-banner .item a { height: 400px; }
	#home-banner .item a .txt .kr { font-size: 25px; }
	#home-banner .item a .txt .en { font-size: 16px; }
	#home-release li { float: none; margin-left: 0 !important; margin-right: 0 !important; width: 100%; }
	#home-release li:last-child { margin-top: 2em; }
	#artist-nav ul { padding: 0 20px; }
	#artist-banner { height: 250px; }
}