@charset "utf-8";

/* **************************************** *
 * 공통 세팅
 *********************************************/
/* body set */
body,
input[type="text"],
textarea{line-height:1.5; font-size:15rem;}

 /* root */
 :root {
	--c-01: #3650A4;
	--c-02:#F2631D;
	--b-01: #111;
	--f: #fff;
	--g: #d9d9d9;
}

[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;}

/* 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;}

 /* 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;}
.cmn-overflow--2{-webkit-line-clamp:2;}
.cmn-overflow--3{-webkit-line-clamp:2;}

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

/* 인풋 텍스트 */
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: 7rem;padding: 16px 17rem;width: 100%;outline: none;}
textarea {height: 80rem;/* padding: 11px 13rem; */}

/* 체크박스, 라디오 */
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;} 

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-02);} 
input[type="radio"] + label::after{left:7rem; width:8rem; height:8rem; background:#e9e9e9;}
input[type="radio"]:checked + label::before{border-color:var(--c-02);}

/* **************************************** *
 * 공통 모션 요소
 *********************************************/
/* 모바일 셀렉트 */
.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);}
ul.select-option{display:flex; align-items:flex-start; flex-direction:column; gap:18rem;}
ul.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%;}

/* **************************************** *
* 공통 사이트 스타일
* **************************************** */
/* 버튼 및 영역 */
*[class*="btn-basic"]{height:60rem; font-size:15rem; border-radius:10rem;}
*[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);}

/* 프로필사진 */
.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:none;}
.cmn-thum img{display:block; width:100%; height:100%; object-fit:cover;}
.cmn-img{display:block; width:100%; height:100%; object-fit:cover;}