html {line-height: 1.6;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;box-sizing: border-box;font-weight: 400;font-size: 14px;font-family: 'Open Sans',-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;color: #495358;-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing: grayscale;-webkit-tap-highlight-color: transparent;scroll-behavior: smooth;word-wrap: break-word;background-color: #fefefe;}
body{display: flex;flex-direction: column;min-height: 100vh;}
body,input,p,dl,dd,h1,h2,h3,h4,h5,h6,form,figure,menu,blockquote{margin: 0;}
textarea,input,button,ul,ol{margin: 0;padding: 0;}
body,ul,ol,li,p,dl,dt,dd,h1,h2,h3,h4,h5,h6,input,button,textarea,img,div,a,span,nav,header,main,footer,section,table,td,tr,th,:after,:before,aside,picture,article,summary,details,strong,select,label,form,abbr,address,figure,figcaption,menu,blockquote,q{box-sizing: border-box;}
ul li,ol li{list-style: none;}
picture{font-size: 0;display: block;}
a {background-color: transparent;text-decoration:none;-webkit-text-decoration-skip: objects;transition: all ease 0.2s;color: inherit;}
a:hover{outline:none;color: #377DFF;text-decoration: none;}
a.text-blue:hover{text-decoration: underline;}
button,input[type="button"],input[type="submit"],input[type="reset"],a,summary{cursor: pointer;}
article,aside,details,figcaption,figure,label,hgroup,menu,nav,section,summary{display: block;}
img {border-style: none;max-width: 100%;vertical-align: middle;}
textarea{resize: vertical;}
button, input:not([type="checkbox"]), select, textarea {font-family: inherit;font-size: 100%;line-height: 1.15;appearance: none;-moz-appearance: none;-webkit-appearance: none;}
button,button:focus, input,input:focus, optgroup,optgroup:focus, select,select:focus, textarea,textarea:focus,summary,summary:focus,a,a:focus{outline: none;}
:active {outline: none}
select{padding: 0 10px !important;background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24'><path style='fill:rgb(86,98,120)' d='M12 13L8 9a.8.8 0 00-1 1l5 5.1 5-5c.2-.3.2-.7 0-1a.8.8 0 00-1.1 0l-4 4z'></path></svg>") no-repeat right center;}
/*placeholder text color*/
::-moz-placeholder {color: currentColor;opacity: .5}
::-webkit-input-placeholder {color: currentColor;opacity: .5}
:-ms-input-placeholder {color: currentColor;opacity: .5}
/*focus:invalid*/
input:focus:invalid, textarea:focus:invalid,select:focus:invalid{ border-color: #00C2A7;}
::-ms-clear, ::-ms-reveal{display: none;}
/*selection color*/
::-moz-selection{background-color:#377DFF;color:#eee;}
::selection{background-color:#377DFF;color:#eee;}
::-webkit-details-marker { display: none; }
::-moz-list-bullet { font-size: 0;}

/* ====== transfrom file card   START   ======*/

.none {display: none;}

.data-transfrom-file {
  position: relative;
  min-height: 398px;
  background-color: #F9FBFD;
}
.data-transfrom-file.loaded::after {
  content: none;
}
@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
.data-transfrom-file::after {
  /* content: "loading...";
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 24px;
  transform: translate(-50%, -50%); */

  content: "";
  z-index: 3;
  position: absolute;
  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  border: 8px solid #f3f3f3;
  border-top: 8px solid #377dff;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1.6s linear infinite;
}
.full_iframe {
  position: fixed;
  top: 64px;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  border: none;
  outline: none;
  z-index: 1;
/*
  margin-top: 64px;
  border: none;
  outline: none;
  height: max-content; */


}
#edit_pdf.full_iframe {
  top: 0;
  z-index: 3;
  height: 100vh;
}
/* 显示谷歌云文档时候 */
.transfrom-file-iframe.add-google {
  min-height: 650px !important;
}


/* ====== transfrom file card   END   ======*/


/*font style*/
.text-underline{text-decoration: underline;}
.text-through{text-decoration: line-through;}
.text-italic{font-style: italic;}

/*font size*/
.text-mini{font-size: 12px}
.text-small{font-size: 14px}
.text-big{font-size: 18px}
.text-super{font-size: 20px}

/*line height*/
.line-1-6{line-height: 1.6}
.line-1-8{line-height: 1.8}
.line-2{line-height: 2}

/*font weight*/
.font-regular{font-weight: 400;}
.font-bold{font-weight: 700}
.font-exbold{font-weight: 800}
/*font justify*/
.text-left{text-align: left;}
.text-center{text-align: center;}
.text-right{text-align: right;}
/*text color*/
.text-white{color: #fff;}
.text-gray{color: #555;;}
.text-red{color: #FA4F4F;}
.text-green{color: #00C2A7;}
.text-blue{color: #377DFF;}
.text-black{color: #242424;}
/*background color*/
.bg-white{background-color: #fff;}
.bg-light{background-color:#F9FBFD;}
.bg-gray{background-color: #eee;}
.bg-red{background-color: #FA4F4F;}
.bg-blue{background-color: #377DFF;}
.tip-ad{font-size: 12px;padding: 10px 0;opacity: 0.5;}

/*container*/
.container{margin: 0 auto;padding: 0 16px;position: relative;}
.inline-block{display: inline-block;}
.relative{position: relative;}
.com-block{padding: 110px 0 74px;}
.com-block .com-title{font-size: 42px;padding-bottom: 30px;position: relative;max-width: 960px;margin: 0 auto;font-weight: 800;line-height: 1.2;}
.com-block .com-tip{padding-bottom: 50px;max-width: 960px;color: #666;font-size: 22px;margin: 0 auto;}
/*flex*/
.flex {display: flex;align-items: center;}
.flex-end {display: flex;justify-content: flex-end;}
.flex-center{display: flex;align-items: center;justify-content: center;}
.flex-ard {display: flex;align-items: center;justify-content: space-around;}
.flex-bt {display: flex;align-items: center;justify-content: space-between;}
.flex-cl {display: flex;align-items: center;flex-direction: column;justify-content: center;}

.flexible{display: flex;}
.inline-flexible{display: inline-flex;}
.flex-direction-row{flex-direction: row;}
.flex-direction-column{flex-direction: column;}
.flex-wrap-nowrap{flex-wrap: nowrap;}
.flex-wrap-wrap{flex-wrap: wrap;}
.flex-wrap-reverse{flex-wrap: wrap-reverse;}
.flex-justify-start{justify-content: flex-start;}
.flex-justify-end{justify-content: flex-end;}
.flex-justify-center{justify-content: center;}
.flex-justify-between{justify-content: space-between;}
.flex-align-start{align-items:flex-start;}
.flex-align-end{align-items:flex-end;}
.flex-align-center{align-items:center;}
/*ul list*/
.list-dot,.list-ok,.list-num{text-align: left;}
.list-dot>li{position: relative;padding-left: 16px;}
.list-dot>li:after{content: '';width: 5px;height: 5px;border-radius: 50%;background: currentColor;position: absolute;left:0;top:9px;}
.list-dot>li:not(:last-child){margin-bottom: 10px;}

.list-ok>li {position: relative;padding-left: 30px;}
.list-ok>li:after {content: '';width: 16px;height: 16px;background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><path style='fill:rgb(62,207,142)' d='M13.64 4a1 1 0 010 1.41l-6.92 6.87a1 1 0 01-1.42-.01L1.99 8.83C1.6 8.43 1.6 7.79 2 7.4a1.33 1.33 0 011.58-.23L6 8.5l6.14-4.6c.46-.35 1.1-.3 1.5.1z'/></svg>");position: absolute;left: 0;top:5px;background-size: cover;}
.list-ok>li:not(:last-child) {margin-bottom:16px}
.list-ok2>li {position: relative;padding-left: 42px;}
.list-ok2>li:after{content: '';width: 32px;height: 32px;background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' transform='translate(5,5)'><rect width='14' height='14' style='fill:rgb(62, 207, 142)' rx='24'/><path style='fill:rgb(255,255,255)' d='M9.6 4.2a.5.5 0 01.9.6l-3.6 5c-.1.2-.4.3-.7.1L3.7 7.4a.5.5 0 11.6-.8l2 1.2 3.3-3.6z'/></svg>");position: absolute;left: 0;top:-2px;background-size: cover;}
.list-ok2>li:not(:last-child) {margin-bottom:16px}

.list-num{counter-reset: li;}
.list-num>li{position: relative;padding-left: 20px;}
.list-num>li:before{content: counter(li)".";counter-increment: li;position: absolute;left:0;top:0;}
.list-num>li:not(:last-child){margin-bottom: 10px;}

.list-circle>li{position: relative;padding-left: 16px;}
.list-circle>li:after{content: '';width: 5px;height: 5px;border-radius: 50%;border:1px solid;border-color: currentColor;position: absolute;left:0;top:9px;}
.list-circle>li:not(:last-child){margin-bottom: 10px;}

.pro-list{padding: 40px 0 64px;border-top:1px solid #EDEDF2;margin-top: 96px;}
.pro-list .container{max-width: 1112px;}
.pro-list .sub{padding-bottom: 20px;font-weight: 700;}
.pro-list .cell{font-size: 13px;margin-bottom: 20px;width: 16.666666%;min-width: 160px;}
.pro-list .cell a svg{margin-right: 5px;}
.pro-list .cell a:hover{color: #242424;background-color: rgba(13, 31, 63,0.05);border-radius: 2px;}

/*browserupgrade*/
.browserupgrade{text-align: center;height: 580px;padding-top: 200px;font-size: 24px;background: #377DFF;color: #FFF;font-weight: 400;}
.browserupgrade a{color: #FFF;text-decoration: underline;font-weight: 700;}


/*btn*/

.btn{color: #fff;font-weight: 600;display: inline-flex;word-break:keep-all;white-space:nowrap;transition: all linear 0.2s;border: none;border-radius: 3px;align-items: center;justify-content: center;}
.btn[disabled]{pointer-events:none;cursor: not-allowed;opacity: 0.6;}
.border-btn{border: 1px solid #333;color: #333;}
.border-btn:hover{background-color: #333;color: #fff;}
.green-btn{background-color: #00C2A7;box-shadow: 0 8px 14px 0 rgba(0, 11, 35,0.22);}
.green-btn:hover{background-color: #02DDBD;color: #fff}
.green-btn-border{box-shadow:inset 0 0 0 1px #00C2A7;background: #fff;color: #00C2A7;}
.green-btn-border:hover{background-color: #00C2A7;color: #fff;box-shadow: 0 8px 14px 0 rgba(0, 11, 35,0.22);}
.white-btn-border{background-color: transparent;color: #fff;box-shadow:inset 0 0 0 1px #fff;}
.white-btn-border:hover{color: #24B47E;background-color: #fff;}
.white-btn{background-color: #fff;color: #377DFF;box-shadow: 0 8px 14px 0 rgba(0, 11, 35,0.22);}
.white-btn:hover{background-color: #377DFF;color: #fff}
.gray-btn-border{box-shadow:inset 0 0 0 1px #acacac;background: #fff;color: #666;}
.gray-btn-border:hover{background-color: #377DFF;color: #fff;box-shadow: 0 8px 14px 0 rgba(0, 11, 35,0.22);}
.blue-btn{background-color: #377DFF;color: #fff;box-shadow: 0 8px 14px 0 rgba(0, 11, 35,0.22);}
.blue-btn:hover{background-color: #194AC4;color: #fff}
.blue-btn-border{color: #377DFF;background-color: transparent;box-shadow:inset 0 0 0 1px #377DFF;}
.blue-btn-border:hover{color: #fff;background-color: #377DFF;}
.red-btn{background-color: #FA4F4F;color: #fff;box-shadow: 0 8px 14px 0 rgba(0, 11, 35,0.22);}
.red-btn:hover{background-color: #FA4F4Fec;color: #fff}
.red-btn-border{color: #FA4F4F;background-color: transparent;box-shadow:inset 0 0 0 1px #FA4F4F;}
.red-btn-border:hover{color: #fff;background-color: #FA4F4F;}

.download-group{background-color: #2154D1;padding: 80px 0;}
.download-group .container{max-width: 1132px;}
.download-group .title{font-size: 48px;color: #fff;margin-bottom: 48px;font-weight: 800;}
.download-group .group-btn .btn:first-child{margin-right: 24px;}
.download-group .group-btn .btn{width: 224px;height: 52px;}
.group-btn img{margin-left: 12px;}



/*header*/
nav>ul>li:not(:last-child){margin-right: 24px;}
nav>ul>li>a{padding: 0 14px;border-radius: 20px;position: relative;}
nav>ul>li>a svg:first-child{margin-right: 6px;}
nav>ul>li>a svg:last-child{margin-left: 10px;}
nav>ul>li>a.tool::after{content: '';position: absolute;height: 45px;width: 100%;left: 0;top:0}
nav>ul>li>span{padding: 20px 14px;}
nav>ul>li>span:hover{cursor: default;background-color: rgba(0,0,0,0.2);}
nav>ul>li>a:hover{color: #005BEA;}
nav>ul>li>a:hover+.pro-list,nav .pro-list:hover{display: block;}
nav>ul>li>span:hover+.pull,nav>ul>li>.pull:hover{display: block;}
nav>ul>li>.pull{position: absolute;left: 0;top: 64px;background: #fff;box-shadow: 0 24px 44px 0 rgba(0,0,0,0.10);width: 100%;padding: 48px 0;z-index: -1;display: none;}
nav>ul>li>.pull .l{flex-basis: 24%;}
nav>ul>li>.pull .r{flex-basis: 76%;}
nav>ul>li>.pull .solution .r{padding-left: 10.2%;margin-left: 10%;position: relative;}
nav>ul>li>.pull .solution .r::after{content: '';width: 2px;background-color: #ECECEC;height: 60%;position: absolute;left: 0;top: 0;}
nav>ul>li>.pull .templates .r{padding-left: 9.2%;}
nav>ul>li>.pull .sub{font-size: 32px;margin-bottom: 16px;font-weight: 800;}
nav>ul>li>.pull .ce-sub{font-weight: 700;font-size: 18px;margin-bottom: 24px;}
nav>ul>li>.pull .lst li:not(:last-child){margin-bottom: 16px;}
nav>ul>li>.pull a:hover{text-decoration: underline;}
nav>ul>li>.pull .tip{padding-top: 24px;margin-top: 32px;border-top: 1px solid #D8D8D8;}
nav>ul>li>.pull .tab{flex-basis: 180px;}
nav>ul>li>.pull .tab ul{border-right:2px solid #ececec;}
nav>ul>li>.pull .tab ul li{line-height: 40px;height: 40px;font-size: 18px;padding: 0 10px;}
nav>ul>li>.pull .tab ul li.actived{background: #E6EDFF;border-right:2px solid #005BEA;color: #005BEA;font-weight: 800;}
nav>ul>li>.pull .tab ul li:hover{background: #E6EDFF;cursor: pointer;}
nav>ul>li>.pull .switch{flex-basis: calc( 100% - 208px);margin-left: 28px;}
nav>ul>li>.pull .switch .cell>ul>li{width: 25%;}
nav>ul>li>.pull .switch .cell>ul>li:not(:first-child){margin-left: 20px;}
header{position: relative;z-index: 2;box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.04);}
header .container{max-width: 1132px;position: static;}
header .logo{display: flex;margin-right: auto;align-items: center;position: relative;font-weight: 600;}
header:not(.pro) .logo{width: 102px;}
header.pro .logo .ce{margin-left: 10px;font-weight: 700;padding-left: 10px;position: relative;color: #3D4958;word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width: 170px;}
header.pro .logo .ce::after{content: '';width: 1px;height: 16px;position: absolute;left: 0;top: 4px;background: currentColor;}


header.fixed{position: absolute;width: 100%;z-index: 2;left: 0;}
header.actived{z-index: 9;position: fixed;top: 0;width: 100%;}
header>.container>.flexible{height: 64px;}
header ul.rgt>li:not(:last-child){margin-right: 25px;cursor: default;}
header.pro nav>ul>li:not(:last-child){margin-right: 8px;}
header ul.rgt>li>a:not(.btn){display: block;padding: 0 12px;line-height: 28px;height: 28px;border-radius: 20px;}
header ul.rgt>li>a:not(.btn):hover{background-color: rgba(0,0,0,0.2);color: #fff;}
header .bread-nav{height: 24px;transition: all linear 0.2s;}
header .bread-nav.actived{transform: rotate(90deg);}
header .pull-el:hover{cursor: pointer;}
header .pull-el:hover .pull-nav{transform:translateX(-50%) scaleY(1);opacity: 1;}
header .pull-el>span>svg{margin-left: 5px;margin-top: 2px;}
header .pull-nav{position: absolute;left: 50%;top:46px;background: #fff;border: 1px solid #EDEDED;box-shadow: 8px 8px 16px 0 rgba(43,43,88,0.08);border-radius: 3px;color: #0D2366;width: 200px;padding: 10px 0;transform: translateX(-50%) scaleY(0);opacity: 0;transition: ease-in-out 0.4s;transform-origin: center top;z-index: 2;}
header .pull-nav::after{content: '';width: 0;height: 0;border-style: solid;border-width: 0 8px 8px 8px;border-color: transparent transparent #fff transparent;position: absolute;top:-8px;left: calc(50% - 4px);}
header .pull-nav::before{content: '';height: 30px;width: 100%;position: absolute;left: 0;top: 0;transform: translateY(-100%);}
header .pull-nav svg{margin-right: 8px;}
header .pull-nav a{padding: 7px 14px;font-size: 14px;}
header .pull-nav a:hover{background:rgba(240,244,250,1);}
header .free-btn{height: 32px;line-height: 32px;padding: 0 18px;color: #fff;font-size: 14px;font-weight: 700;}
header .thumb-group{margin-left: 40px;}
header .thumb .pho{width: 32px;height: 32px;border-radius: 50%;background: #00C2A7;color: #fff;margin-left: 8px;display: flex;align-items: center;justify-content: center;}
header .thumb+ul{box-shadow:0px 4px 10px 0px rgba(0,0,0,0.1);border-radius:3px;border:1px solid rgba(217,217,217,1);background: #fff;position: absolute;right: 0;top: 32px;width: 136px;padding: 16px 0;display: none;font-weight: 500;}
header .thumb+ul li svg{margin-right: 8px;}
header .thumb:hover+ul,header .thumb+ul:hover{display: block;}
header .thumb+ul a{padding: 4px 10px;}
header .thumb+ul a:hover{background: #efefef;}
header .pro-list{position: absolute; left: 0; top: 64px; width: 100%; background: #fff; margin-top: 0;display: none;box-shadow: 0 2px 16px rgba(0,0,0,0.068);}
header .templates-pull{position: relative;}
header .templates-pull>a{padding: 20px 0;}
header .templates-pull:hover .templates-list{display: block;}
header .templates-list{position: absolute;left: 0;background: #fff;box-shadow: 0 2px 8px rgba(0,0,0,0.1);width: 240px;padding: 10px 0;border-radius: 4px;display: none;}
header .templates-list>li{padding: 6px 12px;background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18"><path fill="%27424770" d="M13 12l-4 4c-.3.2-.3.7 0 1 .3.3.8.3 1 0l5-5-5-5a.8.8 0 00-1 1l4 4z"></path></svg>') 96% 8px no-repeat;transition: all ease-in-out 0.2s;position: relative;display: block;}
header .templates-list>li>a{display: block;}
header .templates-list>li:hover{cursor: default;background-color: #F9FBFD;background-position: 100% 8px;}
header .templates-list li a:hover{background-color: #F9FBFD;}
header .templates-list>li>ul{position: absolute;left: 100%;top: 0;display: none;background: #fff;width: 100%;padding: 10px 0;border-radius: 4px;box-shadow: 0 2px 8px rgba(0,0,0,0.1);}
header .templates-list>li:hover>ul{display: block;}
header .templates-list>li>ul a{display: block;padding: 8px 12px;}


#mb-nav {overflow-y: scroll; background: #fff; position: absolute; right: 0; top: 64px; z-index: 10000; padding: 10px 0; height: calc(100vh - 64px); display: none; box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.17); width: 72%; }
#mb-nav.actived { display: block; }
#mb-nav>ul>li>a, #mb-nav>ul>li>span,#mb-nav>ul>li>ul>li { padding: 10px 20px;}
#mb-nav>ul>li>ul>li>ul { margin-bottom: 5px; font-size: 12px;padding: 0 10px;display: none;}
#mb-nav>ul>li>ul>li>ul>li{margin: 8px 0 6px;font-weight: 700;}
#mb-nav>ul>li>ul>li>ul>li>ul a{font-weight: 400;display: block;margin-top: 6px;}
#mb-nav .sub{background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"><path fill="%230D2366" fill-rule="evenodd" d="M12 13L8 9a.8.8 0 00-1 1l5 5.1 5-5c.2-.3.2-.7 0-1a.8.8 0 00-1.1 0l-4 4z"></path></svg>') 100% 50% no-repeat;}
#mb-nav .sub.actived+ul{display: block;}

footer{padding: 48px 0 60px;background-color:#001B5A;color: #fff;margin-top: auto;}
footer .container{max-width: 984px;}
footer.templates .container{max-width: 1112px;}
footer .sub{font-size: 14px;font-weight: 700;margin-bottom: 16px;text-transform: uppercase;}
footer .cell.two ul{margin-bottom: 32px;}
footer .cell ul li a{font-size: 14px;opacity: 0.6;}
footer .cell ul li a:hover{text-decoration: underline;opacity: 1;color: #fff;}
footer .cell ul li:not(:last-child){margin-bottom: 16px;}
footer .bt{border-top:1px solid rgba(255,255,255,0.2);padding-top:16px;margin-top:40px;font-size: 14px;opacity: 0.6;}
footer .bt li a{width: 32px;height: 32px;display: flex;border-radius:50px;background: rgb(25, 74, 196);}
footer .bt li a:hover{background:#005BEA;color:#fff}
footer .bt li:not(:last-child){margin-right:15px;}
footer .group p{opacity:0.6}
footer .group {margin-top:40px}
footer .logo{margin-bottom:24px;display: flex;}
/* btn loading */
.btn-loading-cont {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,.9);
    z-index: 9;
}
.btn-spin-dot-spin {
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
    animation: loadingCircle 1.2s linear infinite
}
.btn-spin-dot-item {
    position: absolute;
    display: block;
    width: 9px;
    height: 9px;
    background-color: #377DFF;
    border-radius: 100%;
    -webkit-transform: scale(.75);
    transform: scale(.75);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    opacity: .8;
}
.btn-spin-dot-item:first-child {
    top: 0;
    left: 0;
}
.btn-spin-dot-item:nth-child(2) {
    top: 0;
    right: 0;
}
.btn-spin-dot-item:nth-child(3) {
    bottom: 0;
    left: 0;
}
.btn-spin-dot-item:nth-child(4) {
    bottom: 0;
    right: 0;
}

@keyframes loadingCircle {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.video-wrap { max-width: 880px; margin: 20px auto;overflow: hidden;}
.video-wrap .youtube-video { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; background: #000 }
.video-wrap .youtube-video .bg { z-index: 1; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: cover; background-position: center center; cursor: pointer }
.video-wrap .youtube-video .bg:hover:before { cursor: pointer; opacity: 1 }
.video-wrap .youtube-video .bg:after { content: '';  position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);width:104px;height:104px;background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104 104"><path fill="red" d="M43 69V39l26 15-26 15zm60-35.8s-1-7.2-4.2-10.4c-4-4.1-8.4-4.2-10.4-4.4-14.5-1-36.4-1-36.4-1s-21.9 0-36.4 1c-2 .2-6.5.3-10.4 4.4C2 26 1 33.2 1 33.2s-1 8.5-1 17v8C0 66.5 1 75 1 75s1 7.2 4.2 10.4c4 4.1 9.1 4 11.4 4.4C25 90.8 52 91 52 91s21.9 0 36.4-1c2-.3 6.5-.4 10.4-4.5C102 82.3 103 75 103 75s1-8.5 1-17v-8c0-8.4-1-16.9-1-16.9z"/><path fill="rgb(255,255,255)" d="M43 39v30l26-15-26-15z"/></svg>');}
.video-wrap .youtube-video iframe { position: absolute; border: none; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100% }

.return-top { width: 32px; height: 32px; background: rgba(0,0,0,.45); position: fixed; bottom: 68px; right: 1%; display: none; z-index: 1 }
.return-top:hover { background: rgba(0,0,0,.86); cursor: pointer }
.return-top.actived { display: block }
.return-top:after { content: ''; width: 0; height: 0; border-style: solid; border-width: 0 6px 6px; border-color: transparent transparent #fff transparent; position: absolute; left: calc(50% - 6px); top: calc(50% - 3px) }

.hidden,[hidden]{display: none;}

#loading { background-color: rgba(255,255,255,.8); position: fixed; z-index: 2; left: 0; top: 0; width: 100%; height: 100% }
.loadingIco { border-radius: 50%; width: 80px; height: 80px; position: absolute; left: calc(50% - 40px); top: calc(50% - 40px); border-top: 8px solid rgba(35, 97, 249,0.18); border-right: 8px solid rgba(35, 97, 249,0.18); border-bottom: 8px solid rgba(35, 97, 249,0.18); border-left: 8px solid #377DFF; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation: loading .8s infinite linear; animation: loading .8s infinite linear }
@-webkit-keyframes loading { 0% { -webkit-transform: rotate(0); transform: rotate(0) } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg) } }
@keyframes loading { 0% { -webkit-transform: rotate(0); transform: rotate(0) } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg) } }
.back-top {
	position: fixed;
	right: 30px;
	bottom: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 6px;
	background-color: #fff;
	border-radius: 50%;
	font-size: 14px;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.199082);
}

@media (max-width: 960px){
  .md-block{display: block;}
	.md-flexible{display: flex;}
	.md-hidden{display: none;}
  .md-column{flex-direction: column;}
  .md-column-reverse{flex-direction: column-reverse;}
	.md-width{width: 100% !important;}
	.md-j-center{justify-content: center;}
	.md-a-center{align-items:center;}
	.md-center{text-align:center;}
	.md-left{text-align:left;}
  .md-right{text-align:right;}

  footer .cell{margin-bottom: 20px;padding-top: 10px;border-left: none !important;padding-left: 0 !important;}
  footer .cell:not(:first-child){border-top: 1px solid rgba(0,0,0,0.1);}
	footer .cell:not(:last-child) ul li a{display: block;}
  .com-block{padding: 60px 0;}
	.com-block .com-title{font-size: calc(18px + 1.8vw);}
}

@media (max-width: 769px){
  .sm-block{display: block;}
	.sm-inline-block{display: inline-block;}
	.sm-flexible{display: flex;}
	.sm-hidden{display: none;}
  .sm-column{flex-direction: column;}
  .sm-column-reverse{flex-direction: column-reverse;}
	.sm-width{width: 100% !important;}
	.sm-j-center{justify-content: center;}
	.sm-a-center{align-items:center;}
	.sm-center{text-align:center;}
	.sm-a-left{align-items: start;}
	.sm-left{text-align:left;}
	.sm-right{text-align:right;}
	.sm-reverse{flex-wrap: wrap-reverse;}

	.com-block{padding: 40px 0;}
	.com-block .com-tip{padding-bottom: 30px;}
  .back-top{display: none;}
  .pro-list{margin-top: 40px;}
}
@media (max-width: 480px){
  footer .bt{flex-direction: column;}
  footer .bt ul{margin-top:8px;}
}
@media (max-width: 380px){
  header:not(.pro) .logo{width: 86px;}
  header.pro .logo{width: 260px;}
}