@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@400;700&family=Lato&family=Noto+Serif+TC:wght@400;500&family=Sacramento&display=swap');
@import url('icofont/icofont.min.css');
@import url('dripicons/webfont.css');
@import url('animate-custom.css');
/*============reset===============*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, select, p, blockquote, th, td, iframe, figure, figcaption { margin: 0; padding: 0; font-size: 100%; }
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video, main { display: block; }
table, table td { border-collapse: collapse; border-spacing: 0; border: none; }
fieldset, img { 
     border: 0;
	 vertical-align: bottom; }
address, caption, cite, code, dfn, em, strong, th, var, optgroup { font-style: inherit; font-weight: inherit; }
a, del, ins { text-decoration: none; }
ol, li { list-style: none; }
caption, th { text-align: left; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
abbr, acronym { border: 0; font-variant: normal; }
sup, sub { vertical-align: baseline; }
input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; outline: 0; border: 0; }
img {image-rendering:-webkit-optimize-contrast; /*fixd Chrome Img Blur*/}
/*============clear===============*/
.clear { clear: both; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;  }



* html .clearfix { height: 1%; }
.clearfix { display: block; }
.clearfix img{ 
    width: 100%;   
    height: auto;   
    object-fit:scale-down;}
/*============animate===============*/

a, .visible, .hidden, a:before, a:after, .owl-prev i, .owl-next i,.owl-next, .owl-prev, .owl-dots .owl-dot span, input, textarea,/* select,*/ a i, a b, .subnav, #nav:before, b:before, strong:before, strong:after, .justified-gallery > a > .caption, .justified-gallery > a > .caption.caption-visible, .text-more:after, .vertical-box, .icon-box, .more-box, .portfolio-list .text-box{ -webkit-transition: all 250ms ease-in; -o-transition: all 250ms ease-in; -moz-transition: all 250ms ease-in; transition: all 250ms ease-in; }

#nav{ -webkit-transition: opacity 250ms ease-in; -o-transition: opacity 250ms ease-in; -moz-transition: opacity 250ms ease-in; transition: opacity 250ms ease-in; }

.transition-1s, .img-box img, .img-over-box img, .justified-gallery img{
	 -webkit-transition: -webkit-transform 1000ms ease-out !important;
	 -o-transition: -o-transform 1000ms ease-out !important; 
	 -moz-transition: -moz-transform 1000ms ease-out !important; 
	 transition: transform 1000ms ease-out !important;
	 }

.nav-toggle, .back-box,.full-box .img-box, .header-box:before{
	 -webkit-transition: all 500ms ease-in; 
	 -o-transition: all 500ms ease-in; 
	 -moz-transition: all 500ms ease-in; 
	 transition: all 500ms ease-in;
	 }

.transition-5s{ 
     -webkit-transition: all 5000ms ease-out;
	  -o-transition: all 5000ms ease-out;
	   -moz-transition: all 5000ms ease-out;
	    transition: all 5000ms ease-out;
		}
.img-bg .zoomout { 
      -ms-transform: scale(1.3);
	  -webkit-transform: scale(1.3);
	  -moz-transform: scale(1.3);
	  -o-transform: scale(1.3);
	  transform: scale(1.3);
	  }
/*.computer a:hover .img-box img, .computer .img-box a:hover img, .computer a:hover .img-over-box img,*/ 

.computer .justified-gallery a:hover img, .header-icon a:hover, .share-button a:hover, .button-icon a:hover{
	-ms-transform: scale(1.2);
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-o-transform: scale(1.2);
	transform: scale(1.2);
	}
.computer .animated-list .grid-item a:hover{
	-ms-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
	}
/*.img-box img, .img-over-box img,*/ 

.img-bg .loaded, a:hover .vertical-box, a:hover .icon-box, a:hover .more-box, .justified-gallery > a:hover:after, .justified-gallery img{ 
    -ms-transform: scale(1);
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	}
.vertical-box, .icon-box, .more-box, .justified-gallery > a:after{ -ms-transform: scale(0.8);-webkit-transform: scale(0.8);-moz-transform: scale(0.8);-o-transform: scale(0.8);transform: scale(0.8);}
.button-top:hover, .category-list a:hover, .page a:hover, .button-hover a:hover, #footer a:hover, #submit:hover, #reset:hover, a.button-text:hover b, .button-text a:hover b, .hover-move a:hover{-ms-transform: translate(3px,3px); -moz-transform: translate(3px,3px); -webkit-transform: translate(3px,3px); -o-transform: translate(3px,3px); transform: translate(3px,3px);}
.hover-move a{display: inline-block;max-width: 100%;}
.hover-move.owl-carousel a,.hover-move.block a{display: block;}
.hidden { opacity: 0;opacity:1\9\0;}
.visible { opacity: 1; }
.fade { display: none; }
.pause{-ms-animation-play-state: paused; -moz-animation-play-state: paused; -webkit-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused;}
.running{-ms-animation-play-state:running; -moz-animation-play-state:running; -webkit-animation-play-state:running; -o-animation-play-state:running; animation-play-state:running;}
.delay-1 { -webkit-animation-delay: .3s; -moz-animation-delay: .3s; animation-delay: .3s; }
.delay-2 { -webkit-animation-delay: .5s; -moz-animation-delay: .5s; animation-delay: .5s; }
.delay-3 { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s; }
.delay-4 { -webkit-animation-delay: 1.5s; -moz-animation-delay: 1.5s; animation-delay: 1.5s; }
.delay-5 { -webkit-animation-delay: 2s; -moz-animation-delay: 2s; animation-delay: 2s; }
.delay-list li{ opacity: 0;opacity:1\9\0;/*IE9hack*/ -webkit-animation: fadeInUp 0.9s 1;  animation: fadeInUp 0.9s 1;  -webkit-animation-fill-mode: forwards;  animation-fill-mode: forwards;}
.delay-long-list li{ opacity: 0;opacity:1\9\0;/*IE9hack*/ -webkit-animation: fadeInUp 1.5s 1;  animation: fadeInUp 1.5s 1;  -webkit-animation-fill-mode: forwards;  animation-fill-mode: forwards;}
.delay-list li:nth-child(12n+1) {-webkit-animation-delay: 0.2s;  animation-delay: 0.2s;}
.delay-list li:nth-child(12n+2) {-webkit-animation-delay: 0.4s;  animation-delay: 0.4s;}
.delay-list li:nth-child(12n+3) {-webkit-animation-delay: 0.6s;  animation-delay: 0.6s;}
.delay-list li:nth-child(12n+4) {-webkit-animation-delay: 0.8s;  animation-delay: 0.8s;}
.delay-list li:nth-child(12n+5) {-webkit-animation-delay: 1.0s;  animation-delay: 1.0s;}
.delay-list li:nth-child(12n+6) {-webkit-animation-delay: 1.2s;  animation-delay: 1.2s;}
.delay-list li:nth-child(12n+7) {-webkit-animation-delay: 1.4s;  animation-delay: 1.4s;}
.delay-list li:nth-child(12n+8) {-webkit-animation-delay: 1.6s;  animation-delay: 1.6s;}
.delay-list li:nth-child(12n+9) {-webkit-animation-delay: 1.8s;  animation-delay: 1.8s;}
.delay-list li:nth-child(12n+10) {-webkit-animation-delay: 2.0s;  animation-delay: 2.0s;}
.delay-list li:nth-child(12n+11) {-webkit-animation-delay: 2.2s;  animation-delay: 2.2s;}
.delay-list li:nth-child(12n+12) {-webkit-animation-delay: 2.4s;  animation-delay: 2.4s;}
.delay-long-list li:nth-child(6n+1) {-webkit-animation-delay: 0.1s;  animation-delay: 0.1s;}
.delay-long-list li:nth-child(6n+2) {-webkit-animation-delay: 0.5s;  animation-delay: 0.5s;}
.delay-long-list li:nth-child(6n+3) {-webkit-animation-delay: 1.0s;  animation-delay: 1.0s;}
.delay-long-list li:nth-child(6n+4) {-webkit-animation-delay: 1.5s;  animation-delay: 1.5s;}
.delay-long-list li:nth-child(6n+5) {-webkit-animation-delay: 2.0s;  animation-delay: 2.0s;}
.delay-long-list li:nth-child(6n+6) {-webkit-animation-delay: 2.5s;  animation-delay: 2.5s;}
.canvas-animation { position: absolute; width: 100%; height: 0; overflow: hidden; }
.canvas-animation canvas { display: block; position: absolute; width: 100%; height: 100%; top: 0;}
.canvas-animation img{ width:100%;}
.animation-group{position:relative;}
.animation-group img{position: absolute; width: 100%; height: 0;top:0;left: 0;}
.animation-group img:first-child{position: relative;}
.animation-group.img-box img:first-child{position: absolute;}



.about01{
	display:block;
	margin-top:6em;
}
/*============iframe===============*/

.iframe-16x9,.plyr__video-embed{ position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.iframe-4x3 { position: relative; padding-bottom: 75%; height: 0; overflow: hidden; }
.iframe-16x9 iframe, .iframe-4x3 iframe, .plyr__video-embed iframe, .full-video iframe{ 
position: absolute;
margin-bottom:2em; top: 0; left: 0; width: 100%; height: 100%;}
.full-video { position: relative;width: 100%; height: 100%;}
/*.iframe-16x9:before{ content: ''; position: absolute; top:0; right: 0; width: 100%; height: 100%; border: solid 2px #fff; z-index: 2;}*/


/*==============全部建案==================*/
.allproject img {
	display: block;
    width: 160px;
	height:164px;
	margin:0 auto;
    margin-bottom: 11px;
	padding-left:4.8em;
}
.allproject2 img {
	display:none ;
}
/*==============文字排列-ver==================*/
.text-ver,#nav li a, .category-list b{ writing-mode: tb-rl; -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -ms-writing-mode: vertical-rl; writing-mode: vertical-rl; white-space: nowrap;}

.text-hor { writing-mode: lr-tb; -ms-writing-mode: lr-tb; -webkit-writing-mode: horizontal-tb; -moz-writing-mode: horizontal-tb; -ms-writing-mode: horizontal-tb; writing-mode: horizontal-tb; }

.home-slider {
	font-family:"標楷體", sans-serif;
}
/*============grids===============*/
.grid-large, .grid-middle, .grid-small, .grid-max, .grid-min, .grid { /*width: 85%;*/ margin: 0 auto; position: relative; }
.grid-max { max-width: 1520px; }
.grid-large { max-width: 1440px;}
.grid-middle { max-width: 1100px;}
.grid-small { max-width: 900px;}
.grid-min { max-width: 530px; }
.grid-1-12, .grid-2-12, .grid-3-12, .grid-4-12, .grid-5-12, .grid-6-12, .grid-7-12, .grid-8-12, .grid-9-12, .grid-10-12, .grid-11-12, .grid-3-8, .grid-5-8, .grid-1-2 { float: left; display: block; position: relative; }
.grid-1-12 { width: 8.3%; }
.grid-2-12 { width: 16.6%; }
.grid-3-12 { width: 25%; }
.grid-4-12 { width: 33.3%; }
.grid-5-12 { width: 41.6%; }
.grid-6-12 { width: 50%; }
.grid-7-12 { width: 58.3%; }
.grid-8-12 { width: 66.6%; }
.grid-9-12 { width: 75%; }
.grid-10-12 { width: 83.3%; }
.grid-11-12 { width: 91.6%; }
.grid-3-8 { width: 38%; }
.grid-5-8 { width: 62%; }
.grid-1-2 { width: 47%; }
.grid-space-right,.grid-space-left{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.grid-space-right-small{padding-right: 3%;}
.grid-space-left-small{padding-left: 3%;}
.grid-space-right{padding-right: 6%;}
.grid-space-left{padding-left: 6%;}
.grid-right{ float: right;}

/*============style===============*/

body{
	font-size: 1em; 
	overflow-x: hidden; 
	color: #333;
	background-color:#FCFBFA;
	background-position: center center; 
	background-size: cover;
	background-attachment:fixed;
	overflow-wrap: break-word; 
	word-wrap: break-word;
	 -ms-hyphens: auto;
	 -moz-hyphens: auto;
	 -webkit-hyphens: auto;
	 hyphens: auto;
	 }
body.style-light{background-color:#fbf8f5;}
body.mobile{background-attachment:inherit; background-size:inherit;background-repeat: repeat;}
body:before{display:none;}
p, .text0{ font-size: 1em; line-height: 1.9em; letter-spacing: 0.1em; }
p span, h1 span, h2 span, h3 span, h4 span, .br, li span, b span, em span, .text-break span{ display: inline-block;max-width: 100%; }
.text-break span{margin-right: 0.2em;}
::selection { background: #43392f; color: #fff; }
a { color: #CAB5AA; }
a:hover { color: #fff;}
p a{ color: #fff; text-decoration:underline; }
p a:hover {background: #fff; color: #fff; text-decoration:none; }
strong { font-weight: bold; }
em, i { font-style: normal; }
big { font-size: 1.125em; }
small { font-size: 0.9375em; }
h1,h2,h3,h4, h5, h6 { font-size: 1em;}

body, .body-font, .justified-gallery > a > .caption, .html-edit strong, .html-edit em{ font-family: "標楷體",  DFKai-sb, BiauKai, Arial, Helvetica, "微軟正黑體", "Microsoft JhengHei", "儷黑 Pro", "LiHei Pro", sans-serif; }

.text-font, em, h1, h2, h3, h4, strong, #nav, .title-box, .subtitle-box, .page, .info-list, form label, input, textarea, .input-text, .text-more:after,.back-box{ font-family:"Frank Ruhl Libre","Noto Serif TC", Times,"Times New Roman", "儷宋 Pro", "LiSong Pro Light", "宋体", SimSun, serif; font-weight:500;}

.en-font{ font-family:"Sacramento","Frank Ruhl Libre", Times,"Times New Roman", serif;}
.bg-light{ 
       
	   background:url('../images/bg-pattern.jpg'); 
	   z-index: 1;
	   background-repeat: repeat !important;
	   }
.bg-write{ 
       background: #fff;
}
.mobile .bg-light{background-size: 1000px;}
.bg-light a { color: #43392f; }
.bg-light a:hover { color: #43392f;}
.bg-light p a{ color: #645344; }
.bg-light p a:hover {background: #645344;}
.title2,.title3,.title4,.title5,.title6{letter-spacing: 0.05em;display: block;}
.title1,.title2{line-height: 1.2em;margin-bottom: 0.1em;}
.title3,.title4 {line-height: 1.3em;margin-bottom: 0.1em;}
.title5,.title6 {line-height: 1.5em;}
.title1{font-size: 2.7em;} 
.title2{font-size: 2.25em; }
.title3 {font-size: 1.875em;} 
.title4 {font-size: 1.5em;}
.title5 {font-size: 1.25em;} 
.title6 {font-size: 1.125em;}

.pro {
	font-size: 1.2em;
	color:#fff;
	text-align:center;
	line-height: 1.3em;
    margin-bottom: 0.1em;
	font-weight: 500;
	background:#930 url(../images/pro-title.jpg) center; 
	background-size: cover;
	padding:6px;
}
.text1 {font-size: 1.125em;line-height: 1.7em; letter-spacing: 0.1em;}
.text2 { font-size: 1em;line-height: 1.5em; letter-spacing: 0.1em;display: block;}
.text3 { font-size: 0.9375em;line-height: 1.7em;}
.text-small { font-size: 14px;}
.text-en-small{display: block;font-size: 12px;letter-spacing:0.5em;-ms-transform: scale(0.9); -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9);}
.text-line-height {line-height: 1.6em;}
.text-spacing-normal{letter-spacing:0em;}
.text-spacing-small{letter-spacing:0.2em;}
.text-block{display:block;}
.text-normal{font-weight: normal;}
.color-white { color: #fff; }
.color-black {color: #000;}
.color1 { color: #43392f;}
.color2 { color: #645344; }
.color3, .color3 a{ color: #9f8471; }
.color4 { color: #d8cdc5;}
.paragraph p,.paragraph ul,.paragraph ol{margin-bottom: 10px;}
.list-disc li { list-style-type: disc; }
.list-decimal li { list-style-type: decimal; }
.list-decimal li, .list-disc li { margin-left: 25px; }
.nowrap, .footer-nav a, .item-5 h2, .item-5 h3{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 100%; }

.index-portfolio-list h1, .index-portfolio-list h2,.index-news-list h2,.index-news-list h3{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

.offscreen{position: absolute;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);padding: 0;border: 0;height: 1px;width: 1px;overflow: hidden;}
.text-justify,.about .grid-container p,.portfolio-list .grid-item p,.item-4 .grid-item h2, .info-list li,.contact .grid-container p,.affiliates .grid-container p,.art .grid-container p{text-align:justify;}
.align-left{ float: left;}
.align-right{ float: right;}
.align-center{ margin: 0 auto;}
.text-bold{ font-weight: bold;}
.text-left{ text-align: left;}
.text-right{ text-align: right;}
.text-top{margin-top:10px;}
.text-bottom{margin-bottom:10px;}
.text-top2{margin-top:20px;}
.text-bottom2{margin-bottom:20px;}
.text-top3{margin-top:35px;}
.text-bottom3{ margin-bottom: 35px;}
.box-top{margin-top:50px;}
.box-bottom{ margin-bottom: 50px;}
.box-top2{margin-top:80px;}
.box-bottom2{ margin-bottom: 80px;}
.text-dot:after{content: '．';}
.text-up-top{margin-top:-15px;position: relative; z-index: 1;}
.text-up-top2{margin-top:-48px;position: relative; z-index: 1; }
.text-up-bottom{margin-bottom:-15px;position: relative; z-index: 1;}
.text-up-bottom2{margin-bottom:-48px;position: relative; z-index: 1; }
.text-up-bottom3{margin-bottom:-100px;position: relative; z-index: 1; }
/*============base===============*/
body, html { height: 100%; }
.wrapper { min-height: 100%; width: 100%; position: relative; overflow: hidden; }
.main { position: relative; width: 100%;min-height: 360px;z-index:1;overflow: hidden; }
#footer { position: relative; width: 100%; z-index: 9;}
.wrapper .main{ padding-bottom: 3em;}
.wrapper+#footer{ margin-top: -650px; min-height: 650px;}

/*============nav 選單===============*/

.logo { position:absolute; display: block; width: 100px; height: auto;right: 45px; top: 50px; z-index: 11;}
.logo img{ position:relative; width:100%; height:auto;}
body.sticky-footer .logo{opacity: 0;pointer-events:none;}
.head-logo{
	display: block;
	-webkit-filter: drop-shadow(3px 3px 5px #000);
	}
.content-logo{display: none;}
#header{ position: fixed; -webkit-transform: translateZ(0); transform: translateZ(0); display: block; top: 0px; left: 0px; z-index: 10;width:100%;color:#fff;}
#nav{ position:absolute; width:100%;opacity: 0;pointer-events:none;}
@media screen and (min-width:1200px\0){/*ie9.10.11 hack fixd:pointer-events*/
#nav{height: 0px;}
body.active #nav, body.sticky-head #nav{height: auto;}
body.sticky-footer #nav{height: 0px;}
}

#nav:before{
	position: absolute; 
	content: ''; 
	display: block;
	top:0; 
	left: 0;
	width: 100%; 
	height:350px;
	background:url('../images/nav-bg.png') repeat-x left bottom;
	opacity: 0;
	pointer-events:none; 
	}
#nav ul{position:absolute;right: 180px;top: 15px;}

#nav li {
	position: relative; 
	display: block;
	float: right;
	min-width:48px; 
	}
#nav li a{
	color:#fff;
	white-space: nowrap;
	}
#nav li > a{
	position: relative;
	display:block;
	float: right;
	padding-top: 35px; 
	width: 48px;
	z-index: 1;}
	
#nav li > a:before{ 
    position: absolute; 
	content: ''; 
	display: block;
	top:0px; 
	right: 9px;width: 34px; 
	height: 35px;
	background-image:url('../images/menu-leaf.png'); 
	background-repeat: no-repeat; 
	background-position:right bottom; 
	background-size: contain;
	opacity: 0;
	}
.computer #nav li > a:hover:before,#nav li.active > a:before{opacity: 1;}

#nav li strong{position: relative;display:inline-block;width:30px;line-height: 35px; font-size: 18px; letter-spacing: 0.3em;margin: 0 9px; }
#nav li strong:before, #nav li strong:after{
	position: absolute; 
	content: ''; 
	display: block; 
	height: 0; 
	width: 1px;
	background: #fff;
	top:0;
}
#nav li strong:before{left: 0;}
#nav li strong:after{right: 0;}

.computer #nav li a:hover strong:before, .computer #nav li a:hover strong:after, #nav li.active strong:before, #nav li.active strong:after{height: 100%;}

#nav li em{font-size: 14px;letter-spacing: 0.4em;padding-top: 10px;}

#nav li em.text-long{letter-spacing: 0.2em;}

#nav .subnav{float: right;font-size: 0;line-height:0;width:0px; margin-top: 25px;padding-bottom: 2px; opacity: 0; overflow: hidden;z-index: -1;}

.computer #nav li:hover .subnav, #nav li.active .subnav {width:50px;opacity: 1; overflow:inherit;z-index: 1;}

#nav .subnav a{position: relative; display:inline-block;font-size: 18px;width:50px;line-height: 55px; letter-spacing: 0.15em;padding: 12px 0;margin: -2px 0;z-index: 1;}

#nav .subnav a:before{position: absolute; content: ''; display: block;top:0px; left: 50%;margin-left: -15px; width: 30px; height: 100%;background-color: #fff; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;z-index: -1;opacity: 0;}

#nav .subnav a:after{position: absolute; content: ''; display: block;bottom:0; left: 50%;margin-left: -1px; width: 2px; height: 2px;background-color: #fff;}

#nav .subnav a:last-child:after{display: none;}
#nav .subnav a.active, .computer #nav .subnav a:hover{ color: #000;}
#nav .subnav a.active:before, .computer #nav .subnav a:hover:before{ opacity: 1;}
body.active #nav{opacity: 1;pointer-events:auto;}
body.active #nav:before{opacity: 1; }
body.sticky-footer #nav{opacity: 0;pointer-events:none;}

.nav-toggle{
	position:absolute;
	display:block;
	width: 100px; 
	top: 140px; 
	right: 45px;
	padding: 10px 0;
	 color:#CAB5AA;
	 z-index: 1;
	 }
.nav-toggle em{
	border-bottom: solid 1px #fff; 
	border-top:solid 1px #fff;
	font-size: 14px;
	font-weight:700;
	line-height: 20px;
	letter-spacing: 0.8em; 
	padding-left: 0.8em; 
	text-align: center; 
	white-space: nowrap;
	background:rgba(0,0,0,0.4);
	}
em.text-open{display: block;}

em.text-close{display: none;letter-spacing: 0.6em; padding-left: 0.6em;}
.nav-toggle{opacity: 1;pointer-events:auto;}
body.sticky-footer .nav-toggle{opacity: 0;pointer-events:none;}
body.active .text-open{display: none;}
body.active .text-close{display: block;}

.header-icon{ position:absolute;display: block;left: 50px; top:40px; font-size: 0;}
.header-icon a, .footer-icon a{ position: relative; display:inline-block; width: 45px; height: 40px;line-height: 40px;font-size:28px;text-align:center; overflow:hidden;}
.header-icon i, .footer-icon i{line-height: 40px;color:#CAB5AA;}
.header-icon img, .footer-icon img{ display: block; position:absolute; top:0; left:0;bottom:0; right:0; margin:auto; width: 25px; height: 25px;}
a.nav-close{display: none;}

.button-top, .button-down{position: fixed; display:block;bottom:35px; right: 30px; font-size: 14px;line-height: 14px; padding: 0 15px; z-index:1;opacity: 0;}
.button-top.active, .button-down.active{z-index:2; opacity: 1;}
.button-top em, .button-down em{display: block; text-align: right; white-space: nowrap; height: 70px;letter-spacing: 0.1em;margin-bottom: 5px;}
.button-top i, .button-down i{display:block;}
.sticky-footer .button-top,.sticky-footer .button-down{position: absolute;bottom:auto;top:-130px;}

.content-button-head{position:fixed;top:40px;z-index: 9;left: 190px;padding-left: 20px;margin-left: 20px;overflow: hidden;height: 0; opacity: 0;pointer-events:none;}
.content-button-head:before{content: '';position: absolute;left: 0; top:50%;margin-top: -12px;width: 1px; height: 24px; background:#fff; opacity: .5; }
body.active .content-button-head, body.sticky-head .content-button-head{height:auto;opacity: 1;pointer-events:auto;}
body.sticky-footer .content-button-head{height: 0;opacity: 0;pointer-events:none;}
body.style-light .content-button-head,body.style-light .content-button-head a{color:#43392f;}
body.style-light .content-button-head:before{ background:#9f8471;}

body.style-light .head-logo{display: none;}
body.style-light .content-logo{display: block;}
body.style-light #nav li a{color:#43392f;}
body.style-light #nav li strong:before, body.style-light #nav li strong:after{background: #9f8471;}
body.style-light #nav li > a:before{ background-image: url('../images/menu-leaf2.png');}

body.style-light #nav li em{color: #9f8471;}

body.style-light #nav .subnav a:before, body.style-light #nav .subnav a:after{background-color:#9f8471;}
body.style-light #nav .subnav a.active, body.style-light.computer #nav .subnav a:hover{ color: #fff;}
body.style-light .nav-toggle{color: #43392f;}
body.style-light .nav-toggle em{border-bottom: solid 1px #9f8471; border-top:solid 1px #9f8471;}
body.style-light .header-icon i{color: #43392f;}
/*白色top背景*/

body.style-light #nav:before{
	background:url('../images/nav-bg2.png') repeat-x left bottom;
	
	}

body.style-light .button-top, body.style-light .button-down{color: #43392f;}
.lightBox-img img{
	display:block;
	max-width:300px;
	height:auto;
	float:left;
	margin-right:10px;
	margin-bottom:1em;
}
@media screen and (max-width: 1500px) { 
.logo { width: 80px; right: 25px; top: 35px;}
#nav ul{right: 120px; top: 0;}
.nav-toggle{width: 80px; top: 105px; right: 25px;}
.nav-toggle em{letter-spacing: 0.6em; padding-left: 0.6em;}
em.text-close{letter-spacing: 0.4em; padding-left: 0.4em;}
.header-icon{left: 30px; top:30px;}
.button-top, .button-down{right: 10px;}
.content-button-head{top:30px;left: 165px;padding-left: 15px;margin-left: 15px;}
}
@media screen and (min-width: 1200px) {
body.sticky-head #nav{opacity: 1;pointer-events:auto;}
body.sticky-head #nav:before{opacity: 0; }
body.sticky-head .nav-toggle{opacity: 0;pointer-events:none;}
}
@media screen and (max-width: 1200px) { 
#nav{z-index: 15; height: 0;overflow: hidden;}
#nav ul {position: relative;margin: 0 auto;width: 90%;max-width: 500px;right: auto;top: 50%;margin-top: -130px;}
#nav li{min-height: 350px;margin-top: -40px;}
.header-icon {left: auto;top: 10px;right: 10px;}
a.nav-close{display: inline-block;}
.content-button-head {left: 30px!important;padding-left: 0;margin-left: 0;}
.content-page .content-button-head{left: 115px!important;}
.content-button-head:before{display: none;}
body.active{overflow: hidden;} 
body.active #nav li em{color: #9f8471;}
body.active #nav li a{color:#fff;}
body.active #nav li.active > a{color: #e2d3c7;}
body.active #nav li.active em{color: #e2d3c7;}
body.active #nav li strong:before, body.active #nav li strong:after{background: #e2d3c7;}
body.active #nav li > a:before{ background-image: url('../images/menu-leaf3.png');}
body.active #nav .subnav a{color: #9f8471;}
body.active #nav .subnav a:before{background-color:#9f8471; -webkit-background-image: linear-gradient( to bottom, rgba(203,174,154,1), rgba(203,174,154,0)); -moz-background-image: linear-gradient( to bottom, rgba(203,174,154,1), rgba(203,174,154,0)); -o-background-image: linear-gradient( to bottom, rgba(203,174,154,1), rgba(203,174,154,0)); background-image: linear-gradient( to bottom, rgba(203,174,154,1), rgba(203,174,154,0));}
body.active #nav .subnav a:after{background-color:#9f8471;}
body.active #nav .subnav a.active, body.active.computer #nav .subnav a:hover{ color: #43392f;}
body.active .header-icon a, body.active .header-icon i{color:#9f8471;}
body.active #header{height: 100%;}
body.active #nav{height: 100%;overflow: auto;background:url('../images/nav-bg-mobile.jpg') repeat left top;}
body.active #nav:before{display: none;}
}
@media screen and (max-width: 980px) {
.logo { width: 70px; right: 20px;top: 20px;}
.nav-toggle {width: 70px; top: 80px; right: 20px;}
.nav-toggle em{letter-spacing: 0.4em; padding-left: 0.4em;}
em.text-close{letter-spacing: 0.25em; padding-left: 0.25em;}
.button-top, .button-down{right: 0px;bottom: 20px;}
.sticky-footer .button-top,.sticky-footer .button-down{top:-110px;}
.content-page .content-button-head{top: 17px;left: 100px!important;}

.aes-box{
	position: relative;
	z-index: 2;
	top:20% !important;
	left:10%;
}
.aes-box img{
	max-height:350px!important;
	
}
/*---學院工法---*/
.waterfall {
        width: 100%;
        column-count: 2!important;
        /*欄數*/
        column-gap: 10px;
        /*每欄間隔*/
    }
/* 表格輸入文字*/ 
.contact-cc{
	display:inline-block;
	width:100%!important;
	float:left;
	margin-left:.5em;
}
.contact-c100{
	display:inline-block;
	width:100%!important;
	float:left;
	margin-left:.5em;
}
}
@media screen and (max-width: 500px) {  

.index-box{
	width:300px !important;
	left: 5%;
	right:5%;
}
#nav ul { width: 95%;max-width: 260px;top:20%;margin-top: 0;}
.nav-column{clear: both;} 
.lightBox-img img{
	display:block;
	max-width:100% !important;
	height:auto;
	float:left;
	margin-bottom:1em;
}
/*==============全部建案==================*/


.allproject2 img {
	display:block !important;
    width: 100%;
    margin-bottom: 11px;
}
.title3 img{
	width:100%;
	}
	
/*---學院工法---*/
.methood-box{
	position:absolute; 
	z-index: 9;
	bottom:15%!important;
	left:5%!important;
}
.methood-box img{
	max-height:80px!important;
	
}

#section-cc{
	min-height:420px!important;
	
	}
.waterfall {
        width: 100%;
        column-count: 1!important;
        /*欄數*/
        column-gap: 10px;
        /*每欄間隔*/
    }

.m-title{
	font-family:"標楷體";
	font-weight:700;
	font-size:1.5em;
}
}
@media screen and (max-width: 300px) {   
#nav ul {max-width: 200px;}
#nav li strong{margin: 0 5px;}
#nav li > a:before{right: 5px;}
.computer #nav li:hover .subnav, #nav li.active .subnav { width: 40px;}
#nav .subnav a{ width: 40px;line-height: 42px;}
}
@media screen and (max-width: 1200px) and (max-height: 500px){
#nav ul{top: 100px;margin-top: 0;}
}
/*============footer===============*/
.footer-grid{
	padding: 80px 0 40px 0; 
	width: 100%; 
	background: #fff;
	color:#43392f;
	}
.footer-info{
	padding: 40px 0 30px 0 ; 
	width: 100%; 
	line-height: 24px; 
	font-size: 16px;
	color:#fff;
	}
.footer-info a{
	display: inline-block;
	color:#fff;
	}
.footer-info b{
	display: inline-block;
	font-weight: normal;
	margin-right: 10px;
	margin-bottom: 10px;
	}
a.footer-logo { 
    position: relative; 
	display: block;
	float:left;
	width: 50%; 
	max-width: 180px; 
	height: auto;
	margin-left:3em;
	margin-bottom: 15px;
	}
.footer-logo img{ 
   width:100%;
   height:auto;
   }
.footer-left { 
    position: relative; 
	display: block;
	width:30%;
	float:left;
	margin-left:3em;
	margin-bottom: 15px;
	}
.footer-left img{ 
   max-width: 180px;
   height:auto;
   }
   
.footer-right { 
    position: relative; 
	display: block;
	float:left;
	width:30%;
	margin-bottom: 25px;
	}
.footer-icon{
    position: relative; 
	display: block;
	float:left;
	width:35%;
	font-size: 0;
	text-align:center;
	}
.footer-copyright {
	font-size: 12px;
	color:#D8C8C0;
	line-height: 20px;
	text-align: center;
	padding-right: 20px;
	padding-bottom: 15px;
	}
.footer-copyright a{display: inline-block; color:#ccc;}
.footer-copyright a:hover{color: #C8B18C;text-decoration: underline;}
.footer-nav{position: relative; font-size: 0; width: 90%;max-width: 1100px; margin: 0 auto;}
.footer-nav li{position: relative;float:left;width: 12.5%; text-align: center;margin-bottom: 40px;}
.footer-nav strong{position: relative; display: block; font-size: 20px; letter-spacing: 0.2em;margin-right: -0.2em; line-height: 28px;}
.footer-nav em{ display: block;font-size: 12px; letter-spacing: 0.4em;margin-right: -0.4em; color:#9f8471;padding-bottom: 15px;}
.footer-nav em.text-long{letter-spacing: 0.1em;}
.footer-nav a{position: relative; display: block;width: 100%;color:#43392f;}
.footer-subnav a{position: relative; display: block;font-size: 16px;line-height: 16px; letter-spacing: 0.1em; padding:10px 0;}
.footer-nav li.active > a:before{content: '';position: absolute; display: block;bottom:8px; left: 50%; margin-left: -20px; width: 40px;height: 1px; background:#d8cdc5;}
.footer-subnav a.active{color:#9f8471;}
.content-page #footer:before{content:'';position: absolute;width: 100%; height: 100%;background-position: center bottom;z-index: -1;}
/*============html-edit===============*/
.html-edit { line-height: 1.9em; letter-spacing: 0em; /*text-align:justify;*/}
.html-edit p{ letter-spacing: 0em;}
.html-edit a{ color:#645344; text-decoration:underline;}
.html-edit a:hover { color: #fff; background:#645344;text-decoration:none;}
.html-edit img { max-width: 100%; height:auto !important; }
.html-edit li { list-style: outside; margin-left: 30px; }
.html-edit ul li { list-style-type: disc; }
.html-edit ol li { list-style-type: decimal; }
.html-edit iframe{ width: 100%; max-width: 100%;}
.html-edit h1, .html-edit h2, .html-edit h3, .html-edit h4, .html-edit h5, .html-edit h6{display: inline-block;}
.html-edit strong{font-weight: bold;}
.html-edit span{display: inline;}
/*.html-edit p{line-height: 1.75em;}*/
/*============load===============*/
.wrapper{
	opacity: 0;
	opacity:1\9\0;
	-webkit-transition: opacity 500ms ease-in;
	 -o-transition: opacity 500ms ease-in; 
	 -moz-transition: opacity 500ms ease-in; 
	 transition: opacity 500ms ease-in;
	 }
body.cc2 .wrapper{opacity: 1;}
/*============main===============*/
.header-box{
	position: relative;
	width: 100%;
	}
.img-bg { 
     position: fixed !important; 
	 top: 0; 
	 left: 0; 
	 height: 100% !important; 
	 width: 100%; 
	 overflow: hidden; z-index: 0;
}
.img-bg .img-bg-box,.full-box .img-box{ 
     position: relative; 
	 top: 0; 
	 left: 0; 
	 height: 100%; 
	 width: 100%; 
	 background-position: center center; 
	 background-size: cover; }

.full-box{
	position:fixed; 
	left: 0; 
	top:0; 
	height: 100%; 
	width: 100%;
	overflow: hidden;
	background: url('../images/loader.gif') no-repeat center center #43392f;
}

.full-box-2{
	position: absolute;
	left: 0; 
	top:0; 
	height: 100%; 
	width: 100%;
	overflow: hidden;
	background: url('../images/loader.gif') no-repeat center center #43392f;
}
.header-box:after{
	content: ''; position: absolute; 
	left: 0; 
	top:0; 
	width: 100%;
	height: 350px; 
	background:url('../images/mask-top.png') repeat-x left bottom;
	z-index: 1;
	pointer-events:none;
	}
.full-box:before,.header-box .video-box:before{
	content: '';
	position: absolute; 
	left: 0; 
	top:0; 
	height: 100%; 
	width: 460px; 
	
	z-index: 1;
	pointer-events: none;
	}


.header-box .video-box{position:fixed !important; left: 0; top:0; height: 100% !important; width: 100%;padding-bottom: 0 !important;}
/*拖拉背景顏色*/

/*乳白色顏色*/
#section-header:before{
	content: ''; 
	position: fixed; 
	left: 0; 
	top:0; 
	width: 100%;
	height: 100%;
	background:url(../images/news_head.jpg) #6F1610 left top repeat-y ;
    background-size:cover;
	opacity: 0.95;
	z-index: 1; 
	pointer-events:none;
	}
	
	
	/*牆壁背景顏色顏色*/
#section-header-2:before{
	content: ''; 
	position: relative; 
	left: 0; 
	top:0; 
	width: 100%;
	height: 100%;
	background:url(../images/news_head.jpg) #6F1610 left top repeat-y ;
	opacity: 0.95;
	z-index: 1; 
	pointer-events:none;
	}
.sticky-head #section-header:before{opacity: 0;}


#section-cc{
	display:block;
    position: relative;
	left: 0; 
	top:0; 
	width: 100%;
	min-height:700px;
	
	}
#section-cc2{
	display:block;
    position: relative;
	left: 0; 
	top:0; 
	width: 100%;
	min-height:700px;
	
	}
#section-con{
	display:block;
    position: relative;
	background:#FFF;
}

.owl-carousel .full-box{position: relative;}
.grid-container, .grid-container-small{position: relative; display: block;margin-left:auto;margin-right: auto;width: 75%; padding-top: 120px; padding-bottom: 130px;}
.grid-container.no-top{padding-top: 0px;}
.grid-container-small{margin-top: 100px; margin-bottom: 100px;padding-bottom: 0; padding-top: 0;}
.section-box:first-child .grid-container-small{margin-top: 0; padding-top: 100px;}
.content-page .grid-container{padding-top: 275px;}

/*======學院美學====*/
.text-left2 img{
	padding-left: 8%; 
	
	margin-right: 50px;
	}
.text-left2{
	padding-right: 15% !important;
}

.text-right2 img{
	padding-left: 8%; 

	}
.text-right2{
	padding-right: 10% !important;
}

@media screen and (max-width: 768px) {
.text-right img{
	padding-right: 10%; 
	margin-left: 10%;
	}
.text-left img{
	padding-left: 10%; 
	margin-right: 10%;
	}
.text-left2 img{
	padding-left: 0%; 
	margin-right: 10%;
	}
.text-right2 img{
	margin-right: 10%; 
	padding-left: 0%;
	}
	
.methood-box{
	position:absolute; 
	z-index: 9;
	bottom:20%;
	left:5%;
}
.methood-box img{
	max-height:100px;
	
}
.allproject img {
	display: block;
    width: 140px;
	height:144px;
	margin: auto!important;
	margin-left:-8px !important;
	margin-bottom:12px !important;
	padding-left: 0 !important;
}
}
.content-page .aes-container{margin-top:7em;}
.content-page .aes-container img{
	vertical-align:top;
}
.aes-box{
	position:absolute; 
	z-index: 2;
	bottom:15%;
	left:10%;
}
.aes-box img{
	max-height:500px;
	
}
.methood-box{
	position:absolute; 
	z-index: 9;
	bottom:50%;
	left:5%;
}
.methood-box img{
	max-height:120px;
	
}
.title-box{position:absolute; z-index: 2;color: #fff;top:50%; margin-top: -150px;left: 4%;padding-left: 140px;}
.title-text{position: absolute;left: 0; bottom: -20px;display: block;font-size:30px; line-height: 65px;text-align: center; width: 125px;padding-top: 5px; height: 130px;background-image:url('../images/title-illustration3.png'); background-repeat:no-repeat; background-position:center center;background-size: contain;}
.title-text-style2{background-image: url('../images/title-illustration2.png');}
.title-text span{display: inline-block; letter-spacing: 0.4em;}
.title-text em{position: absolute; font-size:18px;line-height: 18px;letter-spacing: 0.05em; white-space: nowrap;width: 100%;left: 0; top:50%;margin-top: -6px;}
.title-box .text-ver{float: left;font-size: 18px; line-height: 40px;letter-spacing: 0.4em;-moz-text-shadow:1px 1px 20px #000; -webkit-text-shadow:1px 1px 20px #000; text-shadow: 1px 1px 20px #000;}
.title-img{position: absolute;left: 40px; bottom: 10px;display: block;width: 50px;}
.title-img img{width: 100%; height: auto;}
.subtitle-box{position: relative; width: 100%; text-align: center;}

.subtitle-box img{
	max-height: 300px; 
	width: auto;
	margin-bottom: 11px;
	}

.subtitle-text{font-size:1.125em;letter-spacing: 0.3em;line-height: 1.5em;margin-top: 8px;margin-bottom: 15px;}
.subtitle-line{padding-bottom: 50px; }
.subtitle-line:before{content:'';position: absolute; display: block;left: 50%; bottom:0; width:1px; height: 50px; background:#fff; }
.bg-light .subtitle-line:before{background:#43392f;}

.content-title{position: relative; display: block;}
.header-box .content-title{position: absolute;top: 140px;left: 60px; max-width: 50%;z-index: 2;}
.content-title em{position:relative;letter-spacing: 0;float: left;}
.grid-container .content-title em{color:#9f8471;}
.content-tag{ display: block;float: left;margin-left: 15px;}
.content-tag strong{display: block;font-size: 16px;line-height: 24px; letter-spacing: 0.4em;margin-right: -0.4em;}
.content-tag em{display: block;font-size: 12px;line-height: 12px;-ms-transform: scale(0.9); -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9);transform-origin: top left;}
.content-button{position: relative;float: right; color:#9f8471;}
.content-button a{color:#9f8471;}

.text-box{ position:relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.grid-item{ position:relative; display:block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} 
.flex-center-center{display: flex; align-items: center; justify-content: center;}
.flex-bottom{display: flex; align-items: flex-end;}
.animated-list .grid-item a{display: block;}
.item-3{width:105%;margin-bottom: -4%;}
.item-3 .grid-item{ width:28.3%; margin:0 5% 0% 0; float:left; min-height: 720px;}
.item-4{width:106%;margin-bottom: -5%;}
.item-4 .grid-item{ width:19%; margin:0 6% 5% 0; float:left;}
.item-5{width:105%;margin-bottom: -4%;}
.item-5 .grid-item{ width:15%; margin:0 5% 4% 0; float:left;}
.item-4.item-small{width:103%;margin-bottom: -4%;}
.item-4.item-small .grid-item{ width:22%; margin:0 3% 4% 0; float:left;}
.item-6{width:101%;margin-bottom: -3%;}
.item-6 .grid-item{ width:15.6%; margin:0 1% 3% 0; float:left;}
.item-left{margin-right: -25px;}
.item-left .grid-item{float:left;margin:0 0 40px 0;padding: 0 25px; max-width: 100%; border-left: solid 1px rgba(159,132,113,.3);}
.item-list em, .item-list h3{color:#9f8471;}
.item-list em{letter-spacing: 0;}
.item-4.item-small h3{color:inherit;}
.item-4.item-noimg .grid-item h2{margin-bottom:-20px; }
.item-list .img-box{margin-bottom: 10%;background-image: url('../images/no-img.png');}
.item-3 .img-box{margin-bottom: 25px;}
.img-list .grid-item{padding:0 6px 6px 0; float:left;}
.img-list.img-column-2, .img-list.img-column-3, .img-list.img-column-4, .img-list.img-column-5{margin-right: -6px;}
.img-list.img-column-2 .grid-item{ width:50%;}
.img-list.img-column-3 .grid-item{ width:33.3%;}
.img-list.img-column-4 .grid-item{ width:25%;}
.img-list.img-column-5 .grid-item{ width:20%;}
.icon-new em, .icon-hot em{position: relative;display: inline-block;}
.icon-new em:after, .icon-hot em:after{position: absolute;top:5px;right: -55px; content: 'NEW'; display: block; background-color:#9f8471; color:#43392f; font-size:12px;line-height: 12px;padding: 4px 10px; font-weight: bold;letter-spacing: 1px;border-top-left-radius: 15px;border-bottom-right-radius: 15px;-webkit-background-image: linear-gradient( to bottom, rgba(255,255,255,.2), rgba(255,255,255,0)); -moz-background-image: linear-gradient( to bottom, rgba(255,255,255,.2), rgba(255,255,255,0)); -o-background-image: linear-gradient( to bottom, rgba(255,255,255,.2), rgba(255,255,255,0)); background-image: linear-gradient( to bottom, rgba(255,255,255,.2), rgba(255,255,255,0));}
.icon-hot em:after{content: 'HOT'; background-color:#cb2d2d; } 
.img-radius .img-box{ border-top-left-radius: 50%;border-bottom-right-radius: 50%;}
.img-shadow .img-box{-moz-box-shadow:3px 3px 10px rgba(0,0,0,0.15); -webkit-box-shadow:3px 3px 10px rgba(0,0,0,0.15); box-shadow: 3px 3px 10px rgba(0,0,0,0.15);}

.text-more{position:relative;padding-bottom: 0px;}
a.text-more, a .text-more{display: block; padding-bottom: 30px;}
.text-more:after{ content:'MORE'; position:absolute;display: none;left: 0px;bottom: 0;width: 100%; font-size: 12px;line-height: 12px;letter-spacing: 0.3em; }
a.text-more:after, a .text-more:after{display: block;}
a.text-more:hover:after, a:hover .text-more:after{letter-spacing: 0.6em;}
.text-more.right:after{text-align: right;}
.text-year{font-size:1.875em;line-height:0.9em;display: inline-block;text-align: center;}
.text-year small{font-size: 12px;line-height: 20px; display: block; letter-spacing: 1.2em; margin-right: -1.2em; -ms-transform: scale(0.8); -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8);}
em.text-year-big{position: relative; display:block;text-align: center;margin: 0 auto;margin-top: 10px;width: 60px;font-size: 48px; line-height: 36px;padding: 15px 5px 10px 5px; color: #43392f;background-color: #9f8471;-webkit-background-image: linear-gradient( to bottom, rgba(255,255,255,.2), rgba(255,255,255,0)); -moz-background-image: linear-gradient( to bottom, rgba(255,255,255,.2), rgba(255,255,255,0)); -o-background-image: linear-gradient( to bottom, rgba(255,255,255,.2), rgba(255,255,255,0)); background-image: linear-gradient( to bottom, rgba(255,255,255,.2), rgba(255,255,255,0)); border-top-left-radius: 40px;border-bottom-right-radius: 40px;}
.text-year-big small{font-size: 12px;line-height: 20px; letter-spacing: 0.4em;display: block;font-weight: bold; margin-right: -0.4em;}
em.text-year-big:before{content: '';position: absolute;top:25px; right: -50px; width: 62px; height:75px;background-image: url('../images/year-leaf2.png');background-repeat: no-repeat; background-position: left bottom; background-size: contain;}
.text-month-group{ font-size: 1.875em;line-height: 0.9em;letter-spacing: 0;margin-left: -10px;}
.text-month-group span{display: inline-block; padding:0 10px; border-right: solid 1px #9f8471;margin-bottom: 5px;}
.text-month-group span:last-child{padding-right: 0; border-right:none;}
.text-month-group small{display: inline-block;font-size: 0.5em;line-height: 1.1em;}
.text-month-group small.text-vertical{font-size: 0.4em;}
.text-month-group.group-vertical{line-height: 1.1em;margin-top: 0.2em; margin-bottom: 0.2em;margin-left:0;}
.text-month-group.group-vertical span{display:block; border-right:none;padding:0;margin-bottom: 0;text-align: center;}
.text-month-group.group-vertical .month{font-size: 1.5em;}
.text-month-group.group-vertical .volum{font-size: 0.9em;}
.text-volume{position: relative; font-size: 30px;line-height: 34px;}
.text-volume span,.text-volume big,.text-volume strong{display: block;clear: both;}
.text-volume big{position: relative;font-size: 1.3em;line-height: 0.8em;float: left;}

.text-volume big:before{content: '';position: absolute;left: 105%; bottom: 4px; width: 20px;height: 20px;background:url('../images/ebook-number.png') no-repeat left top;background-size: contain;}

.text-volume strong{font-size: 0.5em;letter-spacing: 0.1em;line-height: 1.2em;}
.text-date{letter-spacing: 0;line-height:1em; margin-top: 0.1em;}
.text-date big{display: block;}
.text-date small{display: block;font-size: 0.88em;}
.text-date-group{ display: block;letter-spacing: 0;line-height:1.3em;/*padding-top: 10px;*/}
.text-date-group span{position: relative; display: inline-block;}
.text-date-group small{font-size: 0.5em;position: absolute;line-height: 0.5em;bottom: 100%;left: 0;}
.text-date-group span:nth-child(2),.text-date-end{margin-left: 28px;padding-left: 2px;}
.text-date-group span:nth-child(2):before, .text-date-end:before{content: ''; position: absolute;display: block;right:100%; top:50%; width: 25px;height: 1px;background: #9f8471;}
.text-date-end{position: relative; display: inline-block;margin-left: 20px;padding-left: 5px;}
.text-date-end:before{ width: 15px;background: #fff;}
.bg-light .text-date-end:before{background:#43392f;}
.header-box .text-date-group span:nth-child(2):before{background: #fff;}
.text-date-group.group-vertical{padding-top: 0px;}
.text-date-group.group-vertical span{display: block;}
.text-date-group.group-vertical span:nth-child(2){margin-left: 0;margin-top:18px; }
.text-date-group.group-vertical span:nth-child(2):before{right:15%; top:auto;bottom:100%;width: 1px;height: 20px;}
.number-list li{position: relative;counter-increment: li; padding: 2px 0 2px 28px;}
.number-list > li:before {width: 20px; height: 20px; line-height: 20px; font-size: 14px;font-weight:bold; position: absolute;top: 7px; left: 0; content: counter(li); color: #ffffff; display: block; text-align: center;background-color: #9f8471; -webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}

.info-list{position: relative; width: 100%;overflow: hidden;border-bottom: solid 3px rgba(159,132,113,.3);border-top: solid 3px rgba(159,132,113,.3);}
.info-list li{ position: relative; display: block; line-height: 1.5em;min-height: 1.5em;letter-spacing: 0.05em; padding: 8px 0 8px 4.7em;border-bottom: solid 1px rgba(159,132,113,.3);}
.info-list.info-title{border-top:none;margin-top: -8px;}
.info-list.info-title li:first-child{padding-left: 0;}
.info-list.info-title li:first-child strong{position: relative; display:inline-block; color:#9f8471;}
.info-list.info-title li:first-child strong:before{content: ''; position: absolute;bottom: 15px; left: 100%;margin-left: 10px; width:1500px;height: 3px; background:#9f8471; opacity: 0.3;}
.info-list small{position: absolute; display: block;top:9px; left: 0; color:#9f8471;font-size: 1em;}
.info-list a:hover{color:#9f8471;}
.info-list i{ display: none;}
.info-list a i{display: inline-block;margin-left: 5px;width: 25px; height: 25px;font-size: 15px;text-align: center; color:#43392f;background-color:#9f8471;border-top-left-radius: 50%;border-bottom-right-radius: 50%;}
.info-list a i:before{line-height: 25px;}
.bg-light .info-list a i{color:#fff;}
.text-list li{position: relative; display: block;}
.text-list strong{display: block; font-size: 1.25em;letter-spacing: 0.05em;line-height: 1.5em;}
.text-list p{display:block;padding-bottom: 15px; margin-bottom: 15px;}
.text-list em{position: absolute; display:block;left: 0; top: 0; color:#9f8471;font-size:24px;}
.text-list p span{display:inline-block;}
.text-list p span:first-child{display: inline;}
.text-list.type-year li{padding-left:65px; }
.text-list.type-year li em{width: 65px;}
.text-list.type-year p{border-bottom: solid 1px rgba(159,132,113,.3);}
.text-list.body-font strong{ font-family:"Lato", Arial, Helvetica, "微軟正黑體", "Microsoft JhengHei", "儷黑 Pro", "LiHei Pro", sans-serif; font-weight: bold; }
.dot-list li:before{content:'';position: absolute;display: block; left: 10px;top: 12px; width: 6px;height: 6px; background-color: #645344; -webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}
.list-style-none:before{display: none;}

/*--學院工法--*/
.waterfall {
        width: 100%;
        margin: 0px auto;
        column-count: 3;
        /*欄數*/
        column-gap: 10px;
        /*每欄間隔*/
    }

.item {
	background:#FFF;
        padding: 5px;
        box-sizing: border-box;
		margin-bottom:20px;
        break-inside: avoid;
        /*定義頁面、列或是區域發生中斷時的元素表現方式。 auto->元素中斷、acoid->元素不中斷*/
   }
.item img {
        width: 100%;
		padding-top:10px;
		padding-bottom:10px;
        object-fit: cover;
        object-position: 50% 50%;
  }
	 
.img-caption{ position:absolute; display:block; bottom:0; font-size:0.95em; line-height: 1.4em; color:#fff; z-index:1; left:0; padding: 0 10px; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: left;}

.img-box,.img-over-box{ 
 position:relative; 
 display: block;
 overflow:hidden;
 }
.img-box{background-position: center center; background-repeat: no-repeat; background-size:cover; }
.img-ratio56{padding-bottom:56.25%; }
.img-ratio66{padding-bottom:66%; }
.img-ratio150{padding-bottom:150%; }
.img-box img,.img-over-box img{ width:100%; height:auto;}
.img-box img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;}
.img-box.height img{ width:auto; height:100%; }
a.video .img-box:before, a.video .img-over-box:before, .justified-gallery .video:before{ content:''; background: url(../images/icon-video.png) center center no-repeat; position:absolute; display:block; height:100%; width:100%; z-index:1;}

.back-box{ position: absolute; display: block; top:0; left: 0; width: 100%; height: 100%; filter: alpha(opacity=0); opacity: 0; z-index:1; background:#645344;padding: 10% 7%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
a:hover .back-box, .back-box.active{ color: #fff; filter: alpha(opacity=100); opacity: 1;}
.back-box:before{content: 'READ\aMORE';white-space: pre;position: absolute; right: 7%; bottom: 7%;font-size: 12px;line-height: 12px;background: url('../images/button-leaf1.png') center left no-repeat;background-size: contain;padding: 40px 0 0 40px;}
.vertical-box, .icon-box, .more-box{ position: absolute; display:block; top: 0px; right: 0; bottom: 0; left: 0; margin: auto; height: 60px; color:#fff; filter: alpha(opacity=0); opacity: 0; text-align:center;z-index: 2;}
.icon-box{ width:50px; height: 50px; background:#9f8471; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%;}
.more-box{ height: 47px; width:60px;padding-top: 13px;font-size: 15px;line-height: 17px;letter-spacing: 0.05em; background:#9f8471; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%;}
a:hover .vertical-box, a:hover .icon-box, a:hover .more-box{ filter: alpha(opacity=100); opacity: 1;}
.img-box i, .img-over-box i, .img-list i{display:block;font-size:24px;line-height: 50px;height: 50px;z-index: 1;}
.img-box big, .img-over-box big{display:block;font-size:26px; line-height: 26px;letter-spacing: 0;margin-top: -5px;}
.computer-img{ display:block; opacity: 1 !important;}
.mobile-img{ display:none; opacity: 0 !important;}
/*============button===============*/
.underline b, .underline strong{position: relative;display:inline-block;font-weight: normal;}
.underline b:before, .underline strong:before{ position: absolute; content: ''; display: block; height: 1px; width: 0px; bottom: 0px; left: 50%; background-color:#645344; z-index: 1; }
.underline a:hover{color:#645344;}
.underline.left a b:before, .underline.left a strong:before{ left: 0;}
.underline a:hover b:before, .underline a:hover strong:before, .underline a.active b:before, .underline a.active strong:before, a:hover .underline strong:before, a:hover .underline b:before, a.underline:hover b:before, a.underline:hover strong:before{width: 100%; left: 0%;}
.border-line a{overflow: hidden;}
.border-line a:before, .border-line a:after{content: ''; position: absolute; border: solid 1px transparent; width: 0; height: 0;}
.border-line a:before, .border-line a:hover:before{left: 0; top:0;}
.border-line a:after, .border-line a:hover:after{right: 0; bottom: 0;}
.border-line a:hover:before, .border-line a:hover:after{ width: 100%; height: 100%;}
.border-line a:hover:before{ border-top: solid 1px #645344; border-left: solid 1px #645344;}
.border-line a:hover:after{ border-bottom: solid 1px #645344; border-right: solid 1px #645344;}

.category-list{position: absolute;top:-25px; right: 0;}
.category-list a{ position:relative; display:block;float: right; padding: 25px 0 0 0;line-height: 0;width: 50px;}
.category-list a:before{ position: absolute; content: ''; display: block;top:0px;left:50%; margin-left: -7px; width: 15px; height: 15px;background-image:url('../images/category-leaf.png'); background-repeat: no-repeat; background-position:right bottom; background-size: contain;opacity: 0;}
.category-list a.active:before{opacity: 1;}
.category-list b{display:inline-block;font-size: 16px;line-height: 50px;font-weight:500; letter-spacing: 0.3em;}
.category-list em{display: block;font-size: 16px; line-height: 30px;color: #9f8471;}

.button-icon a, a.button-icon, a .button-icon{ position: relative;display: block;float: left; width: 40px; height: 40px; text-align:center; font-size:26px;line-height: 40px;overflow: hidden;}
.button-icon a i:before, a.button-icon i:before, a .button-icon i:before{line-height:40px; }

.button-icon-text{position: relative;font-size: 0;line-height: 0;margin-left: -13px;}
.button-icon-text li{position: relative; display:block;float: left;}
.button-icon-text li:before{content: '';position: absolute; right: 0;top:50%;margin-top:-10px;width: 1px;height: 20px; background: #9f8471; }
.button-icon-text li:last-child:before{display: none;}
a.button-icon-text, .button-icon-text a{position: relative; display:inline-block; font-size:16px;line-height:20px;letter-spacing:0.05em;padding: 11px 13px 11px 38px;}
a.button-icon-text i, .button-icon-text a i{position: absolute;top:8px; left: 10px; font-size:24px;}
a.button-icon-text i.icon, .button-icon-text a i.icon{top:11px; left: 13px;font-size:20px;}

.button-text, .share-button{position: relative; display:block;font-size: 0;}
.share-button{float: left;}
a.button-text, .button-text a{position: relative; display:inline-block; font-size:16px;line-height:35px;height:35px; padding: 0 10px 0 10px;white-space: nowrap;}
a.button-text, .button-text a, .share-button a{color:#43392f;background-color:#9f8471; -webkit-background-image: linear-gradient( to bottom, rgba(203,174,154,1), rgba(203,174,154,0)); -moz-background-image: linear-gradient( to bottom, rgba(203,174,154,1), rgba(203,174,154,0)); -o-background-image: linear-gradient( to bottom, rgba(203,174,154,1), rgba(203,174,154,0)); background-image: linear-gradient( to bottom, rgba(203,174,154,1), rgba(203,174,154,0)); border-top-left-radius: 20px;border-bottom-right-radius: 20px;}
.bg-light a.button-text, .bg-light .button-text a, .bg-light .share-button a{color:#fff;}
.button-text em{font-size: 12px;letter-spacing: 3px;}
.share-button a{ position: relative; float:left; display:block;margin-right: 8px; font-size:24px;line-height:40px; width:40px; height:40px; text-align:center;}
.share-text{display: block; float:left;margin-right: 8px;font-size: 12px; line-height: 14px; width:40px; height:32px;padding-top: 8px; text-align:center;color:#9f8471;border: solid 1px #9f8471; border-top-left-radius: 20px;border-bottom-right-radius: 20px;}
.button-illustration{display: block;font-size:24px; line-height: 30px;text-align: center; width: 120px;padding-top: 20px; height: 100px;background-image:url('../images/title-illustration.png'); background-repeat:no-repeat; background-position:center center;background-size: contain;}
.button-illustration em{display: block;font-size: 12px; line-height: 16px;letter-spacing: 0.4em;margin-right: -0.4em;}
.social-facebook{ background:#3b5998;}
.social-twitter{ background:#1da1f3;}
.social-line{ background:#00b900;}

/*============頁面===============*/
.page { width: 120%;margin-left: -10%; clear: both;text-align: center; font-size: 0;}

.page a {
	position: relative; 
min-width:40px; 
height: 40px; 
line-height: 40px; 
display: inline-block;
text-align: center;
font-size: 18px;
color:#9f8471;
background-color:transparent; 
border-radius:50%;
}
.page a.active{color:#43392f;background-color:#9f8471;-webkit-background-image: linear-gradient( to bottom, rgba(203,174,154,1), rgba(203,174,154,0)); -moz-background-image: linear-gradient( to bottom, rgba(203,174,154,1), rgba(203,174,154,0)); -o-background-image: linear-gradient( to bottom, rgba(203,174,154,1), rgba(203,174,154,0)); background-image: linear-gradient( to bottom, rgba(203,174,154,1), rgba(203,174,154,0));}
.page i{font-size: 20px;vertical-align: sub;}

/*==============首頁==================*/
.index{
	/*background-image:url('../images/index-bg.jpg');*/
	background:#4D4D4D;
	background-repeat: no-repeat; 
	background-position: center center; 
	background-size: cover;
	}
.index.computer, .computer .index-section{background-attachment: fixed;}

/*============幻燈片文字的間距============*/
.slider-text{ 
	writing-mode: lr-tb; 
	-ms-writing-mode: lr-tb; 
	-webkit-writing-mode: horizontal-tb; 
	-moz-writing-mode: horizontal-tb; 
	-ms-writing-mode: horizontal-tb; 
	writing-mode: horizontal-tb;
	write-space: pre-wrap;
	/*white-space: nowrap;*/
}

.index-box{
	position: absolute;
	 left: 5%;
	 bottom: 120px;
	 max-height: 70%;
	 color:#fff;
	 -moz-text-shadow:1px 1px 15px rgba(0,0,0,.8); 
	 -webkit-text-shadow:1px 1px 15px rgba(0,0,0,.8); 
	 text-shadow: 1px 1px 15px rgba(0,0,0,.8);z-index: 1;
	 }
/*.index-box:before,.index-box::after{*/
.index-box::before {
	content:'';
	position: absolute;
	display: block; 
	right: 97%;
	top:-30%; 
	width: 2px;height: 25%;
	background: #fff;
	}
.index-box::after{
	content:'';
	top:auto;bottom: 0;
	right: auto; 
	left: 5px;
	height: 20px;
	}
.index-box h1{
	font-size: 2.25em; 
	line-height: 1.3em;
	margin-bottom:30px;
	
	}
.index-box h1+h2{margin-right: 20px;}
.index-box h2{font-size: 1.5em;line-height: 1.3em;letter-spacing: 0.1em;text-align: right;} 
.index-box .text-more{ padding-bottom: 0;padding-left: 20px;}
.index-box .text-more:after{width: auto;bottom: 25px;}
.video-full a{position:static!important;}
.index-section{position: relative;background-repeat: no-repeat; background-position: center center; background-size: cover;}
.index-portfolio-list .img-box{padding-bottom: 56.25%;border-top-left-radius: 100px;border-bottom-right-radius: 100px;}
.index-portfolio-list .img-box:before{content: '';position: absolute;bottom: 0;left: 0;width: 100%; height: 50%;z-index: 1; -webkit-background: linear-gradient( to bottom, rgba(0,0,0,0), rgba(0,0,0,.4)); -moz-background: linear-gradient( to bottom, rgba(0,0,0,0), rgba(0,0,0,.4)); -o-background: linear-gradient( to bottom, rgba(0,0,0,0), rgba(0,0,0,.4)); background: linear-gradient( to bottom, rgba(0,0,0,0), rgba(0,0,0,.4));}
.index-portfolio-list .text-box{padding-left: 50px;}
.index-portfolio-list .text-box:before{content:'';position: absolute;width: 45px;height: 76px;left: 0;top:-30px; background:url('../images/year-leaf1.png') no-repeat left center;background-size: contain;}
.index-portfolio-list em{float: left;margin-right: 5px;}
.index-portfolio-list .title2{line-height: 1em;margin-bottom: 0em;}
.index-news{background-image:url('../images/index-news.jpg');background-position: center top;}
.index-news .grid-container{max-width: 1280px;}
.index-news .subtitle-box{position: relative;float: left;width: 22%; margin-left: 8%;}
.index-news .index-news-list{width: 70%;float: left;}
.index-news-list .grid-item{margin-bottom: 4%;clear: both;}
.index-news-list em{float: left;margin-right: 15px;}
.index-about{ background-image:url('../images/index-about2.jpg'); background-position: center top;}
.index-about .text-box{position: absolute;left:80px;top:80px;}
.index-about .subtitle-box{position: absolute;right:70px;bottom:40px;width: auto;}
.index-ebook-list .img-box{padding-bottom: 128%;}
.index-ebook .text-box{text-align: center;/*display: inline-block;*/}
.index-ebook .text-more{display: inline-block;}
.index-report{background-image:url('../images/index-report.jpg'); }
.index-report .text-box{text-align: justify;max-width: 840px;margin: 0 auto;padding: 50px 60px; background: #645344;border-top-left-radius: 120px;border-bottom-right-radius: 120px;min-height: 200px;}
.index-report .text-month-group{float: left;padding-right: 4%; margin-right: 4%;border-right: solid 1px rgba(255,255,255,.3);}
.index .project-list .grid-item { margin-bottom: 0px;}
.index .project-text{ margin: 60px 0;}
.index .project-list .text-box {padding: 0 3%!important;}
@media screen and (min-width: 1500px){
.index .project-list .grid-7-12 { width: 70%;}
.index .project-list .grid-5-12 { width: 30%;}
}
@media screen and (min-width: 1200px){
.index .section:nth-child(even) .project-list .grid-7-12{ float: right;}
}
@media screen and (min-width: 1200px) and (min-height: 650px){
.section .grid-container{padding: 0;}    
.index-news .index-news-list{margin-bottom: 150px;}
.section.header-box .owl-carousel:hover .owl-next{right:40px;}
}
/*==============about==================*/
.about .full-box .img-box{background-image:url('../images/about-head.jpg'); }
.illustration{height: auto;}
#about-section1 {text-align: center;}
#about-section1 .img-box{height: 560px;}
#about-section1 p{max-width: 540px; margin-left: auto; margin-right: auto;text-align: center;}
#about-section2 h1{float: left;margin-right: 4%;}
#about-section2 p{float: left;width:50%;max-width: 710px;}
#about-section3 .img-over-box{float: right;width: 90%;max-width: 1100px;}
#about-section3 h1{float: left;margin-right: 4%;}
#about-section3 p{float: left;width:65%;max-width: 530px;}
#about-section3 .text-box{float: right;width:100%;max-width: 900px;}
#about-section3 .illustration{position: absolute; width: 70%;right: 95%;top: -65%;}
#about-section4 .text-box{float: right;width:60%;max-width: 900px;padding-right: 170px;}
#about-section4 .illustration{position: absolute; width:200px;right: -50px; bottom: 0;}
#about-section4 .img-over-box{float: left;width: 33%;margin-right: 8px;}
#about-section4 .img-over-box:first-child{margin-top: 5%;}
.about-service-list{position: absolute; width: 25%; max-width: 300px;right: 3%;top:10%;}
#about-section5 p.box-bottom2{max-width: 540px;}
#about-section6 .img-over-box{float:right;width: 35%; max-width: 460px;margin-right: 8px;}
#about-section6 .text-box{float: left;width: 104%;}
#about-section6 p{float:left;width: 46%; margin-right: 4%; max-width: 540px;}
#about-section7 .illustration{width:100%;max-width: 320px;}
#about-section7 .img-over-box,#about-section7 .text-box{float: left;width: 50%;}
#about-section7 .text-box{padding-top: 5%;padding-left: 7%;}
#about-section7 p{text-align:left;}
#about-section7 .button-illustration{position: absolute; right: 0;top:0;}
#about-section2 .text-more,#about-section3 .text-more {padding-bottom: 60px;}
/*==============news==================*/
.news .full-box .img-box{background-image:url('../images/news_head.jpg'); background-position: left center;}
.news .item-list .img-box{margin-bottom: 0;margin-top: 10%;padding-bottom: 66.6%;}
/*.news .item-list .img-box{ border-top-left-radius: 120px;border-bottom-right-radius: 120px;}*/
.news-content #footer:before{ background-image:url('../images/news-head2.jpg');}
.news-content .content-title em{float: none;}
.news-content .content-tag em{letter-spacing: 0.2rem;;}

/*==============學院工法==================*/
.news2 .full-box .img-box{background-image:url('../images/project-head.jpg'); background-position: left center;}
.news2 .item-list .img-box{margin-bottom: 0;margin-top: 10%;padding-bottom: 66.6%;}
/*.news .item-list .img-box{ border-top-left-radius: 120px;border-bottom-right-radius: 120px;}*/
.news-content2 #footer:before{ background-image:url('../images/project-head2.jpg');}
.news-content2 .content-title em{float: none;}
.news-content2 .content-tag em{letter-spacing: 0.2rem;;}

/*==============學院工法==================*/
.project .full-box .img-box{background-image:url('../images/project-head.jpg'); }
.project-list{position: relative;}
.project-list .grid-item{margin-bottom: 100px;}
.project-list .grid-item:last-child{margin-bottom:0;}
/*隱藏高度限制*/
.project-list .img-box{padding-bottom: 99.9%;}
.project-list.img-radius .img-box{border-top-left-radius: 20%;border-bottom-right-radius: 20%;}

.project-text{
	color:#333;
	/*overflow: hidden;*/
}
.text-left img{ margin-bottom:10%;}

.text-left2 img{ margin-bottom:15%;}

.text-right img{ margin-bottom:10%;}

.text-right2 img{ margin-bottom:15%;}


.project-text h1{float: left; margin-right: 7px;max-width: 100%;}
.project-text h2{float: left;max-width: 100%;}

.project-content.content-page {background-image:url('../images/project-head2.jpg');}
.project-content .img-list{margin: 6px 0;}
.project-content .section-box:first-child .img-list{margin-top: 0;}
.project-content .section-box:last-child .img-list{margin-bottom: 0;}
@media screen and (min-width: 1200px) {
.project-list .text-right{padding-right: 5%; margin-left: 10%;}
.project-list .text-left{padding-left: 5%; margin-right: 10%;}


.project-list .img-box.full-height {padding-bottom: 0;}
.project-list .full-height{min-height: 500px;}
/*.project-text p{max-height: 180px;overflow: hidden;}*/
}
@media screen and (max-width: 1200px) {
.project-list .text-box.grid-height{margin-top: 50px;}
.project-list .grid-item{margin-bottom: 80px;}
.project-list .full-height{height: auto!important;}
}
.logo-box img{height: auto;width: auto;max-width: 250px;max-height: 250px;}
.add-info{position: relative;display:inline-block;overflow: hidden;padding-top: 23px; margin-left:-12px; margin-right:-12px;}
.add-info:before{content: '';position: absolute; left:80px;top:10px;width: 100%;height: 1px; background: #9f8471; }
.add-info:after{content: '';position: relative;display: block; clear: both;width: 100%;height: 1px; background: #9f8471;margin-left: 12px; }
.add-info li{position: relative; float: left;display:block;}
.add-info li:before{content: '';position: absolute; right: 0;top:5px;width: 1px;height: 20px; background: #9f8471; }
.add-info li:last-child:before{display: none;}
.add-info a{display: inline-block;}
.add-info strong{display: inline-block;padding: 2px 12px 10px 12px;letter-spacing: 0.05em;}
.add-info li:first-child strong{padding-bottom: 0;}
.add-info small{position: absolute;left:12px;top:0px; font-size: 14px;letter-spacing: 0.1em;}
strong.text-tel{font-size:18px;}

.section-box .html-edit{float:right;width: 100%;}
.section-box .text-box{ float: left;width: 32%;}
.section-box .text-box+.html-edit{width: 65%;}
.section-box.no-html-edit .text-box{width: 100%;}
.contact-box{position: relative;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.contact-box #contact{position: relative; z-index: 1; padding: 60px 50px;width: 100%; max-width: 450px;color: #fff; border-top-left-radius: 100px;border-bottom-right-radius: 100px;margin: 0 auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.contact-box .form-box{overflow: hidden;}
.contact-box .form-box .add-info{display: block;}
@media screen and (min-width: 1200px) {
.contact-box{padding: 5%;min-height: 550px;margin-bottom: -1px;}
.contact-box #map_canvas{width:100%; height: 100%; position: absolute;left: 0;top:0;}
.contact-box #map_canvas + .form-box{ background:rgba(67,57,47,.95);margin:inherit;}
}
/*============googlemaps===============*/
#map_canvas{width:100%; height:550px; position:relative;}
#map_canvas iframe{width: 100%; height: 100%;}

/*==============portfolio==================*/
.portfolio .full-box .img-box{background-image:url('../images/portfolio-head.jpg'); }
.portfolio-list{position: relative; padding-bottom: 130px; margin-bottom: -130px;background-image:url('../images/portfolio-line.png'); background-repeat:repeat-y; background-position:left top;margin-left: -60px; padding-left: 60px;}
.portfolio-list:before{content: '';position: absolute;top:0;left: 0;margin-left: 0px; width: 100px;height: 50px; -webkit-background: linear-gradient( to bottom, rgba(251,248,245,1), rgba(251,248,245,0)); -moz-background: linear-gradient( to bottom, rgba(251,248,245,1), rgba(251,248,245,0)); -o-background: linear-gradient( to bottom, rgba(251,248,245,1), rgba(251,248,245,0)); background: linear-gradient( to bottom, rgba(251,248,245,1), rgba(251,248,245,0));}
.portfolio-list .grid-item{float: left;width: 100%;padding-left: 180px;min-height: 300px; margin-bottom: 80px; }
.portfolio-list .grid-item h1{line-height: 1.3em;margin-top: 0.2em;}
.portfolio-list .grid-item p{margin-top: 25px;}
.portfolio-list .text-box{position: absolute;width:200px;background-image:url('../images/list-leaf2.png'); background-repeat:no-repeat;background-position: center top; background-size:cover;left: 0;top:0;text-align: center;padding: 130px 30px 0px 50px;}
.portfolio-list a:hover .text-box{color:#9f8471;top: 10px;}
.portfolio-list .img-box.img-ver{padding-bottom: 100% !important;}
.portfolio-list .img-box.img-ver img{width: auto;height: 100%;}
@media screen and (min-width: 1200px) {
.portfolio-list{background-position:center top;margin-left: 0px; padding-left: 0px;}
.portfolio-list:before{left: 50%;margin-left: -50px;}
.portfolio-list .grid-item{float: left;width: 50%;margin-bottom:0px;}
.portfolio-list .grid-item:nth-child(odd){padding-right: 180px;padding-left:0;}
.portfolio-list .grid-item:nth-child(even){margin-top:140px; margin-bottom: -60px;}
.portfolio-list .grid-item:nth-child(odd) .text-box{left:auto;right:0; padding: 130px 50px 0px 30px;}
.portfolio-list .grid-item:nth-child(4n+1) .text-box{background-image:url('../images/list-leaf1.png');background-position:center bottom;padding-top: 0; padding-bottom: 110px;}
.portfolio-list .grid-item:nth-child(4n+2) .text-box{background-image:url('../images/list-leaf2.png');}
.portfolio-list .grid-item:nth-child(4n+3) .text-box{background-image:url('../images/list-leaf3.png');}
.portfolio-list .grid-item:nth-child(4n+4) .text-box{background-image:url('../images/list-leaf4.png');background-position:center bottom;padding-top: 0;padding-bottom: 110px;}
}
@media screen and (max-width: 1200px) {
.portfolio-list{max-width: 700px;}
.portfolio-list .grid-item { min-height: 200px;}
.portfolio-list .grid-item:nth-child(2n+1) .text-box{background-image:url('../images/list-leaf5.png');}
}
@media screen and (max-width: 700px) {
form input[type="text"], form input[type="password"], form input[type="name"], form input[type="tel"], form input[type="line"], form input[type="email"], form input[type="rarea"], form select, form textarea{  
    color: #333 !important;
	background:#C2DDE4!important;
	}
.portfolio-list{
	background-size: 12%;
	margin-left: -80px;
	padding-left: 80px;
	}
.portfolio-list .grid-item { 
    padding-left: 100px;
	}
.portfolio-list .text-box { 
    margin-left: -55px;
	padding: 110px 0px 50px 40px;
	width: 150px; 
	background-position: left top;
	}
.footer-left { 
    position: relative; 
	display: block;
	width:100%;
	float: none;
	text-align:center;
	margin-left:0 !important;
	margin-bottom: 25px;
	}
.footer-left img{ 
   max-width: 180px;
   height:auto;
   }
   
.footer-right { 
    position: relative; 
	display: block;
	width:100%;
	float: none;
	text-align:center;
	margin-bottom: 15px;
	}
.footer-icon{
    position: relative; 
	display: block;
	width:100%;
	float: none;
	margin-bottom: 25px;
	text-align:center;
	}
}
@media screen and (max-width: 500px) {
.portfolio-list{background-size: 19%;}
.portfolio-list .grid-item { padding-left: 5%; margin-bottom: 60px;}
.portfolio-list .text-box { position: relative;left: 50%;margin-left: -210px;padding: 20px 0px 40px 140px;width: 270px; background-size: 65%;}       
}
@media screen and (max-width: 380px) {
.portfolio-list .text-box {margin-left: -180px; padding: 20px 0px 35px 110px;width: 240px;background-size: 70%;}
}
.portfolio-content.content-page {background-image:url('../images/portfolio-head2.jpg');}
.portfolio-content .content-tag em{letter-spacing: 0.1em;}
.portfolio-content .content-title{min-height: 80px;}
.portfolio-content .content-title em{font-size: 24px;}
.portfolio-content .content-title em~h1, .portfolio-content .content-title em~h2{padding-left:100px;}

/*==============ebook==================*/
.ebook .full-box .img-box{background-image:url('../images/service-head.jpg'); }
.ebook .grid-container .img-box{padding-bottom: 128%;}
.ebook-content.content-page {background-image:url('../images/service-head2.jpg');}
.ebook-content .content-tag strong{letter-spacing: 0.7em;margin-right: -0.7em;}
.ebook-title em.text-volume{position: relative; float: left;color: #fff;margin-left: 20px;}
.ebook-title img{ float: left;height: 80px; width: auto;}

/*==============report==================*/
.report .full-box .img-box{background-image:url('../images/report-head.jpg'); }
.report .grid-container .img-box{padding-bottom: 141%;}
.report .text-month-group{ width: 105%;}
/*==============video==================*/
.video .full-box .img-box{background-image:url('../images/video-head.jpg'); }
.video .grid-container .img-box{padding-bottom: 56.25%;}
/*==============life==================*/
.life .full-box .img-box{background-image:url('../images/life-head.jpg'); }
.life-content #footer:before{ background-image:url('../images/life-head2.jpg');}
.life .grid-container .img-box{padding-bottom: 100%;}
.life-content .content-tag em{letter-spacing: 0.2em;}


/*==============真情留言==================*/
.contact .full-box-2 .img-box{background-image:url('../images/contact-head.jpg'); }
.form-text{position: absolute; right: 0; top:-25px;}


.contact-info{line-height: 1.3em;}
.contact-info li{position: relative;}
.contact-info a{display: inline-block;}

.contact-info small{
	position: absolute;
	top: 8px;
	left: 0; 
	background: #fff;
	color:#43392f;
	display: block;
	padding: 0 10px;
	border-top-right-radius: 10px;
	border-bottom-left-radius: 10px;
	}
.contact-info b{display: inline-block;color:#fff;letter-spacing: 0.1em;font-weight:normal;padding:8px 0;}
.contact-info small+b{padding-left: 55px;}
.contact-info small+b.label-big{padding-left: 65px;}
.contact-info small+b.label-big2{padding-left: 70px;}



/*==============學院美學==================*/
.art .full-box .img-box{background-image:url('../images/aes-head.jpg'); }
.art #section-list{padding-top: 160px; margin-top: -160px;}
#art-section2 .button-text{margin-left: 65px;}
.art-content #footer:before{ background-image:url('../images/art-head2.jpg');}
.art-content .content-title em{font-size: 24px;}
.art-content .content-title em~h1, .art-content .content-title em~h2{padding-left:75px;}
/*==============affiliates==================*/
.affiliates .full-box .img-box{background-image:url('../images/affiliates-head.jpg');background-position: left center; }
.affiliates-img{max-width: 570px;}
/*==============form==================*/
.form-box { 
position: relative; 
display: block;
margin-bottom:7em;
}
form { 
     position: relative; 
	 display: block; 
	 font-size:16px;
	 color: #000;
	 margin-bottom:2em;
	 }
form .input-column,form .input-row, .input-box{ 
     position: relative; 
	 display: block; 
	 line-height:0; 
	 margin:0; 
/*--	 width:100%; 
	 border-bottom: solid 1px #645344; 
	 min-height:45px; 
	 -webkit-box-sizing: border-box; 
	 -moz-box-sizing: border-box; 
	 box-sizing: border-box;--*/
	 }
.input-box{ height: 25px; height:inherit; padding-top: 10px; }
form .input-column{float:left; width:50%;}
form .input-column:nth-child(odd){width:48%; margin-right: 2%;}
.input-text{ 
     position: relative; 
	 display: inline-block; 
}
.input-text a{ display:inline-block;}

.input-box label {
	position:relative; 
	top: 0px; 
	display:inline-block;
	}

/* 表格輸入文字*/ 
.contact-cc{
	display:inline-block;
	width:47.888%;
	float:left;
	margin-left:.5em;
}
.contact-c100{
	display:inline-block;
	width:97%;
	float:left;
	margin-left:.5em;
}
form label{ 

   padding-bottom:0.6em;
}

form input[type="text"], form input[type="password"], form input[type="name"], form input[type="tel"], form input[type="line"], form input[type="email"], form input[type="rarea"], form select, form textarea{  
    line-height: 25px; 
	padding: 2px;
	margin-bottom:0.6em;
	width: 100%; 
    color: #333 ;
	background:rgba(255,255,255,0.9);
	border:#9f8471 solid 1px;
	}
form textarea { height: 135px; line-height: 25px; padding-top: 30px;}
form select {-webkit-appearance: none;-moz-appearance: none;appearance:none; line-height: 45px; padding: 0 30px 0 70px; background: url(../images/icon-select.png) no-repeat right center; padding-right: 0 \9; background-image: none \9;}
*::-ms-backdrop, form select{ padding-right: 0;background-image:none; }/*IE11*/
form small {font-size:12px; width: 15px; display: inline-block; color:#9f8471;}
.ime-disabled{ime-mode: disabled;}
form input[type="text"]:focus, form input[type="password"]:focus, form input[type="tel"]:focus, form input[type="email"]:focus, form textarea:focus, form select:focus { border-bottom:solid 1px #9f8471; }
form input[type="text"].error, form input[type="password"].error, form input[type="tel"].error, form input[type="email"].error, form textarea.error, form select.error,.input-box.error { border-bottom: solid 2px #b23a3a; }
img.rand-img { position: absolute; right: 0px; bottom: 1px; width:100px; height:44px;cursor: pointer;}

input[type="reset"], input[type="submit"], #submit, #reset,.submitBTN{
	position: relative; 
	padding-top: 20px; 
	height: 30px; 
	display: inline-block;  
	background:transparent; 
	color:#fff; 
    font-size:20px;
	line-height: 15px;
	margin-top:-5px;
	
	}

#submit em{font-size:12px;line-height: 12px;letter-spacing: 0.05em;}
input[type="submit"]:hover, input[type="reset"]:hover, input[type="reset"]:focus, input[type="submit"]:focus, #submit:hover, .submitBTN:hover, #reset:hover{ }
input[type="button"], input[type="file"], input[type="button"]:focus, input[type="file"]:focus{ background:transparent; color:#9f8471; cursor: pointer; padding-right:5px;text-decoration: underline; }
input[type="button"]:hover, input[type="file"]:hover{ text-decoration:none; }

.input-button{ 
width:150px;
height:38px;
 text-align: center;
 font-size: 0;
 background:#3C3D3F;
 border:#CCC solid 1px;
 border-radius:8px;
 float:right;
 }
input:-webkit-autofill,input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active  {/*-webkit-box-shadow: 0 0 0 40px #43392f inset !important;*/transition: background-color 5000s ease-in-out 0s;}
input:-webkit-autofill {-webkit-text-fill-color: #fff !important;}/*Change Chrome fill*/
.hide-box{ font-size: 15px;line-height: 24px; padding: 0 10px 10px 15px;text-align: justify;}
.form-link{ color:#fff; text-decoration: underline; display: inline-block;}
.form-link:hover{ text-decoration: none;color:#fff;}
.pswp-box { position: absolute; display: block; top: 0px; right: 0; bottom: 0; left: 0; margin: auto; width: 85%; max-width: 500px;height: 300px; background-color: #fff; padding: 40px; border: solid 1px #ddd; text-align: left; }
.placeholder ::placeholder { color: #888;}
.placeholder ::-webkit-input-placeholder { color: #888;}
.placeholder :-ms-input-placeholder {color: #888;}
.placeholder ::-moz-placeholder { color: #888; opacity: 1;}
.select-category{-webkit-appearance: none;-moz-appearance: none;appearance:none;display: block;min-width: 90px; height: 40px; line-height: 40px;font-size: 20px;font-weight: bold;color:#9f8471; padding: 0 0 0 15px; border-bottom: solid 1px #9f8471; border-top: solid 1px #9f8471; background-image: url(../images/icon-select.png);background-repeat: no-repeat; background-position:right center; background-color: transparent; padding-right: 0 \9; background-image: none \9;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.select-category:focus{background-color: #43392f;}
*::-ms-backdrop, .select-category{ padding-right: 0;background-image:none; }
/*============pswp===============*/
.pswp__bg { opacity: 0.95 !important; background: #27211c!important; }
.pswp__caption__center { font-size: 15px !important;  max-width:inherit !important;}
.pswp__zoom-wrap { text-align: center; }
.pswp__zoom-wrap:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; }
.pswp__wrapper { line-height: 0; width: 100%; max-width: 1440px; position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; }
.pswp__video_wrapper { position: relative; padding-bottom:56.25%; height: 0; width: 100%; }
.pswp__video_wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
video { width: 100% !important; height: auto !important; }
.pswp__ui--fit .pswp__top-bar,.pswp__top-bar { background-color:transparent !important; }
.pswp__counter{font-size: 16px !important;}


@media screen and (max-height: 900px) {
	
.pswp__wrapper { max-width: 1280px;}


}

}
@media screen and (max-height: 800px) {
.pswp__wrapper { max-width: 1100px;}
.footer-copyright{
	margin-top:4em!important;
	text-align: center;}
}
@media screen and (max-height: 700px) {
.pswp__wrapper { max-width: 960px;}
}
@media screen and (max-height: 600px) {
.pswp__wrapper { max-width: 720px;}


}
@media screen and (max-width: 790px) and (orientation:landscape){
.pswp__ui--fit .pswp__top-bar, .pswp__ui--fit .pswp__caption { background:rgba(0, 0, 0, 0) !important;}
.pswp__counter, .pswp__caption{ display:none;}


}
/*============owl===============*/
.owl-carousel{overflow: hidden;}
.owl-next, .owl-prev{ position:absolute; display:block;top: 50%; height:50px; width:50px; line-height: 50px;margin-top: -25px; z-index:1; text-align:center; color: #fff!important;}
.owl-prev i, .owl-next i{font-size: 20px;line-height: 50px;}
.owl-prev:hover i, .owl-next:hover i{font-size:26px;}
.owl-prev{left:-50px;}
.owl-next{right: -50px;}
.owl-carousel:hover .owl-prev{left:5px;}
.owl-carousel:hover .owl-next{right:5px;}
.owl-carousel.off {display: block;}
.owl-prev.disabled, .owl-next.disabled{ opacity: 0.5;cursor:default!important;}
.owl-dots {-webkit-tap-highlight-color: transparent;position: relative;margin-top: 30px;text-align: center;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.owl-dots button.owl-dot {display: inline-block; zoom: 1; *display: inline;}
.owl-dots button.owl-dot span { width: 8px; height: 3px; margin:15px 5px; background: #fff; display: block; -webkit-backface-visibility: visible; }
.owl-dots button.owl-dot.active span { width: 25px; }
.header-box .owl-item.active .img-box{-webkit-animation: kenburns 8s ease-out;animation: kenburns 8s ease-out;}
.owl-carousel .animated{-webkit-animation-duration:1s;animation-duration:1s;}
.owl-carousel .owl-item .owl-lazy.full-height:not([src]), .owl-carousel .owl-item .owl-lazy.full-height[src^=""] {max-height:inherit; }
.bg-light .owl-dots button.owl-dot span {background: #43392f;}
.owl-carousel.button-left .owl-dots{text-align: left;}
.owl-carousel.button-in .owl-dots{position: absolute; width: auto;bottom: 30px;left: 0;right: 0;margin: 0 150px;}
/*============mb.YTPlayer===============*/
.inline-YTPlayer{max-width:inherit!important;}
.video-full{ padding-bottom:0!important; height: auto!important;}
.inlinePlayButton{ width: 50px;height: 50px; line-height: 50px;font-size: 26px;transform: scale(1);}
.mb_YTPlayer:hover .inlinePlayButton, .inlinePlayButton:hover { transform: scale(1.1) !important;}
.index .inlinePlayButton{left: auto;right: 80px; bottom: 40px;top: auto; z-index: 10;}
.video-full .mbYTP_wrapper iframe{width: 100% !important; height: 100% !important;margin-left: 0 !important;margin-top: 0 !important;}
.mb_YTPBar{z-index: 9!important;}
.inline-YTPlayer .full-box{z-index: -1;}
@media screen and (max-width: 800px) {
.inlinePlayButton{ width: 40px;height: 40px; line-height:40px;font-size: 20px;}

}

/*============lazy===============*/
img.lazy,picture.lazy img{background-image: url('../images/loader.gif'); background-repeat: no-repeat; background-position: 50% 50%; }
img.lazy.lazy-loaded, picture.lazy.lazy-loaded img{background-image:none;}
picture.lazy img{ opacity: 0;-webkit-transition: opacity 500ms ease-out; -o-transition: opacity 500ms ease-out; -moz-transition: opacity 500ms ease-out; transition: opacity 500ms ease-out;}
picture.lazy.lazy-loaded img{opacity: 1;}
/*============justifiedGallery===============*/
.justified-gallery > a > .caption{ display: block; opacity: 0;bottom: -20px;padding:7px 10px;font-size: 14px;background-color: #645344;}
.justified-gallery > a > .caption.caption-visible{ opacity: .9;bottom: 0px;display: none;}
.justified-gallery > .entry-visible{font-family: "dripicons-v2";-webkit-font-smoothing: antialiased; font-style: normal;font-variant: normal;text-rendering: auto;font-weight: 900;line-height: 1;}
.justified-gallery > a:after{ content: "\e031"; position: absolute;width:50px; height: 50px; line-height: 50px;font-size: 24px; background:#9f8471;color: #fff; text-align: center; display:block; top: 0px; right: 0; bottom: 0; left: 0; margin: auto;border-top-left-radius: 50%; border-bottom-right-radius: 50%; overflow: hidden;z-index: 1;opacity: 0;font-weight: normal;}
.justified-gallery > a.video:after{content: "\e01a";}
.computer .justified-gallery > a:hover:after{opacity: 1;}
/*============fullpage===============*/
.fp-section{overflow: hidden;}
/*.fp-tableCell{ position: relative;overflow: hidden; }
.full-height .fp-tableCell{ display:block; }*/
.fp-controlArrow{width: 40px; height: 40px; border-radius:50%; color: #fff; text-align: center; line-height: 40px;}
.fp-controlArrow.fp-next, .fp-controlArrow.fp-prev{border-width:2px;border-color:#fff;width: 40px;}
#fp-nav ul li a.active span, #fp-nav ul li:hover a.active span{height: 20px;width: 3px;margin: -8px 0 0 -2px;border-radius: 0;}
#fp-nav ul li a span,#fp-nav ul li:hover a span{margin: -2px 0 0 -2px;height: 6px;width: 3px; border-radius: 0;background: #fff;}
#fp-nav ul li:hover a span{width: 5px;}

.section #footer{
	
	background-color:#4D4D4D;
	 }
/*============ie/lightbox===============*/
.ie, .lightbox-container { position: fixed; -webkit-transform: translateZ(0); transform: translateZ(0); display: block; top: 0; left: 0; z-index: 200; height: 100%; width: 100%; background: url(../images/bg-alpha.png) repeat; overflow: auto;}
.ie-content { position: relative; display: block; margin: 0 auto; margin-top: 3%; width: 90%; max-width: 600px; height: 300px; background-color: #fff; color:#43392f; padding: 3%; border: solid 1px #ddd; }
.ie-content a{color:#43392f;}
.ie-close { position:fixed; -webkit-transform: translateZ(0); transform: translateZ(0); display: block; width: 50px; height: 35px; right: 0; top: 0; text-align: center; padding-top: 15px;}
a.lightbox-close {position:fixed;top: 10px; right: 10px; z-index: 1;}
body.lightbox{overflow:hidden !important;}
.lightbox-container, .lightbox-item{ display: none;}
.lightbox-container.active{display: block;}
.lightbox-item.active{ display: block;}
.lightbox-bg{ position: fixed; -webkit-transform: translateZ(0); transform: translateZ(0); display: block; top: 0; left: 0; height: 100%; width: 100%;}
.lightbox-content{ position: relative; display: block; width: 90%; max-width:1000px; margin: 0 auto; background: #fff; margin-top: 5%;}
.lightbox-item{ position: relative; margin: 0 auto; width: 85%; padding: 10% 0;}
.lightbox-item .hidden {opacity: 1;}

@media screen and (max-width: 800px) {
.index{background-image:url('../images/mobile/index-bg.jpg');}
.index-news{background-image:url('../images/mobile/index-news.jpg');}
.index-about{ background-image:url('../images/mobile/index-about1.jpg'); }
.index-report{ background-image:url('../images/mobile/index-report.jpg'); }
.about .full-box .img-box{background-image:url('../images/mobile/about-head.jpg'); }
.news .full-box .img-box{background-image:url('../images/mobile/news-head.jpg'); }
.news-content #footer:before{ background-image:url('../images/mobile/news-head2.jpg');}

.news2 .full-box .img-box{background-image:url('../images/mobile/project-head-ver.jpg'); }
.news2-content.content-page {background-image:url('../images/mobile/project-head2-ver2.jpg');}

.project .full-box .img-box{background-image:url('../images/mobile/project-head.jpg'); }
.project-content.content-page {background-image:url('../images/mobile/project-head2.jpg');}

.portfolio .full-box .img-box{background-image:url('../images/mobile/portfolio-head.jpg'); }
.portfolio-content.content-page {background-image:url('../images/mobile/portfolio-head2.jpg');}
.ebook .full-box .img-box{background-image:url('../images/mobile/ebook-head.jpg'); }
.ebook-content.content-page {background-image:url('../images/mobile/ebook-head2.jpg');}
.report .full-box .img-box{background-image:url('../images/mobile/report-head.jpg'); }
.video .full-box .img-box{background-image:url('../images/mobile/video-head.jpg'); }
.life .full-box .img-box{background-image:url('../images/mobile/life-head.jpg'); }
.life-content #footer:before{ background-image:url('../images/mobile/life-head2.jpg');}

.contact .full-box-2 .img-box{
	background-image:url('../images/mobile/contact-head.jpg'); 
	}
.art .full-box .img-box{background-image:url('../images/mobile/art-head-ver2.jpg'); }
.art-content #footer:before{ background-image:url('../images/mobile/art-head2.jpg');}
.affiliates .full-box .img-box{background-image:url('../images/mobile/affiliates-head.jpg'); }
.section #footer{
	min-height:340px!important;
}
}
@media screen and (orientation:portrait) {
.index{background-image:url('../images/mobile/index-bg-ver.jpg');}
.index-news{background-image:url('../images/mobile/index-news-ver.jpg');background-position: left top;}
.index-about{ background-image:url('../images/mobile/index-about-ver2.jpg'); }
.index-report{ background-image:url('../images/mobile/index-report-ver.jpg'); }
.about .full-box .img-box{background-image:url('../images/mobile/about-head-ver.jpg');background-position: right center; }
.news .full-box .img-box{background-image:url('../images/mobile/news-head-ver.jpg');  background-position: center center;}
.news-content #footer:before{ background-image:url('../images/mobile/news-head2-ver.jpg');}

.news2 .full-box .img-box{ 
     
	 background:url(../images/mobile/project-head2-ver2.jpg) top center no-repeat;
	 background-size: contain;
	 
	 }

.news-content #footer:before{ background-image:url('../images/mobile/project-head2-ver2.jpg');}

.project .full-box .img-box{background-image:url('../images/mobile/project-head-ver.jpg');}
.project-content.content-page {background-image:url('../images/mobile/project-head2-ver2.jpg');}
.portfolio .full-box .img-box{background-image:url('../images/mobile/portfolio-head-ver.jpg'); }
.portfolio-content.content-page {background-image:url('../images/mobile/portfolio-head2-ver.jpg');}
.ebook .full-box .img-box{background-image:url('../images/mobile/ebook-head-ver.jpg'); }
.ebook-content.content-page {background-image:url('../images/mobile/ebook-head2-ver.jpg');}

.report .full-box .img-box{background-image:url('../images/mobile/report-head-ver.jpg'); }

.video .full-box .img-box{background-image:url('../images/mobile/video-head-ver.jpg'); }
.life .full-box .img-box{background-image:url('../images/mobile/life-head-ver.jpg'); }
.life-content #footer:before{ background-image:url('../images/mobile/life-head2-ver.jpg');}

.contact .full-box-2 .img-box{
	
	background-image:url('../images/mobile/contact-head-ver.jpg');
	}
.aes-box{
	display:none;
}
.aes-zone-down{
	display:block;
	width:100%;
	height:450px;
	max-height:450px;
	background:url(../images/mobile/art-head-ver-down.jpg) no-repeat top;
	background-size: contain;
}
.art .full-box .img-box{
	background-image:url('../images/mobile/art-head-ver.jpg'); 

	}
.art-content #footer:before{ background-image:url('../images/mobile/art-head2-ver.jpg');}
.affiliates .full-box .img-box{background-image:url('../images/mobile/affiliates-head-ver.jpg'); }
}
@media screen and (min-width: 1600px) {
.content-page .grid-container{width:auto;margin-left: 180px;margin-right: 180px;}
}
@media screen and (max-width: 1600px) {
.grid-container, .grid-container-small{width:auto;margin-left: 180px;margin-right: 180px;}


}
@media screen and (max-width: 1500px) { 
.grid-container, .grid-container-small{margin-left: 125px;margin-right: 125px;}
.owl-dots{margin-top: 15px;}
.img-list.img-column-5 .grid-item {width: 25%;}
.img-list.img-column-4 .grid-item{ width:33.3%;}
.header-box .content-title {left: 40px;}
}
@media screen and (max-width: 1500px), (max-height: 750px) {
.title-box {padding-left: 110px;}
.title-text{width: 100px;padding-top: 0;height: 100px;font-size: 24px;line-height: 50px;}
.title-text em{font-size: 14px;line-height: 14px;}
.title-box .text-ver{font-size: 16px; line-height: 34px;}
.title-img{width: 35px;}
}
@media screen and (max-width: 1400px) {
.item-5{width:106%;margin-bottom: -5%;}
.item-5 .grid-item{width:19%; margin:0 6% 5% 0;}
.item-4 {width:107%;margin-bottom: -6%;}
.item-4 .grid-item{ width:26.3%; margin:0 7% 6% 0;}
.item-4.item-small{width:104%;margin-bottom: -6%;}
.item-4.item-small .grid-item{ width:29.3%; margin:0 4% 6% 0;}
.category-list a{ width: 40px;}
.category-list b {line-height: 40px;}    
#about-section1 .img-box {height: 0px;padding-bottom: 56.25%;}
}
@media screen and (min-width: 1200px) {
.no-img-list .grid-8-12{width: 100%;padding-right: 0;padding-left: 0;max-width: 1300px;}
.no-content-box .grid-8-12{width: 100%;padding: 0;}
.content-box~.img-list{width: 33.3%;float: left;}
}
@media screen and (max-width: 1200px) {
 /*============main===============*/ 
.grid-1-12, .grid-2-12, .grid-3-12, .grid-4-12, .grid-5-12, .grid-6-12, .grid-7-12, .grid-8-12, .grid-9-12, .grid-10-12, .grid-11-12, .grid-3-8, .grid-5-8, .grid-1-2,.grid-right{ float: none/*!important*/; width: 100%;}
.grid-space-right, .grid-space-left{ padding-right: 0;padding-left: 0;} 

.item-3 {width:108%;margin-bottom: -7%;}
.item-3 .grid-item{ width:42%; margin:0 8% 7% 0;}
.item-6{margin-bottom: -4%;}
.item-6 .grid-item{ width:19%; margin:0 1% 4% 0;}
.header-box .content-title{max-width: 80%;}
/*============other===============*/
.affiliates .grid-6-12{display: inline;}
#affiliates-section2 .img-over-box{float: left;width: 35%;margin: 0 5% 5% 0;}
#affiliates-section3 .img-over-box{float: right;width: 35%;margin: 0 0 5% 5%;}
.section-box .html-edit,.section-box .text-box{float: none; width: 100%;}
.section-box .text-box+.html-edit{ margin-top: 30px;width: 100%;}
#about-section2 h1{float: none;margin-right:0;}
#about-section2 p {float: none; width: 100%;}
#about-section2 .text-more {padding-bottom: 30px;}
#about-section4 .img-over-box {float: right; width: 42%;margin-right: 1%;}
#about-section4 .text-box {width: 100%; max-width:inherit;margin-bottom: 50px;}
.about-service-list {position: relative;clear: both; width: 100%; right: auto; top: auto;max-width: inherit;}
#about-section7 .text-box {padding-top: 0;padding-left: 4%;}
.index-box h1 {font-size: 1.5em;}
.index-box h2 {font-size: 1em;}
.index-box h1+h2 {margin-right: 10px;}
/*.index-box:before { right: -15px;}*/
.index .project-list .text-box { padding: 0 10%!important;}
}
@media screen and (max-width: 1100px) {
.item-4 {width:109%;margin-bottom: -8%;}
.item-4 .grid-item{ width:41%; margin:0 9% 8% 0;}  
.item-5 {width:107%;margin-bottom: -6%;}
.item-5 .grid-item{ width:26.3%; margin:0 7% 6% 0;} 
.item-4.item-small{width:105%;margin-bottom: -7%;}
.item-4.item-small .grid-item{ width:45%; margin:0 5% 7% 0;}
.category-list{position: relative;top:auto; right:auto; display: flex;justify-content: center;flex-direction:row-reverse;margin-top:20px;width: 124%;margin-left: -12%; overflow: auto; overflow-y: hidden;}  
.category-list a:first-child{ margin-right: 20px;} 
.category-list a:last-child{ margin-left: 20px;} 
}
@media screen and (max-width: 980px){


/*.wrapper .main { padding-bottom: 820px; }*/
.wrapper+#footer { margin-top: -820px; min-height: 820px;}
.footer-nav li{width: 25%;}
.footer-info{width: 90%;margin: 0 auto;}
.footer-copyright{padding-right: 0;text-align: center;}
/*============main===============*/
.grid-container, .grid-container-small { margin-left: 110px; margin-right: 110px;}
#map_canvas {height: 400px;}
.box-top2{margin-top:60px;}
.box-bottom2{ margin-bottom: 60px;}  
.text-up-bottom3{margin-bottom:-80px;}  
.title2 {font-size: 2em;}
.owl-next, .owl-prev{width: 40px;}
.owl-carousel:hover .owl-prev{ left: 0;}
.owl-carousel:hover .owl-next{ right: 0;}
.owl-prev i, .owl-next i {font-size: 16px;line-height: 50px;}
.item-6{margin-bottom: -5%;}
.item-6 .grid-item{ width:24%; margin:0 1% 5% 0;}
/*============other===============*/
.item-5 h2{font-size: 1.125em;}
#about-section1 h1{margin-top: -15px;}
#about-section3 h1 {float: none;margin-right: 0; white-space: nowrap;}
#about-section3 p {float: none; width: 100%;}
#about-section3 .text-more {padding-bottom: 30px;}
#about-section3 .illustration { position: relative;width: 50%;float: right;right: auto;top: auto; margin: 20px;margin-right: -10%;}
#about-section6 .text-box{width: 100%;}
#about-section6 p { width: 100%; margin-right: 0;max-width: inherit;}
#about-section7 .grid-middle { max-width: 500px;}
#about-section7 .img-over-box, #about-section7 .text-box{float:none;width: 100%;max-width: 500px;}  
#about-section7 .text-box{padding:0;margin-top: 60px;}
.subtitle-line {padding-bottom: 30px;}
.subtitle-line:before{height: 35px;}
.index .subtitle-box{margin-bottom: 25px;}
.index-about .subtitle-box {right: 50px; bottom: 0; margin-bottom: 0;}
.index-news .subtitle-box {float: none;width: auto;margin-left: 0;}
.index-news .index-news-list { float: none;width: 100%;}
.index .inlinePlayButton {right: 35px;}
.owl-carousel.button-in .owl-dots { margin: 0 70px;}
}
@media screen and (max-width: 800px) {    
.grid-container, .grid-container-small{margin-left: auto; margin-right: auto; width: 80%;}

.sticky-footer #header:before{opacity: 0;}
.index #header:before{display: none;}
.content-button-head,.content-page .content-button-head{left: 10% !important;margin-left: -12px;}
.header-box .content-title{left: 10%;}
.item-6{margin-bottom: -6%;}
.item-6 .grid-item{ width:32.3%; margin:0 1% 6% 0;}
/*============other===============*/
.art .owl-carousel{width: 125%; margin-left: -12.5%;} 
.logo-box img {max-width: 200px;max-height: 200px;}
.index-about .text-box { left: 50px;}
}
@media screen and (max-width: 700px), (max-height: 600px) {
.title-box .text-ver{ letter-spacing: 0.3em;line-height: 26px;}
}
@media screen and (max-width: 700px) and (orientation:portrait){
.title-box{padding-bottom: 100px;padding-left: 0px;margin-top: -200px;left:10%;}
.title-text{left: 0;}
.title-img {left: 5px; bottom: -15px;}
}
@media screen and (max-width: 600px){

/*.wrapper .main { padding-bottom: 1000px; }*/
.wrapper+#footer { margin-top: -1000px; min-height: 1000px;}
a.footer-logo { 
    position: relative; 
	display: block;
	float:none!important;
	width: 90%!important; 
	max-width: 180px; 
	height: auto;
	margin:0 auto !important;
	margin-bottom: 15px;
	}

.footer-nav li{width: 33.3%;}
.footer-copyright a,.footer-copyright span{display: block;}
/*============main===============*/
.hide-w600{ display: none !important;}
.computer-img{ display:none; opacity: 0 !important;}
.mobile-img{ display:block; opacity: 1 !important;}	 
.title1{font-size: 2.3em;} 
.page a{min-width: 36px;height: 36px;line-height: 36px;font-size: 16px;}   
.item-4,.item-3,.item-4.item-small {width:100%;margin: 0 auto; margin-bottom: -50px;max-width: 360px;}
.item-full-m{max-width:inherit !important;}
.item-4 .grid-item,.item-3 .grid-item,.item-4.item-small .grid-item{ width:100%; margin:0 0 50px 0;} 
.item-5 {width:109%;margin-bottom: -8%;}
.item-5 .grid-item{ width:41%; margin:0 9% 40px 0;} 
.item-left .grid-item {margin: 0 0 20px 0;padding: 0 15px;}
.item-list .img-box { margin-bottom: 20px;}
.item-6{margin-bottom: -30px;}
.item-6 .grid-item{ width:32.3%; margin:0 1% 30px 0;}
.item-6 .img-box { margin-bottom: 10px;}
.news .item-list .img-box { margin-bottom: 0;margin-top: 20px;}
.text-list.type-year li {padding-left: 0;}
.text-list.type-year li em{width: auto;}
.text-list em {position: relative;margin-bottom: 10px;}
/*============other===============*/
#about-section1 .img-box {padding-bottom: 100%;}
#about-section3 h1{margin-top: 0;}
#about-section4 .img-over-box {width: 49%;}
#about-section4 .text-box {padding-right: 0;}
#about-section4 h1{margin-right: 20px;}
#about-section4 .illustration {width: 100px; bottom: auto;top: -130px;}
#about-section6 .img-over-box {width: 49%; margin-right: 1%;}
#about-section7 .text-box p{width: 115%;}
#affiliates-section2 .img-over-box,#affiliates-section3 .img-over-box{float:none;width:100%;margin: 0 0 50px 0;}
.affiliates .grid-6-12 {display:block;margin-bottom: 10px;}
#art-section2 .button-text{margin-left: 0;}
.project-text .text2,.project-content .content-title .text2 {font-size: 0.9em;}
.portfolio-content .content-title em,.art-content .content-title em{font-size: 18px;}
.portfolio-content .content-title em~h1, .portfolio-content .content-title em~h2{padding-left:75px;}
.art-content .content-title em~h1, .art-content .content-title em~h2{padding-left:55px;}
.portfolio-content .content-title .title1,.art-content .content-title .title1{font-size: 2em;}
.contact-box #contact{width: 80%; padding: 80px 0;}
.index-about .text-box {left: 10%;}
.index-report .text-box {padding: 50px 10%;width: 110%; margin-left: -5%;}
}
@media screen and (max-width: 500px) {
/*============main===============*/
.hide-w500{ display: none !important;}
.block-w500{display: block;}
.pswp-box{height: 350px;}    
.header-box:after{height: 250px;}
.full-box:before, .header-box .video-box:before{width: 350px;}
.grid-container{padding-top: 90px;padding-bottom: 100px;} 
.grid-container-small {margin-top: 60px;margin-bottom: 80px;}
.section-box:first-child .grid-container-small { margin-top: 0; padding-top: 80px;}
.html-edit br{display:none;}
.item-3{width:100%;max-width: 480px;margin-left: auto;margin-right: auto;margin-bottom: -40px;}
.item-3 .grid-item{ width:100%; margin:0 0 40px 0;}
.item-6{width:102%;}
.item-6 .grid-item{ width:48%;margin-right: 2%;}
.content-tag{display: none;}
.text-zoomin-m{font-size: 0.9em;}
.text-zoomin-m2{font-size: 0.8em;}
.owl-dots button.owl-dot span {margin: 10px 4px;}
.content-title .title2 {font-size: 1.7em;}
.project-text p br, .project-content .header-box .content-title p br{display:none;}
.ebook-title {width: 110%;}
.ebook-title img {height: 60px;}
.ebook-title em.text-volume {margin-left: 5px;}  
.text-volume {font-size: 24px;line-height: 24px;} 

.news-content .content-title .title4 {font-size: 1.5em;}
.newsdata img {
	width: 100%;
	}	

}
@media screen and (max-width: 400px){
.footer-nav li{width: 50%;}
.footer-grid { padding: 60px 0 20px 0;}
.footer-info { padding: 60px 0 30px 0;}
/*============main===============*/
.hide-w400{ display: none !important;}
.block-w400{display: block;}
.page a { display: none; }
.page a.active, .page a.page-first, .page a.page-last, .page a.page-next, .page a.page-prev{ display: inline-block; }
.symbol-text br{display: none;}
.symbol-text .symbol-inline{display: inline;}  
.img-list.img-column-2 .grid-item { width: 100%;}  
.title3 {font-size: 1.6em;}
.text1 {font-size: 1em;}
.add-info li:before{display: none;}  
.index-portfolio-list .text-box {padding-left: 40px;font-size: 0.9em;} 
.index-portfolio-list .img-box {border-top-left-radius: 80px; border-bottom-right-radius: 80px;}
.project-content .header-box .content-title{display:none;}
.index-news-list .grid-item {margin-bottom: 20px;}
.index-news-list em{display: none;}
}
@media screen and (max-width: 350px) {
.hide-w350{ display: none !important; }
a.form-link{display: block;padding-left: 45px;}
form textarea { height: 200px;padding-left: 0;padding-top: 40px;}
form label{padding-right: 5px;}
.share-text,.share-button a{margin-right: 3px;}
.button-icon a, a.button-icon, a .button-icon {width: 35px;}
.category-list a{ width: 35px;}
.category-list b {line-height: 35px;}
.project-text .title3{font-size: 1.4em;}
.ebook-title img {height: 55px;}
.portfolio-content .content-title em,.art-content .content-title em{font-size: 16px;}
.portfolio-content .content-title em~h1, .portfolio-content .content-title em~h2{padding-left:65px;}
.art-content .content-title em~h1, .art-content .content-title em~h2{padding-left:45px;}
.portfolio-content .content-title .title1,.art-content .content-title .title1{font-size: 1.8em;}
.owl-carousel.button-in .owl-dots { margin: 0 65px;}
}
@media screen and (max-height: 600px){
.title-box{margin-top: 0;bottom: 40px;top: auto;}
}
@media screen and (max-height: 450px){
#section-cc{min-height: 500px;}
#section-cc2{min-height: 500px;}
#section-header{min-height: 450px;}

}
.horizontal { display: inherit; }
.vertical { display: none; }
@media screen and (orientation:portrait) {
.horizontal { display: none; }
.vertical { display: inherit; }

}

/*============手機及平板===============*/
@media only screen and (min-width: 1440px) and (max-width: 2900px) {
#section-cc{min-height: 1000px;}
#section-cc2{min-height: 1000px;}



.methood-box{
	position:absolute; 
	z-index: 9;
	bottom:40%;
	left:10%;
}
.methood-box img{
	max-height:250px;	
}
}
@media only screen and (min-width: 1920px) and (max-width: 2900px) {
.section #footer{
	
	background-color:#4D4D4D;
	 }
}
@media only screen and (min-width: 891px) and (max-width: 2900px) {
	.b-logo{
		display:none;
	}
	.aes-zone-down{
	display: none;
	}
@media only screen and (min-width: 320px) and (max-width: 900px) {
	.b-logo{
		margin-bottom:3em;
	}
	.full-box-2{
	position: absolute;
	}
	.form-box { 
	margin-top:110%;
}

}