@charset "utf-8";
/******  此CSS設定所有與版型相關的設定 ******/

/*add by 9338*/
@media only screen and (max-width: 99999px) {
    .wrap_ct{
        max-width: 1920px; /*閱讀視覺的寬度*/
        /*width: 100%; /*邊界會超出螢幕*/
        height: 100%; /*可選*/
        margin-right: auto; margin-left: auto; /*必要條件*/
    }

    /* mainFrameHeader */
    #mainFrameHeader{
	    padding: 0 .2em 0 .2em;
	    height: 60px;
	    color: #888;
        background-color: white;
	    font-size: 1em;
	    font-weight: bold;
    }

    #mainFrameHeader span {
        padding: 0 0 0 0;
        margin: 0 0;
        display: inline-block;
        position: relative;
    }
	#mainFrameHeader img{
		padding: 0 .3em 0 .3em;
	}

	#mainFrameHeader p{
		margin-bottom:.4em;
	}
	#mainFrameHeader ul{
		list-style-type:none;
	}
	#mainFrameHeader dt{
		float:right;
		margin-right:.5em;
	}
	#mainFrameHeader a{
		color: #888;
		text-decoration:none;
		cursor:pointer;
		font-weight:bold;
	}
	#divTopBar a:link, #divLanguage a:link, #mainFrameHeader a:link{
		color: #888;
		cursor:pointer;
		text-decoration:none;
		font-weight:bold;
		margin: 0 10px;
	}
	#mainFrameHeader a:hover{
		font-weight:bold;
		text-decoration:underline;
		cursor:pointer;
		color: brown;
	}

	#headerLogo{
		height: 2.5em;
		background-attachment: scroll;
		background-position: center center;
	}
	#headerBanner{
		height: 56px;
		background-attachment: scroll;
		background-position: center center;
	}

	/* mainFrame */
	#mainFrame{
		padding: 0em;
		margin: 0em;
		width: 100%;
	}

	#divTopBar { color: #888; position: absolute; top: .3em; right: 1em; }
    #divTopBar a, #divLanguage a{ color: #888; margin-left: 20px; }

	/* mainFrameContentContainer */
	#mainFrameContentContainer{
		padding: 0em 1em 1em 1em;
		min-height: 17em;
	}

	#uHello {
		float: left;
		line-height: 60px;
		padding: 15px;
		font-size: 16px;
	}

	.clear{
		clear: both;
	}


    .img_responsive{
        max-width: 100%;
        height: auto;
        display: block;
    }

    /*add by 9344 for weathermap RWD*/
    .weathermap_RWD{
        width: 60%;
        /*置中*/
        display: block;
        margin:auto;
    }
    .flow_RWD{
        width: 60%;
        /*置中*/
        display: block;
        margin:auto;
    }

    /*add by 9344 for ability RWD*/
    .ability_class{
        width: 15%;
    }
    .ability_point{
        width: 42%;
        background: white;
    }
    
    /*add by 9344 for network structure*/
    .network_content h1{
        text-align: left;
        font-size: 2em;
        font-weight: bold;
    }
    .network_content h2{
        text-indent : -2em;
    }
    .network_content h3{
        text-indent : -4em;
    }

    /*add by 9344 for job recommend*/
    .inf {
        width: 40%;
    }
    .job_search {
        width: 20%;
    }

    /*add by 9344 for network test*/
    .testResult{
        width:40%;
        text-align: center;
        /*置中*/
        display: block;
        margin:auto;
    }

    /*add by 9344 for teacher quality*/
    .tqData{
        width:90%;
        text-align: center;
        /*置中*/
        display: block;
        margin:auto;
    }

    .tmData {
        width:40%;
        /*置中*/
        display: block;
        margin:auto;
    }

    /*add by 9344 for 點餐系統*/
    .order {
        width:90%;
        /*置中*/
        display: block;
        margin:auto;
    }
    .order .footable > tbody > tr > td{
        text-align: center;
    }
    .order .footable > tbody > tr > td.footable-cell-detail {
        text-align: left;
    }

    .product {
        width:90%;
        /*置中*/
        display: block;
        margin:auto;
    }
    .product .footable > tbody > tr > td{
        text-align: center;
    }
    .product .footable > tbody > tr > td.footable-cell-detail {
        text-align: left;
    }
    .product .footable > tbody > tr > td > a > img {
        width: 100px;
        height: 100px;
    }

    .cProfile {
        width:90%;
        display:block; 
        margin:auto;
    }
    .cProfile .footable > tbody > tr > td > a > img {
        width: 100px;
        height: 100px;
    }

    /**如果螢幕寬度小於800px 就以100%為主 否則為800px*/
    .oneHundredPercentAndLessThen800px {
        width: 100%;
        max-width: 800px;
    }

    .Pay {
        width:20%;
        display:block; 
        margin:auto;
}
    .Pay .footable > tbody > tr > td{
        text-align: center;
    }

    .dispatcher {
        width:40%;
        display:block; 
        margin:auto;
    }
    .dispatcher .footable > tbody > tr > td{
        text-align: center;
    }

    /*response css*/
    .responseRWD {
        width:40%;
        text-align: center;
        /*置中*/
        display: block;
        margin:auto;
    }

    .responseRWD .rwd-table > tbody > tr > td > a > img {
        width: 320px;
        height: 240px;
        display: block;
        margin:auto;
    }

    .logo_img{
        height: 50px;
        float: left;
        margin: 5px 10px;
    }
}

@media only screen and (max-width: 1080px) {
    .wrap_ct{
        max-width: 1080px; /*閱讀視覺的寬度*/
    }

    .img_responsive{
        max-width: 75%;
    }

    #mainFrameHeader{
	    height: 100px;
    }

    #mainFrameHeader #school {
        display: none;
    }
    
    #mainFrameHeader span {
        top: 5%;
    }

    /*add by 9344 for weathermap RWD*/
    .weathermap_RWD{
        max-width: 100%;
    }
    .flow_RWD{
        width: 100%;
    }

    /*add by 9344 for ability RWD*/
    .ability_class{
        width: 30%;
    }
    

    /*add by 9344 for job recommend*/
    .inf {
        width: 50%;
    }
    .job_search {
        width: 30%;
    }
    
    .oneHundredPercentAndLessThen800px {
        width: 100%;
        max-width: 800px;
    }
}

@media only screen and (max-width: 860px) {
    .wrap_ct{
        max-width: 860px; /*閱讀視覺的寬度*/
    }

    .img_responsive{
        max-width: 75%;
    }

    #mainFrameHeader .logo_img{ display: none; }
    #mainFrameHeader #school { display: none; }
    
    /*div {
        clear: both;
    }*/

    /*add by 9344 for ability RWD*/
    .ability_point{
        width: 90%;
    }
    .ability_class{
        width: 50%;
    }
    .ability_point img{
        width: 80%;
    }

    /*add by 9344 for job recommend*/
    .inf {
        width: 80%;
    }
    .job_search {
        width: 40%;
    }

    /*add by 9344 for network test*/
    .testResult{
        width:90%;
        text-align: center;
        /*置中*/
        display: block;
        margin:auto;
    }

    /*add by 9344 for 點餐系統*/
    .order {
        width:90%;
        font-size:medium;
    }

    .product {
        width:90%;
        font-size:medium;
    }

    .cProfile {
        width:90%;
        display:block; 
        margin:auto;
    }

    .oneHundredPercentAndLessThen800px {
        width: 90%;
        max-width: 800px;
    }

    .Pay {
        width:50%;
    }

    .dispatcher {
        width:90%;
    }

    .responseRWD {
        width:90%;
        text-align: center;
        /*置中*/
        display: block;
        margin:auto;
    }
    .responseRWD .rwd-table > tbody > tr > td > a > img {
        width: 200px;
        height: 100px;
    }
}

@media only screen and (max-width: 640px) {
    .wrap_ct{
        max-width: 640px; /*閱讀視覺的寬度*/
    }

    .weathermap_RWD{
        width: 100%;
        height: 100%;
    }

    /*add by 9344 for ability RWD*/
    .ability_class{
        width: 90%;
    }
    .ability_point{
        width: 90%;
    }
    .ability_point img{
        width: 100%;
    }

    /*add by 9344 for job recommend*/
    .inf {
        width: 90%;
    }
    .job_search {
        width: 90%;
    }
    
    /*add by 9344 for network test*/
    .testResult{
        width:90%;
        text-align: center;
        /*置中*/
        display: block;
        margin:auto;
    }

    /*add by 9344 for 點餐系統*/
    .order {
        width:90%;
    }
    
    .product {
        width:90%;
    }
    
    #mainFrameHeader span {
        top: 20%;
    }

    #uHello {
        top: 20%; left: 5px;
    }
    
    .oneHundredPercentAndLessThen800px {
        width: 80%;
    }
    .Pay {
        width:90%;
    }
}

@media only screen and (max-width: 480px) {
    .wrap_ct{
        max-width: 480px; /*閱讀視覺的寬度*/
    }

    .wrap_ct #uHello{
        font-size: .5em;
        /*margin-top: -1em;*/
    }

    .wrap_ct span a {
        display: inline-block;
        padding-bottom: 5px;
    }
    .wrap_ct span a img {
        width: 60%;
    }

    /*add by 9344 for ability RWD*/
    .ability_class{
        width: 90%;
    }
    .ability_point{
        width: 90%;
    }
    .ability_point img{
        width: 100%;
    }

    /*add by 9344 for network test*/
    .testResult{
        width:90%;
        text-align: center;
        /*置中*/
        display: block;
        margin:auto;
    }

    .oneHundredPercentAndLessThen800px {
        width: 90%;
    }
}