@charset "utf-8";
@import url("reset.css");
/* CSS Document */
/* 清除一些預設值 */
        *{
            padding:0;
            margin:0;
            list-style:none;
            box-sizing:border-box;
            /* outline:1px solid #f00; */
        }






/* 以下是將字型、行高設定 */
        html,body{
            font-family:sans-serif,'Noto Sans TC';
            line-height:2;
            color:#333333;
            font-size:16px;
            font-weight:300;
            margin:0 auto;
        }








 /*  以下－－－－－GO TOP 返回最上層按鍵 的 修改  */
    .gotop{
        width:40px;
        height:40px;
        font-size:3rem;  /*用字型大小來 設定裡面ICON的大小*/
        
        text-align:center;
        line-height:40px;
        opacity:0.9; /*透明度*/
         
        position:absolute;
        top:-1000px;  /*讓一開始的畫面看不到 GO TOP 按鍵*/
        right:0px;
        /*bottom:50px;*/
         
        z-index:9;                  
    }
    /* 設定 TOP返回頂端 鈕 的樣式 */
    .gotop p{
        font-size:14px;
        background-color:#2c3490;
        cursor:pointer;
        border-radius:100px;
        color:#fff;
        box-shadow:0px 2px 5px #e6e6e6;
        font-weight:600;

        transition:.5s;
    }
    .gotop p:hover{
        /* background-color:#fff;
        color:#11bab5; */
        background-color:#2c3490;
        color:#fff;

    }
    /* 這次把 gotop隱藏 */
    .gotop{
        display:none;
    }








/*  以下設定 捲軸捲到時 淡入效果的基本設定 設定好後 再用JS的addClass方式去增加Class 修改  */        
        .animated{
            /* 先在animated這個class把文字區塊的透明度設0，
            並設好 漸變transition和變形中的translateY的Y軸位移 */
            opacity:0;
            transform:translateY(50px);
            transition:all 1.5s;
        }
        .fadeIn{
            /* 設定捲軸捲到時，要用addClass加進去class把 透明度改成 1；translateY位移設為0 */
            opacity:1;
            transform:translateY(0px);
        }
        .fadeRight{
            /* 設定捲軸捲到時，要用addClass加進去class把 透明度改成 1；translateY位移設為0 */
            opacity:1;
            transform:translateX(0px);
        }


/*＝＝＝＝＝＝＝＝＝＝ 以下是本次的樣式＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */








/*＝＝＝＝＝＝＝＝＝＝ 手機版選單 手刻 開始＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
nav{
    /* 定位.main-nav選單內容用 */
    position:relative;
}

input{
    position:absolute;
    left:-100%;
}

.main-header{
    width:100%;
    height:60px;
    background-color:#007c7d;
    /* 讓滿堡選單可以橫排 */
    display:flex;
    justify-content:space-between;
    position:fixed;
    z-index:10; 
}
/* 中信LOGO圖 */
.main-header img{
    margin:10px;
    margin-left:20px;
}
/* 設定漢堡選單的尺寸 */
.m-menu{
    color:#fff;
    width:25px;
    height:20px;
    position:relative;
    cursor:pointer;
    margin-top:auto;
    margin-bottom:auto;
    margin-right:20px;
}
/* 晝漢堡選單 （這時三條都還疊在一起，因為用了abs定位，所以要再去設定每一條的位置） */
.m-menu span{
    display:block;
    position:absolute;
    height:2px;
    width:100%;
    background-color:#fff;
    border-radius:3px;
    opacity:1;
    left:0;
    transform:rotate(0deg);
    transition:.25s ease-in-out;
}
/* 漢堡選單第一條線 的位置 */
.m-menu span:nth-child(1){
    top:0px;
}
/* 漢堡選單第二條線 的位置 */
.m-menu span:nth-child(2){
    top:8px;
}
/* 漢堡選單第三條線 的位置 */
.m-menu span:nth-child(3){
	top:16px;
	width:50%;
}

/* 設定漢堡選單 被點擊後 的位置 ============ */
/* 漢堡選單第一條線：被點擊後 的位置 */
.m-menu.open span:nth-child(1){
    top:8px;
    transform:rotate(135deg);
}
/* 漢堡選單第二條線：被點擊後 的位置 */
.m-menu.open span:nth-child(2){
    opacity:0;
    left:-60px;
}
/* 漢堡選單第三條線：被點擊後 的位置 */
.m-menu.open span:nth-child(3){
	width:100%;
    top:8px;
    transform:rotate(-135deg);
}


/* 選單內容（手機版時）＝＝＝＝＝＝＝＝＝ */
/* 設定選單內容 置中 並讓預設的位置在 視窗可視範圍之外+改成透明的 */
.main-nav{
    /* position:absolute; */
    position:fixed;
    display:flex;
    width:100%;
    height:100vh;
    flex-direction:row;
    justify-content:center;
    padding-top:50px;
    padding-bottom:50px;
    /* align-items:center; */
    background-color:rgba(255, 255, 255, 0.96);
    top:60px;
    z-index:6;

    /* 把選單移到-100%的地方並讓他透明 */
    left:-100%;
    opacity:0;
    transition:.3s; 
}
/* 讓 ul 裡面的 文字水平置中 */
.main-nav ul{
    text-align:center;
    
}
/* 設定選單內容 的 a連結樣式 */
.main-nav a{
    color:rgb(45, 45, 45);
    font-size:20px;
    display:block;
    /* padding-top:20px; */
    text-decoration:none;
    font-weight:bold;

}

.main-nav a:hover{
    color:#fec321;
}
.main-nav:last-child{
    padding-bottom:20px;
}
/* 當#menu-check被選取時 .main-nav選單內容 去做事情 */
#menu-check:checked ~ .main-nav{
    /* 選單回到原來的位置，並把透明度改成1 */
    left:0px;
    opacity:1;
}
/* 在選單項目 的前後 加上 / 和 / */
.main-nav a::before{
    content:'';
    font-size:12px;
}
.main-nav a::after{
    content:'';
    font-size:12px;
}
.main-nav li{
    line-height:1em;
    padding:10px 15px;
}
/* 利用 跟屁蟲選取器 做中間的分隔線 */
.main-nav li + li::before{
    content:'';
    display:block;
    margin:auto;
    width:240px;
    border-top:1px dashed rgba(60, 60, 60, 0.7);
    padding-top:20px;
}
/* ＝＝＝＝＝  手機版選單  區域 結束  ＝＝＝＝＝ */









.warp{
    margin:0 auto;
    text-align:center;
    position:relative;

}
/* 設定所有的img 清除底下的空白 */
img{
    vertical-align:middle;
}

/* 文字突顯 */
.color-blue{
    color:#0328e2;
    font-weight:600;
}
/* 把 服務讚、亮點QRcode、側邊往美股的按鈕 隱藏 */
.qr-service,
.qr-light,
.go-usa{
    display:none;
}

/* 備註字設定 */
.p-note{
    font-weight:600;
    font-size:13px;
    color:#ff0755;
}
/* 手機版 底下的固定按鈕 */
.btn-bottom{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    display:flex;
    justify-content:space-between;
    font-size:15px;
    Z-index:20;
    
}
/* 手機版 底下的固定按鈕--前進台股 */
.go-twstock{
    width:49.5%;
    background-color:#69d8f7;
    color:#373737;
    font-weight:600;
    padding:7px 10px;
    border-radius:0px 15px 0 0;
    text-decoration:none;
}
/* 手機版 底下的固定按鈕--前進美股 */
.go-usastock{
    width:49.5%;
    background-color:#ffd00b;
    color:#373737;
    font-weight:600;
    padding:7px 10px;
    border-radius:15px 0px 0 0;
    text-decoration:none;
}
.go-twstock a,
.go-usastock a{
    text-decoration:none;
}
.go-twstock a:hover,
.go-usastock a:hover{
    color:#fff;
}












/*＝＝＝＝＝＝＝＝＝＝ KV 主視覺  區域 開始＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.kv{
    
}
.kv-title-dec{
    display:none;
}
/*手機 主視覺 */
.m-kv{
    padding-top:63px;
    position:relative;
    overflow:hidden;
    /* margin的負值是用來抵消格線上的padding:0 15px的間距 */
    margin-right:-15px;
    margin-left:-15px;
}
/* 主視覺下方的藍色三角形 */
.m-kv::after{
    content:'';
    display:block;
    width:0px;
    height:0px;
    border-top:20px solid #69d8f7;
    border-bottom:20px solid transparent;
    border-left:18px solid transparent;
    border-right:18px solid transparent;
    margin-left:30px;
}

/* 手機 主視覺標題字 區 */
.kv-title{
    width:260px;
    /* 設定水平垂直置中 */
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);  
}
/* 手機 主視覺 城市 */
.kv-city{
    width:635px;
    position:absolute;
    bottom:39px;
    z-index:3;
    animation:moveC 15s ease-in infinite alternate ;
}
/* 手機 主視覺 男生 */
.kv-man{
    width:148px;
    position:absolute;
    bottom:40px;
    /* left:-40px; */
    left:-200px;

    z-index:4;
    animation:moveM 0.8s 0.3s both cubic-bezier(.03,.98,.3,1.32);

}
/* 手機 主視覺 女生 */
.kv-woman{
    width:172px;
    position:absolute;
    bottom:40px;
    /* right:-70px; */
    right:-200px;
    z-index:4;
    animation:moveW 0.8s 0.3s both cubic-bezier(.03,.98,.3,1.32);
}
/*手機 主視覺 背景、標題字、男生、女生-圖片本人 */
.m-kvbg-img,
.m-kvtitle-img,
.m-kvman-img,
.m-kvwoman-img{
    width:100%;
    vertical-align:middle;
}

/* 手機 主視覺 男生 進場動畫 */
@keyframes moveM{
    0%{
        /* transform:translateX(-5%); */
        left:-200px;
    }
    75%{
        left:-20px;
    }
    100%{
        /* transform:translateX(5%); */
        left:-40px;
    }
}
/* 手機 主視覺 女生 進場動畫 */
@keyframes moveW{
    0%{
        /* transform:translateX(-5%); */
        right:-200px;
    }
    75%{
        right:-50px;
    }
    100%{
        /* transform:translateX(5%); */
        right:-70px;
    }
}
/* 手機 主視覺 城市 動畫 */
@keyframes moveC{
    0%{
        transform:translateX(-40%);  
    }
    100%{
        transform:translateX(0%);
    }
}










/* 桌機版 主視覺 隱藏 ～～～～～～*/
.d-kv{
    display:none;
    
}
/* ＝＝＝＝＝  主視覺  區域 結束  ＝＝＝＝＝ */












/*＝＝＝＝＝＝＝＝＝＝ 台股 CONTENT 活動內容  區域 開始＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* 活動內容區塊 */
.content{
    padding:25px 0;
    padding-bottom:160px;
    margin:auto;
    
}
/* 大主標： */
.content-bigtitle{
    margin-bottom:25px;
    width:330px;
    margin:auto;
    padding-bottom:20px;

}
/* 把桌機版的 TW 隱藏 */
.d-icon-tw{
    display:none;
}
/* 次主標 */
.content-title{
    width:320px;
    margin-bottom:20px;
    /* margin-left:5px; */
}
/* 活動內容文字區 */
.content-txt{
    font-size:16px;
}
/* 活動內容文字區內的二段內文 */
.content-txt p{
    text-align:left;
    padding-left:50px;
    font-weight:400;
    color:#373737;
    padding-bottom:20px;
    letter-spacing:1px;
}
/* 寫p和p中間的那條虛線 */
.content-txt p:first-child::after{
    content:'';
    display:block;
    width:120px;
    height:1px;
    border-bottom:1px dashed rgb(140, 140, 140);
    padding-top:20px;
    
}
/* 把桌機版的側邊的 USA TAIWAN 裝飾文字 隱藏 */
.icon-usataiwan{
    display:none;
}
/* 把桌機版的側邊的 scroll-line 隱藏 */
.scroll-line{
    display:none;
}

/* ＝＝＝＝＝  台股 CONTENT 活動內容  區域 結束  ＝＝＝＝＝ */

















/*＝＝＝＝＝＝＝＝＝＝ 台股 STEPS 三步驟  區域 開始＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* 活動內容區塊 */
.steps{
    margin:auto;
    position:relative;
    
    
}
/* step1、step2區塊的下內間距 */
.step1, .step2, .step3{
    padding-bottom:40px;

}
/* step1、step2、step3之間的虛線 */
.step2::before, .step3::before{
    content:'';
    display:block;
    margin:auto;
    width:250px;
    border-top:2px dashed #ffffff;
    padding-top:20px;
}
/* step1、step2、step3 的圓角 */
.step1, .step2, .step3{
    /* 相對定位本來是寫給左右二邊裝飾的白色三角形定位用 */
    /* position:relative; */
    border-radius:20px;
    background-color:#7be2ff;
}


/* 左右二邊裝飾的白色三角形 */
/* .step1::before{
    content:'';
    display:block;
    width:0;
    height:0;
    border-left:15px solid #fff;
    border-right:15px solid transparent;
    border-top:15px solid transparent;
    border-bottom:15px solid transparent;
    position:absolute;
    left:-15px;
    bottom:-15px;
}
.step1::after{
    content:'';
    display:block;
    width:0;
    height:0;
    border-left:15px solid transparent;
    border-right:15px solid #fff;
    border-top:15px solid transparent;
    border-bottom:15px solid transparent;
    position:absolute;
    right:-15px;
    bottom:-15px;
} */


/* step1、step2、step3 圖 */
.step-icon{
    padding-top:30px;
    padding-bottom:30px;
    
}
/* step1、step2、step3 標題 */
.step-title{
    padding-bottom:30px;
    font-size:24px;
    font-weight:600;
    line-height:1.7;
}
/* step1、step2、step3 內文 */
.step-txt{
    padding-bottom:35px;
    font-size:18px;
    line-height:1.7;
    
}
/* 按鈕：點我下載 */
a.btn-app{
    display:inline-block;
    margin-bottom:30px; 
    background-color:#2c3490;
    color:#fff;
    padding:1px 40px;
    border-radius:100px;
    font-weight:600;
    letter-spacing:1px;
    font-size:16px;
    text-decoration:none;
    transition:.3s;
}
a.btn-app:hover{
    background-color:transparent;
    color:#2c3490;
    border:1px solid #2c3490;
    font-weight:600;
}
/* 備註 */
.step1-note{
    font-size:15px;
    padding-right:20px;
    padding-left:20px;
    box-sizing:border-box;
    color:#4d4c4c;
}
/* 把桌機版的備註 隱藏 */
.d-step1-note{
    display:none;
}
/* 備註裡的連結：點我看示意圖 */
.btn-holdli{
    border:none;
    background:none;
    /* color:#333; */
    color:#2c3490;
    font-weight:600;
    cursor:pointer;
    font-size:17px;
}
/* 裝飾圖 TW 和 台北101 */
.icon-tw{
    position:absolute;
    top:-137px;
    left:20px;    
}
.icon-101{
    position:absolute;
    top:-250px;
    right:20px;
    
}
/* 強調限量 */
.p-storng{
    font-weight:600;
    font-size:15px;
    color:#ff0755;
}

/* ＝＝＝＝＝  台股 STEPS 三步驟  區域 結束  ＝＝＝＝＝ */























/*＝＝＝＝＝＝＝＝＝＝ 台股 點我了解更多  區域 開始＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* 點我了解更多區塊 */
.more{
    padding-top:30px;
    padding-bottom:20px;
    margin:auto;
    /* 相對定位是為了給裝飾文字SIP定位用的 */
    position:relative;
}
/* 下方虛線 */
.more::after{
    content:'';
    display:block;
    margin:auto;
    width:250px;
    border-top:1px dashed #838383;
    margin-top:35px;
}
/* 主標 */
.more-title{
    margin-bottom:20px;
}
/* 文字內容 */
.more-txt{
    font-size:16px;
    margin:auto;
}
.more-txt p{
    font-weight:400;
    color:#333;
    padding-bottom:35px;
}
/* 按鈕：點我了解更多 */
a.btn-more{
    display:inline-block; 
    background-color:transparent;
    color:#595959;
    padding:1px 30px;
    border:1px solid #3f3f3f;
    border-radius:100px;
    font-weight:600;
    letter-spacing:1px;
    font-size:14px;
    text-decoration:none;
    transition:.3s;
}
a.btn-more:hover{
    background-color:#2c3490;
    color:#fff;
}




/* ＝＝＝＝＝  台股 點我了解更多  區域 結束  ＝＝＝＝＝ */














/*＝＝＝＝＝＝＝＝＝＝ （SETPS裡的）點我看示意圖 的蓋版大區塊  開始＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* 蓋版大區塊 */
.hold-black{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.7);
    z-index:21;
	/* 把寫好的蓋版區塊先隱藏，在JQ去設定點擊到按鈕時再顯示 */
	display:none;
}
/* 示意圖片區 */
.msg{
    width:90%;
    height:70vh;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    overflow:auto;
    z-index:22;
}
.btn-close{
    position:absolute;
    background-color: #fff;
    display:inline-block;
    /* color:#fff; */
    top:0px;
    right:0px;
    font-weight:600;
    font-size:20px;
    cursor:pointer;
    width:40px;
    height:40px;
    line-height:40px;

}

.over-window{
    display:block;
}

/* ＝＝＝＝＝  點我看示意圖 的蓋版大區塊 結束  ＝＝＝＝＝ */



















/*＝＝＝＝＝＝＝＝＝＝ 活動辦法  區域 開始＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* 設定.method 整區的上下間距、背景色 */
.method{
    
    padding-bottom:60px;
    background-color:#fff;
}

/* 活動辦法的按鈕 */
.btn-method{
    display:inline-block;
    text-decoration:none;
    padding:2px 2px;

    /* color:#027c7d; */
    color:#2c3490;
    cursor:pointer;
    transition:.5s;
    margin:0 auto;
    font-size:16px;
    font-weight:600;
}
.btn-method:hover{
    text-decoration:none;
    transform:scale(1.1);
    /* transform:translateY(-10px); */
}
/* 用：：after 去寫 活動詳續辦法 文字後面的 + 號 */
.btn-method::after{
    content:' 》';
    font-weight:bold;    
}
/* 活動辦法-按鈕，被點擊時的樣式 */
.btn-method.active{
    /* border-bottom:1px solid #027c7d; */
    border-bottom:1px solid #2c3490;
    border-top:none;
    margin-bottom:20px;
}
.btn-method.active::after{
    content:'';
    font-weight:bold;
}



/* 活動辦法內文 預設先隱藏 */
/* 待活動辦法 被點擊後 再顯示（用jQ控制） */
.method-content{
    margin-top:10px;
    text-align:justify;
    display:none;
    padding-right:25px;
    padding-left:25px;

}
/* 用途：點活動辦法按鈕時，要增加到 活動辦法內文的樣式：顯示 （要寫來給jQ控制的）*/
.method-content.active{
    display:block;
}
/* 活動辦法 內文 */
.method-content p{
    font-size:15px;
    margin-left:10px;
    margin-bottom:20px;
    text-indent:-1em;
    line-height:1.8;   

}
/* 設定 各活動的注意事項 的字級 */
.method-notice{
    font-size:15px;
    margin-left:20px;
    margin-bottom:5px;
    line-height:1.5;
    color:rgb(101, 101, 101);
    padding-left:25px;
}


.itme-number{
    font-weight:bold;
}

.itme-number{
    font-weight:bold;
    text-indent:10px;
}

/* 設定表格 */
table{
    margin-left:40px;
    border:1px solid #9b9b9b;
    text-align:center;
}
th,td{
    padding:5px 20px;
    text-align:center;
    border-bottom:1px dotted #838383;
    border-right:1px dotted #838383;
}


/* ＝＝＝＝＝  活動辦法   區域 結束  ＝＝＝＝＝ */


























/*＝＝＝＝＝＝＝＝＝＝ footer 區域 開始＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.footer{
    background-color:#007c7d;
    text-align:center;
    position:relative;
    bottom:0;
    z-index:10;
    /* 把綠BAR隱藏 */
    display:none;
    
}

.footer_txt{
    padding:9px;
    font-size:11px;
    color:#fff;
    line-height:1.6;
    font-weight:400;
    letter-spacing:2;
}
/* footer  區域  結束＝＝＝＝＝＝＝＝＝ */