@charset "utf-8";

/* CSS Document */
/*------------------------------------
            $Banner
------------------------------------*/
.banner {
    background: black;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right center;
    position: relative;
    background-image: url(../images/main.jpg);
}

.banner > .row {
    height: 100%;
}

.banner-info {
    float: left;
    position: absolute;
    top: 43%;
    left: 29.5%;
    width: 800px;

    /*padding-right: 40%;*/
}

.banner .banner-title {
    position: absolute;
    left: 6%;
    top: 55%;
    width: 47vw;
    height: 50vw;
}

/*	.banner-info .title{
		    color: #282828;
			font-size:48px;
			font-family: 'Roboto', sans-serif;
			font-weight: 700;
			
		}*/

.banner .playbutton {
    position: absolute;
    right: 30%;
    top: 15%;
    width: 10vw;
    height: 20vw;
}

.banner .Bonus {
    position: absolute;
    right: 4.75%;
    top: 37%;
    width: 26vw;
    height: 26vw;
}

.banner-info .banner-button {
    font-size: calc( 20.4px + 0.5vw); /*24-16*/
    border: none;
    background-color: #636363;
    color: #fff;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 30px;
    padding-left: 30px;
    min-height: 64px;
}

.banner-info .banner-button:focus {
    outline: none;
}

.banner-info .banner-button:hover {
    background-color: #fff;
    color: #666666;
}

.banner-info .banner-button:hover .icon {
    fill: #666666;
}

.ct .banner-info .banner-button:hover {
    background-color: #cccccc;
}

.Price {
    font-size: calc( 22px + 1vw); /*70-30*/
    color: #fff;
    font-weight: bold;
    line-height: 0.8;
}

.listPrice {
    font-size: calc( 14.4px + 0.3vw);
    color: #C3C3C3;
    text-decoration: line-through;
}

.number {
    list-style-type: none;
    padding-left: 60px;
    font-weight: 500;
    line-height: 1.2;
    font-size: calc( 16px + 0.5vw); /*24-16*/
}

.number span {
    font-style: italic;
    font-size: calc( 32px + 0.5vw);
    font-weight: bold;
}

.banner .Bonus-Thumb {
    position: absolute;
    left: 78%;
    top: 68%;
    width: 20vw;

    /* height:35vw; */
}

@media (max-width: 768px) {
    .banner {
        background-image: none;
    }

    .banner .banner-title {
        position: absolute;
        left: 14%;
        top: 43%;
        width: 70vw;
        height: initial;
    }

    .banner .Bonus-Thumb {
        position: absolute;
        left: 76%;
        top: 10%;
        width: 20vw;
        height: 26vw;
    }

    .pack-section{
		padding-bottom: 50px;
	}
}

@media (max-width: 600px) {
	.pack-section .infoarea {
		left: 50% !important;
		right: auto !important;
		bottom: 5vw !important;
		transform: translateX(-50%);
	}
}

/*------------------------------------
            $PACK ITEM
------------------------------------*/
.Pack {
    padding: 20px;
}

.PackThumb :hover {
    fill: #282828;
}

.item {
    list-style-type: none;
    list-style-image: url(../images/check_2.png);
    background-repeat: no-repeat;
    padding-left: 60px;
    font-size: calc( 14.4px + 0.5vw); /*24-16*/
}

.item span {
    font-style: italic;
    font-size: calc( 16.4px + 0.5vw);
    font-weight: bold;
}

.item2 span {
    font-style: italic;
    font-size: calc( 16.4px + 0.5vw);
    font-weight: bold;
}

.PackPrice {
    position: absolute;
    right: 70px;
    bottom: 40px;
    z-index: 10;
}

.PackPrice .Price {
    font-size: calc( 22px + 2.5vw); /*70-30*/
    color: #282828;
    font-weight: bold;
}

.PackPrice .listPrice {
    font-size: calc( 14.4px + 0.5vw);
    text-decoration: line-through;
}

.btn-lg {
    background-color: #ff9f00;
    border: none;
    border-radius: 0;
    color: #fff;
    width: 98%;
    font-weight: 800;
}

.btn-red {
    background-color: #e70012;
    border: none;
    border-radius: 0;
    color: #fff;
    width: 98%;
    font-weight: 800;
}

/*------------------------------------
            $Bonus
------------------------------------*/
.bonus {
    background: lightgray;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right center;
    position: relative;
    height: 52vw;
    background-image: url(../images/Bonus_BG.jpg);
}

.bonus > .row {
    height: 100%;
}

.bonus-info {
    float: right;
    position: absolute;
    top: 23%;
    right: 27%;
    font-size: calc( 18px + 0.5vw); /*24-16*/
    /*padding-right: 40%;*/
}

/*	.banner-info .title{
		    color: #282828;
			font-size:48px;
			font-family: 'Roboto', sans-serif;
			font-weight: 700;
			
		}*/

.bonus-info .banner-button {
    font-size: calc( 14.4px + 0.5vw); /*24-16*/
    border: none;
    background-color: #636363;
    color: #fff;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 30px;
    padding-left: 30px;
    min-height: 64px;
}

.bonus-info .bonus-button:focus {
    outline: none;
}

.bonus-info .bonus-button:hover {
    background-color: #fff;
    color: #666666;
}

.bonus-info .bonus-button:hover .icon {
    fill: #666666;
}

.ct .bonus-info .bonus-button:hover {
    background-color: #cccccc;
}

.icon-info {
    float: left;
    position: absolute;
    bottom: 18%;
    left: 6.5%;
    font-size: calc( 18px + 0.5vw); /*24-16*/
    /*padding-right: 40%;*/
}

.Index {
    position: absolute;
    right: 11%;
    top: 23%;
    width: 14vw;
    height: 10vw;
}

.Index .Price {
    font-size: calc( 22px + 2.5vw); /*70-30*/
    color: #282828;
    font-weight: bold;
}

.Index .listPrice {
    font-size: calc( 14.4px + 0.5vw);
    text-decoration: line-through;
}

.Index2 {
    position: absolute;
    right: 13.5%;
    bottom: -5%;
    width: 14vw;
    height: 10vw;
}

.Index2 .Price {
    font-size: calc( 22px + 2.5vw); /*70-30*/
    color: #282828;
    font-weight: bold;
}

.Index2 .listPrice {
    font-size: calc( 14.4px + 0.5vw);
    text-decoration: line-through;
}

.Exclusive {
    background-color: #e8f6ff;
    text-align: center;
    position: absolute;
    left: 5%;
    top: 1%;
    width: 15vw;
    border: 1px solid #282828;
    font-size: calc( 18px + 0.275vw);
    padding: 10px;
}

.Bundle {
    background-color: #dcdcdc;
    padding-top: calc( 20px + 1vw );
    padding-bottom: calc( 30px + 1vw );
}