/* 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:938px; margin:97px auto 0px; position:relative;}


/*slider next,prev btn*/
.slideWrap .swiper-container .swiper-button-next, .slideWrap .swiper-container .swiper-button-prev{width:68px; height:79px; top:48%;}
.slideWrap .swiper-container .swiper-button-next{background:url("/design/skinfood/event/DY4_2-arrwR.png") no-repeat center; background-size:cover; right:calc(50% - 539px);}
.slideWrap .swiper-container .swiper-button-prev{background:url("/design/skinfood/event/DY4_2-arrwL.png") no-repeat center; background-size:cover; left:calc(50% - 539px);}
.slideWrap .swiper-button-next:after, .slideWrap .swiper-button-prev:after{display:none;}

#box2Slider .swiper-button-next{background:url("/design/skinfood/event/DY4_2-arrwR.png") no-repeat center; background-size:cover;}
#box2Slider .swiper-button-prev{background:url("/design/skinfood/event/DY4_2-arrwL.png") no-repeat center; background-size:cover;}

#box3Slider .swiper-button-next{background:url("/design/skinfood/event/DY4_3-arrwR.png") no-repeat center; background-size:cover;}
#box3Slider .swiper-button-prev{background:url("/design/skinfood/event/DY4_3-arrwL.png") no-repeat center; background-size:cover;}

#box5Slider .swiper-button-next{background:url("/design/skinfood/event/DY4_5-arrwR.png") no-repeat center; background-size:cover;}
#box5Slider .swiper-button-prev{background:url("/design/skinfood/event/DY4_5-arrwL.png") no-repeat center; background-size:cover;}

#box6Slider .swiper-button-next{background:url("/design/skinfood/event/DY4_6-arrwR.png") no-repeat center; background-size:cover; right:calc(50% - 541px);}
#box6Slider .swiper-button-prev{background:url("/design/skinfood/event/DY4_6-arrwL.png") no-repeat center; background-size:cover; left:calc(50% - 540px);}

/*slider pagination*/
.slideWrap .swiper-container{overflow:visible !important;}
.swiper-container .swiper-pagination{bottom:-60px !important; left:0px !important;}
.swiper-container .swiper-pagination .swiper-pagination-bullet{width:25px; height:25px; border-radius:50%; background:#ffffff; margin:0 6px !important; opacity:1 !important;}

#box2Slider .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background:#ff6600;}
#box3Slider .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background:#ffa800;}
#box5Slider .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background:#000000;}
#box6Slider .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background:#000000;}

#box2Slider .swiper-pagination{bottom:-60px !important;}
#box3Slider .swiper-pagination{bottom:-64px !important;}
#box5Slider .swiper-pagination{bottom:-65px !important;}
#box6Slider .swiper-pagination{bottom:-65px !important;}

/*4 items slider*/
.slideWrap .grid4-slider ul li{position:relative;}
.slideWrap .grid4-slider ul li a{display:block; width:463px; height:49.5%; opacity:0;}
.slideWrap .grid4-slider ul li a:nth-child(2){position:absolute; top:0; left:calc(50% - 470px); background:red;}
.slideWrap .grid4-slider ul li a:nth-child(3){position:absolute; top:0; right:calc(50% - 470px); background:blue;}
.slideWrap .grid4-slider ul li a:nth-child(4){position:absolute; bottom:0px; left:calc(50% - 470px); background:green;}
.slideWrap .grid4-slider ul li a:nth-child(5){position:absolute; bottom:0px; right:calc(50% - 470px); background:orange;}

/*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% - 468px); background:red;}
.slideWrap .grid2-slider ul li a:nth-child(3){position:absolute; top:0; right:calc(50% - 469px); background:blue;}

/*on header fixed*/
#box2.fixed{padding-top:130px;}

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

/*intro*/
#intro{height:700px; background:url("/design/skinfood/event/DY4_1-bg.jpg") no-repeat center; background-size:cover; overflow:hidden; position:relative;}
#intro img{display:block; margin:0 auto;}
#intro .tit{position:relative; width:540px; margin:147px auto 0;}
#intro img.date{position:absolute; top:41px; left:calc(50% - 157px/2 - 455px);}
#intro .prd1{position:absolute; bottom:-485px; left:calc(50% - 382px/2 - 70px); animation:prd1 0.8s ease-in-out forwards; animation-delay:0.2s; -webkit-animation-delay:0.2s;}
#intro img.prd2{position:absolute; top:-250px; right:calc(50% - 431px/2 - 940px); animation:prd2 0.8s ease-in-out forwards; animation-delay:1s; -webkit-animation-delay:1s;}
#intro img.prd3{position:absolute; bottom:-250px; right:calc(50% - 341px/2 - 348px); animation:prd3 0.8s ease-in-out forwards; animation-delay:1.8s; -webkit-animation-delay:1.8s;}
#intro .prd1 img.ico{position:absolute; top:-90px; left:-34px; animation:prd1ico 1s ease-in-out infinite; display:none;}

@keyframes prd1{
    0%{bottom:-485px; left:calc(50% - 382px/2 - 70px);}
    100%{bottom:-75px; left:calc(50% - 382px/2 - 314px);}
}
@keyframes prd2{
    0%{top:-250px; right:calc(50% - 431px/2 - 940px);}
    100%{top:0; right:calc(50% - 431px/2 - 460px);}
}
@keyframes prd3{
    0%{bottom:-250px; right:calc(50% - 341px/2 - 368px);}
    100%{bottom:-15px; right:calc(50% - 341px/2 - 368px);}
}
@keyframes prd1ico{
    0%{top:-90px;}
    50%{top:-110px}
    100%{top:-90px;}
}

/*header*/
#header{text-align:center; display:flex; background:#000000; 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:131px;}
#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;}

/*box2*/
#box2{height:1782px; background:#ffc029;}
#box2 .tit{padding:146px 0 113px;}
#box2 .btns{display:block; position:relative;}
#box2 .btns a.btn2{position:absolute; top:0; left:0; display:none;}
#box2 .btns a.btn2.on{display:block;}
#box2 img.info{margin-top:58px;}

/*box3*/
#box3{height:2307px; background:url("/design/skinfood/event/DY4_3-bg.jpg") no-repeat center; background-size:cover; overflow:hidden;}
#box3 .tit{padding:136px 0 73px;}

#box3 .countdown{text-align:center; padding:0 0 80px;}
#box3 .countdown p{display:inline-block;}
#box3 .countdown p span{display:inline-block; color:#fff; font-weight:600; font-size:68px; padding:30px 0;}
#box3 .countdown p.hours span, #box3 .countdown p.mins span, #box3 .countdown p.secs span{background:rgba(0, 0, 0, 1); width:116px; border-radius:40px; margin:0 5px; line-height:1;}
#box3 .countdown p.dash span{margin:0 5px; color:#000; line-height:1;}

#box3 .slideWrap ul.slideTab{display:flex; flex-wrap:wrap; width:956px; margin:0 auto; border-radius:80px; background:rgba(112,112,112,0.34); margin-bottom:69px;}
#box3 .slideWrap ul.slideTab li{flex-basis:25%; padding:30px 0; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; cursor:pointer; border-radius:80px;}
#box3 .slideWrap ul.slideTab li p{width:100%; text-align:center; font-size:36px; line-height:1; color:#fff;}
#box3 .slideWrap ul.slideTab li p span{display:block; width:100%; text-align:center; font-size:42px; line-height:1; font-weight:bold; padding-top:6px;}

#box3 .slideWrap ul.slideTab li.onn{background:#ffb400; border:3px solid #000;}
#box3 .slideWrap ul.slideTab li.onn p{color:#000;}
#box3 .slideWrap ul.slideTab li.off{background:#737373; border:3px solid #737373;}
#box3 .slideWrap ul.slideTab li.off p{color:#fff;}

#box3Slider{height:1117px;}
#box3Slider ul li a{border-radius:30px; z-index:2;}
#box3Slider ul li.first p.tags > img.tag1{display:block;}
#box3Slider ul li p.tags{display:none; width:942px; height:100%; background:rgba(0,0,0,0.55); position:absolute; top:0; left:calc(50% - 942px/2); border-radius:30px; z-index:3;}
#box3Slider ul li p.tags > img{margin:auto; display:none;}

#box3Slider ul li.blurr > img{filter: blur(4px); -webkit-filter: blur(4px);}
#box3Slider ul li.blurr p.tags{display:flex;}

#box3 .btns a{display:none;}
#box3 .btns a:nth-child(1){display:block;}

/*box4*/
#box4{height:1985px; background:url("/design/skinfood/event/DY4_4-bg.jpg") no-repeat center; background-size:cover; overflow:hidden;}
#box4 .tit{padding:140px 0 88px;}
#box4 .prds{position:relative;}
#box4 .prds a{display:block; width:465px; height:50%; opacity:0;}
#box4 .prds a:nth-child(2){position:absolute; top:0; left:calc(50% - 470px); background:red;}
#box4 .prds a:nth-child(3){position:absolute; top:0; right:calc(50% - 470px); background:blue;}
#box4 .prds a:nth-child(4){position:absolute; bottom:0; left:calc(50% - 470px); background:green;}
#box4 .prds a:nth-child(5){position:absolute; bottom:0; right:calc(50% - 470px); background:orange;}

/*box5*/
#box5{height:1853px; background:url("/design/skinfood/event/DY4_5-bg.jpg") no-repeat center; background-size:cover; overflow:hidden;}
#box5 img.tit{padding:141px 0 102px;}
#box5Slider{margin-top:8px;}

/*box6*/
#box6{height:1859px; background:url("/design/skinfood/event/DY4_6-bg.jpg") no-repeat center; background-size:cover; overflow:hidden;}
#box6 img.tit{padding:152px 0 102px;}

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


/* BASIC css end */