/*********** List *************/
.article_list{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; width:100%;}
.article_list .list{position:relative; height:auto; aspect-ratio:530/705; overflow:hidden; background:var(--bk000);}
.article_list .list .checkbox{position:absolute; z-index:3; top:10px; left:10px;}
.article_list .list > a{display:block; position:relative; width:100%; height:100%; overflow:hidden;}
.article_list .thumb{position:absolute; inset:0; width:100%; height:100%; overflow:hidden;}
.article_list .thumb img{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1); transition:transform 1s;}
.article_list .list:hover .thumb img{transform:scale(1.08); transition:transform 2.5s cubic-bezier(0.25,0.1,0.25,1);}
.article_list .hover{position:absolute; inset:-1px; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; padding:50px; box-sizing:border-box; background:rgba(42,41,36,0.8); opacity:0; transition:opacity 0.5s; backface-visibility:hidden; -webkit-backface-visibility:hidden; transform:translateZ(0); pointer-events:none;}
.article_list .list:hover .hover, .article_list .list:focus-within .hover{opacity:1; transition:opacity 0.5s cubic-bezier(0.215,0.61,0.355,1);}
.article_list .list > a:focus-visible{outline:2px solid var(--white); outline-offset:-4px;}
.article_list .article_info{display:flex; flex-direction:column; align-items:center; gap:2px; min-width:0; max-width:100%; color:var(--white);}
.article_list .article_name{display:block; max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:center; line-height:175%;}
.article_list .article_year{display:block; opacity:0.5; text-align:center; line-height:171%;}
.article_list .article_ico{flex-shrink:0; width:36px; height:36px;}
.article_list .article_ico::before{content:"add_2"; font-family:var(--icon); font-size:36px; color:var(--white); line-height:36px; font-weight:200;}
@media (prefers-reduced-motion:reduce){.article_list .thumb img, .article_list .hover{transition:none;}}



/*********** View *************/
.article_view{display:flex; flex-direction:column; align-items:center; gap:30px; box-sizing:border-box; position:relative; z-index:2;}
.article_view_head{display:flex; flex-direction:column; align-items:flex-start; gap:5px; width:90%; max-width:1340px;}
.article_view_label{color:var(--sub); line-height:171%; text-transform:uppercase;}
.article_view_titrow{display:flex; flex-wrap:wrap; align-items:flex-end; gap:15px; line-height: 110%;}
.article_view_tit{color:var(--white); line-height:110%; text-transform:uppercase;}
.article_view_date{color:var(--white); opacity:0.5; line-height:100%; letter-spacing: 0.54px;}

.article_view_body{display:flex; justify-content:center; align-items:flex-start; max-width:1340px; width: 90%; position:relative; box-sizing:border-box;}
.article_view_stage{display:flex; justify-content:center; width:100%;}
.article_view_main_swiper{width:100%; overflow:hidden;}
.article_view_main_swiper .swiper-slide{height:auto;}
.article_view_main_swiper.swiper-fade .swiper-slide{pointer-events:none;}
.article_view_main_swiper.swiper-fade .swiper-slide-active{pointer-events:auto;}
.article_view_main{width:100%; aspect-ratio:1340/885; overflow:hidden;}
.article_view_main img{width:100%; height:100%; object-fit:contain; object-position: center; display:block;}
.article_view_side{position:absolute; top:-50px; right:-175px; display:flex; flex-direction:column; align-items:center; gap:20px; width:115px;}
.article_view_slide_ctrl{display:flex; align-items:center; justify-content:space-between; width:100px; height:40px;}
.article_view_slide_prev, .article_view_slide_next{display:flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; border:0; background:url('/twcenter/bbs/skin/articleBasic/image/arrow.png') no-repeat center/contain; cursor:pointer; position:relative;}
.article_view_slide_prev{background:url('/twcenter/bbs/skin/articleBasic/image/arrow2.png') no-repeat center/contain;}
.article_view_slide_prev.swiper-button-disabled, .article_view_slide_next.swiper-button-disabled{opacity:0.25; pointer-events:none;}

.article_view_thumb_swiper{width:115px; overflow:hidden;}
.article_view_thumb_swiper .swiper-slide{width:100%; height:auto;}
.article_view_thumb_btn{display:block; width:100%; padding:0; background:transparent; overflow:hidden; cursor:pointer; box-sizing:border-box; opacity:0.5; mix-blend-mode:luminosity; transition:border-color 0.4s, opacity 0.4s; aspect-ratio:1340/885; overflow:hidden; position: relative;}
.article_view_thumb_btn::after{content: ''; display: block; width: 100%; height: 100%; box-sizing: border-box; border:3px solid var(--sub2);  opacity: 0; transition:opacity 0.4s; position: absolute; left: 0; top: 0; pointer-events: none;} 
.article_view_thumb_swiper .swiper-slide-thumb-active .article_view_thumb_btn{mix-blend-mode:normal; opacity: 1;}
.article_view_thumb_swiper .swiper-slide-thumb-active .article_view_thumb_btn::after{opacity:1;}
.article_view_thumb_btn img{display:block; width:100%; height:100%; object-fit:contain;}

.article_view_content{color:var(--white); line-height:160%;}
.article_view_content::after{content: ''; display: block; clear: both;}
.article_view_content img{max-width:100% !important; height:auto !important;}
.article_view_more{display:flex; justify-content:center; width:100%; padding-top: 30px;}
.article_view_more .more-btn .more-txt{text-transform:uppercase;}




/*******************************************************************************
    @media 1760px
*******************************************************************************/
@media all and (max-width:1760px){

/*********** View *************/
.article_view_body{gap: 30px;}
.article_view_stage{width: calc(100% - 145px);}
.article_view_side{position:relative; top:auto; right:auto; width:115px;}




}
/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){

/*********** List *************/
.article_list .hover{padding:40px;}

}

/*******************************************************************************
    @media  ~980px              
*******************************************************************************/
@media all and (max-width:980px){



/*********** List *************/
.article_list{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:5px;}
.article_list .hover{padding:25px; gap:20px;}
.article_list .article_ico{width:30px; height:30px;}
.article_list .article_ico::before{font-size:30px; line-height:30px;}

/*********** View *************/
.article_view{gap:20px;}
.article_view_titrow{gap:10px;}
.article_view_body{gap:20px; flex-wrap:wrap; flex-direction:column; align-items:center;}
.article_view_stage{width:100%;}
.article_view_side{display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; max-width:100%;}
.article_view_slide_ctrl{width:75px; height:30px; flex-shrink:0;}
.article_view_slide_prev, .article_view_slide_next{width:30px; height:30px;}
.article_view_thumb_swiper{width:100%; max-width:100%; overflow:hidden;}

}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){


/*********** List *************/
.article_list .hover{padding:20px; gap:15px;}
.article_list .article_ico{width:24px; height:24px;}
.article_list .article_ico::before{font-size:24px; line-height:24px;}

}