@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 */

/* CSS Document */
html{}
body, html {height:100%;}
body {
    font-family: 'Lato', '微軟正黑體', sans-serif; /*自行增減使用 */
    font-size: 16px;
    line-height:1.5;
    color: #333;
    letter-spacing: .1rem;
}
a { display:inline-block;color:#000; text-decoration: none; }
a:hover { color:#777; 
    -o-transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    transition:  all .3s linear; /*連結淡入淡出*/
}
.web-bg{background: url(../images/all/web-bg.png)no-repeat center top/100%,linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(255, 255, 255, 0.5) 100%),url(../images/all/bg.jpg)no-repeat center/cover;background-size: cover;}
.web-bg-index{background: url(../images/all/web-bg-index.png)no-repeat center top/100%;background-size: cover;}
/*---------------------- 基礎設定 ----------------------*/
/*反白設定
::selection { background: #666; color: #FFF; }
::-moz-selection { background: #666; color: #FFF; }
*/

/*元件(共用)*/
.input1, .textarea, .select { background: #FFF; border: 1px solid #CCC; font-family: 'Lato', '微軟正黑體', sans-serif; font-size:15px; line-height:1.1; color:#555; }
.input1:focus, .textarea:focus, .select:focus { border:1px solid #000; }

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

/*文字樣式(共用)*/
.h1, .h2, .h3, h1, h2, h3{margin-top: 0;margin-bottom: 15px;font-size:2rem;line-height: inherit;}
.white{color: #fff;}

/* 回頂端 */
#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;
    font-family:Verdana, Geneva, sans-serif;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%; 
    border-radius: 100%; 
    -webkit-box-shadow: #EEE 0px 0px 5px; 
    -moz-box-shadow: #EEE 0px 0px 5px;
     box-shadow: #EEE 0px 0px 5px; 
}
#goTop:hover { background:#999; color:#FFF; }

/*-------------------------------*/
/*縮放*/
.action1{-webkit-transform: scale(1.05);-ms-transform: scale(1.05);transform: scale(1.05);-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);}
.action1:hover{-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);}

.action2{-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);}
.action2:hover{-webkit-transform: scale(0.95);-ms-transform: scale(0.95);transform: scale(0.95);}

.action3{-webkit-transform: scale(.95);-ms-transform: scale(.95);transform: scale(.95);-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);}
.action3:hover{-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);}

.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-03s{-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);}
.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);}

/*---------------------- 頁面開始 ----------------------*/
/*全頁佈局*/
.wrapper {padding: 30px 0;}
.container {  }

/*主選單*/
.navbar {margin-bottom:0;border-radius:0;border:0;}
.navbar-brand{height: 120px;}
.navbar-brand>img{max-height: 100%;max-width:100%}
.navbar-header, .navbar-collapse{/* float:inherit; */vertical-align: middle;}
.navbar-collapse{text-align:right;/* width: calc(100% - 400px); */padding-top: 50px;}
.navbar-nav{float: right;}
.navbar-nav>li>a{color:#fff}
.nav>li>a:focus, .nav>li>a:hover{background:#1b488f}
.navbar-toggle {margin-top: 35px;}
.navbar-toggle .icon-bar{background: #fff;width: 40px;}


/*側邊選單*/
/*---------sidebar--------------*/
.sidebar { float:left; width:200px; margin-bottom:20px; }
.sidebar .mtitle { margin-bottom:1em; }
.sidebar .navbar-toggle { display:none; width:100%; float:inherit; text-align:left; margin:0; padding-left:1em; color:#835034; position:relative; }
.sidebar .navbar-toggle .fa-caret-down { position:absolute; right:15px; top:15px; }
.sidebar .navbar > li { border-bottom:4px solid #eee; margin-bottom:10px; }
.sidebar .navbar > li > a { display:block; padding:10px 15px; }
.sidebar .navbar > li > a:hover, .sidebar .navbar > .active > a { background:none; color:#ff8e00; }
.sidebar .navbar > .active { border-color:#ff8e00; }
.sidebar .navbar ul { list-style:none; margin:0; padding:15px; padding-top:0; }
.sidebar .navbar ul li a .fa { margin-right:4px; }
.sidebar .navbar ul > li > a { display:block; padding:5px 0 5px 30px; color:#fff; text-decoration:none;  }
.sidebar .navbar ul > li > a:hover, .sidebar .navbar ul > li.active > a { color:#ffebae;  }
.sidebar .navbar > li > a {
    backface-visibility: hidden;
    padding-right: 1em;
    position: relative;
    transform: translateZ(0px);
    transition-duration: 0.1s;
}
.sidebar .navbar > li > a::before {
    content: "";
    font-family: "FontAwesome";
    padding: 0 1px;
    position: absolute;
    right: 16px;
    transform: translateZ(0px);
    transition-duration: 0.1s;
    transition-property: transform;
    transition-timing-function: ease-out;
}
.sidebar .navbar > li > a:hover::before, .sidebar .navbar > li > a:focus::before, .sidebar .navbar > li.active > a::before {
    transform: translateX(6px);
}
.main { margin-left:240px;  overflow:hidden;}
.affix {    top:65px; }


/*頁尾*/
.footer {padding: 30px 0;text-align: center;background-image: linear-gradient(-225deg, rgba(125, 125, 125, 0.13) 0%, rgb(232, 232, 232) 50%, rgba(66, 66, 66, 0.38) 100%),url(../images/all/ft-bg.jpg);}
.footer ,.footer a{/* color: #fff; */}
.footer ul{list-style: none;margin: 0;padding: 0;}
.footer li{padding:15px;display:inline-block;}
.footer .infor{text-align: center;}
.footer .infor a{display: block;}
.footer .infor p{display: inline-block;}
.copyright{padding-top:5px;font-size:1.4rem}
/*按鈕*/
.btnWrap { margin:2em 0; text-align:center; }

/*RWD編輯器表格(X捲軸)*/
.table-container table td {
    min-width: 100px;
    padding: 5px;
    border: 1px solid #ccc;
    white-space: inherit; /*清除html內容強制不換行*/
}
@media screen and (max-width: 768px) {
    .table-container { 
        width: 100%;
        overflow-y: auto;
        _overflow: auto;
        margin: 0 0 1em;
       }
}

/*----banner---*/
.banner { height:300px; }
.carousel {height: 40vw;}
.carousel img{position: absolute;right: 0;bottom: 0;height: 35vw;margin-right: 30px;margin-left: auto;}
.carousel-caption{left: 15%;bottom: 50%;max-width:500px;text-align:left;line-height:1.6;font-size: 3rem;-ms-transform: translate(0,50%);-webkit-transform: translate(0,50%);transform: translate(0,50%);}
.carousel-caption p{}
.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;
}
.video-box{position: absolute;z-index: -1;left: 0;top: 0;width: 100%;height: 56vw;overflow: hidden;}
.video-box:after{content: '';position: absolute;z-index: 1;left: 0;right: 0;bottom: 0;height: 100%;background: -moz-linear-gradient(to bottom, rgba(39, 80, 123, 0) 0%, rgba(39, 80, 123, 0.9) 50%,rgb(3, 21, 63) 100%); /* FF3.6-15 */background: -webkit-linear-gradient(to bottom, rgba(39, 80, 123, 0) 0%, rgba(39, 80, 123, 0.9) 50%,rgb(3, 21, 63) 100%); /* Chrome10-25,Safari5.1-6 */background: linear-gradient(to bottom, rgba(39, 80, 123, 0) 0%, rgba(39, 80, 123, 0.9) 50%,rgb(3, 21, 63) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */}
video{position: absolute;z-index: -1;top: 0;left: 50%;width: 100%;height:100%;margin:auto;display:block;-ms-transform: translate(-50%,0);-webkit-transform: translate(-50%,0);transform: translate(-50%,0);}

/*首頁*/
.index-title{font-size: 4rem;letter-spacing: .3rem;font-weight: 700;}
.index-title span{display: block;margin-bottom: 15px;text-transform: uppercase;font-style: initial;font-size: 1.8rem;letter-spacing: .6rem;}
.product-block .index-title{text-align: center;}
.product{list-style: none;margin: 0 0 30px;padding: 0;text-align: center;overflow: hidden;}
.product li{position: relative;z-index: 1;display: inline-block;width: calc(100% / 4 - 15px);padding: 30px;vertical-align: bottom;}
.product img,.product h3{display: inline-block;vertical-align: bottom;}
.product img{max-width: 100%;width: 100%;}
.product h3{}
.slogan h3:before,.slogan h3:after{content:'';position:absolute;z-index: -1;left:0;right:0;bottom: 8px;height: 20px;background: #00c2ff;}
.slogan h3:before{}
.slogan h3:after{height:2px;left:3%;right:3%;bottom: -5px;background:#02ceff#ffc200;}
.slogan{position: relative;}
.slogan h3{
    position: absolute;
    right: 50%;
    top: 40%;
    max-width: 700px;
    -ms-transform: translate(50%,-50%);
    -webkit-transform: translate(50%,-50%);
    transform: translate(50%,-50%);
    font-size: 4rem;
    letter-spacing: .3rem;
    font-weight: 700;
    color:#1b488f;
}
.slogan span{}
.slogan span:before{content: '';width: 5px;height: 5px;margin: 0 15px;display: inline-block;background: #1b488f;border-radius: 100%;}

/*關於長霖*/
.about-area{background: url(../images/about/about-bg.jpg)no-repeat;padding: 150px;color: #fff;box-shadow: 0 0 30px 8px rgba(0, 0, 0, 0.7);}
.about-img{padding-top: 20px;}
.img-box{width: 32.3%;display: inline-block;padding: 15px;}
.img-box img{    max-height: 100%;
    max-width: 100%;
    border: solid 5px #fff;
    -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);}
.img-box img:hover {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}

.about-info h2{font-size: 30px;font-style: italic;display: inline-block; border-bottom: 1px solid;}

/*服務項目*/
.service-box{display: inline-block;width: calc(100% / 3 - 25px);margin: 10px;position: relative;}
.service-box img{    
    max-height: 100%;
    max-width: 100%;
    border: solid 5px #fff;
    -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);}
.service-box img:hover {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}
.mj-title.aa{position: absolute;bottom: 0;margin-left: -15px;}



/*產品介紹*/
.unit-title{font-size: 3rem;}
.unit-title span{display: block;font-size: 2.4rem}
.mj-title{display:inline-block;border-bottom:solid 1px #999;background: #1b488f;background: linear-gradient(-225deg, rgb(0, 51, 107) 0%, rgba(0, 157, 255, 0.8) 50%, rgb(0, 28, 74) 100%);padding: 10px 30px 15px 40px;color: #fff;margin-left: -40px;/* border-radius: 30px 0 0 30px; */border-left: solid 10px #0d336f;}
aside.container{
    padding: 30px 30px 15px;
    background: #1b488f;
    background: linear-gradient(-225deg, rgb(0, 51, 107) 0%, rgba(0, 157, 255, 0.8) 50%, rgb(0, 28, 74) 100%);
    background: url(../images/all/logo-icon.png) no-repeat -50px 10%   ,linear-gradient(-225deg, rgb(107, 25, 0) 0%, rgba(255, 146, 0, 0.8) 50%, rgb(107, 20, 0) 100%);
    box-shadow: 0 0 30px 8px rgba(0, 0, 0, 0.7);
    /* background-size: contain; */
}
aside > * {float: left;width: 300px;color: #fff;}
aside ul{float: right;width: calc(100% - 300px);max-width: 750px;list-style: none;margin: 0;padding: 0;text-align: center;}
aside li{display: inline-block;width: 48%;padding: 0 15px 15px;}
aside a{position:relative;display: block;padding: 5px 25px;text-align: center;color: #fff;border: solid 1px #fff;}
aside a:before{content:'\f0da';position:absolute;left:-1px;top:50%;font-family: "Font Awesome 5 Free"; font-weight: 900;font-size:6rem;
    -ms-transform: translate(0,-50%);
    -webkit-transform: translate(0,-50%);
    transform: translate(0,-50%);
}
aside a:hover{background:#fff;color:#1b488f;border-radius:5px 0 0 5px}
.product-area{margin:0 -15px;padding: 0 15px 15px;background: #eee;background: rgb(255,255,255); /* Old browsers */background: -moz-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); /* FF3.6-15 */background: -webkit-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Chrome10-25,Safari5.1-6 */background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}
.product-area:nth-child(even){background:#cad7de; /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */background: linear-gradient(135deg, rgb(229, 241, 247) 0%,rgb(162, 192, 214) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ /* IE6-9 fallback on horizontal gradient */}
.product-area > *{float:left;width: 25%;/* height: 350px; */padding: 0 15px 15px;}
.product-area > *:nth-child(-n+2){/* width:50% */}
.product-area > *:first-child{width: 100%;padding: 30px 15px 0;}
.product-area h3{font-size:1.6rem}
.product-area a{height: 100%;}
.product-area img{max-height:100%;max-width: 100%;border: solid 5px #fff;
    -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);
}
.product-area img:hover{
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);

}


/*聯絡我們*/
.title-lform-rinfo .c_tit{  text-align:center; margin-bottom:1.5em;}
.title-lform-rinfo .contact_form { width: 49%; float: left;  margin-left: 3%;  border-right: 1px solid #E8E8E8; color: #333;}
.title-lform-rinfo .page_form .input1,.title-lform-rinfo .page_form select,.title-lform-rinfo .page_form textarea, .title-lform-rinfo .page_form .input3 {
    border: 1px solid #eaeaea;   padding: 5px 10px;  background: #f6f6f6;  line-height: 1.1;  color: #888;  box-shadow: none;  width: 94%; margin-bottom: 15px;  border-radius: 2px; }
.title-lform-rinfo .page_form .input3{ width:inherit; }
.title-lform-rinfo .contact_form .page_form.col-md-6 { padding-left: 0; }
.title-lform-rinfo .contact_form .page_form2 { margin: 2em 0;}

.title-lform-rinfo .contact_list { width: 42%; float: right; margin-right: 3%; list-style: none;  padding: 0; }
.title-lform-rinfo .contact_list li {  clear: both;  padding-bottom: 20px;  color: #333;  overflow: hidden; height: 70px;font-size: 0;}
.title-lform-rinfo .contact_list li:before {content: ""; height: 100%; display: inline-block; vertical-align: middle;}
.title-lform-rinfo .tx_r {  width: 80%;   display: inline-block;  vertical-align: middle;  font-size: 16px;text-align: left;}
.title-lform-rinfo .box1 { float: left; width: 50px; height: 50px;  display: block;text-align: center;  padding-top: 7px; border: 2px solid #1b488f;   margin-right: 8px;-webkit-border-radius: 30px;  -moz-border-radius: 30px;   border-radius: 30px;  }
.title-lform-rinfo .box1 i {  color: #1b488f;   font-size: 26px;  line-height: 30px; margin: 0; }
.title-lform-rinfo .contact_list li:hover .box1 { background: #1b488f;}
.title-lform-rinfo .contact_list li:hover i {  color: #fff;}
.btn-block {text-align:center;background: linear-gradient(-225deg, rgb(0, 51, 107) 0%, rgba(0, 157, 255, 0.8) 50%, rgb(0, 28, 74) 100%);padding: 10px 0px;font-size: 21px;transition: all .5s;width: 30%;}
.btn-block a{color: #fff;}
.contact-area:after{content: '';display: block;clear:both;}
.contact-area{background: #fff;padding:50px 0px;box-shadow: 0 0 30px 8px rgba(0, 0, 0, 0.7)}


@media (max-width: 768px) { 
.title-lform-rinfo .contact_form { width: 90%;  float: none;  margin: 0 auto;  border: none;}
.title-lform-rinfo .contact_list { width: 90%;  float: none;  margin: 0 auto;  list-style: none;  padding: 25px 0 0;  border-top: 1px dashed #ccc;}
}
@media (max-width: 480px) { 
.title-lform-rinfo .contact_list li {  height: auto;}
.title-lform-rinfo .box1 { width: 40px; height: 40px;}
.title-lform-rinfo .box1 i { font-size: 22px; line-height: 23px; }
}


@media (min-width: 1600px){
    /*全頁佈局*/
    .container {width: 1400px;}
    
}

@media (max-width: 1400px) { 
    .slogan h3{font-size: 3.6rem;}
    .slogan span{display:block}
}

@media (max-width: 996px) { 
    /*全頁佈局*/
    .container{width:100%}
    /*----banner---*/
    .carousel {height: 60vw;}
    .carousel img{height: 90%;}
    .carousel-caption{
        left: 30px;
        right: 60%;
        bottom: 0;
        font-size: 2.6rem;
        color: #000;
        text-shadow: inherit;
        -ms-transform: translate(0,0);
        -webkit-transform: translate(0,0);
        transform: translate(0,0);
    }
    .video-box{height: 100vw;}
    video{width:150vw;-ms-transform: translate(-50%,-20%);-webkit-transform: translate(-50%,-20%);transform: translate(-50%,-20%);}

    /*關於長霖*/
    .about-area{padding: 30px;}

    /*服務項目*/
    .service-box{width: calc(100% / 2 - 25px);}
}



@media (max-width: 768px) { 
    /*全頁佈局*/
    .wrapper.pdt {padding-bottom: 0;}
    
    .navbar-brand{height: 100px;}
    .navbar-collapse{background: #333;padding: 30px;}
    .navbar-nav{float:inherit;width:100%;margin: 0;}
    .carousel-caption{left:15px;right: 50%;font-size:2rem;}
    .carousel img{bottom:inherit;top:0}
    .index-title{font-size: 2.4rem}
    .product-block .index-title{text-align:left}
    .product li{width: 48%;padding: 15px;}
    .slogan h3{width: 50%;font-size: 3rem;right: 30px;-ms-transform: translate(0,-50%);-webkit-transform: translate(0,-50%);transform: translate(0,-50%);text-align: center;}
    .slogan span:before{display:none}
    .footer{padding: 30px 0 80px;}
    /*產品介紹*/
    aside > *{width:100%}
    aside ul{width: calc(100% + 30px);margin-left: -15px;margin-right: -15px;}
    aside li{float: left;width: 50%;}
    .mj-title{margin-left:-15px;margin-top:-50px;/* margin-bottom: 0; */padding: 5px 15px;}
    .product-area h3{/* margin-bottom:0 */}
    .product-area > *:first-child{padding-top:0}
    .product-area > *{width:50%}
    aside.container{padding: 15px;}
    .product-area{padding: 0 0 15px;}
}

@media (max-width: 640px) { 
    #goTop { width:100%; left:0; right:0; bottom:0; border-radius:0; border:0; border-top:1px solid #eee; }
    .navbar-brand{height: 100px;width: calc(100% - 100px)}
    .navbar-toggle{margin-top: 30px;}
    .carousel{height: auto;}
    .carousel img,.carousel-caption{position: static;height: auto;padding: 15px;}
    .carousel img{width: 50%;margin: 0 auto}

    /*服務項目*/
    .service-box{width: 100%;margin:10px auto;}
    
    /*關於長霖*/
    .about-area{padding:20px;}
    .about-info h2{font-size: 21px;}

    /*聯絡我們*/
    .contact-l, .contact-r,.logo-block,.btn-block{width: 100%;}
    .contact-l{position: inherit;}
    .contact-area ul h3{padding-top:0px;    font-size: 16px;}


}
@media (max-width: 480px) { 

.img-box{width: 31.3%}

}

@media (max-width: 380px) { 
.contact-area ul li{border-right: none;}
}