@charset "UTF-8";

/*
-  클래식 공통 ui 스타일
- 기존 mc-static-root/css/style.css 파일 경로를 https://image.oliveyoung.co.kr/uploads/contents/planshop/xxx.css로 변경 및 파일명 변경
- evtStyle.css는 모던 기획전 상세 페이지에서만 로드 (전략 GNB일 경우 미로드)
*/

@font-face {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 400;
    src: local(Montserrat-Light),url(/mc-static-root/fonts/Montserrat-Light.woff2) format("woff2"),url(/mc-static-root/fonts/Montserrat-Light.woff) format("woff")
}

@font-face {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 500;
    src: local(Montserrat),url(/mc-static-root/fonts/Montserrat-Regular.woff2) format("woff2"),url(/mc-static-root/fonts/Montserrat-Regular.woff) format("woff")
}

@font-face {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 700;
    src: local(Montserrat-SemiBold),url(/mc-static-root/fonts/Montserrat-SemiBold.woff2) format("woff2"),url(/mc-static-root/fonts/Montserrat-SemiBold.woff) format("woff")
}

@font-face {
    font-family: NotoSansCJKkr;
    font-style: normal;
    font-weight: 400;
    src: local(NotoSansKR),url(/mc-static-root/fonts/NotoSansKR-Regular.woff2) format("woff2"),url(/mc-static-root/fonts/NotoSansKR-Regular.woff) format("woff")
}

@font-face {
    font-family: NotoSansCJKkr;
    font-style: normal;
    font-weight: 500;
    src: local(NotoSansKR),url(/mc-static-root/fonts/NotoSansKR-Medium.woff2) format("woff2"),url(/mc-static-root/fonts/NotoSansKR-Medium.woff) format("woff")
}

@font-face {
    font-family: NotoSansCJKkr;
    font-style: normal;
    font-weight: 700;
    src: local(NotoSansKR),url(/mc-static-root/fonts/NotoSansKR-Bold.woff2) format("woff2"),url(/mc-static-root/fonts/NotoSansKR-Bold.woff) format("woff")
}

@font-face {
    font-family: Dovemayo-Medium;
    src: url(/mc-static-root/fonts/dovemayo/Dovemayo-Medium.woff) format("woff");
    font-weight: 400;
    font-style: normal
}

/* Reset */
a,
address,
blockquote,
body,
dd,
div,
dl,
dt,
em,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
img,
input,
label,
li,
ol,
p,
pre,
select,
span,
strong,
textarea,
ul {
    margin: 0;
    padding: 0;
    border: 0;
}

em {
    font-style: normal
}

ol,
ul {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    border: 0;
}

hr {
    display: none;
}

/* 공통 */
a {
    color: #50585f;
    text-decoration: none;
}

* {
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", NotoSansCJKkr, Roboto, Montserrat, sans-serif;
    letter-spacing: 0;
    word-spacing: 0;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

/* html, body */
html {
    overflow-x: hidden;
}

body,
html {
    width: 100%;
    height: 100vh;
    height: var(--mw-ios-vh);
    overscroll-behavior: contain;
    background-color: #fff !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: none;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased
}

body {
    color: #50585f;
    -webkit-text-size-adjust: none;
}

/* 이미지, 버튼, 폼요소 */
img {
    width: 100%;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
}

.img.new img {
    width: auto;
    height: 220px;
}

input:disabled, input:read-only, select:disabled {
    background-color: #f6f7f9 !important;
    color: #99a1a8;
}

input {
    width: 100%;
    height: 40px;
    padding: 0 8px;
    border: 1px solid #c9cdd2;
    background: 0 0;
    border-radius: 5px;
    box-shadow: none;
    -webkit-appearance: none;
    letter-spacing: .5px;
}

button, input[type=submit] {
    border: 0;
    padding: 0;
    box-shadow: none;
    cursor: pointer;
}

button,
img,
input,
select,
textarea {
    border: 0;
    color: #50585f;
    vertical-align: top;
}

button,
input.button,
input.image,
input.submit,
label {
    cursor: pointer;
}

/* 접근성 */
.blind,
.oyblind {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    line-height: 999px;
    white-space: nowrap;
}

/* 상품 좋아요 애니메이션 */
.layerAlim {position:fixed;top:50%;left:50%;width:130px;height:130px;margin:-65px 0 0 -65px;padding:25px 20px 0;border-radius:65px;z-index:22}
.layerAlim .icon {display:block;width:42px;height:35px;margin:0 auto}
.layerAlim.zzimOn {padding:0;margin:0;width:34vw;height:34vw;transform: translate(-50%, -50%) scale(0);background:none;border-radius:0;animation:like-animation 1.07s linear;}
.layerAlim.zzimOn .icon {width:100%;height:100%;background: no-repeat center url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='%23ff5753'%3E%3Cpath d='M22.997 2.6c-1.898 0-3.705.615-5.189 1.734l-.276.247c-.454.423-.878.897-1.277 1.428l-.252.346-.074-.106c-.495-.697-1.024-1.297-1.587-1.798C12.789 3.244 10.944 2.6 9.003 2.6c-4.766 0-8.63 3.864-8.63 8.63 0 1.687.485 3.304 1.383 4.69.58 1.068 1.384 2.243 2.413 3.526l.49.599c.085.101.17.203.258.305l.539.622.28.317.587.645c.201.217.407.437.618.66l.65.675.337.343.698.698.361.354.745.72.778.736.809.75.84.766c.143.13.287.259.433.389l.888.788.92.804.952.819c.373.318.923.318 1.296 0l.952-.819.92-.804.888-.788.857-.774.825-.758.794-.744.384-.366.747-.722.714-.706.345-.348.667-.684.636-.67.603-.654c.196-.216.387-.43.572-.64l.541-.626c1.4-1.648 2.463-3.14 3.19-4.48.859-1.319 1.345-2.936 1.345-4.622 0-4.767-3.865-8.631-8.631-8.631z' /%3E%3C/g%3E%3C/svg%3E%0A");background-size:100%;}
@keyframes like-animation {
	0% {
		transform: translate(-50%, -50%) scale(0);
	}

	3% {
		transform: translate(-50%, -50%) scale(0);
	}

	7% {
		transform: translate(-50%, -50%) scale(0.01);
	}

	10% {
		transform: translate(-50%, -50%) scale(0.04);
	}

	13% {
		transform: translate(-50%, -50%) scale(0.1);
	}

	17% {
		transform: translate(-50%, -50%) scale(0.18);
	}

	20% {
		transform: translate(-50%, -50%) scale(0.3);
	}

	23% {
		transform: translate(-50%, -50%) scale(0.52);
	}

	27% {
		transform: translate(-50%, -50%) scale(0.82);
	}

	30% {
		transform: translate(-50%, -50%) scale(1);
	}

	33% {
		transform: translate(-50%, -50%) scale(1);
	}

	37% {
		transform: translate(-50%, -50%) scale(0.92);
	}

	40% {
		transform: translate(-50%, -50%) scale(0.8);
	}

	43% {
		transform: translate(-50%, -50%) scale(0.8);
	}

	47% {
		transform: translate(-50%, -50%) scale(0.87);
	}

	50% {
		transform: translate(-50%, -50%) scale(0.92);
	}

	53% {
		transform: translate(-50%, -50%) scale(0.95);
	}

	57% {
		transform: translate(-50%, -50%) scale(0.96);
	}

	70% {
		transform: translate(-50%, -50%) scale(0.96);
	}

	73% {
		transform: translate(-50%, -50%) scale(0.96);
	}

	87% {
		transform: translate(-50%, -50%) scale(0.96);
	}

	89% {
		transform: translate(-50%, -50%) scale(0.92);
	}

	91% {
		transform: translate(-50%, -50%) scale(0.81);
	}

	93% {
		transform: translate(-50%, -50%) scale(0.34);
	}

	95% {
		transform: translate(-50%, -50%) scale(0.11);
	}

	97% {
		transform: translate(-50%, -50%) scale(0.03);
	}

	99% {
		transform: translate(-50%, -50%) scale(0.01);
	}

	100% {
		transform: translate(-50%, -50%) scale(0);
	}
}

/*  
- 마케팅 이벤트 공통 UI
*/

html{
    overflow-x:initial
}

.contEditor ul {
    list-style-type: none !important;
}

/* 레이어 팝업 : 공통 */
#eventDimLayer,
#eventDimLayer2 {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.4);
    z-index: 998;
    display: none;
}

.eventLayer {
    display: none;
    position: fixed;
    top: 50%;
    left: 0;
    display: none;
    z-index: 999;
    width: 100%
}

.eventLayer .inner { 
    margin: 0 auto;
    background-color: #fff;
    box-sizing: border-box
} 

.contEditor .eventLayer .inner {
    position: relative;
    width: 84%;
    margin: 0 auto;
}

/* 꼭 알아두세요 */
.contEditor .eventLayer .eventNotice2 {
    padding: 20px;
}

.contEditor .eventLayer .conts_inner,
.contEditor .eventLayer .eventConts {
    overflow-y: auto;
    height: auto;
    max-height: 400px;
}

.contEditor .eventLayer .eventNotice2 h6,
.contEditor .eventLayer .eventNotice2 .eventHeader {
    padding: 0 0 5px 5px;
    border-bottom: 1px solid #474747;
    font-size: 16px;
    line-height: 30px;
    color: #000;
}

.contEditor .eventLayer .eventNotice2 .info_tit,
.contEditor .eventLayer .eventTitle {
    margin-top: 15px;
    font-size: 13px;
    font-weight: bold;
    color: #1e1e1e;
    line-height: 19px;
}

.contEditor .eventLayer .eventNotice2 ul,
.contEditor .eventLayer .eventList {
    margin-top: 5px;
}

.contEditor .eventLayer .eventNotice2 ul li,
.contEditor .eventLayer .eventList .listItem {
    position: relative;
    padding: 0 0 2px 10px;
    font-size: 12px;
    line-height: 18px;
    color: #555;
}

.contEditor .eventLayer .eventNotice2 ul li:before,
.contEditor .eventLayer .eventList .listItem:before {
    position: absolute;
    top: 0;
    left: 0;
    content: '-';
}

.contEditor .eventLayer .eventList .listItem.last {
    margin-top: 5px;
    padding: 0 0 2px 12px;
}

.contEditor .eventLayer .eventList .listItem.last:before {
    position: absolute;
    top: 0;
    left: 0;
    content: '※';
}

.contEditor .eventLayer .eventList .listItem .textBold {
    font-weight: bold;
}

.contEditor .eventLayer .eventList .listItem.blue {
    color: #229bc1
}

.contEditor .eventLayer .eventList .listItem .red {
    color: #f00
}

/* 레이어:round style */
.eventLayer .eventRound {
    border-radius: 10px;
}

.eventLayer .eventRound .eventHeader {
    width: 85%;
    height: 18vw;
    margin: auto;
    font-size: 5.33vw;
    line-height: 18vw;
    color: #000;
    text-align: center;
}

.eventLayer .eventRound .eventConts {
    max-height: 126vw;
    color: #191919;
}
.eventLayer .eventRound .eventTitle .bold {
    font-weight: bold;
}

.eventLayer .eventRound .contsInner {
    max-height: fit-content;
}

.eventLayer .eventRound .eventTitle:first-child {
    margin: 0;
    padding-bottom: 6vw;
    font-size: 4.1vw;
    text-align: center;
}

.contEditor .eventLayer .eventRound .close {
    top: 7.5vw;
}

/* 레이어 : 닫기 버튼 */
.contEditor .eventLayer .inner .close {
    display: block;
    position: absolute;
    top: 25px;
    right: 20px;
    width: 15px;
    height: 15px;
    font-size: 0;
}

.contEditor .eventLayer .inner .close:before,
.contEditor .eventLayer .inner .close:after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 2px;
    background: #000;
    content: '';
    border-radius: 4px;
}

.contEditor .eventLayer .inner .close:before {
    transform: translate(-50%,-50%) rotate(-45deg);
}

.contEditor .eventLayer .inner .close:after {
    transform: translate(-50%,-50%) rotate(45deg);
}

@media screen and (max-width:320px){
	.eventLayer .eventConts{max-height:280px}
}

/* react-swiper에서 설정된 기본 스타일 제거 */
.contEditor .swiper-pagination-fraction,
.contEditor .swiper-pagination-custom,
.contEditor .swiper-horizontal > .swiper-pagination-bullets,
.contEditor .swiper-pagination-bullets.swiper-pagination-horizontal {
    all: unset;
}
.contEditor .swiper-pagination {
    all: unset;
}
.contEditor .swiper-pagination-bullet {
    all: unset;
}

/* 상품 템플릿 */
.oyEvent_wrap .event_temp_wrap .good .thumb i {
    display: none;
}

/* 상품 템플릿 ios 대응 */
.oyEvent_wrap .event_temp_wrap .good .info>p u,
.oyEvent_wrap .event_temp_wrap .goods_list .good .info>p span {
    display: inline !important;
}

/* 마케팅 기획전 공통 UI*/
.oyEvent_wrap .evtVisual,
.oyEvent_wrap .evtCont {
    position: relative;
    width: 100%;
}

.oyEvent_wrap a {
    display: block;
    height: 100%;
}

.oyEvent_wrap img {
    display: block;
}

.oyEvent_wrap .btnNotice {
    width: 50vw;
    height: 12vw;
}

/* swiper */
.oyEvent_wrap .swiper-wrapper {
    display: flex;
    display: -webkit-box;
    display: -ms-flex-box;
}

.oyEvent_wrap .swiper-slide {
    position: relative;
}

.swiper-button-prev {
    left: -3px
}

.swiper-button-next {
    right: -3px
}

.swiper-button-next:before {
    transform: rotate(180deg)
}

/* fixedtab navi_서번트 */
.oyEvent_wrap .evtFixedTab {
    position: relative;
    z-index: 10;
    height: 13.334vw !important;
    background: #fff
}

.oyEvent_wrap .evtFixedTab .innerPos.on {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    height: 13.334vw !important
}

.oyEvent_wrap .evtFixedTab .innerPos .list {
    display: flex;
    display: -webkit-flex;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.oyEvent_wrap .evtCont .tab_bg {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 13.334vw
}

.oyEvent_wrap .evtFixedTab .list li span[class^=tabCont] {
    display: block;
    height: 100%
}

/* swiper autoHeight 이슈 대응 */
.oyEvent_wrap .swiper-wrapper {
    display:flex !important;
    align-items:flex-start;
    height:auto
}

.swiper-container-autoheight >.swiper-wrapper > .swiper-slide{
    height:auto
}

#mHeader.sHeader.fixed.off~#mContainer .oyEvent_wrap .evtFixedTab .innerPos.on {
    transform: translateY(0);
    transition: transform .18s ease-out .2s
}

#mHeader.sHeader.fixed.on~#mContainer .oyEvent_wrap .evtFixedTab .innerPos.on {
    transform: translateY(44px);
    transition: transform .23s ease-out .2s
}

#mHeader.sHeader.new.fixed.on~#mContainer .oyEvent_wrap .evtFixedTab .innerPos.on {
    transform: translateY(48px);
    transition: transform .23s ease-out .2s
}

header[class*="NavigationBar_navigation-bar"].fixed.off~#content .oyEvent_wrap .evtFixedTab .innerPos.on {
    transform: translateY(0);
    transition: transform .18s ease-out .2s
}

header[class*="NavigationBar_navigation-bar"].on~#content .oyEvent_wrap .evtFixedTab .innerPos.on {
    transform: translateY(48px);
    transition: transform .23s ease-out .2s
}

#mLoading {position:fixed;z-index:100;}
.loading_ico{display:inline-block;position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:75px;height:50px;text-indent:-9999px;z-index:19;background:url(/mc-static-root/image/comm/loading_dot.png) no-repeat 0 0;background-size:100% auto}