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


.main{
	width: 100%;
	position: relative;
}

/*側欄*/

.nav{
	width: 0;
	height: 0;
}

.navbar{
	border: none;
	width: 0;
	height: 0;
}

.sns{
	display: none;
}

#logo a{
	display: none;
}

/*------漢堡選單-------*/

.menu{
	
	/*隱藏選單*/
	max-height: 0px;
	overflow: hidden;
	/*動畫效果*/
	transition: max-height 1.5s;
	/*設定位置*/
	position: absolute;
	z-index: 100;
	/*底線*/
	top:80px;
	left: 20px;
	right: 20px;
	background-color:#595757;
}


/*線條BTN*/

.menu_icon{
	float: left;
	margin: 10px 0 0 5px;
	
}

.menu_icon-bar{
	display: block;
	width: 20px;
	height: 2px;
	margin-top: 3px;
	background-color: #595757;
	border-radius: 1px;
}

.menu li{
	float: none;
	border-bottom: solid 1px #fff;
}

.menu li a{
	color:#fff;
}

.menu li:hover{
	background-color:var(--yellow, #f2ca51);
	
}
.menu li a:hover{
	color:#fff;
	background:none;
}

.showmenu img{
	display: block;
	width: 100px;
	float: left;
	margin-left: 15px;
}


/*顯示選單*/

.showmenu{
	display: block;
	float: left;
	margin: 15px 0;
	text-decoration: none;
	font-weight: bold;
	position: absolute;
	top: 20px;
	left: 20px;
}


/*jQ點擊後動態在 body 加上 class */
.menu-show .menu {
	max-height: 500px
}

/*頁尾的SNS*/

#footer span{
	padding-left: 70px;

}

.b-sns{
	display: flex;
	float: right;
	margin-right: 10px;
}

.b-sns a{
	width: 30px;
	height: 30px;
	margin: 11px 5px;
}



/*首頁展示間*/

.index_showbox{
	width: auto;
	height: auto;
	display: block;
	margin: 0 auto;
	padding:10px;
}

/*關於這裡--展示間*/
.about_showbox{
	width: 100%;
	height: auto;
	margin: 0 auto;
	display: block;
	padding: 0;
	padding-top: 20px;
	
}

.about_showbox .about_banner{
	width: auto;
	height: auto;
	margin: 0 auto;
}

.about_showbox .about_banner img{
    width: 90%;
	padding: 10px;
	margin: 0 auto;
	display: block;
}

.about_showbox .about_txt{
	margin-top: 0;
	padding:20px;
	
}

/*經典單品--展示間*/
.classic_showbox{
	width: 100%;
	height: auto;
	margin: 0 auto;
	display: block;
	float: none;
}

.classic_box .p1{
	width: auto;
	height:auto;
	margin: 0 auto;
	padding-bottom: 20px;
}

.classic_box .p1:nth-child(1){
	margin-bottom: 10px;
}

.classic_box img{
	width: 80%;
	height: auto;
	margin:10px 160px;
	overflow: visible;

}

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

}

/*訂做---展示間*/
.make_showbox{
	width: 100%;
	height: auto;
	margin: 0 auto;
	display: block;
	padding: 0;
	
}

.make_showbox .make_banner{
	width:auto;
	height: auto;
	margin:0 auto;
}

.make_showbox .make_banner img{
    width: 100%;
	height: auto;
	display: block;
	margin:0 auto;
}

.make_showbox .make_banner .pic2{
    width: 100px;
	height: auto;
	display: block;
	margin:0 auto;
}

.make_showbox h2{
	font-size: 20px;
	padding-left:20px;
}
.make_showbox .make_banner p{
	width: auto;
	overflow: hidden;
	padding: 15px;
	margin-top: 0px;

}

/*更多作品--展示間*/
.more_showbox{
	width: 100%;
	height:auto;
	margin: 0 auto;
	display: block;
	float:none;
}

.more_showbox .tapbar{
	width: 300px;
	height: auto;
	float:none;
}

.album{
	width: 100%;
	display: inline-block;
	position: relative;
}

.album img{
	width: 80%;
	height: auto;
	display: block;
	margin: 0 auto;
	position: static;
	margin-top: 40px;
	position: absolute;
	top: 0;
	left: 18%;
	
}

/*作品--展示間*/
.works_showbox{
	width:100%;
	height:auto;
	margin: 0 auto;
	display: block;
	float:none;
	
}

.works_showbox .tapbar{
	width: 300px;
	height: auto;
}

.works_album{
	width: 100%;
	height: auto;
	float: none;
	overflow:hidden;	
}

.photo img{
	height: auto;
	width:200px;
	display: block;
	margin:0 auto;
	margin-top: 10px;
	margin-bottom: 10px;
}

.photo{
	overflow: hidden;
	float: none;
	display:contents;
	width: 330px;
	height: 440px;
}