@charset "euc-kr";
.sect_1 { width:100%; height:100vh; overflow:hidden; }
#mvisImgWrap { position:relative; width:100%; background:#FFF; }
.mainVisimg .elem { position:relative; height:100vh; background-repeat:no-repeat; background-position:center center; 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:320px; left:50%; margin-left:-560px; z-index:5; }
.mainVisimg .elem .visText .vmt { font-size:68px; font-weight:700; color:rgba(250,222,145,.8); }
.mainVisimg .elem .visText .vmt span { font-weight:200; }
.mainVisimg .elem .visText .vst { font-size:24px; font-family:'GmarketSansLight'; color:rgba(255,255,255,.7); 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,.1); 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:447px; left:50%; margin-left:-559px; width:32px; height:32px; border-radius:0%; background:rgba(255,255,255,1); }
.ctrlArea > p > .playStop { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:9px; height:11px; background:url('../images/controlBtn_vert.png') no-repeat center -21px; text-indent:-9999px; overflow:hidden; padding:10px; 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_vert.png') no-repeat center 10px; }
.ctrlArea > .pageWrap { position:absolute; top:450px; left:50%; margin-left:-504px; }
.ctrlArea > .pageWrap > em { text-indent:-9999px; font-size:18px; }
.ctrlArea > .pageWrap > strong.page_divi { font-size:12px; color:rgba(255,255,255,.5); }
.ctrlArea > .pageWrap > span { font-size:15px; color:rgba(255,255,255,.5); text-indent:-9999px; }
#mvisImgWrap .slick-prev { position:absolute; left:1%; top:50%; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); width:50px; height:50px; background:url(../images/arrow.png) 0 -95px no-repeat; text-indent:-9999px; cursor:pointer; z-index:9; opacity:0; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; -o-transition:all .2s ease-out; transition:all .2s ease-out; }
#mvisImgWrap:hover .slick-prev { left:2%; opacity:1; }
#mvisImgWrap .slick-next { position:absolute; right:1%; top:50%; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); width:50px; height:50px; background:url(../images/arrow.png) 0 -45px no-repeat; text-indent:-9999px; cursor:pointer; z-index:9; opacity:0; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; -o-transition:all .2s ease-out; transition:all .2s ease-out; }
#mvisImgWrap:hover .slick-next { right:2%; opacity:1; }
.scrollDown { position:absolute; left:50%; top:90vh; margin-left:-15px; width:33px; height:20px; z-index:9; -webkit-animation:scrollanim .8s ease-in-out .8s infinite normal; -moz-animation:scrollanim .8s ease-in-out .8s infinite normal; animation:scrollanim .8s ease-in-out .8s infinite normal; -webkit-transition:all .3s ease-out; -moz-transition:all .3s ease-out; -o-transition:all .3s ease-out; transition:all .3s ease-out; }
@keyframes scrollanim { 0%{ top:91vh; }50%{ top:90vh; }100%{ top:91vh; }}
@-webkit-keyframes scrollanim { 0%{ top:91vh; }50%{ top:90vh; }100%{ top:91vh; }}
.optbr { display:block; }
.sect_2 { width:100%; height:100vh; background:rgba(250,249,242,1); }
.sect_2 h3.recomm_mtitle { font-size:30px; color:#333; text-align:center; font-family:'GmarketSansBold'; }
.sect_2 .recomm_stitle { font-size:16px; color:#888; text-align:center; line-height:16px; margin-bottom:60px; }
#cntArea { margin:auto; width:100%; height:auto; }
#cntArea .cntbgImg { position:relative; width:100%; max-width:1100px; height:100%; margin:0 auto; overflow:hidden; }
#cntArea #cntWrap { width:100%; max-width:1100px; margin:0 auto; -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out; transition:all .4s ease-in-out; }
#cntArea #cntWrap li { float:left; width:100%; max-width:260px; padding-right:20px; }
#cntArea #cntWrap li:last-child { padding-right:0; }
.nd-chart1,
.nd-chart2,
.nd-chart3,
.nd-chart4 { position:relative; display:inline-block; width:260px; height:260px; text-align:center; }
.nd-chart1 canvas,
.nd-chart2 canvas,
.nd-chart3 canvas,
.nd-chart4 canvas { position:absolute; top:0; left:0; }
.percent { display:inline-block; margin-top:78px; font-size:46px; color:#333; font-family:'Montserrat'; z-index:9; }
.percent:after { content:'Έν'; font-size:20px; padding-left:3px; }
.chart_txt { display:block; text-align:center; font-size:14px; letter-spacing:6px; color:#AAA; font-weight:300; }
.sect_3 { width:100%; height:100vh; background:rgba(247,247,247,1); }
#noticeArea { width:100%; max-width:1200px; height:100vh; margin:0 auto; border-left:1px solid rgba(0,0,0,.1); }
#notice { position:relative; top:30%; width:100%; }
#arrow_bg { position:absolute; left:-1px; top:9px; border:10px solid transparent; border-left:10px solid rgba(247,247,247,1); border-right:none; z-index:2; }
#arrow_bd { position:absolute; left:0; top:9px; border:10px solid transparent; border-left:10px solid rgba(0,0,0,.2); border-right:none; z-index:1; }
#notice > h3.notice_t { margin:0 0 0 82px; font-size:30px; color:#333; font-family:'GmarketSansBold'; }
#notice > .notice_more { position:absolute; left:350px; top:2px; }
#notice > .notice_more a { display:block; width:35px; height:35px; line-height:35px; border-radius:100%; background:rgba(167,163,136,1); font-size:16px; color:#FFF; text-align:center; -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 { -ms-transform:rotate(0deg); -webkit-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 { -ms-transform:rotate(180deg); -webkit-transform:rotate(180deg); transform:rotate(180deg); }
#notice .cont { width:100%; margin-top:15px; }
.sect_4 { width:100%; height:100vh; background:rgba(250,249,242,1); }
.sect_4 h3.recomm_mtitle { font-size:30px; color:#333; text-align:center; font-family:'GmarketSansBold'; }
.sect_4 .recomm_stitle { font-size:16px; color:#888; text-align:center; line-height:16px; margin-bottom:40px; }
.TtbanWrap { position:relative; width:100%; max-width:1200px; margin:0 auto; }
.TtbanWrap:before,
.TtbanWrap:after { content:''; display:block; }
.TtbanWrap:after { clear:both; }
.Ttban { position:relative; float:left; width:100%; }
.Ttban .Ttban_items { display:flex; flex-wrap:wrap; justify-content:flex-start; white-space:nowrap; overflow:hidden; -webkit-transition:all 1s 1s; -moz-transition:all 1s 1s; -o-transition:all 1s 1s; transition:all 1s 1s; }
.Ttban .Ttban_items li { position:relative; width:33.333%; height:500px; text-align:center; overflow:hidden; cursor:pointer; box-sizing:border-box; -webkit-transition:all .3s ease-out; -moz-transition:all .3s ease-out; -o-transition:all .3s ease-out; transition:all .3s ease-out; }
.Ttban .Ttban_items li .Ttban_bg { position:absolute; top:0; left:50%; width:600px; margin-left:-300px; }
.Ttban .Ttban_items li .Ttban_bg:before { position:absolute; top:0; left:0; content:''; width:100%; height:100%; background:#000; opacity:.3; transition:opacity .5s ease-out; z-index:9; }
.Ttban .Ttban_items li .Ttban_bg > img { display:block; max-width:100%; height:auto; }
.Ttban .Ttban_items li .Ttban_info { position:relative; top:35%; padding:0 30px; transition:top .3s ease-out; z-index:99; }
.Ttban .Ttban_items li .Ttban_info i { font-size:60px; color:#FFF; text-align:center; }
.Ttban .Ttban_items li .Ttban_info span { display:block; font-size:13px; color:#D1D1D1; margin:5px 0 5px; }
.Ttban .Ttban_items li .Ttban_info h3 { font-size:20px; font-family:'GmarketSansLight'; color:rgba(255, 255, 255, .7); }
.Ttban .Ttban_items li .Ttban_info .picto { position:absolute; top:35%; left:50%; width:auto; margin:30px 0 0 -23px; -webkit-transition:all .5s ease; -moz-transition:all .5s ease; transition:all .5s ease; opacity:0; filter:alpha(opacity=0); -moz-opacity:0; }
.Ttban .Ttban_items li:hover .picto,
.Ttban .Ttban_items li:focus .picto { top:100%; opacity:1; filter:alpha(opacity=100); -moz-opacity:1; }
.Ttban .Ttban_items li .Ttban_info .picto a i { display:block; width:40px; height:40px; line-height:40px; font-size:30px; color:rgba(255, 255, 255, .5); text-align:center; border:2px solid rgba(255, 255, 255, .5); -webkit-border-radius:50%; -moz-border-radius:50%; -o-border-radius:50%; border-radius:50%; -webkit-transition:all .5s ease; -moz-transition:all .5s ease; transition:all .5s ease; }
.Ttban .Ttban_items li .Ttban_info .picto a:hover i,
.Ttban .Ttban_items li .Ttban_info .picto a:focus i { background:rgba(255, 255, 255, 1); color:rgba(0, 0, 0, 1); }
.nd_grid_1 > * { width:33.3333334%; }
.sect_5 { width:100%; height:100vh; }
#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:243px; padding:55px; background:rgba(125,105,79,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(200,180,154,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; }
.nodepop { position:absolute; width:540px; height:332px; left:50%; top:176px; margin-left:-270px; z-index:9; }
#popWrapper { float:left; width:540px; }
#popWrapper .popImg { width:540px; height:300px; }
#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; }