/*設定螢幕*/

@media all and (max-width: 1650px) {
	.bn-01{ top: 450px; right: 290px; }
	.bn-02{ bottom: 5px; right: 0px; }
	.bn-monkey { top: 260px; left: 70px;}
}

@media all and ( max-width: 1600px) {
	.wrap{ 
		background-size:
			288px 404px, 
			505px 798px, 
			403px 475px, 
			362px 336px, 
			449px 478px;

		background-position: 
			112% 50%, 
			-35% 43%, 
			114% 75%,
			-7% 60%, 
			-11% 93%; 
	} /*外層裝所有物件除了縮小選單*/
}

@media all and (max-width:1450px) {
		.wrap{ 
			background-size:
				288px 404px, 
				0 0, 
				403px 475px, 
				362px 336px, 
				449px 478px;

			background-position: 
				120% 50%, 
				-35% 43%, 
				125% 78%,
				-7% 60%, 
				-11% 93%; 
	} /*外層裝所有物件除了縮小選單*/
}

@media all and (max-width:1250px) {
	.expert img {
		width: 347px; height: auto;
		position: relative; left:auto; bottom: auto;
		margin-left: calc(50% - 173px);
		margin-bottom: -80px;
	}
}

@media all and (max-width: 1279px) {
	.mainCont, .menuCont { width: 100%;}
	.mainCont.film_bg { overflow:hidden;}
	.toTOP { right: 20px; }
	.item {width: 90%;}
	.item-film { width: 60%!important; height: auto;}
	.txt { width: 35%;}
}

@media all and (max-width: 1130px) {
	.bn-01{ top: 450px; right: 200px; }
	.bn-02{ bottom: 5px; right: -70px; }
	.bn-monkey { top: 260px; left: -70px;}
}


@media all and (max-width: 1089px) {
	.expert p::before, .expert p::after { display:none;}
	.video-box {
		border: solid 1px #333;
		padding: 1em;
		width: 90%;
		margin: 40px auto auto auto;
		box-shadow: 16px -16px 0px 1px rgba(226, 226, 226, 0.9);
	}
}

@media all and (max-width:1060px) {
	
}


@media all and (max-width: 1000px) {
	.wrap { background-image: none;}
	.toTOP, .toTOP.btnShow { display: none;}
	.inner .pcNav li.navLine { display: none;}
	.pcNav li.grade::after { display: none; }
	.pcNav li.grade { margin: auto!important;}
	
	header img.logo {  z-index: 0;}
	/*header{ height: 70px;}*/
	header.changeS, header.changeH/*, header.changeS .logo, header.changeH .logo */{ -webkit-animation: none !important; animation: none !important;}
	/*banner上滑後header+背景色*/
	header.inner.shadow { background-color: rgba(30, 30, 30, .8); }
	
	@keyframes MoveLogo {
    from { opacity:1; margin-top: 0;}
    to {  opacity:0;margin-top: -25px;}}
	@keyframes MoveLogo2 {
    from {opacity:0; margin-top: -20px;}
    to {   opacity:1; margin-top: 0;}}
	
	/*首頁*/
	header { padding-top: 0; position: fixed;}
	header.full { height:100% !important; position: fixed; background: #fff;}
	
	.indexH ul.pcNav { margin: 0 auto; }
	.indexH .pcNav li { display: block; }

	/*內頁*/
	
	header.inner.full { background-color: #fff; }
    
    .inner .logo { 
		width: 240px; 
		margin-top: 25px;
		z-index: -2;
	}
	/*手機選單*/
    .pcNav li { margin:0 0 1.5em 0 !important; font-size: 1.125em; display: block; text-align: center;} 
	.indexH .pcNav li { height: auto;}
	.pcNav li.active {border: 0;}
	.pcNav li:last-child { display: block;}
	.pcNav li a {  padding: 0;}

	/*.pcNav li:hover .dot{ display: inline-block; margin: 0 8px -10px 0;}*/
	
	header.full.changeS .pcNav, header.full.changeH .pcNav ,header.full.logo, header.full.changeS .logo, header.full.changeH .logo {-webkit-animation: none; animation: none;}
	
	/*手機版展開選單*/
    .inner ul.pcNav, .indexH ul.pcNav, header.full .logo-index, header.full .logo { 
		display:none; background: #405533; 
	}
	
	ul.grt-menu {
		display:none;
		margin:0;
  		height: 0;
	}  
	/*.logoH{display: none;}*/
	/*.indexH { position: fixed; background: #e7e7e7;}*/
    /*.indexH ul.pcNav { width: 100%; left: 0; top: 0; padding: 0;}*/
	ul.open-grt-menu {
		display: block !important;
		background: #fff;/*#f3efe6*/
		width: 100%;
		left: 0;
		right: 0;
		top: 0;
		height:100%;
		overflow-y: scroll;	
		position: absolute;	
	}
	.inner ul.open-grt-menu.pcNav, .indexH ul.open-grt-menu.pcNav { display: block; right: 0; top: 0; padding-top: 5em;}
	
	/*漢堡選單 btn*/
	.grt-mobile-button {
		display:inline-block;
		position:absolute;
		right:3em;
		top:20px;
		color:#3d3d3d;
		margin:0;
		padding:0;
		cursor:pointer;
		border: 0;
		border-radius: 5px;
		width:45px;
		background: #60514f;
	}
	.grt-mobile-button .line1, .grt-mobile-button .line2, .grt-mobile-button .line3 {
		width: 30px; height: 4px; 
		background-color: #eeeeee; 
		margin: 8px auto;
		transition: 0.4s; display:block;
		border-radius: 2px;
	}
	
	/*漢堡選單close btn*/
	.grt-mobile-button-open {position: fixed; z-index:1085; right:2.23em !important;}
	.grt-mobile-button-open .line1 {-webkit-transform: rotate(-45deg) translate(-8px, 9px);transform: rotate(-45deg) translate(-8px, 9px);}
	.grt-mobile-button-open .line2 {opacity: 0;}
	.grt-mobile-button-open .line3 {-webkit-transform: rotate(45deg) translate(-8px, -9px);
		transform: rotate(45deg) translate(-8px, -9px);}
    .testCont { width: 100%; border-radius: 10px; padding: 45px 20px;}
	.testCont div { width: 55%;}
	.testCont ul li { flex-grow: 1; width: auto; margin:0 10px 13px 0;}
	
	.video-box::before { right: 0;}
}


@media all and (max-width: 999px) {
	/*.mainCont { width: 95%;}*/
	.film::before {bottom:-100px; left:-260px;}
	.film::after {top:117px; right:-240px;}
	.item {
		display: flex;
		flex-direction: column;/*元件排序方向*/
		flex-wrap: wrap;
		justify-content: space-between;/*水平對齊*/
		align-items: center;/*子元素對齊*/
		align-content: center;
		position: relative;
		margin: 2.5em auto 5.5em auto;
		width: 100%;
	}
	.item::before { left: -2em; }
	.item::after { right: -2em; }
	.item-film { width: 762px!important; height: 425px;}
	.txt { width: 762px;}
	.description {margin-top: 1em;}
}

@media all and (max-width: 940px) {
	.bn-01{ top: 450px; right: 150px; }
	.bn-02{ bottom: 5px; right: -140px; }
	.bn-monkey { top: 260px; left: -70px;}
	.bn-bird { top: 40px; left: 40%;}
}


@media all and (max-width: 900px) {
	.item::before { display:none; }
	.item::after { display:none; }
	.purpose {
		width: 100%; height: 255px;
		margin: auto auto 55px auto;
	}
	.point li { margin: 35px 10px; }
	.point li:first-child, .point li:nth-child(2) { padding-right: 20px; }
}

@media all and (max-width: 850px) {
	.banner h1 {
		top: 10px;
		/*margin: 90px auto auto auto;*/
	}
	.bn-01{ top: 475px; right: 105px; }
	.bn-02{ bottom: -10px; right: -150px; }
	.bn-monkey { top: 270px; left: -70px;}
	.bn-bird { top: 15px; left: 25%;}
}



@media all and (max-width: 800px) {
	.bg-green::before, .bg-green::after { display: none;}
	.item-film { width: 90%!important; height: auto;}
	.txt { width: 90%;}
}


@media all and (max-width: 700px) {
	/*header.indexH { height: 48px; }
	.logo-index { top: 52px; left: 20px; text-align: left; }
	.logo-index img { width: 37%; height: auto; }
	.logo-index::after {
	    bottom: -70%;
	    background-size: 180px auto; background-position: left;
	}
	.inner .logo { width: 260px; }*/
	.expert p { color:#e9e8e9; text-align: center;
		width: 90%;
		font-weight: 500;
		margin: auto; padding: 8em 0 3em 0;
		position: relative;
	}
	.expert .video-box {
		border: none;
		padding: 0;
		width: 100%;
		margin: 40px auto 40px auto;
		box-shadow: none;
	}
	.video-box::before { display: none;}
	.purpose {
		width: 100%; height: auto;
		margin: auto auto 55px auto;
		padding-bottom: 30px;
	}
	.purpose .title {
		width: 170px; height: 232px;
		display: block;
		background-image: url("../../images/purposeTitle_s.png");
		top: -60px; left: calc(50% - 85px);
	}
	.point {
		display: flex;
		flex-direction: column;/*元件排序方向*/
		flex-wrap: wrap;
		justify-content: center;/*水平對齊*/
		align-items: flex-end;/*子元素對齊*/
		align-content: center;
		position: relative;
		margin: auto;
		padding-top: 200px;
	}
	.point li:first-child, .point li:nth-child(2) {
		border-right: none;
		border-bottom: #fff solid 1px;
		padding-bottom: 40px;
	}
	.point li { margin: 15px auto; }
	.point li:first-child, .point li:nth-child(2) { padding-right: 0; }
}


@media all and (max-width: 640px) {
	
	.grt-mobile-button{ right: 2.5em; top: 20px;}
	
}

@media all and (max-width: 600px) {
	.expert p { padding: 6em 0 3em 0;}
}


@media all and (max-width: 500px) {
	.banner h1 { 
		width:174px; height: 138px; 
		top: 88px;
		margin: 30px auto auto auto;
		z-index: 99;
		background-image: url("../../images/title_s.png");
		background-size: cover;
	}
	.banner { height: 475px;}
	.bn-bird { display: none; }
	.bn-monkey { display: none;}
	.bn-01 { 
		top: 297px; left: -50px; right: auto;
		-moz-transform:scaleX(-1);
		-webkit-transform:scaleX(-1);
		-o-transform:scaleX(-1);
		transform:scaleX(-1);
	}
	.bn-02 { right: -228px;}

	.film::before, .film::after {display: none;}
	.film h2 {
		width:321px; height: 147px;
		margin: 79px auto auto auto;
	}
	.video-box {
		border: none;
		padding: 0;
		width: 100%;
		margin: 40px auto auto auto;
		box-shadow: none;
	}
	h3 { margin-bottom: .5em;}
	.description {margin-top: 0;}
	.notes { margin-top: -0.5em; margin-bottom: 0.5em;}
	.SocialMedia div {
		width: 80px; height: 100px;
		margin:3em 2em; padding-top: 130px;
		line-height: 5px;
	}
	.SocialMedia a, .SocialMedia a:link { padding-top: 95px; }/*按鈕範圍擴張*/
}	

@media all and (max-width: 460px) {
	
}
@media all and (max-width: 400px) {
	
}

		
@media all and (max-width:360px) {
  .inner img.logo { width: 100px;}
  .feature div { width:L 100%;}
}