/*article detail*/
main .arc-banner{padding:100px 0 30px;background:#007dd9 url("images/banner-bg.jpg");}
main .arc-banner .title{font-size: 36px;margin: 25px 0;}
main .arc-banner .date{font-size: 14px;}
main .arc-banner .tip{font-size: 18px;max-width: 760px;margin: 0 auto 20px;}
main .arc-banner a:hover{color: #FFF;text-decoration: underline;}
main .group-banner{margin: 30px 0;}
main .group-banner .cell{padding: 30px 40px;font-size: 0;}
main .group-banner .lft,main .group-banner .rgt{display: inline-block;vertical-align: top;}
main .group-banner .lft{width: 10%;}
main .group-banner .rgt {padding-left: 5%;width: 85%;}
main .group-banner .rgt .sub{font-size: 18px;font-weight: 800;margin-bottom: 5px;}
main .group-banner .rgt p{color: #999;margin-bottom: 10px;font-size: 16px;}
main .arc-cont{font-size: 0;margin-top: 30px;}
main .arc-cont .lft-arc{padding: 30px;background: #FFF;width: 80%;display: inline-block;vertical-align: top;font-size: 16px;line-height: 1.4;}
main .arc-cont .lft-arc .t-tip{padding: 20px;margin-bottom: 30px;}
main .arc-cont .lft-arc .top p{margin-bottom: 30px;}
main .arc-cont .lft-arc .note{padding: 20px;margin: 20px 0;}
main .arc-cont .lft-arc h2{font-size: 28px;margin-bottom: 30px;margin-top: 40px;padding-top: 40px;border-top: 1px dashed #ccc;line-height: 1.2em;}
main .arc-cont .lft-arc h3{font-size: 24px;margin: 30px 0 20px;line-height: 1.2em;}
main .arc-cont .lft-arc h4{font-size: 20px;margin: 30px 0 20px;line-height: 1.2em;}
main .arc-cont .lft-arc h5{font-size: 18px;margin: 20px 0 20px;line-height: 1.2em;}
main .arc-cont .lft-arc h6{font-size: 16px;margin: 20px 0 15px;line-height: 1.2em;}
main .arc-cont .lft-arc picture{margin: 30px 0;}
main .arc-cont .lft-arc ul{margin: 20px 0;}
main .arc-cont .lft-arc ul li{margin-bottom: 10px;}
main .arc-cont .lft-arc ul.lst{margin: 30px 0;}
main .arc-cont .lft-arc ul.lst li{padding-left: 20px;position: relative;display: block;}
main .arc-cont .lft-arc ul.lst li:after{content: '';width: 5px;height: 5px;border-radius: 50%;background: currentColor;position: absolute;left: 0;top:10px;}
main .arc-cont .lft-arc p{margin-bottom: 20px;}
main .arc-cont .lft-arc a{color: #007dd9;}
main .arc-cont .lft-arc a:hover{text-decoration: underline;}
main .arc-cont .lft-arc .download-group{margin: 30px 0;padding: 30px 0;border-top: 1px dashed #ccc;border-bottom: 1px dashed #ccc;}
main .arc-cont .lft-arc .download-group .sub{font-weight: 800;font-size: 18px;margin-bottom: 5px;}
main .arc-cont .lft-arc .download-group p{color: #999;margin-bottom: 10px;}
main .arc-cont .lft-arc .step-sub{background: #007dd9;color: #fff;display: inline-block;padding: 0 10px;border-radius: 20px;box-shadow: 0 0 0 2px rgba(0,125,217,0.2);font-weight: 200;margin-right: 10px;}
main .arc-cont .lft-arc table{border-collapse: collapse;}
main .arc-cont .lft-arc table td,main .arc-cont .lft-arc table th{border: 1px solid #cfcfcf;padding: 1.5%;}
main .arc-cont .lft-arc .btn{color: #FFF;position: relative;margin: 5px 5px 20px 5px;}
main .arc-cont .lft-arc .btn:after{background: url("images/secure-ico.png") no-repeat left center;content: '';width: 134px;height: 34px;position: absolute;bottom: -35px;left: calc(50% - 67px);}
main .arc-cont .lft-arc .btn:hover{text-decoration: none;}
main .download-btn svg{display: inline-block;vertical-align: middle;margin-right: 5px;}
main .download-btn span{font-size: 18px;vertical-align: middle;display: inline-block;}
main .arc-cont .rgt-ad{width: 18%;display: inline-block;vertical-align: top;margin-left: 2%;}
main .arc-cont .rgt-ad a{display: block;margin-bottom: 20px;background-image: url("images/arc-sidebar-bg.png");font-size: 18px;padding: 20px;font-weight: 200;background-color: #f5f8fd;color: #3f4e59;border:1px solid rgba(0,125,217,0.1);}
main .arc-cont .rgt-ad a:hover{background-color: #007dd9;color: #FFF;}
main .arc-cont .rgt-ad a.red{background-color: rgba(246,79,79,0.1)}
main .arc-cont .rgt-ad a.red:hover{background-color: rgba(246,79,79,1);color: #FFF;}
main .arc-cont .rgt-ad a.blue{background-color: rgba(0,125,217,0.1)}
main .arc-cont .rgt-ad a.blue:hover{background-color: rgba(0,125,217,1);color: #FFF;}
main .arc-cont .rgt-ad a.black{background-color: rgba(0,39,66,0.1)}
main .arc-cont .rgt-ad a.black:hover{background-color: rgba(0,39,66,1);color: #FFF;}
main .arc-cont .rgt-ad a.yellow{background-color: rgba(255,234,0,0.1)}
main .arc-cont .rgt-ad a.yellow:hover{background-color: rgba(255,234,0,1);color: #FFF;}
main .arc-cont .rgt-ad a.orange{background-color: rgba(175,66,0,0.1)}
main .arc-cont .rgt-ad a.orange:hover{background-color: rgba(175,66,0,1);color: #FFF;}
main .arc-cont .rgt-ad a.green{background-color: rgba(10,75,64,0.1)}
main .arc-cont .rgt-ad a.green:hover{background-color: rgba(10,75,64,1);color: #FFF;}
main .nav-link{padding-bottom: 40px;}
main .related-arc{margin: 50px 0;border:1px solid #f5f5f5;}
main .related-arc .title{font-size: 18px;font-weight: 800;background: #f5f5f5;padding: 10px 20px;}
main .lft-arc .related-arc ul.lst{margin: 20px;}
main .lft-arc .related-arc ul.lst a{color: #3f4e59;}
main .lft-arc .related-arc ul.lst a:hover{color: #007dd9;}
/*resource center*/
main .link-recommend{padding: 50px 0 20px;}
main .link-recommend li{display: inline-block;}
main .resource-cont{font-size: 0;padding: 40px 0 100px;}
main .resource-cont .cell{}
main .resource-cont .lft-sub,main .resource-cont .rgt-lst{display: inline-block;vertical-align: top;}
main .resource-cont .lft-sub{font-size: 14px;width: 15%;padding-right: 2%;transition: all ease 0.2s;}
main .resource-cont .lft-sub:hover{transform: translateX(5px);}
main .resource-cont .rgt-lst{width: 85%;padding-left: 5%;position: relative;}
main .resource-cont .cell:not(:last-child) .rgt-lst{border-left: 1px solid #e2e2e2;padding-bottom: 50px;}
main .resource-cont .rgt-lst:after{content: '';width: 15px;height: 15px;border: solid 1px #cdcdcd;;border-radius: 50%;position:absolute;left: -8px;top:0;background: #FFF;transition: all linear 0.2s;}
main .resource-cont .rgt-lst:hover:after{border-color:#007dd9;border-width: 2px;}
main .resource-cont .rgt-lst .sub{font-size: 18px;margin-bottom: 10px;}
main .resource-cont .rgt-lst p{font-size: 14px;color: #999;}

/*list article*/
main .hot-recommend{font-size: 0;margin: 20px 0;text-align: center;}
main .hot-recommend .lft,main .hot-recommend .rgt{display: inline-block;vertical-align: top;position: relative;}
main .hot-recommend .lft{width: 56.6666%;}
main .hot-recommend .rgt{width: 41.6666%;margin-left: 1.6666%;}
main .hot-recommend .rgt .t,main .hot-recommend .rgt .b{position: relative;}
main .hot-recommend .rgt .t{margin-bottom: 20px;}
main .hot-recommend p{font-size: 18px;position: absolute;left: 0;bottom:0;background: rgba(0,0,0,0.68);width: 100%;color: #FFF;padding: 10px 20px;text-align: left;}

main .list-cont{padding: 20px 0 80px;}
main .list-cont .cell{position: relative;margin-bottom: 10px;padding: 20px 20px 20px 50px;transition: all ease 0.2s;}
main .list-cont .cell:hover{background: #f5f8fd;}
main .list-cont .cell:after{position: absolute; content: '';background:url("images/list.svg") no-repeat;width: 32px;height: 32px;left: 20px;top:24px;}
main .list-cont .cell .sub{font-size: 18px;margin-bottom: 10px;}
main .list-cont .cell p{font-size: 14px;color: #999;}

@media (max-width: 769px){
    main .arc-banner .title{font-size: calc(24px + 1vw)}
    main .arc-cont .lft-arc,main .arc-cont .rgt-ad{width: 100%;}
    main .arc-cont .lft-arc{margin-bottom: 30px;}
    main .arc-cont .lft-arc h2{font-size: calc(18px + 1vw)}
    main .group-banner .lft{width: 100%;text-align: center;margin-bottom: 20px;}
    main .group-banner .rgt{width: 100%;padding-left: 0;text-align: center}
    main .resource-cont .lft-sub,main .resource-cont .rgt-lst{width: 100%;}
    main .resource-cont .lft-sub{margin-bottom: 10px;padding-right:0;}
    main .resource-cont .rgt-lst{padding-left: 0;}
    main .resource-cont .cell:not(:last-child) .rgt-lst{border: none;padding-bottom: 30px;}
    main .resource-cont .rgt-lst:after{display: none;}
    main .hot-recommend .lft{margin-bottom: 20px;}
    main .hot-recommend .rgt{margin-left: 0;}
    main .hot-recommend .lft,main .hot-recommend .rgt{width: auto;}
    main .list-cont .cell{padding: 20px 10px;}
    main .list-cont .cell:after{display: none;}
    main .arc-cont .rgt-ad{margin-left: 0;}
}