@charset "utf-8";
/* CSS Document */

/* CSS Reset */
html, body, div, span, applet, object, iframe, form,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, 
em, img, q, strong, sub, sup,
dl, dt, dd, ol, ul, li { margin:0; padding:0; }
img { border:0; }
ul, ol { list-style:none; }
body { line-height:1; }
table { border-collapse:collapse; border-spacing:0 !important; }
p { line-height:180%; padding:3px 0; }

select { padding:0; }
select, input { vertical-align:middle; margin:0 2px; }
input[type="checkbox"], input[type="radio"] { margin-right:3px; margin-left:0; padding:0; vertical-align:text-top; }
input[type="button"], input[type="submit"], input[type="reset"], select { cursor:pointer; *cursor:hand; }
/* 按鈕樣式 */
input[type="button"], input[type="submit"], input[type="reset"] {
	border:none; margin:0; padding:0 8px; border-radius:0; font-size:100%; font-weight:bold; height:35px; line-height:35px; color:#fff;
}
/* 輸入框樣式 */
input[type="text"], input[type="tel"], input[type="email"], textarea {
	padding:7px; border:1px solid #cccccc;
	-webkit-box-shadow: inset 1px 1px 3px rgba(0,0,0,0.075);
	box-shadow: inset 1px 1px 3px rgba(0,0,0,0.075);
	-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
}
textarea:focus { 
	outline: 0;
	border:1px solid #66afe9;　
	-webkit-box-shadow: inset 1px 1px 3px rgba(0,0,0,0.075), 0 0 6px rgba(102,175,233,0.8);
	box-shadow: inset 1px 1px 3px rgba(0,0,0,0.075), 0 0 6px rgba(102,175,233,0.8)
}


/* 下拉樣式 */
select { border:1px solid #ccc; margin:0; }

/* 通用設定 */
.clear{ clear:both; float:none !important; }

/*連結設定*/
a { text-decoration:none; cursor: pointer; color:#2C2C2C; transition: all 0.2s; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; -o-transition: all 0.2s; }
a:hover { text-decoration:none; color:#da251c; }

/*字型設定*/
body, input , textarea, select { 
	font-family: "Microsoft JhengHei", "微軟正黑體", "Microsoft YaHei", "微软雅黑"; 
}
h1, h2, h3, h4, h5, h6 {
	font-family: "Microsoft JhengHei", "微軟正黑體", "Microsoft YaHei", "微软雅黑"; line-height:180%;
}

/*文字顏色*/
.red { color:#dd0330; }
.orange { color:#ed872e; }
.gray { color:#868686; }

/*標題樣式*/
h1.maintitle { background:url(../../images/tw/h1_bg.png) no-repeat; height:73px; padding-left:40px; font-size:27px; letter-spacing:1px; line-height:190%; margin-bottom:15px; }
h1.maintitle:after { content:""; display:block; background:url(../../images/tw/h1_bg_sw.png) no-repeat center center; height:21px; margin-left:-40px; }


/*基本設定*/
body { color:#000000; font-size:14px; background:#fff; }
p.clear { clear:both; }


/*----------header----------*/
#header { background:url(../../images/tw/header_bg.jpg) no-repeat center top; }
#header > div { max-width:960px; margin:0 auto; padding:12px 0 12px 0; }

#header .logo { display:block; }
#header .logo a { display:inline-block; background:url(../../images/tw/logo.png) no-repeat; width:200px; height:48px; text-indent:-9999px; }

.top_info { height:30px; line-height:30px; }
.top_info > li { float:left; padding:0 10px 0 15px; background:url(../../images/tw/red_arrow.png) no-repeat 6px center; position:relative; }
.top_info li input { margin:0; }
.top_info a { color:#585757; display:block; height:30px; }
.top_info > li > a { text-shadow:1px 1px 1px #fff; }

.top_info li ul { background:#fff; z-index:99999; position:absolute; top:30px; left:0; display:none; min-width:80px;
	-moz-box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
	-webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
	box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
}
.top_info li:hover ul { display:block; }
.top_info li ul li a { padding:0 10px; }
.top_info li ul li a:hover { color:#fff; background:#525252; }

.top_info li.search { padding:0 10px; background:none; }
.top_info li.search > div {
	padding:4px 9px; border:1px solid #cccccc; background-color:#fff;
	border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px;
	-webkit-box-shadow: inset 1px 1px 3px rgba(0,0,0,0.075);
	box-shadow: inset 1px 1px 3px rgba(0,0,0,0.075);
}
.top_info li.search input[type="text"] { border:none; color:#000; box-shadow:none; padding:0; }
.top_info li.search input[type="submit"] { background:url(../../images/tw/icon_search.png) no-repeat center center; width:24px; height:20px; border:none; text-indent:-9999px; }
.top_info li.search input[type="text"].placeholderColor { color:#8b8b8b; }


/*----------Menu----------*/
#Menu { height:45px; line-height:45px; background:url(../../images/tw/header_bg.jpg) no-repeat center -72px; }
#Menu ul li { position:relative; }
#Menu ul a { display:block; }
.menu { max-width:960px; margin:0 auto; position:relative; height:45px; text-align:center; }
.menu > li { float:left; padding:0 2.4%; transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s; }
.menu > li > a { font-size:20px; color:#000; white-space:nowrap; text-shadow:1px 1px 1px #fff; }
.menu > li > a:hover { text-decoration:none; }
#Menu.fix-nav > .menu > li > a { text-shadow:none; }
#Menu > ul > li:hover > a, #Menu > ul > li.sfHover > a, #Menu > ul > li.select > a { text-shadow:none; }

#Menu ul ul { display:none; position:absolute; top:45px; left:0; width:172px; background-color:#525252; z-index:9999; text-align:left;
	-moz-box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
	-webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
	box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
}
#Menu > ul > li:hover ul { display:block; }
#Menu ul ul li a { line-height:150%; padding:10px; color:#fff; text-decoration:none; }
#Menu ul ul li a:hover, #Menu ul ul li.sfHover a { background-color:#DA251C; color:#fff; }

#Menu > ul > li:hover, #Menu > ul > li.sfHover, #Menu > ul > li.select { background-color:#DA251C; }
#Menu > ul > li:hover > a, #Menu > ul > li.sfHover > a, #Menu > ul > li.select > a { color:#fff; }

#Menu.fix-nav { position:fixed; left:0; top:0; z-index:9999; width:100%; background:url(../../images/tw/footer_bg.jpg) no-repeat center -44px;
	-webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
	box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
}
#Menu.fix-nav > ul > li > a { color:#fff; }
.fix-nav .menu li.logo { width:190px; }
.fix-nav .menu li.logo a { background:url(../../images/fix_logo.png) no-repeat center 0; text-indent:-9999px; }



/*----------footer----------*/
#footer { width:100%; line-height:150%; border-top:5px solid #525252; }
.footer_menu { margin: 0 auto; line-height:180%; max-width:960px; overflow:hidden; padding:1em 0 3em 0; }
.footer_menu > li { float:left; padding:1em 10px 1em 0; }
.footer_menu > li > a { font-size:14px; height:35px; line-height:35px; display:block; font-weight:bold; color:#959595; padding-left:40px; background-repeat:no-repeat; }
.footer_menu > li > ul { padding-top:10px; }
.footer_menu > li > ul > li > a { color:#333; font-size:12px; }
.footer_menu a:hover { color:#da251c; }

.footer_info { font-size:17px; color:#E4E4E4; background:url(../../images/tw/footer_bg.jpg) no-repeat; text-align:center; line-height:1.8em; padding:2.8em 0; }
.footer_info ul { overflow:hidden; display:inline-block; }
.footer_info ul li { float:left; margin:0 15px; }
.footer_info a { color:#E4E4E4; }


/*----------轉寄好友----------*/
.forward { background-color:#eaeaea; margin:40px auto; padding:10px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; }
.forward > div { padding: 25px 30px; background-color: #fff; }
.forward label { font-size:16px; display:block; margin:15px 0 5px 0; }
	.forward label span { color:#d00000; }
.forward input[type="text"], .forward textarea { margin:0 0 5px 0; }
.forward .title { font-size:18px; line-height:135%; color:#2268C3; }
.forward .note { color:#da251c; line-height:15px; }

.forward .randomcode { overflow:hidden; }
.forward .randomcode input[type="text"] { width:84px !important; margin:0; float:left; }
.forward .randomcode img { margin-left:5px; margin-top:2px; }
.forward .randomcode > div { float:left; padding-top:5px; }
.forward .randomcode div.btn { line-height:180%; font-size:100%; color:#696969; letter-spacing:0.5px; float:left; width:100%; }
.forward .randomcode div.btn > span { padding-top:5px; float:left; }
.forward .randomcode div.btn input { 
	padding:0 0 0 3px; text-decoration:underline; color:#3378d2;
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
}
.forward .randomcode div.btn input:hover { text-decoration:none; color:#da251c; }


/*----------按鈕----------*/
.btn_common { text-align:center; padding:2em 0; }
.btn_common div { display:inline-block; *display:inline; *zoom:1; }
.btn_common div span { display:inline-block; margin:0 8px; }
.btn_common input[type="submit"], .btn_common input[type="reset"], .btn_common input[type="button"], .btn_common a {
	padding:0 45px; height:45px; line-height:45px; border:none; margin:0px; font-size:115%; letter-spacing:1px;
	background: linear-gradient(to bottom, rgba(148,148,148,1) 0%,rgba(44,44,44,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#949494', endColorstr='#2c2c2c',GradientType=0 ); /* IE6-8 */
	-moz-box-shadow: 0 0 8px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 0 8px rgba(0,0,0,0.5);
	box-shadow: 0 0 8px rgba(0,0,0,0.5);
}
.btn_common input[type="submit"]:hover, .btn_common input[type="reset"]:hover, .btn_common input[type="button"]:hover, .btn_common a:hover {
	background: linear-gradient(to bottom, rgba(218,37,28,1) 0%,rgba(148,8,0,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#da251c', endColorstr='#940800',GradientType=0 ); /* IE6-8 */
}

.btn_common a { color:#fff; display:block; }
.btn_common a:hover { text-decoration:none; }

.btn_common.black_btn div { display:block; }
.btn_common.black_btn a { padding:0; height:40px; line-height:40px; }


/*首頁form修正*/
#form1 { overflow:hidden; }

/*----------------------------------------------------------------------*/
/* cookieconsent setting */
.cc-window.cc-bottom, .cc-revoke { font-family: "Microsoft JhengHei", "微軟正黑體", "Heiti TC", "黑體-繁",'Arial', sans-serif; letter-spacing: .075em; }
.cc-window .cc-message, .cc-revoke { font-size:15px; }
.cc-window .cc-message a { text-decoration:underline; color: #fff; }
.cc-window .cc-message a:hover { color: #5092f5; }
.cc-btn.cc-dismiss { white-space:nowrap; }
@media screen and (max-width: 639px){
.cc-window.cc-banner, .cc-window.cc-floating { padding:10px; }
}

/*----------------------------------------------------------------------*/
/* modal */
.modal_box {
	z-index: 9999;
	display: none;
	background-color: rgba(0,0,0,0.4);
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	animation: opac 0.8s
}

	.modal_box .modal_wrap {
		background-color: #fff;
		box-sizing: border-box;
		max-height: calc(100vh - 80px);
		position: absolute;
		left: 50%;
		top: 50%;
		-webkit-border-radius: 15px;
		-moz-border-radius: 15px;
		border-radius: 15px;
		-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.2);
		-moz-box-shadow: 0 0 20px rgba(0,0,0,0.2);
		box-shadow: 0 0 20px rgba(0,0,0,0.2);
	}

		.modal_box .modal_wrap .modal_cont {
			overflow-y: auto;
			overflow-x: hidden;
			height: 100%;
			padding: 5px;
			position: relative;
		}

			.modal_box .modal_wrap .modal_cont::-webkit-scrollbar {
				-webkit-appearance: none;
				width: 14px;
				height: 14px;
			}

			.modal_box .modal_wrap .modal_cont::-webkit-scrollbar-thumb {
				border-radius: 8px;
				border: 3px solid #fff;
				background-color: rgba(0, 0, 0, .3);
			}

				.modal_box .modal_wrap .modal_cont::-webkit-scrollbar-thumb:hover {
					background-color: #000;
				}

	.modal_box .close {
		position: absolute;
		cursor: pointer;
		z-index: 10000;
		text-align: center;
		top: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 40px;
		height: 40px;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%;
	}

		.modal_box .close::before, .modal_box .close::after {
			content: '';
			width: 4px;
			height: 60%;
			position: absolute;
			right: 50%;
			top: 20%;
			background: #333;
		}

		.modal_box .close::before {
			transform: rotate(-45deg);
		}

		.modal_box .close::after {
			transform: rotate(45deg);
		}

		.modal_box .close:hover {
			opacity: .7;
		}

.modal_title {
	padding-bottom: 8px;
	font-size: 1.75em;
	line-height: 1.5em;
	font-weight: bold;
	border-bottom: 1px solid #ccc;
}

.modal_body {
	padding: 8px 0;
}

	.modal_body .que_item textarea {
		width: 100%;
		box-sizing: border-box;
	}

	.modal_body .editable_content {
		padding-top: 0;
	}

@media screen and (max-width: 499px) {
	.modal_box.alert_box .modal_wrap {
		width: 80vw;
		height: 80vh;
		margin: -40vh 0 0 -40vw;
		padding: 25px 30px;
	}

	.modal_body .que_item {
		padding-left: 0;
	}

	.modal_body .btn_common input {
		margin: 8px 0;
	}
}

@media screen and (max-width: 1023px) {
	.modal_box .modal_wrap {
		width: 80vw;
		height: 80vh;
		margin: -40vh 0 0 -40vw;
		padding: 25px 30px;
	}
}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
	.modal_box .modal_wrap {
		width: 800px;
		height: 70vh;
		margin: -35vh 0 0 -400px;
		padding: 25px 30px;
	}
}

@media screen and (min-width: 1280px) {
	.modal_box .modal_wrap {
		width: 1040px;
		padding: 30px 35px;
		height: 70vh;
		margin: -35vh 0 0 -520px;
	}
}