.inn-wrap {
    /*width:1177px;
    margin:0 auto;*/ 
}

.inn-wrap .sub { 
    max-width:1177px; 
    margin:0 auto;
    padding: 70px 0; 
}
.inn-wrap .sub_wide { 
    max-width: 1295px; 
    margin:0 auto; 
    padding:80px 0;
}

.inn-wrap .sub > h3 {
    font-size: 4.2rem;
    margin-bottom: 30px;
    font-weight: 800;
}
 
.inn-wrap .sub > p, .inn-wrap .sub > p strong {
    font-size: 2rem;  
    line-height: 2.8rem;
}



.b1 {
    background-image: url("../images/bg/bg_wave1.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.b2 {
    background-image: url("../images/bg/bg_wave2.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}     

.md_bg1 {
    background-image: url("../images/bg/bg_md_1.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height:600px; 
} 
.md_bg2 {
    background-image: url("../images/bg/bg_md_2.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height:600px;
} 
.md_bg3 {
    background-image: url("../images/bg/bg_md_3.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height:600px;  
    margin-left:-1px;
} 



.sec1 { 
    background: url("../images/bg/bg_sec1.jpg") no-repeat center right;
    background-size: cover; 
    /* min-height: 100%; 
    min-height:1024px;
    top: 0;
    left: 0; */
}
.sec1 h3 {
    font-size: 5.6rem;
    font-weight: 800; 
    letter-spacing: -.35rem;
    color:#fff;
}
.sec1 .sub_wide_top {
    position: relative;
    max-width:1420px; 
    margin:0 auto 0;
    padding-bottom: 0;
    z-index: 11;
}
 
.search-box {
    background:#fff;
    border-radius: 50px;
    text-align:center;
    width: 396px;
    height: 54px;
    line-height:64px;
    max-width:400px;
    margin-top:30px;
    position: relative;
    z-index: 2;
}
.search-box .textArea {
    height:30px;
    line-height:28px;
    padding-right: 5px;

    display: inline-block;
    font-size: 1.65rem;
    animation: cursor 0.4s infinite;
}

@keyframes cursor{ 
     0%{border-right: 2px solid #fff} 
     50%{border-right: 2px solid rgb(63, 63, 63)} 
     100%{border-right: 2px solid #fff} 
   }
.search-box input[type="text"] {
    height: 100%;
    line-height: 100%;
    border:0;
    font-size: 1.65rem;
    color:#4c4c4e;
    text-align:center;
}
.search-box .btns {
    position: absolute;
    right: 1px;
    top: -7px;
}


.sec2 {  
   /* margin:0 0 -150px;
   padding: 100px 0 250px;*/
}
.sec2 .middle { 
    background: url("../images/main/arrow.png") no-repeat center top;
    min-height: 100%;
    min-height: 550px;
    margin-top: -1px;
    padding: 100px 0;
    /* margin-top:-60px; */
}
.sec2 .box-wrap {
    width:1232px;
    margin:0 auto;
    height:100%;
    height:550px;
    position: relative;  
}
.sec2 .box-wrap .box {
    padding: 7px 50px 10px 50px;
    position:absolute;
    font-weight: 400;
    line-height: 1.6rem;
    font-size: 1.2rem;
}
.sec2 .box-wrap .left {
    left: 97px;
    top:158px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 0; 
}
.sec2 .box-wrap .right1 {
    right:-50px;
    top: 15px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 30px;
}
.sec2 .box-wrap .right2 {
    right: 102px;
    top: 423px;
    border-top-left-radius: 0;
    border-top-right-radius: 30px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
}
 

.sec3 {
    position: relative;
    z-index:10; 
    /* padding: 150px 0 200px; */
} 

.sec4 {
    /* padding: 150px 0 240px; */
    position: relative;
    z-index: 9;
    /* margin-top: -250px;   */
}
.sec4 h3 {
    font-size: 4.3rem;
    font-weight: 900;
    text-align: left;
    letter-spacing: -.225rem;
    /* margin-top:120px; */
    color:#2f2f2f;
}

.sec5 { 
    position: relative;
    z-index:11;  
}
.sec5 .sub { 
   padding-top: 20px;  
}
.sec5 .svg-wave-top {
    top:-195px;
}

.sec3 .inn-wrap,
.sec5 .inn-wrap {
    width:100%;
    background-color: #ffca1e; 
    background-image: linear-gradient(to right, #ffca1e, #ffa301);  
}
.sec5 .col-md-4 {
    position: relative;
}
.sec5 .col-md-4 p {
    text-align:center;
    position: absolute;
    top: 40%;
    left:50%;
    transform: translateY(-40%);
    transform: translateX(-50%);
    -webkit-transform: translateY(-40%);
    -webkit-transform: translateX(-50%);
}

.sec6 {
    /* padding:130px 0 80px; */
    background: #222222;
} 
.sec6 h3 + p {
    color: #ffffff;
} 
.sec6 .tablet {
    background: url("../images/bg/bg_youtube.png") 0 0 no-repeat;
    width:969px;
    /* height:585px; */
    margin:0 auto 80px;
}
.sec6 .tablet .embed { 
    width:870px;
    height:465px;
    position: relative;
    top: 46px;
    left:36px;
    margin-bottom: 20px;
    padding: 26px 20px 23px 19px;
    background: transparent url(../images/main/tablet.png) no-repeat 0 0 / 100% 100%;
}


.gradient > h3 {
    background: -webkit-linear-gradient(#7d7d7d, #232323);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -.225rem; 
} 
.gradient p > span {
    display:inline-block;
    color:#f5c924;
    font-weight: 600;
    background-color: #5c5c5c;    
    padding:5px 8px 8px 8px;
    position: relative;
    top:-2px;
}

 
@-webkit-keyframes animateThis {
    0% {
      width: 0;
      height: 100px;
    }
    100% {
      width: 100%;
      height: 100px;
    }
  }


.test {
    background: tomato;
    width: 100px;
    height: 100px;
    -webkit-animation: animateThis 1s ease-in;
    -webkit-animation-fill-mode: forwards;
}