/* 文档教程 */
/* .download_main{padding: 120px 0 340px;background: #fff; background-image: url(images/bg.jpg); background-repeat: no-repeat;background-position: top center;background-size: auto;} */
.download_main{padding: 40px 0 140px;background: #fff; background-image: url(images/bg2.jpg); background-repeat: no-repeat;background-position: top center;background-size: 100%;overflow: hidden;position: relative;z-index: 1;}

/* 选项卡 */
#download .choose {margin-top: 90px;display: flex;justify-content: center;position: relative;}
#download .choose::before {content: '';width: 100%;height: 1px;background: #e5e5e5;position: absolute;left: 0;bottom: 0;}
#download .choose .item {line-height: 60px;font-size: 16px;position: relative;margin-right: 70px;}
#download .choose .item::before {content: '';width: 100%;height: 3px;background: var(--main);position: absolute;left: 0;bottom: 0;opacity: 0;transition: all 0.3s linear;}
#download .choose .item:last-child {margin-right: 0;}
#download .choose .item.cur {color: var(--main);font-weight: 500;}
#download .choose .item.cur::before {opacity: 1;}
#download .app {margin-top: 50px;font-size: 16px;text-align: center;position: relative;}
/* #download .app .img {overflow: hidden;display: inline-block;margin: 0 auto 15px;width: 100px;height: 100%;} */
#download .app .img {overflow: hidden;display: inline-block;margin: 0 auto;height: 100%;}
#download .app .img .svg {height: 100px;} 
#download .app .bg-circle{pointer-events: none;  width: 90vmin; height: 90vmin; position: absolute; left: 50%; top: 50%;transform: translate(-50%,-50%);z-index: -1;}
#download .app .bg-circle div{pointer-events: none; width: 100%; height: 100%;  position: absolute; top: 0; left: 0; background-color: var(--main); border-radius: 50%; opacity: 0;}
#download .app .bg-circle div:first-child{animation: bgCircle 6s linear 0s infinite;}
#download .app .bg-circle div:nth-child(2){animation: bgCircle 6s linear 1.5s infinite;}
#download .app .bg-circle div:nth-child(3){animation: bgCircle 6s linear 3s infinite;}
#download .app .bg-circle div:nth-child(4){animation: bgCircle 6s linear 4.5s infinite;}
@keyframes bgCircle {
    0%{ transform: scale(0.1); opacity: 0.04;}
    90%{ transform: scale(1); opacity: 0.02;}
    100%{ transform: scale(1); opacity: 0;}
}

#download .info {text-align: center;margin-top: 35px;}
#download .info .title {font-size: 46px;font-weight: 600;}
#download .info .text {font-size: 24px;margin-top: 15px;color: #666666;}
#download .download {display: flex;justify-content: center;flex-wrap: wrap;}
#download .download .item {background: rgba(255, 255, 255, 0.6); width: 25%;padding: 20px;margin-top: 55px;text-align: center;margin-right: 4.166%;}
#download .download .item:last-child {margin-right: 0;}
#download .download .item .logo img {height: 50px;width: 50px;}  
#download .download .item .name {font-size: 18px;margin-top: 20px;}
#download .download .item .brief {margin-top: 20px;font-size: 16px;color: #999999;line-height: 1.6;min-height: 51px;}
#download .download .item .btn {margin: 25px auto 0;width: 150px;height: 45px;background: var(--main);color: #fff;font-size: 16px;display: flex;align-items: center;justify-content: center;}
#download .download .item .btn .icon {width: 20px;height: 18px;margin-right: 10px;}
#download .download .item .btn .icon .svg {font-size: 18px; color: #fff;fill: #fff;stroke: #ffff;}
#download .download .item .code {margin: 28px 0 30px;}
#download .download .item .code img {max-width: 115px;}
#download .row {width: 78.125%; display: flex;flex-wrap: wrap;justify-content: space-between;margin-top: 10px;align-items: flex-start;margin: 0 auto;} 
#download .row .item {width: 47.5%;text-align: center;padding-top: 125px;margin-top: 55px;}
#download .row .item:nth-child(2n) {transform: translateY(250px);}
#download .row .item:nth-child(-n+2) {margin-top: 0;}
#download .row .item .name {font-size: 30px;font-weight: 600;}
#download .row .item .brief {font-size: 18px;color: #666666;margin-top: 20px;}
#download .row .item .img {margin-top: 55px;}

/* 新闻分类 */
#download .phone {display: none;border-bottom: 1px solid #e5e5e5;}
#download .phone_choose {min-height: 60px; height: max-content;}
#download .phone_choose .main_subnav{position: static;  top: 0; left: 0; z-index: 10; width: 100%; height: max-content; background-color: #fff; transition: all 0.5s ease-in-out;}
#download .phone_choose .main_subnav.curfixed{position: fixed; border-color: #e5e5e5;}
#download .phone_choose .main_subnav .pg_name{margin-right: 30px; padding-right: 31px; position: relative;}
#download .phone_choose .main_subnav .pg_name::before{content: ""; display: block; width: 1px; height: 16px; background-color: #e3e3e3; position: absolute; top: 50%; right: 0; transform: translateY(-50%); z-index: 1;}
#download .phone_choose .main_subnav .pg_name span{display: block; font-size: 16px; line-height: 60px; color: #333; font-weight: 600;}
#download .phone_choose .main_subnav .pg_name .svg{width: 10px; height: 8px; fill: #333;}
#download .phone_choose .main_subnav .cate_list{}
#download .phone_choose .main_subnav .cate_list .item{margin-right: 25px; font-size: 16px; line-height: 60px; color: #666; position: relative;}
#download .phone_choose .main_subnav .cate_list .item:last-child{margin-right: 0;}
#download .phone_choose .main_subnav .cate_list .item::before{content: ""; display: block; width: 100%; height: 3px; background-color: transparent; position: absolute; bottom: -1px; left: 0; z-index: 1;}
#download .phone_choose .main_subnav .cate_list .item.active::before{background-color: var(--main);}

 /* 在浏览器打开  */
#download .cover {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.7);z-index: 999;text-align: right;display: none;}
#download .cover .bubble-tips {width: 228px;height: 52px;background: #fff;border-radius: 8px;position: absolute;right: 24px;top: 24px;display: -webkit-box;-webkit-box-pack: center;-webkit-box-align: center;}
#download .cover .bubble-tips:after {content: "";display: block;width: 0;height: 0;border-color: transparent transparent #fff;border-style: solid;border-width: 0 5px 5px;position: absolute;right: 10px;top: -5px;}
#download .cover .bubble-tips .icon-tips {margin-left: 10px;display: block;width: 24px;height: 24px;background-image: url(https://www.heythings-iot.com/heymelody-landing-page-h5/static/media/tips.a78041aa.svg);background-size: contain;}
#download .cover .bubble-tips  p {font-size: 12px;line-height: 16px;color: rgba(0,0,0,.55);-webkit-box-flex: 1;width: 1%;margin-right: 12px;margin-left: 8px;text-align: left;}

@media (min-width:800px) {
	#download .choose .item:hover {color: var(--main);}
	#download .choose .item:hover::before {opacity: 1;}
}
@media (max-width:1440px) {
	#download .download .item {width: 28%;}
}
@media (max-width:1200px) {
	#download .download .item {width: 30%;}
	#download .download .item {box-shadow: 2px 0px 10px rgba(204, 204, 204, 0.2);}
}
@media (max-width:1050px) {
	#download .download .item {width: 35%;}
	#download .phone_choose {min-height: 55px}
	#download .phone_choose .main_subnav{position: relative;}
	#download .phone_choose .main_subnav .pg_name{display: flex; align-items: center; justify-content: space-between; width: 100%; margin-right: 0; padding-right: 0;}
	
	#download .phone_choose .main_subnav .pg_name::before{display: none;}
	#download .phone_choose .main_subnav .pg_name .svg{font-size: 11px; display: block; width: auto; height:auto10px; transform: rotate(90deg); transition: all 0.5s ease-in-out; color: #333;}
	#download .phone_choose .main_subnav .pg_name.cur .svg{transform: rotate(-90deg);}
	#download .phone_choose .main_subnav .cate_list{display: none; position: absolute; top: calc(100% + 1px); left: 0; z-index: 1; width: 100%; border-bottom-left-radius: 0.16rem; border-bottom-right-radius: 0.16rem; background-color: #fff; box-shadow: 0px 10px 10px rgb(0 0 0 / 10%); }
	#download .phone_choose .main_subnav .cate_list .item{line-height: 54px;} 
	#download .phone_choose .main_subnav .cate_list .list{margin: 0 auto; width: 90%; flex-direction: column;}
	#download .phone_choose .main_subnav .cate_list .item::before{display: none;}
	#download .phone_choose .main_subnav .cate_list .list .item{margin: 0; padding-left: 2.5vw; width: 100%; border-bottom: 1px solid #e5e5e5; position: relative;}
	#download .phone_choose .main_subnav .cate_list .list .item:last-child{border: 0;}
	#download .phone_choose .main_subnav .cate_list .list .item .svg{font-size: 11px; position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: 1; color: var(--main); fill: var(--main); display: none;}
	#download .phone_choose .main_subnav .cate_list .list .item.active .svg{display: block; }
	#download {margin-top: 90px;}
	#download .choose {display: none;}
	#download .phone {display: block;}
}
@media (max-width:992px) {
	#download {margin-top: 66px;}
	#download .download .item .brief,
	#download .app {font-size: 0.12rem;}
	#download .info .title {font-size: 0.391rem;}
	#download .download .item .name,
	#download .info .text {font-size: 0.15rem;}
	#download .download .item .btn {font-size: 0.12rem;height: 0.35rem;}
	#download .download .item .btn .icon {width: 2vw;height: 2vw;}
	#download .download .item .btn .icon .svg{font-size: 1.7vw;}
	#download .download .item .code {margin-top: 5vw;}
	#download .download .item {width: 38%;}
	
	#download .row .item .name {font-size: 0.226rem;}
	#download .row .item .brief {font-size: 0.12rem;}
	
	#download .phone_choose .main_subnav .pg_name span{font-size: .13rem; line-height: 55px;}
	#download .phone_choose .main_subnav .cate_list .list .item{font-size: .13rem; }
	#download .phone_choose .select_one .slide .word .title {font-size: 0.135rem;}
	#download .phone_choose .select_two .slide {font-size: 0.12rem;}
}
@media (max-width:768px) {
	.download_main {padding: 40px 0 18vw;}
	#download .download .item .btn,
	#download .download .item .brief,
	#download .app {font-size: 0.16rem;}
	#download .info .title {font-size: 0.52rem;}
	#download .download .item .name,
	#download .info .text {font-size: 0.2rem;}
	#download .row .item {margin-top: 6vw;}
	#download .row .item .name {font-size: 0.26rem;}
	#download .row .item .brief {font-size: 0.18rem;}
	#download .row .item {padding-top: 13vw;}
	#download .row .item:nth-child(2n) {transform: translateY(17vw);}
	
	#download .phone_choose .main_subnav .pg_name span,
	#download .phone_choose .main_subnav .cate_list .list .item{font-size: .18rem;}
	#download .phone_choose .select_two .slide {font-size: 0.16rem;border-radius: 33px;}
	#download .phone_choose .select_one .slide .word .title {font-size: 0.18rem;}
	
}

@media (max-width: 576px) {
	#download .phone_choose .main_subnav .pg_name span,
	#download .phone_choose .main_subnav .cate_list .list .item{font-size: .26rem;}
	#download .phone_choose .main_subnav .cate_list .list .item{padding-left: 5.5vw;}
	#download .phone_choose .main_subnav .pg_name .svg,
	#download .phone_choose .main_subnav .cate_list .list .item .svg{width: auto; height: auto; font-size: 0.18rem; transform: scale(0.8);}
	#download .phone_choose .main_subnav .pg_name .svg{transform: rotate(90deg) scale(0.8);}
	#download .phone_choose .main_subnav .pg_name.cur .svg{transform: rotate(-90deg) scale(0.8)}
	#download .phone_choose .main_subnav .cate_list .list .item.active .svg{transform: translateY(-50%) scale(0.8);}
	#download .phone_choose .select_two .slide,
	#download .phone_choose .select_one .slide .word .title {font-size: 0.26rem;}
	
	#download .info .title {font-size: 0.46rem;}
	#download .info .text {font-size: 0.29rem;}
	
	#download .download .item {width: 100%;margin-right: 0;margin-top: 8vw;box-shadow:none;border-top:1px solid #f3f3f3;padding-top: 0.6rem;border-radius: 0;}
	#download .download .item .name {font-size: 0.36rem;}
	#download .download .item .brief {font-size: 0.26rem;margin-top: 3vw;}
	#download .download .item .btn {font-size: 0.26rem;height: 0.7rem;width: 35vw;margin: 3vw auto 0;}
	#download .download .item .btn .icon {margin-right: 3vw;width: 4vw;height: 4vw;transform: translateY(1px);}
	#download .download .item .btn .icon .svg{font-size: 3.5vw;}
	#download .download .item .code img {max-width: 2rem;}
	
	#download .row .item {width: 100%;margin-top: 0;}
	#download .row .item:nth-child(2n) {transform: translateY(0);}
	
	#download .row .item .name {font-size: 0.36rem;}
	#download .row .item .brief {font-size: 0.3rem;}
	
	#download .download .item .brief,
	#download .app {font-size: 0.26rem;}
	
	
	#download .app {margin-top: 0.5rem;}
	#download .app .img .svg {width: 19vw;height: auto;}
}