.nav_bg{width:100%;height:100%;position:fixed;top:0;left:0;z-index:8;background: #000;opacity: .7;display:none;}
/* recorder_nav */
.recorder_nav.active{position: fixed;width: 100%;top: 0;left: 0;}
.recorder_nav{position: relative;background: #fff;border-bottom:1px solid #ccc;}
.recorder_nav>div:nth-child(1){position: absolute;top: 0;left: 0;width: 100%;height: 4px;background:#4896e9;background: -webkit-linear-gradient(90deg, #4896e9, #74dedf);background: linear-gradient(90deg, #4896e9, #74dedf);}
.recorder_nav_box>span{font-size: 20px;color: #29acff;}
.recorder_nav_box>span>i{background: url(/images/index/menu-icon.png);width: 15px !important;height: 12px !important;display: inline-block;background-position-y: -132px;margin-left: 9px;display: none;}
.recorder_nav_box>ul{display: inline-block;margin-left: 47px;line-height: 68px;}
.recorder_nav_box>ul>li{display: inline-block;margin-right: 36px;}
.recorder_nav_box>ul>li a.overview{font-weight: bold;}
.recorder_nav_box>ul>li a,.recorder_nav_box>ul>li{font-size: 14px;color: #222;}
.recorder_nav_box>ul>li a:hover,.recorder_nav_box>ul>li:hover{color: #29acff;}
.recorder_nav_box>a{width: 112px;height: 31px;border-radius: 4px;font-size: 14px;color: #fff;text-align: center;line-height: 31px;float: right;margin-left: 10px;margin-top: 18px;}
.recorder_nav_box>a:hover{text-decoration: none;}
.recorder_nav_box>a.down{background: #29acff;}
.recorder_nav_box>a.down:hover{background: #4ebaff;}
.recorder_nav_box>a.buy{background: #ff523d;}
.recorder_nav_box>a.buy:hover{background: #ff7766;}
.recorder_nav_box .features_nav{position: relative;cursor: pointer;}
.recorder_nav_box .features_nav .features_nav_box.active{display: block;}
.recorder_nav_box .features_nav>i{background: url(/images/index/menu-icon.png);width: 15px !important;height: 12px !important;display: inline-block;background-position-y: -122px;margin-left: 4px;vertical-align: -1px;}
.recorder_nav_box .features_nav>i.active{background-position-y: -132px;}
.recorder_nav_box .features_nav_box{width:520px;box-sizing: border-box;padding:30px 50px;position: absolute;top: 77px;left: -30px;background: #fff;display: none;box-shadow:0 0 20px rgba(0,0,0,0.2);}
.features_nav_box>i{width: 100%;position: absolute;top: -9px;left: 0px;height: 9px;}
.features_nav_box>i>i{position: absolute;border: 10px solid transparent;border-bottom-color: #fff;top: -10px;left: 80px;}
.recorder_nav_box .features_nav_box ul{line-height: initial;}
.recorder_nav_box .features_nav_box ul li i{width: 26px;height: 26px;background: url(/images/webcam-recorder/menu-icon.png);vertical-align: -8px;margin-right: 18px;transition: all .3s linear;}
.recorder_nav_box .features_nav_box ul li:nth-child(1) i{background-position-y: -0px;}
.recorder_nav_box .features_nav_box ul li:nth-child(2) i{background-position-y: -26px;}
.recorder_nav_box .features_nav_box ul li:nth-child(3) i{background-position-y: -52px;}
.recorder_nav_box .features_nav_box ul li:nth-child(4) i{background-position-y: -78px;}
.recorder_nav_box .features_nav_box ul li:nth-child(5) i{background-position-y: -104px;}
.recorder_nav_box .features_nav_box ul li:nth-child(6) i{background-position-y: -130px;}
.recorder_nav_box .features_nav_box ul li{margin-bottom: 20px;}
.recorder_nav_box .features_nav_box ul li:hover a{color: #29acff;text-decoration: none;}
.recorder_nav_box .features_nav_box ul li:hover i{margin-right: 24px;}
.recorder_nav_box .features_nav_box ul li:last-child{margin-bottom: 0px;}
.recorder_nav_box .features_nav_box ul li a,.recorder_nav_box .features_nav_box ul li span{font-size: 16px;color: #444;}
/* 公共样式 */
.explore{padding-top: 90px;padding-bottom: 100px;background: #ffffff;}
.explore_box h2{text-align: center;margin-bottom: 12px;}
.explore_box>p{font-size: 18px;color: #666f7b;text-align: center;line-height: 30px;max-width: 1050px;width: 100%;margin: 35px auto 0;}
.explore_box ul li{max-width: 382px;width:100%;margin-top: 44px;text-align: center;padding-bottom: 12px;overflow: hidden;background: #fff;transition: all .39s linear;border-radius: 6px;box-shadow: 0 0 14px rgba(24, 58, 89, .08);}
.explore_box ul li:hover{box-shadow: 0 0 14px rgba(24, 58, 89, .16);-webkit-transform: translateY(-3px);transform: translateY(-3px);}
.explore_box ul li:hover span:last-child{opacity: 1;transform: translateY(-10px);}
.explore_box ul li a{display:block;}
.explore_box ul li a:hover{text-decoration: none;}
.explore_box ul li img{margin: 22px auto 10px;}
.explore_box ul li span.title{font-size: 20px;color: #4c5562;font-weight: bold;}
.explore_box ul li p{max-width: 300px;width: 100%;margin: auto;margin-top: 10px;margin-bottom: 15px;color: #666f7b;line-height:28px;}
.explore_box ul li span:last-child{font-size: 16px;color: #29acff;opacity: 0;transition: all .39s linear;transform: translateY(-0px);display: block;margin-top: 16px;}
.explore_box>div{max-width: 605px;width: 100%;margin: 40px auto 0px;}
.explore_box>div a{width: 276px;height: 60px;line-height: 60px;font-size: 24px;color: #fff;text-align: center;border-radius: 6px;margin-top: 20px;}
.explore_box>div a:hover{text-decoration: none;}
.explore_box>div a i{width: 24px;height: 24px;background: url(/images/screen-recorder/page-icons.png)}
.explore_box>div a.down{background: #29abff;}
.explore_box>div a.down:hover{background: #4ebaff;}
.explore_box>div a.down i{background-position-y: -342px;background-position-x: -4px;vertical-align: -3px;margin-left: 15px;}
.explore_box>div a.buy{background: #fe523c;}
.explore_box>div a.buy:hover{background: #ff7972;}
.explore_box>div a.buy i{background-position-y: -312px;background-position-x: -4px;vertical-align: -3px;margin-left: 15px;}
.knowledge h2{text-align: center;}
.knowledge{padding-bottom: 70px;padding-top: 90px;background: #f3f3f3;}
.knowledge_box{text-align:center;}
.knowledge_box>p{max-width: 1050px;width: 100%;font-size: 16px;line-height:30px;text-align: center;margin: 40px auto 10px;color: #4c5562;}
.knowledge_box>a{display: inline-block;text-align: center;color: #23a3ee;font-size: 16px;margin-top: 50px;}
.knowledge_box>ul li{max-width: 288px;width: 100%;border-radius: 6px;overflow: hidden;background: #fff;box-shadow: 0 0 20px rgba(24, 58, 89, .08);position: relative;margin-top: 20px;}
.knowledge_box>ul li div{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(41, 172, 255, .9) url(/images/screen-recorder/goto.png) no-repeat center center;display: none;}
.knowledge_box>ul li:hover div{display:block;}
.knowledge_box>ul li div img{width: 64px;}
.knowledge_box>ul li:hover a{text-decoration: none;}
.knowledge_box>ul li img{width: 100%;}
.knowledge_box>ul li p{color: #4c5562;text-align: center;max-width: 250px;width: 95%;margin:14px auto;}
#share-list{position:fixed;right:0;top:40%;overflow:hidden;}
#share-list li{width:40px;height:40px;transition:0.5s;float:right;clear: both;display:-webkit-box;display: -webkit-flex;display: flex;-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;color: #fff;}
#share-list li.fb{background:#385998;}
#share-list li.tw{background:#1da1f2;}
#share-list li.ln{background:#0077b5;}
#share-list li:hover{width:54px;cursor: pointer;}
@media screen and (max-width: 1180px){
    /* recorder_nav */
    .recorder_nav_box>a{display: none;}
    .recorder_nav{border-bottom: 1px solid #eeeeee;z-index: 9;}
    .recorder_nav_box{position: relative;height: 48px;}
    .recorder_nav_box>span{line-height: 48px;text-align: center;display: block;}
    .recorder_nav_box>span>i{display: inline-block;}
    .recorder_nav_box>ul{margin: 0;line-height: initial;position: absolute;width: 100%;background: #fff;top: 49px;left: 0;display: none;}
    .recorder_nav_box>ul>li{display: block;margin: 0;border-bottom: 1px solid #eeeeee;}
    .recorder_nav_box>ul>li>a,.recorder_nav_box>ul>li.features_nav{width: 100%;padding-left: 20px;display: block;display: block;font-size: 16px;line-height: 48px;box-sizing: border-box;}
    .recorder_nav_box .features_nav_box{display: none;position: initial;padding: 0px;padding-bottom: 20px;width: initial;}
    .recorder_nav_box .features_nav_box>i{display: none;}
    .explore_box ul{justify-content: space-around;}
    .explore{padding-top: 120px;}
    .recorder_nav_box .features_nav_box{box-shadow:none;}
}
@media screen and (max-width: 850px){
    .knowledge_box>ul{justify-content: space-around;}
    #share-list{display:none;}
}
@media screen and (max-width: 630px){
    .explore_box>div,.current_product_box>div{justify-content: center;}
}
@media screen and (max-width: 400px){
    .recorder_nav_box .features_nav_box ul li a,.recorder_nav_box .features_nav_box ul li span{font-size: 14px;}
}