@charset "utf-8";

/* **************************************** *
 * 공통 세팅
 *********************************************/
/* body set */
body,
input[type="text"],
textarea, button{line-height:1.5; font-size:14rem; word-break: keep-all;}
p{font-weight: 300;}

 /* root */
 :root {
	--c-01: #283E60;
	--c-02: #65B2E2;
	--b-01: #1D2B36;
	--p-01: #527480;
	--f: #fff;
	--bg:#F5F6FA;
	--g: #A0A7AD;
}

[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: var(--bg) !important;}

/* flex set */
 [data-flex]{display:flex;}
 [data-flex="center"]{align-items: center;}
 [data-flex="baseline"]{align-items:baseline;}
 [data-flex="end"]{align-items:flex-end;}
 [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: var(--p-01);}
[data-list] > *:last-child{margin:0;}
[data-list="dot"] > *{padding-left: 8rem;}
[data-list="dot"] > *::before{top: 10rem;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;}
.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: #999;}
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: #666;border-color: #f7f7f7;}
input:is([type="text"], [type="password"]):read-only::placeholder{color: #afafaf !important;}
input:is([type="text"], [type="password"]),
textarea{border: 1px solid #E5E5E5;border-radius: 5rem;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);}

/* **************************************** *
 * 공통 모션 요소
 *********************************************/
/* 모바일 셀렉트 */
.select-wrap{width:100%;}
.select-btn{display:block; display:flex; align-items:center; position:relative; padding:13rem 16rem; border:1px solid #E5E5E5; color:#cbcbcb !important; border-radius:5rem;}
.select-btn.on{color:var(--b-01) !important;}
.select-btn::after{content:""; position:absolute; right:15rem; width:14rem; height:19rem; background:url(../img/common/arrow-basic_g.svg) no-repeat 50% 50%; background-size:9rem; transform:rotate(90deg);}
.solution-write .select-wrap{margin-top:35rem;}
.select-close-cover{display:none; position:fixed; top:0; left:0; z-index:0; z-index:10; width:100%; height:100vh; background:rgba(0,0,0,0.1);}
.select-con__wrap{position:fixed; bottom:0; left:0; z-index:900; 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;}
.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; width:100%; height:47rem; margin-top:29rem; background:var(--c-02); 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:var(--b-01) !important; flex:28%;}

/* 텝 */
.tabs > li{padding:9rem 14rem; font-weight:400; font-size:15rem; color:#a1a1a1; white-space:nowrap;}
.tabs li.active{font-weight:700; color:var(--c-01);}

/* **************************************** *
* 공통 사이트 스타일
* **************************************** */
/* 버튼 및 영역 */
*[class*="btn-basic"]{height:60rem; font-size:15rem; border-radius:5rem;}
*[class*="btn-basic"] + *[class^="btn-basic"]{margin-top:6rem;}
*.btn-basic{background:var(--c-01); color:#fff;}
*.btn-basic--g{background-color: #e5e5e5;color: #8f8f8f;font-weight: 500;}
*.btn-basic--line{border:1px solid var(--c-01); color:var(--c-01);}
*.btn-basic--line.gray{color:#777; border-color:#d1d1d1;}
.btn-wrap--ab{position:absolute; bottom:20rem;left:20rem;width:calc(100% - 40rem); margin-left: 0;}
.btn-wrap--fix{position:fixed; bottom:20rem; left:20rem; width:calc(100% - 40rem);}
.button-wrap{justify-content: center}
button.style01{border-radius: 100rem; background-color: var(--b-01); color: #fff; width: 231rem; display: flex; align-items: center; justify-content: center; height: 56rem; color: #fff;}
.btn-edit {position: absolute;}
.btn-edit label {position: relative; display: block; width: 30rem; height: 30rem; font-size: 0; background: #000 url(../img/common/ic-edit.svg) no-repeat center / 12rem; 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;}

/* 프로필사진 */
.cmn-thum{display:block;overflow:hidden;width: 25rem;height: 25rem;margin-right:5rem;background-color:#F1F1F1;background-size:12rem;background-position:50% 50%;border:1px solid #E3E3E3;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{ -ms-overflow-style: none; /* IE and Edge */scrollbar-width: none;}
.swiper-tabs:-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/}
.swiper-tabs{display:flex; align-items:center; overflow-x:scroll; padding-left: 20rem; }
.swiper-tabs > li {white-space: nowrap;  padding-right: 27rem;}
.swiper-tabs > li *{font-size: 15rem; color: var(--c-01); font-weight: 700; position: relative; padding-bottom: 7rem; display: block;}
.swiper-tabs > li *::before{content: "";  position: absolute; left: 0; bottom: 0; width: 100%; height: 2rem; background-color:transparent;}
.swiper-tabs > li.on *::before{background-color: var(--b-01);}


/* 섹션 구분선 */
.sec-line{display:block; height:5px; background:#F5F5F5; /* border-top:1px solid #EAEAEA; */}
.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; justify-content:space-between; align-items:center; font-size:13rem; color:#B6B6B6;}
.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);}

/* 패딩값 */
[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 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;}


/* 타이틀 */
.cmn-title[data-flex]{display: flex; justify-content: space-between; gap: 40rem;}
.cmn-title h2{color: var(--b-01); font-size: 22rem; line-height: 1.363; font-weight: 700;}
.cmn-title a{color: var(--g);}
.content-wrap h3{font-size: 18rem; font-weight: 600; line-height: 1.01;}
.content-wrap h4{font-size: 16rem;}
span.sm-measure{color: var(--p-01); font-weight: 300; font-size: 12rem;}


/* 쇼핑 공통리스트 */
.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;}
.v--shop  .cmn-price {margin-top: 14rem;}
.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);}

/* 뉴스 공통리스트 */
.v--news .colum-slider .swiper-slide{width:232rem;}
.v--news figure{margin-bottom: 16rem; border-radius: 10rem; overflow: hidden;}
.v--news strong{font-size: 16rem; font-weight: 700; color: var(--b-01); line-height: 26rem;}
.v--news p{line-height: 22rem; margin-top: 1rem;}
.v--news img{width: 100%;}

.one-banner img{width: 100%;}

/* 박스 */
.box-br{border: 1px solid #eee; box-sizing: border-box; border-radius: 10rem; padding: 20rem; position: relative;}
.box-bg{background: var(--bg); box-sizing: border-box; padding:35rem 20rem; border-radius: 10rem;}
.box-white{border-radius: 10rem; background-color: var(--f); padding:30rem 20rem;}

.cmn-form__box{}
.cmn-form__box label{font-weight: 700; color: var(--b-01);}
.cmn-form__box label + *{margin-top: 9rem;}
.cmn-form__box .input-box{position: relative;}
.cmn-form__box .input-box .sm-measure{position: absolute; margin-top: 0; right: 11rem; top: 50%; transform: translateY(-50%);}

.news-list__box + .news-list__box{margin-top: 25rem;}