/* ==============================================
　　RESPONSIVE SET
==============================================*/

/* 基本 */

.hidden-desktop {
    display: none !important;
}

.hidden-desktop-block {
    display: none !important;
}

.visible-table {
    display: none !important;
}

.visible-desktop {
    *display: inherit !important;
}


/*
@media 
only screen and (max-width: 760px),
(min-device-width: 500px) and (max-device-width: 1024px)  {
*/

/*@media (max-width: 580px) {*/

@media only screen and (min-height: 400px) {
    .con-height {
        min-height: 260px;
    }
}

@media only screen and (min-height: 768.99px) {
    .con-height {
        min-height: 460px;
    }
}

@media only screen and (min-width: 950px) {
    form div.row > label {
        float: left;
        width: 15%;
        text-align: right;
    }
}

@media only screen and (min-width: 768.99px) and (max-width: 949px) {
    form div.row > label {
        float: left;
        width: 15%;
        text-align: right;
    }
/*    form div.row > div {
        float: right;
        width: 88%;
        margin: 0;
    }*/
}



/*  首頁小BANNER-平板顯示 */
@media (min-width: 768px) and (max-width: 991px) {
    .visible-table {
        display: inherit !important;
    }
    #sad .hidden-desktop, #sad .visible-desktop {
        display: none !important;
    }
} 


@media (max-width: 767.99px) {
    * {
        /*-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;*/
    }
    .hidden-desktop {
        display: inherit !important;
        *display: inline-block;
    }
    .hidden-desktop-block {
        display: inline-block !important;
    }
    .visible-desktop {
        display: none !important;
    }


    /* ==============================================
	　　Structure Module
	============================================== */
    html {
        font-size: 100%;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }
    body {
        margin: 0px;
        /*font-size: 1em;*/
    }
    /* ==============================================
	　　Other Element
	============================================== */
    label {
        display: block;
        font-weight: bold;
    }
    /*輸入設定
	select {
		display: block;
		padding: 2%;
		width: 100%;
		font-size: 100%;
	}
	input[type="button"], input[type="submit"], input[type="reset"] {
		display: block;
		padding: 4%;
		width: 100%;
		font-size: 120%;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
	}
	input[type="text"] {
		width: 100%;
	}*/
    /* ==============================================
　　Margin
	============================================== */
    /*Top*/
    .mTop {
        margin-top: 5%;
    }
    /* ==============================================
　　Table
	==============================================*/
    /* Force table to not be like tables anymore */
    table,
    thead,
    tbody,
    th,
    td,
    tr {
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr,
    thead th {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr {
        padding: 1%;
        /*border-bottom: 1px solid #ccc;*/
    }
    tr :last-child {
        /*border-bottom: 0px;*/
    }

    td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
    }
    /*
	Label the data
	*/
    /*
	td:nth-of-type(1):before { content: "演出日期區間"; }
	td:nth-of-type(2):before { content: "節目名稱"; }
	td:nth-of-type(3):before { content: "場地"; }
	*/
    table {
        border: 0px;
        /*border-bottom: 1px solid #ccc;*ㄥ
        /*[diane]140429 因前端沒有加 end ，所以最後一筆不會有線，所以調整在此處加外框*/
    }
    table th {
        padding: 1px 5px;
        border: 0px;
    }
    table td {
	    padding: 2px 0px;
        border: 0px;
        font-size: 15px;
    }
    /*[diane]140429 統一在 table 外加外框
	tr.end {
		border-bottom: 1px solid #ccc; 
	}
	*/
    table.normal tr.gridc td {
        text-align: left;
    }
    /* order 特別指定*/
    table.normal tr th.dark {
        padding: 2%;
        color: #ffffff;
        background: #45bbff;
    }
    .order table.now tr {
        border: 1px solid #ccc;
    }
    .order table tr.wideline {
        /*[欣燕]140513 手機板加上粗的訂單分隔線*/
        border-top: 5px solid #666;
    }
    .order table.normal tr td span {}
    .order table.normal tr td em,
    .order table.normal tr td div {
        /*padding-left: 2%;*/
    }
    .order table.normal.now tr td span {}
    .order table.normal.now tr td em {}
    .order tr.tinfo_tr {
        /*[欣燕]140513 訂單票券資料格式設定(因把div放在table裡，要把框線除掉)*/
        border: none;
    }

    /* ==============================================
　　List Style
	==============================================*/
    ul.disc {
        margin: 0px;
        padding: 2%;
        list-style-type: none;
    }
    ul.disc li {
        white-space: normal;
        /*[diane]140418 手機版因應刪節號設定(手機板可以換行，所以不會有刪節號)*/
        border-bottom: 1px solid #c2c1c1;
    }
    ul.disc li div {}
    ul.disc li a {}
    ul.disc li a:hover {}

    /* faq */
    ul.disc.device {
        overflow: visible;
        /*[diane]140418 手機版因應刪節號設定*/
        padding: 2% 2% 2% 35px;
        list-style-position: outside;
        /*[diane]140418 手機版因應刪節號設定*/
        list-style-image: url(/image/icon_faq.png);
        background: #06466a;
    }
    ul.disc.device li {
        padding: 1% 2%;
        padding-left: 0%;
        border: 0px;
        white-space: normal;
        /*[diane]140418 手機版因應刪節號設定(手機板可以換行，所以不會有刪節號)*/
        overflow: visible;
        /*[diane]140418 手機版因應刪節號設定*/
    }
    ul.disc.device li a {
        vertical-align: top;
        color: #ffffff;
    }

    /* ========== 網頁區塊 ========== */
    /* ---------- #wrapper ---------- */
    /* ( #header + contain + #footer ) */
    #wrapper {
        margin: 0px;
        width: 100%;
        border: 0px;
        background: #ffffff;
    }
    #header {
        margin: 0px;
        padding: 0;
        width: 100%;
        height: 100%;
        background: url(/image/bg_navbar.png) no-repeat bottom center;
        display: inline-block;
    }
    #footer {
        margin: 0px;
        padding: 4% 2%;
        height: 100%;
        font-size: 80%;
        text-align: center;
    }
    .container {
        margin: 10px;
    }
    .container .container {
        margin: 10px 0px;
    }

    /* ---------- #header ---------- */
    /* ( logo + narbar + func ) */
    #header .logo {
        margin: 4% 2% 0 3%;
        width: 35%;
    }
    #header .nav {
        margin: 0;
        padding: 0;
        clear: both;
        width: 100%;
        text-align: center;
        border-bottom: 3px solid #007cc3;
        background: #ffffff;
        /* Old browsers */
        background: -moz-linear-gradient(top, #ffffff 10%, #dededd 100%);
        /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #ffffff), color-stop(100%, #dededd));
        /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #ffffff 10%, #dededd 100%);
        /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #ffffff 10%, #dededd 100%);
        /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #ffffff 10%, #dededd 100%);
        /* IE10+ */
        background: linear-gradient(to bottom, #ffffff 10%, #dededd 100%);
        /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dededd', GradientType=0);
        /* IE6-9 */
    }
    #header .func {
        margin: 6% 3%;
        margin-left: 0;
        vertical-align: middle;
        *height: 30px;
        overflow: hidden;
    }
    /* ----- #header -> navbar ----- */
    #header .nav div {
        padding: 2% 1%;
        width: 98%;
    }
    #header .nav div a span {
        *margin: 2%;
        padding: 1.8%;
        width: auto;
        font-family: "微軟正黑體", Arial, Verdana, Geneva, sans-serif;
        color: #007cc3;
        font-size: 1.4em;
    }
    #header .nav div a:hover {
        color: #ff00ff;
    }
    /* ----- #header -> #header .func ----- */
    .search {
        width: 201px;
        background: url(/image/bg_search.png) no-repeat right;
    }
    .search input {
        margin-left: 10px;
    }
    .community {
        clear: both;
        margin-top: 10%;
    }
    .community span {
        float: left;
        padding-left: 1%;
    }
    /* ---------- #footer ---------- */
    #footer .info {
        clear: both;
    }
    #footer a {
        color: #ffffff;
    }


    /* ----- contain -> container ----- */
    /* page-title & page-info */
    .container.page-title {
        margin-top: -10px;
        padding: 1% 2%;
        font-size: 80%;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }
/*    .container .page-info {
        *width: 830px;
        height: auto;
        margin-bottom: 0px;
        padding: 2%;
        *border-bottom: 0px;
        border-bottom: 1px dashed #007cc3;
        *background-color: #e4ecf5;
        *display: inline-block;
        text-align: left;
    }*/
    .page-title span {}
    .page-info span {}
    /* common */
    .date {
        *font-size: 0.8em;
    }
    .narrow_show,
    .narrow_hide {}
    .narrow_hide {}
    .caret {
        left: 10px;
    }
    /* activity */
    /*
	.videoS {
		z-index: 999; 
		position: relative; 
		float: right;
		top: 17px; 
		right: 10px; 
	}
	*/
    /*
	.videoS {
		padding-bottom: 2%;
	}
	*/
    /* login 
    .login-area {
        margin: 0%;
        padding: 5%;
        width: auto;
        height: auto;
    }*/
    .login-area .community div {
        margin: 0 0 10px;
    }
    /* btn */
    .btn_narrow {}
    .btn_narrow.L {}
    /* article-list */
    ul.article-list {
        padding: 2%;
        background: #ececec;
    }
    ul.article-list li {
        margin-bottom: 5px;
        padding: 2%;
        width: 96%;
        border-left: 0px;
        /*border-bottom: 1px solid #c2c1c1;*/
        /*14/4/8欣燕:因常見問題動態效果，註解css*/
    }
    ul.article-list div.con {
        /*14/4/8欣燕:因常見問題動態效果，加上此css*/
        margin-bottom: 5px;
        padding: 2%;
        width: 96%;
        border-left: 0px;
        /*border-bottom: 1px solid #c2c1c1;*/
    }
    ul.article-list div.line {
        /*14/4/8欣燕:因常見問題動態效果，加上此css*/
        border-bottom: 1px solid #c2c1c1;
    }
    ul.article-list.faq li {
        width: 96%;
    }
    ul.article-list.faq li .title {
        width: auto;
        font-size: 1.1em;
    }
    ul.article-list.faq li a .title {}
    ul.article-list.faq li a:hover .title {}
    ul.article-list.faq li .switch {
        display: block;
        *position: static;
    }
    ul.article-list.faq div .answer {
        /*14/4/8欣燕:因常見問題動態效果，將li改成div*/
        *margin-top: 2%;
        padding: 3%;
        background: #ffffff;
    }
    ul.article-list div.con {
        /*14/4/8欣燕:因常見問題動態效果，將li改成div*/
    }
    /* order */
    /*.flow-content {
		margin-top: -1px;
		padding: 2%;
	}*/
    .venue {
        clear: both;
        width: auto;
    }
    .area_select {
        clear: both;
        margin-top: 10px;
        width: 100%;
    }
    .zone {
        padding: 2%;
    }
    .zone.area-list {
        /*width: 95%; 323*/
        height: auto;
    }
    .zone.area-list.line1 {
        height: auto;
    }
    .area-list div {}
    .area-list span {}
    .short-contain {
        width: 100%;
    }
    .order .caret {}
    .order .zone {
        padding: 0px;
        border: 0px;
        background: #ffffff;
    }
    /* #pagination */
    #pagination {
        width: 95%;
        margin: 5% 0px;
        text-align: center;
    }
}

@media (max-width: 500px) {
    #header .nav div a span {
        font-size: 1em;
    }
    .search {
        width: 150px;
        background: url(/image/bg_searchS.png) no-repeat right;
    }
    .search input {
        margin-left: 4px;
        width: 113px;
        /*修改文字欄位寬度與圖相同*/
    }
}