@charset "utf-8";
/* CSS Document */

/*오시는 길*/
#map { position: relative; z-index: 0}
#location { background-color:#f3f3f3}
#map  .nav-tabs { border:none; margin:0 0 30px; justify-content: center}
#map .nav-tabs .nav-item { position: relative}
#map .nav-tabs .nav-link { border:none; margin:0; border-radius: 0; padding:15px 5vw; font-size: 1.2em; color:#202020; font-weight: 500;}
#map .nav-tabs .nav-link.active, #map .nav-tabs .nav-item.show .nav-link { color:var(--thm-primary)}
#map .tab-content > .tab-pane { position: relative; display: block; visibility: hidden; z-index: 0; height:0;}
#map .tab-content > .active  { visibility:visible; z-index: 1; height:auto;}
#map .nav-tabs .nav-link.active:before {
    content:'';
    width:8px; 
    height:8px;
    position: absolute;
    top:0;
    left:50%;
    margin-left: -8px;
    border-top: 8px solid  var(--thm-primary);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: none;
}


 .map {width:100%;}
 .map .innermap{ width:100%;}
.map .innermap .wrap_map { border:solid 1px #e3e3e3; border-bottom:0}
.root_daum_roughmap .wrap_map { height:600px !important}
.root_daum_roughmap .wrap_btn_zoom { z-index: 1 !important}
 .loction_info .inner_box { border-top:solid 2px #222;}
 .loction_info.infoSecond .inner_box {border-top:none}
 .loction_info .inner_box ul.boxUl  {}
 .loction_info .inner_box ul.boxUl > li { border-bottom:solid 1px #e5e5e5; padding:35px 0; display: flex; align-items: center}
 .loction_info.infoSecond .inner_box ul.boxUl > li {border:none; padding:0}
 .loction_info .inner_box ul.boxUl > li  a { color:#808186}
 .loction_info .inner_box ul.boxUl li > h2 { font-size:1em; width:25%; color:#222;  line-height: normal; padding-left:5%; box-sizing: border-box; font-weight: 600}
 .loction_info .inner_box ul.boxUl li > .iconWrap { width:25%;}
 .loction_info .inner_box ul.boxUl li > .iconWrap .loc_icon { width:115px; height:115px; margin:0 auto; display: block; background-size: contain}
 .loction_info .inner_box ul.boxUl li > .iconWrap .loc_icon.icon01 { background-image: url("../images/location/loc_icon01.html")}
 .loction_info .inner_box ul.boxUl li > .iconWrap .loc_icon.icon02 { background-image: url("../images/location/loc_icon02.html")}
 .loction_info .inner_box ul.boxUl li > .iconWrap .loc_icon.icon03 { background-image: url("../images/location/loc_icon03.html")}
 .loction_info .inner_box ul.boxUl li > .iconWrap .loc_icon.icon04 { background-image: url("../images/location/loc_icon04.html")}
 .loction_info .inner_box ul.boxUl li > .iconWrap .loc_icon.icon05 { background-image: url("../images/location/loc_icon05.html")}
 .loction_info .inner_box ul.boxUl li > p { font-size:1em; display:inline-block; margin:0; line-height:1}
 .loction_info .inner_box ul.boxUl li > p.block { display: block !important; margin-top:5px !important;}
 .loction_info .inner_box ul.boxUl li > .rightCon { width:75%;  padding:70px 5vw; border-bottom:dotted 2px #ccc;}
 .loction_info .inner_box ul.boxUl li > .rightCon h3 { font-size:1.4em; color:#222;  line-height: normal; font-weight: 600}
 .loction_info .inner_box ul.boxUl li > .rightCon ul {}
 .loction_info .inner_box ul.boxUl li > .rightCon ul li{ line-height: normal; margin:0 0 10px; }
 .loction_info .inner_box ul.boxUl li > .rightCon ul li:last-child{ margin:0}
 .loction_info .inner_box ul.boxUl li > .rightCon ul li h4{ font-size:1.05em;  display:inline-block; line-height: normal; margin-right:15px; font-weight: 500}
 .loction_info .inner_box ul.boxUl li > .rightCon ul li p{ font-size:1em; display:inline-block; margin:0; line-height: 1.5}
 .loction_info .inner_box ul.boxUl li > .rightCon ul li p .busNum01 {  background: #386de8; color:#fff; font-size:.85em; padding:2px 15px; border-radius: 50px; margin:0 5px; vertical-align:baseline; display: inline-block; transform: scale(.9)}
 .loction_info .inner_box ul.boxUl li > .rightCon ul li p .busNum02 {  background: #3cc344; color:#fff; font-size:.85em; padding:2px 15px; border-radius: 50px; margin:0 5px; vertical-align:baseline; display: inline-block; transform: scale(.9)}
 .loction_info .inner_box ul.boxUl li > .rightCon ul li p .busNum03 {  background: #fb5852; color:#fff; font-size:.85em; padding:2px 15px; border-radius: 50px; margin:0 5px; vertical-align:baseline; display: inline-block; transform: scale(.9)}


/*가로 1024 이상 가로모드*/
@media  (min-width: 992px) and  (max-width: 1571px) and (orientation: landscape) {
   .loction_info.mt-100 { margin-top:50px !important}
    .loction_info.infoSecond .inner_box {  margin-top:-25px;}
     .loction_info .inner_box ul.boxUl > li { position: relative}
     .loction_info .inner_box ul.boxUl li > .iconWrap { width:auto; position: absolute; left:10px; top:32px}
    .loction_info .inner_box ul.boxUl li > .iconWrap .loc_icon { width:55px; height:55px}
    .loction_info .inner_box ul.boxUl li > .rightCon {  width:100%; padding:40px 20px}
     .loction_info .inner_box ul.boxUl li > .rightCon h3 {width:auto; padding:0 0 10px 70px; }
}


@media (max-width: 991px) {
    .loction_info.mt-100 { margin-top:20px !important}
    .root_daum_roughmap .wrap_map { height:400px !important}
    .loction_info .inner_box ul.boxUl > li { padding:20px; align-items: baseline; flex-direction: column; position: relative}
    .loction_info .inner_box ul.boxUl li > h2 {font-size:.9em; width:auto; padding:0; }
    .loction_info .inner_box ul.boxUl li > p {font-size:.9em; line-height: 1.4; margin-top:10px}
    .loction_info .inner_box ul.boxUl li > .iconWrap { width:auto; position: absolute; left:10px; top:35px}
    .loction_info .inner_box ul.boxUl li > .iconWrap .loc_icon { width:40px; height:40px;}
    .loction_info .inner_box ul.boxUl li > .rightCon { width:100%; padding:40px 10px 30px;}
    .loction_info .inner_box ul.boxUl li > .rightCon h3 {font-size:1.1em; width:auto; padding:0 0 20px 60px; }
    .loction_info .inner_box ul.boxUl li > .rightCon ul li h4 { font-size:.9em; margin:0 0 10px}
    .loction_info .inner_box ul.boxUl li > .rightCon ul li p { font-size:.9em; line-height: 1.5;}
    .loction_info .inner_box ul.boxUl li > .rightCon ul li p .busNum01, .loction_info .inner_box ul.boxUl li > .rightCon ul li p .busNum02, .loction_info .inner_box ul.boxUl li > .rightCon ul li p .busNum03 { margin:0; transform:scale(.8)}
}


@media (max-width: 767px) {
    #map  .nav-tabs {  margin:0 0 15px;}
    #map .nav-tabs .nav-link {padding:10px 10vw; font-size: .9em;}
    #map .nav-tabs .nav-link.active, #map .nav-tabs .nav-item.show .nav-link { color:var(--thm-primary)}
    #map .nav-tabs .nav-link.active:before {
        content:'';
        width:8px; 
        height:8px;
        position: absolute;
        top:0;
        left:50%;
        margin-left: -8px;
        border-top: 8px solid  var(--thm-primary);
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: none;
        transform: scale(.8)
    }
    
    .loction_info.mt-100 { margin-top:20px !important}
    .root_daum_roughmap .wrap_map { height:300px !important}
    .loction_info .inner_box ul.boxUl > li { padding:20px; align-items: baseline; flex-direction: column; position: relative}
    .loction_info .inner_box ul.boxUl li > h2 {font-size:.85em; width:auto; padding:0; }
    .loction_info .inner_box ul.boxUl li > p {font-size:.85em; line-height: 1.4; margin-top:10px}
    .loction_info .inner_box ul.boxUl li > .iconWrap { width:auto; position: absolute; left:10px; top:35px}
    .loction_info .inner_box ul.boxUl li > .iconWrap .loc_icon { width:40px; height:40px;}
    .loction_info .inner_box ul.boxUl li > .rightCon { width:100%; padding:40px 10px 30px;}
    .loction_info .inner_box ul.boxUl li > .rightCon h3 {font-size:1.1em; width:auto; padding:0 0 20px 60px; }
    .loction_info .inner_box ul.boxUl li > .rightCon ul li h4 { font-size:.9em; margin:0 0 10px}
    .loction_info .inner_box ul.boxUl li > .rightCon ul li p { font-size:.9em; line-height: 1.5;}
    .loction_info .inner_box ul.boxUl li > .rightCon ul li p .busNum01, .loction_info .inner_box ul.boxUl li > .rightCon ul li p .busNum02, .loction_info .inner_box ul.boxUl li > .rightCon ul li p .busNum03 { margin:0; transform:scale(.8)}
}