@charset "utf-8";

input[type="checkbox"]{width: 1px; height: 1px; opacity: 0;}
input[type="checkbox"] + label{position: relative; padding-left: 3rem; line-height: 1;}
input[type="checkbox"] + label:before{position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: block; width: 2rem; height: 2rem; border-radius: 50%; background: #fff; border:0.1rem solid #ddd; content: "";}
input[type="checkbox"] + label:after{position: absolute; left: 0.3rem; top: 50%; transform: translateY(-50%); color:#ddd; content: "\e928"; font-family: xeicon;}
input[type="checkbox"]:checked + label{color: #7300FF}
input[type="checkbox"]:checked + label:before{background: #7300FF; border-color: #7300FF;}
input[type="checkbox"]:checked + label:after{color: yellow}

input[type="radio"]{width: 1px; height: 1px; opacity: 0;}
input[type="radio"] + label{position: relative; padding-left: 3rem; line-height: 1;}
input[type="radio"] + label:before{position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: block; width: 2rem; height: 2rem; border-radius: 50%; background: #fff; border:0.1rem solid #ddd; content: "";}
input[type="radio"] + label:after{position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    content: '';
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: #f5f5f5;
    box-sizing: border-box;
}
input[type="radio"]:checked + label{color: #7300FF}
input[type="radio"]:checked + label:before{background: #7300FF; border-color: #7300FF;}
input[type="radio"]:checked + label:after{color: yellow}

/*  */
input[type="radio"].radio-btn{width: 1px; height: 1px; opacity: 0;}
input[type="radio"].radio-btn + label{padding: 0.8rem 1rem; box-sizing: border-box; margin-right: 1rem; border: 0.1rem solid #222; border-radius: 0.5rem; font-size: 1.4rem;}
input[type="radio"].radio-btn:checked + label{border-color: #7300FF; color:#7300FF; }

input[type="radio"].radio-btn + label:before,
input[type="radio"].radio-btn + label:after,
input[type="radio"].radio-btn:checked + label:before,
input[type="radio"].radio-btn:checked + label:after{display: none}

input[type="radio"].radio-btn:focus + label{outline: black 2px solid}

.page-tit,
.page-location{display: none;}


/* 로그인 */
#member-box{width: 40rem; margin: 0 auto 0; box-sizing: border-box}

/**/
#member-box ul.form-area{margin-bottom: 2rem;}
#member-box ul.form-area li{position: relative;}
#member-box ul.form-area li button.btn{font-size: 1.4rem;  height: 5rem;  line-height: 5rem; padding: 0; border:0.1rem solid transparent;}
#member-box ul.form-area li:not(:last-child){margin-bottom: 1rem;}
#member-box ul.form-area li.id button.btn{position: absolute; right: 0; top: 0; border-left: 0.1rem solid #ddd; width: 6rem; font-weight: 400; background: none;}
#member-box ul.form-area li.id button.btn:hover{background: #7300FF; color: yellow;}
#member-box ul.form-area li.id span.count-time{font-size: 1.2rem; color: red; position: absolute; right: 7rem; top:50%; transform: translateY(-50%);}
#member-box ul.form-area li.email button.btn{position: absolute; right: 0; top: 0; border-left: 0.1rem solid #ddd; width: 6rem; font-weight: 400; background: none;}
#member-box ul.form-area li.email button.btn:hover{background: #7300FF; color: yellow;}
#member-box ul.form-area li.email span.count-time{font-size: 1.2rem; color: red; position: absolute; right: 7rem; top:50%; transform: translateY(-50%);}
#member-box ul.form-area li.phone button.btn{position: absolute; right: 0; top: 0; border-left: 0.1rem solid #ddd; width: 6rem; font-weight: 400; background: none;}
#member-box ul.form-area li.phone button.btn:hover{background: #7300FF; color: yellow;}
#member-box ul.form-area li.phone span.count-time{font-size: 1.2rem; color: red; position: absolute; right: 7rem; top:50%; transform: translateY(-50%);}
#member-box ul.form-area li.pw button{position: absolute; right: 2rem; top:50%; transform: translateY(-50%); font-size: 1.8rem;}
#member-box ul.form-area li dl{height: 5rem;}
#member-box ul.form-area li dl dt{width: 6rem; text-align: center; margin-right: 1rem; font-size: 1.4rem; color:#999 }
#member-box ul.form-area li dl dd{}
#member-box ul.form-area li.gender{}

#member-box .tit{font-size: 3rem; font-weight: 700; margin-bottom: 3rem;}
#member-box .tit strong{display: block}
.write-area-tit {margin-bottom: 2rem; font-size: 1.8rem;}

.join #member-box ul.form-area{margin-bottom: 0}
.join #member-box .tit{border-bottom: 0.1rem solid #222; padding-bottom: 2rem; margin-bottom: 2rem;}

#member-box .btn{height: 5rem; border:0.1rem solid transparent; line-height: 4.9rem; padding: 0; font-weight: 600; font-size: 1.4rem;}
#member-box .btn.member-btn{background: #7300FF; color: yellow;text-align: center;}
#member-box .btn.member-btn:hover{background:yellow; color: #7300FF;}

#member-box .join-btn-area ul li:not(:last-of-type){margin-bottom: 1rem;}
#member-box .join-btn-area ul li a.btn{border: 0.1rem solid #ddd; line-height: 5rem; height: 5rem;}
#member-box .join-btn-area ul li a div{position: relative; width: 5rem; text-align: center; font-size: 2.6rem; border-right: 0.1rem solid #ddd;}
#member-box .join-btn-area ul li a div img{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
#member-box .join-btn-area ul li a p{padding:0 1rem; font-size: 1.4rem; }
.kakaoyellow{color: #FEE500 !important;}
.kakao{color: #3A1D1D !important;}
.naver{color: #0ac73e !important;}
.auto-login input[type="checkbox"] + label{font-size: 1.4rem;}

#member-box input[type="text"],
#member-box input[type="password"],
#member-box input[type="number"]{width: 100%; height: 5rem; line-height: 5rem; padding: 0 1rem 0 7rem;  border: 0.1rem solid #222; border-radius: 0.5rem; box-sizing: border-box;}
#member-box input[type="text"]:focus{}
#member-box input[type="text"]:active{}

#member-box input[type="text"] + label,
#member-box input[type="password"] + label,
#member-box input[type="number"] + label{position: absolute; left: 0; top: 0; width: 5rem; text-align: center; border-right: 0.1rem solid #ddd; box-sizing: border-box}
#member-box input[type="text"] + label i,
#member-box input[type="password"] + label i,
#member-box input[type="number"]+ label i{color: #999;font-size: 1.8rem; line-height: 5rem}


/* 크롬, 오페라, 사파리에서 화살표 없애기 */
#member-box input[type="number"]::-webkit-outer-spin-button,
#member-box input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* 파이어폭스에서 화살표 없애기 */
#member-box input[type="number"] {
    -moz-appearance: textfield;
}


fieldset.etc{border-bottom: 0.1rem solid #ddd; padding-bottom: 2rem; margin-bottom: 2rem; box-sizing: border-box}
fieldset.etc:last-of-type{border-bottom: 0}
ul.find > li{position: relative; margin-left: 1rem; padding-left: 1rem;}
ul.find > li:last-child:after{position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: block; content: ""; width: 0.1rem; height: 1rem; background: #ddd;}
ul.find > li > button{color: #666; font-size: 1.4rem; line-height: 1;}


.comment{position: relative; font-size: 1.2rem; color: #999; padding-left: 2.5rem;}
.comment:after{position: absolute; left: 0; top: 0; content: "\e9a6"; font-family: xeicon; font-size: 1.6rem; line-height: 1; color:#444}
.cnt_length {position: absolute; right: 1rem; line-height: 5rem; color: #444; font-size: 1.4rem;}

/* mypage */
.mypage #member{min-height: 55vh;}
.mypage #member > div.flex > div.left{position: fixed; top: 19rem; left: calc(50% - 64rem); width: 25rem;}
.mypage #member > div.flex > div.right{width: 77%; }
.mypage #member > div.flex > div.left > ul > li{margin-bottom: 1rem;}
.mypage #member > div.flex > div.left > ul > li:last-of-type{margin-bottom: 0}
.mypage #member > div.flex > div.left > ul > li > p{ padding:2rem 1rem; border-bottom: 0.1rem solid #222;}
.mypage #member > div.flex > div.left ul li:last-child{border-bottom: 0}
.mypage #member > div.flex > div.left ul li ul{}
.mypage #member > div.flex > div.left ul li ul li a{display: flex; align-items: center; width: 100%; box-sizing: border-box; padding: 1rem 1.5rem;  font-size: 1.4rem;}
.mypage #member > div.flex > div.left ul li ul li a i{width: 3rem; font-size: 2rem;}
.mypage #member > div.flex > div.left ul li ul li.on a{background: #f5f5f5}
.mypage #member > div.flex > div.left ul li ul li a:hover{background: #f5f5f5}

.mypage #member > div.flex > div.right div.box{padding: 3rem; box-sizing: border-box; border: 0.3rem solid #f5f5f5; margin-bottom: 2rem;}
.mypage #member > div.flex > div.right div.box:last-of-type{margin-bottom: 0;}
.mypage #member > div.flex > div.right div.box > div{padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 0.3rem solid #f5f5f5;}
.mypage #member > div.flex > div.right div.box > div p{font-size: 2.6rem;}
.mypage #member > div.flex > div.right div.box > div p span{display: block; font-size: 1.4rem; margin-top: 1rem; }
.mypage #member > div.flex > div.right div.box > div > dl{margin-bottom: 3rem; padding: 0 2rem;}
.mypage #member > div.flex > div.right div.box > div > dl:last-of-type{margin-bottom:0;}
.mypage #member > div.flex > div.right div.box > div > dl dt{font-size: 1.2rem; color: #666}
.mypage #member > div.flex > div.right div.box > div > dl dd{display: flex; align-items: center; justify-content: space-between; margin-top: 1rem;}
.mypage #member > div.flex > div.right div.box > div > dl dd p{font-size: 1.6rem;}
.mypage #member > div.flex > div.right div.box > div > dl dd a{display: block; padding: 0.5rem 1rem; border: 0.2rem solid #f5f5f5; border-radius: 0.5rem; box-sizing: border-box; font-size: 1.2rem;}
.mypage #member > div.flex > div.right div.box > div > dl dd a:hover{color: #7300FF; border-color: #7300FF}

.mypage #member > div.flex > div.right div.box > div > dl dd.sns{display: block;}
.mypage #member > div.flex > div.right div.box > div > dl dd.sns div.flex div.icon-box{width: 5rem; text-align: center; font-size: 2.6rem;}
.mypage #member > div.flex > div.right div.box > div > dl dd.sns div.flex div.txt-box{}
.mypage #member > div.flex > div.right div.box > div > dl dd.sns div.flex div.txt-box p{line-height: 1.5;}
.mypage #member > div.flex > div.right div.box > div > dl dd.sns div.flex div.txt-box p:first-child{font-weight: 800;}
.mypage #member > div.flex > div.right div.box > div > dl dd.sns div.flex div.txt-box p:last-child{font-size: 1.2rem; color: #999;}

.mypage #member > div.flex > div.right div.box > div > dl dd div.btn_area button{font-size: 1.2rem;     padding: 0.5rem 1rem;}

div.print_area{position: relative;}
div.print_area input{width: 100%; height: 5rem; line-height: 5rem; padding:1rem;  border: 0.1rem solid #222; border-radius: 0.5rem; box-sizing: border-box;}
div.print_area.flex{align-items: center}
div.print_area.flex input{width: 6rem;}
div.print_area.flex span{margin: 0 1.5rem 0 0.5rem}
/* 계정삭제 동의 */
#withdrawal-form{}
#withdrawal-form ul{padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 0.3rem solid #f5f5f5;}
#withdrawal-form ul li{}
#withdrawal-form ul li span{display: block; font-size: 1.2rem; padding-top: 0.5rem;}
#withdrawal-form button{}

/* mypage 리스트 공통 */
.mypage #member > div.flex > div.right div.box > div.list{padding-bottom: 0; margin-bottom:0; border-bottom: 0;}
.list .list-header ul.flex li{font-size: 1.2rem;}
.list .list-body{border: 0}
.list .list-body ul li.row{border-radius: 0.5rem; border: 0.3rem solid #f5f5f5; margin-bottom: 0.3rem;}
.list .list-body ul li.row a{display: block; border: 0 !important;}
.list .list-body ul li.row a:hover{background: #f5f5f5; font-weight: 600}
.list .list-body ul.flex li{font-size: 1.4rem; padding: 1rem; box-sizing: border-box; text-align: center}

/* 로그인 기록 */
.log_list ul.flex li:first-child{width: 20%}
.log_list ul.flex li:nth-child(2){width: 40%}
.log_list ul.flex li:nth-child(3){width: 20%}
.log_list ul.flex li:last-child{width: 20%}

.using-list a{}
.using-list ul.flex li{width: calc(100% / 5);}
.charging-list a{}
.charging-list ul.flex li{width: calc(100% / 6);}

/* 라디오 리스트 */
.state{display: block; margin: 0 auto; width: 5rem; height: 2rem; line-height: 2rem; font-size: 1.2rem; text-align: center;}
.state.red{background: rgba(255,0,0,0.1); color: #FF2828;}
.state.yellow{background: #FCEDCE; color: #FF8800FF;}
.state.green{background: rgba(82,255,2,0.1); color: #00C700}
.state.gray{background: #f5f5f5; color: #AAAAAA}

.radio_list ul.flex li:first-child{width: 5%}
.radio_list ul.flex li:nth-child(2){width: 50%}
.radio_list ul.flex li:nth-child(3){width: 20%}
.radio_list ul.flex li:nth-child(4){width: 10%}
.radio_list ul.flex li:last-child{width: 15%}

.view{padding-bottom: 0 !important; margin-bottom:0 !important; border-bottom: 0 !important;}
.view-box{border-bottom: 0}
.view-box .view-info{ padding-bottom: 2rem}
.view-box .view-info p{font-size: 3.6rem; font-weight: 600;}
.view-box .view-info dl dt{font-size: 1.2rem;}
.view-box .view-info dl dd{font-size: 1.4rem;}
.view-box div.view-content{padding-top: 2rem; margin-top: 1rem; border: 0.3rem solid #f5f5f5; border-radius: 0.5rem;}
.view .around ul li a,
.view .around ul li span{font-size: 1.4rem;}
.view audio{background: #f1f3f4; width: 100%; }

.goto-home{position: relative; margin: 2rem 0 5rem;}
.goto-home:before{content: ""; display: block; position:absolute; top:calc(50% - 1px); left:0; width: 100%; height: 0.1rem; background: #ddd; }
.goto-home a{display: block; width: 100%;}
.goto-home span{position: relative; z-index: 1; display: block; margin: 0 auto; width: fit-content; padding: 1rem; background: #fff; font-size: 1.4rem; color: #444}
.goto-home a:hover span{color: #7300FF}

@media screen and (max-width:1279px){
    .mypage #member > div.flex > div.left{transform: translateY(0); left: 4%; width: 23rem;}
}
@media screen and (max-width:1203px){
    .mypage #member > div.flex{flex-wrap: wrap;}
    .mypage #member > div.flex > div.left{position: unset; width: 100%; margin-bottom: 2rem;}
    .mypage #member > div.flex > div.right{width: 100%;}
    .mypage #member > div.flex > div.left ul,
    .mypage #member > div.flex > div.left ul li ul{display: flex}
    .mypage #member > div.flex > div.left ul li p{display: none}
    .mypage #member > div.flex > div.left ul li ul li{width: fit-content; margin-right: 1rem; border: 0.1rem solid #ddd;}
    .mypage #member > div.flex > div.left ul li ul li:last-child{border-bottom: 0.1rem solid #ddd;}
}
@media screen and (max-width:839px){
    .mypage #member > div.flex > div.left{}
    .mypage #member > div.flex > div.left > ul{width: 100%; display: inline-block}
    .mypage #member > div.flex > div.left > ul > li{margin-bottom: 0;}
    .mypage #member > div.flex > div.left > ul li ul{flex-wrap: wrap}
    .mypage #member > div.flex > div.left > ul li ul li{width: 49%; margin-right: 2%; margin-bottom: 2%;}
    .mypage #member > div.flex > div.left > ul li ul li:nth-child(2n){margin-right: 0}
    .mypage #member > div.flex > div.right div.box{border: 0; padding: 0;}

    .radio_list ul.flex li:first-child{width: 10%;}
    .radio_list ul.flex li:nth-child(2){width: 90%;}
    .radio_list ul.flex li:nth-child(n+3){width: fit-content}

}
@media screen and (max-width:599px){
    .mypage #member > div.flex > div.right div.box{padding: 3rem 1.5rem;}
    .mypage #member > div.flex > div.right div.box > div p{font-size: 2.2rem;}
    .mypage #member > div.flex > div.right div.box > div > dl{padding: 0 ;}
    .mypage #member > div.flex > div.right div.box > div > dl dd{display: block;}
    .mypage #member > div.flex > div.right div.box > div > dl dd a{width: fit-content; margin-top: 1rem;}
    .mypage #member > div.flex > div.right div.box > div > dl dd div.flex{justify-content: start !important;}


}
@media screen and (max-width:480px){
    #member-box{width: 100%;}

}