@charset "utf-8";

.consulting{}

.consulting .info_area{text-align: center;}
.consulting .info_area strong{display: block; margin-top: 15px; font-size: 1.462em;}
.consulting .info_area strong:after{content: ''; display: block; margin:15px auto; width: 20px; height: 2px; background-color: #6180be;}
.consulting .info_area .m_txt{display: block; font-weight: bold;}
.consulting .info_area .s_txt{display: block; margin-top: 7px; color:#767676; font-size: 0.846em;}
.consulting .consulting_cont{margin:25px 10px 20px 10px; padding:15px 15px 20px; border:1px solid #e9ebea; background-color: #fafafa;}

.consulting .step_list{margin-bottom: 35px; text-align: center;}
.consulting .step_list ol{overflow: hidden; display: inline-block;}
.consulting .step_list ol li{float: left; position: relative;}
.consulting .step_list ol li:after{content: ''; position: absolute; top:15px; right: 0; display: inline-block; width: 14.5px; height: 2.5px; background: url('../images/consulting/step_bl.png') no-repeat; background-size: 14.5px 6.5px; background-position: 0 bottom; vertical-align: middle;}
.consulting .step_list ol li em{color:#767676; text-align: center; font-size: 0.846em;}
.consulting .step_list ol li em:before{content: ''; display: block; margin:0 auto 4px auto; width: 32px; height: 32px; color:#fff; background: url('../images/consulting/step_bg_off.png') no-repeat; background-size: 32px; text-align: center; font-weight: bold; line-height: 32px;}
.consulting .step_list ol li:nth-child(1) em:before{transition:all .7s;}

.consulting .step_list ol li:nth-child(1) em:before{content: '1';}
.consulting .step_list ol li:nth-child(2) em:before{content: '2';}
.consulting .step_list ol li:nth-child(3) em:before{content: '3';}
.consulting .step_list ol li:nth-child(1){margin-right: 17px; padding-right: 33px;}
.consulting .step_list ol li:nth-child(2){margin-right: 12px; padding-right: 28px;}
.consulting .step_list ol li:nth-child(3):after{content: none;}
.consulting .step_list ol li:nth-child(1):after{background-position: 0 top;}
.consulting .step_list ol li:nth-child(1) em{color:#333;}
.consulting .step_list ol li:nth-child(1) em:before{background:url('../images/consulting/step_bg.png') no-repeat; background-size: 32px; background-position: 0 top; border-radius: 0;}
.consulting .step_list ol li:nth-child(2):after{-webkit-transition:all .7s;}
.consulting .step_list ol li:nth-child(2) em{-webkit-transition:all .7s;}
.consulting .step_list ol li:nth-child(2) em:before{-webkit-transition:all .7s;}

.consulting .step_list.step_2 ol li:nth-child(1) em:before{content: ''; background:url('../images/consulting/step_bg_check.png') no-repeat; background-size: 32px; background-position: 0 bottom; border-radius: 0;}
.consulting .step_list.step_2 ol li:nth-child(2):after{background-position: 0 top;}
.consulting .step_list.step_2 ol li:nth-child(2) em{color:#333;}
.consulting .step_list.step_2 ol li:nth-child(2) em:before{background:url('../images/consulting/step_bg.png') no-repeat; background-size: 32px; background-position: 0 top; border-radius: 0;}


.consulting .step_list.step_3 ol li:nth-child(1) em:before{content: ''; background:url('../images/consulting/step_bg_check.png') no-repeat; background-size: 32px; background-position: 0 bottom; border-radius: 0;}
.consulting .step_list.step_3 ol li:nth-child(2):after{background-position: 0 top;}
.consulting .step_list.step_3 ol li:nth-child(2) em{color:#333;}
.consulting .step_list.step_3 ol li:nth-child(2) em:before{content: ''; background:url('../images/consulting/step_bg_check.png') no-repeat; background-size: 32px; background-position: 0 bottom; border-radius: 0;}
.consulting .step_list.step_3 ol li:nth-child(3):after{background-position: 0 top;}
.consulting .step_list.step_3 ol li:nth-child(3) em{color:#333;}
.consulting .step_list.step_3 ol li:nth-child(3) em:before{background:url('../images/consulting/step_bg.png') no-repeat; background-size: 32px; background-position: 0 top; border-radius: 0;}

.consulting .consulting_cont .info{text-align: center; margin-bottom: 18px;}
.consulting .consulting_cont .info .m_txt{font-weight: bold; font-size: 1.154em;}
.consulting .consulting_cont .info .s_txt{display: block; color:#767676; margin-top:3px;}

.consulting .btn_area{overflow: hidden; margin-top:15px;}
.consulting .btn_area .back_step{position: relative; float: left; display: inline-block; width: 16%; height: 39px; background-color: #cfcfcf;}
.consulting .btn_area .back_step:before{content: ''; position: absolute; top:23px; left:0; right:0; display: block; margin:0 auto; width: 12px; height: 1px; background-color: #fff; -webkit-transform:rotate(45deg);}
.consulting .btn_area .back_step:after{content: ''; position: absolute; top:15px; left:0; right:0; display: block; margin:0 auto; width: 12px; height: 1px; background-color: #fff; -webkit-transform:rotate(-45deg);}
.consulting .btn_area .btn-type_01{float: left; margin-left: 2%; width: 82%;}

.consulting .consulting_skin .cont_wp{position: relative; /*min-height: 400px;*/}
.consulting [class^='cont_wp-']{position: absolute; top:0; left:0; right: 0; margin: 0 auto;}
.consulting .cont_wp-step_2,
.consulting .cont_wp-step_3{display: none; opacity: 0;}
.consulting .cont_wp-step_1 .type_list.skin{margin: 0 auto 25px auto; text-align:center; width: 259px;}
.consulting .cont_wp-step_1 .type_list.skin ul{overflow: hidden; display: inline-block;}
.consulting .cont_wp-step_1 .type_list.skin ul li{float: left; text-align: center; margin-bottom: 5px; margin-left: 5px;}
.consulting .cont_wp-step_1 .type_list.skin ul li:first-child{margin-left: 0;}
.consulting .cont_wp-step_1 .type_list.skin ul li:nth-child(4){margin-left: 40px;}
.consulting .cont_wp-step_1 .type_list.skin ul li a{display: block; width: 83px; height: 85px; background: url('../images/consulting/type_list_off.png') no-repeat; background-size: 435px 83px; background-position: 0; -webkit-transition:all .3s;}
.consulting .cont_wp-step_1 .type_list.skin ul li a em{display: block; color:#767676; font-weight: bold; -webkit-transition:all .3s;}
.consulting .cont_wp-step_1 .type_list ul li.active a{background-image: url('../images/consulting/type_list_on.png');}
.consulting .cont_wp-step_1 .type_list ul li.active a em{color:#fff;}
.consulting .cont_wp-step_1 .type_list.skin ul li:nth-child(1) a{background-position: 0;}
.consulting .cont_wp-step_1 .type_list.skin ul li:nth-child(2) a{background-position: -88px 0;}
.consulting .cont_wp-step_1 .type_list.skin ul li:nth-child(3) a{background-position: -176px 0;}
.consulting .cont_wp-step_1 .type_list.skin ul li:nth-child(4) a{background-position: -264px 0;}
.consulting .cont_wp-step_1 .type_list.skin ul li:nth-child(5) a{background-position: -352px 0;}
.consulting .cont_wp-step_1 .type_list.skin ul li:nth-child(1) a em{padding-top:40px;}
.consulting .cont_wp-step_1 .type_list.skin ul li:nth-child(2) a em{padding-top:50px;}
.consulting .cont_wp-step_1 .type_list.skin ul li:nth-child(3) a em{padding-top:40px;}
.consulting .cont_wp-step_1 .type_list.skin ul li:nth-child(4) a em{padding-top:40px;}
.consulting .cont_wp-step_1 .type_list.skin ul li:nth-child(5) a em{padding-top:50px;}

.consulting .cont_wp-step_2 .type_list .tit{position: relative; top:0; display: block; margin:0 auto 16px auto; text-align: center;}
.consulting .cont_wp-step_2 .type_list .tit:before{content: ''; position: absolute; top:50%; left: 0; right: 0; display: block; width: 100%; height: 1px; background-color: #999;}
.consulting .cont_wp-step_2 .type_list .tit em{position: relative; display: inline-block; padding:0 10px; background-color: #fafafa;}
.consulting .cont_wp-step_2 .type_list ul{overflow: hidden;}
.consulting .cont_wp-step_2 .type_list ul li{float: left; margin-bottom: 5px; margin-left: 2%; border:1px solid #999; background-color: #fff; box-sizing:border-box;  -webkit-transition:all .3s; height: 40px;}
.consulting .cont_wp-step_2 .type_list ul li a{display: flex; display: -webkit-flex;  -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; text-align: center; /*min-height:40px;*/ box-sizing: border-box; /*padding:5px 2px 3px 2px;display: block; */height: 100%; }
.consulting .cont_wp-step_2 .type_list ul li a em{display: block; color:#767676; font-weight: bold;  -webkit-transition:all .3s; line-height: 1.2em;}
.consulting .cont_wp-step_2 .type_list ul li.active {background-color:#6180be; border-color:#6180be;}
.consulting .cont_wp-step_2 .type_list ul li.active a em{color:#fff;}
.consulting .cont_wp-step_2 .type_list.care ul li{width: 32%;}
.consulting .cont_wp-step_2 .type_list.care ul li:nth-child(3n+1){margin-left: 0;}

.consulting .cont_wp-step_2 .type_list.makeup{margin-top: 23px;}
.consulting .cont_wp-step_2 .type_list.makeup ul li{width: 49%;}
.consulting .cont_wp-step_2 .type_list.makeup ul li:nth-child(1){margin-left: 0;}
.consulting .cont_wp-step_2 .type_list.makeup ul li:nth-child(3){margin-left: 0;}

.consulting .cont_wp-step_3 .step3_info p{text-align: center; font-size: 1.077em;}
.consulting .cont_wp-step_3 .step3_info p span{color: #bd953b; font-weight: bold; font-size: 1.077em;}
.consulting .cont_wp-step_3 .step3_info p:before{content: ''; display: block; margin:0 auto 13px auto; width: 33.5px; height: 43.5px; background: url('../images/consulting/icon_info.png') no-repeat; background-size: 33.5px 43.5px;}

.consulting .list_wp{display: none;}
.consulting .list_wp > ul{overflow: hidden;}
.consulting .list_wp > ul > li{float: left; width: 50%; margin-bottom: 30px; padding-top: 30px; border-top:1px solid #e9ebea;}
.consulting .list_wp > ul > li:nth-child(1),
.consulting .list_wp > ul > li:nth-child(2){border-top: 0; margin-top: 0; padding-top:0;}

.consulting .consulting_beauty_view .content{margin-bottom: 40px;}
.consulting .consulting_beauty_view .beauty_view_cont{text-align: center;}
.consulting .consulting_beauty_view .beauty_view_cont .cont_title{position: relative; display: inline-block; text-align: center; padding-bottom: 6px;  margin-bottom: 15px;}
.consulting .consulting_beauty_view .beauty_view_cont .cont_title:after{content: ''; position: absolute; bottom: 0; left:0; right: 0; display: inline-block; margin:0 auto; width: 100%; height: 1px; background-color: #333;}
.consulting .consulting_beauty_view .beauty_view_cont .cont_wp img{width:100% !important; height:auto !important;}

.consulting .consulting_beauty_view .list_gnb{position: fixed; top:110px; left:0; z-index: 10; background-color: #fafafa; width: 100%; height: 0; overflow: hidden;}
.consulting .consulting_beauty_view .btn{position: fixed; top:119px; left:10px; z-index: 15; width: 32px; height: 32px; background-color: #26283f; border-radius: 50%;}
.consulting .consulting_beauty_view .btn a{display: block; width: 100%; height: 100%;}
.consulting .consulting_beauty_view .btn a span{position: absolute; top: 10px; left: 12px; display: block; width: 12px; height: 2px; background-color: #fff; border-radius: 20px;}
.consulting .consulting_beauty_view .btn a span:before{content: ''; position: absolute; top: -0.7px; left: -5px; width: 3px; height: 3px; background-color: #fff; border-radius: 50%; opacity: 1; transition:opacity .2s;}
.consulting .consulting_beauty_view .btn a span.t_2{top:15px;}
.consulting .consulting_beauty_view .btn a span.t_3{top:20px;}
.consulting .consulting_beauty_view .list_gnb .list{overflow: hidden; padding:25px 0;}
.consulting .consulting_beauty_view .swiper-container{padding-bottom: 35px;}
.consulting .consulting_beauty_view .swiper-container li{/*width: 50%;*/margin:0 auto;}
.consulting .consulting_beauty_view .swiper-container li a{display: block;}
.consulting .consulting_beauty_view .swiper-container li a span{position: relative; display: block;}
.consulting .consulting_beauty_view .swiper-container li a span img{width: 100%;}
.consulting .consulting_beauty_view .swiper-container li a p{margin-top: 10px; text-align: center; font-weight: bold; height: 34px;}

.consulting .consulting_beauty_view .btn.open a span.t_1{animation: rotate-open-s_1 0.3s linear normal; animation-fill-mode:forwards;}
.consulting .consulting_beauty_view .btn.open a span.t_2{animation: rotate-open-s_2 0.3s linear normal; animation-fill-mode:forwards;}
.consulting .consulting_beauty_view .btn.open a span.t_3{animation: rotate-open-s_3 0.3s linear normal; animation-fill-mode:forwards;}
.consulting .consulting_beauty_view .btn.open a span:before{opacity:0;}

.consulting .consulting_beauty_view .btn.close a span.t_1{animation: rotate-close-s_1 0.3s linear normal; animation-fill-mode:forwards;}
.consulting .consulting_beauty_view .btn.close a span.t_2{animation: rotate-close-s_2 0.3s linear normal; animation-fill-mode:forwards;}
.consulting .consulting_beauty_view .btn.close a span.t_3{animation: rotate-close-s_3 0.3s linear normal; animation-fill-mode:forwards;}
.consulting .consulting_beauty_view .btn.close a span:before{opacity:1;}
@keyframes rotate-open-s_1{
	0% {
		width:12px;
	  	left:12px;
	  	top:15px;
		transform: rotate(0deg);
	}
	25% {
		width:12px;
	  	left:12px;
	  	top:15px;
    	transform: rotate(0deg);
	}
	50% {
		width:18px;
	  	left:7px;
	  	top:15px;
	  	transform: rotate(0deg);
	}
	75% {
		width:18px;
	  	left:7px;
	  	top:15px;
	  	transform: rotate(0deg);
	}
	100% {
		width:18px;
	  	left:7px;
	  	top:15px;
		transform: rotate(45deg);
	}
}
@keyframes rotate-open-s_2{
	0% {
		width:12px;
	  	left:12px;
	  	top:15px;
		transform: rotate(0deg);
	}
	25% {
		width:12px;
	  	left:12px;
	  	top:15px;
    	transform: rotate(0deg);
	}
	50% {
		width:18px;
	  	left:7px;
	  	top:15px;
	  	transform: rotate(0deg);
	}
	75% {
		width:18px;
	  	left:7px;
	  	top:15px;
	  	transform: rotate(0deg);
	}
	100% {
		width:18px;
	  	left:7px;
	  	top:15px;
		transform: rotate(45deg);
	}
}
@keyframes rotate-open-s_3{
	0% {
		width:12px;
	  	left:12px;
	  	top:15px;
		transform: rotate(0deg);
	}
	25% {
		width:12px;
	  	left:12px;
	  	top:15px;
    	transform: rotate(0deg);
	}
	50% {
		width:18px;
	  	left:7px;
	  	top:15px;
	  	transform: rotate(0deg);
	}
	75% {
		width:18px;
	  	left:7px;
	  	top:15px;
	  	transform: rotate(0deg);
	}
	100% {
		width:18px;
	  	left:7px;
	  	top:15px;
		transform: rotate(-45deg);
	}
}

@keyframes rotate-close-s_1{
	0% {
		width:18px;
	  	left:7px;
	  	top:15px;
		transform: rotate(0deg);
	}
	25% {
		width:18px;
	  	left:7px;
	  	top:15px;
    	transform: rotate(0deg);
	}
	50% {
		width:12px;
	  	left:12px;
	  	top:15px;
	  	transform: rotate(0deg);
	}
	75% {
		width:12px;
	  	left:12px;
	  	top:15px;
	  	transform: rotate(0deg);
	}
	100% {
		width:12px;
	  	left:12px;
	  	top:10px;
		transform: rotate(0deg);
	}
}
@keyframes rotate-close-s_2{
	0% {
		width:18px;
	  	left:7px;
	  	top:15px;
		transform: rotate(0deg);
	}
	25% {
		width:18px;
	  	left:7px;
	  	top:15px;
    	transform: rotate(0deg);
	}
	50% {
		width:12px;
	  	left:12px;
	  	top:15px;
	  	transform: rotate(0deg);
	}
	75% {
		width:12px;
	  	left:12px;
	  	top:15px;
	  	transform: rotate(0deg);
	}
	100% {
		width:12px;
	  	left:12px;
	  	top:15px;
		transform: rotate(0deg);
	}
}
@keyframes rotate-close-s_3{
	0% {
		width:18px;
	  	left:7px;
	  	top:15px;
		transform: rotate(0deg);
	}
	25% {
		width:18px;
	  	left:7px;
	  	top:15px;
    	transform: rotate(0deg);
	}
	50% {
		width:12px;
	  	left:12px;
	  	top:15px;
	  	transform: rotate(0deg);
	}
	75% {
		width:12px;
	  	left:12px;
	  	top:15px;
	  	transform: rotate(0deg);
	}
	100% {
		width:12px;
	  	left:12px;
	  	top:20px;
		transform: rotate(0deg);
	}
}

.consulting .consulting_beauty_view .co_cont_wrap .cont_wp .consulting_item{margin-top:40px; margin-bottom: 25px;}
.consulting .consulting_beauty_view .co_cont_wrap .cont_wp .consulting_item .content_title{display: block; text-align:left !important; width: 100%;}
.consulting .consulting_beauty_view .co_cont_wrap .cont_wp .consulting_item .content_title:after{content: ''; display: block; margin-top:15px; width: 100%; height: 1px; background-color: #26283f;}
.consulting .consulting_beauty_view .co_cont_wrap .cont_wp .consulting_item > ul{overflow: hidden;}
.consulting .consulting_beauty_view .co_cont_wrap .cont_wp .consulting_item > ul > li{width: 50%; float: left;}
.consulting .consulting_beauty_view .btn-more_view{width: 45% !important;}

.consulting .consulting_beauty_list .content{margin-bottom: 40px;}
.consulting .consulting_beauty_list .list_cont{margin-top:25px;}
.consulting .consulting_beauty_list .list_cont ul{overflow: hidden;}
.consulting .consulting_beauty_list .list_cont ul li{float: left; width: 49%; margin-top:10px;}
.consulting .consulting_beauty_list .list_cont ul li:nth-child(2n){margin-left: 2%;}
.consulting .consulting_beauty_list .list_cont ul li:first-child, 
.consulting .consulting_beauty_list .list_cont ul li:nth-child(2) {margin-top:0;}
.consulting .consulting_beauty_list .list_cont ul li div.txt_wrap {height:50px;}
.consulting .consulting_beauty_list .list_cont ul li a{display: block;}
.consulting .consulting_beauty_list .list_cont ul li a span{position: relative; display: block;}
.consulting .consulting_beauty_list .list_cont ul li a span img{width: 100%;}
.consulting .consulting_beauty_list .list_cont ul li a p{padding:10px 0 0 0; text-align: center; font-weight: bold; /*height: 34px;*/}