/*
가이드 명칭 : YG CSS 가이드
가이드 내용 : 사이트 레이아웃
최초 제작자 : YG WDT
최종 제작일 : 2025.07.
수정 / 배포 : 담당자 문의 후 수정 가능. 재배포 절대 불가
*/

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

/* IE6.0 Hack CSS 연결 ----------- */

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

@charset "utf-8";
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 * Common
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

* {
	/*font-family: "Noto Serif KR", serif;*/
	font-family: "Noto Sans KR", sans-serif;
}

html * {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

*,
*:after,
*:before {
	-webkit-text-size-adjust: none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
html,
body {
	width: 100%;
}

html,
body,
p,
h1,
h2,
h3,
ul,
li,
dl,
dt,
dd {
	margin: 0;
	padding: 0;
	word-break: keep-all;
}

body {
	color: #FFF;
	background: linear-gradient(to bottom, #000, #333, #111);
	font-size: 62.5%;
	font-weight: 400;
	font-stretch: condensed;
	letter-spacing: -.1em;
	text-align: center;
	-webkit-overflow-scrolling: touch;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

h1,
h2,
h3, 
h1::after,
h2::after,
h3::after {
	font-family: freight-big-pro, serif;
	color: #E1F5FE;
	background: linear-gradient(to right, #e0e0e0, #fff, #eee);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

h1,
h2,
h3 {
	display: inline-block;
	position: relative;
	text-align: center;
}

h1::after,
h2::after,
h3::after {
	position: absolute;
	left: 0;
	top: 0;
	filter: blur(3px);
	-webkit-filter: blur(3px);
}

h1 {
	font-size: 4em;
}

h2 {
	font-size: 3.6em;
}

h3 {
	font-size: 2.4em;
}

ul,
ol,
dl {
	list-style: none;
}

table {
	border-collapse: collapse;
}

img {
	max-width: 100%;
	border: 0;
	vertical-align: top;
}

a {
	display: inline-block;
	overflow: visible;
	cursor: pointer;
	padding: 0;
	border-radius: 0px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	vertical-align: middle;
	text-align: center;
	box-sizing: border-box;
	onfocus: blur;
}

a,
a:link {
	text-decoration: none;
}

a:hover,
a:active,
a:focus {}

.icon {
	display: inline-block;
	margin-right: .5em;
	width: 2em;
	height: 1.5em;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 100%;
	-webkit-transition: .1s ease-in-out;
	transition: .1s ease-in-out;
}

a:hover span.icon,
a:active span.icon,
a:focus span.icon {}


.icon.spotify {
	background-image: url(https://artist.ygfamily.com/common/img/icon/black/spotify.png)
}

.icon.applemusic {
	background-image: url(https://artist.ygfamily.com/common/img/icon/black/apple.png)
}

.icon.melon {
	background-image: url(https://artist.ygfamily.com/common/img/icon/black/melon.png)
}

.icon.genie {
	background-image: url(https://artist.ygfamily.com/common/img/icon/black/genie.png)
}

.icon.vibe {
	background-image: url(https://artist.ygfamily.com/common/img/icon/black/vibe.png)
}

.icon.flo {
	background-image: url(https://artist.ygfamily.com/common/img/icon/black/flo.png)
}

.icon.bugs {
	background-image: url(https://artist.ygfamily.com/common/img/icon/black/bugs.png)
}

.icon.youtubemusic {
	background-image: url(https://artist.ygfamily.com/common/img/icon/black/youtubemusic.png)
}

.icon.ygselect {
	background-image: url(https://artist.ygfamily.com/common/img/logo/black/yg.png)
}

strong {
/*	font-family: 'Gothic A1', sans-serif;*/
	font-weight: 700;
}

.hidden {
	display: none;
}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 * layout
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

#wrap {
	position: relative;
	overflow: hidden;
}

#wrap > .container {
	background: url(../img/noise.png) repeat top center;
}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 * content
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

#content {
	margin: 0 auto;
}

#main,
#album,
#video {
	padding: 5em 0;
}

#album .links {
	position: relative;
	margin: 0 auto;
}

#album .link {
	border: 1px solid #fff;
	box-shadow: 0 0 5px 0 #fff;
}

#album .links h3,
#album .links h3::after {
	padding: .3em 1em;
}

#album .music h3::after {
	content: 'LISTEN ON';
}

#album .album h3::after {
	content: 'BUY NOW';
}

#album .link ul {
	background: url(../img/bg-noise-w.jpg) repeat top left #fff;
	border: 1px solid #fff;
	box-shadow: 0 0 5px 0 #fff;
}

#album .link a {
	display: block;
	padding: .5em;
	text-align: left;
	font-size: 1.6em;
	font-weight: 700;
	color: #000;
}

#album .link a span {
	vertical-align: middle;
}

#album .tracklist {
	margin-top: 5em;
}

#album .tracklist h2 {
	margin-bottom: .75em;
}

#album .tracklist h2::after {
	content: 'TRACKLIST';
}

#album .tracklist p {
	font-size: 2em;
	margin-bottom: 1em;
	vertical-align: middle;
}

#album .tracklist strong,
#album .tracklist span.credit {
	display: block;
}

#album .tracklist strong {
	margin-bottom: .3em;
	vertical-align: middle;
}

#album .tracklist span.title {
	display: inline-block; 
	padding: 0 .25em;
	margin-top: -.5em;
	font-size: .5em;
	color: #000;
	background-color: #98c57e;
	vertical-align: middle;
}

#album .tracklist span.credit {
	font-size: .625em;
}

#album .about {
	display: none;
	margin-bottom: 5em;
	font-size: 1.75em;
	font-weight: 400;
}

#album .about.active {
	display: block;
}

#album .about p {
	margin-top: .75em;
}

#album .language-list {
	margin-bottom: 1em;
	font-size: 1.5em;
}

#album .language-list li {
	display: inline-block;
	margin-right: .5em;
	padding: .35em 0 .45em;
	width: 2.4em;
	border: 1px solid #ffffff;
	cursor: default;
	font-family: freight-big-pro, serif !important;
	font-weight: 700;
}

#album .language-list li.active,
#album .language-list li:hover,
#album .language-list li.active:hover {
	color: #000;
	background-color: #98c57e;
	border-color: #98c57e;
	cursor: default;
}

#album .language-list li:hover {
	cursor: pointer;
}

#video .video-embed-area {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
}

#video .video-embed-area iframe,
#video .video-embed-area video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 * footer
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */


/* ------------------------------
---------------------------------
[ Desktops only ]
---------------------------------
------------------------------ */

@media (min-width: 1025px) {
	#content {
		max-width: 1280px;
	}

	#main img {
		max-width: 360px;
	}

	#album img {
		max-width: 540px;
	}

	#album .links {
		max-width: 400px;
	}

	#album .link {
		position: relative;
		display: inline-block;
		width: 48%;
	}

	#album .link:hover {
		background-color: rgba(0, 0, 0, 0.5);
	}

	#album .link.music {
		margin-right: 2%;
	}

	#album .link ul {
		display: none;
		position: absolute;
		width: 100%;
		z-index: 9;
	}

	#album .link.music:hover ul,
	#album .link.album:hover ul {
		display: block;
		cursor: pointer;
	}

	#album .link a:hover {
		background: url(../img/bg-noise-g.jpg) repeat top left #98c57e;
	}

	#video {
		padding: 4em 0 12em;
	}
}

/* ------------------------------
---------------------------------
[ Phones & Tablets only ]
<Tablets> Large screens
---------------------------------
------------------------------ */

@media (max-width: 1024px) {
	#content {
		width: 90%;
	}
	
	#main img {
		width: 70%;
		max-width: 300px;
	}

	#album img {
		width: 90%;
		max-width: 480px;
	}

	#album .links {
		width: 67%;
		max-width: 354px;
	}

	#album .link {
		background-color: rgba(0, 0, 0, 0.5);
	}

	#album .link a:active,
	#album .link a:focus {
		background: url(../img/bg-noise-g.jpg) repeat top left #98c57e;
	}

	#album .link.album {
		margin-top: 3em;
	}

	#video {
		padding: 2em 0 10em;
	}
}

@media screen and (max-aspect-ratio: 1/1) {}

/* ------------------------------
---------------------------------
<Phones> Large screens
---------------------------------
------------------------------ */

@media (max-width: 480px) {
}

@media only screen and (orientation: landscape) {}

/*/////////////////////////////// end /*/