@charset "utf-8";

@media screen and (max-width: 768px) {

    .museum-img .museum-pc-img {display: none;}
    .museum-img .museum-mo-img {display: block; max-width: 100%;}

    /* sect_gjacHall{ */
    .sect_gjacHall{
        padding: 20px 0;
    }
    .hall_topImg{
        font-size: 0;      
        width: 100%;
    }
    .hall_cont_box {
        margin-top: 25px;
        border: 1px solid #DDDDDD;
        padding: 20px;
    }
    .hall_cont_box .bnsInfo_title{
        padding-bottom: 5px;
        padding-left: 25px;
        font-size: 18px;
        color: #232323;
        font-weight: bold;
        background: url(/images/user/gjfac/ico_list.svg) 0 5px no-repeat;
        background-size: 15px 15px;
    }

    /* slide{ */
    .hall_cont_slide{
        position: relative;
        margin-top: 20px;
    }


    .hall_cont_slide_{
        max-width: 350px;
        width: 100%;
        margin: 0 auto;
        text-align: center;
        position: relative;
    }
    .hall_slide{
        max-width: 350px;
        width: 100%;
        margin: 0 auto;
    }
    .hall_slide .slide_img{
        margin: 0 auto;
        width: 200px;
        height: 150px;
    }
    /* 최대 이미지 11개일때  */
    .swiper-container.sub_slide.more_slide{
        max-width: 1070px;
        width: 100%;
        margin: 20px auto;
    }
    .swiper-container.sub_slide{
        max-width: 240px;
        width: 100%;
        margin: 20px auto;
    }
    .swiper-container.sub_slide.slide_3{
        max-width: 240px;
        width: 100%;
        margin: 20px auto;
    }
    .swiper-container.sub_slide.slide_3.mo_slide_img{
        max-width: 290px;
        width: 100%;
        margin: 20px auto;
    }
    .swiper-container.sub_slide.slide_2{
        max-width: 240px;
    }
    .thumb_img_1 {
        background-size: auto 100%;
        text-align: center;
        margin: 0 auto;
        height: 40px;
        width: 40px;
        background-repeat: no-repeat;
        background-position: center;
        box-sizing: border-box;
    }
    .title_subTxt {
        padding-left: 0px;
        font-size: 14px;
        font-weight: 400;
        color: #888888;
    }

    .sub_slide .swiper-slide::before{
    	
        /* content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100%;
        z-index: 1;
        background-color: rgba(0,0,0,0.45);
        border: 1px solid #DDDDDD; */
    }
    .sub_slide .swiper-slide-thumb-active{
        opacity: 1;
        
    }
    .sub_slide .swiper-slide-thumb-active::before{
        border: 1px solid #D04E34;
        background-color: transparent;
    }

    .swiper-controller{position: absolute;top: 75px;max-width: 100%;width: 100%;margin: 0 auto;}
    .swiper-controller .swiper-button-prev, .swiper-controller .swiper-button-next{
        background-image: none;
        border: 1px solid #DDDDDD;
        background-color: #fff;
        width: 35px;
        height: 35px;
        font-size: 0;
        position: absolute;
    }
    .swiper-controller .swiper-button-prev{left: 0;}
    .swiper-controller .swiper-button-next{right: 0;}
    .swiper-controller .swiper-button-prev::before, .swiper-controller .swiper-button-prev::after{
        content: '';
        position: absolute;
        top: 12px;
        left: 12px;
        background: #959595;
        width: 10px;
        height: 2px;
    }
    .swiper-controller .swiper-button-prev::before{
        margin-top: 0px;
        transform: rotate(-45deg);
    }
    .swiper-controller .swiper-button-prev::after{
        margin-top: 7px;
        transform: rotate(45deg);
    }
    .swiper-controller .swiper-button-next::before, .swiper-controller .swiper-button-next::after{
        content: '';
        position: absolute;
        top: 12px;
        left: 12px;
        background: #959595;
        width: 10px;
        height: 2px;
    }
    .swiper-controller .swiper-button-next::before{
        margin-top: 0px;
        transform: rotate(45deg);
    }
    .swiper-controller .swiper-button-next::after{
        margin-top: 7px;
        transform: rotate(-45deg);
    }
    .thumb_img_1.more_img{
        position: absolute;
        bottom: 0;
        right: 0;
        width: 40px;
    }
    .thumb_img_1.more_img::before{
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #232323;
        z-index: 1;
    }

    .more_txt {
        font-size: 12px;
        font-weight: 700;
        color: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
    }
    .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* }slide */


    /*  */
    .hall_cont_down {
        padding-top: 0px;
    }
    .cont_dw_ {
        position: relative;
        border: 1px solid #e4e4e4;
        background-color: #F7F7F7;
        padding: 20px;
    }
    .cont_dw_ .down_txt {
        font-size: 14px;
        font-weight: 400;
        color: #888888;
    }
    .cont_dw_ .dw_btn {
        position: relative;
        right: auto;
        top: auto;
        width: 100%;
        margin-top: 15px;
    }
    .cont_dw_ .dw_btn>.sfbtn{
        width: 100%;
    }
    .cont_dw_ .dw_btn>.sfbtn .sfbtn_wr {
        background-color: #232323;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
    }
    .cont_dw_ .dw_btn>.sfbtn.ico_down .sfbtn_wr i{
        background-image: url(/images/user/gjfac/ico_down.svg);
        background-repeat: no-repeat;
        width: 12px;
        height: 13px;
        margin: 5px;
    }
    .hall_dw_list .cont_dw_ .down_txt{text-align: center; font-size: 18px; font-weight: 400;}
    .hall_dw_list:not(:last-child){
        margin-bottom: 20px;
    }
    .hall_dw_list {
        border: 1px solid #e4e4e4;
        padding: 25px 20px;
    }
    .hall_cont_title{
        font-size: 18px;
        font-weight: 700;
        color: #232323;
        margin-bottom: 10px;
    }
    .hall_ul {
        font-size: 0;
        margin: -5px 0;
    }
    
    .hall_li {
        display: inline-block;
        vertical-align: top;
        width: 100%;
        padding: 5px 0;
    }
    .hall_prev_btn{text-align: right;}
    .hall_prev_btn .sfbtn .sfbtn_wr{font-size: 16px;}

    /* 알천미술관 */
    .sect_gjacMuseum{
        padding: 20px 0;
    }
    .bnsInfo_subTxt {
        font-size: 21px;
        font-weight: 400;
        color: #888888;
    }
    .sect_gjacMuseum .hall_cont_box{
        margin-top: 0;
        
    }
    .sect_gjacMuseum .hall_cont_box{
        border: 0;
        padding: 0;
    }
    .sect_gjacMuseum .hall_cont_box:not(:last-child){
        margin-bottom: 20px;
    }
    .museum_cont_slide{
        position: relative;
    }
    .museum_slide .slide_img {
        height: 235px;
    }
    .museum_slide {
        max-width: 1020px;
        width: 100%;
        margin: 0 auto;
    }
    .museum_slide>ul>li {
        width: 315px ;
    }
    .museum_cont_slide .swiper-controller {
        top: 50%;
    }
    .museum_slide .swiper-controller .swiper-button-prev, .museum_slide .swiper-controller .swiper-button-next{display: none;}
    /* 기타시설 */
    .sect_gjacfacilities {
       padding: 20px 0;
    }
    .hall_cont .facil_ul {
        font-size: 0;
        margin: -5px 0;
    }
    .sect_gjacfacilities .hall_cont_box{
        margin-top: 0;
    }
    .hall_cont .facil_li {
        display: inline-block;
        vertical-align: top;
        width: 100%;
        padding: 5px 0;
    }
    .hall_cont_box .hall_box_img{
        width: 100%;
        height: 170px;
    }
    .hall_cont_box .hall_box_img .img_wrap>img{
        width: 100%;
        height: 100%;
        opacity: 1;
    }
    /* }sect_gjacHall */
    
    
    .facil_wrap {
	    margin-top: 10px;
	}
    .facil_wrap_table {
   		overflow: auto;
    }
    .facil_wrap table {
	    width: 990px;
	    max-width: 990px;
	    font-size: 13px;
	}
	.facil_wrap table td {
	    height: 40px;
	    padding: 5px;
	}
	
    .gjacFacility-tit{font-size: 14px; line-height: 1.5; padding-bottom: 15px;}

    .gjacFacility_img{padding: 10px 10px 35px;}
    .gjacFacility_img .view-btn{
        width: 200px;
        height: 40px;
        bottom: -15px;
    }
    .gjacFacility_img .view-btn span {
        font-size: 16px;
    }
    
}

@media screen and (max-width: 768px) {
    .scale button {
        padding: 25px;
    }
    .scale button:before {
        left: 25px;
        right: 25px;
    }
    .scale button:after {
        right: 25px;
    }
    .scale .txt {
        padding-left: 25px;
    }
    .scale .txt.txt2 {
        padding-left: 0;
    }
    .scale .grid h3 {margin-bottom: 15px;}
    .scale button .floor {
        width: 50px;
        height: 50px;
        font-size: 14px;
    }
    .scale button .floor strong {
        font-size: 28px;
    }
    .scale .grid .inr {
        display: block;
        padding: 10px;
    }
    .scale button .floor.long {
        width: 220px;
    }
    .scale button .floor.long strong {
        font-size: 24px;
    }
    .scale .grid .last {font-size: 24px;}
    .scale .grid .last br {display: none;}
    .scale button .txt span {
        margin: 0 10px 0 0px;
        padding-right: 10px;
        font-size: 14px;
    }
    .scale button.on .ico.n1 {background-size: 30px 30px;}
    .scale button.on .ico.n2 {background-size: 30px 30px;}
    .scale button.on .ico.n3 {background-size: 20px 30px;}
    .scale button.on .ico.n4 {background-size: 30px 30px;}
    .scale .ico {width: 40px; height: 40px;}
    .scale .ico.n1 {background-size: 30px 30px;}
    .scale .ico.n2 {background-size: 30px 30px;}
    .scale .ico.n3 {background-size: 20px 30px;}
    .scale .ico.n4 {background-size: 30px 30px;}
    .scale button .right .ico:before {width: 40px; height: 40px;}
    .scale .grid .ico_box .ico {width: 40px; height: 40px; margin-left: 0;}

    .scale button .txt .no-line-pc:before {content: '';}
    .scale .grid .img {width: 100%; height: 100%; margin-bottom: 20px; margin-top: 0 !important;}
    .scale .grid .img img {max-height: 300px;}
    .scale .grid h3 {font-size: 28px;}
    .scale .grid .lst {display: flex; flex-wrap: wrap;}
    .scale .grid .lst li {width: 50%;}
    .scale .grid .lst li + li {margin-top: 0;}
    .scale .grid .lst li:nth-child(n+3) {margin-top: 15px;}
    .scale .grid .lst li .lst-num {width: 25px; height: 25px; font-size: 14px;}
    .scale .grid .lst li span {font-size: 14px;}
    .scale .grid .txt-wrap {display: flex; justify-content: space-between; align-items: center;}
    .scale .grid .ico_box {display: none;}
    .scale .grid .ico_box.none {display: flex;}
    .scale .grid .ico_box.none span + span {margin-left: 5px;}
}


@media screen and (max-width:700px) {
    .scale button{padding: 20px 15px;display: block;text-align: left;}
    .scale button .txt {padding: 0;width: 100%;margin: 15px 0 20px;}
    .scale button .right {width: 100%;text-align: left;padding: 0;}
    .scale button .right .ico {margin: 0 7px 0 0;}
    .scale button:after, .scale button.on:after {right: 15px;width: 30px;height: 30px;background-size: 30px;top: auto;transform: inherit;bottom:20px;}
    .scale button.on .floor{background:#fff;color:#A34E00;}

}

@media screen and (max-width:500px) {
    .scale button {
        padding-left: 15px;
    }
    .scale .txt {
        padding: 0;
    }
    .scale button .floor {
        width: 40px;
        height: 40px;
        font-size: 12px;
    }
    .scale button .floor strong {
        font-size: 24px;
    }
    .scale .grid .inr {
        display: block;
        padding: 10px;
    }
    .scale button .floor.long {
        width: 144px;
    }
    .scale button .floor.long strong {
        font-size: 16px;
    }
    .scale button .txt span {
        margin: 0 6px 0 0px;
        padding-right: 6px;
        font-size: 14px;
    }
    .scale button .txt .no-line:before {display: none;}

    .scale button.on .ico.n1 {background-size: 20px 20px;}
    .scale button.on .ico.n2 {background-size: 20px 20px;}
    .scale button.on .ico.n3 {background-size: 10px 20px;}
    .scale button.on .ico.n4 {background-size: 20px 20px;}
    .scale .ico {width: 30px; height: 30px;}
    .scale .ico.n1 {background-size: 20px 20px;}
    .scale .ico.n2 {background-size: 20px 20px;}
    .scale .ico.n3 {background-size: 10px 20px;}
    .scale .ico.n4 {background-size: 20px 20px;}
    .scale button .right .ico:before {
        width: 30px;
        height: 30px;
    }
    .scale .grid .ico_box .ico {
        width: 30px;
        height: 30px;
    }
    .scale .grid .ico_box .ico {padding-left: 0;}
}