@charset "UTF-8"; 
.reservation-guide-wrap {width:100%; padding:0 0 10rem; display:flex; flex-direction:column; gap:8rem;}
.reservation-intro-area {display:flex; flex-direction:column; gap:4rem;}
.reservation-main-title { font-weight:600; font-size:4.4rem; color:var(--color09); letter-spacing:-0.176rem; line-height:1.4;}
.reservation-intro-banner {width:100%; height:16rem; border:0.1rem solid var(--white100); background:url(/_res/service/bcci/img/center/bg-reservation-guide.png) no-repeat center center/cover; display:flex; align-items:center; border-radius:0.4rem; overflow:hidden;}
.reservation-intro-banner .banner-content {width:100%; padding:0 4rem; display:flex; justify-content:space-between; align-items:center; height:100%;}
.reservation-intro-banner .banner-text { font-weight:600; font-size:2rem; color:var(--color28); line-height:1.4; letter-spacing:-0.02em;}
.reservation-go-btn {display:inline-flex; align-items:center; gap:0.4rem; padding:1rem 1.6rem; background-color:var(--color14); border-radius:10rem;  text-decoration:none; transition:background-color 0.3s;}
.reservation-go-btn:after{content:'';display:inline-flex;width:1.6rem;height:1.6rem;background:url(/_res/service/bcci/img/center/ico-arr01@2x.png) no-repeat center center/100%;}
.reservation-go-btn span { font-size:1.6rem; line-height: 1.4; color:var(--white100); font-weight:400;}
.reservation-go-btn:hover {background-color:var(--color25);}
.reservation-nav-wrap {display:flex; flex-direction:column; gap:4rem;}
.reservation-nav-wrap .nav-title { font-weight:600; font-size:4.4rem; line-height:1.4; color:var(--color09); letter-spacing:-0.04em;}
.reservation-nav-wrap .nav-list {display:flex; width:100%; border-bottom:0.1rem solid var(--color18);}
.reservation-nav-wrap .nav-item {flex:1; text-align:center;}
.reservation-nav-wrap .nav-item a {display:block; padding:1.6rem 0;  font-size:2rem; color:var(--color27); text-decoration:none; line-height:1.4; border-bottom:0.2rem solid transparent;}
.reservation-nav-wrap .nav-item.active a {color:var(--color14); font-weight:600; border-bottom-color:var(--color14);}
.reservation-steps-wrap {display:flex; flex-direction:column; gap:8rem;}
.reservation-step-box {display:flex; flex-direction:column; gap:4rem;}
.reservation-step-header {display:flex; justify-content:space-between; align-items:center; gap:2rem;}
.reservation-step-header .step-title {flex-shrink:0; font-weight:600; font-size:3.2rem; line-height:1.4; color:var(--color09); letter-spacing:-0.064rem;}
.reservation-step-header .title-group {display:flex; flex-direction:column; gap:0.8rem;}
.reservation-step-header .step-intro-text {font-size:1.6rem; color:var(--color09); line-height:1.4;}
.reservation-step-header .step-tabs {display:flex; gap:0.4rem;}
.reservation-step-header .tab-item {padding:1.3rem; max-width:19.8rem; min-height:6rem; background-color:var(--color29); border-radius:0.8rem; color:var(--color27); font-size:1.4rem; line-height: 1.7rem; font-weight:600; cursor:pointer; text-align:center; display:flex; align-items:center; justify-content:center; box-sizing:border-box;}
.reservation-step-header .tab-item.active {background-color:var(--color25); color:var(--white100);}

.reservation-step-content {display:none; flex-direction:column; gap:2.4rem;}
.reservation-step-content.active {display:flex;}
#payment .reservation-step-content{display:flex;}

.info-text-box {padding:4rem 3.2rem; border:0.1rem solid #d2d2d2; border-radius:0.4rem;}
.text-desc { font-size:1.6rem; color:var(--color09); line-height:1.4; letter-spacing:-0.032rem;}
.reservation-guide-wrap .ul-type-dot {display: flex; flex-direction: column; padding-left:0.9rem;}
.reservation-guide-wrap .ul-type-dot > li {position: relative; padding-left: 1.2rem; font-size: 1.6rem; color: var(--color09); line-height: 1.4; letter-spacing: -0.02em; }
.reservation-guide-wrap .ul-type-dot > li::before {content: ''; position: absolute; left: 0; top: 0.9rem; width: 0.3rem; height: 0.3rem;background-color: var(--color09); border-radius: 50%;}
.reservation-guide-wrap .ul-type-dot-s {display: flex; flex-direction: column; padding-left:0.9rem;}
.reservation-guide-wrap .ul-type-dot-s > li {position: relative; padding-left: 1.2rem; font-size: 1.4rem; color: var(--color09); line-height: 1.4; letter-spacing: -0.02em; }
.reservation-guide-wrap .ul-type-dot-s > li::before {content: ''; position: absolute; left: 0; top: 0.8rem; width: 0.3rem; height: 0.3rem; background-color: var(--color09); border-radius: 50%;}
.reservation-guide-wrap .ol-type-normal{padding:0 0 0 1.8rem;}
.reservation-guide-wrap .ol-type-normal > li{font-size: 1.6rem; color: var(--color09); line-height: 1.4; letter-spacing: -0.02em; list-style-type:decimal;}
.method-select-box {padding:4rem 3.2rem; border:0.1rem solid #d2d2d2; border-radius:0.4rem; display:flex; flex-direction:column; gap:2.4rem;}
.method-select-box .sub-title {font-weight:600; font-size:2rem; color:var(--color09);}
.method-btn-group {display:flex; gap:1.6rem;}
.method-btn {padding:1rem 1.6rem; border-radius:10rem; font-size:1.6rem; cursor:pointer; border:none; background-color:var(--color03); color:var(--white100); transition: opacity 0.3s;}
.method-btn.active {background-color:var(--color04);  font-weight: 600;}

.method-select-box .ol-type-normal {display: none;}
.method-select-box .ol-type-normal.active {display: block;}
.reservation-notice-wrap {display:flex; flex-direction:column; gap:2.4rem;}
.notice-item {display:flex; flex-direction:column; gap:1.6rem;}
.notice-title {display:flex; align-items:center; gap:0.4rem; font-weight:600; font-size:2rem; color:var(--color09);}
.notice-title:before{content:'';display:inline-flex;flex-shrink:0;width:2.4rem; height:2.4rem; background:url(/_res/service/bcci/img/center/ico-info01@2x.png) no-repeat center center/100%;}
.notice-title.ico-home:before{background-image:url(/_res/service/bcci/img/center/ico-home01@2x.png);}
.notice-desc {font-size:1.4rem; color:var(--color09); line-height:1.4;}
.training-info-area {display:flex; flex-direction:column; gap:1.2rem;}
.training-box-group {padding:4rem 3.2rem; border:0.1rem solid #d2d2d2; border-radius:0.4rem; display:flex; flex-direction:column; gap:1.2rem;}
.training-info-box {display:flex; flex-direction:column; gap:0.4rem;}
.training-info-box .info-title {font-weight:600; font-size:2rem; line-height:1.4; color:var(--color09); letter-spacing:-0.04em;}
.training-info-box .info-desc {font-size:1.6rem; color:var(--color09);}
.training-footer-text {font-size:1.6rem; line-height:1.4; color:var(--color09); }

.tab-mobile-trigger {display:none;}

@media screen and (max-width: 1024.98px) {
	.reservation-guide-wrapper{padding:0;}
	.reservation-guide-wrap {padding:0;gap:0;overflow:hidden;}
	.reservation-intro-area{gap:0;}
	.reservation-main-title {padding:0 2rem;font-size:3.2rem; letter-spacing:-0.04em;}

	.reservation-intro-banner {height:auto; min-height:16rem;background-image:url(/_res/service/bcci/img/center/bg-reservation-guide-m.jpg);}
	.reservation-intro-banner .banner-content {flex-direction:column; justify-content:center;align-items: flex-start; gap:4rem; padding:6.4rem 2rem;}
	.reservation-intro-banner .banner-text {font-weight:400;font-size:2rem;}
	.reservation-go-btn { justify-content:center;}

	.reservation-nav-wrap {gap:2.4rem;padding:6.4rem 0 0;}
	.reservation-nav-wrap .nav-title {padding:0 2rem;font-size:3.2rem;}
	.reservation-nav-wrap .nav-list {display:grid; grid-template-columns:1fr 1fr; border-top:0.1rem solid var(--color26);  }
	.reservation-nav-wrap .nav-item {border-right:0.1rem solid var(--color26); border-bottom:0.1rem solid var(--color26); background-color:var(--black100);}
	.reservation-nav-wrap .nav-item:nth-of-type(even){border-right:0; }
	.reservation-nav-wrap .nav-item.active{background-color:var(--white100);}
	.reservation-nav-wrap .nav-item a {padding:0.8rem 1rem; font-size:1.2rem; border-bottom:none; min-height:5rem; display:flex; align-items:center; justify-content:center; color:var(--white100); box-sizing:border-box;}
	.reservation-nav-wrap .nav-item.active a { color:var(--color04); font-weight:600;}

	.reservation-steps-wrap {gap:3.2rem;padding:6.4rem 2rem;}
	.reservation-step-box {gap:0.8rem;}
	.reservation-step-header {flex-direction:column; align-items:stretch; position:relative; gap:2.4rem;}
	.reservation-step-header .step-title {font-size:2.4rem;}

	.tab-mobile-trigger {
		display:flex; align-items:center; justify-content:space-between; width:100%; min-height:5.2rem; padding:1.3rem; 
		background-color:var(--color25); color:var(--white100); border-radius:0.8rem; font-size:1.6rem; line-height:1.4; font-weight:600; 
		border:none; cursor:pointer; text-align:left;
	}
	.tab-mobile-trigger:after {
		content:''; display:inline-flex; width:2.4rem; height:2.4rem; 
		background:url(/_res/service/bcci/img/center/ico-arr02@2x.png) no-repeat center center/100%; transition:transform 0.3s;
	}
	.reservation-step-header.is-open .tab-mobile-trigger:after {transform:rotate(180deg);}

	.reservation-step-header .step-tabs {
		display:none; position:absolute; top:calc(100% + 0.4rem); left:0; width:100%; z-index:100; flex-direction:column; 
		background-color:var(--color29); border:0.1rem solid var(--color18); border-radius:0.8rem; overflow:hidden; 
		box-shadow:0 0.8rem 1.6rem rgba(0,0,0,0.15); padding:4px 0;
	}
	.reservation-step-header.is-open .step-tabs {display:flex;}
	.reservation-step-header .tab-item {
		display:flex; justify-content:flex-start; width:100%; max-width:none; padding:1.5rem 2rem; min-height:5.2rem; background:transparent; border-radius:0; color:var(--color27); font-size:1.6rem; line-height:1.4; font-weight:400;text-align:left; box-sizing:border-box;
	}
	.reservation-step-header .tab-item:last-child {border-bottom:none;}
	.reservation-step-header .tab-item.active {display:none;}
	.reservation-step-header .step-intro-text{font-size: 1.4rem; color:var(--color03);}
	.info-text-box, .method-select-box, .training-box-group {padding:2.4rem;}
	.info-text-box {border-radius:0.8rem;}
	
	.text-desc {font-size:1.5rem; letter-spacing:-0.03rem;}

	.method-select-box{gap:2rem;}
	.method-select-box .sub-title {font-size:1.6rem;line-height:1.4;}
	.method-btn-group {flex-direction:column;}
	.method-btn {width:100%; text-align:left; justify-content:flex-start; padding:1.2rem 2.4rem;}

	.notice-title {font-size:1.8rem;}
	.notice-desc {padding-left:0;}
	.notice-item .ol-type-normal {padding-left:1.4rem;}
	
	.reservation-step-content#training-equipment {gap:1.6rem;}
	.training-box-group{gap:1.2rem;}
	.training-info-box .info-title {padding:0 0 0 2.4rem;text-indent:-1.6rem; font-size:1.6rem;}
	.training-info-box .info-desc{padding:0 0 0 2.4rem; font-size: 1.4rem;line-height:1.4;}
	.training-footer-text {font-size:1.4rem;font-weight:600;}
	
	.reservation-guide-wrap  .ol-type-normal > li{font-size:1.4rem;}
}