/* overview */
.part .articles {padding-bottom:80px;}
.items {display: flex;flex-direction: row;justify-content: flex-start;flex-wrap: wrap;gap: 2%;margin: 30px 0;}
.items .item {width:32%;margin-bottom: 30px;background-color: #002569;}
.items .item .media {position: relative;line-height: 0;overflow: hidden;background-color: #eaebee;}
.items .item .media img.bg {width:100%;cursor: pointer;transition: 0.5s linear;transform: scale(1, 1);aspect-ratio: 16 / 9;}
.items .item:hover .media img.bg{transition:1s linear;transform:scale(1.1,1.1);}
.items .item .media img.icon-play {position: absolute;left: calc(50% - 25px);top: calc(50% - 25px);opacity:1;}
.items .item .media .duration {position: absolute;bottom: 0;right: 0;color: #fff;padding: 2px 4px;margin-right: 10px;margin-bottom: 10px;background-color: rgba(0,0,0, 0.6);line-height: 1;border-radius: 4px;font-size: 1rem;}
.items .item .context {padding: 20px;color: #fff;height: 150px;display: flex;flex-direction: column;justify-content: space-between;}
.items .item .context .t-date {font-size: 14px;line-height: 1.2;height: 30%;}
.items .item .context .t-title {font-size: 20px;line-height: 1.3;font-family: 'Gotham-Medium';height: 70%;}
.items .item .context .t-title .t-title-text {overflow: hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}

.pagination {display: flex;justify-content: flex-end;}
.pagination .pagination-default {position: relative; font-size: 1.4rem;}
.pagination .pagination-default a {padding: 0 10px;cursor: pointer;color: #696969;}
.pagination .pagination-default a:hover,
.pagination .pagination-default a.jp-current{color:#8d1a1f;font-weight: bold;}
.pagination .pagination-next{position: relative;width:40px;height:40px;border-radius: 0 40px 40px 0; left:0;right:auto;top:13px; background-color:#8d1a1f;color:#fff;margin-left: 10px;}
.pagination .pagination-prev{position: relative;width:40px;height:40px;border-radius:40px 0 0 40px; left:0;right:auto;top:13px; background-color:#8d1a1f;color:#fff;margin-right: 10px;}
.pagination .pagination-next:after,
.pagination .pagination-prev:after{font-size:18px;} 

@media only screen and (max-width:768px){
	.items .item .context {height: 130px;}
	.items .item .context .t-title {font-size: 16px;}
}

@media only screen and (max-width:576px){
	.items {flex-direction: column;}
	.items .item {width:100%;}
	.items .item .context {height: 150px;}
	.items .item .context .t-title {font-size: 20px;}
}

/* detail */
.part .articles .video {width:100%;position: relative;margin: 40px 0 20px;cursor: pointer;}
.part .articles .video .icon-play {position: absolute;top: 0;left: 0;width:100%; height:100%;}
.part .articles .video .icon-play img {position: absolute;left: calc(50% - 50px);top: calc(50% - 52px);opacity: 0.7;cursor: pointer;}
.part .articles .video .icon-play:hover img {opacity: 1;}
.part .articles .video .duration {position: absolute;bottom: 0;right: 0;color: #fff;padding: 2px 4px;margin-right: 10px;margin-bottom: 10px;background-color: rgba(0,0,0, 0.6);line-height: 1;border-radius: 4px;font-size: 1rem;}
.part .articles .text p:last-of-type{margin-bottom:0;}
.part .articles .text .date {font-family: 'Gotham-Medium';color: #aaa;font-size: 18px;margin-bottom:10px;}
.part .articles .view-all {text-align: center;}

.video-detail .items {margin:0;}

@media only screen and (max-width:768px){
    .part .articles .video .icon-play img {scale: 50%;}
}

/* other videos */
.video-detail .video-items {margin-top:40px;}
.video-detail .video-items .video-item {margin-bottom:50px;}
.video-detail .video-items .video-item h2.subheadline {padding-left: 0;width: 75%;}
.video-detail .video-items .video-item .flex-container {display: flex;justify-content: space-between;}
.video-detail .video-items .video-item .flex-container .left-column {width:52%;position: relative;cursor: pointer;}

.video-detail .video-items .video-item .flex-container .left-column img.bg {width:100%;}
.video-detail .video-items .video-item .flex-container .left-column .video-cover {position: relative;margin-bottom:5px;}
.video-detail .video-items .video-item .flex-container .left-column .video-cover video {margin:0;}
/*
.video-detail .video-items .video-item .flex-container .left-column .video-cover img.icon-play {position: absolute;left: calc(50% - 50px);top: calc(50% - 50px);scale: 75%;opacity:0.7;}
.video-detail .video-items .video-item .flex-container .left-column .video-cover:hover img.icon-play {opacity: 1;}
.video-detail .video-items .video-item .flex-container .left-column .video-cover .duration {position: absolute;bottom: 0;right: 0;color: #fff;padding: 2px 4px;margin-right: 10px;margin-bottom: 10px;background-color: rgba(0,0,0, 0.6);line-height: 1;border-radius: 4px;font-size: 1rem;}
*/

.video-detail .video-items .video-item .flex-container .left-column .video-clips {display: flex;flex-direction: row;gap:1.2%;flex-wrap: wrap;}
.video-detail .video-items .video-item .flex-container .left-column .video-clips .clip {width: 19%;text-align: center;margin-bottom: 10px;}
.video-detail .video-items .video-item .flex-container .left-column .video-clips .clip img.bg {opacity: 0.5;}
.video-detail .video-items .video-item .flex-container .left-column .video-clips .clip:hover .clip-text,
.video-detail .video-items .video-item .flex-container .left-column .video-clips .clip.active .clip-text {font-family: 'Gotham-Medium';}

.video-detail .video-items .video-item .flex-container .left-column .video-clips .clip:hover img.bg,
.video-detail .video-items .video-item .flex-container .left-column .video-clips .clip.active img.bg {opacity: 1;}
.video-detail .video-items .video-item .flex-container .left-column .video-clips .clip .clip-text {font-size: 1.0rem;font-family: Gotham-Book;color: #383838;line-height: 1.4;}

.video-detail .video-items .video-item .flex-container .right-column {width:44%;display: flex;flex-direction: column;}
.video-detail .video-items .video-item .flex-container .right-column .t-text {font-size: 1.1rem;font-family: Gotham-Book;color: #383838;line-height: 1.4;}
.video-detail .video-items .video-item .flex-container .right-column .t-text p {margin-bottom:10px;}
.video-detail .video-items .video-item .flex-container .right-column .t-text p:last-of-type {margin-bottom:0;}
.video-detail .video-items .video-item .flex-container .right-column .t-text li {margin:5px 0;}
.video-detail .video-items .video-item .flex-container .right-column .t-text a {color: #002569;font-family: Gotham-Medium;}

@media only screen and (max-width:1280px){
	.video-detail .video-items .video-item .flex-container .right-column .t-text {font-size: 1.0rem;}
}

@media only screen and (max-width:1024px){
	.video-detail .video-items .video-item .flex-container {flex-direction: column;}
	.video-detail .video-items .video-item h2.subheadline {width: 100%;}
	.video-detail .video-items .video-item .flex-container .left-column {width:100%;}
	.video-detail .video-items .video-item .flex-container .left-column .video-clips {margin-bottom:10px;}
	.video-detail .video-items .video-item .flex-container .right-column {width:100%;margin-top:20px;}
	.video-detail .video-items .video-item .flex-container .right-column .t-text {display: block;}
}

@media only screen and (max-width:768px){
	.video-detail .video-items .video-item .flex-container .left-column .video-cover {margin-bottom:2px;}
	.video-detail .video-items .video-item .flex-container .left-column .video-clips .clip .clip-text {font-size: 0.8rem;}
}

@media only screen and (max-width:576px){
	.video-detail .video-items .video-item h2.subheadline {padding-top: 0;font-size: 1.2rem;}
	.video-detail .video-items .video-item .flex-container .left-column .video-clips .clip .clip-text {font-size: 0.6rem;}
}

/* more videos */
.video-detail .more-video {margin-top:50px;}


/* popup */
.mask-all-content {position: fixed;top: 0;left: 0;width: 100%; height: 100%; z-index: 99;background-color: rgba(0,0,0,0.8);backdrop-filter: blur(10px);display:none;}
.popup-fixed {position: fixed;left: 50%; top: 50%;transform: translate(-50%, -50%); z-index: 100;max-width: 1280px; width: 90%;display:none;}
.popup-fixed .content .cross {position: absolute;top: -25px;right: -50px;scale: 70%;cursor: pointer;opacity: 0.5;width: 50px !important;}
.popup-fixed .content .cross:hover {opacity: 1;}

@media only screen and (max-width: 768px) {
    .popup-fixed .content .cross {top: -50px;right: -12px;}
}