@charset "UTF-8";
body{position:relative; overflow-x:hidden !important; width:100%; min-width:1200px; color:#fff; background:#000;}

/*skip navigation*/
#skip_navigation{z-index:9999; position:absolute; left:0; top:0;}
#skip_navigation *{list-style:none; margin:0; padding:0;}
#skip_navigation a{display:block; width:1px; height:1px; overflow:hidden; color:#000; white-space:nowrap; text-align:center;}
#skip_navigation a:focus,
#skip_navigation a:active{width:100px; height:auto; background:#ffd;}

.logo{z-index:97; position:fixed; top:40px; left:45px; width:77px; height:58px; font-size:0; text-indent:-999px; background:url(../images/logo.png) no-repeat 50% 50%;}
.logo a{display:block; width:100%; height:100%;}
.fp-viewing-five .logo{background-image:url(../images/logo_black.png);}

.slick-vertical .slick-slide{border:none;}

#main_content{position:relative;}
#main_content .inner{position:relative; width:90%; margin:0 auto; box-sizing:border-box;}
#main_content .inner:after{content:''; display:block; clear:both;}

/* fullpage */
.fp-watermark{display:none;}

/* gnb */
#gnb{z-index:97; overflow:hidden; position:fixed; right:0; top:50px; width:50%; word-break:keep-all;}
#gnb .inner{width:100%; padding:0;}
#gnb ul{display:flex; justify-content:space-between;}
#gnb ul > li{flex:1 1 auto; position:relative; float:left; text-align:center;}
#gnb ul > li > a{z-index:97; position:relative; display:block; width:100%; line-height:24px; font-size:20px; color:#fff; font-weight:400; text-decoration:none; cursor:pointer}
.fp-viewing-five #gnb ul > li > a{color:#363636;}

.section h3{line-height:110%; font-size:48px; font-weight:700; color: #fff;}

/* visual */
#main{position:relative; width:100%; height:100%; text-align:center; background:url(../images/bg1.png) no-repeat 50% 50% / cover;}
#main .inner{width:100%; padding:0 70px 6vh; box-sizing:border-box;}
#main .list_wrap .list1 strong,
#main .list_wrap .list2 strong {letter-spacing: -2px;}
#main .list_wrap .list:not(:first-of-type){display:none;}
#main .list_wrap.slick-initialized .list:not(:first-of-type){display:inline-block;} 
#main strong{position:relative; display:block; margin:0 0 48px; line-height:100%; font-size:90px; font-weight:500; letter-spacing:-4px;}
#main strong:before{content:''; display:inline-block; vertical-align:top; width:31px; height:31px; margin:0 12px 0 0; background:#FF561E; border-radius:50%;}
#main strong span{color: #FF561E;}
#main .txt{line-height:120%; font-size:30px; font-weight:500; letter-spacing:-1px;}
#main .ctrl{z-index:1; display:block; position:absolute; top:50%; left:38px; width:19px; height:39px; font-size:0; text-indent:-999px; background:url(../images/ico_arrow.png) no-repeat;}
#main .btn_next{left:auto; right:38px; transform:rotate(180deg);}
#main .slick-arrow.slick-disabled{opacity:0.5; cursor:default;}
#main .list3 strong{margin:0 0 27px;}
#main .list3 .txt{line-height:140%; margin: 0 0 5px;}
#main .list4 .txt,
#main .list5 .txt{font-size:25px;}

/* business */
#business{position:relative; width:100%; height:100%; background:url(../images/bg2.png) no-repeat 50% 50% / cover;}
#business .list_wrap{display: flex; padding:70px 0 0 0;}
#business .list{flex-shrink:0;}
#business .list a{display:block; width:378px; height:360px; margin:48px 30px 0 31px; padding:75px 46px 0 63px; border:1px solid #fff; border-radius:10px; background:rgba(255,255,255,0.11); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-sizing:border-box; color:#fff; text-decoration:none; transition:0.35s ease-in-out;}
#business .list2 a{padding: 55px 46px 0 63px;}
#business .list a:after{content:''; position: absolute; bottom:75px; right:66px; display:block; width:166px; height:166px; background:url(../images/ico_business1.png) no-repeat 50% 50% / cover; transition:0.35s ease-in-out;}
#business .list2 a:after{bottom:55px; right:60px; width:142px; height:127px; background-image:url(../images/ico_business2.png);}
#business .list3 a:after{bottom:56px; right:53px; width:117px; height:107px; background-image:url(../images/ico_business3.png);}
#business .list4 a:after{bottom:80px; right:67px; width:116px; height:119px; background-image:url(../images/ico_business4.png);}
#business .list5 a:after{bottom:78px; right:49px; width:124px; height:128px; background-image:url(../images/ico_business5.png);}
#business .list a:hover{width:485px; height:462px; margin:0 38px 0 37px;}
#business .list1 a:hover:after{bottom:108px; right:58px;}
#business .list2 a:hover:after{bottom:119px; right:70px; width:160px; height:143px;}
#business .list3 a:hover:after{bottom:52px; right:80px; width:145px; height:133px;}
#business .list4 a:hover:after{width:130px; height:133px;}
#business .list5 a:hover:after{right:37px;}

#business .tit{display:block; line-height:120%; font-size:35px; font-weight:700;}
#business .txt{opacity:0; visibility:hidden; display:block; padding:20px 0 0 0; line-height:200%;}
#business .img{padding:34px 0 0 0; text-align:right;}
#business .img img{transform:scale(0.775);}
#business .list a:hover .txt{opacity:1; visibility:visible; transition:0.6s 0.07s ease-in-out;}

/* project */
#project {background:#0f0f0f;}
#project .year{display: flex; justify-content:flex-end; padding:77px 0 35px; font-weight:600; font-size:60px;}
#project .year li + li{padding:0 0 0 30px;}
#project .year a{position:relative; display:block; line-height:72px; padding:0 23px; color:#494949; text-decoration:none; text-align:center; transition:0.2s ease-in-out;}
#project .year .on a{color:#fff;}
#project .year a:after{content:''; opacity:0; visibility:hidden; position:absolute; right:0; top:0; width:11px; height:11px; border-radius:50%; background:#ff561e;}
#project .year .on a:after{opacity:1; visibility:visible; transition:0.2s 0.08s ease-in-out;}
#project .list_wrap{height:523px;}
#project .list_wrap > ul{overflow:hidden; height:0; opacity:0; visibility:hidden; transition:0.35s linear;}
#project .list_wrap > ul.on{height:inherit; opacity:1; visibility:visible;}
#project .list_wrap li{position:relative; display:flex; justify-content:space-between; flex-wrap:wrap; align-items:center; padding:27px 49px 27px 45px; border-radius:10px; border:1px solid #787878; background:rgba(255,255,255,0.05); transition:0.2s ease-in-out;}
#project .list_wrap li + li{margin:12px 0 0 0;}
#project .tit{font-size:24px; font-weight:600;}
#project .tit a{color: #fff; text-decoration:none;}
#project .con{display:none; width:100%;}
#project li.on .con{display:block;}
#project .detail{display:flex; justify-content:space-between; flex-wrap:wrap; width:100%; padding:24px 0 0 0; line-height:120%; font-size:17px; font-weight:300; color: #DEDEDE;}
#project .order{display:block; line-height:120%; font-size:17px; font-weight:300; color: #DEDEDE;}
#project .btn_tit{position:absolute; top:34px; right:18px; width:20px; height:11px; font-size:0; background:url(../images/ico_arrow2.png) no-repeat 50% 0;}
#project li.on .btn_tit{top:14px; transform:rotate(180deg);}

/* partners */
#partners .con{position:relative; width:100%; padding:64px 0 60px;}
#partners .con .up img {width: 60%;}
#partners .con:before,
#partners .con:after{z-index:1; content:''; display:block; position: absolute; top:0; left:0; width:31.4%; height:100%; background: linear-gradient(to right, rgba(0,0,0,1) 6%, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0) 100%);}
#partners .con:after{left:auto; right:0; background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 50%, rgba(0,0,0,1) 94%);}
#partners .list_wrap{display:flex;}
#partners .up{margin:0 0 15px;}
#partners .list span{display:flex; flex-shrink:0; align-items:center; justify-content:center; width:193px; height:193px; margin:0 7px 0 8px; border-radius:5px; background:#fff;}
#partners .tit{line-height:150%; font-size:50px; font-weight:500;}

/* contact */
#contact{position:relative; width:100%; height:100%; color: #292929; background:url(../images/bg3.png) no-repeat 50% 50% / cover;}
#contact h3{padding:7vh 0 0 0; font-weight:600; color: #323232;}
#contact .con{display:flex; justify-content:space-between; width:90%; margin:0 auto; padding:40px 0 0 0;}
#contact .info1{width:48.656%;}
#contact .list{position:relative; overflow:hidden; width:100%; padding:32px 39px 26px 32px; margin:0 0 17px; border-radius:10px; box-sizing:border-box; background:rgba(255,255,255,0.43);}
#contact .list .tit{margin:0 0 11px; line-height:120%; color: #292929; font-size:18px; font-weight:500;}
#contact label{font-size:13px; font-weight:500; color:#5E5E5E;}
#contact input[type="text"],
#contact input[type="file"],
#contact input[type="number"],
#contact select{width:100%; height:28px; padding:0 0 0 13px; vertical-align:top; border-radius:2px; border:none; font-size:14px; font-weight:500; box-sizing:border-box; background:#E0E0E0;}
#contact input[type="radio"]{margin:0 3px 0 0; border-color: #DCDCDC;}
#contact input[type="file"]{width:auto; padding:0;}

#contact input[type="text"],
#contact input[type="number"]{-webkit-appearance:none; background:#E0E0E0 url(../images/ico_input.png) no-repeat right 10px top 50%;}
#contact .list1 .tit{position:absolute; top:32px; left:32px;}
#contact .list1 ul,
#contact .list3 ul{display:flex; flex-wrap:wrap; justify-content:space-between;}
#contact .list1 li,
#contact .list3 li{width:49.34%;}
#contact .list1 li{margin:0 0 8px;}
#contact .list1 li:first-child{margin:0 0 8px 50.66%;}

#contact .list2{padding-right:0; padding-bottom:23px;}
#contact .ra_list {float:left; width:100%; padding:8px 0 0 0;}
#contact .ra_list li{float:left; line-height:0; margin:0 15px 11px 0;}

#contact .list3 {padding-bottom:33px;}
#contact .list3 select{-webkit-appearance:none; background:#E0E0E0 url(../images/ico_select.png) no-repeat right 10px top 50%;}

#contact .list4 .btn_submit{font-size: 14px; font-weight: 400;}

#contact .in_list{float:left; padding:5px 0 0 0;}
#contact .btn_submit{float:right; height:32px; width:176px; margin:24px 0 0 0; color: #fff; font-size:15px; font-weight:600; border-radius:4px; background:#FF561E;}
#contact .agree strong{font-weight:700; text-decoration: underline;}

#contact .info2{width:46.746%;}
#contact .root_daum_roughmap{border-radius:10px; width:100%; margin:0 0 33px;}
#contact .roughmap_maker_label{border-radius:30px;}
#contact .roughmap_maker_label .roughmap_lebel_text{padding:8px 15px 8px; font-size:0; letter-spacing:-1px; border-radius:30px; background-color:#fff;}
#contact .roughmap_maker_label .roughmap_lebel_text:before{content:''; display:inline-block; width:35px; height:30px; vertical-align:top; background-image:url(../images/logo_black.png); background-repeat:no-repeat; background-size:50px; background-position:50%;}
#contact .roughmap_maker_label .roughmap_lebel_text:after{content:"NEOFLO"; display:inline-block; line-height:30px; font-size:20px; font-weight:500; font-family:"Pretendard";}
#contact .root_daum_roughmap_landing .map_border {display: none;}

#contact .location{padding:40px 45px; border-radius:10px; border:1px solid #646464; box-sizing:border-box; color: rgba(0,0,0,0.7);}
#contact .call {display: flex; padding:14px 0;}
#contact .email{display: flex;}
#contact .email dt{margin:0 25px 0 0;}
#contact .email li:first-child{margin:0 0 8px;}

/* pc */
@media all and (min-width:1024px) and (max-width:1199px) {

#main strong{font-size:70px; margin:45px 0 38px;}
#main strong:before{width:22px; height:22px; margin:0 13px 0 0;}
#main .txt{font-size:22px;}
#main .list3 div{width: 76%; margin: 0 auto; font-size: 16px;}
#main .list4 .txt,
#main .list5 .txt{font-size:17px;}

#project .year{padding:77px 0 35px; font-weight:600; font-size:45px;}
#project .year li + li{padding:0;}
#project .year a{padding:0 20px;}
#project .list_wrap li{padding: 20px 49px 20px 45px;}
#project .tit{font-size:18px; font-weight:600;}
#project .detail{padding:16px 0 0 0; font-size:14px;}
#project .order{font-size:14px;}

#contact .con{width:100%;}
#contact .info1{width:90%; margin:0 auto;}
#contact .info2{width:90%; margin:0 auto;}
#contact .location{font-size: 17px;}
#contact .location{padding:30px 45px;}
#contact .call li:first-child:after{margin:-2px 12px 0 12px;}
#contact .email dt{margin:0 12px 0 0;}
#contact .email li:first-child{margin:0 0 7px;}
    }

/* 태블릿 */
@media all and (min-width:768px) and (max-width:1023px) {

#gnb{right:3%;}
#gnb ul > li > a{font-size:17px;}

#main strong{font-size:70px; margin:45px 0 38px;}
#main strong:before{width:22px; height:22px; margin:0 13px 0 0;}
#main .txt{font-size:22px;}
#main .list3 div{width: 76%; margin: 0 auto; font-size: 16px;}
#main .list4 .txt,
#main .list5 .txt{font-size:17px;}

#project .year{padding:77px 0 35px; font-weight:600; font-size:40px;}
#project .year li + li{padding:0;}
#project .year a{padding:0 20px;}
#project .list_wrap li{padding: 18px 49px 18px 45px;}
#project .tit{font-size:17px; font-weight:600;}
#project .detail{padding:16px 0 0 0; font-size:14px;}
#project .order{font-size:14px;}

#contact .con{width:100%;}
#contact .info1{width:90%; margin:0 auto;}
#contact .info2{width:90%; margin:0 auto;}
}

/* 모바일 */
@media all and (min-width:281px) and (max-width:767px) {

#gnb{right:4%; width: 60%;}
#gnb ul > li > a{font-size:17px;}

#main strong{font-size:50px; margin:60px 0 28px;}
#main strong:before{width:20px; height:20px; margin:0 13px 0 0;}
#main .txt{font-size:18px;}
#main .list3 div{width: 76%; margin: 0 auto; font-size: 14px;}
#main .list4 .txt,
#main .list5 .txt{font-size:15px;}

#project .year{padding:77px 0 35px; font-weights:600; font-size:40px;}
#project .year li + li{padding:0;}
#project .year a{padding:0 15px;}
#project .list_wrap li{padding: 13px 49px 13px 45px;}
#project .tit{font-size:15px; font-weight:600;}
#project .detail{padding:12px 0 0 0; font-size:13px;}
#project .order{font-size:13px;}

#partners .tit{font-size:40px;}

#contact .con{display:block; width:100%;}
#contact .info1{width:90%; margin:0 auto;}
#contact .info2{width:90%; margin:0 auto;}
}

/* 플립 */
@media all and (max-width: 280px) {
#main strong{font-size:50px; margin:60px 0 28px;}
#main strong:before{width:20px; height:20px; margin:0 13px 0 0;}
#main .txt{font-size:18px;}
#main .list3 div{width: 76%; margin: 0 auto; font-size: 14px;}
#main .list4 .txt,
#main .list5 .txt{font-size:15px;}
}