.wapper{display: block; background-color:#1f1f1f;overflow: hidden;position: relative;box-sizing: border-box;}
.wapper h2{font-size: 1.87em;font-weight:600;text-align: center;}
.wapper img{width: 100%;}

.codemessage{ color:#f00; padding:.5em; display:none;}


.circle {display: block;width:100%; height:0;padding-bottom:46%; background-image: url(/images/match_img/imgs20190816112323998.jpg);background-repeat: no-repeat;background-size:contain; border-radius:450px;position:relative;right:50%;background-position: 170% 00%  ;overflow: hidden;color: #fff;}
.circle .desc{   position: absolute;  top:50%;  left: 50%;  transform: translate(55%, -50%);color: #fff;}
.desc_phone{ display:none; text-align: center;color: #fff;  position:relative;z-index:1;}
.circle .desc h2 , .desc_phone h2{font-size: 5em;font-weight:600;line-height:1.2em;box-sizing: border-box; padding: 0 20px;}
.circle .desc strong , .desc_phone strong{display:block;font-size: 1.87em;font-weight:600;box-sizing: border-box; padding: 0 20px;}
.circle .desc p , .desc_phone p{font-size: 1.25em;box-sizing: border-box; padding: 0 20px; }
.circle:before{display: block; content: ""; width: 100%; height: 100%; background-color:rgba(0,0,0,.4); position: absolute;}

.form{display:inline-block;width:400px; color: #fff;z-index: 99;position: relative;}
.match_form{position: absolute;  top:50%;  left: 50%;  transform: translate(25%, -52%);box-sizing: border-box; min-height:540px;}
.block{display: block;margin-top:25px;position: relative;}

/*------input樣式------*/
label{display: block;width: 100%; font-weight: 500;}
input{width:100%; border:2px solid #fff;border-radius:30px;background-color:#1f1f1f; box-sizing: border-box;height:45px; line-height:45px; padding:0 10px; color:#fff; font-size:1em; );-webkit-transition: .18s ease-out;-moz-transition: .18s ease-out;  -o-transition: .18s ease-out;  transition: .18s ease-out;font-family:"Noto Sans SC Sliced";}
:-moz-placeholder {color: #fff; }
::-moz-placeholder { color:  #fff;}
:-ms-input-placeholder {color:#fff !important;}
::placeholder { color: #fff;}
input:hover , select:hover {  box-shadow: 0px 0px 8px 5px rgba(0,0,0,.1);-webkit-box-shadow: 0px 0px 8px 5px rgba(0,0,0,.1);	-moz-box-shadow: 0px 0px 8px 5px rgba(0,0,0,.1);-o-box-shadow: 0px 0px 8px 5px rgba(0,0,0,.1);	-ms-box-shadow: 0px 0px 8px 5px rgba(0,0,0,.1);outline: none;}
#code{display: flex;width:45%;float: left;margin-right: 20px;}
textarea {width:100%;height:200px; padding: 10px;box-sizing: border-box;font-family:"Noto Sans SC Sliced";border-radius:5px;border:1px solid #000;}

/*------select樣式------*/
.select{display:flex; flex-wrap: wrap;justify-content:space-between;}
select{display:block;width: 100%; height:45px;  color: #fff;   border:2px solid #fff;border-radius:5px;float: left;font-size:1em;padding:0 10px;border-radius:30px;background-color:#1f1f1f;font-weight: 500; }
.dropdown{ display:inline-block;width:100%; position:relative;padding: 0; }
.dropdown:after { content: '';  position: absolute;  z-index: 2;  top:11px;  right:10px;  width: 0;  height: 0;  border:7px dashed;  border-color: #fff transparent;  pointer-events: none;}
.dropdown:after {  margin-top: 10px;  border-top-style: solid;  border-bottom: none;}
.dropdown select{  -webkit-appearance:none;  -moz-appearance:none;  -o-appearance:none;   appearance:none;-ms-appearance:none; }
.dropdown select::-ms-expand{  display:none;}
.dropdown option{   margin: 3px;  padding: 6px 10px;  text-shadow: none;  background:#1f1f1f; cursor: pointer; line-height: 1.5em;outline:0;}
.dropdown-select:focus {  z-index: 3;width: 100%;  color: #394349;  outline: 2px solid #000;  outline: 2px solid -webkit-focus-ring-color; outline-offset: -2px;}

.estimated_time{display: flex;justify-content: space-between;}
.estimated_time .dropdown{width:30%;}

/*------checkbox樣式------*/
.squaredThree {  position: relative;  margin-top:25px;}
.squaredThree label {  display: inline-block;  float: left;	  width: 20px;  height: 20px;  cursor: pointer;  position: absolute;  top:3px;  left: 0;  background: linear-gradient(to bottom, ##1f1f1f 0%, #000000 100%);  border-radius:5px;  border:2px solid #fff;}
.squaredThree label:after {  content: '';  width: 9px;  height: 5px;  position: absolute;  top: 4px;  left: 4px;  border: 3px solid #fcfff4;  border-top: none;  border-right: none;  background: transparent;  opacity: 0;  transform: rotate(-45deg);}
.squaredThree label:hover::after {  opacity: 0.3;}
.squaredThree input{width: auto; width:20px; }
.squaredThree input[type=checkbox] {  visibility: hidden;}
.squaredThree input[type=checkbox]:checked + label:after {  opacity: 1;}
.squaredThree p{display: inline-block;float: left;margin-left: 30px;}
.squaredThree p a{color: #f1d2bb;text-decoration: underline;}

.area{display: flex;justify-content: space-between;}
.area .dropdown{width:47%;}
.area input{width:47%;}

.enter_code{display: flex;justify-content: space-between; flex-wrap: wrap;}
.enter_code .btn_green_border{ width:40%; color:#54cd96;font-size: 16px;}
.enter_code input{width:55%;}
/*------btn樣式------*/
.btn_green , .btn_green_border{ display: block; width: 100%;border-radius:30px; height: 45px; line-height: 45px;text-align: center;background: linear-gradient(to right, #36ab9d 30%, #5ed793 100%);color: #fff;font-size: 1.25em;font-weight: 500;}
.btn_green_border{border:1px solid #54cd96;background:none;color:#999; }
.btn_green span  , .btn_green_border span{  cursor: pointer;  display: inline-block;  position: relative;  transition: 0.5s;   color: #fff;}
.btn_green_border span{  color: #54cd96;}
.btn_green span:after {  content: '\00bb';  position: absolute;  opacity: 0;  top:-2px;  right: -20px;  transition: 0.5s;}
.btn_green_border span:after{content: '\00AB';  position: absolute;  opacity: 0;  top:-2px;  left: -20px;  transition: 0.5s;}
.btn_green:hover span {  padding-right: 25px;}
.btn_green_border:hover span{  padding-left: 25px;color:#fff;}
.btn_green:hover span:after {  opacity: 1;  right: 0;}
.btn_green_border:hover span:after{ opacity: 1;  left: 0;color:#fff;}
.btn_green_border:hover{background:#54cd96;color:#fff;}

.btn{position: relative;display: flex;justify-content: center;margin-top: 50px;margin-bottom: 50px;z-index: 99;}
.btn a{ width:30%;margin: 20px;}

.btn_all{display: block; width:160px;border-radius:30px; height: 45px; line-height: 45px;text-align: center;border:1px solid #f5ab4f;color: #f5ab4f;font-size: 1.25em;font-weight: 500;position: absolute;right:40px;top:40px;}
.btn_all i{display: inline-block; width:25px; height:25px; background-color:#f5ab4f;border-radius: 100%;color: #212121;line-height:25px;margin-right: 10px;font-size:16px;position: relative;top:-2px;}
.btn_all:hover{background-color:#f5ab4f;color: #fff; }
.btn_all:hover i{background-color:#212121;color:#fff;}


/*------step樣式------*/
.steps-timeline{display: block; width: 100%;margin-bottom: 50px;}
.section-header, .steps-name { display: block; color: #fff;  font-size:1.25em;width:125px;}
.steps-timeline:after {  content: "";  display: table;  clear: both;}
#retail .steps-timeline {  border-color: #ccc;}
#justfab .steps-one,#justfab .steps-two,#justfab .steps-three {  outline: 1px dashed rgba(0, 128, 0, 0);}
#retail .steps-one,#retail .steps-two,#retail .steps-two-one,#retail .steps-two-two,#retail .steps-three {  outline: 1px dashed rgba(0, 128, 0, 0);}
.dot {  display: block;  margin: 14px auto 10px;  width: 20px;  height: 20px;  border: 4px solid #fff;  border-radius: 50%;  background: #212121;}
.steps-name,.steps-description {  margin: 0;}
.dot_check{border: 4px solid #54cd96;box-shadow: 0px 0px 15px #54cd96;background: #fff;}


.match_content{display: block; max-width: 1200px;margin: 0 auto;color:#fff;text-align: center;padding:20px;position: relative;}
.match_content p{font-size: 1.25em;}
.match_content .style_resule{font-size:2.25em; color: #54cd96;font-weight:600;}
.match_content p.note{color: #ee4480;font-weight: 500;}
.match_content p.pSubTitle{color: #ee4480;}

.check_style_collection{display: flex;flex-wrap: wrap;justify-content:flex-start;margin-top:20px;}
.check_style_list{width:30%;margin:20px;position: relative;overflow: hidden;}
.check_style_list a{display: block;}
.check_style_list i{display: inline-block; position: absolute;top:10px;right:10px;width:30px; height: 30px; border-radius: 100%; background-color: #fff;line-height: 30px;border:1px solid rgba(0,0,0,.7);color: #999;}
	.check_style_list i:hover, .check_style_list i:focus, .designer_list i:hover, .designer_list i:focus, .check_style_list i:hover, .check_style_list i:focus, .designer_list i.selected, .check_style_list i.selected {
		background-color: #f5ab4f;
		color: #fff;
		border-color: #f5ab4f;
	}
.check_style_img{display: block; width: 100%; height: 0; padding-bottom:66.5%; overflow: hidden;border-radius:5px;}

.check_style_collection.style_result{justify-content:center;}
.check_style_collection.style_result .check_style_list{ width:40%; }


.select_designer{display: flex;justify-content:flex-start;flex-wrap: wrap;}
.designer_list{width: 30%;margin: 0 20px;position: relative;}
.photo{display: block;width: 120px; height: 120px; border-radius: 100%;margin: 0 auto;overflow: hidden;position:relative; top:60px;z-index: 10;}
.about_project{display: block; width: 100%; background-color: #fff;border-radius: 5px;overflow: hidden;color: #000;position: relative;}
.project_img{display: block; width: 100%; /*background-image: url(/images/match_img/img_20210330092759089.jpg);*/height: 0; padding-bottom:66.5%;background-size: contain;}
.project_img a{display:block; color: #fff; background-color: rgba(0,0,0,.0);height: 0; padding-bottom:66.5%;position: relative;}
.project_img a span{display:none;width: 100%; position: absolute; top: 50%;left: 50%;transform: translate(-50%,-50%);padding: 0 15px;box-sizing: border-box;}
.project_img a:hover{background-color: rgba(0,0,0,.6);}
.project_img a:hover span{display:block;}
.project_info {display: block; width: 100%; padding: 20px; box-sizing: border-box;}
.project_info h3{display: block; font-size: 1.25em;font-weight: 500;margin-bottom: 10px;}
.project_info span{display:block;}
.designer_list i {display:block; position: absolute;width:30px; height: 30px; border-radius: 100%; background-color: #fff;line-height: 30px;border:1px solid rgba(0,0,0,.7); position: absolute;left: 50%;transform: translate(-50%,-50%);color: #999;}


.Rtable {  display: flex;  flex-wrap: wrap;text-align: left; width:80%;margin: 0 auto;margin-top:30px;font-size: 1.25em;margin-bottom:80px;}
.Rtable_row .Rtable-cell:first-child{color: #999;width:33%;}
.Rtable_row{  display: flex;  box-sizing: border-box;    width:50%;  padding: 0.8em 1.2em;  overflow: hidden;  border-bottom: solid 1px #494949;  border-right: solid 1px #494949;box-sizing: border-box;}
.Rtable_row:nth-child(2n){border-right:0;}
.Rtable_row:last-child{border-bottom: 0;}
.Rtable-cell a { color: #fff; }

.match_data {margin-top:80px;}


.budget_select{display: flex;flex-wrap: wrap; justify-content: space-around;margin-top: 50px;}
.budget_select>div{display: block; width: 30%;text-align: center;}
.budget_desc{background-color: #fff; border-radius: 10px;overflow: hidden;padding-bottom:30px;}
.budget_desc>div{width: 100%; padding:15px; box-sizing: border-box;background-color: #7b9fc3;font-size:1.87em;font-weight: 500;margin-bottom: 30px;}
.boutique>div{background-color:#5cbac8;}
.luxury>div{background-color:#f88179;}
.budget_desc>div h3{line-height: 1.5em;}

.budget_select div i{display: block;width: 100%;color:#000;font-size:1.25em;font-weight: 500;margin-top: 5px; }

.budget_select div.radio i{width: 30px; height: 30px; border-radius: 100%; background-color: #fff; line-height: 30px; border: 1px solid rgba(0,0,0,.7); color: #999; cursor:pointer;}
	.budget_select div.radio i.selected {
		background-color: #f5ab4f; color: #fff; border-color: #f5ab4f; }

.budget_select i:before{font-weight:600;}
/*------radio樣式------*/
.radio {
	display: inline-block;
	position: relative;
	margin-bottom: 15px;
}
.radio input[type=radio] {  position: absolute;  opacity: 0;}
.radio input[type=radio] + .radio-label:before { content: "";background: #fff;border-radius: 100%;  border: 1px solid #000;  display: inline-block;  width:25px;  height:25px;  position: relative;  top:3px;  margin-right:5px;  cursor: pointer;  text-align: center;  transition: all 250ms ease;}
.radio input[type=radio]:checked + .radio-label:before {  background-color: #000;  box-shadow: inset 0 0 0 4px #f4f4f4;}
.radio input[type=radio]:focus + .radio-label:before {  outline: none;  border-color: #3197ee;}
.radio input[type=radio]:disabled + .radio-label:before {  box-shadow: inset 0 0 0 4px #f4f4f4;  border-color: #b4b4b4;  background: #b4b4b4;}



.circle01{ display: block; width:70%; height:0%;padding-bottom: 70%; box-sizing: border-box;  margin: 0 auto;   z-index: 2; position:absolute;top:-30%;left: 50%;transform: translate(-50%,-50%); 	background: -webkit-linear-gradient(top, #35ad9f 80%,#71c276 100%); 
background: linear-gradient(top, #35ad9f 80%,#71c276 100%);  background: -o-linear-gradient(top, #35ad9f 80%,#71c276 100%);  background: -mos-linear-gradient(top, #35ad9f 80%,#71c276 100%); border-radius: 100%;}
.circle01 h3{display:inline-block;text-align: center;font-weight:600; font-size: 2.25em; color: #fff; position: absolute;top:90%;left: 50%;        transform: translate(-50%,-50%);line-height: 1.5em;  }
.steps-section.circle01_steps-section{display: block;position: relative;margin-top:20%;}



@media (min-width:320px) and (max-width:1670px) { 
	.circle .desc {transform: translate(40%, -50%);}
	.circle01{  width:73%; height:0%;padding-bottom:73%;  top:-28%; }
}

@media (min-width:320px) and (max-width:1600px) { 	
	.circle .desc {transform: translate(15%, -50%);}	
}


@media (min-width:320px) and (max-width:1450px) { 	
	.circle01{ top:-25%; }
}


@media (min-width:320px) and (max-width:1300px) { 
 
.steps-section.circle01_steps-section{margin-top:30%;}
.circle01{ top:-15%; }
.circle01 h3{top: 85%;}	
}


@media (min-width:320px) and (max-width:1260px) { 	
	.circle .desc h2 {font-size: 3em;}
	.circle .desc strong{font-size: 1.5em;}
	.match_form{  transform: translate(10%, -52%);}
	.check_style_collection{justify-content: space-between;}
	.select_designer{justify-content: space-between;}
	.check_style_list{width:48%;margin: 20px 0;}
	.designer_list{width:48%;margin: 20px 0 0 0;}
}


@media (min-width:320px) and (max-width:1024px) { 	
.IsWeb .container.content{padding-top: 0;}
.wapper_phone{box-sizing: border-box;background-image: url(/images/match_img/imgs20190816112323998.jpg);overflow: auto;}
.wapper_phone:before{display: block; content: ""; width: 100%; height: 100%; background-color:rgba(0,0,0,.7); position: absolute;}
.circle {display: none;}
.desc_phone{display: block;margin-top:100px;}
.match_form{position: relative;display: block; top:0%;  left:0%;  transform: translate(0%, -0%);margin: 0 auto;margin-bottom: 100px;margin-top: 50px;}	
select , input{background-color: transparent;}
.desc_phone h2	{font-size:3.75em; padding: 0 20px;box-sizing: border-box;}
.steps-timeline{display: none;}
.circle01{ top:-8%; }	
.Rtable	{display:block; width:100%;}
.Rtable_row { width:100%;margin: 0 auto;border-right: 0;padding: 15px;}	
.Rtable_row .Rtable-cell:first-child{width:30%;}
}


@media (min-width:320px) and (max-width:780px) {
.check_style_list{width: 100%;}	
.btn a{width:50%;margin: 10px;}
.check_style_collection.style_result .check_style_list{ width:90%; }
.budget_select{margin-top: 0;}
.budget_select>div{width: 100%;margin-top:50px;}
.circle01{ top:-5%; }
.circle01 h3{font-size: 1.87em;}
.btn_all{display: block; position: relative;margin: 0 auto;right: 0;top: 20px;}
}

@media (min-width:320px) and (max-width:640px) {	
.circle01{ top:-3%; }
.circle01 h3{font-size: 1.5em;}	
.information_form{margin-top:40px;}
.check_style_list{width:100%;}
.designer_list{width:100%;}
.Rtable_row { width:90%;}
}

@media (min-width:320px) and (max-width:480px) {
.circle {float: left;    margin-right: 10px;    margin-left: 10px;  }
.desc_phone h2	{font-size:3em;}
.desc_phone strong{ font-size: 1.25em;}	
.desc_phone p{font-size: 1em;margin-top: 10px;}
.form{width:380px;}
.match_content{margin-top:80px;}
.budget_desc>div h3{margin: 0;}
.circle01{ width:90%; height:0%;padding-bottom: 90%; top:0%; }
.circle01 h3{top: 85%;}	
.information_form{margin-top:90px;}
.Rtable_row { padding: 15px 0;}
.Rtable_row .Rtable-cell:first-child{width:40%;}

}


@media (min-width:320px) and (max-width:412px) {
.wapper h2{font-size: 1.5em;}
.form{width:320px;}			
.circle01{ width:100%; height:0%;padding-bottom:100%; top:0%; }
.circle01 h3{top: 82%;}
.information_form{margin-top:120px;}
.Rtable {font-size: 1em;}
.Rtable_row .Rtable-cell:first-child{width:45%;}
}



@media (min-width:320px) and (max-width:355px) {
.circle01{ width:110%; height:0%;padding-bottom:110%; top:0%; }	
	
.match_form{padding: 0 10px;box-sizing: border-box;}
.information_form{width:280px;}	
}


@media screen and (min-width: 460px) {
.steps-section {max-width: 700px;    margin: 70px auto 20px auto;    padding: 0 20px; position: relative;}
.steps-timeline {border-top: 4px solid #e74682;padding-top: 20px;margin-top:150px;margin-left: 20px;margin-right: 20px; }
#justfab .steps-one,#justfab .steps-two,#justfab .steps-three {    float: left;    width: 33%;    margin-top: -50px;	}
#retail .steps-one,#retail .steps-two,#retail .steps-two-one,#retail .steps-two-two,#retail .steps-three {float: left;width: 20%;margin-top: -50px;  }
#justfab .steps-one {margin-left: -16.65%;margin-right: 16.65%;  }
#justfab .steps-two {margin-left: -24.45%;margin-right: 24.45%;}
#justfab .steps-three {margin-left: 16.65%;margin-right: -16.65%;}
#retail .steps-one {margin-left: -9.65%;  }
#retail .steps-two {margin-left: 4.65%;margin-right: 4.65%;}
#retail .steps-two-one {margin-right: 4.65%;}
#retail .steps-three {margin-left: 4.65%;    margin-right: -18.65%;  }
.steps-name {text-align: center;  }
.steps-description {text-align: center;}
}

@media screen and (max-width: 460px) {
.steps-section {width: 140px;float: left;  }
.steps-timeline {border-left: 4px solid #e74682;margin-left: 15px;}
#justfab .steps-one,#justfab .steps-two,#justfab .steps-three {margin-left: -25px;  }
 #retail .steps-one,#retail .steps-two,#retail .steps-two-one,#retail .steps-two-two,#retail .steps-three {    margin-left: -25px;  }
 #justfab .steps-one {padding-bottom: 15px;}
#justfab .steps-two {padding-bottom: 140px;}
#justfab .steps-three {margin-bottom: -100%;  }
#retail .steps-one,#retail .steps-two,#retail .steps-two-one,#retail .steps-two-two {padding-bottom: 16.8px;}
#retail .steps-two-two {padding-top: 16.8px;}
#retail .steps-three {    margin-bottom: -100%;  }
.steps-name {    display: inline-block;    margin-top: 10px;  }

}