@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */
.root_daum_roughmap {width:100% !important; height:clamp(250px, calc( 450 / var(--inner) * 100vw ), 450px) !important;}
.root_daum_roughmap .wrap_map {height:clamp(250px, calc( 450 / var(--inner) * 100vw ), 450px) !important; border-radius: 20px; overflow: hidden;}
.roughmap_lebel_text {line-height:0 !important; font-size:0 !important;}
.roughmap_lebel_text:after {content:"서울 강남구 테헤란로 25길 7 "; font-size:12px; line-height:15px;}

.bullet-item .bullet-list {position:relative; padding-left:9px; margin-top:10px; line-height:1.3; color: #454545;}
.bullet-item .bullet-list:first-child {margin-top:0; }
.bullet-item .bullet-list::before {position:absolute; content:''; left:0; top:9px; width:3px; height:3px; background:var(--color-1); border-radius: 50%;}

.bg-gray {background:#fafafa;}
.subsec-pd {padding: clamp(50px, calc( 100 / var(--inner) * 100vw ), 100px) 0;}


/* 공통 */
.sectitbx {font-family:var(--font1); text-align: center;}
.sectitbx .small {font-size: clamp(14px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: bold; color: #cccccc; letter-spacing: clamp(5px, calc( 8 / var(--inner) * 100vw ), 8px);}
.sectitbx .maintit {padding-top:clamp(12px, calc( 20 / var(--inner) * 100vw ), 20px); font-size: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); font-family:var(--font1); line-height: 1.5; font-weight: 500;}
.sectitbx .subtit {padding-top: clamp(12px, calc( 20 / var(--inner) * 100vw ), 20px); font-size: clamp(16px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: 500; font-family: var(--font-sans-serif);}

/* 소개 */
.greetings {text-align: center; background:url(../images/sub/greet-bg.png) no-repeat 50% 50%; background-size: clamp(360px, calc( 1280 / var(--inner) * 100vw ), 1280px) auto;}
.greetings .decbx {padding-top: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}
.greetings .dec {padding-top:clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px); font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); color: #454545; line-height: 1.7;}
.greetings .dec:first-child {padding-top: 0;}
.greetings .dec.last {padding-top: clamp(20px, calc( 45 / var(--inner) * 100vw ), 45px); color: #242424; font-weight: 600;}

.hiswrap {margin-top: clamp(30px, calc( 40 / var(--inner) * 100vw ), 40px); padding-top:clamp(50px, calc( 100 / var(--inner) * 100vw ), 100px); border-top:2px solid #000;}
.history-detail-item {display: flex; padding-bottom:clamp(30px, calc( 125 / var(--inner) * 100vw ), 125px);}
.history-detail-item:last-child {padding-bottom:0;}
.history-detail-item .year { padding-right:clamp(15px, calc( 105 / var(--inner) * 100vw ), 105px); position:relative; font-size:clamp(18px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight:800; flex: 1 0 300px; max-width:300px; line-height:1; text-align: right; transition:all 0.3s;}
.history-detail-item .year::after {position: absolute; content: ""; top:clamp(6px, calc( 10 / var(--inner) * 100vw ), 10px); right:-5px; width:10px; height:10px; border-radius: 50%; background:#fff; border:2px solid #242424; z-index: 2; }
.history-detail-item .cont-wrap {display:flex; flex:1 0 auto; width:1%;  padding-left:clamp(20px, calc( 105 / var(--inner) * 100vw ), 105px);}
.history-detail-item .cont {display: flex; flex-direction:column; flex:1 0 auto; width:1%; }
.history-detail-item .text {margin-bottom:clamp(20px, calc( 60 / var(--inner) * 100vw ), 60px);}
.history-detail-item .text:last-child {margin-bottom:0;}
.history-detail-item .list {display: flex; margin-top: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); font-size:clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px);}
.history-detail-item .list:first-child {margin-top: 0;}
.history-detail-item .month {flex: 1 0 clamp(30px, calc( 55 / var(--inner) * 100vw ), 55px); max-width: clamp(30px, calc( 55 / var(--inner) * 100vw ), 55px); color:var(--color-1); font-weight:500;}
.history-detail-item .dec {flex: 1 0 auto; width: 1%; color: #454545;}
.progress-container {position:absolute; left:300px; top:10px; height:100%; width: 1px; background:#ddd;}
.progress-container .progress-bar { width:1px; background:var(--color-1);}
.history-detail-item.active .year {font-size:clamp(22px, calc( 60 / var(--inner) * 100vw ), 60px); font-weight:800;}
.history-detail-item.active .year::after {background:url(../images/sub/history-bg.png) no-repeat 50% 50%; background-size:contain; width:100px; height:100px; right:-50px; top:-15px; border:0;}
.history-detail-item.active .month {font-weight:bold; } 
.history-detail-item.active .dec {font-weight: bold; color: #242424;}

.busiwrap .busiitem {margin-top: clamp(30px, calc( 40 / var(--inner) * 100vw ), 40px); padding-top: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px); border-top:1px solid #000;}
.busiwrap .flxWrap {align-items: center;}
.busiwrap .imgbx {flex: 1 0 50%; max-width: 50%; padding-right: clamp(20px, calc( 55 / var(--inner) * 100vw ), 55px); text-align: right;}
.busiwrap .textbx {flex: 1 0 auto; width: 1%;}
.busiwrap .busilist {padding:clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px) clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); border-top:1px dashed #ddd;}
.busiwrap .busilist:first-child {padding-top: 0; border-top: 0;}
.busiwrap .point {font-weight:bold; color:var(--color-1); font-family:var(--font1); letter-spacing: 2px; font-size: clamp(12px, calc( 16 / var(--inner) * 100vw ), 16px);}
.busiwrap .tit {padding-top: clamp(10px, calc( 17 / var(--inner) * 100vw ), 17px); font-size:clamp(18px, calc( 32 / var(--inner) * 100vw ), 32px); font-weight: 500; font-family:var(--font1);}
.busiwrap .dec {padding-top: clamp(12px, calc( 20 / var(--inner) * 100vw ), 20px); color: #454545; line-height: 1.7;}
.busiwrap .bulletbx {margin-top: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); padding:clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px) clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px); border-radius: 20px; background: #f9f9f9;}
.busiwrap .flxWrap.reverse {flex-direction: row-reverse;}
.busiwrap .flxWrap.reverse .imgbx {padding-right: 0; padding-left: clamp(20px, calc( 55 / var(--inner) * 100vw ), 55px); text-align: left;}

.directions {margin-top:40px;}
.directions .address-info {margin-bottom:30px;}
.directions .address-info .comp {color:var(--color-1); font-weight:600; margin-bottom:5px;}
.directions .address-info .addr { font-size:23px; font-weight:600; line-height:1.33em; letter-spacing:-.03em; margin-bottom:5px;}
.directions .address-info .etc {color:#454545;}
.directions .address-info .etc span {display:inline-block; margin-right:16px;}
.directions .address-info .etc span:last-child {margin-right:0;}
.directions .contact-info {border-top:1px solid #ddd; line-height:1.5em;}
.directions .contact-info dl {display:flex; padding:28px 0; border-bottom:1px solid #ddd;}
.directions .contact-info dt {width:180px; padding-left:30px; color:#242424; font-size:1.125em; font-weight:500;}
.directions .contact-info dt svg {vertical-align:middle; margin:-.2em 15px 0 0;}
.directions .contact-info dt path {fill:#ababab;}
.directions .contact-info dd {flex:1 1 auto; min-width:0; width:1%; color:#454545;}

@media (max-width: 1024px) {
	.directions .address-info .addr {font-size:20px;}
	.directions .contact-info dl {padding:20px 0;}
	.directions .contact-info dt {padding-left:20px; width:140px;}
}

@media (max-width: 640px) {
	.directions {margin-top:30px;}
	.directions .address-info .addr {font-size:18px;}
	.directions .address-info {margin-bottom:20px;}
	.directions .contact-info dl {padding:16px 0;}
	.directions .contact-info dt {padding-left:5px; width:110px;}
	.directions .contact-info dt svg {margin-right:10px;}
}

/* 멤버십 */
.member-area .sectitbx {padding-bottom: clamp(35px, calc( 60 / var(--inner) * 100vw ), 60px);}
.tblitem {display: flex; flex-wrap: wrap; margin: -20px;}
.tbllist {flex: 1 0 33.33%; max-width: 33.33%; padding: 20px; }
.tbllist .inner {border-radius:20px; box-shadow: rgba(0, 0, 0, .10) 8px 0 16px; overflow: hidden; background: #fff;}
.tbllist .flxWrap {padding: 15px 0;}
.tbllist .body .flxWrap {padding: 11px 0;}
.tbllist .head.color1 {background: var(--color-1);}
.tbllist .head.color2 {background: #847150;}
.tbllist .head.color3 {background: #544d4a;}
.tbllist .flxWrap span {display: inline-block; flex: 1 0 50%; max-width: 50%; text-align: center;}
.tbllist .head .th {font-size:clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: bold; color: #fff;}
.tbllist .list {border-bottom: 1px solid #ddd;}
.tbllist .list:last-child {border-bottom: 0;}
.tbllist .body span {font-size: clamp(13px, calc( 15 / var(--inner) * 100vw ), 15px);}
.tbllist .body .th {font-weight: 600;}
.tbllist .body .td {color: #454545;}
.tablewrap table {border-top-right-radius: 20px; border-top-left-radius: 20px; overflow: hidden;}
.tablewrap th,
.tablewrap td {padding:clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px); border-right: 1px solid #ddd; text-align: center;}
.tablewrap th:last-child,
.tablewrap td:last-child {border-right: 0;}
.tablewrap th {background:var(--color-1); color: #fff; font-size: clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: bold;}
.tablewrap .bg2 {background: #cdb685;}
.tablewrap td {border-bottom: 1px solid #ddd; color: #454545;}

/* 고객센터 */
.inquiry-area .buttons .cen .btn-pack {padding:0; padding-bottom:clamp(6px, calc( 16 / var(--inner) * 100vw ), 16px); border-radius:50%; width:clamp(80px, calc( 100 / var(--inner) * 100vw ), 100px); min-width:clamp(80px, calc( 100 / var(--inner) * 100vw ), 100px); height:clamp(80px, calc( 100 / var(--inner) * 100vw ), 100px); line-height:initial; background:#000 url(../images/sub/btn-right2.png) no-repeat bottom clamp(16px, calc( 27 / var(--inner) * 100vw ), 27px) center; font-size:clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px); border:0;}