
.location-wrap.grayBg{box-sizing:border-box;}
.location-wrap.grayBg::before{content: ''; display: block; width: 100%; height: 36px; background: var(--white); position: absolute; left: 0; top:0;}
.location-wrap .location-tab{box-sizing:border-box; width:100%; margin:0 auto 0; position: sticky; top:0; transition: all .4s; z-index: var(--z-sticky);}

.header.fixed + #sitemap + #moMenu + .container .location-wrap .location-tab{top:100px;}
.location-wrap .location-tab__list{display:flex; flex-wrap:nowrap; align-items:stretch; box-sizing:border-box; box-shadow: var(--shadow); background: var(--white);}
.location-wrap .location-tab__item{flex:1 1 0; min-width:0; box-sizing:border-box;}
.location-wrap .location-tab__item+.location-tab__item{border-left:solid 1px var(--border);}
.location-wrap .location-tab__link{display:flex; align-items:center; justify-content:center; box-sizing:border-box; width:100%; padding:20px 8px; min-height:72px; text-align:center; text-decoration:none; font-family:var(--Korail); font-weight:400; color:var(--basic); letter-spacing:-0.72px; line-height:177%; transition:background 0.35s cubic-bezier(0.33, 1, 0.68, 1), color 0.35s cubic-bezier(0.33, 1, 0.68, 1);}
.location-wrap .location-tab__link.is-active{background-color:var(--main); color:var(--white);}
.location-wrap .location-tab__link:focus-visible{z-index:1; outline:solid 2px var(--main); outline-offset:-2px;}
.location-in .list{scroll-margin-top:140px; display:flex; flex-wrap:nowrap; align-items:stretch; justify-content:space-between; box-sizing:border-box; width:100%; gap:80px; padding-top:150px;}
.location-in .list .txt-area{display:flex; flex-direction:column; justify-content: center; flex-shrink:0; width:375px; box-sizing:border-box;}
.location-in .list .txt-area h3{margin:0; font-family:var(--Korail); font-weight:700; color:var(--black);}
.location-in .list .txt-area .location-address{margin:20px 0 0; padding-top:30px; border-top:solid 1px var(--border); box-sizing:border-box; font-family:var(--kor); font-weight:400; font-size:1.111rem; line-height:170%; letter-spacing:var(--letter-spacing-default); color:var(--black);}
.location-in .list .txt-area .location--info{display:flex; flex-direction:column; gap:0; box-sizing:border-box; width:100%; margin:15px 0 0;}
.location-in .list .txt-area .location--info li{display:flex; align-items:center; gap:5px; box-sizing:border-box; font-family:var(--kor); font-weight:400; font-size:1.111rem; line-height:170%; color:var(--basic);}
.location-in .list .txt-area .location--info li::before{flex-shrink:0; display:flex; align-items:center; justify-content:center; width:20px; height:20px; box-sizing:border-box; font-family:var(--icon); font-size:20px; font-weight:300; line-height:1; color:var(--basic); font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24;}
.location-in .list .txt-area .location--info li.tel::before{content:'\e0b0';}
.location-in .list .txt-area .location--info li.fax::before{content:'\e8ad';}
.location-in .list .txt-area .location-btn{display:flex; flex-wrap:wrap; align-items:center; gap:4px; box-sizing:border-box; margin:40px 0 0;}
.location-in .list .txt-area .location-btn dd{margin:0;}
.location-in .list .txt-area .location-btn a{position:relative; display:block; width:60px; height:60px; box-sizing:border-box; overflow:hidden; border-radius:500px; text-decoration:none; background-size:contain; background-position:center; background-repeat:no-repeat; transition:transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease, border-color 0.25s ease;}
.location-in .list .txt-area .location-btn .naver_btn a{background-color:#10d265; background-image:url('/twcenter/bbs/skin/locationBasic/image/naver.png');}
.location-in .list .txt-area .location-btn .kakao_btn a{background-color:#fae100; background-image:url('/twcenter/bbs/skin/locationBasic/image/kakao.png');}
.location-in .list .txt-area .location-btn .google_btn a{background-color:var(--white); border:solid 1px var(--border); background-image:url('/twcenter/bbs/skin/locationBasic/image/google.png');}
.location-in .list .txt-area .location-btn .naver_btn a:hover{transform:scale(1.06); box-shadow:0 8px 22px rgba(16,210,101,0.35); filter:brightness(0.92);}
.location-in .list .txt-area .location-btn .kakao_btn a:hover{transform:scale(1.06); box-shadow:0 8px 22px rgba(250,225,0,0.5); filter:brightness(0.96);}
.location-in .list .txt-area .location-btn .google_btn a:hover{transform:scale(1.06); border-color:var(--black); box-shadow:0 8px 22px rgba(0,0,0,0.1);}
.location-in .list .txt-area .location-btn a:focus-visible{outline:solid 2px var(--main); outline-offset:4px;}

.location-in .list .map-area{position:relative; width:calc(100% - 455px); box-sizing:border-box; overflow:hidden; min-height:550px;}
.location-in .list .map-area .map-area__shield{position:absolute; left:0; top:0; width:100%; height:100%; z-index:5; box-sizing:border-box; cursor:pointer;}

.location-in .wrap_map {height:550px !important;}
.location-in .cont{display: none !important;}
.location-in .wrap_controllers{display: none !important;}
.location-in .map_border{display: none !important;}
.location-in .google_map{width: 100%; height: 100%;}

/*******************************************************************************
 @media ~1500px
*******************************************************************************/
@media all and (max-width:1500px){





}

/*******************************************************************************
 @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){


    .location-in .list{gap:50px}
    .location-in .list .txt-area{width:35%;}
    
    .location-in .list .map-area{width:calc(65% - 50px);}



}

/*******************************************************************************
    @media  ~980px              
*******************************************************************************/
@media all and (max-width:980px){

.location-wrap.grayBg::before{height: 30px; }


.location-wrap .location-tab{overflow:hidden;}
.location-wrap .location-tab__list{display:flex; flex-wrap:nowrap; align-items:stretch; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; touch-action:pan-x; scrollbar-width:none; -ms-overflow-style:none;}
.location-wrap .location-tab__list::-webkit-scrollbar{width:0; height:0; display:none;}
.location-wrap .location-tab__item{flex:0 0 auto; min-width:130px;}
.location-wrap .location-tab__link{min-height:60px; padding:15px 10px;}

.header.fixed + #sitemap + #moMenu + .container .location-wrap .location-tab{top:86px;}



.location-in .list{scroll-margin-top:100px; gap:30px; padding-top:100px;}
.location-in .list .txt-area{width:35%;}
.location-in .list .txt-area .location-address{margin:15px 0 0; padding-top:20px;}
.location-in .list .txt-area .location--info{margin:10px 0 0;}
.location-in .list .txt-area .location-btn{margin:30px 0 0;}
.location-in .list .txt-area .location-btn a{width:50px; height:50px;}

.location-in .list .map-area{width:calc(65% - 30px); min-height:400px;}
.location-in .wrap_map {height:400px !important;}



}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){
    .location-wrap.grayBg::before{height: 25px; }
    
    .location-wrap .location-tab__item{min-width:100px;}
.location-wrap .location-tab__link{min-height:50px; padding:10px 10px;}

.header.fixed + #sitemap + #moMenu + .container .location-wrap .location-tab{top:62px;}


.location-in .list{scroll-margin-top:60px; gap:20px; padding-top:60px; flex-wrap: wrap;}
.location-in .list .txt-area{width:100%; position: relative;}
.location-in .list .txt-area .location-address{margin:10px 0 0; padding-top:15px;}
.location-in .list .txt-area .location--info{margin:6px 0 0;}
.location-in .list .txt-area .location--info li::before{width:16px; height:16px; font-size:16px;}
.location-in .list .txt-area .location-btn{margin:0; position: absolute; z-index: 9; left: 10px; bottom: -70px;}
.location-in .list .txt-area .location-btn a{width:40px; height:40px;}

.location-in .list .map-area{width:100%; min-height:300px;}
.location-in .wrap_map {height:300px !important;}



}
