@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");
}


* { box-sizing: border-box; }

.brand-identity a { display:inline-block; width:120px; height:44px; background:url(../img/logo.svg) no-repeat center center; background-size:100% auto; text-indent:-10000em; vertical-align:middle; }
.forehead .sns-share-box ul li a { text-indent:-9999em; }

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

section { position:relative; width:100%; height:auto; overflow:hidden; }

h1 { font-size:3.91vw; }
h2 { font-size:3.13vw; line-height:3.91vw; letter-spacing:-.16vw; }

p { font-size:18px; line-height:27px; letter-spacing:-.9px; }

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after,
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { display:none; }

.__pc { display:block; }
.__pad { display:none; }
.__pad2 { display:none; }
.__mo { display:none; }

.gnb_pc { display:block; }
.gnb_mo { display:none; }

.video_poster.remove { opacity:0; }

/* intro */
.intro { display:flex; justify-content:center; align-items:center; width:100%; height:100vh; background:#000; }
.intro .__bg { position:absolute; top:0; left:0; width:100%; height:100%; background:url(../img/intro_bg.png) no-repeat center center; background-size:cover; }

.intro > * { margin-top:78px; opacity:0; }

.intro h3 { position:relative; margin:0 auto; width:fit-content; height:40px; color:#fff; font-size:34px; letter-spacing:-1.02px; font-weight:400; text-align:center; overflow:hidden; }
.intro h1 { position:relative; width:1059px; height:100px; text-indent:-9999em; overflow:hidden; }
.intro h3 span { display:block; width:100%; height:100%; }
.intro h1 span { display:block; width:100%; height:100%; background:url(../img/amaranth10.svg) no-repeat center center; background-size:auto 100%; }

.intro .visual_wrap { position:relative; margin:0 auto; margin-top:50px; width:500px; height:500px; }
.intro .visual_wrap img { display:block; position:absolute; top:0; left:0; width:500px; height:500px; }

.intro .visual_wrap img.intro_visual_1 { animation:twinkle_one 3s ease-in-out infinite ; }
.intro .visual_wrap img.intro_visual_2 { animation:twinkle_two 12s ease-in-out infinite ; }
.intro .visual_wrap img.intro_visual_3 { animation:twinkle_three 7s ease-in-out infinite ; }

@keyframes twinkle_one {
    0%   { opacity: 1; }
    30%  { opacity: 0.7; }
    70%  { opacity: 0.4; }
    100% { opacity: 1; }
}

@keyframes twinkle_two {
    0%   { opacity: 1; }
    25%  { opacity: 0.2; }
    80%  { opacity: 0.8; }
    100% { opacity: 1; }
}

@keyframes twinkle_three {
    0%   { opacity: 1; }
    30%  { opacity: 0.8; }
    40%  { opacity: 0.3; }
    100% { opacity: 1; }
}


/* sec2 */
.marquee { width:auto; }
.__mq { position:relative; height:58px; width:max-content; }
.__mq .mq_box { white-space:nowrap; }


.sec2 { background:#000; padding-bottom:160px; }

.sec2 .title_wrap { margin-top:88px; color:#fff; text-align:center; }
.sec2 .title_wrap h2 + p { margin-top:20px; }
.sec2 .title_wrap + div { margin-top:93px; }

.sec2 .__mq { margin-top:25px; }
.sec2 ul { display:flex; }
.sec2 ul li { margin-left:10px; }
.sec2 ul li.__short { width:58px; height:58px; border-radius:58px; }
.sec2 ul li.__long { width:141px; height:58px; border-radius:50px; }
.sec2 ul li.__content { display:flex; width:fit-content; height:58px; background:#fff; border-radius:50px; }
.sec2 ul li.__content .__avatar { margin-top:2px; margin-left:2px; width:54px; height:54px; border-radius:100%; }
.sec2 ul li.__content .__avatar img { display:inline-block; width:inherit; height:inherit; }
.sec2 ul li.__content .__avatar + p { display:inline-block; margin-left:13px; padding-right:21px; line-height:58px; }


.sec2 .__blue { background:#156df4; }
.sec2 .__mint { background:#4edcb4; }
.sec2 .__yellow { background:#fee041; }
.sec2 .__pink { background:#ff7d8e; }
.sec2 .__red { background:#ef4837; }
.sec2 .__purple { background:#a86ad4; }


/* sec3 */
.sec3 { background:#000; }
.sec3 .__inner { position:relative; display:flex; margin:4.17vw auto; width:89.69vw; height:33.33vw; }

.sec3 .__inner .swiper_box { position:relative; width:37.61vw; }
.sec3 .__inner .swiper_video { width:52.08vw; overflow:hidden; }

.sec3 .__inner .swiper_box .swiper-slide { padding:5.73vw 0 7.81vw 5.63vw; color:#fff; border-radius:1.04vw 0 0 1.04vw; overflow:hidden; }
.sec3 .__inner .swiper_box .slide_1 { background:#872989; }
.sec3 .__inner .swiper_box .slide_2 { background:#7935ff; }
.sec3 .__inner .swiper_box .slide_3 { background:#5447ff; }
.sec3 .__inner .swiper_box .slide_4 { background:#476cff; }

.sec3 .__inner .swiper_box .swiper-slide .txt_wrap h6 { font-size:1.25vw; line-height:.94vw; letter-spacing:-.006vw; }
.sec3 .__inner .swiper_box .swiper-slide .txt_wrap h6 i { font-style:normal; font-weight:100; }
.sec3 .__inner .swiper_box .swiper-slide .txt_wrap h2 { margin-top:1.04vw; font-size:3.13vw; line-height:3.65vw; letter-spacing:-.016vw; }
.sec3 .__inner .swiper_box .swiper-slide .txt_wrap p { margin-top:2.08vw; font-size:1.04vw; line-height:1.56vw; letter-spacing:-.005vw; }
.sec3 .__inner .swiper_box .slide_4 .txt_wrap h2 { font-size:2.86vw; }


.sec3 .__inner .swiper_box .swiper-slide a { display:block; position:absolute; bottom:7.81vw; left:5.4vw; padding-left:1.09vw; width:8.29vw; height:2.29vw; color:#fff; font-size:1.04vw; line-height:2.29vw; letter-spacing:-.005vw; border:1px solid #fff; border-radius:.52vw; text-decoration:none; transition:all .3s ease; cursor:pointer; }
.sec3 .__inner .swiper_box .swiper-slide a i { position:absolute; top:0.74vw; right:0.74vw; width:0.73vw; height:0.73vw; background:url(../img/ic_arrow.svg) no-repeat center center; background-size:100% auto; }

.sec3 .__inner .swiper_box .swiper-slide a:hover { background:#fff; }

.sec3 .__inner .swiper_box .swiper-slide.slide_1 a:hover { color:#872989; }
.sec3 .__inner .swiper_box .swiper-slide.slide_2 a:hover { color:#7935ff; }
.sec3 .__inner .swiper_box .swiper-slide.slide_3 a:hover { color:#5447ff; }
.sec3 .__inner .swiper_box .swiper-slide.slide_4 a:hover { color:#476cff; }

.sec3 .__inner .swiper_box .swiper-slide.slide_1 a:hover i { background:url(../img/ic_arrow_h1.svg); }
.sec3 .__inner .swiper_box .swiper-slide.slide_2 a:hover i { background:url(../img/ic_arrow_h2.svg); }
.sec3 .__inner .swiper_box .swiper-slide.slide_3 a:hover i { background:url(../img/ic_arrow_h3.svg); }
.sec3 .__inner .swiper_box .swiper-slide.slide_4 a:hover i { background:url(../img/ic_arrow_h4.svg); }


.sec3 .__inner .swiper_video .swiper-slide { border-radius:0 1.04vw 1.04vw 0; overflow:hidden; }
.sec3 .__inner .swiper_video .swiper-slide video { width:100%; }


.sec3 .swiper-control { display:block; position:absolute; bottom:4.79vw; left:5.4vw; width:100%; height:20px; z-index:10; }
.sec3 .swiper-control .swiper-button-prev { position:absolute; top:auto; bottom:0; left:0; padding:10px; width:6px; height:12px; background:url(../img/btn_prev.svg) no-repeat center center; background-size:6px 12px; }
.sec3 .swiper-control .swiper-button-next { position:absolute; top:auto; bottom:0; left:133px; padding:10px; width:6px; height:12px; background:url(../img/btn_next.svg) no-repeat center center; background-size:6px 12px; }

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after,
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { display:none; }
.sec3 .swiper-pagination { display:flex; gap:12px; position:absolute; left:30px; top:3px; width:fit-content; }
.sec3 .swiper-pagination-vertical.swiper-pagination-bullets, .sec3 .swiper-vertical>.swiper-pagination-bullets { right:auto; left:20px; top:auto; bottom:-16px; }
.sec3 .swiper-pagination-bullet { opacity:1; margin:0 !important; width:14px; height:14px; background:transparent; border:1px solid #fff; border-radius:100%; }
.sec3 .swiper-pagination-bullet-active { background:#fff; }

.sec3 .swiper-control .swiper-button-autoplay { position:absolute; bottom:4px; left:157px; width:16px; height:16px; }
.sec3 .swiper-control .swiper-button-autoplay > div { position:absolute; top:0; left:0; padding:10px; width:14px; height:14px; transition:background .3s ease; }
.sec3 .swiper-control .swiper-pause { background:url(../img/btn_swiper_pause.svg) no-repeat center center; background-size:14px 14px; cursor:pointer; z-index:2; }
.sec3 .swiper-control .swiper-start { display:none; background:url(../img/btn_swiper_play.svg) no-repeat center center; background-size:14px 14px; cursor:pointer; z-index:-1; }


/* sec4 */
.sec4 { padding-top:111px; background:#000; }
.sec4 h1 { color:#fff; text-align:center; }

.sec4 .video_wrap { position:relative; margin:0 auto; margin-top:60px; margin-bottom:160px; width:1180px; height:664px; background:transparent; background-size:100% auto; border-radius:20px; overflow:hidden; }

/*.sec4 .video_wrap .__poster { width:100%; height:100%; background:url(../img/poster_0.jpg) no-repeat center center; background-size:100% auto; }
.sec4 .video_wrap .__poster.fade { display:none; }
.sec4 .video_wrap .__video { width:100%; height:100%; }

.sec4 .video_wrap .__poster .btn_play { display:block; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:110px; height:110px; background:url(../img/btn_play.svg) no-repeat center center; background-size:100% auto; transition:all .3s ease; cursor:pointer; transform-origin:top left; }
.sec4 .video_wrap .__poster .btn_play:hover { transform:scale(1.1) translate(-50%, -50%); }*/

.sec4 .video_wrap .video_poster { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:inherit; height:inherit; transition:all .3s ease; z-index:10; }
.sec4 .video_wrap .video_poster .video_thumb { width:inherit; height:inherit; background:url(../img/poster_one.jpg) no-repeat center center; background-size:100% 100%; }

.video_wrap .video_poster .btn_play { display:block; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:110px; height:110px; background:url(../img/btn_play.svg) no-repeat center center; background-size:100% auto; transition:all .3s ease; cursor:pointer; transform-origin:top left; }
.video_wrap .video_poster .btn_play:hover { transform:scale(1.1) translate(-50%, -50%); }

.sec4 .video_wrap video{ position:absolute; top:0; left:0; width:100%; height:100%; background-size:cover; background-position:center; object-fit:cover;}
.sec4 .video_wrap .__cover{position:absolute; top:0; left:0; bottom:0; z-index:2; width:100%; height:100%; background:rgba(0,0,0,0.3);}


/* sec5 */
.sec5 { min-height:500px; }

.sec5 .fixed_area { position:absolute; left:0; top:0; width:445px; height:100%; overflow:hidden; background:#7935ff; z-index:3; }
.sec5 .fixed_area .fixed_area_inner { position:absolute; left:0; top:0; width:inherit; height:100vh; }

.sec5 .fixed_area .__contents { margin-top:115px; }
.sec5 .fixed_area .__contents img { display:block; margin:0 auto; width:169px; height:24px; }
.sec5 .fixed_area .__contents img + img { margin-top:30px; width:233px; height:233px; }

.sec5 .fixed_area .__contents .txt_wrap { margin-top:30px; color:#fff; }
.sec5 .fixed_area .__contents .txt_wrap h4 { font-size:28px; line-height:38px; letter-spacing:-1.4px; text-align:center; }
.sec5 .fixed_area .__contents .txt_wrap h4 + p { margin:0 auto;  margin-top:20px; width:347px; font-size:20px; line-height:30px; letter-spacing:-1px; }


.sec5 .scroll_area { width:100%; height:100%; z-index:2; }
.sec5 .scroll_area_inner { width:100%; height:100%; overflow:inherit; box-sizing:border-box; }
.sec5 .scroll_area_inner > .list_area { padding:75px 59px 0 500px; min-height:750px; box-sizing:border-box; }

.sec5 .grid_box.grid_3 { position:relative; display:block; }
.sec5 .grid_box.grid_2 { position:relative; display:none; }

.sec5 .grid_box .grid_container { display:flex; }
.sec5 .grid_box .grid_container ul { display:inline-block; width:33.33%; font-size:0; vertical-align:top; box-sizing:border-box; }
.sec5 .grid_box .grid_container ul.line_2 { margin-top:8vw; }

.sec5 .grid_box .grid_container ul li.grid { display:block; width:100%; padding:40px 5% 0; box-sizing:border-box; }
.sec5 .grid_box .grid_container ul li.grid:first-child { padding-top:0; }
.sec5 .grid_box .grid_container ul li.grid a { display:block; position:relative; color:#000; text-decoration:none; }

.sec5 .grid_box .grid_container ul li.grid .img_wrap { position:relative; overflow:hidden; padding:0 !important; z-index:1 !important; border-radius:20px; }
.sec5 .grid_box .grid_container ul li.grid .img_wrap .grid_img { transition:background .5s ease; }
.sec5 .grid_box .grid_container ul li.grid:hover .img_wrap .grid_img { background-size:110% auto; }
/*.sec5 .grid_box .grid_container ul li.grid .img_wrap > img { width:100%; }*/


.sec5 .grid_box.grid_3 .img_wrap .img_1 { aspect-ratio: 424 / 387; background:url(../img/block_1.png) no-repeat center center; background-size:100% auto; }
.sec5 .grid_box.grid_3 .img_wrap .img_2 { aspect-ratio: 424 / 640; background:url(../img/block_2.png) no-repeat center center; background-size:100% auto; }
.sec5 .grid_box.grid_3 .img_wrap .img_3 { aspect-ratio: 424 / 307; background:url(../img/block_3.png) no-repeat center center; background-size:100% auto; }
.sec5 .grid_box.grid_3 .img_wrap .img_4 { aspect-ratio: 424 / 307; background:url(../img/block_4.png) no-repeat center center; background-size:100% auto; }
.sec5 .grid_box.grid_3 .img_wrap .img_5 { aspect-ratio: 424 / 307; background:url(../img/block_5.png) no-repeat center center; background-size:100% auto; }
.sec5 .grid_box.grid_3 .img_wrap .img_6 { aspect-ratio: 424 / 640; background:url(../img/block_6.png) no-repeat center center; background-size:100% auto; }
.sec5 .grid_box.grid_3 .img_wrap .img_7 { aspect-ratio: 424 / 640; background:url(../img/block_7.png) no-repeat center center; background-size:100% auto; }
.sec5 .grid_box.grid_3 .img_wrap .img_8 { aspect-ratio: 424 / 640; background:url(../img/block_8.png) no-repeat center center; background-size:100% auto; }
.sec5 .grid_box.grid_3 .img_wrap .img_9 { aspect-ratio: 424 / 307; background:url(../img/block_9.png) no-repeat center center; background-size:100% auto; }

.sec5 .grid_box.grid_2 .img_wrap .img_1 { aspect-ratio: 352 / 386; background:url(../img/block_1_m.png) no-repeat center center; background-size:100% auto; }
.sec5 .grid_box.grid_2 .img_wrap .img_2 { aspect-ratio: 352 / 640; background:url(../img/block_2_m.png) no-repeat center center; background-size:100% auto; }
.sec5 .grid_box.grid_2 .img_wrap .img_3 { aspect-ratio: 352 / 307; background:url(../img/block_3_m.png) no-repeat center center; background-size:100% auto; }
.sec5 .grid_box.grid_2 .img_wrap .img_4 { aspect-ratio: 352 / 307; background:url(../img/block_4_m.png) no-repeat center center; background-size:100% auto; }
.sec5 .grid_box.grid_2 .img_wrap .img_5 { aspect-ratio: 352 / 307; background:url(../img/block_5_m.png) no-repeat center center; background-size:100% auto; }
.sec5 .grid_box.grid_2 .img_wrap .img_6 { aspect-ratio: 352 / 640; background:url(../img/block_6_m.png) no-repeat center center; background-size:100% auto; }
.sec5 .grid_box.grid_2 .img_wrap .img_7 { aspect-ratio: 352 / 640; background:url(../img/block_7_m.png) no-repeat center center; background-size:100% auto; }
.sec5 .grid_box.grid_2 .img_wrap .img_8 { aspect-ratio: 352 / 640; background:url(../img/block_8_m.png) no-repeat center center; background-size:100% auto; }
.sec5 .grid_box.grid_2 .img_wrap .img_9 { aspect-ratio: 352 / 307; background:url(../img/block_9_m.png) no-repeat center center; background-size:100% auto; }



.sec5 .grid_box .grid_container ul li.grid .txt_wrap { padding:40px 0; width:100%; box-sizing:border-box; border-bottom:1px solid #999; }
.sec5 .grid_box .grid_container ul li.grid .txt_wrap h6 { font-size:28px; line-height:40px; letter-spacing:-1.4px; word-break:keep-all; }
.sec5 .grid_box .grid_container ul li.grid .txt_wrap h6 + p { margin-top:10px; font-size:20px; line-height:29px; letter-spacing:-1px; word-break:keep-all; }

.sec5 .grid_box .grid_container ul li.grid:last-child .txt_wrap { border-bottom:0; }

/* sec5 - video */
.sec5 .scroll_area_inner > .video_area { position:relative; padding:6vw 3.07vw 140px 500px; min-height:750px; box-sizing:border-box; background:#f5f5f5; z-index:1; }
.sec5 .video_area .title_wrap { text-align:center; }
.sec5 .video_area .title_wrap p {  }
.sec5 .video_area .title_wrap h2 { margin-top:1.04vw; font-size:3.13vw; }

.sec5 .video_area .swiper-container { margin:0 auto; width:60.21vw; overflow:hidden; }
.sec5 .video_wrap { position:relative; margin:0 auto; margin-top:3.13vw; width:60.21vw; height:34.06vw; border-radius:1.04vw; z-index:2; overflow:hidden; }

.sec5 .video_poster { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:60.21vw; height:34.06vw; transition:all .3s ease; z-index:10; }
.sec5 .video_poster .video_thumb { width:60.21vw; height:34.06vw; }
.sec5 .video_poster .btn_play { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:105px; height:106px; background:url(../img/btn_play.svg) no-repeat center center; background-size:100% auto; transition:all .3s ease; cursor:pointer; }
.sec5 .video_poster .btn_play:hover { transform:scale(1.1) translate(-50%, -50%); }

.sec5 .video_box { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:60.21vw; height:34.06vw; transition:all .5s ease; }
#video_bridge .bridge_panel { width:60.21vw; height:34.06vw; margin:0 auto; }
#video_bridge .bridgeVideo { width:100%; height:100%; min-width:60.21vw; min-height:34.06vw; }
.sec5 .video_controls { display:none; }

.sec5 .video_1 .video_poster .video_thumb { background:url(../img/poster_1.jpg) no-repeat center center; background-size:100% 100%; }
.sec5 .video_2 .video_poster .video_thumb { background:url(../img/poster_2.jpg) no-repeat center center; background-size:100% 100%; }
.sec5 .video_3 .video_poster .video_thumb { background:url(../img/poster_3.jpg) no-repeat center center; background-size:100% 100%; }
.sec5 .video_4 .video_poster .video_thumb { background:url(../img/poster_4.jpg) no-repeat center center; background-size:100% 100%; }
.sec5 .video_5 .video_poster .video_thumb { background:url(../img/poster_5.jpg) no-repeat center center; background-size:100% 100%; }
.sec5 .video_6 .video_poster .video_thumb { background:url(../img/poster_6.jpg) no-repeat center center; background-size:100% 100%; }
.sec5 .video_poster.remove { opacity:0; display:none; }

.sec5 .__flow { position:absolute; top:50%; transform:translateY(-50%); width:max-content; }
.sec5 .__flow .mq_box { white-space:nowrap; }
.sec5 .__flow .mq_box h1 { color:#fff; font-size:180px; line-height:auto; letter-spacing:-6.3px; font-weight:600; }

.sec5 .swiper-pagination { left:50%; top:50%; transform:translate(-50%, -50%); width:100%; }
.sec5 .swiper-pagination .swiper-pagination-bullet { opacity:1; margin:0 8px; width:16px; height:16px; background:transparent; border:1px solid #7935ff; border-radius:100%; transition:background .5s ease; }
.sec5 .swiper-pagination .swiper-pagination-bullet-active { background:#7935ff; }


.sec5 .swiper-control { position:absolute; bottom:80px; left:calc(50% + 250px); transform:translateX(-50%); width:100%; height:50px; }
.sec5 .swiper-button-next { position:absolute; top:auto; bottom:0; right:calc(50% - 150px); transform:translateX(-50%); width:30px; height:50px; background:url(../img/btn_swiper_next.svg) no-repeat center center; background-size:100% auto; z-index:20; }
.sec5 .swiper-button-prev { position:absolute; top:auto; bottom:0; left:calc(50% - 125px); transform:translateX(-50%); width:30px; height:50px; background:url(../img/btn_swiper_prev.svg) no-repeat center center; background-size:100% auto; z-index:20; }


/* sec6 */
.sec6 { background:#222; }
.sec6 .__inner { margin:0 auto; padding:130px 0 150px; width:fit-content; }

.sec6 h2 { color:#fff; text-align:center; }
.sec6 .box_wrap { display:flex; gap:15px; margin-top:70px; width:1435px; }

.sec6 .box_wrap .__box { position:relative; padding:55px 0 0 50px; width:710px; height:310px; background:#eeece9; border-radius:40px; }
.sec6 .box_wrap .__box a { display:block; width:100%; height:100%; color:#000; text-decoration:none; }

.sec6 .box_wrap .__box h5 { position:relative; width:fit-content; font-size:36px; line-height:50px; letter-spacing:-1.8px; }
.sec6 .box_wrap .box_2 h5 { margin-top:25px; }
.sec6 .box_wrap .__box h5:after { content:''; position:absolute; right:-35px; bottom:15px; width:20px; height:20px; background:url(../img/sec6_arrow.svg) no-repeat center center; background-size:100% auto; transition:all .3s ease; }
.sec6 .box_wrap .__box:hover h5:after { right:-60px; }
.sec6 .box_wrap .__box p { position:absolute; bottom:60px; left:50px; font-size:20px; line-height:30px; letter-spacing:-1px; }

.sec6 .box_wrap .__box img { display:block; position:absolute; top:73px; right:68px; width:163px; height:164px; }


/* sec7 */
.sec7 { background:#eeece9; }
.sec7 .__inner { position:relative; margin:0 auto; margin-top:135px; margin-bottom:90px; width:1440px; height:574px; background:#1f1f1f; border-radius:50px; }
.sec7 .__inner.slide_pc { display:block; }
.sec7 .__inner.slide_mo { display:none; }

.sec7 .swiper_box a { display:block; width:100%; height:70%; color:#fff; text-decoration:none; }
.sec7 .swiper_box .txt_wrap { /*padding:210px 0 106px 97px;*/ padding:100px 0 216px 97px; color:#fff; }
.sec7 .swiper_box .txt_wrap h3 { font-size:65px; line-height:85px; letter-spacing:-3.25px; }
.sec7 .swiper_box .txt_wrap h3 i { display:inline-block; margin-left:22px; margin-top:20px; width:39px; height:52px; background:url(../img/ic_arrow2.svg) no-repeat center center; background-size:100% auto; transition:margin .3s ease; }
.sec7 .swiper_box .txt_wrap:hover h3 i { margin-left:70px; }
.sec7 .swiper_box .txt_wrap p { margin-top:10px; width:525px; font-size:18px; line-height:30px; letter-spacing:-1px; word-break:keep-all; }

.sec7 .swiper_visual { position:absolute; bottom:-91px; right:20px; width:675px; height:781px; }
.sec7 .swiper_visual img { display:block; width:100%; height:100%; }


.sec7 .swiper-control { position:absolute; bottom:125px; left:97px; width:135px; height:30px; }
.sec7 .swiper-control .swiper-button-prev { top:0; left:0; right:auto; margin-top:0; padding:10px 15px; width:6px; height:12px; background:url(../img/btn_prev.svg) no-repeat center center; background-size:6px 12px; }
.sec7 .swiper-control .swiper-button-next { top:0; left:auto; right:-20px; margin-top:0; padding:10px 15px; width:6px; height:12px; background:url(../img/btn_next.svg) no-repeat center center; background-size:6px 12px; }

.sec7 .swiper-pagination { display:flex; gap:12px; position:absolute; left:30px; top:3px; width:fit-content; }
.sec7 .swiper-pagination-vertical.swiper-pagination-bullets, .sec7 .swiper-vertical>.swiper-pagination-bullets { right:auto; left:20px; top:auto; bottom:-16px; }
.sec7 .swiper-pagination-bullet { opacity:1; margin:0 !important; width:14px; height:14px; background:transparent; border:1px solid #fff; border-radius:100%; }
.sec7 .swiper-pagination-bullet-active { background:#fff; }

/*.sec7 .swiper-control { position:absolute; top:120px; left:97px; width:135px; height:60px; }
.sec7 .swiper-control .swiper-button-prev { left:0; right:auto; width:60px; height:60px; background:url(../img/ic_prev.svg) no-repeat center center; background-size:100% 100%; }
.sec7 .swiper-control .swiper-button-next { left:auto; right:0; width:60px; height:60px; background:url(../img/ic_next.svg) no-repeat center center; background-size:100% 100%; }*/




/* sec8 */
.sec8 { height:100vh; }
.sec8 .__inner { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:fit-content; height:fit-content; z-index:3; }

.sec8 .__inner h2 { width:1100px; color:#fff; text-align:center; }
.sec8 .__inner h2 + p { margin:0 auto; margin-top:77px; color:#fff; width:972px; font-size:20px; line-height:30px; letter-spacing:-1px; text-align:center; }

/* sec8 - video */
.sec8 .video_bg { position:relative; width:100%; height:100%; }
.sec8 .video_bg .__dimmed { position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.6; z-index:2; }
.sec8 .video_bg video{ position:absolute; top:0; width:100%; height:100%; background-size:cover; background-position:center; object-fit:cover;}
.sec8 .video_bg .__cover { position:absolute; top:0; left:0; bottom:0; z-index:2; width:100%; height:100%; background:rgba(0,0,0,0.3);}

.sec8 .video_box { display:none; opacity:0; position:absolute; top:0; left:0; width:100%; height:100%; box-sizing:border-box; z-index:1; }
.sec8 #video_bridge .bridgeVideo { width:100vw; height:100%; max-height:calc(100vh - 78px); }
/*.video_controls { display:none; }*/
#yt_video { width:100%; height:100vh; }

.sec8 .video_poster.remove { opacity:0; }
.sec8 .video_box.active { opacity:1; }


/* outro */
.outro { padding-top:92px; padding-bottom:118px; width:100%; height:fit-content; background:#7935ff url(../img/outro_bg.png); background-size:cover; }

.outro .title_wrap h1 { color:#fff; font-size:70px; line-height:84px; letter-spacing:-3.5px; text-align:center; }
.outro .title_wrap h1 + p { margin-top:20px; color:#fff; font-size:26px; letter-spacing:-1.3px; text-align:center; }

.outro img { display:block; margin:0 auto; margin-top:-100px; width:686px; height:709px; }

.outro .btn_wrap { display:flex; gap:20px; margin:0 auto; margin-top:-70px; width:fit-content; }
.outro .btn_wrap a { position:relative; display:inline-block; padding-left:20px; width:285px; height:60px; color:#fff; font-size:22px; line-height:60px; letter-spacing:-1.3px; border-radius:15px; background:#000; text-decoration:none; transition:all .3s ease; }
.outro .btn_wrap a i { position:absolute; top:21px; right:21px; width:18px; height:18px; background:url(../img/ic_arrow.svg) no-repeat center center; background-size:100% auto; }
.outro .btn_wrap a:hover { color:#7935ff; background:#fff; }
.outro .btn_wrap a:hover i { background:url(../img/ic_arrow_h.svg) no-repeat center center; }


/* footer */
.copyright { font-family:'pretendard'; position:relative; padding:36px 0; width:100%; height:120px; background:#000; z-index:1; }
.copyright p { color:#e0e0e0; font-size:14px; line-height:22px; font-weight:300;  }
.copyright_t { display:none; }
.copyright_m { display:none; }

.copyright .wrap { display:flex; margin:0 auto; width:1200px; }

.copyright .copy_left { width:70%; text-align:left; }
.copyright .copy_right { width:30%; text-align:right; }

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

.copyright p { margin:0; }
.copyright p.p-text { font-weight:400; letter-spacing:-.42px; }
.copyright p b { margin-right:7px; font-weight:600; }
.copyright p span.__line { display:inline-block; padding:0 3px 0 5px; color:#999; }

.copyright p b:first-child { margin-left:0; }
.copyright p + p { margin-top:3px; color:#999; letter-spacing:1; }


@media screen and (min-width: 1920px) {
    h1 { font-size:75px; }
    h2 { font-size:60px; line-height:75px; letter-spacing:-3px; }

    .intro h3 { font-size:34px; }


    /* sec3 */
    .sec3 .__inner { margin:80px auto; width:1722px; height:640px; }

    .sec3 .__inner .swiper_box { width:722px; }
    .sec3 .__inner .swiper_video { width:1000px; }

    .sec3 .__inner .swiper_box .swiper-slide { padding:110px 0 150px 111px; border-radius:20px 0 0 20px; }

    .sec3 .__inner .swiper_box .swiper-slide .txt_wrap h6 { font-size:24px; line-height:18px; letter-spacing:-1.2px; }
    .sec3 .__inner .swiper_box .swiper-slide .txt_wrap h2 { margin-top:20px; font-size:60px; line-height:70px; letter-spacing:-3px; }
    .sec3 .__inner .swiper_box .swiper-slide .txt_wrap p { margin-top:40px; font-size:20px; line-height:30px; letter-spacing:-1px; }
    .sec3 .__inner .swiper_box .slide_4 .txt_wrap h2 { font-size:55px; }

    .sec3 .__inner .swiper_box .swiper-slide a { bottom:150px; left:111px; padding-left:21px; width:180px; height:44px; font-size:20px; line-height:44px; letter-spacing:-1px; border-radius:10px; }
    .sec3 .__inner .swiper_box .swiper-slide a i { top:15px; right:18px; width:14px; height:14px; }

    .sec3 .__inner .swiper_video .swiper-slide { border-radius:0 20px 20px 0; }

    .sec3 .swiper-control { bottom:92px; left:111px; }

    
}

@media (max-width: 1600px) {
    /* sec6 */
    .sec6 .box_wrap { gap:.94vw; margin-top:4.38vw; width:89.69vw; }
    .sec6 .box_wrap .__box { padding:3.44vw 0 0 3.13vw; width:44.38vw; height:19.38vw; background:#eeece9; border-radius:2.5vw; }
    .sec6 .box_wrap .__box h5 { font-size:2.25vw; line-height:3.13vw; letter-spacing:-.11vw; }
    .sec6 .box_wrap .box_2 h5 { margin-top:1.56vw; }
    .sec6 .box_wrap .__box h5:after { right:-2.19vw; bottom:.94vw; width:1.25vw; height:1.25vw; }    
    .sec6 .box_wrap .__box:hover h5:after { right:-3.75vw; }
    .sec6 .box_wrap .__box p { bottom:3.75vw; left:3.13vw;  font-size:1.25vw; line-height:1.88vw; letter-spacing:-.06vw; }

    .sec6 .box_wrap .__box img { top:4.56vw; right:4.25vw; width:10.19vw; height:10.25vw; }

    
    /* sec7 */
    .sec7 .__inner { margin-top:8.44vw; margin-bottom:5.63vw; width:90vw; height:35.88vw; border-radius:3.13vw; }

    .sec7 .swiper_box .txt_wrap { padding:6.13vw 0 13.63vw 6.06vw; }
    .sec7 .swiper_box .txt_wrap h3 { font-size:4.06vw; line-height:5.31vw; letter-spacing:-.2vw; }
    .sec7 .swiper_box .txt_wrap h3 i { margin-left:1.38vw; margin-top:1.25vw; width:2.44vw; height:3.25vw; }
    .sec7 .swiper_box .txt_wrap p { margin-top:10px; width:fit-content; min-width:538px; font-size:18px; line-height:30px; letter-spacing:-1px; }
    /*.sec7 .swiper_box .txt_wrap p { margin-top:10px; width:32.81vw; font-size:1.13vw; line-height:1.88vw; letter-spacing:-.06vw; }*/

    .sec7 .swiper_visual { bottom:-5.69vw; right:1.25vw; width:42.19vw; height:48.81vw; }

    
    .sec7 .swiper-control { position:absolute; bottom:7vw; left:6.06vw; width:135px; height:30px; }

    /*
    .sec7 .swiper-control { top:7.5vw; left:6.06vw; width:8.44vw; height:3.75vw; }
    .sec7 .swiper-control .swiper-button-prev { width:3.75vw; height:3.75vw; }
    .sec7 .swiper-control .swiper-button-next { width:3.75vw; height:3.75vw; }*/
}


@media (max-width: 1280px) {
    html { font-size: 58%; } /* 약 9.3px */

    h1 { font-size:4.69vw; line-height:6.8vw; letter-spacing:-.23vw; }
    h2 { font-size:3.91vw; line-height:5.86vw; letter-spacing:-.2vw; }

    .__pc { display:none; }
    .__pad { display:block; }
    .__pad2 { display:none; }
    .__mo { display:none; }


    /* sec2 */
    .sec2 .title_wrap h2 + p { margin:0 auto; width:88vw; }


    /* sec3 */
    .sec3 .__inner .swiper_box .swiper-slide .txt_wrap p { font-size:17px; line-height:27px; letter-spacing:-1px; }

    /* sec4 */
    .sec4 { padding-top:50px; }

    .sec4 .video_wrap { width:90.31vw; height:51.09vw; border-radius:1.56vw; }
    /*.sec4 .video_wrap .video_poster .btn_play { width:5.86vw; height:5.86vw; }*/
    .sec4 .video_wrap .video_poster .btn_play { width:105px; height:105px; }


    /* sec5 */
    .sec5 .fixed_area { width:379px; z-index:1; }

    .sec5 .fixed_area .__contents { margin-top:70px; }
    .sec5 .fixed_area .__contents img { width:209px; height:30px; }
    .sec5 .fixed_area .__contents img + img { width:243px; height:243px; }
    
    .sec5 .fixed_area .__contents .txt_wrap h4 { font-size:28px; line-height:38px; letter-spacing:-1.4px; text-align:center; }
    .sec5 .fixed_area .__contents .txt_wrap h4 + p { margin:0 auto;  margin-top:20px; width:280px; font-size:18px; line-height:28px; letter-spacing:-.8px; }

    .sec5 .scroll_area_inner > .list_area { padding:75px 59px 72px 434px; }

    .sec5 .grid_box.grid_3 { display:none; }
    .sec5 .grid_box.grid_2 { display:block; }
    
    .sec5 .grid_2 .grid_container ul { width:50% !important; }
    .sec5 .grid_box .grid_container ul.line_2 { margin-top:0; }

    /* sec5 - video */
    .sec5 .scroll_area_inner > .video_area { padding:7.81vw 3.07vw 11.33vw 3.07vw; min-height:auto; }
    .sec5 .video_area .title_wrap p {  }
    .sec5 .video_area .title_wrap h2 { margin-top:1.56vw; font-size:4.69vw; }

    .sec5 .video_area .swiper-container { width:90.13vw; }
    .sec5 .video_wrap { margin-top:3.13vw; width:90.13vw; height:51.09vw; border-radius:1.56vw; }

    .sec5 .video_poster { width:90.13vw; height:51.09vw; }
    .sec5 .video_poster .video_thumb { width:90.13vw; height:51.09vw; }

    .sec5 .video_box { width:90.13vw; height:51.09vw; }
    #video_bridge .bridge_panel { width:90.13vw; height:51.09vw; }
    #video_bridge .bridgeVideo { min-width:90.13vw; min-height:51.09vw; }

    .sec5 .swiper-control { left:50%; bottom:5.5vw; }


    /* sec6 */
    .sec6 .box_wrap { gap:2.19vw; margin-top:5.47vw; width:90vw; }
    .sec6 .box_wrap .__box { padding:4.3vw 0 0 3.91vw; width:43.91vw; height:24.22vw; border-radius:3.13vw; }
    .sec6 .box_wrap .__box h5 { font-size:2.81vw; line-height:3.91vw; letter-spacing:-.14vw; }
    .sec6 .box_wrap .box_2 h5 { margin-top:0; }
    .sec6 .box_wrap .__box h5:after { right:-2.34vw; bottom:1.02vw; width:1.56vw; height:1.56vw; }
    .sec6 .box_wrap .__box:hover h5:after { right:-4vw; }
    .sec6 .box_wrap .__box p { bottom:3.91vw; left:3.91vw;  font-size:1.56vw; line-height:2.34vw; letter-spacing:-.08vw; }

    .sec6 .box_wrap .__box img { top:3.13vw; right:3.28vw; width:13.67vw; height:12.81vw; }


    /* sec7 */
    .sec7 .__inner { margin-top:9.45vw; margin-bottom:8.2vw; width:90.13vw; height:44.84vw; border-radius:3.13vw; }

    .sec7 .swiper_box .txt_wrap { padding:8.41vw 0 16.13vw 6.02vw; color:#fff; }
    .sec7 .swiper_box .txt_wrap h3 { font-size:5.08vw; line-height:6.64vw; letter-spacing:-.25vw; }
    .sec7 .swiper_box .txt_wrap h3 i { display:inline-block; margin-left:1.15vw; margin-top:1vw; width:2.03vw; height:2.71vw; background:url(../img/ic_arrow2.svg) no-repeat center center; background-size:100% auto; }
    .sec7 .swiper_box .txt_wrap p { margin-top:10px; width:43vw; font-size:1.56vw; line-height:2.34vw; letter-spacing:-.08vw; word-break:keep-all; }

    .sec7 .swiper_visual { position:absolute; bottom:-8.2vw; right:-12.5vw; width:52.03vw; height:60.86vw; }
    .sec7 .swiper_visual img { display:block; width:100%; height:100%; }


    .sec7 .swiper-control { position:absolute; bottom:9vw; left:5.6vw; width:135px; height:30px; }


    /*.sec7 .swiper-control { top:9.38vw; left:6.64vw; width:10.55vw; height:4.69vw; }
    .sec7 .swiper-control .swiper-button-prev { left:0; right:auto; width:4.69vw; height:4.69vw; }
    .sec7 .swiper-control .swiper-button-next { left:auto; right:0; width:4.69vw; height:4.69vw; }*/




    /* sec8 */
    .sec8 { height:56.25vw; }

    .sec8 .__inner h2 { font-size:3.91vw; line-height:5.2vw; letter-spacing:-.2vw; }
    .sec8 .__inner h2 + p { margin-top:2.34vw; width:72.66vw; font-size:1.41vw; line-height:2.2vw; letter-spacing:-.07vw; }



    /* outro */
    .outro { padding-top:50px; padding-bottom:78px; }

    .outro .title_wrap h1 { font-size:3.91vw; line-height:4.38vw; letter-spacing:-.2vw; }
    .outro .title_wrap h1 + p { margin-top:12px; font-size:1.72vw; letter-spacing:-.09vw; }

    .outro img { margin-top:-8vw; width:53vw; height:53.5vw; }

    .outro .btn_wrap { margin-top:-5.5vw; }
    .outro .btn_wrap a { padding-left:1.56vw; width:15.94vw; height:3.13vw; color:#fff; font-size:1.33vw; line-height:3.13vw; letter-spacing:-.07vw; border-radius:.39vw; }
    .outro .btn_wrap a i { position:absolute; top:1.17vw; right:1.17vw; width:.94vw; height:.94vw; background:url(../img/ic_arrow.svg) no-repeat center center; background-size:100% auto; }

}

@media (max-width: 768px) {
    html { font-size: 52%; } /* 약 8.3px */
    
    h1 { font-size:6.51vw; line-height:6.8vw; letter-spacing:-.33vw; }
    h2 { font-size:5.99vw; line-height:7.81vw; letter-spacing:-.3vw; }

    .__pc { display:none; }
    .__pad { display:none; }
    .__pad2 { display:block; }
    .__mo { display:none; }


    /* intro */
    /*.intro h3 { font-size:3.91vw; letter-spacing:-.12vw; }
    .intro h1 { width:91.93vw; height:12.5vw; }

    .intro img { margin-top:6.5vw; width:88.93vw; height:88.93vw; }*/

    .intro .__basic { display:block; }
    .intro h3 { font-size:3.91vw; letter-spacing:-.12vw; }
    .intro h1 { margin:0 auto; width:68.95vh; height:9.38vh; max-width:80vw; background-size:100% auto; }
    .intro h1 span { background-size:100% auto; background-position:top center; }

    .intro .visual_wrap { margin:0 auto; width:53vh; height:53vh; }
    .intro .visual_wrap img { margin-top:4.88vh; width:inherit; height:inherit; }


    /* sec2 */
    .sec2 .title_wrap h2 + p { margin:0 auto; margin-top:2.6vw; width:91.15vw; word-break:keep-all; }


    /* sec3 */
    .sec3 .__inner { flex-wrap:wrap; width:81vw; height:fit-content; flex-direction:column-reverse; }
    .sec3 .__inner > div { width:100%; }

    .sec3 .__inner .swiper_box { width:81vw; height:fit-content; }
    .sec3 .__inner .swiper_video { width:81vw; height:51.82vw; }

    .sec3 .__inner .swiper_box .swiper-slide { padding:6.51vw 0 19.92vw; color:#fff; border-radius:0 0 2.6vw 2.6vw; }

    .sec3 .__inner .swiper_box .swiper-slide .txt_wrap { text-align:center; }
    .sec3 .__inner .swiper_box .swiper-slide .txt_wrap h6 { font-size:2.86vw; line-height:2.86vw; letter-spacing:-.14vw; }
    .sec3 .__inner .swiper_box .swiper-slide .txt_wrap h2 { margin-top:2.6vw; font-size:4.95vw; line-height:5.86vw; letter-spacing:-.25vw; }
    .sec3 .__inner .swiper_box .swiper-slide .txt_wrap p { margin-top:3.9vw; font-size:2.34vw; letter-spacing:-.12vw; }
    .sec3 .__inner .swiper_box .slide_4 .txt_wrap h2 { font-size:4.95vw; }


    .sec3 .__inner .swiper_box .swiper-slide a { left:50%; transform:translateX(-50%); bottom:10.42vw; padding-left:1.09vw; width:16vw; height:3.52vw; color:#fff; font-size:2.08vw; line-height:3.52vw; letter-spacing:-.1vw; border:1px solid #fff; border-radius:.52vw; }
    .sec3 .__inner .swiper_box .swiper-slide a i { top:1vw; right:1vw; width:1.56vw; height:1.56vw; }


    .sec3 .__inner .swiper_video .swiper-slide { border-radius:2.6vw 2.6vw 0 0; }

    .sec3 .swiper-control { left:50%; transform:translateX(-50%); width:27vw; }


    /* sec4 */
    .sec4 h1 { line-height:8vw; }
    .sec4 .video_wrap { margin-bottom:100px; }


    /* sec5 */
    .sec5 { display:flex; flex-wrap:wrap; }

    .sec5 .fixed_area { position:relative; left:auto; top:auto; width:100vw; height:fit-content; }
    .sec5 .fixed_area .fixed_area_inner { position:relative; left:auto; top:auto; width:100vw; height:fit-content; }

    .sec5 .scroll_area_inner > .list_area { padding:10.42vw 3.52vw; }



    .sec5 .fixed_area .__contents { margin-top:80px; }
    .sec5 .fixed_area .__contents img { width:39.97vw; height:5.73vw; }
    .sec5 .fixed_area .__contents img + img { width:50.39vw; height:50.39vw; }
    
    .sec5 .fixed_area .__contents .txt_wrap h4 { font-size:3.65vw; line-height:4.8vw; letter-spacing:-1.4px; text-align:center; }
    .sec5 .fixed_area .__contents .txt_wrap h4 + p { margin:0 auto;  margin-top:20px; margin-bottom:95px; width:87vw; font-size:20px; line-height:30px; letter-spacing:-1px; }

    .sec5 .scroll_area_inner > .list_area { padding:10.42vw 3.65vw; }

    .sec5 .grid_box.grid_3 { display:none; }
    .sec5 .grid_box.grid_2 { display:block; }
    
    .sec5 .grid_2 .grid_container ul { width:50% !important; }

    .sec5 .scroll_area_inner > .video_area { padding-bottom:22vw; min-height:auto; }
    .sec5 .video_wrap { margin-top:7.81vw; }
    
    .sec5 .video_area .title_wrap h2 { font-size:6.51vw; line-height:8.07vw; }


    /* sec6 */
    .sec6 .box_wrap { flex-wrap:wrap; gap:3.65vw; margin-top:9.11vw; width:73.18vw; }
    .sec6 .box_wrap .__box { padding:7.16vw 0 0 6.51vw; width:73.18vw; height:40.36vw; border-radius:5.21vw; }
    .sec6 .box_wrap .__box h5 { font-size:4.69vw; line-height:6.51vw; letter-spacing:-.23vw; }
    .sec6 .box_wrap .box_2 h5 { margin-top:0; }
    .sec6 .box_wrap .__box h5:after { right:-3.91vw; bottom:1.69vw; width:2.6vw; height:2.6vw; }    
    .sec6 .box_wrap .__box:hover h5:after { right:-7vw; }
    .sec6 .box_wrap .__box p { bottom:6.51vw; left:6.51vw;  font-size:2.6vw; line-height:3.91vw; letter-spacing:-.13vw; }

    .sec6 .box_wrap .__box img { top:5.21vw; right:5.73vw; width:22.79vw; height:22.4vw; }


    /* sec7 */
    .sec7 .__inner.slide_pc { display:none; }
    .sec7 .__inner.slide_mo { display:block; }

    .sec7 .__inner { margin-bottom:24.22vw; width:63.54vw; height:92.19vw; background:transparent; }
    
    .sec7 .swiper_card .swiper-slide { width:63.54vw; height:92.19vw; border-radius:3.91vw; overflow:hidden; }
    .sec7 .swiper_card .swiper-slide.slide_1 { background:#1f1f1f; }
    .sec7 .swiper_card .swiper-slide.slide_2 { background:#7935ff; }
    .sec7 .swiper_card .swiper-slide.slide_3 { background:#4e6ced; }
    .sec7 .swiper_card .swiper-slide.slide_4 { background:#2a264c; }

    .sec7 .swiper-slide { opacity:0 !important; transition:all .3s ease; }
    .sec7 .swiper-slide-active, 
    .sec7 .swiper-slide-prev, 
    .sec7 .swiper-slide-next { opacity:1 !important; }

    .sec7 .swiper-slide a { color:#fff; text-decoration:none; }

    .sec7 .swiper_card .swiper-slide .txt_wrap { padding:5.99vw 1.95vw 0 5.21vw; color:#fff; }
    .sec7 .swiper_card .swiper-slide .txt_wrap h3 { font-size:5.86vw; line-height:7.16vw; letter-spacing:-.29vw; }
    .sec7 .swiper_card .swiper-slide .txt_wrap h3 + p { margin-top:2.6vw; width:55.21vw; font-size:2.6vw; line-height:3.91vw; letter-spacing:-.13vw; word-break:keep-all; }

    .sec7 .swiper_card .swiper-slide .visual_wrap { position:absolute; bottom:0; right:0; width:47.66vw; height:55.6vw; }
    .sec7 .swiper_card .swiper-slide .visual_wrap img { width:100%; height:100%; }

    .sec7 .swiper-control { top:auto; bottom:-14.06vw; left:50%; transform:translateX(-50%); width:15.63vw; height:6.51vw; }
    .sec7 .swiper-control .swiper-button-prev { width:6.51vw; height:6.51vw; background:url(../img/ic_prev_b.svg) no-repeat center center; }
    .sec7 .swiper-control .swiper-button-next { width:6.51vw; height:6.51vw; background:url(../img/ic_next_b.svg) no-repeat center center; }

    
    /* sec8 */
    .sec8 { height:100vh; }

    .sec8 .__inner h2 { font-size:5.21vw; line-height:6.51vw; letter-spacing:-.26vw; }
    .sec8 .__inner h2 + p { margin-top:50px; width:86.72vw; font-size:20px; line-height:30px; letter-spacing:-.1px; text-align:left; }



    /* outro */
    .outro { padding-top:100px; padding-bottom:167px; }

    .outro .title_wrap h1 { font-size:6.51vw; line-height:7.23vw; letter-spacing:-.33vw; }
    .outro .title_wrap h1 + p { margin-top:17px; font-size:2.86vw; letter-spacing:-.14vw; }

    .outro img { margin-top:-8vw; width:91vw; height:91.5vw; }

    .outro .btn_wrap { margin-top:-5.5vw; }
    .outro .btn_wrap a { padding-left:1.56vw; width:29.17vw; height:5.21vw; color:#fff; font-size:2.6vw; line-height:5.21vw; letter-spacing:-.13vw; border-radius:.65vw; }
    .outro .btn_wrap a i { position:absolute; top:1.8vw; right:1.8vw; width:1.56vw; height:1.56vw; background:url(../img/ic_arrow.svg) no-repeat center center; background-size:100% auto; }

}

@media (max-width: 480px) {
    /* Top Gnb */
    .rooftop{position:fixed;z-index:1000;top:0;right:0;bottom:0;left:0;background-color:#fff;height:50px;box-shadow:0 1px 1px rgba(0,0,0,.1)}
    #gnb.joins_gnb{display:none}
    .forehead .inner { position:relative;padding:0;height:50px;background:#fff}
    .brandsolution-logo{position:absolute;top:18px;left:20px;margin-top:0}
    .brandsolution-logo a{display:block;width:41px;height:12px;background:url(/common/img/sp-common_m.svg) no-repeat 0 0;background-size:150px}
    .brand-identity{text-align:center;line-height:50px}
    .brand-identity img{position:relative;top:-3px;vertical-align:baseline}
    .sns-share-box{position:absolute;top:8px;right:10px;margin-top:0}
    .btn-sns-more{display:block;width:30px;height:30px;background:url(/common/img/sp-common_m.png) no-repeat 0 -15px;background-size:150px;color:transparent;font-size:0}

    /* SNS 怨듭쑀 紐⑤떖 */
    .sns-modal{position:fixed;z-index:1010;top:50px;right:0;bottom:0;left:0;opacity:0;max-height:100vh;overflow:hidden;-webkit-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease; visibility: hidden; z-index:-1;}
    .sns-modal.open{opacity:1;max-height:100vh; visibility: inherit; overflow:hidden; z-index:100;}
    .sns-modal:before{content:'';display:block;position:absolute;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,.5)}
    .sns-modal-inner{ position:absolute; z-index:10; top:0; right:0; bottom:0; left:0; width:calc(100vw - 74px); height:20%; min-height:182px; margin:auto; background-color:#fff; border-radius:4px; overflow:hidden; }
    .sns-modal .modal-head{ position:relative; margin:17px 18px 0 18px; height:39px; color:#3B3B3B; font-size:20px; letter-spacing:-.8px; font-weight:600; border-bottom:1px solid #f2f2f2; }
    .sns-modal .close-modal{ position:absolute; top:0; right:0; padding:0; width:20px; height:20px; border:none; color:transparent; font-size:0; background-color:transparent; background:url(/common/img/sp-common_m_2.svg) no-repeat -45px -20px; background-size:150px; }
    .sns-list{position:absolute;top:57px;right:0;bottom:0;left:0;padding:25px 25px 0 25px;text-align:center;overflow-y:auto;overflow-x:hidden}
    .sns-list:after{content:'';display:block;clear:both}
    .sns-list li{float:left;width:25%;margin-bottom:24px}
    .sns-list a{font-size:12px;text-decoration:none;color:#231f20}
    .sns-list span{display:block;padding-top:3px;}
    .sns-list i{display:inline-block;width:45px;height:45px;background:url(/common/img/sp-common_m_2.svg) no-repeat;background-size:150px}
    .sns-list .sns-fb i{background-position:0 -45px}
    .sns-list .sns-tw i{background-position:-45px -45px}
    .sns-list .sns-gp i{background-position:-90px -45px}
    .sns-list .sns-li i{background-position:0 -90px}
    .sns-list .sns-kt i{background-position:-45px -90px}
    .sns-list .sns-it i{background-position:-90px -90px}
    .sns-list .sns-ks i{background-position:0 -135px}
    .sns-list .sns-pk i{background-position:-45px -135px}
    .sns-list .sns-ml i{background-position:-90px -135px}


    html { font-size: 50%; } /* 약 8px */

    h1 { font-size:9.07vw; line-height:12.27vw; letter-spacing:-.45vw; }
    h2 { font-size:9.07vw; line-height:12.27vw; letter-spacing:-.45vw; }

    .__pc { display:none; }
    .__pad { display:none; }
    .__pad2 { display:none; }
    .__mo { display:block; }

    .gnb_pc { display:none; }
    .gnb_mo { display:block; }

    .intro > * { margin-top:0; }

    .intro .__basic { display:none; }
    .intro h3 { font-size:8vw; line-height:10vw; letter-spacing:-.24vw; }
    .intro h1 { margin:0 auto; margin-top:10vw; width:92.53vw; height:12.53vw; max-width:auto; }

    .intro .visual_wrap { width:48vh; height:48vh; }
    .intro img { margin-top:4vw; width:89.6vw; height:89.6vw; }


    /* sec2 */
    .sec2 .title_wrap h2 + p { margin:0 auto; margin-top:5vw; width:83.73vw; }


    /* sec3 */
    .sec3 { padding-bottom:100px; }
    .sec3 h2.__mo { display:block; margin-bottom:7.47vw; color:#fff; text-align:center; }
    .sec3 h2.__mo i { font-style:normal; font-weight:100; }


    .sec3 .__inner { width:84vw; }

    .sec3 .__inner .swiper_box { width:84vw; }
    .sec3 .__inner .swiper_video { width:84vw; height:53.87vw; }

    .sec3 .__inner .swiper_box .swiper-slide { padding:6.4vw 0 24vw; color:#fff; border-radius:0 0 4vw 4vw; }

    .sec3 .__inner .swiper_box .swiper-slide .txt_wrap h6 { display:none; }
    .sec3 .__inner .swiper_box .swiper-slide .txt_wrap h2 { font-size:7.47vw; line-height:10.13vw; letter-spacing:-.37vw; }
    .sec3 .__inner .swiper_box .swiper-slide .txt_wrap p { margin-top:10px; font-size:17px; line-height:26px; letter-spacing:-.9px; }
    .sec3 .__inner .swiper_box .slide_4 .txt_wrap h2 { font-size:7.47vw; }


    .sec3 .__inner .swiper_box .swiper-slide a { bottom:36px; padding-left:0; width:30.4vw; height:8vw; font-size:16px; line-height:8vw; letter-spacing:-.8px; text-align:center; border-radius:1.33vw; }
    .sec3 .__inner .swiper_box .swiper-slide a i { display:none; }


    .sec3 .__inner .swiper_video .swiper-slide { border-radius:2.6vw 2.6vw 0 0; }

    .sec3 .swiper-control { left:50%; transform:translateX(-50%); bottom:-10vw; width:48vw; }

    
    /* sec4 */
    .sec4 h1 { line-height:12.27vw; }
    .sec4 .video_wrap { margin-top:30px; margin-bottom:100px; }

    .sec4 .video_wrap .video_poster .btn_play { width:60px; height:60px; }


    /* sec5 */
    .sec5 .scroll_area_inner > .list_area { padding:10.42vw 3.52vw; }

    .sec5 .fixed_area .__contents img { width:279px; height:40px; }
    .sec5 .fixed_area .__contents img + img { width:335px; height:335px; }
    
    .sec5 .fixed_area .__contents .txt_wrap h4 { font-size:28px; line-height:38px; letter-spacing:-1.4px; }
    .sec5 .fixed_area .__contents .txt_wrap h4 + p { margin-top:20px; margin-bottom:95px; width:87vw; font-size:20px; line-height:30px; letter-spacing:-1px; }

    .sec5 .scroll_area_inner > .list_area { padding:10.42vw 28px; }

    .sec5 .grid_box .grid_container ul li.grid .txt_wrap { padding:20px 0 0; border-bottom:0; }
    .sec5 .grid_box .grid_container ul li.grid .txt_wrap h6 { font-size:22px; line-height:40px; letter-spacing:-1px; }
    .sec5 .grid_box .grid_container ul li.grid .txt_wrap h6 + p { margin-top:0; font-size:18px; line-height:24px; letter-spacing:-.54px; }

    .sec5 .grid_box.grid_3 { display:none; }
    .sec5 .grid_box.grid_2 { display:block; }
    
    .sec5 .grid_2 .grid_container ul { width:50% !important; }

    .sec5 .scroll_area_inner > .video_area { min-height:auto; }
    .sec5 .video_wrap { margin-top:7.81vw; }
    .sec5 .video_area .title_wrap p { font-size:17px; line-height:23px; letter-spacing:-.85px; }
    .sec5 .video_area .title_wrap h2 { font-size:28px; line-height:38px; letter-spacing:-1.4px; }

    .sec5 .video_poster .btn_play { width:60px; height:60px; }


    /* sec6 */
    .sec6 .__inner { padding:100px 0 130px; }

    .sec6 .box_wrap { gap:2.67vw; margin-top:40px; width:83.47vw; }
    .sec6 .box_wrap .__box { padding:0; padding-left:6.93vw; width:83.47vw; height:40.53vw; border-radius:4vw; }
    .sec6 .box_wrap .__box a { display:flex; align-items:center; }
    .sec6 .box_wrap .__box h5 { font-size:5.33vw; line-height:6.93vw; letter-spacing:-.27vw; }
    .sec6 .box_wrap .__box h5:after { right:-5vw; bottom:2.3vw; width:2.93vw; height:2.93vw; }
    .sec6 .box_wrap .__box p { display:none; }

    .sec6 .box_wrap .__box img { top:50%; right:5.73vw; transform:translateY(-50%); width:27.73vw; height:27.47vw; }


    /* sec7 */
    .sec7 .__inner { margin-top:80px; margin-bottom:130px; width:270px; height:390px; }
    
    .sec7 .swiper_card .swiper-slide { width:270px; height:390px; border-radius:15px; }

    .sec7 .swiper_card .swiper-slide .txt_wrap { padding:25px 0 0 22px; }
    .sec7 .swiper_card .swiper-slide .txt_wrap h3 { font-size:32px; line-height:40px; letter-spacing:-1.6px; }
    .sec7 .swiper_card .swiper-slide .txt_wrap h3 + p { display:none; }

    .sec7 .swiper_card .swiper-slide .visual_wrap { position:absolute; bottom:0; right:0; width:230px; height:268px; }
    
    .sec7 .swiper-control { top:auto; bottom:-80px; width:112px; height:46px; }
    .sec7 .swiper-control .swiper-button-prev { width:46px; height:46px; background:url(../img/ic_prev_b.svg) no-repeat center center; }
    .sec7 .swiper-control .swiper-button-next { width:46px; height:46px; background:url(../img/ic_next_b.svg) no-repeat center center; }


    .sec8 { min-height:114vh; }
    .sec8 .__inner { padding:130px 0; }

    .sec8 .__inner h2 { width:100vw; font-size:7.2vw; line-height:10.67vw; letter-spacing:-.36vw; }
    .sec8 .__inner h2 + h2 { font-size:5.33vw; }
    .sec8 .__inner h2 + p { margin:0 auto; margin-top:10vw; width:84vw; font-size:20px; line-height:30px; letter-spacing:-.9px; }







    /* outro */
    .outro { padding-top:70px; padding-bottom:90px; }

    .outro .title_wrap h1 { font-size:9.6vw; line-height:12vw; letter-spacing:-.33vw; }
    .outro .title_wrap h1 + p { margin-top:17px; font-size:18px; line-height:24px; letter-spacing:-.9px; }

    .outro img { margin-top:-18vw; margin-left:-25vw; width:150vw; height:150vw; }

    .outro .btn_wrap { display:flex; gap:10px; flex-wrap:wrap; margin:0 auto; margin-top:-60px
        
        ; width:213px; }
    .outro .btn_wrap a { padding-left:18px; width:213px; height:40px; color:#fff; font-size:18px; line-height:40px; letter-spacing:-.9px; border-radius:5px; }
    .outro .btn_wrap a i { position:absolute; top:14px; right:14px; width:11px; height:11px; background:url(../img/ic_arrow.svg) no-repeat center center; background-size:100% auto; }
}