/* BASIC css start */
html {
  scroll-behavior: smooth;
}

#overlay_layer {
  display: none;
}

/* max-width 초기화 */
#layout_body {
  max-width: none !important;
}
.top-area {
  margin: 0 auto;
}
.header__line-banner{
    margin: 0 auto;
}
.wrap {
  position: relative;
  width: 100%;
  min-width: 1140px;
}
.wrap * {
  font-family: YoonGothic !important;
}
.wrap img {
    max-width: none;
    margin:0 auto;
    display:block;
}

.wrap a{display:block; margin:0 auto;}
.wrap a img{width:100%;}
.wrap ul{margin:0; padding:0; list-style:none;}

/*-------------------------------------*/

/* 스크롤 페이드 (메인 제외 전 요소) */
.wrap .fade{opacity:0; transform:translateY(40px); transition:opacity .9s ease, transform .9s ease;}
.wrap .fade.on{opacity:1; transform:translateY(0);}

/* 반짝이 */
.wrap .twinkle-wrap{mix-blend-mode:screen; pointer-events:none;} /* 페이드는 래퍼, 반짝임은 안쪽 이미지 */
.wrap .twinkle{width:100%; transform-origin:72% 50%; opacity:0; animation:twinkle 2.4s infinite ease-in-out; pointer-events:none;}
@keyframes twinkle{
    0%  {opacity:0; transform:scale(.4);}
    45% {opacity:1; transform:scale(1);}
    55% {opacity:1; transform:scale(1);}
    100%{opacity:0; transform:scale(.4);}
}

/*-------------------------------------*/

/*target point : 고정헤더(96px) + 띠탭(72px) */
.posrel{position:relative;}
#tar1, #tar2, #tar3, #tar4, #tar5{position:absolute; top:-168px; left:0; display:block; width:100%; height:0;}

/*header (띠 탭)*/
#header{text-align:center; display:flex; overflow:hidden; justify-content:center; position:static; opacity:1; height:72px; width:100%; background:#727272;}
#header.fixed{position:fixed; top:96px; left:0; z-index:9999;}
#header a.menu{position:relative; margin:0;}
#header a.menu img {width:auto; height:72px;}
#header a.menu img:nth-child(2){position:absolute; top:0; left:0; opacity:0; transition:opacity .2s;}
#header a.menu.select img:nth-child(2){opacity:1;}
#header a.menu:hover img:nth-child(2){opacity:1;}
/* 메뉴 구분선 */
#header a.menu + a.menu::before{content:""; position:absolute; top:0; left:0; width:1px; height:100%; background:#b9b9b9; z-index:3;}

/*-------------------------------------*/

/*intro*/
#intro{width:100%; height:663px; background:#0b0b0b url("http://skinfood.img15.kr/data/content/skinfoodday/CY11_1-bg.jpg") no-repeat center top / cover; position:relative; overflow:hidden;}
#intro .title{width:484px; position:absolute; top:140px; left:calc(50% - 484px/2 + 8px); z-index:5;}
#intro .tag{width:144px; position:absolute; top:417px; left:calc(50% - 144px/2 + 202px); z-index:6;}

/* 띠 : 글씨만 양 옆으로 흐르는 효과 */
#intro .band{position:absolute; width:3200px; height:55px; left:calc(50% - 3200px/2); background:#ffee31; overflow:hidden;}
#intro .band .track{width:calc(3200px + 2410px); height:100%; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY11_1-roll.png") repeat-x 0 0 / auto 100%; will-change:transform;}
#intro .b-tf{top:27.2px;  transform:rotate(-10.91deg); z-index:4;}   /* 상단 앞 */
#intro .b-tb{top:-28.5px; transform:rotate(10.56deg);  z-index:3;}   /* 상단 뒤 */
#intro .b-bf{top:610.2px; transform:rotate(11.14deg);  z-index:2;}   /* 하단 앞 */
#intro .b-bb{top:563.8px; transform:rotate(-6deg);     z-index:1;}   /* 하단 뒤 */
#intro .b-tf .track, #intro .b-bf .track{animation:rollL 40s linear infinite;}
#intro .b-tb .track, #intro .b-bb .track{animation:rollR 40s linear infinite;}
@keyframes rollL{ from{transform:translateX(0);} to{transform:translateX(-2410px);} }
@keyframes rollR{ from{transform:translateX(-2410px);} to{transform:translateX(0);} }

/* 뒤쪽 띠 그림자 */
#intro .shadow1{position:absolute; width:1857px; height:420px; top:0; left:calc(50% - 1000px + 543px); background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY11_1-shadow1.png") no-repeat 0 0 / 100% 100%; z-index:3; pointer-events:none;}
#intro .shadow2{position:absolute; width:2800px; height:526px; top:140px; left:calc(50% - 2800px/2); background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY11_1-shadow2.png") no-repeat 0 0 / 100% 100%; z-index:1; pointer-events:none;}

/*box2 : 단독혜택*/
#box2{width:100%; height:1077px; background:#000 url("http://skinfood.img15.kr/data/content/skinfoodday/CY11_2-bg.jpg") no-repeat center top / cover; position:relative; overflow:hidden;}
#box2 .title{width:325px; position:absolute; top:76px; left:calc(50% - 325px/2 - 0.5px);}
#box2 .cnt{width:551px; position:absolute; top:367px; left:calc(50% - 551px/2 - 0.5px);}
#box2 .twinkle-wrap{width:264px; position:absolute; top:318px; left:calc(50% - 264px/2 + 159px); z-index:3;}

/*box3 : 쿠폰팩*/
#box3{width:100%; height:2466px; background:#000 url("http://skinfood.img15.kr/data/content/skinfoodday/CY11_3-bg.jpg") no-repeat center top / cover; position:relative; overflow:hidden;}
#box3 .title{width:472px; position:absolute; top:78px; left:calc(50% - 472px/2);}
#box3 .coupon1{width:480px; position:absolute; top:346px; left:calc(50% - 480px/2 + 7px);}
#box3 .info1{width:488px; position:absolute; top:908px; left:calc(50% - 488px/2 - 1px);}
#box3 a.btn1{width:488px; position:absolute; top:983px; left:calc(50% - 488px/2 + 1px);}
#box3 .subtitle{width:280px; position:absolute; top:1178px; left:calc(50% - 280px/2);}
#box3 .coupon2{width:429px; position:absolute; top:1275px; left:calc(50% - 429px/2 - 2.5px);}
#box3 a.btn2{width:488px; position:absolute; top:2006px; left:calc(50% - 488px/2);}
#box3 .info2{width:545px; position:absolute; top:2174px; left:calc(50% - 545px/2 - 1.5px);}
#box3 .twinkle1{width:264px; position:absolute; top:189px; left:calc(50% - 264px/2 + 104px); z-index:3;}
#box3 .twinkle2{width:218px; position:absolute; top:1137px; left:calc(50% - 218px/2 + 45px); z-index:3;}
#box3 .twinkle2 .twinkle{animation-delay:1.2s;}

/*box4 : NEW 감자 론칭*/
#box4{width:100%; height:3526px; background:#353535; position:relative; overflow:hidden;}
#box4 .hl{pointer-events:none; animation:glow 3s infinite ease-in-out;}
#box4 .hl1{width:1445px; position:absolute; top:-193px; left:calc(50% - 1445px/2 + 18.5px);}
#box4 .hl2{width:1445px; position:absolute; top:595px; left:calc(50% - 1445px/2 + 18.5px); animation-delay:1s;}
#box4 .hl3{width:1445px; position:absolute; top:1879px; left:calc(50% - 1445px/2 + 18.5px); animation-delay:2s;}
#box4 .cnt1{width:554px; position:absolute; top:82px; left:calc(50% - 554px/2); z-index:2;}
#box4 .cnt2{width:565px; position:absolute; top:909px; left:calc(50% - 565px/2 - 0.5px); z-index:2;}
#box4 .cnt3{width:565px; position:absolute; top:2169px; left:calc(50% - 565px/2 - 0.5px); z-index:2;}
@keyframes glow{ 0%,100%{opacity:.55;} 50%{opacity:1;} }

/*box5 : 감자 상품*/
#box5{width:100%; height:1055px; background:#000 url("http://skinfood.img15.kr/data/content/skinfoodday/CY11_5-bg.jpg") no-repeat center top / cover; position:relative; overflow:hidden;}
#box5 a.prd1{width:554px; position:absolute; top:72px; left:calc(50% - 554px/2);}
#box5 a.prd2{width:554px; position:absolute; top:327px; left:calc(50% - 554px/2);}
#box5 a.prd3{width:550px; position:absolute; top:584px; left:calc(50% - 550px/2);}
#box5 a.btn{width:551px; position:absolute; top:884px; left:calc(50% - 551px/2 + 0.5px);}

/*box6 : 원데이 특가*/
#box6{width:100%; height:1069px; background:#000 url("http://skinfood.img15.kr/data/content/skinfoodday/CY11_6-bg.jpg") no-repeat center top / cover; position:relative; overflow:hidden;}
#box6 .title{width:509px; position:absolute; top:77px; left:calc(50% - 509px/2 - 0.5px);}
#box6 ul{width:550px; height:52px; position:absolute; top:237px; left:calc(50% - 550px/2);}
#box6 ul > li{position:absolute; top:0; width:129px; cursor:pointer;}
#box6 ul > li:nth-child(1){left:0;}
#box6 ul > li:nth-child(2){left:140px;}
#box6 ul > li:nth-child(3){left:280px;}
#box6 ul > li:nth-child(4){left:421px;}
#box6 ul > li img{width:129px; height:52px;}
#box6 ul > li img:first-child{opacity:.4;} /* PSD off 그룹 불투명도 40% */
#box6 ul > li img.on{position:absolute; top:0; left:0; opacity:0; transition:opacity .2s;}
#box6 ul > li.select img.on{opacity:1;}
#box6 .prds{width:565px; height:515px; position:absolute; top:334px; left:calc(50% - 565px/2 + 2.5px);}
#box6 .prds .prd{width:100%; position:absolute; top:0; left:0; opacity:0; visibility:hidden; transition:opacity .4s;}
#box6 .prds .prd.select{opacity:1; visibility:visible;}
#box6 .prds .prd img{width:100%;}
#box6 a.btn{width:552px; position:absolute; top:896px; left:calc(50% - 552px/2);}

/*box7 : 단독 7,900원 특가*/
#box7{width:100%; height:823px; background:#000 url("http://skinfood.img15.kr/data/content/skinfoodday/CY11_7-bg.jpg") no-repeat center top / cover; position:relative; overflow:hidden;}
#box7 .title{width:438px; position:absolute; top:77px; left:calc(50% - 438px/2 + 2px);}
#box7 a.prd{width:564px; position:absolute; top:254px; left:calc(50% - 564px/2 + 1px);}

/*box8 : 3/5/7 균일가*/
#box8{width:100%; height:1066px; background:#000 url("http://skinfood.img15.kr/data/content/skinfoodday/CY11_8-bg.jpg") no-repeat center top / cover; position:relative; overflow:hidden;}
#box8 .title{width:380px; position:absolute; top:77px; left:calc(50% - 380px/2 + 1px);}
#box8 ul{width:550px; height:48px; position:absolute; top:242px; left:calc(50% - 550px/2 + 2px);}
#box8 ul > li{position:absolute; top:0; width:170px; cursor:pointer;}
#box8 ul > li:nth-child(1){left:0;}
#box8 ul > li:nth-child(2){left:190px;}
#box8 ul > li:nth-child(3){left:380px;}
#box8 ul > li img{width:170px; height:48px;}
#box8 ul > li img:first-child{opacity:.5;} /* PSD off 그룹 불투명도 50% */
#box8 ul > li img.on{position:absolute; top:0; left:0; opacity:0; transition:opacity .2s;}
#box8 ul > li.select img.on{opacity:1;}
#box8 .slideWrap{width:560px; position:absolute; top:332px; left:calc(50% - 560px/2 + 4px); overflow:hidden;}
#box8 .slideWrap .swiper-container{width:100%;}
#box8 .slideWrap .swiper-slide img{width:100%;}
#box8 .slideWrap .swiper-slide{position:relative;}

/* 상품 2개 이미지 : 위/아래 카드별 링크 영역 (원데이 특가, 균일가) */
#box6 .prds a.p1, #box6 .prds a.p2, #box8 .swiper-slide a.p1, #box8 .swiper-slide a.p2{position:absolute; left:0; width:100%; height:47.4%; margin:0; z-index:2;}
#box6 .prds a.p1, #box8 .swiper-slide a.p1{top:1%;}
#box6 .prds a.p2, #box8 .swiper-slide a.p2{top:51%;}
#box8 a.arrw{outline:none; width:13px; position:absolute; top:550px; z-index:5; padding:20px; box-sizing:content-box; margin:-20px;}
#box8 a.arrw.prev{left:calc(50% - 13px/2 - 307.5px);}
#box8 a.arrw.next{left:calc(50% - 13px/2 + 311.5px);}
#box8 a.arrw img{transition:transform .2s;}
#box8 a.arrw.prev:hover img{transform:translateX(-4px);}
#box8 a.arrw.next:hover img{transform:translateX(4px);}
#box8 a.btn{width:549px; position:absolute; top:896px; left:calc(50% - 549px/2 + 2.5px);}

/*box9 : 유의사항*/
#box9{width:100%; height:552px; background:#2c2c2c; position:relative; overflow:hidden;}
#box9 .info{width:875px; position:absolute; top:100px; left:calc(50% - 875px/2 - 0.5px);}

/* BASIC css end */