@charset "utf-8";
/* CSS Document */
body{ background-color: transparent; }
/*------------------------------------
            $Banner
------------------------------------*/
.banner{ 
	background: black; 
	background-repeat: no-repeat;
    background-size: cover;
    background-position: right center;
    position: relative;
	height: 36.4vw;
	background-image: url(../images/main.jpg);
	}

.banner > .row{ height: 100%; }

.banner .banner-title{
	position: absolute;
    right: 58%;
	top: 20%;
    width:34vw;
	height:34vw;
}

.banner .play-button{
	position: absolute;
    right: 71%;
	top: 60%;
    width:8vw;
	height:8vw;
}


/* ------ pack data (begin)------ */
.pack-data {
    color:#ffffff;
	position: absolute;
	right: calc(13vw - 80px);
	
    width:calc(130px + 12vw);
	background-color:#363636;
	opacity:0.8;
	z-index:10;
	padding:0px calc(5px + 1vw );

    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    justify-content: space-around;
    -webkit-flex- justify-content: space-around;
}


.pack-data > div {
    padding-bottom:calc(1.5vw);
}

.pack-data .info {
	border-bottom:1px dashed #969696; margin-bottom:15px; 
}

.pack-data .info .pack-name,
.pack-data .info .artist {
    line-height: 1.2;
    color:#e4e4e4;
}

.pack-data .price-area {
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    -webkit-flex- justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
}

.pack-data .saleprice {
	font-size: calc( 10px + 2vw); /*70-30*/
	line-height: 1.2;
	color: #ffffff;
	font-weight: 500;
    text-align: right;
}
	
.pack-data .price-area .listprice {
	font-size: calc( 10px + 0.5vw);
	text-decoration: line-through;
	color: #cccccc;
    text-align: right;
}
		
.pack-data .price-area .buy-button {
	font-size: calc(16px + 0.5vw); /*24-16*/
	line-height: none;
	border: none;
	background-color: #ff9f00;
	color: #fff;
	width:calc(90px + 5vw);
	text-align:center;
	padding:0.5vw;
}

.pack-data .buy-button:focus { outline: none; }
.pack-data .buy-button:hover { background-color: #fff; color: #666666; }

.pack-data a {
    text-decoration: none !important;
}

/* ------banner 1440 pack data (begin)------ */

.banner1440{
	position: relative;
	background-image: url(../images/main_1440.jpg);
	background-repeat: no-repeat;
    background-size: cover;
}

.banner1440 > .row{ height: 100%; }

.banner1440 .banner-title{
	position: absolute;
    right: 48%;
	top: 20%;
	width:43vw;
}
.banner1440 .play-button{
	position: absolute;
    right: 65%;
	top: 60%;
    width:10vw;
	height:10vw;
}

.pack-data1440 {
    color:#ffffff;
	background-color:#000000;
	opacity:0.8;
	z-index:10;
	padding:0px calc(20px + 1vw );
	
/*	padding:0px calc(5px + 1vw );

    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    justify-content: space-around;
    -webkit-flex- justify-content: space-around;*/
}


.pack-data1440 > div {
/*    padding-bottom:calc(1.5vw);*/
}

.pack-data1440 .info {
	/*border-bottom:1px dashed #969696;*/ margin-bottom:15px;
}

.pack-data1440 .info .pack-name,
.pack-data1440 .info .artist {
    line-height: 1.2;
    color:#e4e4e4;
}

.pack-data1440 .price-area {
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    -webkit-flex- justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
	margin-bottom:15px;
}

.pack-data1440 .saleprice {
	font-size: calc( 30px + 2vw); /*70-30*/
	line-height: 1.2;
	color: #ffffff;
	font-weight: 500;
    text-align: right;
}
	
.pack-data1440 .price-area .listprice {
	font-size: calc( 10px + 0.5vw);
	text-decoration: line-through;
	color: #cccccc;
    text-align: right;
}
		
.pack-data1440 .price-area .buy-button {
	font-size: calc(16px + 0.5vw); /*24-16*/
	line-height: none;
	border: none;
	background-color: #ff9f00;
	color: #fff;
	width:calc(150px + 5vw);
	text-align:center;
	padding:1vw;
}

.pack-data1440 .buy-button:focus { outline: none; }
.pack-data1440 .buy-button:hover { background-color: #fff; color: #666666; }

.pack-data1440 a {
    text-decoration: none !important;
}

/* ------ Bundle pack data------ */
.bundle-erea {
	position: relative;
	border: 1px solid #969696; 
	background-color: #ffffff; 
	padding:20px calc(10px + 1vw );
}
.bundle-lable{
	position: absolute;
	right: 0%;
    bottom: 0%;
	width:15vw;
    height:7.5vw;
}

.bundle-lable-top{
	position: absolute;
	left: 0%;
    top: 0%;
	width:11.5vw;
    height:7.5vw;
}



.pack-Bundle {
    /*padding:20px calc(10px + 1vw );*/
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    justify-content: space-around;
    -webkit-flex- justify-content: space-around;
}

.pack-Bundle > div {
    padding-bottom:calc(0.5vw);
}

.pack-Bundle .price-area {
/*    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    -webkit-flex- justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;*/
}

.pack-Bundle .saleprice {
	font-size: calc( 20px + 2vw); /*70-30*/
	line-height: 1.2;
	color: #282828;
	font-weight: 700;
    text-align: center;
}
	
.pack-Bundle .price-area .listprice {
	font-size: calc( 10px + 0.5vw);
	text-decoration: line-through;
	color: #969696;
    text-align: center;
}
		
.pack-Bundle .price-area .buy-button {
	font-size: calc(16px + 0.5vw); /*24-16*/
	line-height: none;
	border: none;
	background-color: #e1706e;
	color: #fff;
/*	width:calc(90px + 5vw);*/
	text-align:center;
	padding:0.5vw;
}

.pack-Bundle .buy-button:focus { outline: none; }
.pack-Bundle .buy-button:hover { background-color: #a83f3d; color: #ffffff; }

.pack-Bundle a {
    text-decoration: none !important;
}





		
@media screen and (max-width: 1440px) {
    .pack-data {
        right: 2vw;
    }
}
/* ------ pack data (end)------ */

.galleryErea{
	padding-top:calc( 10px + 1vw ); 
	padding-bottom:calc( 10px + 1vw );
	}	
		
.ct .banner-info .banner-button:hover{ background-color: #cccccc; }
		

/*-----Link Style-----*/
    .rl-style a{color:#C7C7C7; text-decoration: none;}
    .rl-style a:hover{color:#C7C7C7; text-decoration:underline;}
    .rl-style a:focus,
    .rl-style a:active,
    .rl-style a:active:focus{color:#DFDFDF; outline: none;}

		
/*------------------------------------
            $Feature ITEM
------------------------------------*/

.FeatureTitle{
	border:1px solid #cccccc; 
	padding:5px 15px; 
	line-height:1.5;
	text-transform:uppercase; 
	background-color:#210c0c; 
	width:300px;
	color: #fff; }
	
.DescriptionTitle{
	border:1px solid #cccccc; 
	padding:5px 15px; 
	line-height:1.5;
	text-transform:uppercase; 
	background-color:#fff; 
	width:300px;
	}
	
.FeatureText{
	padding:calc( 14px + 1vw ); 
	color:#FFFFFF;
	}
.FeatureText h3{
	    font-size: calc( 26.4px + 0.5vw ); /*36*/ 
        font-weight: 300; 
        line-height:1.2; 
        padding-top: 0;
        padding-bottom: calc( 16px + 1.25vw );
		text-transform:uppercase;}

.FeatureBack{
	background: black; 
	background-repeat: no-repeat;
    background-size: cover;
    height: 48vw;
	background-image: url(../images/feature_01.jpg);
}

.FeatureBack1440{
	background: black; 
    background-color:#210c0c;
}

.FeatureBack-02-1440{
	background: black; 
    background-color:#210c0c;
}

.FeatureBack1440_img{ 
	background: black; 
	background-repeat: no-repeat;
    background-size: contain;
   	height: 50vw;
	background-image: url(../images/feature_01_s.jpg);
	}

.FeatureBack2{
	background-color:#210c0c; 
	background-repeat: no-repeat;
    background-size: cover;
    height: 36vw;
	background-image: url(../images/feature_02.jpg);
}

.Feature02_1440{
	background-color:#210c0c; 
	background-repeat: no-repeat;
    background-size: cover;
    height: 80vw;
	background-image: url(../images/feature_02_s.jpg);
}

.FeatureBack3{
	background-color:#301c1c; 
	background-repeat: no-repeat;
    background-size: cover;
    height: 44vw;
	background-image: url(../images/feature_03.jpg);
	position:relative;
}

.Feature03_1440{
	background-color:#210c0c; 
	background-repeat: no-repeat;
    background-size: cover;
    height: 94vw;
	background-image: url(../images/feature_03_s.jpg);
}


.Bundle{
	background-color:#dcdcdc; 
	padding-top:calc( 20px + 1vw ); 
	padding-bottom:calc( 30px + 1vw );
	}
	
.BuyAlso{
	background-color:#464646; 
	padding-top:calc( 20px + 1vw ); 
	padding-bottom:calc(40px + 1vw );
	}
	

.link{ color:#d96363;}
	
	

	
/*------------------------------------
                $space
------------------------------------*/
    /*----- 120px -----*/
    .rl-row-120{
        padding-top: calc( 48px + 2.5vw ); 
        padding-bottom: calc( 48px + 2.5vw );         
    }

    .rl-row-top-120{ 
        padding-top: calc( 60px + 2.5vw ); 
        padding-bottom: 0; 
    }

    .rl-row-bottom-120{
        padding-top: 0; 
        padding-bottom: calc( 48px + 2.5vw );         
    }
	
	
	    .rl-row-top-60{ 
        padding-top: calc( 30px + 1.5vw ); 
        padding-bottom: 0; 
    }
.note{ color:#fff;}
	
.note a{ color:#d96363;}
.note a:hover{color:#fff;}
.note a:link{color:#d96363;}


@media screen and (min-width: 1200px) and (max-width: 1364px){
 .Feature01_img{
  display:none
 }
}

@media screen and (min-width: 1200px) and (max-width: 1364px){
 .Specicon_img{
 max-width: 50%;
 padding-:calc( 14px + 1.875vw );
 }
}

