@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; letter-spacing:1px;}
body#pages,body#pages2{ background: url(../images/pages_bg.jpg) repeat-x}
a {text-decoration: none;}

.header a.logo,
.footer3 div.company a,
.pagetop,
.service ul.servicelist li span,
.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,#wrapper { width:100%; position:relative;}
.header { display: block; width:230px; height: calc( 100% - 80px); background: #f05a81 url(../images/header_bg.jpg) no-repeat center top; position: absolute; top:20px; left:20px; z-index:999; border-radius:230px; overflow:hidden;}
.header .box {}
.header .box .menu { width:100%; margin: 0 auto; }
.header a.logo { display: block; width: 230px; height: 240px; margin:0 0 30px 0; text-indent: -5000px; background:url(../images/logo.png) no-repeat center center;}
.header .fixleft{ display:block; width:230px; position:inherit;}
.header ul { width:175px; margin:18px auto 0px auto; padding: 0 0 10px 0;}
.header li { margin:0 0 25px 0px; padding: 0 0 0 25px; background:url(../images/nav_bg.png) no-repeat 5px 5px; }
.header li:hover { margin:0 0 25px 0px; padding: 0 0 0 25px; background:url(../images/nav_bg2.png) no-repeat left 0px; }
.header li a { display: inline-block; height: 30px; font-size: 18px; color: #FFF; background: url(../images/nav_line.png) no-repeat left bottom; font-weight: bold;}
.header li .moreservice{ display:block; margin:10px 0 0 -30px; background: #ff7898; padding:15px 10px 5px 35px; border-radius:15px;}
.header li .moreservice a{ display:block; font-size:16px; height:25px; background: none; font-weight: normal; position:relative;}
.header li .moreservice a::after{ content:''; display:block; width:2px; height:2px; background:#FFF; position:absolute; top:7px; left:-12px;}
.footer2 .moreservice{ display: none;}

.header li:hover a{ color:#ffe4ab; font-weight: bold;}
.header li:hover .moreservice a{ color:#FFF; font-weight:normal;}

a.pagetop{ display:block; width:30px; height:30px; margin:0 0 0 44px; background:url(../images/pagetop.png) no-repeat; cursor: pointer;}

.header .information{ display:block; width:100%; position:absolute; bottom:70px;}
.header .information p.tel{ display:block; margin:0 0 15px 0; font-size:15px; line-height:21px; letter-spacing:2px; color:#fefefe; text-align:center;}
.header .information p.tel a{ display:block; font-size:30px; line-height:38px; color:#ffd986; font-family:Calibri; font-weight: bold;}
.header .information p.mail{ display:block; padding:40px 0 0 0; font-size:15px; line-height:21px; letter-spacing:1px; color:#fefefe; text-align:center; background:url(../images/header_mail.jpg) no-repeat center top;}
.header .information p.mail a{ display:block; font-size:13px; line-height:21px; color:#ffffff;}

.mtel{ display: none;}

.indexbanner{ display:block; width:100%; margin:0px auto 0 auto; position:relative; font-size:0; line-height:0; border-bottom:1px solid #FFF; background: #ffe1e6 url(../images/banner_bg.jpg) no-repeat; background-size:100% 100%;padding:0 0 0 280px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}
.indexbanner .main{ display:block; width:100%; max-width:1200px; margin:0 auto;}
.indexbanner .main .slogen{ display:block; width:441px; height:252px; position:absolute; bottom:25%; right:10%;}
.indexbanner .main .tel{ display:block; width:441px; height:42px; position:absolute; bottom:15%; right:10%; z-index:99; font-size:20px; color:#333; font-weight: bold; text-shadow:0 0 8px rgba(255,255,255,1)}
.indexbanner .main .tel a{ font-size:42px; color: #BC1932; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; font-style:italic; vertical-align:middle;}
.indexbanner img{ width:100%;}

div.rightbox{ display:block; width:calc(100% - 100px); margin:50px 0 20px 0; padding:50px; overflow:hidden; text-align:left; background:#f1f1f1; border-radius:30px;}
div.right{ display:block; width:230px; height:34px; margin:0px 0 0 -30px;}
div.right ul{ display:block; padding:7px 0 0 0;}
div.right ul li{ display:block; float:left; padding:0 0 0 5px;}
div.right01{ display:block; width:220px; height:217px; background:url(../images/right_01.html) no-repeat; margin:35px 0 0 0;}
div.right01 div.gallery{ display:block; width:208px; height:170px; padding:47px 0 0 21px; background:url(../images/border.html) 33px 40px no-repeat;}
.scrollable { position:relative; overflow:hidden; width: 154px; height:217px; float:left; margin:0 4px 0 4px;}
.scrollable .items { width:20000em; position:absolute; clear:both;}
.items div { float:left; width:154px;}
.scrollable img { width:154px; height:116px; margin:0 0 10px 0;}
.scrollable span { display:block; height:44px; font-size:13px; color:#666; line-height:22px; text-align:center; font-weight:bold; }
a.browse { background:url(../images/arrow2.html) no-repeat; display:block; width:20px; height:53px; float:left; cursor:pointer; font-size:1px;}
a.right { background-position: -35px 0; margin:38px 0 0 0;}
a.left { background-position: 0 0; margin:38px 0 0 0;}
a.right:hover  { background-position:-37px 0; }
a.left:hover  { background-position:2px 0; }
a.disabled { visibility:hidden !important; }							
div.right02{ display:block; width:48%; height: auto; float:left;}
div.right02 img{ width:100%; margin:0 0 10px;}
div.right02 h2{ display:block; font-size:25px; padding:0 0 5px 0; margin:0 0 25px 0; color:#111; border-bottom:1px solid #555;}
div.right02 h2 span{ display:inline-block; margin:0 0 0 10px; font-size:13px; font-weight: normal; letter-spacing:2px; color:#ffb12a; text-transform:uppercase;}

div.right02 p.te05{ display:block; padding:0px;}
div.right02 p.te05 a{ display:block; font-size:18px; color: #111; text-decoration:none; margin:0 0 8px 0;}
div.right02 p.te05 a:hover{color: #8cade3;text-decoration:none;}
div.right02 p.te06{ display:block; height:52px; color:#999999; font-size:16px; line-height:26px; padding:0; margin:0 0 20px 0; overflow:hidden;}
div.right02 ul{ display:block; padding:0; line-height:25px; font-family:"微軟正黑體"; font-size: 15px;}
div.right02 ul li{ display:block; margin:0 0 8px 0; height:21px; line-height:21px; overflow:hidden;}
div.right02 ul li a{ color: #333; text-decoration:none; letter-spacing:1px;}
div.right02 ul li a:hover{color: #bd5729;text-decoration:none;}

div.right03{ display:block; width:48%;  font-family:"微軟正黑體"; font-size:16px; color:#325185; float: right;}
div.right03 img{ width:100%; margin:0 0 10px;}
div.right03 h2{ display:block; font-size:25px; padding:0 0 5px 0; margin:0 0 25px 0; border-bottom:1px solid #555; color:#111;}
div.right03 h2 span{ display:inline-block; margin:0 0 0 10px; font-size:13px; font-weight: normal; letter-spacing:2px; color:#ffb12a; text-transform:uppercase;}

div.right03 p.te07{ display: block; padding:0;}
div.right03 p.te07 a{ display:block; font-size:18px; color: #111; text-decoration:none; margin:0 0 8px 0;}
div.right03 p.te07 a:hover{color: #8cade3;text-decoration:none;}
div.right03 p.te08{ display:block; height:52px; color:#999999; line-height:26px; padding:0; margin:0 0 20px 0; overflow:hidden;}
div.right03 ul{ display:block; width:100%; float:left; padding:0; line-height:25px;  font-family:"微軟正黑體"; font-size: 15px;}
div.right03 ul li{ display:block; width:100%; height:21px; line-height:21px; overflow:hidden; margin:0 0 8px 0;}
div.right03 ul li a{ color: #333; text-decoration:none; letter-spacing:1px;}
div.right03 ul li a:hover{color: #bd5729;text-decoration:none;}



.indexproduct{ display:block; width:100%; margin:0 auto 20px auto; padding:0 0 0px 280px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}
.indexproduct ul{ display:block; width:100%; max-width:1200px; margin:0 auto 0px auto; overflow:hidden; position:relative; top:-60px;}
.indexproduct ul li{ display:block; width:25%; margin:0; padding:0 0 0 0; float:left; background: url(../images/line2.html) no-repeat right bottom; text-align:center;}
.indexproduct ul li.last{ background: none;}
.indexproduct ul li p.img{ display:block; width:100%; margin:0 0 20px 0; text-align:center;}
.indexproduct ul li p.img img{ width:90%; max-width:124px; height:auto; margin:0 auto;}
.indexproduct ul li h3{ display:block; width:80%; max-width:200px; margin:0 auto 15px auto; font-size:25px; line-height:28px; color:#1a1a1a; text-align:center;}
.indexproduct ul li p.text{ display:block; width:80%; max-width:200px; margin:0 auto 30px auto; font-size:16px; line-height:28px; color:#5d5d5d; text-align:left;}
.indexproduct ul li a.more{ display:inline-block; font-size:12px; color:#8c8c8c;}

.indexproduct .line{ display:block; width:100%; max-width:1200px; margin:0 auto; height:5px; border-radius:5px; background: #dbb69b; position:relative;}
.indexproduct .line .icon{ display:block; width:40px; height:40px; position:absolute; top:-15px; left:calc( 50% - 20px); background:url(../images/service_icon5.png) no-repeat;}

.indexservice{ display:block; width:100%; padding:0 50px 0 280px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align:center;}

.indexservice01{ display:block; width:100%; max-width:1200px; min-height: 330px; margin: 0 auto 0px auto; padding:120px 0 0 0; background:url(../images/index_service_bg.png) no-repeat 10% 0;}
.indexservice01 .img{ display:block; width:33%; float:left;}
.indexservice01 .img img{ width:100%; max-width: 392px; height:auto;}
.indexservice01 .text{ display:block; width:67%; float:right; text-align:left;}
.indexservice01 .text p.title{ display:block; margin:0 0 5px 0; font-size:15px; line-height:19px; letter-spacing:2px; color:#1c1c1c;}
.indexservice01 .text h4{ display:block; width:100%; margin:0 0 20px 0; overflow:hidden; text-align:left;}
.indexservice01 .text h4 strong{ display:inline-block; font-size:30px; line-height:35px; color:#1a1a1a; position:relative; letter-spacing:1px;}
.indexservice01 .text h4 strong span { display:block; width:1200px; height:1px; background: #cccccc; position:absolute; left:110%; top:18px;}
.indexservice01 .text p.text{ display:block; width:100%; margin:0 0 30px 0; font-size:16px; line-height:29px; letter-spacing:1px; color:#555; text-align:left;}
.indexservice01 .text .btn{ display:block; width:100%; overflow:hidden;}
.indexservice01 .text .btn a{ display:block; width:135px; height:30px; font-size:16px; line-height:30px; color:#FFF; text-align:center; border-radius:30px;border:2px solid #e73c68; float:right; background: #e73c68;}
.indexservice01 .text .btn a.contact{ background:#FFF; border:2px solid #c38c63; color:#c38c63; margin: 0 0 0 10px;}

.indexservice02{ display:block; width:100%; max-width:1200px; min-height: 350px; margin: -50px auto 0px auto; padding:50px 0 0 0; background:url(../images/index_service_bg2.png) no-repeat 90% 0;}
.indexservice02 .img{ display:block; width:33%; float: right; font-size:0; line-height:0;}
.indexservice02 .img img{ width:100%; max-width: 370px; height:auto;}
.indexservice02 .text{ display:block; width:65%; padding:50px 0 0 0; float: left;}
.indexservice02 .text p.title{ display:block; margin:0 0 5px 0; font-size:15px; line-height:19px; letter-spacing:2px; color:#1c1c1c; text-align:right;}
.indexservice02 .text h4{ display:block; width:100%; margin:0 0 20px 0; overflow:hidden; text-align:right;}
.indexservice02 .text h4 strong{ display:inline-block; font-size:30px; line-height:35px; color:#1a1a1a; position:relative; letter-spacing:1px;}
.indexservice02 .text h4 strong span { display:block; width:1200px; height:1px; background: #cccccc; position:absolute; right:110%; top:18px;}
.indexservice02 .text p.text{ display:block; width:100%; margin:0 0 30px 0; padding:0; font-size:16px; line-height:29px; letter-spacing:1px; color:#555; text-align:left;}
.indexservice02 .text .btn{ display:block; width:100%; overflow:hidden;}
.indexservice02 .text .btn a{ display:block; width:135px; height:30px; font-size:16px; line-height:30px; color:#FFF; text-align:center; border-radius:30px;border:2px solid #e73c68; float: left; background: #e73c68;}
.indexservice02 .text .btn a.contact{ background:#FFF; border:2px solid #c38c63; color:#c38c63; margin: 0 0 0 10px;}

.indexservice03{ display:block; width:100%; max-width:1200px; margin: 0 auto 50px auto; padding:0px 0 0 0; background: #e73c68; border-radius:15px; overflow:hidden;}
.indexservice03 .img{ display:block; width:40%; float: left; font-size:0; line-height:0; text-align:left;}
.indexservice03 .img img{ width:100%; max-width: 463px; height:auto;}
.indexservice03 .text{ display:block; width:58%; padding:30px 0 0 0; float: right;}
.indexservice03 .text p.title{ display:block; margin:0 0 5px 0; font-size:15px; line-height:19px; letter-spacing:2px; color:#FFF; text-align:left;}
.indexservice03 .text h4{ display:block; width:90%; margin:0 0 20px 0; overflow:hidden; text-align:left;}
.indexservice03 .text h4 strong{ display:inline-block; font-size:30px; line-height:35px; color:#FFF; position:relative; letter-spacing:1px;}
.indexservice03 .text h4 strong span { display:block; width:1200px; height:1px; background: #f39eb4; position:absolute; left:110%; top:18px;}
.indexservice03 .text p.text{ display:block; width:90%; margin:0 0 30px 0; padding:0; font-size:16px; line-height:29px; letter-spacing:1px; color:#FFF; float: none; text-align:left;}
.indexservice03 .text .btn{ display:block; width:90%; overflow:hidden;}
.indexservice03 .text .btn a{ display:block; width:135px; height:30px; font-size:16px; line-height:30px; color:#FFF; text-align:center; border-radius:30px;border:2px solid #FFF; float: right; background: #e73c68;}
.indexservice03 .text .btn a.contact{ background:#FFF; border:2px solid #e73c68; color:#e73c68; margin: 0 0 0 10px;}

a.servicemore{ display:block; width:50%; max-width:282px; height: 50px; margin:0 auto 30px auto; border-radius:50px; background:#d9a47d; font-size:18px; line-height:50px; color:#FFF;}

.indexabout{ display:block; width:100%; max-width:1200px; margin: 0 auto 50px auto; padding:0px 0 80px 0; overflow:hidden; position:relative;}
.indexabout img{ width:100%; height:auto;}
.indexabout .textmain{ display:block; width:48%; padding:40px 0; background: rgba(255,255,255,0.9); border-radius:15px; box-shadow: 5px 5px 10px rgba(0,0,0,0.2); position:absolute; right:5%; bottom:10px; text-align:left;}
.indexabout .textmain p.en{ display:block; width:80%; margin:0 auto 5px auto; font-size:15px; line-height:15px; color:#ebdbd3; letter-spacing:10px;}
.indexabout .textmain h5{ display:block; width:80%; margin: 0 auto 30px auto;   font-size:35px; line-height:39px; color:#d4486d;}
.indexabout .textmain p.text{ display:block; width:80%; margin:0 auto 30px auto; font-size:16px; line-height:29px; color:#555; text-align:left;}
.indexabout .textmain a{ display:block; width:80%; height:30px; margin:0 auto; font-size:16px; line-height:30px; color:#FFF; text-align:center; border-radius:30px;border:2px solid #e73c68; background: #e73c68;}

.certificate{ display:block; width:90%; max-width:900px; margin:0 auto 80px auto; position:relative;}
.certificate p{ display:block; width:80px; height:80px; background:#ef264e; position:absolute; top:-30px; left:0px; border-radius:40px; font-size:16px; line-height:80px; text-align:center; font-weight: bold; color:#FFF; transform: rotate(-20deg); z-index:9}
.certificate ul{ display:block; width:100%; overflow:hidden;}
.certificate ul li{ display:block; width:20%; float:left;}
.certificate ul li img{ width:100%; height:auto;}

.about { background: url(../images/about.jpg) no-repeat 100% 0; padding:0 0 0 280px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.service { background: url(../images/service.jpg) no-repeat 100% 0; padding:0 0 0 280px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.service2 { background: url(../images/service2.jpg) no-repeat 100% 0; padding:0 0 0 280px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.product { background: url(../images/product.jpg) no-repeat 100% 0; padding:0 0 0 280px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.product2 { background: url(../images/product2.jpg) no-repeat 100% 0; padding:0 0 0 280px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.news { background: url(../images/news.jpg) no-repeat 100% 0; padding:0 0 0 280px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.news2 { background: url(../images/news2.jpg) no-repeat 100% 0; padding:0 0 0 280px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.service2 { background: url(../images/service2.jpg) no-repeat 100% 0; padding:0 0 0 280px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

.case { background: url(../images/product.jpg) no-repeat 100% 0; padding:0 0 0 280px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.case2 { background: url(../images/product2.jpg) no-repeat 100% 0; padding:0 0 0 280px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.contact2 { background: url(../images/contact.jpg) no-repeat 100% 0; padding:0 0 0 280px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

.content { position:relative; width: 1000px; margin: 0 auto; padding: 50px 0 0 0; position:relative;}
p.slogan { margin:35px 0 0 0; padding: 0 0 15px 0; font-size:32px; color: #91674c; line-height: 40px; letter-spacing: 1px;}
h2.slogan { margin:35px 0 0 0; padding: 0 0 15px 0; font-size:32px; font-weight:normal; color: #91674c; line-height: 40px; letter-spacing: 1px;}
p.info { padding:30px 0 30px 0; width:490px; font-size: 16px; line-height: 30px; background: url(../images/info_spilit.png) no-repeat;}
h3.info { padding:30px 0 50px 0; width:490px; 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; }

.ctel{ display:inline-block; height:50px; padding:10px 40px 10px 40px; background:#FFFF; position: absolute; top:0; right:5%; font-size:18px; line-height:50px; color:#333;; border-radius: 0 0 25px 25px; box-shadow:0 0 20px rgba(0,0,0,0.3)}
.ctel a{ font-size:30px; vertical-align: middle; color:#AC1F22; font-weight: bold;}

.about p.ptitle { width: 500px; height: 78px; text-indent: -5000px; background-position: 0 0;}
.about ul.aboutlist { width: 1000px; margin: 10px auto 100px auto;}
.about ul.aboutlist li { display:block; width: 1000px; margin: 0 0 70px 0; overflow: hidden; }
.about ul.aboutlist li .fleft { float: left;}
.about ul.aboutlist li .fright { float: right;}
.about ul.aboutlist li p.pimg { width: 450px; height: 270px; overflow: hidden;}
.about ul.aboutlist li p.pimg img{ width:100%; height:auto;}
.about ul.aboutlist li div.ptxt { width: 1000px; padding: 35px 0 0 0; border-top: 1px solid #ccc;}
.about ul.aboutlist li div.ptxt2 { width: 1000px; padding: 35px 0 0 0; border-top: 1px solid #ccc; clear: both;}
.about ul.aboutlist li div.ptxt.fleft { width: 490px; float: left;}
.about ul.aboutlist li div.ptxt.fright { width: 490px; float: right;}

.about ul.aboutlist li div.stitle h1 { margin:0 0 15px 0; padding: 0 0 0 27px; font-size:24px; font-weight: normal; color: #622f2f; line-height: 36px; background: url(../images/icon_1.png) no-repeat 0 50%;}
.about ul.aboutlist li div.stitle h2 { margin:0 0 15px 0; padding: 0 0 0 27px; font-size:24px; font-weight: normal; color: #622f2f; line-height: 36px; background: url(../images/icon_1.png) no-repeat 0 50%;}
.about ul.aboutlist li div.stitle h3 { margin:0 0 15px 0; padding: 0 0 0 27px; font-size:24px; font-weight: normal; color: #622f2f; 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: 500px; height: 78px; text-indent: -5000px; background-position: 0 -88px;}
.service ul.servicelist { width: 1000px; margin: 0 auto 100px auto; overflow: hidden; padding:10px;;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.service ul.servicelist li { position: relative; display: block; width: 100%; margin: 0 0 50px 0; overflow: hidden; background:#FFF; border-radius:15px; box-shadow: 0 0 10px rgba(0,0,0,0.2)}
.service ul.servicelist li.left { margin: 0 60px 70px 0;}
.service ul.servicelist li img{ width:35%; float:left;}
.service ul.servicelist li div.ptxt {  width:65%; padding:20px 50px 0 50px; float:left;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.service ul.servicelist li .stitle { margin:0 0 22px 0; padding:0 0 0 30px; font-size:24px; color: #6a1c1c; line-height: 52px; font-weight: bold; border-bottom: 1px solid #D8D8D8; background: url(../images/icon_1.png) no-repeat left center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.service ul.servicelist li p.scontent { font-size:16px; color: #666; line-height: 30px; overflow: hidden;}
.service ul.servicelist li span { display: block; width: 47px; height: 21px; margin:20px 0 0 0; background-position: -616px 0; float: left;}

.product p.ptitle { width: 235px; height: 78px; text-indent: -5000px; background-position: 0 -176px;}
.product p.ptitle2 { margin:0 0 122px 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: 315px; text-indent: -5000px; background-position: -673px 0;}
.product a.list:hover { background-position: -673px -55px;}
.product ul.productlist { width: 1000px; margin: 0 auto 100px auto; overflow: hidden;}
.product ul.productlist li { position: relative; display: block; float: left; width: 450px;}
.product ul.productlist li.right { margin: 90px 0 0 100px;}
.product ul.productlist li div.box { display: block; width: 450px; height: 300px; background: url(../images/product_bg.png) no-repeat;}
.product ul.productlist li p.pimg { height: 160px; text-align: center;}
.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 { width: 1000px; margin: 0 auto 100px auto; overflow: hidden;}
.product ul.productlist2 li { position: relative; display: block; float: left; width: 188px; height: 255px; margin: 0 26px 26px 0; padding: 20px 20px 0 20px; text-align: center; border-radius: 5px; border:1px solid #ddd; background:url(../images/product_bg3.png) no-repeat 0 50%;}
.product ul.productlist2 li.last { margin: 0;}
.product ul.productlist2 li h2 { margin:5px; font-size: 18px; font-weight: normal; color: #111; line-height: 24px; overflow: hidden;}

.news p.ptitle { width: 500px; height: 78px; text-indent: -5000px; background-position: 0 -263px;}
.news h1.ptitle { width: 500px; height: 78px; text-indent: -5000px; background-position: 0 -263px;}
.news p.ptitle2 { margin:0 0 55px 0;}
.service2 p.ptitle { width: 500px; height: 78px; text-indent: -5000px; background-position: 0 -88px;}

.news ul.newslist { width: 1000px; margin: 0 auto 50px auto; padding:20px 50px; overflow: hidden; border:1px solid #E4E4E4; background:#FFF;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-radius:30px;}
.news ul.newslist li { position: relative; display: block; width: 100%; height: 65px; overflow: hidden; border-bottom:1px dotted #838383;}
.news ul.newslist li.last{ border: none;}
.news ul.newslist li span { float:left; display: block; width: 15%; height: 45px; padding: 15px 0 15px 30px; font-size: 16px; color: #888; line-height: 35px; background:url(../images/icon_1.png) no-repeat 0 27px;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.news ul.newslist li a { float:left; display: block; width: 85%; height: 35px; padding: 15px 0; font-size: 18px; color: #856b53; 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: none; width: 1000px; margin: 0 40px 0 0; padding: 0px 0 20px 0; background: url(../images/news_spilit.png) no-repeat left bottom;}
.news div.newsbox div.stitle.servicet div{ padding:0; background: none;}
.news div.newsbox div.stitle.servicet img{ width:300px; border-radius:15px;}

.news div.newsbox div.stitle div { padding: 0; line-height: 30px;}
.news div.newsbox div.stitle div h1 { font-size: 30px; color: #b4742f; margin:0 0 15px 0; line-height:40px;}
.news div.newsbox div.stitle div span { font-size: 14px; color: #888;}
.news div.newsbox div.main { float: none; width: 1000px; margin: 0; padding: 50px 0 0 0; font-size: 16px; color: #333; line-height: 30px;}
.news div.newsbox div.main h2{ font-size:20px; margin:0 0 20px 0;}
.news div.newsbox div.main img{ float:left; margin:0 20px 20px 0;}
.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: 500px; height: 78px; text-indent: -5000px; background-position: 0 -351px;}
.case h1.ptitle { width: 500px; height: 78px; text-indent: -5000px; background-position: 0 -351px;}
.case p.ptitle2 { margin:0 0 122px 0;}
.case ul.caselist { width: 1000px; margin: 0 auto 30px auto; overflow: hidden;}
.case ul.caselist li { position: relative; float: left; display: block; width:46%; height: 158px; margin: 0 2% 30px 2%; padding:26px 29px 34px 44px; border:1px solid #DDD; border-radius: 5px; background:url(../images/icon_1.png) no-repeat 14px 30px #fff; overflow: hidden;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

.case ul.caselist li a { display:block; height: 24px; margin: 0 0 12px 0; font-size:18px; color: #66332a; line-height: 24px; overflow: hidden;}
.case ul.caselist li a:hover { color: #333;}
.case ul.caselist li p { height:90px; 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: 1000px;}
.case div.casebox div.stitle { position:relative; width: 1000px; margin: 0 auto 50px 0; padding: 0px 0 20px 0; font-size: 32px; color:#2675b0; line-height: 30px; text-align: center; border-bottom: 1px dotted #ccc;}
.case div.casebox div.stitle div h1 { font-weight: bolder; color:#771201; font-size:30px; line-height:38px;}
.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:1000px; 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;}

.contact2 p.ptitle { width: 241px; height: 78px; text-indent: -5000px; background-position: 0 -439px;}
.contact2 h1.ptitle { width: 100%; height: 78px; text-indent: -5000px; background-position: 0 -439px;}
.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: #771201; 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 { 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 { width: 960px; 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;}

.footer { position:relative; border-bottom: 10px solid #f05a81; background:#ebebeb;}
.footer2 { width:100%; margin: 0 auto; padding:0 0 0 280px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.footer2 ul { display:block; height:160px; text-align: center; overflow: hidden; border-bottom:1px solid #DDDDDD;}
.footer2 ul li { display: inline-block; padding: 0 20px; line-height:160px; }
.footer2 ul li a { display: inline-block; padding: 0 0 5px 0; font-size: 15px; color: #333; line-height: 56px;}
.footer2 ul li img{ vertical-align:middle;}
.footer3 { width:100%; height:80px; margin: 37px auto 0 auto; overflow: hidden; font-size:13px; line-height:30px; color:#555; text-align:center;}
.footer3 div.company { display:inline-block; position: relative; width: 247px; height: 55px; background: url(../images/footer_spilit.jpg) no-repeat 100% 0; vertical-align: middle;}
.footer3 div.company a { display: block; width:196px; height: 55px; text-indent: -5000px; background-position: -193px 0;}
.footer3 div.company span { position: absolute; left:0; bottom: 0; font-size: 14px; color: #666;}
.footer3 div.contact { display: inline-block; margin:0 0 0 50px; font-size: 18px; color: #888; vertical-align: middle;}
.footer3 div.contact a { font-size:40px; color:#444; line-height: 56px; vertical-align: middle;}
.footer3 div.contact a.small { font-size:18px; color: #666;}
.footer3 div.contact3 { display: none;}
.copyright{ display:block; width:100%; height:20px; background:#f05a81; font-size:15px; line-height:50px; color:#FFF; text-align:center;}


.indexbanner .main .slogen{ width:33%; bottom:13%;}
.indexbanner .main .slogen img{ width:100%; max-width:423px; height:auto;}
.indexbanner .main .tel{ display:block; width:423px; height:42px; position:absolute; bottom:10px; left:0; z-index:99; font-size:20px; color:#333; font-weight: bold; text-shadow:0 0 8px rgba(255,255,255,1)}

a.motel,a.moonline{ display: none;}
a.fixtel{ display:block; width:50px; height:110px; padding:50px 0 0 0; background:#000000 url(../images/photo2.html) no-repeat center 15px; background-size:30px auto; position:fixed; top:calc(50% - 160px); right:0; font-size:20px; line-height:24px; text-align:center; color:#FFF; border-top-left-radius:10px;}
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; top:50%; right:0; font-size:20px; line-height:24px; text-align:center; color:#FFF; border-bottom-left-radius:10px;}



a.motel{ display:block; width:50px; height:110px; padding:50px 0 0 0; background:#df2a48 url(../images/moblie/photo2.png) no-repeat center 15px; background-size:30px auto; position:fixed; top:calc(50% - 160px); right:0; font-size:16px; line-height:20px; text-align:center; color:#FFF; border-top-left-radius:10px;}
a.moonline{ display:block; width:50px; height:110px; padding:45px 0 5px 0; background:#ff8095 url(../images/moblie/online2.png) no-repeat center 15px; background-size:30px auto; position:fixed; top:50%; right:0; font-size:16px; line-height:17px; text-align:center; color:#FFF; border-bottom-left-radius:10px;}

.mline{ display: none; width:90%; margin:0 auto;}
.mline a.line{ display:inline-block; width:100%; height:40px; margin:0 0 10px 0; background:#3c9b1b; color:#FFF; text-align:center; border-radius:20px; line-height:40px; text-decoration:none;}
.mline a.wechat{ display:inline-block; width:100%; height:38px; margin:0; border:1px solid #3c9b1b; background:#FFF; color:#3c9b1b; text-align:center; border-radius:20px; line-height:38px; text-decoration:none;}

@media screen and (max-width: 1100px) {
.header{ width:210px;}
.header a.logo{ width:210px;}
.indexbanner{ padding:0 5% 0 250px;}
.indexbanner .main .slogen{ bottom:5%;}
.footer3 div.company { margin:0 0 0 50px;}
.footer3 div.contact { float: left; margin:0 0 0 50px;}
.indexabout .textmain{ width:100%; position:inherit; right:0; margin:-80px 0 0 0; box-shadow: none;}
.indexservice03{ padding:20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}
.indexservice03 .img img{ border-radius:15px;}
.header li,.header li:hover{ margin:0 0 15px 0;}

.indexbanner .main .slogen{ left:60%;}
.indexbanner .main .tel{ display:block; width:423px; height:42px; position:absolute; bottom:45px; left:0; z-index:99; font-size:20px; color:#333; font-weight: bold; text-shadow:0 0 8px rgba(255,255,255,1)}
.indexbanner .main .tel a{ font-size:35px;}

.indexproduct{ padding:0 5% 0 250px;}
}

@media screen and (max-width: 780px) {
.header .box .menu { width: auto; padding: 20px 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: 100%;}
.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: 780px) {
#toggle_m_nav,.mline { 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%;}
.closed_wrapper { top: 0px !important;}
#m_nav_container { position: fixed; display: none; top: 100px; left:2.5%; width: 95%; height: 200px; background: #FFF; border-radius:40px; box-shadow:0 0 10px rgba(0,0,0,0.2);}
#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: 50px; margin: 0 5%; border-bottom: 1px dotted #ccc; }
.m_nav_item a { display: block; width: 100%; height: 40px; padding: 5px 10px; font-size: 18px; color: #333; line-height: 40px; -webkit-transition-duration: 0.5s;}
.m_nav_item a:hover {}
#m_nav_list .last { border-bottom: 0;}
.container_open { position: fixed !important; display: block; height: 120px;}
#m_nav_menu { position: fixed; top: 35px; right: 8%; width: 45px; height: 45px; background: rgba(0, 0, 0, 0); z-index: 9999; }
.m_nav_ham { width: 35px; height: 4px; margin: 5px auto; background: #FFF; border-radius:4px;}
.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: #FFF;}
.button_closed {}
.header .box { height: 90px;}
.header a.logo { float: none;}
.header ul { display: none;}
.content { margin: 0px 0 0 0; padding: 160px 8% 0 8%; background: rgba(255,255,255,.9);}
.wrapper{ padding:0 !important;}
.indexbanner .main .tel{ display: none;}
h2.slogan{ font-size:22px; line-height:30px;}
p.info { padding:30px 0 80px 0; width:auto;}
h3.info { padding:30px 0 80px 0; width:auto;}

.mtel{ display:block; width:90%; margin:0 auto 20px auto; padding:30px 0 20px 0; background:#FFF; text-align:center; border-bottom: 1px solid #D0D0D0;}
.mtel a{ display:block; font-size:33px; line-height:42px; color:#701c1c; font-weight: bolder;}

.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 { width: 65%; padding: 25px 20px; background: #fff;}
.service ul.servicelist li .stitle { margin:0 0 22px 0; font-size:24px;  line-height: 52px; }
.service ul.servicelist li p.scontent { height:150px; font-size:16px; color: #666; line-height: 30px; overflow: hidden;}
.service ul.servicelist li span { display: block; width: 47px; height: 21px; margin: 40px auto 0 auto; background-position: -616px 0;}
.service ul.servicelist li span: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: 0px 0 10px 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;}f
.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; height: auto; padding:0;}
.footer2 ul { display: none;}
.footer3 { width: 90%;}
.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: 780px) {
.header { display: block; width: calc(100% - 20px); height: 80px; background: #f05a81; background-image:none; position: fixed; top:10px; left:10px; z-index:999; border-radius:230px; overflow:hidden;}
.header .information{ display: none;}
.header a.logo{ width:201px; height: 61px; background:url(../images/logo2.png) no-repeat; margin:10px 0 0 20px;}
.header .box .menu{ padding:0;}
.indexbanner .main .slogen{ width:68%; height:auto; margin:0 auto; position: absolute; bottom:4%; right:0%; left:inherit;}
a.pagetop{ display: none;}

.about p.ptitle,.service p.ptitle,.news p.ptitle2,.case h1.ptitle,.news h1.ptitle,.case p.ptitle2,.contact2 h1.ptitle{ width:100%;}

.indexbanner{  margin:0px auto 0px auto; overflow:hidden; padding:80px 0 0 0;}
.indexbanner img{ width:165%; margin:0 0 0 -10%;}
.indexbanner p.tel{  margin:0px 0 0 0;position: static; line-height:30px; bottom:80px;}
.indexbanner p.tel a{ display:block; font-size:38px; font-family:Cambria Bold; vertical-align: inherit; margin:0 0 0 0px;}

div.rightbox{ margin:0 auto 10px auto;}
div.right02,div.right03{ width:100%; float: none;}
div.right02{ margin:0 0 30px 0;}
div.right02 ul li,div.right03 ul li{ width:100%; float: none; font-size:15px;}

.indexproduct ul{ top:0;}
.indexproduct ul li{ width:50%; height:320px; margin:0 auto 50px auto;}
.indexproduct ul li p.img { display:block; width:60%; margin:0 auto 10px auto;}
.indexproduct ul li h3{ font-size:22px;}
.indexproduct ul li p.text{ height:115px;}

.indexproduct{ padding:30px 0;}
.indexproduct h2{  font-size:26px; margin:0 0 30px 0;}
.indexproduct .clist{ display:block; width:100%; max-width:1010px; height: 490px ;margin:0 auto 50px auto; position:relative;}
.indexproduct .clist .scrollable { position:relative; top:0px; overflow:hidden; width:100%; height:490px; padding:0; margin:0 auto;}
.indexproduct .clist .scrollable .items { width:1000%; position:absolute; clear:both;}
.indexproduct .clist .scrollable .items div{ display:block; float:left; width:10%; height:490px; position:relative; overflow:hidden; padding:0px; color:#333;}
.indexproduct .clist .scrollable .items div ul{ display:block; width:100%;  height:490px; overflow:hidden; margin:0 auto;}
.indexproduct .clist .scrollable .items div ul li{ display:block; width:46%;  height:220px; margin:0 2% 20px 2%; padding:10px 0 0px 0; float:left;  overflow:hidden; background: rgba(255,255,255,.6); 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;}
.indexservice01{ overflow:hidden; padding:50px 0 0 0; margin:0 0 30px 0;}
.indexservice01 .img{ width:80%; margin:0 auto 15px auto; float: none;}
.indexservice01 .text{ width:80%; margin:0 auto 15px auto; float: none;}
.indexservice02{ overflow:hidden; padding:50px 0 0 0; margin:0 0 30px 0;}
.indexservice02 .img{ width:80%; margin:0 auto 15px auto; float: none;}
.indexservice02 .text{ width:80%; margin:0 auto 15px auto; float: none;}
.indexservice02 .text p.title{ text-align:left;}
.indexservice02 .text h4{ text-align: left;}
.indexservice02 .text h4 span{ right:inherit; left:110%;}

.indexservice03{ width:95%; overflow:hidden; padding:30px 0 30px 0; margin:0 auto 30px auto;}
.indexservice03 .img{ width:90%; margin:0 auto 15px auto; float: none; border-radius:15px; overflow:hidden;}
.indexservice03 .text{ width:90%; margin:0 auto 15px auto; float: none;}
.indexservice03 .text p.title{ width:90%; margin:0 auto 10px auto;}
.indexservice03 .text h4{ margin:0 auto 30px auto;}
.indexservice03 .text p.text{ margin:0 auto 30px auto;}
.indexservice03 .text .btn{ margin:0 auto;}

.indexservice{ display:block; width:100%; margin:0 auto 0 auto; padding:0px 0 30px 0; background:#FFF;}
.indexservice h4{ font-size:26px; margin:0 0 30px 0;}
.indexservice ul li{ display:block; width:46%; margin:0 2% 20px 2%; float:left; position:relative; font-size:0; line-height:0; border-radius:8px; overflow:hidden;}
.indexservice ul li .text{ height:130px; position: relative; bottom:0; overflow:hidden; z-index:9;}
.indexservice ul li .text h5{ color:#762c2c; border-bottom:1px solid #ab7171;}
.indexservice ul li .text p{ color: #333;}

.indexabout .textmain{ width:100%; position:inherit; right:inherit; box-shadow: none; margin:-50px 0 0 0;}
.indexabout img{ width:120%;}

.indexnews{ padding:30px 0;}
.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; 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;}
.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 0 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; -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; bottom:0;}
.indexabout .main .text{ display:block; width:80%; margin:0 auto; float: none;}
.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; position:absolute; top:0;}
.indexabout .main .text p{ margin:0 0 35px 0; font-size:16px; line-height: 24px; 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; margin:0 0 5px 0;}
	
.about { background: url(../images/about.jpg) no-repeat right 50px; background-size:150%;}
.service { background: url(../images/service.jpg) no-repeat right 50px; background-size:150%;}
.product { background: url(../images/product.jpg) no-repeat right 50px; background-size:150%;}
.product2 { background: url(../images/product2.jpg) no-repeat right 50px; background-size:150%;}
.news { background: url(../images/news.jpg) no-repeat right 50px; background-size:150%;}
.news2 { background: url(../images/news2.jpg) no-repeat right 50px; background-size:150%;}
.case { background: url(../images/case.jpg) no-repeat right 50px; background-size:150%;}
.case2 { background: url(../images/case2.jpg) no-repeat right 50px; background-size:150%;}
.contact2 { background: url(../images/contact.jpg) no-repeat right 50px; background-size:150%;}

p.slogan { margin:30px 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; }

.ctel{ display:block; width:100%; height:50px; margin:0 0 30px 0; padding:10px 0 10px 0; background: none; position: inherit; top:inherit; right:inherit; font-size:18px; line-height:50px; color:#333;; border-radius: 0 ; box-shadow: none}
.ctel a{ font-size:30px; vertical-align: middle; color:#AC1F22; font-weight: bold;}

.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%;}
.about ul.aboutlist li div.ptxt.fright,.about ul.aboutlist li div.ptxt.fleft{ 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 span { margin: 20px auto 20px auto; float: none;}
.service ul.servicelist li p.scontent { height: auto;} 
.service ul.servicelist li img{ width:100%; max-width:100%; float: none;}
.service ul.servicelist li div.ptxt{ width:90%; margin:0 auto; float: none;}

.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;}
.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: 46%; height: 270px; padding:5px 0px; margin: 0 2% 15px 2%; -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 1% 15px 1%;}
.news p.ptitle2 { margin: 0 0 57px 0}
.news ul.newslist{ padding:20px;}
.news ul.newslist li { width: 100%; height: auto;}
.news ul.newslist li span { position:relative; padding: 10px 0 0 30px; background: url(../images/icon_1.png) no-repeat 0 23px; }
.news ul.newslist li a { height: auto; padding: 0 15px 15px 30px; font-size: 18px; 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 { width: 100%;}
.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; padding:30px 0 30px 0;}
.footer3 div.contact { display: none;}
.footer3 div.contact3 { display: block; margin: 0 5% 0 5%; padding:20px 0 0 0; font-size: 17px; color: #888; text-align: center;}
.footer3 div.contact3 a { font-size:36px; color: #444; line-height: 50px;}
.footer3 div.contact3 a.small { font-size:22px; color: #666;}
.footer3 div.company { margin: 30px auto 20px auto;}
a.motel{ display:block; width:50%; height:40px; background:#df2a48 url(../images/moblie/photo2.png) no-repeat 10% center; background-size: auto 50%; position:fixed; top:inherit; bottom:0; left:0px; padding:0; font-size:16px; line-height:40px; color:#FFF; font-weight: bolder; text-align:center; z-index:999; font-family:"微軟正黑體"; text-decoration:none; border-radius:0;}
a.motel br{ display: none;}
a.moonline{ display:block; width:50%; height:40px; background:#ff8095 url(../images/moblie/online2.png) no-repeat 10% center; background-size: auto 50%; position:fixed; top:inherit; bottom:0; left:50%; font-size:16px; line-height:40px; color:#FFF; font-weight: bolder; text-align:center; z-index:999; font-family:"微軟正黑體";text-decoration:none; padding:0; border-radius:0;}
a.moonline br{ display: none;}
.news div.newsbox div.main img{ width:100%; float: none;}
}