/* BASIC css start */
#overlay_layer {
  display: none;
}

#layout_header{
  z-index:9999;
}

button img {
  display: block;
}

.wrap {
  position: relative;
  width: 100%;
  overflow:hidden;
  /*margin-top:54px;*/
}
.wrap * {
  font-family: YoonGothic !important;
}
.wrap img {
    max-width: none;
    margin:0 auto;
    display:block;
    background:transparent;
}

.wrap a{display:block; margin:0 auto;}

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

/*slider next,prev btn*/
.slideWrap .swiper-button-next, .slideWrap .swiper-button-prev{width:22px; height:26px; top:52%; z-index:9;}
.slideWrap .swiper-button-next:after, .slideWrap .swiper-button-prev:after{display:none;}

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

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

/*on header fixed*/
#intro.fixed{margin-top:19vw;}

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

/*header*/
#header{text-align:center; display:flex; flex-wrap:wrap; overflow:hidden; position:relative; justify-content:center; opacity:1; width:100%; background:#000;}
#header.fixed{position:fixed; top:54px; left:0; z-index:9999;}
#header a.menu{position:relative; width:50%;}
#header a.menu img {width:100%;}
#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::before{content:""; display:block; width:100%; height:1px; background:#fff; position:absolute; top:calc(50% - 1px/2); left:0; z-index:2; opacity:0.3;}
#header::after{content:""; display:block; width:1px; height:100%; background:#fff; position:absolute; top:0; left:calc(50% - 1px/2); z-index:2; opacity:0.3;}

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

.wrap .opacs{opacity:0; transition:all 2s ease;}

/*intro*/
#intro{width:100%; height:348px; overflow-y:hidden; background:none; position:relative;}
#intro .search{width:270px; position:absolute; top:23px; left:calc(50% - 270px/2); z-index:2;}

#intro #box1Slider{width:275px; height:214px; position:absolute; top:63px; left:calc(50% - 275px/2); z-index:2;}
#intro #box1Slider .swiper-container{overflow:visible;}
#intro #box1Slider .swiper-container .cntWrap .swiper-slide{opacity:0 !important;}
#intro #box1Slider .swiper-container .cntWrap .swiper-slide-active{opacity:1 !important;}
#intro #box1Slider .swiper-container .cntWrap .cnt1{width:100%; height:100%;}
#intro #box1Slider .swiper-container .cntWrap .cnt1 .discount{width:67px; position:absolute; top:-4px; right:5px;}
#intro #box1Slider .swiper-container .cntWrap .cnt1 .gif1{width:59px; position:absolute; top:30px; right:78px;}
#intro #box1Slider .swiper-container .cntWrap .cnt1 .gif2{width:66px; position:absolute; top:30px; right:9px;}
#intro #box1Slider .swiper-container .cntWrap .cnt1 .gif3{width:66px; position:absolute; top:86px; right:9px;}
#intro #box1Slider .swiper-container .cntWrap .cnt1 .gif4{width:59px; position:absolute; top:132px; right:78px;}
#intro #box1Slider .swiper-container .cntWrap .cnt1 .txt{width:57px; position:absolute; top:160px; right:13px;}
#intro #box1Slider .swiper-container .cntWrap .cnt1 .img{width:121px; position:absolute; top:30px; left:11px;}
#intro #box1Slider .swiper-container .cntWrap .cnt1 .box{width:100%;}
#intro #box1Slider .swiper-container .cntWrap .cnt2{width:100%; height:100%;}
#intro #box1Slider .swiper-container .cntWrap .cnt2 .discount{width:67px; position:absolute; top:-4px; right:5px;}
#intro #box1Slider .swiper-container .cntWrap .cnt2 .gif1{width:59px; position:absolute; top:30px; right:78px;}
#intro #box1Slider .swiper-container .cntWrap .cnt2 .gif2{width:66px; position:absolute; top:30px; right:9px;}
#intro #box1Slider .swiper-container .cntWrap .cnt2 .gif3{width:66px; position:absolute; top:86px; right:9px;}
#intro #box1Slider .swiper-container .cntWrap .cnt2 .gif4{width:59px; position:absolute; top:132px; right:78px;}
#intro #box1Slider .swiper-container .cntWrap .cnt2 .txt{width:57px; position:absolute; top:160px; right:13px;}
#intro #box1Slider .swiper-container .cntWrap .cnt2 .img{width:121px; position:absolute; top:30px; left:11px;}
#intro #box1Slider .swiper-container .cntWrap .cnt2 .box{width:100%;}
#intro #box1Slider .swiper-container .cntWrap .cnt3{width:100%; height:100%;}
#intro #box1Slider .swiper-container .cntWrap .cnt3 .txt{width:67px; position:absolute; top:160px; right:13px;}
#intro #box1Slider .swiper-container .cntWrap .cnt3 .img{width:151px; position:absolute; top:30px; left:11px;}
#intro #box1Slider .swiper-container .cntWrap .cnt3 .subimg{width:98px; position:absolute; top:30px; right:9px;}
#intro #box1Slider .swiper-container .cntWrap .cnt3 .box{width:100%;}

#intro .info{width:267px; position:absolute; top:286px; left:calc(50% - 267px/2); z-index:2;}
#intro ul.bgWrap{position:absolute; top:0; left:0; width:100%; height:100%; z-index:1;}
#intro ul.bgWrap > li{position:absolute; top:0; left:0; width:100%; height:100%;}
#intro ul.bgWrap > li:nth-child(1){background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY1_1-bg1-m.jpg") no-repeat center / cover; opacity:1; transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}
#intro ul.bgWrap > li:nth-child(2){background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY1_1-bg2-m.jpg") no-repeat center / cover; opacity:0; transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}
#intro ul.bgWrap > li:nth-child(3){background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY1_1-bg3-m.jpg") no-repeat center / cover; opacity:0; transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}

/*box2*/
#box2{width:100%; height:498px; background:#fff; position:relative;}
#box2 .title{width:216px; position:absolute; top:53px; left:calc(50% - 216px/2);}
#box2 .coup1{width:184px; position:absolute; top:155px; left:calc(50% - 184px/2);}
#box2 .coup2{width:184px; position:absolute; top:230px; left:calc(50% - 184px/2);}
#box2 .coup3{width:184px; position:absolute; top:305px; left:calc(50% - 184px/2);}
#box2 a.btn{width:224px; height:32px; position:absolute; top:401px; left:calc(50% - 224px/2);}
#box2 a.btn img{width:100%;}
#box2 .info{width:167px; position:absolute; top:446px; left:calc(50% - 167px/2);}

/*box3*/
#box3{width:100%; height:346px; position:relative;}
#box3 .title{width:99px; position:absolute; top:0; left:calc(50% - 99px/2);}
#box3 .cnt1{width:105px; position:absolute; top:102px; left:calc(50% - 105px/2 - 111px);}
#box3 .cnt2{width:105px; position:absolute; top:102px; left:calc(50% - 105px/2);}
#box3 .cnt3{width:105px; position:absolute; top:102px; left:calc(50% - 105px/2 + 111px);}
#box3 .info{width:250px; position:absolute; top:282px; left:calc(50% - 250px/2);}
    
/*box4*/
#box4{width:100%; height:347px; background:#f4f4f4; position:relative;}
#box4 .title{width:162px; position:absolute; top:46px; left:calc(50% - 162px/2);}
#box4 .coup{width:206px; position:absolute; top:136px; left:calc(50% - 206px/2); animation:coupAni 3s ease-in-out infinite;}

@keyframes coupAni{
    0%{top:136px;}
    50%{top:142px;}
    100%{top:136px;}
}

#box4 .info{width:204px; position:absolute; top:252px; left:calc(50% - 204px/2);}
    
/*box6*/
#box6{width:100%; height:505px; background:#fff; position:relative;}

#box6 .card{width:342px; height:295px; position:absolute; top:52px; left:calc(50% - 342px/2); perspective: 5000px;}
#box6 .card .card-inner {width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 4s ease-in-out;}
#box6 .card .card-inner .cnt1,
#box6 .card .card-inner .cnt2{width;100%; position:absolute; top:0; left:0; backface-visibility: hidden;}

#box6 .card .card-inner .cnt1{width:100%; animation:redbeanAni 8s ease-in-out infinite;}
#box6 .card .card-inner .cnt2{width:100%; animation:bananaAni 8s ease-in-out infinite;}

@keyframes redbeanAni{
    0%{transform: rotateY(0deg);}
    30%{transform: rotateY(0deg);}
    40%{transform: rotateY(90deg);}
    50%{transform: rotateY(180deg);}
    80%{transform: rotateY(180deg);}
    90%{transform: rotateY(270deg);}
    100%{transform: rotateY(360deg);}
}
@keyframes bananaAni{
    0%{transform: rotateY(180deg);}
    30%{transform: rotateY(180deg);}
    40%{transform: rotateY(270deg);}
    50%{transform: rotateY(360deg);}
    80%{transform: rotateY(360deg);}
    90%{transform: rotateY(450deg);}
    100%{transform: rotateY(540deg);}
}

#box6 .info{width:267px; position:absolute; top:366px; left:calc(50% - 267px/2);}
#box6 a.btn{width:343px; height:32px; position:absolute; top:421px; left:calc(50% - 343px/2);}
#box6 a.btn img{width:100%;}

/*box7*/
#box7{width:100%; height:799px; background:#ffeeee; position:relative;}
#box7 .title{width:129px; position:absolute; top:40px; left:calc(50% - 129px/2);}

#box7 a.cnt1{width:350px; height:245px; position:absolute; top:131px; left:calc(50% - 350px/2);}
#box7 a.cnt1 img{width:100%;}
#box7 a.btn1{width:349px; height:32px; position:absolute; top:394px; left:calc(50% - 349px/2);}
#box7 a.btn1 img{width:100%;}

#box7 a.cnt2{width:350px; height:245px; position:absolute; top:452px; left:calc(50% - 350px/2);}
#box7 a.cnt2 img{width:100%;}
#box7 a.btn2{width:349px; height:32px; position:absolute; top:715px; left:calc(50% - 349px/2);}
#box7 a.btn2 img{width:100%;}

/*box8*/
#box8{width:100%; height:478px; background:#fff7d4; position:relative;}
#box8 .title{width:186px; position:absolute; top:40px; left:calc(50% - 186px/2);}
#box8 a.cnt{width:350px; height:245px; position:absolute; top:130px; left:calc(50% - 350px/2);}
#box8 a.cnt img{width:100%;}
#box8 a.btn{width:349px; height:32px; position:absolute; top:394px; left:calc(50% - 349px/2);}
#box8 a.btn img{width:100%;}

/*box9*/
#box9{width:100%; height:1830px; background:#f9f9f9; position:relative;}
#box9 .title{width:229px; padding-top:52px;}
#box9 .tag1{width:100px; padding:26px 0 19px;}

#box9 a.cnts{width:350px; height:245px; padding-bottom:11px; position:relative;}
#box9 a.cnts img.cnt{width:100%;}
#box9 a.cnts .gift{width:53px; position:absolute; top:74px; left:calc(50% - 53px/2 + 70px); z-index:2;}

#box9 a.cnts #box9SliderA,
#box9 a.cnts #box9SliderB{width:322px; height:131px; position:absolute; top:13px; left:calc(50% - 322px/2); z-index:1;}
#box9 a.cnts .swiper-container ul li img{width:100%;}
#box9 .tag2{width:145px; padding:33px 0 19px;}

/*box10*/
#box10{width:100%; height:1057px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY1_10-bg-m.jpg") no-repeat center / cover; position:relative;}
#box10 .title{width:224px; position:absolute; top:52px; left:calc(50% - 224px/2);}
#box10 .deco{width:56px; position:absolute; top:89px; left:calc(50% - 56px/2 + 130px);}
#box10 .tag1{width:119px; position:absolute; top:168px; left:calc(50% - 119px/2);}

#box10 a.prds{width:120px; height:148px;}
#box10 a.prds img{width:100%;}

#box10 a.prd1{position:absolute; top:212px; left:calc(50% - 120px/2 - 122px);}
#box10 a.prd2{position:absolute; top:212px; left:calc(50% - 120px/2);}
#box10 a.prd3{position:absolute; top:212px; left:calc(50% - 120px/2 + 122px);}
#box10 a.prd4{position:absolute; top:379px; left:calc(50% - 120px/2 - 122px);}
#box10 a.prd5{position:absolute; top:379px; left:calc(50% - 120px/2);}
#box10 a.prd6{position:absolute; top:379px; left:calc(50% - 120px/2 + 122px);}

#box10 a.prd7{width:181px; height:145px; position:absolute; top:545px; left:calc(50% - 181px/2 - 91.5px);}
#box10 a.prd8{width:181px; height:146px; position:absolute; top:545px; left:calc(50% - 181px/2 + 91.5px);}

#box10 .tag2{width:109px; position:absolute; top:737px; left:calc(50% - 109px/2);}

#box10 #box10Slider{width:100%; position:relative; position:absolute; top:781px; left:0;}
#box10 #box10Slider .swiper-container{width:320px; height:208px; margin:0 auto;}
#box10 #box10Slider .swiper-container ul li img{width:100%;}

#box10 #box10Slider .swiper-button-prev{width:17px; height:17px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY1_10-cnt2-arrwL.png") no-repeat center / cover; left:calc(50% - 17px/2 - 173px); top:55%;}
#box10 #box10Slider .swiper-button-next{width:17px; height:17px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY1_10-cnt2-arrwR.png") no-repeat center / cover; right:calc(50% - 17px/2 - 173px); top:55%;}

#box10 #box10Slider .swiper-button-prev::after,
#box10 #box10Slider .swiper-button-next::after{display:none;}

#box10 .swiper-pagination{width:100%; bottom:-14px;}
#box10 .swiper-pagination .swiper-pagination-bullet{width:52px; height:4px; border-radius:10px; background:#fff; opacity:0.4; margin:0 1px;}
#box10 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{opacity:1;}

#box10 .box{width:322px; position:absolute; top:781px; left:calc(50% - 322px/2);}


/*box11*/
#box11{width:100%; height:auto; background:#fff; position:relative; padding:0 0 59px;}

#box11 .title{width:185px; padding:52px 0 26px;}

#box11 .coupWrap{width:100%; background:#f9f9f9; padding:15px 0 26px;}
#box11 .coupWrap .coup{width:334px; display:block; padding:0 0 20px; margin:0 auto;}
#box11 .coupWrap a.btn{width:329px; height:32px;}
#box11 .coupWrap a.btn img{width:100%;}

#box11 ul{width:343px; margin:33px auto 0;}
#box11 ul li{width:100%; border-top:1px solid #000; cursor:pointer;}
#box11 ul li:nth-last-child(1){border-bottom:1px solid #000;}

#box11 ul li .head{width:100%; height:40px; position:relative;}
#box11 ul li .head .nos{height:7px; position:absolute; top:16px; left:9px;}
#box11 ul li .head .txts{height:13px; position:absolute; top:14px; left:29px;}
#box11 ul li .head .arrw{width:12px; position:absolute; top:17px; right:19px; transform:rotate(0deg); transition:all .5 ease; -webkit-transition:all .5 ease; -moz-transition:all .5 ease;}

#box11 ul li.on{background:#f9f9f9;}
#box11 ul li .head .arrw.on{transform:rotate(180deg); transition:all .5 ease; -webkit-transition:all .5 ease; -moz-transition:all .5 ease;}

#box11 ul li a.dropdown{padding:0px; height:auto; overflow:hidden; display:none;}
#box11 ul li a.dropdown img{width:100%; padding-bottom:23px;}


/*caution*/
#caution{background:#000;}
#caution img{width:80%; margin:auto; padding:52px 0;}


/* BASIC css end */