@media all{
    .tutorial-nav{box-shadow:0 5px 10px rgba(0,0,0,.1);position:fixed;top:0;left:0;background-color:#fff;width:100%;z-index:2;display:none;height:50px;}
    .tutorial-nav ul{display:flex;height:50px;align-items:center;}
    .tutorial-nav ul li{cursor:pointer;font-size:16px;color:#999;margin-right:15px;}
    .tutorial-nav ul li:hover{color:#359ae4;}
    .tutorial-nav ul li::after{content:'/';margin-left:15px;}
    .tutorial-nav ul li:last-child{margin-right:0;}
    .tutorial-nav ul li:last-child::after{display:none;}
    .tutorial-nav ul .active{color:#359ae4;}
}

@media all{
    .banner{color:#fff;background:url(/uploads/page/common/category/banner-new.jpg) no-repeat center center;background-size:cover;text-align:center;font-weight:700;padding:60px 0;}
    .banner .banner-title{font-size:28px;margin-bottom:20px;line-height:34px;}
    @media (max-width:600px){
        .banner .banner-title{font-size:24px;}
    }
    .banner .banner-description{font-size:18px;margin-bottom:20px;line-height:32px;}
    @media (max-width:600px){
        .banner .banner-description{font-size:16px;}
    }
    .banner .article-number{font-size:18px;margin-bottom:30px;}
    @media (max-width:600px){
        .banner .article-number{font-size:16px;}
    }
    .banner .article-number span:last-child{position:relative;}
    .banner .article-number span:last-child::before{content:'';background:url(/uploads/page/common/category/good.svg) no-repeat center center;background-size:cover;width:18px;height:18px;position:absolute;left:-25px;top:2px;}
    .banner .article-search form{width:440px;height:40px;background-color:#fff;border-radius:20px;font-size:26px;color:#999;display:flex;align-items:center;justify-content:center;margin:auto;}
    .banner .article-search form .search-pointer{cursor:pointer;}
    @media (max-width:600px){
        .banner .article-search form{width:100%;}
    }
    .banner .article-search form input{box-sizing:border-box;padding:2px;text-align:left;outline:none;border:none;height:100%;width:85%;font-size:16px;line-height:normal;line-height:22px\9;background-color:transparent;}
    .panel{margin-bottom:20px;background-color:#fff;border:1px solid transparent;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:0 1px 1px rgba(0, 0, 0, 0.05);}
}
@media all{
    .swiper-container{margin:0 auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;}
    .swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-box-sizing:content-box;box-sizing:content-box;}
    .swiper-wrapper{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
    .swiper-slide{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;position:relative;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform;}
    .swiper-pagination{position:absolute;text-align:center;-webkit-transition:.3s opacity;-o-transition:.3s opacity;transition:.3s opacity;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);z-index:10;}
    .swiper-container-horizontal>.swiper-pagination-bullets{bottom:10px;left:0;width:100%;}
    .swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2;}
    .swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer;}
    .swiper-pagination-bullet-active{opacity:1;background:#007aff;}
    .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px;}
    .swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000;}
}
@media all{
    .main{margin-top:40px;padding-bottom:90px;}
    @media (max-width:769px){
        .main{padding-bottom:60px;}
    }
    .main .container{display:flex;justify-content:space-between;}
    @media (max-width:769px){
        .main .container{flex-direction:column;}
    }
    .main .tutorial-list-wrap{width:72%;position:relative;}
    @media (max-width:769px){
        .main .tutorial-list-wrap{width:100%;}
    }
    .main .tutorial-list-wrap .tutorial-list-swiper{width:100%;height:210px;}
    @media (max-width:600px){
        .main .tutorial-list-wrap .tutorial-list-swiper{height:auto;}
    }
    .main .tutorial-list-wrap .tutorial-list-swiper .swiper-container{height:100%;}
    .main .tutorial-list-wrap .tutorial-list-swiper img{width:120px;height:120px;}
    .main .tutorial-list-wrap .swiper-slide-wrap{background:linear-gradient(to left,#d7eeff,#e8fef9);display:flex;justify-content:space-evenly;align-items:center;height:100%;}
    @media (max-width:600px){
        .main .tutorial-list-wrap .swiper-slide-wrap{flex-direction:column;text-align:center;padding:20px 0 50px;background:linear-gradient(to bottom,#d7eeff,#e8fef9);}
    }
    @media (max-width:600px){
        .main .tutorial-list-wrap .swiper-slide-wrap .words{margin-top:20px;}
    }
    .main .tutorial-list-wrap .swiper-slide-wrap .words .product-name{font-size:26px;color:#1c4b71;margin-bottom:10px;display:block;}
    @media (max-width:600px){
        .main .tutorial-list-wrap .swiper-slide-wrap .words .product-name{font-size:22px;}
    }
    .main .tutorial-list-wrap .swiper-slide-wrap .words .product-name:hover{color:#009beb;}
    .main .tutorial-list-wrap .swiper-slide-wrap .words .product-function{color:#1c4b71;font-size:14px;margin-bottom:15px;}
    .main .tutorial-list-wrap .swiper-slide-wrap .words .detail{color:#009beb;}
    .main .tutorial-list-wrap .swiper-slide-wrap .words .detail span{transition:margin-left .5s;}
    .main .tutorial-list-wrap .swiper-slide-wrap .words .detail:hover span{margin-left:10px;}
    .main .tutorial-list-wrap .swiper-slide-wrap .button-group{display:flex;flex-direction:column;}
    @media (max-width:600px){
        .main .tutorial-list-wrap .swiper-slide-wrap .button-group{margin-top:30px;}
    }
    .main .tutorial-list-wrap .swiper-slide-wrap .button-group a{width:auto;height:40px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 8px rgba(0,0,0,.1);border-radius:3px;padding: 0 20px;}
    .main.nl-main .tutorial-list-wrap .swiper-slide-wrap .button-group a{width:190px;height:40px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 8px rgba(0,0,0,.1);border-radius:3px;}
    .main.ko-main .tutorial-list-wrap .swiper-slide-wrap .button-group a{width:190px;height:40px;font-size:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 8px rgba(0,0,0,.1);border-radius:3px;}
    .main .tutorial-list-wrap .swiper-slide-wrap .button-group a .icon-win,.main .tutorial-list-wrap .swiper-slide-wrap .button-group a .icon-mac{margin-left:20px;}
    .main.ko-main .tutorial-list-wrap .swiper-slide-wrap .button-group a .icon-win,.main .tutorial-list-wrap .swiper-slide-wrap .button-group a .icon-mac{margin-left:10px;}
    .main .tutorial-list-wrap .swiper-slide-wrap .button-group a:nth-child(1){background-color:#fff;color:#009beb;}
    .main .tutorial-list-wrap .swiper-slide-wrap .button-group a:nth-child(1):hover{background-color:#009beb;color:#fff;}
    .main .tutorial-list-wrap .swiper-slide-wrap .button-group a:nth-child(2){background-color:#009beb;color:#fff;margin-top:20px;}
    .main .tutorial-list-wrap .swiper-slide-wrap .button-group a:nth-child(2):hover{background-color:#fff;color:#009beb;}
    .main .tutorial-list-wrap .swiper-pagination-bullet{background-color:#fff;opacity:1;}
    .main .tutorial-list-wrap .swiper-pagination-bullet-active{background-color:#359ae4;}
    .main .tutorial-list-wrap .swiper-next{height:30px;width:30px;border-bottom-left-radius:15px;border-top-left-radius:15px;background-color:rgba(0,0,0,.2);position:absolute;right:0;top:20px;z-index:2;cursor:pointer;font-size:16px;color:#fff;display:flex;align-items:center;justify-content:center;}
    .main .tutorial-list-wrap .main-tutorial-nav{margin-top:30px;}
    @media (max-width:600px){
        .main .tutorial-list-wrap .main-tutorial-nav{display:none;}
    }
    .main .tutorial-list-wrap .main-tutorial-nav ul{display:flex;height:50px;align-items:center;}
    .main .tutorial-list-wrap .main-tutorial-nav ul li{cursor:pointer;font-size:16px;color:#999;margin-right:15px;}
    .main .tutorial-list-wrap .main-tutorial-nav ul li:hover{color:#359ae4;}
    .main .tutorial-list-wrap .main-tutorial-nav ul li:hover::after{color:#999;}
    .main .tutorial-list-wrap .main-tutorial-nav ul li::after{content:'/';margin-left:15px;}
    .main .tutorial-list-wrap .main-tutorial-nav ul li:last-child{margin-right:0;}
    .main .tutorial-list-wrap .main-tutorial-nav ul li:last-child::after{display:none;}
    .main .tutorial-list-wrap .main-tutorial-nav ul .active{color:#359ae4;}
    .main .tutorial-list-wrap .mobile-main-tutorial-nav{height:50px;position:relative;display:flex;align-items:center;margin-top:30px;width:100%;}
    @media (min-width:769px){
        .main .tutorial-list-wrap .mobile-main-tutorial-nav{display:none;}
    }
    .main .tutorial-list-wrap .mobile-main-tutorial-nav .swiper-container{width:100%;}
    .main .tutorial-list-wrap .mobile-main-tutorial-nav .swiper-slide{font-size:16px;color:#999;text-align:center;}
    .main .tutorial-list-wrap .panels{margin-top:30px;}
    .main .tutorial-list-wrap .panels .panel{box-shadow:0 0 10px rgba(0,0,0,.1);padding:30px;margin-bottom:20px;transition:all .5s;}
    @media (max-width:600px){
        .main .tutorial-list-wrap .panels .panel{padding:20px;}
    }
    .main .tutorial-list-wrap .panels .panel:hover{box-shadow:0 15px 20px rgba(0,0,0,.1);transform:translateY(-10px);}
    .main .tutorial-list-wrap .panels .panel .tutorial-title{font-size:20px;font-weight:700;margin-bottom:20px;}
    @media (max-width:600px){
        .main .tutorial-list-wrap .panels .panel .tutorial-title{font-size:18px;line-height:28px;}
    }
    .main .tutorial-list-wrap .panels .panel .tutorial-title a{color:#333;}
    .main .tutorial-list-wrap .panels .panel .tutorial-title a:hover{color:#359ae4;}
    .main .tutorial-list-wrap .panels .panel .tutorial-description{font-size:14px;line-height:28px;color:#666;margin-bottom:20px;}
    .main .tutorial-list-wrap .panels .panel .other-message span{font-size:14px;color:#888;margin-left:15px;}
    @media (max-width:600px){
        .main .tutorial-list-wrap .panels .panel .other-message span{margin-left:5px;}
    }
    .main .tutorial-list-wrap .panels .panel .other-message span:first-child{position:relative;margin-left:25px;}
    .main .tutorial-list-wrap .panels .panel .other-message span:first-child a{color:#888;}
    .main .tutorial-list-wrap .panels .panel .other-message span:first-child a:hover{color:#359ae4;}
    .main .tutorial-list-wrap .panels .panel .other-message span:first-child:before{content:'';background:url(/uploads/page/common/category/tag.svg) no-repeat center center;background-size:contain;width:15px;height:15px;position:absolute;left:-25px;top:2px;}
    .main .tutorial-list-wrap .panels .panel .other-message span:last-child::after{display:none;}
    .main .tutorial-list-wrap .panels .panel .other-message span::after{content:'|';margin-left:15px;}
    @media (max-width:600px){
        .main .tutorial-list-wrap .panels .panel .other-message span::after{margin-left:5px;}
    }
    .main .tutorial-list-wrap .loading-more{font-size:16px;color:#999;width:160px;height:44px;border-radius:22px;background-color:#fff;box-shadow:0 5px 10px rgba(0,0,0,.1);border:none;display:block;margin:40px auto 0;outline:none;}
    .main .tutorial-list-wrap .loading-more:hover{box-shadow:0 5px 10px rgba(0,0,0,.05);color:#359ae4;}
    .main .tutorial-recommend-wrap{width:230px;}
    @media (max-width:769px){
        .main .tutorial-recommend-wrap{width:100%;margin-top:40px;}
    }
    .main .tutorial-recommend-wrap .tutorial-recommend-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;border-bottom:1px solid #999;}
    .main .tutorial-recommend-wrap .tutorial-recommend-header span.tag{font-size:18px;color:#333;font-weight:700;}
    .main .tutorial-recommend-wrap .tutorial-recommend-header a{color:#999;font-size:14px;}
    .main .tutorial-recommend-wrap .tutorial-recommend-header a span{transition:margin-left .5s;}
    .main .tutorial-recommend-wrap .tutorial-recommend-header a:hover{color:#359ae4;}
    .main .tutorial-recommend-wrap .tutorial-recommend-header a:hover span{margin-left:10px;}
    .main .tutorial-recommend-wrap .tutorial-recommend-list .tutorial-recommend{position:relative;display:block;margin-top:20px;box-shadow:0 0 20px rgba(0,0,0,.4);transition:all .5s;}
    .main .tutorial-recommend-wrap .tutorial-recommend-list .tutorial-recommend:hover{box-shadow:unset;}
    .main .tutorial-recommend-wrap .tutorial-recommend-list .tutorial-recommend:hover::before{background-color:rgba(0,0,0,.7);}
    .main .tutorial-recommend-wrap .tutorial-recommend-list .tutorial-recommend img{max-width:100%;}
    @media (max-width:600px){
        .main .tutorial-recommend-wrap .tutorial-recommend-list .tutorial-recommend img{width:100%;}
    }
    .main .tutorial-recommend-wrap .tutorial-recommend-list .tutorial-recommend span{position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;color:#fff;font-size:14px;display:block;display:flex;justify-content:center;align-items:center;text-align:center;padding:0 20px;}
    .main .tutorial-recommend-wrap .tutorial-recommend-list .tutorial-recommend::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.6);z-index:0;}
}