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

#overlay_layer {
  display: none;
}

/* max-width 초기화 */
#layout_body {
  max-width: none !important;
}
.top-area {
  /*max-width: 1140px;*/
  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;
}

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

.btns{display:block; width:990px; margin:115px auto 0px; position:relative;}

/*slider next,prev btn*/
.slideWrap .swiper-container .swiper-button-next, .slideWrap .swiper-container .swiper-button-prev{width:35px; height:55px; top:50%;}
.slideWrap .swiper-container .swiper-button-next{background:url("/design/skinfood/event/DY6_arrwR.png") no-repeat center; background-size:cover; right:calc(50% - 550px);}
.slideWrap .swiper-container .swiper-button-prev{background:url("/design/skinfood/event/DY6_arrwL.png") no-repeat center; background-size:cover; left:calc(50% - 550px);}
.slideWrap .swiper-button-next:after, .slideWrap .swiper-button-prev:after{display:none;}

/*slider pagination*/
.slideWrap .swiper-container{overflow:visible !important;}
.swiper-container .swiper-pagination{bottom:-80px !important; left:0px !important;}
.swiper-container .swiper-pagination .swiper-pagination-bullet{width:20px; height:20px; border-radius:50%; background:#ffffff; margin:0 10px !important; opacity:1 !important;}
.swiper-container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background:#223d72;}

/*2 items slider*/
.slideWrap .grid2-slider ul li{position:relative;}
.slideWrap .grid2-slider ul li a{display:block; width:466px; height:100%; opacity:0;}
.slideWrap .grid2-slider ul li a:nth-child(2){position:absolute; top:0; left:calc(50% - 473px); background:red;}
.slideWrap .grid2-slider ul li a:nth-child(3){position:absolute; top:0; right:calc(50% - 473px); background:blue;}

/*on header fixed*/
#box3.fixed{padding-top:136px;}

/*target point*/
.posrel{position:relative;}
#tar1{position:absolute; top:-105px; left:0; display:block; width:100%; height:0;}
#tar2{position:absolute; top:-105px; left:0; display:block; width:100%; height:0;}
#tar3{position:absolute; top:-105px; left:0; display:block; width:100%; height:0;}
#tar4{position:absolute; top:-105px; left:0; display:block; width:100%; height:0;}

/*intro*/
#intro{height:894px; background:url("/design/skinfood/event/DY6_1-bg.jpg") no-repeat center; background-size:cover; overflow:hidden; position:relative;}
#intro img.date{position:absolute; top:69px; left:calc(50% - 834px/2);}
#intro .titWrap{position:absolute;  top:217px; left:calc(50% - 544px/2 - 50px); width:544px; height:411px; animation: titWrap 0.6s ease-in-out forwards; animation-delay:0s; -webkit-animation-delay:0s; opacity:0;}
#intro .titWrap img.titline{position:absolute; top:0; left:0;}
#intro .titWrap img.titskin{position:absolute; top:62px; left:20px; animation: titSkin 0.6s ease-in-out forwards; animation-delay:0s; -webkit-animation-delay:0s; opacity:0;}
#intro .titWrap img.titfood{position:absolute; bottom:45px; right:5px; animation: titFood 0.6s ease-in-out forwards; animation-delay:0s; -webkit-animation-delay:0s; opacity:0;}
#intro .titWrap img.titday{position:absolute; bottom:-96px; right:-194px; animation: titDay 0.6s ease-in-out forwards; animation-delay:0.6s; -webkit-animation-delay:0.6s; opacity:0;}
#intro img.tree1{position:absolute; bottom:-40px; left:calc(50% - 306px/2 - 400px); animation: tree1 0.6s ease-in-out forwards; animation-delay:1.2s; -webkit-animation-delay:1.2s; opacity:0;}
#intro img.tree2{position:absolute; top:200px; left:calc(50% - 168px/2 + 440px); animation: tree2 0.6s ease-in-out forwards; animation-delay:1.3s; -webkit-animation-delay:1.3s; opacity:0;}
#intro .titWrap img.sale{position:absolute; top:-54px; right:-36px; animation: titSale 1.5s ease-in-out infinite; opacity:0; transition:all .6s ease; -webkit-transition:all .6s ease; -moz-transition:all .6s ease;}
#intro .titWrap img.drop{position:absolute; top:5px; left:-54px; animation: titDrop 1.5s ease-in-out infinite; opacity:0; transition:all .6s ease; -webkit-transition:all .6s ease; -moz-transition:all .6s ease;}
#intro img.prd{position:absolute; bottom:-20px; left:calc(50% - 401px/2 + 356px); animation: titPrd 1.5s ease-in-out infinite; opacity:0; transition:all .6s ease; -webkit-transition:all .6s ease; -moz-transition:all .6s ease;}


@keyframes titWrap{
    0%{top:217px; left:calc(50% - 544px/2 - 50px); opacity:0;}
    100%{top:217px; left:calc(50% - 544px/2 - 0px); opacity:1;}
}

@keyframes titSkin{
    0%{top:62px; left:20px; opacity:0;}
    100%{top:62px; left:90px; opacity:1;}
}

@keyframes titFood{
    0%{bottom:45px; right:5px; opacity:0;}
    100%{bottom:45px; right:75px; opacity:1;}
}

@keyframes titDay{
    0%{bottom:-96px; right:-194px; opacity:0;}
    100%{bottom:-96px; right:-94px; opacity:1;}
}

@keyframes tree1{
    0%{bottom:-40px; opacity:0;}
    100%{bottom:-20px; opacity:1;}
}

@keyframes tree2{
    0%{top:200px; opacity:0;}
    100%{top:210px; opacity:1;}
}

@keyframes titSale{
    0%{top:-54px;}
    50%{top:-64px;}
    100%{top:-54px;}
}

@keyframes titDrop{
    0%{top:5px;}
    50%{top:-5px;}
    100%{top:5px;}
}

@keyframes titPrd{
    0%{bottom:-20px;}
    50%{bottom:-10px;}
    100%{bottom:-20px;}
}


/*header*/
#header{text-align:center; display:flex; background:#56d3de; width:100%; justify-content:center; position:static; opacity:1;}
#header.fixed{position:fixed; top:0; left:0; z-index:9999;}
#header a.menu{position:relative;}
#header a.menu img{height:137px;}
#header a.menu img:nth-child(2){position:absolute; top:0; left:0; opacity:0;}
#header a.menu.select img:nth-child(1){opacity:0;}
#header a.menu.select img:nth-child(2){opacity:1;}


/*box3*/
#box3{height:1370px; background:url("/design/skinfood/event/DY6_3-bg.jpg") no-repeat center bottom; background-size:cover; overflow:hidden; position:relative;}
#box3 img.tit{padding:150px 0 36px;}
#box3 .slideWrap #box3Slider{width:1200px; margin:0 auto; overflow:hidden !important;}
#box3 .slideWrap #box3Slider ul li{position:relative; height:570px; opacity:0;}
#box3 .slideWrap #box3Slider ul li img{width:100%; position:absolute; top:0; left:0;}
#box3 .slideWrap #box3Slider ul li.swiper-slide.swiper-slide-active{transform:scale(1.5); opacity:1; transition:all .3s ease; -webkit-transition:all .3s ease; -moz-transition:all .3s ease;}
#box3 .slideWrap #box3Slider ul li.swiper-slide.swiper-slide-active img{top:130px;}
#box3 .slideWrap #box3Slider ul li.swiper-slide.swiper-slide-prev,
#box3 .slideWrap #box3Slider ul li.swiper-slide.swiper-slide-next{opacity:1; transition:all .3s ease; -webkit-transition:all .3s ease; -moz-transition:all .3s ease;}
#box3 img.info{margin-top:0px; position:absolute; bottom:260px; left:calc(50% - 789px/2);}


/*box4*/
#box4{height:2227px; background:url("/design/skinfood/event/DY6_4-bg.jpg") no-repeat right center; background-size:cover; overflow:hidden; position:relative;}
#box4 img.tit{padding:80px 0 58px;}
#box4 .icoWrap{width:488px; height:260px; margin:0 auto; position:relative;}
#box4 .icoWrap .ico{position:absolute; top:0; left:0; z-index:2;}
#box4 .icoWrap .leaf{position:absolute; top:-50px; left:-50px; z-index:1;}
#box4 .PrdWrap .prd a:nth-child(2){position:absolute; top:0;}
#box4 .prdWrap{position:relative; margin-top:-20px;}
#box4 .prdWrap a{display:block; width:494px; height:590px; opacity:0;}
#box4 .prdWrap a:nth-child(2){position:absolute; top:76px; left:calc(50% - 495px); background:red;}
#box4 .prdWrap a:nth-child(3){position:absolute; top:76px; right:calc(50% - 495px); background:blue;}
#box4 .prdWrap a:nth-child(4){position:absolute; bottom:126px; left:calc(50% - 495px); height:610px; background:green;}
#box4 .prdWrap a:nth-child(5){position:absolute; bottom:126px; right:calc(50% - 495px); height:610px; background:orange;}
#box4 .btns{margin:0; position:absolute; bottom:160px; left:calc(50% - 990px/2);}

/*box5*/
#box5{height:2553px; background:url("/design/skinfood/event/DY6_5-bg.jpg") no-repeat center top; background-size:cover; overflow:hidden;}
#box5 img.tit{padding:167px 0 62px;}

#box5 .slideWrap ul.slideTab{width:932px; height:260px; margin:0 auto; position:relative;}
#box5 .slideWrap ul.slideTab::after{content:""; display:block; width:110px; height:112px; background:url("/design/skinfood/event/DY6_5-tabdeco.png") no-repeat center; background-size:cover; position:absolute; top:-24px; right:-44px; z-index:10;}
#box5 .slideWrap ul.slideTab li{position:absolute; top:0; left:0; cursor:pointer;}
#box5 .slideWrap ul.slideTab li:nth-child(1){left:0; z-index:1;}
#box5 .slideWrap ul.slideTab li:nth-child(2){left:227px; z-index:2;}
#box5 .slideWrap ul.slideTab li:nth-child(3){left:445px; z-index:3;}
#box5 .slideWrap ul.slideTab li:nth-child(4){left:673px; z-index:4;}
#box5 .slideWrap ul.slideTab li img.on{position:absolute; top:0; left:0; opacity:0;}
#box5 .slideWrap ul.slideTab li img.off{position:absolute; top:0; left:0;}
#box5 .slideWrap ul.slideTab li:nth-child(1) img.on{opacity:1;}

#box5Slider{position:relative; margin:88px auto 0;}
#box5Slider::before{content:""; display:block; background:url("/design/skinfood/event/DY6_5-back.png") no-repeat center; background-size:cover; width:1294px; height:1600px; position:absolute; top:-88px; left:calc(50% - 1294px/2);}
#box5Slider::after{content:""; display:block; background:url("/design/skinfood/event/DY6_5-deco.png") no-repeat center; background-size:cover; width:196px; height:232px; position:absolute; top:-86px; left:calc(50% - 196px/2 + 478px); z-index:5;}
#box5Slider ul li{position:relative;}
#box5Slider ul li a{display:block; width:993px; height:568px; opacity:0;}
#box5Slider ul li a:nth-child(2){position:absolute; top:-10px; left:calc(50% - 993px/2); background:red;}
#box5Slider ul li a:nth-child(3){width:496px; height:824px; position:absolute; bottom:-19px; right:calc(50% - 496px); background:blue;}
#box5Slider ul li a:nth-child(4){width:496px; height:824px; position:absolute; bottom:-19px; left:calc(50% - 496px); background:green;}

/*box6*/
#box6{height:1636px; background:url("/design/skinfood/event/DY6_6-bg2.jpg") no-repeat center top; background-size:cover; overflow:hidden;}
#box6 img.tit{padding:162px 0 114px;}
#box6Slider{position:relative; margin:0px auto;}
#box6Slider::before{content:""; display:block; background:url("/design/skinfood/event/DY6_6-back.png") no-repeat center; background-size:cover; width:1274px; height:1003px; position:absolute; top:-88px; left:calc(50% - 1274px/2);}

/*box7*/
#box7{height:1665px; background:url("/design/skinfood/event/DY6_7-bg2.jpg") no-repeat center top; background-size:cover; overflow:hidden;}
#box7 img.tit{padding:150px 0 120px;}
#box7Slider{position:relative; margin:0px auto;}
#box7Slider::before{content:""; display:block; background:url("/design/skinfood/event/DY6_7-back.png") no-repeat center; background-size:cover; width:1269px; height:1002px; position:absolute; top:-88px; left:calc(50% - 1269px/2);}

/*box8*/
#box8{margin-top:-1.2vw;}
#box8 a img{width:100%;}

/*caution*/
#caution{padding:85px 0 80px; position:relative; background:#0e0e0e;}
#caution img{display:block; margin:0 auto;}


/* BASIC css end */