@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
* { box-sizing:border-box; font-family:'Noto Sans TC', sans-serif; }mobile
html, body { font-size:16px; display:block; margin:0; padding:0; box-sizing:border-box; background:#F9F9F9; height:100%; width:100%; }
audio { visibility:hidden; position:fixed; top:-500px; }

h2 { font-size:3.3em; line-height:1.4em; font-weight:100; margin:0; padding:0; }
h3 { font-size:2em; font-weight:100; margin:0; padding:0; }
h5 { font-size:1.4em; font-weight:300; margin:0; padding:0; }
h6 { font-size:1.2em; font-weight:300; margin:0; padding:0; }
p { font-size:1em; line-height:2em; margin:0; }
b { font-size:1.5em; font-weight:100; }
.nav { font-size:.8em; }
.pageviewer { font-size:.6em; }
header .menu a { font-size:.9em; }
h2,h3,h5,h6,p,b { position:relative; color:#777;}
span { display:block; }


header { display:block; width:100%; height:80px; left:0; overflow:hidden; position:fixed; top:0; z-index:99999; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:all .3s; }
header .logo { display:inline-block; height:100%; width:auto; margin:0 35px; vertical-align:middle; cursor:pointer;}
header .logo img { display:block; height:100%; }
header .menu { display:inline-block; height:100%; width:auto; text-align:left; vertical-align:middle; }
header .menu a { display:inline-block; color:#555; padding:30px 30px; margin-right:-4px; transition:all .3s; cursor:pointer; }
header .menu a:hover,
header .menu a.selected { color:#fff; background:#ab2a48; }
header.inner { position:fixed; top:0; box-shadow:0 1px 2px rgba(0,0,0,.2); }
header.hide { top:-80px !important; }


.debuger { display:block; background:red; color:yellow; z-index:999999999; position:fixed; top:0; left:0;  }


.coverpage { display:block; background:white; opacity:0; text-align:center; width:100%; height:100%; z-index:9999999999; position:fixed; top:0; left:0; }	


h2 {  /*display:block;*/  opacity:0;}
h2:before { content:""; position:absolute; z-index:999; width:100%; height:100%; background-color:#EBEBEB; transform:scaleX(0); transform-origin:0 50%; }

h3 { /*font-weight:100; vertical-align:middle;*/ opacity:0; }
h3:before { content:""; position:absolute; z-index:999; width:100%; height:100%; background-color:#EBEBEB; transform:scaleX(0); transform-origin:0 50%; }

h5 { /*font-weight:100; *//*opacity:0;*/ opacity:0; }
h5:before { content:""; position:absolute; z-index:999; width:100%; height:100%; background-color:#EBEBEB; transform:scaleX(0); transform-origin:0 50%;}

h6 { /*font-weight:100; *//*opacity:0;*/ opacity:0; }
h6:before { content:""; position:absolute; z-index:999; width:100%; height:100%; background-color:#EBEBEB; transform:scaleX(0); transform-origin:0 50%;}

p {  font-weight:300; /*margin:15px 0 0 0;*/ opacity:0; }
p:before { content:""; position:absolute; z-index:999; width:100%; height:100%; background-color:#EBEBEB; transform:scaleX(0); transform-origin:0 50%;}

b {  color:#777; margin:10px 0; opacity:0; }
b:before { content:""; position:absolute; z-index:999; width:100%; height:100%; background-color:#EBEBEB; transform:scaleX(0); transform-origin:0 50%; }

/*.three-intro h6 { display:block; height:10%; font-weight:100; text-align:center; padding:30px 0; }*/
/*.cover .con p { color:#fff!important; }*/


					
.navbox { display:block; padding:30px; height:100%; position:fixed; z-index:9999; right:0; top:0; }
.navbox.white { xbackground:rgba(0,0,0,.3); color:white; }
.navbox.white a { color:white; text-shadow:0 1px 5px rgba(0,0,0,.3); }
.nav { display:block; position:absolute; right:30px; top:50%; transform:translateY(-50%); }
.nav a { display:block; margin:0px; border-left:2px solid #aaa; margin:10px 5px; top:50%; height:80px; padding:1em .5em; transition:all .3s; cursor:pointer; color:#777; opacity:.3; position:relative; }
.nav a span { line-height:1.2em; display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.active { display:block; opacity:1 !important; width:20px; border-left:3px solid #777!important;   }

.showshift .conbox { display:block; position:absolute; left:25%; top:98%; transform:translate(-25%,-98%); }
.showshift .conbox .box { display:inline-block; opacity:.4; width:10px; height:10px; margin:0 3px; border-radius:50%; background:#fff; }
.showshift .conbox .box.active { opacity:1; }
.showshift .conbox img { object-fit:cover; display:none; }

.pageviewer { display:block; z-index:999; width:auto; padding:10px; position:fixed; bottom:10px; right:10px; color:#777; opacity:.5; xbackground:rgba(); }


@media -ms-viewport, screen and (max-width:1024px) and (min-width:768px) {
	.navbox { display:block; width:100%; background:#222; left:0; padding:10px; height:auto; position:fixed; transition:all .5s; }
	.navbox.hide { top:0px!important;  transition:all .5s;}
	.nav { text-align:center; position:relative; transform:translateY(0); right:0; }
	.nav a { display:inline-block; color:white; opacity:.3; padding: 6px 5px; xxborder-bottom:2px solid #aaa; border-left:none; width:90px; height:16px; margin:5px; padding:0; }
	.active { opacity:1 !important; xxxborder-bottom:2px solid #777!important; border-left:none!important; }

	.showshift .conbox { display:block; width:100%; position:absolute; left:50%; top:67%; transform:translate(-50%,-50%); text-align:center; }
	.showshift .conbox .box { display:inline-block; background:#777; margin:0 3px; }

	.pageviewer { right:50%; transform:translateX(50%); }
}
@media -ms-viewport, screen and (max-width:736px) {

	.navbox { display:block; width:100%; background:#222; left:0; padding:85px 0 10px 0; height:auto; position:fixed; top:0px!important; }
	.navbox.hide { top:-70px!important;  transition:all .5s;}
	.nav { text-align:center; position:relative; transform:translateY(0); right:0; }
	.nav a { display:inline-block; color:white; opacity:.3; padding: 6px 5px; xxborder-bottom:2px solid #aaa; border-left:none; width:80px; height:16px; margin:0; padding:0; }
	.active { opacity:1 !important; xxxborder-bottom:2px solid #777!important; border-left:none!important; }
}

/*
.##.....##..#######..########..##.......########
.###...###.##.....##.##.....##.##.......##......
.####.####.##.....##.##.....##.##.......##......
.##.###.##.##.....##.##.....##.##.......######..
.##.....##.##.....##.##.....##.##.......##......
.##.....##.##.....##.##.....##.##.......##......
.##.....##..#######..########..########.########
*/


.chapter { display:block; width:100%; height:auto; margin-top:80px; }
.chapter .group { display:block; width:100%; height:auto; }

.cover .photo { height:100vh; overflow:hidden; background:#000;  }
.cover .photo:before { width:50%; content:""; position:absolute; z-index:999; height:100%; background-color:#EBEBEB; transform:scaleX(0); transform-origin:0 50%;  }
.cover  img { display:block; width:100%; height:100%; object-fit:cover; opacity:0; }
.cover .con { display:inline-block; position:absolute; top:30%; left:160px; width:70%; }
.cover .con h3 { display:inline-block; margin-bottom:.7em; color:#fff;}
.cover .con h2 { display:inline-block; margin-bottom:.7em; color:#fff;}
.cover .con h5 { display:inline-block; margin-bottom:.6em; color:#fff;}
.cover .con h6 { display:inline-block; left:160px; margin-top:.8em; color:#fff;}
.cover .con p {  display:inline-block; color:#fff; }

.full-size .photo { height:100%; overflow:hidden; }
.full-size img { display:block; width:100%; height:100%; object-fit:cover; opacity:0;}
.full-size .con { display:inline-block; position:absolute; top:50%; padding:50px 155px; width:1000px; background:rgba(0,0,0,.5); transform:translateY(-50%); }
.full-size .con h2 { display:block; color:#fff; margin-bottom:15px;}
.full-size .con h5 { color:#fff; }
.full-size .con p { display:block; color:#fff;}

.full-demo .photo { height:100%; overflow:hidden; }
.full-demo img { display:block; width:100%; height:100%; object-fit:cover; opacity:0;}
.full-demo .con { display:block; position:relative; top:0; padding:50px 5%;   }
.full-demo .con h2 { display:block; margin-bottom:15px;}
.full-demo .con p { display:block; width:80%;}

.concept .photo img { object-fit:contain;}
.concept .con { top:85%; left:145px; transform:translateY(-95%); }
.concept .con h2 { margin-bottom:10px;  }
			
.half-normal .photo { width:50%; height:100%; overflow:hidden;}
.half-normal img{ display:block; width:100%; /*height:51vh;*/ object-fit:cover; opacity:0;}
.half-normal .con { position:absolute; top:50%; left:50%; display:inline-block; transform:translateY(-50%); width:50%;}
.half-normal .con p { display:inline-block; left:50%; transform:translateX(-50%); width:60%; }
.half-normal .con h5 { display:inline-block; left:50%; transform:translateX(-50%); width:60%; margin-bottom:.3em;}
.half-normal .con h2 { display:inline-block; left:80%; transform:translateX(-80%); width:75%; margin-bottom:.3em;}

.poem .con p:first-child { xborder-bottom:1px solid rgba(0,0,0,.3); text-align:center; padding:20px 0; margin-bottom:40px; }
.poem .con p:last-child { xtext-align:right; }

.half-photo-right .photo { width:50%; height:100%; overflow:hidden; position:relative; left:50%;}
.half-photo-right img{ display:block; width:100%; /*height:51vh;*/ object-fit:cover; opacity:0; }
.half-photo-right .con { position:absolute; display:inline-block; width:50%; top:50%; left:0%; transform:translate(-0%,-50%);  }
.half-photo-right .con p { display:inline-block; left:50%; transform:translateX(-50%); width:60%; }
.half-photo-right .con h5 { display:inline-block; left:50%; transform:translateX(-50%); width:60%; margin-bottom:.3em;}
.half-photo-right .con h2 { display:inline-block; left:80%; transform:translateX(-80%); width:75%; margin-bottom:.3em;}

.half-51vh img { height:51vh;  }


.flex-intro	.box { display:inline-block; margin-right:-4px; width:33.3%; height:100%; position:relative; vertical-align:top; }
.flex-intro .box .photo { height:60%; width:100%; overflow:hidden;}
.flex-intro img { display:block; width:100%; height:100%; object-fit:cover; opacity:0;}
.flex-intro .con { display:block; width:100%; height:40%; position:relative; left:50%; top:0; transform:translateX(-50%); vertical-align:top; padding:20px;}
.flex-intro .con h5 { margin-bottom:.5em; }

.flex-intro1 .box { display:inline-block; margin-right:-4px; width:14.2%; height:100%; position:relative; vertical-align:top; }
.flex-intro1 .box .photo { height:70%; width:100%; overflow:hidden;}
.flex-intro1 img { display:block; width:100%; height:100%; object-fit:cover; opacity:0;}
.flex-intro1 .con { display:block; width:100%; height:40%; position:relative; left:50%; top:0; transform:translateX(-50%); vertical-align:top; padding:50px;}
.flex-intro1 .con h5 { margin-bottom:.5em; }
			
.three-intro { border-top:1px solid #ccc; height:50vh; padding-bottom:5vh; }
.three-intro .box { width:33.33%; height:90%; display:inline-block; margin-right:-4px; position:relative; vertical-align:top; padding:0px; }
.three-intro .box:first-child { width:66.66%; }
.three-intro h6 { text-align:center; margin-top:30px; display:none; }
.three-intro .photo { display:block; width:100%; height:65%; overflow:hidden; }
.three-intro img { display:block; width:100%; object-fit:cover; height:100%; opacity:0; }
.three-intro .con { display:block; width:100%; position:relative; top:0; padding:5% 7%; xdisplay:none; }

.three-intro-concept { height:100vh !important; }
.three-intro-concept .box { height:80%; width:33.33%!important; }
.three-intro-concept .box .photo { height:100% !important; }
.three-intro-concept .box b {}
			
.service .con { text-align:center; display:block; margin:auto; width:100%; max-width:1400px; padding:30px 0; }
.service .con .box {display:inline-block; width:100%; max-width:420px; vertical-align:top; border-radius:5px; border:1px solid rgba(0,0,0,.1); margin:10px 10px; padding:20px; height:420px;  }
.service .con .box h5:after { content:''; border:1px solid rgba(0,0,0,.1); position:relative; display:block; margin-top:10px; }

.specialgray { background:#e4e6ea; padding-top:3px; }


.row { margin:0; height:auto; position:relative;  }
.scene { margin-bottom:10px; }
.scene .photo { position:relative!important;  display:block; overflow:hidden; height:50vh; }
.scene .photo img { position:absolute; top:50%; left:50%; height:140%; transform:translate(-50%,-50%); }
.scene .con {  width:35%; display:inline-block;  position:absolute; z-index:99; top:0; right:0; height:100%; background:#fff; }
.scene .con img { display:block; width:100%; height:100%; object-fit:cover;}



.rowlayout { margin:0; height:101vh; position:relative; background:#e5e9ec; overflow:hidden; }

#titleplan { position:absolute; top:150px; left:0; width:100%; text-align:center; }
#conlayout { display:block; height:100%; position:relative; }
#conlayout > div { display:none; width:50%; height:100%; box-sizing:border-box; text-align:center; position:absolute; top:0; left:0; }
#conlayout > div#plan_outside { position:absolute; top:50%; left:50%; transform:translate(-65%,-50%); }
#conlayout > div > img { display:block; width:100%; height:100%; object-fit:contain; position:absolute; top:0; left:0; xz-index:-1; }
#conlayout > div:first-child { display:block; padding-top:9%; }

#conlayout > div#plan_outside .floorbox { display:block; width:80%; height:80%; position:absolute; top:8.5%; left:50%; transform:translate(-50%,0); }
#conlayout > div#plan_outside .floorbox .gap { display:block; height:50px; }
#conlayout > div#plan_outside .floorbox2 { display:block; width:30%; height:80%; border:0px solid red; position:absolute; top:50%; left:50%; transform:translate(10%,30%); }
#conlayout .btnfloor { display:block; cursor:pointer; height:4%; box-sizing:border-box; padding:0; position:relative; transition:all .9s; width:30%; border-bottom:1px solid #ccc; left:65%; }
	/*#conlayout .btnfloor:before, 
	#conlayout .btnfloor:after { content:''; display:block; box-sizing:border-box; width:25%; height:100%; border-top:1px solid #222; position:absolute; top:0; }
	#conlayout .btnfloor:before { left:10%; }
	#conlayout .btnfloor:after { right:12.5%; }
	#conlayout .btnfloor:last-child:before,
	#conlayout .btnfloor:last-child:after { border-bottom:1px solid #222; }*/



#conlayout .btnfloor .iconarrow { display:block; width:24px; height:24px; box-sizing:border-box; background:url('../img/icon_arrownext.svg'); background-size:cover; background-repeat:no-repeat; opacity:0; transition:all .3s; position:absolute; top:50%; left:20px; transform:translate(-50%,-50%); }


#conlayout .btnfloor span { display:block; height:100%; position:relative; background:transparent; width:100%; position:relative; /*margin:0 10%;*/ transition:all .9s; }
#conlayout .btnfloor span b { display:block; color:#222; font-weight:normal; font-size:1em; position:absolute; transition:all .9s; top:20%; left:70%; transform:translate(-50%,-50%); }
#conlayout .btnfloor:hover .iconarrow { opacity:1; right:12.5%; }
#conlayout .btnfloor:hover span { background:rgba(0,0,0,.2); }
#conlayout .btnfloor:hover span b { x-left:69%; x-color:white; }
#conlayout .btnfloor24 { height:6%; }
	#conlayout #plan_floorRoof,
	#conlayout #plan_floor1,
	#conlayout #plan_floor3,
	#conlayout #plan_floor4,
	#conlayout #plan_floor5,
	#conlayout #plan_floor6 { width:100%; }

#btn-plan { position:absolute; top:130px; left:40px; cursor:pointer; z-index:100; color:#b07d46; text-transform:uppercase; letter-spacing:3px; display:none; background:transparent; padding:10px; border-radius:40px; }
#plan_svg { display:none; width:100%; height:100%; box-sizing:border-box; text-align:center; position:absolute; top:0; left:0; z-index:50; }
	#plan_svg svg { display:block; width:100%; height:100%; }
	#plan_svg svg polygon, 
	#plan_svg svg rect { opacity:0; transition:all .3s; cursor:pointer; }
	#plan_svg svg polygon:hover, 
	#plan_svg svg rect:hover { opacity:.3; }
	#plan_svg svg polygon.selected, 
	#plan_svg svg rect.selected { opacity:.9; }

#plan_layout { display:none; width:50%; height:100%; background-repeat:no-repeat; background-position:center; background-size:contain; box-sizing:border-box; text-align:center; position:absolute; top:0; left:50% !important; z-index:51; background-color:#f1f2f3; }



	.quote  .con h6 { font-size:.9em; left:0; }
	.quote .con p { text-indent:-8px; }


#titleplan, 
#conlayout .btnfloor span b 
{ font-family:'Roboto Condensed', Arial; }

footer { background:#fff; padding:30px 0;}
footer .conbox { width:100%; display:block; margin:auto; max-width:800px;  text-align:center;}




@media -ms-viewport, screen and (min-width:1800px) {
	body { font-size:1.2em; }
}

@media -ms-viewport, screen and (max-width:1024px) and (min-width:768px) {
	
	body { font-size:14px;  }
	header { height:70px; }
	header .menu a { width:auto; padding:26px 18px; }
	.chapter { margin-top:8.5em!important; }
	.cover .con { width:80%; }
	.full-size .photo { height:100vh; }
	.full-size .con { width:620px; padding:50px!important;  }
	.concept .con { top:75%;}
	.flex-intro .box { width:50%;  height:100vh; }
	.flex-intro1 .box { width:50%;  height:100vh; }
	.service .con .box { height:320px; }
	
	#conlayout { height:100vh!important;}
	#conlayout > div#plan_outside { transform:translate(-60%,-50%) !important; }
	#conlayout .btnfloor .iconarrow { width:20px; height:20px; }
	#btn-plan { top:auto; bottom:120px; left:50%; transform:translateX(-50%); }
	footer .conbox { max-width:500px; }
				
}
@media -ms-viewport, screen and (max-width:768px) {
	body { font-size:12px;  }
	header { height:70px; }
	header .logo { margin:0 15px; }
	header .menu a { padding:28px 18px;}
	.mask { display:none; }
	 .chapter { margin-top:9.7em!important; }
	 .cover .con { left:100px; }
	 .cover .photo { height:70vh;}

	.full-size .photo { height:50vh; }
	.half-normal .con p { width:80%; }
	.half-normal .con h5 { width:80%; }
	.half-normal .con h2 { width:88%; }

	.half-photo-right .con p { width:80%; }
	.half-photo-right .con h5 { width:80%; }
	.half-photo-right .con h2 { width:88%;}

	.full-demo .photo { height:40vh; }


	.flex-intro .box { height:58vh; }
	.flex-intro1 .box { height:58vh; }
	.service .con .box { max-width:300px; height:auto; }
	.concept .photo { height:70vh; }

	.scene .photo { height:35vh; }

}

@media -ms-viewport, screen and (max-width:736px) {
body { font-size:11px;  }
	/*.cover { margin-bottom:150px; }*/
	header{ height:71px; }
	header .menu { position:absolute;  }
	header .menu a { padding:30px 11.5px; }
	/*.navbox { top:70px;}*/

	.cover .photo { height:38vh;}
	.cover .con { display:block; position:relative; left:36px; width:80%; top:0;}
	.cover .con h3{ position:absolute; color:#fff; top:-200px;}
	.cover .con h2{ position:absolute; top:-150px; }
	.cover .con h5{ color:#777; top:-22px; }
	.cover .con p { color:#777; top:-20px; }

	.quote  .con { position:absolute; top:268px; }
	.quote  .con p{ color:#fff; position:absolute; top:-150px; }
	.quote  .con h6 { position:absolute; top:-100px; width:100%; text-align:left; left:0; }
	
	.flex-intro .box { width:50%; height:95vh; }
	.flex-intro1 .box { width:100%; height:95vh; }

	.half-normal .photo, .half-photo-right .photo { width:100%; left:0; }
	.half-normal .con, .half-photo-right .con { width:100%; left:0; top:0; transform:translateY(0); position:relative; display:block;  padding:30px 0px;}
	
	.full-size .con { width:100%; padding:25px 35px; height:100%; }
	
	.three-intro { border-top:transparent; }
	.three-intro .box { width:100%; x-padding:20px; }
	.three-intro .box h2 { text-align:center; }

	.three-intro-concept { height:70vh !important; }
	.three-intro-concept .box { height:60%; width:33.33%!important; }
	.three-intro-concept .box .photo { height:100% !important; }
	.three-intro-concept .box b { display:block; word-break:break-all; }
	
	.full-demo .photo { height:35vh; overflow:hidden; }
	.full-demo .photo img { height:100% !important; }
	.full-demo .con{ padding:50px 10%; }
	.full-demo .con p { width:80%; }

	.concept .con { display:block; position:relative; left:0; width:80%; margin:auto; top:155px;}
	.concept .con h2 { margin-top:59px;  }
	
	.rowlayout { height:90vh; }
	#conlayout { height:90vh !important;}
	#conlayout > div { width:100%; height:50%; }
	#conlayout > div#plan_outside { transform:translate(-60%,-50%) scale(1.5) !important; }
	#conlayout > div#plan_layout { top:50%; left:0 !important; }
	#conlayout > div#plan_svg { top:0; left:0; }
	#conlayout #plan_floor3, #conlayout #plan_floor4, #conlayout #plan_floor5, #conlayout #plan_floor6 { height:100% !important; }
	#conlayout .btnfloor .iconarrow { width:10px; height:10px; }
	#conlayout .btnfloor span b { font-size:.8em; top:0; margin:0; transform:translateY(0); }
	#btn-plan { top:auto; bottom:20px; left:15%; transform:translateX(-50%); }

	footer .conbox { max-width:340px; }

}


@media -ms-viewport, screen and (max-width:414px) {
	.full-demo img { height:27vh; }
	.half-51vh img { height:26vh; }
}
















/*
....###....##....##.####.##.....##....###....########.####..#######..##....##
...##.##...###...##..##..###...###...##.##......##.....##..##.....##.###...##
..##...##..####..##..##..####.####..##...##.....##.....##..##.....##.####..##
.##.....##.##.##.##..##..##.###.##.##.....##....##.....##..##.....##.##.##.##
.#########.##..####..##..##.....##.#########....##.....##..##.....##.##..####
.##.....##.##...###..##..##.....##.##.....##....##.....##..##.....##.##...###
.##.....##.##....##.####.##.....##.##.....##....##....####..#######..##....##
*/

		   h2 { animation:reveal  700ms cubic-bezier(0.0, 0.0, 0.2, 1) .55s 1 forwards; }
	h2:before { animation:revealer 1400ms cubic-bezier(0.0, 0.0, 0.2, 1) .35s 1 forwards; }

	 	   h3 { animation:reveal  700ms cubic-bezier(0.0, 0.0, 0.2, 1) .35s 1 forwards; }
	h3:before { animation:revealer 1400ms cubic-bezier(0.0, 0.0, 0.2, 1) .15s 1 forwards; }

	 	   h5 { animation:reveal  700ms cubic-bezier(0.0, 0.0, 0.2, 1) .45s 1 forwards; }
	h5:before { animation:revealer 1400ms cubic-bezier(0.0, 0.0, 0.2, 1) .15s 1 forwards; }

		   h6 { animation:reveal  700ms cubic-bezier(0.0, 0.0, 0.2, 1) .45s 1 forwards; }
	h6:before { animation:revealer 1400ms cubic-bezier(0.0, 0.0, 0.2, 1) .15s 1 forwards; }

	 	   p { animation:reveal  700ms cubic-bezier(0.0, 0.0, 0.2, 1) .65s 1 forwards; }
	p:before { animation:revealer 1400ms cubic-bezier(0.0, 0.0, 0.2, 1) .45s 1 forwards; }

	 	   b { animation:reveal  700ms cubic-bezier(0.0, 0.0, 0.2, 1) .35s 1 forwards; }
	b:before { animation:revealer 400ms cubic-bezier(0.0, 0.0, 0.2, 1) .15s 1 forwards; }

  			  .cover img { animation:cover-reveal 2000ms cubic-bezier(0.0, 0.0, 0.2, 1) 0s 1 forwards; }
	.cover .photo:before { animation:revealer 0ms cubic-bezier(0.0, 0.0, 0.2, 1) 0s 1 forwards; }

			  .half-normal img { animation:photo-reveal 1800ms cubic-bezier(0.0, 0.0, 0.2, 1) 0s 1 forwards; }
	.half-normal .photo:before { animation:revealer 0ms cubic-bezier(0.0, 0.0, 0.2, 1) 0s 1 forwards; }

  			  .half-photo-right img { animation:photo-reveal-bu 1500ms cubic-bezier(0.0, 0.0, 0.2, 1) 0s 1 forwards;}
	.half-photo-right .photo:before { animation:revealer-bu 0ms cubic-bezier(0.0, 0.0, 0.2, 1) 0s 1 forwards; }

  			  .flex-intro img { animation:photo-reveal-up 1500ms cubic-bezier(0.0, 0.0, 0.2, 1) .6s 1 forwards; }
	.flex-intro .photo:before { animation:revealer-up 0ms cubic-bezier(0.0, 0.0, 0.2, 1) .05s 1 forwards;}
	
	.flex-intro1 img { animation:photo-reveal-up 1500ms cubic-bezier(0.0, 0.0, 0.2, 1) .6s 1 forwards; }
	.flex-intro1 .photo:before { animation:revealer-up 0ms cubic-bezier(0.0, 0.0, 0.2, 1) .05s 1 forwards;}

  			  .three-intro img { animation:photo-reveal 1500ms cubic-bezier(0.0, 0.0, 0.2, 1) 0s 1 forwards; }
	.three-intro .photo:before { animation:revealer 0ms cubic-bezier(0.0, 0.0, 0.2, 1) .15s 1 forwards; }

  			  .full-size img { animation:photo-reveal-up 1500ms cubic-bezier(0.0, 0.0, 0.2, 1) .15s 1 forwards; }
	.full-size .photo:before { animation:revealer-up 0ms cubic-bezier(0.0, 0.0, 0.2, 1) 0s 1 forwards;  }

	.full-demo img { animation:photo-reveal-up 1500ms cubic-bezier(0.0, 0.0, 0.2, 1) .15s 1 forwards; }
	.full-demo .photo:before { animation:revealer-up 0ms cubic-bezier(0.0, 0.0, 0.2, 1) 0s 1 forwards;  }


@keyframes reveal {
	0% { clip-path:inset(0 100% 0 0); opacity:0; }
	100% { clip-path:inset(0 0 0 0); opacity:1;}
}

@keyframes cover-reveal {
	0% { clip-path:inset(0 100% 0 0); opacity:0; transform:scale(1.5);}
	100% { clip-path:inset(0 0 0 0); opacity:.7; transform:scale(1);}
}


@keyframes photo-reveal {
	0% { clip-path:inset(0 100% 0 0); opacity:0; transform:scale(1.5);}
	100% { clip-path:inset(0 0 0 0); opacity:1; transform:scale(1);}
}

@keyframes revealer {
	0%, 50% { transform-origin:0 50%; }
	60%, 100% { transform-origin:100% 50%; }

	60% { transform:scaleX(1); /*opacity:1;*/}
	100% { transform:scaleX(0); /*opacity:0;*/}
}

@keyframes reveal-up {
	0% { clip-path:inset(0 0 100% 0); opacity:0; }
	100% { clip-path:inset(0 0 0 0); opacity:1; }
}

@keyframes photo-reveal-up {
	0% { clip-path:inset(0 0 100% 0); opacity:0; transform:scale(1.5);}
	100% { clip-path:inset(0 0 0 0); opacity:1; transform:scale(1);}
}

@keyframes revealer-up {
	0%, 50% { transform-origin:50% 0%;}
	60%, 100% { transform-origin:50% 100%;}

	60% { transform:scaleY(1);}
	100% { transform:scaleY(0);}
}

@keyframes photo-reveal-bu {
	0% { clip-path:inset(100% 0 0 0); opacity:0; transform:scale(1.5);}
	100% { clip-path:inset(0 0 0 0); opacity:1; transform:scale(1);}
}

@keyframes revealer-bu {
	0%, 50% { transform-origin:50% 0%;}
	60%, 100% { transform-origin:50% -100%;}

	60% { transform:scaleY(-1);}
	100% { transform:scaleY(0);}
}