/*設定螢幕*/

@media all and (max-width: 1479px) {
	.mainCont { width: 100%;}
	.menuCont { width: 100%;}
	.banner { width: 100%;}
	/*.about h2 { margin-bottom: 14%;}*/
	/*.about img { max-width: none; min-height: 100%;
		width: auto; height: 100%;
	}*/
}

@media all and (max-width: 1279px) {
	
	.category > div { padding: 47px 30px 0 30px; height: 600px; }
	.category .icon { width: 160px; height: 160px; margin-left: calc(50% - 80px);}
	.category .icon-brand { margin-left: calc(50% - 58px); }
	.category .icon-brand img { width: 73%; height: auto; }
	.category .icon-graphic img { width: 100%; height: auto; }
	.category .icon-interior { margin-left: calc(50% - 70px); }
	.category .icon-interior img { width: 88%; height: auto; }
	.number { margin-bottom: 160px; }
	
}
@media all and (max-width: 1179px) {
	.detail .circle {
		width:200px; height:200px;  
		top: calc(50% - 100px);
		left: calc(50% - 100px);
	}
}

@media all and (max-width: 1079px) {
	.detail .circle {
		width:100px; height:100px;  
		top: calc(50% - 50px);
		left: calc(50% - 50px);
	}
	.d-info { padding: 0 35px 26px 35px; }
	.contact { width: 90%; }
}

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

	
}

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

@media all and (max-width: 1000px) {
	.menuCont { position: initial; }
	.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: #dedcd5; 
	}
	
	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: #dedcd5;/*#f3efe6*/
		width: 100%;
		left: 0;
		right: 0;
		top: 0;
		height:100%;
		overflow-y: scroll;	
		position: absolute;	
	}
	.inner ul.pcNav.open-grt-menu { padding: 34px 10px 0 10px;}
	.inner ul.pcNav.open-grt-menu li, .inner ul.pcNav.open-grt-menu li a { color: #443F3D;}
	.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: #DEDCD5;
	}
	.grt-mobile-button .line1, .grt-mobile-button .line2, .grt-mobile-button .line3 {
		width: 30px; height: 4px; 
		background-color: #443f3d; 
		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);}
	/*第二層選單*/
	ul.grt-menu.pcNav li > ul.drop-down-menu li { font-size: inherit;}
	ul.grt-menu.pcNav li:hover>ul.drop-down-menu {
	display: inline-flex;
}
	ul.drop-down-menu {
		display: inline-flex;
		flex-direction: column;
		position: relative;
		top: auto; left: auto;
		margin-top: 2em;
	}
	
    
}



@media all and (max-width: 999px) {
	.about-t { padding: 45px 75px 0 75px; }
}

@media all and (max-width: 899px) {
	.category .c-title span { display: block; margin-left: 0;}
}

@media all and (max-width: 850px) {
	.list { flex-direction: column; }
	.list > div { 
		width: 100%; height: 0; 
		padding-bottom: 67%;
	}
	/*.list div a{ padding-bottom: 67%; }*/
	.detail .circle {
		width:274px; height:274px;  
		top: calc(50% - 137px);
		left: calc(50% - 137px);
	}
	.list div.wh {
		padding-bottom: 134%;
	}
	
}

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


@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; }*/
}

@media all and (max-width: 699px) {
	.inner-item div { padding: 0 37px; }
	.logo { margin: 20px 0 15px 37px;  }
	.circle { right: 53px; }
	.banner h1 { padding: 227px 0 0 37px; }
	.category { flex-direction: column; }
	.category > div { width: 100%;
		border-right: none;
		border-bottom: #424248 solid 1px;
	}
	.category > div:first-child { border-left: none; }
	.category > div:last-child { border-bottom: none; }
	.category .icon { width: 250px; height: 250px; margin-left: calc(50% - 125px);}
	.category .icon-brand { margin-left: calc(50% - 91px); }
	.category .icon-interior { margin-left: calc(50% - 110px); }
	.number { margin-bottom: 100px; }
	.about {flex-direction: column; }
	.about div { width: 100%; }
	p.tw { line-height: 1.9em; }
	p.en { line-height: 1.9em;}
	
}


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

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

@media all and (max-width: 599px) {
	.detail .circle {
		width:100px; height:100px;  
		top: calc(50% - 50px);
		left: calc(50% - 50px);
	}
}	

@media all and (max-width: 500px) {
	.banner { height: 880px; }
	.banner h1 { 
		padding: 480px 0 0 0;
		width: 360px;
		margin: 0 auto;
	}
	.circle { 
		width:298px;
		height:298px;  
		left: calc(50% - 149px);
		top: 121px;
		right: auto;
	}
	
}	
@media all and (max-width: 460px) {
	
}
@media all and (max-width: 400px) {
	/*.logo-index::after { display: none; }
	.logo-index img { width: 200px; height: auto; }
	.inner .logo { width: 200px; left: 15px; top:25px; }*/
	
}

		
@media all and (max-width:360px) {
  .inner img.logo { width: 100px;}
  .banner h1 { 
		padding: 480px 10px 0 10px;
		width: 100%;
		margin: 0 auto;
	}
}