@charset "utf-8";
/* CSS Document */
.text-secondary { color: #ffa818; }
.strong { font-weight: bold; }

/** banner top **/  
.banner-article { height: 320px; padding: 65px 0 0; padding: 6vh 0 0; background-color: #f7f7f7; }
.banner-article .back { background-repeat: no-repeat; background-position: center top; }
.banner-article .heading { line-height: 1.2em; font-size: 36px; font-size: 3.2vh; font-weight: normal; margin: 0 0 10px; margin: 0 0 1vh; }
.banner-article .desc { line-height: 1.2em; font-size: 18px; font-size: 1.8vh; }
.banner-article .action { margin: 25px 0 0; margin: 2.5vh 0 0; }  
.banner-article .yellow-gradient-btn .fm { margin: 0 0 0 10px; }
.banner-article .platform { margin: 10px 0 0; margin: 1vh 0 0; } 
.banner-article .platform li { display: inline-block; cursor: pointer; margin: 0 5px; }
.banner-article .platform li .fm {margin: 0 5px 0 0; }
.banner-article .platform li.active { color: #ffa818; }

.banner-guide .back { background-image: url("https://photo.wondershare.com/images/en/banner-guide.jpg"); } 
.banner-topic .back { background-image: url("https://photo.wondershare.com/images/en/banner-topic.jpg"); }

/** guide content **/ 
.how-list { margin: 25px 0; }
.how-list li { line-height: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.how-list li a:hover { color: #ffa818; text-decoration: underline; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -ms-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; }
.guide-cont .intro .next { margin: 55px 0 0; }  

/** banner downloads **/ 
.article-downloads { padding: 45px 0; padding: 4.5vh 0; }  
.article-downloads .heading { line-height: 1.5em; font-size: 36px; font-size: 3.6vh; font-weight: normal; margin: 0 0 10px; margin: 0 0 1vh; }
.article-downloads .heading .logo { display: inline-block; width: 56px; width: 5.6vh; height: 56px; height: 5.6vh; margin: 0 15px 0 0; margin: 0 1.5vh 0 0; vertical-align: top; }
.article-downloads .heading .logo-toolkit{ background: url("https://photo.wondershare.com/vis-201709/style/images/logo-toolkit.png") center no-repeat; background-image: url("https://photo.wondershare.com/vis-201709/style/images/logo-toolkit.svg"), none; background-size: contain; }
.article-downloads .desc { line-height: 1.2em; font-size: 18px; font-size: 1.8vh; }
.article-downloads .action { margin: 30px 0 0; margin: 3vh 0 0; } 
.article-downloads .yellow-gradient-btn .fm { margin: 0 0 0 10px; }
.article-downloads .platform li { display: inline-block; cursor: pointer; margin: 0 5px; }
.article-downloads .platform li .fm {margin: 0 5px 0 0; }
.article-downloads .platform li.active { color: #ffa818; }

/** sidebar **/ 
.guide_fl_side .listmenu { margin: 0 0 50px; }
.guide_fl_side .listmenu h3 { line-height: 1.5em; font-size: 20px; font-weight: normal; border-bottom: 1px solid #e0e0e0; padding: 10px 0; margin: 0 0 15px; }
.guide_fl_side .listmenu h3 .fm { font-size: 36px; margin: 0 20px 0 0; }  
.guide_fl_side .listmenu h3 .icon-topic { display: inline-block; width: 30px; height: 34px; margin: 0 20px 0 0; vertical-align: top; background: url("https://photo.wondershare.com/vis-201709/style/images/topic-ico.png") no-repeat;background-image: url("https://photo.wondershare.com/vis-201709/style/images/topic-ico.svg"),none; }
.guide_fl_side .listmenu h4 { line-height: 1.2em; font-size: 16px; padding: 10px 20px 10px 53px; font-weight: normal; cursor: pointer; margin: 0; position: relative; }
.guide_fl_side .listmenu h4:after { content:'\e90c'; display: block; line-height: 20px; font-family: 'fotophire'; font-size: 16px; font-weight: normal; position: absolute; right: 20px; top: 10px; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }
.guide_fl_side .listmenu h4.curr { color: #ffa818; }
.guide_fl_side .listmenu h4.curr:after { transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); -webkit-transform: rotate(90deg); }
.guide_fl_side .listmenu h5 { line-height: 1.2em; font-size: 14px; font-weight: normal; cursor: pointer; padding: 10px 0; margin: 0; position: relative; }
.guide_fl_side .listmenu h5.curr { color: #ffa818; }
.guide_fl_side .listmenu h5:before { content: '+';  display: block; line-height: 18px; font-family: 'fotophire'; font-size: 18px; font-weight: normal; position: absolute; left: -20px; top: 7px; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }
.guide_fl_side .listmenu h5.curr:before { content: '-'; }
.guide_fl_side .listmenu ul { display: none; padding: 5px 20px 5px 70px; margin: 0; }
.guide_fl_side .listmenu ul.sub { padding: 5px 0 5px 15px; } 
.guide_fl_side .listmenu li { padding: 3px 0; }
.guide_fl_side .listmenu li a { line-height: 1em; font-size: 14px; }
.guide_fl_side .listmenu li a.curr { color: #ffa818; }

/** topics **/
.banner-topic .products { line-height: 1.2em; margin: 20px 0 0; margin: 2vh 0 0; }
.banner-topic .products a { display: inline-block; line-height: 1.2em; font-size: 20px; font-size: 2vh; color: #fff; margin: 0 25px; margin: 0 2.5vh; }
/* ipad pro */
@media (min-height: 1365px){
.banner-topic { padding: 1vh 0 0; }
}
@media (max-width: 767px){
.banner-article { padding: 4vh 0 0; }
.banner-topic .products a { margin: 0 1vh; } 
.banner-topic a { margin: 0 0 10px; } 
}
.resource-cont .rgt .title { font-weight: normal; }  
.resource-cont .rgt .time { line-height: 32px; font-size: 14px; }
.resource-cont .rgt .time .avatar { display: inline-block; width: 32px; height: 32px; overflow: hidden; vertical-align: top; border: 1px solid #ffa818; border-radius: 100%; margin: 0 10px 0 0; background-color: #f7f7f7; }
.resource-cont .rgt .time .avatar img { width: 100%; }
.resource-cont .rgt .time a { color: #ffa818; margin: 0 20px 0 0; }
.resource-cont .rgt .time abbr { margin: 0 0 0 15px; }
@media (max-width: 1015px) {
.resource-cont .topic-menu { width: 100%; }
.resource-cont .rgt { padding-left: 0; margin-top: 50px; margin-top: 5vh; }
}

/** topic detail **/
.banner-detail { height: 420px; padding: 50px 0 0; padding: 5vh 0 0; background-color: #f7f7f7; }
.banner-detail .back { background-repeat: no-repeat; background-position: center top; }
.banner-detail .heading { line-height: 1.2em; font-size: 36px; font-size: 3.2vh; font-weight: normal; margin: 0 0 10px; margin: 0 0 1vh; }
.banner-detail .desc { line-height: 1.2em; font-size: 18px; font-size: 1.8vh; margin: 0 0 20px; }
.banner-detail ul li { line-height: 1.4em; font-size: 18px; font-size: 1.8vh; }
.banner-detail .play-video { margin: 35px 0 0; margin: 3.5vh 0 0; } 
.banner-detail .play-video a { font-size: 16px; font-size: 1.6vh; color: #fff; }
.banner-detail .play-video a .fm { font-size: 22px; margin: 0 5px 0 0; }
.banner-detail .action .yellow-gradient-btn:first-child { margin: 10px 10px 10px 0; }
.banner-detail .yellow-gradient-btn .fm { margin: 0 0 0 10px; }
.banner-detail .front .container-lg { position: relative; }
.banner-detail .feature-pic { width: 354px; height: 354px; background-repeat: no-repeat; background-position: center; position: absolute; right: 0; top: 50%; margin-top: -207px; }
@media (max-width:1215px){
.banner-detail { text-align: center; }
.banner-detail .action .yellow-gradient-btn:first-child { margin: 10px; }
.banner-detail .feature-pic { display: none; }
}
/* ipad pro */
@media (min-height: 1365px){
.banner-detail { padding: 1vh 0 0; }
}

.topic-toolkit .back { background-image: url("https://photo.wondershare.com/images/en/topic-toolkit.jpg"); } 
.topic-maximizer .back { background-image: url("https://photo.wondershare.com/images/en/topic-maximizer.jpg"); }
.topic-focus .back { background-image: url("https://photo.wondershare.com/images/en/topic-focus.jpg");}
.topic-visme .back { background-image: url("https://photo.wondershare.com/images/en/topic-visme.jpg");}

.banner-resource .back { background-image: url("https://photo.wondershare.com/images/en/banner-resource.jpg"); } 

.topic-toolkit .feature-pic { background-image: url("https://photo.wondershare.com/images/en/feature-toolkit.png") }
.topic-maximizer .feature-pic { background-image: url("https://photo.wondershare.com/images/en/feature-maximizer.png") }
.topic-focus .feature-pic { width: 372px; background-image: url("https://photo.wondershare.com/images/en/feature-focus.png") }

/** sidebar **/ 
.fsb_style  {width: 100%; height: 100%; position: fixed; z-index: 30; top: 0; left: 0; overflow-y: auto; }
.fixed-sidebar { width: 200px; position: absolute; top: 580px; right: 50%; margin-right: -740px; z-index: 30; background-color: #fff; }
.fixed-sidebar .title { line-height: 1.2em; font-size: 18px; color: #ffa818; font-weight: normal; padding: 10px 15px; margin: 0; background: #3e3b3c; }
.fixed-sidebar .listmenu { border-left: 1px solid #ededed; border-right: 1px solid #ededed; } 
.fixed-sidebar .listmenu h4 { line-height: 1.2em; font-size: 14px; padding: 10px 15px; font-weight: normal; cursor: pointer; margin: 0; border-bottom: 1px solid #ededed; position: relative; }
.fixed-sidebar .listmenu h4:after { content:'+'; display: block; line-height: 18px; font-family: 'fotophire'; font-size: 18px; font-weight: normal; position: absolute; right: 10px; top: 7px; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }
.fixed-sidebar .listmenu h4.curr { color: #ffa818; }
.fixed-sidebar .listmenu h4.curr:after { content:'-';}
.fixed-sidebar .listmenu h5 { line-height: 1.2em; font-size: 14px; font-weight: normal; cursor: pointer; padding: 10px 0; margin: 0; }
.fixed-sidebar .listmenu h5.curr { color: #ffa818; }
.fixed-sidebar .listmenu ul { display: none; padding: 5px 15px; margin: 0; border-bottom: 1px solid #e0e0e0; }
.fixed-sidebar .listmenu ul.sub { padding: 5px 0 5px 20px; } 
.fixed-sidebar .listmenu li { padding: 3px 0; }
.fixed-sidebar .listmenu li a { display: block; line-height: 1.2em; font-size: 12px; }
.fixed-sidebar .listmenu li a.curr { color: #ffa818; }
@media (max-width: 1440px) {
.fixed-sidebar { width:170px; margin-right: -680px; }
}
@media (max-width: 1360px) {
.fixed-sidebar { width:160px; margin-right: -670px; }
}
@media (max-width: 1300px) {
.fixed-sidebar { position: fixed; }
.fixed-sidebar-togg { width: 100px; right: 0; top: 580px; margin-right: 0; border-radius: 5px 0 0 5px; overflow: hidden; }
.fixed-sidebar-togg2 { right: 0; top: 580px; margin-right: 0; border-radius: 0 2px 2px 0; overflow: hidden; }
.fixed-sidebar-togg .title { font-size: 14px; } 
.fixed-sidebar-togg .listmenu { display: none; }
}
@media (max-width: 767px) {
.fixed-sidebar { display: none; }
}

.part-list { margin: 45px 0; padding: 30px; background-color: #f7f7f7; } 
.part-list li { margin: 0 0 10px; }
.part-list li:before { color: #ffa818;  }
.part-list li a { font-weight: normal; }

.recommend-box { margin: 45px 0 0; padding: 30px; background-color: #f7f7f7; }
.recommend-box .title { line-height: 2em; font-size: 20px; font-weight: bold; margin: 20px 0; }
.recommend-box .title .logo { display: inline-block; width: 42px; width: 4.2vh; height: 42px; height: 4.2vh; margin: 0 10px 0 0; margin: 0 1vh 0 0; vertical-align: top; }
.recommend-box .title .logo-toolkit{ background: url("https://photo.wondershare.com/vis-201709/style/images/logo-toolkit.png") center no-repeat; background-image: url("https://photo.wondershare.com/vis-201709/style/images/logo-toolkit.svg"), none; background-size: contain; }
.recommend-box .title .logo-maximizer{ background: url("https://photo.wondershare.com/vis-201709/style/images/logo-maximizer.png") center no-repeat; background-image: url("https://photo.wondershare.com/vis-201709/style/images/logo-maximizer.svg"), none; background-size: contain; }
.recommend-box .title .logo-focus{ background: url("https://photo.wondershare.com/vis-201709/style/images/logo-focus.png") center no-repeat; background-image: url("https://photo.wondershare.com/vis-201709/style/images/logo-focus.svg"), none; background-size: contain; }
.recommend-box .boxs-pic { display: inline-block; width: 225px; height: 200px; position: relative; }
.recommend-box .boxs-pic .focus-box,.recommend-box .boxs-pic .maximizer-box,.recommend-box .boxs-pic .toolkit-box { width: 103px; height: 142px; background-repeat: no-repeat; background-position: center; position: absolute; top: 50px; }
.recommend-box .boxs-pic .focus-box { background-image: url("https://photo.wondershare.com/vis-201709/images/fotofocus-b.png"); left: 0; }
.recommend-box .boxs-pic .maximizer-box { background-image: url("https://photo.wondershare.com/vis-201709/images/foto-maximizer-b.png"); left: 60px; }
.recommend-box .boxs-pic .toolkit-box { background-image: url("https://photo.wondershare.com/vis-201709/images/fotophire-box.png"); left: 120px; }
.recommend-box .boxs-video { padding: 30px 0 0; }
@media (max-width: 1015px) {
.recommend-box { text-align: center; }
}
.learn-more a { color: #ffa818; text-decoration: underline; }

.arc-detail .part { padding: 0 0 45px; margin: 45px 0 0; border-top: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; }
.arc-detail .author-cont { padding-bottom: 20px; margin-top: 0; border-top: none; }
.arc-detail .bread-nav { padding: 20px 0; }

.all-topics { padding: 40px 0; padding: 4vh 0; background-color: #f7f7f7; }
.all-topics .title { margin-bottom: 20px; }
.all-topics ul li { float: left; width: 25%; padding: 5px 0; }
@media (max-width: 768px) {
.all-topics ul li { width: 33%; }
}
@media (max-width: 479px) {
.all-topics ul li {  width: 50%;  font-size: 14px; }
}
/** resource center **/
.banner-resource { padding: 100px 0 0; padding: 10vh 0 0; }
.banner-resource .text { width: 420px; }
@media (max-width:1215px){
.banner-resource .text { width: 100%; }
}
.resource-list { padding: 55px 0 85px; padding: 5.5vh 0 8.5vh; }
.resource-list .text-content { margin-bottom: 50px; margin-bottom: 5vh; }
.helpful { background-color: #fff; box-shadow: 0 1px 11px 0 rgba(222, 222, 222, 0.5); }
.helpful .banner-tools img { width: 100%; }
.helpful .helpful-how { padding: 25px; }
.helpful .helpful-how .title { font-size: 24px; font-size: 3vh; font-weight: 500; }
.helpful-tools .helpful-how { padding: 25px 25px 31px; padding: 2.5vh 2.5vh 3.1vh; }
.mobile-solution { margin: 0 0 30px; }
.helpful-tools .how-list { height: 366px; overflow: hidden; }  
.mobile-solution .how-list, .online-solution .how-list { height: 150px; overflow: hidden; }
@media (max-width:1215px){
.helpful-tools .how-list { height: 412px; }
}
@media (max-width:1015px){
.helpful-tools { margin: 0 0 30px; }
}

.tools-list { padding: 70px 0 120px; padding: 7vh 0 12vh; }
.tools-list .tools-switch { position: relative; }
.tools-list .tools-switch .cell { position: relative; }
.tools-list .tools-switch .cell .link-cell { display: none; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 20;; }
.tools-list .tools-switch .cell .back img { width: 100%; }
.tools-list .tools-switch .cell .front { width: 100%; height: 100%; text-align: center; color: #fff; padding: 60px 40px 0; position: absolute; left: 0; top: 0; z-index: 10; }
.tools-list .tools-switch .cell .front .title { line-height: 1.33em; font-size: 24px; font-size: 2.4vh; font-weight: bold; margin: 0 0 65px; }
.tools-list .tools-switch .cell .front .desc { line-height: 1.33em; margin: 0 0 60px; }
.tools-list .tools-switch .cell .front .yellow-ghost-btn { width: 148px; height: 48px; line-height: 48px; color: #fff; }
@media (max-width:1215px){ 
.tools-list .tools-switch .cell .front { padding: 40px 20px 0; }
}
@media (max-width:1015px){
.tools-list .tools-switch .cell .front .title { margin: 0 0 35px; }
.tools-list .tools-switch .cell .front .desc { display: none; }
}
@media (max-width: 767px){
.tools-list .tools-switch .cell .front { padding: 80px 20px 0; }
.tools-list .tools-switch .cell .front .title { font-size: 18px; } 
.tools-list .tools-switch .cell .link-cell { display: block; } 
.tools-list .tools-switch .cell .front .action { display: none; }
}
@media (max-width: 415px){
.tools-list .tools-switch .cell .front { padding: 25px 0 0; }
.tools-list .tools-switch .cell .front .title { font-size: 16px; font-weight: normal; } 
}
@media (max-width: 350px){
.tools-list .tools-switch .cell .front .title { font-size: 12px; } 
}
/* ipad pro */
@media (min-height: 1365px){
.tools-list .tools-switch .cell .front .title { margin: 0 0 35px; }
.tools-list .tools-switch .cell .front .desc { margin: 0 0 40px; }
}
.tools-list .tools-tab .tab { float: left; width: 20%; padding-left: 8px; padding-right: 8px; }
.tools-list .tools-tab .tab a { display: block; width: 100%; line-height: 96px; font-size: 24px; color: #fff; text-align: center; background-repeat: no-repeat; background-position:center; background-size: cover; }  
.tools-list .tools-tab .tab-01 a { background-image: url("https://photo.wondershare.com/images/en/bg-tab-01.jpg"); }
.tools-list .tools-tab .tab-02 a { background-image: url("https://photo.wondershare.com/images/en/bg-tab-02.jpg"); }
.tools-list .tools-tab .tab-03 a { background-image: url("https://photo.wondershare.com/images/en/bg-tab-03.jpg"); }
.tools-list .tools-tab .tab-04 a { background-image: url("https://photo.wondershare.com/images/en/bg-tab-04.jpg"); }
.tools-list .tools-tab .tab-05 a { background-image: url("https://photo.wondershare.com/images/en/bg-tab-05.jpg"); }
@media (max-width:1015px){
.tools-list .tools-tab .tab { float: none; width: 100%; margin: 0 0 10px; }
}
@media (max-width: 767px){
.tools-list .tools-tab .tab a { height: 50px; line-height: 50px; font-size: 18px; }
}

.tips-tricks { padding: 55px 0 0; padding: 5.5vh 0 0; }
.tips-tricks .swiper-index li { margin: 0 25px; margin: 0 2.5vh; }
.tips-tricks .swiper-index li.active { color: #ffa818; }
.tips-tricks .text-content { margin: 0 0 40px; margin: 0 0 4vh; }
.tips-tricks .tips-swiper .cell { padding: 0 0 25px; padding: 0 0 2.5vh; margin: 0 0 40px; margin: 0 0 4vh; border-bottom: 1px solid #e0e0e0; }
.tips-tricks .tips-swiper .title { height: 50px; font-size: 20px; font-weight: normal; margin: 0 0 20px; margin: 0 0 2vh; }  
.tips-tricks .tips-swiper .desc { height: 57px; line-height: 1.2em; font-size: 16px; margin: 0 0 15px; margin: 0 0 1.5vh; }

.arc-detail .star-group{font-size: 0; margin-bottom: 0; }
.arc-detail .star-group li{display: inline-block;margin-right: 2px;width: 25px;height: 24px;background:url("images/star.png") no-repeat;background-image: url("images/star.svg"); background-size: cover; position: relative;}
.arc-detail .star-group li.half{background:url("images/star-half.png") no-repeat;background-image: url("images/star-half.svg"); background-size: cover; }
.arc-detail .star-group li.off{background:url("images/star-off.png") no-repeat;background-image: url("images/star-off.svg"); background-size: cover; }

.topic-menu { width: 260px; padding: 20px; background-color: #f7f7f7; }
.topic-menu .title { font-size: 24px; font-weight: 300; margin-top: 10px; background: url("https://photo.wondershare.com/vis-201709/style/images/topic-ico.svg") no-repeat; background-image: url("https://photo.wondershare.com/vis-201709/style/images/topic-ico.svg"), none; padding: 6px 0 6px 50px; }
.topic-menu ul li { font-size: 16px; line-height: 1.2em; padding: 8px 0; }
.topic-menu ul li a:hover { color: #ffa818; border-bottom: 2px solid #ffa818; }