@charset 'UTF-8';
@font-face {
    font-family: "Pretendard";
    font-weight: 100;
    font-style: normal;
    src: url("../../fonts/Pretendard-Thin.woff") format("font-woff"),
    url("../../fonts/Pretendard-Thin.woff2") format("woff2");
}

@font-face {
    font-family: "Pretendard";
    font-weight: 200;
    font-style: normal;
    src: url("../../fonts/Pretendard-ExtraLight.woff") format("font-woff"),
    url("../../fonts/Pretendard-ExtraLight.woff2") format("woff2");
}

@font-face {
    font-family: "Pretendard";
    font-weight: 300;
    font-style: normal;
    src: url("../../fonts/Pretendard-Light.woff") format("font-woff"),
    url("../../fonts/Pretendard-Light.woff2") format("woff2");
}

@font-face {
    font-family: "Pretendard";
    font-weight: 400;
    font-style: normal;
    src: url("../../fonts/Pretendard-Regular.woff") format("font-woff"),
    url("../../fonts/Pretendard-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Pretendard";
    font-weight: 500;
    font-style: normal;
    src: url("../../fonts/Pretendard-Medium.woff") format("font-woff"),
    url("../../fonts/Pretendard-Medium.woff2") format("woff2");
}

@font-face {
    font-family: "Pretendard";
    font-weight: 600;
    font-style: normal;
    src: url("../../fonts/Pretendard-SemiBold.woff") format("font-woff"),
    url("../../fonts/Pretendard-SemiBold.woff2") format("woff2");
}

@font-face {
    font-family: "Pretendard";
    font-weight: 700;
    font-style: normal;
    src: url("../../fonts/Pretendard-Bold.woff") format("font-woff"),
    url("../../fonts/Pretendard-Bold.woff2") format("woff2");
}

@font-face {
    font-family: "Pretendard";
    font-weight: 800;
    font-style: normal;
    src: url("../../fonts/Pretendard-ExtraBold.woff") format("font-woff"),
    url("../../fonts/Pretendard-ExtraBold.woff2") format("woff2");
}

@font-face {
    font-family: "Pretendard";
    font-weight: 900;
    font-style: normal;
    src: url("../../fonts/Pretendard-Black.woff") format("font-woff"),
    url("../../fonts/Pretendard-Black.woff2") format("woff2");
}

@font-face {
    font-family: "InstagramSansHeadline";
    font-weight: 400;
    font-style: normal;
    src: url("../../fonts/InstagramSansHeadline-Regular.woff") format("font-woff"),
    url("../../fonts/InstagramSansHeadline-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "InstagramSansHeadline";
    font-weight: 600;
    font-style: normal;
    src: url("../../fonts/InstagramSansHeadline-Bold.woff") format("font-woff"),
    url("../../fonts/InstagramSansHeadline-Bold.woff2") format("woff2");
}

@font-face {
    font-family: "InstagramSans";
    font-weight: 300;
    font-style: normal;
    src: url("../../fonts/InstagramSans-Light.woff") format("font-woff"),
    url("../../fonts/InstagramSans-Light.woff2") format("woff2");
}

@font-face {
    font-family: "InstagramSans";
    font-weight: 400;
    font-style: normal;
    src: url("../../fonts/InstagramSans-Regular.woff") format("font-woff"),
    url("../../fonts/InstagramSans-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "InstagramSans";
    font-weight: 500;
    font-style: normal;
    src: url("../../fonts/InstagramSans-Medium.woff") format("font-woff"),
    url("../../fonts/InstagramSans-Medium.woff2") format("woff2");
}

@font-face {
    font-family: "InstagramSans";
    font-weight: 600;
    font-style: normal;
    src: url("../../fonts/InstagramSans-Bold.woff") format("font-woff"),
    url("../../fonts/InstagramSans-Bold.woff2") format("woff2");
}

* { box-sizing: border-box; }

.brand-identity a { display:inline-block; width:31px; height:31px; background:url(../../img/logo.png) no-repeat; background-size:100% auto; text-indent:-10000em; vertical-align:middle; }

body { position:relative; word-wrap:break-word; font-family:"Pretendard", '나눔고딕', "Apple SD Gothic Neo", 'Malgun Gothic', '맑은고딕', sans-serif, arial; font-size:16px; box-sizing:border-box; /*overflow-x:hidden;*/ }

section { position:relative; width:100vw; height:auto; min-height:100vh; overflow:hidden; }

p { font-size:16px; line-height:27px; letter-spacing:-.48px; }
h6 { font-size:20px; line-height:24px; font-weight:700; letter-spacing:-.6px; word-break:keep-all; }
h5 { font-family:'InstagramSans'; font-size:16px; line-height:21px; font-weight:400; letter-spacing:-.48px; }
h2 { margin-top:4px; font-size:26px; line-height:31px; font-weight:700; letter-spacing:-.78px; background-image:linear-gradient(87deg, #ffd600 -48%, #ff7a00 4%, #ff0069 58%, #d300c5 109%); -webkit-background-clip: text; color: transparent; }

.__stand_by { display:none; }
.__stand_by.__onload { display:block; }

/* iOS only */
@supports (-webkit-touch-callout: none) { 
    height: -webkit-fill-available;
}

/* intro */
.intro { }
.intro_bg { width:100vw; height:100vh; }
.intro_bg .logo_wrap { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:111px; height:111px; z-index:2; }
.intro_bg .__logo { opacity:0; width:111px; height:111px; background:url(../../img/logo.svg) no-repeat center center; background-size:100% auto; }
.intro_bg .img_wrap { position:relative; overflow:hidden; }
.intro_bg .img_wrap div .__img { opacity:0; }
.intro_bg .img_wrap .bg_1 { width:100vw; height:100vh; background:linear-gradient(48deg, #ffd600 -2%, #ff7a00 31%, #ff0069 65%, #d300c5 97%); }
.intro_bg .img_wrap .bg_1 .__img { width:100vw; height:100vh; background:url(../../img/bg_1.jpg) center center; background-size:cover; }
.intro_bg .img_wrap .bg_2 { position:absolute; bottom:0; right:0; width:100vw; height:0; background:#02619E; }
.intro_bg .img_wrap .bg_2 .__img { width:100vw; height:100vh; background:url(../../img/bg_2.jpg) center center; background-size:cover; }
.intro_bg .img_wrap .bg_3 { position:absolute; bottom:0; right:0; width:100vw; height:0; background:#FEAA00; }
.intro_bg .img_wrap .bg_3 .__img { width:100vw; height:100vh; background:url(../../img/bg_3.jpg) center center; background-size:cover; }
.intro_bg .__clear { position:absolute; bottom:-36px; left:0; width:100vw; height:100vh; background:#fff; clip-path:circle(0% at center); z-index:5; }

.intro_box { opacity:0; display:flex; align-items: center; justify-content: center; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100vw; height:100vh; z-index:10; }
.intro_inner { display:flex; flex-wrap:wrap; align-items: center; justify-content: center; position:relative; width:100vw; }
.intro_inner h1 { position:absolute; top:calc(50% - 120px); left:50%; transform:translate(-50%, -50%); width:275px; font-family:"InstagramSansHeadline"; font-size:32px; line-height:34px; letter-spacing:-.38px; font-weight:400; text-align:center; }
.intro_inner h3 { position:absolute; top:calc(50% + 120px); left:50%; transform:translate(-50%, -50%); width:276px; font-size:23px; line-height:27px; letter-spacing:-.69px; font-weight:500; text-align:center; }
.intro_inner .insta_ico { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:111px; height:111px; z-index:5; }
.intro_inner .img_wrap { position:relative; display:block; width:111px; height:111px; }
.intro_inner .img_wrap .__svg { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; height:100%; }
.intro_inner .img_wrap svg { width:100%; height:100%; }
.intro_inner .img_wrap svg .cls-1 { fill:#fff; }
.intro_inner .img_wrap .insta_bg_1 { position:absolute; top:0; left:0; width:100%; height:100%; background:url(../../img/insta_gradient.png) no-repeat center center; background-size:100% auto; clip-path: url(#ico_1); }
.intro_inner .img_wrap .insta_bg_2 { position:absolute; top:0; left:0; width:100%; height:100%; background:url(../../img/insta_gradient.png) no-repeat center center; background-size:100% auto; clip-path: url(#ico_3); }
.intro_inner .img_wrap .insta_bg_3 { position:absolute; top:0; left:0; width:100%; height:100%; background:url(../../img/insta_gradient.png) no-repeat center center; background-size:100% auto; clip-path: url(#ico_5); }

.intro_box .btn_scroll { position:absolute; bottom:42px; left:50%; transform:translateX(-50%); width:276px; height:55px; animation:fly .5s linear infinite alternate; cursor:pointer; }
.intro_box .btn_scroll p { font-family:'InstagramSans'; font-size:18px; line-height:23px; letter-spacing:-.54px; font-weight:500; text-align:center; }
.intro_box .btn_scroll i { display:block; margin:0 auto; margin-top:8px; width:20px; height:23px; background:url(../../img/btn_scroll.svg) no-repeat center center; background-size:100% auto; }
@keyframes fly {
    100% { bottom:50px; }
}

/* sub */
.sub {  }
.sub .sub_inner { margin:0 auto; margin-top:55px; }
.sub .sub_inner .title_wrap { position:relative; width:100%; }
.sub .sub_inner .title_wrap h2 { font-family:'InstagramSansHeadline'; font-size:51px; line-height:50px; font-weight:400; letter-spacing:-1.48px; background-image: linear-gradient(75deg, #ffd600 -17%, #ff7a00 31%, #ff0069 79%, #d300c5 125%); background-clip: text; -webkit-background-clip: text; color: transparent; }
.sub .sub_inner .title_wrap h2:nth-child(1) { width:357px; }
.sub .sub_inner .title_wrap h2:nth-child(2) { width:387px; line-height:57px; }
.sub .sub_inner .title_wrap:nth-child(3) h2 { width:322px; }
.sub .sub_inner p { margin:0 auto; width:calc(100vw - 74px); font-size:16px; line-height:27px; letter-spacing:-.48px; }
.sub .sub_inner p:nth-child(2) { margin-top:49px; margin-bottom:76px; }
.sub .sub_inner p:nth-child(4) { margin-top:40px; }

.sub .sub_inner .visual_wrap { position:absolute; top:553px; left:50%; transform:translateX(-50%); width:1920px; height:100%; }
.sub .sub_inner .visual_wrap img { position:absolute; margin:0; padding:0; display:block; width:128px; height:128px; }
.sub .sub_inner .visual_wrap img:nth-child(1) { top:0; left:296px; }
.sub .sub_inner .visual_wrap img:nth-child(2) { top:175px; left:0; }
.sub .sub_inner .visual_wrap img:nth-child(3) { top:128px; left:502px; }
.sub .sub_inner .visual_wrap img:nth-child(4) { top:337px; left:232px; }
.sub .sub_inner .visual_wrap img:nth-child(5) { top:469px; left:360px; }
.sub .sub_inner .visual_wrap img:nth-child(6) { top:0; right:0; }
.sub .sub_inner .visual_wrap img:nth-child(7) { top:299px; right:314px; }
.sub .sub_inner .visual_wrap img:nth-child(8) { top:427px; right:442px; }
.sub .sub_inner .visual_wrap img:nth-child(9) { top:469px; right:0; }

/* switch */
.switch { margin-top:116px; }
.switch h5 { text-align:center; }
.switch h2 { margin:0 auto; width:301px; text-align:center; }
.switch ul { margin-top:58px; }
.switch ul li { display:block; position:relative; margin:0 auto; margin-bottom:6px; width:calc(100vw - 74px); height:87px; }
.switch ul li .__cover { position:relative; margin:0 auto; width:33vw; height:87px; color:#fff; font-size:14px; line-height:87px; font-weight:700; letter-spacing:-.42px; text-align:center; border-radius:22px; background-image: linear-gradient(71deg, #ffd600 6%, #ff7a00 37%, #ff0069 69%, #d300c5 99%); z-index:5; }
.switch ul li .__cover b { font-size:25px; letter-spacing:-.75px; }
.switch ul li .__contents { position:absolute; top:0; left:50%; transform:translateX(-50%); display:flex; align-items: center; justify-content: center; width:calc(100vw - 74px); height:87px; background:#f4f4f4; border-radius:22px; z-index:-1; }
.switch ul li .__contents p { font-size:15px; line-height:19px; font-weight:500; letter-spacing:-.45px; text-align:center; word-break:keep-all; }
.switch ul li .__contents p span { font-size:12px; letter-spacing:-.36px; font-weight:300; }

.switch ul li .mask_1 { position:absolute; left:-37px; top:0; width:33.3vw; height:87px; background:#fff; z-index:2; }
.switch ul li .mask_2 { position:absolute; right:-37px; top:0; width:33.3vw; height:87px; background:#fff; z-index:2; }
.switch ul li .inner { position:absolute; top:0; left:50%; transform:translateX(-50%); display:flex; align-items: center; justify-content: center; width:calc(100vw - 74px); height:87px; border-radius:22px; z-index:1; }
.switch ul li .inner p { font-size:15px; line-height:19px; font-weight:500; letter-spacing:-.45px; text-align:center; word-break:keep-all; }
.switch ul li .inner p span { font-size:12px; letter-spacing:-.36px; font-weight:300; }

/* story_1 */
.story_1 { margin-top:134px; }
.story_1 .story_inner { margin:0 auto; width:calc(100vw - 74px); }
.story_1 .story_inner h2 { margin-top:8px; width:180px; }
.story_1 .story_inner ul { margin-top:33px; }
.story_1 .story_inner ul li { display:flex; flex-wrap:wrap; position:relative; }
.story_1 .story_inner ul li:before { content:''; position:absolute; top:0; left:-7px; width:calc(100vw - 60px); height:1px; background:#777; }
.story_1 .story_inner ul li .__mask { position:absolute; top:-1px; right:-7px; width:calc(100vw - 60px); height:3px; background:#fff; }
.story_1 .story_inner ul li .txt_wrap { margin-top:19px; }
.story_1 .story_inner ul li .txt_wrap p { margin-top:21px; width:calc(100vw - 74px); }
.story_1 .story_inner ul li .img_wrap { margin-top:26px; margin-bottom:85px; width:calc(100vw - 74px); height:59.73vw; }
.story_1 .story_inner ul li .img_wrap img { width:100%; height:100%; clip-path:circle(0% at center); }

/* story_2 */
.story_2 {  }
.story_2 .story_inner { margin:0 auto; width:calc(100vw - 74px); }
.story_2 .story_inner > div { position:relative; }
.story_2 .story_inner > div .visual_wrap { margin-right:5px; }
.story_2 .story_inner > div .visual_wrap .video_wrap { position:relative; margin:0 auto; width:283px; height:560px; }
.story_2 .story_inner > div .visual_wrap .video_wrap:before { content:''; position:absolute; top:0; left:2px; display:block; width:277px; height:560px; box-shadow:8px 10px 20px 0 rgba(0, 0, 0, 0.43); border-radius:45px; z-index:-1; }
.story_2 .story_inner > div .visual_wrap .video_wrap .__frame { position:absolute; top:0; left:0; width:100%; height:100%; background:url(../../img/frame.svg) no-repeat center center; z-index:2; }

.video_box { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:274px; height:560px; border-radius:45px; transition:all .5s ease; z-index:1; overflow:hidden; }
.bridge_panel { width:278px; height:560px; margin:0 auto; }
.bridgeVideo { width:100%; height:100%; min-width:301px; min-height:560px; }
.video_controls { display:none; }
.story_2 .__source { display:none; position:absolute; top:144px; left:-57px; transform:rotate(90deg); color:#8d8d8d; font-size:14px; letter-spacing:-.42px; }
.story_2 .btn_play { display:none; opacity:0; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:70px; height:70px; background:url(../img/btn_play.svg) no-repeat center center; background-size:100% auto; z-index:10; }
.story_2 .btn_play.active { display:block; opacity:1; }

.story_2 .story_inner h2 { width:180px; }
.story_2 .story_inner h6 { font-size:23px; line-height:32px; font-weight:700; letter-spacing:-.69px; }
.story_2 .story_inner p { margin-top:20px; width:calc(100vw - 74px); }
.story_2 .story_inner p span { color:#8d8d8d; font-size:13px; letter-spacing:-.42px; }
.story_2 .story_inner .__reels { margin-top:70px; }
.story_2 .story_inner .__reels .visual_wrap .video_wrap .__frame:after { content:''; position:absolute; top:0; left:0; width:278px; height:560px; background:url(../../img/frame_reels.png) no-repeat center center; background-size:278px auto; }
.story_2 .story_inner .__reels .txt_wrap { position:relative; margin-top:103px; }
.story_2 .story_inner .__reels .txt_wrap .rolling { position:relative; margin-top:58px; width:100vw; height:70px; }
.story_2 .story_inner .__reels .txt_wrap p:nth-child(4) { margin-top:55px; }
.story_2 .story_inner .__reels .txt_wrap h4 { position:absolute; top:0; left:0; width:204px; height:70px; background:url(../../img/reels.svg) no-repeat center center; background-size:100% auto; text-indent:-9999em; z-index:4; }

.story_2 .story_inner .__creator { margin-top:129px; }
.story_2 .story_inner .__creator .visual_wrap h4 { position:absolute; top:473px; left:96px; width:496px; height:102px; background:url(../../img/creator.svg) no-repeat center center; text-indent:-9999em; z-index:4; }
.story_2 .story_inner .__creator .visual_wrap .video_wrap .__insta_ui { position:absolute; top:0; left:0; width:278px; height:560px; background:url(../../img/frame_creator.svg) no-repeat center center; z-index:5; }
.story_2 .story_inner .__creator .visual_wrap .video_wrap .video_box { top:calc(50% - 20px); width:250px; border-radius:0; }
.story_2 .story_inner .__creator .visual_wrap .video_wrap .bridgeVideo { width:250px; min-width:250px; }
.story_2 .story_inner .__creator .txt_wrap { position:relative; margin-top:130px; }
.story_2 .story_inner .__creator .txt_wrap .rolling { position:relative; margin-top:62px; width:100vw; height:71px; }
.story_2 .story_inner .__creator .txt_wrap p:nth-child(4) { margin-top:70px; }
.story_2 .story_inner .__creator .txt_wrap h4 { position:absolute; top:0; left:0; width:346px; height:71px; background:url(../../img/creator.svg) no-repeat center center; background-size:100% auto; text-indent:-9999em; z-index:4; }

.story_2 .story_inner .__shopping { margin-top:93px; }
.story_2 .story_inner .__shopping .visual_wrap h4 { position:absolute; top:633px; left:855px; width:530px; height:131px; background:url(../../img/shopping.svg) no-repeat center center; text-indent:-9999em; z-index:4; }
.story_2 .story_inner .__shopping .visual_wrap .video_wrap .video_box { width:252px; height:538px; border-radius:30px; }
.story_2 .story_inner .__shopping .visual_wrap .video_wrap .bridgeVideo { position:absolute; top:calc(50% + 6px); left:50%; transform:translate(-50%, -50%); min-width:252px; }
.story_2 .story_inner .__shopping .txt_wrap { position:relative; margin-top:133px; }
.story_2 .story_inner .__shopping .txt_wrap .rolling { position:relative; margin-top:62px; width:100vw; height:92px; }
.story_2 .story_inner .__shopping .txt_wrap p:nth-child(4) { margin-top:60px; }
.story_2 .story_inner .__shopping .txt_wrap h4 { position:absolute; top:0; left:0; width:369px; height:92px; background:url(../../img/shopping.svg) no-repeat center center; background-size:100% auto; text-indent:-9999em; z-index:4; }

.story_2 .__shopping .swiper-slide img { width:252px; }

/* story 3 */
.story_3 { margin-top:82px; height:100vh; min-height:100vh; background: linear-gradient(71deg, #ffd600 6%, #ff7a00 37%, #ff0069 69%, #d300c5 99%); }
.story_3 .__bg { position:absolute; top:0; left:0; width:100vw; height:100%; background:url(../img/bg_4.jpg) center center; background-size:cover; z-index:1; }
.story_3 .__header { position:relative; display:flex; align-items: center; justify-content: center; width:100vw; height:100%; z-index:2; }
.story_3 .__header .title_wrap h5 { font-family:'InstagramSansHeadline'; color:#fff; font-size:18px; letter-spacing:-.54px; text-align:center; }
.story_3 .__header .title_wrap h2 { margin-top:6px; color:#fff; font-size:26px; line-height:39px; letter-spacing:-.78px; font-weight:600; text-align:center; }

/* musinsa */
.musinsa { margin-top:70px; }
.musinsa .lookbook .lookbook_inner { position:relative; margin:0 auto; width:calc(100vw - 74px); }

.musinsa .lookbook .txt_wrap h3 { font-size:24px; letter-spacing:-.72px; font-weight:700; }
.musinsa .lookbook .txt_wrap p { margin-top:15px; }

.musinsa .lookbook .visual_wrap { position:relative; margin:0 auto; margin-top:43px; width:278px; height:560px; }
.musinsa .lookbook .visual_wrap .frame_back { position:relative; width:278px; height:560px; background:url(../img/frame_mss.svg) no-repeat center center; z-index:1; }
.musinsa .lookbook .visual_wrap .img_box { position:absolute; top:105px; left:15px; width:248px; height:330px; z-index:3; overflow:hidden; }
.musinsa .lookbook .visual_wrap .img_box img { position:relative; width:248px; height:310px; }
.musinsa .lookbook .visual_wrap .frame_top { position:absolute; top:0; left:0; width:278px; height:560px; background:url(../../img/frame.svg) no-repeat center center; z-index:2; }
.musinsa .lookbook .visual_wrap .frame_top:before { content:''; position:absolute; top:0; left:0; display:block; width:277px; height:560px; box-shadow:8px 10px 20px 0 rgba(0, 0, 0, 0.43); border-radius:45px; z-index:-1; }

.musinsa .lookbook .swiper-container { height:330px; }
.musinsa .lookbook .swiper-slide { width:248px; }
.musinsa .lookbook .swiper-pagination-bullet { margin:0 2px; width:4px; height:4px; }
.musinsa .lookbook .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom:0; }

/* musinsa qna */
.qna { margin-top:97px; }
.qna ul li { position:relative; margin:0 auto; margin-top:8px; width:calc(100vw - 60px); }
.qna ul li .qna_title { display:block; margin:0 auto; padding:0 23px; width:calc(100vw - 60px); border:1px solid #ff0069; border-radius:27px; text-decoration:none; }
.qna ul li .qna_title span { display:inline-block; color:#000; font-size:18px; line-height:53px; font-weight:700; letter-spacing:-.54px; }
.qna ul li .qna_title span.__btn { position:absolute; top:11px; right:11px; width:31px; height:31px; background:linear-gradient(48deg, #ffd600 -2%, #ff7a00 31%, #ff0069 65%, #d300c5 97%); border-radius:100%; }
.qna ul li .qna_title span.__btn i { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:15px; height:15px; background:url(../img/ico_plus.svg) no-repeat center center; }
.qna ul li .qna_title.active { display:block; border:0; padding:0 24px; width:calc(100vw - 58px); background:linear-gradient(80deg, #ffd600 -7%, #ff7a00 32%, #ff0069 72%, #d300c5 109%); }
.qna ul li .qna_title.active span { color:#fff; }
.qna ul li .qna_title.active span.__btn { background:#fff; }
.qna ul li .qna_title.active span.__btn i { background:url(../img/ico_minus.svg) no-repeat center center; }
.qna ul li .__box { display:none; margin-top:8px; padding-bottom:29px; background:#f4f4f4; border-radius:23px; }
.qna ul li .__box .__top { display:flex; padding:0 21px; padding-top:37px; }
.qna ul li .__box .__top .profile img { width:43px; }
.qna ul li .__box .__top .name { margin-left:11px; width:190px; }
.qna ul li .__box .__top .name h6 { font-size:16px; line-height:25px; font-weight:400; letter-spacing:-.48px;}
.qna ul li .__box .__top .name h5 { font-size:19px; line-height:25px; font-weight:700; letter-spacing:-.57px;}
.qna ul li .__box .__content p { margin:0 auto; margin-top:24px; width:calc(100vw - 106px); font-size:16px; line-height:26px; font-weight:400; letter-spacing:-.48px; }
.qna ul li .__box .__content p a { display:inline-block; position:relative; color:#000; text-decoration:none; }
.qna ul li .__box .__content p a:before { content:''; position:absolute; bottom:4px; left:0; width:100%; height:1px; background:#000; }

/* casetify */
.casetify { margin-top:70px; }
.casetify .lookbook .lookbook_inner { position:relative; margin:0 auto; width:calc(100vw - 74px); }

.casetify .lookbook .txt_wrap h3 { font-size:24px; letter-spacing:-.72px; font-weight:700; }
.casetify .lookbook .txt_wrap p { margin-top:15px; }

.casetify .lookbook .visual_wrap { position:relative; margin:0 auto; margin-top:43px; width:278px; height:560px; }
.casetify .lookbook .visual_wrap .frame_back { position:relative; width:278px; height:560px; background:url(../img/frame_ctf.svg) no-repeat center center; z-index:1; }
.casetify .lookbook .visual_wrap .img_box { position:absolute; top:105px; left:15px; width:248px; height:330px; z-index:3; overflow:hidden; }
.casetify .lookbook .visual_wrap .img_box img { position:relative; width:248px; height:310px; }
.casetify .lookbook .visual_wrap .frame_top { position:absolute; top:0; left:0; width:278px; height:560px; background:url(../../img/frame.svg) no-repeat center center; z-index:2; }
.casetify .lookbook .visual_wrap .frame_top:before { content:''; position:absolute; top:0; left:0; display:block; width:277px; height:560px; box-shadow:8px 10px 20px 0 rgba(0, 0, 0, 0.43); border-radius:45px; z-index:-1; }

.casetify .lookbook .swiper-container { height:330px; }
.casetify .lookbook .swiper-slide { width:248px; }
.casetify .lookbook .swiper-pagination-bullet { margin:0 2px; width:4px; height:4px; }
.casetify .lookbook .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom:0; }









.casetify .collabo { position:relative; margin-top:147px; }
.casetify .collabo h1 { position:relative; margin:0 auto; width:294px; height:123px; text-indent:-9999em; }
.casetify .collabo h1 .__cover { position:absolute; top:0; left:0; width:294px; height:123px; background:url(../img/collabo.svg) no-repeat center center; background-size:100% auto; z-index:2; }
.casetify .collabo h1 .__fill { position:absolute; top:2px; left:2px; width:290px; height:120px; background:#000; z-index:-1; }

.casetify .collabo .visual_wrap { position:relative; margin:0 auto; margin-top:75px; width:calc(100vw - 74px); height:330px; }
.casetify .collabo .visual_wrap img { position:absolute; margin:0; padding:0; display:block; }
.casetify .collabo .visual_wrap img.inap_1 { top:133px; left:-7px; width:134px; }
.casetify .collabo .visual_wrap img.inap_2 { top:0; right:-7px; width:167px; }
.casetify .collabo .visual_wrap.visual_2 { margin-top:48px; height:240px; }
.casetify .collabo .visual_wrap img.inap_3 { top:0; left:-7px; width:122px; }
.casetify .collabo .visual_wrap img.inap_4 { top:62px; right:-7px; width:178px; }

.casetify .collabo .col_txt_wrap { position:relative; margin:0 auto; margin-top:77px; width:calc(100vw - 74px); }
.casetify .collabo .col_txt_wrap .txt_wrap_inner { text-align:center; }
.casetify .collabo .col_txt_wrap h2 { margin:0 auto; width:201px; }
.casetify .collabo .col_txt_wrap p { margin-top:52px; }

.casetify .collabo .about { display:flex; align-items: center; justify-content: center; margin-top:131px; width:100vw; height:551px; background:url(../img/inapsquare_bg.jpeg); background-size:cover; background-position:center center; }
.casetify .collabo .about .__dimmed { display:block; position:absolute; bottom:0; left:0; width:100%; height:551px; background:#000; z-index:10; }
.casetify .collabo .about .inner { width:100vw; height:551px; background:rgba(0,0,0,.61); }
.casetify .collabo .about .inner ul { width:566px; }
.casetify .collabo .about .inner .__content { top:50%; transform:translateY(-50%); color:#fff; }
.casetify .collabo .about .inner .__content h6 { margin-top:120px; font-size:24px; letter-spacing:-.72px; text-align:center; }
.casetify .collabo .about .inner .__content p { margin:0 auto; margin-top:28px; width:calc(100vw - 74px); font-size:16px; line-height:27px; letter-spacing:-.48px; text-align:center; }

.collabo .swiper-slide { opacity:0; transition:all .5s ease; }
.collabo .swiper-slide-active { opacity:1; }
.collabo .swiper-button-prev, .swiper-container-rtl .swiper-button-next { top:50%; left:57px; width:19px; height:35px; background:url(../img/swiper_prev.svg) no-repeat center center !important; }
.collabo .swiper-button-next, .swiper-container-rtl .swiper-button-prev { top:50%; right:57px; width:19px; height:35px; background:url(../img/swiper_next.svg) no-repeat center center !important; }
.collabo .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom:50px; }
.collabo .swiper-pagination-bullet { margin-bottom:2px !important; background:#5a5a5a; opacity:1; transition:all .3s ease; }
.collabo .swiper-pagination-bullet-active { margin-bottom:0 !important; width:12px; height:12px; background:#fff; }

/* howto */
.howto { display:flex; height:auto; min-height:auto; background:#f7f7f7; }
.howto .__white { position:absolute; bottom:0; left:0; width:100%; height:0; background:#fff; }
.howto .howto_inner { position:relative; margin:0 auto; width:100vw; /*height:689px; min-height:689px;*/ }
.howto .txt_wrap { position:relative; padding-top:90px; padding-bottom:110px; width:100vw; height:auto; background:linear-gradient(38deg, #ffd600 -9%, #ff7a00 34%, #ff0069 78%, #d300c5 119%); }
.howto .txt_wrap h5 { font-family:"InstagramSans"; color:#fff; font-size:16px; letter-spacing:-.48px; font-weight:400; text-align:center; }
.howto .txt_wrap h2 { margin-top:4px; color:#fff; font-size:26px; line-height:31px; letter-spacing:-.78px; text-align:center; }
.howto .txt_wrap p { margin:0 auto; margin-top:35px; width:calc(100vw - 74px); color:#fff; font-size:16px; line-height:27px; letter-spacing:-.48px; text-align:center; }

.howto .visual_wrap {}
.howto .visual_wrap p.__attract { margin-top:54px; margin-bottom:62px; color:#363636; font-size:17px; line-height:20px; letter-spacing:-.51px; font-weight:700; text-align:center; }
.howto .category { position:relative; margin:0 auto; margin-top:48px; margin-bottom:70px; width:315px; height:256px; }
.howto .category .__category { position:relative; margin:0 auto; margin-top:12px; padding-left:44px; width:315px; height:78px; font-size:21px; line-height:78px; letter-spacing:-.63px; font-weight:600; background:#fff; border-radius:20px; box-shadow:0 0 0 1px #d3d3d3 inset; cursor:pointer; }
.howto .category .__category:nth-child(1) { margin-top:0;}
.howto .category .__category span { position:absolute; top:18px; right:33px; width:42px; height:42px; border-radius:100%; background:linear-gradient(48deg, #ffd600 -2%, #ff7a00 31%, #ff0069 65%, #d300c5 97%); }
.howto .category .__category span i { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:20px; height:17px; background:url(../img/ico_plus.svg) no-repeat center center; }

.howto .category .__category.active { color:#fff; box-shadow:0 0 0 0; background:linear-gradient(75deg, #ffd600 -7%, #ff7a00 32%, #ff0069 72%, #d300c5 109%); }
.howto .category .__category.active span { background:#fff; }
.howto .category .__category.active span i { background:url(../img/ico_minus.svg) no-repeat center center; }

.howto .category .__category.wait { box-shadow:0 0 0 1px #d3d3d3 inset; background:#fff; }
.howto .category .__category.wait span { background:linear-gradient(48deg, #ffd600 -2%, #ff7a00 31%, #ff0069 65%, #d300c5 97%);; }
.howto .category .__category.wait span i { background:url(../img/ico_plus.svg) no-repeat center center; }

.howto .bot { position:relative; margin:0 auto; width:300px; height:605px; background:url(../../img/frame_insta.svg) no-repeat center center; }
.howto .bot:before { content:''; position:absolute; top:0; left:2px; display:block; width:295px; height:605px; box-shadow:8px 10px 20px 0 rgba(0, 0, 0, 0.43); border-radius:45px; z-index:-1; }
.howto .bot .content { overflow:auto; position:absolute; top:86px; left:50%; transform:translateX(-50%); width:300px; height:437px; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ }
.howto .bot .content::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/ }
.howto .bot .content .inner { padding:0 33px; }
.howto .bot .content .inner .blank { height:0; }
.howto .bot .content .inner .blank.__active { height:437px; }
.howto .bot .content .inner .blank.__left { height:0 !important; }
.howto .bot .content .inner .btn_wrap { display:flex; flex-wrap:wrap; gap:5px; padding-top:14px; }
.howto .bot .content .inner .btn_wrap .__btn { padding:11px 21px; color:#0098fe; font-size:13px; font-weight:600; background:#f2f2f2; border-radius:19px; cursor:pointer; }
.howto .bot .content .inner .btn_wrap.__creator .__btn:nth-child(5),
.howto .bot .content .inner .btn_wrap.__creator .__btn:nth-child(6) { padding:11px 18px; }

.howto .bot .content .inner .chat { display:flex; flex-wrap:wrap; flex-direction:column; justify-content:flex-start; }
.howto .bot .content .inner .chat .__talk { margin-top:9px; padding:12px 10px; color:#040505; font-size:12px; line-height:17px; letter-spacing:-.28px; border-radius:12px; }
.howto .bot .content .inner .chat .__talk.a { align-self:flex-start; position:relative; margin-left:29px; box-shadow:0 0 0 1px #d3d4d3 inset; }
.howto .bot .content .inner .chat .__talk.a:before { content:''; position:absolute; left:-32px; bottom:0; width:25px; height:25px; background:url(../../img/insta_ico.png) no-repeat center center; background-size:25px auto; }
.howto .bot .content .inner .chat .__talk.q { align-self:flex-end; max-width:200px; background:#f2f2f2; }
.howto .bot .content .inner .chat .__talk a { color:#0098fe; text-decoration:none; font-weight:700; }

.howto .bot .__typing { position:absolute; bottom:55px; left:56px; width:100%; height:12px; color:#606060; font-size:10px; letter-spacing:.19px; }

.howto .category_2 { display:flex; margin-top:22px; width:100vw; height:47px; background:#000;}
.howto .category_2 .__category { position:relative; width:33.3vw; color:#fff; font-size:14px; line-height:47px; letter-spacing:-.42px; text-align:center; }
.howto .category_2 .__category:before { content:''; position:absolute; top:50%; left:0; transform:translateY(-50%); width:1px; height:35px; background:#707070; }
.howto .category_2 .__category:nth-child(1):before { width:0; }

/* outro */
.outro { display:flex; align-items: center; justify-content: center; height:calc(100vh - 190px); min-height:495px; }
.outro .outro_inner .img_wrap { position:relative; display:block; margin:0 auto; margin-top:49px; width:111px; height:111px; }
.outro .outro_inner .img_wrap .__svg { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; height:100%; }
.outro .outro_inner .img_wrap svg { width:100%; height:100%; }
.outro .outro_inner .img_wrap svg .cls-1 { fill:#fff; }
.outro .outro_inner .img_wrap .insta_bg_1 { position:absolute; top:0; left:0; width:100%; height:100%; background:url(../../img/insta_gradient.png) no-repeat center center; background-size:100% auto; clip-path: url(#layer_1); }
.outro .outro_inner .img_wrap .insta_bg_2 { position:absolute; top:0; left:0; width:100%; height:100%; background:url(../../img/insta_gradient.png) no-repeat center center; background-size:100% auto; clip-path: url(#layer_3); }
.outro .outro_inner .img_wrap .insta_bg_3 { position:absolute; top:0; left:0; width:100%; height:100%; background:url(../../img/insta_gradient.png) no-repeat center center; background-size:100% auto; clip-path: url(#layer_5); }


.outro .outro_inner .txt_wrap { width:100vw; text-align:center; }
.outro .outro_inner .txt_wrap h2 { color:#000; font-size:20px; line-height:25px; letter-spacing:-.6px; background:transparent; }
.outro .outro_inner .txt_wrap h5 { margin-top:9px; font-family:"InstagramSans"; font-size:16px; letter-spacing:-.48px; font-weight:400; }
.outro .outro_inner .txt_wrap p { margin-top:32px; width:477px; }
.outro .outro_inner a { display:block; position:relative; margin:0 auto; margin-top:49px; padding-left:49px; width:191px; height:52px; color:#fff; font-size:19px; line-height:52px; font-weight:700; letter-spacing:-.57px; background:linear-gradient(80deg, #ffd600 -6%, #ff7a00 31%, #ff0069 70%, #d300c5 106%); border-radius:29px; text-decoration:none; }
.outro .outro_inner a span { position:absolute; top:6px; right:7px; width:40px; height:40px; border-radius:100%; background:#fff; overflow:hidden; }
.outro .outro_inner a span i { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:20px; height:18px; background:url(../../img/btn_arrow.svg) no-repeat center center; }
.outro .outro_inner a:hover span i { animation: btn_arrow .7s ease; }

@keyframes btn_arrow {
    0% { transform:translate(-50%, -50%); }
    60% { transform:translate(150%, -50%); }
    61% { transform:translate(-150%, -50%); }
    100% { transform:translate(-50%, -50%); }
}

/* footer */
.footer { height:auto; min-height:auto; }

.copyright { display:block; position:relative; margin:0 auto; padding:40px 0; width:calc(100vw - 48px); height:auto; background:#000; color:#e0e0e0; z-index:1; }
.copyright { display:block; position:relative; padding:28px 0 36px; width:100%; height:auto; background:#000; color:#e0e0e0; font-size:14px; font-weight:300; /*border-top:1px solid #fff;*/ z-index:1; }
.copyright .wrap { display:flex; margin:0 auto; width:calc(100vw - 40px); }
.copyright p { margin:0; font-size:12px; line-height:20px; letter-spacing:-.36px; font-weight:400; text-align:left; }
.copyright p.p-text { font-weight:400; line-height:24px; letter-spacing:0; }
.copyright p b { margin-right:5px; font-weight:600; }
.copyright p span.__line { display:inline-block; padding:0 2px 0 4px; color:#999; line-height:20px; }

.copyright p.p_colnom { margin-top:2px; line-height:18px; }
.copyright p.p_colnom b { margin-right:2px; }
.copyright p .footer_mail { color:#e0e0e0; font-size:12px; letter-spacing:.13px; -webkit-transition:color .3s ease; transition:color .3s ease; text-decoration:none; }
.copyright p .footer_mail i { width:18px; height:13px; background:url(../img/ic_mail.svg) no-repeat center center; position:relative; display:inline-block; margin-right:2px; vertical-align:text-top; }

.copyright .__copyright { margin-top:13px; color:#616161; font-size:12px; }


@media (max-width: 320px){ 
    .switch ul li .inner p { font-size:14px; }

    .story_2 .story_inner > div .visual_wrap { margin-left:-15px; margin-right:auto; }

    .musinsa .lookbook .visual_wrap { margin-left:-15px; }
    .qna ul li .qna_title { padding:0 14px; }
    .qna ul li .qna_title.active { padding:0 15px; }
    .qna ul li .qna_title span { font-size:15px; }
    .qna ul li .__box .__top .name h6 { font-size:15px; }    

    .casetify .lookbook .visual_wrap { margin-left:-15px; }

    .casetify .collabo .about .inner .__content h6 { font-size:20px; }
    .casetify .collabo .about .inner .__content p { font-size:15px; }

    .howto .visual_wrap p.__attract { font-size:15px; }
    .howto .category .__category { width:280px; }
}

@media (max-width: 280px){ 
    h2 { font-size:24px; }

    .switch h2 { width:100vw; }

    .story_2 .story_inner > div .visual_wrap { margin-left:-38px; }

    .musinsa .lookbook .visual_wrap { margin-left:-38px; }
    .qna ul li .qna_title { padding:0 10px; }
    .qna ul li .qna_title.active { padding:0 11px; }
    .qna ul li .qna_title span { font-size:14px; }
    .qna ul li .__box .__top .name { margin-left:8px; }
    .qna ul li .__box .__top .name h6 { font-size:12px; }
    .qna ul li .__box .__top .name h5 { font-size:18px; }
    
    .casetify .lookbook .visual_wrap { margin-left:-38px; }

    .howto .category { width:100vw; }
    .howto .category .__category { padding-left:24px; width:250px; }
    .howto .category .__category span { right:24px; }

    .howto .bot { margin-left:-10px; }

    .outro .outro_inner .txt_wrap h2 { font-size:18px; }

    .copyright .wrap { width:calc(100vw - 70px); }
}