@charset "utf-8";

/* **************************************** *
 * 공통 세팅
 *********************************************/
/* body set */
body{height: 100%; background: #fff; color: #111; margin: 0; padding: 0; overflow-x: hidden; word-break: keep-all;}

body,
input[type="text"],
textarea{line-height:1.5; font-size:14rem;}

 /* root */
 :root {
	--c-01: #312A21;
	--c-02:#F6F2ED;
	--c-03:#936F55;
	--b-01: #111;
	--b-02: #282828;
	--f: #fff;
	--g-01: #484B51;
	--g-02: #aaa;
	--l-01: #e1e1e1;
	--l-02: #efefef;
	--font-en: 'Outfit';

	--o-01 : #F16C19;
}

[data-color="1"]{color:var(--c-01) !important;}
[data-color="2"]{color:var(--c-02) !important;}

[data-bg="1"]{background-color: var(--c-01) !important;}
[data-bg="2"]{background-color: var(--c-02) !important;}

[data-bg="gray"]{background-color: #f7f7f7 !important;}

/* 패딩값 */
[data-margin="top 15"]{margin-top: 15rem;}
[data-margin="top 18"]{margin-top: 18rem;}
[data-margin="top 20"]{margin-top: 20rem;}
[data-margin="top 30"]{margin-top: 30rem;}
[data-margin="top 40"]{margin-top: 40rem;}
[data-margin="top 50"]{margin-top: 50rem;}
[data-margin="top 60"]{margin-top: 60rem;}
[data-padding="top 15"]{padding-top: 15rem;}
[data-padding="top 18"]{padding-top: 18rem;}
[data-padding="top 20"]{padding-top: 20rem;}
[data-padding="top 30"]{padding-top: 30rem;}
[data-padding="top 40"]{padding-top: 40rem;}
[data-padding="top 60"]{margin-top: 60rem;}

/* flex set */
 [data-flex]{display:flex;}
 [data-flex="center"]{align-items: center;}
 [data-flex="center center"]{align-items: center; justify-content: center;}
 [data-flex="column"]{flex-direction:column; justify-content:center;}
 [data-flex="center between"]{align-items: center; justify-content: space-between;}
 [data-flex-wrap]{flex-wrap: wrap;}

 /* grid */
 [data-grid]{display:grid;}
 [data-grid="2"]{grid-template-columns:1fr 1fr;gap: 18rem;}
 [data-grid="3"]{grid-template-columns:1fr 1fr 1fr;gap: 34rem;}
 [data-grid="4"]{grid-template-columns:1fr 1fr 1fr 1fr;gap: 47rem;}

 /* overflow */
 [data-hidden]{overflow:hidden !important;}

 /* img set */
 [data-img-set]{display:block; width:100%; height:100%; object-fit:cover;}

/* align set */
[data-align="center"]{text-align: center;}

/* list set */
[data-list] > *{position:relative; margin-bottom:11rem;}
[data-list] > *::before{content:"";position:absolute;left:0;background-color: #cfcfcf;}
[data-list] > *:last-child{margin:0;}
[data-list="dot"] > *{padding-left: 8rem;}
[data-list="dot"] > *::before{top: 7rem;width: 3rem;height: 3rem;border-radius:10rem;}
[data-list="line"] > *{padding-left: 13rem;}
[data-list="line"] > *::before{top: 10rem;width:6rem;height:1rem;}    
[data-list="square"] > *{padding-left: 10rem;}
[data-list="square"] > *::before{top:7rem; width:4rem; height:4rem;}
[data-list="num"] > *{display:flex;align-items:center;margin-bottom: 5rem;}
[data-list="num"] > * > i{display:flex;justify-content:center;align-items:center;width: 23rem;height: 23rem;margin-right: 10rem;background: var(--b-01);color: var(--f-01);border-radius:30rem;font-size: 13rem;}
[data-list="check"] > li{display:flex; position:relative; padding-left:34rem;}
[data-list="check"] > li::before{width:20rem; height:20rem; background:var(--c-01); border-radius:100%;}
[data-list="check"] > li::after{content:""; position:absolute; top:4rem; left:7rem; width:6rem; height:9rem; box-sizing:border-box; border-right:2rem solid var(--f-01); border-bottom:2rem solid var(--f-01); transition:all .2s; transform:rotate(37deg); -webkit-transform:rotate(37deg); -webkit-transition:all .2s;}
  
/* 글자수 자르기 */
*[class^="cmn-overflow"]{display:-webkit-box; overflow:hidden; -webkit-line-clamp:1; -webkit-box-orient:vertical; text-overflow:ellipsis; word-break: keep-all;}
.cmn-overflow--2{-webkit-line-clamp:2;}
.cmn-overflow--3{-webkit-line-clamp:2;}

/* wrap 무시하는 100% 영역 */
[data-full]{width: calc(100% + 40rem) !important;margin-left: -20rem !important;}

/* 인풋 텍스트 */
input:is([type="text"], [type="password"]){min-height: 57rem;}
input:is([type="text"], [type="password"])::placeholder {color: #aaa !important;}
input:is([type="text"], [type="password"]):focus {border-color: var(--c-01); outline: none;}
input:is([type="text"], [type="password"]):read-only {background-color: #f7f7f7;color: #aaa;border-color: #f7f7f7;}
input:is([type="text"], [type="password"]):read-only::placeholder{color: #afafaf !important;}
input:is([type="text"], [type="password"]), textarea{font-size: 14rem; color: #aaa;  border: 1px solid #e1e1e1; border-radius: 7rem; padding: 16px 17rem; width: 100%; outline: none;}
textarea {height: 80rem;/* padding: 11px 13rem; */}

/* 체크박스 */
.check-box + .check-box{margin-left: 15rem;}
input[type="checkbox"] {display: none;}
input[type="checkbox"] + label {padding-left: 30rem;position: relative;display: block;color: #888;}
input[type="checkbox"] + label.strong {color: #111;}
input[type="checkbox"] + label::before,
input[type="checkbox"] + label::after{content: "";width: 22rem;height: 22rem;border: 1px solid #ddd;border-radius: 3rem;overflow: hidden;position: absolute;top: 50%;left: 0;transform: translateY(-50%);background-repeat: no-repeat;background-size: 11rem;background-position: 50% 50%;}
input[type="checkbox"] + label::before { display: block; background-image: url(../img/common/ic-check.svg);}
input[type="checkbox"] + label::after {display: none;background-image: url(../img/common/ic-check_w.svg);background-color: var(--c-01);border-color: transparent;}
input[type="checkbox"]:checked + label {color: #111;}
input[type="checkbox"]:checked + label::after {display: block;} 

/* 라디오 */
.radio-box + .radio-box{margin-left: 15rem;}
input[type="radio"] {display: none;}
input[type="radio"] + label {padding-left: 30rem;position: relative;display: block;color: #888;}
input[type="radio"] + label.strong {color: #111;}
input[type="radio"] + label::before,
input[type="radio"] + label::after{content: "";width: 22rem;height: 22rem;border: 1px solid #ddd;border-radius: 3rem;overflow: hidden;position: absolute;top: 50%;left: 0;transform: translateY(-50%);background-repeat: no-repeat;background-size: 11rem;background-position: 50% 50%;border-radius: 100rem;}
input[type="radio"] + label::before {display: block;}
input[type="radio"] + label::after {background-image: url(../img/common/ic-check_w.svg);background-color: var(--c-01);border-color: transparent;}
input[type="radio"]:checked + label {color: #111;}
input[type="radio"]:checked + label::after {display: block;background-color: var(--c-01);} 
input[type="radio"] + label::after{left:7rem; width:8rem; height:8rem; background:#e9e9e9;}
input[type="radio"]:checked + label::before{border-color: var(--c-01);}

.radio-wrap .radio-box {padding:10rem 8rem; padding-right: 15rem; border-radius: 30rem; border: 1px solid var(--l-01);}
.radio-wrap .radio-box + .radio-box{margin-left: 7rem;} 
.radio-wrap .radio-box:has(input[type="radio"]:checked) {border-color: var(--c-01);}
.radio-wrap input[type="radio"] + label {line-height: 1;}
.radio-wrap input[type="radio"] + label::before {width: 20rem;height: 20rem;border: none;border-radius: 20rem;overflow: hidden; background-color: #ddd;}
.radio-wrap input[type="radio"]:checked + label {font-weight: 600; color: var(--c-01);}
.radio-wrap input[type="radio"]:checked + label::before {background-color: var(--c-01);}
.radio-wrap input[type="radio"] + label::after {left: 6rem; width: 8rem; height: 6rem; margin-top: -1px; border: solid var(--f); border-width: 0 0 2rem 2rem; border-radius: 0; background: transparent; transform:translateY(-50%) rotate(-45deg);}


/* **************************************** *
 * 공통 모션 요소
 *********************************************/
/* 모바일 셀렉트 */
.select-btn{display:block; position:relative; padding: 15rem 20rem; border: 1px solid var(--l-01); font-weight: 200; border-radius: 7rem; color: #aaa;}
.select-btn::after{content:""; position:absolute; right:17rem; top:19rem; width:8rem; height:8rem; border:solid var(--g-02); border-width: 0 2rem 2rem 0; transform:rotate(45deg);}

.select-filter .select-btn{display:inline-flex; align-items:center; padding:8rem 8rem; padding-right: 30rem; border:1px solid #e1e1e1; color:var(--g-02) !important; border-radius: 7rem; font-size: 13rem;}
.select-filter .select-btn::before {content:''; width: 10rem; height: 12rem; margin-right: 5rem; background: url(../img/common/ic-filter.svg) no-repeat center / contain;}
.select-filter .select-btn::after {right:12rem; top:15rem; width:6rem; height:6rem;}

.solution-write .select-wrap{margin-top:35rem;}
.select-close-cover{display:none; position:fixed; top:0; left:0; z-index:0; z-index:999; width:100%; height:100vh; background:rgba(0,0,0,0.1);}
.select-con__wrap{position:fixed; bottom:0; left:0; z-index:1000; width:100%; padding:30rem 30rem 20rem; background:#fff; box-shadow:0px -1px 10px 0px rgba(0, 0, 0, 0.05); transition:all 0.25s ease; transform:translateY(100%); border-top-left-radius:20rem; border-top-right-radius:20rem;}
.select-con__wrap.on{transform:translateY(0%);}
.select-con__wrap > strong{display:block; margin-bottom:20rem; font-size:19rem; color:var(--b-01);}
.select-option{display:flex; align-items:flex-start; flex-direction:column; gap:18rem; padding: 2rem 0; max-height: 250rem; overflow-y: auto;}
.select-option li{width:100%;}
.select-con__wrap::before{content:""; position:absolute; top:13rem; left:50%; width:40rem; height:4px; background:#ebebeb; transform:translate(-50%, -50%); border-radius:30rem;}
.select-con__wrap button{display:flex; justify-content:center; align-items:center; min-width: 50%; width:100%; height:47rem; margin-top:29rem; background:var(--c-01); font-weight:600; font-size:15rem; color:#fff !important; border-radius:6rem;}
button.select-btn__complete{flex:8;}
button.select-btn__reset{margin-right:6rem; background:#f1f1f1; color: #bbb !important; flex:28%; }

/* 텝 */
.content-tab:has(.swiper-tabs) {border-bottom: 1px solid #e5e5e5;}
.tabs {display: flex; align-items: center;}
.tabs li {position: relative; display: inline-flex; justify-content: center; align-items: center; padding:8rem 8rem 7rem; font-weight: 500; font-size: 14rem; color: var(--g-02);}
.tabs i {flex-shrink: 0; position: relative; width: 20rem; height: 20rem; border-radius: 100%; background: #ddd;}
.tabs i::after {position: absolute; left: 6rem; top: 5rem; content:''; width: 8rem; height: 6rem; border:solid var(--f); border-width: 0 0 2rem 2rem; transform: rotate(-45deg);}
.tabs li.active{font-weight:700; color:var(--c-01); border-color: var(--c-01);}


.swiper-tabs {padding: 0 20rem;}
.swiper-tabs li {position: relative; display: inline-flex; align-items: center; margin-right: 20rem; padding: 20rem 0; line-height: 1; font-weight: 700; font-size: 16rem; color: var(--g-02); border-radius: 0; border: none;}
.swiper-tabs li:last-child {margin-right: 0;}
.swiper-tabs li.active{color:var(--c-01);}
.swiper-tabs li.active::after {position: absolute; left:0; bottom:0; content:''; width: 100%; height: 2rem; background: var(--c-01);}
.tab__item--none {margin-top: 50rem; text-align: center; color: var(--g-02);}


/* **************************************** *
* 공통 사이트 스타일
* **************************************** */
/* 버튼 및 영역 */
*[class*="btn-basic"]{height:60rem; font-size:15rem; font-weight: 700; border-radius:7rem;}
*[class*="btn-basic"] + *[class^="btn-basic"]{margin-top:6rem;}
*.btn-basic{background:var(--c-01); color:#fff;}
*.btn-basic--b {color: var(--f); background-color: var(--b-01);}
*.btn-basic--g{background-color: #e5e5e5 !important; color: #666666; font-weight: 500;}
*.btn-basic--line{border:1px solid var(--c-01); color:var(--c-01);}
*.btn-basic--line.black{border:1px solid var(--b-02); color:var(--b-02);}
*.btn-basic--line.gray{color:#777; border-color:#d1d1d1;}
.btn-wrap--ab{position:fixed; bottom:20rem;left:20rem;width:calc(100% - 40rem); margin-left: 0; z-index: 99;}
.btn-wrap--fix{position:fixed; bottom:20rem; left:20rem; width:calc(100% - 40rem);}
.btn-edit {position: absolute;}
.btn-edit label {position: relative; display: block; width: 30rem; height: 30rem; font-size: 0; background: var(--c-01) url(../img/ic-camera.svg) no-repeat center; border-radius: 100%; border: 2rem solid var(--f); box-shadow: 0 0 15rem rgba(0, 0, 0, .07);}
.btn-edit input[type="file"] {overflow: hidden; position: absolute; width: 0; height: 0; padding: 0; border:0}
.btn-wrap[data-grid] {gap: 0 7rem;}
.btn-wrap[data-grid] *[class*="btn-basic"] + *[class^="btn-basic"]{margin-top:0;}


/* 타이틀 */
.sec-tit {position:relative; padding-right: 20rem; font-weight: 800; font-size:20rem; color:var(--c-01);}
.sec-tit > span {font-weight: 800; font-size:20rem; color:var(--c-01);}
.sec-tit strong {font-weight: 700; color: var(--c-01);}
.sec-tit i {position: absolute; right: 0; top: 8rem; width: 7rem; height: 14rem;}
.sec-tit i::after {position: absolute; left: 50%; top: 50%; content:''; width: 8rem; height: 8rem; border: solid var(--b-01); border-width: 0 2rem 2rem 0; transform: translate(-50%, -50%) rotate(-45deg);}

/* 프로필사진 */
.cmn-thum{display:block;overflow:hidden;width: 25rem;height: 25rem; margin-right:12rem; background-color:#f9f9f9;background-size:12rem;background-position:50% 50%;border:1px solid #ddd;border-radius:100%;background-image:url(../img/common/no-profile.svg);background-repeat:no-repeat;}
.cmn-thum:has(img){border-color: #f1f1f1;}
.cmn-thum img{display:block; width:100%; height:100%; object-fit:cover;}
.cmn-img{display:block; width:100%; height:100%; object-fit:cover;}

/* 좋아요 댓글 개수 */
.cmn-reply-list{display:flex; gap:7rem;}
.cmn-reply-list > li{display:flex; align-items:center; position:relative; font-size:12rem;}
.cmn-reply-list > li::before{content:""; display:block; width:15rem; height:15rem; background-position:50% 50%; background-repeat:no-repeat;}
.cmn-reply-item--1::before{background-image:url(../img/ic-comment-01.svg);}
.cmn-reply-item--2::before{background-image:url(../img/ic-comment-02.svg);}
.cmn-reply-item--3::before{background-image:url(../img/ic-comment-02.svg);}

/* 스와이프 메뉴 */
.swiper-tabs{display:flex; align-items:center; overflow-x:scroll;}
.swiper-tabs > li {white-space: nowrap;}

/* 섹션 구분선 */
.sec-line{display:block; height:5px; background:var(--l-02);}
.sec-line--line{display:block; border-bottom:1px solid #ededed;}

/* 결제리스트 */
.between-list{display:flex;align-items:stretch;flex-direction:column;gap:5rem;}
.between-list li{display:flex; gap: 8rem; justify-content:space-between; align-items:center; font-size:13rem; color:#aaa;}
.between-list li i{font-weight:400; color:var(--b-01);}
.between-list li i[data-color]{line-height:1; font-weight:800; font-size:15rem;}
.between-list li:has([data-color]){margin-top:3rem;}
.between-list li strong{font-size:15rem; color:var(--b-01);}

/* 쇼핑 공통리스트 */
.v--shop .colum-slider .swiper-slide{width:130rem;}
.v--shop  figure{width: 100%; padding-bottom: 100%; margin-bottom: 9rem; position: relative; border-radius: 5rem; overflow: hidden; background: var(--bg);}
.v--shop  figure img{ position: absolute; left: 0; top: 0;}
.v--shop  p{color: var(--b-01); line-height: 1.214; font-size: 12rem;}
.v--shop  .cmn-price {margin-top: 4rem;}
.cmn-price *{color: var(--b-01); line-height: 1;}
.cmn-price strong{ font-size: 17rem;  font-weight: 700; display: inline-block;}
.cmn-price i{font-size: 16rem;}
.cmn-review{position: relative; margin-top: 0rem;}
.cmn-review::before{content: ""; display: inline-block; width: 10rem; height: 9rem; background-image: url(../img/ic-star.svg); background-size: 100%; background-repeat: no-repeat; margin-right:-1rem; }
.cmn-review *{font-size: 12rem; color: var(--g);}


.orange {background-color: var(--o-01);}