@charset "utf-8";
/* SIR 지운아빠 */
/*공통*/
body {max-width: 900px;}

.box1{border-radius: 15px; background-color: #fff; border: 1px solid #EEEEEE; padding: 26px; box-shadow: 0 3px 2px rgba(0,0,0,0.1); margin-bottom: 20px;}
.btn_wrap{display: flex;}

a.btn,
.btn{opacity: 0.8; border-radius: 50px; padding: 2px 14px; background-color: #eee; font-size: 0.9em; margin-right: 4px;}
a.btn:hover,
.btn:hover{opacity: 1; font-weight: 500;}

a.btn_blue,
.btn_org,
a.btn_blue:hover,
.btn_org:hover{background-color:#023cef; color: #fff; }

a.btn_blue,
.btn_blue,
a.btn_blue:hover,
.btn_blue:hover{background-color:#023cef; color: #fff; }

a.btn_line,
.btn_line,
a.btn_line:hover,
.btn_line:hover{background-color: #fff; border: 1px solid #ddd;}

a.btn_gray,
.btn_gray,
a.btn_gray:hover,
.btn_gray:hover{background-color: #707070 ; color: #fff;}

.btn_medium{font-size: 1.1em; padding: 6px 16px;}

.color{color: #023cef;}
.empty{ color: #B7B7B7;}

/*상단*/
#header{padding: 20px 25px; width: 100%;}
#header.sub{border-bottom: 1px solid rgba(0,0,0,0.05);}
#header.on{position: fixed;}
#hd_h1 {position: absolute;font-size: 0;line-height: 0;overflow: hidden}
#hd_wrapper{display: flex; align-items: center; justify-content: space-between;}
#hd_wrapper a{display: block; font-size: 1.5em; color: #302D2C;}
#hd_wrapper .logo{text-align: left; width: 100%;}
#hd_wrapper .logo img{height: 32px;}
#hd_wrapper .hd_back{ width: 65px; display: block;}
#hd_wrapper .hd_title{text-align: left; font-weight: 600; font-size: 1.2em;}
#hd_wrapper .hd_icon{ width: 65px; display: flex; align-items: center; justify-content: right;}
#hd_wrapper .hd_icon a{margin-left: 10px;}


#header.index{background-color: #f5f6fa;}
#header.index #hd_wrapper a {color:#023cef}

/*메인*/
#wrapper{min-height: calc(100vh - 120px);}
#index {}
#index .idx_bg{ background-color: #f5f6fa; padding:10px 20px 20px;}
.area_my{display: flex; align-items: center;}
.area_my .img{width: 54px; height: 54px; border-radius: 50%; background-color: #f9f9f9;
    display: flex; padding: 12px; margin-right: 10px;}
.area_my .img img{}
.area_my .text p{font-size: 1.2em; margin-bottom: 6px;}
.area_my .text .btn_wrap a{ padding: 4px 0; background: transparent; border: 0; vertical-align: middle;}
.area_my .text .btn_wrap a i{vertical-align: inherit;}
.area_my .text .btn_wrap a:after{content: ""; display: inline-block; width: 1px; height: 10px;
    vertical-align: middle; background: rgba(0,0,0,0.1); margin: 0 4px 0 6px;}
.area_my .text .btn_wrap a:last-child:after{display: none;}
.area_my .text .btn_wrap a.btn_blue{color: #023cef;}

.lease_list{padding: 0;}
.lease_list li{display: flex; align-items: center; justify-content: space-between; border-bottom: 1px dashed #eee;
padding: 15px 20px;}
.lease_list li > div{width: 100%;}
.lease_list li > a.btn{max-width: 100px;}
.lease_list li:last-child{border-bottom: 0;}
.lease_list li a{display: block;}
.lease_list li p{font-size: 1.1em; color:#023cef ; vertical-align: middle;}
.lease_list li p:before{content: ""; display: inline-block; width: 16px; height: 16px;
background: url("../img/list_icon.svg") no-repeat center/cover; margin-right:4px; vertical-align: middle;  }
.lease_list li span{font-size: 0.9em; opacity: 0.5;}
.lease_list li .price{display: flex; align-items: center; font-size: 0.9em; margin-top: 4px; flex-wrap: wrap;}
.lease_list li .price dl{display: flex; align-items: center; margin-right: 15px;}
.lease_list li .price dt{margin-right: 4px;}
.lease_list li .price dt i{width: 11px; text-align: center; margin-right:3px}

.lease_list li.empty,
.lease_list li.add{justify-content: center; align-items: center; padding:0; text-align: center;}
.lease_list li.add a{padding: 10px 20px;}
.lease_list li.add i{color: #023cef; font-size: 1.4em; font-weight: 600;}
.lease_list li.empty a:before{content: ""; display: block; width: 40px; height: 40px;
    background: url("../img/icon_plus.svg") no-repeat center/cover; margin:20px auto;}
.lease_list li.empty a{padding: 30px 20px;}
#index .exp{ text-align: center;}

#index .banner{padding: 20px;}
#index .banner a{display: flex; align-items: center; justify-content:left;
    margin-bottom: 20px; padding: 26px 30px; border-radius: 15px; background: #e5eeff;}
#index .banner a .icon{margin-right: 15px;}
#index .banner a .icon img{display: block; width: auto; height: 40px;}
#index .banner a .text p{font-size: 1.2em; font-weight: 500; margin-bottom: 4px;}
#index .banner a .text span{opacity: 0.5;}

#index .banner a:nth-child(odd){background-color:#f9f9f9 ; color: #023cef;}

/*하단*/
#footer {padding: 20px 0;width: 100%; background-color: #eee; text-align: center;}
#footer p{text-align: center; opacity:0.5;padding:0; font-size: 10px; letter-spacing: 0px;}



.pay_list{padding: 0;}
.pay_list li{display: flex; align-items: center; justify-content: space-between; border-bottom: 1px dashed #eee;
    padding: 15px 20px;}
.pay_list li.summary{
	display: grid;
	grid-template-columns: auto auto;
	align-items: center;
	justify-content: space-between;
	background: rgba(0,0,0,0.05);
}
.pay_list li.summary .summary_total{
}
.pay_list li.summary .summary_total > p{
	font-size: 1.1em;
    color: #023cef;
	display: grid;
	grid-template-columns: auto auto;
	justify-content: flex-start;
	align-items: center;
	grid-gap: 5px;
	font-weight: 600;
}
.pay_list li.summary .summary_total > strong{
	display: grid;
	grid-template-columns: auto auto;
	justify-content: flex-start;
	align-items: center;
	grid-gap: 5px;
    color: #707070;
	font-size: 1.4em;
	margin: 5px 0 0;
}
.pay_list li.summary p::before,
.pay_list li.recommend p::before{
	display: none;
}
.pay_list li.recommend{
	flex-direction: column-reverse;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
}
.pay_list li.recommend > .recommend_list{
	display: flex;
	flex-wrap: wrap;
	grid-gap: 3px;
	line-height: 1.5;
	margin: 5px 0 0;
}
.pay_list li.recommend > .recommend_total{
    color: #707070;
	font-weight: 600;
	display: grid;
	grid-template-columns: auto auto;
	justify-content: space-between;
	align-items: center;
	grid-gap: 5px;
}
.pay_list li > div{width: 100%;}
.pay_list li > a{max-width: 100px;}
.pay_list li:last-child{border-bottom: 0;}
.pay_list li a{display: block;}
.pay_list li p{font-size: 1.1em; color:#023cef ; vertical-align: middle;}
.pay_list li p:before{content: ""; display: inline-block; width: 16px; height: 16px;
    background: url("../img/list_icon.svg") no-repeat center/cover; margin-right:4px; vertical-align: middle;  }
.pay_list li span{font-size: 0.9em; opacity: 0.5;}
.pay_list li .price,
.pay_list li .date{display: flex; align-items: center; font-size: 0.9em; margin-top: 4px; flex-wrap: wrap;}
.pay_list li dl{display: flex; align-items: center; margin-right: 15px;}
.pay_list li dt{margin-right: 4px;}
.pay_list li dt i{width: 11px; text-align: center; margin-right:3px}

.pay_list li.empty,
.pay_list li.add{justify-content: center; align-items: center; padding:0; text-align: center;}
.pay_list li.add a{padding: 10px 20px;}
.pay_list li.add i{color: #023cef; font-size: 1.4em; font-weight: 600;}
.pay_list li.empty p{padding: 30px 20px; color: #1a1a1a}
.pay_list li.empty p:before{display: none;}

.pay_list .btn_wrap{text-align: center; display: block; width: 45%; min-width: 80px;}
.pay_list .btn_wrap .btn span{font-size: 0.8em; display: inline-block; margin-left: 3px;}
.pay_list .btn_wrap strong{display: block; margin-bottom: 4px; font-size: 0.8em; font-weight: normal;}


#point_withdraw.pay_list li.withdraw{
	flex-direction: column;
	background: rgba(0,0,0,0.05);
}
#point_withdraw.pay_list li.withdraw dl{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0;
}
#point_withdraw.pay_list li.withdraw dt{
	font-size: 1.1em;
/*    color: #023cef;*/
	margin: 0 0 10px;
	display: flex;
	grid-gap: 10px;
	align-items: center;
}
#point_withdraw.pay_list li.withdraw dd{
	width: 100%;
}
#point_withdraw.pay_list li.withdraw dd .btn_org{
	width: 100%;
	line-height: 42px;
	border-radius: 15px;
}

#point_withdraw.pay_list li.withdraw dl.point_form dd{
}
#point_withdraw.pay_list li.withdraw dl.point_form dd input{
	margin: 0;
}
#point_withdraw.pay_list li.withdraw dl.account_form{
	margin: 12px 0 0;
}
#point_withdraw.pay_list li.withdraw dl.account_form dd{
	display: grid;
    grid-template-columns: 40% auto;
    grid-gap: 5px;
}
#point_withdraw.pay_list li.withdraw dl.account_form dd .btn{
	grid-column: 1 / 3;
}

@media (min-width:600px) {
    #index .idx_bg{border-radius: 0 0 15px 15px}
    #index .banner{display: flex; align-items: center; justify-content: left; flex-wrap: wrap; margin-right: -8px;}
    #index .banner a{width:calc((100% / 2) - 8px); margin-right: 8px;}
    #index .banner a:last-child{margin-right: 0;}


    #footer{background-color: transparent;}

}