@charset "euc-kr";
#mvisImgWrap { position:relative; width:100%; background:rgba(255,255,255,1); overflow:hidden; }
.mainVisimg .elem { position:relative; height:100vh; background-repeat:no-repeat; background-size:cover; }
.mainVisimg .elem.visImg_1 { background-image:url(../images/m_vis_1.jpg); }
.mainVisimg .elem.visImg_2 { background-image:url(../images/m_vis_2.jpg); }
.mainVisimg .elem.visImg_3 { background-image:url(../images/m_vis_3.jpg); }
.mainVisimg .elem .visText { position:absolute; top:330px; left:50%; margin-left:-412px; color:#FFF; z-index:5; }
.mainVisimg .elem .visText .vmt { font-size:80px; font-weight:700; font-family:'Play', sans-serif; background:linear-gradient(to right,#76C3DE,#C0DFEA); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.mainVisimg .elem .visText .vst { font-size:24px; font-family:'GmarketSansLight'; margin:10px 0 30px; line-height:1.45; }
.ctrlArea { position:absolute; top:100px; color:#FFF; font-family:'Montserrat', sans-serif; }
.process_bar { position:relative; margin:0; background:rgba(255,255,255,0); width:100vw; height:1px; text-align:center; vertical-align:middle; text-indent:-9999px; overflow:hidden; }
.process_bar:before { content:''; position:absolute; top:0; left:0; height:100%; background:rgba(255,255,255,.2); -webkit-transition:5s ease-in-out; transition:5s ease-in-out; }
.process_bar.active::before { width:100%; -webkit-animation-duration:5s; animation-duration:5s; -webkit-animation-name:PROCBAR; animation-name:PROCBAR; -webkit-animation-fill-mode:both; animation-fill-mode:both; }
@-webkit-keyframes PROCBAR { 0% { width:0; } 100% { width:100%; } }
@keyframes PROCBAR { 0% { width:0; } 100% { width:100%; } }
.ctrlArea > p { position:absolute; top:475px; left:50%; margin-left:-419px; width:31px; height:31px; border-radius:100%; background:rgba(255,255,255,1); }
.ctrlArea > p > .playStop { display:inline-block; width:9px; height:10px; background:url('../images/controlBtn_hori.png') no-repeat -23px center; text-indent:-9999px; overflow:hidden; padding:11px; border-radius:100%; -webkit-transition:.2s ease; -moz-transition:.2s ease; -o-transition:.2s ease; transition:.2s ease; }
.ctrlArea > p > .playStop.on { background:url('../images/controlBtn_hori.png') no-repeat 11px center; }
.ctrlArea > .pageWrap { position:absolute; top:480px; left:50%; margin-left:-381px; }
.ctrlArea > .pageWrap > em { font-size:14px; margin-left:10px; text-indent:-9999px; }
.ctrlArea > .pageWrap > strong.page_divi { font-size:12px; color:rgba(255,255,255,.5); }
.ctrlArea > .pageWrap > span { font-size:14px; color:rgba(255,255,255,.5); text-indent:-9999px; }
.optbr { display:block; }
#mainCont { position:relative; width:100%; background:rgba(255,255,255,1); overflow:hidden; }
#noticeArea { position:relative; width:100%; background:#FFF; border-bottom:1px solid rgba(0,0,0,.1); z-index:89; }
#notice { position:relative; width:100%; max-width:1100px; margin:0 auto; border-left:1px solid rgba(0,0,0,.1); padding:70px 0 45px; }
#notice:hover > .notice_more a,
#notice > .notice_more a:focus { filter:alpha(opacity=1); -khtml-opacity:1; -moz-opacity:1; opacity:1; }
#arrow_bg { position:absolute; left:-1px; top:75px; border:10px solid transparent; border-left:10px solid rgba(255, 255, 255, 1); border-right:none; z-index:2; }
#arrow_bd { position:absolute; left:0; top:75px; border:10px solid transparent; border-left:10px solid rgba(0, 0, 0, .2); border-right:none; z-index:1; }
#notice > h3.notice_t { position:absolute; left:66px; font-size:24px; font-family:'GmarketSansBold'; color:#000; }
#notice > .notice_more { position:absolute; top:68px; left:279px; }
#notice > .notice_more a { display:block; width:34px; height:34px; line-height:34px; border-radius:100%; background:rgba(0,136,188,1); font-size:16px; color:#FFF; text-align:center; filter:alpha(opacity=0); -khtml-opacity:0; -moz-opacity:0; opacity:0; -webkit-transition:all .3s ease; -moz-transition:all .3s ease; -o-transition:all 0.3s ease; transition:all .3s ease; }
#notice > .notice_more a i { -webkit-transform:rotate(0deg); -ms-transform:rotate(0deg); transform:rotate(0deg); -webkit-transition:all .3s ease; -moz-transition:all .3s ease; transition:all .3s ease; }
#notice > .notice_more a:hover i,
#notice > .notice_more a:focus i { -webkit-transform:rotate(180deg); -ms-transform:rotate(180deg); transform:rotate(180deg); }
#contWrap { position:relative; width:100%; background:rgba(255,255,255,1); overflow:hidden; z-index:2; }
#contArea { width:100%; max-width:1200px; margin:100px auto; }
.highlight_tit { font-size:50px; font-weight:400; text-align:center; color:#2a343e; line-height:1.2; letter-spacing:-1px; margin-bottom:60px; }
.highlight_tit b { font-weight:600; color:rgba(0,143,197,1); letter-spacing:inherit; }
.box_txt { font-size:16px; color:#555; line-height:1.6; word-break:keep-all; }
#contArea .top_box { border-top:1px solid rgba(0,143,197,1); padding:80px 70px; background-color:#F8F8F8; background-image:url("../images/hlight_bg.png"); background-size:565px; background-repeat:no-repeat; background-position:right bottom; }
#contArea .top_box .top_tit { position:relative; display:inline-block; font-size:46px; font-weight:500; color:#2a343e; margin-bottom:20px; overflow:hidden; z-index:1; }
#contArea .top_box .top_tit.onViewrep:before { display:block; clear:both; content:''; position:absolute; top:0; right:0; height:100%; background:rgba(248,248,248,1); animation:highlight_2 1s; animation-delay:.8s; animation-fill-mode:both; z-index:2; }
#contArea .top_box .top_tit b { position:relative; z-index:1; }
#contArea .top_box.onViewrep .top_tit b:after { display:block; clear:both; content:''; position:absolute; left:0; bottom:3px; background:rgba(0,143,197,.2); width:0; height:15px; max-width:100%; z-index:-1; animation:highlight 1.5s; animation-delay:1.6s; animation-fill-mode:forwards; }
#contArea .top_box a { position:relative; width:192px; display:block; color:#777; font-weight:500; font-size:18px; letter-spacing:-.3px; margin:60px 0 30px; transition:.3s; }
#contArea .top_box a:hover { color:rgba(0,143,197,1); }
#contArea .top_box a i { position:absolute; top:1px; right:0; width:26px; height:26px; line-height:26px; background:#2a343e; border-radius:50%; font-size:14px; color:#FFF; text-align:center; transition:.3s; }
#contArea .top_box a:hover i { background-color:rgba(0,143,197,1); }
@keyframes highlight { 0% { width:0; } 100% { width:100%; } }
@keyframes highlight_2 { 0% { width:100%; } 100% { width:0; } }
#cntArea { width:100%; height:auto; max-height:100%; background:url(../images/cnt_back.jpg) no-repeat center/cover fixed; padding:180px 0; }
#cntArea .cntT { text-align:center; padding-bottom:80px; font-size:23px; font-family:'Montserrat'; font-weight:300; letter-spacing:6px; color:#BBB; }
#cntArea ul#cntWrap { width:100%; max-width:1300px; margin:0 auto; overflow:hidden; }
#cntArea ul#cntWrap li { float:left; width:24.9%; border-right:1px solid rgba(255,255,255,.1); }
#cntArea ul#cntWrap li:last-child { border-right:0; }
#cntArea ul#cntWrap li .num { font-size:80px; color:rgba(255,255,255,1); font-family:'Montserrat'; font-weight:500; text-align:center; padding-bottom:20px; }
#cntArea ul#cntWrap li p.des { color:#888; font-size:16px; font-weight:400; text-align:center; }
#roadmap_contents { float:left; width:100%; height:100vh; margin:0; }
#roadmap_contents .nodemap { position:relative; width:100%; height:100vh; }
.map_cont { position:relative; z-index:9; }
.guideWrap { margin:0 auto; }
.guideWrap:before, .guideWrap:after { content:''; display:table; }
.guideWrap:after { clear:both; }
.map_cont .guide { position:absolute; left:50%; margin-left:110px; bottom:200px; padding:55px 55px 65px; background:rgba(0,52,107,1); }
.map_cont .guide .clsBtn { position:absolute; top:0; right:0; }
.map_cont .guide .clsBtn a { display:block; width:34px; height:34px; line-height:34px; font-size:17px; text-align:center; background:rgba(255, 255, 255, 1); color:rgba(58, 81, 13, 1); border:1px solid rgba(255, 255, 255, 1); }
.map_cont .guide .clsBtn a i { -webkit-transform:rotate(0deg); -ms-transform:rotate(0deg); transform:rotate(0deg); -webkit-transition:all .3s ease; -moz-transition:all .3s ease; transition:all .3s ease; }
.map_cont .guide .clsBtn a:hover i,
.map_cont .guide .clsBtn a:focus i { -webkit-transform:rotate(180deg); -ms-transform:rotate(180deg); transform:rotate(180deg); }
.map_cont .guide .guide_mt { font-size:30px; color:rgba(255, 255, 255, 1); font-weight:700; margin-bottom:20px; }
.map_cont .guide .guide_info.addr { padding-bottom:25px; margin-bottom:25px; border-bottom:1px solid rgba(255, 255, 255, 0.2); }
.map_cont .guide .guide_info .info_t { font-size:18px; color:rgba(97,164,235,1); font-weight:700; margin-bottom:5px; }
.map_cont .guide .guide_info li,
.map_cont .guide .guide_info li.picto { font-size:15px; color:#FFF; font-weight:300; line-height:1.7; }
.map_cont .guide .guide_info li.picto i { font-size:13px !important; padding-right:2px; }
.viewBtn { margin-top:30px; }
.viewBtn a { display:block; width:160px; font-size:15px; color:#FFF; text-align:center; padding:10px 0; border:1px solid #FFF; transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease; }
.viewBtn a:hover { color:rgba(30, 50, 97, 1); background:#FFF; }
.nodepop { position:absolute; width:540px; height:100%; left:50%; top:270px; margin-left:-270px; z-index:9; }
#popWrapper { float:left; width:540px; }
#popWrapper .popImg { width:540px; height:100%; }
#popWrapper .popImg img { border-radius:12px 12px 0 0; }
#popWrapper .popFooter { position:relative; background:#000; height:38px; }	
#popWrapper .popFooter .to_cls { position:absolute; right:60px; line-height:38px; }
#popWrapper .popFooter .to_cls input { vertical-align:middle; margin-right:4px; }
#popWrapper .popFooter .to_cls label { color:#BBB; font-size:12px; cursor:pointer; }
#popWrapper .popFooter .cls { position:absolute; top:0; right:0; }