@import 'responsibility_style.css';
/*-----------------------------------------------------------------------------------------------------------------
7. 從業道德
-----------------------------------------------------------------------------------------------------------------*/

*{box-sizing: border-box;  /*讓border 不會增加div的寬度*/}


.fit_w_h_top{height:100px;}
.img1{background:url('../images/responsibility_ec1.jpg') no-repeat top center;  /*photo by florian-klauer-489-unsplash*/}
.white{color:#fff;		text-shadow:1px 1px 2px rgba(0,0,0,0.8),1px 1px 2px rgba(0,0,0,0.8),1px 1px 2px rgba(0,0,0,0.8);}
.black{color:#000;	text-shadow:1px 1px 2px rgba(255,255,255,0.8),1px 1px 2px rgba(255,255,255,0.8),1px 1px 2px rgba(255,255,255,0.8);}

body{background:none;}

/*------------------------------------------sales form --------------------------------------*/

.checkcode{border:1px solid #ccc; border-radius:5px; width:115px; height:2em; }
.required_fill{color:  rgba(236, 60, 0, 0.78);text-transform: uppercase;letter-spacing:0.12em;font-size: 13px; font-weight:bold; padding-left:0.75em;}

/*a{color:#BD1A1A; font-weight:bold;}
a:hover{color:#2b9fd9; }*/

.buttonSubmit
{
    position: relative;
    display: block;
    padding: 10px 20px 10px 20px;
    color: #FFF;
    margin: 0 auto;
    background: #BD1A1A; 
    font-size: 18px;
    text-align: center;
    font-style: normal;
    border-radius:5px;
    border: 1px solid #E14900;
    border-width: 1px 1px 3px;
    margin-bottom: 10px;
    -moz-box-shadow: inset 0px 1px 0px 0px #F24F00;
    -webkit-box-shadow: inset 0px 1px 0px 0px #F24F00;
    box-shadow: inset 0px 1px 0px 0px #F24F00;
    background:linear-gradient(to bottom, #ff7e53 5% , #ff3f00 100%);
    
}


.buttonSubmit:hover
{
    background:linear-gradient(to bottom, #ff3f00 5% , #FF7E53 100%);
    background-color: #ff3f00;
}



/*header {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100px;
    z-index:99;
}
*/
section.content {
	flex: 1;
	margin:0; 
	padding:0;
	width:100%;
	display:table;
}
.content .box{
	height:100%; 
	display:table-cell;}
	
.left-side{
	padding:50px;
	
	background-size: cover;
	width:40%;
	vertical-align:bottom; 
	
	}

.left-side h3{
	color:#fff; 
	font-size:3rem;  
	text-align:center; 
	text-shadow:1px 1px 1px rgba(0,0,0,0.8); 
	margin-top:300px; 
	line-height:1.2em;
	font-family:"Ubuntu" ,"Microsoft JhengHei UI" ,"Microsoft JhengHei", sans-serif,Arial, Verdana; 
}
	
.left-side div{
	background:rgba(0,0,0,0.6); 
	color:#fff;
	padding:2em; 
	border-radius:20px; 
	line-height:1.6em; 
	/*margin:0 3em 0 3em; */
	font-size:1.15em;}
	
.right-side{
	padding:120px 120px 20px 120px;
	width:60%;}


/*set1*/
.input {
	position: relative;
	z-index: 1;
	display: inline-block;
	margin: 0.5em;
	max-width: 350px;
	width: calc(100% - 2em);
	vertical-align: top;
}

.input__field {
	position: relative;
	/*display: block;*/
	/*float: right;*/
	padding: 0.3em;
	
	width: 60% auto;
	border: none;
	border-radius: 0;
	background: #f9f9f0;
	color: #333;
	font-weight: bold;
	font-family: 'lato', sans-serif;
	-webkit-appearance: none; /* for box shadows to show on iOS */
}

.input__field:focus {
	outline: none;
}

.input__label {
	display: inline-block;
	float: right;
	padding: 0 1em;
	width: 40%;
	color: #6a7989;
	font-weight: bold;
	font-size: 70.25%;
	-webkit-font-smoothing: antialiased;
   	-moz-osx-font-smoothing: grayscale;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.input__label-content {
	position: relative;
	display: block;
	padding: 1.6em 0;
	width: 100%;
}

.graphic {
	position: absolute;
	top: 0;
	left: 0;
	fill: none;
}

.icon {
	color: #ddd;
	font-size: 150%;
}

/* Individual styles */



/*------------------------- Isao -------------------------*/
.input--isao{max-width: none;}


.input__field--isao {
	z-index: 10;
	padding: 0.75em 0.1em 0.25em;
	background: transparent;
	color: #afb3b8;
}

.input__label--isao {
	position: relative;
	overflow: hidden;
	padding: 0;
	width: 100%;
	text-align: left;
	
	height: calc(100% - 1em);
	pointer-events: none;
	font-family: 'lato', sans-serif;
	text-transform: uppercase;
	font-size: 13px;
	color: rgba(236, 60, 0,0.78);
	letter-spacing: 0.12em;
}

.input__label--isao::before {
	content: '';
	position: absolute;
	top: 0;
	width: 100%;
	height: 3px;
	background: #dadada;
	-webkit-transform: scale3d(1, 0.4, 1);
	transform: scale3d(1, 0.4, 1);
	-webkit-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	-webkit-transition: -webkit-transform 0.3s, background-color 0.3s;
	transition: transform 0.3s, background-color 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	
}

.input__label--isao::after {
	content: attr(data-content);
	position: absolute;
	top: 0;
	left: 0;
	padding: 0.75em 0.15em;
	color: #da7071;
	opacity: 0;
	-webkit-transform: translate3d(0, 50%, 0);
	transform: translate3d(0, 50%, 0);
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	pointer-events: none;
}

.input__field--isao:focus + .input__label--isao::before {
	background-color: hsl(20, 100%, 50%);
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
}

.input__field--isao:focus + .input__label--isao {
	pointer-events: none;
}

.input__field--isao:focus + .input__label--isao::after {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.input__label-content--isao {
	padding: 0.75em 0.15em;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.input__field--isao:focus + .input__label--isao .input__label-content--isao {
	opacity: 0;
	-webkit-transform: translate3d(0, -50%, 0);
	transform: translate3d(0, -50%, 0);
}




/*------------------------- Jiro -------------------------*/
.input--jiro {
	margin-top: 2em;
}

.input__field--jiro {
	padding: 0.85em 0.5em;
	width: 100%;
	background: transparent;
	color: #DDE2E2;
	opacity: 0;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.input__label--jiro {
	position: absolute;
	left: 0;
	padding: 0 0.85em;
	width: 100%;
	height: 100%;
	text-align: left;
	pointer-events: none;
}

.input__label-content--jiro {
	-webkit-transition: -webkit-transform 0.3s 0.3s;
	transition: transform 0.3s 0.3s;
}

.input__label--jiro::before,
.input__label--jiro::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.input__label--jiro::before {
	border-top: 2px solid #6a7989;
	-webkit-transform: translate3d(0, 100%, 0) translate3d(0, -2px, 0);
	transform: translate3d(0, 100%, 0) translate3d(0, -2px, 0);
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;
}

.input__label--jiro::after {
	z-index: -1;
	background: #6a7989;
	-webkit-transform: scale3d(1, 0, 1);
	transform: scale3d(1, 0, 1);
	-webkit-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
}

.input__field--jiro:focus,
.input--filled .input__field--jiro {
	opacity: 1;
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;
}

.input__field--jiro:focus + .input__label--jiro .input__label-content--jiro,
.input--filled .input__label-content--jiro {
	-webkit-transform: translate3d(0, -80%, 0);
	transform: translate3d(0, -80%, 0);
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.input__field--jiro:focus + .input__label--jiro::before,
.input--filled .input__label--jiro::before {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

.input__field--jiro:focus + .input__label--jiro::before,
.input--filled .input__label--jiro::before {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.input__field--jiro:focus + .input__label--jiro::after,
.input--filled .input__label--jiro::after {
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.width100{
	width: 100%;
}

.width50{
	width: 39%;
}

.input__field::placeholder{
	 opacity: 0;	
}
.input__field:focus::placeholder{
	color: #afb3b8;
	opacity: 1;	
}

@media screen and (max-width: 1440px) {
	.left-side div { 
		margin:0 1em 3em 1em;
		font-size:1.05em;
	}
	.right-side{ padding:120px 80px 80px 80px;}
}

@media screen and (max-width: 1024px) {
	.left-side{width:50%;}	
	.left-side div{margin:0 0.5em 0 0.5em;}
	.right-side{width:50%; padding:120px 50px 50px 50px;}
	
}

@media screen and (max-width: 768px) {
	.left-side{padding:20px;}
	.left-side div{ margin:0; font-size:0.9em;}
	.left-side h3{font-size:2.5rem; line-height:1em;}
	.right-side{padding: 120px 20px 20px 20px;}
	.checkcode{width:40px;}
	.input {margin:0.3em;}
	
}

@media screen and (max-width: 414px) {
	
	.content .box{
		height:100%; 
		display:block;
	}
	.left-side , .right-side{width:100%;}
	
	.left-side h3{font-size:2rem; line-height:0.5em;}
	.left-side div{font-size:0.89em;padding:1.2em;}
	.right-side{ padding:30px;}
	.required_fill , .input__label--isao{font-size:0.8em;}
		
}