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

Layout : sub

sub1_alltea
sub3_recipes

-*-*-*-*-*-*-

media query
pc : 1600, 1440, 1280
tablet : 1024, 834, 768
mobile : 580, 414, 360

color
Background
- F7F7F9, rgb 247,247,249
Khaki light
- B7BAA9
Khaki dull
- 817E6B, rgb 129,126,107
Khaki dark
- 67665E
Black
- 383838
error
- fd6d5e

font
Adobe Caslon Pro, Playfair Display, serif
Avenir Next LT Pro, Noto Sans KR, sans-serif

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

body.page-template-portfolio #wrap{
	height:auto;
	padding-bottom:100px;
	position:relative;
	overflow:hidden;
}
@media only screen and (max-width: 1025px) {
  body.page-template-portfolio #wrap{
	padding-bottom:140px;
  }
}
@media only screen and (max-width: 580px) {
  body.page-template-portfolio #wrap{
	padding-bottom:13.5rem;
  }
}
body.page-template-portfolio #wrap footer{
	position:absolute; left:0; bottom:0;
}
#sub1_alltea, #sub3_recipes{
	margin-right:7%;
	margin-left:13%;
}
@media only screen and (max-width: 1600px){
  #sub1_alltea, #sub3_recipes{
    margin-left:15%;
  }
}
@media only screen and (max-width: 1280px){
  #sub1_alltea, #sub3_recipes{
    margin-left:18%;
  }
}
@media only screen and (max-width: 1025px) {
  #sub1_alltea, #sub3_recipes{
	margin-right:0;
	margin-left:0;
  }
}
#main-content{
	padding-top:0;
}
#sub1_alltea > #main-content > .title_h3,
#sub3_recipes > #main-content > .title_h3{
	margin-top:100px;
	text-align:center;
	margin-bottom:-50px;
}

/* --- 7) PORTFOLIO PAGE / SECTIONS --- */

.section-inner{
	padding:80px 0;
	border-top: 1px solid #eeeeee;
}
.no-border{
	border:0;
}
#portfolio-items{
	margin-left:-5px;
	margin-right:-5px;
}
.portfolio-section .row{
	margin:0;
}
.portfolio-section *[class*="col-"]{
	padding:0 5px;
}
#portfolio-item-filter{
	margin-bottom:1rem;
	text-align:center;
}
#portfolio-item-filter li{
	margin-right:0.5rem;
	display:inline-block;
}
#portfolio-item-filter li a{
	font-size:0.85rem;
	color:#383838;
	line-height:1rem;
	text-decoration:none;
	padding:5px;
	border:1px solid #ffffff;
	display:inline-block;
	margin-bottom:1rem;
}
#portfolio-item-filter li a:hover{
	color:#817E6B;
}
#portfolio-item-filter li a.active{
	border-color:#B7BAA9;
	color:#67665E;
}
.portfolio-item{
	display:block;
	position:relative;
	margin-bottom:10px;
}
.portfolio-item .image{
	width:100%;
}
.portfolio-hover{
	width:100%;
	height:100%;
	background-color:rgba(17,17,17,0.8);
	position:absolute;
	top:0; left:0;
	opacity:0;
	visibility:hidden;
	transition: opacity .35s, visibility .35s;
}
.portfolio-item:hover .portfolio-hover{
	opacity:1;
	visibility:visible;
}
.portfolio-hover-content{
	color:#ffffff;
	width:100%;
	position:absolute;
	top:50%; left:50%;
	transform:translate(-50%,-50%);
	margin-top:20px;
	opacity:1;
	text-align:center;
	transition:margin .35s;
	padding:0 0.5rem;
	word-break:keep-all;
}
.portfolio-item:hover .portfolio-hover-content{
	margin-top:0;
}
.portfolio-hover-content .title_h5{
	text-transform: capitalize;	
}
@media only screen and (max-width: 1440px){
  .portfolio-hover-content .title_h5{
	font-size:1.6rem;
  }  
  .portfolio-hover-content > ul > li:nth-child(2){
	display:none;
  }
}
@media only screen and (max-width: 1280px){
  .portfolio-hover-content .title_h5{
	font-size:1.5rem;
	line-height:1.815rem;
  }    
  .portfolio-hover-content > ul > li:nth-child(2){
	display:block;
  }
}
@media only screen and (max-width: 1025px){
  #sub1_alltea .portfolio-hover{
	width:100%;
	height:30%;
	background-color:rgba(17,17,17,0.6);
	position:absolute;
	top:70%; left:0;
	opacity:1;
	visibility:visible;
  }
  #sub3_recipes .portfolio-hover{
	width:100%;
	height:40%;
	background-color:rgba(17,17,17,0.6);
	position:absolute;
	top:60%; left:0;
	opacity:1;
	visibility:visible;
  }
  .portfolio-hover-content{
	margin-top:0;
	padding:0.25rem 0.5rem;
	width:100%;
  }
  .portfolio-hover-content ul li{
	display:inline;	
  }
  .portfolio-hover-content .title_h5{
	margin-bottom:0.1rem;
  }
  .portfolio-hover-content > ul > li:nth-child(2){
	display:none;
  }
}
@media only screen and (max-width: 834px){
  .portfolio-hover-content .title_h5{
	  font-size:1.4rem;
  }
}
@media only screen and (max-width: 580px){
  .portfolio-hover-content .title_h5{
	  font-size:1.5rem;
  }
}
@media only screen and (max-width: 360px){
  .portfolio-hover-content .title_h5{
	  font-size:1.4rem;
  }
  .portfolio-hover-content > ul > li:nth-child(1),
  .portfolio-hover-content > ul > li:nth-child(2){
	display:none;
  }
}
.portfolio-hover-content .item_codenum{
	color:#B7BAA9;
}
.portfolio-hover-content .middle_line{
	text-decoration:line-through;
}
.portfolio-hover-content .sale_event{
	color:orange;
}
i.xi-new, i.xi-crown, i.xi-gift{
	color:orange;
}