@CHARSET "UTF-8";
html {
    margin: 0;
    padding: 0;
    border: 0;
}

body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
p,
blockquote,
pre,
a,
address,
code,
b,
em,
img,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
footer,
header,
hgroup,
nav,
section {
    margin: 0;
    padding: 0;
    border: 0;
}

body {
    background: #fff;
    color: #333;
    position: relative;
    font: 12px/1.5 Microsoft YaHei, arial, 宋体, sans-serif;
    vertical-align: baseline;
    width: 100%;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    outline: none;
    color: #333;
}

a:hover,
a:active,
a:focus {
    color: #187fc4;
    text-decoration: none;
    outline: none;
}

input {
    padding: 0;
    margin: 0;
    font-family: 'Microsoft YaHei';
}

img {
    border: none;
    background: none;
    vertical-align: middle;
}

ul,
ol,
li {
    list-style-type: none;
}

select,
input,
img,
select {
    vertical-align: middle;
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

table,
th,
td {
    vertical-align: middle
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden;
}

.clearfix {
    zoom: 1
}

.clearboth {
    height: 0px;
    line-height: 0px;
    overflow: hidden;
    clear: both;
    font-size: 0px;
}

hr {
    border: 0;
    border-top: 1px solid #ccc;
    height: 0;
}

.main_con {
    /* width: 100%; */
    /* max-width: 1880px; */
    float: right;
    position: relative;
    overflow: hidden;
    background: #fff;
    width: calc(100% - 24px);
}

@media (max-width: 992px) {
    .main_con {
        float: none;
        width: 100%;
    }
}


/*样式*/

.web {
    width: 100%;
    max-width: 1920px
}

.black_con {
    /* overflow-x: hidden; */
    background: #000000;
    position: fixed;
    top: 0%;
    /* max-width: 40px; */
    left: 0px;
    height: 100vh;
    width: 24px;
    z-index: 111;
    /* float: left; */
}

.so {
    position: absolute;
    z-index: 99999;
    top: 50%;
    transform: translateY(-50%);
}

.so img {
    text-align: center;
}

.so_ll {
    margin-top: 40px;
    display: block
}

.so_ll li {
    margin-bottom: 40px;
    width: 25px;
    height: 25px;
    position:relative;
}

.so_ll li .erxxxx{position:absolute;left: 24px;top:0;display: none;}

.so_ll li .img1 {
    display: block
}

.so_ll li .img2 {
    display: none
}

.so_ll li:hover .img2 {
    display: block
}

.so_ll li:hover .img1 {
    display: none
}

.wt_t {
    max-width: 1560px;
    margin: 0 auto;
    width: 92%;
}

.tong {
    max-width: 1600px;
    margin: 0 auto;
    width: 96%;
}

p {
    margin: 0;
}

.nc2 .coveredx {
    position: relative
}

.nc2 .handle {
    position: absolute;
    width: 87px;
    height: 87px;
    margin-left: -43.5px;
    margin-top: -43.5px;
    border-radius: 50%;
    text-align: center;
    background: url(../images/yuan.png) no-repeat 50%;
}

.nc2 .handle span {
    display: inline-block;
    margin: 15px 1px 0;
    color: #000;
    -webkit-transition: .1s ease-out;
    -moz-transition: .1s ease-out;
    -ms-transition: .1s ease-out;
    -o-transition: .1s ease-out;
    transition: .1s ease-out
}

.nc2 .handle.vertical {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg)
}

/*.handle:hover {*/
    /*background-color: #555*/
/*}*/

.nc2 .handle:hover span {
    color: #fff
}

.nc2 .draggable {
    /*background-color: #555;*/
    cursor: move
}

.nc2 .draggable span {
    margin: 15px 4px 0;
    color: #fff;
    -webkit-transition: .1s ease-out;
    -moz-transition: .1s ease-out;
    -ms-transition: .1s ease-out;
    -o-transition: .1s ease-out;
    transition: .1s ease-out
}


@media(max-width:560px){
    .nc2 .handle {
        width: 40px;
        height: 40px;
        margin-left: -20px;
        margin-top: -20px;
        background-size: 100%;
    }
}


/*8*/


.nc13-1 .coveredx1 {
    position: relative
}

.nc13-1 .handle {
    position: absolute;
    width: 65px;
    height: 65px;
    margin-left: -32.5px;
    margin-top: -32.5px;
    border-radius: 50%;
    text-align: center;
    background: url(../images/tuo.png) no-repeat 50%;
}

.nc13-1 .handle span {
    display: inline-block;
    margin: 15px 1px 0;
    color: #000;
    -webkit-transition: .1s ease-out;
    -moz-transition: .1s ease-out;
    -ms-transition: .1s ease-out;
    -o-transition: .1s ease-out;
    transition: .1s ease-out
}

.nc13-1 .handle.vertical {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg)
}

/*.handle:hover {*/
/*background-color: #555*/
/*}*/

.nc13-1 .handle:hover span {
    color: #fff
}

.nc13-1 .draggable {
    /*background-color: #555;*/
    cursor: move
}

.nc13-1 .draggable span {
    margin: 15px 4px 0;
    color: #fff;
    -webkit-transition: .1s ease-out;
    -moz-transition: .1s ease-out;
    -ms-transition: .1s ease-out;
    -o-transition: .1s ease-out;
    transition: .1s ease-out
}


@media(max-width:560px){
    .nc13-1 .handle {
        width: 40px;
        height: 40px;
        margin-left: -20px;
        margin-top: -20px;
        background-size: 100%;
    }
}

/*10*/

.nc13-2 .coveredx2 {
    position: relative;
}

.nc13-2 .handle {
    position: absolute;
    width: 65px;
    height: 65px;
    margin-left: -32.5px;
    margin-top: -32.5px;
    border-radius: 50%;
    text-align: center;
    background: url(../images/tuo.png) no-repeat 50%;
}

.nc13-2 .handle span {
    display: inline-block;
    margin: 15px 1px 0;
    color: #000;
    -webkit-transition: .1s ease-out;
    -moz-transition: .1s ease-out;
    -ms-transition: .1s ease-out;
    -o-transition: .1s ease-out;
    transition: .1s ease-out
}

.nc13-2 .handle.vertical {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg)
}

/*.handle:hover {*/
/*background-color: #555*/
/*}*/

.nc13-2 .handle:hover span {
    color: #fff
}

.nc13-2 .draggable {
    /*background-color: #555;*/
    cursor: move
}

.nc13-2 .draggable span {
    margin: 15px 4px 0;
    color: #fff;
    -webkit-transition: .1s ease-out;
    -moz-transition: .1s ease-out;
    -ms-transition: .1s ease-out;
    -o-transition: .1s ease-out;
    transition: .1s ease-out
}


@media(max-width:560px){
    .nc13-2 .handle {
        width: 40px;
        height: 40px;
        margin-left: -20px;
        margin-top: -20px;
        background-size: 100%;
    }
}
