html {font-size: 16px;}
body{font-family: 'Noto Sans', sans-serif;margin:0; }
.clear{clear: both; }

.text-grey{ color: #231F20 }
.text-lightgrey{ color: #4e4e4e }
.text-orange{ color: #FF4F00 }
.text-blue{ color: #00345F }
.text-lightgreen{ color: #2fb40e }
.text-green{color: #1b5a20;}


#sec-intro{  position: relative; width: 100%; overflow: hidden;}
#sec-intro .main-content{z-index: 2; top:0; left:0;}
#sec-intro .title{line-height: .9em;}
#sec-intro .subtitle{line-height: 1.1em; }
#sec-intro img.wrench{width: 100%;}
#sec-intro-knob-bg{
    position: absolute;
    bottom: -120px; right: -30px; width:30%; height: 350px; 
    max-width: 350px; 
    background: url("./assets/images/inno/knob.jpg") no-repeat 0 0 ;
    opacity: .5;
}


#sec-intro-tri-bg{
    position: absolute;
    bottom: 120px; left: -30px; width: 200px; height: 200px; 
    max-width: 350px; 
    z-index:0; 
    background: url("./assets/images/intro/tri.png") no-repeat 0 0 ;
    opacity: .5;
}

img.logo{max-width: calc(100vw - 2em);}

.title_color {max-width: 600px;}


#sec-intro .dummy-box{min-height: 800px;}
.flex_container{ position: relative; }
.flex_container > * { width: 49%; display: inline-block; }
.flex_container > div:nth-child(2){float: right;  }

.align-items-center{align-items: center;}
#sec-quick-adjust .adjust_pic{width: 100%;}
#sec-bluetooth{background: rgb(0,84,152);
background: linear-gradient(90deg, rgba(0,84,152,1) 0%, rgba(0,79,145,1) 64%, rgba(0,12,54,1) 100%);
width: 100%; 
/* height: 185px;  */
}
#sec-bluetooth .pic-left{top: 0;left: 0; height: 150px; z-index: 0;}
#sec-bluetooth .pic-right{top: 0;right: 0;  height: 150px; z-index: 0;}
#sec-bluetooth .wrench{ z-index: 1; left:20px; top: -50px;}

#sec-bluetooth .wrench .mobile{z-index: 2;}
#sec-bluetooth.pulse{z-index: 1;   }

#sec-stroke {
min-height: 500px;
background:
    linear-gradient(-90deg, rgba(0,0,0,.05) 1px, transparent 1px),
    linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px),
    linear-gradient(-90deg, rgba(0, 0, 0, .1) 1px, transparent 1px),
    linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
    linear-gradient(transparent 3px, white 3px, white 98px, transparent 98px),
    linear-gradient(-90deg, #aaa 1px, transparent 1px),
     linear-gradient(-90deg, transparent 3px, #ffffff 3px, #ffffff 98px, transparent 98px),
    linear-gradient(#aaa 1px, transparent 1px);
background-size:
    20px 20px,
    20px 20px,
    100px 80px,
    80px 100px,
    100px 100px,
   100px 100px,
   100px 80px;
}
#sec-stroke .wrench{width: 100%; }
.top{top:0;}
.right{right: 0;}
.bottom{bottom: 0;}
.box-shadow{	-webkit-box-shadow: 3px 6px 12px #787878;
-moz-box-shadow: 3px 6px 12px #787878;
box-shadow: 3px 6px 12px #787878;}
/* #sec-color{
    background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(241,241,241,1) 58%, rgba(244,244,244,1) 83%, rgba(224,223,223,1) 100%);
} */

#sec-color .kg-ani{top:-50px; opacity: .05;}
/* D3008C */

#sec-color .c-gradient{
    color: #D3008C;
    /* Fallback: Set a background color. */
    background-color: #D3008C;

    /* Create the gradient. */
    background-image: linear-gradient(45deg, #E92E00, #BC0025, #D3008C);

    /* Set the background size and repeat properties. */
    background-size: 100%;
    background-repeat: repeat;

    /* Use the text as a mask for the background. */
    /* This will show the gradient as a text color rather than element bg. */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
}

#sec-spec{
    overflow: hidden;
}

#sec-spec table{
    margin: auto;
padding-top: 15px;
}
#sec-spec table thead td{
    background-color: #405366;
    padding: 0.3em 0.6em;
}
#sec-spec table tbody td{
    background-color: #6c7d8e;
    padding: 0.3em 0.6em;
}

table thead td, table tbody td{
    border:1px solid #ffffff;
}


.taf-img {
width: 96px; 
}


#sec-footer {
border-top: 1px solid #2fb40e;
}

.pulse {
width: 360px;
height: 360px;
top: 360px;
left: -320px;
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(253, 253, 253, 0.3);
animation: pulse-kefe91md 1.8s infinite ease-in-out;
position: absolute;
z-index: 0;
opacity: .3;
}

.pulse:before,
.pulse:after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3);
animation: inherit;
animation-delay: -1s;
}

@keyframes pulse-kefe91md {
50% {
    opacity: .8;
    }
    100% {
        opacity: .3;
        box-shadow: 0 0 0 360px #0000;
    }
}


#sec-wrench-panel .cus-container{z-index: 2;}
#sec-wrench-panel .wrench, 
#sec-wrench-panel .wrench-btm{ width: 100%; max-width: 950px;   }

#sec-wrench-panel .wrench .pic, 
#sec-wrench-panel .wrench-btm .pic {width: 100%; max-width: 950px;}

#sec-wrench-panel .wrench .line, 
#sec-wrench-panel .wrench-btm .line{
background-color: #f8be15;
content: "";
position: absolute;
z-index: 3;
width: 2px;
}

#sec-wrench-panel .feature_point{
width: 100%;
}


#sec-wrench-panel .f-lever .line{top: -20px; height: 22px; right: 50%; transform: rotate(0deg);}

#sec-wrench-panel .f-cycle {top: -40px;}
#sec-wrench-panel .f-cycle .line{top: -15px; height: 220px; left: 160px; transform: rotate(-60deg);}

#sec-wrench-panel .f-btn{width: 40%; top:-100px; left: 37%;}
#sec-wrench-panel .f-btn .line{top: 20px; height: 240px; left: 150px; transform: rotate(-30deg);}

#sec-wrench-panel .f-knob{width: 40%; top:-40px; right: 0; }
#sec-wrench-panel .f-knob .line{top: 25px; height: 120px; right:120px; transform: rotate(30deg);}

#sec-wrench-panel .f-power .line{
height: 150px;  
left: 80px;
top: -130px;
transform: rotate(45deg);
}

#sec-wrench-panel .f-torque .line{
height: 225px;  
left: 100px;
top: -170px;
transform: rotate(-60deg);
}

#sec-wrench-panel .f-indicator{width: 40%; left: 28%; top:0px;}
#sec-wrench-panel .f-indicator .line{ 
    height: 225px;  
    left: 100px;
    top: -190px;
    transform: rotate(-45deg);
    }


.point-mark{
display: inline-block;
width: 1.2em; height: 1.2em; 
background-color: #FF4F00; color: white;
text-align: center;
position: relative;
}

.point-mark-triangle{
position: absolute;
top:0;
right: -.6em;
width: 0; 
height: 0; 
border-top: .6em solid transparent;
border-bottom: .6em solid transparent;
border-left: .6em solid #FF4F00;
}

.point-mark-text{
top: 0;
left: 2.5em;
}
.point-mark .num{
line-height: 1.2em;
}



#sec-color {
/* top: 0; width:100%; max-width: 1920px;  */
/* z-index:1;  */
/* background: url("./assets/images/color/wrench.jpg") no-repeat center 50px ;
background-size: 1920px auto; */
}

#sec-wrench-panel .pic .f_num, 
#sec-wrench-panel .sm-feature {
display: none;
}

#sec-wrench-panel .pic .f_num  {
width: 1.6rem;
height: 1.6rem;
border-radius: .8rem;
line-height: 1.25em;
background-color: #f8be15;
box-shadow: 0 0 0 0 rgba(255, 171, 4, 0.805);
animation: pulse-num 1.5s infinite linear;
position: absolute;
color: white;
z-index: 2;
}

#sec-wrench-panel .pic .f_num :before,
#sec-wrench-panel .pic .f_num :after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: 0 0 0 0 rgba(163, 109, 1, 0.805);
animation: inherit;
animation-delay: -1s;
}

#sec-wrench-panel .pic div:nth-child(2) {
top: 45%; 
left: 15%;
}

#sec-wrench-panel .pic div:nth-child(3) {
top: 21%; 
left:29%;
}

#sec-wrench-panel .pic div:nth-child(4) {
top: 28%; 
right: 30%;
}

#sec-wrench-panel .pic div:nth-child(5) {
top: 34%; 
right: 10%;
}

#sec-wrench-panel .pic div:nth-child(6) {
top: 60%; 
right: 47%;
}
#sec-wrench-panel .pic div:nth-child(7) {
    top: 60%; 
    right: 70%;
}

#sec-wrench-panel .pic-btm div:nth-child(2) {
    top: 10%;
    left: 80%;
}

#sec-wrench-panel .sm-feature ul{
list-style: none;
}

#sec-quick-adjust {
overflow: hidden;
}

#sec-quick-adjust .left-bg {
top: 0; left: 0; height: 732px; width: 913px;
z-index: 0;
background: url("./assets/images/inno/top-left.jpg") no-repeat 0% 0% ;
}

#sec-quick-adjust .right-bg {
top: 0; right: 0; height: 732px; width: 100%;
z-index: 1;
background: url("./assets/images/inno/top-right.png") no-repeat top right;
opacity: .7;
}

#sec-quick-adjust .title { padding-left: 40%;}

#sec-wrench-panel .feature-description > div::before{content: ""; width: .6em; border-bottom: 3px solid #E92E00; position: absolute; top: .6em; left: -.8em;}
.paragraph-import{position: relative;}
.paragraph-import::before {
    content: "";
    width: 0.6em;
    position: absolute;
    top: 0.6em;
    left: -0.8em;
    border-bottom: 3px solid rgb(233, 46, 0);
}

.rosh_pic{margin-top:-80px;}

@keyframes pulse-num {
100% {
    box-shadow: 0 0 0 .8rem #0000;
}
}


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

    #sec-color .title_color{
        max-width: 70%;
    }

    #sec-quick-adjust .right-bg {
        background: url("./assets/images/inno/top-right.png") no-repeat 300px 0px;
        background-size: 1200px auto;
    }

    #sec-quick-adjust .left-bg {
        background: url("./assets/images/inno/top-left.jpg") no-repeat 0% 0% ;
        background-size: 600px auto;
    }

}



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

#sec-bluetooth .wrench{left:0;}


#sec-wrench-panel .f-cycle {width: 40%; }
#sec-quick-adjust .flex_container > *{width: 100%; display: block; position: relative;}
#sec-quick-adjust .left-bg {
    opacity: .15;
}
#sec-quick-adjust .right-bg {
    background: url(./assets/images/inno/top-right.png) no-repeat 100px 0px;
    background-size: 1200px auto;
}

#sec-quick-adjust .title {
    padding-left: 0%;
}

}

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

.flex_container > *{width: 100%; display: block; position: relative;}
#sec-wrench-panel .f-power{width: 50%;}
#sec-wrench-panel .f-torque{width: 50%; position: absolute; right: 0; top: 8px;}

#sec-wrench-panel .wrench-btm .bottom > div {width: 50%;}

.point-sec{width: 100%; }

/* #sec-color {
    background: url("./assets/images/color/wrench.jpg") no-repeat 20% 50px ;
    background-size: 1440px auto;
} */

/* #sec-stroke .step-note img.box-shadow {
    max-width: 270px;
} */

#sec-color .title_color{
    max-width: 80%;
}

#sec-wrench-panel .f-cycle {
    width: 35%;
}

}

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

.flex_column-sm {flex-direction: column;}

#sec-bluetooth .wrench {
    display: none;
}

#sec-bluetooth img.mobile {
    width: 140px;
}

#sec-bluetooth .wrench .pulse {
    left: 0;
}

/* #sec-color {
    background: url("./assets/images/color/wrench.jpg") no-repeat 10% 50px ;
    background-size: 1440px auto;
} */

#sec-wrench-panel .wrench .line{
    width: 1px;
}

#sec-bluetooth .pic-left{display: none;}
#sec-bluetooth .title{text-shadow: 1px 1px 4px rgb(28, 28, 28);}
#sec-intro-knob-bg{
    bottom: -30px; right: -30px; width: 200px; height: 200px; 
}
.quick-title{margin-top: 2rem; margin-bottom: 1.2rem;}
}

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


/* #sec-color .title_color{
    max-width: 100%;
} */

.text-lg {
    font-size: 1.125rem
}

.text-xl {
    font-size: 1.125rem
}

/* .sec-taf img{width: 100px;} */
/* #sec-stroke .step-note img.box-shadow{
    width: 50%;
} */

#sec-wrench-panel .top > div > div:first-child, 
#sec-wrench-panel .bottom > div > div:first-child, 
#sec-wrench-panel .line{display: none;}

#sec-wrench-panel .wrench{ margin-top: 3.2rem; }
#sec-wrench-panel .pic .f_num, 
#sec-wrench-panel .sm-feature {display: inline-block;}
#sec-wrench-panel .sm-feature ul li{
    position: relative;  min-height: 4rem; padding-top: 1.2rem; overflow: hidden;
    border-top: 1px solid rgb(142, 142, 142);
}
#sec-wrench-panel .sm-feature ul li:last-child{
    height:1px;min-height: 1px;
}

#sec-wrench-panel .sm-feature ul i{ position: absolute; font-size: 3rem; bottom: -1rem; right: 0rem; opacity: .1;}
}

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

#sec-spec table thead{
    font-size: 9px; 
    font-weight: normal;
}

#sec-spec table tbody {
    font-size: 10px; 
    font-weight: normal;
}

#sec-spec table tfoot {margin-left: 1em; margin-right: 1em; }

#sec-spec table thead td, #sec-spec table tbody td{padding:0;}

.innovate-title {font-size: 2rem;}

#sec-wrench-panel .cus-container{margin-bottom: 0rem;}
#sec-wrench-panel .feature-title{margin-top:2.6rem;}
#sec-wrench-panel .wrench .text-lg{font-size: 1rem;}

.sec-taf p{font-size: 10px;}

#sec-bluetooth .description .title {
    line-height: 1.6rem;
}

.intro-feature .text-6xl {
    font-size: 3rem;
}

.intro-feature .text-2xl {
    font-size: 1.125rem;
}

/* #sec-quick-adjust .quick-title {
    font-size: 3.6rem;
} */

#sec-wrench-panel .feature-title {
    font-size: 2.25rem;
    margin-top: 1.2rem;
}

#sec-bluetooth .description .title{
    margin-top: .6rem;
}

}