@charset "utf-8";

/* ==================================================
	공통사항
================================================== */

/* · 상단 타이틀 */
.my_tit01{
	padding: 7rem 0 5rem;
	text-align: center;
	font-family: var(--font-Elice);
    font-size: var(--rem-40);
	font-weight: var(--font-bd);
	color: var(--brand-color-main);
}
/* · 컨텐츠 배경 */
.my_contbg{
	padding: 5rem 0;
	width: 100%;
	background-color: #F1F2F3;
}
.my_content{
	position: relative;
    width: 100%;
    max-width: var(--px-base);
    margin: 0 auto;
    padding-left: var(--spacing); 
    padding-right: var(--spacing);
}
.my_Bigbox{
	display: flex;
	width: 100%;
	max-width: var(--px-base);
}
.overveiw-wrap {
    overflow: hidden;
}
@media screen and (max-width:800px) {
	.my_tit01 {
		padding: 6rem 0 4rem;
		font-size: 3.6rem;
	}

	.my_contbg{
		padding: 0 var(--spacing) 6rem var(--spacing);
		background-color: #fff;
	}
	.my_content{
		padding-left: 0; 
  		padding-right: 0;
	}
	.my_Bigbox{
		display: inline;
	}

}

/* ==================================================
	좌측 서브메뉴
================================================== */
/* · 서브메뉴 */
.my_smenu{
	margin-right: 38px;
	padding: 4rem 0 0 0;
	width: 220px;
	height: 70%;
	background-color: #fff;
	border-radius: 20px;
	border:solid 1px #DADADA;
}
.menu_tit{
	padding:0 0 2rem 3rem;
	font-size: var(--rem-22);
	font-weight: var(--font-bd);
	border-bottom: solid 1px #DADADA;	
}
.menu_tit a{
	
}
.my_smenu li{
	border-bottom: solid 1px #DADADA;
	line-height: 2.5;
}
.my_smenu li:last-child,
.my_smenu li.last{
	border-bottom: 0;
}
.my_smenu li a{
	padding-left: 3rem;
	display: block;
	width: 100%;
}
.my_smenu li span{
	display: inline-block;
	margin-left: 1rem;
	background-color: #174B9F;
	width: 20px;
	height: 20px;
	line-height: 20px;
	border-radius: 20px;
	color: var(--color-white);
	text-align: center;
	font-size: var(--rem-14);
}
.my_smenu_m{
	display: none;
}
/* 모바일CSS */
@media screen and (max-width:1050px) {
	.menu_tit{
		padding: 0 1rem 1rem 1rem;
		text-align: center;
	}
	.my_smenu li{
		padding-left: 0;
		text-align: center;
	}
	.my_smenu li span {
		display: block;
		margin-left: 0;
		margin: 0 auto;
		margin-bottom: 1rem;
	}
	.my_smenu li a{
		padding-left: 0;
	}
}
@media screen and (max-width:800px) {
	.my_smenu{
		display: none;
	}
	.my_smenu_m{
		display: block;
		margin: 0 auto;
	}
	.sm_tit_close{
		margin-bottom: 3rem;
		padding: 0 2rem;
		display: none;
		align-items: center;        
		font-size: var(--rem-22);
		font-weight: var(--font-bd);
		border-radius: 5px;
		height: 45px;
		line-height: 45px;
		border: solid 1px #969696;
	}
	.sm_tit_close a{
		
		display: block;
		width: 100%;
	}
	.sm_tit_close::after {
		margin-left: auto;
		background-image: url(../images/icon/arrow_m_open.png);
		width: 18px;
		height: 10px;
		content: "";
		background-position: 0px 0px;
	}
	.sm_tit{
		padding: 0 2rem;
		display: flex;
		align-items: center;        
		font-size: var(--rem-22);
		font-weight: var(--font-bd);
		color: var(--color-white);
		border-radius: 10px 10px 0 0;
		background-color: #174B9F;
		height: 45px;
		line-height: 45px;
	}
	.sm_tit::after {
		margin-left: auto;
		background-image: url(../images/icon/arrow_m_close.png);
		width: 18px;
		height: 10px;
		content: "";
		background-position: 0px 0px;
	}
	.sm_tit a{
		display: block;
        width: 100%;
	}
	.sm_cont{
		margin-bottom: 4rem;
		display: grid;
		grid-template-columns: repeat(3, 3fr);
		gap: 0;
		border: solid 1px #969696;
		border-radius: 0 0 10px 10px;
	}
	.sm_cont li{
		font-size: var(--rem-20);
		text-align: center;
		/* border: solid 1px #DADADA; */
	}
	.sm_cont li:nth-child(1), .sm_cont li:nth-child(4), .sm_cont li:nth-child(7){
		border-left: 0;
	}
	.sm_cont li:nth-child(2), .sm_cont li:nth-child(5), .sm_cont li:nth-child(8){
		border-left: solid 1px #DADADA;
		border-right: solid 1px #DADADA;
	}
	.sm_cont li:nth-child(4), .sm_cont li:nth-child(5), .sm_cont li:nth-child(6){
		border-top: solid 1px #DADADA;
		border-bottom: solid 1px #DADADA;
	}
	.sm_cont li a{
		display: block;
		width: 100%;
		height: 40px;
		line-height: 40px;
	}
}

/* ==================================================
	세부 컨텐츠
================================================== */
.my_contbox{
	width: calc(100% - 220px);
	max-width: 1142px;
}
.cont_top{	
	width: 100%;
}
.cont_top_m{
	display: none;
}

/* · 세부 컨텐츠 - 상단 */
.myshop_header{
	padding: 0 2rem;
	margin-bottom: 5rem;
	display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
	height: 140px;
	border: solid 1px #DADADA;
	border-radius: 20px;
	background-color: #fff;
	display: flex;
	align-items: center;
}
.myshop_header li{
	
}
.myshop_header .user{
	display: flex;
	align-items: center;
	width: 24%;
}
.myshop_header .user img{
	margin-right: 1.5rem;
	max-width: 80px;
}
.myshop_header .user p, .user_m .name p{
	font-size: var(--rem-26);
	color: var(--brand-color-main);
	line-height: 1.5;
}
.myshop_header .user p span, .user_m .name p span{
	font-weight: var(--font-bd);
}
.myshop_header .point{
	width: 19%;
	text-align: center;
}
.myshop_header .point, .myshop_header .info {
	border-left: solid 1px #DADADA;
	line-height: 1.5;
}
.myshop_header .point div p, .myshop_header .info p{
	font-size: var(--rem-25);
}
.myshop_header .point div p span, .myshop_header .info p span{
	font-weight: var(--font-bd);
}
.myshop_header .info{
	position: relative;
	width: 19%;
	z-index: 0;
}
.myshop_header .info a{
	padding: 2rem;
	display: block;
}
.myshop_header .info::after{
	content: "";
    width: 22px;
    height: 22px;
    background: url('../images/icon/link02_icon.png') no-repeat;
    background-repeat: no-repeat;
    position: absolute;
    top: 45px;
    right: 1rem;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
	z-index: -1;
}
/* 모바일CSS */
@media screen and (max-width:1100px) {
	.myshop_header .user img{
		max-width: 60px;
		display: none;
	}
	.myshop_header .user div{
		width: 100%; text-align: center;
	}
}
@media screen and (max-width:800px) {
	
	.my_contbox{
		width: 100%;
		padding: 0 !important;
	}

	.cont_top{
		display: none;
	}
	.cont_top_m{
		display: block;
		padding-top: 3rem;
		border-top:solid 10px #F1F2F3;
		border-bottom:solid 10px #F1F2F3;
	}
	.user_m{
		padding: 0 2rem;
		display: flex;
		align-items: center;
	}
	.user_m img{
		margin-right: 1rem;
		max-width: 70px;
		display: none;
	}
	.point_m{
		margin-left: auto;
		text-align: center;
		font-size: var(--rem-22);
		line-height: 1.2;
	}
	.point_m p{
		font-size: var(--rem-25);
		font-weight: var(--font-bd);
	}
	.info_m{
		margin-top: 2rem;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 0;
		height: 70px;
		border: solid 1px #DADADA;
		font-size: var(--rem-18);
		
	}
	.info_m li{
		position: relative;
		border-right: solid 1px #DADADA;
		line-height: 1.2;
		display: flex;
		align-items: center;
	}
	.info_m li:nth-child(3){
		border-right:0;
	}
	.info_m li a{
		padding: 1.5rem 0 1rem 2rem;
		width: 100%;
        display: block;
	}
	.info_m li div:before{
		content: "";
		width: 22px;
		height: 22px;
		background: url('../images/icon/link02_icon.png') no-repeat;
		background-repeat: no-repeat;
		position: absolute;
		top: calc(50% - 11px);
		right: 1rem;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	.info_m li p{
		font-size: var(--rem-22);
	}
	.info_m li p span{
		font-weight: var(--font-bd);
	}
	.info_m .info_btn{
		margin-left: auto;
	}
	.info_m img{
		margin-right: 1rem;
	}
}
@media screen and (max-width:480px) {
	.user_m img {
        max-width: 6rem;
    }

	.myshop_header .user p, .user_m .name p {
		font-size: var(--rem-24);
	}

	.point_m {
        font-size: var(--rem-18);
    }

	.point_m p {
        font-size: var(--rem-22);
    }
}

/* · 세부 컨텐츠 - 주문배송조회 */
.order_del .tit{
	margin-bottom: 1.5rem;
	display: flex;
	align-items: center;	
}
.order_del .tit h3{
	font-size: var(--rem-25);
}
.btn_more{
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: auto;
}
.btn_more:after {
    background-image: url('../images/icon/all_icon.png');
    background-position: 0px 0px;
    width: 9px;
    height: 10px;
    content: "";
}
.process{
	margin-bottom: 5rem;
	display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
	height: 6rem;
	border: solid 1px var(--color-gray2);
	border-radius: 20px;
	background-color: #fff;
	font-size: var(--rem-19);
}
.process li{
	padding: 0 2rem;
	flex: 1;
	display: flex;
	align-items: center;	
	border-right: solid 1px #DADADA;
	
}
.process li a{
    margin-left: auto;
	color: var(--brand-color-main);
	font-weight: var(--font-bd);
}
.process li:nth-child(5){
	border-right: 0;
}
.all_m{
	display: none;
}
/* 모바일CSS */
@media screen and (max-width:800px) {
	.order_del .tit{
		padding-top: 6rem;
		padding-bottom: 1rem;
		display: block;
		text-align: center;
	}
	.order_del .tit h3 {
		font-size: var(--rem-30);
	}
	.btn_more{
		display: none;
	}
	.process{
		margin-bottom: 2.5rem;
		grid-template-columns: repeat(3, 2fr);
		height: 8rem;
		margin-top: 0px;
    	margin-right: auto;
		margin-left: auto;
		border-radius: 14px;
	}
	.process li:nth-child(1), .process li:nth-child(2), .process li:nth-child(3){
		border-bottom: solid 1px #DADADA;
	}
	.process li:nth-child(3){
		border-right: 0;
	}
	.process li:nth-child(4){
		border-left: 0;
	}
	.process li:nth-child(5){
		border-right: solid 1px #DADADA;
	}
	.all_m, .all_m .btn_more{
		display: block;
	}
	.all_m{
		text-align: center;
		margin-bottom: 4rem;
		font-size: var(--rem-20);
		font-weight: var(--font-bd);
	}
	.all_m .btn_more:after{
		position: absolute;		
	}
}
@media screen and (max-width:480px) {
	.info_m {
		grid-template-columns: repeat(1, 1fr);
		height: auto;
	}
	.info_m li {
        border-bottom: solid 1px #DADADA;
    }

	.process {
        grid-template-columns: repeat(2, 3fr);
        width: 100%;
		height: auto;
    }
	.process li {
		padding: 8px 2rem;
	}

	.process li:nth-child(even) {
		border-right: 0;
	}

	.process li:nth-child(3) {
		border-right: solid 1px #DADADA;
	}

    .process li:nth-child(4) {
        border-bottom: solid 1px #DADADA;
    }

}

/* · 세부 컨텐츠 - 하단 퀵메뉴(배송지, QNA, 문의, 리뷰) */
.my_quick{
	margin-bottom: 5rem;
	display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
	height: 208px;
	border: solid 1px #DADADA;
	border-radius: 20px;
	background-color: #fff;
}
.my_quick li{
	margin: 5rem 0;
	text-align: center;
	border-left: solid 1px #DADADA;
}
.my_quick li.first{
	border-left: 0;
}

.my_quick li img{
	margin-bottom: 1.6rem;
}
.my_quick li a{
	display: block;
}
/* 모바일CSS */
@media screen and (max-width:800px) {
	.my_quick{
		grid-template-columns: repeat(2, 2fr);
		height: auto;
		border-radius: 0;
		border-top: solid 10px #F1F2F3;
	}
	.my_quick li {
		margin: 0rem 0;		
	}

	.my_quick li a{
		padding: 2rem;
		display: flex;
		align-items: center;
	}
	.my_quick li:nth-child(1), .my_quick li:nth-child(2){
		border-top: solid 1px #DADADA;
		border-bottom: solid 1px #DADADA;
	}
	.my_quick li:nth-child(3) {
		border-left: 0;
	}
	.my_quick li img{
		margin-bottom: 0;
		padding-right: 1rem;
		height: var(--rem-40);
	}
	.my_quick li  p{
		font-size: var(--rem-22);
	}
}

/* · 세부 컨텐츠 - 최근 본 상품 */
.recent{
	padding: 5rem 2rem;
	border: solid 1px #DADADA;
	border-radius: 20px;
	background-color: #fff;
}
.recent h3{
	padding:0 0 2rem 6rem;
	font-size: var(--rem-24);
}
.recent_prd{
/*	display: flex;*/
/*	align-items: center;*/
}
.recent_prd ul{
/*	padding: 0 2rem;
	display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem;*/
	position: relative;
	padding: 0 4rem;
}

.recent_prd ul .slick-list{
	display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem;
}

.recent_prd.pro_slider ul li {
    padding: 0 1rem;
}
.recent_prd ul li img{
	width: 100%;
	max-width: 180px;
	min-width: 100px;
	border-radius: 15px;
	border:solid 1px #DADADA;
}
.recent_prd ul li .prd_tit{
	padding-top: 1rem;
	font-size: var(--rem-16);
}
.recent_prd ul li .prd_tit p{
	padding-top: 0.6rem;
	font-weight: var(--font-bd);
}
.recent_prd .mp_prev, .recent_prd .mp_next {
    width: 4rem;
    height: 4rem;
    top: calc(50% - 2rem);
    background-size: 1.2rem;
}

/* 모바일CSS */
@media screen and (max-width:800px) {
	.recent {
		padding: 1rem 0.5rem 4rem 0.5rem;
		border: 0;
		border-radius: 0;
	}
	.recent h3{
		padding:0 0 2rem 0;
		font-size: var(--rem-30);
		text-align: center;
	}
	.link_bnt{
		display: none;
	}

	.recent_prd .mp_prev, .recent_prd .mp_next {
		width: 3.6rem;
		height: 3.6rem;
		top: calc(50% - 1.5rem);
		background-size: 1.0rem;
	}
}

@media screen and (max-width:520px) {
	.recent_prd ul {
		padding: 0 3rem;
	}

	.recent_prd .mp_prev, .recent_prd .mp_next {
        width: 3rem;
        height: 3rem;
        top: calc(46% - 2.5rem);
        background-size: 7px;
    }
	
	.recent_prd ul li img {
		min-width: 60px;
	}
	
	.recent_prd ul li .prd_tit{
		letter-spacing: -0.5px;
	}
}
/* ==================================================
	찜한 상품
================================================== */
.w_bg{
	padding: 4rem;
	border: solid 1px #DADADA;
    border-radius: 20px;
    background-color: #fff
}
.my_conArea{}
.my_conArea h3{
	font-size: var(--rem-30);
	font-weight: var(--font-bd);
}

.wish_top{
	padding: 2rem  0 1.5rem 0;
	border-bottom: 2px solid #000;
}

.wish_toplst{
	display: flex;	justify-content: space-between;	align-items: center;
	padding-top: 2rem;
}
.wish_toplst input[type="checkbox"]{
	cursor: pointer;	
}
.wish_toplst input{
	width: 20px;
	height:20px;
}
.wish_toplst li {
	position: relative;
	padding: 0;
}
/*.wish_toplst li:nth-child(1):before {
    position: absolute;
    top: 15%;
    left: 2rem;
    width: 1px;
    height: 70%;
    vertical-align: middle;
    background: #9f9f9f;
    content: "";
}*/

.wish_toplst li a {
/*    width: 9rem;*/
    width: auto;
    height: 3rem;
    padding: 1px 9px;
    gap: 4px;
}

.wish_toplst li a.del:after {
    content: "\e921";
    font-family: xeicon !important;
    line-height: 1;
    font-size: var(--rem-13);
}

/* 찜한 제품 리스트 */
.wish_prd{
	width: 100%;
}
.wish_prd ul{
	display: grid;
    grid-template-columns: repeat(4, 3fr);
    gap: 4rem;
}
.wish_prd li{
	/* display: inline-block; 
	margin-right: 4.5rem;*/
}
/* .wish_prd li:nth-of-type(4n + 4){
	margin-right: 0;
} */
.wish_prd li img{
	width: 100%;
	border-radius: 10px;
	border: 1px solid #DADADA;
}
.w_prd_top{
	padding: 2rem 0 1rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.w_prd_top input{
	width: 20px;
	height:20px;
}
/* 개별 삭제 */
.del i{
	font-size: 0.8em;
}
.w_prd_tit{
	padding:1rem 0 0.5rem 0;
}
.w_prd_price{
	font-weight: var(--font-bd);
}
/* 모바일CSS */
@media screen and (max-width:110px) {
	.wish_prd ul{
		grid-template-columns: repeat(3, 3fr);
		gap: 3rem;
	}
}
@media screen and (max-width:800px) {
	.w_bg {
		padding: 3rem;
		border:0;
	}

	.wish_prd ul{
		grid-template-columns: repeat(3, 3fr);
		gap: 3rem;
	}
}
@media screen and (max-width:480px) {
	.wish_prd ul{
		grid-template-columns: repeat(2, 2fr);
		gap: 2rem;
	}
}

/* ==================================================
	나의 쿠폰
================================================== */
.coupon_top{	
	margin: 3rem auto 0;	
	width: 27rem;
	border: 4px double #DADADA ;
	border-radius: 20px;	
	text-align: center;
	background-color: #F8F8F8;
	font-size: var(--rem-24);	
}
.coupon_top span{
	font-weight: var(--font-bd);
	color: var(--brand-color-main);
}
.coupon_top a{
	padding: 2rem 0;
	display: block;
	width: 100%;
}
.cpn_m {
	padding-top: 3rem;
	display: flex;
	width: 100%;
    /* height: 41px; */
    margin-top: 21px;
    background: url(../images/common/bg_tab.gif) repeat-x 0 100%;
}
.cpn_m li{
	/* padding-top: 1rem; */
	width: 50%;
	text-align: center;
	height: 50px;
    border: 1px solid #777;
    border-bottom: 0;
}
.cpn_m li.active{
	border-bottom: 0;
    background: #fff;   
    font-weight: var(--font-bd);
}
.cpn_m li a{
	display: block;
    padding: 1.5rem 0 12px 0;
    /* border: 1px solid #777; */    
}
/* 쿠폰리스트 */
.cpnlst{
	
}
.cpnlst li{
	padding:4rem 0 2rem 0; 
	display: flex;
	align-items: center;
	border-bottom: solid 1px #DADADA;
}
.cpn_bg{
	width: 22%;
	min-width: 200px;
	height: 90px;
	line-height: 90px;
	text-align: center;
	color: var(--color-white);
	font-size: var(--rem-22);
	box-shadow: 4px 4px 5px #cbcbcb;
}
.cpn_bg a{
	display: block;
	width: 100%;
}
.per10{
	background-color: #1273C3;
}
.per15{
	background-color: #A4B129;
}
.cpn_cont{
	padding-left: 2rem;
	width: 70%;
}
.cpn_cont .cpn_tit{
	padding-bottom: 1rem;
	font-size: var(--rem-22);
	font-weight: var(--font-bd);
}
.cpn_cont .cpn_txt01, .cpn_cont .cpn_txt02{
	font-size: var(--rem-17);
	line-height: 1.3;
}
.cpn_btn_del, .cpn_btn_down{
	width: 8%;
	height: 40px;
	line-height: 40px;
	text-align: center;
	border-radius: 3px;
	border: solid 1px #555555;
}
.cpn_btn_del a, .cpn_btn_down a{
	display: block;
	width: 100%;
}
/* 쿠폰 기간만료 */
.cpn_out{}
.cpn_out .cpn_bg, .cpn_out .cpn_cont{
	opacity: 0.3;
}
.cpn_outImg{
	position: absolute;
	z-index: 1;	
}
.cpn_btn_down .icon_download{
	margin-top: -2px;
}
.cpn_btn_down .icon_download:after{
	content: "";
    background-image: url(../images/common/download.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: 18px;
    height: 15px;
}

/* 선택 쿠폰 */
.cpnlst_opt{
    padding-top: 1rem;
    display: grid;
    gap: 1em;
}

.cpnlst_opt li{
    padding: 1.2rem 2rem 1.2rem 3rem;
    border: solid 1px #DADADA;
    border-radius: 6px;
}

.cpnlst_opt li .cpn_cont {
    padding-left: 0;
    width: 100%;
}

.cpnlst_opt .cpn_cont .cpn_tit {
    font-size: 1em;
    /* font-weight: 400; */
    padding: 0.6rem 0;
}

.cpnlst_opt li .cpn_cont .cpn_cont .cpn_txt01 {
    font-size: 1em;
    font-weight: var(--font-bd);
    color: var(--brand-color-main);
}

.cpnlst_opt li .cpn_cont .cpn_cont .cpn_txt02 {
    font-size: 0.8em;
    color: var(--color-gray3);
}

.cpnlst_opt li .cpn_btn_del {
    width: unset;
    border: 0;
}

.cpnlst_opt li .cpn_btn_del i{
    font-size: 1em;
}

/* 모바일CSS */
@media screen and (max-width:1023px) {
	.cpn_cont{
		width: 60%;
	}
	.cpn_btn_del, .cpn_btn_down{
		width: 18%;
	}
}
@media screen and (max-width:800px) {
	.cpnlst li{
		display: block;
	}
	.cpn_bg, .cpn_cont {
		width: 100%;
	}
	.cpn_btn_del, .cpn_btn_down{
		margin: 0 auto;
		width: 30%;
	}
	.cpn_cont{
		padding-top: 2rem;
        padding-bottom: 2rem;
	}
}
@media screen and (max-width:480px) {
	.coupon_top {
		font-size: var(--rem-22);
	}
}