/* banner */
*{
    moz-user-select: -moz-none;
    -moz-user-select: none;
    -o-user-select:none;
    -khtml-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
.header{z-index: 2;}
.header_bg{z-index: 1;}
.banner{background: linear-gradient(45deg,#7dacf4,#79c6ee);padding-top: 70px;padding-bottom: 75px;}
.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;max-width: 240px;width: 100%;height: 50px;line-height: 50px;background: #ff9602;display: 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;}
/* step */
.step{align-items: center;margin-top: 50px;overflow: visible;}
.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;line-height: 30px;}
.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;line-height: 30px;}
.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/watermark-remover-online/slide-down.png) 0 0 no-repeat;}
#faq_section .faq_items:hover .faq_questions{color:#3d81d4;}
#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;font-size: 16px;line-height: 30px;}
#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;}
@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){
    .banner_box h1{font-size: 44px;line-height: 48px;}
    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{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;
    padding-left: 10px;
    padding-right: 10px;
}

.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;margin-top: 10px;}
.photo>ul>div.btn>div:nth-child(2){width: auto;}
.photo>ul>div.btn>div.active{display:-webkit-box;display: -webkit-flex;display: flex;}
.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: 0px;
    max-width: 700px;
    /* margin-left: 120px; */
    margin-left: 188px;
    position: relative;
}

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

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

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

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

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

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

.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: 26px;line-height: 26px;background: #21a1f2;color: #fff;margin-left: 17px;margin-top: 5px;margin-bottom: 20px;border-radius: 4px;font-size: 14px;min-width: 70px;}
#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;
    padding-bottom: 10px;
    box-shadow: 0px 4px 18px 0px rgba(123, 123, 123, 0.39);
    border-radius: 18px;
    background: #FBFBFB 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: -6px;}
.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;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 .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;
}

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

.refinement_bottom div {
    display: inline-block;
    vertical-align: middle;
    line-height: 40px;
}

.refinement_bottom div span{vertical-align: 1px;line-height: 18px;height: 18px;display: inline-block;font-size: 16px;}
.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%;
}

.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;
    float: none;
    line-height: 16px;
    font-size: 14px;
}
.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: 100%;
    /* 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: 150px;
    right: 0px;
    bottom: 10px;
    color: #3A81EA;
    text-decoration: underline;
}
.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;
    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;
    padding-right: 24px;
}
.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:1240px){
    .photo {
        width: auto;
        margin-left: 40px;
        margin-right: 40px;
    }
    .image-loading-box, .load-warning-box{
        width: auto;
        margin-left: 40px;
        margin-right: 40px;
    }
}

@media screen and (max-width:1200px){
    #right-operate-box .photo_guide_box dl{width: 238px;}
    #right-operate-box .photo_guide_box .pc{display: none;}
    #right-operate-box .photo_guide_box .mobile{display: block;}
    #right-operate-box .photo_guide_box.active{background-position: right 180px;}
    .refinement_top .hb_type .line_lasso{display: none !important;}
}
@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) {
    .photo {
        flex-wrap: wrap !important;
        flex-direction: column;
    }
    .photo>div>ul{
        width: 100%;
        max-width: 480px;
        height: 100%;
    }
    .photo>div>ul li{
        float: left;
        width: 25%;
        padding: 21px 0px;
        border-radius: 12px 12px 0 0
    }
    #right-operate-box{
        flex: 1;
        /* height: 83%; */
    }
    .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;
    }

    .photo>ul>div.icon,#right-operate-box>.close,.photo_guide,.photo_upgrade,.photo_login,.photo_toggle,.photo_toggle_box{z-index: 12;}
    .photo>ul>li{background: #fff;position: relative;z-index: 12;}
    .refinement .refinement_top, .bg_crop .refinement_top{text-align: center;box-sizing: border-box;padding: 30px 20px 20px;}
    .hb_type{margin: 10px auto 0px;}
    .refinement_top{margin-left: 0px;}
    .canvas{position: initial;height: calc(100% - 146px);}
    .canvas_box{position: relative;height: calc(100% - 54px);}
    .refinement_bottom{position: static;}
    .refinement_top .text-tailoring{margin-top: 5px;margin-bottom: 5px;}
    .pensize-change-container{top: 80px;}
}

@media screen and (max-width:730px) {
    .canvas{
        height: calc(100% - 150px);
    }
    .photo>ul>li{
        padding-top: 14px;
    }
    .refinement_top .rotate{
        margin-top: 5px;
    }
    .refinement_top{
        max-width: 590px;
    }
    .bg_crop .refinement_top .displayInlineBlock{
        margin-top: 5px;
    }
    .chose-background-img-container {
        vertical-align: -11px;
    }
}
@media screen and (max-width:630px) {
    .banner_box>h1 {
        font-size: 30px;
        line-height: 36px;
    }

    h2 {
        font-size: 26px;
        line-height: 32px;
    }

    .universally_box ul {
        padding: 0px;
    }

    .canvas_box{
        /* flex-wrap: wrap !important; */
    }
    .canvas_box .flex-box {
        min-width: 0;
        min-height: 0;
    }
    .canvas{
        position: static;
    }
    /* .canvas_box{position: static;} */
    .canvas_box div .canvas_platform{position: static;}
    .feedback{max-height: none;}
    .bg_crop .refinement_top .displayInlineBlock {
        margin-top: 5px;
    }
    .photo>ul>div.btn div {
        left: auto;
        right: 50px;
    }
    .button-group{max-width: 270px;width: 90%;}
    .refinement_top{margin-left: 0px;}
    .refinement .refinement_top, .bg_crop .refinement_top{padding-top: 15px;}
    .refinement .refinement_top, .bg_crop .refinement_top{padding-top: 54px !important;}
    .photo>ul>div.icon{left: 5px; top: 10px;}
    #right-operate-box>.close{top: 13px;}
    .photo_guide{top: 10px;}
    .photo_toggle{top: 13px;}
    .pensize-change-container{width: 300px;top: 40px;left: 10px;transform: initial;}
    .refinement_top a.uploadBtn{margin: 10px auto 0px;display: block;}
    .banner_box>div .btn span{width: 90%;}
    .refinement .refinement_top, .bg_crop .refinement_top{padding: 20px;}
    .saveBtn{margin-right: 10px !important;}
    .reloadImg{margin-left: 10px !important;}
    .image-loading-box, .load-warning-box{margin: auto !important;padding-left: 10px;padding-right: 10px;}
    #right-operate-box .photo_guide_box{zoom: .7;left: 50% !important;top: 180% !important;-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);}
    .photo>ul>div.btn .save_guide{zoom: .7;right: 10px !important;bottom: 160% !important;}
    .photo {
     width: 100%;   
     height: 100%;
     margin: 0;
    }
    .canvas_box .right.active{
        border-radius: 0px;
    }
    .image-loading-box, .load-warning-box{
        margin: 0 16px;
    }
    .image-loading-box{max-height: none;}
    #header .menu{
        z-index: 1 !important;
    }
    .photo>ul {
        border-radius: 0 0;
    }
    .photo>div>ul li {
        padding: 15px 0px;
    }
    .photo>div>ul li i{
        margin: auto;
    }
    .photo>ul>li {
        padding-top: 24px;
    }
    .confirm-button-group div {
        width: 100px !important;
    }
    .menu-name{
        display: none;
    }
    .canvas {
        top: 118px;
    }
    .bg_crop .refinement_top .displayInlineBlock{
        margin-top: 0;
    }
    .thumb-img-container{
        left: 0;
        right: 0;
        margin: auto;
        top: 114px;
        width: 100%;
    }
    .thumb-img-container .img-box{
        width: 100%;
        margin: 0;
        padding: 5px;
        box-sizing: border-box;
    }
    .thumb-img-container .img-box .thumb-img-list {
        width: 30%;
        margin: 10px 1% 0 1%;
    }
    .img-bg-menu, .crop-menu{
        display: none;
    }
    .blue-border {
        vertical-align: 0 !important;
    }
    .refinement .refinement_top .revoke, .refinement .refinement_top .norevoke {
        vertical-align: -5px;
    }
    .refinement_top .operate-revoke, .refinement_top .operate-norevoke{
        vertical-align: 3px;
    }
    .refinement_top .transform-revoke, .refinement_top .transform-norevoke{
        vertical-align: -5px;
    }
    .specific-operate{
        margin-top: 20px !important;
    }
    .photo>ul>div.btn div {
        left: auto;
        right: 0px;
    }
    .photo>ul>div.btn span{
        width: 80px;
        font-size: 12px;
    }
    .imageMove .refinement_top span {
        margin-left: 14px;
    }
    .refinement_top .rotate {
        margin-left: 0;
    }
    .rotate-title, .pen-title{
        display: none !important;
    }
    .refinement_top .rotate {
        margin-top: 20px;
    }
    .pensize-change-container{
        margin-top: 60px !important;
        margin-left: 0 !important;
        left: 0px !important;
        width: 100%;
        box-sizing: border-box;
    }
    .pensize-box {
        vertical-align: middle;
    }
    .alert-modal-box {
        width: auto;
        margin: 0 16px;
        left: 0; 
        transform: translate(0, -50%);
        min-width: 300px;
    }
    .alert-modal-box .confirm-button-group{
        width: 80%;
    }
    .pensize-dot{
        width: 12px;
        height: 12px;
        top: -3px;
    }
    .feedback{
        width: auto;
        min-width: 300px;
        margin: 0 16px;
        left: 0;
        transform: translate(0,-50%);
    }
    .alert-modal-box .confirm-icon{
        margin: 40px auto 20px auto;
    }
    .alert-modal-box .confirm-button-group{
        margin-top: 30px;
    }
    .photo>ul>div.btn div{width: auto;position: sticky;}
    .photo>ul>div.btn span{margin: 0 5px;}
    .photo>ul>div.btn>div:nth-child(1){text-align: center;}
    .photo>ul>div.btn>div:nth-child(2) div:last-child{margin-right: 0px;}
    .photo>ul>div.btn>div i.home{margin-left: 10px;}
    .photo>ul>div.btn{padding: 0px;}

    .canvas{position: relative;top: 0px;height: calc(100% - 215px);}
    .refinement_bottom{position: static;}
    .canvas_box{min-height: 280px;position: static;height: calc(100% - 54px);}
    .photo{top: 50%;transform: translateY(-50%);bottom: unset;}
    .photo>ul>div.btn{background: #fff;bottom: 0;}
    /* .photo>ul>div.btn{height: 54px;} */
    .refinement_top{padding-bottom: 10px !important;}
    .photo>ul>li{z-index: 51;}
    .photo>ul>div.icon, #right-operate-box>.close, .photo_guide,.photo_login,.photo_upgrade,.photo_toggle{z-index: 52;}
    .photo_toggle_box{right: unset;z-index: 53;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);}
}
@media screen and (max-width:320px) {
    #right-operate-box .photo_guide_box{zoom: .6;top: 160% !important;}
}
/* 打开权益窗口 */
.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;cursor: pointer;}
.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 .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 */
.photo_login{position: absolute;right: 90px;top: 14px;}
.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;cursor: pointer;}
.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{position: absolute;right: 230px;top: 14px;}
.photo_upgrade.active{right: 135px;}
.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{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;vertical-align: 1.5px;}
.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;}
    
    .photo_upgrade,.photo_login{top: 40px;right: unset !important;}
    .photo_upgrade{left: 50%;-webkit-transform: translateX(-100%);transform: translateX(-100%);}
    .photo_login{left: 55%;}
    .photo_rights_load{width: auto !important;padding-left: 10px;}
    .photo_rights_load{width: 240px !important;}
    .photo>ul>div.btn span.crop-btn{width: 130px;}
    .photo>ul>div.btn .photoHistory{vertical-align: 0px;}
    .photo>ul>div.btn{height: 54px;}
    
    .maskMember{background: #fff;}
    .member>.close{display: none;}
    .maskMember>.close{position: absolute;right: 14px;top: 14px;cursor: pointer;z-index: 2;width: 20px;height: 20px;background: url(/images/watermark-remover-online/close.svg);}
}
@media screen and (max-width:405px){
    .photo>ul>div.btn{
        height: auto;
        padding-bottom: 10px;
    }
    .photo>ul>div.btn span.hollowing{margin-left: 10px;}
    .canvas{
        height: calc(100% - 252px);
    }
}
@media(max-width:360px){
    .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;}


/*go top*/
.back-to { position: fixed; bottom: 40px; right: 10px; z-index: 1; width: 50px; overflow: hidden; zoom: 1; -ie6-position-fixed-delay: 200; }
.back-to .back-top { float: right; display: block; width: 32px; height: 32px; background: url(/style/images/retour-en-haut.png) no-repeat scroll 0 0 transparent; background-size: cover; outline: 0 none; text-indent: -9999em; }