/* Common
-------------------------------------------------- */
.product {
    font-size: 16px;
    overflow-x:hidden;
}
.product section:not(:first-child) {
    padding-top: 120px;
    padding-bottom: 120px;
}
.product h2 {
    font-size: 48px;
    text-align: center;
    letter-spacing: 3.31px;
}
.product h4 {
    font-weight: 400;
}
.inner {
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Banner
-------------------------------------------------- */
.banner {
    padding-top: 80px;
    color: #fff;
    background: #2A2C32 linear-gradient(-179deg, #2A2C32 0%, #3E3E45 100%);
}
.banner .main .inner {
    height: 835px;;
    background: url('../img/product_banner.png') right 105px / 620px 730px no-repeat;
}
.banner .main h1 {
    padding-top: 170px;
    font-size: 66px;
    letter-spacing: 4.55px;
}
.banner .main p {
    padding-top: 20px;
    line-height: 38px;
}
.banner .main a {
    display: inline-block;
    width: 200px;
    height: 66px;
    margin-top: 80px;
    color: #fff;
    font-size: 24px;
    text-align: center;
    line-height: calc(66px - 2px * 2);
    border: 2px solid #fff;
    border-radius: 2px;
}
.banner .footer {
    background: rgba(255,255,255,.1);
}
.banner .footer ul {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}
.banner .footer li {
    padding: 30px;
    box-shadow: 1px 0 0 rgba(255,255,255,.06);
}
.banner .footer li:first-child {
    box-shadow: -1px 0 0 rgba(255,255,255,.06), 1px 0 0 rgba(255,255,255,.06);
}
.banner .footer li:hover {
    padding: 30px;
    background: rgba(255,255,255,.06);
    box-shadow: -1px 0 0 rgba(255,255,255,.06) inset;
}
.banner .footer li:first-child:hover {
    box-shadow: -1px 0 0 rgba(255,255,255,.06) inset, 1px 0 0 rgba(255,255,255,.06) inset;
}
.banner .footer li h4 {
    font-size: 20px;
    margin-bottom: 10px;
}
.banner .footer li p {
    color: rgba(255,255,255,.5);
    line-height: 28px;
}

/* Features
-------------------------------------------------- */
.features {
    height: 970px;
}
.features .tabs {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-between;
    width: 1110px;
    margin: 80px auto 40px;
    border-bottom: 1px solid #e6e6e6;
}
.features .tabs li {
    padding: 9px 20px;
    font-size: 24px;
    cursor: pointer;
}
.features .tabs li.active {
    position: relative;
    color: #E62D2A;
}
.features .tabs li.active::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 4px;
    background: #E62D2A;
}
.features .tabs-content {
    position: relative;
    overflow: hidden;
    margin-left: -70px;
    margin-right: -70px;
}
.features .tabs-content::before {
    content: '';
    position: absolute;
    top: 65px;
    left: 20px;
    right: 20px;
    height: 430px;
    background: #F1F1F1;
    border: 1px solid #eee;
    box-shadow: 0 4px 20px 0 rgba(209,209,209,0.30);
    border-radius: 4px;
}
.features .tabs-content ul {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-around;
    width: calc(1200px * 4 + 70px * 2 * 4);
    margin-top: -20px;
    padding-top: 20px;
    padding-bottom: 20px;
    transition: transform .6s ease-in-out;
}
.features .tabs-content li {
    position: relative;
    width: 1200px;
    height: 500px;
    background-color: #FBFBFB;
    -webkit-background-size: 560px 500px;
    background-size: 560px 500px;
    background-position: 0 0;
    background-repeat: no-repeat;
    border: 1px solid #eee;
    box-shadow: 0 4px 20px 0 rgba(209,209,209,.3);
    border-radius: 4px;
}
.features .tabs-content li:nth-child(1) {
    background-image: url('../img/product_function_fitment.png');
}
.features .tabs-content li:nth-child(2) {
    background-image: url('../img/product_function_membership.png');
}
.features .tabs-content li:nth-child(3) {
    background-image: url('../img/product_function_sales.png');
}
.features .tabs-content li:nth-child(4) {
    background-image: url('../img/product_function_manage.png');
}
.features .tabs-content li h4,
.features .tabs-content li p {
    margin-left: 560px;
    padding-left: 22px;
}
.features .tabs-content li h4 {
    margin-top: 110px;
    margin-bottom: 40px;
    font-size: 34px;
    line-height: 48px;
}
.features .tabs-content li p {
    color: #666;
    font-size: 20px;
    line-height: 36px;
}
.features .tabs-content li p::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 4px;
    margin-right: 20px;
    border: 3px solid #E62D2A;
    border-radius: 50%;
    vertical-align: 1px;
}

/* Flow
-------------------------------------------------- */
.flow {
    height: 1040px;
    color: #fff;
    text-align: center;
    background: #27272F url(../img/pic_product_lines.png) center 310px / 1920px 280px  no-repeat;
}
.flow .desc {
    margin-top: 20px;
    color: rgba(255,255,255,.8);
    font-size: 20px;
    line-height: 36px;
}
.flow ul {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 400px;
}
.flow li {
    position: relative;
    width: 25%;
    margin-top: 70px;
}
.flow li h4 {
    color: rgba(255,255,255,.9);
    font-size: 24px;
}
.flow li p {
    margin-top: 2px;
    color: rgba(255,255,255,.5);
    font-size: 12px;
}
.flow li:not(:nth-child(4n))::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    display: block; 
    margin-left: auto;
    width: 1px;
    height: 50px;
    background-image: linear-gradient(-180deg, rgba(255,255,255,0.00) 0%, #FFFFFF 50%, rgba(255,255,255,0.00) 98%);
    transform: translateY(-50%);
}

/* Price
-------------------------------------------------- */
.price .inner > ul {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    margin-top: 80px;
    margin-left: -22px;
    margin-right: -22px;
}
.price .inner > ul > li {
    width: calc(100% / 3);
    margin-left: 22px;
    margin-right: 22px;
}
.price .box {
    position: relative;
    height: 733px;
    box-shadow: 0 4px 20px 0 rgba(209,209,209,.3);
    border-radius: 4px;
    overflow: hidden;
}
.price .box .edition {
    height: 191px;
    padding: 30px;
    color: #fff;
    text-align: center;
}
.price .box .edition h4 {
    font-size: 24px;
}
.price .box .edition p {
    margin-top: 10px;
    font-size: 20px;
}
.price .box .edition p span {
    display: inline-block;
    font-size: 70px;
    font-weight: 700;
    transform: translateY(2px);
}
.price .basic .edition {
    background: linear-gradient(-135deg, #4F5367 0%, #222226 100%);
}
.price .basic .list li::before {
    background: #3E404E;
}
.price .basic .list a {
    background-image: linear-gradient(-132deg, #4F5367 0%, #222226 100%);
}
.price .pro .edition {
    background: linear-gradient(-134deg, #FF7272 0%, #FC4747 100%);
}
.price .pro .list li::before {
    background: #FD4D4D;
}
.price .pro .list a {
    background-image: linear-gradient(-135deg, #FF7272 0%, #FC4747 100%);
}
.price .custom .edition {
    background: linear-gradient(-135deg, #FFDC85 0%, #F4C447 100%);
}
.price .custom .list li::before {
    background: #F5C74F;
}
.price .custom .list a {
    background-image: linear-gradient(-135deg, #FFDC85 0%, #F4C447 100%);
}
.price .box .list {
    padding-top: 40px;
    padding-left: 30px;
    padding-right: 30px;
}
.price .box .list li {
    position: relative;
    margin-bottom: 30px;
    padding-left: 20px;
    color: #666;
    line-height: 22px;
}
.price .box .list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.price .box .list a {
    position: absolute;
    left: 44px;
    right: 44px;
    bottom: 30px;
    height: 46px;
    color: #fff;
    font-size: 20px;
    text-align: center;
    line-height: 46px;
    border-radius: 2px;
}
@media (max-width:420px){
    .price .inner > ul{
        display:flex!important;
        flex-direction:column!important;
    }
    .price .inner > ul li{
        margin-top:0;
    }
    .price .inner > h2{
        font-size:36px;
        text-align:center;
        font-size:24px;
        line-height:85px;
        margin:0;
    }
    .product section:not(:first-child){
        margin-top:-115px;
        padding-bottom: 0;
    }
    .banner .main .inner{
        width:auto;
    }
    .banner .main .inner {
        height: auto;
        background: url('../img/product_banner.png') right 0px no-repeat;
        background-size:40%;
    }
    .banner .main h1{
        padding-left:20px;
        font-size:18px;
        padding-top:20px;
    }
    .banner .main p{
        display:none;
    }
    .banner .footer ul{
        width:100%;
        display:flex;
        flex-wrap:wrap;
    }
    .banner .footer ul li{
        width:50%;
        padding:10px 15px;
    }
     .banner .footer ul li h4{
        font-size:14px;
    }
     .banner .footer ul li p{
         font-size:10px;
         line-height:12px;
     }    
     .banner .footer li:hover {
        padding:10px 15px;        
        background: rgba(255,255,255,.06);
        box-shadow: -1px 0 0 rgba(255,255,255,.06) inset;
    }
    .features .inner{
        width:auto;
    }
    .features .inner h2{
        font-size:24px;
    }
    .features .tabs{
        display:none;
    }
    .features .tabs-content{
        margin-top:25px;
    }
    .flow{
        height:auto;
    }
    .flow .inner{
        width:auto;
    }
    .flow .inner h2{
        font-size:24px;
    }
     .flow .inner >p{
        display:none;
    }
    .flow{
        color: #fff;
        text-align: center;
        background: #27272F url(../img/pic_product_lines.png) center 170px / 1920px 280px no-repeat;
        background-size:100%;
    }
    .flow li h4 {
        font-size: 12px;
    }   
    .flow ul{
        margin-top:30px;
    }
    .flow ul li{
        margin-top:45px;
        margin-bottom:25px;
    }
    .flow ul li:nth-child(1),.flow ul li:nth-child(2),.flow ul li:nth-child(3),.flow ul li:nth-child(4){
        margin-bottom:-15px;
    }
    .flow ul li p{
        display:none;
    }
    .features{
        height:auto;
    }
    .features .tabs-content ul{
        height:300px;
    }
    .features .tabs-content li{ 
        height:100%;
        width:100%;
        background-size:19%;
        background-position:140px -25px;
    } 
    .features .tabs-content li p{ 
        display:none;
    }    
    .features .tabs-content li h4{
        margin-left:160px;
        padding-left: 0;
        margin-top:177px;
        font-size:16px;
        line-height:30px;
        margin-bottom:10px;
    }  
    .features .tabs-content li p{
        width:240px!important;
        font-size:10px;
        line-height:16px;
    }
    .banner .main .inner h1{
        position:relative;
        line-height:2;
        top:-60px;
        padding-top:103px;
    }
    .banner .main .inner p{
        margin-top:25px;
        padding-bottom:55px;
    }
    .banner .main .inner p span:nth-child(2),.banner .main .inner p br{
        display:none;
    }    
    .banner .footer{
        margin-top:-10px;
    }
    .banner .footer .inner li{
        width:50%;
        padding:0 10px 0 10px;
    }
    .banner .footer .inner li span:nth-child(2){
        display:none;
    }
    .banner .footer .inner li:last-child span:nth-child(2){
        display:block;
    }
    .banner .footer .inner li:last-child span:nth-child(1){
        display:none;
    }
    .banner .footer .inner li:first-child p span{
        display:none;
    }
    .price .inner{
        box-sizing:border-box;
        padding:0 20px;
        width:100%;
    }
    .price{
        width:100%;
    }
    .price .inner ul{
        width:100%;
        margin-top:30px;
    }
    .price .inner > ul > li {
        width:100%;
        margin-left: 22px;
        margin-right: 22px;
    }
}