/*font.css 已經引入思源黑體*/

* {
    box-sizing: border-box;
}

html,
body {
    font-family: 'Noto Sans TC', Helvetica, Arial, '黑體-繁', 'Heiti TC', '儷黑', 'LiHei', '微軟正黑體', 'Microsoft JhengHei', sans-serif;
    font-size: 16px;
    margin: 0 auto;
}

p,ul,li,h1,h2,h3{
    margin: 0;
    padding: 0;
    list-style-type: none;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    -webkit-padding-start: 0;
}
a,
button { 
    text-decoration:none;
	
	-webkit-transition:all ease-in-out 0.2s;
	-moz-transition:all ease-in-out 0.2s;
	-ms-transition:all ease-in-out 0.2s;
	-o-transition:all ease-in-out 0.2s;
	transition:all ease-in-out 0.2s;
}
a:focus,
button:focus{
    outline: none;
    text-decoration: none;
}

.clearfix:after ,.clearfix-pc:after{ /* FF, IE8, O, S, etc. */
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
  }
.clearfix,.clearfix-pc{
  zoom:1;
  }
.clear{
  clear:both;
  }
.fleft{
  float:left;
  }
.fright{
  float:right;
  }
.finger{
  cursor: pointer;
}

.center{
  text-align: center;
}
.inline_block{
  display: inline-block;
}





.wrapper {
    width: 100%;
    max-width: 2560px;
    position: relative;
    margin: 0 auto;
    background: #000;
    overflow: hidden;
}

/*-------------------------

		p1kv 

-------------------------*/

.p1kv{
	width: 100%;
	height: 972px;
	background: url('../images/kvbg.png')no-repeat top center;
	padding-top: 230px;
	position: relative;
}
.p1kv .title01{
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -488px;
	margin-top: -255px;
}
.p1kv .title02{
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -446px;
    margin-top: -67px;
}
.kvbtn{
	display: block;
	width: 298px;
	height: 47px;
	background: url('../images/kvbtn.png')no-repeat top center;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -90px;
    margin-top: 50px;
    padding-top: 8px;
    z-index: 5;
}
/* .kvbtn:hover{
	background: url('../images/kvbtn-hover.png')no-repeat top center;
} */
.kvbtn:after{
	content: url(../images/btn-arrow.png);
	padding-top: 15px;
    padding-left: 260px;
    -webkit-transition: 1s infinite;
    -webkit-animation: kvbtn 1s infinite;
}
@keyframes kvbtn{
	0%{
		padding-left:260px;
	}
	50%{
		padding-left: 270px;
	}
	100%{
		padding-left:260px;
	}
}
/*-------------------------

		p2

-------------------------*/
.p2{
	width: 100%;
	position: relative;
	padding-bottom: 481px;
	padding-top: 400px;
    margin-top: -100px;
	z-index: 1;
}
.p2 .hearb{
	position: absolute;
	top: 50%;
    left: 50%;
    margin-left: -950px;
    margin-top: -400px;
}

.p2 .title{
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -250px;
}

/*-------------------------

		p3

-------------------------*/

.p3{
	width: 100%;
	position: relative;
	padding-bottom: 780px;
	background: url('../images/p3-bg.png')no-repeat top center;
	z-index: 0;
	margin-top: -120px;
}


.p3 .content{
	width: 543px;
	text-align: center;
	position: absolute;
	left: 50%;
	margin-left: -603px;
	z-index: 1;
	padding-top: 40px;
}
.p3 .content img{
	margin-top: 100px;
}

.hearb-box{
	position: absolute;
	left: 50%;
	margin-left: -580px;
	z-index: 0;
}
.hearb-box .mask{
	width: 1643px;
	height: 967px;
	background: url('../images/mask.png')no-repeat top center;
	position: absolute;
	top: -128px;
	left: 50%;
	margin-left: -200px;
	z-index: 1;
}
.hearb-box img{
	position: absolute;
	top: 0;
}
.p3-btnbox{
    display:inline-block;
    width: 219px;
    height: 48px;
    margin-top: 30px;
    position: relative;
}

.p3-btnbox span.p3-btn{
    display:inline-block;
    width: 219px;
    height: 48px;
    background: url('../images/p3btn.png')no-repeat top center;
}
.imgboxpic{
    display: none;
    background: rgba(46, 31, 5, 0.9);
    border-radius: 10px;
    padding: 20px;
    position: absolute;
    top: -400px;
    left: 50%;
    margin-left: 320px;
}
.p3-btnbox:hover .imgboxpic{
    display: block;
}
/*-------------------------

		p4

-------------------------*/
.underbox{
	width: 100%;
	background: url('../images/p4-pdbg.png')no-repeat 50% -136%;
	text-align: center;
}
.p4{
	text-align: center;
	position: relative;
	padding-bottom: 650px;
	padding-top: 120px;
}
.p4 .title{
	position: relative;
	z-index: 1;
	margin-top: -60px;
}
.pd-box{
	width: 1160px;
	margin: 0 auto;
	position: relative;
}




/*-------------------------

		pd01-5:hover

-------------------------*/
.pd01{
	width: 187px;
	height: 612px;
	background: url('../images/pd01.png')no-repeat top center;
	position: absolute;
	top: 0;
    left: 50%;
    margin-left: -509px;
    z-index: 0;
}
.pd02{
	width: 187px;
	height: 575px;
	background: url('../images/pd02.png')no-repeat top center;
    position: absolute;
    top: 36px;
    left: 50%;
    margin-left: -297px;
    z-index: 0;
}
.pd03{
	width: 187px;
	height: 441px;
	background: url('../images/pd03.png')no-repeat top center;
    position: absolute;
    top: 170px;
    left: 50%;
    margin-left: -82px;
    z-index: 0;
}
.pd04{
	width: 187px;
	height: 331px;
	background: url('../images/pd04.png')no-repeat top center;
    position: absolute;
    top: 280px;
    left: 50%;
    margin-left: 128px;
    z-index: 0;
}
.pd05{
	width: 187px;
	height: 280px;
	background: url('../images/pd05.png')no-repeat top center;
	position: absolute;
    top: 331px;
    left: 50%;
    margin-left: 357px;
    z-index: 0;
}
/*-------------------------

		pd01-5:hover

-------------------------*/
.pd01:hover{
	background: url('../images/pd01-hover.png')no-repeat top center;
	position: absolute;
	top: 0;
    left: 50%;
    margin-left: -509px;
}
.pd02:hover{
	background: url('../images/pd02-hover.png')no-repeat top center;
    position: absolute;
    top: 36px;
    left: 50%;
    margin-left: -297px;
}
.pd03:hover{
	background: url('../images/pd03-hover.png')no-repeat top center;
    position: absolute;
    top: 170px;
    left: 50%;
    margin-left: -82px;
}
.pd04:hover{
	background: url('../images/pd04-hover.png')no-repeat top center;
    position: absolute;
    top: 280px;
    left: 50%;
    margin-left: 128px;
}
.pd05:hover{
	background: url('../images/pd05-hover.png')no-repeat top center;
	position: absolute;
    top: 331px;
    left: 50%;
    margin-left: 357px;
}
.pd01:hover,.pd02:hover,.pd03:hover,.pd04:hover,.pd05:hover{
	z-index: 1;
}

.pd-box .pd01:hover .txtbox01,
.pd-box .pd02:hover .txtbox02,
.pd-box .pd03:hover .txtbox03,
.pd-box .pd04:hover .txtbox04,
.pd-box .pd05:hover .txtbox05{
	display: block;
}

.txtbox01,.txtbox02,.txtbox03,.txtbox04,.txtbox05{
	display: none;
	width: 400px;
	padding: 20px;
	border-radius: 10px;
	background: rgba(52, 32, 16, 0.9);
	text-align: left;
	z-index: 1;
	
}

.txtbox01{
	position: absolute;
	top: 120px;
    left: 189px;
}
.txtbox02{
	position: absolute;
	top: 100px;
    left: 168px;
}
.txtbox03{
	position: absolute;
	top: -208px;
    left: -44px;
}
.txtbox04{
	position: absolute;
    top: -216px;
    right: -86px;
}
.txtbox05{
	position: absolute;
	top: -257px;
    right: -53px;
}
.txtbox01 h3,.txtbox02 h3,.txtbox03 h3,.txtbox04 h3,.txtbox05 h3{
	font-size: 20px;
	color: #fef8eb;
	line-height: 26px;
	font-family: 'Noto Sans TC';
	font-weight: 400;
	margin-bottom: 5px;
	color: #ffdca1;
}
.txtbox01 p,.txtbox02 p,.txtbox03 p,.txtbox04 p,.txtbox05 p{
	font-size: 16px;
	line-height: 24px;
	color: #fef8eb;
	font-family: 'Noto Sans TC';
	font-weight: 300;
	text-align: justify;
}

/*-------------------------

		p5

-------------------------*/

.p5{
	width: 100%;
	position: relative;
	padding-bottom: 700px;
	padding-top: 40px;
}

.p5video{
	width: 757px;
	text-align: center;
	position: absolute;
    left: 50%;
    margin-left: -595px;
}
.p5video .title{
	margin-left: 120px;
}
.video_box{
	margin-top: -30px;
}
.womanbox{
	position: absolute;
	top: 0;
    left: 50%;
    margin-left: 75px;

}
.womanbox .woman01{
	position: absolute;
	top: 140px;
}
.womanbox .woman02{
	position: absolute;
	top: 350px;
    left: 80px;
}
/*-------------------------

		p6

-------------------------*/
.p6{
	width: 100%;
	background: url('../images/blog-bg.png')no-repeat top center;
	text-align: center;
	padding: 100px 0 196px 0;
}

.p6 a{
	display: inline-block;
	margin-right:34px;

}

.kol01{
	width: 279px;
	height: 438px;
	background: url('../images/blog01.png')no-repeat top center;
}
.kol02{
	width: 283px;
	height: 438px;
	background: url('../images/blog02.png')no-repeat top center;
}
.kol03{
	width: 287px;
	height: 439px;
	background: url('../images/blog03.png')no-repeat top center;
}
.kol01:hover{
	background: url('../images/blog01-hover.png')no-repeat top center;
}
.kol02:hover{
	background: url('../images/blog02-hover.png')no-repeat top center;
}
.kol03:hover{
	background: url('../images/blog03-hover.png')no-repeat top center;
}

.w1200{
	width: 1200px;
	margin: 0 auto;
}
.menu{
	padding: 10px 0;
	width: 100%;
	height: 57px;
	background: url('../images/menu.png')no-repeat top center;
	position: fixed;
	top: 0;
	z-index: 5;
}
.menu a{
	display: inline-block;
	margin-right: 20px;
	height: 50px;
}

.shiseidologo{
	width: 259px;
	height: 33px;
	background: url('../images/logo.png')no-repeat top center;
	float: left;
	/* margin-top: 5px; */
}
.page-link{
	float: right;
}
.page-link a{
	padding: 15px 0;
	margin: 10px 20px 10px 0;
}
.a1,.a2,.a3,.a4,.a5{
	margin-top: -5px;
}
.a1{
	width: 34px;
	height: 16px;
	background: url('../images/a1.png')no-repeat top center;
}

.a2{
	width: 69px;
	height: 16px;
	background: url('../images/a2.png')no-repeat top center;
}

.a3{
	width: 87px;
	height: 16px;
	background: url('../images/a3.png')no-repeat top center;
}

.a4{
	width: 104px;
	height: 16px;
	background: url('../images/a4.png')no-repeat top center;
}

.a5{
	width: 87px;
	height: 16px;
	background: url('../images/a5.png')no-repeat top center;
}
.fb{
	width:33px;
	height:33px;
	background: url('../images/fb.png')no-repeat top center;
}

.outpicbox{
    width: 1160px;
    margin: 0 auto;
    padding: 0 40px;
}
.pic{
	width: 1080px;
	margin: 0 auto;
    margin-bottom: 100px;
    position: relative;
    text-align: center;
}
.pic .title{
	display: inline-block;
	margin-bottom: 80px;
}
.pic .mtitle{
	display: none;
}
.pic .slick-dots{
    position: absolute;
    top: initial;
    bottom: -50px;
}
.pic .slick-prev, .pic .slick-next{
    top: 50%;
}
.pic .slick-prev{
    left:-3%; 
}
.pic .slick-next{
    right:-3%; 
}
.picbox{
	width: 504px;
    float: left ;
    margin: 10px 25px 10px 0;
}
.outpicbox .picbox:nth-child(2n){
	margin-right: 0; 
}
.picbox img{
	background: rgba(200, 150, 78, 0.48);
    width: 205px;
    height: 205px;
}
.picbox p{
    color: #d9cab2;
    font-size: 16px;
    line-height: 26px;
    margin-left: 240px;
    font-weight: 100;
    text-align: justify;
}
.picbox p.pictitle{
    color: #d9cab2;
    font-size: 21px;
    font-weight: 400;
    margin-bottom: 15px;
}
.linebox{
	display: none;
    padding: 40px 60px;
}
.line{
    width: 100%;
    height: 1px;
    display: block;
    border-top: 1px solid rgba(226, 179, 65, 0.3);
}

/* 左右按鍵 */
.slick-prev {
    left: 20px;
    background: url('../images/mobile/btn-arrow2.png') no-repeat center;
}
.slick-next {
    right: 20px;
    background: url('../images/mobile/btn-arrow.png') no-repeat center;
}
.slick-prev, .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute; 
    top: 0; 
    z-index: 10;
    display: block;
    width: 43px; height: 85px;
    margin-top: -60px;
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    opacity: .8;
}


.slick-prev:hover, .slick-next:hover {
    opacity: 1;
}
.pic .slick-prev:hover {
    left:-3.2%;
}
.pic .slick-next:hover {
    right: -3.2%;
}



/* Dots */
.slick-dotted.slick-slider{
    margin-bottom: 0;
}
.p5 .slick-dots{ top: -30px;
    
}
.slick-dots {
    position: absolute; top: 0;
    display: block;
    width: 100%;
    padding: 0; margin: 0;
    list-style: none; text-align: center;
}
.slick-dots li{
    position: relative;
    display: inline-block;
    cursor: pointer;
    width: 20px; height: 20px;
    border-radius: 50px;
    margin: 0 5px; padding: 0;
    
}
.slick-dots li button{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px; height: 20px;
    border-radius: 50px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before{
    opacity: 1;
    color: #e56e91;
    background-color:#ffd691;
    
}
.slick-dots li button:before{

    position: absolute; top: 0; left: 0;

    width: 20px; height: 20px;
    border-radius: 50px;

    content: '';
    text-align: center;

    opacity: .5;
    background-color:#555;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .7;
    color: #dcdcdc;
    background-color:#ffd691;
}