/*service*/
.service_mobile{display: none;}
.service{padding: 10rem 0 0 4rem;}
.service dl{padding-bottom: 8rem;}
.service dd{
	vertical-align: top;
	overflow: hidden;	
	box-sizing: border-box;
}
.service hgroup h2{bottom: 20%;}
.service dl dd:first-child{	width: 34rem;}
.service_contact{
	background-image: url(../images/bg_mejor_service.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position:right bottom;
}
.service_box{
	background-color: #000;
	width: 100%;
	position: relative;
}
.service_item{
	color: #fff;
	padding: 6rem 2rem;
}
.service_item dl{
	vertical-align: top;
	padding:0 4rem;
	width: calc(100% / 5 - 7.5rem);
	border-right: 1px solid #434343;
	height: 100%;
	min-height: 32rem;
	min-width: 10rem;
}
.service_item dl:last-child{border-right: 0;}
.service_item dl dd.service_icon h3{
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 2.4rem;
	height: 6rem;
}
.service_item dl dd.service_icon ul{text-align: center;}
.service_item dl dd.service_icon ul li:last-child{padding: 1rem 0;}
.service_item dl dd.service_icon ul li:first-child{
	border: 2px solid #fff;
	border-radius: 100rem;
	padding: 2rem;
	width: 6rem;
	height: 6rem;
	margin: 0 auto;
}
.service_list ul li{
	list-style-type: disc;
	line-height: 2.2rem;
	font-weight: 200;
}

/*PROJECTPROCESS*/
.pj_progess{
	padding: 4rem 2rem;
	position: relative;
}
/*PROJECTPROCESS標題 置中*/
.title_center{
	width: 50rem;
	margin: 0 auto;
	text-align: center;
	box-sizing: border-box;
}
.title_center h2{
	bottom:20%;
	position: absolute;
}
.pj_list{
	padding: 4rem 0;
	height: 100%;
	display: table;
	border-spacing: 1rem 0;
}
.pj_list dd{
	display: table-cell;
	box-sizing: border-box;
	border:6px solid #000;
	padding: 2rem;
	width: 21rem;
}
.pj_list dd h5{
	font-size: 5rem;
	font-family:"Anton";
	height: 7rem;	
}
.pj_list dd h1{
	font-size: 2rem;
	line-height: 2.2rem;
	padding: 1rem 0;
	font-weight: 400;
}
.pj_list dd p{
	line-height: 2rem;
}
.contact_button{text-align: center;}

/*About*/
.about_contact_mobile{display: none;}
.about{
	padding: 10rem 4rem 6rem 4rem;
	background-image: url(../images/img_aboutmejor.png);
	background-repeat: no-repeat;
	background-size: 40%;
	background-position: center right 15%;
}

.about_contact dd{
	box-sizing: border-box;
	vertical-align: top;
}
/*
.about_contact dd:last-child{text-align: center;}
.about_contact dd:last-child img{width: 60%;}
*/
.about_contact .title, .about_contact p{width: 27rem;}
.about_contact .title h2{bottom:22%;}
.client{
	background-color: #000;
	color: #fff;
	box-sizing: border-box;
	padding: 6rem 4rem;
}
.clinet_logo{	
	box-sizing: border-box;
	margin:3rem 0; 
}
.clinet_logo dd{
	display: inline-block;
	width:calc(100% / 4 - 2.3rem);
	height: 10rem;
	outline: 1px solid #333;
	margin: 1rem;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #fff;
}

.contact{padding: 10rem 4rem 0 4rem;}
.contact_box{
	display: table;
	width: 100%;
	padding-bottom: 6rem;
}
.contact_box dd{
	display: table-cell;
	box-sizing: border-box;
	vertical-align: top;
}
.contact_box dd:last-child{	text-align: center;}
.contact_box .main_title{width: 30rem;}
.contact_box .main_title .title h2{ bottom: 40%;}
.contact_from ul{
	padding:0 0 0 4rem;
	box-sizing: border-box;
}
.contact_from ul li{margin: 0 0 2rem 0;}
.contact_from input, .contact_from textarea{
	width: 100%;
	border: 4px solid #000;
	padding: 1rem;
	font-size: 1.2rem;
	font-family:"NotoSansTC","微軟正黑體";
	box-sizing: border-box;
}
.contact_msg{padding-top:1rem;}
.contact_msg h6{
	font-weight: 600;
	font-size: 1.4rem;
	padding: .5rem 0;
}
.contact_msg ul li{
	line-height: 1.6rem;
	padding: .2rem 0;
}
.maps iframe{
	width: 100%;
	height: 600px;
	border: 0;
}

/*CASE內頁*/
.aboutcase{
	width: 21rem;
	padding:1rem 0;
}
.aboutcase li{line-height: 1.8rem;}
.case_morebtn{
	background-color: transparent;
	font-family:"Anton", "NotoSansTC","微軟正黑體";
	font-size: 1.4rem;
	margin: 1rem 0 0 0;
	padding: 0;
	border: 0;
	position: relative;
}
.case_morebtn:hover::after{
	 content: "";
	border: solid #000 3px;
	display: inline-block;
	position: absolute;
	z-index: 9999;
	left: -.2rem;
	top:38%;
	width: 100%;
	/*transform:rotate(-8deg);*/
	-webkit-animation-name: "fadeInLeft";
    -webkit-animation-duration: 0.5s;
    -webkit-animation-iteration-count: 1;
	z-index: 0;
}
	@-webkit-keyframes fadeInLeft {
	0% {
		opacity: 0;
		transform:rotate(0);
		}	
	100% {
		opacity: 1;
		/*transform:rotate(-8deg);*/
		}
	
}


@media (max-width: 1560px) {
.service_contact{background-size: 57%;}
}
@media (max-width: 1280px) {
.service_item dl{min-width: 12rem;}/*service*/	
.clinet_logo dd{width:calc(100% / 3 - 2.3rem);}
/*CASE內頁*/
.aboutcase{	width: auto;}	
}
@media (max-width: 1200px) {
.service dl {padding-bottom: 0; margin-bottom: -2px;}	
.service{padding: 10rem 4rem 0 4rem;}
.service hgroup h2 {bottom: 40%;}
.service_item dl{min-width: 10rem;}
.service dl dd:first-child {
	width: auto;
	padding: 0;
	text-align: center;
	}
.service_contact dd:first-child {border-left: 0;}	
.service_contact{background-image: none;}
.service_mobile{
	display: block;
	margin-top: 2rem;
	box-sizing: border-box;
	}
}
@media (max-width: 1160px) {
.about{background-image: none;}	
.about_contact_mobile{
	display: block;
	box-sizing: border-box;
	padding:0 3rem 3rem 3rem;
	}
.about_contact{background-image: none;}	
.about_contact .title, .about_contact p{width:auto;}
.about_contact .title{text-align: center;}	
.about_contact .title h2{bottom:35%;}
.about_contact .main_title { border-left: 0!important; padding: 0!important;}
.contact_box{display: block; width: auto;}
.contact_box dd{display: block;}
.contact_box .main_title{width:auto;}	
.contact_from ul{padding:0;}
.contact_box .main_title .title{text-align: center;}
.contact_box .main_title{border: 0!important; padding: 0!important;}
.contact_from ul li{margin: 2rem 0;}	
}
@media (max-width: 950px) {
.about{	background-image: none;}
.about_contact .title h2{bottom:18%;}
.clinet_logo dd{width:calc(100% / 2 - 2.3rem);}	
}
@media (max-width: 900px) {
.service {padding: 6rem 2rem 0 2rem;}
.contact {padding: 6rem 2rem 0 2rem;}	
.about{	padding: 6rem 2rem;}
.client {padding: 6rem 2rem;}	
.title_center{width: auto;}	
.about_contact .title h2{bottom:35%;}
.clinet_logo dd{width:calc(100% / 2 - 1.2rem);	margin: .5rem;}	
.contact_from{padding-top: 1rem;}	
.contact_from ul li{margin: 0 0 1rem 0;}
.title_center h2 {bottom: 35%;}		
}
@media (max-width: 650px) {	
.title_center h2 {bottom: 25%;}		
.about_contact_mobile{padding: 0;	margin-bottom: 2rem;}
.client {  padding: 4rem 2rem;}	
.contact_box{padding-bottom: 4rem;}	
.pj_progess{
	padding: 4rem 0;
}	
}
@media (max-width: 560px) {		
.service hgroup h2 {bottom: 45%;}
.pj_list dd{min-width: 20rem;}
.about_contact .title h2{bottom:25%;}
.clinet_logo dd{height: 6rem;}
.maps iframe{height: 400px;}
.contact_from input, .contact_from textarea{padding: .5rem;}	
}
@media (max-width: 470px) {.service hgroup h2 {bottom: 25%;}}
@media (max-width: 320px) {
.clinet_logo { margin: 2rem 0;}	
.clinet_logo dd{height: 4rem;}
.contact_from input, .contact_from textarea{font-size: 1rem;}	
}