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

/***RESET***/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: sans-serif;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
	font-family: 微軟正黑體,Arial,Helvetica, heiti tc, SimHei, Microsoft JhengHei,serif ;
	background-color:#efefef
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;  margin: 0;
    padding: 0;
}
a, a:hover, a:active{ color:#000; text-decoration:none;}

/***DEFAULT**/
html, body{ -webkit-text-size-adjust:none; -webkit-overflow-scrolling: touch; }
body {
	font: 12px/18px; font-family:Arial, Helvetica, sans-serif;
	padding: 0px; -webkit-text-size-adjust:none; }

h1,h2,h3,h4,h5,h6,p{
	font: 12px/18px;
	font-family: Arial,Helvetica, heiti tc, SimHei, 微軟正黑體,Microsoft JhengHei,serif ;
	padding: 0px;
	margin: 0px;
}

h1{ float: left;}
h2{ }
h3{ }
h4{ }
h5{ }
h6{ }

p { color:#666666; font-size:12px; line-height: 18px;}

*:link, *:visited, *:hover, *:active, *:focus , * {
-o-transition: opacity .15s linear, background-color .15s linear, border-color .15s linear;
-webkit-transition: opacity .15s linear, background-color .15s linear, border-color .15s linear;
-moz-transition: opacity .15s linear, background-color .15s linear, border-color .15s linear;
transition: opacity .15s linear, background-color .15s linear, border-color .15s linear;}
a{	text-decoration: none; color:#000;}
a:hover{text-decoration: underline; color:#666;}
a img{ border: 0px;}
img{ border: 0px;}
blockquote{}
form{	padding: 0px;	margin: 0px;	}
ul,ol { margin: 0 0 0 0px; list-style:none; padding:0px;}
li{ margin:0px;}

input{}

.Clearfloat {
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
	/* Clearfix */
	.clearfix:before,
	.clearfix:after {
		content: " ";
		display: table;
	}
	.clearfix:after {
		clear: both;
	}
	.clearfix {
		*zoom: 1;
	}

/***共用CSS***/
#wrap{ width:100%; max-width: 910px; margin: 0 auto; background:url(../images/header_top.jpg) repeat-x top; }
.login{ float: right; margin-top: 10px;}
.login a{ color: #FFFFFF; float: left; border-left: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; margin-left: -1px; font-size: 12px; padding: 0 5px;}
.login a:hover{ text-decoration: underline;}
.login_fb{ background:url(../images/icon_fb_w.gif) no-repeat 7px center; text-indent: 20px;}

/***PC版***/
#container_pc{ width:910px; margin: 0 auto;}
#container_m{ display: none;}
#header_pc{ display:block; width: 910px; height: 53px; padding: 15px 25px;}
#content_pc{text-align: center; display:block;}
#footer_pcbg { border-top: 1px solid #b3b3b3; background-color:#EFEFEF;height: 113px; }
#footer_pc { color: #565454; padding: 20px 0px 10px; position: absolute; min-width:640px; width: 910px;}
.footer_links{  line-height: 21px; text-align: center; margin-bottom: 5px;}
.footer_links a{ color:#666666; font-size:12px; line-height: 18px;}
#footer_pc p a, #footer_m p a{ color: #1A6DB6; text-decoration: underline;}
.footer_links p{ margin-top: 8px;}
.fb-like{position:absolute;right:0px;top:-4px;}
/*活動用*/
#pckeyvew{background-image: url(../images/pc/keyview.jpg); width:910px; height:510px; }


#pckeyvew a.why199{ text-indent:-99999px}
#pckeyvew div.word01{display: block; position:absolute; right:52px; top:350px; width: 67px;height: 30px; font-size: 0;  cursor: pointer; z-index: 10000;}
#pckeyvew div.word01 .moreshow{display: none; width: 384px; height: 125px; position:absolute; left: -380px; top: -90px;}
#pckeyvew div.word01:hover .moreshow{display: block; }

/*船動畫*/
.ninja54{width: 910px;height: 400px;margin: 0 auto;overflow: hidden;}
.ninja5{width:50%;height:1px;display:block;position:relative;float:right;}
.ninja5 img{
	position:absolute;
    top: 150px;
    right: 20px;
/*	animation-duration:.5s;*/
	animation-delay:7s;
	animation-fill-mode: both;
	animation-iteration-count: 1;
	animation:bounceInRight 4s infinite alternate;
	/*animation:bounceInRight 3.2s infinite alternate;*/
	z-index: 9999;
	}
/*船動畫 END*/


#moversale01{ position:absolute; right: 170px; top: 403px;}
#moversale01 a.watch{ float:left; display:block; width:210px ;height:50px; }
.watch {background-image: url(../images/pc/watchtv01.png);}
.watch:after {transition: all 0.3s ease-out;position: absolute;width:210px ;height:50px;background-image: url(../images/pc/watchtv02.png);opacity: 0;content: ""; display: block}
.watch:hover:after {opacity: 1; }
#moversale02{ width:100%; text-align:center; margin:0px 0px 30px 0px}
#moversale02 a.trifree01, #moversale02 a.moremoive{ display: inline-block; width:155px ;height:42px; margin:0px 6px}
.moremoive {background-image: url(../images/pc/moremoive01.png)}
.moremoive:after {transition: all 0.3s ease-out;position: absolute;width:155px ;height:42px;background-image: url(../images/pc/moremoive02.png);opacity: 0;content: ""; display: block}
.moremoive:hover:after {opacity: 1; }
.fbbtn{ position: absolute;right: 0px;top: 0px;cursor: pointer;}
.fbbtn> img{ width: 80px; height: 80px;}
.toptext1{position: absolute; width: 453px; height: 284px; left:385px; top:28px; background:url(../images/pc/top_text.png);z-index: 1000;}
.toptext2{position: absolute; width: 485px; height: 87px; left:380px; top:300px; background:url(../images/pc/top_text2.png);}

.content-wrap section{width: 910px; height: 3915px; background: url(../images/pc/section_bg.jpg);}
#pcazone01, #pcazone02, #pcazone03, #pcazone04, #pcazone05, #pcazone06{list-style:none; margin:0px 0px 0px 35px; text-align:center}
#pcazone01 li{ float:left; margin:0px 0px 20px 10px; border-top:#448491 7px solid}
#pcazone02 li{ float:left; margin:0px 0px 20px 10px; border-top:#8dc496 7px solid}
#pcazone03 li{ float:left; margin:0px 0px 20px 10px; border-top:#a28676 7px solid}
#pcazone04 li{ float:left; margin:0px 0px 20px 10px; border-top:#d09f8f 7px solid}
#pcazone05 li{ float:left; margin:0px 0px 20px 10px; border-top:#ea6a76 7px solid}
#pcazone06 li{ float:left; margin:0px 0px 20px 10px; border-top:#cf5461 7px solid}
.navtan01{}

.blackbg01, .blackbg02, .blackbg03, .blackbg04, .blackbg05, .blackbg06{ width:100%; height:58px; background-color:#000000;}
.blackbg01 span.liword, .blackbg02 span.liword, .blackbg03 span.liword, .blackbg04 span.liword, .blackbg05 span.liword, .blackbg06 span.liword{ font-size:14px; color:#FFFFFF; display:block; text-align:center; padding:10px 0px 0px 0px}
.blackbg01 a.bigword, .blackbg02 a.bigword, .blackbg03 a.bigword, .blackbg04 a.bigword, .blackbg05 a.bigword, .blackbg06 a.bigword{font-size:16px; font-family: 微軟正黑體,Microsoft JhengHei,serif,Arial,Helvetica, heiti tc, SimHei ; display:block; padding:6px 0px 0px 0px; font-weight:bold}
.blackbg01 a.bigword{color:#7cc4c3;}
.blackbg02 a.bigword{color:#b4ddba}
.blackbg03 a.bigword{color:#d0c2b9}
.blackbg04 a.bigword{color:#f1d8d0}
.bigmoveall01, .bigmoveall02, .bigmoveall03, .bigmoveall04, .bigmoveall05, .bigmoveall06{margin:0px;display:block;padding:0px; width:100%; }
.bigmoveall01{background-image: url(../images/pc/sixbigkv01.png); height:516px;}
.bigmoveall02{background-image: url(../images/pc/sixbigkv02.png); height:580px;}
.bigmoveall03{background-image: url(../images/pc/sixbigkv03.png); height:555px;}
.bigmoveall04{background-image: url(../images/pc/sixbigkv04.png); height:190px;}
.robbital{background-image: url(../images/pc/ribbon.png); width:121px; height:89px; position: relative; float:right; left:-29px;}
span.robword01{ display:block; margin:19px 0px 0px 0px; font-size:15px; color:#FFFFFF; font-weight:normal; text-align:center;font-family: 微軟正黑體,Microsoft JhengHei,serif,Arial,Helvetica, heiti tc, SimHei ; line-height:19px;}
span.robword02{ display:block; margin:10px 0px 0px 0px; font-size:15px; color:#FFFFFF; font-weight:normal; text-align:center;font-family: 微軟正黑體,Microsoft JhengHei,serif,Arial,Helvetica, heiti tc, SimHei ; line-height:17px;}
h4.robwordyell{ display:block; margin:3px 0px 0px 0px;font-size:16px; text-align:center; font-weight:normal; color:#FFFF00;font-family: 微軟正黑體,Microsoft JhengHei,serif,Arial,Helvetica, heiti tc, SimHei ; line-height:18px;}
h4.robwordyell01{ display:block; margin:3px 0px 0px 0px;font-size:14px; text-align:center; font-weight:normal; color:#FFFF00;font-family: 微軟正黑體,Microsoft JhengHei,serif,Arial,Helvetica, heiti tc, SimHei ; line-height:18px;}



 /** 滑動區塊往上 **/
.hover_pc{ width: 100%; padding-left: 15px; padding-top: 30px; height: 400px;}
.hover_pc .post{ float: left; margin: 0 0px 20px 20px; width: 245px; height: 360px; position: relative; overflow: hidden;}
.hover_pc .post img{width: 100%; height: 100%;}
.hover_pc .post h4{ position: absolute; top:315px; left:0; width: 100%; height: 110px; font-size: 22px; line-height: 47px; color:#FFF400; font-weight: 100; background: url(../images/post/post_h4.png) no-repeat; transition:all 0.3s;-ms-transition:all 0.3s;-moz-transition:all 0.3s;-webkit-transition:all 0.3s; -o-transition:all 0.3s;}
.hover_pc .post h5{ position: absolute; top:315px; left:0; width: 100%; height: 110px; font-size: 20px; line-height: 47px; color:#FFF400; font-weight: 100; background: url(../images/post/post_h4.png) no-repeat; transition:all 0.3s;-ms-transition:all 0.3s;-moz-transition:all 0.3s;-webkit-transition:all 0.3s; -o-transition:all 0.3s; letter-spacing: -1px;}
.hover_pc .post h6{ position: absolute; top:315px; left:0; width: 100%; height: 110px; font-size: 20px; line-height: 47px; color:#FFF400; font-weight: 100; background: url(../images/post/post_h4.png) no-repeat; transition:all 0.3s;-ms-transition:all 0.3s;-moz-transition:all 0.3s;-webkit-transition:all 0.3s; -o-transition:all 0.3s; }
.hover_pc .post p{ width: 100%; line-height: 20px; font-size: 16px; color:#FFFFFF; text-align: justify; margin:0; padding:0 20px 0 15px; font-weight: 100; text-align: center; letter-spacing: 1px;}
.hover_pc .post a{ width: 100%;height: 100%; display: block;}
.hover_pc .post a:hover h4{ top:250px; transition:all 0.3s;-ms-transition:all 0.3s;-moz-transition:all 0.3s;-webkit-transition:all 0.3s; -o-transition:all 0.3s;}
.hover_pc .post a:hover h5{ top:250px; transition:all 0.3s;-ms-transition:all 0.3s;-moz-transition:all 0.3s;-webkit-transition:all 0.3s; -o-transition:all 0.3s;}
.hover_pc .post a:hover h6{ top:250px; transition:all 0.3s;-ms-transition:all 0.3s;-moz-transition:all 0.3s;-webkit-transition:all 0.3s; -o-transition:all 0.3s;}
.hover_pc .post .postline{ width: 211px;height: 1px; margin-bottom: 8px;}


#pcazone04 #hover_pc{ padding-top: 12px; }


/**焦點影展Adbanner**/
	#AdBanners{background-image: url(../images/pc/AdBanners.jpg); height:196px; padding:80px 0px 0px 0px}
	#AdBanners h3{ }
		/*banner*/
		#Banners{ display: block; position: relative; width: 800px; margin: 5px auto 70px 30px;}
		#left, #right{ background:url(../images/arw.png) no-repeat 0 16px; display:block; height: 70px; width: 20px; float:left; cursor: pointer; position: absolute; left:0px; top: 0px;}
		#Banners #right{ background-position: -30px 16px; position: absolute; left: 825px; top: 0px; float:right;}
		.banner_In{ margin: 0 auto;overflow: hidden; position: relative; width: 100%; height: 74px; padding: 0px; left: 20px;}
		#Banners ul{ position: absolute; width: 2000px; }
		#Banners ul li{ float: left; width: 244px; height: 74px; position: relative; margin-right: 18px; }
		#Banners ul li img{ border: 2px solid #FFFFFF;}
/*小叮嚀*/
	.note{width: 910px;margin: 0px auto;}
	#btn_note{height: 57px; display: block;  cursor: pointer; width:100%;background-image: url(../images/pc/littlemm01.jpg);}
	.note_box{width: 790px;margin: 0px auto;padding:30px 0px 30px 30px;display: none;font-size:15px;font-weight:normal;font-family: Arial,Helvetica, heiti tc, SimHei, 微軟正黑體,Microsoft JhengHei,serif;list-style-position: outside;}
	.note_box ul li{font-size: 13px;line-height: 20px;color:#000;text-align:left;font-weight:normal;line-height:28px;list-style-position: outside;list-style-type: decimal;text-align:left}
	.note_box ul a{ color:#F33}
/***手機版***/
@media screen and (max-width: 640px) {
	#container_pc{ display: none;}
	#container_m{ display: block; width: 100%; max-width: 640px; min-width: 320px;}
	#header_m{ display:block; width: 100%; height: 53px; padding: 16px 5px;}
	#content_m{ font-size:30px; font-weight: bold; text-align: center; display:block;}


#mokv01{background-image: url(../images/mo/mokeyview.jpg); width:100%; height:368px; background-color:#333}
.mo_moverword{position:absolute;font-family: Arial,Helvetica, heiti tc, SimHei, 微軟正黑體,Microsoft JhengHei,serif; font-size:22px; text-align: center; width:640px; color:#fff
; margin:275px 0px 0px 0px; line-height:32px}
.mo_moversale01{position:absolute; text-align:center; width:160px; height: 46px; right: 73px;top: 300px;z-index: 9999;}
.mo_moversale01 a{ display: block; width: 100%;height: 100%;}
.momianstrw{ width:640px; margin:0px auto}
.mo_hiligtall{position: relative;float: right;top: 240px;right:110px;vertical-align: bottom; font-size:14px; color:#FFF}
.mo_hiligtall span.bigyell{font-size: 17px;color: #fff100;text-decoration: underline; padding:0px 0px 0px 8px}

.momoveoverzone p{ margin:0px; padding:0px; font-size:18px; line-height:26px; font-weight:normal; color:#000; text-align:left}
#pcazone01_m, #pcazone02_m, #pcazone03_m, #pcazone04_m, #pcazone05_m, #pcazone06_m{list-style:none; margin:0;}
#pcazone01_m li{ border-top:#448491 7px solid}
#pcazone02_m li{ border-top:#8dc496 7px solid}
#pcazone03_m li{ border-top:#d0c2b9 7px solid}
#pcazone04_m li{ border-top:#f1d8d0 7px solid}
#pcazone05_m li{ border-top:#f2b2b9 7px solid}
#pcazone06_m li{ border-top:#f79ba5 7px solid}


#content_m .bigmoveall01, .bigmoveall02, .bigmoveall03, .bigmoveall04, .bigmoveall05, .bigmoveall06{margin:0px;display:block;padding:0px; width:100%;}
#content_m .bigmoveall01{background-image: url(../images/mo/sixbigkv01.png);width: 640px; height:398px;}
#content_m .bigmoveall02{background-image: url(../images/mo/sixbigkv02.png);width: 640px; height:376px;}
#content_m .bigmoveall03{background-image: url(../images/mo/sixbigkv03.png);width: 640px; height:398px;}
#content_m .bigmoveall04{background-image: url(../images/mo/sixbigkv04.png);width: 640px; height:276px; margin-top: 50px; margin-bottom: 10px;}


#mo_zoneall01{background-color: #fff; position:absolute;z-index:-99;opacity:1;}
.mo_moversale02{ text-align:center; width:640px;margin:30px 0px 40px 0px}
body.noscroll{overflow-y:hidden ; width: 100%;}
.ndsadbn{ z-index:-1}
.noblockall{ display:none}

#bghightall { height: 6100px; width: 640px;display: block;background: url(../images/mo/bg_m.jpg);}

 /** 滑動區塊往上_小網 **/
.hover_m{ width: 100%; height: 900px; margin-left:22px; }
.hover_m .post_box{position: relative; width: 260px; height: 398px;}
.hover_m .post { width: 260px; height: 464px; float: left; margin: 0 2px 6px 25px; overflow: hidden;}
.hover_m .post img{ position: absolute; left:0; top:0; width: 100%; height: 100%; }
.hover_m .post h4{ position: absolute; left:0; bottom:0; width: 100%; height: 57px; line-height: 57px; font-size: 25px; color:#FFF400; background: rgba(0%,0%,0%,0.85); font-weight: bold;text-align: center; }
.hover_m .post h5{ position: absolute; left:0; bottom:0; width: 100%; height: 57px; line-height: 28px; font-size: 25px; color:#FFF400; background: rgba(0%,0%,0%,0.85); font-weight: bold;text-align: center; }
.hover_m .post p{ width:100%; height: 80px; line-height: 27px; font-size: 23px; color:#330000; text-align: justify; padding: 0; font-weight: 100;letter-spacing:-2px;}
.hover_m .post a{text-decoration: none;}

a.fb_share_m{ position: absolute; top:-5px; right: -5px;width: 100px; height: 100px; }
a.fb_share_m img{ width: 60px; height: 60px; float: right;}

/**焦點影展Adbanner**/
		#AdBanners{background-image: url(../images/mo/AdBanners.png); height:199px; padding:90px 0px 0px 0px; margin-top: 40px;}
		#AdBanners h3{ }
		/*banner*/
        #Banners_m{ display: block; position: relative; width: 640px; height: 160px; margin: 5px auto 13px auto; overflow: hidden;}
        #left_m, #right_m{ background:url(../images/arw.png) no-repeat 0 16px; display:block; width: 20px; height: 70px; float:left; cursor: pointer; position: absolute; left:10px; top:50px;}
        #Banners_m #right_m{ background-position: -30px 16px; position: absolute; left:610px; top: 50px; float:right;}
        .banner_In_m{ margin: 0 50px;overflow: hidden; position: relative; width: 540px; height:160px; padding: 0px;}
        #Banners_m ul{ position: absolute; width: 9999px; }
        #Banners_m ul li{ float: left; width: 540px; height: 160px; position: relative; }
        #Banners_m ul li img{ border: 2px solid #dfdfdf; width: 540px; height: 160px;}
/*小叮嚀*/
	.note_m{  margin: 0px auto;; text-align:left;}
	#btn_note_m{
	width: 100%;
	display: block;
	margin: 0px auto;
	cursor: pointer;
	background-image: url(../images/mo/littlemm_mo01.jpg);
	background-position: 0px -7020px;
	height: 65px;



}
	.note_box_m{ display: none;margin: 0px auto; width: 565px; padding:30px 0px 60px 0px}
	.note_box_m ul a{color:#F33}
	.note_box_m ul li{ list-style:decimal inside; font-size: 18px; line-height: 30px; padding-left: 18px; text-indent: -18px; color: #000; font-weight:normal}
	/*A版footer*/
	.ftr_logos_m{ float: none; text-align: center; margin-bottom:15px;}
	.ftr_logos_m a{ margin-right: 20px;}
	#footer_m{ text-align:center; color: #565454;padding: 20px 0; border-top: 1px solid #b3b3b3; background-color: #EFEFEF; }
	#footer_m .footer_links a{ color:#666666; font-size:11px; padding:0 3px;}

	.footer_links{ text-align: center; }
	.fb-like{position:absolute;right:0px;top:-4px;}

	/**B版footer**/
	#footer_mB{ text-align:center; background-color: #EFEFEF;}
	#footer_mB .footer_links{ margin-bottom: 20px; background-color: #848484; margin-top: 0px; display: black; overflow: hidden;}
	#footer_mB .footer_links a{ color:#FFFFFF; font-size:12px; border-right: 1px solid #FFFFFF; width: 50%; padding: 10px 0px; display: inline-block; overflow: hidden; float: left; background-color: #848484; text-align:center;}
	#footer_mB .footer_links a:hover { text-decoration: none; background-color:#333;}
	#footer_mB p a{ color: #1A6DB6; text-decoration: underline; text-align: center;}
	#footer_mB .footer_links_b{ margin-bottom: 12px; text-align: center; font-size: 10px;}
	#footer_mB .footer_links_b a{ font-size:11px; text-align: center; padding: 0 3px; color: #666;}
	/*卷軸*/
.scrollup{ width:52px; height:52px; opacity:0.95; position:fixed; bottom:175px; right:10px; display:none; text-indent:-9999px; background: url(../images/btn_top1.png) no-repeat;}
.scrollup_1{ width:43px; height:43px; opacity:0.95; position:fixed; bottom:215px; right:10px; display:none; text-indent:-9999px; background: url(../images/btn_top2.png) no-repeat;}
	}