/* CSS Document */
@import url(font-awesome/css/font-awesome.min.css);

body {	-webkit-text-size-adjust:100%; margin:0; text-align:center; font-family:Verdana,"微軟正黑體"; font-size:13px; color:#000000; line-height:20px; background:url(../images/bg.jpg) top center no-repeat #00add9; letter-spacing:0.5px;}
img {	border:0; }

/* Reset ================================================================================= */

a { text-decoration:none; color:#000000;
-webkit-transition: all 0.2s ease-out 0s;
-moz-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s; }
a:hover {	color:#000000; text-decoration:none; }

* { margin:0; padding:0; list-style:none;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */}

.main-Box, .top-Box, .menu-Box, .banner-Box, .content-Box, .content2-Box, .footer-Box, .copyright-Box { width:1000px; margin:0 auto; text-align:left; position:relative; clear:both;}

.after-0:after { clear:both; display:block; content:""; height:0; text-indent:-99999px;}
.after-5:after { clear:both; display:block; content:""; height:5px; text-indent:-99999px;}
.after-10:after { clear:both; display:block; content:""; height:10px; text-indent:-99999px;}
.after-15:after { clear:both; display:block; content:""; height:15px; text-indent:-99999px;}
.after-20:after { clear:both; display:block; content:""; height:20px; text-indent:-99999px;}

#gotop { display: none; position: fixed; right:20px; bottom:20px; cursor: pointer; }
#gotop a { display:inline-block; width:30px; height:30px; border-radius:100%; padding-top:6px; color:#000; opacity:0.5;  filter: alpha(opacity=50); background:#fff;}
#gotop a:hover { color:#000; opacity:1;  filter: alpha(opacity=80);}


.banner { min-height:168px; padding:58px 0 15px 54px;}
h1 { font-family:Arial; font-size:46px; color:#19b9b1; padding-bottom:10px; letter-spacing:0.5px; line-height:46px;}
.path { letter-spacing:0.5px; font-size:16px; font-weight:bold; color:#000000; font-family:Arial;}
.path a { color:#000;}
.path a:hover { color:#19b9b1;}

.main { background:#f8f8f8; padding:40px 30px;}
.main:after { content:'';display:block;clear:both}
h2 { font-size:13px; font-weight:normal; color:#000; padding-bottom:20px;}
.pro-list { text-align:center;}
.pro-list li { display:inline-block; width:455px; height:318px; background:#fff; vertical-align:top; margin:0 2px 8px 2px;}
.pro-pto { float:left; width:190px;}
.pro-data-box { float:left; width:calc(100% - 190px); padding:116px 0 0 7px; font-size:16px; text-align:left; line-height:24px;}
.pro-data { padding-bottom:47px;}
.pro-btn { display:inline-block; width:64px; height:28px; line-height:26px; background:#f4f4f4; text-align:center; color:#000; position:relative; font-size:13px; text-transform:uppercase;}
.pro-btn:after { content:""; position:absolute; top:30%; right:-10px;
width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 10px; border-color: transparent transparent transparent #f4f4f4; }
.pro-btn:hover { color:#fff; background:#19b9b1;}
.pro-btn:hover:after { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 10px; border-color: transparent transparent transparent #19b9b1;}

.pro-b { float:left; width:25%;}
.pro-b-data { float:left; width:75%;}
.pro-b-data li { list-style: disc; list-style-position: inside;}

.resp-tabs-list li:last-child { background:none;}
.data-list li{ list-style-type:disc; margin:0 0 0 20px;}

.btn-box { border-top:1px solid #000000; position:relative; margin:60px 0 20px 0;}
.btn-box span { position:relative; left:35%; width:250px; height:40px; font-size:20px; color:#000000; background:#f8f8f8; display:block; top:-12px; text-align:center;}
.btn-box span:before { content:""; position:absolute; top:11%; left:0px;
width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 10px; border-color: transparent transparent transparent #000;}
.btn-box span:after { content:""; position:absolute; top:11%; right:0px;
width: 0; height: 0; border-style: solid; border-width: 7px 10px; border-color: transparent #000 transparent transparent;}
.btn-box span a { color:#000;}
.btn-box span a:hover { color:#19b9b1;}
.btn-box span i { display:inline-block; padding:0 10px; font-size:10px;}

.aboutus {
    padding:5px 10px;
}

.aboutus li{
    list-style: disc;
    margin: 0 0 0 20px;
}

.about00 {
    padding: 0 50px 0 0;
}

.about01 {    
	display: inline-block;
	padding: 0 10px 0 0;
}

.about01 p{    
	font-size: 16px;
    font-weight: bold;
}


.about02 {    
    display: inline-block;
    vertical-align: top;
    padding: 0 0 0 10px;
	width: 44%;
}

/*-------流程圖-------*/

.history {
    position: relative;}

.history .title {
	font-family: Verdana,"微軟正黑體";
    background-color: #0F69A1;
    display: table;
    height: 30px;
    text-align: center;
    line-height: 30px;
    margin: 0 auto 0;
    padding: 15px 23px;
    position: relative;
    color: #FFF;
    border-radius: 30px;
}

.history .title div { font-size: 22px;}



.history .left {
    float: right;}

.history .left.text {
    text-align: right;
    margin: -45px 200px 0 0;}
	
	
.history .right {
    float: left;}
	

	
.history img {
    background: #fff;
    box-shadow: 0px 0px 2px #aaa;
    margin: 6px;
    padding: 4px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;}
	

.timeline {
    margin: 20px 0 0;}


.timeline .year {
    background: #FFFFFF;
    color: #333;
    font-size: 16px;
	border: 2px solid rgb(15, 105, 161);
    line-height: 35px;
    text-align: center;
	margin: 0 47px;
    width: 130px;
    position: relative;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
}
	
.timeline .line {
    border-top: 2px solid #0F69A1;
    height: 2px;
    margin: 19px -48px 0 -48px;
	width: 30px;
}
.pro-choice-color { padding-bottom:0px;}
.pro-choice-color span { display:inline-block; width:30px; height:30px; margin:0 10px 10px 0;cursor: pointer;}
.pro-choice-color span img{ max-width: 100%;max-height: 100%}
.pro-choice-size span { display:inline-block; width:30px; height:30px; margin:0 10px 10px 0; background:#f0f0f0; text-align:center; line-height:30px; color:#21262e; font-size:14px; text-transform:uppercase; cursor:pointer;}
.pro-choice-color span.select,.pro-choice-size span.select{border:1px solid red}
.pro-choice-size span:hover, .pro-choice-size span.current { background:#000; color:#fff;}

.timeline .include_left {
    margin: 0 359px 0 0;}
	
.timeline .include_right {
    margin: 0 0 0 356px;
}


	
	
.timeline .text {
    overflow: auto;
    width: 360px;
	margin: -45px 0px 0 200px;
	font-size: 16px;
}
	
	
h4 {
    background: #0F69A1;
    border-color: #FFFFFF;
    border-width: 2px;
    border-radius: 20px;
    color: #fff;
    display: block;
    height: 15px;
    text-align: center;
    line-height: 15px;
    margin: 0 0 4px;
}

.line01 {
	border-left:2px solid #0F69A1; 
	height:1480px; 
	position: absolute;  
	left:50%; 
	width:2px; 
	z-index:0;
	margin-top: 80px;
	
}