/* BASIC css start */
.snb-wrap{position:fixed;left:7%;top:4%;z-index:10;}
.snb-wrap h1{margin-bottom:20px;}
.snb-wrap h1 a{width:67px;}
.snb-wrap a{display:block;padding:3px 0;color:#000;font-family:'Noto Sans KR', sans-serif;}
.snb-wrap a.on,
.snb-wrap a:hover{font-weight:bold;}
.snb-depth2, .snb-depth3{display:none;overflow:hidden;}
.snb-depth2.on, .snb-depth3.on{display:block;}
.snb-wrap .snb-depth1 > li{margin-bottom:10px;}
.snb-wrap .snb-depth1 > li > a{font-size:14px;}
.snb-wrap .snb-depth2{padding-top:10px;border-top:1px solid #000;}
.snb-wrap .snb-depth2 > li{margin-bottom:8px;}
.snb-wrap .snb-depth2 > li > a{font-size:13px;}
.snb-wrap .snb-depth2 > li > a:before{content:'';display:inline-block;width:8px;height:8px;margin-right:4px;border:1px solid #000;}
.snb-wrap .snb-depth2 > li > a.on:before{background:#000;}
.snb-wrap .snb-depth3{padding-bottom:10px;padding-left:10px;}
.snb-wrap .snb-depth3 > li > a{font-size:12px;line-height:1.6;}
.tlogo{width: 90px; height:90px; margin-top:30px; margin-left:20px;}

/* 이동버튼 */    
.move{position: fixed; right: 5%; top: 40%;z-index:25}
.move ul{}
.move ul li{margin: 10px 0;}
.move ul li a{display: block;  border-radius: 50%; width: 16px; height: 16px;position: relative;border:1px solid rgba(0,0,0,0);transition:all .4s;}
.move ul li a span{width: 6px; height: 6px; border-radius: 50%; background-color: #7d7d7d;text-indent: -9999px;  position: absolute; top: 50%;left: 50%; transform: translate(-50%,-50%); transition:all .4s;}
.move ul li a.on{border: 1px solid #000;transition:all .4s;}
.move ul li a.on span{background-color: #000;transition:all .4s;}

        
#contents{padding-top:0}
        
/* 섹션공통 */        
section{width: 100%;height: 100vh; }
section .sec_inner{width: 90%; margin: 0 auto; height: 100%;}
section .shop_now{font-family: 'Lato' , sans-serif; font-size: 22px; color: #000; padding-bottom: 5px; border-bottom: 1px solid #000;font-weight: 600;letter-spacing: 1px; display: inline-block;margin-top:620px; margin-left:-100px;}
section .shop_now2{font-family: 'Lato' , sans-serif; font-size: 22px; color: #000; padding-bottom: 5px; border-bottom: 1px solid #000;font-weight: 600;letter-spacing: 1px; display: inline-block;margin-top:550px; margin-left:30px;}
section .shop_now span{display: inline-block;margin-left: 25px;}
section .shop_now span img{transform:scale(.66);display:inline-block; margin-top:3px}
section p.tit{font-family: 'Noto Sans KR', sans-serif;letter-spacing: -.2px; }
.start{transition: all 1s; opacity: 0;}
.end{opacity: 1 !important;transition: all 1s;margin-top:-30px}        


/* sec1 */
#sec1{background: url(/design/redbrown/mobile_wishblack/intro_01_mo.jpg) no-repeat center center ;background-size: cover;}
#sec1 .sec_inner{width:100%;}
#sec1 h2{font-family: 'Playfair Display SC', serif; color: #000; font-size: 15px;font-weight:600; line-height:2.0;letter-spacing:1px; }
#sec1 h22{font-family: 'Playfair Display SC', serif; color: #000; font-size: 20px;font-weight:600; line-height:1.2;letter-spacing:1px; } 
#sec1 .sec_inner{position: relative;}
#sec1 .sec_inner .sec1_cont{text-align: center;position: absolute; top: 40%; left: 50%; transform: translate(-50%,-50%);transition: all 1s;opacity:0;width:100%}
#sec1 .sec_inner .sec1_cont .sec1_logo{}
#sec1 .sec_inner .sec1_cont .sec1_logo img{transform:scale(.66)}
#sec1 .sec_inner .sec1_cont p.tit{font-family: 'Noto Sans KR', sans-serif; color: #000; font-size: 15px; margin: 15px 0 20px;font-weight: 500; letter-spacing: 1.2px;}

        
 /* sec2 */
#sec2{background: url(/design/redbrown/mobile_wishblack/intro_02_mo.jpg) no-repeat center center ;background-size: cover;}
#sec2 .sec_inner{width:100%;}
#sec2 h2{font-family: 'Playfair Display SC', serif; color: #000; font-size: 15px;font-weight:600; line-height:2.0;letter-spacing:1px; }
#sec2 h22{font-family: 'Playfair Display SC', serif; color: #000; font-size: 20px;font-weight:600; line-height:1.2;letter-spacing:1px; } 
#sec2 .sec_inner{position: relative;}
#sec2 .sec_inner .sec1_cont{text-align: center;position: absolute; top: 40%; left: 50%; transform: translate(-50%,-50%);transition: all 1s;opacity:0;width:100%}
#sec2 .sec_inner .sec1_cont .sec1_logo{}
#sec2 .sec_inner .sec1_cont .sec1_logo img{transform:scale(.66)}
#sec2 .sec_inner .sec1_cont p.tit{font-family: 'Noto Sans KR', sans-serif; color: #000; font-size: 15px; margin: 15px 0 20px;font-weight: 500; letter-spacing: 1.2px;}

/* sec3 */
#sec3{background: url(/design/redbrown/mobile_wishblack/intro_03_mo.jpg) no-repeat center center ;background-size: cover;}
#sec3 .sec_inner{width:100%;}
#sec3 h2{font-family: 'Playfair Display SC', serif; color: #000; font-size: 15px;font-weight:600; line-height:2.0;letter-spacing:1px; }
#sec3 h22{font-family: 'Playfair Display SC', serif; color: #000; font-size: 20px;font-weight:600; line-height:1.2;letter-spacing:1px; } 
#sec3 .sec_inner{position: relative;}
#sec3 .sec_inner .sec1_cont{text-align: center;position: absolute; top: 40%; left: 50%; transform: translate(-50%,-50%);transition: all 1s;opacity:0;width:100%}
#sec3 .sec_inner .sec1_cont .sec1_logo{}
#sec3 .sec_inner .sec1_cont .sec1_logo img{transform:scale(.66)}
#sec3 .sec_inner .sec1_cont p.tit{font-family: 'Noto Sans KR', sans-serif; color: #000; font-size: 15px; margin: 15px 0 20px;font-weight: 500; letter-spacing: 1.2px;}


/* sec4 */
#sec4{background: url(//skin.makeshop.co.kr/skin/branded/MO_img/sec4.png) no-repeat center center; background-size: cover;}
#sec4 .sec_inner{display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: center;width:100%;padding:13% 15%;}
#sec4 .sec_inner h2{margin-bottom: 35px; font-family: 'Playfair Display SC', serif; font-size: 31px; color: white; text-align: center; font-weight: 600;}
#sec4 .sec_inner .swiper{width:100%; padding-bottom:40px}
#sec4 .sec_inner ul{width:100%; }
#sec4 .sec_inner ul li{width:100%; height:100%}
#sec4 .sec_inner ul li>a{display: block;width: 100%;overflow:hidden; height:70%}
#sec4 .sec_inner ul li .thumb{width: 100%;height:100%}
#sec4 .sec_inner ul li .thumb img{width: 100%;height:100%; object-fit:cover}
#sec4 .sec_inner ul li .text_area{width: 100%; background-color: #fff;  padding:13px; position: relative;height:30%}
#sec4 .sec_inner ul li .text_area h3{padding-top: 2px; text-align: center;font-family: 'Playfair Display SC' , sans-serif; color: #000; font-size: 14px; margin-bottom: 10px; font-weight: 800;}
#sec4 .sec_inner ul li .text_area p{font-family: 'Noto Sans KR', sans-serif; font-size: 10.5px; color: #7f7f7f; font-weight: 500; width:95%; margin:0 auto;letter-spacing:-.5px}
#sec4 .sec_inner ul li .text_area .plus{position: absolute; bottom: 10px; right: 15px;}
#sec4 .sec_inner ul li .text_area .plus img{display: inline-block; transform:scale(.6)}
#sec4 .sec_inner .swiper .swiper_btn_prev{position:absolute; left:0; bottom:0; z-index:9}
#sec4 .sec_inner .swiper .swiper_btn_prev a{display:block}
#sec4 .sec_inner .swiper .swiper_btn_next{position:absolute; right:0; bottom:0; z-index:9}
#sec4 .sec_inner .swiper .swiper_btn_next a{display:block}
#sec4 .swiper-pagination-fraction{bottom:0 !important}
#sec4 .swiper-pagination{color:rgba(255,255,255,.7); z-index:6 !important}
#sec4 .swiper-pagination-current{color:#fff}

/* BASIC css end */