@charset "utf-8";
:root {
--line-color : #ddd;
--skin_bg : #000;
--f_xxxsmall : 14px;
--f_xxsmall : 15px;
--f_xssmall : 16px;
--f_xsmall : 17px;
--f_small : 18px;
--f_middle : 20px;
--f_xmiddle : 22px;
--f_big : 30px;
}
/*
body:not([data-pgCode="1101"], [data-pgCode="1102"], [data-pgCode="1103"], [data-pgCode="1104"]) #pageTop,
#snb{display:none;}
*/
.skin-member{width:50rem; margin:17rem auto 0; padding:45px 2rem 70px; background-color: #fff; border:1px solid var(--line-color); border-top-color:var(--skin_bg); text-align: center; border-radius:0; overflow: hidden;/* box-shadow:0 20px 40px rgba(0,0,0,0.1);*/}
.skin-member.login,
.skin-member.find{padding:45px 4rem 20px;}
.skin-member .h1{}
.skin-member .h1>dt{font-weight: 600; font-size:var(--f_big); line-height:1; color: #111;}
.skin-member .h1>dd{padding-top:1.5rem; font-weight: 500; font-size:var(--f_small); line-height:1.4; color: #999;}
.skin-member .h1>dd>strong{font-weight: 500; color: var(--skin_bg);}
.skin-member .h1>dd>span{color: #111; text-decoration: underline; text-underline-position:under;}
.skin-member .h2{margin:30px 0 10px; font-weight: 600; font-size:var(--f_small); line-height:1.4; color: var(--skin_bg); text-align: left;}
.skin-member .h2.line{margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid var(--skin_bg);}
.skin-member .h1+.h2{margin-top:35px;}
.skin-member input[type=button],
.skin-member input[type=text],
.skin-member input[type=password],
.skin-member input[type=file],
.skin-member input[type=email],
.skin-member select,
.skin-member textarea,
.skin-member .btns{width:100%; height:50px; padding:0 20px; background-color:#fff; border:1px solid var(--line-color); font-weight: 500; font-size:var(--f_small); line-height:48px; color:#111; vertical-align:middle; display: inline-flex; align-items: center; justify-content: center;}
.txt-warning{margin-top:5px; font-size:15px; line-height:1.3; color:#ff0000; }
.skin-member input[type=text],
.skin-member input[type=password],
.skin-member input[type=email],
.skin-member select{background-color:#f6f6f6;}
.skin-member input[type=text]:focus,
.skin-member input[type=password]:focus,
.skin-member select:focus{background-color: #fff; color: var(--skin_bg);}
.skin-member .member-step{width:100%; margin-top:30px; padding:0 30px; display: flex; align-items: center; justify-content: space-between; position: relative;}
.skin-member .member-step:before{content: ""; height: 5px; background-color: #ccc; display:block; position: absolute; left:58px; right:58px; top:7px;}
.skin-member .member-step:after{content: ""; width:0; height: 5px; background-color: var(--point); display:block; position: absolute; left:58px; top:7px;}
.skin-member .member-step>li{font-weight: 500; font-size:var(--f_xsmall); line-height:1; color:#999; position: relative; z-index:3;}
.skin-member .member-step>li:before{content: ""; width: 18px; height: 18px; margin:0 auto 12px; background-color: #ccc; display:block; border-radius:99px;}
.skin-member .member-step.two:after{width:calc(33% - 42px);}
.skin-member .member-step.three:after{width:calc(66% - 80px);}
.skin-member .member-step.four:after{width:calc(100% - 110px);}
.skin-member .member-step>li:nth-child(1),
.skin-member .member-step:is(.two, .three, .four)>li:nth-child(2),
.skin-member .member-step:is(.three, .four)>li:nth-child(3),
.skin-member .member-step:is(.four)>li:nth-child(4){color: #000;}
.skin-member .member-step>li:nth-child(1):before,
.skin-member .member-step:is(.two, .three, .four)>li:nth-child(2):before,
.skin-member .member-step:is(.three, .four)>li:nth-child(3):before,
.skin-member .member-step:is(.four)>li:nth-child(4):before{background-color: var(--point);}
.skin-member .member-step._sns.two:after{width:calc(50% - 60px);}
.skin-member .member-step._sns.three:after{width:calc(66% - 80px);}
.skin-member .member-step._sns.four:after{width:calc(100% - 110px);}
.skin-member .skin-button{width:calc(100% + 4rem); margin:40px 0 -70px -2rem; display: flex; align-items: center; justify-content: space-between; overflow: hidden;}
.skin-member.find .skin-button{width:calc(100% + 8rem); margin:40px 0 -20px -4rem;}
.skin-member .skin-button>*{flex:1; height:70px; background-color:#666; border:none; font-weight: 600; font-size:var(--f_middle); line-height:1.2; color:#fff; text-align: center; display: flex; align-items: center; justify-content: center; overflow:hidden; cursor: pointer; border-radius:0;}
.skin-member .skin-button>input[type="submit"],
.skin-member .skin-button>button,
.skin-member .skin-button>.points{background-color: var(--point);}
.skin-member .skin-button.black>*{background-color: var(--skin_bg);}
/* 로그인 - 입력 */
.skin-member .login-fild{margin-top:3.5rem;}
.skin-member .login-fild>label{display:block; position: relative;}
.skin-member .login-fild>label[for="login-id"]:before{content: ""; width: 41px; background: url('img/icon_id.png') no-repeat 17px center/17px; position:absolute; left: 2px; top:2px; bottom:2px;}
.skin-member .login-fild>label[for="login-pw"]:before{content: ""; width: 41px; background: url('img/icon_pw.png') no-repeat 18px center/14px; position:absolute; left: 2px; top:2px; bottom:2px;}
.skin-member .login-fild input[type=text],
.skin-member .login-fild input[type=password]{height:56px; padding: 0 20px 0 43px; line-height:1; display: flex; align-items: center;}
.skin-member .login-fild input[type=password]{}
.skin-member .login-fild input:-webkit-autofill {
-webkit-box-shadow:0 0 0 1000px #fff inset !important;
box-shadow:0 0 0 1000px #fff inset !important;
}
.skin-member .login-fild input:autofill {
box-shadow:0 0 0 1000px #fff inset !important;
-webkit-text-fill-color:#111 !important;
}
.skin-member .login-fild label + label{margin-top:10px;}
.skin-member .skin-check{width:100%; text-align: left; margin-top:15px; }
.skin-member .skin-check input[type=checkbox]+label{color: #666;}
.skin-member .login-fild input[type=submit]{width:100%; height:60px; margin-top:20px; background-color:var(--skin_bg); font-weight: 600; font-size:var(--f_middle); line-height:1.2; color:#fff; text-align: center; overflow:hidden; cursor: pointer; border-radius:5px;}
/* 로그인 - SNS */
.skin-member .login-sns{}
.skin-member .login-sns button{width:100%; height:60px; padding-left:64px; background:#3bac37 url('img/icon_login_naver.svg') no-repeat 23px center/21px; border:none; font-weight: 600; font-size:var(--f_xsmall); line-height:1.2; color:#fff; text-align: left; cursor: pointer; border-radius:5px; position: relative;}
.skin-member .login-sns button:before{content: ""; width: 8px; height: 14px; margin-top:-7px; background:url('img/arr.png') no-repeat center center/cover; position:absolute; right: 20px; top:50%;}
.skin-member .login-sns button+button{margin-top:10px;}
.skin-member .login-sns button.sns-kakao{background:#fae100 url('img/icon_login_kakao.svg') no-repeat 18px center/30px; color: #381e1f;}
.skin-member .login-sns button.sns-google{background:#fff url('img/icon_login_google.svg') no-repeat 18px center/30px; border:1px solid #ccc; color: #555;}
.skin-member .login-sns button:hover{box-shadow:inset 5px 5px 5px rgba(0,0,0,0.1);}
/* 로그인 - 링크 */
.skin-member .login-link{margin-top:15px;}
.skin-member .login-link>a{width:100%; height:60px; padding:0 20px; font-weight: 500; font-size:var(--f_small); line-height:1.2; color:#666; background:url('img/arr_login.png') no-repeat right 20px center/8px; display: flex; align-items: center; }
.skin-member .login-link>a+a{border-top:1px solid #e6e6e6;}
/* 회원가입 - 약관동의 */
.skin-member .terms-re{width:100%; margin-top:35px; text-align: left;}
.skin-member .terms-re+.terms-re{margin-top:30px;}
.skin-member .terms-re>dl{}
.skin-member .terms-re>dl>dt{margin:0;}
.skin-member .terms-re>dl>dd{margin-top:10px; height:120px; padding:15px 20px; background-color: #f6f6f6; font-weight: 300; font-size:var(--f_xssmall); line-height:1.5; color:#666; border-radius:10px; overflow: hidden; overflow-y: auto;}
.skin-member .terms-re>dl>dd strong{font-weight: 500;}
.skin-member .terms-re>dl>dd>p{margin:2.5rem 0 1rem; font-weight: 500; color: #000;}
.skin-member .terms-re>dl>dd>p:first-child{margin-top:0rem;}
.skin-member .terms-re>dl>dd>p>strong{font-weight: 500; color: #000; display:inline-block;}
.skin-member .terms-re>dl>dd *+p>strong{}
.skin-member .terms-re>dl>dd ol{counter-reset:item; margin-top:1rem;}
.skin-member .terms-re>dl>dd li>p{margin-top:1rem;}
.skin-member .terms-re>dl>dd ol>li>ol{margin-top:0rem;}
.skin-member .terms-re>dl>dd ol>li{padding-left:1.5rem; position: relative; box-sizing:border-box;}
.skin-member .terms-re>dl>dd ol>li:before {counter-increment: item; content: counter(item)"."; display: inline-block; position: absolute; top: 0; left: 0;}
.skin-member .terms-re>dl>dd ol.b>li:before{font-weight: 500; color: #000;}
/*.skin-member .terms-re>dl>dd ol>li:nth-child(-n+9)::before {content: "0"counter(item)".";}*/
.skin-member .terms-re>dl>dd ol.type>li{}
.skin-member .terms-re>dl>dd ol.type>li:before{content: counter(item)")";}
.skin-member .terms-re>dl>dd ol.cNum>li{}
.skin-member .terms-re>dl>dd ol.cNum>li:before{content: "";}
.skin-member .terms-re>dl>dd ol.cNum>li:nth-child(1):before{content: "①";}
.skin-member .terms-re>dl>dd ol.cNum>li:nth-child(2):before{content: "②";}
.skin-member .terms-re>dl>dd ol.cNum>li:nth-child(3):before{content: "③";}
.skin-member .terms-re>dl>dd ol.cNum>li:nth-child(4):before{content: "④";}
.skin-member .terms-re>dl>dd ol.cNum>li:nth-child(5):before{content: "⑤";}
.skin-member .terms-re>dl>dd ol.cNum>li:nth-child(6):before{content: "⑥";}
.skin-member .terms-re>dl>dd ol.cNum>li:nth-child(7):before{content: "⑦";}
.skin-member .terms-re>dl>dd ol.cNum>li:nth-child(8):before{content: "⑧";}
.skin-member .terms-re>dl>dd ol.cNum>li:nth-child(9):before{content: "⑨";}
.skin-member .terms-re>dl>dd ol.cNum>li:nth-child(10):before{content: "⑩";}
.skin-member .terms-re>dl>dd ol.cNum>li:nth-child(11):before{content: "⑪";}
.skin-member .terms-re>dl>dd ol.cNum>li:nth-child(12):before{content: "⑫";}
.skin-member .terms-re>dl>dd ol.kr>li{padding-left:2rem;}
.skin-member .terms-re>dl>dd ol.kr>li:before{}
.skin-member .terms-re>dl>dd ol.kr>li:nth-child(1):before{content: "가.";}
.skin-member .terms-re>dl>dd ol.kr>li:nth-child(2):before{content: "나.";}
.skin-member .terms-re>dl>dd ol.kr>li:nth-child(3):before{content: "다.";}
.skin-member .terms-re>dl>dd ol.kr>li:nth-child(4):before{content: "라.";}
.skin-member .terms-re>dl>dd ol.kr>li:nth-child(5):before{content: "마.";}
.skin-member .terms-re>dl>dd ol.kr>li:nth-child(6):before{content: "바.";}
.skin-member .terms-re>dl>dd ol.kr>li:nth-child(7):before{content: "사.";}
.skin-member .terms-re>dl>dd ol.kr>li:nth-child(8):before{content: "아.";}
.skin-member .terms-re>dl>dd ol.kr>li:nth-child(9):before{content: "자.";}
.skin-member .terms-re>dl>dd ol.kr>li:nth-child(10):before{content: "차.";}
.skin-member .terms-re>dl>dd ol.kr>li:nth-child(11):before{content: "카.";}
.skin-member .terms-re>dl>dd ol.kr>li:nth-child(12):before{content: "타.";}
.skin-member .terms-re>dl>dd ol.kr>li:nth-child(13):before{content: "파.";}
.skin-member .terms-re>dl>dd ol.kr>li:nth-child(14):before{content: "하.";}
.skin-member .terms-re>dl>dd ul.buls>li{padding-left:1.5rem ; position: relative;}
.skin-member .terms-re>dl>dd ul.buls>li:before{content: "-"; display: inline-block; position:absolute; left: 0; top:0;}
.skin-member .terms-re>dl>dd ul.circle>li{padding-left:15px; position: relative;}
.skin-member .terms-re>dl>dd ul.circle>li:before{content: "ο"; display: inline-block; position:absolute; left: 0; top:-1px;}
.skin-member .terms-re>dl>dd li>ol,
.skin-member .terms-re>dl>dd li>ul{margin-bottom:0.7rem;}
.skin-member .terms-re>dl>dd .nTable{width:100%; margin-top:0.5rem; background-color: #fff; border-top:1px solid #ddd;}
.skin-member .terms-re>dl>dd .nTable>table{width:calc(100% + 1px); border-spacing:0; table-layout: fixed;}
.skin-member .terms-re>dl>dd .nTable>table th,
.skin-member .terms-re>dl>dd .nTable>table td{height:auto; padding:0.5rem; font-weight: 300; font-size:var(--f_xxxsmall); line-height:1.3; color:#888; text-align:center; border-collapse:collapse; empty-cells:show;}
.skin-member .terms-re>dl>dd .nTable>table>thead>tr>th{background-color: #f8f8f8; font-weight:500; color:#222; position: relative;}
.skin-member .terms-re>dl>dd .nTable>table>thead>tr>th+th{}
/* 회원가입 - 정보입력 */
.skin-member.form .h2{margin-top:35px;}
.skin-member .skin-form{width:100%; text-align: left; display: flex; flex-flow: row wrap; gap:10px;}
.skin-member .skin-form>li{width:100%;}
.my-change-form .flex-btn,
.skin-member .skin-form>li .flex-btn{display: flex; flex-flow: row wrap; justify-content: space-between; gap:10px; position: relative;}
.my-change-form .flex-btn{gap:1rem;}
.my-change-form .flex-btn .add-num,
.skin-member .skin-form>li .flex-btn .add-num{width:calc(100% - 134px);}
.my-change-form .flex-btn .btns,
.skin-member .skin-form>li .flex-btn .btns{width:124px; padding:0; background-color: #666; border:none; color: #fff; text-align: center;}
.my-change-form .flex-btn .btns{background-color: #000;}
.my-change-form .flex-btn .btns.points,
.skin-member .skin-form>li .flex-btn .btns.points{background-color: var(--point);}
.my-change-form .flex-btn .time,
.skin-member .skin-form>li .flex-btn .time{font-size:var(--f_small); line-height:1.3; color: var(--point); position: absolute; right:154px; top:50%; transform: translateY(-50%);}
.skin-member .skin-form>li .nText{font-size:var(--f_small); line-height:1.3; color: #000; text-align: center;}
.my-change-form .flex-btn + input,
.my-change-form .flex-btn + input + input{margin-top:1rem;}
/* 회원가입 - 완료 */
.skin-member .skin-result{margin-top:40px;}
.skin-member .skin-result .result-top{width:100%; position: relative;}
.skin-member .skin-result .result-top:before{content: ""; width: 50px; height: 50px; margin:0 auto; background:var(--point) url('data:image/svg+xml;utf8,') no-repeat center center/30px; display:block; border-radius:99px;}
.skin-member .skin-result .result-top>dt{margin-top:15px; font-weight: 700; font-size:var(--f_xmiddle); line-height:1; color: #111;}
.skin-member .skin-result .result-top>dt>strong{font-weight: 500; color: var(--point);}
.skin-member .skin-result .result-top>dd{margin-top:5px; font-weight: 500; font-size:var(--f_middle); line-height:1.5; color: #666;}
.skin-member .skin-result .result-info{margin-top:30px; padding:15px 2rem; background-color: #f6f6f6; text-align: left; border-radius:10px; overflow: hidden;}
.skin-member .skin-result .result-info>dl{width:100%; padding:5px 0; font-size:var(--f_small); line-height:21px; color:#666; display: flex;}
.skin-member .skin-result .result-info>dl>dt{width:70px; font-weight: 500; color: var(--skin_bg);}
.skin-member .skin-result .result-info>dl>dd{width:calc(100% - 70px);}
/* 찾기 */
.skin-member .skin-find-tab{margin:35px 0 30px; display: flex; align-items: center; justify-content: space-between;}
.skin-member .skin-find-tab button{flex:1; height:54px; background-color:#f6f6f6; border:1px solid var(--line-color); border-bottom-color:var(--skin_bg); font-weight: 400; font-size:var(--f_middle); line-height:1.2; color:#999; text-align: center; display: flex; align-items: center; justify-content: center; overflow:hidden; cursor: pointer; border-radius:0; position: relative;}
.skin-member .skin-find-tab button+button{margin-left:-1px;}
.skin-member .skin-find-tab button.active{background-color: #fff; border-color:var(--skin_bg); border-bottom-color:#fff; font-weight: 600; color:var(--point); z-index:2;}
.skin-member .skin-find-conts,
.skin-member .skin-find-conts-sub{display:none;}
.find_id_result{margin-top:25px; padding:20px; background-color: #f4f6f8; border-radius:5px; text-align: center;}
.find_id_result>dl{line-height:1.3;}
.find_id_result>dl>dt{font-weight: 500; font-size:var(--f_middle); color: var(--point);}
.find_id_result>dl>dd{font-size:var(--f_small); color: var(--skin_bg);}
.find_id_result>a{width:90px; height:40px; margin-top:15px; background-color:var(--skin_bg); font-weight: 600; font-size:var(--f_small); line-height:1.3; color:#fff; text-align: center; display: inline-flex; align-items: center; justify-content: center; overflow:hidden; cursor: pointer; border-radius:5px;}
/* 마이페이지 */
.my-menu{margin-bottom:3rem; border:1px solid var(--line-color); font-size:0; line-height:0; text-align: center; display: flex; position: relative; border-radius:1rem;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f5f5f5+0,eeeeee+100 */
background: linear-gradient(to bottom, #f5f5f5 0%,#eeeeee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.my-menu a{flex:1; height:7rem; padding:0 1rem; font-weight: 400; font-size:2rem; line-height:1.3; color: #999; display: flex; align-items: center; justify-content: center; white-space: nowrap; transition: all .3s ease-out; position: relative;}
.my-menu a:before{content: ""; width: 0; height: 0; border-top:0 solid #333; border-bottom:0 solid #333; border-left:1rem solid transparent; border-right:1rem solid transparent; display: inline-block; position:absolute; left: 50%; top:100%; transform: translateX(-50%); transition: all .3s ease-out; opacity: 0;}
.my-menu a+a:not(:nth-of-type(2)){border-left:1px solid var(--line-color);}
.my-menu a:nth-of-type(1){display:none;}
.my-menu a:nth-of-type(2){border-radius:1rem 0 0 1rem;}
.my-menu a:last-child{border-radius:0 1rem 1rem 0;}
.my-menu a:is(:hover, .active){background-color:#333; font-weight: 600; color:#fff; z-index:2;}
.my-menu a:is(:hover, .active):before{border-top-width:1rem; opacity: 1; z-index:3;}
.my-main-top{border:1px solid #e6e6e6; display: flex; position: relative; border-radius:3rem; overflow: hidden;}
.my-main-top .my-main-top_re{flex:1; padding:3.5rem 3rem; font-size:1.7rem; line-height:3rem; color: #000;}
.my-main-top .my-main-top_re.info{display: flex; align-items: center; justify-content: space-between;}
.my-main-top .my-main-top_re.info dd{margin-top:1rem; font-size:1.5rem; line-height:1.3; color: #999;}
.my-main-top .my-main-top_re.info dd>strong{font-weight: 400; color: #555; white-space: nowrap;}
.my-main-top .my-main-top_re.info dd>span{white-space: nowrap;}
.my-main-top .my-main-top_re.info dd>img{margin-top:0.1rem; vertical-align: top;}
.my-main-top .my-main-top_re.info p>img{width:7.1rem;}
.my-main-top .my-main-top_re.step{border-left:1px solid #e6e6e6; display: flex; flex-flow: column nowrap; justify-content: center;}
.my-main-top .my-main-top_re.step>p{line-height:1.3;}
.my-main-top .my-main-top_re.step>p+p{margin-top:1rem;}
.my-main-top .my-main-top_re.step>p strong{font-weight: 600;}
.my-main-top .my-step{width:100%; margin-top:1rem; padding:0; display: flex; align-items: center; justify-content: space-between; position: relative;}
.my-main-top .my-step:before{content: ""; height: 4px; background-color: #f4f6f8; display:block; position: absolute; left:2rem; right:2rem; top:5px;}
.my-main-top .my-step:after{content: ""; width:0; height: 4px; background-color: var(--point); display:block; position: absolute; left:2rem; top:5px;}
.my-main-top .my-step>li{position: relative; z-index:3;}
.my-main-top .my-step>li:before{content: ""; width: 15px; height: 15px; margin:0 auto 0.6rem; background-color: #f4f6f8; display:block; border-radius:99px;}
.my-main-top .my-step>li>span{padding:0.7rem 0.9rem 0.6rem; font-size:1.6rem; line-height:1; color:#999; display:inline-block; border-radius:1rem; overflow: hidden;}
.my-main-top .my-step>li:nth-of-type(1):before,
.my-main-top .my-step:is([data-num="2"], [data-num="3"], [data-num="4"])>li:nth-of-type(2):before,
.my-main-top .my-step:is([data-num="3"], [data-num="4"])>li:nth-of-type(3):before,
.my-main-top .my-step:is([data-num="4"])>li:nth-of-type(4):before{background-color: var(--point);}
.my-main-top .my-step:is([data-num=""], [data-num="1"])>li:nth-of-type(1)>span,
.my-main-top .my-step:is([data-num="2"])>li:nth-of-type(2)>span,
.my-main-top .my-step:is([data-num="3"])>li:nth-of-type(3)>span,
.my-main-top .my-step:is([data-num="4"])>li:nth-of-type(4)>span{background-color: var(--point); font-weight: 600; color: #fff;}
.my-main-top .my-step:is([data-num="2"]):after{width:calc(33% - 1.5rem);}
.my-main-top .my-step:is([data-num="3"]):after{width:calc(66% - 1.5rem);}
.my-main-top .my-step:is([data-num="4"]):after{width:calc(100% - 4rem);}
.my-main-top .my-main-top_re.graph{border-left:1px solid #e6e6e6; display: flex; align-items: center; justify-content: space-between;}
.my-main-top .my-main-top_re.graph>dl{}
.my-main-top .my-main-top_re.graph>dl>dt{font-weight: 600;}
.my-main-top .my-main-top_re.graph>dl>dd{margin-top:0.5rem; line-height:1.3;}
.my-main-top .my-main-top_re.graph>dl>dd>p{margin-top:0.7rem; display: flex; align-items: start; gap:0 0.5rem;}
.my-main-top .my-main-top_re.graph>dl>dd>p>span{margin-top:-0.3rem; padding:0.5rem 0.8rem 0.4rem; background-color: #555; line-height:1; color:#fff; display:inline-block; border-radius:1rem; overflow: hidden; white-space: nowrap;}
.my-main-top .my-main-top_re.graph>dl>dd>p>span.ing{background-color: var(--point);}
.my-main-top .my-main-top_re.graph .chart{display: flex; align-items: center; gap: 1rem;}
/* 도넛: --value(0~100), --fg(진행색), --bg(배경색), --size, --thickness */
.my-main-top .my-main-top_re.graph .donut {
--value: 40;
--fg: #2ca6e0;
--bg: #555;
--size: 9rem;
--thickness: 0.8rem;
inline-size: var(--size);
block-size: var(--size);
border-radius: 50%;
background:
conic-gradient(var(--fg) 0% calc(var(--value) * 1%), var(--bg) 0%);
/* 중앙 구멍을 만들기 위한 마스크 */
-webkit-mask:
radial-gradient(farthest-side,
transparent calc(50% - var(--thickness)),
#000 calc(50% - var(--thickness) + 0.5px));
mask:
radial-gradient(farthest-side,
transparent calc(50% - var(--thickness)),
#000 calc(50% - var(--thickness) + 0.5px));
}
/* 범례 */
.my-main-top .my-main-top_re.graph .legend{color: #666;}
.my-main-top .my-main-top_re.graph .legend li{display: flex; align-items: center; gap: 0.6rem;}
.my-main-top .my-main-top_re.graph .legend .dot {inline-size: 1.4rem; block-size: 1.4rem; border-radius: 50%; background: var(--c);}
.my-main-step{padding:2.5rem 2.9rem 3rem; border:1px solid #e6e6e6; position: relative; border-radius:3rem; overflow: hidden;}
.my-main-step.progress{padding-bottom:6rem;}
.my-main-step .title{padding-bottom:2.5rem; border-bottom:1px solid #e6e6e6; font-size:2.5rem; line-height:1.3; color: #000; text-align: center;}
.my-main-step .b-title{font-weight: bold; font-size:2.5rem; line-height:1.4; color: #000; text-align: center;}
.my-main-step .my-main-step-top{padding-bottom:2.5rem; border-bottom:1px solid #e6e6e6; display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between;}
.my-main-step .my-main-step-top .my-main-sort{margin-bottom:0;}
.my-main-step .my-main-step-top .title{padding-bottom:0; border-bottom:none;}
.my-main-step .my-main-step-top .title>span{font-size:2rem;}
.my-main-step ol{margin-top:2.9rem; text-align: center; display: flex; flex-flow: row wrap; gap:2rem; counter-reset:item;}
.my-main-step ol>li{width:calc((100% - 8rem) / 5); padding:1.5rem 2rem; background-color: #f4f6f8; border:1px solid #ddd; border-radius:3rem; display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; position: relative;}
.my-main-step ol>li:before{content: ""; width: 3rem; height: 100%; background:url('img/arr_login.png') no-repeat center center/1.1rem; display: inline-block; position:absolute; left:calc(100% + 1px); top:0px; box-sizing: border-box; display:none !important;}
.my-main-step ol>li:last-child:before{display:none;}
.my-main-step ol>li .step{width:7.5rem; height:2.8rem; margin:0 auto; padding-top:0.2rem; background-color: var(--point); font-weight: 600; font-size:1.2rem; line-height:1; color:#fff; display: flex; align-items: center; justify-content: center; border-radius:0.5rem; overflow: hidden; white-space: nowrap;}
.my-main-step ol>li .step:before{counter-increment: item; content: "STEP " counter(item); }
.my-main-step ol>li dl{margin-top:1.2rem; line-height:1.3;}
.my-main-step ol>li dl>dt{font-weight: 600; font-size:1.8rem; color:#000;}
.my-main-step ol>li dl>dd{margin-top:0.5rem; font-size:1.4rem; color: #999;}
/*
.my-main-step ol>li:nth-of-type(1),
.my-main-step ol:is([data-num="2"], [data-num="3"], [data-num="4"], [data-num="5"])>li:nth-of-type(2),
.my-main-step ol:is([data-num="3"], [data-num="4"], [data-num="5"])>li:nth-of-type(3),
.my-main-step ol:is([data-num="4"], [data-num="5"])>li:nth-of-type(4),
.my-main-step ol:is([data-num="5"])>li:nth-of-type(5){background-color: var(--point); border-color:var(--point);}
.my-main-step ol>li:nth-of-type(1) .step,
.my-main-step ol:is([data-num="2"], [data-num="3"], [data-num="4"], [data-num="5"])>li:nth-of-type(2) .step,
.my-main-step ol:is([data-num="3"], [data-num="4"], [data-num="5"])>li:nth-of-type(3) .step,
.my-main-step ol:is([data-num="4"], [data-num="5"])>li:nth-of-type(4) .step,
.my-main-step ol:is([data-num="5"])>li:nth-of-type(5) .step{background-color: #fff; color: var(--point);}
.my-main-step ol>li:nth-of-type(1) dl>*,
.my-main-step ol:is([data-num="2"], [data-num="3"], [data-num="4"], [data-num="5"])>li:nth-of-type(2) dl>*,
.my-main-step ol:is([data-num="3"], [data-num="4"], [data-num="5"])>li:nth-of-type(3) dl>*,
.my-main-step ol:is([data-num="4"], [data-num="5"])>li:nth-of-type(4) dl>*,
.my-main-step ol:is([data-num="5"])>li:nth-of-type(5) dl>*{color: #fff;}
*/
.my-main-step ol[data-num="1"] > li:nth-of-type(1),
.my-main-step ol[data-num="2"] > li:nth-of-type(-n + 2),
.my-main-step ol[data-num="3"] > li:nth-of-type(-n + 3),
.my-main-step ol[data-num="4"] > li:nth-of-type(-n + 4),
.my-main-step ol[data-num="5"] > li:nth-of-type(-n + 5),
.my-main-step ol[data-num="6"] > li:nth-of-type(-n + 6),
.my-main-step ol[data-num="7"] > li:nth-of-type(-n + 7),
.my-main-step ol[data-num="8"] > li:nth-of-type(-n + 8),
.my-main-step ol[data-num="9"] > li:nth-of-type(-n + 9),
.my-main-step ol[data-num="10"] > li:nth-of-type(-n + 10),
.my-main-step ol[data-num="11"] > li:nth-of-type(-n + 11),
.my-main-step ol[data-num="12"] > li:nth-of-type(-n + 12),
.my-main-step ol[data-num="13"] > li:nth-of-type(-n + 13),
.my-main-step ol[data-num="14"] > li:nth-of-type(-n + 14),
.my-main-step ol[data-num="15"] > li:nth-of-type(-n + 15),
.my-main-step ol[data-num="16"] > li:nth-of-type(-n + 16){
background-color:var(--point);
border-color:var(--point);
}
.my-main-step ol[data-num="1"] > li:nth-of-type(1) .step,
.my-main-step ol[data-num="2"] > li:nth-of-type(-n + 2) .step,
.my-main-step ol[data-num="3"] > li:nth-of-type(-n + 3) .step,
.my-main-step ol[data-num="4"] > li:nth-of-type(-n + 4) .step,
.my-main-step ol[data-num="5"] > li:nth-of-type(-n + 5) .step,
.my-main-step ol[data-num="6"] > li:nth-of-type(-n + 6) .step,
.my-main-step ol[data-num="7"] > li:nth-of-type(-n + 7) .step,
.my-main-step ol[data-num="8"] > li:nth-of-type(-n + 8) .step,
.my-main-step ol[data-num="9"] > li:nth-of-type(-n + 9) .step,
.my-main-step ol[data-num="10"] > li:nth-of-type(-n + 10) .step,
.my-main-step ol[data-num="11"] > li:nth-of-type(-n + 11) .step,
.my-main-step ol[data-num="12"] > li:nth-of-type(-n + 12) .step,
.my-main-step ol[data-num="13"] > li:nth-of-type(-n + 13) .step,
.my-main-step ol[data-num="14"] > li:nth-of-type(-n + 14) .step,
.my-main-step ol[data-num="15"] > li:nth-of-type(-n + 15) .step,
.my-main-step ol[data-num="16"] > li:nth-of-type(-n + 16) .step{
background-color:#fff;
color:var(--point);
}
.my-main-step ol[data-num="1"] > li:nth-of-type(1) dl>*,
.my-main-step ol[data-num="2"] > li:nth-of-type(-n + 2) dl>*,
.my-main-step ol[data-num="3"] > li:nth-of-type(-n + 3) dl>*,
.my-main-step ol[data-num="4"] > li:nth-of-type(-n + 4) dl>*,
.my-main-step ol[data-num="5"] > li:nth-of-type(-n + 5) dl>*,
.my-main-step ol[data-num="6"] > li:nth-of-type(-n + 6) dl>*,
.my-main-step ol[data-num="7"] > li:nth-of-type(-n + 7) dl>*,
.my-main-step ol[data-num="8"] > li:nth-of-type(-n + 8) dl>*,
.my-main-step ol[data-num="9"] > li:nth-of-type(-n + 9) dl>*,
.my-main-step ol[data-num="10"] > li:nth-of-type(-n + 10) dl>*,
.my-main-step ol[data-num="11"] > li:nth-of-type(-n + 11) dl>*,
.my-main-step ol[data-num="12"] > li:nth-of-type(-n + 12) dl>*,
.my-main-step ol[data-num="13"] > li:nth-of-type(-n + 13) dl>*,
.my-main-step ol[data-num="14"] > li:nth-of-type(-n + 14) dl>*,
.my-main-step ol[data-num="15"] > li:nth-of-type(-n + 15) dl>*,
.my-main-step ol[data-num="16"] > li:nth-of-type(-n + 16) dl>*{
color:#fff;
}
.my-main-step .payment{width:100%; padding:4rem 2rem 2rem; background-color: #fff; display: flex; flex-flow: row wrap; align-items: center; justify-content: center;}
.my-main-step .payment>dl{text-align: center;}
.my-main-step .payment>dl>dt{font-size:2rem; line-height:1.5; color: #000;}
.my-main-step .payment>dl>dd{margin-top:2rem;}
.my-main-step .payment>dl>dd a{width:22rem; height:6rem; margin:0; background-color:var(--point); font-weight: 600; font-size:2rem; line-height:1.3; color:#fff; text-align: center; overflow:hidden; display: inline-flex; align-items: center; justify-content: center; gap: 1rem; border-radius:99px; cursor: pointer; position: relative;}
.my-main-step .payment>dl>dd a img{width:2.2rem;}
.my-main-step .payment>dl>dd .tel{width:100%; max-width:40rem; height:6rem; margin:0; background-color:#F8F8F8; font-weight:bold; font-size:3rem; line-height:1.3; color:var(--point); text-align: center; overflow:hidden; display: inline-flex; align-items: center; justify-content: center; gap: 1rem; border-radius:99px; cursor: pointer; position: relative;}
.my-main-step .payment>dl>dd .tel img{width:2.4rem; filter: brightness(0) saturate(100%) invert(51%) sepia(99%) saturate(413%) hue-rotate(157deg) brightness(94%) contrast(87%);}
/*
.my-main-step ol:is([data-num=""], [data-num="1"])>li:nth-of-type(1)>span,
.my-main-step ol:is([data-num="2"])>li:nth-of-type(2)>span,
.my-main-step ol:is([data-num="3"])>li:nth-of-type(3)>span,
.my-main-step ol:is([data-num="4"])>li:nth-of-type(4)>span{background-color: var(--point); font-weight: 600; color: #fff;}
.my-main-step ol:is([data-num="2"]):after{width:calc(33% - 1.5rem);}
.my-main-step ol:is([data-num="3"]):after{width:calc(66% - 1.5rem);}
.my-main-step ol:is([data-num="4"]):after{width:calc(100% - 4rem);}
*/
.my-main-step .text{margin-top:2.5rem; font-size:2.2rem; line-height:1.3; color: #000; text-align: center;}
.my-main-sort{margin-bottom:2rem; display: flex;}
.my-main-sort button{width:7.8rem; height:4rem; padding-top:0.2rem; background-color: #f4f6f8; border:1px solid #ccc; font-weight: 500; font-size:1.6rem; line-height:1; color: #999; text-align: center;}
.my-main-sort button+button{margin-left:-1px;}
.my-main-sort button:first-child{border-radius:0.5rem 0 0 0.5rem;}
.my-main-sort button:last-child{border-radius:0 0.5rem 0.5rem 0;}
.my-main-sort button:is(:hover, .active){background-color: var(--point); color: #fff;}
.my-change-pw{padding:4.5rem 2.4rem 5rem; border:1px solid #e6e6e6; position: relative; border-radius:3rem; overflow: hidden;}
.my-change-pw .title{padding-bottom:4.5rem; border-bottom:1px solid #e6e6e6; font-size:2.5rem; line-height:1.3; color: #000; text-align: center;}
.my-change-pw .my-change-form{width:100%; max-width:380px; margin:0 auto;}
.my-change-pw *+.my-change-form{margin-top:3.5rem;}
.my-change-pw .my-change-form .tit{margin-bottom:1rem; font-weight: 500; font-size:2.5rem; line-height:1.3; color: #000; text-align: center;}
.my-change-pw .my-change-form input{width:100%;}
.my-change-pw .my-change-form dl{margin-top:2rem;}
.my-change-pw .my-change-form dl>dt{font-weight: 500; font-size:1.8rem; line-height:1.3; color: #000;}
.my-change-pw .my-change-form dl>dd{margin-top:1rem;}
.progress-step01{margin-top:4rem; padding-bottom:2rem; text-align: center;}
.progress-step01 .icon{display: flex; justify-content: center;}
.progress-step01 .icon img{width:15rem; filter: drop-shadow(1rem 1rem 1rem rgba(0,0,0,0.07)); display:block;}
.progress-step01 .text{font-size:2.2rem; line-height:1.5; color: #000;}
.progress-step01 .text>strong{font-weight: 500;}
.progress-step01 .money{padding:1.5rem 0 2rem; font-weight: 800; font-size:5rem; line-height:1;}
.board_btn.off .click{pointer-events: none; opacity: 0.5;}
.check-bar{margin-top:5rem; display: flex; flex-flow: column nowrap; gap:1rem;}
.check-bar>li{background-color:#f4f6f8; padding:1.5rem 2.5rem; display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; gap:1rem; border-radius:0.5rem; position: relative;}
.check-bar>li>.txt{flex:1; padding-left:1.2rem; background:url('/images/icon_triangle_5x9.png') no-repeat left 0.7rem/5px; font-size:1.7rem; line-height:1.3; color: #000;}
.check-bar>li .check-bar-right{width:20rem; display: flex; justify-content: end;}
.check-bar>li .check-bar-right .check-new{width:10rem;}
.my-search{width:100%; padding:2.5rem 0 4.5rem; border-bottom:1px solid #e6e6e6; display: flex; justify-content: center;}
.my-search .my-search-in{width:100%; max-width:66rem; display: flex; flex-flow: row wrap; align-items: center; position: relative; gap:1rem;}
.my-search select{}
.my-search input[type=text]{width:20rem;}
.my-search input[type=submit]{min-width:9rem; background-color: var(--btn_c); border-color:var(--btn_c); color: #fff; cursor: pointer; border-radius:0.3rem;}
.my-search ._star{width:100%;}
/*
.my-info{padding:5rem; background-color: #f6f6f6; font-weight: 400; font-size:1.7rem; line-height:1.55; color: #666; text-align: center; display: flex; justify-content: space-between; border-radius:1rem;}
.my-info .my-name{width:23rem; margin-left:5rem; display: flex; align-items: center; justify-content: space-between; gap:2rem;}
.my-info .my-name>dt{min-width:5.6rem;}
.my-info .my-name>dt img{height:6rem;}
.my-info .my-name>dd{text-align: left; white-space: nowrap;}
.my-info .my-name>dd>strong{font-weight: 600; color: #333;}
.my-info .my-conts{max-width:calc(100% - 28rem - 10%); display: flex; justify-content: flex-end;}
.my-info .my-conts>dl{flex:1; width:22rem;}
.my-info .my-conts>dl+dl{border-left:1px dotted #555;}
.my-info .my-conts>dl>dt{}
.my-info .my-conts>dl>dt img{height:4rem;}
.my-info .my-conts>dl>dd{padding-top:0.5rem; line-height:1; white-space: nowrap;}
.my-info .my-conts>dl>dd>p{padding-top:0.5rem; font-weight: 500; font-size:1.7rem; color: #111;}
.my-info .my-conts>dl>dd strong{font-weight: 700; font-size:2.2rem; color: #666;}
.my-info .my-conts>dl>dd strong.point{color: var(--point);}
*/
/* 회원 탈퇴 */
.withdrawal-area{width:100%; max-width:70rem; margin:0 auto; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center;}
.withdrawal-area .withdrawal-top{width:100%; margin-bottom:3.5rem; padding-bottom:3.6rem; border-bottom:1px solid #eee; font-weight: 400; font-size:1.8rem; line-height:1.55; color: #333; text-align: center;}
.withdrawal-area .withdrawal-top img{height:10.7rem;}
.withdrawal-area .withdrawal-top p{margin-top:1rem;}
.withdrawal-area .withdrawal-top p>span{font-weight: 500; color:var(--point)}
.withdrawal-area .withdrawal-btm{width:100%;}
.withdrawal-area .withdrawal-btm>p{font-weight: 600; font-size:2rem; line-height:1.2; color: var(--point);}
.withdrawal-area .withdrawal-btm>ul{margin-top:1.5rem; padding:2.5rem 2rem; background-color: #f4f6f8; text-align: left; border-radius:1rem; overflow: hidden;}
.withdrawal-area .withdrawal-btm>ul>li{padding-left:0.8rem; font-size:1.7rem; line-height:1.55; color: #333; position: relative;}
.withdrawal-area .withdrawal-btm>ul>li+li{margin-top:0.5rem;}
.withdrawal-area .withdrawal-btm>ul>li:before{content: "·"; position: absolute; left:0; top:0;}
.withdrawal-area .skin-check{}
.withdrawal-area .skin-check input[type=checkbox]+label{font-weight: 400;}
.withdrawal-area .withdrawal-form{margin-top:2rem; display: flex; flex-flow: row wrap; align-items: center; gap:0 2rem;}
.withdrawal-area .withdrawal-form>dt{font-weight: 500; font-size:1.8rem; line-height:1; color: #000;}
.withdrawal-area .withdrawal-form>dd{flex:1;}
.withdrawal-area .withdrawal-form input{width:100%;}
/* check box */
.find-method-btn{padding:20px; background-color: #f4f6f8; display: flex; align-items: center; gap:0 20px;border-radius:5px;}
.find-method-btn>.skin-check{width:auto; margin-top:0;}
.find-method-btn .skin-check input[type=checkbox]+label,
.find-method-btn .skin-check input[type=radio]+label{color: var(--skin_bg);}
.skin-check{display: flex; align-items: center; position: relative;}
.skin-check input[type=checkbox],
.skin-check input[type=radio]{display: none; position: absolute; left:0; top:0;}
.skin-check input[type=checkbox]+label,
.skin-check input[type=radio]+label{font-size:var(--f_xsmall); line-height:1; color: #999; display: inline-flex; align-items: center; cursor: pointer; position: relative; gap:7px;}
.skin-check input[type=checkbox]+label>.graphic,
.skin-check input[type=checkbox]+label>.graphic:before,
.skin-check input[type=radio]+label>.graphic,
.skin-check input[type=radio]+label>.graphic:before{content: ""; width: 20px; height: 20px; background-color: #fff; border:1px solid var(--skin_bg); font-size:0; line-height:0; display: inline-flex; vertical-align: top; position: relative; top:0; transition: .3s; overflow: hidden;}
.skin-check input[type=checkbox]+label>.graphic:before{background: url('data:image/svg+xml;utf8,') no-repeat center top/cover; border:none; left:0; top:-1px; z-index:2; opacity: 0.2;}
.skin-check input[type=radio]+label>.graphic{border-radius:99px;}
.skin-check input[type=radio]+label>.graphic:before{width: 50%; height: 50%; background-color:var(--skin_bg); border:none; left: 50%; top:50%; border-radius:99px; transform-origin: 50% 50%; transform: translate(-50%, -50%); opacity:0;}
.skin-check input[type=checkbox]:checked+label>.graphic{border-color:var(--skin_bg);}
.skin-check input[type=radio]:checked+label>.graphic{border-color:var(--skin_bg);}
.skin-check input[type=radio]:checked+label>.graphic:before{background-color:var(--skin_bg);}
.skin-check input[type=checkbox]:checked+label>.graphic,
.skin-check input[type=checkbox]:checked+label>.graphic:before,
.skin-check input[type=radio]:checked+label>.graphic,
.skin-check input[type=radio]:checked+label>.graphic:before{opacity: 1;}
.skin-check input[type=checkbox]:checked+label>.graphic:before{background-color: var(--skin_bg);}
.skin-check input[type=checkbox]:checked+label,
.skin-check input[type=radio]:checked+label{color: var(--skin_bg);}
@media only screen and (max-width : 1280px){
.my-main-top .my-main-top_re.graph{flex-wrap: wrap;}
.my-main-top .my-main-top_re.graph .chart{margin:2rem auto 0;}
}
@media only screen and (max-width : 1024px){
/* 마이페이지 */
.my-main-top{flex-wrap: wrap;}
.my-main-top .my-main-top_re{flex:auto;}
.my-main-top .my-main-top_re.info,
.my-main-top .my-main-top_re.graph{width:50%;}
.my-main-top .my-main-top_re.info{order:1;}
.my-main-top .my-main-top_re.step{order:3; width:100%; border-left:none; border-top:1px solid #e6e6e6; }
.my-main-top .my-main-top_re.graph{order:2;}
.my-main-step ol{}
.my-main-step ol>li{width:calc((100% - 4rem) / 3);}
.my-main-step ol>li:nth-of-type(3):before{display:none;}
/*
.my-info{flex-wrap: wrap; }
.my-info .my-name{width:100%; margin:0 auto 4rem; justify-content: center; gap:3rem;}
.my-info .my-conts{width:100%; max-width:100%;}
*/
}
@media only screen and (max-width : 840px){
:root {
--f_xxxsmall : 12px;
--f_xxsmall : 12px;
--f_xsmall : 13px;
--f_xssmall : 14px;
--f_small : 14px;
--f_middle : 16px;
--f_xmiddle : 18px;
--f_big : 20px;
}
.mt5{margin-top:5px !important;}
.mt10{margin-top:10px !important;}
.mt15{margin-top:15px !important;}
.mt20{margin-top:20px !important;}
.mt30{margin-top:30px !important;}
.skin-member{width:100%;}
.skin-member .terms-re>dl>dd ol>li{padding-left:2.3rem; position: relative; box-sizing:border-box;}
.skin-member .terms-re>dl>dd ol.kr>li{padding-left:2.8rem;}
.skin-member .terms-re>dl>dd ul.buls>li{padding-left:1.5rem ; position: relative;}
/* 마이페이지 */
/*
.my-menu{}
.my-menu a{max-width:20rem; height:6.5rem; font-size:2.2rem;}
.my-info{padding:5rem 0; font-size:2.2rem;}
.my-info .my-conts>dl>dt img{height:5rem;}
.my-info .my-conts>dl>dd{padding-top:1rem;}
.my-info .my-conts>dl>dd>p{padding-top:1rem; font-size:2rem;}
.my-info .my-conts>dl>dd strong{font-size:2.4rem;}
*/
.my-menu{flex-wrap: wrap;}
.my-menu a{flex:auto; width:calc(100% / 3); height:8rem; font-size:2.4rem;}
.my-menu a:nth-of-type(2){border-radius:1rem 0 0 0;}
.my-menu a:nth-of-type(4){border-radius:0 1rem 0 0;}
.my-menu a:nth-of-type(5){border-radius:0 0 0 1rem; border-left:none !important;}
.my-menu a:last-child{border-radius:0 0 1rem 0;}
.my-menu a:nth-child(n+5):nth-child(-n+7){border-top:1px solid var(--line-color);}
.my-main-top .my-main-top_re.info,
.my-main-top .my-main-top_re.graph{width:100%;}
.my-main-top .my-main-top_re.info{order:1;}
.my-main-top .my-main-top_re.step{order:2;}
.my-main-top .my-main-top_re.graph{order:3; border-left:none; border-top:1px solid #e6e6e6;}
.my-main-top .my-main-top_re{font-size:2.4rem; line-height:3.6rem;}
.my-main-top .my-main-top_re.info dd{margin-top:1.5rem; font-size:2rem;}
.my-main-top .my-main-top_re.info dd>img{margin-top:-0.2rem;}
.my-main-top .my-main-top_re.info p>img{width:9rem;}
.my-main-top .my-step{margin-top:2rem;}
.my-main-top .my-step>li>span{padding:1rem 1.5rem 0.9rem; font-size:2rem;}
.my-main-top .my-main-top_re.graph>dl{flex:1;}
.my-main-top .my-main-top_re.graph .chart{gap: 2rem;}
.my-main-top .my-main-top_re.graph .donut {--size: 70px;}
.my-main-top .my-main-top_re.graph .legend li{gap: 1rem;}
.my-main-top .my-main-top_re.graph .legend .dot {inline-size: 1.8rem; block-size: 1.8rem;}
.my-main-step{}
.my-main-step .title,
.my-main-step .b-title{font-size:2.8rem;}
.my-main-step .my-main-step-top .title>span{font-size:2.4rem;}
.my-main-step ol{}
.my-main-step ol>li{width:calc((100% - 2rem) / 2);}
.my-main-step ol>li .step{width:10rem; height:3.5rem; padding-top:0.2rem; font-size:1.8rem;}
.my-main-step ol>li dl{}
.my-main-step ol>li dl>dt{font-size:2.4rem;}
.my-main-step ol>li dl>dd{font-size:2.2rem;}
.my-main-step .text{font-size:2.4rem;}
.my-main-step ol>li:before{display:none !important;}
.my-main-step ol>li:nth-of-type(2):before,
.my-main-step ol>li:nth-of-type(4):before,
.my-main-step ol>li:nth-of-type(5):before{display:none !important;}
.my-main-step .payment>dl>dt,
.my-main-step .payment>dl>dd a{font-size:2.4rem;}
.my-main-sort button{width:9rem; height:4.5rem; font-size:2rem;}
.my-change-pw .title,
.my-change-pw .my-change-form .tit{font-size:2.8rem;}
.my-change-pw .my-change-form dl>dt{font-size:2.4rem;}
.grid-table .item{font-size:2.4rem;}
.grid-table .payment>dl>dt{font-size:2.4rem;}
.grid-table .payment>dl>dd a{font-size:2.4rem;}
.check-bar>li{padding:3rem 2.5rem;}
.check-bar>li>.txt{flex:auto; width:100%; padding-left:1.6rem; font-size:2.4rem;}
.check-bar>li .check-bar-right{width:100%;}
.my-search{width:100%; padding:2.5rem 0 4.5rem; border-bottom:1px solid #e6e6e6; display: flex; justify-content: center;}
.my-search .my-search-in{width:100%; max-width:none;}
.my-search select{width:100%;}
.my-search input[type=text]{width:calc((100% - 1rem) / 2);}
.my-search input[type=submit]{min-width:auto; width:100%;}
.my-search span{display:none;}
.my-search ._star{}
/* 회원 탈퇴 */
.withdrawal-area{}
.withdrawal-area .withdrawal-top{font-size:2.4rem;}
.withdrawal-area .withdrawal-top img{height:12.7rem;}
.withdrawal-area .withdrawal-btm>p{font-size:2.6rem;}
.withdrawal-area .withdrawal-btm>ul{margin-top:2rem;}
.withdrawal-area .withdrawal-btm>ul>li{padding-left:1.2rem; font-size:2.2rem;}
.withdrawal-area .withdrawal-btm>ul>li:before{}
.withdrawal-area .withdrawal-form{}
.withdrawal-area .withdrawal-form>dt{font-size:2.4rem;}
.skin-check.rem input[type=checkbox]+label{font-size:2.2rem; line-height:2.2rem;}
.skin-check.rem input[type=checkbox]+label>.graphic,
.skin-check.rem input[type=checkbox]+label>.graphic:before,
.skin-check.rem input[type=radio]+label>.graphic,
.skin-check.rem input[type=radio]+label>.graphic:before{width: 2.2rem; height: 2.2rem;}
.skin-member input[type=button],
.skin-member input[type=text],
.skin-member input[type=password],
.skin-member input[type=file],
.skin-member select,
.skin-member textarea,
.skin-member .btns{height:40px;}
.skin-member .skin-button>*{height:50px}
.skin-member .skin-form>li .flex-btn .add-num{width:calc(100% - 114px);}
.skin-member .skin-form>li .flex-btn .btns{width:104px;}
.skin-member .skin-form>li .flex-btn .time{right:134px;}
.my-change-form .flex-btn .add-num{width:calc(100% - 16rem);}
.my-change-form .flex-btn .btns{width:15rem;}
.my-change-form .flex-btn .time{right:14rem;}
.progress-step01 .text{font-size:2.6rem;}
/*.skin-member.find{width:calc(100% - 6rem);}*/
}
@media only screen and (max-width : 480px){
}
/*
transform: scale(1.1) 부분을
transform: scale(1.1) rotate(.001deg); 로 변경하면 부드럽게 처리되네요
display: flex; flex-flow: row wrap; align-items: center; justify-content: center;
display: flex; flex-flow: column wrap; align-items: center; justify-content: center;
flex-flow: column wrap;
align-content: center;
justify-content: space-between;
justify-content: space-around;
flex-wrap: wrap;
transform:rotate(180deg);
transform: translateY(-50%);
transform: scale(1)
filter:grayscale(100%); -webkit-filter:grayscale(100%);
backdrop-filter: blur(50px);
transition: all .5s linear;
transition: all .5s ease-out;
transition-delay: .8s;
:before{content: ""; width: 24px; height: 24px; background-color: #fff; border:1px solid #666; display: inline-block; position:absolute; left: 0; top:0px; box-sizing: border-box;}
display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; //한줄 감추기
display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break:break-all; //두줄 감추기
active
border-radius:2px;
width:calc(100% / 6);
box-shadow:0 0 1rem rgba(0,0,0,0.2);
*/