/* Common */
.sec-subtitle {
	font-size:2rem;
	line-height:1;
}

.sec-title {
	font-size:4.6rem;
	line-height:1;
}

.sec-link {
	display: inline-flex;
	align-items: center;
	gap:10px;
	font-size:2.4rem;
	transition: all .3s ease-in-out;
}

.sec-link i {
	display: inline-block;
	width: 28px;
	height:28px;
	border-radius:50%;
	background:#fff url('../../asset/img/main/sec00_arr_01.png') no-repeat center;
	transition: all .3s ease-in-out;
}

@media (min-width:1201px) {
	.sec-link:hover {
		color:#0052b8;
	}

	.sec-link:hover i {
		background-color: #0052b8;
		transform: translateX(6px);
	}
}
@media (max-width:1200px) {
	.sec-subtitle {
		font-size:1.8rem;
	}

	.sec-title {
		font-size:3.4rem;
	}

	.sec-link {
		font-size:2rem;
	}
}
@media (max-width:1024px) {
	.sec-link i {
		width: 24px;
		height:24px;
		background-size: auto 12px;
	}
}
@media (max-width:768px) {
	.sec-subtitle {
		font-size:1.6rem;
	}

	.sec-title {
		font-size:2.8rem;
	}

	.sec-link {
		font-size:1.8rem;
	}
}
@media (max-width:576px) {
	.sec-subtitle {
		font-size:1.4rem;
	}

	.sec-title {
		font-size:2.4rem;
	}

	.sec-link {
		font-size:1.6rem;
	}

	.sec-link i {
		width: 20px;
		height:20px;
		background-size: 6px auto;
	}
}


/* Sec01 */
.sec01  {
	position: relative;
	/* height:863px; */
	overflow: hidden;
}

.sec01 .visual {
	width:100%;
	height:100%;
}

.sec01 .swiper {
	position: relative;
	height:100%;
}

.sec01 .swiper-wrapper {
	height:100%;
}

.sec01 .swiper-slide {
	height:100%;
	overflow: hidden;
}

.sec01 .bg-pc {
	display: block;
}

.sec01 .bg-mo {
	display: none;
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.sec01 img {
	margin:0 auto;
}

.sec01 .pagination {
	display: flex;
	justify-content: center;
	gap:10px;
	position: absolute;
	left:50%;
	bottom:8%;
	transform: translateX(-50%);
	z-index:2;
}

.sec01 .swiper-pagination-bullet {
	position: relative;
	width:13px;
	height:13px;
	margin:0px !important;
	background-color: rgba(255,255,255,.5);
	overflow: hidden;
	opacity: 1;
	border-radius:50px;
}

.sec01 .swiper-pagination-bullet i {
	content: "";
	display: block;
	position: absolute;
	top:0;
	left:0;
	width:0;
	height:100%;
	background-color: rgba(255,255,255,1);
	border-radius:50px;
}

.sec01 .swiper-pagination-bullet-active {
	width:120px;
}

.sec01 .swiper-pagination-bullet-active i {
	animation:paginationBar 3s ease-in forwards;
}

@media (max-width:1200px) {

}
@media (max-width:1024px) {
	.sec01 .pagination {
		bottom:60px;
	}

	.sec01 .swiper-pagination-bullet {
		width:10px;
		height:10px;
	}

	.sec01 .swiper-pagination-bullet-active {
		width:100px;
	}
}
@media (max-width:768px) {
	.sec01 .bg {
		position: relative;
		width:100%;
		height:0;
		padding-top:calc(980/720*100%);
		overflow: hidden;
	}

	.sec01 .bg-pc {
		display: none;
	}

	.sec01 .bg-mo {
		display: block;
	}

	.sec01 .pagination {
		bottom:40px;
	}

	.sec01 .swiper-pagination-bullet {
		width:8px;
		height:8px;
	}

	.sec01 .swiper-pagination-bullet-active {
		width:60px;
	}
}
@media (max-width:576px) {
	.sec01 .pagination {
		gap:6px;
		bottom:20px;
	}

	.sec01 .swiper-pagination-bullet {
		width:6px;
		height:6px;
	}

	.sec01 .swiper-pagination-bullet-active {
		width:40px;
	}
}


/* Sec02 */
.sec02 .intro {
	padding:50px;
	border-radius:30px;
	background-color: #f5f5f5;
}

.sec02 .intro .intro-wrap {
	gap:80px;
}

.sec02 .intro .lt {
	width: 48%;
}

.sec02 .intro .rt {
	max-width:554px;
	width: 100%;
}

.sec02 .intro .img {
	border-radius: 20px;
	overflow: hidden;
}

.sec02 .intro .txt {
	max-height:450px;
	height:100%;
	overflow-y: auto;
}

.sec02 .intro .t01 {
	font-size:3rem;
}

.sec02 .intro .t02 {
	font-size:2rem;
	line-height:1.6;
}

.sec02 .intro .btns {
	gap:10px;
}

.sec02 .intro .btns a {
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
	width:50%;
	padding:10px 10px 10px 30px;
	border-radius:50px;
	background-color: #191919;
	font-size:2rem;
	line-height:1;
	color:#fff;
	transition:all .3s ease-in-out;
}

.sec02 .intro .btns i {
	display: inline-block;
	width: 40px;
	height:40px;
	border-radius:50%;
	background:#474747 url('../../asset/img/main/sec00_arr_02.png') no-repeat center;
	transition:all .3s ease-in-out;
}

.sec02 .compose ul {
	gap:30px;
}

.sec02 .compose li {
	flex:1 0 calc(25% - 30px);
	max-width:25%;
}

.sec02 .compose a {
	position: relative;
	width:100%;
	height:0;
	padding-top: calc(330/330*100%);
	border-radius: 20px;
	overflow: hidden;
}

.sec02 .compose .txt {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	position: absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
	z-index:2;
}


.sec02 .compose .txt .t01 {
	font-size:2.8rem;
}

.sec02 .compose .bg {
	position: absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size:cover;
	object-fit: cover;
	transition:all .35s ease-in-out;
}

@media (min-width:1201px) {
	.sec02 .intro .btns a:hover {
		background-color: #0052b8;
	}

	.sec02 .intro .btns a:hover i {
		background-color: #0052b8;
		background-position: right 10px center;
	}

	.sec02 .compose li:hover .bg {
		transform: scale(1.1);
	}
}
@media (max-width:1200px) {
	.sec02 .intro .intro-wrap {
		gap:40px;
	}

	.sec02 .intro .txt {
		max-height:260px;
	}

	.sec02 .intro .t01 {
		font-size:2.4rem;
	}

	.sec02 .intro .t02 {
		font-size:1.8rem;
	}

	.sec02 .intro .btns a {
		font-size:1.8rem;
	}

	.sec02 .compose .txt .t01 {
		font-size:2.4rem;
	}
}
@media (max-width:1024px) {
	.sec02 .intro {
		padding:34px;
	}

	.sec02 .intro .lt {
		width: 70%;
	}

	.sec02 .intro .rt {
		max-width:100%;
	}

	.sec02 .intro .btns {
		gap:6px;
	}

	.sec02 .intro .btns a {
		padding:6px 6px 6px 24px;
	}

	.sec02 .intro .btns i {
		width:32px;
		height:32px;
		background-size: auto 12px;
	}

	.sec02 .compose ul {
		gap:20px;
	}

	.sec02 .compose li {
		flex:1 0 calc(25% - 20px);
	}
}
@media (max-width:768px) {
	.sec02 .intro {
		padding:24px;
	}

	.sec02 .intro .intro-wrap {
		gap:30px;
	}

	.sec02 .intro .txt {
		max-height:220px;
	}

	.sec02 .intro .t01 {
		font-size:2rem;
	}

	.sec02 .intro .t02 {
		font-size:1.6rem;
	}

	.sec02 .intro .btns a {
		font-size:1.6rem;
	}

	.sec02 .compose ul {
		gap: 12px;
	}

	.sec02 .compose li {
		flex:1 0 calc(50% - 12px);
		max-width:50%;
	}

	.sec02 .compose .txt .t01 {
		font-size:2rem;
	}
}
@media (max-width:576px) {
	.sec02 .intro {
		padding:16px;
	}

	.sec02 .intro .intro-wrap {
		gap:20px;
	}

	.sec02 .intro .lt {
		width: 100%;
	}

	.sec02 .intro .txt {
		max-height:170px;
	}

	.sec02 .intro .t01 {
		font-size:1.8rem;
	}

	.sec02 .intro .t02 {
		font-size:1.4rem;
	}

	.sec02 .intro .btns {
		gap:4px;
	}

	.sec02 .intro .btns a {
		width:100%;
		font-size:1.4rem;
	}

	.sec02 .intro .btns i {
		width:26px;
		height:26px;
		background-size: auto 10px;
	}

	.sec02 .compose ul {
		gap:6px;
	}

	.sec02 .compose li {
		flex:1 0 calc(50% - 6px);
		max-width:50%;
	}

	.sec02 .compose .txt .t01 {
		font-size:1.8rem;
	}
}


/* Sec03 */
.sec03 {
	background-color: #edf3fa;
}

.sec03 .swiper {
	height: 100%;
	overflow: hidden;
}

.sec03 .swiper-wrapper {
	height:100%;
}

.sec03 .swiper-slide {
	overflow: hidden;
}

.sec03 .prev,
.sec03 .next {
	position: absolute;
	top:50%;
	transform: translateY(-50%);
	width:90px;
	height:80px;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
	transition:opacity .3s ease;
}

.sec03 .prev {
	left:-150px;
	background-image: url('../../asset/img/main/sec03_btn_prev.png');
}

.sec03 .next {
	right:-150px;
	background-image: url('../../asset/img/main/sec03_btn_next.png');
}

.sec03 .prev.swiper-button-disabled,
.sec03 .next.swiper-button-disabled {
	opacity:.2;
}

.sec03 .pagination {
	display: none;
	justify-content: center;
	align-items: center;
	gap:10px;
	margin-top:30px;
}

.sec03 .swiper-pagination-bullet {
	width:10px;
	height:10px;
	opacity:1;
	background-color: #ccc;
}

.sec03 .swiper-pagination-bullet-active {
	background-color: #0052b8;
}

.sec03 .card {
	overflow: hidden;
	border-radius:20px;
}

.sec03 img {
	width:100%;
}

@media (max-width:1366px) {
	.sec03 .pagination {
		display: flex;
	}
}
@media (max-width:1200px) {

}
@media (max-width:1024px) {
	.sec03 .pagination {
		margin-top: 20px;
	}
}
@media (max-width:768px) {
	.sec03 .swiper-pagination-bullet {
		width:8px;
		height:8px;
	}
}
@media (max-width:576px) {
	.sec03 .pagination {
		gap:6px;
		margin-top:12px;
	}

	.sec03 .swiper-pagination-bullet {
		width:6px;
		height:6px;
	}
}


/* Sec04 */
.sec04 {
	background: url('../../asset/img/main/sec04_bak.png') no-repeat center / cover;
}

.sec04 .inner {
	min-height:300px;
}

.sec04 .heading {
	position: absolute;
	top:0;
	left:0;
	width:calc(50% - 15px);
}

.sec04 .heading::after {
	content: "";
	display: block;
	position: absolute;
	top:200px;
	right:50px;
	width:194px;
	height:78px;
	background: url('../../asset/img/main/sec04_ele.png') no-repeat center;
}

.sec04 .list {
	display: flex;
	flex-wrap: wrap;
	gap:30px;
}

.sec04 .list::before {
	content: "";
	display: block;
	flex:1 0 calc(50% - 30px);
	max-width:50%;
}

.sec04 .list li {
	flex:1 0 calc(50% - 30px);
	max-width:50%;
}

.sec04 .list a {
	height:100%;
	padding:60px 50px;
	background-color: #313131;
	border:2px solid #535353;
	border-radius:20px;
	transition: all .35s ease-in-out;
}

.sec04 .list  .card::before {
	content: "";
	display: block;
	position: absolute;
	top:-20px;
	right:-10px;
	width:32px;
	height: 32px;
	background: url('../../asset/img/main/sec04_link.png') no-repeat center;
	opacity:0;
	transition: opacity .35s ease-in-out;
}

.sec04 .data {
	font-size:1.6rem;
	line-height: 1;
	margin-bottom:20px;
}

.sec04 .subject {
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size:2.8rem;
}

.sec04 .detail {
	font-size:2rem;
	line-height:1.5;
	padding-top:50px;
	margin-top:20px;
	border-top: 1px solid #989898;
}

.sec04 .detail dd {
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (min-width:1201px) {
	.sec04 .list li:hover a {
		background-color: #fff;
		border-color: #fff;
	}

	.sec04 .list li:hover .card::before {
		opacity: 1;
	}

	.sec04 .list li:hover .subject {
		color:#191919;
	}

	.sec04 .list li:hover .detail {
		color:#191919;
	}
}
@media (max-width:1200px) {
	.sec04 .data {
		font-size:1.4rem;
	}

	.sec04 .subject {
		font-size:2.4rem;
	}

	.sec04 .detail {
		font-size:1.8rem;
	}
}
@media (max-width:1024px) {
	.sec04 .inner {
		min-height:230px;
	}

	.sec04 .heading::after {
		top:150px;
		right:20px;
		width:144px;
		height:58px;
		background-size:auto 58px;
	}

	.sec04 .list::before {
		flex:1 0 calc(50% - 20px);
	}

	.sec04 .list {
		gap:20px;
	}

	.sec04 .list li {
		flex:1 0 calc(50% - 20px);
	}

	.sec04 .list a {
		padding:40px 34px;
	}

	.sec04 .data {
		margin-bottom:8px;
	}

	.sec04 .detail {
		padding-top:30px;
		margin-top:16px;
	}
}
@media (max-width:768px) {
	.sec04 .heading {
		position: relative;
		top:unset;
		left: unset;
		width: 100%;
		position: relative;
		margin-bottom:60px;
	}

	.sec04 .heading::after {
		top:50%;
		right:0;
		transform: translateY(-50%);
	}

	.sec04 .list {
		gap:12px;
	}

	.sec04 .list::before {
		display: none;
	}

	.sec04 .list li {
		flex:1 0 calc(100% - 12px);
		max-width:100%;
	}

	.sec04 .list a {
		padding:30px 24px;
	}

	.sec04 .data {
		font-size:1.2rem;
	}

	.sec04 .subject {
		font-size:2rem;
	}

	.sec04 .detail {
		font-size:1.6rem;
	}
}
@media (max-width:576px) {
	.sec04 .heading {
		margin-bottom:30px;
	}

	.sec04 .heading::after {
		width:105px;
		height:42px;
		background-size:auto 42px;
	}

	.sec04 .list {
		gap:6px;
	}

	.sec04 .list li {
		flex:1 0 calc(100% - 6px);
	}

	.sec04 .list a {
		padding:20px 16px;
	}

	.sec04 .data {
		font-size:1.1rem;
		margin-bottom:4px;
	}

	.sec04 .subject {
		font-size:1.8rem;
	}

	.sec04 .detail {
		font-size:1.4rem;
		padding-top:16px;
		margin-top:8px;
	}
}

/* Animation */
@keyframes paginationBar {
	0% {
		width:0;
	}
	100% {
		width: 100%;
	}
}

/* Popup */
#popup {
	position: relative;
}

.popup-layer {
	z-index: 10000;
	position: absolute;
	background: #fff;
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,.25);
	animation: popup-fade .65s ease-in-out .35s forwards;
	opacity: 0;
	max-width:800px;
}

@keyframes popup-fade {
	0% { opacity: 0;
		-webkit-transform: translateY(25px);
		-ms-transform: translateY(25px);
		transform: translateY(25px); }
	100% { opacity: 1;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0); }
}
.popup-layer__body {
	background: #fff;
}

.popup-layer__body img {
	display: block;
	margin: 0 auto;
	border: none;
	max-width: 100%;
}

.popup-layer__foot {
	background: #424242;
}

.popup-layer__foot ul {
	display:flex;
	flex-wrap: wrap;
}

.popup-layer__foot li {
	width:50%;
	padding:10px;
}

.popup-layer__foot li:first-child {
	padding-right:0;
}

.popup-layer__foot li:last-child {
	text-align: right;
}

.popup-layer__foot span {
	font-size: 1.5rem;
	color: #fff;
	cursor: pointer;
	transition:all 0.3s ease;
}

.popup-layer__foot label:hover span { opacity: .7; }

/* .popup-layer-foot { background: #424242; }
.popup-layer-foot span { font-size: 15px; color: #fff; }
.popup-layer-foot label:hover span { opacity: .7; }
.popup-layer-foot li:first-child { padding-right: 0; }
.popup-layer-foot li:last-child { text-align: right; } */


@media (max-width: 1024px){
	/* .popup-layer { z-index: 999; } */
	.popup-layer { top: 95px !important; left: 0 !important; margin: 0 5px; }
}
@media (max-width: 768px){

	.popup-layer {
		width:calc(100% - 10px);
	}

	.popup-layer img {
		max-width: none;
		width:100%;
		height: auto !important;
	}
	.popup-layer-foot span { font-size: 14px; }

}
@media (max-width: 375px){
	.popup-layer-foot li { width: 100%; }
	.popup-layer-foot li:last-child { text-align: left; }
}
