@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic|Nanum+Gothic+Coding&display=swap');
/*font-family: 'Nanum Gothic', sans-serif;
font-family: 'Nanum Gothic Coding', monospace;*/

*{margin:0; padding:0}
li{list-style:none}
a{text-decoration:none}
img{border:none}

h1,h2,h3,h4,h5,h6,p,div,td,li,th,body,a{font-family: 'Nanum Gothic', sans-serif; font-weight:normal; font-size:14px}


@media all and (min-width:1201px) {
#header{position:fixed; height:80px; background-color:#FFF; width:100%; left:0; top:0;  z-index:9999; border-bottom:1px solid #000}
#header .header_wrap{position:relative;  margin:0 auto; background-color:#FFF}
#header .header_wrap h1{position: relative; height:80px; left:20px; top:10px}
#header .header_wrap #gnb{position:absolute; right:50px; top:0}
#header .header_wrap #gnb>ul{overflow:hidden}
#header .header_wrap #gnb>ul>li{float:left; width:120px; line-height:81px; text-align:center}
#header .header_wrap #gnb>ul>li>a{color:#000}
/*#header .header_wrap #gnb>ul>li:hover{; background-color:#00bbe4; color:#FFF}
#header .header_wrap #gnb>ul>li:hover .sub_gnb{border-left:1px solid #00bbe4; border-right:1px solid #00bbe4}*/
#header .header_wrap #gnb>ul>li>.sub_gnb{height:275px; background-color:#FFF;  display:none; box-sizing:border-box}
#header .header_wrap #gnb>ul>li>.sub_gnb>li>a{font-size:13px; line-height:25px; color:#333; display:block}
#main_top{position:relative; width:100%; height:1080px; overflow:hidden }
#header .header_wrap #gnb>ul>li>.sub_gnb>li>a:hover{ font-weight:bold}
#main_top .main_top_text1{position:absolute; left:50%; margin-left:-800px; top:50%; margin-top:-79px; font-size:60px; color:#00bbe4;opacity:0}
#main_top .main_top_text2{position:absolute; left:50%; top:50%; margin-left:-82.5px; margin-top:-72.5px; display:none}
#main_top .main_top_bg1{position:absolute; left:50%; margin-left:-1280px; top:50%; margin-top:-540px}
#main_top .main_top_bg2{position:absolute; left:50%; margin-left:-173px; top:50%; margin-top:-156px; }

#m_gnb{display:none}
.mob_open{display:none}


section{position:relative; width:100%; height:1080px; overflow:hidden}
/*#door{position:relative; width:100%; height:1080px; overflow:hidden}*/
#door .main_con_img{position:absolute; left:0; top:0; width:100%; height:100%; background-image:url(../img/main_door.jpg); background-position:center; background-repeat:no-repeat; display:none} 
#door .main_con_text{position:absolute; width:690px; height:250px; left:50%; top:50%; margin-top:-230px; margin-left:-140px}
#door .main_con_text h2{position:relative; font-size:48px; color:#FFF; margin-bottom:18px; left:200px; opacity:0; text-shadow:2px 2px 4px rgba(0,0,0,0.5)}
#door .main_con_text .more_btn{position:relative;padding:12px; text-align:center ; background:none; border:1px solid #FFF; color:#FFF; display:block; width:125px; margin-bottom:18px;left:200px; opacity:0}
#door .main_con_text .more_btn:hover{background-color:#FFF; color:#000;}
#door .main_con_text .door_list{position:relative ;overflow:hidden; left:200px; opacity:0}
#door .main_con_text .door_list li{float:left; margin-right:20px}

#inner_gate .main_con_img{position:absolute; left:0; top:0; width:100%; height:100%; background-image:url(../img/main_inner.jpg); background-position:center; background-repeat:no-repeat; display:none} 
#inner_gate .main_con_text{position:absolute; width:690px; height:250px; left:50%; top:50%; margin-top:-130px; margin-left:-580px}
#inner_gate .main_con_text h2{position:relative; font-size:48px; color:#FFF; margin-bottom:18px; left:200px; opacity:0; text-shadow:2px 2px 4px rgba(0,0,0,0.5)}
#inner_gate .main_con_text .more_btn{position:relative;padding:12px; text-align:center ; background:none; border:1px solid #FFF; color:#FFF; display:block; width:125px; margin-bottom:18px;left:200px; opacity:0}
#inner_gate .main_con_text .more_btn:hover{background-color:#FFF; color:#000;}

#window .main_con_img{position:absolute; left:0; top:0; width:100%; height:100%; background-image:url(../img/main_window.jpg); background-position:center; background-repeat:no-repeat; display:none} 
#window .main_con_text{position:absolute; width:900px; height:250px; left:50%; top:25%; margin-top:-100px;  margin-left:-450px}
#window .main_con_text h2{position:relative; font-size:48px; color:#333; text-align:center; margin-bottom:18px; top:200px; opacity:0; text-shadow:2px 2px 4px rgba(0,0,0,0.5)}
#window .main_con_text .more_btn{position:relative;padding:12px; text-align:center ; background:none; border:1px solid #000; color:#000; display:block; width:125px; margin:0 auto; margin-bottom:18px; top:200px; opacity:0}
#window .main_con_text .more_btn:hover{background-color:#000; color:#FFF;}

#net .main_con_img{position:absolute; left:0; top:0; width:100%; height:100%; background-image:url(../img/main_net.jpg); background-position:center; background-repeat:no-repeat; display:none} 
#net .main_con_text{position:absolute; width:900px; height:250px; left:50%; top:25%; margin-top:-100px; margin-left:-450px}
#net .main_con_text h2{position:relative; font-size:48px; color:#333; text-align:center; margin-bottom:18px; top:200px; opacity:0; text-shadow:2px 2px 4px rgba(0,0,0,0.5)}
#net .main_con_text .more_btn{position:relative;padding:12px; text-align:center ; background:none; border:1px solid #000; color:#000; display:block; width:125px; margin:0 auto; margin-bottom:18px; top:200px; opacity:0}
#net .main_con_text .more_btn:hover{background-color:#000; color:#FFF;}

#mob_content{display:none}


.controls{position:fixed; right:50px; top:50%; margin-top:-50px}
.controls li{ width:80px; height:20px; background-image:url(../img/control.png); background-position:0 -20px; background-repeat:no-repeat; text-indent:25px; color:#FFF; cursor:pointer; text-shadow:1px 1px 2px #000}
.controls li.active{background-position:0 0; margin-bottom:10px; margin-top:10px}

.side_menu_wrap{position:fixed; left:10px; top:50%; margin-top:-30px}
.side_menu_wrap .side_btn{width:60px; height:60px; float:left; cursor:pointer}
.side_menu_wrap .side_btn img{ width:40px; position:relative; left:10px; top:10px}
.side_menu_wrap .side_text{position:absolute; left:-5px; top:120px; font-size:14px; background-color:#00bbe4; border-radius:12px; padding:5px 10px; line-height:14px; opacity:0; color:#FFF}
.side_menu_wrap .side_menu{position:relative; float:left; overflow:hidden}
.side_menu_wrap .side_menu li{ position:relative;float:left; width:50px; height:50px; background-color:#00bbe4; border-radius:30px; text-align:center; line-height:50px; margin-top:5px; margin-left:5px; left:-300px}
.side_menu_wrap .side_menu li a{display:block;color:#FFF; }

#footer{position:relative;background-color:#222222; color:#FFF; padding:50px 0; line-height:30px; font-size:12px}
#footer .footer_wrap{position:relative; width:1200px; margin:0 auto; overflow:hidden}
#footer .footer_left{position:relative; width:50%; float:left} 
#footer .footer_left address{font-style:normal}
#footer #footer_nav{position:relative; float:right; width:50%}
#footer #footer_nav>ul{overflow:hidden}
#footer #footer_nav>ul>li{float:left}
#footer #footer_nav>ul>li a{color:#FFF; line-height:20px; font-size:12px; display:block; text-align:center; padding:0 20px; margin-bottom:10px}
#footer #footer_nav>ul>li a:hover{color:#CCC}
#footer #footer_nav>ul>li>a{font-size:13px; font-weight:bold; line-height:13px; border-left:1px solid #FFF}
#footer #footer_nav>ul>li:first-child>a{border-left:0}
#footer #footer_nav>ul>li>ul>li{height:20px}
}

@media all and (min-width:601px) and (max-width:1200px) {
#header{position:fixed; height:80px; background-color:#FFF; width:100%; left:0; top:0;  z-index:9999; border-bottom:1px solid #000}
#header .header_wrap{position:relative;  margin:0 auto; background-color:#FFF}
#header .header_wrap h1{position: relative; height:80px; left:20px; top:10px}
#header .header_wrap #gnb{position:absolute; right:50px; top:0}
#header .header_wrap #gnb>ul{overflow:hidden}
#header .header_wrap #gnb>ul>li{float:left; width:95px; line-height:81px; text-align:center}
#header .header_wrap #gnb>ul>li>a{color:#000; font-size:13px}
/*#header .header_wrap #gnb>ul>li:hover{; background-color:#00bbe4; color:#FFF}
#header .header_wrap #gnb>ul>li:hover .sub_gnb{border-left:1px solid #00bbe4; border-right:1px solid #00bbe4}*/
#header .header_wrap #gnb>ul>li>.sub_gnb{height:275px; background-color:#FFF;  display:none; box-sizing:border-box}
#header .header_wrap #gnb>ul>li>.sub_gnb>li>a{font-size:13px; line-height:25px; color:#333; display:block}
#main_top{position:relative; width:100%; height:1080px; overflow:hidden }
#header .header_wrap #gnb>ul>li>.sub_gnb>li>a:hover{ font-weight:bold}
#main_top .main_top_text1{position:absolute; left:50%; margin-left:-800px; top:50%; margin-top:-79px; font-size:60px; color:#00bbe4;opacity:0}
#main_top .main_top_text2{position:absolute; left:50%; top:50%; margin-left:-82.5px; margin-top:-72.5px; display:none}
#main_top .main_top_bg1{position:absolute; left:50%; margin-left:-1280px; top:50%; margin-top:-540px}
#main_top .main_top_bg2{position:absolute; left:50%; margin-left:-173px; top:50%; margin-top:-156px; }

#m_gnb{display:none}
.mob_open{display:none}


section{position:relative; width:100%; height:1080px; overflow:hidden}
/*#door{position:relative; width:100%; height:1080px; overflow:hidden}*/
#door .main_con_img{position:absolute; left:0; top:0; width:100%; height:100%; background-image:url(../img/main_door.jpg); background-position:center; background-repeat:no-repeat; display:none} 
#door .main_con_text{position:absolute; width:690px; height:250px; left:50%; top:50%; margin-top:-230px; margin-left:-140px}
#door .main_con_text h2{position:relative; font-size:30px; color:#FFF; margin-bottom:18px; left:200px; opacity:0}
#door .main_con_text .more_btn{position:relative;padding:12px; text-align:center ; background:none; border:1px solid #FFF; color:#FFF; display:block; width:125px; margin-bottom:18px;left:200px; opacity:0}
#door .main_con_text .more_btn:hover{background-color:#FFF; color:#000;}
#door .main_con_text .door_list{position:relative ;overflow:hidden; left:200px; opacity:0}
#door .main_con_text .door_list li{float:left; margin-right:20px}

#inner_gate .main_con_img{position:absolute; left:0; top:0; width:100%; height:100%; background-image:url(../img/main_inner.jpg); background-position:center; background-repeat:no-repeat; display:none} 
#inner_gate .main_con_text{position:absolute; width:690px; height:250px; left:50%; top:50%; margin-top:-130px; margin-left:-80px}
#inner_gate .main_con_text h2{position:relative; font-size:30px; color:#FFF; margin-bottom:18px; left:200px; opacity:0}
#inner_gate .main_con_text .more_btn{position:relative;padding:12px; text-align:center ; background:none; border:1px solid #FFF; color:#FFF; display:block; width:125px; margin-bottom:18px;left:200px; opacity:0}
#inner_gate .main_con_text .more_btn:hover{background-color:#FFF; color:#000;}

#window .main_con_img{position:absolute; left:0; top:0; width:100%; height:100%; background-image:url(../img/main_window.jpg); background-position:center; background-repeat:no-repeat; display:none} 
#window .main_con_text{position:absolute; width:900px; height:250px; left:50%; top:25%; margin-top:-100px;  margin-left:-450px}
#window .main_con_text h2{position:relative; font-size:30px; color:#333; text-align:center; margin-bottom:18px; top:200px; opacity:0}
#window .main_con_text .more_btn{position:relative;padding:12px; text-align:center ; background:none; border:1px solid #000; color:#000; display:block; width:125px; margin:0 auto; margin-bottom:18px; top:200px; opacity:0}
#window .main_con_text .more_btn:hover{background-color:#000; color:#FFF;}

#net .main_con_img{position:absolute; left:0; top:0; width:100%; height:100%; background-image:url(../img/main_net.jpg); background-position:center; background-repeat:no-repeat; display:none} 
#net .main_con_text{position:absolute; width:900px; height:250px; left:50%; top:25%; margin-top:-100px; margin-left:-450px}
#net .main_con_text h2{position:relative; font-size:30px; color:#333; text-align:center; margin-bottom:18px; top:200px; opacity:0}
#net .main_con_text .more_btn{position:relative;padding:12px; text-align:center ; background:none; border:1px solid #000; color:#000; display:block; width:125px; margin:0 auto; margin-bottom:18px; top:200px; opacity:0}
#net .main_con_text .more_btn:hover{background-color:#000; color:#FFF;}

#mob_content{display:none}

.controls{position:fixed; right:50px; top:50%; margin-top:-50px}
.controls li{ width:80px; height:20px; background-image:url(../img/control.png); background-position:0 -20px; background-repeat:no-repeat; text-indent:25px; color:#FFF; cursor:pointer; text-shadow:1px 1px 2px #000}
.controls li.active{background-position:0 0; margin-bottom:10px; margin-top:10px}

.side_menu_wrap{position:fixed; left:10px; top:50%; margin-top:-30px}
.side_menu_wrap .side_btn{width:60px; height:60px; float:left; cursor:pointer}
.side_menu_wrap .side_btn img{ width:40px; position:relative; left:10px; top:10px}
.side_menu_wrap .side_text{position:absolute; left:-5px; top:120px; font-size:14px; background-color:#00bbe4; border-radius:12px; padding:5px 10px; line-height:14px; opacity:0; color:#FFF}
.side_menu_wrap .side_menu{position:relative; float:left; overflow:hidden}
.side_menu_wrap .side_menu li{ position:relative;float:left; width:50px; height:50px; background-color:#00bbe4; border-radius:30px; text-align:center; line-height:50px; margin-top:5px; margin-left:5px; left:-300px}
.side_menu_wrap .side_menu li a{display:block;color:#FFF; }

#footer{position:relative;background-color:#222222; color:#FFF; padding:50px 0; line-height:30px; font-size:12px}
#footer .footer_wrap{position:relative; width:96%; margin:0 auto; overflow:hidden}
#footer .footer_left{position:relative; width:100%} 
#footer .footer_left address{font-style:normal}
#footer #footer_nav{ display:none}
}


@media all and (max-width:600px) {
#header{position:fixed; height:60px; background-color:#FFF; width:100%; left:0; top:0;  z-index:9999; border-bottom:1px solid #000}
#header .header_wrap{position:relative; background-color:#FFF}
#header .header_wrap h1{position: relative; height:60px; width:120px; margin:0 auto; top:11px}
#header .header_wrap h1 img{width:120px}
#header .header_wrap #gnb{ display:none}
#m_gnb{position:fixed; left:-100%; top:0; width:100%; height:100%; background-color:#1A59E9; z-index:9999}
#m_gnb .mob_close{text-align:center; padding:10px 0; color:#FFF; line-height:40px; font-size:20px; border-bottom:1px solid #FFF}
#m_gnb>ul>li>a{display:block; text-align:center; font-size:14px; color:#FFF; line-height:40px;border-bottom:1px solid #578AFD }
#m_gnb>ul>li>ul{background-color:#104DD8; display:none;overflow:hidden}
#m_gnb>ul>li>ul>li>a{display:block; font-size:13px; color:#FFF; text-align:center; line-height:35px; border-bottom:1px solid #2360EB}
#m_gnb>ul>li:nth-child(5)>ul>li{width:50%; float:left}
.mob_open{position:absolute; left:10px; top:15px}

section{ display:none}
.controls{ display:none}
.side_menu_wrap{display:none}

#mob_content{position:relative; margin-top:40px}
#mob_content>div{position:relative; overflow:hidden; background-position:center; background-size:auto 100%; background-repeat:no-repeat}
#mob_content>div:first-child{ background-image:url(../img/mob_top.jpg)}
#mob_content>div:nth-child(2){ background-image:url(../img/mob_door.jpg)}
#mob_content>div:nth-child(3){ background-image:url(../img/mob_inner.jpg)}
#mob_content>div:nth-child(4){ background-image:url(../img/mob_window.jpg)}
#mob_content>div:nth-child(5){ background-image:url(../img/mob_screen.jpg)}
#mob_content>div>h2{position:absolute; width:100%; font-size:20px; font-weight:bold; color:#FFF; text-align:center; top:30%; text-shadow:2px 2px 4px rgba(0,0,0,0.5)}
#mob_content>div>a.more_btn{position:absolute ;padding:12px; text-align:center ; background:none; border:1px solid #FFF; color:#FFF; display:block; width:100px; top:45%; left:50%; margin-left:-62px; box-shadow:1px 1px 2px rgba(0,0,0,0.5); text-shadow:1px 1px 2px rgba(0,0,0,0.5)}
#mob_content>.mob_screen>h2{top:20%; color:#333}
#mob_content>.mob_screen>a.more_btn{top:35%; color:#333; border-color:#333}


#footer{position:relative;background-color:#222222; color:#FFF; padding:20px 0; line-height:30px; font-size:12px}
#footer .footer_wrap{position:relative; overflow:hidden}
#footer .footer_left{position:relative; width:90%; margin:0 auto} 
#footer .footer_left address{font-style:normal}
#footer #footer_nav{ display:none}
}









.mw{position:fixed; left:50%; margin-left:-45px; bottom:20px; animation-name:mw; animation-duration:2s; animation-iteration-count:infinite; animation-delay:1s}
@keyframes mw{
   0%{ opacity:1}
   50%{opacity:0.5; animation-timing-function:ease-out}
   100%{opacity:1; animation-timing-function:ease-in} 	
}