/* #content */
.block {display: block;}
section .main_title {margin-bottom: 48px;}
section .sub_text {letter-spacing: -0.02em; font-weight: 400;}
section .more_btn {display: inline-block; font-weight: 500; font-size: 24px; color: #8556E3; padding: 24px 36px; 
    border: 1px solid #8556E3; border-radius: 8px; box-sizing: border-box;}

#content > h3 {padding: 0 16.66%; font-size: 46px; line-height: 56px; letter-spacing: -0.02em; color: #29203B;}

.branch_tab {padding: 32px 0;}
.branch_tab ul {width: 67%; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 16px;}
.branch_tab ul li {width: 50%;}
.branch_tab ul li a {display: block; color: #9D71FF; font-weight: 500; font-size: 26px; line-height: 36px; letter-spacing: -0.02em; text-align: center;
    padding: 12px 5px; background: #FFFFFF; border: 2px solid rgba(46, 21, 102, 0.15); border-radius: 100px;white-space: nowrap;}
.branch_tab ul li a.on {color: #FFFFFF; background: #AC86FF; border: 2px solid #AC86FF;}

#map {height: 570px;}
/*.main_map {width: 100%; padding-top: calc(652/1920*100%); background: url(../images/sub05_06_img_daeat_location.png) center no-repeat; background-size: cover; position: relative;}*/
.main_map {width: 100%; position: relative;} /*KJS 구글지도 관련*/
.main_map ul {position: absolute; bottom: 30%; right: 16.66%;}
.main_map ul li {border: 1px solid #9A74E7; box-shadow: 0px 0px 9px -4px rgba(22, 34, 51, 0.21); background: #fff; border-radius: 50%; overflow: hidden; margin-top: 8px;}
.main_map ul li a {display: block; text-indent: -9999px; font-size: 0; color: #fff; width: 80px; height: 80px;
    background-repeat: no-repeat; background-size: contain; background-position: center;}
.main_map ul li:nth-child(1) a {background-image: url(../images/sub05_06_icon_kakaomap.png);}
.main_map ul li:nth-child(2) a {background-image: url(../images/sub05_06_icon_navermap.png);}
.main_map ul li:nth-child(3) a {background-image: url(../images/sub05_06_icon_tmap.png);}
.main_map #tmap {display: none;}

.info {width: 66.68%; background: #FFFFFF; border: 1px solid #E1D7F8; box-shadow: 0px 4px 18px rgba(0, 0, 0, 0.05); border-radius: 16px;
    position: relative; bottom: 100px; left: 50%; transform: translateX(-50%);}
.info ul {padding: 52px 12%; display: flex; justify-content: space-between; gap: 16px;}
.info ul li dl dt {font-weight: 700; font-size: 22px; line-height: 32px; letter-spacing: -0.02em; color: #8556E3; margin-bottom: 12px; position: relative;}
.info ul li dl dt span {font-weight: 400; font-size: 11px; line-height: 15px; color: #29203B; position: absolute; bottom: 0; right: 0;}
.info ul li dl dt span i {font-style: normal;}
.info ul li dl dd {font-weight: 500; font-size: 16px; line-height: 24px; letter-spacing: -0.02em; color: #29203B;}
.info ul li dl dd .block {display: block;}
.info ul li:last-child dl dd {letter-spacing: 1px;}
.info ul li dl dd strong {font-size: 32px; line-height: 47px;}
.info ul li dl dd .purple {font-size: 13px; line-height: 19px;}

.map_area {padding: 0 16.66% 120px;}
.map_area .btn_ytb {
    display: inline-block;
    font-size: 16px;
    line-height: 40px;
    height: 40px;
    padding: 0 24px;
    letter-spacing: -1px;
    color: #161718;
    border-radius: 100px;
    border: 1px solid #777C81;
    background: #FFF;
    white-space: nowrap;
    margin-top: 16px;
    }
.map_area .btn_ytb span {display: inline-block; width: 29px; height: 20px; background-image: url(../images/icon_youtube.png);
    background-position: center; background-repeat: no-repeat; background-size: contain; margin-left: 6px; vertical-align: sub;}
.map_area .tab_area {display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px;}
.map_area .tab_area li a {display: block; color: #9D71FF; font-weight: 500; font-size: 26px; line-height: 36px; letter-spacing: -0.02em; text-align: center;
    padding: 12px 0; background: #FFFFFF; border: 2px solid rgba(46, 21, 102, 0.15); border-radius: 100px;}
.map_area .tab_area li a.on {color: #FFFFFF; background: #AC86FF; border: 2px solid #AC86FF;}
.map_area .con {border: 2px solid rgba(46, 21, 102, 0.15); border-radius: 18px; display: flex; overflow: hidden;}
.map_area .con .img_box {width: 65%; border-radius: 18px 0 0 18px; background-repeat: no-repeat; background-size: cover; background-position: center;}
.map_area .con .info_box {width: 35%; color: #29203B; padding: 80px 4%; box-sizing: border-box;}
.map_area .con .info_box .icon_box {display: block; width: 104px; height: 104px; border-radius: 50%; border: 2px solid rgba(46, 21, 102, 0.15); margin: 0 auto 16px;
    background-repeat: no-repeat; background-position: center; background-size: contain;}
.map_area .con .info_box .title {font-weight: 700; font-size: 28px; line-height: 36px; letter-spacing: -0.02em; text-align: center; margin-bottom: 90px; position: relative;}
.map_area .con .info_box .title::after {content: ''; display: block; width: 48px; height: 2px; background: #29203B; 
    position: absolute; bottom: -44px; left: 50%; transform: translateX(-50%);}
.map_area .con .info_box ul li {display: flex; gap: 8px;}
.map_area .con .info_box ul li .line_num {display: inline-block; height: 24px; line-height: 24px; text-align: center; font-size: 14px; padding: 0 12px;
    color: #fff; border-radius: 100px; box-sizing: border-box; white-space: nowrap;}
.map_area .con .info_box ul li div span {display: inline-block; margin-right: 8px;}

.map_area .con.subway .img_box {background-image: url(../images/gangnam/sub05_06_img_map_subway.jpg);}
.map_area .con.subway .info_box .icon_box {background-image: url(../images/sub05_06_icon_subway.png);}
.map_area .con.subway .info_box .title .purple {display: block; font-weight: 500; font-size: 16px; line-height: 22px; letter-spacing: -0.02em; margin-top: 4px;}
.map_area .con.subway .info_box ul {display: inline-block; position: relative; left: 50%; transform: translateX(-50%);}
.map_area .con.subway .info_box ul li {font-weight: 500; font-size: 18px; line-height: 26px; letter-spacing: -0.02em; margin-bottom: 8px;}

.map_area .con.bus .img_box {background-image: url(../images/gangnam/sub05_06_img_map_bus.jpg);}
.map_area .con.bus .info_box .icon_box {background-image: url(../images/sub05_06_icon_bus.png);}
.map_area .con.bus p {font-weight: 500; font-size: 18px; line-height: 26px; text-align: center; letter-spacing: -0.02em; margin-bottom: 8px;}
.map_area .con.bus ul {display: inline-block; position: relative; left: 12%;}
.map_area .con.bus ul:nth-of-type(1) {margin-bottom: 20px;}
.map_area .con.bus ul li {font-weight: 300; font-size: 16px; line-height: 22px; letter-spacing: -0.02em; margin-bottom: 4px;}
/* .map_area .con.bus ul li i {display: inline-block; width: 27px;} */

.map_area .con.car .img_box {background-image: url(../images/gangnam/sub05_06_img_map_car.jpg);}
.map_area .con.car .info_box .icon_box {background-image: url(../images/sub05_06_icon_car.png);}
.map_area .con.car .info_box > p {font-weight: 700; font-size: 20px; line-height: 28px; text-align: center; letter-spacing: -0.02em;}
.map_area .con.car .info_box .title {font-size: 28px; line-height: 36px;}
.map_area .con.car .info_box .text_box {background: #F5F3F3; border-radius: 12px; padding: 20px 5%; margin: 44px 0 12px;}
.map_area .con.car .info_box .text_box p {font-weight: 500; font-size: 16px; line-height: 22px; text-align: center; letter-spacing: -0.02em;}
.map_area .con.car .info_box .text_box p span {display: block;}
.map_area .con.car .info_box .notice {font-weight: 500; font-size: 14px; line-height: 20px; opacity: .5; text-align: left;}


/* PC (해상도 1440px ~ 1540px) */
@media screen and (max-width:1540px) {
    #content > h3 {padding: 0 12%;}
    .main_map ul {right: 12%; bottom: 35%;}
    .main_map ul li a {width: 60px; height: 60px;}
    .info {width: 76%; bottom: 120px;}
    .info ul {padding: 38px 8%;}
    .map_area {padding: 0 12% 120px;} 
}
/* PC (해상도 1058px ~ 1440px) */
@media screen and (max-width:1440px) {
    #content > h3 {padding: 0 8%;}
    .main_map ul {right: 8%;}
    .info {width: 84%;}
    .info ul {padding: 30px 5%;}
    .map_area {padding: 0 8% 120px;} 
}
/* PC (해상도 1024px ~ 1058px) */
@media screen and (max-width:1058px) {
    #content > h3 {padding: 0 6%;}
    .main_map ul {right: 6%;}
    .info {width: 86%;}
    .map_area {padding: 0 6% 120px;}
}


/* 태블릿 (해상도 769px ~ 1024px) */
@media screen and (max-width:1024px) {
    /* content */
    section .main_title {font-size: 28px; margin-bottom: 28px;}
    section .sub_text {font-size: 14px; line-height: 21px;}
    section .more_btn {font-size: 18px;}
	
    #content > h3 {padding: 0 5%; font-size: 28px; line-height: 36px;}

    .branch_tab ul {width: 90%; gap: 8px;}
    .branch_tab ul li a {font-size: 18px; line-height: 18px; letter-spacing: 0; padding: 10px 0; border: 1px solid rgba(46, 21, 102, 0.15);}
    .branch_tab ul li a.on {border: 1px solid #AC86FF;}
    /*.main_map {padding-top: calc(444/768*100%);}*/ /* KJS 구글지도 관련 */
    .main_map ul {right: 5%; /* bottom: 18%; */ top: 20%; bottom: 0;} 
    
    .info {width: 90%; bottom: 56px;}
    .info ul {padding: 28px 6%; gap: 26px;}
    .info ul li dl dt {font-size: 16px; line-height: 24px; margin-bottom: 8px;}
    .info ul li dl dt span {text-align: right; font-size: 8px; line-height: 1em;}
    .info ul li dl dt span i b {display: block;}
    .info ul li dl dd {font-weight: 400; font-size: 11px; line-height: 16px; letter-spacing: 0;}
    .info ul li dl dd .block {display: inline;}
    .info ul li dl dd strong {font-size: 20px; line-height: 30px; letter-spacing: -0.02em;}
    .info ul li dl dd .purple {font-size: 11px; line-height: 16px; display: block;}

    .map_area {padding: 0 5% 80px; margin-top: 0;}
    .map_area .btn_ytb {font-size: 14px; line-height: 34px; height: 34px;}
    .map_area .btn_ytb span {width: 25px; height: 17px;}
    .map_area .tab_area {margin-bottom: 28px;}
    .map_area .tab_area li a {font-size: 15px; line-height: 22px; padding: 8px 0; border: 1px solid #E1D7F8;}
    .map_area .con {border: 1px solid rgba(46, 21, 102, 0.15);}
    .map_area .con .info_box {padding: 48px 4%;}
    .map_area .con .info_box .icon_box {width: 72px; height: 72px; margin: 0 auto 20px;}
    .map_area .con .info_box .title {font-size: 18px; line-height: 26px; margin-bottom: 42px; position: relative;}
    .map_area .con .info_box .title::after {width: 20px; bottom: -20px;}
    .map_area .con .info_box ul li .line_num {height: 20px; line-height: 20px; font-size: 12px; padding: 0 8px; margin-right: 0;}
    
    .map_area .con.subway .info_box .title .purple {font-size: 12px; line-height: 18px; margin-top: 0;}
    .map_area .con.subway .info_box ul li {font-size: 14px; line-height: 20px; margin-bottom: 4px;}
    
    .map_area .con.bus p {font-size: 14px; line-height: 20px;}
    .map_area .con.bus ul li {font-size: 14px; line-height: 16px;}
    .map_area .con.bus ul li i {display: inline-block; width: 27px;}
    
    .map_area .con.car .info_box > p {font-size: 15px; line-height: 22px; letter-spacing: 0;}
    .map_area .con.car .info_box .title {font-size: 18px; line-height: 26px;}
    .map_area .con.car .info_box .text_box {border-radius: 8px; padding: 12px 5%; margin: 20px 0 16px;}
    .map_area .con.car .info_box .text_box p {font-size: 11px; line-height: 15px; letter-spacing: 0;}
    .map_area .con.car .info_box .notice {font-size: 11px; line-height: 15px;}
}

/* 모바일 가로, 모바일 세로 (해상도 375px ~ 768px)*/
@media screen and (max-width:768px) {
    /* content */
    section .main_title {line-height: 41px; font-size: 18px; margin-bottom: 24px;}
    section .main_title i {display: block;}
    section .sub_text span {display: inline;}

    #content > h3 {display: none;}

    .branch_tab {padding: 20px 0;}
    .branch_tab ul {gap: 0;width:96%;display: block;margin:0 auto;overflow-x:auto;text-align:center;white-space: nowrap;}
    .branch_tab ul li { width:60px;display:inline-block; }
    .branch_tab ul li a {font-size: 11px;padding: 12px 2px;border: 1px solid rgba(46, 21, 102, 0.15);border-radius: 0;margin-left: -2px;white-space: nowrap;}
    .branch_tab ul li a.on {border: 1px solid #AC86FF;}
    .branch_tab ul li:first-child a {border-radius: 100px 0 0 100px;}
    .branch_tab ul li:last-child a {border-radius: 0 100px 100px 0;}

    /*.main_map {padding-top: calc(453/375*100%);}*/ /* KJS 구글지도 관련 */
    .main_map ul {bottom: 30%;}
    .main_map #tmap {display: block;}

    .info {width: 100%; border-radius: 16px 16px 0px 0px; border: none; position: relative; top: -38px; box-shadow: 0px -15px 18px rgba(0, 0, 0, 0.05);}
    .info ul {padding: 40px 5%; flex-direction: column; gap: 24px;}
    .info ul li dl dt span {position: relative; top: 0; right: 0; display: inline; font-size: 12px;}
    .info ul li dl dt span i b {display: inline;}
    .info ul li dl dd {font-weight: 400; font-size: 14px; line-height: 21px;}
    .info ul li:last-child dl dd {letter-spacing: -0.02em;}
    .info ul li dl dd strong {font-size: 24px; line-height: 36px;}
    .info ul li dl dt span i:first-of-type {display: none;}
    .info ul li dl dt span i:last-of-type {display: inline;}
    
    .map_area {padding: 0; margin-top: -38px;}
    .map_area .tab_area {margin-bottom: 0; box-shadow: 0px 0px 9px -4px rgba(22, 34, 51, 0.06); background: #F7F3FF; padding: 20px 5%; gap: 0;}
    .map_area .tab_area li a {font-size: 16px; padding: 12px 0; border-radius: 0;
        border-top: 1px solid rgba(46, 21, 102, 0.15); border-bottom: 1px solid rgba(46, 21, 102, 0.15); border-right: 1px solid rgba(46, 21, 102, 0.15);}
    .map_area .tab_area li a.on {border: 1px solid #AC86FF;}
    .map_area .tab_area li:first-child a {border-radius: 100px 0 0 100px; border-left: 1px solid rgba(46, 21, 102, 0.15);}
    .map_area .tab_area li:last-child a {border-radius: 0 100px 100px 0;}
    .map_area .tab_area li a span {display: none;}
    .map_area .con {border: none; border-radius: 0; flex-direction: column-reverse;}
    .map_area .con .img_box {width: 100%; border-radius: 0; min-height: 330px;}
    .map_area .con .info_box {width: 100%; padding: 60px 5%;}
    .map_area .con .info_box .icon_box {width: 120px; height: 120px; margin: 0 auto 24px;}
    .map_area .con .info_box .title {font-size: 22px; line-height: 32px; margin-bottom: 58px;}
    .map_area .con .info_box .title::after {width: 32px; bottom: -28px;}

    .map_area .con.subway .info_box .title .purple {font-size: 14px; line-height: 20px; margin-top: 8px;}
    .map_area .con.subway .info_box ul li {font-size: 15px; line-height: 22px; margin-bottom: 8px;}

    .map_area .con.bus ul {left: 20%;}

    .map_area .con.car .info_box .text_box {padding: 20px 5%; margin: 28px 0 16px;}
    .map_area .con.car .info_box .text_box p {font-size: 14px; line-height: 20px; letter-spacing: -0.02em;}
    .map_area .con.car .info_box .notice {text-align: center;}
}