@charset "utf-8";

html {}
body {
      background:#FFFFFF;
      padding: 0;
      text-align: left;
      font-family: "cwTeXYen","Noto Sans TC",Microsoft JhengHei,Arial,Helvetica,heiti tc,SimHei,serif;
      position: relative;
      margin: 0;
      height: 100%;
      -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	  box-sizing: border-box;
    }

img {border: 0 none;}
h1, h2, h3, h4, h5, h6, ul, ol, li, p, div, blockquote, cite, em, tt, dfn {
 font-weight: normal;margin: 0;padding: 0;font-size: 62.5%;}
dfn, strong, em {font-style: normal;}
li {list-style: outside none none;}
section a { cursor: pointer; outline: medium none; display:block;}
p,p span{ text-align: justify; font-weight:normal; font-size:1.6rem;line-height:1.9rem; }
/*MENU 底色#01bfc5（請更換）*/
#menuall{ background-color:#01bfc5; top:0px; bottom:0px; width:100%; position:fixed; z-index:999; overflow:hidden; transition: width 0.6s, z-index 0.6s 0.1s;}
#menuall.nopone{width:0%; z-index:-99; transition: width 0.6s, z-index 0.6s 0.1s;}
#menuall ul{ display:block; position:fixed; padding:30px; border:1px #FFFFFF solid; background-color:#000000; list-style:none; width:250px; top:50%; left:50%; margin:-188px 0px 0px -125px; opacity:1; transition:opacity 0.6s 0.6s}
#menuall.nopone ul{opacity:0; transition:opacity 0.6s}
#menuall ul li{ display:block;}
#menuall ul li a{ text-decoration:none; height:35px; line-height:35px; 	display:block; font-size:1.8rem; border-bottom:1px #666666 solid; color:#FFFFFF; text-align:left}
#menuall ul li a:hover{color:#FFFF33; text-align:right}
#menuall .lastfix{border:0px}
.nonono{ overflow:hidden}
.menubtn{ position:fixed; background-image:url(../images/menubtn01.png); background-position:center center; width:40px; height:45px; background-size:100% auto ; background-repeat:no-repeat;  border:5px  #01bfc5 solid; border-right:9px #01bfc5 solid;  background-color:#01bfc5; cursor:pointer; top:32px; left:0px; z-index:999999}
.menubtn.chage{ background-image:url(../images/menubtn02.png)}
#mouse{ display:none}

section{ position: relative;}
.mainLeft{ width:55%; margin-left:2%; height:100% !important; position:fixed; float:left; overflow:hidden;}
h1{ width:26vw; max-width:497px; position:absolute; z-index:10; top:1.5vh; right:20vw;}
h1 img{ width:100%;}
.mainPic{ width:100%; bottom:5vh; position:absolute; text-align: center;}
.mainPic img{ width:90%; margin:0 auto; max-width:918px;}
.mainPic p{ color:#545cff; font-size:1.8vw; letter-spacing:.5rem; font-weight:bold; text-align:center; width:100%; margin:2vh auto;font-family: "cwTeXYen","Noto Sans TC",Microsoft JhengHei,Arial,Helvetica,heiti tc,SimHei,serif;}
	/* Mansonry box */
	.mainRight{ float: right; width:45%; margin-top:2px; position:relative;}
	.mainRight h2{ height:0; padding-bottom:20%; color:white; text-align:center; font-size:3.5vw; line-height:9vw; font-weight:bold;}
	.greenBG{ background-color:#00bfc5;}
	.blueBG{ background-color:#555dff;}
	.orangeBG{ background-color:#ff8164;}
	/* grid */
	.box { float: left; overflow:hidden; line-height:0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
	.box.greenBD{ outline: 2px solid #00bfc5; outline-offset:0px;}
	.box.blueBD{ outline: 2px solid #555dff; outline-offset:0px;}
	.box.orangeBD{ outline: 2px solid #ff8164; outline-offset:0px;}
	.box.w1 { width: 20%; max-width:175px;}
	.box.w2 { width: 40%; max-width:350px; z-index:0;}
	.box.w3 { width: 60%; max-width:520px;}
	/* 記得設定最小寛度的尺寸 */
	.grid-sizer { width:20%; }
	/* color */
	.box.green  { background-color: #DFEDD6; }
	/** box figure+figcaption **/
	.box figure {}
	.box figcaption{ position:absolute; width:100%; height:100%; background-color:rgba(0,191,197,.8);position: absolute; top: 0;	left: 0; opacity:0; display:flex; align-items: center;
		justify-content: center; text-align:center;}
	.box.blueBD figcaption{background-color:rgba(85,93,255,.8);}
	.box.orangeBD figcaption{background-color:rgba(255,129,100,.8);}
	.box figure img { width:100%;}
	.box figure figcaption, .box figure figcaption::after,
	.box figure img { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s;}
	.box figure figcaption::after {
		position: absolute;
		top: 0;left: 0;
		width: 100%; height: 100%;
		border-top: 1px solid #fff;border-bottom: 1px solid #fff;
		content: '';
		opacity: 0;
		-webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,0,1);
		transform: rotate3d(0,0,1,45deg) scale3d(1,0,1);
		-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
	}
	
	.box figure h3 { display:flex; align-items: center;
		justify-content: center; text-align:center; width:80%; color:white; font-size:1.3vw; line-height:1.3vw; font-weight:bold;}
	.box figure:hover h3{ opacity: 1;}
	.box.w2 figure h3{ font-size:1.5vw;line-height:1.8vw;}
	
	.box figure:hover figcaption{ opacity:1;}
	.box figure:hover figcaption::after {
		opacity: 1;
		-webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
		transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
	}

/***fix width 1440px***/
@media screen and (max-width: 1440px) {
.mainLeft{ width:50%;}
.mainPic{ bottom:4vh;}
.mainPic img{ width:95%;}
}

/***fix width 1280px***/
@media screen and (max-width: 1280px) {
h1{ width:38vw; right:11vw;}
.mainPic{ bottom:10vh;}
.mainPic img{ width:100%;}

}

/***mobile***/
@media screen and (max-width: 736px) {
body {
    box-sizing: border-box;
    margin: 0;
    overflow-x: hidden;
    padding: 0;
    text-align: left;
	background:#FFFFFF;
}

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 {
    box-sizing: border-box;
}
#header{ overflow:hidden; position:fixed; z-index:9999;}
/*MENU*/
#mouse{ display: block; margin-top:32px; padding:5% 3% 3%; font-weight:bolder}
#mouse a{ text-decoration:underline; color:#ed20ff; display:inline-block;font-size: 1.6rem;}
#mouse span{ margin-left:1%; color:#0000ff; font-size: 1.6rem;}

#logo_box{ display:none}
.menubtn{position:fixed; background-image:url(../images/menubtn03.png); width:100%; height:0px; padding-bottom:10.4166666666%; background-size:cover ; background-repeat:no-repeat;  border:0; background-color:#01bfc5; top:0; left:0px; z-index:99999999999}
.menubtn.chage{  background-image:url(../images/menubtn04.png)}
#menuall{ background-color:rgba(0, 0, 0, 0.8); top:0px; bottom:0px; width:100%; position:fixed; z-index:999; overflow:hidden; transition: width 0.6s, z-index 0.6s 0.1s, background-color 0.6s;}
#menuall.nopone{background-color:rgba(0, 0, 0, 0);width:100%; z-index:-99; transition: width 0.6s, z-index 0.6s 0.1s, background-color 0.6s;}
#menuall ul li a{ text-decoration:none; height:35px; line-height:35px; 	display:block; font-size:1.5rem; border-bottom:1px #666666 solid; color:#FFFFFF; text-align:left}
#menuall ul{ display:block; position:fixed; padding:30px; border:1px #FFFFFF solid; background-color:#000000; list-style:none; width:312px; top:50%; left:auto; right:0px; margin:-188px 0px 0px -125px; opacity:1; transition:opacity 0.6s 0.6s, right 0.6s 0.6s}
#menuall.nopone ul{opacity:0;left:auto; right:-201px; transition:opacity 0.6s, right 0.6s}

section{ width: 100%; max-width:736px;}
.mainLeft{ width:100%; float:none; position:relative; margin-left:0;}
h1{ position:relative; width: 60vw; max-width:none; right:auto;}
.mainPic{ bottom: auto; position:relative;}
.mainPic img{ width:95%;}
.mainPic p{ font-size:4.5vw; letter-spacing:.2rem;}
.mainRight{ float:none; width:100%; position:relative;}
.mainRight h2{ font-size:3rem; line-height:6rem;}


}