@charset "UTF-8";

.mobile,.mobile-block { display : none !important }
.not-mobile { display : block !important }
.not-mobile-table { display : table !important }

@media only screen and (max-width: 1024px) {
	* { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
	::-webkit-scrollbar { width : 0; display: none; }
	html{ -webkit-text-size-adjust: none; text-size-adjust: none; touch-action: pan-y; }
	body { min-width : 100% ; overflow-x : hidden }
	body > main { padding-bottom : 150px ; overflow-x : hidden }

	/** PRESET **/
	.mobile { display : inline-block !important }
	.mobile-block { display : block !important }
	.not-mobile,.not-mobile-table { display : none !important }

	button.favorite { width : 14px ; height : 14px ; top : 20px ; right : 20px ; background-size : contain }
	#btn-mobile-history-back { display : block ; margin-bottom : 20px }

	.swiper-row { padding-left : 0 ; padding-top : 95px ; border-top : solid 1px var(--gray) ; height : 389px ; margin-top : 100px }
	.swiper-row ~ .swiper-row { margin-top : 0 ; border-top : none }
	.swiper-row > h2 { top : 60px ; left : 20px }
	.swiper-row button.swiper-button-prev,.swiper-row button.swiper-button-next { display : none }
	.swiper-slide.goods-list { width : 162px ; height : 293px ; padding-top : 203px ; border-bottom : solid 1px var(--border-gray-color) }
	.swiper-slide.goods-list > a.image { height : 203px }
	.swiper-slide.goods-list .info { padding : 7px 20px ; height : 90px }
	.swiper-button-prev, .swiper-button-next { width : 35px ; height : 40px ; transform : rotate(180deg) }
	.swiper-button-prev { left : 0 }
	.swiper-button-next { right : 0 }
	.swiper-button-prev:after { background-image : url('/images/ico-angle-prev-mobile.svg') }
	.swiper-button-next:after { background-image : url('/images/ico-angle-next-mobile.svg') }
	.swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical>.swiper-pagination-bullets { top : 20px ; right : 20px }
	
	.--describe { padding : 20px 10px }
	
	/*.form-inline .textarea { min-height : 120px }*/
	.form-inline .remark { padding : 10px ; margin-top : 10px }

	/** preset : 컨텐츠 접기 **/
	dl.fold > dt { position : relative }
	dl.fold > dt:after { content : "" ; display : inline-block ; width : 10px ; height : 10px ; position : absolute ; top : calc( 50% - 5px ) ; right : 9px ; background : url('/images/ico-fold-arrow.svg') center no-repeat ; transition : ease-out .2s }
	dl.fold > dt.close:after { transform : rotate(180deg) }
	main.my > section.pay.ok dl.fold > dt:after { content : none }
	main.my > section.pay.ok dl.fold > dt.close:after { transform : none }

	/** preset : dot list **/
	ul.dot > li ~ li { margin-top : 6px }
	h3 + ul.dot { margin : 10px 0 }

	/** preset : 날짜 검색 **/
	.date-search { padding : 0 ; margin-bottom : 0 ; background : none }
	.date-search ul { display : grid ; grid-template-columns : repeat(4,1fr) }
	.date-search ul > li { height : 37px }
	.date-search ul > li button { height : 35px }
	.date-search ul > li:hover:after { top : -1px ; height : calc( 100% + 2px ) }
	.date-search .inp { margin-top : 10px ; grid-template-columns : 1fr 10px 1fr ; position : static ; line-height : 35px }
	.date-search .inp > .t { color : var(--border-gray-color) }
	.date-search .inp > .item input { height : 37px }
	.date-search .inp > .item .calendar { width : calc( 100vw - 40px ) }
	.date-search .inp > .item .calendar:before { width : calc( ( 100vw - 30px ) / 2 ) }
	.date-search button[type='submit'].btn { position : static ; width : 100% ; height : 37px ; line-height : 1 ; margin-top : 10px }

	/** preset : table **/
	ul.table-info { display : block ; height : auto ; border : none ; border-top : solid 1px var(--border-gray-color) ; border-bottom : solid 1px var(--border-gray-color) }
	ul.table-info > li { border-left : none ; text-align : left ; padding : 10px 0 }
	ul.table-info > li:first-child { padding-top : 20px }
	ul.table-info > li:last-child { padding-bottom : 20px }
	ul.table-info > li .number { left : initial ; right : 0 ; line-height : 16px ; bottom : calc( 50% - 8px ) ; width : auto }

	/** preset : modal **/
	.modal { padding : 20px }
	.modal > section,
	.modal.alert > section,
	.modal.alert > section > section { min-width : 100% ; max-width : 100% ; width : 100% ; padding : 10px }

	/** preset : 그리드 갤러리 **/
	.gallery-grid.mobile-hide-after-4 > li:nth-child(4) ~ li { display : none }
	.gallery-grid.col-4 { grid-template-columns: repeat(2, 1fr); }
	.gallery-grid.hide-after-8 > li:nth-child(6) ~ li { display: none; }
	.gallery-grid ~ .buttons.more { padding : 60px 0 0 0 !important }
	.gallery-grid ~ .buttons.more button { border-color : var(--border-gray-color) ; border-right : none ; border-left : none }

	/** footer **/
	body > footer { padding : 23px 0 0 0 ; height : auto }
	body > footer h1,body > footer h2 { font-size : 12px ; padding : 0 20px  ; line-height : 42px ; position : relative }
	body > footer > section { display : block }
	body > footer > section > article { display : list-item ; border-bottom : solid 1px var(--border-color)}
	body > footer > section > article h2 ~ * { display : none !important }
	body > footer > section > article h2:before,
	body > footer > section > article h2:after { content : "" ; width : 9px ; height : 2px ; display : inline-block ; position : absolute ; top : 21px ; right : 26px ; background : #888 ; transition : ease-out .2s }
	body > footer > section > article:not(.on) h2:before { transform : rotate(90deg) }
	body > footer > section > article.on { padding : 0 20px 40px 20px }
	body > footer > section > article.on h2 { margin-left : -20px ; width : calc( 100% + 40px ) ; margin-bottom : 15px }
	body > footer > section > article.on h2 ~ * { display : block !important }
	body > footer > section > article.about.on p br { display : none }
	body > footer > section > article.rules.on h2 { margin-bottom : 0 }
	body > footer > section > article.rules.on ul > li { line-height : 42px }
	body > footer > section > article.rules.on ul > li ~ li { margin-top : 0 }
	body > footer > section > article.rules.on ul > li:last-child { border-bottom : none }
	body > footer > section > article.social.on h2 { margin-bottom : 0 }
	body > footer > section > article.social.on ul { display : grid !important ; grid-template-columns: repeat(4, 40px); margin-top : 15px ; margin-left : 0px ; gap : 0 }
	body > footer article.social a { width : 40px ; height : 40px ; line-height : 40px ; padding : 0 ; text-align : left }
	body > footer article.social a:hover { opacity : .5 }
	body > footer article.social a > img { max-height : inherit ; height : 14px }
	body > footer p.copyright { padding-top : 0 ; padding-left : 20px ; font-size : 12px ; line-height : 92px }
	
	/** quick menu **/
	body > aside { }
	body > aside > ul { right : 20px ; bottom : 30px }
	body > aside > ul > li.on { width : calc( 100vw + 2px ) ; right : -21px ; bottom : -31px }
	body > aside > ul > li > section footer { padding : 0 }
	body > aside > ul > li.qna footer { padding : 20px 0 0 0 }
	body > aside > ul > li.qna article.category ul,
	body > aside > ul > li.qna article.chat > ul > li.you > ul.category { grid-template-columns : repeat(3, 1fr) }
	body > aside > ul > li.recently-viewed ul.list,
	body > aside > ul > li.qna article.chat { max-height: 60vh }

	/** 쿠키 설정 **/
	section.cookie-agree > .banner { height : auto ; padding : 50px 20px 10px 20px }
	section.cookie-agree > .banner .buttons { display : block ; position : static ; width : 100% ; padding-top : 12px }
	section.cookie-agree > .banner .buttons button { margin-top : 10px }
	section.cookie-agree > .accept > .cont { width : calc( 100% - 40px ) }
	section.cookie-agree > .accept > .cont > header { line-height : 44px ; padding : 0 20px }
	section.cookie-agree > .accept > .cont > header button.close { top : 16px ; right : 20px }
	section.cookie-agree > .accept > .cont > article { padding : 20px; overflow-y: scroll; max-height: 80dvh;}
	section.cookie-agree > .accept > .cont > article .buttons { margin-top : 35px }

	/** account **/
	section.account > article { width : 100% }
	section.account > article .buttons { padding : 40px 0 0 0 }
	
	/** login **/
	main.login > section { padding : 96px 20px }
	main.login > section h1 { text-align : left }
	article.login section.customer { display : none }
	
	/** join **/
	section.account > article.join > h1 { margin-bottom : 10px; padding-left: 50px; }
	section.account > article.join .agrees { margin-bottom : 0 }
	section.account > article.join.ok section.join-ok {padding: 50px;}

	/** main **/
	.links a + a { margin-left : 35px }
	.links a:after { width : 100% ; height : 1px }

	main.intro { padding-bottom : 150px }
	main.intro > section.campaign ul { grid-template-columns: 1fr ; }
	main.intro > section.campaign ul > li:first-child { grid-column : 1 }
	main.intro > section.campaign ul > li .title { bottom : 40px }
	main.intro > section.campaign ul > li .title .box h2 { font-size : 12px }
	main.intro > section.goods ul { grid-template-columns: repeat(2,50%) ; grid-auto-rows: calc( 50vw * 1.5 ) }
	main.intro > section.goods a .name { font-size : 10px ; padding-bottom : 15px }

	/*
	body > main.intro { padding-bottom : 140px }
	body > main.intro > article h1 { font-size : 16px }
	body > main.intro > article h1 small { font-size : 12px }
	body > main.intro > article .shortcut { padding : 0 10px }
	body > main.intro > article .shortcut a span { text-decoration : none }
	body > main.intro > article.campaign .cont { bottom : 50px ; left : 10px }
	body > main.intro > article.campaign .media { overflow : hidden }
	body > main.intro > article.campaign .media * { width : auto ; height : 90vh ; margin-left : calc( -96vh + 50vw )}
	body > main.intro > article.promotion { display : block ; padding-bottom : 110px ; margin-top : 100px ; background-color : #FBFBFB }
	body > main.intro > article.promotion > section.title .cont { bottom : 10px ; left : 10px }
	body > main.intro > article.goods { background-color : #FBFBFB ; padding-bottom : 50px }
	body > main.intro > article.goods .swiper-wrapper { display : grid ; grid-template-columns: 50% 50%  }
	body > main.intro > article.goods .swiper-button-prev,
	body > main.intro > article.goods .swiper-button-next { display : none }
	body > main.intro > article.goods .swiper-slide { width : 50vw ; height : 62.5vw ; background-size : contain ; background-position : center }
	body > main.intro > article.goods .swiper-slide span { bottom : 15px ; padding : 0 10vw ; line-height : 1.2 }
	body > main.intro > article.styling { margin-top : 80px }
	body > main.intro > article.styling .shortcut { padding-bottom : 8px } 
	body > main.intro > article.styling .swiper-slide { width : calc( 75vw + 10px ) ; height : calc( 75vw + 90px ) ; padding-right : 10px }
	body > main.intro > article.styling .swiper-slide .image { height : 75vw }
	body > main.intro > article.styling .swiper-slide .title { padding : 20px 0 20px 100px ; transition : ease-out .2s }
	body > main.intro > article.styling .swiper-slide.swiper-slide-active .title { padding-left : 10px }
	body > main.intro > article.styling .swiper-button-prev { display : none }
	body > main.intro > article.foryou { margin-top : 130px }
	body > main.intro > article.foryou .shortcut { top : -30px }
	body > main.intro > article.foryou .swiper-slide { width : 36vw ; height : calc( 45vw + 30px )}
	body > main.intro > article.foryou .swiper-slide .image { height : 45vw }
	body > main.intro > article.foryou .swiper-slide a { line-height : 30px }
	body > main.intro > article.foryou .swiper-button-prev,
	body > main.intro > article.foryou .swiper-button-next { display : none }
	*/
	
	/** 장바구니 > 결제 **/

	main.my > section.pay { padding-top : 0 }
	main.my > section.pay article.result { margin-top : 40px ; position : static ; border : none ; padding : 0 ; width : 100% }
	main.my > section.pay .form-inline button.width150 { width : 100px }
	main.my > section.pay .form-inline button.width150 + input { width : calc( 100% - 110px ) !important }
	main.my > section.pay:not(.ok) { padding: 10px 20px; }
	main.my > section.pay:not(.ok) article.result { position: initial ; top: 0; right: 0; width : 100%; }

	main.my > section.pay article.payment-select .select-grid {
		display : grid ;
		grid-template-columns : repeat( 2 , minmax( 0 , 1fr ) );
		gap: 20px 0;
	}
	
	.modal-pay-delivery article form { 
		max-height: 455px; 
		overflow-y: scroll; 
		padding: 15px 20px;
	}

	/** 마이페이지 **/
	main.my:before, 
	main.my:after,
	main.my > nav { display : none }
	main.my > section { padding-top : 20px }
	main.my > section h1 { margin-bottom : 10px }
	main.my > section h2 { padding-bottom : 10px }
	main.my > section h2 ~ h2 { margin-top : 40px }
	main.my > section h3 { padding-top : 10px }
	main.my > section:not(.summary) { padding-left : 20px ; padding-right : 20px }
	main.my > section.wrap-720 { padding-top: 40px }
	
	main.my > section.summary { height : auto ; display : block }
	main.my > section.summary > article.info dl > dt { padding : 20px 0 50px 20px }
	main.my > section.summary > article.info button.logout { bottom : 10px ; left : 20px }
	main.my > section.summary > article.info dl > dd { padding : 0 15px }
	main.my > section.summary > article.links {
		height: 110px;
		border-top : solid 1px var(--border-color) ;
		overflow-x : auto ;
		overflow-y: hidden;
		padding : 20px ;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
	main.my > section.summary > article.links a:before {
		justify-self: anchor-center;
	}
	main.my > section.summary > article.links::-webkit-scrollbar { display: none }
	main.my > section.summary > article.links ul { display : table }
	main.my > section.summary > article.links ul > li { display : table-cell }
	main.my > section.summary > article.links ul > li a { width : 50px ; height : auto ; display : block ; line-height : 15px ; padding : 54px 0 0 0 ; font-size : 11px ; text-align : center ; margin-left : 15px ; white-space: nowrap; }
	main.my > section.summary > article.links ul > li:first-child a { margin-left : 0 }
	/* main.my > section.summary > article.links ul > li a:before { width : 50px ; height : 50px } */

	/** 마이페이지 상품 목록 **/
	.swiper-wrapper.goods > .swiper-slide { width : 162px ; height : 293px }
	.swiper-wrapper.goods > .swiper-slide .image { height : 203px }
	.swiper-wrapper.goods > .swiper-slide .info { width : calc( 100% - 40px ) ; height : calc( 100% - 223px ) ; bottom : 10px ; left : 20px }
	.swiper-wrapper.goods > .swiper-slide .info .price { position : static }
	main.goods.list ul#list > li .info > .price { position : relative ; top : 10px ; right : 0; height: 30px;}
	.swiper-wrapper.goods > .swiper-slide .info ul.size { display : none }
	.swiper-wrapper.goods > .swiper-slide .info .color,
	.swiper-wrapper.goods > .swiper-slide .info .price { margin-top : 2px }

	/** 회원 가입 **/
	main.my > section.account { padding-top : 0 }
	main.my > section.account > article.join #btn-personal-certify { margin-top : 10px }


	/** 마이페이지 > 메인 **/
	main.my > section.my-main { padding : 0 }
	main.my > section.my-main > header { padding : 40px 20px 20px 20px }
	main.my > section.my-main .swiper-container { height : 293px ; margin-bottom : 0 }
	
	/** 마이페이지 > 공지사항 **/
	main.my > section.notice { padding-left : 0 ; padding-right : 0 }
	main.my > section.notice > article h1 { padding : 0 20px }
	
	/** 마이페이지 > 자주 묻는 질문 **/
	main.my > section.faq { margin-top : 20px ; padding-left : 0 ; padding-right : 0 }
	main.my > section.faq > article > h1,
	main.my > section.faq > article > .searchform { padding : 0 20px }
	main.my > section.faq > article > .category { height : 61px ; overflow-x : hidden ; border : none ; padding : 0 20px ; -ms-overflow-style: none; scrollbar-width: none; }
	main.my > section.faq > article > .category > div { overflow: hidden; }
	main.my > section.faq > article > .category::-webkit-scrollbar { display: none }
	main.my > section.faq > article > .category ul { padding : 0;	 display: flex; box-sizing: border-box;  }
	main.my > section.faq > article > .category ul > li { line-height : 58px ; word-break: keep-all; flex-shrink: 0; width: auto; text-align: center; border-top : solid 1px var(--border-gray-color) ; border-bottom : solid 1px var(--border-gray-color); }
	main.my > section.faq > article > .category ul > li.on:before { bottom : -1px }
	main.my > section.faq > article .contents > dl > dd > h3 { padding-top : 0 }
	
	/** 마이페이지 > 문의하기 **/
	main.my > section.qna > article .info { padding-top : 10px }
	main.my > section.qna > article .info + ul.dot { margin-bottom : 20px }
	main.my > section.qna > article h2 + ul.contents-list { margin-top : 0 }
	main.my > section.qna > article.write .buttons { padding-top : 20px }

	
	main.my > section.info.modify article.input { border : none ; padding : 0 ; margin-top : 50px }

	/** 마이페이지 > 내 정보 관리 > 결제 수단 **/
	main.my > section.paymethod > article > ul.dot { margin : 100px 0 80px 0  }

	/** 마이페이지 > 내 정보 관리 > 구매맞춤정보 **/
	main.my > section.info.purchase > h1 { margin-bottom : 25px }
	main.my > section.info.purchase > article ul.dot { margin-bottom : 25px }
	main.my > section.info.purchase > article .gender-field { margin-bottom : 20px }
	main.my > section.info.purchase > article .shoesize-field { padding-top : 20px }
	main.my > section.info.purchase > article .form-inline:not(.inline-label) { margin-top : 20px }
	main.my > section.info.purchase > article .grid + .form-inline { margin-top : 40px }
	main.my > section.info.purchase > article .form-inline.topsize ul.checkbox > li:nth-child(3) ~ li { grid-row-start : 2 }
	main.my > section.info.purchase > article .form-inline.bottomsize ul.checkbox > li:nth-child(5) ~ li { grid-row-start : 2 }
	main.my > section.info.purchase > article .form-inline.shoesize-field .grid { margin-top : 16px ; grid-template-columns : repeat(2, 1fr) }
	main.my > section.info.purchase > article .buttons { margin-top : 60px }
	main.my > section.info.purchase.saved > h1 { margin-bottom : 50px }
	main.my > section.info.purchase.saved .btn { margin-top : 60px }


	/** 마이페이지 > 내 정보 관리 > 회원탈퇴 **/
	main.my > section.info.drop { max-width : 100% }
	main.my > section.info.drop h1 { margin-bottom : 40px }
	main.my > section.info.drop .reason { grid-template-columns : repeat(2,1fr) }
	main.my > section.info.drop .buttons { margin-top : 40px }
	main.my > section.info.drop.ok { max-width : 100% }
	
	/** 마이페이지 > 재입고알림 **/
	main.my > section.reorder ul.list { padding : 20px 0 }
	main.my > section.reorder ul.list > li { height : 195px ; padding-bottom : 45px }
	main.my > section.reorder ul.list > li .thumbnail { height : 150px ; border-right : none }
	main.my > section.reorder ul.list > li ul.info { right : -1px ; bottom : -1px ; width : calc( 100% + 2px ) }
	main.my > section.reorder ul.list > li ul.info > li:not(.buttons) { padding-right : 10px }
	main.my > section.reorder ul.list > li button.delete { top : 10px ; right : 10px }
	main.my > section.reorder ul.list > li ul.info > li.buttons { width : 100% ; margin-top : 10px }
	main.my > section.reorder ul.list > li ul.info > li.buttons button { border-color : var(--border-gray-color) }
	main.my > section.reorder ul.list > li ul.info > li.buttons button { border-color : var(--border-gray-color) }
		
	/** 마이페이지 > 마일리지 **/
	main.my > section.mileage article.history { margin-top : 45px }
    main.my > section.mileage-log #list-log { display: grid; grid-template-columns: repeat(5, 1fr) !important; }
	
	/** 마이페이지 > 바우처 **/
	main.my > section.boucher .submit { padding-top : 4px }
	main.my > section.boucher .submit .form-inline { padding-bottom : 55px }
	main.my > section.boucher .submit .form-inline input,
	main.my > section.boucher .submit .form-inline button { width : 100% !important }
	main.my > section.boucher .submit .form-inline:before { right : 10px }
	main.my > section.boucher .submit ul.dot { margin-top : 20px }
	main.my > section.boucher .submit-ok { width : 100% ; padding-top : 70px }
	main.my > section.boucher .submit-ok ul.dot { margin : 20px 0 60px 0 }
	main.my > section.boucher h2 + ul.dot { margin-top : 10px }
	main.my > section.boucher > article > h2 ~ h2 { margin-top : 60px }
	main.my > section.boucher ul.boucher-list > li { padding : 20px 10px }
	main.my > section.boucher ul.boucher-list > li .expire { right : 10px }

	/** 마이페이지 > 멤버십 **/
	main.my > section.membership h1 { margin-bottom : 11px }
	main.my > section.membership h2 { margin-top : 40px }
	main.my > section.membership ul.dot > li ~ li { margin-top : 11px }
	main.my > section.membership ul.benefits > li { height: auto ; padding : 20px 10px }
	main.my > section.membership ul.benefits > li > .level { position : static }
	main.my > section.membership ul.benefits > li ul.dot { margin : 10px 0 0 0 }
	main.my > section.membership ul.benefits > li ul.dot > li ~ li { margin-top : 6px }
	
	/** 마이페이지 > A/S **/
	main.my > section.as { margin-top : 40px }
	main.my > section.as table.price { width : 100% }

	/** 마이페이지 > 주문내역 **/
	/* main.my > section.order ul.list > li { height : auto }
	main.my > section.order ul.list > li ~ li { margin-top : 95px }
	main.my > section.order ul.list > li:last-child { margin-bottom : 55px }
	main.my > section.order ul.list > li > .info { padding : 10px ; height : auto ; position : static }
	main.my > section.order ul.list > li > .goods { position : relative ; height : 145px ; top : 0 }
	main.my > section.order ul.list > li > .goods .image { width : 100px ; height : 125px ; line-height : 125px ; top : 10px ; right : 10px }
	main.my > section.order ul.list > li > .goods dl { left : 10px ; bottom : 10px ; gap : 2px ; grid-template-columns: 75px 1fr; }
	main.my > section.order ul.list > li > a.btn { position : absolute ; bottom : -55px ; left : 0 } */
	main.my > section.order ul.list {
		gap: 40px;
	}
	main.my > section.order ul.list > li {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
	main.my > section.order ul.list .info .order-data > .row {
		font-size: 11px;
	}
	main.my > section.order ul.list .info > .info-bottom {
		display: flex;
		align-items: flex-end;
		gap: 49px;
		padding: 10px;
	}
	main.my > section.order ul.list .info > .info-bottom .order-data {
		gap: 5px;
		padding-bottom: 23px;
	}
	main.my > section.order ul.list .info > .info-bottom .order-data > .row {
		gap: 33px;
	}
	main.my > section.order ul.list .info > .info-bottom .order-data > .row.title {
		display: none;
	}
	main.my > section.order ul.list .info > .info-bottom > .image {
		width: 100px;
	}
	main.my > section.order ul.list > li .button.mobile > button {
		display: block;
	}
	main.my > section.order ul.list > li .button.mobile > button {
		width: 100%;
		display: flex !important;
		justify-content: center;
		border: solid 1px #808080;
		padding: 15px 115px;
		font-weight: 400;
		font-size: 11px;
		line-height: 100%;
	}
	main.my > section.order ul.list > li .button.pc {
		display: none;
	}

	main.my > section.pay ul.list > li .info {
		display: flex;
		height: 150px;
	}
	main.my > section.pay ul.list > li .info .info-image {
		width: 120px;
		height: 150px;
		aspect-ratio: unset;
	}
	main.my > section.pay ul.list > li .info .info-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	main.my > section.pay ul.list > li .info-content {
		flex: 1;
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 100%;
		padding: 20px 10px 10px 10px;
	}
	main.my > section.pay ul.list > li ~ li {
		margin-top: 10px;
	}
	main.my > section.pay ul.list > li .info-content .content-right {
		position: absolute;
		right: 0;
		bottom: 0;
		padding: 10px;
		gap: 5px;
		font-size: unset;
	}
	main.my > section.pay ul.list > li .info-content .content-right .status {
		font-size: 11px;
	}
	main.my > section.pay ul.list > li .info-content .content-right .status-msg {
		font-size: 9px;
	}

	main.my > section.pay.ok dl.fold[data-status="price"],
	main.my > section.pay.ok dl.fold[data-status="delivery"],
	main.my > section.pay.ok dl.fold[data-status="recent"],
	main.my > section.pay.ok dl.fold[data-status="refund"],
	main.my > section.pay.ok dl.fold[data-status="cancel"] {
		border: none;
		margin-top: 40px;
		padding: 0;
	}
	main.my > section.pay.ok dl.fold[data-status="price"] h2.border,
	main.my > section.pay.ok dl.fold[data-status="delivery"] h2.border,
	main.my > section.pay.ok dl.fold[data-status="recent"] h2.border,
	main.my > section.pay.ok dl.fold[data-status="refund"] h2.border,
	main.my > section.pay.ok dl.fold[data-status="cancel"] h2.border,
	main.my > section.pay.ok dl.fold[data-status="cancel-info"] h2.border,
	main.my > section.pay.ok dl.fold[data-status="exchange-info"] h2.border,
	main.my > section.pay.ok dl.fold[data-status="voucher-info"] h2.border {
		padding-bottom: 10px;
		margin-bottom: 15px;
	}
	dl.price-info:first-child {
		padding-bottom: 25px;
	}
	dl.price-info.pay-method {
		margin-top: 25px !important;
	}
	main.my > section.pay.ok dl.fold[data-status="delivery"] #to_memo {
		margin-top: 10px;
	}
	main.my > section.pay.ok dl.fold[data-status="exchange-info"],
	main.my > section.pay.ok dl.fold[data-status="voucher-info"] {
		margin-top: 40px;
	}
	main.my > section.pay.ok .order-cancel-btn {
		width: 100%;
		height: 45px;
		margin-top: 10px;
		padding: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
   main.my > section.pay.ok ul.dot {
		margin: 10px 0;
	}

	main.my > section.order article.detail dl.detail-info > dd:not(.goods) { padding : 0 ; border : none }
	main.my > section.order article.detail dl.detail-info > dd h2 { border-bottom-color : var(--black) ; padding-bottom : 10px ; margin-bottom : 15px }

	main.my > section.order article.detail dl.detail-info > dd.goods { padding : 20px 0 20px 130px }
	main.my > section.order article.detail dl.detail-info > dd.goods big ~ * { margin-top : 3px }
	main.my > section.order article.detail dl.detail-info > dd.goods .status { right : 10px ; bottom : 10px ; font-size : var(--fontsize-s) }
	main.my > section.order article.detail dl.detail-info > dd.goods .status .now { font-size : var(--fontsize) ; margin-bottom : 2px }
	
	main.my > section.order article.detail dl.detail-info > dd.info dl > * { height : 32px }
	main.my > section.order article.detail dl.detail-info > dd.info dl > dt.total, main.my > section.order article.detail dl.detail-info > dd.info dl > dt.total + dd { margin-bottom : 15px ; padding : 13px 0 }
	main.my > section.order article.detail dl.detail-info > dd.info .modify { top: 0 ; right : 0 ; color : var(--gray) }
	main.my > section.order article.detail dl.detail-info > dd.info .modify button { position : absolute ; right : 0 ; top : 40px }
	
	main.my > section.order article.detail h2.border { border-bottom-color : var(--black) }
	main.my > section.order article.detail ul.dot { margin : 15px 0 }
	main.my > section.order article.detail .buttons { margin-top : 10px }
	
	main.my > section.order article.cancel ul.dot > li ~ li, main.my > section.order article.cancel-submit ul.dot > li ~ li { margin-top : 10px }
	main.my > section.order article.detail dl.detail-info { margin-bottom : 20px }

	.date-search .inp > .item-date input[type="date"] {cursor: pointer;height: 43px;font-size: 12px;-webkit-appearance: none; -moz-appearance: none;appearance: none; background-color: transparent; position: relative; width: 70%; max-width: 120px;}
	.date-search .inp > .item-date input[type="date"]::after {content: '';position: absolute;top: 50%;right: 2px;transform: translateY(-50%);width: 12px;height: 12px; background-image: url('/images/ico-date.svg');background-repeat: no-repeat;background-size: contain;pointer-events: none;}
	/** 매장찾기 **/
	main.stockist > section.search-tab { position: static ; width: 100% ; padding : 60px 20px 20px 20px }
	main.stockist > section.tab { display : block ; border-bottom : none }
	main.stockist > section.tab > .tab-container { width : 100% ; padding : 0 20px 20px 20px }
	main.stockist > section.tab > section:not(.on) { display : none !important }
	main.stockist section.search { 
		padding: 0; 
		border-right: none;
		box-shadow: none;
	}
	main.stockist section.store-card { padding : 0 20px 20px 20px }
	main.stockist section.store-card dl { display : block }
	main.stockist section.store-card dl > dd ~ dd { margin-top : 20px }
	main.stockist section.store-card dl > dd a.location { display : block }
	main.stockist section.store-card > h2 { padding-bottom : 10px }
	main.stockist section.store-card dl.stockist { margin-top : 0 }
	main.stockist section.store-card dl.stockist > dd + dt  { margin-top : 20px }
	main.stockist section.store-card dl.stockist > dt + dd,
	main.stockist section.store-card dl.stockist > dd { margin-top : 10px }
	main.stockist section.store-card dl.stockist > dd .tel { display : block }

	section.stockist.modal > .marker-card { width: 400px; }
	section.stockist.modal > .marker-card .image { padding: 40px 10px;}

	/** 스토리 공통 **/	
	main.story > section.list > button.to-top { margin-top : 40px }
	main.story > section.detail > header button.close { top : 20px ; right : 20px }
	main.story > section.detail #btn-view-goods { position : absolute ; height : 28px ; right : 10px ; bottom : 8px ; z-index : 2 ; padding : 0 5px 0 20px ; background : url('/images/ico-styling.svg') left 8px no-repeat }
	
	/** 콜렉션 **/
	main.collection > header { padding : 14px 0 }
	main.collection > header ul { padding : 0 7px }
	main.collection > header ul > li { padding : 0 15px ; line-height : 32px }
	main.collection > header ul > li.on:before { width : calc( 100% - 30px ) ; bottom : 3px }
	main.collection > section.list ul { grid-template-columns: repeat(2, 1fr) }
	main.collection > section.list > .info { left : 20px }
	main.collection > section.detail > .gallery { display : block ; width : 100% ; position : relative }
	main.collection > section.detail > .gallery .swiper-slide { display : block ; height : 100vh }
	main.collection > section.detail > .gallery .swiper-slide .image,
	main.collection > section.detail > .gallery .swiper-slide .zoom { display : none }
	
	/** 에디토리얼 **/
	main.editorial > section.list .item { margin-bottom : 40px }
	main.editorial > section.list .item > .title { position : static ; padding : 30px 20px 0 20px ; height : 60px ; text-align : left }
	main.editorial > section.detail .swiper-button-prev,
	main.editorial > section.detail .swiper-button-next { display : none }
	main.editorial > section.detail .swiper-scrollbar { left : 0 ; bottom : 0 ; width : 100% ; height : 3px ; background : none }
	main.editorial > section.detail .swiper-scrollbar .swiper-scrollbar-drag { border-radius : 0 ; background-color : var(--black) }

	main.editorial-detail > section.list { display: none; }
	main.editorial-detail > section.detail { display: none; }
	main.editorial-detail > div.mobile { display: block; width: 100%; }
	main.editorial-detail > div.mobile > .mobile-list { width: 100%; height: 116px; }
	main.editorial-detail > div.mobile > .mobile-list .swiper-container { height: 100%; }
	main.editorial-detail > div.mobile > .mobile-list .swiper-container > .swiper-wrapper .swiper-slide { height: 100%; width: 95px; }
	main.editorial-detail > div.mobile > .mobile-list .swiper-container > .swiper-wrapper .swiper-slide.on { transform: translateY(-10px); }
	main.editorial-detail > div.mobile > .mobile-list .swiper-container > .swiper-wrapper .item { height: 100%; width: 95px; padding: 11px 4px; cursor: pointer; }
	main.editorial-detail > div.mobile > .mobile-list .swiper-container > .swiper-wrapper .item > img { width: 100%; height: 100%; object-fit: cover; }
	main.editorial-detail > div.mobile > .mobile-detail { height: 100%; width: 100%; }
	main.editorial-detail > div.mobile > .mobile-detail > .gallery { height: 100%; width: 100%; }
	main.editorial-detail > div.mobile > .mobile-detail .swiper-container > .swiper-wrapper { width: 100%; height: 520px; }
	main.editorial-detail > div.mobile > .mobile-detail .swiper-container > .swiper-wrapper > .swiper-slide { padding: 38px; opacity: 0; width: 100%; }
	main.editorial-detail > div.mobile > .mobile-detail .swiper-container > .swiper-wrapper > .swiper-slide.swiper-slide-active { 
		/* padding: 38px; */
		padding: 0;
		opacity: 1; 
	}
 	main.editorial-detail > div.mobile > .mobile-detail .swiper-container > .swiper-wrapper > .swiper-slide * {
		width: 100%;
		height: 100%;
	}
 	main.editorial-detail > div.mobile > .mobile-detail .swiper-container > .swiper-wrapper > .swiper-slide .cont {
		display: flex;
		justify-content: center;
	}
 	main.editorial-detail > div.mobile > .mobile-detail .swiper-container > .swiper-wrapper > .swiper-slide .cont > img {
		width: auto;
		object-fit: contain;
	}

	main.editorial-detail > div.mobile > .mobile-detail .swiper-container > .swiper-wrapper > .swiper-slide .cont > video {
		object-fit: contain;
	}

	/** 콜라보레이션 **/
	main.collaboration { padding-bottom : 50px }
	main.collaboration > nav { height : 111px ; padding-top : 10px }
	main.collaboration > nav .swiper-container { width : 100% ; padding : 0 15px }
	main.collaboration > nav .swiper-container button { display : none }
	main.collaboration > header { padding : 40px 0 }
	main.collaboration > section > article ~ article, main.collaboration section.media > video + article, main.collaboration section.media > img + article { padding-top : 40px }
	main.collaboration > section ~ section { margin-top : 100px }
	main.collaboration > section .buttons { padding : 0 20px }
	main.collaboration > section .buttons .btn,
	main.collaboration > section .buttons button { width : 100% }
	main.collaboration .swiper-container + p { margin-top : 40px }
	main.collaboration .collaboration-series .media { width : 100% }

	main.collaboration .swiper-container.slide-auto .swiper-slide { width : 80% }

	main.collaboration .gallery-grid:not(.col-2):not(.col-3):not(.col-4) { grid-template-columns : repeat(2, 1fr) }
	
	main.collaboration .product-gallery { width : 100% ; min-height : auto }
	main.collaboration .product-gallery > .goods,
	main.collaboration .product-gallery > .goods .detail { width : 100% ; position : static }
	main.collaboration .product-gallery > .goods .detail { padding : 0 40px }
	main.collaboration .product-gallery > .goods .detail .image, 
	main.collaboration .product-gallery > .goods .detail .swiper-container,
	main.collaboration .product-gallery > .goods .detail .swiper-container .swiper-wrapper,
	main.collaboration .product-gallery > .goods .detail .swiper-container .swiper-slide { width : 100% }
	main.collaboration .product-gallery > .goods .detail .swiper-container { height : calc( ( 100vw - 80px ) * ( 37 / 28 ) ) }
	main.collaboration .product-gallery > .goods .detail p { position : static ; width : 100vw ; margin-left : -40px ; text-align : center ; word-break: keep-all; }
	main.collaboration button.to-top { margin-top : 50px }
	main.collaboration .product-gallery > ul.list {  position : static ; display : flex ; padding : 0 10px ; border-bottom : solid 1px var(--border-gray-color) ; overflow-x : auto  ; -ms-overflow-style: none; scrollbar-width: none; }
	main.collaboration .product-gallery > ul.list > li { display : table-cell ; height : 110px ; padding-top : 59px  ;min-width : 70px }
	main.collaboration .product-gallery > ul.list > li .thumbnail { width : 50px ; height : 50px ; left : calc( 50% - 25px ) }
	main.collaboration .product-gallery > .goods { position : relative }
	main.collaboration .product-gallery > .goods .detail .image { background : none !important }
	main.collaboration .product-gallery > .goods .thumbnails { width : 100% ; border-bottom : solid 1px var(--border-gray-color) ; position : absolute ; top : initial ; left : 0 ; bottom : 120px }
	main.collaboration .product-gallery > .goods .thumbnails,
	main.collaboration .product-gallery > .goods .thumbnails .scroll,
	main.collaboration .product-gallery > .goods .thumbnails ul > li { height : 120px }
	main.collaboration .product-gallery > .goods .thumbnails ul > li { border-right : solid 1px var(--border-gray-color) }
	main.collaboration .product-gallery > .goods .thumbnails ul > li:last-child { border-right : none }
	main.collaboration .product-gallery > .goods .thumbnails .scroll { overflow-x : auto ; -ms-overflow-style: none; scrollbar-width: none; }
	main.collaboration .product-gallery > ul.list::-webkit-scrollbar,
	main.collaboration .product-gallery > .goods .thumbnails .scroll::-webkit-scrollbar { display: none; }
	main.collaboration .product-gallery > .goods .thumbnails ul { display : table }
	main.collaboration .product-gallery > .goods .thumbnails ul > li { display : table-cell }
	main.collaboration .product-gallery > .goods .thumbnails ul > li .thumbnail { width : 90px; height : 120px ; background-position : center ; background-size : cover }
	main.collaboration .product-gallery > .goods .thumbnails ul > li .thumbnail img { display : none }

	main.collaboration .product-gallery > .goods .thumbnails button { display : none }
	main.collaboration .product-gallery > .goods .thumbnails ~ .detail { padding : 0 0 250px 0 ; width : 100% }
	main.collaboration .product-gallery > .goods .thumbnails ~ .detail img { width : 100% }
	main.collaboration .product-gallery > .goods .thumbnails ~ .detail p { position : absolute ; margin-left : 0 ; height : 80px ; bottom : 0 ; left : 0 }
	
	main.collaboration .product-gallery.no-thumbnails { width : 100% }
	main.collaboration .product-gallery.no-thumbnails > ul.list { right : initial ; top : 20px ; left : 20px ; grid-template-columns : 50px }
	main.collaboration .product-gallery.no-thumbnails > .goods .detail { padding : 0 }
	main.collaboration .product-gallery.no-thumbnails > .goods .detail p { padding : 0 20px ; margin-left : 0 }
	main.collaboration .product-gallery.no-thumbnails > .goods .detail .swiper-container { height : calc( 100vw * ( 475 / 360 ) ) }

	main.collaboration.swarovski > section.list > ul#list { grid-template-columns: repeat(2, 1fr); }
	main.collaboration.swarovski > section.list > ul#list > li { padding-bottom: calc(125% + 90px); }
	main.collaboration.swarovski > section.list > ul#list > li a { height: calc(100% - 90px); }
	main.collaboration.swarovski > section.list > ul#list > li .info { height: 90px;  padding: 7px 0 0 20px; }
	main.collaboration.swarovski > section.list > ul#list > li .info > strong { font-size: var(--fontsize); font-weight: var(--fontweight-s); top: 15px; left: 40px; margin-bottom: 5px; text-overflow: ellipsis; overflow: hidden; width: 90%; white-space: nowrap; }
	main.collaboration.swarovski > section.list > ul#list > li .info > .price { position: relative; top: 10px; right: 0; height: 30px; }
	main.collaboration.swarovski > section.list > ul#list > li .info > .size { display: none; }

	/** 마이페이지 > 블루마크 **/
	.section__transfer .close { right:15px;top:15px; }
}

@media (max-width: 700px) {
	main.goods.detail > section.cont > section.information > .sizeguide-cont { position : fixed ; top : 43px ; right : 0 ; width : 100% ; height : calc(100dvh - 43px) ; overflow-y: scroll; overflow-x: hidden ;z-index: 100;padding-bottom: 20px;overscroll-behavior: contain;}
	main.goods.detail > section.cont > section.information > .sizeguide-cont > article { grid-template-columns : repeat(1,100%);margin:0 }
	main.goods.detail > section.cont > section.information > .sizeguide-cont > article > .cont {padding-right: 0;}
	main.goods.detail > section.cont > section.information > .sizeguide-cont ul.sizes {
		display: table;
		height: 45px;
		margin: 20px auto;
	}
}