@charset "utf-8";
/* *******************************************************
 * filename : content.css
 * description : 서브페이지 컨텐츠 CSS
 * date : 2024-12-05
******************************************************** */
/* ****************** 공통 :: 카테고리 탭 ********************** */
.sub-cate-tab-box{overflow-y: hidden; overflow-x: auto; margin-top: 4rem;}
html:not(.is-mobile) .sub-cate-tab-box::-webkit-scrollbar {height: 5px;}
html:not(.is-mobile) .sub-cate-tab-box::-webkit-scrollbar-thumb {background-color: #000;}
.sub-cate-tab-list{display: flex; width: 1400px; flex-wrap: nowrap; border-bottom: 1px solid #ccc;}
.sub-cate-tab-list li{padding-right: 3rem; position: relative;}
.sub-cate-tab-list li:before{position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px; background-color: #ccc; content: '';}
.sub-cate-tab-list li a{padding: 1rem 0; font-size: 1.7rem; line-height: 1.3; letter-spacing: -0.025em; font-weight: 600; color: #555; display: block; position: relative;}
.sub-cate-tab-list li a:before{position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background-color: var(--main-color); content: ''; opacity: 0;}
.sub-cate-tab-list li.selected a{color: var(--main-color);}
.sub-cate-tab-list li.selected a:before{opacity: 1;}

@media all and (max-width:800px){
	.sub-cate-tab-list{width: 800px;}
	/* .sub-cate-tab-list li{width: 25%; padding-right: 0;}
	.sub-cate-tab-list li a{padding: 1.2rem 0.5rem 1rem; width: 100%; height: 100%; font-size: 1.7rem; line-height: 1.2; text-align: center; display: flex; align-items: center; justify-content: center; box-sizing: border-box;} */
}

.sub-board-wrapper{margin-top: 2.5rem;}
.sub-board-list{}
.sub-board-item{}
.sub-board-item + .sub-board-item{margin-top: 1rem;}
.sub-board-item a{padding: 4rem 22rem 4rem 4rem; display: block; background-color: #f6f6f6; border: 3px solid #f6f6f6; border-radius: 0.5rem; position: relative; box-sizing: border-box; transition:var(--transition-custom); transition-property: background-color, border-color;}
.sub-board-txt{}
.sub-board-txt h5{font-size: 2rem; line-height: 1.33; font-weight: 600; letter-spacing: -0.025em; color: #555; transition:var(--transition-custom); transition-property: color;}
.sub-board-txt ul{margin-top: 1.5rem; display: flex; flex-wrap:wrap;}
.sub-board-txt ul li{margin-right: 2rem; font-size: 1.4rem; line-height: 1.3; letter-spacing: -0.025em; color: rgba(0,0,0,0.8); position: relative;}
.sub-board-txt ul li:before{position: absolute; top: 0; right: -1.7rem; content: '▪';}
.sub-board-txt ul li:last-child:before{display: none;}
.sub-board-btn{position: absolute; top: 50%; margin-top: -2.5rem; right: 4rem; width: 16rem; height: 5rem; font-size: 1.6rem; letter-spacing: -0.025em; color: #555; background-color: #fff; border: 1px solid #ddd; box-sizing: border-box; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; transition:var(--transition-custom); transition-property: color, background-color, border-color;}
.sub-board-btn i{margin-right: 1rem;}

.sub-board-item a:hover{border-color: #ddd; background-color: #fff;}
.sub-board-item a:hover .sub-board-txt h5{color: #222;}
.sub-board-item a:hover .sub-board-btn{color: #fff; background-color: var(--main-color); border-color: var(--main-color);}

@media all and (max-width:800px){
	.sub-board-wrapper{margin-top: 2.5rem;}
	.sub-board-item + .sub-board-item{margin-top: 1rem;}
	.sub-board-item a{padding: 3rem;}
	.sub-board-txt h5{font-size: 2rem; line-height: 1.33;}
	.sub-board-txt ul{margin-top: 1.5rem;}
	.sub-board-txt ul li{margin-right: 2rem; font-size: 1.4rem; line-height: 1.3;}
	.sub-board-txt ul li:before{right: -1.7rem;}
	.sub-board-btn{position: static; margin-top: 2.5rem; width: 16rem; height: 5rem; font-size: 1.6rem;}
	.sub-board-btn i{margin-right: 1rem;}
}


/* ****************** 공통 :: 갤러리 게시판 ********************** */
.sub-gallery-wrapper{margin-top: 4.5rem;}
.sub-gallery-list{margin: -2.5rem -2rem; display: flex; flex-wrap:wrap;}
.sub-gallery-item{margin: 2.5rem 2rem; width: calc(33.33% - 4rem);}
.sub-gallery-item a{display: block;}
.sub-gallery-img{position: relative; width: 100%; height: 0; padding-top: 56.81%; border-radius: 0.5rem; overflow: hidden;}
.sub-gallery-img .img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; transition:var(--transition-custom);background-size: cover; background-position:center; background-repeat:no-repeat;}
.sub-gallery-img .hover{position: absolute; bottom: 0; right: 0; width: 0; height: 0; border-bottom: 3rem solid #fff; border-top: 3rem solid transparent; border-left: 3rem solid transparent; border-right: 3rem solid #fff; display: flex; justify-content: flex-start; align-items: flex-start; transform: translate(3rem,3rem); transition:var(--transition-custom); transition-property: transform;}
.sub-gallery-img .hover i{position: relative; top: -0.2rem; font-size: 3.7rem; color: var(--main-color);}
.sub-gallery-txt{margin-top: 1.5rem;}
.sub-gallery-txt span{font-size: 1.4rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.025em; color: rgba(0,0,0,0.8); display: block;}
.sub-gallery-txt span + h5{margin-top: 1rem;}
.sub-gallery-txt h5{font-size: 1.8rem; line-height: 1.33; font-weight: 600; letter-spacing: -0.025em; color: #000; transition:var(--transition-custom); transition-property: color; word-break: break-word;}
.sub-gallery-txt p{margin-top: 1.5rem; font-size: 1.4rem; line-height: 1.42; color: #999; word-break: break-word;}
.sub-gallery-txt .download-btn{margin-top: 4rem; width: 13rem; height: 4rem; font-size: 1.4rem; letter-spacing: -0.025em; color: #555; border: 1px solid #ddd; box-sizing: border-box; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; transition:var(--transition-custom); transition-property: color, background-color, border-color;}
.sub-gallery-txt .download-btn i{margin-right: 1rem;}

.sub-gallery-item a:hover .sub-gallery-img .img{transform: scale(1.1) rotate(0.002deg);}
.sub-gallery-item a:hover .sub-gallery-img .hover{transform: translate(0,0);}
.sub-gallery-item a:hover .sub-gallery-txt h5{color: var(--main-color);}
.sub-gallery-item a:hover .sub-gallery-txt .download-btn{color: #fff; background-color: var(--main-color); border-color: var(--main-color);}

/* 다운로드 버튼 추가 */
.sub-gallery-list.col-4{margin: -3rem -2rem;}
.sub-gallery-list.col-4 .sub-gallery-item{margin: 3rem 2rem; width: calc(25% - 4rem);}
.sub-gallery-list.col-4 .sub-gallery-txt{margin-top: 2.5rem;}


@media all and (max-width:1024px){
	.sub-gallery-list.col-4 .sub-gallery-item{width: calc(50% - 4rem);}
}
@media all and (max-width:800px){
	.sub-gallery-list{margin: -2.5rem -1rem;}
	.sub-gallery-item{margin: 2.5rem 1rem; width: calc(50% - 2rem);}
	.sub-gallery-img .hover i{top: -0.2rem; font-size: 3.7rem;}
	.sub-gallery-txt{margin-top: 2.5rem;}
	.sub-gallery-txt span{font-size: 1.4rem; line-height: 1.3;}
	.sub-gallery-txt span + h5{margin-top: 1rem;}
	.sub-gallery-txt h5{font-size: 2rem; line-height: 1.3;}
	.sub-gallery-txt p{margin-top: 1.5rem; font-size: 1.4rem; line-height: 1.42;}
	.sub-gallery-txt .download-btn{margin-top: 4rem; width: 13rem; height: 4rem; font-size: 1.4rem;}
	.sub-gallery-txt .download-btn i{margin-right: 1rem;}

	/* 다운로드 버튼 추가 */
	.sub-gallery-list.col-4{margin: -3rem -1rem;}
	.sub-gallery-list.col-4 .sub-gallery-item{margin: 3rem 1rem; width: calc(50% - 2rem);}
	.sub-gallery-list.col-4 .sub-gallery-txt{margin-top: 2.5rem;}
}



/* ****************** 뷰페이지  ********************** */
.bbs-view-con{border-top:2px solid #000;}
.bbs-view-top{padding: 3rem 2rem; border-bottom:1px solid #ccc;}
.bbs-view-top .bbs-write-filter{display: flex; flex-wrap:wrap;}
.bbs-view-top .bbs-write-filter li{margin-bottom: 1.5rem; margin-right: 2.5rem; font-size: 1.6rem; line-height: 1.3; letter-spacing: -0.025em; font-weight: 600; color: rgba(0,0,0,0.8);}
.bbs-view-top .bbs-write-filter li:nth-child(odd){color: var(--main-color);}
.bbs-view-top .bbs-cate{margin-bottom: 1.5rem; font-size: 1.6rem; line-height: 1.3; letter-spacing: -0.025em; font-weight: 600; color: rgba(0,0,0,0.8); display: block;}
.bbs-view-top .bbs-tit{font-size:2.4rem; letter-spacing:-0.025em; line-height: 1.3; font-weight:600; color: #1c1f1a; word-break:keep-all;}
.bbs-view-top .bbs-sub-tit{margin-top: 2.5rem; font-size:1.6rem; letter-spacing:-0.025em; line-height:1.3; color: #555; word-break:keep-all;}
.bbs-view-top .bbs-info{margin-top: 2.5rem; font-size:1.6rem; letter-spacing:-0.025em; line-height:1.3; color: #555; word-break:keep-all; display: flex; flex-wrap:wrap;}
.bbs-view-top .bbs-info dt{margin-right: 1rem;}
.bbs-view-top .bbs-info dd{margin-right: 3rem;}
.bbs-view-content{padding:3.5rem 0; font-size:1.6rem; letter-spacing:-0.025em; line-height:1.87; color: #333; border-bottom:1px solid #ccc;}
.bbs-view-content img{margin: 3rem 0; max-width: 100%; display: block;}
.bbs-view-content video{margin: 0 auto; max-width: 1040px; width: 100%; display: block;}
.bbs-view-btn{margin: 6rem 0;}
.bbs-view-btn .btn{margin: 0 auto; width: 16rem; height: 5rem; font-size: 1.6rem; letter-spacing: -0.025em; color: #555; text-align: center; background-color: #eee; display: flex; align-items: center; justify-content: center;}
.bbs-view-btn .btn i{margin-right: 1.7rem;}

.bbs-view-btn .btn:hover i{animation: navani 0.4s ease-in-out;}

/* 연관동영상 있는 ver */
.bbs-view-con.add-related{border-top: 0;}
.add-related-video{padding-bottom: 3.5rem; border-bottom: 1px solid #ccc; display: flex; flex-wrap:wrap; justify-content: space-between;}
.add-related-video-left{width: calc(100% - 36rem); border-top:2px solid #000;}
.add-related-video-left .bbs-view-content{padding-bottom: 0; border-bottom: 0;}
.add-related-video-right{width: 32rem; max-height: 80.5rem; overflow-x: hidden; overflow-y: auto;}
html:not(.is-mobile) .add-related-video-right::-webkit-scrollbar {width: 4px; border-radius: 4px;}
html:not(.is-mobile) .add-related-video-right::-webkit-scrollbar-track {background-color: #ddd;}
html:not(.is-mobile) .add-related-video-right::-webkit-scrollbar-thumb {background-color: #999; border-radius: 4px;}
.add-related-list{}
.add-related-item{}
.add-related-item + .add-related-item{margin-top: 2.4rem;}
.add-related-item a{display: flex; flex-wrap:wrap; align-items: center;}
.add-related-img{width: 14rem; position: relative; border-radius: 0.5rem; overflow: hidden;}
.add-related-img .img{position: relative; width: 100%; height: 0; padding-top: 57.14%; display: block;}
.add-related-img .hover{position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 3.7rem; color: #fff; background-color: var(--main-color); display: flex; align-items: center; justify-content: center; opacity: 0; transition:var(--transition-custom); transition-property: opacity;}
.add-related-txt{padding-left: 2rem; width: calc(100% - 14rem); box-sizing: border-box;}
.add-related-txt span{font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.025em; font-weight: 600; color: rgba(0,0,0,0.8); display: block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.add-related-txt h5{margin-top: 1rem; height: 2.66em; font-size: 1.5rem; line-height: 1.33; letter-spacing: -0.025em; font-weight: 700; color: #000; overflow:hidden; display:block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition:var(--transition-custom); transition-property: color;}

.add-related-item a:hover .add-related-img .hover{opacity: 1;}
.add-related-item a:hover .add-related-txt h5{color: var(--main-color);}

@keyframes navani{
	0% {transform: scaleX(1);}
	25% {transform: scaleX(0);}
	50% {transform: scaleX(1);}
	75% {transform: scaleX(0);}
	100% {transform: scaleX(1)}
}

@media all and (max-width:800px){
	.bbs-view-top{padding: 3rem 2rem;}
	.bbs-view-top .bbs-write-filter li{margin-bottom: 1.5rem; margin-right: 2.5rem; font-size: 1.6rem; line-height: 1.3;}
	.bbs-view-top .bbs-cate{margin-bottom: 1.5rem; font-size: 1.6rem; line-height: 1.3;}
	.bbs-view-top .bbs-tit{font-size:2.4rem; letter-spacing:-0.025em; line-height: 1.3;}
	.bbs-view-top .bbs-sub-tit{margin-top: 2.5rem; font-size:1.6rem;}
	.bbs-view-top .bbs-info{margin-top: 2.5rem; font-size:1.6rem; letter-spacing:-0.025em; line-height:1.3;}
	.bbs-view-top .bbs-info dt{margin-right: 1rem;}
	.bbs-view-top .bbs-info dd{margin-right: 3rem;}
	.bbs-view-content{padding:3.5rem 2rem; font-size:1.6rem; letter-spacing:-0.025em; line-height:1.3;}
	.bbs-view-btn{margin: 6rem 0;}
	.bbs-view-btn .btn{width: 16rem; height: 5rem; font-size: 1.6rem;}
	.bbs-view-btn .btn i{margin-right: 1.7rem;}
	
	/* 연관동영상 있는 ver */
	.add-related-video{padding-bottom: 3.5rem; display: block;}
	.add-related-video-left{width: 100%;}
	.add-related-video-left .bbs-view-content{padding-bottom: 3.5rem; border-bottom: 1px solid #ccc;}
	.add-related-video-right{margin-top: 3rem; width: 100%; max-height: 29rem;}
	.add-related-item + .add-related-item{margin-top: 2rem;}
	.add-related-img{width: 14rem;}
	.add-related-img .hover{font-size: 3.7rem;}
	.add-related-txt{padding-left: 2rem; width: calc(100% - 14rem);}
	.add-related-txt span{font-size: 1.2rem; line-height: 1.3;}
	.add-related-txt h5{margin-top: 1rem; height: 2.66em; font-size: 1.5rem; line-height: 1.33;}
}


/* ****************** 공통 :: PAGING ********************** */
.paging{display:flex; justify-content:center; width:100%; text-align:center; margin:5rem 0 3rem; flex-wrap:wrap;}
.paging a{position:relative; display:block; width:auto; height:30px;  line-height:30px; padding:0 7px 3px; margin:0 5px; text-align:center; font-size:16px; color:#868686; letter-spacing:-0.25px; background-color:#fff; border: 0;}
.paging a:hover{color:#222;}
.paging a.cur{background-color:transparent; color:#333;}
.paging a.cur:after{position:absolute; bottom:0px; left:50%; width:100%; margin-left:-50%; height:2px; background-color:#333; content:"";}
.paging a.paging-arrow i{position:relative; top:-1px; vertical-align:middle; color:inherit; font-size:24px;}
.paging .paging-first i,
.paging .paging-last i{transform:translateX(-8px)}
.paging .paging-first i:before,
.paging .paging-last i:before{display:block;width:7px}
@media all and (max-width:480px) {
	.paging:not(.no-margin) a.paging-prev{margin-right:2px}
	.paging:not(.no-margin) a.paging-next{margin-left:2px}
}
@media all and (max-width:359px) {
	.paging a{margin:0 0 0 -1px}
	.paging:not(.no-margin) a.paging-prev{margin-right:0}
	.paging:not(.no-margin) a.paging-next{margin-left:-1px}
}


/* ****************** 04 :: Clinical image 팝업 ********************** */
.popup-clinical-con{}
.popup-clinical-img{width: 100%;}
.popup-clinical-img img{width: 100%;}
.popup-clinical-txt{margin-top: 2rem;}
.popup-clinical-txt span{z-index: 1.4rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.025em; color: rgba(0,0,0,0.8);}
.popup-clinical-txt h5{margin-top: 1.5rem; font-size: 1.8rem; line-height: 1.33; font-weight: 600; letter-spacing: -0.025em; color: #000;}


/* ****************** 05 :: Contact Us ********************** */
.contact-page {display: flex; justify-content: space-between;}
.contact-inquiry-left, 
.contact-inquiry-right{width: 49.03%;}
.contact-inquiry-left .inquiry-tit {font-size: 3.4rem; line-height: 1.3; font-weight: 700; color: #222;}
.contact-inquiry-left .inquiry-txt {font-size: 3rem; line-height: 1.4; font-weight: 700; letter-spacing: -0.035em; color: #000;}
.contact-inquiry-left .inquiry-txt:before{margin: 4rem 0 3rem; width: 3.5rem; height: 0.3rem; background-color: #ddd; content: ''; display: block;}

.contact-inquiry-right{padding-top: 5rem;}
.contact-inquiry-info{margin-bottom: 2rem; font-size: 1.4rem; line-height: 1.3; color: #666; text-align: right;}
.contact-inquiry-info em{color: var(--main-color);}
.contact-inquiry-item{display: flex; flex-wrap:wrap; align-items: center;}
.contact-inquiry-item.align-top{align-items: flex-start;}
.contact-inquiry-item + .contact-inquiry-item{margin-top: 0.5rem;}
.contact-inquiry-item .tit{width: 16rem; font-size: 1.6rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.05em; color: #000;}
.contact-inquiry-item.align-top .tit{padding-top: 1.5rem;}
.contact-inquiry-item .tit em{color: var(--main-color);}
.contact-inquiry-item .form{width: calc(100% - 16rem);}
.contact-inquiry-item .form.col-2{display: flex; align-items: center; justify-content: space-between;}
.contact-inquiry-item .form.col-2 input{width: 48%;}
.contact-inquiry-item .form input{padding: 0 2rem; height:5rem; width:100%; font-size: 1.5rem; letter-spacing: -0.025em; color: rgba(153,153,153,0.8); background-color:#f3f3f3; border:1px solid #f3f3f3; box-sizing:border-box; border-radius: 2.5rem;}
.contact-inquiry-item .form textarea{padding: 2rem 2rem; height:22rem; width:100%; font-size: 1.5rem; letter-spacing: -0.025em; color: rgba(153,153,153,0.8); resize:none; background-color:#f3f3f3; border:1px solid #f3f3f3; box-sizing:border-box; border-radius: 2.5rem;}
.contact-inquiry-item .form input::placeholder,
.contact-inquiry-item .form textarea::placeholder{color: rgba(153,153,153,0.8);}
.contact-inquiry-item .form input:focus,
.contact-inquiry-item .form textarea:focus{outline: none;}

.contact-inquiry-agree-con{margin-top:5rem; padding: 3rem 0; border-top: 1px solid #555; border-bottom: 1px solid #ddd;}
.contact-inquiry-agree-con .agree-txt{display: flex; align-items: center; justify-content: space-between; position: relative; padding-top: 0; margin-top:0;}
.contact-inquiry-agree-con .agree-txt .more {display: flex; align-items: center; font-size: 1.6rem; font-weight: 600; line-height: 1em; letter-spacing: -0.025em; color: #888; cursor: pointer;}
.contact-inquiry-agree-con .agree-txt .more i {font-size: 1.8rem; padding-left: 0.7rem; width: 1.8rem; height: 1.8rem; display: inline-block;}
.contact-inquiry-agree-con .agree-txt .more i::before {width: 1.8rem; height: 1.8rem; display: inline-block;}
.contact-inquiry-agree-con .agree-txt .more i.rotate::before {content: "\e932";}
.contact-inquiry-agree-con .agree-tit {padding-bottom: 1.5rem; font-size: 2rem; letter-spacing: -0.025em; font-weight: 600; color: #222;}
.contact-inquiry-agree-con  .inquiry-agreement-inner{padding:2rem; height:22rem; font-size: 1.6rem; line-height: 1.3; color: #999; overflow-y:auto; overflow-x:hidden; background-color:#f6f6f6; box-sizing:border-box;}
.contact-inquiry-agree-con .agree-inner {margin-top: 3rem;}
.contact-inquiry-agree-con .agree-txt:first-child{margin-top:0}
.contact-inquiry-agree-con .agree-txt input{display:none;}
.contact-inquiry-agree-con .agree-txt label{position:relative; padding-left:2.6rem; font-size: 1.6rem; line-height: 1.5em; letter-spacing: -0.025em; font-weight: 600; color: #555; display: block;}
.contact-inquiry-agree-con .agree-txt label:before{position:absolute; top: -0.1rem; left:0; content: "\e9c6"; font-family: xeicon; font-weight: 400;}
.contact-inquiry-agree-con .agree-txt input:checked + label{color: var(--main-color);}
.contact-inquiry-agree-con .agree-txt input:checked + label:before{content: "\e92b";}

.contact-inquiry-btn{margin-top: 3rem;}
.contact-inquiry-btn button{width: 18rem; height: 5rem; font-size: 1.8rem; letter-spacing: -0.025em; font-weight: 600; color: #fff; border-radius: 5rem; border: 0; background-color: var(--main-color);}


/* ***********************
	*	페이크폼 스타일 추가css 
*********************** */
.fakeform-selectbox{position: relative; display:inline-block; width: 100%;}
.fakeform-selectbox select{opacity: 0; visibility: hidden;}
.select-option.select-in-popup{z-index: 10000 !important;}
/* fake form - 기본 select 스타일 */
.fakeform-selectbox .select-title {text-indent: 2rem; width: 100% !important; text-align: left; vertical-align: middle; border:0; line-height: 5rem; font-size: 1.5rem; letter-spacing: -0.025em; color: rgba(153,153,153,0.8); border: 1px solid #f3f3f3; background-color: #f3f3f3; display: inline-block; box-sizing: border-box; cursor: pointer; border-radius:2.5rem;}
.fakeform-selectbox .select-title:after{font-family: 'xeicon'; position:absolute; top:50%; right:2rem; transform:translateY(-50%); content: "\e936"; font-size:2.4rem; color: #999;}
.fakeform-selectbox .select-title strong {width: 100%; font-weight: 400; word-break: break-all; display: block; overflow: hidden;}
.fakeform-selectbox .select-title.active{border-bottom-color: #fff; border-radius: 2.5rem 2.5rem 0 0;}
.fakeform-selectbox .select-title.active:after{content: "\e930";}
.fakeform-selectbox .select-title.focus{}
.fakeform-selectbox .select-title.disabled{}
/* 옵션창 */
.select-option {border: 1px solid #f3f3f3; border-top: 0; background: #f3f3f3; border-radius:0 0 2.5rem 2.5rem; max-height: 200px; overflow: auto; z-index: 999 !important; box-shadow: 0rem 1rem 1rem -0.5rem rgba(0, 0, 0, 0.15);}
html:not(.is-mobile) .select-option::-webkit-scrollbar{width: 5px;}
html:not(.is-mobile) .select-option::-webkit-scrollbar-thumb{background-color:#333; border-radius:5px; transition:all 0.5s;}
html:not(.is-mobile) .select-option::-webkit-scrollbar-track{background-color:#eee;}
.select-option ul {margin: 0; padding: 0;}
.select-option li {list-style: none;}
.select-option span,
.select-option strong {height: auto; font-size: 1.4rem; line-height: 1.5; color: rgba(153,153,153,0.8); white-space: nowrap; text-overflow: ellipsis; text-decoration: none; padding: 1.5rem 2rem; display: block; overflow: hidden; cursor: pointer;}
.select-option span:hover {color: #999;}
.select-option span.selected {color: #999; font-weight: 600;}
.select-option .disabled span,
.select-option .disabled strong {color: #bbb; text-decoration: line-through; background: none; cursor: default;}

/* ***********************
	*	커스텀 체크박스 스타일 추가css 
*********************** */
.cm-custom-checkbox{padding: 1rem 0; padding-left: 2rem; display: flex; flex-wrap:wrap;}
.cm-custom-checkbox .checkbox-item{margin: 1rem 0; margin-right: 2rem;}
.cm-custom-checkbox .checkbox-item input{display:none;}
.cm-custom-checkbox .checkbox-item label{position:relative; padding-left:2.6rem; font-size: 1.6rem; line-height: 1.5em; letter-spacing: -0.025em; font-weight: 500; color: #555; display: block;}
.cm-custom-checkbox .checkbox-item label:before{position:absolute; top: -0.1rem; left:0; content: "\e9c6"; font-family: xeicon; font-weight: 400;}
.cm-custom-checkbox .checkbox-item input:checked + label{color: var(--main-color);}
.cm-custom-checkbox .checkbox-item input:checked + label:before{content: "\e92b";}

/* ***********************
	*	커스텀 라디오박스 스타일 추가css 
*********************** */
.cm-custom-radio{padding: 1rem 0; padding-left: 2rem; display: flex; flex-wrap:wrap;}
.cm-custom-radio .radio-item{margin: 1rem 0; margin-right: 2rem;}
.cm-custom-radio .radio-item input{display:none;}
.cm-custom-radio .radio-item label{position:relative; padding-left:2.6rem; font-size: 1.6rem; line-height: 1.5em; letter-spacing: -0.025em; font-weight: 600; color: #555; display: block;}
.cm-custom-radio .radio-item label:before{position:absolute; top: -0.1rem; left:0; content: "\e9c6"; font-family: xeicon; font-weight: 400;}
.cm-custom-radio .radio-item input:checked + label{color: var(--main-color);}
.cm-custom-radio .radio-item input:checked + label:before{content: "\e9c7";}

@media all and (max-width: 800px) {
	.contact-page {display: block;}
	.contact-inquiry-left, 
	.contact-inquiry-right{width: 100%;}
	.contact-inquiry-left .inquiry-tit {font-size: 3.4rem; line-height: 1.3;}
	.contact-inquiry-left .inquiry-txt {font-size: 3rem; line-height: 1.4;}
	.contact-inquiry-left .inquiry-txt:before{margin: 4rem 0 3rem; width: 3.5rem; height: 0.3rem;}

	.contact-inquiry-right{padding-top: 5rem;}
	.contact-inquiry-info{margin-bottom: 2rem; font-size: 1.4rem; line-height: 1.3;}
	.contact-inquiry-item{display: flex; flex-wrap:wrap; align-items: center;}
	.contact-inquiry-item.align-top{align-items: flex-start;}
	.contact-inquiry-item + .contact-inquiry-item{margin-top: 0.5rem;}
	.contact-inquiry-item .tit{width: 12rem; font-size: 1.6rem; line-height: 1.3;}
	.contact-inquiry-item.align-top .tit{padding-top: 1.5rem;}
	.contact-inquiry-item .form{width: calc(100% - 12rem);}
	.contact-inquiry-item .form.col-2 input{width: 48%;}
	.contact-inquiry-item .form input{padding: 0 2rem; height:5rem; width:100%; font-size: 1.5rem;}
	.contact-inquiry-item .form textarea{padding: 2rem 2rem; height:22rem; width:100%; font-size: 1.5rem; border-radius: 2.5rem;}

	.contact-inquiry-agree-con{margin-top:5rem; padding: 3rem 0;}
	.contact-inquiry-agree-con .agree-txt .more {font-size: 1.6rem; font-weight: 600; line-height: 1em;}
	.contact-inquiry-agree-con .agree-txt .more i {font-size: 1.8rem; padding-left: 0.7rem; width: 1.8rem; height: 1.8rem;}
	.contact-inquiry-agree-con .agree-txt .more i::before {width: 1.8rem; height: 1.8rem;}
	.contact-inquiry-agree-con .agree-tit {padding-bottom: 1.5rem; font-size: 2rem;;}
	.contact-inquiry-agree-con  .inquiry-agreement-inner{padding:2rem; height:22rem; font-size: 1.6rem; line-height: 1.3;}
	.contact-inquiry-agree-con .agree-inner {margin-top: 3rem;}
	.contact-inquiry-agree-con .agree-txt:first-child{margin-top:0}
	.contact-inquiry-agree-con .agree-txt label{padding-left:2.6rem; font-size: 1.6rem; line-height: 1.5em;}
	.contact-inquiry-agree-con .agree-txt label:before{top: -0.1rem;}

	.contact-inquiry-btn{margin-top: 3rem;}
	.contact-inquiry-btn button{width: 18rem; height: 5rem; font-size: 1.8rem;}

	/* 커스텀 셀렉트 */
	.fakeform-selectbox .select-title {text-indent: 1em; font-size: 1.4rem; line-height: 5rem; border-radius:2.5rem;}
	.fakeform-selectbox .select-title:after{right:0.7em; font-size:2rem;}
	.fakeform-selectbox .select-title.active{border-radius: 2.5rem 2.5rem 0 0;}
	/* 옵션창 */
	.select-option span,
	.select-option strong {height: auto; font-size: 1.3rem; font-weight: 500; line-height: 1.5; padding: 1.5rem 1em;}

	/* 커스텀 체크박스 */
	.cm-custom-checkbox{padding: 1rem 0; padding-left: 2rem;}
	.cm-custom-checkbox .checkbox-item{margin: 1rem 0; margin-right: 2rem;}
	.cm-custom-checkbox .checkbox-item label{padding-left:2.6rem; font-size: 1.6rem; line-height: 1.5em;}
	.cm-custom-checkbox .checkbox-item label:before{top: -0.1rem;}

	/* 커스텀 라디오박스 */
	.cm-custom-radio{padding: 1rem 0; padding-left: 2rem;}
	.cm-custom-radio .radio-item{margin: 1rem 0; margin-right: 2rem;}
	.cm-custom-radio .radio-item label{padding-left:2.6rem; font-size: 1.6rem; line-height: 1.5em;}
	.cm-custom-radio .radio-item label:before{top: -0.1rem;}
}

/* ****************** 회원관련 css ********************** */
/* 회원가입 구분 페이지 */
.sub-join-page{max-width: 90rem; margin: 0 auto;}
.sub-join01-tit{font-size: 2.6rem; line-height: 1.35; letter-spacing: -0.025em; color: #000; text-align: center;}
.sub-join01-tit b{font-weight: 600; border-bottom: 2px solid #000; display: inline-block;}
.sub-join01-quick{margin-top: 5.5rem;}
ul.sub-join01-quick-list{margin: 0 -2rem; display: flex; flex-wrap:wrap; align-items: center; justify-content: center;}
ul.sub-join01-quick-list li{width: calc(50% - 4rem); max-width: 30rem; margin: 0 2rem;}
ul.sub-join01-quick-list li a{width: 100%; height: 30rem; background-color: var(--main-color); border-radius: 3rem; overflow: hidden; display: flex;     flex-direction: column; align-items: center; justify-content: center;}
ul.sub-join01-quick-list li:first-child a{background-color: #000;}
ul.sub-join01-quick-list li a .icon{margin: 0 auto; width: 12rem; height: 12rem; background-color: rgba(255,255,255,0.15); border-radius: 100%; display: flex; flex-wrap:wrap; align-items: center; justify-content: center;}
ul.sub-join01-quick-list li a .icon img{width: 5rem;}
ul.sub-join01-quick-list li a p{margin-top: 2rem; width: 100%; font-size: 2.4rem; font-weight: 600; letter-spacing: -0.05em; color: #8787ff; text-align: center;}
ul.sub-join01-quick-list li:first-child a p{color: #69e7cb;}
ul.sub-join01-quick-list li a p b{color: #fff; font-weight: 600;}
.sub-join01-txt{margin-top: 7.5rem; font-size: 1.5rem; letter-spacing: -0.025em; font-weight: 400; color: #000; text-align: center;}
.sub-join01-txt a.cm-move-link{display: inline-block; margin-left: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--main-color); color: var(--main-color); font-size: 1.6rem;}

@media all and ( min-width: 801px ){
	ul.sub-join01-quick-list li a:hover .icon img{animation: navani 0.4s ease-in-out;}
}

@keyframes navani{
	0% {transform: scaleX(1);}
	25% {transform: scaleX(0);}
	50% {transform: scaleX(1);}
	75% {transform: scaleX(0);}
	100% {transform: scaleX(1)}
}

@media all and ( max-width: 800px ){
	ul.sub-join01-quick-list{margin: 0 -1rem;}
	ul.sub-join01-quick-list li{width: calc(50% - 2rem); margin: 0 1rem;}
	ul.sub-join01-quick-list li a{height: 24rem;}
	ul.sub-join01-quick-list li a .icon{width: 9rem; height: 9rem;}
	ul.sub-join01-quick-list li a .icon img{width: 4rem;}
	ul.sub-join01-quick-list li a p{margin-top: 2rem; font-size: 2rem;}
	.sub-join01-txt {margin-top: 5.5rem; font-size: 1.5rem;}
}

.member-wrapper{max-width:1000px; margin:0px auto;}

/* 공통 :: 상단 진행과정 바 */
.join-process-bar-con > ol{margin:4rem auto 9rem; text-align:center; display: flex; flex-wrap:wrap; align-items: center; justify-content: center;}
.join-process-bar-con > ol > li{display:block; width:33.33%; text-align:center; letter-spacing: -0.5px; background:url("../images/content/process_arrow.png") no-repeat 0 50%; background-size:8px auto}
.join-process-bar-con > ol > li:first-child{background:none;}
.join-process-bar-con > ol > li .process-icon{width:48px; height:48px; color:#fff; background-color:#ccc; border-radius:50%; display:block; margin:0px auto;}
.join-process-bar-con > ol > li.current .process-icon{background-color:#424446}
.join-process-bar-con > ol > li .process-icon i{font-size:24px; line-height:48px;}
.join-process-bar-con > ol > li dl{padding-top:15px; text-align:center;}
.join-process-bar-con > ol > li dl dt{font-size:13px; color:#888;}
.join-process-bar-con > ol > li dl dd{padding-top:7px; font-size:17px; color:#333;}

/* 공통 :: 회원폼 레이아웃 */
.member-con-inner{padding-bottom: 6rem;}
.member-search-con-inner{padding:75px 0; border:1px solid #ddd; border-top:0;}
.member-form-con{width:96%; max-width:480px; margin:0px auto;}	/* 가로값 설정 */
.member-form-con .cm-custom-radio{padding: 1rem 0; justify-content: center;}
.member-form-con-txt{font-size: 3.6rem; padding-bottom: 3rem; text-align:center; letter-spacing:-0.025em; color: #000;}
.member-form-con-txt strong{display:block; font-weight:600;}
.member-form-con-txt b{font-weight:600; color:#000;}
.member-form-con-txt p{color:#666; font-size:1.6rem; line-height:1.3;}
.member-form-con-txt p:before{display:block; content:""; width:3rem; height:0.2rem; background-color:#ccc; margin:2rem auto;}
.form-tit{display:block; color:#464646; font-size:2rem; letter-spacing:-0.025em; font-weight:500; margin-bottom:1.5rem;}
.form-list li{overflow:hidden; margin-top:-1px;}
.form-list li:first-child{margin-top:0;}
.form-list li label{line-height: 30px; color:#222; font-size:13px; letter-spacing:-0.5px;}
.form-input-box{float:left; width:80%;}
.form-input{
    position:relative; width:100%; box-sizing:border-box; background:none; border:0px;  color:#707070; background-color:#fff; font-size:14px; border:1px solid #ddd; letter-spacing:-0.3px; font-weight:400; height:50px; text-indent:10px; color:#aaa; transition:all 0.3s
}
.form-select{
   width:30%; background:none; border:0px;  color:#707070; font-size:15px; border:1px solid #ddd; letter-spacing:-0.3px; font-weight:400; height:50px; color:#aaa; transition:all 0.3s
}
.form-input:focus,.form-select:focus{color:#333; border-color:#000; z-index:1; outline: none;}

/* 공통 :: 회원관련 ::  탭 */
.member-tab-list-con ul{overflow:hidden; }
.member-tab-list-con ul li{float:left; width:50%; position:relative; }
.member-tab-list-con ul li:first-child{margin-left:0;}
.member-tab-list-con ul li a{display:block; height:60px; line-height:60px; text-align:center; border:1px solid #ddd; border-bottom:1px solid #3a4050; color:#686767;  font-size:18px; letter-spacing:-0.5px; }
.member-tab-list-con ul li.selected{z-index:1;}
.member-tab-list-con ul li.selected a{height:61px; border-color:#3a4050; color:#3a4050; border-bottom:0; font-weight:500}
.member-tab-list-con + .member-con-inner{border-top:0}

/* 공통 :: 회원가입 필수입력 */
.essential-txt{position:absolute; top:-3rem; right:0px; color:#464646; font-size:1.5rem; letter-spacing:-0.025em;}
.essential-icon{color:var(--main-color); margin:0 3px 0 0; vertical-align:middle;}

/* 공통 :: BUTTON */
.cm-btn-controls{overflow:hidden; display:flex; align-items:center; justify-content:center; text-align:center; margin-top:3rem;}
.cm-btn-controls.cm-btn-align-left{justify-content:flex-start; }
.cm-btn-controls.cm-btn-align-right{justify-content:flex-end;}
.cm-btn-controls .right-btn-controls{margin-left:auto;}
.cm-btn-controls button,
.cm-btn-controls a{display:inline-flex; align-items:center; justify-content:center; width:170px; height:5rem; border:0; background-color:#000; border:1px solid #000; color:#fff; font-size:1.7rem; font-weight:400; margin:0 2px 5px 2px; cursor:pointer; vertical-align:top; text-align:center; box-sizing:border-box; transition:all 0.3s ease; border-radius: 5rem;}
.cm-btn-controls.cm-btn-long-controls button,
.cm-btn-controls.cm-btn-long-controls a{width:100%; margin:0px; margin-bottom:5px;}
.cm-btn-controls .btn-style01{background-color:var(--main-color); border-color:var(--main-color);}
.cm-btn-controls .btn-style02{background-color:#8c8c8c; border-color:#8c8c8c;}
.cm-btn-controls .btn-style03{background-color:#000; color:#fff;}
@media all and (hover:hover) {
	.cm-btn-controls .btn-style01:hover{background-color:#fff; color:var(--main-color);}
	.cm-btn-controls .btn-style02:hover{background-color:#fff; color:#8c8c8c;}
	.cm-btn-controls .btn-style03:hover{background-color:#fff; color:#000;}
}
@media all and (max-width:800px) {
	.cm-btn-controls{margin-top:3rem;}
	.cm-btn-controls button,
	.cm-btn-controls a{padding: 0 1rem; width:auto; min-width:100px; height:5rem; font-size:1.7rem; box-sizing: border-box;}
}
@media all and (max-width:359px) {
	.cm-btn-controls button,
	.cm-btn-controls a{width:auto; min-width:80px; height:5rem; font-size:1.7rem;}
}

/* ******************   LOGIN  ********************** */
/* LOGIN :: 아이콘로그인 */
.form-list-icon{text-align:left; margin-bottom:2rem;}
.form-list-icon > li{border:1px solid #ddd; background-color:#fff; padding:0px 2rem; margin-top:1rem; border-radius: 5.5rem;}
.form-list-icon > li:first-child{margin-top:0;}
.form-list-icon > li .login-input{height:5.5rem; width:80%; width:100%;  background:none; border:0; color:#000; font-size:1.5rem;}
.form-list-icon > li i + .login-input{width:calc(100% - 5rem); }
.form-list-icon > li .login-input:focus{color:#333; outline: none;}
.form-list-icon > li .login-input::placeholder{color: #aaa;}
.form-list-icon > li i{vertical-align:middle; color:#888; width:3rem; font-size: 2.2rem;}
.form-list-icon + .cm-btn-long-controls{margin-top: -1rem;}
/*  LOGIN :: 아이디저장 및 하단영역 */
.id-save-btn{margin-top:2.5rem;}
.id-save-btn .cm-custom-checkbox {justify-content: flex-end; padding: 0;}
.id-save-btn .cm-custom-checkbox .checkbox-item {margin: 0;}
.form-box-list{height:5rem; line-height:5rem; text-align:center; border:1px solid #ddd; border-radius:5rem;}
.form-box-list a{color:#464646; font-size:1.6rem; letter-spacing:-0.3px;}
.form-box-list a:first-child{margin-left:-10px;}
.form-box-list a:before{display:inline-block; content:""; background-color:#ddd; width:1px; height:1.5rem; vertical-align:middle; margin:-0.2rem 2rem 0 2rem;}
.form-box-list a:first-child:before{display:none;}
.form-box-list a:hover{color:#000}

/* ******************  아이디, 비번 찾기  ********************** */
/* -------- 아이디 찾기 -------- */
/* 아이디 찾기 :: 결과 */
.id-check-inner .customer-id{color:#969696; font-size:18px; padding:50px 0; border-top:1px solid #ddd; border-bottom:1px solid #ddd; line-height:30px; text-align:center; font-weight:300; letter-spacing:-1px;}
.id-check-inner .customer-id strong{color:#343434; font-weight:500;}

/* ******************  JOIN  ********************** */
/* -------- JOIN 01 -------- */
.join-step-con{padding-bottom:5rem;}
.join-step-con:last-child{padding-bottom: 0;}
.join-step-con + .cm-btn-controls {margin-top: 0;}
.join-step-con .join-tit{color:#222; font-size:2rem; letter-spacing:-0.75px; font-weight:600; padding-bottom:15px;}
.join-agreement-con{border:1px solid #ddd; height:20rem; overflow-x:hidden; overflow-y:auto; padding:2rem; background-color:#fff; box-sizing: border-box; }
.agree-txt{padding-top: 2rem;}
.agree-txt .cm-custom-checkbox {justify-content: flex-end; padding: 0;}
.agree-txt .cm-custom-checkbox .checkbox-item {margin: 0;}
 
/* -------- JOIN 02 / MODIFY -------- */
.join-step-top-tit{font-size: 2.4rem; padding-bottom: 1rem; letter-spacing: -0.025em; color: #000;}
.join-form-con{position:relative; border-top:1px solid #464646;}
/* JOIN :: 기본 */
.join-form-tbl{width:100%;}
.join-form-tbl th,.join-form-tbl td{padding:1rem 0; font-size: 1.5rem; /* border-bottom:1px solid #ddd; */}
.join-form-tbl th{text-align:left; color:#333; font-weight:400; font-size:1.6rem; letter-spacing:-0.025em;line-height:1.3; word-break:keep-all;}
.join-form-tbl .input-basic{padding: 0 2rem; height: 5rem; width: 100%; font-size: 1.5rem; letter-spacing: -0.025em; color: rgba(153, 153, 153, 0.8); background-color: #f3f3f3; border: 1px solid #f3f3f3; box-sizing: border-box; border-radius: 2.5rem;}
.join-form-tbl .fakeform-selectbox .select-title strong {white-space: nowrap; text-overflow: ellipsis;}
.join-form-tbl .width100{max-width:none;}
.join-form-tbl .input-basic:focus{outline: none;}
.join-form-tbl .join-sub-btn{margin-left: 0.5rem; min-width:114px; padding: 0 1rem; height:5rem; border:0; background-color:#000; border:1px solid #000; color:#fff; font-size:1.5rem; font-weight:400; cursor:pointer; vertical-align:top; text-align:center; box-sizing:border-box; transition:all 0.3s ease; border-radius: 5rem; display:inline-flex; align-items:center; justify-content:center;}
.join-form-tbl .join-sub-btn.complete{background-color: var(--main-color); border-color: var(--main-color);}
.join-form-tbl .join-sub-btn:hover{background-color:#fff; color:#000;}
.join-form-tbl .join-sub-txt{display:inline-block; margin-left:1rem; color:#828282; font-weight:400;}
.join-form-tbl .join-sub-txt2{display:block; margin-top:0.5rem; font-size: 1.4rem; line-height: 1.3; color:#828282; font-weight:400;}
.join-form-tbl .join-sub-txt2.point-color{color: var(--main-color);}
.join-form-tbl .join-sub-txt2 + .point-color{margin-top: 0;}
.join-form-tbl .hypen{display:inline-block; vertical-align:middle;width:12px; margin:0 5px; text-align:center;}
/* JOIN :: 추가스타일 */
.join-form-tbl fieldset{padding:8px 0;}
.join-form-tbl .email-input, .join-form-tbl .birth-input, .join-form-tbl .address-input, .join-form-tbl .tel-input{padding:0; display: flex; flex-wrap: wrap; align-items: center;} 
.join-form-tbl label,.join-form-tbl input[type="checkbox"],.join-form-tbl input[type="radio"]{vertical-align:bottom;}
.join-form-tbl .read-only-data{padding:10px 0; font-size:15px; color:#333;}
.join-form-tbl .id-input{padding:0; display: flex; align-items: center;}
.tel-input .fakeform-selectbox{width:calc(33.33% - 14px) !important;}
.tel-input .input-basic{width:calc(33.33% - 15px) !important;}
.email-input .input-basic{width:calc(33.33% - 5px); margin-bottom:3px;}
.email-input .hypen{font-size: 14px;}
.email-input .fakeform-selectbox{margin-left: 5px; width:calc(33.33% - 17px); margin-bottom:3px;}
.address-input .input-basic{margin-top:6px;}
.address-input .input-basic:first-child{margin-top:0;}

.join-form-tbl .cm-custom-checkbox,
.join-form-tbl .cm-custom-radio{padding: 0;}
.join-form-tbl .cm-custom-checkbox .checkbox-item,
.join-form-tbl .cm-custom-radio .radio-item {margin: 0.5rem 0; margin-right: 2rem;}
.join-form-tbl .cm-custom-radio .radio-item label {font-weight: 500;}
.join-form-tbl .fakeform-selectbox .select-title{font-size: 1.6rem;}

.join-form-tbl .cm-custom-checkbox.other{align-items: center;}
.join-form-tbl .cm-custom-checkbox.other .checkbox-item:last-child label{display: inline-block; vertical-align: middle; margin-right: 1rem;}
.join-form-tbl .cm-custom-checkbox.other .checkbox-item:last-child .input-basic{display: inline-block; vertical-align: middle; width: 12rem;}

/* 시리얼넘버 css추가 */
.serial-number-tbl.join-form-tbl{table-layout: fixed;}
.serial-number-tbl.join-form-tbl th,
.serial-number-tbl.join-form-tbl td{vertical-align: top;}
.serial-number-tbl.join-form-tbl th{padding-top: 3rem;}
.serial-number-tbl.join-form-tbl .serial-number-th{padding-left: 2rem;}
.serial-number-tbl.join-form-tbl .serial-number-td .id-input .input-basic{width:calc(100% - 13.5rem) !important;}
.serial-number-tbl.join-form-tbl .join-sub-btn {min-width: auto; width: 13rem;}
.serial-number-tbl.join-form-tbl .join-sub-btn.complete i{margin-right: 1rem;}
.serial-number-tbl.join-form-tbl .join-sub-btn.complete:hover{background-color:var(--main-color); color:#fff;}

/* -------- JOIN FINISH  -------- */
/* JOIN FINISH :: 01 */
.join-finish-con{width:90%; margin:0px auto; max-width:570px; }
.join-finish-icon{display:block; width:120px; height:120px; text-align:center; background-color:#ccc; color:#fff; margin:30px auto; -webkit-border-radius:100em;-moz-border-radius:100em;-o-border-radius:100em;border-radius:100em;}
.join-finish-icon i{margin-top:24px; font-size:70px;}
.join-finish-txt-top{padding-top: 20px; margin-bottom: 30px; font-size:24px; line-height: 1.3; font-weight:400; color:#000; text-align: center;}
.join-finish-txt-top b{color: var(--main-color);}
.join-finish-txt{text-align:center; line-height:1.6em; font-size:18px; color:#333;}
.join-finish-txt strong{font-weight:600;}
.join-finish-txt-bottom{margin-top: 40px; font-size: 18px; line-height: 1.6; color:#333; text-align: center;}
.join-finish-btn-controls{margin-top: 1rem;}
.join-finish-btn-controls02{margin-top: 5rem;}
.join-finish-btn-controls.mt40{margin-top: 4rem;}
.join-finish-btn-controls button, .join-finish-btn-controls a {width: 200px;}
.join-finish-btn-bottom-txt{margin-top: 10px; font-size: 14px; line-height: 1.3; color:#686767; text-align: center;}
/* JOIN FINISH :: 02 */
.join-finish-tit-con{height:80px; border-bottom:1px solid #ddd;  text-align:center;  letter-spacing:-0.3px; margin-bottom:40px;}
.join-finish-tit{font-weight:400; color:#5e5e5e; font-size:24px; }
.join-finish-tit strong{color:#333; font-weight:600;}
.join-finish-sub-tit{padding-top:10px; color:#9b9b9b; font-size:18px; font-weight:400; line-height:24px;}
.join-finish-sub-tit b{color:#000; font-weight:500; }
.join-finish-member-info{overflow:hidden; padding:0 2% 20px 2%;}
.join-finish-member-info .member-info-left-icon{float:left; width:30%; max-width:178px;}
.join-finish-member-info .member-info-left-icon i{display:block; width:120px; height:120px; line-height:110px; font-size:70px; vertical-align:top; text-align:center; background-color:#8c98aa; color:#fff; }
.member-info-right-con{float:left; width:70%; padding-top:8px;}
.member-info-right-con dl{overflow:hidden;}
.member-info-right-con dl dt, .member-info-right-con dl dd{float:left; letter-spacing:-0.3px; padding:10px 0;}
.member-info-right-con dl dt{width:30%; color:#686767; font-size:15px; }
.member-info-right-con dl dt i{font-size:16px; color:#ccc; margin-right:3px; }
.member-info-right-con dl dd{width:70%; color:#838383; font-size:14px;}
.member-info-right-con dl .member-divine{display:inline-block; vertical-align:middle; color:#fff; padding:5px 10px; font-size:13px; background-color:#6b6b6b; margin-left:5px; margin-top:-3px;}


/* ******************   공통  ********************** */
@media all and (max-width:1220px){
	/* 공통 :: 상단 진행과정 바 */
	.join-process-bar-con > ol > li dl dt{font-size:12px;}
	.join-process-bar-con > ol > li dl dd{font-size:13px;}
}
@media all and (max-width:800px){
	.join-step-con{padding-bottom: 4rem;}
	.join-step-con:last-child{padding-bottom: 0;}
	
	/* 공통 :: 상단 진행과정 바 */
	.join-process-bar-con > ol > li{display:block; background-size:8px auto}
	.join-process-bar-con > ol > li .process-icon{width:40px; height:40px; line-height:40px;}
	.join-process-bar-con > ol > li .process-icon i{font-size:18px; line-height:40px;}

	/* 공통 :: 회원폼레이아웃 */
	.join-step-top-tit{font-size: 2.4rem; padding-bottom: 1rem;}
	.member-con-inner{padding-bottom: 4rem;}
	.member-form-con{padding:30px 0;}
	.member-form-con:last-child{padding-top:0}
	.member-form-con-txt{font-size: 3rem; padding-bottom:20px;}
	.member-form-con-txt p{width:80%; margin:0px auto; font-size:1.4rem; line-height:1.5; word-break:keep-all;}
	.member-form-con-txt p:before{width:3rem; height:0.2rem; margin:2rem auto;}
	.form-tit{text-align:center; margin-bottom:25px;}
	.form-input{font-size:13px; height:40px;}

	/* 공통 :: 회원관련 ::  탭 */
	.member-tab-list-con ul li a{height:40px; line-height:40px; font-size:14px;}
	.member-tab-list-con ul li.selected a{height:41px;}

	/* 시리얼넘버 css추가 */
	.serial-number-tbl.join-form-tbl,
	.serial-number-tbl.join-form-tbl tbody,
	.serial-number-tbl.join-form-tbl tr,
	.serial-number-tbl.join-form-tbl th,
	.serial-number-tbl.join-form-tbl td{display: block;}
	.serial-number-tbl.join-form-tbl colgroup{display: none;}
	.serial-number-tbl.join-form-tbl tr{display: flex; flex-wrap:wrap; align-items: center;}
	.serial-number-tbl.join-form-tbl th{padding-top: 0;}
	.serial-number-tbl.join-form-tbl .serial-number-th{padding-left: 0;}
	.serial-number-tbl.join-form-tbl .serial-number-td .id-input .input-basic{width:calc(100% - 13.5rem) !important;}
	.serial-number-tbl.join-form-tbl .join-sub-btn {min-width: auto; width: 13rem;}
	.serial-number-tbl.join-form-tbl .join-sub-btn.complete i{margin-right: 1rem;}
}

@media all and (max-width:480px){
	/* 공통 :: 회원폼레이아웃 */
	.member-form-con-txt p {width: 90%;}
	.member-form-con{width:auto; padding:20px 0;}

	#joinContent .cm-btn-controls:not(.cm-btn-long-controls)  a,
	#joinContent .cm-btn-controls:not(.cm-btn-long-controls) button,
	.member-form-con .cm-btn-controls:not(.cm-btn-long-controls) a,
	.member-form-con .cm-btn-controls:not(.cm-btn-long-controls) button{width: 45%;}
}

/* ******************   LOGIN  ********************** */
@media all and (max-width:800px){
	/* LOGIN :: 아이콘로그인 */
	.form-list-icon{margin-bottom:2rem;}
	.form-list-icon > li{margin-top:1rem;}
	.form-list-icon > li .login-input{height:5.5rem; width:calc(100% - 5rem); font-size:1.5rem;}
	.form-list-icon > li i{width:3rem; font-size:2.2rem; position: relative; top: 0.1rem;}
	/*  LOGIN :: 아이디저장 및 하단영역 */
	.id-save-btn{margin-top:0;}
	.form-box-list{height:5rem; line-height:5rem;}
	.form-box-list a{font-size:1.6rem;}
	.form-box-list a:before{margin:-0.2rem 1.5rem 0 1.5rem;}
}

/* ******************  아이디, 비번 찾기  ********************** */
@media all and (max-width:800px){
	/* 아이디 찾기 :: 결과 */
	.id-check-inner .customer-id{font-size:15px; padding:30px 0; line-height:24px;}
}

 /* ******************  JOIN 02 / MODIFY  ********************** */
@media all and (max-width:800px){
	.join-process-bar-con > ol {margin-top: 2rem;}
	
	/* JOIN 01 */
	.join-step-con{/* padding-bottom:30px; */}
	.join-step-con .join-tit{padding-bottom:10px;}
	.join-agreement-con{height:150px; padding:15px}
	/* JOIN 02 */
	.join-form-tbl th,.join-form-tbl td{padding:0.5rem 0;}
	.join-form-tbl td.distributor-add-td-css{padding:0;}
	.join-form-tbl th{width:30%; font-size: 1.6rem;}
	.join-form-tbl td{width:70%;}
	.join-form-tbl .join-sub-btn{min-width:auto; width:10rem; height:5rem; margin-left: 0.5rem; font-size: 1.5rem; padding:0; box-sizing:border-box;}
	.join-form-tbl .join-sub-txt, .join-form-tbl .join-sub-txt2{display:block; margin-left:0; margin-top:0.5rem; word-break:keep-all; line-height:1.3; }

	/* JOIN 02::기타 */
	.ios-os .join-form-tbl fieldset{
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}
	.id-input .input-basic,
	.address-input .input-basic:first-of-type{float:left; width:calc(100% - 10.5rem) !important;}
	.birth-input .fakeform-selectbox{width:calc(33.33% - 30px) !important;}
	.birth-input .fakeform-selectbox:first-child{width:calc(33.33% - 4px) !important;}
    .tel-input .fakeform-selectbox{width:calc(33.33% - 14px) !important;}
	.tel-input .input-basic{width:calc(33.33% - 9px) !important;}
	.email-input .input-basic{width:calc(50% - 8px) !important;}
	.email-input .fakeform-selectbox {margin-left: 0; width:100% !important; margin-top:5px;}
	.email-input .hypen{font-size: 12px;}
	.address-input .input-basic{margin-top:3px;}
	.join-form-tbl .hypen{margin:0 2px;}
}


 /* ******************  JOIN FINISH ********************** */
@media all and (max-width:800px){
	/* JOIN FINISH :: 01 */
	.join-finish-icon{width:80px; height:80px; }
	.join-finish-icon i{font-size:45px; line-height:30px}
	.join-finish-txt-top{padding-top: 0; margin-bottom: 15px; font-size:17px; line-height: 1.3;}
	.join-finish-txt{font-size:14px; line-height:1.3em; word-break:keep-all;}
	.join-finish-txt-bottom{margin-top: 20px; font-size: 14px; line-height: 1.6;}
	.join-finish-btn-controls{margin-top: 1rem;}
	.join-finish-btn-controls02{margin-top: 3rem;}
	.join-finish-btn-controls.mt40{margin-top: 2rem;}
	.join-finish-btn-controls button, .join-finish-btn-controls a {width: auto; padding: 0 2rem;}
	.join-finish-btn-bottom-txt{margin-top: 10px; font-size: 12px; line-height: 1.3;}
	/* JOIN FINISH :: 02 */
	.join-finish-tit-con{height:auto; margin-bottom:20px; padding-bottom:20px; }
	.join-finish-tit{font-size:18px; line-height:20px;  word-break:keep-all;}
	.join-finish-sub-tit{font-size:12px; word-break:keep-all;}
	.join-finish-member-info{padding:15px;}
	.join-finish-member-info .member-info-left-icon{display:none;}
	.member-info-right-con dl {margin-bottom:15px;}
	.member-info-right-con dl dt, .member-info-right-con dl dd{float:none; width:auto; padding:0;}
	.member-info-right-con dl dt{font-size:13px; padding-bottom:7px; }
	.member-info-right-con dl dt i{margin-top:-2px; vertical-align:middle;}
	.member-info-right-con dl dd{font-size:15px; color:#222; line-height:1.5; font-weight:500; padding-left:22px;}
}



 /* ****************** MYPAGE ****************** */
 /* -------- 마이페이지 :: 인덱스페이지 -------- */
.mypage-index #mypageContent{display:block}
.mypage-wrap #shoppingCon{float:right; width:calc(100% - 28rem);}

/* 공통 :: 왼쪽메뉴바 */
#mypageMenu{float:left; width:22rem; background:#f6f6f6; padding:3.5rem; box-sizing:border-box; border-radius:3rem;}
.mypage-menu-inner{padding:25px 10px; border-top:1px solid #eee;}
.mypage-menu-inner:first-child{border-top:0}
.mypage-menu-inner .mypage-menu-tit{color:#333; font-size:1.8rem; font-weight:700; margin-bottom:1rem;}
.mypage-menu-inner .mypage-menu li a{display:block; line-height:1.3; font-size:1.6rem; padding:0.5rem 0; color:#666; letter-spacing:-0.05em; transition:var(--transition-custom);}
.mypage-menu-inner .mypage-menu li a:hover,
.mypage-menu-inner .mypage-menu li.on a{color:var(--main-color)}

/* 공통 :: 리스트 없을때 */
.no-order-list{display:block; text-align:center; padding:100px 0; font-size:17px; font-weight:400; letter-spacing:-0.5px; margin-bottom:20px; border-bottom:1px solid #ddd;}
.no-order-list.border-top{border-top:1px solid #ddd;}
.no-order-list i{display:block; color:#333; padding-bottom:30px; font-size:40px;}
.no-order-list strong{font-weight:400;}

/* 테이블 */
.mypage-tbl-style{width:100%; table-layout:fixed; border-top:4px solid #dedede; }
.mypage-tbl-style th, .mypage-tbl-style td{border-bottom:1px solid #dedede; transition:var(--transition-custom);}
.mypage-tbl-style th{padding:1.5rem 0; color:#000; font-size:1.7rem; font-weight:500;}
.mypage-tbl-style td{padding:1.5rem; text-align:center; color:#333; font-size:1.5rem; line-height:1.3; letter-spacing:-0.05em; word-break:keep-all;}
.mypage-tbl-style .title{padding:1.5rem 2.5rem; text-align: left;}

@media all and (max-width:1280px){
	.mypage-index #mypageContent{display:block}
	.mypage-wrap #shoppingCon{float:none; width:100%}
	#mypageMenu{padding:3rem; box-sizing:border-box; float:none; width:100%; margin-top:5rem;}

	/* shopping layout */
	#mypageMenu{}
	#mypageMenu + #shoppingCon{float:none; width:auto;}
	#shoppingCon{margin:0 auto;}

	#mypageContent{display:none;}
	.mypage-index-wrapper #mypageMenu{display:block; width:100%; float:none; padding:0; border:0}
	.mypage-index-wrapper #mypageContent{display:block;}
	.mypage-index-wrapper #shoppingCon{margin-top:0}

	/* 공통 :: 왼쪽메뉴바 */
	.mypage-menu-inner, 
	.mypage-menu-inner:first-child{padding:0; border-top:0}
	.mypage-menu-inner{margin-top:2%}
	.mypage-menu-inner:first-child{margin-top:0;}
	.mypage-menu-inner .mypage-menu-tit{margin-bottom:10px; font-weight:bold; font-size:14px;}
	.mypage-menu-inner .mypage-menu{position:relative; border:1px solid #ddd; border-bottom:0; background-color: #fff;}
	.mypage-menu-inner .mypage-menu:before{position:absolute; bottom:0px; left:0px; right:0px; height:1px; background-color:#ddd; content:"";}
	.mypage-menu-inner .mypage-menu:after{clear:both; content:""; display:block;}
	.mypage-menu-inner .mypage-menu li{float:left; width:50%;  border-bottom:1px solid #ddd; box-sizing:border-box;}
	.mypage-menu-inner .mypage-menu li:nth-child(odd){border-right:1px solid #ddd;}
	.mypage-menu-inner .mypage-menu li a{position:relative; display:table; width:100%; /*height:40px;*/height:30px; font-size:13px;}
	.mypage-menu-inner .mypage-menu li a:after{position:absolute; right:15px; top:50%; transform:translateY(-50%); font-family: 'xeicon'; content: "\e93f"; font-size:15px; color:#222;}
	.mypage-menu-inner .mypage-menu li a span{display:table-cell; vertical-align:middle; padding:0 10px}
}
@media all and (max-width:800px){	
	#shoppingCon .member-con-inner{padding-bottom: 0;}

	/* 공통 :: 리스트 없을때 */
	.no-order-list{font-size:13px; padding:50px 0; border-top:1px solid #ddd;}
	.order-prd-list-tbl + .no-order-list{border-top:0; margin-top:-30px}
	.no-order-list i{font-size:30px; padding-bottom:20px}

	/* 공통 :: 왼쪽메뉴바 */
	.mypage-menu-inner .mypage-menu li a{font-size:12px; height:26px}

	/* 테이블 */
	.mypage-tbl-style{border-top:0}
	.mypage-tbl-style colgroup,
	.mypage-tbl-style thead{display:none}
	.mypage-tbl-style .title,
	.mypage-tbl-style tr{display: block; margin: 0; padding:0; height: auto;}
	.mypage-tbl-style th, 
	.mypage-tbl-style td{width: auto; height: 1.1em; font-size: 1.5rem; margin: 5px 4% 0px 0; padding: 0; border-bottom:0; text-align: left; display: inline-flex; align-items: center;} 
	.mypage-tbl-style tr{padding: 1.5rem; margin-bottom:10px; border:1px solid #ddd;}
	.mypage-tbl-style td:before{padding-right:5px; color:#aaa; content: attr(data-label);}
}


 /* ****************** 통합검색 ****************** */
/* 검색 :: 검색결과 상단 */
.search-result-top-container{margin-bottom:8rem;}
.search-result-top-container .result-bold-txt{color:var(--main-color);}
.search-result-top-con{border: 1px solid #ddd; background-color:#fff; padding:5rem 2rem; text-align:center; font-size:1.8rem; font-weight:400; line-height:1.3; word-break:keep-all; border-radius: 3rem 3rem 0 0;}
.search-result-top-con .result-top-tit{font-size:3rem; letter-spacing: -0.025em; color:#000; margin-bottom:2.5rem;}
.search-result-top-con .result-txt b{color:#000;}
.search-result-top-con .no-result-txt p{padding-bottom:2rem; line-height:1.3;}
.search-result-top-con .no-result-txt ul{max-width:60rem; margin:0px auto; text-align:left;}
.search-result-top-con .no-result-txt ul li{font-size:1.4rem; letter-spacing:-0.025em;}
 
/* 검색 :: 검색결과 분류 */
.search-result-classify-con{border-radius: 0 0 3rem 3rem; background-color:#F4F4F4; overflow: hidden; position: relative;}
.search-result-classify-list{margin:0 -1px 0 1px; display: flex; flex-wrap:wrap; align-items: center; }
.search-result-classify-item {margin-top: -1px; margin-left: -1px; padding:1rem 0; width:50%; min-height: 10rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align:center; box-sizing: border-box; background-color:#F4F4F4; border: 1px solid #ddd; position: relative;}
.search-result-classify-item .search-result-classify-inner {}
.search-result-classify-item .search-result-classify-inner .result-list-tit {font-size:1.6rem; line-height: 1.2; letter-spacing: -0.025em; color:#000;}
.search-result-classify-item .search-result-classify-inner .result-list-tit i {margin:-0.2rem 0.6rem 0 0;  vertical-align:middle;}
.search-result-classify-item .search-result-classify-inner .result-info {margin-top: 0.5rem; font-size:2rem; line-height: 1.3; letter-spacing: -0.025em; color:#000;}
 
/* 검색 :: 검색결과 하단 */
.total-search-result-con{margin-bottom:8rem;}
.total-search-result-con .sub-gallery-wrapper {margin-top: 0rem;}
.totabl-search-list-tit-box{border-bottom:1px solid #000; padding-right: 5rem; padding-bottom:2rem; margin-bottom:3rem; display: flex; flex-wrap:wrap; align-items: center; justify-content: space-between; position: relative;}
.totabl-search-list-tit-box .total-search-list-tit {color:#333; font-size:2.5rem; font-weight: 400; letter-spacing:-0.025em;}
.totabl-search-list-tit-box .total-search-list-tit strong{color:var(--main-color);}
.totabl-search-list-tit-box .total-search-more-btn{position: absolute; top: 0.1rem; right: 0; color:#000; font-size: 2.4rem;}
.totabl-search-list-tit-box.no-more-btn{padding-right: 0;}
.totabl-search-list-tit-box.no-more-btn .total-search-list-tit{line-height: 1.3;}

/* 검색 :: 검색결과 상세페이지  */
.search-result-detail-container .search-result-classify-list{margin: 0;}
.search-result-detail-container .search-result-classify-item{margin: 0; margin-top: -1px; float:none; width: 100%; text-align: center;}

.total-search-result-list-con{margin-top: 8rem;}

/* -------- 통합검색 -------- */
@media all and (max-width:800px){
    /* 검색 :: 검색결과 상단 */
	.search-result-top-container{margin-bottom:8rem;}
	.search-result-top-con{padding:4rem 2rem; font-size:1.8rem; line-height:1.3; border-radius: 3rem 3rem 0 0;}
	.search-result-top-con .result-top-tit{font-size:2.6rem; margin-bottom:2.5rem;}
	.search-result-top-con .no-result-txt p{padding-bottom:0; line-height:1.3;}
	.search-result-top-con .no-result-txt ul{max-width:60rem; display: none;}
	.search-result-top-con .no-result-txt ul li{font-size:1.4rem;}
	 
	/* 검색 :: 검색결과 분류 */
	.search-result-classify-con{border-radius: 0 0 3rem 3rem;}
	.search-result-classify-list{margin:0 -1px 0 1px;}
	.search-result-classify-item {margin-top: -1px; margin-left: -1px; padding:1rem 0; width:50%; min-height: 10rem;}
	.search-result-classify-item .search-result-classify-inner .result-list-tit {font-size:1.6rem;}
	.search-result-classify-item .search-result-classify-inner .result-list-tit i {margin:-0.2rem 0.6rem 0 0;}
	.search-result-classify-item .search-result-classify-inner .result-list-tit span{display: none;}
	.search-result-classify-item .search-result-classify-inner .result-info {font-size:1.8rem; line-height: 1.3; margin-top: 0.5rem;}
	 
	/* 검색 :: 검색결과 하단 */
	.total-search-result-con{margin-bottom:8rem;}
	.totabl-search-list-tit-box{padding-right: 5rem; padding-bottom:2rem; margin-bottom:3rem;}
	.totabl-search-list-tit-box .total-search-list-tit {font-size:2.2rem;}
	.totabl-search-list-tit-box .total-search-more-btn{top: 0; right: 0; font-size: 2.4rem;}

    /* 검색 :: 검색결과 상세페이지  */
    .search-result-detail-container .search-result-classify-item:first-child .search-result-classify-inner {border-bottom:0;}
}