@charset "utf-8";  
 
input { font-family:'NotoSansKR' ; font-weight:400 }
body.navOpen { overflow:hidden }
#main { width:100% ; padding-top:6rem ; margin:0 auto 10rem }



/* Header */
#header , .header__container { width:100% }
#header { 
    min-height:6rem ;
    position:fixed ; left:0 ; top:0 ; z-index:95 ;
    background-color:#ffffff ; box-shadow:0 0 0.3rem rgba(0,0,0,0.3) ;
}
.navOpen #header   { background-color:#f58220 ; text-shadow:none ; transition:0.3s all }
.header__container { position:relative }

#company_logo {
    display:block ; overflow:hidden ; width:8rem ; height:3rem ;
    font-size:0 ; color:transparent ;
    background:no-repeat 0 0 ; background-size:20.3rem auto ;
    position:absolute ; left:1rem ; top:1rem
} 
.navOpen #company_logo { display:none }

#logo , #logo > a { 
    display:block ; width:13rem ; height:4.7rem ;
    font-size:0 ; color:transparent ;
}
#logo { position:absolute ; left:50% ; top:0.6rem ; transform:translateX(-50%) }
#logo > a { overflow:hidden ; background:no-repeat left center ; background-size:33rem auto }
.navOpen #logo > a { background-position:left bottom }

#company_logo , #logo > a { background-image:url(../img/sprite.png) }

#nav_open , #nav_open > b , #nav_open span { 
    display:block ; position:absolute ;
    font-size:0 ; color:transparent ; 
}
#nav_open , #nav_open > b { width:4rem ; height:4rem }
#nav_open  { right:0.5rem ; top:1rem }
#nav_open > b , #nav_open span { left:50% ; top:50% ; transform:translate(-50%,-50%) }
#nav_open span { 
    width:1.8rem ; height:0.2rem ; transition:0.3s all ;
    background-color:#222222 ; 
} 
#nav_open span:nth-child(1) , #nav_open:hover span:nth-child(3) { top:35% }
#nav_open span:nth-child(2) { top:50% }
#nav_open span:nth-child(3) , #nav_open:hover span:nth-child(1) { top:65% }

#nav_open:hover span { background-color:#043b72 } 
#nav_open:hover span:nth-child(2) {  transform:translate(-50%,-50%) rotate(180deg)} 

.navOpen #nav_open span:nth-child(2) { opacity:0 } 
.navOpen #nav_open span:nth-child(1) , 
.navOpen #nav_open span:nth-child(3) { top:50% ; background-color:#ffffff ;  width:2rem }
.navOpen #nav_open span:nth-child(1) { transform:translate(-50%,-50%) rotate(45deg) } 
.navOpen #nav_open span:nth-child(3) { transform:translate(-50%,-50%) rotate(-45deg) } 

.navOpen #nav_open:hover span:nth-child(1) { transform:translate(-50%,-50%) rotate(135deg) } 
.navOpen #nav_open:hover span:nth-child(3) { transform:translate(-50%,-50%) rotate(45deg) } 

 

/* Nav */
#nav { 
    display:block ; width:100vw ; height:100vh ; background-color:#ffffff ;
    position:fixed ; left:-101vw ; top:0 ; z-index:94 ; 
    padding:7rem 0 
}
.navOpen #nav { left:0 ; transition:0.5s all }
#nav::after {
    display:block ; content:"" ; width:14rem ; height:5.1rem ;
    background:url(../img/sprite.png) no-repeat left top ; background-size:35.6rem auto ;
    position:absolute ; right:5% ; bottom:1rem ;

}
.nav__container { display:none ; width:100% ; height:100% ; overflow:auto }
.navOpen .nav__container { display:block }
 
#allSearch_form  , #nav__box , #related_site { width:90% ; margin:auto }

#allSearch_form { margin-bottom:1.5rem }

.as__container { 
    display:block ; position:relative ;
    font-size:0 ; border-bottom:solid 0.3rem #f58220 ;  
    width:100% ; padding-right:5rem ;
}
#as_Word { 
    width:100% ; padding:1rem 0.5rem 1.2rem ;
    font-size:1.8rem ; line-height:2.8rem ; 
}
#as_btn_submit , #as_btn_submit::before , .icon__search { display:block ;  width:4rem ; height:5rem ; }
#as_btn_submit {
    overflow:hidden ; 
    position:absolute ; right:0 ; top:0 ;
    font-size:0 ; color:transparent
} 
.icon__search { transition:0.3s all ; position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) }
.icon__search::before , .icon__search::after { display:block ; overflow:hidden ; content:"" ; position:absolute }
.icon__search::before { 
    width:1.4rem ; height:1.4rem ; border-radius:100% ;
    border:solid 0.2rem #f58220; 
    left:47% ; top:47% ; transform:translate(-50%,-50%)
}
.icon__search::after { 
    width:0.9rem ; height:0.2rem ;  
    background-color:#f58220 ;
    left:66% ; top:66% ; transform:translate(-50%,-50%) rotate(45deg)
}
#as_btn_submit:hover .icon__search { transform:translate(-50%,-50%) scale(1.1) }



/* nav list */
.nav__list , .nav__item , .nav__link , .nav__item__btn { width:100% }
.nav__list { margin-bottom:2rem }
.nav__item { border-bottom:solid 1px rgba(0,0,0,0.1) ; position:relative }
.nav__link { display:none }

.nav__link , .nav__item__btn , .nav__item__btn::after , .nav__item__btn::before , 
.nav__sub__link , .nav__sub__link::after ,
.nav__sub__show .nav__sub { transition:0.3s all }

.nav00 , .nav91 , .nav__item__btn { display:block }
.nav__link , .nav__item__btn {
    padding:1rem 0.5rem 1.2rem ; text-align:left ;
    font-size:1.8rem ; line-height:2.8rem ; font-weight:500  ; 
    position:relative ;
}
.nav__sub__show .nav__item__btn ,
.nav__link:hover , .nav__link.now , .nav__item__btn:hover , .nav__item__btn.now { color:#f58220 }
.nav__item__btn::after { 
    display:block ; content:"" ; width:0.6rem ; height:0.6rem ; 
    border:solid 1px #111111 ; border-top:none ; border-left:none ;
    position:absolute ; right:1rem ; top:46% ; transform:translate(-50%,-50%) rotate(45deg) ;
    opacity:0.5 ;
} 
.nav__item__btn:hover::after { 
    transform:translate(-50%,-50%) rotate(45deg) scale(1.1) ;
    opacity:1 ;
}

.nav__sub__show .nav__item__btn::after {
    border-color:#f58220 ; border-width:0.2rem ;
    top:52% ; opacity:1 ;
    transform:translate(-50%,-50%) rotate(225deg) ;
}
 
.nav__sub { display:block ; padding:0 ; height:0 ; overflow:hidden }
.nav__sub__show .nav__sub { padding:0.5rem 0 1.5rem ; height:auto }
.nav__sub__list { display:none ; padding:0 0.5rem }
.nav__sub__show .nav__sub__list { display:block }
.nav__sub__link { 
    display:block ; padding:1rem 0.5rem 1.2rem ;
    font-size:1.6rem ; line-height:2rem ; word-break:keep-all ;
    position:relative ;
}
.nav__sub__link:hover , .nav__sub__link.now { color:#111111 }
.nav__item__btn::before  , .nav__sub__link::after { 
    display:block ; overflow:hidden ; content:"" ; width:0 ; height:1px ;
    background-color:rgba(0,0,0,0.1) ; 
    position:absolute ; left:0 ; bottom:0 ;
}
.nav__item__btn::before , .nav__sub__link.now::after { background-color:#f58220 }
.nav__sub__show .nav__item__btn::before  , 
.nav__sub__link:hover::after , .nav__sub__link.now::after { width:100% } 



/* Related site */
#related_site { width:100% ; margin:0 auto 3rem ; text-align:center ; font-size:0 }
.related__site__item { display:inline-block ; margin:0 1.5rem 1.5rem ; padding-top:0.5rem }
.related__site__link { 
    transition:0.3s all ;
    display:block ; font-size:1.4rem ; line-height:2rem ; word-break:keep-all ; opacity:0.7 }
.related__site__link:hover { opacity:1 ; color:#111111 } 
.related__site__item.app   { padding-top:0 } 
.app .related__site__link  {
    background-color:#043b72 ; padding:0.5rem 1.5rem ; border-radius:4rem ;
    color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.2) ;
    opacity:1 ;
}
.app .related__site__link:hover { background-color:#f58220 }




/* Close(X) Button  */
.close__btn , .close__btn::before , .close__btn::after { transition:0.3s all }
.close__btn {
    display:block ; overflow:hidden ; width:2rem ; height:2rem ; margin:0 auto 1.5rem ;
    font-size:0 ; color:transparent ; position:relative ;
    opacity:0.2 ;
}
.close__btn:hover { opacity:0.8 }
.close__btn::before , .close__btn::after {
    display:block ; content:"" ; width:1.6rem ; height:1px ;
    background-color:#111111 ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;

}
.close__btn::before { transform:translate(-50%,-50%) rotate(45deg) }
.close__btn::after  { transform:translate(-50%,-50%) rotate(-45deg) }
.close__btn:hover::before { transform:translate(-50%,-50%) rotate(135deg) }
.close__btn:hover::after  { transform:translate(-50%,-50%) rotate(45deg) }



/* Footer */
#footer , .footer__header , .footer__body , .footer__container , .footer__nav { width:100% ; margin:auto }
.footer__header , .footer__body { padding:3rem 1.5rem }
.footer__header { border-top:solid 1px rgba(0,0,0,0.1) }  
.footer__body   { background-color:#e4e4e0  }
.footer__nav    { font-size:0 ; text-align:center ; margin-bottom:2rem } 
.footer__nav__item { display:inline-block ; margin:0.3rem }
.footer__nav__link , #family_open { font-size:1.4rem ; line-height:2.8rem ; padding:0.6rem 1.3rem ; border-radius:0.4rem }
.footer__nav__link { display:block ; background-color:#f6f6f6 ; transition:0.3s all }
.footer__nav__link:hover { background-color:#111111 ; color:#ffffff } 



/* Footer Family */
body.family { overflow:hidden }
#family_open , #family_open::after { transition:0.3s all } 
#family_open { 
    display:inline-block ; padding-right:5rem ;
    position:relative ; background-color:#043b72 ; 
    color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.2) ;  
}
#family_open::after {
    display:block ; content:"" ; width:0.8rem ; height:0.8rem ; 
    border:solid 1px #ffffff ; border-top:none ; border-left:none ;
    position:absolute ; right:1rem ; top:44% ; transform:translate(-50%,-50%) rotate(45deg) ;
}
.family #family_open , #family_open:hover { background-color:#111111 } 
.family #family_open::after { top:50% ; transform:translate(-50%,-50%) rotate(225deg) }

.family #family_popup { transition:0.3s all }
#family_popup , .family__scroll { width:100% ; height:100% }
#family_popup { 
    position:fixed ; left:-101% ; top:0 ; z-index:96 ;
    background-color:rgba(0,0,0,0.6) ; text-align:left ;
}
.family #family_popup { left:0 }
.family__container    {
    display:none ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
    width:90% ; height:90% ; padding:1.5rem 0.1rem 3rem 2rem ;  
    background-color:#ffffff ; border-radius:0.6rem ;
}
.family .family__container { display:block }

.family__scroll { overflow:auto }
.family__col    { padding-right:2rem ; margin-bottom:4rem }
 
.family__title { 
    font-size:1.6rem ; line-height:2.8rem ; color:#111111 ; font-weight:500 ; 
    border-bottom:solid 0.2rem #f58220 ; margin-bottom:1rem ; padding-bottom:0.5rem ;
}
.family__list  { margin-bottom:2rem ; font-size:0 }
.family__col:last-child , .family__list:last-child { margin-bottom:0 }
.family__list li { 
    font-size:1.4rem ; line-height:2.8rem ; padding:0.2rem 0.2rem 0.4rem ;
    display:inline-block ; width:33% ; min-width:24rem ; 
}
.family__list a  { font-size:inherit ; color:inherit ; line-height:inherit }
.family__list a:hover { color:#111111 }

#family__close { 
    position:absolute ; left:50% ; bottom:0.5rem ; transform:translateX(-50%) ;
    margin:0 ; opacity:0.7 ;
}

.footer__container { text-align:center ; font-size:0 }
#footer_logo , #waqm_logo { 
    display:inline-block ; height:6rem ; margin:0.2rem 1rem ; 
    background:url(../img/sprite.png) no-repeat ; background-size:42rem auto }

#footer_logo { width:16.5rem ; background-position:left top }
#waqm_logo   { width:7.5rem ; background-position:-16.5rem 0 }
#copyright   { 
    display:block ; padding-top:2rem ;
    font-size:1.4rem ; line-height:2.4rem ; word-break:keep-all ; text-align:center ; color:rgba(0,0,0,0.5)
}



/* Aside */ 
#aside { 
    width:5rem ;
    position:fixed ; right:-7rem ; bottom:1rem ; z-index:90 }
.sticky #aside { right:0.5rem }

.aside__list { margin-bottom:0.5rem }
.aside__item , .aside__goTop ,
.aside__link , .aside__link::before , .aside__goTop { 
    display:block ; width:5rem ; height:5rem  ;
    border-radius:100% ; box-sizing:border-box
}
.aside__item.event , .aside__item.result { display:none }
.aside__link , .aside__link::before , .aside__link > b , .aside__link > span ,
#aside , .aside__goTop , .aside__goTop::before { transition:0.3s all }
.aside__link { position:relative ; background-color:#ffffff }
.aside__link::before , .aside__link > b , .aside__link > span , .aside__goTop::before { 
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) } 
.aside__link::before { content:"" ; border:solid 1px rgba(0,0,0,0.1) }

.aside__link > b { 
    display:block ; word-break:keep-all ; width:96% ; 
    font-size:1.2rem ; line-height:1.4rem ; color:#595959 ; text-align:center ;
}
.aside__link > span { 
    display:block ; width:6rem ; height:6rem ;
    background:url(../img/sprite.png) no-repeat ; background-size:42rem auto ; opacity:0 ;
    transform:translate(-50%,-50%) scale(0)
}
.event .aside__link > span  { background-position:-24rem 0 }
.result .aside__link > span { background-position:-30rem 0 }
.subs .aside__link > span   { background-position:-36rem 0 }

.aside__link:hover > b { opacity:0 } 
.aside__link:hover > span { opacity:1 ; transform:translate(-50%,-50%) scale(0.8) } 

.aside__goTop { background-color:#043b72 ; font-size:0 ; position:relative }
.aside__goTop::before {
    display:block ; content:"" ; top:52% ;
    width:0.8rem ; height:0.8rem ; 
    border:solid 0.2rem #ffffff ; border-right:none ; border-bottom:none ; 
    transform:translate(-50%,-50%) rotate(45deg)
}
.aside__goTop:hover { background-color:#111111 }
.aside__goTop:hover::before { border-color:#f58220 ; transform:translate(-50%,-50%) rotate(45deg) scale(1.1)}






@media screen and (min-width:1024px){ 
    /* PC */ 

    #main { padding-top:18rem ; margin-bottom:12rem }
    .header__container , .nav__container , .footer__container { width:90% ; max-width:128rem ; margin:auto }
    


    /* Header */
    #header { min-height:auto ; height:9rem ; box-shadow:none }
    #header::before { 
        display:block ; content:"" ; width:100% ; height:1px ;
        background-color:#e5e5e5 ; 
        position:absolute ; left:0 ; bottom:0 ;
    } 

    .header__container { height:100% ; position:relative }

    #company_logo , #logo , #logo > a { width:16.5rem ; height:6rem }
    #company_logo { left:0 ; top:1rem } 
    #company_logo , #logo , #logo > a { background-size:42rem auto }
    #logo { left:50% ; top:50% ; transform:translate(-50%,-50%) } 
    #nav_open  { display:none }
 


    /* Nav */
    #nav , .nav__container { padding:0 ; height:6rem }
    
    #nav { width:100% ; z-index:96 }
    .sticky #nav { box-shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, 0.05) }
    #nav , .navOpen #nav { 
        background-color:#ffffff ; 
        left:0 ; top:9rem ; 
    }
    #nav::after     { display:none }
    .nav__container { position:relative ; overflow:inherit }
    .nav__container , .navOpen .nav__container { display:block }
    .nav__container::after { display:block ; content:"" ; clear:both }

    #allSearch_form { float:right ; width:16% }
    #nav__box { float:left ; width:81% ; position:relative ; text-align:center }  

     


    /* Related site */
    #related_site , .related__site__item  { margin:0 }
    #related_site { 
        width:37rem ; text-align:right ;
        position:absolute ; right:0 ; top:-6rem ; 
    }
    .related__site__item { margin-left:2rem }
    .related__site__item:first-child { margin-left:0rem }
    .related__site__link    { padding-bottom:0.2rem }



    /* All search */
    #allSearch_form { margin:0 } 
    .as__container { border:0 ; position:relative ; padding:0.5rem 5rem 0.5rem 0 }
    .as__container::before , #nav__box::before {
        display:block ; content:"" ; width:100% ; height:0.3rem ;
        background-color:#f58220 ;
        position:absolute ; left:0 ; bottom:0 ;
    }
    #nav__box::before { background-color:#043b72 } 
    #as_btn_submit { top:50% ; transform:translateY(-50%) }
    .nav__item.home , .nav__item.event { display:none }

    #as_Word , .nav__item__btn { font-size:1.6rem } 



    /* nav list */
    .nav__list { width:100% ; text-align:center ; margin:0  }
    .nav__item { 
        width:auto ; display:inline-block ; position:relative ;
        padding:0.5rem 0 ; margin:0 }
    .nav__item.sub10 { width:20% }    
    .nav__item.sub20 , .nav__item.sub40 { width:21.8% }
    .nav__item.sub30 { width:29% } 
    .nav__item__btn  { padding:1rem 0.5rem 1.2rem ; text-align:center }
    .nav__sub__show .nav__item__btn ,
    .nav__item__btn:hover { color:#000000 }
    .nav__item__btn.now , .nav__item__btn.now:hover { color:#f58220 }
    .nav__item__btn::before , .nav__item__btn::after { display:none }

    .nav__sub , .nav__sub__list { width:100% }
    .nav__sub { 
        position:absolute ; left:0 ; top:6.5rem ; 
        width:100% ; opacity:0 ;
    }
    .nav__sub__show .nav__sub { padding:0 ; height:auto ; opacity:1 ; top:5.5rem }
    .nav__sub__list { 
        background-color:#043b72 ;
        border-radius:0.6rem ; padding:1rem ;
    } 
    .nav__sub__link {  
        line-height:2.2rem ; text-align:center ; font-weight:300 ; color:rgba(255,255,255,0.9) ;
        text-shadow:0 0 0.3rem rgba(0,0,0,0.2) ;  
        border-bottom:solid 1px rgba(255,255,255,0.1) ;
    }
    .nav__sub__item:last-child .nav__sub__link { border-color:rgba(255,255,255,0) } 
    .nav__sub__link::after {
        left:50% ; bottom:-1px  ; transform:translateX(-50%) ;
        background-color:#f58220 ; width:0 ;
    }
    .nav__sub__link:hover , .nav__sub__link.now { color:#ffffff  } 
    .nav__sub__link:hover::after { width:100% }

    #nav_close {
        position:absolute ; right:16.5% ; bottom:0 ; margin:0 ;
        width:0 ; height:0 ; opacity:0 ;
    }
    #nav_close:focus { width:2rem ; height:2rem ; opacity:1 }

 

    /* Footer */
    .footer__header , .footer__body , .footer__container { position:relative ; border:none ; padding:0 }
    .footer__header::before , .footer__body::before {
        display:block ; content:"" ; width:100% ; height:1px ;
        background-color:#000000 ; opacity:0.1 ;
        position:absolute ; left:0 ; top:0 
    }
    .footer__header .footer__container { padding-right:20rem }
    .footer__header .footer__container::after , .footer__nav::after { display:block ; content:"" ; clear:both }  
    .footer__nav { width:100% ; margin:0 ; padding:1rem 0  }
    .footer__nav__item { 
        display:block ; float:left ; 
        padding:0 2rem 0 0 ; margin:0 2rem 0 0 ;
        position:relative }
    .footer__nav__item::after { 
        display:block ; content:"" ; width:1px ; height:1rem ; 
        background-color:rgba(0,0,0,0.1) ;
        position:absolute ; right:0 ; top:50% ; transform:translateY(-50%) ;
    }  
    .footer__nav__item:last-child { margin-right:0 ; padding-right:0 }  
    .footer__nav__item:last-child::after { display:none } 
    .footer__nav__link { 
        font-size:1.4rem ; line-height:2.8rem ; border-radius:0 ;
        padding:0.1rem 0 ; background:none ;
    }
    .footer__nav__link:hover { background:none ; color:#111111 }
    #family_open {
        display:block ; width:17.96875% ; max-width:23rem ; border-radius:0 ; padding:1.1rem 1.5rem ;
        position:absolute ; right:0 ; top:50% ; transform:translateY(-50%) ;
        font-size:1.4rem ; line-height:2.8rem ; 
    }



    /* Footer Family */
    body.family   { overflow:inherit }
    #family_open  { text-align:left }
    #family_popup , .family__container , .family__scroll { width:100% ; height:auto ; transform:none }
    #family_popup { 
        position:absolute ; left:0 ; bottom:6rem ; top:auto ;
        background:none ; overflow:hidden ; height:0 ;
    }
    .family #family_popup { overflow:inherit ; height:auto }
    .family__container    { 
        position:static ; padding:3rem 4rem ;
        background-color:#ffffff ; border:solid 1px rgba(0,0,0,0.1) ; border-radius:0.6rem ;
        box-shadow:0 0 0.3rem rgba(0,0,0,0.2) ;
    }
    .family__scroll     { overflow:inherit }
    .family__scroll::after , .family__col.global::after { display:block ; content:"" ; clear:both }
    .family__col        { padding:0 }
    .family__col.kor    { float:left ; width:20% }
    .family__col.global { float:right ; width:76.6666% }
    .family__list li { width:100% ; display:block ; min-width:0 }
    .family__col.global .family__list { float:left ; width:33.3333% ; margin:0 }

    #family__close { left:auto ; bottom:auto ; top:3.5rem ; right:4rem ; transform:none }

    .footer__body { padding:4rem 0 }
    .footer__body::before { opacity:0.05 }
    .footer__container { text-align:left }
    #footer_logo , #waqm_logo , #copyright { margin:0 }
    #footer_logo { margin-right:1rem }
    #waqm_logo   { margin-right:5rem }
    #copyright   { 
        width:auto ; display:inline-block ; padding:2rem 0 2.2rem ; 
        font-size:1.4rem ; line-height:1.8rem 
    }
 


    /* Aside */
    #aside         { width:6rem ; bottom:1rem }
    .sticky #aside { right:0 }
    .aside__item.event , .aside__item.result { display:block }
    .aside__item , .aside__link , .aside__link::before , .aside__goTop { 
        width:6rem ; height:6rem ; border-radius:0 
    }
    .aside__list         { margin:0 }
    .aside__link::before { border-bottom:none } 
    .aside__link:hover > span { transform:translate(-50%,-50%) scale(1) } 
  
} 
    
@media print { 
     
}