/********************* row-s App Screen Shot *********************/
/* iPhone 8 Plus */
@media (max-width:640px) {
.index .row-s .container{
padding: 100px 0 115px 0;
background-size: 194px;
background-repeat: no-repeat;
background-position: 13px 84%;
}
.index .row-s .p-1{
margin: 92px 0 0 0;
font-size: 13px;
padding: 0 0 0 40%;
}
}
/* iPhone 8 */
@media (max-width:375px) {
.index .row-s .container{
padding: 100px 0 115px 0;
background-size: 172px;
background-repeat: no-repeat;
background-position: 9px 72%;
}
.index .row-s .p-1{
margin: 72px 0 0 0;
}
}
/* iPhone SE */
@media (max-width:320px) {
.index .row-s .container{
padding: 100px 0 115px 0;
background-size: 144px;
background-repeat: no-repeat;
background-position: 1px 63%;
}
.index .row-s .p-1{
margin: 38px 0 0 0;
}
}
/********************************************** Mobile Style *************************************************/
@media (max-width:640px){
body{
color: #fff;
letter-spacing: 0.03em;
margin: 0;
font-size: 14px;
/*
font-family: 'Hiragino Sans GB', sans-serif;
*/
font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif;
padding-bottom: 100px;
}
.container-fluid{
min-width: auto;
width: 100%;
margin: 0;
padding: 0 0 0 0;
}
.container{
width: 100%;
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;
}
input{
color: #555;
letter-spacing: 0.03em;
margin: 0;
font-size: 16px;
}
.hide{
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;
}
/**********************************General header ********************************************/
.header{
position: fixed;
top: 0;
z-index: 9999;
}
.header nav{
padding: 50px 0;
float: none;
min-width: auto;
width: 100%;
text-align: center;
background: linear-gradient(145deg, rgba(255, 242, 0, 1), rgba(254, 179, 0, 1)), url("");
position: fixed;
top: 0;
z-index: 999;
display: none;
height: 100%;
}
.header nav.animated{
animation-duration: 300ms;
}
.header.white{
background: linear-gradient(145deg, rgba(255, 242, 0, .9), rgba(254, 229, 0, 0.9)), url("");
}
.header .logo-a{
float: none;
padding: 0;
margin: 0 auto;
background-color: transparent !important;
}
.header nav a, .header nav a.first, .header nav a.last, .myaccount, .selectlang{
display: block;
width: 50%;
padding: 10px 0;
text-align: center;
margin: 10px auto !important;
font-size: 14px;
color: #333;
}
.header .user-menu a, .header .lang-menu a{
display: block;
width: 100%;
}
.header nav .user-menu {
position: relative;
margin: 0 auto;
right: 0;
top: 0;
}
.header nav .user-menu li a{
margin: 0 auto !important;
}
.header nav .lang-menu {
position: relative;
margin: 0 auto;
right: 0;
top: 0;
}
.header nav .lang-menu li a{
margin: 0 auto !important;
}
.header .menu-btn {
background-image: url("../img2/common/menu-btn.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 28px;
background-color: transparent;
border: none;
margin: 0;
float: left;
width: 60px;
height: 50px;
position: absolute;
top: 0px;
left: 0px;
border-radius: 0;
display: block;
transition: all 300ms ease;
}
.header .menu-btn:active, .header .menu-btn:hover {
background-color: rgba(252,171,9,.3);
}
.header .container{
height: 50px;
/*
border-bottom: 1px solid #c7c7c7;
*/
}
.header .logo{
background-image: url("../img2/common/anivpn-logo2-black.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 65px;
float: none;
height: 50px;
margin: 0 auto;
display: inline-block;
}
.header a{
color: #fff;
margin: 0 12px;
position: relative;
font-weight: 700;
}
.header .nav-a:active, .header .nav-a:hover{
color: #333;
background-color: rgba(252,171,9,.3);
}
.header .website{
display: block;
color: #444;
}
.header.animated{
animation-duration: 300ms !important;
}
/**********************************Index ********************************************/
.index{
margin: 0;
}
/**********************************Index row-s2 ********************************************/
.index .row-s2 .container{
padding: 60px 0 48px 0;
}
.index .row-s2 .banner{
width: 90%;
box-shadow: 0 1px 16px 0 #c19c43;
margin: 0 0 20px;
border-radius: 8px;
animation-delay: 500ms;
}
.index .row-s2 h1{
padding: 0 40px 0;
font-size: 28px;
line-height: 1.3;
}
.index .row-s2 .devices-pic{
height: 200px;
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: 90%;
background-repeat: no-repeat;
background-position: center center;
margin: 30px 0 0;
}
.index .row-s2 .p-2{
margin: 16px 0 0 0;
font-size: 12px;
font-weight: 400;
display: block;
}
.index .row-s2 .p-2 i{
font-size: 21px;
display: inline-block;
vertical-align: bottom;
line-height: 0.8;
margin: 0 0 0 -4px;
}
.index .row-s2 .go-dl{
width: 50%;
padding: 11px 0;
font-size: 14px;
border-radius: 15px;
margin: 10px 0 0;
}
/**********************************Index row-s ********************************************/
.index .row-s{
background-repeat: no-repeat;
background-position: center 0%;
background-size: cover;
/*background-size: 150%;*/
}
.index .row-s h1{
padding: 0 15px 0;
font-size: 23px;
font-weight: 700;
line-height: 1.5;
}
.index .row-s .button{
width: 200px;
font-size: 15px;
line-height: 40px;
}
.index .row-s .p-2{
margin: 16px 0 0 0;
font-size: 11px;
padding: 0 30px 0 50%;
}
.index .row-s .p-2 i{
font-size: 19px;
display: inline-block;
vertical-align: bottom;
line-height: 1;
margin: 0 0 0 -4px;
}
.index .row-s .btn-wrap{
padding: 0 0 0 40%;
}
.index .row-s .btn-wrap .app-dl-btn{
background-color: transparent;
width: 120px;
height: 36px;
display: inline-block;
background-image: url("../img2/common/icon-set.svg");
background-repeat: no-repeat;
margin: 15px 5px 0px;
border-radius: 5px;
}
.index .row-s .btn-wrap .app-dl-btn.ios{
background-position: -1px -40px;
background-size: 207px;
}
.index .row-s .btn-wrap .app-dl-btn.android{
background-position: -1px -1px;
background-size: 207px;
}
/**********************************Index row-d ********************************************/
.index .row-d{
background-repeat: no-repeat;
background-position: center 0%;
background-size: cover;
/*background-size: 150%;*/
}
.index .row-d .container{
padding: 50px 0 50px 0;
background-size: 150px;
background-repeat: no-repeat;
background-position: 25px 67%;
}
.index .row-d h2{
padding: 0 20% 0;
font-size: 23px;
font-weight: 700;
line-height: 1.5;
}
.index .row-d h3{
font-size: 14px;
}
.index .row-d h2 span{
font-size: 27px;
}
.index .row-d p{
font-size: 11px;
}
.index .row-d .p-0 .checked-ico{
width: 15px;
height: 15px;
background-size: 15px;
}
.index .row-d ul{
margin: 20px auto 0;
}
.index .row-d ul li{
width: 25%;
margin: 0 0 0 0;
}
.index .row-d ul li .d-1{
background-size: 31px;
height: 68px;
}
.index .row-d ul li .d-2{
background-size: 31px;
height: 68px;
}
.index .row-d ul li .d-3{
background-size: 27px;
height: 68px;
}
.index .row-d ul li .d-4{
background-size: 27px;
height: 68px;
}
.index .row-d .go-dl{
width: 50%;
padding: 11px 0;
font-size: 14px;
border-radius: 15px;
display: inline-block;
margin: 10px 0;
}
/**********************************Index row-su ********************************************/
.index .row-su .container{
padding: 50px 0 50px 0;
}
.index .row-su h2{
padding: 0 0 0 0;
font-size: 30px;
}
.index .row-su .p-0{
font-size: 15px;
margin: 22px 0 50px;
}
.index .row-su ul{
width: 95%;
margin: 0 auto;
}
.index .row-su ul li{
float: left;
width: 33.3333%;
margin: 10px 0 20px;
}
.index .row-su .container .more-btn{
margin: 30px 0 0;
display: inline-block;
color: #fff;
}
.index .row-su ul li .content{
width: 90%;
background-color: transparent;
text-align: center;
}
.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: 60px;
height: 60px;
border-radius: 14.4px;
background-size: 488px;
}
.index .row-su ul li .content .app-portrait.app1{
background-position: 0 -60px;
}
.index .row-su ul li .content .app-portrait.app2{
background-position: -60px 0;
}
.index .row-su ul li .content .app-portrait.app3{
background-position: -120px 0;
}
.index .row-su ul li .content .app-portrait.app4{
background-position: -60px -60px;
}
.index .row-su ul li .content .app-portrait.app5{
background-position: 0 -180px;
}
.index .row-su ul li .content .app-portrait.app6{
background-position: -120px -180px;
}
.index .row-su ul li .content .app-portrait.app7{
background-position: 0 0;
}
.index .row-su ul li .content .app-portrait.app8{
background-position: -60px -240px;
}
.index .row-su ul li .content .app-portrait.app9{
background-position: 0 -240px;
}
.index .row-su ul li .content .app-portrait.app10{
background-position: 0 -120px;
}
.index .row-su ul li .content .app-portrait.app11{
background-position: -60px -120px;
}
.index .row-su ul li .content .app-portrait.app12{
background-position: -180px -240px;
}
.index .row-su ul li .content .app-portrait.app13{
background-position: -240px 0;
}
.index .row-su ul li .content .app-portrait.app14{
background-position: -120px -240px;
}
.index .row-su ul li .content .app-portrait.app15{
background-position: -360px -240px;
}
.index .row-su ul li .content .app-portrait.app16{
background-position: -300px -240px;
}
.index .row-su ul li .content .app-portrait.app17{
background-position: -60px -180px;
}
.index .row-su ul li .content .app-portrait.app18{
background-position: -240px -60px;
}
.index .row-su ul li .content .app-portrait.app19{
background-position: -180px -60px;
}
.index .row-su ul li .content .app-portrait.app20{
background-position: -120px -60px;
}
.index .row-su ul li .content .app-portrait.app21{
background-position: -240px -120px;
}
.index .row-su ul li .content .app-portrait.app22{
background-position: -180px -120px;
}
.index .row-su ul li .content .app-portrait.app23{
background-position: -120px -120px;
}
.index .row-su ul li .content .app-portrait.app24{
background-position: -360px 0;
}
.index .row-su ul li .content .app-portrait.app25{
background-position: -240px -240px;
}
.index .row-su ul li .content .app-portrait.app26{
background-position: -300px 0;
}
.index .row-su ul li .content .app-portrait.app27{
background-position: -300px -120px;
}
.index .row-su ul li .content .app-portrait.app28{
background-position: -360px -120px;
}
/**********************************Index row-f1 ********************************************/
.index .row-f1{
}
.index .row-f1 .container{
}
.index .row-f1 .container .part-c{
width: 100%;
background: linear-gradient(180deg, rgba(44, 47, 57, .4), rgba(44, 47, 57, .8)), url("../img2/common/bg5.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.index .row-f1 .container .part-c .content-wrap{
width: 100%;
}
.index .row-f1 .container .part-c .remark{
font-size: 11px;
margin: 70px 0 0;
color: #aaa;
}
.index .row-f1 .container .part-p {
display: none;
}
/**********************************Index row-f2 ********************************************/
.index .row-f2{
}
.index .row-f2 .container{
}
.index .row-f2 .container .part-c{
width: 100%;
background: linear-gradient(180deg, rgba(44, 47, 57, .4), rgba(44, 47, 57, .8)), url("../img2/common/bg6.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.index .row-f2 .container .part-c .content-wrap{
width: 100%;
}
.index .row-f2 .container .part-c h3{
line-height: 1.5;
width: 100%;
margin: 0 auto;
}
.index .row-f2 .container .part-c .remark{
font-size: 11px;
margin: 70px 0 0;
color: #aaa;
}
.index .row-f2 .container .part-p {
display: none;
}
/**********************************Index row-f3 ********************************************/
.index .row-f3{
}
.index .row-f3 .container{
padding: 40px 0 50px;
}
.index .row-f3 .container h2{
font-size: 25px;
line-height: 70px;
vertical-align: top;
display: inline-block;
padding: 10px 0 0;
}
.index .row-f3 .container h2 span{
font-size: 50px;
line-height: 70px;
}
.index .row-f3 .container .banner{
height: 200px;
background-size: 100%;
}
/**********************************Index row-f4 ********************************************/
.index .row-f4{
}
.index .row-f4 .container{
padding: 30px 30px;
}
.index .row-f4 .container ul{
}
.index .row-f4 .container ul li{
float: left;
width: 50%;
}
.index .row-f4 .container ul li .content-wrap{
width: 90%;
margin: 0 auto;
}
.index .row-f4 .container ul li .content-wrap p{
font-size: 20px;
margin: 0 0 0 50px;
line-height: 50px;
}
.index .row-f4 .container ul li .content-wrap .ico{
background-repeat: no-repeat;
background-position: center center;
width: 50px;
height: 50px;
display: inline-block;
}
.index .row-f4 .container ul li .content-wrap .ico-1{
background-size: 50px;
}
.index .row-f4 .container ul li .content-wrap .ico-2{
background-size: 30px;
}
.index .row-f4 .container .remark{
font-size: 10px;
margin: 20px auto 0;
width: 100%;
}
/**********************************Index row-a ********************************************/
.index .row-a{
background-color: #fff;
color: #fff;
}
.index .row-a .container{
padding: 50px 0 50px 0;
}
.index .row-a h2{
padding: 0 20% 0;
font-size: 25px;
font-weight: 700;
line-height: 1.5;
}
.index .row-a h3{
padding: 0 0 0 0;
font-size: 17px;
font-weight: 400;
line-height: 1;
}
.index .row-a h3 span{
}
.index .row-a p{
margin: 10px 0 0 0;
font-size: 11px;
font-weight: 100;
padding: 0 10%;
}
.index .row-a ul{
width: 100%;
display: table;
margin: 30px auto 0;
}
.index .row-a ul li{
float: left;
width: 50%;
background-repeat: no-repeat;
background-position: center center;
background-size: 34px;
margin: 0 0 0 0;
height: 143px;
}
.index .row-a ul li .a-1{
background-size: 38px;
height: 70px;
}
.index .row-a ul li .a-2{
background-size: 38px;
height: 70px;
}
.index .row-a ul li .a-3{
background-size: 38px;
height: 70px;
}
.index .row-a ul li .a-4{
background-size: 42px;
height: 70px;
}
.index .row-a ul li .a-5{
background-size: 38px;
height: 70px;
}
.index .row-a ul li .a-6{
background-size: 38px;
height: 70px;
}
.index .row-a ul li .a-7{
background-size: 50px;
height: 70px;
}
.index .row-a ul li .a-8{
background-size: 38px;
height: 70px;
}
/**********************************Index row-article-mini ********************************************/
.index .container-fluid.row-article-mini{
display: none;
}
/**********************************Index row-article ********************************************/
.index .row-article{
}
.index .row-article .container{
padding: 50px 0 50px 0;
}
.index .row-article h2{
padding: 0 20% 0;
font-size: 25px;
font-weight: 700;
line-height: 1.5;
}
.index .row-article ul{
background-color: transparent;
width: 100%;
overflow: hidden;
margin: 10px 0 0;
padding: 30px 0;
}
.index .row-article ul li{
width: 100%;
float: left;
margin: 0 0 20px;
}
.index .row-article ul li .article-wrap{
background-color: #fff;
width: 90%;
margin: 0 auto 0;
border: 1px solid #eee;
transition: all 300ms ease;
}
.index .row-article ul li .article-wrap:hover{
margin: 0 auto 0;
}
.index .row-article ul li .article-wrap .thumb-pic{
height: 150px;
}
.index .row-article ul li .article-wrap .thumb-pic.article-1{
}
.index .row-article ul li .article-wrap .thumb-pic.article-2{
background-position: center bottom;
}
.index .row-article ul li .article-wrap .thumb-pic.article-3{
}
.index .row-article ul li .article-title-wrap{
padding: 10px;
}
.index .row-article ul li h4{
font-size: 18px;
background-color: #fff;
color: #555;
padding: 0;
line-height: 23px;
height: 46px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
text-align: left;
-webkit-line-clamp: 2;
}
/**********************************Index row-b ********************************************/
.index .row-b{
background-size: cover;
}
.index .row-b .container{
padding: 28px 0 88px 0;
}
.index .row-b h2{
padding: 0 20% 0;
font-size: 25px;
font-weight: 700;
line-height: 1.5;
}
.index .row-b ul{
margin: 10px auto 0;
}
.index .row-b ul li{
width: 100%;
background-size: 19px;
padding: 0 0 0 30%;
background-position: 22% 21px;
height: auto;
margin: 0 0 10px 0;
}
.index .row-b p{
font-size: 13px;
padding: 0 10% 0 0;
}
.index .row-b p span{
font-size: 16px;
}
/**********************************Index row-l ********************************************/
.index .row-l{
background-size: cover;
}
.index .row-l .container{
padding: 28px 0 70px 0;
width: 90%;
}
.index .row-l h2{
padding: 0 5% 0;
font-size: 19px;
font-weight: 700;
line-height: 1.5;
}
.index .row-l h3{
padding: 0 5% 0;
font-size: 14px;
margin: 0 0 30px;
}
.index .row-l p{
margin: 10px 0 0 0;
font-size: 12px;
font-weight: 400;
}
.index .row-l ul{
margin: 0 auto 0;
}
.index .row-l ul li{
background-size: 24px;
}
.index .row-l ul .li-2{
background-size: 31px;
}
/********************************** Footer ********************************************/
.footer .container{
padding: 72px 0 30px;
font-size: 11px;
position: relative;
}
.footer .left{
float: left;
width: 100%;
text-align: left;
}
.footer .right{
margin: 0 0 0 0;
text-align: center;
}
.footer .left p{
margin: 10px 0 0 15px;
}
.footer .right p{
color: #fff;
margin: 0;
padding: 0 0 5px 0;
position: relative;
font-weight: 400;
}
.footer nav{
margin: 0 0 38px 0;
}
.footer nav a{
margin: 0 0 0 15px;
position: relative;
font-weight: 400;
font-size: 11px;
padding: 0 0 15px 0;
display: inline-block;
}
.footer nav a.first{
margin: 0 0 0 15px !important;
}
.footer nav a.last{
margin: 0 0 0 15px !important;
}
.footer nav .app-dl-btn{
background-color: transparent;
width: 99px;
height: 30px;
display: inline-block;
background-image: url("../img2/common/icon-set.svg");
background-repeat: no-repeat;
margin: 15px 5px 0px;
border-radius: 5px;
position: absolute;
}
.footer nav .app-dl-btn.ios{
background-position: -1px -33px;
background-size: 172px;
right: 116px;
bottom: 30px;
}
.footer nav .app-dl-btn.android{
background-position: -1px -1px;
background-size: 172px;
right: 10px;
bottom: 30px;
}
/**********************************Term ********************************************/
.terms .row-1{
background-color: #353848;
color: #555;
}
.terms .row-1 .container{
padding: 50px 0 0 0;
}
.terms .row-1 article{
background-color: rgba(255,255,255,1);
padding: 0 0 80px;
border-top: none;
margin: 0;
}
.terms .row-1 h2{
padding: 30px 15px 20px;
font-size: 28px;
font-weight: 400;
line-height: 1.5;
margin: 0 0;
}
.terms .row-1 h3{
padding: 0 15px 0;
font-size: 15px;
font-weight: 700;
line-height: 1.5;
text-align: left;
margin: 25px 0 0 0;
}
.terms .row-1 ul{
font-size: 11px;
padding: 0 15px 0 40px;
text-align: justify;
}
.terms .row-1 ul ul{
text-align: justify;
padding: 0 30px 0 30px;
}
.terms .row-1 p{
padding: 0 15px 0;
font-size: 11px;
font-weight: 400;
line-height: 1.5;
margin: 10px 0 0 0;
text-align: justify;
}
/********************************** Article ********************************************/
.article .row-1{
background-color: #353848;
color: #555;
}
.article .row-1 .container{
padding: 50px 0 0 0;
}
.article .row-1 article{
background-color: rgba(255,255,255,1);
padding: 0 0 80px;
border-top: none;
margin: 0;
}
.article .row-1 h1{
padding: 30px 15px 20px;
font-size: 25px;
line-height: 1.3;
margin: 0 0;
}
.article .row-1 h3{
padding: 0 15px 0;
font-size: 15px;
font-weight: 700;
line-height: 1.5;
text-align: left;
margin: 25px 0 0 0;
}
.article .row-1 .article-pic{
width: 100%;
margin: 0 0 10px;
padding: 0 15px;
}
.article .row-1 ul{
font-size: 11px;
padding: 0 15px 0 40px;
text-align: justify;
}
.article .row-1 ul ul{
text-align: justify;
padding: 0 30px 0 30px;
}
.article .row-1 p{
padding: 0 15px 0;
font-size: 13px;
font-weight: 400;
line-height: 1.5;
margin: 10px 0 5px 0;
text-align: justify;
}
.article .row-1 .suggested-articles{
background-color: #fff;
padding: 0 0 80px;
margin: 0;
}
.article .row-1 .suggested-articles h2{
text-align: left;
padding: 0 15px 0;
font-size: 16px;
margin: 0;
}
.article .row-1 .suggested-articles ul{
margin: 10px 0 0;
padding: 10px 15px;
}
.article .row-1 .suggested-articles ul li{
}
.article .row-1 .suggested-articles ul li .article-wrap{
}
.article .row-1 .suggested-articles ul li .article-wrap:hover{
box-shadow: 0 5px 10px 0px #d1d2d8;
}
.article .row-1 .suggested-articles ul li .article-wrap .thumb-pic{
height: 55px;
width: 80px;
}
.article .row-1 .suggested-articles ul li .article-title-wrap{
padding: 10px 30px 10px 10px;
margin: 0 0 0 80px;
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: 98% center;
background-size: 15px;
}
.article .row-1 .suggested-articles ul li h4{
font-size: 14px;
background-color: #fff;
color: #555;
padding: 0;
line-height: 18px;
height: 35px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
text-align: left;
-webkit-line-clamp: 2;
}
/********************************** login ********************************************/
.login .row-1{
color: #555;
}
.login .row-1 .container{
padding: 68px 0 18px 0;
width: 90%;
}
.login .row-1 h2{
padding: 0;
margin: 0;
font-size: 28px;
}
/********************************** card payment ********************************************/
.cardpayment .row-1{
color: #555;
}
.cardpayment .row-1 .container{
padding: 68px 0 18px 0;
width: 90%;
}
.cardpayment .row-1 h2{
padding: 0;
margin: 0;
font-size: 28px;
}
.cardpayment .row-2.last .container{
width: 90%;
}
.cardpayment .row-2 .sub-title{
font-size: 15px;
}
/********************************** account ********************************************/
.account .row-1 .container{
padding: 68px 0 18px 0;
width: 90%;
}
.account .row-1 h2{
padding: 0 60px 0;
font-size: 28px;
font-weight: 400;
line-height: 1.5;
margin: 0 0 0;
}
.account .row-2 .container{
width: 100%;
margin: 0 auto 50px;
}
.account .row-2.last {
padding: 0 0 0 0;
}
.account .content-box .left{
width: 10%;
}
.account .content-box .left li{
background-color: #fff;
padding: 15px 20%;
text-align: left;
border-left: 3px solid #fff;
color: #888;
}
.account .content-box .right{
width: 90%;
}
.account .content-box .right .wrap{
padding: 20px 30px;
}
.account .content-box .right .wrap.accountdetail ul li .d1{
width: 40%;
float: left;
font-size: 11px;
line-height: 30px;
}
.account .content-box .right .wrap.accountdetail ul li .d2{
width: 60%;
float: left;
font-size: 15px;
line-height: 30px;
color: #444;
}
.account .content-box .right .wrap.changepassword{
background-color: #fff;
width: 100%;
}
.account .content-box .right .wrap.changepassword .login-btn{
width: 100%;
}
/********************************** FAQ ********************************************/
.faq .row-1{
color: #555;
}
.faq .row-1 .container{
padding: 68px 0 18px 0;
width: 90%;
}
.faq .row-1 article{
/*
background-color: rgba(255,255,255,1);
*/
padding: 10px 0;
}
.faq .row-1 h2{
padding: 0 60px 0;
font-size: 28px;
font-weight: 400;
line-height: 1.5;
margin: 0 0 0;
}
.faq .row-2 {
padding: 0 0 35px 0;
}
.faq .row-2 .container{
width: 95%;
}
.faq .row-2.last {
padding: 0 0 65px 0;
}
.faq .row-2 .sub-title{
text-align: left;
padding: 10px 15px;
font-size: 18px;
}
.faq .row-2 .question{
background-color: rgba(0, 0, 0, .1);
min-height: 46px;
position: relative;
margin: 5px 0 0 0;
cursor: pointer;
text-align: left;
}
.faq .row-2 .question.first{
margin: 0 0 0 0;
}
.faq .row-2 .question h3 {
padding: 12px 53px 12px 53px;
font-size: 14px;
font-weight: 400;
line-height: 1.6;
}
.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{
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;
display: none;
}
.faq .row-2 .answer aside{
font-size: 14px;
letter-spacing: 0;
line-height: 1.4;
float: left;
padding: 21px 0 0 25px;
}
.faq .row-2 .answer p {
padding: 20px 25px 25px 53px;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
letter-spacing: 0.05em;
max-width: 100%;
text-align: left;
}
.faq .row-2 .answer a {
}
/********************************** Success2 ********************************************/
.success2 h1{
padding: 100px 0 10px;
font-size: 28px;
line-height: 40px;
margin: 0 0 20px;
}
.success2 h1 .tick-ico{
background-size: 40px;
height: 40px;
width: 40px;
margin: 0 10px 0 0;
}
.success2 p{
font-size: 13px;
margin: 10px auto 0;
width: 95%;
}
.success2 p span{
font-weight: 700;
}
.success2 p span.plan-name{
font-weight: 700;
font-size: 16px;
}
.success2 p span.next-due-date{
font-weight: 700;
font-size: 20px;
line-height: 40px;
}
.success2 .go-home-btn{
border: none;
padding: 8px;
border-radius: 10px;
color: #fff;
font-size: 14px;
width: 70%;
background-color: #ee477c;
background-image: linear-gradient(140deg, #ff3263, #ff9305);
cursor: pointer;
margin: 30px 0 50px;
display: inline-block;
text-align: center;
}
.success2 .p-1{
margin: 0;
font-size: 13px;
font-weight: 400;
}
.success2 .btn-wrap .app-dl-btn{
background-color: transparent;
width: 99px;
height: 30px;
display: inline-block;
background-image: url("../img2/common/icon-set.svg");
background-repeat: no-repeat;
margin: 15px 5px 100px;
border-radius: 5px;
}
.success2 .btn-wrap .app-dl-btn.ios{
background-position: -1px -33px;
background-size: 172px;
}
.success2 .btn-wrap .app-dl-btn.android{
background-position: -1px -1px;
background-size: 172px;
}
/********************************** tran/buy ********************************************/
.buy-container-fluid h1{
padding: 75px 0 10px;
font-size: 25px;
}
.buy-container-fluid h2{
font-size: 17px;
}
.buy-container-fluid .field p{
font-size: 11px;
}
.buy-container-fluid .field .product-li{
width: 50%;
margin: 0 0 10px;
}
.buy-container-fluid .field .product-li .product-item .product-name{
font-size: 23px;
}
.buy-container-fluid .field .product-li .product-item .product-feature li{
font-size: 11px;
}
.buy-container-fluid .field .product-li .product-item .product-feature li .numberofday{
font-size: 15px;
}
.buy-container-fluid .field .product-li .product-item .monthly{
font-size: 11px;
}
.buy-container-fluid .field .product-li .product-item .monthly-price{
font-size: 26px;
}
.buy-container-fluid .field .product-li .product-item .monthly-price .money-sign{
font-size: 14px;
margin: 5px 3px 0 0;
}
.buy-container-fluid .field .product-li .product-item .price{
font-size: 20px;
}
.buy-container-fluid .field .product-li .product-item .stat-tip{
line-height: 26px;
height: 26px;
width: 136px;
font-size: 11px;
}
.buy-container-fluid .field .bottom-2{
font-size: 11px;
}
.buy-container-fluid .field .connection {
margin: 0 8px 8px 0;
padding: 10px 11px;
font-size: 14px;
border-radius: 7px;
}
.buy-container-fluid .field{
padding: 0 0 10px;
}
.buy-container-fluid .agreement-p{
font-size: 13px;
}
.buy-container-fluid .remarks p{
font-size: 11px;
}
.buy-container-fluid .remarks{
margin: 30px 0 60px;
}
.buy-container-fluid .field .connection .area-icon{
background-size: 21px;
margin: 2px 6px 0 0;
width: 21px;
height: 14px;
}
.buy-container-fluid .field .email{
width: 80%;
}
.buy-container-fluid .field .captcha-input{
width: 40%;
}
.buy-container-fluid .pay-btn{
width: 100%;
}
.buy-container-fluid .field .payment-item{
width: 120px;
height: 50px;
margin: 0 8px 0 0;
}
.buy-container-fluid .field .payment-item.alipay .payment-icon{
height: 50px;
}
.buy-container-fluid .field .payment-item.cards .payment-icon{
height: 50px;
}
.buy-container-fluid .go-login-btn{
width: 168px;
}
.buy-container-fluid .go-signup-btn{
width: 82px;
font-size: 15px;
padding: 16px 0;
}
/********************************** Download ********************************************/
.download .row-1{
}
.download .row-1 .container{
padding: 68px 0 85px 0;
}
.download .row-1 article{
/*
* background-color: rgba(255,255,255,1);
* */
}
.download .row-1 h2{
font-size: 20px;
font-weight: 400;
line-height: 1.5;
margin: 0 0 0;
padding: 15px 10%;
}
.download .row-1 ul .grid {
width: 100%;
padding: 10px 0;
}
.download .row-1 ul .grid .inner-wrap{
min-height: auto;
}
.download .row-1 ul .grid .inner-wrap .portrait {
height: 100px;
}
.download .row-1 ul .grid .inner-wrap .portrait.ios{
background-image: url("../img2/common/iphone-x-s.png");
background-size: 40px;
background-position: bottom center;
}
.download .row-1 ul .grid .inner-wrap .portrait.android{
background-image: url("../img2/common/android-s.png");
background-size: 40px;
background-position: bottom center;
}
.download .row-1 ul .grid .inner-wrap .portrait.mac{
background-image: url("../img2/common/iMac-s.png");
background-size: 80px;
background-position: bottom center;
}
.download .row-1 ul .grid .inner-wrap .portrait.windows{
background-image: url("../img2/common/windows-s.png");
background-size: 70px;
background-position: bottom center;
}
.download .row-1 ul .grid .inner-wrap h3{
font-size: 15px;
}
/********************************** Tutorial ********************************************/
.tutorial .row-1{
}
.tutorial .row-1 .container{
padding: 68px 0 85px 0;
}
.tutorial .row-1 article{
/*
background-color: rgba(255,255,255,1);
*/
}
.tutorial .row-1 h2{
font-size: 20px;
font-weight: 400;
line-height: 1.5;
margin: 0 0 0;
padding: 15px 10%;
}
.tutorial .row-1 h3{
font-size: 17px;
}
.tutorial .row-1 h3 span{
font-size: 25px;
}
.tutorial .row-1 .go-to-buy-link{
margin: 0 0 0 20px;
}
.tutorial .row-1 .go-to-buy-link:hover, .tutorial .row-1 .go-to-buy-link:active{
}
.tutorial .row-1 ul{
margin: 0 auto 0;
text-align: left;
width: 90%;
}
.tutorial .row-1 ul .wrap{
width: 50%;
float: left;
}
.tutorial .row-1 ul li{
padding: 30px 0;
display: table;
width: 100%;
}
.tutorial .row-1 ul li.notice{
border-bottom: none;
background-color: #fb6d47;
margin: 6px 0 0;
color: #fff;
padding: 10px 0;
font-size: 12px;
}
.tutorial .row-1 ul li.notice p{
padding: 0 10px;
}
.tutorial .row-1 ul li.notice p span{
font-size: 17px;
}
.tutorial .row-1 ul li.last{
border-bottom: none;
}
.tutorial .row-1 ul label{
font-weight: 700;
}
.tutorial .row-1 ul p{
margin: 6px 0 0 0;
font-size: 11px;
}
.tutorial .row-1 ul li .login-data{
font-size: 14px;
}
.tutorial .row-1 ul p.small-text{
font-size: 12px;
margin: 10px 0 0 0;
}
.tutorial .row-1 .button{
width: 108px;
font-size: 13px;
line-height: 33px;
}
.tutorial .row-1 ul a{
margin: 30px 0 0 0;
}
.tutorial .row-1 ul li .app-dl-btn{
width: 99px;
height: 30px;
border-radius: 5px;
margin: 15px 0 0;
}
.tutorial .row-1 ul li .app-dl-btn.ios{
background-position: -1px -33px;
background-size: 172px;
}
.tutorial .row-1 ul .tutorial-pic{
width: 48%;
height: 320px;
border-radius: 5px;
margin: 0 0 0 52%;
}
.tutorial .row-1 ul .tutorial-pic.iphone-hkstore-s1 {
background-position: center 50%;
background-size: 100%;
height: 160px;
}
.tutorial .row-1 ul .tutorial-pic.iphone-hkstore-s2 {
background-position: center 10%;
background-size: 100%;
height: 160px;
}
.tutorial .row-1 ul .tutorial-pic.iphone-hkstore-s3 {
background-position: center 50%;
background-size: 100%;
height: 160px;
}
.tutorial .row-1 ul .tutorial-pic.iphone-hkstore-s4 {
background-position: center 10%;
background-size: 100%;
height: 200px;
}
.tutorial .row-1 ul .tutorial-pic.iphone-hkstore-s5 {
background-position: center 50%;
background-size: 100%;
height: 160px;
}
.tutorial .row-1 ul .tutorial-pic.iphone-changehkstore-s1 {
background-position: center -10px;
background-size: 100%;
height: 250px;
}
.tutorial .row-1 ul .tutorial-pic.iphone-changehkstore-s2 {
background-position: center -10px;
background-size: 100%;
height: 250px;
}
.tutorial .row-1 ul .tutorial-pic.iphone-changehkstore-s3 {
background-position: center -10px;
background-size: 100%;
height: 250px;
}
.tutorial .row-1 ul .tutorial-pic.iphone-changehkstore-s4 {
background-position: center -10px;
background-size: 100%;
height: 250px;
}
.tutorial .row-1 ul .tutorial-pic.iphone-changehkstore-s5 {
background-position: center -10px;
background-size: 100%;
height: 250px;
}
.tutorial .row-1 ul label{
font-size: 23px;
}
/************** 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 0 10px 0;
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: 22px;
font-weight: 400;
line-height: 1;
}
.alert-modal p{
margin: 5px 0 0 0;
font-size: 14px;
font-weight: 400;
}
.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 .button{
margin: 0 8px;
width: 42%;
font-size: 15px;
}
.alert-modal .continue-btn{
font-size: 18px;
font-weight: 700;
}
.alert-modal footer{
padding: 20px 10px;
}
/************** Buy modal ******************/
.buy-modal{
text-align: center;
color: #585E6F;
background-color: #fff;
border-radius: 0;
overflow: hidden;
position: relative;
}
.buy-modal header {
background: #fff;
padding: 18px 25px;
position: relative;
}
.buy-modal .body {
padding: 0;
text-align: center;
}
.buy-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;
}
.buy-modal .close-btn:hover,.buy-modal .close-btn:active {
opacity: 0.7;
}
.buy-modal h2{
padding: 0 0 0 0;
font-size: 28px;
font-weight: 400;
line-height: 1;
}
.buy-modal ul li p{
margin: 5px 0 0 0;
font-size: 14px;
font-weight: 200;
}
.buy-modal ul{
width: 96%;
display: table;
margin: 10px auto 0;
}
.buy-modal ul header{
background: transparent;
padding: 0;
}
.buy-modal ul li{
float: left;
width: 100%;
padding: 0;
background: #fff;
margin: 20px 0 0 0;
}
.buy-modal ul li aside{
color: #04a0de;
font-weight: 400;
float: left;
width: 15%;
text-align: right;
font-size: 30px;
}
.buy-modal ul li main{
margin: 0 0 0 25%;
text-align: left;
padding: 0 3% 0 20px;
}
.buy-modal ul li .wx-qrcode{
max-width: 90px;
max-height: 90px;
margin: 5px 0 0 0;
padding: 3px;
background-color: #fff;
}
.buy-modal .button{
margin: 20px 0 30px 0;
}
/************** modal ******************/
.modal.preview{
background: rgba(30, 30, 30, .5);
position: fixed;
top: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.popup-modal.buy-modal{
width: 96%;
max-width: 100%;
height: auto;
margin: 0 auto;
position: fixed;
top: auto;
left: 2%;
bottom: 1%;
display: table;
}
.popup-modal.alert-modal{
width: 96%;
max-width: 100%;
height: auto;
margin: 0 auto;
position: fixed;
top: auto;
left: 2%;
bottom: 30%;
overflow: hidden;
}
/**********************************site-error ********************************************/
.site-error{
margin: 0 auto 50px;
max-width: 1000px;
padding: 100px 20px 150px;
color: #555;
}
.site-error h1{
font-size: 28px;
font-weight: 400;
}
.alert-danger{
background-color: transparent;
border: none;
margin: 10px 0 30px;
font-size: 16px;
padding 0 20px 0;
}
}
/* iPhone SE */
@media (max-width:320px){
.index .row-7 .product-wrap .sales-proportion{
padding: 5px 9px;
font-size: 12px;
}
.index .row-f4 .container ul li .content-wrap{
width: 100%;
margin: 0 auto;
}
.index .row-f4 .container ul li .content-wrap p{
font-size: 16px;
font-weight: 400;
margin: 0 0 0 50px;
text-align: left;
line-height: 50px;
}
}