/* 動畫 */

/* 線 */
.index-about-line-top,
.index-about-line-bottom,
.index-works-title-box:before,
.index-works-title-box> span,
.index-serivce-title:before,
.index-service-line,
.index-service-info-box:before,
.index-service-info-arrow,
.landscape-title:after,
.landscape-info-right:after,
.landscape-info-left:before,
.landscape-info-img:before,
.chalet-out-line span:nth-child(1),
.chalet-out-line span:nth-child(2),
.chalet-line-bottom,
.works-page-line,
.news-page-line,
.news-more-line{
	transform: scale(0, 1);
}
.index-about-line-right,
.index-works-title-box:after,
.index-serivce-title:after,
.index-service-info-line,
.landscape-title:before,
.landscape-info-right:before,
.landscape-info-left:after,
.landscape-info-img:after,
.chalet-line-left,
.chalet-line-right{
	transform: scale(1, 0);
}



/* 線執行 */
.index-about-line-top,
.index-serivce-title:before,
.index-service-line,
.index-service-info-block .index-service-info:nth-child(2) .index-service-info-box:before,
.landscape-title:after,
.landscape-info-img:before,
.chalet-out-line span:nth-child(1),
.chalet-line-bottom,
.chalet-out-line span:nth-child(2),
.works-page-line,
.news-page-line,
.news-more-line
{
	transform-origin: left;
}
.index-about-line-right,
.index-serivce-title:after,
.index-service-info-line,
.landscape-title:before,
.landscape-info-right:before,
.chalet-line .chalet-line-left{
	transform-origin: top;
}
.index-about-line-bottom,
.index-works-title-box> span,
.index-service-info-box:before,
.index-service-info-arrow,
.landscape-info-right:after,
.landscape-info-left:before{
	transform-origin: right;
}
.landscape-info-left:after,
.landscape-info-img:after,
.chalet-line-right{
	transform-origin: bottom;
}
.index-about-box.active .index-about-line-top,
.news-more-line.active{
	animation: line .5s linear 0s 1 forwards;
}
.index-about-box.active .index-about-line-right{
	animation: line2 .5s linear .5s 1 forwards;
}
.index-about-box.active .index-about-line-bottom{
	animation: line .8s linear 1s 1 forwards;
}
.index-works-title-box.active:before,
.index-service-box.active .index-serivce-title:before{
	animation: line .3s linear 0s 1 forwards;
}
.index-works-title-box.active:after,
.index-service-box.active .index-serivce-title:after{
	animation: line .3s linear .3s 1 forwards;
}
.index-works-title-box.active> span{
	animation: line .3s linear .3s 1 forwards;
}
.index-service-box.active .index-service-line{
	animation: line .8s linear 0s 1 forwards;
}
.index-service-info-box.active:before{
	animation: line .5s linear .5s 1 forwards;
}

.index-service-info-line.active{
	animation: line2 .5s linear .5s 1 forwards;
}
.index-service-info-arrow.active{
	animation: line .5s linear .5s 1 forwards;
}
.landscape-title:before{
	animation: line2 .3s linear 0s 1 forwards;
}
.landscape-title:after{
	animation: line .5s linear .3s 1 forwards;
}
.landscape-info-right:before{
	animation: line2 .5s linear .8s 1 forwards;
}
.landscape-info-right:after{
	animation: line .5s linear 1.3s 1 forwards;
}
.landscape-info-left:before{
	animation: line .5s linear 1.8s 1 forwards;
}
.landscape-info-left:after{
	animation: line2 .2s linear 2.3s 1 forwards;
}
.landscape-info-img:after{
	animation: line2 .6s linear 2.5s 1 forwards;
}
.landscape-info-img:before{
	animation: line .6s linear 3.1s 1 forwards;
}


.chalet-line.active .chalet-out-line span:nth-child(1){
	animation: line .4s linear 0s 1 forwards;
}
.chalet-line.active .chalet-line-left{
	animation: line2 .1s linear .4s 1 forwards;
}
.chalet-line.active .chalet-line-bottom{
	animation: line .6s linear .5s 1 forwards;
}
.chalet-line.active .chalet-line-right{
	animation: line2 .1s linear 1.1s 1 forwards;
}
.chalet-line.active .chalet-out-line span:nth-child(2){
	animation: line .4s linear 1.2s 1 forwards;
}

.works-page-info.active .works-page-line{
	animation: line .5s linear .2s 1 forwards;
}
.news-page-line{
	animation: line .5s linear .3s 1 forwards;
}


/* 一班 */
.index-about-title,
.index-about-p,
.index-works-title-box,
.index-works-list,
.index-serivce-title,
.index-service-info-box,
.index-service-info-arrow:after,
.index-service-info-p,
.index-news-title-box,
.landscape-title,
.landscape-info-p,
.landscape-info-img,
.chalet-title,
.chalet-info-img-box,
.chalet-info-h1,
.chalet-info-p,
.works-title,
.works-class-box,
.wokrs-list,
.works-back,
.works-page-img-box,
.works-page-b-img-box,
.works-page-s-img-box,
.works-page-info-title,
.edit-box,
.servcie-page-title-box,
.service-page-title,
.news-page-title-date,
.news-page-back,
.news-page-title,
.news-more-title,
.news-more-show-box,
.news-title-box,
.index-news-list,
.contact-list,
.contact-textarea,
.button,
.contact-title-box,
.contact-company-info{
	opacity: 0;
}

/* 一班動畫執行 */
.index-about-title.active,
.index-about-p.active,
.index-works-list.active,
.index-service-box.active .index-serivce-title,
.index-service-info-box.active,
.landscape-title,
.landscape-info-p.active,
.landscape-info-img.active,
.chalet-title,
.chalet-info-h1.active,
.chalet-info-p.active,
.works-title.acitve,
.works-class-box.active,
.wokrs-list.active,
.works-title.active,
.works-class-box.active,
.works-back,
.works-page-b-img-box.active,
.works-page-s-img-box,
.works-page-info.active .works-page-info-title,
.servcie-page-title-box,
.news-page-title-date,
.news-page-back,
.news-more-title.active,
.news-more-show-box.active,
.news-title-box.active,
.index-news-list.active,
.contact-list.active,
.contact-textarea.active,
.contact-title-box.active{
	animation: fade .8s linear 0s 1 forwards;
}

.chalet-info-img-box,
.works-page-img-box,
.service-page-title{
	animation: fade .8s linear .3s 1 forwards;
}

.news-page-title{
	animation: fade .5s linear .1s 1 forwards;
}

.index-works-title-box.active{
	animation: fade .5s linear 0s 1 forwards;
}
.index-service-info-arrow.active:after{
	animation: fade .5s linear .8s 1 forwards;
}
.index-service-info-p.active{
	animation: fade .5s linear 1s 1 forwards;
}

.index-news-title-box.active{
	animation: fade .5s linear 0s 1 forwards;
}

.banner-scollr{
	animation: fadeUpout-banner-arrow 1.5s linear 0s infinite alternate;
}
.edit-box.active,
.works-page-info.active .edit-box,
.service-page-box.active .edit-box,
.news-page-box-information.active .edit-box{
	animation: fade .8s linear .4s 1 forwards;
}
.button.active{
	animation: index-contact-list-rotate 1.5s linear 0s 1 forwards;
}
.contact-company-info-box.active .contact-company-info:nth-child(1){
	animation: fadeInLeft 1s linear 0s 1 forwards;
}

.contact-company-info-box.active .contact-company-info:nth-child(2){
	animation: fadeInRight 1s linear 0s 1 forwards;
}
/* header */

.header-logo{
	width: 109px;
	max-width: 100%;
	transition: all .3s linear;
}

.header2 .header-logo{
	width: 80px;
}
.header-style1 .header-menu,
.header-style1{
	transition: all .3s linear;
}
.header2.header-style1 .header-menu{
	margin-top: 50px;
}
.header2.header-style1{
	box-shadow: rgba(0, 0, 0, 0.7)2px 0px 10px; 
}

.slick-active.index-banner-slong{
	animation: index-banner-slong 3s linear 0s 1 forwards;

}

@keyframes index-banner-slong {
 0% {
    opacity: 1

  }
  60%{
  	 opacity: 1
  }

  80% {
    opacity: 0;

  }
   100% {
    opacity: 0;

  }
}