.subject-recomm-wrap ul{display: flex; justify-content: center; gap: 13px;}
.subject-recomm-wrap .subj-box .inner{overflow: hidden; position: relative; width: 290px; height: 320px; border-radius: 10px; transition: transform 0.4s;}
.subject-recomm-wrap .subj-box .title{position: absolute; bottom: 40px; left: 0; width: 100%; color: #fff; font-size: 32px; font-weight: 600; line-height: 1.4em; text-align: center;}
.subject-recomm-wrap .subj-box .cover{
  display: flex; flex-direction:column; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transform: rotateY(180deg);
  background-color: #fff; border: 1px solid #4064ff; border-radius: 10px; box-sizing: border-box; transition: opacity 0.4s;
}
.subject-recomm-wrap .subj-box:hover .inner{transform: perspective(500px) rotateY(180deg);}
.subject-recomm-wrap .subj-box:hover .cover{opacity: 1;}
.subject-recomm-wrap .subj-box .cover .txt-area{display: flex; justify-content: center; align-items: center; flex-grow: 1;}
.subject-recomm-wrap .subj-box .cover .txt-area p{color: #333; line-height: 1.3em;}
.subject-recomm-wrap .subj-box .cover .txt-area p.tit{font-size: 26px; font-weight: 600; margin-bottom: 10px;}
.subject-recomm-wrap .subj-box .cover .txt-area p.txt{font-size: 20px; margin-bottom: 5px;}
.subject-recomm-wrap .subj-box .cover .txt-area p.sub{color: #757575; font-size: 18px;}
.subject-recomm-wrap .subj-box .cover .btm{display: flex; gap: 2px; width: calc(100% + 2px); margin-left: -1px; margin-bottom: -1px;}
.subject-recomm-wrap .subj-box .cover .btm .btn{flex-grow:1; padding: 20px 0; color: #fff; font-size: 20px; text-align: center; font-weight: 600; transition: background-color 0.4s;}
.subject-recomm-wrap .subj-box .cover .btm .btn.btn-1{background-color: #66709f;}
.subject-recomm-wrap .subj-box .cover .btm .btn.btn-2{background-color: #4064ff;}
.subject-recomm-wrap .subj-box .cover .btm .btn:hover.btn-1{background-color: #596494;}
.subject-recomm-wrap .subj-box .cover .btm .btn:hover.btn-2{background-color: #3357f2;}

.subject-recomm-wrap .subj-box.subj-1 .inner{background: url('./img/common/bg_subject_card_01.png') center / 100% no-repeat;}
.subject-recomm-wrap .subj-box.subj-2 .inner{background: url('./img/common/bg_subject_card_02.png') center / 100% no-repeat;}
.subject-recomm-wrap .subj-box.subj-3 .inner{background: url('./img/common/bg_subject_card_03.png') center / 100% no-repeat;}
.subject-recomm-wrap .subj-box.subj-4 .inner{background: url('./img/common/bg_subject_card_04.png') center / 100% no-repeat;}
.subject-recomm-wrap .subj-box.subj-5 .inner{background: url('./img/common/bg_subject_card_05.png') center / 100% no-repeat;}
.subject-recomm-wrap .subj-box.subj-6 .inner{background: url('./img/common/bg_subject_card_06.png') center / 100% no-repeat;}
.subject-recomm-wrap .subj-box.subj-7 .inner{background: url('./img/common/bg_subject_card_07.png') center / 100% no-repeat;}
.subject-recomm-wrap .subj-box.subj-8 .inner{background: url('./img/common/bg_subject_card_08.png') center / 100% no-repeat;}