html, body {font-family: 'NanumSquare', sans-serif, '맑은고딕', '돋움', 'Sans-serif' ,arial; -webkit-text-size-adjust: 100%; }
html, body{overflow: hidden; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; max-width: 100%; overflow-x: hidden; }
html{overflow-y: scroll;}
*{color:#444;}
.hide{display:none;}
::selection {background-color: #ed1b24; color: #fff;}
.mainFooterArea #btn_Top a{color:#fff;}
.mainFooterArea #btn_Top a:before{background-color:#fff;}
.fff{ color:#fff !important;} 


/*ALL Using CSS*/

@media screen and (max-width:767px) {
    .headerArea{position:fixed; width:100%; z-index:8000;}
    .headerArea header h1{width:80px; position:absolute; top:16px; left:20px;}
    .headerArea header h1 a{display:block;}
    .headerArea header > nav > ul{display:none;}   
    #nav-icon{position:absolute; top:20px; right:20px;}
        
    .navBox div{box-sizing:border-box; width:100%; margin:0 auto; z-index:9000; position:relative; height:0;}
    .open + .navBox div{height:100vh;}
    
    .navBox div nav {height:0; overflow:hidden; position: absolute; width: 100%; z-index:9900; -webkit-transition: .4s ease-in-out;  -moz-transition: .4s ease-in-out;  -o-transition: .4s ease-in-out;  transition: .4s ease-in-out;  top:50%; left:50%; transform: translate(-50%, -50%);}
    .open + .navBox div nav{height:auto; transition-delay:0.2s;}
    .navBox div nav ul{text-align:center;}
    
    .navBox div nav ul > li{width:100%; text-align:center; transform: translateY(-10rem);  transition: .5s ease-in-out; opacity:0; padding:20px 0;}
    .navBox div nav ul > li > a{ font-size:35px; font-weight:900; color:#fff; }
    .navBox div nav ul > li > ol {padding-top:10px; }
    .navBox div nav ul > li > ol li{padding:5px 0; font-size:20px; font-weight:400; color:#fff;}    
    
    .open + .navBox div nav ul > li{transform: translateY(0rem);  transition: .5s ease-in-out; opacity:1;}
    .open + .navBox div nav ul > li:first-of-type{transition-delay:200ms;}
    .open + .navBox div nav ul > li:nth-of-type(2){transition-delay:400ms;}
    .open + .navBox div nav ul > li:nth-of-type(3){transition-delay:600ms;}
    .open + .navBox div nav ul > li:last-of-type{transition-delay:800ms;}    
    /*헤더*/  

    .footerArea{padding:20px 40px 20px 20px;}    
    .footerArea *{font-size:14px; line-height:22px;}
    .mainFooterArea{background:rgba(17,12,50,1);}
    .mainFooterArea *{color:#fff;}    
    #btn_Top{ position:fixed; right:0px; bottom:0; transition: .4s linear; opacity:0; transform:rotate(90deg);}
    #btn_Top a{ display:block; color:#444; position:relative; padding-left:30px; font-size:17px; }
    #btn_Top a:before{ position:absolute; content:''; width:25px; height:1px; left:0; top:10px; display:block; background-color:#444;}
    #btn_Top.show{opacity:1; bottom:40px;} 
    
}
/*mobile*/

@media screen and (min-width:768px) and (max-width:1240px) {
    .headerArea{position:fixed; width:100%; z-index:8000;}
    .headerArea header h1{width:140px; position:absolute; top:31px; left:35px;}
    .headerArea header h1 a{display:block;}
    .headerArea header > nav > ul{display:none;}   
    #nav-icon{position:absolute; top:35px; right:35px;}
        
    .navBox div{box-sizing:border-box; width:100%; margin:0 auto; z-index:9000; position:relative; height:0;}
    .open + .navBox div{height:100vh;}
    
    .navBox div nav {height:0; overflow:hidden; position: absolute; width: 100%; z-index:9900; -webkit-transition: .4s ease-in-out;  -moz-transition: .4s ease-in-out;  -o-transition: .4s ease-in-out;  transition: .4s ease-in-out;  top:50%; left:50%; transform: translate(-50%, -50%);}
    .open + .navBox div nav{height:auto; transition-delay:0.2s;}
    .navBox div nav ul{text-align:center;}
    
    .navBox div nav ul:after{content: ''; display: block; clear: both; visibility: hidden;}
    .navBox div nav ul > li{float:left; width:50%; text-align:center; transform: translateY(-10rem);  transition: .5s ease-in-out; opacity:0; padding:50px 0;}
    .navBox div nav ul > li > a{ font-size:60px; font-weight:900; color:#fff; }
    .navBox div nav ul > li > ol {padding-top:20px ; }
    .navBox div nav ul > li > ol li{padding:10px 0; font-size:30px; font-weight:400; color:#fff;}    
    
    .open + .navBox div nav ul > li{transform: translateY(0rem);  transition: .5s ease-in-out; opacity:1;}
    .open + .navBox div nav ul > li:first-of-type{transition-delay:200ms;}
    .open + .navBox div nav ul > li:nth-of-type(2){transition-delay:400ms;}
    .open + .navBox div nav ul > li:nth-of-type(3){transition-delay:600ms;}
    .open + .navBox div nav ul > li:last-of-type{transition-delay:800ms;}    
    /*헤더*/  

    .footerArea{padding:10px 35px 35px 35px;}    
    .footerArea *{font-size:14px; line-height:22px;}
    .mainFooterArea{background:rgba(17,12,50,1);}
    .mainFooterArea *{color:#fff;}    
    #btn_Top{ position:fixed; right:0px; bottom:0; transition: .4s linear; opacity:0; transform:rotate(90deg);}
    #btn_Top a{ display:block; color:#444; position:relative; padding-left:50px; font-size:22px;}
    #btn_Top a:before{ position:absolute; content:''; width:35px; height:1.5px; left:0; top:10px; display:block; background-color:#444;}
    #btn_Top.show{opacity:1; bottom:70px;} 
}
/*tablet*/

@media screen and (min-width:1241px) {   

    .headerArea{position:fixed; width:100%; z-index:8000;}
    .headerArea header h1{width:140px; position:absolute; top:31px; left:65px;}
    .headerArea header h1 a{display:block;}
    .headerArea header > nav > ul{text-align:center; padding-top:45px; }
    .headerArea header > nav > ul > li{display:inline-block; width:250px; text-align:center;}
    .headerArea header > nav > ul > li > a{text-align:center; display:inline-block; font-size:30px; font-weight:900; transition-duration:0.8s;}        
    .headerArea header > nav.topNavW > ul > li > a{color:#ebeaf1;}  
    #nav-icon{position:absolute; top:35px; right:65px;}
        
    .navBox div{box-sizing:border-box; width:1240px; margin:0 auto; z-index:9000; position:relative; height:0;}
    .open + .navBox div{height:100vh;}
    
    .navBox div nav {height:0; overflow:hidden; position: absolute; width: 100%; z-index:9900; -webkit-transition: .4s ease-in-out;  -moz-transition: .4s ease-in-out;  -o-transition: .4s ease-in-out;  transition: .4s ease-in-out;  top:42%; left:50%; transform: translate(-50%, -50%);}
    .open + .navBox div nav{height:auto; transition-delay:0.2s;}
    .navBox div nav ul{text-align:center;}
    
    .navBox div nav ul:after{content: ''; display: block; clear: both; visibility: hidden;}
    .navBox div nav ul > li{float:left; width:25%; text-align:center; transform: translateY(-10rem);  transition: .5s ease-in-out; opacity:0;}
    .navBox div nav ul > li > a{ font-size:65px; font-weight:900; color:#fff;}
    .navBox div nav ul > li > ol {padding:30px 0; }
    .navBox div nav ul > li > ol li{padding:10px 0; font-size:30px; font-weight:400; color:#fff;}    
    
    .open + .navBox div nav ul > li{transform: translateY(0rem);  transition: .5s ease-in-out; opacity:1;}
    .open + .navBox div nav ul > li:first-of-type{transition-delay:200ms;}
    .open + .navBox div nav ul > li:nth-of-type(2){transition-delay:400ms;}
    .open + .navBox div nav ul > li:nth-of-type(3){transition-delay:600ms;}
    .open + .navBox div nav ul > li:last-of-type{transition-delay:800ms;}    
    /*헤더*/  

    .footerArea{padding:10px 0 30px 65px;}    
    .footerArea *{font-size:14px; line-height:22px;}
    .mainFooterArea{background:rgba(17,12,50,1);}
    .mainFooterArea *{color:#fff;}
    #btn_Top{ position:fixed; right:30px; bottom:0; transition: .4s linear; opacity:0; transform:rotate(90deg);}
    #btn_Top a{ display:block; color:#444; position:relative; padding-left:50px; font-size:22px;}
    #btn_Top a:before{ position:absolute; content:''; width:35px; height:1.5px; left:0; top:10px; display:block; background-color:#444;}
    #btn_Top.show{opacity:1; bottom:90px;} 
}
    
/*pc*/