/* index */
.mypage_wrap dl:not(:first-child){border-top: 10px solid #f5f5f5; box-shadow: 0 -1px 0px rgba(0,0,0,0.08);}
.mypage_wrap dl{ padding: 20px;}
.mypage_wrap dt{font-size: 14px; line-height: 14px;}
.mypage_wrap dd{margin: 15px 0 0 0;}
.mypage_wrap dd a{display: flex; line-height: 45px; font-size: 15px; justify-content: space-between; align-items: center;}
.mypage_wrap dd a:after{content: ''; display: inline-block; width: 7px; height: 12px; background: url('/img/icon.svg')no-repeat -23px -186px; background-size: 450px;}

/* 리스트 공통 */
.list_wrap{padding: 30px 16px;}
.list_wrap .list:not(:first-child){margin: 16px 0 0 0;}
.list_wrap .list{background: #fff; border-radius: 15px; box-shadow: 1px 2px 8px rgba(0,0,0,0.08);}
.list_wrap .list .title_wrap{display: flex; justify-content: space-between; align-items: center; padding: 16px 5px 20px 16px;}
.list_wrap .list .text{display: flex; flex-direction: column; flex-grow: 1;}
.list_wrap .list .title{font-size: 15px; line-height: 20px; font-weight: 500;}
.list_wrap .list .date{margin: 15px 0 0 0; font-size: 14px; line-height: 14px;}
.list_wrap .list .toggle_btn{display: inline-block; width: 49px; height: 49px; text-align: center;  line-height: 49px; cursor: pointer;}
.list_wrap .list .toggle_btn:before{content: ''; display: inline-block; width: 14px; height: 7px; background: url('/img/icon.svg')no-repeat -42px -176px; background-size: 425px; vertical-align: middle; transition: all 0.1s ease;}
.list_wrap .list .toggle_btn.open:before{transform: rotate(180deg);}
.list_wrap .list .contents{ padding: 10px 16px 20px; font-size: 14px; line-height: 20px; word-break: keep-all;}

/* faq 리스트 */
.faq_wrap .list .title_wrap{padding: 7px 5px 8px 16px;}

/* qna 리스트 */
.qna_wrap .list_wrap{padding: 30px 16px 50px;}
.qna_wrap .list .title_wrap{flex-direction: column; align-items: stretch; padding: 16px 5px 5px 15px;}
.qna_wrap .list .title_wrap > *{display: flex; justify-content: space-between;}
.qna_wrap .list .title_wrap .top{align-items: center; padding: 0 15px 0 0;}
.qna_wrap .list .title_wrap .state{display: inline-block; height: 28px; line-height: 28px; padding: 0 12px; border-radius: 14px; background: #f6f6f6;}
.qna_wrap .list .title_wrap .state.complete{border: 1px solid #3ccccc; background: #fff; color: #28bea3}
.qna_wrap .list .title_wrap .date{margin: 0;}
.qna_wrap .list .title_wrap .bot{align-items: center; padding: 0 0 0 5px;}
.qna_wrap .list .contents > *{padding: 0 5px; display: flex;}
.qna_wrap .list .contents .a_wrap{margin: 20px 0 0 0; padding: 20px 5px 0; border-top:1px solid #e5e5e5;}
.qna_wrap .list .contents .icon{display: inline-block; width: 20px; font-size: 18px; font-weight: 500; margin: 0 10px 0 0;}
.qna_wrap .list .contents .cont_contents{flex-grow: 1; font-size: 15px; line-height: 20px;}
.qna_wrap .btn_wrap, .qna_write_wrap .btn_wrap{position: fixed; width: 500px; bottom: 60px;}

/* 결제 히스토리 */
.payment .list{padding: 16px 20px; display: flex; flex-direction: column; height: 122px; justify-content: space-between; align-items: stretch;}
.payment .list .top{display: flex; justify-content: space-between; }
.payment .list .top .method{height: 28px; padding: 0 12px; background: #f6f6f6; border-radius: 14px; font-size: 12px; line-height: 28px;}
.payment .list .top .view{height: 28px; line-height: 28px; font-size: 13px;}
.payment .list .cont{display: flex; justify-content: space-between;padding: 0 5px;}
.payment .list .cont > *{flex-grow: 1; display: flex; flex-direction: column;}
.payment .list .cont .left {flex-grow: 1;}
.payment .list .cont .left .card_info {font-size: 15px; line-height: 17px; font-weight: 400;}
.payment .list .cont .left .date,.payment .list .cont .right .type {font-size: 14px; line-height: 14px; margin: 12px 0 0 0;}
.payment .list .cont .right {text-align: right;}
.payment .list .cont .right .price_wrap{font-size: 15px; line-height: 17px;}
.payment .list .cont .right .price{font-size: 17px; font-weight: 500;}
.payment .list .cont .right .type{font-size: 14px; line-height: 14px; margin: 12px 0 0 0;}


/* 이용방법 */
.use li{display: flex;}
.use li:not(:first-child){margin: 10px 0 0 0;}
.use .left{margin: 0 15px 0 0; display: flex; flex-direction: column;}
.use li:not(:last-child) .left:after{content: ''; display: block; width: 1px; flex-grow: 1; background: #e5e5e5; margin: 10px auto 0;}
.use .num{display: inline-block; width: 35px; height: 35px; border-radius: 100%; color: #fff; line-height: 35px; text-align: center; font-size: 18px; flex-shrink: 0; }
.use .text{display: flex; flex-direction: column; padding: 0 15px 50px 0;}
.use .title{font-size: 18px; line-height: 35px;}
.use .contents{font-size: 15px; line-height: 22px; margin: 8px 0 0 0; word-break: keep-all;}

@media (max-width: 500px) {
.qna_wrap .btn_wrap, .qna_write_wrap .btn_wrap{width: 100%; left: 0; margin: 0;}

}