@charset "utf-8";
:root{
    --color-first: radial-gradient(farthest-corner at 0% 0%, #E74237 0%, #F8682C 50%, #FD9800 100%);
    --color-second: radial-gradient(circle at 0% 0%, #FD9B03 0.68%, #FF5D05 50.42%, #ED7E67 100%);
    --color-third: radial-gradient(circle at 0% 0%, #ED7F65 0%, #E46D7E 54.49%, #9D8FD7 100%);
    --color-four: radial-gradient(circle at 0% 0%, #AA8CCA 0.68%, #7697FA 49.32%, #BA66FA 100%);
    /* --color-truns: radial-gradient(circle at 0% 0%, #E74237 0.68%, #FA895A 58.28%, #FA675C 100%); */
    /* --color-truns: linear-gradient(135deg, #E74237 0%, #FA895A 50%, #FA675C 100%); */
    --color-truns: linear-gradient(135deg, #E74237 0%, #E74237 30%, #FA895A 50%, #E74237 70%, #E74237 100%);
    --color-truns1:linear-gradient(80deg, #E74237 0%, #FA895A 50%, #E74237 100%);
}
*{margin:0px;padding:0px;}

html{height: 100%;font-size: 14px;}
img{border:none;vertical-align:top;object-fit:cover;}
li{list-style-type:none;}
ul,dl,ol{list-style:none;}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
address,cite,code,em,th{font-weight:normal; font-style:normal;}
a{outline: none; text-decoration: none;cursor: pointer;}
.fontBold{font-weight: bold;}
.font12{font-size: 12px;}
.font16{font-size: 16px;}
.font18{font-size: 18px;}
.font20{font-size: 20px;}
.font22{font-size: 22px;}
.font24{font-size: 24px;}
.font33{color: #333333;}
.font99{color: #999999;}
.fontFF{color: #FFFFFF;}
.fontBold{font-weight: bold;}
.cursorPointer{cursor: pointer;}
.aClass{cursor: pointer;text-decoration: none;color: #000000;}
.aClass:hover{text-decoration: none;}
.flexRow{display: flex;flex-direction: row;}
.flexColumn{display: flex;flex-direction: column;}
.flexcenter{align-items: center;justify-content: center;}
.overflowclass{ overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;}
.overflowclassone{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: inline-block;}
html, body {
    /* overflow-x: hidden; */
    background: #FFFFFF;font-size: 16px;  line-height: 2;}
input{border:none;outline:none;}
.cBlack a, .cBlack {color: #cccccc;text-decoration: none;}


header{height:80px;background: #FFFFFF;box-shadow: 0px 0px 15px 0px rgba(198,198,198,0.35);border: 1px solid #F3F3F3;}

.pdft-left{height:100%;align-items: center;}
.pdflogo{width:181px;height:62px;margin:0 150px 0 0;}
.pdflogo img{width:100%;height: 100%;}
.pdf-top{width:1380px;margin:0 auto;justify-content: space-between;height:100%;align-items: center;}
.padftma{align-items: center;font-size: 20px;color: #333333;line-height: 30px;margin:0 77px 0 0;position: relative;    height: 100%;justify-content: center;}
.padftma:last-child{margin:0;}
.padftma.check,.padftma:hover{color:#E74237; }
.padftma.check{font-weight: bold;}
.padftma.check > a{
    color: #E74237;
}
.padftma > a > div > span{
    height: 32px;
    display: block;
    width: 106px;
    text-align: center;
}
.pdft-middle{height: 100%;    align-items: center;}
.tsels{position: absolute;background: #FFFFFF;box-shadow: 0px 0px 15px 0px rgba(212,212,212,0.35);border-radius:5px;width:165px;top:80px;display:none;align-items: center;
    border: 1px solid #F3F3F3;z-index:999;
}
.tselecta{font-weight: 400;font-size: 16px;color: #333333;padding:8px 0 8px 20px;width: 100%;}
.tselecta:hover{background: #FDEDED;color:#E74237;}
.tselecta-word b{background:url(../images/icon38.png) no-repeat;background-size: contain;width:26px;height:26px;margin:0 10px 0 0;}
.tselecta-pdf-to-word b{background:url(../images/icon38.png) no-repeat;background-size: contain;width:26px;height:26px;margin:0 10px 0 0;}
.tselecta-ppt b{background:url(../images/icon39.png) no-repeat;background-size: contain;width:26px;height:26px;margin:0 10px 0 0;}
.tselecta-pdf-to-ppt b{background:url(../images/icon39.png) no-repeat;background-size: contain;width:26px;height:26px;margin:0 10px 0 0;}
.tselecta-excel b{background:url(../images/icon40.png) no-repeat;background-size: contain;width:26px;height:26px;margin:0 10px 0 0;}
.tselecta-pdf-to-excel b{background:url(../images/icon40.png) no-repeat;background-size: contain;width:26px;height:26px;margin:0 10px 0 0;}
.tselecta-imgs b{background:url(../images/icon41.png) no-repeat;background-size: contain;width:26px;height:26px;margin:0 10px 0 0;}
.tselecta-pdf-to-image b{background:url(../images/icon41.png) no-repeat;background-size: contain;width:26px;height:26px;margin:0 10px 0 0;}
.tselecta-img-pdf b,
.tselecta-image-to-pdf b{
    background: url(../images/icon45.png) no-repeat;
    background-size: contain;width:26px;height:26px;margin:0 10px 0 0;
}
.tselecta-word-pdf b,
.tselecta-word-to-pdf b{
    background: url(../images/icon44.png) no-repeat;
    background-size: contain;width:26px;height:26px;margin:0 10px 0 0;
}
.tselecta-ppt-pdf b,
.tselecta-ppt-to-pdf b{
    background: url(../images/icon46.png) no-repeat;
    background-size: contain;width:26px;height:26px;margin:0 10px 0 0;
}
.tselecta-excel-pdf b,
.tselecta-excel-to-pdf b{
    background: url(../images/icon47.png) no-repeat;
    background-size: contain;width:26px;height:26px;margin:0 10px 0 0;
}
.tselecta-pdf-in b,
.tselecta-pdf-merge b{
    background: url(../images/icon43.png) no-repeat;
    background-size: contain;width:26px;height:26px;margin:0 10px 0 0;
}
.tselecta-pdf-zip b,
.tselecta-pdf-compress b{
    background: url(../images/icon48.png) no-repeat;
    background-size: contain;width:26px;height:26px;margin:0 10px 0 0;
}
.tselecta-pdf-delete b{
    background: url(../images/icon66.png) no-repeat;
    background-size: contain;width:26px;height:26px;margin:0 10px 0 0;
}
.tselecta-pdf-crop b{
    background: url(../images/icon48.png) no-repeat;
    background-size: contain;width:26px;height:26px;margin:0 10px 0 0;
}
.tselect{align-items: flex-start;width: 100%;overflow: hidden;}
.padftma:hover .tsels{display:flex;}
.padftma-top{height: 100%;justify-content: center;}
.tle-top{align-items: center;height: 100%;justify-content: center;gap: 5px;}
.tle-top b{background:url(../images/icon1.png) no-repeat;background-size: contain;width:11px;height:7px;margin: 0;}
.tlesp{margin:14px 0 0 0;width: 41px;height: 5px;
    background: linear-gradient(to right, #E74237, #FE6B53, #FC476D);
    border-radius:3px;display:none;position: absolute;bottom:0;left:45%;transform: translateX(-50%);
}
.padftma-top:hover .tle-top span{
    color: #E74237;
}
.padftma-top:hover .tle-top b{
    background: url(../images/icon2.png) no-repeat;
    background-size: contain;
    width: 11px;
    height: 7px;
    margin:  0 0 ;
}
.padftma.check .tlesp,.padftma:hover .tlesp{display:flex;}
.padftma:nth-child(1).check .tlesp{left:50%;}
.usernolog,.userlog{width:30px;height:30px;}
.usernolog2,.userlog2{margin:0 0 0 15px;}
.pdftr-users b{
    background:url(../images/icon3.png) no-repeat;
    background-size: contain;
    width:30px;
    height:30px; 
    margin-right: 7px;
}
.pdftr-users{
    display: flex;
    align-items: center;
    gap: 5px;
}
.pdftr-users .usernolog1,
.pdftr-users .usernolog2{
    font-size: 16px;
    color: #333333;
    line-height: 30px;
    margin: 0;
}
.pdftr-users .usernolog1:hover,
.pdftr-users .usernolog2:hover{
    color: #E74237;
}
.usernolog1 b{background:url(../images/icon3.png) no-repeat;background-size: contain;width:30px;height:30px; }
.usernolog2 b{background:url(../images/icon4.png) no-repeat;background-size: contain;width:30px;height:30px; }
.usernolog1:hover b{background:url(../images/icon5.png) no-repeat;background-size: contain;width:30px;height:30px; }
.usernolog2:hover b{background:url(../images/icon6.png) no-repeat;background-size: contain;width:30px;height:30px; }
.usernolog1{
    display: flex;
    align-items: center;
    gap: 12px;
}
.usernolog1 > span{
    font-size: 16px;
    color: #333333;
    line-height: 30px;
}
.usernolog1:hover > span{
    color: #E74237;
}
  
.userBox {position: relative;display: inline-block;}
.avatar {position: relative;width: 40px;height: 40px;cursor: pointer;}
.avatar img {width: 100%;height: 100%;border-radius: 50%;}
.avatar.big {width:45px;height: 45px;}
.vipTag {position: absolute;top: -5px;left: -15px;background: var(--color-truns);color: #fff;font-size: 10px; border-radius: 8px 0px;
    height: 15px;padding: 0 6px;font-weight: bold;font-size: 14px;color: #FFFFFF;line-height: 16px;
}
.userTop .vipTag{left:20px;}
.userCard {position: absolute;top: calc(100% + 8px);right: 0;width: 300px;background: #fff;border-radius:5px;box-shadow: 0 10px 30px rgba(0,0,0,0.1);padding: 15px;
    opacity: 0;visibility: hidden;
    transform: translateY(10px);transition: all 0.25s;z-index: 999;box-shadow: 0px 0px 15px 0px rgba(212,212,212,0.35);border: 1px solid #F3F3F3;
}
.userBox:hover .userCard {opacity: 1;visibility: visible; }
.userCard::before {content: '';position: absolute;top: -8px;right:12px;width: 0;height: 0;border-left: 8px solid transparent;
    border-right: 8px solid transparent;border-bottom: 8px solid #fff;z-index: 1000;
}
.userCard::after {content: '';position: absolute;top: -9px;right: 11px;width: 0;height: 0;border-left: 9px solid transparent;border-right: 9px solid transparent;border-bottom: 9px solid #F3F3F3;z-index: 999;}
.userTop {margin-bottom: 12px;}
.userInfo {margin-left: 10px;}
.phone { font-size: 16px;color: #333333;}
.uid {font-size: 14px;color: #999999;line-height: 14px;}
.vipBox { background:#F9F9F9;padding:6px 10px;border-radius:5px;margin-bottom: 12px;justify-content: space-between;}
.vipBox .status {color: #E74237;}
.btn {background: linear-gradient(to right, #E74237, #FE6B53, #FC476D);color: #fff;
    text-align: center;padding:5px 0;border-radius:5px;margin-bottom:20px;cursor: pointer;font-weight:bold;font-size: 16px;color: #FFFFFF;line-height: 30px}
.menu {margin-bottom: 10px;}
.btn:hover{
    background: linear-gradient(to right, #FC476D, #FE6B53, #E74237);
}
.item {text-align: center;flex: 1;}
.icon {width: 36px;height: 36px; margin: 0 auto 5px;}
.item p {font-size: 16px;color: #333;}
.logout {text-align: center; border: 1px solid #F3F3F3;border-radius:5px;color: #999;cursor: pointer;font-size: 16px;}
.logout:hover {color:#333333;background: #F9F9F9;}
.vbleft,.vbright{font-size: 14px;color: #666666;line-height: 24px;}
.vbright{text-align:end;}
.itemsafe .icon{background:url(../images/icon50.png) no-repeat;width:40px;height:40px;background-size:contain; }
.itemorder .icon{background:url(../images/icon51.png) no-repeat;width:40px;height:40px;background-size:contain; }
.itempersonal .icon{background:url(../images/icon52.png) no-repeat;width:40px;height:40px;background-size:contain; }

.logmenu .itemsafe .icon{background:url(../images/icon50.png) no-repeat;width:40px;height:40px;background-size:contain; }
.logmenu .itemorder .icon{background:url(../images/icon51.png) no-repeat;width:40px;height:40px;background-size:contain; }
.logmenu .itempersonal .icon{background:url(../images/icon52.png) no-repeat;width:40px;height:40px;background-size:contain; }

.logmenu .itemsafe:hover .icon{background:url(../images/icon53.png) no-repeat;width:40px;height:40px;background-size:contain;}
.logmenu .itemorder:hover .icon{background:url(../images/icon54.png) no-repeat;width:40px;height:40px;background-size:contain;}
.logmenu .itempersonal:hover .icon{background:url(../images/icon55.png) no-repeat;width:40px;height:40px;background-size:contain;}
.logmenu .item:hover p{color:#E74237;}
.maind{position: relative;}
.side-card{  position:fixed;top:30%; right:60px;z-index: 1000;
    background: #FFFFFF;
    box-shadow: 0px 0px 15px 0px rgba(212,212,212,0.35);
    border-radius: 5px 5px 5px 5px;
    border: 1px solid #F3F3F3;
    padding: 15px;
}
.sdcdlivip b{background:url(../images/icon56.png) no-repeat;width:40px;height:40px;background-size:contain; }
.sdcdlikf b{background:url(../images/icon57.png) no-repeat;width:40px;height:40px;background-size:contain; }
.sdcdlicolect b{background:url(../images/icon58.png) no-repeat;width:40px;height:40px;background-size:contain; }
.sdcdlivip:hover b{background:url(../images/icon59.png) no-repeat;width:40px;height:40px;background-size:contain; }
.sdcdlikf:hover b{background:url(../images/icon60.png) no-repeat;width:40px;height:40px;background-size:contain; }
.sdcdlicolect:hover b{background:url(../images/icon61.png) no-repeat;width:40px;height:40px;background-size:contain; }
.sdcdli{font-size: 16px;color: #333333;align-items: center;margin: 0;cursor: pointer;}
.sdcdli:hover{color:#E74237;}
.sdcd-list{align-items: center;gap: 25px;}


.breakimg{width:14px;height:18px;margin:0 10px 0 0;}
.freeSize,.freeSize a{font-size: 14px;color: #999999;}
.freeSize a:hover{color: #E74237;}
.breadcrumb{align-items: center;}
.freeSize .lastbreada{color:#333333;}

.pdli-item {border-bottom: 1px solid #F3F3F3;padding:25px 0;transition:all .3s ease;}
.art-content .pdli-item:first-of-type{padding-top: 0;}
.pdli-item:hover{background: #f6f6f6;}
.pdli-item:hover .pdlitta{color: #E74237;}
.wznews-left {justify-content: space-between;}
.pdltmDown {justify-content: space-between;margin: 18px 0 0 0;}
.pdltmDown, .pdltmDown a {font-size: 12px;color: #999999;}
.pdlitta {font-weight: bold;-webkit-line-clamp: 1;font-size: 18px;color: #333333;line-height:22px;transition:all .3s ease;}
.pdli-desc, .pdltmdowna {transition: all .3s ease;}
.pdli-title{margin:0 60px 0 0;}
.pdli-desc {font-size: 14px;color: #666666;line-height: 26px;-webkit-line-clamp: 2;margin: 18px 0 -6px 0;}
.pdlita, .pdlita img {width: 160px;border-radius:5px;height: 90px;}
.pdltmdowna img {width: 20px;height: 20px;border-radius:5px;margin: 0 12px 0 0;}
.pdltmdoTiem{margin:0 28px 0 30px;}
.pdltmdoTiem,.pdltmdoWatch{align-items: center;}
.pdltmdoTiem b {width: 18px;height: 18px;background: url(../images/icon32.png) no-repeat;margin: 0 4px 0 0;background-size: contain;}
.pdltmdoWatch b {width: 21px;height: 15px;background: url(../images/icon33.png) no-repeat;background-size: contain;margin:0 4px 0 0;flex-shrink: 0;}
.pdltmdols{ font-size:12px;color: #999999; height:25px;padding:6px 15px;background:#F8F8F8;border-radius: 5px;margin:0 0 0 8px;}

.pdli-item:hover .pdltmdols{ background:#ffffff;}
.pdli-item .pdltmdols:hover{ background:#FCE0E0;color:#E74237;}
.mngfPage {margin: 30px auto 0 auto;width: 100%;}
.mngfPage .page {display: flex;justify-content: center;align-items: center;gap: 15px;}
.page a {width: auto;display: flex;align-items: center;height: 31px;padding: 0 12px;font-size: 14px;color: #999999;
    background: #FFFFFF;border-radius: 3px 3px 3px 3px;border: 1px solid #E4E4E4;white-space: nowrap;
}
.page a.active,.page a:hover{color: #333;border-color: #333;}


.listtitle{justify-content: space-between;}
.lititle-left span{display: inline-block;background: linear-gradient(to right, #E74237, #FE6B53, #FC476D);-webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.lititle-left{font-weight:bold;font-size: 26px;color: #333333;align-items: center;transition:all .3s ease;    line-height: 26px;}
.lititle-more{ font-size: 14px;color: #999999;transition:all .3s ease;align-items: center;}
.lititle-more:hover{ color: #E74237;}
.lititle-more b{width:6px;height: 11px;background: url(../images/icon27.png) no-repeat;background-size: contain;margin: 0 0 0 4px;}
.lititle-more:hover b{background:url(../images/icon28.png) no-repeat;background-size: contain;}

.pdfcd-right{width:100%;margin:0 0 0 39px;}
.pdr-lists{margin:30px 0 0  0;}
.pdrlma,.pdrlma img{ width: 160px;height: 91px;border-radius: 5px 5px 5px 5px;}
.pdrlma{position: relative;overflow: hidden;flex: 0 0 auto;}
.pdrlm-title{font-size: 16px;color: #333333;line-height: 26px;-webkit-line-clamp:1;transition:all .3s ease;}
.pdrlm-middle,.pdltmdo-left{font-size: 14px;color: #999999;line-height: 26px;}
.pdrlm-middle span{margin:0 5px;}
.pdr-lists .pdltmdoTiem{margin:0;}
.pdltmdo-left{justify-content: space-between;}
.pdrlm{width:100%;margin:0 0 0 18px;justify-content: space-between;}
.pdrl-item{margin:0 0 24px 0;}
.pdrl-item:last-child{margin:0;}
.pdrlmad{position:absolute;background: linear-gradient(to right, #E74237, #FE6B53, #FC476D); font-weight:bold;font-size: 14px;color: #FFFFFF;
    top:10px;left:10px;border-radius:8px 0px ;padding: 0 9px;height: 20px;line-height: 20px;
}
.pdrl-item:hover .pdrlm-title{
    color: #E74237;
}
.hotlul li b{width: 13px;height: 13px;background: url(../images/icon49.png) no-repeat;background-size: contain;margin:2px 8px 0 0;flex-shrink: 0;}
.hotlula {font-size: 16px;color: #333333;line-height: 20px;transition: all .3s ease;display: -webkit-box !important;
    -webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;text-overflow: ellipsis;
}
.hotlul li{display: flex;align-items: center;margin: 0 0 20px 0;}
.hotlist{margin:30px 0 0 0;}






.pdlitta:hover,.pdrlm-title:hover,.hotlula:hover{color:#E74237;}
.atcr-jpjc,.atcr-hotart{margin:38px 0 0 0;}

footer{height: 263px;background: #FBFBFB;}
.foots{margin:30px 0 0 0;border-top: 1px solid #F3F3F3;background: #FBFBFB;}
.foot-top{width:1380px;margin:40px auto 0 auto;}
.pdflogo-foot{width:181px;height: 62px; }
.pdflogo-foot img{width:100%;height:100%;}
.ftr-list p{ font-weight:bold;font-size: 18px;color: #333333;line-height: 20px;margin:0 0 26px 0;}
.ftr-list a{ font-size: 16px;color: #999999;line-height: 20px;margin:0 0 20px 0;}
.ftr-list a:hover{color: #000;}
.foot-right{margin:0 0 0 219px;}
.ftr-list:nth-child(2){margin:0 200px 0 180px;}
.foot-down{width:100%; background: #F7F7F7;}
.foot-down p{margin:0 auto;width:1380px;align-items: center;justify-content: center;font-size: 14px;color: #999999;height: 50px;}
.foot-down b{background:url(../images/icon34.png) no-repeat;background-size: contain;width:18px;height:20px;margin:0 8px;}
.ftrl-link{align-items: center;}
.emails b{background:url(../images/icon31.png) no-repeat;background-size: contain;width:19px;height:15px;margin:0 1px 0 0;}
.phonenumber b{background:url(../images/icon30.png) no-repeat;background-size: contain;width:17px;height:15px;margin:0 3px 0 0;}
.onlinelink b{background:url(../images/icon29.png) no-repeat;background-size: contain;width:14px;height:15px;margin:0 5px 0 0;}






.aboutus{
    width: 1380px;
    margin: 0 auto;
    margin-top: 30px;

}
.sundries{
    width: 100%;
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    gap: 40px;
}
.sundriesL{
    width: 200px;
    flex: 0 0 auto;
    background: #F8F8F8;
    border-radius: 5px;
    border: 1px solid #F3F3F3;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    align-self: start;
}
.sundriesL > a{
    width: 100%;
    box-sizing: border-box;
    display: block;
    font-size: 20px;
    color: #333333;
    line-height: 44px;
    border-radius: 5px;
    padding: 0 30px;
}
.sundriesL > a.active{
    background: linear-gradient(to right, #E74237, #FE6B53, #FC476D);
    color: #ffffff;
    font-weight: bold;
}
.sundriesL > a.active:hover{
    color: #ffffff;
}
.sundriesL > a:hover{
    background-color: #FDD4D4;
    color: #E74237;
    font-weight: bold;
}
.sundriesR{
    width: 1140px;
    background: #FFFFFF;
    border-radius: 5px;
    border: 1px solid #F3F3F3;
    padding: 30px;
    min-height: calc(100vh - 463px);
}
.sundriesR h1{
    font-size: 22px;
    color: #333333;
    line-height: 30px;
    font-weight: bold;
    padding-bottom: 13px;
    display: inline-block;
    position: relative;
}
.sundriesR h1::after{
    content: "";
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #E74237;
}
.sundriesR_title{
    border-bottom: 3px solid #F4F4F4;
    margin-bottom: 15px;
}
.sundriesR p,
.sundriesR div,
.sundriesR li,
.sundriesR ul,
.sundriesR ol{
    font-size: 16px;
    color: #333333;
    line-height: 35px;
}
.sundriesR h2{
    font-size: 20px;
    color: #333333;
    line-height: 35px;
    font-weight: bold;
}


/* transformation */
.transformation{
    width: 1380px;
    margin: 0 auto;
    margin-top: 30px;
}
.transformation_main{
    width: 100%;
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    gap: 40px;
}
.transformationL{
    width: 250px;
    background: #FFFFFF;
    border-radius: 5px;
    border: 1px solid #F3F3F3;
    display: flex;flex-direction: column;
    gap: 20px;
    align-self: start;
    padding-bottom: 10px;
}
.transformationLs{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.transformationLs > span{
    font-size: 20px;
    color: #333333;
    line-height: 57px;
    padding-left: 26px;
    font-weight: bold;
}
.transformationLs > a{
    display: flex;
    align-items: center;
    gap: 11px;
    padding-left: 25px;
    height: 45px;
}
.transformationLs > a img{
    width: 26px;
    height: 26px;
}
.transformationLs > a span{
    font-size: 16px;
    color: #333333;
}
.transformationLs > a.active{
    background: linear-gradient(to right, #FBD2D0, #FDEEED) !important;
}
.transformationLs > a.active span{
    color: #E74237;
    font-weight: bold;
}
.transformationLs > a:hover{
    background: #FFF2EE;
}
.transformationLs > a.hot b{
    font-size: 14px;
    color: #E74237;
    line-height: 20px;
    padding: 0 5px;
    background: #FEC5C5;
    border-radius: 10px 0px 10px 0px;
}
.transformationLs > a.recommendation b{
    font-size: 14px;
    color: #2E84F7;
    line-height: 20px;
    padding: 0 5px;
    background: #C5DDFD;
    border-radius: 10px 0px 10px 0px;
}
.transformationR{
    width: 1090px;
    background: #FFFFFF;
    border-radius: 5px;
    border: 1px solid #F3F3F3;
    padding: 25px;
}
.transformation_title{
    width: 100%;
    display: flex;
    gap: 20px;
}
.transformation_title h2{
    font-size: 26px;
    color: #333333;
    font-weight: bold;
    line-height: 28px;
}
.transformation_title span{
    font-size: 16px;
    color: #999999;
    line-height: 22px;
    align-self: self-end;
}
.transformation_tip{
    width: 100%;
    margin-top: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.transformation_tip > div{
    display: flex;
    align-items: center;
    gap: 10px;
}
.transformation_tip > div b{
    width: 23px;
    height: 23px;
    background: #FFE8E2;
    border-radius: 50%;
    font-size: 16px;
    color: #E74237;
    line-height: 23px;
    text-align: center;
}
.transformation_tip > div span{
    font-size: 16px;
    color: #999999;
    line-height: 18px;
}
.transformation_tip > img{
    width: 45px;
    height: auto;
}
.transformation_file{
    width: 100%;
    height: 224px;
    margin-top: 37px;
    background: linear-gradient(to right, #FEF1F0, #FEF9F9) ;
    border-radius: 5px;
    border: 2px dashed #E9E9E9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.transformation_file.active{
    background: #FFF7F4;
    border: 2px dashed #E74237;
}
.transformation_file:hover{
    border: 2px dashed #E74237;
}
.transformation_file > p{
    font-size: 18px;
    color: #333333;
    line-height: 20px;
    font-weight: bold;
}
.transformation_file > span{
    font-size: 14px;
    color: #999999;
    line-height: 16px;
}
.transformation_file b{
    font-size: 14px;
    color: #E74237;
    line-height: 16px;
}
.transformation_file.active > button{
    padding: 0 30px;
}
.transformation_file > button{
    box-shadow: 0px 0px 17px 0px #FD8C8D;
    border-radius: 8px;
    background: linear-gradient(to right, #E74237, #FE6B53, #FC476D) ;
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 55px;
    padding: 0 90px;
    border: none;
    cursor: pointer;
}
.transformation_file > button:disabled{
    background: #FD8C8D;
    box-shadow: 0px 0px 17px 0px #FD8C8D;
}
.transformation_file > button:hover{
    background: linear-gradient(to right, #FC476D, #FE6B53, #E74237) ;
}
.transformation_file_done {
    display: none;
    width: 100%;
    border-radius: 5px;
    border: 2px dashed #E74237;
    margin-top: 37px;
}
.transformation_file_done:hover{
    border: 2px dashed #E74237;
}
.file_box {
    border-radius: 8px;
    background: #fff;
}
.file_header {
    display: flex;
    font-size: 18px;
    color: #333333;
    border-bottom: 1px solid #eee;
    line-height: 48px;
    padding-left: 42px;
    background: #F9F9F9;
}
.file_item {
    display: flex;
    align-items: center;
    padding: 0;
    font-size: 16px;
    line-height: 60px;
    color: #333;
    padding-left: 42px;
    border-bottom: 1px solid #eee;
}
.file_item:hover {
    background: linear-gradient(to bottom, #FEF1F0, #FEF9F9) ;
}
.col_name {
    flex: 2;
    word-break: break-all;

}
.file_item .col_name{
    line-height: 18px;
}
.col_size {
    flex: 1;
    text-align: center;
}
.col_status {
    flex: 1;
    text-align: center;
}
.col_action {
    flex: 1;
    text-align: center;
}
.success {
    color: #333;
}
.btn_del {
    background: #FFFFFF;
    border: none;
    padding: 7px 18px;
    border-radius: 5px;
    font-size: 16px;
    color: #666666;
    cursor: pointer;
    border: 1px solid #ECECEC;
}
.btn_del:hover{
    color: #E74237;
    border: 1px solid #E74237;
}
.file_footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 45px;
}
.file_count {
    font-size: 16px;
    color: #999;
}
.file_count b {
    color: #E74237;
}
.btn_start {
    background: linear-gradient(to right, #E74237, #FE6B53, #FC476D) ;
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
}
.btn_start:hover{
    background: linear-gradient(to right, #FC476D, #FE6B53, #E74237) ;
}
.transformationR_tip{
    width: 100%;
    margin-top: 30px;
    padding-bottom: 25px;
    border-bottom: 3px solid #F7F7F7;
}
.transformationR_tip p{
    font-size: 14px;
    color: #999999;
    line-height: 20px;
}
.top {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    color: #333;
    line-height: 18px;
}
.top > span:last-of-type{
    font-size: 14px;
    color: #999999;
    line-height: 16px;
}
.progress {
    width: 100%;
    height: 5px;
    background: #EBEBEB;
    border-radius: 10px;
    overflow: hidden;
}
.bar {
    height: 100%;
    width: 100%;
    border-radius: 10px;
}
.desc {
    font-size: 14px;
    color: #999;
    line-height: 16px;
}
.task.success .bar {
    background: linear-gradient(to right, #33D399, #03D06D, #36A002) ;
}
.task.success .desc {
    color: #999;
}
.task.fail .bar {
    background: linear-gradient(to right, #E74237, #FE6B53, #FC476D) ;
}
.task.fail .desc {
    color: #E74237;
}
.task.loading .bar {
    background: linear-gradient(to right, #FF8965, #FD7D68, #F2633B) ;
}


  .transformation_record{
    width: 100%;
    margin-top: 30px;
  }
  .transformation_record > h3{
    font-size: 22px;
    color: #333333;
    line-height: 24px;
    font-weight: bold;
  }
.transformation_record > h3 > span{
    text-shadow: 0px 0px 15px rgba(254,189,190,0.35);
    background: linear-gradient(to right, #E74237, #FE6B53, #FC476D);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.transformation_record_title{
    width: 100%;
    margin-top: 30px;
    height: 48px;
    background: #F9F9F9;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.transformation_record_title > span{
    font-size: 18px;
    color: #333333;
    line-height: 20px;
    font-weight: bold;
}
.transformation_record_title_name{
    flex: 2.2;
    padding-left: 30px;
    box-sizing: border-box;
}
.transformation_record_title_format{
    flex: 1;
    text-align: center;
}
.transformation_record_title_size{
    flex: 1;
    text-align: center;
}
.transformation_record_title_state{
    flex: 1.5;
    text-align: center;
}
.transformation_record_title_button{
    flex: 1.8;
    text-align: center;
}
.transformation_record_item{
    width: 100%;
    height: 80px;
    border-bottom: 1px solid #F3F3F3;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.transformation_record_item:hover{
    background: linear-gradient(to bottom, #FEF1F0, #FEF9F9) ;
}
.transformation_record_name{
    flex: 2.2;
    box-sizing: border-box;
    padding-left: 30px;
    /* justify-content: center; */
    display: flex;
    align-items: center;
    gap: 10px;

}
.transformation_record_name img{
    width: 26px;
    height: 26px;
}
.transformation_record_name span{
    font-size: 16px;
    color: #333333;
    line-height: 18px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; 
    overflow: hidden;
    text-overflow: ellipsis;
}
.transformation_record_format{
    flex: 1;
    text-align: center;

    font-size: 16px;
    color: #333333;
    line-height: 18px;
}
.transformation_record_size{
    flex: 1;
    text-align: center;

    font-size: 16px;
    color: #333333;
    line-height: 18px;
    padding-right: 10px;
    box-sizing: border-box;
}
.transformation_record_state{
    flex: 1.5;
    padding: 5px 0;
}
.transformation_record_state > .task{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}
.transformation_record_button{
    flex: 1.8;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.transformation_btn_download{
    font-size: 16px;
    color: #FFFFFF;
    line-height: 30px;
    padding: 0 20px;
    background: linear-gradient(to right, #E74237, #FE6B53, #FC476D) ;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}
.transformation_btn_download:hover{
    background: linear-gradient(to right, #FC476D, #FE6B53, #E74237) ;
}
.transformation_btn_del{
    font-size: 16px;
    color: #666666;
    line-height: 30px;
    padding: 0 20px;
    background: #FFFFFF;
    border-radius: 5px;
    border: 1px solid #ECECEC;
    cursor: pointer;
}
.transformation_btn_del:hover{
    color: #E74237;
    border: 1px solid #E74237;
}
.transformation_btn_fail{
    font-size: 16px;
    color: #E74237;
    line-height: 30px;
    padding: 0 20px;
    background: #ffffff;
    border-radius: 5px;
    border: 1px solid #E74237;
    cursor: pointer;
}
.transformation_btn_processing{
    font-size: 16px;
    color: #666666;
    line-height: 30px;
    padding: 0 12px;
    background: #F7F7F7;
    border-radius: 5px;
    border: 1px solid #ECECEC;
}
.transformationR_tip2{
    width: 100%;
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.transformationR_tip2s{
    width: 322px;
    padding: 20px;
    box-sizing: border-box;
    background: #F9F9F9;
    border-radius: 5px;
    border: 1px solid #F3F3F3;
}
.transformationR_tip2s:hover{
    border: 1px solid #E74237;
}
.transformationR_tip2s_title{
    display: flex;
    align-items: center;
    gap: 10px;
}
.transformationR_tip2s_title span{
    font-size: 16px;
    color: #333333;
    font-weight: bold;
    line-height: 18px;
}
.transformationR_tip2s > p{
    width: 100%;
    margin-top: 20px;
    font-size: 14px;
    color: #999999;
    line-height: 20px;
}
.transformationR_none{
    width: 100%;
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 35px;
}
.transformationR_none img{
    width: 218px;
}
.transformationR_none span{
    font-size: 16px;
    color: #999999;
}
.upload_faile.active{
    display: flex;
}
.upload_faile{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;

}
.upload_faile > div{
    width: 401px;
    background: #FFFFFF;
    border-radius: 5px;
    padding: 19px 17px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding-bottom: 27px;
}
.upload_faile_close{
    border: none;
    width: 13px;
    height: 13px;
    background: url(../images/loginBox_close.png) no-repeat;
    background-size: 100% 100%;
    align-self: self-end;
    cursor: pointer;
}
.upload_faile_close:hover{
    background: url(../images/loginBox_close_hover.png) no-repeat;
    background-size: 100% 100%;
}
.upload_faile > div > img{
    width: 91px;
}
.upload_faile > div > span{
    font-size: 18px;
    color: #333333;
    line-height: 20px;
    font-weight: bold;
}
.upload_faile > div > p{
    font-size: 14px;
    color: #999999;
    line-height: 20px;
    padding: 0 25px;
}
.re-upload-btn{
    font-size: 18px;
    color: #FFFFFF;
    line-height: 35px;
    padding: 0 26px;
    border-radius: 5px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    background: linear-gradient(to right, #E74237, #FE6B53, #FC476D) ;
}
.re-upload-btn:hover{
    background: linear-gradient(to right, #FC476D, #FE6B53, #E74237) ;
}
.transformation_del_tab.active{
    display: flex;
}
.transformation_del_tab{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
}
.transformation_del_tab > div{
    width: 401px;
    background: #FFFFFF;
    border-radius: 5px;
    padding: 19px 17px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding-bottom: 27px;
}
.transformation_del_tab_close{
    border: none;
    width: 13px;
    height: 13px;
    background: url(../images/loginBox_close.png) no-repeat;
    background-size: 100% 100%;
    align-self: self-end;
    cursor: pointer;
}
.transformation_del_tab_close:hover{
    background: url(../images/loginBox_close_hover.png) no-repeat;
    background-size: 100% 100%;
}
.transformation_del_tab > div > span{
    font-size: 16px;
    color: #333333;
    line-height: 18px;
    font-weight: bold;
}
.transformation_del_tab_button{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}
.transformation_del_tab_yes{
    font-size: 16px;
    color: #FFFFFF;
    line-height: 30px;
    padding: 0 20px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    background: linear-gradient(to right, #E74237, #FE6B53, #FC476D) ;
}
.transformation_del_tab_yes:hover{
    background: linear-gradient(to right, #E74237, #FE6B53, #FC476D) ;
}
.transformation_del_tab_no{
    font-size: 16px;
    color: #666666;
    line-height: 30px;
    padding: 0 20px;
    border-radius: 5px;
    cursor: pointer;
    background-color: #ffffff;
    border: 1px solid #ECECEC;
}
.transformation_del_tab_no:hover{
    color: #E74237;
    border: 1px solid #E74237;
}
.transformation_btn_sp{
    display: block;
    width: 74px;
}

/* preview */
.preview{
    width: 1380px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
.previewL{
    width: calc(100% - 345px);
    padding: 37px 0;
    box-sizing: border-box;
    max-height: 700px;
    overflow-y: auto;

}
.previewL::-webkit-scrollbar {
    width: 4px;
}

.previewL::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.previewL::-webkit-scrollbar-thumb {
    background: #C3C7D2;
    border-radius: 2px;
}

.previewL::-webkit-scrollbar-thumb:hover {
    background: #888888;
}
.previewR{
    width: 328px;
    background: #F9F9F9;
    padding: 0 22px;
    flex: 0 0 auto;
    box-sizing: border-box;
    min-height: calc(100vh - 378px);
}
.previewLs{
    width: 234px;
    height: 280px;
    border: 1px dashed #333333;
    padding: 16px;
    position: relative;
    box-sizing: border-box;
}
.previewLs.active .previewLs_del{
    display: flex;
}
.previewLs .previewLs_del{
    display: none;
}
.previewLs_img{
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    border-radius: 5px;
    border: 1px solid #E9E9E9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-sizing: border-box;
    padding-top: 15px;
}
.previewLs_img img{
    width: 130px;
    height: 172px;
    box-shadow: 0px 0px 15px 0px rgba(199,199,199,0.35);
}
.previewLs:hover{
    background: linear-gradient(to bottom, #FDE4E2, #FDF6F5) ;
    cursor: pointer;
}
.previewLs:hover .previewLs_img{
    border: 1px solid #E74237;

}
.previewLs.active:hover{
    background: none ;
    cursor: pointer;
}
.previewLs.active:hover .previewLs_img{
    border: 1px solid #E9E9E9;
}
.previewLs_del{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(253, 228, 226, 0.6), rgba(253, 246, 245, 0.6));
    justify-content: center;
    align-items: center;
}
.previewLs_del img{
    width: 37px;
    height: auto;
}
.previewL.model4{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    column-gap: 30px;
    row-gap: 37px;
}
.previewL.model3{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    min-height: 678px;
}
.previewbody .foots{
    margin-top: 0;
}
.previewR{
    display: flex;
    flex-direction: column;
}
.previewR h2{
    font-size: 24px;
    color: #333333;
    line-height: 80px;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid #EAEAEA;
}
.previewR_p{
    width: 100%;margin-top: 20px;
    background: #FFFFFF;
    box-shadow: 0px 0px 7px 0px rgba(213,213,213,0.35);
    border-radius: 5px ;
    padding: 15px;
    box-sizing: border-box;
    font-size: 14px;
    color: #666666;
    line-height: 22px;
}
.previewR_page{
    display: block;
    font-size: 16px;
    color: #333333;
    line-height: 22px;
    margin-top: 20px;
}
.previewR_delpage{
    width: 100%;
    margin-top: 20px;
}
.previewR_delpage span{
    font-size: 16px;
    color: #333333;
    line-height: 22px;
}
.previewR_delpage input{
    width: 100%;
    box-sizing: border-box;
    height: 50px;
    margin-top: 10px;
    background: #FFFFFF;
    box-shadow: 0px 0px 7px 0px rgba(213,213,213,0.35);
    border-radius: 5px 5px 5px 5px;
    border: 1px solid #EAEAEA;
    padding: 0 10px;
}
.previewR_btn{
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: end;
    padding-bottom: 90px;
}
.previewR_btn > button{
    width: 100%;
    height: 55px;
    background: linear-gradient(to right, #E74237, #FE6B53, #FC476D) ;
    box-shadow: 0px 0px 15px 0px rgba(254,189,190,0.35);
    border-radius: 5px 5px 5px 5px;
    border: 0px solid #F98F8F;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    cursor: pointer;
}
.previewR_btn > button:hover{
    background: linear-gradient(to right, #FC476D, #FE6B53, #E74237) ;
}
.previewR_btn > button span{
    font-size: 20px;
    color: #FFFFFF;
    line-height: 22px;
    font-weight: bold;
}
.previewR_btn > button img{
    width: 22px;
    height: auto;
}
/* personal */
.personal{
    width: 1380px;
    margin: 0 auto;
    margin-top: 30px;
}
.personal_main{
    width: 100%;
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    gap: 40px;
}
.personal_L{
    width: 250px;
    padding: 18px 15px;
    background: #FFFFFF;
    border-radius: 5px;
    border: 1px solid #F3F3F3;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-sizing: border-box;
    align-self: start;
}
.personal_Ls{
    width: 100%;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 11px;
    box-sizing: border-box;
    gap: 11px;
    border-radius: 5px;
}
.personal_Ls > b:first-of-type{
    width: 35px;
    height: 35px;
    flex: 0 0 auto;
}
.personal_Ls1 >b:first-of-type{
    background: url(../images/personal_Ls1.webp) no-repeat;
    background-size: contain;
}
.personal_Ls2 > b:first-of-type{
    background: url(../images/personal_Ls2.webp) no-repeat;
    background-size: contain;
}
.personal_Ls3 > b:first-of-type{
    background: url(../images/personal_Ls3.webp) no-repeat;
    background-size: contain;
}
.personal_Ls4 > b:first-of-type{
    background: url(../images/personal_Ls4.webp) no-repeat;
    background-size: contain;
}
.personal_Ls.active{
    background: linear-gradient(to right, #FBD2D0, #FDEEED) ;
}
.personal_Ls.active span{
    color: #E74237;
    font-weight: bold;
}
.personal_Ls1.active > b:first-of-type{
    background: url(../images/personal_Ls1s.png) no-repeat;
    background-size: contain;
}
.personal_Ls2.active > b:first-of-type{
    background: url(../images/personal_Ls2s.png) no-repeat;
    background-size: contain;
}
.personal_Ls3.active > b:first-of-type{
    background: url(../images/personal_Ls3s.png) no-repeat;
    background-size: contain;
}
.personal_Ls4.active > b:first-of-type{
    background: url(../images/personal_Ls4s.png) no-repeat;
    background-size: contain;
}
.personal_Ls:hover{
    background: #FFF2EE;
}
.personal_Ls.active:hover{
        background: linear-gradient(to right, #FBD2D0, #FDEEED) ;
}
.personal_Ls > b:last-of-type{
    width: 9px;
    height: 14px;
    flex: 0 0 auto;
    background: url(../images/personal_Ls_to.webp) no-repeat;
    background-size: contain;
}
.personal_Ls.active > b:last-of-type{
    background: url(../images/icon28.png) no-repeat;
    background-size: contain;
}
.personal_Ls > span{
    font-size: 18px;
    color: #333333;
    line-height: 20px;
    flex: 1;
}
.personal_R{
    width: 1090px;
    background: #FFFFFF;
    border-radius: 5px;
    border: 1px solid #F3F3F3;
    padding: 0 25px;
    box-sizing: border-box;
    padding-bottom: 37px;
    min-height: calc(100vh - 463px);
}
.personal_R_initial{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.personal_R_initial.hide{
    display: none;
}
.personal_R_initial h2,
.personal_R_modify h2{
    width: 100%;
    font-size: 22px;
    color: #333333;
    line-height: 72px;
    font-weight: 700;
    border-bottom: 1px solid #F3F3F3;
}
.personal_R_initial > img,
.personal_R_modify > img{
    width: 97px;
    height: 97px;
    border-radius: 50%;
    margin-top: 44px;
}
.personal_R_initial > span{
    font-size: 18px;
    color: #333333;
    line-height: 20px;
    display: block;
    margin-top: 30px;
}
.personal_R_info{
    width: auto;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.personal_R_info > div{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 25px;
}
.personal_R_info > div > b{
    display: block;
    font-size: 16px;
    color: #333333;
    line-height: 18px;
    font-weight: bold;
    flex: 0 0 auto;
}
.personal_R_info > div > span{
    flex: 1;
    font-size: 16px;
    color: #999999;
    line-height: 18px;
    margin-right: 40px;
}
.personal_R_infos1 > a{
    font-size: 16px;
    color: #E74237;
    line-height: 35px;
    background: #FCEFEE;
    padding: 0 24px;
    border: 1px solid #E74237;
    border-radius: 5px;
}
.personal_R_infos1 > a:hover{
    background: #E74237;
    color: #ffffff;
}
.personal_R_infos4 > a{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 35px;
    padding: 0 20px;
    border-radius: 5px;
    background: linear-gradient(to right, #E74237, #FE6B53, #FC476D) ;
}
.personal_R_infos4.active > a{
    background: linear-gradient(to right, #65B7F6, #6D98FA, #767BFB) ;
}
.personal_R_infos4 > a:hover{
    background: linear-gradient(to right, #FC476D, #FE6B53, #E74237) ;
}
.personal_R_infos4.active > a:hover{
    background: linear-gradient(to right, #767BFB, #6D98FA, #65B7F6) ;
}
.personal_R_infos4 > a img{
    width: 16px;
    height: auto;
}
.personal_R_infos4 > a span{
    font-size: 16px;
    color: #FFFFFF;
    font-weight: bold;
}
.personal_R_modify{
    width: 100%;
    display: none;
    flex-direction: column;
    align-items: center;
}
.personal_R_modify.active{
    display: flex;
}
.personal_R_headimg{
    border: 1px solid #E74237;
    background: #FCEFEE;
    border-radius: 5px;
    font-size: 16px;
    color: #E74237;
    line-height: 35px;
    padding: 0 22px;
    cursor: pointer;
    margin-top: 22px;
}
.personal_R_headimg:hover{
    background: #E74237;
    color: #ffffff;
}
.personal_R_modify_info{
    width: auto;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.personal_R_modify_infos{
    display: flex;
    align-items: center;
    gap: 18px;
}
.personal_R_modify_infos > b{
    width: 100px;
    font-size: 16px;
    color: #333333;
    text-align: right;
    line-height: 18px;
}
.personal_R_modify_infos > input{
    width: 320px;
    height: 38px;
    background: #FFFFFF;
    border-radius: 5px;
    border: 1px solid #F3F3F3;
    padding: 0 14px;
    box-sizing: border-box;
    font-size: 16px;
    color: #000000;
}
.personal_R_modify_infos > input::placeholder{
    color: #999999;
}
.personal_R_modify_infos > input:focus{
    border: 1px solid #E74237;
}
.personal_R_modify_infos > span{
    font-size: 14px;
    color: #E74237;
    display: none;
}
.personal_R_modify_infos.error > span{
    display: block;
}
.personal_R_modify_infos_code{
    width: 320px;
    height: 38px;
    background: #FFFFFF;
    border-radius: 5px;
    border: 1px solid #F3F3F3;
    padding: 0 14px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.personal_R_modify_infos_code > input{
    font-size: 16px;
    color: #000000;
    border: none;
}
.personal_R_modify_infos_code > input::placeholder{
    color: #999999;
}
.personal_R_modify_infos_code:has(input:focus) {
    border: 1px solid #E74237;
}
.personal_R_modify_infos_code > button{
    border: none;background: none;
    font-size: 16px;
    color: #E74237;
    cursor: pointer;
}
.personal_R_modify_infos_code > button.active{
    color: #999999;
    cursor: default;
}
.personal_R_modify_btn{
    width: auto;
    margin-top: 30px;
    display: flex;
    align-items: center;
    gap: 25px;
}
.personal_R_modify_btn_yes{
    font-size: 18px;
    color: #FFFFFF;
    line-height: 35px;
    font-weight: bold;
    padding: 0 24px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    background: linear-gradient(to right, #E74237, #FE6B53, #FC476D) ;
}
.personal_R_modify_btn_yes:hover{
    background: linear-gradient(to right, #FC476D, #FE6B53, #E74237) ;
}
.personal_R_modify_btn_reset{
    font-size: 18px;
    color: #666666;
    line-height: 35px;
    font-weight: bold;
    padding: 0 24px;
    border-radius: 5px;
    border: 1px solid #F7F7F7;
    cursor: pointer;
    background: #F7F7F7;
}
.personal_R_modify_btn_reset:hover{
    border: 1px solid #E74237;
    background: #FCEFEE;
    color: #E74237;
}
.safety_R{
    width: 1090px;
    background: #FFFFFF;
    border-radius: 5px;
    border: 1px solid #F3F3F3;
    padding: 0 25px;
    box-sizing: border-box;
    padding-bottom: 37px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: calc(100vh - 463px);
}
.safety_R h2{
    width: 100%;
    font-size: 22px;
    color: #333333;
    line-height: 72px;
    font-weight: 700;
    border-bottom: 1px solid #F3F3F3;
}
.safety_R_info{
    width: auto;
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.safety_R_infos{
    display: flex;
    align-items: center;
    gap: 18px;
}
.safety_R_infos > b{
    font-size: 16px;
    color: #333333;
    font-weight: bold;
    text-align: right;
    flex: 0 0 auto;
    width: 100px;
}
.safety_R_infos_input{
    width: 320px;
    height: 38px;
    background: #FFFFFF;
    border-radius: 5px;
    border: 1px solid #F3F3F3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    box-sizing: border-box;
}
.safety_R_infos_input > input{
    font-size: 16px;
    color: #000000;
    border: none;
}
.safety_R_infos_input > input::placeholder{
    color: #999999;
}
.safety_R_infos_input:has(input:focus){
    border: 1px solid #E74237;
}
.safety_R_infos_input > button{
    border: none;background: none;
    width: 17px;
    height: auto;
    color: #E74237;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.safety_R_infos_input > button img{
    width: 17px;
    height: auto;
}
.safety_R_infos_error{
    font-size: 14px;
    color: #E74237;
    display: none;
}
.safety_R_infos.error > .safety_R_infos_error{
    display: block;
}
.personal_order{
    width: 1090px;
    background: #FFFFFF;
    border-radius: 5px;
    border: 1px solid #F3F3F3;
    padding: 0 25px 37px;
    box-sizing: border-box;
    min-height: 500px;
}
.personal_order h2{
    width: 100%;
    font-size: 22px;
    color: #333333;
    line-height: 72px;
    font-weight: 700;
    border-bottom: 1px solid #F3F3F3;
}
.personal_order_list{
    width: 100%;
    margin-top: 30px;
}
.personal_order_table{
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.personal_order_table th{
    height: 48px;
    background: #F7F7F7;
    font-size: 16px;
    color: #333333;
    font-weight: 700;
    text-align: center;
    padding: 0 18px;
    box-sizing: border-box;
}
.personal_order_table th:first-of-type{
    text-align: left;
}
.personal_order_table td{
    height: 55px;
    font-size: 16px;
    color: #555555;
    text-align: center;
    padding: 0 18px;
    box-sizing: border-box;
}
.personal_order_table td:first-of-type{
    text-align: left;
}
.personal_order_table tr{
    border-bottom: 1px solid #F3F3F3;
}
.personal_order_table tbody tr:hover{
    background: linear-gradient(to bottom, #FEF1F0, #FEF9F9) ;
}
.personal_order_table th:nth-child(1),
.personal_order_table td:nth-child(1){
    width: 27%;
}
.personal_order_table th:nth-child(2),
.personal_order_table td:nth-child(2){
    width: 20%;
}
.personal_order_table th:nth-child(3),
.personal_order_table td:nth-child(3){
    width: 15%;
}
.personal_order_table th:nth-child(4),
.personal_order_table td:nth-child(4){
    width: 15%;
}
.personal_order_table th:nth-child(5),
.personal_order_table td:nth-child(5){
    width: 23%;
}
.personal_order_pay{
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    padding-left: 20px;
}
.personal_order_pay img{
    width: 28px;
    height: 28px;
    border-radius: 5px;
    flex: 0 0 auto;
}
.personal_order_pay span{
    flex: 1;
    text-align: left;
}
.personal_order_none{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}
.personal_order_none img{
    width: 218px;
    margin-bottom: 20px;
}
.personal_order_none span{
    font-size: 16px;
    color: #999999;
    line-height: 22px;
}
.delete_account_tab.active{
    display: flex;
}
.delete_account_tab{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
}
.delete_account_tab > div{
    width: 401px;
    background: #FFFFFF;
    border-radius: 5px;
    padding: 19px 17px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding-bottom: 27px;
}
.delete_account_tab_close{
    border: none;
    width: 13px;
    height: 13px;
    background: url(../images/loginBox_close.png) no-repeat;
    background-size: 100% 100%;
    align-self: self-end;
    cursor: pointer;
}
.delete_account_tab_close:hover{
    background: url(../images/loginBox_close_hover.png) no-repeat;
    background-size: 100% 100%;
}
.delete_account_tab > div > span{
    font-size: 16px;
    color: #333333;
    line-height: 22px;
}
.delete_account_tab_button{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}
.delete_account_yes{
    font-size: 16px;
    color: #FFFFFF;
    line-height: 30px;
    padding: 0 20px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    background: linear-gradient(to right, #E74237, #FE6B53, #FC476D) ;
}
.delete_account_yes:hover{
    background: linear-gradient(to right, #FC476D, #FE6B53, #E74237) ;
}
.delete_account_tab_no{
    font-size: 16px;
    color: #666666;
    line-height: 30px;
    padding: 0 20px;
    border-radius: 5px;
    cursor: pointer;
    background-color: #ffffff;
    border: 1px solid #ECECEC;
}
.delete_account_tab_no:hover{
    color: #E74237;
    border: 1px solid #E74237;
}
.btn_append {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #E74237;
    background: #fff;
    color: #E74237;
    font-size: 20px;
    line-height: 30px;
    font-weight: bold;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 4px;
    box-sizing: border-box;
    padding-left: 1px;
}
.btn_append:hover {
    background: #FFF0EF;
}
.delete_account_button{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}


/* top-up-btn */
.top-up-Popup {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
  }
  .top-up-Popup.active {
    display: flex;
  }
  .top-up-Popup-main {
    width: 100%;
    max-width: 800px;
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
    box-sizing: border-box;
  }
  .top-up-Popup1 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 27px;
    padding-bottom: 11px;
    background: url(../images/top-up-Popup1.png) no-repeat;
    background-size: 100% 100%;
  }
  .top-up-Popup1-user {
    display: flex;
    align-items: center;
  }
  .top-up-Popup1-user img {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    margin-right: 16px;
    background: #fff;
  }
  .top-up-Popup1-user span {
    display: block;
    color: #222;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 11px;
  }
  .top-up-Popup1-user p {
    color: #999;
    font-size: 14px;
    line-height: 16px;
  }
  .top-up-Popup-close {
    position: relative;
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  
  .top-up-Popup-close b::before,
  .top-up-Popup-close b::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 2px;
    background: #999;
    border-radius: 10px;
  }
  .top-up-Popup-close b::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .top-up-Popup-close b::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  .top-up-Popup-close:hover b::before,
  .top-up-Popup-close:hover b::after{
    background-color: #E74237;
  }
  /* 套餐 */
  .top-up-Popup2 {
    display: flex;
    gap: 22px;
    padding: 26px 28px 20px;
    margin-top: 20px;
    width: 100%;
    box-sizing: border-box;
  }
  .top-up-Popup2s {
    position: relative;
    flex: 1;
    border-radius: 10px;
    border: 3px solid #FCEFEE;
    background: #FDF9F9;
    box-shadow: 0px 0px 15px 0px rgba(207,207,207,0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    box-sizing: border-box;
    gap: 10px;
    padding: 25px 0;
  }
  .top-up-Popup2s:hover{
    border: 3px solid #E74237;
  }
  .top-up-Popup2s.active {
    border-color: #E74237;
    background: linear-gradient(to bottom, #FEE1DF, #FDF4F3) ;
    box-shadow: 0px 0px 15px 0px rgba(231,66,55,0.35);
  }
  .top-up-Popup2s-tips {
    position: absolute;
    left: -3px;
    top: -17px;
    background: url(../images/top-up-Popup2s-tips.png) no-repeat;
    background-size: 100% 100%;
    height: 34px;
    padding: 0 14px;
    padding-right: 20px;
    display: flex;
    align-items: center;
  }
  .top-up-Popup2s-tips span {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
  }
  .top-up-Popup2s > b {
    color: #222;
    font-size: 16px;
    line-height: 18px;
  }
  .top-up-Popup2s-price {
    margin-top: 10px;
  }
  .top-up-Popup2s-price span {
    color: #ff3d3d;
    font-size: 20px;
    font-weight: 700;
  }
  
  .top-up-Popup2s-price b {
    font-size: 36px;
    line-height: 30px;
  }
  .top-up-Popup2s strong {
    height: 30px;
    padding: 0 18px;
    background: #FDE1DD;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #E74237;
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
  }
  
  .top-up-Popup2s p {
    color: #999;
    font-size: 16px;
    line-height: 18px;
    text-decoration: line-through;
    margin-top: 5px;
  }
  .top-up-Popup3 {
    height: 50px;
    margin: 0 27px;
    margin-top: 10px;
    background: #FDF9F9;
    border: 1px solid #FCEFEE;
    border-radius: 5px;
    display: flex;
    align-items: center;
    padding: 0 18px;
    box-sizing: border-box;
  }
  .top-up-Popup3 img {
    width: 22px;
    margin-right: 10px;
  }
  .top-up-Popup3 span {
    color: #333333;
    font-size: 16px;
  }
  .top-up-Popup3 b {
    color: #ff3d3d;
    margin: 0 3px;
  }
  .top-up-Popup4 {
    display: flex;
    gap: 45px;
    padding: 27px 26px;
    box-sizing: border-box;
  }
  .top-up-Popup4L {
    flex: 1;
  }
  .top-up-Popup4L-notice span {
    display: block;
    color: #333;
    font-size: 16px;
    line-height: 18px;
    font-weight: 700;
    margin-bottom: 8px;
  }
  .top-up-Popup4L-notice p {
    color: #333;
    font-size: 16px;
    line-height: 25px;
  }
  .top-up-Popup-pay {
    height: 67px;
    border: 1px solid #F3F3F3;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 17px;
    box-sizing: border-box;
    margin-top: 24px;
    cursor: pointer;
  }
  
  .top-up-Popup-pay.active {
    background: #FDF9F9;
    border: 1px solid #FCEFEE;
  }
  
  .top-up-Popup-payL {
    display: flex;
    align-items: center;
  }
  
  .top-up-Popup-payL img {
    width: 37px;
    height: 37px;
    margin-right: 14px;
  }
  
  .top-up-Popup-payL span {
    display: block;
    color: #222;
    font-size: 16px;
    font-weight: 700;
    line-height: 18px;
    margin-bottom: 4px;
  }
  
  .top-up-Popup-payL p {
    color: #999;
    font-size: 14px;
    line-height: 16px;
  }
  
  .top-up-Popup-pay b {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #d9d9d9;
    position: relative;
  }
  
  .top-up-Popup-pay.active b {
    border-color: #ff4a4a;
  }
  
  .top-up-Popup-pay.active b::after {
    content: "";
    position: absolute;
    inset: 4px;
    background: #ff4a4a;
    border-radius: 50%;
  }
  .top-up-Popup-agreement {
    display: flex;
    align-items: center;
    margin-top: 14px;
    cursor: pointer;
  }
  .top-up-Popup-agreement input {
    margin-right: 8px;
  }
  .top-up-Popup-agreement span {
    color: #999;
    font-size: 14px;
  }
  .top-up-Popup-agreement span a{
    color: #999;
  }
.top-up-Popup4R {
    width: 290px;
    border-radius: 5px;
    padding: 20px;
    height: 300px;
    padding-bottom: 12px;
    box-sizing: border-box;
    text-align: center;
    transition: all 0.3s;
    background: #FDF9F9;
    border: 1px solid #FCEFEE;
  }
  .top-up-Popup4R.active {
    background: #FDF9F9;
    border: 1px solid #FCEFEE;
  }
  
  .top-up-Popup4R h3 {
    color: #333;
    font-size: 16px;
    font-weight: 700;
    line-height: 18px;
  }
  .top-up-Popup4R-text {
    color: #999;
    font-size: 12px;
    margin-top: 12px;
    line-height: 14px;
  }
  .weChat_topup_form {
    width: 160px;
    height: 160px;
    margin: 0 auto;
    position: relative;
    margin-top: 14px;
  }
  .weChat_topup_form_wait,
  .weChat_topup_form_qrcode {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    background: #FFFFFF;
    border: 1px solid #F3F3F3;
    padding: 10px;
    border-radius: 5px;
  }
  .weChat_topup_form_wait{
    border: 1px dashed #999999;
  }
  
  .weChat_topup_form_wait img,
  .weChat_topup_form_qrcode img {
    width: 100%;
    height: 100%;
    display: block;
  }
  .weChat_topup_form_wait.active {
    opacity: 1;
    visibility: visible;
    cursor: pointer;
  }
  .weChat_topup_form_qrcode.active {
    opacity: 1;
    visibility: visible;
  }
  .top-up-Popup4R-info {
    display: none;
    margin-top: 8px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
  }
  .top-up-Popup4R.active .top-up-Popup4R-info {
    opacity: 1;
    display: block;
    visibility: visible;
  }
  .top-up-Popup4R-info-price {
    display: block;
    color: #333;
    font-size: 14px;
    line-height: 16px;
    margin-top: 10px;
  }
  .top-up-Popup4R-info-price b {
    color: #ff3d3d;
    font-size: 16px;
    line-height: 18px;
  }
  
  .top-up-Popup4R-info-time {
    color: #333333;
    font-size: 12px;
    line-height: 14px;
  }
  .top-up-Popup4R-info-time b{
    color: #E74237;
    font-weight: 400;
  }
  .top-up-Popup4R.wait .default {
    display: block;
    color: #333333;
    font-size: 14px;
    margin-top: 20px;
  }
  .top-up-Popup4R.active .default {
    display: none;
  }
  .top-up-Popup2s.active strong{
    background: #FBD4CF;
  }