/* List: head */
.exhibition-head .top{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end;
    -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
}
.exhibition-head .top .title{
    margin: 120px 0 -10px; line-height: 1;
    font-family: 'Montserrat', NotoKR; font-size: 60px; font-weight: 700;
}
.exhibition-head .top .select{
    padding-left: 80px; width: 200px; height: 50px;
    font-size: 16px; font-weight: 700;
}
.exhibition-head .middle{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    margin-top: 160px;
}
.exhibition-head .middle .title{
    display: block; width: 28%;
}
.exhibition-head .middle .title span{
    display: block; position: relative; padding: 36px 28px 38px; line-height: 1;
    font-family: 'Montserrat', NotoKR; font-size: 32px; color: #172a88; font-weight: 700;
    border-top: 1px solid #b9bfdb; border-bottom: 1px solid #b9bfdb;
}
.exhibition-head .middle .title span::before{
    content: ''; position: absolute; top: -1px; left: 0; width: 30px; height: 30px;
    border-top: 6px solid #172a88; border-left: 6px solid #172a88;
}
.exhibition-head .middle .image{
    margin: 0 40px 0; width: 30%;
}
.exhibition-head .middle .image img{
    width: 100%; height: auto;
}
.exhibition-head .middle .context{
    flex: 1 1; padding-top: 18px; line-height: 1.4;
}
.exhibition-head .middle .context > div{
    overflow: hidden; max-height: 266px;
}
.exhibition-head .middle .context .button{
    margin-top: 35px; max-width: 200px; width: 100%;
}
.exhibition-body{
    margin-top: 100px;
}
@media(max-width:1200px){
    .exhibition-head .top .title{
        margin-top: 60px; font-size: 40px;
    }
    .exhibition-head .top .select { font-size: 15px; }
    .exhibition-body{
        margin-top: 80px;
    }
    .exhibition-head .middle { margin-top: 120px; }
    .exhibition-head .middle .title span { padding: 30px 28px 32px; font-size: 24px; }
    .exhibition-head .middle .title span::before { width: 24px; height: 24px; border-width: 5px; }
    .exhibition-head .middle .context { font-size: 16px; }

    .exhibition-head .middle .context .button { max-width: none; }
}
@media(max-width:768px){
    .exhibition-head .top{
        -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
        -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;
    }
    .exhibition-head .top .title{
        margin: 0 0 30px; font-size: 20px;
    }
    .exhibition-head .top .title br { display: none; }
    .exhibition-body{
        margin-top: 60px;
    }
    .exhibition-head .top .select { padding-left: calc(50vw - 30px); width: 100%; height: 40px; font-size: 14px; }
    .exhibition-head .middle{
        -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
        margin-top: 55px;
    }
    .exhibition-head .middle .title { width: 100%; }
    .exhibition-head .middle .image { margin: 30px 0; width: 100%; }
    .exhibition-head .middle .title span { padding: 26px 20px 26px; font-size: 18px; }
    .exhibition-head .middle .context { flex: auto; }
    .exhibition-head .middle .context { font-size: 14px; }
}


/* List: body */
.gallery-lists{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -ms-flex-wrap: wrap; flex-wrap: wrap;
    margin: 58px -1px -1px;
}
.gallery-list{
    padding: 1px; width: 33.33333%;
}
.gallery .box{
    position: relative;
}
.gallery .context{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    z-index: 2; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,.5);
    -webkit-transition: all ease-out .15s; transition: all ease-out .15s;
    opacity: 0;
}
.gallery .context .title{
    display: block; width: 100%; line-height: 1.2;
    font-family: 'Montserrat', NotoKR; text-align: center; font-size: 32px; color: #ffffff; font-weight: 800;
}
.gallery .context .title small{
    display: block; margin-bottom: 16px; line-height: 1; font-size: 16px; font-weight: 200;
}
.gallery .context .arrow{
    display: -webkit-inline-flex; display: -ms-inline-flex; display: inline-flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    margin: 30px 0 -30px; padding-bottom: 4px; width: 60px; height: 40px;
    border: 1px solid rgba(255,255,255,.5);
}
.gallery .context .arrow svg{
    width: 34px; height: auto;
}
@media(min-width:1201px){
	.gallery:hover .context{
        opacity: 1;
    }
}
@media(max-width:1200px){
}
@media(max-width:768px){
    .gallery-list { width: 50%; }
}


/* View */
.bbs-modal-container{
    z-index: 10000;
    overflow-x: hidden; overflow-y: auto;
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%; background: rgba(0,0,0,.6);
}
.bbs-modal-wrapper{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    margin: 100px 10px 10px;
    width: auto;
}
.bbs-modal{
    overflow: hidden; display: flex; flex-direction: column;
    position: relative; max-width: 1200px; width: 100%; max-height: none;
    background: #ffffff;
}
.bbs-modal--6{
    max-width: 600px;
}
.bbs-modal--7{
    max-width: 700px;
}
.bbs-modal--8{
    max-width: 800px;
}
.bbs-modal--9{
    max-width: 900px;
}
.bbs-modal .bottom-button{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    margin-top: 80px;
}
.bbs-modal .bottom-button .button{
    margin: 0 2px; padding: 12px; max-width: 200px; width: 100%; font-size: 16px;
}
.bbs-modal__head{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    position: relative; min-height: 80px; border-bottom: 1px solid #f5f5f5;
}
.bbs-modal__close{
    position: absolute; top: 0; right: 0; width: 100px; height: 100%;
}
.bbs-modal__title{
    display: block;
    line-height: 1.4; font-size: 24px; font-weight: 700; color: #ffffff;
}
.bbs-modal__title small{
    display: block; margin-bottom: 2px; line-height: 1;
    font-size: 14px; color: rgba(255,255,255,.7); font-weight: 300;
}
.bbs-modal__body{
    padding: 80px 25px 100px;
}
.detail-contents{
    margin: auto; max-width: 640px; width: 100%;
    line-height: 1.5; font-size: 14px; color: #777777; font-weight: 200;
}
.detail-contents .title{
    display: block; line-height: 1; text-align: center;
    margin-bottom: 50px; font-size: 32px; color: #172a88; font-weight: 700;
}
.bbs-modal-contents{
    margin: auto; max-width: 1000px; width: 100%;
}
.bbs-modal-contents .top{
    position: relative; padding: 0 120px;
}
.bbs-modal-contents .bottom{
    margin-top: 60px; padding: 0 120px;
}
.bbs-modal-contents .context{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    position: relative; padding: 38px; line-height: 1;
    line-height: 1.45; font-size: 16px; color: #777777; font-weight: 200;
    border-top: 1px solid #b9bfdb; border-bottom: 1px solid #b9bfdb;
}
.bbs-modal-contents .context::before{
    content: ''; position: absolute; top: -1px; left: 0; width: 30px; height: 30px;
    border-top: 6px solid #172a88; border-left: 6px solid #172a88;
}
.bbs-modal-contents .context .title{
    display: block; width: 48%; line-height: 1;
    font-family: 'Montserrat', NotoKR; font-size: 32px; font-weight: 700; color: #172a88;
}
.bbs-modal-contents .context .title small{
    display: block; margin-bottom: 15px; font-size: 16px; color: #333333; font-weight: 200;
}
.bbs-modal-contents .context .pr{
    flex: 1 1;
}
.bbs-modal-contents .context .pr *{
    line-height: inherit !important; font-family: inherit !important; font-size: inherit !important;
}
.bbs-modal-contents .context--column{
    -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
}
.bbs-modal-contents .context--column .title{
    margin-bottom: 30px; width: 100%;
}
.thumbnail-slide-container{
    position: relative;
    padding-right: 25%; width: 100%;
}
.thumbnail-slide-thumbs{
    position: absolute; top: 0; right: 0;
    margin: -10px -10px 0 0; width: 25%; height: calc(100% + 10px);
}
.thumbnail-slide-top .thumbnail,
.thumbnail-slide-thumbs .thumbnail{
    padding-top: calc(566 / 400 * 100%);
}
.thumbnail-slide-top img,
.thumbnail-slide-thumbs img{
    display: block; width: 100%; height: auto;
}
.thumbnail-slide-top .swiper-slide{
    background: #ffffff;
}
.thumbnail-slide-thumbs .swiper-container{
    height: 100%;
}
.thumbnail-slide-thumbs .swiper-slide{
    padding: 10px;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.thumbnail-slide-thumbs .swiper-slide .thumbnail{
    cursor: pointer;
    -webkit-transition: all ease-out .15s; transition: all ease-out .15s;
    opacity: .5;
}
.thumbnail-slide-thumbs .swiper-slide-thumb-active .thumbnail{
    z-index: 2; position: relative;
    box-shadow: 0px 3px 9px 0px rgba(0,0,0,.3);
    opacity: 1;
}
.thumbnail-slide-prev,
.thumbnail-slide-next{
    display: -webkit-inline-flex; display: -ms-inline-flex; display: inline-flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    position: absolute; top: 0; bottom: 0;
    margin: auto; width: 60px; height: 40px; border: 1px solid #333333;
    outline: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.thumbnail-slide-prev { left: 0; }
.thumbnail-slide-next { right: 0; }
.thumbnail-slide-prev svg,
.thumbnail-slide-next svg{
    width: 32px; height: auto;
    stroke: #333333;
}
.thumbnail-slide-prev.swiper-button-disabled,
.thumbnail-slide-next.swiper-button-disabled{
    opacity: .3;
}
@media(min-width:1201px){
    .thumbnail-slide-prev:not(.swiper-button-disabled):hover,
    .thumbnail-slide-next:not(.swiper-button-disabled):hover{
        background-color: #172a88;
        border-color: #172a88;
    }
    .thumbnail-slide-prev:not(.swiper-button-disabled):hover svg,
    .thumbnail-slide-next:not(.swiper-button-disabled):hover svg{
        width: 32px; height: auto;
        stroke: #ffffff;
    }
}
@media(max-width:1200px){
    .detail-contents { font-size: 13px; }
    .detail-contents .title { font-size: 26px; }

    .bbs-modal-wrapper{
        margin: 10px;
    }
    .bbs-modal .bottom-button{
        margin-top: 60px;
    }
    .bbs-modal__head{
        padding: 10px 100px 10px 24px;
        min-height: 60px;
    }
    .bbs-modal__title{
        font-size: 16px;
    }
    .bbs-modal__title small{
        font-size: 12px;
    }
    .bbs-modal__close{
        width: 60px;
    }
    .bbs-modal__close svg{
        -webkit-transform: scale(.8); transform: scale(.8);
    }
    .bbs-modal__body{
        padding-top: 30px; padding-bottom: 30px;
    }

    .thumbnail-slide-prev svg,
    .thumbnail-slide-next svg{
        -webkit-transform: scale(.8); transform: scale(.8);
    }

    .thumbnail-slide-thumbs .swiper-slide{
        padding: 10px; max-width: 145px;
    }

    .bbs-modal-contents .context .title { font-size: 24px; }
}
@media(max-width:768px){
    .detail-contents .title { font-size: 18px; }

    .bbs-modal .bottom-button{
        margin-top: 35px; padding: 10px; max-width: none; font-size: 14px;
    }
    .bbs-modal__head{
        padding: 10px 60px 10px 15px;
    }
    .bbs-modal__close{
        width: 60px;
    }
    .bbs-modal__title{
        font-size: 14px;
    }
    .bbs-modal__title small{
        font-size: 10px;
    }

    .bbs-modal__body {
        padding: 18px 15px 20px;
    }
    .thumbnail-slide-container{
        padding: 0;
    }
    .thumbnail-slide-thumbs{
        position: static; margin: 0; width: 100%; height: 100%;
    }
    .thumbnail-slide-thumbs .swiper-container{
        margin: -6px -40px 0;
        padding: 16px 30px;
    }
    .thumbnail-slide-top,
    .thumbnail-slide-thumbs{
        padding: 0;
    }
    /* .thumbnail-slide-thumbs
    .swiper-slide-thumb-active{
        box-shadow: 0px 4px 12px 0px rgba(0,0,0,.3);
    } */
    .thumbnail-slide-prev{
        left: -10px;
    }
    .thumbnail-slide-next{
        right: -10px;
    }
    .thumbnail-slide-prev,
    .thumbnail-slide-next{
        display: none;
        /* width: 30px; */
    }
    /* .thumbnail-slide-prev svg,
    .thumbnail-slide-next svg{
        -webkit-transform: scale(.6); transform: scale(.6);
    } */

    .bbs-modal-contents .top { padding: 0 25px; }
    .bbs-modal-contents .bottom { margin-top: 35px; padding: 0; }
    .bbs-modal-contents .context::before { width: 26px; height: 26px; border-width: 4px; }
    .bbs-modal-contents .context .title { margin-bottom: 20px; width: 100%; font-size: 18px; }
    .bbs-modal-contents .context .title small { margin-bottom: 10px; font-size: 14px; }
    .bbs-modal-contents .context{
        -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
        padding: 20px; font-size: 14px;
    }
    .bbs-modal-contents .context .pr { flex: auto; }
}


/* layer Style */
.model-title { }
.bbs-modal-thumbnail { margin-bottom: 50px; }
@media(max-width:1200px){

}
@media(max-width:768px){
    .bbs-modal-thumbnail { margin-bottom: 35px; }
}