.banner{background-color: #F9FBFE;padding: 80px 0 20px;}
.banner .container{max-width: 1112px;}
.banner .title{font-size: 40px;font-weight: 900;margin-bottom: 24px;}
.banner .lft{max-width: 680px;}

.list-num>li{padding-left: 30px;}
.list-num>li:before{background: rgba(55, 125, 255, 0.2);border-radius: 50%;width: 20px;height: 20px;line-height: 20px;text-align: center;content:counter(li);top: 2px;font-size: 12px;}
.list-num>li:not(:last-child){margin-bottom: 16px;}

.catalog-cont{padding: 24px 0 24px;}
.catalog-cont .container{max-width: 1112px;}
.catalog-cont .cont{margin: 0 -15px;}
.catalog-cont .sub{font-size: 20px;padding: 15px 20px;background-color: #F2F2F2;font-weight: 800;display: block;}
.catalog-cont .cell{border-radius: 4px;background: #FFFFFF;width: 340px;margin: 0 15px 30px;box-shadow: 0 0 0 1px #E7E7E7;}
.catalog-cont .cell li a{padding: 16px 20px;display: block;}
.catalog-cont .cell li:not(:last-child){border-bottom: 1px solid #E6E6E6;}

.irsform{padding: 24px 0;}
.irsform .container{max-width: 1112px;}
.irsform .lft{width: 212px;box-shadow: 0px 14px 24px rgba(9, 72, 117, 0.1);background-color: #fff;border-radius: 2px;border-top: 4px solid #377DFF;position: -webkit-sticky;position: sticky;top: 70px;}
.irsform .lft ul{padding-bottom: 16px;}
.irsform .lft ul a{display: block;padding: 5px 16px;text-transform: capitalize;}
.irsform .lft ul a:hover,.irsform .lft ul li.actived a{background-color: rgb(47, 103, 246,0.05);}
.irsform .rgt{column-count:3;width: calc(100% - 232px);}
.irsform .rgt .cell{break-inside: avoid;-webkit-column-break-inside: avoid;width: 100%;border-radius: 4px;background: #F9FBFE;margin-bottom: 24px;}
.irsform .rgt .cell:hover{box-shadow: 0px 14px 24px rgba(9, 72, 117, 0.1);background-color: #fff;}
.irsform .rgt .cell .sub{font-size: 20px;padding: 16px;display: block;font-weight: 800;border-top-left-radius: 4px;border-top-right-radius: 4px;}
.irsform .rgt .cell ul{padding:8px 0 16px;}
.irsform .rgt .cell ul li a{display: block;padding: 8px 16px;}
.irsform .rgt .cell ul li a:hover{background-color: rgb(47, 103, 246,0.05);}

.arc .container{max-width: 1112px;}
article h1,article h2{font-size: 32px;margin: 56px 0 24px;font-weight: 800;}
article h3,article h4{font-weight: 24px;margin: 48px 0 24px;font-weight: 800;}
article p,article ul,article ol,article figure,article picture{margin-bottom: 32px;}

.form-list{padding: 80px 0 24px;}
.bread-list{padding: 16px 0;}
.bread-list li{text-transform: capitalize;}
.bread-list li:last-child{opacity: 0.8;}
.bread-list .container{max-width: 1112px;}
.form-list .bread-list{padding:0 0 32px 0;}
.form-list .container{max-width: 1112px;}
.form-list .rgt{width: 212px;border-radius: 8px;border: 1px solid #EFF0F6;background: #fff;overflow: hidden;margin-top: 55px;}
.form-list .rgt .sub{padding: 8px 16px;font-weight: 700;font-size: 16px;}
.form-list .rgt ul{padding: 8px 0;border-top: 1px solid #EFF0F6;}
.form-list .rgt ul li:nth-child(5)~li:not(:last-child){display: none;}
.form-list .rgt ul li.block{display: block !important;}
.form-list .rgt a{padding: 8px 24px 8px 22px;display: block;border-left: 2px solid transparent;}
.form-list .rgt a:hover,.form-list .rgt li.actived a{border-left-color: #2F67F6;}
.form-list .rgt ul li.show-more{padding: 5px 0;border-top: 1px solid #EFF0F6;margin-top: 10px;}
.form-list .rgt ul li.show-more:hover{cursor: pointer;color: #2F67F6;}
.form-list .rgt ul li.show-more.actived svg{transform: rotate(180deg);}
.form-list .lft{width: calc(100% - 244px);margin-right: 32px;}
.form-list .lft .title{font-weight: 900;margin-bottom: 24px;line-height: 1.2;}
.form-list .lft .cont{margin: 0 -14px}
.form-list .lft .cell{width: 260px;margin: 0 14px 24px;}
.form-list .lft .cell .tp{position: relative;border-radius: 4px;overflow: hidden;margin-bottom: 16px;box-shadow: 0 0 0 1px #EFF0F6;padding-bottom: 130.769%;height: 0;width: 100%;background-color: #fff;}
.form-list .lft .cell .txt{position: absolute;left: 0;top: 0;background-color: rgba(0,0,0,0.7);color: #fff;padding: 24px 16px 32px;height: 100%;transform: translateY(-100%);transition: all ease-in-out 0.4s;opacity: 0;}
.form-list .lft .cell .tp.actived .txt,.form-list .lft .cell .tp:hover .txt{transform: translateY(0);opacity: 1;}
.form-list .lft .cell .tp.actived .txt{background-color: #fff;color: inherit;}
.form-list .lft .cell .tp img{position: absolute;left: 0;top: 0;}
.form-list .lft .cell .sub{font-weight: 800;margin-bottom: 16px;overflow: hidden;max-height: 68px;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;line-height: 1.2;word-break: break-word;}
.form-list .lft .cell .txt p{font-size: 12px;overflow: hidden;max-height: 154px;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8;word-break: break-word;}
.form-list .lft .cell .fill-btn{width: 160px;height: 48px;line-height: 48px;font-weight: 600;font-size: 18px;align-self: center;margin-top: auto;}
.form-list .turn-page{margin: 20px 0;}
.form-list .turn-page a{display: block;text-align: center;padding: 4px 10px;border-radius: 4px;}
.form-list .turn-page .pre a svg{margin-right: 5px;}
.form-list .turn-page .nex a svg{margin-left: 5px;}
.form-list .turn-page .disabled a{opacity: 0.68;pointer-events:none;cursor: not-allowed;}
.form-list .turn-page li.actived a{background-color: #555;color: #fff;}
.arc{padding: 60px 0 40px;}
.arc p,.arc ul{margin-bottom: 24px;}
.arc h2{margin-bottom: 24px;font-size: 24px;}

.form-detail-banner{padding: 64px 0 0;height: 100vh;overflow: hidden;position: relative;background-color: rgba(44,50,67,0.9);background-position: center center;background-repeat: no-repeat;background-size: cover;}
.form-detail-banner::after{content: '';background-color: rgba(44,50,67,0.9);width: 100%;height: 100%;position: absolute;left: 0;top: 0;}
.form-detail-banner .container{max-width: 1112px;z-index: 1;height: 100%;}
.form-detail-banner .title{font-size: 42px;color: #fff;font-weight: 900;line-height: 1.2;}
.form-detail-banner .get-btn{width: 210px;height: 56px;line-height: 56px;margin: 56px auto 0;font-size: 18px;}
.form-detail-banner .get-btn.disabled{pointer-events:none;opacity: 0.68;}
.form-detail-banner .download-tip{opacity: 0.8;padding-top: 20px;}


.band-group{padding: 52px 0 38px;}
.band-group .ico{margin: 0 16px 10px;color: #999;height: 42px;border-radius: 4px;padding: 0 10px;display: flex;align-items: center;}
.band-group .ico:hover{background: #fff;box-shadow:0px 10px 24px 0px rgba(43,43,88,0.13);}
.band-group .ico:hover svg.techadvisor{color: #CA0001;}
.band-group .ico:hover svg.macworld{color: #2499CD;}
.band-group .ico:hover svg.pocketlint{color: #000;}
.band-group .ico:hover svg.pocketlint .a{color: #E73223;}
.band-group .ico:hover svg.androidcentral{color: #3ECF8E;}
.band-group .ico:hover svg.ibt{color: #221F1F;}
.band-group .ico:hover svg.ibt .a{color: #7EC242;}
.band-group .ico:hover svg.techtimes{color: #0D233D;}
.band-group .ico:hover svg.ilounge{color: #FD4E18;}
.band-group .ico:hover svg.phandroid{color: #4CAE4F;}

.how-to{padding-bottom: 120px;}
.how-to .container{max-width: 1112px;}
.how-to .title{font-size: 36px;font-weight: 900;margin-bottom: 24px;line-height: 1.2;}
.how-to .rgt{max-width: 490px;margin-left: 4%;}
.how-to .rgt .btn{width: 186px;height: 48px;font-size: 18px;}
.how-to ul{margin: 25px 0 40px;}
.how-to .download-tip{opacity: 0.8;padding-top: 15px;}

.how-switch{padding-bottom: 100px;}
.how-switch .container{max-width: 1112px;}
.how-switch details{padding: 0 20px 20px;}
.how-switch details summary{box-shadow: 0px 8px 16px rgba(9, 72, 117, 0.1);border-radius: 8px;padding: 22px 2%;margin-bottom: 20px;background-color: #fff;border-left: 2px solid transparent;font-weight: 700;}
.how-switch details summary h2{font-size: 18px;}
.how-switch details[open] summary,.how-switch details summary:hover{color: #377DFF;}
.how-switch details .cont{padding: 0 2%;}
.how-switch details p,.how-switch details ul{margin-bottom: 24px;}

.best-tool{padding: 96px 0 88px;}
.best-tool .container{max-width: 1356px;}
.best-tool .title{font-size: 32px;margin:0 auto 64px;font-weight: 900;max-width: 960px;line-height: 1.4;}
.best-tool figure .cont{margin: 0 -16px;}
.best-tool figure{background: #fff;box-shadow: 0px 12px 30px rgba(43, 43, 88, 0.08);border-radius: 4px;width: 194px;height: 160px;margin: 0 16px;}

.form-mid{background:#377DFF url(images/form-mid-bg.svg) no-repeat center center /cover;padding: 80px 0 92px;margin-bottom: 96px;}
.form-mid .container{max-width: 1112px;}
.form-mid .title{font-size: 46px;color: #fff;font-weight: 900;margin-bottom: 40px;line-height: 1.2;}
.form-mid .btn{width: 168px;height: 48px;font-size: 18px;}
.form-mid .btn:hover{background-color: #194AC4;}
.form-mid .download-tip{opacity: 0.8;padding-top: 15px;}
.form-mid .download-tip:hover{opacity: 1;}
.form-mid .download-tip a:hover{color: #fff;}

.related-search{margin: 96px 0;}
.related-search .container{max-width: 1112px;}
.related-search .title{font-size: 32px;font-weight: 900;margin-bottom: 48px;}
.related-search ul li span{border-radius: 3px;margin: 8px;padding: 4px 16px;display: block;font-weight: 600;}

.editor-faq{padding: 96px 0;}
.editor-faq .container{max-width: 1112px;}
.editor-faq .title{font-size: 36px;font-weight: 800;margin-bottom: 40px;}
.editor-faq details{width: 48%;padding-top: 16px;padding-bottom: 16px;border-top: 1px solid #EDEDF2;box-shadow: 0 1px 0 0 #EDEDF2;}
.editor-faq details .txt{margin-top: 16px;}
.editor-faq details summary{position: relative;padding-left: 24px;font-weight: 700;font-size: 16px;}
.editor-faq details summary::after{content: '';width: 9px;height: 12px;background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 9 12" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0V12L9 6L0 0Z" fill="rgb(47, 103, 246)"/> </svg>') no-repeat center;position: absolute;left: 0;top: 6px;}
.editor-faq details[open] summary::after{transform: rotate(90deg);}

.related-forms{margin: 96px 0;}
.related-forms .container{max-width: 1112px;}
.related-forms .title{font-size: 36px;margin-bottom: 56px;font-weight: 800;line-height: 1.2;}
.related-forms .cell{padding: 24px 0;border-top: 1px solid #EDEDF2;box-shadow: 0 1px 0 0 #EDEDF2;width: 48%;}
.related-forms .sub{color: #377DFF;padding-bottom: 16px;font-weight: 700;font-size: 16px;display: block;}

.saying{position: relative;z-index: 0;margin: 120px 0 24px;}
.saying .title{font-size: 36px;font-weight: 900;padding-bottom: 48px;line-height: 1.2;}
.saying .container{max-width: 1112px;}
.saying .cont{background-color: #F0F6D3;border-right: 16px;box-shadow: 0px 12px 24px rgba(0, 63, 108, 0.04);padding: 42px 5% 46px;border-radius: 16px;}
.saying .cont .info{font-size: 18px;margin: 24px 0 40px;line-height: 1.8;}
.saying .cont .group img{width: 48px;height: 48px;margin-right: 8px;}
.saying .cont .group .office{font-size: 12px;color: #555;padding-top: 4px;}

.dialog-mask{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.dialog {
  position: relative;
  text-align: center;
  max-width: 680px;
  overflow: hidden;
  background: #DEF7F5;
  box-shadow: 0px 8px 32px rgba(0, 65, 113, 0.16);
  border-radius: 8px;
}

.dialog .close{
  position: absolute;
  top: 11px;
  right: 13px;
  cursor: pointer;
}
.dialog .close:hover{color: #377DFF;}

.dialog-content {
  padding: 36px 40px 56px
}

.dialog-content .tip {
  font-size: 14px;
  line-height: 24px;
  color: #50637A;
  margin: 16px auto 0
}

.dialog-content .title {
  font-weight: 800;
  font-size: 32px;
  line-height: 1.2;
  color: #3D4958
}

.dialog-content .title .t-day {
  color: #377DFF
}

.dialog-content .list-ok2 {
  margin: 16px auto 0;
  max-width: 420px;
  text-align: left
}

.dialog-content .list-ok2 li {
  padding-left: 28px;
  line-height: 24px;
  margin-bottom: 4px
}

.dialog-content .list-ok2 li::after {
  top: 1px;
  width: 24px;
  height: 24px
}

.dialog-content .btn {
  font-size: 16px;
  width: 311px;
  height: 56px;
  margin-top: 28px;
  background: #377DFF;
  border-radius: 3px
}

.dialog-content .btn:hover {
  background-color: #194AC4;
  color: #fff
}

.dialog-content .contact-link-container {
  font-size: 14px;
  line-height: 24px;
  color: #50637A;
  text-align: center;
  text-decoration-line: underline;
  margin-top: 20px
}

@media (max-width: 960px){
  .form-detail-banner .title,.form-mid .title,.banner .title{font-size: calc(18px + 1.8vw);}
  .how-to .title,.best-tool .title,.editor-faq .title,.related-forms .title,.saying .title{font-size: calc(18px + 1.2vw);}
  .how-to .rgt{margin-left: 0;margin-top: 20px;max-width: 100%;}
  .best-tool figure{margin: 15px 0;}
  .form-list .lft{margin-right: 0;margin-top: 30px;}
  .banner{padding-top: 100px;}
  .irsform .lft{margin-bottom: 20px;position: static;}
  .form-list .rgt{box-shadow: 0 4px 16px rgba(0,0,0,0.1);margin-top: 0;}
  .form-list .rgt .sub{background: url('data:image/svg+xml;utf8,<svg width="10" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 0.5L5 5L9.5 0.5" fill="none" stroke="rgb(73, 83, 88)"/></svg>') right+15px center no-repeat;}
  .form-list .rgt ul,.form-list .rgt ul li:not(:last-child){display: none;}
  .form-list .rgt ul.block{display: block;}
}
@media (max-width: 769px){
  .irsform .rgt{column-count: 2;}
  .dialog{max-height: 85%;overflow-y: scroll;}
  .dialog-mask {
    padding: 0 5px 0 5px;
  }
}

@media (max-width: 480px){
  .related-forms{margin: 50px 0;}
  .editor-faq,.form-mid,.best-tool,.band-group{padding: 40px 0;}
  .saying{margin: 40px 0 20px;}
  .saying .cont{padding: 40px 16px;}
  .saying .cont .info,.banner .tip{font-size: 16px;}
  .related-forms .title,.best-tool .title{margin-bottom: 30px;}
  .form-mid{margin-bottom: 50px;}
  .how-switch,.how-to{padding-bottom: 48px;}
  .how-switch details{padding: 0 0 20px;}
  .form-list .lft .title{font-size: calc(18px + 1vw);}
  .irsform .rgt{column-count: 1;}
  .dialog-mask {
    padding: 0 5px 0 5px;
  }

  .dialog .tip{
    width: 80%;
    margin-top: 10px;
  }

  .dialog .title{
    font-size: calc(18px + 1.4vw);
    line-height: 30px;
  }

  .dialog .btn{
    margin-top: 16px;
  }

  .dialog .contact-link-container{
    margin: 10px 0 10px 0;
  }
}
