html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, 
pre, form, fieldset, table, th, td { margin: 0px; padding: 0px; }
body,html{ font-family:"PingFang SC","Lantinghei SC","Microsoft YaHei","HanHei SC","Helvetica Neue","Open Sans",Arial,"Hiragino Sans GB","微软雅黑",STHeiti,"WenQuanYi Micro Hei",SimSun,sans-serif; font-size:13px; font-weight:normal;  background:#f9f9f9;  color:#333; }
a, a:visited { transition: all 0.2s ease-out 0s; color:#333; text-decoration: none; }
a:hover, a:active { color:#09F; }
img{ font-size:0px; border:none; }
ul{ list-style:none;}

.w880px{width: 880px; margin: 0 auto;}
.w1180px{ width:1180px; margin:0 auto;}
.clearfloat {clear:both;height:0px;font-size:1px;line-height: 0px;}
.space_h{clear:both; height:10px; font-size:1px;line-height: 10px;}
.gg300x250{ padding:20px 0px;}
.gg1180{overflow:hidden;text-align:center; padding-top:20px;}
.gg_wap{display:none;}
.fleft{ float:left;}
.fright{ float:right;}
.mr10{ margin-right:10px;}
.pb20{padding-bottom:20px;}
.pb30{padding-bottom:30px;}
.pt20{ padding-top:20px;}
.pt30{ padding-top:30px;}
.pt130{ padding-top:130px;}
.pt150{ padding-top:150px;}
.br5 img{border-radius: 5px;}
.br5 a:hover img{  -webkit-filter: grayscale(20%);  filter: grayscale(20%);}
.b0_1180x90 img{border-radius: 3px; height: 90px; margin-bottom: 15px; }
.b0_1180x90 img:hover{  -webkit-filter: grayscale(20%);  filter: grayscale(20%);}
.line{ background:#e5e5e5; border-bottom:1px solid #fff; height:1px; clear:both;} 
.hidden{ display:none;}
.th3{  border-bottom: 1px solid #09F;  display: inline-block;  font-size: 16px; margin-right: 60px;  padding: 0 5px;}
.more{ float:right; width:50px; text-align:right; }
.allt{ border-bottom: 1px solid #E5E5E5;  height: 35px; line-height: 35px;}
.a_content a.show_but,a.show_but{margin: 10px auto; background:#09F; color:#fff; display:block; height:40px; width:150px;  border-radius: 3px; text-align:center; line-height:40px; font-size:14px; font-weight:bold;}
.a_content .show_but:hover,.show_but:hover{ background:#007acc; text-decoration:none;}


.c2_280x154 {margin-left: -19px; display: flex; margin-bottom: 20px;}
.c2_280x154 li{ margin-left: 19px;}
.c2_280x154 img{border-radius: 10px;}
.c2_280x154 img:hover{  -webkit-filter: grayscale(20%);  filter: grayscale(20%);}

.li_icon li{line-height:29px; height:29px; overflow:hidden; background:url(../statics/images/li_icon.gif) 4px 13px no-repeat; text-indent:15px;}
.top_icon{ background:url(../statics/images/top_icon.gif) left 6px no-repeat; }
.top_icon li{line-height:29px; height:29px; overflow:hidden; text-indent:28px;}

.code{ width:16px; height:16px; display:inline-block; position:relative; cursor:pointer; background: url(../statics/images/code_icon.png) no-repeat;}
.code span{ display:none;}
.code:hover span{ display:block; position:absolute; top:-70px; left:15px; z-index:999; }
.head .search{ width:200px; float:right;position:relative; padding-top:10px;}
.head .search span{ background:#fff; height:26px; border-radius: 60px; line-height:26px; display:block; width:200px; padding:0 0 2px 8px; *padding:2px 0 0 5px; }
.head .search .stxt{ outline: 0px; background:none;border:none;width:165px;}
.head .search .sbut{ background: url(../statics/images/search_icon.gif) 0px 2px no-repeat; border:none; cursor:pointer; width:15px;}
.head .search .sbut:hover{background: url(../statics/images/search_icon.gif) 0px -34px no-repeat;}

.head .search:hover .choose { display: block;}
.head .search .choose dt{ font-size:12px; padding-bottom:5px;color:#999;}
.head .search .choose { background:#fff; border:2px solid #2F3847;border-radius: 3px;  position: absolute; left: 0px;  top:38px; line-height:20px; width: 260px; font-size:12px; padding: 10px; display: none; }
.head .search .select dd{ height:32px; }
.head .search .select label {  cursor:pointer;  }
.head .search .select label:hover{ color:#09F; }
.head .search .select li{ float:left; }
.head .search  .hotso{ clear:both; }
.head .search  .hotso a{display: inline-block; margin-top:5px;  border-radius: 3px;  border: 1px solid #ccc;  padding:0px 5px; height:22px; line-height:22px; margin-right:5px; }
.head .search  .hotso a:hover{border: 1px solid #09F;}

.head .search .tooltip {
        position: absolute;
        display: none;  
        padding: 20px;
        border-radius: 8px; 
        z-index: 999;
        background:#fff;  
        left: 0;
        top:38px;
        box-shadow: 0 8px 32px 2px #00000014, 0 0 1px #0003;
        width:300px;
      }
      
.head .search:hover .tooltip {
        display: block;
      }
.head .search .tooltip .tip-title{ font-size: 14px; color: #999;}
.head .search .tooltip .tip-tag {padding:10px 0;}
.head .search .tooltip .tip-tag a{    display: inline-block;
          font-size: 14px;
          padding: 5px 8px;
          vertical-align: middle;
          margin-bottom: 8px;
          margin-top: 3px;
          border-radius: 8px;
          background: #f3f3f3;
          margin-right: 5px;
          line-height: 20px;
      }
.head .search .tooltip .tip-tag a:hover {   
          color: #09F;
         }
      


.special-word{ padding: 15px 4.5%;}
.special-word h4{    font-size: 16px;    color: #888;    font-weight: normal;    margin-bottom: 16px;}
.special-word a{ display: inline-block;  padding: 0 16px; background: #f3f3f3; margin: 0 5px 10px 0;  line-height:2.8;  color: #3498db;border-radius: 3px; font-size: 13px;}
.special-word a:hover{color:#555; }


.review_tip{font-size: 16px;    color: #888;    text-align: center;    padding: 20px;    border-top: 1px solid #f3f3f3;    border-bottom: 1px solid #f3f3f3;    margin: 15px 4.5%;} 
.review_tip a{    padding: 1px 4px;    border: 1px solid #09f;    color: #09f;    border-radius: 3px;    margin-left: 5px;    font-size: 14px;}
.review_tip .m_qq{ display: none;}

/*新增*/

.head{ background:#2F3847; font-size:14px; position: fixed; left: 0;  position: fixed;  top: 0;  width: 100%;  z-index: 6; height: 50px;}
.head .logo img{ width:136px; float:left;padding-top:10px; }
.head .quick{float:right;  width:400px;}
.head .quick .search, .head .quick .login_link{display:inline-block; vertical-align: middle;}
.head .quick .login_link{ margin-right:20px; }
.pc_tip{display:none;}
.mnav{ display:none;}

.tag_title{padding: 20px;line-height: 36px; background: #fff; margin: 20px 0;  border-radius: 5px; box-shadow: 0 1px 2px rgb(0 0 0 / 10%);}
.tag_title h2{font-size: 30px;}
.tag_title p{ font-size: 14px; color: #999;}

/*新增*/

/*快捷导航*/
.fastnav_box{ position: absolute; display: none;width:270px; padding:20px;top: 50px;right: 0; background:#fff; border-radius: 3px; box-shadow: 0 0 60px rgba(34,34,34,0.25);}
.fastnav,.fastnav_link{position: absolute; width: 120px; cursor: pointer;right: 0; height:50px;  display: block; }
.fastnav:hover .fastnav_box{ display: block; }
.fastnav_a li a>i{color:#09f;margin-right:2px; font-size:24px;}
.fastnav_a li{ display:inline-block; *float:left; *width:86px; text-align:center; font-size:14px; }
.fastnav_a li a{ display:block; padding:10px 15px; margin-bottom:5px; border-radius: 3px;}
.fastnav_a li a:hover{ background:#09f; color:#fff;}
.fastnav_a li a:hover>i{ color:#fff;}
.fastnav_a li span{ display:block; margin-top:3px;}
.fastnav_a { *display:inline-block;}
.fastnav_b{padding: 15px 0; border-top: 1px solid #eee;margin-top:10px; }

/*快捷导航 end*/

/*二级菜单*/
.subbar{ position:relative;}
.subnav{  background-color: #FFF;    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); z-index:3;    height: 40px;    padding: 10px 0;  position: fixed; left: 0;  position: fixed;  top:50px;  width: 100%;  }
.subbar h2{color: #999999;  font-size: 20px;font-weight: normal;   height: 50px;   line-height: 40px;   overflow: hidden;   width: 75px;}
.subbar ul, .subbar ol {   height: 40px;   margin-right: 20px;   }
.subbar li {margin-right:10px; font-size: 13px;}
.subbar h2, .subbar ul, .subbar ol, .subbar li, .subbar li a { float: left;}
.subbar li a {color: #535353; display: block;   height: 38px; line-height: 39px; overflow: hidden; padding: 0 20px;  position: relative;}
.subbar li a.hover,.subbar li a:hover{background-color:#F2F2F2;border-radius: 3px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11) inset; transition: background-color 0.3s ease 0s;}
/*二级菜单*/

.subtag{ margin-bottom: 20px; margin-top: -10px; font-size:14px;}
.subtag .tn{color: #999;}
.subtag a{margin-right:6px; transition: box-shadow 0.3s ease 0s; padding:6px;    display: inline-block;   margin-bottom: 5px; }
.subtag a:hover{background: #fff;  border-radius:3px; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);}

/*菜单*/
.yy-icon { display: inline-block; overflow: hidden;  background:url(../statics/images/yy-icon.png) no-repeat; }
.yy-view { width: 18px; height: 20px; background-position: -281px -252px; }
.yy-time { width: 20px; height: 20px; background-position: -143px -252px; }
.yy-comment { width: 16px; height: 20px; background-position: -142px -322px; }
.yy-down { width: 16px; height: 20px; background-position: -85px -69px; }
.yy-tup { width: 9px; height: 4px; background-position: -185px -717px; }
.yy-gt { width: 40px; height: 40px; background-position: -90px -100px; }

.head .menu{ margin-left:160px; margin-right:250px;}
.head .menu li.hover a{ background:#445268;  color:#fff;  }

#hnav { width: auto; height: 50px; float: left; margin-left: 20px; }
#hnav li { width: auto; height: 50px; float: left; }
#hnav li a { padding: 0px 25px;  line-height: 50px; display: block; color:#ddd; font-size: 14px; transition: background-color 0.3s ease 0s; }
#hnav li a:hover { background-color:#3e495d; color: rgb(255, 255, 255); }
#hnav li.hnavmore{ position: relative;  }
#hnav li.hnavmore .yy-tup { transition: transform 0.3s ease 0s; }
#hnav li.hnavmore a span { left: 8px; top: -2px; position: relative; }
#hnav li.hnavmore ul { position: absolute; height: auto; +width:100px; background:#384254; display: none; }
#hnav li.hnavmore li { height: 34px; float: left; width: 100%; }
#hnav li.hnavmore li a { height: 34px; line-height: 34px; font-size: 13px; padding: 0px; text-align: center; }
#hnav li.hnavmore:hover span { transform: rotate(180deg); }
#hnav li.hnavmore:hover a { background-color:#384254; }
#hnav li.hnavmore li a:hover { color:#fff; background:#0099FF; }
#hnav li.hnavmore:hover ul { display: block; }
#hnav li a.active { background-color:#445268; color: #F1F1F1;}

#hnav .mark{ position:relative;}
/*#hnav em{ display:block; width:38px; height:14px; background:url(http://www.sucaijishi.com/uploadfile/2013/0513/20130513035821524.gif) no-repeat; top:19px; right:-16px; position:absolute; }*/
#hnav em{display: block; width: 38px;  height: 14px;  background: url(https://www.sucaijishi.com/uploadfile/2015/0723/20150723102257362.gif) no-repeat;  top: 18px;  right: -16px;  position: absolute;}
#hnav .hbox{min-width: 460px; padding:10px !important; box-sizing:content-box;}
#hnav .hbox li{height: 34px!important; width: 72px !important; padding: 4px 10px!important; box-sizing:content-box;}
#hnav .hbox li a{ height: 28px!important; line-height: 28px!important;   text-align: center;  padding: 3px 10px!important;  border-radius: 3px;}

        
.tool-box{ border-radius: 10px;
    background: #fff;
    box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 2%);
    padding: 3%;
    margin-top: 100px;}
        
.topbar {  display: none;}         
         @media screen and (max-width: 760px) {
            
 .w1180px, .w880px { width: 100%;font-size: 1em;}
.tool-box{ margin: 0;   padding-top: 100px; box-sizing: border-box;}
 .head {  display: none;}

.mnav{ display:block; background:#fff; height:66px; position: fixed; z-index:999; width: 100%; }
.mobile-menu{ display:block;position:absolute; left:0; top:0; width:66px; height:66px;background: url(../statics/images/icon-menu.svg) no-repeat center center;z-index:1;}
.topnav-mask{position: fixed; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); transition:.5s;opacity: 0; display:none;}
.topnav{ padding-top:66px; display:block; position:fixed; width:40%; background-color:#fff; height:100%; transition:.5s;-webkit-transform: translateX(-100%);transform: translateX(-100%);}
.topnav a{display:block;padding: 0.6rem 3rem;font-size: 1.2rem;line-height:2.6;letter-spacing: 0;text-transform: none;font-weight: 400;color: #333; }
.topnav a:hover,a.active{ background:#09F; color:#fff;}
.showNav .topnav-mask{ display:block; opacity: 1;}
.showNav .topnav{ -webkit-transform: translateX(0); transform: translateX(0);}
.showNav .mobile-menu{background: url(../statics/images/icon-close.svg) no-repeat center center;}
.mlogo{text-align: center;float: none;margin: 0 auto; height:100%;}
.msub{ display:block; width: 100%;  height: auto;  background:#fff; border-top:1px solid #f8f8f8; border-bottom:1px solid #eee;  }
.msub { width: 100%;  height: 50px;}
.msub li { width: 20%;font-size:1.2em;  height: 50px; line-height: 50px;  float: left;  text-align: center;  color: #656565;  box-sizing: border-box;  -webkit-box-sizing: border-box;}
.msub a.hover{ color:#09f;}
.mlogo a img{ width:140px; margin-top:20px;}

.masonry{column-count: 2; padding: 5px;}
.item em{ font-size:13px;}
/*手机端菜单 end*/

.seach_tab{  white-space: nowrap;  overflow-y: hidden;  overflow-x: auto;  width: 100%;  padding-top:5%;     padding-bottom: 0;  }	
/*手机搜索*/
.mobile-search{ display:block;position:absolute; right:0; top:0; width:66px; height:66px;background: url(../statics/images/ms_icon.svg) no-repeat center center;z-index:999;}
.sbar-mask{position: fixed; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); transition:.5s;opacity: 0; display:none;}
.sbox{ display:block; position:fixed;  background-color:#fff; width:100%; transition:.5s;-webkit-transform: translateY(-100%);transform: translateY(-100%); z-index:2;}
.showsbox .sbar-mask{ display:block; opacity: 1;}
.showsbox .sbox{ -webkit-transform: translateX(0); transform: translateX(0);}
.showsbox .mobile-search{background: url(../statics/images/icon-close.svg) no-repeat center center;}
.sbox{ text-align:center;}
.sbox_a{ font-size:1.6em; line-height:4em;}
.sbox_b,.sbox_c{padding: 0 10%;}
.sbox_b .stxt{ padding: 0 4%; width: 92%; border-radius: 0.3em;  line-height:3em; font-size: 1.3em; border: 1px solid #ddd;}
.sbox_c .sbut{ width: 100%;  background: #09F;   border: 1px solid #09F;   line-height: 3em; margin:6% 0; color:#fff;  font-size: 1.3em;  border-radius: 0.3em;}
.seachtab{ display:none;}
.sbox input[type="button"], input[type="submit"], input[type="reset"] {-webkit-appearance: none;}
.sbox textarea { -webkit-appearance: none;}
/*手机搜索end*/
} 



        .tool-box{ border-radius: 10px;
    background: #fff;
    box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 2%);
    padding: 3%;
    margin-top: 100px;}
        

        h1 {
            text-align: center;
            color: #1a73e8;
            margin: 30px;
        }

        .main-content {
            display: flex;
            gap: 30px;
            flex-wrap: wrap;
        }

        .cropper-container {
            flex: 2;
            min-width: 300px;
        }

        .controls-preview-container {
            flex: 1;
            min-width: 250px;
        }
        
        #image-to-crop {
            display: block;
            max-width: 100%;
        }

        .cropper-wrapper {
            border: 2px dashed #ccc;
            border-radius: 4px;
            overflow: hidden;
            height: 400px;
            background-color: #f8f9fa;
        }

        .controls, .preview-section {
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        
        .control-group {
            margin-bottom: 15px;
        }

        .control-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
        }

        .control-group input[type="number"],
        .control-group input[type="file"],
        .control-group select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
            background-color: #fff;
        }

        .control-group input[type="range"] {
            width: 100%;
            padding: 0;
            box-sizing: border-box;
        }
        
        .file-input-wrapper {
            margin-bottom: 20px;
        }

        #upload-image-label {
            display: inline-block;
            padding:20px;
            background-color: #1a73e8;
            color: white;
            font-size: 16px;
            font-weight: bold;
            border-radius: 4px;
            cursor: pointer;
            text-align: center;
            transition: background-color 0.3s;
        }
        
        #upload-image-label:hover {
            background-color: #155ab6;
        }

        #upload-image {
            display: none;
        }

        #download-btn {
            width: 100%;
            padding: 12px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
            transition: background-color 0.3s;
            margin-top: 10px;
        }

        #download-btn:hover {
            background-color: #218838;
        }
        
        #download-btn:disabled {
            background-color: #aaa;
            cursor: not-allowed;
        }

        h3 {
            margin-top: 0;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
            color: #333;
        }

        .preview {
            width: 100%;
            height: 200px; 
            overflow: hidden;
            border: 1px solid #ddd;
            border-radius: 4px;
            background-color: #fff;
        }

        @media (max-width: 768px) {
            .main-content {
                flex-direction: column;
            }
            
            .tool-box{ margin: 0;   padding-top: 100px; box-sizing: border-box;}
        }