﻿/*!
 * Start Bootstrap - Modern Business (http://startbootstrap.com/)
 * Copyright 2013-2016 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
 */

/* Global Styles */

html,
body {
    height: 100%;
    width:100%;
    right:0;
    left:0;

    font-family: 'Noto Sans TC', 'Microsoft JhengHei', '微軟正黑體', Verdana, Arial, 'Microsoft YaHei' !important;
}

body {
    /*padding-top: 50px;  Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}

.img-portfolio {
    margin-bottom: 30px;
}

.img-hover:hover {
    opacity: 0.8;
}

a {
    color: rgb(34, 34, 34);
    text-decoration: none;
    transition: 0.2s ease-in-out;
}

a:hover {
    text-decoration: none;
    }

::selection {
    background: #fd920c; /* Safari */
    color: #fff;
}
::-moz-selection {
    background: #fd920c; /* Firefox */
    color: #fff;
}

.radius_img {
    border-radius:50%;
    width:200px;
    height:200px;
}

img{
    overflow:hidden;
}

.search-filter{
     display:inline-block;
}

.result_title {
    font-size:18px !important;
    font-weight:600!important;
    line-height:130%!important;
    margin-top:15px !important;
}

.result_title span {
	font-size:14px;
	font-weight: normal;
}


.radius_img_2 {
    border-radius:50%;
    width:90%;
    margin: auto;
}
@media (max-width: 776px) {
    .radius_img_2 {
        border-radius:50%;
        width:70%;
        margin:20px  auto;
    }
}

 @media (min-width: 767px) {
    .margin_control {
        /*margin-top: 101px;*/
		margin-top:0px;
    }
}

 .margin_left {
        margin-left:10px;
    }

 .margin_auto{
     margin:0 20px;
 }

 @media (max-width: 766px){
    .margin_control{
		margin-top:0px;
	}
	.show_xs_margin
	{
		margin-top:59px !important;
	}
 }

.heigh-470 {
    height:470px;
}
.txt-18{
    font-size:18px;
}

.sidebar{
    float:right;
}

.news_title {
    font-size:20px;
    font-weight:600;
    line-height:130%;
    margin-top:5px !important;
}

 .list-title {
        margin-top:10px !important;
    }

@media(max-width:590px){
    .hp_list .col-xs-4, .hp_list .col-xs-8 {
        padding: 5px !important;
    }
    /*.hp_list .fb-like{
        display:none;
    }*/

    .hp_list{
        line-height:100%;
        margin-bottom:10px;
		border-bottom: 1px #ccc solid;
    }

	.timecode {
		font-size: 10px;
	}
}

.hp_list{
    margin-top:5px;
    margin-bottom:5px;
}

@media(max-width:768px) {
    .gridview {
        background: url(../img/scribble_light.png);
          overflow-x:hidden;
    }
    
    .pin {
        width:90%;
        display: inline-block;
        background: #FEFEFE;
        border: 2px solid #FAFAFA;
        box-shadow: 0 2px 2px rgba(34, 25, 25, 0.4);
        margin: 10px 20px;
        -webkit-column-break-inside: avoid;
        -moz-column-break-inside: avoid;
        column-break-inside: avoid;
        padding: 15px;
        background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
        opacity: 1;
        -webkit-transition: all .2s ease;
        -moz-transition: all .2s ease;
        -o-transition: all .2s ease;
        transition: all .2s ease;
    }

        .pin img {
            width: 100%;           
            padding-bottom: 15px;
            margin:5px auto;
        }

        .pin p {
            font: 18px;
            color: rgb(0, 0, 0);
            margin: 0;
        }
}


@media (max-width: 690px) {
    .list-title {
        margin-top:0px !important;
    }
}

.clear-fix {
    display: block;
}

@media (max-width: 440px) {
   .news_title {
        font-size:18px;
    }
}




.list-para {
    font-size:18px;
    color:#808080;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.au_tc {
    float:right;
    margin-top:15px;
}

.col_au_tc {
    float:left;
    margin-top:5px;
    clear:both;
}


.article_pic img{
    max-width:100%;
    /*margin-bottom:20px;*/
	margin-left:20px;
}

.timecode {
    color:#808080;
}


.tag_button {
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
    color: rgb(0, 0, 0);
    border-width: 1px;
    border-style: solid;
    border-color: #E2231A;
    border-image: initial;
    border-radius: 17px;
    background: transparent;
    padding: 1px 9px 2.5px;
    margin: 15px 5px 10px 3px;
}

.tag_button3 {
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
    color: rgb(0, 0, 0);       
     border-width: 1px;
    border-style: solid;
    border-color: #E2231A;
    border-image: initial;
    border-radius: 17px;
    background: transparent;
    padding: 1px 9px 2.5px;
    margin: 15px 5px 10px 3px;
  
}

.tag_button4 {
    font-size: 10px;
    text-decoration: none;
    display: inline-block;
    color: rgb(0, 0, 0);       
     border-width: 1px;
    border-style: solid;
    border-color: #E2231A;
    border-image: initial;
    border-radius: 17px;
    background: transparent;
    padding: 1px 9px 2.5px;
    margin: 5px;
  
}

.tag_button a {
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
    color: rgb(0, 0, 0);     
}


@media (max-width: 690px) {
    .tag_button {
         margin: 5px 5px;
    }
    .au_tc{
        margin-top:5px;
    }
	.tag_button a {
		font-size: 10px; 
    }
}


.related_news img {
    width: auto;
    max-width: 100%;
}

@media (max-width: 776px) {
    .related_news img {
        /*display:none !important;
        width:0%;
        height:0%;*/
    }
}

.related_news {
    overflow: hidden;
    padding-left: 5px;
    padding-right: 5px;
    display: block;
}

.related_news p {
    width: 100%;
    font-size: 18px;
    font-weight: 500;
    padding-top: 10px;
    height: auto;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    padding: 0px 0px !important;
}

.main_p {
    width:90%;
    margin:1em auto;
    font-size:20px;
    /*font-weight:200;*/
    line-height: 1.8em;
    color: #000000;
}

.thumbnail_desc {
    font-size:16px;
    line-height:130%;
    margin-top:5px;
}

.shareButton{
   position: fixed;
    left: 1%;
    bottom: 50%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-content: space-between;
}

.allShareBtn{
position: relative; float: left; display: block;
}

.shareLine{
margin: -8px 5px 0px 5px;"
}

.shareFacebook{
margin: -10px 5px 10px 5px;
}
.shareTwitter{
margin: -2px 5px 0px 5px;
}
.shareLinkedIn{
margin: -2px 5px 0px 5px;
}
.shareGPlus{
margin: -5px 5px 0px 5px;
}

@media only screen and (max-width:979px){
.shareButton{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-top: 14px;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: inherit;
}
.allShareBtn{
position: relative; float: left; display: inline-block;
}
.shareLine{
margin: -8px 5px 0px 5px;"
}
.shareFacebook{
margin: -10px 5px 0px 5px;
}
.shareTwitter{
margin: -2px 5px 0px 5px;
}
.shareLinkedIn{
margin: -2px 5px 0px 5px;
}
.shareGPlus{
margin: -5px 5px 0px 5px;
}
}

/*廣告*/
.ad_square img {
    margin-top:40px;
    /*width:100% !important;*/
}

.ad_leaderboard img{
    width:100%;
    margin-top:20px;
}




/*相關新聞*/

.related_news {
    overflow: hidden;
    padding-left: 5px;
    padding-right: 5px;
    display: block;
}

.scale_img {
    width: 100%;
    max-width: 100%;
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    -o-transition-property: -o-transform, opacity;
    transition-property: transform opacity;
    -webkit-transition-duration: 0.6s;
    -moz-transition-duration: 0.6s;
    -o-transition-duration: 0.6s;
    transition-duration: 0.6s;
    -webkit-transition-timing-function: ease;
    -moz-transition-timing-function: ease;
    -o-transition-timing-function: ease;
    transition-timing-function: ease;
}

.related_header {
 
    padding: 5px 0;
    border-bottom: 1px #ccc solid;
    margin: 0 15px 10px 15px;
}
/*社群媒體*/
.new_social_icon {
    margin: 20px 10px;
}

 .new_social_icon li.facebook a:before {
    content: "";
    width: 30px;
    height: 30px;
    overflow: hidden;
    display: block;
    background: transparent url(../images/new_social_icon_forpage30.png) no-repeat scroll 0 0;
    position: absolute;
    top: 5px;
    left: 5px;
}


/*kit*/
.m-t-10 {
    margin-top:15px;
}

.m-t-40 {
    margin-top:40px;
}

.m-b-20 {
    margin-bottom:20px;
}

.header_author{
    color:rgb(252, 250, 250);
    font-weight:500;
}

/*article header*/
.article_header {
    width:90%;
    margin:auto;
    margin-top:40px;
    line-height:150%;
    font-weight:500;
    font-size:30px;
    color: #2a4b6a;
}

.img_full {
    width: 90%;
    text-align: center;
    margin-bottom: 20px;
    margin: auto;
    overflow: hidden;
}

.img_full img {
    max-width: 100%;
}

#story_action {
    width: 90%;
    color: #535050;
    font-size: 16px;
    line-height: 28px;
    overflow: hidden;
    padding-bottom: 5px;
    border-bottom: 1px solid #cec6b9;
    margin: auto;
    margin-top: 5px;
    margin-bottom: 20px;
}

.au_time {
    width:90%;
    margin:auto;
    margin-top:10px;
    margin-bottom:15px;
    font-size:20px;
}


time {
    color: #999;
}
/*pagination*/

.pagination_div {
    margin-top:10px;
   
}

ul.pagination {  
    display: inline-block;
    padding: 0;
    margin:  auto;
    margin-top:30px;
    margin-bottom:30px;
}

ul.pagination li {display: inline;}

ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
	cursor: pointer;
}



ul.pagination li a.active {
    background-color:#fd920c;;
    color: white;
}

/*channel main vision*/
.col1_bg{
    background-image: url('../img/col1.JPG');
    text-shadow:1px 1px 1px #000;
    color:white;
    width:100%;
    height:412px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    margin:0 0;
}



.col2_bg{
    background-image: url('../img/col2.JPG');
    text-shadow:1px 1px 1px #000;
    color:white;
    width:100%;
    height:412px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    margin:0 0;
}



.col3_bg{
    background-image: url('../img/col3.JPG');
    text-shadow:1px 1px 1px #000;
    color:white;
    width:100%;
    height:412px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    margin:0 0;
}

.col4_bg{
    background-image: url('../img/col4.JPG');
    width:100%;
    height:412px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    margin:0 0;
}


.col0_bg{
    text-shadow:1px 1px 1px #000;
    color:white;
    width:100%;
    height:412px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    margin:0 0;
}
.col_desc {
    padding-top:10px !important;
    position: absolute;
    bottom:0px;
    background-color: rgba(0, 0, 0, 0.51);
    width: 100%;
    padding: 30px 30px 10px;
}


.col3_bg .col_desc {
    padding-top:10px !important;
    position: absolute;
    bottom:20%;
    background-color: rgba(0, 0, 0, 0);
    width: 100%;
    padding: 30px 30px 10px;
}


.col1_bg .col_desc {
    padding-top:10px !important;
    position: absolute;
    bottom:20%;
    background-color: rgba(0, 0, 0, 0);
    width: 100%;
    padding: 30px 30px 10px;
}

.col2_bg .col_desc {
    padding-top:10px !important;
    position: absolute;
    bottom:20%;
    left:10%;
    background-color: rgba(0, 0, 0, 0);
    width: 500px;
    padding: 30px 30px 10px;
}

@media (max-width:630px){
   
    .col2_bg .col_desc {
        padding-top:10px !important;
        position: absolute;
        bottom:10%;
        left:10%;
        background-color: rgba(0, 0, 0, 0);
        width: 80%;
        padding: 30px 30px 10px;
    }
}


.col4_bg .col_desc {
    padding-top:10px !important;
    position: absolute;
    bottom:20%;
    background-color: rgba(0, 0, 0, 0);
    left:10%;
    width: 500px;
    padding: 30px 30px 10px;
}

@media (max-width:630px){
   
    .col4_bg .col_desc {
        padding-top:10px !important;
        position: absolute;
        bottom:10%;
        left:10%;
        width: 80%;
        padding: 30px 30px 10px;
    }
}


.col4_bg .col_sub {
    font-size:20px;
    font-weight:300;
    color:rgb(0, 0, 0);
}

.col4_bg .col_title p{
    color:rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0);
}

  
.col0_bg .hp_title{
     color:rgb(0, 0, 0);
     background-color: #808080;
     height:100%;
}


.col_title p{
    font-size:36px;
    font-weight:900;
    color:rgb(252, 250, 250);
    margin:0 0 !important;
}

.col_sub {
    font-size:20px;
    font-weight:300;
    color:rgb(252, 250, 250);
}


@media (max-width: 440px) {
    .col_desc {
        width:100%;
        bottom:0px;
    }
}

/*sidebar*/

.sidebar ul {
  list-style-type: none;
  width: 100%;
  padding-left:0 !important;
}


.sidebar h4 {
  margin:0 0 !important;
  line-height:140%;
}

.sidebar li img {
  float: left;
  margin: 0 15px 0 0;
}


.sidebar li {
  padding: 10px;
  overflow: auto;
}

.sidebar .hot_a li h4 {
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.sidebar .hot_a li p {
    margin-top:8px;
    /*font-weight:300;*/
    font-size:18px;
}

.sidebar .hot_a li span {
    margin-left:20px;
}

.sidebar li:hover {
  background: #eee;
  cursor: pointer;
}

.sidebar img{
    width:120px;
}

.ad_square img{
    width:336px;
}

/* Home Page Carousel */


header.carousel {
    height: 412px;
}

@media (max-width: 440px) {
    header.carousel {
    height:235px;
    }
}


header.carousel .item,
header.carousel .item.active,
header.carousel .carousel-inner {
    height: 100%;
}

header.carousel .fill {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
}

header.carousel .fill2 {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: contain;
}

/*logo*/
.digi_logo {
    overflow-y:hidden;
    width:150px;
}


/*img_new*/
    .img_new {
		/*width: 100%;
		max-width: 251px;*/
		max-width: 100%;
        margin-top: 20px;
        min-width:80px;
    }

@media(max-width:691px) {
    .img_new {
        width: 100%;
        margin-top: 0px;
    }
}

/*show and hide*/
@media(max-width:767px) {
    .hide-on-smartphone {
        display: none !important;
        width: 0;
        height: 0;
    }
}

@media(max-width:960px) {
    .hide-on-892 {
        display: none !important;
        width: 0;
        height: 0;
    }
}

/* 404 Page Styles */

.error-404 {
    font-size: 100px;
}

/* Pricing Page Styles */




/* Footer Styles */

#footer {
    width: 100%;
}

.footer {
    color: #dadada;
    background: #565454;
    padding-top: 60px;
    padding-bottom: 20px;
    text-align: center;
}

.footer-links a, .footer-links {
    list-style: none;
    font-weight: 300;
    color: #ffffff;
    padding: 0px 0 10px;
    margin: 0;
	font-family: "微軟正黑體", sans-serif !important;
}

/* Responsive Styles */

@media(max-width:991px) {
    .customer-img,
    .img-related {
        margin-bottom: 30px;
    }
}

@media(max-width:767px) {
    .img-portfolio {
        margin-bottom: 15px;
    }

    header.carousel .carousel {
        height: 70%;
    }
}

@media screen and (max-width:480px){
	.main_p { font-weight:400;}
	.article_pic img {margin:0;}
}