machete/www/css/tajian.css

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}
body{position:relative;font-family:"Roboto","Arial",sans-serif;background-color:#FFF;color:#000;font-size:14px;line-height:1.428571429}
html{scroll-behavior:smooth}
ul,li{list-style:none;margin:0;padding:0}
img,span,em,a{display:inline-block;max-width:100%}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
a{color:#464c5c}
.clearfix{zoom:1}
.clearfix:after{content:'.';display:block;visibility:hidden;clear:both;overflow:hidden;height:0px}
.img-responsive{max-width:100%;display:block}
.elementBlock{display:block !important}
.elementNone{display:none !important}
.elementhidden{visibility:hidden !important}
.verMiddle{vertical-align:middle !important}
.verBottom{vertical-align:bottom !important}
.verTop{vertical-align:top !important}
.verBaseline{vertical-align:baseline !important}
.vercenter{text-align:center !important}
.verright{text-align:right !important}
.verbold{font-weight:bold !important}
.opacityshow{opacity:1 !important}
a:hover{text-decoration:none;color:darkblue}
a:active{text-decoration:none}
a:visited{text-decoration:none}
a:link{text-decoration:none}
.breadcrumbs{padding-left:1em;padding-top:1em}
.footer{margin:7em auto 5.4em auto;text-align:center;border-top:1px solid #DDD;padding-top:20px}

/* 首页  start*/
.g_app_lay{padding:56px 0 0 200px}
/* 顶部导航 */
.top_nav{position:fixed;top:0;left:0;z-index:1100;width:100%;height:56px;overflow:hidden;background:#FFF;padding:8px 22px;display:flex;flex-wrap:wrap;flex-direction:row;align-items:center;justify-content: space-between}
.log_tn img{width:37px;float:left}
.log_tn span{
    font-family: Brush Script MT;
    color: #181818;
    font-size: 24px;
    text-shadow: 1px 1px 0 rgb(122 122 122),
        1px 1px 5px rgb(183 183 183 / 80%);
    margin-top:3px;
}
.right_class_tn{padding-top:5px}
.right_class_tn img{margin-left:5px}
.search_move_tn img{width:24px}
.connect_me_tn img{width:22px}

.search{flex:1;display:flex;align-items: center;margin:0 30px;max-width:555px}
.search-left-arrow{padding:5px 13px;display:none}
.search-left-arrow img{width:32px;display:block}
.search_form{display:flex;flex:1;align-items: center;border-radius:5px;background-color: #dedede}
.search_form .input_sf{flex:1}
.search_form .input_sf input{border-radius:5px;width:100%;border-top-right-radius:0;border-bottom-right-radius: 0;border:none;padding:0 0 0 14px;font-size:15px;height:40px;background:transparent}
.search_form .input_sm{cursor:pointer;width:52px;border:none;background:transparent;border-radius:5px;border-top-left-radius:0;border-bottom-left-radius: 0}
.search_form .input_sm img{width:22px}

/* 移动端搜索 */
.mobile_search{opacity:0;transform:translateX(101%);position:fixed;left:0;right:0;top:0;bottom:0;opacity:0;transform:translateX(101%);background-color:#FFF;z-index:1200}
.mob_search_form{background:none;margin-top:18px}
.mob_search_form .close{width:52px;text-align:center}
.mob_search_form .input_sf{background-color:#f7f7f7;border-radius:9px;border:solid 1px #e0e0e0}

/* 左侧菜单 */
.app_layout_side{padding:3px 0 0 0;width:200px;height:100vh;position:fixed;top:56px;left:0;z-index: 1000;overflow-y:auto;background:#FFF}
.g_ls_menus{padding:9px 12px 6px 12px;border-bottom:solid 1px #eeeeee}
.g_ls_menus .meuns_title{color:#686868;padding:10px 0 4px 8px;font-weight: bold}
.g_ls_menus>a{display:block;padding:12px 18px;margin-bottom:4px;color:#4c4c4c}
.g_ls_menus>a img{width:22px;vertical-align:middle;margin-right:8px}
.g_ls_menus>a span{vertical-align:middle}
.g_ls_menus>a:hover, .g_ls_menus .this_set{background-color: #f0f0f0;border-radius: 10px}
.g_ls_menus .this_set{color: #000;font-weight:bold;font-size:15px}
.g_ls_menus_items{padding-bottom:150px}


/* 主内容 */
.g_main_lay{padding:0 2% 0 3.4%;margin-top:18px;min-height:360px;position:relative;max-width:1700px}
.g_main_border{border-top:solid 1px #eeeeee}
.vl_list_main{float:left;width:25%;margin:10px 0 22px 0;position:relative}
.video-menu-ow{border-bottom:1px solid rgba(0,0,0,.1)}
/* .vl_list_main:hover .video_img_vl img{transform:scale(1.01)} */
.vl_list_main:hover .video_title_vl>a{font-weight:bold}
.video_img_vl{border-radius:6px;width:calc(100% - 16px);position:relative;padding-top:71%;overflow:hidden;background:rgb(0 0 0 / 1)}
.video_img_vl a{text-align:center;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.video_img_vl img{transform:scale(1);transition:all 0.3s ease-in-out;display:inline-block;max-width:100%;max-height:100%}
.video_title_vl{padding:0 16px 0 0;color:#bbbbbb;background: #FFF}
.video_title_vl>a{color:#000;min-height:49px;padding:9px 3px 0 3px;word-break:break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 这里是超出几行省略 */
    overflow: hidden;
}
.tgroup{padding-right:5px;padding-top:10px}
.morelink{float:right;font-size:13px;margin-top:3px}
/* 首页  end*/

/* 联系我们 */
.svgimg{width:2em;height:2em;vertical-align:middle;fill: currentColor;overflow: hidden}
.blank_cover{transition: all 0.5s ease;position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0, 0, 0, .7);opacity:0;z-index: 1199}
.right_sidebox{padding:15px 10px 15px 18px;opacity:0;transform:translateX(101%);background-color:#FFF;position:fixed;right:0;top:0;bottom:0;color:#333;width:396px;overflow-y:auto;max-width:92%;z-index:1200}
.right_sidebox>h5{display:flex;padding:15px 0 10px 0;border-bottom:solid 1px #e9e2e2;margin-bottom:20px}
.right_sidebox>h5 span{font-size:20px;font-weight:bold;flex: 1}
.right_sidebox .link{text-decoration: underline;color:#457fc1}
.right_sidebox .sort1{font-size:16px;font-weight:bold;margin-top:10px}
.right_sidebox p{margin:5px 0}
.right_sidebox .codeimg{width:48%}
.right_sidebox .g_ls_menus{width:100%}
.sideboxShow{animation:bounceInRight 0.5s ease forwards}

/* 添加视频 */
.g_form_style{width:406px;margin:8% auto 0 auto}
.g_form_style input,.g_form_style select{width:100%;font-size:15px;padding:12px 10px;border-radius:5px;border:solid 1px #9b9b9b;margin:6px 0 0 0}
.g_form_style>div{margin-bottom:11px}
.g_form_style .avform_bt{margin-top:30px !important}
.avform_bt button{position: relative;font-size:15px;min-width:100px;border-radius:6px;padding:10px 3px;border:none;background-color:#0d6efd;color:#FFF;cursor: pointer}
.loading_bt{display:inline-block}
.bt_loading_cover{z-index:100;position:absolute;left:-1px;right:-1px;top:-1px;bottom:-1px;background:rgba(225,225,225,.5)}
.loading_bt svg{width: 20px;transform-origin: center;animation: change 2.5s linear infinite;
}
.loading_bt circle {fill: none;stroke: #FFF;stroke-width: 7;stroke-dasharray: 1, 200;stroke-dashoffset: 0;stroke-linecap: round;animation: diansh 2s ease-in-out infinite;
}
.g_form_style textarea{display:block;width:100%;padding:4px}

/* 个人中心 */
.ui_name{padding:3% 0 0 0;margin-bottom:20px;display:flex;align-items: center;justify-content:center}
.ui_name img{width:112px;border:solid 4px #e6e6e6;border-radius:50%}
.ui_name span{font-size:21px;font-weight:bold;margin-left:18px}
.ui_menu{border-bottom: solid 1px #eeeeee;padding:0 0 0 3%}
.ui_menu>a{padding:0 2px 6px 2px;margin:0 9px}
.ui_menu .this_sel{font-weight:bold;border-bottom:solid 3px #000;font-size:15px}
.ui_video_state{color:#ada7a7;margin:18% 0 10% 0}

@keyframes bounceInRight {
    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
        transform: translate3d(3000px, 0, 0) scaleX(3)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0) scaleX(1);
        transform: translate3d(0, 0, 0) scaleX(1)
    }

    75% {
        -webkit-transform: translate3d(0, 0, 0) scaleX(.98);
        transform: translate3d(0, 0, 0) scaleX(.98)
    }

    90% {
        -webkit-transform: translate3d(0, 0, 0) scaleX(.995);
        transform: translate3d(0, 0, 0) scaleX(.995)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}
@keyframes circle {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}


@keyframes change {
    100% {
        transform: rotate(360deg);
    }
}
@keyframes diansh {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 90, 200;
        stroke-dashoffset: -35px;
    }

    100% {
        stroke-dashoffset: -125px;
    }
}

@media screen and (max-width: 1199px) {
    
}

@media screen and (max-width: 991px) {
    
}

@media screen and (max-width: 767px) {
    .vl_list_main{width:50%}
}

.visible_movi_xs{display:none}
.hide_movi_xs{display:block}
@media screen and (max-width:480px) {
    .visible_movi_xs{display:inline-block}
    .hide_movi_xs{display:none}
    .top_nav{box-shadow:0 0 7px 0 rgb(155 155 155)}
    .g_app_lay{padding:56px 0 60px 0}
    .g_main_lay{margin-top:5px;padding:0 0 0 6px}
    .video_img_vl{width:calc(100% - 6px);padding-top:72.6%}
    .app_layout_side{padding:6px 0 6px 0;box-shadow: 0 0 7px 0 rgb(155 155 155);top:initial;bottom:0;right:0;width:100%;height:auto}
    .menu_ls{display:flex;justify-content:space-around;padding:0;border:none}
    .menu_ls>a{flex:1;text-align:center;padding:10px 0;margin:0}
    .menu_ls>a img{margin:0}
    .g_form_style{padding:0 12% 0 10%;width:100%}
    .hidden-xs{display:none}
}

.hide{display:none}
.markdown-body h3{margin-top: 24px}
.markdown-body p{margin-bottom: 10px}
.markdown-body pre{margin-bottom:16px;padding:0 .2em;font-family: monospace,monospace;font-size: 1em}
.markdown-body code{padding: .2em .4em;margin: 0;font-size: 85%;background-color: rgba(175,184,193,0.2)}

/*  TaJian首页 */
.tajian_index{max-width:698px;margin:0 auto;padding:10px}
.tajian_index .h1title{font-size:24px;color:#444}
.tajian_index .h1title small{font-size:67%}
.tajian_index .h3title{margin-top:30px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #DDD}
.tajian_index .ulist{margin-top:10px}
.tajian_index .ulist li{list-style:circle;margin-left:26px;padding-left:8px;line-height:1.8}
.tajian_index .btns{margin-top:30px;text-align:center}
.tajian_index .btns img{width:90px;opacity:0.8}
.tajian_index .btns .favbtn{float:left;width:50%}
.tajian_index .btns .downbtn{float:right;width:50%}
.tajian_index .btns a{color:#3e3edc}
.tajian_index .btns a:hover{color:blue}
.tajian_index .btns a:hover img{opacity:1}
.tajian_index .kfwx{float:right;border-radius:6px}
.btn-primary,.btn-danger,.tajian_index .loginbtn{border:1px solid #712cf9;background-color:#712cf9;color:#FFF;padding:3px 10px;border-radius:4px;cursor:pointer}
.btn-danger{background-color:#d32d2d;border-color:#e96b5b}
.btn-primary:hover,.btn-danger:hover{font-weight:500}
.bi{width:1em;height:1em;display:inline-block;vertical-align:-.125em;fill:currentcolor}
.tajian_index .pfav{float:left;width:50%;min-height:60px;font-size:16px}
select,.ipt{padding:4px;max-width:150px}
select.tagselect{max-width:100%}

.stats{background-color:#EEE;padding:10px 10px 4px 10px}
.stats .col{display:inline-block;padding:13px 4px;width:30%;max-width:128px;background:#444;color:#FFF;margin-right:4px;margin-bottom:6px;text-align:center}
.stats .col strong{font-size:28px}
.stats .col label{display:block;font-size:15px}
.info{background-color:darkblue}
.success{background-color:green}
.warning{background-color:#332701;border-color:#997404}
.danger{background-color:red}
.alert{padding: 1em;border:1px solid;border-radius:5px}
.alert.warning{color:#ffda6a}

/* 注册/登录 */
.twocol label{display:block}
.twocol input{width:62%}
.twocol button{margin-left:4px}

/* 个人中心 */
.nickname{font-size:20px}
.mg_menus{margin-top:20px}
.mg_menus li{display:inline-block;width:45%;margin:5px;border:1px solid #DDD;border-radius:5px;text-align:center;vertical-align:middle}
.mg_menus li a{display:block;padding:15px 10px}
.mg_menus li a:hover{background-color:lightblue;color:#FFF;font-weight:bold}
.mg_menus li img{vertical-align:middle}
.tag-item{margin-top:25px}
.tag-item .btn-danger{float:right}
.tag-item img{cursor:pointer}
.tag-item input{margin-top:4px}

/* 收藏管理 */
.favmg-item .btn-del{position:absolute;right:5px;bottom:5px}
.favmg-item .act_tags{min-height:40px;background-color:#EEE;padding:4px;margin-right:4px;margin-top:5px}
.favmg-item .act_tags label{display:inline-block;cursor:pointer}
.favmg-item .act_tags label input{cursor:pointer}
.fav-group{background:#EEE;padding:5px;margin-bottom:10px}

/* layout index */
body.layout_index{background-color:#e5f1f3}
.layout_index .top_nav{padding-left:20%;padding-right:20%}
.layout_index .mt65{margin-top:65px}
.mt10,.layout_index .mt10{margin-top:10px}
.mt20{margin-top:20px !important}
.ml20,.layout_index .ml20{margin-left:20px}
.pb30{padding-bottom:30px}
.layout_index .pl20{padding-left:20px}
.layout_index .pt20{padding-top:20px}
.layout_index .lh18{line-height:1.8}
.layout_index .smsbtn{border:1px solid #999;background-color:#e5f1f3;color:#333;padding:8px;border-radius:4px;cursor:pointer}
.layout_index .smsbtn:hover{background-color:lightblue}
.layout_index .smsbtn:disabled,.layout_index .smsbtn[disabled]{background-color:#CCC;cursor:not-allowed}
.layout_index .g_main_lay{min-height:374px}

.footimg{opacity:0.8;padding-bottom:30px}
.footimg img{max-width:90%;box-shadow:10px 5px 5px #569ac8}

@media screen and (max-width:480px) {
    .layout_index .top_nav{padding-left:22px;padding-right:22px}
    .tajian_index .h1title small{display:block}
    .tajian_index .kfwx{float:none;width:130px;display:block;margin-left:1em}
    .tajian_index .loginbtn{display:block;width:80%;margin-left:1em;text-align:center}
    .tajian_index .hide{display:none !important}
    .tajian_index .pfav{float:none;width:100%;min-height:1em}
}