@charset "UTF-8";
/* CSS Document */
@import url("/css/bootstrap-icons.css");
@font-face{font-family:lexend;src:url(/fonts/Lexend-Light.woff2) format("woff2"),url(/fonts/Lexend-Light.woff) format("woff");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:lexend;src:url(/fonts/Lexend-Regular.woff2) format("woff2"),url(/fonts/Lexend-Regular.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:lexend;src:url(/fonts/Lexend-SemiBold.woff2) format("woff2"),url(/fonts/Lexend-SemiBold.woff) format("woff");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:lexend;src:url(/fonts/Lexend-SemiBold.woff2) format("woff2"),url(/fonts/Lexend-SemiBold.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}
* {margin: 0; padding: 0; border: 0; list-style: none; vertical-align: baseline}
*:focus { outline: none}
section { padding: 6rem 0;}
body,input,textarea { font: 16px/24px 'Lexend',Arial,Calibri,sans-serif; background: #fff; color: #19191A; word-break: break-word; font-weight: 400; line-height: 1.5;}
body,html{overflow-x:inherit;}
.ml-10 { margin-left: 10%!important;}
.mr-10 { margin-right: 10%!important;}
.ac { text-align:center!important;}
.al {text-align: left!important;}
.hidden { display: none !important;}
.bold {font-weight: bold;}
.box-radius { border-radius: 1rem;}
.box-white { background-color: #fff;}
.bg-blue-light {background:#F1F6FF;}
.text-padding { padding: 1.5rem;}
.box-border-gray {border: 1px solid #F2F3F5;}
.mtb-16 { margin-top: 1rem; margin-bottom: 1rem; line-height: 1.2;}
.flmr20 { float: left; margin-right: 20px;}
p.name { color: #19191A;}
a:hover {color:#008aff; text-decoration:underline;}
img {max-width: 100%;}
.btns { display: block;}
.btn-primary {ackground-color: #1D52D9;border: 0;}
.btn-secondary { background-color: transparent; border: 0.125rem solid #1D52D9; color: #1D52D9;box-sizing: border-box;} 
.btn-primary { background-color: #3465DE; color: #fff!important;}
.btn-secondary:hover { border-color: #3465DE;background-color: #3465DE; color: #fff!important;}
.main-topnav {padding: 0;background-color: #fff!important;box-shadow: 0 4px 8px 0 rgba(21,58,160,.1);}
.btn-border-blue { border-color: #1663F3; color: #1663F3; }
.btn-border-blue.focus,.btn-border-blue:focus,.btn-border-blue:hover {border-color: #2C72F4; background-color: #2C72F4; color: #fff;}
.btn-border-white { border-color: #fff; color: #fff; }
.btn-border-white.focus,.btn-border-white:focus,.btn-border-white:hover {opacity: 0.8;}
.btn-border-orange { border-color: #FF830D; color: #FF830D;}
.btn-border-orange.focus,.btn-border-orange:focus,.btn-border-orange:hover {border-color: #FF9632; background-color: #FF9632; color: #fff;}
.btn-fill-blue, .btn-primary {background-color: #1663F3; color: #fff!important;}
.btn-fill-blue.focus,.btn-fill-blue:focus,.btn-fill-blue:hover, .btn-primary.focus, .btn-primary:focus, .btn-primary:hover {border-color: #2C72F4; background-color: #2C72F4; color: #fff;}
.btn-fill-white { background-color: #fff; color: #1663F3; }
.btn-fill-white.focus,.btn-fill-white:focus,.btn-fill-white:hover {opacity: 0.8;}
.btn-fill-orange { background-color: #FF830D; color: #fff;}
.btn-fill-orange.focus,.btn-fill-orange:focus,.btn-fill-orange:hover {border-color: #FF9632; background-color: #FF9632; color: #fff;}
.btn:hover { box-shadow: 0 0.4rem 0.8rem 0 rgb(0 0 0 / 15%); }
.btn-shadow {box-shadow: 0rem .25rem .25rem 0rem rgba(0, 0, 0, 0.15);}
.btn+.btn {margin-left: 1.4rem;}
.navbar-light .navbar-nav .nav-link {color: #19191A;}
.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus{color: #19191A;}
.navbar-light .navbar-nav li.active { font-weight: 800;}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {color: #07273d;}
h4 {font-size: 18px; color:#19191A; }
h3.border-leftline-blue { position: relative; padding-left: 12px!important;}
h3.border-leftline-blue::before {content: ""; width: 4px; height: 100%;border-radius: 2px; background-color: #217AFF; position: absolute; left: 0;}

.main-topnav .dropdown-menu {min-width: 52rem;top: 106%;/*display: flex;*/}
.main-topnav li:nth-child(3) .dropdown-menu, .main-topnav li:nth-child(4) .dropdown-menu { min-width: 26rem;}
.main-topnav .dropdown-menu::before {  content: ''; top: -8px; position: absolute; left: 50%;right: 50%; border-top: 16px solid #fff; border-left: 16px solid #fff; transform: rotate(45deg);}
.dropdown a.show span { border-bottom: 2px solid #19191A; padding: .5rem 0;}
.main-topnav .dropdown-menu ul { padding-left: 1rem;}
.main-topnav .dropdown-menu ul li { padding: 0.75rem 0; list-style: none;}
.main-topnav .dropdown-menu ul li a { font-size: 1rem; color:#19191A;font-weight: 600; text-decoration: none; line-height: 1.2;}
.main-topnav .dropdown-menu ul li a:hover {text-decoration:underline;}
.main-topnav .dropdown-menu .tpyeicon { margin-top:1rem; }
.main-topnav .dropdown-menu i { margin-left: 0.5rem;}
.hot { margin-left: 4px;}
.navbar-nav .dropdown-menu .win-block,.navbar-nav .dropdown-menu .mac-block {  display: flex;}
.navbar-nav .dropdown-menu .col-md-6:first-child {border-right: 1px solid #eef4fa;}
.main-topnav .dropdown-menu ul li span { display: block; font-size: 0.875rem; color: #77797e; font-weight: 300;}
.navbar-toggler { padding:0.25rem 0;}

.nav-link>img {height: 24px; margin: 0;}
.navbar-nav .nav-link img { margin-right: 0;}

@media (max-width: 1200px){
.navbar-expand-lg .navbar-nav .nav-link { padding-left:0.5rem; padding-right:0.5rem;}
}

/*--------------- windows clone ---------------*/
.text-area {background-color: #fff; border-radius: 0.625rem; font-size: 1rem; line-height: 1.5;}
.border-gray {border: 1px solid #F2F3F5;}
.banner-pr {color: #fff; position: relative;overflow: hidden;}
.banner-pr h1 {font-size: 3rem; font-weight: bold; margin-top: 0;}
.banner-pr p.des { margin-bottom: 1.5rem!important;}
.gradient-text {display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative;}
.gradient-bg {font-weight: 600; font-size: 1.25rem;  line-height: 1.5rem; text-align: center;  margin-bottom: 1.25rem; background: -moz-linear-gradient(45deg, #F69F5E 5%, #F7685C 50%, #519AFE 75%, #7E60FE);
    background: -webkit-linear-gradient(45deg, #F69F5E 5%, #F7685C 50%, #519AFE 75%, #7E60FE);
    background: -o-linear-gradient(45deg, #F69F5E 5%, #F7685C 50%, #519AFE 75%, #7E60FE); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.gradient-bg .text-gradient-1 { text-shadow: 0 0 25px #F69F5E, 0 0 50px rgba(205,92,92,0.1);}
.gradient-bg .text-gradient-2 { text-shadow: 0 0 25px indianred, 0 0 50px indianred;}
.gradient-bg .text-gradient-3 { text-shadow: 0 0 25px #519AFE, 0 0 75px rgba(0,0,255,0.1);}
.gradient-bg>span:before, .gradient-bg>span:after { vertical-align: text-bottom;}

.banner-ac .text {display: flex; flex-direction: column; justify-content: center;align-items: center; text-align: center;}
.banner-pr .list {text-align: left; margin: 1.5rem 0; }
.banner-pr .list li { list-style: none; font-size: 1rem; font-weight: 500; line-height: 1.2; padding: 0.5rem 0; background: url("../images/generic-icons/ic-ok.png") no-repeat 0 0.5rem; background-size:1rem; padding-left: 1.5rem; }
.banner-clone,.banner-clone-mac {background: #F0F5FF url("../images/windows-clone/bg-clone.png") no-repeat center center; background-size: contain; color: #000000;}
.banner-clone .banner-pr .list li {color: #000000;}
.btns {display: flex; margin-top: 0.75rem;}
.mask { position: absolute; left: 0; display: block;height: 100%; background-color: #fff;opacity: 0.2; border-radius: 0.5rem;}
.btn:hover .mask {animation-name: btn-animation-one; animation-duration: 1s; border-radius: .8rem;}
@keyframes btn-animation-one {  from{ width: 3.2rem; opacity: 0.2; } to{ width: 100%;  opacity: 0; }}
.banner-clone .btn i {margin-right: 0.8rem; font-size: 1.4rem; filter: drop-shadow(0 0 0 #fff);}
.banner-pr .btns span { font-size: 0.75rem; line-height: 3;}
.banner-pr .btn, .version-compare .btn, .banner-article .btn { height: 4rem; width: 15rem;border-radius: .5rem; font-size: 1.25rem; font-weight: 600; position: relative; padding: 0; display: flex; align-items: center; justify-content: center;}
.btn img {  margin-right: 0.75rem;}
.banner-down, .banner-buy { display: flex; flex-direction:column; margin: 0 1rem; justify-content: center;align-items: center;}
.banner-pr .text-link { margin-top: 3rem; line-height: 1.5;}
.banner-pr .text-link a { font-size: 1rem; font-weight: 600; text-decoration: underline; color: #000; display: flex; align-items: center;}
.banner-pr .text-link a i { font-size: 2rem; font-weight: bold; vertical-align: -0.4rem; }

main.main-pr { text-align: center;}
main.main-pr p { font-weight: 500;}
main.main-pr h2 {margin-bottom: 1.5rem;}
main.main-pr p.des { font-size: 1rem; max-width: 64rem; margin: 0 auto; line-height: 1.8;}
main.main-pr p.sub-t { font-size: 1.25rem; font-weight: 600; margin-top: 2.5rem;}
.bg-gradient { background: #FBFCFF url("../images/windows-clone/bg-gradient.svg") no-repeat 0 center; background-size: 60%;}
.bg-blue {background-color: #FBFCFF;}

/*guide*/
#guide { margin-bottom: 3rem; }
.guide .slide { display:flex; align-items:center; justify-content:space-between;}
.guide .carousel-indicators { flex-direction:column; margin:0; left:-30%; top:0; position:relative;z-index:0;}
.guide .carousel-indicators li { height:135px; position:relative;text-indent:inherit; padding-left:4rem; opacity:1; background-color:transparent; }
.guide .carousel-indicators li::before { position:absolute; content: url(../images/screenshots/dot-stepoff.png); left:0; top:3rem;}
.guide .carousel-indicators li.active::before { position:absolute; content: url(../images/screenshots/dot-stepon.png); left:0; }
.guide .carousel-indicators::before { position:absolute; content: url(../images/screenshots/line.png); left:1.35rem; top:3rem; width:2px; height:156px;}
.guide .carousel-indicators li span { display:block;width:458px;height:135px; background:url(../images/screenshots/bg-stepoff.png) no-repeat 0 0; background-size:458px 135px; color:#19191A; padding:1rem 1.5rem 0 2.5rem; font-size:1rem; text-align: left;}
.guide .carousel-indicators li b { font-weight:600; display:block; margin-bottom:0.5rem;}
.guide .carousel-indicators li.active span {background:url(../images/screenshots/bg-stepon.png) no-repeat 0 0; background-size:458px 135px; color:#fff;}
.guide .carousel-inner { width:60%; text-align:center;}


.text-area p.name {font-size: 1.5rem; font-weight: 600;}
.main-clone-win .text-area p.name {margin: 2rem 0 1rem; }
.main-clone-win .text-area { padding: 2.5rem;}

.img-text .col-md-6 {display: flex; align-items: center; justify-content: center; text-align: left;}
.bg-gradient-blue { background:linear-gradient(180deg,#F0F4FA 60%,#fff 100%)!important;}
.box-shadow {box-shadow: 0 20px 40px 0 rgba(15, 65, 184, 0.09);}
.version-compare .row {display: flex; align-items: baseline; }
.version-compare .text-area {padding: 3rem 2.5rem; display: flex; flex-direction: column; justify-content: flex-start; text-align:left; position: relative;}
.version-compare .col-md-4:nth-child(2) .text-area { padding-top: 5.5rem;}
.version-compare .most {background:linear-gradient(90deg,#F76290 60%,#F9BA37 100%); font-size: 0.875rem; font-weight: bold; color: #fff; text-align: center; position: absolute; left: 0; top: 0; height: 2.5rem; z-index: 1; display: flex; align-items: center; width: 100%;justify-content: center; border-radius: 0.625rem 0.625rem 0 0;}
.version-compare .most img { margin-right: 0.5rem;}
.version-compare .pr-name p.name { font-size: 1.25rem; font-weight: 600; margin: 0;}
.version-compare .pr-name .form-control, .version-compare .pr-name .version { color: #19191A; font-size: 1.75rem; line-height: 1.5; font-weight: 600; border: 0; padding: 0; width: auto;margin: 1.125rem 0; height: 2.75rem;}
.version-compare .pr-name span.price { font-size: 2.5rem; font-weight: 700; line-height: 1.5;}
.version-compare .pr-name span.price del { font-size: 1.5rem; font-weight: 500; color: #888;}
.version-compare .text-link a { font-size:1.125rem; text-decoration: underline; color:#19191A; }
.version-compare .text-area .list{ margin-top: 2.5rem;}
.version-compare .text-area .list li { padding: 0.25rem 0; background: url("../images/generic-icons/ic-yes.svg") no-repeat 0 0.4rem; background-size: 1.125rem; padding-left: 1.85rem; font-size: 1rem; font-weight: 500;}
.version-compare .text-area .list li.no { background: url("../images/generic-icons/ic-no.svg") no-repeat 0 0.4rem; background-size: 1.125rem; color: #999;}
.version-compare .text-area .btns { margin: 1rem 0;}

.tech { padding-top: 0;}
.table { text-align: left; color: #19191A;}
.table tr { display: flex; align-items: center; border: 0;border-top: 1px solid #eaecf3;} 
.table td { border: 0; font-size: 1rem;}
.table tr:last-child { border-bottom: 1px solid #eaecf3;}
.table .list { margin: 0; }
.table .list li { list-style:disc; padding: 0.25rem 0; list-style-position: inside;}
.tech .table { margin-top: 3rem;}
.tech .table tr td:first-child { font-weight: 600;}

.reviews { background: #EEF4FA;}
.reviews .carousel { margin-top: 3rem;}
.reviews .carousel-item .reivew-list {width: 48%; float:left; padding: 3rem; margin:1%; }
.rate { margin-bottom:1.25rem;}
.rate i { color:#ffad0a; margin:0 0.125rem;}
.reviews .text-area { text-align: left;}
.reviews .text-area .user-infor { display: flex; align-items: center; margin-bottom: 1.5rem;}
.reviews .text-area .user-infor img { margin-right: 1rem;}
.reviews .text-area .user-infor .user-name { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem;}
.reviews .text-area .user-infor .date { font-size: 0.875rem; color: #888;margin-bottom: 0;}
.reviews .text-area .user-say { margin: 0;}

.recom-article, .total-pr, .faqs, .advance { background: #FDFDFF;}
.recom-article .text-area { padding: 0; position: relative;}
.link-area {  position: absolute; left: 0; right: 0; top: 0; bottom: 0;}
.recom-article .img { height: 240px; width: 100%;overflow: hidden;}
.recom-article .img img { width: 100%; height: 100%; object-fit: cover;}
.recom-article .text{ padding: 2rem; text-align: left;}
.recom-article .text p { margin: 0;}
.recom-article .text p.name { font-size: 1.25rem; font-weight: 600;line-height: 1.5; margin-top: 0;}
.recom-article .text p.date { font-size: 0.875rem; color: #888;margin: 0.75rem 0 1rem;}
.total-pr .text-area { padding: 3rem;; background: #fff url("../images/windows-clone/bg-total.png") no-repeat right top; background-size: 82%; border: 1px solid #EBEBEB; border-radius: 1rem; height: 21rem; display: flex; align-items: center; justify-content: flex-start;}
.total-pr { padding: 0;}
.total-pr .pr-info { text-align: left; width: 60%;}
.total-pr .pr-info img { margin-right: 1.5rem;}
.total-pr .pr-info .pr-name { font-size: 1.25rem;}
.total-pr .pr-info .des { font-size: 2.6rem; font-weight: 800; line-height: 1.2; margin-bottom: 0;}
.total-pr .btn { width: 16rem; height: 4.5rem; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 600; margin-bottom: 0.75rem;}
@media (max-width: 1200px){
	.total-pr .btns {flex-direction: column;}
	.total-pr .btns .banner-down { margin-bottom: 1rem;}
}
@media (max-width: 768px){
	.total-pr .text-area {flex-direction: column; height: auto; padding: 2rem 0;}
	.total-pr .pr-info .des {max-width: inherit; width: 100%;}
}

/* faqs */
.faqs .card { box-shadow:none; border:0; border-bottom:1px solid #eae8ef !important; border-radius:0; text-align: left;}
.faqs .card .collapse.show {border-bottom:1px solid #999 !important;}
.faqs .card .card-header { padding:2rem 0;}
.faqs .card .card-body { padding: 0 0 2rem 0;color:#161817;}
.faqs .card .btn-link { width:100%; display:block; text-align:left; color:#161817; font-size:1.25rem; font-weight:600; background-color:transparent;}
.faqs .accordion .card-header:after { content: "\f282";font-family: "bootstrap-icons";}
.faqs ol li, .article-part ol li {list-style-type: decimal; list-style-position: inside; padding: 0.24rem 0;}

.advance { text-align: left;}
.advance .text-area { background-color: transparent;}
.advance p.name { font-size: 2rem; font-weight: 600; line-height: 1.5;}

/*-----------------------footer-----------------------*/
footer { background-color: #141518; color: #fff; padding-top: 4rem;}
footer ul li:first-child, footer .li-share ul li { font-size: 1.25rem; font-weight: 600;margin-bottom: 1.5rem;color: #fff; height:2rem; padding-top:0; display:flex; align-items:center;}
footer .other-list li { padding: .5rem 0;}
footer .other-list li a {color: #D6D6D9; text-decoration: none;font-size: 0.875rem;}
footer .other-list li a:hover,footer .footer-link a:hover { text-decoration:underline;}
footer ul li:first-child a { font-size: 1.25rem; color: #fff;}
footer .foot-link { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 1rem 0; margin-top: 3rem; font-size:0.75rem; } 
footer .foot-link .footer-bt {display: flex; align-items: center;justify-content: space-between;color: rgba(255,255,255,0.6);}
footer .foot-link .bt-link a { display: inline-block; margin: 0 10px; color: rgba(255,255,255,0.6);}
footer .foot-link .bt-link a:last-child { margin-right: 0;}
footer .li-share {color:#fff; font-weight:600;}
footer .li-share ul { display:flex; flex-direction:row; align-items:center; margin-top:1rem;}
footer .li-share ul li { margin-right:1.5rem;}
footer .li-share ul li a { font-size:1.375rem; color:#fff;}
footer .li-share ul li a:hover {opacity:0.8;}
.back-top {font-size:2rem; color:#ddd; position:fixed; bottom:0.5rem; right:0.5rem; z-index:99;}
.back-top:hover {color:#008aff;}

/*-----------------------aiplayer-----------------------*/
.banner-al {text-align: left;}
.banner-aiplayer {background: #0D0D0D url("../images/ai-player/banner-bg.jpg") no-repeat top center; background-size: cover;}
.banner-aiplayer .container {display: flex; gap:10px;}
.banner-aiplayer .text, .banner-aiplayer .img {color: #fff; flex: 1; width:50%;}
.banner-aiplayer h1 {background: linear-gradient(90deg, #A8F9EF 0%, #6756FA 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-size: 4rem; line-height: 1.2;}
.banner-aiplayer h1 .sub-t {font-size: 2rem;}
.banner-aiplayer .list li, .banner-video .list li {background: none; list-style:disc; list-style-position: inside; padding-left: 0;}
.banner-aiplayer .btn, .banner-aiplayer .mask, .banner-video .btn, .banner-video .mask {border-radius: 31px;}
.banner-al .btns .banner-down, .banner-al .btns .banner-buy { margin-left: 0;}
.banner-al .btns .btn-fill-blue { background-color: #6D4AFF; border-color: #6D4AFF;}

main.main-aiplayer h2.gradient-ai { font-size: 2.5rem; font-weight: bold; background: linear-gradient(90deg, #A8F9EF 0%, #6756FA 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 4rem;}
main.main-aiplayer h2 { color: #fff;}
.main-aiplayer .img-text, .main-aiplayer .more-fe {background-color: #0d0d0d; color: #fff;}
.main-aiplayer .more-fe .container { background: linear-gradient(to bottom, #131015 0%, #281B37 100%); border-radius: 1rem; padding: 4rem; }
.main-aiplayer .more-fe .list {display: flex; flex-wrap: wrap;}
.main-aiplayer .more-fe .list li {flex: 1 1 50%; text-align: left; padding: 8px 0; font-weight: 600;}
.main-aiplayer .more-fe .list li i {color:#6D4AFF; margin-right: 8px; }

/*-----------------------video tool-----------------------*/
.banner-video {background: #221230 url("../images/video-tool/banner-video.jpg") no-repeat top center; background-size: cover;}
.banner-video .text { display: flex; flex-direction: column; align-items: center;}
.banner-video .text .sub-t { font-size: 2rem;}
.banner-video .text h1 { font-size: 4rem; color: #fff; line-height: 1.2; text-align: center;}
.banner-video .btns .btn-fill-blue { background: linear-gradient(to right, #305DF9, #01B5FB); border-color: #01B5FB;}
.banner-video .button_box span { color: #fff; opacity: 0.8; line-height: 2; font-size: 0.8rem;}
.banner-video .button_box .inline_block { display: inline-block;text-align: center; margin-right: 1rem;}
.banner-video .switch_box {display: inline-block;cursor: pointer;user-select:none; margin-top: 2rem;}
.banner-video .switch_box span {font-size: 1rem;line-height: 2.4rem;vertical-align: middle; color: #fff;}
.banner-video .switch_box span.selected {color:#1097FB;}
.banner-video .switch_box span.switch{padding:0 1rem;height: 1.6rem;border:1px solid #fff;border-radius: 1rem;display: inline-block;position: relative;width: 4rem;margin:0 0.4rem;}
.banner-video .switch_box span.switch i{ transition: .1s linear;width: 1.2rem;height: 1.2rem;border-radius: 50%;background-color: #1097FB;position: absolute;top:0.1rem;left: 0.2rem;}
.banner-video .switch_box.current span.switch i{right: 0.125rem;left: auto;}
.banner-video .btn:hover .mask {border-radius: 31px;}

.main-video .img-text {background: url("../images/video-tool/bg-colorful.jpg") no-repeat top center; background-size: cover;}
.main-video .img-text p.des { margin-bottom: 4rem;}
.sec-convert {background: url("../images/video-tool/bg-sec1.png") no-repeat top left; background-size: cover; border-radius: 2.4rem; position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; height: 560px; margin-bottom: 8rem;}
.sec-convert .text {width: 50%; color: #fff; text-align: left; padding-left: 4rem;}
.sec-convert .text h2 {color: #fff; text-align: left;}
.sec-convert .text p.des {margin-bottom: 0;}
.sec-convert img {position: absolute; right: 5%; bottom: -10%;}

.main-video .img-text .text-area, .hot-website .text-area {background-color: transparent; text-align: left; margin-top: 0; padding: 0 2rem;}
.main-video .img-text .text-area p.name,.hot-website .text-area p.name {font-size: 1.2rem; margin: 1rem 0 0.5rem;}

.main-video .version-compare .text-area .list li {list-style: none;}
.hot-website {background-position: bottom center;}
.hot-website .text-area {margin: 2rem 0; background: linear-gradient(180deg, rgb(245, 245, 255) 0%, rgb(235, 243, 254) 100%); padding: 2rem;}
.hot-website .row { align-items: center; justify-content: center;}


/*store*/
.banner-buynow {background:linear-gradient(#f6f6f6 60%,#fff 100%);}
.banner-buynow .text-area {padding: 2.5rem; margin: 1.5rem 0; position: relative; }
.banner-buynow .text-area:hover { border: 2px solid #2C75FF;}
.banner-buynow .text-area .btn, .recom-tech .btn { width: 180px;}
.banner-buynow .text-area ul {margin-top: 1.5rem; border-top: 1px solid #D8D8D8; text-align: left; padding-top: 1.25rem;}
.banner-buynow .text-area ul li, .recom-tech .text ul li {list-style: disc inside; padding: 0.25rem 0; font-weight: 500;}
.banner-buynow .text-area p.version {font-size: 1.75rem; font-weight: bold;}
.banner-buynow .text-area p.price {font-size: 1rem;}
.banner-buynow .text-area p.price span {font-size: 1.75rem; font-weight: bold; color: #F76400;}
.banner-buynow .text-area .label {position: absolute; width: 132px; height: 2rem; background: url("../images/generic-icons/label-most.png") no-repeat 0 0;background-size: 132px 32px; color: #fff; font-weight: bold; top: -0.2rem; left: 50%; margin: 0 0 0 -4rem; line-height: 2rem;font-size: 0.875rem;}

.banner-buynow .buy-info, .banner-buynow .buy-info ul{display: flex; justify-content: space-around; align-items: center;}
.banner-buynow .buy-info {margin-top: 2rem;}
.banner-buynow .buy-info ul { margin:0;}
.banner-buynow .buy-info ul li { display: flex; align-items: center; font-size: 0.875rem; font-weight: 500;line-height: 1.2; text-align: left; margin: 0.5rem 1rem;color: #555;}
.banner-buynow .buy-info ul li img { margin-right: 1rem;}
.borderdash {border: 1px dashed #D5D5D5; border-radius: 0.5rem;}
.banner-buynow p.borderdash { font-size: 0.75rem; color: #555; padding: 0.5rem; margin-top: 1.5rem; line-height: 1.2;}

.recom-tech { background-color: #EEF3FF; border-radius: 0.75rem; display:flex; align-items: center; padding: 3rem; justify-content: space-around;}
.recom-tech .text { text-align:left; margin: 0 2rem;}
.recom-tech .text p.name { font-size: 1.5rem; font-weight: 600;}
.recom-tech .price-buy span { display: block; font-size: 1.75rem; font-weight: bold; color: #F76400;}
.faqs .card {background-color: transparent;}


/*support*/
.support {background:linear-gradient(#f6f6f6 0,#fff 50%); position: relative; overflow: hidden;}
.support h1 {margin-top: 3rem;}
.support img.bg {position: absolute; left: 60%; top: 0; z-index: 0;}
.support .container {z-index: 2; position: relative; text-align: left;}
.support .container p.des {max-width: 50%; margin: 0; margin-bottom: 3rem;}
.support .text-area {padding: 3rem; text-align: left;}
.support .text-area p.text-link {margin-bottom: 0;}
.support h2 {margin-top: 5rem; margin-bottom: 3rem!important;}


/*seo article*/
/*article leftsider nav */
.article-leftsidernav{position: relative;position: sticky;border-left: 0;top: 0; z-index: 999;height: 0px;overflow: visible;}
.article-leftsidernav .box_all{position: absolute;left: -300px;top: 2rem;z-index: 998;background: #fff; box-shadow:0 0 1rem rgba(0,0,0,0.1);width: 240px !important;transition: 400ms; border-radius: 0 1rem 1rem 0;}
.article-leftsidernav .box_all.show{left: 0;}
.article-leftsidernav .box_all.current{position: fixed;  top: 0px;}
.article-leftsidernav .box_all.fixed{opacity: 0;visibility: hidden;}
.article-leftsidernav .box_all.show .button{left: -50px;}
.article-leftsidernav .box_all .button{background:#fff;padding: 1rem 1.25rem; display: block;border-radius: 0 50% 50% 0;position: absolute;left: 300px;top: 0px;cursor: pointer;transition: 400ms;  text-align: center;}
.article-leftsidernav .box_all .button i {color: #161817; font-size: 1.5rem; font-weight: bold;}
.article-leftsidernav .box_all .arrow{position: absolute;padding: 0.75rem;text-align: center;right: 0.25rem;top: 0.75rem;color: #161817;cursor: pointer; font-size: 1.25rem; font-weight: bold;}
.article-leftsidernav .box_all .box{padding: 1.6rem 0 0 0;}
.article-leftsidernav .box_all .box .t{font-size: 20px;line-height: 24px;font-weight: bold;margin-bottom: 10px; margin-left: 1rem;}
.article-leftsidernav .box_all .box .list{padding-left: 22px;margin-bottom: 18px;position: relative;overflow: hidden; margin-right:0.5rem;}
.article-leftsidernav .box_all .box .list ul { margin:0;}
.article-leftsidernav .box_all .box .list:before,.article-leftsidernav .box_all .box .list .line{content: '';border-left: 2px solid #EBEBEB;width: 0px;height: 100%;position: absolute;left: .5rem;top: .5rem;z-index: 1;margin: 0;}
.article-leftsidernav .box_all .box .list .line{border-left: 2px solid #0072ff;transition: 300ms;}
.article-leftsidernav .box_all .box .list ul li{font-size: 0.875rem;line-height: 1.4;padding: .4rem .5rem; cursor: pointer;}
.article-leftsidernav .box_all .box .list ul li.current{background:#F4F4F8;color: #0072ff;font-weight: bold;}
.article-leftsidernav .box_all .box .list ul li:hover{color: #0072ff;font-weight: bold;;}
.article-leftsidernav .box_all .box .link{font-size: 18px;line-height: 22px;font-weight: bold;position: relative;border-top: 1px solid #E5E5E5;padding: 14px 0 14px 32px;cursor: pointer;;}
.article-leftsidernav .box_all .box .link img{position: absolute;left: 4px;top: 13px;}
.article-leftsidernav .box_all .share {margin: 0; display:flex; align-items:center; justify-content:space-around;}
.article-leftsidernav .box_all .share li{ width:33.33%;background: #ECECF3;text-align: center;line-height: 35px;font-size: 18px;cursor: pointer;}
.article-leftsidernav .box_all .share li.b2{background: #F4F4F8;}
.article-leftsidernav .box_all .share li.share_facebook{color: #3C5998;}
.article-leftsidernav .box_all .share li.share_twitter{color: #1DA1F2;}
.article-leftsidernav .box_all .share li.share_linkedin{color: #0077B5;}
.article-leftsidernav .box_all .share li.share_reddit{color: #FF4500;}
.article-leftsidernav .box_all .share li.share_reddit i::before {font-weight: bold;}


.banner-article {background: #f3f5f7; padding: 2rem 0 3rem;}
.banner-article-index {background: #313F63; color: #fff;}
.banner-article h1 {font-size: 3.2rem; line-height: 1.2; margin-top: 2rem;}
.banner-article p.des { margin: 1.6rem 0;line-height: 1.6; font-weight: 500;}
.banner-article .crumb a, .banner-article .editors a { color: #19191A; font-weight: 500; font-size: 1rem;}
.banner-article-index h1, .banner-article-index .crumb a  {color: #fff;}
.banner-article .btn {font-size: 1.125rem; padding-left: 1.2rem; padding-right: 1.2rem; width: auto;}
.banner-article .editors {display: flex; margin-top: 3rem;justify-content: space-between;}
.editors .text { display: flex;align-items: center; width: 50%;}
.editors .editor-head img { border-radius: 2.2rem;}
.editors .editor-content { margin-left: 1rem;}
.editors .editor-content b {display: block; font-weight: normal;font-size: 0.875rem; opacity: 0.7;}
.editors .editor-content span, .editors .editor-content a {font-size: 1rem; font-weight: 600;}
.editors .editor-content span.date {position: relative; padding-left: 1.2rem;font-size: 1rem; font-weight: normal;}
.editors .editor-content span.date::before{ position: absolute; left: -1.6rem; top: -1rem; font-size: 1.6rem; font-weight: bold;content: '.'; padding-left: 2rem;}
.editors .editor-content i {color: #3FA9F7; font-size: 1.2rem; margin: 0 0.4rem;}

.article-part { padding: 3rem 0;}
.article-part a { color: #0072ff;}

.tips {background: #F0FEFF; padding: 1.2rem!important;}
.tips i {color: #0072ff; margin-right: 0.4rem;}

.article-part .summary { padding: 2rem; border: 1px dashed #666; border-radius:1.2rem; border-top: 2px solid #666; margin-bottom: 2.4rem;}
.article-part .summary p { padding: 0; }
.article-part .btn { background-color: #0ec75c; display: flex; align-items: center;padding: 0; width: 22rem; height: 72px;border-radius: 12px; font-size: 1.2rem; font-weight: 600; line-height: 1.2;}
.article-part .btn:hover { border: 0;}
.article-part .btn span.icon { background-color: #0DB554; height: 72px; width:72px; border-radius: 12px 0 0 12px; display: flex; align-items: center; justify-content: center; margin-right: 1.2rem;}
.article-part .btn span.icon i { font-weight: 800;}

.article-part span.label-bluem { background-color: #83A6FE;padding: 2px 4px; border-radius: 2px; font-weight: bold; color: #fff;}
.article-part ul, .article-part ol { margin-left: 0.8rem; counter-reset: item;}
.article-part ul li, .article-part ol li { padding: 0.5rem 0;list-style-position:outside; padding-left: 0.6rem;}
.article-part ol { margin-left: 1.6rem;}
.article-part ul { padding-left: 0; margin-left: 2rem;}
.article-part ul li {list-style:disc; padding-left: 0;}
.article-part ol li::marker { font-weight: 500;}

.article-part .quick-nav { border-left: 2px solid #008aff; padding-left: 1rem; margin-bottom: 1rem;}
.article-part .quick-nav a { font-weight: 500;}
.article-part .quick-nav ul { margin: 0;}
.article-part .list-triangle li { margin: 0; list-style: none; padding: 0.3rem 0;}
.article-part .list-triangle li:last-child { padding-bottom: 0;}
.article-part h2 { font-size: 2.2rem; line-height: 1.2; padding-top: 1rem;}
.article-part h3 { font-size: 1.4rem; line-height: 1.2; padding-top: 1rem; margin-bottom: 0;}
.article-part p { line-height: 1.8; margin: 0; padding: 1rem 0;}
.article-part .quick-nav p{ padding-top: 0;}

.article-part .accordion .card {border: 0; border-radius: 0; box-shadow: none;border-bottom: 1px solid #eee;}
.article-part .accordion .card .card-header, .article-part .accordion .card-body {padding: 0;color: #19191A;}
.article-part .accordion .card .card-header h3 { padding: 1.2rem 0;}
.article-part .accordion .card .card-header h3 button{ display: block; width: 100%; text-align: left; background: none; color: #19191A; font-size: 1.2rem; font-weight: 600;}

.article-part .table-style { margin: 2rem 0;}
.article-part .table-style th { background-color: #eee;}
.article-part .table-style th.bg-blue { color: #fff;}
.article-part .table-style td, .article-part .table-style th { border: 1px solid #DEE4E8;}
.article-part .table-style td { vertical-align: text-top; padding: 8px 8px 8px 0;}
.article-part .table-style td b { font-weight: 600;}
.article-part .table-style p.name {background-color: #F0F5F8; font-size: 1.8rem; font-weight: 700; padding-left: 2.4rem;}
.article-part .table-style li { line-height: 1.4; padding: 0.6rem 0; }

.article-part .table-style-1 {border-collapse: collapse;  border-spacing: 0; width: 100%;margin-top: 1.2rem;}
.article-part .table-style-1 td { border: 0; padding:0.8rem 1.6rem; font-size: 1.6rem; vertical-align: middle;}
.article-part .table-style-1 tr td:first-child { width: 40%;}
.article-part .table-style-1 tr.even {background: #f4f4f4;border-bottom: 1px solid #ddd; }
.article-part .table-style-1 tr.odd {background: #f9f9f9;border-bottom: 1px solid #ddd;}
.article-part .table-style-1 tr:last-child{ border-bottom: 0;}
.article-part table .row-hover tr:hover {background: #f1f1f1;}

.article-part .table-style-2 {border: 1px solid #f0f0f0; }
.article-part .table-style-2 i { font-size: 2rem; color: #0080FF;}
.article-part .table-style-2 i.ion-ios-close-circle { color: #999;}
.article-part .table-style-2 td { width: 33.33%; padding: 1rem 1.6rem; vertical-align: middle; line-height: 1.4; font-size: 1.5rem; border: 1px solid #f0f0f0;}
.article-part .table-style-2 td img,.article-part .table-style-1 td img { margin-right: 1rem;}
.article-part .table-style-2 .t-title td, .article-part .table-style-2 .t-title1 td  { font-weight: 600; text-align: center;}
.article-part .table-style-2 .t-title1 td { font-size: 2.0rem; padding: 1.6rem 0;}
.article-part .table-style-2 tr:nth-child(2n) { background-color: #f9f9f9;}
.article-part .table-style-2 tr:last-child { border-bottom: 0;}
.rate-bar { width: 40%; margin-right: 12px; border-radius: 4px; background: #ddd; height: 4px;  float: left; margin-top: 1.2rem; }
.rate-bar-item {height: 4px; border-radius: 4px;  background: #4a60f5;}
.article-part .table-style-2 td .btn { padding: .6rem 2.4rem;}


.article-part .table-style-3 td { padding-left: 12px;font-size: 16px;}
.article-part .table-style-3 tr { background-color: #f4f4f4;}
.article-part .table-style-3 tr:nth-child(2n){ background-color: #fff;}
.article-part .table-style-3 li { padding-left: 0;}
.article-part .table-style-3 td del { color: #999;}
.article-part .table-style-3 th { padding: 8px 0; text-align: center;}
.article-part .table-style-4 td {padding: 8px; font-size: 14px;}
.article-part .table-style-4 ol {margin:0; padding-left: 12px;}
.article-part .table-style-4 ol li { font-size: 14px;}


/*ul*/
ul.square li {list-style-type: square;}
ul.rhombus { list-style: none; margin-left: 12px; }
ul.rhombus li { list-style: none; }
ul.rhombus li::before { content: ""; display: inline-block;width: 6px; height: 6px; transform: rotate(45deg); margin-right: 10px; position: relative; top: -3px; background-color: #19191A;}
ul.li-green li::marker { color: #0DB554; font-size: 1.2em;}
ul.li-blue li::marker { color: skyblue; font-size: 1.2em;}
ul.li-organge li::marker { color: darkorange; font-size: 1.2em;}

/*ol*/
ol.circle-no {list-style: none; margin-left: 0;}
ol.circle-no li {list-style: none; display: flex;}
ol.circle-no li span.no { margin-right: 0.6rem; font-weight: bold;}
ol.circle-no li a { display: contents!important;}
ol.circle-no li b { display: contents!important;}

.pros-cons .title { font-weight: bold; padding-bottom: 0.4rem;}
.pros-cons .pros, .pros-cons .cons { border: 1px solid #eee; border-radius: 0.4rem; padding: 0.8rem; position: relative; margin: 1rem 0;}
.pros-cons .name { font-weight: bold; padding: 0.2rem;; margin: 0;position: absolute; top: -1rem;; left: 1.2rem; background-color: #fff; }
.pros-cons .pros .name { color: #3EC78E;}
.pros-cons .cons .name { color: #DA1D00;}

.article-part .relate { padding: 0; margin: 2rem 0; border-top: 1px solid #dee2e6; padding-top: 2.4rem; border-radius: 0;}
.article-part .relate h3 { margin: 0;}
.article-part .relate ul { display: flex;flex-wrap: wrap;justify-content: space-between; margin: 0;}
.article-part .relate li { width: calc(50% - 15px);padding: 0.75rem 0!important; padding-left: 0!important; font-size: 1rem; list-style: none;}
.article-part .relate li a { color: #19191A; font-weight: 500;}
.article-part .relate li::before {display: none;}
.article-part .relate .text-date { display: block; opacity: 0.5; font-size: 1rem;}


.article-part .editor-introduce { background: #fff; box-shadow: 0px 0px 12px 0px rgba(134, 173, 212, 0.19); padding: 3rem; margin-top: 1rem; border-radius: 1rem; }
.editor-introduce img { width: 3rem; height: 3rem; border-radius: 1.5rem; margin-right: 1.2rem;}
.editor-introduce .editor-info { display: flex; align-items: center; margin-bottom: 1rem;}
.editor-introduce .editor-info p.name a { color: #161817; font-size: 1.2rem; font-weight: 600;}
.editor-introduce .editor-info p.name a i { color: #0072ff; margin-left: 1rem;}
.editor-introduce p { padding: 0;}

.article-list { padding-top: 0;}
.article-list h2 { margin-top: 6rem; padding: 0;}
.article-list .col-md-4 { display: flex; align-items: center;}
.card-list-item {background-color: #00c0cf; border-radius: 0.8rem; min-height: 330px; margin: 1rem 0 0;}
.card-list-item a {padding: 1.4rem; color: #fff; width: 100%; height: 330px; display: flex;flex-direction: column; font-size: 1rem;justify-content: center;}
.card-list-item a:hover { text-decoration: none;}
.card-list-item a h3 {font-size: 1.6rem; margin-top: 2.0rem; margin-bottom: 1rem; color: #fff; font-weight: 500; line-height: 1.4;}
.card-list-item a span.published {font-size: 0.8rem; font-weight: normal;}
.card-list-item a span.link-more {opacity: 0.7; transition: all ease .185s;margin-top: auto;font-weight: 600; font-size: 0.875rem;}
.card-list-item a:hover span.link-more {opacity: 1;}
.card-list-item1 { background-color: #00a3bb;}
.card-list-item2 { background-color: #2297f2;}
.card-list-item3 { background-color: #1875dd;}
.card-list-item4 { background-color: #7ed321;}
.card-list-item5 { background-color: #28be00;}
.card-list-item6 { background-color: #7e54f2;}
.card-list-item7 { background-color: #6454f2;}


.ar-list-item li { font-size: 1rem;line-height: 1.4rem; font-weight: 500; margin: 0 0 0.6rem; padding: 0; }
.ar-list-item li a {color: #161817; }
.article-list .relate { border-top: 0; padding: 0; margin: 0;}
.article-list .relate ul li { border-bottom: 1px solid #dee2e6;}
.article-list .relate h4 { font-size: 1.2rem; font-weight: 500; margin-top: 1rem;margin-bottom: 0;}
.article-list .relate img { border-radius: 1rem; margin-right: 0.8rem;}
.article-list .relate p { font-size: 0.875rem;}
.article-list .relate p.des { opacity: 0.8; font-weight: 500;}
.article-list .relate span { margin: 0 0.4rem;}
.article-list .relate .show-more { border: 1px solid #dee2e6; margin-top: 1rem; text-align: center; padding: 0; line-height: 2.4;}
.article-list .relate .show-more a { display: block; color:#07273d;}
.article-list .relate .show-more a:hover { text-decoration: none; background: #efefef;}

.article-list .os-another {margin-top: 2rem;}
.article-list .os-another .card-list-item { background: #fff; padding: 2rem; height: auto; min-height: inherit; border: 1px solid #dee2e6;box-shadow: 0px 0px 12px 0px rgba(134, 173, 212, 0.19);}
.article-list .os-another .card-list-item a { height: auto;}
.article-list .os-another .card-list-item h2 {margin: 0;}
.article-list .os-another .card-list-item p, .article-list .os-another .card-list-item a span.link-more {color:#07273d; opacity: 1;}
.article-list .os-another .card-list-item a span.link-more {font-size: 1rem; margin-top: 2rem;}
.article-list .down-bt { margin-top: 2rem;}
.down-bt h2 { margin: 0; margin-bottom: 1rem; font-size: 2.4rem;}
.down-bt .pr-logo {margin-right: 2rem;}
.down-bt .btns {margin-top: 2rem;}
.down-bt p.des {font-size: 1.3rem; font-weight: 400; opacity: 0.8;}
.down-bt .col-md-8 { display: flex; flex-direction: row; padding: 3rem 0;}


.main-author .article-part {background: url("../images/article/editor/banner-author.jpg") no-repeat center top; background-size: 100%; padding-top: 300px;}
.main-author .article-part .col-md-4 .text {background: #fff; border:1px solid #dee2e6; padding: 3rem; display: flex; flex-direction: column; align-items: center;}
.main-author .article-part .col-md-4 img {border-radius: 48px;}
.main-author .article-part .col-md-4 p {padding: 0;}
.main-author .article-part .col-md-4 p.name {font-size: 1.8rem; line-height: 1.4; margin-top: 0.6rem; color: #00aee6; font-weight:500;}
.main-author .article-part .col-md-4 i {padding: 1rem 0; color: #2D7BBD; font-size: 1.4rem;}
.main-author .article-part .col-md-8 .text { padding: 3rem; padding-top: 6rem;}
.main-author .article-part .col-md-8 h2 { font-size: 1.8rem; padding-top: 2rem;}
.main-author .text .list { border:1px solid #dee2e6;}
.main-author .text .list li { padding: 1rem; }
.main-author .text .list li p { padding: 0;}
.main-author .text .list .list-title { font-size: 1rem; font-weight: 500; border-bottom:1px solid #dee2e6;}
.main-author .text .list .list-des { font-size: 0.875rem; padding: 0.6rem 0;}
.main-author .text .list .list-date { font-size: 0.785rem;opacity: 0.6;}


/*about-page*/
.twopart-word-img {margin: 5rem 0;}
.twopart-word-img:last-child {margin-bottom: 0;}
.twopart-word-img .col-md-6 {display: flex; align-items: center;}
.twopart-word-img h2 {margin-top: 0;}
.twopart-word-img img { border-radius: 1.5rem;}
.twopart-word-img .text-area {background-color: transparent;}