*, :after, :before {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        html,body{
            font-size: 14px;
            font-family: Arial,sans-serif;
        }
        .logo{
            width: 160px;
            height: 32px;
        }
        .divider{
            width: 1px;
            height: 40px;
            background: #999;
            margin: 0 8px;
            display: inline-block;
            vertical-align: middle;
        }
        .icons{
            display: inline-block;
            vertical-align: middle;
            width: 24px;
            height: 24px;
            margin: 0;
            padding: 0;
            opacity: 0.7;
        }
        .icons.active{
            opacity: 1;
        }
        .icons.gap-r-8{
            margin-right: 1px; /* 8px*/
        }
        label{
            font-size: 14px;
            line-height: 1.2em;
            margin-bottom: 0px;
            color: #666;
        }
        .showText {
            font-size: 14px;
            line-height: 1.2em;
            margin-bottom: 0px;
            color: #666;
        }
        .join-code-number{
            font-size: 20px;
            line-height: 1.2em;/*24 or 26*/
            color: #333;
            font-weight: bold;
            text-decoration: none;
        }
        .top-header-part-wrap{
            text-align: center;
        }
        .top-header-part{
            display: block;
            width: 100%;
            max-width: 926px; /* 866 926*/
            margin-top: 10px; /*margin: 12px  auto*/
            background: #f1f1f1;
            border: 2px solid #087900;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            border-radius: 4px;
        }
        .top-header-part ul{
            font-size: 0;
            padding: 0;
        }
        .top-header-part ul > li{
            font-size: 14px;
            display: inline-block;
            vertical-align: middle;
            padding: 2px 4px; /** 6px 8px**/
        }
        .top-header-part ul > li:first-child{
            padding-left: 16px;
        }
        .top-header-part ul > li:last-child{
            padding-right: 16px;
        }
        .top-header-part ul > li.agent-code label{
            display: block;
        }
        .move-button{
            display: block;
            margin: 0 auto;
            text-decoration: none;
            background: #fff;
            border: 2px solid #666;
            border-radius: 100px;
            height: 20px;
            color: #000;
            line-height: 16px;
            font-weight: bold;
            padding-left: 16px;
            padding-right: 16px;
            position: relative;
            cursor: pointer;
        }
       
        .show-button,
        .hide-button{
           display: block;
            margin: 0 auto;
            text-decoration: none;
            background: #fff;
            border: 2px solid #666;
            border-radius: 100px;
            height: 24px;
            color: #000;
            /* line-height: 24px; */
            font-weight: bold;
            padding-left: 16px;
            padding-right: 16px;
            position: relative;
            cursor: pointer;
            /*vertical-align: middle; */
            line-height:1.5em;
        }
        .show-button{
            margin-top: 14px;
        }
        .show-button:before{
            content: "";
            width: 10px;
            height: 10px;
            display: block;
            position: absolute;
            bottom: 100%;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            transform: translateX(-50%);
            background-image: url("../images/tda_more-arrow.svg");
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            margin-bottom: 4px;
        }
        .end-btn{
            display: inline-block;
            text-decoration: none;
            height: 24px;
            background: #c11312;
            color: #fff;
            border-radius: 100px;
            line-height: 24px;
            font-weight: 500;
            padding-left: 16px;
            padding-right: 16px;
        }
        .end-btn-hover-item:hover {
            background-color:  #CD4241;
        }
        
        @media  (max-width: 926px){/*866 926 */

            .top-header-part .eye label,
            .top-header-part .lock label{
                display: none;
            }
            .top-header-part .eye .icons.gap-r-8,
            .top-header-part .lock .icons.gap-r-8{
                margin-right: 0;
            }
            .top-header-part{
                display: inline-block;
                width: auto;
            }
        }
        @media (max-width: 710px) { /*630 710 730*/
            
            .logo{
                width: 90px;
            }
            label{
                font-size: 11px;
            }
            .join-code-number{
                font-size: 14px;
            }
            .top-header-part ul > li{
                padding-left: 3px;
                padding-right: 3px;
            }
            .top-header-part ul > li:first-child{
                padding-left: 6px;
            }
            .top-header-part ul > li:last-child{
                padding-right: 6px;
            }
            .icons{
                width: 15px;
            }
            .end-btn{
                font-size: 11px;
                padding-left: 6px;
                padding-right: 6px;
            }
            .move-button{
                font-size: 8px;
                padding-left: 2px;
                padding-right: 2px;
            }
        }