@charset "utf-8";
/* CSS Document */

.dc-lancomeArticle .RecommendedProducts {
    background: #fff0f2;
    display: table;
    width: 100%;
    padding: 30px 22px 10px 22px;
    box-sizing: border-box;
}
.dc-lancomeArticle h1{
	font-weight: bold;

}
.dc-lancomeArticle h2{
	margin-top: 0;
}

.dc-lancomeArticle br.br430,
.dc-lancomeArticle br.br400{
	display: none;
}

/* fontStyle */
	.dc-lancomeArticle h1{
		color: #d51b51;
	}
	.dc-lancomeArticle .smallTitle:before {
	    left: -145%;
	}
	.dc-lancomeArticle .smallTitle:after {
	    right: -145%;
	}
	.dc-lancomeArticle .smallTitle {
	    margin: 0 auto 10px auto;
	}
	.dc-lancomeArticle p{
		margin-bottom: 10px;
	}

/* 何挑選命定粉底?打造不脫妝浮粉的自然底妝攻略 */
	.dc-lancomeArticle .br800{
		display: none;
	}

/* 底妝類型 */
	.dc-lancomeArticle .type{
		width: 100%;
		display: table;
	}
	.dc-lancomeArticle .type li{
		display: table-cell;
		width: 50%;
		padding: 10px 20px;
		box-sizing: border-box;
	}
	.dc-lancomeArticle .type:first-of-type li:first-of-type,
	.dc-lancomeArticle .type:last-of-type li:first-of-type{
		border-right: 2px solid #FFF;
	}
	.dc-lancomeArticle .type:first-of-type li{
		border-bottom: 2px solid #FFF;
		box-sizing: border-box;
	}
	.dc-lancomeArticle .type:last-of-type li{
		padding-top: 30px;
		padding-bottom: 30px;
	}
	.dc-lancomeArticle .type li h3{
		text-align: center;
		color: #d51b51;
	}
	.dc-lancomeArticle .type li div{
		overflow: hidden;
	}
	.dc-lancomeArticle .type li div p:first-of-type{
		/*width: 100px;*/
		float: left;
		font-weight: bolder;
		margin-right: 20px;
	}
	.dc-lancomeArticle .type li div p:last-of-type{
		width: auto;
		float: none;
		margin: 0 0 5px 100px;
	}

/* 底妝上妝步驟 */
	.dc-lancomeArticle .step{
		overflow: hidden;
	}
	.dc-lancomeArticle .step .slogn{
		text-align: center;
	}
	.dc-lancomeArticle .step .type:first-of-type li:first-of-type,
	.dc-lancomeArticle .step .type:last-of-type li:first-of-type{
		border-right: 0;
	}
	.dc-lancomeArticle .step .type li:last-of-type{
		border-bottom: 0;
	}
	.dc-lancomeArticle .step .type li div p:last-of-type {
	    margin: 0;
        font-weight: inherit;
	}
	.dc-lancomeArticle .step .type li {
	    display: block;
	    width: 100%;
	}
	.dc-lancomeArticle .step .type .skinType{
		display: table;
		width: 100%;
	}
	.dc-lancomeArticle .step .type .skinType div span:first-of-type{
		color: #FFF;
	    background: #d51b51;
	    padding: 2px 10px;
	    display: table;
	    margin-right: 20px;
	    margin-bottom: 5px;
	    width: 140px;
	    float: left;
	    text-align: center;
	}
	.dc-lancomeArticle .step .type .skinType div span:last-of-type{
		display: table;
	    width: auto;
	    margin: 0 0 0 140px;
	    float: none;
	}

/* 粉底選色方法 */
	/* 粉底液色調分類 */
		.dc-lancomeArticle .colorClass .RecommendedProducts{
			display: table-cell;
			width: 50%;
		    border: 10px solid #FFF;
		}
		.dc-lancomeArticle .colorClass .type li{
			border-bottom: 0;
		}
		.dc-lancomeArticle .colorClass .RecommendedProducts {
		    padding: 0;
		}
		.dc-lancomeArticle .colorClass .type:last-of-type li {
		    padding-top: 10px;
		    padding-bottom: 10px;
		}
		.dc-lancomeArticle .colorClass .type:first-of-type li:first-of-type,
		.dc-lancomeArticle .colorClass .type:last-of-type li:first-of-type {
		    border-right: 0;
		}

/* 粉底液推薦 */
	.table-scroll a{
		display: table;
		margin: 0 auto;
	}
	.table-scroll tfoot tr td div p span{
		color: #d51b51;
		font-weight: bold;
	}

/* 底妝常見 NG 情形 */
	.dc-lancomeArticle .NGsituation{
		overflow: hidden;
	}
	.dc-lancomeArticle .NGsituation ul li p:first-child{
	    color: #d51b51;
	    font-weight: bold;
	}

/* 蘭蔻粉底家族 實現你對底妝所有期待 */
	.dc-lancomeArticle .buyProduct{
		margin-top: 50px;
	}
	.dc-lancomeArticle .buyProduct .smallTitle:before {
	    left: -35%;
	}
	.dc-lancomeArticle .buyProduct .smallTitle:after {
	    right: -35%;
	}
	.dc-lancomeArticle .buyProduct a.special{
		display: table;
		margin: 30px auto 0 auto;
		font-size: 30px;
	}
	.dc-lancomeArticle .productList li {
	    width: 33%;
	}

	@media screen and (min-width: 48em){
		.dc-lancomeArticle .similarH1{
			font-size: 1.75rem;
		}
	}
	@media screen and (min-width: 80em){
		.dc-lancomeArticle .similarH1{
			font-size: 2.5rem;
		}
	}
	@media screen and (min-width: 751px){
		.dc-lancomeArticle .type li div p:first-of-type span.pc{
			display: inline !important;
		}
	}
	@media screen and (max-width: 1366px){
		.dc-lancomeArticle p.note{
			text-align: center;
		    margin-bottom: 0;
		}
		.dc-lancomeArticle .RecommendedProducts {
		    margin-top: 0;
		}
	}
	@media screen and (max-width: 950px){
		.dc-lancomeArticle .lipstickIntro li{
			display: block;
			width: 100%;
		    margin-bottom: 40px;
		    overflow: hidden;
		}
		.dc-lancomeArticle .lipstickIntro li:last-of-type{
		    margin-bottom: 0;
		}
		.dc-lancomeArticle .lipstickIntro li .img{
			max-width: 200px;
		    float: left;
		}
		.dc-lancomeArticle .lipstickIntro li .text{
			width: auto;
			margin: 0 0 0 220px;
		}
	}
	@media screen and (max-width: 900px){
		.dc-lancomeArticle p.title {
		    font-size: 23px;
		}
	}
	@media screen and (max-width: 870px){
		.dc-lancomeArticle .colorClass .type li,
		.dc-lancomeArticle .colorClass .RecommendedProducts{
		    display: block;
		    width: 100%;
		    border: 0;
		    margin-bottom :20px;
		}
	}
	@media screen and (max-width: 850px){
		.dc-lancomeArticle h1 {
		    font-size: 1.35rem;
		}
		.dc-lancomeArticle .RecommendedProducts_last div.img{
		    display: block;
		    width: 100%;
		    max-width: 350px;
		    margin: 0 auto 30px auto;
		}
		.dc-lancomeArticle .RecommendedProducts_last div.text{
		    display: block;
		    width: 100%;
		}
		.dc-lancomeArticle p.note{
		    margin-bottom: 30px;
		}
	}
	@media screen and (max-width: 800px){
		.dc-lancomeArticle .br800{
			display: block;
		}
	}
	@media screen and (max-width: 750px){
		.dc-lancomeArticle .RecommendedProducts,
		.dc-lancomeArticle .colorClass .RecommendedProducts {
		    padding: 10px;
		}
		/* 底妝類型 */
			.dc-lancomeArticle .type li h3 span{
    			font-size: 15px;
			    display: block;
			}
			.dc-lancomeArticle .type li div p:first-of-type {
			    width: 100%;
			    float: none;
			    margin: 0;
			    background: #f5e1e4;
    			padding: 2px 5px;
			}
			.dc-lancomeArticle .type li div p:last-of-type {
			    width: 100%;
			    margin: 0 0 10px 0;
			}
			.dc-lancomeArticle .type li {
			    padding: 5px;
			}
		/* 底妝上妝步驟 */
			.dc-lancomeArticle .step .type li div p:first-of-type {
			    background: none;
			}
		/* 粉底選色方法 */
			/* 粉底液色調分類 */
				.dc-lancomeArticle .colorClass .type:last-of-type li {
				    padding-bottom: 0;
				}
	}
	@media screen and (max-width: 700px){
		.dc-lancomeArticle .textAround,
		.dc-lancomeArticle .textAround.textAround01{
			float: none;
		    width: 100%;
		    max-width: 350px;
		    margin: 0 auto 20px auto;
		    padding: 0;
		}
		.dc-lancomeArticle .lipstickIntro li .img{
			max-width: 150px;
		    float: left;
		}
		.dc-lancomeArticle .lipstickIntro li .text{
			margin: 0 0 0 170px;
		}
		.dc-lancomeArticle .block700,
		.dc-lancomeArticle .lipstickIntro li .block700 .myColor,
		.dc-lancomeArticle .lipstickIntro li .block700 .italicFont{
			display: block;
			margin-bottom: 0;
		}
		.dc-lancomeArticle .lipstickIntro li .myColor,
		.dc-lancomeArticle .lipstickIntro li .italicFont{
			display: none;
		}
	}
	@media screen and (max-width: 550px){
		.dc-lancomeArticle .smallTitle:before {
		    left: -190%;
		}
		.dc-lancomeArticle .smallTitle:after {
		    right: -190%;
		}
		.dc-lancomeArticle .smallTitle {
		    letter-spacing: 1px;
		}
		.dc-lancomeArticle .smallTitle {
		    letter-spacing: 0px;
		    font-size: 15px;
		}
		.dc-lancomeArticle .lipstickIntro li .img{
			max-width: 250px;
		}
		.dc-lancomeArticle .lipstickIntro li .img,
		.dc-lancomeArticle .lipstickIntro li .text{
		    float: none;
		    margin: 0 auto;
		}
		/* 蘭蔻粉底家族 實現你對底妝所有期待 */
			.dc-lancomeArticle .productList li {
			    width: 50%;
			}
			.dc-lancomeArticle .buyProduct .smallTitle:before {
			    left: -28%;
	    		width: 60px;
			}
			.dc-lancomeArticle .buyProduct .smallTitle:after {
			    right: -28%;
	    		width: 60px;
			}
	}


	@media screen and (max-width: 430px){
		.dc-lancomeArticle h2 {
		    font-size: 5.2vw;
		}
		.dc-lancomeArticle br.br430{
			display: block;
		}

		/* 底妝類型 */
			.dc-lancomeArticle .type li,
			.dc-lancomeArticle .type:last-of-type li{
			    display: block;
			    width: 100%;
		        padding: 10px 0;
			}
			.dc-lancomeArticle .type:first-of-type li:first-of-type,
			.dc-lancomeArticle .type:last-of-type li:first-of-type {
			    border-right: 0;
			    border-bottom: 2px solid #FFF;
			}
		/* 底妝上妝步驟 */
			.dc-lancomeArticle .step .type .skinType div span:last-of-type {
		        width: 100%;
    			margin: 0;
			}
			.dc-lancomeArticle .step .type .skinType div span:first-of-type {
			    float: none;
			    margin: 0 auto;
			    width: 100%;
			}
		/* 粉底選色方法 */
			/* 粉底液色調分類 */
			.dc-lancomeArticle .colorClass .type:first-of-type li:first-of-type,
			.dc-lancomeArticle .colorClass .type:last-of-type li:first-of-type {
			    border-bottom: 0;
		        margin-bottom: 0;
			}
		/* 蘭蔻粉底家族 實現你對底妝所有期待 */
			.dc-lancomeArticle .buyProduct a.special {
			    font-size: 23px;
			}
	}
	@media screen and (max-width: 414px){
		.dc-lancomeArticle h1 {
		    font-size: 4.3vw;
		    letter-spacing: 0px;
	        font-weight: bold;
		}
		.dc-lancomeArticle .similarH1{
	        font-size: 5.4vw;
		}
	}
	@media screen and (max-width: 400px){
		.dc-lancomeArticle br.br400{
			display: block;
		}
		/* 蘭蔻粉底家族 實現你對底妝所有期待 */
			.dc-lancomeArticle .productList li {
			    width: 100%;
			}
			.dc-lancomeArticle .buyProduct .smallTitle:before {
		        left: -18%;
	    		width: 30px;
			}
			.dc-lancomeArticle .buyProduct .smallTitle:after {
			    right: -18%;
	    		width: 30px;
			}
	}
	@media screen and (max-width: 375px){
		.dc-lancomeArticle p.title {
		    font-size: 21px;
		}
	}