@charset "utf-8";
html, body {
    margin: 0;
    padding: 0;
}

a {
    cursor: pointer;
    text-decoration: none;
}

.gif_content {
    width: 1200px;
    margin: 0 auto;
}

.gif_tool {
    display: flex;
    margin: 40px 0 35px 0;
}

.gif_tool a {
    width: 165px;
    height: 46px;
    line-height: 45px;
    margin-right: 30px;
    border-radius: 25px;
    text-align: center;
    background: #f0f3f4;
    color: #333;
    font-size: 16px;
}

.issel {
    background: #1593ff !important;
    color: #fff !important;
}

.add_image {
    display: flex;
    justify-content: space-between;
    margin-bottom: 35px;
}

.add_input #J-weblink {
    width: 1036px;
    margin-right: 30px;
    height: 46px;
    border: 1px solid #ccd5db;
    border-radius: 4px;
    line-height: 46px;
    outline: none;
    outline-style: none;
    background: no-repeat;
    padding-left: 30px;
    font-size: 14px;
    color: #2f3c4d;
    padding-right: 150px;
    box-sizing: border-box;
}

.add_input #J-netweburl {
    width: 1036px;
    margin-right: 30px;
    height: 46px;
    border: 1px solid #ccd5db;
    border-radius: 4px;
    line-height: 46px;
    outline: none;
    outline-style: none;
    background: no-repeat;
    padding-left: 30px;
    font-size: 14px;
    color: #2f3c4d;
    padding-right: 150px;
    box-sizing: border-box;
}

.posi_re {
    position: relative;
}

.add_input #J-netweburl::-moz-placeholder {
    font-size: 14px;
    color: #2f3c4d;
}

.add_input #J-netweburl::-ms-input-placeholder {
    font-size: 14px;
    color: #2f3c4d;
}

.add_input #J-netweburl::-webkit-input-placeholder {
    font-size: 14px;
    color: #2f3c4d;
}

.add_input #J-netweburl::placeholder {
    font-size: 14px;
    color: #2f3c4d;
}

.add_btn {
    width: 133px;
    height: 46px;
    line-height: 46px;
    border-radius: 4px;
    background: #1593ff;
    font-size: 15px;
    color: #fff;
    text-align: center;
    cursor: pointer;
}

.add_content_out {
    display: inline-block;
    text-align: center;
    width: 1200px;
}

.add_content {
    border: 5px dashed #ccd5db;
    height: 405px;
    box-sizing: border-box;
    position: relative;
}

.upload_icon {
    margin-bottom: 45px;
    margin-top: 99px;
}

.notice_txt {
    font-size: 18px;
    margin-bottom: 20px;
    color: #2f3c4d;
}

.upload_itemsList {
    display: flex;
}

.notice_member {
    font-size: 16px;
    position: absolute;
    left: 0;
    top: 240px;
    z-index: 1 !important;
    margin: 0 auto;
    width: 100%;
    color: #2f3c4d;
}

.up_input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 395px;
    cursor: pointer;
    opacity: 0;
    font-size: 0;
}

.mem_red {
    color: #ff095f !important;
    cursor: pointer;
}

.compound_content {
    border: 5px dashed #ccd5db;
    box-sizing: border-box;
    position: relative;
    padding: 40px;
    display: none;
}

.compound_left {
    width: 45%;
    padding-right: 40px;
    box-sizing: border-box;
}

.img_box {
    width: 100%;
    padding: 45px 0;
    background: #e3e5e6;
    box-sizing: border-box;
    position: relative;
}

.img_box img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
}

.nitice_img {
    margin-top: 20px;
    font-size: 14px;
    color: #2f3c4d;
}

.nitice_img p {
    margin: 0 0 5px 0;
}

.compound_right {
    width: 55%;
    padding-left: 20px;
    box-sizing: border-box;
}

.compound_right_tab {
    display: flex;
}

.compound_right .compound_right_tab .tab_item {
    width: 110px;
    height: 36px;
    line-height: 36px;
    padding: 0;
    border-radius: 4px;
    font-size: 15px;
    color: #2f3c4d;
    border: 1px solid #ccd5db;
    text-align: center;
    cursor: pointer;
    margin-right: 15px;
}

.effect {
    position: relative;
}

.diamond {
    position: absolute;
    top: -12px;
    right: 2px;
}

.adjust_notice {
    font-size: 15px;
    color: #2f3c4d;
    margin: 25px 0 20px 0;
}

.upload_item_out {
    position: relative;
    margin-right: 10px;
}

.upload_item {
    width: 60px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ccd5db;
    font-size: 15px;
    color: #2f3c4d;
    cursor: move;
    position: relative;
}

.upload_items .upload_item_out .item_title {
    position: absolute;
    top: -15px;
    left: 0;
    width: 60px;
    display: flex;
    line-height: 15px !important;
}

.upload_items {
    display: flex;
    width: 590px;
    padding: 25px 0 0 10px;
    max-height: 225px;
    overflow: auto;
    background: #f0f3f4;
    margin-bottom: 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.upload_items .upload_item_out .item_title .item_num {
    width: 45px;
    background: #ccd5db;
    text-align: center;
    height: 15px;
    line-height: 15px;
    font-size: 14px !important;
}

.upload_items .upload_item_out .item_title .item_del {
    width: 15px;
    background: #e3e5e6;
    text-align: center;
    height: 15px;
    line-height: 15px;
    cursor: pointer;
}

.upload_items .upload_item_out .item_title .item_del:hover {
    background: #1593ff;
    color: #fff;
}

.operate {
    display: flex;
    justify-content: space-between;
    background: #ccd5db;
    visibility: hidden;
}

.copy {
    display: flex;
    justify-content: center;
    width: 50%;
    padding: 3px 0;
    cursor: pointer;
}

.rotate {
    display: flex;
    justify-content: center;
    width: 50%;
    padding: 3px 0;
    cursor: pointer;
}

.upload_item_out:hover .operate {
    visibility: visible;
}

.newthumbnail {
    /* display: none; */
    position: relative;
    width: 60px;
    height: 40px;
    overflow: hidden;
}

.newthumbnail img {
    width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto;
}

.adjust_content .upload_items .noup {
    position: relative;
    margin-right: 10px;
}

.adjust_content .upload_items .noup .item_title {
    position: absolute;
    top: -15px;
    left: 0;
    width: 60px;
    display: flex;
    line-height: 15px !important;
    display: none;
}

.upload_items .noup .item_title .item_num {
    width: 45px;
    background: #ccd5db;
    text-align: center;
    height: 15px;
    line-height: 15px;
    font-size: 14px !important;
}

.adjust_content .upload_items .noup .item_title .item_del {
    width: 15px;
    background: #e3e5e6;
    text-align: center;
    height: 15px;
    line-height: 15px;
    cursor: pointer;
}

.adjust_content .upload_items .noup .item_title .item_del:hover {
    background: #1593ff;
    color: #fff;
}

.upload_items .noup .newthumbnail {
    display: none;
}

.upload_items .noup .operate {
    visibility: hidden;
}

.noup .upload_item {
    cursor: pointer;
}

.vipbg {
    background: #f0f3f4 !important;
}

.adjust_txt, .imgquality_txt {
    font-size: 15px;
    color: #2f3c4d;
    margin-bottom: 10px;
}

.compose, .compose-upload-main {
    position: relative
}

.compose {
    height: 100%;
    min-height: 424px !important;
    padding: 20px;
    margin-bottom: 30px
}

.compose-model2 {
    display: none
}

.compose-speed {
    width: 330px;
    height: 30px;
    margin: 0px !important;
    /* margin: 40px auto 0; */
    text-align: center;
    line-height: 38px
}

.compose-speed-line {
    width: 260px;
    margin: 0 10px
}

.compose-speed .fast, .compose-speed .slow, .compose-speed-line {
    display: inline-block
}

.compose-upload-wrap {
    text-align: center;
    position: relative;
    top: 50%;
    margin-top: 90px
}

.compose-upload-container {
    display: inline-block;
    padding: 35px;
    border: 5px dashed #262626
}

.compose-upload-btn {
    width: 385px;
    height: 60px;
    line-height: 60px;
    color: #fff;
    background: #6418ff;
    -webkit-transition: .2s;
    -o-transition: .2s;
    transition: .2s
}

.compose-upload-main:hover .compose-upload-btn {
    background: #5e12fb
}

.compose-upload-file {
    position: absolute
}

.compose-upload-tip {
    padding-top: 20px;
    font-size: 14px;
    color: #666
}

.compose-preview {
    line-height: 0;
    text-align: center
}

.compose-preview canvas {
    max-width: 100%
}

.factory-btns {
    margin: 60px 0
}

.view-list .info {
    line-height: 27px;
    background: #6418ff;
    text-align: left
}

.view-list .info:after {
    display: block;
    content: '';
    clear: both
}

.view-list .index {
    width: 35px;
    float: left;
    border: none;
    border-radius: 0
}

.view-list .name {
    width: 173px;
    height: 27px;
    padding-left: 8px;
    float: left;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-size: 14px
}

.compose.preview {
    height: auto
}

.compose.preview .compose-model2 {
    display: block
}

.compose.preview .compose-model1 {
    display: none
}

.factory-setting .line {
    height: 5px;
    position: relative;
    background: #ccddff;
}

.factory-setting .progress {
    height: 100%;
    position: absolute;
    background: #1593ff;
    z-index: 1
}

.factory-setting .bar {
    width: 10px;
    height: 10px;
    position: absolute;
    top: -2.5px;
    left: -5px;
    background: #1593ff;
    z-index: 2;
    cursor: move;
    border-radius: 100%;
}

.factory-setting .text {
    padding-top: 15px;
    font-size: 14px;
    color: #999
}

.factory-btns {
    margin-top: 40px;
    overflow: hidden;
    display: none;
    align-items: center;
    justify-content: center;
}

.factory-btns .btn {
    width: 360px;
    height: 50px;
    background: #1593FF;
    border-radius: 5px;
    line-height: 50px;
    cursor: pointer;
    transition: .2s;
    box-sizing: border-box;
    border: none !important;
    text-align: center;
}

.factory-btns .btn.style1 {
    background: #F27767;
    color: #fff !important;
}

.factory-btns .btn.style1:hover {
    border-color: #1E9FFF
}

.factory-btns .btn.style2 {
    background: #1593FF;
    border-radius: 5px;
    margin-left: 50px;
}

.factory-btns .btn.style2:hover {
    background: #1E9FFF
}

.factory-btns .btn.disabled, .factory-btns .btn.disabled:hover {
    border: none;
    background: #666
}

.factory-btns .btn.disabled {
    color: #b9b9b9
}

.timeWrap, .timeWrap div {
    display: flex;
    align-items: center;
    margin-right: 30px;
    font-size: 14px;
    color: #2F3C4D;
}

.timeWrap input {
    background: #f0f3f4;
    padding: 0 10px;
    text-align: center;
    border: none;
    width: 140px;
    height: 40px;
    margin: 0 5px 0 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.imgquality_size {
    display: flex;
    margin-top: 30px;
}

.imgquality {
    width: 155px;
    margin-right: 60px;
}

.J-s {
    display: flex;
    align-items: center;
}

.J-s .qualitySelection {
    display: flex;
    width: 220px;
}

.J-s .qualitySelection .option_item {
    width: 140px;
}

.J-s .qualitySelection .imgquality_txt {
    line-height: 42px;
    margin: 0 10px 0 0;
    font-size: 14px;
    height: 42px;
}

.qualitySelection {
    width: 135px;
    margin-right: 30px;
}

.imgquality_size .imgsize {
    width: 215px;
}

.imgquality .options .option_item, .imgquality .options .isshow .option_item {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background: #f0f3f4;
    text-align: center;
    padding: 0 20px 0 50px;
    box-sizing: border-box;
    font-size: 14px;
    color: #2f3c4d;
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
    cursor: pointer;
}

.qualitySelection .option_item, .imgquality_size .imgsize .options .option_item, .imgquality_size .imgsize .options .isshow_size .option_item {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background: #f0f3f4;
    text-align: center;
    padding: 0 20px 0 25px;
    box-sizing: border-box;
    font-size: 14px;
    color: #2f3c4d;
    display: flex !important;
    justify-content: space-between;
    margin-bottom: 2px;
    cursor: pointer;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.qualitySelection .isshow_size1, .qualitySelection .isshow1, .imgquality .options .isshow, .imgsize .options .isshow_size {
    display: none;
}

.viedeo_time_select_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 636px;
}

#viedeo_time_select {
    width: 530px;
    margin: 0 10px;
}

.J-inp {
    margin-top: 20px;
}

.J-inp div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 330px;
    height: 35px;
}

.J-inp li {
    font-size: 15px;
    color: #2F3C4D;
    margin-bottom: 10px;
}

.J-inp input {
    width: 145px;
    height: 35px;
    background: #f0f3f4;
    text-align: center;
    border: none;
    padding-left: 0px;
    margin-right: 0px;
}

.J-inp i {
    display: block;
    width: 16px;
    height: 16px;
    margin: 0 10px;
}

.J-inp i.sIcon {
    display: none;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABQklEQVQ4T+3SvUoDQRSG4ffoBlEhF+BvIzZCNtgEzMZGUFJshOAdWImVpZ0/92AtiFgKmYjBSnAUggYyKeyNBhsrbYRoRjaFZmOIewFOeebMc+A7I/Q4qVQ2/h5ztkHyYB2g6DjsVy7VS3e7dBdmstmh0TfnDFgCFNAE8hbuhpsfS+Xy+Wvnm19AIpPbEGsPLJKt6UIpaE4uri7YVutakN2qLuz0BVzPD6ZOGq2SnY2u518AI0Yr7w8gVwI7YLRaDgFp/whh1miV6gm4aX8OWEdYAwZBTkP5iF3BEhfsCS05rt6o2+D+OwPX8yvAfK+t9KjdG62CgSGgAYxFBBpGq4kQkPD8B4GpKICFek2r6X+gKwPX8+vBD4wSIvBotGoH3vkPnoDxaIB9NrrYXvkPkPG3xLLZglg/ROAT4dBcqb2g7wtKeXsRUpUQDQAAAABJRU5ErkJggg==") no-repeat;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
}

.J-inp i.kIcon {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABJ0lEQVQ4T+2SvUpDQRBGz+gNooIP4G9jJ+QGm4BubALCLTZC8A2sxMrSzp93sPYZshGDleBaBAy4KdIbDTZW2gjRrNwUGmOM194th2/OLGdGGPCy2WjqJRXsgRTBB0A5CDiqXZjH/rj0FxajaGzyOTgF8oAB2kDRw/V4+zVfrZ499fZ8A6RzhW3x/tgjUd2WKnE4s7ax4judK0EObmxpfyggVDqeOuesyfQGQ6XPgQlnjfoFUKiAH3HWrA/y86ODcFUvAVsIm8Cos2bmbwCla8Bykiag4ayJB/IhMVS6BUwnBLScNbNfAGmlbwXmkwA8NOvWLPwD+hyESjfjC0wiEbhz1nSF967xHkh0POAfnC13V/4JyOld8ex0IDXsFwJvCCfu0hzGuXfp13ARDLxTSwAAAABJRU5ErkJggg==") no-repeat;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
}

.generate_video {
    display: none;
}

.generate_down {
    margin: 30px 0 50px 0;
    display: flex;
    justify-content: center;
}

.compound_btn {
    width: 360px;
    height: 50px;
    line-height: 50px;
    border-radius: 4px;
    background: #1593ff;
    text-align: center;
    color: #fff;
    font-size: 22px;
    margin-right: 50px;
    cursor: pointer;
}

.btn_red {
    background: #f43454 !important;
}

.btn_orange {
    background: #f27767 !important;
}

.down {
    display: none;
}

.video_notice {
    font-size: 14px;
    color: #2f3c4d;
    margin-top: 10px;
}

.strategy {
    margin-top: 30px;
    margin-bottom: 50px;
}

.strategy_title {
    display: flex;
    margin-bottom: 30px;
}

.vitta {
    width: 5px;
    height: 25px;
    line-height: 25px;
    background: #1593ff;
    margin-right: 10px;
}

.strategy_title .title_txt {
    font-size: 18px;
    color: #333;
    line-height: 25px;
}

.strategy_list {
    display: flex;
    flex-wrap: wrap;
}

.strategy_item {
    height: 55px;
    line-height: 55px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 20px;
    box-sizing: border-box;
    text-align: left;
    font-size: 15px;
    color: #333;
    background: #f0f3f4;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
}

._itemdesc {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px;
    background: #f0f3f4;
    display: none;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    color: #333;
}

.strategy_item_out {
    position: relative;
    width: calc((100% - 92px) / 4);
    margin: 0 30px 25px 0;
    cursor: pointer;
}

.strategy_item_out:nth-child(4n) {
    margin-right: 0 !important;
}

.strategy_item_out:hover ._itemdesc {
    display: block;
}


/* pop */

.down_content {
    width: 396px;
    height: 320px;
    background-color: #fff;
    padding: 50px 0;
    box-sizing: border-box;
    position: relative;
}

.free_member, .success_notice {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.free_zuan {
    margin: 4px 10px 0 0;
}

.free_member_txt {
    font-size: 24px;
    color: #333;
}

.close_down, .close_success {
    font-size: 24px;
    position: absolute;
    top: 6px;
    right: 12px;
    color: #c1c1c1;
    cursor: pointer;
}

.free_member_notice {
    text-align: center;
    margin-bottom: 40px;
}

.free_member_notice div:nth-child(1) {
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
}

.free_member_notice div:nth-child(2) {
    font-size: 14px;
    color: #333;
    margin-bottom: 10px;
}

.down_btns {
    display: flex;
    justify-content: center;
}

.down_btn1 {
    width: 120px;
    height: 45px;
    line-height: 45px;
    border-radius: 4px;
    background: #e1e1e1;
    text-align: center;
    color: #333;
    font-size: 18px;
    margin-right: 30px;
    cursor: pointer;
}

.down_btn2 {
    width: 120px;
    height: 45px;
    line-height: 45px;
    border-radius: 4px;
    background: #f23454;
    text-align: center;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}

.success_notice div:nth-child(1) {
    margin: 5px 10px 0 0;
}

.padlr_75 {
    padding: 0 75px;
    margin-bottom: 30px;
}

.padlr_75 a {
    cursor: pointer;
    color: #1593ff !important;
}


/* cut */

.webupload {
    position: absolute;
    top: 10px;
    right: 45px;
    width: 107px;
    height: 30px;
    line-height: 30px;
    border-radius: 25px;
    background: #f27767;
    color: #fff;
    font-size: 14px;
    text-align: center;
    display: flex;
    justify-content: center;
}

.cut_upload_icon img {
    position: relative;
    top: -3px;
    right: 3px;
}

.cut_up_inp {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 30px;
    cursor: pointer;
    opacity: 0;
    font-size: 0;
}

.gif_cut_show {
    border: 5px dashed #ccd5db;
    box-sizing: border-box;
    position: relative;
    padding: 50px 70px 40px 70px;
    margin-bottom: 70px;
}

.cutimg_size {
    display: flex !important;
    justify-content: center !important;
    font-size: 16px !important;
    color: #2f3c4d !important;
}

.cut_after_out {
    display: none;
}

.cut_after {
    display: flex;
}

.cut_after_inp input {
    width: 100px;
    height: 35px;
    line-height: 35px;
    border-radius: 4px;
    box-sizing: border-box;
    outline: none;
    outline-style: none;
    background: #f0f3f4;
    border: 1px solid #f0f3f4;
    text-align: center;
    font-size: 15px;
    color: #2f3c4d;
}

.xing {
    line-height: 35px;
    margin: 0 10px;
}

.cut_original {
    line-height: 35px;
}

.cut_after_label {
    line-height: 35px;
    margin-left: 10px;
}


/* 压缩 */

.gif_compress_show {
    border: 5px dashed #ccd5db;
    box-sizing: border-box;
    position: relative;
    padding: 45px 17px;
}

.compress_txt {
    font-size: 18px;
    color: #2f3c4d;
    margin: 0 0 20px 0;
}

.compress_size {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}

.compress_size_item {
    width: 170px;
    height: 65px;
    border: 1px solid #ccd5dc;
    border-radius: 4px;
    padding: 10px 0;
    box-sizing: border-box;
    text-align: center;
    color: #2f3c4d;
    cursor: pointer;
}

.compress_size_item:hover {
    background: #1593ff !important;
    color: #fff !important;
    border: 1px solid #1593ff !important;
}

.compress_size_item div:nth-child(1) {
    font-size: 18px;
}

.compress_size_item div:nth-child(2) {
    font-size: 14px;
}

.your_sel {
    background: #1593ff !important;
    color: #fff !important;
    border: 1px solid #1593ff !important;
}

.conpress_upload {
    position: relative;
    display: flex;
    justify-content: center;
}

.conpress_upload ._upload_content {
    width: 660px;
    height: 210px;
    background: #fff;
    padding: 35px 0 30px 0;
    text-align: center;
    font-size: 18px;
    color: #2f3c4d;
    box-sizing: border-box;
    position: relative;
}

.compress_inp {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 210px;
    font-size: 0;
    cursor: pointer;
    opacity: 0;
}

.compress_vip {
    position: absolute;
    bottom: 30px;
    text-align: center;
    width: 100%;
    font-size: 16px;
    color: #2f3c4d;
}

.CenterContainer {
    height: auto;
    margin: 0 auto;
    position: relative;
}

.PaddingSpace {
    width: 100%;
}


/* Progress Bar */

@keyframes barberpole {
    from {
        background-position: 0% 0%;
    }
    to {
        background-position: 326px 0%;
    }
}

.CompressProgressBar {
    height: 30px;
    background-size: 350px 100%;
    max-width: 350px;
    transition: width 0.01s ease-in-out;
    animation: barberpole 12s linear infinite;
    border-radius: 100px;
    position: absolute;
    left: 204px;
    /*left:176px;*/
    top: 2px;
    /*left : 206px;top  : 5px;*/
}

.CompressProgressBar.Upload {
    background-image: repeating-linear-gradient(-61deg, #5763b0, #5763b0 7px, #6791DE 7px, #6791DE 18px);
}

.CompressProgressBar.Compressing {
    background-image: repeating-linear-gradient(-61deg, #57b0af, #57b0af 7px, #69E5E3 7px, #69E5E3 18px);
}

.CompressProgressBar.Compressdone {
    background-color: #1076FF;
    border-radius: 100px;
}

.CompressProgressBar.Error {
    background-color: #F43454;
    border-radius: 100px;
}

.custom {
    -webkit-overflow-scrolling: touch;
    top: 150px;
    left: 0;
    margin: 0;
    padding: 0;
    background-color: #fff;
    -webkit-background-clip: content;
    border-radius: 10px !important;
    box-shadow: 1px 1px 50px rgba(0, 0, 0, .3);
}

.custom .layui-layer-title {
    padding: 0 80px 0 20px;
    height: 42px;
    line-height: 42px;
    border-bottom: none;
    font-size: 14px;
    color: #333;
    overflow: hidden;
    background-color: #fff !important;
    border-radius: 10px 10px 0 0 !important;
}

.custom_title {
    font-size: 20px;
    color: #666;
    text-align: center;
    margin-bottom: 40px;
}

.custom_size {
    padding: 0 65px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
}

.custom_size_item {
    width: 105px;
    height: 45px;
    line-height: 45px;
    border-radius: 4px;
    border: 1px solid #979797;
    text-align: center;
    font-size: 26px;
    color: #666;
    margin: 0 35px 20px 0;
    cursor: pointer;
}

.custom_size_item:nth-child(2n) {
    margin-right: 0 !important;
}

.custom_btn_out {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.custom_sub {
    width: 180px;
    height: 42px;
    line-height: 42px;
    border-radius: 4px;
    background: #979797;
    text-align: center;
    color: #fff;
    cursor: pointer;
}

.custom_sub:hover {
    background: #1593ff !important;
    color: #fff !important;
}


/* 视频转gif */

.gif_videogif_show {}

.add_video {
    display: flex;
    justify-content: space-between;
    margin-bottom: 35px;
}

.add_video .add_input #J-linkurl {
    width: 1036px;
    margin-right: 30px;
    height: 46px;
    border: 1px solid #ccd5db;
    border-radius: 4px;
    line-height: 46px;
    outline: none;
    outline-style: none;
    background: no-repeat;
    padding-left: 30px;
    font-size: 14px;
    color: #2f3c4d;
    box-sizing: border-box;
}

.add_video .add_input .webupload .cut_upload_icon img {
    position: relative;
    top: -1px;
}

.show_video_out {
    display: none;
}

.gif_videogif .jigsaw_Title a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 115px;
    height: 36px;
    border-radius: 4px;
    text-align: center;
    background: #fff;
}

.gif_videogif .jigsaw_Title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 1200px;
    margin-bottom: 30px;
}

.gif_videogif .jigsaw_Title a:hover {
    background: #1593ff;
    color: #fff;
}

.gif_videogif .jigsaw_Title a.jigsaw_TitleActive {
    background: #1593ff;
    color: #fff;
}

.gif_content {
    margin-bottom: 50px !important;
}

.show_video {
    width: 1200px;
    /* height: 750px; */
    margin: 0 auto;
    border: 5px dashed #ccd5db;
    box-sizing: border-box;
    position: relative;
    padding: 40px 280px;
}

.video_org {
    display: none;
}

.video-preview video {
    max-width: 100%;
}

.viedeo_set {
    /* margin-top: 25px; */
}

.times {
    display: flex;
    justify-content: space-between;
    margin: 25px 0 30px 0;
}

.starttime, .continue {
    display: flex;
}

.t_label {
    font-size: 14px;
    color: #2f3c4d;
    line-height: 42px;
    margin-right: 10px;
}

.t_time {
    background: #f0f3f4;
    width: 140px;
    height: 42px;
    border-radius: 4px;
    display: flex;
    font-size: 14px;
    color: #2f3c4d;
    padding: 0 8px;
    box-sizing: border-box;
}

.t_time input {
    width: 30px;
    height: 42px;
    line-height: 42px;
    background: none;
    border: 1px solid #f0f3f4;
    box-sizing: border-box;
    outline: none;
    outline-style: none;
    text-align: center;
    font-size: 14px;
    color: #2f3c4d;
}

.t_time div:nth-child(2), .t_time div:nth-child(4) {
    margin: 0 5px;
    line-height: 42px;
    font-weight: 600;
}

.time_notice {
    font-size: 14px;
    color: #2f3c4d;
}

.videosize {
    display: flex;
}

.videosize .imgquality_txt {
    line-height: 42px;
    margin: 0 10px 0 0;
    font-size: 14px;
    height: 42px;
}

.videosize .options .option_item {
    width: 215px;
    height: 42px;
    line-height: 42px;
    background: #f0f3f4;
    text-align: center;
    box-sizing: border-box;
    padding: 0 20px 0 30px;
    font-size: 14px;
    color: #2f3c4d;
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
    cursor: pointer;
}

.videosize .options .isshow_size, .isshow_size1 {
    display: none;
    background: #fff;
}

.com-worker {
    width: 100% !important;
    float: left;
}

.view-list {
    position: relative;
    width: 100%;
    margin-top: 40px;
    margin-bottom: 50px;
}

.view-list ul {
    position: relative;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

.showsize {
    width: 15px;
}

.filelist {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    display: flex;
    flex-wrap: wrap;
}

.filelist li {
    border: 1px #a0d6ff solid;
    box-sizing: border-box;
    width: 32%;
    text-align: center;
    margin: 0 0 1% 1%;
    position: relative;
    /*display:inline;*/
    /*float:left;*/
    overflow: hidden;
    font-size: 12px;
}

.filelist li img {
    max-width: 100%;
    max-height: 100%;
    cursor: pointer;
}

.gallery-img {
    width: 130px;
    height: 120px;
    display: block;
}

.filelist li .nr {
    display: flex;
    justify-content: space-between
}

.filelist li .nr .fl {
    width: 130px;
    margin-bottom: 8px;
}

.filelist li .nr .fl .pic {
    width: 130px;
    margin-bottom: 8px;
}

.filelist li .nr .fl h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 130px;
}

.filelist li .nr .newinfo {
    line-height: 25px;
    text-align: left;
    display: block !important;
    padding: 10px 10px 20px 20px;
}

.mgbt6 {
    margin-bottom: 6px;
}

.lg24 {
    line-height: 24px;
}

.text-c {
    text-align: center;
}

.statusBar {
    height: 63px;
    padding: 0 20px;
    line-height: 63px;
    vertical-align: middle;
    position: relative;
}

.statusBar .info {
    display: inline-block;
    font-size: 14px;
    color: #666666;
    line-height: 25px;
    margin-top: 5px;
}

.statusBar .btns {
    position: absolute;
    top: 10px;
    right: 20px;
    line-height: 40px;
}

#filePicker2 {
    display: inline-block;
    float: right;
    position: relative;
}

.compress_inp {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 210px;
    font-size: 0;
    cursor: pointer;
    opacity: 0;
}

.filelist li p {
    font-size: 12px;
    width: 185px;
}

.colv {
    color: #14c400;
}

.filelist li p a {
    float: left;
    margin-right: 5px;
}

.filelist li .nr .info a.yulan {
    margin-top: 6px;
    margin-left: 10px;
}

.trustLink img {
    margin-top: 8px !important;
}

.compress_inp1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    font-size: 0;
    cursor: pointer;
    opacity: 0;
}

.filelist div.file-panel {
    position: absolute;
    height: 0px;
    background-color: #26c2f1;
    opacity: 0.6;
    width: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 300;
}

.filelist div.file-panel span {
    width: 24px;
    height: 24px;
    display: inline;
    float: right;
    text-indent: -9999px;
    overflow: hidden;
    margin: 5px 1px 1px;
    cursor: pointer;
}

.filelist div.file-panel span.cancel {
    background-position: -48px -24px;
}

#tailorSwiper {
    margin: 0 135px 40px;
}

.layui-carousel[lay-arrow=always] .layui-carousel-arrow {
    left: -130px;
    background: #fff;
    color: #262626;
    box-shadow: 0 0 5px #e1e1e1;
}

.layui-carousel:hover .layui-carousel-arrow[lay-type=add], .layui-carousel[lay-arrow=always] .layui-carousel-arrow[lay-type=add] {
    right: -130px;
    background: #fff;
    color: #262626;
    box-shadow: 0 0 5px #e1e1e1;
}

.gif_compressGifWrap {
    width: 1200px;
}

.gif_compressGif_title {
    font-size: 24px;
    font-weight: bold;
    color: #222222;
    margin: 30px auto;
    text-align: center;
}

.gif_compressGif {
    width: 100%;
    margin-bottom: 30px;
}

.bfsdxx {
    font-size: 14px;
    margin-bottom: 5px;
}

.fast {
    font-size: 14px;
}

.slow {
    font-size: 14px;
}

.kdxzxx {
    width: 215px !important;
}

.hcysxx {
    width: 1200px;
    margin: 0 auto;
}
.footerPositionF{
	position: fixed;
	bottom: 0;
	left: 0;
}