@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Roboto:wght@100;300;400;500;700&family=Teko:wght@300;400;500;600;700&display=swap');
/*reset*/


body, div, p, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, table, tr, tn, td, form, fieldset, legend, label, input, textarea, select, button {
	margin: 0;
	padding: 0;
}
body, h1, h2, h3, h4, h5, h6 {
	font-size: 12px;
	color: #333;
}
a {
	text-decoration: none;
	color: #333;
}

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

body {
	overflow-x: hidden;
	scroll-behavior: smooth;
}

img {
	border: none;
}
strong, em {
	font-weight: normal;
	font-style: normal;
}
table {
	border-collapse: collapse;
}
input[type="radio"] {
	display: none;
}

/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
 display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
body {
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}


/*모바???�이??메뉴*/
#door {
    display: none;
}

#door + label {
    left: 5%;
    top: 10px;
    padding: 5px;
    cursor: pointer;
    color: #fff;
    z-index: 111;
    transition: all 0.5s;
    background-image: url("../images/menu_burger@2x.png");
    background-size: 100%;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    display: none;
    transform: scale(1, 1);
	z-index:9990;
}

#door:checked + label {
    left: 2.5%;
	top:2%;
    width: 20px;
    height: 20px;
	background-image: url("../images/menu_close@2x.png");
    position: fixed;
    display: block;
    z-index: 9996;
}

#door:checked ~ #left {
    background: rgba(0, 0, 0, 0.9);
    left: 0;
    z-index: 9995;
}

#left {
    background-color: #faf8fb;
    height: 100%;
    position: fixed;
    left: -100%;
    top: 0;
    width: 100%;
    transition: all 0.5s;
    z-index: 102;
    display: inherit;
    overflow: auto;
    overflow-x: hidden;
    padding-top: 30px;
    padding-bottom: 100px;
}

#left nav ul li a{
	font-size:35px;
}

#left nav ul li a:hover {
	color:#f60 !important;
	border-bottom:2px solid #f60;
}



/*그루블린 로고 모션*/
.Groovlin_logo_burgerMenu {
    position: absolute;
    transform: scale(0.4);
	display:none;
}


.triangle_01, .triangle_02, .triangle_03, .triangle_04 {
	width:150px;
	height:150px;
	margin:0px auto;
	right:0;
	display:block;
	position:absolute;
	transition:all 0.5s;
}

.triangle_01 {
	left:0;
    margin-top: 95px;
}

.triangle_02 {
	left:44px;
    margin-top: 95px;
}

.triangle_03 {
	left:-2px;
    transform: rotate(-180deg);
    margin-top: -95px;
}

.triangle_04 {
    transform: rotate(-180deg);
	left:42px;
    margin-top: -95px;
}


.triangle_line_left {
    width: 42px;
    transform: rotate(300deg) translate(6px,2px);
    border-top: 5px solid #121212;
    border-right: 4px solid transparent;
    border-left: 7px solid transparent;
    position: relative;
    margin-left: 32px;
}

.triangle_line_right {
    width: 41px;
    transform: rotate(-300deg) translate(17px,-48px);
    border-top: 5px solid #121212;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    position: relative;
    margin-left: 9px;
}


.triangle_line_stripe_01{
    width: 8px;
    height: 0px;
    margin: 0px auto;
    position: absolute;
    display: block;
    border-bottom: 9px solid #121212;
    border-right: 1px solid transparent;
    border-left: 1px solid transparent;
    left: -1px;
    right: 0;
    margin-top: -27px;
}

.triangle_line_stripe_02 {
    width: 27px;
    height: 0px;
    margin: 0px auto;
    position: absolute;
    display: block;
    border-bottom: 6px solid #121212;
    border-right: 3px solid transparent;
    border-left: 3px solid transparent;
    left: -1px;
    right: 0;
    margin-top: -10px;
}

.triangle_line_stripe_03 {
    width: 25px;
    height: 0px;
    margin: 0px auto;
    position: absolute;
    display: block;
    border-bottom: 4px solid #121212;
    left: 19px;
    right: 0;
    margin-top: -32px;
}

.triangle_line_bottom{
    width: 42px;
    height: 0px;
    margin: 0px auto;
    position: absolute;
    display: block;
    border-bottom: 5px solid #121212;
    border-right: 6px solid transparent;
    border-left: 5px solid transparent;
    left: -1px;
    right: 0;
    margin-top: 5px;
}





/*layout*/

* {
	margin: 0;
	padding: 0;
	border: 0;
	word-break: keep-all;
	word-wrap: break-word;
}
#wrap {
	margin: 0 auto;
	text-align: center;
	max-width: 1920px;
}

header {
	width: 99.5vw;
	height: 80px;
	z-index: 1111;
	background-size: contain;
	overflow: hidden;
	top: 0;
	max-width: 1920px;
	margin: 0px auto;
	left: 1px;
	right: 0;
	position:relative;
}

header .logo {
	width: 160px;
	height: fit-content;
	margin: 0px auto;
	margin-top: 27px;
	position: absolute;
	left: -30px;
	right: 0;
}

header .logo img {
	width: 100%;
	cursor:pointer;
}

nav {
	float: left;
	position: absolute;
	margin-top: 10px; 
    z-index: 101;
}

nav ul {
	text-decoration: none;
	list-style: none;
	margin: 11px 5vw 0 0;
	font-size: 22px;
	font-weight: 400;
}

nav ul li {
	float: left;
	padding: 0vw 1.5vw 0 1.5vw;
    font-family: 'Teko', sans-serif;
}

nav ul li a {
	color: #7f7f7f;
	cursor: pointer;
}
nav ul li a:hover {
	color: #111111;
}
nav ul li a:active {
	color: #111111;
}
/* �?CSS 중복 - ?�중 ??��*/


#left nav ul li {
    float:inherit;
	padding:20px 0px 0px 50px;
}


header .sns {
    top: 25px;
    position: absolute;
    left: 90%;
    right: 0;
    width: 140px;
    transform: scale(0.7);
}

header .sns ul {
}

header .sns ul li {
	float: left;
	margin: 0 10px 0 10px;
	width: 15px;
	height: 15px;
	cursor: pointer;
}
header .right ul li img {
	width: fit-content;
	height: 15px;
}
/* �?CSS 중복 - ?�중 ??��*/


/* 좌측 ?�비게이??*/
#left_btn {
	position: fixed;
	left: 4rem;
	top: 15rem;
	z-index: 9999;
}
#left_btn .left_btn {
	width: 20px;
	height: 20px;
	margin-bottom: 2rem;
	cursor: pointer;
	background-image: url("../images/dot_20x20_off.png");
}
#left_btn .left_btn:hover {
	background-image: url("../images/dot_20x20_hover.gif") !important;
}
/* section_01 */


.horn {
    margin-top:-52px;
    display: flex;
    flex-direction: column;
    align-items: Center;
    z-index: 100;
    position: absolute;
    left: 0;
    right: 0;
}

.horn img {
	width: 49vw;
	position: fixed;
	max-width: 100%;
	min-width: 780px;
	height: auto;
	transform-style: preserve-3d;
	transition: 0.75s;	
}

.horn_motion {
	margin-top:14px !important;
	transition: 0.75s;
	animation-name: ani_text;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
	opacity:0;
    animation-duration: 1s;
    animation-delay: 1.5s;
	scroll-behavior: smooth;
}

.horn .left_btn {
    width: 12vw;
    height: 40vw;
    position: fixed;
    /*background-color: #999;
    opacity: 0.1;*/
    z-index: 5;
    left: 31%;
    top: 5vw;
}

.horn .left_btn:hover  ~ img {	
	transform: translateX(0px) translateZ(0px) translateX(-10px) rotateY(-10deg);
}

.horn .right_btn {
    width: 12vw;
    height: 40vw;
    position: fixed;
    /*background-color: #999;
    opacity: 0.1;*/
    z-index: 5;
    right: 31%;
    top: 5vw;
}

.horn .right_btn:hover  ~ img {	
	transform: translateX(0px) translateZ(0px) translateX(10px) rotateY(10deg);
}

.scroll_as {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	left: 0;
	right: 0;
	bottom: 5%;
	animation-name: flex;
	animation-delay: 0s;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
	z-index:99;
}

.scroll_as p {
    width: fit-content;
    border-radius: 30px;
    border: 2px solid #f1f1f1;
    padding: 6px 17px;
    margin: 0px auto;
    margin-bottom: 5px;
	background-color:#fff;
}

 @keyframes flex {
 0% {
 transform: translate(0px, 0px);
 opacity:0;
}
 16.6% {
 transform: translate(0px, 13px);
 opacity:1;
}
 33.2% {
 transform: translate(0px, 0px);
 opacity:1
}
 66.4% {
 transform: translate(0px, 13px);
 opacity:1;
}
 100% {
 transform: translate(0px, 0px);
 opacity:0;
}
}
.scroll_as img {
	width: 30px;
}
.plus_btn_parent {
	max-width: 1760px;
	width: 90%;
	height: 90px;
	position: absolute;
	left: 0;
	right: 0;
	margin:0px auto;
}

#section_01 .plus_btn_parent {
	margin-top: 340px;
	position: absolute;
}

#section_02 .plus_btn_parent {
	margin-top:630px;
}
#section_03 .plus_btn_parent {
	margin-top: -250px;
}

.plus_btn {
	width: 90px;
	height: 90px;
	background: url("../images/plus_btn@2x.png");
	background-repeat:no-repeat;
	background-size:cover;
	cursor: pointer;
    transition: all 0.5s;
	animation-name: rotate_360;
	animation-delay: 3s;
	animation-duration: 4s;
	animation-iteration-count:infinite;
	animation-timing-function: ease-in-out;
	animation-direction:normal;
}

.plus_btn:hover {
    width: 85px;
	height: 85px;
	transition: all 0.5s;
	transform:scale(0.5,0.5);
}


.plus_left_btn {
	float: left;
    /*transform: rotate(270deg);
	transition-timing-function: ease-in-out; */
}

.plus_right_btn {
	float: right;
    /*transform: rotate(270deg);
	transition-timing-function: ease-in-out; */
}

@keyframes rotate_360 {
    0% {
		transform:rotate(0deg);
   }
    30% {
		transform:rotate(-359deg);
   }   
    30.01% {
		transform:rotate(0deg);
	}
    100% {
		transform:rotate(0deg);
   }

}




#section_01 .plus_left_btn {
 
}
#section_01 .plus_right_btn{

}

#section_02 .plus_left_btn {
	margin-left: 10vw;
}

#section_03 .plus_left_btn {
    margin-left:15vw;
}

#section_03 .plus_right_btn {
    margin-right:15vw;
}

#section_01 {
	background: ransparent 50% 0px no-repeat fixed;
	overflow: hidden;
	height: 960px;
}

#section_01 .title_text {
	position: absolute;
}
#section_01 .title_text .line_02 {
}
#section_01 .title_text .line_03 {
}
#section_01 .title_text, #section_03 .title_text {
font-family: 'Cinzel', serif;
    min-width: 780px;
    max-width: 1920px;
    top: 33%;
    z-index: 0;
    left: 0;
    right: 0;
    font-size: 1170%;
    letter-spacing: -0.07em;
    line-height: 90%;
    text-align: center;
}

#section_01 .title_text .PC_br {
   display:none;	
}

#section_01 .sub_text {
    top: 600px !important;
    right: 25%;
    position: absolute;
    margin-left: -50px !important;
	animation-name: ani_text;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
	opacity:0;
    animation-duration: 1s;
    animation-delay: 1.0s;
}


#section_01 .sub_text, #section_02 .sub_text, #section_03 .sub_text {
    max-width: 1000px;
    font-size: 0.85rem;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    color: #131313;
    letter-spacing: 0.03em;
    text-align: left;
    line-height: 1.2rem;
    margin: 0px 0px 0px 440px;
}

#section_01 .sub_text pre, #section_02 .sub_text pre, #section_03 .sub_text pre{
	font-family:'Roboto', sans-serif;
}

#section_01 .sub_text pre {
    margin-top: 0px;
}



#section_03 .sub_text pre {
	padding-bottom:50px;
}




#section_02 .sub_text {
	position: absolute;
	margin-top: 640px;
    margin-left: 470px;
}

#section_03 .sub_text {
	text-align: center;
	margin: 0px auto;
	margin-top:50px;
}

.title_text .gray {
	color: #c1c1c1;
}
.title_text .Darkgray {
	color: #676767;
}
.title_text .Black {
	color: #333;
}

.title_text .ani_text01, .title_text .ani_text02, .title_text .ani_text03, .title_text .ani_text04 {
    animation-name: ani_text;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
	opacity:0;
    position:relative;
}

.title_text .ani_text01 {
    animation-duration: 1s;
    animation-delay: 0s;
}

.title_text .ani_text02 {
    animation-duration: 1s;
    animation-delay: 0.3s;
}

.title_text .ani_text03 {
    animation-duration: 1s;
    animation-delay: 0.6s;
}

.title_text .ani_text04 {
    animation-duration: 1s;
    animation-delay: 0.9s;
}



@keyframes ani_text {
    0% {
   top:50px;
   opacity:0;
   }
    100% {
   top:0px;
   opacity:1;
   }
}


.title_text .gray strong, #section_01 .title_text .Darkgray strong {
	font-size: 120%;
}
#section_02 {
	height: 1300px;
	background: ransparent 50% 0px no-repeat fixed;
	position: relative;
}

#section_02 .title {
	position: absolute;
	left: 350px;
	top: 530px;
	width: 1235px;
	height: 155px;
	z-index: 100;
}
#section_02 .artist {
	transform: scale(1);
	transition: all 0.1s;
	opacity: 0.6;
	z-index: 101;
}

#section_02 .artist img {
	width:100%;
}

#section_02 .artist_name_highlight {
    font-family: 'Cinzel', serif;
    font-size: 10vw;
    letter-spacing: -0.06em;
    width:100%;
	min-width:600px;
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    right: 50%;
    z-index: -10;
    top: 0;
    color: #e7e7e7;
}

.artist_name_highlight::before {
	content:'';
	opacity:0;
}



#section_03 {
	/*background: url(../images/03_bg.png) no-repeat;*/
	overflow: hidden;
	height: 600px;
	position: relative;
	margin-bottom:100px;
}

#section_04 {
    overflow: hidden;
    background: #fff;
    height: 1300px;
    width: auto;
	position:relative;
}

footer {
	z-index: 100;
	left: 0;
	right: 0;
	background: #fff;
	font-family: 'roboto', sans-serif;
	padding-bottom: 150px;
	text-align: center;
	position:absolute;
}

footer .logo {
	width: 100%;
	margin-bottom: 10px;
	border-bottom: 1px solid #999;
	padding-bottom: 40px;
}
footer .logo img {
	width: 160px;
	margin: 0px auto;
}

footer ul {
	display: inline-block;
	padding-top: 2vw;
}


footer ul li {
	float: left;
	margin-right:1.8vw;
}

footer p {
}
/*?�중 ?�합 ??��*/
.main_box2 {
    position: relative;
    z-index: 500;
    max-width: 900px;
    text-align: center;
    margin: 0px auto;
}

.photo_list_layout {
	max-width: 1150px;
	margin: 0 auto;
}

.main_box2 h2 {
    text-align: right;
    font-size: 20px;
    max-width: 860px;
    font-weight: 600;
    font-family: 'roboto' , sans-serif;
    color:#CCC;
}


.video_list2 li {
    float: left;
    width: 30%;
    margin: 15px 10px 50px 10px;
}

.video_list2 li a {
	display: block;
	position: relative;
	width: 100%;
}

.video_list2 li a .thumb {
    position: relative;
    height: 220px;
    cursor: url(../images/play.png) 25 25, auto;
    scroll-behavior: smooth;
}

.video_list2 li a .thumb img {
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    object-fit: none;
    margin: auto;
	border-radius:12px;
}

.video_list2 li .txt {
    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    color: #fff;
    width: -webkit-fill-available;
    width: -moz-available;
    padding: 10px 10px 45px 10px;
    margin-top: -35px;
    height: 25px;
    font-family: 'roboto', sans-serif;
    letter-spacing: 0.05em;
    line-height: 1.5em;
    text-align: left;
    font-size: 0.7rem;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.company_kor {
}

.company_eng {
	color:#999;
	margin-top:50px;
}


/*�?고정*/
@media only screen and (max-width :1550px) {
 #section_01 .title_text {
 font-size: 125px;
}



#section_01 .plus_btn_parent {
    margin-top: 390px;
    position: absolute;
}

#section_03 .plus_left_btn {
    margin-left: 1vw;
}

#section_03 .plus_right_btn {
    margin-right: 1vw;
}


}



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

.horn {
    margin-top:-54px;
}

#section_01 .plus_btn_parent {
	margin-top: -220px;
}

#section_01 .sub_text {
    max-width:inherit;
    position: inherit;
    margin: 0px auto;
    text-align: center;
    font-size: 12px;
    margin-top: 550px;
}

#section_01 .sub_text pre {
	width:100%;
    margin-left: 25px;
}


#section_02 .ravi, #section_02 .justhis {
    left: 5%;
}

#section_02 .nafla, #section_02 .xydo {
    right: 5%;
}

#section_02 .sub_text {
    margin: 0px auto;
    position: relative;
    text-align: center;
	top:50px;
}

#section_02 .plus_left_btn {
    margin: 0px auto;
    left: 0;
    right: 0;
    float: inherit;
}

#section_02 .plus_btn_parent {
    margin-top: 120px;
}

header .sns ul {
	margin-left:-15px;
}

#section_01 .title_text {
	top:18%;
}

#section_01 .title_text .PC_br {
   display:inherit;
}


footer ul {
    padding-left: 1.5vw;
}

nav ul li {
    padding: 0vw 1vw 0 1vw;
}


}


@media only screen and (max-width :1024px) {
#door {
    
}

#door + label {
    display: inherit;
    top: 24px;
    position:fixed;
    left: 2%;
}

header nav{
	display:none;
}

header .sns {
	display:none;
}
}


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

#door:checked + label {
    left: 4%;
	top:24px;
}


.horn img {
	width: 90%;
	min-width: inherit;
}




#section_01 .title_text, #section_03 .title_text {
 font-size: 14vw;
 min-width:inherit;
}




#section_01 .plus_btn_parent {
    margin-top: -35%;
}

#section_03 {
	height:800px;
}

#section_04 {
    height: -webkit-fill-available;
}

.plus_btn {
    width: 50px;
    height:50px;
}



.video_list2 li {
    width: 46%;
}

.main_box2 h2 {
    text-align: left;
    padding: 10px;
}

footer {
	padding:50px 0 0 0;
}

}


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

section {
	position:relative;
}

.video_list2 li {
    width: 95%;
}

header .logo {
    left: 0px;
}

#left .logo {
    position: absolute;
    bottom: 20%;
    margin: 0px auto;
    left: 0;
    right: 0;
    filter: invert(1);
    width: initial;
    text-align: center;
}

#left .logo img {
	width:30%;
}

.sub01_box1 img{
	width:100%; 

}

.horn img {
	min-width:130%;
}


footer {
	padding:0px 0 50px 0;
}

footer .logo {
    margin-bottom: 20px;
    padding: 40px 0px;
}

footer ul {
    padding: 10px 0px 0px 15px;
}

footer p {
    text-align: left;
    padding: 16px 0px 0px 16px;
}

#section_01, #section_02, #section_03, #section_04 {
	height:auto;
	margin:100px 0px;
}

#section_01 {
	min-height:480px;
}

#section_01 .title_text {
    top: 0;
}


#section_01 .sub_text {
    margin-top: 145%;
    width: 95%;
	display:none;
}

#section_01 .sub_text pre {
    margin-top: -240px;
    padding: 0px 0px 0px 40px;
    word-spacing: initial;
    overflow: auto;
    white-space: normal;
    text-align: left;
}

#section_01 .plus_btn_parent {
    margin-top: -35%;
}


#section_02  {
    min-height: 150px;
    position: relative;
}

#section_02 .artist {
    left: 0 !important;
    position: relative;
    top: 0px !important;
    margin: 30px 15px 30px 15px;
    opacity: 1;
    height: auto;
    width: 40%;
    float: left;
}

#section_02 .artist .name {
    font-size: 24px;
}

#section_02 .artist_name_highlight {
	display:none;
	visibility:hidden;
}

#section_02 .sub_text {
    margin: 0px 0px 0px 10px;
    position: absolute;
    bottom: 0;
    top: 50px;
}

#section_02 .sub_text pre {
    position: relative;
    text-align: left;
    padding: 0px 0px 0px 5px;
}


#section_03 .plus_btn_parent {
    margin-top: -25%;
}

#section_03 .plus_right_btn {
	display:none;
}

#section_03 .plus_left_btn {
    margin: 0px auto;
    left: 0;
    right: 0;
    margin-top: -40px;
    position: absolute;
}

.video_list2 li {
    width: 90%;
    float: initial;
    margin: 20px 0px 65px 20px;
}


.video_list2 li .txt {
    font-size: 0.8rem;
}


.plus_btn_parent {
    max-width: 576px;
    width: 98%;
}

.horn {
    margin-top: -150px;
}


.horn .left_btn, .horn .right_btn {
	visibility:hidden;
	display:none;
}



#section_01 .title_text, #section_03 .title_text {
    font-size: 18vw;
}

#section_01 .plus_left_btn {
    text-align: center;
    margin: 0px auto;
    left: 0;
    right: 0;
    position: absolute;
    top: 15px;
}

#section_01 .plus_right_btn {
	display:none;
}


.video_list2, .photo_list_layout {
	width:100%;
}



}



 @keyframes heartbeat {
 0% {
 transform: scale(1.0);
}
 50% {
 transform: scale(1.2);
}
 100% {
 transform: scale(1.0);
}
}