.menu ul,#header .login_box ul{z-index: 2;}
/* banner */
.banner{background: linear-gradient(45deg,#7dacf4,#79c6ee);padding-top: 70px;padding-bottom: 50px;}
.banner_box>div:first-child{text-align: center;}
.banner_box h1{font-size: 48px;color: #fff;text-align: center;font-weight: normal;display: inline-block;}
.banner_box h1+img{display: inline-block;background: rgba(255, 255, 255, .9);margin-left: 20px;padding: 9px 15px 7px;border-radius: 30px;vertical-align: -2px;}
.banner_box .info{font-size: 16px;color: #fff;line-height: 30px;text-align: center;margin-top: 20px;}
.banner_box .rating{font-size: 18px;color: #fff;text-align: center;margin-top: 15px;}
.banner_box .rating img{margin-left: 14px;vertical-align: -2px;}
.banner_box>#drag-zone{max-width: 736px;width: 100%;background: rgba(255, 255, 255, .8);box-shadow: 0 3px 27px rgba(63, 101, 144, .18);margin-top: 20px;border-radius: 20px;overflow: hidden;padding-bottom: 40px;}
.banner_box>div .btn{max-width: 510px;width: 100%;margin: 50px auto 20px;text-align: center;}
.banner_box>div .btn span{font-size: 20px;color: #fff;min-width: 240px;padding-left: 10px;padding-right: 10px;box-sizing: border-box;height: 50px;line-height: 50px;background: #ff9602;display: inline-block;text-align: center;border-radius: 66px;cursor: pointer; position: relative;margin: auto;cursor: pointer;}
.banner_box>div .btn span:hover{background: #f7aa3d;}
.banner_box>div .btn span img{-webkit-animation: rotate 1.5s infinite linear;-moz-animation: rotate 1.5s infinite linear;-o-animation: rotate 1.5s infinite linear;animation: rotate 1.5s infinite linear;position: absolute;top: 38%;margin-left: 4px;opacity: 0;}
.banner_box>div .btn span.load img{opacity: 1;}
.banner_box>div .btn span>input{opacity: 0;width: 100%;height: 100%;display: inline-block;position: absolute;top:0 ;left: 0; cursor: pointer;}
.banner_box>div>p{font-size: 16px;color: #334459;text-align: center;line-height: 22px;}
.banner_box>div>p:last-child{max-width: 632px;width: 100%;margin: 10px auto 0px;}
.banner_box>div>p:last-child span{color: #FF6802;text-decoration: underline;cursor: pointer;}
.banner_box>div .btn .log_in{border: 1px solid #FF6802;background: none;color: #FF6802;box-sizing: border-box;line-height: 48px;}
.banner_box>div .btn .log_in:hover{background: rgba(255, 104, 2, 0.09);text-decoration: none;}
.water-remover-online p{text-align: center;margin: 20px auto;color: #fff;}
.water-remover-online p a{color: #fff;}
.water-remover-online p.rec_btn a{color: #00ff45;}
.banner p.rec_btn.mac_btn{display: none;}
/* step */
.step{align-items: center;margin-top: 50px;}
.step div{text-align: center;margin-top: 20px;}
.step div img{display: block;margin:0px auto 15px;}
.step div span{display: block;font-size: 24px;color: #334459;}
.main{margin-top: 105px;}
.main{-webkit-align-items: center;align-items: center;}
.main div{max-width: 550px;width: 100%;}
.main div h2{font-size: 36px;color: #333;line-height: 42px;font-weight: normal;}
.main div p{font-size: 16px;color: #333;line-height: 30px;margin-top: 15px;}
/* modes */
.modes{margin-top: 110px;padding-bottom: 88px;}
.modes h2{font-size: 42px;line-height: 46px;font-weight: normal;text-align: center;}
.modes_box{overflow: visible;}
.modes_box *{margin: 0px;padding:0px;}
.modes_box>p:nth-of-type(1){margin-top: 30px;}
.modes_box>p{font-size: 16px;color: #333;line-height: 30px;margin-top: 10px;}
.modes_box ul{margin-top: 40px;-webkit-align-items: center;align-items: center;}
.modes_box ul>li{max-width: 359px;width: 100%;padding-bottom: 25px;box-shadow: 0 0 10px rgba(0, 0, 0, .1);border-top: 13px solid #f9b154;border-radius: 15px;padding: 30px 20px 25px;box-sizing: border-box;}
.modes_box ul>li.active{max-width: 480px;background: linear-gradient(#50d4e4,#00c0dc);border-top: none;padding-left: 70px;padding-right: 70px;}
.modes_box ul>li:nth-child(3){border-color: #8584fd;}
.modes_box ul>li>span{font-size: 30px;font-weight: 550;text-align: center;display: block;margin-bottom: 15px;}
.modes_box ul>li>span img{vertical-align: -4px;margin-right: 10px;}
.modes_box li ol li{font-size: 16px;color: #333;padding-left: 20px;position: relative;margin-bottom: 10px;}
.modes_box li ol li span{color: #ff8a00;font-weight: 550;}
.modes_box li ol li::after{clear: both;content: "";width: 5px;height: 5px;background: #333;border-radius: 50%;position: absolute;left: 0px;top: 8px;}
.modes_box li ol{margin-bottom: 35px;}
.modes_box a{width: 240px;height: 55px;color: #fff;font-weight: 550;display: block;text-align: center;line-height: 55px;background: #2fabf4;font-size: 18px;border-radius: 5px;margin: auto;}
.modes_box ul>li.active>span{color: #fff;}
.modes_box li.active ol li{color: #fff;}
.modes_box li.active ol li span{color: #fff000;font-weight: 550;}
.modes_box li.active ol li::after{background: #fff;}
.modes_box li.active a{background: #fff;color: #5c95e7;}
.modes_box li.active{padding-bottom: 50px;}
.modes_box li.active img{display: block;margin: 0px auto 10px;}
/* other */
.other{padding-top:70px;padding-bottom:80px;background:#cfebff;margin-top: 80px;}
.other_box h2{text-align:center;font-size: 42px;color: #222;line-height: 48px;font-weight: normal;}
.other_box ul{margin-top:40px}
.other_box ul li{max-width:392px;width:100%;border-radius:20px;background:#fff;margin-bottom:15px}
.other_box ul li img{display:block;margin:60px auto 0}
.other_box ul li span{font-size:18px;color:#485062;display:block;margin:10px auto 14px;text-align:center;font-weight:550}
.other_box ul li p{font-size:16px;color:#333;max-width:300px;width:90%;margin:auto;margin-bottom:60px;text-align:center}
.showoff{background: #5c95e7 !important;}
/*faq section*/
#faq_section{width: 100%;box-sizing:border-box;margin:30px auto 0;padding:60px 0 20px;}
#faq_section h2{display: block;width: 90%;margin:0 auto 30px;font-size:36px;line-height: 48px;text-align: center;color:#222;font-weight: 600;}
#faq_section.others{margin:76px auto;max-width:1200px;}
#faq_section.others h2{margin:0 auto 40px;}
#faq_section .faq_items{border-top:1px solid #e2e7ea;}
#faq_section .faq_inner{border-bottom:1px solid #e2e7ea;}
#faq_section .faq_questions{position:relative;box-sizing: border-box;padding:17px 30px 22px 22px;cursor: pointer;}
#faq_section .faq_questions p{display: block;box-sizing:border-box;margin:0;font-size:18px;color:#222;}
#faq_section .faq_questions::before{display: block;position: absolute;content: "";top:24px;left: 5px;width: 0;height: 24.5%;border-left:3px solid #3d81d4;}
#faq_section .faq_questions::after{display: block;position: absolute;content: "";top:20px;right: 13px;width: 26px;height: 14px;background: url(/images/article/slide-down.png) 0 0 no-repeat;}
#faq_section .faq_items:hover .faq_questions{color:#3d81d4;}
#faq_section .faq_questions.active::after{background: url(/images/article/slide-up.png) 0 0 no-repeat;}
#faq_section .faq_answers{box-sizing:border-box;display:none;margin:-8px 0 0;box-sizing: border-box;padding:0 22px 0px;margin-bottom: 16px;}
#faq_section .faq_answers p{box-sizing:border-box;font-size:16px;color:#222;}
/* desktop_zoon */
#desktop_zoon{width: 100%;margin:0 auto;padding:60px 0 65px;background:url(/images/watermark-remover-online/desktop-zoon-bg.jpg) no-repeat center 0;}
#desktop_zoon h2{display: block;margin:0 auto;width: 96%;max-width:960px;font-size: 40px; line-height: 48px;color:#2777ea;font-weight: 550;text-align: center;}
#desktop_zoon .info{display: block;margin:10px auto 32px;font-size: 18px; line-height: 30px;color:#333;font-weight: 550;text-align: center;}
#desktop_zoon .info span{font-size: 24px;color:#ff9600;}
#desktop_zoon a{display: block;margin:0 auto;width: 96%;max-width:360px;height: 50px;line-height: 50px;text-align: left;border-radius: 50px;color:#fff;background-color: #2777ea;}
#desktop_zoon a img{display: inline-block;vertical-align: -4px;margin:0 26px 0 50px;}
#desktop_zoon .free_online_image_compressor {display: block;margin: 0 auto;width: 96%;max-width: 360px;height: 50px;line-height: 50px;text-align: center;border-radius: 50px;color: #fff;background-color: #5c95e7;cursor: pointer;font-size: 18px;}
#more_tips{margin-top: 50px;margin-bottom: 80px;}
#reading_more h2{display: block;width: 96%;max-width:960px;font-size: 42px;line-height: 48px;text-align: center;color:#222;font-weight: 550;border-radius: 6px;}
#more-recommendations{background: #9e5be9;background:-webkit-linear-gradient(90deg,#9e5be9 0%,#32b2e6 100%);background:-moz-linear-gradient(90deg,#9e5be9 0%,#32b2e6 100%);background:-o-linear-gradient(90deg,#9e5be9 0%,#32b2e6 100%);background:linear-gradient(90deg,#9e5be9 0%,#32b2e6 100%);}
#more-recommendations h2{font-size:42px;text-align: center;font-weight: normal;}

.fixbar span.free_online_image_compressor {display: inline-block;border: 2px #fe9601 solid;background-color: #fe9601;color: #fff;border-radius: 50px;font-size: 14px;margin-left: 14px;width: 117px;height: 28px;line-height: 28px;text-align: center;overflow: hidden;cursor: pointer;
}
@media screen and (max-width: 1180px){
    .step>img{display: none;}
    .main{margin-top: 80px;}
    .main div{order: 1;margin-bottom: 30px;max-width: 600px;text-align: center;}
    .main>img{order: 2;}
    .other_box{max-width: 850px;}
    .other_box ul{justify-content: space-around;}
    .modes_box ul{justify-content: space-around;}
    .modes_box ul li{margin-bottom: 30px;}
    .modes_box ul li:last-child{margin-bottom: 0px;}
}
@media screen and (max-width: 630px){
    h2{font-size: 32px !important;line-height: 38px !important;}
    .main,.modes{margin-top: 60px;}
    .modes{padding-bottom: 50px;}
    .showoff h2,.faq{padding-top: 60px;}
}



.photo * {
    margin: 0;
    padding: 0;
}

.mask,.alert-mask {
    width: 100%;
    height: 200%;
    position: fixed;
    background: rgba(0, 0, 0, .4);
    top: 0px;
    left: 0px;
    z-index: 2;
    display: none;
}

.photo {
    border-radius: 18px;
    max-width: 1073px;
    width: 100%;
    min-width: 300px;
    min-height: 400px;
    position: absolute;
    top: 15%;
    bottom: 12%;
    height: auto;
    left: 0;
    right: 0;
    margin: auto;
    /* transform: translate(-50%, -50%); */
    z-index: 3;
    background: #fff;
    display: none;
    /* box-shadow: 0 0 10px #002742b8; */
    box-shadow: 0 0 30px #00274266;
    overflow: visible !important;
}

.photo.active {
    -webkit-display: flex;
    display: flex;
    flex-wrap: nowrap
}

.photo>div {
    background: #2558bf;
    padding-top: 12px;
    width: 128px;
}
.icon_name{
    display: inline-block;
    width: 128px;
}
.photo>div>ul{
    width: 128px;
}

.photo>div>ul li i {
    width: 30px;
    height: 30px;
    background: url(/images/online-bg-remover/tab-icon.png);
    display: block;
    margin: 0px auto 6px;
}

.photo>div>ul li.active {
    background: #21a1f2;
}
.photo>div>ul li.active:hover {
    background: #30adfc;
}

.photo>div>ul li:nth-child(1) i {
    background-position-y: -0px;
}

.photo>div>ul li:nth-child(2) i {
    background-position-y: -30px;
}

.photo>div>ul li:nth-child(3) i {
    background-position-y: -60px;
}

.photo>div>ul li:nth-child(4) i {
    background-position-y: -90px;
}

.photo>div>ul li {
    font-size: 14px;
    color: #fff;
    text-align: center;
    padding: 14px 0px;
    cursor: pointer;
}
.photo>div>ul li:hover {
    background-color: #294d9d;
}

.photo>div>span {
    font-size: 16px;
    color: #fff;
    cursor: default;
}

.photo>ul {
    max-width: 1073px;
    width: 100%;
    background: #fff;
    border-radius: 18px;
    overflow: visible;
}

.photo>ul>li {
    display: none;
    /* background: #efeff0; */
    background: #fff;
    padding-top: 10px;
    padding-bottom: 7px;
    border-radius: 18px 18px 0 0;
}

.photo>ul li.active {
    display: block;
}

.photo>ul>div.btn {
    padding: 0 24px;
    position: absolute;
    bottom: -6px;
    width: 100%;
    background: #fff;
    z-index: 100;
    height: 60px;
    line-height: 50px;
    box-sizing: border-box;
    border-radius: 0px 0px 18px 18px;
}

.photo>ul>div.btn p {
    width: 24px;
    height: 24px;
    background: url(/images/online-bg-remover/back2.png);
    display: inline-block;
    margin-top: 16px;
}

.photo>ul>div.btn p.left {
    background-position-y: 0px;
    margin-right: 18px;
}

.photo>ul>div.btn p.left:hover {
    background-position-y: -24px;
}

.photo>ul>div.btn p.right {
    background-position-y: -48px;
}

.photo>ul>div.btn p.right:hover {
    background-position-y: -72px;
}

.photo>ul>div.btn>div {
    display: inline-block;
    /* vertical-align: 6px;
    margin-left: 88px; */
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    /* width: 277px; */
    /* width: 457px; */
}

.photo>ul>div.btn span,a.uploadBtn{
    min-width: 116px;
    height: 30px;
    /* background: #00a2f9; */
    background: #21a1f2 ;
    border-radius: 5px;
    color: #fff;
    font-size: 16px;
    display: inline-block;
    text-align: center;
    line-height: 30px;
    margin: 0 10px;
    cursor: pointer;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
}
a.uploadBtn span{
    font-size: 16px !important;
    color: #fff !important;
    line-height: 30px !important;
}
a.uploadBtn{margin-left: 0px;margin-right: 0px;}
.uploadBtnBox{margin-left: 25px;/* margin-left: 60px; */}
.photo>ul>div.btn span:hover,.uploadBtn:hover{
    background-color: #33c3f3;

}
.photo>ul>div.btn span.hollowing{
    border: 1px solid #21a1f2;
    color: #21a1f2;
    box-sizing: border-box;
    line-height: 28px;
    background: none;
    cursor: pointer;
}

.photo>ul>div.btn span.hollowing:hover{
    background-color: #30adfc;
    border-color: #30adfc;
    color: white;
}
.photo>ul>div.btn>div{display: none;margin-top: 2px;}
.photo>ul>div.btn>div label{height: 30px;display: inline-block;}
.photo>ul>div.btn>div:nth-child(2){width: auto;}
.photo>ul>div.btn>div.active{display:-webkit-box;display: -webkit-flex;display: flex;align-items: center;}
.photo>ul>div.btn>div:nth-child(2) div{position: sticky;margin: 0;}
.photo>ul>div.btn>div:nth-child(2) div:last-child{margin-right: 20px;}
.photo>ul>div.btn>div i.home{width: 30px;height: 30px;display: inline-block;background: url(/images/watermark-remover-online/home.png);vertical-align: -8px;margin-left: 20px;margin-right: 10px;background-position-y: -30px;}
.photo>ul>div.btn>div i.home:hover{background-position-y: -0px;}
.photo>ul>div.icon{position: absolute;top: 15px;left: 10px;font-size: 16px;color: #222;}
.photo>ul>div.icon i{display: inline-block;vertical-align: -6px;width: 24px;height: 24px;background: url(/images/watermark-remover-online/icon.png) 0 0 no-repeat;background-size: 24px 24px;}
.refinement_top {
    padding: 4px;
    padding-left: 20px;
    max-width: 700px;
    position: relative;
}

.photo .revoke {
    margin-right: 10px;
    background: url(/images/watermark-remover-online/undo.svg);
}

.photo .revoke,
.photo .norevoke {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    margin-left: 0 !important;
    border: none !important;
}
.photo .revoke,
.photo .norevoke{
    vertical-align:-5px;
}
.photo .revoke:hover {
    background: url(/images/watermark-remover-online/undo-h.svg);
}
.photo .revoke.active {
    background: url(/images/watermark-remover-online/undo-h.svg);
}
.photo .revoke.forbid {
    background: url(/images/watermark-remover-online/undo-f.svg) !important;
}

.photo .norevoke {
    background: url(/images/watermark-remover-online/redo.svg);
}
.photo .norevoke:hover {
    background: url(/images/watermark-remover-online/redo-h.svg);
}
.photo .norevoke.active {
    background: url(/images/watermark-remover-online/redo-h.svg);
}
.photo .norevoke.forbid {
    background: url(/images/watermark-remover-online/redo-f.svg) !important;
}

.photo .operate-revoke {
    margin-right: 10px;
}

.photo .operate-revoke,
.photo .operate-norevoke {
    width: 20px;
    height: 20px;
    background: url(/images/watermark-remover-online/undo.svg);
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    margin-left: 0 !important;
    border: none !important;
}
.photo .operate-revoke,
.photo .operate-norevoke{
    vertical-align:-5px;
}
.photo .operate-revoke:hover {
    background: url(/images/watermark-remover-online/undo-h.svg);
}
.photo .operate-revoke.active {
    background: url(/images/watermark-remover-online/undo-h.svg);
}
.photo .operate-revoke.forbid {
    background: url(/images/watermark-remover-online/undo-f.svg) !important;
}

.photo .operate-norevoke {
    background: url(/images/watermark-remover-online/redo.svg);
}
.photo .operate-norevoke:hover {
    background: url(/images/watermark-remover-online/redo-h.svg);
}
.photo .operate-norevoke.active {
    background: url(/images/watermark-remover-online/redo-h.svg);
}
.photo .operate-norevoke.forbid {
    background: url(/images/watermark-remover-online/redo-f.svg) !important;
}

.refinement_top .transform-revoke {
    margin-right: 10px;
}

.refinement_top .transform-revoke,
.refinement_top .transform-norevoke {
    width: 20px;
    height: 20px;
    background: url(/images/online-bg-remover/back-icon.png);
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    margin-left: 0 !important;
    border: none !important;
}
.refinement .refinement_top .transform-revoke,
.refinement .refinement_top .transform-norevoke{
    vertical-align:-5px;
}
.refinement_top .transform-revoke:hover {
    background-position-y: -20px;
}
.refinement_top .transform-revoke.active {
    background-position-y: -20px;
}
.refinement_top .transform-revoke.forbid {
    background-position-y: -60px;
}

.refinement_top .transform-norevoke {
    background-position-y: -80px;
}
.refinement_top .transform-norevoke:hover {
    background-position-y: -100px;
}
.refinement_top .transform-norevoke.active {
    background-position-y: -120px;
}
.refinement_top .transform-norevoke.forbid {
    background-position-y: -140px;
}

.refinement_top span {
    display: inline-block;
    cursor: pointer;
}
.blue-border{
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid #485062;/* #2558bf */
    margin-left: 20px;
    display: inline-block;
    vertical-align: middle;
}
.blue-border:hover{
    border: 1px solid #2558bf;
}
.refinement .refinement_top{margin-top: -5px;}
.refinement_top div span {
    font-size: 12px;
    color: #485062;
    text-align: center;
    display: inline-block;
    line-height: 24px;
    padding: 0 12px;
}
.refinement_top div span.active {
    background: #2558bf;
    /* border: 1px solid #2558bf; */
    color: #fff;
}
.refinement_top .hb_type div>i{
    width: 24px;
    height: 24px;
    display: inline-block;
    background: url(/images/watermark-remover-online/lasso1.png?v=1.0.3) 0 0 no-repeat;
    background-size: 24px 272px;
    vertical-align: -7px;
    cursor: pointer;
}
#right-operate-box>.close{width: 20px;height: 20px;background: url(/images/online-bg-remover/close.png) 0 0 no-repeat;background-size: 20px 80px;position: absolute;right: 15px;top: 15px;cursor: pointer;}
#right-operate-box>.close:hover{background-position-y: -60px;}
.photo_guide{position: absolute;right: 50px;top: 14px;cursor: pointer;background: url(/images/watermark-remover-online/guide.png) 0 0 no-repeat;background-size: 24px 48px;width: 24px;height: 24px;}
.photo_guide:hover{background-position-y: -24px;}
.photo_toggle{
    position: absolute;
    right: 50px;
    top: 17px;
    cursor: pointer;
    background: url(/images/watermark-remover-online/toggle.svg) no-repeat;
    width: 20px;
    height: 17px;
}
.photo_toggle_box{
    position: absolute;
    max-width: 410px;
    width: 96%;
    box-shadow: 0px 2px 13px -4px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    font-size: 16px;
    color: #333;
    font-weight: 600;
    line-height: 20px;
    right: 46px;
    top: 46px;
    display: none;
    z-index: 101;
}
.photo_toggle_box>*{
    padding-left: 30px;
    padding-right: 30px;
}
.photo_toggle_box>p{
    padding-top: 14px;
    padding-bottom: 14px;
    background: #E9F6FF;
    cursor: pointer;
}
.photo_toggle_box>div{
    padding-top: 10px;
    padding-bottom: 12px;
}
.photo_toggle_box>div p{
    max-width: 280px;
    width: 100%;
}
.photo_toggle_box>div span{
    width: 40px;
    height: 20px;
    box-sizing: border-box;
    border-radius: 10px;
    margin-top: 12px;
    padding: 2px;
    cursor: pointer;
    text-align: left;
    background: #B6B6B6;
    position: relative;
}
.photo_toggle_box>div span.no{
    text-align: right;
    background: #22A1F1;
}
.photo_toggle_box>div span i{
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
}
.photo_toggle_box>div span::after{clear: both;content: "";position: absolute;top: 1px; right: -22px;width: 18px;height: 18px;background: url(/images/watermark-remover-online/load.svg) no-repeat center center/cover;-webkit-animation: rotate 1.5s infinite linear;-moz-animation: rotate 1.5s infinite linear;-o-animation: rotate 1.5s infinite linear;animation: rotate 1.5s infinite linear;opacity: 0;}
.photo_toggle_box>div span.load::after{opacity: 1;}
.photo_toggle:hover{
    background: url(/images/watermark-remover-online/toggle-h.svg);
}
.photo_toggle:active{
    background: url(/images/watermark-remover-online/toggle-a.svg);
}
#right-operate-box .photo_guide_box{width:471px;text-align:left;box-shadow:0 0 10px rgba(18, 18, 18, .18);border-radius:5px;position:absolute;left: 0px;z-index:11;display: none;box-sizing: border-box;background: #fff url(/images/watermark-remover-online/bg.jpg) no-repeat right bottom;box-shadow: 0px 3px 11px 0px rgba(0, 0, 0, 0.19);border-radius: 14px;overflow: hidden;}
#right-operate-box .photo_guide_box img{height: 188px;}
#right-operate-box .photo_guide_box .mobile{display: none;}
#right-operate-box .photo_guide_box.active{display:-webkit-box;display: -webkit-flex;display: flex;z-index: 101;}
#right-operate-box .photo_guide_box dl{max-width: 276px;width: 100%;margin-top: 10px;margin-left: 17px;}
#right-operate-box .photo_guide_box dl dt{font-size: 20px;color: #333;margin-bottom: 10px;}
#right-operate-box .photo_guide_box dl dd{-webkit-align-items: center;align-items: center;font-size: 14px;line-height: 24px;color: #333;}
#right-operate-box .photo_guide_box dl dd span{font-weight: bold;display: inline-block;color: #333;padding: 0;}
#right-operate-box .photo_guide_box .btn{height: 30px;line-height: 30px;background: #21a1f2;color: #fff;margin-left: 17px;margin-top: 5px;margin-bottom: 20px;border-radius: 4px;font-size: 14px;min-width: 110px;text-align: center;}
#right-operate-box .photo_guide_box .btn:hover{background: #33c3f3;}
.switch-menu{position: relative;}
.photo>ul>div.btn .save_guide.active{display: block !important;}
.photo>ul>div.btn .save_guide{display: none !important;position: absolute;bottom: 110px;left: auto;right: 20px;width: 359px;min-height: 176px;background: #FBFBFB;box-shadow: 0px 4px 18px 0px rgba(123, 123, 123, 0.39);border-radius: 18px;background: url(/images/watermark-remover-online/bg.png);margin: 0;}
.photo>ul>div.btn .save_guide img{position: absolute;bottom: -50px;left:200px;}
.photo>ul>div.btn .save_guide p{background: none;width: 188px;height: auto;font-size: 14px;line-height: 25px;color: #222;margin-top: 10px;margin-left: 24px;}

.refinement_top .hb_type div.erase>i{vertical-align: -7px;}
.refinement_top .hb_type .hb.active,.refinement_top .hb_type .free_lasso.active,.refinement_top .hb_type .line_lasso.active,.refinement_top .hb_type .erase.active{
    font-size: 12px;
    color: #485062;
    text-align: center;
    display: inline-block;
    line-height: 26px;
    height: 26px;
    padding: 0 12px;
    background: #2558bf;
    border-radius: 30px;
    vertical-align: 1px;
}
.refinement_top .hb_type .erase.active{background: #ff661b;}
.refinement_top .hb_type .hb span,.refinement_top .hb_type .free_lasso span,.refinement_top .hb_type .line_lasso span,.refinement_top .hb_type .erase span{padding: 0px;color: #fff;display: none;}
.refinement_top .hb_type .hb.active span,.refinement_top .hb_type .free_lasso.active span,.refinement_top .hb_type .line_lasso.active span,.refinement_top .hb_type .erase.active span{display: inline-block;}
.refinement_top .hb_type .hb.active i,.refinement_top .hb_type .free_lasso.active i,.refinement_top .hb_type .line_lasso.active i,.refinement_top .hb_type .erase.active i{width: 20px;height: 20px;vertical-align: -7px;margin-right: 5px;margin-left: 0px;}
.refinement_top .hb_type .hb,.refinement_top .hb_type .free_lasso,.refinement_top .hb_type .line_lasso,.refinement_top .hb_type .erase{display: inline-block;margin: 0 5px;}
.refinement_top .hb_type .free_lasso i{background: url(/images/watermark-remover-online/lasso.svg);}
.refinement_top .hb_type .free_lasso:hover i{background: url(/images/watermark-remover-online/lasso-h.svg);}
.refinement_top .hb_type .free_lasso.active i{background: url(/images/watermark-remover-online/lasso-a.svg);}

.refinement_top .hb_type .line_lasso i{background: url(/images/watermark-remover-online/polygonal.svg);}
.refinement_top .hb_type .line_lasso:hover i{background: url(/images/watermark-remover-online/polygonal-h.svg);}
.refinement_top .hb_type .line_lasso.active i{background: url(/images/watermark-remover-online/polygonal-a.svg);}

.refinement_top .hb_type .erase i{background: url(/images/watermark-remover-online/eraser.svg);vertical-align: -4px;}
.refinement_top .hb_type .erase:hover i{background: url(/images/watermark-remover-online/eraser-h.svg);}
.refinement_top .hb_type .erase.active i{background: url(/images/watermark-remover-online/eraser-a.svg);}
.refinement_top .hb_type .erase.active{vertical-align: 1px;}

.refinement_top .hb_type .hb i{background: url(/images/watermark-remover-online/brush.svg);vertical-align: -9px;}
.refinement_top .hb_type .hb:hover i{background: url(/images/watermark-remover-online/brush-h.svg);}
.refinement_top .hb_type .hb.active i{background: url(/images/watermark-remover-online/brush-a.svg);}

.refinement_top .hb_type .erase_border{height: 10px;border-left: 1px dashed #ddd;vertical-align: -2px;margin-left: 10px;margin-right: 10px;}
.hb_type{display: inline-block;margin-left: 10px;border: 1px dashed #ddd;padding-top: 6px;padding-bottom: 6px;border-radius: 10px;vertical-align: 3px;margin-top: -4px;min-width: 260px;}

.refinement_top .hb_type .hb i:last-child,.refinement_top .hb_type .erase i:last-child{display: none;}
.refinement_top .hb_type .hb.active i:last-child,.refinement_top .hb_type .erase.active i:last-child{display: inline-block;width: 8px;height: 5px;background: url(/images/online-bg-remover/arrow.png);vertical-align: 1px;margin-left: 5px;background-position-y: -5px;}
.refinement_top .hb_type .hb.active.c i:last-child,.refinement_top .hb_type .erase.active.c i:last-child{background-position-y: -0px;}
.refinement_top div span i {
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-right: 4px;
    background: url(/images/online-bg-remover/icon-up.png);
    vertical-align: -5px;
}

.refinement_top>span {
    font-size: 14px;
    color: #333;
    margin-left: 16px;
    display: inline-block;
}
.pensize-change-container{
    margin: 0 !important;
    cursor: default !important;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    padding:5px 10px;
    position: absolute;
    top: 40px;
    z-index: 3;
}
.pensize-change-container i{width: 17px;height: 9px;background: url(/images/online-bg-remover/close-bg-img.png);display: inline-block;margin-left: 5px;cursor: pointer;}
.refinement_top>span input {
    vertical-align: -4px;
    cursor: pointer;
}

.bg_crop .refinement_top .displayInlineBlock {
    margin-left: 14px;
}
.refinement_top .text-tailoring{display: inline-block;vertical-align: -1px;}
.refinement_top .text-tailoring .tailoring-unlimited{border: 1px solid #333;border-radius: 30px;height: 20px;line-height: 20px;padding:0 10px;vertical-align: -1px;}
.refinement_top .text-tailoring span{font-size: 14px;color: #333;padding: 0;padding: 0 10px;border: 1px solid transparent;border-radius: 30px;height: 20px;line-height: 20px;vertical-align: -1px;}
.refinement_top .text-tailoring span:hover{border-color: #2558bf;color: #2558bf;}
.refinement_top .text-tailoring span.active{background: none;color: #2558bf;border-color: #2558bf;}
.refinement_top .displayInlineBlock.active {
    border: 1px solid #2558bf !important;
}
.refinement_top .text-tailoring span.active:hover{border-color: #2558bf;}
.refinement_top .text-tailoring .tailoring-unlimited.active{border-color: #2558bf}
.refinement_top .text-tailoring span.text:hover{border-color: #fff;color: #333;cursor: initial;}
.bg_crop .refinement_top div span i {
    background: url(/images/online-bg-remover/tab-color.png);
}
.refinement_top div span.bg.active i {
    background-position-y: -120px;
}
.refinement_top div span.bg.active:hover i {
    background-position-y: -120px;
}
.refinement_top div span.bg:hover i {
    background-position-y: -140px;
}
.refinement_top div span.bg i {
    background-position-y: -160px;
}

.refinement_top div span.crop.active i {
    background-position-y: -60px;
}
.refinement_top div span.crop.active:hover i {
    background-position-y: -60px;
}
.refinement_top div span.crop:hover i {
    background-position-y: -80px;
}
.refinement_top div span.crop i {
    background-position-y: -100px;
}

.refinement_top div span.img-bg.active i {
    background-position-y: -180px;
}
.refinement_top div span.img-bg.active:hover i {
    background-position-y: -180px;
}
.refinement_top div span.img-bg:hover i {
    background-position-y: -200px;
}
.refinement_top div span.img-bg i {
    background-position-y: -220px;
}


.refinement_top div span.color.active i {
    background-position-y: -80px;
}
.refinement_top div span.color i {
    background-position-y: -100px;
}


.refinement_top .bg_box_n {
    border: none;
    display: inline-block;
    margin-left: 10px ;
    overflow: visible;
}

.refinement_top .bg_box_n div {
    border: none;
    margin: 0;
    vertical-align: -2px;
    overflow: visible;
    margin-left: -10px;
}

.refinement_top .bg_box_n div.img_box {
    display: none;
}

.refinement_top .bg_box_n .color_box div {
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border: 1px solid #e1e1e1;
    border-radius: 0px;
    margin-left: 2px;
    cursor: pointer;
    padding: 1px;
    display: inline-block;
}
.refinement_top .bg_box_n .color_box div:hover{
    border: 1px solid #2558bf;
}

.refinement_top .bg_box_n .color_box div i {
    width: 100%;
    height: 100%;
    display: block;
}

.refinement_top .bg_box_n .color_box div:nth-child(1) {
    background: url(/images/online-bg-remover/color-no.png);
    background-size: 14px 14px;
}

.refinement_top .bg_box_n .color_box div.blue i {
    background: blue;
}

.refinement_top .bg_box_n .color_box div.red i {
    background: red;
}

.refinement_top .bg_box_n .color_box div.white i {
    background: white;
}

.refinement_top .bg_box_n .color_box div.black i {
    background: black;
}

.refinement_top .bg_box_n .color_box div.green i {
    background: green;
}

.refinement_top .bg_box_n .color_box div.pink i {
    background: pink;
}

.refinement_top .bg_box_n .color_box div:last-child {
    width: 22px;
    height: 16px;
    background: url(/images/online-bg-remover/more.png);
    border: none;
    padding: 0px;
    border-radius: 0px;
    vertical-align: 1px;
}
.refinement_top .bg_box_n .color_box div:last-child:hover{
    background-position: 0 -16px;
}

.refinement_top .bg_box_n .color_box div:last-child input {
    opacity: 0;
}

.refinement_top .img_box>i {
    width: 21px;
    height: 21px;
    background: url(/images/online-bg-remover/add-picture.png);
    display: inline-block;
    overflow: hidden;
    vertical-align: -2px;
}

.refinement_top .img_box>i input {
    opacity: 0;
}

.refinement_top .img_box div {
    border-radius: 30px;
    border: 1px solid #465064;
    width: 130px;
    height: 20px;
    display: inline-block;
    margin-left: 5px;
    position: relative;
    color: #465064;
    font-size: 12px;
    padding-left: 10px;
    box-sizing: border-box;
    line-height: 18px;
    overflow: initial;
}

.refinement_top .img_box div {
    overflow: hidden;
}

.refinement_top .img_box div:hover {
    overflow: initial;
}

.refinement_top .img_box div ul {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    padding-left: 15px;
    overflow: hidden;
    box-sizing: border-box;
    padding-right: 20px;
    background: #fff;
    border-radius: 30px 30px 0px 0px;
    z-index: 3;
}

.refinement_top .img_box div li {
    position: relative;
    padding-bottom: 5px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.refinement_top .img_box div li input {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    right: 0px;
    opacity: 0;
}

.refinement_top .img_box div>i {
    width: 9px;
    height: 4px;
    background: url(/images/online-bg-remover/point.png);
    position: absolute;
    right: 10px;
    top: 8px;
}

.imageMove .refinement_top span {
    display: inline-block;
    margin-left: 25px;
    font-size: 14px;
}
.refinement_top .uploadBtn{vertical-align: 1px;}
.refinement_top .uploadBtn span{
    padding: 0;
}
.refinement_top .controlLever i {
    width: 14px;
    height: 14px;
    display: inline-block;
    background: url(/images/online-bg-remover/check.png);
    margin-right: 8px;
    vertical-align: -2px;
}

.refinement_top .mirror i {
    background: url(/images/online-bg-remover/mirror.png);
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: -6px;
}

.refinement_top .mirror i.lMirror {
    background-position-y: -0px;
    margin-right: 6px;
}

.refinement_top .mirror i.lMirror:hover {
    background-position-y: -20px;
}

.refinement_top .mirror i.lMirror.active {
    background-position-y: -20px;
}

.refinement_top .mirror i.tMirror {
    background-position-y: -40px;
}

.refinement_top .mirror i.tMirror:hover {
    background-position-y: -60px;
}

.refinement_top .mirror i.tMirror.active {
    background-position-y: -60px;
}

.refinement_top .rotate {
    display: inline-block;
    /* width: 340px; */
    border: none;
   /*  margin-left: 20px; */
}

.refinement_top .rotate {
    font-size: 14px;
    color: #333;
}

.refinement_top .rotate div {
    display: inline-block;
    border: none;
    border-radius: 0;
    margin-left: 0px;
    /* width: 300px; */
    overflow: initial;
    position: relative;
}

.refinement_top .rotate div::after {
    clear: both;
    content: "";
    height: 1px;
    width: 100%;
    background: #272e3d; /* #21a1f2; */
    position: absolute;
    top: 8px;
    left: 0px;
}

.refinement_top .rotate .rotate-box span {
    font-size: 12px;
    color: #404040;
    padding: 0;
    margin: 0px;
    margin-right: -.5px;
    -webkit-transform: scale(0.833333);
    transform: scale(0.833333);
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
    width: 20px;
    text-align: center;
}

.refinement_top .rotate div span::after {
    clear: both;
    content: "";
    width: 1px;
    height: 6px;
    position: absolute;
    top: -1px;
    left: -5px;
    background: #272e3d; /* #21a1f2; */
    left: 50%;
}

.canvas {
    overflow: hidden;
    background: #efeff0;
    position: absolute;
    width: 100%;
    height: auto;
    min-height: 280px;
    top: 52px;
    bottom: 57px;
}

/* .canvas_box div{max-width: 304px;width: 100%;height: 224px;} */
.canvas_box {
    width: 100%;
    /* border-top: 1px solid #cccccc; */
    border-bottom: 1px solid #cccccc;
    flex-wrap: nowrap !important;
    position: absolute;
    top: 1px;
    bottom: 37px;
}

.canvas_platform {
    width: 100%;
    height: 100%;
    /* height: 224px; */
}

.move_box {
    width: 613px;
    height: 224px;
    background: url(/images/online-bg-remover/bg.png);
    position: relative;
    display: none;
    overflow: hidden;
}

.move_box img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.refinement_bottom {
    padding: 0 24px;
    background: #efeff0;
    position: absolute;
    width: 100%;
    box-sizing: border-box;
    bottom: 0;
    height: 36px;
    line-height: 36px;
    z-index: 10;
    justify-content: center;
    border-radius: 0 0 20px 20px;
}

.refinement_bottom>span {
    font-size: 12px;
    color: #485062;
}

.refinement_bottom div {
    display: inline-block;
    vertical-align: middle;
}

.refinement_bottom div span{vertical-align: 1px;line-height: 18px;height: 18px;display: inline-block;}
.refinement_bottom div i {
    width: 18px;
    height: 18px;
    background: url(/images/online-bg-remover/bar.png);
    margin: 0px 10px;
    display: inline-block;
    vertical-align: -2px;
    cursor: pointer;
}


.refinement_bottom div i.move {
    background: url(/images/watermark-remover-online/move.svg);
}
.refinement_bottom div i.move:hover {
    background: url(/images/watermark-remover-online/move-h.svg);
}
.refinement_bottom div i.move.active {
    background: url(/images/watermark-remover-online/move-active.svg);
}
.refinement_bottom div i.move.active:hover {
    background: url(/images/watermark-remover-online/move-active-h.svg);
}

.no-hover{
    background-position: 0 -81px !important;
}
.no-hover:hover {
    background-position: 0 -81px !important;
}


.refinement_bottom div i.narrow {
    background: url(/images/watermark-remover-online/narrow.svg);
}

.refinement_bottom div i.narrow:hover {
    background: url(/images/watermark-remover-online/narrow-h.svg);
}

.refinement_bottom div i.narrow.forbid {
    background: url(/images/watermark-remover-online/narrow-forbid.svg);
}

.refinement_bottom div i.enlarge {
    background: url(/images/watermark-remover-online/enlarge.svg);
}

.refinement_bottom div i.enlarge:hover {
    background: url(/images/watermark-remover-online/enlarge-h.svg);
}

.refinement_bottom div i.enlarge.forbid {
    background: url(/images/watermark-remover-online/enlarge-forbid.svg);
}

#LeftoriCanvas,
#RightoriCanvas {
    display: none;
}
#LeftoriCanvas{
    background: url(/images/online-bg-remover/bg.png);
}

.canvas_box div .canvas_platform {
    position: absolute;
    background-color: #efeff0;
    /* background: url(/images/online-bg-remover/bg.png); */
    overflow: hidden;
}

.canvas_box div div canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* box-shadow: 0 0 4px 1px #0000003d; */
}

#RightSaveCanvas{
    background: url(/images/online-bg-remover/bg.png);
    -webkit-background-size: cover;
    background-size: cover;
    box-shadow: 0 0 4px 1px #0000003d;
} 
#mask{
    display: none;
}
#cover{
    position: absolute;
    z-index: 10;
    display: none;
}
.canvas_box .left,
.canvas_box .right {
    position: relative;
    width: 50%;
    min-width: 300px;
    min-height: 240px;
    overflow: hidden;
}
.canvas_box .left.active {
    display: none;
}

.canvas_box .right.active {
    max-width: 100%;
    width: 100%;
    border-radius: 18px 18px 0 0;
}

.canvas_box .right.active canvas {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.canvas_box div.active div {

    /* max-width: 100%; */width: 100%;
}

.canvas_box div.active div canvas {
    left: 50%;
    transform: translateX(-50%);
}

.canvas-mask {
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 0;
    cursor: grab;
}

/* .refinement_bottom.active{display: none;} */
#RightdstBg {
    display: none;
    position: absolute;
    /* background: url(/images/online-bg-remover/bg.png); */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* box-shadow: 0 0 4px 1px #0000003d; */
}

#RightdstCanvas {
    position: absolute;
    z-index: 2;
    background: none;
    box-shadow: none !important;
    display: none;
}






.cropOperateBox {
    border: none !important;
    overflow: visible !important;
    position: relative;
    font-size: 14px;
    display: inline-block;
    margin-left: 20px;
    vertical-align: -2px;
}

.crop-active {
    width: 100%;
    color: #2575E9;
}

#Brushsize {
    width: 150px;
}

.pen-value {
    width: 30px;
    border: 1px solid #ccc;
    vertical-align: -2px !important;
    text-align: center;
    margin-left: 10px !important;
    border-radius: 4px;
}
.pen-value:hover{
    border: 1px solid #2558bf;
}
.pen-value:focus {
    border: 1px solid #ccc !important;
}

.image-loading-box{
    border-radius: 18px;
    overflow: hidden;
    max-width: 450px;
    margin: 0px;
    width: 95%;
    /* min-width: 730px; */
    position: fixed;
    top: 50%;
    max-height: 250px;
    height: auto;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 6;
    background: #fff;
    display: block;
    box-shadow: 0 0 30px #00274266;
    display: none;
    padding-bottom: 40px;
}
.show-message-box{
    width: 100%;
    height: 100%;
    display: none;
    overflow: hidden;
}
.error-icon{
    width: 100px;
    height: 100px;
    border: 10px solid #F5A73F;
    border-radius: 100%;
    font-size: 60px;
    text-align: center;
    line-height: 100px;
    color: #F5A73F;
    font-weight: bold;
    margin:60px auto 0;
}
.loading-icon{
    width: 100px;
    height: 100px;
    /* border: 10px solid #3C6AE8;
    border-radius: 100%; */
    font-size: 30px;
    text-align: center;
    line-height: 100px;
    color: #3C6AE8;
    /* font-weight: bold; */
    margin: 60px auto 0 auto;
    background-image: url('/images/online-bg-remover/loading.gif');
}
.warning-icon{
    width: 100px;
    height: 100px;
    margin: 40px auto 0 auto;
}
.image-loading-box.active{background: none;box-shadow: none;min-height: auto;padding-bottom: 0px;}
.image-loading-box.active .icon-box{display: none;}
.loading-box{background: rgba(0, 0, 0, .3);padding-bottom: 20px;border-radius: 20px;max-width: 280px;width: 100%;}
.loading-progress{height: 14px;border-radius: 30px;margin-top: 50px;width: 170px;position: relative;border: 2px solid #fff;box-sizing: border-box;}
.loading-progress i{background: #fff;display: block;height: 14px;position: absolute;top: -2px;left: -1px;padding: 0;margin: 0;border-radius: 30px;width: 13px;}
.loading-box .loading-text{margin-top: 15px;color: #fff;font-size: 16px;}
.load-error-box>img{margin: auto;display: block;margin-top: 50px;}
.show-message-box{
    width: 100%;
    height: 100%;
    display: none;
    overflow: hidden;
}
.warning-icon img{
    width: 100%;
    height: 100%;
}
.error-text{
    width: 80%;
    font-size: 18px;
    line-height: 20px;
    text-align: center;
    margin: 20px auto 0;
    color: #333;
}
.loading-text{
    width: 80%;
    font-size: 18px;
    line-height: 20px;
    text-align: center;
    margin: 40px auto 0 auto;
    color: #333;
}
.show-message-box .info,.warning-text{
    width: 80%;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    margin: 10px auto 0 auto;
    color: #333;
}
.button-group{
    width: 270px;
    min-width: 270px;
    height: auto;
    margin: 20px auto 0;
    overflow: hidden;
}
.button-group div{
    width: 120px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 30px;
    font-size: 18px;
    border: 1px solid #21A1F2;
    cursor: pointer;
}
.button-group div:hover{
    background-color: #30adfc;
    color: white;
}
.retry, .confirm{
    float: left;
    background-color: #21A1F2;
    color: white;
}
.retry:hover, .confirm:hover{
    background-color: #hover;
} 
.cancel{
    float: right;
    background-color: white;
    color: #21A1F2;
}
.cancel-upload{
    width: 120px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    border-radius: 36px;
    font-size: 18px;
    cursor: pointer;
    margin: 30px auto 0px;
    background-color: #21A1F2;
    color: white;
}
.cancel-upload:hover{
    background-color: #30adfc;
}
a.jump-link{
    color: #ff9602 !important;
    text-decoration: underline;
}

.pensize-box{
    position: relative;
    width: 180px;
    height: 10px;
    border: #D9D9D9 !important;
    overflow: visible !important;
    cursor: pointer; 
}
.pensize-grey-box{
    width: 100%;
    height: 2px;
    background-color: #D9D9D9;
    margin-top: 3px;
}
.pensize-dot{
    position: absolute;
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #21A1F2;
    z-index: 10;
    border-radius: 100%;
    top: 0px;
    left: 16px;
    box-shadow: 0 0 4px 1px #21A1F2;
}

.alert-modal-box{
    width: 100%;
    height: 100%;
    max-width: 500px;
    max-height: 300px;
    background-color: white;
    border-radius: 20px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    box-shadow: 0 0 30px #00274266;
    display: none;
}
.alert-modal-box .confirm-icon{
    width: 60px;
    height: 60px;
    margin: 40px auto;
}
.alert-modal-box .confirm-text{
    width: 80%;
    text-align: center;
    line-height: 20px;
}
.alert-modal-box .confirm-button-group{
    width: 60%;
    overflow: hidden;
    margin: 50px auto;
}
.confirm-button-group div{
    width: 140px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: white;
    border-radius: 15px;
    background-color: #21a1f2;
    cursor: pointer;
    border: 1px solid #21A1F2;
}
.confirm-button-group div:hover{
    background-color: #30adfc;
}
.confirm-button-group .confirm-back{
    float: left;
}
.over-limit-upload .confirm-back{
    float: none;
}
.confirm-button-group .cancel-back{
    float: right;
    background-color: white;
    color: #21A1F2;

}
.confirm-button-group .cancel-back:hover{
    color: white;
  
}
.image-loading-box .icon-box{
    position: absolute;
    top: 10px;
    left: 15px;
}
.image-loading-box .icon-box i{
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: -10px;
    background: url(/images/watermark-remover-online/icon.png) 0 0 no-repeat;
    background-size: 24px 24px;
}
.image-loading-box .icon-box .icon-text{
    display: inline-block;
    vertical-align: middle;
    color: #2757b7;
}
.image-loading-box .feed-back-box{
    position: absolute;
    width: auto;
    right: 0px;
    bottom: 10px;
    color: #3A81EA;
    text-decoration: underline;
    margin-right: 10px;
}
.image-loading-box .feed-back-box a{
    color: #3A81EA;
}
.color-picker{
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.transparent-bg{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url(/images/online-bg-remover/bg.png);
    background-size: 100%;
    box-shadow: 0 0 4px 1px #0000003d;
    display: none;
}

/**
 * 背景图
 */
.chose-background-img-container{
    border: none !important;
    margin: 0 !important;
    overflow: visible;
}
.chose-background-img-container ul{
    /* width: 172px; */
}
.chose-background-img-container li{
    position: relative;
    float: left;
    font-size: 14px;
    margin-left: 14px;
    margin-right: 14px;
    padding: 2px 0;
    box-sizing: border-box;
    cursor: pointer;
    border-bottom: 2px solid #305AB800;
}
.chose-background-img-container li.active{
    border-bottom: 2px solid #305AB8;
}

.chose-background-img-container i{
    position: absolute;
    width: 12px;
    height: 6px;
    top: 54%;
    right: -16px;
    transform: translate(0, -50%);
}
.chose-background-img-container li i{
    background-image: url('/images/online-bg-remover/jiantou-tools.png');
    background-position: 0 0px;
    background-repeat: no-repeat;
}
.chose-background-img-container li.active i{
    background-image: url('/images/online-bg-remover/jiantou-tools.png');
    background-position: 0 -18px;
    background-repeat: no-repeat;
    top: 55%;
}
.chose-background-img-container li:hover{
    border-bottom: 2px solid #305AB8;
}
.chose-background-img-container li:hover i{
    background-position: 0 -6px;
}
.chose-background-img-container li.active:hover i{
    background-position: 0 -12px;
}
/* .displayInlineBlock .img-bg i{
    background-position: 0 -140px !important;
}
.displayInlineBlock .img-bg.active i{
    background-position: 0 -120px !important;
} */

.thumb-img-container{
    position: absolute;
    display: none;
    width: 384px;
    height: 246px;
    background-color: #fff;
    border: 0 !important;
    border-radius: 10px;
    z-index: 999;
    top: 46px;
    left: 210px;
    /* box-shadow: 0 0 4px 1px #e4e2e2;; */
    box-shadow: 0 0 10px #00274266;
}
.thumb-img-container .img-type-list{
    width: 260px;
    height: 14px;
    line-height: 14px;
    margin-left: 15px;
    margin-top: 10px;
}
.thumb-img-container .img-type-list ul{
    width: 100%;
    height: 100%;
}
.thumb-img-container .img-type-list li{
    list-style: none;
    float: left;
    font-size: 14px;
    margin-left: 20px;
    color: #485062;
}
.img-list-container{
    width: 100%;
    height: 224px;
}
.thumb-img-container .img-box{
    width: 366px;
    /*height: 224px;
    
     display: flex;
    justify-content: space-around;
    flex-wrap: wrap; */
    margin-left: 5px;
    overflow: hidden;

}
.thumb-img-container .img-box .thumb-img-list{
    float: left;
    width: 110px;
    height: 80px;
    line-height: 55px;
    border: 1px solid #D1D1D1;
    border-radius: 4px;
    margin: 10px 5px 0 5px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}
.thumb-img-container .img-box .thumb-img-list img{
    border-radius: 4px;
}
.thumb-img-container .img-box .thumb-img-list:hover{
    border: 1px solid #21a1f2;
}
.thumb-img-container .img-box .thumb-img-list.active{
    border: 1px solid #305ab8;
}
.thumb-img-container .img-box .thumb-img-list img{
    /* width: 100%; */
    /* height: 100%; */
}
.thumb-img-container .img-box .thumb-img-list .chose-status{
    position:absolute;
    display: none;
    width: 14px;
    height: 14px;
    left: 5px;
    bottom: 5px;
    background-image: url('/images/online-bg-remover/check.png');
    background-position: 0 -28px;
}
.thumb-img-container .img-box .thumb-img-list.active .chose-status{
    display: block;
}
.thumb-img-container .close-icon{
    position: absolute;
    width: 17px;
    height: 9px;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 5px;
    background-image: url('/images/online-bg-remover/close-bg-img.png');
    background-position: 0 0px;
    cursor: pointer;
}
.thumb-img-container .close-icon:hover{
    background-position: 0 -9px;
}
.thumb-img-container .left-icon{
    position: absolute;
    width: 9px;
    height: 15px;
    top: 11px;
    left: 12px;
    background-image: url('/images/online-bg-remover/jiantou.png');
    background-position: 0 0px;
    cursor: pointer;
}
.thumb-img-container .left-icon:hover{
    background-position: 0 -15px;
}
.thumb-img-container .right-icon{
    position: absolute;
    width: 9px;
    height: 15px;
    top: 11px;
    right: 12px;
    background-image: url('/images/online-bg-remover/jiantou.png');
    background-position: 0 -30px;
    cursor: pointer;
}
.thumb-img-container .right-icon:hover{
    background-position: 0 -45px;
}
.thumb-img-container .refulsh-icon{
    position: absolute;
    width: 18px;
    height: 16px;
    top: 11px;
    right: 36px;
    background-image: url('/images/online-bg-remover/chexiao.png');
    background-position: 0 0px;
    cursor: pointer;
}
.thumb-img-container .refulsh-icon:hover{
    background-position: 0 -16px;
}
.remove-local-img-icon-box{
    width: 26px;
    height: 26px;
    display: block;
    margin: auto;
    margin-top: 27px;
    vertical-align: middle;
    background-image: url('/images/online-bg-remover/icon-deuse.png');
    background-position: 0 0;
}
.add-local-img-icon-box{
    width: 26px;
    height: 26px;
    display: block;
    margin: auto;
    margin-top: 27px;
    vertical-align: middle;
    background-image: url('/images/online-bg-remover/icon-add.png');
    background-position: 0 0;
}
.add-local-img:hover .add-local-img-icon-box{
    background-position: 0 -26px;
}
.thumb-img-container .coming-soon{
    display: block;
    margin: 75px auto;
} 

.chose-res{
    display: inline-block;
    width: 84px;
    height: 24px;
    line-height: 24px;
    border: 1px solid #000;
    border-radius: 5px;
    position: relative;
    padding-left: 10px;
    box-sizing: border-box;
    cursor: pointer;
    text-align: left;
}
.chose-res:hover{color: #2558bf !important;border-color: #2558bf !important;}
.chose-res i{
    display: inline-block;
    width: 12px;
    height: 6px;
    position: absolute;
    top: 8px;
    right: 6px;
    background-image: url(/images/online-bg-remover/combox-arrow.png);
    background-position: 0 0px;
    background-repeat: no-repeat;
}
.chose-res:hover{
    border: 1px solid #2575E9;
    color: #2575E9;
}
.chose-res:hover i{
    background-position: 0 -7px;
}
.chose-res.active i{
    background-position: 0 -14px;
}
.chose-res.active:hover i{
    background-position: 0 -21px;
}
.sizeList-box{
    display: none;
    width: 84px;
    height: 144px;
    position: absolute;
    top: 30px;
    left: -1px;
    z-index: 999;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0px 0px 9px rgba(15,35,119,0.26);
}
.sizeList {
    width: 84px;
    list-style: none;
    overflow: hidden;
    background-color: #fff;
    color: #485062;
}
.sizeList-scroll-bar{
    position: absolute;
    width: 3px;
    /* height: 86.4px; */
    height: 126px;
    background-color: #c5d7ff;
    top: 4;
    right: 2px;
    z-index: 1000;
}
/* .sizeList-scroll-bar:hover{
    background-color: #305ab8;
} */

.sizeList.active i {
    background-position: 0 -6px;
}

.sizeList li {
    width: 100%;
    font-size: 14px;
    line-height: 24px;
    cursor: pointer;
    padding-left: 10px;
    box-sizing: border-box;
}
.sizeList li:hover{
    color: white;
    background-color: #305ab8;
}

.feedback{display:none;position:fixed;left:50%;top:50%;-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%); box-sizing:border-box;padding-top:50px;max-width: 576px;min-width:300px;min-height:510px;max-height:504px;overflow-y:auto;background-color: #fff;border-radius:6px;;box-shadow:0 0 30px 5px rgba(74,40,32,.10);z-index:99;font-size:16px;color:#222;}
.feedback .feedback_container{width:80%;margin:0 auto;}
.feedback p{text-align: left;margin:5px  0 20px 0;font-size:18px;}
.feedback input{margin-bottom:10px;width:100%;min-height:32px;border:0;outline:0;background-color: #e2f0f9;text-align: left;padding:0 10px;box-sizing: border-box;font-size:16px;/* color:#666; */
    moz-user-select: -moz-text;
    -moz-user-select: text;
    -o-user-select:text;
    -khtml-user-select:text;
    -webkit-user-select:text;
    -ms-user-select:text;
    user-select:text;}
.feedback #form_contents{margin:0;border:0;padding:6px 0;height: 100px;width: 100%;background-color: #e2f0f9;font-size:16px;line-height: 18px;text-indent: 10px;outline: none;overflow: auto;
    moz-user-select: -moz-text;
    -moz-user-select: text;
    -o-user-select:text;
    -khtml-user-select:text;
    -webkit-user-select:text;
    -ms-user-select:text;
    user-select:text;}
.feedback #form_submit{display: block;margin:30px auto;width:160px;height: 48px;border-radius:6px;line-height: 40px;color:#fff;font-size:18px;background-color: #f6762b;text-align: center;cursor: pointer;}
.feedback .title{margin-bottom: 26px;font-size:20px;line-height: 24px;font-weight:600;text-align: left;}
.feedback_close{position: absolute;top: 10px;right:10px;width: 20px;height: 20px;background: url(../../images/online-bg-remover/close.png) 0 0 no-repeat;cursor: pointer;}
.feedback #mail-tip{display: none;position:absolute;top:206px;font-size:14px;color:#c7340f}
.feedback_close:hover{background-position: 0 -20px;}
textarea{
    font-family: "Segoe UI", "Arial", "Helvetica", "Verdana", "sans-serif";
}
.no-border{
    border: none !important;
}

  
.mask-box{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}
.move_canvas{
  position: absolute;
}
.rotate-box{
  position: relative;
}
.dot{
  position: absolute !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 100% !important;
  background-color: #4BB1F2 !important;
  left: 143px ;
  top: 2px;
  z-index: 1;
  cursor: pointer;
  box-shadow: 0 0 7px 2px #4bb1f2;
}
.reloadImg{
  cursor: pointer;
  margin-left: 30px !important;
}
#LeftdstCanvas{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 4px 1px #0000003d;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently*/
}
.img-color-simple-icon{
    display: inline-block;
    width: 26px;
    height: 26px;
    background-image: url(/images/online-bg-remover/tab-color-icon.png);
    background-position:center -208px;
    background-repeat: no-repeat;
    margin-left: 14px;
}
.img-bg-simple-icon{
    display: inline-block;
    width: 26px;
    height: 26px;
    background-image: url(/images/online-bg-remover/tab-color-icon.png);
    background-position:center -286px;
    background-repeat: no-repeat;
    margin-left: 14px;
}
.crop-simple-icon{
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url(/images/online-bg-remover/tab-color-icon.png);
    background-position:center -132px;
    background-repeat: no-repeat;
    margin-left: 14px;
}

.mobile_crop{
    display: none;
}

.mobile-save-image{
    width: 100%;
    height: 100%;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    display: none;
    flex-direction: column;
    background-color: #efeff0;
}
.image-show-box{
    width: 100%;
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 60px;
    overflow: hidden;
}
.image-show-box img{
    display: block;
    max-width: 100%;
    max-height: 90%;
    background-image: url(/images/online-bg-remover/bg.png);
    box-shadow: 0 0 4px 1px #0000003d;
}
.save-btn-group{
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-around;
}
.back-edit{
    position: absolute;
    top: 20px;
    left: 20px;
    width: 60px;
    height: 24px;
    line-height: 24px;
    font-size: 14px;
    border: 1px solid #21a1f2;
    border-radius: 15px;
    text-align: center;
}
.show-long-press-save{
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 0 10px;
    box-sizing: border-box;
}
.show-long-press-save span{
    display: inline-block;
    margin-top: 14px;
}

@media screen and (min-width:2000px){
    .photo{max-width: 2500px;width: 80%;}
    .photo>ul{max-width: 2500px;}
}
@media screen and (max-width:1180px) {
    .main div img {
        margin: auto !important;
        order: 1;
    }

    .main div div {
        order: 2;
        padding-bottom: 50px;
        text-align: center;
    }

    .other_box ul {
        justify-content: space-around;
        max-width: 820px;
        margin: 40px auto 0px;
    }
    .banner_box h1+img{margin: 10px auto 0px;}
    
}

@media screen and (max-width: 1024px) {
    .thumb-img-container {
        top: 64px;
    }
    .menu{
        z-index: 1;
    }
    .feedback{
        min-width: 400px;
    }
}

@media screen and (max-width:1080px) {
    .banner_box>ul {
        justify-content: space-around;
    }

    .banner_box>ul li:nth-child(1) {
        padding-bottom: 0px;
    }

    .universally_box ul {
        padding: 0 30px;
    }

    .other_box ul li {
        max-width: 350px;
    }
}

@media screen and (max-width:630px) {
    .banner_box>h1 {
        font-size: 30px;
        line-height: 36px;
    }

    h2 {
        font-size: 26px;
        line-height: 32px;
    }
}
@media screen and (max-width:320px) {
    #right-operate-box .photo_guide_box{zoom: .6;top: 160% !important;}
}
/* 二倍图 */
@media all and (-webkit-min-device-pixel-ratio: 1.5){
    .photo_guide{background: url(/images/watermark-remover-online/guide@2x.png) 0 0 no-repeat;background-size: 24px 48px;}
    #right-operate-box>.close{background: url(/images/watermark-remover-online/close@2x.png) 0 0 no-repeat;background-size: 20px 80px;}
    .refinement_top .norevoke{background-position-y: -80px;}
    .refinement_top .operate-norevoke{background-position-y: -80px;}
    .refinement_top .hb_type div>i{background: url(/images/watermark-remover-online/lasso1@2x.png) 0 0 no-repeat;background-size: 24px 272px;}
    .photo>ul>div.icon i,.image-loading-box .icon-box i{background: url(/images/watermark-remover-online/icon@2x.png) 0 0 no-repeat;background-size: 24px 24px;}
}

/* 打开权益窗口 */
.maskRights{background: rgba(0, 0, 0, .6);width: 100%;height: 100%;position: fixed;top: 0px;left: 0px;padding: 10px;box-sizing: border-box;display: none;z-index: 9;}

.maskRights>div{display: none;border-radius: 10px;padding: 0px 10px 0px;box-sizing: border-box;background: #fff;max-width: 1200px;width: 100%;position: absolute;padding-top: 50px;padding-bottom: 50px;top: 12%;bottom: 10%;height: auto;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);box-sizing: border-box;}
.maskRights .scroll_box{overflow-y: auto;height: 100%;box-sizing: border-box;}

.maskRights .close{width: 20px;height: 20px;background: url(/images/watermark-remover-online/close.svg);position: absolute;top: 20px;right: 25px;cursor: pointer;z-index: 9;}
.maskRights .close:hover{background: url(/images/watermark-remover-online/close-h.svg);}

.maskRights>div>div{position: absolute;top: 46%;left: 50%;-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);text-align: center;width: 100%;}
.maskRights img{margin: auto;display: block;}
.maskRights p{font-size: 20px;line-height: 28px;color: #333;max-width: 952px;width: 90%;text-align: center;}
.maskRights p a{text-decoration: underline;color: #21a1f2;}
.maskRights .btn{min-width: 240px;height: 50px;line-height: 50px;text-align: center;border-radius: 34px;background: none;display: inline-block;margin: 20px auto;font-size: 22px;color: #fff;cursor: pointer;padding-left: 20px;padding-right: 20px;box-sizing: border-box;border: 1px solid #FF8702;color: #FF8702;}
.maskRights .btn:hover{background: rgba(255, 104, 2, 0.09);text-decoration: none;}
.maskRights .btn:last-child{background: #ff9602;color: #fff;border-color: #ff9602;}
.maskRights .btn:last-child:hover{background: #f7aa3d;border-color: #f7aa3d;}
.maskRights .btn.upgrade_link{line-height: 48px;}

.maskRights .img{position: relative;margin: 0px  auto 14px;display: block;width: 100px;height: 100px;}
.maskRights .img img:first-child{position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);}
.maskRights .img img:last-child{-webkit-animation: rotate 1.5s infinite linear;-moz-animation: rotate 1.5s infinite linear;-o-animation: rotate 1.5s infinite linear;animation: rotate 1.5s infinite linear;position: absolute;top: 0px;left: 0px;}
/* 旋转 */
@-webkit-keyframes rotate {0% {-webkit-transform: rotate(0deg)}100% {-webkit-transform: rotate(360deg)}}
@-moz-keyframes rotate {0% {-moz-transform: rotate(0deg)}100% {-moz-transform: rotate(360deg)}}
@-o-keyframes rotate {0% {-o-transform: rotate(0deg)}100% {-o-transform: rotate(360deg)}}
.maskLoginMonitor .btn{min-width: 318px;padding-left: 30px;padding-right: 30px;box-sizing: border-box;border: 1px solid #FF8702;border-radius: 34px;line-height: 48px;font-size: 20px;color: #ff8702;display: inline-block;margin-top: 20px;color: #fff;}
.maskLoginMonitor .btn:hover{background: rgba(255, 104, 2, 0.09);text-decoration: none;}

.maskRightsTips .info{font-size: 20px;line-height: 28px;margin-top: 16px;margin-bottom: 16px;}
.maskRightsTips .info span{font-weight: bold;color: #21a1f2;}
/* .maskRightsTips .down_info a{color: #;} */
.maskRightsTips .box{margin-top: 10px;}
.maskRightsTips .box .btn{margin-left: 10px;margin-right: 10px;margin-top: 10px;}
.maskRightsTips .box .down{display: none;}


.banner_box>#drag-zone.active .btn{-webkit-justify-content: space-around;justify-content: space-around;}
.banner_box>#drag-zone.active .btn .log_in{display: none;}
.banner_box>.info_log{color: #fff;max-width: 700px;text-align: center;margin-top: 15px;}
.banner_box>.info_log .log_in{text-decoration: underline;cursor: pointer;color: #fc0;font-weight: bold;}
/* photo_login_box */
.icon_box{position: absolute;right: 90px;top: 14px;}
.photo_login{display: inline-block;}
.photo_login>a{font-size: 16px;line-height: 20px;color: #22A1F1;cursor: pointer;text-decoration: none;}
.photo_login>a i{width: 23px;height: 23px;background: url(/images/watermark-remover-online/my.svg);display: inline-block;vertical-align: -6px;margin-right: 6px;border-radius: 50%;background-size: 100% 100%;background-repeat: no-repeat;}
.photo_login>a:hover i{background-image: url(/images/watermark-remover-online/my-h.svg);}
.photo_rights_load,.photo_rights{display: none;width: 330px;background: #FFFFFF;box-shadow: 0px 6px 13px -4px rgba(0, 0, 0, 0.5);border-radius: 9px;position: absolute;top: 30px;right: -98px;z-index: 101;padding: 0px 10px 0px 30px;box-sizing: border-box;}
.photo_rights_load,.photo_rights{padding:0 0 30px;}
.photo_rights_load .load{margin: 30px auto 20px;display: block;-webkit-animation: rotate 1.5s infinite linear;-moz-animation: rotate 1.5s infinite linear;-o-animation: rotate 1.5s infinite linear;animation: rotate 1.5s infinite linear;width: 60px;}
.photo_rights_load p{text-align: center;font-size: 16px;color: #333;}
/* photo_rights */
.photo_rights{padding: 20px;}
.photo_rights p{font-size: 18px;color: #333;}
.photo_rights p span,.photo_rights p .num{color: #22A1F1;font-weight: bold;}
.photo_rights p .num{font-style: normal;}
.photo_rights p a{color: #22A1F1;text-decoration: underline;}
.photo_rights .btn{width: 244px;height: 46px;line-height: 46px;font-size: 20px;font-weight: 600;color: #fff;background: #ff9602;border-radius: 26px;display: block;margin: auto;text-align: center;margin-top: 20px;cursor: pointer;font-weight: normal;}
.photo_rights .btn:hover{text-decoration: none;background: #f7aa3d;color: #fff;}

/* photo_upgrade */
.photo_upgrade{margin-right: 26px;display: inline-block;}
.photo_upgrade>a{font-size: 16px;line-height: 20px;color: #22A1F1;cursor: pointer;}
.photo_upgrade>a i{width: 24px;height: 24px;background: url(/images/watermark-remover-online/upgrade-s.svg);display: inline-block;vertical-align: -6px;margin-right: 6px;}
.photo_upgrade>a:hover i{background: url(/images/watermark-remover-online/upgrade-h-s.svg);text-decoration: none;}
.photo_upgrade>a:hover{text-decoration: none;}

.photo>ul>div.btn span.saveBtn{border-radius: 5px 0px 0px 5px;min-width: 90px;margin-right: 0px !important;}
.photo>ul>div.btn span.crop-btn{min-width: 160px;}
.photo>ul>div.btn span.saveBtn.unbind{color: rgba(255, 255, 255, .5);}
.photo>ul>div.btn span.saveBtn.unbind:hover{background: #21a1f2;}
.photo>ul>div.btn .photoHistory{width: 36px;height: 30px;background: #21a1f2 url(/images/watermark-remover-online/history-btn.svg) no-repeat center center;margin: 0px;border-radius: 0px 5px 5px 0px;border-left: 1px solid rgba(255, 255, 255, .2);line-height: 30px;margin-right: 30px;display: inline-block;}
.photo>ul>div.btn .photoHistory::after{clear: both;content: "History";position: relative;z-index: -1;opacity: 0;}
.photo>ul>div.btn .photoHistory:hover{background-color: #33c3f3;}
.scroll_box::-webkit-scrollbar {height: 8px;width: 4px;background: #fff;}
.scroll_box::-webkit-scrollbar-thumb{background: #f1f1f1;}
.scroll_box::-webkit-scrollbar-thumb:hover{background:#ddd}
.scroll_box::-webkit-scrollbar-thumb:active{background:#bbb}

.show-message-box .close{width: 20px;height: 20px;background: url(/images/watermark-remover-online/close.svg);position: absolute;top: 10px;right: 10px;cursor: pointer;}
.show-message-box .close:hover{background: url(/images/watermark-remover-online/close-h.svg);}
.show-message-box .rotate{position: relative;}
.show-message-box .rotate img.load{position: absolute;top: 0px;left: 0px;-webkit-animation: rotate 1.5s infinite linear;-moz-animation: rotate 1.5s infinite linear;-o-animation: rotate 1.5s infinite linear;animation: rotate 1.5s infinite linear;}

@media screen and (max-width:1200px){
    .maskRights>div{width: 95%;}
}
@media screen and (max-width:630px){
    .banner_box>div .btn{-webkit-justify-content: space-around;justify-content: space-around;}
    .banner_box>div .btn .log_in{margin-bottom: 10px;}
    .photo>ul>div.btn .photoHistory{margin-right: 10px;}
    .photo>ul>div.btn .photoHistory::after{font-size: 12px;}
    .maskRights .close{top: 10px;right: 10px;}
    
    .icon_box{top: 40px;left: 0px;right: 0px;text-align: center;}
    .photo_rights_load{width: auto !important;padding-left: 10px;}
    .photo_rights_load{width: 240px !important;}
    .photo>ul>div.btn span.crop-btn{min-width: 130px;}
}
@media screen and (max-width:360px){
    .canvas{height: calc(100% - 235px);}
}
@media(max-width:340px){
    .canvas{height: calc(100% - 272px);}
    .photo>ul>div.btn{height: auto;}
}
.loadBgImage{height: 0px;width: 0px;opacity: 0;}
.preloadimg{position: fixed;top: -99999px;left: -99999px;}
.uploadBtnBox{
    display: inline-block;
    position: relative;
}
.uploadBtnBox p{
    position: absolute;
    width: 300px;
    height: auto;
    font-size: 12px;
    color: #444444;
    background-color: #fFFFFF;
    padding: 4px 8px;
    box-sizing: border-box;
    top: 40px;
    left: -50%;
    box-shadow: 0px 5px 17px 4px rgb(0 0 0 / 9%);
    z-index: 2;
    border-radius: 4px;
    text-align: left;
    z-index: 2;
    line-height: 16px;
    font-weight: 400;
    font-style: normal;
    display: none;
}
.uploadBtnBox p::before {
    content: "";
    position: absolute;
    height: 5px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #fff;
    top: -10px;
    left: 40%;
    transform: translateX(-50%);
    z-index: 1;
}
.hb_type{position: relative;}
.hb_type .tips{
    position: absolute;
    width: 300px;
    height: auto;
    font-size: 12px;
    color: #444444;
    background-color: #fFFFFF;
    padding: 4px 8px;
    box-sizing: border-box;
    top: 44px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 5px 17px 4px rgb(0 0 0 / 9%);
    z-index: 2;
    border-radius: 4px;
    text-align: left;
    z-index: 2;
    line-height: 16px;
    font-weight: 400;
    font-style: normal;
    /* display: none; */
}
.photo .phone_top,
.photo .phone_bottom{
    display: none;
}
.refinement_bottom div .crop_revoke,
.refinement_bottom div .daub_revoke
{
    display: none;
}
@media(max-width:1200px){
    .banner{
        padding-top: 30px;
    }
    .banner_box h1{
        font-size: 36px;
        line-height: 40px;
    }
    .banner_box .info{
        line-height: 24px;
    }
    .banner_box .rating{
        margin-top: 12px;
        margin-bottom: 12px;
    }
    .banner_box>div .btn{
        margin-top: 30px;
        margin-bottom: 0px;
    }
    .banner_box>#drag-zone{
        padding-bottom: 30px;
    }
    .banner_box>#drag-zone{
        margin-top: 12px;
    }
    #right-operate-box .photo_guide_box .pc{
        display: none;
    }
    #right-operate-box .photo_guide_box .mobile{
        display: block;
    }
    .canvas_box .right.active{
        border-radius: 0px;
    }
    #right-operate-box .photo_guide_box{
        top: unset !important;
        bottom: 50px;
        left: 50% !important;
        transform: translateX(-50%);
        right: unset;
    }
    .photo {
        flex-wrap: wrap !important;
        flex-direction: column;
    }
    #right-operate-box{
        flex: 1;
    }
    .photo .phone_top{
        display: flex;
    }
    .photo .phone_bottom{
        display: block;
    }
    .photo .photo_toggle,.photo .icon_box,.photo .close,.photo>ul>li,.photo>ul>div.btn{
        display: none !important;
    }
    .photo>ul{
        max-width: 100%;
    }
    .photo{
        margin: 0;
        height: 100%;
        top: 0px;
        bottom: 0px;
        border-radius: 0px;
        position: fixed;
        max-width: 100%;
    }
    .photo>div{
        background: #fff;
    }
    .phone_top{
        height: 48px;
        align-items: center;
        padding: 0 14px !important;
        font-size: 0px;
        width: 100% !important;
        box-sizing: border-box;
    }
    .phone_top i,.phone_top .upgrade,.photo_toggle_phone{
        width: 26px;
        height: 26px;
        background: url(/images/watermark-remover-online/icon-top-menu.svg);
        display: inline-block;
    }
    .phone_top i.close{
        margin-right: 8px;
        display: inline-block !important;
    }
    .phone_top i.upload{
        background-position-y: -26px;
    }
    .phone_top i.upload.load{
        background-position-y: -260px;
        animation: rotate 1.5s infinite linear;
    }
    .phone_top .middle{
        align-items: center;
    }
    .phone_top .save{
        min-width: 86px;
        height: 28px;
        padding-left: 8px;
        padding-right: 8px;
        box-sizing: border-box;
        line-height: 28px;
        font-size: 14px;
        color: #fff;
        background: #21A1F2;
        display: inline-block;
        text-align: center;
        border-radius: 4px;
        position: relative;
        font-weight: 600;
    }
    .phone_top .save::before{
        clear: both;
        content: "";
        width: 16px;
        height: 16px;
        background: url(/images/watermark-remover-online/icon-save.svg);
        display: inline-block;
        vertical-align: -3px;
        margin-right: 4px;
    }

    .phone_top .crop{
        background-position-y: -52px;
        margin-left: 8px;
    }
    .phone_top .crop.active{
        background-position-y: -312px;
    }
    .phone_top .upgrade{
        background-position-y: -78px;
    }
    .phone_top .photo_toggle_phone{
        background-position-y: -104px;
        margin-left: 8px;
        position: relative;
    }
    .phone_top .photo_toggle_phone.active{
        background-position-y: -130px;
    }
    .phone_top .photo_toggle_phone.load{
        background-position-y: -260px;
        animation: rotate 1.5s infinite linear;
    }
    .phone_top .photo_toggle_phone.active::after{
        clear: both;
        content: "";
        width: 26px;
        height: 26px;
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: 1;
    }
    .phone_top .photo_toggle_phone.active>div{
        display: block;
    }
    .phone_top .photo_toggle_phone>div{
        position: absolute;
        top: 40px;
        right: -5px;
        border-radius: 10px;
        box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.31);
        background: #fff;
        min-width: 270px;
        padding: 14px;
        box-sizing: border-box;
        z-index: 1;
        display: none;
    }
    .phone_top .photo_toggle_phone>div::before{
        clear: both;
        content: "";
        width: 0px;
        height: 0px;
        border: 12px solid #fff;
        border-color: transparent transparent #fff transparent;
        position: absolute;
        top: -20px;
        right: 11px;
    }
    .phone_top .photo_toggle_phone>div>a,
    .phone_top .photo_toggle_phone>div>span{
        display: block;
        font-size: 14px;
        color: #333;
        padding-top: 7px;
        padding-bottom: 7px;
        text-decoration: none;
    }
    .phone_top .photo_toggle_phone>div>a i,
    .phone_top .photo_toggle_phone>div>span i{
        margin-right: 8px;
    }
    .phone_top .photo_toggle_phone>div>a *,
    .phone_top .photo_toggle_phone>div>span *{
        vertical-align: middle;
    }
    .phone_top .photo_toggle_phone>div>.history i{
        background-position-y: -182px;
    }
    .phone_top .photo_toggle_phone>div>.enhance{
        background: #ECF6FE;
        position: relative;
    }
    .phone_top .photo_toggle_phone>div>.enhance::before,
    .phone_top .photo_toggle_phone>div>.enhance::after{
        clear: both;
        content: "";
        width: 14px;
        height: 100%;
        top: 0px;
        left: -14px;
        position: absolute;
        background: #ECF6FE;
    }
    .phone_top .photo_toggle_phone>div>.enhance::after{
        left: unset;
        right: -14px;
    }
    .phone_top .photo_toggle_phone>div>.enhance i{
        background-position-y: -208px;
    }
    .phone_top .photo_toggle_phone>div>.enhance .enhance_toggle{
        float: right;
        margin-top: 4px;
        margin-right: 0px;
        width: 36px;
        height: 18px;
        background: #B6B6B6;
        border-radius: 36px;
        position: relative;
    }
    .phone_top .photo_toggle_phone>div>.enhance .enhance_toggle::before{
        clear: both;
        content: "";
        width: 14px;
        height: 14px;
        background: #fff;
        border-radius: 50%;
        position: absolute;
        left: 2px;
        top: 2px;
    }
    .phone_top .photo_toggle_phone>div>.enhance .enhance_toggle.load::after{
        opacity: 1;
    }
    .phone_top .photo_toggle_phone>div>.enhance .enhance_toggle::after{clear: both;content: "";position: absolute;top: 0px; right: 42px;width: 18px;height: 18px;background: url(/images/watermark-remover-online/load.svg) no-repeat center center/cover;animation: rotate 1.5s infinite linear;opacity: 0;}
    .phone_top .photo_toggle_phone>div>.enhance .enhance_toggle.no{
        background: #22A1F1;
    }
    .phone_top .photo_toggle_phone>div>.enhance .enhance_toggle.no::before{
        left: 20px;
    }

    .phone_top .photo_toggle_phone>div>.logout{
        display: none;
    }
    .phone_top .photo_toggle_phone>div>.logout i{
        background-position-y: -234px;
    }
    .phone_top .photo_toggle_phone .photo_login_box{
        padding-bottom: 14px;
        border-bottom: 1px solid #EBEBEB;
    }
    .phone_top .photo_toggle_phone .photo_login_box .name{
        text-decoration: none;
        display: block;
    }
    .phone_top .photo_toggle_phone .photo_login_box .name i{
        background-position-y: -156px;
        vertical-align: middle;
        margin-right: 8px;
    }
    .phone_top .photo_toggle_phone .photo_login_box .name span{
        font-size: 14px;
        color: #333;
        vertical-align: middle;
    }
    .phone_top .photo_toggle_phone .photo_login_box .name.log_in span:nth-child(2){
        display: inline-block;
    }
    .phone_top .photo_toggle_phone .photo_login_box .name span:nth-child(2){
        display: none;
    }
    .phone_top .photo_toggle_phone .photo_login_box .name.log_in span:nth-child(3){
        display: none;
    }
    .phone_top .photo_toggle_phone .photo_login_box .name span:nth-child(3){
        display: inline-block;
    }
    .phone_top .photo_toggle_phone .photo_login_box .info{
        font-size: 12px;
        margin-top: 2px;
        line-height: 14px;
        display: none;
    }
    .phone_top .photo_toggle_phone .photo_login_box .info i{
        width: auto;
        height: auto;
        background: none;
        font-style: normal;
    }
    .phone_top .photo_toggle_phone .photo_login_box .info span{
        font-weight: bold;
        color: #21A1F2;
    }
    .phone_top .photo_toggle_phone .photo_login_box .info a{
        color: #21A1F2;
        text-decoration: underline;
    }
    .canvas{
        height: 100% !important;
        position: sticky;
    }
    .canvas_box{
        height: calc(100% - 58px);
    }
    .refinement_bottom{
        padding-top: 16px;
        height: 56px;
    }
    .refinement_bottom div{
        font-size: 0px;
    }
    .refinement_bottom div i{
        margin: 0 6px;
    }
    .refinement_bottom div span{
        font-size: 16px;
    }
    .refinement_bottom div .daub_revoke{
        display: inline-block;
    }
    .refinement_bottom div i.revoke,
    .refinement_bottom div i.norevoke,
    .refinement_bottom div i.operate-revoke,
    .refinement_bottom div i.operate-norevoke
    {
        vertical-align: -3px;
        margin: 0 6px !important;
    }
    .canvas_box .left, .canvas_box .right{
        min-height: auto;
    }
    .phone_bottom{
        width: 100% !important;
        padding: 0px 16px !important;
        height: 90px;
        box-sizing: border-box;
    }
    .phone_bottom .phone_hb_box{
        align-items: center;
        height: 100%;
        display: none;
        flex-direction: column;
        justify-content: center;
    }
    .phone_bottom .phone_hb_box.active{
        display: flex;
    }
    .phone_bottom .phone_hb_box>span{
        min-width: 140px;
        height: 30px;
        line-height: 28px;
        font-size: 12px !important;
        color: #21A1F2 !important;
        border: 1px solid #21A1F2;
        border-radius: 4px;
        background: rgba(33, 161, 242, 0.10);
        padding-left: 8px;
        padding-right: 8px;
        box-sizing: border-box;
        text-align: center;
        position: relative;
        margin-top: 10px;
        font-weight: 600;
    }
    .phone_bottom .phone_hb_box>span i,
    .phone_top .save i,
    .phone_bottom .phone_hb_type .tips{
        position: absolute;
        width: 260px;
        height: auto;
        font-size: 12px;
        color: #444444;
        background: #fFFFFF;
        padding: 8px;
        box-sizing: border-box;
        bottom: calc(100% + 10px);
        left: 50%;
        transform: translateX(-50%);
        box-shadow: 0px 2px 10px 4px rgb(0 0 0 / 20%);
        z-index: 2;
        border-radius: 4px;
        text-align: left;
        z-index: 2;
        line-height: 16px;
        font-weight: 400;
        font-style: normal;
        display: none;
    }
    .phone_bottom .phone_hb_box>span i::before,
    .phone_top .save i::before,
    .phone_bottom .phone_hb_type .tips::before{
        content: "";
        position: absolute;
        width: 0px;
        height: 0px;
        border: 5px solid #fff;
        border-color: #fff transparent transparent transparent;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
    }
    .phone_top .save i{
        top: 35px;
        bottom: unset;
    }
    .phone_top .save i::before{
        bottom: unset;
        top: -10px;
        border-color: transparent transparent #fff transparent;
    }
    .phone_bottom .phone_hb_type .tips{
        bottom: 52px;
    }
    
    .phone_bottom .phone_hb_type div *{
        vertical-align: middle;
    }
    .phone_bottom .phone_hb_type div{
        display: inline-block;
        margin-left: 18px;
    }
    .phone_bottom .phone_hb_type div i{
        width: 24px;
        height: 24px;
        background: url(/images/watermark-remover-online/icon-bottom-brush.svg);
    }
    .phone_bottom .phone_hb_type div.brush.size::after,
    .phone_bottom .phone_hb_type div.eraser.size::after{
        clear: both;
        content: "";
        border: 7px solid #fff;
        border-color: #fff transparent transparent transparent;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: -16px;
        z-index: 1;
    }
    .phone_bottom .phone_hb_type div.eraser.size::after{
        left: calc(50% + 20px);
    }
    .phone_bottom .phone_hb_type div.brush{
        margin-left: 10px;
        position: relative;
    }
    .phone_bottom .phone_hb_type div.brush i{
        background-position-y: -48px;
    }
    .phone_bottom .phone_hb_type div.brush.active i{
        background-position-y: -72px;
    }
    .phone_bottom .phone_hb_type div.lasso i{
        background-position-y: -96px;
    }
    .phone_bottom .phone_hb_type div.lasso.active i{
        background-position-y: -120px;
    }
    .phone_bottom .phone_hb_type div.polygonal i{
        background-position-y: -144px;
    }
    .phone_bottom .phone_hb_type div.polygonal.active i{
        background-position-y: -168px;
    }
    .phone_bottom .phone_hb_type div.eraser i{
        background-position-y: -216px;
    }
    .phone_bottom .phone_hb_type div.eraser.active i{
        background-position-y: -216px;
    }
    .phone_bottom .phone_hb_type div.eraser{
        padding-left: 20px;
        position: relative;
    }
    .phone_bottom .phone_hb_type div.eraser::before{
        clear: both;
        content: "";
        width: 1px;
        height: 14px;
        background: #ddd;
        position: absolute;
        top: 50%;
        left: 0px;
        transform: translateY(-50%);
    }
    .phone_bottom .phone_hb_type div span{
        font-size: 12px;
        font-weight: bold;
        line-height: 20px;
        margin-left: 6px;
        color: #21A1F2;
        display: none;
    }
    .phone_bottom .phone_hb_type div.eraser span{
        color: #FF3939;
    }
    .phone_bottom .phone_hb_type div.active span{
        display: inline-block;
    }
    .phone_bottom .phone_pensize{
        position: absolute;
        bottom: 92px;
        background: #fff;
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
        border-radius: 10px;
        width: calc(100% - 30px);
        left: 50%;
        transform: translateX(-50%);
        padding: 12px 5px 9px;
        max-width: 340px;
    }
    .phone_bottom .phone_pensize>div{
        align-items: center;
    }
    .phone_bottom .phone_pensize i{
        background: url(/images/watermark-remover-online/icon-bottom-brush.svg);
        width: 24px;
        height: 24px;
    }
    .phone_bottom .phone_pensize i:last-child{
        background-position-y: -24px;
    }
    .phone_bottom .phone_pensize_silder{
        flex: 1;
        margin-left: 6px;
        margin-right: 6px;
        background: #999;
        height: 10px;
        border-radius: 10px;
        overflow: hidden;
        position: relative;
    }
    .phone_bottom .phone_pensize_silder i{
        background: #21A1F2;
        width: 30px;
        height: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
    }
    .phone_bottom .phone_crop_box{
        display: none;
        position: relative;
        height: 100%;
        align-items: center;
        justify-content: center;
    }
    .phone_bottom .phone_crop_box.active{
        display: flex;
    }
    .phone_bottom .phone_crop_box .back_reomve{
        position: absolute;
        left: 0px;
        width: 26px;
        height: 26px;
        background: url(/images/watermark-remover-online/icon-top-menu.svg);
        background-position-y: -286px;
        top: 50%;
        transform: translateY(-50%);
    }
    .phone_bottom .phone_aspect_ratio{
        font-size: 14px;
        color: #333;
        line-height: 20px;
    }
    .phone_bottom .phone_aspect_ratio .select_box{
        display: inline-block;
        min-width: 80px;
        height: 26px;
        line-height: 24px;
        border: 1px solid #6C6C6C;
        border-radius: 4px;
        position: relative;
        margin-left: 10px;
        box-sizing: border-box;
    }
    .phone_bottom .phone_aspect_ratio .select_box span{
        font-size: 14px;
        color: #333;
        display: block;
        padding-left: 18px;
        padding-right: 18px;
        position: relative;
    }
    .phone_bottom .phone_aspect_ratio .select_box>span{
        padding-right: 20px;
    }
    .phone_bottom .phone_aspect_ratio .select_box>span::after{
        clear: both;
        content: "";
        width: 0px;
        height: 0px;
        border: 4px solid #333;
        border-color: #333 transparent transparent transparent;
        position: absolute;
        top: 50%;
        right: 10px;
        margin-top: -2px;
    }
    .phone_bottom .phone_aspect_ratio .select_box>div{
        position: absolute;
        bottom: 34px;
        min-width: 64px;
        background: #fff;
        box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.2);
        border-radius: 5px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 51;
        display: none;
    }
    .phone_bottom .phone_aspect_ratio .select_box>div::before{
        clear: both;
        content: "";
        width: 0px;
        height: 0px;
        border: 5px solid #fff;
        border-color: #fff transparent transparent transparent;
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
    }
    .phone_bottom .phone_aspect_ratio .select_box>div span{
        display: block;
        font-size: 14px;
        color: #333;
        line-height: 26px;
        padding-left: 10px;
        box-sizing: border-box;
        white-space: nowrap;
    }
    .phone_bottom .phone_aspect_ratio .select_box>div span.active{
        background: #E9F6FE;
        color: #21A1F2;
        font-weight: bold;
    }
    .phone_bottom .phone_aspect_ratio .select_box>div span:first-child{
        border-radius: 5px 5px 0 0;
    }
    .phone_bottom .phone_aspect_ratio .select_box>div span:last-child{
        border-radius: 0px 0px 5px 5px;
    }
    .photo .revoke:hover,
    .photo .operate-revoke:hover {
        background: url(/images/watermark-remover-online/undo.svg);
    }
    .photo .revoke.active,
    .photo .operate-revoke:active {
        background: url(/images/watermark-remover-online/undo.svg);
    }
    .photo .norevoke:hover,
    .photo .operate-norevoke:hover {
        background: url(/images/watermark-remover-online/redo.svg);
    }
    .photo .norevoke.active,
    .photo .operate-norevoke.active {
        background: url(/images/watermark-remover-online/redo.svg);
    }
}
@media(max-width:500px){
    #right-operate-box .photo_guide_box{
        zoom: .7;
        max-width: 500px;
        width: calc(100% - 24px);
        bottom: 70px;
    }
    #right-operate-box .photo_guide_box dl{
        max-width: 100%;
        margin-left: 0px;
        padding-left: 10px;
        box-sizing: border-box;
        width: calc(100% - 160px);
    }
}
@media(max-width:320px){
    .phone_bottom{padding: 0px 10px !important;}
    .phone_bottom .phone_hb_type div{
        margin-left: 8px;
    }
    .phone_bottom .phone_hb_type div.eraser{
        padding-left: 8px;
    }
}