@charset "UTF-8";
body {
	-webkit-font-smoothing: antialiased;
	word-wrap:break-word;
	overflow-wrap:break-word;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
figure {
    display: block;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    margin-bottom:0;
}
ul {list-style: none; padding-left: 0;}
img {vertical-align: bottom;}

.advisorHeder {width: 100%; position: relative; margin: 20px auto; padding: 0 20px;}
.advisorHeder h1{line-height: 1; font-size: 16px; display: inline-block; margin: 0;}
.main {width: 100%; margin: 4% auto;}
.mainVisual {width: 100%;}
.inner {
    /* background: url(https://www.muji.com.cn/cn/net/contents/img/panel/sadvisor_main.jpg) center center / cover no-repeat; */
    background: url(https://www.muji.com.cn/cn/net/contents/img/panel/SAIntro30301-1.jpg) center center / cover no-repeat;
    width: 100%;
    height: 100vh;
    background-attachment: fixed;
    background-size: cover;
    position: relative;
}
.wrap {text-align: center; color: #FFF;}
.captionSection,.flowSection {max-width: 1024px; margin: 6% auto; padding: 0 4%; text-align: center; overflow: hidden;}
.caseSection {background: #f8f6f3; text-align: center; margin: 4% 0; overflow: hidden;}

.reserveLink {width: 100%; display: inline-block; margin: 2% 0 12%;}

.button a {
	margin: 10px auto;
	padding: 2% 4%;
	color: #FFF;
	font-weight: bold;
	border: 2px solid #f7f7f7;
	text-align: center;
	text-transform: uppercase;
	position: relative;
	overflow: hidden;
	-webkit-transition: .3s;
	transition: .3s;
}
.button a:after {
	position: absolute;
	-webkit-transition: .3s;
	transition: .3s;
	content: '';
	width: 0;
	left: 50%;
	bottom: 0;
	height: 3px;
	background: #f7f7f7;
}
.button a:hover {border-radius: 50px;}
.button a:hover:after {width: 0%;}
.reserveLink-bottom,
.caseLink {width: 350px; display: inline-block; margin: 2% 0 10%;}
.reserveButton a,
.caseButton a {
    margin: 10px auto;
    padding: 8% 20%;
    background: #fff;
    color: #3e3e3e;
    font-weight: bold;
    border: 2px solid #6f6f6f;
    text-align: center;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    -webkit-transition: .3s;
    transition: .3s;
}
.reserveButton a:after,.caseButton a:after {
    position: absolute;
    -webkit-transition: .3s;
    transition: .3s;
    content: '';
    width: 0;
    left: 50%;
    bottom: 0;
    height: 3px;
    background: #dedede;
}
.reserveButton a:hover,.caseButton a:hover {border-radius: 50px;}
.reserveButton a:hover:after,.caseButton a:hover:after {width: 0%;}
.intro figure {margin: 0;}

.fadein.scrollin {opacity : 1; transform : translate(0, 0);}
.fadein {opacity : 0.1; transform : translate(0, 50px); transition : all 600ms;}
    .consulSection:before {
      animation: bg-color 10s infinite;
      -webkit-animation: bg-color 10s infinite;
    z-index: 0;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color:rgba(0,0,0,0.05);
    }
    @-webkit-keyframes bg-color {
      0% { background-color:rgba(0,0,0,0.05); }
      20% { background-color:rgba(3, 169, 244, 0.05); }
      40% { background-color:rgba(224, 134, 0, 0.05); }
      60% { background-color:rgba(255, 255, 255, 0.15); }
      80% { background-color:rgba(82, 22, 0, 0.15); }
      100% { background-color:rgba(0,0,0,0.05); }
    }
    @keyframes bg-color {
      0% { background-color:rgba(0,0,0,0.05); }
      20% { background-color:rgba(3, 169, 244, 0.05); }
      40% { background-color:rgba(224, 134, 0, 0.05); }
      60% { background-color:rgba(255, 255, 255, 0.15); }
      80% { background-color:rgba(82, 22, 0, 0.15); }
      100% { background-color:rgba(0,0,0,0.05); }
    }
    .step li {margin: 10% 0;}
    .stepText {width: 50%; margin: 0 auto; text-align: center;}
    .step {padding: 0;}
    .step img {margin: 2% 0 3%;}
    span.title {display: inline-block;}
.title {font-size: 22px;}
.stepTitle {font-size: 15px; font-weight: 600; display: block; text-align: center; width: 50%; margin: 0 auto;}
.faq01 {position: absolute; top: 300px; text-align: center; padding: 0px 2%; width: 240px;}
.intro {width: 100%; margin: 0 0 8%;}
.links {width: 100%; margin: 0 0 6%; display: inline-block;}

aside.share {text-align: center;}
aside.share a {display: inline-block; padding: 5px;}
aside.share span {display: inline-block; color: #999; font-size: 11px; margin-right: 5px;}
aside.share img {vertical-align: middle; opacity: .4;}
aside.share img.tw_btnImg {width: 23px; padding-right: 0;}
aside.share img.fbBtn {width: 19px; padding-right: 0;}

footer {background: #fff;}
footer.siteFooter {padding-bottom: 15px;}
footer .backLink svg#title {width: 140px; height: auto; display: inline-block; margin-right: 20px; vertical-align: middle;}
footer .backLink {text-align: center; margin: 40px 0; font-size: 13px;}
footer .copyright {text-align: center; float: none; display: block;}

header.siteHeder {position: relative; max-width: 1024px; margin: 20px auto; padding: 0 20px;}
header.siteHeder h1 {line-height: 1; font-size: 16px; display: inline-block; margin: 0;}
header.siteHeder h1 a,
#home a {display: inline-block;}
header.siteHeder h1 svg#title {width: 140px; height: 21px; display: inline-block; margin-right: 20px; vertical-align: middle;}
header.siteHeder h1 .sub {font-size: 12px; font-family: serif; display: inline-block; color: #666;}

header .mainVisual ul {width:800px; height:100px; position:absolute; top:80%; left:0; right:0; bottom:0; margin:0 auto; text-align:center;}
header .mainVisual li {background-color:#fff; opacity:0.5; border-radius:50%; width:120px; height:120px; display:inline-block; text-align:center middle; padding:50px 0; vertical-align:middle; margin:20px;}
header .mainVisual li.fadein {opacity:0.5;}
header .mainVisual li span {color:#000; opacity:1; font-size:15px; font-weight:normal;}

article p {font-size:14px;}
article .lead {font-size:14px; text-align:center; margin-bottom:60px;}
article .lead br {display:none;}
article .title {font-size: 22px; text-align:center; margin-bottom:24px;}
article .title br {display:none;}

#sa_introduction {margin-bottom:30px; width:630px;}
#sa_introduction figure img {width:120px;}
#sa_introduction .icon figure,
#sa_introduction .icon div {display:inline-block; width:120px; margin-right:24px; margin-bottom:0;vertical-align:top;}
#sa_introduction .icon div {width:400px; margin-right:0;}
#sa_introduction .icon div p {margin-top:0;}

#sa_service {background: #f8f6f3; text-align: center; margin: 4% 0 0; overflow: hidden; max-width: initial; padding: 30px; width:100%;}
#sa_service img {width: 80%;}
#sa_service .service {margin-bottom:60px;}
#sa_service .title {margin-bottom:40px;}
#sa_service .title br {display:none;}
#sa_service h3 {font-weight:normal; font-size:20px; margin-bottom:10px;}
#sa_service p {line-height:1.8;}

/* 161104-add coordinate */
#sa_coordinate {background: #fefcfc; text-align: center; margin-top:0; overflow: hidden; max-width: initial; width:100%;}
/*#sa_coordinate .mainVisual {
	background: url(/img/styling-advisor/img_coordinate_all.jpg) center center / cover no-repeat;
	width: 100%;
	height: 550px;
	background-size: cover;
	position: relative;
	margin:0;
}*/
#sa_coordinate .mainVisual h2 {
	width: auto;
	margin:60px auto 0;
}
#sa_coordinate .coordinateVisual {padding: 0 auto 40px;}
#sa_coordinate #coordinateList {display:flex; width:100%; justify-content: center; flex-wrap:wrap; margin-bottom:40px;}
#sa_coordinate #coordinateList li img {width:100%;}
#sa_coordinate #coordinateList li a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}
#sa_coordinate #coordinateList li {width:20%; margin:5px 8px 20px; opacity: 0; line-height:1.6; text-align: left; font-size:12px; position:relative;}
#sa_coordinate #coordinateList li a .sa {color:#333; background: #fff; opacity:0.8; padding:6px 8px; position:absolute; bottom:-2px; left:-3px; box-shadow: 1px 1px 2px rgba(0,0,0,0.2); display:block;}

#sa_coordinate #coordinateList li:nth-child(1) {
  -webkit-animation: example 0.5s ease 0.5s 1 forwards;
  animation: example 0.5s ease 0.5s 1 forwards;
}
#sa_coordinate #coordinateList li:nth-child(2) {
  -webkit-animation: example 0.5s ease 1s 1 forwards;
  animation: example 0.5s ease 1s 1 forwards;
}
#sa_coordinate #coordinateList li:nth-child(3) {
  -webkit-animation: example 0.5s ease 1.5s 1 forwards;
  animation: example 0.5s ease 1.5s 1 forwards;
}
#sa_coordinate #coordinateList li:nth-child(4) {
  -webkit-animation: example 0.5s ease 2s 1 forwards;
  animation: example 0.5s ease 2s 1 forwards;
}
#sa_coordinate #coordinateList li:nth-child(5) {
  -webkit-animation: example 0.5s ease 2.5s 1 forwards;
  animation: example 0.5s ease 2.5s 1 forwards;
}
#sa_coordinate #coordinateList li:nth-child(6) {
  -webkit-animation: example 0.5s ease 3s 1 forwards;
  animation: example 0.5s ease 3s 1 forwards;
}
#sa_coordinate #coordinateList li:nth-child(7) {
  -webkit-animation: example 0.5s ease 3.5s 1 forwards;
  animation: example 0.5s ease 3.5s 1 forwards;
}
#sa_coordinate #coordinateList li:nth-child(8) {
  -webkit-animation: example 0.5s ease 4s 1 forwards;
  animation: example 0.5s ease 4s 1 forwards;
}
#sa_coordinate #coordinateList li:nth-child(9) {
  -webkit-animation: example 0.5s ease 4.5s 1 forwards;
  animation: example 0.5s ease 4.5s 1 forwards;
}
#sa_coordinate #coordinateList li:nth-child(10) {
  -webkit-animation: example 0.5s ease 5s 1 forwards;
  animation: example 0.5s ease 5s 1 forwards;
}
#sa_coordinate #coordinateList li:nth-child(11) {
  -webkit-animation: example 0.5s ease 5.5s 1 forwards;
  animation: example 0.5s ease 5.5s 1 forwards;
}
#sa_coordinate #coordinateList li:nth-child(12) {
  -webkit-animation: example 0.5s ease 6s 1 forwards;
  animation: example 0.5s ease 6s 1 forwards;
}
#sa_coordinate #coordinateList li:nth-child(13) {
  -webkit-animation: example 0.5s ease 6.5s 1 forwards;
  animation: example 0.5s ease 6.5s 1 forwards;
}
@-webkit-keyframes example {
  100% {opacity: 1;}
}
@keyframes example {
  100% {opacity: 1;}
}
.modal-content .coordinateDetail figure .img {width:50%;}
.modal-content .coordinateDetail figure .img,
.modal-content .coordinateDetail figure figcaption {display:inline-block; vertical-align:top;}
.modal-content .coordinateDetail figure figcaption .sa {display:block;}
.modal-content .coordinateDetail figure figcaption {text-align:left; width:40%; background: #fff; opacity:0.85; padding:10px 30px 20px; margin-top:70px; line-height:2;}
.modal-content .coordinateDetail figure figcaption ul {margin-top:40px;}
.modal-content .coordinateDetail figure figcaption li {margin:20px 0 20px; opacity:1;}
.modal-content .coordinateDetail figure figcaption li .thumb {float:left;}
.modal-content .coordinateDetail figure figcaption li .desc {display:inline; margin-left:2px; min-height:50px;font-size:13px;}
.modal-content .coordinateDetail figure figcaption li:after {content: "."; display: block; visibility: hidden; clear: both; height: 0; font-size: 0; line-height: 0;}

/*cross*/
.square {width: 20px; height: 21px; margin: 40px auto; position: relative; background:#999;}
.square.cross {width:1px; left:37.5px;}
.square.cross:before {
    content:"";
    display:block;
    width:100%;
    height:100%;
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    background:#999;
}
.square.circle:after {
    content:"";
    display:block;
    width:100%;
    height:200%;
	width:4300%;
	border:1px solid #999;
	border-radius:50%;
	position:absolute;
	top:-11px;
	left:-22px;
}
.square.cross.batu {
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
}

#shopInfo {margin-bottom:60px;}
#shopInfo .wrap dt {color:#666;margin-bottom:10px;}
#shopInfo .wrap dd {margin-bottom:36px;}
#shopInfo .wrap dd li {display:inline-block; margin:0 10px;}

#home {line-height: 1; position: absolute; top: 0; right: 20px;}
#home a img {width: 110px; opacity: 0.5;}
#home a img:hover {opacity: 1;}

.related {margin: 20px; text-align: center;}
.related a {display: inline-block; border: 1px solid #eee; padding: 8px 35px 8px 20px; text-decoration: none; color: #888; line-height: 1.5; position: relative; font-size: 13px;}
.related a:hover {border: 1px solid #ccc; transition: 100ms background-color,100ms border-color,100ms color,100ms fill;}
.related a:after {display: block; position: absolute; top: 50%; right: 22px; width: 7px; height: 7px; margin: -4px -5px 0 0; border-top: solid 1px #ccc; border-right: solid 1px #ccc; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); content: "";}

aside.share {text-align: center;}
aside.share a {display: inline-block; padding: 5px;}
aside.share span {display: inline-block; color: #999; font-size: 11px; margin-right: 5px;}
aside.share img {vertical-align: middle; opacity: .4;}
aside.share img.tw_btnImg {width: 23px; padding-right: 0;}
aside.share img.fbBtn {width: 19px; padding-right: 0;}

footer {background: #fff;}
footer.siteFooter {padding-bottom: 15px;}
footer .backLink svg#title {width: 140px; height: auto; display: inline-block; margin-right: 20px; vertical-align: middle;}
footer .backLink {text-align: center; margin: 40px 0; font-size: 13px;}

/* media */
@media screen and (max-width: 768px) {
    .inner {
        /* background: url(https:https://www.muji.com.cn/cn/net/contents/img/panel/sadvisor_main.jpg) center center / cover no-repeat; */
        background: url(https:https://www.muji.com.cn/cn/net/contents/img/panel/SAIntro30301-1.jpg) center center / cover no-repeat;
        display: block;
        width: 100%;
        height: 70vh;
        background-size: 150%;
        position: relative;
    }
	.related a {font-size: 12px;}
    #home {line-height: 1; position: absolute; top: 3px; right: 20px;}
    #home a img {width: 90px;}
    header .mainVisual ul {width:90%; height:inherit; top:60%;}
    article .lead br {display:block;}
    #sa_service img {width: 100%;}
    #sa_service .service {margin-bottom:30px;}
	.title {font-size: 18px;}
	.captionSection, .flowSection {width: 100%; margin: 10% auto 12%;}
	.consulList li {width: 50%;}
	.reserveLink {width: 100%; display: inline-block; margin: 10% 0 20%;}
	.button a {margin: 10px auto; padding: 6% 14%;}
	.consulList .comment{padding: 20% 2% 20%; height: 380px;}
	.reserveLink-bottom, .caseLink {width: 100%;margin: 6% 0 12%;}
	.reserveButton a, .caseButton a {padding: 5% 16%;}
	#sa_service h3 {font-size:17px; margin-bottom:0;}
	#sa_coordinate {margin-top: -30px; margin-bottom: 40px;}
	/*#sa_coordinate .mainVisual {
	background: url(https://www.muji.com/img/styling-advisor/img_coordinate_all.jpg) center center / cover no-repeat;
	width: auto;
    height: 420px;
    background-size: 200%;
	position: relative;
	margin:0;
	}
	#sa_coordinate .mainVisual h2 {position: absolute; top:5px; bottom:0; left:0; right:0; line-height: 1.4;}*/
	#sa_coordinate #coordinateList li {width: 44%;width: margin: 5px 5px 20px !important;}
	#sa_coordinate .coordinateDetail figure .img img {width: 90%;}
	.square.cross {width: 1px; left: 0;}
	.modal-content .coordinateDetail figure .img,
	.modal-content .coordinateDetail figure figcaption {display: block; vertical-align: initial;}
	.modal-content .coordinateDetail figure .img {width: 100%;}
	.modal-content .coordinateDetail figure figcaption {width: 100%; opacity: 1; margin-top: 0; position: relative;}
	.modal-content .coordinateDetail figure figcaption p {width: 100%; opacity: 0.8; margin: 0; padding: 15px 0;}
}
@media screen and (max-width: 414px){
	.inner {height: 56vh;}
	header .mainVisual ul {top: 40%; height: 200px;}
	header .mainVisual li {width: 90px; height: 90px; padding: 35px 0; margin: 10px;}
	#sa_introduction {width: 100%; padding: 0 30px;}
	article .title {font-size: 15px; margin-bottom: 10px;}
	article #shopList .title {font-size: 18px; margin-bottom: 30px;}
	article .title br {display:block;}
	article .lead {margin-bottom: 30px; margin-top: 30px;}
	#sa_introduction .icon figure {width: 100px; margin-right: 10px;}
	#sa_introduction .icon figure img {width: 100px;}
	#sa_introduction .icon div {width: 230px;}
	#sa_service {margin: 10px 0 30px;}
    #sa_service .title br {display: block;}
    #sa_service img {width: 98%;}
    /*#sa_coordinate .mainVisual {height: 260px; width: 100%; background-size: cover;}*/
}
@media screen and (max-width: 375px){
	header .mainVisual li {width: 80px; height: 80px; padding: 30px 0; margin: 5px;}
	#sa_introduction .icon figure,
	#sa_introduction .icon figure img {width: 90px;}
	#sa_introduction .icon div {width: 210px;}
	#sa_service {padding: 20px 10px 10px;}
	#sa_service .title {margin-bottom: 30px;}
    #sa_service img {width: 88%;}
}
@media screen and (max-width: 320px){
	article .lead br {display:none;}
	header .mainVisual li {width: 70px; height: 70px; padding: 25px 0;}
	#sa_introduction .icon figure {margin-right: 6px;}
	#sa_introduction .icon div {width: 186px;}
	#sa_introduction {padding: 0 16px;}
	#sa_coordinate h2.title {font-size:16px;}
}
<!--ºÄʱ1769394436.9956Ãë-->