/*================== 로그인 페이지 ==================*/
.login.content {
	padding: 50px 0 0;
	text-align: center;
	font-size: 18px;
	line-height: 28px;
}

.content {
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
}

.login.content > h2 {
	margin-top: 10px;
	margin-bottom: 70px;
	color: #03a2a6;
	font-size: 42px;
	font-weight: 100;
	font-family: 'Roboto';
}

.login.content ul.login_btn {
	margin: 0 auto 30px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.login .login_btn > li {
	margin: 24px auto 0;
}

.login .login_btn > li > a {
	width: 300px;
	height: 60px;
	border-radius: 4px;
	box-sizing: border-box
}

.login .login_btn > li > a > img {
	float: left;
	margin-left: 15px;
	height: 36px;
	width: auto;
	margin-top: 12px
}

.login .login_btn > li > a > span {
	color: #fff;
	font-size: 16px;
	display: inline-block
}

.login .login_btn > li > a.fb {
	background: #3b5998
}

.login .login_btn > li > a.insta {
	background: #e4405f;
}

.login .login_btn > li > a.kakao {
	background: #ffe900
}

.login .login_btn > li > a.google {
	background: #fff;
	border: 1px solid #d1d1d1
}

.login .login_btn > li > a.naver {
	background: #1ec800
}

.login .login_btn > li > a.tistory {
	background-color: #fff;
	border: 1px solid #525252;
}

.login .login_btn > li > a:not(.google) span {
	line-height: 60px
}

.login .login_btn > li > a.google span {
	line-height: 20px;
	padding: 10px 0
}

.login .login_btn > li > a.kakao > span {
	color: #3e1918
}

.login .login_btn > li > a.google > span {
	color: #757575
}

.login .inta_guide {
	margin: 10px;
	border: 1px dotted #ccc;
	font-size: 12px;
	line-height: 18px;
}

.login .inta_guide > p {
	padding: 5px;
}

.login .lobottom {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
}

.login .loimg {
	margin-top: 20px;
}


/*==================  공통 ==================*/


header.page_info_bar {
	position: relative;
	border-bottom: 1px solid #e6e6e6;
	background: #fff;
}

header.page_info_bar > p {
	width: 100%;
	text-align: center;
	line-height: 30px;
	color: #ea8797;
}

div.step_bar {
	text-align: center;
	padding: 5px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	
}

/*
div.step_bar > a {
	color: #ff65af;
	font-size: 14px;
	font-weight: 600;
	display: inline-block;
	overflow: hidden;
	position: relative;
	text-align: center;
	vertical-align: top;
	box-sizing: border-box;
	border-radius: 15px;
	padding: 5px 10px;
	border: 1px solid #ff65af;
	margin-left: 5px;
}
*/

div.step_bar > a {
	color: #666;
	font-size: 16px;
	font-weight: 600;
}

div.step_bar > a.menu {
	color: #ff65af;
}




div.bottom_btn a.btn_pre {
	color: #fff;
	font-weight: 600;
	/*background-color: #e4405f;*/
	background: linear-gradient(to right, #ff65af 0%, #ff6e6e 100%);
}

div.bottom_btn a.btn_order {
	background: linear-gradient(to right, #ff65af 0%, #ff6e6e 100%);
	color: #fff;
	font-weight: 600;
}

div.bottom_btn a.btn_od_ok {
	/*width: calc(100% - 20px);
	text-align: center;
	font-size: 16px;
	z-index: 1;
	margin: 80px auto;*/
	background-color: #e4405f;
}

input[type='checkbox']:checked + label .chk, input[type='radio']:checked + label .chk {
    background-image: url(/img/assets/ico/ico_chk_on.png);
    border: 1px solid #ea8797;
    background-color: #ea8797b8;
    color: #fff;
    border-radius: 5px;
}

input[type='checkbox'] + label .chk, input[type='radio'] + label .chk {
    background: center / contain url(/img/assets/ico/ico_chk_off.png) no-repeat;
    border: 1px solid #ddd;
    box-sizing: border-box;
    display: inline-block;
    padding: 10px;
    background-color: #fff;
}

input[type='checkbox'] + label .chk {
    border-radius: 5px;
}

.pop .pop_wrap {
	position: absolute;
    top: 40%;
    left: 15px;
    width: calc(100% - 30px);
    border-radius: 3px;
    overflow: hidden;
    padding: 15px;
    box-sizing: border-box;
    max-height: 80%;
    overflow-y: auto;
}

/*==================  미리보기 페이지 ==================*/
.pre .cont {
	padding: 10px 5px;
}

#ver.cont {
	padding: 10px 5px 80px;
}

.pre {
	height: calc(100% - 98px);
	overflow: auto;
}

.pre .page {
	text-align: center;
	font-size: 1.3em;
	color: #888;
	font-weight: bold;
	margin-bottom: 10px;
}

.pre .page span {
	padding: 0 2px;
}

.pre .page .tot_page {
	color: #1fbbbb;
}

.pre .swiper-container.preview_warp {
	width: 334px; 
	height: 242px;
	zoom: 0.95;
}

#ver > .swiper-container.preview_warp {
	width: 334px; 
	height: 467px;
	zoom: 0.85;
}
.pre .cont img.ver { display: none;}
#ver img { display: none;}
#ver img.ver { display: block}


.pre .swiper-button-next { right: 5px;}
.pre .swiper-button-prev { left: 5px;}

.pre .thumb_wrap {
	height: 100px;
}

.pre .thumb_wrap {
	padding: 20px 20px 0;
	position: relative;
}

.thumb_wrap .swiper-slide {
	text-align: center;
	width: 43px; 
	margin-right: 7px;
	padding: 10px 0;
}

#ver .thumb_wrap .swiper-slide {
	padding: 0;
}
.thumb_wrap img {
	border: 1px solid #ddd;
}

.thumb_wrap span.page {
	background-color: #ea8797;
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	display: inline-block;
	color: #fff;
	border-radius: 50%;
	font-size: 0.925em;
	margin-top: 5px;
	padding: 1px;
}

.thumb_wrap .swiper_btn {
	color: #ea8797;
	height: 40px;
	width: auto;
}

.thumb_wrap .swiper_btn:after {
	font-size: 20px;
	font-weight: 900;
}


.pre .inta_guide {
	margin: 10px;
	border: 1px dotted #ddd;
}

.pre .inta_guide > p {
	padding: 10px;
	text-align: left;
	font-size: 15px;
	line-height: 24px;
}

div.bottom_btn a {
	width: 100%;
	text-align: center;
	font-size: 16px;
	border: 0px;
}

div.bottom_btn a.w49 {
	width: 49%;
	border: 0px;
}

div.bottom_btn a.btn_edit,
div.bottom_btn a.btn_ok,
div.bottom_btn a.btn_delivery {
	background-color: #e4405f;
}

div.bottom_btn a.layer_close {
	/*background-color: #efefef;
	color: #787878;*/
	background-color: #ea8797b8;
	border: 1px solid #ea8797;
	border-color: #ea8797;
	color: #fff;
}

/*div.bottom_btn a.active:not(.btn_close) {
	background-color: #1fbbbb;
	color: #fff;
}*/

/*div.bottom_btn a.active:not(.btn_close) {
	background-color: #e4405f;
	color: #fff;
}*/

div.bottom_btn a.btn_pro {
	background-color: #000;
	color: #fff;
}

div.layer > div.top {
	line-height: 26px;
	text-align: center;
}

.pop .pop_bottom .pop_ok {
	border-color: #e4405f;
	background-color: #e4405f;
	color: #fff;
}

.pop .pop_bottom .pop_close {
	border-color: #ccc;
	color: #787878;
}

.pop .pop_change_date_edit {
	display: flex;
	align-items: center;
	border-bottom: 1px solid #e6e6e6;
	margin-bottom: 20px;
}

.pop .pop_change_date_edit > h4 {
	width: 20%;
	line-height: 35px;
	outline: none;
	background: #fff;
	-webkit-appearance: none;
	-webkit-boarder-radius: 0;
	height: 35px;
	line-height: 35px;
	font-size: 14px;
}

.pop .pop_change_date_edit > input {
	width: 80%;
	margin: 0px;
	border: 0px;
}

/*==================  내지 선택 페이지 ==================*/
.setting {
	height: calc(100vh - 80px);
	/*overflow: unset;*/
}

.setting article .opt_sel label {
	border: 1px solid #e6e6e6;
	box-sizing: border-box;
	position: relative;
	border-radius: 20px;
}

.setting article.layout ul > li {
	margin-bottom: 5px;
}
.setting article .opt_sel input:checked + label {
	border: 1px solid #e4405f;
	border-radius: 20px;
}

input[type='radio']:checked + label div.btn_basic {
	border-color: #e4405f;
	color: #ffff;
}

input[type='radio']:checked + label div.btn_basic > span {
	color:  #e4405f;
}

.setting article .opt_sel label > div:nth-child(2) > p:nth-child(3) {
	font-size: 12px;
	position: absolute;
	top: 75px;
	left: -30px;
	width: 150px;
}

.setting article .opt_sel label > .img_ver {
    width: 80px;
}

/*==================  사진 선택 페이지 ==================*/
.sel > div.step_bar {
	display: flex;
	padding: 5px 5px;
}

.sel > div.step_bar > a {
	font-size: 15px;
	text-align: left;
}

.sel > div.step_bar > p.tit {
	line-height: 29px;
	width: 35%;
	text-align: right;
	font-weight: 600;
	font-size: 14px;
	color: #1fbbbb;
}

.sel > div.step_bar > p.tit span.text_teal {
	color: #ff65af;
}

.art_select {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
	border-bottom: 1px solid #ddd;
}

.select.insta {
	height: calc(100vh - 120px); /* article 높이에 맞게 조정 */
	display: flex;
	flex-direction: column;
}

.art_select .article {
 /* margin: 5px 10px;*/
	background: /*#fff;*/ #f5f5f5;
	padding: 0 8px;
	box-sizing: border-box;
	/*border: 1px solid #e6e6e6;*/
	display: flex;
	flex-direction: row;
	align-items: center;	
}

.art_select .article > h4 {
	width: 12%;
	text-align: center;
}

.art_select .article > ul.cont_bx {
	padding: 5px 0;
	display: inline-block;
	width: 70%;
}

.art_select .article > ul > li.st_term {
	box-sizing: border-box;
	float: left;
	width: 45.5%;
	position: relative;
}

.art_select .article > ul > li.st_term > input {
	width: 100%;
	box-sizing: border-box;
	cursor: pointer;
}
.btn_sm {
	padding: 3px 8px;
	font-size: 12px;
}

.art_select .article > ul > li.w5 {
	width: 5%;
	text-align: center;
	vertical-align: bottom;
	line-height: 34px;
}

.art_select .article > button {
	width: 15%;
	padding: 8px;
	border-radius: 5px;
	background-color: #e4405f;
	color: #fff;
}

.select .content { 
	height: 100%;
	padding-bottom: 30px;
	flex: 1;
	overflow: hidden;
} 
.select .list_photo_wrap { height: 100%; overflow-y: auto; } 

.select .list_photo_wrap ul.list_photo {
	margin: 0 auto;
	padding: 0 0 50px 0;
	width: 99%;
	text-align: center;
	height: 100%;
	/*overflow-y: auto;*/
	-webkit-overflow-scrolling: touch;
	padding: 0;
	margin: 0;
	list-style: none;
}

.select ul.list_photo > li {
	display: inline-block;
	width: 100%;
	margin-top: 15px;
}

.select ul.list_photo > li > div .label_sm {
	width: 24px;
	height: 24px;
	line-height: 24px;
	border-radius: 5px;
}

.select ul.list_photo > li > div .btn_basic {
	border: 1px solid #ccc;
	color: #787878;
	background: #ffffffb3;
	box-sizing: border-box;
}

.select ul.list_photo > li > div.album_name {
	text-align: left;
	padding-left: 2.5px;
}

.select ul.list_photo > li > div > input:checked + label .label_sm {
	border: 1px solid #ea8797;
	background: #ea8797b8;
	border-color: #ea8797;
	color: #fff;
	border-radius: 5px;
}

.select ul.list_photo > li > div.album_name > label > span:nth-child(2) {
	line-height: 24px;
	margin-left: 5px;
	font-size: 16px;
}

.select ul.list_photo > li > div.photo {
	width: 33.333%;
	float: left;
	padding: 2.5px;
	box-sizing: border-box;
	margin: 0;
	position: relative;
}

.select ul.list_photo > li > div.photo > input:checked + label {
	border: 1px solid #ea8797;
	border-radius: 8px;
}

.select ul.list_photo > li > div.photo > label {
	position: relative;
	vertical-align: bottom;
	background-color: #fff;
	border: 1px solid #e6e6e6;
	padding: 0 0 calc(100% - 24px) 0;
	width: 100%;
	box-sizing: border-box;
	border-radius: 6px;
}

.select ul.list_photo > li > div.photo > label.bg_center {
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: cover !important;
}

.select ul.list_photo > li > div.photo > label > div {
	position: inherit;
}

.select ul.list_photo > li > div.photo > label > a.btn_detail {
	position: absolute;
	bottom: 0;
	right: 0;
	display: block;
	background-color: rgba(0, 0, 0, 0.5);
	padding: 3px;
	border-radius: 3px;
	color: #fff;
}

.select ul.list_photo > li > div.photo > label > a.btn_detail > i {
	vertical-align: bottom;
}

.menu-button {
	right: 0px;
	z-index: 80;
}

.menu-button {
	position: fixed;
	width: 80px;
	height: 80px;
	background-color: #1fbbbb;
	font-size: 15px;
	border: 1px solid #b3b3b3;
	cursor: pointer;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
	border-radius: 50%;
	bottom: 200px;
	right: 12px;
	line-height: 18px;
	padding-top: 6px;
	color: #fff;
	font-weight: 600;
}
.fa-bars::before {
	content: /*"\f053"; "▲";*/ "";
}

.close-button {
	border-radius: 50%;
	position: absolute;
	top: 5px;
	width: 30px;
	height: 30px;
	left: calc(100% - 50px);
	border: 1px solid #eda5b1;
	background-color: #ffffff70;
	color: #ff6e6e;
	font-size: 16px;
}

.info_icon {
	position: absolute;
	top: 17px;
	left: calc(50% - 24px);
}

.info_icon > img {
	border-radius: 50%;
	width: 24px;
	height: 24px;
}

.info_icon:hover p { display: block;}

.info_icon > p {
	display: none;
	background-color: #ff6e6e;
	padding: 5px 15px;
	border-radius: 10px;
	color: #fff;
}
	
.layer.detail_post {
	z-index: 100;
}

.detail_post .top {
	position: unset !important;
}

.detail_post .top input {
	width: calc(100% - 35px);
	margin: 0;
	font-size: 16px !important;
}

.detail_post .top label {
	float: left;
	margin-top: 3px;
}
.detail_post .top i {
	position: absolute;
	top: 15px;
	right: 10px;
	padding: 5px 10px;
	background-color: #fff;
}

.detail_post .top .guide_txt {
	display: block;
	width: calc(100% - 10px);
	margin: 0 auto;
	font-size: 12px;
	background: #f5f5f5;
	padding: 3px;
	border: 1px solid #d5d5d5;
	box-sizing: border-box;
}

.detail_post .cont {
	margin: 15px;
	height: calc(100vh - 180px);
	overflow-y: auto;
}

.detail_post .cont .d_photo {
	position: relative;
	margin-bottom: 15px;
}

.detail_post .cont textarea {
	width: 100%;
	margin: 0;
	height: 250px;
	border-color: #d5d5d5;
	font-size: 15px;
	line-height: 22px;
}


.date-wrap {
	box-sizing: border-box;
	position: fixed;
	bottom: 0;
	z-index: 100;
	width: 100%;
	height: 60%;
	padding: 20px 10px;
	background-color: hsl(0deg 0% 100% / 90%);
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
	transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1);
	transform: /*translate3d(360px, 0, 0);*/ translate3d(0px, 800px, 0);
	border-radius: 30px 30px 0 0;
}

.date-wrap.active {
	transform: translate3d(0px, 0, 0);
}

nav.list_date {
	height: 100%;
}

.list_date div.icon-list {
	height: calc(100% - 10px);
	overflow: hidden;
}

.list_date ul.list_folder {
	overflow: scroll;
	height: 100%;
}

.list_date input[type='checkbox'] + label .btn_basic {
	width: 20px;
	height: 20px;
	line-height: 20px;
}

.list_date input[type='checkbox']:checked + label .btn_basic {
	border: 1px solid #ea8797;
	background: #ea8797b8;
	border-color: #ea8797;
	color: #fff;
	border-radius: 3px;
}

.list_date ul.list_folder {
	overflow: scroll;
	padding: 0 10px;
}

.list_date .gmonth {
	display: flex;
	padding: 5px 0px 5px 10px;
	flex-wrap: wrap;
	margin-top: 5px;
	margin: 5px 0;
	background-color: #ffffff70;
	border-radius: 10px;
	gap: 1%;
	justify-content: space-between;
}

.list_date .gmonth > li.month {
	width: 49%;
	padding: 8px 0;
}

.list_date .gmonth input[type='checkbox']:checked + label .btn_basic {
	border: 1px solid #ea8797;
	background: #ea8797b8;
	color: #fff;
}

.list_date .gmonth input[type='checkbox'] + label .label_normal {
	width: 21px;
	height: 21px;
	line-height: 21px;
	font-size: 12px;
	border-radius: 50%;
}

.list_date .gmonth input[type='checkbox']:checked + label .label_normal {
	background-color: #1fbbbb;
	border-color: #1fbbbb;
}

.list_date a.btn_list {
	width: 120px;
	margin-left: 5px;
}

.list_date a.btn_list > span {
	/*display: flex;*/
	font-size: 17px;
	text-align: left;
	/*align-items: center;*/
}

.list_date a.btn_list > span > small {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	width: 80px;
	padding: 2px;
	background-color: #dddddd75;
	float: right;
}

.list_date a.btn_list > span > small .sel_num {
	color: #2196F3;
	margin-right: 1px;
}

.list_date li.insta_all a.btn_list,
.list_date li.gyear a.btn_list.gy {
	width: calc(100% - 40px);
	margin-left: 5px;
	font-weight: 600;
}
.list_date li.insta_all a.btn_list > span > small,
.list_date li.gyear a.btn_list.gy > span > small {
	width: 80px;
	float: unset;
	display: inline-block;
	text-align: center;
	margin-left: 5px;
}

div.bottom_btn a.btn_sel {
	display: flex;
	justify-content: space-around;
}

div.bottom_btn a.btn_sel > p.tit {
	font-weight: 500;
	font-size: 14px;
}

div.bottom_btn a.btn_sel > p.tit span.text_teal {
	color: #FFEB3B;
}

/*--- 로딩 팝업 ----*/
#loaderPopup {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

#loaderPopup.active {
  display: flex;
}

#loaderPopup {
  /*background-color: #1e6cc7;*/
  width: 100%;
  height: 100vh;
  margin: 0;
}

.bookshelf_wrapper {
  position: relative;
 /* top: 60%;*/
  left: calc(50% - 200px);
  transform: translate(-50%, -50%);
	zoom: 0.5;
}

.books_list {
  margin: 0 auto;
  width: 300px;
  padding: 0;
}

.book_item {
  position: absolute;
  top: -120px;
  box-sizing: border-box;
  list-style: none;
  width: 40px;
  height: 120px;
  opacity: 0;
  background-color: #1e6cc7;
  border: 5px solid white;
  transform-origin: bottom left;
  transform: translateX(300px);
  -webkit-animation: travel 2500ms linear infinite;
          animation: travel 2500ms linear infinite;
}
.book_item.first {
  top: -140px;
  height: 140px;
}
.book_item.first:before, .book_item.first:after {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: white;
}
.book_item.first:after {
  top: initial;
  bottom: 10px;
}
.book_item.second:before, .book_item.second:after, .book_item.fifth:before, .book_item.fifth:after {
  box-sizing: border-box;
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  height: 17.5px;
  border-top: 5px solid white;
  border-bottom: 5px solid white;
}
.book_item.second:after, .book_item.fifth:after {
  top: initial;
  bottom: 10px;
}
.book_item.third:before, .book_item.third:after {
  box-sizing: border-box;
  content: "";
  position: absolute;
  top: 10px;
  left: 9px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 5px solid white;
}
.book_item.third:after {
  top: initial;
  bottom: 10px;
}
.book_item.fourth {
  top: -130px;
  height: 130px;
}
.book_item.fourth:before {
  box-sizing: border-box;
  content: "";
  position: absolute;
  top: 46px;
  left: 0;
  width: 100%;
  height: 17.5px;
  border-top: 5px solid white;
  border-bottom: 5px solid white;
}
.book_item.fifth {
  top: -100px;
  height: 100px;
}
.book_item.sixth {
  top: -140px;
  height: 140px;
}
.book_item.sixth:before {
  box-sizing: border-box;
  content: "";
  position: absolute;
  bottom: 31px;
  left: 0px;
  width: 100%;
  height: 5px;
  background-color: white;
}
.book_item.sixth:after {
  box-sizing: border-box;
  content: "";
  position: absolute;
  bottom: 10px;
  left: 9px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 5px solid white;
}
.book_item:nth-child(2) {
  -webkit-animation-delay: 416.6666666667ms;
          animation-delay: 416.6666666667ms;
}
.book_item:nth-child(3) {
  -webkit-animation-delay: 833.3333333333ms;
          animation-delay: 833.3333333333ms;
}
.book_item:nth-child(4) {
  -webkit-animation-delay: 1250ms;
          animation-delay: 1250ms;
}
.book_item:nth-child(5) {
  -webkit-animation-delay: 1666.6666666667ms;
          animation-delay: 1666.6666666667ms;
}
.book_item:nth-child(6) {
  -webkit-animation-delay: 2083.3333333333ms;
          animation-delay: 2083.3333333333ms;
}

.shelf {
  width: 300px;
  height: 5px;
  margin: 0 auto;
  background-color: white;
  position: relative;
}
.shelf:before, .shelf:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #1e6cc7;
  background-image: radial-gradient(rgba(255, 255, 255, 0.5) 30%, transparent 0);
  background-size: 10px 10px;
  background-position: 0 -2.5px;
  top: 200%;
  left: 5%;
  -webkit-animation: move 250ms linear infinite;
          animation: move 250ms linear infinite;
}
.shelf:after {
  top: 400%;
  left: 7.5%;
}

@-webkit-keyframes move {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: 10px;
  }
}

@keyframes move {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: 10px;
  }
}
@-webkit-keyframes travel {
  0% {
    opacity: 0;
    transform: translateX(300px) rotateZ(0deg) scaleY(1);
  }
  6.5% {
    transform: translateX(279.5px) rotateZ(0deg) scaleY(1.1);
  }
  8.8% {
    transform: translateX(273.6px) rotateZ(0deg) scaleY(1);
  }
  10% {
    opacity: 1;
    transform: translateX(270px) rotateZ(0deg);
  }
  17.6% {
    transform: translateX(247.2px) rotateZ(-30deg);
  }
  45% {
    transform: translateX(165px) rotateZ(-30deg);
  }
  49.5% {
    transform: translateX(151.5px) rotateZ(-45deg);
  }
  61.5% {
    transform: translateX(115.5px) rotateZ(-45deg);
  }
  67% {
    transform: translateX(99px) rotateZ(-60deg);
  }
  76% {
    transform: translateX(72px) rotateZ(-60deg);
  }
  83.5% {
    opacity: 1;
    transform: translateX(49.5px) rotateZ(-90deg);
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: translateX(0px) rotateZ(-90deg);
  }
}
@keyframes travel {
  0% {
    opacity: 0;
    transform: translateX(300px) rotateZ(0deg) scaleY(1);
  }
  6.5% {
    transform: translateX(279.5px) rotateZ(0deg) scaleY(1.1);
  }
  8.8% {
    transform: translateX(273.6px) rotateZ(0deg) scaleY(1);
  }
  10% {
    opacity: 1;
    transform: translateX(270px) rotateZ(0deg);
  }
  17.6% {
    transform: translateX(247.2px) rotateZ(-30deg);
  }
  45% {
    transform: translateX(165px) rotateZ(-30deg);
  }
  49.5% {
    transform: translateX(151.5px) rotateZ(-45deg);
  }
  61.5% {
    transform: translateX(115.5px) rotateZ(-45deg);
  }
  67% {
    transform: translateX(99px) rotateZ(-60deg);
  }
  76% {
    transform: translateX(72px) rotateZ(-60deg);
  }
  83.5% {
    opacity: 1;
    transform: translateX(49.5px) rotateZ(-90deg);
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: translateX(0px) rotateZ(-90deg);
  }
}



/*==================  커버 편집 페이지 ==================*/
.cover {
	padding-bottom: 80px;
}
.cover.ver .edit_cover { display: none}
.cover.ver .cover_ver {display: block}
.cover.ver .hor { display: none}
.cover.ver .ver { display: inline-block}

.none { display: none;}

.cover_insta {
	position: relative;
	margin: 15px auto;
	width: 300px;
	height: 218px;
	color: #130c0e;
	background-color: #fff;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
	line-height: 1;
}

.cover_insta .tit {
	font-size: 10px;
}
/*--- 커버_가로st) spring --*/
.cover_insta.st_spring {
	text-align: center;
}

.cover_insta img {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.cover_insta .img {
	overflow: hidden;
}

.cover_insta.st_spring .logo {
	margin: 0 auto;
	padding-top: 20px;
	width: 64px;
	text-align: center;
}

.cover_insta.st_spring .tit {
	margin: 10px auto 0;
	width: 130px;
	height: 15px;
	line-height: 15px;
	border-top: 1px dotted #a5a4a4;
	border-bottom: 1px dotted #a5a4a4;
}

.cover_insta.st_spring .img {
	margin: 8px auto;
	width: 130px;
	height: 130px;
	line-height: 1.4;
}
/*--- 커버_가로st) summer --*/
.cover_insta.st_summer {
	text-align: center;
}

.cover_insta.st_summer .bg_frame {
	position: absolute;
	top: 25px;
	left: 76px;
	width: 150px;
	height: 150px;
	border: 1px solid #b7cce0;
	z-index: 1;
}

.cover_insta.st_summer ul {
	font-size: 0;
	margin: 0 auto;
	padding-top: 11px;
	width: 176px;
	height: 176px;
}

.cover_insta.st_summer ul .img {
	position: relative;
	margin: 4px;
	display: inline-block;
	width: 80px;
	height: 80px;
	z-index: 2;
}

.cover_insta.st_summer .wrap_tit {
	position: absolute;
	top: 68px;
	left: 120px;
	width: 60px;
	height: 60px;
	background-color: #fff;
	z-index: 3;
}

.cover_insta.st_summer .logo {
	margin: 14px auto 3px;
	width: 42px;
}

.cover_insta.st_summer .name {
	text-align: center;
	width: 60px;
	font-size: 6px;
	color: #79797a;
}

.cover_insta.st_summer .tit {
	position: absolute;
	left: 50px;
	bottom: 14px;
	width: 200px;
}
/*--- 커버_가로st) autumn --*/
.cover_insta.st_autumn .date {
	position: relative;
	padding: 20px 0 0 14px;
	color: #130c0e;
	font-size: 10px;
	z-index: 3;
	transform: scale(0.7);
	margin-left: -50px;
}

.cover_insta.st_autumn .date a {
	font-family: 'Times New Roman';
}

.cover_insta.st_autumn .name {
	position: relative;
	margin: 0 0 0 13px;
	color: #79797a;
	font-size: 10px;
	z-index: 3;
	transform: scale(0.6);
	margin-left: -58px;
}

.cover_insta.st_autumn .tit {
	position: absolute;
	bottom: 102px;
	left: -80px;
	width: 200px;
	text-align: left;
	font-weight: 700;
	-ms-transform: rotate(-90deg) scale(0.8);
	-webkit-transform: rotate(-90deg) scale(0.8);
	transform: rotate(-90deg) scale(0.8);
}

.cover_insta.st_autumn .img {
	position: absolute;
	top: 0;
	right: 0;
	width: 218px;
	height: 218px;
	z-index: 2;
}
/*--- 커버_가로st) winter --*/
.cover_insta.st_winter .img {
	width: 300px;
	height: 218px;
	overflow: hidden;
}

.cover_insta.st_winter .wrap_tit {
	position: absolute;
	top: 23px;
	left: 86px;
	width: 130px;
	height: 40px;
	color: #3b3b3b;
	background: rgba(255, 255, 255, 0.9);
	border: 3px double #3b3b3b;
	z-index: 2;
}

.cover_insta.st_winter .logo {
	margin-top: 7px;
	font-size: 9px;
	font-family: serif;
	text-align: center;
	font-style: italic;
}

.cover_insta.st_winter .tit {
	margin-top: 4px;
	text-align: center;
	color: #79797a;
}
/*--- 커버_세로st) 공통 --*/
.cover_ver {
	height: 386px;
	display: block;
	position: relative;
	width: 80%;
	min-height: 200px;
	margin: 15px auto;
	border: 1px solid #ddd;
	display: none;
}

.cover_ver > * {
	position: absolute;
}

.cover_ver .tit {
	text-align: center;
	font-size: 10px;
}

.cover_ver:not([cover_layout='winter']) .tit {
	color: #333;
	font-weight: bold;
}

.cover_ver .name, 
.cover_ver .front_logo {
	display: none;
}

.cover_ver .img {
	overflow: hidden;
}

.cover_ver .img:before {
	content: '\002b';
	background: #f5f5f5;
	text-align: center;
	color: #555;
	font-size: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

.cover_ver .img img {
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

.cover_ver .front_logo {
	width: 34px;
	left: calc(50% - 12px);
	bottom: 4%;
}

.cover_ver .img:not([data-img='sm1']) {
	display: none;
}

/*--- 커버_세로st) spring --*/
.cover_ver[data-cover='spring'] {
	background: center / contain url(/img/assets/cover/bg_spring_v.jpg) no-repeat;
}

.cover_ver[data-cover='spring'] .tit {
	left: 10%;
	right: 10%;
	top: 30%;
	border-width: 1px 0;
	border-style: dashed;
	border-color: #130c0e;
	transform: scale(0.9);
}

.cover_ver[data-cover='spring'] .img {
	left: 12.5%;
	right: 12.5%;
	top: 38.54%;
	bottom: 8%;
}

.cover_ver[data-cover='summer'] .tit {
	left: 4%;
	right: 4%;
	top: 13%;
}
.cover_ver[data-cover='summer'] .name, 
.cover_ver[data-cover='summer'] .img {
	display: block;
}

.cover_ver[data-cover='summer'] .name {
	left: 4%;
	right: 4%;
	text-align: center;
	top: 17%;
	font-size: 10px;
	transform: scale(0.8);
	color: #5d6d79;
}
.cover_ver[data-cover='summer'] .img[data-img='sm1'] {
	left: 4%;
	right: 50.86%;
	top: 30.01%;
	bottom: 37.81%;
}

.cover_ver[data-cover='summer'] .img[data-img='sm2'] {
	left: 50.86%;
	right: 4%;
	top: 30.01%;
	bottom: 37.81%;
}
.cover_ver[data-cover='summer'] .img[data-img='sm3'] {
	left: 4%;
	right: 50.86%;
	top: 62.82%;
	bottom: 5%;
}
.cover_ver[data-cover='summer'] .img[data-img='sm4'] {
	left: 50.86%;
	right: 4%;
	top: 62.82%;
	bottom: 5%;
}

.cover_ver[data-cover='autumn'] .tit {
	left: 4%;
	right: 4%;
	top: 11%;
}

.cover_ver[data-cover='autumn'] .name {
	left: 4%;
	right: 4%;
	text-align: center;
	top: 14%;
	font-size: 10px;
	transform: scale(0.8);
	color: #5d6d79;
	display: block;
}

.cover_ver[data-cover='autumn'] .img {
	left: 0;
	top: 28.691%;
	right: 0;
	bottom: 0;
}

.cover_ver[data-cover='autumn'] .img {
	left: 0;
	top: 28.691%;
	right: 0;
	bottom: 0;
}

.cover_ver[data-cover='autumn'] .img {
	left: 0;
	top: 28.691%;
	right: 0;
	bottom: 0;
}

.cover_ver[data-cover='autumn'] .front_logo {
	display: block;
}

.cover_ver[data-cover='winter'] .tit {
	left: 18.75%;
	top: 20%;
	right: 18.75%;
	top: 23%;
	transform: scale(0.9);
	z-index: 2;
	color: #747474;
}

.cover_ver[data-cover='winter'] .name {
	color: transparent;
	left: 18.75%;
	top: 17%;
	right: 18.75%;
	bottom: 69.63%;
	background-color: #fff;
	border: 1px solid #353b39;
	z-index: 1;
	text-align: center;
	display: block;
}
.cover_ver[data-cover='winter'] .name::before {
	content: '';
	position: absolute;
	width: calc(100% / 1.58);
	left: calc(50% - 31%);
	top: 15%;
	height: 40%;
	background: center / contain url(/img/assets/cover/bg_winter_v.jpg) no-repeat;
	display: inline-block;
	text-align: center;
}

.cover_ver[data-cover='winter'] .img {
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

/*---- 커버스타일 선택 -------*/
.cover_style {
	width: calc(100% - 30px);
	margin: 20px 0 0 0;
	border-top: 1px solid #e6e6e6;
	padding: 20px 15px 20px;
	overflow: hidden;
}

.cover_style li {
	margin: 0 5px;
	display: inline-block;
 	width: calc(24% - 10px);
}

.cover_style li.ver { display: none;}

.cover_style li img {
	margin: 0 0 10px 0;
}

.cover_style li input + label span {
	font-size: 12px;
	display: block;
}

.cover_style li input[type='checkbox']:checked + label .chk, 
.cover_style li input[type='radio']:checked + label .chk {
	border-radius: 50%;
}

.cover .input_wrap {
	margin-top: 0;
}

.cover .input_wrap > dl > dd > label {
	width: 48%;
	margin-right: 4px;
}

.cover .input_wrap > dl > dd > input[type='radio']:checked + label div.btn_basic {
    background: #e4405f;
}

.cover .input_wrap .btn_basic {
    border-radius: 10px;
}
/*--- 팝업) 제목수정 ----*/
.pop.pop_change_tit > div,
.pop.pop_change_date > div {
	top: calc(50% - 110px);
	/*left: calc(50% - 140px);*/
}
/*---- 레이어) 사진 변경 ---*/
.pop_change_pic .origin_cover {
	width: 232px;
	height: 232px;
	position: relative;
}

.pop_change_pic .origin_cover .move_img { 
	left: 0;
	top: 0;
	position: absolute;
}

.btn_photo_pic {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 20px;
}


.btn_photo_pic > li {
	-webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	border-radius: 20px;
}

.btn_inpho_pic,
.btn_mopho_pic {
	text-align: center;
	padding: 8px 15px 10px;
	font-size: 14px;
	background: #e4405f;
	height: 35px;
	border-radius: 20px;
	/*border: 1px solid #ea8797;*/
	color: #fff;
	box-sizing: border-box;
}

/*.btn_mopho_pic {
	text-align: center;
	padding: 10px;
	font-size: 14px;
	background: #fff;
	height: 35px;
}*/

.fixed_bottom a.active:not(.btn_close) {
	background-color: #e4405f;
	color: #fff;
	border: 1px solid #ea8797;
}
/*-- 레이어) 커버사진변경(인스타리스트) --*/
.pop_pic_list .photo_img > li > .img_thum {
	height: 108px;
}

/*==================  결제 페이지 ==================*/
/*--- 배송지 정보 ---*/
section.pay > form > div.pay_box {
	/*margin: 14px 0;*/
	border-top: 2px solid #ea8797;
	border-bottom: 1px solid #e2e2e2;
	background-color: #fff;
	font-size: 15px;
	height: 100vh;
}

section.pay > form > div.pay_box > div.tit {
	margin-bottom: 50px;
	padding: 0 12px;
	height: 44px;
	line-height: 44px;
	font-weight: bold;
	border-bottom: 1px solid #eee;
}

section.pay > form > div.pay_box input {
	margin-bottom: 10px;
	padding: 0 12px;
	border: 1px solid #ddd;
	border-radius: 2px;
	box-sizing: border-box;
	-webkit-appearance: none;
	height: 3rem;
	width: 100%;
}

section.pay > form > div.pay_box input:read-only {
	border: 1px dotted #ddd !important;
	background-color: #f4f4f4;
}

section.pay > form label {
	line-height: 25px;
}

section.pay > form > div.pay_box [type='checkbox'].round_chk+label {
	font-size: 14px;
	color: #555;
	font-weight: normal;
}

section.pay > form label .chk {
	float: left;
	margin-right: 10px;
}

section.pay > form > div.pay_box > div.row {
	overflow: hidden;
	display: block;
}

section.pay > form > div.pay_box > div.row > div:first-child {
	width: /*30%;*/ 50%;
	line-height: 3rem;
	padding-left: 12px;
	font-size: 18px;
}

section.pay > form > div.pay_box > div.row > div {
	float: left;
	box-sizing: border-box;
}

.need:after {
	content: '\002a';
	color: #F44336;
	position: relative;
	top: -2px;
	left: 2px;
}

section.pay > form > div.pay_box > div.row > div:last-child {
	/*width: 70%;
	padding-right: 12px;*/
	width: 100%;
	padding: 12px;
}

section.pay > form > div.pay_box .zipcode input {
	width: 50px;
	padding: 0 5px;
	text-align: center;
}

section.pay > form > div.pay_box > div.row > div.zipcode > a {
	height: 42px;
	line-height: 42px;
	vertical-align: middle;
	padding: 0 12px;
	background-color: #e4405f;
	border-color: #ccc;
}

section.pay > form > div.pay_box > div.row > div#put_zipcode {
	display: none;
	border: 1px solid #333;
	width: 100%;
	height: 492px;
	margin: 30px 0 15px;
	position: relative;
}

section.pay > form > div.pay_box > div.row > div#put_zipcode .zipcode_close {
	cursor: pointer;
	padding: 0 8px;
	position: absolute;
	right: 10px;
	top: -31px;
	z-index: 1;
	height: 30px;
	line-height: 30px;
	background-color: #555;
	color: #fff;
}

section.pay > form > div.pay_box > div.row > div.offset-25 {
	/*margin-left: 30%;
	width: 70%;
	padding-right: 15px;*/
	width: 100%;
	padding: 12px;
}

section.pay > form > div.pay_box > div.row:last-child {
	margin-bottom: 4px;
}

/*==================  주문/배송조회 페이지 ==================*/
header {
	border-bottom: 1px solid #e6e6e6;
}

.order .order_de {
	padding: 10px;
	box-sizing: border-box;
	margin-bottom: 65px;
}

.order_de .row {
	overflow: hidden;
	border-bottom: 1px dotted #e6e6e6;
	padding: 10px;
}

.order_de .row > div.product_img {
	width: 30%;
	float: left;
}
.order_de .row > div.product_img > img {
	margin: 0 auto 10px;
	display: block;
	border: 1px solid #e6e6e6;
}

.order_de .row > div.product_info {
	width: calc(70% - 10px);
	display: inline-block;
	float: right;
	box-sizing: border-box;
}

.order_de .row > div.product_info li {
	border-bottom: 1px solid #e6e6e6;
	min-height: 25px;
}

.order_de .row > div.product_info span.tit {
	width: 55px;
	vertical-align: middle;
	font-weight: bold;
	border: none;
	padding: 3px 0;
	line-height: 25px;
}

.order_de .row > div.product_info span {
	display: inline-block;
	font-size: 13px;
}
.order_de .row > div.product_info span.txt {
	width: calc(100% - 70px);
}

.order_de .pay_box {
	padding: 10px;
	background-color: #f5f5f5;
	border: 1px solid #e6e6e6;
}

.order_de .pay_box > ul > li {
	padding: 2.5px 0;
	line-height: 30px;
}

.order_de .pay_box > ul > li > span {
	display: inline-block;
	font-size: 14px;
}

.order_de .pay_box > ul > li > span:first-child {
	width: 70px;
	padding: 0;
	vertical-align: top;
	font-weight: bold;
	border: none;
}

.order_de .pay_box > ul > li > span:last-child {
	width: calc(100% - 75px);
}


/*-------- 주문 진행 단계 --------*/
.order-wrap{
  /*width: 700px;*/
  margin: 50px auto;
	padding: 0 8px;
  font-family: 'Noto Sans KR', sans-serif;
}

/* 회색 전체 바 */
.progress-bar{
  position: relative;
  height: 8px;
  background: #e5e5e5;
  border-radius: 50px;
  margin-bottom: 18px;
}

/* 초록 진행 바 */
.progress{
  position: absolute;
  height: 8px;
  width: 0%;
  background: #2ecc71;
  border-radius: 50px;
  transition: 0.4s;
}

/* 단계 텍스트 */
.step-list{
  display: flex;
  justify-content: space-between;
  padding: 0;
  list-style: none;
}

.step{
  color: #999;
  font-size: 13px;
  transition: 0.3s;
}

/* 진행중 단계만 초록색 */
.step.active{
  color: #2ecc71;
  font-weight: 600;
	font-size: 14px;
}

/*================== 체험 신청하기 ===========================*/


.exper .ex_wrap {
  max-width: 600px;
  padding:20px;
	text-align: center;
	color: #222;
}

/* 상단 이미지 */
.exper .top-img{
  width:100%;
	height: 180px;
	border-radius: 20px;
	overflow: hidden;
  margin-bottom:30px;
}

.exper h1{
  text-align:center;
  font-size:22px;
  margin-bottom:18px;
	color: #ff65af;
}

.exper .desc{
  text-align:center;
  line-height:1.6;
  font-size:15px;
  margin-bottom:25px;
}

/* 입력폼 */
.exper .input-row{
  display:flex;
  margin-bottom:12px;
	column-gap: 10px;
}

.exper .label {
  width: 20%;
  padding:12px;
  text-align:center;
  font-weight:600;
}

.exper input {
  /*flex:1;*/
  border:none;
  padding:12px;
  font-size:15px;
	border-bottom: 1px solid #ddd;
	widows: 60%
}

.exper input:focus{
  outline:none;
}

/* 체크박스 박스 */
.exper .agree-box{
  display:flex;
  gap:15px;
  padding:12px;
  font-size:14px;
  line-height:1.4;
  margin:18px 0 25px;
	justify-content: flex-start;
  cursor:pointer;
  position:relative;
}

.exper .agree-box input[type="checkbox"] {
	display:none;
}

.exper .agree-box .checkmark{
  min-width:22px;
  height:22px;
  border:1px solid #ddd;
	border-radius: 3px;
  position:relative;
  margin-top:2px;
}

.exper .agree-box .checkmark:after{
  content:"";
  position:absolute;
  left:5px;
  top:1px;
  width:7px;
  height:13px;
  border:solid white;
  border-width:0 3px 3px 0;
  transform:rotate(45deg);
  opacity:0;
}

.agree-box input[type="checkbox"]:checked + .checkmark{
  background:#333;
}

.agree-box input[type="checkbox"]:checked + .checkmark:after{
  opacity:1;
}

.exper .agree-box .agree-text {
	text-align: left;
}

div.bottom_btn a.btn_apply {
  width:100%;
  font-size:18px;
  font-weight:bold;
  cursor:pointer;
  transition:.2s;
	background: linear-gradient(to right, #ff65af 0%, #ff6e6e 100%);
	letter-spacing: 1px;
}




/*------ 로딩 팝업 ----------*/
/* 전체 배경: 터치 및 스크롤 방지 */
.loading-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 9999;
    touch-action: none; /* 모바일 터치 방지 */
}

/* 중앙 정렬 박스 */
.spinner-box {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

/* 스피너 (모바일 맞춤형 40px) */
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 10px;
}

.loading-text {
    color: #ffffff;
    font-size: 14px;
    margin: 0;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}