@charset "utf-8";

/* 공통 */
.c-white {color:#fff !important;}
.c-main {color:var(--color-primary) !important;}
.c-2 {color:var(--color-secondary) !important;}
.c-gray {color:#a8a8a8 !important;}

.content-padding {padding:clamp(40px, calc( 160 / var(--inner) * 100vw ), 160px) 0;}
.content-margin {margin-bottom:clamp(40px, calc( 160 / var(--inner) * 100vw ), 160px);}
.sub-content {padding-top:clamp(40px, calc( 160 / var(--inner) * 100vw ), 160px);}

.sub-cont-title {position:relative; margin-bottom:clamp(20px, calc(90/ var(--inner) * 100vw ),90px);}
.sub-cont-title .cate {margin-bottom:1em; font-size:clamp(14px, calc(26/ var(--inner) * 100vw ),26px); font-weight:600; line-height:1.2; letter-spacing:-0.04em; color:#2161f2;}
.sub-cont-title .tit {font-size:clamp(20px, calc(58/ var(--inner) * 100vw ),58px); font-weight:700; line-height:1.4; letter-spacing:-0.04em; color:#2c2c2c;}
.sub-cont-title .tt {margin-top:var(--size60); font-size:clamp(15px, calc(26/ var(--inner) * 100vw ),26px); font-weight:500; line-height:1.6; letter-spacing:-0.04em; color:#2c2c2c;}
.sub-cont-title .tx {margin-top:var(--size50); font-size:clamp(14px, calc(22/ var(--inner) * 100vw ),22px); font-weight:500; line-height:1.4; letter-spacing:-0.04em; color:#505050;}
.sub-cont-title .main-arrow-btn {margin-top:calc(0px - var(--size70));}

.table-wrap table {width:100%; border-collapse:collapse; border-spacing:0px;}

.page-menu {margin-bottom:clamp(40px, calc(140/ var(--inner) * 100vw ),140px);}
.page-menu ul {display:flex;}
.page-menu ul li {position:relative; margin-left:-1px; flex:1; border:1px solid #ccc;}
.page-menu ul li:first-child {border-radius:1em 0 0 1em; margin-left:0;}
.page-menu ul li:last-child {border-radius:0 1em 1em 0;}

.page-menu ul li a {display:flex; height:clamp(40px, calc(90/ var(--inner) * 100vw ),90px); align-items:center; justify-content:center; font-size:clamp(14px, calc(26/ var(--inner) * 100vw ),26px); font-weight:500; line-height:1.2; letter-spacing:-0.04em; color:#a8a8a8; text-align:center;}
.page-menu ul li.active {border-color:#2161f2; z-index:1;}
.page-menu ul li.active a {color:#2161f2;}

/* 회사소개 */
.company-initial {position:relative; margin-bottom:clamp(40px, calc(140/ var(--inner) * 100vw ),140px);}
.company-initial:before {content:''; position:absolute; left:50%; bottom:0; width:100vw; height:100%; transform:translate(-50%,50%); background:url('/images/sub/company-bg.png') no-repeat center top/cover;}
.company-initial .items {display:flex; margin:0 calc(0px - clamp(10px, calc(65/ var(--inner) * 100vw ),65px));}
.company-initial .item {width:33.333%; padding:0 clamp(10px, calc(65/ var(--inner) * 100vw ),65px);}
.company-initial .in {position:relative; overflow:hidden; padding-bottom:100%; background-repeat:no-repeat; background-size:cover; background-position:50% 50%;}
.company-initial .txt {display:flex; align-items:center; justify-content:center; position:absolute; left:0; top:0; width:100%; height:100%; font-family:var(--font-host); font-size:clamp(16px, calc(88/ var(--inner) * 100vw ),88px); font-weight:800; line-height:1.2; letter-spacing:-0.02em; color:#fff; text-align:center;}
.company-initial .txt span {display:inline-block; margin-left:0.1em; margin-top:0.56em; font-size:clamp(14px, calc(48/ var(--inner) * 100vw ),48px); opacity:0.5;}

.company-info-txt {margin-bottom:clamp(40px, calc(140/ var(--inner) * 100vw ),140px); text-align:center;}
.company-info-txt .tt {margin-bottom:1.8em; font-size:clamp(16px, calc(26/ var(--inner) * 100vw ),26px); line-height:1.6; font-weight:500; letter-spacing:-0.04em; color:#2c2c2c;}
.company-info-txt .tx {margin-bottom:1.5em; font-size:clamp(14px, calc(22/ var(--inner) * 100vw ),22px); line-height:1.6; font-weight:500; letter-spacing:-0.04em; color:#505050;}
.company-info-txt .tx:last-child {margin-bottom:0;}

.company-info-ico .items {display:flex;}
.company-info-ico .item {position:relative; flex:1; padding:var(--size50) 20px; text-align:center; border:1px solid #2c2c2c; border-right:0;}
.company-info-ico .item:nth-child(5n) {border-right:1px solid #2c2c2c;}
.company-info-ico .ico {margin-bottom:var(--size30);}
.company-info-ico .ico img {width:clamp(45px, calc(72/ var(--inner) * 100vw ),72px);}
.company-info-ico dt {margin-bottom:1em; font-weight:700; line-height:1; letter-spacing:-0.04em; color:#2161f2;}
.company-info-ico dd {font-size:clamp(15px, calc(24/ var(--inner) * 100vw ),24px); line-height:1.5; letter-spacing:-0.04em; color:#2c2c2c;}
.company-info-ico dd.type2 {font-size:clamp(15px, calc(20/ var(--inner) * 100vw ),20px);}

/* 멤버쉽 상품안내 */
.membership-product-wrap {display:flex; position:relative;}
.membership-product-wrap .left {position:relative; width:520px; background:#2161f2; padding:clamp(20px, calc(120/ var(--inner) * 100vw ),120px) 10px clamp(40px, calc(200/ var(--inner) * 100vw ),200px) 0;}
.membership-product-wrap .left:before {content:''; position:absolute; top:0; right:0; width:calc(100% + 260px); height:100%; background:#2161f2; z-index:-1;}
.membership-product-wrap .right {flex:1 1 auto; min-width:0; width:1%; padding:clamp(20px, calc(120/ var(--inner) * 100vw ),120px) 0 clamp(40px, calc(200/ var(--inner) * 100vw ),200px) clamp(20px, calc(120/ var(--inner) * 100vw ),120px); background:#f4f4f4;}
.membership-product-wrap .benefit-list {flex:1 1 auto; min-width:0; width:1%; padding-left:clamp(20px, calc(120/ var(--inner) * 100vw ),120px);}
.membership-product-wrap .right:before {content:''; position:absolute; top:0; left:0; width:calc(100% + 260px); height:100%; background:#f4f4f4; z-index:-1;}

.membership-product-wrap .left .tt {margin-bottom:var(--size40); font-size:clamp(14px, calc(32/ var(--inner) * 100vw ),32px); font-weight:700; line-height:1.2; letter-spacing:-0.04em; color:#fff; opacity:0.5;}
.membership-product-wrap .left .tx {margin-bottom:var(--size30); font-size:clamp(20px, calc(48/ var(--inner) * 100vw ),48px); font-weight:700; line-height:1.3; letter-spacing:-0.04em; color:#fff;}
.membership-product-wrap .left .cap {margin-top:var(--size70); font-size:clamp(14px, calc(18/ var(--inner) * 100vw ),18px); line-height:1.7; letter-spacing:-0.04em; color:#fff;}
.membership-product-wrap .left .tx-italic {font-size:clamp(16px, calc(22/ var(--inner) * 100vw ),22px); font-weight:700; line-height:1.2; color:#fff; letter-spacing:-0.04em; font-style:italic;}
.membership-product-wrap .left .tx-italic span {text-decoration:underline;}
.membership-product-wrap .left .img {margin-top:clamp(20px, calc(120/ var(--inner) * 100vw ),120px);}

.membership-product-wrap .left .cap2 {font-size:clamp(14px, calc(18/ var(--inner) * 100vw ),18px); line-height:1.7; letter-spacing:-0.04em; color:#505050;}
.membership-product-wrap .left .txt-wrap {position:relative; padding-top:var(--size30); margin-top:clamp(20px, calc(120/ var(--inner) * 100vw ),120px);}
.membership-product-wrap .left .txt-wrap:before {content:''; position:absolute; left:0; top:0; width:1.5em; height:0.25em; background:#fff; opacity:0.5; border-radius:100vh;}
.membership-product-wrap .left dt {margin-bottom:var(--size30); font-size:clamp(16px, calc(28/ var(--inner) * 100vw ),28px); font-weight:600; line-height:1.2; letter-spacing:-0.04em; color:#fff;}
.membership-product-wrap .left dd {position:relative; padding-left:0.6em; margin-bottom:0.64em; font-size:clamp(14px, calc(22/ var(--inner) * 100vw ),22px); line-height:1.4; letter-spacing:-0.04em; color:#fff;}
.membership-product-wrap .left dd:last-child {margin-bottom:0;}
.membership-product-wrap .left dd:before {content:''; position:absolute; left:0; top:0.6em; width:0.32em; height:0.09em; background:#fff;}

.membership-product-wrap .right .col {margin-bottom:clamp(40px, calc(140/ var(--inner) * 100vw ),140px);}
.membership-product-wrap .right .col:last-child {margin-bottom:0;}
.membership-product-wrap .col-tit {margin-bottom:var(--size50);}
.membership-product-wrap .col-tit h4 {position:relative;}
.membership-product-wrap .col-tit h4:before {content:''; position:absolute; left:0; top:50%; width:100%; height:4px; background:#2161f2; margin-top:-2px;}
.membership-product-wrap .col-tit h4 span {display:inline-flex; position:relative; left:-160px; width:280px; height:160px; align-items:center; justify-content:center; text-align:center; background:#fff; border:4px solid #2161f2; border-radius:100%; font-family:var(--font-host); font-size:clamp(20px, calc(58/ var(--inner) * 100vw ),58px); font-weight:700; line-height:1.2; letter-spacing:0; color:#2161f2; transform:rotate(-15deg);}
.membership-product-wrap .col-tit .tt {position:relative; margin-top:calc(0px - var(--size50)); font-size:clamp(20px, calc(44/ var(--inner) * 100vw ),44px); font-weight:800; line-height:1.4; letter-spacing:-0.04em; color:#2c2c2c; text-align:right;}
.membership-product-wrap .col-tit .tt span {display:block; font-size:clamp(15px, calc(20/ var(--inner) * 100vw ),20px); font-weight:600; color:#ccc;}
.membership-product-wrap .col dl {display:flex; margin-bottom:clamp(10px, calc(16/ var(--inner) * 100vw ),16px);}
.membership-product-wrap .col dl:last-child {margin-bottom:0;}
.membership-product-wrap .col dt {position:relative; width:194px; padding:var(--size30) var(--size35) var(--size30) clamp(40px, calc(65/ var(--inner) * 100vw ),65px); margin-right:clamp(10px, calc(16/ var(--inner) * 100vw ),16px); background:#fff; border-radius:clamp(10px, calc(16/ var(--inner) * 100vw ),16px); font-size:clamp(16px, calc(26/ var(--inner) * 100vw ),26px); font-weight:600; line-height:1.2; letter-spacing:-0.04em; color:#2c2c2c;}
.membership-product-wrap .col dt:before {content:''; position:absolute; left:var(--size40); top:1.5em; width:0.46em; height:0.46em; background:#2161f2; border-radius:100%;}
.membership-product-wrap .col dd {padding:var(--size30) var(--size35); flex:1 1 auto; min-width:0; width:1%; background:#fff; border-radius:clamp(10px, calc(16/ var(--inner) * 100vw ),16px); font-size:clamp(14px, calc(26/ var(--inner) * 100vw ),26px); line-height:1.4; letter-spacing:-0.04em; color:#2c2c2c;}
.membership-product-wrap .col dd .line {margin-bottom:var(--size20);}
.membership-product-wrap .col dd .line:last-child {margin-bottom:0;}
.membership-product-wrap .col dd .small {color:#878787;}

.membership-product-wrap .benefit-bg-txt {right:0; left:-160px;}

.membership-product-wrap.type-benefit {align-items:flex-start;}
.membership-product-wrap.type-benefit .left {background:0;}
.membership-product-wrap.type-benefit .left:before {height:65%; border-radius:0 2em 2em 0;}

.benefit-info .tit {margin-bottom:var(--size30); font-size:clamp(16px, calc(28/ var(--inner) * 100vw ),28px); font-weight:600; line-height:1.2; letter-spacing:-0.04em; color:#fff;}
.benefit-info .img {margin-bottom:var(--size40);}

.benefit-list .tit-wrap {margin-bottom:var(--size90); padding-top:var(--size50); border-top:2px solid #2c2c2c;}
.benefit-list .tit-wrap .tt {margin-bottom:var(--size20); font-size:clamp(14px, calc(20/ var(--inner) * 100vw ),20px); font-weight:500; line-height:1.2; letter-spacing:-0.04em; color:#a8a8a8;}
.benefit-list .tit-wrap .tx {font-size:clamp(16px, calc(48/ var(--inner) * 100vw ),48px); font-weight:800; line-height:1.2; letter-spacing:-0.04em; color:#2c2c2c;}
.benefit-list .tit-wrap .tx span {text-decoration:underline; text-underline-offset:5px;}

.benefit-list .item {margin-bottom:var(--size35); padding-bottom:var(--size35); border-bottom:1px solid #eee;}
.benefit-list .item.first {margin-bottom:clamp(20px, calc(140/ var(--inner) * 100vw ),140px); padding-bottom:0; border-bottom:0;}
.benefit-list .item:last-child {margin-bottom:0; padding-bottom:0; border-bottom:0;}
.benefit-list .img {position:relative; padding-bottom:55.26%; border-radius:2em; margin-bottom:clamp(15px, calc(70/ var(--inner) * 100vw ),70px); overflow:hidden;}
.benefit-list .img img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}
.benefit-list .item .tt {margin-bottom:1.4em; font-size:clamp(14px, calc(24/ var(--inner) * 100vw ),24px); font-weight:600; line-height:1.2; letter-spacing:-0.02em; color:#2161f2; font-style:italic;}
.benefit-list .item .tit {font-size:clamp(16px, calc(40/ var(--inner) * 100vw ),40px); font-weight:700; line-height:1.2; letter-spacing:-0.04em; color:#2c2c2c;}
.benefit-list .item .txt {margin-top:var(--size20); font-size:clamp(14px, calc(20/ var(--inner) * 100vw ),20px); font-weight:500; line-height:1.2; letter-spacing:-0.04em; color:#a8a8a8;}

/* 입회등록 */
.regist-content {padding:clamp(40px, calc( 140 / var(--inner) * 100vw ), 140px) 0; border-bottom:1px solid #dfdfdf;}
.regist-content:last-child {padding-bottom:0; border-bottom:0;}
.regist-procedure .items {display:flex; justify-content:space-between; margin:0 calc(0px - var(--size20));}
.regist-procedure .item {width:20%; padding:0 var(--size20); text-align:center;}
.regist-procedure .gray-box {position:relative; margin-bottom:var(--size40); padding:20px 20px 35px; background:#f4f4f4; border-radius:100vh 100vh 12em 12em;}
.regist-procedure .gray-box:after {content:''; position:absolute; left:50%; bottom:calc(0px - clamp(20px, calc(34/ var(--inner) * 100vw ),34px)/2); margin-left:calc(0px - clamp(2px, calc(4/ var(--inner) * 100vw ),4px)/2); width:clamp(2px, calc(4/ var(--inner) * 100vw ),4px); height:clamp(20px, calc(34/ var(--inner) * 100vw ),34px); background:#2161f2; border-radius:100vh;}
.regist-procedure .ico {position:relative; padding-bottom:100%; overflow:hidden; background:#2161f2; border-radius:100%; box-shadow:4px 4px 28px rgba(0,0,0,0.12);}
.regist-procedure .ico img {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); width:auto !important; height:auto !important; max-width:60%; max-height:60%; object-fit:contain;}
.regist-procedure .num {position:relative; z-index:1; margin:calc(0px - clamp(40px, calc(56/ var(--inner) * 100vw ),56px)/2) auto var(--size20); width:clamp(40px, calc(56/ var(--inner) * 100vw ),56px); height:clamp(40px, calc(56/ var(--inner) * 100vw ),56px); border:2px solid #2161f2; background:#fff; border-radius:100%; line-height:calc(clamp(40px, calc(56/ var(--inner) * 100vw ),56px) - 4px); font-size:clamp(14px, calc(18/ var(--inner) * 100vw ),18px); font-weight:700; letter-spacing:-0.04em; color:#2161f2; box-shadow:4px 4px 28px rgba(0,0,0,0.12);}
.regist-procedure .tit {display:flex; min-height:2.6em; align-items:center; justify-content:center; font-size:clamp(15px, calc(28/ var(--inner) * 100vw ),28px); font-weight:800; line-height:1.3; letter-spacing:-0.04em; color:#2c2c2c;}
.regist-procedure .txt {font-size:clamp(14px, calc(20/ var(--inner) * 100vw ),20px); font-weight:500; line-height:1.7; letter-spacing:-0.04em; color:#505050;}

.regist-procedure .item:nth-child(even) .gray-box:after {background:#21b9f2;}
.regist-procedure .item:nth-child(even) .ico {background:#21b9f2;}
.regist-procedure .item:nth-child(even) .num {color:#21b9f2; border-color:#21b9f2;}

.regist-doc .items {display:flex;}
.regist-doc .item {width:50%; padding:0 var(--size10);}
.regist-doc .in {height:100%; padding:var(--size70); border-radius:2em;}
.regist-doc h4 {margin-bottom:var(--size40); font-size:clamp(16px, calc(32/ var(--inner) * 100vw ),32px); font-weight:700; line-height:1.2; letter-spacing:-0.04em; color:#2c2c2c;}
.regist-doc .white-box {min-height:282px; background:#fff; padding:var(--size35) var(--size40); border-radius:1.5em;}
.regist-doc ul li {position:relative; padding-left:1em; margin-bottom:1em; font-size:clamp(14px, calc(26/ var(--inner) * 100vw ),26px); line-height:1.2; letter-spacing:-0.04em; color:#2c2c2c;}
.regist-doc ul li:before {content:''; position:absolute; left:0; top:0.4em; width:0.46em; height:0.46em; background:#2161f2; border-radius:100%;}
.regist-doc ul li:last-child {margin-bottom:0;}

.regist-doc .item.type1 .in {background:#f7f9ff;}
.regist-doc .item.type2 .in {background:#f2fbff;}
.regist-doc .item.type2 ul li:before {background:#76d5ff;}

.account-info {margin-bottom:var(--size80);}
.account-info .items {display:flex; margin:calc(0px - var(--size10));}
.account-info .item {flex:0 1 auto; width:33.333%; max-width:400px; padding:var(--size10); text-align:center;}
.account-info .item.type2 {flex:1 1 auto; min-width:0; width:1%; max-width:100%;}
.account-info .in {height:100%; padding:var(--size50) 15px; background:#f4f4f4; border-radius:2em;}
.account-info dl {color:#fff;}
.account-info dt {margin-bottom:0.8em; font-size:clamp(14px, calc(20/ var(--inner) * 100vw ),20px); font-weight:700; line-height:1.2; letter-spacing:-0.04em; opacity:0.5}
.account-info dd {font-size:clamp(16px, calc(36/ var(--inner) * 100vw ),36px); font-weight:800; line-height:1.2; letter-spacing:-0.04em;}

.account-info .item.type1 .in {background:#2161f2;}
.account-info .item.type3 .in {background:#21b9f2;}
.account-info .item.type2 dt {color:#2c2c2c; opacity:1;}
.account-info .item.type2 dd {color:#2161f2;}

.account-note h4 {position:relative; padding-top:0.8em; margin-bottom:1.2em; font-size:clamp(16px, calc(28/ var(--inner) * 100vw ),28px); font-weight:600; line-height:1.2; letter-spacing:-0.04em; color:#2c2c2c;}
.account-note h4:before {content:''; position:absolute; left:0; top:0; width:clamp(10px, calc(24/ var(--inner) * 100vw ),24px); height:clamp(2px, calc(4/ var(--inner) * 100vw ),4px); background:#e5e5e5; border-radius:100vh;}
.account-note p {position:relative; padding-left:0.59em; font-size:clamp(14px, calc(22/ var(--inner) * 100vw ),22px); line-height:1.2; letter-spacing:-0.04em; color:#505050;}
.account-note p:before {content:''; position:absolute; left:0; top:0.6em; width:0.32em; height:2px; background:#505050;}

/* 이용약관 */
.usage-form .col {margin-bottom:clamp(35px, calc(75/ var(--inner) * 100vw ), 75px);}
.usage-form .col:last-child {margin-bottom:0;}
.usage-form .col h4 {margin-bottom:0.79em; font-size:clamp(16px, calc(28/ var(--inner) * 100vw ),28px); font-weight:600; line-height:1.2; letter-spacing:-0.04em; color:#2c2c2c;}
.usage-form .col p {font-size:clamp(15px, calc(22/ var(--inner) * 100vw ),22px); letter-spacing:-0.04em; line-height:1.6; color:#2c2c2c;}
.usage-form .num-list>li {position:relative; padding-left:1.1em; margin-bottom:0.67em; font-size:clamp(14px, calc(18/ var(--inner) * 100vw ),18px); line-height:1.6; letter-spacing:-0.04em; color:#505050;}
.usage-form .num-list>li .num {position:absolute; left:0;}
.usage-form .num-list>li:last-child {margin-bottom:0;}
.usage-form .bar-list>li {font-size:0.94em; color:#878787; line-height:2.1em;}

/* 지도 */
.station .map-area svg {display:block; margin:0 auto;}
.map-area svg path, .map-area svg polygon {stroke:none; transition:0.2s all ease;}
.map-group1:hover path,
.map-group2:hover path,.map-group2:hover polygon,
.d_chungbuk:hover,
.d_chungnam:hover,
.d_busan:hover ,
.d_gyeongnam:hover {fill:#a8a8a8; cursor:pointer;}

.station {position:relative;}
.station .pop-info {position:absolute; width:50%; padding:var(--size35) var(--size40); max-width:345px; background:#2161f2; border-radius:1.5em;}
.station .pop-info .tit {font-size:clamp(14px, calc(28/ var(--inner) * 100vw ),28px); font-weight:700; line-height:1; letter-spacing:-0.02em; color:#fff;}
.station .pop-info .list {width:100%; margin-top:var(--size25); height:40vh; max-height:170px; overflow-x:hidden; overflow-y:auto;}
.station .pop-info .items {display:flex; flex-wrap:wrap; margin:-3px;}
.station .pop-info .item {flex:0 1 auto; padding:3px; min-width:33.333%;}
.station .pop-info .item p {padding:0.4em; border-radius:100vh; background:#fff; font-size:clamp(12px, calc(18/ var(--inner) * 100vw ),18px); font-weight:600; line-height:1.2; letter-spacing:-0.02em; color:#2161f2; text-align:center;}
.station .pop-info .close {position:absolute; right:14px; top:14px;}
.station .pop-info .btn {display:block; width:1.5em; height:1.5em; border:0; background:url('/images/sub/icon-close.png') no-repeat 50% 50%/contain; text-indent:-999em; overflow:hidden;}

.station #pop1 {right:18%; top:calc(0px - var(--size40));}
.station #pop2 {right:14%; top:calc(0px - var(--size40));}
.station #pop3 {right:18%; top:calc(0px - var(--size40));}
.station #pop4 {left:18%; top:calc(0px - var(--size40));}
.station #pop5 {left:18%; bottom:clamp(10px, calc(90/ var(--inner) * 100vw ),90px)}
.station #pop6 {left:18%; bottom:clamp(10px, calc(90/ var(--inner) * 100vw ),90px)}

.station-info {margin-top:clamp(20px, calc(130/ var(--inner) * 100vw ),130px); text-align:right;}
.station-info p {font-size:clamp(14px, calc(20/ var(--inner) * 100vw ),20px); font-weight:600; line-height:1.2; letter-spacing:-0.04em; color:#2c2c2c;}
.station-info img {display:inline-block; vertical-align:middle; margin-right:var(--size15);}