/* 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;
}
 
.wrap a{display:block; margin:0 auto;}

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

/*slider next,prev btn*/
.slideWrap .swiper-button-next, .slideWrap .swiper-button-prev, .swiper-button-next, .swiper-button-prev{width:43px; height:50px; top:50%;}
.slideWrap .swiper-button-next, .swiper-button-next{background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY7_arrwR.png") no-repeat top center / cover; right:-82px;}
.slideWrap .swiper-button-prev, .swiper-button-prev{background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY7_arrwL.png") no-repeat top center / cover; left:-82px;}
.slideWrap .swiper-button-next:after, .slideWrap .swiper-button-prev:after,
.swiper-button-next:after, .swiper-button-prev:after{display:none;}

/*slider pagination*/
.slideWrap{position:relative;}
.slideWrap .swiper-pagination, .swiper-pagination{width:100%; top:0px !important; left:0px !important;}
.slideWrap .swiper-pagination .swiper-pagination-bullet, .swiper-pagination .swiper-pagination-bullet{width:20px; height:20px; background:#fff; border:none; margin:0 9px !important; opacity:1 !important;}
.slideWrap .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active, 
.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{opacity:1 !important; background:#000;}


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

/*target point*/
.posrel{position:relative;}
#tar1{position:absolute; top:-156px; left:0; display:block; width:100%; height:0;}
#tar2{position:absolute; top:-154px; left:0; display:block; width:100%; height:0;}
#tar3{position:absolute; top:-154px; left:0; display:block; width:100%; height:0;}
#tar4{position:absolute; top:-154px; 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:100px;*/ height:60px; width:100%; background:#add3f8;}
#header.fixed{position:fixed; top:96px; left:0; z-index:9999;}
#header a.menu{position:relative; margin:0;}
#header a.menu img {/*height:100px;*/ height:60px;}
#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;}
#header a.menu:hover img:nth-child(2){opacity:1;}

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

.sizedown{transform: scale(0.5); transform-origin: top left; width: 200%;}

/*intro*/
#intro{width:100%; /*height:1062px;*/ height:531px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY7_1-bg.jpg") no-repeat center / cover; position:relative; overflow:hidden;}
#intro .title{width:791px; position:absolute; top:126px; left:calc(50% - 791px/2); z-index:2;}
#intro .info{width:299px; position:absolute; top:882px; left:calc(50% - 299px/2);}
#intro .deco{width:1300px; position:absolute; top:117px; left:calc(50% - 1300px/2); z-index:0;}

#intro .preview1{width:479px; position:absolute; top:406px; left:calc(50% - 479px/2); z-index:1; display:none;}
#intro .preview2{width:479px; position:absolute; top:406px; left:calc(50% - 479px/2); z-index:1; display:none;}

#intro .ice1front{width:481px; position:absolute; top:407px; left:calc(50% - 481px/2); z-index:4; /*mix-blend-mode:screen;*/}
#intro .ice1back{width:481px; position:absolute; top:407px; left:calc(50% - 481px/2); z-index:1;}

#intro .prd1{width:372px; position:absolute; top:464px; left:calc(50% - 372px/2); animation:prdMove 10s ease-in-out infinite; display:none;}
#intro .prd2{width:384px; position:absolute; top:464px; left:calc(50% - 384px/2); animation:prdMove 10s ease-in-out infinite; display:none;}
#intro .prd3{width:377px; position:absolute; top:464px; left:calc(50% - 377px/2); animation:prdMove 10s ease-in-out infinite; display:none;}

#intro .ices{width:479px; height:458px; position:absolute; top:406px; left:calc(50% - 479px/2);}
#intro .ices .ps{position:absolute; top:0; left:0; z-index:5; mix-blend-mode:screen;}


#intro .ice1 {
    position: relative;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease;
}

#intro .ice1 .ps {
    position: absolute;
    display: block;
    opacity: 1;

    transform:
        translate3d(0, 0, 0)
        rotate(0deg)
        scale(1);

    transition:
        transform 2.5s cubic-bezier(.22, .61, .36, 1),
        opacity .5s ease 2s;

    will-change: transform, opacity;
}

#intro .ice1.show {
    opacity: 1;
    visibility: visible;
}

#intro .ice1.show.hide {
    opacity: 0;
    visibility: visible;
    transition: opacity .45s ease;
}

#intro .ice1 .ps.scatter {
    opacity: 0;
}

#intro .ice1 .p1{width:120px; top:38px; left:calc(50% - 120px/2 + 178px);}
#intro .ice1 .p2{width:204px; top:3px; left:calc(50% - 204px/2 + 46px);}
#intro .ice1 .p3{width:168px; top:0; left:calc(50% - 168px/2 - 95px);}
#intro .ice1 .p4{width:138px; top:33px; left:calc(50% - 138px/2 - 149px);}
#intro .ice1 .p5{width:237px; top:20px; left:calc(50% - 237px/2 - 46px); }
#intro .ice1 .p6{width:153px; top:179px; left:calc(50% - 153px/2 - 163px);}
#intro .ice1 .p7{width:191px; top:254px; left:calc(50% - 191px/2 - 133px);}
#intro .ice1 .p8{width:189px; top:244px; left:calc(50% - 189px/2 + 10px);}
#intro .ice1 .p9{width:234px; top:44px; left:calc(50% - 234px/2 + 93px);}
#intro .ice1 .p10{width:116px; top:97px; left:calc(50% - 116px/2 + 182px);}

@keyframes iceWrapShow {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes iceWrapHide {
    0% {opacity: 1;}
    100% {opacity: 0; visibility: hidden;}
}

@keyframes icePieceScatter {
    0% {opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg) scale(1);}
    70% {opacity: 1;}
    100% {opacity: 0; transform: translate3d(var(--move-x), var(--move-y), 0) rotate(var(--rotate)) scale(var(--scale));}
}

@keyframes prdMove {
    0% {transform:rotate(0deg);}
    50% {transform:rotate(5deg);}
    100% {transform:rotate(0deg);}
}

/*box2*/
#box2{width:100%; /*height:2403px;*/ height:1202px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY7_2-bg.jpg") no-repeat center / cover; position:relative; overflow:hidden;}
#box2 .title{width:425px; position:absolute; top:148px; left:calc(50% - 425px/2);}
#box2 .coupon{width:968px; position:absolute; top:205px; left:calc(50% - 968px/2);}
#box2 a.btn{width:755px; position:absolute; top:803px; left:calc(50% - 755px/2); z-index:2;}
#box2 a.btn > img{width:100%;}
#box2 .ice{width:1787px; position:absolute; top:26px; left:calc(50% - 1787px/2 - 110px); z-index:1;}
#box2 .subtitle{width:343px; position:absolute; top:1108px; left:calc(50% - 343px/2);}

#box2 .cnts{width:365px; position:absolute; top:1221px; left:calc(50% - 365px/2);}
#box2 .cnt1{left:calc(50% - 365px/2 - 190px);}
#box2 .cnt2{left:calc(50% - 365px/2 + 190px);}
#box2 .cnt3{top:1740px; left:calc(50% - 365px/2 - 190px);}
#box2 .cnt4{top:1740px; left:calc(50% - 365px/2 + 190px);}

/*box3*/
#box3{width:100%; /*height:1781px;*/ height:891px; background:#fff; position:relative; overflow:hidden;}
#box3 .title{width:426px; position:absolute; top:202px; left:calc(50% - 426px/2);}

#box3 .slideWrap{width:966px; height:997px; position:absolute; top:403px; left:calc(50% - 966px/2);}
#box3 .slideWrap #box3Slider{}
#box3 .slideWrap #box3Slider .swiper-container{}
#box3 .slideWrap #box3Slider .swiper-container ul > li{}
#box3 .slideWrap #box3Slider .swiper-container ul > li a{}
#box3 .slideWrap #box3Slider .swiper-container ul > li a img{width:100%;}

#box3 .slideWrap #box3Slider .pag_box3Slider{top:565px !important;}
#box3 .slideWrap #box3Slider .pag_box3Slider .swiper-pagination-bullet{background:#f5f5f5;}
#box3 .slideWrap #box3Slider .pag_box3Slider .swiper-pagination-bullet.swiper-pagination-bullet-active{background:#ff9099;}

/*box4*/
#box4{width:100%; /*height:2130px;*/ height:1065px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY7_4-bg.jpg") no-repeat center / cover; position:relative; overflow:hidden;}
#box4 ul.tabWrap{width:707px; display:flex; flex-wrap:wrap; justify-content:space-between; position:absolute; top:212px; left:calc(50% - 707px/2);}
#box4 ul.tabWrap > li{width:calc(50% - 9px); cursor:pointer; position:relative;}
#box4 ul.tabWrap > li:nth-child(1),
#box4 ul.tabWrap > li:nth-child(2){margin-bottom:19px;}
#box4 ul.tabWrap > li .on{opacity:0;}
#box4 ul.tabWrap > li.select .on{opacity:1;}
#box4 ul.tabWrap > li img{width:100%:}
#box4 ul.tabWrap > li img.on{position:absolute; top:0; left:0;}

#box4 .slideWrap{width:1146px; position:absolute; top:622px; left:calc(50% - 1146px/2);}
#box4 .slideWrap .box4Sliders{width:100%; position:absolute; top:0; left:0; z-index:1; opacity:0;}
#box4 .slideWrap .box4Sliders.sliderOn{z-index:2; opacity:1;}

#box4 .slideWrap .box4Sliders .swiper-container{}
#box4 .slideWrap .box4Sliders .swiper-container ul > li{}
#box4 .slideWrap .box4Sliders .swiper-container ul > li a{}
#box4 .slideWrap .box4Sliders .swiper-container ul > li a img{width:100%;}

#box4 .slideWrap .box4Sliders .subtitle{margin-bottom:75px;}
#box4 .slideWrap #box4Slider1 .subtitle{width:256px;}
#box4 .slideWrap #box4Slider2 .subtitle{width:314px;}
#box4 .slideWrap #box4Slider3 .subtitle{width:264px;}
#box4 .slideWrap #box4Slider4 .subtitle{width:491px;}

#box4 .slideWrap .swiper-button-next, 
#box4 .slideWrap .swiper-button-prev{top:58%;}

#box4 a.btn{width:1149px; height:81px; position:absolute; top:1825px; left:calc(50% - 1149px/2);}
#box4 a.btn > img{width:100%;}

/*box5*/
#box5{width:100%; /*height:2380px;*/ height:1190px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY7_5-bg.jpg") no-repeat center / cover; position:relative; overflow:hidden;}
#box5 .title{width:575px; position:absolute; top:230px; left:calc(50% - 575px/2);}
#box5 ul.tabWrap{width:1050px; position:absolute; top:438px; left:calc(50% - 1050px/2); display:flex; flex-wrap:wrap; justify-content:space-between;}
#box5 ul.tabWrap > li{cursor:pointer;}
#box5 ul.tabWrap > li > img{width:100%;}

#box5 .subtitle{width:460px; position:absolute; top:750px; left:calc(50% - 460px/2);}
#box5 #box5Slider{width:973px; height:1131px; position:absolute; top:1070px; left:calc(50% - 973px/2);}
#box5 #box5Slider .swiper-container{}
#box5 #box5Slider .swiper-container ul > li{}
#box5 #box5Slider .swiper-container ul > li a{}
#box5 #box5Slider .swiper-container ul > li a img{width:100%;}

#box5 #box5Slider .pag_box5Slider{top:565px !important;}
#box5 #box5Slider .pag_box5Slider .swiper-pagination-bullet{background:#c6ddd7;}
#box5 #box5Slider .pag_box5Slider .swiper-pagination-bullet.swiper-pagination-bullet-active{background:#6acfb8;}

/*box6*/
#box6{width:100%; /*height:1752px;*/ height:876px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY7_6-bg.jpg") no-repeat center / cover; position:relative; overflow:hidden;}
#box6 .title{width:570px; position:absolute; top:173px; left:calc(50% - 570px/2);}
#box6 #box6Slider{width:973px; height:1135px; position:absolute; top:488px; left:calc(50% - 973px/2);}
#box6 #box6Slider .swiper-container{}
#box6 #box6Slider .swiper-container ul > li{}
#box6 #box6Slider .swiper-container ul > li a{}
#box6 #box6Slider .swiper-container ul > li a img{width:100%;}

#box6 #box6Slider .pag_box6Slider{top:565px !important;}
#box6 #box6Slider .pag_box6Slider .swiper-pagination-bullet{background:#dbe2e7;}
#box6 #box6Slider .pag_box6Slider .swiper-pagination-bullet.swiper-pagination-bullet-active{background:#95cbfb;}

/*box7*/
#box7{width:100%; /*height:1853px;*/ height:927px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY7_7-bg.jpg") no-repeat center / cover; position:relative; overflow:hidden;}
#box7 .title{width:635px; position:absolute; top:191px; left:calc(50% - 635px/2);}
#box7 #box7Slider{width:973px; height:1131px; position:absolute; top:488px; left:calc(50% - 973px/2);}
#box7 #box7Slider .swiper-container{}
#box7 #box7Slider .swiper-container ul > li{}
#box7 #box7Slider .swiper-container ul > li a{}
#box7 #box7Slider .swiper-container ul > li a img{width:100%;}

#box7 #box7Slider .pag_box7Slider{top:565px !important;}
#box7 #box7Slider .pag_box7Slider .swiper-pagination-bullet{background:#e7dbe5;}
#box7 #box7Slider .pag_box7Slider .swiper-pagination-bullet.swiper-pagination-bullet-active{background:#97bd9b;}

#box7 .info{width:1205px; position:absolute; top:1680px; left:calc(50% - 1205px/2);}

/*box8*/
#box8{width:100%; /*height:1960px;*/ height:980px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY7_8-bg.jpg") no-repeat center / cover; position:relative; overflow:hidden;}
#box8 .title{width:779px; position:absolute; top:210px; left:calc(50% - 779px/2);}
#box8 #box8Slider{width:973px; height:1127px; position:absolute; top:526px; left:calc(50% - 973px/2);}
#box8 #box8Slider .swiper-container{}
#box8 #box8Slider .swiper-container ul > li{}
#box8 #box8Slider .swiper-container ul > li a{}
#box8 #box8Slider .swiper-container ul > li a img{width:100%;}

#box8 #box8Slider .pag_box8Slider{top:565px !important;}
#box8 #box8Slider .pag_box8Slider .swiper-pagination-bullet{background:#e7e0bb;}
#box8 #box8Slider .pag_box8Slider .swiper-pagination-bullet.swiper-pagination-bullet-active{background:#d1b461;}

#box8 .info{width:1124px; position:absolute; top:1751px; left:calc(50% - 1124px/2);}

/*box9*/
#box9{width:100%; /*height:1743px;*/ height:872px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY7_9-bg.jpg") no-repeat center bottom / cover; position:relative; overflow:hidden;}
#box9 .title{width:575px; position:absolute; top:230px; left:calc(50% - 575px/2);}
#box9 ul.tabWrap{width:1050px; position:absolute; top:438px; left:calc(50% - 1050px/2); display:flex; flex-wrap:wrap; justify-content:space-between;}
#box9 ul.tabWrap > li{cursor:pointer;}
#box9 ul.tabWrap > li > img{width:100%;}

#box9 .subtitle{width:988px; position:absolute; top:660px; left:calc(50% - 988px/2);}

#box9 #box9Slider{width:1151px; height:413px; position:absolute; top:980px; left:calc(50% - 1151px/2);}
#box9 #box9Slider .swiper-container{}
#box9 #box9Slider .swiper-container ul > li{}
#box9 #box9Slider .swiper-container ul > li a{}
#box9 #box9Slider .swiper-container ul > li a img{width:100%;}

#box9 .swiper-button-next, #box9 .swiper-button-prev{width:43px; height:50px; top:50%;}
#box9 .swiper-button-next{background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY7_arrwR.png") no-repeat top center / cover; right:-64px;}
#box9 .swiper-button-prev{background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY7_arrwL.png") no-repeat top center / cover; left:-64px;}

#box9 a.btn{width:1151px; height:81px; position:absolute; top:1470px; left:calc(50% - 1151px/2);}
#box9 a.btn > img{width:100%;}

/*box10*/
#box10{width:100%; /*height:1758px;*/ height:879px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY7_10-bg.jpg") no-repeat center bottom / cover; position:relative; overflow:hidden;}
#box10 .title{width:575px; position:absolute; top:230px; left:calc(50% - 575px/2);}
#box10 ul.tabWrap{width:1050px; position:absolute; top:438px; left:calc(50% - 1050px/2); display:flex; flex-wrap:wrap; justify-content:space-between;}
#box10 ul.tabWrap > li{cursor:pointer;}
#box10 ul.tabWrap > li > img{width:100%;}

#box10 .subtitle{width:1179px; position:absolute; top:750px; left:calc(50% - 1179px/2);}

#box10 #box10Slider{width:1151px; height:428px; position:absolute; top:980px; left:calc(50% - 1151px/2);}
#box10 #box10Slider .swiper-container{}
#box10 #box10Slider .swiper-container ul > li{}
#box10 #box10Slider .swiper-container ul > li a{}
#box10 #box10Slider .swiper-container ul > li a img{width:100%;}

#box10 .swiper-button-next, #box10 .swiper-button-prev{width:43px; height:50px; top:50%;}
#box10 .swiper-button-next{background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY7_arrwR.png") no-repeat top center / cover; right:-64px;}
#box10 .swiper-button-prev{background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY7_arrwL.png") no-repeat top center / cover; left:-64px;}

#box10 a.btn{width:1151px; height:81px; position:absolute; top:1470px; left:calc(50% - 1151px/2);}
#box10 a.btn > img{width:100%;}


/*box11*/
#box11{width:100%; /*height:2537px;*/ height:1269px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY7_11-bg.jpg") no-repeat center bottom / cover; position:relative; overflow:hidden;}
#box11 .title{width:607px; position:absolute; top:282px; left:calc(50% - 607px/2);}
#box11 .cnt{width:749px; position:absolute; top:483px; left:calc(50% - 749px/2);}

#box11 #box11Slider{width:1146px; height:892px; position:absolute; top:1170px; left:calc(50% - 1146px/2);}
#box11 #box11Slider .swiper-container{}
#box11 #box11Slider .swiper-container ul > li{}
#box11 #box11Slider .swiper-container ul > li a{}
#box11 #box11Slider .swiper-container ul > li a img{width:100%;}

#box11 .swiper-button-next, #box11 .swiper-button-prev{width:43px; height:50px; top:50%;}
#box11 .swiper-button-next{background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY7_arrwR.png") no-repeat top center / cover; right:-82px;}
#box11 .swiper-button-prev{background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY7_arrwL.png") no-repeat top center / cover; left:-82px;}

#box11 a.btn{width:1151px; height:81px; position:absolute; top:2179px; left:calc(50% - 1151px/2);}
#box11 a.btn > img{width:100%;}


/*box12*/
#box12{width:100%; /*height:2789px;*/ height:1395px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY7_12-bg.jpg") no-repeat center bottom / cover; position:relative; overflow:hidden;}
#box12 .title{width:621px; position:absolute; top:202px; left:calc(50% - 621px/2);}
#box12 .cnt{width:749px; position:absolute; top:403px; left:calc(50% - 749px/2);}

#box12 #box12Slider1{width:1151px; position:absolute; top:1146px; left:calc(50% - 1151px/2);}
#box12 #box12Slider1 .subtitle{width:328px; margin-bottom:73px;}
#box12 #box12Slider1 .swiper-container{}
#box12 #box12Slider1 .swiper-container ul > li{}
#box12 #box12Slider1 .swiper-container ul > li a{}
#box12 #box12Slider1 .swiper-container ul > li a img{width:100%;}

#box12 #box12Slider2{width:1151px; position:absolute; top:1848px; left:calc(50% - 1151px/2);}
#box12 #box12Slider2 .subtitle{width:426px; margin-bottom:73px;}
#box12 #box12Slider2 .swiper-container{}
#box12 #box12Slider2 .swiper-container ul > li{}
#box12 #box12Slider2 .swiper-container ul > li a{}
#box12 #box12Slider2 .swiper-container ul > li a img{width:100%;}

#box12 .swiper-button-next, #box12 .swiper-button-prev{width:43px; height:50px; top:60%;}
#box12 .swiper-button-next{background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY7_arrwR.png") no-repeat top center / cover; right:-82px;}
#box12 .swiper-button-prev{background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY7_arrwL.png") no-repeat top center / cover; left:-82px;}

#box12 a.btn{width:1151px; height:81px; position:absolute; top:2508px; left:calc(50% - 1151px/2);}
#box12 a.btn > img{width:100%;}


.cntWraps{display:none;}
.cntWrap1{display:block;}


/* BASIC css end */