button{padding:0;}


.accessWrap{max-width: 1440px; margin: 0 auto;}
.accessWrap .accessHeader{ margin: 50px auto 60px; font-size:40px;}
.accessWrap .accessHeader p{font-size: 20px; line-height: 30px;}
.accessWrap .accessTapWrap button{cursor: pointer;}
.accessTapWrap .shortcutMenu{font-size: 12px; color: #777777; padding-bottom: 10px;;}
.accessTapWrap .shortcutMenu span{position: relative; color:white; background-color: #777777; border-radius: 50%; width:21px; height: 21px; display: inline-block; text-align: center;line-height: 22px; margin-right:5px;}
.accessTapWrap .shortcutMenu span:after{position: absolute;
    left: 6px;
    top: 8px;
    content: '';
    width: 7px; /* 사이즈 */
    height: 7px; /* 사이즈 */
    border-top: 1px solid white; /* 선 두께 */
    border-right: 1px solid white; /* 선 두께 */
    transform: rotate(135deg); /* 각도 */
}

.accessContentWrap .accessTab1, .accessContentWrap .accessTab2, .accessContentWrap .accessTab3{display: none;}
.accessContentWrap .on{display: block;}


.accessTapWrap button{width:340px; border:0; background-color: transparent; position: relative; margin:0 50px 0 0;}
.accessTapWrap button > div{ background-color: #dadada; margin:20px 0; height:10px}
.accessTapWrap button p{font-size: 24px; font-weight: bold; text-align: start; word-break:keep-all}
.accessTapWrap button p:last-child{ padding-bottom: 16px;}
.accessTapWrap button p > span{ font-size: 12px;}

.accessTapWrap button.on > div{ height:15px; background-color: #1b0000;}

.accessContentWrap{padding-top:50px;}
.accessContentWrap > div{width:100%; display: flex; flex-direction: column;}
.accessContentWrap .accessTabMain{width:100%; position: relative; display: flex;  border-bottom:1px solid #777777}
.accessContentWrap .accessTabMain .sideSticky .snb li h3 a{color: black;}
.accessContentWrap .sideSticky{margin-right: 20px; width:300px; position:sticky; height:100%;}
.accessContentWrap .sideSticky .snb li{padding-bottom: 25px;}
.accessContentWrap .sideSticky .snb li h3{display: inline-block; position: relative; font-size: 18px; cursor: pointer;}
.accessContentWrap .sideSticky .snb li h3.on:after{position: absolute; content: ""; top:calc( 100% + 5px); left:0; width:100%; background-color: #777777; height:3px;}

.accessTab1, .accessTab2, .accessTab3{display: flex;}

.accessContentWrap > div .aTapContent{display: flex; flex:1 1; flex-direction: column; padding-bottom: 50px;}

/* tab1 */
.accessTab1 .aTapContent > div{ position: relative; margin-bottom:50px; border-bottom: 1px solid #777777;}
.accessTab1 .aTapContent > div:last-child{padding-bottom:0; border-bottom: 0;}
.accessTab1 .aTapContent > div strong{font-size: 20px; padding-bottom:30px; display: inline-block;}
.accessTab1 .aTapContent > div span{font-size: 16px; font-weight: bold;}
.accessTab1 .aTapContent > div > p {padding-bottom:20px; margin-left: 10px; line-height: 2;}
.accessTab1 .aTapContent > div > p:last-child {padding-bottom:50px; }
.accessTab1 .aTapContent > div > p em{font-style: normal; margin-left:10px;}

.accessTab1 .aTap1_guide .aTap1_position { position: absolute; top: -200px; left: 0; }

/* 탭하단 수정날짜 */
.accessContentWrap > div .aTapFooter{width:100%; display: flex;}
.accessContentWrap > div .aTapFooter button{display: inline-block; margin:10px 0px; background-color: transparent; border:0; border-bottom: 1px solid blue; color:blue;
font-size: 24px; cursor: pointer;}
.accessContentWrap > div .aTapFooter p {flex:1 1; padding:10px; font-size: 12px; text-align: end;}

/* tab2 */
.accessTab2 .accessTabMain{display: flex; flex-direction: column; padding-bottom: 50px;;}
.accessTab2 .aTap2_map .aTap2_map_floor{font-size: 28px; font-weight: bold; padding-bottom: 20px;}
.accessTab2 .aTap2_map  { padding-top:35px; width:100%;}
.accessTab2 .aTap2_map .aTap2_map_img{position: relative; width:100%; height: 0; padding-bottom: 66.666667%; overflow: hidden;}
.accessTab2 .aTap2_map .aTap2_map_img img{position: absolute; top:0; left:0; width:100%; height: 100%; object-fit:scale-down;}
.accessTab2 .aTap2_map .aTap2_map_desc{ padding-top:30px;}
.accessTab2 .aTap2_map .aTap2_map_desc > div{display:flex;}
.accessTab2 .aTap2_map .aTap2_map_desc > :last-child{padding-bottom: 0;}
.accessTab2 .aTap2_map .aTap2_map_desc > div .aTap2_map_category{display: inline-block; min-width:120px; background-color: black; color: white; line-height: 30px; font-size:20px; font-weight: bold; text-align: center; height:30px; margin-right: 20px;}
.accessTab2 .aTap2_map .aTap2_map_desc :first-child .aTap2_map_category{background-color: #4939b2;}
.accessTab2 .aTap2_map .aTap2_map_image { position: relative; }
.accessTab2 .aTap2_map .aTap2_map_image .aTap2_map_img_zoom { border: 2px solid #000000; }
.accessTab2 .aTap2_map .aTap2_map_image .aTap2_map_img_zoom .map_buttons { display: flex!important; flex-direction: column; right: 15px; top: 15px; }

.accessTab2 .aTap2_map_desc > div  ul{display: flex; flex-wrap: wrap; width: 100%;}
.accessTab2 .aTap2_map_desc > div  ul li{display: flex; align-items: center; width:16%; padding:0 20px; }
.accessTab2 .aTap2_map_desc > div  ul li span{display: inline-block; width:30px; height:30px; margin-right:5px; }
.accessTab2 .aTap2_map_desc .conv_list{display: flex; flex-direction: column; width: 100%;}
.accessTab2 .aTap2_map_desc ul li{margin-bottom: 20px;}
/* .accessTab2 .aTap2_map_desc .conv_list ul li{margin-bottom: 20px;} */




/* tab3 */
.accessTab3 .aTapContent .aTap3_guide{display: flex; padding-bottom:30px;}
.accessTab3 .aTapContent .aTap3_guide:last-child{padding-bottom: 0px;}
.accessTab3 .aTapContent .sServiceImg {margin-right:30px; width:392px; height:280px;}
.accessTab3 .aTapContent .sServiceImg img{ width: 100%; height: 100%; object-fit: cover; object-position: center}
.accessTab3 .aTapContent .sServiceInfo{flex:1 1; margin-left:15px;}
.accessTab3 .aTapContent > div { position: relative; }

.accessTab3 .aTapContent .sServiceInfoTitle{display: flex; padding-top: 10px; font-size: 24px; font-weight: bold;}
.accessTab3 .aTapContent .sServiceInfoTitle span{display: inline-block; width:30px; height:30px; margin-right:10px;}
/* 촉지도 */
.accessTab3 .aTapContent #tap3_guide1 .sServiceInfoTitle span{background-image: url(/design/content/images/common/content/ico/accessibility_ico/icon-TactileDisplay.svg); background-repeat: no-repeat; background-size: cover; background-position: center;}

/* 촉각 전시품 */
.accessTab3 .aTapContent #tap3_guide2 .sServiceInfoTitle span{background-image: url(/design/content/images/common/content/ico/accessibility_ico/icon-TactileMaps.svg); background-repeat: no-repeat; background-size: cover; background-position: center;}

/* 점자 설명책 */
.accessTab3 .aTapContent #tap3_guide3 .sServiceInfoTitle span{background-image: url(/design/content/images/common/content/ico/accessibility_ico/icon-BrailleBook.svg); background-repeat: no-repeat; background-size: cover; background-position: center;}

/* 음성 해설*/
.accessTab3 .aTapContent #tap3_guide4 .sServiceInfoTitle span{background-image: url(/design/content/images/common/content/ico/accessibility_ico/icon-Sound.svg); background-repeat: no-repeat; background-size: cover; background-position: center;}

/* 수어 영상 */
.accessTab3 .aTapContent #tap3_guide5 .sServiceInfoTitle span{background-image: url(/design/content/images/common/content/ico/accessibility_ico/icon-SignLanguageVideos.svg); background-repeat: no-repeat; background-size: cover; background-position: center;}

/* 쉬운 정보 */
.accessTab3 .aTapContent #tap3_guide6 .sServiceInfoTitle span{background-image: url(/design/content/images/common/content/ico/accessibility_ico/icon-Easyread.svg); background-repeat: no-repeat; background-size: cover; background-position: center;}

/* 스마트키오스크 */
.accessTab3 .aTapContent #tap3_guide7 .sServiceInfoTitle span{background-image: url(/design/content/images/common/content/ico/accessibility_ico/icon-Kiosk.svg); background-repeat: no-repeat; background-size: cover; background-position: center;}


.accessTab3 .aTapContent .sServiceInfo .desc{ padding-top:10px;}
.accessTab3 .aTapContent .sServiceInfo .location{padding-top:10px;}

.accessTab3 .aTap3_guide .aTap3_position { position: absolute; top: -180px; left: 0; }


@media  (max-width: 1220px) {
    .accessTapWrap button{width:280px;}
	.accessTab2 .aTap2_map_desc > div ul li{width:20%;}
}

@media  (max-width: 644px) {
    .accessTab2 .aTap2_map_desc > div ul li{font-size: 14px;}
}
@media  (max-width: 1040px) {
    .accessTapWrap .accessTapBtn{display: flex; justify-content: space-between; align-items: start;}
    .accessTapWrap button{width:30%;}
    .accessTapWrap button::after{display: none;}
    .accessTapWrap button{margin: 0;}
}

@media  (max-width: 968px) {
	.accessWrap{ padding:0 40px;}
    .accessTab3 .aTapContent .aTap3_guide{flex-direction: column;}
    .accessTab3 .aTapContent .sServiceImg{margin-right: 0px; margin-bottom: 10px; position:relative; width:100%; height:0; padding-bottom: 71.42%; overflow: hidden;}
    .accessTab3 .aTapContent .sServiceImg img{position: absolute; top:0; left:0; width:100%; height:100%;}
	.accessTab2 .aTap2_map_desc > div ul li {width:25%;}
}

@media  (max-width: 767px) {
    .accessWrap{ padding:0 15px;}
    .accessWrap .accessHeader h2{font-size: 40px !important; }
    .accessWrap .accessHeader p { padding-top: 30px; font-size: 16px; line-height: 2;}
    .accessTapWrap button p{font-size: 20px;}

    .accessContentWrap .accessTabMain{flex-direction: column;}
    .accessContentWrap .sideSticky { margin-right: 0px; width: 100%; position: relative; height: 100%; }
    .accessContentWrap .sideSticky .snb ul{padding:20px; display:flex; justify-content: space-between; flex-wrap: wrap; background-color: #eee; border-radius: 10px;}
    .accessContentWrap .sideSticky .snb ul li{margin-right:0px; padding-bottom: 0px; padding: 20px 20px; width:30%;}
    .accessContentWrap .sideSticky .snb li h3{font-size: 16px;}

	.accessTab1 .aTap1_guide .aTap1_position { top: -35px; left: 0; }
	.accessTab3 .aTap3_guide .aTap3_position { top: -25px; left: 0; }

    .accessContentWrap > div .aTapContent{padding-top:50px;}
    .accessTab2 .aTap2_map .aTap2_map_desc > div{flex-direction: column;}
    .accessTab2 .aTap2_map .aTap2_map_desc > div > div{margin-bottom: 20px; margin-right: 0px!important;}
    .accessTab2 .aTap2_map_desc > div ul li{padding:0; width: 50%;}
    .accessTab2 .aTap2_map_desc > div ul li span{ margin-left:20px;}
    .accessTab2 .aTap2_map .aTap2_map_image .aTap2_map_img_zoom .map_buttons { right: 5px; top: 5px; }
	.accessTab2 .aTap2_map .aTap2_map_image .aTap2_map_img_zoom .map_buttons div img { width: 30px; height: 30px; }
}
@media  (max-width: 600px) {
    .accessTapWrap button > div{margin:20px 0 15px; height:8px;}
    .accessTapWrap button p{font-size: 18px; }

    .accessContentWrap .sideSticky .snb ul li{ padding: 15px 10px; width:45%;}

}
@media  (max-width: 530px) {
    .accessContentWrap{padding-top: 50px;}
    .accessContentWrap .sideSticky .snb ul{flex-direction: column; }
    .accessContentWrap .sideSticky .snb ul li{ padding: 15px 10px; max-width: 250px; margin: 0 auto; width:100%; text-align: center;}
    .accessContentWrap .sideSticky .snb li h3 {margin: 0 auto;}
    .accessTab2 .aTap2_map_desc > div ul{flex-direction: column;}

}
@media  (max-width: 480px) {
    .accessTab1 .aTapContent > div > p{margin-left: 0;}
	.accessTab2 .aTap2_map_desc > div ul li{width:100%;}

}
@media  (max-width: 360px) {
    .accessTapWrap button p{word-break:break-all; font-size: 14px;}
    .accessContentWrap .sideSticky .snb li h3 { font-size: 14px;}
    .accessContentWrap .sideSticky .snb ul li{ padding: 15px 0px;}


    .accessTab1 .aTapContent > div > p em{margin-left: 0;}
    .accessTab3 .aTapContent .sServiceInfoTitle{word-break: keep-all; font-size: 20px;}
}