@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");
}

.__cg { font-family: "century-gothic", sans-serif; font-weight: 700; font-style: normal; }


/* Reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;margin:0;padding:0}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,select{display:block}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
table{width:100%;border-collapse:collapse;border-spacing:0}
img{vertical-align:top;outline:none;border:none}
iframe,textarea{vertical-align:top;}
address{font-style:normal}


* { box-sizing: border-box; }

.brand-identity a { display:inline-block; width:60px; height:26px; background:url(../img/logo.svg) no-repeat; background-size:100% auto; text-indent:-10000em; vertical-align:middle; }
.forehead .sns-share-box ul li a { text-indent:-9999em; }

body, input { 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; color:#222; overflow-x:hidden; }

section { position:relative; width:100%; height:auto; overflow:hidden; background:#fff; }

h2 { font-size:50px; line-height:60px; letter-spacing:-1px; }
h3 { font-size:48px; line-height:58px; letter-spacing:-.96px; }
h3 + p { margin-top:20px; font-size:18px; line-height:27px; letter-spacing:-.36px; }

/* main banner */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        height: 0;
        /* transform: translateY(100px); */
        opacity: 0;
    }
    to {
        height: auto;
        /* transform: translateY(0); */
        opacity: 1;
    }
}

.banner { overflow: hidden; z-index: 100; }
.banner a { display: inline-block; }
.banner.slide { position: relative; background-color: #14363b; } 
.banner.slide .banner_content { text-align: center; } 
.banner.slide .banner_checkbox { display: flex; align-items: center; position: absolute; top: 12px; right: 50px; color: rgba(255, 255, 255, 0.65); } 
.banner.slide .banner_checkbox .close_btn { position: relative; margin-left: 10px; padding: 0; background: transparent; border: 0; color: rgba(255, 255, 255, 0.9); font-size: 0; width:24px; height: 24px; cursor: pointer; }
.banner.slide .banner_checkbox .close_btn::before, 
.banner.slide .banner_checkbox .close_btn::after { position:absolute; top:5px; right:7px; content:" "; height:16px; width:2.5px; background-color:#fff; transform:rotate(45deg); opacity:0.65; border-radius:3px; }
.banner.slide .banner_checkbox .close_btn::after { transform: rotate(-45deg); }
.banner.layer { z-index: 100; position: absolute; top: 155px; right: 35px; width: 600px; }
.banner.layer .banner_checkbox { display: flex; align-items: center; justify-content: space-between; padding-left: 16px; height: 45px; background: #484848; color: #fff; }
.banner.layer .banner_checkbox .close_btn { width: 70px; height: 100%; border: none; font-size: 14px; letter-spacing: -0.35px; color: #fff; background-color: #292929; cursor: pointer; }

.content_wrap { position: relative; }

/* menu */
.menu { opacity:0; position:fixed; top:0; left:0; width:100vw; height:84px; z-index:100; mix-blend-mode:normal; transition:all .3s ease; }
.menu ul { display:flex; align-items:center; gap:50px; margin:0 auto; width:1150px; height:inherit; }
.menu ul li { color:#fff; font-size:20px; line-height:84px; letter-spacing:-.4px; font-weight:400; }
.menu ul li:nth-child(1) { margin-right:36px; }
.menu ul li a { position:relative; color:inherit; text-decoration:none; cursor:pointer; }
.menu ul li a:before { content:''; position:absolute; bottom:-3px; left:50%; width:0; height:1px; background:#fff; transition:all .3s ease; }
.menu ul li a:after { content:''; position:absolute; bottom:-3px; right:50%; width:0; height:1px; background:#fff; transition:all .3s ease; }
.menu ul li a.active:before,
.menu ul li a:hover:before,
.menu ul li a.active:after,
.menu ul li a:hover:after { width:50%; }


/* intro */
.intro { width:100vw; height:100vh; background:#3c36c4; }

.intro .__inner { display:flex; justify-content:center; align-items:center; gap:41px; position:relative; margin:0 auto; width:1180px; height:100vh; z-index:2; }
.intro .__inner .visual { opacity:0; position:relative; width:585px; height:398px; }
.intro .__inner .visual img { width:inherit; height:inherit; }
.intro .__inner .visual:after { content:''; position:absolute; top:8px; left:0; width:15%; height:calc(100% - 27px);
/*   gradient   */
background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.03) 1%, rgba(255,255,255,0.6) 30%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0.85) 70%, rgba(255,255,255,0.85) 71%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(1%,rgba(255,255,255,0.03)), color-stop(30%,rgba(255,255,255,0.85)), color-stop(50%,rgba(255,255,255,0.85)), color-stop(70%,rgba(255,255,255,0.85)), color-stop(71%,rgba(255,255,255,0.85)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.03) 1%,rgba(255,255,255,0.6) 30%,rgba(255,255,255,0.85) 50%,rgba(255,255,255,0.85) 70%,rgba(255,255,255,0.85) 71%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.03) 1%,rgba(255,255,255,0.6) 30%,rgba(255,255,255,0.85) 50%,rgba(255,255,255,0.85) 70%,rgba(255,255,255,0.85) 71%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.03) 1%,rgba(255,255,255,0.6) 30%,rgba(255,255,255,0.85) 50%,rgba(255,255,255,0.85) 70%,rgba(255,255,255,0.85) 71%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.03) 1%,rgba(255,255,255,0.6) 30%,rgba(255,255,255,0.85) 50%,rgba(255,255,255,0.85) 70%,rgba(255,255,255,0.85) 71%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); 
transform: skew(-10deg,0deg);
-webkit-transform: skew(-10deg,0deg);
-moz-transform: skew(-10deg,0deg);
-ms-transform: skew(-10deg,0deg);
-o-transform: skew(-10deg,0deg);
animation: move 2s;
animation-iteration-count: infinite;
animation-delay: 1s;
-webkit-animation: move 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 1s;
-moz-transform: skew(-10deg,0deg);
-moz-animation: move 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-delay: 1s;
-ms-transform: skew(-10deg,0deg);
-ms-animation: move 2s;
-ms-animation-iteration-count: infinite;
-ms-animation-delay: 1s;
-o-transform: skew(-10deg,0deg);
-o-animation: move 2s;
-o-animation-iteration-count: infinite;
-o-animation-delay: 1s; }

@keyframes move {
    0% { left: 0; opacity: 0; }
    5% { opacity: 0.0 }
    48% { opacity: 0.3 }
    80% { opacity: 0.0 }
    100% { left: 82%; opacity: 0; }
}

@-webkit-keyframes move {
    0% { left: 0; opacity: 0; }
    5% { opacity: 0.0 }
    48% { opacity: 0.3 }
    80% { opacity: 0.0 }
    100% { left: 82%; opacity: 0; }
}

@-moz-keyframes move {
    0% { left: 0; opacity: 0; }
    5% { opacity: 0.0 }
    48% { opacity: 0.3 }
    80% { opacity: 0.0 }
    100% { left: 82%; opacity: 0; }
}

@-ms-keyframes move {
    0% { left: 0; opacity: 0; }
    5% { opacity: 0.0 }
    48% { opacity: 0.3 }
    80% { opacity: 0.0 }
    100% { left: 82%; opacity: 0; }
}

@-o-keyframes move {
    0% { left: 0; opacity: 0; }
    5% { opacity: 0.0 }
    48% { opacity: 0.3 }
    80% { opacity: 0.0 }
    100% { left: 82%; opacity: 0; }
}

.intro .__inner .txt_wrap { width:551px; color:#fff; }
.intro .__inner .txt_wrap h5 { opacity:0; font-size:24px; line-height:29px; letter-spacing:-.48px; font-weight:400; }
.intro .__inner .txt_wrap h1 { font-size:62px; line-height:78px; letter-spacing:-1.24px; overflow:hidden; }
.intro .__inner .txt_wrap h1:nth-child(2) { margin-top:30px; }
.intro .__inner .txt_wrap h1:last-child { opacity:0; }

.intro .__inner .txt_wrap h1.title_1 { transform:translateX(-200px); }
.intro .__inner .txt_wrap h1.title_2 { transform:translateX(-330px); }
.intro .__inner .txt_wrap h1 span { display:inline-block; }
.intro .__inner .txt_wrap h1.title_1 span { transform:translateY(100px); }
.intro .__inner .txt_wrap h1.title_2 span { transform:translateY(-100px); }
.intro .__inner .txt_wrap h1.title_3 span { transform:translateY(100px); }

.intro .ptc_area { position:absolute; top:0; left:0; width:inherit; height:inherit; z-index:-1; }
.intro .ptc_area .__ptc { opacity:0; position:absolute; }

.intro .ptc_area .ptc_1 { top:-15.4vh; left:calc(50% - 65vh); transform:translateX(-50%); width:65.26vh; height:57.5vh; background:url(../img/ptc_1.png) no-repeat center center; background-size:100% auto; }
.intro .ptc_area .ptc_2 { top:12.36vh; left:calc(50% - 12.76vh); transform:translateX(-50%); width:13.68vh; height:13.42vh; background:url(../img/ptc_2.png) no-repeat center center; background-size:100% auto; }
.intro .ptc_area .ptc_3 { top:17.63vh; left:calc(50% + 56.7vh); transform:translateX(-50%); width:11.84vh; height:11.71vh; background:url(../img/ptc_3.png) no-repeat center center; background-size:100% auto; }
.intro .ptc_area .ptc_4 { top:54.34vh; left:calc(50% - 87.9vh); transform:translateX(-50%); width:14.34vh; height:13.42vh; background:url(../img/ptc_4.png) no-repeat center center; background-size:100% auto; }
.intro .ptc_area .ptc_5 { bottom:-11vh; left:calc(50% - 75.65vh); transform:translateX(-50%); width:43.94vh; height:41.31vh; background:url(../img/ptc_5.png) no-repeat center center; opacity:.8; background-size:100% auto; }
.intro .ptc_area .ptc_6 { bottom:11.57vh; left:calc(50% + 58.42vh); transform:translateX(-50%); width:14.34vh; height:18vh; background:url(../img/ptc_6.png) no-repeat center center; background-size:100% auto; }
.intro .ptc_area .ptc_7 { bottom:9.6vh; left:calc(50% + 82.5vh); transform:translateX(-50%); width:15.13vh; height:13.81vh; background:url(../img/ptc_7.png) no-repeat center center; background-size:100% auto; }

.intro .ptc_1.active { animation:float2 5s ease-in-out infinite; }
.intro .ptc_2.active { animation:float 2s ease-in-out infinite; }
.intro .ptc_3.active { animation:float3 3s ease-in-out infinite; }
.intro .ptc_4.active { animation:float 1.5s ease-in-out infinite; }
.intro .ptc_5.active { animation:float3 4s ease-in-out infinite; }
.intro .ptc_6.active { animation:float3 3s ease-in-out infinite; }
.intro .ptc_7.active { animation:float2 3s ease-in-out infinite; }

@keyframes float {
    from { transform:translate(-50%, 0%); }
    65%  { transform:translate(-50%, -10%); }
    to   { transform:translate(-50%, 0%); }    
}

@keyframes float2 {
    from { transform:translate(-50%, 0%); }
    65%  { transform:translate(-50%, 5%); }
    to   { transform:translate(-50%, 0%); }    
}

@keyframes float3 {
    from { transform:translate(-50%, 0%) rotate(0deg); }
    65%  { transform:translate(-50%, -10%) rotate(10deg); }
    to   { transform:translate(-50%, 0%) rotate(0); }    
}


/* sub */
.sec2 { padding:135px 0; width:100vw; height:fit-content; background:#3c36c4; }
.sec2 .__inner { margin:0 auto; width:686px; color:#fff; }
.sec2 .__inner p { margin-top:40px; font-size:20px; line-height:30px; letter-spacing:-.4px; text-align:center; }

.sec2 .ptc_area { position:absolute; top:0; left:0; width:inherit; height:100%; z-index:1; }
.sec2 .ptc_area .__ptc { position:absolute; }
.sec2 .ptc_area .ptc_1 { top:217px; left:calc(50% - 592px); transform:translateX(-50%); width:194px; height:198px; background:url(../img/sub_1.png) no-repeat center center; background-size:100% auto; }
.sec2 .ptc_area .ptc_2 { top:40px; left:calc(50% - 325px); transform:translateX(-50%); width:115px; height:105px; background:url(../img/sub_2.png) no-repeat center center; background-size:100% auto; }
.sec2 .ptc_area .ptc_3 { top:379px; left:calc(50% + 288px); transform:translateX(-50%); width:74px; height:74px; background:url(../img/sub_3.png) no-repeat center center; background-size:100% auto; }
.sec2 .ptc_area .ptc_4 { top:137px; left:calc(50% + 413px); transform:translateX(-50%); width:122px; height:122px; background:url(../img/sub_4.png) no-repeat center center; background-size:100% auto; }
.sec2 .ptc_area .ptc_5 { top:378px; left:calc(50% + 679px); transform:translateX(-50%); width:146px; height:145px; background:url(../img/sub_5.png) no-repeat center center; opacity:.8; background-size:100% auto; }


/* link */
.sec3 { padding:108px 0 66px; width:100vw; height:fit-content; background:#f6f7f9; }
.sec3 .__inner { margin:0 auto; width:1276px; }
.sec3 .__inner .ico_wrap { display:flex; justify-content:center; gap:135px; margin-top:55px; }
.sec3 .__inner .ico_wrap li { width:120px; height:160px; text-align:center; cursor:pointer; }
.sec3 .__inner .ico_wrap li a.ico_inner { display:block; padding-top:30px; width:inherit; height:inherit; text-decoration:none; border-radius:20px; transition:all .3s ease; }
.sec3 .__inner .ico_wrap li:hover a.ico_inner { box-shadow: 10px 10px 30px 0 rgba(0, 0, 0, 0.16); }
.sec3 .__inner .ico_wrap li .__ico { width:79px; height:74px; }
.sec3 .__inner .ico_wrap li .ico_1 { margin:0 auto; background:url(../img/ic_intro_1.png) no-repeat center center; background-size:100% auto; }
.sec3 .__inner .ico_wrap li .ico_2 { margin:0 auto; background:url(../img/ic_intro_2.png) no-repeat center center; background-size:100% auto; }
.sec3 .__inner .ico_wrap li .ico_3 { margin:0 auto; background:url(../img/ic_intro_3.png) no-repeat center center; background-size:100% auto; }
.sec3 .__inner .ico_wrap li .ico_4 { margin:0 auto; background:url(../img/ic_intro_4.png) no-repeat center center; background-size:100% auto; }

.sec3 .__inner .ico_wrap li .__ico + p { margin-top:13px; color:#000; font-size:18px; }


/* value */
.sec4 { padding:90px 0 227px; width:100vw; height:fit-content; }
.sec4 .__inner { display:flex; gap:61px; margin:0 auto; width:1276px; }
.sec4 .__inner h3 { color:#402abc; }
.sec4 .__inner h3 + p { width:244px; }

.sec4 .__inner .contents { position:relative; margin-top:27px; width:952px; border-top:2px solid #402abc; }
.sec4 .__inner .contents .__mask { position:absolute; top:-2px; right:0; width:100%; height:5px; background:#fff; }
.sec4 .__inner .contents .list { display:flex; gap:51px; margin-top:73px; }
.sec4 .__inner .contents .list li { padding-bottom:30px; width:282px; height:fit-content; border-bottom:2px solid #000; }
.sec4 .__inner .contents .list li .__visual { position:relative; width:inherit; height:287px; }
.sec4 .__inner .contents .list li .visual_1 { background:url(../img/value_1.jpg) no-repeat center center; background-size:100% auto; }
.sec4 .__inner .contents .list li .visual_2 { background:url(../img/value_2.jpg) no-repeat center center; background-size:100% auto; }
.sec4 .__inner .contents .list li .visual_3 { background:url(../img/value_3.jpg) no-repeat center center; background-size:100% auto; }

.sec4 .__inner .contents .list li .__visual .__no { position:absolute; top:-18px; right:-22px; width:60px; height:60px; color:#fff; font-size:20px; line-height:60px; text-align:center; background:#402abc; border-radius:100%; }
.sec4 .__inner .contents .list li .__visual .__name { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); color:#fff; font-size:22px; line-height:26px; letter-spacing:-.44px; text-align:center; font-weight:600; }

.sec4 .__inner .contents .list li .__visual + p { margin-top:35px; font-size:16px; line-height:24px; letter-spacing:-.32px; }
.sec4 .__inner .contents .list li .__visual + p b { display:block; margin-bottom:10px; font-size:18px; line-height:21px; letter-spacing:-.36px; }


/* video */
.video h2 { margin-top:140px; text-align:center; }

.video .video_wrap { position:relative; margin:0 auto; margin-top:60px; width:1200px; height:675px; border-radius:30px; z-index:2; overflow:hidden; }

.video_box { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:1200px; height:675px; transition:all .5s ease; }
#video_bridge .bridge_panel { width:1200px; height:675px; margin:0 auto; }
#video_bridge .bridgeVideo { width:100%; height:100%; min-width:1200px; min-height:675px; }
.video_controls { display:none; }

.video .__flow { position:absolute; top:50%; transform:translateY(-50%); width:max-content; }
.video .__flow .mq_box { white-space:nowrap; }
.video .__flow .mq_box h1 { color:#fff; font-size:180px; line-height:auto; letter-spacing:-6.3px; font-weight:600; }

.video .swiper-pagination { left:50%; transform:translateX(-50%); bottom:-50px; }
.video .swiper-pagination .swiper-pagination-bullet { opacity:.4; margin:0 8px; width:12px; height:12px; background:#000; border-radius:100%; transition:background .5s ease; }
.video .swiper-pagination .swiper-pagination-bullet-active { opacity:1; }


/* search */
.sec5 { color:#fff; text-align:center; background:#402abc; }
.sec5 .__inner { display:flex; flex-wrap:wrap; flex-direction:column; justify-content:center; align-items:center; margin:0 auto; width:1142px; height:818px; }
.sec5 h2 { width:100%; font-size:62px; line-height:75px; letter-spacing:-1.24px; }

.sec5 .first { position:relative; width:inherit; height:inherit; }
.sec5 .first h2 { position:absolute; top:252px; left:50%; transform:translateX(-50%); }

.sec5 .__step { position:absolute; left:50%; transform:translateX(-50%); width:100%; }
.sec5 .step_1 { top:393px; }
.sec5 .step_1 .search_bar { position:relative; margin:0 auto; width:760px; height:50px; background:#fff; border-radius:10px; overflow:hidden; }
.sec5 .step_1 .search_bar:before { content:''; position:absolute; top:0; right:0; width:50px; height:50px; background:#000; }
.sec5 .step_1 .search_bar p { padding-left:17px; color:#999; font-size:17px; line-height:50px; letter-spacing:-.34px; text-align:left; }
.sec5 .step_1 .search_bar:after { content:''; position:absolute; top:12px; right:11px; width:27px; height:27px; background:url(../img/ic_search.svg) no-repeat center center; background-size:100% auto; }
.sec5 .step_1 a { display:block; margin:0 auto; margin-top:80px; width:302px; height:44px; background:#000; border-radius:100px; color:#fff; font-size:20px; line-height:44px; font-weight:500; text-decoration:none; }

.sec5 .step_2 { top:333px; z-index:-1; }
.sec5 .step_2 ul { display:flex; justify-content:center; gap:15px; margin-top:18px; }
.sec5 .step_2 ul:nth-child(1) { margin-top:0; }
.sec5 .step_2 ul li { height:36px; }

.sec5 input[type="radio"] { display:none; }
.sec5 input[type="radio"] + label { display:flex; justify-content:center; align-items:center; padding:6px 26px; width:fit-content; min-width:106px; height:36px; color:#fff; border:1px solid #fff; border-radius:36px; transition:all .3s ease; cursor:pointer; }
.sec5 input[type="radio"] + label:hover { color:#402abc; background:#fff; }
.sec5 .step_2 ul li p { display:inline-block; margin:0 auto; font-size:20px; line-height:36px; font-weight:400; }

.sec5 .step_3 { display:none; z-index:-1; }
.sec5 .step_3 .title_wrap { position:relative; }
.sec5 .step_3 .title_wrap p { margin-top:15px; font-size:18px; line-height:21px; letter-spacing:-.36px; }
.sec5 .step_3 ul.thumb_wrap { display:flex; justify-content:center; gap:70px; margin-top:45px; }
.sec5 .step_3 ul.thumb_wrap li { display:none; width:158px; height:fit-content; }
.sec5 .step_3 ul.thumb_wrap li.active { display:block; }
.sec5 .step_3 ul.thumb_wrap li a { color:#fff; text-decoration:none; }
.sec5 .step_3 ul.thumb_wrap li img { display:block; margin:0 auto; width:inherit; height:209px; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); }
.sec5 .step_3 ul.thumb_wrap li img + p { margin-top:13px; font-size:16px; line-height:22px; letter-spacing:-.32px; text-align:center; font-weight:500; }

.sec5 .step_3 .btn_replay { display:block; margin:0 auto; margin-top:37px; margin-bottom:56px; width:300px; height:44px; color:#fff; font-size:20px; line-height:44px; text-align:center; font-weight:500; text-decoration:none; border-radius:44px; border:1px solid #fff; background:transparent; transition:all .3s ease; cursor:pointer; }
.sec5 .step_3 .btn_replay:hover { color:#402abc; background:#fff; }

.sec5 a.btn_pdf { display:block; position:absolute; bottom:251px; left:50%; transform:translateX(-50%); width:302px; height:44px; color:#fff; font-size:20px; line-height:44px; text-align:center; font-weight:500; text-decoration:none; border-radius:44px; background:#000; z-index:5; }


/* outlink */
.sec6 { display:none; padding:60px 0 130px; background:#341a79; }

/* footer */
.footer_wrap { position:relative; padding:80px 0; width:100vw; background:#222; }
.footer_wrap .__inner { margin:0 auto; width:1150px;}
.footer_wrap .link_box { display:flex; align-items:center; gap:30px; position: relative;}
.footer_wrap .link_box a {color: #bbb; font-size: 18px; line-height: 32px; letter-spacing: -0.4px; text-decoration: none; }
.footer_wrap .link_box a + a { position:relative; padding-left:24px; }
.footer_wrap .link_box a + a:before { content:''; position:absolute; top:50%; left:0; transform:translateY(-50%); width:1px; height:14px; background:#666; }
.footer_wrap .link_box .famiiysite { position:absolute; top:50%; right:0; transform:translateY(-50%); }
.footer_wrap .link_box .famiiysite a { display: flex; align-items: center; justify-content: center; width: 160px; height: 40px; border: 1px solid #777; }
.footer_wrap .link_box .ico_yotube {height: 35px;}
.footer_wrap p { margin-top: 10px; padding-left: 4px; color: #bbb; font-size: 14px; line-height: 18px; letter-spacing: -0.28px;}
.footer_wrap p em { color: #ccc; font-size: 14px; line-height: 18px; letter-spacing: -0.28px; font-style: normal; font-weight: bold;}
.footer_wrap p span + span { position:relative; padding-left:24px; }
.footer_wrap p span + span:before { content:''; position:absolute; top:50%; left:10px; transform:translateY(-50%); width:1px; height:14px; background:#666; }
.footer_wrap .copyright { margin-top: 20px; color: #999; font-size: 14px; line-height: 18px; letter-spacing: -0.28px;}
