@charset "UTF-8";
/**
*
* @authors Your Name (you@example.org)
* @date    2016-12-10 16:57:22
* @version $Id$
*/

/*
purple #B1658B;
red #CA2420;
blue #326295;
orange #F89829;
*/

*{
	box-sizing: border-box;
}

img{
	display: block;
}

html,body{
	letter-spacing: 3px;
	font-family: "微軟正黑體", "微软雅黑", "Helvetica Neue", Helvetica, Arial, sans-serif;
	padding: 0;
	margin: 0;
	font-size:14px;
}

body{
	background: #fee8e5;
}

.container{
	display: block;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 15px;
}

.lihsi-desktop{
	display: inline-block !important;
}

.lihsi-mobile{
	display: none !important;
}

header{
	position: absolute;
	display: block;
	width: 100%;
	top: 0;
	left: 0;
	padding-top: 1%;
	z-index: 99;

	box-shadow: inset 0 120px 120px -120px rgba(0,0,0,0.7);
}

header .logo{
	display: inline-block;
	float: left;
	width: 15%;
	padding-bottom: 1%;
	padding-right: 5%;
}

header .logo img{
	width: 100%;
}

header .switch{
	position: absolute;
	display: none;
	top: 20px;
	right: 10px;
}

header .switch a{
	display: inline-block;
	font-size: 2rem;
	color: #5b0d3e;
	text-decoration: none;
}

header .switch a i.fa-bars{
	display: inline-block;
}

header .switch a i.fa-xmark{
	display: none;
}

header .switch a.open i.fa-bars{
	display: none;
}

header .switch a.open i.fa-xmark{
	display: inline-block;
}


header nav{
	position: relative;
	display:flex;
    align-items:center;
    justify-content:center;
	width: 100%;
	border-top: 1px solid #FFF;
	border-bottom: 1px solid #FFF;
}

header nav ul{
	position: relative;
	display: inline-block;
	float: left;
	margin: 0;
	padding: 0;
	width: 70%;
	list-style: none;
}

header nav ul li{
	position: relative;
	display: inline-block;
	float: left;
	width: 20%;
	border-right: 1px solid #FFF;
}

header nav ul li a{
	position: relative;
	display: inline-block;
	width: 100%;
	text-align: center;
	padding: 10% 0;

	font-size: 1.3rem;
	font-weight: bold;
	color: #FFF;
	text-decoration: none;
}

header nav ul li a:hover{
	text-decoration: none;
	color: #5b0d3e;
	background: #FFF;
}

header nav .social{
	position: relative;
	display: block;
	float: left;
	width: 30%;
	text-align: right;
}

header nav .social a{
	display: inline-block;
	margin-left: 2%;
	width: 32px;
	height: 32px;

	padding: 0;

	background-repeat: no-repeat !important;
	background-size: 100% auto !important;
	background-position: center center !important;
}

header nav .social a.fb{
	background: url(../../assets/images/social-icon-fb.png);
}

header nav .social a.fb:hover{
	background: url(../../assets/images/social-icon-fb-hover.png);
}

header nav .social a.ig{
	background: url(../../assets/images/social-icon-ig.png);
}

header nav .social a.ig:hover{
	background: url(../../assets/images/social-icon-ig-hover.png);
}

header nav .social a.line{
	background: url(../../assets/images/social-icon-line.png);
}

header nav .social a.line:hover{
	background: url(../../assets/images/social-icon-line-hover.png);
}

header.scroll{
	position: fixed;
	top: 0;
	left: 0;
	padding-top: 1%;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
    
    background: #FFF;

    transition: 0.5s;
}

header.scroll .logo{
	display: inline-block;
	float: left;
	width: 15%;
}

header.scroll nav{
	width: 75%;
	padding-top: 2%;
	border-top: 0;
	border-bottom: 0;
}

header.scroll nav ul li{
	border-right: 1px solid #5b0d3e;
}

header.scroll nav ul li a{
	color: #5b0d3e;
	padding: 0;
}

header.scroll nav ul li a:hover{
	color: #f8afa9;
	background: none;
}

header.scroll nav .social a.fb{
	background: url(../../assets/images/social-icon-fb-hover.png);
}

header.scroll nav .social a.ig{
	background: url(../../assets/images/social-icon-ig-hover.png);
}

header.scroll nav .social a.line{
	background: url(../../assets/images/social-icon-line-hover.png);
}

.kv img{
	width: 100%;
}

.product{
	position: relative;
	display: inline-block;
	width: 100%;
	padding-top: 4%;
	padding-bottom: 4%;
	text-align: center;
}

.product-pannel{
	position: relative;
	display: inline-block;
	width: 100%;
	text-align: center;
}

.product-pannel .slick-product .slick-track .slick-slide img{
	opacity: 0.7;
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  transform: scale(0.5);
  transition: 0.5s;
  transform-origin:center 50%;
  
  width: 100%;

  margin: 0 auto;
}

.product-pannel .slick-product .slick-track .slick-slide.jr img{
  -webkit-transform: scale(0.6);
  -moz-transform: scale(0.6);
  transform: scale(0.6);
  transition: 0.5s;
  transform-origin:center 50%;

  margin: 0 auto;
}

.product-pannel .slick-product .slick-track .slick-slide.slick-center img{
	opacity: 1;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  transform: scale(0.8);
  transition: 0.5s;

  margin: 0 auto;
}

.product-pannel .slick-product .slick-track .slick-slide span.product-title{
	display: inline-block;
	width: 100%;
	padding: 3%;
	opacity: 0;
	border-radius: 15px;
	text-align: center;
	font-weight: bold;
	background: #3f0126;
	color: #FFF;

}

.product-pannel .slick-product .slick-track .slick-slide.slick-center span.product-title{
	display: inline-block;
	opacity: 1;
	transition: 2s;
}

.product-pannel a.prev-btn, .product-pannel a.next-btn{
	position: absolute;
	display: inline-block;
	color: #824f64;
	text-decoration: none;
	top: 50%;
	transform-y: -50%;

	font-size: 2em;
}

.product-pannel a.prev-btn, .product-pannel a.next-btn:hover{
	color: #824f64;
	text-decoration: none;
}

.product-pannel a.prev-btn{
	left: 0;
}

.product-pannel a.next-btn{
	right: 0;
}

/*
.slick-product .slick-slide {
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  transform: scale(0.5);
  transition: 0.5s;
}

.slick-product .slick-slide.slick-center {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
  transition: 0.5s;
}
*/

.breastfeeding{
	position: relative;
	display: block;
	width: 100%;
	max-width: 1920px;
	padding-top: calc(30px + 4%);
	padding-bottom: 4%;

	margin: 0 auto;

	overflow-x: hidden;
}

.breastfeeding img.bg{
	width: 1920px;
	margin: 0 calc(50% - 1920px * 0.5);
	z-index: 3;
}

.breastfeeding img.title{
	position: absolute;
	top: 280px;
	left: calc(50% - (389px * 0.5));

	width: 389px;
}

.breastfeeding .pannel{
	position: absolute;
	display: inline-block;
	top: calc(50% + 170px);
	left: calc(50% + 172px);
	width: 340px;
	text-align: center;
	color: #3f0126;
	font-size: 1.5rem;
	font-weight: bold;
	line-height: 30px;
	letter-spacing: 0;

}

.breastfeeding .pannel a.link{
	display: inline-block;
	width: 100%;
	margin-top: 20px;
	padding: 10px 5px;
	color: #FFF;
	background: #3f0126;
	border-radius: 15px;
	-webkit-box-shadow: 0px 0px 3px #333;
	-moz-box-shadow: 0px 0px 3px #333;
	box-shadow: 0px 0px 3px #333;

	font-size: 1.6rem;

	text-decoration: none;
}

.breastfeeding .pannel a.link:hover{
	color: #3f0126;
	background: #FFF;
	text-decoration: none;
}

.breastfeeding img.bear{
	position: absolute;
	top: 0px;
	left: calc(50% + 170px);

	width: 269px;
	z-index: -1;
}

.youtube{
	display: inline-block;
	width: 100%;
	padding-top: 4%;
	padding-bottom: 4%;
}

.youtube .title{
	display: block;
	width: 100%;
	overflow-x: hidden;
}

.youtube .title img{
	width: 1170px;
	margin: 0 calc(50% - (1170px * 0.5));
}

.youtube .pannel{
	display: inline-block;
	width: 100%;
	padding: 4% 8%;
}

.youtube .pannel .video-container {
	position: relative;
	padding-bottom: 56.25%;/*為影片高度與寬度的比例16:9計算得來，9除以16=0.5625換算高度比0.5625=56.25%*/
	padding-top: 30px;/*用於修正的高度，可用25px或30px*/
	height: 0;
	overflow: hidden;

	border: 5px solid #5b0d3e;
	background: #000;
}
.youtube .pannel .video-container iframe, .youtube .pannel .video-container object,.youtube .pannel .video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.mama{
	display: inline-block;
	width: 100%;
	padding-top: 4%;
	padding-bottom: 4%;
}

.mama .title{
	display: block;
	width: 100%;
	overflow-x: hidden;
}

.mama .title img{
	width: 1170px;
	margin: 0 calc(50% - (1170px * 0.5));
}

.mama .group{
	display: flex;
	width: 100%;
	padding: 3% 0;
}

.mama .leftbl{
	position: relative;
	display: inline-block;
	float: left;
	margin-right: 0.5%;
	width: 49.5%;
	height: 100%;
}

.mama .leftbl:after{
	content: "";
	display: block;
	padding-top: 90%;
}

.mama .rightbl{
	position: relative;
	float: left;
	display: inline-block;
	margin-left: 0.5%;
	width: 49.5%;
}

.mama .rightbl .item{
	position: relative;
	display: inline-block;
	float: left;
	width: 100%;
	height: 49%;
	margin-top:  1%;

	background-size: cover !important;
	background-position: center center !important;
}

.mama .rightbl .item:first-child{
	height: 49%;
	margin-bottom: 1%;
	margin-top: 0;
}

.mama .leftbl a, .mama .rightbl .item a{
	position: absolute;
	display: inline-block;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

.mama .leftbl a .detail, .mama .rightbl .item a .detail{
	position: absolute;
	display: inline-block;
	width: 100%;
	left: 0;
	bottom: 0;

	padding: 2%;

	background-image: linear-gradient(-180deg, rgba(255,255,255,0) 0%, #fff 100%);
}

.mama .leftbl a .detail .title, .mama .rightbl .item a .detail .title{
	display: inline-block;
	width: 100%;
	padding-bottom: 10px;
	color: #000;
	font-weight: bold;
	font-size: 1.5rem;
	letter-spacing: 0;
}

.mama .leftbl a .detail .memo, .mama .rightbl .item a .detail .memo{
	display: inline-block;
	width: 100%;
	color: #000;
	font-size: 1rem;
	letter-spacing: 0;
}

.mama .leftbl a .detail .date, .mama .rightbl .item a .detail .date{
	display: inline-block;
	width: 100%;
	color: #666;
	font-size: 1rem;
	letter-spacing: 0;
	text-align: right;
}



/*

.mama .leftbl a, .mama .rightbl .item a{
	position: absolute;
	display: inline-block;
	width: 100%;
	height: 100%;
	z-index: 2;
	text-indent: -9999px;
}
*/

.mama .leftbl a.detail, .mama .rightbl .item .detail{
	position: absolute;
	display: inline-block;
	width: 100%;
	left: 0;
	bottom: 0;

	padding: 2%;

	background-image: linear-gradient(-180deg,rgba(255,255,255,0) 0%,#fff 100%);
}


.mama .leftbl .detail .title, .mama .rightbl .item .detail .title{
	display: inline-block;
	width: 100%;
	overflow-x: initial;
}

.news{
	display: inline-block;
	width: 100%;
	padding-top: 14%;
	padding-bottom: 4%;

	box-shadow: rgba(0, 0, 0, 0.1) 0px 15px 10px 0px;

	background: url(../../assets/images/news-bg.png);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% auto;
	background-color: #ffa7a5;
}

.news .title{
	display: block;
	width: 100%;
	overflow-x: hidden;
}

.news .title img{
	width: 1170px;
	margin: 0 calc(50% - (1170px * 0.5));
}

.news .group{
	display: inline-block;
	width: 100%;
	padding: 3% 0;
}

.news .group .item{
	display: inline-block;
	float: left;
	width: 33.333%;

	padding: 0 2%;
}

.news .group .item a{
	display: inline-block;
	width: 100%;
	height: 0;
	padding-bottom:100%;
	background: red;
	border-radius: 50%;

	text-indent: -9999px;

	background-size: 100% !important;
	background-position: center center !important;

	transition: 0.3s;
}

.news .group .item a:hover{
	background-size: 110% !important;
	background-position: center center !important;
}

.news .more{
	display: inline-block;
	width: 100%;

	text-align: center;
}

.news .more a{
	color: #3f0126;
	font-size: 1.5rem;
	text-decoration: none;
}

.news .more a:hover{
	color: #FFF;
}

.ig{
	display: block;
	width: 100%;
	padding-top: 8%;
	padding-bottom: 4%;

	background-color: #fee8e5;
}

.ig .title{
	display: block;
	width: 100%;
	overflow-x: hidden;
}

.ig .title img{
	width: 1170px;
	margin: 0 calc(50% - (1170px * 0.5));
}

.ig .group{
	display: inline-block;
	width: 100%;
	padding: 3% 3%;
}

.ig .group .item{
	display: inline-block;
	float: left;
	width: 33.333%;

	padding: 0.5%;
}

.ig .group .item a{
	display: inline-block;
	width: 100%;
	height: 0;
	padding-bottom:100%;

	text-indent: -9999px;

	background-size: 100% !important;
	background-position: center center !important;

	transition: 0.3s;
	overflow-y: hidden;
}

.ig .group .item a img{
	width: 100%;
}

footer{
	display: block;
	width: 100%;
	padding-top: 15%;
	padding-bottom: 4%;

	background: url(../../assets/images/footer-bg.png);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% auto;
	background-color: #ffa7a5;
}

footer img.bg{
	width: 100%;
}

footer .info{
	width: 100%;
	display: inline-block;
	padding-bottom: 30px;
}

footer .info .f-logo{
	float: left;
	width: 20%;
	padding-right: 3%;
}

footer .info .f-logo img{
	width: 100%;
	max-width: 175px;
}

footer .info .subject{
	float: left;
	width: 28%;
	padding-right: 3%;
}

footer .info .subject span.master{
	display: inline-block;
	width: 100%;
	padding-bottom: 5px;

	color: #FFF;
	font-size: 1.7rem;
	font-weight: bold;
}

footer .info .subject span.slave{
	display: inline-block;
	width: 100%;

	color: #FFF;
	font-size: 1.15rem;
}

footer .info .service{
	float: left;
	width: 22%;
	padding-right: 3%;
}

footer .info .service span.tel{
	display: inline-block;
	width: 100%;

	padding-bottom: 5px;

	color: #FFF;
	font-size: 1.7rem;
	font-weight: bold;
}

footer .info .service span.date{
	display: inline-block;
	width: 100%;

	color: #FFF;
	font-size: 1.15rem;
}

footer .info ul.social{
	display: block;
	float: left;
	width: 30%;
	
	margin: 0;
	padding: 0;

	list-style-type: none;
}

footer .info ul.social li{
	display: inline-block;
	float: left;
	width: 20%;

	text-align: center;
}

footer .info ul.social li a{
	display: block;
}

footer .info ul.social li a img{
	width: 70%;
	max-width: 54px;
	margin: 0 auto;
}

footer .memo{
	display: block;
	text-align: center;
}

footer .memo span{
	display: inline-block;
	padding: 5px 10px;
	border: 1px solid #FFF;
	color: #FFF;
}

footer .copyright{
	display: block;
	padding-top: 20px;

	font-size: 0.85rem;
	color: #FFF;
	letter-spacing: 0;
	text-align: center;
}

/*小於等於1440 0.75*/ 
@media (max-width: 1440px) {

	.breastfeeding img.bg{
		width: 1440px;
		margin: 0 calc(50% - (1440px * 0.5));
	}

	.breastfeeding img.title{
		top: 180px;
		left: calc(50% - (389px * 0.75 * 0.5));
		width: calc(389px * 0.75);
	}

	.breastfeeding .pannel{
		display: inline-block;
		top: calc(50% + 120px);
		left: calc(50% + 128px);
		width: 260px;
		font-size: 1.2rem;
		line-height: 26px;
		letter-spacing: 1px;

	}

	.breastfeeding .pannel a.link{
		margin-top: 10px;
		padding: 8px 4px;
		font-size: 1.3rem;
	}

	.breastfeeding img.bear{
		left: calc(50% + calc(170px * 0.75));

		width: calc(269px * 0.75);
	}

	.breastfeeding img.title{
		top: 180px;
		left: calc(50% - (389px * 0.75 * 0.5));
		width: calc(389px * 0.75);
	}

	.youtube .title img{
		width: calc(1170px * 0.75);
		margin: 0 calc(50% - (1170px * 0.75 * 0.5));
	}

	.mama .title img{
		width: calc(1170px * 0.75);
		margin: 0 calc(50% - (1170px * 0.75 * 0.5));
	}

	.news .title img{
		width: calc(1170px * 0.75);
		margin: 0 calc(50% - (1170px * 0.75 * 0.5));
	}

	.ig .title img{
		width: calc(1170px * 0.75);
		margin: 0 calc(50% - (1170px * 0.75 * 0.5));
	}
}

/*小於等於1200 0.625*/
@media (max-width: 1200px) {

	footer .info{
		padding-bottom: 20px;
	}

	footer .info .f-logo{
		width: 18%;
		padding-right: 2%;
	}

	footer .info .subject{
		float: left;
		width: 29%;
		padding-right: 2%;
	}

	footer .info .subject span.master{
		font-size: 1.5rem;
	}

	footer .info .subject span.slave{
		font-size: 1.10rem;
	}

	footer .info .service{
		width: 23%;
		padding-right: 2%;
	}

	footer .info .service span.tel{
		font-size: 1.3rem;
	}

	footer .info .service span.date{
		font-size: 1rem;
	}

	footer .info ul.social{
		display: block;
		float: left;
		width: 30%;
		
		margin: 0;
		padding: 0;

		list-style-type: none;
	}

	footer .info ul.social li{
		display: inline-block;
		float: left;
		width: 20%;

		text-align: center;
	}

	footer .info ul.social li a{
		display: block;
	}

	footer .info ul.social li a img{
		width: 70%;
		max-width: 54px;
		margin: 0 auto;
	}

	footer .memo{
		display: block;
		text-align: center;
	}

	footer .memo span{
		display: inline-block;
		padding: 5px 10px;
		border: 1px solid #FFF;
		color: #FFF;
	}

	footer .copyright{
		display: block;
		padding-top: 20px;

		font-size: 0.85rem;
		color: #FFF;
		letter-spacing: 0;
		text-align: center;
	}

}

/*小於等於960 0.5*/
@media (max-width: 960px) {

	

}


/*小於等於768 0.4*/
@media (max-width: 768px) {

	.lihsi-desktop{
		display: none !important;
	}

	.lihsi-mobile{
		display: inline-block !important;
	}

	.breastfeeding img.bg{
		width: 768px;
		margin: 0 calc(50% - (768px * 0.5));
	}

	.breastfeeding .pannel{
		display: inline-block;
		top: calc(50% + 190px);
		left: calc(50% + 34px);
		width: 260px;
		font-size: 1.2rem;
		line-height: 26px;
		letter-spacing: 1px;
	}

	.breastfeeding .pannel a.link{
		margin-top: 10px;
		padding: 4px 2px;
		font-size: 1.3rem;
	}

	.breastfeeding img.bear{
		left: calc(50% + calc(10px));

		width: calc(269px * 0.75);
	}

	footer .info{
		padding-bottom: 20px;
	}

	footer .info .f-logo{
		width: 20%;
		padding-right: 3%;
	}

	footer .info .subject{
		float: left;
		width: 48%;
		padding-right: 3%;
		text-align: center;
	}

	footer .info .subject span.master{
		font-size: 1.5rem;
	}

	footer .info .subject span.slave{
		font-size: 1.10rem;
	}

	footer .info .service{
		width: 32%;
		padding-right: 0%;
	}

	footer .info .service span.tel{
		font-size: 1.3rem;
	}

	footer .info .service span.date{
		font-size: 1rem;
	}

	footer .info ul.social{
		display: block;
		float: left;
		width: 60%;

		
		margin: 0 auto;
		padding-top: 30px;

		list-style-type: none;
	}

	footer .info ul.social li{
		display: inline-block;
		float: left;
		width: 20%;

		text-align: center;
	}

	footer .info ul.social li a{
		display: block;
	}

	footer .info ul.social li a img{
		width: 70%;
		max-width: 54px;
		margin: 0 auto;
	}

	footer .memo{
		display: block;
		text-align: center;
	}

	footer .memo span{
		display: inline-block;
		padding: 5px 10px;
		border: 1px solid #FFF;
		color: #FFF;
	}

	footer .copyright{
		display: block;
		padding-top: 20px;

		font-size: 0.85rem;
		color: #FFF;
		letter-spacing: 0;
		text-align: center;
	}

}

/*小於等於720*/
@media (max-width: 720px) {

	header{
		position: fixed;
		top: 0;
		left: 0;
		padding-top: 0%;
		z-index: 99;

		background: #FFF;

		box-shadow: none;
	}

	header .logo{
		float: left;
		width: 120px;
	}

	header .switch{
		display: inline-block;
	}

	header nav{
		display: none;
		position: absolute;
		background: #FFF;
		left: 0;
		border: 0;
		margin-top: 66px;
	}

	header nav.open{
		display: inline-block;
	}

	header nav ul{
		margin: 0;
		width: 100%;

	}

	header nav ul li{
		width: 100%;
		padding: 10px 30px;
		border-right: 0;
	}

	header nav ul li a{
		padding: 10px 0;

		font-size: 1.3rem;
		font-weight: bold;
		color: #000;
		text-decoration: none;

		border-bottom: 3px solid #5b0d3e;
	}

	header nav ul li a:hover{
		text-decoration: none;
		color: #5b0d3e;
		background: #FFF;
	}

	header nav ul li:last-child a{
		border-bottom: 0;
	}

	header nav .social{
		display: none;
	}

	header.scroll{
		padding-top: 0;
	  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
	}

	header.scroll .logo{
		float: left;
		width: 120px;
	}

	header.scroll nav{
		width: 100%;
		border: 0;
		margin-top: 72px;
	}

	header.scroll nav ul li{
		width: 100%;
		padding: 10px 30px;
		border-right: 0;

	}

	header.scroll nav ul li a{
		padding: 10px 0;

		font-size: 1.3rem;
		font-weight: bold;
		color: #000;
		text-decoration: none;

		border-bottom: 3px solid #5b0d3e;
	}

	header.scroll nav ul li a:hover{
		text-decoration: none;
		color: #5b0d3e;
		background: #FFF;
	}

	header.scroll nav ul li:last-child a{
		border-bottom: 0;
	}

	.kv{
		padding-top: 65px;
	}


	.mama .group{
		display: inline-block;
		width: 100%;
		padding: 3% 0;
	}

	.mama .leftbl{
		position: relative;
		display: inline-block;
		float: left;
		margin-right: 0%;
		width: 100%;
		height: auto;
		background-repeat: no-repeat !important;

		background-size: cover !important;
		background-position: center center !important;
	}

	.mama .leftbl:after{
		display: none;
	}

	.mama .rightbl{
		position: relative;
		float: left;
		display: inline-block;
		margin-left: 0%;
		width: 100%;
	}

	.mama .rightbl .item{
		position: relative;
		display: inline-block;
		float: left;
		width: 100%;
		height: auto;
		margin-top: 3%;
	}

	.mama .rightbl .item:first-child{
		height: auto;
		margin-bottom: 0%;
		margin-top: 3%;
	}

	.mama .leftbl a, .mama .rightbl .item a{
		position: relative;
		display: inline-block;
		width: 100%;
		height: auto;
		left: inherit;
		top: inherit;
		padding-top: 250px;

		background-repeat: no-repeat !important;
		background-size: cover !important;
		background-position: center center !important;
	}

	.mama .leftbl a .detail, .mama .rightbl .item a .detail{
		position: relative;
		display: inline-block;
		width: 100%;
		left: auto
		bottom: 0;

		padding: auto;

		background-image: linear-gradient(-180deg, rgba(255,255,255,0) 0%, #fff 100%);
	}

	.mama .leftbl a .detail .title, .mama .rightbl .item a .detail .title{
		display: inline-block;
		width: 100%;
		padding-bottom: 10px;
		color: #000;
		font-weight: bold;
		font-size: 1.5rem;
		letter-spacing: 0;
	}

	.mama .leftbl a .detail .memo, .mama .rightbl .item a .detail .memo{
		display: inline-block;
		width: 100%;
		color: #000;
		font-size: 1rem;
		letter-spacing: 0;
	}

	.mama .leftbl a .detail .date, .mama .rightbl .item a .detail .date{
		display: inline-block;
		width: 100%;
		color: #666;
		font-size: 1rem;
		letter-spacing: 0;
		text-align: right;
	}

	footer .info{
		padding-bottom: 20px;
	}

	footer .info .f-logo{
		width: 30%;
		padding-right: 30px;
	}

	footer .info .subject{
		float: left;
		width: 70%;
		padding-right: 0%;
		text-align: left;
	}

	footer .info .subject span.master{
		padding-top: 5px;
		font-size: 1.5rem;
	}

	footer .info .subject span.slave{
		font-size: 1.10rem;
	}

	footer .info .service{
		width: 50%;
		padding-top: 20px;
		padding-right: 0%;
		text-align: center;
	}

	footer .info .service span.tel{
		font-size: 1.3rem;
	}

	footer .info .service span.date{
		letter-spacing: 0;
		font-size: 1rem;
	}

	footer .info ul.social{
		display: block;
		float: left;
		width: 50%;
		text-align: center;

		
		margin: 0 auto;
		padding-top: 30px;

		list-style-type: none;
	}

	footer .info ul.social li{
		display: inline-block;
		float: left;
		width: 20%;

		text-align: center;
	}

	footer .info ul.social li a{
		display: block;
	}

	footer .info ul.social li a img{
		width: 70%;
		max-width: 54px;
		margin: 0 auto;
	}

	footer .memo{
		display: block;
		text-align: center;
	}

	footer .memo span{
		display: inline-block;
		padding: 5px 10px;
		border: 1px solid #FFF;
		color: #FFF;
		letter-spacing: 0;
		font-size: 0.7rem;
	}

	footer .copyright{
		font-size: 0.6rem;
	}
}



/*小於等於480*/
@media (max-width: 480px) {

	.product-pannel{
		padding: 0 20px;
	}

	.product-pannel a.prev-btn, .product-pannel a.next-btn{
		top: 40%;
	}

	.breastfeeding img.title{
		top: 180px;
		left: calc(50% - (389px * 0.4 * 0.5));
		width: calc(389px * 0.4);
	}

	.youtube .title img{
		width: calc(1170px * 0.4);
		margin: 0 calc(50% - (1170px * 0.4 * 0.5));
	}

	.youtube .pannel{
		padding: 4% 0;
	}

	.mama .title img{
		width: calc(1170px * 0.4);
		margin: 0 calc(50% - (1170px * 0.4 * 0.5));
	}

	.mama .leftbl a, .mama .rightbl .item a{
		padding-top: 150px;
	}

	.mama .leftbl a .detail .title, .mama .rightbl .item a .detail .title{
		padding-bottom: 10px;
		font-size: 1.2rem;
	}

	.news .title img{
		width: calc(1170px * 0.4);
		margin: 0 calc(50% - (1170px * 0.4 * 0.5));
	}

	.news .group .item{
		width: 100%;
		padding: 20px;
		margin-bottom: 20px;
	}

	.news .more a{
		display: inline-block;
		letter-spacing: 0;
		padding-bottom: 20px;
	}



	.ig .title img{
		width: calc(1170px * 0.4);
		margin: 0 calc(50% - (1170px * 0.4 * 0.5));
	}
}

/*小於等於440*/
@media (max-width: 440px) {
	
	.breastfeeding img.title{
		top: 128px;
	}

	.breastfeeding img.bg{
		width: 440px;
		margin: 0 calc(50% - (440px * 0.5));
	}

	.breastfeeding .pannel{
		display: inline-block;
		top: calc(50% + 110px);
		left: calc(50% + 8px);
		width: 170px;
		font-size: 0.8rem;
		line-height: 18px;
		letter-spacing: 0px;
	}

	.breastfeeding .pannel a.link{
		margin-top: 10px;
		padding: 8px 2px;
		font-size: 1rem;
	}

	.breastfeeding img.bear{
		left: calc(50% + calc(10px));

		width: calc(269px * 0.75);
	}
}

/*小於等於380*/
@media (max-width: 380px) {
}

/*小於等於320*/
@media (max-width: 320px) {
}