@charset "UTF-8";
/*======================================
//--//-->   STYLES GENERALES
======================================*/

body{background-color:#f5f5f5;color:#4e4e4e}
.clearfix:after{content:"";display:table;clear:both}
h1,h2,h3,h4,h5,h6{color:#1e1e1e}
a{color:#1e1e1e;transition:all 0.5s ease-in-out}
@media (any-hover:hover){a:hover{color:#0078ff;text-decoration:none;transition:all 0.5s ease-in-out}}
.p-r{position:relative}
.color-a{color:#0078ff}
.color-d{color:#f5f5f5}
.color-text-a{color:#4e4e4e}
.box-shadow,.paralax-mf,.service-box,.work-box,.card-blog{box-shadow:0 13px 8px -10px rgba(0,0,0,0.1)}
.box-shadow-a{box-shadow:0 0 0 4px #cde1f8}
@media (any-hover:hover){.button:hover{box-shadow:0 0 0 4px #cde1f8}}
.display-5{font-size:2.5rem;font-weight:300;line-height:1.1}
.display-6{font-size:2rem;font-weight:300;line-height:1.1}
.avatar{width:32px;height:32px;margin-right:4px;overflow:hidden}
.bg-image{background-repeat:no-repeat;background-attachment:fixed;background-size:cover;-moz-background-size:cover;-webkit-background-size:cover;-o-background-size:cover;background-position:center center}
.overlay-mf{background-color:#0078ff}
.tlinks{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden}
.overlay-mf{position:absolute;top:0;left:0px;padding:0;height:100%;width:100%;opacity:.7}
.paralax-mf{position:relative;padding:8rem 0}
.display-table{width:100%;height:100%;display:table}
.table-cell{display:table-cell;vertical-align:middle}
.sect-4{padding:4rem 0}
.sect-pt4{padding-top:4rem}
.sect-mt4{margin-top:4rem}
.title-s{font-weight:600;color:#1e1e1e;font-size:1.1rem}
.title-box{margin-bottom:4rem}
.title-a{font-size:3rem;font-weight:bold;text-transform:uppercase}
.subtitle-a{color:#4e4e4e}
.line-mf{width:40px;height:5px;background-color:#0078ff;margin:0 auto}
.title-box-2{margin-bottom:3rem}
.title-left{font-size:2rem;position:relative}
.title-left:before{content:'';position:absolute;height:3px;background-color:#0078ff;width:100px;bottom:-12px}
.box-pl2{padding-left:2rem}
.box-shadow-full{padding:3rem 1.25rem;position:relative;background-color:#fff;margin-bottom:3rem;z-index:2;box-shadow:0 1px 1px 0 rgba(0,0,0,0.06),0 2px 5px 0 rgba(0,0,0,0.2)}
.socials{padding:1.5rem 0}
.socials ul li{display:inline-block}
.socials .ico-circle{height:40px;width:40px;font-size:1.7rem;border-radius:50%;line-height:1.4;margin:0 15px 15px 0;box-shadow:0 0 0 3px #0078ff;transition:all 500ms ease}
@media (any-hover:hover){.socials .ico-circle:hover{background-color:#0078ff;color:#fff;box-shadow:0 0 0 3px #cde1f8;transition:all 500ms ease}}
.ul-resect,.socials ul,.list-ico,.blog-wrapper .post-meta ul,.box-comments .list-comments,.widget-sidebar .list-sidebar,.widget-tags ul{list-style:none;padding-left:0;margin-bottom:0}
.list-ico{line-height:2}
.list-ico li {display: flex;align-items: center;}
.list-ico span {color:#0078ff;margin-right:10px;display: flex;width: 1rem;height: 1rem;justify-content: center;align-items: center;}
.ico-circle{height:100px;width:100px;font-size:2rem;border-radius:50%;line-height:1.55;margin:0 auto;text-align:center;box-shadow:0 0 0 10px #0078ff;display:block}
.owl-theme .owl-dots{text-align:center;margin-top:18px}
.owl-theme .owl-dots .owl-dot{display:inline-block}
.owl-theme .owl-dots .owl-dot span{width:18px;height:7px;margin:5px 5px;background:#cde1f8;border:0px solid #cde1f8;display:block;transition:all 0.6s ease-in-out;cursor:pointer}
@media (any-hover:hover){.owl-theme .owl-dots .owl-dot:hover span{background-color:#cde1f8}}
.owl-theme .owl-dots .owl-dot.active span{background-color:#1B1B1B;width:25px}
.scrolltop-mf{position:relative;display:none}
.scrolltop-mf span{z-index:999;position:fixed;width:42px;height:42px;background-color:#0078ff;opacity:.7;font-size:1.6rem;line-height:1.5;text-align:center;color:#fff;top:auto;left:auto;right:30px;bottom:50px;cursor:pointer;border-radius:50%}
.back-to-top{position:fixed;display:none;background:#0078ff;color:#fff;width:44px;height:44px;text-align:center;line-height:1;font-size:16px;border-radius:50%;right:15px;bottom:15px;transition:background 0.5s;transition:bottom 0.5s;z-index:11}
.back-to-top i{padding-top:12px;color:#fff}
.back-to-top-h{bottom:120px}
#preloader{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;overflow:hidden;background:#fff}
#preloader:before{content:"";position:fixed;top:calc(50% - 30px);left:calc(50% - 30px);border:6px solid #f2f2f2;border-top:6px solid #0078ff;border-radius:50%;width:60px;height:60px;-webkit-animation:animate-preloader 1s linear infinite;animation:animate-preloader 1s linear infinite}
@-webkit-keyframes animate-preloader{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
@keyframes animate-preloader{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
.navbar-b{transition:all .5s ease-in-out;background-color:transparent;padding-top:1.563rem;padding-bottom:1.563rem}
.navbar-b.navbar-reduce{box-shadow:0px 6px 9px 0px rgba(0,0,0,0.06)}
.navbar-b.navbar-trans .nav-item,.navbar-b.navbar-reduce .nav-item{position:relative;padding-right:10px;padding-left:0}
.navbar-b.navbar-trans .nav-link,.navbar-b.navbar-reduce .nav-link{color:#fff;text-transform:uppercase;font-weight:600}
.navbar-b.navbar-trans .nav-link:before,.navbar-b.navbar-reduce .nav-link:before{content:'';position:absolute;margin-left:0px;width:0%;bottom:0;left:0;height:2px;transition:all 500ms ease}
@media (any-hover:hover){.navbar-b.navbar-trans .nav-link:hover,.navbar-b.navbar-reduce .nav-link:hover{color:#1B1B1B}}
@media (any-hover:hover){.navbar-b.navbar-trans .nav-link:hover:before,.navbar-b.navbar-reduce .nav-link:hover:before{width:35px}}
.navbar-b.navbar-trans .show > .nav-link:before,.navbar-b.navbar-trans .active > .nav-link:before,.navbar-b.navbar-trans .nav-link.show:before,.navbar-b.navbar-trans .nav-link.active:before,.navbar-b.navbar-reduce .show > .nav-link:before,.navbar-b.navbar-reduce .active > .nav-link:before,.navbar-b.navbar-reduce .nav-link.show:before,.navbar-b.navbar-reduce .nav-link.active:before{width:35px}
.navbar-b.navbar-trans .nav-link:before{background-color:#fff}
@media (any-hover:hover){.navbar-b.navbar-trans .nav-link:hover{color:#fff}}
.navbar-b.navbar-trans .show > .nav-link,.navbar-b.navbar-trans .active > .nav-link,.navbar-b.navbar-trans .nav-link.show,.navbar-b.navbar-trans .nav-link.active{color:#fff}
.navbar-b.navbar-reduce{transition:all .5s ease-in-out;background-color:#fff;padding-top:15px;padding-bottom:15px;z-index:1040}
.navbar-b.navbar-reduce .nav-link{color:#0078ff}
.navbar-b.navbar-reduce .nav-link:before{background-color:#0078ff}
@media (any-hover:hover){.navbar-b.navbar-reduce .nav-link:hover{color:#0078ff}}
.navbar-b.navbar-reduce .show > .nav-link,.navbar-b.navbar-reduce .active > .nav-link,.navbar-b.navbar-reduce .nav-link.show,.navbar-b.navbar-reduce .nav-link.active{color:#0078ff}
.navbar-b.navbar-reduce .navbar-brand{color:#0078ff}
.navbar-b.navbar-reduce .navbar-toggler span{background-color:#0078ff}
.navbar-b .navbar-brand{color:#fff;font-size:1.6rem;font-weight:600}
.navbar-b .navbar-nav .dropdown-item.show .dropdown-menu,.navbar-b .dropdown.show .dropdown-menu,.navbar-b .dropdown-btn.show .dropdown-menu{-webkit-transform:translate3d(0px,0px,0px);transform:translate3d(0px,0px,0px);visibility:visible !important}
.navbar-b .dropdown-menu{margin:1.12rem 0 0;border-radius:0}
.navbar-b .dropdown-menu .dropdown-item{padding:.7rem 1.7rem;transition:all 500ms ease}
@media (any-hover:hover){.navbar-b .dropdown-menu .dropdown-item:hover{background-color:#0078ff;color:#fff;transition:all 500ms ease}}
.navbar-b .dropdown-menu .dropdown-item.active{background-color:#0078ff}
.navbar-toggler{position:relative}
.navbar-toggler:focus,.navbar-toggler:active{outline:0}
.navbar-toggler span{display:block;background-color:#fff;height:3px;width:25px;margin-top:4px;margin-bottom:4px;-webkit-transform:rotate(0deg);transform:rotate(0deg);left:0;opacity:1}
.navbar-toggler span:nth-child(1),.navbar-toggler span:nth-child(3){transition:-webkit-transform .35s ease-in-out;transition:transform .35s ease-in-out;transition:transform .35s ease-in-out,-webkit-transform .35s ease-in-out}
.navbar-toggler:not(.collapsed) span:nth-child(1){position:absolute;left:12px;top:10px;-webkit-transform:rotate(135deg);transform:rotate(135deg);opacity:0.9}
.navbar-toggler:not(.collapsed) span:nth-child(2){height:12px;visibility:hidden;background-color:transparent}
.navbar-toggler:not(.collapsed) span:nth-child(3){position:absolute;left:12px;top:10px;-webkit-transform:rotate(-135deg);transform:rotate(-135deg);opacity:0.9}
.intro{height:100vh;position:relative;color:#fff}
.intro .intro-content{text-align:center;position:absolute}
.intro .overlay-itro{background-color:rgba(0,0,0,0.6);position:absolute;top:0;left:0px;padding:0;height:100%;width:100%;opacity:.9}
.intro .intro-title{color:#fff;font-weight:600;font-size:3rem}
.intro .intro-subtitle{font-size:1.5rem;font-weight:300}
.intro .text-slider-items{display:none}
.intro-single{height:350px}
.intro-single .intro-content{margin-top:30px}
.intro-single .intro-title{text-transform:uppercase;font-size:3rem}
.intro-single .breadcrumb{background-color:transparent;color:#0078ff}
.intro-single .breadcrumb .breadcrumb-item:before{color:#cde1f8}
.intro-single .breadcrumb .breadcrumb-item.active{color:#cde1f8}
.intro-single .breadcrumb a{color:#fff}
.about-mf .box-shadow-full{padding-top:4rem;padding-bottom:4rem}
.about-mf .about-img{margin-bottom:2rem}
.about-mf .about-img img{}
.skill-mf span{color:#4e4e4e;background:#cde1f8;padding:3px 5px;border-radius:5px;margin:5px;display:block;float:left}
.skill-mf .progress{background-color:#cde1f8;margin:.5rem 0 1.2rem 0;border-radius:0;height:.7rem}
.skill-mf .progress .progress-bar{height:.7rem;background-color:#0078ff}
.service-box{background-color:#fff;padding:2.5rem 1.3rem;border-radius:1rem;margin-bottom:3rem}
@media (any-hover:hover){.service-box:hover{transition:all 500ms ease;color:#fff;background-color:#0078ff;box-shadow:0 0 0 10px #cde1f8}}
.ico-circle{transition:all 500ms ease;color:#fff;background-color:#0078ff;box-shadow:0 0 0 10px #cde1f8;display:flex;justify-content:center;align-items:center}
.service-box .service-ico{margin-bottom:1rem;color:#1e1e1e}
.service-box .ico-circle{transition:all 500ms ease;font-size:4rem}
.service-box .s-title{font-size:1.4rem;text-transform:uppercase;text-align:center;padding:.4rem 0}
.service-box .s-description{color:#4e4e4e}
.counter-box{color:#fff;text-align:center}
.counter-ico{margin-bottom:1rem}
.counter-ico .ico-circle{height:60px;width:60px;line-height:1.8;box-shadow:0 0 0 10px #cde1f8}
.counter-num .counter{font-size:2rem;margin-bottom:0}
.work-box{margin-bottom:3rem;-webkit-backface-visibility:hidden;backface-visibility:hidden;background-color:#fff}
@media (any-hover:hover){.work-box:hover img{-webkit-transform:scale(1.3);transform:scale(1.3)}}
.work-img{display:block;overflow:hidden}
.work-img img{transition:all 1s}
.work-content{padding:2rem 3% 1rem 4%}
.work-content .w-more{color:#4e4e4e;font-size:.8rem}
.work-content .w-more .w-ctegory{color:#0078ff}
.work-content .w-like{font-size:2.5rem;color:#0078ff;float:right}
.work-content .w-like a{color:#0078ff}
.work-content .w-like .num-like{font-size:.7rem}
.w-title{font-size:1.2rem}
.testimonials .owl-carousel .owl-item img{width:auto}
.testimonial-box{color:#fff;text-align:center}
.testimonial-box .author-test{margin-top:1rem}
.testimonial-box .author-test img{margin:0 auto}
.testimonial-box .author{color:#fff;text-transform:uppercase;font-weight:600;margin:1rem 0;display:block;font-size:1.4rem}
.testimonial-box .comit{font-size:2rem;color:#0078ff;background-color:#fff;width:52px;height:52px;display:block;margin:0 auto;border-radius:50%;line-height:1.6}
.card-blog .card-body{position:relative}
.card-blog .card-category-box{position:absolute;text-align:center;top:-16px;left:15px;right:15px;line-height:25px;overflow:hidden}
.card-blog .card-category{display:inline-block;color:#fff;padding:0 15px 5px;overflow:hidden;background-color:#0078ff;border-radius:4px}
.card-blog .card-category .category{color:#fff;display:inline-block;text-transform:uppercase;font-size:.7rem;letter-spacing:.1px;margin-bottom:0}
.card-blog .card-title{font-size:1.3rem;margin-top:.6rem}
.card-blog .card-description{color:#4e4e4e}
.card-blog .post-author{display:inline-block}
.card-blog .post-date{color:#4e4e4e;display:inline-block;float:right}
.post-box,.form-comments,.box-comments,.widget-sidebar{padding:2rem;background-color:#fff;margin-bottom:3rem}
.blog-wrapper .article-title{font-size:1.5rem}
.blog-wrapper .post-meta{margin:1rem 0}
.blog-wrapper .post-meta ul{border-left:4px solid #0078ff;margin-top:1rem}
.blog-wrapper .post-meta ul li{display:inline-block;margin-left:15px}
.blog-wrapper .post-meta ul a{color:#0078ff}
.blog-wrapper .post-meta ul span{color:#1e1e1e}
.blog-wrapper .blockquote{border-left:4px solid #0078ff;padding:18px;font-style:italic}
.box-comments .list-comments li{padding-bottom:40px}
.box-comments .list-comments .comment-avatar{display:table-cell;vertical-align:top}
.box-comments .list-comments .comment-avatar img{width:80px;height:80px}
.box-comments .list-comments .comment-author{font-size:1.3rem}
.box-comments .list-comments .comment-details{display:table-cell;vertical-align:top;padding-left:25px}
.box-comments .list-comments a{color:#0078ff}
.box-comments .list-comments span{color:#1e1e1e;font-style:italic}
.box-comments .comment-children{margin-left:40px}
.widget-sidebar .sidebar-title{font-size:1.6rem;font-weight:600;border-left:5px solid #0078ff;padding-left:15px;text-transform:uppercase;margin-bottom:1.5rem}
.widget-sidebar .list-sidebar li{position:relative;padding:6px 0 6px 24px}
.widget-sidebar .list-sidebar li:before{position:absolute;content:"";width:10px;height:1px;left:0;background-color:#0078ff;top:20px}
.sidebar-search input{background-color:#fff;border-radius:0;transition:all 0.5s ease-in-out}
.sidebar-search .btn-search{background-color:#0078ff;border-color:#0078ff;border-radius:0;padding-left:20px;padding-right:20px}
.widget-tags ul li{display:inline-block;background-color:#0078ff;padding:.2rem .6rem;margin-bottom:.5rem;border-radius:15px}
.widget-tags ul li a{color:#fff}
.footer-paralax{padding:4rem 0 0 0}
.contact-mf{margin-top:4rem}
footer{text-align:center;color:#fff;padding-bottom:1rem}
footer .copyright{margin-bottom:.3rem}
footer .credits{margin-bottom:.3rem}
footer .credits a{color:#fff}
@media screen and (max-width:1000px){
  footer{padding-bottom:250px}
  .waifu-tips {pointer-events: none;}
}
#sendmessage{color:#0078ff;border:1px solid #0078ff;display:none;text-align:center;padding:15px;font-weight:600;margin-bottom:15px}
#errormessage{color:red;display:none;border:1px solid red;text-align:center;padding:15px;font-weight:600;margin-bottom:15px}
#sendmessage.show,#errormessage.show,.show{display:block}
.validation{color:red;display:none;margin:0 0 20px;font-weight:400;font-size:13px}
.button{display:inline-block;padding:.3rem .6rem;text-align:center;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:1rem;border-radius:.3rem;border:1px solid transparent;transition:all 500ms ease;cursor:pointer}
.button:focus{outline:0}
@media (any-hover:hover){  .button:hover{background-color:#0062d3;color:#fff;transition:all 500ms ease}}
.button-a{background-color:#0078ff;color:#fff;border-color:#cde1f8}
.button-big{padding:.9rem 2.3rem;font-size:1.2rem}
.button-rouded{border-radius:5rem}
.btn-lg{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}
@media (min-width:577px){.counter-box{margin-bottom:1.8rem}}
@media (min-width:767px){
  .about-mf .box-pl2{margin-top:3rem;padding-left:0rem}
  .card-blog{margin-bottom:3rem}
  .contact-mf .box-pl2{margin-top:3rem;padding-left:0rem}
}
@media (
  min-width:768px){.box-shadow-full{padding:3rem}
  .navbar-b.navbar-trans .nav-item,.navbar-b.navbar-reduce .nav-item{padding-left:10px}
  .navbar-b.navbar-trans .nav-link:before,.navbar-b.navbar-reduce .nav-link:before{margin-left:18px}
  .intro .intro-title{font-size:4.5rem}
  .intro .intro-subtitle{font-size:2.5rem}
  .intro-single .intro-title{font-size:3.5rem}
  .testimonial-box .description{padding:0 5rem}
  .post-box,.form-comments,.box-comments,.widget-sidebar{padding:3rem}
  .blog-wrapper .article-title{font-size:1.9rem}
  .box-comments .list-comments .comment-author{font-size:1.5rem}
}
@media (min-width:992px){.testimonial-box .description{padding:0 8rem}}
@media (min-width:1200px){.testimonial-box .description{padding:0 13rem}}


/*LOGO*/
svg.brand-img {width: 48px; margin-right: 20px;}
svg.brand-img path:nth-child(1){fill:transparent}
svg.brand-img path:nth-child(2){fill:#ffffff}
svg.brand-img path:nth-child(3){fill:#ffffff}
svg.brand-img path:nth-child(4){fill:#000000}

.navbar-b.navbar-reduce svg.brand-img path:nth-child(2){fill:#0078ff}
.navbar-b.navbar-reduce svg.brand-img path:nth-child(3){fill:#0078ff}
.navbar-b.navbar-reduce svg.brand-img path:nth-child(4){fill:#ffffff}

/*隐藏滚动条*/
/*chrome浏览器隐藏滚动条*/
*::-webkit-scrollbar { display: none; }
/*firefox,IE, Edge浏览器隐藏滚动条*/
* {scrollbar-width: none;-ms-overflow-style:none;}

/*背景
background-size: cover; 在ios上存在兼容问题
*/
img.bj{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center center;pointer-events:none}


/*验证码*/
input#verify {width: calc(100% - 120px);float: left;margin-right: 10px;}
.verifyImg {height: calc(2.25rem + 2px);float: right;cursor: pointer;border: 1px solid #ced4da;border-radius: .25rem;}
.form-group .box:after {content: ""; display: block; clear: both;}

/*加载动画*/
section.loadering{display: none;position: fixed;margin:auto;top:0;bottom:0;left:0;right:0;width:90%;max-width: 520px;height: 300px;text-align:center;background: rgb(102 102 102 / 50%);border-radius: 25px;box-shadow:0px 0px 30px 1px hsl(0deg 0% 100%) inset;z-index: 1030;}
.loader{position:relative;width:60px;height:60px;border-radius:50%;margin:75px;display:inline-block;vertical-align:middle}
.loader-info{position:absolute;top:170px;text-align:center;width:100%;color:#ffffff}
.loader-20{width:70px;height:70px;border:3px dashed #d3d3d3;-webkit-animation:stars-rotate-reverse 2s linear both infinite;animation:stars-rotate-reverse 2s linear both infinite}
.loader-20 .css-diamond{position:absolute;left:calc(50% - 50px);top:calc(50% - 50px);-webkit-transform:scale(0.3);transform:scale(0.3);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;border-color:transparent transparent #fff transparent}
.loader-20 .css-diamond:after{border-color:lightgrey transparent transparent transparent}
.css-diamond,.css-diamond:before,.css-diamond:after{box-sizing:border-box;margin:0;padding:0}
.css-diamond{border-style:solid;border-color:transparent transparent #ce93d8 transparent;border-width:0 25px 25px 25px;height:0;width:100px;position:relative;margin:20px 0 50px 0}
.css-diamond:after{content:"";position:absolute;top:25px;left:-25px;width:0;height:0;border-style:solid;border-color:#ce93d8 transparent transparent transparent;border-width:70px 50px 0 50px}
@-webkit-keyframes stars-rotate-reverse{
  0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
  100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
}
@keyframes stars-rotate-reverse{
  0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
  100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
}
/*音乐播放器*/
.aplayerbox .aplayer{margin:0}
.aplayerbox{position:fixed;right:5px;bottom:15px;height:0;overflow:hidden;max-width: 380px;width: calc(100% - 10px);transition:height 0.5s;z-index: 1030;}
.aplayerbox.show{height:90px}
.aplayerbox .close{font-size: 1em;margin: 2px 3px;position: absolute;right: 0px;z-index: 9;}

/*waifu*/
.waifu-tips{color:var(--red);background:#cde1f8;font-weight:unset}
.waifu-tool span{color:#9C27B0}.waifu{bottom:0;left:5rem;right:unset}
@media (max-width:1000px){.waifu{left:0;right:0;}.waifu:hover .waifu-tool{display: none;}}

/*网站备案*/
.credits{display:flex;justify-content:center;align-items:center}
.beian-img{width:20PX;height:20PX;margin-right:0.5rem}

svg.ipv6-icon {margin-right: 0.5rem;width: 32px;height: 32px;}
textarea#message {min-height: 38px;}