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

.l-blog-article__title {
text-align: center!important;
}

.dc-lancomeArticle{
	font-size: 1rem;
    line-height: 1.9;
	padding-bottom: 3em;
	max-width: 1000px;
	margin:auto;
}

.dc-lancomeArticle .bold{
font-weight: bold;
}
.dc-lancomeArticle .color1{
color: #d51b51;
}

.dc-lancomeArticle .black{
	color: #000;
}

.dc-lancomeArticle h1{
	font-size: 1.5625rem;
    font-family: "MillerDisplay Light",Helvetica,Roboto,Arial,sans-serif;
    line-height: 1.2;
    text-align: center;
    margin-bottom: 20px;
}
.dc-lancomeArticle h2{
	color: #d51b51;
	text-align: center;
	margin: 60px 0 20px 0;
	font-size: 2.5rem;
}
.dc-lancomeArticle h3{
	font-weight: bold;
	text-align: center;
	font-size: 1.7rem;
}
.dc-lancomeArticle h4{
	text-align: left;

}
.dc-lancomeArticle section{
	clear: both;
}
.dc-lancomeArticle ul li{
    font-size: 1rem;
    line-height: 1.9;
}
.dc-lancomeArticle p{
    font-size: 1rem;
    margin-bottom: 0;
    line-height: 1.9;
	text-align: justify;
	text-justify: inter-ideograph;
}

.dc-lancomeArticle p.note{
	color: #a2a2a2;
	font-style: italic;
}

.dc-lancomeArticle ol li a,
.dc-lancomeArticle ul li a,
.dc-lancomeArticle p a {
	color: #d51b51;
	text-decoration: underline;
}
.dc-lancomeArticle img{
	display: block;
	/* max-width: 100% !important;
	width: auto !important;
	height: auto !important; */
	max-width: 100%;
	width: auto;
	height: auto;
	margin: 0 auto;
}
.dc-lancomeArticle hr.styleHR{
	margin: 50px 0;
	border: 0;
	height: 2px;
	background: url("https://staging-apac-loreal.demandware.net/on/demandware.static/-/Sites-lancome-tw-Library/zh_TW/v5ef5e2e52f6800f4d5b54cd5c9e62d3a3c20d5ff/landing-page/Article/images/styleHR_gray.png?version=1,606,888,002,000") no-repeat center;
    background-size: auto;
}
.dc-lancomeArticle .smallTitle{
	letter-spacing: 3px;
	position: relative;
	display: table;
	margin: 0 auto;
}
.dc-lancomeArticle .smallTitle:before{
	content: '';
	position: absolute;
	z-index: 1;
	width: 100px;
	height: 1px;
	background: #000;
	top: 43%;
	left: -35%;
}
.dc-lancomeArticle .smallTitle:after{
	content: '';
	position: absolute;
	z-index: 1;
	width: 100px;
	height: 1px;
	background: #000;
	top: 43%;
	right: -35%;
}
.dc-lancomeArticle .item{
	margin-bottom: 60px;
    clear: both;
	margin: 0 auto;
}
.dc-lancomeArticle .textAround{
	float: left;
	width: 50%;
	padding-right: 40px;
	box-sizing: border-box;
}
.dc-lancomeArticle .mb{
	display: block !important;
}
.dc-lancomeArticle .pc{
	display: none !important;
}
.l-blog-article__inner {
    width: 97%;
    padding: 0;
    margin: 0 auto;
}

@media screen and (min-width: 48em){
	.dc-lancomeArticle h1{
	    font-size: 1.75rem;
	}
}
@media screen and (min-width: 64em){
	.dc-lancomeArticle .mb{
		display: none !important;
	}
	.dc-lancomeArticle .pc{
		display: block !important;
	}
	.l-blog-article__inner {
        width: 83.5%;
	}
}
@media screen and (min-width: 80em){
	.dc-lancomeArticle h1{
	    font-size: 2.5rem;
	}
}
@media screen and (max-width: 1200px){
	.l-blog-article__inner {
	    width: 1000px;
	}
}
@media screen and (max-width: 1023px){
	.l-blog-article__inner {
        width: 100%;
        max-width: 800px;
	    padding: 0px 16px;
    	box-sizing: border-box;
	}
}
@media screen and (max-width: 1019px){
	.dc-lancomeArticle h2{
		font-size: 1.9rem;
	}
}
@media screen and (max-width: 600px){
	.dc-lancomeArticle h2{
		font-size: 1.5rem;
	}
	.dc-lancomeArticle h3{
		font-size: 1.3rem;
	}
}


/* 產品列表 */
	.dc-lancomeArticle .productList{
		width: 100%;
		display: block;
		font-size: 0;
		margin-top: 50px;
		text-align: center;
	}
	.dc-lancomeArticle .productList li{
		display: inline-block;
		width: 25%;
		text-align: center;
		margin-bottom: 80px;
		padding: 0 1%;
		box-sizing: border-box;
	}
	.dc-lancomeArticle .productList li a{
		display: block;
		background: #000;
		color: #FFF;
		width: 100%;
	    padding: 12px 0;
	    margin-top: 25px;
	    font-size: .8125rem;
	    transition: all .4s;
	}
	.dc-lancomeArticle .productList li a:hover{
		background: #d51b51;
	    transition: all .4s;
	}
	.dc-lancomeArticle .productList li h3{
		letter-spacing: 2.5px;
	    font-size: 1rem;
	    line-height: 1.5;
	    font-weight: bold;
	    

	}
	.dc-lancomeArticle .productList .price{
		font-size: .875rem;
	}
	@media screen and (max-width: 800px){
		.dc-lancomeArticle .productList li{
			width: 33.33%;
		}
	}
	@media screen and (max-width: 550px){
		.dc-lancomeArticle .productList li{
			width: 50%;
		}
	}
	@media screen and (max-width: 400px){
		.dc-lancomeArticle .productList li{
			width: 100%;
		}
	}

/* anchor */
    section {
        position: relative;
    }

    section .adjust {
        position: absolute;
        z-index: 1;
        display: block;
        width: 200px;
        top: -130px;
    }

    @media screen and (max-width: 800px) {
        section .adjust {
            top: -150px;
        }
    }
    @media screen and (max-width: 640px) {
        section .adjust {
            top: -100px;
        }
    }

/* table 共用CSS */
	.table-scroll {
		position:relative;
		max-width:100%;
		margin:auto;
		overflow:hidden;
		border:2px solid #f5e1e4;
	}
	.table-wrap {
		width:100%;
		overflow:auto;
	}
	.table-scroll table {
		width:100%;
		margin:auto;
		border-collapse:separate;
		border-spacing:0;
	}
	.table-scroll th, .table-scroll td {
		padding:5px 10px;
		border:1px solid #FFF;
		background: #fff0f2;
		white-space:nowrap;
		vertical-align:top;
	}
	.table-scroll th.changeBg,
	.table-scroll td.changeBg{
		background: white;
	}
	.table-scroll thead, .table-scroll tfoot {
		background:#f9f9f9;
	}
	.table-scroll tfoot tr td div{
		width: 300px;
		white-space: initial;
	}
	.clone {
		position:absolute;
		top:0;
		left:0;
		pointer-events:none;
	}
	.clone th, .clone td {
		visibility:hidden
	}
	.clone td, .clone th {
		border-color:transparent
	}
	.clone tbody th {
		visibility:visible;
		color:red;
	}
	.clone .fixed-side {
		border:1px solid #FFF;
		background:#f5e1e4;
		visibility:visible;
	}
	.clone thead, .clone tfoot{
		background:transparent;
	}
	
	@media screen and (max-width: 470px){
		.table-scroll tfoot tr td div{
			width: 250px;
		}
	}
	@media screen and (max-width: 420px){
		.table-scroll tfoot tr td div{
			width: 200px;
		}
	}
	@media screen and (max-width: 380px){
		.table-scroll tfoot tr td div{
			width: 150px;
		}
	}