@charset "utf-8";

/*----- works/archive -----*/
#works_top{margin:75px 0 80px;}
#works_tab_list{
	display:flex;
	padding-left:0;
	margin:0 -2% 48px 0;
}
.works_tab_item{
	list-style:none;
	margin:0 2% 0 0;
	width:100%;
}
.works_tab_link{
	position:relative;
	display:block;
	font-size:1.3rem;
	font-weight:500;
	letter-spacing:1.56px;
	line-height:2.07em;
	text-align:center;
	padding:14px 2px 12px;
	text-decoration:none;
	transition:all 0.3s;
}
.works_tab_link::before{
	position:absolute;
	display:block;
	content:'';
	width:100%;
	height:1px;
	bottom:0;
	left:0;
	background:#ddd;
}
.works_tab_link::after{
	position:absolute;
	display:block;
	content:'';
	width:100%;
	height:1px;
	bottom:0;
	left:0;
	background:#09f;
	transform: scale(0, 1);
	transform-origin: right top;
	transition: transform 0.3s;
}
.works_tab_link:hover,.on .works_tab_link{color:#09f;border-color:#09f;}
.works_tab_link:hover::after,.on .works_tab_link::after{
	transform-origin:left top;
	transform:scale(1, 1);
}

.works_cate_list{
	display:flex;
	padding:0;
}
.works_cate_item{
	list-style:none;
	margin:0 28px 0 0;
}
.works_cate_link{
	position:relative;
	display:block;
	padding-bottom:3px;
	font-size:1.3rem;
	font-weight:500;
	letter-spacing:1.3px;
	text-decoration:none !important;
	overflow:hidden;
	transition:color 0.3s;
}
.works_cate_link:hover, .on .works_cate_link{color:#09f;}
.works_cate_link::after{
	content:'';
	display:block;
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:1px;
	background:#09f;
	transform:scale(0, 1);
	transform-origin:right top;
	transition:transform 0.3s;
}
.works_cate_link:hover::after, .on .works_cate_link::after{
	transform-origin:left top;
	transform:scale(1, 1);
}

.select_list_wrap{display:none;}

#works_list{
	display:flex;
	flex-wrap:wrap;
	margin:-4.5% -2.6% 0 0;
	padding:0;
}
.works_item{
	width:22.4%;
	height:100%;
	list-style:none;
	margin:4.5% 2.6% 0 0;
}
.works_link{
	display:block;
	text-decoration:none;
	color:#333;
}
.works_img{
	position:relative;
	padding-top:90%;
	margin-bottom:8px;
	overflow:hidden;
}
.works_img_wrap{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.works_img img{
	display:flex;
	align-items:center;
	width:100%;
	height:100%;
	margin:auto;
	object-fit:cover;
	transition:all 0.3s;
}
.works_title{
	position:relative;
	font-size:1.5rem;
	font-weight:500;
	letter-spacing:1.8px;
	line-height:1.8em;
	margin:0 !important;
	padding:0;
	text-decoration:underline;
	transition:all 0.3s;
}
.works_title::after{content:url("https://www.juyoungoh.com/img/common/arrow_r_s_black.svg");margin-left:10px;}
a:hover .works_title::after{content:url("https://www.juyoungoh.com/img/common/arrow_r_s_blue.svg");}
.works_ttl::after{
	display:inline-block;
	margin-left:10px;
}
.product .works_ttl::after{content:url("https://www.juyoungoh.com/img/common/arrow_r_s_product.svg");}
.works_title::before{display:none;}
.works_author{
	font-size:1.2rem;
	letter-spacing:0.97px;
	color:#6D7277;
	margin-top:8px;
}
a:hover .works_img img{transform:scale(1.03);}
a:hover .works_title{text-decoration:none;color:#09f;}


/*----- works/single -----*/
.content_area.works_post{
	max-width:880px;
	padding:0 20px;
	margin:0 auto;
}
.works_child .page_title{
	max-width:880px;
	margin:0 auto 37px;
}
.works_child .sub_title{display:block;font-size:1.3rem;font-weight:normal;}
.works_catch{
	position:relative;
	padding-top:70%;
	margin-bottom:38px;
}
.works_catch_wrap{
	position:absolute;
	display:flex;
	align-items:center;
	overflow:hidden;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.works_catch img{
	display:flex;
	align-items:center;
	max-width:100%;
	max-height:100%;
	margin:auto;
}


@media screen and (max-width:1024px){

#works_tab_list, .works_cate_list{display:none;}

#works_top{margin-bottom:50px;}
.select_list_wrap{
	display:block;
	margin-top:45px;
}
.cat_select_box{
	position:relative;
	margin-bottom:30px;
}
.cat_select_box::after{
	position:absolute;
	content:"";
	width:8px;
	height:8px;
	border-right:1px solid #09f;
	border-bottom:1px solid #09f;
	transform:rotate(45deg);
	top:calc(50% - 5px);
	right:17px;
}
.select_list{
	display:block;
	font-size:1.4rem;
	letter-spacing:1.44px;
	line-height:2.2rem;
	color:#666;
	border:1px solid #ddd;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	outline:none;
	cursor:pointer;
	width:100%;
	padding:10px 15px;
}

.works_title{font-size:1.3rem;line-height:1.6em;}

}


@media screen and (max-width:767px){

/*----- works/archive -----*/
#works_list{
	margin:-4.5% 0 0 0;
}
.works_item{
	width:48.358%;
	margin:0 0 40px !important;
}
.works_item:nth-child(odd){
	margin-right:3.284% !important;
}
.works_title{
	font-size:1.3rem;
	letter-spacing:1.05px;
}
.works_title::after{content:url("https://www.juyoungoh.com/img/common/smp_arrow_r_s_black.svg");}
a:hover .works_title::after{content:url("https://www.juyoungoh.com/img/common/smp_arrow_r_s_blue.svg");}
.works_child .sub_title{font-size:1.1rem;margin-top:3px;}
.product .works_ttl::after{content:url("https://www.juyoungoh.com/img/common/smp_arrow_r_s_product.svg");}
.works_author{
	font-size:1.1rem;
	letter-spacing:0.89px;
	margin-top:4px;
}


/*----- works/single -----*/
.works_child .page_title{
	max-width:880px;
	margin:0 auto 43px;
}
.works_child .action{
	margin:0px 0 70px !important;
}
.select_list{font-size: 1.6rem;padding: 10px 35px 10px 15px;}

}