@charset "utf-8";

.page_top{
	height:280px;
	padding:0 40px;
}
.page_top_box{
	display:flex;
	align-items:center;
	justify-content:space-between;
	max-width:1180px;
	height:100%;
	margin:auto;
}
.page_top_box .page_title{
	padding:0;
	margin:0;
	color:#fff;
	font-size:3.6rem;
	letter-spacing:2.88px;
	line-height:5.2rem;
}
.page_top_box .page_title::before{
	content:attr(data-en);
	display:block;
	margin-bottom:4px;
	font-family:var(--font_roboto);
	font-size:1.5rem;
	font-weight:400;
	letter-spacing:0.6px;
	line-height:2rem;
	text-transform:capitalize;
	opacity:0.4;
}
.page_middle{
	max-width:1260px;
	padding:60px 40px;
	margin:auto;
}

.child_list{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	grid-gap:0 20px;
	padding:0;
	margin:0;
}
.child_item{
	list-style:none;
	height:85px;
	margin:0;
	border-bottom:1px solid #ddd;
	font-size:1.8rem;
	font-weight:bold;
	letter-spacing:1.44px;
	line-height:2.6rem;
}
.child_item:nth-child(-n+3){border-top:1px solid #ddd;}
.child_link{
	display:flex;
	align-items:center;
	position:relative;
	height:100%;
	padding:0 45px 0 20px;
	text-decoration:none !important;
	transition:background 0.3s, color 0.3s;
}
.child_link:hover{
	background:#EEF5FB;
	color:#014099;
}
.child_link::before, .child_link::after{
	content:'';
	position:absolute;
	top:2px;
	bottom:0;
	right:20px;
	width:6px;
	height:12px;
	margin:auto;
	background:no-repeat center;
	transition:opacity 0.3s;
}
.child_link::before{
	background-image:url(/img/common/arrow_r_hover.svg);
	opacity:0;
}
.child_link:hover::before{opacity:1;}
.child_link::after{background-image:url(/img/common/arrow_r.svg);}
.child_link:hover::after{opacity:0;}

.page_bg{
	padding:60px 40px;
	background:#F5F5F5;
}
.column_list{
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	grid-gap:50px 30px;
	max-width:1180px;
	padding:0;
	margin:auto;
}
.column_item{
	list-style:none;
	margin:0;
}
.column_link{
	display:block;
	text-decoration:none !important;
}
.column_thumb{
	margin-bottom:15px;
	border-radius:15px;
	overflow:hidden;
}
.column_img{transition:transform 0.3s;}
a:hover .column_img{transform:scale(1.05);}
.column_title{
	display:inline-block;
	position:relative;
	padding-right:15px;
	margin:0;
	font-size:1.8rem;
	font-weight:bold;
	letter-spacing:1.44px;
	line-height:2.6rem;
	transition:color 0.3s;
}
a:hover .column_title{color:#014099;}
.column_title::before, .column_title::after{
	content:'';
	position:absolute;
	top:8px;
	right:0;
	width:6px;
	height:12px;
	background:no-repeat center;
	transition:opacity 0.3s;
}
.column_title::before{
	background-image:url(/img/common/arrow_r_hover.svg);
	opacity:0;
}
a:hover .column_title::before{opacity:1;}
.column_title::after{background-image:url(/img/common/arrow_r.svg);}
a:hover .column_title::after{opacity:0;}

.page_common .content_box{padding-top:75px;}
.content_box .child_list{grid-template-columns:repeat(2, 1fr);}
.content_box .child_item:nth-child(3){border-top:none;}


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

.page_top, .page_middle, .page_bg{
	padding-right:20px;
	padding-left:20px;
}


}


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

.page_common .content_area::before{display:none;}
.page_common .content_box{padding:0;}

}


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

.page_top{height:190px;}
.page_top_box .page_title{
	font-size:2.8rem;
	letter-spacing:2.24px;
	line-height:4.2rem;
}
.page_top_box .page_title::before{
	font-size:1.4rem;
	letter-spacing:0.56px;
	line-height:1.8rem;
	margin-bottom:3px;
}
.page_middle, .page_bg{padding:50px 20px;}

.child_item{
	height:80px;
	font-size:1.7rem;
	letter-spacing:1.36px;
	line-height:2.5rem;
}
.child_link{padding:0 55px 0 15px;}
.child_link::before, .child_link::after{right:15px;}

.column_list{grid-gap:40px 25px;}
.column_title{
	font-size:1.7rem;
	letter-spacing:1.36px;
	line-height:2.5rem;
}

}


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

.page_top{height:160px;}
.page_top_box .page_title{
	font-size:2.1rem;
	letter-spacing:1.05px;
	line-height:3.2rem;
}
.page_top_box .page_title::before{
	font-size:1.2rem;
	letter-spacing:0.48px;
	line-height:1.6rem;
	margin-bottom:2px;
}

.child_item{
	font-size:1.6rem;
	letter-spacing:1.28px;
	line-height:2.4rem;
}
.child_link::before, .child_link::after{top:1px;}

.column_title{
	font-size:1.6rem;
	letter-spacing:1.28px;
	line-height:2.4rem;
}
.column_title::before, .column_title::after{top:7px;}

}


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

.page_top{height:100px;}
.page_top_l{width:100%;}
.page_middle, .page_bg{padding:40px 20px;}

.child_list{grid-template-columns:repeat(2, 1fr);}
.child_item{height:75px;}
.child_item:nth-child(3){border-top:none;}

.column_list{grid-gap:30px 20px;}
.column_thumb{
	margin-bottom:10px;
	border-radius:10px;
}

}


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

.child_list{
	display:block;
	border-top:1px solid #ddd;
}
.child_item:nth-child(-n+3){border-top:none;}
.column_list{grid-template-columns:100%;}

}