@charset "utf-8";

#exhibList{padding:160px 0 0;}
    #exhibList .title_top{margin:0 0 70px; text-align: center;}
    #exhibList .title_top h3{color:#333; font-size: 36px; letter-spacing:-0.06em; font-weight: 800;}
    #exhibList .title_top p{margin-top: 0.6em; font-size: 18px; color:#777;}
    #exhibList .list{display:flex; gap:50px 0; justify-content:space-between; flex-wrap:wrap;}
    #exhibList .list li{width: 48%;}
    #exhibList .list li .img {overflow: hidden; position: relative;}
    #exhibList .list li .img > img{width: 100%; transition:transform 0.3s}
    #exhibList .list li .img:hover > img{transform:scale(1.06);}
    #exhibList .list li .img .new{position: absolute; right: 0px; top: 6px;}
    #exhibList .list li .txt{padding:20px;}
    #exhibList .list li .txt .tit{font-size: 20px; font-weight: 800; color:#333;}
    #exhibList .list li .txt .date{margin-top: 8px; color:#777;}
    @media all and (max-width:976px){
        #exhibList .list {justify-content:center; gap:40px;}
        #exhibList .list li{width: 100%; max-width:760px;}
    }
    @media all and (max-width:767px){
        #exhibList .list { gap:30px;}
        #exhibList .list li .img .new img{width: 80px;}
    }



    #exhibView{padding:160px 0 0; width: 94%; max-width:960px; margin:0 auto;}
    #exhibView .title_top{position: relative; margin:0 0 70px; text-align: center;}
    #exhibView .title_top h3{color:#333; font-size: 36px; letter-spacing:-0.06em; font-weight: 800;}
    #exhibView .title_top p{margin-top: 0.6em; font-size: 18px; color:#777;}
    #exhibView .title_top .prev, #exhibView .title_top .next{position:absolute; top:50%; transform:translateY(-50%); font-size:0; color:#999;}
    #exhibView .title_top .prev{left:0;}
    #exhibView .title_top .next{right:0;}
    #exhibView .title_top .prev:before, #exhibView .title_top .next:before{content:''; font-size:24px; font-weight:400;}
    #exhibView .title_top .prev:before{content:'←'}
    #exhibView .title_top .next:before{content:'→'}
    #exhibView .title_top .prev:hover:before, #exhibView .title_top .next:hover:before{color:#333}
 
    #exhibView .img_top{}
    #exhibView .img_top img{width: 100%;}
    #exhibView .img_top .txt{padding:40px 14px 20px;}
    #exhibView .img_top h4{font-size: 30px; font-weight: 800; color:#333;}
    #exhibView .img_top .date{margin-top: 0.6em; font-size: 16px;}
    #exhibView .img_top .right{font-size: 16px;}

    #exhibView .etit{font-size: 2.2rem; padding: 14px; font-weight: 700; color: #000;}
 
    #exhibView .list_top{display:flex; justify-content:space-between; align-items:center; padding:14px; background:#333;}
    #exhibView .list_top p{color:#fff; font-size: 20px; font-weight:700;}
    #exhibView .list_top button{color:#fff; font-family:'Suit'; background:#6b50dd; padding:1em; border:1px solid transparent; font-size: 18px;}
 
    #exhibView .list{}
    #exhibView .list li{display:flex; align-items:center; justify-content:space-between; padding:20px 14px; border-bottom:1px solid #eee;}
    #exhibView .list li .tit{}
    #exhibView .list li .tit h5{font-size: 22px; font-weight:500; color:#333;}
    #exhibView .list li .tit .h5_detail{margin-top: 0.3em; font-size: 16px; color:#777;}
    #exhibView .list li .price{display:flex; align-items:center; gap:10px; flex:0 0 auto; padding-left: 3%;}
    #exhibView .list li .price .before{font-size:20px; text-decoration-line: line-through; color:#777;}
    #exhibView .list li .price .after{font-size: 30px; color:#6b50dd; font-weight:800;}
    #exhibView .list li .price .after.t{font-size: 20px;}
    
    #exhibView .btn-back{display:block; text-align: center; margin-top: 4em; background:#eee; font-size: 16px; font-weight: 600; padding:1em;}
     @media all and (max-width:767px){
         #exhibView .title_top{margin:0 0 30px; padding:0 20px;}
         #exhibView .title_top h3{font-size: 24px;}
         #exhibView .title_top p{font-size: 14px;}
         #exhibView .img_top .txt{padding:26px 14px 10px;}
         #exhibView .img_top h4{font-size: 24px;}
         #exhibView .img_top .date{font-size: 15px;}
         #exhibView .img_top .right{font-size: 14px;}
         #exhibView .list_top p{font-size: 18px;}
         #exhibView .list_top button{font-size: 16px; flex:0 0 auto;}
         #exhibView .list li .tit h5{font-size: 20px;}
         #exhibView .list li .tit .h5_detail{font-size: 15px;}
         #exhibView .list li .price{flex:0 0 auto; flex-direction:column; gap:0px; align-items:flex-end;}
         #exhibView .list li .price .before{font-size: 16px;}
         #exhibView .list li .price .after{font-size: 24px;}
     }
     @media all and (max-width:480px){
         #exhibView .list_top{flex-direction:column; gap:10px;}
         #exhibView .list_top button{font-size: 15px; width: 100%; padding:0.5em;}
         #exhibView .list li .tit h5{font-size: 18px;}
         #exhibView .list li .tit .h5_detail{font-size: 14px;}
         #exhibView .list li .price .before{font-size: 14px;}
         #exhibView .list li .price .after{font-size: 20px;}
         #exhibView .list li .price .after.t{font-size: 14px;}
     }
     @media all and (max-width:380px){
         #exhibView .list li .tit h5{font-size: 16px;}
         #exhibView .list li .tit .h5_detail{font-size: 14px;}
         #exhibView .list li .price .before{font-size: 14px;}
         #exhibView .list li .price .after{font-size: 16px;}
     }