/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
	display:block;
}

ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
}


/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}/*******global.css**************************************************************/
*, *:before, *:after{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
/*所有通用設定-----------------------------------------------------------------------*/
body {  font-family: Meiryo, "Meiryo UI","微軟正黑體",Arial, Helvetica, sans-serif, "新細明體";  font-size:15px; line-height:1.5; font-weight:normal; color:#333;}

/*預設連結狀態*/
a:link, a:visited{ color:#000; text-decoration:none; transition:all 0.2s ease-out;}
a:hover, a:active{ color:#ea4e16; text-decoration:none;}

/*圖片無框*/
a img { border:none;}
/*去除圖片底下空白*/
img{vertical-align: bottom;}
/*h標題設定*/
h1{ font-size:15px;}
h2{ font-size:15px;}
h3{ font-size:13px;}
h4{ font-size:13px; font-weight:normal;}


/*清除 clearfix*/
.clearfix:after{ content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clearfix{*zoom:1; _zoom:1;}

/*反白換顏色*/
::-moz-selection{ background-color:#f1c81e; color:#fff;}
::selection{ background-color:#f1c81e; color:#fff;}

/*麵包屑*/
.menu_bread_crumb { clear:both; color:#999; margin-bottom:10px;}
.menu_bread_crumb em { color:#bc823d; font-style:normal;}
.menu_bread_crumb span { margin:0px 5px;}
.menu_bread_crumb a:link, .menu_bread_crumb a:visited { color:#999;}
.menu_bread_crumb a:hover, .menu_bread_crumb a:active { color:#ea4e16;}

/*分頁*/
.menu_page { clear:both; text-align:center; margin:80px 50px auto;}
.menu_page span,
.menu_page a { color:#666; border:1px solid #666; border-left:0px; padding:5px 15px; margin:0px;}
.menu_page a:hover, .menu_page a:active{ color:#fff; background:#333; border:1px solid #000;}
.menu_page span.current { color:#000; background-color:#ffc34e; font-weight:bold; border-right:0px solid #000;}
.menu_page span.disabled{ text-decoration:none; color:#aaa;} 
.menu_page .info{ clear:both; margin-top:20px; color:#333;}

.menu_page span:nth-of-type(1),
.menu_page a:nth-of-type(1),
.menu_page span.current + .menu_page span.disabled{ border-left:1px solid #000;}

/* .fixed_banner 滾回網頁最上面 ============*/
.fixed_banner{ display: block; width:60px; height:60px;overflow:hidden; position:fixed; right:30px;  z-index:50; display:none;
-webkit-transition:0.3s ease-in-out;
transition:0.3s ease-in-out;}
.fixed_banner img{ width: 100%; height: auto;}
.fixed_banner.banner_1{ bottom:100px;} /*160px*/
.fixed_banner.banner_2{ bottom:165px;} /*225px*/

/* .line_add line 加好友 ============*/
.line_add{ display: block; width:60px; height:60px; text-indent:-9999px; background:url(../images/icon_line_add.jpg) no-repeat; background-size:60px 60px; opacity:0.9; position:fixed; bottom:95px; right:30px; cursor:pointer; z-index:50; display:none; }


/* .gototop 滾回網頁最上面 ============*/
.gototop{ width:60px; height:60px; text-indent:-9999px; background:url(../images/gototop.png) no-repeat; background-size:60px 60px; opacity:0.9; position:fixed; bottom:30px; right:30px; cursor:pointer; z-index:50; display:none; }

/*******layout.css**************************************************************/
/*================================================版型================================================*/
body{}
.wrapper{}
.header_box{}
.header{ width:1280px; height:70px; margin:0 auto; position:relative; margin-bottom:10px;}
.container{ clear:both; width:1280px; margin:0 auto 30px auto;}
.container .r1{ clear:both;}
.footer_box{ clear:both; background:#999;}
.footer{ clear:both; width:1280px; padding:15px 0px; margin:0 auto;}



/*================================================header================================================*/
/* logo========*/
.header h2.main_logo{ position:absolute; left:0px; top:15px;}
.header h2.main_logo a { display:block; width:300px; height:55px; background:url(../images/logo_header.png) no-repeat left top; background-size:100% auto; text-indent:100%; white-space:nowrap; overflow:hidden;}
/* hotvideo頁 - 換 logo */
body.hotvideo .header h2.main_logo a { width:500px;  background-image: url(../images/logo_hotvideo_header.png); }


/* search========*/
.search_box{ width:180px; height:35px; border:1px solid #999; position:absolute; right:0px; top:15px;}
.search_box form{}
.search_box .keyword{ background:none; border:0px;/*歸零*/
 display:block; width:130px; height:35px; font-size:15px; color:#666; margin-left:10px;}
.search_box .keyword:focus{ outline:none;}
.search_box .btn{ border:0px; text-indent:-9999px;/*歸零*/
display:block; width:35px; height:33px; background:#999 url(../images/icon_search.svg) no-repeat 7px 7px / 20px 20px; cursor:pointer; position:absolute; right:0px; top:0px;}

/* nav_1 水平選單========*/
.nav_1{ width:800px; height:70px; position:absolute; left:314px; bottom:0px;}
.nav_1 ul{ }
.nav_1 ul li{ float:left; height:70px; line-height:70px; font-size:18px; padding:0px 28px; position:relative;}
.nav_1 li.style_1{ background:#ea4e16;}
.nav_1 li.style_1 a { color: #fff;}
.nav_1 li.style_1::before{ display:inline-block; width:24px; content:url("../images/icon_menu.svg"); position:relative; top:5px;}
/*sub*/
.nav_1 li .sub{ width:100%; height:auto; background:rgba(255,255,255,1); text-align:center; position:absolute; left:0px; top:70px; z-index:60; display:none;}
.nav_1 li .sub a{ display:block; line-height:40px;}
/*style_1 (第一個水平選單)*/
.nav_1 li.style_1 .sub{ width:981px; border-left:1px solid #eee; border-top:1px solid #eee;}
.nav_1 li.style_1 .sub a{ float:left; width:calc(100% / 7); border-right:1px solid #eee; border-bottom:1px solid #eee;}
/*hover*/
.nav_1 li:hover .sub{ display:block;}
.nav_1 li.style_1 > a:hover, .nav_1 li.style_1 > a:active{ color:#fff;}
.nav_1 li .sub > a:link, .nav_1 li .sub > a:visited{ color:#000;}
.nav_1 li .sub > a:hover, .nav_1 li .sub > a:active{ background:#ea4e16; color:#fff;}


/*================================================live_zone_box 直播區塊================================================*/
/* 直播區 ==================*/
.live_zone_box{ clear:both; margin-bottom:30px;}
.live_zone_box .live_zone{ width:1280px; margin:0 auto;/* position:relative;*/}

/* 上方圖集 ==================*/
.live_zone .gallery{ width:1280px; height:140px; background:#eee; padding:0px 30px; margin-bottom:30px; overflow:hidden; position: relative;}
.live_zone .gallery .run{}
.live_zone .gallery .run .inner{}
.live_zone .gallery .run .inner a{ display:inline-block;} /*寬度在js*/
.live_zone .gallery .run .inner a:not(:last-of-type){ padding-right:5px;;}
.live_zone .gallery .run .inner .piece{ height:140px; overflow:hidden; opacity:0; transition:opacity 1s;}
.live_zone .gallery .run .inner .piece img{ width:100%; height:auto; margin-bottom:5px;}
.live_zone .gallery .run .inner .piece h3.title{ text-align:center;}
.live_zone .gallery .run .inner .piece p.time{ font-size:13px; text-align:center;}
.live_zone .gallery .run .inner .piece p.live{ background:#000; color:#ffff00; position:absolute; left:0px; top:60px;}
/*緩衝後出現*/
.live_zone .gallery .run .inner .piece.appear{ opacity:1;}
/*左右箭頭*/
.live_zone .gallery .bx-wrapper .bx-controls-direction a{ width:30px; height:85px; text-indent:100%; white-space:nowrap; overflow:hidden; position:absolute; top:0px;}
.live_zone .gallery .bx-wrapper .bx-prev{ background:#eee url(../images/chevron-left.svg) no-repeat center center / 30px 30px; left:0px;}
.live_zone .gallery .bx-wrapper .bx-next{ background:#eee url(../images/chevron-right.svg) no-repeat center center / 30px 30px; right:0px;}
/*hover*/
.live_zone .gallery .run .inner .piece:hover{ border:5px solid #f1c81e;}
/*current*/
.live_zone .gallery .run .inner .piece.current{ border:5px solid #f1c81e; }
.live_zone .gallery .run .inner .piece.live::before{ content:url("../images/bg_live.png"); display:block; width:150px; height:83px; position:absolute; left:0px; top:0px; overflow:hidden;}


/* 頻道視覺 ==================*/
.live_zone .main_visual { position:relative; margin-bottom:10px;}
.live_zone .main_visual img { }
.live_zone .main_visual h3 { font-size:26px; word-spacing:30px; color:#fff; position:absolute; left:20px; bottom:40px; text-shadow:0 2px 2px rgba(0,0,0,0.3);}
.live_zone .main_visual .box { height:20px; line-height:24px; color:#fff; position:absolute; left:20px; bottom:15px;}
.live_zone .main_visual .box em.icon { float:left; display:inline-block; width:20px; height:20px; background:url(../images/icon_visual.png); background-size:100% auto; margin-right:10px;}
.live_zone .main_visual .box a { color:#fff; text-shadow:0 1px 2px rgba(0,0,0,0.3);}
/*hover*/
.live_zone .main_visual .box a:hover { border-bottom:1px solid #fff;}


/*=============================== r1 ===============================*/
.live_zone .r1 { }
.live_zone .r1 .video{ float:left; width:1000px; height:563px; margin-bottom:20px;}
.live_zone .r1 .video iframe{ width:1000px; height:563px;}
.live_zone .r1 .side{ float:right; width:270px; height:563px;}
.live_zone .r1 .side .chatroom{/* display:none;*/}
/*=============================== r2 ===============================*/
.live_zone .r2 { clear:both; width:1000px; position:relative; margin-bottom:40px;}
.live_zone .r2 .main_info { }
.live_zone .r2 .share_box { width:360px; height:30px; text-align:right; position:absolute; right:-280px; top:5px;}
.live_zone.large .r2 .share_box { right:0;}

/* r1 -  ===========================*/

/* r2 - 標題 ===========================*/
.live_zone .main_info h1.title{ font-size:24px;}
.live_zone .main_info h1.title .adult{ float:left; width:27px; height:45px; background: url(../images/icon_adult.png) no-repeat center center; background-size:100% auto;
position:relative; top:-9px; margin-right:5px;}
/*story*/
.live_zone .main_info .story { clear:both; max-height:30px; margin-bottom:15px; overflow:hidden; transition:all 0.7s;}
.live_zone .main_info .story p { font-size:16px; line-height:1.7em; color:#666; margin-bottom:20px;}
.live_zone .main_info .story img { max-width:100%; height:auto;}
/*more------*/
.live_zone .main_info .story ~ .more { display:inline-block; color:#999; margin-bottom:15px;}
.live_zone .main_info .story ~ .more em {display:inline-block; width:14px; height:14px; background:url(../images/more_story.png); background-size:100% auto; margin-left:5px;}
/*story展開*/
.live_zone .main_info .story.open { max-height:2000px;} /*max-height 才可以作動畫*/
.live_zone .main_info .story.open ~ .more em { transform: rotateX(180deg); }

/*keyword*/
.live_zone .main_info .keyword { color:#ed0b70; margin-bottom:15px;}
.live_zone .main_info .keyword span { display: inline-block; padding:2px 5px 0 5px; background:#ea4e16; color:#fff; margin-right:5px;}
.live_zone .main_info .keyword a { color:#ea4e16; margin-right:5px;}
/*相關連結*/
.live_zone .main_info .related { }
.live_zone .main_info .related span { display: inline-block; padding:2px 5px 0 5px; background:#666; color:#fff; margin-right:5px;}
.live_zone .main_info .related a { }

/* r2 - 社群按鈕 ===========================*/
.live_zone .share_box div{ display:inline-block; width:auto; height:30px; margin-bottom:5px; margin-left:10px; float:right;}
.live_zone .share_box .fb-share-button{ position:relative; top:-1px; margin-left:0;}
.live_zone .share_box .fb-like{ position:relative; top:-1px;}
.live_zone .share_box .weibo{ width:96px;}
.live_zone .share_box .twitter{}

/*video.htm - 寬度變1280 */
.live_zone.large .r1 .video { width:1280px; height:720px;}
.live_zone.large .r1 .video iframe { width:1280px; height:720px;}
.live_zone.large .r1 .side { display:none;}
.live_zone.large .r2 { width:1280px;}

/*================================================footer================================================*/
.footer_box .footer .footer_menu{ font-size:16px; color:#eee; text-align:center; margin-bottom:5px;}
.footer_box .footer .footer_menu a{ margin:0px 5px;}
.footer_box .footer .footer_menu a:link, .footer_box .footer .footer_menu a:visited{ color:#fff;}
.footer_box .footer .footer_menu a:hover, .footer_box .footer .footer_menu a:active{ text-decoration:underline;}
/*版權*/
.footer_box .footer address{ font-size:16px; color:#eee; text-align:center; font-style:normal;}
.footer_box .footer address a:link, .footer_box .footer address a:visited{ color:#fff;}
.footer_box .footer address a:hover, .footer_box .footer address a:active{ text-decoration:underline;}
/*******block.css**************************************************************/


/*============================================block===========================================*/
/*block_x========*/
.block_x { clear:both; /*background:url(../images/block_x-1.jpg) no-repeat;*/ margin-bottom:15px;
background-repeat:no-repeat;}
.block_x h2.title { height:60px; line-height:60px; font-weight:normal; color:#666; position:relative; margin-bottom:10px; border-left:20px solid #f1c81e; padding-left:20px; overflow:hidden;}
.block_x h2.title a,
.block_x h2.title span { font-size:30px; color:#666; white-space:nowrap; overflow:hidden; margin-right:15px;}
.block_x h2.title em { font-size:18px; font-weight:bold; font-style:normal;}
/*用圖片當標題*/
.block_x.no-title h2.title { text-indent:100%; border:none;}
.block_x.no-title h2.title a.more{ text-indent: initial;}

/* more - 標題右方*/
.block_x h2.title > a.more { display:block; line-height:23px; font-size:15px; background:url(../images/arrow_1.png) no-repeat 5px 5px / 18px 18px; text-shadow:0px 0px 5px rgba(255,255,255,0.9); padding:5px 5px 3px 30px; position:absolute; right:40px; top:20px;}
/* more - 下方*/
.block_x a.more_2 { clear:both; display:block; width:85px; height:27px; line-height:27px; text-align:center; font-size:12px; color:#333; border:1px solid #c9c9c9; border-radius:5px; margin:20px auto 0 auto; transition:none;}
.block_x a.more_2 em { display:inline-block; width:10px; height:10px; background:url(../images/block_y-more.png) no-repeat left center ; margin-left:5px;}
.block_x a.more_2:hover { border:1px solid #ea4e16; color:#ea4e16;}
.block_x a.more_2:hover em { background-position:right center;}
.block_x p{ margin:20px 0px;}

/*============================================圖文列表===========================================*/
/* part_pictxt_1 ================*/
.part_pictxt_1{ clear:both; margin:0 auto;}
.part_pictxt_1 .piece{ width:235px; height:190px; float:left; margin:auto 15px 20px auto; overflow:hidden;}
.part_pictxt_1 .piece:nth-of-type(5n){ margin-right:0;}
.part_pictxt_1 .piece a.pic{ display:block; margin-bottom:10px; position:relative;}
.part_pictxt_1 .piece a.pic img{ width:235px; height:132px;}
.part_pictxt_1 .piece a.pic em.time{ font-size:12px; background:rgba(0,0,0,0.7); color:#fff; padding:0px 3px; position:absolute; right:0px; top:0px;}
.part_pictxt_1 .piece  h3.title{ font-size:16px; font-weight:normal; background:rgba(255,255,255,0.5);}
/*一排四個*/
.part_pictxt_1.col_4 .piece { width:300px; height:227px; margin:auto 25px 20px auto;}
.part_pictxt_1.col_4 .piece a.pic img { width:300px; height:169px;}
.part_pictxt_1.col_4 .piece:nth-of-type(4n){ margin-right:0;}


/* part_pictxt_2 ================*/
.part_pictxt_2{ clear:both; position: relative;}
.part_pictxt_2 .auto_y{ height:520px; overflow-y:auto; overflow-x:hidden;}
.part_pictxt_2 a.piece{ display:block; position:relative; overflow:hidden; z-index:50;}
.part_pictxt_2 a.piece:not(:last-of-type){ margin-bottom:12px;}
.part_pictxt_2 a.piece .pic{ float:left; margin-right:5px; position:relative;}
.part_pictxt_2 a.piece .pic img{ width:130px; height:73px;}
.part_pictxt_2 a.piece .pic em.time{ font-size:12px; background:rgba(0,0,0,0.7); color:#fff; padding:0px 3px; position:absolute; right:0px; top:0px; transition:0.2s all;}
.part_pictxt_2 a.piece h3.title{ display:table-cell; height:73px; font-size:14px; font-weight:normal; vertical-align:middle;/*垂直置中*/}
/*hover, current*/
.part_pictxt_2 a.piece:before{ display:block; content:""; width:100%; height:100%; position:absolute; left:0px; top:0px; border:5px solid rgba(255,255,255,0); z-index:20; transition:0.3s;}
.part_pictxt_2 a.piece.current:before,
.part_pictxt_2 a.piece:hover:before{ border-color:#f1c81e;}
.part_pictxt_2 a.piece.current .pic em.time,
.part_pictxt_2 a.piece:hover .pic em.time{ right:0px; top:4px;}
/*標題&看更多*/
.part_pictxt_2 h2.title{ font-size:20px; font-weight:normal; border-left:10px solid #f1c81e; margin-bottom:10px; padding-left:10px;}
.part_pictxt_2 a.more{ display:block; float:right; line-height:23px; font-size:15px; font-weight:normal; background:url(../images/arrow_1.png) no-repeat 5px 5px / 18px 18px; padding:5px 5px 3px 30px; text-shadow:0px 0px 5px rgba(255,255,255,0.9);}



/* part_pictxt_3 ================*/
.part_pictxt_3{ clear:both; margin:0 auto;}
.part_pictxt_3 .pic{ display:block; margin-bottom:5px; position:relative; overflow:hidden;}
.part_pictxt_3 .pic img{ width:100%; height:auto;}
.part_pictxt_3 .pic em.time{ background:rgba(0,0,0,0.7); color:#fff; font-size:12px; padding:0px 3px; position:absolute; right:0px; top:0px;}
.part_pictxt_3 h3.title { font-size:16px; font-weight:normal;}
/* 各區域 */
.part_pictxt_3 .box_1 { width:580px; float:left; margin-right:10px;}
.part_pictxt_3 .box_2 { width:480px; float:left; margin-right:10px;}
.part_pictxt_3 .box_3 { width:155px; float:left;}

/*box_1 - 輪播 ======= */
.part_pictxt_3 .gallery_2 { width:580px; position:relative; overflow:hidden;}
.part_pictxt_3 .gallery_2 .pic { width:580px; height:326px;}
.part_pictxt_3 .gallery_2 h3.title { text-align:center; line-height:55px;}
/*左右箭頭*/
.part_pictxt_3 .gallery_2 .bx-wrapper .bx-controls-direction a{ width:30px; height:85px; text-indent:100%; white-space:nowrap; overflow:hidden; position:absolute; top:140px;}
.part_pictxt_3 .gallery_2 .bx-wrapper .bx-prev{ background:url(../images/gallery_2-left.svg) no-repeat center center; left:0px;}
.part_pictxt_3 .gallery_2 .bx-wrapper .bx-next{ background:url(../images/gallery_2-right.svg) no-repeat center center; right:0px;}
/*小圓點*/
.part_pictxt_3 .gallery_2 .bx-wrapper .bx-pager { width:100%; text-align:center; position:absolute; top:300px;}
.part_pictxt_3 .gallery_2 .bx-wrapper .bx-pager-item { display:inline-block; margin-right:6px;}
.part_pictxt_3 .gallery_2 .bx-wrapper .bx-pager-item a { display:inline-block; width:12px; height:12px; background:#fff; border:1px solid #666; border-radius:10px; text-indent:-9999px;}
.part_pictxt_3 .gallery_2 .bx-wrapper .bx-pager-item a:hover,
.part_pictxt_3 .gallery_2 .bx-wrapper .bx-pager-item a.active { background:#666;}

/*box_2 ======= */
.part_pictxt_3 .box_2 .piece { width:235px; float:left;}
.part_pictxt_3 .box_2 .piece a.pic{ height:132px;}
.part_pictxt_3 .box_2 .piece h3.title { height:57px;}
.part_pictxt_3 .box_2 .piece:nth-of-type(2n+1) { margin-right:10px;}




/*============================================廣告===========================================*/
.ad { display:block; text-align:center;}
.ad img { max-width:100%; height:auto;}
.ad_1200x200 { width:1200px; margin-bottom:40px;}
.ad_155x400 { }

/*ad_pictxt_1*/
.ad_pictxt_1{ width:235px; float:left; position:relative;}
.ad_pictxt_1:not(:last-of-type){ margin-right:10px;}
.ad_pictxt_1 a.pic{ display:block; width:235px; height:132px; margin-bottom:10px;}
.ad_pictxt_1 a.pic img{ width:235px; height:132px;}
.ad_pictxt_1 h3{ font-size:18px; font-weight:normal;}
.ad_pictxt_1 span.tag{ background:rgba(240,10,120,0.7); color:#fff; padding:0px 3px; position:absolute; left:0px; top:110px;}
.ad_pictxt_1 span.date{ display: none;}/*******page.css**************************************************************/

