@charset "utf-8";

/* 變數設定 */

*{
	/*顏色*/
--blue: #aad2d4;
--yellow: #f2ca51;
--yellow-red: #f2be5b;
--orange: #da7d5b;
--grey: #f2f2f2;
--deep-grey: #595757;	
	
	/*文字*/
--h1:16px;
--h2:14px;
--h3:12px;	
--small:10px;
	
}


/*基本設定*/
html, body{
	font-family: 'Noto Sans TC', sans-serif,'Sanchez', serif;
    height: 100%;
	color: var(--deep-drey);
	background-color: var(--grey);
	position:relative;
	margin: 0;
	padding: 0;
	
}

h1{
	font-size: var(--h1);
	line-height: 20px;
}

h2{
	font-size: var(--h2);
	line-height: 20px;
}

h3{
	font-size: var(--h3);
	line-height: 20px;
}

p{
	font-size: var(--h2);
	line-height: 1.3;
		
}


/* 共用版面設計 */
.main{
	width: 980px;
	min-height: 880px;
	margin:0 auto;
	padding: 100px 0;
	box-sizing: border-box;
}



/*導覽列*/

#logo{
	background-image: url("../img/logo.png");
	background-repeat: no-repeat;
	background-size:80%;
	margin-bottom: 30px;
	background-color: rgba(242,242,242,0.5);
}

#logo span{
	visibility: hidden;
}

#logo a{
	display: block;
	width: 160px;
	height: 45px;
}

.nav{
	width: 180px;
	height: 680px;
	padding-bottom: 10px;
	float: left;
	margin-bottom: 45px;
	background-color: var(--grey);
	border-right: 2px solid #C7C7C7;
}
.navbar{
	width: 180px;
	min-height: 450px;
	border-bottom: 2px solid #C7C7C7;
	
}
.navbar a{
	display:block;
	width: 160px;
	height: 30px;
	color: var(--deep-grey);

	text-align:left;
	line-height: 30px;
	padding: 5px;
}

.navbar .press a{
    color:var(--orange);
}

.navbar a:hover{
	background-color: var(--yellow-red);
	color: #FFFFFF;
	border-radius: 10px;
	text-decoration: none;
}

.fa-caret-right, .fa-sort-down{
	float: right;
	padding-right: 5px;
	margin-top: 7px;
}

.fa-angle-double-right{
	padding-right: 5px;
	padding-left: 15px;
}


/*在PC上隱藏漢堡選單*/
.showmenu, .showmenu img {
	display: none;
}

/*社群*/

.sns{
	padding-top: 20px;
	width: 160px;
	height: 100px;
	margin: 0 auto;
}

.sns a{
	display: block;
	width: 30px;
	height: 30px;
	float: left;
	margin: 15px;	
}

.sns a img{
	width:130%;
	height: auto;
	vertical-align: bottom;
}


/*首頁--展示間*/
.index_showbox{
	width: 700px;
	height: 650px;
	background-color: #FFFFFF;
	display: flex;
	padding: 20px;
	position:relative;
}
.index_showbox .index_box{
	width:100%;
	margin: 10px;
	display:contents;
	
	
}
.index_showbox img{
	width:100%;
	height:auto;
}
.overlay {
  position: absolute;
  bottom: 8px;
  left: 50;
  right: 0;
  background-color:rgba(255, 255, 255, 0.8);
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
  border-radius:0 0 15px 15px;
}
.index_box:hover .overlay {
  height:99%;

}
.text {
  color:var(--deep-grey);
  font-size: 22px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  line-height: 3;
}

.text ul{
	list-style: disc;
	font-size: 18px;
	text-align:left;
	padding-left: 50px;
}

/*關於這裡--展示間*/
.about_showbox{
	width: 700px;
	height: 650px;
	background-color: #FFFFFF;
	display: flex;
	padding: 20px;
	position:relative;
}
.about_showbox .about_banner{
	width:600px;
	height: 300px;
	margin: 0 auto;
	display:block;
}

.about_showbox .about_banner img{
    width: 600px;
	height: auto;
}

.about_showbox .about_txt{
	margin-top: 30px;
	color: var(--deep-grey);
	font-size: 14px;
	line-height: 2;
	text-align: center;
	letter-spacing: 1px;
	
}

.about_showbox .about_txt span{
	padding: 0 2px;
}

/*經典單品--展示間*/
.classic_showbox{
	width: 700px;
	height: 690px;
	background-color: #FFF;
	display: flex;
	padding: 20px;
	box-sizing: border-box;
	float: left;

}

.classic_box .p1{
	width: 660px;
	height:320px;
	background-color: var(--grey);
	margin-bottom: 15px;
	
}

.classic_box img{
	width: 50%;
	height: auto;
	margin:10px 160px;
	overflow: hidden;
	border-radius: 10px;
	
}

.classic_showbox a{
	display:flex;
	justify-content: center;
	color: var(--deep-grey);
	background-color: var(--grey);

}

.classic_showbox span{
	padding-left: 10px;
}

/*紅包--展示間*/
.red_showbox{
	width: 700px;
	height: 650px;
	background-color: #FFFFFF;
	display: flex;
	padding: 20px;
	position:relative;
}

.red_showbox p{/*文字*/
	margin-top: 50px;
	color: var(--deep-grey);
	font-size: 14px;
	line-height: 2;
	letter-spacing: 1px;
	text-align: center;
	
}

.red_showbox p span{
	background-color: var(--yellow);
	padding: 0 2px;
	
}	

/*寶寶--展示間*/
.baby_showbox{
	width: 700px;
	height: 650px;
	background-color: #FFFFFF;
	display: flex;
	padding: 20px;
	position:relative;
}

.baby_showbox p{/*文字*/
	margin-top: 40px;
	color: var(--deep-grey);
	font-size: 14px;
	line-height: 2;
	letter-spacing: 1px;
	text-align: center;
}

.baby_showbox p span{
	background-color: var(--blue);
	padding: 0 2px;	
}	

.baby_showbox p .cta{
	text-align: center;

}

.baby_showbox .cta a img{
	width: 120px;
	height: auto;

}

/*訂做---展示間*/
.make_showbox{
	width: 700px;
	height: 650px;
	background-color: #FFFFFF;
	display: flex;
	padding: 20px;
	position:relative;
}

.make_showbox .make_banner{
	width:700px;
	height: 300px;
	margin: 0 auto;
	display:block;
	
}

.make_showbox .make_banner img{
    width: 100%;
	height: auto;
	margin:50px 0;
}

.make_showbox .make_banner .pic2{
    width: 120px;
	height: auto;
	margin:50px 290px;
}


.make_showbox h2{
	font-size: 16px;
	line-height: 2;
	color: var(--deep-grey);
	padding-left: 30px;
}

.make_showbox .make_banner p{
	width: 700px;
	text-align: left;
	color: var(--deep-grey);
	font-size: 14px;
	line-height: 2;
	letter-spacing: 1px;
	padding-left: 30px;
	margin-top: 20px;
	
}

.make_showbox .make_banner p i{
	float: left;
	margin: 10px;
}

.make_showbox .make_banner p .in{
	padding-left: 47px;	
	color: var(--deep-grey);
}

.make_showbox .make_banner span{
	color: var(--orange);	
}

/*更多作品--展示間*/
.more_showbox{
	width: 700px;
	height: 690px;
	background-color: #FFFFFF;
	
	padding: 20px;
	box-sizing: border-box;
	float: left;

}

.more_showbox .tapbar{
	width: 700px;
	height: auto;
	display: flex;
	float: left;
	
}

.more_showbox .tapbar .b1{
	background-color:var(--grey);
	color:var(--deep-grey);
	width: 100px;
	height: 25px;
	line-height: 25px;
	padding: 10px;
	text-align: center;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;

}

.b1 a{
	text-decoration: none;
	color:var(--deep-grey);
}

.more_showbox .tapbar .b2{/*按下*/
	background-color:var(--grey);
	box-shadow:2px 4px 6px var(--deep-grey);
	color:var(--deep-grey);
    width: 100px;
	height: 20px;
	line-height: 20px;
	padding: 10px;
	text-align: center;
	border-radius-top: 5px;
	margin-top: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	z-index: 100;
}



.album{
	display: flex;
	background-color:var(--grey);
	width: 660px;
	height: 600px;
	position:relative;
}

.album img{
	height: 70%;
	position: absolute;
	top: 14%;
	left: 27%;
}

/*作品--展示間*/
.works_showbox{
	width: 700px;
	height: 690px;
	background-color: #FFFFFF;
	
	padding: 20px;
	box-sizing: border-box;
	float: left;

}

.works_showbox .tapbar{
	width: 700px;
	height: auto;
	display: flex;
	float: left;
	
}

.works_showbox .tapbar .b2{
	background-color:var(--grey);
	color: var(--deep-grey);
	width: 100px;
	height: 25px;
	line-height: 25px;
	padding: 10px;
	text-align: center;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;

}

.b2 a{
	text-decoration: none;
	color:var(--deep-grey);
}

.works_showbox .tapbar .b1{
	background-color:var(--grey);
	box-shadow:2px 4px 6px var(--deep-grey);
	color:var(--deep-grey);
    width: 100px;
	height: 20px;
	line-height: 20px;
	padding: 10px;
	text-align: center;
	border-radius-top: 5px;
	margin-top: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	z-index: 100;
}

.works_album{
	background-color:var(--grey);
	width: 660px;
	height: 600px;
	float: left;
}

.photo img{
	height: auto;
	width: 200px;
}

.photo{
	width: 200px;
	height: 250px;
	margin: 10px;
	overflow: hidden;
	float: left;
	display: flex;
}

/*頁尾FOOTER*/

#footer{
	background-color: #000000;
	color: #FFFFFF;
	height:55px; 
	line-height: 55px;
	text-align: center;
	clear: both;
	margin: 0 auto;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
}