@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot?kikvbn');
    src: url('../fonts/icomoon.eot?kikvbn#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?kikvbn') format('truetype'), url('../fonts/icomoon.woff?kikvbn') format('woff'), url('../fonts/icomoon.svg?kikvbn#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}


/*  此文件用于添加自己引入的icomoon图标
    添加方式：1.在HTML文件里的js代码段里添加 icon='myicon my-xxxxx(你想要添加的图标)'
             2.在此文件添加  .my-xxxxx:before {
                                content: "\xxxx";
                            }
        一一对应即可 */

.myicon {
    display: inline-block;
    font: normal normal normal 14px/1 'icomoon';
    font-family: 'icomoon';
    font-size: inherit;
    /* color: #10aeec; */
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.my-email:before {
    content: "\e90b";
}

.my-home:before {
    content: "\e908";
}

.my-moon:before {
    content: "\e964";
}

.my-ev:before {
    content: "\e920";
}

.my-f:before {
    content: "\e911";
}

.my-mountain:before {
    content: "\e929";
}

.my-flare:before {
    content: "\e92b";
}

.my-iso:before {
    content: "\e92e";
}

.my-foc:before {
    content: "\e927";
}

.my-hdr:before {
    content: "\e92c";
}

.my-awb:before {
    content: "\e977";
}

.my-c:before {
    content: "\e968";
}

.my-python:before {
    content: "\e980";
}

.my-html:before {
    content: "\e96c";
}

.my-css:before {
    content: "\e96e";
}

.my-javascript:before {
    content: "\e982";
}

.my-kotlin:before {
    content: "\e981";
}

.my-android:before {
    content: "\e984";
}

.my-camera2:before {
    content: "\e986";
}

.my-qq:before {
    content: "\e90f";
}

.my-wechat:before {
    content: "\e910";
}

.my-box:before {
    content: "\e990";
}

.my-xiao:before {
    content: "\e993";
}

.my-game:before {
    content: "\e992";
}

.my-gobang:before {
    content: "\e991";
}

.my-rope:before {
    content: "\e995";
}


/* /////////////// */

.my-rocketmodel:before {
    content: "\e98b";
}

.my-envelope:before {
    content: "\e90b";
}

.my-ceremony:before {
    content: "\e997";
}


/* ///////////////////// */

.my-brige:before {
    content: "\e998";
}

.my-panda:before {
    content: "\e92a";
}

.my-tower:before {
    content: "\e999";
}

.my-planemodel:before {
    content: "\e918";
}

.my-map:before {
    content: "\e99d";
}

.my-mound:before {
    content: "\e965";
}

.my-back:before {
    content: "\e99b";
}

.my-takeoff:before {
    content: "\e98d";
}

.my-land:before {
    content: "\e98c";
}

.my-more:before {
    content: "\e99f";
}

.my-my-gametower:before {
    content: "\e9a0";
}


/* ////////////////// */

.boxx {
    height: 45vh;
}

.cn-menu1 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.rect-icon {
    background: #fff;
    display: inline-block !important;
}

.circle-icon {
    background: #f94321;
    display: inline-block !important;
    border-radius: 50%;
}

.icon1 {
    background-position: 0 0;
}

html,
body {
    height: 100%;
}

body {
    position: relative;
    background-color: #e4e4e4;
    color: #fff;
}

.circle {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    margin: 0;
    padding: 0;
    text-align: center;
    color: #fff;
    background-color: #10aeec;
    border-radius: 60px;
    z-index: 1045;
}

.circle:hover {
    background-color: #1085e4;
}

.circle i {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-style: normal;
    font-size: 57px;
    font-family: 'icomoon';
}

.circle i::before {
    content: '\e932';
}

.circle span {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* margin-top: 3px;
    top: -3px; */
    font-size: 17px;
    line-height: 1;
    font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "STHeitiSC-Light", "Microsoft YaHei", Arial, sans-serif;
}