html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	font: inherit;
}
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	font-family: "Arial","微軟正黑體",'Open Sans','sans-serif';
	color:#666;
	background-image:url(image/bg1.jpg);
}
.buildbox iframe {width:100%}
a { text-decoration: none; color:#8E8E8E;}
a img {border: 0px; opacity: 0.8;}
a:hover img {border: 0px; opacity: 0.9;}
.LL {float:left;}
.RR {float:right;}
.body-box {	width:95%; margin:auto; position: relative;}
.head { padding: 10px 0px 0px; position: relative; /*height:160px;*/ width: 95%; position: fixed; z-index: 5; top: 0;}
.logo img { width:100%;}
.head-m { display:block; }
.head-r {float:right; margin-top: 20px; position: absolute; right: 0;}
.head-r ul {list-style: none;}
.head-r li {display: inline; float: left; text-align: center; padding-left: 45px; }
.head-r li a { color: #000000; font-size: 15px; letter-spacing: 0.3em;}
.head-r li a:hover { color:#6D6D6D; background-position: 0px -170px;transform: scale(1,1); transition: 0.4s;}
.home-iocn { width: 14%; margin:auto; text-align: center; text-transform: uppercase; height: 70px; border-bottom: 4px solid #666;}
.home-iocn-text{ font-size: 2em; font-weight: bold;}
.home-iocn img { width:40%;}
.life-iocn { width: 120px; margin: auto;}
.life-iocn img { width: 22px; box-shadow: 0px 1px 2px #999;}
/*.life-iocn :hover {width: 100%; transition: 0.4s;}*/
.next{ position: fixed ; display: flex; z-index: 4; width:139%; margin: auto; top: 90px; text-align: center;float: right;}

.bor2 { border-top: 1px solid #7B7B7B; width: 50%; padding: 7px 0px; border-bottom: 1px solid darkGray; margin: auto;}

.editor { margin:150px auto 0px auto; width: 90%; display: table;}
.editor h1 { font-size: 18px; letter-spacing: 0.08em; margin-bottom: 5px; color: #999;}
.editor p { font-size: 12px; line-height: 1.8em; letter-spacing: 0.05em; color:#000;}
.editor hr { width: 90%; margin: 0; border-top: 2px solid #000; border-bottom: 0px;}
.editor i { color: #7D7D7D;font-size: 14px;}
#hr1 hr {border-top: 1px solid #000;}
#hr2 hr {border-top: 1px solid #000;}

.build { margin:150px auto 0px auto; width: 100%; display: table;}
.buildbox { width:500px; margin:auto ; padding-right: 400px;}
.build img { width:100% !important;}
.build a { color: #000; text-decoration: none; border-bottom: 1px solid #000; padding-bottom: 2px;}
.build a:hover { color: #ccc; text-decoration: none; border-bottom: 1px solid #ccc; padding-bottom: 2px;}
.build hr { border-bottom: 2px solid #000; margin-bottom: 40px; margin-top: 40px; border-top: 0px;}
.build h1 { padding-bottom:50px; }
.build p { color: #000; font-size: 14px; line-height: 27px;letter-spacing: 0.05em;}
.build h4 { font-size: 11px; letter-spacing: 0.08em; margin-bottom: 15px; line-height: 1.5em; color: #999; text-align: right;}


.bu-menu { width:50%; float:right; margin-top: 50px; position: fixed;}
.bu-menu ul {list-style: none; margin: 0px; padding: 0px;}
.bu-menu li { margin-bottom:20px; font-size: 18px;}

.foot { width: 100%; height: 10px; padding:10px 0 10px 0; font-size: 14px; background-color: #FFFFFF; display: table; box-shadow: 0 -2px 1px #F9F9F9;margin-top: 80px;}
.footbox{ width:98%; margin: auto;}
.foot ul { list-style: none; padding: 0; margin-top: 8px;}
.foot li { display: inline; float: left; padding:0px 6px;}
.foot li img { width:40px;}
.foot-text {font-weight: 800; color: #666; font-style: italic;}
.footL { float:left;}
.footR { float:right;font-size: 12px;}

.in-table { margin:150px auto 80px auto; position: relative; display: block;}
.work-menu ul { margin: auto; text-align: center; list-style: none; padding: 0;}
.work-menu li {/*display: inline;*/ padding:0px 13px 0px 10px; float: left;}
.work-menu li a { color: #666; padding-left: 20px;}
.work-menu li a:hover {background-image:url(image/icon-02.png); background-repeat:no-repeat;color: #333333;}
.work-menu { display: table; margin: auto; width: 1050px; text-align: center; z-index: 4; position: inherit;}
.work-box {width: 1050px; background-color: #F6F6F6; /*height: 336px;*/ margin:50px auto; overflow: hidden;}
.work-BL { float:left; width:682px;}
.work-BL img { width: 100%;}
.work-BR {float:right; width:30%; height:300px; position: relative; padding:0 20px; line-height: 18px; font-size: 12px; color: #000000; letter-spacing: 2px;}
.work-date { position: absolute; bottom: 0%; right: 5%; font-style: oblique; font-size: 14px;}

h1 {font-size: 16px; color: #000000;line-height:32px; ; margin: 30px 0 0px;}
h2 {color: #686868; font-size: 18px ; letter-spacing: 2px; margin: 10px 0;}
h3 {line-height: 18px; font-size: 12px; color: #000000; letter-spacing: 2px;}
h4 {font-size: 24px; color: #000000;line-height:32px; font-size: 24px/38px; margin: 30px 0 10px;}
h4 a { color: #333333; font-size: 18px;}
.work-BR h2 {font-size: 13px ;color: #686868;}
.work-page {margin: auto; text-align: center; width: 300px; padding-bottom: 20px; font-size: 12px;}
.work-page ul {list-style: none;}
.work-page li {display: inline; float: left; height: 31px; margin: 0 10px; color: #000; font-size: 15px;}
.work-button { display:block; border-radius: 7px;padding-top: 7px;}
.work-button img { opacity: 0.3; width: 60%; }
.work-page-text{ font-size: 17px; padding-top: 6px;}
.page-text {width: 18px; height: 22px; padding-left: 9px; font-size: 18px; padding-top: 3px; border-radius: 5px; margin-top: 1px;}
.life-box { max-width:650px; margin:auto; }
.life-box img { width:100%; margin:15px 0;}
#pnav-prevL { float: left; width: 17px; height: 17px; display: block;border-radius: 4px; margin-top: 3px;
    background: url(image/icon-btn-r.png) no-repeat center center;  background-size: 45%; transform: scaleX(-1);}
#pnav-prevL:hover {background-color: #FFFFFF;}
#pnav-prevR { float: right; width: 17px; height: 17px; display: block;border-radius: 4px; margin-top: 3px;
    background: url(image/icon-btn-r.png) no-repeat center center;  background-size: 45%;}
#pnav-prevR:hover {background-color: #FFFFFF;}
.in-jou { position: relative; /*background-color: #FDFDFD;*/ width: 100%; display: table; margin:150px auto 0;	box-sizing: border-box; }
.in-jou img {width:90%;}
/*.FF{font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif, Baskerville, Times, "Times New Roman", serif;}*/
.jou-L {float:left;  width:42%; padding: 50px 30px;}
.jou-R {float:right; width:43%; padding: 50px 30px;}
.jon-iocn {width: 400px; margin:auto; text-align: center; }
.jon-iocn img { width:50%;}
.lang { float: right; font-size: 12px; margin: 0px 3px 0px 35px; display:inline-flex;}
.fb { float: right;}
.HHR { position: absolute; top: 0px; right: 0%; width: 91%; border-bottom: solid 2px #000; background-color: #FFFFFF; height: 77px; z-index: -1;}
.border-G { width:800px; margin: auto;}
.border-G img {border: 5px solid #FFF; box-shadow: 0px 0px 3px #B3B3B3; border-radius: 3px; max-width:90%;}
.villes a{line-height: 1.5em; transition:all .5s; border-bottom: transparent 2px solid;}
.villes a:after{    transform: scale(0, 1);
    width: 100%;
    height: 2px;
    -webkit-transform-origin: center center 0px;
    -moz-transform-origin: center center 0px;
    -ms-transform-origin: center center 0px;
    transform-origin: center center 0px;
    -webkit-transition: all 0.15s ease-out 0s;
    -o-transition: all 0.15s ease-out 0s;
    transition: all 0.15s ease-out 0s;
    border-radius: 1px;
    content: "";
    display: block;
    background: #98C834;
    }
:before, :after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.villes a:hover:after{ 
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
}
.Mmaun {
	position: fixed;
    right: 5px;
    top: 43px;
}
.Mmaun img {
	width:60%;
}
#mobile{
	display:none;
}
#mobile a{
	color:#4D4D4D;
	font-size:16px;
	font-family:Arial,微軟正黑體,新細明體,sans-serif;
	letter-spacing:2px;
	line-height: 31px;
}
#mobile :hover {
	color:#4D4D4D;
	font-size:16px;
}
.mobileTop{
	margin-top:69px;
}
.mobileTop li { list-style: none;}
.item {
	width: 100%;
    padding: 12px 0 7px 0;
    background-color: #D9D9D9;
    cursor: pointer;
    text-align: center;
    border-bottom: 1px #FFFFFF dotted;
    transition: all .2s ease;
    }

.noneS {display:none;}
.abimg{ position: absolute; right: 0px; opacity: 0.7; top: 0; width:40%;}
.abtitle { margin-top: 30px; width: 58%}
.abper {width:30%; display: table;}
.logo { position: fixed; width:147px;}


.mwt_border{
    width: 10px;
    height: 6px;
    text-align: center;
    background: #000;
    position: relative;
}
/*箭頭右*/
.mwt_border .arrow_r_int{
    width: 0px;
    height: 0px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent transparent #333;
    position: absolute;
    top: -4px;
    right: -15px;
}



/*自適應*/
@media screen and (max-width:1800px){.HHR{width:88%;}}

@media screen and (max-width:1400px){.HHR{width:84%;}}

@media screen and (min-width:980px) {
	.Mmaun {display:none;}
	.abimg img {width: 100%;height: 100%;}
}
@media screen and (min-width:768px) and (max-width:979px){
	.Mmaun {display:block; top: 27px;}
	.HHR{width:77%;}
	.head-r {display:none;}
	.noneL {display:block;}
	.noneS {display:none;}
	.work-box { width:94.1%}
	.work-BL {width: 65%;}
	.work-BR {width: 29%; height: 250px;}
	.life-box {width:90%; }
	.next { /*width:100%*/}
	.work-menu { width: 96.8%;}
	.jon-iocn {width: 100%;}
	.border-G {width: 100%;}
	.jou-L { padding: 50px 10px; }
	.jou-R { padding: 50px 10px; }
	.buildbox { width: 60%; padding-right: inherit;}
	.abtitle { width: 100%}
	.abimg {position: inherit; width: 100%;}
	.abimg img { width: 64%;height: 64%; padding-left: 10px;}
	.abper {width: 50%; }
	.jon-iocn img { width: 18%;}
	.lang {display: none;}
	.fb { float: right; position: relative; top: 28px; right: 6%;}
}
@media screen and (max-width:767px) {
	.in-jou { margin: 110px auto 0;}
	h4 { font-size: 18px;}
	.build { margin:60px auto 0px auto;}
	.head-r {display:none;}
	.fb { float: right;position: relative; top: 33px; right: 18%;}
	.lang {position: relative; top: 0px; display: none;}
	.border-G {width:100%}
	.jou-L { padding: 50px 0px; width: 48%;}
	.jou-R { padding: 50px 0px; width: 48%;}
	.logo img { width: 83%; margin: auto; padding-top:6px; }
	.jon-iocn {width: 100%;}
	.noneL {display:none;}
	.noneS {display:block;}
	.HHR { width: 100%; height: 60px;}
	.head { width: 95%; padding: 0px;}
	.border-G { width: 99%;}
	.Mmaun { top: 20px;}
	.mobileTop { margin-top: 62px;}
	.footL { text-align: center; float: none; }
	.footR { text-align: center; float: none; font-size: 10px; padding-top: 10px;}
    .work-menu { width: 94%;}
    .work-menu li { text-align: left; border-bottom: 1px solid #D0D0D0; width: 100%; letter-spacing: 1px; padding: 5px 0;}
	.in-table { margin: 130px auto 80px auto;}
	.work-box { width:81% ; margin: 20px auto;}
	.work-BL {width: 65%;}
	.work-BR {width: 29%; height: 240px;}
	.life-box {width:95%; }
	.next { /*width:100%;*/}
	.work-page { width:50%}
	.buildbox { width: 60%; padding-right: inherit;}
	.LL {width: 120px; margin: auto; float: inherit;}
	.abper {width:80%; }
	.abimg {position: inherit; width: 100%;}
	.abimg img { width: 100%; height: 100%;}
	.abtitle { width: 80%; display: table; padding-top: 30px; margin: auto;}
	.abTT { float: left; font-weight: 900; padding-bottom: 10px; width: 100%;}
	.jon-iocn img{ width: 30%;}
	.editor hr { width: 100%; }
	.editor { margin: 100px auto 0px auto; }
	.life-box img{ width: 90%; margin:15px auto;display:block;}
}
@media screen and (max-width:756px) {
	.work-BL {width: 100%;}
	.work-BR {width: 90%; height: 250px;}
	.work-date {bottom:3%}
	.work-page { width:100%}
	.buildbox { width: 75%;}
	.abper {width:90%; }
	.abtitle { width: 90%;}
	.jon-iocn img{ width: 30%;}
	.life-box {width:90%; }
}
@media screen and (max-width:520px) {
.buildbox { width:100#;}

}
@media screen and (max-width:320px) {
	.jou-L { padding: 50px 0px; width: 48%;}
	.jou-R { padding: 50px 0px; width: 48%;}
	.work-box { width:90%}
	.work-BL {width: 100%;}
	.buildbox { width: 80%;}
	.jon-iocn img{ width: 50%;}
}