/*最新保養彩妝影片原*/


main#lifeandbeautymuseum:not(.init)>.container>div>article#people {
	background: #fff;
	padding-left: 68px;
	padding-top: 83px;
	padding-bottom: 106px
}

main#lifeandbeautymuseum:not(.init)>.container>div>article#people:before {
	background: #c30e2d
}

main#lifeandbeautymuseum:not(.init)>.container>div>article#people section {
	margin-top: 60px
}

main#lifeandbeautymuseum:not(.init)>.container>div>article#people section:first-of-type {
	margin-top: 0
}

main#lifeandbeautymuseum:not(.init)>.container>div>article#people section:nth-child(4n+1) ul.images li {
	right: 0;
	bottom: 0;
	z-index: 5
}

main#lifeandbeautymuseum:not(.init)>.container>div>article#people section:nth-child(4n+1) ul.images li.large {
	left: 0;
	top: 0;
	z-index: 0
}

main#lifeandbeautymuseum:not(.init)>.container>div>article#people section:nth-child(4n+2) ul.images li {
	right: 0;
	top: 0
}

main#lifeandbeautymuseum:not(.init)>.container>div>article#people section:nth-child(4n+2) ul.images li.large {
	left: 0;
	top: auto;
	bottom: 0;
	z-index: 5
}

main#lifeandbeautymuseum:not(.init)>.container>div>article#people section:nth-child(4n+3) ul.images li {
	left: 0;
	bottom: 0;
	z-index: 5
}

main#lifeandbeautymuseum:not(.init)>.container>div>article#people section:nth-child(4n+3) ul.images li.large {
	right: 0;
	top: 0;
	left: auto;
	z-index: 0
}

main#lifeandbeautymuseum:not(.init)>.container>div>article#people section:nth-child(4n+3) .info {
	margin-left: calc((100vw - 375px + 292px)*73/292)
}

main#lifeandbeautymuseum:not(.init)>.container>div>article#people section:nth-child(4n+4) ul.images li {
	left: 0;
	top: 0
}

main#lifeandbeautymuseum:not(.init)>.container>div>article#people section:nth-child(4n+4) ul.images li.large {
	right: 0;
	bottom: 0;
	left: auto;
	top: auto;
	z-index: 5
}

main#lifeandbeautymuseum:not(.init)>.container>div>article#people section:nth-child(4n+4) .info {
	margin-left: calc((100vw - 375px + 292px)*73/292)
}

main#lifeandbeautymuseum:not(.init)>.container>div>article#people section:nth-child(1) ul.images:before {
	-webkit-transform: rotate(0);
	-ms-transform: rotate(0);
	transform: rotate(0);
	-webkit-animation: rotate0 60s infinite linear;
	animation: rotate0 60s infinite linear
}

main#lifeandbeautymuseum:not(.init)>.container>div>article#people section:nth-child(2) ul.images:before {
	-webkit-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	transform: rotate(30deg);
	-webkit-animation: rotate1 60s infinite linear;
	animation: rotate1 60s infinite linear
}

main#lifeandbeautymuseum:not(.init)>.container>div>article#people section:nth-child(3) ul.images:before {
	-webkit-transform: rotate(60deg);
	-ms-transform: rotate(60deg);
	transform: rotate(60deg);
	-webkit-animation: rotate2 60s infinite linear;
	animation: rotate2 60s infinite linear
}

main#lifeandbeautymuseum:not(.init)>.container>div>article#people section:nth-child(4) ul.images:before {
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
	-webkit-animation: rotate3 60s infinite linear;
	animation: rotate3 60s infinite linear
}

main#lifeandbeautymuseum:not(.init)>.container>div>article#people section:nth-child(5) ul.images:before {
	-webkit-transform: rotate(120deg);
	-ms-transform: rotate(120deg);
	transform: rotate(120deg);
	-webkit-animation: rotate4 60s infinite linear;
	animation: rotate4 60s infinite linear
}

main#lifeandbeautymuseum:not(.init)>.container>div>article#people section:nth-child(6) ul.images:before {
	-webkit-transform: rotate(150deg);
	-ms-transform: rotate(150deg);
	transform: rotate(150deg);
	-webkit-animation: rotate5 60s infinite linear;
	animation: rotate5 60s infinite linear
}

main#lifeandbeautymuseum:not(.init)>.container>div>article#people section:nth-child(7) ul.images:before {
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
	-webkit-animation: rotate6 60s infinite linear;
	animation: rotate6 60s infinite linear
}

main#lifeandbeautymuseum:not(.init)>.container>div>article#people section:nth-child(8) ul.images:before {
	-webkit-transform: rotate(210deg);
	-ms-transform: rotate(210deg);
	transform: rotate(210deg);
	-webkit-animation: rotate7 60s infinite linear;
	animation: rotate7 60s infinite linear
}

main#lifeandbeautymuseum:not(.init)>.container>div>article#people section:nth-child(9) ul.images:before {
	-webkit-transform: rotate(240deg);
	-ms-transform: rotate(240deg);
	transform: rotate(240deg);
	-webkit-animation: rotate8 60s infinite linear;
	animation: rotate8 60s infinite linear
}

main#lifeandbeautymuseum:not(.init)>.container>div>article#people section:nth-child(10) ul.images:before {
	-webkit-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	transform: rotate(270deg);
	-webkit-animation: rotate9 60s infinite linear;
	animation: rotate9 60s infinite linear
}

main#lifeandbeautymuseum:not(.init)>.container>div>article#people section ul.images {
	width: calc(100vw - 375px + 292px);
	height: calc((100vw - 375px + 292px)*331/292);
	position: relative
}

main#lifeandbeautymuseum:not(.init)>.container>div>article#people section ul.images:before {
	content: "";
	position: absolute;
	background-image: url(../images/ring.svg);
	left: 0;
	width: calc((100vw - 375px + 292px)*292/292);
	height: calc((100vw - 375px + 292px)*292/292);
	top: calc((100vw - 375px + 292px) * 20/292)
}

main#lifeandbeautymuseum:not(.init)>.container>div>article#people section ul.images li {
	position: absolute;
	width: calc(100% * 293*.5/292)
}

main#lifeandbeautymuseum:not(.init)>.container>div>article#people section ul.images li.large {
	width: calc(100% * 219/292)
}

main#lifeandbeautymuseum:not(.init)>.container>div>article#people section ul.images li.large .image {
	padding-top: 125.11416%
}

main#lifeandbeautymuseum:not(.init)>.container>div>article#people section ul.images li.large .image::before {
	content: "";
	position: absolute;
	width: 4px;
	height: 100%;
	background: #c30e2d;
	top: 0;
	right: 0;
	z-index: 1
}

main#lifeandbeautymuseum:not(.init)>.container>div>article#people section ul.images li .image {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 75.34247%;
	background: #c30e2d
}

main#lifeandbeautymuseum:not(.init)>.container>div>article#people section ul.images li .image.loaded img {
	opacity: 1;
	-webkit-mask-position: 0;
	mask-position: 0;
	-webkit-transition: -webkit-mask-position 2.4s cubic-bezier(0, 0, .2, 1);
	transition: -webkit-mask-position 2.4s cubic-bezier(0, 0, .2, 1);
	-o-transition: mask-position 2.4s cubic-bezier(0, 0, .2, 1);
	transition: mask-position 2.4s cubic-bezier(0, 0, .2, 1);
	transition: mask-position 2.4s cubic-bezier(0, 0, .2, 1), -webkit-mask-position 2.4s cubic-bezier(0, 0, .2, 1)
}

main#lifeandbeautymuseum:not(.init)>.container>div>article#people section ul.images li .image img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	-webkit-mask-image: url(../images/gradation.png);
	mask-image: url(../images/gradation.png);
	-webkit-mask-position: 100%;
	mask-position: 100%;
	-webkit-mask-size: 300% 100%;
	mask-size: 300% 100%
}

main#lifeandbeautymuseum:not(.init)>.container>div>article#people section .info {
	width: 219px
}

main#lifeandbeautymuseum:not(.init)>.container>div>article#people section .info p.message {
	font-size: 14px;
	line-height: 1.42857;
	margin-top: 19px
}

main#lifeandbeautymuseum:not(.init)>.container>div>article#people section .info h1 {
	font-size: 20px;
	line-height: 1;
	color: #c30e2d;
	margin-top: 8px
}

main#lifeandbeautymuseum:not(.init)>.container>div>article#people section .info span.title {
	font-size: 12px;
	line-height: 1;
	color: #c30e2d;
	margin-top: 2px;
	display: inline-block
}

main#lifeandbeautymuseum:not(.init)>.container>div>article#people section .info .button {
	width: 219px;
	margin-top: 21px
}

main#lifeandbeautymuseum:not(.init)>.container>div>article#people section .info .button p {
	width: 205px
}

html:not(.sp) main#lifeandbeautymuseum:not(.init)>.container>div>article#people {
	padding-left: 271rem;
	padding-top: 0;
	padding-bottom: 198rem;
	padding-right: 60rem;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap
}

html:not(.sp) main#lifeandbeautymuseum:not(.init)>.container>div>article#people section {
	margin-top: 0;
	padding-top: 146rem;
	width: calc((100% - 21rem*9)*5/10 + 21rem*4);
	margin-right: 21rem;
	cursor: pointer
}

html:not(.sp) main#lifeandbeautymuseum:not(.init)>.container>div>article#people section:nth-child(2n) {
	margin-right: 0
}

html:not(.sp) main#lifeandbeautymuseum:not(.init)>.container>div>article#people section:nth-child(4n+3) .info {
	margin-left: calc((100% - 21rem*4)*1/5 + 21rem)
}

html:not(.sp) main#lifeandbeautymuseum:not(.init)>.container>div>article#people section:nth-child(4n+4) .info {
	margin-left: calc((100% - 21rem*4)*1/5 + 21rem)
}

html:not(.sp) main#lifeandbeautymuseum:not(.init)>.container>div>article#people section.hover .info h1,
html:not(.sp) main#lifeandbeautymuseum:not(.init)>.container>div>article#people section.hover .info span.title {
	color: #000;
	position: relative;
	z-index: 1
}

html:not(.sp) main#lifeandbeautymuseum:not(.init)>.container>div>article#people section.hover .info .button:before {
	-webkit-transform: translate(50%, -50%) scale(1);
	-ms-transform: translate(50%, -50%) scale(1);
	transform: translate(50%, -50%) scale(1);
	-webkit-transition: -webkit-transform .4s cubic-bezier(0, 1, 0, 1);
	transition: -webkit-transform .4s cubic-bezier(0, 1, 0, 1);
	-o-transition: transform .4s cubic-bezier(0, 1, 0, 1);
	transition: transform .4s cubic-bezier(0, 1, 0, 1);
	transition: transform .4s cubic-bezier(0, 1, 0, 1), -webkit-transform .4s cubic-bezier(0, 1, 0, 1)
}

html:not(.sp) main#lifeandbeautymuseum:not(.init)>.container>div>article#people section.hover .info .button p::before {
	background-color: #c30e2d
}

html:not(.sp) main#lifeandbeautymuseum:not(.init)>.container>div>article#people section ul.images {
	width: 100%;
	height: 0;
	padding-top: calc(100%*712/544)
}

html:not(.sp) main#lifeandbeautymuseum:not(.init)>.container>div>article#people section ul.images:before {
	background-image: url(../images/ring.svg);
	background-repeat: no-repeat;
	width: 100%;
	height: 0;
	padding-top: 100%;
	top: 87rem
}

html:not(.sp) main#lifeandbeautymuseum:not(.init)>.container>div>article#people section ul.images li {
	width: calc((100% - 21rem*4)*3/5 + 21rem * 2)
}

html:not(.sp) main#lifeandbeautymuseum:not(.init)>.container>div>article#people section ul.images li.large {
	width: calc((100% - 21rem*4)*4/5 + 21rem * 3)
}

html:not(.sp) main#lifeandbeautymuseum:not(.init)>.container>div>article#people section ul.images li.large .image {
	padding-top: 124.86957%
}

html:not(.sp) main#lifeandbeautymuseum:not(.init)>.container>div>article#people section ul.images li.large .image:before {
	width: 6rem
}

html:not(.sp) main#lifeandbeautymuseum:not(.init)>.container>div>article#people section ul.images li .image {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 75%
}

html:not(.sp) main#lifeandbeautymuseum:not(.init)>.container>div>article#people section ul.images li .image.loaded img {
	opacity: 1
}

html:not(.sp) main#lifeandbeautymuseum:not(.init)>.container>div>article#people section ul.images li .image img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0
}

html:not(.sp) main#lifeandbeautymuseum:not(.init)>.container>div>article#people section .info {
	width: calc((100% - 21rem*4)*3/5 + 21rem * 2)
}

html:not(.sp) main#lifeandbeautymuseum:not(.init)>.container>div>article#people section .info p.message {
	font-size: 18rem;
	line-height: 1.44444;
	margin-top: 38rem
}

html:not(.sp) main#lifeandbeautymuseum:not(.init)>.container>div>article#people section .info h1 {
	font-size: 24rem;
	margin-top: 11rem
}

html:not(.sp) main#lifeandbeautymuseum:not(.init)>.container>div>article#people section .info span.title {
	font-size: 14rem;
	margin-top: 4rem
}

html:not(.sp) main#lifeandbeautymuseum:not(.init)>.container>div>article#people section .info .button {
	width: 218rem;
	margin-top: 23rem
}

html:not(.sp) main#lifeandbeautymuseum:not(.init)>.container>div>article#people section .info .button:before {
	content: "";
	position: absolute;
	width: 210rem;
	height: 210rem;
	border-radius: 210rem;
	background-color: #c30e2d;
	top: 50%;
	right: 24rem;
	-webkit-transform: translate(50%, -50%) scale(0);
	-ms-transform: translate(50%, -50%) scale(0);
	transform: translate(50%, -50%) scale(0);
	z-index: 0
}

html:not(.sp) main#lifeandbeautymuseum:not(.init)>.container>div>article#people section .info .button p {
	width: 204rem
}
@-webkit-keyframes rotate0 {
	0% {
		-webkit-transform: rotate(0);
		transform: rotate(0)
	}
	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg)
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}

@keyframes rotate0 {
	0% {
		-webkit-transform: rotate(0);
		transform: rotate(0)
	}
	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg)
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}

@-webkit-keyframes rotate1 {
	0% {
		-webkit-transform: rotate(30deg);
		transform: rotate(30deg)
	}
	50% {
		-webkit-transform: rotate(210deg);
		transform: rotate(210deg)
	}
	100% {
		-webkit-transform: rotate(390deg);
		transform: rotate(390deg)
	}
}

@keyframes rotate1 {
	0% {
		-webkit-transform: rotate(30deg);
		transform: rotate(30deg)
	}
	50% {
		-webkit-transform: rotate(210deg);
		transform: rotate(210deg)
	}
	100% {
		-webkit-transform: rotate(390deg);
		transform: rotate(390deg)
	}
}

@-webkit-keyframes rotate2 {
	0% {
		-webkit-transform: rotate(60deg);
		transform: rotate(60deg)
	}
	50% {
		-webkit-transform: rotate(240deg);
		transform: rotate(240deg)
	}
	100% {
		-webkit-transform: rotate(420deg);
		transform: rotate(420deg)
	}
}

@keyframes rotate2 {
	0% {
		-webkit-transform: rotate(60deg);
		transform: rotate(60deg)
	}
	50% {
		-webkit-transform: rotate(240deg);
		transform: rotate(240deg)
	}
	100% {
		-webkit-transform: rotate(420deg);
		transform: rotate(420deg)
	}
}

@-webkit-keyframes rotate3 {
	0% {
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg)
	}
	50% {
		-webkit-transform: rotate(270deg);
		transform: rotate(270deg)
	}
	100% {
		-webkit-transform: rotate(450deg);
		transform: rotate(450deg)
	}
}

@keyframes rotate3 {
	0% {
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg)
	}
	50% {
		-webkit-transform: rotate(270deg);
		transform: rotate(270deg)
	}
	100% {
		-webkit-transform: rotate(450deg);
		transform: rotate(450deg)
	}
}

@-webkit-keyframes rotate4 {
	0% {
		-webkit-transform: rotate(120deg);
		transform: rotate(120deg)
	}
	50% {
		-webkit-transform: rotate(300deg);
		transform: rotate(300deg)
	}
	100% {
		-webkit-transform: rotate(480deg);
		transform: rotate(480deg)
	}
}

@keyframes rotate4 {
	0% {
		-webkit-transform: rotate(120deg);
		transform: rotate(120deg)
	}
	50% {
		-webkit-transform: rotate(300deg);
		transform: rotate(300deg)
	}
	100% {
		-webkit-transform: rotate(480deg);
		transform: rotate(480deg)
	}
}
/*////////////////////////////最新保養彩妝影片//////////////////////*/
.div_clear{ clear:both; }

#lifeandbeautymuseum #BeautyVideos header{
	padding-top: 5%
}
#lifeandbeautymuseum #BeautyVideos header h2{
	text-align: left;
    background: linear-gradient(to right, #c30328 30%, rgba(195, 3, 40, 0) 80%);
    color: #fff;
    line-height: 2;
    padding-left: 4vw;
}
#lifeandbeautymuseum #BeautyVideos header h2 u{
	font-size: 2vw;
    text-decoration: none;
    position: relative;
}
#lifeandbeautymuseum .charlotte  li:not(.large),#lifeandbeautymuseum .kentaro  li:not(.large){
	z-index: 6

}
main#lifeandbeautymuseum:not(.init)>.container>div>article#people section .info h2 {
    font-size: 20px;
    line-height: 1;
    color: #c30e2d;
    margin-top: 8px;
}
html:not(.sp) main#lifeandbeautymuseum:not(.init)>.container>div>article#people section .info h2 {
    font-size: 24rem;
    margin-top: 11rem;
}
main#lifeandbeautymuseum:not(.init)>.container>div>article#people section .info h2 {
    font-size: 20px;
    line-height: 1;
    color: #c30e2d;
    margin-top: 8px;
}
main#lifeandbeautymuseum:not(.init)>.container>div>article#people section.hover .info h2{
	color: #000;
}
#lifeandbeautymuseum .info{
	text-align: left;
}
#lifeandbeautymuseum .message.font{
	color: #000
}

@media screen and (max-width: 900px){
	#lifeandbeautymuseum #BeautyVideos header h2 u {
    font-weight: bold;
}
}

@media (min-width:769px) {
html:not(.sp) main#lifeandbeautymuseum:not(.init)>.container>div>article#people{
	padding-left: 200rem;
    padding-right: 250rem;
    padding-bottom: 80rem;
}
html:not(.sp) main#lifeandbeautymuseum:not(.init)>.container>div>article#people section {
    margin-top: 0;
    padding-top: 80rem;
    width: calc((100% - 91rem*9)*5/10 + 91rem*4);
    margin-right: 91rem;
    cursor: pointer;
}

}
@media (max-width:768px) {
main#lifeandbeautymuseum:not(.init)>.container>div>article#people section:nth-child(odd) ul.images li.large {
    left: 0;
    bottom: 0;
    z-index: 5;
}
main#lifeandbeautymuseum:not(.init)>.container>div>article#people section:nth-child(even) .info {
    margin-left: calc((100vw - 375px + 292px)*73/292);
}
main#lifeandbeautymuseum:not(.init)>.container>div>article#people section:nth-child(even) ul.images li.large {
    right: 0;
    left: auto;
    z-index: 0;
}
main#lifeandbeautymuseum:not(.init)>.container>div>article#people{
	padding-left: 38px;
}
main#lifeandbeautymuseum:not(.init)>.container>div>article#people section:nth-child(even) ul.images li {
    left: 0;
    bottom: 0;
    z-index: 5;
}

main#lifeandbeautymuseum:not(.init)>.container>div>article#people section.kelly ul.images li{
	right: 0;
    bottom: auto;
    top: 0;
    left: auto;
    z-index: 5;

}
main#lifeandbeautymuseum:not(.init)>.container>div>article#people section.kelly ul.images li.large{
	top: auto;
}
main#lifeandbeautymuseum:not(.init)>.container>div>article#people section.kelly .info {
        margin-left: 0;
}
main#lifeandbeautymuseum:not(.init)>.container>div>article#people{
	    padding-bottom: 86px;
}
}

@media (max-width: 800px) { 

#lifeandbeautymuseum #BeautyVideos header h2 u {
    font-size: 3.9vw;
}
#lifeandbeautymuseum #BeautyVideos header h2{
	background: linear-gradient(to right, #c30328 50%, rgba(195, 3, 40, 0) 100%);
}
main#lifeandbeautymuseum:not(.init)>.container>div>article#people{
	padding-top: 43px
}

}

#BeautyVideos{
	background-color: #fff;
	position: relative;
	z-index: 4;
}
#BeautyVideos p,#BeautyVideos h2{
	position: relative;
	z-index: 4;
}