@import url(/css/default.css);
@import url(/css/common.css);
@import url(/css/layout.css);
@import url(/css/sub.css);

@media screen and (max-width: 1400px) {
  .inner01,
  .inner02{
    width: 100%;
    padding-left: 3%;
    padding-right:3%;
  }  

  .main_visual .main_visual_txt {
    width: 100%;
    padding: 0 3%;
  }
  .visual-control {
    width: 100%;
    padding-left: 3%;
    padding-right: 3%;
  }

  .visual-control .swiper-button-prev {
    left: 3%;
  }
  .visual-control .swiper-button-next {
    left: calc(52px + 20px + 3%);
  }

  .main_visual .main_visual_bg{
    left: calc(3% + 420px);
  }

  .main_exhibitions .button-wrapper > div {
    width: 40px;
    height: 40px;
  }
  .main_exhibitions .button-wrapper {
    top: calc(50% - 20px - 28px);
    left: 0;
    right: 0;

    left: -3%;
    right: -3%;
  }

}
@media screen and (max-width: 1024px) {
  html, body{
    font-size: 15px;
  }

  .main_visual .main_visual_bg {
    left: 0;
  }

  .main_content01 {
    flex-direction: column;
  }
  .main_content01 .main_title {
    width: 100%;
    margin-bottom: 40px;
    padding: 0;
  }  
  .main_content01 .main_title .more_btn {
    margin-top: 40px;
  }
  .main_content01 .main_cont {
    width: 100%;
  }

  #main_container > .main_service {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .main_service .main_title > div {
    position: relative;
    top: 0;
    padding-bottom: 0px;
  }
  .service_cont > ul > li {
    width: 100%;
    padding-top: 0;
    border-left: 1px solid #E4E7EC;
    border-left: 0;
  }
  .service_cont > ul > li:nth-child(1) {
    order: 2;
    padding: 0;
    margin: 0;
  }
  .service_cont > ul > li:nth-child(2){
    order: 1;
    padding: 0;
    margin: 0;
  }
  .service_cont > ul > li:nth-child(3){
    order: 4;
    padding: 0;
    margin: 0;
  }
  .service_cont > ul > li:nth-child(4){
    order: 3;
    padding: 0;
    margin: 0;
  }
  .service_cont .txt_box {
    padding: 40px 0 20px 0px;
  }
  .service_cont > ul > li:nth-child(2) .txt_box{
    padding-top: 0;
  }

  .main_exhibitions .main_cont .exhibitions {
    border-bottom: 0;
  }
  .main_exhibitions .main_cont .exhibitions:before {
    display: none;
  }
  

  .main_gallery .main_title {
    flex-direction: row;
    align-items: flex-end;
  }

  
  
  #footer .inner02 {
    flex-direction: column;
    padding-top: 40px;
    padding-bottom: 20px;
  }
  #footer .ft_left{
    margin-bottom: 32px;
  }
  
}
@media screen and (max-width: 850px) {
  /* common */
  .input_box_list.type02 > li {
    width: 100%;
  }

  
  /* 메인 */
  .main_card {
    flex-direction: column;
  }
  .main_card .img_box{
    width: 100%;
  }
  .main_card .txt_box{
    width: 100%;
    padding: 28px 20px;
  }
  .main_card .txt_box h3 {
    margin-bottom: 20px;
  }
  section > .main_card:last-child {
    flex-direction: column-reverse;
  }

  .main_visual article ul li:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #010819;
    opacity: 0.6;
    z-index: 1;
  }
  .main_visual .main_visual_txt {
    /* text-align: center; */
    color: #fff;
    z-index: 2;
  }
  .visual-control .swiper-button-prev,
  .visual-control .swiper-button-next{
    display: none;
  }
  .visual-control .swiper-pagination {
    /* text-align: center; */
  }
  .visual-control .swiper-pagination .swiper-pagination-current {
    color: #fff;
    opacity: 0.8;
  }
  /* 서브 */
  #sub_container {
    padding: 60px 0 120px;
  }
  #sub_visual {
    height: 200px;
    padding-top: 60px;
  }
  #sub_visual .location_box strong {
    font-size: 2em;
    margin-bottom: 8px;
  }
  #snb .sub_menu {
    padding-top: 20px;
  }
  .board_head {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 24px;
  }
  .board_head form{
    width: 100%;
  }
  .search_box_wrap > div:last-child {
    width: 100%;
  }
  .search_box_wrap {
    margin-top: 16px;
  }
  .gallery_list > .art {
    gap: 20px;
    padding-bottom: 20px;
  }
  .gallery_list .art > li {
    width: calc((100% - 20px) / 2);
  }

  /* 게시판 */
  .board_list.tbl_box,
  .board_list.tbl_box tbody, 
  .board_list.tbl_box tr, 
  .board_list.tbl_box th, 
  .board_list.tbl_box td {
    display: block;
  }
  .board_list.tbl_box tr{
    border-bottom: 1px solid #E4E7EC;
    position: relative;
    padding: 16px;
    display: flex;
    flex-wrap: wrap;
  } 
  .board_list.tbl_box tbody th, .board_list.tbl_box tbody td {
    border-bottom: 0;
    padding: 0;
  }
  .board_list.tbl_box tbody td:first-child,
  .board_list .num{ 
    position: absolute;
    left: 16px;
    top: 16px;
  }
  .board_list .num b {
    width: 20px;
    height: 20px;
  }
  .board_list.tbl_box tbody td.tit {
    padding-left: 24px;
    width: 100%;
    margin-bottom: 4px;
  }
  .board_list .writer,
  .board_list .date,
  .board_list .view,
  .board_list .file { 
    width: auto; 
    font-size: .9em;
    margin-right: 12px;
  }
  .board_list .file{
  }
  .board_list .file img {
    width: 16px;
    vertical-align: middle;
  }

  .board_view .board_view_head .bv_title .bv_info{
    flex-wrap: wrap;
  }
  .board_view .board_view_cont .bv_context p span{
    word-break: auto-phrase;
    word-break: initial;
  }

  /* 회사소개 */
  .about_top {
    flex-direction: column;
    margin-bottom: 40px;
  }
  .about_top .txt_box{
    width: 100%;
    padding-top: 0;
    padding-right: 0;
    margin-bottom: 20px;
  }
  .about_top .img_box {
    width: 100%;
    height: 380px;
  }
  .about_btm {
    flex-direction: column;
  }
  .about_btm > li {
    width: 100%;
    margin-bottom: 20px;
  }
  .introduce_content h4 {
    font-size: 1.5em;
    padding: 12px 0 40px;
  }
  .introduce_content > article {
    padding-top: 40px;
    padding-bottom: 60px;
  }
  .core_values .rental_info {
    flex-direction: column;
    align-items: center;
  }   
  .vision .rental_info > li {
    width: 260px;
    border-radius: 50%;
    margin-bottom: -60px;    
  }
  .vision .rental_info > li:last-child {
    margin-bottom: 0px;    
  }
  .introduce_content > article.organization {
    padding-top: 60px;
    padding-bottom: 60px; 
  }
  .introduce_content > article.certification {
    padding-bottom: 120px;
  }
  .introduce_content .ui_box.v2 > img:nth-child(1) {
    height: auto;
    width: 60%;
  }  
  .introduce_content .dl_box dl {
    margin-top: 20px;
    flex-direction: column;
  }
  .introduce_content .dl_box dt {
    font-size: 20px;
  }  
  .introduce_content .dl_box dd {
    border-top: 0;
    padding-top: 20px;
  }  
  .introduce_content .dl_box .flex {
    gap: 0;
    flex-direction: column;
  }
  .introduce_content .dl_box .flex img {
    height: auto;
    width: 100%;
  }
  .dl_card_box {
    padding: 0;
    flex-direction: column;
  }
  .dl_card_box dl {
    border-right: 0;
    border-bottom: 2px dashed #E4E7EC;
  }
  .dl_card_box dl:last-child {
    border-bottom: 0;
  }
  .history .dl_list dl {
    flex-direction: column;
    padding: 20px;
  }
  .history .dl_list dl dt {
    width: 100%;
    margin-bottom: 12px;
  }
  .certification ul {
    flex-direction: column;
    align-items: center;
  }
  .certification ul li {
    margin-right: 0;
    margin-bottom: 20px;
  }
  .certification ul li .img_box {
    height: auto;
  }
  .map_info {
    flex-direction: column;
  }
  .map_info .btn_box {
    display: flex;
  }
  .map_info .btn_box .btn{
    width: calc((100% - 12px) / 2);
    padding: 0;
    text-align: center;
  }
  .map_info .btn_box .btn:last-child{
    margin-right: 0;
  }

  /* 작품상세보기 */
  .art_view_content .art_view_box {
    flex-direction: column;
    margin-bottom: 40px;
  }
  .art_view_box .art_view_img_box {
    flex: 0 0 100%;
    height: 500px;
    margin-right: 0;
  } 
  .art_view_txt_box .title {
    border-top: 0;
    padding-bottom: 20px;
    margin-bottom: 20px;
  }
  .art_view_txt_box .btn {
    margin-top: 20px;
  }
  .art_view_deatil .tab_content {
    padding: 20px 0px;
  }
  .art_view_img_box .modal-dialog {
    width: 90%;
    height: 90%;
  }
  .art_view_img_box .modal-dialog .modal-body {
    padding: 12px;
  }

  /* 작가 */
  .gallery_list .artist {
    gap: 40px 20px;
  }
  .gallery_list .artist > li {
    width: calc((100% - 20px) / 2);
  }
  .artist_modal .modal-dialog {
    width: 90%;
    height: 90%;
  }
  .about_artist {
    flex-direction: column;
  }
  .about_artist .img_box {
    flex: 0 0 100%;
    margin-right: 0;
  }
  .modal-body {
    padding: 20px;  
  }

  /* 대관 */
  .rental_video .video_wrapper {
    height: auto;
  }
  .rental_content .rental_info {
    flex-direction: column;
  }
  .rental_info > li {
    width: 100%;
    height: auto;
    border-radius: 0;
    margin: 8px 0;
    border: 0;
  }
  .rental_content .tab_wrapper .tab_menu >li {
    width: 33.3333%;
  }
  .rental_content .tab_content {
    padding: 0;
  }
  .rental_content .tab_content > div {
    padding: 24px;
  }
  .rental_content .tab_content .dl_info_box {
    flex-direction: column;
  }
  .rental_content .tab_content .dl_info_box dl {
    margin-right: 0;
    margin-bottom: 20px;
  }
  .rental_content .tab_content .dl_info_box dl dt {
    flex: 0 0 80px;
  }
  .step_list dl dt strong br{
    display: none;
  }
  .rental_content .tab_content .img_box_wrap {
    flex-direction: column;
    height: auto;
  }
  .img_box_wrap .gallery-slide {
    width: 100%;
    margin-right: 0;
    margin-bottom: 8px;
    height: 300px;
  }
  .img_box_wrap .gallery-thumbs {
    width: 100%;
  }
  .img_box_wrap .gallery-thumbs .swiper-slide{
    height: 80px;
  }
  .rental_content .tab_content .dl_box {
    flex-direction: column;
  }
  .rental_content .tab_content .dl_box dt {
    width: auto;
    border-right: 0;
    padding-right: 0;
    margin-bottom: 12px;
  }
  .rental_content .tab_content .dl_box dd .bu_list > li {
    width: 100%;
  }
  .step_list {
    flex-direction: column;
  }
  .step_list dl {
    width: 100%;
    flex-direction: column;
    padding: 16px;
  }
  .step_list dl dt {
    flex: 0 0 auto;
    margin-bottom: 12px;
  }
  .step_list .btn_box{
    position: relative;
    padding: 16px 0;    
  }
  .rental_content .notice_box {
    padding: 20px 24px;
  }
  .rentalfee_guide .modal-dialog {
    width: 94%;
  }



  /* 행사 */
  .gallery_list > .event {
    gap: 20px;
  }
  .gallery_list .event > li {
    width: calc((100% - 20px) / 2);
  }

  /* business */
  .bsn_content{}
  .bsn_content.tab_wrapper .tab_menu {
    align-items: center;
  }
  .bsn_content.tab_wrapper .tab_menu > li {
    padding: 12px 0;
    width: 33.3333%;
    text-align: center;
    font-size: 1em;
    letter-spacing: -1px;
    margin-right: 8px;
  }
  .bsn_content.tab_wrapper .tab_menu > li:last-child {
    margin-right: 0px;
  }
  .bsn_content .tab_content {
    padding-top: 60px;
  }

  .bsn_content .sub_title_box {
    margin-bottom: 40px;
  }
  .bsn_content .sub_title_box h3 {
    font-size: 2em;
    width: 80%;
    margin: 0 auto 20px;
    letter-spacing: -1px;
  }
  .bsn_content .sub_title_box h3:before {
    margin-right: -10%;
  }
  .bsn_content .sub_title_box h3:after {
    margin-left: -10%;
  }
  .bsn_content .sub_title_box p {
    width: 92%;
  }
  .bsn_content .text_box_area {
    flex-direction: column;
    gap: 20px;
  }
  .bsn_content .text_box_area li {
    flex: 0 0 100%;
    padding: 20px;
  }
  .bsn_content .text_box_area li h5 {
    font-size: 1.25em;
    margin-bottom: 8px;
  }
  .bsn_info_list {
    margin-left: 0;
    flex-direction: column;
  }
  .bsn_info_list li {
    width: 100%;
    padding: 16px;
    margin-left: 0;
    margin-bottom: 8px;
  }
  .bsn_content .ui_bar {
    margin: 0px auto;
    height: 32px;
  }
  .text_imgbox_area_wrap > li {
    flex-direction: column;
    margin-bottom: 40px;
  }
  .text_imgbox_area_wrap > li:nth-child(2n) {
    flex-direction: column-reverse;
  }
  .text_imgbox_area_wrap .img_box {
    width: 100%;
    height: 240px;
  }
  .text_imgbox_area_wrap .text_box {
    width: 100%;
    padding: 16px 0 0;
  }
  .text_imgbox_area_wrap .text_box b {
    margin-bottom: 4px;
  }
  .text_imgbox_area_wrap .text_box h5 {
    margin-bottom: 20px;
  }
  .bsn_content h4 {
    padding: 32px 0 12px 0;
    margin-bottom: 12px;
  }
  .bsn_content #con03 .text_imgbox_area.length5 {
    margin-bottom: 80px;
  }
  .text_imgbox_area.length5 li {
    margin-right: 20px;
    width: calc((100% - 20px) / 2);
    margin-bottom: 20px;
  }
    .text_imgbox_area.length5 li:nth-child(2n) {
      margin-right: 0;
  }
  .text_imgbox_area h5 {
    margin-top: 12px;
  }
  .text_imgbox_area .img_box{
    width: 100%;
  }
  .text_imgbox_area .text_box {
    margin-left: 0;
  } 
  
  .art_list > ul > li{
    padding: 20px 0;
  }
  .art_list > ul > li .img_box {
    max-height: 128px;
  }
  .art_list > ul > li .txt_box {
    padding-left: 20px;
  }
  .art_list > ul > li .txt_box strong{
    font-size: 18px;
  }
  .onedayclass .btn_box{
    gap: 12px;
  }
  .onedayclass .btn_box .btn.lg {
    padding: 0;
    flex: 1;
  }
  .onedayclass .cont_box .text_imgbox_area {
    padding: 24px;
  }  
  .onedayclass .cont_box dl{
    flex-direction: column;
    text-align: center;
    padding: 16px 24px;
    gap: 8px;    
  }
  .onedayclass .contact_box {
    flex-direction: column;
  }  
  .onedayclass .contact_box > div,
    .onedayclass .contact_box > .form_box{
    width: 100%;
  }
  .onedayclass .contact_box ul {
    margin: 20px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
  }
  .onedayclass .contact_box ul li {
    gap: 8px;
    margin: 0;
    font-size: 1em;
  }    
  .onedayclass .contact_box ul li i {
    padding: 8px;
  }  
  .onedayclass .contact_box ul li img{
    width: 14px;
    height: 14px;
  }    
  .onedayclass .contact_box .form_box {
    padding: 32px 24px;
  }
  .onedayclass .contact_box .form_box .btn {
    width: 100%;
  }   
  
  .artlog_view #sub_visual {
    height: 160px;
  }
  .artlog_view #sub_visual .location_box h2 {
    font-size: 2em;
  }
  .board_view .board_view_head .bv_title {
      padding: 20px 20px;
  }  
  .artlog_view .board_view .board_view_head .bv_title strong {
    font-size: 20px;
  }
  .artlog_view .board_view .board_view_head .bv_title .bv_info {
    font-size: 12px;
    gap: 8px;
  }  
  .artlog_view .ico-txt {
    gap: 4px;
}
  .artlog_view .board_view .board_view_head .bv_title .bv_info li.last {
      gap: 8px;
  }  
  .artlog_view .board_view .board_view_head .bv_title > div .btn_box img{
    width: 20px;
    height: 20px;
  }
}
@media screen and (max-width: 500px) {
  /* 메인 */
  #main_container > section > article .main_title h2 {
    font-size: 2.5em;
  }
  #main_container > section > article .main_title .bar {
    width: 52px;
    height: 4px;
    margin: 20px 0;
  }
  #main_container > section > article .main_title p {
    padding-right: 20px;
  }

  .service_cont .txt_box p {
    width: 100%;
  }
  #main_container .main_banner {
    padding: 40px 0;
    text-align: center;
  }

  /* 서브 */
  .txt_box_inner > div .sign{
    font-size: 1.5em;
  }
  .sub_menu > ul {
    flex-wrap: wrap;
  }
  .sub_menu > ul > li {
    margin-bottom: 8px;
    margin-right: 8px;
  }
  .sub_menu > ul > li a {
    font-size: 16px;
    padding: 12px 20px;
    letter-spacing: -1px;
  }
  .about_top .txt_box > p {
    margin-bottom: 12px;
  }

  .org_tree .team::after,
  .org_tree .team>li::before{
    display: none;
  }
  .org_tree .team::before {
    top: -20px;
    height: 20px;
    background: #776555;    
  }  
  .org_tree .head{
    margin-bottom: 20px;
  }
  .org_tree .head strong {
    font-size: 24px;
  }  
  .org_tree .head span {
    font-size: 20px;
  }
  .org_tree .team {
    justify-content: space-between;
    flex-direction: column;
  }
  .org_tree .team>li {
    width: 100%;
    margin-bottom: 20px;    
  }  
  .org_tree .team .item_list {
    padding: 20px 24px;
  }  
  .org_tree .team .category strong {
    font-size: 18px;
  }
  .org_tree .team .category span{
    font-size: 14px;
  }
  .org_tree .team .item_list > li:not(:last-child) {
    margin-bottom: 32px;
  }  
  .org_tree .team .title strong {
    font-size: 17px;
  }

  .certification ul li {
    width: 100%;
  }
  .certification ul li .img_box {
    width: 100%;
    padding: 4px;
  }
  .certification ul li .img_box img {
    height: auto;
  }

  .bsn_content .sub_title_box h3 {
    font-size: 28px;
    width: 70%;
  }
  .text_imgbox_area_wrap .text_box b {
    font-size: 18px;
  }
  .text_imgbox_area_wrap .text_box h5 {
    font-size: 20px;
    margin-bottom: 8px;
  }
  .text_imgbox_area .img_box {
    height: 0;
    padding-top: 100%;
    position: relative;
  }
  .text_imgbox_area .img_box img {
    position: absolute;
    top: 0;
    right: 0;
  }

  .artist_view .about_artist .txt_box .name {
    margin-bottom: 0;
  }
  #sub_container.artist_view  .sub_content {
    padding-top: 40px;
  }
  .artist_view .sub_title {
    margin-bottom: 20px;
  }
  .artist_view .info_list_wrap {
    display: none;
  }
  .text_imgbox_area h5 {
    margin-top: 8px;
    font-size: 15px;
    letter-spacing: 0px;
  }
  .gallery_list .artist {
    gap: 24px 8px;
  }
  .gallery_list > .artist > li .desc {
    padding: 72px 4px 20px;
  }
  .rental_content .tab_content .dl_info_box dl {
    align-items: flex-start;
  }
  .rental_content .tab_content .dl_info_box dl dt {
    flex: 0 0 100px;
    margin-right: 0;
  }
  .rental_content .tab_content .dl_info_box dl dd{
    flex: 1;
  }

  .sub07 .gallery_list > .art {
    padding: 0;
  }
  .sub07 .gallery_list .art > li {
    width: calc((100% - 8px * 4) / 5);
  }
  .exhibition_modal .modal-dialog {
    width: 96%;
    height: 92vh;
  }
  .exhibition-gallery .exhibition-gallery-slide {
    height: 360px;
    height: calc(92vh - 64px - 80px - 20px - 60px);
  }
  .exhibition-gallery .exhibition-gallery-thumbs {
    height: 80px;
  }
  .exhibition-gallery .swiper-button-next, .exhibition-gallery .swiper-button-prev {
    top: calc(100% - 40px);
  }
  .exhibition-gallery .swiper-button-prev {
    left: -16px;
  }
  .exhibition-gallery .swiper-button-next{
    right: -16px;
  }  


  .sub07_list .gallery_list .event > li {
    width: 100%;
  }

}

.root_daum_roughmap .wrap_btn_zoom {
  z-index: 1;
}