/*********** List *************/
.brochure-list {display:flex; flex-wrap: wrap; gap:30px;}
.brochure-item {position:relative; width: calc((100% - 30px)/2); border-radius:var(--borderR30); background:var(--grayBg);}
.brochure-item .checkbox {position:absolute; left: 10px; top: 10px; z-index: 2;}
.brochure-item-in {display:flex; gap:45px; padding:50px; box-sizing:border-box;}
.brochure-item .thumb {flex-shrink:0; width:280px;}
.brochure-item .thumb-img {width:100%; aspect-ratio:280/396; border-radius:10px; overflow:hidden; box-shadow:0 10px 10px rgba(0,0,0,0.08); background:var(--white);}
.brochure-item .thumb-img img {display:block; width:100%; height:100%; object-fit:cover;}
.brochure-item .txt {flex:1; min-width:0; padding: 0; border: 0; display:flex; flex-direction:column; justify-content:space-between; align-self:stretch; gap:30px; min-height:396px; padding:30px 0; box-sizing:border-box;}
.brochure-item .info {display:flex; flex-direction:column; gap:18px; width:100%;}
.brochure-item .date {display:flex; align-items:center; gap:3px; color:var(--light); line-height: 100%; letter-spacing: 0;}
.brochure-item .date::before {content:"\ebcc"; font-family:var(--icon); font-size:20px; line-height:20px; color:var(--light); font-weight:400;}
.brochure-item .tit {display:flex; flex-direction:column; gap:8px; width:100%;}
.brochure-item .tit .fs30 {line-height:140%; letter-spacing:-0.05em;}
.brochure-item .desc {color:var(--basic); line-height:175%;}
.brochure-item .btns {display:flex; align-items:center; gap:5px; width:100%;}
.brochure-item .btns a {flex:1; min-width:0; display:flex; align-items:center; justify-content:center; gap:10px; height:50px; padding:0 25px; border-radius:100px; box-sizing:border-box; text-decoration:none; transition:background .3s, color .3s, border-color .3s;}
.brochure-item .btn-view {border:1px solid var(--main); background:var(--white); color:var(--main);}
.brochure-item .btn-view::after {content:"\e0e0"; font-family:var(--icon); font-size:20px; line-height:20px; color:inherit; font-weight:400; transition:color .3s;}
.brochure-item .btn-view span {color: inherit;}
.brochure-item .btn-view:hover {background:var(--main); color:var(--white);}
.brochure-item .btn-down {border:1px solid var(--main); background:var(--main); color:var(--white);}
.brochure-item .btn-down::after {content:"\e2c4"; font-family:var(--icon); font-size:20px; line-height:20px; color:inherit; font-weight:400; transition:color .3s;}
.brochure-item .btn-down span {color:inherit;}
.brochure-item .btn-down:hover {background:var(--white); color:var(--main) !important;}




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

/* List */
.brochure-item-in {gap:40px; padding:45px;}
.brochure-item .thumb {width:260px;}
.brochure-item .txt {min-height:360px;}
.brochure-item .btns{flex-wrap: wrap;}
.brochure-item .btns a{flex: auto; width: 100%;}

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

/* List */
.brochure-list {gap:24px;}
.brochure-item {width:100%;}
.brochure-item-in {gap:35px; padding:40px;}
.brochure-item .thumb {width:240px;}
.brochure-item .txt {min-height:340px; padding:24px 0;}
.brochure-item .info {gap:14px;}

}

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

/* List */
.brochure-list {gap:20px;}
.brochure-item-in {flex-direction:column; align-items:stretch; gap:30px; padding:30px;}
.brochure-item .thumb {width:100%; max-width:280px; margin:0 auto;}
.brochure-item .txt {min-height:0; padding:0; gap:30px;}
.brochure-item .info {gap:8px;}
.brochure-item .btns {gap:8px;}
.brochure-item .btns a{flex: 1;}

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

/* List */
.brochure-list {gap:16px;}
.brochure-item-in {gap:24px; padding:20px; border-radius:var(--borderR20);}
.brochure-item .thumb {max-width:220px;}
.brochure-item .thumb-img {border-radius:8px; box-shadow:0 8px 8px rgba(0,0,0,0.08);}
.brochure-item .txt {gap:14px;}
.brochure-item .tit {gap:6px;}
.brochure-item .btns {gap:4px;}
.brochure-item .btns a {flex:auto; height:40px; padding:0 20px;}

}