/* 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;
}

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

/*slider next,prev btn*/
.slideWrap .swiper-button-next, .slideWrap .swiper-button-prev{width:48px; height:73px; top:49%;}
.slideWrap .swiper-button-next:after, .slideWrap .swiper-button-prev:after{display:none;}

/*slider pagination*/
.slideWrap{position:relative;}
.slideWrap .swiper-pagination{width:100%; bottom:-75px !important; left:0px !important;}
.slideWrap .swiper-pagination .swiper-pagination-bullet{width:24px; height:24px; border-radius:50%; background:#fff; border:1px solid #966c6c; margin:0 7px !important; opacity:1 !important;}
.slideWrap .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background:#966c6c; opacity:1 !important;}

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

/*공통*/
.titWrap{display:block; width:984px; margin:0 auto;}
.titWrap img{margin:0;}

/*on header fixed*/
#intro.fixed{margin-bottom:116px;}

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

/*header*/
#header{text-align:center; display:flex; overflow:hidden; position:relative; justify-content:center; position:static; opacity:1; height:117px; width:100%; background:#5580e2;}
#header.fixed{position:fixed; top:0; left:0; z-index:9999;}
#header a.menu{position:relative;}
#header a.menu img {height:117px;}
#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;}

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

/*intro*/
#intro .slideWrap #box1Slider ul.swiper-wrapper > li{width:100%; height:1830px; position:relative;}
#intro .slideWrap #box1Slider ul.swiper-wrapper > li:nth-child(1){background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY7_1-slide1-bg.jpg") no-repeat center / cover;}
#intro .slideWrap #box1Slider ul.swiper-wrapper > li:nth-child(2){background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY7_1-slide2-bg.jpg") no-repeat center / cover;}
#intro .slideWrap #box1Slider ul.swiper-wrapper > li:nth-child(3){background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY7_1-slide3-bg.jpg") no-repeat center / cover;}

#intro .slideWrap #box1Slider ul.swiper-wrapper > li > a{display:block; width:100%; height:100%; position:absolute; top:0; left:0; background:rgba(255,231,99,0); z-index:3;}

#intro .slideWrap #box1Slider ul.swiper-wrapper > li:nth-child(1) .tit{width:819px; position:absolute; top:123px; left:calc(50% - 819px/2);}
#intro .slideWrap #box1Slider ul.swiper-wrapper > li:nth-child(1) .date{width:499px; position:absolute; top:604px; left:calc(50% - 499px/2);}

#intro .slideWrap #box1Slider ul.swiper-wrapper > li:nth-child(1) .bubble{width:377px; position:absolute; top:832px; left:calc(50% - 377px/2 + 205px);}
#intro .slideWrap #box1Slider ul.swiper-wrapper > li:nth-child(1) .blink{width:648px; position:absolute; top:980px; left:calc(50% - 648px/2 - 184px);}
#intro .slideWrap #box1Slider ul.swiper-wrapper > li:nth-child(1) .prd{width:490px; position:absolute; top:849px; left:calc(50% - 490px/2 - 179px); z-index:2;}
#intro .slideWrap #box1Slider ul.swiper-wrapper > li:nth-child(1) .game{width:895px; position:absolute; top:1206px; left:calc(50% - 895px/2 - 20px);}
#intro .slideWrap #box1Slider ul.swiper-wrapper > li:nth-child(1) .tag{width:119px; position:absolute; top:1282px; left:calc(50% - 119px/2 + 270px);}

#intro .slideWrap #box1Slider ul.swiper-wrapper > li:nth-child(2) .tit{width:819px; position:absolute; top:123px; left:calc(50% - 819px/2);}
#intro .slideWrap #box1Slider ul.swiper-wrapper > li:nth-child(2) .date{width:499px; position:absolute; top:604px; left:calc(50% - 499px/2);}
#intro .slideWrap #box1Slider ul.swiper-wrapper > li:nth-child(2) .bubble{width:377px; position:absolute; top:832px; left:calc(50% - 377px/2 + 205px);}
#intro .slideWrap #box1Slider ul.swiper-wrapper > li:nth-child(2) .blink{width:569px; position:absolute; top:1001px; left:calc(50% - 569px/2 - 150px);}
#intro .slideWrap #box1Slider ul.swiper-wrapper > li:nth-child(2) .prd{width:421px; position:absolute; top:796px; left:calc(50% - 421px/2 - 150px); z-index:2;}
#intro .slideWrap #box1Slider ul.swiper-wrapper > li:nth-child(2) .game{width:896px; position:absolute; top:1206px; left:calc(50% - 896px/2 - 20px);}
#intro .slideWrap #box1Slider ul.swiper-wrapper > li:nth-child(2) .tag{width:119px; position:absolute; top:1282px; left:calc(50% - 119px/2 + 270px);}

#intro .slideWrap #box1Slider ul.swiper-wrapper > li:nth-child(3) .tit{width:888px; position:absolute; top:138px; left:calc(50% - 888px/2);}
#intro .slideWrap #box1Slider ul.swiper-wrapper > li:nth-child(3) .price{width:706px; position:absolute; top:762px; left:calc(50% - 706px/2);}
#intro .slideWrap #box1Slider ul.swiper-wrapper > li:nth-child(3) .cherry{width:132px; position:absolute; top:881px; left:calc(50% - 132px/2 - 540px);}
#intro .slideWrap #box1Slider ul.swiper-wrapper > li:nth-child(3) .dice{width:159px; position:absolute; top:1166px; left:calc(50% - 159px/2 + 460px);}
#intro .slideWrap #box1Slider ul.swiper-wrapper > li:nth-child(3) .tag{width:695px; position:absolute; top:1461px; left:calc(50% - 695px/2);}

#intro .slideWrap #box1Slider ul.swiper-wrapper > li:nth-child(3) .slothWrap{width:924px; position:absolute; top:996px; left:calc(50% - 924px/2);}
#intro .slideWrap #box1Slider ul.swiper-wrapper > li:nth-child(3) .slothWrap .machine{width:924px; height:228px; background:rgba(123,200,12,0); position:relative;}
#intro .slideWrap #box1Slider ul.swiper-wrapper > li:nth-child(3) .slothWrap .machine .body{width:882px; position:absolute; bottom:0; left:0;}
#intro .slideWrap #box1Slider ul.swiper-wrapper > li:nth-child(3) .slothWrap .machine .hand{width:43px; position:absolute; top:0; right:0;}

#intro .slideWrap #box1Slider ul.swiper-wrapper > li:nth-child(3) .slothWrap ul.sloths{width:924px; height:186px; position:absolute; top:42px; left:0; z-index:2;}
#intro .slideWrap #box1Slider ul.swiper-wrapper > li:nth-child(3) .slothWrap ul.sloths > li{width:142px; height:186px; font-size:0; overflow:hidden;}
#intro .slideWrap #box1Slider ul.swiper-wrapper > li:nth-child(3) .slothWrap ul.sloths > li:nth-child(1){position:absolute; top:0; left:calc(50% - 142px/2 - 334px); background:rgba(255,255,12,0);}
#intro .slideWrap #box1Slider ul.swiper-wrapper > li:nth-child(3) .slothWrap ul.sloths > li:nth-child(2){position:absolute; top:0; left:calc(50% - 142px/2 - 178px); background:rgba(55,255,123,0);}
#intro .slideWrap #box1Slider ul.swiper-wrapper > li:nth-child(3) .slothWrap ul.sloths > li:nth-child(3){position:absolute; top:0; left:calc(50% - 142px/2 - 21px); background:rgba(100,25,255,0);}
#intro .slideWrap #box1Slider ul.swiper-wrapper > li:nth-child(3) .slothWrap ul.sloths > li:nth-child(4){position:absolute; top:0; left:calc(50% - 142px/2 + 135px); background:rgba(132,100,110,0);}
#intro .slideWrap #box1Slider ul.swiper-wrapper > li:nth-child(3) .slothWrap ul.sloths > li:nth-child(5){position:absolute; top:0; left:calc(50% - 142px/2 + 291px); background:rgba(255,55,120,0);}

#intro .slideWrap #box1Slider ul.swiper-wrapper > li:nth-child(3) .slothWrap ul.sloths > li img{display:block; width:100%;}
#intro .slideWrap #box1Slider ul.swiper-wrapper > li:nth-child(3) .slothWrap ul.sloths > li:nth-child(1) img{position:absolute; top:0; left:0;}
#intro .slideWrap #box1Slider ul.swiper-wrapper > li:nth-child(3) .slothWrap ul.sloths > li:nth-child(2) img{position:absolute; top:0; left:0;}
#intro .slideWrap #box1Slider ul.swiper-wrapper > li:nth-child(3) .slothWrap ul.sloths > li:nth-child(3) img{position:absolute; top:0; left:0;}
#intro .slideWrap #box1Slider ul.swiper-wrapper > li:nth-child(3) .slothWrap ul.sloths > li:nth-child(4) img{position:absolute; top:0; left:0;}
#intro .slideWrap #box1Slider ul.swiper-wrapper > li:nth-child(3) .slothWrap ul.sloths > li:nth-child(5) img{position:absolute; top:0; left:0;}


/*box3*/
#box3{height:4005px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY7_3-bg.jpg") no-repeat center top / cover; position:relative; padding:52px 0 0; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
#box3 .titWrap{padding:147px 0 57px;}
#box3 .titWrap .tit1{width:567px;}
#box3 .titWrap .tit2{width:567px;}
#box3 .titWrap .tit3{width:906px;}

#box3 a{width:984px; display:block; margin:0 auto;}
#box3 a img{width:100%;}

/*box4*/
#box4{height:2690px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY7_4-bg.jpg") no-repeat center / cover; position:relative; padding:47px 0 0; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
#box4 .titWrap{padding:150px 0 57px;}
#box4 .titWrap .tit1{width:642px;}
#box4 .titWrap .tit2{width:528px;}

#box4 .slideWrap{width:100%; position:relative;}
#box4 .slideWrap #box4Slider {width:1000px; z-index:10;}
#box4 .slideWrap #box4Slider ul > li{width:1000px; height:1000px; display:flex;}
#box4 .slideWrap #box4Slider ul > li a{display:block; margin:auto; position:relative;}
#box4 .slideWrap #box4Slider ul > li a img{width:100%;}
#box4 .slideWrap #box4Slider ul > li a video{position:absolute; top:0; left:0; z-index:2;}

#box4 .slideWrap .swiper-button-next{width:54px; height:66px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY7_4-cnt1-arrwR.png") no-repeat center; background-size:cover; left:calc(50% - 54px / 2 + 522px); top: 50%; opacity:1;}
#box4 .slideWrap .swiper-button-prev{width:54px; height:66px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY7_4-cnt1-arrwL.png") no-repeat center; background-size:cover; left:calc(50% - 54px / 2 - 522px); top: 50%; opacity:1;}

/*box5*/
#box5{height:1830px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY7_1-slide3-bg.jpg") no-repeat center / cover; position:relative;}

#box5 .tit{width:888px; position:absolute; top:138px; left:calc(50% - 888px/2);}
#box5 .price{width:706px; position:absolute; top:762px; left:calc(50% - 706px/2);}
#box5 .cherry{width:132px; position:absolute; top:881px; left:calc(50% - 132px/2 - 540px);}
#box5 .dice{width:159px; position:absolute; top:1166px; left:calc(50% - 159px/2 + 460px);}
#box5 .tag{width:695px; position:absolute; top:1461px; left:calc(50% - 695px/2);}

#box5 .slothWrap{width:924px; position:absolute; top:996px; left:calc(50% - 924px/2);}
#box5 .slothWrap .machine{width:924px; height:228px; background:rgba(123,200,12,0); position:relative;}
#box5 .slothWrap .machine .body{width:882px; position:absolute; bottom:0; left:0;}
#box5 .slothWrap .machine .hand{width:43px; position:absolute; top:0; right:0;}

#box5 .slothWrap ul.sloths{width:924px; height:186px; position:absolute; top:42px; left:0; z-index:2;}
#box5 .slothWrap ul.sloths > li{width:142px; height:186px; font-size:0; overflow:hidden;}
#box5 .slothWrap ul.sloths > li:nth-child(1){position:absolute; top:0; left:calc(50% - 142px/2 - 334px); background:rgba(255,255,12,0);}
#box5 .slothWrap ul.sloths > li:nth-child(2){position:absolute; top:0; left:calc(50% - 142px/2 - 178px); background:rgba(55,255,123,0);}
#box5 .slothWrap ul.sloths > li:nth-child(3){position:absolute; top:0; left:calc(50% - 142px/2 - 21px); background:rgba(100,25,255,0);}
#box5 .slothWrap ul.sloths > li:nth-child(4){position:absolute; top:0; left:calc(50% - 142px/2 + 135px); background:rgba(132,100,110,0);}
#box5 .slothWrap ul.sloths > li:nth-child(5){position:absolute; top:0; left:calc(50% - 142px/2 + 291px); background:rgba(255,55,120,0);}

#box5 .slothWrap ul.sloths > li img{display:block; width:100%;}
#box5 .slothWrap ul.sloths > li:nth-child(1) img{position:absolute; top:0; left:0;}
#box5 .slothWrap ul.sloths > li:nth-child(2) img{position:absolute; top:0; left:0;}
#box5 .slothWrap ul.sloths > li:nth-child(3) img{position:absolute; top:0; left:0;}
#box5 .slothWrap ul.sloths > li:nth-child(4) img{position:absolute; top:0; left:0;}
#box5 .slothWrap ul.sloths > li:nth-child(5) img{position:absolute; top:0; left:0;}

/*box6*/
#box6{height:3301px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY7_6-bg.jpg") no-repeat center top / cover; position:relative; overflow:hidden; padding:54px 0 0; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
#box6 .titWrap{padding:147px 0 60px;}
#box6 .titWrap .tit1{width:605px;}
#box6 .titWrap .tit2{width:637px;}
#box6 .titWrap .tit3{width:637px;}

#box6 .slideWrap #box6SliderB{margin-top:80px;}
#box6 .slideWrap #box6SliderA ul.swiper-wrapper,
#box6 .slideWrap #box6SliderB ul.swiper-wrapper{transition: all 2s linear; -webkit-transition: all 2s linear; -moz-transition: all 2s linear;}
#box6 .slideWrap #box6SliderA ul.swiper-wrapper > li,
#box6 .slideWrap #box6SliderB ul.swiper-wrapper > li{width:559px;}
#box6 .slideWrap #box6SliderA ul.swiper-wrapper > li > a,
#box6 .slideWrap #box6SliderB ul.swiper-wrapper > li > a{display:block;}
#box6 .slideWrap #box6SliderA ul.swiper-wrapper > li > a img,
#box6 .slideWrap #box6SliderB ul.swiper-wrapper > li > a img{display:block; width:100%;}

#box6 > a{display:block; width:984px; margin:0 auto;}
#box6 > a img{width:100%;}

#box6 .btns{padding:101px 0 0;}
#box6 .btns a{display:block; margin:49px auto 0; width:908px;}
#box6 .btns a img{width:100%;}

/*caution*/
#caution{background:#000;}
#caution img{margin:auto; padding:160px 0;}


@keyframes slothRoll5A{
    0%{top:0;}
    80%{top:-8726px;}
    100%{top:-8726px;}
}

@keyframes slothRoll3A{
    0%{top:0;}
    80%{top:-8540px;}
    100%{top:-8540px;}
}

@keyframes slothRoll1A{
    0%{top:0;}
    80%{top:-8354px;}
    100%{top:-8354px;}
}

@keyframes slothRoll4A{
    0%{top:0;}
    80%{top:-8168px;}
    100%{top:-8168px;}
}

@keyframes slothRoll2A{
    0%{top:0;}
    80%{top:-7982px;}
    100%{top:-7982px;}
}

@keyframes slothRoll5B{
    0%{top:0;}
    80%{top:-7796px;}
    100%{top:-7796px;}
}

@keyframes slothRoll3B{
    0%{top:0;}
    80%{top:-7610px;}
    100%{top:-7610px;}
}

@keyframes slothRoll1B{
    0%{top:0;}
    80%{top:-7424px;}
    100%{top:-7424px;}
}

@keyframes slothRoll4B{
    0%{top:0;}
    80%{top:-7238px;}
    100%{top:-7238px;}
}

@keyframes slothRoll2B{
    0%{top:0;}
    80%{top:-7052px;}
    100%{top:-7052px;}
}


/* BASIC css end */