﻿/* 因為雲控的code比較悠久一點,無法直接套用reset.css這個共用修整CSS.所以先特例的寫補丁CSS來修這個問題 by-hawaii@20140811 */
#topbar { z-index: 1000; position: relative; }
#topbar a { text-decoration: none; }
.viewport,.barNav,.cmHdr ,.mobi-navi-wrap * { position: relative; }
button, input[type="button"], input[type="submit"], input[type="reset"] { -webkit-appearance: none; }


/* 手機版 首頁.服務條款 */
@media screen and (max-width: 768px) {
    #b-out { width: auto; padding-top: 190px; }

    /* 登入/進入/按鈕區 */
    .rig-out { width: auto; height: auto; background-image: none; top: -190px; left: 30px; background-color: #CCC; }

    .rig-tbout { margin-top: 5px; top: 0px; left: 50px; position: absolute; }

    .not-login .rig-tbout tr:nth-child(1),
    .is-login .rig-tbout tr:nth-child(4),
    .rig-tbout tr:nth-child(3) { display: none; }

    .is-login .rig-tbout tr:nth-child(1) td { padding-top: 25px; }

    .is-login .rig-tbout tr:nth-child(2) td { padding-top: 5px; }

    .not-login .rig-tbout tr:nth-child(2) td,
    .not-login .rig-tbout tr:nth-child(4) td { padding-top: 20px; }

    .rig-tbout tr:nth-child(5) { display: inline-block; position: absolute; top: 0px; right: -350px; }

    .blue-out { width:auto; padding:0 0 0 45px ;}
    .exp-out { margin: 20px auto 0 ;}

    /* 三個通知廣告 區塊 */
    .exp-out-b { width:auto; margin: 40px -20px 0;}

    .say-out, .say-out-b { width: 196px; padding: 10px 20px; margin: 0px; }

    .say-tit { width: 200px; height: 53px; background-position: top center; border-left: 1px #CCC solid; border-right: 1px #CCC solid; }

    .mw { width: auto; margin-bottom: 10px; }

    .say-out img, .say-out-b img { width: 60px; height: 60px; }

    .infin { width: 120px; float: none; width: auto; padding-left: 60px; }

    /* 一個橫向廣告 區塊 */
    .ae-show { width: 643px; padding-left: 30px; margin: 40px 0 0;  }

    .ae-show .text { margin-left: 0px; }

    .ae-rig-out { margin-left: 0px; }

    /* 雲控推薦 (廣告圖 + youtube) */
    .exp-out-c { width: 675px; margin: 40px 0; }

    .exp-out-c .videos-control {margin:0px; }
    .exp-out-c .videos-control iframe { width: 365px; height: 240px; }


    /* 服務條款 */
    .service-terms > tbody > tr:nth-child(1) > td,
    .service-terms > tbody > tr:nth-child(3) > td {
        text-align: center;
        padding: 10px;
    }
    #contract {
        width: 95%!important;
        margin: auto;
    }
    
    #contract .jspContainer {
        width: auto!important;
    }
    #contract .jspPane,
    #contract .service-terms-detail {
        width: auto!important;
    }
    /*#contract *{
        width: auto!important;
    }*/
}
@media screen and (max-width: 360px) {

    #b-out { padding-top: 0px; }

    .blue-out {width: 100%; background-image: none; padding: 350px 0 0; }

    .is-login .blue-out { padding-top: 250px; }

    /* 資料區 隱藏 */
    .exp-out { display: none; }

    /* 登入/進入/按鈕區 */
    .rig-out { width: auto; height: auto; background-image: none; top: 0px; left: 30px; background-color: #CCC; }

    .rig-tbout { margin-top: 10px; top: 0px; left: 35px; position: absolute; }

    .is-login .rig-tbout tr:nth-child(4),
    .rig-tbout tr:nth-child(1),
    .rig-tbout tr:nth-child(3) { display: none; }

    .is-login .rig-tbout tr:nth-child(2) td,
    .not-login .rig-tbout tr:nth-child(2) td,
    .rig-tbout tr:nth-child(2) td,
    .rig-tbout tr:nth-child(4) td { display: block; padding-top: 10px; }

    .rig-tbout tr:nth-child(5) { display: block; position: relative; top: auto; right: auto; padding-top: 10px; }

    /* 三個通知廣告 區塊 */
    .exp-out-b { width: auto; float: none; margin: 40px auto 10px; }

    .say-out, .say-out-b { width: auto; float: none; background: none; }

    .mw,
    .say-tit { width: auto; float: none; }
    .say-tit {  background: #F6F6F6; border:1px solid #dedede;}

    .say-out img, .say-out-b img { margin-top: 0px; margin-right: 5px; }

    .infin { margin: auto; margin-left: 8px; }

    /* 一個橫向廣告 區塊 */
    .ae-show * { width: auto; float: none; }
    .ae-show { width: auto; height: auto; float: none; background-position: bottom; padding: 8px 15px; margin: 30px 20px 10px 20px; position: relative; }
    .ae-show .text { float: none; width: auto; margin: 0px; font-size: 16px; }
    .ae-show .ae-rig-out { margin-left: 0px; float: none; }
    .ae-free { width: 43px; }
    .rig-b-s-text { display: none; }

    /* 雲控推薦 (廣告圖 + youtube) */
    .exp-out-c { width: auto; margin: 10px 20px 20px 20px; }
    .exp-out-c * { width: auto; max-width: 320px; }
    .exp-out-c tr, .exp-out-c td { width: auto; display: block; }
    .exp-out-c td { padding-bottom: 20px; }
    .exp-out-c img.adv {width:315px; }
    .exp-out-c .baseline { margin-bottom: 0px !important; }
    .exp-out-c .videos-control iframe { width: 310px; height: 210px; }
    
    /* 服務條款 */
    
    .service-terms > tbody > tr:nth-child(4) input {
        margin: 5px auto 0;
        display: block;
        width: 180px!important;
    }
}
@media screen and (max-width: 320px) {

    /* 登入/進入/按鈕區 */
    .rig-tbout { left: 20px; }

    /* 一個橫向廣告 區塊 */
    .ae-show .text { font-size: 13px; padding-right: 7px; line-height: normal; margin-bottom: 15px; }

    /* 雲控推薦 (廣告圖 + youtube) */
    .exp-out-c * { max-width: 275px; }

    .exp-out-c .videos-control iframe { width: 270px; height: 190px; }
}

/* 手機版 內容 */
@media screen and (max-width: 768px) {

    #wrapper { box-sizing: border-box; width: auto; margin-bottom: 0px; padding:10px; }
    /* 左側區塊 - 因為左側有了，所以拿掉 by 2014.12.04 Sprint [2014 Q4 客服專案] [行動版 bar變更] */
    #main-tmp-menu {display: none; /* width: auto; margin-left:0;*/}
    #main-tmp-menu li { display: inline-block; }
    #watch-left-menu ul a { border-radius: 10px; padding-left:11px; }
    #watch-left-menu .on-page a {  padding-left:11px; }
    #watch-left-menu ul .on-page a {  padding-left:1px; }


    /* 右側區塊 */
    #main-b-tmp-02 { width: auto; box-sizing: border-box; margin-top: 5px; }
    .out-line { width: auto; }

    /*#main-b-tmp-02 * {
        width: auto;
    }*/
    .td-bd-c { margin:0!important; }
    .td-bd-m { position: relative!important;}
    /* 新增條件 / 顯示監控數量 區塊 */
    .blue-bar { height: auto; background-color: #BDD0DF; }
    .inbox-inf { width: auto; margin: 10px 5px; line-height: normal; }

    /* 績效驗證 */
    .notice-back-verify { padding: 10px; width: 716px; }
    .notice-back-verify #loading { top: 340px!important; }
    .notice-back-verify #select-bar table { width: auto; }
    .notice-back-verify #select-bar table .botton-up-add { margin-left: 15px; }
    .notice-back-verify #events > .list { width: 100%; }
    .notice-back-verify #events .scroll-list .list { width: 703px; }
    .notice-back-verify .use-out-scall-bar table tr:nth-child(2) > td:first-child > div:first-child { width: 630px!important; }
    /* 圖 */
    .notice-back-verify #container { height: 460px; }
    .notice-back-verify #container .highcharts-container { -webkit-transform: scale(.9); -webkit-transform-origin: 0 24px; }
    /* 圖內 數據定位 調整 */
    .notice-back-verify #info3 { top: 535px!important; }


    /* 下載/設定 */
    .out-line_Away { width:93%;}
    .out-line_Away .setMenu * { font-size: 18px; }
    .out-line_Away .setMenu li:last-child a { padding-left:1.99em; padding-right:1.8em;}
    .out-line_Away img {max-width: 600px;}
    .out-line_Away.set .boxHeading { width: auto; margin-right: -40px; }

    /* 操作說明 */
    .videos-control span { display: block; }
    .videos-control iframe { width: 710px; height: 435px; }

    /* 最下方說明區塊 */
    .note { width: auto; }
}
@media screen and (max-width: 360px) {

    /* 左側menu */
    #watch-left-menu ul .on-page a:hover,
    #watch-left-menu ul .on-page a { width: 165px; }
    #watch-left-menu ul a { width: 155px; border-radius: 10px; }
    #main-tmp-menu li { margin-right:1px; }

    /* 通知紀錄 搜尋輸入框 */
    .notice-record .inbox-inf { float: left; }

    /* 新增條件 / 顯示監控數量 區塊 */
    .inbox-inf { margin: 5px; }

    .use-out-scall-bar { height: auto!important; overflow: auto; }

    .td-bd-c, .td-bd-c td { height: auto; }
    /* 隱藏部分 監控列表 */
    .td-bd-c td:nth-child(n+4),
    .td-bd-m td:nth-child(n+4) { display: none!important; }
    /* 監控個股 */
    .td-bd-c td:nth-child(2),
    .td-bd-m td:nth-child(2) { width: 75px; }
    .td-bd-c .tb-key-box { width: 70px; }

    /* 監控條件 */
    .td-bd-c td:nth-child(3) .chart-b,
    .td-bd-c td:nth-child(3) .botton-image { display: none; }
    .td-bd-c td:nth-child(3) .tb-key-box-tell { width: 100%!important; word-wrap: break-word; word-break: break-all; white-space: normal; float: none; display: inline; box-sizing: border-box; }

    .td-bd-m td:nth-child(3) .sort-text { width: 50px; white-space: nowrap; /*不換行*/ overflow: hidden; /*溢位部分隱藏起來*/ margin: auto; }

    /* 到時到價 監控條件 */
    .td-bd-c .select-condition { width: 125px!important; }
    .td-bd-c .tb-key-box-money { width: 100px!important; margin-left: 0px; margin-top: 5px; }

    /* 績效驗證*/
    .notice-back-verify {  padding: 8px; width: 100%; box-sizing: border-box; }
    .notice-back-verify .use-out-scall-bar table tr:nth-child(2) > td:first-child > div:first-child { width: 313px!important; }

    .notice-back-verify #loading { top: 450px!important; width: 90%!important; }
    .notice-back-verify #loading table { width: 100%; }
    .notice-back-verify #select-bar td:nth-child(2) { display: none; }
    .notice-back-verify #select-bar td { width: auto; display: inline-block; float: none; padding-left: 0px; padding-right: 10px; }
    .notice-back-verify #select-bar td:nth-child(4) div { margin-left: -6px; }
    .notice-back-verify #select-bar { width: 265px; }


    /* 開始.結束 */
    .notice-back-verify .basic-info-div,
    .notice-back-verify .basic-info-div input,
    .notice-back-verify #container > div:first-child > div { display: none!important; }


    .notice-back-verify #container { height: 200px; margin-top: 10px; }

    .notice-back-verify > div > table { margin: 0px; }
    /* 圖 */
    .notice-back-verify #container .highcharts-container { display: block; -webkit-transform: scale(.4); -webkit-transform-origin: 0 0; }


    /* 圖內 數據定位 調整 */
    .notice-back-verify #info2,
    .notice-back-verify #info3 { left: 999px!important; display: none!important; }
    .notice-back-verify tr:nth-child(3) { display: none; }
    .notice-back-verify > div { height: auto!important; }


    /* 下載/設定 */
    .out-line_Away { padding: 6px; }
    .out-line_Away * { width: auto; height: auto; font-size: 18px; }

    .out-line_Away .setMenu * { font-size: 15px; }
    .out-line_Away .setmenubottom { background: none; border-radius: 0px; border: 0px; margin-bottom: 10px; }
    .out-line_Away .setMenu a { font-size: 15px; font-weight: bold; line-height: normal; padding: .3em .8em; margin-bottom: .5em; border-radius: 7px; }
    .out-line_Away .setMenu li:first-child a { border-radius: 7px; }
    .out-line_Away .setMenu li:last-child a { border-radius: 7px; }

    .out-line_Away .conT { font-weight: bold; margin-bottom: 10px; }
    /* 下載/設定 ： 下載電腦版小軟體 */
    .out-line_Away .conT .setupLink { display: inline-block; font-size: 16px; margin-left: 10px; }

    .out-line_Away .topTips * { font-size: 15px; }
    .out-line_Away .topTips { right: -160px; }
    .out-line_Away .topTips:before, .out-line_Away .topTips:after { right: 155px; }

    /* 下載/設定 ： 軟體操作說明 */
    .out-line_Away .opList { margin: 0px; top: 12%; left: 8%; }
    .out-line_Away .opList a { font-size: 18px; width: auto; line-height: normal; padding: 10px 20px; background-position: center; }
    .out-line_Away .opList a:before { font-size: 18px; width: 130%; top: -81px; left: -41px; }


    .out-line_Away .step { padding: 10px 0; min-height: 150px; }
    .out-line_Away .step input { font-size: 15px; padding: 0 .5em; margin: .1em .1em; }
    .out-line_Away img { max-width: 250px; }
    .out-line_Away .pic { margin-bottom: 10px; }

    /* 下載/設定 ： 設定 */
    .out-line_Away.set .box * { font-size: 15px; }
    .out-line_Away.set .mail { width:180px;}
    .out-line_Away.set .check { margin-bottom: 10px; float: none;}
    .out-line_Away.set .tips2 { margin-left: 0; float: none;}

    /* 操作說明 */
    .videos-control iframe { width: 300px; height: 203px; }
}
@media screen and (max-width: 320px) {

    /* 左側menu */
    #watch-left-menu ul .on-page a:hover,
    #watch-left-menu ul .on-page a { font-size: 13px; width: 145px; }
    #watch-left-menu ul a { font-size: 13px; width: 135px; }

    /* 新增條件 / 顯示監控數量 區塊 */
    .inbox-pad,
    .botton-up-add { width: auto!important; font-size: 12px; }
    .tb-key-box { width:100px; }
    .inbox-pad { padding: 6px 0 0 5px; }

    /* 到時到價 監控條件 */
    .td-bd-c .select-condition { width: 90px!important; }
    .td-bd-c .tb-key-box-money { width: 65px!important; margin-left: 0px; margin-top: 5px; }

    /* 績效驗證*/
    .notice-back-verify { /*width: 278px;*/ }
    .notice-back-verify #select-bar td { padding-right: 5px; }
    .notice-back-verify #select-bar table .botton-up-add { margin-left: 0px; }
    .notice-back-verify .use-out-scall-bar table tr:nth-child(2) > td:first-child > div:first-child { width: 273px!important; }

    /* 圖 */
    .notice-back-verify #container .highcharts-container { -webkit-transform: scale(.35); }

    .notice-back-verify #container { height: 170px; }

    /* 通知紀錄 搜尋輸入框 */
    .notice-record .inbox-inf input[type="text"] { width: 120px; }

    /* 下載/設定 */
    .out-line_Away * { font-size: 15px; }
    .out-line_Away .setMenu a { font-size: 13px; }
    .out-line_Away .step input { font-size: 13px; height: auto; padding: .3em .5em; }
    .out-line_Away .opList { top: 14%; }
    .out-line_Away .opList a { font-size: 15px; font-weight: bold; }

    /* 下載/設定 ： 設定 */
    .out-line_Away.set .box * { font-size: 14px; }
    .out-line_Away.set .box { padding: 10px; }
    .out-line_Away.set .boxHeading { width: auto; margin-right: -20px; top: -10px; left: -10px; }
    .out-line_Away.set .mail { width:160px;}


    /* 操作說明 */
    .videos-control iframe { width: 260px; height: 177px; }
}
