/* 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:12px; height:14px; top:50%;} .slideWrap .swiper-button-next{background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY6_3-arrwR.png") no-repeat top center / cover; right:-12px;} .slideWrap .swiper-button-prev{background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY6_3-arrwL.png") no-repeat top center / cover; left:-12px;} .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{width:100%; bottom:-30px !important; left:0px !important;} .slideWrap .swiper-pagination .swiper-pagination-bullet{width:6px; height:6px; background:#ffca88; border:none; margin:0 6px !important; opacity:1 !important;} .slideWrap .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{opacity:1 !important; background:#ff8d00;} /*-------------------------------------*/ /*target point*/ .posrel{position:relative;} #tar1, #tar2, #tar3, #tar4, #tar5, #tar6, #tar7{position:absolute; top:-120px; left:0; display:block; width:100%; height:0;} /*-------------------------------------*/ .wrap .opacs{opacity:0; transition:all 2s ease;} /*header*/ #header{ text-align:center; display:flex; flex-wrap:wrap; overflow:hidden; position:relative; justify-content:center; opacity:1; width:100%; height:80px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY6_menuRail-m.png") no-repeat center / cover; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } #header.fixed{position:fixed; top:54px; left:0; z-index:9999;} #header a.menu{position:relative; width:25%; height:40px;} #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;} /*light Animation*/ .wrap .lightAni{opacity: 0; transition: opacity 0.6s ease;} .wrap .lightAni.on{opacity: 1;} /*intro*/ #intro{width:100%; height:391px; overflow:hidden; position:relative; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY6_1-bg.jpg") no-repeat center bottom / cover;} #intro .logo{width:55px; position:absolute; top:37px; left:calc(50% - 55px/2); z-index:2;} #intro .subtitle{width:169px; position:absolute; top:70px; left:calc(50% - 169px/2); z-index:2;} #intro .title{width:257px; position:absolute; top:94px; left:calc(50% - 257px/2); z-index:2;} #intro .date{width:200px; position:absolute; top:144px; left:calc(50% - 200px/2); z-index:2;} #intro .light{width:526px; position:absolute; top:54px; left:calc(50% - 526px/2); z-index:1;} #intro .pinlight{width:161px; position:absolute; top:46px; left:calc(50% - 161px/2); z-index:1;} #intro .slideWrap{width:100%; position:absolute; bottom:51px; left:0; z-index:3;} #intro .slideWrap #box1Slider{} #intro .slideWrap #box1Slider .swiper-container{width: 100%; overflow: hidden;} #intro .slideWrap #box1Slider .swiper-container > ul{display: flex; align-items: center;} #intro .slideWrap #box1Slider .swiper-container > ul li{width:auto !important; position:relative; flex-shrink: 0;} #intro .slideWrap #box1Slider .swiper-container > ul li img{width:auto; height:121px; display:block;} #intro .slideWrap #box1Slider .swiper-container > ul li img.off{position:absolute; top:0; left:0; opacity:1; transition: opacity 1.5s ease; flex-shrink: 0;} #intro .slideWrap #box1Slider .swiper-container > ul li.swiper-slide-active img.off{opacity:0;} #intro .rail{width:100%; height:52px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY6_1-rail.png") no-repeat center / cover; position:absolute; bottom:0; left:0; z-index:1;} /*box2*/ #box2{width:100%; height:1327px; overflow:hidden; position:relative; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY6_2-bg.jpg") no-repeat center top / cover;} #box2 .title{width:192px; position:absolute; top:70px; left:calc(50% - 192px/2);} #box2 .txt1{width:179px; position:absolute; top:169px; left:calc(50% - 179px/2);} #box2 a.coupon1{display:block; width:194px; height:84px; position:absolute; top:198px; left:calc(50% - 194px/2);} #box2 a.coupon2{display:block; width:194px; height:84px; position:absolute; top:378px; left:calc(50% - 194px/2);} #box2 a > img{width:100%;} #box2 .info1{width:136px; position:absolute; top:292px; left:calc(50% - 136px/2);} #box2 .txt2{width:178px; position:absolute; top:334px; left:calc(50% - 178px/2);} #box2 .info2{width:178px; position:absolute; top:472px; left:calc(50% - 178px/2);} #box2 .txt3{width:176px; position:absolute; top:520px; left:calc(50% - 176px/2);} #box2 .card3{width:195px; position:absolute; top:558px; left:calc(50% - 195px/2);} #box2 .info3{width:135px; position:absolute; top:711px; left:calc(50% - 135px/2);} #box2 .txt4{width:147px; position:absolute; top:752px; left:calc(50% - 147px/2);} #box2 .card4-1{width:193px; position:absolute; top:790px; left:calc(50% - 193px/2);} #box2 .card4-2{width:193px; position:absolute; top:902px; left:calc(50% - 193px/2);} #box2 .card4-3{width:193px; position:absolute; top:1015px; left:calc(50% - 193px/2);} #box2 .card4-4{width:193px; position:absolute; top:1128px; left:calc(50% - 193px/2);} #box2 .info4{width:153px; position:absolute; top:1243px; left:calc(50% - 153px/2);} #box2 .lights{width:271px; position:absolute; top:0px; left:calc(50% - 271px/2); pointer-events:none; opacity:0; transition:opacity .4s ease;} #box2 .light1{top:134px;} #box2 .light2{top:300px;} #box2 .light3{top:495px;} #box2 .light4{top:722px;} /*box3*/ #box3{width:100%; height:975px; overflow:hidden; position:relative; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY6_3-bg.jpg") no-repeat center top / cover;} #box3 .title{width:158px; position:absolute; top:68px; left:calc(50% - 158px/2);} #box3 .cnt{width:195px; position:absolute; top:132px; left:calc(50% - 195px/2);} #box3 .lights{width:346px; position:absolute; top:0; left:calc(50% - 346px/2); pointer-events:none;} #box3 .light1{top:31px;} #box3 .light2{top:379px;} #box3 ul.tabWrap{width:196px; display:flex; flex-wrap:wrap; position:absolute; top:311px; left:calc(50% - 196px/2); justify-content:space-between;} #box3 ul.tabWrap > li{position:relative; width:calc(50% - 1px); cursor:pointer;} #box3 ul.tabWrap > li:nth-child(1), #box3 ul.tabWrap > li:nth-child(2){margin-bottom:2px;} #box3 ul.tabWrap > li img{width:100%;} #box3 ul.tabWrap > li img.on{position:absolute; top:0; left:0; opacity:0;} #box3 ul.tabWrap > li.select img.on{opacity:1;} #box3 .slideWrap{width:323px; position:absolute; top:417px; left:calc(50% - 323px/2);} #box3 .slideWrap .subtitle{margin-bottom:25px;} #box3 .slideWrap #box3Slider1, #box3 .slideWrap #box3Slider2, #box3 .slideWrap #box3Slider3, #box3 .slideWrap #box3Slider4{width:323px; position:absolute; top:0; left:0; z-index:1; opacity:0; pointer-events:none;} #box3 .slideWrap #box3Slider1.select, #box3 .slideWrap #box3Slider2.select, #box3 .slideWrap #box3Slider3.select, #box3 .slideWrap #box3Slider4.select{z-index:10; opacity:1; pointer-events:auto;} #box3 .slideWrap #box3Slider1 .subtitle{width:215px;} #box3 .slideWrap #box3Slider2 .subtitle{width:116px;} #box3 .slideWrap #box3Slider3 .subtitle{width:171px;} #box3 .slideWrap #box3Slider4 .subtitle{width:194px;} #box3 .slideWrap .swiper-container{width:323px;} #box3 .slideWrap .swiper-container > ul{} #box3 .slideWrap .swiper-container > ul li{} #box3 .slideWrap .swiper-container > ul li a{display:block;} #box3 .slideWrap .swiper-container > ul li a img{width:100%;} #box3 .slideWrap .swiper-button-next, #box3 .slideWrap .swiper-button-prev{top:63%;} #box3 .slideWrap .swiper-button-next{right:-23px;} #box3 .slideWrap .swiper-button-prev{left:-23px;} #box3 a.btns{display:block; width:325px; height:35px; position:absolute; top:757px; left:calc(50% - 325px/2);} #box3 a.btns img{width:100%;} #box3 a.btn1{top:757px;} #box3 a.btn2{top:796px;} #box3 a.btn3{top:834px;} #box3 a.btn4{top:872px;} /*box4*/ #box4{width:100%; height:1900px; position:relative; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY6_4-bg.jpg") no-repeat center top / cover;} #box4 .title{width:243px; position:absolute; top:80px; left:calc(50% - 243px/2);} #box4 .light{width:364px; position:absolute; top:38px; left:calc(50% - 364px/2);} #box4 a.prds{display:block; width:158px; height:296px; position:absolute; top:0; left:calc(50% - 158px/2);} #box4 a.prds img{width:100%;} #box4 a.prd1{top:157px; left:calc(50% - 158px/2 - 82px);} #box4 a.prd2{top:157px; left:calc(50% - 158px/2 + 82px);} #box4 a.prd3{top:492px; left:calc(50% - 158px/2 - 82px);} #box4 a.prd4{top:492px; left:calc(50% - 158px/2 + 82px);} #box4 a.prd5{top:827px; left:calc(50% - 158px/2 - 82px);} #box4 a.prd6{top:827px; left:calc(50% - 158px/2 + 82px);} #box4 a.prd7{top:1193px; left:calc(50% - 158px/2 - 82px);} #box4 a.prd8{top:1193px; left:calc(50% - 158px/2 + 82px);} #box4 a.prd9{top:1467px; left:calc(50% - 158px/2 - 82px);} #box4 .subtitle{width:302px; position:absolute; top:1163px; left:calc(50% - 302px/2);} #box4 a.btn{width:326px; height:36px; position:absolute; top:1780px; left:calc(50% - 326px/2); background:transparent;} #box4 a.btn img{width:100%;} /*box5*/ #box5{width:100%; height:1049px; background:#feef72; overflow:hidden; position:relative;} #box5 .title{width:178px; position:absolute; top:75px; left:calc(50% - 178px/2);} #box5 .light{width:344px; position:absolute; top:37px; left:calc(50% - 344px/2);} #box5 .prds{display:block; width:158px; height:268px; position:absolute; top:0; left:calc(50% - 158px/2);} #box5 .prds > img{width:100%;} #box5 .prds > img.blanket{position:absolute; top:0; left:0; opacity:0.4;} #box5 .prds.open > img.blanket{position:absolute; top:0; left:0; opacity:0;} #box5 .prd1{top:147px; left:calc(50% - 158px/2 - 83px);} #box5 .prd2{top:147px; left:calc(50% - 158px/2 + 83px);} #box5 .prd3{top:424px; left:calc(50% - 158px/2 - 83px);} #box5 .prd4{top:424px; left:calc(50% - 158px/2 + 83px);} #box5 .prd5{top:702px; left:calc(50% - 158px/2 - 83px);} #box5 .prd6{top:702px; left:calc(50% - 158px/2 + 83px);} /*box6*/ #box6{width:100%; height:1079px; background:#ffd607; overflow:hidden; position:relative;} #box6 .title{width:195px; position:absolute; top:75px; left:calc(50% - 195px/2);} #box6 .light{width:344px; position:absolute; top:38px; left:calc(50% - 344px/2);} #box6 .subtitle{width:184px; margin-bottom:15px;} #box6 #box6Slider1{width:324px; position:absolute; top:143px; left:calc(50% - 324px/2);} #box6 #box6Slider2{width:324px; position:absolute; top:366px; left:calc(50% - 324px/2);} #box6 #box6Slider3{width:324px; position:absolute; top:587px; left:calc(50% - 324px/2);} #box6 #box6Slider4{width:324px; position:absolute; top:810px; left:calc(50% - 324px/2);} #box6 .swiper-container{} #box6 .swiper-container ul{} #box6 .swiper-container ul > li{} #box6 .swiper-container ul > li a{display:block;} #box6 .swiper-container ul > li a img{width:100%;} #box6 .swiper-button-next, #box6 .swiper-button-prev{width:12px; height:14px; top:76%;} #box6 .swiper-button-next{background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY6_3-arrwR.png") no-repeat top center / cover; right:-21px;} #box6 .swiper-button-prev{background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY6_3-arrwL.png") no-repeat top center / cover; left:-21px;} #box6 .swiper-button-next:after, #box6 .swiper-button-prev:after{display:none;} /*box7*/ #box7{width:100%; height:1321px; background:#fef7e4; overflow:hidden; position:relative;} #box7 .title{width:193px; position:absolute; top:78px; left:calc(50% - 193px/2);} #box7 .cnt{width:195px; position:absolute; top:142px; left:calc(50% - 195px/2);} #box7 .light{width:344px; position:absolute; top:42px; left:calc(50% - 344px/2);} #box7 .subtitle{width:184px; margin-bottom:23px;} #box7 #box7Slider1{width:324px; position:absolute; top:306px; left:calc(50% - 324px/2);} #box7 #box7Slider2{width:324px; position:absolute; top:532px; left:calc(50% - 324px/2);} #box7 #box7Slider3{width:324px; position:absolute; top:755px; left:calc(50% - 324px/2);} #box7 #box7Slider4{width:324px; position:absolute; top:985px; left:calc(50% - 324px/2);} #box7 .swiper-container{} #box7 .swiper-container ul{} #box7 .swiper-container ul > li{} #box7 .swiper-container ul > li a{display:block;} #box7 .swiper-container ul > li a img{width:100%;} #box7 .swiper-button-next, #box7 .swiper-button-prev{width:12px; height:14px; top:77%;} #box7 .swiper-button-next{background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY6_3-arrwR.png") no-repeat top center / cover; right:-21px;} #box7 .swiper-button-prev{background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY6_3-arrwL.png") no-repeat top center / cover; left:-21px;} #box7 .swiper-button-next:after, #box7 .swiper-button-prev:after{display:none;} #box7 a.btn{width:326px; height:36px; position:absolute; top:1205px; left:calc(50% - 326px/2); background:transparent;} #box7 a.btn > img{width:100%;} /*box8*/ #box8{width:100%; height:505px; overflow:hidden; position:relative; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY6_8-bgn.jpg") no-repeat center bottom / cover;} #box8 .title{width:182px; position:absolute; top:73px; left:calc(50% - 182px/2);} #box8 .light{width:344px; position:absolute; top:28px; left:calc(50% - 344px/2);} #box8 #box8Slider{width:323px; position:absolute; top:119px; left:calc(50% - 323px/2);} #box8 #box8Slider .swiper-container{} #box8 #box8Slider .swiper-container > ul{} #box8 #box8Slider .swiper-container > ul li{} #box8 #box8Slider .swiper-container > ul li a{display:block;} #box8 #box8Slider .swiper-container > ul li a img{width:100%;} #box8 .swiper-button-next, #box8 .swiper-button-prev{width:12px; height:14px; top:57%;} #box8 .swiper-button-next{background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY6_3-arrwR.png") no-repeat top center / cover; right:-21px;} #box8 .swiper-button-prev{background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY6_3-arrwL.png") no-repeat top center / cover; left:-21px;} #box8 .swiper-button-next:after, #box8 .swiper-button-prev:after{display:none;} #box8 a.btn{width:325px; height:35px; position:absolute; top:412px; left:calc(50% - 325px/2); background:transparent;} #box8 a.btn > img{width:100%;} /*box9*/ #box9{width:100%; padding-bottom:72px; height:auto; position:relative; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY6_9-bg.jpg") no-repeat center top / cover;} #box9 .title{width:252px; padding:78px 0 23px;} #box9 .lights{width:344px; position:absolute; top:0px; left:calc(50% - 344px/2); pointer-events:none;} #box9 .light1{top:43px;} #box9 .light2{top:288px;} #box9 #box9SliderCnt{width:195px; margin:0 auto 46px;} #box9 #box9SliderCnt .swiper-container > ul > li{opacity:0 !important;} #box9 #box9SliderCnt .swiper-container > ul > li.swiper-slide-active{opacity:1 !important;} #box9 #box9SliderCnt .swiper-container > ul > li img{width:100%;} #box9 #box9SliderCnt .swiper-pagination{width:195px; margin-top:5px;} #box9 #box9SliderCnt .swiper-pagination .swiper-pagination-bullet{width:4px; height:4px; background:#7d6605; opacity:0.5; margin:0 2px;} #box9 #box9SliderCnt .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{opacity:1;} #box9 .cnts{width:323px; margin:0 auto;} #box9 .cnts ul{width:100%; display:flex; flex-wrap:wrap; justify-content:space-between;} #box9 .cnts ul > li{width:calc(50% - 3px); margin-bottom:7px;} #box9 .cnts ul > li a{display:block;} #box9 .cnts ul > li a img{width:100%;} #box9 .cnts .subtitle{margin:0 auto 25px;} #box9 .cnt1 .subtitle{width:121px;} #box9 .cnt2 .subtitle{width:154px;} #box9 a.btn{margin-top:18px; background:transparent;} #box9 a.btn{width:325px; height:35px; margin-top:18px; background:transparent;} #box9 a.btn img{width:100%;} /* BASIC css end */