@charset "utf-8";
/* reset css */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, p, th, td {margin:0 0; padding:0; -webkit-text-size-adjust:none;}
table {border-collapse:collapse; border-spacing:0;}
img {border:0;}
ol, ul {list-style:none;}
a{outline:none; hlbr:expression(this.onFocus=this.blur()); text-decoration:none;}
input , select , textarea{outline:none; border-radius:0; border:0;}

body{font-family:Helvetica , arial , "思源黑體" ,  "微軟正黑體"; font-weight:normal;}

/* header */
/*
#header{font-size:16px; font-weight:bold; color:#626262; padding:2% 1%; text-align:right;}
#header a{color:#626262; margin:0 10px;}
#header a:hover{color:#CCCCCC;}
*/
/* banner */
#banner{background:#FAFAF7; color:#626262; padding:20px 20; width:100%}
/* #banner #logopack {margin: auto; width: 50%; border: 3px solid green;padding: 10px;} */
/* #banner #logo { }
#banner .title{ } */
#banner table {margin: 0px auto; border-spacing:20px 5px;border-collapse:separate;}
#banner #engtitle {font-size:28px; padding-bottom:0px; text-align:left;}
#banner #engcontact {font-size:20px; text-align:left;}
#banner #logo {width: 150px; height:87px;}
/*#banner .title:before{content:""; width:100px; height:100px; display:inline; background:url(../images/richtop.png); background-size:contain; position:absolute; top:0; right:550px;}*/

/* linkbar */
#linkbar{background:#FAFAF7; font-size:16px; font-weight:bold; color:#626262; padding:2% 1%; text-align:right;}
#linkbar a{color:#626262; margin:0 10px;}
#linkbar a:hover{color:#CCCCCC;}

/* content */
#content{max-width:1500px; color:#626262; margin:0px auto; overflow:hidden;}
#content .photo{width:55%; float:left; padding:0 2%; overflow:hidden; box-sizing:border-box;}
#content .photo .box{width:48%; float:left; margin:0 2% 2% 0; position:relative;}
#content .photo .box img{width:100%; height:auto; display:block;}
#content .photo .box video{width:100%; height:auto; display:block; height:80%;}
#content .photo .box h3{background:rgba(0,0,0,.5); font-size:16px; font-weight:lighter; color:#FFFFFF; width:100%; padding:10px; position:absolute; top:0; left:0; box-sizing:border-box;}
#content .photo .box h4{background:rgba(0,0,0,.5); font-size:16px; font-weight:lighter; color:#FFFFFF; width:100%; padding:10px; position:absolute; bottom:0; left:0; box-sizing:border-box;}
#content .text{width:45%; float:right; padding:0 0; box-sizing:border-box; text-align:left;}
#content .text h3{font-size:36px; text-align:center;}
#content .text p{font-size:20px; line-height:33px; padding-top:30px;}

/* footer */
#footer{background:#FAFAF7; color:#999; padding:30px 0;}
#footer ul{font-size:16px; text-align:center;}
#footer li{display:inline-block; padding:10px;}
#footer li:before{content:""; width:30px; height:30px; display:inline-block; position:relative; top:10px; padding-right:7px;}
#footer .contact1:before{content:""; background:url(../images/icon1.png) no-repeat; background-size:contain;}
#footer .contact2:before{content:""; background:url(../images/icon2.png) no-repeat; background-size:contain;}
#footer .contact3:before{content:""; background:url(../images/icon3.png) no-repeat; background-size:contain;}
#footer .contact4:before{content:""; background:url(../images/icon4.png) no-repeat; background-size:contain;}

@media screen and (max-width: 1400px) {
/* banner */
#banner{text-align:center;}
#banner .title{position:static; padding:0;}
#banner .title:before{content:""; position:static; margin:0 auto 20px auto;}

/* content */
#content .photo{width:100%; padding:0 5%;}
#content .photo .box{width:31.3%; margin:1%;}
#content .text{width:100%; padding:0 7% 0% 7%; margin:0 auto;}
}

@media screen and (max-width: 1024px) {
/* banner */
/* #banner{padding:200px 0;} */

/* content */
#content .photo .box{width:47%; margin:1%;}

/* footer */
#footer ul{text-align:left; padding-left:5%;}
#footer li{display:block;}
}

@media screen and (max-width: 800px) {
/* banner */
/* #banner{padding:150px 0;} */
#banner .title{position:static; padding:0;}
#banner .title h1{font-size:45px; padding-bottom:10px;}
#banner .title h2{font-size:23px;}
#banner .title:before{content:""; width:60px; height:60px;}

#content .text h3{font-size:28px;}
}

@media screen and (max-width: 640px) {
/* banner */
/* #banner{padding:100px 0;} */
#banner .title{position:static; padding:0;}
#banner .title h1{font-size:40px;}
#banner .title h2{font-size:20px;}
#banner .title:before{content:""; width:60px; height:60px;}

/* content */
#content .photo .box{width:98%; margin:1%;}
#content .text p{font-size:17px; line-height:30px; padding-top:20px;}
}

@media screen and (max-width: 320px) {
#banner .title h1{font-size:32px;}
#banner .title h2{font-size:16px;}

}