* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

body{
    color: #fff;
    letter-spacing: 0.03em;
    margin: 0;
    font-size: 14px;
    background-color: #fff;
    position: relative;
    /*
    font-family: 'Hiragino Sans GB', sans-serif;
    */
    font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding-bottom: 148px;
}
.container-fluid{
    min-width: 1000px;
    width: 100%;
    margin: 0;
    padding: 0 0 0 0;
}
.container{
    width: 1000px;
    background-color: transparent;
    margin: 0 auto;
    position: relative;
    text-align: center;
    padding: 0 0 0 0;
}
h1, h2, h3, h4, h5, h6{
    margin: 0;
    font-weight: 700;
    line-height: 1;
}
p {
    margin: 0;
    font-weight: 400;
}
ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
    transition: all 300ms ease;
    cursor: pointer;
    color: #f6590a;
}
a:hover{
    text-decoration: none;
    color: #f63e7d;
}
input{
    color: #555;
    letter-spacing: 0.03em;
    margin: 0;
    font-size: 16px;
}
.hide{
    display: none !important;
}
.hidden{
    display: none;
}
.button{
    text-align: center;
    width: 200px;
    font-size: 20px;
    font-weight: 400;
    color: #fff;
    letter-spacing: 0.02em;
    border-radius: 50px;
    background-color: #00c1de;
    background-image: linear-gradient(-225deg, #00c1de 0, #1c90f6 100%);
    line-height: 52px;
    display: inline-block;
    transition: all 300ms ease;
    cursor: pointer;
}
.button:hover, .button:active{
    background-color: #00b0ca;
    background-image: linear-gradient(to bottom right, #00b0ca, #187ed7);
    color: #fff;
}
.weixin-pic{
    display: none;
}

/**********************************General header ********************************************/
.header{
    position: absolute;
    top: 0;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0);
}
.header nav{
    padding: 22px 15px 0;
    float: right;
    min-width: 579px;
    text-align: right;
}
.header .menu-btn{
    display: none;
}
.header .container{
}
.header .logo{
    background-image: url("../img2/common/anivpn-logo2-black.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 108px;
    margin: 5px 0 0 3px;
    float: left;
    width: 120px;
    height: 80px;
}
.header a, .myaccount, .selectlang{
    color: #444;
    margin: 0 3px;
    font-weight: 700;
    font-size: 14px;
    padding: 5px 14px;
    border-radius: 9px;
    display: inline-block;
    border: none;
    background-color: transparent;
    border: none;
    font-family: inherit;
    cursor: pointer;
}
.header .logo-a{
    float: left;
}
.header .lang-ico{
    background-image: url("../img2/common/globe.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 16px;
    display: inline-block;
    height: 16px;
    width: 16px;
    vertical-align: top;
    padding: 20px 0 0 0;
    margin: 0 4px 0 0;
}
.header nav .myaccount-ico{
    background-image: url("../img2/common/user-icon.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 18px;
    display: inline-block;
    height: 18px;
    width: 18px;
    vertical-align: top;
    padding: 20px 0 0 0;
    margin: 0 4px 0 0;
}
.header nav .user-menu{
    background-color: rgba(0,0,0,0);
    position: absolute;
    right: 122px;
    width: 110px;
    top:56px;
    z-index: 999;
    display: none;
}
.header nav .user-menu li{
    display: block;
    margin: 2px 0 0;

}
.header nav .lang-menu{
    background-color: rgba(0,0,0,0);
    position: absolute;
    right: 15px;
    width: 110px;
    top:56px;
    z-index: 999;
    display: none;
}
.header nav .lang-menu li{
    display: block;
    margin: 2px 0 0;

}
.header .nav-a:active, .header .nav-a:hover{
    background-color: rgba(255,255,255,0.8);
}
.header a.first{
    margin: 0 12px 0 0 !important;
}
.header a.last{
    margin: 0 0 0 12px !important;
}
.header .website{
    color: #aabdc5;
    font-size: 11px;
    position: absolute;
    top: 40%;
    right: 10px;
    text-align: left;
    display: none;
}
.header .close-btn{
    background-image: url("../img2/common/close.png");
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    cursor: pointer;
    display: none;
    top: 20px;
    right: 20px;
    background-size: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
}
.header .close-btn:hover, .header .close-btn:active{
    background-color: rgba(252,171,9,.3);
}
/**********************************site-error ********************************************/

.site-error{
    margin: 0 auto 100px;
    max-width: 1000px;
    padding: 200px 0 150px;
    color: #555;
}
.site-error h1{
    font-size: 38px;
    font-weight: 400;
}
.alert-danger{
    background-color: transparent;
    border: none;
    margin: 20px 0 30px;
    font-size: 20px;
}

/***************************************  loading icon animation ****************************************/
.loader{
    margin: 300px auto 400px;
    display: block;
    font-size: 18px;
}
.load{
    font-size: 10px;
    height: 58px;
    width: 58px;
    text-indent: -9999em;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #ff3263;
    border-right-color: #ff9305;
    border-bottom-color: #ff9305;
    border-left-color: #ff9305;
    animation: load .8s infinite linear;
    transform: translateZ(0);
    display: inline-block;
    margin: 0 0 10px;
}
@keyframes load {
    0% {
        transform:rotate(0deg);
    }
    100% {
        transform:rotate(360deg);
    }
}
/********************************** Success2 ********************************************/
.success2{
    background: linear-gradient(145deg, rgba(255, 252, 0, .9), rgba(254, 189, 0, 0.9)), url("");
    color: #333;
    padding: 0 0 200px;

}
.success2 h1{
    font-weight: 700;
    padding: 140px 0 10px;
    color: #222;
    font-size: 44px;
    text-align: center;
    line-height: 70px;
    margin: 0 0 30px;
}
.success2 h1 .tick-ico{
    background-image: url("../img2/common/check-2.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 70px;
    display: inline-block;
    height: 70px;
    width: 70px;
    padding: 0;
    vertical-align: bottom;
    margin: 0 16px 0 0;
}
.success2 h1 .cross-ico{
    background-image: url("../img2/common/cancel.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 70px;
    display: inline-block;
    height: 70px;
    width: 70px;
    padding: 0;
    vertical-align: bottom;
    margin: 0 16px 0 0;
}
.success2 p{
    font-size: 16px;
    margin: 20px 0 0;
}
.success2 p span{
    font-weight: 700;
}
.success2 p span.plan-name{
    font-weight: 700;
    font-size: 23px;
}
.success2 p span.next-due-date{
    font-weight: 700;
    font-size: 23px;
    line-height: 50px;
}
.success2 .go-home-btn{
    border: none;
    padding: 10px;
    border-radius: 10px;
    color: #fff;
    font-size: 16px;
    width: 338px;
    background-color: #ee477c;
    background-image: linear-gradient(140deg, #ff3263, #ff9305);
    cursor: pointer;
    margin: 40px 0 80px;
    display: inline-block;
    text-align: center;
}
.success2 .go-home-btn:hover, .success2 .go-home-btn:active{
    background-color: #e44477;
    background-image: linear-gradient(140deg, #f12f5d, #f58d05);
}
.success2 .p-1{
    margin: 0;
    font-size: 15px;
    font-weight: 400;
}
.success2 .btn-wrap .app-dl-btn{
    background-color: transparent;
    width: 150px;
    height: 46px;
    display: inline-block;
    background-image: url("../img2/common/icon-set.svg");
    background-repeat: no-repeat;
    margin: 25px 5px 0;
    border-radius: 8px;
}
.success2 .btn-wrap .app-dl-btn.ios{
    background-position: -1px -49px;
    background-size: 258px;
}
.success2 .btn-wrap .app-dl-btn.android{
    background-position: -1px -1px;
    background-size: 258px;
}

/**********************************Buy ********************************************/
.buy{
    background: linear-gradient(145deg, rgba(255, 252, 0, .9), rgba(254, 189, 0, 0.9)), url("");
}
.buy-container-fluid{
    margin: 0;
    color: #555;
}
.buy-container-fluid .container{
    text-align: left;
    padding: 0 12px;
    display: table;
}
.result-container-fluid .container{
    padding: 0 12px;
    display: table;
    text-align: center;
}

.buy-container-fluid h1{
    font-weight: 400;
    padding: 140px 0 20px;
    color: #333;
    font-size: 56px;
    text-align: center;
}
.buy-container-fluid h2{
    text-align: left;
    font-weight: 400;
    padding: 20px 0 5px;
    color: #444;
    font-size: 21px;
}
.buy-container-fluid .field{
    padding: 0 0 30px;
    text-align: left;
}
.buy-container-fluid .field p{
    text-align: left;
    font-weight: 400;
    padding: 3px 0 10px;
    color: #555;
    font-size: 13px;
}
.buy-container-fluid .field .product-ul{
    background-color: transparent;
    display: table;
    width: 100%;
}
.buy-container-fluid .field .product-li{
    float: left;
    width: 20%;
    display: table;
    margin: 0 0 10px;
}
.buy-container-fluid .field .product-li .product-item{
    width: 95%;
    background-color: #fff;
    margin: 0 auto;
    color: #333;
    border-radius: 8px;
    padding: 0 0 10px;
    cursor: pointer;
    transition: all 100ms ease;
}
.buy-container-fluid .field .product-li .product-item.selected{
    background-color: #ee477c;
    background-image: linear-gradient(to right, #ee477c, #f68331);
    color: #fff;
}
.buy-container-fluid .field .product-li .product-item.selected .product-name{
    color: #fff;
}
.buy-container-fluid .field .product-li .product-item.selected .monthly-text{
    color: #fff;
}
.buy-container-fluid .field .product-li .product-item.selected .product-feature li{
    color: #fff;
}
.buy-container-fluid .field .product-li .product-item.selected .save{
    color: #fff;
}
.buy-container-fluid .field .product-li .product-item.selected .monthly{
    color: #fff;
}
.buy-container-fluid .field .product-li .product-item.selected .price{
    color: #fff;
}
.buy-container-fluid .field .product-li .product-item.selected .price-0{
    color: #fff;
}
.buy-container-fluid .field .product-li .product-item:hover{
    background-color: #eee;
}
.buy-container-fluid .field .product-li .product-item .product-name{
    padding: 10px 10px 10px 15px;
    color: #eb436e;
    font-size: 25px;
    text-align: left;
    font-weight: 700;
}
.buy-container-fluid .field .product-li .product-item .monthly-price{
     font-size: 38px;
     text-align: center;
     font-weight: 700;
 }
.buy-container-fluid .field .product-li .product-item .monthly-price .money-sign{
    display: inline-block;
    vertical-align: top;
    margin: 7px 3px 0 0;
    font-size: 20px;
    line-height: 1;
}
.buy-container-fluid .field .product-li .product-item .monthly-text{
    font-size: 11px;
    text-align: center;
    color: #555;
    font-weight: 700;
    margin: -5px 0 0;
}
.buy-container-fluid .field .product-li .product-item .product-feature{
    margin: 10px 0 0;
}
.buy-container-fluid .field .product-li .product-item .product-feature li{
    padding: 0 15px 0;
    text-align: left;
    color: #555;
    font-size: 12px;
    margin: 0 0 2px;
}
.buy-container-fluid .field .product-li .product-item .product-feature li .numberofday{
    font-size: 16px;
    margin: 0 2px;
}
.buy-container-fluid .field .product-li .product-item .tip{
    height: 28px;
    margin: 10px auto;
}
.buy-container-fluid .field .product-li .product-item .stat-tip{
    background-color: #333;
    line-height: 28px;
    height: 28px;
    width: 136px;
    font-size: 12px;
    color: #fff;
    margin: 10px auto;
    border-radius: 10px;
    text-align: center;
}
.buy-container-fluid .field .product-li .product-item .save{
    text-align: right;
    padding: 3px 10px;
    font-size: 13px;
    font-weight: 400;
    color: #f42b69;
}
.buy-container-fluid .field .product-li .product-item .monthly {
    float: left;
    color: #ffb02a;
    font-size: 12px;
    margin: 8px 0 0;
}
.buy-container-fluid .field .product-li .product-item .bottom{
    text-align: right;
    padding: 0 10px 0;
    display: table;
    width: 100%;
}
.buy-container-fluid .field .bottom-2{
    text-align: left;
    padding: 20px 8px 0;
    font-size: 12px;
    color: #eb436e;
}
.buy-container-fluid .field .product-li .product-item .similar-sign{
    display: inline-block;
    vertical-align: top;
    margin: 5px 0px 0;
    font-size: 12px;
    line-height: 1;
}
.buy-container-fluid .field .product-li .product-item .money-sign-0{
    display: inline-block;
    vertical-align: top;
    margin: 2px 3px 0;
    font-size: 9px;
    line-height: 1;
}
.buy-container-fluid .field .product-li .product-item .price-0{
    font-size: 15px;
    font-weight: 400;
    color: #555;

}
.buy-container-fluid .field .product-li .product-item .money-sign{
    display: inline-block;
    vertical-align: top;
    margin: 3px 2px 0;
    font-size: 16px;
    line-height: 1;
}
.buy-container-fluid .field .product-li .product-item .price{
    font-size: 23px;
    font-weight: 700;
    color: #444;

}

.buy-container-fluid .field .connection .area-icon{
    background-size: 25px;
    margin: 2px 7px 0 0;
    width: 27px;
    height: 18px;
    background-color: transparent;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center center;
    vertical-align: top;
}
.buy-container-fluid .field .error, .buy-container-fluid .error{
    color: #ec6259;
    font-size: 13px;
    text-align: left;
    margin: 5px 0;
    padding: 0;
}
.buy-container-fluid .field .email{
    border: none;
    padding: 14px 36px 14px 12px;
    border-radius: 10px;
    color: #333;
    font-size: 16px;
    width: 338px;
}
.buy-container-fluid .field .email.valid{
    background-image: url("../img/common/blue-tick-big.png");
    background-repeat: no-repeat;
    background-position: 311px center;
    background-size: 16px;
}
.buy-container-fluid .field .captcha-wrap{
    margin: 10px 0;
}
.buy-container-fluid .field .captcha-input{
    border: none;
    padding: 14px 12px 14px 12px;
    border-radius: 10px;
    color: #333;
    font-size: 16px;
    width: 188px;
    display: inline-block;
    vertical-align: top;
}
.buy-container-fluid .field .refresh-btn{
    margin: 17px 0 0 5px;
    display: inline-block;
    vertical-align: top;
    font-size: 14px;

}
.buy-container-fluid .field .captcha-img-box{
    background-color: #fff;
    border: none;
    border-radius: 10px;
    width: 121px;
    height: 47px;
    display: inline-block;
    vertical-align: top;
    margin: 0 0 0 5px;
}
.buy-container-fluid .field .captcha-img-box .inner-box{
    display: table-cell;
    background-color: #fff;
    border: none;
    border-radius: 10px;
    width: 121px;
    height: 47px;
    text-align: center;
    vertical-align: middle;
}
.buy-container-fluid .field .captcha-img{
    width: 100px;
    max-height: 40px;
}
.buy-container-fluid .field .payment-ul{
    background-color: transparent;
    display: table;
    width: 100%;
    margin: 10px 0 0;
}
.buy-container-fluid .field .payment-li{
    float: left;
    display: table;
}
.buy-container-fluid .field .payment-item{
    background-color: #fff;
    border-radius: 10px;
    margin: 0 12px 0 0;
    color: #555;
    text-align: left;
    cursor: pointer;
    font-size: 16px;
    position: relative;
    width: 150px;
    height: 58px;
}
.buy-container-fluid .field .payment-item:hover{
    background-color: #eee;
}
.buy-container-fluid .field .payment-item.alipay .payment-icon{
    background-image: url("../img2/common/alipay-icon.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 80px;
    width: 84px;
    height: 58px;
    display: table;
    margin: 0 auto;
}
.buy-container-fluid .field .payment-item.alipay.selected .payment-icon{
    background-image: url("../img2/common/alipay-icon-w.png");
}
.buy-container-fluid .field .payment-item.selected{
    background-color: #00c1de;
    background-image: linear-gradient(to right, #ee477c, #f68331);
}
.buy-container-fluid .field .payment-item.cards .payment-icon{
    background-image: url("../img2/common/cards-icon.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100px;
    width: 100px;
    height: 58px;
    display: table;
    margin: 0 auto;
}
.buy-container-fluid .field .payment-item.cards.selected .payment-icon{
    background-image: url("../img2/common/cards-icon-w.png");
}

.buy-container-fluid .agreement{
    text-align: left;
    margin: 0 0 0;
}
.buy-container-fluid .agreement-p{
    margin: 0 0 0 5px;
}
.buy-container-fluid .agreement-p a{
    color: #f6590a;
}
.buy-container-fluid .agreement-p a:hover{
    color: #ff5c0a;
}
.buy-container-fluid .pay-btn{
    border: none;
    padding: 10px;
    border-radius: 10px;
    color: #fff;
    font-size: 16px;
    width: 338px;
    background-color: #ee477c;
    background-image: linear-gradient(140deg, #ff3263, #ff9305);
    cursor: pointer;
    margin: 20px 0;
}
.buy-container-fluid .go-login-btn{
    border: none;
    padding: 10px;
    border-radius: 10px;
    color: #fff;
    font-size: 16px;
    width: 238px;
    background-color: #ee477c;
    background-image: linear-gradient(140deg, #ff3263, #ff9305);
    cursor: pointer;
    margin: 20px 0;
    display: inline-block;
    text-align: center;
}
.buy-container-fluid .go-signup-btn{
    padding: 10px 10px;
    border-radius: 10px;
    color: #ee477c;
    font-size: 16px;
    width: 98px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    margin: 20px 0 20px 20px;
    display: inline-block;
    text-align: center;
}
.buy-container-fluid .pay-btn:hover, .buy-container-fluid .pay-btn:active{
    background-color: #f12f5d;
    background-image: linear-gradient(140deg, #f12f5d, #f58d05);
}
.buy-container-fluid .go-login-btn:hover, .buy-container-fluid .go-login-btn:active{
    background-color: #f12f5d;
    background-image: linear-gradient(140deg, #f12f5d, #f58d05);
}
.buy-container-fluid .go-signup-btn:hover, .buy-container-fluid .go-signup-btn:active{
    text-decoration: underline;
}
.buy-container-fluid .pay-tip{
    margin: 5px;
    padding: 0;
    font-size: 12px;
    color: #fff;
    opacity: 0.8;
}
.buy-container-fluid .remarks{
    margin: 30px 0 120px;
    padding: 0 0 80px;
}
.buy-container-fluid .remarks p{
    margin: 5px;
    padding: 0;
    font-size: 12px;
}

/**********************************Index ********************************************/
.index{
    margin: 0 0;
}

/**********************************Index row-s2 ********************************************/
.index .row-s2{
    /*background-image: url("../img/common/index-rows-banner2.jpg");*/
    background-position: center center;
    background: linear-gradient(145deg, rgba(255, 252, 0, .2), rgba(254, 189, 0, 0.6)), url("../img2/common/anivpn-bg.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #444;
}
.index .row-s2 .container{
    padding: 87px 0 108px 0;
}
.index .row-s2 .banner{
    width: 50%;
    box-shadow: 0 1px 16px 0 #c19c43;
    margin: 0;
    border-radius: 8px;
    animation-delay: 500ms;
}
.index .row-s2 h1{
    padding: 0 0 0 0;
    font-size: 38px;
    font-weight: 700;
    line-height: 1;
    color: #333;
    animation-delay: 200ms;
    margin: 50px 0 0;
}
.index .row-s2 .devices-pic{
    height: 400px;
    display: block;
    background: linear-gradient(145deg, rgba(255, 242, 0, 0), rgba(254, 179, 0, 0)), url("../img2/common/ani-family-devices.png");
    background-size: 700px;
    background-repeat: no-repeat;
    background-position: center  center;
    margin: 60px 0 0;
    animation-duration: 1500ms;
}

.index .row-s2 .p-2{
    margin: 16px 0 0 0;
    font-size: 14px;
    font-weight: 400;
    display: block;
}

.index .row-s2 .p-2 i{
    font-size: 24px;
    display: inline-block;
    vertical-align: bottom;
    line-height: 0.9;
    margin: 0 0 0 -6px;
}
.index .row-s2 .go-dl{
    width: 288px;
    padding: 13px 0;
    text-align: center;
    background-color: rgb(238, 71, 124);
    background-image: linear-gradient(140deg, rgb(255, 50, 99), rgb(255, 147, 5));
    color: #fff;
    font-size: 15px;
    border-radius: 15px;
    display: inline-block;
    margin: 10px 0 0;
}
.index .row-s2 .go-dl:hover, .index .row-d .go-dl:active{
    background-color: rgb(241, 47, 93);
    background-image: linear-gradient(140deg, rgb(241, 47, 93), rgb(245, 141, 5));
}

/**********************************Index row-s ********************************************/
.index .row-s{
    /*background-image: url("../img/common/index-rows-banner2.jpg");*/
    background-position: center center;
    background: linear-gradient(145deg, rgba(255, 252, 0, .9), rgba(254, 189, 0, 0.9)), url("../img2/common/bg1.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #444;
}
.index .row-s .container{
    padding: 265px 0 308px 400px;
    background: linear-gradient(145deg, rgba(255, 242, 0, 0), rgba(254, 179, 0, 0)), url("../img2/common/app-screen-shot_600px.png");
    background-size: 400px;
    background-repeat: no-repeat;
    background-position: 80px 60%;
}
.index .row-s h1{
    padding: 0 0 0 0;
    font-size: 38px;
    font-weight: 700;
    line-height: 1;
    color: #333;
}
.index .row-s .p-1{
    margin: 56px 0 0 0;
    font-size: 23px;
    font-weight: 400;
}

.index .row-s .p-2{
    margin: 36px 0 0 0;
    font-size: 14px;
    font-weight: 400;
}
.index .row-s .p-2 span{
    padding: 10px;
    border-radius: 4px;
}
.index .row-s .p-2 i{
    font-size: 24px;
    display: inline-block;
    vertical-align: bottom;
    line-height: 0.9;
    margin: 0 0 0 -6px;
}
.index .row-s .btn-wrap .app-dl-btn{
    background-color: transparent;
    width: 150px;
    height: 46px;
    display: inline-block;
    background-image: url("../img2/common/icon-set.svg");
    background-repeat: no-repeat;
    margin: 25px 5px 0;
    border-radius: 8px;
}
.index .row-s .btn-wrap .app-dl-btn.ios{
    background-position: -1px -49px;
    background-size: 258px;
}
.index .row-s .btn-wrap .app-dl-btn.android{
    background-position: -1px -1px;
    background-size: 258px;
}
.index .row-s .btn-wrap .app-dl-btn.apk{
    background-image: url("../img2/common/android-apk.svg");
    background-size: contain;
}
/**********************************Index row-d ********************************************/
.index .row-d{
    background: linear-gradient(156deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .1)), url("../img2/common/footer-event.png");
    background-repeat: no-repeat;
    background-position: center 0%;
    background-size: cover;
    color: #fff;
    overflow: hidden;
}
.index .row-d .container{
    padding: 80px 0 80px 0;
}
.index .row-d h2{
    padding: 0 0 0 0;
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
    color: #444;
    font-family: Oswald;
}
.index .row-d h2 span{
    font-size: 36px;
    margin-right: 5px;
}
.index .row-d h3{
    padding: 0 0 0 0;
    font-size: 23px;
    font-weight: 400;
    line-height: 1;
    color: #333;

}
.index .row-d .p-0{
    color: #222;
    margin: 10px 0 0 0;
}
.index .row-d .p-0 .checked-ico{
    background-color: transparent;
    width: 18px;
    height: 18px;
    display: inline-block;
    background-image: url("../img2/common/checked-green.png");
    background-size: 18px;
    background-position: center top;
    background-repeat: no-repeat;
    vertical-align: top;
    margin: 0 5px 0 0;
}
.index .row-d .p-1{
    margin: 15px 0 0 0;
    color: #fff;
    display: inline-block;
    background: #ff8205;
    padding: 2px 9px;
    border-radius: 30px;
    font-size: 12px;
}
.index .row-d p{
    margin: 20px 0 0 0;
    font-size: 14px;
    font-weight: 400;
    padding: 0 10%;
    color: #ff8205;
}
.index .row-d ul{
    width: 100%;
    display: table;
    margin: 50px auto 0;
}
.index .row-d ul li{
    float: left;
    width: 25%;
    height: 178px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 34px;
    margin: 0 0 40px 0;
    display: table;
}
.index .row-d ul li .d-1{
    width: 100%;
    height: 90px;
    display: block;
    background: linear-gradient(rgba(0, 0, 0, .0), rgba(0, 0, 0, .0)), url("../img2/common/apple-logo.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 60px;
}
.index .row-d ul li .d-2{
    width: 100%;
    height: 90px;
    display: block;
    background: linear-gradient(rgba(0, 0, 0, .0), rgba(0, 0, 0, .0)), url("../img2/common/android-logo.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 60px;
}
.index .row-d ul li .d-3{
    width: 100%;
    height: 90px;
    display: block;
    background: linear-gradient(rgba(0, 0, 0, .0), rgba(0, 0, 0, .0)), url("../img2/common/windows-logo.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 52px;
}
.index .row-d ul li .d-4{
    width: 100%;
    height: 90px;
    display: block;
    background: linear-gradient(rgba(0, 0, 0, .0), rgba(0, 0, 0, .0)), url("../img2/common/mac-logo.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 55px;
}
.index .row-d .go-dl{
    width: 288px;
    padding: 13px 0;
    text-align: center;
    background-color: rgb(60,66,71);
    color: #eee;
    font-size: 15px;
    border-radius: 15px;
    display: inline-block;
    margin: 10px 0 0;
}
.index .row-d .go-dl:hover, .index .row-d .go-dl:active{
    background-color: rgb(70,76,81);
}
/**********************************Index row-l ********************************************/
.index .row-l{
    background-color: #353848;
    background: linear-gradient(145deg, rgba(255, 242, 0, .9), rgba(254, 179, 0, 0.9)), url("../img2/common/bg1.jpg");
    background-repeat: no-repeat;
    background-position: center 30%;
    background-size: cover;
    color: #444;
}
.index .row-l .container{
    padding: 108px 0 158px 0;
    width: 720px;
}
.index .row-l h2{
    padding: 0 0 0 0;
    font-size: 36px;
    font-weight: 400;
    line-height: 1;
    margin: 0 0 20px;
    font-family: Oswald;
}
.index .row-l h3{
    padding: 0 0 0 0;
    font-size: 25px;
    font-weight: 400;
    line-height: 1;
    margin: 0 0 50px;
    font-family: Oswald;
}
.index .row-l p{
    margin: 20px 0 0 0;
    font-size: 16px;
    font-weight: 400;
}
.index .row-l ul{
    width: 80%;
    display: table;
    margin: 30px auto 0;
}
.index .row-l ul li{
    opacity: .9;
    float: left;
    width: 25%;
    height: 100px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 48px;
}
.index .row-l ul .li-1{
    background-image: url("../img2/common/music-icon.png");
}
.index .row-l ul .li-2{
    background-image: url("../img2/common/game-icon.png");
    background-size: 58px;
}
.index .row-l ul .li-3{
    background-image: url("../img2/common/movie-icon.png");
}
.index .row-l ul .li-4{
    background-image: url("../img2/common/work-icon.png");
}
/**********************************Index row-su ********************************************/
.index .row-su{
    background-color: #353848;
    background: linear-gradient(135deg, rgba(40, 40, 40, .1), rgba(40, 40, 40, .3)), url("../img2/common/bg4.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    color: #fff;
}
.index .row-su .container{
    padding: 100px 0 100px 0;
}
.index .row-su h2{
    padding: 0 0 0 0;
    font-size: 38px;
    font-weight: 400;
    line-height: 1;
    color: #fff;
    font-family: Oswald;
}
.index .row-su .p-0{
    padding: 0 0 0 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    color: #fff;
    margin: 22px 0 50px;
}
.index .row-su .ul-1{
    background-color: transparent;
}
.index .row-su .ul-2{
    background-color: transparent;
    display: none;
}
.index .row-su ul{
    width: 100%;
    overflow: hidden;
}
.index .row-su ul li{
    float: left;
    width: 16.6667%;
    margin: 10px 0 20px;
}
.index .row-su .container .more-btn{
    margin: 30px 0 0;
    display: inline-block;
    color: #fff;
    padding: 0 0 30px;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 20px;
    background-image: url("../img2/common/angle-arrow-down.png");
}
.index .row-su .container .more-btn.no-arrow{
    background-image: none;
}
.index .row-su ul li .content{
    width: 90%;
    background-color: transparent;
    text-align: center;
    margin: 0 auto;
}
.index .row-su ul li .content p{
    font-size: 13px;
    color: #fff;
    margin: 5px 0;
    line-height: 20px;
}
.index .row-su ul li .content .app-portrait{
    width: 100px;
    height: 100px;
    background-color: #666;
    display: inline-block;
    border-radius: 24px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 813px;
    background-image: url("../img2/common/supportapps.jpg");
}
.index .row-su ul li .content .app-portrait.app1{
    background-position: 0 -100px;
}
.index .row-su ul li .content .app-portrait.app2{
    background-position: -100px 0;
}
.index .row-su ul li .content .app-portrait.app3{
    background-position: -200px 0;
}
.index .row-su ul li .content .app-portrait.app4{
    background-position: -100px -100px;
}
.index .row-su ul li .content .app-portrait.app5{
    background-position: 0 -300px;
}
.index .row-su ul li .content .app-portrait.app6{
    background-position: -200px -300px;
}
.index .row-su ul li .content .app-portrait.app7{
    background-position: 0 0;
}
.index .row-su ul li .content .app-portrait.app8{
    background-position: -100px -400px;
}
.index .row-su ul li .content .app-portrait.app9{
    background-position: 0 -400px;
}
.index .row-su ul li .content .app-portrait.app10{
    background-position: 0 -200px;
}
.index .row-su ul li .content .app-portrait.app11{
    background-position: -100px -200px;
}
.index .row-su ul li .content .app-portrait.app12{
    background-position: -300px -400px;
}
.index .row-su ul li .content .app-portrait.app13{
    background-position: -400px 0;
}
.index .row-su ul li .content .app-portrait.app14{
    background-position: -200px -400px;
}
.index .row-su ul li .content .app-portrait.app15{
    background-position: -600px -400px;
}
.index .row-su ul li .content .app-portrait.app16{
    background-position: -500px -400px;
}
.index .row-su ul li .content .app-portrait.app17{
    background-position: -100px -300px;
}
.index .row-su ul li .content .app-portrait.app18{
    background-position: -400px -100px;
}
.index .row-su ul li .content .app-portrait.app19{
    background-position: -300px -100px;
}
.index .row-su ul li .content .app-portrait.app20{
    background-position: -200px -100px;
}
.index .row-su ul li .content .app-portrait.app21{
    background-position: -400px -200px;
}
.index .row-su ul li .content .app-portrait.app22{
    background-position: -300px -200px;
}
.index .row-su ul li .content .app-portrait.app23{
    background-position: -200px -200px;
}
.index .row-su ul li .content .app-portrait.app24{
    background-position: -600px 0;
}
.index .row-su ul li .content .app-portrait.app25{
    background-position: -400px -400px;
}
.index .row-su ul li .content .app-portrait.app26{
    background-position: -500px 0;
}
.index .row-su ul li .content .app-portrait.app27{
    background-position: -500px -200px;
}
.index .row-su ul li .content .app-portrait.app28{
    background-position: -600px -200px;
}

/**********************************Index row-f1 ********************************************/
.index .row-f1{
    color: #fbfbfb;
    overflow: hidden;
}
.index .row-f1 .container{
    background-color: #353848;
    width: 100%;
}
.index .row-f1 .container .part-c{
    float: left;
    width: 50%;
    background-color: rgb(44,47,57);
    height: 385px;
    padding: 100px 0 0;
    text-align: left;
}
.index .row-f1 .container .part-c .content-wrap{
    width: 500px;
    background-color: transparent;
    text-align: center;
}
.index .row-f1 .container .part-c h3{
    font-size: 23px;
    font-weight: 400;
}
.index .row-f1 .container .part-c .p-0{
    margin: 10px 0 0;
    font-size: 28px;
}
.index .row-f1 .container .part-c .p-0 .ping{
    font-family: Oswald;
    font-size: 50px;
    margin: 0 5px 0 10px;
    color: rgba(239, 203, 5, 1);
}
.index .row-f1 .container .part-c .p-0 .ms{
    font-family: Oswald;
    font-size: 23px;
    margin: 0;
    color: rgba(239, 203, 5, 1);
}
.index .row-f1 .container .part-c .p-0 .remark-sign{
    font-size: 13px;
    margin: -0;
    display: inline-block;
    line-height: 1;
    vertical-align: top;
    padding: 36px 0 0 3px;
    color: #aaa;
}
.index .row-f1 .container .part-c .line{
    margin: 40px 0 0;
    display: inline-block;
    background-color: #f1f2f8;
    color: #333;
    text-decoration: none;
    font-size: 13px;
    padding: 6px 10px 6px 15px;
    border-radius: 9px;

}
.index .row-f1 .container .part-c .line .hk-flag{
    width: 24px;
    height: 20px;
    background: linear-gradient(90deg, rgba(44, 47, 57, .0), rgba(44, 47, 57, .0)), url("../img2/common/hong-kong.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 24px;
    display: inline-block;
    vertical-align: middle;
    margin: -1px 7px 0 0;
}
.index .row-f1 .container .part-c .line .arrow{
    width: 20px;
    height: 20px;
    background: linear-gradient(90deg, rgba(44, 47, 57, .0), rgba(44, 47, 57, .0)), url("../img2/common/right-arrow.png");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 23px;
    display: inline-block;
    vertical-align: middle;
    margin: -1px 0 0 20px;
}
.index .row-f1 .container .part-c .remark{
    font-size: 11px;
    margin: 70px 0 0;
    color: #aaa;
}
.index .row-f1 .container .part-p{
    float: left;
    width: 50%;
    height: 385px;
    background: linear-gradient(90deg, rgba(44, 47, 57, .0), rgba(44, 47, 57, 1)), url("../img2/common/bg5.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
/**********************************Index row-f2 ********************************************/
.index .row-f2{
    color: #fbfbfb;
    overflow: hidden;
}
.index .row-f2 .container{
    background-color: #353848;
    width: 100%;
}
.index .row-f2 .container .part-c{
    float: left;
    width: 50%;
    background-color: rgb(64,67,77);
    height: 385px;
    padding: 100px 0 0;
    text-align: right;
}
.index .row-f2 .container .part-c .content-wrap{
    width: 500px;
    background-color: transparent;
    text-align: center;
    display: inline-block;
}
.index .row-f2 .container .part-c h3{
    font-size: 23px;
    font-weight: 400;
}
.index .row-f2 .container .part-c .p-0{
    margin: 30px 0 0;
    font-size: 28px;
}
.index .row-f2 .container .part-c .p-0 .highlight{
    color: rgba(239, 203, 5, 1);
    font-size: 33px;
    margin: 0 5px 0 0;
}
.index .row-f2 .container .part-c .line{
    margin: 40px 0 0;
    display: inline-block;
    background-color: #f1f2f8;
    color: #333;
    text-decoration: none;
    font-size: 13px;
    padding: 6px 10px 6px 15px;
    border-radius: 9px;

}
.index .row-f2 .container .part-c .line .hk-flag{
    width: 24px;
    height: 20px;
    background: linear-gradient(90deg, rgba(44, 47, 57, .0), rgba(44, 47, 57, .0)), url("../img2/common/hong-kong.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 24px;
    display: inline-block;
    vertical-align: middle;
    margin: -1px 7px 0 0;
}
.index .row-f2 .container .part-c .line .arrow{
    width: 20px;
    height: 20px;
    background: linear-gradient(90deg, rgba(44, 47, 57, .0), rgba(44, 47, 57, .0)), url("../img2/common/right-arrow.png");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 23px;
    display: inline-block;
    vertical-align: middle;
    margin: -1px 0 0 20px;
}
.index .row-f2 .container .part-p{
    float: left;
    width: 50%;
    height: 385px;
    background: linear-gradient(270deg, rgba(44, 47, 57, .0), rgba(64, 67, 77, 1)), url("../img2/common/bg6.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
/**********************************Index row-f3 ********************************************/
.index .row-f3{
    background: linear-gradient(145deg, rgba(255, 242, 0, 1), rgba(254, 209, 0, 1)), url("");
    color: #333;
}
.index .row-f3 .container{
    padding: 50px 0;
}
.index .row-f3 .container h2{
    font-family: Oswald;
    font-size: 35px;
    line-height: 70px;
    vertical-align: top;
    display: inline-block;
    padding: 10px 0 0;
}
.index .row-f3 .container h2 span{
    font-family: Oswald;
    font-size: 80px;
    line-height: 70px;
    margin: 0 5px 0 0;
}
.index .row-f3 .container .banner{
    width: 100%;
    height: 500px;
    background: linear-gradient(270deg, rgba(44, 47, 57, .0), rgba(64, 67, 77, 0)), url("../img2/common/5devicesbanner.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
/**********************************Index row-f4 ********************************************/
.index .row-f4{
    background-color: rgb(64,67,77);
    color: #eee;
}
.index .row-f4 .container{
    padding: 50px 0;
}
.index .row-f4 .container ul{
    overflow: hidden;
}
.index .row-f4 .container ul li{
    float: left;
    width: 50%;
}
.index .row-f4 .container ul li .content-wrap{
    width: 280px;
    margin: 0 auto;
}
.index .row-f4 .container ul li .content-wrap p{
    font-size: 30px;
    font-weight: 400;
    margin: 0 0 0 100px;
    text-align: left;
    line-height: 100px;
}
.index .row-f4 .container ul li .content-wrap .ico{
    background-repeat: no-repeat;
    background-position: center center;
    width: 100px;
    height: 100px;
    display: inline-block;
}
.index .row-f4 .container ul li .content-wrap .ico-1{
    background-size: 100px;
    background-image: url("../img2/common/refund-ico.png");
    float: left;
}
.index .row-f4 .container ul li .content-wrap .ico-2{
    background-size: 70px;
    background-image: url("../img2/common/a-3.png");
    float: left;
}
.index .row-f4 .container .remark{
    font-size: 11px;
    color: #aaa;
    margin: 60px 0 0;
}
/**********************************Index row-a ********************************************/
.index .row-a{
    background-color: #353848;
    background: linear-gradient(135deg, rgba(50, 50, 50, .7), rgba(0, 0, 0, .8)), url("../img2/common/bg3.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    color: #fff;
}
.index .row-a .container{
    padding: 150px 0 150px 0;
}
.index .row-a h2{
    padding: 0 0 0 0;
    font-size: 33px;
    font-weight: 400;
    line-height: 1;
    color: #fff;
    font-family: Oswald;
}
.index .row-a h3{
    padding: 0 0 0 0;
    font-size: 23px;
    font-weight: 400;
    line-height: 1;
    color: #fff;
}
.index .row-a p{
    margin: 20px 0 0 0;
    font-size: 14px;
    font-weight: 100;
    padding: 0 10%;
}
.index .row-a ul{
    width: 100%;
    display: table;
    margin: 80px auto 0;
}
.index .row-a ul li{
    float: left;
    width: 25%;
    height: 178px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 34px;
    margin: 0 0 40px 0;
    display: table;
}
.index .row-a ul li .a-1{
    width: 100%;
    height: 90px;
    display: block;
    background: linear-gradient(rgba(0, 0, 0, .0), rgba(0, 0, 0, .0)), url("../img2/common/a-1.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 60px;
}
.index .row-a ul li .a-2{
    width: 100%;
    height: 90px;
    display: block;
    background: linear-gradient(rgba(0, 0, 0, .0), rgba(0, 0, 0, .0)), url("../img2/common/a-2.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 60px;
}
.index .row-a ul li .a-3{
    width: 100%;
    height: 90px;
    display: block;
    background: linear-gradient(rgba(0, 0, 0, .0), rgba(0, 0, 0, .0)), url("../img2/common/a-3.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 60px;
}
.index .row-a ul li .a-4{
    width: 100%;
    height: 90px;
    display: block;
    background: linear-gradient(rgba(0, 0, 0, .0), rgba(0, 0, 0, .0)), url("../img2/common/a-4.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 60px;
}
.index .row-a ul li .a-5{
    width: 100%;
    height: 90px;
    display: block;
    background: linear-gradient(rgba(0, 0, 0, .0), rgba(0, 0, 0, .0)), url("../img2/common/a-5.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 60px;
}
.index .row-a ul li .a-6{
    width: 100%;
    height: 90px;
    display: block;
    background: linear-gradient(rgba(0, 0, 0, .0), rgba(0, 0, 0, .0)), url("../img2/common/a-6.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 60px;
}
.index .row-a ul li .a-7{
    width: 100%;
    height: 90px;
    display: block;
    background: linear-gradient(rgba(0, 0, 0, .0), rgba(0, 0, 0, .0)), url("../img2/common/a-7.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 75px;
}
.index .row-a ul li .a-8{
    width: 100%;
    height: 90px;
    display: block;
    background: linear-gradient(rgba(0, 0, 0, .0), rgba(0, 0, 0, .0)), url("../img2/common/a-8.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 65px;
}
/**********************************Index row-article-mini ********************************************/
.index .container-fluid.row-article-mini{
    background-color: #333;
}
.index .row-article-mini{
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center 0%;
    background-size: 100%;
    color: #444;
}
.index .row-article-mini .container{
    padding: 0px 0 0px 0;
}
.index .row-article-mini ul{
    background-color: transparent;
    width: 100%;
    overflow: hidden;
    margin: 0px 0 0;
    padding: 30px 0;
}
.index .row-article-mini ul li{
    background-color: transparent;
    width: 160px;
    float: left;
}
.index .row-article-mini ul li .article-wrap{
    background-color: #fff;
    width: 90%;
    margin: 0 auto;
    border: 0px solid #eee;
    transition: all 300ms ease;
}
.index .row-article-mini ul li .article-wrap:hover{
    width: 90%;
    border: 0px solid #e1e2e8;
    box-shadow: 0 10px 20px 0px #000;
    margin: -10px auto 10px;
}
.index .row-article-mini ul li .article-wrap .thumb-pic{
    background-color: #333;
    height: 80px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover !important;
}
.index .row-article-mini ul li .article-wrap .thumb-pic.article-1{
    background: linear-gradient(145deg, rgba(255, 252, 0, 0), rgba(254, 189, 0, 0)), url("../img2/article/article-1.jpeg");
}
.index .row-article-mini ul li .article-wrap .thumb-pic.article-2{
    background: linear-gradient(145deg, rgba(255, 252, 0, 0), rgba(254, 189, 0, 0)), url("../img2/article/article-2.jpeg");
}
.index .row-article-mini ul li .article-wrap .thumb-pic.article-3{
    background: linear-gradient(145deg, rgba(255, 252, 0, 0), rgba(254, 189, 0, 0)), url("../img2/article/article-3.jpeg");
}
.index .row-article-mini ul li .article-wrap .thumb-pic.article-4{
    background: linear-gradient(145deg, rgba(255, 252, 0, 0), rgba(254, 189, 0, 0)), url("../img2/article/article-4.jpg");
}
.index .row-article-mini ul li .article-wrap .thumb-pic.article-5{
    background: linear-gradient(145deg, rgba(255, 252, 0, 0), rgba(254, 189, 0, 0)), url("../img2/article/article-5.jpg");
}
.index .row-article-mini ul li .article-title-wrap{
    padding: 5px;
}
.index .row-article-mini ul li h4{
    font-size: 12px;
    background-color: #fff;
    color: #555;
    padding: 0;
    line-height: 15px;
    height: 30px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-align: left;
    -webkit-line-clamp: 2;
}
/**********************************Index row-article ********************************************/
.index .row-article{
    background-color: #fff;
    background: linear-gradient(180deg, rgba(245, 245, 250, .8), rgba(245, 245, 250, .6)), url("");
    background-repeat: no-repeat;
    background-position: center 0%;
    background-size: 100%;
    color: #444;
}
.index .row-article .container{
    padding: 80px 0 200px 0;
}
.index .row-article h2{
    padding: 0 0 0 0;
    font-size: 33px;
    font-weight: 400;
    line-height: 1;
    color: #333;
}
.index .row-article ul{
    background-color: transparent;
    width: 100%;
    overflow: hidden;
    margin: 10px 0 0;
    padding: 30px 0;
}
.index .row-article ul li{
    background-color: transparent;
    width: 33.33%;
    float: left;
    margin: 20px 0 0;
}
.index .row-article ul li .article-wrap{
    background-color: #fff;
    width: 90%;
    margin: 0 auto;
    border: 1px solid #eee;
    transition: all 300ms ease;
}
.index .row-article ul li .article-wrap:hover{
    width: 90%;
    border: 1px solid #e1e2e8;
    box-shadow: 0 10px 20px 0px #d1d2d8;
    margin: -10px auto 10px;
}
.index .row-article ul li .article-wrap .thumb-pic{
    background-color: #333;
    height: 200px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover !important;
}
.index .row-article ul li .article-wrap .thumb-pic.article-1{
    background: linear-gradient(145deg, rgba(255, 252, 0, 0), rgba(254, 189, 0, 0)), url("../img2/article/article-1.jpeg");
}
.index .row-article ul li .article-wrap .thumb-pic.article-2{
    background: linear-gradient(145deg, rgba(255, 252, 0, 0), rgba(254, 189, 0, 0)), url("../img2/article/article-2.jpeg");
}
.index .row-article ul li .article-wrap .thumb-pic.article-3{
    background: linear-gradient(145deg, rgba(255, 252, 0, 0), rgba(254, 189, 0, 0)), url("../img2/article/article-3.jpeg");
}
.index .row-article ul li .article-wrap .thumb-pic.article-4{
    background: linear-gradient(145deg, rgba(255, 252, 0, 0), rgba(254, 189, 0, 0)), url("../img2/article/article-4.jpg");
}
.index .row-article ul li .article-wrap .thumb-pic.article-5{
    background: linear-gradient(145deg, rgba(255, 252, 0, 0), rgba(254, 189, 0, 0)), url("../img2/article/article-5.jpg");
}
.index .row-article ul li .article-title-wrap{
    padding: 15px;
}
.index .row-article ul li h4{
    font-size: 20px;
    background-color: #fff;
    color: #555;
    padding: 0;
    line-height: 25px;
    height: 50px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-align: left;
    -webkit-line-clamp: 2;
}
/**********************************Index row-b ********************************************/
.index .row-b{
    background-color: #fff;
    background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .6)), url("../img2/common/bg4.png");
    background-repeat: no-repeat;
    background-position: center 0%;
    background-size: 100%;
    color: #444;
}
.index .row-b .container{
    padding: 140px 0 150px 0;
}
.index .row-b h2{
    padding: 0 0 0 0;
    font-size: 33px;
    font-weight: 400;
    line-height: 1;
    color: #333;
}
.index .row-b h3{
    padding: 0 0 0 0;
    font-size: 23px;
    font-weight: 400;
    line-height: 1;
}
.index .row-b p{
    margin: 20px 0 0 0;
    font-size: 18px;
    font-weight: 400;
    padding: 0 10%;
}
.index .row-b p span{
    font-size: 22px;
}
.index .row-b ul{
    width: 100%;
    display: table;
    margin: 50px auto 0;
}
.index .row-b ul li{
    background-color: transparent;
    float: left;
    width: 33%;
    height: 78px;
    background-repeat: no-repeat;
    background-position: 42px 15px;
    background-size: 34px;
    margin: 0 0 20px 0;
    display: table;
    padding: 0 0 0 63px;
    background-image: url("../img2/common/check.png");
    text-align: left;
}

/********************************** Footer ********************************************/
.footer.container-fluid{
    background-image: url("../img2/common/foot-cloud.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: transparent;
    color: #444;
    position: absolute;
    bottom: 0;
    z-index: 1;
}
.footer .container{
    padding: 180px 0 30px;
    font-size: 13px;
    display: table;
}
.footer .left{
    float: left;
    width: 91%;
    text-align: left;
}
.footer .right{
    margin: 0 0 0 91%;
    text-align: left;
}
.footer .left p{
    margin: 10px 0 0;
}
.footer .right p{
    color: #fff;
    margin: 0;
    position: relative;
    font-weight: 400;
}
.footer nav{
    margin: 0 0 50px 0;
}
.footer nav a{
    color: #555;
    margin: 0 12px;
    position: relative;
    font-weight: 400;
    font-size: 15px;
}
.footer nav a:active, .footer nav a:hover{
    color: #ff8205;
}
.footer nav a.first{
    margin: 0 12px 0 0 !important;
}
.footer nav a.last{
    margin: 0 0 0 12px !important;
}
.footer .app-dl-btn{
    background-color: transparent;
    width: 150px;
    height: 46px;
    display: inline-block;
    background-image: url("../img2/common/icon-set.svg");
    background-repeat: no-repeat;
    margin: 0 5px -13px;
    border-radius: 8px;

}
.footer .app-dl-btn.ios{
    background-position: -1px -49px;
    background-size: 258px;
    margin-left: 75px;
}
.footer .app-dl-btn.android{
    background-position: -1px -1px;
    background-size: 258px;
}
.footer .mail-to{
    color: #fff;
    margin: 0 12px;
    position: relative;
    font-weight: 400;
    font-size: 13px;
}
.footer .mail-to:active, .footer .mail-to:hover{
    color: #51befb;
}
.footer .wx-qrcode{
    max-width: 80px;
    max-height: 80px;
    margin: 5px 0 0 0;
    padding: 2px;
    background-color: #fff;
}
/**********************************Terms ********************************************/
.terms .row-1{
    background: linear-gradient(145deg, rgba(255, 242, 0, 1), rgba(254, 209, 0, 1)), url("");
    color: #555;
}
.terms .row-1 .container{
    padding: 118px 100px 168px 100px;
}
.terms .row-1 .top-bar{
    background-color: #00c1de;
    background-image: linear-gradient(-225deg, rgba(254, 242, 0, 1) 0, rgba(254, 179, 0, 1) 100%);
    width: 100%;
    height: 3px;
}
.terms .row-1 article{
    background-color: #fbfbfd;
    padding: 50px 0;
    box-sizing: border-box;
}
.terms .row-1 h2{
    padding: 0 60px 0;
    font-size: 36px;
    font-weight: 400;
    line-height: 1.5;
    margin: 0 0 50px 0;
    font-family: Questrial;
    color: #333;
}
.terms .row-1 h3{
    padding: 0 60px 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
    margin: 25px 0 0 0;
    font-family: Questrial;

}
.terms .row-1 ul{
    text-align: left;
    list-style: disc;
    padding: 0 60px 0 90px;
    line-height: 1.5;
    margin: 10px 0 20px;
}
.terms .row-1 ul ul{
    text-align: left;
    list-style: circle;
    padding: 0 60px 0 30px;
}
.terms .row-1 li{
    margin-bottom: 10px;
}
.terms .row-1 p{
    padding: 0 60px 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    margin: 10px 0 0 0;
    font-family: Questrial;
}
/**********************************Article ********************************************/
.article .row-1{
    background: linear-gradient(145deg, rgba(255, 242, 0, 1), rgba(254, 209, 0, 1)), url("");
    color: #555;
}
.article .row-1 .container{
    padding: 118px 100px 168px 100px;
}
.article .row-1 .top-bar{
    background-color: #00c1de;
    background-image: linear-gradient(-225deg, rgba(254, 242, 0, 1) 0, rgba(254, 179, 0, 1) 100%);
    width: 100%;
    height: 3px;
}
.article .row-1 article{
    background-color: #fbfbfd;
    padding: 50px 0;
    box-sizing: border-box;
}
.article .row-1 h1{
    padding: 0 60px 0;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.5;
    margin: 0 0 20px 0;
    color: #333;
    text-align: left;
}
.article .row-1 .article-pic{
    width: 100%;
    margin: 0 0 10px;
    padding: 0 60px;
}
.article .row-1 h3{
    padding: 0 60px 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
    margin: 25px 0 0 0;
    font-family: Questrial;
}
.article .row-1 h3 span{
    font-size: 30px;
    margin: 0 10px 0 0;
    color: #ffbd05;
}
.article .row-1 ul{
    text-align: left;
    list-style: disc;
    padding: 0 60px 0 90px;
    line-height: 1.5;
    margin: 10px 0 20px;
}
.article .row-1 ul ul{
    text-align: left;
    list-style: circle;
    padding: 0 60px 0 30px;
}
.article .row-1 li{
    margin-bottom: 10px;
}
.article .row-1 p{
    padding: 0 60px 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    margin: 15px 0 0 0;
}
.article .row-1 .suggested-articles{
    background-color: #fbfbfd;
    padding: 50px 0;
    box-sizing: border-box;
    margin: 0;
}
.article .row-1 .suggested-articles h2{
    text-align: left;
    padding: 0 60px 0;
}
.article .row-1 .suggested-articles ul{
    background-color: transparent;
    width: 100%;
    overflow: hidden;
    margin: 10px 0 0;
    padding: 30px 60px;
}
.article .row-1 .suggested-articles ul li{
    background-color: transparent;
    width: 100%;
    float: left;
}
.article .row-1 .suggested-articles ul li .article-wrap{
    background-color: #fff;
    width: 100%;
    margin: 0 auto;
    border: 1px solid #eee;
    transition: all 300ms ease;
}
.article .row-1 .suggested-articles ul li .article-wrap:hover{
    border: 1px solid #e1e2e8;
    box-shadow: 0 10px 20px 0px #d1d2d8;
    margin: 0px auto 0;
}
.article .row-1 .suggested-articles ul li .article-wrap .thumb-pic{
    background-color: #333;
    height: 80px;
    width: 100px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover !important;
    float: left;

}
.article .row-1 .suggested-articles ul li .article-wrap .thumb-pic.article-1{
    background: linear-gradient(145deg, rgba(255, 252, 0, 0), rgba(254, 189, 0, 0)), url("../img2/article/article-1.jpeg");
}
.article .row-1 .suggested-articles ul li .article-wrap .thumb-pic.article-2{
    background: linear-gradient(145deg, rgba(255, 252, 0, 0), rgba(254, 189, 0, 0)), url("../img2/article/article-2.jpeg");
}
.article .row-1 .suggested-articles ul li .article-wrap .thumb-pic.article-3{
    background: linear-gradient(145deg, rgba(255, 252, 0, 0), rgba(254, 189, 0, 0)), url("../img2/article/article-3.jpeg");
}
.article .row-1 .suggested-articles ul li .article-wrap .thumb-pic.article-4{
    background: linear-gradient(145deg, rgba(255, 252, 0, 0), rgba(254, 189, 0, 0)), url("../img2/article/article-4.jpg");
}
.article .row-1 .suggested-articles ul li .article-wrap .thumb-pic.article-5{
    background: linear-gradient(145deg, rgba(255, 252, 0, 0), rgba(254, 189, 0, 0)), url("../img2/article/article-5.jpg");
}
.article .row-1 .suggested-articles ul li .article-title-wrap{
    padding: 15px 50px 15px 15px;
    margin: 0 0 0 100px;
    background: linear-gradient(145deg, rgba(255, 252, 0, 0), rgba(254, 189, 0, 0)), url("../img2/common/arrow-right.png");
    background-repeat: no-repeat;
    background-position: 99% center;
    background-size: 25px;

}
.article .row-1 .suggested-articles ul li h4{
    font-size: 17px;
    background-color: #fff;
    color: #555;
    padding: 0;
    line-height: 25px;
    height: 50px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-align: left;
    -webkit-line-clamp: 2;
}

/********************************** FAQ ********************************************/
.terms .row-1 .container{
    padding: 118px 100px 168px 100px;
    color: #555;
}

.faq .row-1{
    background: linear-gradient(145deg, rgba(255, 252, 0, 1), rgba(254, 219, 0, 1)), url("");
    color: #555;
}
.faq .row-1 .container{
    padding: 68px 100px 28px 100px;
}
.faq .row-1 article{
    /*
    background-color: rgba(255,255,255,1);
    */
    padding: 10px 0;
}
.faq .row-1 h2{
    padding: 0 60px 0;
    font-size: 56px;
    font-weight: 400;
    line-height: 1.5;
    margin: 50px 0 0;
    color: #333;
}
.faq .row-2 .container{
    width: 700px;
}
.faq .row-2 {
    background-color: #f1f2f8;
    padding: 35px 0 0px 0;
}
.faq .row-2.last {
    padding: 35px 0 165px 0;
}
.faq .row-2 .container ul{
    margin:0 0 20px;
}
.faq .row-2 .sub-title{
    text-align: left;
    padding: 10px 0;
    font-size: 18px;
    color: #555;
}
.faq .row-2 .question{
    background: linear-gradient(145deg, rgba(255, 232, 0, 1), rgba(254, 199, 0, 1)), url("");
    color: #555;
    min-height: 46px;
    position: relative;
    margin: 5px 0 0 0;
    cursor: pointer;
    text-align: left;
    border-radius: 20px;
}
.faq .row-2 .question.first{
    margin: 0 0 0 0;
}
.faq .row-2 .question h3 {
    padding: 12px 53px 12px 53px;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.6;
    color: #333;
}
.faq .row-2 .question .arrow{
    width: 0;
    height: 0;
    border-width: 6px;
    border-style: solid;
    border-color: #398FCB transparent transparent transparent;
    position: absolute;
    top: 21px;
    right: 15px;
    transition: all 300ms ease;
}
.faq .row-2 .question aside{
    color: #3990CC;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.4;
    float: left;
    padding: 12px 0 12px 25px;
}
.faq .row-2 .answer{
    background-color: transparent;
    color: #555;
    display: none;
}
.faq .row-2 .answer aside{
    color: #51befb;
    font-size: 27px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1;
    float: left;
    padding: 32px 0 0 55px;
}
.faq .row-2 .answer p {
    padding: 30px 53px 45px 95px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.05em;
    max-width: 90%;
    text-align: left;
    color: #555;
}
.faq .row-2 .answer a {
    color: #51befb;
    margin: 0 3px;
}
.faq .row-2 .answer a:hover {
    color: #5496fb;
}
/********************************** Login ********************************************/

.login .row-1{
    background: linear-gradient(145deg, rgba(255, 252, 0, 1), rgba(254, 219, 0, 1)), url("");
    color: #555;
}
.login .row-1 .container{
    padding: 68px 100px 28px 100px;
}
.login .row-1 article{
    /*
    background-color: rgba(255,255,255,1);
    */
    padding: 10px 0;
}
.login .row-1 h2{
    padding: 0 60px 0;
    font-size: 56px;
    font-weight: 400;
    line-height: 1.5;
    margin: 50px 0 0;
    color: #333;
}
.login .row-2 .container{
    width: 290px;
    margin: 0 auto 50px;
}
.login .row-2 {
    background-color: #fff;
    padding: 35px 0 0px 0;
}
.login .row-2.last {
    padding: 35px 0 165px 0;
}

.login .row-2 .sub-title{
    text-align: left;
    padding: 10px 0;
    font-size: 18px;
    color: #555;
}
.login .row-2 .field{
    padding: 10px 0;

}
.login .row-2 .field input{
    background-color: #fff;
    border: none;
    border-bottom: 1px solid #ccc;
    padding: 12px 0 8px;
    width: 100%;
}
.login .row-2 .field input::placeholder{
    color: #ddd;
}
.login .row-2 .field .error{
    font-size: 12px;
    text-align: left;
    color: #f7664a;
    width: 100%;
    margin: 3px 0 5px;
}
.login .row-2 .field .tip{
    font-size: 12px;
    text-align: left;
    color: #ffd439;
    width: 100%;
    margin: 3px 0 5px;
}
.login .row-2 .agreement-p{
    color: #888;
    font-size: 11px;
    text-align: left;
    margin: 10px 0 0;
}
.login .row-2 .agreement-p a{
    color: rgba(255, 182, 0, 1);
}

.login .row-2 .login-btn{
    margin: 20px 0 0;
    text-align: center;
    width: 100%;
    font-size: 16px;
    font-weight: 400;
    color: #555;
    letter-spacing: 0.02em;
    border-radius: 10px;
    background-color: rgba(255, 242, 0, 1);
    background-image: linear-gradient(-225deg, rgba(255, 252, 0, 1) 0, rgba(255, 212, 0, 1) 100%);
    line-height: 36px;
    display: inline-block;
    transition: all 300ms ease;
    cursor: pointer;
    border: none;
}
.login .row-2 .login-btn:hover, .login .row-2 .login-btn:active{
    background-color: rgba(255, 222, 0, 1);
    background-image: linear-gradient(-225deg, rgba(255, 242, 0, 1) 0, rgba(255, 202, 0, 1) 100%);
}
.login .bottom-nav-box a{
    color: rgba(255, 182, 0, 1);
    margin: 30px 15px 0;
    display: inline-block;
}
.login .row-2 .result-p{
    color: #555;
    font-size: 16px;
    margin: 50px 0 0;
}
.login .row-1 .tick-ico{
    background-image: url("../img2/common/check-2.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 96px;
    display: inline-block;
    height: 96px;
    width: 96px;
    padding: 0;
    margin: 35px auto 0;
}
.login .row-2 .send-ico{
    background-image: url("../img2/common/send.svg");
    background-repeat: no-repeat;
    background-position: center center;
    display: inline-block;
    vertical-align: top;
    padding: 0;
    margin: 0 6px 0 0;
    background-size: 34px;
    height: 24px;
    width: 34px;
    padding: 0;
}
.login .row-2 .error-ico{
    background-image: url("../img2/common/danger.svg");
    background-repeat: no-repeat;
    background-position: center center;
    display: inline-block;
    vertical-align: top;
    padding: 0;
    margin: 0;
    width: 34px;
    padding: 0;
    background-size: 22px;
    height: 22px;
}
.login .row-1 .cross-ico{
    background-image: url("../img2/common/cancel.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 96px;
    display: inline-block;
    height: 96px;
    width: 96px;
    padding: 0;
    margin: 35px auto 0;
}

/********************************** account ********************************************/
.account *{
    transition: all 300ms ease;
}
.account{
    color: #555;
}
.account .row-1{
    background: linear-gradient(145deg, rgba(255, 252, 0, 1), rgba(254, 219, 0, 1)), url("");
    color: #555;
}
.account .row-1 .container{
    padding: 68px 100px 28px 100px;
}
.account .row-1 article{
    /*
    background-color: rgba(255,255,255,1);
    */
    padding: 10px 0;
}
.account .row-1 h2{
    padding: 0 60px 0;
    font-size: 56px;
    font-weight: 400;
    line-height: 1.5;
    margin: 50px 0 0;
    color: #333;
}
.account .row-2 .container{
    width: 695px;
    margin: 0 auto 50px;
}
.account .row-2 {
    background-color: #f1f2f8;
    padding: 35px 0 0 0;
}
.account .row-2.last {
    padding: 35px 0 95px 0;
}
.account .content-box{
    width: 100%;
    border: 1px solid #ddd;
    background-color: #fff;
    overflow: hidden;
    height: 500px;
}
.account .content-box .left{
    width: 30%;
    float: left;
    border-right: 1px solid #ddd;
    height: 100%;
}
.account .content-box .left li{
    background-color: #fff;
    padding: 15px 40px;
    text-align: left;
    border-left: 3px solid #fff;
    color: #888;
}
.account .content-box .left li.selected, .account .content-box .left li.selected:hover, .account .content-box .left li.selected:active{
    background-color: #f8f8fb;
    border-left: 3px solid #666;
    color: #444;
}
.account .content-box .left li:hover, .account .content-box .left li:active{
    background-color: #f8f8fb;
    border-left: 3px solid #f8f8fb;
}
.account .content-box .left a{
    color: #444;
}
.account .content-box .right{
    width: 70%;
    float: left;
}
.account .content-box .right .wrap{
    width: 100%;
    padding: 30px 50px;
    text-align: left;
}
.account .content-box .right .wrap.accountdetail .email {
    padding: 50px 0 0;
    font-size: 14px;
    background-image: url("../img2/common/user-icon-g.png");
    background-repeat: no-repeat;
    background-position: -5px top;
    background-size: 50px;
}
.account .content-box .right .wrap.accountdetail .email .verified{
    font-size: 12px;
    color: #aaa;
    margin: 0 0 0 5px;
}
.account .content-box .right .wrap.accountdetail h2 {
    font-size: 14px;
    font-weight: 400;
    margin: 20px 0 0;
}
.account .content-box .right .wrap.accountdetail h2 span {
    font-size: 20px;
    margin: 0 5px;
    color: #333;
    font-weight: 400;
}
.account .content-box .right .wrap.accountdetail ul {
    margin: 20px 0 0;
    width: 100%;
}
.account .content-box .right .wrap.accountdetail ul li {
    margin: 10px 0 0;
    width: 100%;
    overflow: hidden;
}
.account .content-box .right .wrap.accountdetail ul li .d1{
    width: 30%;
    float: left;
    font-size: 11px;
    line-height: 30px;
}
.account .content-box .right .wrap.accountdetail ul li .d2{
    width: 70%;
    float: left;
    font-size: 15px;
    line-height: 30px;
    color: #444;
}
.account .content-box .right .wrap.accountdetail ul li .renew-btn{
    border: none;
    padding: 1px 9px;
    border-radius: 20px;
    color: #fff;
    font-size: 11px;
    background-color: #ff3263;
    background-image: linear-gradient(140deg, #ff3263, #ff9305);
    cursor: pointer;
    margin: 0 10px 6px;
    display: inline-block;
    text-align: center;
    line-height: 1.7;
    vertical-align: bottom;
}
.account .content-box .right .wrap.accountdetail ul li .renew-btn:hover, .account .content-box .right .wrap.accountdetail ul li .renew-btn:active{
    background-color: #f12f5d;
    background-image: linear-gradient(140deg, #f12f5d, #f58d05);
}

.account .content-box .right .wrap.changepassword{
    background-color: #fff;
    width: 60%;
}
.account .content-box .right .wrap.changepassword .sub-heading{
    text-align: left;
    padding: 0 0 5px;
    font-size: 16px;
    color: #555;
}
.account .content-box .right .wrap.changepassword .field{
    padding: 5px 0;

}
.account .content-box .right .wrap.changepassword .field input{
    background-color: #fff;
    border: none;
    border-bottom: 1px solid #ccc;
    padding: 10px 0 8px;
    width: 100%;
    font-size: 13px;
}
.account .content-box .right .wrap.changepassword .field input::placeholder{
    color: #ddd;
}
.account .content-box .right .wrap.changepassword .field .error{
    font-size: 12px;
    text-align: left;
    color: #f7664a;
    width: 100%;
    margin: 3px 0 5px;
}
.account .content-box .right .wrap.changepassword .field .tip{
    font-size: 12px;
    text-align: left;
    color: #ffd439;
    width: 100%;
    margin: 3px 0 0px;
}

.account .content-box .right .wrap.changepassword .login-btn{
    margin: 10px 0 0;
    text-align: center;
    width: 80px;
    font-size: 13px;
    font-weight: 400;
    color: #555;
    letter-spacing: 0.02em;
    border-radius: 10px;
    background-color: rgba(255, 242, 0, 1);
    background-image: linear-gradient(-225deg, rgba(255, 252, 0, 1) 0, rgba(255, 212, 0, 1) 100%);
    line-height: 26px;
    display: inline-block;
    transition: all 300ms ease;
    cursor: pointer;
    border: none;
}
.account .content-box .right .wrap.changepassword .login-btn:hover, .login .row-2 .login-btn:active{
    background-color: rgba(255, 222, 0, 1);
    background-image: linear-gradient(-225deg, rgba(255, 242, 0, 1) 0, rgba(255, 202, 0, 1) 100%);
}
.account .content-box .right .wrap.orderhistory{
    height: 498px;
    overflow: scroll;
}
.account .content-box .right .wrap.orderhistory .sub-heading{
    text-align: left;
    padding: 0 0 5px;
    font-size: 16px;
    color: #555;
}
.account .content-box .right .wrap.orderhistory ul{
    border-top: 1px solid #eee;
    margin: 10px 0 0;
}
.account .content-box .right .wrap.orderhistory ul li{
    margin: 0px 0 0;
    background-color: #fff;
    padding: 15px 0px;

    border-bottom: 1px solid #eee;

}
.account .content-box .right .wrap.orderhistory .upper{
    overflow: hidden;
    line-height: 16px;
    font-size: 11px;
    font-weight: 700;

}
.account .content-box .right .wrap.orderhistory .lower{
    overflow: hidden;
    line-height: 10px;
    font-size: 9px;
    color: #888;
}
.account .content-box .right .wrap.orderhistory .d1{
    float: left;
    width: 24%;
 }
.account .content-box .right .wrap.orderhistory .d2{
    float: left;
    width: 22%;
}
.account .content-box .right .wrap.orderhistory .d3{
    float: left;
    width: 20%;
}
.account .content-box .right .wrap.orderhistory .d4{
    float: left;
    width: 14%;
}
.account .content-box .right .wrap.orderhistory .d5{
    float: right;
    width: 20%;
    text-align: right;
}
.account .content-box .right .wrap.orderhistory .d5 .tick-ico{
    background-color: transparent;
    width: 10px;
    height: 10px;
    display: inline-block;
    background-image: url("../img2/common/checked-green.png");
    background-size: 10px;
    background-position: center top;
    background-repeat: no-repeat;
    vertical-align: top;
    margin: 0 3px 0 0;
}
.account .content-box .right .wrap.orderhistory .upper .d2{
    font-size: 13px;
    margin: -2px 0 0;
}
.account .content-box .right .wrap.orderhistory .lower .d5{
    color: #79c669;
}

/********************************** Card payment ********************************************/

.cardpayment .row-1{
    background: linear-gradient(145deg, rgba(255, 252, 0, 1), rgba(254, 219, 0, 1)), url("");
    color: #555;
}
.cardpayment .row-1 .container{
    padding: 68px 100px 28px 100px;
}
.cardpayment .row-1 article{
    /*
    background-color: rgba(255,255,255,1);
    */
    padding: 10px 0;
}
.cardpayment .row-1 h2{
    padding: 0 60px 0;
    font-size: 56px;
    font-weight: 400;
    line-height: 1.5;
    margin: 50px 0 0;
    color: #333;
}
.cardpayment .row-1 span{
    font-size: 15px;
}
.cardpayment .row-2 .container{
    width: 366px;
    margin: 0 auto 50px;
}
.cardpayment .row-3 {
    background-color: #666;
    padding: 5px 0;
    font-size: 12px;
    color: #eee;
}
.cardpayment .row-3 .lock-ico{
    background-color: transparent;
    width: 20px;
    vertical-align: bottom;
    height: 18px;
    display: inline-block;
    background-image: url("../img2/common/icon-set.svg");
    background-repeat: no-repeat;
    margin: 0 4px 0 0;
    border-radius: 0;
    background-position: -157px -128px;
    background-size: 200px;
}
.cardpayment .row-2 {
    background-color: #fbfbfd;
    padding: 35px 0 0px 0;
}
.cardpayment .row-2.last {
    padding: 35px 0 165px 0;
}
.cardpayment .row-2 .label{
    font-size: 13px;
    color: #aaa;
    text-align: left;
    margin: 0 0 5px;
}
.cardpayment .row-2 .order-summary{
    overflow: hidden;
    font-size: 14px;
    color: #555;
    border-radius: 6px;
    margin: 0 0 20px;
    background: transparent;
    border: 1px solid #aaa;
    padding: 15px 20px
}
.cardpayment .row-2 .order-summary .d1{
    float: left;
    width: 50%;
    line-height: 20px;
    text-align: left;
    font-size: 16px;
}
.cardpayment .row-2 .order-summary .d2{
    width: 50%;
    float: left;
    line-height: 20px;
    text-align: right;


}
.cardpayment .row-2 .sub-title{
    text-align: left;
    padding: 10px 0;
    font-size: 16px;
    color: #555;
}
.cardpayment .row-2 .sub-title .cards{
    padding: 0 0 5px 10px;
    display: inline-block;

}
.cardpayment .row-2 .sub-title .cards .card-1{
    background-color: transparent;
    background-position: -152px -148px;
    background-size: 228px;
    height: 18px;
    width: 27px;
    vertical-align: bottom;
    display: inline-block;
    background-image: url("../img2/common/icon-set.svg");
    background-repeat: no-repeat;
    margin: 0 4px 0 0;
    border-radius: 0;
}
.cardpayment .row-2 .sub-title .cards .card-2{
    background-color: transparent;
    background-position: -72px -148px;
    background-size: 228px;
    height: 18px;
    width: 27px;
    vertical-align: bottom;
    display: inline-block;
    background-image: url("../img2/common/icon-set.svg");
    background-repeat: no-repeat;
    margin: 0 4px 0 0;
    border-radius: 0;
}
.cardpayment .row-2 .sub-title .cards .card-3{
    background-color: transparent;
    background-position: -126px -148px;
    background-size: 228px;
    height: 18px;
    width: 27px;
    vertical-align: bottom;
    display: inline-block;
    background-image: url("../img2/common/icon-set.svg");
    background-repeat: no-repeat;
    margin: 0 4px 0 0;
    border-radius: 0;
}
.cardpayment .row-2 .sub-title .cards .card-4{
    background-color: transparent;
    background-position-x: -163px;
    background-position-y: -54px;
    background-size: 197px;
    height: 18px;
    width: 32px;
    vertical-align: bottom;
    display: inline-block;
    background-image: url("../img2/common/icon-set.svg");
    background-repeat: no-repeat;
    margin: 0 4px 0 0;
    border-radius: 0;
}
.cardpayment #payment-form button{
    border: none;
    padding: 10px;
    border-radius: 7px;
    color: #fff;
    font-size: 16px;
    width: 100%;
    background-color: #ee477c;
    background-image: linear-gradient(140deg, #ff3263, #ff9305);
    cursor: pointer;
    margin: 30px 0 10px;
}
.cardpayment #payment-form button:hover, .cardpayment #payment-form button:active{
    background-color: #f12f5d;
    background-image: linear-gradient(140deg, #f12f5d, #f58d05);
}
.cardpayment #payment-form .p-1{
    font-size: 12px;
    color: #aaa;
    text-align: left;
    padding: 0 8px;
}
.cardpayment #payment-form #card-errors{
    color: #ff586e;
    text-align: left;
    padding: 5px 0 0 3px;
}


    /**
     * The CSS shown here will not be introduced in the Quickstart guide, but shows
     * how you can use CSS to style your Element's container.
     */
.cardpayment .row-2 .StripeElement {
    background-color: white;
    height: 40px;
    padding: 10px 12px;
    border-radius: 4px;
    border: 1px solid transparent;
    box-shadow: 0 1px 3px 0 #e6ebf1;
    -webkit-transition: box-shadow 150ms ease;
    transition: box-shadow 150ms ease;
}

.cardpayment .row-2 .StripeElement--focus {
    box-shadow: 0 1px 3px 0 #cfd7df;
}

.cardpayment .row-2 .StripeElement--invalid {
    border-color: #fa755a;
}

.cardpayment .row-2 .StripeElement--webkit-autofill {
    background-color: #fefde5 !important;
}


/********************************** Download ********************************************/
.download .row-1{
    background: linear-gradient(145deg, rgba(255, 242, 0, 1), rgba(254, 209, 0, 1)), url("");
    color: #555;
}
.download .row-1 .container{
    padding: 68px 0 188px 0;
}
.download .row-1 article{
    /*
 *     background-color: rgba(255,255,255,1);
 *         */
}
.download .row-1 h2{
    font-size: 36px;
    font-weight: 400;
    line-height: 1.5;
    margin: 0 0 0;
    padding: 40px 0 20px;
    color: #333;
}
.download .row-1 ul{
    width: 100%;
    overflow: hidden;
}
.download .row-1 ul .grid{
    width: 25%;
    float: left;
    background-color: transparent;
    padding: 30px 0;

}
.download .row-1 ul .grid .inner-wrap{
    width: 95%;
    background-color: #eee;
    margin: 0 auto;
    border-radius: 12px;
    min-height: 426px;
}
.download .row-1 ul .grid .inner-wrap h3{
    font-size: 20px;
    color: #333;
    font-weight: 400;
    padding: 20px 0 0;
}
.download .row-1 ul .grid .inner-wrap .portrait{
    height: 200px;
    background-repeat: no-repeat;
}
.download .row-1 ul .grid .inner-wrap .portrait.ios{
    background-image: url("../img2/common/iphone-x-s.png");
    background-size: 80px;
    background-position: bottom center;
}
.download .row-1 ul .grid .inner-wrap .portrait.android{
    background-image: url("../img2/common/android-s.png");
    background-size: 80px;
    background-position: bottom center;
}
.download .row-1 ul .grid .inner-wrap .portrait.mac{
    background-image: url("../img2/common/iMac-s.png");
    background-size: 160px;
    background-position: bottom center;
}
.download .row-1 ul .grid .inner-wrap .portrait.windows{
    background-image: url("../img2/common/windows-s.png");
    background-size: 150px;
    background-position: bottom center;
}
.download .row-1 ul .grid .inner-wrap .btn-bar{
    text-align: center;
    padding: 20px 0;
}
.download .row-1 ul .grid .inner-wrap .btn-bar .app-dl-btn{
    background-color: transparent;
    width: 150px;
    height: 46px;
    display: inline-block;
    background-image: url("../img2/common/icon-set.svg");
    background-repeat: no-repeat;
    margin: 10px 5px 0;
    border-radius: 8px;
    vertical-align: bottom;
}
.download .row-1 ul .grid .inner-wrap .btn-bar .app-dl-btn.ios{
    background-position: -1px -49px;
    background-size: 258px;
}
.download .row-1 ul .grid .inner-wrap .btn-bar .app-dl-btn.android{
    background-position: -1px -1px;
    background-size: 258px;
}
.download .row-1 ul .grid .inner-wrap .btn-bar .apk-dl-btn{
    background-color: rgb(40,43,48);
    width: 150px;
    display: inline-block;
    color: #eee;
    border-radius: 8px;
    vertical-align: middle;
    padding: 13px;
    margin: 10px 0 0;
}
.download .row-1 ul .grid .inner-wrap .btn-bar .no-dl-btn{
    background-color: #999;
    width: 150px;
    display: inline-block;
    color: #eee;
    border-radius: 8px;
    vertical-align: middle;
    padding: 13px;
    margin: 10px 0 0;
}



    /********************************** Tutorial ********************************************/
.tutorial .row-1{
    background: linear-gradient(145deg, rgba(255, 242, 0, 1), rgba(254, 209, 0, 1)), url("");
    color: #555;
}
.tutorial .row-1 .container{
    padding: 68px 0 138px 0;
}
.tutorial .row-1 article{
    /*
    background-color: rgba(255,255,255,1);
    */
}
.tutorial .row-1 h2{
    font-size: 36px;
    font-weight: 400;
    line-height: 1.5;
    margin: 0 0 0;
    padding: 40px 0 20px;
    color: #333;
}
.tutorial .row-1 h3{
    font-size: 26px;
    font-weight: 400;
    line-height: 1.5;
    margin: 0 0 0;
    padding: 40px 0 0px;
    color: #333;
}
.tutorial .row-1 h3 span{
    font-size: 35px;
}
.tutorial .row-1 .go-to-buy-link{
    color: #1c90f6;
    margin: 0 0 0 20px;
}
.tutorial .row-1 .go-to-buy-link:hover, .tutorial .row-1 .go-to-buy-link:active{
    color: #00c1de;
}
.tutorial .row-1 ul{
    margin: 0 auto 0;
    text-align: left;
    width: 70%;
}
.tutorial .row-1 ul .wrap{
    width: 50%;
    float: left;
}
.tutorial .row-1 ul .wrap.remarks{
    width: 100%;
    float: none;
}
.tutorial .row-1 ul li{
    border-bottom: 1px solid #ecc905;
    padding: 30px 0 30px 50px;
    display: table;
    width: 100%;
}
.tutorial .row-1 ul li .login-data{
    font-size: 16px;
    color: #333;
}
.tutorial .row-1 ul li .app-dl-btn{
    background-color: transparent;
    width: 150px;
    height: 46px;
    display: inline-block;
    background-image: url("../img2/common/icon-set.svg");
    background-repeat: no-repeat;
    margin: 25px 5px 0;
    border-radius: 8px;

}
.tutorial .row-1 ul li .app-dl-btn.ios{
    background-position: -1px -49px;
    background-size: 258px;
}
.tutorial .row-1 ul li.notice{
    border-bottom: none;
    padding: 15px 30px;
    background-color: #00c1de;
    background-image: linear-gradient(-225deg, #00c1de 0, #1c90f6 100%);
    margin: 20px 0 0;
    color: #fff;
    border-radius: 10px;
}
.tutorial .row-1 ul li.notice p{
	margin: 0;    
}
.tutorial .row-1 ul li.notice span{
    font-size: 20px;
    margin: 0 3px;
}
.tutorial .row-1 ul li .price{
    font-size: 20px;
    margin: 0 3px;
}
.tutorial .row-1 ul li.notice a{
    color: #eee005;
}
.tutorial .row-1 ul li.notice a:hover{
    color: #ffff05;
}
.tutorial .row-1 ul li.last{
    border-bottom: none;
}
.tutorial .row-1 ul label{
    font-size: 30px;
    font-weight: 700;
    color: #1c90f6;
}
.tutorial .row-1 ul p{
    margin: 6px 0 0 0;
}
.tutorial .row-1 ul p.small-text{
    font-size: 13px;
    margin: 10px 0 0 0;
    color: #aaa;
}
.tutorial .row-1 ul a{
    margin: 30px 0 0 0;
}
.tutorial .row-1 ul a.win{
     width: 158px;
    font-size: 17px;
}
.tutorial .row-1 ul a.net{
     width: 248px;
    font-size: 17px;
    display: block;
}
.tutorial .row-1 ul a.go-microsoft{
     color: #f60;
     font-size: 15px;
     margin: 10px 0 0;
     display: block;
}
.tutorial .row-1 ul a.go-microsoft:hover{
     color: #f42b69;
     font-size: 15px;
     margin: 10px 0 0;
     display: block;
}
.tutorial .row-1 ul a.go-btn{
     color: #1c90f6;
     font-size: 15px;
     margin: 10px 0 0;
}
.tutorial .row-1 ul a.go-btn:hover{
     color: #00c1de;
     font-size: 15px;
     margin: 10px 0 0;
}
.tutorial .row-1 ul li .p-tips{
    font-size: 13px;
    color: #a9adb5;
    margin: 20px 0 0;
}
.tutorial .row-1 ul a.win10{
    margin: 30px 0 0 8px;
}
.tutorial .row-1 ul .tutorial-pic{
    width: 220px;
    height: 220px;
    border: 0px solid #585E6F;
    border-radius: 10px;
    box-shadow: 0 6px 15px 0 #cca304;
    margin: 0 0 0 54%;
    background-color: #fff;
}
.tutorial .row-1 ul .tutorial-pic.iphone-hkstore-s1 {
    background-image: url("../img2/common/iphone-hkstore-s1.jpg");
    background-repeat: no-repeat;
    background-position: center 48%;
    background-size: 220px;
}
.tutorial .row-1 ul .tutorial-pic.iphone-hkstore-s2 {
    background-image: url("../img2/common/iphone-hkstore-s2.jpg");
    background-repeat: no-repeat;
    background-position: center 18%;
    background-size: 220px;
}
.tutorial .row-1 ul .tutorial-pic.iphone-hkstore-s3 {
    background-image: url("../img2/common/iphone-hkstore-s3.jpg");
    background-repeat: no-repeat;
    background-position: center 48%;
    background-size: 220px;
}
.tutorial .row-1 ul .tutorial-pic.iphone-hkstore-s4 {
    background-image: url("../img2/common/anivpn-ios-app-search.jpg");
    background-repeat: no-repeat;
    background-position: center 7%;
    background-size: 220px;
    height: 228px;
}
.tutorial .row-1 ul .tutorial-pic.iphone-hkstore-s5 {
    background-image: url("../img2/common/iphone-hkstore-s5.jpg");
    background-repeat: no-repeat;
    background-position: center 48%;
    background-size: 220px;
}

.tutorial .row-1 ul .tutorial-pic.iphone-changehkstore-s1 {
    background-image: url("../img2/common/changehkstore-s1.jpg");
    background-repeat: no-repeat;
    background-position: center -12px;
    background-size: 220px;
    height: 346px;
}
.tutorial .row-1 ul .tutorial-pic.iphone-changehkstore-s2 {
    background-image: url("../img2/common/changehkstore-s2.jpg");
    background-repeat: no-repeat;
    background-position: center -12px;
    background-size: 220px;
    height: 346px;
}
.tutorial .row-1 ul .tutorial-pic.iphone-changehkstore-s3 {
    background-image: url("../img2/common/changehkstore-s3.jpg");
    background-repeat: no-repeat;
    background-position: center -12px;
    background-size: 220px;
    height: 346px;
}
.tutorial .row-1 ul .tutorial-pic.iphone-changehkstore-s4 {
    background-image: url("../img2/common/changehkstore-s4.jpg");
    background-repeat: no-repeat;
    background-position: center -12px;
    background-size: 220px;
    height: 346px;
}
.tutorial .row-1 ul .tutorial-pic.iphone-changehkstore-s5 {
    background-image: url("../img2/common/changehkstore-s5.jpg");
    background-repeat: no-repeat;
    background-position: center -12px;
    background-size: 220px;
    height: 346px;
}
/************** Alert modal ******************/
.alert-modal{
    text-align: center;
    color: #585E6F;
    background-color: #fff;
    border-radius: 0;
    overflow: hidden;
    position: relative;
}

.alert-modal header {
    background: #fff;
    padding: 18px 25px;
    position: relative;
}
.alert-modal .body {
    padding: 0 40px 20px;
    text-align: center;
}
.alert-modal .close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 20px;
    height: 20px;
    background-image: url("../img/common/cross.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 20px;
    opacity: 0.4;
    transition: all 300ms ease;
}
.alert-modal .close-btn:hover,.alert-modal .close-btn:active {
    opacity: 0.7;
}
.alert-modal h2{
    padding: 0 0 0 0;
    font-size: 25px;
    font-weight: 400;
    line-height: 1;
    margin: 0;

}
.alert-modal p{
    margin: 5px 0 0 0;
    font-size: 15px;
    font-weight: 400;
}
.alert-modal .tip-1{
    margin: 12px 0 30px 0;
    font-size: 15px;
    font-weight: 400;
}
.alert-modal .email-address{
    margin: 5px 0 0 0;
    font-size: 22px;
    font-weight: 700;
    word-break: break-all;
    padding: 0 15px;
}
.alert-modal ul header{
    background: transparent;
    padding: 0;
}
.alert-modal .wx-qrcode{
    max-width: 190px;
    max-height: 190px;
    margin: 25px 0 0 0;
    padding: 3px;
    background-color: #fff;
}
.alert-modal footer{
    padding: 30px 10px;
}
.alert-modal .button{
    margin: 0 13px;
    width: 169px;
    font-size: 17px;
}
.alert-modal .continue-btn{
    border-radius: 6px;
    font-size: 19px;
    font-weight: 700;
}
.alert-modal .cancel-btn{
    border-radius: 6px;
    background-image: none;
    background-color: transparent;
    border: none;
    color: #666;
}
.alert-modal .cancel-btn:hover, .alert-modal .cancel-btn:active{
    background-image: none;
    background-color: #eee;
    border: none;
    color: #666;
}
/************** modal ******************/

.modal.preview{
    display: none;
    background: rgba(30, 30, 30, .5);
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.popup-modal.buy-modal{
    width: 493px;
    max-width: 493px;
    height: 525px;
    margin: -263px 0 0 -247px;
    position: absolute;
    top: 50%;
    left: 50%;
}
.popup-modal.alert-modal{
    width: 500px;
    max-width: 500px;
    margin: -135px 0 0 -250px;
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
}