﻿    body 
    {
        padding-top: 115px;
        font-size:1.1em; 
        letter-spacing:0.1em;
        color:#686868; 
        font-family: Helvetica, Heiti TC, Segoe UI, "微軟正黑體", 新細明體, 細明體;	
        }
    body.modal-open {
        overflow: auto;
    }
    body.modal-open[style] {
        padding-right: 0px !important;
    }
    A:link, A:visited, A:active {color:#656565}
    A:hover {color:#3388ff; text-decoration:none}
    .navbar{margin-top: -115px;background-color:#403b39; font-size:1.3em;-webkit-border-radius: 0;-moz-border-radius: 0;border-radius: 0;}
    .navbar-brand .logo_TTV{margin-top:-16px;border:solid 1px #403b39;max-width:117px;max-height:115px;}
    .r2p
    {
	    margin-right:2px;
    }	
    .l2p
    {
	    margin-left:2px;
    }	
    .r5p
    {
	    margin-right:5px;
    }	
    .l5p
    {
	    margin-left:5px;
    }	
    .more {position: absolute;bottom: 8px;right: 10px;z-index:10;font-size:0.7em;}
    .text-right-align {text-align:right;}
    #slidemenu .nav1 {}
    #slidemenu .nav2 { margin-top:20px; margin-left:90px;}
    #slidemenu .nav3 { margin-top:70px; margin-left:117px;padding:0 0 0 0px;height:30px;color:#333;background-color:#979493}
    #slidemenu .nav3 .navbar-left A:link,
    #slidemenu .nav3 .navbar-left A:visited,
    #slidemenu .nav3 .navbar-left A:hover,
    #slidemenu .nav3 .navbar-left A:active,
    #slidemenu .nav3 .navbar-right A:link,
    #slidemenu .nav3 .navbar-right A:visited,
    #slidemenu .nav3 .navbar-right A:hover,
    #slidemenu .nav3 .navbar-right A:active{ color:#333;padding:5px 30px;}
    #slidemenu .nav3 .navbar-left A:focus{ background-color:#979493}
    #slidemenu .nav3 .navbar-left A:hover{ background-color:#eeeeee;}
    /*#slidemenu .nav3 .navbar-right A:hover{ background-color:#bbbbbb;}*/
    .opendrop {background-color:#eeeeee;}
    

    #top { max-width:1278px;margin:0 auto}
    #main_top  
    {
        max-width:1278px;
        margin:3em auto
        
        }
    .play:after {
        content: "";
        position: absolute;
        top: -7em;
        width: 100%;
        height: 100%;
        z-index: 0;
        background: transparent url(images/play.png) no-repeat center;
        pointer-events: none;
    }
    .play:hover:after { 
        content: ""; 
        position: absolute; 
        top: -7em; 
        width: 100%;
        height: 100%;
        z-index: 0; 
        background: transparent url(images/play_hover.png) no-repeat center; 
        pointer-events: none; 
    }    
    .glyphicon-menu-left, .glyphicon-menu-right {font-size:5em}
    
    #bolck_zone {background-color:#e8e8e8; padding:3em 0;border-bottom:solid 1px #453f3f;}
    #bolck_zone .row {max-width:1277px;margin:0 auto}
    #bolck_zone .bolck_row {margin-bottom:3em;}
    #bolck_zone .block_each {background-color:#fff;border:solid 1px #bbb;font-size:1.25em;}
    #bolck_zone .block_each .areaA{padding:30px 15px 15px 30px}
    #bolck_zone .block_each .areaB{padding:30px 30px 15px 15px}
    #bolck_zone .block_each .areaC{padding:15px 15px 29px 30px} 
    #bolck_zone .block_each .areaD{padding:15px 30px 29px 15px}
    #bolck_zone .block_each .areaE{padding:30px 15px 29px 30px}
    #bolck_zone .block_each .areaE-img{padding:0 5px 0 0;}
    #bolck_zone .block_each .areaF{padding:30px 30px 29px 15px}
    #bolck_zone .block_each .areaF-in{padding:15px 15px 10px 15px}
    /*#bolck_zone .block_each .areaG{padding:0 0 15px 0}*/
    #bolck_zone .block_each .areaG{padding:0 0 5px 0}
    #bolck_zone .block_each .areaH{padding:14px 0 0 0}
    #bolck_zone .block_each .areaH-in{min-height:120px; padding:0 20px 10px 15px}
    #bolck_zone .block_each .areaJ{ background-color:#ccc;background-repeat:no-repeat;background-size:cover; background-position:50% 20%;height:75%;margin-bottom:1em}
    #bolck_zone .block_each .areaUSTV{ background-color:#fff;background-repeat:no-repeat;background-size:contain; background-position:50% 20%;height:65%;margin-bottom:1em}
    #bolck_zone .block_each .areaK{ background-color:#ccc;background-repeat:no-repeat;background-size:cover; background-position:center top;height:100%}
    #bolck_zone .block_each .img-JKlink {width:100%; height:100%; border:0}
    #bolck_zone .block_each .area-text{line-height:1.6}
    #bolck_zone .block_each h4 {font-size:1.3em}
    #bolck_zone .block_each h5 {font-size:1em}
    h4{color:#3388ff;line-height:1.4}
    h5{color:#3388ff;line-height:1.5;font-size:1.5em}
    .NewsHead { font-size:1.5em;}    
    .NewsHead li { font-size:1.3em;}    
    .NewsHead li {
      list-style-image: url(/group/15/images/Leading_Gray1.gif);
      margin-left:2em;
      margin-right:2em;
      text-indent: -1em;
      padding-left: 1em;
    }
    #bolck_zone .block_each .areaH-in li {
      list-style-image: url(/group/15/images/Leading_Gray1.gif);
      margin-left:20px;
      margin-right:20px;
      text-indent: -1.2em;
      padding-left: 1.6em;
      line-height:1.5; padding-bottom:0.6em
    }
    .areaF-in li {
      list-style-image: url(/group/15/images/Leading_Gray1.gif);
      /*margin-left:5px;*/
      margin-right:1px;
      text-indent: -1.2em;
      padding-left:1.6em;
      line-height:1.3; padding-bottom:0.5em

    }
    .NewsFont {font-size:1.5em;}        
    .NewsFont li { padding:0.3em;}
    .striped {background-color:#f9f9f9;border-top:1px solid #e8e8e8;border-bottom:1px solid #e8e8e8;}
    
    #underblock {clear:both;font-size:1.25em;line-height:1.8;}
    #underblock h5 {color:#333;font-size:1.3em;border-bottom:solid 1px #9d9d9d;padding:30px 0 10px 0;box-shadow: 0px 2px 0px #fff}
    #underblock hr {color:#9d9d9d;border-bottom:solid 1px #fff;height:1px;}
    #underblock li {list-style-type: none;padding-left:0.68em}    
    footer{min-height:88px;padding:1em;color:#aaaaaa;background-color:#453f3f;border-top:solid 1px #e8e8e8; font-size:1.2em;line-height:1.68;-webkit-border-radius: 0;-moz-border-radius: 0;border-radius: 0; }
    footer .footer {margin:0 auto;max-width:1278px; }
    .footer .TEL br { display:none}
    
    .br{clear:both}
    .br1x{padding-top:1em}
    .br2x{padding-top:2em}
    .br3x{padding-top:3em}
    .br4x{padding-top:4em}
    .x-small{ font-size: 11px;}
    
    .dropdown-menu {z-index:65537;}
    .dropdown-menu.columns-2 {
		min-width: 400px;
	}
    .dropdown-menu.columns-3 {
		min-width: 600px;
	}
	.multi-column-dropdown {
		list-style: none;
		margin: 0;
		padding:0;
	}
	.multi-column-dropdown li a {
		display: block;
		clear: both;
		line-height: 1.4;
		color: #333;
		white-space: nowrap;
	}
	.multi-column-dropdown li a:hover {
		text-decoration: none;
		color: #262626;
		background-color: #f5f5f5;
	}
    
    .ishop_padding {padding-top:15px;}

    @media screen and (min-width: 1280px){
        #bolck_zone .block_each {display:block;height:297px}
        #bolck_zone .block_each .areaH-in{min-height:120px}
        .img-info {max-height:160px}
        .center-cropped {min-height: 295px;}
        footer .footer{ padding-left:0.85em}
    }
    @media screen and (min-width: 1120px) and (max-width: 1279px){
        #bolck_zone .block_each {display:block;height:290px}
        #bolck_zone .block_each .areaH-in{min-height:110px}
        .img-info {max-height:140px}
        .center-cropped {min-height: 280px;}
    }
    @media screen and (min-width: 992px) and (max-width: 1119px){
        #bolck_zone .block_each {display:block;height:230px}    
        #bolck_zone .block_each .areaH-in{min-height:100px}
        .img-info {max-height:120px}
        .center-cropped {min-height: 250px;}
        .ishop_padding {padding-top:0px;}
    }
    @media screen and (min-width: 769px) and (max-width: 991px){
        #bolck_zone .block_each {display:block;height:343px}    
        #bolck_zone .block_each .areaH-in{min-height:100px}
        .img-info {max-height:150px}
        .center-cropped {min-height: 280px;}
    }
    @media screen and (width: 768px) {
        #bolck_zone .block_each {display:block;height:260px}    
    }    
    @media screen and (max-width: 767px){
        #bolck_zone .block_each .areaA, #bolck_zone .block_each .areaA,#bolck_zone .block_each .areaB, #bolck_zone .block_each .areaC, #bolck_zone .block_each .areaD, #bolck_zone .block_each .areaE, #bolck_zone .block_each .areaF, #bolck_zone .block_each .areaG, #bolck_zone .block_each .areaH,#bolck_zone .block_each .areaH-in
        {padding:15px}
        #bolck_zone .block_each, #underblock {font-size:1.5em }/*htc螢幕小且解析度高，字體會很小，作此修正*/
        .img-info {min-height:220px}
        .navbar-brand .logo_TTV{max-width:81px;max-height:80px}
        .footer .TEL br { display:block}
/*        .NewsFont { font-size:1.5em;}        
        .NewsFont li { font-size:1.2em;padding:0.2em;} */
        .text-right-align {text-align:left;}
    }


/* adjust body when menu is open */
body.slide-active {
    overflow-x: hidden
}
/*first child of #page-content so it doesn't shift around*/
.no-margin-top {
    margin-top: 0px!important
}
/*wrap the entire page content but not nav inside this div if not a fixed top, don't add any top padding */
#page-content {
    position: relative;
    padding-top: 0px;
    left: 0;
}
#page-content.slide-active {
    padding-top: 0
}


/* put toggle bars on the left :: not using button */
#slide-nav .navbar-toggle {
    cursor: pointer;
    position: relative;
    line-height: 0;
    float: left;
    margin: 0;
    width: 30px;
    height: 40px;
    padding: 10px 0 0 0;
    border: 0;
    background: transparent;
}
/* icon bar prettyup - optional */
#slide-nav .navbar-toggle > .icon-bar {
    width: 100%;
    display: block;
    height: 3px;
    margin: 5px 0 0 0;
}
#slide-nav .navbar-toggle.slide-active .icon-bar {
    background: orange
}
.navbar-header {
    position: relative
}
/* un fix the navbar when active so that all the menu items are accessible */
.navbar.navbar-fixed-top.slide-active {
    position: relative
}
/* screw writing importants and shit, just stick it in max width since these classes are not shared between sizes */
@media (max-width:767px) { 
	#slide-nav .container-menu {
	    margin: 0!important;
	    padding: 0!important;
        height:100%;
	}
	#slide-nav .navbar-header {
	    margin: 0 auto;
	    padding: 0 15px;
	}
	#slide-nav .navbar.slide-active {
	    position: absolute;
	    width: 80%;
	    top: -1px;
	    z-index: 1000;
	}
	#slide-nav #slidemenu {
	    background: #f7f7f7;
	    left: -100%;
	    width: 80%;
	    height:1000px;
	    min-width: 0;
	    position: absolute;
	    padding-left: 0;
	    z-index: 2;
	    top: -8px;
	    margin: 0;
	}
	#slide-nav #slidemenu .navbar-nav .nav2 .nav3 {
	    min-width: 0;
	    width: 100%;
	    margin: 0;
	}
	#slide-nav #slidemenu .navbar-nav .nav2 .nav3 .divider .dropdown-menu li a {
	    min-width: 0;
	    width: 100%;
	    white-space: normal;
	}
	#slidemenu .nav3 
	{
	    /*margin-left:90px;*/
	}
	
	#slide-nav {
	    border-top: 0
	}
	#slide-nav.navbar-inverse #slidemenu {
	    background-color:#333;
	}
	/* this is behind the navigation but the navigation is not inside it so that the navigation is accessible and scrolls*/
	#navbar-height-col {
	    position: fixed;
	    top: 0;
	    height: 100%;
        bottom:0;
	    width: 80%;
	    left: -80%;
	    background:#f7f7f7;
	}
	#navbar-height-col.inverse {
	    background-color:transparent;
	    z-index: -99999;
	    border: 0;
	}
	#slide-nav .navbar-form {
	    width: 100%;
	    margin: 8px 0;
	    text-align: center;
	    overflow: hidden;
	    /*fast clearfixer*/
	}
	#slide-nav .navbar-form .form-control {
	    text-align: center
	}
	#slide-nav .navbar-form .btn {
	    width: 100%
	}
	
	.dropdown-menu.multi-column {
			min-width: 0;
	        width: 100%;
			overflow-x: hidden;
		}
	
	
    /*20150623*/
    #slidemenu .nav3 { margin-top:0px; margin-left:75px;padding:0 0 0 0px;height:30px}
    #slidemenu .nav3 .navbar-left A:link,
    #slidemenu .nav3 .navbar-left A:visited,
    #slidemenu .nav3 .navbar-left A:active,
    #slidemenu .nav3 .navbar-right A:link,
    #slidemenu .nav3 .navbar-right A:visited,
    #slidemenu .nav3 .navbar-right A:active{ color:#9d9d9d;background-color:#333}
    #slidemenu .nav3 .navbar-left A:focus,
    #slidemenu .nav3 .navbar-left A:hover,
    #slidemenu .nav3 .navbar-right A:hover{ color:#fff} 
    #slidemenu .nav3 .navbar-left .dropdown-menu li a{ color:#555;background-color:#eee}
    #slidemenu .nav3 .navbar-left .dropdown-menu li A:hover{ color:#000;background-color:#fff}
    #slidemenu .nav3 .navbar-left .dropdown-menu .divider{ color:#555;background-color:#eee}
    /*20150623*/
  
}
@media (min-width:768px) { 
	#page-content {
	    left: 0!important
	}
	.navbar.navbar-fixed-top.slide-active {
	    position: fixed
	}
	.navbar-header {
	    left: 0!important
	}
}