@charset "utf-8";

body{ font-family:"微軟正黑體", "新細明體", "Arial Unicode MS"}

.container-fluid{ max-width:1280px;}

.footer{
	border-top:1px solid #fff;
	color:#fff;
	background-color:#535353;
	text-align:center;
	padding:24px 0;
}
.footer a {
	color:#fff;
}
.share{margin:4px 0; position:absolute; width:120px;}
.share img{margin:0 1px;}
@media (min-width:768px){.share{ left:100%; margin-left:-130px; margin-top:15px;}}


.backtop{
	position:fixed;
	z-index:15;
	width:48px;
	height:48px;
	left:100%;
	top:100%;
	margin-top:-64px;
	margin-left:-64px;
	padding:5px;
	background-color:rgba(000,000,000,0.5);
	text-align:center;
	color:#fff;
	font-size:1.3rem;
	border-radius:4px;
	cursor:pointer;
	-webkit-transition: background 0.3s; /* Safari */ 
	transition: background 0.3s;
}
.backtop:hover{ background-color:#FC3;}


.title_line{
	width:72px;
	height:4px;
	background-color:#8f0447;
	margin:24px auto;
}


.header{ background-color:#fff;}
.header .container-fluid{ position:relative;}

.navbar-brand{ text-align:center; width:100%; padding:0 0 10px 0;}
@media (min-width:768px){.navbar-brand{ width:auto; padding:10px 0;}}

.logo_lg{ display:none;}
.logo_sm{ margin-left:auto; margin-right:auto;}
@media (min-width:768px){
	.logo_lg{ display:block;}
	.logo_sm{ display:none;}
}


.list-inline{ font-size:0.9rem; text-align:right; padding-top:8px;}
.list-inline a:hover{ text-decoration:none;}
.list-inline span{ display:none;}
@media (min-width:768px){
	.list-inline{ float:right; padding-top:48px;}
	.list-inline span{ display:inline-block;}
}

.navbar{ background-color:#535353; -webkit-transition: position 0.3s; /* Safari */ transition: position 0.3s; margin-top:119px; padding:0;}
@media (min-width:768px){.navbar{margin-top:86px;}}

.navbar .navbar-toggler{text-align:center; border:none; color:#fff; padding:13px 0 12px 0;}

.navbar-nav .nav-item{ border-top:1px dotted #ccc;}

.navbar-nav .nav-item .nav-link{ color:#fff; font-size:1.1rem; padding:10px 0; border-radius:4px; -webkit-transition: background 0.3s; /* Safari */ transition: background 0.3s;}
.navbar-nav .nav-item .nav-link:hover{ color:#ff7bd2;}

@media (min-width:992px){
.navbar-nav .nav-item { border-top:none;  }
.navbar-nav .nav-item:first-child{ }
}

.dropdown:hover>.dropdown-menu {
  display: block;
}
.navbar-nav .nav-item.dropdown .dropdown-menu{ width:100%; text-align:center; background-color:#535353; -webkit-animation-duration: 0.3s; top:44px;}
.navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item{ color:#fff; font-size:0.95rem; padding-left:0; padding-right:0;}
.navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item:hover{ background:none; color:#ff7bd2;}



.top_blank{ height:165px;}
@media (min-width:768px){.top_blank{ height:132px;}}

.banner_lg{ display:none;}
@media (min-width:768px){
	.banner_lg{ display:block;}
	.banner_sm{ display:none;}
}

.scroll_down{ 
	display:none; 
	-webkit-transition: box-shadow 0.3s, text-shadow 0.3s; /* Safari */ 
	transition: box-shadow 0.3s, text-shadow 0.3s; 
	text-shadow: 0px 0px 10px #777, 0px 0px 10px #777, 0px 0px 10px #777, 0px 0px 15px #999; 
	box-shadow: 0px 0px 10px #777, 0px 0px 10px #777, 0px 0px 10px #777, 0px 0px 15px #999;
}
.scroll_down:hover{ 
	box-shadow: 0px 0px 10px #600, 0px 0px 15px #900, 0px 0px 20px #c00, 0px 0px 25px #F36; 
	text-shadow: 0px 0px 10px #600, 0px 0px 15px #900, 0px 0px 20px #c00, 0px 0px 25px #F36;
}

@media (min-width:992px){.scroll_down{ position:absolute; top:100%; left:50%; z-index:1000; margin-left:-40px; margin-top:-150px; height:80px; width:80px; border:4px solid #fff; border-radius:50%; text-align:center; color:#fff; padding-top:16px; cursor:pointer; display:block;}}


.pattern {
    background-image:url(../../images/pattern.png);
    background-repeat: repeat;
    background-attachment:scroll;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0
}



.banner_textarea{position:absolute; top:50%; margin-top:-160px; left:50%; margin-left:-160px; width:320px; height:320px; background-color:#069; padding:15px; animation-delay: 0.5s;}
@media (min-width:768px){.banner_textarea{margin-left:-320px; animation-delay: 0.5s;}}
@media (min-width:992px){.banner_textarea{margin-left:-480px;}}

.banner_textarea h2,
.banner_textarea2 h2{ color:#fff; font-size:2.2rem; font-family: 'Ubuntu', sans-serif; padding-top:60px;}
.banner_textarea p,
.banner_textarea2 p{ color:#fff; font-size:1.4rem; margin-top:30px;}

.banner_textarea2{position:absolute; top:50%; margin-top:-160px; left:50%; margin-left:-160px; width:320px; height:320px; background-color:#069; padding:15px; animation-delay: 0.5s;}
@media (min-width:768px){.banner_textarea2{margin-left:0px; animation-delay: 0.5s;}}
@media (min-width:992px){.banner_textarea2{margin-left:160px;}}




.top_block1{padding:60px 0; background-image:url(../../images/top_news.jpg); background-position:center right; background-size:cover;}

.top_block1 h1{ color:#000; text-align:center;}


.more{ margin:32px 0;}
.more a{ color:#000; border:4px solid #000; padding:8px 40px; -webkit-transition: border 0.3s, color 0.3s; /* Safari */ transition: border 0.3s, color 0.3s; border-radius:25px;}
.more a:hover{ color:#8f0447; text-decoration:none; border-color:#8f0447;}

.more2{ margin:32px 0;}
.more2 a{ color:#059ee9; border:4px solid #059ee9; padding:8px 32px; -webkit-transition: border 0.3s, color 0.3s; /* Safari */ transition: border 0.3s, color 0.3s;}
.more2 a:hover{ color:#f27043; text-decoration:none; border-color:#f27043;}

.top_pro_title{background-color:#8f0447; color:#fff; text-align:center;}
.top_pro_title h1{ margin:0; padding:30px 0;}


.top_block2{padding:0 0 60px 0; background-image:url(../../images/top_bg2.jpg); background-position:center; background-size:cover;}
.top_block2 h1{color:#000; text-align:center;}


.top_pro_con{ background-position:center; background-size:cover; position:relative; height:400px; margin:15px 0;}

.top_pro_con a{ position:absolute; z-index:6; width:100%; height:100%; background-color:#000; color:#fff; left:0; top:0; text-align:center; font-size:4em; padding-top:100px; opacity:0; -webkit-transition: opacity 0.3s; /* Safari */ transition: opacity 0.3s;}
.top_pro_con a:hover{ opacity:0.7;}

.top_pro_con h3{ position:absolute; z-index:5; width:100%; background-color:rgba(000,000,000,0); color:#fff; height:60px; margin-top:-60px; padding:15px; top:100%; left:0; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; text-shadow: 0px 0px 10px #333, 0px 0px 10px #333, 0px 0px 10px #333, 0px 0px 15px #555;}
.top_pro_con h3 i{ color:#fff;}


@media (min-width:992px){
	.top_pro_con{ height:670px;}
	.tpc2{ height:320px;}
	.tpc1 a{ padding-top:300px;}
}

.col-lg-12 .top_pro_con{background-image:url(../../images/tp4s.jpg);}
@media (min-width:768px){.col-lg-12 .top_pro_con{background-image:url(../../images/tp4.jpg);}}

.top_news{padding:60px 30px; background-image:url(../../images/top_news.jpg); background-position:center right; background-size:cover;}
.top_news h1{ color:#8f0447;}

.top_news_con{ padding-bottom:8px; border-bottom:1px dotted #ccc; margin:15px 0;}
@media (min-width:768px){
	.top_news_con h5,
	.top_news_con h6{ display:inline-block;}
}
.top_news_con h6 { margin-right:15px;}
.top_news_con h6 a{color:#000;}
.top_news_con h6 a:hover{color:#8f0447;}

.top_resource{padding:60px 30px; background-color:#ff7800; color:#fff;}
.top_resource h1{ text-align:center;}
.top_resource p{ margin:15px 0;}

.top_resource .more{ text-align:center;}
.top_resource .more a{color:#fff; border:4px solid #fff;}
.top_resource .more a:hover{ color:#FC3; border-color:#FC3;}



.top_contact_block{ padding:64px 0; background-color:#535353;}

.top_contact_logo img{ width:100%; height:auto; max-width:240px;}
@media (min-width:768px){.top_contact_logo img{ width:100%;  height:auto; max-width:240px;}}

@media (min-width:992px){.top_contact_share{ text-align:right;}}

.top_contact_text{ line-height:1.4em; color:#fff; font-size:0.95rem;}
.top_contact_text p{ margin-top:10px;}

.guide{ margin-top:32px;}
.guide a{ color:#fff; border:4px  solid #fff; padding:8px 16px;}
.guide a:hover{ color:#ff7bd2; text-decoration:none; border-color:#ff7bd2;}
@media (min-width:768px){.guide{ display:none;}}

.site_map{ display:none;}
@media (min-width:992px){.site_map{ display:block;}}
.site_map_con h5 a{ color:#fff;}
.site_map_con h5 a:hover{ text-decoration:none; color:#ff7bd2;}
.site_map_con ul{ padding:0; list-style:none; margin-top:20px;}
.site_map_con ul li a{ color:#fff; line-height:1.4rem; font-size:0.95rem;}
.site_map_con ul li a:hover{ text-decoration:none; color:#ff7bd2;}




.page_bread{ background-color:#e0e3e6; margin:0; font-size:0.9rem; display:table; width:100%;}
.page_bread .breadcrumb { background:none; float:right; text-align:right;   padding:15px 0 0 0;}
.page_bread .breadcrumb li{  border-radius:0;}
.page_bread .breadcrumb a{ color:#099;}
.page_bread .breadcrumb a:hover{color:#f27043; text-decoration:none;}

/*.page_line{ background-image:url(../images/page_line.png); background-position:left; background-repeat:no-repeat; background-color:#000; height:4px; margin:15px 0;}*/

.page_line{
	width:100%;
	height:4px;
	background-color:#8f0447;
	margin:15px 0;
}


.page_about_block{ padding:64px 0; background-image:url(../images/white.jpg); background-position:center; background-size:cover; background-attachment:fixed;}

/*.side_menu{ background-color:#fff; padding:30px 20px; margin-bottom:30px; background-image:url(../images/side_bg.png); background-position:top left; background-repeat:repeat-x; -moz-box-shadow:0 4px 15px -2px gray; -webkit-box-shadow:0 4px 15px -2px gray; box-shadow:0 4px 15px -2px gray;}*/

.side_menu h4{ color:#000; font-size:2rem;}

.side_menu ul{ list-style:none; padding:0; margin-top:25px; font-size:1rem;}
.side_menu ul li{ margin-bottom:10px; padding-bottom:10px; border-bottom:1px dotted #999;}
.side_menu ul li a{ color:#000; padding-left:30px; background-image:url(../images/plus1.png); background-position:center left; background-repeat:no-repeat; display:block;}
.side_menu ul li a:hover{ color:#8f0447; text-decoration:none; background-image:url(../images/plus2.png);}
.side_menu ul li a.active{ color:#8f0447; background-image:url(../images/plus2.png);}

@media (min-width:992px){.content_row{ border-left:1px solid #ccc;}}

/*.page_content{ background-color:#fff; padding:30px 20px; border-top:10px solid #059ee9; -moz-box-shadow:0 4px 15px -2px gray; -webkit-box-shadow:0 4px 15px -2px gray; box-shadow:0 4px 15px -2px gray;}*/

.page_content h2{color:#000;}
.page_content p{ color:#000;}
.page_content img{ width:100%; height:auto; margin:10px 0;}


.page_product_block{ padding:64px 0; background-image:url(../images/white.jpg); background-position:center; background-size:cover; background-attachment:fixed;}

.page_product_block .table_title{ background-color:#099; color:#fff; padding:10px 15px; margin:15px 0;}

.page_product_block .table thead{background-color:#ffcc66;}

.page_product_block .table tbody{ background-color:#ffecd3; }
.page_product_block .table tbody tr:nth-child(even){ background-color:#fff6ea;}

.product_pic{ max-width:400px;}
.product_download{ list-style:none; padding:0;}
.product_download i{ margin:0 10px;}
.product_download a{ color:#000;}
.product_download a:hover{ color:#8f0447; text-decoration:none;}

.page_news_block{ padding:64px 0; background-image:url(../images/white.jpg); background-position:center; background-size:cover; background-attachment:fixed;}


.news_page_date{ color:#555;}
@media (min-width:992px){.news_page_date{ float:right; margin-top:-3.2rem;}}


.page_resource_block{ padding:64px 0; background-image:url(../images/white.jpg); background-position:center; background-size:cover; background-attachment:fixed;}

.page_resource_block .page_content h4{ color:#f27043;}
.page_resource_block .page_content ol{ color:#777;}

.resource_con h5{ border-bottom:1px solid #777; padding-bottom:10px;}
.resource_con ul{ padding-left:25px;  list-style-image:url(../images/list_arrow.png); }

.page_contact_block{ padding:64px 0; background-image:url(../images/white.jpg); background-position:center; background-size:cover; background-attachment:fixed;}

.page_contact_block .page_content h3{ color:#000;}
.page_contact_block .page_content ul{ padding:0; list-style:none; color:#000;}

.page_contact_block .table{ color:#000;}

.page_contact_block .page_content .form-group{ color:#000;  line-height:1.8em;}
.page_contact_block .page_content .form-group .btn{ background-color:#059ee9; color:#fff;}
.page_contact_block .page_content .form-group .btn:hover{ background-color:#f27043;}

.table_list{ padding:0; list-style:none;}
.table_list li{ margin-left:1.45rem; text-indent:-1.45rem;}