@import url(web_fonts/fonts.css);

* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    -webkit-font-smoothing: antialiased;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: hel45, sans-serif;
}

body *{
    position: relative;
    color: #36424a;
}

a{
    color: inherit;
    text-decoration: none
}

img{
    vertical-align: bottom;
}

h1,h2,h3,h4,h5,h6{
    font-family: hel75, sans-serif;
}

p{
    font-family: hel45, sans-serif;
    font-size: 14px;
}


ul li{
    margin-left: 17px;
    margin-bottom: 10px;
    font-size: 16px;
}

/* ---------------------------- */
/* Intro Wrapper start */
.intro-wrapper {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    text-align: center
}

.intro-wrapper h2, .intro-wrapper img {
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    opacity: 0;
    font-size: 56px;
}

.intro-wrapper h2 {
    top: 40%;
    font-size: 5vw;
    /*letter-spacing: 0.03em;*/
    line-height: 1em;
    padding: 0 15%;
    color: #e30613;
    transform: scale(1);
    font-family: hel75, sans-serif;
    text-align: left;
}
.intro-wrapper h2 span {

    font-size: 3.8vw;
    line-height: 1em;
    color: #636363;
    font-family: hel45, sans-serif;
}

.intro-wrapper img {
    width: 40%;
    height: auto;
    top: 0;
    bottom: 0;
    transform: scale(1);
}

/* Intro Wrapper end */
/* ---------------------------- */

/* ---------------------------- */
/* Button Element */

.btn_ele {
    display: inline-block;
    position: relative;
    font-family: hel75, sans-serif;
    font-size: 12px;
    padding: 10px 15px 7px;
    color: #fff;
    background-color: #1b1b1b;
    cursor: pointer;
    transition: all .3s ease-out;
    text-transform: uppercase;
    margin: 5px 5px 0 0;
}

.btn_ele:hover{
    background-color: #d52b1e;
    color: #ffffff;   
}

.btn_ele.skipIntro {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 9990;
}


/* Button Element End */
/* ---------------------------- */

/* ---------------------------- */
/* header screen start */

#header-main {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #282d39;
    height: 42px;
    z-index: 9
}

#header-main h2, #header-main .back {
    display: inline-block;
    line-height: 42px;
}

#header-main h2 {
    position: absolute;
    vertical-align: middle;
    color: #fff;
    font-size: 20px;
    height: 42px;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center
}

#header-main h2:first-letter{
    text-transform: uppercase;
}

#header-main .back {
    display: none;
    position: absolute;
    right: 72px;
    top: 0;
    cursor: pointer
}

#header-main .back img {
    vertical-align: -6px;
    width: 24px
}

.logo.header {
    position: relative;
    left: 8px;
    display: inline-block;
    top: 5px;
    cursor: pointer
}

.logo.header img {
    height: 30px
}

/* ------------------ */
/* Burger Icon Start */

#menu-toggle {
    position: absolute;
    display: inline-block;
    width: 42px;
    height: 42px;
    right: 10px;
    text-align: center;
    top: -2px;
    cursor: pointer
}

#menu-toggle span {
    display: block;
    background: rgba(255, 255, 255, .7);
    border-radius: 2px;
    transition: all .25s cubic-bezier(.44, .1, .41, .94)
}

#menu-toggle #hamburger {
    position: absolute;
    height: 36px;
    width: 36px
}

#menu-toggle #hamburger span {
    width: 100%;
    height: 3px;
    position: relative;
    top: 16%;
    left: 0;
    margin: 6px auto
}

#menu-toggle #hamburger span:nth-child(1) {
    transition-delay: .125s
}

#menu-toggle #hamburger span:nth-child(2) {
    transition-delay: .25s
}

#menu-toggle #hamburger span:nth-child(3) {
    transition-delay: .375s
}

#menu-toggle.open #hamburger span {
    width: 0
}

#menu-toggle.open #hamburger span:nth-child(1) {
    transition-delay: 0s
}

#menu-toggle.open #hamburger span:nth-child(2) {
    transition-delay: .125s
}

#menu-toggle.open #hamburger span:nth-child(3) {
    transition-delay: .25s
}

#menu-toggle #cross {
    position: absolute;
    height: 42px;
    width: 42px;
    transform: rotate(45deg)
}

#menu-toggle #cross span:nth-child(1) {
    height: 0;
    width: 4px;
    position: absolute;
    top: calc(20% - 0px);
    left: calc(50% - 2px);
    transition-delay: 0s
}

#menu-toggle #cross span:nth-child(2) {
    width: 0;
    height: 4px;
    position: absolute;
    left: calc(20% - 0px);
    top: calc(50% - 2px);
    transition-delay: .15s
}

#menu-toggle.open #cross span:nth-child(1) {
    height: 60%;
    transition-delay: .525s
}

#menu-toggle.open #cross span:nth-child(2) {
    width: 60%;
    transition-delay: .375s
}

/* Burger Icon End */
/* ---------------- */

.navigation-category {
    display: table;
    position: fixed;
    background-color: #fff;
    text-align: center;
    top: 42px;
    right: -80%;
    z-index: 998;
    transition: right .6s ease-in-out;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
}

.link-wrapper ul {
    display: inline-block;
    padding: 15px 30px 10px;
    text-align: left;
}

.link-wrapper ul li {
    display: table;
    margin: 10px 0;
    margin-left: 15px;
    text-align: left;
    list-style: none;
    color: #6d6e71;
    border-bottom: 1px solid transparent;
    cursor: pointer;
    font-family: hel75, sans-serif;
    font-size: 15px;
}

.link-wrapper ul li.main-link{
    display: table;
    margin: 15px 0 10px;
    text-align: left;
    list-style: none;
    color: #e30613;
    border-bottom: 1px solid transparent;
    cursor: pointer;
    font-family: hel75, sans-serif;
    font-size: 18px;
}

.link-wrapper ul li.main-link:first-child{
    margin: 10px 0 10px;
}

.link-wrapper ul li:hover {
    border-bottom: 1px solid
}

/* header screen start */
/* ---------------------------- */

/* ---------------------------- */
/* Home screen start */

.homescreen{
    display: none;
    width: 100%;
    height: 100%;

}


.scene1, .scene2{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.scene1{
    display: block;
}

.scene1 .bg, .scene2 .bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff url(../images/scene-1.jpg) no-repeat right center;
    background-size: cover;   
}

.scene2 .bg{
    background: #fff url(../images/scene-2.jpg) no-repeat right center;
    background-size: contain;
}

.section-head{
    display: none;
    position: relative;
    height: 100%;
    pointer-events: none;
}

.main-sect-icon{
    position: absolute;
    top: 10%;
    left: 50%;
    pointer-events:auto;
    cursor: pointer;
}
.main-sect-icon:nth-of-type(2){
    top: auto;
    bottom: 5%;
    left: 45%;
}
.main-sect-icon:nth-of-type(3){
    top: 45%;
    left: auto;
    right: 5%;
}

.main-sect-icon:hover img{
    transform: scale(1.1);
}

.main-sect-icon img{
    width: 148px;
    height: auto;
    transition: all 0.3s ease-out;
}
.main-sect-icon:nth-of-type(2) img{
    width: 208px;
}
.main-sect-icon:nth-of-type(3) img{
    width: 178px;
}

.main-sect-icon h6{
    font-size: 28px;
    color: #282d39;
    width: 200px;
    text-align: center;
    position: absolute;
    display: none;
}
.main-sect-icon:nth-of-type(1) h6{
    top: 20%;
    left: 100%;
}
.main-sect-icon:nth-of-type(2) h6{
    top: 10%;
    right: 100%;
}
.main-sect-icon:nth-of-type(3) h6{
    right: 100%;
    top: 30%;
}


.scene1-content, .scene2-content{
    position: absolute;
    top: 25%;
    left: 5%;
    width: 25%;
}

.scene1-content.block2{
    display: none;
}

.scene1-content h2{
    position: relative;
    margin: auto;
    text-align: center;
    font-size: 3vw;
    color: #e30613;
    text-align: left;
}

.scene1-content h3{
    color: #e30613;
    font-family: 'hel75',sans-serif
}


.scene1-content p, .scene2-content p{
    font-size: 20px;
    margin: 20px 0;
}


/* Home screen end */
/* ---------------------------- */

/* ---------------------------- */
/* feature wrapper start */

#feature-sec-wrapper {
    display: none;
    position: absolute;
    top: 42px;
    left: 0;
    height: calc(100% - 42px);
    width: 100%;
    background-color: #fff;
}

#feature-sec-wrapper section {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
}


#feature-sec-wrapper section.feat.more-choice{
    overflow: scroll;
}



/* ---------------------------- */
/* feature chart diagrm */
/* ---------------------------- */

.feat-chart-conatiner{
    display: inline-block;
    width: 60%;
    min-width: 655px;
    height: 100%;
    text-align: center;
    white-space: normal;
    vertical-align: top;
}
.va-sake{
    display: inline-block;
    vertical-align: middle;
    width: 1px;
    height: 100%;
    pointer-events: none;
    opacity: 0;
}
.chart-wrapper{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-left: -4px;
    width: 600px;
    height: 480px;

}

.bdr-wrapper{
    position: absolute;
    top: -4px;
    left: -4px;
    width: 100%;
    height: 100%;
    border: 4px dotted #e30613;
    pointer-events: none;
}



.bdr-ele-1:before{
    content:'';
    position: absolute;
    width: 70%;
    height: 1px;
    top: 0;
    right: -70%;
    border-bottom: 4px dotted #e30613;
}

.bdr-ele-1{
    position: absolute;
    top: 140px;
    left: 216px;
    width: 38px;
    height: 72px;
    border: 4px dotted #e30613;
    border-left: 0;
    border-top: 0;
}



.bdr-ele-2:before{
    content: '';
    position: absolute;
    width: 60%;
    height: 1px;
    top: 0;
    right: -60%;
    border-bottom: 4px dotted #e30613;
}

.bdr-ele-2{
    position: absolute;
    top: 180px;
    left: 219px;
    width: 65px;
    height: 70px;
    border: 4px dotted #e30613;
    border-left: 0;
    border-top: 0;
}

.bdr-ele-2:after{
    content: '';
    position: absolute;
    width: 1px;
    height: 120%;
    bottom: -120%;
    left: -4px;
    border-right: 4px dotted #e30613;
}

.bdr-ele-3{
    position: absolute;
    top: 237px;
    left: 160px;
    width: 1px;
    height: 100px;
    border-right: 4px dotted #e30613;
}

.bdr-ele-4{
    position: absolute;
    top: 284px;
    left: 251px;
    width: 25px;
    height: 50px;
    border-top: 4px dotted #e30613;
    border-left: 4px dotted #e30613;
}
.bdr-ele-5{
    position: absolute;
    top: 78px;
    right: 0;
    height: 1px;
    width: 10.5%;
    border-top: 4px dotted #e30613;
    border-left: 4px dotted #e30613;
}


.bdr-ele-6{
    position: absolute;
    bottom: -4px;
    left: 126px;
    height: 4px;
    width: 25%;
    background-color: rgba(227, 6, 19, 0.8);
}

.bdr-ele-7{
    position: absolute;
    bottom: -4px;
    left: 276px;
    height: 4px;
    width: 20%;
    background-color: #fff;
}

.bdr-ele-8{
    position: absolute;
    top: -4px;
    right: 94px;
    height: 4px;
    width: 12%;
    background-color: #fff;
}

.bdr-ele-9{
    position: absolute;
    top: -4px;
    left: 210px;
    height: 4px;
    width: 38%;
    background-color: rgb(227, 6, 19);
}

.bdr-ele-10{
    position: absolute;
    background-color: #fff;
    border-top: 4px dotted #e30613;
    top: 140px;
    right: -4px;
    width: 219px;
    height: 66px;
}

.bdr-ele-10:after{
    content: '';
    position: absolute;

    height: 0;
    width: 100px;
    right: 0px;
    bottom: -4px;
    border-bottom: 4px dotted rgba(227, 6, 19, 1);
}

.chart_button{
    display: inline-block;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
    pointer-events: all;
    z-index: 12;
}
.chart_button:hover{
    transform: scale(1.1);
}

.chart_button.ver1{
    position: relative;
    width: 106px;
    height: 106px;
    background-size: 106px;

}

.chart_button span{
    color: #e30613;
}

.chart_button.ver1 img{

    width: 100%;
}
.chart_button.ver1 div{
    position: absolute;
    display: block;
    font-family: hel75, sans-serif;
    font-size: 20px;
    color: #2f3a48;
    text-align: center;
    width: 180%;
    left: -40%;
    margin-top: 10px;
    top: 110px;
}

.chart_button.ver2{
    padding: 5px;
    border-radius: 6px;
    border: 3px solid #e30613;
    background-color: #fff;
}
.chart_button.ver2 span{
    font-family: hel75, sans-serif;
    font-size: 15px;
    text-align: center;
    line-height: 0.8em;
}

.chart_button.ver2.active,
.chart_button.ver3.active,
.chart_button.ver4.active,
.chart_button.ver5.active{
    background-color: #e30613;
}

.chart_button.ver2.active, .chart_button.ver2.active div, .chart_button.ver2.active span,
.chart_button.ver3.active, .chart_button.ver3.active div, .chart_button.ver3.active span,
.chart_button.ver4.active, .chart_button.ver4.active div, .chart_button.ver4.active span,
.chart_button.ver5.active, .chart_button.ver5.active div, .chart_button.ver5.active span{
    color: #fff;
}

.chart_button.ver3{
    padding: 7px 10px;
    border-radius: 6px;
    background-color: #e30613;
}
.chart_button.ver3, .chart_button.ver3 span{
    font-family: hel75, sans-serif;
    font-size: 15px;
    color: #fff;
    text-align: center;
}

.chart_button.ver4{
    width: 80px;
    height: 80px;
    transform: rotate(45deg) scale(1);
    font-family: hel75, sans-serif;
    font-size: 15px;
    border: 3px solid #e30613;
    background-color: #fff;
}

.chart_button.ver4 div{
    width: 100%;
    transform: rotate(-45deg);
    font-family: hel75, sans-serif;
    font-size: 15px;
    text-align: center;
    top: 20px;
    left: 0px;
    color: #e30613;
}
.chart_button.ver4:hover{
    transform: rotate(45deg) scale(1.1);
}


.chart_button.ver5{
    padding: 8px 4px;
    background-color: #fff;
    border-radius: 3px;
    border: 3px solid #e30613;
}
.chart_button.ver5 div{
    font-family: 'hel75', sans-serif;
    font-size: 10px;
    line-height: 10px;
    color: #e30613;
    text-align: center;
    max-width: 70px;
    white-space: normal;
}


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

.group_ele_wrapper{
    pointer-events: none;
    position: absolute;
}

#group1 .group-part-1, #group1 .group-part-2, #group1 .group-part-3,
#group2 .group-part-1, #group2 .group-part-2, #group2 .group-part-3,
#group3 .group-part-1, #group3 .group-part-2, #group3 .group-part-3{
    position: absolute;
}


#group1.deactive .group-part-1, #group1.deactive .group-part-2, #group1.deactive .group-part-3,
#group2.deactive .group-part-1, #group2.deactive .group-part-2, #group2.deactive .group-part-3,
#group3.deactive .group-part-1, #group3.deactive .group-part-2, #group3.deactive .group-part-3{
    opacity: 0.7;
    filter: saturate(0);
}

#group1.deactive .group-part-1 .chart_button, #group1.deactive .group-part-2 .chart_button, #group1.deactive .group-part-3 .chart_button,
#group2.deactive .group-part-1 .chart_button, #group2.deactive .group-part-2 .chart_button, #group2.deactive .group-part-3 .chart_button,
#group3.deactive .group-part-1 .chart_button, #group3.deactive .group-part-2 .chart_button, #group3.deactive .group-part-3 .chart_button{
    opacity: 1;
} 

#group1{
    top: -53px;
    left: 110px;
}

#group1 .group-part-1{
    top: 142px;
}

#group1 .group-part-1:before{
    content: "";
    position: absolute;
    width: 4px;
    left: 51px;
    height: 140px;
    background-color: #e30613;
    top: -40px;
}

#group1 .group-part-1:after{
    content: "";
    position: absolute;
    width: 22%;
    top: 23px;
    right: 100%;
    height: 4px;
    background-color: #e30613;
}


#group1 .group-head{
    background-image: url(../images/icon-operations.png) ;
}
#group1 .group-head.active{
    background-image: url(../images/icon-operations-active.png) ;
}
#group1 .group-head.inactive{
    background-image: url(../images/icon-operations-inactive.png) ;
}


#group2 .group-head{
    background-image: url(../images/icon-service.png);
}
#group2 .group-head.active{
    background-image: url(../images/icon-service-active.png);
}
#group2 .group-head.inactive{
    background-image: url(../images/icon-service-inactive.png);
}


#group3 .group-head{
    background-image: url(../images/icon-resources.png) ;
}
#group3 .group-head.active{
    background-image: url(../images/icon-resources-active.png) ;
}
#group3 .group-head.inactive{
    background-image: url(../images/icon-resources-inactive.png) ;
}

#group1 .group-head.chart_button.ver1 div{
    top: -40px

}
#group1 .group-part-1 .chart_button:nth-of-type(2){
    position: absolute;
    left: -76px;
    top: 0px;
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
}
#group1 .group-part-1 .chart_button:nth-of-type(3){
    margin-top: 46px;
    line-height: 16px;

}


#group1 .group-part-2{
    left: 304px;
    top: 14px;

} 

#group1 .group-part-2:before{
    content: '';
    position: absolute;
    background-color: #fff;
    border: 4px solid #e30613;
    border-right: 0px;
    border-top: 0px;
    height: 48px;
    width: 100px;
    top: 70px;
    left: -64px;
    z-index: 3;
}

#group1 .group-part-2:after{
    content: '';
    position: absolute;
    border: 4px solid #e30613;
    border-left: 0px;
    border-right: 0px;
    width: 250px;
    height: 31px;
    top: 35px;
    left: -219px;
}

#group1 .group-part-2 .chart_button:nth-of-type(2){
    margin-top: 25px;
}

#group2{
    left: 20px;
    bottom: 53px;
}
#group2 .group-head.chart_button.ver1{
    position: absolute;
}


#group2 .group-part-1::before{
    content: '';
    position: absolute;
    left: 41px;
    height: 70px;
    width: 4px;
    top: 102px;
    background-color: #e30613;
}

#group2 .group-part-1 {
    top: -170px;
    left: 10px;
}

#group2 .group-part-2{
    left: 270px;
    top: 12px;
}

#group2 .group-part-2::before{
    content: '';
    position: absolute;
    top: 41px;
    left: -170px;
    height: 4px;
    width: 170px;
    background-color: #e30613;
}

#group2 .group-part-3{
    white-space: nowrap;
    top: -75px;
    left: 80px;
}

#group2 .group-part-3:before{
    content: '';
    position: absolute;
    border: 3px solid #e30613;
    border-radius: 11px;
    top: -16px;
    left: 30px;
    width: 150px;
    height: 62px;
}

#group2 .group-part-3:after{
    content: '';
    position: absolute;
    background-color: #f00;
    top: -16px;
    left: 55%;
    width: 3px;
    height: 350%;   
}

#group2 .group-part-3 .chart_button:nth-of-type(1){
    width: auto;
    max-width: 64px;
}
#group2 .group-part-3 .chart_button:nth-of-type(2),#group2 .group-part-3 .chart_button:last-child{
    width: auto;
    max-width: 55px;
}

#group3{
    top: 165px;
    right: 32px;
}

#group3 .group-part-1{
    top: -60px;
    left: -167px;
}

#group3 .group-part-1:before{
    content: '';
    position: absolute;
    left: 36px;
    height: 40px;
    width: 4px;
    top: 90px;
    background-color: #e30613;
}

#group3 .group-part-1:after{
    content: '';
    position: absolute;
    left: 36px;
    height: 4px;
    width: 132px;
    top: 105px;
    background-color: #e30613;
}

#group3 .group-part-1 .chart_button.ver4{
    width: 70px;
    height: 70px;
}

#group3 .group-part-1 .chart_button.ver4:nth-of-type(1) div{
    left: 2px;
    top: 27px;
}

#group3 .group-part-1 .chart_button.ver4:nth-of-type(2) div{
    left: -1px;
    top: 16px;
}

#group3 .group-part-1 .chart_button:nth-of-type(2){
    display: block;
    top:66px;
}


#group3 .group-part-2{
    top: 187px;
    left: -115px;
} 

#group3 .group-part-2:before{
    content: '';
    position: absolute;
    border: 3px solid #e30613;
    border-radius: 11px;
    top: -13px;
    left: 20px;
    width: 70px;
    height: 60px;
}

#group3 .group-part-2:after{
    content: '';
    position: absolute;
    border: 3px solid #e30613;
    border-left: 0;
    border-bottom: 0;
    top: -68px;
    left: 39px;
    width: 16px;
    height: 55px;
}


#group3 .group-part-2 .chart_button:nth-of-type(1){
    min-width: 40px;
}

#group3 .group-part-2 .chart_button:nth-of-type(2){
    margin-left: 9px;
    min-width: 50px;
}

/* ---------------------------- */
/* feature More Range start */
/* ---------------------------- */


.feat-content-wrapper{
    display: inline-block;
    position: relative;
    width: 39%;
    margin-right: -5px;
    vertical-align: top;
    overflow: scroll;
    height: 100%;
    padding-right: 3%;
    padding-bottom: 3%;
    box-sizing: border-box;
    white-space: normal;
    vertical-align: top;

}

.feat-content-wrapper .feat-sect {
    display: none;
    margin-top: 60px;

}

.feat-content-wrapper .feat-sect h2{
    color: #e30613;
    font-size: 30px;
    margin: 5px 0;
}

.feat-content-wrapper .feat-sect h3{
    color: #e30613;
    font-size: 21px;
    margin: 5px 0;
}
.feat-content-wrapper .feat-sect h5{
    font-size: 20px;
    margin: 5px 0;
    font-family: 'hel45', sans-serif;
}
.feat-content-wrapper .feat-sect p{
    font-size: 16px;
    margin: 5px 0 15px;
    font-family: 'hel45', sans-serif;
}

.feat-content-wrapper .carousel {
    width: 100%;
}

.feat-content-wrapper .carousel img{
    width: 60%;
    margin: auto;
}

.feat-content-wrapper .feat-sect p a{
    border-bottom: 1px solid;

}

/* ---------------------------- */
/* feature More Range start */
/* ---------------------------- */

.range-wrapper{
    width: 100%;
    font-size: 0px;
}
.range{
    display: inline-block;
    width: 25%;
    padding-top: 7vh;
    text-align: center;
}

.range .range-txt{
    font-size: 20px;
    color: #6d6e71;
    margin-bottom: 10px;
}
.range .range-txt span{
    display: block;
    font-family: 'hel75', sans-serif;
    color: #ed1c24;
    cursor: pointer;
}
.range img{
    width: 96%;
    vertical-align: top;
}

.range-spec-wrapper{
    display: inline-block;
    left: 5vw;
    margin-top: 7vh;
}
.range-spec-wrapper .rang-spec-btn{
    display: inline-block;
    background-color: #36424a;
    font-family: 'hel75',sans-serif;
    font-size: 14px;
    padding: 10px 12px 6px;
    color: #fff;
    vertical-align: top;
    cursor: pointer;
    transition: all 0.5s ease-out;
}

.range-spec-wrapper .rang-spec-btn:hover{
    background-color: #ed1c24;
}

.range-spec-wrapper .rang-spec-info{
    display: inline-block;
    color: #36424a;
    font-size: 14px;
    margin-left: 10px;
    width: 50%;
    vertical-align: top;
}


.feat.more-range .popup{
    display: none;
    position: fixed;
    top: 0;left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    text-align: center;
    z-index: 99;
}

.popup-content-wrapper{
    display: inline-block;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    top: 12vh;
}
.popup-content-wrapper .content span{
    position: absolute;
    text-align: left;
}

.popup-content-wrapper .content img{
    height: 74vh;
}

/* feature More Range end */
/* ---------------------------- */

/* ---------------------------- */
/* feature data drop down start */

.feat.dropdwn .caption-wrapper {
    position: absolute;
    right: 50px;
    top: 50px;
    width: 310px;
    text-align: right;
}

.feat.dropdwn .caption-wrapper h4 {
    color: #ee1c24;
    font-size: 34px;
    line-height: 34px;
    margin-bottom: 10px
}

.feat.dropdwn .caption-wrapper p {
    color: #4C5664;
    font-size: 24px;
    font-size: 18px;
    line-height: 20px;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, .8)
}

.fdd-wrapper {
    position: relative;
    display: block;
    width: 480px;
    height: auto;
    color: #fff;
    margin: 20px 50px;

}

.fdd-wrapper:nth-child(2){
    margin-top: 10vh;
}

.fdd-wrapper .topbar {
    display: inline-block;
    position: relative;
    min-width: 260px;
    width: calc(100% - 74px);
    height: 32px;
    background-color: #37424b;
    margin-left: -8px;
    padding: 7px 10px;
    box-sizing: border-box;
    pointer-events: all;
    vertical-align: middle;
    cursor: pointer
}
.fdd-wrapper .topbar-icon{
    display: inline-block;
    position: relative;
    width: 54px;
    height: 54px;
    padding: 10px;
    border-radius: 50%;
    background-color: #37424b;
    vertical-align: middle;
}

.fdd-wrapper .topbar-icon img{
    width: 100%;
    height: auto;
}

.fdd-wrapper .topbar .dd-caption {
    font-size: 17px;
    color: #fff;
}

.fdd-wrapper .topbar .arrow.down {
    position: absolute;
    bottom: 8px;
    right: 10px;
    cursor: pointer
}

.fdd-wrapper .dd-table {
    display: none;
    position: relative;
    width: calc(100% - 74px);
    background-color: #fff;
    left: 70px;
    top: -21px;
}

.fdd-wrapper .dd-table .dd-row {
    display: table-row
}

.fdd-wrapper .dd-table .dd-row.dd-row-span .dd-col {
    padding: 0
}

.fdd-wrapper .dd-table .dd-row .dd-col {
    text-align: center;
    display: table-cell;
    min-width: 100px;
    color: #000;
    font-size: 13px;
    font-weight: 400;
    padding: 8px;
    font-family: hel45, arial, sans-serif;
    vertical-align: middle
}

.fdd-wrapper .dd-table .dd-row .dd-col span {
    display: block;
    font-size: 11px;
    width: 100%;
    padding: 8px;
    border-bottom: 2px solid #fff;
    box-sizing: border-box;
    font-family: hel45
}

/* feature data drop down end */
/* ---------------------------- */

.fdd-wrapper .dd-table .dd-row .dd-col span:last-child {
    border-bottom: 0 solid #fff
}

.fdd-wrapper .dd-table .dd-row:nth-child(2n - 1) .dd-col {
    background-color: #f1f1f3
}

.fdd-wrapper .dd-table .dd-col:nth-child(2) {
    border: 2px solid #fff;
    border-top: 0;
    border-bottom: 0
}

.fdd-wrapper .dd-table .dd-col:last-child {
    border-right: 0
}

.feat.mixmedia .visuals {
    display: inline-block;
    width: 56%;
    height: 100%;
    vertical-align: top;
    background-color: #dcdee1
}

.feat.mixmedia .visuals .preview {
    position: relative;
    display: -webkit-flex;
    display: flex;
    align-items:center;
    justify-content: center;
    width: 100%;
    height: calc(100% - 145px);
    text-align: center;
    cursor: pointer
}

.feat.mixmedia .visuals .preview .preview-wrapper{
    position: relative;
    /*height: 100%;
    width:100%;*/
}

.feat.mixmedia .visuals .preview img {
    width: auto;
    max-height: 100%;
    max-width: 100%;
    vertical-align: top
}

.img-caption{
    position: absolute;
    bottom: 5px;
    left: 5px;
    right: 5px;
    background-color: rgba(0,0,0,0.8);
    color: #fff;
    font-size: 0.9em;
    padding: 15px 20px 11px;
    font-family: hel75, sans-serif;
}


.feat.mixmedia .visuals .thumbnail-wrapper {
    white-space: nowrap;
    width: 100%;
    overflow: scroll;
    overflow-y: hidden;
    margin-top: 15px;
    text-align: center
}

.feat.mixmedia .visuals .thumbnail-wrapper .thumb {
    display: inline-block;
    position: relative;
    margin-right: 3px;
    cursor: pointer
}

.feat.mixmedia .visuals .thumbnail-wrapper .thumb:last-child {
    margin-right: 0
}

.feat.mixmedia .visuals .thumbnail-wrapper .thumb img {
    vertical-align: top
}

.feat.mixmedia .textual {
    display: inline-block;
    width: 44%;
    height: 100%;
    margin-left: -5px;
    padding: 33px;
    box-sizing: border-box;
    overflow: scroll;
}

.feat.mixmedia .textual .caption-wrapper {
    margin-bottom: 30px
}

.feat.mixmedia .textual .caption-wrapper img{
    width: 100%;
    margin-bottom: 10px;

}

.feat.mixmedia .textual .caption-wrapper h4 {
    color: #ee1c24;
    font-size: 34px;
    line-height: 34px;
    margin-bottom: 15px
}

.feat.mixmedia .textual .caption-wrapper p {
    font-size: 16px;
    line-height: 21px;
    color: #6d6e71
}



.feat.mixmedia .textual .feat-point-wrapper div {
    color: #ee1c24;
    font-size: 24px;
    margin-bottom: 15px
}

.feat.mixmedia .textual .caption-wrapper ul, .feat.mixmedia .textual .feat-point-wrapper ul {
    margin-left: 18px
}

.feat.mixmedia .textual .caption-wrapper ul li, .feat.mixmedia .textual .feat-point-wrapper ul li {
    list-style-position: outside;
    font-size: 15px;
    color: #6d6e71;
    margin: 8px 0 0 10px;
    padding: 3px 0;
    line-height: 0px;
}

.feat.mixmedia.more-options .textual .caption-wrapper ul li{
    margin-bottom: 18px;
    list-style: none;
}

.feat.mixmedia.more-options .textual .caption-wrapper ul {
    margin-left: 35px;
}
.feat.mixmedia.more-options .textual .caption-wrapper ul li:before{
    content: '';
    display: inline-block;
    height: 32px;
    width: 32px;
    margin-left: -45px;
    margin-right: 10px;
    vertical-align: middle;
    background-size: contain;
    background-repeat: no-repeat;

    /*position: absolute;*/
}
.feat.mixmedia.more-options .textual .caption-wrapper ul li:nth-child(1):before{
    background-image: url(../images/more-options/icon-Reverse-warning-min.png);
}
.feat.mixmedia.more-options .textual .caption-wrapper ul li:nth-child(2):before{
    background-image: url(../images/more-options/icon-Fire-min.png);
}
.feat.mixmedia.more-options .textual .caption-wrapper ul li:nth-child(3):before{
    background-image: url(../images/more-options/icon-Lock-min.png);
}
.feat.mixmedia.more-options .textual .caption-wrapper ul li:nth-child(4):before{
    background-image: url(../images/more-options/icon-Vision-red-min.png);
}
.feat.mixmedia.more-options .textual .caption-wrapper ul li:nth-child(5):before{
    background-image: url(../images/more-options/icon-Reverse-beeper-min.png);
}
.feat.mixmedia.more-options .textual .caption-wrapper ul li:nth-child(6):before{
    background-image: url(../images/more-options/icon-Tyre-pressure-min.png);
}
.feat.mixmedia.more-options .textual .caption-wrapper ul li:nth-child(7):before{
    background-image: url(../images/more-options/icon-Lighting-min.png);
}



.feat.mixmedia .popup {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    background-color: rgba(0, 0, 0, .8);
    z-index: 1000;
}

.feat.mixmedia .popup .wrapper {
    display: block;
    position: absolute;
    width: 96%;
    height: 86%;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    background-color: #fff
}

.popup .close {
    position: absolute;
    width: 36px;
    height: 36px;
    background-color: #D4D6D8;
    padding: 7px;
    box-sizing: border-box;
    z-index: 9;
    right: 10px;
    top: 10px;
    cursor: pointer;

}

.popup .close img {
    width: 22px;
    cursor: pointer;
    vertical-align: bottom
}

.popup .content-view {
    position: relative;
    display: block;
    width: 100%;
    height: calc(100% - 100px);
    overflow: hidden;
    border-bottom: 6px solid #fff
}

.popup .content-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.popup .content-wrapper .cont-360,
.popup .content-wrapper .cont-image,
.popup .content-wrapper .cont-video {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    text-align: center
}

.popup .content-wrapper .cont-360 {
    display: block;
    width: 100%;
    height: 100%
}

.popup .content-wrapper .cont-image img {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto
}

#can-360,
#can-360 canvas {
    position: relative
}

#can-360 {
    width: 100%;
    height: 100%
}

.popup .content-wrapper .cont-360 .dir-wrppare {
    position: absolute;
    height: 100%;
    width: 100%
}

.cont-360 .dir-wrppare .dir.up {
    position: absolute;
    top: 15px;
    left: calc(50% - 41px);
    cursor: pointer
}

.cont-360 .dir-wrppare .dir.bottom {
    position: absolute;
    bottom: 15px;
    left: calc(50% - 41px);
    cursor: pointer
}

.cont-360 .dir-wrppare .dir.left {
    position: absolute;
    top: calc(50% - 25px);
    left: 15px;
    cursor: pointer
}

.cont-360 .dir-wrppare .dir.right {
    position: absolute;
    top: calc(50% - 25px);
    right: 15px;
    cursor: pointer
}

.popup .content-thumb-wrapper {
    background-color: #212e3e;
    text-align: right;
    height: 90px;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden
}

.popup .content-thumb-wrapper .thumb {
    position: relative;
    display: inline-block;
    border-left: 9px solid #fff;
    vertical-align: middle;
    height: 100%;
    margin-right: -5px;
    cursor: pointer
}

.popup .content-thumb-wrapper .thumb img {
    vertical-align: top;
    height: 100%;
    width: auto
}


footer {
    background-color: rgba(255,255,255,0.8);
    position: fixed;
    right: 0;
}



.full-spec-btn{
    display: inline-block;
    background-color: #36424a;
    font-family: hel75,sans-serif;
    font-size: 14px;
    padding: 10px 12px 6px;
    margin: 20px 50px;
    color: #fff;
    vertical-align: top;
    cursor: pointer;
    transition: all 0.4s ease-out;
}

.full-spec-btn:hover {
    background-color: #d52b1e;
    color: #ffffff;
}



.pop-window{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    padding: 40px;
    box-sizing: border-box;
    z-index: 9999;
    overflow: hidden;
}

.pop-content-wrapper{
    position: relative;
    position: 100%;
    width: 100%;
    height: 100%;
    background-color: #fff;
    overflow: scroll;
}

.pop-content {
    position: relative;
    display: none;
    width: 100%;
    height: 100%;
}

.pop-content-wrapper .pop-close {
    position: absolute;
    width: 48px;
    height: 48px;
    background-color: #D4D6D8;
    padding: 10px;
    box-sizing: border-box;
    z-index: 9;
    right: 0px;
    top: 0px;
    cursor: pointer;

}

.pop-content-wrapper .pop-close img {
    width: 28px;
    cursor: pointer;
    vertical-align: bottom
}



/* --------------------------------- */
/* Terms & condition template start */
.tc-tempt {
    display: none;
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    padding: 70px 20px 50px;
    background-color: #fff;
    box-sizing: border-box;
    overflow: scroll
}

.tc-tempt h3 {
    font-size: 24px
}

.tc-tempt h4 {
    font-size: 18px
}

.tc-tempt h3, .tc-tempt h4 {
    color: #d52b1e;
    margin-top: 30px
}

.tc-tempt h3:nth-of-type(1){
    margin-top: 0px;
} 

.tc-tempt p {
    padding: 0;
    font-size: 14px;
    color: #282d39
}

/* Terms & condition template end */
/* --------------------------------- */


/* --------------------------------- */
/* footer Start */

footer {
    display: none;
    bottom: 0;
    text-align: right;
    z-index: 999;
}

footer ul li {
    display: inline-block;
    list-style: none;
    color: #282d39;
    font-size: 12px;
    margin: 5px 10px 10px;
    cursor: pointer;
}

/* footer end */
/* --------------------------------- */

.pos-abs-center {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto
}

img.full-width {
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto
}

.bold {
    font-family: hel75!important
}

.bg-cover {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat
}