@charset "utf-8";

/* Become Renobro Page Setting
***********************/
.becomeRenobroPage
{}
.bannerArea
{ background:url(../images/become-renobro/img-banner.jpg) no-repeat center center; background-size:cover;}
.bannerArea .innerArea
{ position:relative; height:290px; padding-top:110px;}
.bannerArea .innerArea h1
{ position:relative; margin:0px auto; text-align:center;}
.bannerArea .innerArea h1 span
{ font-size:45px; font-size:3.75rem; line-height:1.3; color:#fff; border-bottom:5px solid #3ed1c5;}

.flowRow
{ width:86%; margin:0px auto; padding-bottom:180px; padding-right:8%;}
.flowRow .tit
{ width:140px; font-size:34px; font-size:2.833rem; line-height:1.3; color:#00c4b4;}
.flowRow .flowStep
{ position:relative; width:120px;} 
.flowRow .flowStep span
{ background:#00c4b4; display:inline-block; width:74px; height:74px; font-size:50px; font-size:4.167rem; color:#fff; -webkit-border-radius: 74px; -moz-border-radius: 74px; border-radius: 74px; vertical-align:middle; line-height:74px; font-family:'Anton', Arial, Helvetica, sans-serif;}
.flowRow .flowNext
{}
.flowRow .flowNext hr
{ border:none; height:10px; background:url(../images/common/img-sep-dashed.gif) repeat-x center center;}
.flowRow .flowArrow
{ width:60px;}
.flowRow .flowArrow img
{ width:40px; height:auto;}

.flowRow .flowStep01Desc
{ position:absolute; top:100px; left:50%; margin-left:-50px; width:100px; text-align:center; font-size:24px; font-size:2rem; line-height:1.3; color:#666;}
.flowRow .flowStep02Desc
{ position:absolute; top:100px; left:50%; margin-left:-100px; width:200px; text-align:center; font-size:24px; font-size:2rem; line-height:1.3; color:#666;}
.flowRow .flowStep03Desc
{ position:absolute; top:100px; left:50%; margin-left:-145px; width:290px; text-align:center; font-size:24px; font-size:2rem; line-height:1.3; color:#666;}


.workerForm
{}
.workerForm .formArea
{ margin:0px auto; width:80%;}
.workerForm .formArea .inputRow
{ margin-bottom:30px;}
.workerForm .formArea .labelCol
{ padding-top:8px; width:25%; font-size:22px; font-size:1.6667rem; line-height:1.3; color:#666; text-align:left; vertical-align:top;}
.workerForm .formArea .inputCol
{ text-align:left;}
.workerForm .formArea .inputCol label
{ font-size:22px; font-size:1.6667rem; color:#666; text-align:left; vertical-align:top; margin-left:0px; margin-right:10px;}
.workerForm .formArea .inputCol input.radioInput
{ position:absolute; left:-999999px;}
.workerForm .formArea .inputCol span
{ -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%;}
.workerForm .formArea .inputCol .inputField
{ padding:5px; border:1px solid #CCC; vertical-align:top; background:#fff;}
.workerForm .formArea .inputCol input
{ width:100%; font-size:18px; font-size:1.5rem; color:#666; text-align:left;}
.workerForm .formArea .inputCol textarea
{ width:100%; height:100px; font-size:18px; font-size:1.5rem; color:#666; text-align:left; resize:none; background:none; border:none;}
.workerForm .btnSubmit
{ width:160px; margin:0px auto;}
.workerForm .btnSubmit a
{ display:block; padding:10px 20px; background:#f8da0a; font-size:24px; font-size:2rem; color:#000; line-height:1.3; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.3); -moz-box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.3); box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.3); text-align:center;}




@media screen and (max-width:970px){
/* Become Renobro Page Setting
***********************/
.flowRow
{ width:90%; margin:0px auto; padding-bottom:120px; padding-right:8%;}
.flowRow .tit
{ font-size:28px; font-size:2.333rem; }
.flowRow .flowStep01Desc
{ font-size:20px; font-size:1.667rem; }
.flowRow .flowStep02Desc
{ font-size:20px; font-size:1.667rem; }
.flowRow .flowStep03Desc
{ font-size:20px; font-size:1.667rem; }

.workerForm .formArea
{ width:90%;}
.workerForm .formArea .inputRow
{ margin-bottom:30px;}
.workerForm .formArea .labelCol
{ width:30%; font-size:22px; font-size:1.6667rem; }
.workerForm .formArea .inputCol label
{ display:inline-block; width:30%; font-size:22px; font-size:1.6667rem; margin-left:0px; margin-right:1%;}
.workerForm .formArea .inputCol input
{ width:100%; font-size:18px; font-size:1.5rem;}
.workerForm .formArea .inputCol textarea
{ width:100%; height:100px; font-size:18px; font-size:1.5rem; color:#666; text-align:left; resize:none; background:none; border:none;}
.workerForm .btnSubmit
{ width:160px; margin:0px auto;}
.workerForm .btnSubmit a
{ display:block; padding:10px 20px; background:#f8da0a; font-size:24px; font-size:2rem; color:#000; line-height:1.3; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.3); -moz-box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.3); box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.3); text-align:center;}
}

@media screen and (max-width:768px){
/* Become Renobro Page Setting
***********************/
.becomeRenobroPage
{}
.bannerArea .innerArea
{ height:290px; }
.bannerArea .innerArea h1 span
{ font-size:42px; font-size:3.5rem; }

.pageTit
{ font-size:28px; font-size:2.333rem; }


.flowRow
{ width:100%; margin:0px auto; padding-bottom:50px; padding-right:0%;}
.flowRow .tit
{ display:block; width:100%; font-size:28px; font-size:2.333rem; text-align:center; margin-bottom:20px;}
.flowRow .flowStep
{ display:block; width:100%; } 
.flowRow .flowStep span
{ background:#00c4b4; display:inline-block; width:60px; height:60px; font-size:50px; font-size:3rem; color:#fff; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; vertical-align:middle; line-height:60px; font-family:'Anton', Arial, Helvetica, sans-serif; margin-bottom:10px;}
.flowRow .flowNext
{ display:block; width:100%; padding:10px 0px;} 
.flowRow .flowNext hr
{ display:none; border:none; height:10px; background:url(../images/common/img-sep-dashed.gif) repeat-x center center;}
.flowRow .flowArrow
{ display:block; width:100%; } 
.flowRow .flowArrow img
{ width:30px; height:auto; -ms-transform: rotate(90deg); /* IE 9 */ -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */ transform: rotate(90deg);}

.flowRow .flowStep01Desc
{ position:relative; top:0px; left:0px; margin-left:0px; width:100%; font-size:20px; font-size:1.667rem; }
.flowRow .flowStep02Desc
{ position:relative; top:0px; left:0px; margin-left:0px; width:100%; font-size:20px; font-size:1.667rem; }
.flowRow .flowStep03Desc
{ position:relative; top:0px; left:0px; margin-left:0px; width:100%; font-size:20px; font-size:1.667rem; }

.workerForm .formArea
{ width:100%;}
}

@media screen and (max-width:700px){
.bannerArea .innerArea
{ padding-top:80px;}

.workerForm .formArea .inputRow
{ margin-bottom:30px;}
.workerForm .formArea .labelCol
{ font-size:18px; font-size:1.5rem; }
.workerForm .formArea .inputCol label
{ font-size:18px; font-size:1.5rem; margin-left:0px; margin-right:10px; white-space:nowrap;}
.workerForm .formArea .inputCol input
{ width:100%; font-size:18px; font-size:1.5rem;}
.workerForm .formArea .inputCol textarea
{ width:100%; height:100px; font-size:18px; font-size:1.5rem;}
.workerForm .btnSubmit
{ width:160px; margin:0px auto;}
.workerForm .btnSubmit a
{ font-size:20px; font-size:1.667rem;}
}



@media screen and (max-width:425px){
/* Font Size Ratio
font-size:13px; : font-size:4vw;
font-size:14px; : font-size:4vw;
font-size:16px; : font-size:4vw;
font-size:18px; : font-size:4.2vw;
font-size:20px; : font-size:5vw;
font-size:24px; : font-size:5.5vw;
font-size:30px; : font-size:6vw; 
font-size:36px; : font-size:7vw; 
font-size:80px; : font-size:14vw; 
**************************/
/* Become Renobro Page Setting
***********************/
.becomeRenobroPage
{}
.bannerArea .innerArea
{ height:160px; }
.bannerArea .innerArea h1 span
{ font-size:36px; font-size:8.5vw; }

.pageTit
{ font-size:24px; font-size:6vw; margin-bottom:20px; margin-bottom:5vw;}

.flowRow
{ padding-bottom:30px; padding-bottom:7.5vw; }
.flowRow .tit
{ font-size:24px; font-size:6vw; margin-bottom:20px; margin-bottom:5vw;}
.flowRow .flowStep
{ display:block; width:100%; } 
.flowRow .flowStep span
{ width:15vw; height:15vw; font-size:50px; font-size:7.5vw; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; line-height:15vw; margin-bottom:10px;}
.flowRow .flowNext
{ padding:5px 0px;} 
.flowRow .flowArrow img
{ width:30px; height:auto;}

.flowRow .flowStep01Desc,
.flowRow .flowStep02Desc,
.flowRow .flowStep03Desc
{ font-size:16px; font-size:4vw; }

.workerForm .formArea .inputRow
{ margin-bottom:10px; margin-bottom:2.5vw;}
.workerForm .formArea .labelCol
{ display:block; width:100%; font-size:15px; font-size:3.75vw; margin-bottom:10px; margin-bottom:2.5vw;}

.workerForm .formArea .inputCol
{ display:block; width:100%;}
.workerForm .formArea .inputCol label
{ display:inline-block; width:30%; font-size:15px; font-size:3.75vw; margin-left:0px; margin-right:1%;}
.workerForm .formArea .inputCol input
{ width:100%; font-size:15px; font-size:3.75vw;}
.workerForm .formArea .inputCol textarea
{ width:100%; height:100px; font-size:15px; font-size:3.75vw;}
.workerForm .btnSubmit a
{ font-size:16px; font-size:4vw;}
}