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

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

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

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

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


* {
	font-family: 'Montserrat', 'Gothic A1', sans-serif !important;
}


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

 *,
 *: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, h4, h5, h6, ul, li, dl, dt, dd {
 	margin: 0;
 	padding: 0;
 	word-wrap: break-word;
 }

 body {
 	background-color: #1dc3bd;
 	font-size: 62.5%;
 	font-weight: 400;
 	letter-spacing: -0.05em;
 	-webkit-overflow-scrolling: touch;
 	-webkit-user-select: none;
 	-webkit-touch-callout: none;
 	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 	background-position: center 50em;
 	color: #fff;
 }

 h1, h2, h3, h4, h5, h6 {
 	margin-bottom: .5em;
 	color: #fff;
 	text-decoration: underline;
 }

 h1 { font-size: 3.6em }
 h2 { font-size: 3.0em }
 h3 { font-size: 2.1em }
 h4 { font-size: 1.8em }
 h5 { font-size: 1.4em }
 h6 { font-size: 1.2em }

 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 {}

 .hidden {
 	display: none;
 }

 #wrap {
 	position: relative;
 	max-width: 970px;
 	width: 100%;
 	height: auto;
 	margin: 0 auto;
 }

 .container {
 	text-align: center;
 	background-image: url(../img/ptn.jpg);
 	background-color: #fff;
 	background-repeat: repeat;
 	background-size: 100%;
 }

 .container .title {
 	padding:0px 0px 0px 0px
 }

 .img img.m_img {
 	width:100%;
 }

 .line {
 	padding-top: 10px;
 	bottom: 0px;
 }

 .line img {
 	text-align: center;
 }

 .video {
 	padding-top:0px;
 	width:90%;
 	margin:0 auto;
 }

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

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

 .sub-tit {	
 	font-size: 2em;
 	color: #f4a7ba;
 	font-weight: 800;
 	letter-spacing: 0.5px;
 }

 .about  {
 	color: #fff;
 	text-align: center;
 	padding-top: 0px;
 	margin:0 auto;
 }

 .about_text {
 	text-align: justify;
 	margin: 0 auto;
	text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
	
}

.intro {
	display: none;
	font-size: 1.6em;
	font-weight: 400;
	line-height: 2.1em;
	text-align: center;
}

.intro .intro-ko {
	width: 80%;
	margin: 0 auto 8%;
	font-weight: 700;
	letter-spacing: -1px;
	
}

.intro .intro-en {
	width: 88%;
	margin: 0 auto 8%;
	font-weight: 600;
}

.intro .intro-cn {
	width: 78%;
	margin: 0 auto 8%;
	font-weight: 600;
}

.intro .intro-jp {
	width: 78%;
	margin: 0 auto 8%;
	font-weight: 600;
	letter-spacing: -1px;
}

.intro .chinese, {
	font-size: 1.35em !important;
}

.intro .japanese {
	font-size: 1.35em !important;
	padding-bottom: 55px;
}

.about.active,
.intro.active {
	display: block;
}

.about .intro p {
	margin-bottom: 16%;
}

.language-list {
	font-size: 3em;
	margin: 7% 0 5% 0;
	font-weight:900;
	text-align: center;
	color:#000;
}

.language-list li {
	width: 30px;
	margin: 0 5px;
	font-size: 14px;
	display: inline-block;
}

.language-list li.active,
.language-list li:hover,
.language-list li.active:hover {
	color: #000;
	background-color: #ff5396;
	border: 2px solid #000;
	padding: 5px;
	text-align: center;
	font-weight: 900;
	box-shadow: 2px 2px 0 #000;
	cursor: pointer;
}

.language-list li:hover,
.language-list li.active:hover {
	cursor: default;
}

.tracklist { margin:0 auto }

.tracklist_kr, .tracklist_en, .tracklist_cn, .tracklist_jp {
	display: block;
}

.tracklist_m {
	display: none;
}

.music {
	padding: 0% 33% 8% 33%;
}

.music .cover {
	width:100%;
	margin-bottom:8%;
	box-shadow: 15px 8px 18px rgba(128, 43, 65, 0.10)
}

.music .deco {
	display: block;
	margin: 0 auto 7%; 
}

.link .dropdown {
	background-color: #e64b87;
	border: 2px solid #000;
	height: 3.4em;
}

.link li.button {
	width: 100%;
	padding: 30px;
	margin: 3% auto 0 auto;
	display: inline-block;
	padding: 0;
	position: relative;
}

.link a {background-color: #282828;
	color: #fff;
	display: block;
	font: 13px/40px 'Montserrat', 'Gothic A1', sans-serif;
	font-weight: 700;
	padding: 0.4em 5em;
	letter-spacing: 0.4px;
	text-align: left;
	text-decoration: none;
	-webkit-transition: all .1s ease;
	-moz-transition: all .1s ease;
	-ms-transition: all .1s ease;
	-o-transition: all .1s ease;
	transition: all .1s ease;
}

.link a.dropdown {
	font: 16px/40px 'Montserrat', 'Gothic A1', sans-serif !important;
	font-weight: 900 !important;
	padding: 0.4em 1em !important;
	letter-spacing: 1px !important; 
}

.link ul.ygselect a{
	padding: 0.5em 1em !important;
} 

.link a.dropdown img.arrow {
	width: 14px; 
	float: right;
	margin: 1em auto 0 auto;
}

.link a.dropdown img.arrow-up {
	display: none;
}

.link a.dropdown:hover img.arrow-down {
	display: none;
}

.link a.dropdown:hover img.arrow-up {
	display: inline-block;
}

.link li ul {
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	opacity: 0;
	width: 100%;
	min-width: 100%;
	margin: 0;
	visibility: hidden;
	z-index: 1;
	-webkit-transition: all .1s ease;
	-moz-transition: all .1s ease;
	-ms-transition: all .1s ease;
	-o-transition: all .1s ease;
	transition: all .1s ease;
}

.link li:hover ul {
	opacity: 1;
	top: 100%;
	visibility: visible;
	border-right: 2px solid #111;
	border-left: 2px solid #111;
	border-bottom: 2px solid #111;
}

.link li:hover a.dropdown img.arrow-down {
	display: none;
}

.link li:hover a.dropdown img.arrow-up {
	display: inline-block;
}

.link li ul li {
	white-space: nowrap;
}

.link li a {
	border: 1px solid #111;
}

.link li ul a:hover {
	background: #fff;
	color:#e64b87;
	background-image: visible;
}

a.icon {
	background-position: 10px;
	background-size: 42px; 
}

.link li:hover a.icon {
	background-repeat: no-repeat;
	background-position: 10px;
	background-size: 42px; 
	-webkit-transition: .1s ease-in-out;
	transition: .1s ease-in-out;
}

.line .bottom_pc {
	display:block;
	margin: auto;
}

.line .bottom_m {
	display:none;
}



.link li:hover a.melon {background-image: url(//artist.ygfamily.com/common/img/icon/light/melon.png)}
.link li:hover a.genie {background-image: url(//artist.ygfamily.com/common/img/icon/light/genie.png)}
.link li:hover a.bugs {	background-image: url(//artist.ygfamily.com/common/img/icon/light/bugs.png)}
.link li:hover a.vibe {background-image: url(//artist.ygfamily.com/common/img/icon/light/vibe.png)}
.link li:hover a.flo {background-image: url(//artist.ygfamily.com/common/img/icon/light/flo.png)}
.link li:hover a.youtubemusic {background-image: url(//artist.ygfamily.com/common/img/icon/light/youtubemusic.png)}
.link li:hover a.apple {background-image: url(//artist.ygfamily.com/common/img/icon/light/apple.png)}
.link li:hover a.spotify {background-image: url(//artist.ygfamily.com/common/img/icon/light/spotify.png)}

.link li a.melon:hover,
.link li a.melon:active,
.link li a.melon:focus {background-image: url(//artist.ygfamily.com/common/img/icon/dark/melon.png)}


.link li a.genie:hover,
.link li a.genie:active,
.link li a.genie:focus {background-image: url(//artist.ygfamily.com/common/img/icon/dark/genie.png)}


.link li a.bugs:hover,
.link li a.bugs:active,
.link li a.bugs:focus {background-image: url(//artist.ygfamily.com/common/img/icon/dark/bugs.png)}


.link li a.vibe:hover,
.link li a.vibe:active,
.link li a.vibe:focus {background-image: url(//artist.ygfamily.com/common/img/icon/dark/vibe.png)}

.link li a.flo:hover,
.link li a.flo:active,
.link li a.flo:focus {background-image: url(//artist.ygfamily.com/common/img/icon/dark/flo.png)}


.link li a.youtubemusic:hover,
.link li a.youtubemusic:active,
.link li a.youtubemusic:focus {background-image: url(//artist.ygfamily.com/common/img/icon/dark/youtubemusic.png)}


.link li a.apple:hover,
.link li a.apple:active,
.link li a.apple:focus {background-image: url(//artist.ygfamily.com/common/img/icon/dark/apple.png)}


.link li a.spotify:hover,
.link li a.spotify:active,
.link li a.spotify:focus {background-image: url(//artist.ygfamily.com/common/img/icon/dark/spotify.png)}



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

@media (min-width: 970px) {
}

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



@media (max-width: 969px) {

	.title { width:100%; margin:0 auto }

	.img img.m_img { width:100% }

	.about { padding: 0% 0 3% 0 }

	.about_text {
		-webkit-column-count: 1; /* Chrome, Safari, Opera */
		-moz-column-count: 1; /* Firefox */
		column-count: 1;
	}

	.language-list { text-align: center; margin: 6% 0 5% 0 }
	
	.language-list li { padding: 4px 0px 4px 9px; margin: 0 5px 0 0 }
	
	.music {
		padding: 4% 0 12% 0;
		margin-top:0;
		width:85%;
		margin:0 auto;
	}

	.music .cover { width:60%; margin-bottom: 3% }
	
	.music .link { margin: 0% 20% }

	.music .deco { display: block;	margin: 0 auto 4% }
	
	.link li.button { margin: 7% auto 0 auto }

	.link a.dropdown img.arrow { display: none; opacity: 0 }

	.link li ul {
		display: block;
		opacity: 1;
		position: relative;
		top: 50%;
		left: 0;
		width: 100%;
		min-width: 100%;
		margin: 0;
		visibility: visible;
	}
}

	.link li a.icon {
		background-repeat: no-repeat;
		background-position: 10px;
		background-size: 42px; 
		-webkit-transition: .1s ease-in-out;
		transition: .1s ease-in-out;
	}


	.link li a.melon {background-image: url(//artist.ygfamily.com/common/img/icon/light/melon.png)}
	.link li a.genie {background-image: url(//artist.ygfamily.com/common/img/icon/light/genie.png)}
	.link li a.bugs {background-image: url(//artist.ygfamily.com/common/img/icon/light/bugs.png)}
	.link li a.vibe {background-image: url(//artist.ygfamily.com/common/img/icon/light/vibe.png)}
	.link li a.flo {background-image: url(//artist.ygfamily.com/common/img/icon/light/flo.png)}
	.link li a.youtubemusic {background-image: url(//artist.ygfamily.com/common/img/icon/light/youtubemusic.png)}
	.link li a.apple {background-image: url(//artist.ygfamily.com/common/img/icon/light/apple.png)}
	.link li a.spotify {background-image: url(//artist.ygfamily.com/common/img/icon/light/spotify.png)}

	.tracklist_kr, .tracklist_en, .tracklist_cn, .tracklist_jp {
		display: none;
	}

	.tracklist {padding:0 0 0 0;}

	.tracklist_m {
		display: block;
		margin: auto;
	}

	.tracklist_pc {
		display: none;
	}

	.line .bottom_pc {
		display:block;
		margin: auto;
	}

	.line .bottom_m {
		display:none;
	}


}
@media (max-width: 740px) {
	.music .cover {
		width: 80%
	}
	.music .link {
		margin:0% 10%;
	}
}

@media (max-width: 640px) {

	.music {
		padding: 6% 0 2% 0;
	}
	.music .cover {
		width: 100%
	}

	.music .link {
		margin:0% 0%;
	}

	.line .bottom_pc {
		display: none;
	}

	.line .bottom_m {
		display: block;
		margin: auto;
	}

	.language-list {
		margin:8% 0;
	}

	.video {
		width: 100%;
		margin-top: 14%;
		margin-bottom:4%;
	}
}

@media (max-width: 320px) {
	#wrap {
		min-width: 320px;
		width: 320px;
	}

	.title {
		width:80%
		margin:0 auto;
	}

	.music .link {
		margin: 0%
	}

	.video {
		margin-top: 10%;
		width: 100%;
	}	

	.language-list {
		margin: 10% auto;
	}
}