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

@import url("reset.css");

html { width:100%; height: 100%;}
html, body { margin:0; padding:0;font-family:Arial, Helvetica, sans-serif;}
body { font-family:"微軟正黑體",Arial, Helvetica, sans-serif; font-size:13px ; line-height:18px; color:#555; width:100%; height:100%; background: #FFF;}
body#pages { background:#FFF;}
body#pages2 { background: #FFF;}
a {text-decoration: none;}

.footer3 div.company a,
.pagetop,
.service ul.servicelist li a,
.product a.list
{ background: url(../images/main.png) no-repeat;}

p.ptitle,
h1.ptitle
{ background: url(../images/title.png) no-repeat;}

#toggle_m_nav { display: none;}
#m_nav_container { display: none;}

.wrapper { width:100%;}
.header { width:100%; height: 85px; padding:5px 0 0 0; background:linear-gradient(to right, #8ceabd , #499af5); position:fixed; z-index:999; top:0; left:0;  }
.header .box { height: 85px; background: #FFF;}
.header .box .menu { width: 90%; max-width:1200px; height: 78px; margin: 0 auto; padding: 0px 0 0 15px;}
.header a.logo { float: left; display: block; width: 271px; height: 68px; margin:10px 0 0 0; text-indent: -5000px; background:url(../images/logo.png) no-repeat;}
.header ul { float: right; margin:40px 0 0 0; overflow: hidden;}
.header li { float: left; margin:0 0 0 10px; padding: 0;}
.header li.last { background: none;}
.header li::before{ content:''; display:inline-block; width:30px; height:1px; margin: 0 10px 0 0; background:#DDD; vertical-align: middle;}
.header li a { display: inline-block; font-size: 18px; color: #555; vertical-align: middle;}
.header li a:hover { color:#2b537d;}
.header li a.on { color:#2b537d; font-weight: bold;}

.indexbanner{ display:block; width:100%; margin:0px auto 80px auto; position:relative; padding:90px 0 0 0; background: linear-gradient(to right, #1c496a 0%, #1c496a 60%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 100%);}
.indexbanner::after{ content:''; display:block; width:40%; height:70%; background:#eee; position:absolute; left:50%; bottom:-10%;}
.indexbanner .main{ display:block; width:100%; max-width:1200px; margin:0px auto 0 auto; font-size:0; line-height:0; position:relative; z-index: 3;}
.indexbanner img{ width:100%;}
.indexbanner p.tel{ display: inline-block; margin:0 0 0 0; font-size:18px; line-height:35px; color:#a3f1d9; position: absolute; top:45%; left:0%; z-index:9;}
.indexbanner p.tel::after{ content:'GPS'; display:block; font-size:150px; line-height:80px; color:#FFF; opacity:0.1; position:absolute; top:-70px; left:-60px; font-weight: bold; font-style:italic;}
.indexbanner p.tel strong{ display: block; margin:0 0 15px 0; font-size:48px; color:#dab882; font-style: italic;}
.indexbanner p.tel span{ display: block; font-size:20px; margin:0 0 30px 0; line-height:36px; color:#FFF;}
.indexbanner p.tel a{ font-size:50px; font-family:Cambria Bold; color:#a3f1d9; vertical-align:middle; margin:0 0 0 20px; font-style:italic; text-shadow:3px 3px 8px rgba(0,0,0,0.8);}
.indexbanner p.tel b{}

.bannerimg{ width:100%; padding:0 0 54% 0;}
.bgbg{ position: absolute; top:0; width:100%; min-height:100%; height:100%; z-index:1; height:100% !important;}
.bgstretcher-area { text-align: left; width:100%; height:100% !important;	position: absolute !important;	top: 0;}
.bgstretcher, .bgstretcher UL, .bgstretcher UL LI {	position: absolute !important;	top: 0;	left: 0; height:100% !important;}
.bgstretcher UL, .bgstretcher UL LI {	margin: 0;	padding: 0;	list-style: none;}
.bgstretcher {	overflow: hidden;	width: 100%;	position: fixed;	z-index: 1;	top: 0;	left: 0;}
.bgstretcher img{ position:relative; margin:0 !important; width:100% !important; height:auto !important;}

#nav{ display:block; width:40%; position:absolute; bottom:50px; right:0; z-index:9;}
#nav ul{ display:block; width:100%; max-width:500px; margin:0 auto; text-align:center; font-size:0; letter-spacing:0;}
#nav ul li{ display:inline-block; width:calc(100% / 3 - 2px); margin:0 1px; background:#222; position:relative;}
#nav ul li a{ display:block; width:100%; padding:0 0 60% 0; background: #222; opacity:0}
#nav ul li.showPage a{ opacity:0;}
#nav ul li.showPage::after{ content:''; display:block; width:100%; border-top:5px solid #7bd5cb; position:absolute; bottom:-20px; left:0; font-size:16px; color:#51a4ee; padding:15px 0 0 0; text-align:left;}

#nav ul li:nth-child(1){ background:url(../images/banner/banner1_s.png) no-repeat center center; background-size:cover;}
#nav ul li:nth-child(1).showPage::after{ content:'GPS 追蹤器';}
#nav ul li:nth-child(2){ background:url(../images/banner/banner2_s.png) no-repeat center center; background-size:cover;}
#nav ul li:nth-child(2).showPage::after{ content:'針孔攝影機';}
#nav ul li:nth-child(3){ background:url(../images/banner/banner3_s.png) no-repeat center center; background-size:cover;}
#nav ul li:nth-child(3).showPage::after{ content:'監控器';}

.indexproduct{ display:block; width:100%; margin:0 auto 0 auto; padding:50px 0 70px 0; background: #DDD; background-size:cover;}
.indexproduct h2{ display:block; width:100%; margin:0 0 50px 0; font-size:32px; color:#2675b0; text-align:center;}
.indexproduct h2 span{ font-weight: normal;}
.indexproduct .clist{ display:block; width:100%; max-width:1200px; height:260px ;margin:0 auto 0px auto; padding:0 0 0 25%; position:relative;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.indexproduct .clist img.people{ display:block; width:42%; position:absolute; bottom:-70px; left:0; z-index:9;pointer-events: none;}
.indexproduct .clist .scrollable { position:relative; top:0px; overflow:hidden; width:100%; height:260px; padding:0; margin:0 auto; z-index:10}
.indexproduct .clist .scrollable .items { width:1000%; position:absolute; clear:both;}
.indexproduct .clist .scrollable .items div{ display:block; float:left; width:10%; height:260px; position:relative; overflow:hidden; padding:0px; color:#333;}
.indexproduct .clist .scrollable .items div ul{ display:block; width:100%;  height:260px; overflow:hidden; margin:0 auto;}
.indexproduct .clist .scrollable .items div ul li{ display:block; width:23%;  height:230px; margin:0 1% 0 1%; padding:10px 0 5px 0; float:left;  overflow:hidden; background: rgba(255,255,255,1); border-radius:8px; position:relative;}
.indexproduct .clist .scrollable .items div ul li p.img{ display:block; width:80%; margin:0 auto 15px auto;}
.indexproduct .clist .scrollable .items div ul li p.img img{ width:100%; height: auto;}
.indexproduct .clist .scrollable .items div ul li h3{ display:block; width:80%; margin:0 auto; font-size:16px; line-height:25px; color: #111111; text-align:center; font-weight: normal;}
.indexproduct .clist a.next{ display:block; width:50px; height:50px; background: #FFF url(../images/next.png) no-repeat center center; text-indent:-5000px; position:absolute; top:95px; right:-50px; z-index:2; cursor:pointer;  border-radius:50px;}
.indexproduct .clist a.next:hover{ }
.indexproduct .clist a.prev{  display:block; width:50px; height:50px; background: #FFF url(../images/prev.png) no-repeat center center; text-indent:-5000px; position:absolute; top:95px; left:23%; z-index:10; cursor:pointer;  border-radius:50px;}
.indexproduct .clist a.prev:hover{ }
.indexproduct .clist a.disabled{ display: none;}
.indexproduct a.more{ display:block; width:252px; height:62px; background:url(../images/more.png); text-indent:-5000px; margin:0 auto;}


.indexservice{ display:block; width:100%; margin:0 auto 0 auto; padding:70px 0 80px 0; background:#FFF;}
.indexservice h4{ display:block; width:100%; margin:0 0 50px 0; font-size:32px; color:#333333; text-align:center;}
.indexservice h4 span{ font-weight: normal;}
.indexservice ul{ display:block; width:100%; max-width:1200px; margin:0 auto;}
.indexservice ul li{ display: flex; width:100%; margin:0 0 100px 0; position:relative; font-size:0; line-height:0; flex-wrap:wrap; flex-direction: row-reverse;}
.indexservice ul li:nth-child(2){ flex-direction: row;}

.indexservice ul li.right img{ width:45%; height:auto; float:  right;}

.indexservice ul li .left{ display:inline-block; width:70%; height:100%; margin:0 0 0 5%; padding:80px 0 0 0; position:sticky; top:0; vertical-align: top;}
.indexservice ul li:nth-child(2) .left{ margin:0 5% 0 0%;}
.indexservice ul li .text{ display:block; width:100%; padding:15px 5%;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.indexservice ul li.right .text{ right: 35%;}
.indexservice ul li .left img{ width:100%; height: auto; margin:0 0 30px 0;}
.indexservice ul li .text h5{ display: inline-block; margin:0 auto 15px auto; padding:0 0 10px 0; border-bottom:1px solid #99703b; font-size:36px; font-weight:  bolder;line-height:45px; color:#8a6847; text-align: left; letter-spacing:1px;}
.indexservice ul li .text p{ display:block; width:100%; margin:0 auto 50px auto; font-size:16px; line-height:31px; color:#555; letter-spacing:1px;}
.indexservice ul li .text a{ display:block; width:180px; height:50px; background:linear-gradient(to right, #8ceabd , #499af5); font-size:18px; line-height:50px; color:#FFF; text-align:center; border-radius:25px;}

.indexservice ul li .sproduct{ display: inline-block; width: 25%; margin: 0 auto;}
.indexservice ul li.right .sproduct{ margin: 0 0 0 0;}

.indexservice ul li .sproduct .stitle{ margin:0 0 80px 0;}
.indexservice ul li .sproduct .stitle em{ display: block; font-size: 65px; line-height: 60px;color: #111; margin:0 0 30px 0; font-weight: bold; text-transform:uppercase; font-style:normal;}
.indexservice ul li .sproduct .stitle em b{ display: block; font-size: 16px; letter-spacing: 5px; margin:0 0 30px 0; color: #257ad9;}
.indexservice ul li .sproduct .stitle span{ display: inline-block;padding: 5px 30px; font-size: 18px; line-height: 19px; font-weight: bold; color: #FFF; background:  #333; border-radius: 8px; vertical-align:  middle; text-align:  center;}

.indexservice ul li .sproduct p a{ display:block; margin:0 0 50px 0;}
.indexservice ul li .sproduct p a span{ display:block; background:#eee; padding:20px 0;}
.indexservice ul li .sproduct p a span img{ display: block; width:50%; margin:0 auto;}
.indexservice ul li .sproduct p a strong{ display:block; width:90%; margin:-16px auto 0 auto; font-size:18px; line-height:29px; color:#555;}
.indexservice ul li .sproduct p a strong b{ display:inline-block; border:1px solid #1b5c8a; background:#FFF; margin:0 0 8px 0; padding:2px 25px; font-size:13px; line-height:15px; font-weight: normal; color:#1b5c8a;}
.indexservice ul li.right .text .sproduct em{ left: inherit; right: -20%; }


.indexnews{ display:block; width:100%; margin:0 auto 80px auto; padding:100px 0 0px 0; background:#e8edf8 url("../images/index_bg.jpg") no-repeat center center; background-size: cover;}
.indexnews .main{ display:block; width:100%; max-width:1200px; margin:0 auto; overflow:hidden;}

.indexnews .main .right{ display:block; width:50%; margin:0 8px 0 0; float: right; background:#FFF; overflow:hidden;}
.indexnews .main .right h6{ display:block; width:100%; height:70px; margin:0 0 30px 0; padding:0 0 0 15px; font-size:26px; line-height:70px; color:#e8cfaf; background: #111; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; box-shadow:#a9c2d0 0 0 10px;}
.indexnews .main .right h6 span{ font-weight: normal;}
.indexnews .main .right ul{ display:block; width:90%; margin:0 auto;}
.indexnews .main .right ul li{ display:block; width:100%; margin:0 0 25px 0; padding:0 0 15px 25px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;overflow:hidden; position: relative; border-bottom:1px dotted #B4B4B4;}
.indexnews .main .right ul li a{ display:block; width:100%; margin:0 0 5px 0; color:#333333; font-size:20px; line-height:35px;}
.indexnews .main .right ul li p{ display:block; width:100%; color:#999999; font-size:15px; line-height:21px;}
.indexnews .main .right ul li .line{ display:block; width:5px; height: 80%; background:#dfdfdf; border-radius:5px; position: absolute; top:5px; left:0;}
.indexnews .main .right ul li:hover .line{ background:#237ac2;}

.indexabout{ display:block; width:100%; margin:0 auto 0 auto; padding:70px 0 80px 0; background:#FFF;}
.indexabout .main{ display:block; width:80%; max-width:1000px; margin:0 auto 0 auto; overflow:hidden;}
.indexabout .main p.img{ display:block; width:45%; float:right;overflow:hidden; font-size:0;}
.indexabout .main p.img img{ width:100%; height:auto;}
.indexabout .main .text{ display:block; width:50%; float:left;}
.indexabout .main .text .title{ display: inline-block; margin:0 0 30px 0; padding:30px 0 0 0; font-size: 28px; line-height:32px; color:#111111; position: relative;}
.indexabout .main .text .title span{ display:block; width:100%; height:5px; border-radius:5px; background:#237ac2; position:absolute; top:0;}
.indexabout .main .text p{ margin:0 0 35px 0; font-size:16px; line-height: 32px; color: #333333;}
.indexabout .main .text p.blue{ margin:0 0 15px 0; padding:0 0 0 25px; font-size:16px; line-height: 24px; color: #666666;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background:url(../images/icon_1.png) no-repeat 0 5px;}
.indexabout .main .text p.blue strong{ display:block; font-size:18px; color:#71a7d0; margin:0 0 5px 0;}

.bannerm{ display:block; width:100%; height:250px; background:#1c496a url(../images/banner2.jpg) no-repeat center bottom;}


.content { position:relative; width: 90%; max-width:1200px; margin: -70px auto 0 auto; padding: 0px 0 0 0; }
.content::after{ content:''; display:block; width:100vw; height:150px; background:#FFF; position:absolute; top:-30px; right:65%; border-radius:0 60px 0 0; z-index:1;}

p.slogan { margin:55px 0 0 0; padding: 0 0 15px 0; font-size:36px; color: #704c2b; line-height: 60px; letter-spacing: 1px;}
h2.slogan { margin:55px 0 0 0; padding: 0 0 15px 0; font-size:36px; font-weight:normal; color: #704c2b; line-height: 60px; letter-spacing: 1px;}
p.info { padding:30px 0 80px 0; width:100%; font-size: 16px; line-height: 30px; background: url(../images/info_spilit.png) no-repeat;}
p.info strong{ display:block; font-size:18px; color:#8a6847;}
h3.info { padding:30px 0 30px 0; width:100%; font-size: 16px; font-weight:normal; line-height: 30px; background: url(../images/info_spilit.png) no-repeat;}
p.info2 { padding:30px 0; }
h3.info2 { padding:30px 0; }
p.ptitle{ position:relative; z-index:2; margin:0 0 80px 0;}
.about p.ptitle { width: 180px; height: 78px; text-indent: -5000px; background-position: 0 0;}
.about ul.aboutlist { width:100%; max-width: 1200px; margin: 0 auto 50px auto;}
.about ul.aboutlist li { display:block; width: 100%; margin: 0 0 30px 0; overflow: hidden; }
.about ul.aboutlist li .fleft { float: left;}
.about ul.aboutlist li .fright { float: right;}
.about ul.aboutlist li p.pimg { width: 45%; overflow: hidden;}
.about ul.aboutlist li p.pimg img{ width:100%;}
.about ul.aboutlist li div.ptxt { width: 50%; padding: 0 0 0 0; border-top: 1px solid #ccc;}
.about ul.aboutlist li div.stitle h1 { padding: 0 0 0 27px; font-size:24px; font-weight: normal; color: #71a7d0; line-height: 36px; background: url(../images/icon_1.png) no-repeat 0 50%;}
.about ul.aboutlist li div.stitle h2 { padding: 0 0 0 27px; font-size:24px; font-weight: normal; color: #71a7d0; line-height: 36px; background: url(../images/icon_1.png) no-repeat 0 50%;}
.about ul.aboutlist li div.stitle h3 { padding: 0 0 0 27px; font-size:24px; font-weight: normal; color: #71a7d0; line-height: 36px; background: url(../images/icon_1.png) no-repeat 0 50%;}
.about ul.aboutlist li p.sinfo { padding: 0 0 0 27px; font-size:18px; color: #333; line-height: 24px;}
.about ul.aboutlist li p.scontent { padding: 0 0 0 27px; font-size:16px; color: #666; line-height: 30px;}

.service p.ptitle { width: 216px; height: 78px; text-indent: -5000px; background-position: 0 -88px;}
.service ul.servicelist { width: 1000px; margin: 0 auto 100px auto; overflow: hidden;}
.service ul.servicelist li { position: relative; display: block; float: left; width: 470px; margin: 0 0 70px 0; overflow: hidden; }
.service ul.servicelist li.left { margin: 0 60px 70px 0;}
.service ul.servicelist li div.ptxt { position: absolute; right: 0; top: 25px; width: 210px; height: 290px; padding: 25px 20px; background: #fff;}
.service ul.servicelist li .stitle { margin:0 0 22px 0; font-size:24px; font-weight: normal; color: #2675b0; line-height: 52px; text-align: center; border-bottom: 1px solid #2675b0; }
.service ul.servicelist li p.scontent { height:150px; font-size:16px; color: #666; line-height: 30px; overflow: hidden;}
.service ul.servicelist li a { display: block; width: 47px; height: 21px; margin: 40px auto 0 auto; background-position: -616px 0;}
.service ul.servicelist li a:hover { background-position: -616px -31px;}

.product p.ptitle { width: 262px; height: 78px; text-indent: -5000px; background-position: 0 -176px; position:relative;}
.product p.ptitle2 { margin:0 0 80px 0;}
.product div.stitle { padding:30px 0 50px 0; font-size: 22px; color: #2675b0; background: url(../images/info_spilit.png) no-repeat 0 0;}
.product div.stitle h1 { margin: 0; padding:0; font-weight: normal; line-height:30px;}
.product div.stitle span{ color: #666;}
.product a.list { position: absolute; display: block; width: 160px; height:45px; right:0; top: 180px; text-indent: -5000px; background-position: -673px 0;}
.product a.list:hover { background-position: -673px -55px;}
.product ul.productlist { display:flex; width: 90%; margin: 0 auto 100px auto; flex-wrap:wrap; position:relative;}
.product ul.productlist::before{ content:'▪ 產品類型'; display:inline-block; font-size:28px; line-height:32px; color:#111; position:absolute; top:-40px; left:0; font-weight: bold;}
.product ul.productlist li { position: relative; display: block; width: 50%; margin: 5% 0 0 0;}
.product ul.productlist li.right { margin: 0px 0 0 100px;}
.product ul.productlist li div.box { display: block; width: 100%; height: 300px; background: url(../images/product_bg.png) no-repeat center bottom; background-size:100% 300px;}
.product ul.productlist li p.pimg { width:100%; height:160px; text-align: center;}
.product ul.productlist li p.pimg img{ width:70%; transform: translateY(-30%)}
.product ul.productlist li div.ptxt { height: 90px; text-align: center;}
.product ul.productlist li div.ptxt h1 { font-weight: normal;}
.product ul.productlist li div.ptxt h2 { font-weight: normal;}
.product ul.productlist li div.ptxt h3 { font-weight: normal;}
.product ul.productlist li div.ptxt h4 { font-weight: normal;}
.product ul.productlist li div.ptxt h5 { font-weight: normal;}
.product ul.productlist li div.ptxt h6 { font-weight: normal;}
.product ul.productlist li div.ptxt a { display: block; height:60px; padding:15px 0; font-size: 22px; color: #2675b0; line-height: 30px;}
.product ul.productlist li div.ptxt a span { font-size: 18px; color: #666;}
.product ul.productlist li div.ptxt a:hover { color: #000;}
.product ul.productlist li div.ptxt a:hover span { color: #000;}
.product ul.productlist2 { display:flex; width: 100%; margin: 0 auto 100px auto; overflow: hidden; flex-wrap:wrap;}
.product ul.productlist2 li { position: relative; display: block; width: calc(100% / 3 - 2%); margin: 0 1% 30px 1%; padding:0 0 30px 0; text-align: center; border-radius: 5px; background:#EEE; position:relative;}
.product ul.productlist2 li img{ display:block; width:80%; max-width:165px; margin:0 auto 30px auto; position: relative; z-index:2;}
.product ul.productlist2 li h2 { width:80%; margin:0 auto; padding:15px 0 0 0; height:75px; font-size: 18px; font-weight: normal; color: #111; line-height: 30px;border-top:1px solid #8ceabd; position:relative; z-index:3;}
.product ul.productlist2 li h2::after{ content:''; display:block; width:10px; height:10px; background:#8ceabd; position:absolute; top:-5px; left:calc(50% - 5px); border-radius:5px;}
.product ul.productlist2 li::after{ content:''; display:block; width:100%; height:30%; background:#FFF; position: absolute; top:0; left:0; z-index:1;}

.pservice{ display:flex; width:100%; flex-wrap:wrap; margin:0 0 50px 0;}
.pservice p.img{ width:45%;}
.pservice p.img img{ width:100%;}
.pservice .text{ width:50%; padding:0 0 0 5%;}
.pservice .text h2{ margin:0 0 20px 0; font-size:35px; line-height:46px; color:#111;}
.pservice .text h2 span{ display:inline-block; background:#aa957b; color:#FFF; font-size:16px; line-height:19px; letter-spacing:5px; padding:0 25px;}
.pservice .text p{ display:block; font-size:16px; line-height:32px;}

.news p.ptitle { width: 156px; height: 78px; text-indent: -5000px; background-position: 0 -263px;}
.news h1.ptitle { width: 156px; height: 78px; text-indent: -5000px; background-position: 0 -263px;}
.news p.ptitle2 { margin:0 0 100px 0;}
.news ul.newslist { width: 1000px; margin: 0 auto 100px auto; overflow: hidden;}
.news ul.newslist li { position: relative; display: block; width: 1000px; height: 65px; overflow: hidden;}
.news ul.newslist li.odd { background:#FFF; border-radius:15px;}
.news ul.newslist li span { float:left; display: block; width: 120px; height: 35px; margin:0 0 0 15px; padding: 15px 0 15px 30px; font-size: 16px; color: #888; line-height: 35px; background:url(../images/icon_2.png) no-repeat 0 50%;}
.news ul.newslist li a { float:left; display: block; width: 820px; height: 35px; padding: 15px 0; font-size: 18px; color: #2675b0; line-height: 35px;}
.news div.pagebar { margin: 0 0 100px 0; font-size: 18px; text-align: center;}
.news div.pagebar span { color:#333;}
.news div.pagebar a { color:#999;}
.news div.pagebar a:hover { color:#333;}
.news div.newsbox { display: block; width: 1000px; overflow: hidden;}
.news div.newsbox div.stitle { float: left; width: 250px; margin: 0 40px 0 0; padding: 50px 0 0 0; background: url(../images/news_spilit.png) no-repeat;}
.news div.newsbox div.stitle div { padding: 0 0 0 25px; line-height: 30px; background: url(../images/icon_2.png) no-repeat 0 42px;}
.news div.newsbox div.stitle div h1 { font-size: 24px; font-weight:normal; color: #2675b0; }
.news div.newsbox div.stitle div span { font-size: 14px; color: #888;}
.news div.newsbox div.main { float: left; width: 710px; margin: 0; padding: 50px 0 0 0; font-size: 16px; color: #333; line-height: 30px;}
.news div.pagebar2 { height:130px; margin: 40px auto 0 auto; padding: 20px 0 0 0; font-size: 16px; text-align: center; color: #ccc; background: url(../images/pagebar_bg.png) no-repeat 50% 0;}
.news div.pagebar2 a { color:#999;}
.news div.pagebar2 a:hover { color:#333;}
.news div.pagebar2 span { color:#ccc;}

.case p.ptitle { width: 160px; height: 78px; text-indent: -5000px; background-position: 0 -351px;}
.case h1.ptitle { width: 160px; height: 78px; text-indent: -5000px; background-position: 0 -351px; position:relative; z-index:2; margin:0 0 50px 0;}
.case h1.ptitle.qa{ background-position: 0 -263px;}
.case p.ptitle2 { margin:0 0 0 0;}
.case ul.caselist { width: calc(100% - 100px); margin: 0 auto 100px auto; padding:50px; overflow: hidden; background:#eee; border-radius:25px;}
.case ul.caselist li { position: relative;  display: block; width: calc(100% - 65px); height: auto; margin: 0 0px 0 0; padding:18px 20px 18px 45px; background:url(../images/icon_1.png) no-repeat 14px 22px; overflow: hidden; border-radius:15px;}
.case ul.caselist li:nth-child(2n){ background:#FFF url(../images/icon_1.png) no-repeat 14px 22px;}
.case ul.caselist li a { display:block;  font-size:18px; color: #111; line-height: 24px; overflow: hidden;}
.case ul.caselist li a:hover { color: #333;}
.case ul.caselist li p { font-size:16px; color: #666; line-height: 30px; overflow: hidden;}
.case div.pagebar { margin: 0 0 100px 0; font-size: 18px; text-align: center;}
.case div.pagebar span { color:#333;}
.case div.pagebar a { color:#999;}
.case div.pagebar a:hover { color:#333;}
.case div.casebox { display: block; width: 100%;}
.case div.casebox div.stitle { position:relative; width: 100%; margin: 0 auto 50px 0; padding: 50px 0 20px 0; font-size: 24px; color:#2675b0; line-height: 30px; text-align: center; border-bottom: 1px dotted #ccc;}
.case div.casebox div.stitle div h1 { font-weight: normal;}
.case div.casebox div.stitle div span { font-size: 16px; color: #666;}
.case div.casebox div.stitle img { position: absolute; left: 50%; bottom: -3px; margin: 0 0 0 -38px;}
.case div.casebox div.main { width: 100%; margin: 0 auto; font-size: 16px; color: #333; line-height: 30px;}
.case div.pagebar2 { height:130px; margin: 40px auto 0 auto; padding: 20px 0 0 0; font-size: 16px; text-align: center; color: #ccc; background: url(../images/pagebar_bg.png) no-repeat 50% 0;}
.case div.pagebar2 a { color:#999;}
.case div.pagebar2 a:hover { color:#333;}
.case div.pagebar2 span { color:#ccc;}

ul.qalist{ display:block;}
ul.qalist li{ padding:30px; border:1px solid #ccc; margin:0 0 30px 0; border-radius:5px;}
ul.qalist li .question{ background: #aa957b; padding:8px 30px; margin:0 0 15px 0; border-radius:3px;}
ul.qalist li .question h2{ font-size:18px; line-height:36px; color:#FFF;}
ul.qalist li .answer{ font-size:16px; line-height:32px;  padding:0px 30px;}

.contact2 p.ptitle { width: 241px; height: 78px; text-indent: -5000px; background-position: 0 -439px;}
.contact2 h1.ptitle { width: 262px; height: 78px; margin:0 0 80px 0; text-indent: -5000px; background-position: 0 -439px; position: relative; z-index:2;}
.contact2 div.contactinfo { width:540px; padding: 30px 0 40px 0; font-size: 18px; color: #666; line-height: 36px; border-top: 1px dotted #999;}
.contact2 div.contactinfo span { color: #999;}
.contact2 div.contactinfo b { font-size: 24px; font-weight: normal;}
.contact2 div.contactinfo a { color:#666;}
.contact2 div.contactinfo strong a { font-size: 24px; font-weight: normal; color:#333;}
.contact2 div.contactinfo2 { display: none;}
.contact2 p.form { margin: 0 0 25px 0; padding: 0 0 0 35px; font-size:24px; color: #2675b0; line-height:30px; background: url(../images/icon_1.png) no-repeat 0 50%;}
.contact2 p.line1 { height:50px; margin: 0 0 12px 0; overflow: hidden;}
.contact2 p.line1 input { border-radius:5px; float:left; width: 280px; height: 30px; margin: 0 20px 0 0; padding: 10px 20px; font-size: 18px; font-family: "微軟正黑體"; color: #666; line-height: 30px; border:0; background: #EEE;}
.contact2 p.line1 input.nomargin { margin: 0;}
.contact2 div.tbox { height:290px; margin: 0 0 12px 0; overflow: hidden;}
.contact2 div.tbox textarea { border-radius:5px; width: calc(100% - 40px); height: 270px; margin: 0; padding: 10px 20px; font-size: 18px; font-family: "微軟正黑體"; color: #666; line-height: 30px; border:0; background: #EEE;}
.contact2 p.line3 { height:50px; margin: 0 0 100px 0; overflow: hidden;}
.contact2 p.line3 input { float:left; width: 280px; height: 30px; padding: 10px 20px; font-size: 18px; font-family: "微軟正黑體"; color: #666; line-height: 30px; border:0; background: #EEE;}
.contact2 p.line3 span { float: left; display: inline-block; width: 113px; height: 50px; background: #000;}
.contact2 p.line3 span img.code { margin:15px 0 0 10px;}
.contact2 p.line3 span a img { margin:0 10px 0 20px;}
.contact2 p.line3 a.submit { float:right; display: block; width: 120px; height: 30px; margin: 0 15px 0 0; padding: 10px 0; font-size: 18px; color: #fff; line-height: 30px; text-align: center; background: #333;}
.contact2 p.line3 a.clear { float:right; display: block; width: 120px; height: 30px; padding: 10px 0; font-size: 18px; color: #b99c7e; line-height: 30px; text-align: center; background: #e9d9c8;}

div.footermain{ display:block; padding:50px 0 0 0; clear:both; background:#e3e3e3;}
div.footerbg{ background:#e3e3e3; margin:0 auto; padding:0 0 80px 0; display:block; width:100%; height: auto;}
div.footerbg .company{ display:block; width:90%; max-width:1300px; margin:0 auto 50px auto; padding:0 0 0 180px; overflow:hidden; position:relative;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div.footerbg .company img.cat{ display:block; position:absolute; top:-100px; left:0;}
div.footerbg .company .left{ display: inline-block; width:100px;}
div.footerbg .company h2{ display: inline-block; padding:0 0 5px 0; font-size:22px; line-height:26px; color:#111; position:absolute; top:6px; left:0; border-bottom:1px solid #111;}

div.footerbg .company ul.cright{ display:inline-block; width:100%; overflow:hidden;}
div.footerbg .company ul.cright li{ display:block; width:calc(25% - 1px); margin:0 0 1px 1px; padding:20px 20px; background:#FFF; float:left;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div.footerbg .company ul.cright li.title{ width:100%; margin:0; padding:0; background: none;}
div.footerbg .company ul.cright li img{ width:100%;}
div.footerbg .main{ display:block; width:90%; max-width:1300px; margin:0 auto; padding:0 0 0 180px; overflow:hidden; position:relative;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div.footerbg .main h2{ display: inline-block; padding:0 0 5px 0; font-size:22px; line-height:26px; color:#111; position:absolute; top:6px; left:0; border-bottom:1px solid #111;}
div.footerbg ul.te09{display:block; float:left; width:23.3%; line-height:29px; font-family: "微軟正黑體"; font-size: 16px;color:#666666; padding:0;}
div.footerbg ul.te09 li{ display:block;}
div.footerbg ul.te09 li a { color: #666666;text-decoration:none;}
div.footerbg ul.te09 li a:hover{color: #b1afaf;text-decoration:none;}

div.footerbg ul.te10{display:block; float:left; width:30%; line-height:29px; font-family: "微軟正黑體"; font-size: 16px; color:#666666; padding:0;}
div.footerbg ul.te10 li{ display:block;}
div.footerbg ul.te10 li a { color: #666666;text-decoration:none;}
div.footerbg ul.te10 li a:hover{color: #b1afaf;text-decoration:none;}

div.footerbg ul.te11{display:block; float:left; width:23.3%; line-height:29px; font-family: "微軟正黑體"; font-size: 16px; color:#666666; padding:0;}
div.footerbg ul.te11 li{ display:block;}
div.footerbg ul.te11 li a { color: #666666;text-decoration:none;}
div.footerbg ul.te11 li a:hover{color: #b1afaf;text-decoration:none;}

div.footerbg ul.te12{display:block; float:left; width:23.3%; line-height:29px; font-family: "微軟正黑體"; font-size: 16px; color:#666666; padding:0;}
div.footerbg ul.te12 li{ display:block;}
div.footerbg ul.te12 li a { color: #666666;text-decoration:none;}
div.footerbg ul.te12 li a:hover{color: #b1afaf;text-decoration:none;}


.footer { position:relative; padding:50px 0 50px 0;  background:#1c496a}
.footer2 { width:90%; max-width:1200px; margin: 0 auto;}
.footer2 ul { text-align:center; overflow: hidden; border-bottom:1px solid #2c3d74;}
.footer2 ul li { display: inline-block; padding: 0 20px;}
.footer2 ul li a { display: inline-block; padding: 0 0 5px 0; font-size: 18px; color: #FFF; line-height: 56px;}
.footer2 ul li a:hover { background: url(../images/footer_hover.png) no-repeat 50% 100%;}
.footer2 ul li a.on { background: url(../images/footer_hover.png) no-repeat 50% 100%;}
.footer3 { width:100%; margin: 0px auto 0 auto; overflow: hidden;}
.footer3 div.company { position: relative; float: left; width: 280px;}
.footer3 div.company a { display: block; width:263px; height: 62px; margin:0 0 20px 0; background:url(../images/logo2.png); text-indent:-5000px;}
.footer3 div.company span { font-size: 14px; color: #FFF;}
.footer3 div.contact { display: inline-block; margin:20px 0 0 0; float: right; font-size: 18px; color: #888;}
.footer3 div.contact a { font-size:40px; color:#dab882; line-height: 56px;}
.footer3 div.contact a.small { font-size:18px; color: #666;}
.footer3 div.contact3 { display: none;}
.pagetop { cursor:pointer; position: absolute; right: 0; bottom: 0; display: block; width: 98px; height: 100px; text-indent: -5000px; background-position: -400px 0; display: none;}
.pagetop:hover { background-position: -508px 0;}

a.fixtel{ display:block; width:50px; height:110px; padding:50px 0 0 0; background:#000000 url(../images/photo2.png) no-repeat center 15px; background-size:30px auto; position:fixed; bottom: 160px; right:0; font-size:20px; line-height:24px; text-align:center; color:#FFF; border-top-left-radius:10px; z-index:99;}
a.fixline{ display:block; width:50px; height:110px; padding:50px 0 0 0; background:#00b900 url(../images/line.png) no-repeat center 15px; background-size:30px auto; position:fixed; bottom:0%; right:0; font-size:20px; line-height:24px; text-align:center; color:#FFF; border-bottom-left-radius:0px; z-index:99;}

@media screen and (max-width: 1100px) {
.footer3 div.company { margin:0 0 0 50px;}
.footer3 div.contact { float: left; margin:0 0 0 50px;}
}

@media screen and (max-width: 1050px) {
.header .box .menu { width: auto; padding: 0 15px 0 15px;}
.content { width: auto; padding: 90px 15px 0 15px;}
.about ul.aboutlist { width: auto;}
.about ul.aboutlist li { width: 100%;}
.about ul.aboutlist li .fleft { float: left;}
.about ul.aboutlist li .fright { float: right;}
.about ul.aboutlist li p.pimg { width: 400px; height: 240px; overflow: hidden;}
.about ul.aboutlist li p.pimg img { width: 400px;}
.about ul.aboutlist li div.ptxt { width: 510px; padding: 20px 0 0 0;}
.service ul.servicelist { width: auto;}
.service ul.servicelist li { width: 440px;}
.service ul.servicelist li.left { margin: 0 50px 70px 0;}
.product a.list { right:15px;}
.product ul.productlist { width: auto;}
.product ul.productlist li.right { margin: 90px 0 0 70px;}
.product ul.productlist2 { width: auto;}
.product ul.productlist2 li { margin: 0 16px 16px 0;}
.product ul.productlist2 li.last { margin: 0 0 16px 0;}
.news ul.newslist { width: auto;}
.news ul.newslist li { width: auto;}
.news div.newsbox { width: auto;}
.news div.newsbox div.main { width: 680px;}
.case ul.caselist { width: auto;}
.case ul.caselist li { margin: 0 35px 30px 0;}
.case div.casebox { width: auto;}
.case div.casebox div.stitle { width: auto;}
.contact2 p.line1 input { width: 270px;}
.contact2 div.tbox textarea { width: 930px;}
}

@media screen and (max-width: 999px) {
#toggle_m_nav { display: block;}
#m_nav_container { display: block;}
* { -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -ms-transition-duration: 0.3s; transition-duration: 0.3s;}
#wrapper { position: absolute; top: 0px; width: 100%; height: 100%;}
.open_wrapper { }
.closed_wrapper { }
#m_nav_container { position: fixed; display: none; top: 60px; width: 100%; height: 200px; background: #f8f8f8; z-index:99 !important;}
#m_nav_bar { width: 80%; margin: auto;}
#m_nav_list { padding: 20px 0 0 0; overflow: hidden;}
.m_nav_item { float:left; display: block; width: 30%; height: 40px; margin: 0 5%; border-bottom: 1px dotted #ccc; }
.m_nav_item a { display: block; width: 100%; height: 30px; padding: 5px 10px; font-size: 18px; color: #333; line-height: 30px; -webkit-transition-duration: 0.5s;}
.m_nav_item a:hover {}
#m_nav_list .last { border-bottom: 0;}
.container_open { display: block; height: 120px;}
#m_nav_menu { position: fixed; top: 20px; right: 5%; width: 45px; height: 45px; background: rgba(0, 0, 0, 0); z-index: 9999; }
.m_nav_ham { width: 35px; height: 5px; margin: 5px auto; background: #555; border-radius:5px;}
.m_nav_ham_1_open { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); margin-top: 15px;}
.m_nav_ham_2_open { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); margin-top: -10px;}
.m_nav_ham_3_open { opacity: 0;}
.button_open { background: #333;}
.button_closed {}
.header{ height:60px; padding:3px 0 0 0;}
.header .box { height: 60px;}
.header .box .menu{ height: 60px;}
.header a.logo { float: none; width:180px; height:46px; background-size:100%; margin:0; transform: translateY(10px)}
.header ul { display: none;}
.indexbanner::after{ display: none;}
.content { padding: 30px 5% 0 5%; margin:-100px auto 0 auto;}
h2.slogan{ font-size:24px; line-height:30px;}
p.info { padding:30px 0 80px 0; width:auto;}
h3.info { padding:30px 0 80px 0; width:auto;}
.about ul.aboutlist { margin: 0 auto;}
.about ul.aboutlist li .fleft { float: none;}
.about ul.aboutlist li .fright { float: none;}
.about ul.aboutlist li p.pimg { margin: 0 auto;}
.about ul.aboutlist li div.ptxt { width: auto; padding: 25px 0; border-top: 0; border-bottom: 1px solid #ccc;}
.service ul.servicelist { margin: 0 auto;}
.service ul.servicelist li { float: none; margin: 0 auto 70px auto;}
.service ul.servicelist li.left { margin: 0 auto 70px auto;}
.service ul.servicelist li div.ptxt { position: absolute; right: 0; top: 25px; width: 210px; height: 290px; padding: 25px 20px; background: #fff;}
.service ul.servicelist li .stitle { margin:0 0 22px 0; font-size:24px; color: #2675b0; line-height: 52px; text-align: center; border-bottom: 1px solid #2675b0; }
.service ul.servicelist li p.scontent { height:150px; font-size:16px; color: #666; line-height: 30px; overflow: hidden;}
.service ul.servicelist li a { display: block; width: 47px; height: 21px; margin: 40px auto 0 auto; background-position: -616px 0;}
.service ul.servicelist li a:hover { background-position: -616px -31px;}
.product p.ptitle2 { margin:0 0 87px 0;}
.product p.stitle { line-height: 28px;}
.product a.list { top: 185px;}
.product ul.productlist { margin: 0 auto;}
.product ul.productlist li { float: none; margin: 0 auto;}
.product ul.productlist li.right { margin: 0 auto;}
.product ul.productlist2 { margin: 0 auto;}
.product ul.productlist2 li { margin: 2%;}
.product ul.productlist2 li.last { margin: 2%;}
.news p.ptitle2 { margin:0 0 87px 0;}
.news ul.newslist li span { position: absolute; float:none; }
.news ul.newslist li a { float:none; width: auto; padding: 0 0 0 150px; line-height: 65px;}
.news div.pagebar { margin: 0; padding: 0 0 50px 0;}
.news div.newsbox div.stitle { float: none; width: auto; margin: 0; padding: 20px 0 0 0;}
.news div.newsbox div.main { float: none; width: auto; padding: 20px 0 0 0;}
.news div.pagebar2 { height:50px;}
.case p.ptitle2 { margin:0 0 87px 0;}
.case ul.caselist { margin: 0 auto 20px auto;}
.case ul.caselist li { width: 160px; margin: 0 10px 30px 10px;}
.case ul.caselist li.last { margin: 0 10px 30px 10px;}
.case div.pagebar { margin: 0; padding: 0 0 50px 0;}
.case div.casebox div.stitle { position:relative; margin: 0 auto 50px 0; padding: 0px 0 20px 0; text-align:left;}
.case div.casebox div.main { width: auto;}
.case div.pagebar2 { height:50px;}
.contact2 div.contactinfo { width:auto;}
.contact2 p.line1 { height:auto;}
.contact2 p.line1 input { float:none;margin: 0 20px 12px 0;}
.contact2 div.tbox { height:200px;}
.contact2 div.tbox textarea { width: 90%; height: 180px;}
.contact2 p.line3 { position: relative; height:112px; margin: 0; padding: 0 0 50px 0;}
.contact2 p.line3 a.submit { position: absolute; left: 0; top:62px; float:none;}
.contact2 p.line3 a.clear { position: absolute; left: 135px; top: 62px; float:none;}
.footer2 { width:auto; background: none;}
.footer2 ul { display: none;}
.footer3 { width:auto;}
.footer3 div.company { float: none; width: 196px; height: auto; margin: 20px auto; text-align: center; background: none;}
.footer3 div.company span { position: relative; display: block; left:auto; bottom: auto; margin: 10px 0 0 0;}
.footer3 div.contact { display: block; float: none; margin: 20px 5% 0 5%; font-size: 17px; color: #888; text-align: center;}
.pagetop:active { cursor:pointer; position: absolute; right: 0; bottom: 0; display: block; width: 98px; height: 100px; text-indent: -5000px; background-position: -400px 0;}
.pagetop:hover { background-position: -400px 0;}
}

@media screen and (max-width: 800px) {
	
.indexbanner{  margin:0px auto 00px auto; overflow:hidden; padding:65px 0 0 0; background:#FFF;}
.indexbanner img{ width:175%; margin:0 0 0 -230px;}
.indexbanner p.tel{ display: block; width:80%;  margin:0 auto 0px auto; padding:0px 5% 50px 5%; position: inherit; line-height:30px; bottom: inherit; left:inherit; transform: none; border-bottom:3px solid #333; color: #1c4969;}
.indexbanner p.tel strong{ font-size:38px; color:#8a6847;}
.indexbanner p.tel::after{ display: none;}
.indexbanner p.tel span{ font-size:18px; line-height:25px; color:#555;}
.indexbanner p.tel a{ display:block; font-size:50px; font-family:Cambria Bold; vertical-align: inherit; margin:5px 0 0 0px; color:#1c4969; text-shadow: none;}

.indexproduct{ padding:30px 0;}
.indexproduct h2{ width:90%;  font-size:30px; line-height:50px; padding:20px 0 0 0; margin:0 auto 0px auto; text-indent:100px; text-align: right; position:relative;}
.indexproduct h2::after{ content:''; display:block; width:55px; height:3px; background: #2675b0; position: absolute; bottom:-10px; right:0;}
.indexproduct .clist{ display:block; width:100%; max-width:1010px; height: 1030px ;margin:0 auto 0px auto; padding:80px 0 0 0; position:relative;}
.indexproduct .clist img.people{ width:auto; height:250px; bottom: inherit; top:-170px; left:0px;}
.indexproduct .clist .scrollable { position:relative; top:0px; overflow:hidden; width:90%; height:1030px; padding:0; margin:-40px auto 0 auto;}
.indexproduct .clist .scrollable .items { width:1000%; position:absolute; clear:both;}
.indexproduct .clist .scrollable .items div{ display:block; float: none; width:10%; height:482px; position:relative; overflow:hidden; margin:0 0 0px 0; padding:0px; color:#333;}
.indexproduct .clist .scrollable .items div ul{ display:block; width:100%;  height:482px; overflow:hidden; margin:0 auto;}
.indexproduct .clist .scrollable .items div ul li{ display:block; width:calc(50% - 1px);  height:230px; margin:0 0.5px 1px 0.5px; padding:10px 0 0px 0; float:left;  overflow:hidden; background: rgba(255,255,255,1); border-radius:10px; position:relative;}
.indexproduct .clist a.next{ display:none;  top: inherit; bottom:0; right:50%; margin:0 -70px 0 0;}
.indexproduct .clist a.prev{ display:none;  top: inherit; bottom:0; left:50%; margin:0 0 0 -60px;}

.indexproduct .clist a.disabled{ display: block; opacity:0.5;}

.indexproduct a.more{ display:block; width:252px; height:62px; background:url(../images/more.png); margin:0 auto; text-indent:-5000px;}

.indexservice{ display:block; width:100%; margin:0 auto 0 auto; padding:50px 0 30px 0; background:#FFF;}
.indexservice h4{ font-size:26px; margin:0 0 30px 0;}
.indexservice ul li{ width:90%; margin:0 auto 80px auto; float: none; position:relative; font-size:0; line-height:0;  overflow:hidden; flex-direction: column;}
.indexservice ul li:nth-child(2){ flex-direction: column;}
.indexservice ul li .left{ width:100%; margin:0 0 50px 0; padding:0;}
.indexservice ul li:nth-child(2) .left{ margin:0 0 50px 0; }
.indexservice ul li .sproduct .stitle em{ font-size:45px; line-height:45px;}
.indexservice ul li .text p{ height:124px; margin: 0 0 10px 0; overflow:hidden;}
.indexservice ul li .text,.indexservice ul li.right .text{ position:inherit; top:inherit; left:inherit; right:inherit; transform: none; padding:0 0 0 0;}
.indexservice ul li .text .sproduct,.indexservice ul li.right .text .sproduct{ display: block; width:130%; margin:0 0 0-30%;}
.indexservice ul li .text .sproduct em,.indexservice ul li.right .text .sproduct em{ font-size:28px; line-height:26px; text-shadow: none; top:-55px; left:-15%; color:#54abd3;}
.indexservice ul li .text .sproduct strong,.indexservice ul li.right .text .sproduct strong{ width:42%; height:90px; top:-40px; left:-25%;}
.indexservice ul li .text .sproduct img{ width:30%; margin:0 3.3% 0 0;}
.indexservice ul li .text .sproduct span{ width:100%;}
.indexservice ul li.right  .text .sproduct span{ float: none; position:relative; top: inherit;}

.indexservice ul li .sproduct{ display:block; width:100%;}
.indexservice ul li .sproduct .stitle{ margin:0 0 30px 0;}
.indexservice ul li .sproduct p{ display: flex; flex-wrap:wrap;}
.indexservice ul li .sproduct p a{ width:48%; margin:0 1% 20px 1%;}

.indexservice ul li.right img{ float:left;}

.indexnews{ padding:150px 0 30px 0; margin:0 0 30px 0; background:#FFF url("../images/index_bg.jpg") no-repeat center top; background-size:100% auto;}
.indexnews .main{ display:block; width:90%; max-width:1200px; margin:0 auto; overflow:hidden;}
.indexnews .main .left{ display:block; width:100%; float: none;}
.indexnews .main .left h6{ display:block; width:100%; height:50px; margin:0 0 30px 0; padding:0 0 0 15px; background:#355eb7; font-size:26px; line-height:50px; color:#FFF;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.indexnews .main .left ul{ display:block; width:100%;}
.indexnews .main .left ul li{ display:block; width:100%; margin:0 0 25px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;overflow:hidden;}
.indexnews .main .left ul li.top{ padding:0 0 15px 0; margin:0 0 20px 0; border-bottom:1px dotted #B4B4B4;}
.indexnews .main .left ul li.top p.img{ width:25%; float:left; background: #FFF; padding:5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.indexnews .main .left ul li.top p.img img{ width:100%; height:auto;}
.indexnews .main .left ul li.top p.text{ width:70%; float:right;}
.indexnews .main .left ul li p.text{ width:100%; float:right;}
.indexnews .main .left ul li p.text span.date{ display:block; font-size:13px; line-height:19px; color:#888888;}
.indexnews .main .left ul li p.text a{ display:block; font-size:18px; line-height:28px; color:#2675b0;}
.indexnews .main .left ul li p.text span.tt{ display:block; height:58px; font-size:16px; line-height:29px; color:#444444;  overflow:hidden;}

.indexnews .main .right{ display:block; width:100%; margin:0 8px 30px 0; float: none; background:#FFF; box-shadow:#f1f7fd 0 0 8px; overflow:hidden; border-radius:15px;}
.indexnews .main .right h6{ display:block; width:100%; height:50px; margin:0 0 30px 0; padding:0 0 0 15px; font-size:26px; line-height:50px; color:#1b789e;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; box-shadow:#a9c2d0 0 0 10px;}
.indexnews .main .right ul{ display:block; width:90%; margin:0 auto;}
.indexnews .main .right ul li{ display:block; width:100%; margin:0 0 25px 0; padding:0 0 15px 25px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;overflow:hidden; position: relative; border-bottom:1px dotted #B4B4B4;}
.indexnews .main .right ul li a{ display:block; width:100%; margin:0 0 5px 0; color:#333333; font-size:18px; line-height:28px;}
.indexnews .main .right ul li p{ display:block; height:38px; width:100%; color:#999999; font-size:16px; line-height:19px; overflow:hidden;}
.indexnews .main .right ul li .line{ display:block; width:5px; height: 80%; background:#dfdfdf; border-radius:5px; position: absolute; top:5px; left:0;}

.indexabout{ display:block; width:100%; margin:0 auto 0 auto; padding:20px 0 30px 0; background:#FFF;}
.indexabout .main{ display:block; width:100%; max-width:1020px; margin:0 auto 0 auto; overflow:hidden;}
.indexabout .main p.img{ display:block; width:90%; margin:0 auto; float: none; font-size:0; line-height:0;}
.indexabout .main .text{ display:block; width:90%; margin:0px auto 0 auto; float: none;}
.indexabout .main .text .title{ display: inline-block; margin:0 0 30px 0; padding:30px 0 0 0; font-size: 28px; font-weight: bold; line-height:32px; color:#111111; position: relative;}
.indexabout .main .text .title span{ display:block; width:100%; height:5px; border-radius:5px; background:#237ac2; position:absolute; top:10px;}
.indexabout .main .text p{ margin:0 0 35px 0; font-size:16px; line-height: 24px; color: #333333; clear: both;}
.indexabout .main .text p.blue{ margin:0 0 15px 0; padding:0 0 0 25px; font-size:16px; line-height: 24px; color: #666666;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background:url(../images/icon_1.png) no-repeat 0 5px;}
.indexabout .main .text p.blue strong{ display:block; font-size:18px; color:#71a7d0; margin:0 0 5px 0;}
	
.bannerm{ background-size:auto 180px; height:250px; background-position: 40% bottom;}

p.slogan { margin:50px 0 0 0; padding: 0 0 20px 0; font-size:24px; line-height: 30px;}
p.info { padding:20px 0 50px 0;}
h3.info { padding:20px 0 50px 0;}
p.info2 { padding:20px 0; }

.content::after{ top:10px; right:30%;}

.about ul.aboutlist { width:100%;}
.about ul.aboutlist li p.pimg { width:100%; height: auto; text-align: center;}
.about ul.aboutlist li p.pimg img  { width:100%; max-width: 400px;}
.about ul.aboutlist li div.ptxt { width:100%;}
.service ul.servicelist li { width:100%; max-width: 440px; text-align: center;}
.service ul.servicelist li img { width: 100%; max-width: 288px;}
.service ul.servicelist li div.ptxt { position: relative; right: auto; top: auto; width: 100%; height:auto; padding: 0; text-align: left; background: none;}
.service ul.servicelist li a { margin: 20px auto 0 auto;}
.service ul.servicelist li p.scontent { height: auto;} 
.product p.ptitle2 { margin:0 0 137px 0;}
.product a.list { right:auto; left: 5%;}
.product p.stitle { padding: 30px 0 10px 0;}
.product ul.productlist { width:100%;}
.product ul.productlist li { width:100%; max-width: 450px; margin:0 0 30px 0;}
.product ul.productlist li div.box { width:100%; max-width: 450px; height: auto; margin:0 0 30px 0; background: none;}
.product ul.productlist li p.pimg { width: 100%; height: auto; background: url(../images/product_bg2.png) no-repeat;}
.product ul.productlist li p.pimg img { width: 100%; max-width: 300px;}
.product ul.productlist li div.ptxt { height: auto;}
.product ul.productlist li div.ptxt a { height: auto;}
.product ul.productlist2 li { width: 90%; height: inherit; padding:20px; margin: 0 auto 30px auto; float: none; background:#FFF; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.product ul.productlist2 li img{ width:90%;}
.product ul.productlist2 li.last { margin: 0 auto 30px auto;}

.pservice{ flex-direction:column; margin:0 0 120px 0;}
.pservice p.img{ width:100%;}
.pservice .text{ width:100%; padding:0;}
.product ul.productlist::before{ top:-80px;}

.news p.ptitle2 { margin: 0 0 57px 0}
.news ul.newslist li { width: 100%; height: auto;}
.news ul.newslist li.odd { background: url(../images/news_bg.png) repeat-y;}
.news ul.newslist li span { position:relative; padding: 10px 0 0 30px; background: url(../images/icon_2.png) no-repeat 0 23px; }
.news ul.newslist li a { height: auto; padding: 0 15px 15px 30px; font-size: 18px; color: #2675b0; line-height: 28px;}
.news div.newsbox { width:100%;}
.news div.newsbox div.stitle { width: 100%;}
.news div.pagebar2 { height:40px; padding: 10px 0 0 0; font-size: 15px; background: url(../images/pagebar_bg.png) no-repeat 50% 50%;}
.case ul.caselist { padding:20px;}
.case ul.caselist li { float: none; width: auto; height: auto;}
.case ul.caselist li a { height: auto;}
.case div.casebox { width: 100%;}
.case div.casebox div.main { width: 100%;}
.case div.pagebar2 { height:40px; padding: 10px 0 0 0; font-size: 15px; background: url(../images/pagebar_bg.png) no-repeat 50% 50%;}
.contact2 div.contactinfo { display: none;}
.contact2 div.contactinfo2 { display: block; padding: 30px 0; font-size: 18px; color: #666; line-height: 36px; border-top: 1px dotted #999;}
.contact2 div.contactinfo2 span { color: #999;}
.contact2 div.contactinfo2 b { font-size: 24px; font-weight: normal;}
.contact2 div.contactinfo2 a { color:#666;}
.contact2 div.contactinfo2 strong a { font-size: 30px; font-weight: normal; color:#333;}
.contact2 p.line1 input { width: 90%; margin: 0 0 12px 0; padding: 10px 5%;}
.contact2 div.tbox textarea { margin: 0; padding: 10px 5%;}
.contact2 p.line3 input { width: 45%; padding: 10px 5%;}
.footer { height: auto;}
.footer3 { margin: 0px auto 0 auto;}
.footer3 div.contact { display: none;}
.footer3 div.contact3 { display: block; margin: 20px 5% 0 5%; padding:30px 0 0 0; font-size: 17px; color: #888; text-align: center;}
.footer3 div.contact3 a { font-size:36px; color: #a6835a; line-height: 50px;}
.footer3 div.contact3 a.small { font-size:22px; color: #666;}
.footer3 div.company { width:263px; margin: 40px auto 20px auto;}
.contact_online img{ display:block; margin:0 auto;}

div.footerbg .main,div.footerbg .company{ width:90%; padding:0;}
div.footerbg .main h2,div.footerbg .company h2{ position:inherit; margin:0 0 15px 0;}
div.footerbg .company ul.cright li{ width:calc(50% - 1px);}
div.footerbg ul.te11{ width:100%; float: none;}
div.footerbg ul.te12{ width:100%; float: none;}
div.footerbg ul.te09{ width:100%; float: none;}
div.footerbg ul.te10{ width:100%; float: none;}

a.fixtel{ width:50%; height:50px; padding:0; top: inherit; right:inherit; left:0; bottom:0; background-position: 10px center; line-height:50px; border-radius:0; text-indent:10px;}
a.fixtel br{ display: none;}
a.fixline{ width:50%; height:50px; padding:0; top: inherit; bottom:0; background-position: 10px center; line-height:50px; border-radius:0;text-indent:10px;}
a.fixline br{ display: none;}
.bannerimg{ padding:0 0 100% 0;}
#nav{ position:inherit; width:70%; margin:50px auto 0 auto;}
}