@charset "utf-8";

/* ========================================================
 * 기본 공통 스타일
 * 모든페이지 공통사용
======================================================== */
/* height + font-size */
.large{height: 5rem; line-height: 5rem; font-size: 1.7rem; font-weight: 500; text-align: center; border-radius: 0.5rem;}
.medium{height: 4rem;
    line-height: 4rem;
    font-size: 1.4rem;
    font-weight: 400;
    text-align: center;
    border-radius: 0.5rem;}
.small{height: 3rem; line-height: 3rem; font-size: 1.2rem; font-weight: 400; text-align: center; border-radius: 0.5rem;}
/* text align */
.text-align-center{text-align: center;}
.text-align-left{text-align: left;}
.text-align-right{text-align: right;}
/* flex */
.flex-center-start{display: flex; flex-wrap:wrap; align-items: center; justify-content: flex-start;}
.flex-center-end{display: flex; flex-wrap:wrap; align-items: center; justify-content: flex-end;}
.flex-center-center{display: flex; flex-wrap:wrap; align-items: center; justify-content: center;}
.flex-center-between{display: flex; flex-wrap:wrap; align-items: center; justify-content: space-between;}
/* 포인트 컬러 */
.main-color{color: var(--main-color);}/* #1854e8 */
.sub-color{color: var(--sub-color);}/* #4e0dfd */
.sub-color1{color: var(--sub-color1);}/* #000000 */
.sub-color2{color: var(--sub-color2);}/* #666666 */
.sub-color3{color: var(--sub-color3);}/* #303030 */
.disabled-color{color: var(--disabled-color);}/* #999999 */
.error-color{color: var(--error-color);}/* #e83b19 */
.white-color{color: var(--white-color);}/* #ffffff */
.main-background-color{background-color: var(--main-color);}
.sub-background-color{background-color: var(--sub-color);}
.sub-background-color1{background-color: var(--sub-color1);}
.sub-background-color2{background-color: var(--sub-color3);}

/* ========================================================
 * BUTTON 스타일
 * 모든페이지 공통사용
======================================================== */
.cm-positive-btn{display: inline-block; vertical-align: middle; width: 100%; background-color: var(--main-color); color: var(--white-color); transition: 0.3s;}
.cm-positive-btn02{display: inline-block; vertical-align: middle; width: 100%; background-color: #92aff4; color: var(--white-color); transition: 0.3s;}
.cm-negative-btn{display: inline-block; vertical-align: middle; width: 100%; background-color: #222222; color: var(--white-color); transition: 0.3s;}
.cm-basic-btn{display: inline-block; vertical-align: middle; width: 100%; border: 1px solid #333; background-color: var(--white-color); color: #333; transition: 0.3s; box-sizing: border-box;}
.cm-basic-btn02{display: inline-block; vertical-align: middle; width: 100%; border: 1px solid var(--main-color); background-color: var(--white-color); color: var(--main-color); transition: 0.3s; box-sizing: border-box;}
.cm-disabled-btn{display: inline-block; vertical-align: middle; width: 100%; border: 1px solid #cfcfcf; background-color: var(--white-color); color: #cfcfcf; cursor: initial; box-sizing: border-box;}
/* hover */
.cm-basic-btn:hover{background-color: #f6f6f6;}
.cm-basic-btn02:hover{background-color: #ebf2ff;}
.cm-positive-btn:hover,
.cm-positive-btn02:hover{background-color: var(--sub-color);}
.cm-negative-btn:hover{background-color: var(--sub-color1);}
.cm-basic-btn:hover{background-color: #f6f6f6;}
.cm-basic-btn02:hover{background-color: #ebf2ff;}
/* 아이콘 있을 ver */
.cm-positive-btn.has-icon,
.cm-negative-btn.has-icon,
.cm-basic-btn.has-icon,
.cm-basic-btn02.has-icon,
.cm-disabled-btn.has-icon{padding: 0 2rem; width: auto; min-width: 21.8rem; text-align: center; box-sizing:border-box;}
.cm-positive-btn.has-icon.small,
.cm-negative-btn.has-icon.small,
.cm-basic-btn.has-icon.small,
.cm-basic-btn02.has-icon.small,
.cm-disabled-btn.has-icon.small{padding: 0 1rem; min-width: auto;}
.cm-positive-btn.has-icon i,
.cm-negative-btn.has-icon i,
.cm-basic-btn.has-icon i,
.cm-basic-btn02.has-icon i,
.cm-disabled-btn.has-icon i{margin-left: 1.5rem; font-size: 2.2rem; position: relative; top: 0.2rem;}
.cm-positive-btn.has-icon.small i,
.cm-negative-btn.has-icon.small i,
.cm-basic-btn.has-icon.small i,
.cm-basic-btn02.has-icon.small i,
.cm-disabled-btn.has-icon.small i{margin-left: 0.7rem; font-size: 1.8rem;}


/* ========================================================
 * CEHCKBOX 스타일
 * 모든페이지 공통사용
======================================================== */
.cm-custom-checkbox{display: inline-block; vertical-align: middle; width: 100%;}
.cm-custom-checkbox .checkbox-item{display:inline-block; vertical-align:middle; margin-right: 20px;}
.cm-custom-checkbox .checkbox-item input[type="checkbox"]{display:none;}
.cm-custom-checkbox .checkbox-item label{padding-left: 3.5rem; display:inline-block; position:relative; color:#131313; font-size:1.6rem; line-height: 3rem; letter-spacing:-0.05em;}
.cm-custom-checkbox .checkbox-item label:before{position: absolute; top: 0px; left: 0; font-size:2.4rem; color: #ccc; font-weight: 400; content:"\e92d"; font-family: xeicon;}
.cm-custom-checkbox .checkbox-item input[type="checkbox"]:checked + label,
.cm-custom-checkbox .checkbox-item input[type="checkbox"]:checked + label:before{color: var(--main-color);}
/* 텍스트가 없을경우 */
.cm-custom-checkbox.no-txt .checkbox-item{margin-right: 0;}
.cm-custom-checkbox.no-txt .checkbox-item label{padding-left: 20px;}
.cm-custom-checkbox.no-txt .checkbox-item label:before{top: -20px;}
#cbx_chkAll + label {font-size:1.7rem; font-weight: 500;}

@media all and (max-width:800px){
	.cm-custom-checkbox .checkbox-item {margin-right: 0;}
}


/* ========================================================
 * RADIO BUTTON 스타일
 * 모든페이지 공통사용
======================================================== */
.cm-custom-radio{display: inline-block; vertical-align: middle;}
.cm-custom-radio .radio-item{display:inline-block; vertical-align:middle; margin-right: 20px;}
.cm-custom-radio .radio-item input[type="radio"]{display:none;}
.cm-custom-radio .radio-item label{padding-left: 30px; display:inline-block; position:relative; color:#333; font-size:1.5rem; line-height: 3rem;}
.cm-custom-radio .radio-item label:before{position: absolute; top: 0px; left: 0; font-size:2.4rem; color: #ccc; font-weight: 400; content:"\e9c6"; font-family: xeicon;}
.cm-custom-radio .radio-item input:checked + label{color: var(--main-color);}
.cm-custom-radio .radio-item input:checked + label:before{content:"\e9c7"; color: var(--main-color);}
/* 텍스트가 없을경우  */
.cm-custom-radio.no-txt .radio-item{margin-right: 0;}
.cm-custom-radio.no-txt .radio-item label{padding-left: 2rem; height: auto;}
.cm-custom-radio.no-txt .radio-item label:before{top: -2rem;}


/* ========================================================
 * TEXTAREA 스타일
 * 모든페이지 공통사용
======================================================== */
.cm-custom-textarea{padding: 1rem 1.5rem; width:100%; height:20rem; font-size:1.5rem; line-height: 1.5; letter-spacing: -0.025em; color: #333; display: inline-block; vertical-align: middle; border:0px; outline: none; resize: none; background-color: var(--white-color); border-radius: 0.5rem; border: 0.1rem solid #bbb; box-sizing: border-box;}
.cm-custom-textarea::placeholder{color: #cfcfcf;}
.cm-custom-textarea:focus{outline: none;}


/* ========================================================
 * SELECT 스타일
 * 모든페이지 공통사용
======================================================== */
.cm-custom-selectbox{display:inline-block; width: 100%;}
.cm-custom-selectbox select{opacity: 0; visibility: hidden;}
.select-option.select-in-popup{z-index: 10000 !important;}
/* fake form - 기본 select 스타일 */
.cm-custom-selectbox .select-title {width: 100% !important; padding: 0 1.5rem; color: #222; text-align: left; vertical-align: middle; border:0.1rem solid #ddd; line-height: 3.8rem; background: url("../images/content/select_arrow.png") no-repeat 94% 50%; display: inline-block; box-sizing: border-box; cursor: pointer; border-radius:0.5rem; transition:border-color 0.2s, background-color 0.2s; border-radius: 1rem; background-color: #fff;}
.cm-custom-selectbox .select-title strong {width: 100%; font-weight: 500; word-break: break-all; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.cm-custom-selectbox .select-title.focus,
.cm-custom-selectbox .select-title.active {color: var(--sub-color1); border-color: #aaa; background-color:var(--white-color); }
.cm-custom-selectbox .select-title.disabled {color: var(--disabled-color); text-shadow: 1px 1px 0 var(--white-color); border-color: #bbb; background-color: #eee;}
.select-option {border: 0; overflow: auto; border-radius: 0.5rem; box-shadow: 0 1rem 2rem 0 rgba(0,0,0,0.1);}
.select-option ul {margin: 0; padding: 0; padding-top: 0.1rem;}
.select-option li {background: var(--white-color); list-style: none;}
.select-option span,
.select-option strong {height: 1.1em; font-size: 1.4rem; font-weight: normal; color: #777; white-space: nowrap; text-overflow: ellipsis; line-height: 1.4; text-decoration: none; padding: 1rem; display: block; overflow: hidden; cursor: default;}
.select-option strong {font-weight: bold; color: #777; border-top: 1px solid #eee; border-bottom: 1px solid #ccc;}
.select-option li li span {padding-left: 1rem;}
.select-option span:hover,
.select-option span.selected {color: var(--sub-color1); background: #f8f8f8;}
.select-option .disabled span,
.select-option .disabled strong {color: #bbb; text-decoration: line-through; background: none;}


/* ========================================================
 * INPUT 스타일
 * 모든페이지 공통사용
======================================================== */
.cm-custom-input{width: 100%; border: 0.1rem solid #ddd; padding: 0 1.5rem !important; appearance: none; border-radius: 1rem !important; text-align: left; background-color: var(--white-color); transition: all 0.3s; box-sizing: border-box; display: inline-block; vertical-align: middle; font-weight: 500;}
.cm-custom-input::placeholder{color: #c3c3c3;}
.cm-custom-input:focus{outline: none;}
.cm-custom-input::-ms-clear { display: none; } 
.cm-custom-input[readonly]{background-color:#f5f5f5;}
.cm-custom-input[readonly] + .input-val-delete-btn{display: none;}
.cm-custom-input.bg-gray{border-color: #f8f8f8; background-color: #f8f8f8;}

/* 인풋+버튼 */
.cm-input-btn-box{width: 100%; display: flex; justify-content: space-between;}
.cm-input-btn-box .cm-custom-input{width: calc(100% - 14rem);}
.cm-input-btn-box button,
.cm-input-btn-box a{margin-left: 1rem; max-width: none !important; width: 13rem;}

/* 이메일폼 */
.email-fieldset{width: 100%; display: flex; flex-wrap:wrap; align-items: center; justify-content: flex-start;}
.email-input-group{max-width: calc(100% - 14rem); display: flex; flex-wrap:wrap; align-items: center;}
.email-input-group input{width: calc(50% - 1.5rem); max-width: 16.3rem !important;}
.email-input-group .hypen{display: block; width: 3rem; text-align: center; font-size: 1.4rem;}
.email-input-group + .cm-custom-selectbox{margin-left: 1rem; width: 16rem !important;}

/* ========================================================
 * 모달 레이어팝업 스타일
 * 모든페이지 공통사용
======================================================== */
/* **** 팝업 배경 영역 **** */
/* modal layer */
.modal-fixed-pop-wrapper{display:none; overflow-y:scroll; overflow-x:hidden;  position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:9999; background:rgba(0,0,0,0.5);}
.modal-fixed-pop-inner{position:absolute; display:table; width:100%; height:100%; text-align:center;}
.modal-inner-box{ position:relative; display:table-cell; vertical-align:middle;}
.modal-inner-content{text-align:left;}
/* modal layer content */
.cm-modal-content{position:relative; width:96%; max-width:134rem; margin:20px auto;}

@media all and ( max-width: 800px ){
	/* modal layer content */
	.cm-modal-content{width:auto; margin:50px var(--area-padding);}
	.modal-fixed-pop-inner,
	.modal-inner-box{display: block;}
}

/* **** 팝업 레이어 스타일 공통 **** */
.cm-modal-content{padding: 6.5rem 6rem; background-color: var(--white-color); box-sizing: border-box; border-radius: 1.5rem; box-shadow: 0 0 1rem 0 rgba(0,0,0,0.27); margin: 20px auto;}
.cm-modal-content.width-810{max-width: 81rem;}
.cm-modal-content.width-1000{max-width: 100rem;}
.cm-modal-content.width-1340{max-width: 134rem;}
.cm-modal-top-txt{text-align: center; margin-bottom: 2.6rem;}
.cm-modal-top-txt i{font-size: 5.6rem;}
.cm-modal-top-txt h5{font-size: 3.5rem; line-height: 1.3; letter-spacing: -0.075em; font-weight: 600; color: #000; margin-bottom: 1rem;}
.cm-modal-top-txt p{margin-top: 2rem; font-size: 1.6rem; line-height: 1.87; letter-spacing: -0.05em; color: #464646;}
.cm-modal-btn-group{margin-top: 3rem; text-align: center;}
.cm-modal-btn-group a,
.cm-modal-btn-group button{margin: 0 0.5rem; max-width: 17rem;}

/* *** 푸터 :: 서비스 이용약관 **** */
#popupAgreement .cm-modal-content.width-1340,
#popupAgreement .cm-custom-tab-content{padding: 0;}
.popup-footer-tab-con{padding: 6.5rem 6rem;}
.popup-footer-top{position: relative; text-align: center;}
.popup-footer-top .tit{font-size: 3.5rem; line-height: 1.3; letter-spacing: -0.075em; font-weight: 600; color: #000;}
.popup-footer-top .cm-custom-selectbox{position: absolute; top: 50%; margin-top: -2rem; right: 0; width: 28rem;}
.popup-footer-bottom{margin-top: 6rem; padding-top: 6rem; border-top: 0.2rem solid #000;}
.popup-footer-bottom .custom-scrollbar-wrapper.insideY .scroll-object-box{height: 40.5rem;}
.popup-footer-bottom h5,
.popup-footer-bottom p{font-size: 1.6rem; line-height: 1.87; font-weight: 400; letter-spacing: -0.05em; color: #464646;}
.popup-footer-bottom h5{font-weight: 600;}
.popup-footer-bottom p + h5{margin-top: 3.5rem;}

/* **** 팝업 :: 사업자 등록증 첨부하기 **** */
.pop-business-license-box{margin: 6rem auto 0; max-width: 63rem; display: flex; align-items: center;}
.pop-business-license-box .tit{width: 14rem; font-size: 1.7rem; line-height: 1.3; letter-spacing: -0.05em; font-weight: 500; color: #303030; display: block;}
.pop-business-license-box .cm-custom-file-box{width: calc(100% - 14rem);}

@media all and ( max-width: 800px ){
	/* **** 팝업 레이어 스타일 공통 **** */
	.cm-modal-content{padding: 3.5rem 3rem; border-radius: 1.5rem; margin: 20px var(--area-padding);}
	.cm-modal-top-txt i{font-size: 4.6rem;}
	.cm-modal-top-txt h5{margin-top: 1.5rem; font-size: 2.6rem; line-height: 1.3;}
	.cm-modal-top-txt p{margin-top: 1.5rem; font-size: 1.5rem; line-height: 1.87;}
	.cm-modal-btn-group{margin-top: 3rem;}
	.cm-modal-btn-group a,
	.cm-modal-btn-group button{margin: 0 0.5rem; width: calc(50% - 2rem);}


	/* *** 푸터 :: 서비스 이용약관 **** */
	.popup-footer-tab-con{padding: 3.5rem 3rem;}
	.popup-footer-top .tit{font-size: 2.6rem; line-height: 1.3;}
	.popup-footer-top .cm-custom-selectbox{margin-bottom: 3rem; position: static; margin-top: 0; width: 100%;}
	.popup-footer-bottom{margin-top: 3rem; padding-top: 3rem;}
	.popup-footer-bottom .custom-scrollbar-wrapper.insideY .scroll-object-box{height: 25rem;}
	.popup-footer-bottom h5,
	.popup-footer-bottom p{font-size: 1.3rem; line-height: 1.87;}
	.popup-footer-bottom p + h5{margin-top: 2rem;}


	/* **** 팝업 :: 사업자 등록증 첨부하기 **** */
	.pop-business-license-box{margin: 3rem auto 0;}
	.pop-business-license-box .tit{width: 10rem; font-size: 1.5rem; line-height: 1.3;}
	.pop-business-license-box .cm-custom-file-box{width: calc(100% - 10rem);}
}

/* 문의 보안코드 */
.security-code-box {position: relative;
padding: 0 2.5rem;
height: 6rem;
background-color: #f6f6f6;
border: 0;
border-radius: 0.5rem;
box-sizing: border-box;
display: flex;
align-items: center;}
.security-code-box .security-code {width: 10rem;
font-size: 1.6rem;
letter-spacing: -0.015em;
color: #000;}
.security-code-box .write-input {    width: calc(100% - 10rem) !important;
max-width: 31rem;
height: 4.5rem !important;
background-color: #fff !important;}

/* ========================================================
 * 툴팁 스타일
 * 모든페이지 공통사용
======================================================== */
.cm-tooltip-open-btn{margin-left: 3px; position: relative; cursor: pointer; display: inline-block; vertical-align: middle;}
.cm-tooltip-open-btn > i{font-size: 2.4rem; color: var(--main-color); position: relative; top: 3px;}
.cm-tooltip-con{display: none; position: absolute; top: 0; left: 3rem; z-index: 99999;}
.cm-tooltip-inner{position: relative; padding: 1.5rem 2rem; width: 25rem; background-color: s#e7f0fd; border-radius: 0.5rem; font-size: 1.5rem; line-height: 1.6; font-weight: 500; letter-spacing: -0.015em; color: var(--main-color); border: 0.2rem solid var(--main-color); box-sizing: border-box;}