﻿@charset "utf-8";
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css)
/*
@font-face {  font-family: SansCJKtc; src: url(../font/NotoSansCJKtc-Regular.otf);}
*/
@font-face {  font-family: roboto; src: url(../font/Roboto-Light.ttf);}

body { margin:0; padding:0; font-family:'Noto Sans CJK TC','Noto Sans TC', Microsoft JhengHei; position:relative; font-size:16px; 
       text-align: justify;　/*　Firefox到此即可對齊　*/ 
       text-justify: auto;　/*　IE需再加上此行　*/}


/** path **/
.path { background:#52aed3; padding:13px 0; margin-bottom:80px;}
.path .cont-box { max-width:1170px; margin:0 auto; font-size:16px; color:#ffffff; }
.path .cont-box a { color:#626262; }
.path .cont-box a:hover { color:#313131;}
.path .cont-box a:after { content:"|"; margin:0 15px 3px 15px; color:#626262; display:inline-block; vertical-align:top; font-size:15px;}

/** i-path **/
.i-path { background:url(../images/path-bg.jpg) no-repeat center; background-size:cover; margin-top:50px; padding:30px 0;}
.in-path { margin:-80px 0 50px 0;}
.i-path .i-path-box { max-width:1170px; margin:0 auto; padding:50px;}
.i-path .i-path-box h4 { font-size:40px; text-align:center; color:#313131; margin:0; padding:0 0 30px 0;}
.i-path .path-select { text-align:center;}
.i-path .path-select select { background:none; color:#313131; font-size:28px;  padding:18px 18px; border:2px #313131 solid; display:inline-table; min-width:410px; margin:30px; cursor:pointer;border: 2px solid #b0151a;border-radius: 50px;}
.i-path button { font-size:30px; font-family:"SansCJKtc", Microsoft JhengHei; color:#b0151a; text-align:center; background:#ffffff; border:0; line-height:72px; width:258px; margin:30px auto; display:block; cursor:pointer; font-weight:600;border-radius: 50px;}

.i-path a { font-size:30px; font-family:"SansCJKtc", Microsoft JhengHei; color:#313131; text-align:center; background:#ffffff; border:0; line-height:72px; width:258px; margin:30px auto; display:block; cursor:pointer; font-weight:600;}



/** 箭頭樣式 **/
.i-path .path-select select {
	font-family:"SansCJKtc", Microsoft JhengHei;
	background-image:url(../images/select-arrow.png);
	background-repeat:no-repeat;
	background-size: 64px 48px;
	background-position: top right;
-webkit-appearance: none; /*Chrome*/
-moz-appearance: none; /*FF*/
appearance: none;/*CSS3*/
}
.i-path .path-select select::-ms-expand {
display: none; /*IE*/
}

/** channel **/
#myMenu { }
#myMenu ul{ list-style:none; margin:0; padding:0; }
#myMenu ul li { background-color:#f0f1f3; background-repeat:no-repeat; background-position:center; text-align:center; float:left; width:30%;  cursor:pointer; height:190px; cursor:pointer;transition: all 0.3s ease 0s;}
#myMenu ul li.tab01 { background-image:url(../images/channel-01.png);}
#myMenu ul li.tab02 { background-image:url(../images/channel-02.png); }
#myMenu ul li.tab03 { background-image:url(../images/channel-03.png); }
#myMenu ul li:hover, #myMenu ul li.active{ background-color:#e6e7e9; transition: all 0.3s ease 0s; }
#myMenu ul li.tab01:hover, #myMenu ul li.tab01.active { background-image:url(../images/channel-01-g.png); }
#myMenu ul li.tab02:hover, #myMenu ul li.tab02.active { background-image:url(../images/channel-02-g.png); }
#myMenu ul li.tab03:hover, #myMenu ul li.tab03.active { background-image:url(../images/channel-03-g.png); }

.op-img{
	width: 150px;
}


#myBox {color:#fff; font-size:30px; font-weight:bold;}
#myBox>.boxs { display:none;}

.channel-table { width:100%; border:0;}
.channel-table th { background:#e6e7e9; padding-left:20px; text-align:left; font-size:18px; color:#313131; line-height:60px; }
.channel-table td { border-bottom:1px #bfbebe solid; font-size:18px; color:#313131; line-height:1.4em; padding:20px 20px; }
.channel-table td a img { width:auto; height:auto;}
th.text-center { text-align: center; padding-right:20px; max-width:80px;}
th.text-center br { display:none;}


/* 滑入出現圖片 */
table.calc-table td a span { background:#ffffff; display:block; padding:10px; border:1px #CCCCCC solid; width:200px; height:auto; position:absolute; bottom:100%; left:50%; margin-left:-100px; z-index:500; opacity:0; visibility: hidden; transition: all 0.1s ease 0s;}
table.calc-table td a span img { width:100%; height:auto; }
table.calc-table td a:hover span { opacity:1; visibility:visible; transition: all 0.1s ease 0s;}


/* 細部微調 */
p.p-10 { padding:10px 25px;}

/***** 表單預設文字顏色設定 *****/
/* 通用 */
::-webkit-input-placeholder { color:#836363; }
::-moz-placeholder { color:#836363; } /* firefox 19+ */
:-ms-input-placeholder { color:#836363; } /* ie */
input:-moz-placeholder { color:#836363; }

/* webkit专用 */
#field2::-webkit-input-placeholder { color:#836363; }
#field3::-webkit-input-placeholder { color:#836363; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#836363; }

/* mozilla专用 */
#field2::-moz-placeholder { color:#836363; }
#field3::-moz-placeholder { color:#836363; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#836363; }

br.m-mbr { display:none;}