@charset "utf-8";

@font-face {
    font-family: 'OneMobile';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-Regular.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}
/* 기존 코드 - 기존 홈페이지와 동일하므로 삭제하셔도 됩니다. */
.txcenter{text-align:center;}
.con-tit{margin: 17rem 0 4rem 0;font-size: 3.2rem;font-weight: bold;color: var(--red);}
.maintab-Wrap {position: relative;width: 100%;}
.maintab-Wrap .maintab{position: relative;display: flex;justify-content: center;flex-wrap: wrap;width: 100%;gap: 2rem;padding-bottom: 8rem;}
.maintab-Wrap .maintab > li{position: relative;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;flex-shrink: 1;box-sizing: border-box;-webkit-transition-property: color, border-color, background-color, box-shadow;-webkit-transition-duration: 0.2s;-webkit-transition-timing-function: ease-in-out;transition-property: color, border-color, background-color, box-shadow;transition-duration: 0.2s;transition-timing-function: ease-in-out;}
.maintab-Wrap .maintab > li a{font-size: 1.4rem;width: 100%;text-align: center;color: var(--black);padding: 1rem 2rem;border-radius: 50px;border: 1px solid var(--gray);-webkit-transition-property: color, border-color, background-color, box-shadow;-webkit-transition-duration: 0.2s;-webkit-transition-timing-function: ease-in-out;transition-property: color, border-color, background-color, box-shadow;transition-duration: 0.2s;transition-timing-function: ease-in-out;}
.maintab-Wrap .maintab > li.active a{color: var(--white);background: var(--black);}

:root {
    --black: #333;
    --white: #fff;
    --white2: rgba(255, 255, 255, 0.5);
    --orange: #ff9028;
    --gray: #e8e8e8;
    --red: #ed1b23;
    --red2: #d4000b;
    --footer: rgba(103, 103, 103, 0.5);
    --gray2: #999999;
    --gray3: #fafafa;
    --gray4: #676767;
    --gray5: #b3b3b3;
    --pink: #fd978a;
    --pink2: #fff2f3;
    --beige: #f8efe7;

    --fs12: 1.2rem;
    --fs13: 1.3rem;
    --fs14: 1.4rem;
    --fs16: 1.6rem;
    --fs18: 1.8rem;
    --fs20: 2rem;
    --fs22: 2.2rem;
    --fs24: 2.4rem;
    --fs32: 3.2rem;
    --fs36: 3.6rem;
}


/* 신규페이지에 대한 스타일 css */
.region-Wrap{position:relative;padding:0 2rem 7rem;}
.region-Wrap .inner{width:1480px;max-width:100%;margin:0 auto;}
.regionTitle{margin-bottom:8rem;line-height:4rem;font-size:3.6rem;font-weight:700;color:#000;text-align:center;}
.regionTab{margin-bottom:4rem;}
.regionTab ul{display:flex;overflow:hidden;overflow-x:auto;}
.regionTab li{flex:1;min-width:77px;}
.regionTab li button{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;height:7.8rem;gap:1rem 0;border-top:1px solid #E8E8E8;border-bottom:1px solid #E8E8E8;}
.regionTab li button>span{font-size:2rem;color:#000;}
.regionTab li button>em{font-size:1.6rem;color:#000;}
.regionTab li button.on{background:#ED1B23;border-top-color:#ED1B23;border-bottom-color:#ED1B23;}
.regionTab li button.on>span{color:#fff;}
.regionTab li button.on>em{color:#fff;}
.regionDistrict{margin-bottom:2rem;}
.regionDistrict dl{display:flex;gap:2rem;}
.regionDistrict dl>dt{flex:0 0 auto;width: 8rem;display:flex;align-items:center;justify-content:flex-start;font-size:2rem;}
.regionDistrict dl>dd{flex:1;}
.regionDistrict ul{display:flex;overflow:hidden;overflow-x:auto;}
.regionDistrict li{flex:1;min-width:80px;}
.regionDistrict li button{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;height:4.2rem;font-size:2rem;border-top:1px solid #E8E8E8;border-bottom:1px solid #E8E8E8;}
.regionDistrict li button.on{background:#ED1B23;color:#fff;border-top-color:#ED1B23;border-bottom-color:#ED1B23;}
.regionContent{margin-bottom:8rem;display:flex;flex-wrap:wrap;justify-content: center;}
.regionContent .regionChart{position:relative;width:504px;max-width:100%;}
.regionContent .regionChart .background{margin:0 auto;display:flex;align-items:center;justify-content:center;}
.regionContent .regionChart .background img{width:100%;height:auto;}
.regionContent .regionChart .marker{}
.regionContent .regionChart .marker .pin{position:absolute;z-index:1;width:6rem;height:6rem;border-radius:6rem;background:#323232;font-weight:300;color:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;transform:translate(-50%,-50%);transition:all 300ms; cursor: pointer;}
.regionContent .regionChart .marker .pin .name{line-height:2.2rem;font-size:2rem;color:#fff;}
.regionContent .regionChart .marker .pin .number{line-height: 3rem;font-size: 2.4rem;font-weight:700;color:#fff;display:none;}
.regionContent .regionChart .marker .pin.on{z-index:2;width: 10rem;height: 10rem;background:#ED1B23;}
.regionContent .regionChart .marker .pin.on .name{
    line-height: 2rem;
    font-size: 1.6rem;
}
.regionContent .regionChart .marker .pin.on .number{display:block;}
.regionContent .regionChart .marker .pin01{top: 18%;left: 55%;}
.regionContent .regionChart .marker .pin02{top: 26%;left: 35%;}
.regionContent .regionChart .marker .pin03{top: 67%;left: 48.2%;}
.regionContent .regionChart .marker .pin04{top: 39%;left: 65%;}
.regionContent .regionChart .marker .pin05{top: 69%;left: 20%;}
.regionContent .regionChart .marker .pin06{top: 50%;left: 55%;}
.regionContent .regionChart .marker .pin07{top: 47%;left: 38%;}
.regionContent .regionChart .marker .pin08{top: 66%;left: 67%;}
.regionContent .regionChart .marker .pin09{top: 16.5%;left: 24%;}
.regionContent .regionChart .marker .pin10{top: 45%;left: 42%;}
.regionContent .regionChart .marker .pin11{top: 53%;left: 72%;}
.regionContent .regionChart .marker .pin12{top: 30%;left: 18%;}
.regionContent .regionChart .marker .pin13{top: 79%;left: 30%;}
.regionContent .regionChart .marker .pin14{top: 59%;left: 32%;}
.regionContent .regionChart .marker .pin15{top: 95%;left: 19%;}
.regionContent .regionChart .marker .pin16{top: 42%;left: 22%;}
.regionContent .regionChart .marker .pin17{top: 35.5%;left: 47%;}
.regionContent .regionTable{position:relative;width:976px;max-width:100%;padding:1.8rem 0;}
.regionContent .regionTable table{border-collapse:collapse;border-top:1px solid #000000;}
.regionContent .regionTable table tr{height:5.8rem;border-bottom:1px solid #e8e8e8;text-align:center;font-size:1.6rem;}
.regionContent .regionTable table th{font-weight:700;}
.regionContent .regionTable table th.w70{width:7rem;max-width:7rem;}
.regionMap{position:relative;}
.regionMap .map{width:100%;height:610px;background:#e8e8e8;}
.regionMap .marker{position:absolute;min-width:7.8rem;height:3.8rem;border-radius:3.8rem;display:flex;align-items:center;justify-content:center;padding:0 1rem;font-size:1.6rem;font-weight:bold;color:#ffffff;letter-spacing:-0.02rem;}
.regionMap .marker:after{content:'';position:absolute;bottom:-6px;left:50%;margin-left:-10px;border-top:6px solid transparent;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:0;}
.regionMap .marker01{background:#ED1B23;}
.regionMap .marker01:after{border-top-color:#ED1B23;}
.regionMap .marker02{background:#9A9A9A;}
.regionMap .marker02:after{border-top-color:#9A9A9A;}
.regionMap .marker03{background:#323232;}
.regionMap .marker03:after{border-top-color:#323232;}
.region-Wrap .phone-btn {display: flex; justify-content: flex-end;}
.region-Wrap .phone-btn a{display: flex; align-items: center; gap: 4px; background:#ED1B23; border-radius: 20px; padding: 20px 30px; max-width: 300px;}
.region-Wrap .phone-btn i{width: 24px; height: 24px;}
.region-Wrap .phone-btn span{font-size: 2rem; color: #FFF;}

@media all and (max-width:1480px){
    .regionTitle{line-height:3.5rem;font-size:3.2rem;margin-bottom:4rem;}

    .regionTab{margin-bottom:2rem;}
    .regionTab li button{height:7.4rem;}
    .regionTab li button>span{font-size:1.6rem;}
    .regionTab li button>em{font-size:1.6rem;}
    .regionTab li button.on>em{font-size:2.4rem;}

    .regionDistrict dl>dt{width:6rem;font-size:1.6rem;}
    .regionDistrict dl>dd{max-width:calc(100% - 6rem - 2rem);}
    .regionDistrict li button{font-size:1.6rem;}

    .regionContent{margin-bottom:4rem;}
    .regionContent .regionChart .marker .pin{width: 3.6rem;height: 3.6rem;}
    .regionContent .regionChart .marker .pin .name{font-size: 1.2rem;}
    .regionContent .regionChart .marker .pin.on{width: 7rem;height: 7rem;gap:0.2rem;}
    .regionContent .regionChart .marker .pin.on .name{line-height:1.6rem;font-size:1.4rem;}
    .regionContent .regionChart .marker .pin.on .number{line-height:2.4rem;font-size:1.8rem;}

    .regionMap .marker{font-size:1.4rem;}

    .region-Wrap .phone-btn {display: flex; justify-content: center;}
    .region-Wrap .phone-btn a{display: flex; align-items: center; gap: 4px; background:#ED1B23; border-radius: 20px; padding: 10px 20px; max-width: 100%; width: 100%; text-align: center;}
    .region-Wrap .phone-btn span{font-size:1.5rem;}


}