/* CSS Document */



/***** -----   Initialization   -----*****/

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{ margin: 0; padding: 0;font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, iframe{ display: block; }

iframe{ border: 0; }

h1, h2, h3, h4, h5, h6{ font-size: 100%; font-weight: 500; }

audio, canvas, video{ display: inline-block; *display: inline; *zoom: 1; }

table{ border-collapse: collapse; border-spacing: 0; }

address, cite, dfn, em, var, i{ font-style: normal; font-weight: 400; }

del{ text-decoration: line-through; }

ul, ol{ list-style: none; }

a{ text-decoration: none; color: #333; }

fieldset, img, button, input{ border: 0; }

button, input, select, textarea{ font-size: 100%; }

input{ border-radius: 0; }

body{ min-width: 320px; overflow-x: hidden; -webkit-text-size-adjust: none; -webkit-font-smoothing: subpixel-antialiased; color: #000; }

body, button, input, select, textarea{ font-size: 100%;  }

:focus{ outline: 0; }

.clearfloat { clear: both; height: 0; line-height: 0; font-size: 1px; }

.c:before, .c:after { content: ""; display: table; }

.c:after { clear: both; }

.c { zoom: 1; }

/***** -----   Ending Initialization   -----*****/



/***** -----   Extend Style   -----*****/

.fl{ float: left; display: inline;}

.fr{ float: right; display: inline;}

.fn{ float: none;}



.dn, .dsn{ display: none;}

.di{ display: inline;}

.db{ display: block;}

.dib{ display: inline-block;}



.tal{ text-align: left;}

.tac{ text-align: center;}

.tar{ text-align: right;}



.por{ position: relative;}

.poa{ position: absolute;}

.pof{ position: fixed;}

.poss{ position: static;}



.fwb{ font-weight: bold;}

.fwn{ font-weight: normal;}



.mt0{ margin-top: 0!important;}


/***** -----   背景 链接颜色   -----*****/

html{ font-size: 200px; }

body{ background: #2f2f2f; font-size: .15rem; max-width: 6.4rem; margin: 0 auto; padding-top: 35px; position: relative; }

a { color: #fff; padding: 4px 10px;font-size: 16px;}

a:hover { color: #f63; }



/***** -----   控件   -----*****/

.ico_video{ width: .62rem; height: .62rem; background: url(https://ttx77.com/images/ico.png) no-repeat; background-size: 100%;}

.ico_close{ display: inline-block; vertical-align: middle; position: relative; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}

.ico_close:after, .ico_close:before{ content: ''; position: absolute; left: 50%; top: 50%; background: #a8abad; border-radius: .04rem;}

.ico_close:after{ width: .44rem; height: .03rem; margin: -.015rem 0 0 -.22rem;}

.ico_close:before{ width: .03rem; height: .44rem; margin: -.22rem 0 0 -.015rem;}



/***** -----   顶部   -----*****/

.topper{ position: fixed; left: 0; top: 0; right: 0; z-index: 999;  }

.topper .frm_text{ width: 6.4rem; margin: 0 auto; background: #cf1322; color: #fff; font-size: 20px; height: 35px; line-height: 35px; }

.frm_text li{ float: left; display: inline; min-width: 6.4rem;}





/***** -----   头部   -----*****/

.banner img{ display: block; width: 100%; height: auto; }





/***** -----   尾部   -----*****/

.footer{ line-height: .28rem; height: .28rem; font-size: .18rem; color: #999; text-align: center; padding: .21rem 0 .43rem 0; background: #222222; }

.footer_p1{font-size: .22rem;}



/***** -----   导航   -----*****/

nav{ }





/***** -----   布局   -----*****/

.introduce{ background: #222222; font-size: .18rem; color: #ffffff; line-height: .38rem; padding: .18rem 0 .18rem 0; text-align: center;}



.column_title{ text-align: center; padding: .25rem 0 .11rem; background: #f6f6f6;}

.column_title .title{ display: inline-block; position: relative; font-size: .28rem; line-height: .38rem; color: #f65859;}

.column_title .title:after, .column_title .title:before{ content: ''; position: absolute; top: 50%; margin-top: -.01rem; width: .48rem; height: .02rem; background: #f65859;}

.column_title .title:after{ left: -.6rem;}

.column_title .title:before{ right: -.6rem;}

.column_title p{ font-size: .22rem; line-height: .28rem; color: #7a7f82;}



/*视频列表*/

.video_list{ font-size: 0; font-size: 1px; font-size: 1px; text-align: center; background: #f6f6f6;}

.video_list li{ display: inline-block; vertical-align: top; background: #fff; width: 3.02rem; margin: .06rem; background: #fff; box-shadow: 0 0 .05rem #ddd; border-radius: 4px;}

.video_list li .item_img{ position: relative; display: block; height: 1.62rem; padding: .07rem .07rem 0;}

.video_list li .item_img img{ display: block; width: 100%; height: 100%;}

.video_list li .item_img .ico_video{ position: absolute; z-index: 2; left: 50%; top: 50%; margin: -.31rem 0 0 -.31rem;}

.video_list li .item_name{ font-size: .16rem; line-height: .32rem; height: .32rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #7a7f82; padding: .08rem 0 0 0;}

.video_list li .item_intro{ font-size: .12rem; line-height: .28rem; height: .28rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #7a7f82; margin: .01rem 0 0 0; padding: 0 0 .08rem;}



.pop_video{position: relative;background: #171717;width: 6.3rem;border: .07rem solid #3a3a3a;padding-bottom: 5px;}

.pop_video_close{ position: absolute; right: 0; top: 0; width: .65rem; height: .65rem; line-height: .65rem; text-align: center; cursor: pointer;}

.pop_video_title{font-size: .26rem;line-height: .36rem;color: #dedede;text-align: center;padding: .19rem 0;background: #0e0e0e;}

.pop_video_main{ padding: 0 .07rem;}

.pop_video_main video{width: 100%;height: 3.5rem;}

.pop_video_intro{ font-size: .2rem; line-height: .3rem; color: #7a7f82; padding: .2rem 0; text-align: center;}

.tex{color: #333;padding: 4px 26px; font-size: 14px;font-weight: 500;}























/***** -----   媒体查询 - 字体设置   -----*****/

/* 设计稿宽度=640时, 4rem=400px, 1rem=100px, .5rem = 50px, .1rem = 10px 以此类推 */

@media screen and (max-width: 1440px) { html { font-size: 225px; } }

@media screen and (max-width: 1366px) { html { font-size: 213.4375px; } }

@media screen and (max-width: 1280px) { html { font-size: 200px; } }

@media screen and (max-width: 1200px) { html { font-size: 187.5px; } }

@media screen and (max-width: 1120px) { html { font-size: 175px; } }

@media screen and (max-width: 1080px) { html { font-size: 168.75px; } }

@media screen and (max-width: 960px) { html { font-size: 150px; } }

@media screen and (max-width: 880px) { html { font-size: 137.5px; } }

@media screen and (max-width: 840px) { html { font-size: 131.25px; } }

@media screen and (max-width: 800px) { html { font-size: 125px; } }

@media screen and (max-width: 750px) { html { font-size: 117.1875px; } }

@media screen and (max-width: 720px) { html { font-size: 112.5px; } }

@media screen and (max-width: 640px) { html { font-size: 100px; } }

@media screen and (max-width: 600px) { html { font-size: 93.75px; } }

@media screen and (max-width: 560px) { html { font-size: 87.5px; } }

@media screen and (max-width: 480px) { html { font-size: 75px; } }

@media screen and (max-width: 414px) { html { font-size: 64.6875px; } }

@media screen and (max-width: 400px) { html { font-size: 62.5px; } }

@media screen and (max-width: 384px) { html { font-size: 60px; } }

@media screen and (max-width: 375px) { html { font-size: 58.59375px; } }

@media screen and (max-width: 360px) { html { font-size: 56.25px; } }

@media screen and (max-width: 320px) { html { font-size: 50px; } }