@charset "utf-8";
/* reset css */
*{margin:0; padding:0;}

body{font-family:"微軟正黑體", Arial;}
ul{list-style:none;}
img{border:0;}
a{text-decoration:none;}
a:hover{text-decoration:none;}

/* language */
#language{width:1200px; margin:0 auto; background:#fff;}
#language .wrapper{width:1000px; height:30px; margin:0 auto;}
#language ul{float:right;}
#language li{float:left; padding:5px 5px 0 25px; background:url(../images/icon_01.png) 15px 11px no-repeat;}
#language li a{display:block; width:100%; height:auto; font-size:13px; color:#323232; line-height:22px; text-align:right;}
#language li a:hover{color:#000;}
#language li a.choose{padding:0 5px 0 0; color:#fff; background:#000; border-radius:5px;}
#language li a.choose:hover{color:#fff;}

/* header */
#header{width:1200px; margin:0 auto; background:url(../images/header_bg.png) repeat-x; border-bottom:5px solid #d7d7d7;}
#header .wrapper{width:1000px; height:95px; margin:0 auto;}
#logo{float:left; width:136px; height:60px; margin:23px 0 0 5px; background:url(../images/logo.png) no-repeat; text-indent:-99999px; cursor:pointer;}

#menu-toggle{display:none;}
label{font-size:0;}
#navigation{float:right; width:80%; overflow:hidden; z-index:2;}
#navigation li{float:left; width:20%;}
#navigation li a{display:block; width:100%; height:auto; font-size:16px; color:#323232; line-height:95px; font-weight:bold; text-align:center;}
#navigation li a:hover{color:#e60027;}

/* slider */
#slider li .wrapper{width:1200px; height:350px; margin:0 auto; overflow:hidden;}
#slider li.one{background:url(../images/banner_01.png) center top no-repeat;}

/* works */
#works .title, #works .title2{width:230px; height:50px; margin:0 auto; padding:40px 0 5px 0; text-align:center;}
#works .title2{width:90%; height:40px; padding:45px 0 0 0;}
#works .title h1{font-size:32px; color:#414141; line-height:45px; font-weight:normal;}
#works .title h2{font-size:15px; color:#b8b29c; font-weight:normal;}
#works .title2 select{display:block; height:40px; margin:0 auto; padding:0 0 0 5px; font-size:18px; color:#000; font-family:"微軟正黑體", Arial; font-weight:bold; border-radius:5px; border:1px solid #bebebe; box-sizing:border-box;}

#works .work-list{width:1000px; margin:35px auto 20px auto; overflow:hidden;}
#works .work-list2{clear:both;}
#works .work-list dl{float:left; width:23%; margin:2% 1%;}
#works .work-list dt{position:relative; background:#000;}
#works .work-list dt a{display:block; overflow:hidden;}
#works .work-list dt img{display:block; width:100%; height:auto; transition:all .3s;}
#works .work-list dt a:hover img{transform:scale(1.1,1.1); opacity:.8; filter:alpha(opacity=80);}
#works .work-list dd{padding:5px;}
#works .work-list dd h1{font-size:16px; color:#000; line-height:32px; font-weight:normal;}
#works .work-list dd p{font-size:13px; color:#6e6e6e; line-height:23px;}

#works .back{clear:both; width:140px; height:38px; margin:0 auto 50px auto; text-align:center; background:#f2f2f2; border-radius:5px; border:1px solid #bebebe;}
#works .back a{display:block; width:100%; height:100%; color:#000; line-height:38px; font-weight:bold;}

/* inside works */
.inside-work-list{width:1000px; margin:35px auto 20px auto; overflow:hidden;}
.inside-work-list2{clear:both;}
.inside-work-list p{width:90%; margin:0 auto 20px auto; font-size:15px; line-height:25px; text-align:center;}
.inside-work-list dl{float:left; width:23%; margin:2% 1%;}
.inside-work-list dt{position:relative; width:185px; height:145px; margin:0 auto; background:#000; border-radius:20px; border:5px solid #d4d4d4; overflow:hidden;}
.inside-work-list dt a{display:block; width:100%; height:100%; overflow:hidden;}
.inside-work-list dt img{display:block; position:relative; width:100%; height:100%;}
.inside-work-list dd{padding:5px;}
.inside-work-list dd h1{font-size:16px; color:#000; line-height:32px; text-align:center; font-weight:normal;}
.inside-work-list dd p{margin:0 auto; font-size:13px; color:#6e6e6e; line-height:23px;}

.inside-work-sub{width:1000px; margin:35px auto 20px auto; overflow:hidden;}
.inside-work-sub p{width:90%; margin:0 auto 20px auto; font-size:15px; line-height:25px; text-align:center;}
.inside-work-sub dl{float:left; width:23%; margin:2% 1%;}
.inside-work-sub dt{position:relative; width:185px; height:185px; margin:0 auto; background:#000; border-radius:100px; border:5px solid #d4d4d4; overflow:hidden;}
.inside-work-sub dt a{display:block; width:100%; height:100%; overflow:hidden;}
.inside-work-sub dt img{display:block; position:relative; width:100%; height:100%;}
.inside-work-sub dt a:hover img{opacity:.8; filter:alpha(opacity=80);}
.inside-work-sub dd{padding:5px;}
.inside-work-sub dd h1{font-size:16px; color:#000; line-height:32px; text-align:center; font-weight:normal;}

.inside-work-detail{width:980px; margin:50px auto 25px auto; overflow:hidden;}
.inside-work-detail .left{float:left; width:50%; padding-right:20px; text-align:center; box-sizing:border-box;}
.inside-work-detail .wrapper img{width:99%; height:99%; border:1px solid #d4d4d4;}
.inside-work-detail .right{float:left; width:50%;}
.inside-work-detail dt h1{font-size:32px; color:#414141; line-height:52px; font-weight:normal;}
.inside-work-detail dt .code{padding-bottom:8px; font-size:20px; color:#555; line-height:42px;}
.inside-work-detail dt .code .c1{font-weight:bold;}
.inside-work-detail dt .note{padding-bottom:8px; font-size:13px; color:#555; line-height:22px;}
.inside-work-detail dd p{clear:both; padding-top:5px; border-top:1px solid #eee; overflow:hidden;}
.inside-work-detail dd .share a{float:left; margin:13px 10px 13px 0;}
.inside-work-detail dd .images a{float:left; width:70px; height:70px; margin:13px 15px 18px 0;}
.inside-work-detail dd .images img{display:block; width:100%; height:auto; transition:all .3s;}
.inside-work-detail dd .images a:hover img{opacity:.8; filter:alpha(opacity=80);}

.inside-work-subdetail{position:relative; width:980px; margin:70px auto 10px auto; border-top:2px solid #eee;}
.inside-work-subdetail .subitem{position:absolute; top:-37px;}
.inside-work-subdetail .subitem li{float:left; margin:4px 5px 0 0; background:#eee; border-radius:10px 10px 0 0; opacity:.5; filter:alpha(opacity=50);}
.inside-work-subdetail .subitem li a{position:relative; display:inline-block; padding:6px 15px; font-size:15px; color:#414141}
.inside-work-subdetail .subitem li.choose{margin:0 5px 0 0; background:#fff; border:2px solid #eee; border-width:2px 2px 0 2px; opacity:1; filter:alpha(opacity=100);}
.inside-work-subdetail .subitem li.choose a{padding:7px 15px; font-size:16px; font-weight:bold;}
.inside-work-subdetail .subcontent{clear:both;padding:3% 2%;}
.inside-work-subdetail .subcontent p{font-size:15px; line-height:30px;}
.inside-work-subdetail .subfile{clear:both; padding:0 2% 3% 2%;}
.inside-work-subdetail .subfile dt{padding:3% 0 0 0; color:#33b9ff; font-weight:bold;}
.inside-work-subdetail .subfile dd table{width:100%; margin-top:15px; border:1px solid #ddd; border-width:1px 1px 0 1px; border-spacing:0;}
.inside-work-subdetail .subfile dd th{width:13%; padding:8px 10px; text-align:left; font-size:15px; font-weight:normal; background:#eee;  border:1px solid #ddd;border-width:0 1px 1px 0; white-space:nowrap;}
.inside-work-subdetail .subfile dd td{padding:8px 10px; font-size:15px; border:1px solid #ddd; border-width:0 0 1px 0;}
.inside-work-subdetail .subfile dd td .file a{float:left; width:25px; height:25px; margin:0 10px 0 0;}
.inside-work-subdetail .subfile dd td .file a img{width:100%; height:100%;}

/* service */
#service{width:1200px; height:355px; margin:0 auto; background:url(../images/service_bg.png) center top no-repeat; overflow:hidden;}
#service h1{padding-top:45px; font-size:32px; color:#414141; line-height:45px; font-weight:normal; text-align:center;}
#service h2{font-size:15px; color:#b8b29c; font-weight:normal; text-align:center;}

#service ul{width:620px; margin:0 auto;}
#service li{float:left; width:50%; margin-top:28px; background:url(../images/btn_bg.png) center top no-repeat; overflow:hidden;}
#service li a{display:block; width:175px; height:175px; margin:0 auto;}
#service li b{display:block; width:83px; height:69px; margin:35px auto 0 auto;}
#service li h3{margin-top:5px;font-size:16px; color:#555; text-align:center;}
#service li a:hover h3{color:#000;}

/* contact */
#contact{width:1200px; margin:0 auto; padding:40px 0 45px 0; background:#f4f3ef;}
#contact h1{font-size:32px; color:#414141; line-height:45px; font-weight:normal; text-align:center;}
#contact .intro{margin:0 auto; font-size:15px; color:#555; font-weight:normal; text-align:center;}

#contact .wrapper{width:900px; margin:0 auto; overflow:hidden;}
#contact .left{float:left; width:35%; margin-top:25px; padding-right:20px; box-sizing:border-box;}
#contact .right{float:left; width:65%; margin-top:25px;}
#contact .wrapper input{display:block; width:100%; height:40px; margin:15px 0; padding:10px; border-radius:5px; border:1px solid #bebebe; box-sizing:border-box;}
#contact .wrapper textarea{display:block; width:100%; height:150px; margin:15px 0; padding:10px; border-radius:5px; border:1px solid #bebebe; box-sizing:border-box;}
/*#contact .submit{display:block; width:115px; height:43px; font-size:15px; color:#FFF; font-weight:bold; margin:10px auto; background:#b8b29c; border-radius:5px; border:1px solid #9a9077; cursor:pointer;}
#contact .submit:hover{background:#999; border:1px solid #666;}*/
.submit{display:block; width:115px; height:43px; font-size:15px; color:#FFF; font-weight:bold; margin:10px auto; background:#b8b29c; border-radius:5px; border:1px solid #9a9077; cursor:pointer;}
.submit:hover{background:#999; border:1px solid #666;}
/* footer */
#footer{width:1200px; margin:0 auto; padding:15px 0; font-size:15px; color:#FFF; line-height:30px; background:#000;}
#footer dl{width:980px; margin:0 auto; overflow:hidden;}
#footer dl a{color:#fff;}
#footer dl a:hover{color:#ffff00;}

/* banner */
#banner{width:1200px; height:215px; margin:0 auto; overflow:hidden;}
#banner.about{padding-top:85px; background:url(../images/banner_about.png) center top no-repeat;}
#banner.works{padding-top:85px; background:url(../images/banner_works.png) center top no-repeat;}
#banner.resources{padding-top:85px; background:url(../images/banner_resources.png) center top no-repeat;}
#banner.member{padding-top:85px; background:url(../images/banner_member.png) center top no-repeat;}
#banner.solution{padding-top:85px; background:url(../images/banner_solution.png) center top no-repeat;}
#banner.case{padding-top:85px; background:url(../images/banner_case.png) center top no-repeat;}
#banner .title{width:300px; margin:0 auto; text-align:center;}
#banner .title h1{font-size:45px; color:#FFF; font-weight:normal; text-shadow:1px 1px 0 #000;}
#banner .title h2{font-size:22px; color:#FFF; font-weight:normal;}
#banner .title h2 b{font-size:30px; font-weight:normal;}
#banner .title h2 .c1{color:#ff0000;}
#banner .title h2 .c2{color:#ffc926;}
#banner .title h2 .c3{color:#3ecc00;}

/* filter、filter2 */
#filter, #filter2{position:relative; top:-26px; width:1200px; margin:0 auto; text-align:center; z-index:1;}
#filter dl, #filter2 dl{width:280px; margin:0 auto; background:#ebb1aa; border-radius:10px; border:5px solid #ebb1aa;}
#filter2 dl{width:200px;}
#filter dt, #filter2 dt{padding-bottom:13px; background:#cc5e52; border-radius:6px;}
#filter dt a, #filter2 dt a{position:relative; display:inline-block; margin:5px 10px; color:#fff; cursor:pointer;}
#filter dt a span, #filter2 dt a span{position:absolute; bottom:-10px; left:27px; display:block; width:11px; height:6px; background:url(../images/icon_02.png) no-repeat;}

/* content */
/*#content .title{width:230px; height:50px; margin:0 auto; padding:10px 0 5px 0; text-align:center;}*/
#content .title{width:auto; height:50px; margin:0 auto; padding:10px 0 5px 0; text-align:center;}
#content .title h1{font-size:32px; color:#414141; line-height:45px; font-weight:normal;}
#content .title h2{font-size:15px; color:#b8b29c; font-weight:normal;}

#content .content-list{width:1000px; margin:35px auto 20px auto; overflow:hidden;}
#content .content-list.solution{margin:35px auto 50px auto;}
#content .content-list table{width:100%; border-spacing:0;}
#content .content-list tr:hover{background:#eee;}
#content .content-list td{border:1px solid #ddd; border-width:0 0 1px 0;}
#content .content-list a{display:block; padding:13px 15px; color:#323232;}
#content .content-list a:hover{padding-left:53px; color:#000; background:url(../images/icon_03.png) 21px 14px no-repeat;}

#content .content-imglist{width:1000px; margin:35px auto 20px auto; overflow:hidden;}
#content .content-imglist dl{float:left; width:23%; margin:2% 1%;}
#content .content-imglist dt{position:relative; background:#000;}
#content .content-imglist dt a{display:block; overflow:hidden;}
#content .content-imglist dt img{display:block; width:100%; height:auto; transition:all .3s;}
#content .content-imglist dt a:hover img{transform:scale(1.1,1.1); opacity:.8; filter:alpha(opacity=80);}
#content .content-imglist dd{padding:5px;}
#content .content-imglist dd h1{text-align:center; font-size:16px; color:#000; line-height:32px; font-weight:normal;}
#content .content-imglist dd p{font-size: 13px;color: #6e6e6e;line-height: 23px;}

#content .content-list-detail{width:1000px; margin:35px auto 20px auto; overflow:hidden;}
#content .content-list-detail h1{margin:5px 0; text-align:center; font-size:32px; color:#414141; line-height:52px; font-weight:normal;}
#content .content-list-detail p{margin:25px 0 20px 0; font-size:15px; line-height:30px;}

#content .content-tablelist{width:1000px; margin:35px auto 20px auto; overflow:hidden;}
#content .content-tablelist p{width:998px; height:400px; margin:10px 0 30px 0; border:1px solid #ddd; overflow:hidden;}
#content .content-tablelist dt{color:#33b9ff; font-weight:bold;}
#content .content-tablelist dd table{width:100%; margin:15px 0 30px 0; border:1px solid #ddd; border-width:1px 0 0 1px; border-spacing:0;}
#content .content-tablelist dd th{padding:8px 10px; font-size:15px; font-weight:normal; background:#eee;  border:1px solid #ddd;border-width:0 1px 1px 0; white-space:nowrap;}
#content .content-tablelist dd td{padding:8px 10px; font-size:15px; border:1px solid #ddd; border-width:0 1px 1px 0;}
#content .content-tablelist dd a{color:#323232;}
#content .content-tablelist dd a:hover{color:#e60027}

#content .content-formlist{width:1000px; margin:35px auto 20px auto; overflow:hidden;}
#content .content-formlist textarea{display:block; width:98%; height:350px; margin:10px auto 30px auto; padding:10px; border-radius:5px; border:1px solid #bebebe; box-sizing:border-box;}

#content .back{clear:both; width:140px; height:38px; margin:0 auto 50px auto; text-align:center; background:#f2f2f2; border-radius:5px; border:1px solid #bebebe;}
#content .back a{display:block; width:100%; height:100%; color:#000; line-height:38px; font-weight:bold;}

/* RWD Start */
@media (max-width: 1200px) {
#language, #header, #slider li .wrapper, #service, #contact, #footer, #banner, #filter, #filter2{width:100%;}
#slider li.one, #service, #banner.about, #banner.works, #banner.resources, #banner.member, #banner.solution, #banner.case{background-size:cover;}
}

@media (max-width: 1000px) {
#language .wrapper, #header .wrapper, #works .work-list, .inside-work-list, .inside-work-sub, #content .content-list, #content .content-imglist, #content .content-list-detail, #content .content-tablelist{width:100%;}
#slider li .wrapper, #service{height:300px;}
.inside-work-detail, .inside-work-subdetail, #footer dl, #content .content-tablelist{width:98%;}
#service h1{padding-top:30px;}
#service li{margin-top:10px;}
#contact .intro, #contact .wrapper{width:90%;}
#banner{height:185px;}
#banner.about, #banner.works, #banner.resources, #banner.member, #banner.solution, #banner.case{padding-top:65px;}
#content .content-tablelist p{width:99%;}
}

@media (max-width: 768px) {
#header .wrapper{position:relative; height:85px;}
#logo{width:116px; height:51px; margin:20px 0 0 5px; background-size:cover;}
label{display:block; float:right; width:55px; height:85px; font-size:2.25em; line-height:85px; text-align:center; cursor:pointer;}	
label span{color:#000;}
label span + span{display:none; font-size:0.7em; font-weight:bold;}
#menu-toggle:checked + label span{display:none;}
#menu-toggle:checked + label span + span{display:block;}
#menu-toggle:checked + label + #navigation{display:block;}
#navigation{display:none; position:absolute; left:0; top:85px; width:100%;}
#navigation li{width:100%; background:#fff; border-bottom:1px solid #6e6e6e; transition:all .3s; opacity:.7; filter:alpha(opacity=70);}
#navigation li:hover{opacity:1; filter:alpha(opacity=100);}
#navigation li a{color:#000; line-height:40px;}
#works .title{padding:30px 0 0 0;}
#works .title2{padding:35px 0 0 0;}
#works .title h1, #service h1, #contact h1, #content .title h1{font-size:30px; line-height:40px;}
#works .back, #content .back{margin:0 auto 35px auto;}
.inside-work-list dt{width:145px; height:115px;}
.inside-work-sub dt{width:145px; height:145px;}
.inside-work-detail{margin:40px auto 15px auto;}
.inside-work-detail .right{float:none; width:100%; margin-top:15px;}
.inside-work-detail dt h1, #content .content-list-detail h1{font-size:30px;line-height:46px;}
.inside-work-detail dt .code{font-size:18px; line-height:36px;}
.inside-work-subdetail{margin:55px auto 20px auto;}
#service ul{width:100%;}
#contact{padding:30px 0 35px 0;}
#contact .left,.inside-work-detail .left{float:none; width:100%; padding-right:0;}
#contact .right{float:none; width:100%; margin-top:0;}
#footer dl{text-align:center;}
#banner{height:180px;}
#banner.about, #banner.works, #banner.resources, #banner.member, #banner.solution, #banner.case{padding-top:70px;}
#banner .title h1{font-size:42px;}
#banner .title h2{font-size:20px;}
#banner .title h2 b{font-size:28px;}
#content .title{padding:5px 0 0 0;}
#content .content-list.solution{margin:30px auto 45px auto;}
#content .content-list-detail{width:98%; margin:25px auto 15px auto;}
#content .content-list-detail p{margin:20px 0 15px 0;}
#content .content-tablelist{margin:35px auto 15px auto;}
}

@media (max-width: 480px) {
#slider li .wrapper{height:230px;}
#works .title h1, #service h1, #contact h1, #content .title h1{font-size:28px; line-height:35px;}
#works .work-list3{clear:both;}
#works .work-list dl, .inside-work-list dl, .inside-work-sub dl, #content .content-imglist dl{float:left; width:48%; margin:2% 1%;}
.inside-work-list3{clear:both;}
.inside-work-detail dt h1, #content .content-list-detail h1{font-size:28px;}
.inside-work-detail dt .code{font-size:16px;}
.inside-work-subdetail .subfile dt{padding:4% 0 0 0;}
#service{height:250px;}
#service h1{padding-top:25px; font-size:28px; line-height:35px;}
#service li{margin-top:5px; background-size:146px 146px;}
#service li a{width:146px; height:146px;}
#service li b{width:75px; height:62px; margin:28px auto 0 auto;}
#service li b img{width:100%; height:auto;}
#banner{height:150px;}
#banner.about, #banner.works, #banner.resources, #banner.member, #banner.solution, #banner.case{padding-top:50px;}
#banner .title h1{font-size:40px;}
#banner .title h2{font-size:18px;}
#banner .title h2 b{font-size:26px;}
#content .title{height:40px; padding:0;}
#content .content-list.solution{margin:25px auto 40px auto;}
#content .content-list-detail{margin:20px auto 10px auto;}
#content .content-list-detail p{margin:15px 0 10px 0;}
#content .content-tablelist{margin:35px auto 10px auto;}
}