/* 選單2 右懸浮選單 menu-2 start */


#menu-2-rightmenu {
    position: absolute;
    padding: 0;
    margin-top: 140px;
    border: 0;
    right: 0;
    z-index: 99999;
    top: 0;
}

#menu-2-rightmenu {
    /*    第二階選單寬度*/
    --menu-2-list_width: 200px;
    /*第二階選單距離右邊間距*/
    --menu-2-list_margin: -210px;
}

#menu-2-rightmenu ul,
#menu-2-rightmenu li {
    list-style: none;
}

.menu-2-rightmenu-menu {
    position: relative;
}

.menu-2-rightmenu-menu.active {}

.menu-2-rightmenu-menu-item {
    display: block;
    min-width: 50px;
    min-height: 50px;
}

.menu-2-rightmenu-ul {}

.menu-2-rightmenu-list {
    display: none;
    min-width: var(--menu-2-list_width);
    /*    padding: 0 8px 0 0;*/
    top: 0;
    z-index: 9;
    position: absolute;
    margin-left: var(--menu-2-list_margin);
    cursor: pointer;
    box-sizing: border-box;
}

.menu-2-rightmenu-menu:hover .menu-2-rightmenu-list {
    display: block;
}

.svg-triangle polygon {
    fill: #24bbfd;
    stroke: none;
    stroke-width: 0;
}

#menu-2-rightmenu .menu-2-rightmenu-menu:hover > a {
    height: 100%;
}

#menu-2-rightmenu .menu-2-rightmenu-menu:hover > a:before {
    /* content: "";
    background: url("https://fakeimg.pl/10x10/") center left no-repeat;
    background-size: 10px 10px;
    position: absolute;
    width: 10px;
    height: 100%;
    margin-left: -10px;
    z-index: 99; */
}

.menu-2-rightmenu-list li {
    background-color: #fff;
    border-left: 1px solid #24bbfd;
    border-right: 1px solid #24bbfd;
    padding-top: 1.3em;
    padding-bottom: 1.3em;
    padding-left: 1.4em;
}

.menu-2-rightmenu-list li:first-child {
    border-top: 1px solid #24bbfd;
    border-radius: 10px 10px 0 0;
}

.menu-2-rightmenu-list li:last-child {
    border-bottom: 1px solid #24bbfd;
    border-radius: 0 0 10px 10px;
}

/*
.menu-2-rightmenu-list li + li:before {
    content: ' ';
    display: block;
    background: #DCDCDC;
    height: 1px;
    margin-left: 12px;
    margin-right: 12px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
*/
.menu-2-rightmenu-list li + li:not(:last-child)::before {
    content: '';
    display: block;
    position: absolute;
    height: 1px;
    width: 100%;
    background: #c9c9c9;
    bottom: 0;
    left: 0;
}

.menu-2-rightmenu-list .menu-2-rightmenu-item-title {
    width: 100%;
    /*    height: 50px;*/
    text-align: center;
    background-color: #24bbfd;
    padding: 0;
    background: url('https://fakeimg.pl/200x60/') no-repeat center center;
    background-size: cover;
    overflow: hidden;
}

.menu-2-rightmenu-item,
.menu-2-rightmenu-item-type02,
.menu-2-rightmenu-item-initial {
    position: relative;
}

.menu-2-rightmenu-item a,
.menu-2-rightmenu-item-type02 a,
.menu-2-rightmenu-item-initial a {
    text-decoration: none;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.menu-2-rightmenu-item .menu-2-rightmenu-icon,
.menu-2-rightmenu-item-type02 .menu-2-rightmenu-icon,
.menu-2-rightmenu-item-initial .menu-2-rightmenu-icon {
    margin-right: 1em;
}

.menu-2-rightmenu-item span,
.menu-2-rightmenu-item-type02 span,
.menu-2-rightmenu-item-initial span {
    display: block;
    line-height: 1.8em;
    font-family: 'STHeiti', 'microsoft yahei';
}

.menu-2-rightmenu-item span b,
.menu-2-rightmenu-item-type02 span b,
.menu-2-rightmenu-item-initial span b {
    display: block;
    font-weight: bold;
    color: #505050;
    font-size: 14px;
}

.menu-2-rightmenu-item span em,
.menu-2-rightmenu-item-type02 span em,
.menu-2-rightmenu-item-initial span em {
    display: block;
    font-style: normal;
    color: #949494;
    font-size: 92%;
}

.menu-2-rightmenu-list .menu-2-rightmenu-item-initial {
    text-align: center;
    padding: 0;
}

.menu-2-rightmenu-list .menu-2-rightmenu-item-initial span {
    padding-top: 1.3em;
    padding-bottom: 1.3em;
}

.menu-2-rightmenu-item-initial img {
    margin: auto;
}

.menu-2-rightmenu-item:hover,
.menu-2-rightmenu-item-type02:hover {
    background: -webkit-linear-gradient(left, #00aeff, #2ad4ff);
    background: -o-linear-gradient(left, #00aeff, #2ad4ff);
    background: -moz-linear-gradient(left, #00aeff, #2ad4ff);
    background: linear-gradient(left, #00aeff, #2ad4ff);
}

/* .menu-2-rightmenu-item:hover span {} */

.menu-2-rightmenu-item:hover span b {
    color: #fff;
}

.menu-2-rightmenu-item:hover span em {
    /*color: #e1ff00;*/
    color: #fff;
    font-weight: bold;
}

.menu-2-rightmenu-qrcode {
    display: none;
    /*    padding: 0 8px 0 0;*/
    position: absolute;
    top: 0;
    left: -130px;
}

.menu-2-rightmenu-qrcode:after {
    position: absolute;
    content: "";
    /* background: url(data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10px' height='10px' fill='#24bbfd'><path d='M0,0 L0,10 L10,5 L0,0Z' /></svg>) center left; */
    background: url(https://fakeimg.pl/10x10/) no-repeat;
    background-position: 0px 30px;
    background-size: 10px 10px;
    position: absolute;
    width: 10px;
    height: 100%;
    /* margin-top: 50%; */
    margin-left: -0px;
    z-index: 99;
}

.menu-2-rightmenu-item:hover .menu-2-rightmenu-qrcode {
    display: block;
}

.menu-2-rightmenu-qrcode li {
    padding: 0;
    border: none;
    background-color: transparent;
}

.menu-2-rightmenu-qrcode img {
    /*max-width: 119px; max-height: 119px;*/
    width: 119px;
    height: 119px;
    border-radius: 5px;
    border: 2px solid #02b8fd;
    overflow: hidden;
}

.menu-2-rightmenu-item-type02 .photo {
    /*width: 30%;*/
    border-radius: 8px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #32bffd;
}

.menu-2-rightmenu-item-type02 .txt {
    text-align: left;
    width: 55%;
    padding-left: 8%;
}

.menu-2-rightmenu-item-type02 .txt i {
    display: inline-block;
    /*width: 40px;*/
    height: 17px;
}

.menu-2-rightmenu-item-type02:hover .photo {
    border: 2px solid #32bffd;
    box-shadow: 0 0 0 2px #fff;
}

.menu-2-rightmenu-item-type02:hover .txt,
.menu-2-rightmenu-item-type02:hover .txt b,
.menu-2-rightmenu-item-type02:hover .txt em {
    color: #fff;
}

/* menu-2-rightmenu's Icon */
.menu-2-rightmenu-menu i {
    background-repeat: no-repeat;
    display: block;
}

.menu-2-rightmenu-menu-icon {
    width: 80px;
    height: 80px;
    background-repeat: no-repeat;
}

.menu-2-rightmenu-icon {
    width: 28px;
    height: 28px;
    background-color: #27bafe;
    background-repeat: no-repeat;
    border-radius: 100%;
}

.menu-item01 {
    background-image: url('../images/rightmenu/side1.png');
    background-position: right center;
    /*    background-image: url('../images/chats/menu1hover.png');*/
    /*background-size: contain;*/
}

.menu-item02 {
    background-image: url('../images/rightmenu/side2.png');
    /*    background-image: url('../images/chats/menu2hover.png');*/
    background-position: right center;
    /*background-size: contain;*/
}

.menu-item03 {
    background-image: url('../images/rightmenu/side3.png');
    /*    background-image: url('../images/chats/menu3hover.png');*/
    background-position: right center;
    /*background-size: contain;*/
}


.menu-item04 {
    background-image: url('../images/rightmenu/side4.png');
    /*    background-image: url('../images/chats/menu4hover.png');*/
    background-position: right center;
    /*background-size: contain;*/
}

.menu-item05 {
    background-image: url('../images/rightmenu/side5.png');
    /*    background-image: url('../images/chats/menu4hover.png');*/
    background-position: right center;
    /*background-size: contain;*/
}


.menu-2-rightmenu-item:hover .menu-2-rightmenu-icon {
    background: #fff;
}

.menu-2-rightmenu-menu-item:hover .menu-item01,
.menu-item01hover {
    background-image: url('../images/rightmenu/h_side1.png');
    /*background-size: contain;*/
}

.menu-2-rightmenu-menu-item:hover .menu-item02,
.menu-item02hover {
    background-image: url('../images/rightmenu/h_side2.png');
    /*background-size: contain;*/
}

.menu-2-rightmenu-menu-item:hover .menu-item03,
.menu-item03hover {
    background-image: url('../images/rightmenu/h_side3.png');
    /*background-size: contain;*/
}

.menu-2-rightmenu-menu-item:hover .menu-item04,
.menu-item04hover {
    background-image: url('../images/rightmenu/h_side4.png');
    /*background-size: contain;*/
}

.menu-2-rightmenu-menu-item:hover .menu-item05,
.menu-item04hover {
    background-image: url('../images/rightmenu/h_side5.png');
    /*background-size: contain;*/
}

/* 選單2 右懸浮選單 menu-2 End */
@media (max-width: 920px) {

    #menu-2-rightmenu,
    #main .banner .input,
    #main .conts {
        display: none;
    }
}