@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Lato:100,400,900); /* font */
@import url(https://fonts.googleapis.com/css?family=Monda:400,700); /* font */
@import url('https://fonts.googleapis.com/css?family=Metrophobic');
/* Template-specific stuff
 *
 * Customizations just for the template; these are not necessary for anything
 * with disabling the responsiveness.
 */

/* Account for fixed navbar */
body {
  min-width: 970px;
  font-family: 'Metrophobic', '微軟正黑體', sans-serif; /*自行增減使用 */
  font-size: 16px;
  line-height:1.5;
  color: #333;
  /*background:url('../images/all/bg.jpg') repeat-y right;*/
  background: transparent;
  background-size:contain;
}


/* Don't let the lead text change font-size. */
.lead {
  font-size: 16px;
}

/* Finesse the page header spacing */
.page-header {
  margin-bottom: 30px;
}
.page-header .lead {
  margin-bottom: 10px;
}


/* Non-responsive overrides
 *
 * Utilitze the following CSS to disable the responsive-ness of the container,
 * grid system, and navbar.
 */

/* Reset the container */
.container {
  width: 970px;
  max-width: none !important;
  margin: auto;
  padding: 0;
}

/* Demonstrate the grids */
.col-xs-4 {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #eee;
  background-color: rgba(86,61,124,.15);
  border: 1px solid #ddd;
  border: 1px solid rgba(86,61,124,.2);
}
.navbar-custom .container{position: relative;}
.container .navbar-header,
.container .navbar-collapse {
  margin-right: 0;
  margin-left: 0;
}
.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand{margin-left:0!important;}

/* Always float the navbar header */
.navbar-header {
  float: left;
}
.navbar-header a,.navbar-header:hover a{color: #fff}

/* Undo the collapsing navbar */
.navbar-collapse {
  display: block !important;
  height: auto !important;
  padding-bottom: 0;
  overflow: visible !important;
}

.navbar-toggle {
  display: none;
}
.navbar-collapse {
  border-top: 0;
}

.navbar-brand {
  margin-left: -15px;
  height: inherit;
}

/* Always apply the floated nav */
.navbar-nav {
  float: left;
  margin: 0;
}
.navbar-nav > li {float:left;padding: 0 5px}
.navbar-nav > li > a {
  padding: 15px;
  color: #fff;
  font-weight: bold;
}
.nav>li>a:focus, .nav>li>a:hover,
.nav .open>a, .nav .open>a:focus, .nav .open>a:hover{background: transparent;border:inherit;}
/* Redeclare since we override the float above */
.navbar-nav.navbar-right {
  float: right;
}

/* Undo custom dropdowns */
.navbar .navbar-nav .open .dropdown-menu {
  position: absolute;
  float: left;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .15);
  border-width: 0 1px 1px;
  border-radius: 0 0 4px 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
          box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
  color: #333;
}
.navbar .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar .navbar-nav .open .dropdown-menu > li > a:focus,
.navbar .navbar-nav .open .dropdown-menu > .active > a,
.navbar .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar .navbar-nav .open .dropdown-menu > .active > a:focus {
  color: #fff !important;
  background-color: #428bca !important;
}
.navbar .navbar-nav .open .dropdown-menu > .disabled > a,
.navbar .navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar .navbar-nav .open .dropdown-menu > .disabled > a:focus {
  color: #999 !important;
  background-color: transparent !important;
}
.header ul.dropdown-menu{padding-top:5px;padding-bottom:5px;background:#fff;border:inherit;border-radius:0;}
.header ul.dropdown-menu>li>a{position:relative;padding:5px 20px;}
.header ul.dropdown-menu>li:hover>a{font-weight:bold}
.header ul.dropdown-menu>li>a::before{content:'';position:absolute;left:0;top:15px;width:0;height:1px;background:#aaa;-webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);-moz-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);-o-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);-ms-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);}
.header ul.dropdown-menu>li:hover>a::before{width:15px}

.navbar .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar .navbar-nav .open .dropdown-menu > li > a:focus,
.navbar .navbar-nav .open .dropdown-menu > .active > a,
.navbar .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar .navbar-nav .open .dropdown-menu > .active > a:focus{background-color:rgba(19, 18, 24,.7) !important;}
.navbar-custom {
  padding: 20px 0;
  border-bottom: 0;
  letter-spacing: 1px;
  -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
  -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
  transition: background .5s ease-in-out,padding .5s ease-in-out;
}

.navbar-custom.top-nav-collapse {
  padding: 0;
  border-bottom: 1px solid rgba(255,255,255,.3);
  background:#131218;
}
.navbar-custom.top-nav-collapse .navbar-brand{padding-top:20px;}
.navbar-custom.top-nav-collapse .navbar-brand>img {float: left;width: 60px;margin-top: -10px;padding-right:10px;}
.navbar-custom.top-nav-collapse .nav>li{padding-top:0}

a { color:#000;text-decoration:none}
a:hover { color:#777;
    text-decoration:none;
    -o-transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    transition:  all .3s linear; /*連結淡入淡出*/
}
/*---------------------- 基礎設定 ----------------------*/
/*反白設定
::selection { background: #666; color: #FFF; }
::-moz-selection { background: #666; color: #FFF; }
*/

/* CSS3 style  陰影圓角範例，可自行增減使用 */
.css-radius {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
} 
.css-shadow {
  -webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, .4);
  -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, .4);
  box-shadow: 0px 0px 6px rgba(0, 0, 0, .4);
}
.imgholder img{
  transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  
  transition:transform 0.5s ease-in-out, opacity 0.5s;
  -moz-transition:-moz-transform 0.5s ease-in-out, opacity 0.5s;
  -webkit-transition:-webkit-transform 0.5s ease-in-out, opacity 0.5s;
}
.imgholder:hover img{
  transform:scale(1.05, 1.05);
  -ms-transform:scale(1.05, 1.05);
  -moz-transform:scale(1.05, 1.05);
  -webkit-transform:scale(1.05, 1.05);
  -o-transform:scale(1.05, 1.05);
}
.rotation360 {
  transition:All 0.4s ease-in-out;
  -webkit-transition:All 0.4s ease-in-out;
  -moz-transition:All 0.4s ease-in-out;
  -o-transition:All 0.4s ease-in-out;
}
.rotation360:hover {
  transform:rotate(360deg);
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
}
.fadeout img {  filter:alpha(opacity=100); -moz-opacity:1; opacity: 1;
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    -ms-transition: opacity .5s ease-in-out;    
    transition: opacity .5s ease-in-out; }
.fadeout:hover img { filter:alpha(opacity=70); -moz-opacity:0.7; opacity:0.7; }


/*線(共用)*/
hr { height:1px; background:#CCC; }

/*文字樣式(共用)*/
.white { color: #FFF; }
.gray { color:#999; }
.black { color:#000; }
.blue { color: #0097de; }
.blue-fb { color: #3b5998; }
.red {color: #b80e28;}
.green { color: #19a568; }
.orange { color: #FF6600; }
.yellow { color: #ffd400; }
.purple { color:#6633CC; }
.brown { color:#6e453c; }
.gold{color: #ffc620}
.imggs{max-width: 100%}
.clearfix{clear:both;}
.bg-white{background:#fff}
.bg-black{background:#131218}
.bg-blue{background:#0097de}
.bg-blue-fb{background:#3b5998}

.white-black,.black-white,.white-black2{position:relative;}
.white-black::before,.white-black::after{position: absolute;z-index:-1;content:'';top:0;bottom:0;width: 50%;}
.white-black2::before{position: absolute;z-index:-1;content:'';top:0;bottom:0;width: 32%;}
.white-black2::after{position: absolute;z-index:-1;content:'';top:0;bottom:0;width: 68%;}
.white-black::before, .white-black2::before{left:0;background:#fff;}
.white-black::after{right:0;background:#131218;}
.white-black2::after{right:0;/*background:#28272c;*/background:#131218;}

.black-white::before,.black-white::after{position: absolute;z-index:-1;content:'';top:0;bottom:0;width: 50%;}
.black-white::before{left:0;background:#131218;}
.black-white::after{right:0;background:#fff;}

.pl10{padding-left:10px;}.pl30{padding-left:30px;}
.pr10{padding-right:10px;}.pr30{padding-right:30px;}
.pt30{padding-top:30px;}.pt50{padding-top:50px;}.pt60{padding-top:60px;}.pt100{padding-top:100px;}
.pb30{padding-bottom:30px;}.pb50{padding-bottom:50px;}.pb60{padding-bottom:60px;}.pb100{padding-bottom:100px;}
.mt10{margin-top:10px;}.mt30{margin-top:30px;}.mt50{margin-top:50px;}.mt60{margin-top:60px;}.mt100{margin-top:100px;}.mt150{margin-top:150px;}
.mb10{margin-bottom:10px;}.mb30{margin-bottom:30px;}.mb50{margin-bottom:50px;}.mb60{margin-bottom:60px;}.mb100{margin-bottom:100px;}
.margin-auto{margin-left: auto;margin-right: auto}
.font-size2rem{font-size: 2rem}
.imggs{max-width:100%}
.imggs-h{max-height:100%}

/*效果*/
.action4{-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);-webkit-transition: all 3s cubic-bezier(0.165, 0.84, 0.44, 1);-moz-transition: all 3s cubic-bezier(0.165, 0.84, 0.44, 1);-o-transition: all 3s cubic-bezier(0.165, 0.84, 0.44, 1);-ms-transition: all 3s cubic-bezier(0.165, 0.84, 0.44, 1);transition: all 3s cubic-bezier(0.165, 0.84, 0.44, 1);}
.action4:hover{-webkit-transform: scale(1.05);-ms-transform: scale(1.05);transform: scale(1.05);}
/*漸變用*/
.gradient-1s{-webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);-moz-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);-o-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);-ms-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);}

/* 回頂端 */
#goTop {
  /*border:1px solid #CCC;
  color:#aaa;
  background:#FFF;*/
  text-align:center;
  position:fixed;
  bottom:20px;
  right:20px;
  /*width:50px;
  height:50px;*/
  line-height:50px;
  cursor:pointer;
  display:none;

}
/*#goTop:hover { background:#999; color:#FFF; }*/

.go-top {
    position: fixed !important;
    z-index: 10000;
    width: 75px;
    height: 75px;
    right: 40px;
    bottom: 40px;
    transform: scale(0);
    -ms-transform: scale(0);
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    transition: all .25s cubic-bezier(0,.4,.4,1) .25s;
    -ms-transition: all .25s cubic-bezier(0,.4,.4,1) .25s;
    -moz-transition: all .25s cubic-bezier(0,.4,.4,1) .25s;
    -webkit-transition: all .25s cubic-bezier(0,.4,.4,1) .25s;
}
.go-top.view {
    opacity: 1;
    transform: scale(1);
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    transition: all .25s cubic-bezier(0,.4,.4,1);
    -ms-transition: all .25s cubic-bezier(0,.4,.4,1);
    -moz-transition: all .25s cubic-bezier(0,.4,.4,1);
    -webkit-transition: all .25s cubic-bezier(0,.4,.4,1);
}
.go-top > i {
    display: block;
    position: absolute;
    width: 51px;
    height: 51px;
    background: #880000;
    top: 12px;
    left: 12px;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transition: all .25s cubic-bezier(0,.4,.4,1);
    -ms-transition: all .25s cubic-bezier(0,.4,.4,1);
    -moz-transition: all .25s cubic-bezier(0,.4,.4,1);
    -webkit-transition: all .25s cubic-bezier(0,.4,.4,1);
}
.go-top:hover > i {
    background: #db241e;
}
.go-top.view > i:before {
    top: -5px;
    left: -5px;
    transition: all .25s cubic-bezier(0,.4,.4,1) .25s;
    -ms-transition: all .25s cubic-bezier(0,.4,.4,1) .25s;
    -moz-transition: all .25s cubic-bezier(0,.4,.4,1) .25s;
    -webkit-transition: all .25s cubic-bezier(0,.4,.4,1) .25s;
}
.go-top > i:before {
    content: '';
    display: block;
    position: absolute;
    width: 53px;
    height: 53px;
    border-top: 5px solid #db241e;
    border-left: 5px solid #db241e;
    border-right: 5px solid transparent;
    border-bottom: 5px solid transparent;
    top: 0;
    left: 0;
    transition: all .25s cubic-bezier(0,.4,.4,1);
    -ms-transition: all .25s cubic-bezier(0,.4,.4,1);
    -moz-transition: all .25s cubic-bezier(0,.4,.4,1);
    -webkit-transition: all .25s cubic-bezier(0,.4,.4,1);
}
.go-top:hover > i:before {
    top: -15px;
    left: -15px;
    border-top: 5px solid #880000;
    border-left: 5px solid #880000;
}
.go-top.view > i:after {
    right: -5px;
    bottom: -5px;
    transition: all .25s cubic-bezier(0,.4,.4,1) .25s;
    -ms-transition: all .25s cubic-bezier(0,.4,.4,1) .25s;
    -moz-transition: all .25s cubic-bezier(0,.4,.4,1) .25s;
    -webkit-transition: all .25s cubic-bezier(0,.4,.4,1) .25s;
}
.go-top > i:after {
    content: '';
    display: block;
    position: absolute;
    width: 53px;
    height: 53px;
    border-top: 5px solid transparent;
    border-left: 5px solid transparent;
    border-right: 5px solid #db241e;
    border-bottom: 5px solid #db241e;
    right: 0;
    bottom: 0;
    transition: all .25s cubic-bezier(0,.4,.4,1);
    -ms-transition: all .25s cubic-bezier(0,.4,.4,1);
    -moz-transition: all .25s cubic-bezier(0,.4,.4,1);
    -webkit-transition: all .25s cubic-bezier(0,.4,.4,1);
}
.go-top:hover > i:after {
    right: -15px;
    bottom: -15px;
    border-right: 5px solid #880000;
    border-bottom: 5px solid #880000;
}
.go-top > span {
    display: block;
    position: absolute;
    width: 45px;
    height: 39px;
    line-height: 21px;
    font-size: 0.8125rem;
    color: #fff;
    top: 18px;
    left: 15px;
    text-align: center;
}

/*次選單*/
.submenu {}

/*頁尾*/
.footer {color:#fff;background:#131218;text-align:center}
.footer a{color: #fff;}
.footer a:hover{color: #fff;}
.footer-menu{list-style-type:none;margin:0;padding:30px 0;}
.footer-menu li{display:inline-block;}
.pg .footer{padding-top:80px;}

.copyright{padding:0 0 30px 0;font-size: 1.4rem;color:rgba(255,255,255,.5)}
.copyright a{color:rgba(255,255,255,.5)}

/*按鈕*/
.btnWrap { margin:2em 0; text-align:center; }
.btn-style{position: relative;display:inline-block;padding:5px 30px;min-width:150px;}
.btn-style::before,.btn-style::after{content:'';position:absolute;bottom:0;background:#131218;-webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);-moz-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);-o-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);-ms-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);}
.btn-style::before{left:0;height:1px;width:0;}
.btn-style::after{right:0;bottom:1px;width:1px;height:0;
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform-origin: center bottom;

}
.btn-style:hover::before,a:hover .btn-style::before{width:100%;}
.btn-style:hover::after,a:hover .btn-style::after{height:20px;    animation-delay:1s;
    -moz-animation-delay:1s;
    -webkit-animation-delay:1s;
    -o-animation-delay:1s;
    -ms-animation-delay:1s;} 
.btn_red{ background-color:#880000; border-radius:0;}
.hvr-ripple-out:before { border: #880000 solid 1px;}  


/*----banner---*/
.banner { height:400px; }
.carousel {  height:600px; }
.carousel:hover .carousel-control {
  display:block;
}
.carousel .item,
.carousel .item.active,
.carousel .carousel-inner {
    height: 100%;
}
.carousel .fill {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
}
.carousel .carousel-control {
  background:none;
  display:none;
}
.carousel-control .icon-prev::before,
.carousel-control .icon-next::before {
  content:'';
}
.carousel-control .icon-prev,
.carousel-control .icon-next {
  width:30px;
  height:60px;
  margin:-30px 0 0 0;
}
.carousel-control .icon-prev {
  background:url(../images/all/control-icon.png) 0 0 no-repeat;
}
.carousel-control .icon-next {
  background:url(../images/all/control-icon.png) -30px 0 no-repeat;
}
/*淡入 淡出*/
.carousel-fade .carousel-inner .item {  transition-property: opacity; }
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {  opacity: 0; }
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {  opacity: 1; }
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {  left: 0;  transform: translate3d(0, 0, 0); }

.carousel-caption{top: 42%;}
.carousel-caption h2{position: relative; display: inline-block;width:500px;padding:5px 10px;}
.carousel-caption h2:before,.carousel-caption h2:after{
  background:rgba(50, 73, 179, .5);
  -moz-transform:skewX(-20deg);
  -webkit-transform:skewX(-20deg);
  -o-transform:skewX(-20deg);
  -ms-transform:skewX(-20deg);
  transform:skewX(-20deg);  
}
.carousel-caption h2:before{position: absolute;bottom:-10px;left:-10px;z-index:-1;content: '';width: 200px;height: 5px;
}
.carousel-caption h2:after{position: absolute;top:0;left:0;z-index:-1;content: '';width: 100%;height: 100%;
}
.carousel-indicators{bottom:39%;left:49%;}

/*2色版塊設計*/
.block-style{}
.block-style .block{padding-top:60px}
.block-style .block.block1{position:relative;z-index:1;float:left;width:500px;padding:0 10px;height:400px;}
.block-style .block.block2{padding-left:500px;height:400px;}

.block-style .block .text{}
.block-style .block .ul-text{list-style-type:none;margin:0;padding:0;float:right}
.block-style .block .ul-text li{position: relative;padding-left:20px;width:150px;}
.block-style .block .ul-text li::before{content:'-';position:absolute;left:0;top:0;font-weight:bold}

.white-black .block-style{border-left: solid 2px rgba(20,19,25,.3);}
.black-white .block-style{border-left: solid 2px rgba(255,255,255,.3);}
/*標題*/
.title{}
.title.main-title{}
h2.title.main-title{}
.adornment-area{position:relative;}
.adornment-theme{
    position: absolute;
    left:55px;
    top:30px;
    margin:0;
    font-size:5rem;
    font-weight: bold;
    color:#131218;
    opacity:.3;
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform-origin: top left;}
.adornment-theme.white{color:#fff;}
.page-title-box{display:block;width:150px;height:150px;margin:50px auto 0;padding-top:30px;color: #fff;background:rgba(0,0,0,.9);text-align: center;border-radius:100%;border:solid 4px #fff;}
.page-title-box p{position: relative;text-transform:uppercase}
.page-title-box p::after{content:'';position: absolute;left:25px;bottom:-10px;width: 100px;height: 1px;background:rgba(255, 255, 255, .5);}
.page-title-box h2{}

.page-title-box.bottom{margin:0 auto -80px;position:relative}
a.page-title-box:hover{color: #131218;background:#ffd400}
/*首頁*/
.block-style .block.block1.fb-box{padding:60px;padding-left:90px}
.block-style .block.block1.fb-box h2.title{padding-left:10px;padding-left:10px;text-shadow:0 0 30px #cbe6ff, 0 0 3px #7ec0ff;color: #fff}
.block-style .block.block1.fb-box h3{padding-left:10px;padding-right:10px;text-shadow:0 0 30px #cbe6ff, 0 0 3px #7ec0ff;}
.index-pic03{background:url('../images/index/index-pic03.jpg')no-repeat center;background-size:cover;padding:90px 0;text-align: center;color: #fff;}
/*產品*/
.sub-menu{list-style-type:none;margin:-210px 0 0;padding:0;text-align: center}
.sub-menu li{display: inline-block;width: 30%;margin:1%;}
.sub-menu li a{display: block;padding:5px;background:rgba(0,0,0,.5);border:solid 1px rgba(255,255,255,.5);color: #fff;}
.sub-menu li a:hover,.sub-menu li a.active{background:#fff;color: #000;}

/*關於我們*/
.about_area{  color:#fff; font-size:18px;}
.about_area .col-sm-2{ text-align:center; padding: 2em 0; height: 420px;}
.about_area .col-sm-10{ padding: 2em 2em; background-color: #131218; height: 420px;}
.about_img{ width:40%;}
.about_area h2:after { background: #979797; content: " "; display: block; height: 2px; margin: 5px 0 35px; width: 2em;}
.about_bg{ background:url(../images/p1/bg.jpg) no-repeat; height:380px; padding:3em 0; text-align:center;}
.about_bg h2{ color:#fff; text-align:center;}
.about_bg h2:after { background: #979797; content: " "; display: block; height: 2px; margin: 10px auto; width: 2em;}
.about_list{ display:inline-block; width:150px; height:150px; border:4px #fff solid; color:#fff; margin: 1em; border-radius: 50%; font-size:36px;
background: -moz-linear-gradient(45deg,  rgba(255,255,255,0.6) 0%, rgba(252,252,252,0.6) 1%, rgba(0,0,0,0.5) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg,  rgba(255,255,255,0.6) 0%,rgba(252,252,252,0.6) 1%,rgba(0,0,0,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg,  rgba(255,255,255,0.6) 0%,rgba(252,252,252,0.6) 1%,rgba(0,0,0,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99ffffff', endColorstr='#80000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}
.about_list:before { content: ""; height: 100%; display: inline-block; vertical-align: middle;}
.about_list .span{  display: inline-block; vertical-align: middle;}


/*聯絡我們*/
.title_style .page-title-box{ margin-top: -180px;}
.map_area{ width:100%; height:450px; border-top: 8px #131218 solid; margin-top: 1em;}
.contact_info{ margin:3em 0 2em 0; background:url(../images/p3/01.jpg) no-repeat; height:280px; padding-left: 330px; padding-top: 2em;}
.contact_info i{ width: 30px; height: 30px; background-color: #b80e28; color: #fff; border-radius: 15px; text-align: center; line-height: 28px; margin-right: 5px;}
.form_area .name{ line-height: 36px; color:#222;}
.form_area .text{ margin: 0 0 10px 0;}
.form_area .input1,.form_area select.form-control{ border:none; border-bottom: 1px solid #dbdbdb !important;
color: #555;  height: 36px; width: 100%; padding: 0 0 0 8px; box-shadow: none; border-radius: 0;}
.form_area .input2,.form_area .input3{  border:none; border-bottom: 1px solid #dbdbdb !important; color: #555;}
.form_area .input2{ width:100%; }
.form_area .input3{ width:80px; text-align:center;}